#prefer-es6-class

#Configuration

import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/prefer-es6-class': 'error',
    },
  },
]);

#Rule Details

Enforce consistency between the two React component declaration styles: ES6 classes extending React.Component / React.PureComponent and the legacy createReactClass({...}) factory. The rule reports whichever style does not match the configured option.

• "always" (default) — flag createReactClass({...}) calls; prefer ES6 classes.
• "never" — flag ES6 class declarations extending Component / PureComponent (bare or pragma-qualified); prefer createReactClass.

#Options

{ "react/prefer-es6-class": ["error", "always"] }

Accepted values: "always" (default), "never".

Examples of incorrect code for this rule (default "always"):

var Hello = createReactClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  },
});

Examples of correct code for this rule (default "always"):

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Examples of incorrect code for this rule with "never":

{ "react/prefer-es6-class": ["error", "never"] }

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Examples of correct code for this rule with "never":

{ "react/prefer-es6-class": ["error", "never"] }

var Hello = createReactClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  },
});

#Settings

The rule honors the shared React settings:

• settings.react.pragma — controls the namespace used for qualified references (default "React", so React.Component and React.createClass are recognized).
• settings.react.createClass — controls the factory name (default "createReactClass").

#Original Documentation

• eslint-plugin-react prefer-es6-class