# ⚛️ Cheatsheet: React từ con số 0 cho người chỉ biết HTML

By Better Wise

> This cheatsheet is premium content. Sign in and purchase the course to view the full content.

Tra cứu nhanh toàn khóa. Mỗi mục là cú pháp hoặc quyết định, không phải bài giảng.

---

## Module 1: Nền tảng JavaScript và tư duy React

### 1.1 ES6 thiết yếu

| Khái niệm | Cú pháp | Ghi chú cho React |
| --- | --- | --- |
| `let` | `let count = 0; count = 1;` | Dùng khi giá trị sẽ thay đổi |
| `const` | `const PI = 3.14;` | Mặc định dùng `const` cho biến không gán lại |
| Arrow function | `const add = (a, b) => a + b;` | Không có `this` riêng, hợp làm callback |
| Arrow trả object | `const f = () => ({ id: 1 });` | Phải bọc `{}` trong ngoặc tròn |
| Destructuring object | `const { name, age } = user;` | Tách props gọn gàng |
| Destructuring mảng | `const [first, second] = arr;` | Dùng với `useState` |
| Spread object | `const next = { ...user, age: 20 };` | Tạo object mới, không sửa gốc |
| Spread mảng | `const all = [...list, newItem];` | Thêm phần tử không đột biến |
| Rest | `const sum = (...nums) => nums.reduce((a, b) => a + b, 0);` | Gom tham số còn lại |
| Template literal | `` `Xin chào ${name}` `` | Nối chuỗi trong JSX/log |

> **Warning:** 
> `const` chỉ ngăn gán lại biến, không làm object bất biến. `const arr = []; arr.push(1)` vẫn chạy. Với state, luôn tạo bản mới thay vì sửa trực tiếp.

### 1.2 Hàm và mảng: `map`, `filter`, `reduce`

| Hàm | Mục đích | Ví dụ | Trả về |
| --- | --- | --- | --- |
| `map` | Biến đổi từng phần tử | `nums.map(n => n * 2)` | Mảng mới cùng độ dài |
| `filter` | Giữ phần tử thỏa điều kiện | `nums.filter(n => n > 2)` | Mảng mới ngắn hơn hoặc bằng |
| `reduce` | Gộp về một giá trị | `nums.reduce((acc, n) => acc + n, 0)` | Một giá trị bất kỳ |
| `find` | Tìm 1 phần tử đầu tiên | `users.find(u => u.id === id)` | Phần tử hoặc `undefined` |