明星讲师 Dell 全新力作，带你一课打通 React + TS 实用技能。
课程介绍
前端技术专家 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
评论0+