Giảm 35% Khóa Học Spring MVC còn 949k | Ưu Đãi Đặc Biệt Cho Học Viên Mới.
Kết thúc trong 0h 0m 0s .
React Pro Max với Next.js - Làm Chủ Toàn Diện React.JS Hiện Đại
Gánh Team React Client/Server với Vite và Framework Next.JS (Typescript)
Ngôn ngữ: Tiếng Việt
Tags: FRONTEND
Tác giả : Hỏi Dân IT
React Pro Max với Next.js - Làm Chủ Toàn Diện React.JS Hiện Đại
Gánh Team React Client/Server với Vite và Framework Next.JS (Typescript)
Ngôn ngữ: Tiếng Việt
Tags: FRONTEND
Tác giả : Hỏi Dân IT
999.000 ₫
1.499.000 ₫-33%
Cam kết mua khóa học 1 lần, học mãi mãi, và nhận cập nhật miễn phí!
Khóa học này bao gồm:
- 42 giờ video theo yêu cầu
- 270 videos hướng dẫn
- 01 tài liệu hướng dẫn theo từng video
- Quyền truy cập đầy đủ suốt đời
- Truy cập trên thiết bị di động và TV
Những gì bạn sẽ học
- Làm Chủ React Toàn Diện Với Typescript
- Xây dựng giao diện Admin React với Antd Design/Vite
- Hiểu rõ cơ chế render React ở 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à React
- Thực hành NextJS kết hợp với MUI
- Build và Upgrade version Nextjs 14
- Sử dụng Server Actions với Next.js 14
Video Demo thành quả đạt được sau khi kết thúc khóa học:
Nội dung khóa học
24 chương • 227 bài giảng • 42 giờ tổng thời lượng
Chapter 1: Setup Environment
4 bài giảng
Cài đặt các công cụ cần thiết cho khóa học
#5. Công cụ code IDE
#6. Browser
#7. Node.JS
#8. Quản lý code với Git
Chapter 2: Ôn tập Javascript
5 bài giảng
Ôn tập các kiến thức nền tảng của javascript hay được sử dụng với React. Mục tiêu của chương, là khi nào bạn cần, sẽ giải đáp ngay lập tức thắc mắc của bạn.
#9. Cách học kiến thức Javascript hiệu quả
#10. Destructuring Assignment
#11. Spread syntax
#12. Conditional Operator (Toán tử điều kiện)
#13. Optional Chaining
Chapter 3: React Basic
16 bài giảng
Học các kiến thức cơ bản và cốt lõi nhất của React thông qua các ví dụ thực tế.
#14. Lưu ý về cách code React
#15. React là gì ? Phân loại dự án với React
#16. Setup Project React với Vite
#17. Cấu trúc dự án React Vite
#18. Think in React
#19. Component
#20. Import/Export Component
#21. React JSX
#22. Sử dụng Variables với JSX
#23. Bài tập design Component Input
#24. Props là gì
#25. Props với Typescript
#26. React Devtool
#27. Khái niệm Re-render
#28. Rendering Lists
#29. Key
Chapter 4: React Hook
9 bài giảng
Học kiến thức react “hiện đại” bằng cách sử dụng Hook
#30. Event Handler
#31. State là gì ?
#32. useState Hook
#33. Bài tập về State (part 1)
#34. Bài tập về State (part 2)
#35. Passing Function từ Cha sang Con (Parent to Child)
#36. Lift up State
#37. Vòng đời của component
#38. Về React Cơ Bản
Chapter 5: Setup Dự Án Backend
6 bài giảng
Giới thiệu về project thực hành và cách cài đặt backend (được cung cấp sẵn) cho dự án frontend React.
#39. Giới thiệu tổng quan về dự án thực hành
#40. Cài đặt Postman
#41. Cài đặt Mongodb Compass tại local
#42. Setup database MongoDB Atlas
#43. Kích hoạt dự án backend
#44. Run dự án backend
Chapter 6: Routing với React (Client Side)
9 bài giảng
Điều hướng trang client với React Router, đồng thời tạo trang quản trị admin để quản lý dữ liệu trong dự án thực hành
#45. React Router
#46. Tạo Route Users
#47. Design table User
#48. Backend và API là gì
#49. Postman để test API
#50. Gọi API với React
#51. Mô hình stateless
#52. Hiển thị list User
#53. Sử dụng key React hiệu quả
Chapter 7: Hướng dẫn sử dụng Chrome Dev Tool (Bổ Trợ)
3 bài giảng
Một chương đặc biệt hướng dẫn kỹ năng sử dụng Devtools, phục vụ đắc lực cho quá trình debug code. Chương này đặc biệt, vì rất nhiều bạn không có kỹ năng debug này.
#54. Thành phần của dev tool
#55. Kỹ thuật check api
#56. Nguyên tắc khi gọi API không có kết quả
Chapter 8: Module Users
18 bài giảng
Thực hành bài tập quản lý người dùng hệ thống qua ví dụ CRUD (create, read, update, delete)
#57. Tích hợp antd
#58. Design giao diện Admin
#59. CSS với React
#60. Tích hợp SASS (SCSS)
#61. Antd Table
#62. Hiển thị danh sách Users
#63. Antd Modal
#64. Design Modal Add New
#65. API Add New User
#66. Bài tập Add New User
#67. Bài tập Design Modal Update User
#68. Bài tập Update User
#69. Design Delete User
#70. Bài tập Delete User
#71.1 Pagination
#71.2 Antd Pagination
#71.3 Update Token
#72. Bài tập Paginate User
Chapter 9: Tối ưu hóa hiệu năng Form React
4 bài giảng
Một tiêu chuẩn “ngầm định” khi sử dụng form với React để xử lý nhiều data, đấy chính là sử dụng uncontrolled component, thay vì state.
#73. Controlled Component vs Uncontrolled Component
#74. Thư viện hỗ trợ Uncontrolled Component
#75. Create User (Uncontrolled Component)
#76. Update User (Uncontrolled Component)
Chapter 10: React Hiện Đại với Next.JS
9 bài giảng
React hiện đại, và tương lai của React, chính là Framework Next.JS
#77. Vấn đề tồn đọng với cách viết React cũ (CSR)
#78. Nextjs là gì
#79. Nextjs làm frontend hay backend ?
#80. Setup dự án với Nextjs (tích hợp MUI)
#81. Cấu trúc dự án Next.js
#82.1 React children
#82.2 React Fragment
#83. Cách đọc tài liệu của Nextjs
#84. Chuyện Next.js ngốn RAM
Chapter 11: Next Routing
6 bài giảng
Điều hướng trang với framework Next.js
#85. Tạo base giao diện
#86. Routing với nextjs
#87. Định nghĩa route
#88. Phân biệt cách code UI với React
#89. MUI là gì
#90. Cách sử dụng MUI component
Chapter 12: Module HomePage
14 bài giảng
Design trang chủ clone soundcloud
#91. Bài tập Design App Bar
#92. Navigating
#93. Share Layout
#94. Server Component
#95. Client Component
#96. Use Client
#97. Bài Tập Design Main Content
#98. Design Footer
#99. Nextjs Environment Variables
#100. Fetch music from backend
#101. Fetch data với Nextjs
#102. Fetch Data HomePage
#103. Fetch Wrapper
#104. Hoàn thiện HomePage
Chapter 13: Module Wavesurfer
19 bài giảng
Tạo wave sound tương tự như Soundcloud bằng cách tích hợp thư viện javascript với React
#105. Dynamic Route
#106. Search Params
#107. Giới thiệu về Wavesurfer
#108. Next.JS Public Folder
#109. Wavesurfer Basic
#110. React Ref
#111. Fetch track from Remote
#112. Tạo wavesurfer hook
#113. Sử dụng useMemo hook
#114. Handle Event với useCallback
#115. Add Bar Width
#116. HTML Canvas Gradients
#117. Add Gradients
#118. Add Time
#119. Add Hover
#120. Remove ID by Ref
#121. Add Customize Bar
#122. Add Comment
#123. Add Tooltip
Chapter 14: Module Auth
17 bài giảng
Xác thực người dùng với backend và tài khoản mạng xã hội (social media)sử dụng hệ thống với Next.JS và Next-auth.
#124. Tài liệu về Authentication với Next.js
#125. Giới thiệu về Next-auth
#126. Test Next Auth
#127. Debugs với Next.js và VSCode
#128. Config Next-Auth Routes
#129. Config Github Provider
#130. Luồng hoạt động của Next-auth ?
#131. Config Session Cho Client
#132. Config Session cho Server
#133. Customize Session
#134. Login with Credentials
#135. Nested Layout với Route Group
#136. Bài tập design Login Form
#137. Chữa Bài Tập Design Login
#138. Modify login page with Social Media
#139. Modify login page with Credential
#140. Hiển Thị Thông Báo Lỗi Khi Login
Chapter 15: Module Tracks
20 bài giảng
CRUD Track, đồng thời quản lý file nhạc người dùng upload lên sau khi đã đăng nhập
#141. Bài tập hiển thị danh sách tracks (admin)
#142. Chữa bài tập hiển thị danh sách tracks (admin)
#143. Delete a track (admin)
#144. Ý Tưởng Design Upload Track
#145. Input Type File
#146. Tích hợp MUI Tabs
#147. Tích hợp Drag/Drop
#148. Bài tập Design Tab Information
#149. API Upload Single File
#150. Upload file with Axios
#151. Axios with Percents
#152. Upload track complete
#153. Add Custom Message
#154. Profile Page
#155. Bài tập render List images
#156. Customize track footer
#157. Quản lý React State Global
#158. Tích hợp React Context
#159. Play/Pause Track with Context
#160. Bài Tập Update view detail
Chapter 16: Module Likes, Comments
6 bài giảng
Hiển thị comment của Tracks và chức năng like Tracks
#161. Bài tập CRUD Comments (Admin)
#162. Bài tập hiển thị comment trên track
#163. Bài tập Component Comments
#164. Bài tập add a comment
#165. Bài tập add likes
#166. Add count view
Chapter 17: Module SEO (Search Engine Optimization)
13 bài giảng
Tối ưu hóa page để tăng kết quả tìm kiếm trên google với Nextjs SEO
#167. Điều cần biết về SEO
#168. Công cụ check SEO
#169. Metadata
#170. SEO 1: Tối ưu hóa project
#171. SEO 2: Đặt tên Title/Description (Static) cho web page
#172. SEO 3: Đặt tên Title/Description (Dynamic) cho web page
#173.1 Cách hosting ảnh FREE (Bonus)
#173.2 SEO 4: Share link website trên Facebook/Twitter
#174. SEO 5: Thêm logo cho website
#175. SEO 6: Url với slug
#176. SEO 7: Robot.txt, sitemap và manifest.json
#177. SEO 8: JSON-LD
#178. SEO 9: Next.js Image
Chapter 18: Advance - Tối ưu dự án Next.JS
12 bài giảng
Gọi là advance, vì sau khi code xong muốn tối ưu hóa project
#179. Add Progress Bar
#180. Handle Error
#181. Middleware
#182. Add Loading
#183. Nextjs Build Script
#184. Build với Docker
#185. Phân tích kết quả Next.js build
#186. SSR và Static Site Generation
#187. SSG và generateStaticParams
#188. NextJS Caching
#189.1 Revalidating data (Time based revalidation)
#189.2 Revalidating data (On-demand revalidation)
Chapter 19: Module Playlists
6 bài giảng
Hoàn thiện tất cả tính năng trong dự án
#190. Bài tập Playlist Page
#191. Bài tập Likes page
#192. Bài tập Chức năng search
#193. Login with Google
#194.1 Fix bug dự án
#194.2. Upgrade Next.js Version (và các thư viện khác)
Chapter 20: What's next ?
4 bài giảng
Các định hướng phát triển sau khi đã nắm vững các kiến thức trọng tâm của Next.js
#195. Why NextJS ?
#196. Nhận xét về Level Fresher
#197. Nhận xét về khóa học này
#198. What’s next - Học gì tiếp theo ?
Chapter 21: Update Next.js 14 với Antd (NEW)
8 bài giảng
Cập nhật version 14 cho Next.js
#199. Chuyện công nghệ update
#200. Một vài lưu ý về Next.js Update
#201. Next.js 14 có gì hot ?
#202. Setup Next.js 14 Only
#203. Setup Antd
#204. Bài tập Design Login Form với Antd
#205. Khái niệm Flick giao diện
#206. Setup Antd với Render trên Server
Chapter 22: Server Actions (NEW)
6 bài giảng
Xử lý data trên form với Nextjs và tính năng Server Action
#207. Tổng quan về Server Actions
#208. Handle Form với Server
#209. Loading State và useFormStatus Hook
#210. Handling Response Data và useFormState Hook
#211. Các công cụ sử dụng với Server Actions
#212. Call Server Actions from Functions ?
Chapter 23: Thực Hành Mutate Data với Server Actions (NEW)
7 bài giảng
Thực hành để nắm vững việc sử dụng Server Actions thông qua ví dụ thực tế
#213. Design Giao Diện CRUD
#214. Bài Tập Create User Actions
#215. Bài Tập Update User Actions
#216. Bài Tập Delete User Actions
#217. Update Dự Án SoundCloud Sử Dụng Next.js 14
#218. So sánh Server Actions và Route Handler
#219. Tổng kết về Server Actions
Mô tả
(Cập nhật): bổ sung Next.js 14 và Server Actions
Next.JS là một Framework Javascript chuyên làm Frontend, tích hợp sẵn thư viện React để code giao diện UI một cách hiệu quả.
Lợi thế của Next.js so với việc sử dụng React thuần túy, chính là việc cung cấp bộ khung framework, 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...
Ngoài ra, với lợi thế "server", Next.js có thể pre-render giao diện, giúp tốc độ load website nhanh hơn, và có ưu thế trong SEO 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 Next.JS 13 từ đầu (sử dụng Typescript), thông qua dự án thực hành clone website nghe nhạc SoundCloud.
1.Tính năng chính của dự án thực hành:
+ Đăng nhập : hỗ trợ đăng nhập với Google/Github và tài khoản local 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/
+ Nghe nhạc với:
- Audio track ở footer
- Audio dưới dạng sóng/wavetrack khi xem chi tiết (clone ý tưởng soundcloud)
+ Comment theo thời gian hiển thị trên wavetrack
+ Tạo playlist/Like tracks
+ Search/Tìm kiếm track theo tên hiển thị
+ Với giao diện admin: CRUD user/tracks/comment...
2. Công nghệ sử dụng
Frontend:
- Client: Nextjs, MUI (typescript). Login with 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 version cũ (breaking change):
+ Routing (dynamic routes, route groups)
+ Data Fetching (Server component vs Client component (use client))
+ Authentication with Next-auth (sử dụng Session/JWT/Refresh Token)
+ SEO (mức basic, test với lighthouse built-in extension)
+ Rendering:
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 upgrade lên Next.js 14 và sử dụng tính năng Server Actions
+ Chế độ build:
- Build ứng dụng với Docker
- Update giao diện sau khi build (với revalidateTag)
+ Sử dụng MUI để base component
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,
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 website đả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.
ĐÁNH GIÁ KHÓA HỌC
4.9 trên 5
Không có nội dung tồn tại
Tại sao lại lựa chọn khóa học của Hỏi Dân IT ?
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ó. No one is perfect, right ?
Thành ra, bố cục khóa học của mình rất đơn giản. Luôn có video demo thành quả đạt được, cùng với giáo án để bạn hình dung về khóa học.
Mình không thích viết nhiều, vì chỉ cần video demo (hoặc hình ảnh), nó làm đơn giản hóa vấn đề so với việc miêu tả "làm màu" khóa học.
Điều bạn cần làm, để tránh tình trạng "bị lùa gà", chính là 7 nguyên tắc mà mình hay áp dụng:
- 1. Xem kỹ video demo và giáo án khóa học để có góc nhìn tổng quát về các kiến thức sẽ học.
- 2. Mình chỉ chịu trách nhiệm truyền đạt kiến thức - Tức là nội dung giáo án như nào, khóa học sẽ truyền đạt như vậy
- 3. Học xong khóa học của mình, không đồng nghĩa với việc bạn trở thành siêu nhân hay thiên tài. Bạn cần tự làm dự án của bản thân để chuyển hóa kiến thức.
- 4. Mình không cam kết học xong khóa học, kiếm được việc làm lương xxx. Tất cả các khóa học miêu tả như vậy, toàn là "lùa gà", why ? Vì người ta không là công ty tuyển dụng bạn, ok ?
- 5. Việc học khóa học của mình, giống việc bạn đang sử dụng thực phẩm chức năng, không phải là thuốc chữa bệnh. Có nghĩa là, mình cho bạn "cần câu cơm", còn câu được cơm, cá... hay gì, là do bạn quyết định
- 6. Cần tư vấn giải đáp trực tiếp, inbox Facebook mình hỗ trợ
- 7. Mình có nguyên một mục tư vấn các câu hỏi thường gặp, các bạn có thể xem tại đây
Và, có một vài sự thật mà bạn chưa biết về "Hỏi Dân IT":
- 1. Mình tốt nghiệp HUST (back khoa Hà Nội) chuyên ngành CNPM hệ kỹ sư (Software Engineer). Với 3+ năm kinh nghiệm của dân "đúng ngành", và làm lĩnh vực tài chính (or ngân hàng)
- 2. Bạn có thể học từ mình những kinh nghiệm của người làm để rút ngắn quãng đường trở thành senior (không chỉ kỹ năng code)
- 3. Mình có Youtube Hỏi Dân IT để chia sẻ kiến thức IT miễn phí (hơn 40k subscribers)
- 4. Điểm Rating instructor trên Udemy là 4.8 (max là 5), với 3000+ students. Bạn có thể kiểm tra tại Udemy Profile của mình
- 5. Nếu bạn muốn nói chuyện với mình, có thể xem mình livestream trực tiếp tối thứ 2 & thứ 5 hàng tuần trên Youtube Hỏi Dân IT :v
999.000 ₫
1.499.000 ₫-33%
Cam kết mua khóa học 1 lần, học mãi mãi, và nhận cập nhật miễn phí!
Khóa học này bao gồm:
- 42 giờ video theo yêu cầu
- 270 videos hướng dẫn
- 01 tài liệu hướng dẫn theo từng video
- Quyền truy cập đầy đủ suốt đời
- Truy cập trên thiết bị di động và TV