Rendering React elements
The ReactDOM.render()
method takes three parameters: ReactElement
, a regular DOMElement
container, and a callback
function:
ReactDOM.render(ReactElement, DOMElement, callback);
A ReactElement
type is a root element in the tree of ReactNode
that you've created. A regular DOMElement
parameter is a container DOM node for that tree. The callback
parameter is a function executed after the tree is rendered or updated. It's important to note that if this ReactElement
type was previously rendered to a parent DOMElement
container, then ReactDOM.render()
will perform an update on the already rendered DOM tree and only mutate the DOM, as it is necessary to reflect the latest version of the ReactElement
type. This is why a virtual DOM requires fewer DOM mutations.
So far, we've assumed that we're always creating our virtual DOM in a web browser. This is understandable because, after all, React is a user interface library, and all user interfaces are rendered...