学习使用react有一段时间了。虽然我没有在实际的产品项目中大规模使用过react，但是我在我的博客，小网站，一些开源项目中用过几次。我也有一些使用react创建项目的经验，也尝试过验证过。我总结了这个可以用来启动的框架模板react-redux-tpl。开源吧，希望能帮到一些同学。如果有不好的设计，希望及时指出，共同进步。宏解释现在，我们实际上有很多脚手架可以使用。例如，create-react-app是业界较好的应用程序开发工具之一。笔者也用过，但感觉是把所有的工具都集成了，可控性没有那么强，有些内容可能不太理解，但是从0开始配置会比较麻烦。每次开始一个新的项目，都需要做很多的前期工作，就是比较麻烦。react-redux-tpl模板就是为了解决这个问题。它基于Express，集成了ES6、react、redux（和redux-dev-tool）、react-router、webpack热更新，并遵循一定的规则和最佳实践文件组织和代码组织，让开发者可以直接开发服务，无需编写单行配置代码。现在是这样使用的：npminstallreact-redux-tpl-greact-redux-tplFileNamecdFileNamenpminstallnpmrunstart然后在chrome中打开localhost:7777看看效果（注意：如果网速慢，尤其是在如果使用教育网，执行第二条命令后可能需要等待几分钟）。或者直接gitclonehttps://github.com/aircloud/react-redux-tpl下载整个模板工程，放到这个文件夹下：npminstallnpmrunstart也可以达到文件组织的效果我觉得，一个接一个文件超过百个的项目，最重要的就是文件整理。文件组织对于开发效率、维护效率、多人协作乃至代码重用都具有重要意义。现在，随着组件化开发的普及，以及更精确的粒度控制，我们的文件很容易变得非常大。我的文件组织方式是这样的，主要列出关键目录，突出显示前端文件：-bin-common//react核心文件目录|-actions|-components|-Common|-HomePage|-SubPage..。...|-containers|-enter|-reducers|-routes|-store|-Utils-controller-public//静态资源目录|-images|-javascriptsindex.html-routes-viewsapp.jswebpack.config.js。.....先说一下目录命名规则。目录末尾只有jsx的文件目录采用大驼峰命名规则，除与里面的主jsx文件同名外，全部使用小写，尽量控制。复合词出现。react核心文件目录之所以命名为common，是因为认为如果使用服务端渲染，就相当于一个公共资源目录。对于服务端渲染，我们可以考虑在routes目录下配置路由层（模板框架没有使用services.end渲染，需要自己配置，但是比较简单）。common下的actions、reducers、store都是redux相关的文件目录，enter是入口目录，enter目录下的文件通常是配置webpack时的入口文件。容器和组件是组件。container下的文件一般是封装直接与路由一起使用的组件，组件是具体的业务组件。这里的一些规范将组件分为三层。我个人认为这是没有必要的。另外，除了一些公共样式需要放在公共文件中，我建议每个组件都搭配一个同名的样式文件：-HomePage.js-HomePage.less，控制起来会更方便。另外，我们可以尝试使用css-modules。个人认为虽然解决了类冲突问题，但是不利于代码调试，也有一定的迁移成本，所以没有使用。Webpack配置关于webpack配置优化，网上有很多教程和博客。我在react-redux-tpl优化了一些配置，使用express插件配置热更新。考虑到模板框架的通用性和简洁性，同时考虑到编译速度优化选项的多样性，我这里简化了配置。如果对编译时间要求比较高，单独做这个是没有用的，应该多做一些性能优化。关于webpack性能调优，我这里总结了一些内容，大家可以试试。另外，值得一提的是使用了插件webpack-hash-sync。关于引用js文件名的同步，虽然已经有插件html-webpack-plugin，但是我觉得不符合我的编程习惯。是的，它通过我们的配置直接生成了html文件。其实我们的html文件一般都是先写的，做很多个性化的配置内容，方便简洁。直接使用html-webpack-plugin通常是不可能的。通过webpack-hash-sync，我们可以给出正则表达式，每次webpack都会对正则表达式进行一个一个的匹配，并改变hash值或者chunkhash：newWebpackHashSync({file:["output.*?js","common.*?js"],path:path.join(__dirname,'public/'),html:["index.html"],hash:true,chunkhash:false}),usingreduxproject引入了redux-devtools调试功能插件（可以关闭，最简单的方法是在common/enter/index.js中不引入），默认引入了redux-thunk和react-router-redux这两个中间件，前者是可以的直接在action中发送异步请求，可以增强react-router的一些功能。我建议大家可以看看他们的GitHub主页，都挺好的，尤其是前者，一个十几行代码的插件，近5000个star，不得不说，牛逼。在common/actions/index.action.js中，我写了一些同步和异步动作的例子。可以参考这个写法，直接上手。另外，我使用redux的原则是：只有共享数据才会被redux使用，组件的非共享数据（比如一些显示列表）不要放在redux中，而是会随着组件的生命周期被请求、构建、消失……react组件写react项目最重要也是最耗时的就是react组件的开发。我对组件粒度的原则是这样的（当然这个模板框架可能没有体现）：如果列表中的元素之间存在动态交互，尽可能将元素做成一个单独的组件。为了提高效率，保持全站统一的用户体验，我们尽可能复用底层组件，比如自定义的按钮、列表、标签等，都放在Common文件夹下。在react组件的开发中，我通常会给每个模块（或者一个页面）一个文件夹，比如HomePage。在这个文件夹下，只有HomePage.js需要被其他目录下的文件导入，HomePage需要的一些公共文件组件在Common目录下，私有组件在HomePage文件目录下。另外，我们可以使用ES7中的装饰器模式在HomePage.js中配置react-redux：@connect(state=>{return{Info:state.rootReducer.getInfo.info};},{getAllClass,updateInfo})classHomePageextendsComponent{//...}通过props传入其他子组件的数据（当然，如果是子组件的私有数据，应该在子组件中自己处理）。一些思考，因为有些内容没有想好，所以暂时没有写出来，接下来的一段时间我会继续打磨这些内容，争取整理出一套好的做法。如果有一致的地方，欢迎给star鼓励。如果有错误或设计不佳，请在这里报告，我将在24小时内回复并尽力解决问题。【注1】本文提到的一些对比例子，是从个人角度出发的一些片面的观点和个人习惯。其实我个人觉得这些项目都非常优秀，成熟度也比较高。我向前辈致敬。
