Formation React

Maîtrisez React, la bibliothèque JavaScript de Facebook, pour construire des interfaces utilisateur modulaires, déclaratives et hautement performantes.

Devenez développeur React en maîtrisant les Hooks (useState, useEffect, useContext), la gestion d'état globale (Redux/Zustand), le routing (React Router) et les meilleures pratiques pour des composants performants.

4 jours (28 h)

2 100,00 € HT

REMOTE

import React, { useState } from 'react';

function Counter() {
	// Déclaration d'un état local avec le Hook useState
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>Vous avez cliqué {count} fois</p>
			<button onClick={() => setCount(count + 1)}>
				Cliquer ici
			</button>
		</div>
	);
}

export default Counter;

Description

React est la bibliothèque JavaScript la plus populaire pour la construction d'interfaces utilisateur déclaratives, maintenue par Meta (Facebook). Cette formation vous plonge dans le cœur de la philosophie React : le développement basé sur les composants. Vous apprendrez à utiliser l'approche fonctionnelle et à tirer pleinement parti des Hooks (comme useState, useEffect, useContext) pour gérer l'état local et les effets de bord. L'objectif est de vous rendre autonome dans l'architecture d'applications complexes, en couvrant la gestion d'état globale avec des outils comme Redux ou Zustand, la navigation avec React Router, et l'interaction avec des APIs externes. Une attention particulière est portée aux bonnes pratiques pour garantir la performance (mémorisation, optimisation du rendu) et la testabilité de vos composants.

Les objectifs

Développer et maintenir une application React
Maîtriser le développement orienté composant
Optimiser les performances des RIA (Rich Interface Application) React
Implémenter un système de routing optimisé côté front-end

Public visé

Développeurs web

Prérequis

Pratique du développement web

Le programme

Jour 1

Matinée

1. JAVASCRIPT MODERNE & TYPESCRIPT

Fondamentaux ES6+
TypeScript avec React
Hooks et patterns modernes
Gestion asynchrone (async/await)
Modules ES6
Nullish coalescing et Optional chaining
Immutabilité et structures de données

Après-midi

2. REACT FONDAMENTAUX & HOOKS

Introduction aux Hooks
useState et useEffect
useContext pour le state global
useRef et useCallback
useMemo pour l'optimisation
Custom Hooks
Patterns de composition
Error Boundaries

Jour 2

Matinée

3. STATE MANAGEMENT MODERNE

Redux Toolkit introduction
createSlice et configuration
RTK Query pour les appels API
Middleware et extraReducers
createAsyncThunk
State persistence
Redux DevTools
Zustand et alternatives modernes

Après-midi

4. ARCHITECTURE & PATTERNS

Architecture en couches
Clean Architecture en React
Feature-based architecture
Container/Presentational pattern
Custom Hooks patterns
Code splitting et lazy loading
Performance optimization

Jour 3

Matinée

5. FORMS & VALIDATION

React Hook Form
Zod pour la validation
Formik moderne
Yup schemas
Controlled vs Uncontrolled
Form patterns
Gestion des erreurs
Accessibilité des formulaires

Après-midi

6. ROUTING MODERNE

React Router v6+
Route protection
Nested routes
Route loaders et actions
Navigation programmatique
Route parameters
Query parameters
Route transitions

Jour 4

Matinée

7. TESTING MODERNE

React Testing Library
Jest avec TypeScript
Mock Service Worker (MSW)
Tests d'intégration
Tests de hooks
Tests de composants
Tests de reducers
E2E avec Cypress/Playwright

Après-midi

8. PERFORMANCE & OPTIMISATION + STYLING & UI + INTERNATIONALISATION & ACCESSIBILITE

React Profiler
Code splitting & Lazy loading
Memo et useMemo, useCallback usage
Bundle optimization
Performance monitoring & Lighthouse optimisation
Styled-components/Emotion, Tailwind CSS, CSS Modules
MUI v5, Theming, Dark mode, Responsive design, Animation (Framer Motion)
React-i18next, Format.js
ARIA labels, Keyboard navigation, Screen readers, RTL support, Accessibility testing

En présentiel ou à distance : à vous de choisir

Dans vos locaux

Pour ancrer les apprentissages et encourager la dynamique collective.

En classe virtuelle

Pour allier flexibilité et interactions en temps réel avec le formateur.

Dans nos locaux

Pour favoriser la concentration, les échanges et le confort des apprenants.

Les modalités de formation

Suivi et évaluation :

Recueil des besoins en amont pour identifier les attentes du stagiaire
Évaluation continue : études de cas et travaux pratiques pendant la formation
Évaluation finale : questionnaire d'auto-évaluation

Format et encadrement :

Formation équilibrée : 50% théorie / 50% pratique
Sessions en petits groupes (2 à 9 participants) pour un suivi personnalisé
Émargement par demi-journée et remise d'une attestation de formation

Moyens pédagogiques et techniques :

Méthodes interactives et suivi des acquis : travaux pratiques, projet fil rouge, mises en situation, démonstrations, QCM…
Les stagiaires doivent être équipés de leur matériel informatique pour suivre la formation, que ce soit dans nos locaux ou sur site externe.
Il appartient au client de veiller à ce que le matériel mis à disposition soit conforme aux prérequis techniques indiqués dans le programme de formation.
Accessibilité : nous informons l'ensemble de nos clients et stagiaires que nous sommes dans la capacité d'adapter les sessions en cas de situations spécifiques. Nous nous engageons à répondre à toutes les demandes dans un délai de 48h ouvré.

Conditions et délais d'accès :

Si l'une de nos formations vous intéresse, contactez-nous au +33 04 93 65 34 24 ou à l'adresse mail contact@le-code.dev. Selon votre besoin et vos attentes, nous organiserons un échange téléphonique avec le formateur pressenti afin d'adapter la formation et ses modules, puis nous vous adresserons un devis. Les dates de la formation seront à convenir sous 30 jours maximum.
Concernant les formations Actions Collectives, l'inscription est possible jusqu'à 24h ouvrées avant le début de la formation.