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必须依赖三个库

1. react：包含React所必须的核心代码
2. react-dom：React渲染在不同平台所需要的核心代码
3. 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

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>

结果为:

result.png

• 现在的代码暂时作为React的初体验而已,后面会有文章来解释这些语法
• 先动手试试吧,写你的第一份react代码,加油!