article(s) dans votre panier VOIR

React Devtools

  • Vidéo 35 sur 36
  • 2h55 de formation
  • 36 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
React Devtools
00:00 / 03:33
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans cette vidéo en ligne, l'auteur vous présente l’add-on React Dev Tools avec ReactJS. Cette formation a pour objectif d’arriver à intégrer à votre navigateur web un outil de développement pour ReactJS. Premièrement, tout au long de l’utilisation de votre navigateur pour l’aperçu de la vue de votre application, vous avez du noter la présence d’une mention vous invitant à télécharger React DevTools. Celle-ci se trouve au niveau de la console du mode Développeur. En cliquant sur le lien en bas de cette mention, vous êtes redirigés vers une page de la documentation React vous présentant l’outil React DevTools. En fin de page de cette documentation, vous disposez de plusieurs liens de téléchargement de l’outil en question suivant le type de navigateur que vous utilisez. Cet outil est principalement disponible pour les navigateurs disposant d’un espace pour les développeurs comme Google Chrome et Mozilla Firefox. Ainsi, en téléchargeant l’add-on de l’outil et en l’intégrant à votre navigateur, vous obtenez dans votre espace Développeur un nouvel onglet nommé React. Par la suite, en lançant la connexion avec votre projet React, vous disposez de deux fenêtres distinctes contenant respectivement sur la droite tous les composants de votre routeur et sur la gauche, les props utilisés par chacun de ces composants. De plus, les composants affichés au niveau de la fenêtre des composants React ne sont pas transcrits en HTML comme c’est le cas pour l’affichage dans la vue de l’outil de développement web intégré au navigateur. Par ailleurs, certains props non spécifiés dans votre code initial sont présents au niveau des props de vos composants. En effet, c’est l’ensemble des Pops appliqués ou non qui sont listés dans la fenêtre des Props. A partir des noms de composants placés sur le bas de la fenêtre, vous pouvez procéder à une recherche des composants. Pour conclure, l’utilisation de l’outil React DevTools vous permet d’obtenir un aperçu global de tous les props de vos composants.