个人进修运用react已有一段时候了，虽然没有在真正的产物项目中大范围运用react，然则在本身的博客、小网站、一些开源项目中已运用过好频频了，运用react建立项目个人也有了一些心得而且经由尝试考证，总结了这个能够用于起步的框架模版react-redux-tpl。
将它开源出来，愿望能给某些同砚带来协助，假如有设想的不好的处所，也愿望能实时指出，共同进步。
宏观解读
在如今，我们其实有许多脚手架能够运用，比方create-react-app就是业界比较优异的运用开辟东西之一，笔者也运用过，然则我的觉得是因为它已将一切的东西集成好了，可控性反而不那么强，有些内容也不肯定会相识的很透辟，然则本身从0最先设置呢，又会比较贫苦，每次重新开一个项目又须要做许多前置事变，比较贫苦。
react-redux-tpl这个模版就是为相识决这个题目，它基于Express，集成了ES6、react、redux(以及redux-dev-tool)、react-router、webpack热更新，而且根据肯定的划定规矩和最好实践举行文件组织和代码组织，能够使开辟人员险些无需写一行设置代码就能够直接开辟营业。
如今它的运用体式格局是如许的：
npm install react-redux-tpl -g
react-redux-tpl FileName
cd FileName
npm install
npm run start以后再chrome中翻开localhost:7777即可看到结果(注：假如网速较慢，特别是在运用教育网的情况下，实行第二个敕令以后能够要轻微等几分钟)。
或许你也能够直接git clone https://github.com/aircloud/react-redux-tpl将全部模版项目下载下来，到这个文件夹里：
npm install
npm run start一样能够到达结果
文件组织
我以为，一个一百个文件以上的项目，最重要的事变就是文件组织，文件组织对开辟效力、保护效力、多人合作以至代码重用，都有很重要的意义，而如今跟着组件化开辟的盛行和更准确的粒度掌握，我们的文件很轻易变得异常多。
我在文件组织体式格局是如许的，这内里重要列出重点目次并偏重凸起一下前端文件:
-bin
-common //react中心文件目次
|- actions
|- components
|- Common
|- HomePage
|- SubPage
......
|- containers
|- enter
|- reducers
|- routes
|- store
|- Utils
-controller
-public //静态资本目次
|- images
|- javascripts
index.html
-routes
-views
app.js
webpack.config.js
...... 这内里首先说一下目次定名划定规矩，目次出了最末端只要jsx的文件目次采纳大驼峰定名划定规矩，而且和内里的主要jsx文件同名以外，一概采纳小写，而且只管掌握不涌现复合单词。
react中心文件目次之所以定名common，是因为斟酌到假如运用服务端衬着，这便相当于一个大众资本目次，服务端衬着我们能够斟酌在routes目次下的路由层举行设置(该模版框架没有采纳服务端衬着，须要自行设置，但比较简朴)。
common下的actions、reducers、store都是和redux有关的文件目次，enter为进口目次，enter目次下的文件平常为webpack设置时刻的进口文件。
containers和components为组件，containers下的文件平常为直接合营路由运用的包装组件，components为详细营业组件，这个处一切的范例将组件分为三层，我个人以为这个必要性不大。
别的，除了一些大众款式须要放在大众文件，我发起每个组件搭配一个同名款式文件:
-HomePage.js
-HomePage.less如许掌握起来会比较轻易，别的我们能够尝试采纳css-modules，个人以为虽然处理了class争执题目，然则却不利于代码调试，而且也有肯定迁徙本钱，故不必。
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举行转变：
new WebpackHashSync({
file:["output.*?js","common.*?js"],
path:path.join(__dirname, 'public/'),
html:["index.html"],
hash:true,
chunkhash:false
}),运用redux
项目中引入了redux-devtools这个调试功用插件(可封闭，最简朴的方法就是不在common/enter/index.js中引入了)，而且默许引入redux-thunk和react-router-redux这两个中间件，前者是能够直接在action中发异步要求，后者是能够加强一些react-router的功用。
我发起人人能够看看他们的GitHub主页，讲的都挺不错的，特别是前者，十来行代码的一个插件，近5000个star，不得不说，是牛逼。
在common/actions/index.action.js里，我写了一些示例的同步的和异步的action，人人能够参考这个写法，直接上手。
别的，我关于一个redux的运用准绳是：
只要被同享数据才会被用在redux中，组件的非同享数据(比方一些展现列表)，不要放在redux中，而是跟着组件生命周期被要求、组织、消逝…
react组件
写react的项目，最重要最耗时的，照样react组件开辟，我关于组件粒度分别的几个准绳以下(固然这在这个模版框架中能够没有表现出来)：
假如列表中的元素存在动态交互，便只管地将元素做成一个自力的组件。
为了进步效力和坚持整站用户体验的一致，我们只管复用初级组件，比方定制的按钮、列表、标签等，而且都一致放在Common文件夹下。
在react组件开辟中，我平常是给每个模块(或许一个页面)一个文件夹，比方HomePage，这个文件夹下只要HomePage.js是须要被别的目次下文件引入的，而HomePage须要的一些大众组件在Common目次下，私有组件在HomePage本文件目次下。
别的，我们能够在HomePage.js中应用ES7中的装潢者形式设置react-redux：
@connect(state => {
return {
Info:state.rootReducer.getInfo.info
};
}, {
getAllClass,updateInfo
})
class HomePage extends Component{
//...
}其他的子组件的数据经由过程props传入(固然，假如是子组件的私有数据，照样在子组件内自行处理)
总结
以上是我梳理的关于构建这个模版框架的一些思索，因为某些内容还未深图远虑，因而现在没有写入，我也会在接下来的一段时候内，继承打磨这个内容，争夺整理出一套还不错的实践。
假如有些许认同，迎接给star勉励。
假如有bug或许设想不好的处所，请在这里提出，我会在24小时以内复兴而且尝试处理题目。
[注1]本文中提到的一些对照的例子，都是个人角度的一些单方面看法和个人习气题目，实际上我个人照样以为这些项目非常优异的，成熟度也比较高，向先辈致敬。
