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
'<foo-bar>' React nodes are rendered to the DOM.
Once rendered to the DOM, the updated 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>
ReactDOM.render() function is initially how you get the React nodes to the Virtual DOM, then to the HTML DOM.
- Any DOM nodes inside of the DOM element in which you are rendering to 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 (i.e., diff) has occurred or a new child node has been added.