REACT JS avancé

Objectifs

• Comprendre les concepts avancés de React.
• Optimiser les performances des applications et l’expérience utilisateur.
• Améliorer la qualité du code produit.
• Intégrer les différentes librairies externes incontournables.

Contenu

Bonnes pratiques de développement

• Rappels de productivité : prop-types et DefaultProps, component sheet avec StoryBook.
• Typage du code avec flow ou TypeScript.
• Prototyper rapidement un composant, solutions.
• Mettre en place des tests unitaires et fonctionnels.

Travaux pratiques

• Amélioration de la qualité de l’application grâce au typage et aux tests automatisés.

Techniques et design patterns avancés

• Le pattern des higher order components (HOC).
• Le rendu dans des éléments DOM distants avec les portals.
• Injection de dépendances avec les contexts.
• « React hooks » programmation fonctionnelle : useEffect, useState.
• React : création de « customHooks » pour distribuer une logique personnalisée.

Travaux pratiques

• Mise en œuvre des contexts et des portals dans l’application fil rouge. Création de composants fonctionnels et utilisation des hooks.

Optimisation des performances

• API pour l’optimisation React.Suspense React.Lazy, mode concurrent et React.Cache.
• Server side rendering avec NextJS.
• Comment optimiser le cycle de vie des composants ?
• Utiliser l’immutabilité pour accélérer et simplifier les traitements.
• Les composants purs.

Travaux pratiques

• Mise en œuvre du code splitting avec React.Lazy et Suspense.

L’internationalisation

• Internationalisation versus localisation : différences et scénarios d’utilisation.
• Les principales librairies d’internationalisation.
• Intégration dans React

Travaux pratiques

• Traduction de l’application fil rouge et gestion du changement de langue.