Rendering FrintJS Apps with React.js in the Browser and Server
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 andconnect
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