React Developer Tools
React Developer Tools (vývojářské nástroje pro React) slouží k prozkoumávání React komponent, k úpravám vlastností a stavů, a k detekování možných problémů s výkonem aplikace.
You will learn
- Jak si nainstalovat React Developer Tools
Rozšíření prohlížeče
Nejjednodušší způsob, jak ladit webové stránky vytvořené pomocí Reactu, je nainstalovat si React Developer Tools jako rozšíření do prohlížeče. Tyto nástroje jsou k dispozici pro následující prohlížeče:
Nyní, když po instalaci navštívíte jakoukoliv webovou stránku vytvořenou v Reactu, uvidíte panely s názvy Components a Profiler.
Safari a jiné prohlížeče
Pro další prohlížeče (jako například Safari) si nainstalujte npm balíček react-devtools
:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
Poté otevřte tyto nástroje pomocí terminálu:
react-devtools
A dále je napojte do vaší stránky přídáním <script>
tagu na začátek <head>
:
<html>
<head>
<script src="http://localhost:8097"></script>
Nyní obnovte stránku v prohlížeči a nástroje se vám zobrazí.
Mobilní prostředí (React Native)
React Developer Tools lze zároveň využít i k prozkoumávání aplikací vytvořených za pomocí React Native.
Nejjednodušší způsob je nainstalovat tyto nástroje globálně:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
Poté nástroje otevřte v terminálu:
react-devtools
Nástroje se nyní samy spojí s vaší React Native aplikací, která běží v lokálním prostředí.
Zkuste obnovit aplikaci pokud se nástroje po několika sekundách nepřipojí samy.