← Back to rules

react/prefer-es6-class Style

What it does

React offers you two ways to create traditional components: using the create-react-class package or the newer ES2015 class system.

Note that function components are preferred over class components in modern React, and it is especially discouraged to use createReactClass in modern React.

Why is this bad?

This rule enforces a consistent React class style.

Examples

Examples of incorrect code for this rule by default:

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

Configuration

This rule accepts one of the following string values:

type: "always" | "never"

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

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

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/prefer-es6-class": "error",
  },
});

CLI

oxlint --deny react/prefer-es6-class --react-plugin

Version

This rule was added in v0.5.0.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground