ReactJS : de l’essentiel aux concepts avancés

Construisez des applications performantes avec React.js

  • Filière :

    Développement logiciel

  • Sous-filière :

    Technos Web (PHP, JS...)

  • Référence

    MRJS

  • Durée

    3 jours (21 h)

  • Prix par personne HT

    2 050 € HT

Description

Cette formation complète vous accompagne pas à pas dans la maîtrise de React.js, le framework JavaScript incontournable pour créer des applications web performantes et modulaires. De l’initiation aux bases du développement avec React jusqu’à l’optimisation avancée, découvrez comment concevoir des interfaces modernes, gérer les états complexes, intégrer des librairies tierces et garantir la qualité de vos projets avec des outils de test performants. Idéal pour les développeurs souhaitant renforcer leurs compétences ou se spécialiser en React.

Objectifs pédagogiques

  • Comprendre les fondamentaux de React.js et ses avantages : maîtriser la philosophie orientée composant, le DOM virtuel et la syntaxe JSX pour créer des applications performantes et évolutives.
  • Maîtriser la gestion des états et des effets : utiliser efficacement les hooks comme useState, useEffect, ou useReducer pour gérer des états simples et complexes.
  • Concevoir des applications modernes et optimisées : mettre en œuvre des techniques avancées, telles que la mémoïsation, la gestion d’état partagée (useContext, Redux), et l’utilisation de librairies tierces.
  • Garantir la qualité et la fiabilité des projets React : apprendre les meilleures pratiques de test (Jest, React Testing Library) et découvrir les outils de débogage et de profiling pour optimiser vos applications.

Public cible

  • Chefs de projets
  • Développeurs

Pré-requis

  • Avoir une expérience pratique en développement Web
  • Connaissance et pratique de JavaScript (au moins ES5)

Modalités d’évaluation

L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.

Programme de la formation

Révisions Javascript natif moderne (de ES6)

  • Transpilation d’EcmaScript
  • let , const et var
  • Paramètres optionnels et valeurs par défaut
  • Spread / rest operators
  • Gestion des modules JavaScript
  • Fonctions fléchées (Arrow functions)
  • Gestion des modules JavaScript
  • Le principe d’immutabilité
  • Le principe de « fonction pure »

Introduction à React.js

  • Fondamentaux : avantages de React face à ses concurrents
  • Philosophie orientée composant
  • Méthodologies de développement avec React
  • Le DOM Virtuel et son processus de réconciliation

Initialiser un projet et son environnement

  • Environnement de développement et IDE
  • Gestion de paquets avec npm / yarn
  • Outil React developer tools pour navigateurs
  • ESlint, Prettier, Biome…
  • Typescript

JSX et composants dans React

  • Des class components au function components
  • Création d’éléments React : types, attributs, enfants
  • Intégration avec le DOM via ReactDOM.render()
  • Introduction à la syntaxe JSX
  • Création et utilité des composants, leur réutilisabilité
  • Imbrication de composants
  • Rendu conditionnel

Les Props dans React

  • Concept et utilisation
  • Passage et accès aux props
  • La propriété « children »

JSX avancé

  • Rendu conditionnel
  • Manipulation de listes avec les fonctions map, filter, etc
  • Composant récursif
  • Les portals React

Gestion des événements dans React

  • Syntaxe et gestion des événements
  • Liaison des événements et passage de paramètres

Introduction aux Hooks dans React

  • Le cycle de vie des composants
  • Comparaison hooks et class components

Gérer les états (states) et les effets

  • Utilisation du hook useState
  • Partager et mettre à jour un state
  • Gérer les effets avec useEffect

Les formulaires dans React

  • Gestion d’un state complexe avec useReducer
  • Composants contrôlés et non contrôlés
  • Utiliser une lib
  • Accéder au DOM avec useRef
  • La propriété ref avec forwardRef

Les hooks d’optimisations

  • Optimisation des rerenders
  • Principe de mémoisation
  • useMemo et useCallback
  • Mémoisation d’un composant avec React.memo
  • Vers le nouveau React Compiler
  • Utilisation des React Devtools et Profiler

Gestion d’état partagé

  • Le props-drilling
  • Les contexts React useContext
  • Les librairies de state management
  • Exemple de Redux / Jotai

Les custom hooks

  • Combiner des hooks
  • Data fetching
  • Gestion des erreurs
  • Gestion des loadings avec Suspense
  • Débugger

Implémenter une librairie

  • Installer et utiliser une librairie tierce
  • Exemple d’un slider

Routing et navigation

  • Création de Single Page Applications (SPA)
  • Utilisation de react-router

Aller plus loin avec un meta-framework (Next JS)

  • Qu’est-ce qu’un meta-framework ?
  • Les contraintes du SEO
  • Server-side Rendering – SSR
  • Static Site Generation – SSG
  • Increment Static Regeneration – ISR

React Server Components

  • Data fetching dans un RSC
  • Les server functions

Les tests dans React

  • Utilisation du framework Jest
  • React testing library pour les tests d’interface
  • Tests des hooks
  • Tests de composants avec des hooks
  • Tests asynchrones
  • Mocks avancés

Programme mis à jour le