Step 2

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

sleep-time-react
├── README.md
├── node_modules
├── 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>SleepTime 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"). If you recall, the second time we were building SleepTime App, we only had <div id="root"></div> inside index.html file and we created the entire app in script.js. (See here to refresh your memory!) A similar approach is taken by React.

CS280 Notes

Step 2