QA fixes

daweb/react/navrh/faze-vyvoje.md

@@ -10,9 +10,9 @@ Při vývoji webových aplikaci většinou postupujeme podle následujícího sc
 1. **Implementace** – naprogramujeme aplikaci podle návrhu. Výsledkem je funkční aplikace, která ještě nemusí být plně odladěná.
 1. **Testování** – otestujeme aplikaci a odstraníme všechny chyby. Výsledkem je funkční aplikace, která je plně odladěná.
 1. **Nasazení** – nahrání aplikace na server, kde bude dostupná pro uživatele.
-1. **Údržba** – oprava chyb a přidávání nových funkcí. 
+1. **Údržba** – oprava chyb a přidávání nových funkcí.
 
-V praxi se tyto fáze často prolínají a některé z nich se mohou opakovat. Například při tvorbě architektury můžeme zjistit, že náš původní návrh není úplně ideální a musíme se vrátit zpět. Nebo při implementaci můžeme zjistit, že náš původní návrh architektury s něčím nepočítal a je potřeba ji upravit nebo úplně předělat. 
+V praxi se tyto fáze často prolínají a některé z nich se mohou opakovat. Například při tvorbě architektury můžeme zjistit, že náš původní návrh není úplně ideální a musíme se vrátit zpět. Nebo při implementaci můžeme zjistit, že náš původní návrh architektury s něčím nepočítal a je potřeba ji upravit nebo úplně předělat.
 
 Když je aplikace nasazená, každá nová funkce, kterou je potřeba přidat, může procházet všemi výše zmíněnými kroky, podle toho, o jak velkou změnu se jedná.
 

daweb/react/ui-knihovny/children-prop.md

@@ -1,40 +1,40 @@
-## Prop `children`
-
-Stavění Reactových aplikací je založeno na skládání komponent. Díky tomu mohou být naše komponenty malé funkční celky, ze kterých skládáme větší díly celé naší aplikace. My jsme doposud vždy věděli, jakou konkrétní komponentu chceme použít uvnitř jiné komponenty a mohli jsme ji proto jednoduše naimportovat a v rodičovské komponentě použít.
-
-Jsou ale situace, kdy naše rodičovská komponenta dopředu neví, jaké jiné komponenty (nebo obecně JSX kód) bude obsahovat. Představte si například, že vytváříte komponentu `Sidebar` - pruh na levém či prvém okrají stránky, do kterého můžete skládat další *widgety*. Může v nich být třeba kalendář akcí, odkazy na nejnovější články, informace o počasí, reklama, atd. Obsah sidebaru neznáme dopředu - může se měnit v závislosti na nastavení naší aplikace (např. v administraci webu).
-
-Naše komponenty jsme zatím vždy používali jako nepárové značky, do kterých jsme posílali props.
-
-```jsx
-<AlmostPerfectComponent title="Skvělá komponenta" />
-```
-
-Nyní potřebujeme napsat komponentu `Sidebar` tak, aby akceptovala a uměla zobrazit jakékoliv potomky do ní pošleme. Třeba takto:
-
-```jsx
-<Sidebar title="Můj sidebar">
-  <Events />
-  <News />
-  <Weather />
-</Sidebar>
-```
-
-V Reactu je to naštěstí velmi jednoduché. V každé komponentě je k dispozici speciální prop nazvaná `children`, která obsahuje všechny do komponenty vnořené potomky. To mohou být další komponenty nebo třeba i obyčejné JSX elementy.
-
-Obsah prop `children` pak můžeme přímo vložit do JSX komponenty na místo, kde se nám to hodí. V našem případě dovnitř `<aside>` elementu.
-
-```jsx
-const Sidebar = ({children}) => {
-  return (
-    <aside className="sidebar">
-      <h2>Sidebar</h2>
-      { children }
-    </aside>
-  );
-}
-```
-
-Prop `children` tedy budeme využívat ve chvíli, kdy potřebujeme napsat komponentu, která má obalit další prvky nebo komponenty, ale my dopředu nevíme, jaké to budou.
-
-Časté použití jsou například různá dialogová okna, sidebary, nastylované boxy, ve kterých může být libovolný obsah, nebo obecné komponenty, které například řídí rozložení prvků na stránce.
+## Prop `children`
+
+Stavění Reactových aplikací je založeno na skládání komponent. Díky tomu mohou být naše komponenty malé funkční celky, ze kterých skládáme větší díly celé naší aplikace. My jsme doposud vždy věděli, jakou konkrétní komponentu chceme použít uvnitř jiné komponenty a mohli jsme ji proto jednoduše naimportovat a v rodičovské komponentě použít.
+
+Jsou ale situace, kdy naše rodičovská komponenta dopředu neví, jaké jiné komponenty (nebo obecně JSX kód) bude obsahovat. Představte si například, že vytváříte komponentu `Sidebar` - pruh na levém či prvém okrají stránky, do kterého můžete skládat další _widgety_. Může v nich být třeba kalendář akcí, odkazy na nejnovější články, informace o počasí, reklama, atd. Obsah sidebaru neznáme dopředu - může se měnit v závislosti na nastavení naší aplikace (např. v administraci webu).
+
+Naše komponenty jsme zatím vždy používali jako nepárové značky, do kterých jsme posílali props.
+
+```jsx
+<AlmostPerfectComponent title="Skvělá komponenta" />
+```
+
+Nyní potřebujeme napsat komponentu `Sidebar` tak, aby akceptovala a uměla zobrazit jakékoliv potomky do ní pošleme. Třeba takto:
+
+```jsx
+<Sidebar title="Můj sidebar">
+  <Events />
+  <News />
+  <Weather />
+</Sidebar>
+```
+
+V Reactu je to naštěstí velmi jednoduché. V každé komponentě je k dispozici speciální prop nazvaná `children`, která obsahuje všechny do komponenty vnořené potomky. To mohou být další komponenty nebo třeba i obyčejné JSX elementy.
+
+Obsah prop `children` pak můžeme přímo vložit do JSX komponenty na místo, kde se nám to hodí. V našem případě dovnitř `<aside>` elementu.
+
+```jsx
+const Sidebar = ({ children }) => {
+  return (
+    <aside className="sidebar">
+      <h2>Sidebar</h2>
+      {children}
+    </aside>
+  );
+};
+```
+
+Prop `children` tedy budeme využívat ve chvíli, kdy potřebujeme napsat komponentu, která má obalit další prvky nebo komponenty, ale my dopředu nevíme, jaké to budou.
+
+Časté použití jsou například různá dialogová okna, sidebary, nastylované boxy, ve kterých může být libovolný obsah, nebo obecné komponenty, které například řídí rozložení prvků na stránce.

daweb/react/ui-knihovny/cv-children.md

@@ -1,3 +1,3 @@
-## Cvičení: Použití props Children
-
-::exc[cvlekce/rozbalovaci-box]
+## Cvičení: Použití props Children
+
+::exc[cvlekce/rozbalovaci-box]

daweb/react/ui-knihovny/cv-ui-knihovny.md

@@ -1,3 +1,3 @@
-## Cvičení: UI knihovny
-
-::exc[cvlekce/ui-knihovna]
+## Cvičení: UI knihovny
+
+::exc[cvlekce/ui-knihovna]

daweb/react/ui-knihovny/cvlekce/rozbalovaci-box/exercise.md

@@ -9,7 +9,10 @@ demand: 3
    ```jsx
    <CollapseBox title="Podrobnosti">
      <h2>Lorem ipsum dolor sit amet</h2>
-     <p>Consectetuer adipiscing elit. Fusce nibh. In laoreet, magna id viverra tincidunt.</p>
+     <p>
+       Consectetuer adipiscing elit. Fusce nibh. In laoreet, magna id viverra
+       tincidunt.
+     </p>
    </CollapseBox>
    ```
 1. Box bud standardně zavřený a bude se zobrazovat pouze záhlaví s titulkem a šipkou ukazující doprava. Kliknutím na záhlaví se šipka změní na šipku ukazující dolů a v boxu se zobrazí obsah. Opětovným kliknutím na záhlaví se box zase zavře.

daweb/react/ui-knihovny/cvlekce/ui-knihovna.md

@@ -1,9 +1,9 @@
----
-title: UI pomocí knihovny Geist
-demand: 3
----
-
-Jedna z méně známých, ale extrémně snadno použitelných knihoven je např. [knihovna Geist](https://geist-ui.dev/en-us). Není tak rozsáhlá jako jiné, známější knihovny, ale pojďme si ji vyzkoušet.
-
-1. Založ si nový projekt pomocí `create-czechitas-app`.
-1. Prostuduj [dokumentaci](https://geist-ui.dev/en-us) knihovny Geist a zkus pomocí jejích komponent udělat stejnou aplikaci, jakou jsme předtím dělali společně v lekci pomocí React Bootstrap.
+---
+title: UI pomocí knihovny Geist
+demand: 3
+---
+
+Jedna z méně známých, ale extrémně snadno použitelných knihoven je např. [knihovna Geist](https://geist-ui.dev/en-us). Není tak rozsáhlá jako jiné, známější knihovny, ale pojďme si ji vyzkoušet.
+
+1. Založ si nový projekt pomocí `create-czechitas-app`.
+1. Prostuduj [dokumentaci](https://geist-ui.dev/en-us) knihovny Geist a zkus pomocí jejích komponent udělat stejnou aplikaci, jakou jsme předtím dělali společně v lekci pomocí React Bootstrap.

daweb/react/ui-knihovny/ui-knihovny.md

@@ -1,16 +1,16 @@
-## UI knihovny
-
-Nyní, když umíme používat prop `children`, uměli bychom si vytvořit knihovnu vlastních prvků uživatelského rozhraní, které by šlo jednoduše skládat do sebe v libovolných kombinacích. Taková knihovna standardizovaných může výrazně urychlit tvorbu složitějších aplikací.
-
-Protože nejsme první, koho to napadlo, takových hotových knihoven už existuje spousta a my je můžeme použít.
-
-Mezi nejznámější patří třeba:
-
-* [Ant Design](https://ant.design/)
-* [MUI](https://mui.com/)
-* [Mantine](https://mantine.dev/)
-* [React Bootstrap](https://react-bootstrap.github.io/)
-* [Semantic UI](https://react.semantic-ui.com/)
-* [Onsen UI](https://onsen.io/react/)
-
-Existují doslova desítky (možná stovky) dalších, méně známých knihoven. Každá má svoje výhody a nevýhody. Některé mají více nebo méně zabudovaných komponent, některé se snadněji používají.
+## UI knihovny
+
+Nyní, když umíme používat prop `children`, uměli bychom si vytvořit knihovnu vlastních prvků uživatelského rozhraní, které by šlo jednoduše skládat do sebe v libovolných kombinacích. Taková knihovna standardizovaných může výrazně urychlit tvorbu složitějších aplikací.
+
+Protože nejsme první, koho to napadlo, takových hotových knihoven už existuje spousta a my je můžeme použít.
+
+Mezi nejznámější patří třeba:
+
+- [Ant Design](https://ant.design/)
+- [MUI](https://mui.com/)
+- [Mantine](https://mantine.dev/)
+- [React Bootstrap](https://react-bootstrap.github.io/)
+- [Semantic UI](https://react.semantic-ui.com/)
+- [Onsen UI](https://onsen.io/react/)
+
+Existují doslova desítky (možná stovky) dalších, méně známých knihoven. Každá má svoje výhody a nevýhody. Některé mají více nebo méně zabudovaných komponent, některé se snadněji používají.