Section courante

A propos

Section administrative du site

Les premiers pas

React.js est une bibliothèque JavaScript open source, développée et maintenue par Facebook, conçue pour créer des interfaces utilisateur dynamiques et interactives. Sa principale force réside dans son approche déclarative et son utilisation des composantes. Contrairement à d'autres bibliothèques ou cadres d'applications front-end, React.js se concentre uniquement sur la vue (le "V" dans le modèle MVC), permettant aux développeurs de construire des interfaces réactives et modulaires. Cette flexibilité a fait de React.js un choix populaire pour les applications Web modernes.

React simplifie le développement d'applications complexes grâce à son modèle basé sur des composantes réutilisables. Cela permet de diviser une interface utilisateur en petites parties indépendantes et gérables. En outre, React.js utilise un DOM virtuel (Virtual DOM), optimisant les performances en réduisant le nombre d'opérations coûteuses sur le DOM réel. Il offre également une intégration facile avec d'autres bibliothèques ou cadres d'applications, ce qui le rend adapté à une variété de projets, qu'il s'agisse de petites applications ou de systèmes complexes.

Les bases de React.js : Les composantes et JSX

Le coeur de React.js repose sur les composantes, étant des blocs de construction réutilisables. Une composante peut être une simple fonction JavaScript ou une classe retournant du code JSX. JSX (JavaScript XML) est une extension de syntaxe permettant de mélanger du HTML dans le code JavaScript.

Gestion de l'état avec React.js

Une autre caractéristique clef de React.js est sa capacité à gérer l'état d'une application. Chaque composante peut avoir un état interne (state) déterminant comment il se comporte ou ce qu'il affiche. Par exemple, un bouton changeant de couleur lorsqu'il est cliqué peut utiliser l'état pour conserver la couleur actuelle. Avec les crochets, comme useState, React.js rend la gestion de l'état plus intuitive et accessible dans les composantes fonctionnelles :

  1. import React, { useState } from 'react';
  2.  
  3. function Button() {
  4.   const [clicked, setClicked] = useState(false);
  5.  
  6.   return (
  7.     <button onClick={() => setClicked(!clicked)}>
  8.       {clicked ? "Cliquez à nouveau" : "Cliquez-moi"}
  9.     </button>
  10.   );
  11. }

Créer votre première application React.js

Pour démarrer avec React, vous pouvez utiliser l'outil Create React App, configurant une base de projet prête à l'emploi. Après avoir installé Node.js, exécutez la commande suivante dans votre terminal :

npx create-react-app mon-premier-projet

Cela crée une structure de projet avec toutes les dépendances nécessaires. Une fois installé, naviguez dans le dossier du projet et lancez le serveur de développement :

cd mon-premier-projet
npm start

Vous verrez une application de base s'ouvrir dans votre navigateur. À partir de là, vous pouvez commencer à modifier le code dans le fichier src/App.js pour explorer et construire votre première interface avec React.js.

Créer et imbriquer des composantes

Les applications React.js sont constituées de composantes. Une composante est un élément de l'interface utilisateur (UI) possédant sa propre logique et sa propre apparence. Une composante peut être aussi petit qu'un bouton ou aussi grand qu'une page entière.

Les composantes React.js sont des fonctions JavaScript renvoyant un balise :

  1. function MyButton() {
  2.   return (
  3.     <button>Je suis un bouton</button>
  4.   );
  5. }

Maintenant que vous avez déclaré MyButton, vous pouvez l'imbriquer dans une autre composante :

  1. export default function MyApp() {
  2.   return (
  3.     <div>
  4.       <h1>Bienvenue sur mon application</h1>
  5.       <MyButton />
  6.     </div>
  7.   );
  8. }

Notez que <MyButton />; commence par une majuscule. C'est ainsi que vous savez qu'il s'agit d'une composante React.js. Les noms des composantes React doivent toujours commencer par une majuscule, tandis que les balises HTML doivent être en minuscules.

Les mots clefs export default spécifient la composante principale du fichier. Si vous n'êtes pas familier avec certains éléments de la syntaxe JavaScript, consulter la section JavaScript.

Écrire du balisage avec JSX

La syntaxe de balisage que vous avez vue ci-dessus s'appelle JSX. Elle est facultative, mais la plupart des projets React.js utilisent JSX pour sa commodité. Tous les outils que nous recommandons pour le développement local prennent en charge JSX dès la sortie de la boîte.

JSX est plus strict que HTML. Vous devez fermer les balises comme <br />. Votre composante ne peut pas non plus renvoyer plusieurs balises JSX. Vous devez les encapsuler dans un parent partagé, comme un <div>...</div> ou une enveloppe <>...</> vide :

  1. function AboutPage() {
  2.   return (
  3.     <>
  4.       <h1>À propos</h1>
  5.       <p>Bonjour.<br />Comment allez-vous ?</p>
  6.     </>
  7.   );
  8. }

Ajout de styles

Dans React, vous spécifiez une classe CSS avec className. Cela fonctionne de la même manière que l'attribut de classe HTML :

  1. <img className="avatar" />

Ensuite, vous écrivez les règles CSS pour cela dans un fichier CSS séparé :

  1. /* Dans votre CSS */
  2. .avatar {
  3.   border-radius: 50%;
  4. }     

React ne prescrit pas la manière d'ajouter des fichiers CSS. Dans le cas le plus simple, vous ajouterez une balise <link> à votre code HTML. Si vous utilisez un outil de création ou un cadre d'application, consultez sa documentation pour savoir comment ajouter un fichier CSS à votre projet.

Affichage des données

JSX vous permet d'insérer du balise dans JavaScript. Les accolades vous permettent de revenir en arrière dans JavaScript afin que vous puissiez intégrer une variable de votre code et l'afficher à l'utilisateur. Par exemple, cela affichera user.name :

  1. return (
  2.   <h1>
  3.     {user.name}
  4.   </h1>
  5. );

Vous pouvez également «échapper vers JavaScript» à partir des attributs JSX, mais vous devez utiliser des accolades au lieu de guillemets. Par exemple, className="avatar" transmet la chaîne de caractères «avatar» comme classe CSS, mais src={user.imageUrl} lit la valeur de la variable user.imageUrl de JavaScript, puis transmet cette valeur comme attribut src :

  1. return (
  2.   <img
  3.     className="avatar"
  4.     src={user.imageUrl}
  5.   />
  6. );

En React.js, l'attribut style={{}} permet d'ajouter des styles directement à un élément HTML en ligne en utilisant une syntaxe JavaScript. Contrairement au style CSS traditionnel, où les règles de style sont écrites sous forme de chaînes de caractères ou dans des fichiers séparés, React.js utilise un objet JavaScript pour définir ces styles.

L'attribut style dans React attend un objet JavaScript. Cet objet contient des paires clef-valeur, où les clefs représentent les noms des propriétés CSS (en camelCase) et les valeurs définissent les styles correspondants.

Voici un exemple simple :

  1. function StyledButton() {
  2.   return (
  3.     <button style={{ backgroundColor: 'blue', color: 'white', padding: '10px', border: 'none' }}>
  4.       Cliquez-moi
  5.     </button>
  6.   );
  7. }     

Rendu conditionnel

Dans React.js, il n'existe pas de syntaxe spéciale pour écrire des conditions. Au lieu de cela, vous utiliserez les mêmes techniques que celles que vous utilisez pour écrire du code JavaScript classique. Par exemple, vous pouvez utiliser une instruction if pour inclure JSX de manière conditionnelle :

  1. let content;
  2. if (isLoggedIn) {
  3.   content = <AdminPanel />;
  4. } else {
  5.   content = <LoginForm />;
  6. }
  7. return (
  8.   <div>
  9.     {content}
  10.   </div>
  11. );

Si vous préférez un code plus compact, vous pouvez utiliser l'opérateur conditionnel «?». Contrairement à if, il fonctionne dans JSX :

  1. <div>
  2.   {isLoggedIn ? (
  3.     <AdminPanel />
  4.   ) : (
  5.     <LoginForm />
  6.   )}
  7. </div>

Lorsque vous n'avez pas besoin de la branche else, vous pouvez également utiliser une syntaxe logique && plus courte :

  1. <div>
  2.   {isLoggedIn && <AdminPanel />}
  3. </div>

Toutes ces approches fonctionnent également pour spécifier des attributs de manière conditionnelle. Si vous n'êtes pas familier avec une partie de cette syntaxe JavaScript, vous pouvez commencer par toujours utiliser if...else.

Rendu des listes

Vous vous appuierez sur des fonctionnalités JavaScript comme la boucle for et la fonction array map() pour restituer des listes de composantes.

Par exemple, supposons que vous ayez un tableau de produits :

  1. const products = [
  2.   { title: "Chou", id: 1 },
  3.   { title: "Ail", id: 2 },
  4.   { title: "Pomme", id: 3 },
  5. ];

À l'intérieur de votre composante, utilisez la fonction map() pour transformer un tableau de produits en un tableau d'éléments <li> :

  1. const listItems = products.map(product =>
  2.   <li key={product.id}>
  3.     {product.title}
  4.   </li>
  5. );
  6.  
  7. return (
  8.   <ul>{listItems}</ul>
  9. );     

Notez que <li> possède un attribut clef. Pour chaque élément d'une liste, vous devez transmettre une chaîne ou un numéro identifiant de manière unique cet élément parmi ses frères et soeurs. En général, une clef doit provenir de vos données, comme un ID de base de données. React.js utilise vos clefs pour savoir ce qui s'est passé si vous insérez, supprimez ou réorganisez ultérieurement les éléments.

Répondre aux événements

Vous pouvez répondre aux événements en déclarant des fonctions de gestion d'événements à l'intérieur de vos composantes :

  1. function MyButton() {
  2.   function handleClick() {
  3.     alert("Tu m'as fait un déclic !");
  4.   }
  5.  
  6.   return (
  7.     <button onClick={handleClick}>
  8.       Cliquez sur moi
  9.     </button>
  10.   );
  11. }

Notez que onClick={handleClick} n'a pas de parenthèses à la fin ! N'appelez pas la fonction de gestion d'événements : il vous suffit de la transmettre. React appellera votre gestionnaire d'événements lorsque l'utilisateur cliquera sur le bouton.

Mise à jour de l'écran

Vous souhaiterez souvent que votre composante «mémorise» certaines informations et les affiche. Par exemple, vous souhaiterez peut-être compter le nombre de fois qu'un bouton est cliqué. Pour ce faire, ajoutez state à votre composante.

Tout d'abord, importez useState depuis React :

  1. import { useState } from "react";

Vous pouvez maintenant déclarer une variable d'état à l'intérieur de votre composante :

  1. function MyButton() {
  2.   const [count, setCount] = useState(0);
  3.   /* ... */

Vous obtiendrez deux choses à partir de useState : l'état actuel (count) et la fonction vous permettant de le mettre à jour (setCount). Vous pouvez leur donner n'importe quel nom, mais la convention est d'écrire [quelque chose, setSomething].

La première fois que le bouton s'affiche, count sera 0 car vous avez passé 0 à useState(). Lorsque vous souhaitez modifier l'état, appelez setCount() et transmettez-lui la nouvelle valeur. Cliquer sur ce bouton incrémentera le compteur :

  1. function MyButton() {
  2.   const [count, setCount] = useState(0);
  3.  
  4.   function handleClick() {
  5.     setCount(count + 1);
  6.   }
  7.  
  8.   return (
  9.     <button onClick={handleClick}>
  10.       J'ai cliqué {count} fois
  11.     </button>
  12.   );
  13. }

React.js appellera à nouveau votre fonction de composante. Cette fois, le nombre sera de 1. Puis il sera de 2. Et ainsi de suite. Si vous restituez la même composante plusieurs fois, chacun obtiendra son propre état. Notez comment chaque bouton «se souvient» de son propre état de comptage et n'affecte pas les autres boutons.

Utilisation des crochets

Les fonctions commençant par use sont appelées crochets (ou Hook en anglais). useState est un crochet intégré fourni par React.js. Vous pouvez trouver d'autres crochets intégrés dans la référence API. Vous pouvez également écrire vos propres crochets en combinant ceux existants.

Les crochets sont plus restrictifs que les autres fonctions. Vous ne pouvez appeler des crochets qu'en haut de vos composantes (ou d'autres crochets). Si vous souhaitez utiliser useState dans une condition ou une boucle, extrayez une nouvelle composante et placez-le là.

Partage de données entre composantes

Dans l'exemple précédent, chaque MyButton avait son propre décompte indépendant, et lorsque chaque bouton était cliqué, seul le décompte du bouton cliqué changeait.

Cependant, vous aurez souvent besoin de composantes pour partager des données et toujours les mettre à jour ensemble.

Pour que les deux composantes MyButton affichent le même nombre et se mettent à jour ensemble, vous devez déplacer l'état des boutons individuels «vers le haut» vers la composante le plus proche les contenant tous.

Désormais, lorsque vous cliquez sur l'un des boutons, le nombre dans MyApp change, ce qui modifie les deux nombres dans MyButton. Voici comment vous pouvez exprimer cela dans le code.

Tout d'abord, déplacez l'état de MyButton vers MyApp :

  1. export default function MyApp() {
  2.   const [count, setCount] = useState(0);
  3.  
  4.   function handleClick() {
  5.     setCount(count + 1);
  6.   }
  7.  
  8.   return (
  9.     <div>
  10.       <h1>Compteurs mis à jour séparément</h1>
  11.       <MyButton />
  12.       <MyButton />
  13.     </div>
  14.   );
  15. }
  16.  
  17. function MyButton() {
  18.   // ... nous déplaçons le code d'ici ...
  19. }

Ensuite, transmettez l'état de MyApp à chaque MyButton, ainsi que le gestionnaire de clics partagé. Vous pouvez transmettre des informations à MyButton à l'aide des accolades JSX, comme vous l'avez fait précédemment avec des balises intégrées telles que <img> :

  1. export default function MyApp() {
  2.   const [count, setCount] = useState(0);
  3.  
  4.   function handleClick() {
  5.     setCount(count + 1);
  6.   }
  7.  
  8.   return (
  9.     <div>
  10.       <h1>Des compteurs se mettant à jour ensemble</h1>
  11.       <MyButton count={count} onClick={handleClick} />
  12.       <MyButton count={count} onClick={handleClick} />
  13.     </div>
  14.   );
  15. }     

Les informations que vous transmettez ainsi sont appelées props. La composante MyApp contient désormais l'état count et le gestionnaire d'événements handleClick, et les transmet tous deux en tant qu'accessoires à chacun des boutons.

Enfin, modifiez MyButton pour lire les accessoires que vous avez transmis à partir de sa composante parent :

  1. function MyButton({ count, onClick }) {
  2.   return (
  3.     <button onClick={onClick}>
  4.       J'ai cliqué {count} fois
  5.     </button>
  6.   );
  7. }

Lorsque vous cliquez sur le bouton, le gestionnaire onClick se déclenche. Le prop onClick de chaque bouton a été défini sur la fonction handleClick dans MyApp, donc le code à l'intérieur de celui-ci s'exécute. Ce code appelle setCount(count + 1), incrémentant la variable d'état count. La nouvelle valeur count est transmise en tant que prop à chaque bouton, donc ils affichent tous la nouvelle valeur. C'est ce qu'on appelle «remonter l'état». En déplaçant l'état vers le haut, vous l'avez partagé entre les composantes.



Dernière mise à jour : Lundi, le 20 janvier 2025