Merge pull request #425 from airbnb/goatslacker-patch-1

Update React style guide with new rules

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 <div />;
+    }
+  });
+  
+  // good
+  class Listing extends React.Component {
+    render() {
+      return <div />;
+    }
+  }
+  ```
 
 ## 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 <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
+    }
+  }
+  
+  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)**