Rendering JSX to DOM

The ReactDOM.render() function can be used to render JSX expressions to the DOM. Actually, after Babel transforms the JSX all it is doing is rendering nodes created by React.createElement(). Again, JSX is just a stand in expression for having to write out the React.createElement() function calls.

In the code example I am rendering a <li> element and a custom <foo-bar> element to the DOM using JSX expressions.

source code

Once rendered to the DOM, the HTML will look like so:

  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>

Just remember that Babel is taking the JSX in your JavaScript files transforming it to React nodes (i.e., React.createElement() functions calls) then using these nodes created by React (i.e., the Virtual DOM) as a template for creating a real html DOM branch. The part where the React nodes are turned into the real DOM nodes and added to the DOM in an HTML page occurs when ReactDOM.render() is called.

Notes

  • Any DOM nodes inside of the DOM element in which you are rendering will be removed/replaced.
  • ReactDOM.render() does not modify the DOM element node in which you are rendering React.
  • 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 (i.e., diff) has occurred or a new child node have been added.
  • Don’t ever call this.render() yourself, leave that to React