Bonus n°1 : Débogguer votre application

Maintenant que vous savez développer une application avec React, vous aurez sûrement envie de développer vos propres applications. Pour vous faciliter la tâche, l’éco-système de React propose un outil pour faciliter vos développements. Et je me dois de vous présenter cet outil, car il est très pratique. Son petit nom est React Developer Tools.

L’objectif de cet outil est de vous permettre de mieux comprendre le fonctionnement de vos application lors du développent. Plus besoin de placer les fameux console.log partout dans votre code, pour savoir si tel ou tel donnée à été prise en compte dans le state de votre composant, ou la valeur de telle prop en entrée d’un composant. Cela vous dit quelque chose ? 😉

La solution est donc d’installer l’extension React Developer Tools dans votre navigateur Chrome :

L’outil React Developer Tools vous permettra de faciliter et d’accélérer vos développements.

Ensuite, vous devez vérifier que l’installation s’est bien passé. Pour cela, retournez dans votre application de pokémons et jeter un oeil en haut à droite de votre navigateur. Vous devriez voir le logo de React, en rouge :

Il est possible de vérifier si une page web a été développée avec React ou non.

Parfait, on dirait que l’installation de l’extension React Developer Tools a fonctionné !

Et c’est maintenant que la magie va opérer. Ouvrez la console de développement de votre navigateur (De souvenir, appuyez sur F12 depuis Windows, et Alt + Cmd + i sur Mac). Plusieurs onglets sont alors disponibles, vous retrouverez les onglets : Console, Réseaux, etc. En regardant bien, vous devriez voir un petit nouveau, l’onglet « *Component« . C’est un onglet rajouté par l’extension React Developer Tools pour nous faciliter la vie. Je ne peux que vous recommandé de cliquer sur ce nouvel onglet, si ce n’est pas déjà fait.

Vous devriez voir un écran similaire s’afficher :

L’outil React Developer Tools en action !

À gauche, vous pourrez apercevoir la liste des composants de votre application. Ils sont tous regroupés au même endroit, à travers une arborescence simple. Plutôt pratique pour s’y retrouver, surtout lorsque l’application devient importante !

Et encore plus intéressant, à droite. Vous pouvez apercevoir pour chaque composant la liste des props et des données du state qu’il contient. Dans mon cas, j’ai sélectionné le composant Login, et je peux voir à droite le state de mon formulaire. Lorsque je saisi la valeur « Pikachu » dans un composant, je peux voir que le state en bas à droite et mis à jour. Imaginez le temps que vous allez économiser lors de vos développements, à éviter d’ajouter des console.log partout dans votre code ! 🔥

L’extension React Devoper Tools propose également un nouvel onglet *Profiler, actuellement en phase d’expérimentation. Je pense que vous n’aurez pas besoin de l’utiliser, il permet plus ou moins de mesurer les performances d’applications importantes. Mais encore une fois, ce n’est pas encore prêt à 100%.

Voilà, vous êtes maintenant mieux équipé pour affronter le développement d’applications web avec React. J’espère que cet outil vous plaira autant que moi ! 😉

Excellent développement à vous ! 👍