Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Complete React, Next.js & TypeScript Projects Course 2025

Khóa Học Xây Dựng Dự Án Hoàn Chỉnh Với React, Next.js & TypeScript 2025

Khóa Học Xây Dựng Dự Án Hoàn Chỉnh Với React, Next.js & TypeScript 2025

Thực Hành React: 25+ Dự Án Với Next.js, TypeScript, Prisma, Zod, Shadcn, Axios, Router 6, Query 5, Redux Toolkit

4.7
(12,615 đánh giá)
79,605 học viên
Giảng viên
Jānis Smilga
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
99.000đ 2.259.000đ -96%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
109.0 giờ video
772 bài giảng
23 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026
#Frontend Development #Next Js #React #Web Development

Bạn sẽ học được gì

Tạo Các Dự Án Chất Lượng Với React

Yêu cầu

Yêu Cầu Kiến Thức Vững Về HTML, CSS, JS. ES6 là tùy chọn.

Đối tượng phù hợp

Dành cho tất cả mọi người muốn học React

Nội dung khóa học

28 phần • 772 bài giảng
1 Kho Lưu Trữ Chính Của Khóa Học
2 React Là Gì?
3 Mục Tiêu
4 Cấu Trúc
5 Yêu Cầu
6 Kênh Discord
7 Sửa Lỗi Video Bị Mờ
8 Đánh Giá Khóa Học
1 Thông Tin Quy Trình Làm Việc
2 Trình Duyệt
3 VS Code
4 Terminal
5 Node.js
6 Create-React-App
1 Giới Thiệu
2 Kho Lưu Trữ Github
3 Cấu Trúc Thư Mục
4 Xóa Code Mẫu Mặc Định
5 Component Đầu Tiên
6 Tiện Ích Mở Rộng và Cài Đặt
7 Hàm Create Element
8 Quy Tắc JSX
9 Component Lồng Nhau
10 Công Cụ Dành Cho Nhà Phát Triển React
11 BookList
12 CSS
13 Ảnh Cục Bộ (thư mục public)
14 JSX - CSS
15 JSX - Javascript
16 Props - Thiết Lập Cơ Bản
17 Props - Thiết Lập Linh Hoạt
18 Props - Nhiều Cách Tiếp Cận
19 Children Prop
20 Danh Sách Đơn Giản
21 Danh Sách Chuẩn
22 Key Prop
23 Object Làm Prop
24 Cơ Bản Về Sự Kiện
25 Gửi Biểu Mẫu
26 Gửi Biểu Mẫu - Ví Dụ Với Nút Bấm
27 Hàm Ẩn Danh (arrow)
28 Tính Năng Components
29 Prop Drilling
30 Ví Dụ Phức Tạp - Giới Thiệu
31 Ví Dụ Phức Tạp - Lỗi
32 Ví Dụ Phức Tạp - Sửa Lỗi
33 ES6 Modules
34 Ảnh Cục Bộ (thư mục src)
35 Thử Thách Numbers
36 Thử Thách Title
37 Thư Mục Build
38 Triển Khai
1 Giới Thiệu
2 Kho Lưu Trữ Github
3 Thiết Lập
4 Cài Đặt
5 Code Mẫu SRC
6 Cấu Trúc
7 Components
8 Logo Thanh Điều Hướng
9 Cuộn Mượt
10 Liên Kết Trang
11 Liên Kết Mạng Xã Hội
12 Components Hero và About
13 Component Title
14 Component Services
15 Component Tours
16 Component Footer
17 Cách Tiếp Cận Khác - Component Liên Kết Trang
18 Cách Tiếp Cận Khác - Thêm Components
19 Triển Khai Liên Tục - Thiết Lập
20 Triển Khai Liên Tục - Lợi Ích
21 Lưu Ý Về "Triển Khai Liên Tục"
1 VITE - Giới Thiệu
2 VITE - Cài Đặt / Thiết Lập
1 Giới Thiệu
2 Kho Lưu Trữ Github
3 Thiết Lập
4 Tổng Quan
5 Ví Dụ Lỗi
6 Cơ Bản Về UseState
7 Lần Render Đầu Tiên và Re-render
8 Quy Tắc Chung Của React Hooks
9 Ví Dụ UseState Với Mảng - Thiết Lập
10 Ví Dụ UseState Với Mảng - Hoàn Chỉnh
11 UseState - Thông Tin Bổ Sung
12 Ví Dụ UseState Với Object - Thiết Lập
13 Thông Tin Về Auto Batching
14 Ví Dụ UseState Với Object - Hoàn Chỉnh
15 Lưu Ý Về Hàm Set Của UseState
16 UseState Dạng Cập Nhật Hàm
17 UseState - Ví Dụ SetTimeout
18 Dự Án Matching
19 Ví Dụ Code
20 Cơ Bản Về UseEffect
21 Nhiều UseEffect
22 Thử Thách Fetch Với UseEffect - Giới Thiệu
23 Thử Thách Fetch Với UseEffect - Hoàn Chỉnh
24 Thông Tin Về Dọn Dẹp UseEffect
25 Nhiều Lệnh Return
26 Nhiều Lệnh Return - Thiết Lập Fetch Dữ Liệu
27 Nhiều Lệnh Return - Fetch Dữ Liệu
28 Lưu Ý Lỗi Fetch
29 Thứ Tự Quan Trọng
30 Vị Trí Hàm Fetch
31 Quy Tắc React Hooks
32 Vanilla.js (Tùy Chọn)
33 Short Circuit - Tổng Quan
34 Short Circuit - Ví Dụ
35 Toán Tử Ba Ngôi
36 Thử Thách Toggle
37 Thử Thách User
38 Hàm Dọn Dẹp UseEffect - Thiết Lập/Thử Thách
39 UseEffect - Ví Dụ Timer
40 UseEffect - Ví Dụ Event Listeners
41 Bạn Có Thể Không Cần UseEffect
42 Dự Án Matching
43 Cấu Trúc Dự Án - Ví Dụ Thư Mục
44 Cấu Trúc Dự Án - Named Exports
45 Cấu Trúc Dự Án - Export Nhóm
46 Tận Dụng Javascript - Giới Thiệu
47 Tận Dụng Javascript - Thử Thách
48 Tận Dụng Javascript - Hoàn Chỉnh
49 Biểu Mẫu - Thiết Lập
50 Controlled Inputs
51 Thử Thách User - Thiết Lập
52 Thử Thách User - Thêm User Mới
53 Thử Thách User - Xóa User
54 Nhiều Input
55 Input Checkbox
56 Input Select
57 FormData API
58 Dự Án Matching
59 useRef - DOM Node
60 useRef - Lần Render Đầu Tiên
61 Dự Án Matching
62 Custom Hooks - Toggle
63 Custom Hooks - Fetch Person
64 Custom Hooks - Generic Fetch
65 Context API - Thử Thách
66 Context API - Prop Drilling
67 Context API - Giải Pháp
68 Context API - Custom Hook
69 Context API - Thiết Lập Toàn Cục
70 Dự Án Matching
71 UseReducer - Giới Thiệu
72 UseReducer - Thử Thách
73 UseReducer - Thiết Lập
74 Cơ Bản Về Reducer
75 Actions và Trạng Thái Mặc Định
76 Đặt Lại Danh Sách
77 Xóa Người
78 Import/Export
79 Dự Án Matching
80 Hiệu Suất - Giới Thiệu
81 Component Re-renders
82 Công Cụ Dành Cho Nhà Phát Triển React
83 Hạ Thấp State
84 Hạ Thấp State - Thử Thách
85 React.memo()
86 Mind Grenade
87 UseCallback Hook
88 UseCallback Hook - Trường Hợp Sử Dụng Phổ Biến
89 UseMemo Hook
90 UseTransition Hook
91 React Suspense
1 Thông Tin Quan Trọng!!!
2 Giới Thiệu
3 Thiết Lập
4 Thiết Lập - File Figma
5 Birthday Buddy- Thiết Lập
6 Birthday Buddy - Import Danh Sách
7 Birthday Buddy - Render Danh Sách
8 Birthday Buddy - Xóa Danh Sách
9 Birthday Buddy - CSS (Tùy Chọn)
10 Tours - Thiết Lập
11 Tours - Fetch Tours
12 Tours - Render Tours
13 Tours - Xóa Tour
14 Tours - Đọc Thêm
15 Tours - Tải Lại
16 Tours - CSS (Tùy Chọn)
17 Reviews - Thiết Lập
18 Reviews - Dữ Liệu
19 Reviews - React Icons
20 Reviews - Người Đầu Tiên
21 Reviews - Trước và Sau
22 Reviews - Kiểm Tra Số
23 Đánh giá - Người Ngẫu Nhiên
24 Đánh giá - Toán tử Modulus
25 Đánh giá - CSS (Tùy chọn)
26 Câu hỏi - Thiết lập
27 Câu hỏi - Hiển thị Danh sách
28 Câu hỏi - Bật/Tắt Thông tin
29 Câu hỏi - Thiết lập Thay thế
30 Câu hỏi - CSS (Tùy chọn)
31 Menu - Thiết lập
32 Menu - Component Tiêu đề
33 Menu - Hiển thị Món ăn
34 Menu - Danh mục Duy nhất
35 Menu - Hiển thị Danh mục
36 Menu - Lọc Món ăn
37 Menu - CSS (Tùy chọn)
38 Tabs - Thiết lập
39 Tabs - Lấy dữ liệu Công việc
40 Tabs - Hiển thị Công việc
41 Tabs - Nhiệm vụ và Thư viện UUID
42 Tabs - Container Nút bấm
43 Tabs - Mục Hiện tại
44 Tabs - CSS (Tùy chọn)
45 Slider - Thiết lập
46 Slider - Cấu trúc
47 Slider - CSS
48 Slider - Logic Ban đầu
49 Slider - Mục Hiện tại và Nút Trước/Sau
50 Slider - Tự động chuyển (autoplay)
51 Slider - Thông tin Thư viện
52 Slider - Thiết lập React Slick
53 Slider - Hoàn thiện React Slick
54 Lorem Ipsum - Thiết lập
55 Lorem Ipsum - Cấu trúc
56 Lorem Ipsum - Gửi Form
57 Lorem Ipsum - Thư viện Nanoid
58 Lorem Ipsum - CSS (Tùy chọn)
59 Bộ tạo Màu - Thiết lập
60 Bộ tạo Màu - Cấu trúc Form
61 Bộ tạo Màu - Input Màu HTML
62 Bộ tạo Màu - Thư viện Values.js
63 Bộ tạo Màu - Hiển thị Danh sách
64 Bộ tạo Màu - React Toastify
65 Bộ tạo Màu - Thay đổi/Thêm Màu
66 Bộ tạo Màu - Clipboard API
67 Bộ tạo Màu - CSS (Tùy chọn)
68 Danh sách Mua sắm - Thiết lập
69 Danh sách Mua sắm - Component Form
70 Danh sách Mua sắm - Thêm Mục
71 Danh sách Mua sắm - Hiển thị Mục
72 Danh sách Mua sắm - Mục Đơn lẻ
73 Danh sách Mua sắm - Xóa Mục
74 Danh sách Mua sắm - Local Storage
75 Danh sách Mua sắm - Chỉnh sửa Mục (Thiết lập Toàn cục)
76 Danh sách Mua sắm - React Toastify
77 Danh sách Mua sắm - CSS (Tùy chọn)
78 Navbar - Thiết lập
79 Navbar - Dữ liệu
80 Navbar - Thiết lập Ban đầu
81 Navbar - CSS Thiết lập Ban đầu
82 Navbar - Thiết lập Cố định
83 Navbar - Thiết lập Động
84 Navbar - Câu hỏi
85 Navbar - Ứng dụng Hoàn chỉnh
86 Sidebar/Modal - Thiết lập
87 Sidebar/Modal - Các Component
88 Sidebar/Modal - Ngữ cảnh Toàn cục
89 Sidebar/Modal - Component Trang chủ
90 Sidebar/Modal - Component Modal
91 Sidebar/Modal - JSX của Component Sidebar
92 Sidebar/Modal - CSS của Sidebar
93 Sidebar/Modal - Bật/Tắt Sidebar
94 Strapi - Thiết lập
95 Strapi - Dữ liệu
96 Strapi - Ngữ cảnh Toàn cục
97 Strapi - Các Component
98 Strapi - CSS Navbar
99 Strapi - Hero
100 Strapi - JSX Sidebar
101 Strapi - CSS Sidebar
102 Strapi - NavLinks
103 Strapi - Logic PageId
104 Strapi - JSX Submenu
105 Strapi - CSS Submenu
106 Strapi - Ẩn Submenu (Phần 1)
107 Strapi - Ẩn Submenu (Phần 2)
108 Giỏ hàng - Giới thiệu
109 Giỏ hàng - Thiết lập
110 Giỏ hàng - Ngữ cảnh Toàn cục
111 Giỏ hàng - Thiết lập UseReducer
112 Giỏ hàng - Thiết lập Hành động
113 Giỏ hàng - Cấu trúc Dữ liệu
114 Giỏ hàng - Đối tượng Map
115 Giỏ hàng - Chuyển sang Map()
116 Giỏ hàng - Xóa Giỏ hàng
117 Giỏ hàng - Xóa Mục
118 Giỏ hàng - Tăng Số lượng
119 Giỏ hàng - Giảm Số lượng
120 Giỏ hàng - Tính Tổng
121 Giỏ hàng - Cấu trúc Fetch
122 Giỏ hàng - Hoàn thiện Fetch
123 Giỏ hàng - CSS (Tùy chọn)
1 Giới thiệu
2 Dự án Khởi đầu
3 Thiết lập
4 Yêu cầu GET
5 Thiết lập Headers
6 Yêu cầu POST
7 Mặc định Toàn cục
8 Instance Tùy chỉnh
9 Bộ chặn (Interceptors)
1 Giới thiệu
2 Dự án Khởi đầu
3 Thông tin Hữu ích
4 Máy chủ (Back-End) - Thiết lập
5 Ứng dụng Công việc (Front-End) - Thiết lập
6 Instance Tùy chỉnh Axios
7 Phương thức HTTP
8 Tài liệu API
9 React Query - Giới thiệu
10 React Query - Cài đặt và Thiết lập
11 Cập nhật Quan trọng !!!
12 Truy vấn Đầu tiên
13 Hiển thị Dữ liệu
14 Xử lý Lỗi
15 Thunder Client
16 Tạo Công việc - Thử thách
17 Tạo Công việc - Thiết lập Ban đầu
18 Trợ giúp UseMutation
19 Chỉnh sửa Công việc - Thử thách
20 Chỉnh sửa Công việc - Hoàn thiện
21 Xóa Công việc
22 Tái cấu trúc
23 Thiết lập Máy chủ Thay thế
1 Giới thiệu
2 Tải xuống
3 Dự án Khởi đầu
4 Cấu trúc
5 Chủ đề Tối - Thiết lập Ban đầu
6 Chủ đề Tối - Thêm/Xóa Class
7 Chủ đề Tối - CSS
8 Chủ đề Tối - Người dùng Thích Chế độ Tối (CSS)
9 Form Tìm kiếm
10 Unsplash API - Thông tin
11 Unsplash API - Đăng ký
12 Lấy URL Chính xác
13 Thiết lập React Query
14 Thiết lập Truy vấn
15 Hiển thị Hình ảnh
16 Công cụ Dev React Query
17 Thiết lập Giá trị Tìm kiếm Toàn cục
18 Sửa lỗi UseQuery
19 Chế độ Tối - Kiểm tra Javascript
20 Cập nhật Quan trọng !!!
21 Local Storage
22 Biến Môi trường (ENV)
23 Triển khai
24 CSS (Tùy chọn)
1 Giới thiệu
2 Dự án Khởi đầu
3 Thiết lập
4 Component Hero
5 Undraw
6 Dữ liệu Dự án
7 Headless CMS
8 Tạo tài khoản Contentful
9 Kiểu Nội dung (Content Type)
10 Nội dung
11 Tài liệu API Contentful
12 Contentful SDK - Cài đặt và Thiết lập
13 Lấy dữ liệu Dự án
14 Hiển thị Dự án
15 Triển khai
16 Webhooks
17 CSS (Tùy chọn)
1 Giới thiệu
2 Thiết lập
3 Dự án Khởi đầu
4 Thông tin về SPA và React Router
5 Router Cơ bản
6 Thiết lập Trang
7 Component Link
8 Trang Lồng nhau
9 Trang Lồng nhau - Ví dụ Phức tạp hơn
10 Navbar
11 Styled Components - Thiết lập
12 Styled Components - Wrapper
13 CSS Navbar (tùy chọn)
14 Trang Giới thiệu
15 Bố cục Trang
16 Trang Lỗi
17 Trang Lỗi - CSS
18 Thông tin Loader
19 Loader - Trang Chủ
20 Tổng quan CocktailDB
21 Cập nhật Quan trọng !!!
22 Lấy Danh sách Đồ uống
23 Lỗi Trang Đơn
24 CocktailList
25 CocktailCard
26 CSS cho CocktailList và CocktailCard (tùy chọn)
27 Trạng thái Tải Toàn cục và Context
28 Trang Chi tiết Cocktail - Thiết lập
29 Trang Chi tiết Cocktail - Hiển thị
30 Thử thách Thành phần Nguyên liệu
31 Kiểm tra Bổ sung
32 CSS cho Trang Chi tiết Cocktail (tùy chọn)
33 React Toastify - Thiết lập
34 Cấu trúc Bản tin
35 Gửi Form HTML
36 Action - Thiết lập
37 Gửi Form
38 Xử lý Lỗi
39 Trạng thái Điều hướng
40 SearchForm - Cấu trúc
41 SearchForm - Hoàn thiện
42 CSS cho SearchForm (tùy chọn)
43 React Query - Thiết lập
44 Cập nhật Quan trọng !!!
45 React Query - Thiết lập Trang Chủ
46 React Query - Hoàn thiện Trang Chủ
47 React Query - Trang Chi tiết Cocktail
48 Chuyển hướng
1 Giới thiệu Dự án
2 Giới thiệu Tailwind
3 Thiết lập Dự án
4 Tài nguyên Bổ sung
5 Thanh Điều hướng
6 Phần Hero
7 Lớp Tùy chỉnh
8 Phần Kỹ năng
9 Phần Giới thiệu
10 Phần Dự án
1 Giới thiệu
2 Github
3 Thiết lập
4 Cài đặt
5 Store
6 Slice Đầu tiên
7 Công cụ Redux Dev
8 useSelector
9 Hero Icons
10 Mục Giỏ hàng - Dữ liệu Cục bộ
11 Container Giỏ hàng
12 Mục Giỏ hàng
13 Reducers - Xóa Giỏ hàng
14 Reducers - Trả về State
15 Reducers - Xóa Mục
16 Reducers - Tăng và Giảm
17 Reducers - Tính Tổng
18 Thiết lập Modal
19 Hoàn thiện Modal
20 Cập nhật Quan trọng !!!
21 createAsyncThunk
22 createAsyncThunk - Tùy chọn Khác
23 Ký hiệu Builder Callback
1 Giới thiệu
2 DaisyUI
3 Tài nguyên
4 VITE + TailwindCSS
5 Thiết lập DaisyUI
6 Cài đặt Phụ thuộc
7 Tạo Trang
8 Cấu trúc Route
9 Trang Lỗi
10 Form Input
11 Trang Đăng nhập
12 Nút Gửi
13 Trang Đăng ký
14 Lớp Tùy chỉnh
15 Component Header
16 Cấu trúc Thanh Điều hướng
17 Component NavLinks
18 Component Toggle
19 Thêm Chủ đề
20 Đặt Chủ đề
21 Trang Giới thiệu
22 Component Hero
23 Base URL
24 Trình tải Trang Chủ
25 Sản phẩm Nổi bật
26 Định dạng Giá
27 Lấy Thông tin Sản phẩm Đơn
28 Hiển thị Sản phẩm Đơn
29 Sản phẩm Đơn - Màu sắc
30 Sản phẩm Đơn - Số lượng
31 Tạo Input Số lượng
32 Trang Sản phẩm - Thiết lập
33 Danh sách Sản phẩm
34 Container Sản phẩm
35 Bộ lọc - Input Tìm kiếm
36 Bộ lọc - Input Chọn
37 Bộ lọc - Input Phạm vi
38 Bộ lọc - Input Checkbox
39 Trạng thái Tải Toàn cục
40 Bộ lọc - Tham số
41 Phân trang - Thiết lập
42 Phân trang - Hoàn thiện
43 Redux Toolkit - Thiết lập
44 Chức năng Thêm vào Giỏ hàng
45 Reducer AddItem
46 Tái cấu trúc và Lưu trữ Cục bộ
47 Reducers Xóa, Xóa mục và Chỉnh sửa
48 Trang Giỏ hàng
49 Tổng Giỏ hàng
50 Mục Giỏ hàng - Thiết lập
51 Mục Giỏ hàng - Chức năng
52 User Slice - Thiết lập
53 Tái cấu trúc Toggle Chủ đề
54 Đăng xuất và Truy cập Người dùng
55 Đăng ký Người dùng - Tài liệu
56 Đăng ký Người dùng - Hoàn thiện
57 Đăng nhập Người dùng - Thiết lập
58 Truy cập RTK Store trong Action
59 Trang Đăng nhập - Hoàn thiện Action
60 Đăng nhập Người dùng - Reducer
61 Người dùng Demo
62 Trang Thanh toán - Thiết lập
63 Trang Thanh toán - Hạn chế Truy cập
64 Tạo Yêu cầu Đặt hàng
65 Form Thanh toán - Thiết lập
66 Form Thanh toán - Hoàn thiện
67 Lỗi Xác thực
68 Yêu cầu Đơn hàng
69 Trang Đơn hàng - Thiết lập
70 Danh sách Đơn hàng
71 Phân trang Phức tạp
72 React Query - Thiết lập
73 React Query - Trang Chủ
74 React Query - Trang Sản phẩm Đơn
75 React Query - Trang Tất cả Sản phẩm
76 React Query - Trang Đơn hàng
77 React Query - Xóa Queries
1 Cập nhật Khóa học !!! Nội dung Mới !!!
1 Giới thiệu, Thiết lập, Tệp và Thư mục
2 Chú thích Kiểu và Suy luận Kiểu
3 Kiểu Union và Any
4 Mảng và Đối tượng
5 Tham số Hàm và Giá trị Trả về Hàm
6 Tham số Tùy chọn, Mặc định và Rest
7 Đối tượng làm Tham số và Kiểm tra Thuộc tính Thừa
8 Bí danh Kiểu và Kiểu Giao nhau
9 Cơ bản về Interface
10 Interface - Nâng cao
11 Tuple và Enum
12 Ép kiểu, Kiểu Unknown và Kiểu Never
13 ES6 Modules
14 Bảo vệ Kiểu - Phần Một
15 Bảo vệ Kiểu - Phần Hai
16 Generics
17 Lấy Dữ liệu và Tệp Khai báo
18 Lớp
19 Dự án Quản lý Công việc - Phần Một
20 Dự án Quản lý Công việc - Phần Hai
1 Thiết lập và Kiến thức Cơ bản
2 UseState và Sự kiện
3 Thử thách và Giải pháp
4 Context API và useReducer
5 Lấy Dữ liệu
6 Redux Toolkit
7 Dự án Quản lý Công việc
1 Cập nhật !!!
2 Thông tin Next.js, Thiết lập, Trang Chủ và Component Link
3 Route Lồng nhau
4 Tệp Layout, Thanh Điều hướng, Phông chữ và Metadata
5 Server Components vs Client Components
6 Lấy Dữ liệu
7 Layout Lồng nhau và Trang Động
8 Hình ảnh
9 Tùy chọn Định tuyến Khác
10 Server Actions
11 Tệp Actions
12 Lấy Người dùng và Tái xác thực Cache
13 useFormStatus và useFormState
14 Nút Xóa, Input Ẩn và Phương thức Bind
15 Route Handlers - Phần Một
16 Route Handlers - Phần Hai
17 Middleware, Build Cục bộ và Cache
1 Thông tin Quan trọng !!!
2 Tổng quan Dự án
3 Thiết lập
4 Tạo Trang
5 Cài đặt và Thiết lập Shadcn-ui
6 Component Button
7 Thiết lập Components
8 Component Container
9 Component Thanh Điều hướng - Bản phác
10 Component Logo
11 Thành phần NavSearch và CartButton
12 Shadcn - Thay đổi giao diện
13 Shadcn - Chuyển đổi chế độ tối
14 Thành phần LinksDropdown - Thiết lập ban đầu
15 Thông tin mật khẩu Supabase !!!
16 Tạo dự án Supabase
17 Thiết lập Prisma
18 Kết nối Prisma với Supabase
19 Prisma CRUD
20 Thực hành viết truy vấn Prisma
21 Mô hình Sản phẩm
22 Seed dữ liệu vào cơ sở dữ liệu
23 Tạo thêm các thành phần
24 Thành phần SectionTitle và EmptyList
25 Hàm lấy sản phẩm
26 Sản phẩm nổi bật
27 Thành phần lưới sản phẩm
28 Thành phần Hero
29 Thành phần Hero Carousel
30 Thành phần Loading Container
31 Thành phần ProductsContainer
32 Thành phần ProductsList
33 Thành phần NavSearch
34 Lấy chi tiết sản phẩm
35 Trang chi tiết sản phẩm - Thiết lập
36 Lỗi Supabase !!!
37 Triển khai trên Vercel
38 Thiết lập thành phần Toast
39 Thông tin phiên bản Clerk !!!
40 Xác thực Clerk
41 Thành phần liên kết đăng xuất
42 Thành phần UserIcon
43 Thành phần LinksDropdown - Hoàn thiện
44 Kiểm tra Auth Provider trên môi trường sản xuất
45 Trang quản trị - Cấu trúc
46 Hạn chế truy cập vào trang quản trị
47 Thiết lập trang tạo sản phẩm và thư viện Faker
48 Thành phần FormInput
49 Các thành phần Form còn lại
50 Thành phần SubmitButton
51 Thành phần FormContainer
52 CreateProductAction - Cách tiếp cận đầu tiên + Hàm hỗ trợ
53 Thư viện Zod và Schema sản phẩm
54 Thông báo lỗi tùy chỉnh
55 Xác thực hình ảnh
56 Tải hình ảnh lên Supabase Bucket
57 Lấy sản phẩm quản trị
58 Nút Icon và Hành động xóa sản phẩm
59 Hoàn thiện trang sản phẩm quản trị
60 Xóa hình ảnh cũ khỏi Supabase Bucket
61 Lấy chi tiết sản phẩm quản trị
62 Trang chỉnh sửa sản phẩm
63 Cập nhật thành phần Image Container
64 Thành phần Loading Table
65 Mô hình Yêu thích
66 Nút và hành động Yêu thích
67 Thành phần FavoriteToggleButton và FavoriteToggleForm
68 Hành động chuyển đổi Yêu thích
69 Trang Yêu thích
70 Thư viện React Share
71 Mô hình Đánh giá
72 Thành phần Đánh giá đầu vào và Gửi đánh giá
73 Hành động tạo đánh giá
74 Thành phần Xếp hạng và Bình luận
75 Thành phần Đánh giá sản phẩm
76 Thành phần Xếp hạng sản phẩm - Hoàn thiện
77 Lấy đánh giá người dùng và hành động xóa đánh giá
78 Trang Đánh giá
79 Hạn chế truy cập nút Gửi đánh giá
80 Mô hình Giỏ hàng và CartItem
81 Thành phần chọn số lượng sản phẩm
82 Thành phần Thêm vào giỏ hàng
83 Hành động Thêm vào giỏ hàng - Phần đầu
84 Hành động Thêm vào giỏ hàng - Phần hai
85 Trang Giỏ hàng và thành phần Tổng giỏ hàng
86 Thành phần danh sách sản phẩm trong giỏ
87 Hành động xóa sản phẩm khỏi giỏ
88 Hành động chỉnh sửa sản phẩm trong giỏ
89 Sửa lỗi
90 Mô hình Đơn hàng và hành động đặt hàng
91 Trang Đơn hàng và Doanh số
92 Thiết lập Stripe và API Keys
93 Tái cấu trúc mô hình đơn hàng và createOrderAction
94 Trang Thanh toán
95 Route Thanh toán
96 Route Xác nhận
97 Kiểm tra chức năng Stripe
98 Sửa lỗi triển khai !!!
99 Thiết lập Atlas - Video tùy chọn !!!
1 Kho lưu trữ phần !!! Thông tin quan trọng !!!
2 Cài đặt và thiết lập
3 Form tìm kiếm
4 Tổng quan về GraphQL
5 Apollo Client và Query
6 Thành phần Hồ sơ người dùng, Stats Container và User Card
7 Hàm tiện ích
8 Thành phần Biểu đồ và Loading
1 Giới thiệu
2 Kho lưu trữ phần !!! Thông tin quan trọng !!!
3 Cài đặt và thiết lập kho lưu trữ phần
4 Tệp và thư mục
5 Khám phá tệp kiểm thử đầu tiên
6 Chi tiết kiểm thử xác thực
7 Thông tin Vitest
8 Thành phần SearchByText
9 Phương thức SearchByText - Tổng quan
10 Phương thức SearchByText - Tệp kiểm thử
11 Ví dụ Phát triển hướng kiểm thử
12 Thành phần SearchByRole
13 Tổng quan phương thức SearchByRole
14 Tệp kiểm thử SearchByRole
15 Thành phần tương tác người dùng
16 Tương tác người dùng - Tệp kiểm thử
17 Kiểm thử Form - Sandbox
18 Kiểm thử đầu vào trống
19 Kiểm thử nhập liệu vào ô trống
20 Tái cấu trúc
21 Kiểm thử Form - Các bài kiểm thử còn lại
22 Ứng dụng Đánh giá - Logic
23 Ứng dụng Đánh giá - Kiểm thử đơn vị thành phần Danh sách
24 Ứng dụng Đánh giá - Kiểm thử đơn vị thành phần Form
25 Ứng dụng Đánh giá - Kiểm thử tích hợp thành phần Sandbox
26 Tạo và cấu hình mẫu cho kiểm thử ứng dụng React
1 Hoàn thành khóa học
2 Dự án bổ sung
1 Thông tin quan trọng !!!
2 Tổng quan và thiết lập
3 Tổng quan và thiết lập Shadcn-ui
4 Bố cục, Trang chủ và tạo trang
5 Thông tin phiên bản Clerk !!!
6 Xác thực Clerk và liên kết điều hướng
7 Bố cục Dashboard, Sidebar và Navbar
8 Thành phần Dropdownlinks, Thay đổi giao diện và Chuyển đổi giao diện
9 Thành phần Form Shadcn-ui và kiểu dữ liệu
10 Thành phần Form tùy chỉnh
11 Chức năng tạo công việc - Tiếp tục
12 Thông tin lưu trữ cơ sở dữ liệu !!!
13 Prisma, Render và hành động tạo công việc
14 Thành phần Toast, thiết lập React Query và hoàn thiện Form tạo công việc
15 Hành động lấy tất cả công việc và thiết lập trang
16 Form tìm kiếm
17 Danh sách công việc và Job Card
18 Thông tin công việc và xóa công việc
19 Trang công việc đơn lẻ và hoàn thiện chỉnh sửa công việc
20 Seed cơ sở dữ liệu
21 Hành động thống kê và biểu đồ
22 Thẻ thống kê, Loading Skeleton và vùng chứa biểu đồ
23 Phân trang - Vùng chứa nút
24 Phân trang - Vùng chứa nút phức tạp
1 Giới thiệu và thiết lập
2 Cấu trúc và thành phần được tạo kiểu
3 Thiết lập trang
4 Trang lỗi và đăng ký (phần đầu)
5 Trang đăng ký (phần hai)
6 Thông tin quan trọng !!!
7 Yêu cầu HTTP
8 Đăng nhập người dùng và thiết lập Dashboard
9 Thanh điều hướng và chức năng chuyển đổi
10 Sidebar nhỏ và lớn
11 Trang hồ sơ
12 Trang thêm công việc - Phần đầu
13 Trang thêm công việc - Phần hai
14 Tạo công việc
15 Tất cả công việc
16 Thành phần Công việc
17 Chỉnh sửa công việc và kiểm thử người dùng
18 Vùng chứa thống kê
19 Cập nhật thư viện Recharts !!!
20 Vùng chứa biểu đồ
21 Vùng chứa tìm kiếm
22 Phân trang
23 Tham số truy vấn
24 Tái cấu trúc và đăng xuất người dùng
25 Debounce
1 Thông tin quan trọng !!!
2 Git cơ bản
3 Nhánh Git
4 Git - Tính năng bổ sung
5 Git - Xung đột hợp nhất
6 Github - Phần đầu
7 Github - Phần hai
8 Github - Phần ba
1 Thông tin quan trọng
2 Thiết lập AWS
3 Dự án S3 - Phần 1
4 Dự án S3 - Phần 2
5 Dự án AWS Lambda - Phần 1
6 Dự án AWS Lambda - Phần 2
7 Dự án AWS Lambda - Phần 3
8 Dự án DynamoDB - Phần 1
9 Dự án DynamoDB - Phần 2
10 Dự án Quản lý sản phẩm - Phần 1
11 Dự án Quản lý sản phẩm - Phần 2
12 Dự án Quản lý Sản phẩm - Phần 3
13 Dự án SQS - Phần 1
14 Dự án SQS - Phần 2
1 Nội dung Bổ sung

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

MAJOR COURSE UPDATE - JUNE 2024 !!!


Exciting New Content in React Course

I'm thrilled to announce that I am adding more valuable content to our React course to help you stay ahead of industry standards. Here's what you can look forward to:


  • Comprehensive TypeScript tutorial

  • Detailed lessons on React with TypeScript

  • Complete Next.js tutorial with TypeScript

  • Several complex Next.js projects

  • Over 30 hours of new content !!!

Stay ahead with the latest industry standards and master the skills needed for modern React development!


What's New?

  1. TypeScript Integration:

    • TypeScript Tutorial: Learn the basics and advanced features of TypeScript.

    • React with TypeScript: Master the integration of TypeScript with React to build robust applications.

  2. Next.js Tutorials:

    • Next.js with TypeScript: Comprehensive tutorials on building Next.js applications using TypeScript.

    • Complex Next.js Projects: Work on real-world projects that leverage the full potential of Next.js.

Why These Additions?

  • Industry Standards: Both TypeScript and Next.js have become essential skills for modern React development.

  • New React Features: Many new React features are only available through React frameworks like Next.js.

  • Full-Stack Development: Next.js enables quicker and more efficient full-stack development by allowing server-side and client-side code to coexist seamlessly.

  • Team Efficiency: TypeScript enhances code maintainability and collaboration, making it a preferred choice for large teams.



Mastering React 18: Building Modern Web Applications


Dive into the dynamic world of front-end development with our comprehensive course on React 18, a cutting-edge JavaScript library used for creating engaging user interfaces. Developed and maintained by Facebook, React has become a cornerstone in building both single-page and mobile applications.

Why Learn React?


  • High Demand: React's popularity makes it a valuable skill for job seekers in the tech industry.

  • Efficiency and Performance: React's use of a virtual DOM ensures fast, scalable, and efficient application development.

  • Flexibility and Reusability: The library's design allows for reusable components, simplifying the development process and making code maintenance easier.

Course Coverage:


  • React Fundamentals: Understand the core principles of React.

  • Latest Features: Get hands-on with React 18.

  • Hooks & State Management: Deep dive into useState, useEffect, useRef, useReducer, useCallback, useMemo, and custom hooks.

  • Advanced Concepts: Learn about conditional rendering, prop drilling, context API, and more.

  • Navigation and Routing: Explore React Router 6 for seamless app navigation.

  • Data Handling: Utilize axios and redux-toolkit for efficient data management.

  • Project-Based Learning: Build over 25 real-world projects including a Birthday Reminder, E-Commerce Site, Quiz App, and a GitHub Users Explorer.

Ideal For:

Aspiring and experienced front-end developers looking to master React and elevate their web development skills. Whether you're aiming to boost your career prospects or build high-performance web applications, this course is your gateway to becoming a proficient React developer.


All Project Intros are available for preview.

Here are some of the projects we are going to build in this course

1. Birthday Buddy

2. Tours

3. Reviews

4. Accordion

5. Menu

6. Tabs

7. Slider

8. Lorem Ipsum

9. Color Generator

10. Grocery Bud

11. Navbar

12. Sidebar and Modal

13. Strapi Menu

14. Cart

15. Unsplash Images

16. Contentful CMS

17. Mix Master

18. Tailwind Portfolio

19. E-Commerce

20. Jobster

21. Github Users

22. Jobster

23. Comprehensive Full Stack Next.js E-Commerce  Project


Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Next Js
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊