React Lernen: Programmieren
React Lernen: Programmieren — Lerne React-Programmierung, indem du JSX schreibst und es auf deinem Smartphone ausführst
React Lernen: Programmieren ist eine kostenlos startbare iOS- und Android-App, die Anfängern mit ein wenig HTML, CSS oder JavaScript sowie Entwicklern, die von einem anderen Framework wechseln, React-Programmierung beibringt. Schreibe JSX in einem Code-Editor, tippe auf „Ausführen“ und sieh dir an, wie deine Komponente in einer Live-Vorschau gerendert wird – direkt in der App. 88 Kurse und 324 Lektionen führen dich von deiner ersten Komponente über Hooks und State-Management bis zu Next.js. Dabei erwarten dich 20 geführte Projekte.
- Preis
- Kostenlos, Pro-Upgrade
- Plattformen
- iOS und Android
- Sprachen
- 22
- Altersfreigabe
- 4+
- Version
- 82.6.1
- Erfordert
- iOS 15.1 oder neuer
- App Store
- 3.8 ★ (4)
Deine Komponente wird auf dem Smartphone gerendert, nicht auf einem Server.
Die Laufzeitumgebung, ReactDOM und Babel sind in der App enthalten. Der von dir geschriebene JSX-Code wird also kompiliert und auf dem Gerät angezeigt. Du kannst auf die Schaltfläche tippen, die du gerade erstellt hast, Text in dein Formular eingeben und sehen, wie die Benutzeroberfläche reagiert – genau diese Feedbackschleife sorgt dafür, dass Hooks verständlich werden.
Was es ist
React Lernen: Programmieren ist ein kostenlos startbarer React-Kurs für iOS und Android mit 88 Kursen und 324 interaktiven Lektionen – von der ersten JSX-Zeile über Hooks, State-Management und React 19 bis zum Next.js App Router. Der integrierte Editor kompiliert deinen Code auf dem Gerät und rendert die Komponente in einer Live-Vorschau. 20 geführte Projekte prüfen jeden Schritt, bevor du weitermachst. Die App ist unabhängig und steht nicht mit Meta oder Vercel in Verbindung.
In der App
So sieht es aus
Der Kurs
Das deckt der React-Kurs ab
88 Kurse aus der eigenen Liste der App, in der Reihenfolge, in der man React normalerweise zum ersten Mal lernt.
React Kickoff, JSX und Props & Composition
Komponenten, deklarative Benutzeroberflächen und die Aktualisierung des DOM durch React, anschließend JSX-Regeln, das Rendern von Listen und die Weitergabe von Daten über Props.
State, Events, Formulare und useRef
useState und Event-Handling, kontrollierte Formulare mit Validierung sowie useRef für Werte und den Zugriff auf das DOM, die kein erneutes Rendern auslösen.
useEffect, Datenabruf und eigene Hooks
Wann Effects ausgeführt werden, Dependency-Arrays, Lade- und Fehlerzustände bei API-Aufrufen sowie das Herauslösen wiederverwendbarer Logik in eigene Hooks.
Context, Redux Toolkit und Zustand
State ohne Prop Drilling mit Context und useReducer gemeinsam nutzen, anschließend Redux Toolkit mit RTK Query, Zustand und Jotai für größere Apps.
Routing, React Query und Formulare im großen Maßstab
Clientseitiges Routing und React-Router-Muster, Server-State mit TanStack Query und SWR, React Hook Form sowie optimistische Benutzeroberflächen.
Performance, Testing und TypeScript
Rendern und Memoisation, Code-Splitting, virtualisierte Listen, Testing mit React Testing Library sowie die Typisierung von Komponenten und Hooks.
React 19, Server Components und Next.js
Server Components und Actions, SSR und Hydration, anschließend der Next.js App Router mit Datenabruf, Caching und Authentifizierung.
So funktioniert es
So funktioniert eine Lektion
Eine Lektion beginnt mit einem kurzen Konzept, auf das direkt Code folgt, den du schreibst und ausführst. So stehen Idee und Ergebnis auf demselben Bildschirm.
Lies ein Konzept
Öffne einen Kurs aus dem Lernpfad und lies eine kurze Lektion, zum Beispiel darüber, wie State-Updates funktionieren oder warum eine Liste Keys benötigt. In der Kursübersicht siehst du, welche Lektionen kostenlos sind, und kannst das Format kennenlernen, bevor du dich festlegst.
Schreibe JSX und tippe auf „Ausführen“
Gib die Komponente im Code-Editor ein und führe sie aus. Die Live-Vorschau rendert deine Komponente innerhalb der App. So kannst du auf die Schaltfläche klicken, Text in das Feld eingeben und sehen, was der Code bewirkt.
Prüfe sie und baue darauf auf
Quizze, Coding-Missionen und geführte Projekte bestätigen, dass du das Konzept verstanden hast. Der AI-Mentor erklärt dir einen Hook oder einen Fehler, den du nicht entziffern kannst. Bug Hunt und UI Match bieten eine zweite Übungsmöglichkeit für das Konzept.
Was steckt drin
Das ist in der App enthalten
88
Kurse, 324 Lektionen
Von JSX, Props und State über benutzerdefinierte Hooks, Formulare, Context und Redux Toolkit bis zu Server Components, SSR und dem Next.js App Router – gruppiert von A1 bis C1.
Live
Editor mit Live-Vorschau
Ein speziell für JSX entwickelter Code-Editor, in dem die Komponente direkt in der App gerendert wird. Mehrdateien-Projekte ermöglichen es dir, eine Komponente in eine andere zu importieren – so werden echte Apps entwickelt.
20
Geführte Projekte
Erstelle Schritt für Schritt eine „Gefällt mir“-Schaltfläche, Profilkarten, einen Trinkgeldrechner, ein Quizspiel, einen Warenkorb und vieles mehr. Jeder Schritt prüft, ob die Komponente wirklich funktioniert.
Lab
Hooks Lab und Props-Regler
Beobachte jede State-Änderung und jedes erneute Rendern in Echtzeit und ändere einen Prop mit einem Schieberegler, um zu sehen, wie die Komponente aktualisiert wird. Ein Render-Profiler und eine State-Zeitleiste sind Bestandteil von Pro.
30
Coding-Missionen
Missionen in den Schwierigkeitsstufen leicht, mittel und schwer zu Hooks, Rendering, Formularen, Context und Performance sowie UI Match, Bug Hunt und Component Recall mit verteilten Wiederholungen.
AI
AI-Mentor
Bitte um eine Erklärung, lass die AI deinen Code prüfen und eine Lösung vorschlagen oder erstelle eine individuelle Lektion zu jedem beliebigen Thema. Der Mentor und die Zertifikatsprüfung sind Bestandteil von Pro.
Hintergrund
Was musst du eigentlich verstehen, um React zu schreiben – und in welcher Reihenfolge?
React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen aus kleinen, wiederverwendbaren Komponenten, die sich neu rendern, wenn sich ihre Daten ändern. Die meisten Anfänger kommen nicht an der Syntax ins Stocken, sondern am zugrunde liegenden Modell: Was ist ein Rendern, was gilt als State und wann werden Effects ausgeführt? Diese Konzepte in der richtigen Reihenfolge zu lernen und jedes davon direkt auf dem Bildschirm auszuprobieren, ist schneller, als alles gleichzeitig darüber zu lesen.
Komponenten und Propsdie Grundlage der Wiederverwendung
Eine Komponente ist eine Funktion, die einen Teil der Benutzeroberfläche zurückgibt, und Props sind die Eingaben, die sie von ihrer übergeordneten Komponente erhält. Weil Daten über Props nach unten fließen, kannst du eine Komponente lesen und vorhersagen, was sie rendert.
Statewas sich mit der Zeit ändert
State sind Daten, die sich eine Komponente zwischen Render-Vorgängen merkt – zum Beispiel der Text in einem Feld oder ob ein Menü geöffnet ist. Das Aktualisieren des States plant ein neues Rendern ein. Genau dieser Mechanismus steckt hinter fast jeder interaktiven Ansicht.
Hooks und Effectsworan Anfänger hängen bleiben
Hooks wie useState, useRef und useReducer ermöglichen es einer Komponente, State zu speichern und auf das DOM zuzugreifen. useEffect führt Code nach einem Rendern aus, und ein falsches Dependency-Array ist die häufigste Ursache für Schleifen und veraltete Werte.
Rendern und erneutes Rendernwarum sich die App langsam anfühlt
Eine Komponente wird neu gerendert, wenn sich ihr State oder ihre Props ändern – ebenso die Komponenten in ihr. Zu wissen, was ein Rendern ausgelöst hat, ist der Ausgangspunkt für jede Performance-Optimierung, vom Memoisieren bis zum Code-Splitting.
Passend
Für wen es geeignet ist – und für wen nicht
Es passt zu dir, wenn du
- Du kennst ein wenig HTML, CSS oder JavaScript und möchtest richtig mit React anfangen
- Du entwickelst mit einem anderen Framework und musst schnell zu React wechseln
- Du lernst am besten, wenn das Ergebnis sofort nach der Ausführung des Codes auf dem Bildschirm erscheint
- Du baust ein Portfolio aus kleinen Projekten auf und möchtest dabei Schritt für Schritt angeleitet werden
- Du bereitest dich auf ein Frontend-Interview vor und möchtest Fragen zum Üben haben
Du bist hier nicht richtig, wenn du
- Du hast noch nie JavaScript gesehen, weil der Kurs ein wenig davon voraussetzt
- Du möchtest ein vollständiges Projekt erstellen und bereitstellen, wofür du weiterhin einen Laptop brauchst
- Du erwartest, dass alles kostenlos ist, obwohl der erste Kurs kostenlos ist und Pro den Rest freischaltet
- Du möchtest einen offiziellen Kurs vom React-Team, obwohl es sich hierbei um eine unabhängige App handelt
Fragen
Häufig gestellte Fragen
Kann man React-Programmierung auf einem Smartphone lernen?
Die grundlegenden Ideen, Komponenten, Props, State und Hooks lassen sich auf einem Smartphone lernen, wenn du deinen geschriebenen Code ausführen kannst. React Lernen: Programmieren bündelt ReactDOM und Babel, sodass dein JSX in einer Live-Vorschau auf dem Gerät gerendert wird. Ein Laptop wird nützlich, sobald du ein größeres Projekt erstellst und bereitstellst.
Muss ich JavaScript können, bevor ich React lerne?
Ein wenig hilft. React Lernen: Programmieren richtet sich an Menschen, die etwas HTML, CSS oder JavaScript kennen, zum Beispiel Variablen, Funktionen und Arrays. Wenn du noch nie JavaScript geschrieben hast, solltest du das zuerst lernen, weil die React-Lektionen voraussetzen, dass du JavaScript lesen kannst.
Was ist der Unterschied zwischen Props und State?
Props sind Eingaben, die eine Komponente von ihrer übergeordneten Komponente erhält und nicht verändern sollte, während State Daten bezeichnet, die der Komponente gehören und im Laufe der Zeit aktualisiert werden. In React Lernen: Programmieren kannst du das im Hooks Lab sehen, das jede State-Änderung und jedes erneute Rendern zeigt. Mit den Props-Reglern kannst du außerdem einen Prop über einen Schieberegler ändern.
Bringt die App Hooks wie useEffect bei?
Ja. React Lernen: Programmieren behandelt useState, useEffect, useRef, useReducer, eigene Hooks und useLayoutEffect. Separate Lektionen erklären, wann Effects ausgeführt werden, wie Dependency-Arrays funktionieren und welche häufigen Fehler auftreten. Im Bug-Hunt-Modus suchst du Fehler in fehlerhaften Komponenten.
Ist React dasselbe wie React Native, und bringt die App beides bei?
Nein. React ist die Bibliothek zum Erstellen von Benutzeroberflächen, während React Native dieselben Konzepte zum Erstellen mobiler Apps nutzt. React Lernen: Programmieren vermittelt zuerst React für das Web. Ein React-Native-Grundlagenkurs hilft Webentwicklern anschließend, diese Kenntnisse auf mobile Apps zu übertragen.
Behandelt React Lernen: Programmieren Next.js und React 19?
Ja. Die Kurse behandeln Funktionen von React 19 und Server Components, SSR und Hydration, Streaming sowie den Next.js App Router mit Datenabruf, Caching und Authentifizierung. Außerdem gibt es einen React-Native-Grundlagenkurs für Webentwickler.
Welche Arten von Projekten kann ich erstellen?
Es gibt 20 angeleitete Projekte, die Schritt für Schritt entstehen: einen Like-Button, Profilkarten, einen Trinkgeldrechner, ein Quizspiel, eine Stoppuhr, ein Anmeldeformular, einen Warenkorb, ein Bilderkarussell, eine paginierte Liste und eine Todo-App. Jeder Schritt prüft, ob deine Komponente funktioniert, bevor du weitermachst.
Ist React Lernen: Programmieren kostenlos?
Der Download ist kostenlos. Die kostenlose Version umfasst den ersten Kurs, ein angeleitetes Projekt, zwei Coding-Missionen, den Code-Editor mit Live-Vorschau, Hooks Lab, Props-Regler, Bug Hunt und drei UI-Match-Prüfungen pro Tag und zeigt Werbung an. Pro schaltet alle Kurse, Projekte und Missionen, den AI-Mentor, den Render-Profiler und die Zertifikatsprüfung frei und entfernt die Werbung.
Gibt es ein Zertifikat oder eine Interviewvorbereitung?
Wenn du die Abschlussprüfung bestehst, erhältst du ein teilbares Zertifikat, das Teil von Pro ist. Zur Vorbereitung auf Interviews gibt es 50 Interviewfragen, ein Quiz mit 50 Fragen und einen Spickzettel zum Üben der zentralen Konzepte.
Wird der Code auf einem Server ausgeführt?
Nein. Die Laufzeitumgebung ist in die App integriert, sodass dein Code auf dem Gerät kompiliert und gerendert wird. Deshalb kannst du auf die von dir erstellte Schaltfläche tippen und sehen, wie die Benutzeroberfläche direkt in der Vorschau reagiert.
Welche Sprachen und Plattformen werden unterstützt?
React Lernen: Programmieren läuft auf iOS und Android und ist in 22 Sprachen verfügbar. Die App ist ab 4 Jahren freigegeben und benötigt iOS 15.1 oder höher auf dem iPhone.
Loslegen
Rendere noch heute deine erste Komponente
Kostenlos starten auf iOS und Android – in 22 Sprachen.
Mehr von CoddyKit
Verfügbar auf iOS und Android.