ReactJS | Rendering Elements

In the previous article on introduction to JSX, we got to see how to create a React element. React element is the smallest renderable unit available in React. We can render such elements using the ReactDOM as described in the previous article. React elements are different from DOM elements as React elements are simple javascript objects and are efficient to create. React elements are the building blocks of any React app and should not be confused with React components which will be discussed in further articles.

Rendering an Element in React

In order to render any element into the Browser DOM, we need to have a container or root DOM element. It is almost a convention to have a div element with the id=”root” or id=”app” to be used as the root DOM element. Let’s suppose our index.html file has the following statement inside it.



<div id="root"></div>

Now, in order to render a simple React Element to the root node, we must write the following in the index.js file.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
const myElement = <h1>Welcome to GeeksforGeeks ! < /h1>;
   
ReactDOM.render(myElement, document.getElementById("root"));

chevron_right


Now, you have created your first ever React Element and also have rendered it in place, but React was not developed to create static pages, the intention of using React is to create a more logical and active webpage. In order to do so, we will need to update the elements. This next section will guide us through the same.

Updating an Element in React

React Elements are immutable i.e. once an element is created it is impossible to update its children or attribute. Thus, in order to update an element, we must use the render() method several times to update the value over time. Let’s see this in an example.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
function showTime()
{
const myElement = (
                   <div>
                        <h1>Welcome to GeeksforGeeks!</h1>
                        <h2>{new Date().toLocaleTimeString()}</h2>
                   </div>
                  );
  
ReactDOM.render(
      myElement, 
      document.getElementById("root")
);                    
}
  
setInterval(showTime, 1000);

chevron_right


In the above example, we have created a function showTime() that displays the current time and we have set an interval of 1000ms or 1 sec that recalls the function each second thus updating the time in each call. For simplicity, we have only shown the timespan of one second in the given image.

Is React Render Efficient?

React is chosen over the legacy of DOM update because of its increased efficiency. React achieves this efficiency by using the virtual DOM and efficient differentiating algorithm. In the example of displaying the current time, at each second we call the render method and the virtual DOM gets updated and then the differentiator checks for the particular differences in Browser DOM and the Virtual DOM and then updates only what is required such as in the given example the time is the only thing that is getting changed each time not the title “Welcome to GeeksforGeeks!” thus React only updates the time itself making it much more efficient than conventional DOM manipulation.

Important Points to Note:

  • Calling the render() method multiple times may serve our purpose for this example, but in general it is never used, instead a stateful component is used which we will cover in further articles.
  • A React Element is almost never used isolately, we can use elements as the building blocks of creating a component in React. Components will also be discussed in upcoming articles.


My Personal Notes arrow_drop_up

FullStack Developer of six websites Verified Freelancer with 19 complete projects and 4.9 rating Modest Lifelong Learner

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.