介绍

本教程是基于 create-react-app( v3.0.1) & webpack(v4) & redux(v4) & react-router(v5) ,且按照官方文档，遵循目前生产项目的常用实践，来讲解如何一步一步的学习 React ，并搭建 React 应用脚手架。

大家可以点击文章底部「了解更多」下载「React 应用脚手架源代码」，可以直接投入生产使用。

环境搭建

1. 安装 nvm
2. 安装 node.js
3. 安装 nrm
4. 安装 yarn
5. 安装 代码编辑器
6. 安装 react 命令行工具

前置知识

1. ECMAScript 6
2. 路由
3. 生命周期

搭建方法

1. 初始化脚手架
2. 新增常用实践目录
3. 添加 Less 支持
4. 添加 Css Reset
5. 安装 Ant Design Mobile UI
6. 定制 Ant Design Mobile UI 主题
7. 安装资源分析工具
8. 封装 HTTP 请求
9. 编写公共对象存储方法
10. 编写公共组件
11. 添加 Redux 支持
12. 添加 React Router 支持
13. 配置组件和路由
14. 控制组件权限
15. 路由切换动画
16. 其他处理

程序目录

├── build // 打包目录

├── config // 构建相关

├── mock // 模拟数据

├── node_modules // 依赖包（如果过去某个运行正常的项目，无法运行了，删除该目录，重新 yarn 试试）

├── public // 静态资源目录（不打包）

│ ├── manifest.json // Web应用程序清单（安装到设备的主屏幕时起作用）

├── scripts // 配置相关

├── src // 源代码

│ ├── actions // 所有 actions

│ │ ├── login.js // 登录

│ │ ├── user.js // 用户信息

│ ├── api // 所有 HTTP 请求

│ │ ├── message.js // 消息（根据业务模块命名，和 /pages/* 一一对应）

│ │ ├── login.js // 登录

│ │ ├── register.js // 注册

│ │ ├── user.js // 用户信息

│ ├── assets // 图片样式等资源（会打包，根据业务模块命名，和 /pages/* 一一对应）

│ ├── components // 公用组件

│ │ ├── Authorized // 权限

│ │ ├── Empty // 通用暂无数据

│ │ ├── Exception // 通用异常

│ │ ├── GlobalHeader // 通用头部

│ │ ├── Loading // 通用加载

│ ├── constants // 所有 constants

│ │ ├── ActionTypes.js

│ ├── layouts // 页面模版

│ │ ├── BasicLayout.js // 基础模版

│ │ ├── BlankLayout.js // 空模版

│ │ ├── RegisterLayout.js // 注册模版

│ │ ├── PageNavLayout.js // 导航模版

│ │ ├── UserLayout.js // 用户模版

│ ├── pages // 页面视图

│ │ ├── Account // 个人中心（根据业务模块命名，和 /api/* 一一对应）

│ │ ├── Exception // 异常

│ │ ├── Home // 首页

│ │ ├── User // 注册、登录、修改密码

│ ├── reducers // 所有 reducers

│ │ ├── index.js // 导出所有reducers

│ │ ├── user.js // 用户信息

│ │ ├── login.js // 登录

│ ├── router // 路由组件配置

│ │ ├── AsyncComponents.js // 异步加载组件

│ │ ├── index.js // 路由导出组件

│ │ ├── routes.js // 路由配置

│ │ ├── SyncComponents.js // 同步加载组件

│ ├── styles // 公共样式

│ │ ├── theme.js // 自定义主题

│ │ ├── animate.less // 路由切换动效

│ ├── utils // 全局公用方法

│ │ ├── request.js // 全局 http 请求方法封装

│ │ ├── storage.js // 操作浏览器 storage

│ │ ├── utils.js // 公用方法

│ ├── index.js // 入口加载组件初始化等

│ ├── index.less // 入口组件样式文件

│ ├── router.js // 路由组件

│ ├── serviceWorker.js // PWA 配置

├── .gitignore // git 忽略文件(自动生成，参考：https://github.com/github/gitignore)

├── package.json // 包配置

├── README.md // 自述文件

└── yarn.lock // 包依赖关系配置文件（不要直接编辑这个文件，它可以帮助你锁定版本，避免因此导致的意外）

开发与构建命令

1. 依赖配置
2. 命令说明

开发流程

1. 概述
2. 载入组件配置路由
3. 配置 API 接口
4. 创建 HTTP 请求
5. 调用 HTTP 请求
6. 使用 Redux
7. 单元测试
8. 部署