Course Content
Introduction to React
The simplest way to start using React is to create a basic HTML page:
index.html
index.css
index.js
Afterward, to install React, we will import React to our project by adding the following links in the header section:
index.html
index.css
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:
index.html
index.css
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.
index.html
index.css
index.js
To complete the program, we will add two additional lines of code, which will print a "Hello World!" heading inside the root:
index.html
index.css
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.
What is a React root?
Select the correct answer
Section 2.
Chapter 5