React - Développement Web front-end en JavaScript

Référence : 18782-180625-2-REA

Infos pratiques

  • Durée : 4 jours soit 28 heures
  • Population visée : Ouvrier – Employé – Employé qualifié – Cadre – Cadre supérieur
  • Public concerné : Toute personne souhaitant apprendre à industrialiser, structurer et optimiser vos développements d’accplications Web JavaScript en utilisant la bibliothèque React créée par Facebook

Programme

Objectifs pédagogiques

A l’issue de cette formation, l’apprenant sera capable de :

  • Créer une application React ;
  • Utiliser les outils de développements associés ;
  • Mettre en œuvre les concepts de la programmation fonctionnelle et déclarative ;
  • Développer des interfaces utilisateurs à base de composants ;
  • Gérer la navigation au sein de l'application ;
  • Mettre en place une architecture de gestion d'état de l'application avec Redux.
  • Maîtriser les concepts de l'immuabilité ;
  • Tester le code et les composants.

Pré-requis

  • Maîtriser les langages HTML et CSS, ou idéalement avoir suivi la formation " Maîtriser HTML5 et CSS3 pour créer des pages Web Responsives " ;
  • Maîtriser le langage JavaScript, ou idéalement avoir suivi la formation " JavaScript - Exploiter sa puissance pour dynamiser les applications Web "

Objectifs opérationnels et contenu de la formation

JavaScript

  • Historique
  • ES5 / ES6 / ES7
  • Node.js
  • Callback vs Promise
  • Travaux pratiques :
  • Installation de l'environnement de développement
  • Manipulation du langage JavaScript

Découvrir React et construire une application

  • Différence entre framework et bibliothèque
  • Historique et principes fondamentaux de React
  • Découvrir et comprendre la syntaxe JSX
  • Rappels sur les classes JavaScript Array.map, Array.reduce, bind, this
  • Les outils de développement pour React
  • Construire une application avec React
  • Créer et structurer un projet React
  • Premiers composants
  • Gérer le rendu
  • Gérer les propriétés
  • Gérer les événements
  • Récupérer des données depuis un serveur
  • Travaux pratiques :
  • Création d'une première application élémentaire
  • Manipulation simple de composants
  • Consommer des données provenant d'un serveur

Composants

  • Gestion du cycle de vie et de l'état des composants
  • Adapter le rendu en fonction de conditions
  • Gérer des listes
  • Composition
  • Travaux pratiques :
  • Réalisation d'une application permettant de manipuler les composants et leur cycle de vie ainsi que la mise en page

Navigation

  • Pourquoi avons-nous besoin d'un outil pour le routage entre les pages ?
  • Présentation de react-router
  • Travaux pratiques :
  • Réalisation d'une application permettant de mettre en place plusieurs pages et de naviguer entre elles.

Gestion d'état : pattern Flux et Redux

  • Présentation du pattern Flux
  • Comprendre le 1-way data flow
  • Découvrir la gestion d'état
  • Découverte du hot-reloading et voyage dans le temps (undo/redo)
  • Redux et Redux-Thunk
  • Travaux pratiques :
  • Réalisation d'une application permettant de mettre en place la gestion d'état de l'application basée sur Redux

L'immuabilité

  • Découverte de immutable.js
  • Comprendre l'intérêt de l'immutabilité pour les performances
  • Travaux pratiques :
  • Mise à jour de l'application avec un état immuable

Tester la qualité du code

  • Tester les composants React
  • Tester les modifications de l'état
  • Présentation des outils permettant de garantir la qualité d'une application
  • Eslint
  • Jest
  • Enzime
  • Travaux pratiques :
  • En s'appuyant sur une application réalisée précédemment, ajout des outils Esllint, Jest et Enzime

Méthodes et moyens

  • Explications théoriques suivies de pratiques guidées puis mises en autonomie
  • 1 vidéoprojecteur par salle
  • 1 ordinateur par stagiaire

Méthodes d’évaluation des acquis

  • Exercices de synthèse et d’évaluation
  • Evaluation de fin de stage

Profil formateur

Nos formateurs sont certifiés à l’issue d’un parcours organisé par nos soins. Ils bénéficient d’un suivi de compétences aussi bien au niveau technique que pédagogique.

Support stagiaire

  • Support papier ou électronique (dématérialisé)
  • Les exercices d’accompagnement peuvent être récupérés sur clef USB