react、redux什么的都用起来 【0】预备——开始
经历了EXT、YUI时代，又经历了Angular时代，我们正在步入React时代。 前端开发框架凭借JS极其灵活强大的特性模样越来越“怪异”，正是这怪异让我们对前端开发把玩不尽。
好吧，说把玩这些技术有些过于装13了。当牛逼哄哄的React如雷贯耳之时，我们最关心的还是它能不能用在我们的项目里， 怎么快速把他用起来，别等我们能把它用起来的时候又进入下一个框架时代了。 所以这里我要跟大家细细分享一下怎么把React用起来。
要做一个项目，不单单是用React一个框架的事儿。React只是一个用户界面框架，如果拿MVC概念来说的话也只是V。 当然前端开发中视图是最重要的，但是如果不控制好数据和逻辑到后面会越来越痛苦。于是要考虑如何管理数据。 脸书官方推荐的是Flux，但听说连Flux都有些过时了，干脆用个最新最火的Redux。其实两者思路是一样的，据说后者更易用。 单页应用总得处理路由，可选余地很多，为了风格统一还是选用配套的react-router，为了管理方便，再用个redux-router。 打包工具总得有，要不开发太受限，还是选最新最火的webpack，这样就可以用各种风格的模块系统，连样式和图片都能搁到模块系统里。 语言上嘛，我原本推崇coffee，而且也有现成的coffee-jsx编译器，但是看react社区都对ES6青睐有加， 了解了ES6的特性后，觉得一部分跟coffee挺像，还有一些确实超越了coffee，那就忍痛舍弃缩进语法、一切皆表达式这些特性，用ES6吧！
这么多一堆新玩意儿，肯定还没开始做已经就头疼上了：从哪儿入手啊！
想想如果是别人已经搭好的环境，我们一上来就只管往里添加代码，那肯定上手容易很多，于是就有这样的开源项目，把最让人头疼的环境都给你准备好了。 我选用了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组件的视图看整个网页，包含属性和状态信息。
得，环境都搞好了，下一节我们就开始做实在的东西吧。
