Contribution Guidelines

Code of Conduct

React has adopted the Contributor Covenant as its Code of Conduct. We expect all contributors to adhere to its guidelines to ensure a welcoming and inclusive environment for everyone. Please report any unacceptable behavior to the project maintainers.

Pull Request Guidelines

To ensure a smooth review process, please follow these requirements when submitting a Pull Request (PR):

1. Contributor License Agreement (CLA)

All contributors must sign the Meta Contributor License Agreement before their PR can be merged. If you have already signed it for another Meta project, you do not need to do it again.

2. PR Templates and Descriptions

When opening a PR, use the provided template to describe:

• The Problem: What issue is this PR addressing?
• The Solution: How does this change fix the problem?
• Testing: What automated tests were added or updated? Provide instructions on how to manually verify the change.

3. Atomic Commits

Keep PRs focused. If a change is large, consider breaking it into smaller, logical units. Ensure that each commit passes the build and test suite.

Code Quality and Linting

React maintains strict code quality standards enforced via internal ESLint rules and custom compiler validations. Before submitting code, ensure it complies with the following:

Internal Linting Rules

The project uses a custom ESLint configuration. Run the linter locally to catch common errors:

npm run lint

Capitalized Calls Validation

The React Compiler and core logic enforce specific naming conventions for functions and components. Capitalized functions are strictly reserved for components and must be invoked using JSX.

If you are working within the compiler or library core, be aware of the validateNoCapitalizedCalls rule. It prevents calling functions with a leading uppercase letter unless they are explicitly allowed (e.g., Boolean(), String(), or specific hooks defined in the compiler config).

Incorrect:

function Component() {
  const data = SomeCapitalizedFunction(); // Error: Capitalized functions may be components
  return <div>{data}</div>;
}

Correct:

function Component() {
  const data = someLowercaseFunction(); // Standard function
  return <SomeCapitalizedComponent />; // Component used via JSX
}

Testing and Fixtures

The React codebase, particularly the compiler, relies heavily on Fixture Testing. If you are contributing logic to the compiler or core runtime, you must add corresponding fixtures to verify your changes.

Adding a Fixture

Fixtures are stored in __tests__/fixtures. To add a test case:

1. Create a new .js or .ts file in the relevant fixture directory.
2. Include the necessary metadata (e.g., @compilationMode, @validateNoCapitalizedCalls).
3. Export a FIXTURE_ENTRYPOINT to define the input and expected behavior.

Example fixture:

function Component(props) {
  const x = [props.items].map(item => item);
  return x;
}

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

Running Tests

Use the following command to run the test suite:

npm test

For compiler-specific tests, you can target the package directly:

yarn jest compiler/packages/babel-plugin-react-compiler

Development Workflow

1. Fork and Branch: Create a feature branch from main.
2. Install Dependencies: Run npm install or yarn in the root directory.
3. Build: Ensure the project builds successfully using npm run build.
4. Verify: Run linting and tests as described above before pushing your changes.