React.createElement()
to create a React element does not trigger a DOM operation.React.createElement()
calls. But how do we render an element to the screen, i.e. show it in the browser?render()
method of ReactDOM
. Additionally, we need a root node or a mount node to render a React element. This node works as a placeholder and informs React where the element should be rendered to. Theoretically, there can be many different root nodes in the HTML document. React controls these independently and keeps track of the different mount nodes. So instead of having one large React application, you could easily choose to have many smaller (or larger) apps in a single HTML document. In most situations, you are likely to only have a single root node for your React application.ReactDOM.render()
and then pass the root node as the second argument, which is the DOM node that the element will be rendered into.div
with the id root
in the HTML document, which will work as our root node:<div>My first React element</div
inside of the root
div.ReactDOM.render()
, it will tell us the time. Because we only care about punctuality, we pass the element and the ReactDOM.render()
call into a function which is called every 1000ms.ReactDOM.render()
call only the time itself is updated. The remaining elements as well as the DOM nodes or even parts not impacted of the shown text remain the same:ReactDOM.render()
is only called once. Mostly when opening a page. We have only used render()
repeatedly in the examples to illustrate how ReactDOM and React elements work together