React 的特点

1. 使用 JSX 语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
2. 性能高的让人称赞：通过 diff 算法 和 虚拟 DOM 实现视图的高效更新

为什么要用 React

1. 使用组件化开发方式，符合现代 Web 开发的趋势
2. 技术成熟，社区完善，配件齐全，适用于大型 Web 项目（生态系统健全）
3. 由 Facebook 专门的团队维护，技术支持可靠
4. ReactNative - Learn once, write anywhere: Build mobile apps with React
5. 使用方式简单，性能非常高，支持服务端渲染
6. React 非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目

初始化项目

新手还是推荐官方的脚手架，通过npx来进行项目的初始化一个demo项目。

lua
复制代码
npx create-react-app 项目名称

默认生成的目录情况下，项目的解构就是这样的。

lua
复制代码
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----          20.6.15     14:21                public
d-----          20.6.15     16:41                src
-a----          20.6.15     14:21            310 .gitignore
-a----          20.6.15     14:22            746 package.json
-a----          20.6.15     14:21           2884 README.md
-a----          20.6.15     14:22         526017 yarn.lock

随后通过npm 或者 yarn 来将项目跑起来。执行shell后会自动打开一个浏览器，当看到localhost:3000渲染后。那么就可以开启React大门了

arduino
复制代码
#  npm shell 命令
npm run start

# yarn shell 命令
yarn start

组件

众所周知，Vue和React都是组件化解决方案，那么在React中是如何创建一个组件的呢？在React新版本中，推出了React Hooks方案。所以现在主流的还是Class组件和Function组件。

Class组件

Class组件的创建方式非常的简单，只需要创建一个Class类并且让它继承React.Component，在Render方法中return出JSX的模板。

同时通过构造函数，处理Props。并且声明state状态初始化一个对象,将Props挂载到super上。

scala
复制代码
class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
    }
  }
  // render函数
  render () {
    return (
      <div className="App">
        <p>我是Class组件</p>
      </div>
    )
  }
}

Function组件

随着React Hooks发布，开发的主流也渐渐的转入了函数组件，不过Class组件在旧项目中还是会用的。所以都学习一下。对比Class组件，函数组件就非常的简单了。在函数内部返回一个render模板就OK了。如下：

javascript
复制代码
import React from 'react'

function FunctionDemo () {
  return (
    <div>
      我是函数组件
    </div>
  )
}

export default FunctionDemo
```。