Combate del proyecto React [nivel de niñera] -- imitación de la página de inicio de Xiaohongshu

prefacio

React es una biblioteca de Javascript para crear interfaces de usuario. Utilizado principalmente para construir la interfaz de usuario, se originó en el proyecto interno de Facebook, tiene un alto rendimiento y la lógica del código es muy simple, cada vez más personas han comenzado a prestarle atención y usarlo. A continuación, presentaré sus ideas y métodos de diseño en detalle en la página de inicio del Xiaohongshu real, y llevaré a los lectores al mundo de código abierto de React. Espero que sea útil para los académicos de front-end ~

preparación preliminar

Lo siguiente es que necesitamos varias bibliotecas de componentes de código abierto:

axios: es una promisebiblioteca de solicitud de red basada en , que se utiliza para obtener datos de back-end ([el sitio web fastmock] le permite simular solicitudes ajax en línea sin un programa de back-end), y es una herramienta de solicitud de datos de uso común en el front-end
antd-mobile: una biblioteca de componentes de reacción de código abierto lanzada por el equipo de Ant Financial, esta biblioteca de componentes tiene muchos componentes usados;
swiper: Puede realizar efectos comunes como mapa de enfoque de pantalla táctil, cambio de pestaña de pantalla táctil, cambio de mapa de carrusel de pantalla táctil, etc.
styled-compenonts: true css en js , el resultado de mejorar CSS para diseñar el sistema de componentes React, con las ventajas de un estilo dinámico simple, fácil mantenimiento y más. Además, también necesitamos usar fastmock (herramienta de interfaz en línea) para simular solicitudes ajax, lo que hace que sea más conveniente para nosotros proporcionar datos de back-end en el desarrollo de front-end simulado.

Vista previa del proyecto

Preparación del proyecto

herramienta

Visual Studio Code (herramienta de desarrollo front-end)
nodejs (instalar dependencias, ejecutar código)
fastmock (interfaz de datos backend simulada)
Navegador Chrome (responsable de las pruebas y la depuración)

Inicialización del proyecto

Abra la terminal VSCode
Escriba npm init @vitejs/app (crear andamiaje de proyecto)
Ingrese el nombre del proyecto y seleccione reaccionar dos veces
Ingrese el directorio del proyecto recién creado (nombre del proyecto cd)
npm i (instalar node_modules)
npm ejecutar dev (ejecutar)

Instalar dependencias del proyecto

Directorio src de ingeniería

directorio api

request.js en el directorio api es responsable de solicitar datos. Entre ellos, se presenta axios.get para extraer datos de back-end de forma asincrónica.

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

directorio de activos

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

首页组件分析

La página de inicio es la página principal de este proyecto. Después de ingresar a esta página, se pueden realizar funciones relacionadas, como el salto de página. Los datos en la página se almacenan en fastmock. Para los íconos, usar íconos de iconfont es suficiente para la mayoría de las necesidades. Introduzca la carpeta de fuentes con los íconos agregados de antemano en la carpeta de activos, y luego podrá modificar fácilmente el estilo del ícono en la carpeta de fuentes.

Estilo de diseño de la página de inicio.js

Por ul>liy configurando el ancho del li (uso el remesquema de adaptación) para lograr 2 en una fila y float: left;lograr el diseño.

componente de encabezado

El componente Encabezado de la página de inicio es el encabezado de la página de inicio y es responsable de navegar por 3 subrutas secundarias. Defina dos iconos de clic con etiquetas de intervalo a la izquierda y a la derecha.

Establezca la configuración de NavLink para cambiar el estilo en el estado activo (el estado cambia a activo después de hacer clic y el subrayado de la fuente cambia a rojo)

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

Componente de pie de página

El componente Pie de página de la página de inicio se encuentra al final de la página y es la barra de pestañas de la página de inicio, que puede saltar a otras páginas del mismo nivel.

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

Análisis de la página de la página de detalles

La página de detalles consta de cuatro aspectos: encabezado, carrusel, texto y cola.

El efecto similar se realiza

Registre la activación y desactivación del botón Me gusta configurando el estado como verdadero o falso, y sume o reste el número de Me gusta a través del juicio if. Y después de hacer clic, el efecto es modificar el color del ícono de la fuente para lograr el efecto del botón Me gusta. Después de conectarse a la base de datos más tarde, los datos modificados deben volver a escribirse en la base de datos. el código se muestra a continuación:

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

Al final

Lo anterior es el proceso de diseño y encapsulación de todo el componente del proyecto. En el futuro, el proyecto será más perfecto. Espérenlo con ansias~ (Espero que este artículo les sea útil, denle un me gusta y sigamos). go iron juice~) Dirección de la fuente: RedBookDemo · joeygi/lesson_fullstack - Code Cloud - Open Source China (gitee.com)
faskmock: www.fastmock.site/mock/a4b2da…