Organisme de Formation aux technologies et métiers de L'informatique
Effectuez une recherche
recherche
Accédez à votre espace client
Une question ? Contactez-nous
0 article panier
éditeurs domaines cursus certifications cpf
javascript

Formation ReactJS - Développement d'applications Web

Développer des interfaces utilisateurs avec la bibliothèque ReactJS, pour la création d'applications web robustes et performantes

Télécharger le plan de cours
Demander un devis
Obtenir un renseignement

Informations générales

APP264
3 jours (21h)
2 090 €HT

Objectifs

Après ce cours, vous serez capable de :

  • Connaître les spécificités de ReactJS
  • Savoir développer des applications web performantes avec ReactJS
  • Concevoir une SPA avec ReactJS et Flux
  • Identifier le subset JavaScript JSX
  • Optimiser les performances des RIA
  • Identifier les impacts du choix d'une architecture incluant ce type d'application

Public

Ce cours s'adresse avant tout aux personnes suivantes :

  • Développeurs
  • Architectes
  • Chefs de projets…

Prérequis

Pour suivre ce cours, vous devez déjà posséder les connaissances suivantes :

  • Disposer de connaissances pratique du développement Web
  • Maîtrise et pratique de JavaScript (ES5 minimum)

Programme de la formation

Bibliothèque JavaScript développée par Facebook depuis 2013, ReactJS voit sa popularité exploser. Certains acteurs de la nouvelle économie tels que Netflix, Airbnb ou encore WhatsApp ont d'ailleurs adopté ce moteur de rendu JavaScript qui se démarque de ses concurrents par sa flexibilité et ses performances principalement dues au fait qu'il ne met à jour le rendu de page web dans le navigateur qu'en cas de nécessité. A l'issue de cette formation, les participants disposeront des connaissances et compétences nécessaires au développement d'interfaces utilisateur avec le framework ReactJS.

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 (&&, 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 & 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)
plus d'infos

Méthode pédagogique

Chaque participant travaille sur un poste informatique qui lui est dédié. Un support de cours lui est remis soit en début soit en fin de cours. La théorie est complétée par des cas pratiques ou exercices corrigés et discutés avec le formateur. Le formateur projette une présentation pour animer la formation et reste disponible pour répondre à toutes les questions.

Méthode d'évaluation

Tout au long de la formation, les exercices et mises en situation permettent de valider et contrôler les acquis du stagiaire. En fin de formation, le stagiaire complète un QCM d'auto-évaluation.

Suivre cette formation à distance

  • Un ordinateur avec webcam, micro, haut-parleur et un navigateur (de préférence Chrome ou Firefox). Un casque n'est pas nécessaire suivant l'environnement.
  • Une connexion Internet de type ADSL ou supérieure. Attention, une connexion Internet ne permettant pas, par exemple, de recevoir la télévision par Internet, ne sera pas suffisante, cela engendrera des déconnexions intempestives du stagiaire et dérangera toute la classe.
  • Privilégier une connexion filaire plutôt que le Wifi.
  • Avoir accès au poste depuis lequel vous suivrez le cours à distance au moins 2 jours avant la formation pour effectuer les tests de connexion préalables.
  • Votre numéro de téléphone portable (pour l'envoi du mot de passe d'accès aux supports de cours et pour une messagerie instantanée autre que celle intégrée à la classe virtuelle).
  • Selon la formation, une configuration spécifique de votre machine peut être attendue, merci de nous contacter.
  • Pour les formations incluant le passage d'une certification la dernière journée, un voucher vous est fourni pour passer l'examen en ligne.
  • Pour les formations logiciel (Adobe, Microsoft Office...), il est nécessaire d'avoir le logiciel installé sur votre machine, nous ne fournissons pas de licence ou de version test.
  • Horaires identiques au présentiel.

Mis à jour le 09/06/2023