react-redux-boileplate

这个项目主要是快速搭建一个含react16，react-router4和redux3的应用程序。

目前应该是整个中国来讲最完整的开源的架构项目。网上有很多人写的快速搭建使用的模板，往往不是太老，就是没考虑周全。因此我自己搭建一个，希望有喜欢的人点个 star

个人撰写的详细的技术文档，欢迎继续点赞。react-docs

react 架构需要考虑的点

• React hot-loader(支持css)
• CSS-Modules
• Code Splitting
• SourceMap

具体每个细节，请看我的另外一篇文章。react-docs

目录结构

• 开发环境目录结构

├─src
│  ├─assets           // 资源
│  ├─components       // 组件
│  │  ├─counter
│  │  └─todo    
│  ├─redux            // reudx
│  │  ├─actions
│  │  ├─reducers
│  │  └─store
│  ├─routers          // routers
│  └─utils            //工具库，已经在webpack中注册alias
└─template            //模板文件

• 生产环境目录结构

├─dist
  └─imgs            // 资源路径：图片，字体等

dist根目录下就是静态资源。

样式写法调整

工程提供了两种样式写法，全局样式和本地样式。全局样式不参与编译构建。本地样式参与css-modules构建。

<div className="global-css" styleName="local-css"></div>

详细用法见：babel-plugin-react-css-modules

使用

git clone [email protected]:ganxunzou/react-redux-boilerplate.git
cd react-redux-boilerplate
npm i

• 本地开发

npm run dev

• 生产编译

npm run build

分支

项目中提供了很多分支，让初学者有个循序渐进的学习过程。

• redux

简单的redux TODO List的应用，让你更加深入的了解redux。详细的文档：redux

• react-redux

在redux 的基础上，增加react-redux集成。文档：react-redux

• react-router-redux

这个就是 master 了。不过一般我是在这个上开发，开发结束然后到 master 合并。功能测试通过后会同步到 master

• master

完整的工程分支。可以在这个基础上开发自己的应用。

待完善

react-router-redux 2.x的版本不支持react-router 4。如果react-router 4的环境想用react-router-redux要等等咯。 目前针对react-router 4的react-router-redux 5.0 的版本已经合并到 react-router 统一维护，不过还没发布正式版本。