Frontend Handbook

Under the Hood

What a scaffolding command hides: how source files become the bundle the browser loads, and how React turns JSX into DOM updates. Each page names the real tools, then lets you step through a simplified model of what they do.

5 of 5 pages written

Written
From source to bundle
What one build command runs: which tool does each job in Create React App, Vite and Next.js, the resolve, transform, bundle, optimize and emit stages, dev vs production builds, and content hashes, each with a live demo.
Written
Transpiling: TypeScript and JSX to JavaScript
Tokens, the syntax tree, transforms and code generation; stripping types vs checking them; the JSX runtimes; syntax lowering for older browsers; and source maps, each with a live demo.
Written
Bundlers: graph, runtime, chunks and dev servers
How a bundler resolves imports into a module graph, the runtime that links modules, tree shaking and side effects, code splitting, and why webpack, Vite and Turbopack run dev differently, each with a live demo.
Written
The CSS pipeline
How CSS gets into the bundle, what Sass compiles to, PostCSS plugins, how CSS Modules scope class names, and how Tailwind generates only the utilities you use, each with a live demo.
Written
Inside React: from JSX to DOM updates
What JSX becomes, the element and fiber trees, how reconciliation diffs them and why keys matter, the render and commit phases, and urgent vs deferred updates, each with a live demo.