From 5c3137d7364b65c9e3300682dd53a68fd595bda2 Mon Sep 17 00:00:00 2001
From: Jordan Gensler <jordan.gensler@airbnb.com>
Date: Sun, 13 Dec 2015 18:36:25 -0800
Subject: [PATCH 1/3] Cleaning up the react styleguide. Adding additional info
 in props.

---
 packages/eslint-config-airbnb/rules/react.js |   3 +
 react/README.md                              | 115 +++++++++++++++++--
 2 files changed, 109 insertions(+), 9 deletions(-)

diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js
index 758f4e65f4..7f69354521 100644
--- a/packages/eslint-config-airbnb/rules/react.js
+++ b/packages/eslint-config-airbnb/rules/react.js
@@ -21,6 +21,9 @@ module.exports = {
     // Validate props indentation in JSX
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md
     'react/jsx-indent-props': [2, 2],
+    // Prevent usage of .bind() and arrow functions in JSX props
+    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
+    'react/jsx-no-bind': 2,
     // Prevent duplicate props in JSX
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md
     'react/jsx-no-duplicate-props': 0,
diff --git a/react/README.md b/react/README.md
index 48a50b8378..052949876c 100644
--- a/react/README.md
+++ b/react/README.md
@@ -56,10 +56,10 @@
 
     ```javascript
     // bad
-    const reservationCard = require('./ReservationCard');
+    import reservationCard from './ReservationCard';
 
     // good
-    const ReservationCard = require('./ReservationCard');
+    import ReservationCard from './ReservationCard';
 
     // bad
     const ReservationItem = <ReservationCard />;
@@ -72,13 +72,13 @@
 
     ```javascript
     // bad
-    const Footer = require('./Footer/Footer.jsx')
+    import Footer from './Footer/Footer.jsx';
 
     // bad
-    const Footer = require('./Footer/index.jsx')
+    import Footer from './Footer/index.jsx';
 
     // good
-    const Footer = require('./Footer')
+    import Footer from './Footer';
     ```
 
 ## Declaration
@@ -186,6 +186,22 @@
     />
     ```
 
+  - Omit the value of the prop when it is explicitly `true`.
+
+  eslint rules: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md).
+
+    ```javascript
+    // bad
+    <Foo
+      hidden={true}
+    />
+
+    // good
+    <Foo
+      hidden
+    />
+    ```
+
 ## Parentheses
 
   - Wrap JSX tags in parentheses when they span more than one line.
@@ -193,7 +209,7 @@
   eslint rules: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md).
 
     ```javascript
-    /// bad
+    // bad
     render() {
       return <MyComponent className="long body" foo="bar">
                <MyChild />
@@ -249,17 +265,53 @@
 
 ## Methods
 
+  - Bind event handlers for the render method in the constructor.
+
+  > Why? A bind call in a prop will create a brand new function on every single render.
+
+  eslint rules: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md).
+
+    ```javascript
+    // bad
+    class extends React.Component {
+      onClickDiv() {
+        // do stuff
+      }
+
+      render() {
+        return <div onClick={this.onClickDiv.bind(this)} />
+      }
+    }
+
+    // good
+    class extends React.Component {
+      constructor(props) {
+        super(props);
+
+        this.onClickDiv = this.onClickDiv.bind(this);
+      }
+
+      onClickDiv() {
+        // do stuff
+      }
+
+      render() {
+        return <div onClick={this.onClickDiv} />
+      }
+    }
+    ```
+
   - Do not use underscore prefix for internal methods of a React component.
 
     ```javascript
     // bad
-    React.createClass({
+    class extends React.Component {
       _onClickSubmit() {
         // do stuff
       }
 
       // other stuff
-    });
+    }
 
     // good
     class extends React.Component {
@@ -268,7 +320,52 @@
       }
 
       // other stuff
-    });
+    }
+    ```
+
+  - Prefix the name of event handlers with `on`.
+    ```javascript
+    // bad
+    class extends React.Component {
+      handleClickDiv() {
+        // do stuff
+      }
+
+      // other stuff
+    }
+
+    // good
+    class extends React.Component {
+      onClickDiv() {
+        // do stuff
+      }
+
+      // other stuff
+    }
+    ```
+
+  - Prefix the name of additional render methods with `render`.
+
+    ```javascript
+    // bad
+    class extends React.Component {
+      createNavigation(){
+        // render stuff
+      }
+      render() {
+        {this.createNavigation()}
+      }
+    }
+
+    // good
+    class extends React.Component {
+      renderNavigation(){
+        // render stuff
+      }
+      render() {
+        {this.renderNavigation()}
+      }
+    }
     ```
 
 ## Ordering

From ae691883043ed06c32e94e50d3dc5d201190ba79 Mon Sep 17 00:00:00 2001
From: Jordan Gensler <jordan.gensler@airbnb.com>
Date: Sun, 13 Dec 2015 21:21:23 -0800
Subject: [PATCH 2/3] Removing file extensions. Fixing typos.

---
 react/README.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/react/README.md b/react/README.md
index 052949876c..42ab6abc2a 100644
--- a/react/README.md
+++ b/react/README.md
@@ -68,14 +68,14 @@
     const reservationItem = <ReservationCard />;
     ```
 
-  **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name:
+  - **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name:
 
     ```javascript
     // bad
-    import Footer from './Footer/Footer.jsx';
+    import Footer from './Footer/Footer';
 
     // bad
-    import Footer from './Footer/index.jsx';
+    import Footer from './Footer/index';
 
     // good
     import Footer from './Footer';
@@ -267,7 +267,7 @@
 
   - Bind event handlers for the render method in the constructor.
 
-  > Why? A bind call in a prop will create a brand new function on every single render.
+  > Why? A bind call in a the render path create a brand new function on every single render.
 
   eslint rules: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md).
 
@@ -305,13 +305,13 @@
 
     ```javascript
     // bad
-    class extends React.Component {
+    React.createClass({
       _onClickSubmit() {
         // do stuff
-      }
+      },
 
       // other stuff
-    }
+    });
 
     // good
     class extends React.Component {
@@ -349,7 +349,7 @@
     ```javascript
     // bad
     class extends React.Component {
-      createNavigation(){
+      createNavigation() {
         // render stuff
       }
       render() {
@@ -359,7 +359,7 @@
 
     // good
     class extends React.Component {
-      renderNavigation(){
+      renderNavigation() {
         // render stuff
       }
       render() {

From e12e5f0480c958dabd2476aac8fe1890b3185a9b Mon Sep 17 00:00:00 2001
From: Jordan Gensler <jordan.gensler@airbnb.com>
Date: Wed, 23 Dec 2015 12:16:15 -0800
Subject: [PATCH 3/3] Removing name prefix rules.

---
 react/README.md | 45 ---------------------------------------------
 1 file changed, 45 deletions(-)

diff --git a/react/README.md b/react/README.md
index 42ab6abc2a..e6b4a331bc 100644
--- a/react/README.md
+++ b/react/README.md
@@ -323,51 +323,6 @@
     }
     ```
 
-  - Prefix the name of event handlers with `on`.
-    ```javascript
-    // bad
-    class extends React.Component {
-      handleClickDiv() {
-        // do stuff
-      }
-
-      // other stuff
-    }
-
-    // good
-    class extends React.Component {
-      onClickDiv() {
-        // do stuff
-      }
-
-      // other stuff
-    }
-    ```
-
-  - Prefix the name of additional render methods with `render`.
-
-    ```javascript
-    // bad
-    class extends React.Component {
-      createNavigation() {
-        // render stuff
-      }
-      render() {
-        {this.createNavigation()}
-      }
-    }
-
-    // good
-    class extends React.Component {
-      renderNavigation() {
-        // render stuff
-      }
-      render() {
-        {this.renderNavigation()}
-      }
-    }
-    ```
-
 ## Ordering
 
   - Ordering for `class extends React.Component`: