这门课值不值得学：先看它解决什么问题

很多前端转行或写惯了传统 JavaScript 的上班族，在面对新项目时常常卡在环境配置、组件复用和接口联调这几个环节上。这门关于 React 与 TypeScript 结合的实战课，解决的就是从零搭起一个规范前端项目的问题。它没有花大量篇幅讲底层原理，而是直接带你跑通从建项目、写组件到接数据的完整链路。如果你过去总是东拼西凑看文档，遇到报错只能瞎试，这套资料能帮你把碎片化的操作串成一条线，少走弯路。

适合什么基础，学完能独立做什么

这份资料适合有一定网页开发基础、能看懂基本 JavaScript 语法，但没怎么用过现代前端工程化工具的人。如果你连变量和函数都写不利索，建议先补补原生 JS 再来。学完之后，你应该能独立用 Vite 搭建起一个带类型检查的 React 项目，把页面拆成可复用的函数组件，并对接后端 API 把真实数据渲染到界面上。这意味着你接手公司一个常规的后台管理项目或展示页面时，不再需要别人帮你把脚手架搭好，自己就能把活儿接下来。

建议怎么看：先抓骨架，再配实操

资料编排是按开发顺序走的，建议先看基础语法那几块，重点放在用工具创建项目、理解 JSX 规则和组件嵌套上，把项目跑起来比死记硬背强。看完怎么抽离数据和样式后，别急着往下赶，自己照着敲一遍书单那个小练习，体会下组件怎么复用。资料里的视频偏操作演示，光看不练容易忘。建议你开两个窗口，左边放视频，右边跟着敲代码，报错了就倒回去重看。等基础组件写熟了，再去碰 API 数据请求部分，这样学下来知识才是自己的。


使用React实现项目的开发

课程目录

*   01 ReactTS全新API基础语法/

  *   01 100秒快速学习React.js.mp4 (6.95 MB), 01:11

  *   02 React核心语法-Vite创建项目.mp4 (4.80 MB), 02:07

  *   03 React核心语法-第一个函数组件.mp4 (3.70 MB), 01:39

  *   04 React核心语法-VSCode插件.mp4 (2.97 MB), 01:00

  *   05 React核心语法-JSX规则.mp4 (10.70 MB), 03:07

  *   06 React核心语法-组件嵌套.mp4 (3.79 MB), 01:27

  *   07 React核心语法-组件嵌套实战书单.mp4 (13.54 MB), 03:42

  *   08 React核心语法-抽离数据和样式.mp4 (8.01 MB), 01:49

  *   09 React核心语法-属性传值.mp4 (13.83 MB), 04:34

  *   10 React核心语法-遍历组件.mp4 (14.12 MB), 03:29

  *   11 React核心语法-事件.mp4 (5.02 MB), 01:38

  *   12 React核心语法-模块抽离.mp4 (11.81 MB), 03:06

  *   13 React核心语法-处理警告.mp4 (8.97 MB), 02:30

*   02 [Hooks]useState/

  *   01 ReactHooks-为什么使用状态.mp4 (4.82 MB), 02:05

  *   02 ReactHooks-使用useState.mp4 (4.62 MB), 01:54

  *   03 ReactHooks-state使用细节.mp4 (11.09 MB), 04:14

  *   04 ReactHooks-更新状态细节.mp4 (10.87 MB), 03:51

  *   05 ReactHooks-小练习.mp4 (8.23 MB), 02:52

*   03 [Hooks]useEffect/

  *   01 ReactHooks-为什么要使用它.mp4 (3.86 MB), 01:20

  *   02 ReactHooks-使用细节.mp4 (12.42 MB), 04:24

  *   03 ReactHooks-第二个参数.mp4 (10.50 MB), 03:44

  *   04 ReactHooks-返回值清理功能.mp4 (12.49 MB), 04:50

  *   05 ReactHooks-实现网络请求.mp4 (6.23 MB), 02:01

  *   06 ReactHooks-自定义hook.mp4 (7.39 MB), 02:22

*   04 [实战菜谱]/

  *   01 React实战菜谱-搭建基本结构.mp4 (13.80 MB), 03:35

  *   02 React实战菜谱-数据模拟和传值.mp4 (23.82 MB), 05:37

  *   03 React实战菜谱-遍历数据渲染菜谱.mp4 (10.20 MB), 02:02

  *   04 React实战菜谱-动态渲染分类.mp4 (15.78 MB), 04:06

  *   05 React实战菜谱-实现过滤功能.mp4 (18.74 MB), 04:48

*   05 [实战表单]/

  *   01 React-form-布局基本表单.mp4 (8.54 MB), 02:56

  *   02 React-form-绑定input状态.mp4 (10.90 MB), 02:38

  *   03 React-form-实现表单事件.mp4 (14.99 MB), 04:33

  *   04 React-form-多表单如何绑定.mp4 (35.03 MB), 09:40

*   06 [多级表单]/

  *   01 React-ts-form多级表单.mp4 (208.88 MB), 01:02:24

*   07 [单选多选]/

  *   01 ReactTS实战单选多选-局部样式的用法.mp4 (16.34 MB), 06:49

  *   02 ReactTS实战单选多选-数据模拟.mp4 (12.63 MB), 04:47

  *   03 ReactTS实战单选多选-布局结构.mp4 (12.23 MB), 04:20

  *   04 ReactTS实战单选多选-传值(更新值).mp4 (16.64 MB), 05:32

  *   05 ReactTS实战单选多选-显示和隐藏列表.mp4 (11.25 MB), 03:28

  *   06 ReactTS实战单选多选-删除功能.mp4 (21.13 MB), 05:07

  *   07 ReactTS实战单选多选-选中和高亮.mp4 (25.78 MB), 07:42

  *   08 ReactTS实战单选多选-多选传值.mp4 (17.74 MB), 05:32

  *   09 ReactTS实战单选多选-实现多选渲染.mp4 (16.61 MB), 05:12

*   08 [短信验证登录]/

  *   01 ReactTS实战短信登录-搭建基本结构.mp4 (12.78 MB), 04:52

  *   02 ReactTS实战短信登录-配置别名.mp4 (9.34 MB), 03:32

  *   03 ReactTS实战短信登录-布局表单.mp4 (26.14 MB), 08:06

  *   04 ReactTS实战短信登录-处理事件.mp4 (14.07 MB), 03:57

  *   05 ReactTS实战短信登录-发起短信请求.mp4 (27.36 MB), 06:39

  *   06 ReactTS实战短信登录-获取短信验证码.mp4 (16.52 MB), 04:38

  *   07 ReactTS实战短信登录-校验短信验证码.mp4 (19.21 MB), 05:05

*   09 [全新路由]/

  *   01 React-Router-搭建基本结构.mp4 (4.00 MB), 01:38

  *   02 React-Router-路由路径跳转.mp4 (7.87 MB), 03:19

  *   03 React-Router-制作导航.mp4 (6.00 MB), 02:22

  *   04 React-Router-优化路由.mp4 (10.48 MB), 03:07

  *   05 React-Router-优化路由(2).mp4 (15.48 MB), 04:55

  *   06 React-Router-多级路由.mp4 (13.01 MB), 04:08

  *   07 React-Router-不存在的路由.mp4 (6.96 MB), 02:25

  *   08 React-Router-布局课程.mp4 (9.48 MB), 02:53

  *   09 React-Router-路由参数和跳转.mp4 (17.61 MB), 05:50

  *   10 React-Router-属性loader.mp4 (28.66 MB), 06:49

  *   11 React-Router-Error处理.mp4 (12.94 MB), 04:39

  *   12 React-Router-面包屑功能.mp4 (20.07 MB), 07:37