前言
对于初学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.html
package.json
readme.md
vite.config.js
页面整体布局分析
自适应
作为一个移动端项目,项目在开发过程中需要需要配置不同手机的型号大小,所以需要自适应来调配,需要在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("resize", init);
将adapter.js引入到index.html中
<script src="./public/js/adapter.js"></script>
配置路由设置
整个页面需要跳转和切换页面,我们需要配置路由设置,在这我们要在根组件配置,我们需要从react-router-dom结构出BrowserRouter,配置的目的是BrowserRouter组件包装应用的根组件( ,并使这些组件能够与 history 对象交互。 当应用初始化时, BrowserRouter组件初始化 history 对象,并使用 React 的 context 将其提供给所有子组件。
底部导航栏footer
前面我们已经在根组件配置了路由,可以在子组件中配置子路由,我们在react-router-dom中解构出Link实现路由跳转
import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { FooterWrapper } from './style'
import classnames from 'classnames'
export default function Footer(props) {
const { pathname } = useLocation()
if (isPathPartlyExisted(pathname)) return// 公共函数的 在一个数组里匹配每一项部分匹配pathname 就可以了
return (
<FooterWrapper>
<Link to="/home"
className={classnames({active:pathname == '/home' || pathname == '/' })}>
<i className="fa fa-home"></i>
<span>首页</span>
</Link>
<Link to="/find"
className={classnames({active:pathname == '/find' || pathname == '/' })}>
<i className="fa fa-server"></i>
<span>分类</span>
</Link>
<Link to="/news"
className={classnames({active:pathname == '/news' || pathname == '/' })}>
<i className="fa fa-cart-arrow-down"></i>
<span>购物车</span>
</Link>
<Link to="/mine"
className={classnames({active:pathname == '/mine' || pathname == '/' })}>
<i className="fa fa-user-o"></i>
<span>我的</span>
</Link>
</FooterWrapper>
)
}
在router文件中配置子组件的子路由,这样就能实现底部导航栏的跳转
路由状态的改变
- useLocation 挂钩是一个函数,它返回包含有关当前 URL 的信息的位置对象。每当 URL 更改时,都会返回一个新的位置对象。
- classnames可以非常简单的进行class 赋值
- 要实现路由跳转转态,我们要使用useLocation()这个api从地址解构出pathname在判断className中的pathname是否为当前地址。
{classnames({active:pathname == '/mine' || pathname == '/' }
页面开发
开发准备,我们需要引入相关数据,引入数据我们需要使用到axios,axios是一个基于 promise的网络请求库,可以用于浏览器和node.js.在网页开发过程中都需要使用到的axios,axios能够更好的实现工程化管理,子组件不做数据请求,数据请求交给父组件管理。
使用async + await实现数据同步,在使用useState实现数据输出
const [icons, setIcons] = useState([])
const [buys, setBuys] = useState([])
useEffect(() => {
(async () => {
let { data:iconData } = await getIcon()
let { data:buyData } = await getBuy()
setIcons(iconData);
setBuys(buyData);
})()
},[])
获取数据后将数据放入组件中
<Setbuy buys={buys}/>
轮播图
轮播图的实现首要使用到swiper,使用swiper时也需要引入相应的样式
import 'swiper/dist/css/swiper.min.css'
swiper一般在什么地方用呢
- 当有一组平级的内容。
- 当内容空间不足时,进行轮播展现。
- 常用于一组图片或卡片轮播。
效果图为
实现代码
import React, {useEffect} from 'react'
import Swiper from 'swiper'
import './style.css'
export default function SetMeal() {
let swiper = null//swiper 不能多次实例化
useEffect(() => {
if(swiper){
return
}
swiper = new Swiper('.home_info_setmeal', {
loop: true,
pagination:{
el:'.swiper-pagination'// 滑动
},
autoplay: {
delay: 4000
}
})
},[])
return (
<div className="home_info_setmeal swiper-container">
<div className="home_info_setmeal swiper-wrapper">
<div className = "swiper-slide">
<p>
<img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/8f6eabc4_ff0c_4c44_b3c6_20edd700ace5.jpeg" alt=""/>
</p>
</div>
<div className="swiper-slide">
<p>
<img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/004547c4_6733_4030_9857_60906e7e9f06.jpeg" alt=""/>
</p>
</div>
<div className="swiper-slide">
<p>
<img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/23e9d50b_3e72_44fa_88f1_f391ce410381.png" alt=""/>
</p>
</div>
<div className="swiper-slide">
<p>
<img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/8b6d166c_bbaa_47f6_b7a3_ec900a7f37f9.jpeg" alt=""/>
</p>
</div>
<div className="swiper-slide">
<p>
<img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/12d73085_4806_4a86_94d0_68e155281dd9.png" alt=""/>
</p>
</div>
</div>
</div>
)
}
滑动
效果图
在设置滑动过程主要是用css来写的,这是目前的效果图,我会不断的完善,用不同的方法来写
总结
在写项目的过程中还是出现的一些问题,在许多的地方需要完善,不断的改进react项目。