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.