你将学到

  • 系统掌握React核心技术应用
  • 深度理解 React 19 新范式
  • 提升性能分析与优化高阶技巧
  • 拓展Tailwind CSS原子化设计
  • 提升 React+TS 全栈实战技能
  • 提升复杂业务架构设计力
课程简介：本课程从环境搭建起步，手把手带你从0到1，系统掌握 React 核心技术，打通项目开发全流程；更深度攻坚 React 19 高阶范式：性能调优、Hooks与状态管理、路由鉴权，以及 Tailwind CSS 样式工程化。最终，你将独立完成全栈应用对接，一站式掌握 React 19 生态精髓，突破学习瓶颈，倍增解决复杂业务的实战能力，抢占职业发展先机。
第1章 起航React之旅
1 节｜18分钟

收起 

  •  

    视频：
    1-1 全景透视：React 课程精华与学习决胜路径
    试看
    17:24
第2章 【入门基石】React 19初体验，搭建前沿开发环境
7 节｜61分钟

收起 

  •  

    视频：
    2-1 前沿洞察：React 领跑前端开发的核心优势
    试看
    12:08

  •  

    视频：
    2-2 一步到位：React 开发环境搭建实战全攻略
    试看
    07:56

  •  

    视频：
    2-3 Vite + React 19 闪电战：3秒启动，碾压传统脚手架
    07:57

  •  

    视频：
    2-4 Vite+React 项目核心结构剖析
    09:11

  •  

    视频：
    2-5 项目总控：package.json
    11:35

  •  

    视频：
    2-6 工程监理：package-lock.json
    04:49

  •  

    视频：
    2-7 施工蓝图：vite.config.js
    07:20
第3章 【底层逻辑】React核心机制与组件化艺术
12 节｜97分钟

收起 

  •  

    视频：
    3-1 章节技术预览：产品组件实战–组件化架构与Props高效通信
    02:47

  •  

    视频：
    3-2 React 根组件：从零开始构建你的应用
    07:38

  •  

    视频：
    3-3 JSX 语法革命：从HTML到React的华丽变身
    12:11

  •  

    视频：
    3-4 JSX + 组件 + 单根法则：React世界的第一性原理
    07:16

  •  

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

  •  

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

  •  

    视频：
    3-7 Styled-components 样式化组件炫技：动态主题动画响应式一站式开发
    07:01

  •  

    视频：
    3-8 CSS-in-JS 原理深度拆解：性能 VS 灵活性的终极权衡
    09:19

  •  

    视频：
    3-9 Props 传声筒：父子孙的跨层级数据通道
    06:36

  •  

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

  •  

    视频：
    3-11 如何防止 props 被非法修改？用 ESLint 保驾护航
    04:39

  •  

    视频：
    3-12 Props黑科技：解构开箱+默认兜底+Spread批量+回调呼叫
    09:20
第4章 【高效渲染】React组件性能突围: 组合×短路×插槽×HOC×富文本
11 节｜102分钟

收起 

  •  

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

  •  

    视频：
    4-2 列表渲染工业级实践：让数据驱动UI
    09:46

  •  

    视频：
    4-3 Key 属性玄机：Diff算法核心优化策略
    07:24

  •  

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

  •  

    视频：
    4-5 三元运算符：JSX中的优雅分支决策
    06:08

  •  

    视频：
    4-6 if 的多重返回：React组件逻辑分叉与拆分
    12:21

  •  

    视频：
    4-7 React 组件组合：灵活拼装，优雅重用
    06:10

  •  

    视频：
    4-8 props.children：React 组件的万能插口
    11:41

  •  

    视频：
    4-9 具名插槽：组件组合的精准对接艺术
    12:15

  •  

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

  •  

    视频：
    4-11 HOC 高阶组件：代码界的“套娃大师”（下）
    08:37
第5章 【颜值革命】React+Tailwind CSS：原子化CSS与高定制化主题系统
14 节｜144分钟

收起 

  •  

    视频：
    5-1 章节技术预览：掌握 React 和 Tailwind CSS，打造前端高效利器
    04:10

  •  

    视频：
    5-2 CSS 开发的四大酷刑：传统 CSS 痛点与 Tailwind CSS 的魔法
    12:43

  •  

    视频：
    5-3 React + Tailwind CSS 开发配置：让 Tailwind 融入 Vite 项
    04:33

  •  

    视频：
    5-4 Flex 三板斧助你吊打传统 CSS
    11:40

  •  

    视频：
    5-5 Flex 终极对齐奥义
    09:49

  •  

    视频：
    5-6 Grid 网格布局秘籍
    11:13

  •  

    视频：
    5-7 手机、平板、PC：三屏联动响应式
    08:18

  •  

    视频：
    5-8 响应式开发实战（上）：首页横幅
    11:33

  •  

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

  •  

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

  •  

    视频：
    5-11 黑暗模式：React 与 Tailwind CSS 的完美暗黑切换
    12:07

  •  

    图文：
    5-12 作业：黑暗模式实战

  •  

    视频：
    5-13 主题与指令：自定义 CSS 变量与 Tailwind 的模式设计
    10:59

  •  

    视频：
    5-14 综合实战：打造响应式的产品推荐组件
    21:01
第6章 【交互革命】掌握 React 状态本质：构建可预测的组件交互流程
12 节｜95分钟

收起 

  •  

    视频：
    6-1 章节技术预览：React 状态管理核心技术一览
    02:34

  •  

    视频：
    6-2 黑暗模式切换翻车实录：从 let 到 useState 的正确打开方式
    10:48

  •  

    视频：
    6-3 React 状态（State）深度解析
    06:05

  •  

    视频：
    6-4 React 状态管理的特点(上)
    08:24

  •  

    视频：
    6-5 React 状态管理的特点(下)
    08:49

  •  

    视频：
    6-6 React State 实战：SKU选择器
    04:22

  •  

    视频：
    6-7 状态提升（Lifting State Up）
    06:48

  •  

    视频：
    6-8 状态提升实战：公共组件状态共享
    06:24

  •  

    视频：
    6-9 React 深层嵌套 State 更新避坑实战
    09:06

  •  

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

  •  

    视频：
    6-11 复杂State更新的艺术：Immer 黑魔法
    05:22

  •  

    视频：
    6-12 柯里化 + Immer：万能 State 更新器
    11:05
第7章 【类型安全】React + TypeScript：从组件到API的类型安全闭环
11 节｜110分钟

收起 

  •  

    视频：
    7-1 章节技术预览：React + TypeScript 类型安全体系与实践路线
    03:07

  •  

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

  •  

    视频：
    7-3 组件 props 类型声明实战：MainLayout 的 TS 类型升级
    05:19

  •  

    视频：
    7-4 优雅定义 props 类型：类型别名 type
    09:02

  •  

    视频：
    7-5 interface+联合类型封装万能按钮组件
    09:15

  •  

    视频：
    7-6 interface extends 揭秘组件继承与扩展
    10:36

  •  

    视频：
    7-7 .d.ts 到底是干啥的？带你解决样式别名等常见 TS 报错
    09:58

  •  

    视频：
    7-8 React 事件类型深入剖析
    16:25

  •  

    视频：
    7-9 事件函数在组件里的实际应用
    07:40

  •  

    视频：
    7-10 useState 类型安全规范
    06:52

  •  

    视频：
    7-11 TS + useState 深度实战：构建强类型电商状态模型
    14:30
第8章 【路由纵览】React Router v6：动态路由与前端应用拓扑
13 节｜110分钟

收起 

  •  

    视频：
    8-1 React Router 是什么？
    05:50

  •  

    视频：
    8-2 搭建路由页面结构：BrowserRouter + Route 实战讲解
    10:50

  •  

    视频：
    8-3 index 文件的妙用
    07:35

  •  

    视频：
    8-4 用 Outlet 解锁专业级路由布局方案
    08:22

  •  

    视频：
    8-5 React Router v6 新特性：createBrowserRouter 全解析
    07:30

  •  

    视频：
    8-6 中大型 React 项目必学：createBrowserRouter + Layout 路由
    08:19

  •  

    视频：
    8-7 404 + Error Boundary：优雅处理不存在的路由与错误降级策略
    08:45

  •  

    视频：
    8-8 Link vs NavLink：打造高亮交互式菜单栏
    09:18

  •  

    视频：
    8-9 编程式导航：useNavigate的智能重定向
    10:39

  •  

    视频：
    8-10 URL参数匹配（上）：动态路由 useParams-
    08:04

  •  

    视频：
    8-11 URL参数匹配（中）查询参数 useSearchParams
    10:22

  •  

    视频：
    8-12 URL参数匹配（下）：useParams vs useSearchParams
    06:06

  •  

    视频：
    8-13 鉴权集成：登录状态与路由权限的联动方案
    07:31
第9章 【数据驱动】副作用处理 useEffect 与异步请求
13 节｜113分钟

收起 

  •  

    图文：
    9-1 【API说明】课程后端在哪里

  •  

    视频：
    9-2 异步请求的本质
    08:28

  •  

    视频：
    9-3 副作用处理函数 useEffect
    10:59

  •  

    视频：
    9-4 用 useEffect 搞定搜索功能：从发请求到页面渲染的完整攻略
    06:57

  •  

    视频：
    9-5 错误处理策略
    05:12

  •  

    视频：
    9-6 彻底搞懂 useEffect 依赖数组：谁变谁触发！
    05:45

  •  

    视频：
    9-7 用好 useEffect 清理函数：内存泄漏不再
    06:57

  •  

    视频：
    9-8 API 请求的竞争与取消：AbortController
    09:31

  •  

    视频：
    9-9 输入防抖实战 useDebounce：拒绝服务器爆炸！
    08:48

  •  

    视频：
    9-10 useEffect + fetch 正确姿势：asyncawait 带你飞
    09:39

  •  

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

  •  

    视频：
    9-12 用 React Router Loaders 优化数据加载：提升用户体验的利器
    10:17

  •  

    视频：
    9-13 综合实战：产品详情页面UI重构
    19:36
第10章 【状态驱动】Context API：跨组件状态管理的降维解法（购物车场景剖析）
9 节｜71分钟

收起 

  •  

    视频：
    10-1 章节技术预览：Context API 跨组件状态管理与购物车场景
    01:53

  •  

    视频：
    10-2 状态提升破解 Prop Drilling（属性穿透）
    12:22

  •  

    视频：
    10-3 Context API 跨组件状态管理核心原理与基础架构
    07:07

  •  

    视频：
    10-4 Context 创建：集中管理购物车状态
    08:14

  •  

    视频：
    10-5 Context 订阅与发布：购物车组件挂载
    04:42

  •  

    视频：
    10-6 Context 消费：购物车商品更新与删除
    10:01

  •  

    视频：
    10-7 购物车UI重构：金额计算、结算与苹果风布局
    12:32

  •  

    视频：
    10-8 购物车持久化(localStorage集成)
    05:36

  •  

    视频：
    10-9 Context 多组件联动：购物车动画
    08:01
第11章 【函数范式】React Hooks 深度赋能：函数式组件的状态逻辑革命
8 节｜66分钟

收起 

  •  

    视频：
    11-1 React Hooks 深度解析：核心规则、实现原理与高效实践
    06:37

  •  

    视频：
    11-2 闭包冻结（Closure Stale State）风险
    07:01

  •  

    视频：
    11-3 React 严格模式（StrictMode）双重调用揭秘：为什么 Hook 运行两次？
    11:49

  •  

    视频：
    11-4 狙击无效渲染：useCallback + React.memo
    08:57

  •  

    视频：
    11-5 搜索过滤器锁定：useMeno 实战应用
    07:34

  •  

    视频：
    11-6 useRef：引用持久化与DOM 的操作逻辑
    05:45

  •  

    视频：
    11-7 自定义 Hook 实战：useApiData 优雅管理数据请求
    09:54

  •  

    视频：
    11-8 自定义 Hook 实战：useLocalStorage 实现状态持久化
    08:19
第12章 【状态跃迁】useReducer 范式：复杂状态的可预测性方案
8 节｜81分钟

收起 

  •  

    视频：
    12-1 章节技术预览：useReducer 范式、复杂状态管理与高级实战
    02:58

  •  

    视频：
    12-2 状态管理的二向箔：useReducer 如何降维打击复杂场景
    12:07

  •  

    视频：
    12-3 购物车重构实战：useReducer 的四步优雅姿势
    10:08

  •  

    视频：
    12-4 useReducer + 持久化存储实战指南
    10:27

  •  

    视频：
    12-5 Action Creator 速效救心丸：告别拼写错误与类型焦虑
    10:33

  •  

    视频：
    12-6 useReducer + Immer 草案模式：以可变应不可变
    09:46

  •  

    视频：
    12-7 实战UI重构：创建产品分类页面
    11:28

  •  

    视频：
    12-8 useReducer 的 API 请求状态管理
    12:47
第13章 【全局状态】Redux 生态重构：从 Flux 到 RTK 的工业级实践
10 节｜99分钟

收起 

  •  

    视频：
    13-1 章节技术预览：React 状态背后的交互逻辑
    03:13

  •  

    视频：
    13-2 Redux 管理状态的核心逻辑
    11:02

  •  

    视频：
    13-3 Store 构建 与 i18nReducer 的多语言实践
    15:43

  •  

    视频：
    13-4 深入 Redux 订阅机制：手动监听 Store 状态
    10:29

  •  

    视频：
    13-5 配置国际化框架 react-i18next
    10:21

  •  

    视频：
    13-6 精准实现多语言无缝切换
    06:19

  •  

    视频：
    13-7 使用 React-Redux：告别繁琐订阅
    09:31

  •  

    视频：
    13-8 Redux Toolkit(RTK)深度实践：Slice 架构与Redux现代化开发标准
    12:50

  •  

    视频：
    13-9 RTK进阶指南：从Thunk到请求取消的异步管理（上）
    13:45

  •  

    视频：
    13-10 RTK进阶指南：从Thunk到请求取消的异步管理(下)
    05:37
第14章 【全栈实战】电商系统攻坚：用户登录 → 购物车下单 → 订单支付链路
9 节｜81分钟

收起 

  •  

    视频：
    14-1 章节技术预览：全栈电商认证架构、JWT 流程与核心业务链路
    02:50

  •  

    视频：
    14-2 【概念理解】JWT原理剖析
    05:36

  •  

    视频：
    14-3 【JWT实例】JWT与单点登录实例解释
    08:55

  •  

    视频：
    14-4 高可扩展的注册与登录自定义 Hook 的深度应用：支持 GETPOST 的 API管理
    19:10

  •  

    视频：
    14-5 前端认证架构实战：自定义Hook+路由守卫+Token管理
    10:38

  •  

    视频：
    14-6 现代前端登录架构：Redux管理用户登录的完美实践
    15:51

  •  

    视频：
    14-7 React应用启动优化：一招解决页面刷新Token丢失问题
    03:44

  •  

    视频：
    14-8 本地存储 VS 后端数据：打造真正“联网版”购物车
    06:52

  •  

    视频：
    14-9 从 Reducer 到 API 的购物车双写架构：JWT认证下前后端数据同步
    07:09
    隐藏内容
    本内容需权限查看
    • 普通用户: 1金币
    • VIP会员: 免费
    • 永久会员: 免费
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。