飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

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

时间:2021-12-29  作者:pengfei-nie  

前言

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

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

  下边是目录,因为每个项目不一样,比如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目录下创建域名文件,不需要引入,系统会自动拦截转发的。具体代码这里不贴了,看源码吧。

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

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

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

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

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

四、安装路由react-route-dom

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

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

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

npm install --save react-router-dom

五、安装axios和redux三件套

  安装状态管理和http请求。src\utils\域名 这是封装的axios文件,对token添加,报错统一处理等做了处理,代码有注释。 src\store\域名 文件是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一样,体积小特别多,确实更好。

  这里注意修改 域名 的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\域名 是一个使用组件做的增删改查界面。代码逻辑我就不多说了。我在另一篇博客做了一些组件封装,还有useState useEffect等hooks函数的使用讲解,感兴趣的可以去那看  链接在这: https://域名/pengfei-nie/p/域名

九、总结

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

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

标签:编程
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。