React18+TS+Vite 进阶实战阅读类App

本章介绍：

本章节对课程内容做介绍说明，技术选型，学习目标及学习收获。

第1章课程导读

1 节｜10分钟

展开

视频：

1-1 课程概览

试看

09:24

本章介绍：

使用vite来初始化项目，搭建大厂标准的开发环境，一次掌握前端项目工程化整个过程

第2章使用vite从0开始搭建react+ts开发环境

6 节｜23分钟

收起

本章介绍：

本章节会从项目需求分析开始，项目架构目录层级结构，图标字体和公共样式的准备，初始化基础路由

第3章一个项目开发前的准备

7 节｜18分钟

收起

本章介绍：

本章节会开发书城首页，使用swr来完成数据请求和缓存处理，另外从业务开发中抽象出轮播图，loading，card，Tab，countdown，image等基础组件的开发，来打造我们自己的基础组件库

第4章基础组件抽象 — 开发书城首页

27 节｜297分钟

展开

视频：

4-1 前言

试看

02:24
视频：

4-2 业务组件：书城header开发

试看

06:29
视频：

4-3 集成axios请求库：对axios的ts封装

07:59
视频：

4-4 集成swr数据请求：封装useRequest hooks

17:43
视频：

4-5 基础组件：loading组件封装

13:46
视频：

4-6 基础组件：error-block组件封装

08:37
视频：

4-7 基础组件：轮播图组件的使用方式

04:49
视频：

4-8 基础组件：轮播图组件封装 — 实现手势滑动切换功能1

27:41
视频：

4-9 基础组件：轮播图组件封装 — 实现手势滑动切换功能2

14:52
视频：

4-10 基础组件：轮播图组件封装 — 实现最新无限轮播功能

17:49
作业：

4-11 轮播图手动控制
视频：

4-12 业务组件：书城导航组件 — 实现路由间跳转

05:10
视频：

4-13 基础组件：space组件封装

12:36
视频：

4-14 业务组件：热门精选区块内容开发

17:10
视频：

4-15 基础组件：Card组件封装

06:50
视频：

4-16 基础组件：Grid组件封装

10:10
视频：

4-17 业务组件：今日推荐区块内容开发

08:44
视频：

4-18 业务组件：限时免费内容区块开发

09:10
视频：

4-19 基础组件：Countdown组件封装

27:50
视频：

4-20 业务组件：排行榜区块内容开发

12:22
视频：

4-21 基础组件：Tabs组件封装-1

20:28
视频：

4-22 基础组件：Tabs组件封装-2

21:04
视频：

4-23 基础组件：Image组件封装—通用接口设计

07:41
视频：

4-24 基础组件：Image组件封装—自定义useObserverHooks实现Image组件lazyload功能

11:57
视频：

4-25 本章小结

03:22
图文：

4-26 基础组件抽象— 开发书城首页【文档】
图文：

4-27 章总结电子文档

本章介绍：

本章节会带你开发搜索页面，包括基础组件search bar的封装，以及业务层的搜索组件开发，热门搜索模块的开发，搜索历史功能的开发，搜索结果列表的开发，在封装基础组件的同时，也带你学会更多业务组件的开发方式

第5章基础+业务组件 — 开发搜索页

9 节｜104分钟

展开

视频：

5-1 前言

02:18
视频：

5-2 搜索组件开发：基本交互功能

15:31
视频：

5-3 搜索交互：封装localstorage存储关键词

10:54
视频：

5-4 搜索交互：引入redux-toolkit状态管理

17:45
视频：

5-5 业务组件：SearchList组件封装

16:42
视频：

5-6 业务组件：热门搜索组件开发—实现热门搜索数据获取和渲染

12:48
视频：

5-7 业务组件：搜索历史组件—useReadLocalStorage hooks封装

14:46
视频：

5-8 业务组件：搜索历史组件—交互功能

11:23
视频：

5-9 章节小结

01:11

本章介绍：

本章节带大家设计redux store，通过合理的设计状态管理不仅能更好的降低整个项目杂度提高的风险，并通过动态的拆分reducer来优化系统初始化内存

第6章动态redux设计l来减少内存使用 — 深入redux状态管理

7 节｜39分钟

展开

视频：

6-1 前言

03:54
视频：

6-2 封装ReducerManager方法—实现动态的添加，获取，删除Reducer和State

08:50
视频：

6-3 封装configStore—重新配置store

05:53
视频：

6-4 封装createTempSlice方法—通过name和initialState来创建slice

03:11
视频：

6-5 封装useReducer hooks—实现reducer跟随组件生命周期来进行加载和卸载

02:35
视频：

6-6 修改store的使用方式—解耦不同代码中对store的依赖

12:56
视频：

6-7 章节小结

00:48

本章介绍：

本章节开发排行榜页，封装navbar，sidebar，infiniteScroll基础组件，实现不同榜单切换展示，列表滚动加载等功能，再次添加和完善我们的组件库

第7章完善组件库 — 排行榜页开发

6 节｜56分钟

展开

视频：

7-1 前言

01:24
视频：

7-2 业务组件：RankingHeader组件封装

13:43
视频：

7-3 基础组件：NavBar组件封装

06:40
视频：

7-4 基础组件：Sidebar组件封装

12:27
视频：

7-5 业务组件：Content组件封装—实现排行榜菜单切换

11:24
视频：

7-6 业务组件：封装BookList组件

09:58

本章介绍：

本章节待大家开发完本页，专题页，分类页面，让你体验当我们拥有一套组件库时，业务的开发也会变得更加的简单

第8章应用组件库完成快速开发 —— 实现分类页，完本页，专题页

6 节｜54分钟

展开

视频：

8-1 前言

01:12
视频：

8-2 分类页开发

09:50
视频：

8-3 swr请求下啦加载数据：封装useInfiniteRequest

17:17
视频：

8-4 使用infiniteScroll组件完成无限下拉加载功能

12:33
视频：

8-5 基础组件：封装InfiniteScroll组件

11:08
视频：

8-6 章节小结

01:05

本章介绍：

这章进入详情页的开发，带大家封装popup，mask，toast等基础库的组件，并分别实现详情页header，书籍目录列表，书籍章节等业务组件，另外封装了indexDB来缓存我们的书籍信息

第9章数据存储的封装和使用 — 书籍详情页开发

17 节｜133分钟

展开

视频：

9-1 前言

02:05
视频：

9-2 书籍详情页数据获取

02:28
视频：

9-3 书籍详情页组件划分

02:26
视频：

9-4 业务组件：书籍详情页Navbar组件封装

08:32
视频：

9-5 业务组件：书籍详情页BookInfo组件封装

08:39
视频：

9-6 基础组件：Ellipsis组件封装

20:52
视频：

9-7 封装useResizeObserver hooks

06:03
视频：

9-8 基础组件：Divider组件封装

04:31
视频：

9-9 业务组件：Catalog组件封装—实现基本UI布局

07:14
视频：

9-10 业务组件：CatelogList组件封装

06:13
视频：

9-11 基础组件：Popup组件封装

14:34
视频：

9-12 基础组件：Mask组件封装

07:41
视频：

9-13 hooks封装：封装useScrollLock hooks

03:27
视频：

9-14 业务组件：DetailContent和DetailFooter封装

15:19
视频：

9-15 基础组件：Toast组件封装

16:19
视频：

9-16 基础组件：Button组件逻辑讲解

04:51
视频：

9-17 章节小结

01:45

本章介绍：

本章节会带你开发书架页面，包括书架标题组件的开发，书架列表组件的开发，书架编辑功能的开发，学会合理利用本地存储

第10章书架页开发

10 节｜126分钟

展开

本章介绍：

这一章节进入阅读器的开发，阅读器也是整个书城的难点也是其核心功能，我会带大家将功能点做细致的拆分，逐个击破，让大家掌握当我们遇到一个业务难点时，是如何逐步应对的

第11章核心难点 — 开发阅读器

9 节｜125分钟

展开

视频：

11-1 前言

04:13
视频：

11-2 业务组件：阅读页header组件封装

10:14
视频：

11-3 业务组件：阅读页Content封装

27:51
视频：

11-4 业务组件：阅读页footerNavbar封装

09:44
视频：

11-5 业务组件：封装footerCatalogList组件

10:51
视频：

11-6 业务组件：ProgressBar封装

13:22
视频：

11-7 基础组件：slider组件封装

32:52
视频：

11-8 业务组件：SettingBar组件封装

13:44
视频：

11-9 章节小结

01:45

本章介绍：

这一章，我来带大家构建一个自己的组件库并发布到npm，让大家不仅在拥有一个复杂的webapp，还能够拥有一个属于自己的组件库

第12章组件库环境搭建和发布

6 节｜40分钟

展开

本章介绍：

性能优化无论是在面试还是在任何公司里都是一个不可缺少的技能，这章我们通过lighthouse工具来对我们的项目进行性能分析，根据分析报告进一步优化我们的项目，并总结开发过程中我们做过哪些优化

第13章性能与项目部署

4 节｜13分钟

展开

视频：

13-1 前言

00:41
视频：

13-2 代码分割 - 按需加载

04:40
视频：

13-3 打包构建

02:44
视频：

13-4 nginx配置讲解

04:33

本章介绍：

本章针对课程所学内容及重难点进行梳理、归纳总结

第14章课程总结

1 节｜3分钟

展开

视频：

14-1 课程总结

02:01

React18+TS+Vite 从0自定义组件库实战复杂项目

融复杂业务拆解、通用组件设计封装、性能优化等"高手"必备技能，开发一套高质量及业务完备的高性能阅读APP

课程预览

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

热搜

最近搜索清空

课程预览

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

本章介绍：

学习咨询