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