Tối ưu Kiến trúc Component React với TypeScript: Áp dụng Design Patterns cho ứng dụng Front-End quy mô lớn
Trong thế giới phát triển Front-End hiện đại, ReactJS đã trở thành một thư viện không thể thiếu để xây dựng giao diện ng...
Đọc thêmLập trình Front-End với ReactJS + TypeScript
ReactJS là 1 thư viện JavaScript mã nguồn mở được phát triển bởi đội ngũ kỹ sư đến từ Facebook; nó được giới thiệu vào năm 2011.
Nguyên lý xây dựng của React dựa trên components (component-based approach), có thể tái sử dụng và phù hợp với ứng dụng 1 trang (Single Page Application – SPA). React giúp lập trình viên xây dựng giao diện người dùng dựa trên JSX (môt cú pháp mở rộng của JavaScript), tạo ra các DOM ảo (virtual DOM) để tối ưu việc render 1 trang web.
Khóa học ReactJS được xây dựng và hướng dẫn bởi Hoàng An Unicode giúp học viên trang bị cho mình kiến thức cần thiết nhất để đi làm với thư viện này. Cuối khóa học bạn sẽ được hướng dẫn xây dựng 1 dự án hoàn chỉnh hoàn toàn bằng thư viện ReactJS.
Video giới thiệu dự án Threads Clone
https://www.youtube.com/watch?v=X33NgnQ2P4g
Bạn nhận được gì tại khóa học?
► Kiến thức căn bản nhất về React JS
► Hiểu rõ bản chất cách hoạt động của các thành phần trong React JS thông qua Class Component
► Rèn luyện tư duy lập trình qua các Case Study được phân tích trong khóa học
► Làm việc với RESTful API
► Làm việc với các React Hook từ cơ bản đến nâng cao
► Biết cách tự xây dựng hệ thống quản lý Global State
► Biết cách tự xây dựng Hook riêng trong React JS
► Làm việc với React Router DOM
► Các kỹ thuật làm việc với Assets và các thư viện bên thứ ba
► Làm việc với React Hook Form
► Kỹ thuật xử lý Authentication - Authorization (JWT) từ cơ bản đến nâng cao
► Tích hợp các thư viện xử lý Authentication bên thứ ba: Auth0, Firebase, Clerk,...
► Kỹ thuật làm việc với thư viện Redux, Redux Toolkit, Redux Toolkit Query
► Kỹ thuật làm việc với SWR, React Query (Tanstack Query)
► Kỹ thuật xử lý với styled components, Framer Motion, i18n, Socket.IO, Testing,...
► Biết cách kết hợp Typescript vào ứng dụng ReactJS
► Và rất nhiều kiến thức, công nghệ, thư viện phổ biến được chia sẻ trong khóa học
Câu hỏi thường gặp
Khóa học này cần kiến thức nền gì không?
ReactJS là thư viện của JavaScript nên bạn cần có kiến thức vững chắc về JavaScript và HTML-CSS. Bạn vui lòng xem bài giảng miễn phí "Kiến thức cần chuẩn bị trước khi học ReactJS"
Tôi không biết về TypeScript có học được không?
Được, trong khóa học bạn sẽ được hướng dẫn về TypeScript và từ sau module TypeScript mình mới áp dụng trong các bài hướng dẫn. Còn các nội dụng trước vẫn sử dụng JavaScript
Nên sử dụng Vite hay Create React App?
Ở thời điểm hiện tại, Vite được chuộng hơn nên bạn có thể sử dụng Vite luôn từ khi bắt đầu khóa học. Phần đầu khóa học mình sử dụng Create React App vì vấn đề thời điểm quay, tỷ lệ sử dụng Create React App vẫn phổ biến
Trong quá trình học, tôi có được hỏi giảng viên không?
Được, nếu gặp khó khăn bạn có thể nhắn tin trực tiếp cho giảng viên qua Zalo hoặc trên group được tham gia
Tôi cần cài đặt những phần mềm/công cụ gì để học?
Để học ReactJS bạn cần sử dụng phần mềm Visual Studio Code để viết code và cài đặt NodeJS trên máy tính. Bạn có thể sử dụng phần mềm viết code khác nếu phù hợp
Trong bài giảng bạn dùng phần mềm nào để hướng dẫn học viên?
Trong khóa học mình đang sử dụng phần mềm Visual Studio Code để viết code, mình cũng khuyên bạn sử dụng phần mềm này vì nó hỗ trợ rất mạnh cho Front-End
Trong khóa học đang hướng dẫn ở phiên bản ReactJS bao nhiêu?
Trong khóa học, mình hướng dẫn trên ReactJS 18 và bắt đầu từ class để học viên hiểu được tư duy và luồng chạy của ReactJS
Khóa học này còn phù hợp với thời điểm hiện tại không?
Khóa học rất phù hợp với thời điểm hiện tại, vì phần lớn nội dung khóa học từ phần React Hook được quay trong năm 2024
Khóa học này có được cập nhật trong tương lai không?
Có bạn nhé. Mình sẽ cập nhật những kiến thức mới, tư duy mới trong ReactJS phù hợp với nhu cầu tuyển dụng
Học tập linh hoạt
Chỉ cần máy tính kết nối Internet, bạn có thể học bất kỳ nơi nào, bất kỳ lúc nào bạn muốn
Học thử miễn phí
Unicode Academy cho phép học viên học thử số lượng lớn bài giảng miễn phí để học viên trải nghiệm trước khi quyết định
Truy cập tài nguyên
Unicode không giới hạn truy cập tài nguyên trong khóa học, bạn sẽ được sở hữu toàn bộ tài nguyên trong khóa học
Hỗ trợ khóa học
Học viên sẽ được hỗ trợ trực tiếp ở mỗi bài giảng thông qua chức năng "Hỏi đáp", ngoài ra bạn có thể liên hệ qua các kênh khác
Nội dung khóa học
Tất cả các khóa học đều được chia sẻ dựa trên kinh nghiệm thực tế của Unicode Academy và các kiến thức đều chuyên sâu mà bạn khó có thể tìm thấy ở nơi khác
Cập nhật thường xuyên
Các bài giảng trên hệ thống đều được cập nhật liên tục phù hợp với tình hình thực tế của thị trường, học viên được sở hữu miễn phí các bài giảng đó
Nội dung chi tiết
- 09:21
- 16:38
- 11:15
- 15:31
- 15:45
- 09:48
- 17:41
- 09:52
- 09:38
- 10:36
- 12:52
- 14:29
- 12:20
- 11:06
- 17:13
- 12:59
- 10:28
- 31:39
- 17:39
- 16:11
- 23:51
- 07:46
- 13:51
- 07:13
- 13:08
- 18:02
- 18:58
- 06:35
- 15:38
- 09:38
- 08:52
- 18:57
- 16:30
- 17:38
- 11:28
- 13:55
- 12:09
- 11:05
- 12:27
- 09:45
- 12:56
- 08:28
- 21:12
- 09:14
- 22:05
- 12:42
- 11:33
- 08:37
- 16:26
- 08:05
- 14:01
- 13:39
- 16:37
- 12:01
- 14:28
- 19:40
- 11:47
- 09:14
- 20:32
- 13:40
- 12:52
- 25:41
- 10:41
- 13:13
- 09:04
- 15:49
- 16:19
- 20:09
- 13:40
- 06:17
- 07:30
- 15:10
- 08:46
- 17:20
- 10:56
- 06:24
- 08:20
- 08:07
- 08:06
- 09:56
- 07:49
- 09:04
- 02:38
- 02:40
- 07:50
- 06:27
- 04:23
- 15:09
- 04:29
- 12:03
- 07:37
- 08:30
- 07:31
- 13:47
- 11:48
- 14:59
- 07:17
- 07:53
- 06:36
- 06:47
- 08:17
- 10:39
- 03:30
- 11:09
- 15:24
- 12:34
- 10:31
- 05:12
- 09:53
- 06:42
- 07:49
- 17:41
- 10:24
- 05:56
- 12:18
- 11:43
- 03:55
- 13:17
- 14:02
- 22:52
- 19:43
- 23:47
- 11:24
- 16:57
- 17:13
- 09:31
- 17:07
- 08:02
- 08:03
- 24:56
- 12:53
- 13:37
- 22:27
- 11:31
- 09:36
- 28:29
- 16:43
- 13:14
- 25:45
- 08:26
- 12:59
- 08:47
- 23:47
- 16:03
- 23:37
- 09:20
- 14:14
- 19:06
- 19:35
- 28:44
- 18:23
- 13:34
- 14:09
- 12:09
- 19:38
- 30:00
- 06:12
- 10:09
- 25:30
- 07:09
- 09:02
- 12:31
- 09:26
- 13:06
- 14:12
- 17:11
- 19:50
- 10:29
- 20:16
- 21:53
- 21:21
- 13:28
- 07:43
- 16:56
- 13:57
- 10:49
- 05:40
- 12:55
- 14:33
- 08:03
- 11:09
- 04:40
- 08:56
- 06:59
- 06:20
- 08:16
- 05:21
- 11:17
- 11:13
- 08:32
- 04:55
- 13:43
- 07:46
- 06:52
- 03:57
- 10:31
- 03:59
- 14:41
- 07:07
- 10:31
- 13:07
- 17:15
- 19:50
- 05:29
- 05:21
- 14:28
- 07:47
- 06:38
- 05:25
- 04:51
- 11:07
- 10:49
- 18:49
- 15:11
- 11:46
- 12:39
- 16:41
- 16:09
- 07:12
- 13:36
- 20:12
- 06:23
- 08:53
- 14:46
- 11:16
- 10:48
- 09:42
- 29:16
- 20:37
- 20:29
- 23:35
- 13:50
- 13:58
- 13:11
- 23:44
- 08:46
- 11:40
- 09:04
- 16:09
- 08:43
- 15:05
- 07:42
- 09:35
- 07:30
- 04:45
- 08:11
- 13:12
- 22:34
- 21:02
- 09:15
- 13:47
- 14:56
- 17:47
- 07:56
- 16:12
- 08:20
- 20:59
- 23:38
- 26:19
- 11:57
- 15:41
- 16:41
- 11:48
- 22:12
- 15:46
- 22:34
- 12:51
- 11:26
- 21:00
- 10:47
- 21:12
- 21:50
- 31:06
- 07:37
- 16:27
- 08:23
- 13:27
- 16:53
- 13:35
- 16:29
- 11:38
- 06:23
- 14:58
- 20:01
- 11:15
- 10:04
- 11:56
- 06:19
- 06:50
- 07:20
- 15:46
- 09:57
- 12:34
- 12:02
- 08:33
- 10:05
- 11:46
- 12:34
- 25:29
- 21:22
- 20:43
- 17:59
- 06:37
- 11:53
- 14:55
- 11:18
- 18:16
- 10:42
- 14:03
- 14:23
- 14:42
- 10:26
- 27:17
- 36:29
- 20:01
- 15:43
- 16:55
- 22:48
- 24:23
- 17:58
- 19:20
- 23:20
- 12:57
- 22:30
- 15:00
- 23:25
- 13:56
- 26:06
- 20:50
- 13:20
- 13:56
- 18:22
- 23:02
- 11:31
- 33:39
- 12:09
- 25:27
- 22:35
- 15:09
- 09:51
- 32:32
- 18:10
- 17:28
- 15:36
- 23:35
- 24:34
- 16:44
- 14:40
- 26:51
- 10:14
- 24:45
- 17:30
- 21:04
- 25:27
- 17:37
- 31:09
Lịch sử học tập gần đây
| STT | Tên | Bài giảng | Thời gian | |
|---|---|---|---|---|
| 1 | H** **** | ho***@gmail.com | Mutation Pending, Error Handling, Optimistic Updates, Retry | 4 giờ trước |
| 2 | H** **** | ho***@gmail.com | Update Data bằng useMutation và 2 cách Re-render dữ liệu mới | 5 giờ trước |
| 3 | H** **** | ho***@gmail.com | Data Fetching với Dynamic Params | 5 giờ trước |
| 4 | H** **** | ho***@gmail.com | Setup Tanstack Query, Data Fetching bằng useQuery, Error Handling, initialData | 5 giờ trước |
| 5 | H** **** | ho***@gmail.com | Giới thiệu Tanstack Query, tại sao nên học Tanstack Query? | 6 giờ trước |
| 6 | N*** *** | du***@gmail.com | Kiến thức cần chuẩn bị trước khi học ReactJS | 13 giờ trước |
| 7 | h*** *** | ho***@gmail.com | Xử lý sự kiện trong React JS | 14 giờ trước |
| 8 | h*** *** | ho***@gmail.com | Classes Component trong React JS | 16 giờ trước |
| 9 | h*** *** | ho***@gmail.com | Làm việc với Props trong ReactJS - Phần 3 | 16 giờ trước |
| 10 | h*** *** | ho***@gmail.com | Làm việc với Props trong ReactJS - Phần 2 | 17 giờ trước |
Giảng viên
Hoàng An Unicode
CEO & Founder Unicode Academy
👉 12+ năm kinh nghiệm trong lĩnh vực lập trình web, mobile
👉 Đào tạo 2000+ học viên trên bao gồm: Online, Offline, Elearning,...
👉 Sở hữu kênh Youtube về lập trình đạt trên 7k subscriber và trên 1.4 triệu lượt xem
👉 Sở hữu kênh Tiktok về lập trình đạt trên 5k subscriber và trên 1 triệu lượt xem
Kinh nghiệm công tác
- Giảng dạy, điều hành, phát triển Unicode Academy
- Từng đảm nhiệm các vị trí: CEO, Techlead, Project Manager, Business Analyst, Sale, Traning Manager...
- Kinh nghiệm giảng dạy các lớp Offline, Online Meeting, Video Elearning,...
- Kinh nghiệm làm việc với các ngôn ngữ lập trình web, mobile
Thông tin liên hệ
- Facebook: https://facebook.com/anunicode
- Zalo: 0384822896
- Youtube: https://youtube.com/@hoanganunicode
- Tiktok: https://tiktok.com/@hoanganunicode
- Website: https://hoangan.unicode.vn
Câu hỏi thường gặp
Bạn cần chuẩn bị kiến thức vững chắc về JavaScript và HTML-CSS vì ReactJS là một thư viện của JavaScript. Khóa học cũng có sẵn bài giảng đầu tiên về "Kiến thức cần chuẩn bị trước khi học ReactJS" để bạn làm quen
Hoàn toàn được. Các nội dung đầu khóa học sẽ sử dụng JavaScript. Sau đó, khóa học có các module dành riêng (Module 11 và 12) để hướng dẫn TypeScript từ cơ bản đến cách áp dụng TypeScript vào trong dự án ReactJS.
Bạn có thể sử dụng Vite ngay từ khi bắt đầu khóa học vì ở thời điểm hiện tại Vite được ưa chuộng hơn. Khóa học có các bài giảng hướng dẫn sử dụng cả Create React App (ở phần đầu) và cách cài đặt dự án với Vite + SWC
Bạn cần cài đặt NodeJS trên máy tính và phần mềm viết code Visual Studio Code (VS Code). Giảng viên cũng khuyên dùng VS Code vì nó hỗ trợ rất mạnh mẽ cho lập trình Front-End
Khóa học hướng dẫn trên ReactJS 18 và bắt đầu từ Class Component để bạn hiểu rõ tư duy, bản chất và luồng chạy của React. Ngoài ra, khóa học còn có một module (Module 19) cập nhật các kiến thức mới nhất để khám phá ReactJS 19
Có. Bạn sẽ được hỗ trợ 1-1 bởi giảng viên. Nếu gặp khó khăn, bạn có thể nhắn tin trực tiếp qua Zalo, sử dụng chức năng "Hỏi đáp" ngay dưới mỗi bài giảng, hoặc thảo luận trên group kín dành cho học viên
Chắc chắn có. Cuối khóa học, bạn sẽ được hướng dẫn xây dựng một dự án hoàn chỉnh là Threads Clone (bao gồm 51 bài giảng chi tiết). Ngoài ra, xuyên suốt các module, bạn còn thực hành xây dựng nhiều dự án khác như: Ứng dụng quản lý công việc TodoList, Dự án Blog, App Chat Fake và Comment App sử dụng WebSockets
Có, khóa học bao quát rất nhiều công nghệ và thư viện phổ biến như: React Router DOM, React Hook Form, Redux Toolkit, SWR, Tanstack Query, Auth0 (Single Sign-On),...Bạn cũng sẽ được học các kỹ năng chuyên sâu như xử lý đa ngôn ngữ (i18n), WebSockets với Socket.IO/Pusher, và Unit Test trong ReactJS
Bạn được truy cập không giới hạn, sở hữu toàn bộ tài nguyên khóa học vĩnh viễn. Nội dung cũng sẽ được cập nhật thường xuyên những tư duy, kiến thức mới theo sát với nhu cầu tuyển dụng hiện tại
Bài viết mới nhất
Chiến lược giảm bundle size và tối ưu thời gian tải cho ứng dụng React + TypeScript
Giới thiệu Trong môi trường SPA (Single Page Application) hiện đại, bundle size đóng vai trò quyết định tới trải nghi...
Đọc thêm
So sánh và tối ưu State Management trong React + TypeScript: Redux Toolkit, Zustand và Jotai
Giới thiệu chung về State Management trong React Trong các ứng dụng React hiện đại, việc quản lý trạng thái (state) k...
Đọc thêm
Chiến lược Lazy Loading và Code Splitting trong React: Tối ưu hiệu năng UI cho ứng dụng SPA
Giới thiệu về vấn đề tải tài nguyên trong React SPA Trong các ứng dụng Single Page Application (SPA) được xây dựng bằ...
Đọc thêm
Tối ưu hoá render trong React bằng useMemo và React.memo
Giới thiệu Trong các ứng dụng React, việc render lại các component không cần thiết có thể gây giảm hiệu năng, đặc biệt k...
Đọc thêm
Cấu Trúc Thư Mục React Cho Người Mới Bắt Đầu
Khi mới học React, hầu hết mọi người đều bắt đầu với một dự án đơn giản: một thư mục src/ chứa vài file .jsx nằm lộn xộn...
Đọc thêmCảm nhận học viên
V
Võ Văn Minh
9 tháng trướcPerfect! Không thể tốt hơn
Đây là khóa học tốt nhất mà tôi từng tham gia. Mọi thứ đều hoàn hảo từ nội dung, phương pháp giảng dạy đến sự hỗ trợ của giảng viên. 5 sao không thể nói hết được sự hài lòng của tôi!
V
Võ Văn Minh
9 tháng trướcNội dung phong phú, đáng học
Khóa học có nội dung rất phong phú và đa dạng. Tôi đã nắm được những kiến thức quan trọng và có thể áp dụng vào thực tế. Giá cả hợp lý so với chất lượng. Recommend!
P
Phạm Thị Duyên
9 tháng trướcTuyệt vời, học lại nhiều lần vẫn hay
Tôi đã xem lại khóa học này nhiều lần và mỗi lần đều học được điều mới. Nội dung sâu sắc, có chiều sâu. Giảng viên giỏi, nhiệt tình. Đây là khóa học đáng giá nhất tôi từng học.
V
Vũ Thị Phương
9 tháng trướcPerfect! Không thể tốt hơn
Đây là khóa học tốt nhất mà tôi từng tham gia. Mọi thứ đều hoàn hảo từ nội dung, phương pháp giảng dạy đến sự hỗ trợ của giảng viên. 5 sao không thể nói hết được sự hài lòng của tôi!
V
Vũ Thị Phương
9 tháng trướcXuất sắc! Vượt mong đợi
Khóa học này thực sự vượt xa mong đợi của tôi. Cách trình bày logic, dễ hiểu, có nhiều ví dụ thực tế. Tôi đã áp dụng được ngay vào công việc. Cảm ơn giảng viên rất nhiều!
Lập trình Front-End với ReactJS + TypeScript
Giảng viên: Hoàng An Unicode
Thời lượng: 83 giờ 38 phút
Cập nhật lần cuối: 1 tháng trước
Học trên mọi thiết bị
Code mẫu, tài liệu đầy đủ
Hỗ trợ 1-1 bởi giảng viên, nhóm kín
Giới thiệu công việc phù hợp
Thời hạn: Vĩnh viễn
