Applying React JSX Style Guide

When writing or reviewing JSX, apply these defaults immediately:

JavaScript
// Correct baseline style
class UserCard extends React.Component {
  render() {
    const { userName, phoneNumber } = this.props;
    return (
      <div className="card">
        <Avatar
          userName={userName}
          phoneNumber={phoneNumber}
          hidden
        />
      </div>
    );
  }
}

UserCard.propTypes = {
  userName: PropTypes.string.isRequired,
  phoneNumber: PropTypes.number,
};

UserCard.defaultProps = {
  phoneNumber: 0,
};

Key defaults: 2-space indent, double quotes in JSX, one space before />, destructure props/state, boolean props omit ={true}, wrap multiline JSX in parens, self-close empty elements.

When writing new React code or reviewing existing code, work through this checklist:

Progress:
- [ ] Formatting: indentation, spacing, quotes, self-closing tags
- [ ] Component structure: one component per file, ES6 class or function component
- [ ] Lifecycle: no deprecated/UNSAFE methods, no findDOMNode
- [ ] Props: camelCase, propTypes declared, defaultProps set, no unused props
- [ ] Keys: stable keys in lists, never array index if order can change
- [ ] Anti-patterns: no .bind() in JSX, no dangerouslySetInnerHTML misuse, no this in function components

Step 1: Formatting pass

• Indent JSX with 2 spaces (never 4 or tabs)
• One space before self-closing />, one space between attributes
• No spaces inside { } for JSX expression containers: bar={baz} not bar={ baz }
• No spaces around = in attributes: name={firstname}
• Double quotes for JSX string attributes (bar="bar"); single quotes elsewhere in JS
• Wrap multiline JSX return values in ( ... )
• Self-close tags with no children: <Foo /> not <Foo></Foo>
• Multiple attributes that wrap: each attribute on its own line, closing /> or > on new line aligned with opening tag

Step 2: Component structure

• One React component per file (function components can be multiple)
• Use class extends React.Component, never createReactClass
• Prefer function components when no internal state/refs needed
• Never use this inside function components
• render() must always return JSX — never omit return
• Never use return value of ReactDOM.render()

Step 3: Lifecycle & method safety

• Never use deprecated/UNSAFE lifecycle methods: componentWillMount, componentWillReceiveProps, componentWillUpdate
  • Replace componentWillMount → constructor or componentDidMount
  • Replace componentWillReceiveProps → componentDidUpdate or getDerivedStateFromProps
  • Replace componentWillUpdate → componentDidUpdate or getSnapshotBeforeUpdate
• Never call setState inside componentWillUpdate (or any will-update-like flow)
• Never use findDOMNode — use ref callbacks instead
• Never use shouldComponentUpdate on a class extending React.PureComponent (redundant)
• Never bind functions in JSX props (onClick={this.fn.bind(this)}) — bind in constructor or use class property arrow functions

Step 4: Props discipline

• Prop names: camelCase (userName, not UserName or user_name)
• Declare propTypes for every prop actually used; remove unused ones
• Avoid vague types (PropTypes.any, .array, .object) — prefer arrayOf, shape, specific primitives
• Set defaultProps for all non-required props; never set a default for a prop marked .isRequired
• Destructure props/state instead of repeated this.props.x
• Boolean prop set to true: omit the value — <Foo hidden /> not <Foo hidden={true} />
• Never name a prop children explicitly — use JSX nesting instead
• Never duplicate a prop name on the same element
• style prop must be an object literal, never a string

Step 5: Lists and keys

• Every list-rendered element needs a stable, unique key
• Never use array index as key if the list can reorder, insert, or delete

Step 6: Misc safety checks

• No dangerouslySetInnerHTML on an element that also has children
• No children on void/self-closing HTML elements (img, br, hr)
• No comment-like strings as JSX text nodes (//, /* */ as literal text)
• Escape special characters in JSX text: >, ", ', } → use HTML entities or {'>'}
• No unescaped/undeclared component references (import before use)

Example 1: Fixing spacing and quotes

Input:

JavaScript
<Foo bar='baz' hidden={ true }/>

Output:

JavaScript
<Foo bar="baz" hidden />

Example 2: Refactoring bound event handler

Input:

JavaScript
class Btn extends React.Component {
  onClick() { console.log('clicked'); }
  render() {
    return <div onClick={this.onClick.bind(this)} />;
  }
}

Output:

JavaScript
class Btn extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick() { console.log('clicked'); }
  render() {
    return <div onClick={this.onClick} />;
  }
}

Example 3: Replacing deprecated lifecycle

Input:

JavaScript
componentWillReceiveProps(nextProps) {
  this.setState({ name: nextProps.name });
}

Output:

JavaScript
static getDerivedStateFromProps(props, state) {
  if (props.name !== state.name) {
    return { name: props.name };
  }
  return null;
}

Example 4: Adding propTypes/defaultProps

Input:

JavaScript
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Output:

JavaScript
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string,
};

Greeting.defaultProps = {
  name: '',
};