Externe Bibliotheken für React

Viele Änderungen wie die Hook-API, Suspense und Verbesserungen in der Context-API haben in der letzten Zeit ihren Weg in React gefunden, weitere Verbesserungen wie Concurrent Rendering stehen in den Startlöchern. Doch nicht nur der Kern von React wird stetig weiterentwickelt, auch das Öko­system drumherum wächst. Dieser Artikel stellt im Zuge der Artikelserie über React [1, 2 und 3] zwei etablierte Bibliotheken vor und zeigt ihre Integration in eine Applikation: React Router (erlaubt die Naviga­tion innerhalb einer Single-­Page Application) und Material-UI (eine Komponentensammlung, die das Material Design von Google in Form von React-­Komponenten umsetzt). Sie kommen nicht nur in zahlreichen Applikationen zum Einsatz, sondern stehen auch exemplarisch für eine Vielzahl ähnlicher Bibliotheken, die eine Applikation entweder technisch oder in Form von Layoutverbesserungen aufwerten.

Die der Artikelserie zugrunde liegende Applikation ist ein Quiz, bei dem ein Benutzer Fragen erhält und aus einer Reihe von Antwortmöglichkeiten die passende auswählen muss. Nachdem er die Frage beantwortet hat, wird angezeigt, ob die Antwort richtig oder falsch war. Kurz darauf bekommt er die nächste Frage präsentiert. Sobald die letzte Frage beantwortet ist, erscheint eine Zusammenfassung. Auf dieser Basis kommt zunächst React Router zum Einsatz, um die einzelnen Quizfragen als unabhängige Ressourcen über URLs adressierbar zu machen.