小贴士

• 本项目 webpack 已升级至 webpack 2。
• 本项目为了减少代码体积，用了 react-lite 代替 react js。您也可以直接使用 react js，请注释这段配置。
• 本项目还在优化中，但已经可以用于生产环境。
• 如果您有好的意见或建议，请 issue。
• 如果您觉得本项目对您有帮助，请给个 star，^_^。

一、介绍

基于 reactjs+redux+webpack2 的单页应用项目模板，功能包括：调试、构建、代码规范校验、单元测试、国际化等。

二、技术栈

react js、redux、es6、webpack 2、sass、postcss、css modules。

三、使用

1. 下载源码

git clone https://github.com/zhaotoday/react.git

2. 安装 npm 依赖包

npm install

3. 启动项目

npm start

4. JS 代码规范校验

npm run eslint

5. 单元测试

npm run test

6. 构建代码

npm run build

四、目录结构

- build             [webpack 调试与构建]
- src               [源码]
  └ app             [业务代码]
  └ components      [通用组件]
  └ i18n            [国际化]
  └ redux           [redux 数据流管理]
  └ routes          [路由配置]
  └ templates       [页面模板]
  └ themes          [主题]
    └ default       [默认主题]
      └ global      [全局样式]
        └ classes   [全局样式类]
        └ reset     [样式重置]
      └ utils       [工具]
  └ utils           [工具集合]
  └ entry.js        [入口文件]
- dist              [构建代码]
- test              [单元测试]

五、业务模块规范

业务模块代码放在：src/app 文件夹下，下面以登录（login）模块为例。

- login             [login 模块]
  └ index.js        [login 的入口文件]
  └ theme           [login 的皮肤]
    └ styles        [login 的样式]
      └ index.scss
    └ images        [login 的图片]
  └ components      [login 的相关组件]
  └ utils           [login 的相关工具集合]
  └ i18n            [login 的国际化]

六、通用组件规范

通用组件放在：src/components 文件夹下，规范和业务模块基本一致，下面以面板（panel）组件为例。

- panel             [panel 组件]
  └ index.js        [panel 的入口文件]
  └ theme           [panel 的皮肤]
    └ styles        [panel 的样式]
      └ index.scss
    └ images        [panel 的图片]
  └ components      [panel 的子组件]
  └ utils           [panel 的相关工具集合]
  └ i18n            [panel 的国际化]  

七、redux action type 常量规范

和 RESTful 的规范相对应，下面以文章（article）模型为例。

GET_ARTICLES        [获取文章列表]
GET_ARTICLE         [获取文章详情]
POST_ARTICLE        [新增文章]
PUT_ARTICLE         [修改文章]
DELETE_ARTICLES     [删除一篇或多篇文章]

未完待续...