Bộ thư viện thực chiến React “một miếng” - Zustand, Tanstack Query, TailwindCSS

Hãy nâng cấp ứng dụng React của bạn với Zustand, Tanstack Query và Tailwind CSS! Chúng tôi sẽ hướng dẫn bạn những khái niệm cốt lõi và cách sử dụng các công cụ đa dạng, giúp bạn có thể chinh phục cả những dự án phức tạp.

(5.0) 12 đánh giá

339 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

React
React
Web Application
Web Application
TailwindCSS
TailwindCSS
react-query
react-query
zustand
zustand
React
React
Web Application
Web Application
TailwindCSS
TailwindCSS
react-query
react-query
zustand
zustand

Đánh giá từ những học viên đầu tiên

5.0

5.0

ataraxia808

100% đã tham gia

Tuyệt.... Hoàn toàn có thể làm một dự án nhỏ (toy project) bằng React mà không cần phần front-end riêng biệt.

5.0

ggomsoo

100% đã tham gia

Tôi cảm thấy mình đã thu hoạch được rất nhiều điều thông qua khóa học này. - Với một người đang dừng lại ở tailwindcss v3 như tôi, tôi đã nắm bắt được những thay đổi trong v4. - Cách sử dụng zustand và @tanstack/react-query hiệu quả hơn, dù tôi đã có kinh nghiệm sử dụng trước đó. - shadcn/ui - thứ mà tôi rất quan tâm nhưng từng cảm thấy khá mông lung khi bắt đầu. - Cấu trúc thư mục của các tệp tin trong dự án. - Dù chỉ là nếm thử, nhưng tôi đã biết cách sử dụng supabase (đăng ký thành viên, v.v.) - điều mà tôi luôn tò mò khi chỉ biết làm front-end. Vì thời điểm quay bài giảng và thời điểm tôi học khác nhau, nên khi cài đặt hoặc áp dụng các thư viện theo hướng dẫn có một số phần khác biệt. Tôi đã vừa tự tìm hiểu vừa theo kịp tiến độ bài học. Nhờ vậy mà tôi cảm thấy thú vị hơn và đã hoàn thành khóa học đến cùng. Cảm ơn bạn vì một bài giảng tuyệt vời 😊 Dựa trên những gì đã học, tôi sẽ cố gắng áp dụng chúng vào các dự án cá nhân hoặc trau chuốt lại các dự án cũ của mình.

5.0

co4331

100% đã tham gia

Thật tuyệt khi tôi đã có thể tìm hiểu về các thư viện mà mình vốn thắc mắc bấy lâu nay, cùng với các khái niệm frontend bổ sung khác.

Bạn sẽ nhận được điều này sau khi học.

  • Sự tự tin để thử sức với các dự án React.js phức tạp hơn

  • Phương pháp quản lý trạng thái toàn cục hiệu quả bằng Zustand

  • Phương pháp quản lý trạng thái máy chủ hiệu quả bằng TanStack Query (với việc sử dụng bộ nhớ đệm)

  • Cách tạo kiểu nhanh chóng và tiện lợi bằng Tailwind CSS và Shadcn/ui

Khóa học này có nội dung giống với phần đầu của khóa học "Dự án thực tế vừa miệng - Phần SNS". Xin lưu ý rằng nội dung có thể bị trùng lặp đối với những học viên đã tham gia khóa học đó.

스크린샷 2026-08-26 001219


Giới thiệu các công cụ để xây dựng ứng dụng React mạnh mẽ hơn

Zustand + Tanstack Query + TailwindCSS

Để xử lý tốt các tính năng phức tạp, các công cụ của chúng ta cũng cần được nâng cấp theo.

Trong khóa học này, chúng ta sẽ tìm hiểu các khái niệm cốt lõi và cách sử dụng những công cụ được liệt kê dưới đây theo cách thú vị hơn bất kỳ ai.

Tailwind CSS


  • Công cụ giúp việc tạo kiểu CSS trở nên thuận tiện hơn.

  • Không cần có tệp CSS riêng để tạo kiểu

  • https://tailwindcss.com/


Shadcn/ui


  • Thư viện thiết kế dựa trên Tailwind CSS

  • Cung cấp các component chất lượng cao (ví dụ: Input, Button, Dialog, v.v.)

  • https://ui.shadcn.com/

Zustand


  • Thư viện quản lý trạng thái toàn cục nhỏ gọn và nhẹ nhàng

  • Thế lực mới nổi đang dần thay thế Redux hiện tại

  • https://zustand-demo.pmnd.rs/

Tanstack Query


  • Thư viện quản lý trạng thái máy chủ

  • Giúp xử lý trạng thái tải và lỗi khi fetch dữ liệu bất đồng bộ


  • https://tanstack.com/query/latest


Trăm nghe không bằng một thấy 🖌️

Kết hợp với hình ảnh trực quan bằng hoạt ảnh.

Trăm nghe không bằng một thấy, có nghĩa là nghe trăm lần cũng không bằng thấy một lần.

Đồng hành cùng bạn bằng các hình ảnh trực quan dạng hoạt họa, giúp bạn dễ dàng hệ thống hóa ngay cả những khái niệm phức tạp.


Chúng tôi cũng đã chuẩn bị ghi chú ôn tập!

Chỉ dành riêng cho học viên! Cung cấp sổ tay

Chúng tôi cung cấp sổ tay dành riêng cho học viên, trong đó tóm tắt kỹ lưỡng những nội dung cốt lõi của bài giảng.

Bạn có thể xem ngay liên kết và mật khẩu của sổ tay khi mua khóa học.

Chúng tôi cũng đã chuẩn bị PDF! 📝

Dành cho những bạn muốn xem sổ tay khóa học dưới dạng PDF thay vì trang web,

Tôi đã chuẩn bị cả PDF với tổng cộng 2 chủ đề.

Chủ đề sáng

Chủ đề tối

Bạn muốn thử sức đến cả dự án thực tế sao?!

Tặng bạn mã giảm giá cho dự án thực chiến Hanip - SNS.

Dành cho những học viên muốn trải nghiệm cả dự án thực tế nữa

Chúng tôi tặng bạn mã giảm giá cho dự án thực chiến SNS Hanip, bao gồm nội dung của khóa học này và cả dự án thực tế.

📣 Số tiền giảm của phiếu giảm giá bằng với giá của khóa học này (có thể kiểm tra phiếu giảm giá khi mua khóa học)

Hướng dẫn về đối tượng học khóa học

Khóa học này được thiết kế dành cho những người có kiến thức cơ bản về React.js và TypeScript.

Nếu bạn chưa quen với các công nghệ trên, chúng tôi khuyến nghị bạn nên học các khóa học tiên quyết dưới đây trước.

5 nguyên tắc của series “Một miếng”

⚖ Nguyên tắc 1. Tài liệu trực quan phong phú và dễ hiểu

Dù là cùng một món ăn, món trông đẹp mắt hơn thường cũng được cảm nhận là ngon hơn
; tương tự, ngay cả khi giải thích cùng một khái niệm, tôi nghĩ rằng tài liệu trực quan hấp dẫn và trực quan hơn sẽ dễ hiểu hơn.

Vì vậy, tôi đã không ngừng nỗ lực tạo ra các tài liệu trực quan, dễ hiểu, bao gồm cả hình ảnh động.

⚖ Nguyên tắc 2. Sự tận tâm

Khi xuất hiện thuật ngữ hoặc khái niệm mới, tôi không giải thích qua loa rồi bỏ qua, cũng không vội cho rằng các bạn đã biết. Tôi đã cố gắng hết sức để các bạn không phải vừa nghe giảng vừa phải tự tìm kiếm trên Google.

⚖ Nguyên tắc 3. Tính mạch lạc кат

Để duy trì sự hứng thú của các học viên, khi xuất hiện nội dung mới trong bài giảng, tôi luôn cân nhắc tính mạch lạc để xem nội dung đó có liên quan đến phần trước hay không và liệu các bạn có cảm thấy mạch bài giảng đột nhiên bị ngắt quãng hay không.

⚖ Nguyên tắc 4. Phát âm và cách nói rõ ràng, hay emcee

Vì bạn sẽ phải nghe giọng tôi trong thời gian dài, tôi luôn nỗ lực để có cách phát âm và nhả chữ rõ ràng.
Vì vậy, tôi đã xây dựng bài giảng sao cho bạn vẫn có thể nghe hiểu mọi thứ ngay cả khi phát ở tốc độ gấp đôi.

Hãy thử nghe một lần! Liên kết phát ở tốc độ 2x

⚖ Nguyên tắc 5. Giao tiếp

Tập hợp trong cộng đồng dành riêng cho học viên, cùng chia sẻ kiến thức và tin tức để phát triển.

Giới thiệu người chia sẻ kiến thức


Lee Jeong-hwan | Winterlood

Tôi tin rằng luôn có cách để giải thích mọi thứ một cách dễ hiểu và thú vị
Nhà phát triển frontend & nhà đào tạo

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Các học viên của series “Học trong một miếng” (đã hoàn thành khóa học React.js + TypeScript)

  • Những người đã có kiến thức về React.js và TypeScript

  • Dành cho những ai muốn vượt ra khỏi mức độ hướng dẫn cơ bản và thử sức với các dự án thực tế.

  • Dành cho những ai đang tìm kiếm khóa học có phần hỏi đáp được thực hiện ít nhất một lần mỗi ngày từ thứ Hai đến thứ Sáu.

  • Dành cho những ai đang tìm kiếm các khóa học có cộng đồng học viên do chính người chia sẻ kiến thức trực tiếp vận hành và hoạt động sôi nổi

Cần biết trước khi bắt đầu?

  • Kiến thức cơ bản về React.js (trình độ người học khóa học React nhập môn)

  • TypeScript cơ bản (trình độ người học khóa học TypeScript nhập môn)

Xin chào
Đây là winterlood

Xác minh Inflearn

Xác minh sự nghiệp

43,966

Học viên

3,384

Đánh giá

1,770

Trả lời

4.9

Xếp hạng

34

Các khóa học

Luôn có cách để giải thích mọi thứ một cách dễ hiểu!


  • 📚 Sách

     

  • 🏆 Giải thưởng

    • Đạt giải Best Seller tại Giải thưởng cuối năm Inflearn 2025

       

    • Đạt giải LỰA CHỌN CỦA HỌC VIÊN tại Giải thưởng Cuối năm Inflearn 2024

    • Đạt giải PICK của học viên tại Inflearn Year-end Awards 2023

     

  • 📹 Bài giảng

    • Vibe coding vừa miếng ăn

    • Dự án thực tế React.js vừa miệng – Phần mạng xã hội (SNS)

    • Next.js vừa miệng dễ học

    • TypeScript vừa miệng

    • React được chia nhỏ thành từng miếng vừa ăn

Thêm

Đồng giảng viên

Chương trình giảng dạy

Tất cả

45 bài giảng ∙ (8giờ 51phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

12 đánh giá

5.0

12 đánh giá

  • co4331님의 프로필 이미지
    co4331

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Thật tuyệt khi tôi đã có thể tìm hiểu về các thư viện mà mình vốn thắc mắc bấy lâu nay, cùng với các khái niệm frontend bổ sung khác.

    • ataraxia8084204님의 프로필 이미지
      ataraxia8084204

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Tuyệt.... Hoàn toàn có thể làm một dự án nhỏ (toy project) bằng React mà không cần phần front-end riêng biệt.

      • khw199809264383님의 프로필 이미지
        khw199809264383

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        31% đã tham gia

        Thật tuyệt vời vì bài giảng bao gồm tất cả những nội dung cốt lõi mà tôi muốn học, nhưng điều giúp ích cho tôi nhiều hơn nữa là cách giải thích nội dung rất dễ hiểu. Cảm ơn bạn vì những bài giảng hay luôn được duy trì ^^!

        • ggomsoo님의 프로필 이미지
          ggomsoo

          Đánh giá 5

          Đánh giá trung bình 5.0

          Đã chỉnh sửa

          5

          100% đã tham gia

          Tôi cảm thấy mình đã thu hoạch được rất nhiều điều thông qua khóa học này. - Với một người đang dừng lại ở tailwindcss v3 như tôi, tôi đã nắm bắt được những thay đổi trong v4. - Cách sử dụng zustand và @tanstack/react-query hiệu quả hơn, dù tôi đã có kinh nghiệm sử dụng trước đó. - shadcn/ui - thứ mà tôi rất quan tâm nhưng từng cảm thấy khá mông lung khi bắt đầu. - Cấu trúc thư mục của các tệp tin trong dự án. - Dù chỉ là nếm thử, nhưng tôi đã biết cách sử dụng supabase (đăng ký thành viên, v.v.) - điều mà tôi luôn tò mò khi chỉ biết làm front-end. Vì thời điểm quay bài giảng và thời điểm tôi học khác nhau, nên khi cài đặt hoặc áp dụng các thư viện theo hướng dẫn có một số phần khác biệt. Tôi đã vừa tự tìm hiểu vừa theo kịp tiến độ bài học. Nhờ vậy mà tôi cảm thấy thú vị hơn và đã hoàn thành khóa học đến cùng. Cảm ơn bạn vì một bài giảng tuyệt vời 😊 Dựa trên những gì đã học, tôi sẽ cố gắng áp dụng chúng vào các dự án cá nhân hoặc trau chuốt lại các dự án cũ của mình.

          • shnelson152403님의 프로필 이미지
            shnelson152403

            Đánh giá 5

            Đánh giá trung bình 5.0

            5

            100% đã tham gia

            Khóa học khác của winterlood

            Hãy khám phá các khóa học khác của giảng viên!

            Khóa học tương tự

            Khám phá các khóa học khác trong cùng lĩnh vực!