React - Multiple Root


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


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 ${}!`);
  • 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