Javascript airbnb code style

Airbnb React/JSX Style Guide

This style guide is mostly based on the standards that are currently prevalent in JavaScript, although some conventions (i.e async/await or static class fields) may still be included or prohibited on a case-by-case basis. Currently, anything prior to stage 3 is not included nor recommended in this guide.

Table of Contents

Basic Rules

• Only include one React component per file.
  • However, multiple Stateless, or Pure, Components are allowed per file. eslint: react/no-multi-comp .

  Class vs React.createClass vs stateless

  • If you have internal state and/or refs, prefer class extends React.Component over React.createClass . eslint: react/prefer-es6-classreact/prefer-stateless-function

  // bad const Listing = React.createClass( // . render()  return div>this.state.hello>div>; > >); // good class Listing extends React.Component  // . render()  return div>this.state.hello>div>; > > 

  // bad class Listing extends React.Component  render()  return div>this.props.hello>div>; > > // bad (relying on function name inference is discouraged) const Listing = ( hello >) => ( div>hello>div> ); // good function Listing( hello >)  return div>hello>div>; > 

  Mixins

  Why? Mixins introduce implicit dependencies, cause name clashes, and cause snowballing complexity. Most use cases for mixins can be accomplished in better ways via components, higher-order components, or utility modules.

  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. eslint: react/jsx-pascal-case

  // bad import reservationCard from './ReservationCard'; // good import ReservationCard from './ReservationCard'; // bad const ReservationItem = ReservationCard />; // good const reservationItem = ReservationCard />; 

  // bad import Footer from './Footer/Footer'; // bad import Footer from './Footer/index'; // good import Footer from './Footer'; 

  Why? A component’s displayName may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.

  // bad export default function withFoo(WrappedComponent)  return function WithFoo(props)  return WrappedComponent . props> foo />; > > // good export default function withFoo(WrappedComponent)  function WithFoo(props)  return WrappedComponent . props> foo />; > const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo($wrappedComponentName>)`; return WithFoo; > 

  Why? People expect props like style and className to mean one specific thing. Varying this API for a subset of your app makes the code less readable and less maintainable, and may cause bugs.

  // bad MyComponent style="fancy" /> // bad MyComponent className="fancy" /> // good MyComponent variant="fancy" /> 

  Declaration

  // bad export default React.createClass( displayName: 'ReservationCard', // stuff goes here >); // good export default class ReservationCard extends React.Component  > 

  Alignment

  // bad Foo superLongParam="bar" anotherSuperLongParam="baz" /> // good Foo superLongParam="bar" anotherSuperLongParam="baz" /> // if props fit in one line then keep it on the same line Foo bar="bar" /> // children get indented normally Foo superLongParam="bar" anotherSuperLongParam="baz" > Quux /> Foo> 

  Quotes

  Why? Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.

  // bad Foo bar='bar' /> // good Foo bar="bar" /> // bad Foo style= /> // good 

  Spacing

  // bad Foo/> // very bad Foo /> // bad Foo /> // good Foo /> 

  // bad Foo bar= baz > /> // good Foo bar=baz> /> 

  Props

  // bad Foo UserName="hello" phone_number=12345678> /> // good Foo userName="hello" phoneNumber=12345678> /> 

  // bad Foo hidden=true> /> // good Foo hidden /> // good Foo hidden /> 

  Always include an alt prop on tags. If the image is presentational, alt can be an empty string or the must have role=»presentation» . eslint: jsx-a11y/alt-text

  // bad img src="hello.jpg" /> // good img src="hello.jpg" alt="Me waving hello" /> // good img src="hello.jpg" alt="" /> // good img src="hello.jpg" role="presentation" /> 

  Do not use words like “image”, “photo”, or “picture” in alt props. eslint: jsx-a11y/img-redundant-alt

  Why? Screenreaders already announce img elements as images, so there is no need to include this information in the alt text.

  // bad img src="hello.jpg" alt="Picture of me waving hello" /> // good img src="hello.jpg" alt="Me waving hello" /> 

  // bad - not an ARIA role div role="datepicker" /> // bad - abstract ARIA role div role="range" /> // good div role="button" /> 

  Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.

   // bad div accessKey="h" /> // good div /> 

   // bad todos.map((todo, index) => Todo . todo> key=index> /> )> // good todos.map(todo => ( Todo . todo> key=todo.id> /> ))> 

  Why? propTypes are a form of documentation, and providing defaultProps means the reader of your code doesn’t have to assume as much. In addition, it can mean that your code can omit certain type checks.

   // bad function SFC( foo, bar, children >)  return div>foo>bar>children>div>; > SFC.propTypes =  foo: PropTypes.number.isRequired, bar: PropTypes.string, children: PropTypes.node, >; // good function SFC( foo, bar, children >)  return div>foo>bar>children>div>; > SFC.propTypes =  foo: PropTypes.number.isRequired, bar: PropTypes.string, children: PropTypes.node, >; SFC.defaultProps =  bar: '', children: null, >; 

  Why? Otherwise you’re more likely to pass unnecessary props down to components. And for React v15.6.1 and older, you could pass invalid HTML attributes to the DOM.

   function HOC(WrappedComponent)  return class Proxy extends React.Component  Proxy.propTypes =  text: PropTypes.string, isLoading: PropTypes.bool >; render()  return WrappedComponent . this.props> /> > > > 

  • Spreading objects with known, explicit props. This can be particularly useful when testing React components with Mocha’s beforeEach construct.

   export default function Foo  const props =  text: '', isPublished: false > return (div . props> />); > 

  Notes for use: Filter out unnecessary props when possible. Also, use prop-types-exact to help prevent bugs.

   // good render()  const  irrelevantProp, . relevantProps > = this.props; return WrappedComponent . relevantProps> /> > // bad render()  const  irrelevantProp, . relevantProps > = this.props; return WrappedComponent . this.props> /> > 

  Refs

  // bad Foo ref="myRef" /> // good Foo ref=(ref) =>  this.myRef = ref; >> /> 

  Parentheses

  // bad render()  return MyComponent variant="long body" foo="bar"> MyChild /> MyComponent>; > // good render()  return ( MyComponent variant="long body" foo="bar"> MyChild /> MyComponent> ); > // good, when single line render()  const body = div>hellodiv>; return MyComponent>body>MyComponent>; > 

  Tags

  // bad Foo variant="stuff">/Foo> // good Foo variant="stuff" /> 

  // bad Foo bar="bar" baz="baz" /> // good Foo bar="bar" baz="baz" /> 

  Methods

  function ItemList(props)  return ( ul> props.items.map((item, index) => ( Item key=item.key> onClick=() => doSomethingWith(item.name, index)> /> ))> ul> ); > 

  // bad class extends React.Component  onClickDiv()  // do stuff > render()  return div onClick=this.onClickDiv.bind(this)> />; > > // good class extends React.Component  constructor(props)  super(props); this.onClickDiv = this.onClickDiv.bind(this); > onClickDiv()  // do stuff > render()  return div onClick=this.onClickDiv> />; > > 

  Why? Underscore prefixes are sometimes used as a convention in other languages to denote privacy. But, unlike those languages, there is no native support for privacy in JavaScript, everything is public. Regardless of your intentions, adding underscore prefixes to your properties does not actually make them private, and any property (underscore-prefixed or not) should be treated as being public. See issues #1024, and #490 for a more in-depth discussion.

  // bad React.createClass( _onClickSubmit()  // do stuff >, // other stuff >); // good class extends React.Component  onClickSubmit()  // do stuff > // other stuff > 

  // bad render()  (div />); > // good render()  return (div />); > 

  Ordering

  • Ordering for class extends React.Component :
  1. optional static methods
  2. constructor
  3. getChildContext
  4. componentWillMount
  5. componentDidMount
  6. componentWillReceiveProps
  7. shouldComponentUpdate
  8. componentWillUpdate
  9. componentDidUpdate
  10. componentWillUnmount
  11. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
  12. getter methods for render like getSelectReason() or getFooterContent()
  13. optional render methods like renderNavigation() or renderProfilePicture()
  14. render

  import React from 'react'; import PropTypes from 'prop-types'; const propTypes =  id: PropTypes.number.isRequired, url: PropTypes.string.isRequired, text: PropTypes.string, >; const defaultProps =  text: 'Hello World', >; class Link extends React.Component  static methodsAreOk()  return true; > render()  return a href=this.props.url> data-id=this.props.id>>this.props.text>a>; > > Link.propTypes = propTypes; Link.defaultProps = defaultProps; export default Link; 

  1. displayName
  2. propTypes
  3. contextTypes
  4. childContextTypes
  5. mixins
  6. statics
  7. defaultProps
  8. getDefaultProps
  9. getInitialState
  10. getChildContext
  11. componentWillMount
  12. componentDidMount
  13. componentWillReceiveProps
  14. shouldComponentUpdate
  15. componentWillUpdate
  16. componentDidUpdate
  17. componentWillUnmount
  18. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
  19. getter methods for render like getSelectReason() or getFooterContent()
  20. optional render methods like renderNavigation() or renderProfilePicture()
  21. render

  isMounted

  Why? isMounted is an anti-pattern, is not available when using ES6 classes, and is on its way to being officially deprecated.

  Translation

  This JSX/React style guide is also available in other languages:

  • Chinese (Simplified): JasonBoy/javascript
  • Chinese (Traditional): jigsawye/javascript
  • Español: agrcrobles/javascript
  • Japanese: mitsuruog/javascript-style-guide
  • Korean: apple77y/javascript
  • Polish: pietraszekl/javascript
  • Portuguese: ronal2do/javascript
  • Russian: leonidlebedev/javascript-airbnb
  • Thai: lvarayut/javascript-style-guide
  • Turkish: alioguzhan/react-style-guide
  • Ukrainian: ivanzusko/javascript

  javascript is maintained by airbnb. This page was generated by GitHub Pages.

  Источник

  Читайте также:  Ошибка дискорда javascript error occurred