ReactJS - Développement d'applications Web
ReactJS - Développement d'applications Web
Informatique > Développement web et mobilité
Objectifs
- Connaître les spécificités de ReactJS.
- Savoir développer des applications web performantes avec ReactJS.
- Concevoir une SPA avec ReactJS et Flux.
- Comprendre le subset JavaScript JSX.
- Optimiser les performances des RIA.
- Comprendre les impacts du choix d'une architecture incluant ce type d'application.
Le programme de la formation
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
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
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)
Les props
Définition (transmission de données, readonly)
Envoyer des props
Accéder au props (composants fonctionnels / classe)
La props children
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)
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
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
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
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
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
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
Les tests
Introduction au framework Jest (setup, teardown, describe, it)
La React testing library (cleanup, render, fireEvent)
Public et Pré-requis de la formation
Développeurs, Architectes, Chefs de projets...
Disposer de connaissances pratique du développement Web.
Maîtrise et pratique de JavaScript (ES5 minimum).
Méthode pédagogique 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.
29 Commentaires
Formation flexible en petit groupe
Très bonne formation! Organisation rapide et on est bien conseillé. Merci up up formation, je recommande fortement!!
Formation intéressante avec de bons échanges et une formatrice à l'écoute.
Merci up up concernant la flexibilite de mon planning
Bien.
Une organisation à la fois simple et professionnelle
bien mais surprenant concernant le paiement
Une formation adaptée à ce que je désirais m’a été trouvée avec succès
Bonne prestation Groupe sympathique
Société professionnelle, bon relationnel
Bonne formation
Simple et concis, une bonne présentation du concept
Je suis très satisfait d’UpUp. Le principe de la mutualisation est malin et très innovant. J’ai pu me former pour le 1/4 du prix initial de la formation. Je recommande.
Je suis particulièrement satisfaite de la formation surtout par la disponibilité de la formatrice et par le contenu du programme.
J'ai découvert cette plateforme très récemment. J'ai trouvé une formation près de chez moi dans le domaine recherché en quelques clics. Simple, efficace et rapide ! merci.
formation adaptée à mes besoins et mes horaires, je recommande vivement
Site clair. Offre complète
Claire facile d'acces ,rapide
Super formation. Merci beaucoup
Je recommande pour la qualité, la réactivité et la précision,
Simple, efficace, pratique !
très bonne formation très agréable merci
Site simple et facile d'utilisation.
Bonne formation
Site convivial facile d'accès et ergonomique prix intéressant
Excellente formation et concept innovant. Je recommande !
Upup est très professionnel, le site ergonomique.
Très clair, moderne et utile. N’hésitez pas à y aller, vous ne serez pas déçu
Un concept innovant. En mutualisant la formation, on assure un minimum de stagiaires par session.