首页 实战

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

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

难度：中级
|
时长：共 18 小时
新课榜第 10 名
￥368.00
￥399.00
上新特惠
距离活动结束
立即购买
加购物车
  • 1. 学会抽象与封装组件库
  • 2. 学会高质量自定义Hooks
  • 3. 综合进阶React18+TS+Vite
  • 4. 驾驭复杂大型项目全流程
  • 5. 掌握如何规避内存过度使用
  • 6. 高性能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章 一个项目开发前的准备
6 节｜18分钟
收起
  • 视频：
    3-1 -前言
    01:46
  • 视频：
    3-2 图标，公共资源的准备
    06:00
  • 视频：
    3-3 基本目录结构
    06:57
  • 视频：
    3-4 入口+路由配置
    03:03
  • 图文：
    3-5 为什么要按领域组织文件夹结构
  • 图文：
    3-6 一个项目开发前的准备【文档】
第4章 基础组件抽象 — 开发书城首页
26 节｜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 基础组件抽象— 开发书城首页【文档】
第5章 动态redux设计l来减少内存使用 — 深入redux状态管理
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章 基础+业务组件 — 开发搜索页
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章 应用组件库完成快速开发 —— 实现分类页，完本页，专题页
内容更新中
第9章 数据存储的封装和使用 — 书籍详情页开发
内容更新中
第10章 核心难点 — 开发阅读器
内容更新中
第11章 书架页开发
内容更新中
第12章 性能与项目部署
内容更新中
第13章 组件库环境搭建和发布
内容更新中
第14章 课程总结
内容更新中
适合人群
提升复杂业务处理能力的同学
想提高开发效率及开发质量的同学
想提升编程思想与逻辑的同学
技术储备
熟悉HTML5/CSS/JS(ES6)
具备React基础及实际开发经验
具备TypeScript基础及际开发经验
具备Node.js/Npm及代码构建工具使用经验
了解Vite
环境参数
React v18
TypeScript v4
bbear
资深前端技术专家， 已有34个学生
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
查看更多好课
《React18+TS+Vite 从0自定义组件库实战复杂项目》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
React18+TS+Vite 从0自定义组件库实战复杂项目
上新特惠
￥368.00
￥399.00
立即购买
加购物车
意见反馈 帮助中心 APP下载
官方微信