课程介绍：
前端技术专家 Dell 老师带你系统构建 React18 技术体系，并结合“欢乐购”项目，快速积累企业级前端项目实战经验，落地 React18 与 TypeScript 结合的实用开发技巧。同时老师分享了React框架核心源码实现原理的深度思考，进一步帮助大家 “学懂用活”，真正走近框架，全面提升技术实力。体验地址：http://statics.dell-lee.com/shopping-project/index.html
课程目录：
-
第1章 为什么越来越多的工程师选用 React 试看4 节 | 21分钟
本章中对React 框架优势、React 18 版本特点特性，以及课程整体的教学思路和方法，进行了梳理，帮助大家更加清晰的认识 React 18。
- 视频：1-1 这可能是最适合新手学习 React 18 的第一门课 (04:43)试看
- 视频：1-2 为什么越来越多的工程师选用 React (04:47)
- 视频：1-3 React 18 和先前版本的区别 (07:27)试看
- 视频：1-4 找对方法，轻松系统化入门 React 使用 (03:35)
-
第2章 React 编程初体验 试看14 节 | 193分钟
本章将直接带同学们使用 React 基础语法上手一款小游戏的开发，在简单实战的过程中带同学们了解 React 18 的代码开发方式、调试工具，以及常见的基础语法。通过本章学习，同学们可以对 React 开发有一个非常基础的认识，有助于后续系统性学习。…
- 视频：2-1 如何在网页中快速使用 React（上） (17:02)试看
- 视频：2-2 如何在网页中快速使用 React（下） (18:23)
- 视频：2-3 React 开发调试工具安装 (10:44)
- 视频：2-4 React常见语法初探（上） (16:54)
- 视频：2-5 React 常见语法初探（中） (10:01)
- 视频：2-6 React 常见语法初探（下） (12:28)
- 视频：2-7 React 工程初始化和游戏功能预览 (18:05)
- 视频：2-8 实现棋盘布局 (10:17)
- 视频：2-9 下棋逻辑的实现（上） (11:31)
- 视频：2-10 下棋逻辑的实现（下） (12:24)
- 视频：2-11 借助数据设计实现游戏状态计算逻辑（上） (13:34)
- 视频：2-12 借助数据设计实现游戏状态计算逻辑（下） (12:24)
- 视频：2-13 优化拆分组件实现数据共享 (10:25)
- 视频：2-14 历史回溯功能的实现 (18:12)
-
第3章 React 基础语法17 节 | 271分钟
本章详细介绍 React 18 的基础语法，全面使用基于 Hook 和函数组件的思路进行教学，帮助同学不仅掌握 React 提供的语法 API，同时掌握基于数据驱动的函数式编程开发理念，真正掌握新版本 React 的编程精髓。通过本章学习，同学们可以完整的掌握 React 18 中核心 API 的使用。…
- 视频：3-1 React UI 展示相关概念详解（上） (14:26)
- 视频：3-2 React UI 展示相关概念详解（下） (12:35)
- 视频：3-3 使用事件和状态实现交互 (22:26)
- 视频：3-4 useState 原理讲解 & 事件查缺补漏 (21:50)
- 视频：3-5 Immutable 数据 & Immer 的使用（上） (13:02)
- 视频：3-6 Immutable 数据 & Immer 的使用（下） (10:04)
- 视频：3-7 理解声明式编程及其开发规范 (17:28)
- 视频：3-8 通过父子组件传值解决数据共享问题 (15:37)
- 视频：3-9 组件状态重置背后的运行机理 (14:47)
- 视频：3-10 Key 值的作用详解 (17:06)
- 视频：3-11 使用 Reducer 聚合数据处理逻辑（上） (13:28)
- 视频：3-12 使用 Reducer 聚合数据处理逻辑（下） (10:59)
- 视频：3-13 Reducer 的优缺点解析（上） (11:36)
- 视频：3-14 Reducer 的优缺点解析（下） (11:40)
- 视频：3-15 使用 Context 完成深层组件传值 (19:59)
- 视频：3-16 Context 实际使用技巧 & 通过 Children 进行父子组件间 JSX 内容的传递 (18:31)
- 视频：3-17 使用 Reducer & Context 实现 TodoList 功能 (24:45)
-
第4章 React 高阶语法13 节 | 235分钟
本章对 React 18 的语法进行了进阶扩充，在进行复杂系统设计、系统错误排查、系统性能优化的过程中，这些知识点可以有效帮助同学解决问题。通过本章学习，同学们的知识面可以覆盖 React 18 官方文档中 95% 以上的知识点。
- 视频：4-1 Ref 的基础使用 (14:37)
- 视频：4-2 Ref 与元素和组件的结合使用 (13:29)
- 视频：4-3 Effect 的使用场景和基础使用步骤 (13:42)
- 视频：4-4 useEffect 的底层执行逻辑 (23:48)
- 视频：4-5 严格模式 Effect 两次执行问题的处理方法 (15:13)
- 视频：4-6 useMemo 的使用场景和使用方法 (13:51)
- 视频：4-7 useSyncExternalStore 的使用方法 (13:33)
- 视频：4-8 组件和Effect的生命周期 & UseEffectEvent 简单介绍 (20:59)
- 视频：4-9 自定义 Hook 的作用及使用方法 (14:34)
- 视频：4-10 useCallback、useDebugValue、useImperativeHandle 的使用方法 (23:36)
- 视频：4-11 Profiler 和 Suspense 内置组件的深度讲解 (21:04)
- 视频：4-12 使用 UseDeferredValue 提升用户体验 (25:21)
- 视频：4-13 useTransition 和 memo 的使用详解 (20:44)
-
第5章 React 中常见的 TypeScript 类型定义4 节 | 73分钟
本章讲解了如何将 TypeScript 与 React 结合，便携更健壮的前端工程代码。课程里对常见的 TypeScript 类型进行了简单介绍讲解，重点介绍了在 React 中遇到类型问题应该如何解决，即便对 TypeScript 没有任何了解，通过本章的学习，同学也可以基本完成 React 和 TypeScript 的集成开发。…
- 视频：5-1 TypeScript 项目生成、语法入门及函数组件 Props 类型的定义 (22:07)
- 视频：5-2 Hooks 相关类型问题的处理（上） (20:43)
- 视频：5-3 Hooks 相关类型问题的处理（下） (20:29)
- 视频：5-4 React 相关事件的 TS 类型定义 (09:32)
-
第6章 实战“欢乐购”：登陆、注册、引导页面的开发15 节 | 265分钟
本章讲解了「欢乐购」项目中，引导、登陆、注册页面的实现链路，Charles 移动端请求代理转发工具的使用、Rem 自适应布局的实现、Iconfont 等常用前端开发工具的使用，过程中帮助同学完成弹框组件、请求 Hook 等通用能力的封装。通过本章学习，同学们可以轻松应对相对简单的企业移动端页面的开发。…
- 视频：6-1 Charles、rem布局、一像素边框问题的前置工程准备（上） (08:17)
- 视频：6-2 Charles、rem布局、一像素边框问题的前置工程准备（下） (14:50)
- 视频：6-3 使用 Ref 和 CSS 动画完成引导页面开发 (27:47)
- 视频：6-4 使用 React-router-dom V6 版本实现登陆页面跳转（上） (19:31)
- 视频：6-5 使用 React-router-dom V6 版本实现登陆页面跳转（下） (19:21)
- 视频：6-6 使用 Sass 优化样式代码 & 使用 Axios + Charles 模拟请求开发（上） (09:34)
- 视频：6-7 使用 Sass 优化样式代码 & 使用 Axios + Charles 模拟请求开发（下） (16:53)
- 视频：6-8 封装通用请求 useRequest 自定义 Hook（上） (17:02)
- 视频：6-9 封装通用请求 useRequest 自定义 Hook（下） (17:11)
- 视频：6-10 useRequest 代码改造及模态框提示功能实现 (18:16)
- 视频：6-11 使用 useImperativeHandle 进行模态框组件的封装实现 (15:11)
- 视频：6-12 使用 CreatePortal 完善 Modal 组件，优化请求发送逻辑 (23:42)
- 视频：6-13 注册页面的基础开发 (19:27)
- 视频：6-14 使用嵌套路由实现代码的抽象复用 (24:06)
- 视频：6-15 登陆逻辑的完整实现 (13:24)
-
第7章 实战“欢乐购”：首页相关页面开发16 节 | 281分钟
本章讲解了「欢乐购」项目中，首页、搜索等与首页相关页面的实现链路，对移动端布局、页面间路由联动、前端持久存储、三方插件使用进行了重点讲解，通过本章讲解，同学们可以熟练使用移动端布局技巧，进行复杂页面的样式布局开发，同时借助 React Router 完成多页面的开发串联，从而完成小型完整项目的开发。…
- 视频：7-1 使用 Swiper 实现首页顶部轮播效果 (21:56)
- 视频：7-2 使用地理位置接口获取用户定位信心 (18:10)
- 视频：7-3 useRequest 和 Modal 组件的封装升级（上） (10:42)
- 视频：7-4 useRequest 和 Modal 组件的封装升级（下） (12:20)
- 视频：7-5 首页数据动态获取（上） (14:13)
- 视频：7-6 首页数据动态获取（下） (13:12)
- 视频：7-7 分类及卡片区域布局开发（上） (16:09)
- 视频：7-8 分类及卡片区域布局开发（下） (18:08)
- 视频：7-9 首页完整布局样式开发（上） (16:33)
- 视频：7-10 首页完整布局样式开发（下） (13:57)
- 视频：7-11 首页组件拆分及代码优化 (25:18)
- 视频：7-12 切换门店功能开发（上） (19:03)
- 视频：7-13 切换门店功能开发（下） (21:52)
- 视频：7-14 搜索页面布局开发（上） (16:34)
- 视频：7-15 搜索页面布局开发（下） (16:11)
- 视频：7-16 搜索页面逻辑实现 (25:44)
-
第8章 实战“欢乐购”：商品列表及详情页面开发13 节 | 243分钟
本章讲解了「欢乐购」项目中，分类列表、商品列表、商品详情等页面的实现链路，带大家完成复杂移动端列表页面的开发，过程中重点讲解 IScroll 滚动工具的使用、复杂列表页面布局、接口数据结构设计等内容，通过本章内容的学习，同学们可以完成复杂企业移动端页面的开发。…
- 视频：8-1 简单列表页面布局实现 (21:19)
- 视频：8-2 使用路由完成页面间参数传递 (21:06)
- 视频：8-3 列表页面逻辑实现 (25:26)
- 视频：8-4 详情页面布局开发（上） (24:36)
- 视频：8-5 详情页面布局开发（下） (23:15)
- 视频：8-6 详情页面逻辑开发 (17:05)
- 视频：8-7 分类列表页面布局开发（上） (21:13)
- 视频：8-8 分类列表页面布局开发（下） (17:09)
- 视频：8-9 分类列表逻辑开发（1） (13:02)
- 视频：8-10 分类列表逻辑开发（2） (13:52)
- 视频：8-11 分类列表逻辑开发（3） (14:58)
- 视频：8-12 分类列表逻辑开发（4） (15:31)
- 视频：8-13 分类列表逻辑开发（5） (14:08)
-
第9章 实战“欢乐购”：购物车逻辑开发11 节 | 208分钟
本章讲解了「欢乐购」项目中，简单列表、复杂列表和详情页面的实现，以及这些页面中购物车逻辑的开发。通过这些页面功能的开发，同学们可以比较全面的了解电商项目中，购物核心流程的前端开发设计。购物车中设计较多的逻辑计算，本章学习也非常有助于同学提升自己对复杂业务的开发应对能力。…
- 视频：9-1 详情页面购物车弹窗功能开发（上） (15:54)
- 视频：9-2 详情页面购物车弹窗功能开发（下） (19:12)
- 视频：9-3 详情页面添加购物车逻辑实现 (29:21)
- 视频：9-4 分类列表页面购物车逻辑实现（上） (19:03)
- 视频：9-5 分类列表页面购物车逻辑实现（下） (11:48)
- 视频：9-6 购物车页面布局开发（上） (25:42)
- 视频：9-7 购物车页面布局开发（下） (24:21)
- 视频：9-8 购物车实现动态话数据渲染（上） (16:24)
- 视频：9-9 购物车实现动态话数据渲染（下） (12:23)
- 视频：9-10 购物车下单逻辑实现（上） (17:32)
- 视频：9-11 购物车下单逻辑实现（下） (16:03)
-
第10章 实战“欢乐购”：订单详情页面的开发与项目上线9 节 | 153分钟
本章讲解了订单详情页面的实现，讲解了 AntD Mobile 组件库与 React 项目的结合使用，以及相对复杂的交易流程逻辑。在结束项目开发后，本章还讲解了如何对项目进行整体打包构建，并通过 OSS 上传到 CDN 站点，提供给服务端进行集成展示，学习完本章内容，同学将完整了解前端研发的所有链路，完成一个企业级项目的…
- 视频：10-1 订单详情页面布局开发（上） (21:06)
- 视频：10-2 订单详情页面布局开发（下） (18:31)
- 视频：10-3 订单页面收货人信息逻辑开发（上） (23:50)
- 视频：10-4 订单页面收货人信息逻辑开发（下） (23:18)
- 视频：10-5 日期选择器的使用方法 (15:43)
- 视频：10-6 订单支付逻辑开发（上） (11:45)
- 视频：10-7 订单支付逻辑开发（下） (12:25)
- 视频：10-8 项目上线流程（上） (13:55)
- 视频：10-9 项目上线流程（下） (11:54)
-
第11章 【福利】彩蛋：React 框架实现原理13 节 | 230分钟
本章手把手带同学实现一个简易的 React 框架，扩展同学们技术视野，帮助同学们了解 React 底层实现。通过本章学习，有助于同学从底层思考技术问题，扩展技术视野，将自己的技术水准向前更近一步。
- 视频：11-1 React 代码是如何被转化成原生 JS 代码的 (14:17)
- 视频：11-2 createElement 底层的实现 (18:10)
- 视频：11-3 Babel 转换 JSX 的实现 (10:07)
- 视频：11-4 ReactDOM.render 方法的实现逻辑 (13:16)
- 视频：11-5 Concurrent Mode 实现思路 (14:04)
- 视频：11-6 Fiber 的原理和基础实现（上） (13:34)
- 视频：11-7 Fiber 的原理和基础实现（下） (23:31)
- 视频：11-8 Render & Commit 阶段 (15:26)
- 视频：11-9 Reconciliation 阶段（上） (24:14)
- 视频：11-10 Reconciliation 阶段（中） (25:32)
- 视频：11-11 Reconciliation 阶段（下） (16:32)
- 视频：11-12 函数组件的实现 (15:31)
- 视频：11-13 useState 的实现 (25:27)
评论0