My First React App » Render a ForrestJS React App

My First React App » Render a ForrestJS React App

Render a ForrestJS React App

A classic CRA App uses import to build a static tree of dependencies that needs to be rendered.

This happens in the /index.js where we use the ReactDOM.render() API to initiate the rendering of our root Component (usually /App.js).

In a ForrestJS App things are a bit different, as we use the /index.js as the App's Manifest where we simply list the Services and Features that will compose our App's capabilities:

// Import Libraries:
import forrest from '@forrestjs/core';

// Import Services:
import reactRoot from '@forrestjs/react-root';

// Run the ForrestJS App:
forrest
  .run({
    trace: 'compact',
    services: [reactRoot],
  })
  .catch((err) => console.error(`Boot: ${err.message}`));

The react-root Service renders the root Component of your App, and provides hooks to customize such component, as well as to apply any number of wrappers.

This source code will render a React App with a default component. The result will be something like:

👉 From now on, it is just a matter of adding Features to our ForrestJS App, much like we do in the backend!

Implement the REACT_ROOT_COMPONENT Extension

In order to customize the root Component of the App, we can write the simplest possible Feature ever:

const customRoot = {
  target: '$REACT_ROOT_COMPONENT',
  handler: { component: () => <div>My Custom Root Component</div> },
};

and then list it into the App's manifest:

forrest
  .run({
    services: [reactRoot],
    features: [customRoot],
  })
  .catch((err) => console.error(`Boot: ${err.message}`));

Here is a preview of the resulting App:

Cleanup From CRA Boilerplate

As we will build a fully custom App using MUI as Component Library, you can now remove all the other CRA boilerplate files from your /src folder.