Que fait React et en quoi diffère-t-il des autres bibliothèques / frameworks JavaScript? Découvrons les concepts qui distinguent React.

Vous avez maintenant entendu parler de React. L'enquête « State of JavaScript 2020 » montre que React est la version JavaScript la plus utilisée. Et l'enquête Stack Overflow 2020 classe React comme la deuxième technologie frontale la plus appréciée, juste derrière ASP.NET, qui laisse toujours React comme la meilleure bibliothèque JavaScript.

Mais si vous êtes toujours Je ne sais pas quel est le problème, explorons ce qu'est React, comment il fonctionne, ce qui le rend spécial et différent des autres frameworks et pourquoi une majorité de la communauté JavaScript a adopté React et a commencé à l'utiliser dans leurs produits et entreprises. [19659004] Qu'est-ce que React et comment ça marche?

Sorti par Facebook en 2013, React est une bibliothèque JavaScript pour la création d'applications modernes. React est utilisé pour gérer la couche de vue et peut être utilisé pour le développement d'applications Web et mobiles.

Fonctionnalités de React

Ce sont les fonctionnalités qui rendent la bibliothèque React si efficace et puissante pour créer des applications modernes. permet à React de se démarquer des autres frameworks et bibliothèques:

Virtual DOM

DOM (Document Object Model) est la partie la plus importante des applications Web – il représente la structure d'une page Web de document, principalement HTML. [19659010] Le DOM représente un document avec une arborescence logique. Chaque branche de l'arborescence se termine par un nœud et chaque nœud contient des objets. Les méthodes DOM permettent un accès par programme à l'arborescence. – MDN

La manipulation DOM est largement utilisée de nos jours parce que les applications modernes nécessitent beaucoup de changements d'état, d'animations, d'effets, etc.

Imaginez que vous avez une application et que chaque fois qu'il y a un changement d'état, vous voulez mettre à jour uniquement les parties de votre arborescence DOM qui dépendent de ces changements. Vous ne voulez pas restituer l'intégralité de votre interface utilisateur à partir de zéro, car cela coûterait cher, en termes de performances, et l'UX serait mauvais.

React fonctionne avec une fonctionnalité appelée virtual DOM une représentation virtuelle de l'arbre DOM réel. Il s’agit simplement d’une structure de données arborescente d’objets JavaScript simples qui sont synchronisés en mémoire. Le rendu du DOM virtuel est plus rapide car il ne sera jamais rendu à l'utilisateur, il ne vivra qu'en mémoire.

Lorsque votre application React se charge, React crée une copie de votre véritable arborescence DOM. Chaque fois qu'il y a un changement d'état dans une partie de votre application, au lieu de restituer la totalité de l'arborescence du DOM réel, React met d'abord à jour son DOM virtuel avec l'état mis à jour.

Ensuite, React compare son DOM virtuel à votre véritable arbre DOM pour savoir ce qui doit être changé. Ensuite, cela change votre véritable arbre DOM, mais cela ne changera que les éléments qui doivent être modifiés, rien d'autre.

Le DOM virtuel est l'une des fonctionnalités qui rend le framework React si rapide et fiable.

JSX [19659019] React utilise une extension de syntaxe de JavaScript appelée JSX . Nous l'utilisons pour créer des «éléments» React.

<img src = "https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/2021/2021-02/react-element.png" alt = "L'image montre le code avec 'const element =

Mon élément React utilisant JSX

'"title =" react-element "/>

JSX est utilisé par des préprocesseurs (tels que Babel ) pour transformer du texte de type HTML dans des fichiers JavaScript en objets JavaScript qui seront analysés.

React ne nécessite pas l'utilisation de JSX mais la majorité des développeurs trouvent que cela aide à mieux fonctionner avec l'interface utilisateur à l'intérieur du code JavaScript.

JSX est un partie importante de React car nous l'utilisons pour créer des composants React.

Composants

Les composants React sont ce qui rend notre code réutilisable et divise notre interface utilisateur en différentes parties.

Les composants React fonctionnent de la même manière que les fonctions JavaScript. Un composant React accepte les entrées arbitraires que nous appelons props et devrait toujours renvoyer un élément React décrivant ce qui doit être rendu à l'utilisateur.

La façon simple de définir un composant React est de définir une fonction JavaScript et de renvoyer un élément React, comme ceci: [19659003] <img src = "https://d585tldpucybw.cloudfront.net/s fimages / default-source / blogs / 2021 / 2021-02 / component.png "alt =" L'image montre la fonction de lecture de code Welcome (props) {return

Mon premier composant React

; } '"title =" component "/>

Nous avons défini un composant React appelé Welcome qui accepte un seul accessoire appelé props, qui représente properties et renvoie un élément React, dans ce cas un simple Élément h1.

Un composant React doit toujours renvoyer un élément React, sinon il génère une erreur.

Les composants React suivent le principe de conception séparation des préoccupations ce qui signifie que nous devons séparer un ordinateur programme (dans ce cas, notre application) dans différentes sections, de sorte que chaque section aborde des problèmes distincts.

Les composants React sont vraiment puissants car ils nous aident à garder un code plus propre, plus robuste et concis dans toute notre application. Nous pouvons avoir autant de composants React que nous le voulons.

React vs. Angular, Vue et autres Frameworks

Différent de Angular et Vue, le framework React propose une manière différente de penser le flux de données. [19659003] En développement web nt, nous avons quelque chose appelé MVC (Model View Controller) . Il s'agit d'un modèle architectural qui sépare une application en trois composants logiques principaux différents appelés Model View et Controller . L'architecture MVC est largement utilisée dans les applications angulaires.

Model stocke toutes les données et la logique associée.

View est la partie de l'application qui représente la façon dont les données vont à présenter. Les vues sont créées à partir des données qu'il reçoit du modèle.

Controller est la partie de l'application qui gère les interactions de l'utilisateur. Les contrôleurs envoient des commandes au modèle pour mettre à jour son état.

React ne gère que l'interface utilisateur, donc beaucoup de gens pensaient que React n'était que le V dans une architecture MVC . Mais c'est plus que cela.

Comme le dit le blog React.js :

React n'est pas un framework MVC.
React est une bibliothèque pour créer des interfaces utilisateur composables . Il encourage la création de composants d'interface utilisateur réutilisables qui présentent des données qui changent au fil du temps.

React est une puissante bibliothèque d'interface utilisateur JavaScript permettant de créer des applications modernes. Comme A. Sharif dit: " React a introduit un moyen d'écrire l'interface utilisateur en fonction de son état ."

Vos composants décrivent exactement comment vous voulez votre interface utilisateur. Vous fournissez les données pour React, et React s'occupe du reste du travail. Aussi simple que cela. Vous n'avez pas à vous soucier de la manière dont vous allez mettre à jour le DOM, de la méthode que vous allez utiliser, etc. Vous pouvez vous concentrer sur la description de ce que vous voulez mettre à jour votre interface utilisateur.

( Consultez ce blog pour une comparaison approfondie entre React, Angular et Blazor.)

Qu'est-ce que React Native?

React Native est un framework d'application mobile JavaScript permettant de créer des applications mobiles pour iOS et Android à l'aide de React. Il utilise toute la puissance et les fonctionnalités de la bibliothèque React pour créer de véritables applications mobiles natives qui peuvent «vraiment» se sentir natives applications.

Apprenez une fois, écrivez n'importe où. – Slogan React Native

React Native était publié par Facebook en 2015 en tant que projet open-source et est rapidement devenu l'un des frameworks les plus utilisés pour développer des applications mobiles natives. L'équipe Facebook l'a publié en utilisant le paradigme «apprendre une fois, écrire n'importe où», ce qui permet aux développeurs d'écrire facilement une application iOS et d'écrire facilement la même application pour Android sans trop de problèmes.

React Native a été créé pour fonctionner de la même manière à React lui-même – il a les mêmes fonctionnalités, telles que la syntaxe JSX, les composants, le DOM virtuel, etc. Avec toutes ces fonctionnalités, React Native est très convivial pour les débutants et facile à utiliser si vous en savez un peu plus sur le fonctionnement de React

De nombreuses grandes entreprises utilisent React Native. Des sociétés Fortune 500 établies aux nouvelles startups, ces entreprises l'utilisent quotidiennement et atteignent des millions d'utilisateurs— Facebook Instagram Shopify Coinbase Discord Walmart etc. Pour ne citer que quelques entreprises qui utilisent React Native pour alimenter leurs applications et atteindre des millions de clients.

React Libraries

] Nous avons atteint un point en JavaScript où nous avons une variété de bibliothèques pour résoudre un tas de problèmes différents. Nous avons des bibliothèques de formulaires, des bibliothèques de routage, des bibliothèques de gestion d'état, des compilateurs, etc.

Lorsque nous travaillons avec React, nous travaillons inévitablement avec Node.js et grâce à Node, nous pouvons pour utiliser npm qui est un gestionnaire de packages pour les packages Node.js, le plus grand registre de logiciels au monde. npm est utilisé par les développeurs pour publier, découvrir, installer et développer des packages de code.

Puisque React est le framework JS le plus utilisé, le nombre de packages React disponibles est énorme. Il existe de nombreuses bibliothèques React célèbres qui nous aident à commencer à créer des éléments complexes et robustes avec React, et ensuite, nous en apprendrons un peu plus à leur sujet.

Bibliothèques de composants d'interface utilisateur

Une bibliothèque de composants d'interface utilisateur est un ensemble de composants prêts à l'emploi qui fournissent des éléments de base pour nos applications. Chaque application a ses particularités de conception, mais toutes ont besoin d'une bibliothèque de composants d'interface utilisateur.

L'utilisation d'une bibliothèque de composants d'interface utilisateur apporte de nombreux avantages, tels que vitesse, compatibilité, accessibilité, robustesse, facilité d'utilisation, etc.

KendoReact est l'une des plus grandes bibliothèques de composants d'interface utilisateur pour les applications React. Il s'agit d'une bibliothèque complète avec une variété de composants différents qui nous aident à gagner du temps et à ajouter de la robustesse à nos applications React. KendoReact vaut la peine d'être vérifié car il a une documentation bien écrite avec beaucoup d'exemples et il est très facile de démarrer.

CLIs

Les boilerplates sont les bienvenus dans tous les aspects de la programmation. Les boilerplates sont des blocs de code réutilisables qui nous aident à démarrer plus rapidement.

La configuration des applications React depuis le début peut parfois être difficile. Il faut beaucoup de packages différents pour configurer correctement un projet React.

Create React App est un outil CLI qui nous aide à commencer à créer des applications React. Cela nous fait gagner des heures en installant et en configurant notre application.

Nous n'avons besoin d'exécuter qu'une seule commande sur notre terminal, et Create React App configure tout pour que nous puissions commencer avec notre application React:

npx create-react-app my-app

React State Management

Chaque développeur React peut convenir que la gestion de l'état est la partie la plus importante des applications React.

Parce que c'est une partie si importante et qu'il y en a une tonne des différentes solutions de gestion d'état dans les applications React, les bibliothèques de gestion d'état constituent probablement la majorité des bibliothèques React disponibles aujourd'hui.

La bibliothèque de gestion d'état la plus connue et la plus utilisée dans React est Redux . Il a une courbe d'apprentissage abrupte et fonctionne avec une approche différente de celle à laquelle vous êtes peut-être habitué. Redux conserve vos données d'état dans un magasin et chaque composant peut accéder au magasin.

Redux a également introduit quelques concepts différents tels que les actions et les réducteurs. Les actions sont essentiellement des événements qui envoient des données. Les réducteurs sont de pures fonctions qui prennent l'état actuel, exécutent une action et retournent un nouvel état.

Recoil est une bibliothèque alternative de gestion d'état qui gagne en popularité. Ce blog couvre les différences entre ces deux bibliothèques de gestion d'état largement utilisées .

Routage

Le routage est une partie importante de toute application moderne. L'utilisateur doit toujours pouvoir naviguer d'une page à une autre.

Le navigateur a quelque chose appelé History API qui est une API qui vous permet d'interagir avec la barre d'adresse et l'historique de navigation. Nous pourrions utiliser l'API History dans nos applications React, mais le fait est qu'elle pourrait devenir complexe à mesure que notre application se développe et que nous avons besoin de fonctionnalités plus avancées.

React Router est la bibliothèque de routage standard pour React. React Router dispose d'une API simple mais puissante pour créer une couche de routage pour votre application React et maintenir votre interface utilisateur synchronisée avec l'URL. Il dispose de fonctionnalités puissantes, telles que la correspondance d'itinéraire dynamique, le chargement de code paresseux et la gestion des transitions d'emplacement. Ici vous pouvez en savoir plus sur la façon de naviguer en toute sécurité entre les composants à l'aide du package React Router .

Conclusion

React est la bibliothèque d'interface utilisateur JavaScript la plus utilisée au monde pour créer des applications modernes. Ce qui distingue React des autres frameworks, ce sont les fonctionnalités et concepts puissants introduits par React, tels que JSX, le DOM virtuel, les composants, etc.

Lorsque vous apprenez React, vous n'avez pas à vous soucier des bibliothèques au début . Tout d'abord, apprenez les bases, le fonctionnement de React, les fonctionnalités de React par rapport à d'autres frameworks et bibliothèques.

Après avoir créé quelques projets barebones, vous ressentirez le besoin d'utiliser certaines bibliothèques pour aller plus loin. Il existe une tonne de bibliothèques différentes pour résoudre la plupart des problèmes, alors choisissez-en une qui a une bonne documentation pour vous aider à démarrer.

Par rapport à d'autres bibliothèques telles que Angular et Vue, React a une plus grande communauté (le dépôt React sur GitHub a 164K étoiles et 6,7K observateurs, alors que l'Angular a 70,7K étoiles et 3,2K observateurs au moment de la rédaction de ce blog). Le marché du travail pour ceux qui veulent apprendre React semble brillant et il y a beaucoup de postes vacants.

La route pour apprendre le framework React n'est pas facile, mais elle est payante à la fin. React est une technologie qui ouvre des portes à ceux qui l'apprennent et les aide à devenir de meilleurs développeurs.