Rendering an element into the DOM
Applications built with just React usually have a single root DOM node.
If you are integrating React into an existing app, you may have as many
isolated root DOM nodes as you like. To render a React element into a
root DOM node, pass both to ReactDOM.render():
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
Updating the Rendered Element
React elements are immutable. Once you create an element, you can’t
change its children or attributes. The only way to update the UI is to
create a new element, and pass it to ReactDOM.render().
function tick() {
const element = (
<div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
// React DOM compares the element and its children to the previous
one, and only applies the DOM updates necessary to bring the DOM to
the desired state.
// only the node whose contents have changed gets updated by React DOM.
// only the node whose contents have changed gets updated by React DOM.