Rendering to DOM

React provides the ReactDOM.render() function from react-dom.js that can be used to render React nodes to the DOM. We’ve already seen this render() function in use in this chapter.

In the code example below, using ReactDOM.render(), the '<li>' and '<foo-bar>' React nodes are rendered to the DOM.

source code

Once rendered to the DOM, the updated HTML will be:

  1. <body>
  2.     <div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
  3.     <div id="app2"><foo-bar classname="bar" children="foo" data-reactid=".1">foo</foo-bar></div>
  4. </body>

The ReactDOM.render() function is initially how you get the React nodes to the Virtual DOM, then to the HTML DOM.

Notes

  • Any DOM nodes inside of the DOM element which you are rendering into will be replaced (i.e., removed).
  • ReactDOM.render() does not modify the DOM element node in which you are rendering React. However, when rendering React wants complete ownership of the node. You should not add children to or remove children from a node in which React inserts a React node/component.
  • Rendering to an HTML DOM is only one option with React, other rendering APi’s are available. For example, it is also possible to render to a string (i.e., ReactDOMServer.renderToString()) on the server-side.
  • Re-rendering to the same DOM element will only update the current child nodes if a change has been made or a new child node has been added.