React – Développer des applications Web

Référence : T44A-057

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 ses développements d'applications Web JavaScript en utilisant la bibliothèque React

Programme

Objectifs pédagogiques

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

  • Mettre en œuvre les concepts de la programmation fonctionnelle et déclarative
  • Installer et configurer un projet React
  • 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
  • Tester le code et les composants

Pré-requis

  • Connaître les notions fondamentales de la création de pages Web HTML
  • Maîtriser un langage de programmation (C#, Java, C++, PHP, JavaScript, Python)

Objectifs opérationnels et contenu de la formation

JavaScript

  • Historique
  • ES5 / ES6 / ES7
  • Node.js
  • Callback vs Promise
  • Travaux pratiques :
    • Manipulation du langage JavaScript

Découvrir React et construire une application

  • Historique et principes fondamentaux de React
  • Découvrir et comprendre la syntaxe JSX
  • Rappels sur les classes JavaScript Array.map, Array.reduce, bind, this
  • 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 :

- Initialisation du projet via create-react-app

- Premier conteneur, premier composants & props

- Afficher la data JSON avec fetch et axios

Composants

  • Gestion du cycle de vie et de l’état des composants
  • Adapter le rendu en fonction de conditions
  • Gérer des listes
  • Travaux pratiques :

- Construire une liste avec fetch et axios

Navigation

  • Comprendre le routage entre les pages
  • Présentation de react-router
  • Travaux pratiques :

- Créer plusieurs pages et naviguer (menu/boutons)

Gestion d’état : pattern Flux et Redux

  • Présentation du pattern Flux
  • Comprendre le 1-way data flow
  • Découvrir la gestion d'état
  • Redux et Redux-Sagas
  • Travaux pratiques :

- Application de Redux dans le contexte de l’application

L'immuabilité

  • Découverte de immutable.js
  • Comprendre l'intérêt de l'immutabilité pour les performances
  • Travaux pratiques :

- Intégrer immuabilité dans l’application (redux)

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 / Standard

- Jest

  • Travaux pratiques :

- En s’appuyant sur une application réalisée précédemment, ajout des outils ESLint et Jest

[Options] Intégrer des modules complémentaires

  • Intégrer des librairies et kit de composants graphiques
  • Mettre en œuvre l’internationalisation

Méthodes et moyens

 Explications théoriques suivies de pratiques guidées puis de mises en autonomie


Votre formation a lieu en présentiel :

  • 1 vidéoprojecteur par salle
  • 1 ordinateur

Votre formation se déroule à distance avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque)
  • 1 Webcam (facultatif – dans l’idéal)
  • 1 deuxième écran (facultatif – dans l’idéal)

Votre formation se déroule sur notre plate-forme de formation avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque - facultatif)

Méthodes d’évaluation des acquis

L’acquisition des compétences de la formation se fait à travers le suivi du formateur tout au long de la formation (séquences synchrones et asynchrones). Elle s’appuie également sur la réalisation d’exercices et de TP. Enfin, des quiz s’ajoutent aux différents outils de validation de l’acquisition des compétences visées.
Une évaluation est systématiquement réalisée par chaque stagiaire, à l’issue de la formation.

Profil formateur

Nos formateurs sont certifiés à l’issue d’un parcours organisé par nos soins. Ils bénéficient d’un suivi de maintien et d’évolution de leurs compétences aussi bien au niveau technique que pédagogique.
Chacun de nos formateurs a bénéficié d’une formation spécifique à l’animation de classe virtuelle et à l’utilisation des solutions de formation à distance du Groupe ARKESYS.

Support stagiaire

À l’issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu’un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.

Accessible à tous

Cette formation est accessible à toute personne en situation de handicap. Notre référent handicap prendra contact avec les stagiaires concernés pour adapter l’animation à leurs besoins et rendre l’apprentissage accessible à tous. Enfin, nos centres de formation sont accessibles aux personnes à mobilité réduite.