This document outlines the Airbnb React/JSX Style Guide, a comprehensive set of best practices and conventions for developing React applications. It covers component structure, naming conventions, JSX formatting, props management, component lifecycle organization, and accessibility patterns.
This page serves as a high-level overview and a central hub for the React-specific documentation. For core JavaScript guidelines not specific to React, see the JavaScript Style Guide.
The React style guide is primarily implemented through the eslint-plugin-react, eslint-plugin-jsx-a11y, and eslint-plugin-react-hooks plugins, which are configured within the Airbnb ESLint packages.
Diagram: React Style Guide Implementation
Sources: packages/eslint-config-airbnb/rules/react.js5-18 react/README.md1-22
The guide establishes clear patterns for component declaration, favoring functional components when state or refs are not required react/README.md55-74 It dictates a strict ordering for class methods to ensure consistency across the codebase, specifically exempting lifecycle methods from the class-methods-use-this rule packages/eslint-config-airbnb/rules/react.js28-47
Diagram: Component Entity Space Mapping
For details on file organization, naming conventions (PascalCase for files and components), and internal method ordering, see React Component Structure.
Sources: react/README.md33-74 react/README.md157-171 packages/eslint-config-airbnb/rules/react.js28-47
Validation is a core requirement. Every component must define propTypes, and the guide restricts generic types like any, array, and object in favor of explicit shapes using arrayOf or shape packages/eslint-config-airbnb/rules/react.js60-66 Additionally, the guide prohibits the use of bind() or arrow functions within JSX props to prevent unnecessary re-renders, with specific exceptions for refs packages/eslint-config-airbnb/rules/react.js108-116
For details on prop validation, state management patterns, and event handler naming (e.g., handle vs on), see Props, State, and PropTypes.
Sources: react/README.md31-32 packages/eslint-config-airbnb/rules/react.js60-66 packages/eslint-config-airbnb/rules/react.js108-116
JSX is treated as a first-class syntax with specific alignment and spacing rules. This includes the use of double quotes for attributes packages/eslint-config-airbnb/rules/react.js26 required PascalCase for user-defined components packages/eslint-config-airbnb/rules/react.js130-135 and strict closing bracket locations packages/eslint-config-airbnb/rules/react.js76-82
| Convention | Rule | Source |
|---|---|---|
| Quotes | Prefer double (") for JSX attributes | packages/eslint-config-airbnb/rules/react.js26 |
| Self-closing | Tags without children must self-close | react/README.md280-287 |
| Alignment | Line-aligned for multiline closing brackets | packages/eslint-config-airbnb/rules/react.js76-78 |
| Case | PascalCase for user-defined components | packages/eslint-config-airbnb/rules/react.js132 |
For details on alignment, tag formatting, and spacing, see JSX Formatting and Syntax.
Sources: react/README.md173-287 packages/eslint-config-airbnb/rules/react.js24-26 packages/eslint-config-airbnb/rules/react.js76-86 packages/eslint-config-airbnb/rules/react.js130-135
Accessibility is enforced via the jsx-a11y plugin. This ensures that components use valid ARIA roles and provide necessary alternative text for media. The configuration specifically targets JSX attributes to ensure semantic integrity packages/eslint-config-airbnb/rules/react.js10-14
For details on ARIA attributes, keyboard navigation, and semantic requirements, see React Accessibility (A11y).
Sources: react/README.md1-5 packages/eslint-config-airbnb/rules/react.js10-14
The guide documents the transition from traditional class lifecycle methods—like componentDidMount and shouldComponentUpdate—to React Hooks packages/eslint-config-airbnb/rules/react.js28-47 It strictly prohibits the use of isMounted react/README.md23
For details on lifecycle method usage and Hook patterns, see React Lifecycle and Hooks.
Sources: packages/eslint-config-airbnb/rules/react.js28-47 react/README.md23