React - Développer des applications Web

Objectif : Comprendre le concept du DOM Virtuel et savoir structurer une interface en composants élémentaires à l'aide de JSX.

• Le concept du DOM Virtuel et la réconciliation : comment React optimise les performances d'affichage.
• Introduction aux composants fonctionnels et à la syntaxe hybride JSX.
• Le passage d'informations : paramétrage et typage des composants parents/enfants à l'aide des props.

Atelier pratique : Création d'une bibliothèque de composants visuels de base (boutons, cartes informatives, alertes) à l'aide de l'outil d'initialisation rapide Vite.

Cas métier : Développement des briques graphiques de base de l'interface de contrôle logistique (carte de statut d'un entrepôt, jauge de capacité de stockage).

Compétence acquise : Être capable de décomposer une maquette graphique complexe en composants logiques réutilisables.

Livrable : Bibliothèque d'interface statique, structurée et paramétrable par les données.

Objectif : Rendre une interface dynamique en gérant la réactivité locale et les interactions de l'utilisateur.

• La gestion de la mémoire interne d'un composant : implémentation du Hook useState.
• La capture et la gestion des interactions utilisateur (clics, saisies, soumissions).
• L'affichage de listes dynamiques d'éléments : parcours de tableaux et rôle indispensable de la propriété key.

Atelier pratique : Dynamisation des éléments d'interface créés le matin pour les lier à des interactions et des changements de données locales.

Cas métier : Création de la liste d'alertes logistiques réactive avec la possibilité pour l'opérateur de filtrer, d'ajouter ou d'archiver manuellement un message.

Compétence acquise : Savoir capter et retranscrire instantanément en termes de rendu visuel les actions d'un utilisateur.

Livrable : Module de liste de contrôle dynamique, interactive et mise à jour en temps réel selon les saisies.

Objectif : Gérer les interactions asynchrones et synchroniser des processus extérieurs au composant.

• Le Hook de contrôle des effets secondaires : mise en œuvre de useEffect.
• Compréhension fine du tableau de dépendances pour maîtriser le déclenchement de l'effet.
• La phase de nettoyage (cleanup) des effets pour éviter les fuites de ressources.

Atelier pratique : Mise en place d'un système de synchronisation asynchrone (timers, écouteurs globaux) géré à l'affichage et au masquage d'un composant.

Cas métier : Implémentation d'un module d'alerte critique avec déclenchement automatique d'un signal sonore et visuel clignotant se désactivant à la fermeture du composant.

Compétence acquise : Maîtriser le cycle de vie applicatif et la synchronisation de données avec des flux externes.

Livrable : Composant de monitoring autonome, capable d'initier et de détruire proprement ses propres écouteurs d'événements.

Objectif : Concevoir des formulaires sécurisés et gérer la validation des saisies utilisateurs de manière robuste.

• Les formulaires contrôlés (Controlled Components) vs non contrôlés.
• Centralisation d'un état de formulaire multi-champs à l'aide d'un seul objet TypeScript.
• Méthodes de validation synchrone et affichage dynamique des indicateurs d'erreurs en fonction de la saisie.

Atelier pratique : Établissement d'un formulaire d'enregistrement de données complexes avec contrôles de sécurité avancés.

Cas métier : Conception du formulaire d'enregistrement d'un nouveau chauffeur-livreur (validation de l'adresse email, format du numéro de licence, champs obligatoires).

Compétence acquise : Savoir construire, lier et valider des zones de formulaires interactives et intuitives.

Livrable : Écran d'enregistrement métier sécurisé, empêchant l'envoi de données non conformes.

Objectif : Mettre en œuvre une navigation fluide de type Single Page Application et sécuriser l'accès aux différentes rubriques.

• Installation et configuration de la bibliothèque de routage de référence : React Router.
• Déclaration des routes, gestion des paramètres de route dynamiques (/users/ : id) et redirection.
• Implémentation du chargement différé (Lazy Loading) pour optimiser le temps d'affichage initial de l'application.

Atelier pratique : Structuration complète de l'architecture de navigation multi-pages d'une application professionnelle.

Cas métier : Création de la barre de navigation latérale de notre portail logistique (Tableau de bord, Liste des flottes, Profil d'administration) avec gestion des états d'activation visuels.

Compétence acquise : Maîtriser l'architecture de navigation interne et le découpage fluide des fichiers de l'application.

Livrable : Système de navigation fluide, multi-pages et instantané, sans rechargement de page.

Objectif : Connecter l'application à un service de base de données externe, partager l'état utilisateur et exporter l'application pour la production.

• Consommation de données réelles à l'aide de requêtes d'API REST (fetch / axios).
• Gestion de l'état global léger de l'application à l'aide de l'API de contexte native de React (useContext).
• Le processus de build : compilation, minification et optimisation des fichiers statiques pour les serveurs web de production.

Atelier pratique : Connexion à un serveur API REST réel, injection de l'état d'authentification utilisateur et export de production optimisé du projet finalisé.

Cas métier : Connexion finale de la plateforme de monitoring logistique pour charger les données de stock réelles d'un entrepôt distant et restreindre l'accès à la configuration aux administrateurs connectés.

Compétence acquise : Savoir consolider une Single Page Application sécurisée, interconnectée et prête au déploiement industriel.

Livrable : Application de supervision connectée, compilée sous forme de livrables statiques hautement optimisés.