NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

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 run dev

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

Znalosti v hodnotě stovek tisíc získáš za pár korun

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.

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.

Co od nás v dalších lekcích dostaneš?
  • Přístup k jednotlivým lekcím dle způsobu pořízení.
  • 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íť.

Článek pro vás napsala Laura Baluchová
Avatar
Aktivity