前言
对于初学react的人来说,学习react过程中有一点的难度,那react又是什么呢?react是用于构建用户界面的 JavaScript库,对于react来理解,组件化,数据驱动这两点。那什么又是组件呢,这个比较抽象,写React就是写组件。将一个界面分成若干个组件,组合包装成完整页面写每一个组件的时候,每个组件有自己的生命周期,在组件不同的周期里做自己想要做的逻辑子组件接受父组件的参数(Props),以及维护组件内部的状态(State)
前期准备
对于一个新手来,在学习react中必须了解html、css还有JavaScript的相关知识,写react项目前的准备工作,安装vscode还有node.js,这些工具能够帮助你完成你的项目。
创建项目
使用的脚手架是vite,vite是vue的作者尤雨溪带货的工程化套化 代替webpack,vite就是速度。
项目包
- react:react+react-router
- styled-components:css in js 的工程化工具
- font-awesome 图标字体库
- axios:用于请求后端api数据
- antd-mobile:一个基于 Preact / React / React Native 的 UI 组件库
项目框架如下
react_dewu/node_modules/src/api/ 网络请求代码和相关匹配assets/ 静态文件components/ 可复用的UI组件page/ 页面routes/ 路由配置文件utils/ 工具类函数App.jsx 根组件main.jsx入口文件style.js默认样式index.htmlpackage.jsonreadme.mdvite.config.js
页面整体布局分析
![](https://i-blog.csdnimg.cn/blog_migrate/19aa2fb2fd4fbbddd09758e7d2a118b3.webp?x-image-process=image/format,png)
自适应
作为一个移动端项目,项目在开发过程中需要需要配置不同手机的型号大小,所以需要自适应来调配,需要在public文件下的js中建一个adapter.js
var init = function () {var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;if (clientWidth >= 640) {clientWidth = 640;}var fontSize = 20 / 375 * clientWidth;document.documentElement.style.fontSize = fontSize + "px";}init();window.addEventListener("res