React-Routing mit React-Router für eine nahtlose Navigation mit deinen Webanwendungen

1. Einführung in den Kurs: Hallo, da. Willkommen zu diesem Kurs über Mastering Outing mit React, und ich werde während des gesamten Kurses Ihr Lehrer sein Ich freue mich sehr, Sie durch diese wunderbare Reise mit dem React-Router zu führen , der die gute Lösung für Navigation in modernen React-Anwendungen darstellt Heutzutage ist Routing ein grundlegender Bestandteil aller Webanwendungen, ohne dass Benutzer zu verschiedenen Webseiten navigieren können. Als ob es unwahrscheinlich ist , dass Sie reale Anwendungen in Produktionsqualität erstellen könnten . Und hier kommt Routing ins Spiel. Und das ist auch der Grund, warum Sie heute etwas über Routing lernen sollten. Ohne ein solides Routing-System können sich jetzt selbst die besten Design-Apps unorganisiert und schwierig zu bedienen anfühlen Und genau das werden wir in diesem speziellen Kurs beherrschen also über diesen Kurs sprechen, werden wir eine Einführung geben. Wir werden eine Einführung in das React-Routing geben, was es ist und wie der React-Router funktioniert. Wir werden lernen und verstehen, wie wir Routen in unserer React-Anwendung einrichten können . Wir werden auch lernen, wie Sie eine Navigation hinzufügen können, wie Sie verschachtelte Routen erstellen können, und wir werden auch lernen, wie Sie eine 404-Seite erstellen können , bei der es sich um eine Art Nachricht an den Benutzer handelt, die Seite wurde nicht gefunden Das werden wir also tun. Und ja, mit diesem speziellen Kurs werden Sie sich absolut sicher sein, mehrseitige Anwendungen mit React zu erstellen, indem Sie die Routing-Funktionalität hinzufügen, und Sie werden in der Lage sein, eine mehrseitige Anwendungen mit React zu erstellen, indem Sie die Routing-Funktionalität hinzufügen, und Sie werden in der reibungslose Navigation zu gewährleisten Benutzern ein nahtloses Surferlebnis zu bieten. Nun, für wen ist dieser Kurs gedacht? Dieser Kurs ist also perfekt für React-Entwickler aller Niveaus, egal ob Sie gerade erst mit React anfangen oder ob Sie ein fortgeschrittener React-Entwickler sind. Dieser Kurs ist perfekt für Sie, denn in diesem speziellen Kurs habe ich die Dinge sehr benutzerfreundlich gestaltet. Also erkläre ich alles und jedes, sodass es für Sie wirklich ein Kinderspiel wird. Und wenn Sie ein fortgeschrittener Entwickler sind, ist dieser Kurs immer noch der beste, weil er, wissen Sie, eine gute Auffrischung der Routing-bezogenen Konzepte ist und Sie diesem speziellen Kurs vielleicht etwas Neues lernen Das ist es also. Und die Art und Weise, wie dieser Kurs konzipiert ist, ist absolut praxisnah. Ich stelle sicher, dass ich die meiste Zeit programmiere und Ihnen verschiedene Beispiele zeige , anstatt PowerPoint-Präsentationen zu verwenden. Das ist also das Alleinstellungsmerkmal dieses Kurses. Bist du jetzt bereit, deine Reaktionsfähigkeiten auf die nächste Stufe zu bringen deine Reaktionsfähigkeiten auf die nächste Stufe zu Lassen Sie uns eintauchen und gemeinsam dynamische, navigationsfreundliche Anwendungen entwickeln? 2. Erste Schritte mit der Einrichtung von React-Projekt: Hallo, da. Jetzt ist es an der Zeit, dass wir mit der Erstellung unserer React-Anwendung beginnen, und das werden wir mit Hilfe der Befehlszeile tun . Also als Erstes gehe ich zum Projektordner oder navigiere über die Befehlszeile zum Projektordner. Was ich mit Projektordner meine, ist es ein Ordner meiner Wahl ist, in dem ich meine React-Projekte organisieren möchte, okay? Sie können also zum Finder gehen. Wenn Sie zum Beispiel auf einem Mac sind, können Sie zum Finder wechseln, oder wenn Sie wie ich Windows verwenden, können Sie zum Explorer gehen und einen Ordner an einem Ort Ihrer Wahl erstellen Sie können den Ordner nennen , wie Sie möchten. Ich würde es React nennen. Und dann können Sie von der Befehlszeile aus einfach zu dem Ort navigieren, können Sie von der Befehlszeile aus einfach zu dem Ort navigieren an dem Sie den Ordner erstellt haben. Also habe ich diesen React-Ordner hier an diesem bestimmten Ort erstellt , und CD ist der Befehl, das heißt Verzeichnis ändern, und er hilft mir, zu diesem bestimmten Ordner zu navigieren oder zu diesem bestimmten Ordner oder von der Befehlszeile aus in diesem Ordner zu sein. Jetzt bin ich in diesem speziellen Ordner, ich werde alles andere löschen. Ordnung. Jetzt werde ich in diesem speziellen Ordner mit der Erstellung meiner React-Anwendung beginnen. Und dafür werde ich NPX verwenden, okay? Ups. Ich habe also schon einige React-Anwendungen erstellt Sie können diesen Vorschlag also hier sehen, okay, aber ich kann nichts gegen den Vorschlag tun. Okay? Ignoriere diesen Vorschlag vorerst, denn was dieses spezielle Terminal tut, ist, was auch immer es in deiner Geschichte sieht, es schlägt dich immer wieder vor, was gut ist. Ihnen den gesamten Befehl zu zeigen, das ist völlig in Ordnung. Also NPX Ich werde NPX benutzen, okay? Nun, die Syntax von NPX stimmt. Es wird verwendet, um die Knotenpakete auszuführen, oder es wird verwendet, um die Pakete auszuführen Und dann werden wir die Create React App verwenden. Ordnung. Was ist nun die Create React-App. Create React App ist ein Tool , mit dem Sie die gesamte React-Anwendung erstellen können. Nun, warum machen wir uns das zunutze? Weil das React-Projekt auf eine bestimmte Art organisiert sein muss, braucht es den SRC-Ordner, es muss einige Dateien haben und all das muss zusammenkommen und sie ermöglichen es Ihnen oder sie ermöglichen es Ihrer Anwendung, reibungslos zu funktionieren, oder sie ermöglichen es Ihrer Anwendung, reibungslos zu funktionieren, oder? Sie können diese Dateien also auch manuell erstellen, aber mit diesem Tool können Sie die erstellen oder Anwendungsstruktur auf die richtige Weise erstellen oder einrichten. Okay? Und danach nenne ich einfach meinen Anwendungsnamen, damit ich sie MyRact App nennen kann, ungefähr so Okay? Und was ich tun kann, ist einfach Enter zu drücken. Sobald ich die Eingabetaste drücke, wird dadurch ein Ordner an diesem bestimmten Ort erstellt. An diesem bestimmten Ort wird also dieser Ordner erstellt. Warum wird an diesem Ort ein Ordner erstellt? Weil ich vom Terminal aus zu diesem Ordner navigiert habe und dies der Ordnername sein wird, unter dem alle Dateien meines React-Projekts existieren werden Okay? Sie können also die Eingabetaste drücken und Sie sollten sehen, dass irgendeine Art von Verarbeitung stattfindet. Sie können also sehen, wie an diesem bestimmten Ort eine neue React-App erstellt wird. Es werden einige Pakete installiert, und das kann ein paar Minuten dauern. Es installiert es also sagt dir auch, was es installiert. Es installiert React, React Dom, React-Skripte und alles, was es braucht. Wir werden also eine Weile warten, bis gesamte Vorgang abgeschlossen ist und wir eine Bestätigung sehen. Ich habe also die Bestätigung erhalten, und ich habe auch eine kleine Nachricht erhalten. Okay. Als ich anfing, dieses Video aufzunehmen, gab es eine neue Nebenversion, da steht, dass NPM verfügbar ist, und sie fragt mich, ob ich ein Upgrade durchführen kann Okay, ich werde später upgraden. Du wirst das vielleicht nicht sehen, okay, aber ja, ich werde es vorerst einfach ignorieren. Es ist nur eine Upgrade-Benachrichtigung. Sie können die Bestätigung hier sehen, viel Spaß beim Hacken. In Ordnung. Und wenn du hier nach oben scrollst, siehst du den gesamten Prozess dessen, was passiert ist. Also haben wir diesen Befehl hier ausgeführt. Ups. Lass mich nach oben scrollen. Also haben wir diesen Befehl hier ausgeführt. Okay? Wenn du herkommst, kannst du sehen, dass es so viele Pakete hinzugefügt hat. Es dauerte 36 Sekunden. Wenn Sie hierher kommen, okay, es heißt, dass diese spezielle Anwendung erfolgreich an diesem Ort und in diesem Verzeichnis erstellt wurde diese spezielle Anwendung erfolgreich an . Sie müssen also zu diesem Verzeichnis navigieren, und darin können Sie all diese Befehle hier ausführen . Okay? Sobald Sie navigiert haben, stehen Ihnen vorgefertigte Befehle wie NPM Start Es wird auf dem Entwicklungsserver gestartet. Die von Ihnen erstellte React-Anwendung verfügt also über einen eingebetteten Inbilt-Server. Sie können diesen Befehl ausführen, um die Anwendung zu bündeln und in statische Dateien zu speichern, hauptsächlich für die Produktionsbereitstellung. Dadurch wird der Test-Runner gestartet, falls Sie Testfälle ausführen möchten , NPM run Okay, das ist etwas, das Sie ausführen können. Der Vorschlag ist also, Sie damit beginnen können dies hier auszuführen. Ich kopiere das. Okay? Ich füge es hier ein. Ich gehe in dieses Verzeichnis, okay, und dann sagt es dir NPM Start Nun, das ist ein Befehl, mit dem Sie einen Entwicklungsserver auf Ihrem lokalen Computer starten können einen Entwicklungsserver auf Ihrem lokalen Computer starten Also kann ich diesen Befehl auch ausführen, okay? Und Sie konnten sehen, wie die Anwendung lief. Das ist also die Anwendung, okay? Sie können sehen, dass der Browser automatisch geöffnet wird, und Sie können sehen, dass dies und Sie können sehen, dass dies die Anwendung ist, die läuft. Nun, das ist ein Server , der Ihnen Ihre Inhalte anzeigt oder ob er Ihre React-Anwendung im Browser ausführt. Jetzt werden Sie bei jeder Änderung, die Sie an den Dateien vornehmen, Live-Reloads hier sehen. Alles klar? Nun können Sie die Nachricht hier sehen, als ob Sie diese bestimmte Datei bearbeiten und speichern müssen , um sie erneut zu laden Okay? Also, diese Schnittstelle kommt aus dieser speziellen Datei, so steht es da. Und wenn Sie hier klicken, ist dies der Link zur offiziellen Website von React. Darauf hat es verlinkt. Okay? Also kannst du auf diese Website gehen und dir auch ein paar Sachen ansehen oder lesen. In Ordnung. Aber ein paar Dinge, die ich hier erwähnen möchte, sind Sobald Sie den Entwicklungsserver gestartet haben, können Sie ihn beenden, indem Sie unter Windows auf Strg und C oder auf Mac auf Befehl und C drücken . Okay? Ich verwende Windows, also drücke ich Strg C und Sie können sehen, dass dieser spezielle Job beendet wurde. Und jetzt kommen Sie, wenn Sie versuchen zu aktualisieren, das wird nicht funktionieren. Okay, weil der Server ausgefallen ist, oder? Nun, um Ihren Server zum Laufen zu bringen, müssen Sie NBM Start in diesem speziellen Ordner ausführen Okay? Erst dann ist dein Server betriebsbereit. Während der Entwicklung können Sie also den Server eingeschaltet lassen und die Dateien tatsächlich ändern und die Änderungen speichern und live verfolgen. Okay? Jetzt werde ich etwas mehr über diesen Befehl sprechen. Also haben wir die React-App oder die gesamte Anwendung mit diesem speziellen Befehl erstellt . Jetzt können Sie hier am Ende auch Optionen hinzufügen. Okay? Was Sie also tun können ist, hier Vorlagen zu verwenden. Okay? Nehmen wir an, wenn Sie mit React arbeiten, möchten Sie auch Typoskript verwenden Okay? Also, wenn Sie Typoskript verwenden, können Sie so etwas hinzufügen Sie können hier Vorlage sagen und Sie können Typoskript sagen Ich werde das nicht ausführen, aber das ist nur eine zusätzliche Information. Dadurch wird die Typoskript-Vorlage verwendet , um Ihre Anwendung zu erstellen, und die Typoskript-Unterstützung wird von Anfang an hinzugefügt. Dies ist hilfreich , wenn Sie an einem größeren Projekt arbeiten, das von einer strengen Typprüfung wird von Anfang an hinzugefügt. Dies ist hilfreich , wenn Sie an einem größeren Projekt arbeiten profitieren kann profitieren In Ordnung. Also können Sie diesen Befehl auf diese Weise verwenden , in Ordnung. Ich hoffe, dieser Befehl ist klar. NPX Create React Tap. Wir haben den Server also nicht betriebsbereit, aber Sie können den Server jetzt erneut starten, indem Sie NPM run NPM start sagen . Es tut mir leid Es ist also NPM-Start, so etwas in der Art. Und wenn Sie es starten, wird der Server erneut gestartet. Alles klar? Also ich hoffe, das ist nützlich und ich hoffe, Sie konnten mitmachen 3. IDE-Setup mit Visual Studio-Code: Dies ist unsere erste reaktionsbasierte Anwendung, die wir erstellt haben, oder ich sollte sagen, wir haben sie nicht erstellt. Okay. Das ist also ein automatisch generiertes Projekt mit der Create React-App. Okay, und es gibt uns hier auch einen Hinweis. Sie können App Dot Qs bearbeiten und sicher neu laden. Okay? Es gibt einen Link zum Lernen von React , der Sie zur offiziellen Website von React führt. In Ordnung, so weit, so gut. Also das ist unsere Anwendung die läuft. Also, was müssen wir tun? Wir müssen anfangen, Dinge zu programmieren und zu modifizieren. Und was werden wir dafür tun? Wir werden eine IDE installieren, das ist der ID Visual Studio-Code. Okay. Also so sieht es aus. Wenn Sie es schon auf dem Computer haben, gut und gut, wenn Sie es nicht haben, dann besuchen Sie diese offizielle Website. Es ist ein kostenloses Tool, es ist kostenlos, basiert auf Open Source und läuft überall. Da ich Windows verwende , werde ich aufgefordert , eine für Windows erstellte Version herunterzuladen Sie können zu dem Betriebssystem wechseln, das Sie benötigen. Aber wenn Ihr Betriebssystem hier ein Installationsprogramm hat, wird es automatisch Wenn Sie sich also hier von einem Mac aus anmelden, wird Ihnen der Download vom Mac angezeigt. Okay? Also, von welcher Plattform aus Sie das öffnen, es wird Ihnen diese Schaltfläche zeigen und Sie können das durchgehen wenn Sie nicht wissen, was Visual Studio-Code ist Aber laden Sie es einfach herunter und installieren Sie es wie jedes andere Softwareprogramm Ich habe es bereits installiert, daher werde ich Ihnen die Installationsschritte nicht zeigen, aber die Installationsschritte sind überhaupt nicht komplex. Es ist sehr einfach und unkompliziert. 4. Die ersten Schritte unserer Reise: Sobald Sie Visual Studio-Code erfolgreich installiert haben , Ihnen eine Seite wie diese angezeigt. Wenn Sie also Visual Studio-Code zum ersten Mal öffnen , wird diese Willkommensseite angezeigt. Nun, ich bin schon eine Weile ein Visual Studio-Code-Benutzer, okay? Und Sie sehen all diese aktuellen Projekte. Es ist also wahrscheinlich, dass Sie die Liste der letzten Projekte erst sehen , wenn Sie ein Benutzer sind. Aber da ich ein Benutzer bin, sehe ich, wie gesagt, die Liste der letzten Projekte, die ich in der Vergangenheit verwendet oder erstellt habe. Außerdem werden Sie diese Optionen hier sehen: Neue Datei, Datei öffnen, Ordner öffnen, Git-Repository klonen, Verbindung zu all dem herstellen. Es ist ein sehr nützliches Tool. Visual Studio-Code, ich benutze ihn ständig. Um nun das Projekt zu öffnen, kennen Sie den Ordner, in dem Sie das Projekt erstellt haben. Sie können also einfach hier auf Ordner öffnen klicken und zu dem Ordner navigieren , in dem Sie das Projekt erstellt haben. Wenn Sie dies aus irgendeinem Grund nicht sehen, können Sie alternativ Sie dies aus irgendeinem Grund nicht sehen, in den Menüoptionen hier zur Datei wechseln und Ordner öffnen sagen. Beide sind gleich. Also wähle ich Ordner öffnen, navigiere zu dem Verzeichnis meiner Wahl und öffne das Projekt hier. Als ich jetzt Ordner öffnen auswählte, sah ich dieses Ordnerfenster, das heißt, ich navigiere es zu dem Ordner, in dem ich die React-App erstellt habe Und ich wähle diesen speziellen Ordner aus. Dies ist mein React-App-Projekt , das wir erstellt haben. Darin werden Sie einige Dateien sehen, aber Sie müssen den Stammordner auswählen. Ich sage auswählen und es öffnet diesen speziellen Ordner für mich. Jetzt kann ich diese Willkommensseite hier schließen. Okay? Also kannst du das Projekt hier auf der linken Seite sehen, okay? Sie können den gesamten Ordner sehen. Wenn Sie diesen Bereich erweitern, werden Sie die darin enthaltenen Dateien sehen. Okay? Also, als du den Befehl Create React App ausgeführt hast, okay mit Create React App, hat er all das für dich erstellt. Okay? Sie können es auch manuell erstellen. Aber wie Sie sich vorstellen können, wird das sehr mühsam sein, oder Dieses spezielle Tool, Create React App, erledigt die Arbeit für Sie, wobei es die gesamte Projektstruktur für Sie einrichtet Okay? Wir werden diese Projektstruktur bald durchgehen, aber im Moment möchte ich auch erklären, dass wir den Server vom Terminal aus betriebsbereit haben . Was ich jetzt tun kann, ist dass ich kein externes Terminal verwenden muss. Visual Studio-Code bietet eine Möglichkeit, tatsächlich ein Terminal innerhalb von Visual Studio-Code zu haben. Auf diese Weise muss ich Visual Studio-Code nie verlassen und zu einem lokalen Terminal wechseln. Hier oben in den Optionen werde ich das Terminal hier sehen. Sie können neues Terminal sagen, und Sie können sehen, dass dies ein integriertes Terminal im Visual Studio-Code ist . Und wenn Sie PWD sagen, was das aktuelle Arbeitsverzeichnis ist, wird das Terminal automatisch in dem Ordner geöffnet , den Sie im Visual Studio-Code geöffnet haben , dem Projektordner Sie müssen also nicht auch navigieren, Sie müssen nicht den Befehl, die CD und alles ausführen und navigieren, das funktioniert einfach wie ein lokales Terminal Also hier kann ich sagen, dass NPM hier drüben anfängt. Sobald ich sage, dass ich eine Fehlermeldung erhalte, können Sie sehen, dass auf Port 3.000 bereits etwas läuft Und was läuft, unsere Anwendung selbst läuft und sie fragt uns, ob Sie die App stattdessen auf einem anderen Port ausführen möchten . Das möchte ich nicht tun. Ich werde nein sagen. Okay, und es wird einfach die Hinrichtung beenden. Okay? Aber ich werde diesen Server schließen, weil ich kein externes, du weißt schon, externes Terminal hier drüben mehr benutzen will. Okay? Ich möchte mich an das vom Visual Studio Code bereitgestellte Terminal halten, und ich sage Pinstart, und das sollte jetzt den Entwicklungsserver für Sie ausführen. Okay? Also auf diese Weise können wir das in ein neues Fenster verschieben. Also hier sind wir in dem neuen Fenster, und ich habe Visual Studio-Code in dem neuen Fenster ausgeführt. Auf diese Weise muss ich Visual Studio-Code niemals verlassen. Ich kann das hier sogar so minimieren. Okay? Ich kann von hier aus sogar ein neues Terminal erstellen, sodass Sie Plus sehen können, und Sie können mehrere Terminals hier laufen lassen. Okay? Es ist sehr nützlich, und das ist der Grund dafür. Diese Art von Tools, die Visual Studio Code bietet , ist der Grund, warum er in der Entwickler-Community so beliebt ist . Jetzt zeige ich Ihnen auch die Liste der Erweiterungen , die ich habe. Also hier, wenn du zu diesem Erweiterungs-Tab auf der linken Seite gehst , hast du hier einige Optionen wie Suchen, Quellcodeverwaltung, Ausführen und Debuggen, all das, okay? Ich verwende Docker auch in einigen meiner Projekte, sodass Sie Docker auch hier sehen können Aber vielleicht siehst du das nicht. Okay? Das braucht eine separate Erweiterung, okay? Aber wenn du zur Verlängerung gehst. Was sind nun Erweiterungen? Mit Erweiterungen können Sie also die Standardfunktionen, die Visual Studio-Code bereits bietet, verbessern oder erweitern Standardfunktionen, die . Sie können also sehen, dass ich eine Erweiterung für Jupiter-Notebook habe. Okay. Immer wenn ich in Python codiere und Notebook-Unterstützung benötige, verwende ich diese Erweiterung. Okay. Also habe ich diese Erweiterung. Dies wird für React nicht benötigt. Ich habe eine Python-Erweiterung. Okay? Nun, dieses automatische Umbenennungs-Tag könnte für React hilfreich sein, weil , weißt du, wenn du ein Tag umbenennst , okay, und wenn es ein schließendes Tag gibt , okay, und wenn es ein schließendes Tag gibt , wird dadurch die kostenpflichtige Version dieses bestimmten Tags umbenannt die kostenpflichtige Version dieses bestimmten Tags Okay, das ist also etwas , das du haben kannst. Es ist hilfreich. Wenn ich Ihnen zum Beispiel ein Beispiel geben muss, lassen Sie mich Ihnen ein Beispiel geben. Sagen wir also, ob ich hier eine Datei erstelle oder öffnen lasse. Okay, lass mich eine HTML-Datei öffnen. Nun, dieses Ding hier drüben, du kannst sehen, lass mich rüber gehen, nach unten scrollen. Dieser Titel hat also ein öffnendes und ein schließendes Tag. also das öffnende Tag umbenenne, können Sie aufgrund dieser speziellen Erweiterung Wenn ich also das öffnende Tag umbenenne, können Sie aufgrund dieser speziellen Erweiterung sehen, dass auch das schließende Tag umbenannt wird. Okay? Das ist also der Vorteil dieses automatisch umbenannten Tags. Sie müssen nicht zuerst das öffnende Tag und dann das schließende Tag umbenennen, oder? Paarfärbung, Die Paarfärbung, wie Sie am Symbol selbst erkennen können, ist daran gewöhnt, das schließende Paar der Klammer farblich hervorzuheben Das ist nützlich, wenn Sie in Ihrem Okay, Debugger für Java, Dev-Container, Jango Doco, all das verwende ich für andere Sprachen, Erweiterungspaket für Java, Gradle für Java, Kursiv, viele Klammern Debugger für Java, Dev-Container, Jango Doco, all das verwende ich für andere Sprachen, verwenden Erweiterungspaket für Java, Gradle für Java, Kursiv, Gradle Okay? Das ist für KI-gestützte Entwicklung. Dies gilt auch für die Verwendung der Intelicode-API. Okay. Ich habe welche für Python. Das sind also alles Python-bezogen. Ich scrolle nach unten, ein Live-Server. Wir brauchen diesen Maven nicht für Java. Das wird auch nicht benötigt. Prettier ist etwas , das du benutzen kannst. Dadurch wird der Code formatiert. Okay. Ich organisiere den Code für dich Okay. Und ja, das haben wir, okay. Ich werde jetzt auch einige Erweiterungen hier hinzufügen. Okay? Also was Sie tun können, ist, hier nach React-Codefragmenten zu suchen, etwa so Okay. Okay, du kannst also nach ES 7 und React suchen, etwa so. Und Sie werden diese Erweiterung mit fast Millionen von Installationen sehen . Das sind also 12,9 Millionen, während ich dieses Video aufnehme. Natürlich wird das weiter zunehmen und Sie vielleicht eine andere Zahl sehen, wenn Sie sich das ansehen Das ist also eine Verlängerung. Das ist der Name ES Seven plus React Redux React Native Also, das gibt dir Vorlagen, okay? Zum Beispiel, wenn Sie eine Funktion erstellen möchten, also können Sie RAFC sagen Sie können das einfach eingeben und Sie erhalten die gesamte Funktionsdefinition für Okay. Also diese Art von Abkürzungen hat es, die dir helfen, Zeit zu sparen. Also kannst du das installieren. Ich klicke einfach auf Installieren und füge es zu meiner Liste der Erweiterungen hinzu. Okay? Also ja, wir haben es jetzt installiert, okay? Sie können hier weitere React-Plugins oder -Erweiterungen auf dem Marktplatz entdecken -Erweiterungen auf dem Marktplatz und damit herumspielen. Und Sie können die Standardfunktionen erweitern , die Ihnen Visual Studio-Code bereits bietet. Ordnung. Also ja , hier geht es darum, Visual Studio-Code einzurichten, und ich hoffe, Sie fanden ihn nützlich. 5. Navigation im Web: Eine Einführung in React-Routing: Heute nicht, es ist sehr üblich Anwendungen über Navigationen verfügen, oder? Sie könnten zum Beispiel eine Anwendung erstellen, die eine Produktseite, eine Seite, auf der die gesamte Kategorie angezeigt wird, eine Startseite auf der Info-Seite, eine Teamseite usw. hat, richtig? Es gibt also eine Navigation und Sie müssen zu verschiedenen URLs navigieren, um zu sehen, was sich auf dieser bestimmten Seite befindet . Und das ist sehr verbreitet. Selbst heute, wenn Sie eine einfache Website wie Ihr eigenes Portfolio erstellen, wird sie Dinge wie Fähigkeiten enthalten, wie Sie Sie kontaktieren können. Und wenn Sie einen Blog haben, können Sie Blog-URL auf Ihrer Domain aufrufen und sich alle Artikel ansehen Okay? Also das ist ziemlich üblich. Und wenn es darum geht, einseitige Anwendungen zu erstellen, benötigen Sie eine hervorragende Benutzererfahrung bei der Sie in der Lage sein sollten, zwischen verschiedenen Seiten oder sogar Komponenten zu navigieren zwischen verschiedenen Seiten oder , ohne die gesamte Seite neu laden Und hier kommt das Routing ins Spiel. Routing ist also eine Sache, die die Navigation zwischen verschiedenen Seiten oder Komponenten ermöglicht , ohne sie neu zu laden. Okay? Die Benutzererfahrung ist also wirklich gut, und es gibt eine Bibliothek , die dies erleichtert. Es wird als React Router bezeichnet. Es ist eine Standardbibliothek, die für das Routing in React-Anwendungen verwendet wird. Okay? Nun, warum ist Routing erforderlich? Natürlich gibt es ein paar Punkte und ich habe hier einige aufgelistet. Der Punkt Nummer eins ist zum Beispiel die Benutzererfahrung. Routing verbessert also die Benutzererfahrung, indem es eine reibungslose Navigation zwischen verschiedenen Teilen Ihrer Anwendung ermöglicht, ohne die gesamte Seite neu laden Das ist wichtig, okay? Trennung der Komponenten. Da Routing also möglich ist, hilft es bei der Trennung von Problemen. So wird Ihr Code modularer und pflegeleichter. Was ich hier meine, ist zum Beispiel, wenn Sie eine Navbar anzeigen möchten, einige Inhalte dazwischen, wie zum Beispiel die Info-Seite, und unten möchten Sie eine Fußzeile anzeigen Sie können drei Komponenten erstellen. Sie können die Navigationsleiste und die Fußzeile konsistent halten und dann die Komponente je nach URL zwischendurch neu laden je nach URL zwischendurch Die Komponente ist also getrennt. Wenn dies nicht möglich ist, müssen Sie in diesem Fall alles in einer einzigen Datei erstellen, müssen Sie in diesem Fall alles in einer einzigen Datei erstellen damit es zusammen gerendert Da Routing jedoch möglich ist, können Sie es trennen Und das werden Sie lernen wenn Sie tatsächlich anfangen, Routing in Ihren Anwendungen zu verwenden oder durchzuführen. URL-Verwaltung. Routing ermöglicht nun die Verwendung von URLs, um zu verschiedenen Komponenten zu navigieren. Dies hilft dabei , bestimmte Ansichten mit Personen in Ihrer Umgebung zu teilen , oder Sie können diese URLs sogar mit einem Lesezeichen versehen All dies ist also aufgrund des Routings möglich. Routing ist also in der Tat wichtig für die Erstellung moderner Webanwendungen. Routing ist jetzt mit Hilfe des React-Routers möglich. Okay. Also werden wir dieses Paket zu unserer Anwendung hinzufügen, okay? Also habe ich eine neue Anwendung erstellt und du gehst zum Terminal. Okay. Ich werde umschalten. Ich sage CD-Routing. Okay. Also das ist meine Bewerbung. Okay? Ich bin also im eigentlichen App-Stammordner. Okay. Ich sage NPM install, React Router, Tom, so etwas Okay? Also das ist etwas, das ich zu meiner Bewerbung hinzufügen werde und Sie werden sehen, wie etwas verarbeitet und installiert wird. Und dann kannst du zu Paket Punkt JASN kommen und du wirst sehen, wie React auf Tom hier hinzugefügt wird. Okay? Also ja, das werden wir verwenden und wir sind mit dem Setup fertig. Okay? Ich hoffe, Sie sind sich darüber im Klaren, was Routing ist und welche Abhängigkeiten Sie zu Ihrem Projekt hinzufügen müssen. 6. Pfad einrichten: Routen in React einrichten: Jetzt werden wir also drei URLs erstellen tatsächlich drei URLs erstellen und verschiedene Komponenten rendern, wenn auf diese URLs zugegriffen wird . Okay? Wir benötigen also drei Komponenten wie Home About und Contact, und diese drei Komponenten werden auf der Grundlage der URL gerendert. Also wird Slash Home rendern, Slash A wird about rendern. Und wenn Sie dann zu Slash Contact gehen , werden Sie Kontakt Okay? Also das Erste, was wir brauchen, ist , dass diese drei Komponenten vorhanden sind. Okay? Also gehe ich zu unserer Anwendungsstruktur und fange an, diese drei Dateien hinzuzufügen. Ich sage Home Dot JSX hier drüben, und ich kann Funktion sagen. Oops, Funktion. Und ich sage etwas über die Home-Komponente oder lasse mich zuerst die Home-Komponente erstellen. Okay? Wir brauchen keinerlei Parameter, und das wird hierher zurückkehren, H zwei nach Hause. Okay. Ich werde die Dinge einfach halten. Ich gebe nur ein Wort aus jeder der Komponenten zurück . Das ist also Zuhause. Ich werde über JSX sprechen, und hier drüben werde ich über etwas sprechen, das ich hier vergessen habe, ich habe vergessen zu exportieren Ich werde Standard exportieren sagen. Zuhause, L. Okay. Und hier drüben sage ich Export Standard. Ein L. Okay, Home about, und ich muss Home About und Kontakt hinzufügen. Okay, Kontakt oder ihr Geschlecht. Also muss ich Funktion sagen, ich muss Kontakt sagen. Okay. Und hier, kehre zurück. Ich sage zwei, Kontakt. Und ich sage Standard exportieren, Kontakt. Okay. Also habe ich jetzt drei Komponenten eingerichtet und bereit. Okay. Wir werden hier das Routing verwenden und Routen für verschiedene URLs einrichten. Also basierend auf der URL, okay, werden verschiedene Komponenten gerendert. So wird es funktionieren. Okay. Dafür müssen wir nun Import hinzufügen. Wir werden ein paar Dinge aus React Router Doom importieren aus React Router Doom , die wir zu unserer Anwendung hinzugefügt haben Ich werde das hier einfach zusammenklappen . Okay. Was werden wir brauchen? Okay? Also werde ich eine Import-Anweisung hinzufügen. Ich werde Import sagen. Ich sage Browser. Router, okay. Und als Router? Ups, als Router sage ich React-Router, Tom. Okay. Also aus irgendeinem Grund kommt der Bestellvorschlag nicht rein, aber das sollte in einem einzigen Code sein und ich sage reagieren. Route Tom. Oh, es ist endlich reingekommen. Ich weiß nicht, vielleicht irgendein Problem. Aber ja, das ist es. Okay. Also gebe ich zuerst den Browser-Router ein, okay? Und ich benötige auch Routen. Okay. Das alles ist in dieser speziellen Bibliothek vorhanden, die wir hinzugefügt haben. Ich sage Routen und ich sage Route hier. Ich meine so. Okay. Lassen Sie uns nun verstehen, was diese sind und warum wir diese drei Dinge in unserer Anwendung benötigen . Browser-Router ist also zuallererst eine Basiskomponente, die das Routing in unserer React-Anwendung ermöglicht. Es ist also eine Komponente , die die Adressleiste des Browsers überwacht. Wenn es sich bei der Adressleiste also um einen Schrägstrich handelt, handelt es sich um eine Basis-URL, dann wird die Startseite angezeigt Wenn es ein Schrägstrich ist, wird es ungefähr angezeigt. Wenn es Schrägstrich ist, wird die Kontaktseite hier angezeigt. Okay? Also kannst du dir das so vorstellen, als würde ein Manager dafür sorgen, dass dir das Richtige gezeigt wird, okay? Oder die URL ist mit den Komponenten synchron. es ist die Basiskomponente, Wie gesagt, es ist die Basiskomponente, die das Routing in unserer Anwendung ermöglicht. Okay? Das ist alles, woran du dich erinnern musst. Routen hier drüben, wir implementieren das mit diesem Namen Router. Wir erstellen hier einen Alias. Okay, wir sagen Browser-Router. Importieren Sie den Browser-Router als Router. Wir können das also als Router bezeichnen. Okay? Sie haben Routen. Jetzt ist es ein Container für alle Routenkomponenten der Apps. Okay? Und wir haben eine Route hier drüben. Die Route wird dazu dienen, einen bestimmten Pfad zu definieren oder einer bestimmten Komponente zuzuordnen. So wollen wir zum Beispiel den Schrägstrich About dem Punkt about hier, about component zuordnen Route wird uns hier also weiterhelfen. Okay? Nun, was wir hier tun können, ist, dass wir das im Grunde verwenden, und Sie werden in diesem Zusammenhang mehr Klarheit darüber haben , wie sie verwendet werden können. Okay? Danach können Sie auch versuchen, im Browser auf die URL zuzugreifen , und Sie werden feststellen , dass dies funktioniert. Okay? Also zuerst sage ich Router. Es ist eine Basiskomponente hier drüben, okay. Und Sie werden sehen, wie dieser Router benutzt wird. Okay. Dann werde ich hier Routen sagen. Okay. Und innere Route, ich werde Route sagen. Also muss ich für jede Route , die ich definieren muss, diese Route hinzufügen. Okay? Also das wird ein Selbstabschluss-Tag sein, o, und ich kann Pfad sagen. Es hat eine Pfadeigenschaft. Also sage ich bei Schrägstrich, du musst Element erwähnen Welches Element möchtest du also anzeigen? Okay? Auf Slash wollen wir Home anzeigen, oder? Also sage ich hier drüben, zu Hause. Okay, also füge ich so etwas hinzu, Home und so. Das ist eine Syntax, und ich muss natürlich Home importieren. Also drücke ich Control Space und das wird importiert. Oder wenn Sie auf einem Mac sind, können Sie Befehl und Leertaste drücken und das wird importiert. Okay? Die Eingabe ist notwendig Wenn Sie das jetzt speichern und zur Anwendung wechseln, werden Sie sehen, dass es gerendert wird Wenn ich das kommentiere, lass mich das kommentieren. Und wenn ich speichere und hierher komme, kannst du sehen, dass nichts gerendert wird. Ich hoffe, das macht Sinn. Wenn ich das kontrolliere, wird Save on Slash Home gerendert Macht Sinn. So definieren wir jetzt URLs. Wir sagen Schrägstrich und worum geht es beim nächsten Schrägstrich, oder Also werde ich über sagen. Okay. Und hier drüben muss ich etwas Ähnliches hinzufügen. Okay. Und stellen Sie sicher, dass etwas auch importiert wird. Wir werden das Gleiche für den Kontakt hier tun. Okay, hier drüben. Hier drüben muss ich Kontakt aufnehmen. Kontakt. Kontakt wird ebenfalls importiert. Und wenn du jetzt hierher kommst, heißt es Home Slash Contact Sie können sehen, wie der Kontakt gerendert wird, und so weiter, Sie sollten sehen, wie der Kontakt wiedergegeben wird Okay? Und wenn Sie zur Root-URL gehen, ist es Home. Okay? So können Sie diese Eingaben nutzen, die wir oben hinzugefügt haben. Okay? Diese Eingaben befinden sich ganz oben, um Routing zu nutzen und Routing grundsätzlich in unseren Single-Page-Anwendungen zu implementieren . Okay? Sie können oben auch eine Navigationsleiste hinzufügen, die Benutzer zu den Seiten navigieren können. Im Moment haben wir das nicht hinzugefügt. Ich habe gerade direkt gezeigt, wie die Komponente geladen wird, wenn Sie diese URL in den Browser eingeben . Okay? Aber ich hoffe, das ist klar und ich hoffe, es war wertvoll. 7. Nahtlose Übergänge: Navigation für eine reibungslose Benutzererfahrung: Wir haben eine Anwendung, in der Sie verschiedene Komponenten sehen können. Okay? Also, wenn ich zu etwa, okay, du wirst sehen, ob ich nach Hause komme, du wirst Zuhause hier sehen, und wenn ich Kontakt aufnehme, sehe ich Kontakt. Also werden verschiedene Komponenten über die URL geladen , die Sie eingeben Jetzt wird es Szenarien geben, in denen Sie eine Navigationsleiste hinzufügen möchten Natürlich ist das kein Szenario, aber es ist heutzutage Pflicht, sollte ich sagen. Heutzutage ist es Pflicht, dass Sie oben eine Navigationsleiste haben , in der der Benutzer klicken und navigieren kann. Niemand wird die URL in den Browser eingeben. Natürlich. Sie benötigen Schaltflächen, die die Navigation ermöglichen Hier können Sie in Ihrer Anwendung eine Navigationsleiste aktivieren , mit der Sie zwischen verschiedenen Seiten navigieren können . Also werde ich hier Links hinzufügen. Okay? Also hier, direkt unter dem Router , werde ich hier ein Navi hinzufügen. Okay. Und hier drücke ich die Eingabetaste und hier sage ich UL. Okay. Ich füge eine ungeordnete Liste hinzu und dann füge ich eine Liste wie diese hinzu. Okay? Nun, in einer Liste füge ich, okay, 1 Sekunde hinzu. Also werde ich das in einer einzigen Zeile aufnehmen. Okay? Also werde ich hier mehrere Listen haben, mehrere Listenelemente, okay? Und in jeder Liste werde ich zum Beispiel Home hinzufügen, hier wird es Home sein oder ich lasse mich Link hier hinzufügen, weil es navigieren sollte. Also werde ich hier Link sagen und du kannst sehen mir das den Link von React Router Doom zeigt React Router Doom gibt Ihnen auch diesen Link, über den Sie Navigationen zulassen können Sobald Sie Link aus React Router Doom auswählen, werden Sie sehen, dass der Link hier importiert wird Sie können sehen, dass dieser speziellen Importanweisung Tinte hinzugefügt wurde dieser speziellen Importanweisung Also hier werde ich den Text sagen , den ich anzeigen werde. Also hier ist es Zuhause, Dieses Zuhause. Und hier werde ich zwei sagen. Wohin soll dieser Link navigieren? Also werde ich sagen, ich werde Slash sagen. Das ist ein Link zu Slash, und ich kann ihn hier dreimal duplizieren. Es wird also darum gehen, und das wird Kontakt sein Das ist nur ein Text, den wir hier anzeigen. Es geht also darum, und das ist Kontakt. Ich werde Kontakt sagen. Ich werde das speichern. In dem Moment, in dem du das speicherst, wenn du herkommst, gibt es ein Problem. Ich weiß nicht, warum es nicht erfrischend ist. Lass mich auf der Konsole nachschauen, was stimmt nicht? Okay. Also lass mich das schließen. Okay. Und lass mich das nochmal machen. Lass mich sehen. Okay, es funktioniert gut. Wahrscheinlich hat das Nachladen etwas Zeit gedauert. Ich weiß nicht warum. Vielleicht ein Problem mit meinem System. Aber Sie können sehen, dass die Links jetzt hier sind. Okay? Es sieht nicht so schick aus, nein. Aber im Moment konzentrieren wir uns nur auf die Funktionalität. Okay, wir werden das bald hübsch machen. Also du kannst ungefähr sehen, du wirst zu ungefähr gehen. Sie können auf Contact Home klicken und auch die URL sehen. Die URL ändert sich ebenfalls. Sie können sehen, dass dies alles ohne Neuladen ist. Okay? Dies ist nur die Komponente, die neu geladen wird, oder Komponente, die geladen wird, je nachdem, auf welcher URL Sie sich befinden, und das ist das Konzept, die URL mit dem, was angezeigt werden soll, synchron zu halten URL mit dem, was angezeigt werden soll, synchron zu Okay? Also kannst du sehen, wie das gut funktioniert. Lassen Sie uns das nun ein wenig verschönern, wir können natürlich die Oberfläche, die Sie hier sehen, verbessern Und um die Benutzeroberfläche zu verbessern, können wir das verwenden, was wir sie nennen können Wir können Tailwind-CSS verwenden. Okay? Okay, jetzt, weißes Rückenwind-CSS, es ist einfach. Es ist klassenbasiert Sie müssen nur ein paar Hilfsklassen verwenden ein paar Hilfsklassen , die wir bekommen, und ein bisschen Konfiguration. Also komm rüber zu tailwindsss.com, suche nach Tailwind CSS und du wirst Klicken Sie auf Get Started. Gehen Sie zur Installation. Also hier ist die erste Sache die Installation. Okay. Aber zufällig, wenn sich das nicht öffnet, können Sie hier auf Installation klicken. Okay? Jetzt werden wir die Tailwind-CLI oder Tailwind verwenden und ich benötige auch Post-CSS zusammen mit Autoprefixa Post-CSS zusammen mit Autoprefixa Das ist also die Dokumentation dafür. Okay? Es wird empfohlen , alle drei hinzuzufügen. Also fange ich einfach an, diese Befehle hinzuzufügen. Okay, also ich lösche das und hier sehe ich Okay, 1 Sekunde, lass mich sehen, ob ich im Projektverzeichnis bin. Ich bin nicht im Projektverzeichnis, also kann ich Routing, React, ich sage Clear. Und hier werde ich das installieren. Okay? Also wird es eine Weile dauern, bis es installiert ist. Okay. In der Zwischenzeit werden wir herkommen. Wir werden diesen Befehl hier bekommen. Okay. Und ich nehme das und sage, am Ende füge ich hier den Bindestrich P hinzu. Okay. Und ich drücke die Eingabetaste und Sie werden sehen, dass zwei Dateien erstellt werden, nämlich Tailwind Config und Post CSS Config Okay? Wenn du jetzt herkommst, kannst du zwei Dateien sehen. Tailwind CSS und Post-CSS-Konfiguration. Jetzt müssen wir in der Tailwind-Konfiguration ein wenig Konfiguration hinzufügen, also müssen wir diesen Inhalt hinzufügen , der uns zur Verfügung gestellt wird Also füge ich das hier hinzu. Okay? Das bedeutet, dass unter SRC Rückenwind für HTML, JS und auch für SX gelten sollte Wir haben auch einige JSX-Dateien. Okay? Also sollte es dort gelten. Ich scrolle nach unten und du musst das in das Hauptpunkt-CSS einfügen. Ich scrolle nach oben. Okay? Also habe ich dieses Indexpunkt-CSS, das in das Hauptpunkt-CSS geladen wird. Sie können Indexpunkt-CSS sehen. Okay? Also habe ich diese Direktiven oder Anmerkungen zu den Rückenwind-Direktiven im Grunde in dieser CSS-Datei hinzugefügt Anmerkungen zu den Rückenwind-Direktiven im Grunde in dieser CSS-Datei Okay. Und das ist es. Ich denke, Rückenwind ist jetzt für uns da. Okay, wir können es gebrauchen. Also lasst uns anfangen , es zu nutzen. Okay. Ich habe hier auch Tailwind Italicens. Okay? Tailwind Wenn Sie auf dem Marktplatz für Erweiterungen suchen, werden Sie diesen Plug in Tailwind Italiscens sehen Es bietet also eine nette Autosuges-Funktion Autosuges-Funktion Und es ist sehr nützlich. Ich kann es nur empfehlen, wenn Sie mit Rückenwind arbeiten Okay? Also hier drüben, was wir tun müssen, ist im Grunde ich habe UI, tut mir leid, UL, ich habe NAV oben, ich werde hier ein TIF hinzufügen. Ich werde TIF sagen. Okay. Und ich sage hier drüben den Klassennamen. Okay. Ich werde ein paar Rückenwind-Kurse hinzufügen Ich werde hier also mindestens einen H-Bildschirm und einen Hintergrund von Grau Hundert angeben. Okay? Das ist erledigt. Und ich füge dieses Schließen danach hinzu, damit es geschlossen werden sollte. Wo sollte es geschlossen werden? Es sollte kurz vor der Route schließen. Okay. Ja, hier drüben. Okay. Also habe ich das hinzugefügt und jetzt müssen wir hier etwas CSS hinzufügen. Ich sage hier den Klassennamen. Ich sage BG. Ich behalte es bei blau, blau oder sagen wir 600. Das sieht anständig aus. Okay, du kannst sehen. Sie können auch die verschiedenen Blautöne vergleichen. Du kannst sehen. 600, 800 sind dunkler, also sage ich 600. Okay? 600 sieht gut aus und die Polsterung von vier ist hier drüben. Okay. Und ich wähle das aus und lass uns sehen, wie es aussieht. Okay. Das CSS wird also aus irgendeinem Grund nicht angewendet. Okay? Lass mich sehen, lass mich den Server neu starten. Lassen Sie uns sehen, ob der Neustart die Ursache dafür ist. Okay, jetzt ist es angewendet. Weil ich viele Konfigurationsänderungen, Änderungen und Abhängigkeiten vorgenommen habe , wurde es nicht angezeigt, aber jetzt wird es angezeigt , Sie können sehen, okay? Das ist anständig. Jetzt komme ich her. Ich habe etwas CSS hier drüben. Nun zu UL, ich sage, uups , ich sage Klasse, Klassenname und ich sage Klassenname von Flex und Justify Center Okay. Und wir können ein Leerzeichen von X haben und ich sage vielleicht sechs. Okay, sechs. Ich werde mir das ansehen. Lassen Sie uns sehen, wie das aussieht. Sie können sehen, wie es aussieht. Okay, es sieht anständig aus. Und jetzt müssen wir allen Link-Attributen im Grunde irgendeine Art von CSS oder irgendeine Art von Klassen hier hinzufügen im Grunde irgendeine Art von CSS oder irgendeine Art von . Also werde ich das auf eine neue Linie bringen. Ich füge einen Tab hinzu. Das ist auch in einer neuen Zeile, und ich werde hier den Klassennamen sagen. Okay. Wie lautet der Klassenname? Ich sage Text. Okay, weiß. Okay, ich brauche Weiß hier drüben. Der Text sollte weiß sein. Schwarz sieht nicht gut aus. Oh, der Text sollte okay sein, gelb. Und es gibt so viele gelbe Blätter, ich wähle 300 aus. Okay. Ich würde sagen, die Schrift ist mittelgroß. Nehmen wir die Schrift als Medium. Ich sage Übergang Okay. S hier drüben und ich sage Dauer von 300. Mal sehen, ob das ist. Lass uns sehen. Sie können sehen, wie das funktioniert. Okay. Kannst du sehen? Ein bisschen Wirkung. Was ich jetzt tun kann, ist, dass ich diese Klasse einfach für jeden Link kopiere, der existiert. Okay? Also kopiere ich das. Ich werde herkommen. Wir werden den Link einfach hier drüben ablegen. Okay. Ich tippe. Okay. Hoppla. okay. Also werde ich das einfach einrücken und das in eine neue Zeile bringen , okay? Tippe ein paar Mal. Okay. Und ja, tippe ein paar Mal und ich füge es ein. Okay. Also das sollte jetzt anständig aussehen. Sie können die Startseite in Kontakt sehen. Okay, es sieht zu groß aus, weil ich ein bisschen herangezoomt Okay? Sie können sehen. Das ist die tatsächliche Ansicht der Website Okay? Aber ich bin ein bisschen herangezoomt, sodass Sie leicht erkennen können, ob Sie kleinere Geräte Normalerweise wissen die Leute das zu schätzen. Okay. Aber ja, ich habe das im Grunde hinzugefügt, okay? Jetzt kann ich herkommen und ich kann die ganzen Strecken hier drüben durchfahren. Ich kann das bei TIF einpacken, so etwas steif, ich schneide das ab und füge es hier Okay. Also habe ich diese ganzen Routen zu diesem und diesem Steifen hinzugefügt, ich kann das als Klassenname, Container, okay, so etwas wie das nennen , und ich kann X Auto sagen Ups, Auto hier drüben und Pi-Padding fünf um acht. Okay. Und ja, das ist es. Was wir jetzt tun können, ist, uns auch einzelne Komponenten stylen zu lassen. Im Moment haben wir also nur die obere Navbar gestaltet. Okay? Lassen Sie uns einzelne Komponenten stylen. Also komme ich rüber. Ich fange hier drüben mit zu Hause an. Okay. Meist wird das Design für alle Komponenten ähnlich sein. Okay, also behalte das im Hinterkopf. Ich werde das loswerden. Zuallererst werde ich das tun, weil ich mehrere Codezeilen schreiben werde, und ich werde hier Tab sagen. Okay. Lass uns diesen Dev hinzufügen, ich füge H zwei hier hinzu. H zwei ist seine Homepage. Okay, so etwas in der Art, und ich sage P-Tag hier drüben. P-Tag ist willkommen auf der Startseite. Okay. Und ich kann sagen, erkunden, beschließen, mehr zu lernen, so etwas in der Art. Okay. Und jetzt gehe ich zu Dev und Div, ich sage Klassenname. Okay, ich sage Flex, Flex, Call, Column und ich sage Items Center. Okay. Also sollte ich das hinzufügen oder sollte es sein Lass uns das als Kolumne behalten. Artikel in der Mitte rechtfertigen in der Mitte. Etwas in der Art, und ich sage Mindest-H-Bildschirm. Das ist also die Mindesthöhe, die wir hinzufügen, und ich kann sagen, PG oder Grau 50. Okay. Lass uns sehen, wie das für zu Hause aussieht. Okay? Der graue Hintergrund wurde noch nicht hinzugefügt. Es wurde hier im Paket hinzugefügt, okay? Und lass mich, weißt du, lass mich das wirklich so nehmen, so nehmen, es so nehmen, okay? Damit ich alles Seite an Seite sehen kann, richtig. Also ja, das ist vorerst für eine Weile ein Paar Ansichten, wir werden uns an diese Art von Ansicht halten. Okay. Nun kann ich für H zwei die Eingabetaste drücken. Ich werde den Klassennamen sehen. So wie. Okay, hier drüben. Und hier drüben sage ich Text drei Excel und Schrift fett, dann Text blau 600. So wie es ist. Sie können sehen, wie sich das ändert. Und für diese Sache hier drüben sage ich Klassenname. Ups, Kinder haben sich beworben. Ups. Also werde ich das ändern, ich füge hier den Klassennamen hinzu. Klassenname Ich werde den Text grau belassen. Okay. Lassen Sie uns Grau von 700 behalten. Okay. Und Rand oben bei vier und Text so groß. Okay. Und du kannst dieses Interface sehen. Es ist gerade herangezoomt, aber wenn du hierher gehst, sollte das in Ordnung sein. Okay. Du kannst sehen. Sieht ein bisschen anständig aus, okay? Nicht viel, aber anständig. Ordnung. Also das ist etwas, das wir hinzugefügt haben, und Sie können es quasi über alle Komponenten hinweg replizieren Also, was ich tun werde, ist, diesen Retourenschein hier drüben zu besorgen Ich gehe zu A und in etwa werde ich das gleiche Rücksendeetikett hier drüben hinzufügen. Okay? Hoppla. Ich muss das loswerden Das ist erledigt und hier drüben, Home Peach, also werde ich über Pfirsich sprechen. Okay. Und ich sage diese Seite, ich muss hier etwas Text hinzufügen. Ich sage also, dass diese Seite Informationen bietet. Ups. Informieren Sie sich über uns und erfahren Sie mehr über unsere Maschinenwerte und so weiter. Okay. Ordnung. Wir können das duplizieren und es auch zum Kontakt hinzufügen. Also ersetze ich das einfach hier drüben. Okay? Für den Kontakt ist dies die Kontaktseite. Ordnung, kontaktieren Sie mich und ich sage hier drüben. Ich werde das loswerden. Ich würde sagen , Sie können uns gerne über unseren Kontakt, unser Formular oder unsere E-Mail kontaktieren, etwa so. Okay. Und ja, wir würden uns freuen, von so etwas zu hören, okay? Also, wenn du das Update aktualisierst, kannst du etwas über Verträge sehen und du kannst sehen, wie süß unsere kleine App aussieht, weißt du, mit ein paar Konfigurationsänderungen für Tailwind-CSS, mit wenigen Klassen und dem Hinzufügen einer Navigationsleiste oben Okay. Also das ist Router Dom React Router in Aktion, okay? Und ich hoffe, das gibt Ihnen eine Vorstellung davon wie moderne Webanwendungen funktionieren, okay? Sie können sich vorstellen, wenn das Ganze größer wird, haben Sie hier etwa 20 oder 30 Routenabschnitte und Sie haben ein paar Links oben Sie können diese Links sogar in eine separate Komponente namens Navbar Sie können eine separate Komponente namens Navbar erstellen, und Sie können dieses ganze Ding , diesen ganzen Code, direkt von NAV hier bis hierher, in eine separate Komponente übernehmen Ding , diesen ganzen Code, direkt von NAV hier bis hierher, direkt von NAV hier bis hierher, und die NAV-Leiste einfach hier oben rendern Das ist etwas , was Sie tun können, wenn die Navbar komplex wird Aber vorerst habe ich es hier deklariert, aber wenn es um React geht, kann alles getrennt werden, und Sie können Ihren Code auf erstaunliche Weise modularisieren. Okay. Ich hoffe, das hat Ihnen geholfen, eine neue Perspektive zu gewinnen , und ich hoffe, es war hilfreich. 8. Routen organisieren wie ein Profi: Verschachteltes Routing: Lassen Sie uns nun anfangen, über verschachtelte Routen zu sprechen. Hier haben wir also eine A-Seite, die bei About gerendert wird Nehmen wir nun an, wir möchten eine neue Seite hinzufügen, die Teamseite, und wir möchten die Informationen über das Team anzeigen. Nun, diese Teamseite ist logisch mit A verwandt und ich möchte , dass sie sich unter der URL befindet, die hier drüben ist, wenn ich sage, die URL sollte Slash Auth Okay? Also ich möchte, dass die Teamkomponente herkommt, okay? Also, was werde ich in diesem Fall tun, ich werde verschachtelte Routen verwenden, okay? Und ich organisiere es so, dass Team ein Team ist, ist im Grunde genommen ein Unterthema, und das erlaubt Was wir tun werden, ist, dass wir diese miteinander verbundenen Routen zusammenhalten werden, okay? Und wir werden eine hierarchische Beziehung definieren. Okay. Der Schrägstrich Über uns rendert also die Seite Über uns und der Schrägstrich Über das Team rendert die Teamseite und gibt die Details des Okay? Und das Beste an verschachtelter Route ist, dass Sie den Code verwenden können , der in der About-Komponente innerhalb oder auf dieser Teamseite definiert wurde , okay? Wenn Sie also die Teamseite rendern, können Sie auch die Komponenten oder den Code anzeigen Im Grunde ist das innerhalb von etwa definiert. Und lassen Sie mich zeigen , was ich meine, denn es gibt eine hierarchische Beziehung zwischen zwei, da wir sie verschachteln, okay Da das Team quasi ineinander verschachtelt ist, gibt es eine hierarchische Sie können also das Layout der About-Komponenten wiederverwenden, wie jede Art von Layout wie Kopfzeile, Seitenleiste oder jede Art von geteiltem Inhalt, okay, in der Team-Komponente Und lass mich dir zeigen, wie das funktioniert, okay? Was ich tun werde, ist als Erstes, ich werde das tatsächlich loswerden. Lassen Sie mich diesen Kommentar hier loswerden. Und hier drüben habe ich das ungefähr und ich werde den Selbstverschluss entfernen. Okay, ich werde es separat so schließen. Okay. Und da drin füge ich die Teamseite hinzu, etwa so. Ich sage Slash-Team. Okay. Und ich sage Slash Team Jetzt existiert das Team natürlich nicht, also erhalte ich eine Fehlermeldung, wenn ich diese Datei speichere Aber ich werde eine Teamseite hinzufügen. Ich sage Team Dot JSX. Okay. Nun, woraus besteht die Teamseite? Jetzt Teamseite, wir brauchen eine Teamseite, die wirklich, wirklich einfach ist. Okay. Ich werde einfach den Grundriss von zu Hause besorgen. Ich füge es in ein ähnliches Team ein. Ich benenne das einfach in Team um. Benennen Sie das in Team um und ich werde einige inhaltliche Änderungen hinzufügen , so wie dies die Team-Seite ist. Okay, oder wir können sagen, Team trifft unser Team. Okay. Machen wir es ein bisschen lustig, lernen wir unser Team kennen, so etwas. Okay. Und hier, werde ich sehen , was wir sagen? Wir können das loswerden. Wir können sagen, dass wir ein talentiertes Team von Fachleuten haben oder sich unserer Mission verschrieben haben. Okay, ich werde es einfach halten. Okay, wir haben das und jetzt komme ich her und lasse das T-Team importieren. Teams wurden importiert. Was sollte nun idealerweise passieren? Okay? Das ist in A verschachtelt, oder? Es ist eine verschachtelte Route Wenn wir also zu Slash Über Slash Team gehen, sollten wir sehen, wie Team sollten wir sehen Okay? Das wird eigentlich nicht passieren. Lass mich dir das zeigen. Okay, wir bekommen hier also einen Fehler. Okay? Also lass mich sehen, was der Fehler ist. Es ist so, dass ich hier im Browser nachgesehen habe, um den Fehler zu sehen, und Sie können sehen, dass der absolute Pfad für das Slash-Team, das unter dem Pfad about verschachtelt ist, nicht gültig ist Okay? Und ich weiß, warum es nicht gültig ist. Also hier kann man keinen Schrägstrich haben. Okay? Also werde ich das los und ich werde es speichern. In dem Moment, in dem ich das speichere, funktioniert es einwandfrei. Okay? Also das mit Home and Contact funktioniert prima. Wenn ich jetzt zu At gehe und hier Slash Team sage, okay, du kannst sehen, dass das Team nicht gerendert wird, sondern nur die Info-Seite angezeigt wird, okay? Und dafür gibt es einen Grund, okay? Und der Grund dafür ist, dass wir keine Ausgangskomponente verwenden. Was ist nun eine Outlet-Komponente? Jetzt ist die Ausgangskomponente ein Platzhalter für verschachtelte Komponenten, und Sie müssen die Ausgangskomponente innerhalb der übergeordneten Komponente verwenden Ausgangskomponente innerhalb der übergeordneten Komponente Welches ist nun die übergeordnete Komponente. In unserem Fall ist die übergeordnete Komponente die A-Seite. der At-Seite müssen wir also den Outlet-Platzhalter verwenden, okay? Und das ist, das zu sagen, ist , React hier drüben zu sagen. Diese Art von verschachtelter Komponente falls vorhanden, rendern Sie sie hier drüben. Okay? Es wirkt also wie ein Platzhalter Und lassen Sie mich Ihnen zeigen, wie Sie es tatsächlich nutzen können. Was wir also tun werden, ist, hierher zu kommen und nach innen zu denken, da das ein Elternteil ist, müssen wir es hier nutzen. Okay? Kurz vor dem letzten TIF, bevor wir das schließen, füge ich noch einen TF hinzu. Okay. Und ich gestalte es, weil der Rest der Seite gut aussieht. Okay? Also sage ich Rand oben von acht und W hier drüben, Breite von 100%. Und ich sage max. Okay. Und ich sage vier Excel hier drüben. Okay. Also das ist Max Width. Und dann werde ich hier Outlet sagen. Jetzt können Sie Outlet sehen. Sie müssen es aus React Router Doom importieren Du kannst Okay sehen. Und es schließt sich von selbst. Also werde ich es schließen. Und Sie werden sehen, dass diese Eingabe oben hinzugefügt wird. Okay. Jetzt speichere ich das und wenn ich jetzt rübergehe, kannst du sehen, ob wir uns treffen oder das Team treffen. Okay? Das wird gerendert. Sie können auf der A-Seite sehen, wie es gerendert wird. Und wenn du zu Sorry gehst, nicht auf der Info-Seite, sondern auf About-Slash-Team Wenn Sie jetzt zu „Über“ gehen, werden Sie „Über“ sehen, und wenn Sie zu „Ein Slash-Team“ gehen, werden Sie „ Über uns“ und „Team“ sehen Okay. Also A ist ein Elternteil und das Team ist das Kind. Okay, es besteht eine hierarchische Beziehung zwischen ihnen. Und das ist ein Konzept von verschachtelten Routen, okay? Und so können Sie es nutzen. Und das erklärt natürlich auch, warum eine Steckdose benötigt wird. Okay? Es ist wie ein Platzhalter Sie können hier in der Dokumentation sehen, dass der passende untergeordnete Stamm des übergeordneten Stammstamms gerendert wird Oder nichts, wenn kein untergeordnetes Stammverzeichnis übereinstimmt. Wenn also nichts übereinstimmt, wird nichts gerendert. Aber wenn du willst, dass etwas gerendert wird oder wenn da drüben irgendein Kind oder ein Elternteil ist, wird es das rendern. Okay? Also ich hoffe, das war nützlich und ich hoffe, Sie konnten mitmachen. Nur ein kleines Update, bevor ich dieses Video beende. Was ich gemacht habe, ist innerlich. Okay? Also vorhin gab es hier keine Verlinkung. Ich musste mich ausschließlich auf die URL verlassen. Wenn Sie also zu etwa gehen, habe ich hier zwei Links hinzugefügt, R-Team, zurück zur Startseite. Wenn Sie also zum Team gehen, werden Sie diese Rede sehen. Zurück nach Hause, du wirst wieder zu Hause sein. Oder du kannst auch zurück zu ungefähr hier drüben sein. Okay, ich habe diese Navigation hinzugefügt , damit Sie sich nicht auf, Sie wissen schon, VRLs verlassen müssen , sondern stattdessen hier klicken und navigieren können Und dafür habe ich diesen Block in etwa hinzugefügt. Okay, du kannst das Team sehen und mit einfachem CSS wieder nach Hause zurückkehren, okay? Und ich musste hier einen Link hinzufügen, wie den Link von React Router Dom, okay, um diese Links hinzuzufügen. Okay? Also ja, das ist es, und ich hoffe, das war nützlich. 9. Ups! Seite nicht gefunden: Benutzerdefinierte 404-Seite erstellen: nun in unserer Anwendung Wenn wir nun in unserer Anwendung zu verschiedenen Routen navigieren, sehen wir verschiedene Komponenten, und im Grunde wird es Szenarien geben, denen der Benutzer zu einer URL navigiert, die nicht existiert Wenn ich hier zum Beispiel ABC eintippe, okay, diese ABC-URL existiert nicht, aber es gibt kein Feedback oder keine Nachricht, die ich dem Benutzer gebe , um ihm mitzuteilen , dass er nicht existiert handhaben heißt also im Grunde vier statt vier, okay? Sie können also mit Vier-Foot-Fehlern umgehen , bei denen das nicht gefunden wird, oder? Also musst du es dem Benutzer zeigen, oder? Aber im Moment können Sie standardmäßig sehen, was passiert, wenn Sie versuchen, auf etwas zuzugreifen, das nicht existiert. Okay. Ich werde zuerst eine vier- statt eine vierseitige Seite erstellen, und dann werden wir das mithilfe von Routing regeln. Also zurück zu unserem Code, ich werde hierher kommen. Ich werde hier jede Art von Layout replizieren. Okay. Und ich werde das in NotFound-Komponente umbenennen, und ich werde hierher kommen, um nicht gefunden zu werden, und ich werde sagen, hier nicht gefunden, ungefähr so Okay. Okay, ich hätte die Info-Seite nicht replizieren Ich sollte eigentlich eine einfache Seite replizieren, nämlich die Okay. Also kopiere ich einfach die Rücksendeerklärung und füge sie hier ein. Okay. Jetzt sage ich statt Homepage vier, nicht vier. Okay. Und hier drüben füge ich eine Nachricht hinzu. Ich werde es einfach halten. Ich kann sagen Ups So wie. Okay. Hoppla. Die Seite, nach der Sie suchen, existiert nicht, okay? Existiert nicht, so etwas. Okay? Nun, was wir tun können, ist, diese spezielle Seite in unserer Anwendung zu verwenden . Okay? Also was ich tun werde, ich werde herkommen. Okay? Wir haben Routing für alle Teile, oder? Jetzt möchte ich Routing für alles andere als diese Teile hinzufügen . Alles andere sollte also auf diese vier statt auf vier Seiten umgeleitet werden , oder? Wie kann ich das definieren? Also werde ich hier Route sagen. Okay? Path und ich werde Star sagen. Okay. Und ich werde sagen, Element ist gleich. Okay. Und hier, nicht gefunden, einfach so. Okay. Und ich werde das schließen, so wie es ist. Okay. Und ich werde das auch schließen. Okay. Nun, wenn jemand eine andere Seite besucht, können Sie sehen, dass sie hier automatisch neu geladen wird Okay? Also Phono Vier, du kannst es sehen Ups, die Seite, nach der Sie suchen, existiert nicht. Okay? Sie können also tatsächlich zu jeder anderen Seite navigieren, und wenn Sie etwas anderes eingeben, etwas anderes, erhalten Sie Schrift vier. Foot-Four-Komponente würde also geladen und dem Benutzer angezeigt. So können Sie also mit Foot-Four-Fehlern umgehen, okay? Sie können diese Oberfläche so verbessern , dass sie viel besser ist und , dass sie viel besser ist und zu Ihrem Unternehmensthema passt. Aber ich hoffe, Sie verstehen die Funktionalität , wie Sie das erstellen können. Das Ziel dieses Videos ist es, Ihnen beizubringen , wie Sie die Funktionalität erstellen. Um den Rest kann man sich kümmern, weißt du, Designs können sich ständig ändern. Aber Funktionalität ist wichtig, okay? Ich hoffe, das war nützlich und ich hoffe, Sie konnten dem folgen. 10. Schlussbemerkung zum Kurs: Und damit sind wir am Ende dieser aufregenden Reise in die Welt des Routings mit React angelangt. haben wir viele Konzepte behandelt diesem speziellen Kurs haben wir viele Konzepte behandelt. Wir verstehen zunächst, was React Router ist, wie Sie ihn einrichten können, und wir haben auch gelernt, wie Sie mehrseitige Anwendungen mit React erstellen und eine intuitive Navigation für eine reibungslose Benutzererfahrung implementieren können mehrseitige Anwendungen mit React erstellen intuitive Navigation für eine reibungslose Benutzererfahrung implementieren . Wir haben auch gelernt, wie Sie verschachtelte Routen strukturieren können , um die Skalierbarkeit Ihrer App zu verbessern , und wie Sie mit Fehlern umgehen und „Nicht für Seiten“ anpassen können mit Fehlern umgehen und „Nicht für Seiten“ anpassen Aber denken Sie daran, dass das Lernen hier nicht aufhört . Die wahre Stärke jedes Konzepts in der Programmierwelt wie React Router liegt darin, diese Konzepte auf reale Projekte anzuwenden Sie sollten diese Konzepte also auf jeden Fall auf Ihre eigenen Projekte anwenden . Sie sollten sich weiter mit fortgeschrittenen Themen befassen und alles, was Sie gelernt haben, weiter üben , denn das ist wirklich wichtig. Ich würde gerne sehen, welche Art von Projekten Sie sich einfallen lassen und wie Sie den React-Router nutzen. In deine Projekte. Schließlich hat dieser spezielle Kurs einen Projektbereich, in dem Sie ein Klassenprojekt finden. Ich würde Sie sehr ermutigen, das Klassenprojekt abzuschließen und Ihre Arbeit im Projektbereich selbst zu veröffentlichen. Nun danke ich Ihnen, dass Sie mich auf dieser besonderen Reise begleitet haben. Ich hoffe, dieser Kurs hat Ihnen die Fähigkeiten vermittelt, eine gut strukturierte, navigationsfreundliche React-Anwendung zu erstellen , weiter zu bauen, weiter zu erkunden und viel Spaß beim Programmieren