Declaration

• Do not use displayName for naming components. Instead, name the component by reference.

  // 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. eslint: react/jsx-closing-bracket-location react/jsx-closing-tag-location

  // 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>
  // bad
  {showButton &&
    <Button />
  }
  // bad
  {
    showButton &&
      <Button />
  }
  // good
  {showButton && (
    <Button />
  )}
  // good
  {showButton && <Button />}