Aller au contenu principal
Afficher le fil d'ariane

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

Organisme

IB FORMATION
1 PLACE DE LA PYRAMIDE
92911 PARIS LA DEFENSE CEDEX
Voir toutes ses formationsAutres organismes proposant cette formation

Durée

21 heures

Modalités

Formation

  • Classe virtuelle
  • Présentiel

Évaluation

Une attestation de fin de formation sera remise au stagiaire à l'issue de la formation

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
882€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
3540€ HT / groupe
4 stagiaires minimum

Public

Développeurs, architectes, chefs de projets…

Pré-requis

Avoir des connaissances pratique du développement Web, maîtrise et pratique de JavaScript (ES5 minimum).

Objectifs pédagogiques

- 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 

- Être en mesure de comprendre les impacts du choix d'une architecture incluant ce type d'application

Programme détaillé

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.

Sessions

Filtrer les résultats

47 résultats

Modalités pédagogiques
Formation synchrone se déroulant avec la présence physique du (des) formateur(s) et du (des) apprenant(s) réunis dans un même lieu de formation.
Formation combinant des séquences en présentiel et des séquences à distance synchrones ou asynchrones.
Formation à distance, asynchrone, s’appuyant sur une plateforme d’apprentissage, pouvant être complétée par d’autres modalités de formation à distance (visio-conférence…)
Formation à distance, synchrone, s’appuyant sur un dispositif de visio-conférence. La classe virtuelle recrée à distance les conditions d’une formation en salle traditionnelle.
Type de formation
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
Options
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.

0 résultat