ReactJS – Développement d’applications Web

Introduction et rappels ES6

Outils et IDE
L’extension du navigateur React developer tools
Packaging, npm
Transpiler EcmaScript
Let, variables locales et constantes
Typage et types natifs
Paramètres optionnels, valeurs par défaut
Classes et interfaces
Gestion des modules
Arrow functions

Le framework React.js

Principes de base : comprendre l’intérêt de react par rapport à ses concurrents et la façon dont il a été pensé
Philosophie « composant »
Les workflows de développement : from scratch (customisé), intégration à une application web existante, utilisation d’un outil de création d’une application React (create-react-app)
Le DOM Virtuel et la réconciliation

Le JSX et les composants

Définition d’un élément React (types, attributs, enfants)
Liaison avec le DOM (ReactDOM.render())
Une nouvelle syntaxe : Le JSX
Le plugin de Babel pour le JSX
Les règles du JSX (injection d’expression, protection XSS, balise parente)
Les attributs JSX
Les composants : définition et intérêt (réutilisabilité)
Les composants en mode classe
Les composants fonctionnels (nouvelle solution)
Imbrication de composants (les balises de composant)

Les props

Définition (transmission de données, readonly)
Envoyer des props
Accéder au props (composants fonctionnels / classe)
La props children

Le State et les lifecycles

Définition (persistance de données, singularisation du composant)
Initialiser le state
La méthode setState et ses 2 formes (synchrone/asynchrone)
Le cycle de vie du composant
Montage du composant (componentDidMount)
Mise à jour du composant (componentDidUpdate)
Démontage du composant (componentWillUnmount)
Best pratices (setState asynchrone, ne pas utiliser setState dans le constructeur)

Les Hooks

Définition
Hooks vs composants en mode classe
Le hook d’état
Le hook d’effet et la liste de dépendance
Les modes du hook d’effet : initialisation, mise à jour, nettoyage
Les règles des hooks
Les custom hooks

Les événements

Syntaxe des événements dans le JSX
Méthodes de gestion d’événement (handler)
Techniques de liaison du contexte d’exécution au handler (bind(), fonctions fléchées, …)
Objet d’événement
Passage de paramètres supplémentaires au handler
Envoyer un handler en props

Rendu conditionnel et liste

Contenu conditionnel et raccourcis (etet, ternaires)
Listes et raccourcis (higher order functions : map, filter, …)
Les clés (key) et le DOM Virtuel
Les fragments

Les formulaires

État du composant = source de vérité
Composant contrôlé
L’attribut de valeur universel des champs : value
Soumission du formulaire
Composants non contrôlés (input de type file)
Les refs

Le routing et la navigation

Construire une SPA dont les urls sont bookmarkables
La librairie react-router-dom (version 5)
Le router
Les liens
Les routes
Le switch
Les paramètres d’url
Les navigations imbriquées

Introduction à Redux et architecture flux

Immutabilité des variables partagées
Les composants d’ordre supérieur
Problème de la gestion d’état
Les Systèmes de gestion d’état
L’architecture flux (actions, dispatcher, store, …)
Redux : définition et installation
Les actions
Les reducers
Le store
Utilisation avec React (react-redux)
Le composant Provider
Les containers
Le HOC connect
La méthode mapStateToProps
La méthode mapDispatchToProps

Les tests

Introduction au framework Jest (setup, teardown, describe, it)
La React testing library (cleanup, render, fireEvent)