course content

Course Content

Introduction to React

Getting Started with ReactGetting Started with React

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

html

index.html

css

index.css

js

index.js

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

html

index.html

css

index.css

js

index.js

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:

html

index.html

css

index.css

js

index.js

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.

html

index.html

css

index.css

js

index.js

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

html

index.html

css

index.css

js

index.js

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.

question-icon

What is a React root?

Select the correct answer

Everything was clear?

Section 2. Chapter 5