302

解决什么问题

这门课专门解决从“写页面”到“交付项目”之间的断层。很多初学者能写出静态页面，但面对设计稿时不知道怎么拆组件、状态放哪里、数据怎么流转，更缺乏测试、Mock、接口对接和部署上线的完整经验。本课程以“在线账本”为唯一实战项目，用 React 理念贯穿始终，把设计图到线上产品的全过程拆成可操作的步骤：组件拆分与组合、状态与数据流分析、单元测试、页面整合、搭建 Mock Server、对接后端接口、前后端分离协作、最终部署。它不追求炫技，而是训练你按企业级流程思考问题，避免“代码跑通就完事”的业余习惯。

适合什么基础

你需要已经掌握 React 基础语法，包括函数组件、Hooks（useState/useEffect）、基本路由概念，能独立写出简单交互页面。对 CSS 布局有基本了解，知道 class 和样式优先级。不需要懂后端语言，但应了解 HTTP 请求、JSON 数据格式、前后端分离的基本概念。如果你从未写过 React 组件，建议先补基础再进这门课，否则在项目初期容易卡在语法而非思路上。课程节奏偏实战，假设你有过至少一个完整小项目的经验，哪怕只是教程跟写的。

建议先看哪几块，学完能独立做什么

优先精读“组件拆分与组合”和“状态与数据流分析”两章，这是整个项目的骨架，决定了后续所有环节是否顺畅。接着重点跟做“组件测试”和“Mock Server 搭建”部分，这两块是多数初学者最薄弱、也最直接影响工作效率的环节。最后再看“对接后端接口”和“部署上线”，此时你已经有了前端完整能力，前后端对接只是流程衔接。学完并能独立完成这些步骤后，你应当具备以下能力：拿到一份中等复杂度的设计稿，能自主完成组件树设计、状态管理方案、单元测试编写；能独立搭建本地 Mock 环境模拟后端行为；能按规范对接真实 API 并完成前后端联调；能走通从本地开发到生产环境部署的全链路。这意味着你可以独立承接一个前端页面从原型到上线的完整交付，不再依赖他人补测试或配部署。

资料怎么配合练习

课程的核心价值在“做”而非“看”。建议把“在线账本”项目代码在本地完整跑通一遍，每个章节对应的项目阶段都要亲手敲，不要只看视频或文档。组件测试部分要自己写至少三个用例再对照课程示例；Mock Server 搭建时尝试改字段、加接口，理解它如何模拟真实后端。部署环节建议先在本地用静态服务器模拟，再走正式流程，熟悉每一步报错。资料包里的项目代码是基准答案，你的练习应该是“先自己写，再对比”，而不是直接拷贝。如果某一步卡住超过二十分钟，回到对应章节的讲解部分重看思路，再动手。整个课程的价值密度不在信息量，而在你是否真的把每个环节过了一遍手。