Lekce 22 - Debugování v Reactu - React vývojářské nástroje
V předchozí lekci, Debugování v Reactu - Základy a vývojářské nástroje, jsme si vysvětlili strategie pro debugování a ukázali jsme si debugování pomocí vývojářských nástrojů v prohlížeči.
V dnešním tutoriálu pokročilého Reactu se zaměříme na rozšíření vývojářských nástrojů pro React. Podíváme se na jeho dvě hlavní části, a sice Components a Profiler.
React vývojářské nástroje
Pomocí React vývojářských nástrojů dokážeme zobrazit strukturu aplikace a vidět, jak jsou její komponenty uspořádané. Dokážeme také upravovat props a stav komponent přímo z prohlížeče. Umožňují nám také sledovat výkon aplikace a najít místa, kde dochází ke zbytečnému překreslování komponent.
Nástroje obsahují několik záložek a funkcí, které umožňují prozkoumávat a ladit komponenty. Představíme si je na naší aplikaci s pokémony, kterou si stáhneme z archivu lekce Načítání dat na pozadí.
Stažený soubor rozbalíme a otevřeme ve vybraném editoru kódu. V
terminálu spustíme instalaci npm balíčků a lokálně aplikaci
spustíme:
Příprava projektu:
npm install
npm start
Přidání nástrojů do prohlížeče
Rozšíření vývojářských nástrojů pro React si nejprve přidáme do prohlížeče.
...konec náhledu článku...
Pokračuj dál
Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.
Koupit tento kurz
Před koupí tohoto článku je třeba koupit předchozí díl
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.
- Neomezený a trvalý přístup k jednotlivým lekcím.
- Kvalitní znalosti v oblasti IT.
- Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.
Popis článku
Požadovaný článek má následující obsah:
V tutoriálu pokročilého Reactu si představíme rozšíření vývojářských nástrojů pro React se zaměřením na jeho dvě hlavní části Components a Profiler.
Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.
