diff --git a/README.md b/README.md index 6be65f9b9e..878977001a 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,12 @@ -# Airbnb JavaScript Style Guide() { +# Planet Argon JavaScript Style Guide, (as forked from [Airbnb](https://github.com/airbnb/javascript)) { *A mostly reasonable approach to JavaScript* -[![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb.svg)](https://www.npmjs.com/package/eslint-config-airbnb) -[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) - Other Style Guides - [ES5](es5/) - - [React](react/) - - [CSS & Sass](https://github.com/airbnb/css) - - [Ruby](https://github.com/airbnb/ruby) + - [EmberJS](https://github.com/emberjs/ember.js/blob/master/STYLEGUIDE.md) + - [AirBnb CSS & Sass](https://github.com/airbnb/css) + - [AirBnb Ruby](https://github.com/airbnb/ruby) ## Table of Contents @@ -17,7 +14,6 @@ Other Style Guides 1. [References](#references) 1. [Objects](#objects) 1. [Arrays](#arrays) - 1. [Destructuring](#destructuring) 1. [Strings](#strings) 1. [Functions](#functions) 1. [Arrow Functions](#arrow-functions) @@ -40,14 +36,9 @@ Other Style Guides 1. [jQuery](#jquery) 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) 1. [ECMAScript 6 Styles](#ecmascript-6-styles) - 1. [Testing](#testing) 1. [Performance](#performance) 1. [Resources](#resources) - 1. [In the Wild](#in-the-wild) - 1. [Translation](#translation) 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) - 1. [Chat With Us About JavaScript](#chat-with-us-about-javascript) - 1. [Contributors](#contributors) 1. [License](#license) ## Types @@ -328,73 +319,6 @@ Other Style Guides **[⬆ back to top](#table-of-contents)** -## Destructuring - - - [5.1](#5.1) Use object destructuring when accessing and using multiple properties of an object. - - > Why? Destructuring saves you from creating temporary references for those properties. - - ```javascript - // bad - function getFullName(user) { - const firstName = user.firstName; - const lastName = user.lastName; - - return `${firstName} ${lastName}`; - } - - // good - function getFullName(obj) { - const { firstName, lastName } = obj; - return `${firstName} ${lastName}`; - } - - // best - function getFullName({ firstName, lastName }) { - return `${firstName} ${lastName}`; - } - ``` - - - [5.2](#5.2) Use array destructuring. - - ```javascript - const arr = [1, 2, 3, 4]; - - // bad - const first = arr[0]; - const second = arr[1]; - - // good - const [first, second] = arr; - ``` - - - [5.3](#5.3) Use object destructuring for multiple return values, not array destructuring. - - > Why? You can add new properties over time or change the order of things without breaking call sites. - - ```javascript - // bad - function processInput(input) { - // then a miracle occurs - return [left, right, top, bottom]; - } - - // the caller needs to think about the order of return data - const [left, __, top] = processInput(input); - - // good - function processInput(input) { - // then a miracle occurs - return { left, right, top, bottom }; - } - - // the caller selects only the data they need - const { left, right } = processInput(input); - ``` - - -**[⬆ back to top](#table-of-contents)** - ## Strings - [6.1](#6.1) Use single quotes `''` for strings. @@ -2088,7 +2012,6 @@ Other Style Guides 1. [Object Concise](#es6-object-concise) 1. [Object Computed Properties](#es6-computed-properties) 1. [Template Strings](#es6-template-literals) -1. [Destructuring](#destructuring) 1. [Default Parameters](#es6-default-parameters) 1. [Rest](#es6-rest) 1. [Array Spreads](#es6-array-spreads) @@ -2098,27 +2021,6 @@ Other Style Guides **[⬆ back to top](#table-of-contents)** -## Testing - - - [28.1](#28.1) **Yup.** - - ```javascript - function () { - return true; - } - ``` - - - [28.2](#28.2) **No, but seriously**: - - Whichever testing framework you use, you should be writing tests! - - Strive to write many small pure functions, and minimize where mutations occur. - - Be cautious about stubs and mocks - they can make your tests more brittle. - - We primarily use [`mocha`](https://www.npmjs.com/package/mocha) at Airbnb. [`tape`](https://www.npmjs.com/package/tape) is also used occasionally for small, separate modules. - - 100% test coverage is a good goal to strive for, even if it's not always practical to reach it. - - Whenever you fix a bug, _write a regression test_. A bug fixed without a regression test is almost certainly going to break again in the future. - -**[⬆ back to top](#table-of-contents)** - - ## Performance - [On Layout & Web Performance](http://www.kellegous.com/j/2013/01/26/layout-performance/) @@ -2149,9 +2051,7 @@ Other Style Guides **Tools** - Code Style Linters - + [ESlint](http://eslint.org/) - [Airbnb Style .eslintrc](https://github.com/airbnb/javascript/blob/master/linters/.eslintrc) + [JSHint](http://jshint.com/) - [Airbnb Style .jshintrc](https://github.com/airbnb/javascript/blob/master/linters/jshintrc) - + [JSCS](https://github.com/jscs-dev/node-jscs) - [Airbnb Style Preset](https://github.com/jscs-dev/node-jscs/blob/master/presets/airbnb.json) **Other Style Guides** @@ -2207,138 +2107,12 @@ Other Style Guides - [Dustin Diaz](http://dustindiaz.com/) - [nettuts](http://code.tutsplus.com/?s=javascript) -**Podcasts** - - - [JavaScript Jabber](https://devchat.tv/js-jabber/) - **[⬆ back to top](#table-of-contents)** -## In the Wild - - This is a list of organizations that are using this style guide. Send us a pull request and we'll add you to the list. - - - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) - - **Adult Swim**: [adult-swim/javascript](https://github.com/adult-swim/javascript) - - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript) - - **Avalara**: [avalara/javascript](https://github.com/avalara/javascript) - - **Billabong**: [billabong/javascript](https://github.com/billabong/javascript) - - **Blendle**: [blendle/javascript](https://github.com/blendle/javascript) - - **ComparaOnline**: [comparaonline/javascript](https://github.com/comparaonline/javascript-style-guide) - - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) - - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript) - - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) - - **Ecosia**: [ecosia/javascript](https://github.com/ecosia/javascript) - - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide) - - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) - - **Expensify** [Expensify/Style-Guide](https://github.com/Expensify/Style-Guide/blob/master/javascript.md) - - **Flexberry**: [Flexberry/javascript-style-guide](https://github.com/Flexberry/javascript-style-guide) - - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript) - - **General Electric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) - - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) - - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) - - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript-style-guide) - - **Huballin**: [huballin/javascript](https://github.com/huballin/javascript) - - **HubSpot**: [HubSpot/javascript](https://github.com/HubSpot/javascript) - - **Hyper**: [hyperoslo/javascript-playbook](https://github.com/hyperoslo/javascript-playbook/blob/master/style.md) - - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide) - - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) - - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) - - **JeopardyBot**: [kesne/jeopardy-bot](https://github.com/kesne/jeopardy-bot/blob/master/STYLEGUIDE.md) - - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript) - - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/Javascript-style-guide) - - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) - - **MitocGroup**: [MitocGroup/javascript](https://github.com/MitocGroup/javascript) - - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) - - **Money Advice Service**: [moneyadviceservice/javascript](https://github.com/moneyadviceservice/javascript) - - **Muber**: [muber/javascript](https://github.com/muber/javascript) - - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - - **Nimbl3**: [nimbl3/javascript](https://github.com/nimbl3/javascript) - - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) - - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - - **reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript) - - **React**: [/facebook/react/blob/master/CONTRIBUTING.md#style-guide](https://github.com/facebook/react/blob/master/CONTRIBUTING.md#style-guide) - - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) - - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) - - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - - **Springload**: [springload/javascript](https://github.com/springload/javascript) - - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/guide-javascript) - - **Target**: [target/javascript](https://github.com/target/javascript) - - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) - - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) - - **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript) - - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) - - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) - -**[⬆ back to top](#table-of-contents)** - -## Translation - - This style guide is also available in other languages: - - - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) - - ![bg](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Bulgaria.png) **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) - - ![ca](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) - - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [sivan/javascript-style-guide](https://github.com/sivan/javascript-style-guide) - - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese (Traditional)**: [jigsawye/javascript](https://github.com/jigsawye/javascript) - - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - - ![de](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Germany.png) **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) - - ![it](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [sinkswim/javascript-style-guide](https://github.com/sinkswim/javascript-style-guide) - - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) - - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - - ![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) ## The JavaScript Style Guide Guide - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) -## Chat With Us About JavaScript - - - Find us on [gitter](https://gitter.im/airbnb/javascript). - -## Contributors - - - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) - - -## License - -(The MIT License) - -Copyright (c) 2014 Airbnb - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -'Software'), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. -IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY -CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, -TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE -SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -**[⬆ back to top](#table-of-contents)** - -## Amendments - -We encourage you to fork this guide and change the rules to fit your team's style guide. Below, you may list some amendments to the style guide. This allows you to periodically update your style guide without having to deal with merge conflicts. - -# }; +## License (Forked from Airbnb MIT License applies) diff --git a/es5/README.md b/es5/README.md index 2d24f1a4a2..adbd6848b3 100644 --- a/es5/README.md +++ b/es5/README.md @@ -1,10 +1,7 @@ -[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) - -# Airbnb JavaScript Style Guide() { +# Planet Argon ES5 JavaScript Style Guide (as forked from AirBnb) () { *A mostly reasonable approach to JavaScript* - ## Table of Contents 1. [Types](#types) @@ -29,14 +26,10 @@ 1. [Modules](#modules) 1. [jQuery](#jquery) 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) - 1. [Testing](#testing) 1. [Performance](#performance) 1. [Resources](#resources) - 1. [In the Wild](#in-the-wild) 1. [Translation](#translation) 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) - 1. [Chat With Us About Javascript](#chat-with-us-about-javascript) - 1. [Contributors](#contributors) 1. [License](#license) ## Types @@ -1524,20 +1517,6 @@ **[⬆ back to top](#table-of-contents)** - -## Testing - - - **Yup.** - - ```javascript - function() { - return true; - } - ``` - -**[⬆ back to top](#table-of-contents)** - - ## Performance - [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/) @@ -1627,59 +1606,6 @@ **[⬆ back to top](#table-of-contents)** -## In the Wild - - This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list. - - - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) - - **Adult Swim**: [adult-swim/javascript](https://github.com/adult-swim/javascript) - - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript) - - **Avalara**: [avalara/javascript](https://github.com/avalara/javascript) - - **Billabong**: [billabong/javascript](https://github.com/billabong/javascript) - - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) - - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript) - - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) - - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide) - - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) - - **Flexberry**: [Flexberry/javascript-style-guide](https://github.com/Flexberry/javascript-style-guide) - - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript) - - **General Electric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) - - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) - - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) - - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) - - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide) - - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) - - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) - - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript) - - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/javascript) - - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) - - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) - - **Money Advice Service**: [moneyadviceservice/javascript](https://github.com/moneyadviceservice/javascript) - - **Muber**: [muber/javascript](https://github.com/muber/javascript) - - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - - **Nimbl3**: [nimbl3/javascript](https://github.com/nimbl3/javascript) - - **Nordic Venture Family**: [CodeDistillery/javascript](https://github.com/CodeDistillery/javascript) - - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) - - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - - **reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript) - - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) - - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) - - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/javascript) - - **Super**: [SuperJobs/javascript](https://github.com/SuperJobs/javascript) - - **Target**: [target/javascript](https://github.com/target/javascript) - - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) - - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) - - **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript) - - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) - - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) - ## Translation This style guide is also available in other languages: @@ -1703,15 +1629,6 @@ - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) -## Chat With Us About JavaScript - - - Find us on [gitter](https://gitter.im/airbnb/javascript). - -## Contributors - - - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) - - ## License (The MIT License) diff --git a/linters/.eslintrc b/linters/.eslintrc deleted file mode 100644 index 9e203a5473..0000000000 --- a/linters/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -// Use this file as a starting point for your project's .eslintrc. -// Copy this file, and add rule overrides as needed. -{ - "extends": "airbnb" -} diff --git a/react/README.md b/react/README.md deleted file mode 100644 index 6b0a8e13e9..0000000000 --- a/react/README.md +++ /dev/null @@ -1,317 +0,0 @@ -# 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. [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 file that is not JSX. - -## Class vs React.createClass - - - Use class extends React.Component unless you have a very good reason to use mixins. - - ```javascript - // bad - const Listing = React.createClass({ - render() { - return
; - } - }); - - // good - class Listing extends React.Component { - render() { - return
; - } - } - ``` - -## 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. 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') - - // 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 - export default class ReservationCard extends React.Component { - } - ``` - -## 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 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. - > Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention. - - ```javascript - // bad - - - // good - - - // bad - - - // good - - ``` - -## Spacing - - Always include a single space in your self-closing tag. - ```javascript - // bad - - - // very bad - - - // bad - - - // good - - ``` - -## Props - - Always use camelCase for prop names. - ```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 - - ``` - -## Methods - - Do not use underscore prefix for internal methods of a React component. - ```javascript - // bad - React.createClass({ - _onClickSubmit() { - // do stuff - } - - // other stuff - }); - - // good - class extends React.Component { - onClickSubmit() { - // do stuff - } - - // other stuff - }); - ``` - -## Ordering - - - 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 - - - How to define propTypes, defaultProps, contextTypes, etc... - - ```javascript - import React, { Component, PropTypes } from 'react'; - - const propTypes = { - id: PropTypes.number.isRequired, - url: PropTypes.string.isRequired, - text: PropTypes.string, - }; - - const defaultProps = { - text: 'Hello World', - }; - - class Link extends Component { - static methodsAreOk() { - return true; - } - - render() { - return {this.props.text} - } - } - - Link.propTypes = propTypes; - Link.defaultProps = defaultProps; - - export default Link; - ``` - - - 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 - -**[⬆ back to top](#table-of-contents)**