首页 实战

React18 系统入门 进阶实战《欢乐购》

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

难度：中级
|
时长：共 28 小时
￥299.00
距离活动结束
立即购买
加购物车
已有 281 人在学
  • 构建 React 18 核心应用体系
  • 解锁 React+TS 高阶实用技巧
  • 提升企业级项目构建设计能力
  • 拓展源码解读及底层设计思维
  • 实践流行调试工具集使用技巧
  • 夯实开发提效工程化应用能力
试看本节课 04:43
试看本节课 07:27
试看本节课 17:02
1-1 这可能是最适合新手学习 React 18 的第一门课
1-3 React 18 和先前版本的区别
2-1 如何在网页中快速使用 React（上）

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
前端技术专家 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
本课程已完结
适合人群
想要一站式解锁 React 18 核心应用及底层设计思维，提升流行框架应用能力的开发者
希望快速提升企业级项目构建、设计能力的前端开发者
技术储备
熟悉 Javascript、HTML、CSS 基础语法
了解 Webpack 等前端工基本使用
了解 TypeScript 基础语法
环境参数
react 18.2.0
typescript 4.9.5
Node.js 16.15.1
Dell
资深前端工程师， 已有218496个学生
其他课程： 《Vue3入门与项目实战 掌握完整知识体系》 《React 配置化+Serverless,落地低代码+云原生全栈开发》、 《前端要学的测试课 从Jest入门到 TDD/BDD双实战》、 《专为小白设计的TypeScript入门课》、
全部
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
React18 入门到进阶
套餐价格：¥586.00
2门课 总价：¥647.00
立即购买
 课程介绍

React18 系统入门 进阶实战《欢乐购》

中级  · 281人报名 ¥299.00
课程介绍 

React18+TS 通用后台管理系统解决方案落地实战

中级  · 467人报名 ¥348.00
React18 从入门到全栈
套餐价格：¥809.00
2门课 总价：¥898.00
立即购买
 课程介绍

React18 系统入门 进阶实战《欢乐购》

中级  · 281人报名 ¥299.00
课程介绍 

React18+TS+NestJS+GraphQL 全栈开发在线教育平台

中级  · 358人报名 ¥599.00
React18 入门到原理剖析
套餐价格：¥809.00
2门课 总价：¥898.00
立即购买
 课程介绍

React18 系统入门 进阶实战《欢乐购》

中级  · 281人报名 ¥299.00
课程介绍 

手写 React 高质量源码，迈向高阶开发

高级  · 195人报名 ¥599.00
React18 入门到组件库实战
套餐价格：¥629.00
2门课 总价：¥698.00
立即购买
 课程介绍

React18 系统入门 进阶实战《欢乐购》

中级  · 281人报名 ¥299.00
课程介绍 

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

中级  · 109人报名 ¥399.00
React18从系统入门到原理剖析
套餐价格：¥629.00
2门课 总价：¥698.00
立即购买
 课程介绍

React18 系统入门 进阶实战《欢乐购》

中级  · 281人报名 ¥299.00
课程介绍 

前端跳槽突围课，React18底层源码深入剖析

高级  · 33人报名 ¥399.00
React18从入门到全栈
套餐价格：¥539.00
2门课 总价：¥598.00
立即购买
 课程介绍

React18 系统入门 进阶实战《欢乐购》

中级  · 281人报名 ¥299.00
课程介绍 

前端全栈进阶 Nextjs打造跨框架SaaS应用

中级  · 42人报名 ¥299.00
本课程被纳入了《React.js 框架从入门到精通》的学习路线中，共 4 个步骤，5 门课。
Step1: React 框架零基础入门
React18 系统入门 进阶实战《欢乐购》
难度 中级
原价 ￥299.00
已有 281 人在学
加购物车
Step2: React 框架进阶之路
React18+TS 通用后台管理系统解决方案落地实战
难度 中级
原价 ￥348.00
已有 467 人在学
加购物车
React18+TS高仿AntD从零到一打造组件库
难度 高级
原价 ￥448.00
已有 2065 人在学
加购物车
Step3: 全栈开发企业级平台，掌握复杂业务实现策略
React18+TS+NestJS+GraphQL 全栈开发在线教育平台
难度 中级
原价 ￥599.00
已有 358 人在学
加购物车
Step4: 深入 React 框架源码之处
手写 React 高质量源码，迈向高阶开发
难度 高级
原价 ￥599.00
已有 195 人在学
加购物车
路线特惠价: ¥2293 5门课总价：¥2293
选择该路线学习
已有3366人在学
查看更多
数据加载中...
查看更多好课
《React18 系统入门 进阶实战《欢乐购》》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
￥299.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

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

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

意见反馈 帮助中心 APP下载
官方微信