React

Display name

Prevent missing displayName in a React component definition

✅ Enabled (error)

// Bad
/*
const Hello = React.createClass({
	render: function () {
		return (<div>Hello {this.props.name}</div>);
	}
});
*/

Forbid prop types

Forbid certain propTypes (any, array, object)

❌ Disabled

Jsx boolean value

Enforce boolean attributes notation in JSX

✅ Enabled (error)

// Bad
/*
const Hello = <Hello personal={true} />;
*/

// Good
const Hello = <Hello personal />;

Jsx closing bracket location

Validate closing bracket location in JSX

✅ Enabled (error)

// Bad
/*
<Hello
	firstName="John"
	lastName="Smith" />;

<Hello
	firstName="John"
	lastName="Smith"
	/>;
*/

// Good
<Hello
	firstName="John"
	lastName="Smith"
/>;

Jsx curly spacing

Enforce or disallow spaces inside of curly braces in JSX attributes

✅ Enabled (error)

// Bad
/*
<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
*/

// Good
<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello name={
	firstname
}
/>;

Jsx equals spacing

enforce spacing around jsx equals signs

✅ Enabled (error)

// Bad
/*
<Hello name = {firstname} />;
<Hello name ={firstname} />;
<Hello name= {firstname} />;
*/

// Good
<Hello name={firstname} />;
<Hello name />;
<Hello {...props} />;

Jsx first prop new line

Require that the first prop in a JSX element be on a new line when the element is multiline

✅ Enabled (error)

// Bad
/*
<Hello personal
	prop />;
*/

// Good
<Hello
	personal
	prop
/>;

Jsx handler names

Enforce event handler naming conventions in JSX

✅ Enabled (error)

// Bad
/*
<MyComponent handleChange={this.handleChange} />;
<MyComponent onChange={this.componentChanged} />;
*/

// Good
<MyComponent onChange={this.handleChange} />;
<MyComponent onChange={this.props.onFoo} />;

Jsx indent props

Validate props indentation in JSX

✅ Enabled (error)

// Bad
/*
// 2 spaces indentation
<Hello
  firstName="John"
/>;

// no indentation
<Hello
firstName="John"
/>;
*/

// Good
<Hello
	firstName="John"
/>;

Jsx indent

enforce JSX indentation

✅ Enabled (error)

// Bad
/*
// 2 spaces indentation
<App>
  <Hello />
</App>;

// no indentation
<App>
<Hello />
</App>;
*/

// Good
// 1 tab indentation
<App>
	<Hello />
</App>;

Jsx key

Validate JSX has key prop when in array or iterator

✅ Enabled (error)

// Bad
/*
[<Hello />, <Hello />, <Hello />];
out.map((x) => <Hello>x</Hello>);
*/

// Good
[<Hello key="1" />, <Hello key="2" />, <Hello key="3" />];
out.map((x, i) => <Hello key={i}>x</Hello>);

Jsx max props per line

Limit maximum of props on a single line in JSX

✅ Enabled (error)

// Bad
/*
<Hello firstName="John" lastName="Smith" tel={5555555} />;
*/

// Good
<Hello firstName="John" lastName="Smith" />;
<Hello
	firstName="John"
	lastName="Smith"
	tel={5555555}
/>;

Jsx no bind

Prevent usage of .bind() in JSX props

✅ Enabled (error)

// Bad
/*
<div onClick={this.handleClick.bind(this)}></div>;
*/

// Good
<div onClick={this.handleClick}></div>;

Jsx no duplicate props

Prevent duplicate props in JSX

✅ Enabled (error)

// Bad
/*
<Hello name="John" name="John" />;
*/

// Good
<Hello firstname="John" lastname="Doe" />;

Jsx no literals

Prevent usage of unwrapped JSX strings

❌ Disabled

// Bad
const A = <div>test</div>;

// Good
const B = <div>{test}</div>;

Jsx no target blank

disallow target="_blank" on links

❌ Disabled

// Bad
const Hello = <a target="_blank"></a>;

Jsx no undef

Disallow undeclared variables in JSX

✅ Enabled (error)

// Bad
/*
<Hello name="John" />;
*/

// Good
const Hello2 = require('./Hello');
<Hello2 name="John" />;

Jsx pascal case

Enforce PascalCase for user-defined JSX components

✅ Enabled (error)

// Bad
/*
<Test_component />;
<TEST_COMPONENT />;
*/

// Good
<TestComponent />;

Jsx quotes

specify whether double or single quotes should be used in JSX attributes

✅ Enabled (error)

Jsx sort props

Enforce props alphabetical sorting

✅ Enabled (error)

// Bad
/*
<Hello
	active
	onClick={this.handleClick}
	tel={5555555}
	validate
	firstName="John"
	lastName="Smith"
/>;
*/

// Good
<Hello
	active
	validate
	firstName="John"
	lastName="Smith"
	tel={5555555}
	onClick={this.handleClick}
/>;

Jsx tag spacing

Enforce spaces before the closing bracket of self-closing JSX elements

✅ Enabled (error)

// Bad
/*
<Hello/>;
<Hello firstName="John"/>;
*/

// Good
<Hello />;
<Hello firstName="John" />;

Jsx uses react

Prevent React to be incorrectly marked as unused

✅ Enabled (error)

const React = require('react');

Jsx uses vars

Prevent variables used in JSX to be incorrectly marked as unused

✅ Enabled (error)

No danger

Prevent usage of dangerous JSX properties

❌ Disabled

const Hello = (<div dangerouslySetInnerHTML={{ __html: 'Hello World' }}></div>);

No deprecated

Prevent usage of deprecated methods

✅ Enabled (error)

// Bad
/*
React.render(<MyComponent />, root);
React.unmountComponentAtNode(root);
React.findDOMNode(this.refs.foo);
React.renderToString(<MyComponent />);
React.renderToStaticMarkup(<MyComponent />);
*/

No did mount set state

Prevent usage of setState in componentDidMount

✅ Enabled (error)

// Bad
/*
class Hello extends Component {
	componentDidMount() {
		this.setState({
 			isLoading: true
		});
	}
	render() {
		return <div>Hello {this.state.name}</div>;
	}
}
*/

// Good
class Hello extends Component {
	constructor() {
		// initialState
		this.state = {
			isLoading: true,
		};
	}
	render() {
		return <div>Hello {this.state.name}</div>;
	}
}

No did update set state

Prevent usage of setState in componentDidUpdate

✅ Enabled (error)

// Bad
/*
const Hello = React.createClass({
	componentDidUpdate() {
		this.setState({
			name: this.props.name.toUpperCase()
		});
	},
	render() {
		return <div>Hello {this.state.name}</div>;
	}
});
*/

No direct mutation state

Prevent direct mutation of this.state

❌ Disabled

// Bad
/*
class Hello extends Component {
	constructor() {
		this.state = {
			isOpen: false
		};
	}
	handleClick() {
		this.state.isOpen = true;
	}
	render() {
		return <div onClick={this.handleClick}>Hello</div>;
	}
}
*/

// Good
class Hello extends Component {
	constructor() {
		this.state = {
			isOpen: false,
		};
	}
	handleClick() {
		this.setState({
			isOpen: true,
		});
	}
	render() {
		return <div onClick={this.handleClick}>Hello</div>;
	}
}

No is mounted

Prevent usage of isMounted

✅ Enabled (error)

// Bad
/*
const Hello = React.createClass({
	handleClick() {
		if (this.isMounted()) {
			// do something
		}
	},
	render() {
		return <div onClick={this.handleClick}>Hello</div>;
	}
});
*/

No multi comp

Prevent multiple component definition per file

✅ Enabled (error)

// Bad
/*
const Hello = React.createClass({
	render() {
		return <div>Hello {this.props.name}</div>;
	}
});

const HelloJohn = React.createClass({
	render() {
		return <Hello name="John" />;
	}
});
*/

No set state

Prevent usage of setState

❌ Disabled

No string refs

Prevent using string references

❌ Disabled

No unknown property

Prevent usage of unknown DOM property

✅ Enabled (error)

// Bad
/*
const Hello = <div class="hello">Hello World</div>;
*/

// Good
const Hello = <div className="hello">Hello World</div>;

Prefer es6 class

Require ES6 class declarations over React.createClass

✅ Enabled (error)

// Bad
/*
const Hello = React.createClass({
	render: function () {
		return <div>Hello {this.props.name}</div>;
	}
});
*/

// Good
class Hello extends React.Component {
	render() {
		return <div>Hello {this.props.name}</div>;
	}
}

Prefer stateless function

Require stateless functions when not using lifecycle methods, setState or ref

✅ Enabled (error)

// Bad
/*
class Foo extends React.Component {
	render() {
		if (!this.props.foo) {
			return null;
		}
		return <div>{this.props.foo}</div>;
	}
}
*/

// Good
const Foo = function (props) {
	return <div>{props.foo}</div>;
};

Prop types

Prevent missing props validation in a React component definition

✅ Enabled (error)

// Bad
/*
class Hello extends Component {
	render() {
		return <div>Hello {this.props.name}</div>;
	}
});
*/

// Good
class Hello extends Component {
	render() {
		return <div>Hello {this.props.name}</div>;
	}
}
Hello.propTypes = {
	name: PropTypes.string.isRequired,
};

React in jsx scope

Prevent missing React when using JSX

✅ Enabled (error)

// Good
const React = require('react');

Require extension

Restrict file extensions that may be required

❌ Disabled

Require render return

Require render() methods to return something

✅ Enabled (error)

// Bad
/*
class Hello extends React.Component {
	render() {
		<div>Hello</div>;
	}
}
*/

// Good
class Hello extends React.Component {
	render() {
		return <div>Hello</div>;
	}
}

Self closing comp

Prevent extra closing tags for components without children

✅ Enabled (error)

// Bad
/*
const HelloJohn = <Hello name="John"></Hello>;
*/

// Good
const HelloJohn = <Hello name="John" />;

Sort comp

Enforce component methods order

✅ Enabled (error)

// Good
class Hello extends React.Component {

	// Static
	static isAllowed() {}

	// Lifecycle
	static getDerivedStateFromProps(props, state) {}
	componentDidMount() {}
	shouldComponentUpdate() {}
	getSnapshotBeforeUpdate() {}
	componentDidUpdate() {}
	componentWillUnmount() {}

	// Handle
	handleClick() {}

	// get set
	get test() {}
	set test(value) {}

	// everything else
	onClick() {}

	// render*
	renderButton() {}

	// render
	render() {
		return <div>{this.renderButton()}</div>;
	}
}

Sort prop types

Enforce propTypes declarations alphabetical sorting

✅ Enabled (error)

Test.propTypes = {
	ab: PropTypes.object.isRequired,
	aa: PropTypes.object,
	b: PropTypes.object,
	x: PropTypes.object,
	onClick: PropTypes.func,
};

Test2.propTypes = {
	ab: PropTypes.object.isRequired,
	onHover: PropTypes.func.isRequired,
	aa: PropTypes.object,
	b: PropTypes.object,
	x: PropTypes.object,
	onClick: PropTypes.func,
};

Wrap multilines

Prevent missing parentheses around multilines JSX

✅ Enabled (error)

Files

react.md

Latest commit

History

react.md

File metadata and controls

React