Formation : Campus Atlas - React JS, développer des applications web

Cours pratique - 3j - 21h00 - Réf. AJB
Prix : 1830 € H.T.

Campus Atlas - React JS, développer des applications web



Nouvelle formation

Cette formation s’adresse aux développeurs, architectes et chefs de projets souhaitant maîtriser le développement d’interfaces utilisateurs modernes et performantes avec ReactJS. Ce programme de formation est destiné aux salariés des branches professionnelles relevant de l'OPCO Atlas.


INTER
INTRA
SUR MESURE

Cours pratique
Disponible en anglais, à la demande

Réf. AJB
  3j - 21h00
1830 € H.T.




Cette formation s’adresse aux développeurs, architectes et chefs de projets souhaitant maîtriser le développement d’interfaces utilisateurs modernes et performantes avec ReactJS. Ce programme de formation est destiné aux salariés des branches professionnelles relevant de l'OPCO Atlas.


Objectifs pédagogiques
À l’issue de la formation, le participant sera en mesure de :
Comprendre les concepts clés de ReactJS et ses spécificités
Créer des composants fonctionnels
Maîtriser la syntaxe JSX
Utiliser Flux et gérer les bugs
Tester son développement

Public concerné
Pour les adhérents à l'OPCO Atlas : développeurs, architectes, chefs de projet.

Prérequis
Avoir des connaissances pratiques du développement web, maîtrise et pratique de JavaScript.

Méthodes et moyens pédagogiques
Méthodes pédagogiques
Pour optimiser le parcours d’apprentissage, des modules e-learning peuvent être fournis avant et après la session présentielle ou la classe virtuelle, sur simple demande du participant.

Modalités d'évaluation
Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…
Le participant complète également un test de positionnement en amont et en aval pour valider les compétences acquises.

Programme de la formation

1
JavaScript, apprendre les bases du langage - Contenu digital learning préformation

  • Introduction.
  • Basique du langage.
  • Exécution de scripts.
  • Objets JavaScript et callback.
  • Manipulation du DOM.
Activités digitales
Cette formation en ligne apprend les bases essentielles de JavaScript, telles que les fonctions, les conditions et les boucles, afin de développer de premières applications en toute autonomie. Les participants mettront leurs connaissances en pratique à travers la création d’une application de gestion de tâches (ToDoList) et seront prêts à aborder des frameworks comme AngularJS ou Node.js.

2
React, fonctionnalités avancées du framework de développement front-end - Contenu digital learning préformation

  • Introduction.
  • Cycle de vie des composants.
  • Refs, fragments et propTypes.
  • React Hooks.
Activités digitales
Cette formation en ligne approfondit les connaissances sur React afin d’en exploiter tout le potentiel dans des développements front-end. Après la mise en place de l’environnement, les participants étudieront le cycle de vie des composants, les références, les fragments et les propTypes. Ils découvriront ensuite les Hooks, une fonctionnalité clé qui enrichit les composants fonctionnels. Chaque notion sera illustrée par des démonstrations concrètes.

3
Introduction à React et l’écosystème JavaScript

  • Écosystème JavaScript moderne et ses outils.
  • Principes fondamentaux de React et son architecture.
  • JSX : syntaxe, fonctionnement et bonnes pratiques.
  • Virtual DOM et mécanismes de réconciliation.
  • Outils de développement React et debugging.
Travaux pratiques
Installer l’environnement, prendre React en main et maîtriser les outils.

4
Composants React fondamentaux

  • Architecture et anatomie des composants React.
  • Gestion des props et leur validation.
  • Patterns de composition de composants.
  • Approches de styling modernes.
  • Système d’événements React.
Travaux pratiques
Créer des composants, utiliser le styling et les événements, valider en test.

5
État et cycle de vie

  • Gestion d’état avec useState.
  • Effets et cycle de vie avec useEffect.
  • Context API pour l’état global.
  • Création de hooks personnalisés.
  • Patterns de gestion d’état.
Travaux pratiques
État local et hooks, context et état global et hooks personnalisés.

6
Communication entre composants

  • Analyse des patterns de communication.
  • Solutions au props drilling.
  • Utilisation avancée du context.
  • Patterns de composition et render props.
  • Gestion des événements complexes.
Travaux pratiques
Patterns de communication, composition avancée, review et optimisation.

7
Gestion avancée de l’état

  • Architecture Redux et principes fondamentaux.
  • Implémentation des actions et reducers.
  • Configuration et utilisation des middlewares.
  • Optimisation avec Redux Toolkit.
  • Sélecteurs et performances.
Travaux pratiques
Mettre en place Redux, actions et reducers, optimisation et selectors.

8
Routing et navigation

  • Concepts fondamentaux de React Router.
  • Architecture des routes et navigation.
  • Gestion avancée des paramètres.
  • Protection et authentification.
  • Optimisation du routing.
Travaux pratiques
Configurer le routing, routes protégées, optimiser le routing.

9
Performance et optimisation

  • Mémoisation avec React.memo et useMemo.
  • Optimisation des callbacks avec useCallback.
  • Techniques de code splitting.
  • Implémentation du lazy loading.
  • Outils de profiling et debugging.
Travaux pratiques
Mémorisation et optimisation, code splitting avancé, profilage et analyse.

10
Test et débogage

  • Tests avec Jest et React Testing Library.
  • Stratégies de test unitaire et d’intégration.
  • Mocking et simulation de données.
  • Techniques de débogage avancées.
  • Gestion des erreurs avec Error Boundaries.
Travaux pratiques
Tests unitaires, tests d'intégration, débogage et Error Boundaries.

11
React Server Components

  • Architecture des server components.
  • Différences entre server et client components.
  • Implémentation du Streaming SSR.
  • Stratégies de data fetching.
  • Performance et hydration.
  • Intégration avec Next.js.
Travaux pratiques
Architecture RSC, data fetching et streaming, intégration et tests.

12
Intégration API et gestion des données

  • Choix et configuration des clients http.
  • Architecture React Query.
  • Stratégies de cache et invalidation.
  • Gestion avancée des erreurs.
  • Patterns d’optimistic updates.
Travaux pratiques
Set-up de React Query, patterns avancés, tests et monitoring.

13
Déploiement et CI/CD

  • Stratégies de build et optimisation.
  • Configuration multi-environnements.
  • Mise en place du CI/CD.
  • Monitoring et analytics.
  • Sécurité et bonnes pratiques.
Travaux pratiques
Configurer le build, pipeline CI/CD et monitoring.

14
Projet final et conclusion

  • Synthèse des concepts React avancés.
  • Patterns et best practices.
  • Architecture et scalabilité.
  • Ressources et communauté.
  • Évolutions et perspectives.
Travaux pratiques
Présentation des projets, review technique, perspectives et ressources.

15
React, gérer la navigation de son application web avec react-router - Contenu digital learning post-formation

  • Introduction.
  • Prise en main de react-router.
  • Mise en application : réalisation d'un guide de pays.
Activités digitales
Cette formation en ligne d'1h53 apprend à mettre en place un système de navigation côté client avec React grâce à la librairie react-router. Après la configuration de l’environnement, les participants découvriront les composants essentiels pour créer des liens, gérer les redirections et organiser des pages multiples. Ils appliqueront ces notions dans un projet concret en développant la navigation d’une application de consultation de pays via l’API restcountries.eu


Dates et lieux
Sélectionnez votre lieu ou optez pour la classe à distance puis choisissez votre date.
Classe à distance

Dernières places
Date garantie en présentiel ou à distance
Session garantie

CLASSE À DISTANCE
2026 : 31 mars, 26 mai, 13 oct., 17 nov.

PARIS LA DÉFENSE
2026 : 24 mars, 19 mai, 6 oct., 3 nov.

METZ
2026 : 31 mars, 13 oct.

NANCY
2026 : 26 mai, 17 nov.