Micro Frontends

Example Code

```javascript
// src/App.js - The Host Application
import React, { useState, useEffect } from 'react';
import './App.css'; // Assume basic CSS for App and MF container

/
 * This 'Host' application component demonstrates loading a Micro Frontend (MF)
 * component dynamically at runtime. For a real-world scenario, 'remote-mf.js'
 * would be a completely separate React application (or component library)
 * built and deployed independently. It would expose its main component
 * to the global scope (e.g., window.RemoteMFApp.HelloWorld).
 *
 * This example simulates dynamic script loading and then rendering the exposed component.
 */

const App = () => {
  const [RemoteMFComponent, setRemoteMFComponent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadMicroFrontend = async () => {
      try {
        // 1. Create a script element to load the remote micro frontend bundle.
        const script = document.createElement('script');
        // The 'src' should point to the URL where the micro frontend bundle is served.
        // In a real setup, this might be a CDN URL or a specific server endpoint.
        // For this example, we assume 'remote-mf.js' is placed in the public/ directory
        // of the host Create React App project, or served from the root of a server.
        script.src = '/remote-mf.js'; 
        script.async = true; // Load asynchronously to not block initial page render

        // 2. Define event handlers for script loading success and failure.
        script.onload = () => {
          // After the script loads, we expect it to have exposed a component globally.
          // For instance, the remote micro frontend might assign its component to
          // `window.RemoteMFApp.HelloWorld`.
          // This is a simplified approach. More robust solutions like Webpack Module Federation
          // handle this component exposure and consumption more elegantly.
          if (window.RemoteMFApp && window.RemoteMFApp.HelloWorld) {
            console.log('Micro Frontend loaded successfully!');
            // Set the component to state so it can be rendered.
            // Using a function form of `setRemoteMFComponent` is good practice
            // when the new state depends on the previous state or a potentially 
            // dynamic value like a global variable.
            setRemoteMFComponent(() => window.RemoteMFApp.HelloWorld);
          } else {
            console.error('Micro Frontend component not found on window object after script loaded.');
            setError('Failed to find Micro Frontend component.');
          }
          setLoading(false);
        };

        script.onerror = () => {
          console.error('Failed to load Micro Frontend script.');
          setError('Failed to load Micro Frontend script. Check the path and server.');
          setLoading(false);
        };

        // 3. Append the script to the document head to start loading.
        document.head.appendChild(script);

        // 4. Cleanup function: remove the script and any global variables when the host
        //    component unmounts to prevent memory leaks or conflicts.
        return () => {
          if (script.parentNode) {
            document.head.removeChild(script);
          }
          if (window.RemoteMFApp) {
            delete window.RemoteMFApp;
          }
        };
      } catch (e) {
        console.error('An unexpected error occurred during micro frontend loading:', e);
        setError('An unexpected error occurred.');
        setLoading(false);
      }
    };

    loadMicroFrontend();
  }, []); // The empty dependency array ensures this effect runs only once after the initial render.

  return (
    <div className="App">
      <header className="App-header">
        <h1>Host Application</h1>
        <p>This is the main shell application. It dynamically loads a Micro Frontend.</p>
      </header>

      <main>
        <h2>Dynamically Loaded Micro Frontend Content:</h2>
        <div className="micro-frontend-container">
          {loading && <p>Loading Micro Frontend...</p>}
          {error && <p style={{ color: 'red' }}>Error: {error}</p>}
          {/* Render the dynamically loaded component if it's available and no error occurred */}
          {RemoteMFComponent ? (
            <RemoteMFComponent title="Welcome from Remote MF!" />
          ) : (
            !loading && !error && <p>Micro Frontend not yet loaded or failed.</p>
          )}
        </div>
      </main>
    </div>
  );
};

export default App;

/*

--- How to make this example runnable locally with Create React App ---

1.  Create your Host React App:
    `npx create-react-app host-app`
    `cd host-app`

2.  Replace `src/App.js` with the code provided above.

3.  Create the Micro Frontend bundle file (`public/remote-mf.js`):
    Inside the `public/` directory of your `host-app`, create a new file named `remote-mf.js`.
    Paste the following content into `public/remote-mf.js`:

    ```javascript
    // public/remote-mf.js - This simulates the bundled output of a separate MF project.
    // In a real setup, this would be generated by Webpack, Rollup, etc., from its own source.

    // It's crucial that React is available globally or bundled with the MF for this approach.
    // In a real Module Federation setup, React would be shared.
    // For this simple example, we assume React is available via the host app's bundle.
    
    // If React is NOT globally available, you would need to bundle React with this MF
    // or ensure it's exposed globally by the host app (e.g., through a script tag).
    
    // A very simple way to make React available if not shared by the host, for testing:
    // const React = window.React || require('react'); // If you are using CJS format for MF

    // Define the component logic.
    const HelloWorldComponent = ({ title }) => {
      // Using React.createElement directly for simplicity here,
      // but JSX would be used in the MF's original source code.
      return React.createElement(
        'div',
        {
          style: {
            border: '2px dashed #007bff',
            padding: '20px',
            margin: '15px 0',
            borderRadius: '10px',
            backgroundColor: '#eaf6ff',
            color: '#333'
          }
        },
        React.createElement('h3', null, title || 'Hello from Micro Frontend!'),
        React.createElement('p', null, 'This content is rendered by an independently developed and loaded Micro Frontend.'),
        React.createElement(
          'button',
          {
            onClick: () => alert('Button clicked inside the Micro Frontend!')
          },
          'Click MF Button'
        )
      );
    };

    // Expose the component to the global window object so the host can access it.
    // The name 'RemoteMFApp' acts as a namespace to avoid global conflicts.
    window.RemoteMFApp = window.RemoteMFApp || {}; // Ensure namespace exists
    window.RemoteMFApp.HelloWorld = HelloWorldComponent;
    ```

4.  Start your Host React App:
    `npm start`

You should see the 'Host Application' text along with the content from the 'Micro Frontend' displayed below it, demonstrating the dynamic loading and rendering.

Note on React Availability: In a production Micro Frontend setup using tools like Webpack Module Federation, React (and other common libraries) would typically be *shared* between the host and remote applications to avoid duplication and reduce bundle size. In this simplified example, for `public/remote-mf.js` to work, the `window.React` object must be available (which is implicitly true if the host app is a React app and its bundle loads first), or the `remote-mf.js` file would need to include its own React bundle, increasing its size.

This example showcases the *concept* of client-side runtime integration. Real-world Micro Frontend architectures often leverage more sophisticated tools like Webpack Module Federation, single-spa, or custom frameworks for robust module sharing, versioning, and lifecycle management.