Everything, indexed.
Browse all five chapters and thirty lessons in Volume I. Search by a React, browser, JavaScript, or tooling term.
The First React Screen
What React Adds to a Page
What the browser already does by itself, what React adds on top, and where React DOM sits between the two.
Create a Local React Project
Create the Volume I project with React 19.2 and Vite 8, then prove that the terminal, editor, server, and browser are all using the same directory.
createRoot and the Root Container
Connect the browser document to React with createRoot, verify the container, render the app, and learn what the root actually manages.
The First Function Component
Learn the function component call contract, tell apart a component definition from its rendered instances, and keep rendering pure.
JSX Produces Elements
Follow JSX from source syntax to React element values, then separate element creation from component rendering and DOM commit.
Editing, Reloading, and Reading Errors
Classify failures by the stage that produced them, read source locations and stacks, and repair one controlled error at a time.
Components Before Abstractions
Component Identity and Capitalization
Learn how JSX chooses host elements or component bindings and why stable function identity affects React's component tree.
Component Files, Imports, and Exports
Move components across ES modules, choose named or default exports, and keep the first module graph readable.
Returning One UI Tree
Follow one component call to one returned React node, build valid nested markup, and make every empty result explicit.
Props as Inputs
Pass values from a parent element into a component call, read one props object, apply defaults, and leave source data unchanged.
Children as Composition
Pass nested React content through the children prop and separate a wrapper's structure from the content selected by its parent.
Conditional UI in the First App
Render complete UI states from props with early returns, conditional expressions, and explicit empty results.
JSX Is Real React Code
Expressions Inside JSX
Evaluate JavaScript inside JSX, distinguish expressions from statements, and account for every value React can render or reject.
Attributes, Class Names, and Styles
How JSX props reach browser elements, why className exists, when the style prop makes sense, and how HTML semantics still work normally.
Fragments and Nested Trees
Group sibling React nodes without creating a DOM wrapper, then use a real HTML element whenever the document actually needs one.
Arrays in JSX
Transform data arrays into React nodes with map and filter, preserve the source collection, and give empty results explicit UI.
Keys in the First List
Identify sibling list elements with stable data keys and avoid index or random keys that make React match the wrong instances.
Modern JavaScript Syntax in Components
Read the JavaScript syntax used in current React components without mistaking destructuring, spread, and optional access for React APIs.
State and Events From Scratch
Click Handlers and Event Props
Respond to browser interaction by passing handler functions, reading the event object, and controlling default behavior only when required.
The First useState Hook
Give one component instance stored memory with useState and request its next render from a click handler.
State Updates and Renders
Understand state as a render snapshot, how React queues updates, why updater functions behave differently, and what finally gets committed to the DOM.
Form Inputs and Controlled Values
Connect text, checkbox, radio, and select controls to state while preserving labels, browser validation, and form submission behavior.
Derived UI From State
Store the smallest independent state and calculate filters, counts, labels, selections, and form validity during rendering.
Resetting the Small App
Reset stored values from one event, preserve state by component position, and change a key only when the whole instance represents another identity.
Project Tooling and the First Milestone
React Project Files and Package Scripts
Read a Vite React project as a connected system of browser files, source modules, package records, scripts, and tool configuration.
Vite Dev Server and HMR
Trace a saved React edit through Vite HMR and Fast Refresh, then recognize when component state can be preserved.
TypeScript for Component Props
Move the milestone app to TypeScript, describe component prop contracts, and add a real type-check step beside Vite.
React DevTools First Pass
Inspect the React component tree, props, hooks, owners, and render commits without confusing that tree with the browser DOM.
Create React App Deprecation and Modern Starts
Recognize a Create React App project, understand its deprecation, and choose between a framework and a Vite scratch setup for current work.
Build, Preview, and First Project Review
Produce the first deployment build, inspect its files, preview it locally, and review the Volume I app from a clean installation.