Lộ Trình Học React JS

Lộ trình toàn diện để xây dựng giao diện người dùng hiện đại với thư viện JavaScript phổ biến nhất.

Trở về lộ trình
Giai đoạn Chủ đề chính Nội dung & Công cụ Mục tiêu sản phẩm
1 Nền tảng Web
  • HTML, CSS, JavaScript
  • ES6+ (JavaScript Hiện đại)
  • TypeScript
 Tạo một trang web tĩnh đơn giản sử dụng HTML, CSS và JavaScript hiện đại.
2 Công cụ Phát triển
  • Trình quản lý Gói (npm/yarn)
  • Công cụ Build (Vite/CRA)
  • Kiểm soát Phiên bản (Git)
 Thiết lập một dự án mới bằng Vite và sử dụng Git để quản lý phiên bản.
3 React - Nền tảng
  • JSX - JavaScript XML
  • Components (Function vs. Class)
  • Props & State
  • Conditional Rendering, Lists & Keys
 Xây dựng một component React cơ bản hiển thị dữ liệu bằng props và quản lý trạng thái riêng của nó.
4 Hooks & Vòng đời Component
  • useState, useEffect
  • useContext, useReducer
  • Tạo Custom Hooks
 Tái cấu trúc một class component thành một functional component sử dụng `useState` và `useEffect`.
5 Quản lý Trạng thái Toàn cục
  • Context API
  • Redux (với Redux Toolkit)
  • Zustand / Jotai
 Tạo một ứng dụng nhỏ chia sẻ trạng thái giữa nhiều components bằng Context API.
6 Routing & Tương tác API
  • React Router
  • Gọi API (Fetch/Axios)
  • React Query / SWR
 Xây dựng ứng dụng nhiều trang bằng React Router và lấy dữ liệu từ một API công khai.
7 Kiểm thử (Testing)
  • Jest
  • React Testing Library
  • Cypress / Playwright
 Viết các unit test cho một component React để đảm bảo nó hiển thị chính xác.
8 Tối ưu hóa & Hệ sinh thái
  • Tối ưu hóa Hiệu năng
  • Thư viện UI Component
  • Next.js
 Tối ưu hóa một ứng dụng React và khám phá một thư viện component như Material-UI.

Tư duy Cốt lõi cho Lập trình viên React

1. Tư duy Component

Chia nhỏ giao diện người dùng thành các component độc lập, có thể tái sử dụng. Mỗi component có trách nhiệm duy nhất và quản lý trạng thái riêng của nó.

2. Luồng dữ liệu một chiều

Dữ liệu chảy từ component cha xuống component con thông qua props. Điều này làm cho ứng dụng dễ dự đoán, gỡ lỗi và bảo trì hơn.

3. State là Nguồn chân lý duy nhất

Giao diện người dùng là một hàm của state. Thay đổi state, và React sẽ tự động cập nhật UI. Tập trung vào việc quản lý state một cách hiệu quả.

4. Tính khai báo, không phải mệnh lệnh

Mô tả giao diện người dùng *nên* trông như thế nào ở bất kỳ trạng thái nào, và để React lo phần còn lại. Đừng thao tác trực tiếp với DOM.