2-1 前沿洞察：React 领跑前端开发的核心优势

2-2 一步到位：React 开发环境搭建实战全攻略

2-3 Vite + React 19 闪电战：3秒启动，碾压传

2-4 Vite+React 项目核心结构剖析

2-5 项目总控：package.json

2-6 工程监理：package-lock.json

2-7 施工蓝图：vite.config.js

3-1 【课程导学】产品组件实战

3-2 React 根组件：从零开始构建你的应用

3-3 JSX 语法革命：从HTML到React的华丽变身

3-4 JSX + 组件 + 单根法则：React世界的第一性原

3-5 React 视觉工程入门：CSS 基础与原子化设计

3-6 CSS模块化实战：企业级样式污染解决方案

3-7 Styled-components 样式化组件炫技：动态

3-8 CSS-in-JS 原理深度拆解：性能 VS 灵活性的终

3-9 Props 传声筒：父子孙的跨层级数据通道

3-10 Props 单向数据流：不可变性的防崩溃设计哲学

3-11 如何防止 props 被非法修改？用 ESLint 保

3-12 Props黑科技：解构开箱+默认兜底+Spread批

4-1 React 实战之路：从列表渲染到高阶组件全掌握

4-2 列表渲染工业级实践：让数据驱动UI

4-3 Key 属性玄机：Diff算法核心优化策略

4-4 短路运算（&&）：极简逻辑控制与防御性编程

4-5 三元运算符：JSX中的优雅分支决策

4-6 if 的多重返回：React组件逻辑分叉与拆分

4-7 React 组件组合：灵活拼装，优雅重用

4-8 props.children：React 组件的万能插口

4-9 具名插槽：组件组合的精准对接艺术

4-10 HOC 高阶组件：代码界的“套娃大师”（上）

4-11 HOC 高阶组件：代码界的“套娃大师”（下）.mp4

5-1 章节技术预览：掌握 React 和 Tailwind C

5-2 CSS 开发的四大酷刑：传统 CSS 痛点与 Tailw

5-3 React + Tailwind CSS 开发配置：让

5-4 Flex 三板斧助你吊打传统 CSS

5-5 Flex 终极对齐奥义

5-6 Grid 网格布局秘籍

5-7 手机、平板、PC：三屏联动响应式

5-8 响应式开发实战（上）：首页横幅

5-9 响应式开发实战（下）：打造灵动的头部导航栏

5-10 状态特效：按钮悬停发光与输入框聚焦

5-11 黑暗模式：React 与 Tailwind CSS 的

5-13 主题与指令：自定义 CSS 变量与 Tailwind

5-14 综合实战：打造响应式的产品推荐组件

6-1 章节技术预览：React 状态管理核心技术一览

6-2 黑暗模式切换翻车实录：从 let 到 useState

6-3 React 状态（State）深度解析

6-4 React 状态管理的特点(上)

6-5 React 状态管理的特点(下)

6-6 React State 实战：SKU选择器

6-7 状态提升（Lifting State Up）

6-8 状态提升实战：公共组件状态共享

6-9 React 深层嵌套 State 更新避坑实战

6-10 State 不可变性：用“副本”守护你的组件！

6-11 复杂State更新的艺术：Immer 黑魔法

6-12 柯里化 + Immer：万能 State 更新器

7-1 章节技术预览：React + TypeScript 类型

7-2 给项目系上安全带：从 JS 平滑升级到 TS

7-3 组件 props 类型声明实战：MainLayout 的

7-4 优雅定义 props 类型：类型别名 type

7-5 interface+联合类型封装万能按钮组件

7-6 interface extends 揭秘组件继承与扩展

7-7 .d.ts 到底是干啥的？带你解决样式别名等常见 TS

7-8 React 事件类型深入剖许

7-9 事件函数在组件里的实际应用

7-10 useState 类型安全规范 -

7-11 TS + useState 深度实战：构建强类型电商物

8-1 React Router 是什么？

8-2 搭建路由页面结构：BrowserRouter + Rou

8-3 index 文件的妙用

8-4 用 Outlet 解锁专业级路由布局方案

8-5 React Router v6 新特性：createBr

8-6 中大型 React 项目必学：createBrowser

8-7 404 + Error Boundary：优雅处理不存在

8-8 Link vs NavLink：打造高亮交互式菜单栏

8-9 编程式导航：useNavigate的智能重定向

8-10 URL参数匹配（上）：动态路由 useParams-

8-11 URL参数匹配（中）查询参数 useSearchPar

8-12 URL参数匹配（下）：useParams vs use

8-13 鉴权集成：登录状态与路由权限的联动方案

9-1 异步请求的本质

9-2 副作用处理函数 useEffect

9-3 用 useEffect 搞定搜索功能：从发请求到页面渲染

9-4 错误处理策略

9-5 彻底搞懂 useEffect 依赖数组：谁变谁触发！

9-6 用好 useEffect 清理函数：内存泄漏不再

9-7 API 请求的竞争与取消：AbortController

9-8 输入防抖实战 useDebounce：拒绝服务器爆炸！

9-9 useEffect + fetch 正确姿势：asyn

9-10 搜索UI优雅重构：苹果风搜索组件与可复用按钮实战

9-11 用 React Router Loaders 优化数据

9-12 综合实战：产品详情页面UI重构

10-1 状态提升破解 Prop Drilling（属性穿透）

10-2 Context API 跨组件状态管理核心原理与基础架

10-3（代码超行）Context 创建：集中管理购物车状态

10-4（代码超行）Context 订阅与发布：购物车组件挂载

10-5（代码超行）购物车UI重构：金额计算、结算与苹果风布局

10-6（代码超行）Context 消费：购物车商品更新与删除

10-7（代码超行）购物车持久化(localStorage集成)

10-8（代码超行）Context 多组件联动：购物车动画

11-1 React Hooks 深度解析：核心规则、实现原理与

11-2 闭包冻结（Closure Stale State）风险

11-3 React 严格模式（StrictMode）双重调用揭

11-4 狙击无效渲染：useCallback + React.

11-5 搜索过滤器锁定：useMeno 实战应用

11-6 useRef：引用持久化与DOM 的操作逻辑

11-7 自定义 Hook 实战：useApiData 优雅管理

11-8 自定义 Hook 实战：useLocalStorage

12-1 状态管理的二向箔：useReducer 如何降维打击复

12-2 购物车重构实战：useReducer 的四步优雅姿势

12-3 useReducer + 持久化存储实战指南

12-4 Action Creator 速效救心丸：告别拼写错误

12-5 useReducer + Immer 草案模式：以可变

12-6（代码超行）实战UI重构：创建产品分类页面

12-7（代码超行）useReducer 的 API 请求状态管

13-1 Redux 管理状态的核心逻辑

13-2 Store 构建 与 i18nReducer 的多语言

13-3 深入 Redux 订阅机制：手动监听 Store 状态

13-4 配置国际化框架 react-i18next

13-5 精准实现多语言无缝切换

13-6 使用 React-Redux：告别繁琐订阅

13-7 Redux Toolkit(RTK)深度实践：Slic

13-8 RTK进阶指南：从Thunk到请求取消的异步管理（上）

13-9 RTK进阶指南：从Thunk到请求取消的异步管理(下)

14-1【概念理解】JWT原理剖析

14-2【JWT实例】JWT与单点登录实例解释

14-3 高可扩展的注册与登录自定义 Hook 的深度应用：支持

14-4 前端认证架构实战：自定义Hook+路由守卫+Token

14-5 现代前端登录架构：Redux管理用户登录的完美实践

14-6 React应用启动优化：一招解决页面刷新Token丢失

14-7 本地存储 VS 后端数据：打造真正“联网版”购物车

14-8 从 Reducer 到 API 的购物车双写架构：JW

14-9 电商终极一战：从购物车到支付成功的完美通关