Guidelines

We are a democracy but the code that does not respect the guidelines could be rejected.

Note: we assume you are using Visual Studio Code

Naming

• all .js filenames must be in camelCase

• all class name must me in PascalCase

• variable and function names must be written as camelCase

• constants must be written in UPPERCASE

• 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:

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

• Props Naming: Avoid using DOM component prop names for different purposes.

  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" />

• Always use camelCase for prop names, or PascalCase if the prop value is a React component.

  // bad
  <Foo
    UserName="hello"
    phone_number={12345678}
  />
  
  // good
  <Foo
    userName="hello"
    phoneNumber={12345678}
    Component={SomeComponent}
  />

Format & Style

• your code must be well formatted

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 />}
  
  // good
  {someReallyLongConditional
    && anotherLongConditional
    && (
      <Foo
        superLongParam="bar"
        anotherSuperLongParam="baz"
      />
    )
  }
  
  // good
  {someConditional ? (
    <Foo />
  ) : (
    <Foo
      superLongParam="bar"
      anotherSuperLongParam="baz"
    />
  )}

Quotes

• Always use double quotes (") for JSX attributes, but single quotes (') for all other JS. eslint: jsx-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={{ left: "20px" }} />
  
  // good
  <Foo style={{ left: '20px' }} />

Spacing

• Always include a single space in your self-closing tag. eslint: no-multi-spaces, react/jsx-tag-spacing

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

React

• Always use JSX syntax.

• Do not use React.createElement

• Use Hooks. Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.