From 3764337df248e5068684f00bd2153dfd31fa243f Mon Sep 17 00:00:00 2001 From: Alvin Sng Date: Wed, 29 Apr 2015 15:29:51 -0700 Subject: [PATCH 1/2] React/JSX Style Guide --- react/README.md | 218 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 react/README.md diff --git a/react/README.md b/react/README.md new file mode 100644 index 00000000..33138273 --- /dev/null +++ b/react/README.md @@ -0,0 +1,218 @@ +# Airbnb React/JSX Style Guide + +*A mostly reasonable approach to React and JSX* + +## Table of Contents + + 1. [Basic Rules](#basic-rules) + 1. [Naming](#naming) + 1. [Declaration](#declaration) + 1. [Alignment](#alignment) + 1. [Quotes](#quotes) + 1. [Spacing](#spacing) + 1. [Props](#props) + 1. [Parentheses](#parentheses) + 1. [Tags](#tags) + 1. [Ordering](#ordering) + +## Basic Rules + + - Only include one React component per file. + - Always use JSX syntax. + - Do not use `React.createElement` unless you're initializing the app from a `.js` file. + +## Naming + + - **Extensions**: Use `.jsx` extension for React components. + - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. + - **Reference Naming**: Use PascalCase for React components and camelCase for their instances: + ```javascript + // bad + const reservationCard = require('./ReservationCard'); + + // good + const ReservationCard = require('./ReservationCard'); + + // bad + const ReservationItem = ; + + // good + const reservationItem = ; + ``` + + **Component Naming**: Use the filename as the component name. So `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') + + // bad + const Footer = require('./Footer/index.jsx') + + // good + const Footer = require('./Footer') + ``` + + +## Declaration + - Do not use displayName for naming components, instead name the component by reference. + + ```javascript + // bad + export default React.createClass({ + displayName: 'ReservationCard', + // stuff goes here + }); + + // good + const ReservationCard = React.createClass({ + // stuff goes here + }); + export default ReservationCard; + ``` + +## Alignment + - Follow these alignment styles for JSX syntax + + ```javascript + // bad + + + // good + + + // if props fit in one line then keep it on the same line + + + // children get indented normally + + + + ``` + +## Quotes + - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JavaScript. + ```javascript + // bad + + + // good + + + // bad + + + // good + + ``` + +## Spacing + - Always include a single space in your self-closing tag. + ```javascript + // bad + + + // very bad + + + // bad + + + // good + + ``` + +## Props + - Alphabetically order your props. + ```javascript + // bad + + + // good + + ``` + +## Parentheses + - Wrap JSX tags in parentheses when they span more than one line: + ```javascript + /// bad + render() { + return + + ; + } + + // good + render() { + return ( + + + + ); + } + + // good, when single line + render() { + const body =
hello
; + return {body}; + } + ``` + +## Tags + - Always self-close tags that have no children. + ```javascript + // bad + + + // good + + ``` + + - If your component has multi-line properties, close its tag on a new line. + ```javascript + // bad + + + // good + + ``` + +## Ordering + - Always follow the following order for methods in a react component: + + 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. componentWillUnmount + 13. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() + 14. *gettter methods for render* like getSelectReason() or getFooterContent() + 15. *Optional render methods* like renderNavigation() or renderProfilePicture() + 16. render + +**[⬆ back to top](#table-of-contents)** From 2595cb6724d0fd02ed771006517394fc43df341e Mon Sep 17 00:00:00 2001 From: Alvin Sng Date: Thu, 30 Apr 2015 11:57:01 -0700 Subject: [PATCH 2/2] removed alpha sort, changed jsx exten to js, added method prefix rule, added camelCase for props --- react/README.md | 63 +++++++++++++++++++++++++++++++++---------------- 1 file changed, 43 insertions(+), 20 deletions(-) diff --git a/react/README.md b/react/README.md index 33138273..6d9eb169 100644 --- a/react/README.md +++ b/react/README.md @@ -13,18 +13,19 @@ 1. [Props](#props) 1. [Parentheses](#parentheses) 1. [Tags](#tags) + 1. [Methods](#methods) 1. [Ordering](#ordering) ## Basic Rules - Only include one React component per file. - Always use JSX syntax. - - Do not use `React.createElement` unless you're initializing the app from a `.js` file. + - Do not use `React.createElement` unless you're initializing the app from a file that does not transform JSX. ## Naming - - **Extensions**: Use `.jsx` extension for React components. - - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. + - **Extensions**: Use `.js` extension for React components. + - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.js`. - **Reference Naming**: Use PascalCase for React components and camelCase for their instances: ```javascript // bad @@ -40,13 +41,13 @@ const reservationItem = ; ``` - **Component Naming**: Use the filename as the component name. So `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. So `ReservationCard.js` should have a reference name of ReservationCard. However, for root components of a directory, use index.js as the filename and use the directory name as the component name: ```javascript // bad - const Footer = require('./Footer/Footer.jsx') + const Footer = require('./Footer/Footer.js') // bad - const Footer = require('./Footer/index.jsx') + const Footer = require('./Footer/index.js') // good const Footer = require('./Footer') @@ -71,17 +72,17 @@ ``` ## Alignment - - Follow these alignment styles for JSX syntax + - Follow these alignment styles for js syntax ```javascript // bad - + // good // if props fit in one line then keep it on the same line @@ -89,8 +90,8 @@ // children get indented normally @@ -130,18 +131,18 @@ ``` ## Props - - Alphabetically order your props. + - Always use camelCase for prop names. ```javascript // bad // good ``` @@ -150,7 +151,7 @@ ```javascript /// bad render() { - return + return ; } @@ -195,6 +196,28 @@ /> ``` +## Methods + - Do not use underscore prefix for internal methods of a react component. + ```javascript + // bad + React.createClass({ + _onClickSubmit() { + // do stuff + } + + // other stuff + }); + + // good + React.createClass({ + onClickSubmit() { + // do stuff + } + + // other stuff + }); + ``` + ## Ordering - Always follow the following order for methods in a react component: @@ -211,7 +234,7 @@ 11. componentWillUpdate 12. componentWillUnmount 13. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() - 14. *gettter methods for render* like getSelectReason() or getFooterContent() + 14. *getter methods for render* like getSelectReason() or getFooterContent() 15. *Optional render methods* like renderNavigation() or renderProfilePicture() 16. render