Formation : React JS, développer des applications web

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

React JS, développer des applications web



Nouvelle formation Formation référencée dans une action collective
Formation éligible au financement Atlas

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
2150 € H.T.
Pauses-café et
déjeuners offerts
Financements




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


Solutions de financement
Plusieurs solutions existent pour financer votre formation et dépendent de votre situation professionnelle.
Découvrez-les sur notre page Comment financer sa formation ou contactez votre conseiller formation.

Financement par les OPCO
  • Adhérents Atlas, découvrez les avantages négociés par votre OPCO en cliquant ici

Horaires
Les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45. Les pauses et déjeuners sont offerts.
Pour les formations de 4 ou 5 jours, quelle que soit la modalité, les sessions se terminent à 16h le dernier jour.

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.

LYON
2026 : 31 mars, 26 mai, 13 oct., 17 nov.

AIX-EN-PROVENCE
2026 : 31 mars, 26 mai, 13 oct., 17 nov.

ANGERS
2026 : 31 mars, 13 oct.

AVIGNON
2026 : 26 mai, 17 nov.

BORDEAUX
2026 : 31 mars, 13 oct.

BREST
2026 : 31 mars, 13 oct.

CAEN
2026 : 26 mai, 17 nov.

CLERMONT-FERRAND
2026 : 31 mars, 13 oct.

DIJON
2026 : 26 mai, 17 nov.

GRENOBLE
2026 : 26 mai, 17 nov.

LE MANS
2026 : 31 mars, 13 oct.

LILLE
2026 : 31 mars, 26 mai, 13 oct., 17 nov.

LIMOGES
2026 : 31 mars, 13 oct.

MARSEILLE
2026 : 26 mai, 17 nov.

METZ
2026 : 31 mars, 13 oct.

MONTPELLIER
2026 : 26 mai, 17 nov.

MULHOUSE
2026 : 26 mai, 17 nov.

NANCY
2026 : 26 mai, 17 nov.

NANTES
2026 : 31 mars, 26 mai, 13 oct., 17 nov.

NIORT
2026 : 26 mai, 17 nov.

ORLÉANS
2026 : 26 mai, 17 nov.

PAU
2026 : 31 mars, 13 oct.

REIMS
2026 : 31 mars, 13 oct.

RENNES
2026 : 31 mars, 26 mai, 13 oct., 17 nov.

ROUEN
2026 : 26 mai, 17 nov.

SAINT-ETIENNE
2026 : 26 mai, 17 nov.

SOPHIA-ANTIPOLIS
2026 : 31 mars, 13 oct.

STRASBOURG
2026 : 31 mars, 26 mai, 13 oct., 17 nov.

TOULON
2026 : 26 mai, 17 nov.

TOULOUSE
2026 : 31 mars, 26 mai, 13 oct., 17 nov.

TOURS
2026 : 31 mars, 13 oct.

VALENCE
2026 : 31 mars, 13 oct.