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 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 ’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 ).

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