Skip to content

Latest commit

 

History

History
345 lines (255 loc) · 5.31 KB

FE_CODING_CONVENTION.md

File metadata and controls

345 lines (255 loc) · 5.31 KB

FE_CODING_CONVENTION.md

IMPORTANT: Code to be Maintain later Variable, File, Folder MUST NOT contain 's' Whole src MUST NOT exist the hyphen -

good: user, product, ...
or: userArray, userList, userCollection, ... (the return data types)

bad: users, products, ...
bad: customer-report

good: folder: Header, file: Header.tsx
bads: header, headerComponent, header-component
  • Export to ES6

Export Component

  • Export components at end of file

  • Bad

// Filename: userlogin.ts
export const UserLoginNew = () => {};
  • Good
// Filename: UserLogin.tsx
const UserLogin = () => {};
export default UserLogin;

Folder Name

  • Use PascalCase
  • Must not begin with a digit
  • Must not contain special characters
good: LoginSideBar, LoginHeader
bad: user, Login-Header, Login_Header

File Name or Component Name

  • Use PascalCase
  • Must not begin with a digit
  • Must not contain special characters
  • Good
PageHeader.tsx, UserLoginForm.tsx;
  • Bad
page - header.tsx, user - login - form.tsx;

Tag Class Name

  • Use kebab-case
  • Must not begin with a digit
  • Must not contain special characters
render() {
  return <span className="menu navigation-menu">Menu</span>
}

Handler Method

  • Naming: "handle" + TriggerEvent.
    • exp: handleClick

IMPORTANT: Use arrow function for 'this' to be in correct context

Component Prop Name

  • Use camelCase

  • Must not begin with a digit

  • Must not contain special characters

  • Good

<UserLogin userName="John Doe" />
  • Bad
<UserLogin user_name="John Doe" />

Tags

  • Alway use /> close tag if don't have children

  • Good

<Foo className="stuff" /> // only have />
  • Bad
<Foo className="stuff"></Foo> //this have </Foo>

  • If component have many prop, put /> close tag on the new line

  • Good

<Foo className="stuff" id="uniqueId" dataAttribute="moreStuff" />
  • Bad
<Foo className="stuff" id="uniqueId" dataAttribute="moreStuff" />

Type or Interface

  • Use PascalCase
// demo Type
export type UserType = {
  userId: string;
  userName: string;
};
// demo Interface
export interface User {
  userId: string;
  userName: string;
}
// demo REACT
interface UseUserLoginProps {
	username: string
	password:string
}

interface UseUserLoginReturn {
  status: HTTP_STATUS
  data: gì đó
}

const useUserLogin = ({username, password}: UseUserLoginProps): UseUserLoginReturn => {
    return axios.post(xxx) // ví dụ
}

Enum Name

  • Use UPPER_CASE
export enum USER_ROLE {
  ADMIN,
  STAFF,
  STUDENT,
}

Should use arrow function than function declaration

  • Good
const getUser = () => {
  // logic
};
  • Bad
function getUser() {
  // logic
}

Custom hook

  • Bad
const hookQueryConfig = () => {
  //logic
};
  • Good
const useQueryConfig = () => {
  //logic
};

Function

  • Use camelCase
  • Must start with a verb
  • Must not begin with a digit.
  • Must not contain special characters
  • Good:
function getUser() {}
  • Bad
function get_user() {}
function get-user() {}

Function Documentation

  • After each function update need to update the version
  • Just write full lowercase, use Upper case only for
/**
 * check if a number is a prime
 * @param {number} num - number need to check
 * @returns {Boolean} - true or false
 * @example isPrime(5)
 * @description
 * this function check whether a number is a prime number. return false if the input is not a integer
 * @author hoangnn
 * @version 0.0.1
 */
function isPrime(num: number): Boolean {
  // Logic
  // ...
}

Import

  • Import theo thứ tự: utils, styles, fonts, contexts, hooks, components, pages
//utils
import { lazy, Suspense, useEffect, useRef } from 'react'
//styles
import '@styles/index.scss'
import ThemeStyles from '@styles/theme'
//contexts
import { SidebarProvider } from '@contexts/sidebarContext'
import { ThemeProvider } from 'styled-components'
//hooks
import { ThemeContextType, useTheme } from '@contexts/themeContext
import { Route, Routes, useLocation } from 'react-router-dom'
import { useWindowSize } from 'react-use'
//conponents
import Loader from '@components/Loader'
import AppBar from '@layout/AppBar'
import { ToastContainer } from 'react-toastify'
//pages
const Login = lazy(() => import('@pages/Login'))

Interact between FE and BE

JSON property must follow the snake_case to distinguish it from Class properties

  • Good
{
  "entity_property": "value"
}
  • Bad
{
  "entityProperty": "value"
}
  • Exp
{
  "status": 200,
  "message": "success",
  "data": {
    "user_id": "123",
    "user_name": "John Doe"
  }
}

Variables

  • Variable names can contain alphabets and numeric digits.

  • They cannot contain spaces and special characters, except the underscore (_) and the dollar ($) sign.

  • Variable names cannot begin with a digit.

  • Good

const userName = "JohnDoe";
  • Bad
const 1_userName = "JohnDoe";

Exception