Học React.js với TypeScript: Từ cơ bản đến công nghệ mới nhất một cách hoàn hảo

Chapter 01
Chuẩn bị

Trước khi bắt đầu học React, chúng ta sẽ học cách thiết lập môi trường cần thiết.
Chúng ta sẽ tìm hiểu cách cài đặt VSCode cho từng hệ điều hành
và cài đặt Prettier cùng các extension để chuẩn bị cho việc học tập.

Chapter 02
Bắt đầu

Trong chương này, chúng ta sẽ tìm hiểu cách khởi tạo ứng dụng React theo phương pháp hiện đại nhất. Chúng ta sẽ cấu hình môi trường phát triển dựa trên Vite để thay thế Create React App(CRA), và học các cài đặt cần thiết cho việc phát triển React.

• So sánh hạn chế của CRA và ưu điểm của Vite

• Hiểu về sự khác biệt giữa Webpack và Vite cũng như xu hướng của hệ sinh thái

• Thiết lập dự án React nhanh chóng và trực quan với Vite

• Nâng cao năng suất code thông qua snippet và user snippet

• Tổ chức cấu trúc dự án ban đầu và nắm bắt luồng thực thi npm run dev

Ngoài ra, chúng tôi giới thiệu khái niệm và đặc điểm của cú pháp JSX, điều quan trọng nhất trong React. Bằng cách hiểu JSX kết hợp HTML và JavaScript như thế nào, có những đặc điểm cú pháp gì, bạn sẽ xây dựng nền tảng cho việc học các component sau này.

Chapter 03
Cơ bản về Component

Trong React, component là đơn vị nhỏ nhất cấu thành UI và cũng là khái niệm cốt lõi. Trong chương này, chúng ta sẽ học từng bước về component là gì, cách hoạt động và cách cấu thành thông qua code thực tế.

• Component là gì? Và tại sao nó lại quan trọng?

• Điều kiện viết và cách cấu thành của functional component

• Loại bỏ DOM không cần thiết bằng cách sử dụng React.Fragment

• Cách tạo component mới và thiết kế cấu trúc thư mục

• Hiểu khái niệm về root component và cấu trúc cây component

Ngoài ra, thông qua thực hành trực tiếp tạo ra các component và đặt chúng ở vị trí phù hợp, bạn sẽ rèn luyện được cảm giác về thiết kế dựa trên component.
Thông qua quá trình này, cách nhìn về component sẽ thay đổi, và bạn có thể tạo nền tảng để hiểu một cách tự nhiên các cấu trúc React phức tạp sau này.

Chapter 04
Dữ liệu và Props của Component

Bây giờ chúng ta sẽ tìm hiểu một cách toàn diện về Props (thuộc tính) - một trong những khái niệm cốt lõi của React. Trong chương này, bạn sẽ học cách truyền và sử dụng dữ liệu giữa các component thông qua nhiều ví dụ và bài thực hành đa dạng.

• Hiểu mối quan hệ giữa các component trong React: cấu trúc tổ tiên-cha-con

• Cách xuất dữ liệu kiểu cơ bản và kiểu tham chiếu trong JSX

• Nguyên lý cơ bản của việc truyền giá trị vào thuộc tính thẻ

• Các phương thức và mẫu khác nhau để truyền dữ liệu thông qua Props

• Destructuring assignment để tách props và cải thiện khả năng đọc hiểu

• Cách dễ dàng suy luận và định nghĩa rõ ràng kiểu của props dựa trên TypeScript

• Hiểu cách truyền props sử dụng toán tử spread (...)

• Mở rộng khả năng tái sử dụng component bằng cách sử dụng prop đặc biệt có tên children

• So sánh sự khác biệt về vai trò của props và children

Thông qua chương này, bạn sẽ hiểu một cách tự nhiên về luồng dữ liệu giữa các component React và phát triển khả năng thiết kế props có xem xét đồng thời tính an toàn kiểu dữ liệu và khả năng đọc hiểu.

Chapter 05
Component và Event

Trong ứng dụng React, xử lý sự kiện là cốt lõi để triển khai tương tác với người dùng. Trong chương này, từ việc click button đến lan truyền sự kiện, chúng ta sẽ học cách xử lý sự kiện trong React theo góc nhìn có hệ thống và thực tế.

• Cách kết nối sự kiện thông qua cú pháp JSX

• Mẫu viết thuộc tính sự kiện và hàm xử lý sự kiện

• Các phương pháp khác nhau để truyền tham số cho handler và cách thức được khuyến nghị

• Luồng đọc props bên trong handler và ví dụ thực tế

• Cấu trúc truyền handler từ component cha xuống thông qua props

• Cấu trúc và cách sử dụng đối tượng sự kiện (SyntheticEvent)

• Sự khác biệt và cách sử dụng của target, currentTarget

• Khái niệm truyền sự kiện: Hiểu về Bubbling và Capturing

• Cách ngăn chặn hành động mặc định của sự kiện (e.preventDefault())

Cuối cùng, thông qua việc tự tay tạo button component và thực hành xử lý các sự kiện đa dạng, bạn sẽ tự nhiên nội hóa các pattern xử lý sự kiện.

Chapter 06
Trạng thái component - useState hook

Quản lý trạng thái trong React là chức năng cốt lõi giúp các component phản ứng và thay đổi theo tương tác của người dùng. Trong chương này, chúng ta sẽ tìm hiểu rộng rãi về khái niệm quản lý trạng thái, cách sử dụng và ứng dụng thực tế, tập trung vào useState và useReducer.

• Lý do cần thiết của state và khái niệm cơ bản về giá trị state

• Từ cách sử dụng cơ bản của hook useState đến ứng dụng thực tế

• Trạng thái đối tượng và mảng - những điểm cần lưu ý khi xử lý và cách thức hoạt động của re-rendering

• setState cách cập nhật và cập nhật hàm

• Khái niệm độc lập của state và nâng state lên (lifting state up)

• Đóng gói (encapsulation) để phân tách trách nhiệm quản lý trạng thái

• Tạo ứng dụng counter để từng bước nâng cao kỹ năng quản lý state

• useReducer를 이용한 cấu trúc hóa logic trạng thái phức tạp

• Chuyển đổi sang mô hình reducer và thực hiện nhiệm vụ thực tế

Sau khi hoàn thành chương này, bạn sẽ trở thành một nhà phát triển React có thể quản lý ổn định từ những thay đổi trạng thái đơn giản đến luồng dữ liệu phức tạp.

Chapter 07
Render lặp & điều kiện

Giao diện người dùng (UI) thực tế được cấu thành bởi cấu trúc mà màn hình thay đổi có điều kiện tùy theo tình huống và render nhiều dữ liệu một cách lặp đi lặp lại. Trong chương này, chúng ta sẽ tập trung vào cách triển khai những UI như vậy trong React.

🔹 Render có điều kiện

• if, switch, toán tử ba ngôi (? :), toán tử logic (&&) và nhiều cách biểu diễn điều kiện khác nhau

• So sánh thời điểm sử dụng và ưu nhược điểm của từng phương pháp điều kiện

• Thực hành dựa trên các tình huống thực tế như đèn giao thông, trạng thái đăng nhập, xuất thông báo, v.v.

• Cung cấp các mẹo thực tế như điều kiện lồng nhau, khả năng đọc hiểu, chiến lược tách biệt component

🔹 Render lặp lại

• Xuất ra lặp lại component sử dụng map() dựa trên dữ liệu mảng

• Tầm quan trọng của thuộc tính key trong việc render lặp lại và hiểu về phạm vi hợp lệ

• Kết hợp lọc dữ liệu và render có điều kiện sử dụng filter() và các phương pháp khác

• Thông qua các bài tập thực tế như render danh sách công thức nấu ăn để nắm vững các mẫu lặp

Sau khi hoàn thành chương này, bạn sẽ có thể triển khai một cách tự nhiên các điều kiện phức tạp và vòng lặp bằng React, đồng thời có được kỹ năng thiết kế giao diện người dùng động với khả năng đọc hiểu tốt.

Chương 08
Styling

Trong chương này, chúng ta sẽ học rộng rãi về các kỹ thuật styling component đa dạng trong React.
Từ inline style đơn giản đến CSS-in-JS, Tailwind, styling hình ảnh, bạn sẽ học được tất cả các kỹ thuật styling thường gặp trong phát triển frontend thực tế thông qua thực hành.

🔹 Cơ bản về styling

• Cách sử dụng inline style và CSS toàn cục

• Đóng gói style theo từng component thông qua CSS Module

• Quản lý class động sử dụng tiện ích classnames

• 🧩Nhiệm vụ: Trải nghiệm so sánh các phương pháp styling khác nhau thông qua việc triển khai UI nhóm nút

🔹 CSS-in-JS — styled-components

• Cú pháp và cách sử dụng cơ bản của styled-components

• props를 활용한 động적 스타일링

• Cách sử dụng các tính năng nâng cao như keyframes, as và các hàm trợ giúp cũng như mixin

• Quản lý style toàn cục và tổng hợp các mẹo

• 🧩Nhiệm vụ: Tạo giao diện đèn giao thông bằng styled-components

🔹 Tailwind CSS — Styling theo phương pháp utility-first

• Triết lý cốt lõi và hệ thống chỉ thị của Tailwind

• Phương pháp áp dụng lớp có điều kiện và chiến lược ứng dụng thực tế

• 🧩Nhiệm vụ: Hoàn thành giao diện máy tính với Tailwind

• 🧩Nhiệm vụ thưởng: Thử thách UI nâng cao với cảm giác thực chiến của Tailwind!

🔹 Styling hình ảnh & phông chữ

• Các vấn đề cần xem xét khi render hình ảnh và phương pháp điều chỉnh CSS

• 🧩Nhiệm vụ: Triển khai giao diện người dùng hoạt hình đèn sáng lên

• Cách áp dụng Google Web Fonts cũng được tổng hợp cùng

Thông qua chương này, bạn sẽ rèn luyện được con mắt để đánh giá công cụ styling nào phù hợp với dự án, và có được cảm giác thực chiến để triển khai UI đẹp mắt và dễ bảo trì.

Chương 09
Tạo máy tính

Chương này là một dự án thực hành tập trung vào việc trực tiếp triển khai một ứng dụng máy tính thực sự hoạt động dựa trên nội dung đã học cho đến nay. Bạn sẽ trực tiếp trải nghiệm tất cả từ thiết kế component, quản lý state, xử lý sự kiện, tách biệt type, đến cấu trúc UI.

🛠 Học tập dựa trên dự án

• Tổng quan về nguyên lý hoạt động và cấu trúc của máy tính trước khi bắt đầu dự án

• Thiết kế UI và cấu trúc hóa component

• Sắp xếp vai trò và trách nhiệm của component thông qua quá trình refactoring

• 🧩Sử dụng TypeScript để phân tách rõ ràng các loại trạng thái và toán tử

• Triển khai trực tiếp các chức năng chính như số, toán tử, dấu chấm, xóa, v.v.

• Học quy trình xử lý bug và debugging thường gặp trong thực tế

🧪 Sử dụng công cụ phát triển

• Cài đặt và sử dụng React Developer Tools để trực quan hóa luồng thay đổi trạng thái

• Cải thiện khả năng theo dõi trạng thái thời gian thực và phân tích cấu trúc component

Khi hoàn thành chương này, bạn sẽ trải nghiệm một lần tách biệt component, thiết kế state, debug, quản lý type vượt ra ngoài việc chỉ đơn thuần implement tính năng, và thông qua "niềm vui khi tính năng do chính mình tạo ra hoạt động", bạn sẽ có được sự tự tin với React.

Chapter 10
Xử lý Form

Trong chương này, chúng tôi đã đưa vào những suy nghĩ thực tế về cách xử lý form trong React. Vượt ra ngoài việc xử lý input đơn giản, chúng tôi bao quát toàn bộ từ tính năng mới của React 19 (ref forwarding), tái sử dụng logic form thông qua custom hook, đến validation.

🔹 Component được kiểm soát

• Thực hành toàn diện các thành phần điều khiển như input, checkbox, radio, textarea

• Hiểu về luồng xử lý đầu vào kết nối với state và re-rendering

• 🧩Nhiệm vụ: Triển khai giao diện form kết hợp các loại input điều khiển đa dạng

🔹 Component không được kiểm soát

• Truy cập giá trị đầu vào và phương thức điều khiển dựa trên DOM thông qua ref

• So sánh ưu nhược điểm của phương pháp có kiểm soát/không kiểm soát và chiến lược tích hợp

• 🧩Nhiệm vụ: Xử lý hàng loạt nhiều đầu vào theo cách không kiểm soát

🔹 Điều khiển form nâng cao React 19

• ref là một pattern mới để truyền qua props (React 19)

• Tách biệt xử lý đầu vào phức tạp thành custom hook và tăng tính tái sử dụng

• Custom Hook nâng cao: Trừu tượng hóa trạng thái nội bộ, tích hợp validation tùy chỉnh

🔹 Kiểm tra tính hợp lệ (Validation)

• Các giá trị bắt buộc, độ dài, định dạng và các mẫu triển khai validation cơ bản khác

• Viết hàm validation tùy chỉnh và tích hợp hook

• 🧩Nhiệm vụ: Hoàn thành form đăng nhập
  → Kiểm soát đầu vào + Xác thực + Xử lý trạng thái đến thực hành form toàn diện

Sau khi hoàn thành chương này, bạn sẽ tiến xa hơn từ việc xử lý đầu vào đơn giản,
có được năng lực cấu thành luồng form phức tạp và quản lý bằng cấu trúc có thể bảo trì một cách gọn gàng.
Đây là cơ hội quyết định để có thể tiếp thu cả kinh nghiệm kiểm soát đầu vào ở mức thực tế và công nghệ React mới nhất.

Chương 11
Ứng dụng quản lý công việc

Trong chương này, chúng ta sẽ triển khai một ứng dụng quản lý công việc (Todo) thực sự hoạt động dựa trên các khái niệm cốt lõi của React đã học cho đến nay.
Đây là chương giúp bạn có thể trải nghiệm toàn bộ quy trình phát triển React thực tế từ đầu đến cuối bao gồm tách component, quản lý state, xử lý sự kiện, render danh sách, chỉnh sửa/xóa.

🛠 Nội dung triển khai thực tế

• Bắt đầu từ thiết lập dự án để xây dựng cấu trúc cơ bản

• Triển khai chức năng đăng ký công việc thông qua biểu mẫu nhập liệu

• Hiển thị danh sách công việc bằng cách render danh sách

• Thêm đánh dấu hoàn thành công việc thông qua checkbox và chức năng xóa

• 🧩Triển khai tính năng chỉnh sửa công việc để thành thạo logic cập nhật trạng thái và điều khiển UI

✅ Những gì thu được thông qua thực hành

• Vượt ra ngoài việc hiểu API đơn giản, thiết kế phân chia vai trò giữa các component và luồng dữ liệu

• Ứng dụng React hoạt động dựa trên state - tự triển khai cấu trúc và luồng hoạt động từ đầu đến cuối

• Dự án hoàn chỉnh gần như một nhiệm vụ với trải nghiệm tự tay tạo ra ứng dụng CRUD quy mô nhỏ

Sau khi hoàn thành chương này, bạn sẽ có được trải nghiệm dự án đầu tiên đầy tự tin trong việc thiết kế và hoàn thiện một ứng dụng bằng cách kết hợp các tính năng đa dạng của React.

Chapter 12
Side Effects và Kỹ thuật Tối ưu hóa Component

Chương này không chỉ đề cập đến việc "render" đơn thuần của các component React, mà còn bao gồm cả quản lý side effect như xử lý tác vụ bất đồng bộ, sự kiện trình duyệt, API bên ngoài và chiến lược tối ưu hóa để giảm thiểu việc render không cần thiết.

🔹 Quản lý side effect (useEffect, useId, v.v.)

• useId hook để cải thiện khả năng truy cập và tạo định danh duy nhất

• 🧩Áp dụng useId vào ứng dụng quản lý công việc để nắm bắt cảm giác tiếp cận thực tế trong công việc

• Thời điểm hoạt động của useEffect, nguyên lý của dependency array và các lý thuyết + thực hành khác

• 🧩Áp dụng useEffect vào ứng dụng Todo để xử lý dữ liệu bên ngoài và phản ứng với thay đổi trạng thái

🔹 Tối ưu hóa component (React.memo, useCallback, useMemo)

• React.memo để ngăn chặn việc render lại không cần thiết

• Phân tích về khi nào memoization bị xóa và lý do tại sao

• Sự khác biệt giữa [[CODE_1]]useCallback[[/CODE_2]] và [[CODE_2]]useMemo[[/CODE_2]] và thời điểm áp dụng

• 🧩Tối ưu hóa ứng dụng quản lý công việc với React.memo và useCallback để cảm nhận được sự tối ưu hóa

🔹 Chiến lược render nâng cao (lazy, suspense, error-boundary)

• Khái niệm cơ bản về lazy() và Suspense để lazy loading component

• Cấu trúc UI trong thời gian chờ tải và chiến lược cải thiện trải nghiệm người dùng

• Cách xử lý ErrorBoundary để bảo vệ ứng dụng không bị sập khi xảy ra lỗi

Sau khi hoàn thành chương này, bạn sẽ có thể trực tiếp triển khai thiết kế có xem xét đến hiệu suất và khả năng bảo trì ngay cả trong cấu trúc component phức tạp,
và sẽ có được cảm giác vận hành ứng dụng React ở mức độ mà các dịch vụ thực tế yêu cầu.

Chương 13
Context API

Bạn muốn xử lý việc truyền dữ liệu sâu giữa các component một cách gọn gàng? Context API chính là câu trả lời.
Trong chương này, chúng ta sẽ học các khái niệm cốt lõi và cách sử dụng Context API như nền tảng quản lý trạng thái toàn cục, áp dụng vào dự án thực tế và phát triển khả năng xây dựng ứng dụng có cấu trúc.

🔹 Sự cần thiết của trạng thái toàn cục và cơ bản về Context API

• Sự cần thiết của trạng thái toàn cục để giải quyết vấn đề props drilling

• [[CODE_1]]createContext[[/CODE_2]], [[CODE_2]]useContext[[/CODE_2]] được sử dụng để thiết kế trạng thái toàn cục cơ bản

• Vấn đề render không cần thiết và phương pháp cải thiện cấu trúc (memo, tách biệt context)

• Kết hợp với reducer để quản lý hiệu quả cả trạng thái toàn cục phức tạp

• ✅Bao gồm thực hành mẫu sử dụng hai hoặc nhiều Context cùng lúc

🧩 Thực hành: Dự án quản lý trạng thái UserProfile

• Phân tích mã UserProfile ban đầu → Tách biệt trạng thái bằng đối tượng context

• 🧩Kích thước chữ, chủ đề, cài đặt thông báo, cài đặt ngôn ngữ(i18n.ts) và các cài đặt môi trường người dùng khác được quản lý như trạng thái toàn cục

• Sử dụng useLayoutEffect để kiểm soát thứ tự render và tính phản hồi của layout

• ✅Học cách thiết kế cấu trúc trạng thái toàn cục có tính mở rộng cao thông qua Context API + thiết kế custom hook

🧩 Nhiệm vụ: Áp dụng Context API vào ứng dụng Todo

• Ứng dụng todo hiện có đưa vào trạng thái toàn cục → cải thiện cấu trúc chia sẻ trạng thái giữa các component

• Cấu hình để nhiều component có thể sử dụng cùng một trạng thái và tăng cường khả năng thiết kế thực tế

Thông qua chương này, bạn sẽ thoát khỏi trạng thái đơn giản ở cấp độ component,
và có thể thực sự triển khai luồng và chiến lược quản lý trạng thái toàn cục nhìn toàn bộ ứng dụng.

Chương 14
Redux ToolKit

Nếu bạn đã nắm được khái niệm về trạng thái toàn cục với Context API, thì giờ đây hãy trải nghiệm Redux Toolkit (RTK) để có cấu trúc quản lý trạng thái toàn cục có thể mở rộng và dễ bảo trì hơn.
Chương này sẽ học các tính năng cốt lõi của Redux Toolkit thông qua thực hành để có thể quản lý trạng thái phức tạp một cách có hệ thống.

🔹 Lý thuyết Redux Toolkit + Xây dựng cấu trúc

• Bối cảnh ra đời của Redux Toolkit và sự khác biệt với Redux truyền thống

• Tạo store và cấu trúc hóa slice thông qua createSlice

• Hiểu về luồng thay đổi trạng thái, dispatch action và luồng re-rendering

• ✅Redux DevTools kết nối để debug trạng thái

• Truyền tham số, mở rộng đến logic xử lý bất đồng bộ sử dụng thunk

• ✅Thực hành cấu trúc nâng cao: chia tách slice thành nhiều phần và quản lý bằng cách hợp nhất

🧩 Thực hành: Quản lý trạng thái UserProfile với Redux

• Tái cấu trúc trạng thái UserProfile dựa trên Redux

• 🧩Cấu trúc kích thước chữ, cài đặt thông báo, trạng thái theme theo từng slice

• So với Context API khả năng kiểm soát cấu trúc mạnh mẽ hơn và tính bảo trì trải nghiệm so sánh

🧩 Nhiệm vụ: Áp dụng Redux vào ứng dụng Todo

• Chuyển đổi ứng dụng quản lý công việc hiện có sang Redux Toolkit

• ✅Triển khai logic trạng thái Todo, thêm/xóa/sửa theo đơn vị slice

• Tăng cường kinh nghiệm quản lý code và chiến lược tách biệt component-store trong thực tế

Khi hoàn thành chương này, bạn sẽ tiến xa hơn từ việc quản lý trạng thái đơn giản
và đạt đến "mức độ có thể tự triển khai quản lý trạng thái toàn cục có cấu trúc theo đơn vị slice".
Đây cũng là chương thực hành được đặc biệt khuyến nghị cho những ai tò mò về cách sử dụng Redux Toolkit trong thực tế.

Chương 15
Zustand

Bạn muốn tạo trạng thái toàn cục nhanh chóng mà không cần cấu hình phức tạp?
Trong chương này, chúng ta sẽ học về Zustand - thư viện quản lý trạng thái toàn cục nhẹ và trực quan.
Với cấu trúc nhẹ hơn Redux và mạnh mẽ hơn Context, đây là giải pháp quản lý trạng thái thay thế đang ngày càng được chú ý trong thực tế.

🔹 Zustand từ cơ bản đến thực chiến

• Khái niệm và triết lý của Zustand: "Global store với minimal boilerplate"

• Cách sử dụng cơ bản và phương thức định nghĩa trạng thái

• Cấu trúc cho phép truyền tham số vào trạng thái và dễ dàng tạo ra trạng thái phái sinh

• ✅persist tính năng lưu trữ bền vững như localStorage

• ✅subscribeWithSelectorTối ưu hóa re-render sử dụng

• ✅immer를 통해 quản lý tính bất biến một cách trực quan

• ✅devtools tích hợp để xử lý debug một cách dễ dàng

🧩 Thực hành: Triển khai trạng thái UserProfile

• Triển khai lại trạng thái UserProfile dựa trên Zustand

• So với Redux/Context thì trải nghiệm sự khác biệt về lượng code, tính trực quan và khả năng mở rộng

🧩 Nhiệm vụ: Tái cấu trúc ứng dụng Todo với Zustand

• Chuyển đổi ứng dụng todo hiện có sang dựa trên Zustand

• [[SPAN_1]]✅[[/SPAN_2]]Triển khai trực tiếp các phương pháp đa dạng để component sử dụng trạng thái toàn cục

• Cung cấp trải nghiệm triển khai với mã tối thiểu cho luồng thay đổi trạng thái → render UI → lưu/khôi phục

Sau khi hoàn thành chương này, bạn sẽ trở thành người có kinh nghiệm với cả ba công cụ quản lý state (Context API, Redux Toolkit, Zustand) và
có được tiêu chuẩn thực tế và cảm giác để đánh giá và lựa chọn công cụ state toàn cục phù hợp với từng tình huống.

Chương 16
Truyền thông dữ liệu

Bây giờ là lúc biến ứng dụng React thành một "ứng dụng sống động".
Trong chương này, chúng ta sẽ học cách giao tiếp với server thực tế và kết nối trực tiếp vào dự án mini PostBrowser để hoàn thiện cấu trúc giao tiếp thực tế của ứng dụng React.

🔹 Cơ bản về Data Fetching

• Khái niệm cơ bản và cấu trúc của giao tiếp HTTP

• json-server로 구성한 로컬 API 서버 → 🛠Xây dựng môi trường API dựa trên thực hành

• Thunder Client를 활용한 API 테스트 tự động hóa

• 📝db.json Cung cấp ghi chú cấu trúc file để hoàn thiện thực hành

🔹 Thực hành CRUD sử dụng fetch

• Làm quen với cấu trúc các yêu cầu cơ bản (GET, POST, PUT, DELETE)

• ✅ Phản ánh cả các yếu tố thực tế như trạng thái loading, xử lý lỗi, hủy yêu cầu (AbortController)

• 🧩Thực hiện toàn bộ các thao tác CRUD tập trung vào thực tế bằng fetch và hiểu rõ luồng tích hợp với React

🔹 Fetching nâng cao sử dụng axios

• Tổng hợp từ cách sử dụng cơ bản axios đến toàn bộ quy trình CRUD

• ✅axios.create() thông qua cấu hình instance chung

• ✅Giới thiệu các chiến lược thực tế như interceptor, xử lý lỗi, thống nhất cấu trúc phản hồi

🧩 Dự án thực tế: Ứng dụng PostBrowser

• Cung cấp mã cơ bản → Áp dụng kết nối dữ liệu vào ứng dụng React

• Render bài viết → triển khai phân trang → thêm chức năng tìm kiếm hoàn thành tuần tự

• ✅ Thông qua thực hành, trải nghiệm toàn diện tất cả về quản lý trạng thái, luồng patching, luồng cập nhật UI

Sau khi hoàn thành chương này, bạn sẽ có được khả năng thiết kế và triển khai trực tiếp các ứng dụng React thực tế giao tiếp với API, vượt xa những component đơn giản.
Đây là phần xây dựng nền tảng vững chắc để sau này có thể mở rộng với TanStack Query hoặc quản lý state nâng cao.

Chương 17
Truyền thông dữ liệu nâng cao

Chương này tập trung vào các API liên quan đến form/bất đồng bộ được giới thiệu trong React 19,
và bạn sẽ học cách tối ưu hóa giao tiếp dữ liệu từ góc độ trải nghiệm người dùng thông qua thực hành theo từng tính năng + dự án thực tế TMDB.

🔹 Xử lý form và luồng bất đồng bộ trong React 19

• useTransition để xử lý chuyển đổi trạng thái UI mượt mà

• 🧩Học tập trải nghiệm thông qua thực hành so sánh trước và sau khi áp dụng Transition

• useActionState, form action, useFormStatus thông qua
  → Học cách xử lý form mới và luồng server action

🔹 Sử dụng các tính năng UX mới nhất

• Triển khai UI lạc quan với useOptimistic

• ✅ Thiết kế UX hiện đại phản ánh UI trước tiên ngay cả khi không có phản hồi trước các tác vụ bất đồng bộ

• use() thông qua xử lý dữ liệu trực tiếp dựa trên Promise và liên kết với Suspense

• ErrorBoundary và Suspense kết hợp để xây dựng chiến lược xử lý lỗi + loading

🧩 Thực hành: Phát triển ứng dụng phim TMDB

• Render danh sách phim → Phân trang → Triển khai đến cài đặt cuộn vô hạn

• 🧩Kết hợp Suspense + use() + ErrorBoundary để xây dựng ứng dụng phim với độ hoàn thiện cao trong thực tế

• ✅Trải nghiệm toàn bộ chu trình giao tiếp với server tích hợp cả luồng đăng ký thành viên

Sau khi hoàn thành chương này, bạn sẽ vượt qua mức độ đơn giản của fetch hay axios
và đạt đến trình độ có thể tự nhiên tích hợp các tính năng dẫn đầu về UX dữ liệu trong thời đại React 19 vào ứng dụng thực tế.
Đây là phần được khuyến khích mạnh mẽ cho những ai muốn triển khai ứng dụng có tính phản hồi UI lấy người dùng làm trung tâm và tính thời gian thực.

Chương 18
React Router v7

Trong ứng dụng React, router là thành phần cốt lõi chịu trách nhiệm về cấu trúc trang, luồng dữ liệu và trải nghiệm di chuyển của người dùng.
Trong chương này, chúng ta sẽ thiết kế cấu trúc SPA dựa trên các API mới nhất của React Router v7 và
xây dựng luồng chuyển đổi hoàn chỉnh bao gồm routing + tải dữ liệu + xử lý lỗi.

🔹 Cơ bản về định tuyến và cấu trúc hóa

• Cài đặt cơ bản và thiết lập router

• Cấu hình nested route, index route, layout route

• ✅Học các mẫu đường dẫn thực tế như tiền tố route, segment động/tùy chọn, splat, v.v.

• [[CODE_1]]NavLink[[/CODE_2]], [[CODE_2]]Link[[/CODE_2]]를 활용한 UI 중심의 điều khiển di chuyển

🔹 Hoạt động Form & Navigation

• Hiểu về xử lý form dựa trên React Router với component

• Xử lý di chuyển theo cách lập trình sử dụng hàm navigate()

• ✅Trải nghiệm sự khác biệt giữa phương thức gửi form truyền thống và cách tiếp cận dựa trên router

🔹 Tải dữ liệu + Loading + Xử lý lỗi

• Thuộc tính loader thông qua thiết kế luồng lấy dữ liệu theo đơn vị route

• loader에서 발생하는 yêu cầu bất đồng bộ → xử lý loading → xử lý lỗi

• ✅loader + suspense, loader + errorElement và triển khai cấu trúc thực tế khác

Sau khi hoàn thành chương này, từ thiết kế trang của ứng dụng React đến luồng dữ liệu, trải nghiệm người dùng
bạn sẽ có được khả năng thiết kế frontend để tự mình thiết kế và vận hành toàn bộ cấu trúc SPA.

Chương 19
Dự án Cuối khóa - SULOG

Cho đến nay, tất cả nội dung đã học về thiết kế component, quản lý state, giao tiếp dữ liệu, tối ưu trải nghiệm người dùng, xử lý xác thực, triển khai
đều được tập hợp trong giai đoạn hoàn thiện dự án fullstack dựa trên React.
Trong chương này, bạn sẽ trực tiếp triển khai và trải nghiệm việc triển khai ứng dụng web dạng blog hoạt động như một dịch vụ thực tế.

🛠 Backend + Triển khai xác thực

• Cấu hình MongoDB và tích hợp API backend

• ✅Triển khai đăng nhập Kakao: Từ đăng ký ứng dụng đến cấu hình toàn bộ luồng OAuth

• ✅Triển khai đăng ký/đăng nhập tự phát triển: Cấu thành form + Kết nối server + Quản lý trạng thái

• Thực hành xác thực token, xử lý lỗi, debug luồng xác thực

🧩 Triển khai đầy đủ chức năng bài đăng

• Đăng bài viết → Liên kết preset đính kèm hình ảnh

• ✅ Thực hiện toàn bộ luồng CRUD bao gồm các chức năng sửa, xóa và xem chi tiết

• Viết, xóa, render bình luận → Xử lý liên kết trạng thái và re-rendering

• ✅Nội dung chỉnh sửa backend được cung cấp cùng với ghi chú bài giảng

🔁 Tối ưu hóa phân trang + danh sách

• Tải danh sách bài viết chính theo từng trang

• ✅ Tăng cường khả năng thực chiến bằng cách tự thiết kế component phân trang

• Hiểu về chiến lược xử lý phân trang có cấu trúc thay vì cuộn vô hạn

🎯 Hoàn thiện UI + Bổ sung lỗi + Triển khai thực tế

• Cải thiện UI/UX phù hợp với luồng người dùng và bổ sung những điểm thiếu sót

• ✅ Frontend & Backend mỗi phần thực hành triển khai thực tế thông qua Vercel

• Dựa trên tiêu chuẩn dịch vụ thực tế cấu hình domain, tối ưu hóa hình ảnh, kiểm tra cuối cùng

Khi hoàn thành chương cuối này, bạn sẽ vượt qua những bài tập đơn giản
để trở thành "nhà phát triển có thể tự xây dựng và vận hành dịch vụ web dựa trên xác thực người dùng".
Hãy tích hợp tất cả những gì đã học qua khóa học thành một dịch vụ hoàn chỉnh và kiểm chứng năng lực của bạn!

Các bài thực hành đa dạng

Các bài thực hành được tối ưu hóa phù hợp với từng cấp độ chương

Tôi sẽ chỉ giới thiệu những phần có áp dụng thiết kế, bỏ qua những bài thực hành chưa áp dụng thiết kế!

Đèn giao thông (chương 08)

Lamp (chương 08)

Máy tính (chương 09)

Đăng nhập (chương 10)

Ứng dụng quản lý công việc (chương 11)

Cài đặt người dùng (chương 13)

Trình duyệt bài viết (chương 16)

TMDB(chương 17)

Final (chapter 19) - Không thể tạo GIF do vấn đề dung lượng..😭

Nếu làm cả những ví dụ chưa áp dụng thiết kế thì sẽ có hàng chục cái +

Tất cả những ví dụ có mật độ cao này sẽ giúp việc học từng bước của các bạn

Tôi tự tin rằng sẽ giúp đỡ bạn một cách hoàn hảo.

Chờ một chút!

Bạn có biết rằng các khóa học cũng có 'duyên phần' phù hợp với mình không?

Giống như một tựa game kiệt tác được mọi người công nhận có thể không thú vị đối với tôi,
các khóa học cũng không phù hợp với tất cả mọi người như nhau.

Dù một khóa học có được khen ngợi nhiều đến mấy thì cũng có thể không phù hợp với tôi,
ngược lại, một khóa học bình thường với ai đó lại có thể trở thành khóa học tuyệt vời nhất đối với tôi.

Vì vậy tất cả các khóa học của tôi đều được công khai miễn phí ít nhất 10% trở lên.
Hãy trực tiếp nghe thử và xem phong cách của tôi có 'hợp' với bạn không!

Nếu chúng ta hợp nhau,
tôi sẽ hướng dẫn bạn con đường tắt nhanh nhất để trở thành frontend developer.
Hãy tin tưởng và theo tôi!🚀