Rendering FrintJS Apps with React.js in the Browser and Server

I spent more time on this image than writing this post =D

Previously, I wrote about dependency injection and how providers are set up in FrintJS Apps. Today, we will be using the same APIs and render a FrintJS App with React in the browser and server.

Rendering with react-dom

In the most basic and simple example, we can render a React component like this using ReactDOM:

import React from 'react';
import { render } from 'react-dom';

function MyComponent() {
  return <p>Hello World</p>;
}

render(
  <MyComponent />, 
  document.getElementById('root')
);

We define a component, and then render it using the render function coming from react-dom package by specifying a target node.

The code above assumes you have an HTML element with root as its ID:

<div id="root"></div>

Rendering with frint-react

Before we can render our FrintJS App with a React component, we need to let our App know which component to render.

Let’s create an App first:

import { createApp } from 'frint';

const App = createApp({
  name: 'MyApp',
});

Now we will create a React component, and set it as a provider in our App:

import { createApp } from 'frint';
import React from 'react';

function MyComponent() {
  return <p>Hello World!</p>;
}

const App = createApp({
  name: 'MyApp',
  providers: [
    {
      name: 'component',
      useValue: MyComponent,
    },
  ],
});

It is by convention that we set the React component as a provider by giving it the name component.

The same convention applies for our Vue.js, React Native, and Preact integrations too, as they can be found on our GitHub organization.

Rendering:

Instead of using react-dom directly, we will be using [frint-react](https://frint.js.org/docs/packages/frint-react/) package for rendering our App, which will take care of getting the component out of the app, and then render it accordingly.

import { render } from 'frint-react';

const App = createApp({ ... });

const app = new App();
render(
  app,
  document.getElementById('root')
);

The render function from frint-react follows similar API as found in react-dom. Only difference is that instead of receiving a Component as its first argument, it receives our App’s instance.

What about server-side rendering?

We have it covered already with our frint-react-server package:

import { renderToString } from 'frint-react-server'

const App = createApp({ ... });

const app = new App();
const html = renderToString(app);

This also follows similar API to react-dom’s server-side API.

Why not just use ReactDOM directly?

It’s because [frint-react](https://frint.js.org/docs/packages/frint-react/)’s render function sets the app instance in React’s context, which later allows you to access your App inside your Components using a higher-order component ([observe](https://frint.js.org/docs/packages/frint-react/#observing-components)).

Think of it similar to how Redux does it with their <Provider /> component and connect higher-order component.

This gives developers a lot of flexibility when they need to access certain providers for example, without having to keep passing them as props everywhere.

I will follow up by writing another post soon detailing how to access providers from inside your React components.

You can always read our documentation if you can’t wait =D