Der React JS Praxiskurs - Web-Apps reaktiv entwickeln
Web-Apps mit React JS entwickeln, JSX, Hook-Funktionen, DOM-Elemente steuern, MobX/MST, Redux-Toolkit, React-Router
Description
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
What You Will Learn!
- Einfache und komplexere Web-Apps auf Basis von React JS erstellen
- Mit JSX Web-Oberflächen beschreiben
- Zustandsverwaltung mit useState, MobX, Redux
- Lifecycle-Ereignisse und Seiteneffekte mit useEffect behandeln
- Zugriff auf DOM-Elemente in React mit useRef (Beispiel Video-Element)
- Die wichtigsten Hooks einsetzen
- Erweiterte Funktionen wie Zustand speichern/laden
- Einfache Optimierung von React-Komponenten (memo, useCallback, useMemo)
- Grundlagen des State-Management mit MobX und MobX-State-Tree
- Routen und URL-Pfade in Apps über React-Router behandeln
- Stores mit Redux und Redux-Toolkit erstellen und mit React verbinden
Who Should Attend!
- Web-Entwickler, die reaktive und moderne Web-Applikationen entwickeln wollen
- jQuery-/AngularJS-/Web-Components-Entwickler, die auf React JS umsteigen wollen
- Entwickler, die für ihre Karriere React JS als sehr gefragten Skill lernen wollen
- JavaScript-Entwickler mit Anfängerwissen, die eine reaktive UI programmieren lernen wollen