利用react-redux-tpl快速开发react-redux-webpack项目

我的学习使用react已经有一段时间了，虽然没有在真正的产品项目中大规模使用react，可是在本身的博客、小网站、一些开源项目中已经使用过好几回了，使用react建立项目我的也有了一些心得而且通过尝试验证，总结了这个能够用于起步的框架模版react-redux-tpl。

将它开源出来，但愿能给某些同窗带来帮助，若是有设计的很差的地方，也但愿能及时指出，共同进步。

宏观解读

在如今，咱们其实有不少脚手架可使用，例如create-react-app就是业界比较优秀的应用开发工具之一，笔者也使用过，可是个人感受是因为它已经将全部的工具集成好了，可控性反而不那么强，有些内容也不必定会了解的很透彻，可是本身从0开始配置呢，又会比较麻烦，每次重新开一个项目又须要作不少前置工做，比较麻烦。

react-redux-tpl这个模版就是为了解决这个问题，它基于Express，集成了ES六、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]本文中提到的一些对比的例子，都是我的角度的一些片面看法和我的习惯问题，实际上我我的仍是认为这些项目十分优秀的，成熟度也比较高，向前辈致敬。