// LERNEN · SPRACHEN & FRAMEWORKS

React

Ein praxisnaher React-Kurs von der ersten Komponente bis zu Reducern, Effekten, Formularen mit Actions, Suspense und Server Components. Jedes Beispiel wird ausgeführt und an React 19.3 geprüft.

Niveau: Einstieg bis Vertiefung · Für: Entwicklerinnen und Entwickler mit Grundkenntnissen in JavaScript, die mit React Benutzeroberflächen bauen möchten, von der ersten Komponente bis zur fertigen App.

Kurs beginnen

Lehrplan

Einstieg

Vollständig

Nach dieser Stufe können Sie

Eine Oberfläche aus kleinen Komponenten mit JSX, Props, bedingtem Rendern und Listen mit stabilen Keys bauen
Interaktivität mit Event-Handlern und State hinzufügen und erklären, warum State ein Schnappschuss ist und wie Updates gebündelt werden
Objekte und Arrays im State unveränderlich aktualisieren
Ein lokales React-Projekt mit Vite anlegen und mit den React Developer Tools untersuchen
Eine Oberfläche mit „Thinking in React“ planen: den minimalen State finden, entscheiden, wo er liegt, und ihn nach oben heben

B1Schnellstart5 von 5 geschrieben · 5 LektionenLäuft im Browser
Ein erstes interaktives Spiel mit Komponenten, Props und State bauen
Sie bauen: Tic-Tac-Toe mit Verlauf
1. B1.1Komponenten und JSX
2. B1.2Props übergeben
3. B1.3State hinzufügen
4. B1.4State nach oben verlagern
5. B1.5Projekt: Tic-Tac-Toe mit Verlauf
B2Die Oberfläche beschreiben6 von 6 geschrieben · 6 LektionenLäuft im Browser
Seiten aus reinen Komponenten zusammensetzen
Sie bauen: Eine Profilgalerie
1. B2.1Ihre erste Komponente, Import und Export
2. B2.2JSX und geschweifte Klammern
3. B2.3Props und children
4. B2.4Bedingtes Rendern
5. B2.5Listen und Keys
6. B2.6Reinheit und der UI-Baum
B3Interaktivität hinzufügen6 von 6 geschrieben · 6 LektionenLäuft im Browser
Auf Nutzer reagieren und State richtig aktualisieren
Sie bauen: Ein Warenkorb
B4Ein Projekt einrichten4 von 4 geschrieben · 4 LektionenLäuft auf Ihrem Rechner
Eine lokale React-App anlegen, starten und untersuchen
Sie bauen: Ein Vite-Projekt von Grund auf
B5State verwalten6 von 6 geschrieben · 6 LektionenLäuft im Browser
State strukturieren und zwischen Komponenten teilen
Sie bauen: Eine durchsuchbare Produkttabelle

Projekt der Stufe Einstieg

Rezept-Browser

Eine Single-Page-App, die Rezepte aus einem JSON-Array auflistet, durchsucht und nach Tag filtert, mit Detailansicht und Portionsrechner, gebaut aus reinen Komponenten.

Läuft im BrowserSelbst geprüft anhand einer Checkliste

Zur Projektanleitung

Aufbau

Demnächst verfügbar

Nach dieser Stufe können Sie

Komplexe State-Logik in einen Reducer auslagern und mit Context teilen
Refs für Werte und DOM-Zugriff nutzen und Effekte schreiben, die sich mit externen Systemen synchronisieren, samt Aufräumen
Entscheiden, wann ein Effekt nicht nötig ist, und unnötige Abhängigkeiten von Effekten entfernen
Logik in eigene Hooks auslagern und externe Stores mit useSyncExternalStore abonnieren
Formulare mit Actions, useActionState, useFormStatus und useOptimistic bauen und Komponenten mit Vitest und der React Testing Library testen

I1Reducer und ContextDemnächst verfügbar · 5 LektionenLäuft im Browser
State-Logik über einen Komponentenbaum skalieren
Sie bauen: Ein Aufgabenmanager
1. I1.1Demnächst verfügbar
2. I1.2Demnächst verfügbar
3. I1.3Demnächst verfügbar
4. I1.4Demnächst verfügbar
5. I1.5Demnächst verfügbar
I2Refs und EffekteDemnächst verfügbar · 5 LektionenLäuft im Browser
Mit Refs und Effekten sicher aus React heraustreten
Sie bauen: Eine Chatraum-Verbindung mit Timer
1. I2.1Demnächst verfügbar
2. I2.2Demnächst verfügbar
3. I2.3Demnächst verfügbar
4. I2.4Demnächst verfügbar
5. I2.5Demnächst verfügbar
I3Effekte richtig einsetzen und eigene HooksDemnächst verfügbar · 6 LektionenLäuft im Browser
Unnötige Effekte entfernen und Logik in eigenen Hooks wiederverwenden
Sie bauen: Die Hooks useOnlineStatus und useLocalStorage
1. I3.1Demnächst verfügbar
2. I3.2Demnächst verfügbar
3. I3.3Demnächst verfügbar
4. I3.4Demnächst verfügbar
5. I3.5Demnächst verfügbar
6. I3.6Demnächst verfügbar
I4Formulare und ActionsDemnächst verfügbar · 5 LektionenLäuft im Browser
Daten mit Lade-, Fehler- und optimistischen Zuständen senden
Sie bauen: Ein optimistisches Kommentarformular
1. I4.1Demnächst verfügbar
2. I4.2Demnächst verfügbar
3. I4.3Demnächst verfügbar
4. I4.4Demnächst verfügbar
5. I4.5Demnächst verfügbar
I5Testen und DebuggenDemnächst verfügbar · 5 LektionenLäuft auf Ihrem Rechner
Belegen, dass Komponenten funktionieren, und Fehler finden
Sie bauen: Eine Testsuite für den Aufgabenmanager
1. I5.1Demnächst verfügbar
2. I5.2Demnächst verfügbar
3. I5.3Demnächst verfügbar
4. I5.4Demnächst verfügbar
5. I5.5Demnächst verfügbar

Projekt der Stufe Aufbau

Kanban-Board

Spalten und Karten, verwaltet mit einem Reducer und Context, Verschieben per Tastatur, Speichern über einen eigenen Hook und ein Formular für neue Karten mit Actions.

Läuft auf Ihrem RechnerSelbst geprüft anhand einer Checkliste

Vertiefung

Demnächst verfügbar

Nach dieser Stufe können Sie

Suspense, lazy, use, Transitions und useDeferredValue einsetzen, damit die Oberfläche reaktionsschnell bleibt
Das Rendern mit dem Profiler messen und memo oder den React Compiler dort einsetzen, wo die Messungen es rechtfertigen
Server-Rendering, Hydration und Server Components erklären und zeigen, wo die Grenzen 'use client' und 'use server' liegen
APIs von React DOM nutzen: Portale, Vorladen von Ressourcen, Dokument-Metadaten, ViewTransition und Fragment-Refs
Fehler mit Error Boundaries abfangen, barrierefreie Komponenten bauen, XSS-Fallen vermeiden und Komponenten mit TypeScript typisieren

A1Suspense und NebenläufigkeitDemnächst verfügbar · 6 LektionenLäuft im Browser
Die Oberfläche bei langsamer Arbeit reaktionsschnell halten
Sie bauen: Eine Suchseite, die nie einfriert
1. A1.1Demnächst verfügbar
2. A1.2Demnächst verfügbar
3. A1.3Demnächst verfügbar
4. A1.4Demnächst verfügbar
5. A1.5Demnächst verfügbar
6. A1.6Demnächst verfügbar
A2LeistungDemnächst verfügbar · 5 LektionenBrowser und Ihr Rechner
Erst messen, dann mit memo oder dem React Compiler optimieren
Sie bauen: Eine langsame Liste optimieren
1. A2.1Demnächst verfügbar
2. A2.2Demnächst verfügbar
3. A2.3Demnächst verfügbar
4. A2.4Demnächst verfügbar
5. A2.5Demnächst verfügbar
A3Server-Rendering und Server ComponentsDemnächst verfügbar · 5 LektionenLäuft auf Ihrem Rechner
Auf dem Server rendern und im Client hydrieren
Sie bauen: Eine auf dem Server gerenderte Seite mit hydriertem Widget
1. A3.1Demnächst verfügbar
2. A3.2Demnächst verfügbar
3. A3.3Demnächst verfügbar
4. A3.4Demnächst verfügbar
5. A3.5Demnächst verfügbar
A4APIs von React DOMDemnächst verfügbar · 5 LektionenLäuft im Browser
Die Plattformfunktionen nutzen, die React bereitstellt
Sie bauen: Eine animierte Galerie mit Modal
1. A4.1Demnächst verfügbar
2. A4.2Demnächst verfügbar
3. A4.3Demnächst verfügbar
4. A4.4Demnächst verfügbar
5. A4.5Demnächst verfügbar
A5Robuste, barrierefreie und typisierte KomponentenDemnächst verfügbar · 5 LektionenBrowser und Ihr Rechner
Komponenten ausliefern, die sicher scheitern, für alle funktionieren und typisiert sind
Sie bauen: Eine typisierte, barrierefreie Formularbibliothek
1. A5.1Demnächst verfügbar
2. A5.2Demnächst verfügbar
3. A5.3Demnächst verfügbar
4. A5.4Demnächst verfügbar
5. A5.5Demnächst verfügbar

Projekt der Stufe Vertiefung

Filmsuche mit gestreamten Ergebnissen

Laden mit Suspense, Transitions für die Sucheingabe, per Code-Splitting geladene Detailseiten, Error Boundaries und eine auf dem Server gerenderte erste Seite.

Läuft auf Ihrem RechnerSelbst geprüft anhand einer Checkliste

Abschlussprojekt

Barrierefreies persönliches Dashboard

Eine Vite-React-App in TypeScript mit Widgets für Aufgaben, Notizen und einen Timer, Einstellungen über Context, optimistischen Updates, Tests und statischer Auslieferung.

Läuft auf Ihrem RechnerSelbst geprüft anhand einer Checkliste

React

Lehrplan

Einstieg

Aufbau

Vertiefung

Abschlussprojekt

Quellen