ReactJS cơ bản đến nâng cao
Chào mừng bạn đến với khóa học ReactJS cơ bản đến nâng cao sử dụng Vite!
🎯 Giới thiệu khóa học
Khóa học này sẽ giúp bạn từng bước nắm vững ReactJS - thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng hiện đại. Chúng ta sẽ học thông qua thực hành chiếm 80% thời gian học tập.
Thông tin chung
- Tổng thời lượng: 16 buổi (mỗi buổi 2 tiếng)
- Tần suất: 3 buổi/tuần
- Công nghệ: Vite + React + React Router + Axios + TailwindCSS + JSON-Server
- Đối tượng: Sinh viên đã biết JavaScript cơ bản
- Phương pháp: Mỗi buổi = 50% Lý thuyết + 50% Thực hành
Điều kiện tiên quyết
✅ JavaScript ES6+ (Functions, Arrow Functions)
✅ Modules (import/export)
✅ Fetch API
✅ DOM Manipulation cơ bản
✅ HTML & CSS cơ bản
Kết quả học tập
Sau khóa học, bạn sẽ có thể:
- ✅ Hiểu rõ tư duy React và cách xây dựng ứng dụng component-based
- ✅ Sử dụng thành thạo Hooks (useState, useEffect, useRef, custom hooks)
- ✅ Quản lý State và Props hiệu quả
- ✅ Xử lý Form và Controlled Components
- ✅ Thực hiện Routing và Layout
- ✅ Kết nối API với Axios
- ✅ Xây dựng ứng dụng CRUD hoàn chỉnh
- ✅ Tổ chức code và tái sử dụng Component
📚 Nội dung khóa học
📅 Giai đoạn 1: Nền tảng React (Tuần 1-3)
Mục tiêu: Nắm vững tư duy React, JSX, Component, Props, State, Event, và Rendering. Thực hành với Todo List.
| Buổi | Nội dung | Mục tiêu chính | Thực hành |
|---|---|---|---|
| Buổi 1 | React là gì? Vite Setup & JSX | Setup môi trường, hiểu JSX | Todo List cơ bản |
| Buổi 2 | Component & Props | Tạo và sử dụng Component | Todo List với Props |
| Buổi 3 | State & Event Handling | Quản lý State, xử lý sự kiện | Todo List tương tác |
| Buổi 4 | Conditional Rendering | Render có điều kiện | Todo List có filter |
| Buổi 5 | List & Key | Render danh sách | Todo List hoàn chỉnh |
| Buổi 6 | Đánh giá giữa kỳ | Kiểm tra giai đoạn 1 | Mini Project |
📅 Giai đoạn 2: Hooks, Forms & Routing (Tuần 4-5)
Mục tiêu: Sử dụng Hooks, xử lý Form, và Routing. Đẩy Router lên sớm để thực hành UI.
| Buổi | Nội dung | Mục tiêu chính | Thực hành |
|---|---|---|---|
| Buổi 7 | useState & useEffect | Quản lý State và Side Effects | Todo List với useEffect |
| Buổi 8 | useRef & Custom Hooks | Tái sử dụng logic | Custom Hooks cho Todo |
| Buổi 9 | Form & Controlled Components | Xử lý Form phức tạp | Form thêm/sửa Todo |
| Buổi 10 | Routing với React Router | Điều hướng trong SPA | Multi-page Todo App |
| Buổi 11 | Đánh giá giữa kỳ | Kiểm tra giai đoạn 2 | Blog App với Routing |
📅 Giai đoạn 3: API & Tour Management (Tuần 6-8)
Mục tiêu: Kết nối API với JSON-Server, CRUD operations, và xây dựng Website Quản lý Tour Du Lịch.
| Buổi | Nội dung | Mục tiêu chính | Thực hành |
|---|---|---|---|
| Buổi 12 | Axios & JSON-Server | Kết nối API | Tour Management - API Setup |
| Buổi 13 | CRUD Operations | Thao tác Create/Read/Update/Delete | Tour Management - CRUD Tours |
| Buổi 14 | Context API & Organization | Quản lý State toàn cục | Tour Management - Context |
| Buổi 15 | Styling & Responsive | TailwindCSS và Responsive | Tour Management - Styling |
| Buổi 16 | Project Presentation | Trình bày dự án cuối khóa | Demo Tour Management |
🎓 Project cuối khóa
Ứng dụng web hoàn chỉnh với đầy đủ tính năng CRUD:
- 📋 Danh sách Tour và chi tiết Tour
- ➕ Tạo, Sửa, Xóa Tour
- 🗺️ Quản lý điểm đến (Destination)
- 🎫 Giả lập đặt tour (Booking)
- 🔌 Kết nối với JSON-Server (db.json)
- 📱 Responsive Design với TailwindCSS
- 🎨 UI/UX hiện đại
Lưu ý:
- Buổi 1-5: Thực hành với Todo List
- Buổi 12-16: Thực hành với Tour Management (kết nối API)
📊 Đánh giá
Thành phần điểm
| Phần | Tỷ trọng | Mô tả |
|---|---|---|
| Lab tập buổi | 20% | Bài tập thực hành mỗi buổi |
| Đánh giá giai đoạn 1 | 20% | Kiểm tra Tuần 3 |
| Đánh giá giai đoạn 2 | 20% | Kiểm tra Tuần 5 |
| Project cuối khóa | 40% | Dự án nhóm |
Tiêu chí đạt
- ✅ Hoàn thành 80% Lab tập buổi
- ✅ Điểm đánh giá giữa kỳ ≥ 5.0/10
- ✅ Project hoàn thành đầy đủ yêu cầu
📖 Tài nguyên học tập
Tài liệu chính thức
Công cụ
- VS Code + Extensions (ES7+ React, Prettier, ESLint)
- Chrome DevTools
- JSON-Server
- Postman (test API)
🎯 Phương pháp học
20/80 Rule
- 📖 20% Lý thuyết: Giải thích khái niệm, ví dụ ngắn
- 🛠️ 80% Thực hành: Code demo, lab tập, dự án
Mỗi buổi học (2 tiếng)
- Warm-up (10 phút): Review buổi trước
- Lý thuyết (50 phút): Giải thích khái niệm mới + Code demo
- Thực hành (50 phút): Lab tập với hướng dẫn chi tiết
- Wrap-up (10 phút): Tổng kết, Q&A
Cấu trúc thực hành:
- Buổi 1-5: Xây dựng Todo List từ cơ bản đến hoàn chỉnh
- Buổi 7-10: Nâng cấp Todo List với Hooks, Forms, Routing
- Buổi 12-15: Xây dựng Tour Management với API (db.json)
💡 Tips học tập
- ✅ Code mỗi ngày: Luyện tập ít nhất 30 phút/ngày
- ✅ Đọc error message: Hiểu rõ lỗi để fix nhanh hơn
- ✅ Debug thường xuyên: Sử dụng console.log, DevTools
- ✅ Tái sử dụng code: Copy-paste nhưng phải hiểu
- ✅ Hỏi ngay: Không giấu dốt, thầy và bạn bè sẵn sàng giúp
Chúc các em học tập tốt và thành công với ReactJS! 🚀