Der React JS Praxiskurs - Web-Apps reaktiv entwickeln

Es gibt mittlerweile eine unüberschaubare Anzahl an Web- und JS-Frameworks, mit denen man Web-Apps erstellen kann. React hat sich hier in der Praxis einen der vordersten Ränge in der Beliebtheit ergattern können. Der Einstieg in dieses Framework ist im Prinzip nicht schwierig, aber wenn man die Konzepte noch nicht kennt oder bisher eher mit älteren Frameworks wie jQuery gearbeitet hat, muss man zunächst die etwas andere (und effizientere) Herangehensweise verstehen.

In diesem Kurs wird das Thema React und Web-App-Entwicklung mit React JS von Grund auf erläutert und die wichtigsten Grundlagen im Detail erklärt. Vorausgesetzt werden grundlegendes Wissen in der Entwicklung mit JavaScript (von Vorteil sind auch ES6-Kenntnisse, aber nicht Voraussetzung) und rudimentäre HTML/CSS-Kenntnisse. Alles weitere wird im Kurs erklärt und dabei auf das grundlegende Verständnis der Mechanismen Wert gelegt. Damit die Teilnehmer möglichst schnell zu Ergebnissen gelangen, werden dabei allerdings nicht alle Möglichkeiten, die React bietet, erläutert, sondern sich auf einen Weg konzentriert, der aber keine prinzipiellen Nachteile oder Einschränkungen mit sich bringt. So gehe ich nicht auf Klassenkomponenten ein, sondern beschränke mich auf funktionale Komponenten, die Hook-Funktionen (useState, useEffect, useRef, etc.) verwenden. Weiterhin beschränke ich mich auf die Verwendung von  ViteJs als Build-Tool und für die initiale Erstellung von Apps (create vite). Das weitreichende Feld des "externen" Zustandsmanagements wird in diesem Kurs nicht behandelt.

Das Ziel des Kurses ist es, den Teilnehmern zu einem grundlegenden Verständnis von React zu verhelfen und sie zu befähigen, einfache und auch komplexere Web-Apps zu erstellen, die sich leicht warten und erweitern lassen. Aufbauend auf den hier erworbenen Kenntnissen können sich die Teilnehmer dann leicht die noch fortgeschritteneren Themen aneignen. Es ist geplant, dass dieser Kurs regelmäßig um weitere Lektionen erweitert wird, so dass mit der Zeit auch die noch nicht behandelten Themen abgedeckt werden (z.B. die weiteren Hook-Funktionen).

Teilnehmer lernen in diesem Kurs:

• React-Apps erstellen mit ViteJs

• Funktionale React-Komponenten schreiben mit JSX

• Props verwenden

• Komponenten kombinieren und zwischen diesen kommunizieren

• Zustand erzeugen mit useState  und verändern

• Zugriff auf DOM-Elemente (wie <video>) mit useRef erhalten

• Lifecycle-Events und Seiteneffekte mit useEffect

• Speichern und Laden des App-Zustands im LocalStoreage

• 3 konkrete Apps entwicklen (Zähler, Todos, Video-Player)

• Optimierungen mit memo, useCallback und useMemo

• Mit React-Router Routen und URL-Pfade in Apps verwenden

• Einführung in MobX und MobX-State-Tree als Beispiel für externes State-Management

• Einführung in Redux und Redux-Toolkit