前言
React组件式开发，顾名思义，就是将一个大的整体项目按功能拆分成一个个小的模块，每个功能块封装一个功能，拥有属于自己的独立的功能。这样React组件开发方式在项目开发中也就有了其独特的魅力以及无与伦比的地位
React 作为声明式的UI组件开发框架，可以用组件来声明功能带来了更好的协同性，方便代码的后期管理,以及多人之间的共同协作。再加上如今越来越多的扩展包以及框架也为前端领域带来了无限可能
接下来以实战 仿OPPO商城来走入React组件开发。(由于刚学习没多久组件各方面还有点糙，后续有待完善，欢迎小白一起借鉴)
组件展示
左边为React开发OPPO商城，右边为原始商城页面
组件设计思路
由原商城页面可知我们需要以下几个组件
-
头部搜索组件：静态组件的实现，跳转到搜索页面
-
底部路由导航组件：通过路由的跳转实现单页面的切换效果
-
轮播图组件：使用swiper包，实现轮播效果
-
分类选择组件：静态组件的实现
-
商品列表组件：在父组件的请求数据，通过props传递数据给子组件
组件的实现
1. 组件的结构以及组件树
2. 组件结构讲解
-
根目录 public 静态资源目录做全局自适应 不需要在src 里面引入
-
src 下
a. api 放数据接口 方便统一管理
b. assets 用来做组件样式重置以及放图片，视频等资源
c. components 放置 Header 和 Footer 组件
d. config 用来做页面标题配置
e. Pages 放置路由跳转的所有页面组件 本项目包含组件有 Home：首页(内置Search：搜索框，Banners：轮播图，Goods：商品导航，Goodslist：商品列表)，Shopcar：购物车，Classify：分类，Mine：我的，以及GoSearch：搜索页面 (由于时间有限本项目中只完成了Home以及GoSearch组件)
f. router 配置路由组件
g. utils 放置非单独页面调用的函数
3. 实现步骤以及源代码讲解
1. 首先我们要封装一个组件
这里用的是 npm init @vitejs/app
2.配置文件夹
2.1 配置vite.config
目的是避免太长的路径，引入文件时不方便，
2.2 根据自己想要的效果图建立出大致的文件夹
-
我先建立了这四个
-
这个可以根据自己的需求来建立后期可自己根据需要增删
2.3 做样式重置以及页面的适配(也就是Public/js/adapter.jsx和assets/style/reset.css)
-
这里设置20px为1rem 后面所有的大小将不再使用px，使用rem代替px确保能够适应所有的手机型号
-
这两个页面可以去网上扒，然后根据自己后面自己的需求在来修改。(当然如果觉得别人写的用的不顺手的话也可以自己写，多花点时间相信大佬们可以搞定)
3. 组件实现
3.1 Footer组件
- 固定在每个页面的底部，放在conponents文件夹下，并且通过路由组件(router)实现页面切换效果
这里有几个知识点
- 首先这里引入和使用了classnames
classnames 可以实现react 的动态类名输出，通过处理器帮我们生成一个Hash类名来解决多类名输出的重复麻烦问题，省时省力，再也不用担心类名重复问题了
- Font Awesome 图标包
通过Font Awesome图标网站引入图标(这里用的是4.7.0版本，每个版本语法不一样)，使用时记得在main.jsx中引入font-awesome/css/font-awesome.min.css 实现效果
-
通过
useLocation配合active:pathname实现路由的跳转 -
效果如图：
- 相信很多读者想问 if (isPathPartlyExisted(pathname)) return 这句代码是干嘛用的吧。这里先买个关子，等到讲解Search组件时一起讲解。
3.2 Home组件 放在Pages下
Home组件作用是来声明处于Home下的组件，以及利用一个useEffect(生命周期)以及一个立即执行函数管理接口传入的数据并传给相应的子组件。
3.3 Search组件放在 Pages/Home/文件夹下
- 做主页头部搜索框
- 通过为search-eara 和 search-logo 添加
onClick事件配合Navigate实现点击搜索框以及登录字体跳转到搜索和我的页面 - 效果如图：
具体代码见上图6-12以及19-24行
3.4 轮播图的实现(Banners组件位于src/pages/home/下)
- 轮播图效果这里用的是swiper组件
swiper 有其相对固定的结构可以参考swiper文档，添加autoplay 实现自动轮播效果，加上 delay 控制轮播速度
- 部分代码以及效果展示
这里我封装了一个renderBtnBannersPage函数来封装，方便下面代码调用以及修改。 再加上运用slice 来切割这个图片数量来控制一屏有多少张图片
然后 利用一个Link 来控制跳转页面(由于该组件没有完善个页面就统一跳转至/element/all)
3.5 Goods组件以及Goodslist组件 放在src/pages/home/下
- 部分代码以及效果展示
- 左边为Goods组件 右边为Goodslist组件
这两个组件相比较于之前的组件就比较普通了就是映入了数据然后用
css in js 完成页面样式就行了。
我认为唯一的亮点可能就是在Goodslist组件中不同样式的实现吧，这里采用了 slice切割将一个接口之中传入的数据分成两部分，放入两个不同的数组，在判断传入的数据不为空之后根据自己的需求切割成两个不同长度的数组，再实现效果。这样就避免了多做一个组件以及接口。
let phoneData = [],
otherData = [];
if (goodslist.length > 0) {
phoneData = goodslist.slice(0, 6)
otherData = goodslist.slice(6)
}
3.6 GoSearch组件
search组件就比较普通了就是应用HTML + css in js 以react组件思想实现就可以了
- 部分代码及效果展示：
不知道有没有细心的小伙伴发现了这个页面没有Footer组件也就是底部的那一块这也是这本页面唯一的亮点了。要说到实现这个功能就不得不说到utils组件
3.7 utils组件 放在src下
代码如下：
export const isPathPartlyExisted = (path) => {
const arr = ['/search'];
// 任何情况 结果数组第二项都是arr里匹配的单项
let pathRes = path.split('/')
if (pathRes[1] && arr.indexOf(`/${pathRes[1]}`) != -1) return true
return false
}
utils 通过封装这个组件来实现Footer组件的状态，对传入的path进行对'/'的split 形成一个新数组，再对第二项进行匹配，Footer组件里的isPathPartlyExisted也就是调用这个函数来实现效果的。
4. 路由的配置
- 组件代码
- 这里将本项目所有路由全部配置到
router组件之中统一管理，方便后期代码的管理以及更改，提升代码的可读性 - 使用
lazy延迟加载。目的是为了做到按需加载，因为我们访问一个项目首先进入的是首页，我们肯定希望越快看到页面越好，其他的页面但我们需要访问时再加载显示，这样就可以再项目越做越大，路由越来越多的情况下，可以大大提升页面的加载速度，给用户带来更好的体验。
5.相关依赖
- 项目由于部分扩展包不是最新版本，所以会有和最新版本不一样的语法，请此方面疑问的可以查阅相关版本的文档。
总结
至此。和大家分享的第一个React项目就结束了。这个项目可以说还只是一个比较粗糙的项目，对于一些状态的使用以及交互功能都还有待后期完善。仅为各位入坑小白提供参考，同时我也会在后期随着对于Rreact的学习的深入，对本项目进行完善和整改。敬请期待后续发文。如有错误请于评论区告知，会加以改正。同样也欢迎各位大佬在评论区发表意见。最后请求各位大佬动一动发财的小手戳一个赞并给个小星星咯！