# Create a React Micro Frontend

# Prerequisites

A working instance of Entando
Verify dependencies with the Entando CLI: ent check-env develop

# Create a React App in an Entando Bundle

# Create the Bundle Project

Initialize a new bundle project with the default files and folders:
```
ent bundle init simple-bundle
```
From the root bundle folder, add an MFE to the bundle project:
```
cd simple-bundle
ent bundle mfe add simple-mfe
```

# Create a Simple React App

Create React App (opens new window) allows you to generate a simple app in seconds.

Create a React app in /simple-bundle/microfrontends/:
```
npx create-react-app microfrontends/simple-mfe --use-npm
```
Assign the same bundle name you chose when adding an MFE to overwrite the empty "simple-mfe" folder.
From the root bundle folder, start the new app :
```
ent bundle run simple-mfe
```
The React app should open in your browser at http://localhost:3000.

# Configure the Custom Element

The steps below wrap the app component with an HTML custom element. The connectedCallback method renders the React app when the custom element is added to the DOM.

In simple-mfe/src, create a directory named custom-elements

In custom-elements, create a new file named public-path.js with the following code. This will enable your React MFE to serve static assets when deployed in Entando. If you use a different name for your custom element, you should change it on the second line.

if (process.env.NODE_ENV === 'production') {
    let publicpath = window.entando?.widgets['simple-mfe']?.basePath;
    if (publicpath && publicpath.slice(-1) !== '/') {
        publicpath = `${publicpath}/`;
    }
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = publicpath || './';
}

In the same directory, create WidgetElement.js with this code:

import './public-path.js';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from '../App';

class WidgetElement extends HTMLElement {
    connectedCallback() {
        this.mountPoint = document.createElement('div');
        this.appendChild(this.mountPoint);
        const root = ReactDOM.createRoot(this.mountPoint);
        root.render(<App />);
   }
}

customElements.define('simple-mfe', WidgetElement);

Custom Element Names

Must contain a hyphen - in the name (opens new window)
Cannot be a single word
Should follow kebab-case naming convention

# Display the Custom Element

Replace the entire contents of src/index.js with these two lines:

import './index.css';
import './custom-elements/WidgetElement';

In public/index.html, replace <div id="root"></div> with the following:
```
<simple-mfe />
```
Observe your browser automatically redisplay the React app.

Congratulations!

You’re now using a custom element to display a React app.

# Display the React MFE in Entando

Publish the bundle project

Place the React micro frontend onto a page to see it in action.

In the Entando App Builder, go to Pages → Management
Choose an existing page (or create a new one) and select Design from its Actions
Find your widget in the Widgets sidebar and drag it onto the page
Click Publish
Click on View Published Page