← Retour aux formations

Développement Web & No-Code

ReactJS, maîtriser le framework JavaScript de Facebook

Intermédiaire
Développement Web & No-Code

À propos de cette formation

Cette formation couvre le développement d'applications avec ReactJS. Les participants découvrent la philosophie du framework, maîtrisent les composants fonctionnels et les hooks, gèrent l'état avec Redux, réalisent une SPA complète, abordent le rendu serveur (SSR) et s'initient à React Native pour le développement mobile.

Objectifs de la formation

  • check_circleDévelopper des applications avec ReactJS
  • check_circleComprendre la syntaxe JSX et TSX
  • check_circleComprendre l'architecture d'un store front-end
  • check_circleConcevoir une SPA avec ReactJS
  • check_circleOptimiser les performances des applications front-end
  • check_circleGérer des formulaires avec ReactJS
  • check_circleCréer des applications mobiles avec React Native

Programme détaillé

Module 1 — Rappels sur les composants des RIA

  • Rappels : HTML, CSS, JavaScript et le DOM
  • Limites des architectures JavaScript classiques
  • Principes de réactivité : observable, Virtual DOM
  • Découverte de React : philosophie, atouts et performances
  • JSX : syntaxe, intérêt et transpilation
  • Environnement moderne : installation via Vite
  • Maîtrise de createRoot, automatic batching et rendu concurrent
  • Travaux pratiques : installation de l'environnement et création d'un premier composant React

Module 2 — Développer avec ReactJS

  • Architecture MVC et Virtual DOM
  • JSX en détail et bonnes pratiques
  • Présentation de TSX (TypeScript Execute)
  • Composants fonctionnels versus classes
  • Recommandations et migration vers les composants fonctionnels
  • Cycle de vie et hooks de base : useState, useEffect, useRef
  • Bonnes pratiques d'utilisation des hooks
  • Création de hooks personnalisés
  • Travaux pratiques : création de composants fonctionnels interactifs avec hooks

Module 3 — Interactivité des composants

  • Gestion de l'état et rendu dynamique
  • Passage de données par les props
  • Gestion des événements et binding automatique
  • Communication parent/enfant et levée d'événements
  • Composition et hiérarchie des composants
  • Formulaires contrôlés et validation
  • Futur des optimisations avec React Compiler
  • Hooks useTransition et useDeferredValue pour des interfaces fluides
  • Travaux pratiques : création d'une interface utilisateur réactive avec formulaires et transitions

Module 4 — Application monopage avec React et Redux

  • Principe du flux unidirectionnel : actions, dispatcher, stores, vues
  • Présentation de Redux et architecture fonctionnelle avec reducers
  • Simplification avec Redux Toolkit et les hooks useSelector, useDispatch
  • Alternatives de l'écosystème : Zustand, Recoil
  • Gestion de la récupération de données : fetch, axios
  • Hooks spécialisés : useActionState, useOptimistic, TanStack Query
  • Travaux pratiques : développement d'une SPA complète gérant les données et les états

Module 5 — Application isomorphique et rendu serveur

  • Principe et intérêt du rendu isomorphique
  • Introduction à Node.js pour le rendu serveur
  • Configuration SSR : React DOM Server, hydratation, streaming SSR
  • Server Components : architecture mixte client/serveur et réduction du JavaScript chargé
  • Présentation des frameworks compatibles : Next.js, Remix
  • Travaux pratiques : mise en œuvre d'un rendu SSR simple et comparaison avec le rendu CSR

Module 6 — Introduction à React Native

  • Présentation de React Native et différences avec Cordova ou Ionic
  • Concepts communs : JSX, composants, hooks, Virtual DOM natif
  • Nouveautés de React Native
  • Utilisation d'EXPO et aperçu d'un projet multiplateforme
  • Démonstration : création d'une mini-application mobile simple avec React Native

Prérequis

Avoir une pratique concrète du développement web et maîtriser JavaScript (ES5 au minimum).