# 2023年React 18系统入门进阶实战《欢乐购》课程

*Published:* 2024-06-16
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年12月29日，已超过 180天没有更新



**明星讲师 Dell 全新力作，带你一课打通 React + TS 实用技能。**

[![](https://www.xarjtc.com/wp-content/uploads/2024/06/100c449414ada2d.webp)](https://www.xarjtc.com/wp-content/uploads/2024/06/100c449414ada2d.webp)

**课程介绍**

前端技术专家 Dell 老师 2023 年最新力作，带你系统构建 React 18 技术体系，并结合“欢乐购”项目，快速积累企业级前端项目实战经验，落地 React 18 与 TypeScript 结合的实用开发技巧。同时老师分享了React框架核心源码实现原理的深度思考，进一步帮助大家 “学懂用活”，真正走近框架，全面提升技术实力。

**你将学到：**

1\. 构建 React 18 核心应用体系

4\. 解锁 React+TS 高阶实用技巧

2\. 提升企业级项目构建设计能力

5\. 拓展源码解读及底层设计思维

3\. 实践流行调试工具集使用技巧

6\. 夯实开发提效工程化应用能力

**适合人群**

想要一站式解锁 React 18 核心应用及底层设计思维，提升流行框架应用能力的开发者

希望快速提升企业级项目构建、设计能力的前端开发者

技术储备

熟悉 Javascript、HTML、CSS 基础语法

了解 Webpack 等前端工基本使用

了解 TypeScript 基础语法

环境参数

react 18.2.0

typescript 4.9.5

Node.js 16.15.1

章节目录：

第1章 为什么越来越多的工程师选用 React

4 节｜21分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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