React.js + Redux

Introduction

Panorama des librairies disponibles
Rappels HTML5 et JavaScript
React.js : présentation, historique des versions
Installer l'environnement de développement (NodeJS/npm/yarn)
Présentation de la commande create-react-app

Atelier : Créer et démarrer un projet ReactJS

Découvrir ECMAScript

Spécification ECMAScript et implémentations
La Syntaxe Objet :
Evolution de la programmation orientée prototype
Syntaxe de classes : membres d'instances et membres de classe
Agrégation d'objets (mixins)
Héritage
Les fonctions fléchées
Design patterns
Définition de modules
Système natif de gestion des modules, chargement
Gestion des dépendances

Créer un projet React

Organisation d'un projet React
Architecture du projet
Personnaliser la configuration du projet
Comprendre le rendu d'un projet
Le Mode Strict

Concevoir des Composants

Définir un composant
Les composants fonction et classe
Utiliser les propriétés
Etats des composants
Le style (CSS/SASS) et les assets
Gestion des évènements
Relation entre composants
Utiliser la composition

Atelier : Créer plusieurs composants

Mettre en forme du contenu avec JSX

Présentation de JSX
Les éléments React avec et sans JSX
Le DOM virtuel
Les expressions et les attributs
Se protéger des attaques par injection (XSS)
Les conditions et les boucles
Les fragments

Atelier : Afficher, boucler et conditionner des jeux de données

Comprendre le cycle de vie d’un composant

Comprendre les cycles
Monter un composant
Ajouter des méthodes à un composant et des propriétés par défaut
Fixer des types de propriété

Atelier : Charger des données depuis une API

Utiliser le cycle de vie dans un composant fonctionnel: Les Hooks

Présentation des Hooks
Liste des hooks disponibles
Les hooks d'états et d'effet
Les bonnes pratiques et pièges à éviter
Les hooks personnalisés

Atelier : Créer et manipuler une todolist

Naviguer dans un projet React

Mise en place du Routing (React-router)
Rendu d’une route
Liens via les Router
Organiser les routes
Passage de paramètres liens, redirections

Atelier : Mettre en place la navigation

Communiquer depuis une application: Les Formulaires

Rappel des comportements en HTML et JavaScript
Les formulaires avec React
Les composants contrôlés et non contrôlés
Récupérer et mettre à jour des données
Valider et filtrer les données
Présentation des frameworks disponibles (React Hook Form, Formik)

Atelier : Créer un formulaire d'inscription

Utiliser Redux dans un projet

Présentation de redux
Les avantages apportés par les Store
Créer et configurer un Store
Les Actions et Les Reducers
Utiliser les Action Creators
La fonction connect()
Les Hooks Redux (useStore, useSelector, useDispatch)

Atelier : Mettre en place une authentification