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

Microfrontends with React: A Complete Developer's Guide

Microfrontends với React: Hướng dẫn Toàn diện cho Nhà phát triển

Microfrontends với React: Hướng dẫn Toàn diện cho Nhà phát triển

Xây dựng ứng dụng cực kỳ mở rộng được với kiến trúc microfrontend

4.6
(9,709 đánh giá)
66,843 học viên
Giảng viên
Stephen Grider
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
9.0 giờ video
126 bài giảng
2 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 18/03/2026

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

Sử dụng microfrontend để kiến trúc ứng dụng mà hàng chục nhóm có thể cùng làm việc
Tổ chức ứng dụng của bạn để mở rộng tới hàng triệu người dùng
Hiểu cách chia ứng dụng nguyên khối thành nhiều ứng dụng con
Phối hợp dữ liệu trao đổi giữa các microfrontend của bạn
Áp dụng quy trình làm việc kiểu production với pipeline CI/CD đầy đủ
Triển khai microfrontend của bạn lên Amazon Web Services với CloudFront
Cô lập quy tắc định kiểu bằng kỹ thuật phạm vi CSS
Đánh giá microfrontend có phải lựa chọn phù hợp cho ứng dụng của bạn không

Yêu cầu

Hiểu biết cơ bản về React

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

Kỹ sư muốn mở rộng ứng dụng frontend

Nội dung khóa học

13 phần • 124 bài giảng
1 Tài nguyên Khóa học
2 Microfrontend là gì?
3 Tổng quan Ứng dụng
4 Hiểu về Tích hợp Thời điểm Build
5 Tích hợp Thời điểm Chạy
6 Thiết lập Dự án
7 File Dự án Khởi đầu
8 Tạo Sản phẩm
9 Một số Thông tin về Webpack
10 Thêm chút về Webpack
11 Hoàn thành Danh sách Sản phẩm
12 Tạo khung Container
1 Triển khai Module Federation
2 Hiểu về Module Federation
3 Thêm về Module Federation
4 Hiểu các Tùy chọn Cấu hình
5 Tạo khung Giỏ hàng
6 Tích hợp Giỏ hàng
7 Quy trình Phát triển
1 Sử dụng Module Chia sẻ
2 Tải Script Bất đồng bộ
3 Phiên bản Module Chia sẻ
4 Tải Singleton
5 Ngữ cảnh Thực thi Ứng dụng con
6 Tái cấu trúc Sản phẩm
7 Sử dụng Module Từ xa
8 Tái cấu trúc Giỏ hàng
9 [Tùy chọn] Một Lỗi Thú vị
1 Tổng quan Ứng dụng
2 Tech Stack
3 Yêu cầu Ảnh hưởng đến Lựa chọn Kiến trúc
4 File Phụ thuộc
5 Cài đặt Phụ thuộc
6 Cấu hình Webpack Ban đầu
7 Tạo và Hợp nhất Cấu hình Phát triển
8 Chạy Marketing Độc lập
9 Kết nối React
10 Component Marketing
11 Thêm Trang Định giá và Trang Chủ
1 Lắp ráp Component App
2 Lắp ráp Container
3 Tích hợp Container và Marketing
4 Tại sao Import Hàm Mount?
5 Tích hợp Chung
6 Nhắc lại về Module Chia sẻ
7 Ủy quyền Lựa chọn Module Chia sẻ
1 Yêu cầu về Triển khai
2 Lộ trình lên Production
3 Thiết lập Git Ban đầu
4 Cấu hình Webpack Production cho Container
5 Cấu hình Webpack Production cho Marketing
6 Hiểu về Pipeline CI/CD
7 Thay đổi Bắt buộc trong Container Action - Đừng Bỏ qua
8 Tạo Container Action
9 Kiểm tra Pipeline
1 Thiết lập S3 Bucket
2 Tạo Bucket Policy
3 Thay đổi Nhỏ trong AWS CloudFront UI
4 Thiết lập Cloudfront Distribution
5 Thêm chút Cấu hình Cloudfront
6 Cập nhật Tạo Key + Nhắc lại về AWS_DEFAULT_REGION
7 Tạo và Gán Access Key
8 Chạy lại Build
9 Một Lỗi Nhỏ
10 Cài đặt PublicPath của Webpack
1 Vô hiệu Cache Thủ công
2 AWS Region với Vô hiệu Tự động
3 Vô hiệu Tự động
4 Vô hiệu Thành công
5 Thiết lập Triển khai Marketing
6 Nhắc lại về Domain Production
7 Chạy Triển khai
8 Xác minh Triển khai
9 [Tùy chọn] Quy trình Làm việc Kiểu Production
10 Bảng ghi chú Thiết lập và Cấu hình AWS
1 Component Header
2 Thêm Header
3 Vấn đề với CSS trong Microfrontends
4 Kỹ thuật Phạm vi CSS
5 Hiểu về Thư viện CSS trong JS
6 Vậy Lỗi là gì?
7 Sửa Lỗi Trùng Tên Class
8 Xác minh Sửa lỗi
1 Thay đổi Nhỏ Bắt buộc với historyApiFallback
2 Yêu cầu Cứng nhắc về Điều hướng
3 Một số Giải pháp
4 Sử dụng History Implementation nào?
5 Khảo sát Thiết lập History Hiện tại
6 Sử dụng Memory History
7 Tại sao Kết quả Lạ?
8 Giao tiếp giữa các Ứng dụng
9 Giao tiếp qua Callback
10 Đồng bộ Đối tượng History
11 Chạy Memory History Độc lập
12 Giao tiếp Container tới Ứng dụng con
13 Sử dụng Browser History Độc lập
1 Bắt đầu Dự án Auth
2 File Component
3 Thêm Form Đăng nhập và Đăng ký
4 Tìm hiểu Sâu hơn về PublicPath
5 Thay đổi Nhỏ Bắt buộc với historyApiFallback
6 Lần cuối cho PublicPath
7 Tích hợp Auth vào Container
8 Thêm Trạng thái Ban đầu cho Memory History
9 Tải Ứng dụng con Một cách Lười biếng
10 Thêm Thanh Tải
1 Lưu ý Quan trọng về Xác thực
2 Chiến lược Triển khai
3 Thông báo Thay đổi Xác thực
4 Thông báo Trạng thái Xác thực
5 Cho phép Đăng xuất
6 Thêm Cấu hình Triển khai Auth
7 Xác minh Triển khai
1 Thiết lập Dashboard Ban đầu
2 Thêm chút Cấu hình
3 File Component
4 Hiển thị Dashboard
5 Tích hợp với Container
6 Bảo vệ Truy cập Dashboard
7 Triển khai Dashboard
8 Xác minh Triển khai
9 Tổng kết
10 Cập nhật Dự án cho React 19, React Router 6, MUI 5
11 Phần thưởng!

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

Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to use microfrontends!

Thousands of other engineers have learned microfrontends, and you can too. This course uses a time-tested, battle-proven method to make sure you understand exactly how microfrontends work, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.

The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.

Microfrontends are used to divide a large app into a series of smaller apps. This provides a set of unique benefits to any frontend:

  1. Author smaller, easier to understand codebases

  2. Use a different set of libraries for each sub-app - bring the best tool for the job!

  3. Deploy each portion separately - limit the chance of interrupting your users

  4. Allow each of your engineering teams to work independently

This new architecture is popular, but there is a lot of misinformation online. This course has been developed with input from top engineers to ensure total technical accuracy. Additionally, you'll learn how to evaluate whether microservices are a good choice for your application.

----------------------

What will you build?

This course features hundreds of videos with dozens of custom diagrams to help you understand how microfrontends work. No prior experience is necessary. Through tireless, patient explanations and many interesting practical examples, you'll learn the fundamentals of building dynamic and live web apps using microfrontends.

Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge. You'll find plenty of discussion added in to help you understand exactly when and where to use each aspect of microfrontends.

Below is a partial list of the topics you'll find in this course:

  • Learn design patterns used by the largest companies in the world

  • Understand when to use microfrontends

  • Link multiple apps together using a tiered routing system

  • Scope CSS on your page to prevent cross-app contamination

  • Avoid sharing state between apps to promote isolation

  • Deploy each portion of your app independently to avoid production bugs

  • Scaffold a CI/CD pipeline to automate your release process

  • Utilize multiple front-end frameworks in the same app

  • Maximize performance by using module federation

I built this course to save you hundreds of hours of self study. I've put years of my own experience into this course to save you time. Sign up today and join me in mastering microfrontends.

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 Javascript
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 😊