Apprenez cet outil très utile que nous devons absolument installer lors de la création d'une application React.
Un outil très utile que nous devons absolument installer lors de la construction d'une application React, comme une application Next.js par exemple, est les outils de développement React.
Disponible pour les deuxChromeetFirefox, les outils de développement React sont un instrument essentiel que vous pouvez utiliser pour inspecter une application React.
Ils fournissent un inspecteur qui révèle l'arborescence des composants React qui construit votre page, et pour chaque composant, vous pouvez aller vérifier les accessoires, l'état, les crochets et bien plus encore.
Une fois que vous avez installé les outils de développement React, vous pouvez ouvrir les outils de développement habituels du navigateur (dans Chrome, faites un clic droit dans la page, puis cliquez surInspect) et vous trouverez 2 nouveaux panneaux:ComposantsetProfiler.
Si vous déplacez la souris sur les composants, vous verrez que dans la page, le navigateur sélectionnera les pièces rendues par ce composant.
Si vous sélectionnez un composant dans l'arborescence, le panneau de droite vous montrera une référence àle composant parent, et les accessoires qui lui sont passés:
Vous pouvez facilement naviguer en cliquant sur les noms des composants.
Vous pouvez cliquer sur l'icône en forme d'œil dans la barre d'outils des outils de développement pour inspecter l'élément DOM, et également si vous utilisez la première icône, celle avec l'icône de la souris (qui se trouve commodément sous l'icône DevTools régulière similaire), vous pouvez survoler un élément dans l'interface utilisateur du navigateur pour sélectionner directement le composant React qui le rend.
Vous pouvez utiliser lebugicône pour enregistrer les données d'un composant dans la console.
C'est assez génial car une fois que les données y sont imprimées, vous pouvez cliquer avec le bouton droit de la souris sur n'importe quel élément et appuyer sur «Stocker en tant que variable globale». Par exemple ici je l'ai fait avec leurlprop, et j'ai pu l'inspecter dans la console en utilisant la variable temporaire qui lui est assignée,temp1:
UtilisantCartes sources, qui sont chargés automatiquement par Next.js en mode développement, à partir du panneau Composants, nous pouvons cliquer sur le bouton<>code et les DevTools basculeront vers le panneau Source, nous montrant le code source du composant:
LeProfilerl'onglet est encore plus génial, si possible. Cela nous permet deenregistrer une interactiondans l'application et voyez ce qui se passe. Je ne peux pas encore montrer d'exemple, car il faut au moins 2 composants pour créer une interaction, et nous n'en avons qu'un maintenant. J'en parlerai plus tard.
J'ai montré toutes les captures d'écran à l'aide de Chrome, mais les outils de développement React fonctionnent de la même manière dans Firefox:
Téléchargez mon gratuitManuel React
Plus de tutoriels de réaction:
- Un exemple d'application simple React: récupérez les informations des utilisateurs de GitHub via l'API
- Construisez un compteur simple avec React
- Configuration de VS Code pour le développement de React
- Comment passer des accessoires à un composant enfant via React Router
- Créez une application avec Electron et React
- Tutoriel: créer une feuille de calcul avec React
- La feuille de route pour apprendre React
- Apprenez à utiliser Redux
- Premiers pas avec JSX
- Composants stylisés
- Introduction à Redux Saga
- Introduction à React Router
- Introduction à React
- Composants React
- Le DOM virtuel
- Réagir les événements
- L'état de réaction
- Accessoires de réaction
- Le fragment de réaction
- L'API de contexte React
- Réagir les types de prop
- Concepts React: déclaratif
- Réagir: comment afficher un composant différent en un clic
- Comment faire une boucle dans React JSX
- Props vs State dans React
- Devriez-vous utiliser jQuery ou React?
- Combien de JavaScript devez-vous connaître pour utiliser React?
- Introduction à Gatsby
- Comment référencer un élément DOM dans React
- Flux de données unidirectionnel dans React
- Réagir des composants d'ordre supérieur
- Événements de cycle de vie de React
- Concept de réaction: immuabilité
- Concept React: Pureté
- Introduction à React Hooks
- Introduction à create-react-app
- Concept de réaction: composition
- Réagir: composants de présentation vs composants de conteneur
- Fractionnement de code dans React
- Rendu côté serveur avec React
- Comment installer React
- CSS dans React
- Utilisation de SASS dans React
- Gestion des formulaires dans React
- Réagir StrictMode
- Portails de réaction
- Réagir les accessoires de rendu
- Test des composants React
- Comment passer un paramètre aux gestionnaires d'événements dans React
- Comment gérer les erreurs dans React
- Comment renvoyer plusieurs éléments dans JSX
- Rendu conditionnel dans React
- React, comment transférer des accessoires vers des composants enfants
- Comment obtenir la valeur d'un élément d'entrée dans React
- Comment utiliser le hook useState React
- Comment utiliser le hook useCallback React
- Comment utiliser le hook useEffect React
- Comment utiliser le hook useMemo React
- Comment utiliser le hook useRef React
- Comment utiliser le hook useContext React
- Comment utiliser le hook useReducer React
- Comment connecter votre application React à un backend de la même origine
- Le didacticiel du routeur Reach
- Comment utiliser les outils de développement React
- Comment apprendre React
- Comment déboguer une application React
- Comment rendre du HTML dans React
- Comment réparer l'erreur `dangerouslySetInnerHTML` ne correspond pas à l'erreur dans React
- Comment j'ai résolu un problème avec un état de formulaire de connexion React et le remplissage automatique du navigateur
- Comment configurer HTTPS dans une application React sur localhost
- Comment corriger l'erreur "Impossible de mettre à jour un composant lors du rendu d'un composant différent" dans React
- Puis-je utiliser des hooks React dans un conditionnel?
- Utiliser useState avec un objet: comment mettre à jour
- Comment déplacer des blocs de code avec React et Tailwind
- Réagissez, concentrez un élément dans React lorsqu'il est ajouté au DOM
- Réagissez, modifiez le texte en double-clic