从零搭建react hooks项目(github有源代码)

前言

　　首先这是一个react17的项目，包含项目中常用的路由、状态管理、less及全局变量配置、UI等等一系列的功能，开箱即用，是为了以后启动项目方便，特地做的基础框架，在这里分享出来。

　　这里写一下背景，我最开始是node8的环境，因为react17需要至少node14的版本，我就直接升级到16了，关于node升级遇到的问题，我有另一篇文章专门罗列步骤和可能出现的问题及解决方案，这里就不多说。链接在这  https://www.cnblogs.com/pengfei-nie/p/15701138.html

　　下边是目录，因为每个项目不一样，比如less、antd就不是必须的，大家可以直接点目录跳转自己想看的内容

　　另外，先贴一下代码，这是我的GitHub项目地址   点这里，看源码

　　以下流程是从零搭建，如果某些模块你已经有了可以直接跳过。

目录

1、使用 create-react-app 创建应用

2、安装less、完善目录结构

3、修改配置文件(修改端口号，安装本地服务转发等)

4、安装路由react-route

5、安装axios和redux三件套

6、安装antd

7、安装prop-types和mock

8、编写页面逻辑

9、总结

一、react-cli创建应用

　　先卸载老版本脚手架，然后安装最新版本的，然后创建我们的应用，指令在下边了。npx是npm附带安装的，可以执行二进制文件。创建好项目，我们就可以打开项目，看一下效果了。

npm uninstall -g create-react-app
npm install -g create-react-app
npx create-react-app react-cli17

二、安装less、完善目录结构

　　然后安装less，我习惯使用less，如果不需要的可以直接略过。不过这个项目我会配置全局的样式，还会配置全局的less变量。这个可以说是必须的，一个系统得有统一的风格，特别是色调和文字大小，有全局变量，后期维护或者做扩展都很方便，这也是良好的习惯。

　　下边是安装less相关包的指令

npm install less less-loader --save
npm i style-resources-loader

三、修改配置文件(修改端口号，安装本地服务转发等)

　　现在运行eject指令，暴露出项目的配置文件，然后安装proxy本地服务代理依赖，官方支持代理，但是功能不多，用这个做多服务转发，socket转发等方便很多。关于代理，在src目录下创建setupProxy.js文件，不需要引入，系统会自动拦截转发的。具体代码这里不贴了，看源码吧。

　　完善下目录结构，提前把常用的文件目录都建好，后面就不用一一添加了，看下图。

　　修改端口号，scripts\start.js 文件下第47行，将原来的端口号改成你想要的。改端口号方法很多，但是我们既然选择eject了，那就在start.js文件里面修改。

　　配置less，config\webpack.config.js 文件 74行 和 541行，就是在sass的后边增加less的解析、全局样式文件的引入，确保你可以在项目任何地方使用你的less变量。这个行数是参考我的原码来的，至于具体每一行代码什么意思，我就不在这具体说了，只说配置，先把架构搭建起来，涉及东西太多，不明白的自己慢慢学。

　　配置便捷路径，config\webpack.config.js    322行，就是配置一个便捷路径，不需要按照相对路径一层层写下去，直接利用根路径和path模块，前端常规操作。

npm run eject      // 显示配置文件
npm install http-proxy-middleware --save    // 安装代理中间件

四、安装路由react-route-dom

　　先安装路由。这里大致解析下App.jsx文件，看图片。react升级后，相关的依赖也都做了升级，增加了对应的hooks支持。标签更是变化非常大，Routes就是以前Switch，还有其他标签也变了，比如重定向、根标签等等，这里也不多说，查文档即可。需要注意下按需加载，首次用到某个模块时，才会加载，使用suspense会自动执行加载动画，要不然会闪屏。当然后续再打开就不会有加载动画了。

　　结构方面，我做了layout布局组件，这个也是根据项目需要做修改，比如登陆、注册肯定不会和业务逻辑页面用同样的布局，所以我认为登陆、首页等属于静态路由不会变的，然后其他都属于业务逻辑页面，进行了路由嵌套。其实这里只是举了简单的例子，有一个路由的区分。不想把404还有其他一些情况写进来，毕竟每个项目场景不同。

　　src\layouts\BasicLayout.jsx 布局文件渲染，这里渲染业务逻辑路由，我写了个递归，路由和菜单都在route文件维护就好。

npm install --save react-router-dom

五、安装axios和redux三件套

　　安装状态管理和http请求。src\utils\request.js 这是封装的axios文件，对token添加，报错统一处理等做了处理，代码有注释。 src\store\index.js 文件是redux的配置注意分模块，action注意都加上模块名，做区分，避免action同名，同时触发。代码有注释。

npm install axios  做http请求的
npm install redux    状态管理的
npm install react-redux  更方便的全局使用redux
npm i redux-thunk    redux中间件，解决异步请求问题的

六、安装antd

　　然后安装UI库，我用antd习惯了，这里还是用它，这里大家随意，毕竟UI库很多，用别的的直接跳过。antd的引入本来就是按需加载的，最新版本icon为了迎合按需加载，也单独抽离出来了。最新版放弃了moment ，改用dayjs。鉴于此，那我们项目中也使用dayjs，也得安装一下。不过这个包用法和moment一样，体积小特别多，确实更好。

　　这里注意修改 package.json 的babel配置，见下图，按需加载样式文件的。这个antd官网详细有说明

npm i antd --save
npm i --save @ant-design/icons
npm install babel-plugin-import --save--dev
npm i dayjs

七、安装prop-types和mock

　　封装可复用组件，类型检查是必须的，因为我没有使用typeScript语法，所以使用props-types。然后这个项目我做了一些简单逻辑，比如登陆，比如权限校验，这些都是项目中必需的，为了方便，安装了mock，做了模拟数据，mock也是非常方便的工具，装了不吃亏。

npm i prop-types 做类型检查
npm install mock 安装mock，做数据模拟

八、编写页面逻辑

　　src\components 写了一些全局组件，src\views\Report.jsx 是一个使用组件做的增删改查界面。代码逻辑我就不多说了。我在另一篇博客做了一些组件封装，还有useState useEffect等hooks函数的使用讲解，感兴趣的可以去那看  链接在这： https://www.cnblogs.com/pengfei-nie/p/15719569.html

九、总结

　　这篇文章主要是对我GitHub上react17项目框架的一个搭建说明。记录一下这个框架是怎么一步步搭建起来的。当中涉及的知识点很多，毕竟是一个项目的骨架，所以主要讲怎么做，至于每个模块代码怎么用，那写起来篇幅就太大了。不过这也是一条很好的学习之路，顺着这套搭建流程，将这些技术点一个个攻克还是很有必要的。

　　希望这篇文章能对你有所帮助！