Formations

Introduction à React

• Philosophie de React
• Les autres Frameworks JavaScript
• Environnement de développement
• Outils de debug

Les nouveautés ECMAScript

• Présentation d’ECMAScript
• Les nouveautés ES6/ES2015
• ES2017 : les fonctions « async »

Premiers développements avec ReactJS

• Le composant
• Principe et conséquences du Virtual Dom
• La fonction render()
• 'props' et 'state'
• Le langage JSX

Les possibilités de build

• Build complet avec webpack
• Build managé avec la cli create-react-app
• Les différents packages de bootstraping React
• Optimisation et construction des fichiers nécessaires à l’affichage complet du site (js, mais aussi images et css)
• Comparaison de la version lien dans le html/ la version développement et la version production

Les Composants React

• Les composants fonctionnels et de classe
• Composition de multiple composants
• Cycle de vie d'un Composant de classe
• Les Hooks des composants fonctionnels
• Gestion des événements click, mouseover...
• Styliser ces composants
• Les différentes approches pour styliser un composant
• La bibliothèque de « styled-components » Emotion

Interaction de l'utilisateur avec les composants

• Gestion d'Ajax
• Gestion des formulaires
• Manipulation du DOM, DOM virtuel

Gestion centralisée des données

• Présentation des différentes technologies de gestion (Redux, MobX, context, Recoil etc.)
• Présentation de Redux
• Le Store et les Actions
• Création de Reducteurs pour les Actions
• Utilisation avec React

Application monopage avec ReactJS et un module de store de variables

• Flux/Redux : présentation. Propagation de données.
• Comparaison des architectures.
• Création de vues et contrôleurs dans Flux.
• Rôle du "Dispacther" store reducer action.

Le Router

• Les différents Routers
• HashRouter ou PushState
• Conséquences sur le déploiement

Application isomorphique

• Présentation de NodeJS
• Principe et bénéfices du développement isomorphique
• Découverte du Framework NextJs

Exercices pratiques

• Mise en place d’un environnement de développement
• Réalisation d’un générateur de formulaires en JSX
• Mise en place d’un ensemble de composants UI
• Manipulation des stores de données