Introduction à React.
js
Construire des interfaces
utilisateur modernes
Réalisée par:
Ben Béchir Chaima
1 Qu'est-ce que [Link] ?
2 Les concepts clés
3 Créer votre premier composant
4 Les Hooks (Hooks)
5 Gérer le State (useState)
6 Les listes et les clés (Keys)
7 Gérer les événements
8 Introduction au React Router
9 Conclusion et prochaines étapes
Qu'est-ce que
[Link] ?
1
Qu'est-ce que
Une bibliothèque JavaScript pour l'UI [Link] ?
➢ Une bibliothèque JavaScript open-source pour construire des interfaces utilisateur
(UI).
➢ Créée et maintenue par Facebook (désormais Meta).
➢ Axée sur les composants : tout dans React est un composant.
➢ Utilise une approche déclarative : vous décrivez ce que vous voulez, et React
s'occupe de mettre à jour le DOM.
➢ S'appuie sur le concept du "Virtual DOM" pour des performances optimisées.
2
Les concepts clés
3
Les concepts
Les fondations de React clés
❑ Composants : Les blocs de construction de votre UI. Ils peuvent être des
fonctions (composants fonctionnels) ou des classes.
❑ JSX : Une extension de syntaxe pour JavaScript qui permet d'écrire du code qui
ressemble à du HTML directement dans le code JavaScript.
❑ Props (Propriétés) : Le moyen de passer des données d'un composant parent à
un composant enfant. Les props sont en lecture seule.
❑ State (État) : Un objet qui contient des données qui peuvent changer au fil du
temps et qui influencent le rendu du composant. Quand l'état change, le composant
se met à jour.
❑ Virtual DOM : Une copie en mémoire du DOM réel. React compare l'état actuel
et le nouvel état, puis n'effectue que les changements nécessaires sur le DOM réel, ce
qui est plus rapide.
4
Créer votre
premier
composant
5
Créer votre
premier
composant
Hello World en React
Code JSX
❖ Explications :
✓ On importe React et ReactDOM.
✓ On définit un composant fonctionnel Bienvenue qui accepte des props.
✓ On utilise le JSX pour le rendu de l'élément.
✓ [Link] lie le composant à un élément HTML existant.
6
Les Hooks (Hooks)
7
Les Hooks
(Hooks)
Les fonctions qui donnent du pouvoir aux
composants
Introduits avec React 16.8 pour permettre aux composants fonctionnels d'avoir un
état et des effets de cycle de vie, sans avoir à utiliser les classes.
Rendent le code plus lisible et plus simple à tester.
❖ Hooks les plus courants :
✓ useState : Pour ajouter un état local à un composant fonctionnel.
Exemple : const [count, setCount] = useState(0);
✓ useEffect: Pour gérer les effets de bord (appels API, gestion du DOM, etc.) dans
un composant fonctionnel.
Exemple : useEffect(() => { [Link] = 'Mon titre'; });
8
Gérer le State
(useState)
9
Gérer le State
(useState)
Rendre votre UI dynamique
Code d'exemple
❖ Explications :
✓ useState(0) initialise le compteur à 0.
✓ setCount(count + 1) met à jour la
valeur de count.
✓ La modification de l'état entraîne le
rendu du composant.
10
Les listes et les clés
(Keys)
11
Les listes et les
clés (Keys)
Afficher des collections de données
➢ Comment faire : Utiliser la méthode map() sur un tableau pour générer une
liste d'éléments JSX.
➢ L'importance des keys:
✓ Chaque élément d'une liste doit avoir un attribut key unique.
✓ Cela aide React à identifier les éléments qui ont changé, ont été ajoutés ou
supprimés.
✓ Key doit être une chaîne de caractères ou un nombre unique (ex: un ID d'une base
de données).
12
Gérer les
événements
13
Gérer les
événements
Interagir avec l'utilisateur
Syntaxe : Utiliser des attributs comme onClick, onChange, etc.
Exemple :
❖ Points importants : Le nom de la fonction est passé comme référence, et
non pas appelée directement (handleClick vs handleClick() ).
14
Introduction au
React Router
15
Introduction
au React
Router
La navigation dans les applications SPA
➢ Concept : React est souvent utilisé pour créer des Single Page Applications
(SPA). Pour gérer la navigation entre différentes vues, on utilise une bibliothèque
comme React Router.
➢ Points clés :
✓ BrowserRouter : Le routeur principal.
✓ Route : Définit une route pour un composant.
✓ Link : Pour créer des liens sans recharger la page.
16
Conclusion et
prochaines étapes
17
Conclusion et
prochaines
étapes
Résumé et pistes de développement
Résumé :
✓ React est une bibliothèque pour construire des interfaces utilisateur basées sur
des composants.
✓ Le JSX, les props, le state et les hooks sont des concepts fondamentaux.
✓ Le Virtual DOM assure des mises à jour performantes.
Prochaines étapes :
✓ Gérer l'état global avec des bibliothèques comme Redux ou le Context API.
✓ Apprendre à faire des requêtes API avec fetch ou axios.
✓ Découvrir le rendu côté serveur avec [Link].
✓ S'intéresser aux tests de composants.
18