本文将通过3个小Demo
Counter、TodoApp、UserCURD
带大家熟悉"React全家桶"开发流程
写在前面：
欢迎入坑React
有一大堆新技能需要get
语言：ES6（箭头函数、展开运算、解构赋值...）； 思想：模块化（import、export...）； 框架：React、Vue、AngularJS； 支撑：Nodejs、Babel、Webpack； 工具：Intellij IDEA、SublimeText； 还有很多...就不一一列举了...
...开始...
示例1. Counter
1.1. 效果
1.2. 技术栈
- ES6（箭头函数、展开运算符等...）[猛戳查看详情]
- React
- Babel（ES6、JSX语法转换）[猛戳查看详情]
- Webpack（集成Babel、文件打包）
- Webpack-dev-server
1.3. 环境搭建
A. 初始化Nodejs工程
npm init
B. 安装依赖
npm install --save/--save-dev xxxxx
注：npm官方仓库不太稳定、下载速度也慢，可以考虑换“淘宝npm镜像”....
C. 配置Babel：.babelrc
babel在这的用途就是完成ES6、JSX语法转换；
注：像.babelrc这种命名风格的文件，最好使用IDE创建，会避免很多麻烦
；
D. 配置Webpack
D. 增加webpack-dev-server启动命令:
至此
基本环境配置结束
开始编码
1.4. 编码
A. 应用入口HTML：index.html
B. 应用入口JS：index.js
C. Counter组件：Counter.js
D. 运行、测试
1.5. 总结
注：扫码获取Counter完整源码
示例2. TodoApp
2.1. 效果
2.2. 技术栈
- ES6（箭头函数、展开运算符等）[猛戳查看详情]
- React
- Babel（ES6、JSX语法转换）[猛戳查看详情]
- Webpack（集成Babel、文件打包）
- Webpack-dev-server
TodoApp引入了Redux：
- Redux管理应用状态
- 引入css模块
2.3. 环境搭建
A. 初始化Nodejs工程
npm init
注：参考 1.3-A 小节内容；
B. 安装依赖
C. 配置Babel：.babelrc
TodoApp中使用了ES6的“...”语法，由于webpack无法识别，只能借助 babel 的 transform-object-rest-spread 插件完成语法降级转换；
D. 配置Webpack：webpack.config.js
TodoApp 在 JS 模块中使用 import 将 CSS 文件作为模块引入，这么做程序结构更合理，但需要借助 webpack 的 css-loader、style-loader 才能正确打包这种代码；
- css-loader 用于解析使用 import 语法引入的 css 模块；
- style-loader 用于把解析后的 css 作为 style 标签内容插入到 html 中；
注：css-loader与style-loader通常配合使用，且执行顺序为先css-loader、后style-loader；
2.4. 编码
A. 应用入口HTML：index.html
B. 应用入口JS：index.js
TodoApp 使用 Redux 管理应用状态，index.js作为应用入口，创建了Redux的Store并通过Provider接口将Store扩展到整个应用范围中；
## src/index.js
附一篇Redux源码解析，阅读请猛戳
C. State、Action、Reducer：
- State：应用状态结构定义及初值；
- Action：描述了有哪些可能改变应用状态的事件，且只能通过给Redux发Action改变应用状态；
- Reducer：Redux会将收到的Action消息转交给Reducer，并在Reducer中完成状态修改；
## src/reducer/TodoReducer.js
## src/reducer/index.js
D. UI组件：
前面已经用Redux的3要素：State、Action、Reducer完整描述了应用的运行逻辑；接下来就是用React构建UI界面，并与Redux建立数据、动作联系即可；
## src/component/TodoApp.js
## src/component/AddTodo.js
## src/component/VisibleTodos.js
## src/component/TodoFilter.js
E. 运行、测试
2.5. 总结
注：扫码获取TodoApp完整源码
示例3. UserCURD
3.1. 效果
3.2. 技术栈
- ES6（箭头函数、展开运算符等）[猛戳!查看详情]
- React
- Babel（ES6、JSX语法转换）[猛戳!查看详情]
- Webpack（集成Babel、文件打包）
- Webpack-dev-server
TodoApp引入了Redux...
- Redux 管理应用状态
- 引入 css 模块
UserCURD引入了Saga...
- AntDesign（蚂蚁金服的React UI库）
- redux-saga 管理异步逻辑
- react-router、react-router-redux 管理应用路由
- 使用了 ES6 的 decorator 语法（@connect...）
- Fetch API（替换了传统的 Ajax）[猛戳查看详情]
- JSON-Server（伪造后台数据服务接口）
3.3. 环境搭建
A. 初始化Nodejs工程
npm init
注：参考 1.3-A 小节内容；
B. 安装依赖
（依赖比较多....）
C. 配置Babel：.babelrc
最关键的就是transform-decorators-legacy插件，它负责降级转换decorator语法；
（webpack无法直接识别类似@conncet(...)这种语法规则）
D. 配置Webpack
UserCURD 使用 JSON-Server 模拟了一个后台数据服务器，所以需要将与数据处理相关的HTTP请求中转到 JSON-Server 服务器上；
3.4. 总体架构
应用中的所有异步逻辑（请求数据、删除数据等）由redux-saga集中管理、应用的所有状态变化则由redux集中管理；借助这种结构，我们可以将应用的“状态变化”和“异步”这两个概念清晰的分离开；
3.5. 目录结构
应用此时主要由component（UI）、reducer（状态变化）、saga（异步）3部分组成；
3.6. 编码
限于篇幅，只选了一组
Reducer、Saga、Component
进行说明
A. 应用入口JS：index.js
B. 看一个Reducer
reducer只用于处理应用状态改变，异步逻辑应写在saga中；
## src/reducer/userEdit.js
C. 看一个Saga
Saga有2大特性：
- 1. 借助ES6的Generator语法，将异步逻辑以同步的方式书写，便于理解；
- 2. Saga只用于处理异步，异步完成后的状态修改，还需要继续推送Action给Reducer；
## src/saga/userEdit.js
D. 看一个Component
UI组件中不包含业务逻辑，UI全部通过Action将业务操作转发给Saga、Reducer完成；
## src/component/userEdit.js
3.6. 总结
