Học React 19 qua Code với API Server Spring Boot

'Ngọc trai dù có ba đấu, cũng phải xâu chuỗi mới thành báu' - Biết và làm là hai chuyện khác nhau!

Khi doanh nghiệp đào tạo nhân viên / Nội dung giảng dạy tập trung cho nhân viên mới với Inflearn!

Tôi thấy nhiều nhân viên mới biết React và cũng biết cả Boot, nhưng khi giao việc thực tế thì lại không có kết quả đầu ra. Nguyên nhân khiến những gì học được vất vả lại không thể áp dụng được có lẽ là do thiếu hiểu biết về quy trình làm việc.

Chat GPT có thể tạo ra mã code chi tiết mà bạn mong muốn, nhưng vấn đề là bạn không thể giải thích được mã code mà mình muốn là gì.

Tiến trình của dự án cần có quy trình hoặc thủ tục mà nhiều người có thể đồng ý. Và cũng cần rất nhiều luyện tập cho điều này.

• Lưu ý trước khi học

  • Khóa học này tập trung vào quy trình và quá trình thực hiện chứ không phải là ngữ pháp hay khái niệm đơn thuần, do đó sẽ không đề cập đến cú pháp cơ bản của React. Ngoài ra, bạn bắt buộc phải có kinh nghiệm với JavaScript và TypeScript.

  • Phần Java sẽ được thực hiện bằng Spring Boot 3.4.x và sẽ không đề cập đến các kiến thức cơ bản.

Các tài liệu bổ sung và câu hỏi cần thiết trong quá trình học tập đang được phân phối thông qua cafe '구멍가게 코딩단https://cafe.naver.com/gugucoding'.

2025/12/05

Phần quan trọng nhất trong Spring Boot - Phần 3 Todo API Server đã được cập nhật thành bài giảng sử dụng Spring Boot 4.0.0.

2025/11/26

Khi phát triển Spring Boot 4.0.0 bằng VSCode, có thể xảy ra vấn đề code test của JUnit5 không hoạt động bình thường (không có vấn đề gì với IntelliJ).

Nếu bạn gặp vấn đề khi sử dụng VSCode, vui lòng tham khảo https://blog.naver.com/cookie_00/224088514199.

2025/06/24

Khi phiên bản vite nâng cấp lên 7.0.0, đã xảy ra tình huống tailwindcss chưa hỗ trợ đầy đủ.

Nếu bạn đã tạo dự án thông qua npm create vite@latest

Mở tệp package.json và sửa phiên bản vite ở cuối thành 6.

"devDependencies": {
    ...
    "vite": "^6.0.0"
  }

Sau khi sửa đổi, thực hiện npm install

npm install tailwindcss @tailwindcss/vite

sẽ được thêm vào bình thường khi thực thi.

03/05/2025

Sẽ được cập nhật với khóa học video được tạo bằng Vite và TypeScript.

Khóa học được thiết kế tương tự tối đa với cấu trúc của khóa học hiện có, nhưng có thể có một chút khác biệt về tiến độ.

Mã nguồn cũng sẽ được sửa đổi hoàn toàn để phù hợp với phiên bản React 19 và được triển khai.

2025/02/24 Bổ sung

Toàn bộ mã nguồn được viết bằng vite và TypeScript đã được thêm vào cuối khóa học như tài liệu học tập.

Các phiên bản thay đổi chính

React-Router phiên bản 7

React Query phiên bản 5

Spring Boot phiên bản 3.4.2

và các mã đã được thay đổi.

Những điểm cần lưu ý khi tạo dự án với Vite là

https://drive.google.com/drive/folders/1t0NdcBPCN57boutJcjdKODk5DccJUixV?usp=drive_link

đã được thêm vào.

2024/03/28 Thêm vào

Tôi đã thêm tài liệu sử dụng AWS Beanstalk, RDS, S3 vào tệp đính kèm của bài giảng cuối cùng.

Sử dụng Spring Boot để tạo API server và sử dụng nó trong dự án React.

Trong quá trình này, chúng ta sẽ đề cập đến các ví dụ sau.

• # Ví dụ Todo - React-Router, Axios, Xử lý phân trang, Cấu hình Querydsl

• Ví dụ về Sản phẩm - Axios

• Xử lý đăng nhập - Redux Toolkit, JWT

• Xử lý đăng nhập qua mạng xã hội

• Triển khai giỏ hàng

• React Query, Recoil thực hành

  
  

Ví dụ To-Do

• Trong trường hợp dự án React, chúng ta sử dụng React-Router để xử lý việc di chuyển đến các màn hình khác nhau dựa trên thanh địa chỉ.

• Thiết lập layout chung,và các công cụ khác để xây dựng giao diện phù hợp với từng module.

• Cấu hình routing có thể được tổ chức thành các file riêng biệt để dễ dàng bảo trì.

• Học cách thiết kế và sử dụng custom hook để giảm thiểu code trùng lặp.

Ví dụ về sản phẩm

• Bạn có thể tự hoàn thiện việc xử lý modal cho quá trình tải file lên, quá trình upload và kết quả xử lý.

Xử lý Đăng nhập/Đăng nhập Mạng xã hội, Triển khai Giỏ hàng

• Triển khai xử lý đăng nhập và xác thực thông qua đăng nhập mạng xã hội.

• Sử dụng RTK (Redux Toolkit) để quản lý trạng thái đăng nhập và sử dụng cookie trong trình duyệt để lưu trữ thông tin đăng nhập.

  
  

• Chúng ta sẽ tìm hiểu cách tạo Access Token và Refresh Token sử dụng JWT và áp dụng chúng vào dự án.

• Trong chương cuối, chúng ta sẽ chuyển đổi các ví dụ được viết bằng React Query và Zustand.