ReactJS

Informatique Informatique
Référence formation : 4-JS-REA - Durée : 3 jours

 
  • Objectifs
  • Pré-requis
  • Pédagogie
Grace à cette formation vous pourrez Être familier avec la syntaxe et les fonctionnalités ES6 Connaitre les principes de base du framework ReactJS Comprendre la philosophie de React Appréhender le modèle Redux, Flux & co Construire une Single-Page Application basée sur React
Il est essentiel de Connaitre JavaScript et de ses aspects avancés

Organisation

Les sessions de formation ont lieu de 9h00 à 12h30 et de 13h30 à 17h00

Profil formateur

  • Nos formateurs sont des experts dans leurs domaines d'intervention
  • Leur expérience de terrain et leurs qualités pédagogiques constituent un gage de qualité

Moyens pédagogiques

  • Réflexion de groupe et apports théoriques du formateur.
  • Travail d'échange avec les apprenants sous forme de réunion - discussion.
  • Utilisation de cas concrets issus de l'expérience professionnelle.
  • Validation des acquis par des questionnaires, des tests d'évaluation, des mises en situation et des jeux pédagogiques.
  • Alternance entre apports théoriques et exercices pratiques (en moyenne sur 30 à 50% du temps)

Modalités d'évaluation

  • Positionnement préalable oral ou écrit.
  • Feuille de présence signée en demi-journée.
  • Evaluation des acquis tout au long de la formation.
  • Questionnaire de satisfaction
  • Attestation de stage à chaque apprenant
  • Evaluation formative tout au long de la formation.
  • Evaluation sommative faite par le formateur .

Public concerné

Salariés - Demandeur d'emploi - Reconversion professionnelle

Adaptation pédagogique et matérielle

Si vous avez besoin d'adaptation matérielle ou pédagogique, merci de prendre contact avec notre référent Handicap par téléphone au 02 35 12 25 55 ou par email à handicap@xxlformation.com

Moyens techniques en formation présentielle

Accueil des apprenants dans une salle dédiée à la formation et équipée avec :

  • Ordinateurs
  • Vidéo projecteur ou Écran TV interactif
  • Tableau blanc ou Paper-Board

Moyens techniques en formation distancielle

A l'aide d'un logiciel comme ® Microsoft Teams ou Zoom, un micro et une caméra pour l'apprenant.

  • Suivez une formation en temps réel et entièrement à distance. Lors de la session en ligne, les apprenants interagissent et communiquent entre eux et avec le formateur.
  • Les formations en distanciel sont organisées en Inter-Entreprise comme en Intra-Entreprise.
  • L'accès à l'environnement d'apprentissage (support de cours, ressources formateur, fichiers d'exercices ...) ainsi qu'aux preuves de suivi et d'assiduité (émargement, évaluation) est assuré.
  • Les participants recevront une convocation avec le lien de connexion à la session de formation.
  • Pour toute question avant et pendant le parcours, une assistance technique et pédagogique est à disposition par téléphone au 02 35 12 25 55 ou par email à commercial@xxlformation.com

Contenu pédagogique

INTRODUCTION ET RAPPELS ES6

  • Outils et IDE (Integrated Development Environment)
  • L'extension du navigateur React Developer Tools
  • Packaging, npm
  • Transpiler ECMAScript
  • Syntaxe ES6 : let, const, classes, interfaces, modules, fonctions arrow

LE FRAMEWORK REACTJS

  • Principes de base et comparaison avec les autres frameworks
  • Philosophie "composant"
  • Workflows de développement : from scratch, intégration à une application Web existante, utilisation de Create React App
  • Le DOM Virtuel et la réconciliation

LE JSX ET LES COMPOSANTS

  • Définition d'un élément React
  • Liaison avec le DOM (ReactDOM.render())
  • Syntaxe JSX
  • Les composants : définition et intérêt
  • Composants en mode classe et composants fonctionnels
  • Imbrication de composants

LES PROPS

  • Définition des props et transmission de données
  • Accéder aux props
  • La props.children

LE ROUTING ET LA NAVIGATION

  • Construire une SPA (Single Page Application) avec react-router-dom (version 6)
  • Le router, les liens, les routes, le switch
  • Les paramètres d'URL et les navigations imbriquées

LES HOOKS

  • Définition et comparaison avec les composants en mode "classe"
  • Hooks d'état (useState) et d'effet (useEffect)
  • Règles des Hooks et custom Hooks

SYNTAXE DES ÉVÈNEMENTS DANS LE JSX

  • Gestion des méthodes d'évènement (handlers)
  • Contenu conditionnel et raccourcis (opérateur &&, opérateur ternaire)

LISTES ET RACCOURCIS (MAP, FILTER)

  • Les clés (key) et le DOM Virtuel
  • Les fragments
  • Etat du composant et composants contrôlés
  • Gestion des formulaires et refs

IMMUTABILITÉ DES VARIABLES PARTAGÉES

  • Problème de la gestion d'état
  • Les actions, les reducers et le store
  • Utilisation avec React (react-redux)
  • Le composant Provider
  • Les containers
  • Utilisation avec les Hooks useSelector et useDisptach

INTRODUCTION AUX TESTS UNITAIRES

  • Le framework Jest (setup, teardown, describe, it)
  • La React Testing Library (cleanup, render, fireEvent)

REACT NATIVE : APERÇU ET UTILISATION POUR LE DÉVELOPPEMENT D'APPLICATIONS MOBILES

  • Server Side Rendering (SSR) : avantages et cas d'utilisation

BONNES PRATIQUES DE DEVELOPPEMENT EN REACT