/ Czechitas / Digitální akademie Web / JavaScript 2 / Podmíněné zobrazení / Cvičení: Podmíněné zobrazování

Podmíněné zobrazení

Naučíme se, jak sestavovat CSS třídy a jak se rozhodnout, kterou část JSX chceme zobrazit.

Destrukturování objektů Ternární operátor Předávání hodnot pomocí props Cvičení: Podmíněné výrazy, destrukturování Podmíněné zobrazení Rozdělování komponent Cvičení: Podmíněné zobrazování Doporučené úložky na doma Shrnutí

Mejlík – hlavička

Vytvořte komponentu pro zobrazování hlavičky stránky.

Navážeme na předchozí cvičení a vytvoříme komponentu pro hlavičku naší aplikace.

Pokračujte v projektu z předchozího cvičení.
Vzor stránky je na GitHubu v repozitáři cviceni-mejlik-hlavicka-vzor. Tento repozitář slouží jen jako vzor, proto z něj nebudeme vytvářet vlastní repozitář (nebudeme ho používat jako šablonu).
Místo toho naklonujeme na lokální disk rovnou původní repozitář – tj. rovnou ho naklonujte pomocí příkazu git clone https://github.com/Czechitas-podklady-WEB/cviceni-mejlik-hlavicka-vzor.git.
Ve staženém repozitáři cviceni-mejlik-hlavicka-vzor najdete nastylované dvě verze hlavičky pro naši aplikaci. Pozor, že soubory index.html a style.css slouží pouze jako vzor. Nekopírujte je do svého projektu.
Uvnitř vašeho vlastního projektu založte komponentu Header, která bude žít ve vlastní složce. Bude představovat hlavičku stránky. Jak napsat její JSX můžete okouknout ze vzorového index.html (nezapomeňte atributy class změnit na className. Pro hromadnou náhradu se bude ve VS Code hodit zkratka Ctrl+Shift+L (na Windows a Linuxu) nebo Command+Shift+L (na MacOS), která označí všechny výskyty daného slova).
Podívejte se do vzoru, jak je hlavička nastylovaná. Styly pro hlavičku ze vzorového style.css vložte do stylů vaší komponenty.
Komponenta hlavičky používá dva obrázky. Vytvořte pro ně složku img uvnitř složky Header. Vložte do ní obrázky ze vzoru.
Chceme zařídit, že pokud je komponenta použita takto
```
<Header user="Radovan Holátko" />
```
zobrazí se hlavička s přihlášeným uživatelem. Pokud je naopak použita takto
```
<Header />
```
zobrazí se hlavička nabízející přihlášení. Pokud jsme do props při použití komponenty nevložili žádnou hodnotu, znamená to, že obsahuje hodnotu undefined.