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.
-
Založte si nový JSX projekt pomocí
npm init kodim-app@latest jsx-zarovka jsx
-
Ve vašem projektu vytvořte v samostatné složce komponentu
Bulb
. Zařiďte, aby vytvořila jedendiv
s třídoubulb
. -
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 souboruglobal.css
. -
Použijte komponentu
Bulb
a zobrazte žárovku na stránce. -
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 propon
. Nezapomeňte, že třídabulb
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řídubulb--on
(názvy tříd vycházejí z metodiky BEM). -
Vložte na vaši stránku dvě zhasnuté a dvě rozsvícené žárovky.