Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Advanced React: Design System, Design Patterns, Performance

React Nâng Cao: Hệ Thống Thiết Kế, Mẫu Thiết Kế, Tối Ưu Hiệu Suất

React Nâng Cao: Hệ Thống Thiết Kế, Mẫu Thiết Kế, Tối Ưu Hiệu Suất

Trở thành Lập Trình Viên React Senior bằng cách nắm vững chuyên sâu về Hệ Thống Thiết Kế, Mẫu Thiết Kế, Hiệu Suất, Typescript, v.v.

4.5
(1,449 đánh giá)
14,696 học viên
Giảng viên
CodeLicks Academy
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 1.639.000đ -97%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
21.5 giờ video
190 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

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

Chuyển từ lập trình viên frontend cấp junior/trung cấp lên cấp senior
Học cách phát triển ứng dụng React THEO CÁCH CỦA REACT
Thiết kế và phát triển hệ thống thiết kế cấp doanh nghiệp cho thư viện component có khả năng tái sử dụng và bảo trì cao
Thành thạo các mẫu component nâng cao bao gồm HOC, Container, Custom hooks và lập trình hàm trong ReactJS
Biết khi nào nên sử dụng các mẫu như component được kiểm soát/không kiểm soát thay vì các mẫu thiết kế khác
Tối ưu hóa hiệu suất ứng dụng React bằng các kỹ thuật ghi nhớ (memoization)
Trở thành chuyên gia trong việc xác định các lần render thừa trong dự án React và xử lý chúng bằng các tính năng của React
Hiểu và Sử dụng Typescript theo cách của React như các lập trình viên chuyên nghiệp
Sử dụng React Hooks, Context API và type props để xây dựng ứng dụng Typescript mạnh mẽ, đáng tin cậy và có khả năng mở rộng

Yêu cầu

Yêu cầu kiến thức cơ bản về React

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

Dành cho lập trình viên React muốn phát triển từ cấp độ junior/trung cấp lên cấp độ chuyên gia senior
Lập trình viên front-end muốn khai phá toàn bộ tiềm năng của React

Nội dung khóa học

31 phần • 185 bài giảng
1 Điểm bắt đầu
2 Tổng quan khóa học
3 Yêu cầu
4 Một số giải thích
5 Quy ước đặt tên
1 Giới thiệu
2 Screen Splitter
3 Nâng cao Screen Splitter
4 Danh sách (Lists)
5 Các loại Danh sách
6 Hộp thoại (Modals)
1 Mẫu thiết kế là gì
2 Giới thiệu
3 Thiết lập Server
4 Component Loader cho CurrentUser Data
5 Component Loader cho User Data
6 Component Loader cho Resource Data
7 Component DataSource
8 Container Component với Mẫu Render Props
9 Component Local Storage Data Loader
1 Giới thiệu
2 Uncontrolled Components
3 Controlled Components
4 Controlled Modals
5 Uncontrolled Flows
6 Thu thập Dữ liệu
7 Controlled Flows
1 Giới thiệu
2 Kiểm tra Props với HOC
3 Tải Dữ liệu với HOC
4 Cập nhật Dữ liệu với HOC
5 Xây dựng Form với HOC
6 Nâng cao Mẫu HOC
1 Giới thiệu
2 Lấy dữ liệu người dùng với Custom Hook
3 Lấy dữ liệu nhiều người dùng với Custom Hook
4 Lấy dữ liệu Tài nguyên với Custom Hook
5 Custom Hook tổng quát hơn
1 Giới thiệu
2 Recursive Components
3 Compositions
4 Partial Components
1 Compound Components
2 Observer Pattern
1 React Portals
2 Error Boundaries
3 Giải thích về Keys
4 Event Listeners
5 useLayoutEffect
6 useId
7 useCallback As Ref
8 useDeferredValue
9 useTransition
10 Async React Router
1 Sử dụng Element Prop
2 Tối ưu Context API
3 Sử dụng ít useEffects hơn
1 Kiến trúc Tổng quát
2 Route Components
3 Đóng gói Components và Logic
1 Xây dựng một API Layer
2 API States
3 Nâng cao API States
4 Tránh Hiện tượng Loader Nhấp nháy
5 Trừu tượng hóa API States và Fetching Logic
6 Thêm Logic Hủy Request
7 Ghi nhật ký Lỗi
1 Thiết lập Server và Sửa nhanh hàm withLogger
2 Lấy dữ liệu với React-Query
3 Cập nhật dữ liệu với React-Query
4 Phân trang với React-Query
5 Vô hạn cuộn (Infinite scroll) với React-Query
6 Hủy Query với React-Query
1 Cập nhật bất biến với useImmer
2 Reducer sạch hơn với useImmerReducer
1 Tách Code và Tải Chậm (Code-Splitting & Lazy-Loading)
2 Sử dụng hook useCallback để duy trì tính toàn vẹn tham chiếu
3 Tránh re-render với useMemo
4 State Collocation
5 Ngăn re-render bằng cách nâng component lên
6 Throttling
7 Debouncing
1 Hệ thống thiết kế là gì
2 Tầm quan trọng của việc có hệ thống thiết kế
3 Nhược điểm của hệ thống thiết kế
4 Cơ cấu Nhóm
5 Đối tượng sử dụng hệ thống thiết kế
6 Ví dụ thực tế
7 Các khái niệm chính của hệ thống thiết kế
8 Danh sách kiểm tra thực tế
9 Những sai lầm cần tránh
1 Tổng quan Phần
2 Thực hành Bảng màu trên Figma
3 Thực hành Xây dựng Nút bấm
4 Thực hành Thiết kế Modal
1 Nền tảng Có thể Mở rộng
2 Tạo Component Button
3 Xây dựng Modal
4 Khả năng Tái sử dụng và Đóng gói Kiểu dáng
1 Kết hợp Kiểu dáng (Style Compositions)
2 Đóng gói Kiểu dáng
1 Tổng quan
2 Mẫu Layers
3 Mẫu Split
4 Mẫu Column
5 Mẫu Grid
6 Mẫu Inline-Bundle
7 Mẫu Inline
1 Tổng quan
2 Mẫu Pad
3 Mẫu Center
4 Mẫu Media-Wrapper
5 Mẫu Cover
6 Xem lại Modal
1 Yêu cầu
1 useState
2 State không có giá trị khởi tạo
3 Truyền States và Events Phần 1
4 Truyền States và Events Phần 2
5 Tái cấu trúc Truyền States và Events
6 Gõ kiểu useRef
7 Gõ kiểu Giá trị Trả về của Custom Hook
8 Gõ kiểu States Phức tạp
9 Gõ kiểu States Phức tạp Phần 2
10 Tuples với Custom Hooks
1 Gõ kiểu Reducers
2 Truyền Dispatch như một Prop Phần 1
3 Truyền Dispatch như một Prop Phần 2
4 Template Literal Types
5 Action và Reducer Types
1 Context API với Types
1 Utility types
2 Generics với Template Literals
3 Thêm về Generics
4 Xây dựng Context với Generics
5 Sử dụng Custom Context
6 Xây dựng Type Helper
7 Một Type Helper khác
8 Ràng buộc Generics (Generic Constraints)
9 Gõ kiểu Hook với Generics
10 Suy luận Generic Types
11 Generic Components
12 Truyền Types vào Components
13 Xem xét lại Generics
1 Types vs interfaces
2 Function overloads
1 Higher Order components Phần 1
2 Higher Order components Phần 2
3 Render Props
4 Custom Hooks
5 Giới hạn Prop Composition
6 Yêu cầu Prop Composition
1 Render Props
2 Wrapper Component
3 Polymorphic Component
1 Typescript qua Intellisense
2 Định nghĩa Kiểu dữ liệu cho Props
3 Bài tập Chuyển đổi từ JS sang TS
4 Định nghĩa Kiểu dữ liệu cho Children
5 Mở rộng Props bằng Helper Types
6 Props với Các Kiểu Biến thể
7 Props Bắt buộc
8 Phân biệt Các Props
9 Đối tượng Rỗng làm Kiểu dữ liệu
10 Đối tượng Rỗng và Props Bắt buộc
11 Hiểu về ReactNode
12 Liên kết Các Kiểu dữ liệu
13 Tự động hoàn thành Một phần
14 Trích xuất Kiểu dữ liệu với `as const`
15 Props Động
1 Dự án minh họa
2 Cài đặt và chạy mã nguồn demo
3 Giới thiệu về React Profiler
4 Giới thiệu về Quá trình Render trong React
5 Virtual DOM
6 Ngăn chặn Render không cần thiết trong Component Đơn giản
7 Ngăn chặn Render không cần thiết trong Functional Component
8 Ngăn chặn Render không cần thiết khi Props Phức tạp
9 Sử dụng Dữ liệu Bất biến để So sánh Hiệu quả
10 Ngăn chặn Render không cần thiết trong Component Lặp lại
11 Tài nguyên tham khảo
12 Phát hiện Thao tác Tốn kém
13 Giảm Kích thước Bundle
14 Tải Component Chậm (Lazy Loading)
15 Tài nguyên tham khảo

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

Learn to build React projects that stay up-to-date even before they're finished, and discover how to make React applications that are easy to grow and keep up with a system that really works.

If you are exploring this course, chances are high that you’re a React developer looking to level up your skills. In this case, You are in the right place!

The promise of this course is simple: By attending this course you will become the React wizard at your company!

In this course, we touch on unique topics in several modules including, design systems, design patterns, performance optimization, and advanced Typescript with React.

This course explores numerous advanced subjects to guide you in constructing React applications that are maintainable, scalable, and high-performing. It covers topics like scalable project architecture, effective techniques for managing asynchronous operations and API states, advanced component patterns, performance optimization, local and global state management patterns, and more.

If you are a junior or intermediate developer then you will need to master these topics to consider yourself as a senior developer and become ready to apply for senior positions.

All the materials of this course are based on years of experience working on several React projects and every single concept comes with concrete examples.

All the topics are presented with practical real-world examples so you can apply everything in your day-to-day projects right after.


What you will learn:

1 - Advanced Component and Layout Patterns

As a senior software developer, I have identified the topics covered in this module as crucial elements that I seek when interviewing React developer candidates. These patterns can help bridge the gap between being a junior or intermediate developer and becoming a senior React practitioner.

By finishing this part, you'll have the opportunity to explore React's most essential design patterns.

2 - Performance Optimization

Explore many essential techniques for improving and optimizing the performance of your applications to make them blazing-fast and your users amazed - Optimizing Re-renders, Long List Virtualization, Throttling, Denouncing, Code-Splitting & Lazy Loading, and more!

3 - Advanced React Hooks and Concepts

There is also a section about some advanced concepts and hooks and their use-cases as they can help you tackle some challenges in the related scenarios.

4 - Advanced State Management Techniques

Master advanced state management techniques that will allow you to easily manage, share and reuse stateful data in your application. Explore patterns to manage state in a clean, readable and scalable fashion and take advantage of hooks, Immer and Context API.

5 - Scalable Architecture

Learn how to create scalable architecture for your React applications that is actually easy to manage and extend.

6 - Efficiently handle API requests and manage API states at scalable

Learn advanced patterns for managing async operations, API states, and request cancellation by implementing a flexible and scalable API layer and combining it with React-Query.

7 - Design System and Encapsulating Styles

Managing large-scale projects is not just about coding components. Developing endless components without losing track requires solid design systems to guarantee the reusability and maintainability of every element of the project. We will walk you through the concepts and theory, then we develop some basic components in Figma and finally, we build an extensible foundation of design in ReactJS. So you build a mindset of how to design and develop a clean and reusable design system. The greater focus of this module will be on encapsulating styles to guarantee more reusability across your component library.

8 - Clean Code Tips

We also teach you some tips about clean code in React. In this section we explore concepts such As props along with optimizing some performance issues with the Context API.

9 - Advanced Typescript

Last but not least, we explore Typescript the React way! In this module you will learn how to effectively use TypeScript with React components, ensuring that you utilize the appropriate properties. Additionally, discover how to employ the Context API, React Hooks, and type props in order to develop more resilient and type-safe applications on a larger scale!


So long story short, if you wish to tackle all these interesting topics and bring your skills to the next level, then join me in this course!

This course will be under continues progress and more modules will be added based on the students feedbacks!

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 Javascript
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Ui Ux Design
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊