Menu
CoddyTech
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 ansehenReact-Playground

2,333+ codders eingeschrieben

89 Lektionen78 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 Lektionen78 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 Lektionen41 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

    Clientseitige Navigation

    5 Lektionen515

    Projekt: Coddy Eats

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

Lernen durch Tun

Schreibe echten Code, frage Datenbanken ab, erstelle Websites und meistere KI-Prompts. Unsere interaktiven Lektionen decken alle Fähigkeiten ab, die moderne Entwickler brauchen.

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
Eingabe
"Alex"
Ausgabe
"Hello, Coddy! Alex"

Baue deine Serie auf

Bleib konsequent und sieh zu, wie dein Fortschritt wächst! Verfolge deine tägliche Programmiergewohnheit, schütze deine Serie mit Einfrieroptionen und verdiene Belohnungen für jeden Tag.

12 Tage Serie

Komm morgen zurück, um deine Serie zu halten!

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

Doppelt oder Nichts

Tag 5 von 7

fire Freeze icon

Serie Einfrieren

2 left

Überall coden

Nimm deine Programmierreise mit! Keine Einrichtung, keine Downloads: einfach öffnen und loslegen. Verfügbar auf iOS, Android und Web mit 4,9-Sterne-Bewertungen.

Python
7Streak
250Punkte
5Energie
Variablen
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
FORTSETZEN
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
Reise
Ziele
Bestenliste
Profil
4.9
SternSternSternSternStern
Bewertung

Du bist nicht allein

Tritt auf globalen Bestenlisten an, lade Freunde ein, um Belohnungen zu verdienen, und feiert gemeinsam eure Erfolge. Programmieren macht mit Freunden mehr Spaß!

Herausforderer-Liga
Herausforderer-LigaTop 7 steigen auf
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 iconAufstiegszoneleaderboard Arrow Up icon

Jeder Lernweg, alles dabei

Lies, höre, teste dich, frag die KI oder schlage nach, was du schon gelernt hast. Jede Lektion passt sich dir an.

Einführung in Variablen
Audio

Eine Variable ist ein benannter Container, der einen Wert speichert, auf den du später im Programm verweisen kannst.

In Python erstellst du eine, indem du den Namen, ein Gleichheitszeichen und dann den Wert schreibst.

Der Wert kann sich ändern - eine neue Zuweisung verweist den Namen einfach auf einen neuen Wert.

1xSarah

Werde zertifiziert

Verdiene Zertifikate für jeden abgeschlossenen Kurs. Füge sie deinem LinkedIn-Profil und Lebenslauf hinzu, um Arbeitgebern deine Programmierkenntnisse zu zeigen.

CoddyAbschlusszertifikat
Hiermit wird bestätigt, dassMax Mustermannerfolgreich abgeschlossen hat
python iconPython-Grundlagen
Verifiziert
DatumJan. 2026
LinkedInZu LinkedIn hinzufügen

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.

Lernpfade, die diesen Kurs enthalten

Dieser Kurs ist ein Schritt eines längeren Pfads: mehrere Kurse in der Reihenfolge, in der ein Mentor sie unterrichten würde, jeder mit eigenem kostenlosem Zertifikat.

Illustration der Programmiersprachen bei Coddy

Lerne React mit Coddy

LOS GEHT'S