React Micro-Frontends

Split large apps into smaller, independent pieces.

Module Federation (Webpack 5)

```javascript // webpack.config.js (Host) module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { app1: 'app1@http://localhost:3001/remoteEntry.js' } }) ] };

// webpack.config.js (Remote) module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'app1', filename: 'remoteEntry.js', exposes: { './Button': './src/Button' } }) ] }; ```

Loading Remote Component

```javascript const RemoteButton = React.lazy(() => import('app1/Button'));

function App() { return ( <Suspense fallback="Loading..."> <RemoteButton /> </Suspense> ); } ```

Benefits

- Independent deployment - Technology diversity - Team autonomy - Scalability

Challenges

- Shared dependencies - Communication between apps - Consistent UX - Testing complexity

Remember

- Use for large teams - Independent deployments - Shared state management - Clear boundaries

> Next: Learn animation libraries!