第1章 课程介绍
1-1 课程导读 (16:11)
第2章 设计稿：从蓝图开始
2-1 从分析设计稿开始 (07:43)
2-2 文件代码结构 (10:22)
第3章 首页：庖丁解牛
3-1 拆分静态组件 (06:31)
3-2 第一个展示型组件 – 价格列表 (27:48)
3-3 为项目选择图标库 (10:42)
3-4 PropTypes 属性检查 (06:59)
3-5 切换Tab组件 (12:47)
3-6 动手实战
3-7 月份选择组件 – 需求分析 (04:01)
3-8 月份选择组件开发 – 编码第一部分 (19:29)
3-9 月份选择组件 编码第二部分 (10:52)
第4章 首页：乐高积木
4-1 组合所有静态型组件 (14:51)
4-2 分析设计 State 结构 (10:18)
4-3 分析数据流 (05:19)
4-4 添加逻辑交互代码及总结 (15:35)
第5章 组件测试
5-1 为什么要有测试 (07:19)
5-2 通用框架 Jest 简介 (10:17)
5-3 React 测试工具简介 (14:15)
5-4 价格题目列表测试分析和编写 (21:22)
5-5 月份选择器添加测试 (19:37)
5-6 月份选择器进阶测试 (14:23)
5-7 首页单元测试分析和编写 (17:56)
第6章 创建记账条目页面
6-1 创建页面需求分析和组件拆分 (06:29)
6-2 React-Router 简介 (07:29)
6-3 React-Router 代码部分 (10:41)
6-4 TDD 的方式开发分类选择组件 (18:51)
6-5 PriceForm 组件编写的指导思想 (10:55)
6-6 动手实战
6-7 使用 children 重构 Tabs 组件 (19:08)
6-8 扩展作业 – 轮播图组件设计
6-9 创建页面组合展示型组件 (07:49)
第7章 多页面结合
7-1 分析和优化整个应用的state 结构 (08:41)
7-2 Redux 和 Context 的解决方案 (11:50)
7-3 添加 Context (11:27)
7-4 使用高阶组件实现 Context 重用 (12:21)
7-5 扩展作业
7-6 整合两个页面的逻辑和交互— 首页和创建页 (22:55)
7-7 整合两个页面的逻辑和交互 二 – 编辑页面 (15:14)
7-8 阶段性总结 (07:26)
7-9 扩展作业 – 应用状态分析与设计
第8章 后端 Mock 环境
8-1 前后端分离开发概念 (07:42)
8-2 使用 json-server 打造 mock server (08:16)
8-3 分析和创建 Restful 接口 (06:31)
8-4 使用 Postman 测试 API (12:39)
第9章 动静结合
9-1 下一代的 HTTP 库：Axios_x264 (09:38)
9-2 学习 axios 的简单用法 (13:54)
9-3 改造首页支持异步流程 (15:30)
9-4 使用 async 改造异步流程 (15:01)
9-5 改造创建条目页和编辑页 (25:06)
9-6 优化异步请求 (13:22)
9-7 容器型组件测试策略和介绍 (07:07)
9-8 创建编辑页面测试编写 (22:12)
9-9 动手实践
第10章 锦上添花：图表分析页面
10-1 Recharts 简介 (05:44)
10-2 使用 Recharts 完成简单示例 (15:57)
10-3 算法问题：计算必要的数据结构 (11:23)
10-4 集成 Recharts 到项目中 (11:40)
10-5 测试的三层模型 (07:14)
10-6 App.js 主入口文件测试编码 (21:38)
第11章 项目部署
11-1 开发环境和生产环境的异同 (07:27)
11-2 为生产环境 build 代码 (10:05)
11-3 服务器的不同类型 (09:49)
11-4 本地完成应用部署 (19:07)
11-5 使用 Leancloud 进行部署 (14:54)
第12章 课程总结
12-1 课程总结 (09:25)
人工精选React16组件化+测试+全流程实战“在线账本”项目
这门课解决的是什么问题 很多人写 React 卡在同一个地方：单个组件的语法都懂，但拿到一张设计稿，不知道从哪儿下手拆，拆完怎么组织文件，组件之间怎么传值和复用。这门课用一个记账类小项目把这条链路走了一遍——从看设计稿画蓝图，到把首页拆成一个个静态组件，再到加上交互、路由和测试。它不追求功能多，重点
会员 A · 按档位折扣
会员 B
游客按标价购买，不享受上表折扣。
支付成功后自动发放网盘链接，链接失效可找客服免费补
这门课解决的是什么问题
很多人写 React 卡在同一个地方：单个组件的语法都懂，但拿到一张设计稿，不知道从哪儿下手拆，拆完怎么组织文件，组件之间怎么传值和复用。这门课用一个记账类小项目把这条链路走了一遍——从看设计稿画蓝图，到把首页拆成一个个静态组件，再到加上交互、路由和测试。它不追求功能多，重点在“一个页面到底该怎么拆、怎么拼”。
另一个它确实覆盖的点是测试。React 项目里组件测试往往被跳过，这门课把组件测试单独放进流程，配合前面的组件拆分来讲，适合那些写过一些业务代码、但没正经写过测试的人补上这一环。
适合什么基础，先看哪几块
前提是已经会 JavaScript 基础语法，知道 React 的 JSX、props、state 大概是怎么回事。完全没碰过 React 的话，直接跟会有点吃力，建议先补一遍官方文档的入门部分再回来。
按目录推进的话，第2章的文件代码结构值得先看，它决定了后面所有组件往哪放，很多人项目越写越乱就是这一步没想清楚。第3章是整门课密度最高的部分，从拆分静态组件到第一个展示型组件，再到属性检查和切换 Tab，基本把“组件化”这三个字落到了具体操作上。第3章里那个价格列表的篇幅最长，说明它是重点，建议跟着手敲一遍，不要只看。月份选择那块涉及状态管理和组件通信，是理解父子组件配合的好例子。测试部分不要留到最后突击，跟着组件一起写，效果比攒着强。
学完能独立做什么，资料怎么用
学完之后，比较实际的预期是：能独立把一个中等复杂度的页面按组件拆开，分清哪些是展示型组件、哪些要管状态，能用 PropTypes 做属性约束，能写基本的组件测试，也能把多个页面用路由串起来。这些放在日常业务开发里是够用的。
资料配合练习的方式建议是：每看完一节先别急着往下，把当节的组件自己写一遍，再对照讲解调整。设计稿分析那节可以自己先试着拆一遍，带着自己的方案去看讲解，差距会很明显。测试部分建议单独建一个练习分支，把课上写过的组件重新补一遍测试，比单纯看视频记得牢。整个项目做完后，可以试着把记账条目换成自己熟悉的数据类型，比如读书笔记或开销分类，改一遍能检验是不是真的理解了组件之间的数据流向。
需要提醒的是，这门课用的是 React16 的写法，class 组件和生命周期出现得比较多。如果你现在主要写函数组件和 hooks，看的时候要自己做个转换，把它当成理解组件化思路的材料，而不是照搬代码风格。
课程介绍
本页收录 React16组件化+测试+全流程实战“在线账本”项目，方向为体系课，重点涉及 React、测试。
内容涵盖：设计稿 从蓝图开始、首页 庖丁解牛、首页 乐高积木、组件测试、创建记账条目页面、多页面结合 等主题。
适合正在补 React、测试 相关知识、想按目录逐步推进的学习者。
下方为完整资料与目录，可先看目录判断是否符合需要。
课程目录
第1章 课程介绍 第2章 设计稿：从蓝图开始 第3章 首页：庖丁解牛 第4章 首页：乐高积木 第5章 组件测试 第6章 创建记账条目页面 第7章 多页面结合 第8章 后端 Mock 环境 第9章 动静结合 第10章 锦上添花：图表分析页面 第11章 项目部署 第12章 课程总结
同类课程
和你正在看的这门一个方向
体系课AI大模型开发2026线下版V7.5
永久有效 · 网盘发货
体系课小滴课堂新一代AI全栈工程师-微服务AI智能面试对话平台
永久有效 · 网盘发货
体系课QCon 北京 2026 （4 月）
永久有效 · 网盘发货
体系课AI+全能测试工程师
永久有效 · 网盘发货
体系课小滴课堂中间件项目大课-自动化云测平台/Spingboot3.X/微服务/Kafka3.x
永久有效 · 网盘发货
体系课图灵工控一期：上位机+AI
永久有效 · 网盘发货