Soubory aplikace

Aplikace v Reactu se skládá z několika souborů a nad editorem jsou jejich záložky. Projděme si je v pořadí, v jakém je používá prohlížeč.

index.html je stránka. V jejím body je jen prázdný prvek a skript:

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

Všechno, co v náhledu vidíte, do #root vložil React. type="module" skriptu dovolí používat import, který za chvíli uvidíte.

main.jsx aplikaci spouští:

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

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

Každý řádek, který začíná slovem import, si vezme něco z jiného souboru. createRoot pochází z react-dom/client, části Reactu pro webové stránky. App pochází ze souboru App.jsx (./ znamená „ve stejné složce“) a poslední import načte styly. Poslední řádek najde #root a řekne Reactu, ať v něm ukáže <App />. main.jsx je ve všech cvičeních tohoto kurzu stejný, takže ho nebudete muset měnit.

App.jsx obsahuje samotnou aplikaci a budete v něm pracovat nejčastěji. Je v něm funkce App:

export default function App() {
    return <h1>Letní zvuky</h1>;
}

export default dovolí funkci importovat do jiných souborů: tak ji dostane main.jsx. Víc o import a export se dozvíte v lekci Komponenty. Soubory končí na .jsx, protože obsahují JavaScript s JSX, tedy s tagy jako <h1> napsanými přímo v kódu.

style.css jsou styly aplikace v CSS, jak je znáte z kurzu CSS.

Projekt v Reactu na vašem počítači má podobné soubory. Jak takový projekt vytvořit, se dozvíte v poslední lekci.