React: la bibliothèque JavaScript de Facebook se dote de nouveaux outils de développement

React : la bibliothèque JavaScript de Facebook se dote de nouveaux outils de développement
avec plus de fonctionnalités et une extension pour Firefox

Facebook vient de sortir une nouvelle version des outils de développement de sa bibliothèque React. Pour rappel, React est une bibliothèque JavaScript permettant de concevoir les interfaces utilisateurs en faisant abstraction du DOM. L’objectif est d’offrir un modèle de programmation simplifié pour de meilleures performances. Sa dernière version 0.14 beta 1 a été présentée la semaine dernière à Paris lors de la seconde conférence en date rassemblant les acteurs de la communauté autour de cette bibliothèque.

En ce qui concerne les nouveaux outils de développement implémentés par Facebook, il est bon de savoir qu’ils ne sont pas les premiers du genre à soutenir cette bibliothèque. La version antérieure est un fork du panneau Element de Blink. Il est impératif, sujet aux mutations, et étroitement intégré aux API spécifiques de Chrome.

Pour cette nouvelle version, les choses ont été entièrement revues afin d’entretenir un minimum de dépendance au navigateur Chrome et plus de liberté par la même occasion.

Pièce jointe 185202

En guise de nouveautés, elle offre par exemple une vue arborescente. Les composants personnalisés sont mis en surbrillance, la navigation avec le clavier a été améliorée et un composant sélectionné est disponible dans la console en tant que $r.

Par ailleurs, vous pouvez utiliser le clic droit du menu pour parcourir les nœuds dans la vue, montrer la source d’un composant dans le panneau Sources ou encore montrer l’élément dans le panneau Elements.

Autres ajouts, le panneau Side affiche désormais le contexte pour un composant et on peut également faire un clic droit pour stocker la valeur d’un état comme variable globale.

Enfin, vous aurez droit dans cette nouvelle version à une option de recherche. Pour l’utiliser, il vous suffit de sélectionner la barre de recherche ou d’appuyer sur la touche slash afin de rechercher un composant.

Comme avantages mis en avant par Jared Forsyth, l’un des participants au projet, ce dernier soutient que ces outils sont beaucoup plus extensibles, plus personnalisables et 100 % React. De même, il souligne qu’ils sont compatibles avec Firefox et le Framework React Native.

Jared explique que « peut-être la principale raison était de créer une API définie pour traiter les [spécificités] internes, de sorte que d’autres outils pourraient aussi en profiter et ne pas avoir à dépendre des détails de la mise en œuvre. Cela nous donne plus de liberté pour remanier les choses en interne sans se soucier de casser l’outil ».

Pour installer l’extension sur Chrome, vous devez désinstaller l’ancienne version si ce n’est pas encore le cas. Ensuite, vous devez télécharger l’extension et la déposer sur la page chrome://extensions. Pour ceux qui utilisent Firefox, une version initiale a été également mise en œuvre pour. Vous pouvez la télécharger à cette page.

Source : Facebook

:fleche: Télécharger les outils de développement React pour Chrome

:fleche: Télécharger les outils de développement React pour Firefox

Et vous ?

:fleche: Que pensez-vous de ces outils ?

:fleche: Les avez-vous utilisés ? Quelle expérience en avez-vous tirée ?