React - JS

Développement d'applications dynamiques avec React

Training created on 8/23/22. Last update on 9/17/25.
Programme version: 1
Satisfaction rate of learners
9,8/10 (5 review)

Type of training

Face-to-face

Training duration

21 hours (3 days)

Accessibility

Yes
This training is free.
Sign-up
This training is free.
Sign-up
This training is free.
Sign-up
Need to adapt this training to your needs? Do not hesitate to contact us for a customised quote! Contact us

React - JS

Développement d'applications dynamiques avec React


React est une librairie née des problématiques de performance, productivité et maintenabilité rencontrées par les équipes de développement de Facebook et Instagram. Il en résulte une librairie puissante et agréable à utiliser. Elle nécessite toutefois d'être utilisée dans un environnement technique adéquat et a pour ambition de "réécrire" les bonnes pratiques. A nous de vous donner toutes les bases nécessaires pour tirer la quintessence de React.

Objectives of the training

  • Comprendre la philosophie de React
  • Appréhender le modèle Redux, Flux & co
  • Construire une Single-Page Application basée sur React

Profile of beneficiaries

For whom
  • Développeurs web
Requirements
  • Maîtrise du langage Javascript
  • Connaissance des technologies web

Training content

Introduction
  • Paysage des frameworks JS
  • Fondamentaux de NodeJS et NPM
  • Historique de React
React
  • La philosophie
  • Le fonctionnement interne : Virtual DOM, reconciliation
  • Le package : Addons, react-tools, JSXTransformer, React Developer Tools
Rendu des composants React
  • Notre premier composant
  • API React
  • Rendu DOM
  • JSX
  • TP : Création guidée d'une application en composants React
États des composants React
  • État interne d'un composant (State React)
  • Propriétés d'un composant (Props React)
  • Validation des propriétés
  • TP : Annimation de l'application fil rouge part les props et state react
Cycle de vie des composants React
  • Présentation des Hook React de montage d'un composant
  • Présentation des autres Hook React
  • Initiation aux performance d'un composant React
Environnement CommonJS
  • CommonJS
  • ESModules
  • Création du bundle client
  • TP: Découpe de l'application en modules et création d'un bundle avec Webpack
Tests
  • Lanceur de tests
  • Test Driven Development
  • Test d'une fonction
  • Mocking
  • Test d'un composant React
  • TP: Création guidée des tests de l'application
Architecture REST
  • Présentation de l'architecture
  • Intéractions entre une application React et un Serveur REST
  • TP : Récupération de données sur un serveur NodeJS
Redux
  • Le workflow unidirectionel
  • Flux
  • Les principales componsantes de Redux
  • Redux dans le contexte React
  • TP: Mise en place de Redux + Tests
Routage
  • Le projet react-router
  • TP: Passage de l'application en Single-Page Application avec React-router
Formulaire
  • Les formulaires
  • Validation d'un formulaire React
  • TP: Création et validation d'un formulaire avec React + Tests
Performances
  • Diminution des réconciliations avec shouldComponentUpdate
  • Utilisation de PureRenderMixin
  • Addon de mesure de performances
  • TP: Analyse des performances et tuning de l'application
Isomorphisme
  • Présentation du concept
  • Isomorphisme et les données
  • Isomorphisme et redux
  • TP: Transformation du TP fil-rouge en application isomorphique
Aller plus loin
  • Lodash
  • Test fonctionnels avec CucumberJS / Guerkin
  • i18n avec react-intl
  • React-native
Conclusion

Teaching team

Mathieu MURE - Formateur React JS // Stéphane MOSNIER - Responsable Projets Formation - s.mosnier@digital-league.org Julia DELRIEU - Référente handicap- j.delrieu@digital-league.org Quentin POYET - Responsable administratif et financier - q.poyet@digital-league.org

Monitoring of implementation and evaluation of results

  • Feuilles de présence.
  • Exercices & mises en pratique pendant la formation.
  • Autoévaluation sur les objectifs en fin de formation.
  • Formulaires d'évaluation de la formation.
  • Certificat de réalisation de l’action de formation.

Technical and educational resources

  • Accueil des apprenants dans une salle dédiée à la formation.
  • Documents supports de formation projetés.
  • Exposés théoriques.
  • Etude de cas concrets.
  • Mise à disposition en ligne de documents supports à la suite de la formation.

Quality and satisfaction

Satisfaction rate of learners
9,8/10 (5 review)

Training location

Salle de formation Saint-Etienne 60 street des Aciéries 42000 Saint-Etienne

Reception capacity

Between 0 and 10 learners

Login delay

6 weeks

Accessibility

N'hésitez pas à nous contacter si vous souhaitez en savoir plus, que vous soyez intéressé pour suivre une formation, que vous ayez des demandes de personnalisation ou encore que vous ayez des salariés en situation de handicap. Nous apportons des réponses individualisées et adaptées à chaque situation. Concernant le handicap, nous étudions chaque situation individuellement pour prendre en compte : – Les obstacles de l’environnement de formation – Les incapacités ou capacités résiduelles de la personne Afin de supprimer les obstacles, ou au moins les réduire, afin de rendre nos formations « accessibles » à tous. Jessica GAY-MAYERE - Référente handicap - j.gaymayere@digital-league.org