React CapstoneReact Capstone
对应 react-notes-app 这个真实项目：Q1 是一个 Notes Manager 的增删改（CRUD），Q2 是一个带并发上限的异步任务调度器。从「组件是什么」讲到能在空文件夹里重建整个项目。Built on the real react-notes-app project: Q1 is a Notes Manager that adds, deletes and edits notes (CRUD), and Q2 is an async task runner that limits how many tasks run at the same time. It starts at what a component is and ends with rebuilding the whole project in an empty folder.
Q1 考的是 React 的数据流基本功：state 放在哪、怎么不可变更新、受控输入、useEffect 同步、列表 key、派生数据。Q2 完全不涉及 React，考的是 Promise 语义和并发控制。两道题共同的隐性考点是「能不能读清题」—— 「按 id」和「原位置」这两个词决定了一半的分数。Q1 tests the basics of how data moves through React: where state lives, how to update it without changing the original, controlled inputs, syncing with useEffect, list keys, and derived data. Q2 has no React in it at all; it tests what a Promise actually does and how to limit how many things run at the same time. Both questions quietly test one more skill: reading the wording closely. Two phrases in the brief decide half the score — by id, and in the original position.
react-notes-app参考项目。Vite + React 18 + TS strict + Vitest。本机实测 4 个测试全过（仓库里是完成版）Reference project. Vite + React 18 + TS strict + Vitest. All four tests pass as measured; the repo holds the finished version
react-notes-app建议先过一遍Work through 地基 · 项目与语言。如果你已经会 npm、会读 package.json，可以直接开始这一门。 first. If you already know npm and can read a package.json, start here directly.
| 真实项目里的任务Task in the real project | DrillLab 讲到哪Where DrillLab covers it | 有测试Tested |
|---|---|---|
| Q1 Task 1 · Add（提交表单，新笔记进入表格） | 完整讲解 + 填空 + L3 自写 + 从零重写 | 有Yes |
| Q1 Task 2 · Delete（按 id 移除） | 完整讲解 + 填空 + L3 自写 + Debug Lab | 有Yes |
| Q1 Task 3 · Edit（回填 / 变 Update / 原位置更新 / 退出编辑） | 完整讲解 + 数据流图 + 填空 + L3 自写 + Debug Lab | 有Yes |
| Q1 表单校验（空输入时按钮 disabled） | 派生数据那节 + L3 自写 | 有Yes |
| Q1 约束 · 不得修改 data-testid | 读题那节逐条列出 6 个 testid 及其用途 + Debug Lab | 有Yes |
| Q2 · runTasks 并发上限调度器 | 读题 + worker pool 完整推导 + 填空 + L3 自写 + 从零重写 | 无No |
| 测试怎么跑（项目没有 test script） | Foundations 的 npm scripts 那节 + 本门读题那节 | 有Yes |
| npm run build 原生失败（10 个 tsc 错误） | Foundations 读 tsc 报错那节，判定为脚手架缺陷 | 有Yes |
| useEffect 的清理函数（源项目没考，同类考试常考） | 变式题「计时器」完整讲解 + 填空 + L3 自写 + Debug Lab（DrillLab 自出） | 有Yes |
| 异步取数的 loading / error / 竞态（原始需求提到但源项目没有） | 变式题「fetch 取数」完整讲解 + 填空 + L3 自写 + Debug Lab（DrillLab 自出） | 有Yes |
| 递归组件与树形数据的不可变更新 | 变式题「递归评论树」完整讲解 + 填空 + L3 自写 + Debug Lab（DrillLab 自出） | 有Yes |
| Context：createContext / Provider / useContext 与 value 记忆化 | 变式题「主题切换」完整讲解 + 填空 + L3 自写 + Debug Lab（DrillLab 自出） | 有Yes |
组件、props、state、事件、渲染。每一条都用 react-notes-app 里真实的组件当例子，不用虚构的 Counter。Components, props, state, events, rendering. Every example is a real component from react-notes-app, never an invented Counter.
把 NoteForm 从头到尾读懂 —— 它一个文件里就用到了受控输入、useEffect 同步、派生数据和表单提交四件事。Read NoteForm from top to bottom. That one file already does four things: controlled inputs, syncing with useEffect, derived data, and form submission.
严格对应 react-notes-app README 的三个 Task。每一题都走同一套流程：读懂题 → 考什么 → 先想再写 → 分步实现 → 完整答案 → 为什么成立 → 常见错法 → 迁移。Follows the three tasks in the react-notes-app README exactly. Every task takes the same route: read the wording → see what is being tested → think before you type → build it step by step → read the full answer → understand why it works → look at the common mistakes → apply the same shape elsewhere.
react-notes-app 的第二道题，和 React 完全无关。纯 TypeScript + 异步。考的是「你能不能自己实现一个 Promise.allSettled 加节流」。The second question in react-notes-app, with no React in it at all. Pure TypeScript and async work. It asks whether you can write your own Promise.allSettled that also caps how many tasks are running at the same time.
TodoList、计时器、fetch 取数、递归评论树、主题切换（Context）。第一道是 Q1 的变式，后四道补的是源项目里没有但同类考试常考的东西：useEffect 清理函数、异步三态与竞态、递归组件与树形不可变更新、Context 与 value 记忆化。五道题的参考答案与测试都在本机跑过（36 / 36）。A TodoList, a timer, fetching data, a recursive comment tree, and theme switching with Context. The first is a variation on Q1. The other four cover what the source project does not have but exams like this often ask for: the useEffect cleanup function, the three states of an async request and the race between two of them, components that render themselves and updating tree data without changing the original, and Context with its value wrapped in useMemo. Every reference answer and test here was run on a real machine (36 / 36).
把前面的错误集中练一遍，然后在没有答案的情况下从空文件重建整个 Q1 和 Q2。这一模块是「会看」和「会做」的分界线。Practise all the earlier mistakes in one place, then rebuild the whole of Q1 and Q2 from empty files with no answer to look at. This module is the line between being able to follow along and being able to do it yourself.
IT 支持工单看板。可以新建工单（标题 + 优先级）、关闭工单、改派（编辑）工单，还能按优先级筛选。业务场景换了，数据结构多了一个枚举字段和一个筛选状态，但底层要你会的东西和 Notes Manager 一模一样。