这门课解决什么问题

很多开发者学完 React 后，写小型演示项目很流畅，但一旦业务逻辑变复杂，状态管理就失控了。组件之间层层传递 props 成为痛苦之源，异步操作处理得杂乱无章，前后端联调时更不知道数据从哪里来、到哪里去。Redux 解决了全局状态管理的问题，React Router 解决了多页面导航的问题，但单独学习这两个库时，往往不知道如何把它们有机结合起来，更不知道后端该如何配合前端做数据接口。这门课针对的就是这个痛点——它不仅教你 Redux 和 React Router 的单独用法，更关键的是教你如何在同一个项目中把两者串联起来，并接入 Node.js 作为后端服务，使用 MongoDB 存储数据。学完后，你面对的不只是一个能跑的 demo，而是一个结构清晰、可维护的真实全栈应用雏形。

适合什么基础与学习建议

这门课有一定门槛。你需要对 React 有基本认知：理解组件的概念、知道 props 和 state 的区别、会用函数组件和基本的 hooks。ES6 语法也必须熟练掌握，特别是箭头函数、解构赋值、模块化 import/export 这些日常开发中离不开的内容。课程第2章专门安排了 ES6 复习和 Express、MongoDB 的基础介绍，但这部分内容节奏较快，如果你完全没有后端概念，可能需要额外花时间消化。建议先完整看完导学视频，建立对整个课程框架的认知。然后重点复习第3章的 React 基础回顾，特别是组件传值、state 管理和生命周期这几节，这是后续学习 Redux 的基石。进入第4章后，按照顺序逐节推进，Redux 的核心概念是环环相扣的，跳过任何一节都可能导致后面的内容理解困难。调试工具的章节不要跳过，它是你后期排查问题的核心武器。

学完能做什么与资料用法

课程结束后，你应该能够独立完成一个前后端分离的全栈项目：前端用 React 搭建界面，用 Redux 管理应用状态，用 React Router 实现多页面路由切换；后端用 Node.js 和 Express 编写 RESTful API，用 MongoDB 持久化数据。你不再需要依赖别人的代码框架，而是清楚知道每个技术栈在项目中的角色，以及它们之间如何协作。当出现 bug 时，你也能熟练使用 Redux DevTools 等调试工具定位问题所在。关于资料的使用，课程配套的项目代码是重要的学习资源，但千万不要直接复制粘贴。正确的做法是：看完每一节视频后，自己从零开始手写一遍代码，遇到困难再对照资料查找差异。在复现的基础上，尝试修改一个小功能或换一个业务场景，这样才能真正内化知识。资料包里的代码是参考答案，不是替代品，只有通过自己的思考和实践，才能把别人教的知识变成自己的能力。

课程目录

第1章 介绍课程目标和学习内容 试看 1 节 | 11分钟 1-1 课程导学 (10:39).mp4
 第2章 知识储备 4 节 | 66分钟 2-1 介绍React开发环境 (12:55).mp4
 2-2 ES6常用语法 (25:54).mp4
 2-3 express+mongodb基础 (07:58).mp4
 2-4 express+mongodb基础 (18:21).mp4
 第3章 React基础知识回顾 7 节 | 36分钟 3-1 React基础知识回顾1-入门例子 (07:53).mp4
 3-2 React基础知识回顾2-组件之间传递数据 (03:00).mp4
 3-3 React基础知识回顾3-组件内部 state (03:24).mp4
 3-4 React基础知识回顾4-事件 (04:54).mp4
 3-5 React基础知识回顾5-React生命周期 (03:40).mp4
 3-6 React基础知识回顾6-安装 CHROME 扩展 (01:35).mp4
 3-7 antd-mobile 组件使用 (11:07).mp4
 第4章 Redux状态管理与React-router 试看 

12 节 | 106分钟 4-1 Redux状态管理1-结合小例子看 Redux 是什么？ (10:37).mp4
 4-2 Redux状态管理2-Redux 如何和 React 一起用 (10:11).mp4
 4-3 Redux状态管理3-优化-组件解耦 (03:56).mp4
 4-4 Redux状态管理4-更进一步，让 Redux 可以处理异步 (07:49).mp4
 4-5 Redux状态管理5-Chrome 中 Redux 调式工具 (04:53).mp4
 4-6 Redux状态管理6-使用 React-redux (08:07).mp4
 4-7 Redux状态管理7-使用 React-redux（Connect 可以用装饰器的方法来书写） (05:19).mp4
 4-8 react-router4 路由 01-初识 React-router4 (08:54).mp4
 4-9 react-router4 路由 02-React-router4 其他组件 (10:27).mp4
 4-10 react-router4 路由 03-和 Redux 配合-复杂 Redux 应用1 (12:38).mp4
 4-11 react-router4 路由 04-和 Redux 配合-复杂 Redux 应用2 (17:25).mp4
 4-12 react-router4 路由 05-和 Redux 配合-补充 (04:51).mp4
 第5章 需求分析 3 节 | 26分钟 5-1 需求分析 (04:32).mp4
 5-2 前后端联调1 (13:42).mp4
 5-3 前后端联调2 (06:56).mp4
 第6章 登录注册 

12 节 | 125分钟 6-1 登录注册-课程内容介绍 (05:12).mp4
 6-2 登录注册-登录注册页面实现 (24:34).mp4
 6-3 登录注册-判断路由 (10:56).mp4
 6-4 登录注册-用户信息校验，跳转登录 (05:46).mp4
 6-5 登录注册-注册交互实现 (05:35).mp4
 6-6 登录注册-注册请求发送 (15:49).mp4
 6-7 登录注册-数据库模型建立 (07:16).mp4
 6-8 登录注册-express注册功能实现 (04:50).mp4
 6-9 登录注册-注册前后端联调 (01:40).mp4
 6-

10 登录注册-注册跳转+密码加密实现 (14:08).mp4
 6-

11 登录注册-登录注册实现 (12:53).mp4
 6-

12 登录注册-cookie保存登录状态 (16:17).mp4
 第7章 完善信息 3 节 | 54分钟 7-1 完善信息-boss信息完善页面 (26:14).mp4
 7-2 完善信息-boss 信息完善页面后端 (14:18).mp4
 7-3 完善信息-牛人信息完善和组件属性类型检测 (12:55).mp4
 第8章 牛人列表和BOSS列表 4 节 | 56分钟 8-1 牛人列表-应用骨架 (07:17).mp4
 8-2 牛人列表-导航和跳转 (23:41).mp4
 8-3 牛人列表-牛人列表 (16:11).mp4
 8-4 牛人列表-使用 redux 管理牛人列表 (08:19).mp4
 第9章 个人中心 8 节 | 71分钟 9-1 boss列表和组件优化 (10:55).mp4
 9-2 个人中心信息展示1 (06:39).mp4
 9-3 个人中心信息展示2 (12:44).mp4
 9-4 清除cookie登录状态 (10:52).mp4
 9-5 注销时清空redux数据 (07:46).mp4
 9-6 使用高级组件完善登录流程--概念理解-函数式编程 (04:47).mp4
 9-7 简单的高阶组件demo (05:46).mp4
 9-8 使用imoocFrom高阶组件优化代码 (10:27).mp4
 第10章 聊天详情 

10 节 | 116分钟 10-1 socket.io简介 (14:01).mp4
 10-2 socket.io前后端联通 (04:29).mp4
 10-3 前后端实时显示消息 (10:59).mp4
 10-4 聊天页面redux链接 (16:29).mp4
 10-5 聊天功能实现-上 (11:58).mp4
 10-6 聊天功能实现-下 (12:56).mp4
 10-7 聊天未读消息数实时展示 (05:38).mp4
 10-8 聊天头像显示 (14:42).mp4
 10-9 修正未读消息数量 (11:50).mp4
 10-

10 发送emoji表情 (12:37).mp4
 第11章 聊天列表 4 节 | 33分钟 11-1 聊天信息根据用户分组 (06:12).mp4
 11-2 聊天列表展示 (14:37).mp4
 11-3 显示未读消息数 (03:56).mp4
 11-4 最新消息排序 (07:53).mp4
 第12章 构建自己的 redux 

12 节 | 148分钟 12-1 消息未读数量更新1 (23:37).mp4
 12-2 消息维度数量更新2 (01:58).mp4
 12-3 React进阶 (26:55).mp4
 12-4 迷你redux实现 (08:22).mp4
 12-5 context简介1 (11:59).mp4
 12-6 react-redux实现1 (11:16).mp4
 12-7 react-redux实现2 (05:48).mp4
 12-8 迷你react-redux实现 (27:11).mp4
 12-9 中间件机制的实现 (13:55).mp4
 12-

10 多个中间件合并 (07:25).mp4
 12-

11 定制中间件arrThunk (02:51).mp4
 12-

12 总结redux+react-redux代码 (06:35).mp4
 第13章 代码优化和进阶 6 节 | 75分钟 13-1 单组件 (14:30).mp4
 13-2 定制shouldComponentUpdae (15:16).mp4
 13-3 immutablejs存在的意义和使用 (22:19).mp4
 13-4 reselect优化redux选择器 (06:10).mp4
 13-5 遍历数组的key (05:03).mp4
 13-6 服务端渲染ssr介绍 (11:00).mp4
 第14章 项目总结，回顾和展望 

13 节 | 107分钟 14-1 eslint代码规范 (12:47).mp4
 14-2 async+await优化异步代码 (05:32).mp4
 14-3 使用Ant motion做React动画解决方案 (15:33).mp4
 14-4 打包编译 (13:00).mp4
 14-5 使用babel-node在后端支持jsx环境 (06:47).mp4
 14-6 服务端渲染renderToString用法 (04:27).mp4
 14-7 客户端代码改造 (11:08).mp4
 14-8 服务端SSR代码改造 (14:23).mp4
 14-9 小问题修复 (02:30).mp4
 14-10 React16新特性及错误处理1 (08:22).mp4
 14-11 React16错误处理2 (03:16).mp4
 14-12 React16服务端渲染新Api (04:25).mp4
 14-

13 课程总结 (04:11).mp4