开篇准备

• 脚手架: react-boilerplate
  -脚手架: react-boilerplate-pro
• 侧边栏组件: react-sider
• 鉴权路由: react-acl-router
• 国际化语言:react-intl-context

Node 版本

• 8.11.3
• npm、yarn

第三方依赖

• react: 16.4.2
• react-dom: 16.4.2
• redux: 4.0.0
• redux-thunk: 2.3.0
• react-router-dom: 4.3.1
• connected-react-router: 4.3.0
• antd: 3.6.6
• webpack: 4.16.5
• babel-core: 6.26.3
• eslint: 5.3.0
• jest: 23.4.2

开始

• react-boilerplate

HTML

• 添加viewport属性:
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
• EJS变量注入：
  <title><%= htmlWebpackPlugin.options.title %></title>

CSS

• Sass、Less

Babel

• presets
• plugins

webpack 配置

• webpack.config.js
• react-boilerplate

ESLint 配置

• .eslintrc

目录组织结构

• layouts/: 存放布局级别的组件
• views/: 存放页面级别的组件
• components/: 存放业务级别的 UI 组件
• hocs/: 存放业务级别的逻辑组件（看情况可与 components/ 合并，但建议分开）
• app/: 存放应用级别的配置信息，如菜单、路由等，以及应用初始化的相关代码，如初始化 redux store 等
• utils/: 存放通用的功能性函数，如数据聚合、处理等
• styles/: 存放全局的 CSS 样式、变量、mixins 等
• assets/: 存放静态资源，如图标、图片等
• i18n/: 存放应用国际化需要的多语言文件

redux

• 全局数据源且其他组件可以直接获取/改变全局数据源中的数据
• 全程跟踪/管理 action 的分发过程/顺序

redux-thunk

• 局数据源且其他组件可以直接获取/改变全局数据源中的数据
• 全程跟踪/管理 action 的分发过程/顺序
• 我需要组件对同步或异步的 action 无感，调用异步 action 时不需要显式地传入 dispatch

redux-saga

• 全局数据源且其他组件可以直接获取/改变全局数据源中的数据
• 全程跟踪/管理 action 的分发过程/顺序
• 组件对同步或异步的 action 无感，调用异步 action 时不需要显式地传入 dispatch
• 来表述复杂异步数据流（如长流程表单、请求失败后重试等），命令式的 thunk 对于复杂异步数据流的表现力有限

附

• 1. AlanWei/blog：笔者的 GitHub 博客，里面有更多关于 React、组件库、前端数据层、服务端渲染的资料。
• 2. pure render：阿里数据中台前端团队分享前端相关经验。
• 3. 前端精读评论：阿里数据中台前端团队分享前端界的好文精读。
• 4. 前端新能源：分享前端有深度的新思想和新方法。

5. 蚂蚁金服体验科技：探索极致用户体验与最佳工程实践。