Skip to content

Level 4 · Master Architecture

Goal: make the decisions a senior or lead React engineer makes. At this level the questions are less "how do I use this hook?" and more "where should this code run?", "why is this interaction slow and how do I prove it?", "how do twelve people work in this codebase without stepping on each other?", and "what could an attacker do with this component?".

Modules

  1. Server Components & Frameworks — the server/client split, 'use client', Server Functions, and choosing a framework
  2. Concurrent Rendering — useTransition, useDeferredValue, and how interruptible rendering works
  3. Performance Profiling — Core Web Vitals, the React Profiler, the Performance panel, and a repeatable method
  4. Design Systems & Component Libraries — tokens, headless primitives, variants, and documentation
  5. Architecture for Large Apps — feature-based structure, boundaries, and dependency rules
  6. Security in React Apps — XSS, dangerouslySetInnerHTML, URLs, tokens, and supply chain
  7. Testing Strategy — what to test at which level, end-to-end tests, and keeping suites fast and trustworthy
  8. Building & Deploying — static hosting, environment variables, caching, and CI
  9. Internationalization — translations, plurals, Intl formatting and right-to-left layouts
  10. Capstone — Team Dashboard — a production-grade app assembled from every level

Before you start

You should be fluent with everything in Levels 1–3. Several topics here depend on tools outside React itself — a meta-framework for Server Components, a hosting provider for deployment, a monitoring service for real-user metrics. Where something can't be fully run on a laptop alone, the lesson says so and shows what you can practise locally.

React's server-side features have been evolving quickly. This level teaches the concepts that hold across frameworks and points you to each framework's documentation for exact file conventions and configuration.