Dynamic Rendering of React Components inside static HTML pages

Imagine you have some small widgets, written in React, you want to use on a static - non-react-driven - page. The Widgets, accepting input params, could look like:

import React from 'react';

export default function YourComponentA({

This pattern can help using (many) React Components (Widgets for example) on a static html page:

import React from 'react';
import ReactDOM from 'react-dom'

import YourComponentA from './YourComponentA';
import YourComponentB from './YourComponentB';

const registeredComponents = {
  'ComponentA': YourComponentA,
  'ComponentB': YourComponentB,

window.renderReactComponent = (elementID: String, reactComponentName: String, reactComponentProps: any) => {
  $( document ).ready(function() {
    var rootElement = document.getElementById(elementID);
    if (rootElement !== null) {
      var comps = [{
        componentName: registeredComponents[reactComponentName],
        props: reactComponentProps
            comps.map((obj, i) => {
                var ComponentName = obj.componentName;
                return <ComponentName key={`${reactComponentName}-${i}`} {...obj.props} />
    } else {
      console.log(`${reactComponentName} could not be rendered into: #${elementID}.`);

Now you can use many components, to be rendered inside an existing DIV, and pass params individual to them..

<div id="comp-a-1"></div>
<div id="comp-b-1"></div>
<div id="comp-a-2"></div>

  $( document ).ready(function() {
    window.renderReactComponent('comp-a-1', 'ComponentA', { param1: 'a11', param2: 'a21' });
    window.renderReactComponent('comp-a-2', 'ComponentA', { param1: 'a12', param2: 'a22' });
    window.renderReactComponent('comp-b-1', 'ComponentB', { param1: 'b11', param2: 'b21' });