前言：本来有几个图，不贴是因为是网图侵权了。
首先create-react-app
这是facebook react官方提供的一个nodejs（npm/yarn/cnpm）命令。用于创建react start工程。
- 创建好的工程包括：基础的已经配置好的npm配置文件。以及简单的样例代码和文件结构。
- 查看npm配置文件package.json：工程依赖的包、启动、编译等：依赖于react-script（一个js库/js命令）
- 进而看react-script (node_modules中)：
3.1 它包括已配置好的webpack配置文件
3.2 各个启动命令参数对应的nodejs代码实现
3.3 解读各个命令 & 解读webpack配置文件：
3.3.1 start命令----用nodejs启动web服务，事实上是启动了webpack的WebpackDevServer 。【个人理解：server启动后，这个前端应用服务器会根据webpack的配置，对我们自己的工程代码进行预处理，并发布到web服务。我们在浏览器调试中看到的已发布的前端应用，实际上是实时处理后的结果。实时处理依据的处理原则：应该参见webpack的配置文件。
3.3.2 build命令----在工程中生成build目录，并将处理后的文件发布到该目录下。【根据webpack配置，该目录下的代码是经过babel处理、压缩过后的。那如果使用sass，还可以将sass处理步骤配置到webpack配置文件中，在build时一并处理】【从这个角度来看，我认为可以将webpack类比为java中的ant
3.4 到这里我们会发现，react-script和react本身的关系不大。看上去它仅仅是将webpack进行了封装。那么，它究竟包含了什么？看一下package.json
3.4.1 webpack、babel、eslint（静态检查）等
3.4.2 react的dev tools等。
3.4.3 另外，react-script还设置了REACT相关的环境变量。
3.5 因此，整个react-script，我认为是一个类ant工具（webpack） + 配置好了的基础依赖和基础配置文件。
3.6 因此，对于有了react-script这种工具的我们来说，其实整个工程中的V部分，是不是react并不重要，也可以是vue与它的一些周边库。 - 回到create-react-app，进入source，可以看到基础的react样例代码。可以以此为基础进行开发了。它只有最基本的代码部分，但是调试、编译环境、配置，已经为我们搭建好。
- 我们还是缺少最佳实践：如何组织目录结构进行基于react的前端spa开发？怎么实现MVC？等等。
Redux
0.1 说Redux之前，还是先总结一下React。React的语法不用多说。而React的定位，简单来说是利用JSX实现了可以js和xml混写，实现了用JS对象渲染前端界面的组件化开发思想。
0.2 目前，前端技术的主流思想是，利用ES新语法进行整个前端单页的开发。 最新语法带来的好处是代码简化、api丰富、可读性高等。配合babel实现发布前的预处理（因为很遗憾，主流浏览器现在一般对js仅支持到ES5），我们可以使用高级语法为我们带来拳拳到肉的编码爽快感，而无需在意其它。
0.3 React提供大量而完善周边库实现如：路由、http请求、ui特效等一些前端工程所需要的功能。Redux就是其中一个很重要的库。利用它可以更好地实现SPA。
- Redux【 当然还有 Flux、Reflux、Mobx 等状态管理库可供选择】。基础核心思想是实现状态管理。【Redux 莞式教程】
- Redux可以不和react配合使用，它可以仅作为一个状态管理库。【深入理解React Redux】
- 进阶。react-redux【Redux管理你的React应用】
- 一个重要的细节：在概念上，React组件中都包含一个props对象，可以用它来放组件的属性等。（这是React中的一个重要思想，但在VUE的设计思想上并没有这个概念）。而react-redux则提供了如何将Redux的状态管理和React的props结合的解决方案。
好，我们开始Redux。
Redux 的设计思想很简单，就两句话。 是阮一峰告诉我们的【阮一峰Redux入门教程】
（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。
大神关于Redux文章一共写了三部曲，下面解读阮一峰Redux三部曲：
三部曲之（一）的思想总结：
- store整个应用唯一。
- store中有state，它对应当前应用的状态，因此当前应用只会有一个唯一状态。因此，就能确定的当前的VIEW是什么。
- 当store进行dispatch的时候，入参是action（或者 action creator）。执行完了dispatch，新的state就有了。所以，这时候VIEW就该变化了。所以，VIEW本身做实现的时候，就是根据state的不同，来呈现不同的样貌即可。而VIEW的开发实现利用REACT本身就行。
- 但是VIEW会自动变化吗？显然不会。我们需要给store注册一个监听器，state发生变化的时候，系统就会调用这个监听器。我们在这个监听器里调用比如说全局视图刷新方法，就可以了。
- 如何根据action的不同，来变更state？靠的是reducer。因为全局就一个store，因此仅有一个reducer。但是，在实际的系统中，action会非常多，所以state也会千变万化，所以由action来变化state会有各种逻辑。因此：reducer也会非常庞大。所以，reducer在开发的时候，是可以拆开开发的，然后可以组合起来，这是Redux提供的api支持的。
- state仅仅是一个值吗？不。它是一个对象，或者说是很多值的集合。而在我们设计reducer的时候----开发实现的原则是：一个action过来，只改变state的部分属性。这也是reducer可以拆分的原因。
综述：Redux的哲学。
三部曲之（二）的思想总结：（可以先跳过）
- 中间件是什么？它重写了store.dispatch(action)方法，或者说在这个方法外面又包装了一层。即接收到action了，调用真正的store.dispatch(action)----（实际上这个api中就是redux帮我们去执行reducer方法嘛）前后加入一些逻辑。【中间件的洋葱模型】
- 我们没有必要自己实现中间件，redux里有些现成的好用的中间件可以拿来用的。
- redux中提供了一些中间件，如redux-logger，它肯定意思就是在dispatch的时候打日志嘛。它怎么用？在创建store的时候（createStore），apply（redux的api）一下它，就可以了。但是，注意多个中间件apply的时候次序很重要。
- 有了中间件，就可以搞异步操作了（在实现reducer时，你要写所谓的“纯函数”，这是规定，因为reducer是要更新state的，不能有异步操作）。什么情况下我们需要异步操作？比如请求数据：需要等待数据返回，然后返回成功以后怎样怎样，返回失败以后怎样怎样。这里请求数据是一个action，然后请求成功异步触发一个action，失败一个action。好，你说你自己写逻辑来处理，没问题。无非整个过程就是：请求开始，发出第一个action，state变为正在请求状态，view渲染，然后等着请求结束时候，发出另一个action，state变成操作结束状态，view再次渲染。
- 你想等请求结束的时候，自动触发发出第二个action？我知道你自己会写js实现。但是你可以尝试一下redux-thunk中间件。
- 上文我们提到过action creator。它是一个函数，返回一个action对象。使用redux-thunk中间件，就可以让store.dispatch入参是一个action creator方法（本身）。然后这个action creator的入参有dispatch。这样你就可以在creator中调用多次dispatch了。【我也不是特别理解】
7.使用promise。利用action creator返回一个promise对象、或者返回一个包含promise对象的action。然后利用promise中间件。在promise对象中搞异步操作即可。【我也不是特别理解】
综述：中间件的哲学。
三部曲之（三）的思想总结：
- React-Redux。需要我们将组件进行区分，分成两类。UI和容器。
- UI组件：传统的React组件。特点：负责UI呈现。没有状态，即没有this.state。数据由this.props提供。不使用任何Redux的API。
- 容器组件：特点恰恰相反。负责逻辑、有状态、用Redux API。
- React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成（connect）。【connect方法常见写法后面有两个括号的问题，请看这个解读】
- 有了UI组件，则可生成对应的容器组件了。那么，state如何转变为UI组件的参数？用户在UI上的行为，如何转换成redux的action？因此，由UI生成对应的容器的时候，需要实现两个方法：mapStateToProps和mapDispatchToProps。
- mapStateToProps入参是state，返回一个对象。它会订阅store！当state有变化时重新渲染UI????
- mapDispatchToProps可以是一个方法，也可以是一个对象。如果是函数，入参是dispatch和props。
- Provider。采用上面的方式的话，容器组件需要能或得到store才行，怎样才能有？利用Provider在根组件上包一层，将store给它！【看到这里，我们终于可以看明白react-demo留言板的入口代码了】
- 《七、实例：计数器》
- 所以，组织SPA VIEW整体架构或者路由等的时候，用外层的容器组件就好了。
综述：Redux和React结合起来做SPA时的哲学。
Redux总复习：可以看【Redux的全家桶与最佳实践】
react-router
- 路由与单页应用的关系：我的理解：单页应用即整个页面不刷，仅局部刷。但是页面中的按钮、超链接仍是地址
<a href="#/xxxUrl">。在这个例子中，我们知道#的这种地址是不会触发浏览器页面跳转的。路由的概念在这里实现：通过判断地址，页面中的组件（react组件）进行重新渲染时，根据地址的不同，渲染结果也不同。通过这种机制实现页面局部变化。【react-router简介 --这个已经语法过时了，进去以后参看英文原版。前端的语法更新换代非常快】 - 因此，react-router将路由简化成path和Component（通过与Redux结合使用，我们知道，这个组件其实是容器组件）的映射关系。
- 整个spa就都交给router来渲染就行了，因为router不仅维护了这个映射关系，还具备了渲染能力????
- router属于MVC的C吗????
- redux属于MVC的C吗????
- （这段后来加的）3 4 5是我曾经疑惑的问题。到现在的理解：所谓渲染和呈现，其实是V的部分，那V的部分肯定是React本身。那，呈现哪些东西，肯定是React组件根据props确定的。那么如何生成props？我理解是通过router啦，通过redux啦，这些手段一步步地来保证最后V的生成。可以看这张图示来理解整个流程。因此，谁是C，这个不好说。但是可以肯定的是，在最佳实践中，React组件是V。但是组件中会定义一些动作触发的事件，在事件触发时生成action并做一些dispatch的调用。Model（dva中的概念）顾名思义肯定是M，但是它中还定义了监听、定义了reducer、定义了effects等等。那到底怎么界定C？或者说前端框架就没有C？或者它就是传说中的MVP或者MVVM？
视频教程
弄懂了以上这些，可以看视频教程了。请注意如果上面这些没弄懂，看视频教程可能是一脸懵逼的。
看哪个视频教程呢？正巧我这里有个视频教程，认识的人可以管我要，不公开发出来是因为侵权。或者你可以看它的优酷版本（不过优酷版本录得不好）
好了，找个例子，你可以研究源码了
react-demo（留言板）
react-sagas
这一段也是我后来加的。你可以先看完中间件的解读，再反过头来看这个库。因为它利用了中间件的原理。
简单来说，reducer必须是纯函数。那么如果有异步处理，用reducer就不能做了，因此可以使用effect的方式来做。用effect方法代替reducer。这种effect的方式，正是sagas提供的。
资料链接：Dva中对effects的理解和使用 && DVA中的技术概念，可以直接看Effect部分 && redux-saga 实践总结 && redux-sagas异步操作 && Redux-saga 中文文档
从技术层面，effect方法并不是普通方法，应是构造器方法（ES6）。
我的理解，以上。
