React基础知识(一) - React初体验

React是在2013年，由Faceboo开源的，用于构建用户界面的 JavaScript 库。
总所周知啊,React是前端三大框架之一啊
现在前端领域最为流行的是三大框架：
- React
- Vue
- Angular

前端三大框架

React开发的特点：

（1）声明式编程

声明式编程是目前整个大前端开发的模式，目前Vue、React、Flutter、SwiftUI等都是用这种编程范式来开发。
用React开发呢，我们只需要维护自己的状态，当状态改变时，React会根据最新的状态去重新渲染我们的UI界面

（2）组件化开发

用组件化开发的方式去开发页面已经是目前前端的流行趋势，我们只需要把一个复杂的页面划分为一个个小的简单的组件就可以了。

（3）多平台适配

2013年，React发布之初主要是开发Web页面
2015年，Facebook推出了ReactNative，用于开发移动端跨平台
2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程

image.png

React初体验

在React开发之前呢，我们需要引入React的相关依赖
开发React必须依赖三个库

react：包含React所必须的核心代码
react-dom：React渲染在不同平台所需要的核心代码
babel：将jsx代码转换成React代码的工具

如何添加这三个依赖：
方式一：直接CDN引入
方式二：下载后，添加本地依赖
方式三：通过npm管理（脚手架）
我选择了本地引入的方式

react依赖文件

  <script src="../react/react.development.js"></script>
  <script src="../react/react-dom.development.js"></script>
  <script src="../react/babel.min.js"></script>

Hello World

  <div>Header</div>
  <div id="app"></div>
  <div>Footer</div>

  <!-- 添加React的相关依赖 -->
  <script src="../react/react.development.js"></script>
  <script src="../react/react-dom.development.js"></script>
  <script src="../react/babel.min.js"></script>

  <script type="text/babel">
    // jsx代码:
    let message = 'Hello World';
    ReactDOM.render(<h2>{message}</h2>, document.getElementById('app'));
  </script>

结果为:

result

注意点:
1.使用jsx, 并且希望script中的jsx代码被解析,必须在script标签中添加一个type属性, 作用是可以让babel解析jsx的语法
2.ReactDOM.render函数需要传入两个参数：
参数一: 传递要渲染的内容，这个内容可以是HTML的元素，也可以是React的组件
参数二: 将渲染的内容，挂载到哪一个HTML元素上

jsx.png

3.render函数被执行后会将渲染的内容放入到id为app的元素中,若该元素中有别的内容,则会将内容清空后再渲染上去

4.在h2标签的里面放入一个大括号{},{}是jsx的一个语法,{}语法可以引入外部的变量或者表达式,以后的文章我会再次解释

Hello React 组件化实现

知道了基本用法之后我们尝试一下用组件化的方式来实现刚刚的内容

  <div id="app"></div>

  <!-- 引入React的依赖 -->
  <script src="../react/react.development.js"></script>
  <script src="../react/react-dom.development.js"></script>
  <script src="../react/babel.min.js"></script>

  <script type="text/babel">
    // 封装App组件
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          message: 'Hello World'
        }
      }
      render() {
        return (
          <div>
            <h2>{this.state.message}</h2>
          </div>
        );
      }
    }

    ReactDOM.render(<App/>, document.getElementById('app'));
  </script>

结果为: