# ⚛️ React từ con số 0 cho người chỉ biết HTML

By Better Wise · Generated by Everwise

Khóa học dẫn dắt người chỉ biết HTML/CSS đi qua JavaScript cần thiết và các khái niệm cốt lõi của React. Kết thúc khóa, bạn tự xây được một ứng dụng React hoàn chỉnh với form, danh sách và dữ liệu từ API.

- **Level:** Beginner
- **Goal:** Fundamentals
- **Language:** Vietnamese
- **Focus:** [JavaScript ES6 đủ dùng cho React](/courses?q=JavaScript%20ES6%20%C4%91%E1%BB%A7%20d%C3%B9ng%20cho%20React), [Component, JSX và props](/courses?q=Component%2C%20JSX%20v%C3%A0%20props), [State và vòng đời với hooks](/courses?q=State%20v%C3%A0%20v%C3%B2ng%20%C4%91%E1%BB%9Di%20v%E1%BB%9Bi%20hooks), [Form, danh sách và gọi API](/courses?q=Form%2C%20danh%20s%C3%A1ch%20v%C3%A0%20g%E1%BB%8Di%20API), [Tư duy khai báo thay vì thao tác DOM](/courses?q=T%C6%B0%20duy%20khai%20b%C3%A1o%20thay%20v%C3%AC%20thao%20t%C3%A1c%20DOM)
- **Prior knowledge:** HTML cơ bản, CSS cơ bản
- **Practice:** Exercises + capstone project
- **Time:** ~5.8h
- **Voice:** một lập trình viên frontend kiên nhẫn, luôn đưa ví dụ đời thường với HTML quen thuộc trước khi chuyển sang code React, và chỉ ra những lỗi người mới hay mắc.
- **Not covered:** Next.js và SSR, Redux và quản lý state phức tạp, TypeScript nâng cao, Testing chuyên sâu, Tối ưu hiệu năng nâng cao

## Bạn sẽ đạt được gì

Sau khóa học, bạn sẽ có thể:

- Viết JavaScript ES6 tự tin: dùng `let`/`const` đúng chỗ, viết arrow function, destructuring và spread mà không phải tra cứu mỗi lần.
- Xử lý mảng dữ liệu bằng `map`, `filter`, `reduce` để biến đổi danh sách, thay vì viết vòng lặp thủ công.
- Tư duy theo component: chia giao diện thành những mảnh nhỏ, mỗi mảnh có trách nhiệm rõ ràng, thay vì thao tác DOM trực tiếp bằng `querySelector`.
- Tạo dự án React bằng Vite, hiểu cấu trúc thư mục và cách chạy dev server.
- Viết JSX, tạo component, truyền dữ liệu qua props và ghép component lại với nhau (composition).
- Quản lý state bằng `useState`, xử lý sự kiện click, nhập liệu, và render danh sách kèm `key` đúng cách.
- Xây dựng form với controlled components, xử lý side effect bằng `useEffect`, gọi API bằng `fetch` kèm trạng thái loading, error và cleanup.
- Hoàn thành một ứng dụng quản lý nhỏ chạy được, có gọi dữ liệu, có form và có danh sách.

## Khóa học dành cho ai

Đây là khóa học ở mức **beginner**, dành cho người mới bắt đầu với React.

Bạn cần biết trước:

- HTML cơ bản: các thẻ như `div`, `input`, `button`, `ul`/`li`, hiểu thẻ lồng nhau là gì.
- CSS cơ bản: đủ để đọc và chỉnh vài thuộc tính đơn giản. Khóa học không dạy CSS.

Bạn **không** cần biết React trước đó, cũng không cần kinh nghiệm với framework nào khác. Nếu bạn đã từng viết vài dòng JavaScript thuần và thấy việc cập nhật DOM thủ công khá mệt, đây chính là điểm bắt đầu phù hợp.

## Lộ trình khóa học

**Module 1: Nền tảng JavaScript và tư duy React**

- **1.1 ES6 thiết yếu cho React**: `let`, `const`, arrow function, destructuring và spread, những cú pháp bạn sẽ gặp ở mọi file React.
- **1.2 Hàm và mảng trong thực tế**: `map`, `filter`, `reduce` qua các ví dụ danh sách quen thuộc, đây là nền tảng để render dữ liệu sau này.
- **1.3 Tư duy component và khởi tạo dự án với Vite**: chuyển từ suy nghĩ "sửa DOM" sang "chia component", và tạo dự án đầu tiên bằng Vite.
- **1.4 Checkpoint**: bài kiểm tra củng cố toàn bộ nền tảng JavaScript và tư duy React.

**Module 2: Component, JSX, props và state**

- **2.1 JSX và component đầu tiên**: viết component, hiểu JSX khác HTML ở đâu và vì sao.
- **2.2 Props và composition**: truyền dữ liệu giữa component, ghép component nhỏ thành giao diện lớn.
- **2.3 State với useState và xử lý sự kiện**: làm giao diện "phản ứng" khi người dùng bấm nút hoặc nhập liệu.
- **2.4 Render danh sách và key trong React**: biến mảng dữ liệu thành danh sách hiển thị, hiểu vì sao `key` quan trọng.
- **2.5 Checkpoint**: ôn lại component, JSX, props và state.

**Module 3: Form, useEffect, gọi API và dự án nhỏ**

- **3.1 Form và controlled components**: xây form mà React kiểm soát giá trị từng ô nhập.
- **3.2 useEffect và side effects**: hiểu khi nào cần `useEffect` và những lỗi người mới hay mắc.
- **3.3 Gọi API với fetch**: lấy dữ liệu từ bên ngoài, xử lý loading, error và cleanup.
- **3.4 Dự án**: ứng dụng quản lý nhỏ với Vite, ghép mọi thứ đã học thành một sản phẩm chạy được.
- **3.5 Checkpoint**: kiểm tra tổng hợp form, `useEffect`, gọi API và dự án.

## Khóa học diễn ra như thế nào

Khóa học gồm **14 bài**, tổng thời lượng ước tính **khoảng 350 phút**. Mỗi bài thường có ba phần:

- **Lý thuyết ngắn**: giải thích khái niệm, luôn bắt đầu từ ví dụ HTML quen thuộc trước khi chuyển sang code React.
- **Thực hành**: bài tập nhỏ để bạn gõ code ngay, vì đọc code không giống viết code.
- **Lỗi thường gặp**: những chỗ người mới hay vấp, được chỉ ra trước để bạn không mất thời gian tự dò.

Cuối mỗi module có một **checkpoint** dạng bài kiểm tra, giúp bạn biết mình đã nắm chắc phần trước hay chưa trước khi đi tiếp.

Cách học được khuyến nghị là **tuần tự**: các bài được xếp theo thứ tự phụ thuộc, bài sau dùng kiến thức của bài trước. Tuy vậy, nếu bạn đã vững phần nào, có thể **bỏ qua có chọn lọc**. Cụ thể, nếu bạn đã dùng `map`/`filter`/`reduce` thành thạo, có thể lướt nhanh bài 1.2; nếu đã quen ES6, bài 1.1 chỉ cần đọc lại để chắc thuật ngữ. Ngược lại, đừng bỏ qua các bài về state, `useEffect` và gọi API, vì đó là nơi phần lớn lỗi thực tế xuất hiện.

## Dự án của khóa học: Ứng dụng quản lý nhỏ

Xuyên suốt khóa học là **một dự án duy nhất**: một ứng dụng quản lý nhỏ dựng bằng Vite. Đây không phải chuỗi bài tập rời rạc, mà là một sợi chỉ liên tục, mỗi bài thêm một mảnh ghép vào cùng một sản phẩm.

Dòng chảy của dự án:

- **Bài 1.3** khởi tạo dự án bằng Vite, cho bạn khung thư mục và dev server để làm việc.
- **Bài 2.1 đến 2.4** dựng giao diện: component đầu tiên, truyền props, thêm state và render danh sách các mục cần quản lý.
- **Bài 3.1** thêm form để nhập mục mới, dùng controlled components.
- **Bài 3.2 và 3.3** đưa dữ liệu từ bên ngoài vào qua `fetch`, kèm xử lý loading, error và cleanup.
- **Bài 3.4** là lúc ghép tất cả lại thành ứng dụng hoàn chỉnh, và **bài 3.5** kiểm tra tổng thể.

Kết thúc khóa học, bạn không chỉ hiểu lý thuyết mà còn có trong tay một ứng dụng chạy được, do chính bạn xây từng bước. Đó cũng là thứ bạn có thể mở rộng tiếp sau khóa học.

## Contents

- **🧱 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)
  - [✅ 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)