【构建】react打造你的第一个Bilibili首页开发项目

最新推荐文章于 2024-10-15 17:32:08 发布

原创

最新推荐文章于 2024-10-15 17:32:08 发布 · 429 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍如何使用React Hooks和Ant Design Mobile构建Bilibili首页，包括分区选择的实现，如路由、ActiveKey样式绑定和下拉菜单，以及视频数据的请求和细节功能，如播放量和弹幕数的格式化，视频封面的错误处理。

【构建】react打造你的第一个Bilibili首页开发项目

简介

Hello 小极客们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！[新手开发学习必备] (做个b站，细节拉满！（持续更新）)

技术栈

React Hooks全家桶
JavaScript 小白都会的一门语言
ant design - mobile 时下流行移动端最爽框架
axios 数据请求 + fastmock 数据接口
styled-components 样式开发
classnames 动态添加类名 npm包

【】 简单易学，童叟无欺（doge）

实现的部分功能

一. 分区的选择

1. 路由的实现

import { lazy } from 'react'
import { Route, Routes } from 'react-router'
const Shouye = lazy(() => import('../pages/Shouye'))
const Space = lazy(() => import('../pages/Space'))
const Donghua = lazy(() => import('../pages/Donghua'))
...
// 延迟加载，运行按需加载 当切换到这个路由后再加载 lazy
export default function RoutesConfig() {
    return (
        <>
            <Routes>
                <Route path='/' element={<Shouye />} />
                <Route path='/shouye' element={<Shou