1. react 学习前的前置条件
在学习 react 之前首先需要熟悉 class 用作用和用法。
2. 学习 class
Class 的作用就是创建构造函数，在 ES5 中我们使用大写字母开头的函数作为构造函数，使用 new 关键字创建它的实例。在拥有class 关键字之后，我们就可以直接使用 class 来定义所有的构造函数及其方法，并使用 new 关键字创造实例。
与 ES5中一致，类的 constructor 方法直指类本身。
在 class 内部的方法就等同于 ES5 中使用 prototype 创建构造函数的原型函数。
我们可以使用 Object.assign 一次性为类创建多个方法。
与 ES5 中不一致的是，class 类必须使用 new 调用。
3. 通过 webpack 搭建开发 react 的开发环境
主要分为一下几个步骤，首先在项目中使用yarn安装react 和 react-dom ，接下来在项目中使用yarn安装babel 、@babel-preset-react 和@babel/preset-env。接着分别在webpack.config.js和.babellrc中进行配置。
4. react 的核心
react是以数据为驱动的单向数据流，同时也是组件化编程。react通过jsx实现组件化编程，接着通过虚拟 DOM进行展示。
5. 通过 manifest实现离线网页
6. JSX
JSX是react所支持的语法，用于在JS中嵌入HTML代码。
在JSX中写代码，所有标签必须闭合、最外层只能有一个元素包裹，并且在使用表达式时必须使用{}。
7. 组件
组件的书写可以分为两种，一种是函数组件，还有一种是使用class声明的组件。
使用组件的时候，第一种方法是我们通过使用props对其进行传参，组件内部不能修改；第二种方法是使用 state，这种方式的数据是私有的，完全受控于组件。需要注意的是，函数式组件只能使用props方式，而class组件两种方式都可以使用。
8. 事件处理
当为组件绑定事件处理函数的时候，所创建的函数必须使用驼峰命名法，并且修改函数的 this 指向问题。
修改 this 指向有三种方法，第一种方法是使用 bind 进行修改；第二种方法是在调用时使用 this.xxx（）；第三种方法是在调用时使用箭头函数。
9. 组件生命周期
必须要明确一点，组件生命周期函数只存在于 class 声明的组件中。
生命周期函数gitInitialState，用于在 state 初始化。
getDefaultProps 用于props默认值。
componentWillMount组件即将挂载，它在生命周期时只会被调用一次，可用于做一些组件内部初始化工作。
componentDidMount组件挂载完毕，在render之后调用，在这个阶段 DOM 已经可以使用。
shouldComponentUpdate决定组件是否需要重新渲染。
componentWillUpdate组件即将更新。
componentDidUpdate组件更新完毕。
componentWillUnmount组件即将被销毁，可用于清除计时器等收尾操作。
10. react 路由
使用react-router进行路由处理。首先安装react-router-dom，在代码中引入 react-router-dom。
嵌套路由
动态路由
带权限的路由
11. react类型检测
12. redux状态管理器
状态管理redux。
在使用redux时，我们所遵循的原则是单向数据流原则；state是只读属性，我们只能使用纯函数对其进行修改。
12.1 安装redux
使用npm i redux -S或yarn add redux进行安装。
12.2 redux四大概念
四大概念分别是store、state、action、reducer。
12.2.1 store
一个应用中只能有一个store，store是一个对象，用于存放整个应用的state。
import { createStore } from 'redux'
const store = createStore(reducer)
12.2.2 state
state是整个应用当前的数据，可以通过store.getState进行获取。
12.2.3 action
action是描述事件发生的对象。必须设置type属性表示要去执行的动作。
const action = {
type: 'ADD_TODO', // 事件类型
payload: 'learn redux' // 该 action 所携带的数据
}
定义好事件类型之后，使用store.dispatch()触发事件。
12.2.4 reducer
reducer是描述该怎么更新state的函数。reducer接受两个参数，第一个参数是初始化的state，第二个参数是action。
function reducer(state="javascript", action) {
switch(action.type) {
case: 'HTML':
return 'this is html'
break
case: 'javascript':
return 'this is javascript'
break
default:
return state
}
}
12. react-redux
使用yarn add react-redux进行安装。
react-redux可以使组件通过 this.props的方式获取store中的state。
在react-redux中组件分为两类，分别是UI组件和容器组件。
在这两种组件中，有两个组件非常重要，分别是Provider组件和connect组件，Provider组件作为react的顶层组件，接受store作为props，所有自组件通过props获取数据。connect组件使UI组件升级为容器组件。
