Rendering Elements in React JS

The smallest building blocks of React applications are the elements. Example of an element is −

const message = <h1>Welcome, Steve</h1>;

React DOM updates the actual DOM with the converted react elements. React components are made up of elements.

Rendering element on DOM

We will have a parent div element in the main html file . This div can be called as root.

<div id=”app”> </div>

ReactDOM manages everything which is inside the app div. We can add multiple such an isolated div in applications if required.

To render the element it will be passed to the ReactDOM render method −

const message = <h1>Welcome, Steve</h1>;
ReactDOM.render(message, document.getElementById('app'));

This will display a message − Welcome, Steve on browser

React elements are immutable that means once created it cannot be changed. Change will create a new element and update the UI.

Displaying current time 

Example

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
function getCurrentTime() {
   const currentTime = (
      <div>
         <h1>Welcome !</h1>
         <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
   );
   ReactDOM.render(currentTime, document.getElementById('root'));
}
setInterval(getCurrentTime, 1000);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

output