Cab Booking 完整练习Cab Booking
在空文件夹里搭出整个 Cab Booking 应用：Context 管全局状态，四个页面一个状态机，四个测试全过。Build the whole Cab Booking app in an empty folder: Context for global state, four pages on one state machine, all four tests passing.
要做那道用 Context 管全局状态的 React 应用题。Facing the React task that holds global state in Context.
这条计划的全程The whole route
前置Prereq
前置：地基Prerequisites: Foundations
你在这You are here要自己起一个 Vite + React 项目、要读 ESM 的报错。这一档就是这些。You will start a Vite plus React project yourself and read ESM errors. That is what this course covers.
- 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
前置Prereq
前置：这道题用到的 React 那几节Prerequisites: the React lessons this task leans on
这道题只用到 React 里的五样东西：组件、props、useState、useEffect、Context。不用把整门 React 课走完。This task uses only five things from React: components, props, useState, useEffect and Context. You do not need the whole React course.
- 组件就是一个返回界面的函数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
- useEffect：把 props 的变化同步进 stateuseEffect: copying a change in props into state
- 变式五 · 主题切换：Context 怎么用Variation 5 · theme switching: how to use Context
学Learn
学：Cab Booking 课文Learn: the Cab Booking lessons
8 节。Context 放在哪一层是这道题最常见的失败方式，第 1 部分专门讲它。Eight lessons. Which level the Context goes on is the most common way to fail this task, and Part 1 is about exactly that.
- 先读四个测试：它们到底要什么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 的课内练习Practice: the Cab Booking exercises
写Code
写：Context 版 Cab BookingCode: the Context version
带脚手架写一遍，四个测试跑绿。第二遍点「空白重来」才算验收。Write it once with the scaffold and take the four tests green. The pass that counts is the second one, with start blank.
空手做Rebuild
空手做：整个应用从零重写Rebuild: the whole app from nothing
只给四个测试和一份数据文件，60 分钟。历史只留最新三条、最新在最上 —— 这两个细节决定过不过。Four tests, one data file, 60 minutes. The history keeps only the three most recent with the newest first, and those two details decide pass or fail.
正在读这台浏览器里的进度…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.