Kartička

Vítejte v závěrečném projektu kurzu Reactu! V této lekci dáte dohromady, co jste se naučili, a postavíte celou aplikaci: kartičky na učení anglických slovíček. Kartička ukazuje anglické slovíčko, a když na ni kliknete, otočí se a ukáže český překlad. Projdete celý balíček, označíte slovíčka, která už umíte, a přidáte vlastní. Aplikace si pamatuje, co umíte, i na příště a nakonec vás nechá procvičovat jen slovíčka, která ještě neumíte.

Využijete komponenty a props, události a stav, seznamy a podmínky, formulář, efekt, který načítá data, i vlastní hook. Každé cvičení navazuje tam, kde to předchozí skončilo (editor začíná jeho hotovým kódem), a přidává jeden kousek.

Soubory. App.jsx ukazuje nadpis a jednu kartičku. Kartička je samostatná komponenta Karticka v souboru Karticka.jsx a dostává dvě props: anglické slovo a jeho český preklad. Zatím ukazuje jen slovo. main.jsx a index.html jsou stejné jako v ostatních lekcích (jen titulek je jiný). style.css už obsahuje styly pro celou aplikaci, i pro třídy, které přidáte později, třeba otocena pro otočenou kartičku.

Otočení kartičky. To, jestli je kartička otočená, se mění kliknutím a stránka to ukazuje, takže je to stav: booleovská hodnota v komponentě Karticka, na začátku false. Kliknutí ji přepne na opačnou a kartička podle stavu ukáže jednu ze svých dvou props:

{otocena ? preklad : slovo}

Kartička je button, ne div: na tlačítko se dá přejít i klávesou Tab a stisknout ho Enterem nebo mezerníkem, takže kartičky fungují i z klávesnice.