---

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 ('https://www.fastmock.site/mock/33e7fec4e60b54344eaa2c59a55b379d/red_book/red_book/list') export const Getfood = () =>
axios.get ('https://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，部分源碼如下： ``` <> }> }> }> }> }> }>