---

theme: Chinese-red

前言

React介绍

  React是一个用于构建用户界面的JavaScript库，主要用于构建UI。React拥有较高的性能以及很多特点，比如JSX（这是JavaScript的扩展语法）和组件。组件化思想在React中的应用十分广泛，通过构造组件可以将代码很好的得到复用。此外，React的声明式设计和通过对DOM的模拟，给它带来了高效灵活的特点。

项目描述

  小红书作为一款定位于社交 && 电商 的App，近些年来越来越受到更多人的关注，它的用户群体也在不断扩大。作为一名小红书的使用者，以及结合近期正在学习React相关知识，便有了使用React仿小红书首页的想法。此项目实现小红书首页的基本页面，接下来就带你进入项目展示及实战。

成品展示

话不多说，直接上图

---

搞错了，重来

---

项目实战

开始阶段

  在Vscode中创建一个React项目，创建项目很多种方式，使用官方脚手架create-react-app或者Webpack创建，在此我使用的是Vitejs方式创建，这种方式会比其他方式快很多。如果大家对此感兴趣的话，后面会写一篇关于Vite和Webpack的文章，大家的点赞与支持，是我不断创作的动力来源 ღ( ´･ᴗ･` )

文件夹配置

  项目创建好后，接下来就是将相关文件中的代码以及相关多余的文件清理干净，然后创建好项目中最基本的文件夹。 - api文件夹  用于网络请求方面 - assets文件夹  用于存放部分图标图片等静态资源 - pages文件夹  用于页面 - commpents文件夹  用于可复用的组件   更详细的文件目录如下：

依赖安装

  相关文件夹配置完成后，可以开始安装项目需要的依赖 - npm i axios   用于获取后端数据 - npm i react-router react-router-dom    用于项目路由跳转 - npm i styled-components   用于实现Css in JS - npm i antd-mobile   一个好用的UI组件库 - npm i classname   用于添加多个类名   安装成功后如下所示：

组件及页面分析

路由介绍

  在以上工作完成后，接下来就是搭建相关路由了，路由在项目中是十分重要的。Route【路由】可以理解为现实中路由器后面的接口，Routes【路由器】可以理解为现实的路由器用来管理路由。在此项目中，我设置了如下几个路由：
const Home = lazy(() => import('./pages/Home')) const Mine = lazy(() => import('./pages/Mine')) const Message = lazy(() => import('./pages/Message')) const Shop = lazy(() => import('./pages/Shop')) const Choose = lazy(() => import('./pages/Choose'))

---

<Routes> <Route path="/" element={<Home/>}></Route> <Route path="/home" element={<Home/>}></Route> <Route path="/mine" element={<Mine/>}></Route> <Route path="/message" element={<Message/>}></Route> <Route path="/shop" element={<Shop/>}></Route> <Route path='/choose' element={<Choose />}></Route> </Routes>

---

  路由搭建需要注意以下几点： - 在main.jsx中引入{BrowserRouter}方能正常使用 - 使用路由懒加载，可提升加载速度，需引入{Suspense}

• 若出现某个页面跳转后不显示底部导航栏，可以通过简单的条件判断和{useLocation}接受传来的值来实现。比如如下所示： import {useLocation} from 'react-router-dom'

---

const {pathname}=useLocation() if (pathname == '/choose') return

---

数据请求

  在此项目中采用的是fastmock来请求与管理数据，然后在api文件夹中创建request.js来获取数据。后续在相关页面中引入即可。

``` import axios from 'axios'

export const Getlist = () =>
axios.get ('http://www.fastmock.site/mock/33e7fec4e60b54344eaa2c59a55b379d/red_book/red_book/list') export const Getfood = () =>
axios.get ('http://www.fastmock.site/mock/33e7fec4e60b54344eaa2c59a55b379d/red_book/red_book/food') ```

---

底部导航栏

---

  底部导航栏通过路由的切换来实现。上面已经讲过一些路由知识，在此就不做过多描述。在components文件夹中创建Footer组件，用于底部导航栏。在此注意点击中间加号跳转后底部导航栏不会一起跳转，因此需要做相关判断来实现跳转新页面，源码如下：
Footer.jsx ``` import React from 'react' import {Link,useLocation} from 'react-router-dom' import {FooterWrapper} from './style' import classnames from 'classnames' import { Badge } from 'antd-mobile'

function Footer(props) { const {pathname}=useLocation() if (pathname == '/choose') return return ( 首页 商城 消息 我 ) }

export default Footer ```

---

  主页面引入Footer，部分源码如下： ``` <> }> }> }> }> }> }>