Kódím.cz
5

Podmíněné zobrazení

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

3
JSX žárovka
Vytvořte komponentu pro zobrazování žárovky.

Vzpomeňte si na naše cvičení z vanilla JavaScriptu, kdy jsme rozsvěcovali a zhasínali žárovku. Zkusíme naši žárovku zprovoznit pomocí JSX. Styly a obrázky pro žárovku můžete v průběhu cvičení vykrádat z původního zadání v repozitáři cviceni-zarovka.

  1. Založte si nový JSX projekt pomocí

    npm init kodim-app@latest jsx-zarovka jsx
    
  2. Ve vašem projektu vytvořte v samostatné složce komponentu Bulb. Zařiďte, aby vytvořila jeden div s třídou bulb.

  3. Styly a obrázky týkající se žárovky vložte do složky Bulb. Styly týkající se stránky samotné vložte do hlavního souboru global.css.

  4. Použijte komponentu Bulb a zobrazte žárovku na stránce.

  5. Chceme zařídit, že pokud komponentu použijeme takto

    <Bulb on={false} />
    

    zobrazí se zhasnutá žárovka. Pokud ji naopak použijeme takto

    <Bulb on={true} />
    

    žárovka se zobrazí rozsvícená. Kýženého chování dosáhnete tak, že sestavíte obsah atributu className pomocí podmíněného operátoru v závislosti na hodnotě v prop on. Nezapomeňte, že třída bulb musí být na elementu žárovky přítomna vždy, rozsvícená žárovka bude mít navíc k třídě bulb ještě třídu bulb--on (názvy tříd vycházejí z metodiky BEM).

  6. Vložte na vaši stránku dvě zhasnuté a dvě rozsvícené žárovky.