从零完整学习Complete DrillLab
从「npm install 做了什么」走到在空文件夹里重写三个项目，并把 105 道八股过一遍。From what npm install actually does, to rebuilding three projects in an empty folder, with all 105 questions covered.
刚开始接触 npm、React、GraphQL，想要一条完整的路。New to npm, React and GraphQL, and wanting one complete route.
这条计划的全程The whole route
学Learn
地基：一个项目是怎么跑起来的Foundations: how a project actually runs
你在这You are here后面每一门课都假设你会 npm、会读 package.json、会不改原数组地更新数据。这一门就是补这些。Every later course assumes you know npm, can read a package.json, and can update data without mutating it. This course is where that comes from.
- Node.js、npm、node_modules 和 lockfileNode.js, npm, node_modules and the lockfile
- package.json 逐字段读一遍package.json, field by field
- npm scripts：命令到底跑了什么npm scripts: what the command actually runs
看这一档全部 9 条View all 9 items
- Node.js、npm、node_modules 和 lockfileNode.js, npm, node_modules and the lockfile
- package.json 逐字段读一遍package.json, field by field
- npm scripts：命令到底跑了什么npm scripts: what the command actually runs
- 两个考试项目的目录，逐个说明The directory layout of both exam projects
- 数组与对象：不可变更新三件套Arrays and objects: three ways to update without changing the original
- 异步：Promise、await、all 和 allSettledAsync: Promise, await, all and allSettled
- ESM:import / export 与那些莫名其妙的报错ESM: import / export, and the errors that look strange at first
- 类型、type 与 interfaceTypes, type and interface
- 泛型参数，以及怎么读 tsc 的报错Generic parameters, and how to read a tsc error
练Practice
地基的课内练习The Foundations exercises
学Learn
React 考试：课文React exam: the lessons
21 节，从「组件是一个函数」讲到 Q1 的三个任务和 Q2 的并发上限。21 lessons, from a component being a function to Q1's three tasks and Q2's concurrency limit.
- 组件就是一个返回界面的函数A component is a function that returns what you see on screen
- props：数据往下流，事件往上报props: data flows down, events go back up
- useState：让界面跟着数据变useState: making the screen follow the data
- 受控输入：value + onChange 的闭环Controlled inputs: the loop between value and onChange
- 列表渲染与 keyRendering a list, and the key prop
- useEffect：把 props 的变化同步进 stateuseEffect: copying a change in props into state
- 派生数据与状态提升：什么不该做成 stateValues you can compute, and lifting state up: what should not be state
- 先读题：三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests
- Task 1 · Add：提交表单，新笔记进入表格Task 1 · Add: submit the form and the new note appears in the table
- Task 2 · Delete：点 Delete，该行按 id 被移除Task 2 · Delete: click Delete and that one row is removed by id
- Task 3 · Edit：回填、改文字、就地更新、退出编辑Task 3 · Edit: refill the form, change the button text, update the row where it is, leave edit mode
- 四个测试逐条读，以及它们的盲区The four tests read line by line, and what they fail to catch
- 读题：三条要求，每一条都在指定一种写法Reading the question: three requirements, and each one decides how you write it
- 实现：worker pool（工人池）Building it: a worker pool, meaning a fixed number of workers sharing one queue
- 变式一 · Todo ListVariation 1 · Todo List
- 变式二 · 计时器：useEffect 的清理函数Variation 2 · a timer: the useEffect cleanup function
- 变式三 · fetch 取数：loading、error 与竞态Variation 3 · fetching data: loading, error, and the race between two requests
- 变式四 · 递归读取评论的评论Variation 4 · reading replies to replies with recursion
- 变式五 · 主题切换：Context 怎么用Variation 5 · theme switching: how to use Context
- Debug Lab · React 十种典型故障Debug Lab · ten typical React failures
- 从零重写：空文件夹到 4 个测试全过Write it again yourself: from an empty folder to 4 passing tests
练Practice
React 的课内练习The React exercises
写Code
React 的 Coding 题The React coding problems
文件、依赖、测试都给好了，红变绿才算过。其中大部分能直接在浏览器里跑。Files, dependencies and tests are handed to you; red to green is the bar. Most of them run right in the browser.
- Todo List
- 计时器（useEffect 清理函数）Timer (useEffect cleanup)
- fetch 取数：loading、error 与竞态Fetching data: loading, error and race conditions
- 递归评论树 + 树形不可变更新Recursive comment tree, updated without changing the original
- 主题切换（Context + value 记忆化）Theme switch (Context plus a memoised value)
- Notes Manager 增删改（React 考试 Q1）Notes Manager: add, edit and delete (React exam Q1)
- 带并发上限的异步任务调度器（Q2）Async task scheduler with a concurrency limit (Q2)
空手做Rebuild
React：空文件夹里重写React: rebuild in an empty folder
沙箱跑绿不等于能空手做出来。这一档没有脚手架、没有提示，只有一个计时器。A green sandbox does not mean you can build it from nothing. No scaffold, no hints, just a clock.
模拟考Assess
React 模拟考The React mock exam
换了业务场景、考点不变。这是检验「你是理解了还是背下来了」最直接的办法。Same skills, a different business scenario — the most direct way to find out whether you understood it or memorised it.
学Learn
Federation 考试：课文Federation exam: the lessons
17 节，从「GraphQL 是一份 schema 加一组 resolver」讲到 entity 缝合、DataLoader 和六个 Spring 端点。17 lessons, from GraphQL being one schema plus a set of resolvers, through entities, DataLoader and the six Spring endpoints.
- GraphQL 是什么：一份 schema 加一堆 resolverWhat GraphQL is: one schema plus a set of resolvers
- resolver 的四个参数The four arguments of a resolver
- 非空、列表，和那个没有 price 的 inputNon-null, lists, and the input that has no price
- 为什么会有 FederationWhy Federation exists
- subgraph 是怎么跑起来的How a subgraph starts up
- entity、@key 与 __resolveReferenceentity, @key and __resolveReference
- N+1 问题与 DataLoaderThe N+1 problem and DataLoader
- 先读题：四个 TODO、三处埋雷、十个测试Read the task first: four TODOs, three planted bugs, ten tests
- TODO 1 · User.ordersTODO 1 · User.orders
- TODO 2 · Order.shippingInfoTODO 2 · Order.shippingInfo
- TODO 3 & 4 · Query.order 与 Query.ordersTODO 3 & 4 · Query.order and Query.orders
- 三处埋雷：怎么系统地找出来The three planted bugs: how to find them systematically
- 先看懂给你的东西：Spring 的几个注解和一条请求链路Understand what you are given: a few Spring annotations and the path one request takes
- 六个端点：状态码就是这道题的全部Six endpoints: the status codes are the whole task
- 两道书面题：延迟传播与生产配置The two written questions: how delay spreads, and production configuration
- Debug Lab · Federation 十种典型故障Debug Lab · ten common Federation failures
- 从零重写：空目录到 10 个测试全过Rewrite it: from an empty directory to all 10 tests passing
写Code
Federation 与 Spring 的 Coding 题The Federation and Spring coding problems
这两道要在本机跑：一道要真起一个 subgraph 服务，一道要 JVM 和 Maven。页面把命令和期望输出写全了。These two run locally: one needs a real subgraph process, the other a JVM and Maven. The pages spell out every command and the expected output.
空手做Rebuild
Federation：空文件夹里重写Federation: rebuild in an empty folder
自己搭 subgraph、自己配 Spring 骨架。环境本身就是考点。Build the subgraph yourself, wire the Spring skeleton yourself. Setting up the environment is part of what is being tested.
模拟考Assess
Federation 模拟考The Federation mock exam
subgraph 加 entity 缝合，考点和 Task 1 一致，题面是新的。A subgraph stitched together with an entity: the same skills as Task 1, on a new problem.
学Learn
Cab Booking：课文Cab Booking: the lessons
8 节，讲的是用 Context 管全局状态：放在哪一层、存什么、怎么改。Eight lessons on holding global state in Context: which level it goes on, what it stores, how it changes.
- 先读四个测试：它们到底要什么Read the four tests first: what exactly they ask for
- Context 放在哪一层 —— 这道题最容易死的地方Which level the Context goes on — the most common way to fail this task
- 用一个 state 管四个页面Controlling four pages with one piece of state
- 按类型分组渲染六张卡Rendering the six cards grouped by type
- Loading：一秒之后自己跳走Loading: it moves to the next page by itself after one second
- 历史与确认页：两个小而致命的细节The history and confirmation pages: two small details that decide pass or fail
- 完整答案跑不起来 —— 一个扩展名的事The complete answer does not run — the cause is one file extension
- 从零重写：空文件夹里做出来Rewrite it: build the whole app in an empty folder
练Practice
Cab Booking 的课内练习The Cab Booking exercises
写Code
Cab Booking 的 Coding 题The Cab Booking coding problem
整个应用在浏览器里写一遍，四个测试全绿。Write the whole app in the browser and take all four tests green.
空手做Rebuild
Cab Booking：空文件夹里重写Cab Booking: rebuild in an empty folder
只给四个测试和一份数据文件，其余全部自己建。You get four tests and one data file. Everything else you create yourself.
背Review
面试八股：105 道问答Interview questions: all 105
这条支线不依赖前面任何一门课，任何时候都能开始 —— 放在最后只是因为它最长。This track has no prerequisites and can start at any time. It sits last only because it is the longest.
过过一遍 0 / 105 · 其中标了「会」的 0 道。自评过一次就算过了这一档 —— 不用把每道都标成「会」才往下走。0 / 105 reviewed, 0 of them marked confident. One rating is enough to clear this stage — you do not have to reach confident on every question first.
覆盖方向：Topics covered: HTMLHTMLCSSCSSJavaScriptJavaScriptReact 与生态React & ecosystemNode / ExpressNode / Express数据库Databases网络与安全Web & securityTypeScript 深度TypeScript deep dive
105 格，一格一个真实条目 —— 鼠标停上去或用键盘走过去会读出它的标题。105 squares, one per real item — hover or tab to one and it reads out its title.
学Learn
手写题与组件题的讲解The walkthroughs for the hand-written and component problems
这 10 节课不是问答题，它们是下面那 15 道 coding 题的讲解。These ten lessons are not questions; they are the walkthroughs for the fifteen coding problems below.
- 16 道题逐题对照The 16 problems, compared one by one
- 缺口一 · Dropdown、Tabs、星级评分Gap 1 · dropdown, tabs and star rating
- 缺口二 · useRef 操作 DOM，与写一个自定义 hookGap 2 · using useRef on the DOM, and writing a custom hook
- 缺口三 · 同一个 Todo 换成 Redux ToolkitGap 3 · the same Todo app, moved to Redux Toolkit
- 缺口四 · Kanban 看板：一次改两个数组Gap 4 · a Kanban board: changing two arrays in one update
- 计时两兄弟：debounce 与 throttleTwo timing helpers: debounce and throttle
- 数据与函数：deepClone、flatten、curryData and functions: deepClone, flatten, curry
- 异步与结构：Promise.all、EventEmitter、LRUAsync and structure: Promise.all, EventEmitter, LRU
- Utility Types：会用，还要会手写Utility types: use them, and write them yourself
- 泛型与收窄：把 any 赶出代码Generics and narrowing: getting any out of the code
练Practice
面试那门课的练习The exercises in the interview course
写Code
手写题与组件题The hand-written and component problems
面试现场最常出的两类：手写工具函数，和从零搭一个受控组件。The two kinds interviews ask for most: implement a utility by hand, and build a controlled component from nothing.
- 手写 debounce（带 cancel）Write debounce yourself (with cancel)
- 手写 throttle（leading + trailing）Write throttle yourself (leading and trailing)
- 手写 deepClone（防循环）Write deepClone yourself (handling cycles)
- 手写 flatten（depth 语义对齐原生）Write flatten yourself (depth behaves like the built-in)
- 手写 curry（部分应用可复用）Write curry yourself (reusable partial application)
- 手写 Promise.all + allSettledWrite Promise.all and allSettled yourself
- 手写 EventEmitter（on/off/once/emit）Write EventEmitter yourself (on / off / once / emit)
- 手写 LRUCache（用 Map 的插入序）Write LRUCache yourself (using Map insertion order)
- Tabs 组件（只用一个 state）Tabs component (one piece of state only)
- 星级评分（hover 预览 + 受控双模式）Star rating (hover preview, controlled and uncontrolled)
- Dropdown：点外面要关掉Dropdown: close it on an outside click
- 写一个自定义 hook：useLocalStorageWrite a custom hook: useLocalStorage
- 播放器（useRef 操作 DOM）Media player (touching the DOM with useRef)
- Kanban 看板：一次改两个数组Kanban board: changing two arrays at once
- Redux Toolkit 版 TodoTodo with Redux Toolkit
正在读这台浏览器里的进度…Reading your progress from this browser…
计划里每一格的完成状态都是已有进度的一个视图 —— 以前自己刷过的八股、做过的练习一条都不会白做，跟着计划做完的 也照样在 课程 里打勾。 换计划、不跟计划都不动任何记录。Every square here is a view of progress you already have. Questions you rated and exercises you solved before picking a plan all count, and anything you finish inside a plan is still ticked in the courses. Changing plans or stopping never touches a record.