Objectifs de la formation

• Développer avec ReactJS
• Concevoir une SPA avec ReactJS et Flux
• Comprendre le subset JavaScript JSX
• Optimiser les performances des RIA

---

Programme de la formation

Rappels des composants des RIA

• Rappels : HTML, CSS, JavaScript et le DOM.
• Limites des architectures JavaScript classiques.
• Principes de Data Binding : dirty checking, observable, Virtual DOM.
• Découverte de React : philosophie, atouts, performances.
• JSX : syntaxe, intérêt, transpilation.
• Environnement moderne : installation via Vite, remplacement de Create React App.
• Maitrise de creatroot, automatic batching, rendu concurrent.

Travaux pratiques

installation de l’environnement et création d’un premier composant React.

Développer avec ReactJS

• Architecture MVC et Virtual DOM.
• Comprendre JSX en détail, bonnes pratiques.
• Composants fonctionnels et disparition progressive des classes.
• Cycle de vie et hooks de base : useState, useEffect, useRef.
• Gestion de l’état et rendu dynamique.
• Passage de données par les props.

Travaux pratiques

création de composants fonctionnels interactifs avec hooks.

Interactivité des composants

• Gestion des événements et binding automatique.
• Communication parent/enfant, levée d’événements.
• Composition et hiérarchie des composants.
• Formulaires contrôlés et validation.
• Optimisation des rendus avec React.memo, useCallback, useMemo.
• Les hooks : useTransition, useDeferredValue pour interfaces fluides.

Travaux pratiques

Création d’une interface utilisateur réactive avec formulaires et transitions.

Application monopage avec ReactJS et Flux ou Redux

• Principe du flux unidirectionnel : actions, dispatcher, stores, vues.
• Présentation et comparaison Flux / Redux.
• Architecture fonctionnelle et reducers.
• Simplification avec Redux Toolkit et les hooks useSelector, useDispatch.
• Alternatives modernes : Zustand, Recoil, Context API.
• Gestion de la récupération de données : fetch, useActionState, useOptimistic, TanStack Query.

Travaux pratiques

Développement d’une SPA complète gérant les données et les états.

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 (React 19).
• Server Components : architecture mixte client/serveur et réduction du JavaScript chargé.
• Présentation des frameworks compatibles (Next.js 14, Remix).

Travaux pratiques

mise en œuvre d’un rendu SSR simple et comparaison avec CSR.

Introduction à React Native

• Présentation de React Native et différences avec Cordova ou Ionic.
• Concepts communs : JSX, composants, hooks, Virtual DOM natif.
• Avancées React 19 intégrées à React Native.
• Aperçu d’un projet multiplateforme.

Démonstration

Création d’une mini-application mobile simple avec React Native.