ReactJS, programmation avancée

Module 1 — Introduction

• Rappels sur ES6+ et les modules
• Principes clés de React : VirtualDOM, JSX, One-way Data Flow
• Découverte de l'écosystème des outils ReactJS
• Travaux pratiques : mise en place d'un environnement de développement optimisé et d'une première application fil rouge

Module 2 — Bonnes pratiques de développement

• Rappels de productivité : prop-types, DefaultProps, component sheet avec StoryBook
• Typage du code avec Flow ou TypeScript
• Prototypage rapide de composants
• Mise en place de tests unitaires et fonctionnels
• Travaux pratiques : amélioration de la qualité de l'application via typage et tests automatisés

Module 3 — Techniques et design patterns avancés

• Pattern des Higher Order Components (HOC)
• Rendu dans des éléments DOM distants avec les portals
• Injection de dépendances avec les contexts
• React Hooks et programmation fonctionnelle : useEffect, useState
• Création de customHooks pour distribuer une logique personnalisée
• Travaux pratiques : mise en œuvre des contexts et portals ; création de composants fonctionnels avec hooks

Module 4 — Redux avancé

• Rappels Redux : entités, syntaxe de base et intégration avec React
• Simplification et optimisation des formulaires avec Redux Form
• Amélioration de l'expérience utilisateur avec Redux Persist et le stockage local du state
• Création d'un middleware Redux personnalisé
• Travaux pratiques : conversion d'un formulaire à Redux Form et sauvegarde de la navigation

Module 5 — Optimisation des performances

• API d'optimisation : React.Suspense, React.Lazy, mode concurrent, React.Cache
• Server side rendering avec Next.js
• Optimisation du cycle de vie des composants
• Utilisation de l'immutabilité pour accélérer et simplifier les traitements
• Composants purs
• Travaux pratiques : mise en œuvre du code splitting avec React.Lazy et Suspense

Module 6 — Animations et transitions

• Animer les composants avec des animations et transitions CSS
• Simplifier le travail avec React Transition Group
• Principales bibliothèques d'animation : comparatif et exemples de mise en œuvre
• Travaux pratiques : ajout de transitions d'apparition/disparition entre les écrans

Module 7 — L'internationalisation

• Internationalisation versus localisation : différences et scénarios d'utilisation
• Principales bibliothèques d'internationalisation
• Intégration dans React et Redux
• Travaux pratiques : traduction de l'application fil rouge et gestion du changement de langue