Update React style guide with new rules

This formalizes the rules that we've been following for class extends React.Component and also updates our ordering with whats in the eslintrc file.

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)**