先从目录结构说起，事实上良好的目录结构对项目的拓展性有着很大的帮助。

目录结构

这个是我这个wap App的目录结构，中间有过一次较大的变化，都是由于前期没有做好规划造成的，这里也只是一个参考。

actions文件夹

该文件夹包含了所有触发数据变更的action文件；

components文件夹

该文件夹包含了一些公用的React组件，如按钮、Tab；

containers文件夹

这里我放了js入口以及根据环境选择加载文件的Root.js，这里还放置了一些开发工具组件如DevTool.js。当然，一些全局共用的页面我也放在这里，比如404；

less文件夹

没什么好说，放的全是less文件。

reducer文件夹

所有的reducers处理函数按大模块分成几个文件放这了;

routes文件夹

里面放的是所有页面文件夹，涵盖了页面组件、页面路由信息，大致如下结构

routes目录

每个模块文件夹都有index.js，里面包含了该模块的路由配置。
这里我采取拆分这么多文件模块而不是统一配置页面路由的原因是为了后面的按需加载。

这个目录就是比较关键的部分，该目录下所有的文件夹index文件都包含了该目录的路由信息；
使用这种目录结构我们可以无限往下延伸，便于拓展，同时也方便共同开发时的合并

static文件夹

static

这个文件夹我放了一些静态文件如图片、公用lib，以及执行打包生成后的文件都会在这里；
基本就是打包完之后我就把这个static文件夹上传即可。

store文件夹

就是store嘛，我这里也是准备了configureStore.dev.js和configureStore.prod.js两个文件来针对开发环境和生产环境。
<pre>
if (process.env.NODE_ENV === 'prod') {
module.exports = require('./configureStore.prod')
} else {
module.exports = require('./configureStore.dev')
}
</pre>

process.env.NODE_ENV 环境变量我是在npm script执行的时候设置的，
比如:
<pre>"bundle-test": "set NODE_ENV=prod&&webpack --config webpack.bundle.test.config.js -p --progress --colors"</pre>
另外提一下，当时我在写NODE_ENV=prod&&webpack这里的时候给prod&&webpack中间加了空格，结果怎么都设置不了ENV，折腾了半天才发现。。。

最后就是index.html了，这个也就是文件入口部分了。

结尾

大体上和大部分的react应用目录结构区别并不大，主要是routes文件夹这里，早期的时候我用了单个routes.js把整个应用的路由写在里面，然而最后因为写按需加载的时候发现这样做比较好区分，就改成了现在这个样子，拆了之后也不会像单个文件那么多看的眼花嘛。。。