这门课解决什么问题，适合什么基础

很多做后台系统或中台业务的团队，技术栈已经稳定在 React 配合 TypeScript 与 Ant Design。如果你之前只写过 Vue，或者一直用原生 JavaScript 拼页面，遇到接手这类项目时，往往会卡在环境配置、类型报错以及组件状态管理上。这套资料聚焦于用 Vite 搭建工程，结合 TS 和 antd 做实际业务开发，核心是帮你跨过从静态页面到组件化中后台应用的门槛。它适合有 JavaScript 基础、能看懂简单 ES6 语法的读者；如果你连变量作用域和异步请求都还不清楚，建议先补基础再看。资料里虽然涉及 React 18 的特性，但整体编排是从脚手架初始化、 JSX 语法、组件属性讲起的，所以不需要你提前精通 React，但需要你准备好耐心处理 TS 的类型约束。

建议先看哪几块，资料怎么配合练习

拿到资料后，不要顺着目录从头看到尾，建议优先啃三个部分。第一是工程搭建与项目结构分析，跟着视频在自己的电脑上把 Vite 跑通，弄清楚入口文件和组件目录的对应关系，这是后续调试的前提。第二是函数式组件与核心 Hooks 的使用，把状态管理和副作用这块的示例代码自己敲一遍，试着改掉初始数据，观察页面渲染变化。第三是路由与状态管理部分，重点理解页面跳转逻辑和全局数据流转。资料里的代码片段不要只用眼睛看，一定要在编辑器里动手写。遇到类型报错先自己查类型定义，不要直接复制视频里的最终代码，只有让编译器报错过，才能真正记住 TS 的约束规则。每学完一个独立的语法点，就尝试把它加到你自己的练习项目里，比如先写一个带类型校验的表单，再接一个模拟接口请求的列表。

学完能独立做什么

跟着完整练下来，你应该能独立搭建一个规范的前端工程，不再依赖别人配好的环境。能根据业务需求，用函数式组件拆分页面结构，用 antd 拼出常见的后台交互界面，比如带有筛选表单的数据表格、多页签布局和弹窗表单。在数据流转方面，能够用 Hooks 处理组件内部状态，用 Redux 处理跨组件的共享数据。更重要的是，面对 TS 的接口定义和类型推导，你不再会觉得无从下手，而是能自己定义业务数据的类型，并在组件间传递时获得语法提示。这不算什么高阶架构能力，但足够让你在接手一个已有的中后台项目时，快速看懂代码结构，独立负责某个模块的页面开发与联调。


全方位讲解React全家桶：脚手架、路由、Redux的理解和使用|掌握React常用的Hooks、生命周期、类和函数式组件|详解虚拟Dom、Diff算法、列表渲

课程目录

*   React全家桶入门到项目实战课程介绍/

  *   React全家桶课程介绍+适合人员+学后水平

  *   课程章集目录速览

  *   走进React的世界和Vue较短比长

*   React的基本使用开发/

  *   用React写第一个helloword

  *   怎么理解虚拟DOM和真实DOM？

  *   React为什么要使用JSX？

  *   深入理解React的JSX和上手开发

  *   React的JSX如何动态渲染数据？

  *   认识模块化和组件化编程

*   React脚手架搭建和组件开发/

  *   初始化创建React脚手架

  *   分析React脚手架项目结构信息

  *   函数式组件和类式组件开发

  *   初入茅庐—React组件化开发练习

*   React的核心属性和生命周期/

  *   React组件的核心属性—state

  *   React组件的核心属性—事件处理

  *   定义state和事件处理的简写方式

  *   深入理解React的生命周期（旧）—挂载阶段

  *   深入理解React的生命周期（旧）—setState更新阶段

  *   深入理解React的生命周期（旧）—forceUpdate更新阶段

  *   深入理解React的生命周期（旧）—父组件render更新阶段

  *   深入理解React的生命周期《新》—getDerivedStateFromProps

  *   深入理解React的生命周期《新》—getSnapshotBeforeUpdate

*   React的refs和表单组件/

  *   React中refs的使用—字符串形式的ref

  *   React中refs的使用—回调形式的ref

  *   React中refs的使用—createRef创建ref

  *   React中的非受控组件和受控组件

  *   【面试】剖析React中的Diffing算法

*   React的路由和状态管理/

  *   深入理解路由的概念

  *   认识React的路由插件react-router-dom和基本使用

  *   路由中重定向和路由表的使用

  *   玩转选中高亮和嵌套路由使用

  *   使用路由Params进行传递参数

  *   使用路由search进行传递参数

  *   使用路由state进行传递参数

  *   剖析编程式路由导航

  *   深入理解React的状态管理Redux

  *   剖析Redux的工作流程

*   React组件的扩展和函数式组件/

  *   【面试】React中setState是同步还是异步的？

  *   【面试】React中路由懒加载的扩展使用

  *   React函数组件状态Hook—useState《基础》

  *   React函数组件状态Hook—useState《进阶-对象》

  *   React函数组件状态Hook—useState《进阶-数组》

  *   React函数组件的副作用Hook—useEffect

*   React实战演练项目—小滴课堂首页/

  *   小滴课堂项目页面需求分析

  *   React初始化项目搭建

  *   React项目初始化配置Ant-Design+Unocss

  *   小滴课堂首页开发—头部导航

  *   小滴课堂首页开发—注册模块

  *   小滴课堂首页开发—登录模块

  *   小滴课堂首页开发—分类导航+轮播图

  *   小滴课堂首页开发—课程分类列表

  *   小滴课堂首页开发—底部+登录提醒浮层