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, }; // ...
}