konal-nguyen/airbnb icon
public
Published on 3/31/2025
AirBNB coding styles for React/JSX

Airbnb coding styles for React/JSX

Rules
airbnb
# Airbnb React/JSX Style Guide - Summary

- **Component Structure**
  - One React component per file (multiple stateless components allowed)
  - Always use JSX syntax instead of `React.createElement`
  - Use `class extends React.Component` for stateful components
  - Use function declarations for stateless components
  - Don't use mixins

- **Naming & Files**
  - Use `.jsx` extension for React components
  - Use PascalCase for component filenames and references
  - Use camelCase for component instances
  - Use composite names for HOCs (e.g., `withFoo(Bar)`)

- **Syntax & Formatting**
  - Use double quotes for JSX attributes, single quotes for JS
  - Include a space in self-closing tags
  - Don't pad JSX curly braces with spaces
  - Wrap multiline JSX in parentheses
  - Always self-close tags without children

- **Props**
  - Use camelCase for prop names
  - Omit value when prop is explicitly `true`
  - Always include `alt` attributes on `<img>` tags
  - Don't use array index as `key` prop
  - Define defaultProps for all non-required props
  - Use spread props sparingly

- **Methods & Events**
  - Use arrow functions to close over local variables
  - Bind event handlers in the constructor
  - Don't use underscore prefix for internal methods
  - Always return a value in render methods

- **Component Organization**
  - Follow specific ordering for lifecycle methods
  - Follow specific patterns for defining propTypes and defaultProps
  - Don't use `isMounted` (anti-pattern)