首页 实战 React18+TS+Vite 从0到1自定义组件库 实战复杂项目 章节目录
收藏

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

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

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

优惠到手 ￥349
原价￥399.00
满1788减540 满1188减320 满888减220 满688减150 满488减100 满288减50 满188减20

更多

已完结 难度 中级 时长 18小时 学习人数 134 综合评分 10.00
立即购买 加购物车
立即购买 加购物车
优惠到手￥349
  • 第1章 课程导读 试看 1 节 | 10分钟

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

    收起列表

    • 视频： 1-1 课程概览 (09:24) 试看
  • 第2章 使用vite从0开始搭建react+ts开发环境 6 节 | 23分钟

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

    收起列表

    • 视频： 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分钟

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

    收起列表

    • 视频： 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分钟

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

    收起列表

    • 视频： 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分钟

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

    收起列表

    • 视频： 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分钟

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

    收起列表

    • 视频： 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分钟

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

    收起列表

    • 视频： 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分钟

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

    收起列表

    • 视频： 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分钟

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

    收起列表

    • 视频： 13-1 前言 (00:41)
    • 视频： 13-2 代码分割 - 按需加载 (04:40)
    • 视频： 13-3 打包构建 (02:44)
    • 视频： 13-4 nginx配置讲解 (04:33)
  • 第14章 课程总结 1 节 | 3分钟

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

    收起列表

    • 视频： 14-1 课程总结 (02:01)
本课程已完结

试看

全部试看小节



讲师

bbear 全栈工程师

资深前端开发工程师，擅长前端工程化，构建大型前端技术架构，了解最新前端工程工具，精通react，vue等框架，同时了解rust编程，v8，编译原理等，前后分别就职于北京数坤科技和阅文集团，担任资深前端开发，并有针对人工智能和互联网研发的经验。

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

学习咨询

选课、学习遇到问题？

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

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