react kurs kursbild

Schaffe in kürzester Zeit den praktischen Einstieg in die Frontend-Entwicklung mit React

... und lerne, wie du mithilfe von JavaScript und dem React Framework schöne Frontends für deine Webanwendungen programmieren kannst, um deinen persönlichen Wert auf dem Arbeitsmarkt drastisch zu steigern.

Jetzt deinen Premium Account aktivieren

Laufzeit des Kurses

ca. 13 Stunden

Benötigte Vorkenntnisse

HTML/CSS/JavaScript Kenntnisse

Das Frontend-Framework React ist weltweit eines der populärsten JavaScript Frameworks überhaupt.

Mithilfe von diesem kannst du sehr effizient schöne User-Interfaces entwickeln, weshalb es von Unternehmen auch stark nachgefragt wird.

In diesem Kurs wirst du den Umgang mit dem React Framework von 0 an lernen, sodass du danach in der Lage bist, deine eigene Web-Apps problemlos umzusetzen.

Genauer gesagt wirst du lernen:

  • Was React ist
  • Was die grundlegenden Konzepte für das Arbeiten mit React sind
  • Wie du React-Projekte Schritt-für-Schritt aufsetzt
  • Wie du reale Anwendungen mit React umsetzt und vieles mehr...

All diese Kenntnisse wirst du "hands-on" anhand mehrerer Praxisprojekte erwerben, denn wir programmieren gemeinsam eine Zähl-App, eine Todo-App und eine Video-Player-App.

Wenn du also den Quereinstieg in die Programmierung planst, deine bereits bestehenden Programmier-Kenntnisse für einen neuen Job oder ein Job-Interview ausbauen möchtest, oder dich einfach nur hobbymäßig mit der Webentwicklung befassen möchtest, dann ist dieser Kurs perfekt für dich geeignet!

Jetzt deinen Premium Account aktivieren


Inhaltsverzeichnis des Kurses

Modul 1: Einführung und erste Schritte

react modul 1

In diesem Modul erhältst du eine detaillierte Einführung in diesen Kurs, damit du weißt, was auf dich zukommt. Zudem wirst du auch direkt lernen, wie du deine erste React-App in nur wenigen Schritten aufsetzen kannst.

Diese Lektionen erwarten dich:

  • [Video 1] Willkommen und Übersicht
  • [Video 2] Was ist das besondere an React?
  • [Video 3] Schnelleinstieg: Die erste React-App in wenigen Schritten
  • [Video 4] Anatomie einer React-App

Modul 2: Auffrischer: Benötigte ES6 Funktionalitäten

react modul 2

In diesem Modul erhältst du eine Auffrischung bezüglich für den Kurs benötigter ES6 Funktionalitäten.

Diese Lektionen erwarten dich:

  • [Video 1] Let und const
  • [Video 2] Destructuring
  • [Video 3] Arrow-Functions
  • [Video 4] ES-Module

Modul 3: Grundlagen und Praxisprojekt "Zähl-App"

react modul 3

In diesem Modul lernst du die Grundlagen von React kennen. Zudem entwickeln wir gemeinsam unser erstes Praxisprojekt, eine Zähl-App.

Diese Lektionen erwarten dich:

  • [Video 1] HTML in JS: JSX
  • [Video 2] Komponenten erstellen
  • [Video 3] JavaScript-Ausdrücke in JSX
  • [Video 4] Zustand speichern mit useState
  • [Video 5] Zählerkomponente mit Props
  • [Video 6] Eingabefelder und dynamische Props

Modul 4: Praxisprojekt "Todo-App"

react modul 4

In diesem Modul wirst du Schritt-für-Schritt lernen, wie du mit React eine komplette Todo-App umsetzen kannst. 

Diese Lektionen erwarten dich:

  • [Video 1] Grundlegender Aufbau der Todo-App
  • [Video 2] Kommunikation zwischen Kind- und Eltern-Komponente
  • [Video 3] Todo als erledigt markieren
  • [Video 4] Stylen mit Emotion
  • [Video 5] Gruppieren nach Erledigt-Status
  • [Video 6] Todos löschen
  • [Video 7] DIVs sparen
  • [Video 8] Speichern und Laden
  • [Video 9] useEffect als Mounted-Handler
  • [Video 10] Todo-App Fazit

Modul 5: Praxisprojekt "Video-Player-App"

react modul 5

In diesem Praxisprojekt steigern wir den Schwierigkeitsgrad und setzen gemeinsam eine Video-Player-App um.

Diese Lektionen erwarten dich:

  • [Video 1] Video-Player-App erstellen
  • [Video 2] Video-Element kontrollieren mit useRef
  • [Video 3] Neue Video-Player-Komponente mit Play/Pause/Stop
  • [Video 4] Pause/Play kombinieren mit Zustand
  • [Video 5] Video-Events für Play und Pause
  • [Video 6] Video-Lautstärke-Regler
  • [Video 7] Video-Position setzen
  • [Video 8] Video-Länge anzeigen
  • [Video 9] Playlist mit select
  • [Video 10] Zurücksetzen bei src-Änderung mit useEffect
  • [Video 11] Video-Liste als Array
  • [Video 12] Neue Videos zur Liste hinzufügen
  • [Video 13] Einträge aus Liste löschen
  • [Video 14] Playlist abspielen
  • [Video 15] Next/Previous Buttons
  • [Video 16] Disable Next/Previous Buttons
  • [Video 17] Speichern und Laden der Videos

Modul 6: Fortgeschrittene Themen (weitere Hooks, Optimierungen)

react modul 6

In diesem Modul lernst du weitere wichtige fortgeschrittene Themen kennen.

Diese Lektionen erwarten dich:

  • [Video 1] Eigene Hooks erstellen
  • [Video 2] useImmer statt useState für einfache Änderungen des State
  • [Video 3] Optimierung von Komponenten mit memo
  • [Video 4] Optimierung von Komponenten mit useCallback
  • [Video 5] Optimierung von Komponenten mit useMemo

Modul 7: Externes State-Management

react modul 7

In diesem umfangreichen Modul sehen wir uns das Thema "Externes State-Management" an.

Diese Lektionen erwarten dich:

  • [Video 1] Einen Store mit MobX erstellen und mit React verbinden
  • [Video 2] MobX-State-Tree (MST): Typisierter Zustandsbaum mit MobX-Technik
  • [Video 3] Komplexeres Projekt mit MST: Oberste Ebene (Sections)
  • [Video 4] Komplexeres Projekt mit MST: Selektion der Sections
  • [Video 5] Komplexeres Projekt mit MST: Titel ändern
  • [Video 6] Komplexeres Projekt mit MST: Units
  • [Video 7] Komplexeres Projekt mit MST: Refactoring in Einzelkomponenten
  • [Video 8] Komplexeres Projekt mit MST: MediaItems zum Store hinzufügen
  • [Video 9] Komplexeres Projekt mit MST: MediaItems Eigenschaften bearbeiten
  • [Video 10] Komplexeres Projekt mit MST: MediaItems hinzufügen und löschen
  • [Video 11] Komplexeres Projekt mit MST: Store speichern und laden

Modul 8: Abschluss

react modul 8

In diesem Modul ziehen wir abschließend noch ein Fazit.

Diese Lektionen erwarten dich:

  • [Video 1] Fazit und Ausblick
Jetzt deinen Premium Account aktivieren