Rendering JSX to DOM
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.
Once rendered to the DOM, the HTML will look like so:
<body> <div id="app1"><li class="bar" data-reactid=".0">foo</li></div> <div id="app2"><foo-bar classname="bar" children="foo" data-reactid=".1">foo</foo-bar></div> </body>
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.
- 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