Qu'est-ce que React et comment fonctionne-t-il réellement ?

Créé par Facebook, React contient une collection d'extraits de code JavaScript réutilisables utilisés pour la construction de l'interface utilisateur (UI) appelés composants.

Il est important de noter que ReactJS n'est pas un framework JavaScript. C'est parce qu'il est uniquement responsable du rendu des composants de la couche de vue d'une application. La plupart des développeurs JavaScript frontaux l'associent à des frameworks comme Angular et Vue pour créer des fonctions complexes.

Cet article explorera les fonctionnalités de React, expliquera son fonctionnement et passera en revue ses avantages pour les développeurs front-end. Nous couvrirons également les différences entre ReactJS et React Native en ce qui concerne leurs rôles dans l'industrie du développement d'applications Web et mobiles.

Enfin, nous discuterons des étapes pour déployer une application React sur un serveur en ligne.

Somaire

• Fonctionnalités de React
• Comment React fonctionne-t-il ?
• Qu'est-ce que React Native ?
• Comment déployer une application React sur un serveur en ligne ?

Fonctionnalités de React

React possède certaines fonctionnalités de base qui le distinguent des autres bibliothèques JavaScript. Les sections suivantes vous présenteront ces fonctionnalités et expliqueront comment elles contribuent au développement d'applications mobiles et Web.

JSX

JSX est une extension de syntaxe JavaScript utilisée dans la création d'éléments React. Les développeurs l'utilisent pour intégrer du code HTML dans des objets JavaScript. Comme JSX accepte les expressions JavaScript valides et l'intégration de fonctions, il peut simplifier les structures de code complexes.

Jetons un coup d'œil à un bloc de code qui montre comment intégrer une expression dans JSX :

const name = 'John Smith;
const element = <h1>Bonjour, {name}</h1> ;
ReactDOM.render(
  element,
  document.getElementById(' root' )
) ;

Dans la deuxième ligne, nous appelons la variable name à l'intérieur d'un élément React en la mettant entre les accolades.

Pendant ce temps, la fonction ReactDOM.render() restitue l'élément React sur l'arborescence DOM (Document Object Model), décrivant l'interface utilisateur.

JSX aide également à lutter contre les attaques de type Cross-Site Scripting (XSS). Par défaut, React DOM convertit les valeurs intégrées dans JSX en chaînes avant de les restituer. Par conséquent, les tiers ne peuvent pas injecter de code supplémentaire via la saisie de l'utilisateur à moins qu'il ne soit explicitement écrit dans l'application.

Plus loin dans l'article, nous discuterons plus en détail du rôle de JSX dans la création de composants React.

DOM virtuel

Le Document Object Model (DOM) présente une page Web dans une structure arborescente de données. ReactJS stocke les arborescences Virtual DOM dans la mémoire. Ce faisant, React peut appliquer des mises à jour à des parties spécifiques de l'arborescence de données, ce qui est plus rapide que de restituer l'intégralité de l'arborescence DOM.

Chaque fois qu'il y a un changement dans les données, ReactJS générera un nouvel arbre DOM virtuel et le comparera avec le précédent pour trouver le moyen le plus rapide possible d'implémenter des changements dans le DOM réel. Ce processus est connu comme différant(diffing) .

En s'assurant que la manipulation de l'interface utilisateur n'affecte que des sections spécifiques de l'arbre DOM réel, le rendu de la version mise à jour prend moins de temps et utilise moins de ressources. La pratique profite grandement aux grands projets avec une interaction utilisateur intense.

Composants et Props

ReactJS divise l'interface utilisateur en morceaux de code réutilisables isolés appelés composants. Les composants React fonctionnent de la même manière que les fonctions JavaScript car ils acceptent des entrées arbitraires appelées propriétés ou props.

Les éléments React renvoyés déterminent à quoi ressemblera l'interface utilisateur du côté client. Voici un exemple de composant de fonction qui renvoie un élément React :

function Bienvenue (props) { 
  return <h1>Bonjour, {props.name}</h1 >;
}

Il est possible d'avoir autant de composants que nécessaire sans encombrer votre code.

Gestion de l'état

Un état est un objet JavaScript qui représente une partie d'un composant. Il change chaque fois qu'un utilisateur interagit avec l'application, générant une nouvelle interface utilisateur pour refléter les modifications.

La gestion des états fait référence à la pratique de gestion des états des applications React. Cela inclut le stockage des données dans des bibliothèques de gestion d'état tierces et le déclenchement du processus de re-rendu chaque fois que les données sont modifiées.

Une bibliothèque de gestion d'état facilite la communication et le partage de données entre les composants React. Plusieurs bibliothèques de gestion d'état tierces sont disponibles aujourd'hui, mais Redux et Recoil sont deux des plus populaires.

Redux

La bibliothèque de gestion d'état Redux dispose d'un magasin centralisé, qui maintient l'arborescence d'état d'une application prévisible. La bibliothèque réduit également l'incohérence des données en empêchant deux composants de mettre à jour l'état de l'application simultanément.

L'architecture de Redux prend en charge la journalisation des erreurs pour un débogage plus facile et dispose d'une méthode d'organisation du code stricte, simplifiant la maintenance. De plus, il comporte un grand nombre d'addons et est compatible avec toutes les couches d'interface utilisateur.

Cela dit, Redux est plutôt complexe et donc sous-optimal pour les petites applications avec une seule source de données.

Recoil

Recoil est une bibliothèque de gestion d'état JavaScript publiée par Facebook. Il utilise des fonctions pures appelées sélecteurs pour calculer des données à partir d'unités modifiables de l'état appelées atomes. Plusieurs composants peuvent souscrire au même atome et ainsi partager un état.

L'utilisation d'atomes et de sélecteurs empêche les états redondants, simplifie le code et élimine les re-rendus excessifs de React et de tout composant enfant. Recoil est plus adapté aux débutants que Redux car ses concepts de base sont considérablement plus faciles à comprendre.

Navigation programmatique

La navigation par programmation fait référence aux instances lorsque des lignes de code créent une action qui redirige un utilisateur. Les actions de connexion et d'inscription, par exemple, dirigent par programme les utilisateurs vers de nouvelles pages.

React Router, la bibliothèque standard de React pour le routage, offre plusieurs moyens de navigation sécurisée entre les composants sans obliger l'utilisateur à cliquer sur un lien.

L'utilisation d'un composant Redirect est la principale méthode de navigation par programmation, history.push() étant une autre approche.

En bref, le package React Router synchronise l'interface utilisateur avec l'URL, vous permettant de contrôler l'apparence des applications React sans dépendre des liens.

Pourquoi utiliser React ?

Des centaines de grandes entreprises dans le monde, telles que Netflix , Airbnb et American Express, utilisent React pour créer leurs applications Web. Dans les sections suivantes, nous discuterons des raisons pour lesquelles tant de développeurs choisissent ReactJS par rapport à ses concurrents.

1. Facile à utiliser

Les développeurs ayant des connaissances en JavaScript peuvent apprendre à utiliser React en un rien de temps car il repose sur du JavaScript simple et une approche basée sur les composants. Il est possible de commencer à développer des applications Web avec React après seulement quelques jours d'étude.

Même si vous n'êtes pas familier avec JavaScript, des tonnes de sites Web proposent des cours de codage gratuits. Une fois que vous connaissez les bases de JavaScript, lisez ReactJS pour rationaliser le processus de développement frontal.

2. Prend en charge les composants Java réutilisables

React vous permet de réutiliser des composants qui ont été développés dans d'autres applications. Étant donné que ReactJS est open source, il est possible de pré-construire des composants, réduisant ainsi le temps de développement d'applications Web complexes.

De plus, React permet d'imbriquer des composants entre d'autres pour créer des fonctions complexes sans surcharger le code. Comme chaque composant a ses propres commandes, il est facile de les entretenir.

3. Écriture de composants plus facile

En raison de l'intégration JSX, il est plus facile d'écrire des composants React, les utilisateurs peuvent créer des objets JavaScript combinés avec une typographie et des balises HTML. JSX simplifie également le rendu de plusieurs fonctions, ce qui permet de garder le code léger sans réduire les capacités de l'application.

Même si JSX n'est pas l'extension de syntaxe la plus populaire, elle s'est avérée efficace dans le développement de composants spéciaux et d'applications dynamiques.

L'outil officiel d'interface de ligne de commande (CLI) de React appelé Create React App rationalise davantage le développement d'applications d'une seule page. Il présente un processus de configuration de construction moderne avec des outils préconfigurés et est excellent pour apprendre ReactJS.

4. Hautes performances

Comme indiqué précédemment, Virtual DOM permet à ReactJS de mettre à jour l'arborescence DOM de la manière la plus efficace possible. En stockant Virtual DOM dans la mémoire, React élimine le re-rendu excessif qui peut nuire aux performances.

De plus, la liaison de données unidirectionnelle de React entre les éléments rationalise le processus de débogage. Toute modification apportée aux composants enfants n'affectera pas la structure parent, réduisant ainsi le risque d'erreurs.

5. Optimisé pour le référencement

ReactJS peut améliorer l'optimisation des moteurs de recherche (SEO) des applications Web en augmentant leurs performances. L'implémentation du DOM virtuel est l'un des facteurs qui influencent les vitesses de page plus rapides .

De plus, React aide les moteurs de recherche à naviguer dans les applications Web en effectuant un rendu côté serveur. Cela résout l'un des problèmes les plus importants rencontrés par les sites Web lourds en JavaScript, car les moteurs de recherche les trouvent généralement difficiles et longs à explorer.

Comment React fonctionne-t-il ?

L'un des plus grands avantages de l'utilisation de React est que vous pouvez insuffler du code HTML avec JavaScript .

Les utilisateurs peuvent créer une représentation d'un node(noeud) du DOM en déclarant la fonction Element dans React. Le code ci-dessous contient une combinaison de HTML et de JavaScript :

React.createElement ("div" , { className: "red" } , "Children Text" ); 
React.createElement (MyCounter, { count: 3 + 5 }); 

Vous avez peut-être remarqué que la syntaxe du code HTML ci-dessus est similaire à XML. Cela dit, au lieu d'utiliser la classe DOM traditionnelle, React utilise className .

Les balises JSX ont un nom, des enfants et des attributs. Les valeurs et expressions numériques doivent être écrites entre accolades. Les guillemets dans les attributs JSX représentent des chaînes, de la même manière que JavaScript.

Dans la plupart des cas, React est écrit à l'aide de JSX au lieu de JavaScript standard pour simplifier les composants et garder le code propre.

Voici un exemple de code React écrit à l'aide de JSX :

MyCounter count = <{ 3 + 5 } / > ;
var GameScores = { player1: 2 ,player2: 5 } ;
<DashboardUnit data-index= "2" >
<h1> Scores</h1>Scoreboard className= "resuts" scores= { GameScores } / >
</DashboardUnit > ;

Voici une ventilation des balises HTML ci-dessus :

• <MyCounter> représente une variable appelée count dont la valeur est une expression numérique.
• GameScores est un objet littéral qui a deux paires prop-valeur.
• <DashboardUnit > est le bloc XML qui est rendu sur la page.
• scores={GameScores} est l'attribut des scores. Il obtient sa valeur à partir du littéral d'objet GameScores défini précédemment.

Une application React a généralement un seul nœud DOM racine. Le rendu d'un élément dans le DOM changera l'interface utilisateur de la page.

Par exemple, le code suivant affiche « Hello World » sur la page en rendant l'élément dans un nœud DOM appelé root .

<div id= "root" ></div >
const element = <h1>Hello World</h1> ;
ReactDOM.render ( element, document. getElementById ( 'root' )) ;

Chaque fois qu'un composant React renvoie un élément, le DOM virtuel mettra à jour le DOM réel pour qu'il corresponde.

Qu'est-ce que React Native ?

React Native est un framework JavaScript open source construit sur la bibliothèque React. Les développeurs l'utilisent pour créer des applications React multiplateformes pour iOS et Android.

React Native utilise des interfaces de programmation d'applications (API) natives pour rendre les composants d'interface utilisateur mobiles en Objective-C (iOS) ou Java (Android). Pour cette raison, les développeurs peuvent créer des composants spécifiques à la plate-forme et partager le code source sur plusieurs plates-formes.

Malgré des similitudes, React Native est différent de ReactJS. Voici une comparaison rapide de React Native et ReactJS : 

Comment déployer une application React sur un serveur

Rendre votre application React publique nécessite un serveur d'hébergement sur lequel la déployer. Comme pour lancer un site Web, vous pouvez le faire en achetant un plan d'hébergement.

Le tutoriel ci-dessous vous montrera comment déployer une application React sur Hostinger (l'héberguer de letecode.com), ceci ne sera pas aussi différent sur d'autres fournisseurs. Assurez-vous d'avoir un nom de domaine au préalable.

1. Ouvrez le fichier package.json de votre application React et placez les paires clé-valeur ci-dessous à l'intérieur du premier crochet. Dans cet exemple, la valeur de la clé de page d'accueil est le chemin d'accès à la page d'accueil de l'application.

   {
       "name": "hostinger-react",
       "homepage": "http://mydomain.com",
       "version": "1.0.0",
       "description": "my react application",

2. Accédez au gestionnaire de fichiers à partir de hPanel. Créez un fichier .htaccess dans le dossier public_html et ajoutez-y le code ci-dessous. Ce fichier servira de pack de construction.

   Options -MultiViews
       RewriteEngine On
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteRule ^ index.html [QSA,L]

3. Si vous disposez d'un hébergement VPS, nous vous recommandons d'installer Node.js et Node Package Manager (NPM) . Exécutez le script de build npm run pour créer un pack de build et téléchargez-le dans le dossier public_html.
4. Supprimez le fichier index.html de votre dossier racine.
5. Tapez l'URL de la page d'accueil de l'application React dans votre navigateur Web pour la déployer.

Conclusion

ReactJS est une bibliothèque JavaScript robuste utilisée dans le développement d'applications Web dynamiques. Il simplifie le codage JavaScript et améliore les performances et le référencement de votre application, entre autres avantages.

ReactJS aide à rationaliser le processus de débogage et réduit le risque d'erreurs en s'engageant dans une liaison de données unidirectionnelle.

Voici un récapitulatif des raisons pour lesquelles vous voudrez peut-être utiliser React :

• Il est facile à utiliser et à apprendre, avec de nombreuses leçons de codage disponibles en ligne.
• Il prend en charge les composants réutilisables, réduisant ainsi le temps de développement.
• JSX facilite le codage et le rendu des éléments.
• Virtual DOM élimine le re-rendu excessif, garantissant les hautes performances de votre application.
• React aide les moteurs de recherche à explorer votre application Web, améliorant ainsi son référencement.

J'espère que cet article vous a aidé à comprendre React JS et ses fonctions dans le développement Web. Si vous avez des notes ou des questions, laissez-les dans la section commentaires ci-dessous.