首页 实战

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

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

难度：中级
|
时长：共 18 小时
￥399.00
距离活动结束
立即购买
加购物车
已有 109 人在学
  • 学会抽象与封装组件库
  • 学会高质量自定义Hooks
  • 综合进阶React18+TS+Vite
  • 驾驭复杂大型项目全流程
  • 掌握如何规避内存过度使用
  • 高性能APP开发思路与技巧
试看本节课 09:24
试看本节课 02:24
试看本节课 06:29
1-1 课程概览
4-1 前言
4-2 业务组件：书城header开发

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
“驾驭复杂业务”既是开发者的基本功，又是能力的分水岭。因此课程带你基于React和Hooks系统攻克复杂业务开发难题，找到复杂业务架构技术的共性，提取可复用的经验，做到一通百通。并获取复杂业务拆解、性能优化、设计与封装通用组件等诸多“高手”必备的实用技能。最终产出一套高质量通用组件库及一套业务完备的高性能阅读APP。拉开你与普通开发者的差距！
展开所有
第1章 课程导读
1 节｜10分钟
展开
  • 视频：
    1-1 课程概览
    试看
    09:24
第2章 使用vite从0开始搭建react+ts开发环境
6 节｜23分钟
收起
  • 视频：
    2-1 前端构建工具集分析
    05:09
  • 视频：
    2-2 vite初始化项目
    05:23
  • 视频：
    2-3 代码规范化配置
    06:07
  • 视频：
    2-4 git规范化配置
    04:54
  • 视频：
    2-5 本章小节
    00:36
  • 图文：
    2-6 使⽤Vite初始化项目操作【文档】
第3章 一个项目开发前的准备
7 节｜18分钟
收起
  • 视频：
    3-1 -前言
    01:46
  • 视频：
    3-2 图标，公共资源的准备
    06:00
  • 视频：
    3-3 基本目录结构
    06:57
  • 视频：
    3-4 入口+路由配置
    03:03
  • 图文：
    3-5 为什么要按领域组织文件夹结构
  • 图文：
    3-6 一个项目开发前的准备【文档】
  • 图文：
    3-7 章总结电子文档
第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 章总结电子文档
第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
第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
第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
第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分钟
展开
  • 视频：
    10-1 前言
    03:01
  • 视频：
    10-2 业务组件：书架navbar组件开发
    11:19
  • 视频：
    10-3 业务组件：bookList组件封装1
    12:51
  • 视频：
    10-4 业务组件：bookList组件封装2
    18:02
  • 视频：
    10-5 业务组件：GroupList组件开发
    18:12
  • 视频：
    10-6 业务组件：EditBar组件—分组功能1
    12:36
  • 视频：
    10-7 基础组件—Dialog组件封装
    22:24
  • 视频：
    10-8 实现创建新的分组功能
    16:48
  • 视频：
    10-9 实现移动到分组功能
    09:40
  • 视频：
    10-10 本章小结
    00:56
第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
第12章 组件库环境搭建和发布
6 节｜40分钟
展开
  • 视频：
    12-1 前言
    01:25
  • 视频：
    12-2 创建组件库模版和仓库
    03:17
  • 视频：
    12-3 迁移基础组件
    03:15
  • 视频：
    12-4 组件库打包和发布到NPM
    09:18
  • 视频：
    12-5 组件库文档编写
    18:59
  • 视频：
    12-6 部署组件库文档
    03:43
第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
本课程已完结
适合人群
提升复杂业务处理能力的同学
想提高开发效率及开发质量的同学
想提升编程思想与逻辑的同学
技术储备
熟悉HTML5/CSS/JS(ES6)
具备React基础及实际开发经验
具备TypeScript基础及际开发经验
具备Node.js/Npm及代码构建工具使用经验
了解Vite
环境参数
React v18
TypeScript v4
bbear
资深前端技术专家， 已有109个学生
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
React18 入门到组件库实战
套餐价格：¥629.00
2门课 总价：¥698.00
立即购买
 课程介绍

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

中级  · 109人报名 ¥399.00
课程介绍 

React18 系统入门 进阶实战《欢乐购》

中级  · 280人报名 ¥299.00
vue+react 组件库开发实战，进阶高阶技能
套餐价格：¥718.00
2门课 总价：¥798.00
立即购买
 课程介绍

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

中级  · 109人报名 ¥399.00
课程介绍 

进阶必学，打造媲美ElementPlus的组件库

高级  · 354人报名 ¥399.00
查看更多
数据加载中...
查看更多好课
《React18+TS+Vite 从0自定义组件库实战复杂项目》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
￥399.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

意见反馈 帮助中心 APP下载
官方微信