File structure

Now that we have our project, we can open it in the code editor and immediately see the file and directory structure of a React project:

.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── App.test.ts
│   ├── index.css
│   ├── index.ts
│   ├── logo.svg
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── yarn.lock

The web server obviously accesses the application via public/index. html. Because of the "underwater" configuration, src/index.ts is automatically loaded and started. Which in turn launches App.tsx in the same directory. Why so complicated? Well, in index.ts the magic of React is started. The code lines:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

attaches the <App /> component (from App.tsx) to the html element with id <div id='root' in index.html:

<div id="root"></div>