Hello ReactJS Developers,
Today we will learn about Rendering Elements in ReactJS.
Before learning about elements in ReactJS, learn the Basics of ReactJS.
Contents
Elements in ReactJS
The smallest building blocks of React applications are Elements. Elements are what you want to show or see on the screen.
Example of Element in ReactJS
|
1 |
const helloElement = <h1>Hello, MageComp</h1>; |
Rendering an Element into the DOM
|
1 |
<div id=“root”></div> |
We call this “root” DOM node because React DOM manages everything inside it.
A React application usually has a single root DOM node. However, while integrating React into an existing app, you can add as many separate root DOM nodes as needed.
For rendering elements in React, you need to pass the DOM element to ReactDOM.createRoot(), then pass the React element to the root.render().
|
1 2 3 |
const rootDOM = reactDOM.createRoot(document.getElementById(‘root)); Const helloElement = <h1>Hello, MageComp</h1>; rootDOM.render(helloElement); |
Output:
If you run this from your project, it displays “Hello, MageComp” on the page.
Updating the Rendered Element
React elements are fixed. This means once an element is created, its children or attributes can’t be changed. An element is like a single frame in a movie: it represents the UI at a particular time.
Hence, the only way to update the UI is to create a new element, and pass it to root.render().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Const rootDOM = ReactDOM.createRoot(document.getElementById(‘root)); function callMe() { const helloElement = ( <div> <h1>Hello, MageComp</h1> <h2>The Time is {new Date().toLocaleTimeString()}.</h2> </div> ); rootDOM.render(helloElement); } setInterval(callMe, 1000); |
It calls rootDOM.render every second from a setInterval() callback.
React Only Updates What’s Necessary
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.
Conclusion:
Hence, this was all about rendering elements in ReactJS. Share the tutorial with your ReactJS friends and stay in touch with us for more such guides.
Happy Coding!
