React - Root element

About

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

App

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

  • Rendering an element
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

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

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