这门课解决什么工作场景
日常前端开发里，最折腾人的往往不是写静态页面，而是把零散的界面拼成一个能跑通业务流程的系统。状态乱飞、组件层级太深传参费劲、表单和列表联动总出岔子，这些痛点在做后台管理系统、数据看板这类内部工具时尤其明显。这套资料围绕 React 加上 Redux、Hooks、Context 和 Router 展开，对应的正是这类需要集中管理状态、拆分复杂交互的场景。它不教怎么画漂亮样式，而是帮你理清数据怎么流、组件怎么拆、路由怎么切，让你做出来的页面不只是静态稿，而是能独立跑起来的前端模块。
适合什么基础以及建议先看哪几块
从资料结构看，这套内容对刚摸过 React 不久的人比较友好，开头有环境配置、创建组件、state 状态和 DOM 事件这些零基础入门环节。如果你 JavaScript 基本语法熟、能看懂 ES6 的箭头函数和解构，跟起来不会太吃力；要是连原生 JS 的事件循环和闭包都发虚，建议先补基础再来看。建议先把“零基础入门”里关于组件创建和 state 的几节过一遍，重点抠 this 指向和表单处理，因为后续 Redux 和 Hooks 的写法都建立在这些概念上。接着直接跳到 Hooks 和 Context 部分，搞清楚 useState、useEffect 怎么替代类组件的繁琐写法，再用 Context 理解跨层传参的思路，最后带着 Redux 做状态管理的整合练习。
学完能独立做什么以及资料怎么配合练习
学完后，你应该能独立搭起一个带路由切换的小型单页应用，比如一个带登录鉴权、列表筛选、表单提交和详情页的后台管理雏形。碰到多组件共享数据的需求，能判断什么时候用 Context 轻量搞定，什么时候得上 Redux 做规范管理，而不是一上来就乱套状态库。资料配合练习的窍门是：别光看视频跟着抄代码，每学完一个知识点就暂停，自己试着改改数据结构或者加个交互。比如讲到表单那节，就照着思路自己写个带校验的输入框；讲到 Redux 时，把之前的本地状态挪到 store 里再跑一遍。这套资料里项目实战部分是重点，建议先把入门基础打扎实，再跟着项目从头到尾敲一遍，遇到卡壳的回看对应知识点，这样比一气呵成刷完视频有效得多。
掌握react+redux+hooks+context+router等知识内容
课程目录
* 01 课程介绍&项目效果预览/
* 01 课程介绍&项目效果预览.mp4 15:31
* 02 React零基础入门（一）/
* 01 React零基础入门—课程介绍&工作原理.mp4 14:26
* 02 React零基础入门—环境配置.mp4 06:25
* 03 React零基础入门—创建组件.mp4 21:48
* 04 React零基础入门—state状态.mp4 13:06
* 05 React零基础入门—React-Dev-Tool.mp4 08:56
* 06 React零基础入门—this关键词.mp4 09:06
* 07 React零基础入门—DOM事件.mp4 16:09
* 08 React零基础入门—form表单.mp4 11:43
* 03 React零基础入门（二）/
* 01 React零基础入门—create-react-app.mp4 11:15
* 02 React零基础入门—单页面应用.mp4 17:32
* 03 React零基础入门—组件嵌套.mp4 11:31
* 04 React零基础入门—props属性传值.mp4 08:41
* 05 React零基础入门—列表渲染.mp4 15:05
* 06 React零基础入门—无状态组件.mp4 10:40
* 07 React零基础入门—数据逻辑处理.mp4 10:53
* 08 React零基础入门—添加表单数据.mp4 16:02
* 09 React零基础入门—props传递函数.mp4 16:23
* 10 React零基础入门—删除数据.mp4 14:56
* 04 React零基础入门（三）/
* 01 React零基础入门—回顾&虚拟DOM.mp4 09:23
* 02 React零基础入门—引入CSS文件.mp4 06:56
* 03 React零基础入门—生命周期.mp4 13:24
* 04 React零基础入门—Todo实战练习（一）.mp4 24:07
* 05 React零基础入门—Todo实战练习（二）.mp4 15:28
* 06 React零基础入门—react路由.mp4 24:14
* 07 React零基础入门—Link&NavLink.mp4 04:55
* 08 React零基础入门—重定向.mp4 13:11
* 09 React零基础入门—高阶组件.mp4 10:59
* 05 React零基础入门（四）/
* 01 React零基础入门—axios.mp4 17:58
* 02 React零基础入门—路由参数（一）.mp4 16:26
* 03 React零基础入门—路由参数（二）.mp4 14:27
* 04 React零基础入门—图片导入.mp4 05:40
* 05 React零基础入门—switch.mp4 05:29
* 06 Redux零基础入门/
* 01 Redux零基础入门—初识redux.mp4 08:08
* 02 Redux零基础入门—store.mp4 07:25
* 03 Redux零基础入门—action.mp4 05:23
* 04 Redux零基础入门—reducer.mp4 04:43
* 05 Redux零基础入门—订阅store.mp4 14:06
* 06 Redux零基础入门—react-redux.mp4 11:19
* 07 Redux零基础入门—mapStateToProps.mp4 10:38
* 08 Redux零基础入门—完善博客页面.mp4 11:49
* 09 Redux零基础入门—mapDispatchToProps.mp4 18:47
* 10 Redux零基础入门—action生成器.mp4 06:37
* 07 Context-API零基础入门/
* 01 ContextAPI零基础入门—初始化app.mp4 13:21
* 02 ContextAPI零基础入门—初始Context.mp4 11:24
* 03 ContextAPI零基础入门—创建context.mp4 18:00
* 04 ContextAPI零基础入门—contextType.mp4 17:20
* 05 ContextAPI零基础入门—consumer.mp4 07:34
* 06 ContextAPI零基础入门—更新上下文数据.mp4 12:16
* 07 ContextAPI零基础入门—创建多个上下文.mp4 10:13
* 08 ContextAPI零基础入门—获取多个上下文.mp4 10:58
* 08 ReactHooks零基础入门（一）/
* 01 ReactHooks零基础入门—初识hooks.mp4 12:56
* 02 ReactHooks零基础入门—useState.mp4 18:53
* 03 ReactHooks零基础入门—useState应用.mp4 17:30
* 04 ReactHooks零基础入门—useEffect.mp4 13:17
* 05 ReactHooks零基础入门—useContext.mp4 08:41
* 06 ReactHooks零基础入门—获取多个上下文.mp4 09:10
* 07 ReactHooks零基础入门—函数组件上下文.mp4 11:39
* 09 ReactHooks零基础入门（二）/
* 01 ReactHooks零基础入门—阅读列表实战（一）.mp4 20:12
* 02 ReactHooks零基础入门—阅读列表实战（二）.mp4 15:37
* 03 ReactHooks零基础入门—阅读列表实战（三）.mp4 12:27
* 04 ReactHooks零基础入门—useReducer.mp4 17:54
* 05 ReactHooks零基础入门—useReducer应用.mp4 24:23
* 06 ReactHooks零基础入门—本地存储.mp4 24:15
* 10 React实战项目—颜色生成器/
* 01 React颜色生成器—values.js获取颜色.mp4 15:26
* 02 React颜色生成器—项目介绍.mp4 08:21
* 03 React颜色生成器—渲染颜色组件.mp4 22:05
* 11 React实战项目—美食美客菜单/
* 01 React美食美客菜单—项目介绍.mp4 02:52
* 02 React美食美客菜单—初始化App.mp4 16:01
* 03 React美食美客菜单—分类按钮.mp4 20:07
* 12 React实战项目—旅游目的地/
* 01 React旅游目的地—项目介绍.mp4 02:23
* 02 React旅游目的地—初始化App.mp4 15:07
* 03 React旅游目的地—创建UI组件.mp4 08:30
* 04 React旅游目的地—实现页面功能.mp4 19:21
* 13 React实战项目—幻灯片/
* 01 React幻灯片—初始化App&UI组件.mp4 20:03
* 02 React幻灯片—点击切换&自动播放.mp4 21:32
* 14 React实战项目—记账器/
* 01 React记账器—创建UI组件.mp4 19:48
* 02 React记账器—创建全局Context.mp4 26:15
* 03 React记账器—获取context&删除数据.mp4 18:10
* 04 React记账器—获取form表单数据&添加交易.mp4 14:36
* 15 React实战项目—分页导航/
* 01 React分页导航—获取数据&UI组件.mp4 32:07
* 02 React分页导航—实现分页导航功能.mp4 23:43
* 16 React实战项目—贪吃蛇/
* 01 React贪吃蛇—创建UI组件.mp4 30:33
* 02 React贪吃蛇—移动贪吃蛇.mp4 28:05
* 03 React贪吃蛇—设置边界&游戏结束.mp4 15:08
* 04 React贪吃蛇—吃到食物.mp4 10:03
* 17 React实战项目—新冠疫情追踪器/
* 01 React疫情追踪器—项目介绍.mp4 04:44
* 02 React疫情追踪器—初始化App.mp4 22:41
* 03 React疫情追踪器—卡片组件.mp4 37:01
* 04 React疫情追踪器—创建折线图.mp4 22:58
* 05 React疫情追踪器—获取国家或地区数据.mp4 33:07
* 06 React疫情追踪器—创建柱状图.mp4 18:18
* 18 React实战项目—文件上传/
* 01 React文件上传—初始化App.mp4 32:21
* 02 React文件上传—上传组件.mp4 24:17
* 03 React文件上传—提示框&进度条.mp4 16:12
* 19 React实战项目—猜单词/
* 01 React猜单词—初始化App.mp4 16:04
* 02 React猜单词—创建单词组件.mp4 32:09
* 03 React猜单词—弹出框&提示框.mp4 43:04
* 20 React实战项目—购物车/
* 01 React购物车—项目介绍&UI组件渲染.mp4 39:19
* 02 React购物车—useReduce.mp4 12:43
* 03 React购物车—删除&增减商品.mp4 15:38
* 04 React购物车—获取总价和总量.mp4 18:28
* 21 更新-react-router-v6版本快速学习/
* 01 更新-react-router-v6-项目介绍及版本升级.mp4 16:13
* 02 更新-react-router-v6-路由组件的变化.mp4 09:59
* 03 更新-react-router-v6-重定向和导航的变化.mp4 11:13
* 04 更新-react-router-v6-嵌套路由的变化.mp4 12:07
