Qu’est-ce que React : Fonctionnalités et Comment le Déployer pour un Développement Web Moderne

React est l’une des bibliothèques JavaScript les plus populaires pour le développement d’applications mobiles et web. Développée par Meta (anciennement Facebook), React permet aux développeurs de créer des composants réutilisables pour construire des interfaces utilisateur (IU).

Il est important de noter que React n’est pas un framework. En effet, il n’est responsable que du rendu des composants de la couche de visualisation d’une application. Cependant, React offre une alternative aux frameworks tels qu’Angular et Vue, vous permettant de construire des fonctionnalités complexes à ses côtés.

Cet article explique le fonctionnement de React, explore ses fonctionnalités et discute des avantages de l’utilisation de React.js pour les développeurs frontaux. Nous comparerons également React.js et React Native, en discutant de leurs fonctions de développement d’applications web et mobiles.

Enfin, nous vous guiderons dans le déploiement d’une application React sur le VPS d’Hostinger.

React JavaScript, ou React.js, gère des interfaces utilisateur complexes, offrant aux développeurs un moyen structuré et efficace de créer des interfaces interactives basées sur des données.

Comment fonctionne React ?

React introduit JSX, une extension syntaxique qui combine de manière transparente le code JavaScript et HTML. Les balises JSX ressemblent au XML à quelques différences près.

Par exemple, React utilise className au lieu de l’attribut class traditionnel pour les classes CSS. Les valeurs numériques et les expressions sont placées entre accolades, tandis que les guillemets désignent les chaînes de caractères, comme en JavaScript.

Voici un exemple d’extrait de code React :

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

Voici une décomposition de l’extrait de code React ci-dessus :

• <MyCounter count={3 + 5} />; – cette ligne rend un composant React MyCounter avec la propriété count fixée à 8.
• const GameScores = { player1: 2, player2: 5 }; – ce code crée un objet, GameScores, avec les scores des joueurs.
• <DashboardUnit data-index= “2”> – il rend un composant DashboardUnit avec un attribut data-index défini sur 2.
• <h1>Scores</h1> – cette ligne rend un élément d’en-tête <h1> avec le texte Scores.
• <Scoreboard className= “results” scores={GameScores} /> – cette ligne rend un composant Scoreboard avec une classe CSS et les scores des matchs passés en tant qu’attributs.

React exploite également le DOM virtuel pour optimiser les performances en minimisant la manipulation directe du DOM. Il calcule les différences entre le DOM virtuel actuel et le précédent lorsque des changements se produisent, mettant ainsi efficacement à jour le DOM réel.

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

L’extrait de code ci-dessus peut être expliqué comme suit :

• const element = <h1>Hello, world!</h1>; – cette ligne crée une variable nommée element et lui assigne un élément JSX. Dans ce cas, il s’agit d’un élément <h1> contenant le texte Hello, world !.
• ReactDOM.render(element, document.getElementById(‘root’)); – ce code utilise la méthode render pour mettre à jour un élément JSX dans le DOM réel. Dans ce cas, il rend l’élément JSX dans l’élément HTML avec l’ID root.

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 cette section, nous allons examiner les raisons pour lesquelles de nombreux développeurs choisissent React plutôt que ses homologues.

1. Simplicité d’utilisation

Les développeurs web ayant des connaissances en JavaScript peuvent apprendre à utiliser React rapidement, car il repose sur du JavaScript simple et suit une approche basée sur les composants. Grâce à lui, vous pouvez développer une application web.

Si vous avez besoin de vous familiariser avec JavaScript, de nombreux sites web proposent des leçons de codage gratuites. Une fois que vous connaissez les bases de JavaScript, lisez les informations sur React pour rationaliser le processus de développement frontal.

2. Prise en charge de composants réutilisables

React vous permet de réutiliser des composants qui ont été développés pour d’autres applications. Vous pouvez ainsi préconstruire des composants React afin de réduire considérablement le temps de développement d’applications web complexes.

En outre, React vous permet d’imbriquer des composants les uns dans les autres pour créer des fonctions complexes sans alourdir le code. Chaque composant React possède ses propres contrôles, ce qui facilite la maintenance.

3. Écriture de composants plus facile

React vous permet de combiner des objets JavaScript avec la syntaxe et les balises HTML. Vous pouvez également écrire des composants et ajouter React à une page HTML existante grâce à l’intégration JSX. JSX simplifie le rendu multifonctionnel, ce qui permet de conserver un code concis sans limiter les capacités de l’application.

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

L’outil officiel de l’interface de ligne de commande (CLI) de React, appelé Create React App, rationalise encore davantage le développement d’applications à page unique. Il propose un processus d’installation moderne avec des outils préconfigurés qui sont excellents pour l’apprentissage de React.

4. Hautes performances

Le modèle d’objet de document virtuel permet à React de mettre à jour l’arbre DOM de manière efficace. En stockant le DOM virtuel en mémoire, React élimine les re-rendus excessifs qui pourraient 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’affecte pas la structure mère, ce qui réduit le risque d’erreurs.

5. Adapté au SEO

React peut améliorer l’optimisation des applications web pour les moteurs de recherche (SEO) en améliorant leurs performances et en réduisant le temps de chargement du code JavaScript. En effet, la mise en œuvre du DOM virtuel contribue à accélérer la vitesse des pages.

Elle aide également les moteurs de recherche à naviguer dans les applications web en permettant un rendu côté serveur. Ce type de rendu permet de relever l’un des défis les plus importants auxquels sont confrontés les sites web à forte composante JavaScript, car les moteurs de recherche les trouvent généralement difficiles et longs à parcourir.

Caractéristiques de React

Les caractéristiques et les fonctionnalités de React.js la distinguent des autres bibliothèques JavaScript. Les sections suivantes présentent ces caractéristiques et expliquent leur contribution au développement d’applications mobiles et web.

1. JSX

JSX est une extension de la syntaxe JavaScript utilisée dans React pour la création d’éléments. Les développeurs l’emploient pour intégrer du code HTML dans les objets JavaScript. JSX peut intégrer des fonctions et des expressions JavaScript, ce qui simplifie les structures de code complexes.

Voyons un exemple d’intégration d’une expression dans JSX :

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

Dans la deuxième ligne, la variable name est intégrée à l’aide de crochets. Cela permet d’inclure du contenu dynamique dans le JSX. Pendant ce temps, la fonction ReactDOM.render(), qui définit l’interface utilisateur, effectue le rendu de l’élément React dans l’arbre DOM.

JSX permet également d’atténuer les attaques de type Cross-Site Scripting (XSS). Par défaut, React DOM convertit les valeurs intégrées dans JSX en chaînes de caractères avant de les rendre. Des tiers ne peuvent donc pas injecter de code supplémentaire par l’intermédiaire de l’entrée de l’utilisateur, à moins que cela ne soit explicitement spécifié dans l’application.

2. DOM virtuel

Le DOM (Document Object Model, ou modèle objet de document) représente une page web sous la forme d’un arbre de données structuré. React stocke les arbres DOM virtuels en mémoire, ce qui lui permet de mettre à jour efficacement des parties spécifiques de l’arbre de données plus rapidement que le re-rendu de l’arbre DOM entier.

À chaque changement de données, React génère un nouvel arbre DOM virtuel et le compare au précédent pour déterminer la manière la plus efficace d’implémenter les changements dans le DOM réel. Ce processus est connu sous le nom de diffing.

Grâce à cette méthode, la manipulation de l’interface utilisateur n’affecte que des sections spécifiques de l’arbre DOM réel, ce qui rend la version mise à jour plus rapide et consomme moins de ressources. Cette pratique est très bénéfique pour les grands projets où l’interaction avec l’utilisateur est intensive.

3. Composants et Props

React divise l’interface utilisateur en morceaux de code isolés et réutilisables appelés composants. Les composants React constituent la base de la création d’interfaces utilisateur. Ils fonctionnent de la même manière que les fonctions JavaScript, acceptant des entrées arbitraires appelées propriétés ou props.

Les éléments React renvoyés, générés lorsque vous rendez des composants React interactifs, sont essentiels pour définir la manière dont l’interface utilisateur apparaîtra du côté du client. Voici un exemple de composant React :

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Les composants interactifs, qu’il s’agisse de composants de classe ou de composants de fonction, reçoivent des données par le biais de propriétés (props) du composant parent. React prend également en charge les composants asynchrones, ce qui permet d’obtenir des données et un rendu efficaces.

Vous pouvez avoir autant de composants React que nécessaire sans encombrer votre code.

4. Gestion des états

Un état est un objet JavaScript contenant les données d’un composant React. Cet état peut changer lorsqu’un utilisateur interagit avec l’application, rendant une nouvelle interface utilisateur qui reflète ces modifications.

La gestion des états peut être assurée par React ou, éventuellement, par des bibliothèques tierces. Celles-ci facilitent la manipulation de données plus complexes et déclenchent le processus de re-rendu chaque fois que les données changent.

Deux des bibliothèques de gestion d’état les plus populaires sont Redux et Recoil.

Redux

La bibliothèque de gestion d’état Redux offre un système centralisé qui maintient l’arbre d’état d’une application, garantissant ainsi la prévisibilité. L’architecture de Redux prend en charge la journalisation des erreurs pour faciliter le débogage et suit une méthode d’organisation du code stricte.

Cependant, Redux peut être complexe et n’est peut-être pas le meilleur choix pour les petites applications avec une seule source de données.

Recoil

Recoil emploie des fonctions pures appelées « sélecteurs » pour calculer des données à partir d’unités d’état actualisables connues sous le nom d’atomes. Plusieurs composants peuvent s’abonner au même atome, ce qui leur permet de partager un état.

Cette approche évite les états redondants, simplifie le code et élimine les rendus excessifs de React et de ses composants enfants. Recoil est souvent considéré comme plus convivial pour les débutants que Redux en raison de ses concepts de base plus simples.

5. Navigation programmatique

La navigation programmatique fait référence à des situations où des lignes de code déclenchent des actions qui redirigent les utilisateurs. Par exemple, lorsque les utilisateurs effectuent des actions de connexion ou d’inscription, la navigation programmatique les dirige vers les pages correspondantes.

React Router, la bibliothèque standard de React pour le routage, offre plusieurs façons de réaliser une navigation programmatique sûre entre les composants sans que les utilisateurs n’aient à cliquer sur des liens.

La principale méthode de navigation programmatique consiste à utiliser un composant Redirect, mais vous pouvez également utiliser history.push().

En bref, le package React Router synchronise l’interface utilisateur avec l’URL, ce qui vous permet de contrôler l’apparence des applications React sans dépendre uniquement des clics sur les liens initiés par l’utilisateur.

Comprendre React Native

React Native est un framework JavaScript open-source basé sur la bibliothèque React. Les développeurs l’utilisent pour créer des applications React multiplateformes pour iOS et Android, offrant une expérience transparente pour les interfaces utilisateur natives.

React Native s’appuie sur les interfaces de programmation d’applications (API) natives pour rendre les composants de l’interface utilisateur mobile en Objective-C (iOS) ou en Java (Android). Cette approche permet aux développeurs de créer des composants spécifiques à une plateforme tout en partageant le code source sur plusieurs plateformes.

Malgré leurs similitudes, React Native diffère de React.js. Voici une comparaison rapide entre React.js et React Native :

Aspect	React.js	React Native
Plateforme	Applications web	Applications mobiles (iOS, Android, etc.)
Rendu	Basé sur le DOM	Composants natifs
Language	JavaScript	JavaScript
Approche de développement	Applications à page unique	Applications mobiles multiplateformes
Composants UI	Composants HTML, CSS et React	Composants natifs et composants React
Navigation	Navigation basée sur le navigateur	Navigation native
Plugins tiers	Extensions, plugins et bibliothèques spécifiques au web	Plugins et bibliothèques mobiles natifs
Performance	Performances sur le web	Performances au niveau natif
Expérience utilisateur	Interface utilisateur basée sur le web	Aspect natif et convivialité

Comment utiliser React ?

La mise en œuvre du développement web avec React implique de suivre différentes étapes et de respecter les meilleures pratiques pour garantir un code efficace et facile à maintenir. Suivez les étapes suivantes pour commencer à utiliser React :

1. Vérifiez l’installation de Node.js et de npm

Avant de travailler avec React, installez Node.js et npm (Node Package Manager) sur votre système. Vous pouvez vérifier leur installation en exécutant les commandes suivantes dans votre terminal :

node -v
npm -v

Si Node.js et npm ne sont pas installés, vous pouvez les télécharger et les installer depuis le site officiel de Node.js.

2. Créez une application React

React propose un outil pratique appelé Create React App qui simplifie la configuration du projet. Pour créer une nouvelle application React, exécutez la commande suivante :

npx create-react-app my-react-app

Remplacez my-react-app par le nom de votre application. Cette commande crée un nouveau projet React avec les fichiers et dépendances nécessaires.

3. Naviguez jusqu’au répertoire de votre projet

Accédez au répertoire de votre projet à l’aide de la commande suivante :

cd my-react-app

4. Démarrez le serveur de développement

Lancez le serveur de développement pour voir votre application React en action :

npm start

Cette commande lance le serveur de développement, rendant votre application React accessible à l’adresse http://localhost:3000. Le serveur de développement fournit également un rechargement en direct, ce qui vous permet d’observer les changements en temps réel lorsque vous modifiez votre code.

5. Explorez la structure du projet

Prenez le temps d’explorer la structure du projet créé par l’application Create React App. Les principaux répertoires sont les suivants :

• src – ce dossier contient le code source de votre application.
• public – ce dossier contient les actifs statiques et le modèle HTML de votre application.

6. Créez votre premier composant React

Ouvrez le répertoire src et naviguez jusqu’au fichier App.js. Ce fichier sert de point d’entrée à votre application React. Modifiez le contenu de ce fichier pour créer votre premier composant React.

Voici un exemple de base d’un composant fonctionnel :

import React from 'react';
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}
export default App;

7. Rendez votre composant

Les composants React reçoivent des données et déterminent ce qui doit apparaître du côté du client. Pour afficher votre composant, effectuez le rendu dans le fichier src/index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

8. Commencez à construire votre application

Votre premier composant React étant prêt, vous pouvez continuer à construire votre application React. Créez d’autres composants, gérez les interactions avec l’utilisateur et les états au fur et à mesure que votre projet évolue.

Comment déployer une application React sur Hostinger ?

Pour rendre votre application React accessible aux utilisateurs sur le web, vous devrez la déployer sur un serveur. L’hébergement VPS d’Hostinger est livré avec un accès root complet, un gestionnaire de fichiers complet et un assistant IA. Il est également facilement évolutif, ce qui en fait un excellent choix pour héberger vos projets React.

Le tutoriel ci-dessous vous explique comment déployer une application React sur Hostinger avec un système d’exploitation Ubuntu 22.04 64bit :

1. Assurez-vous que votre application React soit prête pour la production en créant une version de production. Naviguez vers le répertoire de votre projet qui contient votre application React et exécutez la commande suivante :

npm run build

2. Connectez-vous à votre VPS Hostinger à l’aide de SSH. Ouvrez le terminal et tapez la commande ci-dessous, en remplaçant your_server_ip par votre serveur IP VPS actuel :

ssh root@your_server_ip

3. Ensuite, assurez-vous que votre VPS est à jour en exécutant les commandes suivantes :

sudo apt update
sudo apt upgrade

4. Téléchargez le contenu de votre répertoire de construction sur votre serveur virtuel. Remplacez path/to/your/app par le chemin local de votre répertoire de construction et your-username@your-server-ip:/path/to/destination par le chemin distant approprié sur votre VPS.

scp -r path/to/your/app your-username@your-server-ip:/path/to/destination

5. Installez Node.js et NGINX sur votre VPS en utilisant la commande ci-dessous. Notez que cette action supprimera également Apache2 s’il est installé.

sudo apt-get purge apache2*
curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install -y nodejs nginx

6. Créez un fichier de configuration NGINX pour votre application. Veillez à remplacer your-app par un nom unique et descriptif :

sudo nano /etc/nginx/sites-available/your-app

7. Ajoutez la configuration suivante, en remplaçant your-domain-or-ip par votre nom de domaine ou votre adresse IP et your-port par le port sur lequel tourne votre application :

server {
    listen 80;
    server_name your-domain-or-ip;
    location / {
        proxy_pass http://127.0.0.1:your-port;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

8. Enregistrez et fermez le fichier. Ensuite, créez un lien symbolique pour activer la configuration :

sudo ln -s /etc/nginx/sites-available/your-app /etc/nginx/sites-enabled/

9. Testez la configuration de NGINX à la recherche d’erreurs de syntaxe à l’aide de la commande suivante :

sudo nginx -t

10. S’il n’y a pas d’erreurs, redémarrez NGINX :

sudo service nginx restart

Votre application React est maintenant en ligne et accessible via votre nom de domaine ou votre adresse IP VPS.

Conclusion

React est une bibliothèque JavaScript robuste qui permet aux développeurs web de créer des applications web dynamiques et efficaces. Elle simplifie le codage JavaScript et améliore les performances, ce qui en fait un choix de premier ordre pour le développement frontal.

Voici un récapitulatif des raisons pour lesquelles vous devriez envisager d’utiliser React pour créer des applications web performantes :

• La simplicité de React et l’abondance des ressources de codage en ligne le rendent accessible aux développeurs de tous niveaux.
• React favorise la réutilisation des composants, ce qui réduit considérablement le temps et les efforts de développement.
• JSX facilite le codage et le rendu des éléments, ce qui améliore la lisibilité et la maintenabilité du code.
• Le DOM virtuel de React élimine les re-rendus inutiles, ce qui garantit un fonctionnement fluide et efficace de votre application.
• React utilise un rendu côté serveur qui améliore le temps de chargement des pages de l’application web, ce qui a un impact positif sur le référencement.

React a grandement bénéficié des améliorations continues apportées par l’équipe React. Il s’intègre de manière transparente à diverses technologies, notamment Bootstrap, Tailwind CSS, Axios, Redux et Firebase. Le déploiement d’une application React sur un VPS est également simple avec l’aide de Node.js et NGINX.

Si vous avez des questions ou des idées sur React, n’hésitez pas à nous en faire part dans la section des commentaires ci-dessous.

Qu’est-ce que React – FAQ

Cette section répondra aux questions les plus courantes sur React.