react redux 相关技术

React全都是围绕着组件的， 所以React基础也就是：写组件的jsx、组件的生命周期以及组件的属性和状态。jsx，只要是用过html模板的分分钟就能写了； 所谓生命周期就是组件在创建、销毁、更新阶段的那几个回调函数，让你有机会再这几个关键点上对组件和环境做点手脚； 属性就像html标签里的属性一样决定了这个组件是什么样的；而状态，像是属性很像也和属性很不同，它是可变的， 是控制组件的唯一入口，这个以后可得细说。那个redux，其实就是在鼓捣状态。

想想如果是别人已经搭好的环境，我们一上来就只管往里添加代码，那肯定上手容易很多，于是就有这样的开源项目，把最让人头疼的环境都给你准备好了。 我选用了generator-react-webpack-redux， 看名字就知道我要用的几个东西它大部分都包含了，除了webpack、react、redux，它还包含了ES6编译器babel， 还支持less、sass、stylus等常见样式语言编译器，还配置好了热加载，让你代码一保存就能在浏览器上看到效果。

首先安装那个贴心的代码环境。前提是自己电脑上已经装过了node。来打开终端（命令行）。

npm install -g yo
npm install -g generator-react-webpack-redux

然后新建个项目目录，并切换到这个目录下，对这个目录进行项目初始化：

mkdir my-project && cd my-project
yo react-webpack-redux

然后根据提示，输入项目名称、选择想用的样式语言，接着等待依赖的内容下载安装完就行了。 咱的项目环境就搭建好了，然后让它跑起来看看效果吧：

npm start

这时浏览器会自动打开，载入咱的项目页面，一个很Q的名叫“yo”小人出现，呦，这就搞定了。

再来看看项目的目录结构。别的没啥好说的，看名字就知道是啥了，主要看src目录里的东西。

咱们最常打交道的目录是actions、components、containers和reducers。 先简单说一下，components和containers里面放的都是React组件，不同的是component是纯纯的组件， container是会跟外界（也就是状态）互动的组件，它把外界的躁动全都挡住，让里面纯纯的组件安心做自己专业的事情。 actions目录下放咱们的行为文件，行为就是指要发生点啥。 reducers里面的东西功能就是对行为进行响应，根据行为的类别和提供的数据对状态进行变更。

再看看src里面其它几个目录：store负责管理状态，也就是提供派发行为的方法，让reducer去监听，然后改变状态。 实际上在开发中我们基本不需要动这里的代码。styles和images就不用说了。

然后再装个chrome插件吧，ExtensionReact Developer Tools，可以通过React组件的视图看整个网页，包含属性和状态信息。