#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

#Key API Overview

#Producer API

createBridgeComponent: wraps a React application as a Bridge component (application component) so consumers can load it remotely. Choose the import path that matches the React version used by the producer project:

shared: {
  'react-dom/': {
    singleton: true,
  },
}

#Consumer API

#💡 Examples

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