IB FORMATION : 06. React JS - Développement d'applications web

EN PRÉSENTIEL / A DISTANCE

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 (&&, 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 A 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)

APRÈS LA SESSION

Retrouvez sur le Learning Hub ib :

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

LES PLUS DE LA FORMATION

• Une pédagogie rythmée et variée fondée sur une alternance d'apports méthodologiques, d'ateliers pratiques et de phases d'échanges.
• Une vue d'ensemble des fonctionnalités du Framework ReactJS.
• Les retours d'expériences et conseils de consultants experts.
• Répartition théorie/pratique : 45% / 55%
• Cette formation se compose d’une alternance d’apports théoriques, de travaux pratiques, de démonstrations, de phases d’échanges entre participants et de synthèses de la part du formateur.