Podmíněné zobrazení

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.