React lernen und verstehen – das Praxis-Tutorial

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.