Hướng Dẫn React
Dự Án Web Bán Sách

JSX (JavaScript XML) là cú pháp mở rộng cho phép viết HTML bên trong JavaScript. React biên dịch JSX thành các lời gọi React.createElement().

Function Component là hàm JavaScript thông thường nhận props vào và trả về JSX. Đây là cách xây dựng component phổ biến nhất trong React hiện đại.

// Cú pháp cơ bản của một Function Component
function TenComponent() {
  // Logic JavaScript ở đây
  return (
    <div>
      <h1>Xin chào React!</h1>
    </div>
  );
}
export default TenComponent;

// App.tsx – Component gốc của ứng dụng
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar ... />
        <Routes> ... </Routes>
        <Footer />
      </BrowserRouter>
    </div>
  );
}
export default App;

Props (properties) là cơ chế truyền dữ liệu từ component cha xuống component con. Props là read-only – component con không được tự thay đổi props nhận vào.

Kết hợp với TypeScript Interface, ta định nghĩa rõ kiểu dữ liệu cho từng prop, giúp IDE báo lỗi sớm và code dễ bảo trì hơn.

// Bước 1: Định nghĩa Interface (kiểu Props)
interface NavbarProps {
  tuKhoaTimKiem: string;
  setTuKhoaTimKiem: (tuKhoa: string) => void;
}

// Bước 2: Nhận Props vào component (destructuring)
function Navbar({ tuKhoaTimKiem, setTuKhoaTimKiem }: NavbarProps) {
  return (<nav>...</nav>);
}

// Bước 3: Truyền Props từ component cha
<Navbar
  tuKhoaTimKiem={tuKhoaTimKiem}
  setTuKhoaTimKiem={setTuKhoaTimKiem}
/>

useState là hook cho phép component lưu trữ và cập nhật dữ liệu. Khi state thay đổi, React tự động re-render lại component đó.

const [giaTriHienTai, hamCapNhat] = useState(giaTri_Ban_Dau);

// App.tsx – State từ khoá tìm kiếm toàn cục
const [tuKhoaTimKiem, setTuKhoaTimKiem] = useState('');

// navbar.tsx – State tạm thời trong ô input
const [tuKhoaTamThoi, setTuKhoaTamThoi] = useState('');

// DanhSachSanPham.tsx – Nhiều state quản lý danh sách sách
const [danhSachQuyenSach, setDanhSachQuyenSach] = useState<SachModel[]>([]);
const [dangTaiDuLieu, setDangTaiDuLieu]         = useState<boolean>(true);
const [baoLoi, setBaoLoi]                       = useState(null);
const [trangHienTai, setTrangHienTai]           = useState(1);
const [tongSoTrang, setTongSoTrang]             = useState(0);

useEffect xử lý các side effect: gọi API, đăng ký event listener, thay đổi DOM… Nó chạy sau khi component render xong.

useEffect(() => {
  // Code side effect ở đây
}, [dependency1, dependency2]); // Dependency Array

// useEffect 1: Reset trang khi đổi từ khóa
useEffect(() => {
  setTrangHienTai(1);
}, [tuKhoaTimKiem]);  // Chạy khi tuKhoaTimKiem thay đổi

// useEffect 2: Gọi API khi trang / từ khóa / thể loại thay đổi
useEffect(() => {
  timKiemSach(tuKhoaTimKiem, maTheLoai, trangHienTai - 1)
    .then(kq => {
      setDanhSachQuyenSach(kq.ketQua);
      setTongSoTrang(kq.tongSoTrang);
      setDangTaiDuLieu(false);
    })
    .catch(error => {
      setBaoLoi(error.message);
      setDangTaiDuLieu(false);
    });
}, [trangHienTai, tuKhoaTimKiem, maTheLoai]);

useParams (từ react-router-dom) trả về object chứa các tham số động trên URL, được khai báo bằng dấu : trong Route.

// Route khai báo tham số :maTheLoai
<Route path='/:maTheLoai' element={<HomePage ... />} />

// HomePage.tsx – đọc tham số từ URL
const { maTheLoai } = useParams();
// URL: /3  →  maTheLoai = "3" (string)

let maTheLoaiNumber = parseInt(maTheLoai + '');
if (Number.isNaN(maTheLoaiNumber)) maTheLoaiNumber = 0;

Thư viện điều hướng cho React SPA (Single Page Application). Thay vì tải lại trang, router cập nhật URL và render component tương ứng mà không reload.

// App.tsx – Cấu trúc Routing của dự án
<BrowserRouter>
  <Navbar ... />

  <Routes>
    <Route path='/'           element={<HomePage ... />} />
    <Route path='/:maTheLoai' element={<HomePage ... />} />
    <Route path='/about'      element={<About />}        />
  </Routes>

  <Footer />
</BrowserRouter>

// navbar.tsx – Dùng Link thay <a href>
<Link to="/">Trang chủ</Link>
<Link to="/about">Về Bookstore</Link>
<Link to="/1">Tiểu thuyết</Link>

Hiển thị UI khác nhau tuỳ theo điều kiện, tương tự câu lệnh if nhưng áp dụng trong JSX.

// DanhSachSanPham.tsx – 3 trường hợp

// 1. Đang tải dữ liệu
if (dangTaiDuLieu) {
  return (<div><h1>Đang tải dữ liệu</h1></div>);
}

// 2. Có lỗi xảy ra
if (baoLoi) {
  return (<div><h1>Gặp lỗi: {baoLoi}</h1></div>);
}

// 3. Không có sách
if (danhSachQuyenSach.length === 0) {
  return (<div><h1>Sách bạn cần chúng tôi không bán</h1></div>);
}

// 4. Hiển thị danh sách bình thường
return (<div>...danh sach sach...</div>);

Để render một danh sách các phần tử, dùng .map() để biến mỗi phần tử data thành một component JSX. Mỗi phần tử phải có prop key duy nhất.

// DanhSachSanPham.tsx – Render danh sách sách
{
  danhSachQuyenSach.map(sach => (
    <SachProps
      key={sach.maSach}  // KEY duy nhất, bắt buộc!
      sach={sach}
    />
  ))
}

// pagination.tsx – Render danh sách số trang
{
  danhSachTrang.map(trang => (
    <li
      key={trang}
      className={"page-item " + (trang === props.trangHienTai ? "active" : "")}
      onClick={() => props.phanTrang(trang)}
    >
      <button className="page-link">{trang}</button>
    </li>
  ))
}

Giao tiếp với backend thông qua HTTP. Dự án dùng fetch kết hợp async/await trong tầng API riêng biệt (src/api/), rồi gọi từ component qua useEffect.

// api/Request.tsx – Hàm fetch tầng thấp nhất
export async function my_request(duongDan: string) {
  const response = await fetch(duongDan);
  if (!response.ok) throw new Error('Lỗi khi gọi API');
  return response.json();
}

// api/SachAPI.ts – Hàm nghiệp vụ
async function laySach(duongDan: string): Promise<KetQuaInterface> {
  const response = await my_request(duongDan);
  // Xử lý dữ liệu, map sang SachModel...
  return { ketQua, tongSoTrang, tongSoSach };
}

// Component – Gọi API và xử lý kết quả
timKiemSach(tuKhoaTimKiem, maTheLoai, trangHienTai - 1)
  .then(kq => {                       // Thành công
    setDanhSachQuyenSach(kq.ketQua);
    setDangTaiDuLieu(false);
  })
  .catch(error => {                   // Thất bại
    setBaoLoi(error.message);
    setDangTaiDuLieu(false);
  });

React.FC (Function Component) là kiểu TypeScript generic giúp typing props rõ ràng hơn. Dự án dùng cả hai cách khai báo component.

// Cách 1: Function bình thường + Interface (phần lớn dự án dùng)
function DanhSachSanPham({ tuKhoaTimKiem, maTheLoai }: DanhSachSanPhamProps) {
  ...
}

// Cách 2: React.FC Generic (pagination.tsx dùng)
export const Pagination: React.FC<PaginationInterface> = (props) => {
  ...
}

TypeScript cũng được dùng để định nghĩa Model cho dữ liệu từ API:

// model/SachModel.ts – Kiểu dữ liệu cho một cuốn sách
interface SachModel {
  maSach: number;
  tenSach: string;
  tenTacGia?: string;   // ? = optional
  giaNiemYet?: number;
  giaBan?: number;
  moTa?: string;
}

Sơ đồ cách dữ liệu và sự kiện đi qua các tầng của dự án:

╔══════════════════════════════════════════════════════════╗
║                         App.tsx                          ║
║  state: tuKhoaTimKiem                                    ║
╠══════════════╦═══════════════════════════════════════════╣
║   Navbar     ║              Routes                       ║
║  (props: từ  ║  /        → HomePage → DanhSachSanPham    ║
║  khóa + set) ║  /:maThe  → HomePage → DanhSachSanPham    ║
║              ║  /about   → About                         ║
╚══════════════╩═══════════════════════════════════════════╝

User gõ từ khóa:
  Navbar → setTuKhoaTamThoi (local state)
  Click Search → setTuKhoaTimKiem (App state)
  App re-render → truyền tuKhoaTimKiem mới xuống HomePage
  DanhSachSanPham → useEffect kích hoạt → gọi API → re-render list

User click thể loại (Link to="/1"):
  URL đổi → Route /:maTheLoai khớp
  HomePage → useParams() → maTheLoai = "1"
  DanhSachSanPham nhận maTheLoai=1 → useEffect → gọi API lọc