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:
- Create a new
.jsor.tsfile in the relevant fixture directory. - Include the necessary metadata (e.g.,
@compilationMode,@validateNoCapitalizedCalls). - Export a
FIXTURE_ENTRYPOINTto 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
- Fork and Branch: Create a feature branch from
main. - Install Dependencies: Run
npm installoryarnin the root directory. - Build: Ensure the project builds successfully using
npm run build. - Verify: Run linting and tests as described above before pushing your changes.