Best Practices trong ReactJS

Import theo cấu trúc

• components
• images
• stylesheets
• hooks
• utility

import { Routes, Route } from "react-router-dom";
import { createSlice } from "@reduxjs/toolkit";
import { Menu } from "@headlessui/react";
import Home from "./Home";
import logo from "./logo.svg";
import "./App.css";

Tuân thủ quy ước đặt tên

• PascalCase chủ yếu dành cho component
• camelCase chủ yếu đặt cho functions, hooks, variables, arrays

 const [firstName, setFirstName] = useState("Ihechikara");
 const studentList = [];
 const studentObject = {};
 const getStudent = () => {}

Gom nhóm state

• Thay vì

  const [username, setusername] = useState('')
  const [password, setpassword] = useState('')

• Nên sử dụng

  const [user, setuser] = useState({})

Destructor props

const [user, setuser] = useState({})

Làm rõ các biến

  // Declare them as capitalized named constants.
  const MILLISECONDS_PER_HOUR = 60 * 60 * 1000; // 36000000
  
  setTimeout(restart, MILLISECONDS_PER_HOUR);

Không lặp lại tên biến không cần thiết

// old
type User = {
  userName: string;
  userLastName: string;
  userAge: number;
}

function print(user: User): void {
  console.log(`${user.userName} ${user.userLastName} (${user.userAge})`);
}

//new
type User = {
  name: string;
  lastName: string;
  age: number;
}

function print(user: User): void {
  console.log(`${user.name} ${user.lastName} (${user.age})`);
}

Tạo param object khi có 2 params trở lên

//old 
type UserStatus = 'online' | 'offline';
function createUser(name: string, lastName: string, age: number, status: UserStatus) {
  // ...
}

createUser('Gapur', 'Kassym', 29, 'online');

//new
type UserStatus = 'online' | 'offline';
type User = { name: string, lastName: string, age: number, status: UserStatus };

function createUser(user: User) {
  // ...
}

createUser({
  name: 'Gapur',
  lastName: 'Kassym',
  age: 29,
  status: 'online'
});

Nhất quán component

// old
const renderHeader = () => {
  return (
    <div>
      <span>User:</span>
      {user.name && user.lastName && renderUserInfo()}
    </div>
  );
}

const renderUserInfo = () => {
  return <span>{`${user.name} ${user.lastName}`}</span>;
};

//new
const renderHeader = () => {
  return (
    <div>
      <span>User:</span>
      {renderUserInfo()}
    </div>
  );
}

const renderUserInfo = () => {
  if (user.name && user.lastName) {
    return <span>{`${user.name} ${user.lastName}`}</span>;
  }
  return null;
};

Tạo biến để đặt giá trị mặc định

//old
function createUser(user: User) {
  user.name = user.name || 'User';
  user.lastName = user.lastName || '';
  user.age = user.age || 18;
  // ...
}

//new
function createUser(user: User) {
  const userWithDefaultValues = {
    name: 'User',
    lastName: '',
    age: 18,
    ...user,
  };
  // ...
}