React - Multiple Root

About

This page shows how to render multiple root in the same web page

Demo

This demo shows you how to render twice the same root.

You can also create two differents root element (See the build section) but for the simplicity of the demo we don't.

  • The HTML with two div elements where we will render the same React component (called a root) with two differents arguments:
    • respectively foo
    • and bar
<div id="react-foo"></div>
<div id="react-bar"></div>
function HelloComponent(props) {
   return React.createElement("h1",{},`Hello ${props.name}!`);
}
  • The rendering
// if you load the react element in a async script
window.addEventListener("load", function () {

   /**
   * Hello Foo
   */
   // Make a react element from the React component function
   let fooElement = React.createElement(HelloComponent, {name: "Foo"});
   // In which html tag, the element should render
   const fooContainer = document.getElementById("react-foo");
   // render foo
   ReactDOM.render(fooElement, fooContainer);
   
   /**
   * Hello Bar
   */
   let barElement = React.createElement(HelloComponent, {name: "Bar"});
   const barContainer = document.getElementById("react-bar");
   ReactDOM.render(barElement , barContainer);

});
  • Output

Building multiple root

You may also not want to show the same component but to show other root. 1) This example shows you how to create two bundles with webpack with Commons chunk to share code (in this case the UI components)

The two apps (app1.js,app2.js) would render their own root.

module.exports = {
    entry: {
     vendor: ["@material-ui/styles"],
      app1: "./src/app.1.js",
      app2: "./src/app.2.js",
    },
    plugins: [
     new webpack.optimize.CommonsChunkPlugin({
       name: "vendor",
       minChunks: Infinity,
     }),
    ]
  }

Documentation / Reference


Powered by ComboStrap