react-ui.ts

index.html

<div data-component="HelloWorld" data-props='{"what": "World!"}'></div>

react-ui.js

import { createElement } from 'react';
import { render } from 'react-dom';


function HelloWorld({ what }) {
    return <h1>Hello {what}!</h1>;
}


const components = {
    HelloWorld,
};


function initializeComponents() {
    const elements = document.querySelectorAll('[data-component]');
    for (const el of elements) {
        const Component = components[el.dataset.component];
        const props = el.dataset.props ? JSON.parse(el.dataset.props) : {};
        
        render(createElement(Component, props), el);
    }
}

addEventListener('DOMContentLoaded', initializeComponents);