From d421d6805478cb345e7931d8ca240fb3d630161f Mon Sep 17 00:00:00 2001
From: Dustin Falgout <dustin@falgout.us>
Date: Mon, 20 Jul 2020 01:39:50 -0500
Subject: [PATCH] fix: More updates to style guides.

build:  [skip-ci]
---
 README.md                   |   5 +-
 css-in-javascript/README.md | 432 ------------------------------------
 react/README.md             | 347 ++++++++++++-----------------
 3 files changed, 140 insertions(+), 644 deletions(-)
 delete mode 100644 css-in-javascript/README.md

diff --git a/README.md b/README.md
index 26efcd7f9d..ef7ea76506 100644
--- a/README.md
+++ b/README.md
@@ -3719,12 +3719,11 @@ Other Style Guides
 **Tools**
 
   - Code Style Linters
-    - [ESlint](https://eslint.org/) - [Airbnb Style .eslintrc](https://github.com/elegantthemes/javascript/blob/master/linters/.eslintrc)
-    - [JSHint](http://jshint.com/) - [Airbnb Style .jshintrc](https://github.com/elegantthemes/javascript/blob/master/linters/.jshintrc)
-  - Neutrino Preset - [@neutrinojs/airbnb](https://neutrinojs.org/packages/airbnb/)
+    - [ESlint](https://eslint.org/) - [Elegant Themes Style .eslintrc](https://github.com/elegantthemes/javascript/blob/master/linters/.eslintrc)
 
 **Other Style Guides**
 
+  - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
   - [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
   - [Google JavaScript Style Guide (Old)](https://google.github.io/styleguide/javascriptguide.xml)
   - [jQuery Core Style Guidelines](https://contribute.jquery.org/style-guide/js/)
diff --git a/css-in-javascript/README.md b/css-in-javascript/README.md
deleted file mode 100644
index d6162df55d..0000000000
--- a/css-in-javascript/README.md
+++ /dev/null
@@ -1,432 +0,0 @@
-# Airbnb CSS-in-JavaScript Style Guide
-
-*A mostly reasonable approach to CSS-in-JavaScript*
-
-## Table of Contents
-
-1. [Naming](#naming)
-1. [Ordering](#ordering)
-1. [Nesting](#nesting)
-1. [Inline](#inline)
-1. [Themes](#themes)
-
-## Naming
-
-  - Use camelCase for object keys (i.e. "selectors").
-
-    > Why? We access these keys as properties on the `styles` object in the component, so it is most convenient to use camelCase.
-
-    ```js
-    // bad
-    {
-      'bermuda-triangle': {
-        display: 'none',
-      },
-    }
-
-    // good
-    {
-      bermudaTriangle: {
-        display: 'none',
-      },
-    }
-    ```
-
-  - Use an underscore for modifiers to other styles.
-
-    > Why? Similar to BEM, this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.
-
-    ```js
-    // bad
-    {
-      bruceBanner: {
-        color: 'pink',
-        transition: 'color 10s',
-      },
-
-      bruceBannerTheHulk: {
-        color: 'green',
-      },
-    }
-
-    // good
-    {
-      bruceBanner: {
-        color: 'pink',
-        transition: 'color 10s',
-      },
-
-      bruceBanner_theHulk: {
-        color: 'green',
-      },
-    }
-    ```
-
-  - Use `selectorName_fallback` for sets of fallback styles.
-
-    > Why? Similar to modifiers, keeping the naming consistent helps reveal the relationship of these styles to the styles that override them in more adequate browsers.
-
-    ```js
-    // bad
-    {
-      muscles: {
-        display: 'flex',
-      },
-
-      muscles_sadBears: {
-        width: '100%',
-      },
-    }
-
-    // good
-    {
-      muscles: {
-        display: 'flex',
-      },
-
-      muscles_fallback: {
-        width: '100%',
-      },
-    }
-    ```
-
-  - Use a separate selector for sets of fallback styles.
-
-    > Why? Keeping fallback styles contained in a separate object clarifies their purpose, which improves readability.
-
-    ```js
-    // bad
-    {
-      muscles: {
-        display: 'flex',
-      },
-
-      left: {
-        flexGrow: 1,
-        display: 'inline-block',
-      },
-
-      right: {
-        display: 'inline-block',
-      },
-    }
-
-    // good
-    {
-      muscles: {
-        display: 'flex',
-      },
-
-      left: {
-        flexGrow: 1,
-      },
-
-      left_fallback: {
-        display: 'inline-block',
-      },
-
-      right_fallback: {
-        display: 'inline-block',
-      },
-    }
-    ```
-
-  - Use device-agnostic names (e.g. "small", "medium", and "large") to name media query breakpoints.
-
-    > Why? Commonly used names like "phone", "tablet", and "desktop" do not match the characteristics of the devices in the real world. Using these names sets the wrong expectations.
-
-    ```js
-    // bad
-    const breakpoints = {
-      mobile: '@media (max-width: 639px)',
-      tablet: '@media (max-width: 1047px)',
-      desktop: '@media (min-width: 1048px)',
-    };
-
-    // good
-    const breakpoints = {
-      small: '@media (max-width: 639px)',
-      medium: '@media (max-width: 1047px)',
-      large: '@media (min-width: 1048px)',
-    };
-    ```
-
-## Ordering
-
-  - Define styles after the component.
-
-    > Why? We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection.
-
-    ```jsx
-    // bad
-    const styles = {
-      container: {
-        display: 'inline-block',
-      },
-    };
-
-    function MyComponent({ styles }) {
-      return (
-        <div {...css(styles.container)}>
-          Never doubt that a small group of thoughtful, committed citizens can
-          change the world. Indeed, it’s the only thing that ever has.
-        </div>
-      );
-    }
-
-    export default withStyles(() => styles)(MyComponent);
-
-    // good
-    function MyComponent({ styles }) {
-      return (
-        <div {...css(styles.container)}>
-          Never doubt that a small group of thoughtful, committed citizens can
-          change the world. Indeed, it’s the only thing that ever has.
-        </div>
-      );
-    }
-
-    export default withStyles(() => ({
-      container: {
-        display: 'inline-block',
-      },
-    }))(MyComponent);
-    ```
-
-## Nesting
-
-  - Leave a blank line between adjacent blocks at the same indentation level.
-
-    > Why? The whitespace improves readability and reduces the likelihood of merge conflicts.
-
-    ```js
-    // bad
-    {
-      bigBang: {
-        display: 'inline-block',
-        '::before': {
-          content: "''",
-        },
-      },
-      universe: {
-        border: 'none',
-      },
-    }
-
-    // good
-    {
-      bigBang: {
-        display: 'inline-block',
-
-        '::before': {
-          content: "''",
-        },
-      },
-
-      universe: {
-        border: 'none',
-      },
-    }
-    ```
-
-## Inline
-
-  - Use inline styles for styles that have a high cardinality (e.g. uses the value of a prop) and not for styles that have a low cardinality.
-
-    > Why? Generating themed stylesheets can be expensive, so they are best for discrete sets of styles.
-
-    ```jsx
-    // bad
-    export default function MyComponent({ spacing }) {
-      return (
-        <div style={{ display: 'table', margin: spacing }} />
-      );
-    }
-
-    // good
-    function MyComponent({ styles, spacing }) {
-      return (
-        <div {...css(styles.periodic, { margin: spacing })} />
-      );
-    }
-    export default withStyles(() => ({
-      periodic: {
-        display: 'table',
-      },
-    }))(MyComponent);
-    ```
-
-## Themes
-
-  - Use an abstraction layer such as [react-with-styles](https://github.com/airbnb/react-with-styles) that enables theming. *react-with-styles gives us things like `withStyles()`, `ThemedStyleSheet`, and `css()` which are used in some of the examples in this document.*
-
-  > Why? It is useful to have a set of shared variables for styling your components. Using an abstraction layer makes this more convenient. Additionally, this can help prevent your components from being tightly coupled to any particular underlying implementation, which gives you more freedom.
-
-  - Define colors only in themes.
-
-    ```js
-    // bad
-    export default withStyles(() => ({
-      chuckNorris: {
-        color: '#bada55',
-      },
-    }))(MyComponent);
-
-    // good
-    export default withStyles(({ color }) => ({
-      chuckNorris: {
-        color: color.badass,
-      },
-    }))(MyComponent);
-    ```
-
-  - Define fonts only in themes.
-
-    ```js
-    // bad
-    export default withStyles(() => ({
-      towerOfPisa: {
-        fontStyle: 'italic',
-      },
-    }))(MyComponent);
-
-    // good
-    export default withStyles(({ font }) => ({
-      towerOfPisa: {
-        fontStyle: font.italic,
-      },
-    }))(MyComponent);
-    ```
-
-  - Define fonts as sets of related styles.
-
-    ```js
-    // bad
-    export default withStyles(() => ({
-      towerOfPisa: {
-        fontFamily: 'Italiana, "Times New Roman", serif',
-        fontSize: '2em',
-        fontStyle: 'italic',
-        lineHeight: 1.5,
-      },
-    }))(MyComponent);
-
-    // good
-    export default withStyles(({ font }) => ({
-      towerOfPisa: {
-        ...font.italian,
-      },
-    }))(MyComponent);
-    ```
-
-  - Define base grid units in theme (either as a value or a function that takes a multiplier).
-
-    ```js
-    // bad
-    export default withStyles(() => ({
-      rip: {
-        bottom: '-6912px', // 6 feet
-      },
-    }))(MyComponent);
-
-    // good
-    export default withStyles(({ units }) => ({
-      rip: {
-        bottom: units(864), // 6 feet, assuming our unit is 8px
-      },
-    }))(MyComponent);
-
-    // good
-    export default withStyles(({ unit }) => ({
-      rip: {
-        bottom: 864 * unit, // 6 feet, assuming our unit is 8px
-      },
-    }))(MyComponent);
-    ```
-
-  - Define media queries only in themes.
-
-    ```js
-    // bad
-    export default withStyles(() => ({
-      container: {
-        width: '100%',
-
-        '@media (max-width: 1047px)': {
-          width: '50%',
-        },
-      },
-    }))(MyComponent);
-
-    // good
-    export default withStyles(({ breakpoint }) => ({
-      container: {
-        width: '100%',
-
-        [breakpoint.medium]: {
-          width: '50%',
-        },
-      },
-    }))(MyComponent);
-    ```
-
-  - Define tricky fallback properties in themes.
-
-    > Why? Many CSS-in-JavaScript implementations merge style objects together which makes specifying fallbacks for the same property (e.g. `display`) a little tricky. To keep the approach unified, put these fallbacks in the theme.
-
-    ```js
-    // bad
-    export default withStyles(() => ({
-      .muscles {
-        display: 'flex',
-      },
-
-      .muscles_fallback {
-        'display ': 'table',
-      },
-    }))(MyComponent);
-
-    // good
-    export default withStyles(({ fallbacks }) => ({
-      .muscles {
-        display: 'flex',
-      },
-
-      .muscles_fallback {
-        [fallbacks.display]: 'table',
-      },
-    }))(MyComponent);
-
-    // good
-    export default withStyles(({ fallback }) => ({
-      .muscles {
-        display: 'flex',
-      },
-
-      .muscles_fallback {
-        [fallback('display')]: 'table',
-      },
-    }))(MyComponent);
-    ```
-
-  - Create as few custom themes as possible. Many applications may only have one theme.
-
-  - Namespace custom theme settings under a nested object with a unique and descriptive key.
-
-    ```js
-    // bad
-    ThemedStyleSheet.registerTheme('mySection', {
-      mySectionPrimaryColor: 'green',
-    });
-
-    // good
-    ThemedStyleSheet.registerTheme('mySection', {
-      mySection: {
-        primaryColor: 'green',
-      },
-    });
-    ```
-
----
-
-CSS puns adapted from [Saijo George](https://saijogeorge.com/css-puns/).
diff --git a/react/README.md b/react/README.md
index 99518e5a75..45cff36348 100644
--- a/react/README.md
+++ b/react/README.md
@@ -1,6 +1,6 @@
 # Airbnb React/JSX Style Guide
 
-*A mostly reasonable approach to React and JSX*
+*A truly reasonable approach to React and JSX*
 
 This style guide is mostly based on the standards that are currently prevalent in JavaScript, although some conventions (i.e async/await or static class fields) may still be included or prohibited on a case-by-case basis. Currently, anything prior to stage 3 is not included nor recommended in this guide.
 
@@ -83,7 +83,7 @@ This style guide is mostly based on the standards that are currently prevalent i
 
   - **Extensions**: Use `.jsx` extension for React components. eslint: [`react/jsx-filename-extension`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)
   - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
-  - **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
+  - **Reference Naming**: Use PascalCase for React components and snake_case for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
 
     ```jsx
     // bad
@@ -96,7 +96,7 @@ This style guide is mostly based on the standards that are currently prevalent i
     const ReservationItem = <ReservationCard />;
 
     // good
-    const reservationItem = <ReservationCard />;
+    const reservation_item = <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:
@@ -189,10 +189,7 @@ This style guide is mostly based on the standards that are currently prevalent i
     <Foo bar="bar" />
 
     // children get indented normally
-    <Foo
-      superLongParam="bar"
-      anotherSuperLongParam="baz"
-    >
+    <Foo superLongParam="bar" anotherSuperLongParam="baz">
       <Quux />
     </Foo>
 
@@ -207,7 +204,7 @@ This style guide is mostly based on the standards that are currently prevalent i
         <Button />
     }
 
-    // good
+    // bad
     {showButton && (
       <Button />
     )}
@@ -267,19 +264,20 @@ This style guide is mostly based on the standards that are currently prevalent i
 
 ## Props
 
-  - Always use camelCase for prop names.
+  - Use camelCase for prop names whose value is callable, snake_case otherwise.
 
     ```jsx
     // bad
     <Foo
       UserName="hello"
-      phone_number={12345678}
+      PhoneNumber={12345678}
     />
 
     // good
     <Foo
-      userName="hello"
-      phoneNumber={12345678}
+      user_name="hello"
+      phone_number={12345678}
+      renderProp={someCallable}
     />
     ```
 
@@ -343,121 +341,119 @@ This style guide is mostly based on the standards that are currently prevalent i
 
   - Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
 
-  > Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.
+    > Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.
 
-  ```jsx
-  // bad
-  <div accessKey="h" />
+    ```jsx
+    // bad
+    <div accessKey="h" />
 
-  // good
-  <div />
-  ```
+    // good
+    <div />
+    ```
 
   - Avoid using an array index as `key` prop, prefer a stable ID. eslint: [`react/no-array-index-key`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md)
 
-> Why? Not using a stable ID [is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) because it can negatively impact performance and cause issues with component state.
+    > Why? Not using a stable ID [is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) because it can negatively impact performance and cause issues with component state.
 
-We don’t recommend using indexes for keys if the order of items may change.
+    We don’t recommend using indexes for keys if the order of items may change.
 
-  ```jsx
-  // bad
-  {todos.map((todo, index) =>
-    <Todo
-      {...todo}
-      key={index}
-    />
-  )}
+    ```jsx
+    // bad
+    {todos.map((todo, index) =>
+      <Todo
+        {...todo}
+        key={index}
+      />
+    )}
 
-  // good
-  {todos.map(todo => (
-    <Todo
-      {...todo}
-      key={todo.id}
-    />
-  ))}
-  ```
+    // good
+    {todos.map(todo => (
+      <Todo
+        {...todo}
+        key={todo.id}
+      />
+    ))}
+    ```
 
   - Always define explicit defaultProps for all non-required props.
 
-  > Why? propTypes are a form of documentation, and providing defaultProps means the reader of your code doesn’t have to assume as much. In addition, it can mean that your code can omit certain type checks.
-
-  ```jsx
-  // bad
-  function SFC({ foo, bar, children }) {
-    return <div>{foo}{bar}{children}</div>;
-  }
-  SFC.propTypes = {
-    foo: PropTypes.number.isRequired,
-    bar: PropTypes.string,
-    children: PropTypes.node,
-  };
-
-  // good
-  function SFC({ foo, bar, children }) {
-    return <div>{foo}{bar}{children}</div>;
-  }
-  SFC.propTypes = {
-    foo: PropTypes.number.isRequired,
-    bar: PropTypes.string,
-    children: PropTypes.node,
-  };
-  SFC.defaultProps = {
-    bar: '',
-    children: null,
-  };
-  ```
-
-  - Use spread props sparingly.
-  > Why? Otherwise you’re more likely to pass unnecessary props down to components. And for React v15.6.1 and older, you could [pass invalid HTML attributes to the DOM](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html).
+    > Why? propTypes are a form of documentation, and providing defaultProps means the reader of your code doesn’t have to assume as much. In addition, it can mean that your code can omit certain type checks.
 
-  Exceptions:
-
-  - HOCs that proxy down props and hoist propTypes
+    ```jsx
+    // bad
+    function SFC({ foo, bar, children }) {
+      return <div>{foo}{bar}{children}</div>;
+    }
+    SFC.propTypes = {
+      foo: PropTypes.number.isRequired,
+      bar: PropTypes.string,
+      children: PropTypes.node,
+    };
 
-  ```jsx
-  function HOC(WrappedComponent) {
-    return class Proxy extends React.Component {
-      Proxy.propTypes = {
-        text: PropTypes.string,
-        isLoading: PropTypes.bool
-      };
+    // good
+    function SFC({ foo, bar, children }) {
+      return <div>{foo}{bar}{children}</div>;
+    }
+    SFC.propTypes = {
+      foo: PropTypes.number.isRequired,
+      bar: PropTypes.string,
+      children: PropTypes.node,
+    };
+    SFC.defaultProps = {
+      bar: '',
+      children: null,
+    };
+    ```
 
-      render() {
-        return <WrappedComponent {...this.props} />
+  - Use spread props sparingly.
+    > Why? Otherwise you’re more likely to pass unnecessary props down to components.
+
+    Exceptions:
+
+    - HOCs that proxy down props and hoist propTypes
+      ```jsx
+      function HOC(WrappedComponent) {
+        return class Proxy extends React.Component {
+          prop_types = {
+            text: PropTypes.string,
+            isLoading: PropTypes.bool
+          };
+
+          render() {
+            return <WrappedComponent {...this.props} />
+          }
+        }
       }
-    }
-  }
-  ```
+      ```
 
   - Spreading objects with known, explicit props. This can be particularly useful when testing React components with Mocha’s beforeEach construct.
 
-  ```jsx
-  export default function Foo {
-    const props = {
-      text: '',
-      isPublished: false
-    }
+    ```jsx
+    export default function Foo() {
+      const props = {
+        text: '',
+        isPublished: false
+      }
 
-    return (<div {...props} />);
-  }
-  ```
+      return (<div {...props} />);
+    }
+    ```
 
-  Notes for use:
-  Filter out unnecessary props when possible. Also, use [prop-types-exact](https://www.npmjs.com/package/prop-types-exact) to help prevent bugs.
+    Notes for use:
+    Filter out unnecessary props when possible. Also, use [prop-types-exact](https://www.npmjs.com/package/prop-types-exact) to help prevent bugs.
 
-  ```jsx
-  // bad
-  render() {
-    const { irrelevantProp, ...relevantProps } = this.props;
-    return <WrappedComponent {...this.props} />
-  }
+    ```jsx
+    // bad
+    render() {
+      return <WrappedComponent {...this.props} />
+    }
 
-  // good
-  render() {
-    const { irrelevantProp, ...relevantProps } = this.props;
-    return <WrappedComponent {...relevantProps} />
-  }
-  ```
+    // good
+    render() {
+      const { irrelevantProp, ...relevantProps } = this.props;
+      return <WrappedComponent {...relevantProps} />
+    }
+    ```
 
 ## Refs
 
@@ -471,7 +467,7 @@ We don’t recommend using indexes for keys if the order of items may change.
 
     // good
     <Foo
-      ref={(ref) => { this.myRef = ref; }}
+      ref={ref => this.myRef = ref}
     />
     ```
 
@@ -532,30 +528,13 @@ We don’t recommend using indexes for keys if the order of items may change.
 
 ## Methods
 
-  - Use arrow functions to close over local variables. It is handy when you need to pass additional data to an event handler. Although, make sure they [do not massively hurt performance](https://www.bignerdranch.com/blog/choosing-the-best-approach-for-react-event-handlers/), in particular when passed to custom components that might be PureComponents, because they will trigger a possibly needless rerender every time.
-
-    ```jsx
-    function ItemList(props) {
-      return (
-        <ul>
-          {props.items.map((item, index) => (
-            <Item
-              key={item.key}
-              onClick={(event) => { doSomethingWith(event, item.name, index); }}
-            />
-          ))}
-        </ul>
-      );
-    }
-    ```
-
-  - Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
+  - Use arrow functions in class fields instead of binding methods in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
 
-    > Why? A bind call in the render path creates a brand new function on every single render. Do not use arrow functions in class fields, because it makes them [challenging to test and debug, and can negatively impact performance](https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1), and because conceptually, class fields are for data, not logic.
+    > Why? Clean code.
 
     ```jsx
     // bad
-    class extends React.Component {
+    class SomeComponent extends React.Component {
       onClickDiv() {
         // do stuff
       }
@@ -565,19 +544,8 @@ We don’t recommend using indexes for keys if the order of items may change.
       }
     }
 
-    // very bad
-    class extends React.Component {
-      onClickDiv = () => {
-        // do stuff
-      }
-
-      render() {
-        return <div onClick={this.onClickDiv} />
-      }
-    }
-
-    // good
-    class extends React.Component {
+    // okay
+    class SomeComponent extends React.Component {
       constructor(props) {
         super(props);
 
@@ -592,15 +560,26 @@ We don’t recommend using indexes for keys if the order of items may change.
         return <div onClick={this.onClickDiv} />;
       }
     }
+
+    // good
+    class SomeComponent extends React.Component {
+      onClickDiv = () => {
+        // do stuff
+      };
+
+      render() {
+        return <div onClick={this.onClickDiv} />
+      }
+    }
     ```
 
-  - Do not use underscore prefix for internal methods of a React component.
-    > Why? Underscore prefixes are sometimes used as a convention in other languages to denote privacy. But, unlike those languages, there is no native support for privacy in JavaScript, everything is public. Regardless of your intentions, adding underscore prefixes to your properties does not actually make them private, and any property (underscore-prefixed or not) should be treated as being public. See issues [#1024](https://github.com/airbnb/javascript/issues/1024), and [#490](https://github.com/airbnb/javascript/issues/490) for a more in-depth discussion.
+  - Use underscore prefix for internal methods of a React component.
+    > Why? A leading underscore is a common convention to signify that a property or method is not intended to be used from outside a class instance. It makes comprehending the code easier and faster.
 
     ```jsx
     // bad
     React.createClass({
-      _onClickSubmit() {
+      onClickSubmit() {
         // do stuff
       },
 
@@ -608,8 +587,8 @@ We don’t recommend using indexes for keys if the order of items may change.
     });
 
     // good
-    class extends React.Component {
-      onClickSubmit() {
+    class SomeComponent extends React.Component {
+      _onClickSubmit() {
         // do stuff
       }
 
@@ -627,7 +606,7 @@ We don’t recommend using indexes for keys if the order of items may change.
 
     // good
     render() {
-      return (<div />);
+      return <div />;
     }
     ```
 
@@ -635,9 +614,10 @@ We don’t recommend using indexes for keys if the order of items may change.
 
   - Ordering for `class extends React.Component`:
 
-  1. optional `static` methods
+  1. private class fields
+  1. public class fields
   1. `constructor`
-  1. `getChildContext`
+  1. *internal methods* like `_processSomething()` or `_makeAJAXRequest()`
   1. `componentWillMount`
   1. `componentDidMount`
   1. `componentWillReceiveProps`
@@ -646,8 +626,7 @@ We don’t recommend using indexes for keys if the order of items may change.
   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. *optional render methods* like `_renderNavigation()` or `_renderProfilePicture()`
   1. `render`
 
   - How to define `propTypes`, `defaultProps`, `contextTypes`, etc...
@@ -656,79 +635,29 @@ We don’t recommend using indexes for keys if the order of items may change.
     import React from 'react';
     import PropTypes from 'prop-types';
 
-    const propTypes = {
-      id: PropTypes.number.isRequired,
-      url: PropTypes.string.isRequired,
-      text: PropTypes.string,
-    };
-
-    const defaultProps = {
-      text: 'Hello World',
-    };
-
     class Link extends React.Component {
-      static methodsAreOk() {
-        return true;
-      }
+      default_props = {
+        text: 'Hello World',
+      };
+
+      propTypes = {
+        id: PropTypes.number.isRequired,
+        url: PropTypes.string.isRequired,
+        text: PropTypes.string,
+      };
 
       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`: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)
-
-  1. `displayName`
-  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`
-
-## `isMounted`
-
-  - Do not use `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)
-
-  > Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated.
-
-  [anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html
-
 ## Translation
 
   This JSX/React style guide is also available in other languages:
 
-  - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [jhcccc/javascript](https://github.com/jhcccc/javascript/tree/master/react)
-  - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese (Traditional)**: [jigsawye/javascript](https://github.com/jigsawye/javascript/tree/master/react)
-  - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Español**: [agrcrobles/javascript](https://github.com/agrcrobles/javascript/tree/master/react)
-  - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javascript-style-guide](https://github.com/mitsuruog/javascript-style-guide/tree/master/react)
-  - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [apple77y/javascript](https://github.com/apple77y/javascript/tree/master/react)
-  - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [pietraszekl/javascript](https://github.com/pietraszekl/javascript/tree/master/react)
-  - ![Br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [ronal2do/javascript](https://github.com/ronal2do/airbnb-react-styleguide)
-  - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [leonidlebedev/javascript-airbnb](https://github.com/leonidlebedev/javascript-airbnb/tree/master/react)
-  - ![th](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Thailand.png) **Thai**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide/tree/master/react)
-  - ![tr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Turkey.png) **Turkish**: [alioguzhan/react-style-guide](https://github.com/alioguzhan/react-style-guide)
-  - ![ua](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Ukraine.png) **Ukrainian**: [ivanzusko/javascript](https://github.com/ivanzusko/javascript/tree/master/react)
-  - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnam**: [uetcodecamp/jsx-style-guide](https://github.com/UETCodeCamp/jsx-style-guide)
+  -
 
 **[⬆ back to top](#table-of-contents)**