FrontEnd - UpTalent/.github GitHub Wiki

Required libraries

Code styling

1. Using arrow functions for functional components;

2. Props destructurization:

const Component = ({prop1, props2, prop3, ...props}) => {...};

3. We use Prettier to automatically format the code

{
    "singleQuote": true,
    "semi": true,
    "tabWidth": 2,
    "useTabs": true,
    "trailingComma": "all",
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",
    "jsxSelfClosing": true,
    "spaceBeforeFunctionParen": false,
    "spaceBeforeBlockStatements": true,
    "spaceBeforeControlStatements": true,
    "spaceInfixOps": true,
    "bracketSpacing": true,
    "jsxSingleQuote": true
}

4. Syntax

  • Use soft tabs set to 2 spaces.
  • Indent lines with tabs instead of spaces.
  • Use single quotes.
  • Use trailing commas wherever possible, including function parameters and calls.
  • Print spaces between brackets in object literals.
  • Exclude parentheses around a sole arrow function parameter.
  • Using self-closing tag for JSX-elements with no children.
  • Use semicolons.
  • Set off operators with spaces.
  • Use braces with all multi-line blocks.
  • Place 1 space before the opening parenthesis in control statements (if, while etc.).
  • Place no space before the argument list in function calls and declarations.

5. Style

  • Use CSS Module

Related links:

Project structure

  • Every components has it's own folder with files ComponentName.jsx, ComponentName.module.css, index.js (with export)
  • Optionally there is a components folder with all internal components
  • take out work with ajax and data formatting into a separate class file and name it /src/services/sw-service.js