1-2 前置准备
开发环境：
Node.js(v8.2+)
NPM(v5.2+)
Visual Studio Code(VS Code)
VS Code常用插件：
Prettier-Code formatter 格式化代码
Reactjs code snippets 快速生成 react 常用模块化代码
Auto Rename Tag 对相关标签重命名时，对应标签相应改变
主要依赖库版本(需高于以下版本)：
React: ^16.4.1
Redux: ^4.0.0
React Redux: ^5.0.7
React Router: ^4.3.1
2-1 创建项目结构
React项目脚手架： create-react-app
零配置创建 React 应用 （不需要配置babel和webpac等）
构建： JS、CSS、图片 （资源打包构建）
开发效率： 自动刷新、代理转发、单元测色等
create-react-app 的使用
新建项目：npx create-react-app [项目名] （npm >= 5.2）
在命令面板安装 code 就可以在终端中使用 code 可以在vs code 中快速打开项目
package.json
{ "name": "dz-app", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.10.1", "react-dom": "^16.10.1", "react-scripts": "3.1.2" //其他的相关依赖都封装到了react-script中，webpack。babel等 }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", //测试 "eject": "react-scripts eject" //将原本相关配置的封装弹射出来，将wepack.cofig在项目中显现出来 },
使用 Mock 数据
方式一： 代理到 mock 服务器 （通过开启一台mock服务器，将mock数据放到该服务器上，将前端请求转发到这个服务器上）
npm install -g serve 安装服务
在package.json 中配置
“”proxy“: {
"/api": {
"target": "http://localhost:5000"
}
}
方式二：直接将 mock 数据放到项目 public 文件夹 （public 中新建 mock 文件夹 > data.json 文件） 通过localhost：3000/mock/data.json 就能访问
原因是：public 文件夹的静态资源是不会被构建的，打包后直接放到项目中使用的
3-1 组件划分
组件划分原则
解耦：降低单一模块／组件的复杂度
复用：保证组件一致性，提升开发效率
组件颗粒度需要避免过大或过小
3-2 编写静态组件
开发过程解耦：静态页面和动态交互
组件开发顺序：自上而下 or 自下而上
App -> TodoList -> Todo -> AddTodo -> Footer
3-3 如何设计 State
什么是 State？
代表 UI 的完整且最小状态集合
如何判断一个变量是否是 State
是否通过父组件props 传入？ 通过父组件传入的不是
是否不会随着时间、交互操作变化？ 不会随时间、交互操作的不是
是否可以通过其他 state 或 props 计算得到？ 可通过其他 state 或 props 计算得到的不是，有冗余，不符合最小状态集合
3-4 分析 State 保存位置
State 的双层含义
代表应用UI 的所有状态的集合
状态集合中的每一部分（待办事项列表、新增输入框文本、筛选条件）
确定依赖 state 的每一个组件
如果某个 state 被多个组件依赖，寻找共同的父组件（状态上移）
3-5 添加交互行为