一. 安装 react
1.安装 react 和 路由
导入基础包
npm i react react-dom react-router -D
2.安装编译工具
react 要用 babel-loader 编译，需要导入 @babel/preset-react
npm i @babel/preset-react -D
3.配置 webpack 的 loader
需要在 webpack.config.js 里面配置如下：
4.配置 babel
需要在 babel.config.json 里面配置如下：
具体的babel配置看我的另一篇文章
webpack 中引入 babel7
你在这个文件里面可以看到那些插件可以用，那些插件已经被废弃了，但是很多博客都还是在冗余配置。
5.配置扩展名
引入了 ts 和 react 以后，那就要记得把 js 文件入口文件改成 ts 的，把扩展名属性也修改一下
6.修改入口文件
入口文件
二. 配置路由
1.安装相关的包
npm i react-router-config
npm i --save-dev @types/react-router-dom
react-route-config是一个辅助react-router的插件，主要是使用配置文件集中式管理路由。具体使用如下： 他的属性有：
- path:配置路由地址，
- component：对应相关组件，
- routes：配置子路由
- 她返回两个方法 matchRoutes，renderRoutes 它的属性如下：
具体使用如下：
2.配置路由：
3.导入路由配置
在 App 里面引入路由
4.路由守卫
简单的路由配置用 react-route-config 就可以完成，但是有路由守卫的话，我们就的自己写一个工具来实现一下。
打开react-route-config 的renderRoutes方法如下：
其源码就是一个高阶函数 利用一个map函数生成静态路由
我们可以在utils/renderRoutes.ts里面模仿react-route-config写一个路由守卫
配置如下：
如果需要你可以按照自己的需求重写 renderRoutes 方法，她的原理就是通过 map方法去查看配置 json里里面的属性，来判定你是否有权力进到这个路由里面去。
