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

前期準備

接下來是我們需要幾個開源組件庫：

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

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

項目預覽

項目準備

工具

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

項目初始化

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

安裝項目依賴

工程化src目錄

api目錄

api目錄下request.js負責請求數(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(下載的字體圖標iconfont-阿里巴巴矢量圖標庫)以及styles(存放初始化的樣式文件)。

components目錄

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

modules目錄

modules目錄下rem.js負責font-size來達到適配不同移動端的效果,增強用戶體驗.

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目錄存放項目各個頁面的文件，而routes目錄存放著網(wǎng)頁路由，最后utils目錄存放判斷頁面是否需要首尾js文件.

頁面設(shè)計思路

main.jsx

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

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（主頁頭部）、Footer（主頁尾部）、RouteConfig組件（路由配置）構(gòu)成頁面。并設(shè)置loading狀態(tài)(在數(shù)據(jù)還在請求中時，顯示loading圖標)

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

搭建路由

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

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'))

搭建路由需要注意以下幾點：

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

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

首頁組件分析

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

首頁頁面布局style.js

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

Header組件

首頁Header組件作為首頁的頭部，負責導航3個二級子路由。左右兩邊用span標簽定義兩個點擊圖標。

設(shè)置NavLink設(shè)置激活狀態(tài)下樣式變化(點擊之后狀態(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組件

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

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

詳情頁頁面分析

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

點贊效果實現(xiàn)

通過設(shè)置狀態(tài)true或false記錄點贊按鈕的激活和未激活,通過if判斷分別對點贊數(shù)進行加減。并且點擊后效果為修改字體圖標的顏色，實現(xiàn)點贊按鈕的效果。后期連接數(shù)據(jù)庫后應將修改后的數(shù)據(jù)寫回數(shù)據(jù)庫。

代碼如下:

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 : "點贊"}

最后

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

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

React項目仿小紅書首頁保姆級實戰(zhàn)教程

目錄

前言