# 介绍
本项目是掘金小册上的一个课程，github 地址，作者水平很高，感觉物超所值。
此系列主要是记录实践过程。
# React 相关技术栈
- react 全家桶套餐
- react: 版本在
^17.0.1 - react-router
- react-router-dom
- react: 版本在
- redux: 状态管理容器
- rc-redux-model: 让 redux 使用起来更加方便
- redux-logger: 控制台看到最新 redux 的数据
# 配置相关技术栈
Babel
当前主流的 JS 编译器，我们可以从官网看到 Babel 和 React JSX 的关系。所以通过 Babel 将我们的 React JSX 转成浏览器所能识别的 JS 语法是有必要的。
Webpack
好评率较高的打包工具，如果说你的应用程序非常小，没有什么静态资源，只需要一个 JS 文件就可以满足需求，这时使用 Webpack 并不是一个好的选择。很明显，我们的简历平台并不符合这种场景。
如果你对 Webpack 还不太了解，建议阅读彩蛋篇 - Webpack 基础介绍与两大利器
我们可能会遇到一些问题：
- webpack 将我们模块打包好之后，我们手动写一个 html，加载打包好的资源，这没问题，但能自动化的事情，不香吗？不禁思考，能否通过 webpack 来生成 html 页面？
- build 打包后的 index.html 直接打开即可，但随即带来的问题是：没有热更新，我改一个字母、一句文案，都需要 build 一次才能看到结果，这种开始方式有些原始，怎么办？
- 环境区分，很多时候我们需要针对不同环境进行不同操作，当配置文件大了之后，里边充斥着大量的三元运算符用户环境判断，属实蛋疼，怎么办？
上述问题业界内较好的解决方案是 html-webpack-plugin、webpack-dev-server 和 webpack-merge，同学们可以私下了解它们的工作原理。
TypeScript
小伙伴们是否有过这种体会，奋笔疾书的写下了一段代码，Ctrl+S 保存，Hot 热更新，然后页面白屏。
回头一看，原来 [...Array.from()] 写成了 [...Array.form()] ， 诸如此类问题还有许多，Rollbar 平台统计了前端项目中 Top10 的错误类型，排在最前面的就是：
Uncaught TypeError: Cannot read property xxx of undefined
为了在编写代码阶段，就能规避此类低级 Bug 问题，我们引入了 TypeScript。同时采用 eslint + prettier 进行代码风格检查和代码自动格式化，毕竟阿宽有点代码洁癖。
为此，我们相关配置最后的技术栈为：
- Babel
- Webpack
- Eslint
- Prettier
- TypeScript
