React+Flux 新手入门开发套件、模组、实例 ( gulp 自动检查，编译 )

简介

Github: https://github.com/raymond-yan/flux-todomvc-updated

React 是2014年 facebook 开放的一个javascript lib，负责管理 MVC 中的 View。

Flux 是一个开发模式，类似于MVC，也是 facebook 提出与react 共同实用的模式。详细可以参看官方的介绍。

在学习的过程中，发现很难找到一个完整的开发套件来实做 FLUX+React。 因 Flux 将模组分为很多块，需要用 node.js 的语法将每一个模块export出来，然后在使用到的地方用 require() 来引用。那么为了方便这种模式的开发与编译，本人参考了 facebook 官方flux上的例子：flux-todomvc，修改并生成一个方便新手入门 React+Flux 的模组。

app/js/ 下文件的结构与 facebook flux 官方的结构一致，大家可以参照官方 flux + react 的教程，编辑 app/js/ 下的 jsx 文件以及 app/ 下的 html、css、image， 只要 npm 在运行，就会自动编译到 build 文件夹下，可以实时查看修改的效果。

来源

基本这个project都是根据 flux-todomvc来生成的，只是更改了 package.json 以及添加了 gulpfile.js 文件。所以要理解React+flux的理念并以此开发自己的project，请务必参考 flux-todomvc 的文档。 其中主要的变动有：

1. 修改 package.json, 将 react 由原来的 0.12.0 更新到最新版 15.1.0， 并且修改了 app.js 适应新的语法。
2. 增加 gulp 功能方便编译，将 ../app/ 下的 html, img, css 和 js 文件编译到 ../build/ 文件夹下，方便测试以及最终使用。 原本 flux-todomvc 编译的结果夹杂在整个文件夹中，不方便测试以及最终出版。

使用方法

1. 安装：
   npm install
2. 启动:
   npm run start
   编译的文件在 ../build 文件夹下，gulp 会实时根据用户修改的源码(任何app目录下的文件修改)来重新编译出新的版本。可以用 browser 直接打开 index.html 查看或者使用下一条命令 一起启动一个 node.js sever。
   
   
3. 启动(包含sever):
   npm run start-server
   start server on Running on http://localhost:8000
   
   
4. 最终build:
   npm run build
   使用 gulp-uglify 使编译出的js文件体积变小

优势

运行启动或者编译后，编译的文件会在 ./build 文件夹下。使用者可以很方便在 ./app 目录下按照 react+flux 规则来编写自己的 web app, 在 npm run start 后， gulp 会自动根据 ./app 目录更改的文件自动重新编译到 ./build 文件夹, 这是使用 gulp watch 的优势。

参考资料

• flux-todomvc*: 本文主要的code来源，关于../app/js/ 中的React+flux code的解释以及结构请参考这个 github 的README。
• react-meetup-1: gulp文件的编写主要参考了这个project。这个project也是一个可以单独运行的 React+flux入门模块，推荐可以参考使用这个。