One Component Per File

Only include one React component per file. However, multiple stateless functions or pure components are allowed per file.

ESLint: react/no-multi-comp

JSX File Extension

Always use .jsx file extension for files with JSX syntax.

ESLint: react/jsx-filename-extension

File And Component Folder

The name of the file and the folder of components should exactly (case sensitive) match the name of the main (exported) component using PascalCase.

ESLint: react/jsx-pascal-case

Examples

⇣ Incorrect code for this rule:

// snow/Snow.jsx
export default class Snow extends React.Component {
  // ...
}

// Snow/snow.jsx
export default class Snow extends React.Component {
  // ...
}

// Snow/Frost.jsx
export default class Snow extends React.Component {
  // ...
}

⇡ Correct code for this rule:

// Snow/Snow.jsx
export default class Snow extends React.Component {
  // ...
}

References

Use PascalCase for components and camelCase for their instances.

ESLint: react/jsx-pascal-case

Examples

⇣ Incorrect code for this rule:

import snowFlake from "./SnowFlake";

const SnowFlake = <SnowFlake />;

⇡ Correct code for this rule:

import SnowFlake from "./SnowFlake";

const snowFlake = <SnowFlake />;