Rendering JSX to DOM

The ReactDOM.render() function can be used to render JSX to the DOM. Actually, after Babel transforms the JSX all it is doing is rendering nodes created by React.createElement().

In the example I am rendering a <option> element to the DOM using JSX.

See the Pen odJLPe by Bunlong (@Bunlong) on CodePen.

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

<body>
  <div id="app"><option value="1" data-reactid=".0">one</li></div>
</body>

Babel is taking the JSX in your JavaScript files transforming it to React nodes (React.createElement()) then using these nodes created by React (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.

Updated: