react+redux+webpack教程1

经历了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等常见样式语言编译器，还配置好了热加载，让你代码一保存就能在浏览器上看到效果。

齐活儿，这就开始吧!

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

首先安装那个贴心的代码环境。前提是自己电脑上已经装过了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组件的视图看整个网页，包含属性和状态信息。

得，环境都搞好了，下一节我们就开始做实在的东西吧。