Vì sao pro dùng React

Nhớ lúc copy menu không?

Ở Cấp 1, bạn có header với menu trên mọi trang. Mỗi lần thêm trang mới, phải copy menu – và sửa mọi chỗ mỗi lần đổi. Ba trang đã phiền, ba mươi trang là ác mộng. Và nỗi đau đó chính là điểm bắt đầu câu chuyện.

Component: viết một lần, dùng mọi nơi

Pro nghĩ: menu là một đoạn code được “cắm” vào mọi trang thì sao? Sửa một chỗ – đổi mọi nơi. Mảnh như vậy gọi là component.

Không chỉ menu. Nhìn website như bộ LEGO:

• thẻ cầu thủ (bạn có 4 lần – chỉ khác tên và vị trí),
• ảnh trong thư viện (10 lần – chỉ khác hình),
• nút (mọi nơi – chỉ khác chữ).

Website pro không phải đống file HTML. Là hộp LEGO: vài khối tùy chỉnh (component) ghép thành ứng dụng.

React là gì

React là công cụ (thư viện) JavaScript lo phần ghép này. Phát minh ở Facebook, miễn phí, và phần lớn internet dùng nó: Facebook, Instagram, Netflix, Airbnb… Component trong React trông như thế này – đừng lo, giờ chỉ xem thôi:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

Và dùng như thẻ HTML tùy chỉnh:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Quen không? Đó là function (từ Cấp 2) trả về HTML. Thẻ viết một lần, dùng với dữ liệu khác – như con dấu cao su đổi chữ.

Siêu năng lực thứ hai: React lo vẽ lại

Ở Cấp 2 bạn viết: “tìm phần tử, đổi chữ, thêm class…” Trong app lớn, sắp xếp thủ công nhiều đến lạc đường. React đảo ngược:

Bạn mô tả trang nên trông thế nào với dữ liệu cho trước. Khi dữ liệu đổi, React tự biết vẽ lại gì.

Điểm từ 0 lên 1? Không cần tìm phần tử – chỉ đổi số, React vẽ lại chỗ cần. Bạn sẽ thấy ở bài về state.

Cấp này sẽ học gì

1. Cài công cụ pro: terminal và Node.js (bài sau).
2. Dựng app React đầu tiên bằng Vite.
3. Học component, props, và state.
4. Xây lại website Cấp 1 bằng React.
5. Làm server Node.js riêng và nối sổ lưu bút.

Điều cần nhớ từ bài học này

• Copy cùng code nhiều chỗ là bẫy – bạn đã phát hiện ở Cấp 1.
• Component là function trả về mảnh trang. Viết một lần, dùng nhiều lần với dữ liệu khác.
• React vẽ lại trang giúp bạn: đổi dữ liệu, nó đổi màn hình.

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung