React | Développement front-end en JavaScript Mixte : présentiel / à distance

Dernière mise à jour : 07/05/2024

Bannière visuelle de présentation de la formation

Présentation

Cette formation vous permettra d'apprendre à industrialiser, structurer et optimiser vos développements d'applications Web JavaScript en utilisant la bibliothèque React créée par Facebook. Vous découvrirez également Redux, une bibliothèque de gestion d'états.

Objectifs

  • Cr√©er une application React
  • 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
  • Tester le code et les composants

Programme

JavaScript et EcmaScript 6+

  • Rappels √©l√©mentaires sur le langage¬†
  • Ma√ģtriser les closures¬†
  • Les bonnes pratiques en JavaScript¬†
  • Nouvelle gestion des classes¬†
  • Les arrow functions
  • Les template strings¬†
  • L'h√©ritage de classe¬†
  • Spread & Rest¬†
  • Comprendre la d√©structuration d'objets et de tableaux¬†
  • Modulariser les applications web¬†

Travaux pratiques : Installation de l'environnement de développement, manipulation du langage JavaScript

 

React et les Composants

  • La philosophie des composants¬†
  • D√©couverte du langage ¬ę JSX ¬Ľ et de la transpilation¬†
  • Cr√©er une hi√©rarchie de composants¬†
  • Transfert d'informations avec les props¬†
  • Architecturer notre projet, Smart & Dump components
  • Contr√īler le r√©affichage d'un composant
  • Gestion dynamique et statique du state
  • Comprendre le ¬ę VirtualDOM ¬Ľ
  • Optimiser les performances de son application¬†
  • Cycle de vie d'un composant
  • Cr√©er un composant ¬ę fonctionnel ¬Ľ
  • Rendez votre code p√©renne avec les ¬ę propTypes ¬Ľ
  • Mise en place de la projection avec les composants¬†

Travaux pratiques : Réalisation d'une application permettant de manipuler les composants et leur cycle de vie ainsi que la mise en page

 

Les formulaires

  • Dynamiser la validation des formulaires
  • Composants contr√īl√©s
  • Composants non contr√īl√©s
  • Marquer les √©l√©ments du DOM avec les r√©f√©rences¬†
  • Bien penser ses formulaires

 

Le routing

  • Mise en place de routes complexes¬†
  • Configuration du syst√®me de routing¬†
  • Manipuler la navigation des pages¬†
  • Ajouter des param√®tres dans nos routes¬†
  • Cycle de vie des routes¬†

Travaux pratiques : Réalisation d'une application permettant de mettre en place plusieurs pages et de naviguer entre elles.

 

Redux

  • Flux et Redux : pr√©sentation¬†
  • Propagation de donn√©es¬†
  • Comparaison des architectures¬†
  • Cr√©ation de vues et contr√īleurs dans Flux¬†
  • R√īle du dispacther¬†dans Flux pour les actions¬†
  • Les ¬ę Stores ¬Ľ, gestionnaire d'√©tats logique dans Flux¬†
  • Approche avec Redux¬†
  • Le ¬ę Reducer ¬Ľ

Travaux pratiques : Réalisation d'une application permettant de mettre en place la gestion d'état de l'application basée sur Redux

 

Tests unitaires

  • Introduction √† Jest, le JUnit de Javascript¬†
  • Tester un composant¬†
  • Tester le DOM avec ¬ę dom-testing-library ¬Ľ¬†
  • Le principe F.I.R.S.T.

Travaux pratiques : En s'appuyant sur une application réalisée précédemment, ajout des outils Esllint, Jest et Enzime

 

Server Side Rendering

  • Les avantages du server side rendering (SSR)¬†
  • Int√©gration dans Redux¬†
  • Principe et b√©n√©fices du d√©veloppement isomorphique¬†
  • Ecosyst√®me du JavaScript c√īt√© serveur¬†
  • Initiation √† NodeJS¬†
  • Configuration de NodeJs pour React
  • Mise en place du SSR

 

Internationalization (i18n)

  • Strat√©gie de mise en place avec les fichiers JSON
  • Les principales librairies d'internationalisation¬†
  • Int√©gration dans React et Redux

 

Librairies populaires de React

  • ReactNative¬†
  • NextJS¬†
  • Material UI / React Bootstrap

Public visé

  • D√©veloppeurs, architectes techniques, chefs de projet.

Modalités pédagogiques

Docaposte Institute propose plusieurs dispositifs pédagogiques adaptés aux apprenants :

 

  • Formation en pr√©sentiel
    • En groupe (inter-entreprises ou intra-entreprise)
    • En individuel (monitorat)
    • En journ√©e ou en cours du soir (sur demande sp√©cifique)
  • Formation en distanciel
    • Distanciel synchrone
    • Distanciel asynchrone

 

 

Prérequis

  • Ma√ģtriser les langages HTML et CSS
  • Ma√ģtriser le langage JavaScript

Moyens et supports pédagogiques

  • ¬∑¬†¬†¬†¬†¬†¬† Apports¬†des connaissances communes.
  • ¬∑¬†¬†¬†¬†¬†¬† Mises en situation sur le th√®me de la formation¬†et des cas concrets.
  • ¬∑¬†¬†¬†¬†¬†¬† M√©thodologie d'apprentissage attractive, interactive et participative.
  • ¬∑¬†¬†¬†¬†¬†¬† Equilibre th√©orie / pratique : 60 % / 40 %.
  • ¬∑¬†¬†¬†¬†¬†¬† Supports de cours fournis au format papier et/ou num√©rique.
  • ¬∑¬†¬†¬†¬†¬†¬† Ressources documentaires en ligne et r√©f√©rences mises √† disposition par le formateur.
  • ¬∑¬†¬†¬†¬†¬†¬† Pour les formations en pr√©sentiel dans les locaux mis¬†√† disposition, les apprenants¬†sont accueillis dans une salle de cours √©quip√©e d'un r√©seau Wi-Fi, d'un tableau blanc ou paperboard. Un ordinateur avec les logiciels appropri√©s est mis √† disposition (le cas √©ch√©ant).
  • ¬†

Modalités d'évaluation et de suivi

En amont de la formation

·       Recueil des besoins des apprenants afin de disposer des informations essentielles au bon déroulé de la formation (profil, niveau, attentes particulières...).

·       Auto-positionnement des apprenants afin de mesurer le niveau de départ.

Tout au long de la formation

¬∑¬†¬†¬†¬†¬†¬† √Čvaluation continue des acquis avec¬†des questions orales, des exercices, des QCM, des cas pratiques ou mises en situation...

A la fin de la formation

·       Auto-positionnement des apprenants afin de mesurer l'acquisition des compétences.

·       Evaluation par le formateur des compétences acquises par les apprenants.

·       Questionnaire de satisfaction à chaud afin de recueillir la satisfaction des apprenants à l'issue de la formation.

·       Questionnaire de satisfaction à froid afin d'évaluer les apports ancrés de la formation et leurs mises en application au quotidien.

Accessibilité

Nos formations peuvent être adaptées à certaines conditions de handicap. Nous contacter pour toute information et demande spécifique.

M'inscrire à la formation

Valider la pré-inscription
Inscription possible jusqu'à 10 jours avant démarrage formation

Prochaines Sessions

  • D√©sol√©, cette formation n'est pas programm√©e pour le moment.

    Si vous êtes responsable formation, vous pouvez faire une requête pour l'organiser en INTRA dans votre entreprise.

Dans la même catégorie

Catalogue de formation propulsé par Dendreo,
Plateforme dédiée pour les OF