Praktické příklady a cvičení

Tato kapitola se věnuje praktickým aplikacím a důležitým dovednostem pro práci s Reactem. Provedeme si detailní příklad tvorby To-do aplikace a ukážeme si, jak efektivně řešit problémy pomocí nástrojů pro debugování.

Projekty

Nejlepší způsob, jak si osvojit React, je pustit se do tvorby vlastních projektů. Zde se zaměříme na dva typy projektů: komplexnější aplikaci pro správu stavu a příklady demonstrující specifické úlohy.

To-do aplikace (správa stavu)

Vytvoříme krok za krokem jednoduchou To-do aplikaci, která nám ukáže, jak pracovat se stavem komponent a předávat data mezi nimi.

Cíle:

• Vytvořit komponentu pro vstup nového úkolu.
• Vytvořit komponentu pro zobrazení seznamu úkolů.
• Implementovat přidání nového úkolu do seznamu.
• Implementovat označení úkolu jako splněného.
• Implementovat smazání úkolu.
• Použít stav k ukládání a aktualizaci seznamu úkolů.

Kroky:

1. Inicializace projektu: Vytvoříme nový React projekt pomocí Create React App nebo Vite.
2. Struktura komponent: Navrhneme strukturu komponent - hlavní App komponenta, TodoInput pro vstup, TodoList pro seznam a TodoItem pro jednotlivý úkol.
3. Stav v App komponentě: V App komponentě inicializujeme stav (např. pomocí useState) pro uložení pole s úkoly. Každý úkol bude objekt s id, text a completed vlastnostmi.
4. Komponenta TodoInput: Vytvoříme komponentu TodoInput s <input> polem a tlačítkem. Tato komponenta bude přijímat callback funkci z rodičovské komponenty (App) pro přidání nového úkolu.
5. Předání dat z TodoInput do App: Při kliknutí na tlačítko v TodoInput zavoláme callback funkci předanou z App, předáme jí text nového úkolu.
6. Aktualizace stavu v App: Callback funkce v App obdrží text nového úkolu a aktualizuje stav (pole úkolů) přidáním nového úkolu s unikátním id a completed: false.
7. Komponenta TodoList: Vytvoříme komponentu TodoList, která bude přijímat pole úkolů jako prop a pomocí metody map bude vykreslovat jednotlivé komponenty TodoItem.
8. Komponenta TodoItem: Vytvoříme komponentu TodoItem, která bude přijímat jeden úkol jako prop. Zobrazí text úkolu a tlačítka pro označení jako splněný a pro smazání.
9. Manipulace s úkoly v App (splnění/smazání): V App komponentě definujeme další funkce (callbacky) pro označení úkolu jako splněného a pro smazání. Tyto funkce budou předány do TodoList a následně do jednotlivých TodoItem komponent. Tyto funkce budou aktualizovat stav (pole úkolů) v App.
10. Předání callbacků do TodoItem: Předáme callback funkce pro splnění a smazání do TodoItem komponent přes TodoList.
11. Implementace akcí v TodoItem: V TodoItem komponentě při kliknutí na příslušná tlačítka zavoláme předané callback funkce s id daného úkolu.

Tento projekt demonstruje základní principy práce se stavem v Reactu, předávání dat přes props a interakci mezi komponentami.

Příklady specifické k úlohám

Kromě komplexnějších projektů se hodí procvičovat si specifické úlohy. Zde jsou některé nápady:

• Jednoduchá kalkulačka: Procvičí práci s čísly a základní matematické operace.
• Zobrazení seznamu dat z API: Ukáže, jak načítat data z externích zdrojů (např. pomocí fetch nebo Axios) a zobrazovat je v komponentách.
• Formulář s validací: Procvičí práci s formuláři, sbírání dat z inputů a základní validaci.
• Jednoduchá galerie obrázků: Ukáže práci s obrázky, zobrazování seznamu a detailu obrázku.

Tyto menší projekty pomohou posílit pochopení jednotlivých konceptů Reactu v izolovaných scénářích.

Debugování

Debugování je nezbytnou součástí vývoje softwaru. V Reactu máme k dispozici skvělé nástroje, které nám pomáhají identifikovat a řešit problémy.

Debugging (React DevTools, prohlížeče)

React Developer Tools:

React Developer Tools jsou rozšíření pro prohlížeče (Chrome, Firefox), které vám umožňují prohlížet hierarchii komponent, kontrolovat a upravovat jejich stav (state) a props, a sledovat renderování.

Klíčové vlastnosti React DevTools:

• Komponenty: Zobrazení stromu komponent vaší aplikace. Můžete kliknout na jednotlivé komponenty a vidět jejich props a stav.
• Profiler: Měření výkonu renderování komponent, identifikace úzkých míst.
• Props a State: Možnost inspekce a dokonce úpravy props a stavu komponent v reálném čase. To je velmi užitečné pro testování různých scénářů.
• Source: Odkaz na zdrojový kód komponenty (pokud je k dispozici).

Jak použít React DevTools:

1. Nainstalujte si rozšíření pro váš prohlížeč.
2. Otevřete vývojářské nástroje prohlížeče (obvykle F12).
3. Měli byste vidět novou záložku "Components" a "Profiler".
4. Vyberte záložku "Components" a prozkoumejte hierarchii vašich React komponent.

Nativní nástroje prohlížeče:

Kromě React DevTools jsou pro debugování užitečné i standardní nástroje prohlížeče:

• Console: Použijte console.log() k vypsání hodnot proměnných nebo stavu v různých částech vaší aplikace. To je základní, ale velmi účinný způsob debugování.
• Sources (Zdroje): Zde můžete nastavovat breakpointy v JavaScriptovém kódu. Aplikace se při dosažení breakpointu zastaví, a vy můžete krok za krokem procházet kód, sledovat hodnoty proměnných a tok programu.
• Network (Síť): Užitečné pro debugování problémů s načítáním dat z API. Můžete sledovat HTTP požadavky a odpovědi.

Tipy pro efektivní debugování:

• Zúžte problém: Snažte se identifikovat, kde přesně k problému dochází. Pomocí console.log() postupně zúžujte oblast hledání.
• Kontrolujte props a stav: React DevTools jsou klíčové pro pochopení, jaká data komponenty dostávají a jaký je jejich vnitřní stav.
• Použijte breakpointy: Pokud je problém složitější, breakpointy vám umožní podrobně sledovat tok kódu.
• Izolujte komponenty: Pokud je problém v konkrétní komponentě, zkuste ji na chvíli renderovat samostatně s fixními daty, abyste eliminovali vliv ostatních částí aplikace.
• Čtěte chybové zprávy: React a JavaScript obvykle poskytují užitečné chybové zprávy v konzoli prohlížeče. Pečlivě si je přečtěte a snažte se pochopit, co signalizují.

Debugování je dovednost, která se zlepšuje praxí. S pomocí React DevTools a nástrojů prohlížeče budete schopni rychleji identifikovat a řešit problémy ve vašich React aplikacích.