Dự án: ứng dụng quản lý nhỏ với Vite

By Better Wise

Ở bài trước bạn đã biết cách gọi fetch trong useEffect, giữ ba trạng thái loading, error, data và cleanup request bằng AbortController. Giờ ta ghép tất cả lại: một ứng dụng nhỏ nhưng đủ để bạn thấy mọi mảnh ghép của module 3 hoạt động cùng nhau.

Bạn đã quen với đoạn HTML tĩnh thế này:

<ul>
  <li><input type="checkbox" checked> Mua sữa</li>
  <li><input type="checkbox"> Nộp báo cáo</li>
</ul>

Vấn đề của HTML thuần: muốn thêm một dòng, bạn phải tự tạo thẻ li và appendChild. Với React, bạn chỉ mô tả "danh sách này trông thế nào khi state là như vậy", phần còn lại React lo.

Ứng dụng cần làm được gì

Tên dự án: Sổ việc cần làm. Yêu cầu tối thiểu:

• Tải 5 việc ban đầu từ https://jsonplaceholder.typicode.com/todos?_limit=5
• Hiện Đang tải... trong lúc chờ, hiện thông báo lỗi nếu request thất bại
• Có form thêm việc mới, ô nhập là controlled input
• Tick checkbox để đánh dấu đã xong
• Hiện lời nhắc khi danh sách rỗng

Note: Dữ liệu API trả về có tên trường khác với item ta muốn dùng (title, completed). Hãy map lại ngay sau khi res.json() để phần còn lại của app chỉ làm việc với một hình dạng dữ liệu duy nhất: { id, title, done }.

Bài tập nhỏ: viết component ItemRow nhận props item và onToggle, hiển thị checkbox cộng tiêu đề.

Bản đồ component và nơi đặt state

flowchart TD
  App["🧠 App<br/>items, loading, error"]
  App --> Form["📝 ItemForm<br/>title"]
  App --> List["📋 ItemList<br/>props: items"]
  App --> Status["⏳ Loading hoặc Error"]
  List --> Row["✅ ItemRow<br/>props: item, onToggle"]

Nguyên tắc: state thuộc về component cha gần nhất cần dùng nó. items cần cho cả ItemList và form (để thêm), nên nó nằm ở App. Còn title của ô nhập chỉ ItemForm dùng, nên để riêng trong ItemForm.

This lesson is premium content. Sign in and purchase the course to view the full content. Sign in