Dans la fenêtre d’impression, choisissez « Enregistrer en PDF » comme destination.
Réf. REA-WEB
React - Développer des applications Web
Langages & Développement Logiciel
Durée
21 à 28 heures (3 à 4 jours) selon le format
Modalités
Présentiel, Classe à distance
Reconnaissance
Formation non certifiante (attestation de fin de formation)
Format de vente
Inter-entreprise ou Intra-entreprise
Délai d’accès
Inter : jusqu’à 5 jours ouvrés avant la session ; intra : en moyenne 15 jours ouvrés après l’acceptation du devis
Tarif intra
Sur devis
Pourquoi suivre cette formation
Les applications web modernes demandent une architecture front-end dynamique et réactive. Cette formation vous apprend à maîtriser React, à concevoir des composants réutilisables, à gérer l'état de l'application et à utiliser des API REST.
À l’issue de cette formation, les participants seront capables de
Concevoir et découper une interface utilisateur en composants React réutilisables et autonomes
Maîtriser le cycle de vie des composants et la gestion de l'état local avec les Hooks fondamentaux
Modéliser et synchroniser des flux de données complexes de manière synchrone et asynchrone
Sécuriser et fluidifier la navigation grâce à un système de routage fiable
Utiliser efficacement des API REST tout en évitant les fuites de mémoire
IMPACTTerrain28 heures (4 jours) · dont une journée en décalé2 605 € HTpar participant (inter-entreprises)
Chaque format reprend le précédent et y ajoute des journées.
Public visé
Développeurs Web, ingénieurs d'études, architectes logiciels, ou toute personne souhaitant créer des applications web interactives modernes.
Prérequis
Maîtrise courante de JavaScript moderne (ES6+), notions fondamentales d'utilisation de la ligne de commande (Node/NPM) et de gestion de versions (Git), ainsi que des notions de TypeScript (les composants étant typés).
Prérequis techniques à distance
La classe virtuelle se tient sur Microsoft Teams : AMBIA fournit à chaque participant un compte pour la durée de la formation. En intra-entreprise, elle peut aussi se tenir sur l’outil que l’entreprise utilise déjà, par exemple Zoom ou Google Meet.
Le participant se connecte depuis un ordinateur équipé d’une caméra, d’un micro, d’un accès à internet et d’un navigateur à jour, dans un lieu calme. Si la formation le demande, le formateur donne accès à un poste de travail à distance, depuis le navigateur.
Pendant la formation, l’assistance technique répond à support@ambia-skills.fr.
Objectifs pédagogiques
Identifier les principes du DOM Virtuel et la philosophie déclarative de React.
Expliquer le fonctionnement du flux de données unidirectionnel.
Écrire des composants fonctionnels utilisant la syntaxe JSX et les associer à des styles modulaires.
Choisir et combiner les Hooks appropriés (useState, useEffect, useContext) selon les besoins du flux de données.
Diagnostiquer les rendus inutiles et auditer la performance globale d'une interface React.
Assembler, sécuriser et compiler une application React SPA optimisée pour la mise en production.
Programme détaillé
Jour 1ACTION
Matin
Philosophie React, JSX et premier composant
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.
Après-midi
Gestion de l'état local, des événements et des listes
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.
Jour 2ACTION
Matin
Effets secondaires, cycle de vie et synchronisation
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.
Après-midi
Formulaires et liaison de données
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.
Jour 3ACTION
Matin
Routage de l'application et navigation
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.
Après-midi
Consommation d'API, centralisation de l'état global et compilation
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.
Jour 4 · en décaléIMPACT
Matin
Diagnostic de l'architecture des composants, des Hooks et de l'état partagé
Analyser l'organisation des composants, l'usage des Hooks et le partage d'état par le contexte (useContext) de l'application réelle.
Analyse du code React de l'entreprise : découpage en composants réutilisables, Hooks personnalisés, correction des effets (dépendances et nettoyage de useEffect) et optimisation des rendus (React.memo, useMemo, useCallback).
Après-midi
Code splitting, routes protégées et appels API
Mettre en œuvre le chargement différé des pages (React.lazy, Suspense) et sécuriser les routes React Router par un composant de route protégée alimenté par le contexte d'authentification.
Réduction du temps de chargement initial : React.lazy et Suspense sur les pages secondaires, route privée avec React Router, appels API centralisés avec le jeton JWT et analyse de la taille du build de production (Vite).
Les ateliers et cas métier de ce programme pourront être adaptés par le consultant-formateur selon les besoins, le niveau et les prérequis des participants, pour favoriser l’atteinte des objectifs pédagogiques.
Méthodes et moyens pédagogiques
Méthodes mobilisées
Pédagogie active basée sur la résolution de problèmes réels. Démonstrations techniques ciblées de notre consultant-formateur suivies de phases de co-développement guidées, de pair-programming et de revues de code critiques pour valider la qualité industrielle du code source.
Moyens techniques
Un poste informatique individuel performant par apprenant, un environnement de développement préconfiguré (VS Code, Node.js/NPM, React CLI / Vite, Git). Accès à notre plateforme numérique pédagogique AMBIA et mise à disposition de jeux de données et de serveurs API REST de test.
Moyens humains
Formation animée par un consultant-formateur expert senior, développeur et architecte Front-End en activité sur des architectures applicatives haut de gamme.
Modalités d’évaluation
Évaluation diagnostique
Questionnaire de positionnement technique en amont de la session (prérequis JavaScript ES6) envoyé 15 jours avant la formation.
Évaluation formative
Évaluation continue tout au long des trois jours à travers la validation par le formateur des étapes d'intégration successives des cas pratiques.
Évaluation sommative
Mini-projet d'intégration finale évalué selon une grille d'architecture logicielle standardisée, complété par un Questionnaire de validation des acquis sous forme de QCM en fin de formation.
Suivi
Feuilles de présence signées par demi-journée, en présentiel comme à distance.
Attestation de fin de formation remise à chaque stagiaire, mentionnant les objectifs, la nature, la durée et les résultats de l’évaluation.
Certificat de réalisation adressé au client ou au financeur.
Questionnaire de satisfaction remis à l’issue de la formation.
Délai d’accès
Inter-entreprises : L’inscription est possible jusqu’à 5 jours ouvrés avant le début de la session, sous réserve des places disponibles.
Intra-entreprise : La formation débute en moyenne 15 jours ouvrés après l’acceptation du devis.
Ce délai peut être adapté selon la disponibilité des sessions, le positionnement du stagiaire et, le cas échéant, l’instruction du dossier de prise en charge par le financeur.
Accessibilité handicap
Nos parcours sont adaptables aux personnes en situation de handicap. Veuillez contacter notre référent pour étudier les aménagements nécessaires.
Référent handicap : accessibilite@ambia-skills.fr. Aucune reconnaissance de la qualité de travailleur handicapé ni aucun justificatif médical n’est exigé.
Indicateurs de résultats
Indicateurs publiés à partir de 3 avis.
Mode de calcul : www.ambia-skills.fr/notre-approche#notes
