How to Render Elements in React.js

We use ReactDOM.render function to render react elements. This function takes two parameters. One is itself an element which is to be rendered and second is the place in the HTML file where you want to display particular element.

Now, Let’s take and example:

‎
const element = <h1>Hello, Tutorial Funda</h1>;
‎

This is the react element which contains h1 tag with message “Hello, Tutorial Funda”. Suppose, in the HTML file you have div tag where you want to display this element.

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

Let’s see now how to render element to this root html tag.

‎
ReactDOM.render(element, document.getElementById('root'));
‎

You can see we have passed first parameter as element (h1 tag we have declared earlier) and second parameter where we are getting id of html element (div in this case) where we are going to display our react element.

Finally, when you run html page you will see message “Hello, Tutorial Funda” in the browser.

That’s it.


Subscribe Now!

Subscribe Us For Latest Articles