|
23 | 23 | - Always use JSX syntax. |
24 | 24 | - Do not use `React.createElement` unless you're initializing the app from a file that is not JSX. |
25 | 25 |
|
26 | | -## Class vs React.createClass |
| 26 | +## Class vs `React.createClass` |
27 | 27 |
|
28 | | - - Use class extends React.Component unless you have a very good reason to use mixins. |
| 28 | + - Use `class extends React.Component` unless you have a very good reason to use mixins. |
29 | 29 |
|
30 | 30 | eslint rules: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md). |
31 | 31 |
|
|
81 | 81 |
|
82 | 82 |
|
83 | 83 | ## Declaration |
84 | | - - Do not use displayName for naming components. Instead, name the component by reference. |
| 84 | + - Do not use `displayName` for naming components. Instead, name the component by reference. |
85 | 85 |
|
86 | 86 | ```javascript |
87 | 87 | // bad |
|
261 | 261 |
|
262 | 262 | ## Ordering |
263 | 263 |
|
264 | | - - Ordering for class extends React.Component: |
265 | | -
|
266 | | - 1. constructor |
267 | | - 1. optional static methods |
268 | | - 1. getChildContext |
269 | | - 1. componentWillMount |
270 | | - 1. componentDidMount |
271 | | - 1. componentWillReceiveProps |
272 | | - 1. shouldComponentUpdate |
273 | | - 1. componentWillUpdate |
274 | | - 1. componentDidUpdate |
275 | | - 1. componentWillUnmount |
276 | | - 1. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() |
277 | | - 1. *getter methods for render* like getSelectReason() or getFooterContent() |
278 | | - 1. *Optional render methods* like renderNavigation() or renderProfilePicture() |
279 | | - 1. render |
280 | | -
|
281 | | - - How to define propTypes, defaultProps, contextTypes, etc... |
| 264 | + - Ordering for `class extends React.Component`: |
| 265 | +
|
| 266 | + 1. `constructor` |
| 267 | + 1. optional `static` methods |
| 268 | + 1. `getChildContext` |
| 269 | + 1. `componentWillMount` |
| 270 | + 1. `componentDidMount` |
| 271 | + 1. `componentWillReceiveProps` |
| 272 | + 1. `shouldComponentUpdate` |
| 273 | + 1. `componentWillUpdate` |
| 274 | + 1. `componentDidUpdate` |
| 275 | + 1. `componentWillUnmount` |
| 276 | + 1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()` |
| 277 | + 1. *getter methods for `render`* like `getSelectReason() or `getFooterContent()` |
| 278 | + 1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()` |
| 279 | + 1. `render` |
| 280 | +
|
| 281 | + - How to define `propTypes`, `defaultProps`, `contextTypes`, etc... |
282 | 282 |
|
283 | 283 | ```javascript |
284 | 284 | import React, { PropTypes } from 'react'; |
|
309 | 309 | export default Link; |
310 | 310 | ``` |
311 | 311 |
|
312 | | - - Ordering for React.createClass: |
313 | | -
|
314 | | - 1. displayName |
315 | | - 1. propTypes |
316 | | - 1. contextTypes |
317 | | - 1. childContextTypes |
318 | | - 1. mixins |
319 | | - 1. statics |
320 | | - 1. defaultProps |
321 | | - 1. getDefaultProps |
322 | | - 1. getInitialState |
323 | | - 1. getChildContext |
324 | | - 1. componentWillMount |
325 | | - 1. componentDidMount |
326 | | - 1. componentWillReceiveProps |
327 | | - 1. shouldComponentUpdate |
328 | | - 1. componentWillUpdate |
329 | | - 1. componentDidUpdate |
330 | | - 1. componentWillUnmount |
331 | | - 1. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() |
332 | | - 1. *getter methods for render* like getSelectReason() or getFooterContent() |
333 | | - 1. *Optional render methods* like renderNavigation() or renderProfilePicture() |
334 | | - 1. render |
| 312 | + - Ordering for `React.createClass`: |
| 313 | +
|
| 314 | + 1. `displayName` |
| 315 | + 1. `propTypes` |
| 316 | + 1. `contextTypes` |
| 317 | + 1. `childContextTypes` |
| 318 | + 1. `mixins` |
| 319 | + 1. `statics` |
| 320 | + 1. `defaultProps` |
| 321 | + 1. `getDefaultProps` |
| 322 | + 1. `getInitialState` |
| 323 | + 1. `getChildContext` |
| 324 | + 1. `componentWillMount` |
| 325 | + 1. `componentDidMount` |
| 326 | + 1. `componentWillReceiveProps` |
| 327 | + 1. `shouldComponentUpdate` |
| 328 | + 1. `componentWillUpdate` |
| 329 | + 1. `componentDidUpdate` |
| 330 | + 1. `componentWillUnmount` |
| 331 | + 1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()` |
| 332 | + 1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()` |
| 333 | + 1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()` |
| 334 | + 1. `render` |
335 | 335 |
|
336 | 336 | eslint rules: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md). |
337 | 337 |
|
|
0 commit comments