|
21 | 21 | ## Basic Rules |
22 | 22 |
|
23 | 23 | - Only include one React component per file. |
24 | | - - However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint rule: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). |
| 24 | + - However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). |
25 | 25 | - Always use JSX syntax. |
26 | 26 | - Do not use `React.createElement` unless you're initializing the app from a file that is not JSX. |
27 | 27 |
|
28 | 28 | ## Class vs `React.createClass` vs stateless |
29 | 29 |
|
30 | | - - If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins. [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) |
| 30 | + - If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) |
31 | 31 |
|
32 | 32 | ```javascript |
33 | 33 | // bad |
|
68 | 68 |
|
69 | 69 | - **Extensions**: Use `.jsx` extension for React components. |
70 | 70 | - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. |
71 | | - - **Reference Naming**: Use PascalCase for React components and camelCase for their instances. [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) |
| 71 | + - **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) |
72 | 72 |
|
73 | 73 | ```javascript |
74 | 74 | // bad |
|
115 | 115 |
|
116 | 116 | ## Alignment |
117 | 117 |
|
118 | | - - Follow these alignment styles for JSX syntax. [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) |
| 118 | + - Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) |
119 | 119 |
|
120 | 120 | ```javascript |
121 | 121 | // bad |
|
142 | 142 |
|
143 | 143 | ## Quotes |
144 | 144 |
|
145 | | - - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS. [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes) |
| 145 | + - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS. eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes) |
146 | 146 |
|
147 | 147 | > Why? JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `"don't"` easier to type. |
148 | 148 | > Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention. |
|
198 | 198 | /> |
199 | 199 | ``` |
200 | 200 |
|
201 | | - - Omit the value of the prop when it is explicitly `true`. [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md) |
| 201 | + - Omit the value of the prop when it is explicitly `true`. eslint: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md) |
202 | 202 |
|
203 | 203 | ```javascript |
204 | 204 | // bad |
|
214 | 214 |
|
215 | 215 | ## Parentheses |
216 | 216 |
|
217 | | - - Wrap JSX tags in parentheses when they span more than one line. [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) |
| 217 | + - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) |
218 | 218 |
|
219 | 219 | ```javascript |
220 | 220 | // bad |
|
242 | 242 |
|
243 | 243 | ## Tags |
244 | 244 |
|
245 | | - - Always self-close tags that have no children. [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md) |
| 245 | + - Always self-close tags that have no children. eslint: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md) |
246 | 246 |
|
247 | 247 | ```javascript |
248 | 248 | // bad |
|
252 | 252 | <Foo className="stuff" /> |
253 | 253 | ``` |
254 | 254 |
|
255 | | - - If your component has multi-line properties, close its tag on a new line. [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) |
| 255 | + - If your component has multi-line properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) |
256 | 256 |
|
257 | 257 | ```javascript |
258 | 258 | // bad |
|
269 | 269 |
|
270 | 270 | ## Methods |
271 | 271 |
|
272 | | - - Bind event handlers for the render method in the constructor. [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) |
| 272 | + - Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) |
273 | 273 |
|
274 | 274 | > Why? A bind call in the render path creates a brand new function on every single render. |
275 | 275 |
|
|
375 | 375 | export default Link; |
376 | 376 | ``` |
377 | 377 |
|
378 | | - - Ordering for `React.createClass`: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md) |
| 378 | + - Ordering for `React.createClass`: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md) |
379 | 379 |
|
380 | 380 | 1. `displayName` |
381 | 381 | 1. `propTypes` |
|
401 | 401 |
|
402 | 402 | ## `isMounted` |
403 | 403 |
|
404 | | - - Do not use `isMounted`. [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md) |
| 404 | + - Do not use `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md) |
405 | 405 |
|
406 | 406 | > Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated. |
407 | 407 |
|
|
0 commit comments