Zenika

React

Par Zenika

Objectifs

  • Comprendre la philosophie de React
  • Appréhender le modèle Redux, Flux & co
  • Construire une Single-Page Application basée sur React

Programme

Introduction

  • Paysage des frameworks JS
  • Fondamentaux de NodeJS et NPM
  • Historique de React

React

  • La philosophie
  • Le fonctionnement interne : Virtual DOM, reconciliation
  • Le package : Addons, react-tools, JSXTransformer, React Developer Tools

Rendu des composants React

  • Notre premier composant
  • API React
  • Rendu DOM
  • JSX
  • TP : Création guidée d'une application en composants React

États des composants React

  • État interne d'un composant (State React)
  • Propriétés d'un composant (Props React)
  • Validation des propriétés
  • TP : Annimation de l'application fil rouge part les props et state react

Cycle de vie des composants React

  • Présentation des Hook React de montage d'un composant
  • Présentation des autres Hook React
  • Initiation aux performance d'un composant React

Environnement CommonJS

  • CommonJS
  • ESModules
  • Création du bundle client
  • TP: Découpe de l'application en modules et création d'un bundle avec Webpack

Tests

  • Lanceur de tests
  • Test Driven Development
  • Test d'une fonction
  • Mocking
  • Test d'un composant React
  • TP: Création guidée des tests de l'application

Architecture REST

  • Présentation de l'architecture
  • Intéractions entre une application React et un Serveur REST
  • TP : Récupération de données sur un serveur NodeJS

Redux

  • Le workflow unidirectionel
  • Flux
  • Les principales componsantes de Redux
  • Redux dans le contexte React
  • TP: Mise en place de Redux + Tests

Routage

  • Le projet react-router
  • TP: Passage de l'application en Single-Page Application avec React-router

Formulaire

  • Les formulaires
  • Validation d'un formulaire React
  • TP: Création et validation d'un formulaire avec React + Tests

Performances

  • Diminution des reconciliations avec shouldComponentUpdate
  • Utilisation de PureRenderMixin
  • Addon de mesure de performances
  • TP: Analyse des performances et tuning de l'application

Isomorphisme

  • Présentation du concept
  • Isomorphisme et les données
  • Isomorphisme et redux
  • TP: Transformation du TP fil-rouge en application isomorphique

Aller plus loin

  • Lodash
  • Test fonctionnels avec CucumberJS / Guerkin
  • i18n avec react-intl
  • React-native

Conclusion

Pédagogie

40% théorie, 60% pratique

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.