React lernen und verstehen – das Praxis-Tutorial

Hier werden die Themen vorgestellt, die im Weiteren behandelt werden, und es wird auf die Motivation hinter diesem Kurs eingegangen.

Es gibt mittlerweile unzählige UI-Frameworks für JavaScript – warum soll es nun ausgerechnet React sein? Neben der unstrittigen Beliebtheit dieser Bibliothek, gibt es auch ein paar tiefgreifendere Gründe, die für React sprechen.

Wir richten in dieser Lektion die Entwicklungsumgebung ein und erstellen mit npm create vite unsere erste React-App im Handumdrehen.

Nachdem wir in der letzten Lektion eine „frische“ React-App erstellt haben, soll es hier darum gehen, die Struktur dieser App zu verstehen und zu erläutern, wie React in eine Webseite eingebettet werden kann.

Ein kleiner Auffrischer zum Thema var vs. let/const.

Destructuring ermöglicht das gezielte Extrahieren von Elementen aus Objekten und Arrays. Bei genauem Hinsehen ergeben sich viele Anwendungsmöglichkeiten, die JS-Code eleganter und kompakter machen.

Funktionen sind in JS essenziell und wurden bisher nur über das Keyword function deklariert und definiert. ES6 führt eine elegante und kurze Schreibweise ein, die den Code lesbarer macht und eine Lösung für ein leidiges Problem mit this bietet.

In NodeJs wurden Module schon von Anfang an verwendet, jedoch setzte es zu Anfang ausschließlich auf das CommonJs-Modulformat mit require. Seit ES6 gibt es eine Moduldefinition im Standard und damit die neuen Keywords import/export. Mittlerweile wird dieses Format bei fast allen (neuen) JS-Bibliotheken unterstützt und auch NodeJs kann damit in den neuesten Versionen umgehen.

Mit JSX beschreibt ihr die UI einer Komponente und integriert JS-Ausdrücke darin. Die Projektdatei zum Video enthält den fertigen Code zu diesem Tutorial-Abschnitt.

Eigene React-Komponenten lassen sich sehr einfach mithilfe 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 Kind-Komponenten. Hier wird erklärt, wie genau dies geschieht und worauf man achten muss.

Wenn Props sich dynamisch verändern, wird die entsprechende Render-Funktion der Komponente erneut aufgerufen.

Hier wird erklärt, wie die To-do-App aufgebaut sein wird. Dem Video liegt eine Projektdatei bei, die den fertigen Code zu diesem Tutorial-Abschnitt enthält.

Wenn eine Kind-Komponente der Eltern-Komponente etwas mitteilen will, geht das über ein Callback-Prop.

To-dos 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 mithilfe der Bibliothek Emotion funktioniert und wie man das Prop className damit verwenden kann. Außerdem wird noch auf das style-Attribut eingegangen, mit dem man jedes Element im Detail separat stylen kann.

Über ein Filtern des To-do-Arrays lassen sich die To-dos in zwei Gruppen aufteilen.

Natürlich muss man To-dos 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: To-dos lassen sich recht einfach im Browser-Speicher persistent speichern und natürlich auch wieder laden, sodass 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 To-do-App und letzte Verbesserungen.

Die Video-Player-App wird mit create vite erstellt und es wird erklärt, wie die App aufgebaut sein soll. Die dem Video beigefügte Projektdatei enthält den fertigen Code für den Video-Player.

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 den Stopp hat.

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

Die eigenen 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 mithilfe von Event-Handlern beim Video-Element.

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

Das Springen zu einer beliebigen Position im Video (Seek) lässt sich erstaunlich leicht mittels Setzens 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 To-do-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 das nächste und vorherige Video.

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

Jetzt speichern und laden wir noch unsere Playlist. Dies erfolgt analog zur To-do-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.

Aufwendige 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.

Ich fasse hier die Ergebnisse des Kurses zusammen und gebe Hinweise, was die Teilnehmer sich anschließend an den Kurs ansehen sollten.