Hackforge Academy

Explanation

Micro Frontend with React means dividing a large React application into smaller independent React applications. Each application can own a specific business feature such as products, cart, or payments.

Code:

Main Application
├── Product App → React
├── Cart App    → React
├── Payment App → React
└── Account App → React

Explanation

Each micro frontend can be developed as a separate React project with its own source code, dependencies, testing, and deployment process.

Code:

// product-app/src/App.jsx
function App() {
  return <h1>Products</h1>;
}

export default App;

Explanation

A shell application acts as the host application and provides the common layout, navigation, authentication, and integration point for different React micro frontends.

Code:

function App() {
  return (
    <>
      <Header />
      <Navigation />
      <ProductApp />
      <CartApp />
    </>
  );
}

Explanation

React micro frontends can be built and deployed independently. For example, the product team can release changes without rebuilding the cart or payment applications.

Code:

Product Team
   ↓
npm run build
   ↓
Deploy Product App

Cart App remains unchanged.

Explanation

A complete React micro frontend system typically contains a shell application and multiple independently managed React applications that work together to provide one user experience.

Code:

                 React Shell
                     │
       ┌─────────────┼─────────────┐
       ↓             ↓             ↓
  Product App     Cart App     Payment App
       │             │             │
       └─────────────┼─────────────┘
                     ↓
                Backend APIs