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

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

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)

Définition (transmission de données, readonly)

Envoyer des props

Accéder au props (composants fonctionnels / classe)

La props children

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)

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

Contenu conditionnel et raccourcis (etet, ternaires)

Listes et raccourcis (higher order functions : map, filter, …)

Les clés (key) et le DOM Virtuel

Les fragments

É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

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

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

Introduction au framework Jest (setup, teardown, describe, it)

La React testing library (cleanup, render, fireEvent)