Modern React: von Null auf Full-Stack
Das Praxis-Upgrade für deine React-Skills
- 6 Lektionen
- Für Einsteiger und Fortgeschrittene geeignet
- Praxisnahes und direkt umsetzbares Wissen
Dein Praxis-Upgrade für moderne Webentwicklung
In diesem umfassenden Videotutorial kombinieren wir React, TanStack und Next.js, um dir nicht nur die Grundlagen zu vermitteln, sondern auch praxisnahe Techniken, mit denen du sofort produktiv arbeiten kannst.
Lerne Schritt für Schritt, wie du moderne Webanwendungen baust – von der ersten Komponente bis hin zu performanten Full-Stack-Apps.
Dein Weg von React-Basics zu Full-Stack-Power
Unser React Tutorial führt dich in sechs kompakten, praxisorientierten Lektionen vom Einstieg bis zur Profi-Entwicklung. Du lernst, Single Page Applications mit sauberem State-Management zu bauen, Daten mit TanStack Query zu managen, Formulare mit react-hook-form zu optimieren und Routing mit TanStack Router umzusetzen.
Der Höhepunkt: Full-Stack-Entwicklung mit Next.js und React Server Components – für maximale Performance und beste User Experience.
Nach dem Kurs bist du bereit, eigene client- und serverseitige Anwendungen zu entwickeln, die sowohl technisch als auch optisch überzeugen.
Lektions-Übersicht
Lektion 1: React-Grundlagen
In der ersten Lektion lernst du, was React ist und wie es funktioniert. Anhand einer Beispielanwendung schauen wir uns den Projektaufbau und den Workspace an. Du erfährst, wie Komponenten aufgebaut sind, wie man mit Props, Listen und State arbeitet und wie Interaktionen in React abgebildet werden.
Lektion 2: Arbeiten mit State
In der zweiten Lektion vertiefen wir das zentrale Konzept des State in React. Du lernst, wie mehrere States in einer Komponente verwaltet werden und wie du mit Memoization die Performance verbessern kannst.
Außerdem behandeln wir den Unterschied zwischen kontrollierten und unkontrollierten Komponenten und zeigen in einem Praxisbeispiel, wie State in einer Image-Cropping-Komponente und bei Dialogen zum Einsatz kommt.
Lektion 3: Datenabfrage mit TanStack Query
In der dritten Lektion lernst du, wie du mit TanStack Query effizient Daten von einem API abrufst und verwaltest – ein zentrales Thema in modernen SPAs. Du erfährst, wie du Daten mit Zod und TypeScript validierst, Typen automatisch aus einer OpenAPI-Beschreibung generierst und den Query-Cache gezielt nutzt. Außerdem klären wir, wie du mit React Suspense die Darstellung priorisieren kannst.
Lektion 4: Formulare mit react-hook-form
Formulare sind essenziell in vielen Anwendungen. In dieser Lektion lernst du, wie du mit react-hook-form moderne und benutzerfreundliche Formulare erstellst.
Wir behandeln die Validierung, geben Feedback an Nutzer:innen, integrieren eigene Komponenten, arbeiten mit dynamischen Listen und zeigen auch, wie du Drag and Drop umsetzt und Formulardaten speicherst.
Lektion 5: Typsicheres Routing mit TanStack Router
In dieser Lektion lernst du, wie du mit dem TanStack Router eine moderne, typsichere Navigation in deine React-App bringst – inklusive Unterstützung für Links, Back-Button und Bookmarks.
Wir zeigen dir die File-System-basierte Routenstruktur, dynamische Routen, Layout-Routen sowie die Verwendung von typsicheren Suchparametern. Außerdem: Integration mit TanStack Query und Performanceoptimierungen.
Lektion 6: Full-Stack React mit Next.js
In der letzten Lektion lernst du, wie du mit Next.js performante Full-Stack-React-Anwendungen baust. Wir zeigen dir die Unterschiede zwischen klassischen SPAs und Full-Stack-Ansätzen, erklären React Server Components und wie du Server- und Clientkomponenten kombinierst.
Außerdem geht es um serverseitiges Rendern, asynchrone Komponenten, Routing mit Next.js und Progressive Enhancement – also Apps, die sogar ganz ohne JavaScript funktionieren.
Dieses Tutorial hilft...
Frontend-Entwickler:innen, die ihr Wissen praxisnah und strukturiert erweitern wollen, um moderne Webanwendungen mit State-Management, Routing und performanten UI-Komponenten zu entwickeln.
Full-Stack-Entwickler:innen, die sowohl client- als auch serverseitig arbeiten – und jetzt lernen möchten, wie sie mit Next.js, React Server Components und TanStack effiziente, skalierbare Anwendungen umsetzen.
Technische Teamleiter:innen oder CTOs, die ein strukturiertes Schulungsformat suchen, um ihr Entwicklerteam in React, Next.js und moderner Toolchain fit zu machen und damit die Codequalität und Projektgeschwindigkeit zu steigern.
Erfahrene JavaScript-Entwickler:innen aus anderen Frameworks, die bisher mit Angular oder Vue gearbeitet haben – und nun verstehen wollen, wie React und Next.js funktionieren, um Projekte zu migrieren oder neue Full-Stack-Apps zu starten.
Das lernst du im React Tutorial:
- React von Grund auf verstehen – Komponenten, Props, State und Interaktionen sicher anwenden
- Effizientes State-Management – kontrollierte & unkontrollierte Komponenten, Performance mit Memoization
- Datenanbindung mit TanStack Query – API-Calls, Caching, Validierung mit Zod & TypeScript
- Moderne Formulare entwickeln – mit react-hook-form, Validierung, Feedback und dynamischen Eingaben
- Typsicheres Routing umsetzen – Navigation mit TanStack Router, inklusive Layout- und dynamischen Routen
- Full-Stack-Entwicklung mit Next.js – Server Components, SSR, asynchrone Komponenten und Progressive Enhancement
Am Ende bist du in der Lage, komplette client- und serverseitige Anwendungen mit React und Next.js zu entwickeln – performant, skalierbar und ready für den Praxiseinsatz.
Expertenwissen aus erster Hand
Nils Hartmann - Freiberufler
Nils Hartmann ist freiberuflicher Softwareentwickler und -architekt. Seine Schwerpunkte sind die Entwicklung von Backends mit Java und Spring sowie Frontends mit React und Next.js. Er gibt Schulungen und Workshops zu diesen Themen und hat ein Buch über React geschrieben.
Jetzt Fullstack Member werden & Tutorial starten
Mach den nächsten Schritt
mit der Fullstack Membership!
- Wöchentlich interaktive Live-Events
- Neueste Kurse zu Software und AI-Themen
- Jede Woche eine neue Tutorial-Lektion
- Zugriff auf +12 000 Artikel und Magazinarchiv
- 6 Monate Zugriff auf deine Konferenzsession
- 3 Monate Zugriff auf Live-Event Aufzeichnungen
- 50 Anfragen an entwickler intelligence im Monat
- Rabatte auf Konferenz und Trainings-Events
Teams mit 3-15 Nutzern
ab 116,60 € im Jahr*
*Preis pro Nutzer zzgl. MwSt.
Du bist bereits ein Fullstack Member? Dann logge dich auf entwickler.de ein und starte sofort dein nächstes Tutorial! Jetzt starten!