Reactプロジェクトの戦闘[乳母レベル]-模倣小紅書ホームページ

序文

Reactは、ユーザーインターフェイスを構築するためのJavascriptライブラリです。主にUIの構築に使用され、Facebookの内部プロジェクトに由来し、高性能であり、コードロジックは非常に単純であり、ますます多くの人々がそれに注意を払い、それを使用し始めています。次に、実際の小紅書のホームページでそのデザインのアイデアや手法を詳しく紹介し、読者をオープンソースの反応の世界に連れて行きます。フロントエンドの学者の役に立つことを願っています〜

準備

次に、いくつかのオープンソースコンポーネントライブラリが必要です。

axios：これは、にpromise基づくネットワークリクエストライブラリであり、バックエンドデータの取得に使用され（[fastmock Webサイト]ではバックエンドプログラムなしでオンラインでajaxリクエストをシミュレートできます）、フロントエンドで一般的に使用されるデータリクエストツールです。
antd-mobile：Ant Financialチームによって立ち上げられたオープンソースのreactコンポーネントライブラリ。このコンポーネントライブラリには、多くの使用済みコンポーネントがあります。
swiper：タッチスクリーンフォーカスマップ、タッチスクリーンタブ切り替え、タッチスクリーンカルーセルマップ切り替えなどの一般的な効果を実現できます。
styled-compenonts： jsの真のcss 、Reactコンポーネントシステムのスタイルを設定するためにCSSを拡張した結果であり、シンプルで動的なスタイル設定、簡単なメンテナンスなどの利点があります。さらに、fastmock（オンラインインターフェイスツール）を使用してajaxリクエストをシミュレートする必要があります。これにより、シミュレートされたフロントエンド開発でバックエンドデータを提供するのがより便利になります。

プロジェクトプレビュー

プロジェクトの準備

道具

Visual Studio Code（フロントエンド開発ツール）
nodejs（依存関係のインストール、コードの実行）
fastmock（モックバックエンドデータインターフェイス）
Chromeブラウザ（テストとデバッグを担当）

プロジェクトの初期化

VSCodeターミナルを開く
npm init @ vitejs / appと入力します（プロジェクトのスキャフォールディングを作成します）
プロジェクト名を入力し、2回反応を選択します
新しく作成したプロジェクトディレクトリ（cdプロジェクト名）を入力します
npm i（node_modulesをインストール）
npm run dev（実行）

プロジェクトの依存関係をインストールする

エンジニアリングsrcディレクトリ

apiディレクトリ

apiディレクトリのrequest.jsは、データの要求を担当します。その中で、axios.getはバックエンドデータを非同期的にプルするために導入されました

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

アセットディレクトリ

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目录存放着网页路由，最后utils目录存放判断页面是否需要首尾js文件.

页面设计思路

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组件（路由配置）构成页面。并设置loading状态(在数据还在请求中时，显示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【路由】可以理解为现实中路由器后面的接口，Routes【路由器】可以理解为现实的路由器用来管理路由。在此项目中，我设置了如下几个路由：

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}
若出现某个页面跳转后不显示底部导航栏，可以通过简单的条件判断和{useLocation}接受传来的值来实现。 import {useLocation} from 'react-router-dom'

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

首页组件分析

ホームページはこのプロジェクトのメインページです。このページに入ると、ページジャンプなどの関連機能を実現できます。ページ上のデータはfastmockに保存されます。アイコンの場合、ほとんどのニーズにはiconfontのアイコンを使用するだけで十分です。アセットフォルダに事前にアイコンを追加したフォントフォルダを導入すると、フォントフォルダのアイコンスタイルを簡単に変更できます。

ホームページレイアウトstyle.js

ul>liliの幅を設定することで（私は適応スキームを使用します）rem、2を続けてfloat: left;達成し、レイアウトを実現します。

ヘッダーコンポーネント

ホームページヘッダーコンポーネントはホームページのヘッドであり、3つのセカンダリサブルートをナビゲートする役割を果たします。左右にスパンタグが付いた2つのクリックアイコンを定義します。

NavLink設定を設定して、アクティブ状態のスタイルを変更します（クリックすると状態がactieに変わり、フォントの下線が赤に変わります）

<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",
              }
            }}>

フッターコンポーネント

ホームページフッターコンポーネントはページの最後にあり、ホームページのタブバーであり、同じレベルの他のページにジャンプできます。

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

詳細ページページ分析

詳細ページは、ヘッダー、カルーセル、テキスト、テールの4つの側面で構成されています。

同様の効果が実現されます

状態をtrueまたはfalseに設定して、いいねボタンのアクティブ化と非アクティブ化を記録し、if判定によっていいねの数を加算または減算します。そしてクリックした後、効果はフォントアイコンの色を変更して「いいね」ボタンの効果を実現することです。後でデータベースに接続した後、変更されたデータをデータベースに書き戻す必要があります。コードは次のように表示されます。

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 : "点赞"}

やっと

上記は、プロジェクトのコンポーネント全体を設計およびカプセル化するプロセスです。将来的には、プロジェクトはより完璧になります。楽しみにしていてください〜（この記事がお役に立てば幸いです。鉄ジュースに行く〜）ソースアドレス：RedBookDemo・joeygi / lesson_fullstack-コードクラウド-オープンソースチャイナ（gitee.com）
faskmock：www.fastmock.site/mock/a4b2da…