Components

What is a Component?

A component can be any function that renders your view. We use React for creating our Components, and support it officially in frint with the frint-react package.

We do have support for Vue.js, Preact and React Native too via additional packages. But we are going to stick to React for this guide.

How to create a component?

With React:

import React from 'react';

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

Assigning your root component to App

We can do it as a provider, with a special reserved name called component:

import { createApp } from 'frint';

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

Rendering your App

Now that you have an App with a Component, it can be rendered to DOM:

import { render } from 'frint-react';

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

The code above assumes your HTML page markup looks like this:

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
</html>