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

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} />)