Quick Start

System Requirements

Before setting up the React repository, ensure your environment meets the following requirements:

• Node.js: ^18.12.0 or higher.
• Yarn: ^1.22.19 (React uses Yarn workspaces for monorepo management).
• Git: For version control and cloning the repository.

Repository Setup

To contribute to React or experiment with the React Compiler, start by cloning the repository and installing dependencies.

1. Clone the repository:

   git clone https://github.com/facebook/react.git
   cd react
   

2. Install dependencies:

   yarn install
   

3. Build the packages: React is a monorepo. To use the packages locally, you must build them:

   yarn build
   

Working with the React Compiler

The React Compiler (specifically babel-plugin-react-compiler) is a build-time tool that automatically memoizes your code. It ensures that your components and hooks follow React's rules, such as identifying escaping values and validating call patterns.

Building the Compiler

To focus specifically on compiler development:

cd compiler
yarn install
yarn build

Running the Compiler Playground

The playground allows you to see how the compiler transforms standard React code into optimized, memoized code. It is an essential tool for testing new compiler logic or debugging transformation issues.

1. Start the Playground:

   # From the /compiler directory
   yarn playground
   

2. Usage: Open the local URL provided in your terminal (typically http://localhost:3000). You can paste React component code into the left pane to view the compiler's output (HIR and Reactive Scopes) in the right pane.

Running Tests

The compiler uses an extensive suite of fixtures to validate logic such as PruneNonEscapingScopes and ValidateNoCapitalizedCalls.

To run the compiler tests:

# Run all compiler tests
yarn jest

# Run tests for a specific fixture
yarn jest <path_to_fixture>.js

Example Test Fixture

Fixtures are located in compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/. A typical test case looks like this:

function Component(props) {
  const a = [props.a]; // Memoized if it escapes or impacts an escaping scope
  const b = [];
  b.push(props.b);
  return b;
}

export const FIXTURE_ENTRYPOINT = {
  fn: Component,
  params: [{a: 1, b: 2}],
  isComponent: true,
};

Compiler Validation Rules

When using the compiler, be aware of the following core validations:

• No Capitalized Calls: Components must be invoked via JSX, not called as functions. The compiler will throw an error if it detects SomeComponent() instead of <SomeComponent />.
• Escape Analysis: The compiler automatically identifies which values escape the local scope (e.g., returned values or inputs to hooks) to determine the optimal memoization boundaries.
• Hook Patterns: Custom hooks must follow the use[Uppercase] naming convention to be correctly handled by the compiler's optimization passes.