超容易上手的React项目实战：小黑盒组件开发，BUG全都退~退~退~

前言

React是用于构建用户界面的JavaScript库，起源于FaceBook的内部项目，那么什么是组件化呢？组件化的核心思想就是提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。有了组件化的思想，我们在之后的开发中就要充分的利用它，尽可能的将页面拆分成一个个小的，可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强。> 正好赶上Steam的夏促活动，而我一般使用小黑盒这款移动端app查看优惠（_背刺）信息，于是就想着能不能自己动手使用React开发一个类似小黑盒的界面来锻炼自己组件开发的能力。

页面展示

项目准备

技术栈

• Html, CSS, JavaScript 三剑客
• antd-mobile 一个由由蚂蚁金融团队推出的一个开源的react组件库
• axios 用于请求后端api数据
• classnames 能方便动态切换 class 名称
• font-awesome 一个图标字体库
• swiper 一款轻量级的轮播图插件
• react   react-router   react-router-dom 路由组件

创建React项目

要想快速上手React项目，一个好的React脚手架是必不可少的。以下是我创建脚手架的方式

npm init @vitejs/app 

我选用这种方式的主要原因就是快这种方式相对于传统的方式分家的简单和直接，是目前最快的脚手架

项目架构

|--xiaoheihe
||--index.html
||--js
||└──adapter.js
||--src
|||--api
|||└──request.js
|||--assets
|||└──styles
||| └──reset.css
|||--components
|||└──Cutover
|||--pages
|||├──All
|||├──AllDetail