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

Contacts
Localisation
Nous suivre

S'inscrire

Formation Développement Web avec HTML5, CSS3, JavaScript, PHP et MySQL