Menu
Coddy logo textTech
COMMENCER À APPRENDRE
flag Fr iconFrançaisdown icon
NouveauParcours

Apprendre React - Cours interactif gratuit

Maîtrisez React en écrivant de vrais composants dès la première leçon : JSX, props, state et événements, puis enchaînez avec Next.js - routage par système de fichiers, layouts, composants serveur, récupération de données et server actions. Tout s'exécute dans votre navigateur, avec des indices IA quand vous bloquez et un certificat gratuit à la fin.

COMMENCER À APPRENDRE(c'est gratuit)
Voir le programme

1,000+ codders inscrits

89 leçons69 défis164 questions de quiz

  • Adapté aux débutants
  • sparkles iconAide au codage assistée par IA
  • hint iconLeçons interactives et pratiques
  • volume On iconNarration audio dans chaque leçon
  • quiz iconQuiz pour tester vos connaissances
  • certificate iconCertificat gratuit de réussite

Programme

2 sections1 projets89 leçons69 défis164 questions de quiz
  1. Section 1

    Les fondamentaux

    Commencer la sectionDémarrerDévelopperRéduire    Apprenez à concevoir des interfaces utilisateur avec React : composants, JSX, props, état et événements, de votre premier composant à une mini-application fonctionnelle.42 leçons37 défis65 questions

    Découvrez React

    5 leçons513

    Expressions JSX

    5 leçons58

    Composants

    5 leçons48

    Props

    6 leçons510

    État et événements

    6 leçons59

    Formulaires et Champs de Saisie

    5 leçons47

    Conditions et Listes

    6 leçons510

    Projet : Carte de profil

    4 leçons4
  2. Section 2

    L'essentiel de Next.jsPage dédiée

    Commencer la sectionDémarrerDévelopperRéduire    Passez des composants React à une véritable application : routage basé sur le système de fichiers, layouts, composants serveur et client, récupération de données, server actions et un projet Next.js complet.47 leçons32 défis99 questions1 projet

    Pourquoi Next.js

    4 leçons39

    Routage et liens

    6 leçons516

    Mises en page et métadonnées

    6 leçons515

    Serveur & Client

    6 leçons515

    Données sur le serveur

    6 leçons516

    Server Actions

    5 leçons413

    Navigation côté client

    5 leçons515

    Projet : Coddy Eats

    Projet9 leçons
Ce que vous obtenez
Tout ce que vous utiliserez pour apprendre à coder

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

Pourquoi apprendre React avec Coddy

  • Écrivez du JSX dans votre navigateur dès la première leçon. Pas d'installation de Node, pas de create-react-app, pas de configuration de build : chaque leçon fournit du vrai code de composant à modifier et exécuter.
  • Un programme qui aboutit à de vraies applis : composants, props, state, événements et hooks dans la section Fondamentaux, puis une section Next.js complète - routage, layouts, composants serveur et client, récupération de données et server actions.
  • Des indices IA qui lisent votre vrai code. Quand un composant ne s'affiche pas ou qu'un state ne se met pas à jour, vous recevez un coup de pouce qui pointe votre bug sans révéler la solution.
  • Un certificat React gratuit à la fin - un vrai atout pour les postes frontend, où React reste la bibliothèque UI la plus demandée.

Questions fréquentes sur l'apprentissage de React

Qu'est-ce que React ?

React est une bibliothèque JavaScript pour construire des interfaces utilisateur à partir de composants : de petites fonctions réutilisables qui retournent du balisage. Créée chez Meta, elle propulse une immense partie du web moderne, de Facebook et Instagram aux produits de millions de startups, et reste la compétence frontend la plus demandée dans les offres d'emploi.

Faut-il connaître JavaScript avant d'apprendre React ?

Vous devez être à l'aise avec les bases de JavaScript : variables, fonctions, tableaux et objets. Le cours introduit les patterns JavaScript sur lesquels React s'appuie (fonctions fléchées, déstructuration, map) au fur et à mesure, inutile donc d'être expert. Si vous débutez totalement, commencez par le parcours JavaScript.

React est-il difficile à apprendre ?

Les idées de base - composants, JSX, props - s'assimilent vite car elles ressemblent à ce que vous connaissez déjà : des fonctions et du HTML. Le state, les effets et le flux de données demandent plus de pratique, c'est pourquoi chaque leçon vous fait écrire et exécuter du vrai code de composant plutôt que de simplement lire la théorie.

Quelle est la différence entre React et Next.js ?

React est la bibliothèque UI : composants, state, rendu. Next.js est un framework construit au-dessus de React qui ajoute ce dont les vraies applis ont besoin : routage par système de fichiers, layouts, rendu côté serveur, récupération de données et server actions. Le cours enseigne d'abord les fondamentaux de React, puis une section dédiée à Next.js vous mène des composants à une application complète.

Peut-on apprendre React en ligne gratuitement ?

Oui. Le cours interactif React est gratuit : leçons pratiques, défis de code avec retour instantané, indices assistés par IA et quiz. Tout s'exécute dans votre navigateur : rien à installer, vous pouvez commencer immédiatement.

Ai-je un certificat à la fin du cours React ?

Oui. En terminant le cours, vous obtenez un certificat gratuit à ajouter sur LinkedIn ou votre CV. Avec les composants et les applis que vous construisez en chemin, c'est une preuve concrète de compétences pratiques en React et Next.js.
Coddy programming languages illustration

Apprends React avec Coddy

COMMENCER