React par Human Coders

Jour 1
Introduction et historique
Retour sur l'environnement frontend actuel et son futur proche, concepts de base:
- chargement de ressources,
- modularité,
- asynchronisme,
- data
- binding,
- immutabilité
Les choix de React
Le "V" de MVC ? Fonctions pures de rendu, composants à état.
Virtual DOM, la clé des performances de React, pourquoi, comment ?
Mise en pratique :
- Création d'un premier arbre de composants,
- Propagation des props,
- Branchement des event
- handlers et population de composants enfants,
- Et gestion de l'état interne
Jour 2 - TP Fil rouge
Installation d'un environnement de production plus moderne : Node, ESLint, Webpack, Hot reloading, React DevTools...
Appropriation de JSX, validation des PropTypes, modules ES2015, structuration du projet, intégration de composants tiers via NPM.
Manipulation plus ambitieuse du DOM, du CSS.
Tirer partie du cycle de vie des composants.
Types : garanties et couverture avec Flow.
Tests unitaires, snapshots via Jest.
Jour 3 - TP Fil rouge
Revisiter la communication inter
- composants.
Externalisation de l'état avec un store Redux (les différences avec MobX seront évoquées).
Dispatch d'actions, composition des reducers associés.
Manipulation du context.
Redux DevTools, time
- travel debugging.
Intégration du Provider et des connexions React
- redux.
Ajouts de middlewares Redux.
Préparation des action
- creators synchrones, puis asynchrones (comparaison entre thunks, promises et sagas).
Appel d'API distante.
Pistes d'exploration bonus suivant le déroulement et le niveau :
- Rendu des composants côté serveur (isomorphisme)
- Routage (v4)
- i18n

Découvrir React, son fonctionnement et son écosystème
Décrire un arbre de composants en ES2017+, puis saupoudré de JSX
Maîtriser la gestion globale d'état et intégrer l'architecture Flux avec Redux
Mettre en place un environnement de développement
Écrire une application cliente complète interagissant avec un serveur