这门课解决什么问题
React 18 是目前国内前端岗位需求最多的框架之一，但很多初学者卡在「看懂文档，写不出项目」上。本课程以《欢乐购》电商前台为实战载体，从组件设计、状态管理、数据流向三个核心痛点切入，帮你建立完整的 React 思维。
课程不只是语法讲解，而是通过一个真实可运行的游戏项目，让你理解「为什么这样写」而不是「这样写」。学完后你可以独立搭建中型 React 应用，掌握组件拆分、状态设计、性能优化的基本方法，具备应对实际工作场景的能力。
适合什么基础
需要掌握 JavaScript 基础语法，包括变量、函数、数组、对象、回调等核心概念，了解 HTML/CSS 基本用法。如果你有 Vue、Angular 或其他框架经验，也能快速迁移——课程会对比 React 与其他框架在设计理念上的差异，帮助你理解 React 的独特之处。
不需要 Node.js 环境配置经验，课程从浏览器直接引入 React 开始，逐步过渡到工程化开发。零基础转行者建议先补齐 JS 基础再进入，否则容易在状态管理和组件通信上感到吃力。
建议先看哪几块
第1章「为什么选用 React」必须看完，建立学习动机和版本认知，理解 React 18 相比先前版本的核心改进。第2章前4节「编程初体验」是上手关键，学会在网页中直接使用 React，不依赖复杂工具链，降低入门门槛。
第3章「基础语法」选择性与前两章配合：先看 3-1、3-2 理解 UI 展示概念，再看 3-3 掌握状态与事件。Immutable 数据部分（3-5、3-6）可以暂缓，等状态管理有了实战感受再回头看，避免一开始就陷入概念细节。
建议学习顺序为：第1章 → 第2章前6节 → 第3章3-1至3-4节 → 第2章剩余部分 → 第3章剩余部分。这种穿插方式能让你在学语法的同时立即应用，加深理解。
学完能独立做什么
完成课程后，你可以独立开发包含多个页面的 React 应用，实现表单交互、列表渲染、条件展示等常见功能。掌握 useState、useEffect 的核心用法，理解组件通信和数据流向的基本模式，能够排查常见的状态更新问题。
实战项目《欢乐购》涵盖商品列表、购物车、订单提交等完整流程，学完后你可以基于此模板快速搭建自己的电商前台或后台管理系统。这些能力足以应对初级前端岗位的日常开发需求。
资料怎么配合练习
课程视频是主线，每节 10～20 分钟，建议边看边在本地复现代码。不要用「只看不动手」的方式学习——React 是实践型技能，必须亲手写组件、调状态、看效果，否则很容易遗忘。
第2章的「工程初始化」视频提供项目脚手架，后续章节的代码可以在此基础上迭代。调试工具安装（2-3）必须完成，这是排查状态问题、理解渲染流程的必备能力，建议在学习第2章时同步配置好。
如果遇到报错，先看 Console 和 React DevTools，不要急着复制答案。课程设计的《欢乐购》项目有多个实现层级，鼓励你先自己尝试，再看视频对照，这种「先做后看」的方式能显著提升学习效果。
课程目录
第1章 为什么越来越多的工程师选用 React 试看 4 节 | 21分钟 1-1 这可能是最适合新手学习 React 18 的第一门课 (04:43).mp4 1-2 为什么越来越多的工程师选用 React (04:47).mp4 1-3 React 18 和先前版本的区别 (07:27).mp4 1-4 找对方法，轻松系统化入门 React 使用 (03:35).mp4 第2章 React 编程初体验 试看 14 节 | 193分钟 2-1 如何在网页中快速使用 React（上） (17:02).mp4 2-2 如何在网页中快速使用 React（下） (18:23).mp4 2-3 React 开发调试工具安装 (10:44).mp4 2-4 React常见语法初探（上） (16:54).mp4 2-5 React 常见语法初探（中） (10:01).mp4 2-6 React 常见语法初探（下） (12:28).mp4 2-7 React 工程初始化和游戏功能预览 (18:05).mp4 2-8 实现棋盘布局 (10:17).mp4 2-9 下棋逻辑的实现（上） (11:31).mp4 2- 10 下棋逻辑的实现（下） (12:24).mp4 2- 11 借助数据设计实现游戏状态计算逻辑（上） (13:34).mp4 2- 12 借助数据设计实现游戏状态计算逻辑（下） (12:24).mp4 2- 13 优化拆分组件实现数据共享 (10:25).mp4 2- 14 历史回溯功能的实现 (18:12).mp4 第3章 React 基础语法 17 节 | 271分钟 3-1 React UI 展示相关概念详解（上） (14:26).mp4 3-2 React UI 展示相关概念详解（下） (12:35).mp4 3-3 使用事件和状态实现交互 (22:26).mp4 3-4 useState 原理讲解 & 事件查缺补漏 (21:50).mp4 3-5 Immutable 数据 & Immer 的使用（上） (13:02).mp4 3-6 Immutable 数据 & Immer 的使用（下） (10:04).mp4 3-7 理解声明式编程及其开发规范 (17:28).mp4 3-8 通过父子组件传值解决数据共享问题 (15:37).mp4 3-9 组件状态重置背后的运行机理 (14:47).mp4 3- 10 Key 值的作用详解 (17:06).mp4 3- 11 使用 Reducer 聚合数据处理逻辑（上） (13:28).mp4 3- 12 使用 Reducer 聚合数据处理逻辑（下） (10:59).mp4 3- 13 Reducer 的优缺点解析（上） (11:36).mp4 3- 14 Reducer 的优缺点解析（下） (11:40).mp4 3- 15 使用 Context 完成深层组件传值 (19:59).mp4 3- 16 Context 实际使用技巧 & 通过 Children 进行父子组件间 JSX 内容的传递 (18:31).mp4 3- 17 使用 Reducer & Context 实现 TodoList 功能 (24:45).mp4 第4章 React 高阶语法 13 节 | 235分钟 4-1 Ref 的基础使用 (14:37).mp4 4-2 Ref 与元素和组件的结合使用 (13:29).mp4 4-3 Effect 的使用场景和基础使用步骤 (13:42).mp4 4-4 useEffect 的底层执行逻辑 (23:48).mp4 4-5 严格模式 Effect 两次执行问题的处理方法 (15:13).mp4 4-6 useMemo 的使用场景和使用方法 (13:51).mp4 4-7 useSyncExternalStore 的使用方法 (13:33).mp4 4-8 组件和Effect的生命周期 & UseEffectEvent 简单介绍 (20:59).mp4 4-9 自定义 Hook 的作用及使用方法 (14:34).mp4 4-10 useCallback、useDebugValue、useImperativeHandle 的使用方法 (23:36).mp4 4- 11 Profiler 和 Suspense 内置组件的深度讲解 (21:04).mp4 4- 12 使用 UseDeferredValue 提升用户体验 (25:21).mp4 4- 13 useTransition 和 memo 的使用详解 (20:44).mp4 第5章 React 中常见的 TypeScript 类型定义 4 节 | 73分钟 5-1 TypeScript 项目生成、语法入门及函数组件 Props 类型的定义 (22:07).mp4 5-2 Hooks 相关类型问题的处理（上） (20:43).mp4 5-3 Hooks 相关类型问题的处理（下） (20:29).mp4 5-4 React 相关事件的 TS 类型定义 (09:32).mp4 第6章 实战“欢乐购”：登陆、注册、引导页面的开发 15 节 | 265分钟 6-1 Charles、rem布局、一像素边框问题的前置工程准备（上） (08:17).mp4 6-2 Charles、rem布局、一像素边框问题的前置工程准备（下） (14:50).mp4 6-3 使用 Ref 和 CSS 动画完成引导页面开发 (27:47).mp4 6-4 使用 React-router-dom V6 版本实现登陆页面跳转（上） (19:31).mp4 6-5 使用 React-router-dom V6 版本实现登陆页面跳转（下） (19:21).mp4 6-6 使用 Sass 优化样式代码 & 使用 Axios + Charles 模拟请求开发（上） (09:34).mp4 6-7 使用 Sass 优化样式代码 & 使用 Axios + Charles 模拟请求开发（下） (16:53).mp4 6-8 封装通用请求 useRequest 自定义 Hook（上） (17:02).mp4 6-9 封装通用请求 useRequest 自定义 Hook（下） (17:11).mp4 6- 10 useRequest 代码改造及模态框提示功能实现 (18:16).mp4 6- 11 使用 useImperativeHandle 进行模态框组件的封装实现 (15:11).mp4 6- 12 使用 CreatePortal 完善 Modal 组件，优化请求发送逻辑 (23:42).mp4 6- 13 注册页面的基础开发 (19:27).mp4 6- 14 使用嵌套路由实现代码的抽象复用 (24:06).mp4 6- 15 登陆逻辑的完整实现 (13:24).mp4 第7章 实战“欢乐购”：首页相关页面开发 16 节 | 281分钟 7-1 使用 Swiper 实现首页顶部轮播效果 (21:56).mp4 7-2 使用地理位置接口获取用户定位信心 (18:10).mp4 7-3 useRequest 和 Modal 组件的封装升级（上） (10:42).mp4 7-4 useRequest 和 Modal 组件的封装升级（下） (12:20).mp4 7-5 首页数据动态获取（上） (14:13).mp4 7-6 首页数据动态获取（下） (13:12).mp4 7-7 分类及卡片区域布局开发（上） (16:09).mp4 7-8 分类及卡片区域布局开发（下） (18:08).mp4 7-9 首页完整布局样式开发（上） (16:33).mp4 7- 10 首页完整布局样式开发（下） (13:57).mp4 7- 11 首页组件拆分及代码优化 (25:18).mp4 7- 12 切换门店功能开发（上） (19:03).mp4 7- 13 切换门店功能开发（下） (21:52).mp4 7- 14 搜索页面布局开发（上） (16:34).mp4 7- 15 搜索页面布局开发（下） (16:11).mp4 7- 16 搜索页面逻辑实现 (25:44).mp4 第8章 实战“欢乐购”：商品列表及详情页面开发 13 节 | 243分钟 8-1 简单列表页面布局实现 (21:19).mp4 8-2 使用路由完成页面间参数传递 (21:06).mp4 8-3 列表页面逻辑实现 (25:26).mp4 8-4 详情页面布局开发（上） (24:36).mp4 8-5 详情页面布局开发（下） (23:15).mp4 8-6 详情页面逻辑开发 (17:05).mp4 8-7 分类列表页面布局开发（上） (21:13).mp4 8-8 分类列表页面布局开发（下） (17:09).mp4 8-9 分类列表逻辑开发（1） (13:02).mp4 8-10 分类列表逻辑开发（2） (13:52).mp4 8-11 分类列表逻辑开发（3） (14:58).mp4 8-12 分类列表逻辑开发（4） (15:31).mp4 8-13 分类列表逻辑开发（5） (14:08).mp4 第9章 实战“欢乐购”：购物车逻辑开发 11 节 | 208分钟 9-1 详情页面购物车弹窗功能开发（上） (15:54).mp4 9-2 详情页面购物车弹窗功能开发（下） (19:12).mp4 9-3 详情页面添加购物车逻辑实现 (29:21).mp4 9-4 分类列表页面购物车逻辑实现（上） (19:03).mp4 9-5 分类列表页面购物车逻辑实现（下） (11:48).mp4 9-6 购物车页面布局开发（上） (25:42).mp4 9-7 购物车页面布局开发（下） (24:21).mp4 9-8 购物车实现动态话数据渲染（上） (16:24).mp4 9-9 购物车实现动态话数据渲染（下） (12:23).mp4 9- 10 购物车下单逻辑实现（上） (17:32).mp4 9- 11 购物车下单逻辑实现（下） (16:03).mp4 第10章 实战“欢乐购”：订单详情页面的开发与项目上线 9 节 | 153分钟 10-1 订单详情页面布局开发（上） (21:06).mp4 10-2 订单详情页面布局开发（下） (18:31).mp4 10-3 订单页面收货人信息逻辑开发（上） (23:50).mp4 10-4 订单页面收货人信息逻辑开发（下） (23:18).mp4 10-5 日期选择器的使用方法 (15:43).mp4 10-6 订单支付逻辑开发（上） (11:45).mp4 10-7 订单支付逻辑开发（下） (12:25).mp4 10-8 项目上线流程（上） (13:55).mp4 10-9 项目上线流程（下） (11:54).mp4 第11章 【福利】彩蛋：React 框架实现原理 13 节 | 230分钟 11-1 React 代码是如何被转化成原生 JS 代码的 (14:17).mp4 11-2 createElement 底层的实现 (18:10).mp4 11-3 Babel 转换 JSX 的实现 (10:07).mp4 11-4 ReactDOM.render 方法的实现逻辑 (13:16).mp4 11-5 Concurrent Mode 实现思路 (14:04).mp4 11-6 Fiber 的原理和基础实现（上） (13:34).mp4 11-7 Fiber 的原理和基础实现（下） (23:31).mp4 11-8 Render & Commit 阶段 (15:26).mp4 11-9 Reconciliation 阶段（上） (24:14).mp4 11- 10 Reconciliation 阶段（中） (25:32).mp4 11- 11 Reconciliation 阶段（下） (16:32).mp4 11- 12 函数组件的实现 (15:31).mp4 11- 13 useState 的实现 (25:27).mp4
