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

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

  • Rendering FrintJS Apps with React.js in the Browser and ServerI spent more time on this image than writing this post =DPreviously, 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-domIn 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 pHello…
  • /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…
  • 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…
  • 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…

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. We…

Rendering FrintJS Apps with React.js in the Browser and ServerI spent more time on this image than writing this post =DPreviously, 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-domIn 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 pHello World/p;}render( MyComponent /, 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”/divRendering with frint-reactBefore 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 pHello 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…

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