ReactJS lernen

Mit React Router zur Single-Page Application (SPA)

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der React-Router macht das Zusammenstellen verschiedener Views zu einer Single-Page Application (SPA) zum Kinderspiel. Lernen Sie mit diesem Video, wie Sie das erreichen können, indem Sie Routen und Links anlegen.
08:32

Transkript

Um eine Web-Anwendung zu schreiben, die sich für den Nutzer möglichst wie eine Applikation auf dem Desktop anfühlt, eignet sich das Muster der single-page application. Es wird eine einzige HTML-Seite und bei Bedarf neuer Inhalt geladen, und per JavaScript entsprechend neu gerendert. Damit entfällt das Nachladen von weiteren HTML-Seiten. Dieses Prinzip lässt sich in React mit dem React Router umsetzen. Mit dieser Bibliothek lassen sich auf deklarative Art Routen konfigurieren, anhand derer die URL geparst wird und die entsprechende View geladen wird. In diesem Video erstellen wir einige Routen für die Product-Listing-App. Hier im Browser sehen wir den Zustand, den wir erreichen möchten. Wir möchten ein allgemeines Page-Layout haben, das auf jeder Seite gleich angezeigt wird. Das wäre in diesem Fall das div im oberen Bereich der Seite. Und wir möchten auch hier eine kleine Navigation anbieten, die uns zu unseren beiden Unterseiten führt, nämlich einerseits hier Welcome, Andreas, eine Begrüßungsseite, und andererseits die Seite, die zum Product Listing, also unserer Haupt-App führt. Nachdem wir auf einen dieser Links klicken, soll im unteren Bereich der Seite die entsprechende View geladen werden. Probieren wir einmal das Product Listing aus. Das ist das Product Listing. Wir können wie gewohnt Produkte hinzufügen und im unteren Bereich diese Produkte ansehen. Da wir gerade auf das Product Listing navigiert haben, haben sich zwei Dinge an unserer Seite geändert. Einerseits ist der Link Product Listing rot geworden. Das liegt daran, dass wir uns gerade auf dieser aktiven Seite befinden. Und andererseits hat sich die URL geändert. Das sehen wir in diesem Bereich hier hinter dem Hash. Wir befinden uns gerade auf /listing. Klicken wir einmal auf die Willkommensseite, ist jetzt dieser Link rot markiert. Und wir sehen die Willkommensseite, "Greetings!", "Hello, Andreas Geroe!". Und auch die URL hat sich wieder geändert. Wir sehen hinter dem Hash /greeting/Geroe/Andreas. Das heißt, wir müssen zwei Routen definieren, einmal /listing und einmal /greeting, wobei bei /greeting zusätzlich Parameter aus der URL gelesen werden sollen, nämlich einerseits der Familienname und andererseits der Vorname. Sehen wir uns an, was passiert, wenn wir versuchen auf eine Route zu gehen, die nicht definiert ist. Dann bekommen wir sogar eine Anzeige, dass die gewünschte Seite nicht gefunden werden konnte. Gehen wir wieder zurück auf die Begrüßungsseite. Sehen wir uns jetzt mal an, wie das Ganze im Code umgesetzt ist. Wir beginnen mit der index.js. Wir müssen zuerst einige Elemente aus dem Paket react-router importieren, nämlich hier Router, Route, und hashHistory. Und danach können wir auch direkt die Routendeklaration vornehmen. Das machen wir gleich hier in der render-Methode. Außen herum können wir noch den Provider schreiben für den Redux-store. Diesen Provider kann man aber auch gern weglassen, sofern man kein Redux verwendet. Die Routendeklaration läuft folgendermaßen. Zuerst beginnt man mit einem öffnenden Router-Tag. Und diesem Router 4ymuss man noch eine history mitgeben. Das ist in unserem Fall die hashHistory, die wir oben importiert haben. Und in dem Router können wir die Routen definieren. Unsere Routen sind folgendermaßen aufgebaut. Wir haben zuerst eine Route für den Pfad /. Und bei dieser Route verweisen wir auf Komponente MainLayout. Das heißt, wir definieren, dass wenn jemand auf den Pfad / geht, die Komponente MainLayout für das Rendern dieses Pfads verantwortlich ist. Sehen wir uns mal MainLayout an. MainLayout ist eine einfache zustandslose funktionale Komponente, die props entgegennimmt. Und gerendert wird sie in zwei Teilen. Einerseits haben wir ein div für den oberen Bereich, und andererseits ein div für den unteren Bereich. Der obere Bereich ist in unserem Beispiel der Bereich, der auf jeder Seite konstant bleibt. Das heißt, wir haben oben die Überschrift mit "main page layout", mit der Navigation. und danach die Links, um auf die beiden Seiten zu kommen. Für diese beiden Links verwenden wir nicht einfach ein normales a-Element aus HTML, sondern wir verwenden die Komponente Link aus dem Paket react-router. Diese Komponente übernimmt für uns das Aufbauen der URL korrekt. Und gleichzeitig können wir der Komponente einen LinkStyle mitgeben. Beziehungsweise in LinkStyle haben wir ein Prop activeStyle. Und hier definieren wir, dass der aktuell ausgewählt Link in roter Schrift angezeigt werden soll. Im Inneren des Links können wir den Anzeigetext spezifizieren. Ein bisschen spannender wird es im unteren Bereich der Seite, nämlich im dynamischen Bereich. Hier sollen unsere Views hineingerendert werden. Aber auch hier müssen wir nicht sehr viel machen. Wir müssen einfach nur angeben, dass wir innerhalb dieses div props.children hineinrendern wollen. Und wenn diese nicht definiert sind, zeigen wir einfach den Text "Please select a sub-page". Und schon haben wir unser Seiten-Layout fertig geschrieben. Wenn wir also nochmal in index.js schauen und die Routenkonfiguration betrachten, sehen wir, wir haben eine Route angelegt auf dem Pfad /. Wir haben auf diesen Pfad die Komponente MainLayout gemappt. Und jetzt konfigurieren wir innerhalb dieser Route weitere Unterrouten. Nämlich einerseits /listing. Auf diesem Pfad legen wir die ReduxApp, also unser Product Listing. Und andererseits den Pfad /greeting/:lastname/:firstname. Hier haben wir eine kleine Besonderheit, da nämlich lastname und firstname mit einem vorangehenden Doppelpunkt geschrieben sind. Das heißt, wenn der Router den Pfad ausliest und bemerkt, dass der Pfad mit /greeting beginnt, wird er die folgenden beiden Strings, getrennt durch einen Slash, als Variablen erkennen, und in unserer Komponente, hier also die GreetingPage, in den Props verfügbar machen. Damit können wir auch kurz in GreetingPage hineinsehen. Und wir sehen, wir haben es hier mit einer sehr einfachen funktionalen Komponente zu tun. Sie hat nur eine Überschrift, die ist statisch, "Greetings!". Und im Anzeigetext sehen wir, dass wir auf diese beiden Variablen, die aus der URL ausgelesen werden, über props.params zugreifen können. Hier props.params.firstname und props.params.lastname. Das sind genau die beiden Bezeichner, die wir hier in der Route gewählt haben, lastname und firstname. Schließlich haben wir noch eine MissingPage. Die ist auch ganz einfach gestaltet. Sie ist nämlich statisch. Aber die hat einen besondere Pfad, nämlich *. Das heißt, wir sagen dem Router einfach: Immer wenn du einen Pfad findest, der nicht auf die bereits definierten Pfade matcht, dann zeige die MissingPage an. Ein wichtiger Punkt ist hier noch zu nennen, um das Gesamtsystem zu verstehen. Wenn Sie sich erinnern, haben wir gesehen, dass im MainLayout der untere Bereich, der die Unterseiten anzeigen soll, über props.children gerendert wird, und dass props.children im MainLayout den richtigen Wert enthält. Das ist eine Aufgabe, die der React Router übernimmt. Nämlich dadurch dass wir diese Unterrouten innerhalb der übergeordneten Route / definiert haben, weiß React Router: Jedes Mal, wenn eine solche Unterroute aufgerufen wird, beziehungsweise /listing, darf die entsprechende Komponente, also in diesem Fall ReduxApp, nicht direkt auf die Seite gerendert werden, sondern muss für die übergeordnete Komponente, in diesem Fall MainLayout, über props.children zugänglich gemacht werden. Das heißt also, wenn wir /listing aufrufen, wird zuerst MainLayout gerendert und im MainLayout über props.children die ReduxApp. Sie haben erfahren, wie Sie den React Router einsetzen können, um Routen in Ihrer single-page application zu definieren. Sie wissen nun, dass diese Routen parametrisierbar sind, und die Parameter in Props der anzuzeigenden Komponente gemappt werden.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!