Mise à niveau avec les meilleurs outils de développement Web React

Vous pouvez gagner en valeur en apprenant les meilleurs outils pour développer des applications Web avec React.







L'employeur rejette la plupart des CV simplement en les exécutant en diagonale. C'est un peu décourageant, non? Il est donc très important qu'il voie immédiatement les connaissances et les compétences dont il a besoin de votre part. C'est le bon moment pour mettre à niveau, surtout si vous n'avez rien à vous vanter sur votre CV. Vous n'avez pas besoin d'aller à l'université pour acquérir de nouvelles compétences: il vous suffit d'aller dans la bonne direction et de ne pas en dévier.



Si vous savez, par exemple, faire ReactJS, cela vous permettra de devenir un spécialiste plus demandé. Si vous êtes un développeur Web débutant et que vous connaissez déjà JavaScript et HTML, ReactJS est la prochaine étape.



Dans cet article, je vais partager ma liste d'outils et de bibliothèques à apprendre pour devenir un bon développeur JavaScript et utiliser React.



Qu'est-ce que React et pourquoi vaut-il la peine d'apprendre?



React est une bibliothèque js pour le développement d'interfaces utilisateur que Facebook a déployée en mai 2013 (et continue de prendre en charge). Il vous permet de créer des interfaces utilisateur dynamiques en JavaScript.



Puisque React est l'une des bibliothèques js les plus puissantes, vous pouvez faire beaucoup de bonnes choses en l'apprenant. React est utilisé par les développeurs Amazon, PayPal, BBC, CNN et de nombreux autres géants de la technologie. De plus, la bibliothèque est suffisamment flexible pour répondre à tous les besoins. Il peut être utilisé avec votre pile technologique préférée. React peut être utilisé pour créer des tableaux de bord de données, des applications de messagerie, des applications de réseautage social, des applications Web à page unique et des blogs personnels.



Si vous pouvez apprendre React tout en travaillant sur de vrais projets, cela vous aidera non seulement à apprendre rapidement, mais vous donnera également l'occasion de vous montrer à des employeurs potentiels.



13h



Il est clair que cet outil ne sera une révélation pour personne. Je ne pouvais tout simplement pas l'ignorer.



Pour travailler avec JavaScript (y compris la bibliothèque React), vous devez installer le gestionnaire de packages Node ( npm ). Comme le gestionnaire de packages fourni avec votre distribution Linux (ou Chocolatey pour Windows ou Homebrew pour macOS), npm fournit des commandes pour interroger le référentiel de logiciels et installer les packages requis, y compris les composants ReactJS.



Vous pouvez installer Node.js (et npm avec lui) à partir du référentiel de votre distribution Linux.

Sur Fedora ou Red Hat Enterprise Linux, procédez comme suit:



$ sudo dnf install nodejs


Sur Ubuntu ou Debian, c'est légèrement différent:



$ sudo apt install nodejs npm


Si npm n'est pas inclus dans le référentiel de votre distribution, visitez Nodejs.org pour savoir comment installer Node.js et npm dans ce cas.



2. Démarrage rapide



Create React App est un projet de modèle permettant de créer rapidement des applications React. La mise en place d'un projet de travail dans React était une tâche fastidieuse. Mais avec cet outil, vous pouvez configurer un pipeline de construction frontend, une structure de projet, un environnement et une optimisation d'application pour une configuration zéro en quelques secondes. Vous pouvez le faire avec une seule commande. De plus, si vous avez besoin d'une configuration plus complexe, vous pouvez "extraire" Create React App et éditer ses fichiers de configuration directement.



Create React App est distribué en open source sous la licence MIT. Son code source se trouve dans le référentiel GitHub.



Installation:



npm start
npm init react-app my-app


Si vous ne souhaitez pas utiliser l'application Create React, vous pouvez vous tourner vers React Boilerplate et React Slingshot . Les deux sont open source sous la licence MIT.



3. React Sight



React Sight est un outil de visualisation populaire qui vous permet de présenter votre application sous la forme d'une arborescence hiérarchique de composants (comme un organigramme). Il peut être connecté en tant qu'extension Chrome (vous avez toujours besoin de react devtools pour afficher des informations sur votre application). Grâce à son interface, vous pouvez ajouter des filtres pour vous concentrer sur les composants avec lesquels vous avez le plus besoin d'interagir. En survolant les nœuds, vous verrez des informations sur l'état actuel et les accessoires du composant. React Sight est très utile pour le débogage de projets volumineux et complexes.



React Sight est publié sous la licence MIT et vous pouvez accéder à son code source dans le référentiel GitHub. Vous pouvez utiliser le Chrome Web Store pour l' installer .



4. Réagissez Belle



React Belle est une bibliothèque React personnalisée contenant des composants réutilisables: Toggle, Rating, DatePicker, Button, Card, Select, etc. Il est conçu pour offrir une expérience utilisateur pratique. Les composants sont optimisés pour les mobiles et les ordinateurs de bureau. Ils sont hautement personnalisables et prennent en charge les normes d'accessibilité pour les personnes handicapées ( WAI-ARIA ). La bibliothèque prend en charge divers thèmes tels que Belle et Bootstrap.



Belle est publié sous la licence MIT et vous pouvez accéder à son code source à partir du référentiel GitHub.



Installation:



npm install belle


5. Evergreen



Construit au-dessus d'une primitive React UI, Evergreen est un framework d'interface utilisateur contenant des composants de haute qualité que vous pouvez utiliser pour créer votre projet. Les développeurs adorent cet outil pour sa facilité d'importation de composants.



Evergreen est publié sous la licence MIT, et vous pouvez accéder à son code source dans le référentiel GitHub.



Installation:



npm install --save evergreen-ui


6. Bit



Bit est une plate-forme en ligne et un outil de ligne de commande pour la publication et le partage d'applications React. C'est l'une des meilleures options si vous créez et partagez des composants. Son marché est un endroit où les gens peuvent publier leurs applications React et rechercher les composants dont ils ont besoin. Vous n'avez donc pas à réinventer la roue à chaque fois que vous avez besoin d'une nouvelle application ou d'un nouveau composant React.



Alors peu:



  • fournit la réutilisation du code;
  • augmente l'efficacité de la conception et du développement;
  • maintient la cohérence de l'interface utilisateur et de l'expérience utilisateur;
  • augmente la stabilité du projet.


Bit est publié sous la licence Apache 2.0 et vous pouvez accéder à son code source dans le référentiel GitHub.



Installation:



$ npm install bit-bin --global


7. Livre d'histoires



Storybook est un outil permettant de développer rapidement des composants d'interface utilisateur. Il vous permet de visualiser une bibliothèque de composants et de suivre l'état de chacun. Avec StoryBook, vous pouvez développer des composants séparément de votre application, ce qui facilite la réutilisation et le test des composants de l'interface utilisateur.



De plus, l'API Storybook offre de nombreuses fonctionnalités et facilite la personnalisation. Des entreprises telles que Coursera, Squarespace et Lonely Planet utilisent cet outil.



Le Storybook est publié sous la licence MIT et vous pouvez accéder à son code source dans le référentiel GitHub.



Installez d'abord Storybook à l'aide des commandes suivantes:



$ cd my-react-app
$ npx -p @storybook/cli sb init


Ensuite, exécutez la commande d'exécution:



$ npm run storybook


8. Formik



Formik vous aide à créer et valider des formulaires pendant le débogage, les tests et l'analyse. Il vous permet de créer des formulaires dynamiques, vous n'avez donc pas besoin de modifier ou de mettre à jour manuellement l'état et les accessoires de ses composants. Cela rend le développement plus rapide et plus agréable.



Formik est publié sous la licence MIT et vous pouvez accéder à son code source dans le référentiel GitHub.



Installation:



$ npm install formik --save


9. Immer



Immer est une bibliothèque js qui vous permet de maintenir l'immuabilité à mesure que la structure de votre projet devient plus complexe. Plus précisément, la bibliothèque permet de garder facilement votre code immuable.



Certaines des principales caractéristiques d'Immer sont:



  • Immer est fortement typé: cela est utile lorsque votre objet d'état est d'un type.
  • Immer shrinks passe-partout: la plupart des outils de gestion d'état vous obligent à écrire beaucoup de code standard. Immer vous permet d'écrire moins de code.
  • Immer vous permet d'utiliser des structures de données JS: vous pouvez créer des états immuables dans Immer en utilisant des structures de données JS de base.


Immer est publié sous la licence MIT et vous pouvez accéder à son code source dans le référentiel GitHub.



Installation:



$ npm install immer


10. React Proto



React Proto est un outil de prototypage d'applications pour les développeurs et les concepteurs. Il vous aide à planifier la structure de votre projet afin que vous puissiez prendre des décisions à l'avance. Par conséquent, vous ne perdez pas de temps à apporter des modifications pendant le développement. Cet outil est particulièrement utile pour les personnes qui préfèrent la conception au codage: par exemple, vous pouvez faire glisser et déposer des éléments au lieu d'écrire du code pour le faire. L'outil vous aidera à marquer tous les composants sélectionnés et à leur donner des noms, des propriétés et une hiérarchie.



React Proto est publié sous la licence MIT, et vous pouvez accéder à son code source dans le référentiel GitHub.



Pour l'installer, branchez d'abord le référentiel . Ensuite, installez les dépendances avec:



$ npm install


Puis exécutez:




$ npm start
$ npm run dev


Une nouvelle étape dans votre carrière



En gros, vous pouvez trouver vous-même beaucoup de matériel JavaScript et React. Mais, pour en savoir plus sur les outils que j'ai mentionnés dans cet article (et bien d'autres), consultez le référentiel Awesome React GitHub.



En étudiant et en mettant en œuvre ces outils, vous augmenterez votre productivité et rendrez votre CV plus attractif pour l'employeur.






La publicité



Besoin d'un serveur pour votre application ReactJS ou pour tout autre objectif? Nos serveurs épiques avec des processeurs AMD modernes et puissants feront très bien l'affaire. Une large gamme de configurations avec salaire journalier.






All Articles