From 055aa14518bd7c31cd54b633bf58c63ec3d962f7 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 22:28:09 -0800 Subject: [PATCH 1/4] [readme] Clean up isMounted section in react readme When I added this section in f2dc5043a I didn't do a very good job of following the style used in other parts of this repo. This commit remedies that. --- react/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index 549e853d..7491c46b 100644 --- a/react/README.md +++ b/react/README.md @@ -337,7 +337,9 @@ ## `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 From 450e64c9d217ca731561a7d890f1210da82dcef7 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 22:35:11 -0800 Subject: [PATCH 2/4] [readme] Add backticks around code items in react readme I noticed a number of places in this document where code was being referenced but it was not marked as such. Adding backticks will instruct the markdown parser to format these bits as code, which should improve the readability of this document. --- react/README.md | 82 ++++++++++++++++++++++++------------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/react/README.md b/react/README.md index 7491c46b..12260155 100644 --- a/react/README.md +++ b/react/README.md @@ -23,9 +23,9 @@ - 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). @@ -81,7 +81,7 @@ ## 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 @@ -261,24 +261,24 @@ ## Ordering - - Ordering for class extends 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 + 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... + - How to define `propTypes`, `defaultProps`, `contextTypes`, etc... ```javascript import React, { PropTypes } from 'react'; @@ -309,29 +309,29 @@ 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). From a7d3e02a7744068b211d884c3299841767a23b78 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 22:38:02 -0800 Subject: [PATCH 3/4] [readme] Add missing heading to react TOC I noticed that this heading wasn't listed in the table of contents. Adding it will help people see at-a-glance what they might find in this document. --- react/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/react/README.md b/react/README.md index 12260155..d6f858e1 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) From 474087c4269a534d9b57b1bc8e323a4295f0b429 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 22:40:43 -0800 Subject: [PATCH 4/4] [readme] Use consistent whitespace in react readme I noticed that some newlines and indentation were a little inconsistent in this file, so I decided to smooth things out a bit. This should help people who decide to modify this document in the future. When determining which is the "right" way to format these things, I decided to use the style used by base readme as a guide. --- react/README.md | 87 ++++++++++++++++++++++++++++--------------------- 1 file changed, 49 insertions(+), 38 deletions(-) diff --git a/react/README.md b/react/README.md index d6f858e1..48a50b83 100644 --- a/react/README.md +++ b/react/README.md @@ -30,21 +30,21 @@ 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 @@ -52,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 @@ -68,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') @@ -80,8 +81,8 @@ const Footer = require('./Footer') ``` - ## Declaration + - Do not use `displayName` for naming components. Instead, name the component by reference. ```javascript @@ -97,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). @@ -125,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. @@ -147,7 +150,9 @@ ``` ## Spacing + - Always include a single space in your self-closing tag. + ```javascript // bad @@ -164,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`: