序言：
当你看到这篇文章的时候，恭喜你！选择了一个正确的技术去学习。为什么这么说？众所周知，前端框架有很多，盛行的有Angular1、2,VUE,React,Backbone等等，每个技术各有千秋，但是在我看来学习React的好处之一（也是其他技术所没有的）——学会React后，ReactNative信手拈来，你也可以开始开发手机端了。
本篇文章主要介绍了React的基本原理，如何用ES6创建Component，如何结合Redux控制交互和数据，我们会通过一个实例项目来穿插介绍整个技术要点。源代码可以点击链接下载：https://github.com/likeconan/React-Redux-Learning。
React Component基本原理：
React非常流行，而且也经常会拿来和Angular来比较，那么他们俩的区别在哪里呢？简单的说React是库，Angular是一个全能的框架。为了让你更形象的理解，你可以把React当作Jquery来看待。
话不多说，来看代码（最原生的ES5React）：
React是一个包含了很多方法的JsObject，其中最常用的就是拥有多个参数的createElement方法，调用后就可以在dom上创建对应的element.而ReactDOM.render就是在dom上插入该element。
与Jquery对比的话,createElement()就类似于$()而ReactDOM.render()就类似于$(ele).append(“#root”)。
React Component和ES6，JSX：
React在配合ES6和JSX后，创建Component就相当的容易了，不过别忘记配合webpack来进行打包，这样才能保证正常运行。
示例代码就如上图，简单易读，方便。接下来我们就要使用到props和state了。以上两个属性到底什么时候用哪一个，建议按以下标准来评判：
1. 该值是否通过父元素的props传递的？如果是，那么有可能就不是state
2. 该值是否一直保持不变？如果是，那么有可能就不是state
3. 该值是否可以通过其他props或state计算获得？如果是，那么有可能就不是state.
基于以上的标准来区分props和state的使用,下面我们配合一个input来看代码
因为input的值是通过用户操作来获取的，所以它需要用state，然后我们需要侦听它的change事件，当触发后我们就必须仅使用setState来更改其值。
重要：每次当setState执行完毕后，render方法就会重新执行一遍，页面重新渲染，这也就是为什么页面上input的值发生了相应的变化。
这个component足够满足我们的使用需求了，但是它完全不符合正确的创建一个react的component。这也是facebook在教程里提到的Think in react。大家可以想一想怎么样创建正确的component,接下来请大家带着这个疑问来听我介绍redux。
Redux基本原理：
1. Immutable Data
首先，我们要知道js里的一个理念，immutabledata，请看下列代码：
当我改变b的name的时候，a也一起变化了，在redux里我们要保证里面的每一个data都是immutable的，也就是说改变b值，a值是 不会改变的，这样才能很好的控制数据。
2.Store and Reducer
Redux最重要的两个成员就是store和reducer,在一个项目中有且只有一个store，可以有多个reducer通过combineReducer来建立联系。
- createStore()方法里传递建立好的reducer，而reducer就是侦听store的dispatch事件，当执行一遍dispatch后就会执行里面的方法。
- reducer的第一个参数state是可以设置初始值的，它可以是int,string,object,array等，而action就是用来判断对应不同的触发事件执行相应的操作而改变state。
- subscribe()方法是当每次的dispatch操作完毕后所执行的方法。
- getState()就是reducer执行后这个store里的每个reducer里的state的值。
也很简单，定义多个reducer后使用combineReducers，将其返回值再使用至createStore()即可。
4. applyMiddleware
在真正的项目中我们会用到很多异步操作，这个时候就需要applyMiddleware来帮助我们处理了。applyMiddleware是执行与dispatch和reducer之间的，那意味着在执行到reducer之前你可以做任何处理，具体可以看以下代码：
引用Provider传递你创建的store,然后包裹其子元素。
2. 重构components
大家应该没有忘记thinkin react这个问题吧？现在我们就需要重构components。
重构的准则就可以依照上图，将components分为smart和dumb的。Smart的意味着当这个component的state更改后，它会rerender一遍，所以当你再创建component的时候，你肯定不想把state放到最外层，因为一旦改变，那么整个页面就得刷新一遍。
3. 定义store,applyMiddleware和actions
定义store和先前的方式一样，只是applyMiddleware我们用比较常用的几个，代码如下图
其中promise和thunk是用来处理异步的,logger是用来log每次dispatch的变化的。Actions的创建也非常简单，它和reducer文件名一一对应。
当无需异步的时候直接返回type和payload的object，当使用异步的时候就需要在异步后调用dispatch方法。
4. 在component中使用redux
将@connect放置component的上面，绑定你这个component所需要的reducer的值，并且以object的形式返回
那么这个component的props就会包含editText和user，同时它也会绑定上dispatch的方法，用来触发reducer，使用代码可参考下图。
同样的每次通过dispatch触发改变了props绑定的值后，render方法就会再次执行一遍。
至此如何使用react和redux用来创建项目的内容我已经给大家介绍完了，因为传述的内容过于庞杂，希望大家慢慢消化，多看看源代码，试着跑一遍，做些更改进行尝试，这样才能将整个知识融会贯通。如果有任何问题欢迎大家提出，多谢。
鸣谢：我是一名来自盛安德的Shinetecher,感谢盛安德公司及同事们对IT技术的支持，分享和热情，让我有时间和动力完成此博文。
联系：欢迎各位朋友有任何问题和建议留言至此博客下，或者添加本人微信号：liyijia428 进行沟通交流学习
源码：https://github.com/likeconan/React-Redux-Learning