Formation : ReactJS – Développement avancé d’applications Web
Développer des interfaces utilisateurs avec la bibliothèque ReactJS, pour la création d’applications web robustes et performantes
- 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)
- 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
- 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)
Durée : 28h
Horaires : soirs / week-ends
Groupes de 5 à 10 personnes