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…
Continue reading “Rendering FrintJS Apps with React.js in the Browser and Server”