Style guide - fe-team-itechart/project-x-client GitHub Wiki

/* 
  Space between function parameters, no spaces between function name and brackets between brackets and parameters
  Curly brace { on the same line after a space
*/
function pow(x, n) {
  let result = 1; // Indent 2 spaces

  for (let i = 0; i < n; i++) { // Spaces around operators, 
    result *= x; // Semicolon ; required
  }

  return result;
}

let x = prompt('x?', ''); // Space between parameters
let n = prompt('n?', '');
// Empty line between logical blocks
if (n < 0) {
  alert('smth');
} else { // } else { without line feed
  alert(pow(x, n));
}

CSS selectors must be named in camelCase
Example: socialMediaContainer

CSS styles must be used without destructuring in the components
Example: <div className={styles.socialMediaContainer}>...</div>

Variable and function names written as camelCase
Example: confirmPassword

Variable must explain their contents
Example: email, password
Bad example: v, arr, a

JavaScript functions must be named with a small letter.
Example: closeModal

JavaScript functions must explain their behavior.
Example: handleGoogleResponse, login

Routes, that contains two or more words both on backend and frontend side must be written in lowercase and separated by dash(-) symbol.
Example: /reset-password

Classes must be named with a capital letter. If class name contains two words, the first letter must be capital.
Example: class Login extends Component class MainPage extends Component

The order of importing files should be as follows:
main libraries(react) -> custom libraries() -> your components -> styles Example:
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';

import Modal from 'react-modal';
import { FaTimes } from 'react-icons/fa';
import { isEmpty } from 'lodash';
import GoogleLogin from 'react-google-login';

import { loginRequest, googleLoginRequest } from '../../../actions/auth';
import validateAuth from '../../../validation/auth';

import styles from '../styles.module.scss';

Testing: Create folder in testing instance folder with name __tests__.
Create file with name: <component name>.test.js.