Step 5

Let's explore the react application project created by create-react-app:

dictionary-react-app
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

We are going to strip down the application to the bare minimum!

Delete everything except for index.html in the public folder. Moreover, update the index.html file to the following minimal content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

The index.html is a template where UI components will be added to the "root" (<div> element with id="root"). We've seen this pattern before with Vite apps.

CS280 Homepage

Step 5