Formation - ReactJS - Développement d'applications Web

1 - 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

2 - 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

3 - 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)

4 - Les props

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

5 - 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)

6 - 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

7 - 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

8 - 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

9 - 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

10 - 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

11 - 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

12 - Les tests

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

• Des vidéocasts pour revenir sur les points clés de la formation
• Des vidéo-tutos pour vous accompagner dans la mise en oeuvre de vos acquis