前言

React 是一個(gè)用于構(gòu)建用戶界面的 Javascript庫(kù)。主要用于構(gòu)建UI，它起源于 Facebook 的內(nèi)部項(xiàng)目， 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開(kāi)始關(guān)注和使用它。接下來(lái)將通過(guò)實(shí)戰(zhàn)小紅書(shū)首頁(yè)的詳細(xì)介紹其設(shè)計(jì)思路和方法，將讀者帶入到react的開(kāi)源世界，希望對(duì)前端的學(xué)者們有一定的幫助~

前期準(zhǔn)備

接下來(lái)是我們需要幾個(gè)開(kāi)源組件庫(kù)：

• axios：它是一個(gè)基于promise 的網(wǎng)絡(luò)請(qǐng)求庫(kù)，用于獲取后端數(shù)據(jù)（[fastmock網(wǎng)站]可以讓你在沒(méi)有后端程序的情況下能真實(shí)地在線模擬ajax請(qǐng)求），是前端常用的數(shù)據(jù)請(qǐng)求工具
• antd-mobile：由螞蟻金融團(tuán)隊(duì)推出的一個(gè)開(kāi)源的react組件庫(kù),這個(gè)組件庫(kù)擁有很多使用的組件；
• swiper：能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏輪播圖切換等常用效果。
• styled-compenonts：真正的css in js，增強(qiáng) CSS 以對(duì) React 組件系統(tǒng)進(jìn)行樣式設(shè)置的結(jié)果，具有簡(jiǎn)單的動(dòng)態(tài)樣式、輕松維護(hù)等優(yōu)點(diǎn)。

另外，我們還需用到faskmock(在線接口工具)模擬ajax請(qǐng)求，它使我們?cè)谀M前端開(kāi)發(fā)中后端數(shù)據(jù)提供更為方便。

項(xiàng)目預(yù)覽

項(xiàng)目準(zhǔn)備

工具

• Visual Studio Code（前端開(kāi)發(fā)工具）
• nodejs（安裝依賴，執(zhí)行代碼）
• fastmock（模擬后端數(shù)據(jù)接口）
• chrome瀏覽器（負(fù)責(zé)測(cè)試調(diào)試）

項(xiàng)目初始化

• 打開(kāi)VSCode終端
• 輸入npm init @vitejs/app(創(chuàng)建項(xiàng)目腳手架)
• 輸入項(xiàng)目名 選擇兩次react
• 進(jìn)入新創(chuàng)建的項(xiàng)目目錄(cd 項(xiàng)目名)
• npm i(安裝node_modules)
• npm run dev(執(zhí)行)

安裝項(xiàng)目依賴

工程化src目錄

api目錄

api目錄下request.js負(fù)責(zé)請(qǐng)求數(shù)據(jù)。其中引入axios.get異步拉取后端數(shù)據(jù)

import axios from 'axios'
export const getIdea = () =>
axios.get(`https://www.fastmock.site/mock/a4b2da993ea54ed1ba5098e058832828/beers/redbook`)

assets目錄

assets目錄下有font(下載的字體圖標(biāo)iconfont-阿里巴巴矢量圖標(biāo)庫(kù))以及styles(存放初始化的樣式文件)。

components目錄

components目錄下存放通用組件，例如首頁(yè)的頭尾部組件。

modules目錄

modules目錄下rem.js負(fù)責(zé)font-size來(lái)達(dá)到適配不同移動(dòng)端的效果,增強(qiáng)用戶體驗(yàn).

document.documentElement.style.fontSize =
    document.documentElement.clientWidth / 3.75 + "px"
// 橫豎屏切換
window.onresize = function() {
    document.documentElement.style.fontSize =
        document.documentElement.clientWidth / 3.75 + "px"
}

pages目錄，routes目錄以及utils目錄

pages目錄存放項(xiàng)目各個(gè)頁(yè)面的文件，而routes目錄存放著網(wǎng)頁(yè)路由，最后utils目錄存放判斷頁(yè)面是否需要首尾js文件.

頁(yè)面設(shè)計(jì)思路

main.jsx

main.jsx作為前端程序的入口，在main.jsx中引入BrowserRouter組件包裹App組件。引入字體圖標(biāo)樣式、初始樣式等...

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
import 'font-awesome/css/font-awesome.min.css'
import './assets/font/iconfont.css'
import './assets/styles/reset.css'
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

App.jsx

在App.jsx中引入自定義組件Header（主頁(yè)頭部）、Footer（主頁(yè)尾部）、RouteConfig組件（路由配置）構(gòu)成頁(yè)面。并設(shè)置loading狀態(tài)(在數(shù)據(jù)還在請(qǐng)求中時(shí)，顯示loading圖標(biāo))

import { useState, Suspense } from 'react'
import './App.css'
import Header from './components/Header'
import Footer from './components/Footer'
import RoutesConfig from './routes'
function App() {
  return (
    <div className="App">
      <Header />
      <Suspense fallback={<div>loading...</div>}>
        <RoutesConfig />
      </Suspense>
      <Footer />
    </div>
  )
}
export default App

搭建路由

路由在項(xiàng)目中是非常重要的。Route【路由】可以理解為現(xiàn)實(shí)中路由器后面的接口，Routes【路由器】可以理解為現(xiàn)實(shí)的路由器用來(lái)管理路由。在此項(xiàng)目中，我設(shè)置了如下幾個(gè)路由：

import Idea from '../pages/Home/Idea'
const Shopping = lazy(() => import('../pages/Shopping'))
const Mine = lazy(() => import('../pages/Mine'))
const Xiaoxi = lazy(() => import('../pages/Xiaoxi'))
const City = lazy(() => import('../pages/Home/City'))
const Faxian = lazy(() => import('../pages/Home/Faxian'))
const IdeaDetail = lazy(() => import('../pages/Home/Idea/IdeaItem/IdeaDetail'))
const More = lazy(() => import('../components/More'))
const Search = lazy(() => import('../components/Search'))

搭建路由需要注意以下幾點(diǎn)：

• 在main.jsx中引入{BrowserRouter}方能正常使用
• 使用路由延遲加載，可提升加載速度，需引入{Suspense}
• 若出現(xiàn)某個(gè)頁(yè)面跳轉(zhuǎn)后不顯示底部導(dǎo)航欄，可以通過(guò)簡(jiǎn)單的條件判斷和{useLocation}接受傳來(lái)的值來(lái)實(shí)現(xiàn)。

import {useLocation} from 'react-router-dom'
const {pathname}=useLocation()
if (pathname == '/choose') return

首頁(yè)組件分析

首頁(yè)是此項(xiàng)目的主頁(yè)面，進(jìn)入此頁(yè)面后，可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)等相關(guān)功能，頁(yè)面上的數(shù)據(jù)存儲(chǔ)在fastmock中。對(duì)于圖標(biāo)，采用iconfont上的圖標(biāo)足以滿足大部分需求。在assets文件夾中引入提前加入好圖標(biāo)的font文件夾，此后也能方便地在font文件夾中修改圖標(biāo)樣式。

首頁(yè)頁(yè)面布局style.js

通過(guò)ul>li并且設(shè)置好li的寬度（我使用的是rem適配方案）實(shí)現(xiàn)一行放2個(gè)和float: left;實(shí)現(xiàn)布局。

Header組件

首頁(yè)Header組件作為首頁(yè)的頭部，負(fù)責(zé)導(dǎo)航3個(gè)二級(jí)子路由。左右兩邊用span標(biāo)簽定義兩個(gè)點(diǎn)擊圖標(biāo)。

設(shè)置NavLink設(shè)置激活狀態(tài)下樣式變化(點(diǎn)擊之后狀態(tài)變?yōu)閍ctie，字體下劃線變?yōu)榧t色)

<NavLink to={{ pathname: '/home/faxian' }} className='header-word '
            style={({ isActive }) => {
              return {
                borderBottom: isActive ? "2px solid red" : "",
                fontSize: isActive ? "0.8rem" : "0.75rem",
                fontWeight: isActive ? "700" : "400",
              }
            }}>

Footer組件

首頁(yè)Footer組件位于頁(yè)面尾部，是首頁(yè)的tab標(biāo)簽欄，可以跳轉(zhuǎn)至其他同級(jí)頁(yè)面。

<Link to="/home/idea" className={classnames({ active: pathname2 == '/home' || pathname2 == '/' })}>
    <span>首頁(yè)</span>
</Link>

詳情頁(yè)頁(yè)面分析

詳情頁(yè)由頭部，輪播圖，文本和尾部四個(gè)方面構(gòu)成。

點(diǎn)贊效果實(shí)現(xiàn)

通過(guò)設(shè)置狀態(tài)true或false記錄點(diǎn)贊按鈕的激活和未激活,通過(guò)if判斷分別對(duì)點(diǎn)贊數(shù)進(jìn)行加減。并且點(diǎn)擊后效果為修改字體圖標(biāo)的顏色，實(shí)現(xiàn)點(diǎn)贊按鈕的效果。后期連接數(shù)據(jù)庫(kù)后應(yīng)將修改后的數(shù)據(jù)寫(xiě)回?cái)?shù)據(jù)庫(kù)。

代碼如下:

if (!isGuzhang) {
            let num = guzhangNumber
            setGuzhangNumber(num + 1)
            setIsGuzhang(true)
        }
        if (isGuzhang) {
            let num = guzhangNumber
            setGuzhangNumber(num - 1)
            setIsGuzhang(false)
        }

{isGuzhang ? <i className="iconfont icon-dianzan active-red" onClick={ChangeGuzhangNumber}></i>
    : <i className="iconfont icon-dianzan" onClick={ChangeGuzhangNumber}></i>}
<div className="font-number" >{guzhangNumber ? guzhangNumber : "點(diǎn)贊"}

最后

以上就是該項(xiàng)目整個(gè)組件設(shè)計(jì)封裝的過(guò)程，在今后將會(huì)將項(xiàng)目更加完善，敬請(qǐng)期待吧~(希望本篇文章對(duì)你有所幫助，點(diǎn)個(gè)贊再走吧鐵汁~） 源碼地址:RedBookDemo · joeygi/lesson_fullstack - 碼云 - 開(kāi)源中國(guó) (gitee.com)faskmock:www.fastmock.site/mock/a4b2da…

到此這篇關(guān)于React項(xiàng)目實(shí)戰(zhàn)【保姆級(jí)】--仿小紅書(shū)首頁(yè)的文章就介紹到這了,更多相關(guān)React小紅書(shū)首頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論