Tái thiết lớn: website của bạn bằng React

Nhiệm vụ

Lấy website từ Cấp 1–2 và xây lại bằng React. Nghe như lùi bước? Không – đây là luyện tập hay nhất: nội dung và thiết kế đã xong, bạn tập trung kỹ thuật mới. Cuối cùng bạn thấy rõ vì sao pro thấy đáng.

Kế hoạch tái thiết

1. Chia website thành component. Lấy giấy bút (thật đấy!) và phác website thành hộp: Header, Gallery, Quiz, Footer… Mỗi hộp = một file trong src/.

2. Chuyển HTML vào component. Copy từng mảnh từ file .html cũ sang JSX. Chú ý khác biệt quen: class → className, mỗi component trả về một phần tử bọc. Copy ảnh vào thư mục public/ trong dự án Vite – đường dẫn như /images/team.jpg giữ nguyên.

3. Chuyển CSS. Copy style.css vào src/App.css. Gần như không đổi – CSS vẫn là CSS.

4. Tách dữ liệu thành mảng. Thẻ, kết quả, ảnh thư viện – cái nào lặp, thành mảng object + .map(), như bài component.

5. Viết lại phép Cấp 2 thành state. Bảng chuyển đổi:

   Cấp 2 (JavaScript thuần)	React
   getElementById + textContent	state + {value} trong JSX
   addEventListener("click", ...)	onClick={...}
   classList.toggle + CSS .hidden	state boolean + {condition && (...)}
   bộ đếm với biến	useState với số

Xem này: chế độ tối kiểu React

Cùng viết lại một phép để thấy chuyển đổi:

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

Và trong Header.jsx, nút nhận function qua prop:

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

Một thứ mới cuối: prop cũng có thể là function. App giữ state và cho con nút bật/tắt. Gọi là “state ở trên cùng,” pattern phổ biến nhất trong React.

Checklist tái thiết

• Website chia ít nhất 4 component, mỗi file riêng
• Phần tử lặp (thẻ, ảnh…) sinh từ mảng qua .map()
• Ít nhất hai chỗ tương tác chạy bằng useState
• Chế độ tối hoạt động và được nhớ (localStorage)
• Không lỗi trong console
• Không còn getElementById trong code 😉

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

• Tái thiết: chia component → chuyển HTML và CSS → dữ liệu vào mảng → phép thành state.
• Prop có thể là function – cha cho con nút điều khiển state của mình.
• Cùng kết quả, cấu trúc gọn hơn: ít copy, đổi dễ hơn. Tiến bộ nhìn thấy được.

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