Popular posts

If component doesn't require API methods use functional React components whenever possible

function Button(props) {
  return <button className="mdl-button" {...props} />;
}

If component does require API methods use class-based syntax for declaring React components

class Button extends React.Component {
  componentDidMount() { ... }
  componentWillUnmount() { ... }
  render() {
    return <button ref="root" className="mdl-button" {...this.props} />
  }
}

If component doesn't mutate state and needs access to API methods, prefer extending it from React.PureComponent

class Button extends React.PureComponent {
  render() { ... }
}

Use property initializers for declaring prop types and default props

class Button extends React.Component {
  static propTypes = {
    className: PropTypes.string
  };
  render() {
    const { className, ...other } = this.props;
    return <button className={cx('mdl-button', className)} {...other} />;
  }
}

Use "on" prefix for delegates

class Button extends React.Component {
  static propTypes = {
    onClick: PropTypes.func
  };
  render() { ... }
}

Name event handlers starting with a verb, e.g. handleSubmit, removeRow etc.

class Button extends React.Component {
  handleClick = (event) => {
    event.preventDefault();
    ...
  };
  render() { ... }
}

Lint your code with ESLint and AirBnb JavaScript style guide (eslint-config-airbnb)

Use the ES2015+ syntax whenever possible and it makes sense to make the code more readable.

Visit React Starter Kit for the full collection of best practices