The Files of an App

A React app is made of several files, and above the editor are their tabs. Let's go through them in the order the browser uses them.

index.html is the page. Its body has only an empty element and a script:

<div id="root"></div>
<script type="module" src="main.jsx"></script>

Everything you see in the preview is put into #root by React. type="module" lets the script use import, which you'll see in a moment.

main.jsx starts the app:

import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./style.css";

createRoot(document.getElementById("root")).render(<App />);

Each import line takes something from another file. createRoot comes from react-dom/client, the part of React for web pages. App comes from the file App.jsx (./ means "in the same folder"), and the last import loads the stylesheet. The last line finds #root and tells React to show <App /> in it. main.jsx is the same in every exercise of this course, so you won't need to change it.

App.jsx is the app itself, and that's where you'll work most of the time. It has the function App:

export default function App() {
    return <h1>Summer Sounds</h1>;
}

export default lets other files import the function: that's how main.jsx gets it. You'll learn more about import and export in the Components lesson. The files end in .jsx because they're JavaScript with JSX, tags such as <h1> written right in the code.

style.css is the app's CSS, as you know it from the CSS course.

A React project on your computer has files like these. In the last lesson, you'll see how to make one.