React propose une façon pragmatique d'aborder le développement de composants Web et de les structurer en interface utilisateur complexe.

Lors de cette formation React, en trois jours essentiellement pratiques, nous aborderons les principes de cette librairie, sa vision singulière, la syntaxe, les bonnes pratiques, l'outillage et nous réaliserons une application graphique complète.

Si React reste bien entendu le principal sujet de la formation, une multitude de notions annexes autour de JavaScript et du web en général sont abordées en complément: les Promesses, le duo async/await, les nouveautés en préparation par le TC39, GraphQL, React Native, SASS, le vectoriel, elm…

Les objectifs

• 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

Pré-requis

• Un bon niveau JavaScript (ES5+): être à l'aise avec des concepts comme les "closures", les particularités de “this”, l’écoute d'événements (DOM ou jQuery), l’approche fonctionnelle…
• Une précédente expérience sur un framework type Angular ou Backbone peut être un plus.
• Apportez votre ordinateur portable. (Linux / Mac plus confortable, mais pas obligatoire). Il n’est pas nécessaire d’y installer quoique ce soit au préalable.

Le programme de la formation React

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 ?

TP
Création d’un premier arbre de composants, propagation des props, branchement des event-handlers, population de composants enfants, 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 / niveau:
Rendu des composants côté serveur (isomorphisme)
Routage (v4)
i18n

Le(s) formateur(s)

Bruno Heridet

Bruno Heridet est un développeur web spécialisé dans l'écosystème JavaScript, qu'il s'agisse d'applications front-end (navigateurs, Firefox OS) de programmes autonomes (serveurs et outils NodeJS) ou du gossip impliquant les leaders de projets open-source. Il participe régulièrement aux éditions de LyonJS ou NantesJS, ainsi qu'aux Human Talks de ces deux villes.

Voir son profil détaillé

Nicolas Chambrier

Nicolas Chambrier est expert dans les technologies du web, et notamment JavaScript aussi bien côté client (jQuery, HTML5, DOM…) que serveur (Node.js). Après un démarrage en tant que "techos à tout faire" dans une petite société d'informatique, il a affûté ses talents de développeur et d'architecte logiciel et réseau en agence web, avant de devenir "DevOp" indépendant. Vous pouvez suivre ses expériences sur Node.js sur son blog. Vous pourrez également le rencontrer régulièrement au LyonJS dont il est un membre actif. Vous pourrez trouver une interview de Nicolas Chambrier sur le blog de Human Coders

Voir son profil détaillé

Suivi de formation en option

A l'issue de la formation, nos formateurs peuvent aussi intervenir pour vous accompagner dans la mise en application des compétences acquises :

• en répondant à vos questions lors de rendez-vous téléphoniques réguliers
• en étant présents physiquement à l'amorce du projet
• en réalisant un audit de vos pratiques quelques semaines/mois après la formation