React - ReactDOM.render

About

ReactDOM.render 1) is the main function that renders an element into a DOM element.

It will be:

Note that the rendering is updated when the state changes. See this page for more information about re-rendering: React - Rendering (Lifecycle) Mount and Unmount

Example

Javascript

In Native Javascript, you need to create the element of the virtual dom

// equivalent to `<h2>It is ...</h2>`
let h2 = React.createElement('h2', {key:2}, `It is ${new Date().toLocaleTimeString()}`); 
  • Second Node of the tree: A user element called also component (ie a function with a single object parameters called a props that returns an react element
let welcomeComponent = function (props) { return React.createElement(
    'h1', 
    {key:props.key,className: 'greeting'}, 
    `Hello, ${props.name}!`
    ); 
};
  • The root of the tree with its two children node
// equivalent to `<div><h1><h2> ...</h2></h1></div>`
let root = React.createElement('div',{},
                            [
                               welcomeComponent({key:1,name:"Foo"}), // the user component
                               h2 // the html element
                            ]
); 

// render
ReactDOM.render(root, document.getElementById('root'));
  • The HTML
<div id="root">
<!-- called the "root" DOM node because the rendering of the root node is done inside -->
</div>
  • Result:

When using jsx, the text and the javascript variable of the user component are split into two elements making potential update more granular

Jsx

jsx is a language that compiles to React Javascript and permits to create easily react element in an HTML declarative way.

Demo:

  • Rendering an element (jsx) at interval every second - The tree is created each time to fake an update of the state
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 element. React Render Element Splittsing

Multiple root

See the dedicated page

Documentation / Reference





Discover More
How to inject multi React components in a page? A Multiple Root demo

This page shows how to render multiple root in the same web page For instance, when you want to integrate React component in another HTML application (php, ruby,...) with templating, you may render several...
React - Server-rendered markup (renderToString / hydrate)

server-rendered markup is the dynamic possibility of server-side rendering (vs static). The steps are: the web server returns a web page where the root component has been rendered as HTML with special...
React - Fragment

A component / elements return always a fragment (A part of the React tree) When a component returns multiple stacked components, you need to wrap them: around a div element or a React.Fragment component...
React - Rendering (Lifecycle) Mount and Unmount

This page is rendering in React (ie update of the DOM) To make the UI interactive, you need to be able to trigger changes to your underlying data model. The root element is the element passed to...
React - Root element

The root element is the root element of the React DOM tree. It's the element passed to the rendering function ReactDOM.render where you will render your app or component. In a app, you have at minimal...
React - Server Side Rendering (SSR) - DOM Server

This page is server side rendering (SSR) in React as opposed to the browser rendering. The server side rendering (SSR) functionality in React can output two types of pages: (that will become dynamic...



Share this page:
Follow us:
Task Runner