Le secteur du développement web a connu une croissance constante ces dernières années. Et comme cette croissance se poursuit, de nouvelles technologies apparaissent constamment pour aider les développeurs à créer des sites et des applications web conviviaux.
Au fil des ans, nous avons vu des langages de programmation web produire des fonctionnalités supplémentaires, davantage de langages de programmation être utilisés dans la création de technologies web, et même des frameworks et des bibliothèques être construits sur les structures des technologies existantes.
Dans ce tutoriel, nous parlerons de React – la bibliothèque JavaScript basée sur des composants la plus populaire utilisée pour créer des interfaces utilisateur. Bien que ce tutoriel soit entièrement destiné aux débutants, il peut également servir de guide de référence pour les développeurs React expérimentés.
Nous parlerons des caractéristiques de React, des avantages et des inconvénients, des raisons pour lesquelles vous devriez l’utiliser, et de la façon d’installer et d’utiliser React. Nous verrons également certaines des fonctionnalités de base de React à l’aide d’exemples de code pratiques.
À la fin de ce tutoriel, vous devriez comprendre ce qu’est React et comment il fonctionne, et être capable de l’utiliser pour construire des projets impressionnants.
Qu’est-ce que React ?
React.js, communément appelé simplement React, est une bibliothèque JavaScript utilisée pour construire des interfaces utilisateur. Chaque application web React est composée de composants réutilisables qui constituent des parties de l’interface utilisateur – nous pouvons avoir un composant distinct pour notre barre de navigation, un pour le pied de page, un autre pour le contenu principal, et ainsi de suite. Vous comprendrez mieux cela lorsque nous arriverons à la section où nous devons travailler avec des composants.
Le fait de disposer de ces composants réutilisables facilite le développement car nous n’avons pas à répéter le code récurrent. Il nous suffit de créer sa logique et d’importer le composant dans n’importe quelle partie du code où il est nécessaire.
React est également une application à page unique. Ainsi, au lieu d’envoyer une requête au serveur à chaque fois qu’une nouvelle page doit être rendue, le contenu de la page est chargé directement à partir des composants React. Cela conduit à un rendu plus rapide sans rechargement de la page.
Dans la plupart des cas, la syntaxe utilisée pour construire des applications React est appelée JSX (JavaScript XML), qui est une extension syntaxique de JavaScript. Cela nous permet de combiner la logique JavaScript et la logique de l’interface utilisateur d’une manière unique. Avec JSX, nous éliminons le besoin d’interagir avec le DOM en utilisant des méthodes comme document.getElementById, querySelector, et d’autres méthodes de manipulation du DOM.
Bien que l’utilisation de JSX ne soit pas obligatoire, elle facilite le développement des applications React.
Voici un exemple de la façon dont nous pouvons utiliser JSX dans React :
function App() {
const greetings = "Hello World";
return (
<div className="App">
<h1> {greetings} </h1>
</div>
);
}
}Dans le code ci-dessus, nous avons utilisé un composant fonctionnel React pour rendre un morceau de texte au navigateur. Le nom du composant est App. Nous avons créé une variable avant la fonction render().
Nous avons ensuite transmis cette variable au balisage en utilisant des accolades. Il ne s’agit pas de HTML mais de la syntaxe d’écriture du code à l’aide de JSX.
Dans la prochaine section, nous examinerons certaines des raisons pour lesquelles vous devriez utiliser React.
Pourquoi React ?
De nombreux développeurs et organisations ont choisi React plutôt que d’autres bibliothèques ou frameworks ; voici pourquoi :
- Facile à apprendre : React est facile à apprendre et à comprendre tant que vous avez une bonne maîtrise des pré-requis. React dispose d’une solide documentation et de nombreuses ressources gratuites créées par d’autres développeurs en ligne via la communauté très active de React.
- Composants réutilisables : Chaque composant de React possède sa propre logique qui peut être réutilisée partout dans l’application. Cela réduit le besoin de réécrire le même morceau de code plusieurs fois.
- Opportunités d’emploi : Un plus grand pourcentage d’opportunités de développement web frontend en ce moment ont React comme l’une des compétences requises. Le fait de comprendre le fonctionnement de React et de pouvoir travailler avec lui augmente donc vos chances de décrocher un emploi.
- Performances améliorées : Grâce au DOM virtuel de React, le rendu des pages peut se faire plus rapidement. En utilisant une bibliothèque de routage comme React Router, vous aurez différentes pages rendues sans aucun rechargement de page.
- Largement extensible : React est une bibliothèque qui assure uniquement le rendu de l’interface utilisateur de notre application. C’est au développeur de choisir les outils avec lesquels il souhaite travailler, comme les bibliothèques de rendu de différentes pages, les bibliothèques de conception, etc.
Qui utilise React ?
React a été utilisé par de nombreux ingénieurs frontend dans des start-ups et des entreprises établies comme Facebook, Netflix, Instagram, Yahoo, Uber, The New York Times, et plus encore.
Bien que toutes les entreprises citées ci-dessus n’aient pas construit l’ensemble de leur produit à l’aide de React, certaines de leurs pages ont été construites avec React. Cela s’explique par les hautes performances, la facilité d’utilisation et l’évolutivité de React.
Cas d’utilisation de React
React est généralement utilisé pour construire l’interface utilisateur (frontend) des applications web. Il s’accompagne d’un rendu rapide des pages et de performances accrues. React peut être utilisé pour construire n’importe quel produit qui fonctionne sur le web.
Voici quelques-unes des choses que React est généralement utilisé pour construire :
- Applications de lecteur de musique
- Applications de réseaux sociaux
- Applications de discussion en temps réel
- Applications web complètes
- Applications de commerce électronique
- Applications de météo
- Applications de liste de choses à faire
Caractéristiques de React
React possède une pléthore de fonctionnalités étonnantes qui continuent à en faire une option populaire pour les développeurs.
Voici quelques-unes des principales fonctionnalités de React :
- JSX : Il s’agit d’une extension syntaxique JavaScript qui étend les fonctionnalités de l’ES6 (ECMAScript 2015). Cela nous permet de combiner la logique et le balisage JavaScript dans un composant.
- DOM virtuel : Il s’agit d’une copie de l’objet DOM qui met d’abord à jour et rend à nouveau nos pages lorsque des modifications sont apportées ; il compare ensuite l’état actuel avec le DOM original pour le maintenir en phase avec les modifications. Cela permet un rendu plus rapide des pages.
- Composants : Les applications React sont composées de différents composants réutilisables qui ont leur propre logique et interface utilisateur respective. Cela le rend efficace pour la mise à l’échelle des applications et le maintien de performances élevées, car vous ne dupliquez pas le code aussi souvent que dans d’autres frameworks.
Avantages et inconvénients de React
React est peut-être un outil populaire pour construire nos interfaces utilisateur, mais il y a encore des raisons pour lesquelles certains développeurs ou débutants choisissent de ne pas l’utiliser.
Dans cette section, nous allons parler des avantages et des inconvénients de React.
Voici les avantages de l’utilisation de React :
- React est facile à apprendre et à comprendre.
- React dispose d’une communauté très active où vous pouvez contribuer et obtenir de l’aide si nécessaire.
- Il existe de nombreuses opportunités d’emploi pour les développeurs React.
- React s’accompagne d’une augmentation des performances des applications.
Voici les inconvénients de l’utilisation de React :
- Les débutants qui n’ont pas une solide compréhension de JavaScript (en particulier ES6) peuvent avoir du mal à comprendre React.
- React est dépourvu de certaines fonctionnalités courantes comme la gestion d’un état unique et le routage ; vous devrez installer et apprendre à utiliser des bibliothèques externes pour les obtenir.
Démarrer avec React
Dans cette section, nous parlerons d’abord des conditions préalables à l’utilisation de React, puis nous nous plongerons dans la configuration d’une application React, la création de composants, la gestion des événements et le travail avec les états, les hooks et les props dans React.
Conditions préalables à l’utilisation de React
Avant d’utiliser React, vous devez avoir une bonne compréhension et une bonne expérience de JavaScript. Voici quelques-uns des sujets JavaScript que nous vous recommandons de réviser avant d’utiliser React :
- Fonctions Arrow
- Opérateur Rest
- Opérateur Spread
- Modules
- Destructuration
- Méthodes de tableau
- Littéraux de modèle
- Promesses
- Mots-clés
letetconst
La plupart des sujets ci-dessus relèvent de l’ES6. Vous devez également avoir de l’expérience dans l’utilisation du HTML, car le balisage fait partie de la syntaxe JSX.
Comment installer React
Avant d’installer React, assurez-vous que Node.js est installé sur votre ordinateur.
Une fois que vous l’avez installé, exécutez la commande ci-dessous dans votre terminal :
node -vSi tout s’est bien passé, la commande ci-dessus devrait vous indiquer quelle version de Node.js est actuellement installée sur votre ordinateur.
Ensuite, nous allons exécuter une autre commande pour commencer à installer React.
Tout d’abord, créez un dossier ou naviguez jusqu’à l’emplacement où vous voulez que l’application React soit installée, puis exécutez la commande ci-dessous dans votre terminal :
npx create-react-app react-kitLa commande ci-dessus va installer React dans un dossier appelé react-kit.
Une fois l’installation terminée, ouvrez votre dossier React nouvellement installé dans l’éditeur de code de votre choix. Nous utiliserons Visual Studio Code dans ce tutoriel. Visual Studio Code est livré avec un terminal intégré. Si vous comptez utiliser un autre terminal comme Git Bash ou CMD, il vous suffit de naviguer dans le répertoire de votre application React et d’exécuter la commande ci-dessous :
npm run startCette commande met en route votre serveur de développement. Après un petit moment, vous devriez avoir cette page ci-dessous rendue sur localhost:3000 dans votre navigateur :
Si vous avez suivi jusqu’à ce point, alors vous avez installé avec succès votre première application React. Félicitations !
Lorsque vous jetez un coup d’œil à votre structure de dossiers, vous verrez un dossier appelé public. Ce dossier contient un fichier index.html où notre code sera injecté et servi au navigateur.
Le dossier src est l’endroit où se trouveront toute notre logique, notre style et notre balisage ; c’est notre dossier de développement avec le fichier App.js faisant office de composant racine. Le code de ce fichier est ce que nous avons dans l’image ci-dessus.
Ouvrez le fichier App.js et apportez quelques modifications au fichier, puis enregistrez pour voir qu’il se reflète automatiquement dans le navigateur.
Tout est prêt ? Maintenant, écrivons un peu de code !
Les composants dans React
Il existe deux principaux types de composants dans React : les composants de classe et les composants fonctionnels. La documentation de React est actuellement en cours de réécriture à l’aide de Hooks, qui est une fonctionnalité que l’on trouve dans les composants fonctionnels. Nous utiliserons également les composants fonctionnels dans ce tutoriel car ils sont devenus les composants les plus utilisés pour les applications React.
Dans la plupart des cas, les composants renvoient du code HTML avec un mélange de valeurs dynamiques créées à l’aide de JavaScript. Les composants sont créés comme des fonctions en JavaScript.
Création d’un composant de classe React
Regardons un exemple de composant de classe dans React.
Chaque composant de classe doit inclure l’instruction React.Component et l’instruction render() subclass.
class Student extends React.Component {
constructor() {
super();
this.state = {language: "JavaScript"};
}
render() {
return <p>I am learning {this.state.language} </p>;
}
}Dans le composant ci-dessus, nous avons créé une variable d’état appelée language avec une valeur de chaîne de caractères de « JavaScript ». Nous avons ensuite utilisé cette variable dans notre balisage. Cet exemple montre comment nous pouvons mélanger JavaScript et HTML sans faire référence à aucune méthode DOM.
Lors du rendu dans le navigateur, nous verrons le message « I am learning JavaScript » affiché sur la page.
Création d’un composant fonctionnel React
Dans cette section, nous allons recréer l’exemple de la dernière section en utilisant un composant fonctionnel.
Ajoutez cette fonction à votre fichier :
function Student() {
const language = "JavaScript";
return (
<div>
<p>I am learning { language } </p>
</div>
);
}Le nom de notre composant est le même : Student. Commencez toujours le nom de vos composants par une majuscule. Cette variable a également été passée dans le balisage comme nous l’avons fait dans la dernière section sans manipuler le DOM à l’aide de méthodes JavaScript DOM vanille.
Ce composant possède également une variable Student qui a été rendue, mais au fur et à mesure que nous progressons dans le tutoriel, nous utiliserons un Hook appelé useState Hook pour créer nos variables d’état.
Gestion des événements dans React
Les événements utilisés dans React sont entièrement similaires à ceux que nous utilisons en HTML. La seule différence ici est que les événements React sont écrits en syntaxe camelCase. Ainsi, « onclick » sera « onClick » dans React, « onchange » sera « onChange », et ainsi de suite.
Lorsque nous transmettons un événement en tant qu’attribut dans une balise HTML, nous utilisons des accolades : onClick={changeName} au lieu des guillemets onClick=”changeName”
Voici un exemple (dans le fichier App.js) :
import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;Dans le code ci-dessus, nous avons créé une fonction qui alerte un message dans le navigateur. Nous avons également créé un bouton qui appelle cette fonction lorsqu’il est cliqué. Le gestionnaire d’événements utilisé ici est le gestionnaire d’événements onClick.
Vous avez remarqué que le nom de la fonction était entouré de crochets et non de guillemets. C’est ainsi que l’on peut transmettre des valeurs dynamiques comme les noms de variables et de fonctions dans le balisage lorsqu’on utilise JSX.
De plus, au lieu d’utiliser « class » comme nous le ferions en utilisant HTML, nous utilisons « className ». Ceci est dû au fait que « class » est un mot réservé en JavaScript.
Nous avons exporté notre composant à la dernière ligne. Cela nous permet de les importer dans d’autres composants.
Travailler avec les états dans React
Pour gérer l’état de notre application dans React, nous utilisons un Hook appelé useState Hook. Les Hooks nous permettent d’accéder à des fonctionnalités supplémentaires de React sans écrire une classe.
Avec les Hooks, nous pouvons gérer l’état de notre composant, et même exécuter certains effets lorsque nos variables d’état sont rendues pour la première fois ou modifiées.
Sans le hook useState dans un composant fonctionnel, toute modification apportée à nos variables d’état ne sera pas répercutée dans le DOM et l’état restera donc inchangé.
Voyons un exemple.
import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;Maintenant, regardons ce que nous venons de faire.
Nous avons d’abord importé le hook useState de React. Nous avons ensuite créé une variable d’état appelée name et une fonction – setName – qui sera utilisée pour mettre à jour la valeur de la variable name. La valeur initiale de la variable name est stockée dans le useState Hook sous le nom de « John ».
Ensuite, nous avons créé une fonction appelée changeName, qui utilise la fonction setName pour mettre à jour la valeur de la variable nom.
Dans notre balisage, une fois que le bouton est cliqué, « John » est changé en « James ».
Dans la section suivante, nous verrons comment utiliser un autre Hook dans React.
Travailler avec des hooks dans React
Dans la dernière section, nous avons vu comment gérer l’état de notre application à l’aide du hook useStatet. Dans cette section, nous allons voir comment utiliser le hook useEffect.
Le Hook useEffect exécute un effet à chaque fois qu’un changement se produit dans un état. Par défaut, ce hook s’exécute au premier rendu et à chaque fois que l’état est mis à jour mais nous pouvons configurer et attacher un effet à une variable d’état respective.
Voyons quelques exemples :
import { useState, useEffect } from "react";
function App() {
const [day, setDay] = useState(1);
useEffect(() => {
console.log(`You are in day ${day} of the year`);
});
return (
<div>
<button onClick={() => setDay(day + 1)}>Click to increase day</button>
</div>
);
}
export default App;La première chose que nous avons faite ici a été d’importer le hook useEffect.
Chaque fois que nous cliquons sur le bouton, la variable name est augmentée d’une unité. Cette modification de la valeur de name fait ensuite en sorte que le hook useEffect enregistre un message dans la console – cela se produit chaque fois que la variable name change.
Dans la prochaine section, nous parlerons des Props et du flux de données entre les composants.
Travailler avec des Props dans React
Les Props nous permettent de faire passer des données d’un composant à un autre. Cela rend le flux de données dans notre application dynamique et maintenable. Props est l’abréviation de properties (propriétés).
Voyons un exemple de la façon dont nous pouvons utiliser les Props.
Voici à quoi ressemble notre fichier App.js:
function App() {
return (
<div>
</div>
);
}
export default App;Nous créons un autre composant appelé Bio.js qui ressemble à ceci :
function Bio() {
return (
<div>
<p>My name is John</p>
<p>I am a JavaScript developer</p>
</div>
);
}
export default Bio;Ensuite, nous allons importer le composant Bio dans notre composant App comme ceci :
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio/>
</div>
);
}
export default App;La première ligne est celle où nous avons importé le composant Bio. Nous avons ensuite placé le composant entre les balises div dans notre composant App. Lorsque vous visualisez ceci dans le navigateur, vous verrez le code que nous avons créé dans le composant Bio être rendu.
Vous comprenez maintenant comment le code peut être réutilisable dans React. Mais ce code est statique ; il sera le même dans tous les composants dans lesquels il est utilisé. Cela ne sera pas efficace dans les cas où nous voudrions utiliser le même composant mais avec des informations différentes.
Corrigeons cela en utilisant Props.
Dans le composant Bio.js, faites ceci :
function Bio({name, language}) {
return (
<div>
<p>My name is { name }</p>
<p>I am a { language } developer</p>
</div>
);
}
export default Bio;Nous avons d’abord déstructuré et transmis name et language comme paramètres. Ces paramètres ont ensuite été utilisés dynamiquement dans notre balisage.
Nous avons exporté le composant dans la dernière ligne de code : export default Bio; pour nous permettre de l’importer dans tout autre composant nécessitant sa logique.
Pour l’instant, nous ne voyons pas de valeur à afficher. Nous ferons cela dans le composant App; voici comment :
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio name="James" language="Python"/>
</div>
);
}
export default App;Nous avons ajouté des attributs à notre balise Bio correspondant aux props que nous avons créés précédemment. Toute valeur que nous passons dans ces attributs sera rendue sur le navigateur. Ceci est important pour les composants qui seront utilisés dans plusieurs composants mais qui nécessitent des données différentes.
Où en apprendre plus
Ce tutoriel vous a donné les connaissances fondamentales nécessaires pour commencer à créer des applications web avec React, mais ce n’est pas tout ce qu’il y a à savoir sur React. Il y a encore d’autres fonctionnalités nécessaires pour construire une application efficace avec React comme le routage dans les applications qui ont plus d’une page et la gestion d’un état unique en utilisant des outils comme Redux.
Le meilleur endroit pour commencer à en savoir plus sur React est la documentation React. Vous pouvez également consulter la documentation bêta en cours de réécriture à l’aide de hooks.
Résumé
React en tant que bibliothèque frontend n’a cessé de croître massivement par rapport aux autres bibliothèques ou frameworks dans la communauté des développeurs et ne montre aucun signe d’arrêt. Vous pouvez trouver React sur la feuille de route de tout développeur web moderne.
Avec l’adoption actuelle de la technologie web3 par de plus en plus de développeurs, React est resté l’outil préféré pour construire le frontend des applications décentralisées (DApps).
Vous pouvez construire une variété d’applications avec React, des simples applications web de liste de tâches aux places de marché, tableaux de bord, et ainsi de suite.
React peut être utilisé avec de nombreuses technologies comme Bootstrap, Tailwind CSS, Axios, Redux, Firebase, et bien plus encore. Nous pouvons également utiliser React avec Node.js et d’autres langages backend pour construire des applications full-stack et des applications web qui fonctionnent à la vitesse de l’éclair.
