首页 实战

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

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

已完结
|
难度：初级
|
时长：共 28 小时
￥299.00
距离活动结束
立即购买
加购物车
已有 343 人在学
  • 构建 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
展开所有

本章介绍：

本章中对React 框架优势、React 18 版本特点特性，以及课程整体的教学思路和方法，进行了梳理，帮助大家更加清晰的认识 React 18。

第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

本章介绍：

本章将直接带同学们使用 React 基础语法上手一款小游戏的开发，在简单实战的过程中带同学们了解 React 18 的代码开发方式、调试工具，以及常见的基础语法。通过本章学习，同学们可以对 React 开发有一个非常基础的认识，有助于后续系统性学习。

第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

本章介绍：

本章详细介绍 React 18 的基础语法，全面使用基于 Hook 和函数组件的思路进行教学，帮助同学不仅掌握 React 提供的语法 API，同时掌握基于数据驱动的函数式编程开发理念，真正掌握新版本 React 的编程精髓。通过本章学习，同学们可以完整的掌握 React 18 中核心 API 的使用。

第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

本章介绍：

本章对 React 18 的语法进行了进阶扩充，在进行复杂系统设计、系统错误排查、系统性能优化的过程中，这些知识点可以有效帮助同学解决问题。通过本章学习，同学们的知识面可以覆盖 React 18 官方文档中 95% 以上的知识点。

第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

本章介绍：

本章讲解了如何将 TypeScript 与 React 结合，便携更健壮的前端工程代码。课程里对常见的 TypeScript 类型进行了简单介绍讲解，重点介绍了在 React 中遇到类型问题应该如何解决，即便对 TypeScript 没有任何了解，通过本章的学习，同学也可以基本完成 React 和 TypeScript 的集成开发。

第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

本章介绍：

本章讲解了「欢乐购」项目中，引导、登陆、注册页面的实现链路，Charles 移动端请求代理转发工具的使用、Rem 自适应布局的实现、Iconfont 等常用前端开发工具的使用，过程中帮助同学完成弹框组件、请求 Hook 等通用能力的封装。通过本章学习，同学们可以轻松应对相对简单的企业移动端页面的开发。

第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

本章介绍：

本章讲解了「欢乐购」项目中，首页、搜索等与首页相关页面的实现链路，对移动端布局、页面间路由联动、前端持久存储、三方插件使用进行了重点讲解，通过本章讲解，同学们可以熟练使用移动端布局技巧，进行复杂页面的样式布局开发，同时借助 React Router 完成多页面的开发串联，从而完成小型完整项目的开发。

第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

本章介绍：

本章讲解了「欢乐购」项目中，分类列表、商品列表、商品详情等页面的实现链路，带大家完成复杂移动端列表页面的开发，过程中重点讲解 IScroll 滚动工具的使用、复杂列表页面布局、接口数据结构设计等内容，通过本章内容的学习，同学们可以完成复杂企业移动端页面的开发。

第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

本章介绍：

本章讲解了订单详情页面的实现，讲解了 AntD Mobile 组件库与 React 项目的结合使用，以及相对复杂的交易流程逻辑。在结束项目开发后，本章还讲解了如何对项目进行整体打包构建，并通过 OSS 上传到 CDN 站点，提供给服务端进行集成展示，学习完本章内容，同学将完整了解前端研发的所有链路，完成一个企业级项目的完整开发。

第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

本章介绍：

本章手把手带同学实现一个简易的 React 框架，扩展同学们技术视野，帮助同学们了解 React 底层实现。通过本章学习，有助于同学从底层思考技术问题，扩展技术视野，将自己的技术水准向前更近一步。

第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
资深前端工程师， 已有219838个学生
其他课程： 《Vue3入门与项目实战 掌握完整知识体系》 《React 配置化+Serverless,落地低代码+云原生全栈开发》、 《前端要学的测试课 从Jest入门到 TDD/BDD双实战》、 《专为小白设计的TypeScript入门课》、
全部
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
React18 入门到进阶
套餐价格：¥586.00
2门课 总价：¥647.00
立即购买
 课程介绍

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

初级  · 343人报名 ¥299.00
课程介绍 

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

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

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

初级  · 343人报名 ¥299.00
课程介绍 

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

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

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

初级  · 343人报名 ¥299.00
课程介绍 

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

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

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

初级  · 343人报名 ¥299.00
课程介绍 

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

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

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

初级  · 343人报名 ¥299.00
课程介绍 

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

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

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

初级  · 343人报名 ¥299.00
课程介绍 

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

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

学习咨询

选课、学习遇到问题？

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

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

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