It is now evident so far that React aims to render HTML elements on the web page. React does this by using the function ReactDOM.render()

The ReactDOM.render() takes two arguments; first is the name of the HTML element or components and second, the root element in the HTML file where the code will be rendered.

In index.js, write the following:

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

const element = <h1>Hello World</h1>;

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

Result:

This would render a <h1> tag containing ‘Hello World’ in the <div> element of id ‘root’ in the index.html file of the public folder. This <div> tag is called the root element.

React DOM and rendering element

React DOM elements are simple to create since they are plain JavaScript objects. React DOM takes care of updating the DOM to match react elements. React DOM is very similar to the browser DOM, the main difference is the fact that it only updates what has been changed in the DOM and then renders only the updated element rather than re-rendering the whole DOM. Before we go further, let’s review the concept of the root element.

Root element :

Imagine we create an element where all our HTML template is to be rendered.

Index.html:

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

We call this a root DOM node because everything in it is injected and updated by the React DOM. It is common practice to have one root element when creating an App with React. To render an element in this root element, we use the render method of the React DOM as mentioned earlier:

Index.js:

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

const element = <h1>Hello World</h1>;

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

Now let’s go over an example to see how React DOM actually renders and updates its elements. We are rendering React elements now, in later topics we will go over rendering a component.

We will render a ticking clock element to the root node and watch how the DOM is updated every second.

Index.js:

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

const tickClock = () => {
  const element = <div>The time is {new Date().toLocaleTimeString()}</div>;

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

setInterval(tickClock, 1000);

Here we defined a function tickClock that has a react element ‘element’ that was rendered and a setInterval method that renders the function every 1 second.

Result:

Conditional Rendering

In React, if-else statements are not allowed when rendering JSX, instead, we use the ternary operator(?). For example,

import React, { Component } from "react";
class App extends Component {
  render() {
    const binary = 2;
    return <p> {binary == 2 ? "Binary is 2" : null}</p>;
  }
}
export default App

Result:

The above example can be interpreted as:

A variable was declared and assigned the value of 2, in the return method if the binary is 2, return a <p> tag with text ‘Binary is 2’ else return null.