Bài 3. React cơ bản: thành phần và JSX

Khái niệm và lý thuyết

React xây giao diện bằng component là các hàm JavaScript trả về JSX. JSX trông như HTML nhưng thực ra là cú pháp biểu diễn lời gọi hàm tạo phần tử; trình biên dịch chuyển nó thành JavaScript. Trong JSX, dấu { } nhúng bất kỳ biểu thức JavaScript nào.

Props là đối số của component, chỉ đọc: component con không được sửa props mà phải nhờ cha đổi. Quy ước này làm luồng dữ liệu một chiều, dễ lần theo khi tìm lỗi. Tên component bắt buộc viết hoa chữ đầu để React phân biệt với thẻ HTML.

Khi hiển thị danh sách bằng map, mỗi phần tử cần một key ổn định và duy nhất giữa các anh em. React dùng key để nhận biết phần tử nào thêm, bớt, đổi chỗ, tránh vẽ lại không cần thiết và tránh lỗi mất trạng thái.

Component và JSX

function ChaoMung({ ten }) {
  return <h1 className="tieu-de">Xin chào, {ten}!</h1>;
}

export default function App() {
  return (
    <main>
      <ChaoMung ten="Lan" />
      <ChaoMung ten="Minh" />
    </main>
  );
}

Khác HTML: dùng className thay class, đóng mọi thẻ, và chỉ trả về một phần tử gốc (hoặc dùng <>...</>).

Danh sách và key

const khoa = [
  { id: 1, ten: "Python", gia: 0 },
  { id: 2, ten: "React", gia: 199000 }
];

function DanhSach() {
  return (
    <ul>
      {khoa.map(k => (
        <li key={k.id}>{k.ten} - {k.gia === 0 ? "Miễn phí" : k.gia.toLocaleString("vi-VN") + " đ"}</li>
      ))}
    </ul>
  );
}

Hiển thị có điều kiện

function TrangThai({ online }) {
  return <p>{online ? "Đang trực tuyến" : "Ngoại tuyến"}</p>;
}
// hoặc: {co_loi && <p className="loi">Có lỗi</p>}

Tách component

function The({ khoa }) {
  return (
    <article className="the">
      <h3>{khoa.ten}</h3>
      <p>{khoa.mo_ta}</p>
    </article>
  );
}
// Dùng: khoa.map(k => <The key={k.id} khoa={k} />)