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?
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.
divwith the id
rootin the HTML document, which will work as our root node:
<div>My first React element</divinside of the
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: