Der React Praxiskurs: Von den Basics zur Skalierung

Mit JSX beschreibt Ihr die UI einer Komponente und integriert JS-Ausdrücke darin.

Eigene React-Komponenten lassen sich sehr einfach mit Hilfe von Funktionen schreiben, die JSX zurückgeben.

Diese Lektion erklärt, wie Daten und JavaScript-Ausdrücke in JSX integriert werden können.

Ohne einen Zustand, der sich ändern kann, lässt sich kaum eine sinnvolle App implementieren. In React wird dafür normalerweise useState verwendet. Diese Lektion stellt diesen Hook vor und erklärt seine Verwendung.

Props dienen der Übergabe von Daten an Kindkomponenten. Hier wird erklärt, wie genau dies geschieht und worauf man achten muss.

Wenn Props sich dynamisch verändern, wird die entsprechende Renderfunktion der Komponente erneut aufgerufen und den neuen Wert entsprechend berücksichtigen.

Hier wird erklärt, wie die Todo-App aufgebaut sein wird.

Wenn eine Kindkomponente der Elternkomponente etwas mitteilen will, geht das über ein Callback-Prop.

Todos sollen irgendwann einmal auch erledigt sein, hier besprechen wir, wie dies im Code funktioniert.

Das Aussehen einer UI ist zweifellos wichtig, deswegen erkläre ich hier, wie dies mit Hilfe der Bibliothek Emotion funktioniert und wie man das Prop className damit verwenden kann. Außerdem wird noch auf das style-Attribute eingegangen, mit dem man jedes Element im Detail separat stylen kann.

Über ein Filtern des Todos-Array lassen sich diese in zwei Gruppen aufteilen.

Natürlich muss man Todos auch löschen können. Hier wird erklärt, wie dies durch Array-Filtern funktioniert.

Bisher haben wir Komponenten immer in DIVs "gewrappt", dies kann man sich in bestimmten Fällen aber auch sparen.

Jetzt wird es interessant: Todos lassen sich recht einfach im Browser-Speicher persistent speichern und natürlich auch wieder laden, so dass sie das Neuladen der Seite "überleben".

Mit useEffect lassen sich Seiteneffekte integrieren. Das Mounten einer Komponente lässt sich mit dieser Funktion auch behandeln.

Kurze Zusammenfassung zu unserer Todo-App und letzte Verbesserungen.

Die Video-Player-App wird mit create vite erstellt und es wird erklärt, wie die App aufgebaut sein soll.

Mit dem Attribut "ref" lassen sich DOM-Elemente referenzieren und mit useRef darauf zugreifen. Hier machen wir das mit dem Video-Element.

Wir erstellen den eigentlichen Video-Player, der schon Buttons für Play, Pause und Stop hat.

Da man Play und Pause niemals gleichzeitig benötigt, kombinieren wir diese beiden in einen Button.

Die eignen Controls des Video-Elements steuern das Video ebenso, was aber dazu führt, dass unser Status beim Play/Pause-Button nicht entsprechend angepasst wird. Wir beheben das mit Hilfe von Event-Handlern beim Video-Element.

Die Lautstärke können wir auch über einen eigenen Regler den Benutzer verändern lassen.

Das Springen zu einer beliebigen Position im Video (Seek) lässt sich erstaunlich leicht mittels Setzen des Properties "currentTime" bewerkstelligen.

Die Länge des Videos steht erst nach dem Laden der Video-Metadaten fest, weswegen wir das richtige Event abwarten müssen.

Die Playlist wird durch eine Liste realisiert, die mit dem HTML-Element select implementiert werden kann.

Wir verwenden useEffect hier, um auf die Änderung des src-Props zu reagieren und den Zustand des Video-Players zurückzusetzen.

Die Playlist wird von festen Einträgen zu einem Array transformiert.

Nun kommt die Bearbeitung der Videoliste ins Spiel: wir fügen das Hinzufügen von Video-Einträgen hinzu.

Was man hinzufügt, muss man auch wieder löschen können. Dies machen wir ähnlich zur Todo-App durch Filtern.

Die Playlist soll ja nicht nur als "Lesezeichenliste" dienen, sondern auch automatisch die Videos hintereinander abspielen. Dies wird in dieser Lektion realisiert.

Für Ungeduldige: Buttons für nächstes und vorheriges Video.

Eine Sonderbehandlung für das erste und das letzte Video wird realisiert: die Next/Previous-Buttons sollen entsprechend deaktiviert sein.

Jetzt speichern und laden wir noch unsere Playlist, dies erfolgt analog zur Todo-App im local storage des Browsers.

Die Videos, die als Beispiel in der Video-Player-App verwendet werden, könnt Ihr hier im Original ansehen (alle CC Attribution Lizenz, siehe die entsprechenden Webseiten):

• Elephants dream: https://orange.blender.org/

• Big Buck Bunny: https://peach.blender.org/

• Sintel: https://durian.blender.org/

Am Beispiel des useJsonFetch-Hooks wird hier erklärt, wie man eigene Hook-Funktionen schreiben kann.

Zustandsänderung mit dem Setter von useState kann trickreich sein. Mit useImmer ist es aber kein Problem mehr.

Die UI wird schneller aufgebaut und reagiert schneller auf Benutzereingaben, wenn nicht unnötige Aufrufe der Render-Funktionen geschehen. Mit memo lässt sich verhindern, dass Komponenten gerendert werden, wenn sich ihre Props nicht ändern.

Mit useCallback lässt sich das unnötige Rendern von Kind-Komponenten verhindern, wenn Callback-Props verwendet werden.

Aufwändige Berechnungen innerhalb der Render-Funktionen sollten nur wenn notwendig ausgeführt werden. Mit useMemo lassen sich die Ergebnisse dieser Berechnungen unter Berücksichtigung der Abhängigkeiten cachen.

Zustand mit useState zu verwalten kann bei größeren Datenstrukturen unübersichtlich und etwas mühsam werden. Mit MobX lässt sich der Zustand stärker von der UI trennen und in Stores verwalten. Die Änderungen des Zustands erfolgt dabei über ganz normale JS-Mechanismen (Zuweisung, push, splice, ...) dank der Verwendung von Proxy-Objekten (ES6-Feature).

In dieser Lektion geht es um das Laden und Speichern der Daten, die im MST-Baum liegen. Den kompletten Source-Code könnt Ihr hier als ZIP herunterladen.

Ich fasse hier die Ergebnisse des Kurses zusammen und gebe einen kleinen Ausblick, was in Zukunft noch als Erweiterungen geplant ist.