Volume I is ready
Master interface engineering
through React.
A complete online book for learning React from the first browser render through production architecture. Volume I starts with no React assumptions and explains the JavaScript, DOM, npm, Vite, and TypeScript details used by each example.
30subchapters
5chapters
19.2React baseline
Get a short email when a new volume is published.
Reading workspace
Current lesson
Trace a React render into the browser DOM.
The reader keeps the chapter list, page outline, code, notes, and next lesson close to the explanation.
Continue
The first React root
Connect index.html to main.jsx.
Inspect
Browser and Components
Compare the DOM tree with the component tree.
$ npm run dev
VITE ready on http://localhost:5173
createRoot: #root
render: <App />
commit: DOM updated
▍
WHY REACTBOOK
Start with working UI. Then explain every mechanism.
The early pages do not require prior React knowledge. Each new term is attached to code the reader can run, edit, inspect, and repair.
01RENDER
A React Screen From Nothing
Install the current packages, create a browser root, render the first component, and inspect the DOM that React produces.
02COMPONENTS
Components Without Premature Abstraction
Learn capitalization, files, imports, props, children, and composition through one small interface.
03JSX
JSX Used in Real Components
Write expressions, DOM attributes, fragments, arrays, keys, and the JavaScript syntax used beside them.
04STATE
State and Events From Scratch
Connect click and input events to state, then trace each update through another render and DOM commit.
05TOOLS
Current Project Tooling
Use Vite 8, TypeScript, React DevTools, package scripts, production builds, and modern project starts.
06DEBUG
Errors With Enough Context
Read terminal output, browser errors, component stacks, lint output, and failed production builds.
CURRICULUM
Twelve volumes. One React model.
The First React ScreenA working React 19.2 app, createRoot, a component, JSX, and error reading.
Components Before AbstractionsComponent identity, files, props, children, composition, and conditional UI.
JSX in Real React CodeExpressions, attributes, fragments, arrays, keys, and modern JavaScript syntax.
State and Events From ScratchHandlers, useState, rerenders, inputs, derived UI, and reset behavior.
Project Tooling and the First MilestoneVite 8, TypeScript, DevTools, modern starts, build, preview, and review.
Components, JSX, and ElementsComponent execution and the React elements returned from JSX.
Props, Children, and Component APIsStable component contracts and composition choices.
Rendering Lists, Keys, and Tree IdentityCollection rendering and preservation rules.
Conditional UI and CompositionBranching, empty output, slots, and reusable structure.
Styling, Assets, and DOM AttributesCSS, images, fonts, metadata, and DOM property rules.
Event Handling and useStateEvent propagation and local state.
Update Queues and Render SnapshotsBatching, queued updates, and snapshot behavior.
Controlled Forms and Input StateText, selection, validation, and submission.
State Structure and Immutable UpdatesObjects, arrays, normalization, and derived values.
Reducers and Local State MachinesActions, reducers, transitions, and invariants.
Render, Commit, and EffectsPhase separation and post-commit synchronization.
Effect Dependencies and useEffectEventDependency analysis and non-reactive effect logic.
Refs and Imperative DOM WorkPersistent references and direct DOM operations.
External Browser APIs and CleanupSubscriptions, observers, timers, and teardown.
Custom HooksReusable stateful logic and hook contracts.
Context and Scoped App StateProviders, consumers, and update scope.
Reducers With Context and External StoresShared updates and subscription contracts.
Client Data Fetching and CachingRequest state, caches, invalidation, and races.
Actions, Forms, and Optimistic UIReact 19 form actions and optimistic updates.
Error, Loading, and Async UI StatesPending work, failures, retries, and disclosure.
Routing Fundamentals and URLsHistory, location, navigation, and document requests.
React Router v7 BasicsDeclarative, data, and framework modes.
Nested Routes, Loaders, and MutationsRoute trees and data ownership.
Lazy Loading, Suspense, and Code SplittingDeferred code and loading UI.
Component Architecture and API DesignModule structure and maintainable component contracts.
React Elements to FiberElement records, fibers, alternates, and work state.
Reconciliation and Keys InternalsChild comparison and identity decisions.
Scheduling, Priorities, and LanesUpdate priority and interruptible render work.
Transitions, Deferred Values, and useNon-blocking work and async reads.
Commit Phase, Effects, and Strict ModeDOM mutations, effects, and development checks.
Measuring React PerformanceBrowser and React performance evidence.
Memoization in React 19.2Manual caches and their operating costs.
React Compiler v1Compilation, lint rules, adoption, and verification.
Activity and Hidden UI WorkHidden trees, preserved state, and prioritized work.
Bundles, Assets, and Resource LoadingCode, styles, fonts, scripts, and preload APIs.
Server Rendering and HydrationServer HTML and client attachment.
Streaming SSR With SuspenseIncremental HTML delivery and reveal order.
Static Prerendering and Resume APIsBuild-time output and resumable streams.
React Server ComponentsServer module execution and client references.
Server Functions and SecurityNetwork entry points, validation, auth, and patching.
Framework Architecture and Rendering ModesIntegrated routing, data, code, and rendering.
Next.js App RouterLayouts, routes, Server Components, and actions.
React Router Framework ModeRoutes, loaders, actions, and adapters.
Data, Caching, Auth, and LocalizationApplication services across request modes.
Deployment, Runtimes, and OperationsNode, edge, static output, releases, and monitoring.
Component TestingBehavior tests and accessible queries.
Integration and End-to-End TestingBrowser flows and service integration.
Accessibility in ReactHTML semantics, keyboard work, focus, and WCAG.
TypeScript for React ApplicationsProps, events, refs, generics, and library types.
Security, Linting, Codemods, and DependenciesPreventive checks and migration tooling.
Error Recovery and ObservabilityError boundaries, reporting, and release diagnosis.
Design Systems and UI PlatformsTokens, primitives, governance, and distribution.
Large-App Architecture and MigrationOwnership, dependency direction, and incremental change.
React Native, Expo, and Cross-Platform OrientationShared React concepts and platform-specific work.
Capstone, Future React, and Standards TrackingA production review and update process.
PRICING
Read free. Go deeper.
Keep every future release.
The web book stays free. Founding plans cover the member library as it grows, with Raw Mode adding the React interview system.
ReactBook Complete
Founding access to every ReactBook member release, including every future volume, project pack, and build lab when each format ships.
$19/mo
or $99 once for lifetime access
✓Every current and future ReactBook volume
✓Member project packs and reference material as released
✓Build labs when the lab library launches
✓Every future content and tooling update
Best value
ReactBook Raw Mode
Everything in ReactBook Complete, plus the growing senior and staff-level React interview system for reasoning without autocomplete.
$29/mo
or $149 once for lifetime access
✓Everything in ReactBook Complete
✓React questions answered at multiple depths
✓Follow-up trees, debugging drills, and broken apps
✓Frontend system-design scenarios and review protocols
AUTHOR
From the author of NodeBook.
EDITORIAL STANDARD
What each lesson must do.
Every JavaScript, DOM, browser, and tooling term appears when the React code first needs it.
Start from zero React knowledge
Examples use React 19.2, Vite 8, current TypeScript, and the project-start guidance published by the React team.
Reviewed for 2026 and 2027
The prose stops when the mechanism is clear. Admonitions preserve setup facts, warnings, and debugging checks beside the code.
No fixed word target
NEW RELEASE EMAILS
Get new volumes as they publish.
Release notes and new web chapters. No file bundles in this release.