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