Zum Campus
Videokurs

Moderne Webentwicklung mit React

Lerne, wie du mit der populären JavaScript-Applikation eine vollwertige Single-Page-Applikation entwickeln kannst.

LERNZIELE

  • Du lernst die Basiskonzepte von React kennen
  • Du entwickelst eine funktionsfähige Applikation mit React
  • Du lernst die Komponentenarchitektur kennen und kannst Applikationen für React strukturieren
  • Du lernst die wichtigsten Hooks kennen und weißt, wie du sie einsetzen kannst
  • Du kannst deine Applikation testen und debuggen
  • Routing und Formulare werden ein Kinderspiel für dich

INHALT

Die JavaScript-Bibliothek ist zurzeit der unangefochtene Spitzenreiter in Sachen Frontend-Entwicklung. Sie bietet eine hohe Entwicklungsgeschwindigkeit und gewährleistet eine gute Performance für Anwendungen – nicht anders als von einem Projekt aus dem Hause Facebook zu erwarten.

In diesem Kurs lernst du React von Grund auf kennen und wirst alle wichtige Aspekte der Bibliothek praxisnah einsetzen können. Angefangen bei Komponenten, über Hooks, Styling und Formulare entwickelst du eine voll funktionsfähige Kochbuch-Applikation, die du natürlich auch testen und debuggen wirst. Am Ende bist du in der Lage, eigene Anwendungen zu entwickeln, die auch den Anforderungen an komplexe Unternehmensapplikationen standhalten können.

ALLE LEKTIONEN IM ÜBERBLICK

Styling
  • Intro
  • Styling mit dem Style-Attribut und Klassen
  • Mehrere CSS-Klassen in einem Element
  • Mehr Flexiblität beim Stylen von Komponenten mit der Classnames Bibliothek
  • Styling mit SCSS und CSS Modules
  • Styled Components verwenden
  • Material UI einbinden
  • Quiz: Styling
Context
  • Intro
  • Zentrale Informationen im Context vorhalten
  • Zugriff auf den Context
  • Quiz: Context
Custom Hooks
  • Intro
  • Funktionalität in Custom Hooks auslagern
  • Quiz: Custom Hooks
Formulare
  • Intro
  • Grundlegender Aufbau eines Formulars
  • Formularelemente mit dem State synchronisieren
  • Ein umfangreicheres Formular aufbauen
  • Das Formular absenden
  • Formulardaten zum Server senden
  • Grundlagen der Formularvalidierung
  • Formularbehandlung mit Formik
  • Formularvalidierung mit Formik und Yup
  • Validierungsschema definieren
  • Quiz: Formulare
Refs
  • Intro
  • Refs
  • Dateien in React hochladen
  • Die übrigen Hooks
  • Quiz: Refs
Routing
  • Intro
  • Einführung in den React Router
  • Routen mit Variablen umsetzen
  • Direkte Steuerung des Routers
  • UI-Elemente mit dem Router steuern
  • Quiz: Routing
Testing
  • Intro
  • Unittests mit Jest
  • Tests organisieren
  • Weiterführende Test-Themen
  • React-Komponenten testen
  • Events testen
  • Abhängigkeiten mocken
  • Snapshot-Tests mit Jest
  • Quiz: Testing
Debugging und Tools
  • Intro
  • Die Applikation mit den Browser-Dev-Tools analysieren
  • Ein Blick in den Komponentenbaum mit den React-Dev-Tools
  • React-Applikationen profilen
  • Quiz: Debugging und Tools
Komponenten
  • Intro
  • Die Komponentenarchitektur von React
  • Funktionskomponenten als Bausteine einer Applikation
  • Thinking in React
  • React-Komponenten erstellen
  • Mehr Dynamik in Komponenten dank JSX
  • Den State einer Komponente richtig typisieren
  • Die State-Definition einer Komponente
  • Informationen mit Props an Komponenten übergeben
  • Umgang mit User-Events
  • Kommunikation zwischen Kind- und Elternkomponente
  • Quiz: Komponenten
Komponenten-Lifecycle
  • Intro
  • Aufbau des Effect Hooks
  • Einhängen von Komponenten
  • Aktualisierung von Komponenten
  • Entfernen von Komponenten
  • Mit einem Webserver kommunizieren
  • Lesend auf APIs zugreifen
  • Schreibend auf APIs zugreifen
  • Quiz: Komponenten-Lifecycle
Einführung und Einrichtung
  • Herzlich Willkommen zu diesem Kurs
  • Intro
  • Die Grundlagen von React
  • Werkzeuge für den Umgang mit React
  • Applikationen mit Create React App initialisieren
  • Weitere Optionen von Create React App kennenlernen
  • Struktur der Applikation
  • Start der Applikation
  • Quiz: Erste Schritte
Build
  • Intro
  • Build und Deployment einer React-Applikation
  • Die Konfiguration mit Umgebungsvariablen beeinflussen
  • Quiz: Build
Klassenkomponenten
  • Intro
  • Einführung in die Klassenkomponenten von React
  • Zustand und Props bei Klassenkomponenten
  • Der Lifecycle einer Klassenkomponente
  • Refactoring der Klassenkomponenten
  • Unterschiede zwischen Klassen- und Funktionskomponenten
  • Quiz: Klassenkomponenten
  • Fazit und Kursabschluss

SO LERNST DU MIT DIESEM KURS

In den Videokursen der heise academy lernst du IT-Themen anschaulich und verständlich. Du siehst den Experten bei der praktischen Arbeit zu und lässt dir dabei alles genau erklären. Das Wissen ist in kompakte Lerneinheiten unterteilt, sodass du den Kurs Schritt für Schritt durcharbeiten oder gezielt zu Lektionen springen kannst, die dich interessieren. Die persönliche Lernumgebung der heise academy hält viele Funktionen für dich bereit, die dich beim Lernen unterstützen:

  • Flexibler Videoplayer mit vielen Steuerungsmöglichkeiten
  • Wissensquiz zur Lernkontrolle
  • Lernhistorie und Lernfortschritt
  • Lesezeichen und Notizen
  • Volltextsuche in den Videos
  • Übungsmaterial zum Mitmachen
  • Responsive Web-App und Videostreaming für alle Endgeräte

TECHNISCHE VORAUSSETZUNGEN

Für diesen Videokurs wird lediglich ein aktueller Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.

DEIN EXPERTE

Sebastian Springer
Principal IT Architect | MaibornWolff

Sebastian Springer arbeitet bei MaibornWolff in München. Als Berater, Trainer und Autor beschäftigt er sich intensiv mit den Aspekten des client- und serverseitigen JavaScript, das sich mittlerweile in allen Lebensbereichen wiederfindet. Der Fachmann legt den Fokus auf die Fragestellung, welchen Beitrag Webtechnologien in der Welt von morgen leisten und wie sie den steigenden Anforderungen standhalten können. Dafür entwickelt er Architekturen, Codequalität und Tools weiter.

Moderne Webentwicklung mit React

Veröffentlicht am 13.12.2025
ab 49,00 €
im
ESSENTIAL PASS
oder 245,00 € im Einzelkauf
inkl. MwSt. | 205,88 € netto
Preise und Pakete vergleichen

Du hast Fragen zu unseren academy Videokursen? Wir helfen dir gerne weiter.

Fülle ganz einfach und bequem das Kontaktformular aus und wir werden deine Fragen schnellstmöglich beantworten.

Kontaktformular