#React Bridge Overview

@module-federation/bridge-react is a powerful micro-frontend solution designed specifically for React applications. By providing cross-framework rendering and routing coordination capabilities, you can easily export and load React applications or modules as standalone applications.

#Core Features

#Basic Capabilities

• 🚀 Application-level Module Export: Use createBridgeComponent to wrap complete React applications as remotely loadable modules
• 📦 Application-level Module Loading: Seamlessly integrate remote React applications in host applications through createRemoteAppComponent
• 🎯 Component-level Lazy Loading: Support createLazyComponent for fine-grained component-level lazy loading

#Features

• 🔄 Cross-framework Rendering: Support cross-framework rendering between different frameworks (React, Vue, Angular, etc.)
• 🛣️ Routing Coordination: Automatically handle React Router basename injection and routing context passing
• 🔗 Version Compatibility: Full support for React 16-19, automatically handling rendering differences and lifecycle across versions
• ⚡ Data Prefetch: Built-in resource data prefetch mechanism, supporting application, component, and dependency prefetch optimization

#Why This Matters?

• Progressive Upgrade: Allow different teams to upgrade React versions at their own pace
• Zero-disruption Integration: New and legacy applications can work together seamlessly without synchronized upgrades
• Technical Debt Management: Avoid integration issues caused by version inconsistencies
• Team Autonomy: Each team can independently choose the most suitable React version

#Smart Version Adaptation

React Bridge provides flexible import methods, allowing users to choose appropriate implementations based on their React version:

// Use when explicitly specifying version import { createBridgeComponent } from '@module-federation/bridge-react'; // React 16/17 import { createBridgeComponent } from '@module-federation/bridge-react/18'; // React 18 import { createBridgeComponent } from '@module-federation/bridge-react/19'; // React 19

#💡 Examples

Complete Examples - Complete micro-frontend project containing multiple React applications