使用 react-app-rewired 扩展Webpack配置
在不用使用react脚手架提供的 eject 命令打开webpack配置文件的情况下，扩展webpack，通常我们需要使用两个插件 react-app-rewired babel-plugin-import来修改我们项目的webpack
安装常用的npm包
- axios: Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
- lodash: Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
- ahooks: ahooks 是由蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共同建设的 React Hooks 工具库。
- redux: Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
- react-router: React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。
- immutable/immer: immutable是一种持久化数据。一旦被创建就不会被修改。修改immutable对象的时候返回新的immutable。但是原数据不会改变。
- antd: antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
- antv: 蚂蚁集团全新一代数据可视化解决方案
- mock.js：Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。
- jQuery：jQuery是一个快速、简洁的JavaScript框架。
- 等等
对文件夹和文件进行创建(重要)
文件夹的创建并不是随意任意的，甚至通过文件夹的分级层次就可以看出项目的整体结构。
- 首先React 是一个用于构建用户界面的 JAVASCRIPT 库。所以对于react来说它本身应当只用作构建界面使用，只会处理少量的业务逻辑。
- 清晰的数据流向，对于前端来说最核心的任务就是将数据转换成面对用户的页面以及和用户进行交互将数据传递给后端。那么你的文件必须有着清晰的数据流向。
- 划分领域，按照什么样的方式来对文件进行分类。
按照我的思路实现一遍文件的创建：
- 首先必须要有的是page或者也叫router，这是我们的react的页面，里面的组件都是用于向用户展示（子文件夹components存放该模块的公用组件）
- 第二个是components，有了page之后我们需要提取一些公共的组件，简化我们的代码和重复工作，这里存放的是全局公共页面组件
- 第三个是utils，工具通常是我常用的一些工具方法，按需导入使用，也可以将axios的封装放在这里，还有表单验证的通用规则等等
- 第四个是common，这里通常是一些全局的配置文件或者全局常量，全部api接口地址等等
- 第五个开始是关系到数据的文件，前端的数据来源基本都是通过接口实现，建立一个Service文件夹
- 第六个是model文件夹，用于解析处理数据，返回正确格式
- 第七个是store文件夹，用于存储仓库数据，如果只是单页面使用可以直接存放在页面中的state状态中。
- 第八个是style文件夹，用于存储页面的所有样式文件
- 等等
当然每个人的思路都是不一样的，只要你按照某种模式进行数据的流动拆分，都是可以的，你可以将style写入router的子文件里面，也可以不写api集成，直接在Service里面写请求地址都是可以的
对路由进行配置
对权限进行管理
- https://blog.csdn.net/shadowfall/article/details/115358218
- https://blog.csdn.net/shadowfall/article/details/119007524