Externe Bibliotheken für React: Material-UI und React Router einbinden

Inhaltsverzeichnis

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 sind geplant. Doch nicht nur der Kern von React wird stetig weiterentwickelt, auch das Ökosystem drumherum wächst.

Dieser Artikel stellt zwei etablierte Bibliotheken vor und zeigt ihre Integration in eine Applikation: React Router und Material-UI. React Router erlaubt die Navigation innerhalb einer Single-Page Application. Und Material-UI ist 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.

Alle Artikel der React-Reihe:

• Webentwicklung – Web-Frontends mit React
• Neue Schnittstelle: Die Hooks-API von React einsetzen
• React: State Management mit Redux
• React Router und Material-UI: Externe Bibliotheken für React

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

Das war die Leseprobe unseres heise-Plus-Artikels "Externe Bibliotheken für React: Material-UI und React Router einbinden". Mit einem heise-Plus-Abo können sie den ganzen Artikel lesen und anhören.