Làm Chủ Toàn Diện ReactJS Hiện Đại

Giới thiệu khóa học

Cập nhật bổ sung NextJS 14 và Server Actions.

NextJS là một Framework Javascript chuyên làm Frontend, tích hợp sẵn thư viện React để lập trình giao diện UI một cách hiệu quả.

Lợi thế của NextJS so với việc sử dụng React thuần túy, chính là việc cung cấp bộ dàn khung, giải quyết các vấn đề thường gặp của React mà bấy lâu nay chúng ta cần tự xử lý, ví dụng như Routing, Nested Route, v.v.

Ngoài ra, với lợi thế “máy chủ”, NextJS có thể kết xuất trước giao diện, giúp tốc độ tải trang nhanh hơn và có ưu thế trong vvieejc tối ưu hóa công cụ tìm kiếm so với việc dùng Client Side Rendering của React thông thường.

Trong khóa học này, bạn sẽ được học những kiến thức mới nhất của NextJS 13 từ đầu (sử dụng Typescript), thông qua dự án thực hành cắt trang nghe nhạc SoundCloud.

Tính năng chính của dự án thực hành

1. Hỗ trợ đăng nhập với Google/Github và tài khoản nội bộ của Backend.
   Có khả năng hỗ trợ đăng nhập với các nền tảng được liệt kê tại đây: https://next-auth.js.org/providers/
2. Nghe nhạc với:
   • Audio Track ở Footer.
   • Audio dưới dạng sóng/Wavetrack khi xem chi tiết (sao chép ý tưởng SoundCloud).
3. Bình luận theo thời gian hiển thị trên Wavetrack
4. Tạo danh sách nhạc/Like tracks.
5. Tìm kiếm nhạc theo tên hiển thị.
6. Với giao diện quản trị: CRUD User/Tracks/Comment, v.v.

Công nghệ sử dụng

Frontend:

• Client: Nextjs, MUI (TypeScript). Đăng nhập với Next-auth (hỗ trợ đăng nhập Google/Github và Credential Provider (Backend).
• Admin: Vite, Antd (TypeScript).

Backend: NestJS (được cung cấp sẵn).

Về kiến thức React (TypeScript với Vite), ngoài kiến thức cơ bản, bổ sung thêm:

• React Children, React Fragment, React Context, Suspense/Lazy Loading.
• Các Hook: useRef, useCallback, useMemo.

Về kiến thức NextJS:

• NextJS 13 với App Router (TypeScript).
• Nắm vững các kiến thức thay đổi của NextJS 13 so với các bản cũ:
  • Routing (Dynamic Routes, Route Groups)
  • Data Fetching [Server Component và Client Component (Use Client)]
  • Xác thực bằng tính năng Next-auth (sử dụng Session/JWT/Refresh Token).
  • SEO (mức cơ bản, thử nghiệm với tiện ích mở rộng tích hợp sẵn của Lighthouse.
• Kết xuất:
  • Client Side Rendering (CSR), Server Side Rendering (SSR).
  • Static Site Generation (SSG), Incremental Static Regeneration (ISR).

Cuối khóa học có hướng dẫn nâng cấp lên NextJS 14 và sử dụng tính năng Server Actions.

• Chế độ đóng gói:
  • Đóng gói ứng dụng với Docker.
  • Cập nhật giao diện sau khi đóng gói (với revalidateTag).
  • Sử dụng MUI để xây dựng thành phần nền tảng.

Khóa học này sẽ phù hợp với các bạn đang có nhu cầu tìm hiểu về React hoặc muốn biết React được sử dụng trong thực tế như thế nào, cũng như muốn tạo ra một giao diện đảm bảo hiệu năng kết hợp với SEO để tăng kết quả tìm kiếm từ Google.

Xem trước khóa học

Xây dựng Client/Server React với Vite và NextJS (TypeScript).

Bạn sẽ học

• Làm chủ ReactJS toàn diện với TypeScript.
• Xây dựng giao diện quản trị ReactJS với Antd Design/Vite.
• Hiểu rõ cơ chế kết xuất ReactJS ở Client và Server.
• Rèn luyện tư duy phân tích, tích hợp thư viện JavaScript với React.
• Nắm vững kiến thức cốt lõi của NextJS và ReactJS.
• Thực hành NextJS kết hợp với MUI.
• Đóng gói và nâng cấp lên NextJS 14.

Lý do nên học

Không “lùa gà”, không “làm màu”

Người khác hay so sánh và “làm màu” khóa học của bản thân, cho rằng người ta là nhất, đồng thời hạ thấp các khóa học đang có trên thị trường. Điều này sẽ dẫn tới tình trạng “ảo tưởng sức mạnh về khóa học” và bản thân bạn chính là những “con gà bị lùa.”

Mình không thích điều trên, vì mình biết, chẳng ai là hoàn hảo cả. Mỗi khóa học đều có điểm hay và dở của nó. Không ai hoàn hảo cả, phải không?

Khóa học đơn giản và thực tế

Bố cục khóa học của mình rất rõ ràng và không phô trương. Mỗi khóa học đều có video mẫu về thành quả cuối cùng, đi kèm với giáo án để bạn hình dung trước nội dung sẽ học.

Mình không thích viết những lời quảng bá sáo rỗng. Mình tin rằng chỉ cần video mẫu hoặc hình ảnh thực tế là đủ để bạn đánh giá. Nó dễ hiểu và trực quan hơn nhiều so với việc cố gắng dùng lời “mỹ miều” để thuyết phục.

Làm sao để không “bị lùa”?

Dưới đây là 7 nguyên tắc mình luôn chia sẻ với học viên, để bạn không rơi vào bẫy “lùa gà”:

1. Xem kỹ video mẫu và giáo án trước khi học.
   Điều này giúp bạn có góc nhìn tổng quát và thực tế về kiến thức sẽ nhận được.
2. Mình chỉ truyền đạt đúng theo giáo án.
   Không có chiêu trò. Không có lừa dối.
3. Học xong không biến bạn thành siêu nhân.
   Kiến thức cần được luyện tập, áp dụng qua dự án thực tế.
4. Mình không cam kết mức lương sau khóa học.
   Bởi mình không phải nhà tuyển dụng.
5. Khóa học chỉ như thực phẩm chức năng.
   Nó giúp bạn, nhưng không thể thay bạn hành động.
6. Mình cho bạn “cần câu cơm”.
   Nhưng việc câu cá hay không là do bạn.
7. Hãy tỉnh táo khi lựa chọn khóa học.
   Tránh bị hấp dẫn bởi những lời cam kết hào nhoáng không có thật.

Bạn vẫn chưa biết giảng viên là ai? Hãy xem giới thiệu tóm tắt về giảng viên bên dưới.

Vài điều bạn nên biết về mình

Mình tốt nghiệp HUST (bách khoa Hà Nội) chuyên ngành CNPM hệ kỹ sư (Software Engineer). Với trên 5 năm kinh nghiệm của dân “đúng ngành”, tập trung vào 3 lĩnh vực chính là chứng khoán (Stock Market), ngân hàng (Banking) và tài chính tín dụng (Finance).