CH3 – Composants en React

Développement front-end
 I- Introduction
• Chaque application React est constitué d’un ensemble de
composants.
• Avant de construire une Application React on doit identifier les parties
qui constituent des composants réutilisables.
• Avec les composants vous allez pouvoir avec un même ensemble de
code regrouper la structure les styles et les comportements, et vous
pouvez utiliser vos composants autant que vous voulez en vous
faisant gagner beaucoup du temps.
• Dans cette séance vous allez découvrir comment créer des éléments
web avec des composants React.
 II- Installation de l’environnement React
• Installation de node.js :
• Télécharger Windows installer et installer node.js
• Tester la commande « npm --version » sur le terminal
• Création d’un projet React:
• Une fois que les outils nécessaires sont installés, commençons sans plus
tarder. Créons un dossier, par exemple C12-Front-end, et ouvrons un terminal
dans ce dossier.
• Pour créer votre premier projet, exécuter les commandes suivantes :
npx create-react-app 01-hello-react
cd 01-hello-react
npm start
 II- Installation de l’environnement React
• Création d’un projet React:
• Ouvrir http://localhost:3000/ pour accéder à votre projet.
 II- Prise en main et création d’une
application React
• Création de l’application chapitre3:
npx create-react-app chapitre3
cd chapitre3
npm start
• Le dossier ainsi généré contient un ensemble de sous dossiers et de
fichiers.
• Nous allons par la suite, alléger notre projet en supprimons tous les
fichiers du répertoire src et tous les fichiers du répertoire public sauf
le fichier index.html.
 II- Prise en main et création d’une
application React
• Dans le dossier src ajouter le fichier index.js avec le contenu suivant:
// 1) importer React et ReactDOM
import React from 'react';
import ReactDOM from 'react-dom/client'
//2) faire reference à div id=root de index.html
const element=document.getElementById("root");
//3) prendre le controle de l'element par React
const root=ReactDOM.createRoot(element)
// 4) Creation d'un composant (component)
//un composant est une fonction qui retourne jsx
function App(){
return(
<h1>salut Dev</h1>
)
}
// 5) afficher le composant dans le browser
root.render(<App />)
 II- Prise en main et création d’une
application React
• Enregistrer votre fichier et regarder dans le navigateur, vous devez
obtenir le résultat suivant:
 III- Etapes pour la création de composant
React
• Un composant React est créé de deux manières:
• Une fonction qui retourne du JSX
• Une classe qui hérite de la classe React.Component possédant la méthode
render qui retourne du JSX.
 III- Etapes pour la création de composant
React
Etape 2 Etape 4
Récuperer la reference div Créer un composant
qui a l’id root de la page
web index.html

Etape 1 Etape 2 Etape 3 Etape 4 Etape 5

Etape 1 Etape 3 Etape 5

Importer React et Demander à React de Afficher le composant
ReactDOM prendre controle de cet
élément
 III- Etapes pour la création de composant
React
• Etape 1: Importer React et ReactDOM:

import React from 'react';

import ReactDOM from 'react-dom/client'

React ReactDOM
Bibliothèque qui définit ce qu’est un composant et Bibliothèque qui permet d’afficher un composant
comment plusieurs composants fonctionnent dans le navigateur
ensemble.
 III- Etapes pour la création de composant
React
• Etape 2: Référencer le div « id=root » du fichier « index.html »

const element=document.getElementById("root");

• Etape 3: Prendre le contrôle de l’élément par React:

const root=ReactDOM.createRoot(element)
 III- Etapes pour la création de composant
React
• Etape 4: Création d’un composant React avec une fonction ou une
classe:
function App(){ class App
return ( extends React.Component
<h1>salut DEV </h1> {
) render(){
} return (
<h1>salut DEV </h1>
)
}
}

Avec une fonction Avec une classe

 III- Etapes pour la création de composant
React
• Etape 5: Afficher le composant sur le navigateur:

root.render(<App/>)
 III- Organisation des composants React
• Pour avoir une bonne organisation, chaque composant doit être créé
dans un fichier js qui porte son nom.
• Exemple : le composant App doit être créé dans le fichier App.js
• Le composant pourra ensuite être importé dans le fichier index.js :
import App from './app.js'
• Il peut être directement affiché dans le navigateur :
root.render(<App/>)
 III- Applications
• Reprendre les exemples du chapitre précédent dans une nouvelle application
React:
1. Créer un composant MaListe (à l’aide d’une fonction) affichant une liste non
ordonnée des éléments (Elément1 à Elément5) dans un fichier MaListe.js.
2. Déclarer un tableau contenant les éléments (Elément1 à Elément5) et
modifier le composant MaListe pour pouvoir parcourir le tableau et
l’afficher.
3. Créer cette fois le composant MaListe à l’aide d’une classe permettant de
parcourir et d’afficher le tableau d’éléments.
4. Créer un composant Element permettant d’afficher un seul élément de la
liste dans le fichier Element.js puis modifier le composant MaListe pour qu’il
utilise le composant Element afin de parcourir le tableau d’éléments et
l’afficher.