超有品的React项目实战：小米有品组件开发

前言

对于初学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 

页面整体布局分析

自适应

作为一个移动端项目，项目在开发过程中需要需要配置不同手机的型号大小，所以需要自适应来调配，需要在public文件下的js中建一个adapter.js

var init = function () {var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;if (clientWidth >= 640) {clientW