Retour

2/ ReactJS: Les composants

Dans ce chapitre, nous allons explorer les composants ReactJS en détail.

Les composants sont la pierre angulaire de ReactJS et vous permettent de construire des applications modulaires et réutilisables.

Dépot GITHUB

Prérequis

Il est conseillé d'avoir suivi l'article d'introduction à ReactJS:

ReactJS: Introduction.

Déscription du chapitre

Dans ce chapitre, nous allons explorer les composants ReactJS en détail.

Les composants permettent de construire des applications réactives en découpant votre application en petits morceaux réutilisables et gérables séparément.

Vous allez découvrir comment créer des composants, les organiser en structures plus complexes et les utiliser pour construire des applications réactives.

Objectifs

Comprendre les composants ReactJS et leur importance pour la construction d'applications réactives.
Comprendre comment gérer les données à l'intérieur d'un composant en utilisant les props.
Connaître les bonnes pratiques pour la conception de composants.

Composant principal

Voici la structure de dossier d'un projet React basique:

  📦nom-app
  ┣ 📂node_modules
  ┣ 📂public
  ┃ ┣ 📜favicon.ico
  ┃ ┗ 📜index.html
  ┣ 📂src
  ┃ ┣ 📜App.jsx
  ┃ ┣ 📜index.jsx
  ┃ ┗ 📜style.css
  ┣ 📜.babelrc
  ┣ 📜package.json
  ┗ 📜webpack.config.js

App.jsx

Comme nous l'avons vu dans l'introduction à ReactJS, toute l'application est encapsulée dans un composant pricipale nommé App.jsx:

function App(){
  return(
    <div>
      <header>
        <h1>Bonjour !</h1>
        <p>Je suis un paragraphe.</p>
      </header>
      <p>Je suis un paragraphe.</p>
      <p>Je suis un autre paragraphe.</p>
    </div>
  );
}

Donc, un composant ReactJS, n'est rien d'autre qu'une fonction Javascript qui retourne des éléments HTML en utilisant la syntaxe JSX.

Le JSX

La syntaxe JSX permet beaucoup de choses, notamment la réutilisation d'instructions JavaScript (lire des variables, faire des opérations et des rendus conditionnels...) dans le JSX.

Par exemple, nous pouvons déclarer une variable locale de la fonction de type string, puis de la lire dans le JSX pour l'afficher dans la page:

function App(){
  //Déclarer une constante locale
  const texte ="Je suis un paragraphe.";
  return(
    <div>
      <header>
        <h1>Bonjour !</h1>
        {/* Utiliser du javascript dans le JSX*/}
        <p>{texte}</p>
      </header>
      {/* Utiliser du javascript dans le JSX*/}
      <p>{texte}</p>
      <p>Je suis un autre paragraphe.</p>
    </div>
  );
}

Ou par exemple, afficher quelque chose dynamiquement suivant une condition en utilisant un opérateur ternaire:

function App(){
  const texte ="Je suis un paragraphe.";

  //Déclarer une variable locale
  let isJour = true;

  return(
    <div>
      <header>
        {/* Utiliser du javascript dans le JSX*/}
        <h1>{isJour ? "Bonjour" : "Bonsoir"} !</h1>
        <p>{texte}</p>
      </header>
      <p>{texte}</p>
      <p>Je suis un autre paragraphe.</p>
    </div>
  );
}

Créer un composant

Afin de mieux organiser les composants, les développeurs ont tendance à exporter un seul composant par fichier, puis à les importer afin de les utiliser dans leur application.

Pour cela, nous classons nos composants par catégorie, dans un dossier souvent nommé components. Une structure de dossier basique ressemble à ceci :

📦nom-app
┣ 📂node_modules
┣ 📂public
┃ ┣ 📜favicon.ico
┃ ┗ 📜index.html
┣ 📂src
┃ ┣ 📂components
┃ ┃ ┗ 📂containers
┃ ┃ ┃ ┗ 📂Header
┃ ┃ ┃ ┃ ┗ 📜Header.jsx
┃ ┣ 📜App.jsx
┃ ┣ 📜index.jsx
┃ ┗ 📜style.css
┣ 📜.babelrc
┣ 📜package.json
┗ 📜webpack.config.js

Déclarer un composant

Un composant n'est rien d'autre qu'une fonction qui retourne des éléments JSX.

Avant de pouvoir afficher un composant React dans votre application, il faut d'abord le créer en déclarant une fonction qui retourne un ou plusieurs éléments en utilisant le JSX.

// Composant ReactJS: Une fonction qui retourne des éléments JSX
export default function Header(){
  let texte = "Je suis un paragraphe.";
  let isJour = true;
  return(
    <header>
      <h1>{isJour ? "Bonjour" : "Bonsoir"} !</h1>
      <p>{texte}</p>
    </header>
  );
}

Utiliser un composant

Ensuite, vous pouvez utiliser le composant en l'important quelque part dans votre application, par exemple dans le composant principal App.jsx :

//Import des composants
import Header from "./components/containers/Header/Header";

function App(){
  let texte = "Je suis un paragraphe.";
  return(
    <div>
      {/* Afficher un composant*/}
      <Header />
      <p>{texte}</p>
      <p>Je suis un autre paragraphe.</p>
    </div>
  );
}

Imbriquer les composants

Pour construire des interfaces utilisateur complexes, nous pouvons imbriquer des composants dans d'autres composants pour créer la structure désirée.

Par exemple, nous pouvons créer un composant nommé Texte situé dans le chemin src/components/ui/Texte/Texte.jsx pour remplacer les deux paragraphes de notre application :

export default function Texte(){
  let texte = "Je suis un paragraphe.";
  return(
    <p>{texte}</p>
  );
}

Puis l'importer et l'utiliser dans le composant Header:

import Texte from "../../ui/Texte/Texte";

export default function Header(){
  let isJour = true;
  return(
    <header>
      <h1>{isJour ? "Bonjour" : "Bonsoir"} !</h1>
      <Texte />
    </header>
  );
}

Et le ré-utiliser dans le composant App:

import Header from "./components/containers/Header/Header";
import Texte from "./components/ui/Texte/Texte";

function App(){
  return(
    <div>
      <Header />
      <Texte />
      <p>Je suis un autre paragraphe.</p>
    </div>
  );
}

Pour vous aider à vous retrouver dans le code d'une application complexe, il est intéressant de visualiser la structure de votre application sous forme d'arbres ou de boîtes :

Representation graphique du DOM virtuel de ReactJS sous forme d'arbres

Representation graphique du DOM virtuel de ReactJS sous forme de boites

Styliser un composant

Pour ajouter du styles aux composants ReactJS, il existe 3 manières:

1. Fichier css

Ajouter un style global à toute votre application.

Pour cela, vous pouvez créer un fichier CSS et l'importer dans le composant principal de votre application :

Dans le fichier src/style.css:

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(38, 38, 38);
  padding: 1em;
}

h1 {
  color: white;
}

.texte {
  color: white;
}

Dans le fichier src/App.jsx:

import Header from "./components/containers/Header/Header";
import Texte from "./components/ui/Texte/Texte";

// Importer le style
import './style.css'; 

function App(){
  return(
    <div>
      <Header />
      <Texte />
      <p className="texte">Je suis un autre paragraphe.</p>
    </div>
  );
}

Dans le fichier src/components/ui/Texte/Texte.jsx:

export default function Texte(){
  let texte = "Je suis un paragraphe.";
  return(
    <p className='texte'>{texte}</p>
  );
}

Resultat afichage sur la page web apres avoir modifié le style du composant ReactJS

2. Module css

Il est aussi possible d'ajouter du style à un composant de manière isolée.

Cela signifie que les styles définis dans un module CSS ne s'appliqueront qu'au composant pour lequel ils ont été définis et ne seront pas transmis à d'autres composants.

Cela permet de rendre votre code encore plus modulaire.

Pour créer un module CSS, il suffit de nommer le fichier CSS en suivant ce pattern : NomDuFichier.module.css.

Dans le fichier src/components/containers/Header/Header.module.css:

.container{
  border: 1px solid gray;
  border-radius: 5px;
}

.texte{
  font-size: 1.2em;
}

Puis d'importer les classes créées dans le composant src/components/containers/Header/Header.module.jsx:

import Texte from "../../ui/Texte/Texte";

//Import des classes dans un objet
import classes from "./Header.module.css";

export default function Header() {
  let isJour = true;
  return (
    <header className={classes.container}>
      <h1 className={classes.texte}>
        {isJour ? "Bonjour" : "Bonsoir"} !
      </h1>
      <Texte />
    </header>
  );
}

Resultat affichage apres avoir changé le style du composant ReactJS en utilisant les modules css

Lors de la compilation du code par Babel, les fichiers de module CSS seront compilés en un seul fichier CSS.

Chaque classe d'un module CSS aura un identifiant unique afin de ne pas affecter les autres composants de l'application.

classes est donc un objet JavaScript dont les clés sont les classes que nous avons créées, et leurs valeurs sont les identifiants uniques.

3. En ligne

Le style en ligne ou le inline style est un moyen de définir des styles directement sur un élément HTML dans un composant React, sans utiliser de fichier CSS externe.

Les styles en ligne peuvent être définis en utilisant la propriété style sur un élément HTML.

La propriété style prend un objet JavaScript qui contient les styles définis sous forme de clés et de valeurs.

import Texte from "../../ui/Texte/Texte";

//Import des classes dans un objet
import classes from "./Header.module.css";

export default function Header() {
  let isJour = true;
  return (
    <header className={classes.container}>
      <h1 
      className={classes.texte}
      style={{padding: "1em", fontWeight: "bold"}}
      >
        {isJour ? "Bonjour" : "Bonsoir"} !
      </h1>
      <Texte />
    </header>
  );
}

Ici, nous définissons les styles en ligne sur notre élément h1.

Les styles en ligne peuvent être très utiles pour des styles rapides et occasionnels, mais pour des styles plus complexes et réutilisables, il est généralement préférable d'utiliser des fichiers CSS séparés avec des modules CSS.

Cependant, les styles en ligne peuvent être très pratiques lorsque vous souhaitez dynamiquement modifier des styles en fonction des données ou des états dans votre application.

Par exemple, modifier dynamiquement la couleur du h1 suivant la valeur de la variable isJour:

import Texte from "../../ui/Texte/Texte";

//Import des classes dans un objet
import classes from "./Header.module.css";

export default function Header() {
  let isJour = true;
  return (
    <header className={classes.container}>
      <h1 
      className={classes.texte}
      style={{
        padding: "1em", 
        fontWeight: "bold",
        color: isJour ? "royalblue" : "orange"
        }}
      >
        {isJour ? "Bonjour" : "Bonsoir"} !
      </h1>
      <Texte />
    </header>
  );
}

Paramètrer un composant

Pour l'instant, notre composant Texte n'est pas très réutilisable car il affiche toujours la même chose.

Étant donné que les composants React ne sont que des fonctions, nous pouvons envoyer des paramètres à cette fonction pour rendre notre composant plus dynamique.

Avec JSX, nous pouvons envoyer un objet en paramètre à la fonction en utilisant une syntaxe semblable à celle qui permet d'ajouter des attributs à un élément HTML.

Dans le composant App.js, nous allons envoyer les propriétés de cette manière:

import Header from "./components/containers/Header/Header";
import Texte from "./components/ui/Texte/Texte";
import './style.css'; //Import du style globale

function App(){
  return(
    <div>
      <Header />
      <Texte color="green" bold={true}>Je suis un paragraphe.</Texte>
      <Texte color="red" bold={false}>Je suis un autre paragraphe.</Texte>
    </div>
  );
}

Puis, dans le composant Texte, la fonction reçoit maintenant un objet contenant les données sous forme de clés et de valeurs.

// Composant paramétré recevant un objet
export default function Texte(props) {
return (
  <p
    className="texte"
    style={{
      //Utilisation des props pour définir le style
      color: props.color,
      fontWeight: props.bold ? "bold" : "default",
    }}
  >
  {/* Utiliser children pour afficher le texte*/}
    {props.children}
  </p>
);
}

Résultat affichage apres avoir envoyé des paramètre a un composant ReactJS.

Representation graphique des props: propriétés envoyer dnas les composant ReactJS

Les événements

Lors de la création d'une application ReactJS, il est souvent nécessaire d'ajouter des événements à des éléments JSX, comme des boutons, des formulaires, ou d'autres éléments interactifs.

En ReactJS, cela se fait en utilisant la syntaxe JSX pour ajouter des attributs d'événement à des éléments.

Ajouter un événement avec JSX

On peut ajouter un attribut d'événement à un élément en utilisant la syntaxe suivante :

<element event={fonction} />

element est l'élément JSX auquel on veut ajouter un événement.
event est le nom de l'événement (comme onClick ou onChange).
function est la fonction de gestion de l'événement que l'on veut appeler lorsque l'événement est déclenché.

Exemple: Clique

Voyons maintenant comment cela fonctionne dans la pratique.

Imaginons que nous ayons un bouton auquel nous voulons ajouter un événement qui executera une fonction lors d'un clique :

function App(){

  // 1. Fonction à executer lors du clique
  function handleClick(){
    alert('Evnement clique déclanché!')
  }

  return(
    <div>
      <Header />
      <Texte color="green" bold={true}>Je suis un paragraphe.</Texte>
      <Texte color="gray" bold={false}>Je suis un autre paragraphe.</Texte>
      
      {/* 2. Lier la fonction avec le gestionnaire d'événement*/}
      <button onClick={handleClick}>Cliquez ici</button>
    </div>
  );
}

Ici, nous avons utilisé l'attribut onClick pour ajouter un événement de clic au bouton, et nous avons défini la fonction de gestion d'événement handleClick qui sera appelée lorsque le bouton est cliqué.

Voici une liste des événements les plus couramment utilisés en ReactJS:

onChange : Cet événement est déclenché lorsqu'une valeur est modifiée dans un champ de formulaire. Il est souvent utilisé pour les champs de texte, les cases à cocher et les boutons radio.
onSubmit : Cet événement est déclenché lorsqu'un formulaire est soumis. Il est souvent utilisé pour valider les données de formulaire et envoyer des requêtes à un serveur.
onMouseOver : Cet événement est déclenché lorsqu'un élément est survolé avec la souris. Il est souvent utilisé pour afficher des informations supplémentaires ou des aperçus de contenu.
onFocus : Cet événement est déclenché lorsqu'un élément reçoit le focus. Il est souvent utilisé pour gérer le comportement de navigation et d'accessibilité.
onBlur : Cet événement est déclenché lorsqu'un élément perd le focus. Il est souvent utilisé pour valider les données de formulaire et pour masquer les éléments de contrôle lorsqu'ils ne sont plus nécessaires.
onKeyDown et onKeyUp : Ces événements sont déclenchés lorsqu'une touche du clavier est enfoncée ou relâchée. Ils sont souvent utilisés pour contrôler le comportement de la saisie de texte et des interactions utilisateur.
onScroll : Cet événement est déclenché lorsqu'un élément défile. Il est souvent utilisé pour les éléments de navigation, les barres de défilement et les listes de contenu.

Conclusion

Ce chapitre nous a permis d'explorer les composants ReactJS que nous pouvons utiliser pour créer notre application.

Nous avons vu que les composants ne sont que des fonctions simples et les rapides à créer.

Et que gràce à la syntaxe JSX, il est facile d'effectuer des opérations en Javascript pour afficher des variables, faire des rendus conditionnels...

La syntaxe JSX nous permet aussi de facilement envoyer des données aux composants pour les paramétrer et d'ajouter des événements et des attributs.

Dans le prochain chapitre, nous allons voire comment gérer et manipuler le ou les états de notre application.

Aller plus loin

Précedent: NodeJS: Introduction

Suivant: ReactJS: Les états

Javascript: Initiation

Apprendre les bases de la librairie ReactJS, pour construire des pages web dynamiques et interactives complexes.

Exemple: Mise en place, les composants, les èvenements, Les hooks...

Niveau:

JavaScript

React

Initiation

1/ ReactJS: introduction

Une introduction pour découvrir ReactJS, et vous permettra de vous familiariser avec les bases de cette bibliothèque pour construire des applications web plus complexes.

Vous découvrirez également les avantages de ReactJS, et un aperçu de l'architecture de composants.

Niveau:

Web

JavaScript

React

Bases

3/ ReactJS: Gestion d'états

Articles pour comprendre comment gérer les états dans vos composants ReactJS.

Et comment utiliser le Hook useState efficacement pour créer des applications plus performantes et plus évolutives

Niveau:

Web

JavaScript

React

Etats

Formulaires

4/ ReactJS: Les Hooks

Dans cet article, nous nous concentrerons les Hooks les plus couramment utilisés : useContext et useEffect.

Vous apprendrez comment utiliser chacun de ces Hooks pour gérer les états de vos composants, partager des données entre les composants, et effectuer des actions après le rendu du composant.

Niveau:

Web

JavaScript

React

Etats

Hooks

HTTP

5/ ReactJS: La navigation

Dans ce cours, vous apprendrez à utiliser React-router-dom, une librairie ReactJS très populaire pour ajouter de la navigation à votre application web.

Vous découvrirez comment créer des liens de navigation, afficher des pages en fonction des URL...

Niveau:

Web

JavaScript

React

Router

DOM

Navigation

6/ ReactJS: Tutoriel: Todo List

Dans ce tutoriel, vous apprendrez à créer une Todo liste fonctionnelle, qui vous permettra d'ajouter, supprimer et valider des tâches.

De plus, vous verrez comment stocker cette liste dans le stockage local de votre navigateur afin que vous puissiez la conserver même après avoir quitté la page.

Niveau:

Web

JavaScript

React

Tuto

Todos

Bases