---

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，部分原始碼如下： ``` <> }> }> }> }> }> }>