React - Root element


The root element of the React DOM tree is the one that is passed to the rendering function React - Rendering (Lifecycle)


In a app, you have at minimal a root rendering. But you may have several root by web pages.

In a web site that use:

  • only react, you would render only one root
  • in another HTML application (php, ruby,…) with templating, you may render several root (for instance to integrate react at several place in another HTML application (php, ruby,…)


  • Rendering an element
function tick() {
  const element = (
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>

setInterval(tick, 1000);
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->

Below React will modify only the time part

Note that the text It is is not modified as React split them in different nodes.

Powered by ComboStrap