React - Débutant

À l’issue de la formation, les participants seront capables de :

• Comprendre les principes fondamentaux de React et son écosystème
• Créer des applications web réactives avec React
• Utiliser les composants, les états et les props pour construire des interfaces utilisateur dynamiques
• Gérer les événements utilisateur et manipuler le DOM via React
• Intégrer des API REST pour récupérer et afficher des données

Introduction à React

• Qu'est-ce que React et son rôle dans le développement d’applications web modernes ?
• Les avantages de React : Réutilisation de composants, performance avec le Virtual DOM, unidirectional data flow
• Comprendre les composants : Class components vs. Functional components
• Installation de React via Create React App

Création d'un premier composant React

• Structure d'une application React : index.js, App.js
• Définition d’un composant avec des fonctions (stateless functional components)
• Rendu dynamique avec JSX (syntax sugar pour écrire du HTML dans JavaScript)
• Introduction aux props : Qu'est-ce que sont les props et comment les utiliser pour passer des données dans les composants

Les états dans React (useState)

• Introduction à l’état local dans un composant
• Gestion de l'état avec le hook useState
• Manipulation de l'état : changer l’état en fonction des actions de l'utilisateur (ex. : clic, saisie dans un champ)
• Interaction entre l’état et l’interface utilisateur : rafraîchissement du rendu lorsque l’état change

Gestion des événements dans React

• Introduction aux événements dans React (clics, changements, soumissions de formulaires)
• Utilisation des gestionnaires d'événements : onClick, onChange, onSubmit
• Passage des paramètres aux fonctions de gestion d'événements
• Liaisons entre la logique métier et l'interface utilisateur via les événements

Composants enfants et communication entre composants

• Passer des données entre composants via les props
• Création de composants réutilisables et dynamiques
• Prop drilling : Comment passer des données profondément dans la hiérarchie des composants
• Solutions pour la gestion de l'état global (introduction à Context API)

Introduction au Routing avec React Router

• Installation et configuration de React Router pour la gestion des pages
• Créer des liens de navigation avec Link et NavLink
• Gérer les routes et les paramètres de l’URL pour rendre des composants spécifiques
• Mise en place d’un rendu conditionnel pour afficher différentes vues selon l'URL

Travailler avec des API et gestion des données

• Introduction aux API REST : récupérer des données avec fetch()
• Utiliser useEffect pour effectuer des appels API lors du montage du composant
• Manipulation des données reçues : affichage dynamique des informations dans l’interface
• Gestion des erreurs et des chargements (ex : état de chargement, gestion des erreurs)

Gestion du formulaire dans React

• Création d'un formulaire simple avec gestion de l'état des champs
• Validation des entrées de formulaire : contrôle des erreurs avant soumission
• Utilisation de useState et onSubmit pour gérer la soumission des formulaires
• Implémentation de champs contrôlés et non contrôlés

Bonnes pratiques et organisation du code

• Structurer une application React : Organisation des dossiers et fichiers
• Modularité et réutilisabilité des composants
• Gestion des clés uniques avec key dans les listes de composants
• Introduction à la gestion des erreurs dans les applications React

Exercices pratiques et mini-projets

• Création d'une application de liste de tâches avec React (ajouter, supprimer, marquer comme complété)
• Développement d'une application météo avec appel à une API pour récupérer les données météorologiques et affichage des résultats
• Mise en place d'un formulaire interactif de contact avec validation et soumission des données

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation