YogeshChauhan . com

Rendering Elements in React

in React on April 22, 2021

As I mentioned in the React Basics post and the JSX React post, React divided the app in smaller components that are reusable too.

React components are made of elements.

In JSX React post, I demonstrated how to create smaller elements and render them.

We also saw that react elements are more like objects. ReactDOM keeps checking the objects props and keep updating the DOM constantly for us.

Element object can be any type of HTML element



const element = <h1>Hello, world</h1>;
const element2 = <p>Hello, world</p>;
const element3 = <img src={user.imageUrl} />;


How to render an element into the DOM?

If you followed all the steps from React Basics post and the JSX React post then you must have noticed that we are rendering the data into the DOM using the element with the ID “root“.

In previous examples, you must have noticed this line:



...

ReactDOM.render(element, document.getElementById("root"));

...


Using ReactDOM.render() we can render a React element into a root DOM node.

That root element you can see inside your projects folder’s public directory. Go to /public/index.html and you’ll see the div element like this:



...

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

...


If you’re using only React for your project then you might just have one root element but if you use React with other applications then you might have more than one root DOM nodes.

How does React updates the rendered element?

Elements created in React are immutable — meaning once they are created, you can’t change its children or attributes.

Weird. Isn’t it? I mean you’d want to change the elements based on clicks or some events on the front end side.

There is a way. Render the element again! Yes. Right now that’s the only way to do so (In future posts, I will demonstrate other ways like element’s states change).

To update the element, you need to create the same element with new attributes and render it again by passing it to ReactDOM.render().

Example

Try to add this code to your /src/index.js file:



function tick() {
  const element = (
    <div>
      <h1>The time is {new Date().toLocaleTimeString()}.</h1>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);


The setInterval method calls the tick function every second. The tick function creates the element as well as renders it using ReactDOM.render().

React keeps states of the element and compares the current state to the previous state of the element and if there was a change it applies those changes to the DOM. It’s like live Git versioning except that it’s not!

You’ll see the output as well as rendering of the output like this in your browser window if you inspect the element.

So, even though the whole element gets created on each function call, React checks for that specific part of the element and updates it! Which is pretty damn good considering there is no span or other divider element in between the h1 tags.

States in Reacts are very powerful!

Source: React Docs

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

How to add a ribbon inside a container using CSS?CSSSome SQL LIKE Operators We Need to Keep in MindSQL/MySQLAlways add associated labels to your Form elementsUI/UXA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLHow to add new elements with swing animation using JavaScript and CSS?CSSLearn how to use Self JOIN in SQL and MySQLSQL/MySQL