Skip to content

Commit

Permalink
Merge pull request #781 from Czechitas-podklady-WEB/FJ-reseni-React-2-3
Browse files Browse the repository at this point in the history
Doplnění odkazů na řešení.
  • Loading branch information
FilipJirsak authored May 13, 2024
2 parents 0fe3728 + a7930bf commit 7590c52
Show file tree
Hide file tree
Showing 7 changed files with 28 additions and 0 deletions.
4 changes: 4 additions & 0 deletions daweb/react/formulare-efekty/cvlekce/efekty.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,7 @@ solutionAccess: protected

1. Vytvořte si repozitář ze šablony [cviceni-react-efekty](https://github.com/Czechitas-podklady-WEB/cviceni-react-efekty).
1. Následujte instrukce z README repozitáře.

:::solution
Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-react-efekty/tree/reseni).
:::
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,7 @@ Logiku fungování zařídíme tak, že tentokrát hvězdičky nebudou mít vlas
```
Upravte podmínky u všech hvězdiček tak, aby svítily ve správnou chvíli. Zkuste si nastavit výchozí stav na různé hodnoty a vyzkoušejte, že se hvězdičky rozsvítí správně.
1. V tuto chvíli už každá hvězdička volá funkci `onSelect` se správnou hodnotou a předává ji rodiči. Rodič (komponenta `Rating`) pak tuto hodnotu uloží do stavu `rating` a tím se nám rozsvítí příslušné hvězdíčky.

:::solution
Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-hodnoceni/tree/reseni).
:::
4 changes: 4 additions & 0 deletions daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,7 @@ V tomto cvičení vdechneme život komponentě, která umožňuje hodnocení pom
1. V komponentě `Rating` předejte skrze prop `onSelect` všem instancím komponenty `Star` callback, který nastaví stav `rating` na hodnotu, kterou mu komponenta `Star` předala.

Nyní by mělo být možné kliknutím na hvězdičky nastavit správné hodnocení. Hvězdičky se nechovají úplně správně, protože bychom chtěli, aby se při kliknutí na hvězdičku rozsvítily všechny hvězdičky s nižším číslem. To si však necháme na další cvičení.

:::solution
Řešení je v repository cvičení společně s nálsedujícím cvičením v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-hodnoceni/tree/reseni).
:::
4 changes: 4 additions & 0 deletions daweb/react/komunikace-dite-rodic/cvlekce/komunikace.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,7 @@ solutionAccess: protected

1. Vytvořte si repozitář ze šablony [cviceni-komunikace](https://github.com/Czechitas-podklady-WEB/cviceni-komunikace).
1. Následujte instrukce z README repozitáře.

:::solution
Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-komunikace/tree/reseni).
:::
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,7 @@ https://api.frankfurter.app/latest?from=USD&to=CZK

1. Prohlédněte si data, která API vrací. Zkuste do URL jako parametr `from` zadat nějakou jinou měnu, například GBP nebo CHF, a podívejte se, jak se data změní.
1. Upravte komponentu `Rate` tak, aby si z API stáhla správný kurz pro měnu, kterou dostane v prop `from`. Zařiďte, aby se správná data stáhla kdykoliv, když se změní hodnota uvnitř _prop_ `from`. K tomu budete potřebovat `useEffect` se závislostí na _prop_ `from`.

:::solution
Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-currencies/tree/reseni).
:::
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,7 @@ Rozhodně není od věci procvičit si také komunikaci směrem od rodiče k dí
1. Prohlédněte si připravený kód a strukturu projektu. Všimněte si komponmenty `Rate`, která zobrazuje kurz.
1. Do komponenty `Rate` přidejte prop `from`, která bude obsahovat kód měny, ze které chceme konvertovat na české koruny. Zařiďte, aby komponenta zobrazila kód měny, který uživatel vybere z nabídky. Toto bude komunikace od rodiče (komponenta `HomePage`) směrem k dítěti (komponenta `Rate`).
1. Upravate komponentu `Rate` tak, aby zobrazila správný kurz podle připravných dat v objektu `currencies`. Výsledná kurz zobrazte v elementu `.rate__value`.

:::solution
Řešení je spolu s řešeném následujícího cvičení v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-currencies/tree/reseni).
:::
4 changes: 4 additions & 0 deletions daweb/react/komunikace-dite-rodic/cvlekce/potisk-tricek.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,7 @@ Pomocí Reactu, stavu a komunikace mezi komponentami rozchodíme aplikaci, kde s
1. Vaším úkolem bude zprovozni komunikaci od komponenty `TShirtSetup` ke komponentě `HomePage`, tedy komunikace od dítěte k rodiči. V `HomePage` budou potřeba tři stavy: jeden pro typ trička, jeden pro barvu a jeden pro potisk. Vytvořte tyto stavy a napojte je na komponentu `TShirt`, aby zobrazovala to, co je ve stavech.
1. V komponentě `TShirtSetup` vytvořte prop `onTypeChange`. Pomocí této funkce budeme měnit stav v rodiči. Použijte tuto prop k tomu, abyste do stavu pro typ trička poslali to, co uživatel vybere ve formuláři uvnitř `TShirtSetup`. Vyzkoušejte, že se stav opravdu mění a políčko pro výběr funguje.
1. Podobně propojte i další dva stavy. V komponentě `TShirtSetup` vytvořte prop `onColorChange` a `onPrintChange`. Použijte tyto props k tomu, abyste do stavu pro barvu a potisk poslali to, co uživatel vybere ve formuláři uvnitř `TShirtSetup`. Vyzkoušejte, že se stavy opravdu mění a políčka pro výběr fungují.

:::solution
Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-tricka/tree/reseni).
:::

0 comments on commit 7590c52

Please sign in to comment.