Project Structure

index.html

The one real HTML file in the whole project. Everything else gets injected into it by React.

<div id="root"></div> is just an empty mount point, blank until React fills it in.
<script type="module" src="/src/main.jsx"></script> loads the actual app code as an ES module.
This is the "root" React keeps referring to elsewhere. document.getElementById('root') in main.jsx is grabbing exactly this div.

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>letterboxd-plus</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx

The actual entry point of the app, the first bit of your own code that runs.

createRoot(document.getElementById('root')) grabs that empty div from index.html and turns it into a React root, a spot React is now in charge of.
.render(<App />) tells React what to put inside that root. The whole app starts from <App />.
<StrictMode> isn't rendered output, it's a dev-only helper that intentionally double-invokes some code to help catch bugs early. It does nothing in production.

jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
 
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

package.json

Not just dependency bookkeeping, it's also where the CLI scripts live (npm start, npm run build, ...), and what makes this folder an actual npm package in the first place.

"scripts" maps short command names (dev, build) to the real shell commands they run.
"dependencies" are packages the app needs at runtime, React itself. "devDependencies" are only needed while building or developing, Vite itself.
Vite doesn't read its own config from here, that lives in vite.config.js. This file is npm's.

Naming components

A convention, not a rule React enforces, but break it and things get confusing fast.

Component function names start with a capital letter: Header, App, MovieCard. That capital is how React (and JSX) tells a component apart from a plain HTML tag, <header> is an HTML tag, <Header> is a component.
The file holding a component is usually named to match it exactly, Header lives in Header.jsx.