ReactJS 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 ReactJS Element to the root node, we must write the following in the App.js file.

import React, { Component } from 'react';

class App extends Component {

    render() {
        return (
            <div>
                <h1>Welcome to Techappss!</h1>
            </div>

        );
    }
}

export default App;

Output:

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 as an example. 

Write the following code in App.js file of your project directory.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    const myElement = (
        <div>
            <h1>Welcome to Techappss!</h1>
            <h2>{new Date().toLocaleTimeString()}</h2>
        </div>
    );

    ReactDOM.render(
        myElement,
        document.getElementById("root")
    );
}

setInterval(App, 1000);

export default App;

Output: