data-component.js

/*
Render as html
<div data-component="Calendar" data-props="<%= json date: Date.today, maxDate: 1.week.from_now %>">
</div>
*/

// during page load
$(document).ready(() => {
  $('[data-components]').each((i, el) => {
    buildReact(el);
  });
});

function buildReact(el) {
  const Compnent = COMPONETS[$(el).data('component')];
  const prop = $(el).data('props');

  ReactDOM.render(<ReactWorld><Component {...prop} /></ReactWorld>, el);
}

// list of react exposed components
const COMPONETS = {
  Calendar: () => <div>Calendar</div>
  // ...
}