diff --git a/react/README.md b/react/README.md
index 549e853d..48a50b83 100644
--- a/react/README.md
+++ b/react/README.md
@@ -5,6 +5,7 @@
## Table of Contents
1. [Basic Rules](#basic-rules)
+ 1. [Class vs `React.createClass`](#class-vs-reactcreateclass)
1. [Naming](#naming)
1. [Declaration](#declaration)
1. [Alignment](#alignment)
@@ -23,27 +24,27 @@
- Always use JSX syntax.
- Do not use `React.createElement` unless you're initializing the app from a file that is not JSX.
-## Class vs React.createClass
+## Class vs `React.createClass`
- - Use class extends React.Component unless you have a very good reason to use mixins.
+ - Use `class extends React.Component` unless you have a very good reason to use mixins.
eslint rules: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md).
- ```javascript
- // bad
- const Listing = React.createClass({
- render() {
- return
;
- }
- });
+ ```javascript
+ // bad
+ const Listing = React.createClass({
+ render() {
+ return ;
+ }
+ });
- // good
- class Listing extends React.Component {
- render() {
- return ;
+ // good
+ class Listing extends React.Component {
+ render() {
+ return ;
+ }
}
- }
- ```
+ ```
## Naming
@@ -51,7 +52,7 @@
- **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances.
- eslint rules: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md).
+ eslint rules: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md).
```javascript
// bad
@@ -67,7 +68,8 @@
const reservationItem = ;
```
- **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
const Footer = require('./Footer/Footer.jsx')
@@ -79,9 +81,9 @@
const Footer = require('./Footer')
```
-
## Declaration
- - Do not use displayName for naming components. Instead, name the component by reference.
+
+ - Do not use `displayName` for naming components. Instead, name the component by reference.
```javascript
// bad
@@ -96,6 +98,7 @@
```
## Alignment
+
- Follow these alignment styles for JSX syntax
eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).
@@ -124,6 +127,7 @@
```
## Quotes
+
- Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS.
> Why? JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `"don't"` easier to type.
@@ -146,7 +150,9 @@
```
## Spacing
+
- Always include a single space in your self-closing tag.
+
```javascript
// bad
@@ -163,7 +169,9 @@
```
## Props
+
- Always use camelCase for prop names.
+
```javascript
// bad
{this.props.text}
+ }
}
- render() {
- return {this.props.text}
- }
- }
+ Link.propTypes = propTypes;
+ Link.defaultProps = defaultProps;
- Link.propTypes = propTypes;
- Link.defaultProps = defaultProps;
+ export default Link;
+ ```
- export default Link;
- ```
+ - Ordering for `React.createClass`:
- - Ordering for React.createClass:
-
- 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
+ 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`
eslint rules: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md).
## `isMounted`
- [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated. Its use should be avoided.
+ - Do not use `isMounted`.
+
+ > 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