Die Dateien einer App

Eine React-App besteht aus mehreren Dateien, und über dem Editor sind ihre Tabs. Gehen wir sie in der Reihenfolge durch, in der der Browser sie verwendet.

index.html ist die Seite. Ihr body enthält nur ein leeres Element und ein Skript:

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

Alles, was du in der Vorschau siehst, setzt React in #root ein. Mit type="module" darf das Skript import verwenden, das du gleich siehst.

main.jsx startet die App:

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

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

Jede import-Zeile holt etwas aus einer anderen Datei. createRoot kommt aus react-dom/client, dem Teil von React für Webseiten. App kommt aus der Datei App.jsx (./ heißt „im selben Ordner“), und das letzte import lädt das Stylesheet. Die letzte Zeile findet #root und sagt React, dass es dort <App /> anzeigen soll. main.jsx ist in jeder Übung dieses Kurses gleich, du musst sie also nie ändern.

App.jsx ist die App selbst, und hier arbeitest du die meiste Zeit. Sie enthält die Funktion App:

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

Mit export default können andere Dateien die Funktion importieren: So bekommt main.jsx sie. Mehr über import und export lernst du in der Lektion Komponenten. Die Dateien enden auf .jsx, weil sie JavaScript mit JSX sind, also mit Tags wie <h1>, die direkt im Code stehen.

style.css ist das CSS der App, so wie du es aus dem CSS-Kurs kennst.

Ein React-Projekt auf deinem Computer hat Dateien wie diese. In der letzten Lektion siehst du, wie du eines anlegst.