React

React est une bibliothèque JavaScript open source dédiée à la création d'interfaces utilisateur modernes, performantes et composables. Elle permet de construire des applications web à partir de composants réutilisables et s'intègre dans un écosystème riche pour le routage, la gestion des données, les tests et le rendu côté serveur.

Cette formation s'appuie sur React 19 et les pratiques actuelles : composants fonctionnels, Hooks, TypeScript, Vite, gestion moderne des formulaires et des Actions, optimisation des performances et introduction aux React Server Components.

Durée : 3 jours, soit 21 heures.

• La formation est composée de 75% de travaux pratiques (Mises en situation, débats, exercices). Le formateur alterne entre théorie et pratique ; chaque participant dispose d'un ordinateur sur lequel il réalisera les exercices proposés.
• Une synthèse est proposée en fin de formation. Une évaluation à chaud sera proposée au stagiaire à la fin du cours.
• Un support de cours sera remis à chaque participant comprenant les slides sur la théorie, les exercices et les corrigés de ces derniers. Une feuille d'émargement par demi-journée de présence est fournie en fin de formation ainsi qu'une attestation de fin de formation si le stagiaire a bien assisté à la totalité de la session.

• Comprendre les principes et l'écosystème React
• Créer une application React moderne avec Vite et TypeScript
• Concevoir des composants fonctionnels réutilisables
• Maîtriser JSX, props, événements et rendu conditionnel
• Gérer l'état et les effets avec les Hooks
• Concevoir ses propres Hooks
• Mettre en œuvre le routage d'une SPA
• Consommer des API REST et gérer les états asynchrones
• Gérer les formulaires et les Actions React 19
• Tester les composants et sécuriser la qualité du code
• Comprendre les mécanismes d'optimisation et les apports du React Compiler
• Découvrir les React Server Components et les architectures React modernes

• Développeurs, architectes, chefs de projets techniques.

• Une connaissance des technologies Web (HTML, CSS) est impérative pour suivre cette formation dans de bonnes conditions.
• La connaissance de JavaScript moderne (ES6+) est souhaitable. Une première pratique de TypeScript constitue un plus.
• Afin de valider les compétences et les pré-requis de chaque participant, en amont de la formation, le formateur organise un entretien téléphonique. Il confirme alors que le participant a le niveau nécessaire et que le contenu répond bien à ses attentes.

Le formateur est un expert du domaine qui intervient sur le sujet depuis plusieurs années en formation mais aussi en conseil.

Doté d'une grande qualité d'écoute, sa pédagogie et sa compétence technique vous permettront d'acquérir les compétences sur React.

Il saura alterner entre théorie, pratique et retours d'expérience.

Jour 1 – Fondamentaux de React et composants - Présentation de React

• Positionnement de React et écosystème
• Architecture d'une application React
• Création d'un projet avec Vite
• Organisation d'un projet React avec TypeScript

Jour 1 – Fondamentaux de React et composants - JavaScript / TypeScript pour React

• Modules ES, destructuring, spread et fonctions fléchées
• Typage des props, événements et données
• Interfaces et types utiles dans une application React

Jour 1 – Fondamentaux de React et composants - JSX et composants

• Syntaxe JSX et expressions
• Composants fonctionnels
• Props et composition de composants
• Children et composition d'interface
• Rendu conditionnel et rendu de listes
• Gestion des événements

Jour 1 – Fondamentaux de React et composants - État local et Hooks fondamentaux

• useState
• Cycle de rendu d'un composant
• useEffect et synchronisation avec un système externe
• Nettoyage des effets
• useRef et références DOM

• Atelier : création d'une première application React composée de plusieurs composants interactifs.

Jour 2 – Construire une application React complète - Gestion de l'état et partage des données

• Remonter l'état et partager des données
• Context API
• useReducer pour les états complexes
• Création de Hooks personnalisés
• Principes d'immutabilité

Jour 2 – Construire une application React complète - Routage d'une SPA

• Principes du routage côté client
• Mise en place d'un routeur
• Routes, paramètres et navigation
• Routes imbriquées et layouts
• Chargement différé des écrans

Jour 2 – Construire une application React complète - Communication avec une API REST

• Fetch et appels HTTP
• États loading, success et error
• Structuration d'une couche d'accès aux données

Jour 2 – Construire une application React complète - Formulaires

• Champs contrôlés et non contrôlés
• Validation et gestion des erreurs
• Formulaires et action prop
• useActionState et états de soumission
• useOptimistic pour les mises à jour optimistes

• Atelier : développement d'une application React avec navigation, formulaires et consommation d'une API REST.

Jour 3 – React moderne, qualité et performance - Performance et rendu

• Comprendre les re-renders
• memo, useMemo et useCallback : quand les utiliser
• useTransition et mises à jour non bloquantes
• Suspense et chargement progressif
• React Compiler : principes et impact sur la mémorisation

Jour 3 – React moderne, qualité et performance - Fonctionnalités React 19 / 19.2

• Actions et gestion des traitements asynchrones
• useOptimistic et useActionState
• use() et intégration avec Suspense
• Activity : conserver et pré-rendre des parties d'interface
• Introduction aux React Server Components
• Client Components, Server Functions et directives associées

Jour 3 – React moderne, qualité et performance - Tests et qualité

• Principes des tests unitaires et tests de composants
• Vitest
• React Testing Library
• Tester le comportement plutôt que l'implémentation
• Mocks et tests des appels asynchrones

Jour 3 – React moderne, qualité et performance - Build, déploiement et notions connexes

• Build de production avec Vite
• Variables d'environnement et configuration
• Analyse et optimisation du bundle
• Principes de déploiement d'une SPA
• Frameworks React et rendu côté serveur
• SSR, SSG et hydratation
• React Server Components
• Accessibilité et bonnes pratiques
• Organisation et maintenabilité d'un projet React

• Atelier final : finalisation d'une application React complète, tests, optimisation et préparation du build de production.

1980 € HT

Le distanciel est une modalité que nous pratiquons couramment.

Retengr vous permet aussi de suivre cette formation à distance, sous forme de classe virtuelle (6 participants maximum), avec un formateur expert sur le sujet. La formation se déroule via une connexion en visio conférence (ZOOM, GoogleMeet, Teams ou autres) et vous permet d'alterner théorie et pratique de façon accompagnée ou autonome, le tout dans le respect des objectifs pédagogiques et des évaluations des acquis.

Les émargements, évaluations, attestation de formation, remises des supports de cours et autres documents se feront en ligne.

En ce qui concerne le matériel informatique du participant, il est seulement préconisé un ordinateur et une connexion internet. Nous nous chargeons du reste.

Chaque participant se verra attribuer une Machine Virtuelle qui sera exécutée dans le Cloud d'Amazon. Il disposera alors de la puissance et des outils nécessaires pour le bon déroulement de la formation. Aucune installation de la part du participant n'est requise avant la formation.

Une journée type de formation à distance se décompose de la façon suivante :

Matin :

• 2h de théorie en visioconférence
• 10 à 15 minutes de présentation d'exercices en visio
• 1h de TP en autonomie avec possibilité de solliciter le formateur (partage d'écran à distance pour une assistance efficace).

Après-midi :

• 2h de théorie en visioconférence
• 10 à 15 minutes de présentation d'exercices en visio
• 1h de TP en autonomie avec possibilité de solliciter le formateur (partage d'écran à distance pour une assistance efficace).