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.
With React:
import React from 'react';
function MyComponent() {
return <p>Hello World</p>;
}
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
}
]
});
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>