Komponenta je funkce

App je komponenta: javascriptová funkce, která vrací, co má být na stránce. React funkci zavolá a to, co vrátí, vloží do #root. Tomu se říká vykreslení: React komponentu vykreslí. Název komponenty začíná velkým písmenem, stejně jako App.

To, co funkce vrací, je JSX. Vypadá jako HTML, ale je součástí kódu v JavaScriptu. Nejsou kolem něj uvozovky, protože to není text.

Na stránce bývá víc než nadpis, a tak může mít JSX víc řádků. Pak ho za return dejte do závorek a celé ho vložte do jednoho prvku, třeba do main:

export default function App() {
    return (
        <main>
            <h1>Letní zvuky</h1>
            <p>Dva dny hudby v lese.</p>
        </main>
    );
}

Uvnitř píšete tagy stejně jako v HTML: prvky v prvcích, každou úroveň odsazenou o další čtyři mezery.

Typické chyby:

• Zapomenutá závorka: return sám na řádku a JSX až pod ním. JavaScript return na konci řádku ukončí, takže funkce nic nevrátí a stránka zůstane prázdná, a to bez chyby.
• Dva prvky vedle sebe, kolem kterých nic není, třeba <h1> a <p> hned za return (. Aplikace se nespustí a červená zpráva pod náhledem hlásí JSX expressions must have one parent element. Proč, se dozvíte v další lekci, JSX.