React Repository Overview

React is a JavaScript library for building user interfaces, managed as a monorepo containing the core engine, multiple renderers, developer tools, and a compiler. The repository employs a workspace-based architecture using Yarn Workspaces that organizes packages under packages/* to manage dependencies and shared code consistently across subsystems package.json3-5 This structure supports development of React's diverse features while enabling isolated builds and versioning.

Core Architecture and Subsystems

The React repository consists of several major functional areas that collaborate to transform components into rendered UIs efficiently, flexibly, and across many platforms.

1. The Core Reconciler

At the heart of React is the react-reconciler package which manages the Fiber data model — a tree of nodes representing React elements that allows incremental and prioritized rendering. It implements the reconciliation algorithm that compares updates and schedules work in interleaved chunks. The reconciler is platform-agnostic and relies on abstractions called "host configs" to interact with various rendering environments such as browsers or native platforms packages/react-reconciler/package.json2-4

2. Rendering Targets

React supports rendering to a variety of targets via specialized renderer packages:

• react-dom: The primary renderer for web browsers, supporting client-side hydration and server-side rendering variants packages/react-dom/package.json2-25

• react-native-renderer: Powers React Native mobile apps by bridging React with native UI components (not fully shown in the package list but part of the repo ecosystem).

• react-art: Provides declarative vector graphic rendering using the ART library, supporting Canvas, SVG, and legacy VML rendering packages/react-art/package.json2-25

• react-test-renderer: Enables snapshot testing by rendering React trees to plain JavaScript objects that can be serialized and compared packages/react-test-renderer/package.json2-27

3. Server Components and Flight

React's experimental Flight protocol empowers React Server Components (RSC), letting components render on the server and stream markup or instructions to the client for lightweight hydration. This functionality spans core server entry points and integrates with special renderer variants designed for streaming packages/react/src/ReactServer.js1-10 The react-dom package also supports server rendering targets corresponding to various JS environments such as Node, Edge, and Bun packages/react-dom/package.json60-110

4. Developer Experience (DX) Tooling

Complementing React core are tools that improve developer productivity and code quality:

• React Compiler: An experimental Babel plugin (babel-plugin-react-compiler) implements automatic memoization and optimizations during JSX compilation package.json126

• React DevTools: Provides both backend instrumentation and front-end UI components to inspect React trees, props, hooks, and performance.

• ESLint Plugins: The eslint-plugin-react-hooks enforces the Rules of Hooks and dependency array checks, integrating with the compiler and syntax parsing infrastructure packages/eslint-plugin-react-hooks/package.json2-15

5. The Scheduler

The scheduler package provides cooperative multitasking: a task queue prioritizing units of work, yielding to the browser to avoid blocking, and bridging to environment-specific APIs (e.g., MessageChannel, postTask) to time slice React updates gracefully packages/scheduler/package.json1-10

Code Entity Map: From Concepts to Code

This diagram bridges common React conceptual areas to key code packages and specific files or functions, facilitating navigation across natural language and code.

System Mapping: Concepts to Code Entities

Sources: packages/react/src/ReactClient.js27-77 packages/react-reconciler/package.json2-4 packages/scheduler/package.json1-10 packages/react/src/ReactServer.js1-10

Package Relationship Overview

The monorepo structure delineates responsibilities, enabling the core react package to expose the public API surface while delegating rendering and reconciliation logic to specialized packages.

Sources: packages/react-dom/package.json19-24 packages/react-reconciler/package.json28-33 packages/react-test-renderer/package.json21-27 packages/react-art/package.json24-29

Build and Versioning

The repository's version number is centrally defined in ReactVersion.js and synchronized with release tooling. The build pipeline, orchestrated mainly by Rollup via scripts under scripts/rollup, produces various bundles optimized for different target environments (production, profiling, development) and release channels (stable, experimental, canary) packages/shared/ReactVersion.js15 package.json125-141

Child Pages

For more in-depth information on specific parts of the codebase, the following child pages cover important subsystems and developer tooling:

• Repository Structure and Package Layout: Explores the directory layout and inter-package relationships, workspace configuration, and versioning details.

• Feature Flags System: Details how React manages feature toggles and build-time flags across different environments using canonical flags and environment-specific overrides.

Each child page builds on this high-level overview to provide comprehensive understanding for contributors and maintainers.

Sources:
package.json1-141
packages/shared/ReactVersion.js1-15
packages/react/index.js27-77
packages/react-reconciler/package.json1-34
packages/react-dom/package.json1-126
packages/react-test-renderer/package.json1-35
packages/react-art/package.json1-41
packages/eslint-plugin-react-hooks/package.json1-68
packages/scheduler/package.json1-10
packages/react/src/ReactClient.js1-77
packages/react/src/ReactServer.js1-10