- Unless you will be using any of React's lifecycle methods, then always favor stateless function components over classes. Although there's no performance benefits when it comes to using stateless function components, what it offers is a cleaner look when writing your components.
- Always use a
constand an arrow function for your stateless components. Arrow functions preserve thethiskeyword so whenever you are inside your component, you are 100% sure that thethiskeyword is for that specific component. - The component should always be on the next line after your arrow function.
// Bad
function MyComponent() {
return (
<div className='my-component'>
{'Hello world'}
</div>
);
}
// Bad
class MyComponent extends Component {
render() {
return (
<div className='my-component'>
{'Hello world'}
</div>;
);
}
}
// Bad
const MyComponent = () => <div className='my-component'>
{'Hello world'}
</div>;// Good
const MyComponent = () =>
<div className='my-component'>
{'Hello world'}
</div>;-
Always use
.jsas your extension instead of.jsx -
Use lowercase and hypens for react component file names e.g.
my-component.js -
Use camelCase for instances
// Bad
const MyComponent = <MyComponent/>;
const my-component = <MyComponent/>;// Good
const myComponent = <MyComponent/>;- Use PascalCase for React components
// Bad
import myComponent from './my-component';
import my-component from './my-component';// Good
import MyComponent from './my-component';- Always use a
displayNamewhen naming your components. - It should have the same name as your arrow function.
- It should always be located immediately after your class or stateless component and separated by a new line.
// Bad
const MyComponent = () =>
<div className='my-component'>
{'Hello world'}
</div>;
MyComponent.displayName = 'MyComponent';
// Bad
const MyComponent = () =>
<div className='my-component'>
{'Hello world'}
</div>;
MyComponent.displayName = 'AnotherName';// Good
const MyComponent = () =>
<div className='my-component'>
{'Hello world'}
</div>;
MyComponent.displayName = 'MyComponent';- The top level element for your component should always have a
classNamewith the same name as your component separated by hyphens and in lowercase.
// Bad
const MyComponent = () =>
<div>
{'Hello world'}
</div>;
// Bad
const MyComponent = () =>
<div className='myComponent'>
{'Hello world'}
</div>;
// Bad
const MyComponent = () =>
<div className='MyComponent'>
{'Hello world'}
</div>;
// Bad
const MyComponent = () =>
<div className='my_component'>
{'Hello world'}
</div>;// Good
const MyComponent = () =>
<div className='my-component'>
{'Hello world'}
</div>;