Course guide¶
Audience¶
This course is for experienced frontend engineers preparing for advanced React interviews. It assumes TypeScript, browser, HTTP, testing, and component-based application experience.
Learning destination¶
By the end of this course, you will be able to:
- Build a typed Vite/React interview-prep tracker with routing, forms, async fetching, testing, and performance reasoning.
- Explain React's runtime model, state ownership, effects, and component contracts in your own words.
- Defend architectural choices in rendering strategy, state boundaries, server-state handling, and deployment.
- Diagnose production failure modes such as stale closures, stale requests, wasted renders, and accessibility gaps.
Capstone: Design and implement a shareable study plan feature, including state schema, URL encoding, route boundaries, and a recorded tradeoff decision.
Mastery map¶
| Lab | Concept | Target state | Evidence of mastery |
|---|---|---|---|
| 1 | JSX and component anatomy | Practiced | Render a typed, accessible app shell and explain element vs. component vs. DOM node |
| 2 | Lists, keys, conditional UI | Practiced | Reorder items and keep state tied to identity |
| 3 | Props and composition | Practiced | Design a narrow component API and avoid prop-explosion |
| 4 | Hooks, reducer, derived data | Applied | Model transitions with useReducer and derive state during render |
| 5 | Context and dependency boundaries | Applied | Provide state through focused context and replace it in tests |
| 6 | Routing and lazy routes | Applied | Configure static-host-safe routing and code splitting |
| 7 | Typed forms and validation | Applied | Build a controlled form with domain validation and accessible feedback |
| 8 | Async state and fetching | Applied | Handle loading, empty, error, and stale-request races |
| 9 | Effects and cancellation | Applied | Synchronize with external systems and clean up safely |
| 10 | Testing workflows | Applied | Test behavior at useful boundaries with Vitest and React Testing Library |
| 11 | Performance profiling | Applied | Measure, then apply the narrowest effective optimization |
| 12 | Architecture and production | Applied | Defend boundaries across security, reliability, and deployment |
| 13 | Capstone | Mastered | Independently synthesize and defend a complete feature design |
How each lesson works¶
Each lesson follows the Adaptive Engineering Tutor loop:
- Read the Objective, Prerequisites, and Mental Model.
- Predict runtime behavior before reading the Example.
- Attempt the Mini Lab before peeking at the Hints.
- Complete the Knowledge Check and the Challenge.
- Use the Summary and What Comes Next to connect concepts.
Definition of done¶
- Keyboard and pointer behavior work.
- Types, tests, and lint pass.
- Loading, empty, error, invalid, and cleanup states are considered.
- State ownership and Context lifetime are explicit.
- Effects synchronize only with external systems.
- Performance and security claims rely on evidence.
Complete labs 1–3 for calibration, 4–10 for core engineering, and 11–13 for production reasoning.