Maîtriser React, les composants, hooks et le routage pour créer des interfaces dynamiques
React est un framework JavaScript largement utilisé pour la création d’interfaces utilisateur interactives et réactives. Il offer aux développeurs la possibilité de créer des composants réutilisables, simplifiant ainsi le développement et la maintenance. De plus, il permet de réduire les problèmes liés aux performances, offrant une expérience de développement plus fluide.
Est-ce pour vous ?
Informaticiens.
Préalables
Des connaissances avancées sur le langage JavaScript sont nécessaires.
Ce que vous saurez faire
- ✓ Créer des interfaces interactives avec React en maîtrisant JSX, composants et props
- ✓ Gérer l’état et les interactions utilisateur avec hooks, événements et cycle de vie
- ✓ Concevoir des formulaires sécurisés avec validation et gestion des données
- ✓ Mettre en place une navigation fluide avec React Router et ses hooks
- ✓ Structurer une application avec gestion d’état globale via Context API et Redux Toolkit
Contenu de la formation
1 Introduction
- Objectifs du module
- Comparatif des frameworks
- Historique
- Présentation
- Conclusion
Ce module vous propose la consultation d’une vidéo d’une durée de 00h05.
2 Installation
- Objectifs du module
- Installation de Node.js
- Installation de WebStorm
- Création d’un premier projet
- Structure de base du premier projet
- Démonstration – Installation et création du premier projet
- Conclusion
Ce module vous propose la consultation d’une vidéo d’une durée de 00h07.
3 Les composants
- Objectifs du module
- Introduction à JSX
- Le composant variable
- Le composant fonction
- Le composant classe
- Les props
- Les listes et les clés
- Démonstration – Création d’un composant
- TP à réaliser
- Correction TP 1/2
- Correction TP 2/2
- Conclusion
Ce module vous propose la consultation d’une vidéo d’une durée de 00h42.
4 Dynamiser un projet
- Objectifs du module
- La gestion basique des états
- Les évènements
- Le cycle de vie d’un composant
- L’affichage conditionnel
- Démonstration – Gestion des états
- TP à réaliser
- Correction TP 1/2
- Correction TP 2/2
- Conclusion
Ce module vous propose la consultation d’une vidéo d’une durée de 00h48.
5 Les formulaires
- Objectifs du module
- Gestion basique des formulaires
- Formulaires contrôlés
- Validation des données et sécurité
- Démonstration – Gestion des formulaires
- TP à réaliser
- Correction TP 1/3
- Correction TP 2/3
- Correction TP 3/3
- Conclusion
Ce module vous propose la consultation d’une vidéo d’une durée de 01h30.
6 Programmation fonctionnelle et hooks
- Objectifs du module
- Introduction à la programmation fonctionnelle
- Hook d’état
- Hook d’effet
- Hook de référence
- Hook personnalisé et autres hooks
- Optimisation des états
- Démonstration – Gestion des formulaires en programmation fonctionnelle 1/2
- Démonstration – Gestion des formulaires en programmation fonctionnelle 2/2
- TP à réaliser
- Correction TP 1/2
- Correction TP 2/2
- Conclusion
Ce module vous propose la consultation d’une vidéo d’une durée de 01h29.
7 React Router
- Objectifs du module
- Introduction à React Router
- BrowserRouter, Routes et Route
- Route not found et route avec params
- Le composant Link
- Les hooks de React Router
- Démonstration – Utilisation de React Router
- TP à réaliser
- Correction TP 1/2
- Correction TP 2/2
- Conclusion
Ce module vous propose la consultation d’une vidéo d’une durée de 01h07.
8 Contexte applicatif
- Objectifs du module
- Introduction au contexte applicatif
- API Context
- Les reducers
- Redux Toolkit
- Les slices et wrapping du contexte
- Récupérer et modifier les valeurs dans le store
- Démonstration – Contexte avec API Context
- Démonstration – Contexte avec Redux Toolkit
- TP à réaliser
- Correction du TP
- Conclusion
Ce module vous propose la consultation d’une vidéo d’une durée de 00h52.
📌 Informations pratiques
Formation 100% à distance. Accessible en tout temps de n’importe où pendant un an. Si vous avez des questions concernant l'inscription, la langue d’enseignement ou les modalités d’annulation, consultez notre FAQ