Học React 19 qua mã nguồn cùng API Server Spring Boot

Hoàn thành dự án liên kết giữa API Server được xây dựng bằng Spring Boot (phiên bản 3.4.x) và React 19 (với TypeScript)! Ứng dụng Front-end vào Portfolio Back-end! Bài giảng được biên soạn dành cho những người đã đi làm (không phải là bài giảng dành cho người mới bắt đầu).

(4.7) 120 đánh giá

1,480 học viên

Độ khó Trung cấp trở lên

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

React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
JPA
JPA
JWT
JWT
React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
JPA
JPA
JWT
JWT

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

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

4.7

5.0

minho.ha

31% đã tham gia

Sẽ rất hữu ích khi giải thích dự án thực tế trong khi viết mã theo thứ tự. Chỉ là kỹ năng của tôi không thể theo kịp nó. Hahahahaha

5.0

원데이

30% đã tham gia

Tôi nghĩ loại bài giảng này thực sự hữu ích trong thực tế. Tôi cũng thích những lời khuyên và thông tin đến từ trải nghiệm của người hướng dẫn. Độ sâu của từng kỹ thuật trong bài giảng có vẻ hơi nông do tính chất của bài giảng nhưng lại rất dễ hiểu khi tra cứu hoặc tham khảo sách. Tuy nhiên, nó có thể hơi khó khăn đối với các nhà phát triển ở độ tuổi đó.

5.0

b0i4s

18% đã tham gia

Ngày nay, trong thời đại không thể chỉ làm một mặt trước và một mặt sau, tôi luôn mơ hồ nghĩ đến việc chỉ làm riêng mặt trước, kiếm tiền triệu riêng và tạo ra một dự án tích hợp thông thường. Tôi không phải là người. chỉ biết một mặt, nhưng tôi có một mặt chính và một mặt tổng hợp của cả hai mặt. Tôi nghĩ đây là một bài giảng thực sự hay cho những ai tò mò. Tôi chưa mua sách nhưng có vẻ như các bài giảng là đủ. Tuy nhiên, tôi nghĩ rằng nếu bạn đọc nó cùng với một cuốn sách, bạn có thể giảm bớt thời gian tìm kiếm lại. Đối với thông tin của bạn, cả React và Spring đều yêu cầu một số kiến ​​thức sơ bộ, nhưng tôi nghĩ đây sẽ là một bài giảng hay cho những ai thậm chí hơi quan tâm đến full stack, vì đây là những thứ có thể học được chỉ trong một tuần. Cảm ơn bạn vì bài giảng tuyệt vời.

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

  • Quy trình phát triển React (React)

  • Phát triển máy chủ API

  • Xử lý xác thực JWT

  • Redux Toolkit

  • React Query

  • Zustand

'Có công mài sắt có ngày nên kim' - Biết và làm là hai việc khác nhau!


Khi đào tạo nhân viên tại doanh nghiệp / Nội dung bài giảng đào tạo tập trung cho nhân viên mới nay đã có trên Inflearn!


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


Bạn có thể sử dụng ChatGPT để tạo ra các đoạn mã chi tiết theo ý muốn, nhưng vấn đề là bạn không thể giải thích được đoạn mã mình thực sự muốn là gì.


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


  • Lưu ý trước khi khóa học bắt đầu

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

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


Các tài liệu bổ sung hoặc 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 quán cà phê 'Gumeonggage Codingdan https://cafe.naver.com/gugucoding'.


2026/01/02

Có một số thay đổi về giao diện trong phần thiết lập đăng nhập Kakao.


https://docs.google.com/presentation/d/1ndFy0UfqcIHMbSF2Kyjtw3o8Gimx7I9GVeEaE-7lfs8/edit?usp=sharing


Vui lòng tham khảo tài liệu.


2025/12/05

Phần quan trọng nhất trong Spring Boot là Phần 3 - Tạo Todo API Server đã được sửa đổi bằng bài giảng cập nhật lên 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 đề mã kiểm thử của Junit5 không hoạt động bình thường (vấn đề này không xảy ra trên 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 tăng lên 7.0.0, đã xảy ra tình trạng tailwindcss vẫn chưa được hỗ trợ bình thường.

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, hãy thực hiện lệnh npm install và

npm install tailwindcss @tailwindcss/vite

Nếu bạn chạy lệnh đó, nó sẽ được thêm vào một cách bình thường.





2025/05/03

Khóa học video được cập nhật sẽ được sản xuất bằng Vite và TypeScript.

Mặc dù nội dung được xây dựng gần giống nhất có thể với cấu trúc bài giảng cũ, nhưng có thể sẽ 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 phân phối.






Bổ sung ngày 24/02/2025

Toàn bộ mã nguồn bằng Vite và TypeScript đã được thêm vào cuối bài giảng dưới dạng 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

Phiên bản Spring Boot 3.4.2

là những nội dung đã được thay đổi trong mã nguồn.


Những nội dung cần lưu ý khi tạo dự án bằng Vite là

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

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



Bổ sung ngày 28/03/2024

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




Sử dụng Spring Boot để xây dựng API server và ứng dụng nó vào dự án React.

Trong quá trình này, chúng ta sẽ cùng thực hiện các ví dụ sau đây.

  • Ví dụ To-do - React-Router, Axios, xử lý phân trang, thiết lập Querydsl

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

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

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

  • Thực hiện giỏ hàng

  • Thực hành React Query, Recoil


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 sang các màn hình khác nhau tùy theo thanh địa chỉ.

  • Có thể thiết lập bố cục chung và sử dụng <Outlet> để cấu hình màn hình phù hợp cho từng mô-đun.

  • Thiết lập định tuyến có thể được cấu hình thành một tệp riêng biệt để dễ dàng bảo trì.

  • Học cách thiết kế và sử dụng các hook tùy chỉnh (custom hooks) để giảm thiểu mã nguồn trùng lặp.

Ví dụ sản phẩm

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

Xử lý đăng nhập/đăng nhập mạng xã hội, triển khai giỏ hàng



  • Chúng ta sẽ thực hiện xử lý xác thực thông qua xử lý đăng nhập và đă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 trên trình duyệt để ghi nhớ thông tin đăng nhập.


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

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



✅ Mã nguồn được sử dụng trong bài giảng được đính kèm ở bài học cuối cùng của mỗi phần.

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

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

  • Những người muốn tạo máy chủ API

  • Những người đang băn khoăn về cách áp dụng cú pháp React như thế nào

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

  • JavaScript (자바스크립트)

  • Spring

  • Lập trình web

Xin chào
Đây là zk202308a5410

2,259

Học viên

168

Đánh giá

291

Trả lời

4.8

Xếp hạng

5

Các khóa học

Goo-mung-ga-ge Coding Team là một cộng đồng được thành lập từ năm 2015 dành cho những người làm việc trong các lĩnh vực liên quan đến phát triển phần mềm.

Khóa học hiện đang được dẫn dắt bởi Cookie Manager, người đang điều hành Gumung-gage Coding.

Tôi bắt đầu công việc phát triển từ năm 2000 và đã có kinh nghiệm làm việc tại các doanh nghiệp mạo hiểm, doanh nghiệp vừa và nhỏ, tập đoàn lớn cũng như làm freelancer.

Từ những năm 2010, tôi chủ yếu thực hiện các công việc giảng dạy và tư vấn cho các doanh nghiệp.

Naver Cafe

Các tác phẩm chính

Dự án Spring Web học qua mã nguồn

Học Spring Boot qua mã nguồn

Học React qua mã nguồn

Triển khai máy chủ RESTful API

Dự án Spring 6 Legacy

Sổ tay phát triển Web Java

React Native in Action (Bản dịch)

Phát triển/Giảng dạy

Làm việc tại đội ngũ phát triển Samsung SDS

Làm việc tại Công ty Cổ phần SK Customer Happiness

Giảng dạy tại các doanh nghiệp như KT / SK / POSDATA / Kyobo Life / Shinsegae / Asiana / Công đoàn Quản lý Bảo hiểm Y tế, v.v.

Thêm

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

Tất cả

98 bài giảng ∙ (21giờ 54phú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ả

120 đánh giá

4.7

120 đánh giá

  • windguy19995381님의 프로필 이미지
    windguy19995381

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    Tôi nghĩ loại bài giảng này thực sự hữu ích trong thực tế. Tôi cũng thích những lời khuyên và thông tin đến từ trải nghiệm của người hướng dẫn. Độ sâu của từng kỹ thuật trong bài giảng có vẻ hơi nông do tính chất của bài giảng nhưng lại rất dễ hiểu khi tra cứu hoặc tham khảo sách. Tuy nhiên, nó có thể hơi khó khăn đối với các nhà phát triển ở độ tuổi đó.

    • zk202308a5410
      Giảng viên

      Cảm ơn bạn đã hiểu mục đích sản xuất của chúng tôi. Như bạn đã nói, có một số hạn chế trong việc giải thích những phần cơ bản. Tuy nhiên, khi nghĩ đến việc thực hiện một dự án trong thực tế, tôi đã giảm đáng kể số lượng này. Nếu bạn đăng bất kỳ câu hỏi nào qua quán cà phê hoặc Infron trong các nghiên cứu còn lại, tôi sẽ giúp đỡ bạn nhiều nhất có thể.

  • feelsagood님의 프로필 이미지
    feelsagood

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    • insoobaek님의 프로필 이미지
      insoobaek

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      18% đã tham gia

      Ngày nay, trong thời đại không thể chỉ làm một mặt trước và một mặt sau, tôi luôn mơ hồ nghĩ đến việc chỉ làm riêng mặt trước, kiếm tiền triệu riêng và tạo ra một dự án tích hợp thông thường. Tôi không phải là người. chỉ biết một mặt, nhưng tôi có một mặt chính và một mặt tổng hợp của cả hai mặt. Tôi nghĩ đây là một bài giảng thực sự hay cho những ai tò mò. Tôi chưa mua sách nhưng có vẻ như các bài giảng là đủ. Tuy nhiên, tôi nghĩ rằng nếu bạn đọc nó cùng với một cuốn sách, bạn có thể giảm bớt thời gian tìm kiếm lại. Đối với thông tin của bạn, cả React và Spring đều yêu cầu một số kiến ​​thức sơ bộ, nhưng tôi nghĩ đây sẽ là một bài giảng hay cho những ai thậm chí hơi quan tâm đến full stack, vì đây là những thứ có thể học được chỉ trong một tuần. Cảm ơn bạn vì bài giảng tuyệt vời.

      • zk202308a5410
        Giảng viên

        Cảm ơn bạn đã hoàn toàn hiểu ý định sản xuất của chúng tôi. Tôi hy vọng những bài giảng còn lại sẽ hữu ích. Cảm ơn

    • withoutthem님의 프로필 이미지
      withoutthem

      Đánh giá 17

      Đánh giá trung bình 4.9

      4

      16% đã tham gia

      Thật dễ dàng để lắng nghe nếu bạn có một số kiến ​​thức. Tuy nhiên, đây là phương pháp kiểm tra trực quan bằng cách lấy nhật ký từ mã kiểm tra đơn vị, Có rất nhiều mã (?) phản ánh phong cách cá nhân, chẳng hạn như gọi repo.save trong phương thức sửa đổi. Người mới bắt đầu có thể gặp khó khăn khi pha trộn nó theo phong cách riêng của họ. Có những người dệt nó theo cách này Nếu bạn có đủ kiến ​​​​thức để sàng lọc và tiếp thu những thứ như, “Ồ, điều đó có vẻ ổn.” Một bài giảng khá hay đáng để xem xét

      • zk202308a5410
        Giảng viên

        Nếu nó được tạo bình thường thì không cần phải save() khi sửa đổi (kiểm tra bẩn). Để được kiểm tra bẩn, đối tượng thực thể phải được đảm bảo liên tục. Tuy nhiên, đôi khi khi làm việc với các nhà phát triển khác, bạn có thể thấy đoạn mã như sau. @Transactional // thực thể người dùng độc lập với bối cảnh bền vững được liên kết với ranh giới giao dịch đó public void saveRefreshToken(Người dùng người dùng, Chuỗi newRefreshToken) { ... user.setRefreshToken(newRefreshToken); ... } Trong trường hợp này, đối tượng Người dùng không bị kiểm tra bẩn. Tôi nghĩ rằng việc sử dụng save() để chuẩn bị cho những tình huống này không phải là một kiểu phản đối. ----------------- Trò chuyệnGPT Trong Spring Data JPA, có hai cách tiếp cận chính để thay đổi trạng thái của một thực thể: phát hiện các thay đổi (kiểm tra bẩn) và sử dụng phương thức save(). Mỗi phương pháp có thể được sử dụng phù hợp tùy theo tình huống cụ thể. Tôi sẽ giải thích những ưu, nhược điểm cũng như trường hợp sử dụng của từng phương pháp bên dưới. ----------------------. Phần kết luận Việc sử dụng phương pháp nào tùy thuộc vào tình huống. Phát hiện thay đổi phù hợp với các giao dịch nhỏ, đơn giản, trong khi lưu rõ ràng (save()) phù hợp với các giao dịch lớn với logic kinh doanh rõ ràng và phức tạp. Nói chung, trong thực tế, hai phương pháp này được sử dụng thay thế cho nhau. Sử dụng tính năng phát hiện thay đổi cho các thao tác CRUD đơn giản và sử dụng phương thức save() để quản lý mọi thứ một cách rõ ràng khi cần có logic nghiệp vụ phức tạp.

      • Ồ, cũng có trường hợp như vậy. Tôi đang học lại. Cảm ơn bạn.

    • greatha님의 프로필 이미지
      greatha

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      Sẽ rất hữu ích khi giải thích dự án thực tế trong khi viết mã theo thứ tự. Chỉ là kỹ năng của tôi không thể theo kịp nó. Hahahahaha

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

      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!

      1.608.720 ₫