Lập trình

Khóa học React PRO | Trở thành lập trình viên React giá trị Cùng HoleTex

0 Học viên

04 giờ48 phút

Về khoá học

Khóa học React PRO | Trở thành lập trình viên React giá trị Cùng HoleTex là một chương trình đào tạo chuyên sâu, được thiết kế để giúp học viên nâng cao kỹ năng lập trình React và trở thành những lập trình viên có giá trị cao trên thị trường lao động

Nội dung khoá học

Phần 1. Giới thiệu

Phần 2. Kiến thức nền tảng trước khi học React

01. Cách trình duyệt web hoạt động

06:34
02. Client Side Rendering vs Server Side Rendering

05:28
03. JavaScript Array Methods

24:15
04. Tính năng trong ES6

06:50
05. Callback, Promise, Async Await trong JS

23:55
06. Toán tử Nullish Coalescing và Optional Chaining

14:44
07. Flexbox trong CSS

12:18
08. CSS Grid

27:17
09. So sánh Cookies, Local Storage và Session Storage

18:54

Phần 3. Cấu hình dự án

Phần 4. React nền tảng

01. Giới thiệu dự án Todo App

01:46
02. Component là gì

02:06
03. Xây dựng danh sách việc cần làm

04:09
04. Phân tích và tạo 1 component mới – Todo Item

03:00
05. [Lý thuyết] Cú pháp JSX trong React

03:55
06. Truyền dữ liệu vào component bằng props

03:27
07. Style component bằng CSS

02:25
08. Sử dụng JavaScript trong JSX với {}

02:41
09.Lưu ý về sử dụng key với list

02:42
10.Lý do không nên dùng index làm key

04:51
11.Xử lý sự kiện trong React

04:13
12.Hooks là gì.mp4

03:24
13.Vấn đề với biến JavaScript thông thường.mp4_2

05:14
14.Giải quyết vấn đề với biến JavaScript bằng State.mp4

04:38
15.State – bộ nhớ của Component hoạt động thế nào.mp4

04:33
16.Cách React xử lý khi có nhiều State.mp4_3

06:40
17.Thao tác DOM với Ref.mp4_2

01:53
18.Render component theo điều kiện.mp4

03:40
19.Xử lý sự kiện cho complete checkbox.mp4

11:47
20.Style cho Sidebar component.mp4

11:11
21.Xử lý ẩn hiện Sidebar

05:30
22.Xử lý Todo Item đang được lựa chọn.mp4_2

06:20
23. Hoàn thiện chức năng cho Sidebar

16:20
24. Vấn đề với Event Propagation.mp4_2

01:42

Phần 5. Xây dựng Filter Panel

01. Xây dựng UI cho Filter Type component.mp4.mp4.mp4

14:12
02. Lưu thông tin Filter Type đang lựa chọn.mp4.mp4

06:39
03. Kĩ thuật Lifting State Up.mp4.mp4

00:58
04. Thêm logic xử lý filter TodoList theo Filter Type được chọn.mp4.mp4

04:25
05. Cấu hình và fix lỗi ESLint.mp4.mp4

10:21
06. Fix 1 số lỗi trong console.mp4.mp4

32:03
07. Tính số lượng todos cho từng Filter Type.mp4.mp4

08:24
08. [Lý thuyết] useMemo vs useCallback.mp4.mp4

04:51
09. Tối ưu performance bằng useMemo.mp4.mp4

05:52
10. Xử lý tìm kiếm Todo theo tên.mp4.mp4

04:06
11. Xây dựng UI cho Categories.mp4.mp4

21:13
12. Thêm logic xử lý lưu Category cho từng Todo.mp4.mp4

09:36
13. [Lý thuyết] Context API là gì – Cách sử dụng useContext.mp4.mp4

02:51
14. Thêm Context API để quản lý State tập trung.mp4.mp4

08:49
15. Xử lý Filter theo Category.mp4.mp4

04:47
16. Bài tập – Dọn dẹp lại các State với Context API.mp4.mp4

02:51
17. Hiển thị số lượng Todo theo Category.mp4.mp4

03:53
18. Giải bài tập – Dọn dẹp State với Context API.mp4.mp4

14:54

Phần 6. Cấu hình dự án nâng cao – Movie App

Phần 7. Sử dụng Tailwind CSS để xây dựng UI

Phần 8. Thao tác với API trong REACT

Phần 9. Xây dựng Media List (Thực hành SVG, Tailwind CSS, thao tác API,…)

01. Xây dựng UI cho MediaList (Phần 1).mp4.mp4

06:07
02. Xây dựng UI cho MediaList (Phần 2).mp4.mp4

12:10
03. Xây dựng UI cho MovieCard component.mp4.mp4

09:22
04. Xây dựng UI với SVG (Phần 1).mp4.mp4

13:46
05. Xây dựng UI với SVG (Phần 2).mp4.mp4

06:14
06. Xây dựng UI với SVG (Phần 3).mp4.mp4

09:35
07. Load dữ liệu từ API cho MediaList.mp4.mp4

09:30
08. Load dữ liệu từ API cho MovieCard.mp4.mp4

01:56
09. Refactor MediaList component để tái sử dụng.mp4.mp4

03:58
10. Sửa UI trên màn hình lớn.mp4.mp4

08:42

Phần 10. Sử dụng React Router để phân trang phía Client

01. Giới thiệu React Router.mp4.mp4

13:38
02. Xây dựng UI cho Banner (Phần 1).mp4.mp4

03:08
03. Xây dựng UI cho Banner (Phần 2).mp4.mp4

10:51
04. Load dữ liệu từ API cho Banner (Phần 1).mp4.mp4

09:03
05. Load dữ liệu từ API cho Banner (Phần 2).mp4.mp4

06:51
06. Load dữ liệu từ API cho Banner (Phần 3).mp4.mp4

08:22
07. Tạo layout chung cho các Routes.mp4.mp4

09:54
08. Sử dụng Link trong React Router.mp4.mp4

05:47
09. Cải thiện UX với hiệu ứng Loading.mp4.mp4

10:57
10. Clean code – Tách Banner thành 1 component riêng.mp4.mp4

05:11
11. Xây dựng UI cho Actor List (Phần 1).mp4.mp4

06:51
12. Xây dựng UI cho Actor List (Phần 2).mp4.mp4

10:27
13. Xây dựng UI cho Actor List (Phần 3).mp4.mp4

07:42
14. Cấu hình alias cho các đường dẫn.mp4.mp4

10:36
15. Xây dựng Related Movie List component.mp4.mp4

09:55
16. Cải thiện UI.mp4.mp4

10:28
17. Xây dựng Movie Information component.mp4.mp4

08:03

Phần 11. Cải thiện chất lượng code

Phần 12. Xây dựng trang TVShow Detail

01. Thêm route mới cho TVShow Detail.mp4.mp4

00:41
02. Refactor Banner component.mp4.mp4

04:48
03. Xử lý render danh sách Crews.mp4.mp4

01:06
04. Xử lý render danh sách diễn viên.mp4.mp4

16:44
05. Xử lý danh sách các TVShow liên quan

16:44
06. Xây dựng TV Show Information component.mp4.mp4

08:17
07. Xây dựng Season List component.mp4.mp4

13:30
08. Bài tập cho phần Season List.mp4.mp4

06:25
09. Cải thiện UI.mp4.mp4

00:51
10. Tạo ModalContext xử lý popup.mp4.mp4

11:41
11. Xử lý mở Trailer trong TV Show Detail.mp4.mp4

04:27
12. Tuỳ biến useFetch để trì hoãn việc gọi API.mp4.mp4

04:55
13. Cập nhật Link cho FeatureMovie.mp4.mp4

04:31
14. Tối ưu ModalContext.mp4.mp4

12:35
15. Bài tập cho phần Home page.mp4.mp4

09:45
Bản sao của 16.mp4

06:39

Phần 13. Xây dựng trang People Page

01. Xây dựng UI cho People Page.mp4.mp4

02:39
02. Tạo custom class name trong Tailwind CSS.mp4.mp4

12:15
03. Gọi API với loader trong React Router.mp4.mp4

17:28
04. Load dữ liệu thực tế cho People Page.mp4.mp4

05:37
05. Cải thiện UI.mp4.mp4

11:12
06. [Lý thuyết] Kĩ thuật Code Spliting trong React.mp4.mp4

11:12
07. Áp dụng kĩ thuật Code Spliting (Lazy Import Component) tối ưu hiệu năng.mp4.mp4

05:02
08. Áp dụng Lazy Import cho tất cả Routes còn lại.mp4.mp4

04:04

Phần 14. Xây dựng trang Search Page

Bài 1

03:43
Bài 10

09:15
Bài 11

02:14
Bài 2

03:43
Bài 3

12:24
Bài 4

08:18
Bài 5

02:04
Bài 6

01:36
Bài 7

05:03
Bài 8

16:38
Bài 9

09:08

Phần 15. Cấu hình dự án WeConnect

Bài 1

16:51
01. Cấu hình RTK Query và Tạo endpoint đăng kí.mp4 2025-03-24 13_45.mp4

26:31
Bài 10

03:08
Bài 11

09:59
Bài 12

07:49
Bài 13

09:15
Bài 14

13:01
Bài 15

03:17
Bài 2

31:57
Bài 3

32:19
Bài 4

32:19
Bài 5

04:55
Bài 6

05:44
Bài 7

03:44
Bài 8

04:51
Bài 9

05:20

Phần 16. Xác thực người dùng (Authentication)

02. Xây dựng và xử lý thông báo với Snackbar.mp4 2025-03-24 13_45.mp4

27:42
03. Xử lý validation cho React Hook Form.mp4 2025-03-24 13_45.mp4

11:19
04. Thêm endpoint xử lý login.mp4 2025-03-24 13_45.mp4

13:09
05. Thêm endpoint xử lý OTP.mp4 2025-03-24 13_45.mp4

13:20
06. Xử lý Protected Routes.mp4 2025-03-24 14_21.mp4

27:34
07. Cấu hình Redux Persist.mp4 2025-03-24 14_21.mp4

11:26
08. Custom Base Query để xử lý Token hết hạn.mp4 2025-03-24 14_21.mp4

13:33
09. Lưu thông tin người dùng vào Store.mp4 2025-03-24 14_21.mp4

05:32

Phần 17. Xây dựng trang New Feed

01. Xây dựng UI cho Header.mp4 2025-03-24 15_11.mp4

17:26
02. Hiển thị thông tin người dùng.mp4 2025-03-24 14_53.mp4

04:45
03. Xử lý log out.mp4 2025-03-24 14_53.mp4

05:23
04. Fix lỗi trong console.mp4 2025-03-24 14_54.mp4

01:56
05. Xây dựng Sidebar trên giao diện Desktop.mp4 2025-03-24 15_12.mp4

15:59
06. Xây dựng Sidebar trên giao diện Mobile.mp4 2025-03-24 15_12.mp4

16:45
07. Cấu hình thống nhất breakpoints giữa Tailwind và MUI.mp4 2025-03-24 15_12.mp4

01:50
08. Xây dựng UI cho Post Creation.mp4 2025-03-24 15_12.mp4

33:11
09. Cải thiện UI cho Post Creation.mp4 2025-03-24 15_27.mp4

10:37
10. Tạo custom hook useDetectLayout.mp4 2025-03-24 15_27.mp4

06:08
11. Tích hợp API tạo Post mới.mp4 2025-03-24 15_28.mp4

12:28
12. Xử lý upload ảnh.mp4 2025-03-24 15_34.mp4

07:06
13. Xử lý Refresh Token.mp4 2025-03-24 15_34.mp4

15:54
14. Xây dựng UI cho Post component.mp4 2025-03-24 15_34.mp4

17:53
15. Tích hợp API get Post List.mp4 2025-03-24 15_34.mp4

04:29
16. Cách sử dụng Tag trong RTK Query.mp4 2025-03-24 15_34.mp4

05:04
17. Tạo loading animation với Framer Motion.mp4 2025-03-24 15_46.mp4

09:47
18. Phân tích kĩ thuật Lazy Load.mp4 2025-03-24 15_42.mp4

03:56
19. Thêm params xử lý lazy load cho API get posts.mp4 2025-03-24 15_46.mp4

09:26
20. Phân tích công thức gọi API cho lazy load.mp4 2025-03-24 15_46.mp4

07:52

Người hướng dẫn

Onlica

4.6

287 Học viên

173 Khoá học

Thời lượng 04 giờ48 phút
Lần cập nhật 10/04/2025

Sale

Khóa Học Data Science Machine Learning Python Cùng Việt nguyễn Ai

13 Bài học

27 giờ54 phút

Onlica

~~10.000.000 ₫~~ 299.000 ₫

Sale

Khóa học HTML CSS từ cơ bản đến nâng cao 2023 (Sass)

135 Bài học

07 giờ

Onlica

~~700.000 ₫~~ 99.000 ₫

Sale

Bộ Khóa Học Data Analytics 2023 Cùng Mindx

46 Bài học

106 giờ10 phút

Onlica

~~25.000.000 ₫~~ 899.000 ₫

Sale

Khóa Học Lập Trình Thi Đấu 28Tech

37 Bài học

09 giờ35 phút

Onlica

~~5.000.000 ₫~~ 199.000 ₫

Danh mục nổi bật

Danh mục khác

Khám phá

1000+ khoá học

mới nhất

Khóa học React PRO | Trở thành lập trình viên React giá trị Cùng HoleTex

Về khoá học

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

Đối tượng

Nội dung khoá học

Phần 1. Giới thiệu

01. Giới thiệu khoá học

02. Hướng dẫn sử dụng Github theo dõi code

Phần 2. Kiến thức nền tảng trước khi học React

01. Cách trình duyệt web hoạt động

02. Client Side Rendering vs Server Side Rendering

03. JavaScript Array Methods

04. Tính năng trong ES6

05. Callback, Promise, Async Await trong JS

06. Toán tử Nullish Coalescing và Optional Chaining

07. Flexbox trong CSS

08. CSS Grid

09. So sánh Cookies, Local Storage và Session Storage

Phần 3. Cấu hình dự án

01. Cài đặt môi trường làm việc

02. Cài đặt dự án với Vite

03. Dọn dẹp source code ban đầu

Phần 4. React nền tảng

01. Giới thiệu dự án Todo App

02. Component là gì

03. Xây dựng danh sách việc cần làm

04. Phân tích và tạo 1 component mới – Todo Item

05. [Lý thuyết] Cú pháp JSX trong React

06. Truyền dữ liệu vào component bằng props

07. Style component bằng CSS

08. Sử dụng JavaScript trong JSX với {}

09.Lưu ý về sử dụng key với list

10.Lý do không nên dùng index làm key

11.Xử lý sự kiện trong React

12.Hooks là gì.mp4

13.Vấn đề với biến JavaScript thông thường.mp4_2

14.Giải quyết vấn đề với biến JavaScript bằng State.mp4

15.State – bộ nhớ của Component hoạt động thế nào.mp4

16.Cách React xử lý khi có nhiều State.mp4_3

17.Thao tác DOM với Ref.mp4_2

18.Render component theo điều kiện.mp4

19.Xử lý sự kiện cho complete checkbox.mp4

20.Style cho Sidebar component.mp4

21.Xử lý ẩn hiện Sidebar

22.Xử lý Todo Item đang được lựa chọn.mp4_2

23. Hoàn thiện chức năng cho Sidebar

24. Vấn đề với Event Propagation.mp4_2

Phần 5. Xây dựng Filter Panel

01. Xây dựng UI cho Filter Type component.mp4.mp4.mp4

02. Lưu thông tin Filter Type đang lựa chọn.mp4.mp4

03. Kĩ thuật Lifting State Up.mp4.mp4

04. Thêm logic xử lý filter TodoList theo Filter Type được chọn.mp4.mp4

05. Cấu hình và fix lỗi ESLint.mp4.mp4

06. Fix 1 số lỗi trong console.mp4.mp4

07. Tính số lượng todos cho từng Filter Type.mp4.mp4

08. [Lý thuyết] useMemo vs useCallback.mp4.mp4

09. Tối ưu performance bằng useMemo.mp4.mp4

10. Xử lý tìm kiếm Todo theo tên.mp4.mp4

11. Xây dựng UI cho Categories.mp4.mp4

12. Thêm logic xử lý lưu Category cho từng Todo.mp4.mp4

13. [Lý thuyết] Context API là gì – Cách sử dụng useContext.mp4.mp4

14. Thêm Context API để quản lý State tập trung.mp4.mp4

15. Xử lý Filter theo Category.mp4.mp4

16. Bài tập – Dọn dẹp lại các State với Context API.mp4.mp4

17. Hiển thị số lượng Todo theo Category.mp4.mp4

18. Giải bài tập – Dọn dẹp State với Context API.mp4.mp4

Phần 6. Cấu hình dự án nâng cao – Movie App

01. Giới thiệu dự án Movie App.mp4.mp4

02. Cấu hình dự án với Vite.mp4.mp4

03. Cấu hình TailwindCSS.mp4.mp4

04. Cấu hình font cho dự án.mp4.mp4

05. Cài đặt FontAwesome cho React.mp4.mp4

Phần 7. Sử dụng Tailwind CSS để xây dựng UI

01. Xây dựng UI cho Header.mp4.mp4

02. Xây dựng FeatureMovies component – Code markup.mp4.mp4