前言
经过一段时间的学习，React也算是初步认识了，就用 react + hooks 展现我对得物的热情啦，欢迎掘友们点赞关注🤗。
组件展示
-
- 最上方是一个link跳转，可以通过Link跳转到得物的鉴别页面
-
- 搜索框：选用了
antd-mobile中的样式
- 搜索框：选用了
-
navLink：使用了二级路由，封装在outlet中,每个下都有一个页面
-
- 第一个轮播图：使用了
swiper进行设计，并且设置了自动轮播
- 第一个轮播图：使用了
-
- 滑块：使用swiper进行设计，不要自动轮播
-
- link跳转
-
- 商品栏：
flex布局实现
- 商品栏：
-
- 底部栏：
Footer使用 Router 进行设计，用Link进行跳转
- 底部栏：
项目准备
- 在使用React进行项目设计的时候，首先需要使用react脚手架进行项目的创建
npm init @vitejs/app react-dewu 或者
npm i -g create-react-app react-dewu
- 新建文件夹
- api：主要用来放置request请求
- assets：里面放一些图片，样式，矢量图之类的
- components：组件夹，除路由之外，基本组件都放在这里面
- pages: 一般用于页面底部或顶部栏的封装
- routes:一般所有的路由都放在此处，方便代码管理
- 进行自适应设置
- 由于得物App是一个移动端项目，所以在切页面之前，要先让移动端先自适应页面，在这里我们可以在文件根目录下新建一个public文件夹，里面建立
adapter.js文件,在其中将整篇文章所需要用的px置换成rem
- 写好之后，我们检查页面可以看见
页面固定组件
顶部鉴别组件
在这里，需要安装一个包来实现link跳转,由于时间关系，link跳转页面还没有完成
npm i react-router react-router-dom
保障全新正品后的">"是来自阿里矢量图中的，详情请看 [iconfont-阿里巴巴矢量图标库](url)
搜索框组件
在这里我引用了antd-mobile中的组件，所以此处还需要安装一个包，此外还有些功能将在之后陆续实现
npm i antd-mobile
底部导航栏
- 在底部导航栏这里，我们将它封装在components文件夹下的Footer组件里，使用
Routes和Route，Route设置每个文件夹设置路由路径，Routes 是将所有的Route 组合成一个数组,方便管理。 - 用Link实现跳转功能
- 矢量图将在之后陆续加上
底部导航栏Link跳转功能
页面动态组件
在上面，都是固定在这个页面，不会改变的，从这里开始，增加了二级路由，在Nav栏滑动时，中间页面会随之改变
Nav二级路由
我在buy页面下增加了部分二级路由，并使用link进行跳转
由于每个页面下都有一个轮播图，所以我一起做了个定位，文字才会出现在下方
轮播图
- 轮播图使用
swiper和useEffect实现，在组件挂载后，useEffect就会实例化幻灯片中的new Swiper('.btn_banners') - 也可以把它交给全局变量，
Swiper在实例化前判断一下，如果已经实例化就退出 - 增加一个
autoplay，便可以实现自动轮播，这里也需要安装包
npm i swiper@4.5.0
滑块
在这里，也是用了swiper来实现，但是取消了自动轮播，让后使用了flex布局来完成了样式的构成，并且使用了slice进行切块，使它呈现出两个页面
且每个模块上都设置了Link事件，可以进行跳转
商品组件
在这里，运用了flex布局进行页面设计，照片盒子width占50%.
详情flex布局，请见本人拙作[小青蛙回家记之Flex布局学习 - 掘金 (juejin.cn)](url)
基本功能完成
数据请求功能
使用在线接口Mock工具fastmock模拟ajax请求
- fastmock链接www.fastmock.site/#/
- 在
api文件夹下的repuest.js中写好axios数据请求 - 使用
await+async实现
npm i axios
路由集中管理
在根目录下建立routes文件夹，路由放在其中集中管理
这样做的好处是，方便集中统一管理路由，在项目的深入以及后面项目复杂起来后，都可以更好地管理。
组件化思维，也让首页干净了，layout 没有污染了
结束语
到这里，得物的基本样式就开发出来了，当然，其中还有很多小细节没有完善，我还会继续跟进学习，完善这个项目，写出最正宗的得物App,各位看官，麻烦用发财的小手点个赞再走吧~
项目源码地址：TaoJi666/React-dewu: 使用react hooks 完成得物App开发 (github.com)
