React JS
KOTANMI Amédé Florian — SEWADE Mahougnon Fadel
I. Introduction et Fondamentaux
Plan de Formation II. Concepts Avancés et State
Management
ReactJS III. Optimisation et Testing
I. Introduction et Fondamentaux
1. Introduction à React
2. Composants et Props
Plan 3. État (State) et Événements
Introduction et Fondamentaux 4. Cycle de Vie des Composants
et useEffect
1. Introduction à ReactJS 5
❏ Qu'est-ce que ReactJS ?
ReactJS est une bibliothèque JavaScript pour la construction d'interfaces utilisateur
dynamiques et réactives. — Développé par Facebook en 2013 — Utilisé par des entreprises
comme Facebook, Instagram, Netflix, Airbnb, etc.
Logo de ReactJS
1. Introduction à ReactJS 6
❏ Les avantages de ReactJS
— Les composants permettent de créer des éléments modulaires et réutilisables.
— Le Virtual DOM améliore les performances en minimisant les mises à jour réelles du
DOM.
— La gestion de l'état est simplifiée grâce à un flux de données unidirectionnel.
— Large choix de bibliothèques et outils tiers pour étendre les fonctionnalités de React.
— Grande communauté de développeurs et abondance de ressources en ligne.
https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190
1. Introduction à ReactJS 7
❏ Installation de l'Environnement de Développement
○ Prérequis :
■ Node.js : Moteur d'exécution JavaScript pour serveur.
■ npm : Gestionnaire de paquets pour JavaScript.
○ Installation de Node.js et npm :
■ Visitez le site officiel de Node.js (nodejs.org)
■ Téléchargez et installez la version LTS (Long Term Support)
■ Vérifiez l'installation via les commandes suivantes dans le terminal :
■ node -v
■ npm -v
1. Introduction à ReactJS 8
❏ Installation de Create React App
○ Create React App : Outil officiel pour démarrer un projet React sans configuration complexe.
○ Installation :
■ Commande : npx create-react-app my-app
■ (npx est un utilitaire inclus avec npm pour exécuter des paquets Node)
○ Structure du Projet :
■ src/ : Contient les fichiers source de votre application
■ public/ : Contient les fichiers statiques
■ node_modules/ : Contient les dépendances du projet
■ package.json : Fichier de configuration des dépendances et scripts du projet
1. Introduction à ReactJS 9
❏ Concepts de base: Les composants
Les composants sont les éléments de base d'une application React.
Types de Composants :
● Fonctionnels : Définis avec des fonctions JavaScript.
● Classiques (Classes) : Définis avec des classes ES6.
9
1. Introduction à ReactJS 10
● Exemple de composant fonctionnel
● Exemple de composant de classe
1. Introduction à ReactJS 11
❏ Concepts de base: La syntaxe JSX (Javascript XML)
- Syntaxe de balisage qui ressemble à HTML, utilisée pour décrire l'interface utilisateur
Avantages de JSX :
● Combine la logique et le rendu dans un seul fichier.
● Facilite la création de composants complexes.
2. Composants et Props 12
❏ Création de Composants Fonctionnels et de Classe
● Composants Fonctionnels: Simples fonctions JavaScript qui acceptent des props et retournent
du JSX
● Composants de Classe : Classes ES6 qui étendent React.Component et implémentent une
méthode render
2. Composants et Props 13
❏ Passer des Données avec les Props
● Qu’est-ce que les Props ?
Props (propriétés) sont des arguments passés aux composants React — Permettent de transmettre
des données d'un parent à un enfant.
● Utilisation des Props
Exemple de Composant Parent
Exemple de composant enfant
2. Composants et Props 14
❏ Rendu Conditionnel et Listes
- Rendu Conditionnel : Utilisation de conditions pour afficher différents éléments.
2. Composants et Props 15
❏ Rendu Conditionnel et Listes
- Rendu de Listes : Utilisation de map() pour rendre des listes d'éléments..
2. Composants et Props 16
❏ Exercices pratiques
Exercice 1 : Composant de Salutation
Créer un composant fonctionnel Greeting qui prend un nom en prop et affiche "Hello, [name]".
Exercice 2 : Rendu Conditionnel
Créer un composant LoginControl qui affiche soit "Welcome back!" soit "Please sign up." en
fonction d'une prop isLoggedIn.
Exercice 3 : Liste de Tâches
Créer un composant TaskList qui rend une liste de tâches à partir d'un tableau passé en prop.
3. État (State) et Événements 17
❏ Introduction à l'état (state) et à useState
● Qu'est-ce que l'État (State) ?
L'état est un objet qui détermine comment un composant se comporte et ce qu'il affiche.
Il est mutable et peut changer au cours du cycle de vie du composant.
● Introduction à useState :
useState est un Hook qui permet d'ajouter l'état local dans les composants fonctionnels.
3. État (State) et Événements 18
❏ Introduction à l'état (state) et à useState
3. État (State) et Événements 19
❏ Gestion des événements en React
Événements en React :
● Les événements sont des actions déclenchées par l'utilisateur ou le système.
● React utilise un système de gestion des événements synthétique basé sur le W3C.
Syntaxe des Événements :
● Les événements sont camelCase (onClick au lieu de onclick).
● On passe une fonction au gestionnaire d'événements.
3. État (State) et Événements 20
❏ Gestion des événements en React
3. État (State) et Événements 21
❏ Mise à jour et manipulation de l'état
Utilisez la fonction de mise à jour de l'état retournée par useState — Chaque mise à jour de l'état provoque
un nouveau rendu du composant.
3. État (State) et Événements 22
❏ Mise à jour et manipulation de l'état
3. État (State) et Événements 23
❏ Exercices pratiques
Exercice : Gestion de formulaire simple
4. Cycle de Vie des Composants et useEffect 24
❏ Cycle de vie des composants de classe
Les Phases du Cycle de Vie :
● Montage (Mounting) : création et insertion du composant dans le DOM.
● Mise à Jour (Updating) : ré-rendu en réponse à des changements de props ou d'état.
● Démontage (Unmounting) : suppression du composant du DOM.
Méthodes du Cycle de Vie :
● componentDidMount()
● componentDidUpdate(prevProps, prevState)
● componentWillUnmount()
4. Cycle de Vie des Composants et useEffect 25
❏ Introduction aux hooks et à useEffect
Qu'est-ce que les Hooks ?
● Introduits dans React 16.8 — Permettent d'utiliser l'état et d'autres fonctionnalités de React sans
écrire de classes.
Qu'est-ce que useEffect ?
● Un hook qui permet de gérer les effets de bord dans les composants fonctionnels. — Remplace
componentDidMount, componentDidUpdate, et componentWillUnmount.
4. Cycle de Vie des Composants et useEffect 26
❏ Introduction aux hooks et à useEffect
Syntaxe de useEffect
4. Cycle de Vie des Composants et useEffect 27
❏ Utilisation de useEffect pour les effets de bord
.
4. Cycle de Vie des Composants et useEffect 28
❏ Utilisation de useEffect pour les effets de bord
Utilisation des Dépendances :
● Les dépendances dans le tableau passé à useEffect déterminent quand l'effet doit être réexécuté.
4. Cycle de Vie des Composants et useEffect 29
❏ Exercices pratiques : Fetching de données avec useEffect
Exercice: Créer un composant qui récupère des données d'une API et les affiche.
II. Concepts Avancés et State Management
1. Avancé des Composants et des
Hooks
2. Gestion de l'État Global avec
Plan Context API
3. Routing avec React Router
Concepts Avancés et State 4. Gestion de l'État Global avec
Management Redux
1. Avancé des Composants et des Hooks 32
❏ Hooks avancés : useReducer, useContext
● useReducer : Utilisé pour gérer des états complexes avec des actions. — Similaire à Redux,
mais intégré à React.
Syntaxe:
● useContext : Utilisé pour partager des données entre composants sans passer explicitement via
les props.
Syntaxe:
1. Avancé des Composants et des Hooks 33
❏ Hooks avancés : useReducer, useContextEx
Exemple useReducer:
1. Avancé des Composants et des Hooks 34
❏ Hooks avancés : useReducer, useContext
Exemple useContext:
1. Avancé des Composants et des Hooks 35
❏ Création de Hooks Personnalisés
Pourquoi créer des Hooks personnalisés ?
● Pour encapsuler et réutiliser la logique d'état et d'effets.
● Simplifie les composants et améliore la lisibilité.
Comment créer un Hook personnalisé :
● Utilisez les hooks standards (useState, useEffect, etc.) dans une fonction.
● Préfixez le nom du hook personnalisé avec "use".
1. Avancé des Composants et des Hooks 36
❏ Création de Hooks Personnalisés
1. Avancé des Composants et des Hooks 37
❏ Exercices Pratiques : Création de Hooks Personnalisés
Exercice 1 : Hook de Gestion de Champ de Texte
● Créer un hook personnalisé useInput pour gérer l'état d'un champ de texte.
Exercice 2 : Hook de Gestion de Compteur avec Seuil
● Créer un hook personnalisé useThresholdCounter qui n'incrémente le compteur que si
une certaine condition est remplie.
37
