ReactJS : de l’essentiel aux concepts avancés

• Chefs de projets
• Développeurs

• 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.

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

Une attestation de participation sera transmise aux participants