Structure of a React Project

If we look at the project folder, we will find the following files:

The only files of folders that are relevant at this point are:

• node_modules contains all the installed modules;

• public contains the main index.html file and other files related to it;

• src contains a basic template for the HTML page;

• package.json and package-lock contain data related to the project, the installed modules, and their versions.

We need to start our work by deleting all the files from the src and public folders.

Create an index.html file in the public folder and add the following code:

Create an index.js file and add the following code inside it:

js
Kopioi koodi
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react";
import ReactDOM from "react-dom/client";

function Main () {
    return (
      <ul>
        <li>Cats</li>
        <li>Dogs</li> 
        <li>Birds</li>
        <li>Lizards</li> 
      </ul>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Main />);

In the index.js file, we import React and ReactDOM to use the React functions.

Note that we don't need to manually import index.js in index.html: it is automatically done for us when we run the application.

We can use the DOM in this script to access the root element from the HTML document and create a root object to render React components. It is done in the second-last line as follows:

js
Kopioi koodi
const root = ReactDOM.createRoot(document.getElementById("root"));

In the last line, we use the created React root object to render the Main component, which represents a React component. We will learn more about React components in the next section.

js
Kopioi koodi
root.render(<Main />);

Following is what the output should look like for the above setup: