Article original : Why You Should Use React.js For Web Development

Par Suraj Surve

Si vous êtes nouveau dans React.js, vous devez vous demander pourquoi il est si populaire et pourquoi vous devriez l'utiliser dans vos applications. Si c'est le cas, alors vous êtes au bon endroit.

Discutons de ce qui rend React.js si génial et pourquoi vous devriez l'utiliser dans vos projets.

Table des matières

  • Une brève histoire de React.js
  • Pourquoi devriez-vous utiliser React ?
  • React est flexible
  • React offre une excellente expérience développeur
  • React bénéficie du soutien et des ressources de Facebook
  • React bénéficie également d'un soutien communautaire plus large
  • React offre de grandes performances
  • React est facile à tester

Une brève histoire de React.js

Facebook a créé React.js en 2011 pour son usage interne. Comme vous le savez, Facebook est l'un des plus grands sites de réseaux sociaux au monde aujourd'hui.

En 2012, Instagram a également commencé à l'utiliser, qui est une filiale de Facebook.

En 2013, Facebook a rendu React.js open-source. Initialement, la communauté des développeurs l'a rejeté parce qu'il utilisait le balisage et JavaScript dans un seul fichier. Mais à mesure que plus de gens expérimentaient avec, ils ont commencé à adopter l'approche centrée sur les composants pour séparer les préoccupations.

En 2014, de nombreuses grandes entreprises ont commencé à utiliser React.js dans leurs environnements de production.

En 2015, Facebook a également rendu React Native open-source. Il s'agit d'une bibliothèque qui nous permet de créer des applications mobiles natives pour Android et iOS en utilisant React.js.

En 2016, avec la version 15, React.js a commencé à utiliser la version sémantique. Cela a également aidé à faire comprendre à la communauté des développeurs que React était plus stable.

Aujourd'hui, React.js est utilisé par de nombreuses entreprises du Fortune 500. Facebook dispose d'un personnel de développement React à temps plein. Ils publient régulièrement des corrections de bugs, des améliorations, des articles de blog et de la documentation.

Pourquoi devriez-vous utiliser React ?

Vous devez vous demander pourquoi vous devriez utiliser React.js. Après tout, avec l'augmentation des utilisations de JavaScript ces dernières années, nous avons maintenant plusieurs options disponibles sur le marché comme Angular et Vue.js. Alors, pourquoi React ?

Explorons six raisons clés d'utiliser React.js.

React est flexible

React est remarquablement flexible. Une fois que vous l'avez appris, vous pouvez l'utiliser sur une grande variété de plateformes pour construire des interfaces utilisateur de qualité. React est une bibliothèque, PAS un framework. Son approche de bibliothèque a permis à React d'évoluer en un outil si remarquable.

React a été créé avec un seul objectif : créer des composants pour les applications web. Un composant React peut être n'importe quoi dans votre application web comme un Bouton, du Texte, une Étiquette ou une Grille.

Mais à mesure que la popularité de React a grandi, son écosystème a également évolué pour couvrir divers cas d'utilisation.

Vous pouvez générer un site statique avec React en utilisant des outils comme Gatsby. Vous pouvez utiliser React Native pour construire des applications mobiles. Vous pouvez même créer des applications de bureau en utilisant un outil comme Electron, qui peut fonctionner sur mac et windows avec la technologie React.js.

React supporte également le rendu côté serveur de ses composants en utilisant des outils comme Next.js. Vous pouvez également utiliser React.js pour créer un site web de réalité virtuelle et des expériences à 360 degrés en utilisant React VR.

"Apprenez React une fois et écrivez partout" - Reactjs.org

Vous pouvez utiliser React dans vos applications existantes également. React a été conçu en gardant cela à l'esprit. Vous pouvez modifier une petite partie de votre application existante en utilisant React, et si ce changement fonctionne, alors vous pouvez commencer à convertir toute votre application en React.js. Facebook a utilisé la même approche.

"Le principal avantage d'utiliser une bibliothèque plutôt qu'un framework est que les bibliothèques sont légères, et il y a une liberté de choisir différents outils. Le framework consiste en un écosystème entier pour construire une application, et vous n'avez pas de moyen facile d'utiliser d'autres outils en dehors du framework."

React offre une excellente expérience développeur

Votre équipe tombera amoureuse de React lorsqu'elle commencera à coder avec. Le développement rapide et la petite API de React combinés créent une expérience développeur fantastique.

L'API de React est très simple à apprendre. Elle a très peu de concepts à apprendre. Voici un petit exemple d'un composant React :

Image Composant React

Vous devez simplement importer la bibliothèque React. Message est le composant qui accepte les props (entrée) et retourne du JSX.

JSX est une syntaxe spéciale qui ressemble à HTML, qui convertit les appels d'API de React et rend finalement du HTML.

Les frameworks traditionnels comme Angular et Vue alimentent le HTML. Ils utilisent JavaScript à l'intérieur de HTML. Ils ont créé des attributs HTML qui donnent des capacités supplémentaires.

Le principal problème avec cette approche est que vous devez apprendre ces nouveaux attributs HTML ou toujours garder un œil sur la documentation officielle.

Voici un exemple de boucle dans Angular. Regardez l'attribut ngFor :

Image Exemple de boucles Angular (Source : Angular)

Et voici un exemple de boucle dans Vue.js. Regardez l'attribut v-for :

Image Exemple de boucles Vue (Source : vuejs.org)

React utilise l'approche opposée. Il utilise HTML (JSX) à l'intérieur de JavaScript. J'aime cette approche car ici, vous pouvez traiter avec du JavaScript et du HTML purs.

Voici un exemple de boucle dans React.js

Image Exemple de boucles React (Source : Reactjs.org)

Le composant React NumberList utilise du code JavaScript pur (la fonction map). De plus, vous pouvez voir que JSX est une balise HTML simple et bien connue sans attributs fantaisistes. La fonction render rend simplement le composant NumberList dans l'élément racine dans le fichier HTML.

Que besoin avez-vous en tant que développeur si vous avez une plateforme où vous pouvez traiter avec du JavaScript et du HTML purs et toujours construire une UI interactive ?

Note : Quand je dis "JavaScript pur", cela ne signifie pas que vous utiliserez du JavaScript vanilla dans React. React est une bibliothèque JavaScript, et elle a sa couche au-dessus de JavaScript. MAIS, comme je l'ai dit, l'API React est très petite et simple à apprendre. Angular et Vue vous imposent leurs règles. React est plus conceptuel. Il vous montre comment vous pouvez mieux utiliser JavaScript vanilla à la manière React.

React.js nous offre également le paquet create-react-app, qui vous permet de commencer le développement instantanément.

React bénéficie du soutien et des ressources de Facebook

React est largement utilisé dans l'application Facebook, le site web et Instagram. C'est pourquoi Facebook s'y engage profondément. Ils utilisent plus de 50k composants React dans leur environnement de production. Les quatre principaux contributeurs de React sur GitHub sont des employés à temps plein de Facebook.

Image Principaux contributeurs de React.js

De plus, l'équipe React maintient un blog qui vous donne régulièrement des détails pour chaque version.

En raison de l'engagement profond de Facebook envers React en production, lorsque des changements majeurs se produisent dans React, Facebook fournit régulièrement des Codemod qui automatisent le changement.

Codemod est l'outil en ligne de commande qui automatise les changements dans votre base de code. Lorsqu'une nouvelle spécification arrive dans React, Codemod remplace automatiquement les anciens composants par la nouvelle spécification.

React bénéficie également d'un soutien communautaire plus large

Depuis 2015, la popularité de React n'a cessé de croître. Il dispose d'une communauté active massive et son dépôt GitHub compte plus de 164k étoiles. Il est l'un des 5 principaux dépôts sur GitHub.

Image Dépôt Git de React.

Le paquet NPM de React compte également des millions de téléchargements hebdomadaires.

Image

Plus de 9K entreprises ont rapporté sur Stackshare qu'elles utilisent React. Vous pouvez même voir des entreprises du Fortune 500.

Image Entreprises utilisant React

Reactiflux est une communauté spécialement créée pour les développeurs React. Plus de 110k membres de la communauté sont impliqués dans la résolution et le partage de problèmes liés à React.

L'un des sites web les plus populaires parmi les développeurs de logiciels est StackOverflow. Vous pouvez voir qu'il y a plus de 250k questions posées sur React et les bibliothèques associées.

Image React sur Stackoverflow

Dans certains cas, vous n'avez même pas besoin de créer vos propres composants. Il existe de nombreuses bibliothèques de composants gratuites et matures déjà disponibles en ligne.

Voici quelques exemples :

  • Microsoft a créé la bibliothèque de composants Fluent UI qui vous donne l'opportunité de développer votre UI (ressemblant à office).
  • Material-UI offre des composants React qui implémentent les directives Material UI de Google.
  • React-Bootstrap contient des composants React qui facilitent le travail avec Bootstrap.
  • Consultez également la liste Awesome React Components sur GitHub pour trouver plus de composants React.

Il existe également des projets/bibliothèques associés matures que vous pouvez utiliser avec React.

  • Si vous voulez du routage, alors optez pour React Router. Si vous voulez gérer un système de données plus complexe, alors utilisez Redux et MobX.
  • Pour les tests automatisés, utilisez Jest, qui est également de Facebook.
  • Pour les appels d'API RESTful, utilisez GraphQL.
  • Pour le rendu côté serveur des composants React avec node, utilisez Express.js.

Toutes ces bibliothèques et outils sont importants, car si vous cherchez à construire quelque chose avec React, vous trouverez des tonnes d'aide et de solutions sur le web pour tout.

React offre de grandes performances

L'équipe React a réalisé que JavaScript est rapide, mais que la mise à jour du DOM le rend lent. React minimise les changements de DOM. Et il a trouvé le moyen le plus efficace et intelligent de mettre à jour le DOM.

Avant React, la plupart des frameworks et bibliothèques mettaient à jour le DOM de manière non intelligente pour refléter un nouvel état. Cela entraînait des changements dans une partie importante de la page.

React surveille les valeurs de l'état de chaque composant avec le Virtual DOM. Lorsqu'un état de composant change, React compare l'état DOM existant avec ce à quoi le nouveau DOM devrait ressembler. Après cela, il trouve le moyen le moins coûteux de mettre à jour le DOM.

Cela ne semble pas très facile, mais React le gère très bien en arrière-plan. Il a plusieurs avantages comme éviter le gaspillage de mise en page, qui se produit lorsque le navigateur doit recalculer la position de tout lorsque l'élément DOM change.

De plus, puisque la plupart des applications sont utilisées sur des appareils mobiles, elles doivent être hautement efficaces. Donc, économiser la batterie et la puissance du CPU est très important.

Le modèle de programmation simple de React lui permet de changer d'état automatiquement lorsque les données sont mises à jour. Cela se produit en mémoire, donc c'est rapide.

La taille de la bibliothèque React est également minuscule. Elle est inférieure à 6kb (moins de 3kb lorsqu'elle est compressée). Cela est significativement plus petit que ses concurrents.

React est facile à tester

La conception de React est très conviviale pour les tests.

  • Les tests traditionnels de l'UI du navigateur sont fastidieux à configurer. D'autre part, vous avez besoin de très peu ou pas de configuration pour les tests dans React.
  • Les tests traditionnels de l'UI du navigateur nécessitent des navigateurs pour les tests, mais vous pouvez tester les composants React rapidement et facilement en utilisant la ligne de commande node.
  • Les tests traditionnels de l'UI du navigateur sont lents. Mais les tests en ligne de commande sont rapides, et vous pouvez exécuter une quantité considérable de suites de tests à la fois.
  • Les tests traditionnels de l'UI du navigateur sont souvent chronophages et difficiles à maintenir. Les tests React peuvent être écrits rapidement en utilisant des outils comme Jest et Enzyme.

Il existe une grande variété de frameworks de test JavaScript disponibles sur le web que vous pouvez utiliser pour tester React.js (puisqu'il s'agit également d'une bibliothèque JavaScript). Certains frameworks de test populaires sont Mocha, Jasmine, Tape, QUnit, et AVA.

Conclusion

React est un excellent outil pour créer des applications interactives pour mobile, web et autres plateformes.

La popularité et l'utilisation de React augmentent de jour en jour pour de bonnes raisons. En tant que développeur, coder en React vous rend meilleur en JavaScript, un langage qui détient près de 90% de la part du développement web aujourd'hui.

_Merci d'avoir lu cet article. Connectez-vous avec moi sur LinkedIn et lisez plus sur le développement web sur mon Blog.