How to embed react in a separate page?

Question

React

I have several web applications in which, for example, I need to implement a complex form or grid. How to connect React so that they can render the content I need, because if you write in pure js, you get porridge?

Answer 1

At the application entry point (app.js(x)) of your page, declare a function and pass props for initialization and call `render` from `react-dom`.

window.renderView = function (data) {
  render(<App
    foo={data.foo}
    bar={data.bar}
  />, document.getElementById('app'));
};

On the page, create a container for your application and call our 'renderView' function

<div id="app"></div>
<script>
renderView({
    foo: 1,
    bar: 'prop'
})
</script>

How you will include the babel-built "bundle" depends on the architecture of your application, but it should load from this page.