Getting Started with React

The simplest way to start using React is to create a basic HTML page:

Afterward, to install React, we will import React to our project by adding the following links in the header section:

However, this won't be sufficient since we also want to be able to use JSX for ease in creating elements. After adding all three of these links, the HTML script should look something like this:

React needs an HTML container element (for example, a <div> element) to render components inside the HTML document. This base container is also often referred to as root.

Everything React renders will be inside this root element. We will create a <div> element in the HTML body, with an id "root" so we can access it from JavaScript code.

To complete the program, we will add two additional lines of code, which will print a "Hello World!" heading inside the root:

The ReactDOM.createRoot function creates a React root object from the referenced element – an object that enables React to create elements inside the HTML document. Here the referenced element is the <div> having the id="root" (document.getElementById('root')).

The second line of code is the render method of the root object. The render method accepts JSX elements or React components to be rendered inside the root. Here we are rendering a simple <h1> element having "Hello World!" as its content.