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

By Better Wise

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

Ở 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:

```html
<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

```mermaid
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`.

## In this lesson

- Thứ tự làm việc đề xuất
- Thế nào là xong: tiêu chí nghiệm thu
- Lỗi người mới hay mắc và mẹo gỡ
- Ghi nhớ nhanh sau khi làm xong
- Đã có gì trong tay và bước tiếp theo


---

## Contents

Part of [⚛️ React từ con số 0 cho người chỉ biết HTML](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html.md)

- **🧱 Nền tảng JavaScript và tư duy React**
  - [✨ ES6 thiết yếu cho React: let, const, arrow function, destructuring, spread](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/es6-thiet-yeu-cho-react.md)
  - [🔁 Hàm và mảng trong thực tế: map, filter, reduce](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/ham-mang-map-filter-reduce.md) (sign-in required)
  - [🧩 Tư duy component và khởi tạo dự án với Vite](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/tu-duy-component-va-khoi-tao-vite.md)
  - [✅ Checkpoint: nền tảng JavaScript và tư duy React](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-nen-tang-javascript-va-react.md)
- **🧩 Component, JSX, props và state**
  - [📄 JSX và component đầu tiên](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/jsx-va-component-dau-tien.md)
  - [📦 Props và composition: truyền dữ liệu giữa component](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/props-va-composition.md)
  - [🔄 State với useState và xử lý sự kiện](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/state-usestate-va-su-kien.md)
  - [📋 Render danh sách và key trong React](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/render-danh-sach-va-key.md)
  - [✅ Checkpoint: component, JSX, props và state](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-component-va-state.md)
- **🚀 Form, useEffect, gọi API và dự án nhỏ**
  - [📝 Form và controlled components](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/form-va-controlled-components.md)
  - [⚙️ useEffect và side effects](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/useeffect-va-side-effects.md)
  - [🌐 Gọi API với fetch: loading, error và cleanup](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/goi-api-voi-fetch.md) (premium content)
  - [🛠️ Dự án: ứng dụng quản lý nhỏ với Vite](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/du-an-ung-dung-quan-ly-voi-vite.md) (premium content) — this lesson
  - [✅ Checkpoint: form, useEffect, gọi API và dự án](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-form-api-va-du-an.md) (premium content)
- [Course cheatsheet](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/cheatsheet.md) (premium content)