React lernen

Das lernst du

1. Kapitel 1Komponenten & JSX – Oberflächen aus Bausteinen.
   Deine erste Komponente
2. Kapitel 2Props – Daten an Komponenten übergeben.
   Props
3. Kapitel 3State mit useState – Komponenten, die sich etwas merken.
   State mit useState · Boss: Punktezähler
4. Kapitel 4Deine Code-Werkstatt – Gelerntes verbinden und einen neuen Baustein entdecken.
   Inhalte nach einer Bedingung
5. Kapitel 5Werkstatt: Verstehen und selbst bauen – Neue Bausteine in kurzen Erklärungen und eigenen Programmen üben.
   Listen als Oberfläche zeigen · Eine Oberfläche entscheidet · Boss: ein Punktebutton mit sicherem Update
6. Kapitel 6Neue Werkzeuge für eigene Ideen – Neue Konzepte verstehen, ergänzen und selbst anwenden.
   Eine bedingte Nachricht · Ein Kind löst eine Aktion aus · Abgeleitete Werte statt doppeltem State
7. Kapitel 7Mehr können: dein nächstes Übungskapitel – Vier neue Bausteine in kleinen Schritten verstehen und selbst anwenden.
   Fragment: mehrere Elemente zusammen · className: eine CSS-Klasse in JSX · Eine Liste vor dem Rendern filtern · Ein Zustand mit zwei Möglichkeiten
8. Kapitel 8Meisterkapitel: wie echte Programme gebaut sind – Fünf Bausteine aus echten Projekten – erklärt, verbunden, ergänzt und selbst geschrieben.
   Ein kontrolliertes Eingabefeld · children: Inhalt in eine Komponente geben · style: Gestaltung als Objekt · Ein Zustand mit Untergrenze · Eine Liste im State erweitern
9. Kapitel 9Projektwerkzeuge: verstehen und anwenden – Acht weitere Bausteine mit Erklärseiten und vier Übungen je Lektion.
   Eine leere Liste verständlich anzeigen · Komponenten durch Zusammensetzen wiederverwenden · Ein Panel per Zustand ein- und ausblenden · Mehrere Updates mit Funktions-Updatern · Eine nicht verfügbare Aktion deaktivieren · Abgeleitete Werte ohne zusätzlichen State · Stabile Schlüssel aus Daten verwenden · Den Zustand eines Umschalters zugänglich machen
10. Kapitel 10Events & kontrollierte Inputs – Auf Klicks reagieren, Eingaben im State halten und Formulare absenden.
    onClick mit Werten · Ein Zeichenzähler mit onChange · Auswahllisten mit select · Formulare absenden mit onSubmit · Boss: ein Mini-Quiz
11. Kapitel 11Listen, Keys & bedingtes Rendern – Daten als Listen zeigen, sortieren, filtern und je nach Zustand gestalten.
    Objekte als Liste darstellen · Bedingtes Anzeigen mit && · Sortiert anzeigen · Klassen je nach Zustand · Boss: eine filterbare Liste
12. Kapitel 12Effects mit useEffect – Nebenwirkungen – und wann man sie nicht braucht.
    useEffect: Code nach dem Zeichnen · Abhängigkeiten: wann läuft der Effekt? · Ein leeres Array: nur beim Start · useRef: merken, ohne neu zu zeichnen · Boss: automatisch speichern im Effekt
13. Kapitel 13Custom Hooks – Eigene Hooks bauen: Logik einmal schreiben, überall nutzen.
    Der erste eigene Hook · Ein Hook für Listen · Hooks mit berechneten Werten · useEffect in einem Hook · Boss: ein Hook für Formulare
14. Kapitel 14Context & lokaler State – Daten tief im Baum teilen.
    createContext und useContext · Der nächste Provider gewinnt · Gemeinsamer State im Elternteil · useReducer: State mit Aktionen · Boss: ein Warenkorb mit Context und useReducer
15. Kapitel 15Styling & responsive Komponenten – Komponenten gestalten.
    Mehrere Klassen nach Bedingungen · Stil aus Werten berechnen · Eine Komponente, mehrere Varianten · Responsive: ein Raster mit Spalten-Prop · Boss: ein kleiner Komponenten-Baukasten
16. Kapitel 16React + HTML/CSS: JSX ist HTML in JavaScript – JSX sieht aus wie HTML, ist aber JavaScript: className, style-Objekte, htmlFor und Listen aus Daten.
    JSX: className statt class · style als Objekt: {{ … }} · JSX-Regeln: Fragment, /> und htmlFor · Aus Daten wird HTML: map und key · Boss: eine Profilkarte als Komponente
17. Kapitel 17React + TypeScript: Komponenten mit Typen – TypeScript beschreibt Props und State – Fehler fallen auf, bevor jemand die App öffnet.
    Props mit einem Typ beschreiben · Optionale Props mit ? und Standardwert · State mit Typ: useState<number> · Varianten mit Union-Typen · Boss: eine typisierte Aufgabenliste

Abschlussprojekt: Mini-Dashboard

Ein Dashboard mit mehreren interaktiven Komponenten.

So funktioniert's

Jede Lektion beginnt mit kurzen Erklärseiten. Danach übst du mit Auswahlfragen, Lückentexten, Code ordnen und eigenem Code – mit Hinweisen und sofortigem Feedback. Kostenlos, ohne Werbung, auf Handy, Tablet und PC.

Jetzt React lernen