开篇准备
- 脚手架: 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
开始
HTML
- 添加
viewport
属性:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
EJS变量注入:
<title><%= htmlWebpackPlugin.options.title %></title>
CSS
Babel
- presets
- plugins
webpack 配置
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 对于复杂异步数据流的表现力有限
附
- AlanWei/blog:笔者的 GitHub 博客,里面有更多关于 React、组件库、前端数据层、服务端渲染的资料。
- pure render:阿里数据中台前端团队分享前端相关经验。
- 前端精读评论:阿里数据中台前端团队分享前端界的好文精读。
- 前端新能源:分享前端有深度的新思想和新方法。
- 蚂蚁金服体验科技:探索极致用户体验与最佳工程实践。