Orsys

ReactJS, programmation avancée

Par Orsys

Objectifs

À l’issue de la formation, le participant sera en mesure de :

  • 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

Programme

Introduction

  • Rappels sur ES6+ et les modules.
  • Les principes clés de React : VirtualDOM, JSX, One-way Data Flow.
  • Découvrir l’écosystème des outils ReactJS.
  • Rappels sur ES6+ et les modules.
  • Les principes clés de React : VirtualDOM, JSX, One-way Data Flow.
  • Découvrir l’écosystème des outils ReactJS.

Travaux pratiques

Mise en place d'un environnement de développement optimisé pour React et d'une première application web qui servira de fil rouge pour les chapitres suivants.

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.
  • 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.
  • 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.

Redux avancé

  • Rappels Redux : les différentes entités, la syntaxe de base et l'intégration avec React.
  • Simplifier et optimiser la création de formulaires avec Redux Form.
  • Améliorer l'expérience utilisateur grâce à Redux Persist et au stockage local du state.
  • Créer un middleware Redux Custom.
  • Rappels Redux : les différentes entités, la syntaxe de base et l'intégration avec React.
  • Simplifier et optimiser la création de formulaires avec Redux Form.
  • Améliorer l'expérience utilisateur grâce à Redux Persist et au stockage local du state.
  • Créer un middleware Redux Custom.

Travaux pratiques

Conversion d'un formulaire à Redux Form et sauvegarde de la navigation.

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.
  • 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.

Animations/transitions

  • Animer les composants "à la main" à l'aide d'animations et transitions CSS.
  • Simplifier le travail avec React Transition Group.
  • Aller plus loin avec les principales librairies d'animation : comparatif et exemples de mise en œuvre.
  • Animer les composants "à la main" à l'aide d'animations et transitions CSS.
  • Simplifier le travail avec React Transition Group.
  • Aller plus loin avec les principales librairies d'animation : comparatif et exemples de mise en œuvre.

Travaux pratiques

Ajout de transition d'apparition/disparition des différents écrans.

L'internationalisation

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

Travaux pratiques

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

Formations de la même catégories (5)

Orsys
ReactJS, programmation avancéePar Orsys

À l'origine simple outil interne de Facebook, React est devenue l'une des principales librairies JavaScript open source. Avec cette formation, vous approfondirez votre maîtrise de React, découvrirez les dernières nouveautés et l'écosystème indispensable pour concevoir des applications web encore plus perfectionnées.

Orsys
React Native, développer des applications mobiles nativesPar Orsys

Réconciliant les développeurs d'applications natives et hybrides, React Native est devenu un framework de référence pour la création d'applications mobiles multiplateformes. Cette formation vous permettra d'acquérir les compétences nécessaires pour concevoir des applications compatibles avec iOS, Android et Windows.

Clever Institut
React NativePar Clever Institut

Lancé par Facebook dans le sillon de React, React Native est devenu en à peine deux ans le framework de création d’applications mobiles multi-plateformes le plus populaire, réconciliant les développeurs d’applications natives et hybrides.
Cette formation vous permettra d’appréhender les principes clés de React Native et d’acquérir les compétences nécessaires à la publications d’applications mobiles performantes, robustes et maintenables, et compatibles avec iOS, Android et Windows

Ambient IT
React NativePar Ambient IT

React Native est une technologie Open-Source de Facebook permettant la production d’applications mobiles natives sur iOS, Android et bientôt sur Windows 10 Mobile. Ce programme de 2 jours de formation est un condensé intensif des meilleures pratiques pour aborder un projet React Native. React en général et React Native en particulier ont introduit de nouvelles façons de “penser” une application avant de la coder et cela impacte tout le processus de conception, de production et de déploiement.

Ici nous nous concentrerons à 100% sur React-Native et son lot de libs associées sans lesquelles votre app ne serait pas « scalable » (flexible) dans un environnement réel de production.

Au bout de ce programme vous aurez développé deux Apps, dont une plus complète avec React Native et Redux, connectée à un « Backend as a Service » (BaaS) comme Firebase 3.0.

La formation utilisera la dernière version stable en date du projet (React Native 0.64 à ce jour ).

Openska
React NativePar Openska

React Native est un framework destiné au développement d’applications mobiles natives. Sa particularité est de permettre le développement React Native est un framework destiné au développement d’applications mobiles natives. Sa particularité est de permettre le développement d’applications multi-plateformes utilisant des composants natifs.
Lors de la formation vous découvrirez les principes clés de React Native et apprendrez à réaliser des applications mobiles performantes, stables et compatibles avec iOS, Android et Windows.