你将学到：

  • 构建 React 18 核心应用体系
  • 解锁 React+TS 高阶实用技巧
  • 提升企业级项目构建设计能力
  • 拓展源码解读及底层设计思维
  • 实践流行调试工具集使用技巧
  • 夯实开发提效工程化应用能力
前端技术专家 Dell 老师带你系统构建 React18 技术体系，并结合“欢乐购”项目，快速积累企业级前端项目实战经验，落地 React18 与 TypeScript 结合的实用开发技巧。同时老师分享了React框架核心源码实现原理的深度思考，进一步帮助大家 “学懂用活”，真正走近框架，全面提升技术实力。体验地址：http://statics.dell-lee.com/shopping-project/index.html
第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
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。