Build System & Scripts

Overview

React uses a custom build system to manage its monorepo architecture, transforming source code into optimized artifacts for multiple environments. The system is primarily powered by Rollup, which handles bundling for various module systems (CommonJS, ESM, and UMD) and release channels.

Core Build Commands

The primary entry point for building React from source is via yarn.

Full Build

To generate build artifacts for all packages:

yarn build

This command populates the build/ directory with categorized subdirectories:

• node_modules: Packages ready for local linking or publication.
• dist: UMD bundles for browser usage.

Targeted Builds

You can build specific packages or use flags to restrict the build to certain environments:

# Build only specific packages (e.g., react and react-dom)
yarn build react,react-dom

# Build for a specific release channel
yarn build --type=NODE

Release Channels

React uses release channels to manage the stability of new features. The build system configures the compiler and feature flags based on the target channel.

| Channel | Description | Usage | | :--- | :--- | :--- | | stable | The current version on npm. | Production applications. | | canary | Features adopted by Meta and early adopters. | Frameworks like Next.js or Remix. | | experimental | APIs in active development (e.g., upcoming Research). | Testing and feedback only. |

To build for a specific channel, use the --type flag during the build process.

React Compiler Tooling

The React Compiler (Babel plugin) has its own specific build and validation requirements. The build system ensures the compiler is correctly transpiled and tested against its internal Intermediate Representation (HIR).

link-compiler.sh

link-compiler.sh is an internal utility script used to link the local version of the React Compiler into a separate project for testing. This is essential for verifying compiler behavior on real-world components before a full release.

Usage:

./scripts/compiler/link-compiler.sh /path/to/target/project

This script automates the process of:

1. Building the babel-plugin-react-compiler package.
2. Using yarn link or npm link to point the target project to the local build artifacts.

Validation Scripts

The compiler includes specific validation passes that can be triggered during development:

• validateNoCapitalizedCalls: Ensures that components are not invoked as standard functions.
• pruneNonEscapingScopes: Optimizes the build by removing unnecessary memoization scopes for values that do not leave the local function scope.

Rollup Configuration

The build configuration is centralized in scripts/rollup/config.js. It defines how each package is bundled based on its intended environment.

Bundle Types

React produces several types of bundles:

• NODE_CJS/NODE_ESM: Optimized for Node.js environments and modern bundlers (Webpack, Vite).
• BROWSER: UMD bundles containing development and production.min versions.
• FB: Specific bundles optimized for the internal Meta infrastructure.

Environment Config

For the React Compiler specifically, the build system references an EnvironmentConfig object to determine how the compiler should treat various patterns:

export type EnvironmentConfig = {
  /**
   * Validates that functions beginning with a capital letter are 
   * used only as JSX components.
   */
  validateNoCapitalizedCalls?: Array<string>;
  
  /**
   * A regex pattern to identify custom hooks (e.g., "^use").
   */
  hookPattern?: string;
  
  // ...additional configuration options
};

CI and Automation

React utilizes GitHub Actions to automate build verification across different platforms.

• Runtime Build and Test: Runs the full suite of unit tests against the generated build artifacts.
• Compiler TypeScript: Specifically validates the type safety of the React Compiler source code and its Babel integration.
• Fixture Testing: The compiler uses a fixture-based testing system (located in src/__tests__/fixtures) to compare input source code against expected output HIR and reactive scopes.