Menu
Coddy logo textTech
JETZT LERNEN
flag De iconDeutschdown icon
NeuJourney

React lernen - Kostenloser interaktiver Kurs

Meistere React, indem du ab der ersten Lektion echte Komponenten schreibst: JSX, Props, State und Events - und geh dann weiter zu Next.js: dateibasiertes Routing, Layouts, Server Components, Datenabruf und Server Actions. Alles läuft im Browser, mit KI-Hinweisen, wenn du feststeckst, und einem kostenlosen Zertifikat zum Abschluss.

MIT DEM LERNEN BEGINNEN(kostenlos)
Lehrplan ansehen

1,000+ codders eingeschrieben

89 Lektionen69 Aufgaben164 Quizfragen

  • Anfängerfreundlich
  • sparkles iconKI-gestützte Coding-Hilfe
  • hint iconPraktische, interaktive Lektionen
  • volume On iconAudio-Erzählung in jeder Lektion
  • quiz iconQuizfragen zum Wissenstest
  • certificate iconKostenloses Abschlusszertifikat

Lehrplan

2 Abschnitte1 Projekte89 Lektionen69 Aufgaben164 Quizfragen
  1. Abschnitt 1

    Grundlagen

    Abschnitt startenStartenAusklappenEinklappen    Lerne, Benutzeroberflächen mit React zu bauen: Komponenten, JSX, Props, State und Events – von deiner ersten Komponente bis zu einer funktionierenden Mini-App.42 Lektionen37 Aufgaben65 Fragen

    Lerne React kennen

    5 Lektionen513

    JSX-Ausdrücke

    5 Lektionen58

    Komponenten

    5 Lektionen48

    Props

    6 Lektionen510

    State & Events

    6 Lektionen59

    Formulare & Eingaben

    5 Lektionen47

    Bedingungen & Listen

    6 Lektionen510

    Projekt: Profilkarte

    4 Lektionen4
  2. Abschnitt 2

    Next.js EssentialsEigene Seite

    Abschnitt startenStartenAusklappenEinklappen    Gehe von React-Komponenten zu einer echten App über: Dateisystem-basiertes Routing, Layouts, Server- und Client-Komponenten, Data Fetching, Server Actions und ein komplettes Next.js-Projekt.47 Lektionen32 Aufgaben99 Fragen1 Projekt

    Warum Next.js

    4 Lektionen39

    Routing & Links

    6 Lektionen516

    Layouts & Metadaten

    6 Lektionen515

    Server & Client

    6 Lektionen515

    Daten auf dem Server

    6 Lektionen516

    Server Actions

    5 Lektionen413

    Client-seitige Navigation

    5 Lektionen515

    Projekt: Coddy Eats

    Projekt9 Lektionen
Das bekommst du
Alles, was du zum Programmierenlernen nutzt

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

Warum React mit Coddy lernen

  • Schreibe JSX im Browser - ab der ersten Lektion. Keine Node-Installation, kein create-react-app, kein Build-Setup: Jede Lektion liefert echten Komponenten-Code zum Bearbeiten und Ausführen.
  • Ein Lehrplan, der in echten Apps endet: Komponenten, Props, State, Events und Hooks im Grundlagen-Abschnitt, danach ein kompletter Next.js-Abschnitt - Routing, Layouts, Server- und Client-Komponenten, Datenabruf und Server Actions.
  • KI-Hinweise, die deinen tatsächlichen Code lesen. Wenn eine Komponente nicht rendert oder der State sich nicht aktualisiert, bekommst du einen Stups, der auf deinen Fehler zeigt, ohne die Lösung zu verraten.
  • Ein kostenloses React-Zertifikat zum Abschluss - ein starkes Signal für Frontend-Stellen, wo React weiterhin die gefragteste UI-Bibliothek ist.

Häufige Fragen zum React-Lernen

Was ist React?

React ist eine JavaScript-Bibliothek, um Benutzeroberflächen aus Komponenten zu bauen - kleinen, wiederverwendbaren Funktionen, die Markup zurückgeben. Bei Meta entwickelt, treibt React einen riesigen Teil des modernen Webs an, von Facebook und Instagram bis zu den Produkten von Millionen Startups, und ist in Stellenanzeigen konstant die gefragteste Frontend-Fähigkeit.

Muss ich JavaScript können, bevor ich React lerne?

Du solltest die JavaScript-Grundlagen beherrschen - Variablen, Funktionen, Arrays und Objekte. Der Kurs führt die JavaScript-Muster, auf die React setzt (Arrow Functions, Destructuring, map), dort ein, wo sie auftauchen - du musst also kein Profi sein. Wenn du ganz neu im Programmieren bist, starte zuerst mit der JavaScript-Journey.

Ist React schwer zu lernen?

Die Kernideen - Komponenten, JSX, Props - sitzen schnell, weil sie an Bekanntes anknüpfen: Funktionen und HTML. State, Effekte und Datenfluss brauchen mehr Übung - deshalb schreibst und startest du hier in jeder Lektion echten Komponenten-Code, statt nur darüber zu lesen.

Was ist der Unterschied zwischen React und Next.js?

React ist die UI-Bibliothek - Komponenten, State, Rendering. Next.js ist ein Framework auf React-Basis, das ergänzt, was echte Apps brauchen: dateibasiertes Routing, Layouts, serverseitiges Rendering, Datenabruf und Server Actions. Der Kurs vermittelt zuerst die React-Grundlagen, dann führt dich ein eigener Next.js-Abschnitt von Komponenten zu einer vollständigen App.

Kann ich React online kostenlos lernen?

Ja. Der interaktive React-Kurs ist kostenlos: praxisnahe Lektionen, Code-Challenges mit sofortigem Feedback, KI-gestützte Hinweise und Quizze. Alles läuft im Browser - nichts zu installieren, du kannst sofort loslegen.

Bekomme ich nach dem React-Kurs ein Zertifikat?

Ja. Zum Abschluss erhältst du ein kostenloses Zertifikat, das du auf LinkedIn oder in deinen Lebenslauf aufnehmen kannst. Zusammen mit den Komponenten und Apps, die du unterwegs baust, ist es ein aussagekräftiger Nachweis praktischer React- und Next.js-Kenntnisse.
Coddy programming languages illustration

Lerne React mit Coddy

LOS GEHT'S