A guided tour of the React knowledge bundle, transformed from the official react.dev documentation into one OKF concept per page.
The official React documentation at react.dev, restructured as an OKF bundle: one concept per documentation page, with the page's canonical URL in each concept's resource. It has two halves: the Learn guide, which teaches how React works and how to think in it, and the API Reference, which gives exact signatures, parameters, return values, and caveats for every documented export, from useState to the server rendering APIs. The content is transformed and summarized, not copied; the timestamp and cited URL on each concept tell you how to re-check it against the live docs. For navigation by section, start at the bundle root index.
React UIs are built from components, functions that return markup written in JSX. Components receive props from their parents and keep their own memory in state. When state changes, React re-renders the component and updates the DOM to match. Components must be pure: same inputs, same output, no side effects during render. Side effects that synchronize with external systems go in Effects, and values that persist without triggering a render go in refs.
Read the four core sections in order, each starting at its landing concept:
New to React entirely? Start with the quick start and the tic-tac-toe tutorial.
The Learn guide teaches the ideas; the API Reference pins down the contracts. The most-used entries are the Hooks, above all useState, useEffect, useContext, and useReducer. The Rules of React and the ESLint plugin explain the constraints the whole model depends on.
Every concept cites its source react.dev page. React documentation prose is licensed CC BY 4.0 and its code samples MIT, by Meta and the React contributors. This bundle restructures and summarizes that material for agent consumption; consult the cited URL for the authoritative, current text.
Section landing page on writing components that handle interactions, hold state, and render different output over time.
How to add event handlers to JSX, pass them as props, and control event propagation and default behavior.
The three steps React takes to display components, trigger, render, and commit, and why rendering does not always touch the DOM.
Why state behaves like a snapshot fixed per render, so it does not update immediately after you set it.
How React batches state updates within an event, and how updater functions queue multiple changes to the same state.
Update an object held in React state by creating a new copy instead of mutating the existing one.
Update an array held in React state with non-mutating operations that return a new array.
Section landing page for building, customizing, and conditionally displaying React components.
How to define and use a React component, a JavaScript function that returns JSX markup.
How to split components across files using default and named imports and exports.
How to add HTML-like markup to JavaScript with the JSX syntax extension and its three rules.
How to reference JavaScript variables, calls, and objects inside JSX using curly braces.
How to configure components with props, including any JavaScript value, defaults, spread, and children.
How to render different JSX depending on conditions using if, the logical AND, and the ternary operator.
How to render multiple components from a collection using map() and filter(), with stable keys.
How to avoid a class of bugs by writing components as pure functions with the same output for the same inputs.
Why modeling your UI as a render tree and a module dependency tree helps debug performance and bundle size.
Section landing for React features that step outside React to connect with external systems via refs, Effects, and custom Hooks.
Use refs to let a component remember information without triggering re-renders, and how refs differ from state.
Use refs to access DOM nodes that React manages, for focus, scroll, and measurement, and the rules for doing so safely.
Use Effects to run code after rendering that synchronizes a component with an external system, and how to add dependencies and cleanup.
When to remove unnecessary Effects by calculating during render, handling logic in events, and using keys, memoization, and external store Hooks.
How an Effect's lifecycle of start and stop synchronization differs from a component's, and why reactive values must be dependencies.
Choose between event handlers and Effects, and extract non-reactive logic into Effect Events so some values do not re-trigger an Effect.
Make Effects re-run less often by changing the code so unnecessary dependencies fall away, never by suppressing the dependency linter.
Write your own Hooks to share stateful logic between components, naming and structuring them, and when to extract one.
A hands-on walkthrough that builds a small tic-tac-toe game to introduce React components, props, state, lifting state up, immutability, and time travel.
The five-step thought process for building a React UI, from breaking a mockup into components to wiring up inverse data flow.
Overview of the ways to start using React, from trying it online to creating an app or adding it to an existing project.
Recommended full-stack frameworks for starting a new React app, plus when to start from scratch instead.
How to set up a React project from scratch with a build tool, and the application patterns you must solve yourself.
How to add interactive React components to an existing website or app, by subroute or by page region.
Section landing page for organizing state, keeping update logic maintainable, and sharing state between distant components in React.
Describe a component's visual states declaratively and switch between them in response to input, instead of manipulating the UI imperatively.
Five principles for shaping state so it stays in sync, avoids impossible states, and is easy to update without introducing bugs.
Lift state up to a common parent so two components change together, and understand controlled vs uncontrolled components and single source of truth.
How React decides when to keep a component's state and when to reset it, based on position in the render tree and the key prop.
How to consolidate many state updates spread across event handlers into a single reducer function with useReducer.
How to use context to make information available to any component in the tree below a parent, without passing it explicitly through props.
How to combine a reducer with context so state and dispatch reach any component in the tree without prop drilling.
Landing page for the LEARN-side React Compiler guide, orienting you across introduction, installation, incremental adoption, and debugging.
What React Compiler is, what it optimizes, whether to adopt it, supported build tools, and how it interacts with existing manual memoization.
How to install React Compiler and configure it for Babel, Vite, Next.js, React Router, Webpack, Expo, Metro, Rspack, and Rsbuild, plus how to verify it works.
Strategies to roll out React Compiler gradually using Babel overrides, annotation-mode opt-in, and runtime gating feature flags.
How to tell compiler errors from runtime issues, recognize common breaking patterns, follow a debugging workflow, and report compiler bugs.
Landing page for getting your React development environment ready, covering editors, TypeScript, browser devtools, and the compiler.
Recommended editors for React and how to set up linting and automatic formatting.
How to add TypeScript to a React project and type components, Hooks, DOM events, children, and style props.
How to install React Developer Tools to inspect components, edit props and state, and find performance problems.
