Formations Web

Durée 3 jours • Prix (HT) 1690€

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