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)**