Discutons de quelques excellents outils qui peuvent rendre les développeurs React plus productifs et améliorer la qualité de leur travail.
Habituellement, lorsque je démarre un nouveau projet, j'utilise mon propre modèle pour les outils que j'ai ajoutés à cette liste. Je travaille également avec d'autres outils comme Material UI. Je les ai étudiés, créé plusieurs applications avec leur aide et mis en œuvre quelques petits projets, après quoi j'ai décidé de partager les résultats.
Jetons donc un œil à la liste finale.
ESLint
ESLint a beaucoup à changer pour tout développeur JavaScript, y compris les fans de React. Le service propose des algorithmes intelligents qui analysent rapidement le code, à la recherche de bogues éventuels.
De plus, il vous permet de résoudre automatiquement les problèmes trouvés sans changer la syntaxe.
Pour commencer, je recommanderais d'utiliser la configuration suggérée par les développeurs d'Airbnb. Il contient:
- Prise en charge intégrée de la bibliothèque React (par exemple, prise en charge des règles d'utilisation des hooks).
- Concentrez-vous sur les meilleures pratiques.
ESLint est un incontournable pour tout projet, et la configuration Airbnb est l'une de mes préférées. J'y ai ajouté quelque chose, mais il reste 90% de la configuration initiale.
Bit
Bit fournit quelque chose dont les développeurs React ont besoin en tant que plateforme de collaboration. Il permet aux équipes de travailler ensemble sur des composants individuels.
C'est un utilitaire de ligne de commande qui vous permet d'écrire du code réutilisable. Bit est complètement open source et c'est l'une des raisons de sa popularité.
La plupart des fonctionnalités sont liées à la création de composants atomiques, ils peuvent donc être facilement partagés avec d'autres développeurs. En outre, il est également possible de vérifier les dépendances des composants, en les testant séparément du projet principal.
Créer une application React
En tant que développeur React, vous savez très bien combien de temps il faut pour démarrer un nouveau projet. Pour gagner du temps, les développeurs de Facebook ont suggéré Create React App .
Il s'agit d'un "constructeur" initial qui vous permet de vous concentrer sur le développement, et non sur la personnalisation, de React. Tout ce que vous avez à faire est d'exécuter la commande npx create-react-app my-app. Ensuite, vous avez une application entièrement configurée pour le projet.
Create React App augmentera considérablement votre efficacité si vous travaillez en tant que pigiste React pour plusieurs clients en même temps.
Réagir Cosmos
React Cosmos est un environnement de développement conçu pour créer des interfaces utilisateur évolutives et de haute qualité.
Le service permet de s'engager facilement dans le prototypage et le test de composants d'interface individuels. De plus, vous pouvez itérer avec lui sans craindre de casser votre code. Il facilite le processus de débogage en isolant les composants.
React Cosmos est mieux utilisé pour travailler avec des applications de niveau entreprise. La division d'un projet en petits composants réutilisables vous permet d'écrire un code de qualité facile à maintenir.
Boîte à outils React
Au début de cet article, j'ai mentionné que j'utilise Material UI pour la plupart des projets. Il y a une raison à cela: j'aime la conception matérielle et l'interface utilisateur matérielle est ce qui me convient parfaitement.
Mais il existe aussi des alternatives. L'un d'eux est React Toolbox . Il s'agit d'une collection de composants couramment utilisés développés à l'aide de Material Design. Il utilise des modules CSS pour plus de flexibilité.
Au moment d'écrire ces lignes, React Toolbox comprend 28 composants. Certains d'entre eux sont Application Drawer, Date Picker, Switcher et Snack Bar.
Réagir Bootstrap
Un site Web adapté aux mobiles est une norme moderne. Les utilisateurs s'attendent à ce que votre site fonctionne bien sur n'importe quel appareil. Les sites au design réactif permettent même aux moteurs de recherche de se démarquer.
De nombreux développeurs utilisent Bootstrap pour créer des sites Web réactifs et évolutifs avec des conceptions professionnelles. Le problème est que Bootstrap est livré avec des composants natifs qui ne sont pas intégrés à React.
La solution est le package open source React Bootstrap . Tous ses composants Bootstrap ont été modifiés spécifiquement pour les développeurs React.
Réagir à la fronde
Vous souhaitez accélérer le développement de votre application React? Essayez d'évaluer React Slingshot . C'est un modèle qui combine React, Redux et Babel.
La caractéristique la plus importante de Slingshot qui le distingue des autres outils est son retour rapide. Cette fonctionnalité automatise le processus de peluchage, de tests unitaires et de rechargement à chaud chaque fois que l'application est mise à jour. De cette façon, vous pouvez vous concentrer sur la logique métier plutôt que sur les tâches superflues.
Réagir
Ils disent qu'un développeur est aussi bon que son éditeur. Ce n'est peut-être pas tout à fait vrai, mais l'éditeur est très utile dans notre travail. Personnellement, je suis un grand fan de JetBrains et WebStorm. Mon choix est IDE, mais j'essaye de temps en temps des alternatives.
Par exemple, j'ai trouvé que Reactide est un IDE pour React. J'ai été très surpris par cette découverte et j'ai essayé l'outil.
Il s'est avéré qu'il avait des fonctionnalités intéressantes. Par exemple, vous pouvez rendre les composants de votre projet directement dans l'EDI. Il existe également un serveur Node.js intégré qui est intégré au simulateur de navigateur.
Un outil intéressant, même si je ne pense pas que j'y passerai complètement. Mais c'est une bonne option pour ceux qui travaillent avec ou apprennent React et ne veulent pas rencontrer de problèmes même pendant la phase de configuration.
Bibliothèque de tests de réaction
"Les tests d'abord!" - ce que je répète constamment.
En d'autres termes, il est important de disposer d'un ensemble d'outils de test. La bibliothèque de tests de réaction est une petite bibliothèque. Il vous permet de tester votre code React sans trop de problèmes. La bibliothèque est facile à utiliser et ajoute des fonctionnalités aux bibliothèques standard telles que react-dom et react-dom / test-utils.
Une excellente documentation avec quelques bons exemples vous permettra d'être rapidement opérationnel.
Livre d'histoires
Storybook fournit un environnement de développement interactif dans lequel vous pouvez créer de nouveaux composants, les tester ou sélectionner des composants existants dans une bibliothèque.
Storybook est suffisamment flexible pour fonctionner avec n'importe quel framework JavaScript majeur. Par exemple React, Vue.js, Angular, Svelte, Marko et même du HTML brut.
La meilleure chose à propos de Storybook est qu'il est livré avec divers modules complémentaires. Voici un certain nombre d'ajouts que je trouve intéressants:
- google-analytics (ajoute la prise en charge de Google Analytics pour les composants);
- plaisanterie ;
- storyshots (vérification des composants à l'aide de snapshots);
- fenêtre (modification du balisage pour les composants réactifs)
J'espère que vous apprécierez cette liste. Si vous utilisez d'autres outils sympas qui ne sont pas mentionnés dans le texte, écrivez-les dans les commentaires!