diff --git a/react/README.md b/react/README.md index afcf1020..3c01981f 100644 --- a/react/README.md +++ b/react/README.md @@ -20,7 +20,27 @@ - Only include one React component per file. - Always use JSX syntax. - - Do not use `React.createElement` unless you're initializing the app from a file that does not transform JSX. + - Do not use `React.createElement` unless you're initializing the app from a file that is not JSX. + +## Class vs React.createClass + + - Use class extends React.Component unless you have a very good reason to use mixins. + + ```javascript + // bad + const Listing = React.createClass({ + render() { + return
; + } + }); + + // good + class Listing extends React.Component { + render() { + return ; + } + } + ``` ## Naming @@ -65,9 +85,9 @@ }); // good - const ReservationCard = React.createClass({ - // stuff goes here - }); + class ReservationCard extends React.Component { + } + export default ReservationCard; ``` @@ -209,7 +229,7 @@ }); // good - React.createClass({ + class extends React.Component { onClickSubmit() { // do stuff } @@ -219,24 +239,77 @@ ``` ## Ordering - - Always follow the following order for methods in a React component: + + - Ordering for class extends React.Component: + + 1. constructor + 1. optional static methods + 1. getChildContext + 1. componentWillMount + 1. componentDidMount + 1. componentWillReceiveProps + 1. shouldComponentUpdate + 1. componentWillUpdate + 1. componentDidUpdate + 1. componentWillUnmount + 1. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() + 1. *getter methods for render* like getSelectReason() or getFooterContent() + 1. *Optional render methods* like renderNavigation() or renderProfilePicture() + 1. render + + - How to define propTypes, defaultProps, contextTypes, etc... + + ```javascript + import React, { Component, PropTypes } from 'react'; + + const propTypes = { + id: PropTypes.number.isRequired, + url: PropTypes.string.isRequired, + text: PropTypes.string, + }; + + const defaultProps = { + text: 'Hello World', + }; + + class Link extends Component { + static methodsAreOk() { + return true; + } + + render() { + return {this.props.text} + } + } + + Link.propTypes = propTypes; + Link.defaultProps = defaultProps; + + export default Link; + ``` + + - Ordering for React.createClass: 1. displayName - 2. mixins (as of React v0.13, mixins are deprecated) - 3. statics - 4. propTypes - 5. getDefaultProps - 6. getInitialState - 7. componentWillMount - 8. componentDidMount - 9. componentWillReceiveProps - 10. shouldComponentUpdate - 11. componentWillUpdate - 12. componentDidUpdate - 13. componentWillUnmount - 14. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() - 15. *getter methods for render* like getSelectReason() or getFooterContent() - 16. *Optional render methods* like renderNavigation() or renderProfilePicture() - 17. render + 1. propTypes + 1. contextTypes + 1. childContextTypes + 1. mixins + 1. statics + 1. defaultProps + 1. getDefaultProps + 1. getInitialState + 1. getChildContext + 1. componentWillMount + 1. componentDidMount + 1. componentWillReceiveProps + 1. shouldComponentUpdate + 1. componentWillUpdate + 1. componentDidUpdate + 1. componentWillUnmount + 1. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() + 1. *getter methods for render* like getSelectReason() or getFooterContent() + 1. *Optional render methods* like renderNavigation() or renderProfilePicture() + 1. render **[⬆ back to top](#table-of-contents)**