Học React.js với TypeScript: Hoàn thiện từ cơ bản đến kỹ thuật mới nhất

Chương 01
Chuẩn bị

Học cách thiết lập môi trường cần thiết trước khi bắt đầu học React.
Tìm hiểu cách cài đặt VSCode cho từng hệ điều hành
và chuẩn bị học tập bằng cách cài đặt Prettier cũng như các tiện ích mở rộng (extensions).

Chương 02
Bắt đầu

Chương này sẽ hướng dẫn cách bắt đầu một ứng dụng React theo phương thức 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ế cho Create React App (CRA), đồng thời làm quen với các thiết lập thiết yếu 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 sự khác biệt giữa Webpack và Vite cùng xu hướng của hệ sinh thái

• Thiết lập dự án React nhanh chóng và trực quan bằng cách sử dụng Vite

• Nâng cao năng suất viết mã thông qua snippet và user snippet

• Sắp xếp cấu trúc dự án ban đầu và nắm bắt luồng thực thi của npm run dev

Ngoài ra, chúng tôi cũng giới thiệu về 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 cách JSX kết hợp HTML và JavaScript cũng như những đặc điểm cú pháp của nó, bạn sẽ xây dựng được nền tảng vững chắc cho việc học về component sau này.

Chương 03
Cơ bản về Component

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

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

• Điều kiện viết và phương thức cấu tạo của component hàm

• Loại bỏ các 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ề Component gốc (Root Component) và cấu trúc cây Component

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

Chương 04
Dữ liệu của Component và Props

Bây giờ chúng ta sẽ chính thức tìm hiểu 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ẽ được học cách truyền và sử dụng dữ liệu giữa các thành phần thông qua nhiều ví dụ và bài tập thực hành khác nhau.

• Hiểu mối quan hệ giữa các thành phần 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 bên 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ô hình đa dạng để truyền dữ liệu thông qua Props

• Phân tách props bằng cách sử dụng Destructuring và cải thiện khả năng đọc hiểu mã nguồn

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

• Hiểu cách truyền props bằng cách 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 gọi là children

• So sánh sự khác biệt về vai trò giữ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 thành phần React, đồng thời nâng cao năng lực thiết kế props có tính đến cả tính an toàn kiểu dữ liệu và khả năng đọc.

Chương 05
Component và Sự kiện

Trong ứng dụng React, xử lý sự kiện là cốt lõi để thực hiện các tương tác với người dùng. Trong chương này, chúng ta sẽ học cách xử lý các sự kiện trong React từ việc nhấp chuột vào nút cho đến sự lan truyền sự kiện dưới góc nhìn hệ thống và thực tiễn.

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

• Các mẫu viết thuộc tính sự kiện và hàm xử lý sự kiện (event handler)

• Các cách khác nhau để truyền tham số vào handler và phương pháp được đề xuất

• Luồng đọc props bên trong trình xử lý và ví dụ thực tế

• Cấu trúc truyền handler dưới dạng props từ component cha

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

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

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

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

Cuối cùng, thông qua việc thực hành tự tạo thành phần nút bấm và xử lý các sự kiện đa dạng, bạn sẽ tự nhiên nắm vững các mô hình xử lý sự kiện.

Chương 06
Trạng thái của Component - Hook useState

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

• Lý do cần có trạng thái và khái niệm cơ bản về giá trị trạng thái

• Từ cách sử dụng cơ bản của hook useState cho đến áp dụng vào thực tế hook to its practical application

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

• Phương thức cập nhật của setState và cập nhật hàm (functional update)

• Khái niệm về tính độc lập của trạng thái và nâng trạng thái lên (lifting state up)

• Tách biệt trách nhiệm quản lý trạng thái thông qua tính đóng gói (encapsulation)

• Dần dần nâng cao kỹ năng quản lý trạng thái thông qua việc tự tay xây dựng ứng dụng đếm (counter app)

• useReducer를 이용한 복잡한 상태 로직의 구조화

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

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

Chương 07
Render lặp & điều kiện

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

🔹 Render theo điều kiện

• Các cách biểu diễn điều kiện đa dạng như if, switch, toán tử ba ngôi (? :), toán tử logic (&&), v.v.)

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

• Thực hành dựa trên các kịch bản thực tế như đèn giao thông, trạng thái đăng nhập, hiển thị tin nhắn, v.v.

• Cung cấp các mẹo thực tế như điều kiện lồng nhau, tính dễ đọc, chiến lược tách biệt component, v.v.

🔹 Rendering lặp lại

• Xuất các thành phần lặp lại bằng cách sử dụng map() dựa trên dữ liệu mảng

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

• Kết hợp chọn lọc dữ liệu bằng cách sử dụng filter() và các phương thức khác với render có điều kiện and similar methods with conditional rendering

• Lĩnh hội các mô hình lặp lại thông qua các bài tập thực hành như render danh sách công thức nấu ăn.

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

Chapter 08
Styling

Trong chương này, chúng ta sẽ tìm hiểu rộng rãi về các kỹ thuật tạo kiểu (styling) khác nhau cho các thành phần trong React.
Bạn sẽ được thực hành tất cả các kỹ thuật tạo kiểu thường gặp trong phát triển frontend thực tế, từ phong cách inline đơn giản đến CSS-in-JS, Tailwind và tạo kiểu cho hình ảnh.

🔹 Kiến thức cơ bản về Styling

• Cách sử dụng Inline Style và CSS toàn cục

• Đóng gói phong cách (style encapsulation) theo đơn vị component thông qua CSS Module

• Quản lý class động bằng cách sử dụng tiện ích classnames utility

• 🧩 Nhiệm vụ: Trải nghiệm so sánh các phương thức tạo kiểu khác nhau thông qua việc triển khai UI nhóm nút bấm

🔹 CSS-in-JS — styled-components

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

• Tạo kiểu động (dynamic styling) sử dụng props

• Các tính năng nâng cao như keyframes, as và cách sử dụng các hàm helper cũng như mixin, and how to use helper functions and mixins

• 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 — Phong cách thiết kế Utility-first

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

• Cách áp dụng class có điều kiện và chiến lược áp dụng thực tế

• 🧩 Nhiệm vụ: Hoàn thiện UI máy tính bằng Tailwind

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

🔹 Tạo kiểu cho Hình ảnh & Phông chữ

• Các lưu ý khi hiển thị hình ảnh và phương pháp điều chỉnh CSS

• 🧩 Nhiệm vụ: Thực hiện giao diện UI hoạt hình đèn sáng

• Tổng hợp cả cách áp dụng Google Web Font

Thông qua chương này, bạn sẽ rèn luyện được khả năng đánh giá công cụ tạo kiểu nào phù hợp cho dự án, đồng thời trang bị cảm quan thực tế để hiện thực hóa giao diện người dùng đẹ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 tập trung vào thực hành, nơi bạn sẽ trực tiếp triển khai một ứng dụng máy tính hoạt động thực tế dựa trên những nội dung đã học cho đến nay. Bạn sẽ được trực tiếp trải nghiệm toàn bộ quá trình từ thiết kế thành phần, quản lý trạng thái, xử lý sự kiện, phân tách kiểu dữ liệu cho đến cấu hình giao diện người dùng (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 lại 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 kiểu trạng thái và toán tử

• Tự mình triển khai các chức năng chính như số, toán tử, dấu chấm và xóa (clear)

• Học về quy trình xử lý lỗi và gỡ lỗi (debugging) thường gặp trong thực tế frequently encountered in practice

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

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

• Nâng cao 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

Sau khi hoàn thành chương trình này, bạn sẽ không chỉ dừng lại ở việc triển khai các tính năng đơn giản mà còn được trải nghiệm đồng thời từ chia tách component, thiết kế trạng thái, gỡ lỗi cho đến quản lý kiểu dữ liệu, đồng thời có được sự tự tin với React thông qua “niềm vui khi thấy tính năng do chính mình tạo ra hoạt động”.

Chương 10
Xử lý Form

Chương này bao gồm những suy ngẫm thực tế về việc làm thế nào để xử lý form trong React. Không chỉ dừng lại ở việc xử lý nhập liệu đơn thuần, chương này còn tổng hợp mọi thứ từ các tính năng mới của React 19 (truyền ref), tái sử dụng logic form thông qua Custom Hook, cho đến kiểm tra tính hợp lệ (validation).

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

• Thực hành toàn diện về các thành phần được kiểm soát (controlled components) như input, checkbox, radio, textarea, v.v.

• Thấu hiểu luồng xử lý đầu vào kết nối với trạng thái và quá trình re-rendering

• 🧩 Nhiệm vụ: Triển khai giao diện Form kết hợp nhiều đầu vào điều khiển khác nhau

🔹 Component không kiểm soát (Uncontrolled Component)

• Truy cập giá trị nhập liệu thông qua ref và phương thức điều khiển dựa trên DOM and DOM-based control methods

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

• 🧩 Nhiệm vụ: Xử lý hàng loạt nhiều đầu vào bằng phương thức không kiểm soát (uncontrolled)

🔹 Kiểm soát Form nâng cao trong React 19

• ref Mẫu hình mới để truyền dưới dạng props (React 19) (React 19)

• Tách biệt việc xử lý nhập liệu phức tạp thành Custom Hook và nâng cao khả năng tái sử dụng

• Chuyên sâu về Custom Hook: Trừu tượng hóa trạng thái nội bộ, liên kết Validation tùy chỉnh

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

• Mẫu triển khai xác thực cơ bản cho các giá trị bắt buộc, độ dài, định dạng, v.v.

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

• 🧩 Nhiệm vụ: Hoàn thiện form đăng nhập
  → Kiểm soát đầu vào + Xác thực + Xử lý trạng thái Thực hành form tổng thể covering input control + validation + state handling

Sau khi hoàn thành chương trình này, bạn sẽ tiến xa hơn việc xử lý dữ liệu nhập đơn thuần,
đạt được năng lực cấu trúc các luồng biểu mẫu phức tạp và quản lý chúng theo một cấu trúc có thể bảo trì sạch sẽ.
Đây là cơ hội then chốt để bạn có thể tự mình trải nghiệm việc kiểm soát dữ liệu nhập ở cấp độ thực tế và lĩnh hội các kỹ thuật React mới nhất.

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

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

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

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

• Thực hiện chức năng đăng ký công việc thông qua form nhập liệu

• Hiển thị danh sách việc cần làm bằng cách render danh sách

• Đánh dấu hoàn thành công việc thông qua hộp kiểm và thêm chức năng xóa

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

✅ Những gì bạn nhận được thông qua thực hành

• Không chỉ dừng lại ở việc hiểu API đơn thuần, mà còn thiết kế luồng dữ liệu và phân chia vai trò giữa nhiều thành phần khác nhau

• Tự mình thực hiện từ đầu đến cuối cấu trúc và luồng hoạt động của ứng dụng React hoạt động xoay quanh trạng thái from start to finish on your own.

• Kinh nghiệm tự mình tạo ra một ứng dụng CRUD quy mô nhỏ thông qua một dự án hoàn chỉnh gần giống như một nhiệm vụ thực tế as a mission-like, complete project

Sau khi kết thúc 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.

Chương 12
Side effect và kỹ thuật tối ưu hóa component

Chương này không chỉ dừng lại ở việc các thành phần React thực hiện "render", mà còn bao quát cả quản lý side effect như tác vụ bất đồng bộ, sự kiện trình duyệt, xử lý API bên ngoài cùng với 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.)

• Nâng cao khả năng truy cập và tạo trình định danh duy nhất bằng cách sử dụng hook useId hook

• 🧩 Áp dụng useId vào ứng dụng quản lý công việc để rèn luyện kỹ năng tiếp cận thực tế

• Lý thuyết + thực hành về thời điểm hoạt động của useEffect, nguyên lý của mảng phụ thuộc (dependency array), v.v.'s execution, the principles of the dependency array, etc.

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

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

• React.memo ngăn chặn việc re-render không cần thiết

• Phân tích khi nào memoization bị giải phóng và lý do tại sao

• Sự khác biệt giữa useCallback và useMemo cùng thời điểm áp dụng and when to apply them

• 🧩 Trải nghiệm tối ưu hóa bằng cách áp dụng React.memo và useCallback vào ứng dụng quản lý công việc

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

• Khái niệm cơ bản về lazy() và Suspense để trì hoãn việc tải (lazy loading) các thành phần (component)

• Cấu trúc UI trong khi 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 có thể tự mình triển khai thiết kế có tính đến hiệu suất và bảo trì ngay cả trong cấu trúc thành phần phức tạp, đồng thời
trang bị đượ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

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

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

• Nhu cầu về trạng thái toàn cục để giải quyết vấn đề props drilling

• Thiết kế trạng thái toàn cục cơ bản sử dụng createContext và useContext

• 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 context)

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

• ✅ Bao gồm thực hành mô hình sử dụng kết hợp từ hai Context trở lên

🧩 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

• 🧩 Quản lý các thiết lập môi trường người dùng như kích thước chữ, chủ đề, cài đặt thông báo, cài đặt ngôn ngữ (i18n.ts) dưới dạng trạng thái toàn cục

• Sử dụng kết hợp với useLayoutEffect để kiểm soát thứ tự render và khả năng phản hồi của layout

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

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

• Áp dụng trạng thái toàn cục vào ứng dụng Todo hiện tại → Cải thiện cấu trúc chia sẻ trạng thái giữa các thành phần

• Cấu trúc để nhiều thành phần có thể cùng sử dụng một trạng thái, giúp tăng cường khả năng thiết kế thực chiến

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

Chương 14
Redux ToolKit

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

🔹 Lý thuyết Redux Toolkit + Thiết lập cấu trúc

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

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

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

• ✅ Gỡ lỗi trạng thái thông qua liên kết Redux DevTools

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

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

🧩 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 hóa kích thước chữ, cài đặt thông báo, trạng thái chủ đề, v.v. theo từng đơn vị slice

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

🧩 Nhiệm vụ: Áp dụng Redux vào ứng dụng Todo (danh sách việc cần làm)

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

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

• Tăng cường trải nghiệm quản lý mã nguồn và chiến lược tách biệt Component-Store trong thực tế in practice

Sau khi hoàn thành chương trình này, bạn sẽ tiến xa hơn việc quản lý trạng thái đơn thuần và đạt đến
trình độ có thể trực tiếp triển khai "quản lý trạng thái toàn cục có cấu trúc theo đơn vị slice".
Đây là một chương trình thực hành rất được khuyến khích 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 một cách nhanh chóng mà không cần thiết lập phức tạp?
Trong chương này, chúng ta sẽ tìm hiểu về Zustand, một 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à một giải pháp thay thế quản lý trạng thái đang ngày càng được chú ý trong thực tế.

🔹 Từ cơ bản đến thực tiễn về Zustand

• Khái niệm và triết lý của Zustand: “Global store with 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 có thể truyền tham số vào trạng thái và dễ dàng tạo ra các trạng thái phái sinh

• ✅ Lưu trữ vĩnh viễn như LocalStorage với tính năng persist feature for persistence storage such as local storage

• ✅ subscribeWithSelectorTối ưu hóa re-render bằng cách sử dụng

• ✅ immer giúp quản lý tính bất biến một cách trực quan

• ✅ devtools liên kết giúp xử lý gỡ lỗi một cách dễ dàng

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

• Thực hiện lại trạng thái UserProfile dựa trên Zustand state based on Zustand

• 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 so với Redux/Context compared to Redux/Context

🧩 Nhiệm vụ: Refactoring ứng dụng Todo với Zustand

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

• ✅ Trực tiếp triển khai các cách khác nhau để component sử dụng trạng thái toàn cầu

• Cung cấp trải nghiệm triển khai quy trình Thay đổi trạng thái → Render UI → Lưu trữ/Khôi phục với mã nguồn tối thiểu

Sau khi hoàn thành chương trình này, với tư cách là một chuyên gia đã trải nghiệm cả ba công cụ quản lý trạng thái (Context API, Redux Toolkit, Zustand), bạn sẽ có được
tiêu chuẩn thực tế và cảm quan để có thể đánh giá và lựa chọn công cụ trạng thái 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".
Trong chương này, chúng ta sẽ học cách giao tiếp với máy chủ thực tế, trực tiếp kết nối vào mini project PostBrowser và hoàn thiện cấu trúc giao tiếp thực chiến 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

• Cấu hình máy chủ API cục bộ với json-server → 🛠 Xây dựng môi trường API dựa trên thực hành

• Tự động hóa kiểm tra API bằng cách sử dụng Thunder Client

• 📝 Cung cấp ghi chú cấu trúc tệp db.json để hoàn thiện nền tảng thực hànhfile configuration notes provided to complete the practice-based setup

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

• Nắm vững cấu trú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, và 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 luồng liên kết với React

🔹 Truy vấn dữ liệu nâng cao (Advanced Fetching) sử dụng axios

• Tóm tắt toàn bộ quy trình CRUD từ cách sử dụng axios cơ bản

• ✅ 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 và tích hợp cấu trúc phản hồi

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

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

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

• ✅ Trải nghiệm toàn diện từ quản lý trạng thái, luồng fetch dữ liệu đến luồng cập nhật UI thông qua thực hành

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

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

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,
giúp bạn học cách tối ưu hóa giao tiếp dữ liệu dưới 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

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

• Thực hiện UI lạc quan với useOptimistic

• ✅ Thiết kế UX mới nhất giúp phản ánh UI trước cả khi có phản hồi trước khi thực hiện các tác vụ bất đồng bộ

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

• Kết hợp ErrorBoundary và Suspense để thiết lập chiến lược xử lý lỗi + loading

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

• Hiển thị danh sách phim → Phân trang → Triển khai cho đến cuộn vô hạn

• 🧩 Hoàn thiện ứng dụng xem phim với độ chỉn chu cao bằng cách kết hợp Suspense + use() + ErrorBoundary

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

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

Chương 18
React Router v7

Trong ứng dụng React, bộ định tuyến (router) là 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, đồng thời
xây dựng luồng chuyển đổi hoàn chỉnh từ định tuyến + 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 bộ định tuyến (Router)

• Cấu trúc Route lồng nhau (Nested Routes), Index Routes và Layout Routes

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

• Điều khiển điều hướng tập trung vào UI bằng cách sử dụng NavLink và Link

🔹 Hoạt động của Form & Navigation

• <Form> Hiểu cách xử lý form dựa trên React Router với thành phần 컴포넌트 component

• Xử lý di chuyển theo phương thức lập trình bằng cách sử dụng hàm navigate() function

• ✅ 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

🔹 Truy xuất dữ liệu + Đang tải + Xử lý lỗi

• loader Thiết kế luồng nạp dữ liệu (data fetching) theo từng route thông qua thuộc tính

• Yêu cầu bất đồng bộ phát sinh từ loader → Xử lý loading → Xử lý lỗi → Loading processing → Error handling

• ✅ Triển khai các cấu trúc thực tế như loader + suspense, loader + errorElement

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

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

Đây là giai đoạn hoàn thiện dự án Full-stack dựa trên React, nơi tập hợp tất cả nội dung đã học từ trước đến nay bao gồm thiết kế component, quản lý trạng thái, truyền thông dữ liệu, tối ưu hóa trải nghiệm người dùng, xử lý xác thực và triển khai.

Trong chương này, bạn sẽ trực tiếp thực hiện và trải nghiệm việc triển khai một ứng dụng web dạng blog hoạt động như một dịch vụ thực tế.

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

• Thiết lập MongoDB và kết nối 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

• ✅ Tự triển khai đăng ký/đăng nhập: Cấu hình form + Liên kết server + Quản lý trạng thái

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

🧩 Triển khai toàn bộ chức năng bài viết

• Đă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 chỉnh sửa, xóa và xem chi tiết

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

• ✅ Nội dung sửa đổi backend được cung cấp kèm theo trong ghi chú bài giảng

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

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

• ✅ Tự thiết kế component điều hướng trang (page navigation) để tăng cường kỹ năng thực tế

• Hiểu chiến lược xử lý phân trang chuẩn hóa thay vì cuộn vô hạn

🎯 Hoàn thiện UI + Khắc phục lỗi + Triển khai thực tế

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

• ✅ Thực hành triển khai thực tế thông qua Vercel cho cả Frontend & Backend

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

Sau khi hoàn thành chương trình cuối cùng này, bạn sẽ không chỉ dừng lại ở việc luyện tập đơn thuần mà sẽ trở thành
“một nhà phát triển có khả năng tự mình 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 kiểm chứng kỹ năng của mình bằng cách tích hợp tất cả những gì đã học được qua bài giảng vào một dịch vụ hoàn chỉnh!

Nhiều bài thực hành đa dạng

Các bài thực hành tối ưu được thiết kế phù hợp với trình độ của từng chương

Tôi sẽ chỉ giới thiệu những bài thực hành có áp dụng thiết kế, ngoại trừ những bài không có thiết kế nhé!

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

Đèn (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 đăng(chương 16)

TMDB(chương 17)

Final (chương 19) - Không thể tạo ảnh GIF do vấn đề dung lượng..ㅠ

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

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

Tôi tự tin rằng nó 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 bài giảng cũng có 'phong cách' phù hợp với mình không?

Giống như một trò chơi bom tấn được mọi người công nhận nhưng có thể không thú vị đối với tôi,
bài giảng cũng không phải lúc nào cũng phù hợp với tất cả mọi người theo cùng một cách.

Dù là một bài giảng nhận được vô số lời khen ngợi thì vẫn có thể không phù hợp với bạn,
ngược lại, một bài giảng bình thường với ai đó lại có thể trở thành bài giảng tuyệt vời nhất đối với bạn.

Vì vậy, tất cả các bài giảng của tôi đều được công khai miễn phí ít nhất 10%.
Hãy tự mình nghe thử và kiểm tra xem phong cách của tôi có 'phù hợp' với bạn không nhé!

Nếu bạn cảm thấy phong cách của tôi phù hợp với mình,
tôi sẽ hướng dẫn bạn con đường ngắn nhất để trở thành nhà phát triển Front-end.
Hãy tin tưởng và đi theo tôi! 🚀