add conclusion for the project

Author: CTCSU

总结.md

@@ -0,0 +1,142 @@
+### 对从零开始搭建一个react 项目的总结()  
+
+[从零开始搭建一个react项目](https://www.jianshu.com/p/324fd1c124ad)
+
+github:[https://github.com/CTCSU/ct-learn-react](https://github.com/CTCSU/ct-learn-react)
+
+首先说下对这篇文章学习的概况。大概从3/12-4/2，每天平均花费半个小时，也就是一共10个小时来做这个事。时间确实比较零碎，对效率可能有一定的影响。此外，本文的内容有部分有错漏，出现很多问题要一一解决，整体上来说不是特别好。
+
+全篇分为三部分：
+
+1. 环境的构建；
+2. 用React 构建出一个项目；
+3. 使用Redux 对此前的项目进行优化；？
+
+---
+
+#### 环境的构建
+
+1. 安装npm 
+2. 使用npm init 生成package.json 文件
+3. 使用 npm install 安装各种依赖
+   - react ，react-dom, 
+   - webpack, webpack-dev-server
+   - babel (babel-core,babel ...)
+4. 安装其他的内容。
+
+---
+
+#### 项目启动
+
+1. 添加scripts;
+2. 通过命令行启动；
+
+---
+
+#### React 项目 
+
+1. componet
+
+   ```
+   App extends React.Componet{}
+   ```
+
+   
+
+2. set state 方法
+
+3. 通过render 来构建html 的元素
+
+4. React 项目的历程：
+
+   - 在html 中声明div
+   - 使用APP extends React的Componet，用render 方法输出html 元素
+   - 创建组件文件，
+   - 引入组件，并将state 中的值按照props 传下去；并且可以将一些方法也传递进去。
+
+ 在这个过程遇到了两个问题：
+
+1. 读懂webpack.config.js 的配置，将文件的后缀改为jsx后，jsx的文件无法打包、一开始项目指定的目录不一致，导致项目无法启动
+2. js 的格式化问题，使用vscode 时，右下角可以指定js 的类型，要选中react 才能格式化js 中的html 标签
+3. bind 的用法，其实我现在也不太明白；后面再学吧；反正要用bind（null,i) 这样的方式，然后a（i) 就可以接受到i
+4. 在jsx 中使用style 要用style={{"margin-bottom":20px}} 这样的方式
+
+#### 转换成Redux 
+
+1. 创建redux  的modules; 在其中定义state 和一些方法；
+
+2. 创建containers，里面指定如何将state 映射成props 和将方法映射成props，关键是通过dispatch 来做；
+
+   ```
+   connect(mapStateToProps, mapDispatchToProps)(ToDoApp);
+   ```
+
+   
+
+3. 组件需要的那些方法就在props中，通过上面一步就已经将所有的值都放到了props里面去了，同时，原来在state 里面拿的值也需要从props 里面获取；
+
+4. 需要configureStore.js  配置store
+
+```
+import {
+  createStore,
+  applyMiddleware,
+  combineReducers
+} from 'redux'
+import {
+  createLogger
+} from 'redux-logger'
+import toDoApp from './modules/toDoApp'
+
+const loggerMiddleWare = createLogger();
+
+const createStoreWithMiddleware = applyMiddleware(loggerMiddleWare)(createStore);
+
+const reducer = combineReducers({
+  toDoApp
+});
+
+const configureStore = (initialState) => createStoreWithMiddleware(reducer, initialState);
+
+export default configureStore;
+```
+
+通过上面的代码，主要要combinereducer、增加Logger的Middleware层；
+
+同时需要在APP.js 中指定Provider 和Container
+
+```html
+ <Provider store={store}>
+        <ToDoAppContainer />
+      </Provider>
+```
+
+
+
+---
+
+#### 代码结构：
+
+--src
+
+ 	--components
+
+​		--input.jsx
+
+​		--List.jsx
+
+​		--ToDoApp.jsx
+
+​	--containers
+
+​		--toDoAppContainer.js
+
+​	--redux
+
+​		--modules
+
+​			--toDoAppContainer.js
+
+​		--configureStore.js
+
+​	--app.js