Khóa Học Business Analyst Foundation Cùng FPT Software Academy
Khóa Học Business Analyst Foundation Cùng FPT Software Academy Giá gốc là: 9.900.000₫.Giá hiện tại là: 99.000₫.
Back to products
Khóa Học Nền Tảng Illustrator cơ bản Cùng Hoàng Quốc Tỉnh
Khóa Học Nền Tảng Illustrator cơ bản Cùng Hoàng Quốc Tỉnh Giá gốc là: 900.000₫.Giá hiện tại là: 99.000₫.

React Pro Max với Next.js – Làm Chủ Toàn Diện React.JS Hiện Đại Cùng Hỏi Dân IT

Giá gốc là: 1.499.000₫.Giá hiện tại là: 149.000₫.

Học thử
74 Mọi người đang xem sản phẩm này ngay bây giờ!
Mã giảm giá của chúng tôi
BANMOI
HOIVIEN
AFFSAP
AFFSALE
AFFNAY
Mã giảm giá của chúng tôi
Mã giảm giá:
BANMOI
Điều kiện GIảm 20K cho đơn hàng từ 50K (Dành cho người mua lần đầu)
BANMOI
(Số tiền chi tiêu tối thiểu cho mã giảm giá "banmoi" là 50.000.)
Mã giảm giá:
HOIVIEN
Điều kiện Giảm 25% khi mua Gói Hội Viên
HOIVIEN
(Mã giảm giá "hoivien" đã hết hạn.)
Mã giảm giá:
AFFSAP
Điều kiện GIảm 50K cho đơn hàng từ 249K (3 lần sử dụng)
AFFSAP
(Mã giảm giá "affsap" đã hết hạn.)
Mã giảm giá:
AFFSALE
Điều kiện GIảm 30K cho đơn hàng từ 149K (3 lần sử dụng)
AFFSALE
(Mã giảm giá "affsale" đã hết hạn.)
Mã giảm giá:
AFFNAY
Điều kiện Giảm 15% cho đơn hàng từ 50K (3 lần sử dụng)
AFFNAY
(Mã giảm giá "affnay" đã hết hạn.)
  • Cách nhận khoá học

Nhận khoá học qua Drive ngay khi bạn thanh toán thành công.

  • Hình thức học
Học trên Google Drive bằng máy tính, Ipad, điện thoại.
  • Thời hạn khoá học

Sở hữu khóa học trọn đời.

Bạn đam mê phát triển ứng dụng web và muốn trở thành một Frontend Developer chuyên nghiệp? Bạn muốn xây dựng những ứng dụng web hiện đại, hiệu năng cao với React.js và Next.js? Khóa học React Pro Max chính là câu trả lời bạn đang tìm kiếm!

Giới thiệu Khoá Học React Pro Max với Next.js – Làm Chủ Toàn Diện React.JS Hiện Đại Cùng Hỏi Dân IT:

Khóa học React Pro Max được thiết kế để giúp bạn làm chủ toàn diện React.js và Next.js, hai trong số những công nghệ frontend phổ biến và mạnh mẽ nhất hiện nay. Với khóa học này, bạn sẽ được trang bị đầy đủ kiến thức và kỹ năng để xây dựng các ứng dụng web phức tạp, đáp ứng các tiêu chuẩn cao về hiệu năng và trải nghiệm người dùng.

Lợi ích khi tham gia:

  • Nắm vững nền tảng React.js: Hiểu sâu các khái niệm cốt lõi như components, state, props, JSX và cách ứng dụng chúng để xây dựng giao diện người dùng.
  • Làm chủ Next.js: Tìm hiểu về các tính năng đặc biệt của Next.js như Server-Side Rendering (SSR), Static Site Generation (SSG), routing, và cách tối ưu hóa hiệu năng ứng dụng.
  • Thực hành với dự án thực tế: Áp dụng kiến thức đã học vào các dự án thực tế, rèn luyện kỹ năng giải quyết vấn đề và tư duy lập trình.
  • Cập nhật kiến thức mới nhất: Luôn được cập nhật những xu hướng và công nghệ mới nhất trong lĩnh vực React.js và Next.js.
  • Mở rộng cơ hội nghề nghiệp: Tăng khả năng cạnh tranh trên thị trường việc làm và tìm kiếm những cơ hội nghề nghiệp hấp dẫn.

Ai phù hợp với khóa học:

  • Người mới bắt đầu: Những người muốn tìm hiểu về React.js và Next.js từ đầu.
  • Lập trình viên Frontend: Những người muốn nâng cao kỹ năng và kiến thức về React.js và Next.js.
  • Sinh viên: Sinh viên các ngành liên quan đến công nghệ thông tin muốn tìm hiểu về phát triển frontend.
  • Những người muốn tự học: Những người muốn tự học và khám phá thế giới React.js.

Nội dung khóa học:

Chapter 0 : Giới thiệu

#0. Demo Kết quả đạt được
#1. Hướng Dẫn Download Tài liệu khóa học
#2. Yêu cầu của khóa học
#3. Về khóa học này
#4.1 Hướng Dẫn Sử Dụng Khóa Học Hiệu Quả
#4.2 Về tác giả

Chapter 1: Setup Environment

#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

#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
#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

#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

#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 )

#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 Chorme Dev Tool ( Bổ trợ )

#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

#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

#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

#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

#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

#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

#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

#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

#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 Like,Comments
#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)
#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
#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
#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 ?
Chapter 21: Update Next.js 14 với Antd (NEW)
#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)
#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)
#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

 

Kết:

Khóa học React Pro Max là một hành trình tuyệt vời để bạn trở thành một Frontend Developer chuyên nghiệp. Với kiến thức và kỹ năng được trang bị từ khóa học, bạn sẽ tự tin xây dựng những ứng dụng web hiện đại, chất lượng cao và đáp ứng được nhu cầu của thị trường.