Cơ Bản JSX

Biểu Thức & Thuộc Tính

const name = "Alice"; const el =

Hello, {name}!

; const img =

;

Quy Tắc JSX

{expression}	Nhúng biểu thức JS bất kỳ
className	Dùng thay cho `class`
htmlFor	Dùng thay cho `for`
style={{color: 'red'}}	Style inline dưới dạng object
<Component />	Thẻ tự đóng bắt buộc
<> ... </>	Fragment (không tạo DOM node thêm)

Component

Function Component

function Greeting({ name }) {
  return Hello, {name}!;
}

// Arrow function variant
const Greeting = ({ name }) => (
  Hello, {name}!
);

Props

function Card({ title, children }) { return (

{title}

{children}

); }

Content here

Props Mặc Định

function Button({ label = "Click me", onClick }) { return ; }

State (useState)

State Cơ Bản

import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( ); }

Cập Nhật Theo Hàm

setCount(prev => prev + 1); // use prev state
setItems(prev => [...prev, newItem]); // arrays
setUser(prev => ({...prev, name: "Bob"})); // objects

Quy Tắc State

Cập nhật bất biến	Không bao giờ thay đổi state trực tiếp
Batching bất đồng bộ	Các cập nhật có thể được gộp lại
Dạng hàm	Dùng `prev =>` khi phụ thuộc vào state trước

Effect (useEffect)

Các Pattern Effect

import { useEffect } from "react";

// Run on every render
useEffect(() => { /* ... */ });

// Run once on mount
useEffect(() => { /* ... */ }, []);

// Run when deps change
useEffect(() => { /* ... */ }, [count]);

// Cleanup on unmount
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

Danh Sách & Key

function TodoList({ items }) {
  return (
    
      {items.map(item => (
        {item.text}

      ))}
    
  );
}

Key phải là ID ổn định, duy nhất — tránh dùng index mảng làm key

Xử Lý Sự Kiện

Sự Kiện

setVal(e.target.value)} />

Sự Kiện Phổ Biến

onClick	Click chuột
onChange	Giá trị input thay đổi
onSubmit	Gửi form
onKeyDown	Nhấn phím
onFocus / onBlur	Focus được / mất focus
onMouseEnter	Chuột đi vào phần tử

Render Có Điều Kiện

// Ternary
{isLoggedIn ?  : }

// Logical AND (short-circuit)
{hasError && }

// Early return
function Page({ user }) {
  if (!user) return ;
  return ;
}

Hook

useRef

const inputRef = useRef(null); // Access: inputRef.current.focus();

useRef lưu giá trị qua các lần render mà không kích hoạt re-render

useMemo & useCallback

// Memoize expensive computation
const sorted = useMemo(
  () => items.sort(compareFn),
  [items]
);

// Memoize callback
const handleClick = useCallback(
  () => setCount(c => c + 1),
  []
);

useContext

import { useContext } from "react";
const value = useContext(MyContext);

Custom Hook

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Usage
const [name, setName] = useLocalStorage("name", "");

Custom hook phải bắt đầu bằng 'use'

Context API

Tạo & Cung Cấp

import { createContext, useContext } from "react";

const ThemeCtx = createContext("light");

function App() {
  return (
    
  );
}

Tiêu Thụ

function Page() {
  const theme = useContext(ThemeCtx); // "dark"
  return ...
;
}

REACT THAM KHẢO NHANH

Hello, {name}!

Hello, {name}!

Hello, {name}!

{title}