Shrnutí

V této lekci jste se naučili, že:

• Stránka se dělí na komponenty, jednu pro každou část, a App je skládá dohromady jako obsah knihy. Název komponenty začíná velkým písmenem a používá se jako tag: <Hlavicka />.
• Každá komponenta má obvykle vlastní soubor, pojmenovaný po ní: Hlavicka.jsx. Soubor je modul: co v něm je, existuje jen v něm, pokud to soubor neexportuje.
• export default function Hlavicka() exportuje hlavní věc souboru (výchozí export). import Hlavicka from "./Hlavicka.jsx"; ji importuje, bez složených závorek, pod jménem, které si zvolíte.
• export function VstupenkaPatek() je pojmenovaný export a soubor jich může mít víc. import { VstupenkaPatek, VstupenkaVikend } from "./Vstupenky.jsx"; je importuje, se složenými závorkami, přesně pod jejich názvy.
• ./ v cestě je složka souboru, ve kterém import je, a ../ je o složku výš. Název bez nich, třeba "react", je balíček.
• Chybějící export nebo import se špatnými závorkami skončí v konzoli hláškou Element type is invalid, chybějící import hláškou ReferenceError: … is not defined a špatnou cestu ukáže červená zpráva pod náhledem.
• Komponenty mohou používat další komponenty a dohromady tvoří strom. Každý soubor importuje komponenty, které používá. Jednu komponentu můžete použít mnohokrát, a když ji změníte, změní se všude.

V další lekci, Props, dáte komponentám jejich vlastní data, takže každá karta kapely ukáže jinou kapelu.

Nejdřív si ale vše procvičte na stránce s praktickými informacemi pro návštěvníky festivalu. App.jsx je skoro prázdný a komponenty i jejich soubory napíšete sami.