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