general

GENERAL

Usage

• .eslintrc.json

{
    "extends": "@mgtitimoli/eslint-config-react/general"
}

Rules settings

react/no-multi-comp

Disallows the declaration of more than one custom component in the same file

configuration

{
    "react/no-multi-comp": "error"
}

react/no-string-refs

Disallows the use of strings in refs (this has been deprecated), enforcing the use of functions (to store the instance) in their place

configuration

{
    "react/no-string-refs": "error"
}

example

// BAD
import React, { Component } from "react";

class CustomInput extends Component {
    // ...

    render() {

        return (
            <input ref="input"/>
        );
    }
}

// GOOD
import React, { Component } from "react";

class CustomInput extends Component {
    // ...
    _input = null;

    _setInput(input) {

        this._input = input;
    }

    render() {

        return (
            <input ref={ this._setInput.bind(this) }/>
        );
    }
}

react/prefer-es6-class

Disallows the use of React.createClass, encouraging the declaration of components using the ES2015 alternative.

configuration

{
    "react/prefer-es6-class": "error"
}

example

// BAD
import React from "react";

const MyComponent = React.createClass({
    // ...
});

// GOOD
import React, { Component } from "react";

class MyComponent extends Component {
    // ...
}

react/prop-types

Warns when using props without having declared their types in propTypes

configuration

{
    "react/prop-types": "warn"
}

example

// BAD
import React, { Component } from "react";

class MyComponent extends Component {

    render() {

        return (
            <div className={ this.props.className }/>
        );
    }
}

// GOOD
import React, {
    Component,
    PropTypes
} from "react";

class MyComponent extends Component{

    static propTypes = {
        className: PropTypes.string
    };

    render() {

        return (
            <div className={ this.props.className }/>
        );
    }
}

react/require-render-return

Ensures the presence of a return statement in render methods

configuration

{
    "react/require-render-return": "error"
}

example

// BAD
class MyComponent extends Component {

    render() {

        <div/>;
    }
}

// GOOD
class MyComponent extends Component {

    render() {

        return (
            <div/>
        );
    }
}

react/self-closing-comp

Prevents the use of unnecessary closing tags for components without children

configuration

{
    "react/self-closing-comp": "error"
}

example

// BAD
class MyComponent extends Component {

    render() {

        return (
            <div></div>
        );
    }
}

// GOOD
class MyComponent extends Component {

    render() {

        return (
            <div/>
        );
    }
}

react/sort-comp

Enforces the following component members ordering:

1. Static
2. Lifecycle
   • displayName
   • propTypes
   • contextTypes
   • childContextTypes
   • defaultProps
   • constructor
   • state
   • getChildContext
   • componentWillMount
   • componentDidMount
   • componentWillReceiveProps
   • shouldComponentUpdate
   • componentWillUpdate
   • componentDidUpdate
   • componentWillUnmount
3. General purpose
4. Handlers (start with _handler)
5. Rendering (start with _render)

configuration

{
    "react/sort-comp": [ "error", {
        "order": [
            "static-methods",
            "lifecycle",
            "everything-else",
            "handlers",
            "rendering"
        ],
        "groups": {
            "handlers": [
                "/^_handle.+$/"
            ],
            "rendering": [
                "/^_render.+$/",
                "render"
            ]
        }
    } ]
}

react/wrap-multilines

Enforces enclosing multiline components with parentheses

configuration

{
    "react/wrap-multilines": "error"
}

example

// BAD
const content = <div>
    <p>Some text</p>
</div>;

// GOOD
const content = (
    <div>
        <p>Some text</p>
    </div>
);

react/sort-prop-types

Enforces prop types to be alphabetically sorted

configuration

{
    "react/sort-prop-types": "error"
}

example

// BAD
class MyComponent extends Component {

    static propTypes = {
        c: PropTypes.string,
        a: PropTypes.string,
        b: PropTypes.string
    }

    // ...
}

// GOOD
class MyComponent extends Component {

    static propTypes = {
        a: PropTypes.string,
        b: PropTypes.string,
        c: PropTypes.string
    }

    // ...
}