- 支持Sass/Scss/Less/Stylus
- 已安装react-router-dom
- 已安装redux、react-redux
- 已安装redux-thunk
- 已安装immutable
- 已安装axios
- 已安装mockjs
- 支持浏览器Redux DevTools插件（需先在chrome应用商店添加Redux DevTools）
- 支持反向代理（在src/setupProxy.js中配置）
考虑到Ant Design不是项目必须UI库，未集成至全家桶。如需使用，请参阅我的微信公众号（卧梅又闻花）的教程《超全面详细一条龙教程！从零搭建React项目全家桶》，非常简单。
├─ /config <-- eject后生成的配置目录
| ├─ /jest
| ├─ env.js
| ├─ module.js
| ├─ paths.js
| ├─ pnpTs.js
| ├─ webpack.config.js <-- webpack配置文件
| └─ webpackDevServer.config.js
├─ /node_modules
├─ /public
| ├─ favicon.ico <-- 网页图标
| └─ index.html <-- HTML页模板
├─ /scripts <-- eject后生成的脚本目录
| ├─ build.js
| ├─ start.js
| └─ test.js
├─ /src
| ├─ /common <-- 全局公用目录
| | ├─ /fonts <-- 字体文件目录
| | ├─ /images <-- 图片文件目录
| | ├─ /js <-- 公用js文件目录
| | | ├─ api.js <-- 统一管理API地址和常量等
| | | └─ commonLib.js <-- 公用js库（公用函数、常量等）
| | └─ /stylus <-- 公用样式文件目录
| | | ├─ frame.styl <-- 全部公用样式（import其他css）
| | | ├─ reset.styl <-- 清零样式
| | | └─ global.styl <-- 全局公用样式
| ├─ /components <-- 公共模块组件目录
| | ├─ /header <-- 头部导航模块（举例）
| | | ├─ /store <-- header组件的store
| | | | ├─ actionCreator.js
| | | | ├─ constants.js
| | | | ├─ index.js
| | | | └─ reducer.js
| | | ├─ index.js <-- header主文件
| | | └─ header.styl <-- header样式文件
| | └─ ... <-- 其他模块
| ├─ /pages <-- 页面组件目录
| | ├─ /home <-- home页目录（举例）
| | | ├─ index.js <-- home主文件
| | | └─ home.styl <-- home样式文件
| | ├─ /login <-- login页目录（举例）
| | | ├─ /store <-- login组件的store
| | | | ├─ actionCreator.js
| | | | ├─ constants.js
| | | | ├─ index.js
| | | | └─ reducer.js
| | | ├─ index.js <-- login主文件
| | | └─ login.styl <-- login样式文件
| | └─ ... <-- 其他页面
| ├─ /store <-- store总集目录（聚合其他组件的store）
| | ├─ index.js
| | └─ reducer.js
| ├─ App.js <-- 项目主模块
| ├─ index.js <-- 项目入口文件
| ├─ mock.js <-- mock数据
| └─ setupProxy.js <-- 反向代理配置
├─ README.md
├─ package.json
└─ yarn.lock
- 全局公用级别（不需要模块化）的className，用G-xxx。例如G-autocut(截字)、G-color-red(文字红色)。
- 页面级别的className，用P-xxx。
- 模块级别的className，用M-xxx。
该架构有超详细的教程，从零开始，逐步讲述React全家桶的一条龙服务，新手也能快速掌握。
【教程目录】
1 创建React-APP
2 精简项目
-
2.1 删除文件
-
2.2 简化代码
-
2.3 使用Fragment去掉组件外层标签
3 项目目录结构
-
3.1 引入全局公用样式
-
3.2 支持Sass/Less/Stylus
4 路由
-
4.1 页面构建
-
4.2 使用react-router-dom
-
4.3 路由跳转
5 组件引入
-
5.1 创建header组件
-
5.2 引入Header组件
-
5.3 组件传参
6 React Developer Tools浏览器插件
7 Redux及相关插件
-
7.1 安装redux
-
7.2 安装react-redux
-
7.3 安装redux-thunk
-
7.4 安装浏览器Redux插件
-
7.5 创建store
-
7.6 复杂项目store分解
-
7.7 对接react-redux与store
-
7.8 启动Redux DevTools
-
7.9 安装使用immutable
8 Mock.js安装与使用
9 解决本地开发跨域问题
10 其他常用工具
11 附赠章节：集成Ant Design
-
11.1 安装Ant Design
-
11.2 实现按需加载
-
11.3 自定义主题颜色
教程原文请关注我的公众号【卧梅又闻花】，如有问题欢迎在微信公众号私信交流。
查阅文章《超全面详细一条龙教程！从零搭建React项目全家桶》
