0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

Maîtrisez ReactJS pour construire des interfaces utilisateur dynamiques avec ReactJS Academy.

🤖 Alimenté par l'IA📚 88 cours👥 100 000+ apprenants⭐ Note 4,9
Présentation du Cours

Construire des interfaces réelles avec React

React est la bibliothèque JavaScript qui définit la façon dont la plupart des UIs de production sont construites aujourd'hui — des applications monopage et sites Next.js aux applications mobiles et de bureau multiplateformes. Cette formation couvre la discipline complète : architecture des composants, gestion d'état, récupération de données, performance, tests et déploiement. Elle s'appuie sur le fonctionnement réel de React — le reconciler, le fiber model, la sémantique des hooks — pas seulement son API de surface.

Ce que vous apprendrez

Vous commencerez par JSX, props, state et controlled components, puis passerez à useEffect, useRef et useReducer. Des cours pratiques couvrent le routing avec React Router v6, la gestion de formulaires avec React Hook Form, l'état serveur avec React Query et SWR, l'état global avec Redux Toolkit, Zustand et Jotai. Vous travaillerez avec TypeScript dans React, écrirez des tests d'intégration et E2E, construirez des design systems avec Storybook, gérerez les UIs en temps réel sur WebSockets et livrerez des APIs type-safe avec tRPC. Le parcours inclut aussi Next.js App Router, les server components, les server actions et l'authentification avec NextAuth.js.

Le parcours d'apprentissage

Quatre-vingt-quinze cours s'étendent de A1 à C1. Les cours A1 et A2 établissent les fondamentaux React, le rendu JSX, les animations CSS, la persistance du local storage et le dark mode. Les cours B1 renforcent la confiance avec les patterns context, i18n, React Spring, Framer Motion, le drag-and-drop avec dnd-kit et les tableaux de données complexes avec TanStack Table. Les cours B2 abordent le rendering et la memoization, Suspense, le code splitting, React Native pour les développeurs React, le déploiement sur Vercel et AWS, et Electron pour les applications de bureau. Le niveau C1 conclut avec des sujets avancés : Micro-Frontend Architecture, SSR and Hydration Deep Dive, Module Federation, Islands Architecture with Astro, WebAssembly integration, Edge Rendering with Cloudflare Workers et OpenTelemetry for frontend observability.

Comment ça fonctionne

Chaque cours est divisé en leçons courtes et ciblées que vous complétez dans l'éditeur de code intégré avec retour en temps réel. Un tuteur IA est disponible chaque fois que vous êtes bloqué sur un concept ou un test en échec. Vous pouvez parcourir la formation séquentiellement ou sauter au niveau qui correspond à votre expérience actuelle.

Commencer →

Comment Tu Vas Apprendre

🎯
Leçons Interactives
Exercices de codage pratiques avec retours en temps réel
🤖
Tuteur IA
Obtiens une aide instantanée de notre IA quand tu es bloqué
💻
Éditeur Intégré
Écris et exécute du code directement dans ton navigateur
🏆
Certificat
Obtiens un certificat en complétant le cours
Programme

88 Cours

Tous les cours du parcours d'apprentissage React Academy.

01

Démarrage avec React : concepts et configuration

A13 leçons

Commencez par les fondamentaux de React : composants, interface utilisateur déclarative et mise à jour efficace du DOM par comparaison diff…

02

Bases de JSX et du rendu

A13 leçonsPRO

Apprenez les règles de JSX : expressions et attributs, retour de fragments, affichage de listes avec des clés, conditions simples et option…

03

React DevTools et débogage

A24 leçonsPRO

Maîtrisez l’extension de navigateur React DevTools pour inspecter les arborescences de composants, profiler les rendus et déboguer efficace…

04

Animations et transitions CSS dans React

A24 leçonsPRO

Créez dans React des animations fluides d’entrée, de sortie et de changement d’état à l’aide des transitions et des images clés CSS, sans b…

05

Remonter l’état et résoudre le prop drilling

A24 leçonsPRO

Partagez l’état entre des composants frères en le remontant, et comprenez quand le prop drilling devient un problème qu’il faut résoudre.

06

Stockage local et persistance de l’état

A24 leçonsPRO

Conservez l’état de React après le rechargement des pages avec localStorage, gérez la synchronisation entre onglets et choisissez l’API de…

07

Mode sombre avec React

A24 leçonsPRO

Créez un système de mode sombre robuste avec des propriétés personnalisées CSS, le contexte React et la requête média prefers-color-scheme,…

08

Props et composition

A23 leçonsPRO

Transmettez des données avec les props , définissez des valeurs par défaut par déstructuration, composez des interfaces avec les enfants et…

09

Les fondamentaux de l’état et des événements

A23 leçonsPRO

Maîtrisez useState et la gestion des événements : mettez à jour l’état correctement, gérez onClick/onChange et préparez-vous aux champs con…

10

Formulaires et validation (introduction)

A23 leçonsPRO

Apprenez à créer des formulaires contrôlés avec plusieurs champs, à appliquer une validation de base et à gérer les soumissions de manière…

11

Les fondamentaux du routage

A23 leçonsPRO

Comprenez le routage côté client : comment les SPA changent de vue sans recharger entièrement les pages, les chemins et paramètres de base,…

12

useRef et le DOM

A23 leçonsPRO

Maîtrisez useRef : conservez des valeurs entre les rendus sans provoquer de nouveaux rendus, accédez aux nœuds du DOM et gérez les minuteur…

13

Analyse statique et conventions

A23 leçonsPRO

Gardez un code propre avec ESLint et les règles React, puis formatez-le automatiquement avec Prettier . Ajoutez des scripts et corrigez rap…

14

Composants contrôlés ou non contrôlés

A22 leçonsPRO

Maîtrisez les champs contrôlés et non contrôlés : sachez quand choisir chaque approche, utilisez des schémas simples avec des références et…

15

React Strict Mode et bonnes pratiques

B14 leçonsPRO

Découvrez le rôle de StrictMode, les avertissements qu’il signale et les conventions de codage qui facilitent la maintenance des applicatio…

16

Portails et fenêtres modales dans React

B14 leçonsPRO

Affichez du contenu en dehors de la hiérarchie DOM parente avec les portails React afin de créer des fenêtres modales, des infobulles et de…

17

API Children de React et modèle des emplacements

B14 leçonsPRO

Travaillez avec props.children et les utilitaires React.Children, et implémentez des API de composants flexibles fondées sur des emplacemen…

18

Composants non contrôlés et téléversements de fichiers

B14 leçonsPRO

Utilisez des champs non contrôlés avec useRef, lisez les valeurs des champs de fichier et gérez les processus de téléversement de fichiers…

19

Modèles de contexte React et performances

B14 leçonsPRO

Concevez des fournisseurs de contexte qui réduisent les nouveaux rendus grâce à la mémoïsation, au découpage des contextes et aux modèles d…

20

Internationalisation (i18n) dans React

B14 leçonsPRO

Ajoutez la prise en charge de plusieurs langues à vos applications React avec react-i18next, gérez les fichiers de traduction et permettez…

21

API du navigateur dans React

B14 leçonsPRO

Intégrez de puissantes API du navigateur — Clipboard, Geolocation, Notifications et IntersectionObserver — à vos composants React, en assur…

22

Temporisation et limitation de fréquence dans React

B14 leçonsPRO

Évitez les rendus et les appels d’API excessifs en implémentant des modèles de temporisation et de limitation de fréquence sous forme de ho…

23

Saisie semi-automatique de formulaires et recherche prédictive

B14 leçonsPRO

Créez de zéro des composants de saisie semi-automatique accessibles et navigables au clavier avec l’état et les références React, sans bibl…

24

Gestion des formulaires avec React Hook Form

B14 leçonsPRO

Créez des formulaires React performants et flexibles avec React Hook Form : enregistrement, validation, affichage des erreurs et intégratio…

25

Gestion de l’état avec Zustand

B14 leçonsPRO

Utilisez Zustand pour gérer l’état global des applications React : magasins, actions, sélecteurs, persistance et intégration aux outils de…

26

Modèles avancés de React Router v6

B14 leçonsPRO

Allez au-delà des routes de base avec des mises en page imbriquées, des chargeurs, des actions, des routes protégées et la gestion de l’éta…

27

TypeScript avec React : typer les composants et les hooks

B14 leçonsPRO

Ajoutez TypeScript à vos projets React : typez les props, les événements, les hooks, le contexte et les composants génériques en toute conf…

28

TanStack Table : tableaux de données complexes

B14 leçonsPRO

Créez des tableaux de données prêts pour la production avec tri, filtrage, pagination et sélection de lignes grâce à la puissante architect…

29

Jotai : gestion d’état atomique

B14 leçonsPRO

Gérez l’état React avec le modèle atomique minimal de Jotai : des atomes composables qui dérivent des valeurs, gèrent l’asynchrone et s’int…

30

SWR : récupération de données par Vercel

B14 leçonsPRO

Utilisez la stratégie stale-while-revalidate de SWR pour récupérer rapidement et fiablement les données, avec revalidation automatique, mut…

31

dnd-kit : glisser-déposer accessible

B14 leçonsPRO

Créez dans React des interfaces de glisser-déposer accessibles et adaptées aux écrans tactiles avec dnd-kit : listes triables, tableaux kan…

32

React Spring : animations fondées sur la physique

B14 leçonsPRO

Créez des animations fluides fondées sur la physique des ressorts dans React avec react-spring, des simples transitions de valeurs aux inte…

33

Événements envoyés par le serveur et interrogation périodique dans React

B14 leçonsPRO

Implémentez des flux de données en temps réel dans React avec les événements envoyés par le serveur et l’interrogation périodique, en compr…

34

useEffect en profondeur

B13 leçonsPRO

Comprenez useEffect : quand il s’exécute par rapport au rendu, comment les tableaux de dépendances le contrôlent et comment écrire des nett…

35

Schémas de récupération des données

B13 leçonsPRO

Concevez des interfaces de données robustes : gérez les états de chargement , d’ erreur , de vide et de succès avec des retours clairs et d…

36

Context et useReducer

B13 leçonsPRO

Partagez l’état entre des composants éloignés avec Context pour éviter la transmission en cascade des propriétés ; configurez un fournisseu…

37

Hooks personnalisés

B13 leçonsPRO

Extrayez la logique réutilisable dans des hooks personnalisés : définissez des paramètres clairs, renvoyez des valeurs et actions stables e…

38

Les fondamentaux de l’accessibilité

B13 leçonsPRO

Créez des interfaces inclusives : utilisez une sémantique réelle, des libellés et rôles clairs, et gérez le focus clavier pour une navigati…

39

Animations avec Framer Motion

B14 leçonsPRO

Ajoutez des animations et des transitions fluides aux applications React avec Framer Motion : composants motion, variantes, gestes et anima…

40

Limites d’erreur et robustesse

B13 leçonsPRO

Interceptez les erreurs lors du rendu avec les limites d’erreur, affichez des solutions de repli sûres et gardez le reste de l’application…

41

TypeScript avec React (facultatif)

B13 leçonsPRO

Ajoutez des types légers aux composants React. Commencez par les propriétés, puis extrayez des génériques réutilisables pour conserver un c…

42

Structure du projet et conventions

B13 leçonsPRO

Organisez les applications React : dossiers organisés par fonctionnalité, primitives d’interface simples plutôt que composants composites,…

43

Listes virtualisées avec react-window

B24 leçonsPRO

Affichez des milliers d’éléments de liste sans dégradation des performances en utilisant react-window pour virtualiser le contenu du DOM et…

44

Modèles asynchrones dans React : promesses et concurrence

B24 leçonsPRO

Gérez les opérations asynchrones en React selon les bonnes pratiques avec useEffect, useTransition, useDeferredValue et Suspense.

45

Modèles React : propriétés de rendu et composants d’ordre supérieur

B24 leçonsPRO

Comprenez les propriétés de rendu et les composants d’ordre supérieur, des modèles classiques de réutilisation du code avant leur remplacem…

46

useLayoutEffect ou useEffect

B24 leçonsPRO

Comprenez la différence subtile mais essentielle entre useEffect et useLayoutEffect — le moment où chacun s’exécute par rapport à la valida…

47

Redux Toolkit et RTK Query

B24 leçonsPRO

Gérez l’état complexe d’une application avec les tranches et les thunks de Redux Toolkit, ainsi que RTK Query pour la mise en cache et la s…

48

Composants serveur et nouveautés de React 19

B24 leçonsPRO

Comprenez les composants serveur React, le hook use(), les Actions et les autres API de React 19 qui modifient la circulation des données d…

49

React Query : gestion de l’état serveur

B24 leçonsPRO

Gérez l’état serveur avec TanStack Query : récupération, mise en cache, nouvelle récupération en arrière-plan, mutations et pagination.

50

Tests React : intégration et E2E

B24 leçonsPRO

Écrivez des tests d’intégration avec React Testing Library et des tests de bout en bout avec Playwright afin de valider les parcours réels…

51

Systèmes de design de composants et Storybook

B24 leçonsPRO

Documentez, développez et testez des composants d’interface React isolément avec Storybook, ses récits CSF3 et ses modules complémentaires.

52

Interfaces en temps réel avec WebSockets et React

B24 leçonsPRO

Créez des interfaces React mises à jour en temps réel avec WebSockets et des bibliothèques comme Socket.IO pour les discussions, les notifi…

53

tRPC : API sécurisées par les types de bout en bout

B24 leçonsPRO

Créez des API entièrement sécurisées par les types, sans schémas ni génération de code, avec tRPC, en partageant automatiquement les types…

54

Apollo Client et React

B24 leçonsPRO

Intégrez GraphQL aux applications React avec Apollo Client : interrogation, mutation, mise en cache et synchronisation de l’interface avec…

55

Interface optimiste et modèles de mutation

B24 leçonsPRO

Créez des interfaces rapides et réactives qui affichent immédiatement les résultats avant la confirmation du serveur, avec annulation corre…

56

Publication de bibliothèques de composants React

B24 leçonsPRO

Empaquetez et publiez des bibliothèques de composants React réutilisables sur npm, en gérant les sorties doubles ESM/CJS, les dépendances e…

57

Rendu et mémorisation

B23 leçonsPRO

Comprenez les phases de rendu et de validation de React, quand les composants sont mis à jour et quand la mémorisation est utile.

58

Transitions et Suspense (notions de base)

B23 leçonsPRO

Découvrez les bases des interfaces concurrentes avec useTransition : gardez la saisie réactive, affichez un indicateur d’attente et différe…

59

Découpage du code et stratégie des ressources

B23 leçonsPRO

Ne chargez que ce dont vous avez besoin en découpant le code des écrans et des widgets. Utilisez React.lazy et Suspense pour créer des appl…

60

Tester les composants React

B23 leçonsPRO

Configurez des tests avec Vitest/Jest et React Testing Library ; rendez les composants, recherchez par rôle ou libellé et exécutez-les dans…

61

Fondamentaux de l’App Router de Next.js

B24 leçonsPRO

Créez des applications web full-stack avec l’App Router de Next.js 14+ : routage fondé sur les fichiers, mises en page, composants serveur…

62

Récupération et mise en cache des données avec Next.js

B24 leçonsPRO

Récupérez, mettez en cache et revalidez les données dans l’App Router de Next.js avec les options de fetch, unstable_cache et la revalidati…

63

Authentification dans Next.js avec NextAuth.js

B24 leçonsPRO

Ajoutez l’authentification aux applications Next.js avec Auth.js (NextAuth v5) : fournisseurs OAuth, identifiants, sessions et protection d…

64

Fondamentaux de React Native pour les développeurs React

B24 leçonsPRO

Transposez vos connaissances de React au mobile en découvrant les primitives, le style, la navigation et les API natives des appareils de R…

65

Déployer des applications React : Vercel, AWS et Docker

B24 leçonsPRO

Déployez des applications React et Next.js en production avec Vercel, AWS S3/CloudFront et des conteneurs Docker accompagnés de pipelines C…

66

Actions serveur React : formulaires et mutations

B24 leçonsPRO

Utilisez les actions serveur de React 19 et les actions de formulaire de Next.js pour gérer les mutations côté serveur, en supprimant les r…

67

Sécurité des applications React

B24 leçonsPRO

Renforcez vos applications React contre XSS, CSRF et les autres vulnérabilités grâce à des conseils pratiques sur la politique de sécurité…

68

Systèmes de jetons de conception pour React

B24 leçonsPRO

Créez un système évolutif de jetons de conception pour alimenter des bibliothèques de composants React multithèmes, de la définition des je…

69

Electron.js : applications de bureau avec React

B24 leçonsPRO

Créez des applications de bureau multiplateformes avec Electron et une interface React, en couvrant la communication IPC, les API natives e…

70

Composants composés

B23 leçonsPRO

Créez des composants composés : le parent fournit le contexte et les enfants le consomment pour offrir des interfaces de programmation flex…

71

Formulaires à grande échelle (sans bibliothèque ou avec des aides légères)

B23 leçonsPRO

Créez de grands formulaires à l’aide de petits éléments robustes : tableaux de champs, sections dynamiques et processus de validation simpl…

72

Routage avancé

B23 leçonsPRO

Allez au-delà des notions de base : mises en page imbriquées, chargeurs de routes conceptuels et idées simples de préchargement pour une na…

73

État du serveur ou état de l’interface

B23 leçonsPRO

Sachez ce qui relève du cache serveur et ce qui constitue l’état local de l’interface. Récupérez et actualisez les données sans mélanger le…

74

Schémas pour les fenêtres modales, notifications et superpositions

B23 leçonsPRO

Créez des superpositions accessibles : effectuez le rendu avec des portails, gardez le focus à l’intérieur et permettez une fermeture rapid…

75

Construire, analyser, livrer

B23 leçonsPRO

Préparez vos applications pour la production : compilations de développement et de production, cartes de sources, variables d’environnement…

76

useImperativeHandle et forwardRef

C14 leçonsPRO

Maîtrisez les API impératives de React : exposez aux composants parents les valeurs d’instance personnalisées d’un composant à l’aide de fo…

77

useSyncExternalStore : s’abonner à des magasins externes

C14 leçonsPRO

Apprenez à utiliser le hook useSyncExternalStore de React 18, la méthode appropriée pour synchroniser les composants React avec des sources…

78

Architecture micro-frontale avec React

C14 leçonsPRO

Décomposez de grandes interfaces React en micro-frontends déployés indépendamment avec Module Federation et single-spa.

79

Plongée au cœur du SSR et de l’hydratation React

C14 leçonsPRO

Comprenez les mécanismes du rendu côté serveur, l’hydratation, l’hydratation sélective et la diffusion de HTML en continu avec renderToPipe…

80

Modèles TypeScript avancés pour React

C14 leçonsPRO

Perfectionnez vos compétences en TypeScript et React avec les unions discriminées, les types mappés, les types conditionnels et les API de…

81

Performances web : indicateurs Web Vitals essentiels et React

C14 leçonsPRO

Mesurez et améliorez les indicateurs Web Vitals essentiels (LCP, INP, CLS) dans les applications React grâce aux outils de profilage, à l’a…

82

Monorepo et Nx pour les projets React

C14 leçonsPRO

Organisez plusieurs applications React et bibliothèques partagées dans un monorepo avec Nx, grâce à une planification intelligente des tâch…

83

Architecture en îlots avec Astro et React

C14 leçonsPRO

Évitez l’hydratation de pages entières en adoptant l’architecture en îlots : hydratez sélectivement uniquement les composants React interac…

84

Intégration de React et WebAssembly

C14 leçonsPRO

Intégrez des modules WebAssembly aux applications React pour les tâches nécessitant d’importants calculs, des modules WASM en Rust à la mém…

85

Rendu en périphérie : Cloudflare Workers et React

C14 leçonsPRO

Servez des applications React depuis la périphérie avec une latence inférieure à la milliseconde grâce à Cloudflare Workers, au SSR en flux…

86

OpenTelemetry pour l’observabilité des interfaces React

C14 leçonsPRO

Instrumentez les applications React avec OpenTelemetry pour collecter les traces, mesurer les performances réelles des utilisateurs et corr…

87

Diffusion en flux et chargement progressif dans React

C14 leçonsPRO

Utilisez le SSR en flux de React 18 et Suspense pour transmettre progressivement le HTML au navigateur, améliorant ainsi les performances p…

88

Fédération de modules avec React

C14 leçonsPRO

Implémentez la fédération de modules de Webpack pour construire et déployer indépendamment des micro-frontends React, en partageant dépenda…

FAQ

Questions Fréquemment Posées

Le cours React Academy est-il gratuit ?

Oui. Tu peux commencer le cours React Academy gratuitement et compléter ses leçons interactives sans frais. Un abonnement PRO optionnel déverrouille des outils IA avancés et un certificat partageable.

Ai-je besoin d'expérience préalable pour apprendre JSX ?

Non. Le cours commence par les fondamentaux et progresse graduellement vers des sujets plus avancés, tu peux donc commencer même sans expérience préalable en JSX.

Comment vais-je apprendre JSX sur CoddyKit ?

Tu apprends en faisant. Des leçons interactives courtes associent une explication claire avec un exercice de codage pratique qui s'exécute en temps réel, et un tuteur IA disponible 24h/24 offre une aide personnalisée dès que tu es bloqué.

Puis-je obtenir un certificat en complétant React Academy ?

Oui. Les apprenants PRO peuvent passer un examen et obtenir un certificat de réussite partageable avec un code vérifiable pour le cours React Academy.

Puis-je apprendre JSX sur mon téléphone ?

Oui. CoddyKit est disponible sur le web et sous forme d'applications iOS et Android natives, tu peux donc apprendre JSX sur n'importe quel appareil et ta progression se synchronise entre eux.

Commencez React Academy Maintenant

Rejoignez des milliers d'apprenants maîtrisant la programmation avec des cours alimentés par l'IA.

Commencer Gratuitement →Parcourir Tous les Cours