Khóa học ReactJS Super – Dự án Shopee Clone Typescript

About Course

Views

Giới thiệu khóa học: “ReactJS Super – Dự án Shopee Clone Typescript”
Bạn đang tìm kiếm một khóa học
ReactJS
thực chiến, bài bản, có thể giúp bạn tự tin chinh phục các vị trí từ Junior đến Senior Developer? Khóa học
ReactJS Super – Dự án Shopee Clone Typescript
chính là lựa chọn xứng đáng!
Khóa học được xây dựng dựa trên một
dự án thực tế Shopee Clone
, không chỉ dừng lại ở việc học lý thuyết, mà bạn sẽ được thực hành toàn bộ quy trình phát triển một ứng dụng web hiện đại với:
ReactJS
chuyên sâu – Từ cơ bản đến nâng cao.
Typescript
– Giúp mã nguồn rõ ràng, mạnh mẽ và dễ bảo trì.
Testing
– Đảm bảo chất lượng sản phẩm với unit test và integration test.
SEO & Performance
– Tối ưu hóa hiển thị và tốc độ trang web.
Các kỹ năng quan trọng để
phỏng vấn thành công vị trí Developer
tại các công ty công nghệ.

Giảng viên đã thiết kế khóa học với mục tiêu tạo ra
một trong những khóa học ReactJS tốt nhất tại Việt Nam
, cung cấp cho bạn không chỉ kiến thức mà cả
tư duy làm dự án chuẩn chuyên nghiệp
.

Bạn sẽ được học:
Build các component có thể tái sử dụng ở nhiều nơi
Hiểu được cách hoạt động của JWT Authentication
Thực hiện chức năng đăng nhập, đăng ký, refresh token tự động – điều mà bạn ít khi được làm khi mới tham gia dự án
Viết code sạch, chuẩn, dễ bảo trì như một dev pro
Hiểu sâu về Redux và bạn sẽ không bao giờ sợ Redux nữa
Đọc document các thư viện bên thứ 3 và debug khi gặp vấn đề về thư viện
Code một dự án lớn với ReactJs, Typescript, Material UI, Rest API,…
Test một ứng dụng ReactJs.
v.v…

Time Course:
28 phần (248 Bài giảng)

Instructor
: Dư Thanh Được
Total Weight:
53.92 GB
Để bổ sung kiến thức và thực hành, bạn có thể tham khảo thêm các khóa học sau trên blog:

NextJS 14-ReactJS-Typescript thực chiến 2024 PRO
– Khóa học thực chiến với Next.js 14, ReactJS và TypeScript, giúp bạn xây dựng dự án chất lượng như thực tế.
React – The Complete Guide 2024 (incl. Next.js, Redux)
–
Đi vào và học React.js từ đầu! Tìm hiểu React, Hook, Redux, React Router, Next.js, thực tiễn tốt nhất và cách nhiều hơn!.

** Note
:

Chú ý:

Course Content

Chương 22 Clone Shopee trang thông tin user

204. Xử lý lỗi khi token hết hạn.mp4

16:44
206. Code UI UserSideNav.mp4

14:22
207. Code UI trang Profile.mp4

23:47
208. Khai báo và test API cho phần profile.mp4

15:25
210. Hiển thị data profile lên form P2.mp4

27:43
211. Fix lỗi component DateSelect và thực hiện cập nhật profile.mp4

23:30
213. Validate khi upload ảnh.mp4

11:33
214. Active NavLink cho UserSideNav và tách component InputFile.mp4

10:42
215. Cách dùng useFormContext trong React Hook Form.mp4

08:40
216. Code logic đổi mật khẩu.mp4

32:31
217. Code chức năng đơn mua.mp4

29:24

Chương 9 Cài đặt môi trường cho dự án React

Chương 8 Tổng quan về React

Chương 7 Kiến thức Authentication

Chương 6 Git căn bản đến nâng cao

43. Mẹo push code mà không cần thêm origin.mp4

06:03
57. Git stash.mp4

03:42
56. Git flow khi làm việc trong một team.mp4

07:57
55. Thêm thay đổi vào commit cuối cùng với amend.mp4

03:07
54. Sửa message một commit đã push.mp4

04:20
53. Gộp commit với squash.mp4

11:19
52. Hoàn tác commit bằng git revert.mp4

14:19
51. Hoàn tác commit bằng git reset.mp4

10:13
50. Hoàn tác những file ở khu vực commited về trạng thái ban đầu.mp4

02:15
49. Hoàn tác những file ở khu vực Staged Changes trạng thái ban đầu.mp4

01:44
48. Hoàn tác những file ở local changes về trạng thái ban đầu.mp4

02:07
47. Ưu nhược của git rebase.mp4

05:19
46. Git rebase.mp4

18:05
45. Hoàn tác lệnh merge.mp4

07:43
44. Git merge và tạo pull request trên github.mp4

29:24
28. Git là gì Cài đặt Git trên máy tính.mp4

10:34
42. Thao tác với branch.mp4

18:33
41. README.md là gì Viết như thế nào.mp4

12:19
40. Bỏ qua file với .gitignore.mp4

07:41
39. Thao tác với Git UI cơ bản trên VS Code.mp4

09:10
38. Git pull và giải quyết conflict code.mp4

07:43
37. Git log.mp4

03:30
36. Git push.mp4

02:35
35. Kết nối một local repo với remote repo.mp4

04:22
34. Clone Repository bằng HTTPS và SSH.mp4

03:30
33. Trick dùng nhiều tài khoản Github trên cùng một máy tính.mp4

02:52
32. Sử dụng SSH-Agent.mp4

09:49
31. Tạo SSH key và Add SSH key vào Github.mp4

11:06
30. Git status, Git add _ Git commit.mp4

09:00
29. Git init và git config.mp4

09:50

Chương 5 NodeJs và Webpack cơ bản đến nâng cao

16. NodeJs là gì, cài đặt và quản lý Nodejs thông qua NVM.mp4

28:01
17. Webpack và Webpack CLI.mp4

14:32
18. Xử lý Loader và CSS trong Webpack.mp4

08:33
19. HTML webpack plugin.mp4

06:29
20. Mini CSS extract plugin.mp4

03:38
21. Giải quyết caching với Hash name file.mp4

03:47
22. Tạo một server bằng webpack để dev.mp4

07:32
23. Dọn dẹp thư mục build tự động.mp4

01:54
24. Sourcemap cho webpack.mp4

07:09
25. Dùng Babel để biên dịch code Javascript thành các version cũ.mp4

28:57
26. Sử dụng các assets trong webpack.mp4

18:19
27. Phân tích file build với Webpack Bundle Analyzer.mp4

06:36

Chương 4 Kiến thức về developer tool, Postman và API

Chương 3 Typescript

Chương 2_ Ôn tập kiến thức Javascript cần thiết

2. Destructuring, Rest parameter và Spread Syntax.mp4

11:58
3. Tham trị và tham chiếu.mp4

12:49
4. Toán tử logic và Template string.mp4

15:44
5. ES6 Class và con trỏ this.mp4

07:26
6. Arrow Function, Higher Order Function, Currying, Callback.mp4

07:48
7. Bất độ bộ với Promise và Async Await.mp4

10:27
8. ES6 module.mp4

03:53
9. Thao tác với DOM trong Javascript.mp4

04:10
10. Web storage và Cookie.mp4

07:40

Chương 28

Chương 26 Storybook cho React

Chương 25 Viết Unit Test cho project Clone Shopee

226. Unit Test là gì.mp4.mp4

07:23
227. Cài vitest và test function.mp4.mp4

16:43
228. Chuyển sang môi trường jsdom để test các api browser.mp4.mp4

23:54
229. Test Axios và test refresh token.mp4.mp4

30:13
230. Thống kê coverage unit test.mp4.mp4

15:22
231. Test App render và React Router.mp4.mp4

32:37
232. Test trang not found và mẹo debug unit test.mp4.mp4

20:49
233. Mẹo hay khi test React Router.mp4.mp4

12:04
234. Test lỗi required React Hook Form ở trang Login.mp4.mp4

11:00
235. Test lỗi nhập data không đúng định dạng trên form.mp4.mp4

15:45

Chương 24 SEO cho React

Chương 23 Clone Shopee nâng cao _ Performance

Chương 10 React Main Concept

82. Render có điều kiện.mp4

07:48
91. Thinking in React – Cách suy nghĩ trong React.mp4

53:22
90. Fragments.mp4

03:28
89. Composition vs Inheritance.mp4

12:07
88. Dùng React Developer Tool để debug.mp4

04:11
87. Lifting State Up – Đưa state lên trên.mp4

01:47:50
86. Uncontrolled Components.mp4

19:27
85. Form trong React.mp4

29:05
84. List và key trong React Tại sao không nên dùng key là index.mp4

21:29
83. Sử dụng state đúng cách.mp4

15:15
72. Giới thiệu về JSX.mp4

11:52
81. Xử lý event.mp4

19:08
80. Cách dùng Props và PropTypes.mp4

26:57
79. componentWillUnmount.mp4

12:46
78. componentDidUpdate.mp4

12:32
77. componentdidMount.mp4

07:46
76. Constructor trong class component.mp4

23:18
75. State và lifecycle trong class component.mp4

17:59
74. Component và props.mp4

20:50
73. Render element.mp4

09:02

Chương 21 Clone Shopee trang giỏ hàng

Chương 20 Clone Shopee trang chi tiết sản phẩm

185. Code UI ProductDetail và phòng chống tấn công XSS.mp4

48:30
186. Code Slider cho ảnh sản phẩm.mp4

20:10
187. Code logic di chuột thì zoom ảnh.mp4

26:05
188. Xử lý URL thân thiện SEO.mp4

10:57
189. Fix lỗi Tailwind CSS IntelliSense không gợi ý class.mp4

03:45
190. Code chức năng tìm kiếm sản phẩm.mp4

21:09
191. Code chức năng hiển thị các sản phẩm tương tự.mp4

13:20
192. Tách component QuantityController.mp4

21:48
193. Phân tích và khai báo API purchases.mp4

11:26
194. Thực hiện chức năng thêm sản phẩm vào giỏ hàng.mp4

40:25

Chương 1_ Mở đầu

Chương 19 Clone Shopee trang danh sách sản phẩm

173. Code UI AsideFilter.mp4

35:58
174. Code UI cho SortProductList component.mp4

11:57
175. Code UI Product Component.mp4

22:45
176. Khai báo interface và api cho product.mp4

25:36
177. Hiển thị product và format number với Intl.mp4

11:54
178. Xử lý product rating.mp4

07:11
179. Phân tích thuật toán và code chức năng phân trang.mp4

31:47
180. Code Phân trang product list và đồng bộ hóa url.mp4

27:04
181. Code logic cho SortProductList component.mp4

35:19
182. Code logic filter theo category cho AsideFilter.mp4

20:55
183. Code logic filter theo khoảng giá.mp4

01:00:18
184. Xử lý logic RatingStars và xóa filter.mp4

38:47

Chương 18 Clone Shopee trang đăng ký _ đăng nhập

160. Cấu hình Axios và React Query.mp4

08:10
172. Cải thiện path và xử lý profile user sau khi loginregister.mp4

19:50
171. Ngăn chặn người dùng spam submit button.mp4

10:42
170. Hoàn thiện authenticate module, Trick hay giúp tăng tốc độ truy xuất bộ nhớ.mp4

55:26
169. Setup Protected Route và Rejected Route trong React Router.mp4

10:33
168. Code Ui cho Popover cart.mp4

12:38
167. Tạo component Popover.mp4

16:27
166. Dùng Framer Motion và Floating UI để tạo popover.mp4

24:16
165. Code UI header thuộc MainLayout.mp4

28:59
164. Xử lý logic trang login.mp4

09:43
163. Xử lý lỗi message đơn thuần với axios interceptor.mp4

09:23
162. Xử lý lỗi 422 từ server trả về.mp4

21:48
161. Khai báo interface và thực hiện gọi API Register.mp4

20:08
148. Giới thiệu chức năng và công nghệ sử dụng trong dự án Shopee Clone Typescript.mp4

14:02
159. Schema Validation với Yup.mp4

17:45
158. Tạo component Input để rút gọn code.mp4

13:15
157. Custom class .container bằng cách tạo plugin Tailwindcss.mp4

08:27
156. Validate Confirm Password cho Register Form.mp4

17:45
155. Validate Register Form với React Hook Form.mp4

35:57
154. Code UI trang Login Register.mp4

17:02
153. Code UI cho Register Layout.mp4

14:31
152. Cấu hình React Router.mp4

12:36
151. Enable sourcemap cho css và sửa lỗi đường dẫn import.mp4

13:01
150. Cài đặt ESLint, Prettier, Tailwindcss cho dự án.mp4

23:07
149. Cài đặt dự án ReactJs Typescript với Vite.mp4

12:18

Chương 17_ React Query

Chương 16 React Router v6

Chương 15 Redux và Redux Toolkit

Chương 14 React Hook nâng cao [React 18]

123. useId.mp4

06:16
131. Bắt lỗi ứng dụng React với Error Boundary.mp4

15:48
130. React Strict Mode là gì Tại sao lại bị 2 lần re-render.mp4

15:06
129. Kỹ thuật Render Props.mp4

23:46
128. Tạo Modal với React Portal.mp4

15:33
127. startTransition và useTransition.mp4

10:12
126. useDeferredValue.mp4

06:57
125. useDebugValue.mp4

06:31
124. useImperativeHandle.mp4

09:26
114. Higher Order Component.mp4

37:39
122. useContext (Typescript Version).mp4

13:51
121. useReducer.mp4

42:02
120. useLayoutEffect và tiến trình paint trên trình duyệt.mp4

28:35
119. ref, useRef, forwardRef.mp4

50:36
118. useCallback.mp4

05:21
117. useMemo.mp4

04:18
116. React.memo.mp4

12:19
115. Mẹo không cần khai báo interface với Typescript.mp4

03:51

Chương 13 Project Todo List với Typescript

Chương 12 React Hook cơ bản

Chương 11 CSS trong React

Student Ratings & Reviews

No Review Yet

About Course

Course Content

Chương 22 Clone Shopee trang thông tin user

204. Xử lý lỗi khi token hết hạn.mp4

206. Code UI UserSideNav.mp4

207. Code UI trang Profile.mp4

208. Khai báo và test API cho phần profile.mp4

210. Hiển thị data profile lên form P2.mp4

211. Fix lỗi component DateSelect và thực hiện cập nhật profile.mp4

213. Validate khi upload ảnh.mp4

214. Active NavLink cho UserSideNav và tách component InputFile.mp4

215. Cách dùng useFormContext trong React Hook Form.mp4

216. Code logic đổi mật khẩu.mp4

217. Code chức năng đơn mua.mp4

Chương 9 Cài đặt môi trường cho dự án React

67. Những thứ bạn cần cài đặt để có một môi trường hoàn hảo code React.mp4

68. Khởi tạo Project React với Create React App.mp4

69. Giới thiệu về cầu trúc folder project React do CRA tạo.mp4

70. Sử dụng prettier và Eslint trong React sao cho chuẩn.mp4

71. Setting CICD tự động deploy với Vercel.mp4

Chương 8 Tổng quan về React

64. React là gì Tại sao lại chọn React So sánh React vs Angular vs Vue.mp4

65. MPA là gì So sánh MPA vs SPA.mp4

66. Những cách setup một dự án React.mp4

Chương 7 Kiến thức Authentication

58. Authentication là gì Token based authentication là gì.mp4

59. JWT là gì.mp4

60. Giới thiệu server thực hành với JWT.mp4

61. Kỹ thuật viết script tự động hóa Postman.mp4

62. Xử lý đăng nhập và gọi API với Access Token.mp4

63. Xử lý tiến trình tự động refresh token.mp4

Chương 6 Git căn bản đến nâng cao

43. Mẹo push code mà không cần thêm origin.mp4

57. Git stash.mp4

56. Git flow khi làm việc trong một team.mp4

55. Thêm thay đổi vào commit cuối cùng với amend.mp4

54. Sửa message một commit đã push.mp4

53. Gộp commit với squash.mp4

52. Hoàn tác commit bằng git revert.mp4

51. Hoàn tác commit bằng git reset.mp4

50. Hoàn tác những file ở khu vực commited về trạng thái ban đầu.mp4

49. Hoàn tác những file ở khu vực Staged Changes trạng thái ban đầu.mp4

48. Hoàn tác những file ở local changes về trạng thái ban đầu.mp4

47. Ưu nhược của git rebase.mp4

46. Git rebase.mp4

45. Hoàn tác lệnh merge.mp4

44. Git merge và tạo pull request trên github.mp4

28. Git là gì Cài đặt Git trên máy tính.mp4

42. Thao tác với branch.mp4

41. README.md là gì Viết như thế nào.mp4

40. Bỏ qua file với .gitignore.mp4

39. Thao tác với Git UI cơ bản trên VS Code.mp4

38. Git pull và giải quyết conflict code.mp4

37. Git log.mp4

36. Git push.mp4

35. Kết nối một local repo với remote repo.mp4

34. Clone Repository bằng HTTPS và SSH.mp4

33. Trick dùng nhiều tài khoản Github trên cùng một máy tính.mp4

32. Sử dụng SSH-Agent.mp4

31. Tạo SSH key và Add SSH key vào Github.mp4

30. Git status, Git add _ Git commit.mp4

29. Git init và git config.mp4

Chương 5 NodeJs và Webpack cơ bản đến nâng cao

16. NodeJs là gì, cài đặt và quản lý Nodejs thông qua NVM.mp4

17. Webpack và Webpack CLI.mp4

18. Xử lý Loader và CSS trong Webpack.mp4

19. HTML webpack plugin.mp4

20. Mini CSS extract plugin.mp4

21. Giải quyết caching với Hash name file.mp4

22. Tạo một server bằng webpack để dev.mp4

23. Dọn dẹp thư mục build tự động.mp4

24. Sourcemap cho webpack.mp4

25. Dùng Babel để biên dịch code Javascript thành các version cũ.mp4

26. Sử dụng các assets trong webpack.mp4

27. Phân tích file build với Webpack Bundle Analyzer.mp4

Chương 4 Kiến thức về developer tool, Postman và API

12. REST API là gì.mp4

13. Gọi API với XmlHttpRequest, Fetch, Axios.mp4

14. Dùng Postman để kiểm thử API.mp4

15. Dùng Developer Tool Chrome đúng cách.mp4