Transkripte
1. Einführung: Hey, Leute, willkommen in meiner Klasse. Einen Stern bekommen, Es würde reagieren. Dürre. Deshalb heißt mein Name Esteban Herrera. Ich entwickle seit mehr als 10 Jahren Anwendungen von der Verwendung von einfachem JavaScript,
um einige Frameworks wie eine Abfrage, eckig und insbesondere reagieren zu können. Ich habe keine Reaktion. Und dieses Paradigma für die Entwicklung von Web-Anwendungen in dieser Klasse, wissen
Sie, wie eine einzelne Druckanwendung zu erstellen würde reagieren und reagieren. Router. Einseitige Anwendungen sind mit Anwendungen, die kein vollständiges Gebäck benötigen, wenn ihre Inhalte ändern, wie E-Mail oder Twitter. Diese Klasse ist für Anfänger. Sie müssen nur wissen, Abseilen von Audrey bei der Arbeit und wie man eine Reaktion auf Alkoven oder Dinge wie das, was sind
Single-Page-Anwendungen erstellen ? Das Konzept eines eher dazu beigetragen, reagieren eher die wesentlichen Komponenten aus dieser Bibliothek. Wie man Seiten von reagieren Komponenten verschachtelte Route auf, wie man Routen mit Europa zu bauen, Parameter. Bis dahin dieser Klasse haben
Sie das Wissen, einfache Single-Page-React-Anwendungen mit React
Router zu erstellen . Dies ist wichtig, da auf der einen Seite Single-Place-Anwendungen eine bessere Benutzererfahrung bieten. Andererseits sind
sie einfacher zu implementieren und zu warten als eine herkömmliche Webanwendung. Also lasst uns loslegen
2. Was sind Single: Single-Place-Anwendungen sind Diagrammanwendungen, die ihren Inhalt dynamisch auf einer
einzigen Seite laden , anstatt die Benutzerspitze umzuleiten. Andere Seiten in einer traditionellen Art und Weise Anwendung. Wenn Sie auf eine Schaltfläche oder einen Link klicken, kontaktiert
der Browser den Server und lädt eine ganz neue Seite, auch wenn sich nur ein kleiner Teil des Tempo ändert, was ein Gefühl von Unterbrechung gibt, besonders wenn die neue Seite einige Zeit in Anspruch nimmt zu lieben. Auf der anderen Seite lädt
eine Anwendung nur den Abschnitt des Tempo neu, der sich ändern wird. Die Anwendung kontaktiert immer noch den Server, wenn der Benutzer etwas anfordert, aber dies geschieht im Hintergrund, indem Ajax auf dem Server verwendet wird, anstatt zurückzukehren. HTML. Koth, die ein Tempo darstellt, gibt benachbarte Antwort zurück. Nur die Daten, die die APP benötigt. Keines ist ein gutes Beispiel. Deaktivieren Sie diese Art aus Anwendung. Wenn Sie darauf klicken, nur die Tweets Informationen vom Server abgerufen. Der Patient nicht vollständig wieder Liebe. Die Vorteile sind, dass diese Anwendungen reaktionsfähiger sind. Die Benutzererfahrung ist flüssiger. Sie können Ladeindikatoren haben, um den Benutzern mitzuteilen, dass die Anwendung etwas tut, und wenn Sie es richtig entwerfen. Die Anwendung kann den größten Teil der Verarbeitung auf dem Client verarbeiten, um die Anzahl der
Anforderungen an den Server zu reduzieren , was Netzwerkfehler verhindern und die Leistung verbessern könnte. Ein weiterer Vorteil ist, dass die meiste Zeit diese Anwendungen nur dann sind, wenn eine Dampfer-Datei , gute CSS und JavaScript Bindung tut. Diese erleichtern die Bereitstellung, da sie auf jeden ästhetischen
Content-Server hochgeladen werden können . Natürlich wird
die Anwendung eine wieder in benötigen, um seine Daten zu erhalten, aber das kann eine separate Anwendung Build mit einer völlig anderen Technologie sein, die wahrscheinlich in einem anderen Server rezitieren
wird, was verbessert Fähigkeit. jedoch Es gibtjedochauch einige Nachteile bei einer Anwendung an einem einzigen Ort. Die meiste Zeit, alle notwendigen Coath auf Ressourcen immer am Anfang in der anfänglichen Grundlast Baum. Also, wenn die bis grobe Zehe eine signifikante Größe, diese anfängliche Unglück wird eine langsame Suchmaschine sein. Optimierung S CEO könnte schwierig sein, weil es nur eine Seite gibt und die Anwendung dynamisch
gebaut wird , so dass die Suchboote nicht Mädchen alt Ihre Seite oder JavaScript Wachstum in ähnlicher
Weise ausführen . Analytische Werkzeuge können Seitenansichten möglicherweise nicht korrekt verfolgen, da Single-Druck-Anwendungen nicht wirklich Seiten enthalten. Ein weiterer Nachteil ist, dass diese Anwendungen einfach komplex werden können, sodass sie besser gestaltet werden müssen als herkömmliche Anwendungen. Abschleppen, Speicherlecks,
Sicherheitsprobleme oder andere Art von Problemen
vermeiden . Einer von ihnen insbesondere der ist
insbesondere derBrowserverlauf. Da die Anwendung auf einer einzigen Seite enthalten ist, kann
sie sich nicht auf die Browser-Vorwärts- und Zurück-Schaltflächen verlassen. Aus diesem Grund
etwas, das den Ural ändern kann, um Ihre mündliche Geschichte Ereignisse im
Browser zu schieben oder zu ersetzen , nach der Application estate, er ist weder in beiden. beispielsweise, Beachten Siebeispielsweise,wie sich der Ural ändert. Ein Tweet wird angeklickt und wie ein Verlaufseintrag generiert wird. Dies ist der Job aus unserer nach A. Stattdessen ermöglicht es Ihrer Anwendung, zwischen verschiedenen Komponenten zu navigieren, den Browser-Euro zu
ändern, den Browserverlauf zu ändern und den U. S-Zustand in denken React ist ein beliebtes -Bibliothek zum Erstellen einzelner basierter Anwendungen. jedoch Da sich Reactjedochnur auf das Erstellen von Benutzeroberflächen konzentriert, hat
es keine integrierte Lösung für das Routing. Reactor Router ist die beliebteste Routing-Bibliothek für React. Lassen Sie uns über Reaktor sprechen, nachdem in der nächsten Lektion
3. React Router: manche Leute denken, reagieren. Router ist Teil des Gerichts vor React Day. Ja, aber eigentlich ist es eine Open Source. Sehr geehrte Partei Lavery entwickelt eine halten durch React Training. Darüber hinaus ist der
REAC-Router in drei Pakete unterteilt. Web, nativ und Kern. jedoch Sie müssenjedochfast nie direkt mit dem Kernpaket arbeiten, da es nur
die Kernkomponenten von respond bereitstellt . Router. Wenn Sie mit einer Webanwendung arbeiten, sollten
Sie React verwenden. Sparren Gwen. Und wenn Sie eine mobile Anwendung bauen, würde reagieren. Einheimische. Sie sollten reagieren um ihre gebürtige. In jedem Fall werden
diese Pakete installieren reagieren Rotor Core s eine Abhängigkeit in diesem Kurs. Alle konzentrieren sich auf reagieren Router Web. Nicht viele Dinge werden auch gelten, um zu reagieren. Router Native Reactor out Unsere arbeitet mit einem Modell namens Dynamic Routing, wo Route in der gesamten Anwendung an dem Ort
deklariert werden , wo sie verwendet werden. Das ist anders. Das statische Routing. Nehmen Sie diesen Code, zum Beispiel, wo Sie die Routen von Ihrer Anwendung von Frontstreben Ihrer
Up-Initialisierungsaufgaben deklarieren müssen, bevor etwas auf diese Weise gerendert wird, wir dynamisches Routing reagieren Route oder Griffe -Routing auf der Clientseite der Anwendung. Der Server behandelt die anfängliche Route, um die Reakt-Anwendung zu bedienen. Aber danach erneut auftreten, Outer wird auf Route warten, die vom Benutzer angefordert wird, um die
Riadh-Komponenten zu bedienen , die mit diesen Routenreaktor verbunden sind, oder erkennt keine bestimmte Route. Die Anfrage wird über den Server übergeben, und wenn sie damit umgehen kann, würde
der Server mit einer ganz neuen Seite antworten, was für Funktionen wie Logging und Abmelden nützlich ist. In Ordnung jetzt, lassen Sie uns eine React-Anwendung einrichten und React-Router installieren.
4. Einrichten der React App: Alles klar, lassen Sie uns eine Reaktionsanwendung erstellen, die ich verwenden werde Create React up Wenn Sie dieses
Tool nicht verwendet haben Mach dir keine Sorgen, solange du keinen Tag hast Ja, und mpm installiert Du brauchst diesen Dollar nicht zu verwirren oder irgendetwas anderes. Ich gehe davon aus, dass Sie diese Tools bereits installiert haben. Stellen Sie einfach sicher, dass Sie zumindest nicht in sechs platzen. Sie können nach Norden rennen. Ich weiß nicht, welche Person Sie installiert haben, und Sie brauchen auch die neueste Version von MPM weil manchmal Dinge nicht gurgeln Sie haben nicht eine kürzliche Burst in Sie MPM ausführen können tut diese Person zu wissen, gute Bersten Sie installiert haben Oder wenn Sie gerade gehento machen sicher, dass Sie die neueste
haben, die Sie ausführen können mpm Isdell npm deskee auf mpm wird als nächstes aktualisiert werden Führen Sie den folgenden Befehl mpm x erstellen, dass Reagieren Sie, dass mein Schreibtisch reagieren, dass der Rotor, dass nach oben. MPM X ist ein Tool, mit dem Sie ausführen können, keine Pakete, auch wenn die Pakete nicht lokal installiert sind. In Ordnung. Meine Reaktion schrieb einen Rap ist der Name der oben auf diese Weise und Verzeichnis mit diesem Namen wird erstellt Great Now Ich werde das in dieses Verzeichnis zu sehen. Und da dies eine großartige Anwendung ist, werde
ich immer noch ziemlich dumm mit MP reagieren und Mr. That ist der sichere Reaktionsrotor Dumb. An diesem Punkt können
Sie MPM starten auf einem Browserfenster wird auf dem lokalen Host für 3000 geöffnet. Du wirst so etwas sehen. Okay, ich gehe in das Projekt in einem Redakteur. Ich verwende Klammern, aber Sie können jeden Editor verwenden, den Sie in der Datei öffentlich ist der letzte Index Punkt html nach der Bootstrap C. S Datei. Das wird mir helfen, einen Stil, die Anwendung. Dann werde ich voran gehen und den Inhalt der App The CSS durch meine eigenen Kosten ehrliche Kacheln auf
den Inhalt aus dem Gefängnis ersetzen ? - Ja auch. Wenn Sie eine Datei speichern, werden
die Änderungen automatisch neu geladen. Du brauchst kein Zeug über Rex akute mpm mr. Um sie zu sehen, machen Sie sich keine Sorgen um die Stile. Ein Dozent der Anwendung an dieser Stelle, können
Sie Ihre Anwendung in jeder, die Sie wollen installieren und Sie können das gesamte
Quellwachstum aus dem Projekt in diesem get off Repository finden . Der Link befindet sich in der Beschreibung der Klasse. Für jede Lektion gibt es einen Zweig geht, Sie können Dickov aus den Bewerbungsbewertungen in dieser Lektion überprüfen. Jetzt sind wir bereit, den React Router zu verwenden. Aber davor, lassen Sie mich Ihnen sagen, dass React Router auf drei Komponenten basiert. Vielmehr der Rotor, der das Sie hält. Ich meine, denke mit dem Mädchen-Link, ein Nickerchen Link, der einen Navigationslink auf Route macht, der eine U I Komponente abhängig vom Mädchen macht. In der nächsten Lektion wissen
Sie, wie Sie Routen zur Anwendung mit der Routerkomponente integrieren.
5. Die Router: die meiste Zeit muss
ich die Writer-Komponente nicht direkt verwenden. Sie verwenden eine ihrer Implementierungen in einer Webanwendung. Sie haben zwei Möglichkeiten. Browser Router, der
die HTML fünf Geschichte verwendet, A B I und Cash Router, die ein Hash-Zeichen verwendet, um den Ankerteil von einem Euro zu setzen und kann mit einem
richtig Fenster Punkt Position Punkt Hash zugegriffen werden . Wenn Sie gehen, um ältere Browser, die nicht unterstützen die HTML fünf Ziel, seine Geschichte a p A. Normalerweise verwenden hat eher, die Euro mit diesen ehemaligen erstellt. Andernfalls können
Sie Browser-Router verwenden
, der Euro ohne den Hash erstellt. Ich werde Browser-Rotor in dieser Demo-Anwendung verwenden, also in Wunden, ist
es der letzte Index des Tages. Ja, ich werde es von React Rotterdam importieren und es verwenden, um die APP-Komponente zu greifen. Es ist wichtig zu erwähnen, dass unsere äußere Komponente nur ein untergeordnetes Element haben kann. zum Beispiel Wenn ichzum Beispielein anderes Element hinzufüge, wenn ich die Datei speichere, wird
die Anwendung das Foto irrtümlich werfen. Nachricht sind andere kann nur ein untergeordnetes Element haben. Okay, ich werde dieses zusätzliche Element löschen. Wie Sie sehen können, diese Komponente keine Auswirkungen auf die
UI.
Der UI HauptGolf eines Routers besteht darin, ein Verlaufsobjekt zu erstellen, um den Ural zu verfolgen,
die Position, wenn die Position die untergeordnete Komponente von der Rotor. In diesem Fall, oben Israel Orender. Meistens verwenden Sie eine Verknüpfungskomponente, um die Position zu ändern. Lassen Sie uns in der nächsten Lektion über Links sprechen.
6. Der Link und Link: Reactor gibt den Link genug Link-Komponenten, um die Länge zu rendern, die Sie
verwenden können , um in Ihrer Anwendung zu navigieren. Die Verknüpfungskomponente, mit der Ausnahme, dass sie eine Zeichenfolge annimmt, die den zu navigierenden Speicherort darstellt. Und Sie können auch Europa-Parameter fragen. Aber haben Sie es vorgezogen, dass Sie auch ein Objekt mit den Eigenschaften übergeben können, aber benennen Sie den Pfad, der auf Sorry verlinkt werden soll. Eine Zeichenfolge, die die Abfrageparameter darstellt, hat einen Hash der Boot im Euro für den Zustand auf Objekt, das den Status darstellt, die persist an der Position. Ein weiteres wichtiges Attribut wird ersetzt, wenn es auf true gesetzt Die Position außerhalb der Link-Komponente ersetzt den aktuellen Eintrag im Browserverlauf anstatt einen neuen hinzuzufügen. Auf der anderen Seite, naff Link ist eine spezielle Version von der Gliedmaßenkomponente, die bei Sonny angibt Attribute, die nützlich für Navigationsmenüs sind. Beispiel: Duerson Active class name Attribut, das den Namen von einer CSS-Klasse nimmt, die den CSS-Klassen
hinzugefügt wird , wenn das Element aktiv ist. In anderen Kriegen, wenn der Ort außerhalb der Verbindung viel der aktuelle Ural ist, ist
der Glasname des Telefons aktiv oder Sie können den Aktivist Ich werde Attribut verwenden, um einen Stil
von noch für den gleichen Zweck zu übergeben . Zwei weitere wichtige Attribute sind exakt auf einem strengen Weg. Exact ist auf „true“ gesetzt. Die aktive Klasse oder der Stil wird nur angewendet, wenn die Position viel genau ist und ein Bezirk auf true gesetzt ist. Die drei Leanness Schrägstrich von einer Position, aber der Name wird berücksichtigt, wenn die Position übereinstimmt. Der aktuelle Ural verdient die wichtigsten Attribute off link und keine Verbindung, aber Sie können mehr über sie in der Dokumentation off React Router wissen. In Ordnung jetzt, lassen Sie uns eine Navigation erstellen. Viele in der Quelle Schrägstrich nach oben zwielig. Ja, ich werde dieses Ankerelement durch eine Link-Komponente ersetzen. Ich werde noch zwei Links haben. 14 auf etwa Basis und eine andere für eine Usurpation. auch nicht, Vergessen
wirauch nicht,die Link-Komponente an der Spitze der Datei zu wichtig. Jetzt im Browser, werden
Sie so etwas sehen. Wenn Sie den HTML-Code überprüfen, werden
Sie sehen, dass die schlanke Komponente nur ein Ankerelement generiert. jedoch Diese befinden sichjedochin regulären Ankerelementen. Sie änderten den Ural, ohne die Basis zu aktualisieren. Wenn Sie ein regelmäßiges Element der Goethe haben. Der Patient wird vollständig Reno sein. Denken Sie daran, dass die schlanke Komponente jetzt kein normales Ankerelement darstellt. Nicht, dass nichts passiert, wenn in der nächsten Lektion auf einen Link geklickt wird. Junor Wie man ihre etwas mit der Routenkomponente ausführen.
7. Die Route: Die off-the road-Komponente besteht darin, etwas zu rendern, wenn die Position viel nur einen Pfad, den Sie definieren
können. Gladys rendern, indem Sie eine der folgenden Eigenschaften außerhalb der Straßenkomponente mit der Komponenteneigenschaft verwenden. Es macht eine Komponente gehen. Die Position stimmt überein. Die Straße Spot würde Sie eine Funktion übergeben, die das Element oder die Komponente zurückgibt wütend
Children gerendert werden . Sie übergeben auch eine Funktion, die die zu rendernden Elemente oder Komponente zurückgibt. Der Unterschied besteht darin, dass das Rückgabelement keine Mutter gerendert wird, wenn der Pfad übereinstimmt oder nicht . Jede dieser Eigenschaften ist in verschiedenen Situationen nützlich, Sie können
jedoch nur eine dieser Eigenschaften auf einer bestimmten Route verwenden. Die Komponente in dieser Lektion ist so, dass Sie die Komponente richtig verwenden müssen. Darüber hinaus mit der PATH-Eigenschaft jeden an, geben
Sie
mit der PATH-Eigenschaft jeden an,den Sie auf diese Weise schlecht sind. Eine neue Komponente wird mit React erstellt, die Element erstellen. Das bedeutet, dass bei jedem Rendern eine neue Komponente erstellt wird. Anstatt nur einen vorhandenen zu aktualisieren, kann
der Pfad durch Rebellen definiert werden, und es kann ein regulärer Ausdruck sein. REAC Rotor verwendet den Bibliothekspfad, um Bursting 1.7 abzulehnen. Um diese Ausdrücke zu verfolgen, gibt es sogar ein Werkzeug, mit dem Sie eine Route eingeben können Es zeigt Ihnen den regulären Ausdruck für diese Route an, und Sie können auch einen Pfad eingeben, um zu sehen, ob er mit der Route übereinstimmt. Es ist sehr nützlich zurück zur Straßenkomponente. Es dauert auch eine exakte richtig, die durch die Komponente ging. Goldberg Kapitulation nur, wenn die schlechten Spiele genau mit einem strengen auseinander, die eine Verrücktheit
zuletzt hat , wird nur einen Standort mit einem Trailing dieser letzten entsprechen. Wenn die Eigenschaft true ist und schließlich, wenn die Sensitive richtig wahr ist, wird die übereinstimmende Groß- und Kleinschreibung beachtet. Okay, gerade jetzt, in unserer Anwendung, ändert sich
der Euro, wenn auf einen Link geklickt wird. Aber nicht die u I. Lasst uns das reparieren. Ich werde ein Komponentenverzeichnis erstellen und darin drei Komponenten, eine für jede Route. Zuerst die Home-Komponente für die Hauptroute. Zu diesem Zeitpunkt zeigt
jede Komponente nur eine Meldung an. Dann dursten Sie nach der Route Schrägstrich Benutzer Ich bin endlich über für die Straße. Es schrägt etwa jetzt Zeh. Geben Sie den Ural an, der jeder Komponente im Quellschrägstrich am Tag entspricht. Ja, ich habe einige Straßenkomponenten innerhalb des dif-Elements mit der Hauptkomponente der CSS-Klasse verwendet. Diese Routenkomponenten können in diesem
Fall überall innerhalb des Routers Broza Rotor platziert werden und die zugehörige Komponente wird an dieser Stelle gerendert. Jetzt muss ich nur alle diese Komponenten und ihre Routenkomponente
importieren . Und im Browser können wir sehen, dass die U I aktualisiert wird. Es zeigt die Home-Komponente. Aber
schauen Sie, was passiert, wenn ich auf die andere Route gehe. Durch die Schuld, Straßen sind inklusive. Mehr als eine Dürrekomponente kann mit dem Uralpfad übereinstimmen und gleichzeitig rendern. Aber keine Sorge, wir werden das in der nächsten Lektion beheben.
8. Die Schaltkomponente: in dieser Lektion zeigen wir Ihnen, wie Sie die Switch-Komponente verwenden, um nur eine Route aus der
Gruppe der Routen zu rendern . Die Switch-Komponente funktioniert wie ein normaler Schalter, eine Anweisung in JavaScript in der Reihenfolge Demo-Anwendung. Aber die Nutzer und über Pat's enthielten diesen letzten Charakter, so dass sie auch viel und machen durch die Heimroute. Auf diese Weise können wir verschiedene Komponenten anzeigen, indem wir erklären, dass sie zum gleichen
Pfad gehören . Aber in diesem Fall ist
das nicht das, was wir wollen. So können wir die genaue Eigenschaft auf der Straße für die Home-Komponente verwenden, um sie nur zu rendern, wenn das Ural viel der Pfad ist. Genau. Jetzt in der Anwendung können
wir sehen, dass alles gut funktioniert. Die Routenbenutzer und über stimmen nicht mehr mit dem Pfad der Home-Komponente überein. Beide Komponenten werden jeweils nur eine Komponente angezeigt, so dass wir auch eine Switch-Komponente verwenden können, um nur die erste Route zu rendern, die der
Position entspricht . Selbst wenn Sie die About Route duplizieren, lassen Sie mich diese, welche Komponente jetzt importieren, wenn ich die About Seite besuche, ihre Komponenten werden nur diejenigen gerendert. Allerdings ist
nichts, das einfach nicht die genaue Eigenschaft für den Homöopathen oder ihre
Ehefrau Benutzer angeben musste und über wird auch mit ihm übereinstimmen. Und die con-Komponente wird immer gerendert, weil dies die erste Route ist, die im Spiel
definiert ist , lassen Sie mich es Ihnen zeigen. Die Alternative besteht natürlich
darin, den Genossen als den letzten zu definieren. Da hast du es. Allerdings verlasse
ich die Heimroute mit der Ausnahme richtig. Jetzt können
Sie auch in der vierten Runde angeben, um etwas zu rendern, wenn kein Pfad viel ist. Dieses Verhalten wird mit einer ready this -Komponente implementiert. Sie müssen nur den Euro übergeben, um bereit recto mit den beiden Eigenschaft. In der Tat akzeptiert
eine Switch-Komponente nur als Children entweder Route oder rot erect
Elemente geschrieben Elemente verwenden viel ihre Pfadeigenschaft, während wiederholte Elemente ihre
von Eigenschaft verwenden . Nun, wenn ich zu mir nach Hause gehe, leitet mich
die Anwendung nach Hause weiter. Eine richtige Komponente, die keinen Pfad, keine Eigenschaft oder bereits gelesene Komponente hat, die keine Eigenschaft hat, stimmt immer mit dem aktuellen Speicherort überein. Geschichte, einige ganz diese rote aufrecht am Ende der Switch-Komponente kann jeden Pfad fangen, der vorher nicht übereinstimmte. Lass uns einfach auf Wiedersehen sagen, bevor du es hast. Schließlich müssen
Sie sich bewusst sein, dass die rhetorische Komponente zu einem neuen
Ort navigiert wurde und den Aushärtungswunsch im History Stack
ersetzt, genau wie ein serverseitiger roter Erekt dies tut.
9. Route Render: , wenn Sie unter etwas mit der Routenkomponente waren. Drei Objekte werden als Parameter viel übergeben, das ist ein Objekt, das Informationen darüber, wie die Routen enthält, aber viel. Die Euro-Position, die ein unveränderliches Objekt ist, das darstellt, waren Die APP hat jetzt Eigenschaften, um das
Teil zu erhalten . Der Chorus String und das Haus des Euro und der Geschichte, Ein Objekt für die Verwaltung der Entscheidungsgeschichte im Browser mit Methoden, um
in der Geschichte Stack zurück und vorwärts zu gehen . Diese Eigenschaften werden immer übergeben, unabhängig davon, welche Rendermethode Sie in einer Komponente verwenden Sie können sie aus dem Eigenschaftenobjekt abrufen. Das viel Objekt wird das sein, das Sie öfter verwenden werden, so dass Sie das Eigenschaftenobjekt zerstören können, um nur dieses Objekt zu erhalten. Zum Beispiel, so werden Sie es mit einer Renderfunktion tun. Übrigens ist
es unter Funktion nützlich, wenn Sie benutzerdefinierte Eigenschaften an die Komponente übergeben möchten. Sie werden in diesem Beispiel wie die color -Eigenschaft rendern, und so machen Sie es mit Children. Denken Sie daran, dass der Unterschied zwischen dem Rendern bei Children darin besteht, dass das später immer das von der Funktion zurückgegebene Element auf diese Weise darstellt.
Sie können die viel -Eigenschaft verwenden, um zu wissen, ob der Pfad tatsächlich mit dem aktuellen Ural übereinstimmt. Wenn dies nicht der Fall ist, wird
das viel Objekt leer sein. Okay, Sie können diese Eigenschaften in Aktion sehen, ohne die Anwendung zu ändern. Verwenden der React Developer Tools-Erweiterung Zum Beispiel in Crumb werde
ich
in Crumbden Entwicklerhocker öffnen und nach dem Reaktionsfinale suchen. Ich werde alle diese Notizen erweitern und nach der Home-Komponente suchen. Es ist genau hier. Wenn ich ausgewählt habe, sehen
Sie die drei hier aufgelisteten Eigenschaften. Hier ist das Verlaufsobjekt mit einigen Methoden, um den Browser zu steuern, sagt Ihr Verlauf. Nicht, dass die Historie ein Positionsobjekt enthält, das im Grunde dasselbe ist, wie das andere Positionsobjekt, das die Komponente als
Parameter empfängt . Der einzige Unterschied besteht darin, dass das Standortobjekt in der Historie veränderbar ist, daher wird es nicht empfohlen, etwas zu verwenden. Wir haben das Match-Objekt. Wenn ich zu ihrer Info Seite navigiere, können
Sie sehen, wie sein Feld mit verschiedenen Daten in der nächsten Lektion das
viel Objekt verwendet , um eine verschachtelte Route zu erstellen
10. Verschachtelte Routen: Hier ist ein Beispiel aus einem Nester Dürre Benutzer ist letzte Details. Meistens sind
sie zwei Teile, der Hauptpfad Benutzer, in diesem Fall auf einem weichen Pfad. Details. In diesem Fall ist das weiche Teil in der
Regel als erträgliches Teil definiert. Also in diesem Fall, oft ich d. Es kann Werte wie ein oder zwei nehmen. In der Tat werden
wir eine verschachtelte Route für oder sie ein Projekt wie diese implementieren. Und dafür werden
wir das viel Eigentum benutzen. Erinnern Sie sich so viel Es ist ein Objekt, das die folgenden Eigenschaften Barham und Objekt mit Schlüsselwert enthält Paare Teile aus dem Ural, die dem Pfad von Rebellen entsprechen, exakt auf Anbauflächen mit dem Wert true, wenn sie Ihr viel das Bademuster sind, das in der Straßenkomponente und Sie sind eine Zeichenfolge, die den magischen Teil der URL darstellt. Ordnung, also für den Benutzerbereich, möchten
wir eine Liste von Benutzern anzeigen, und jedes Element aus der Liste wird ein Link sein, wie es letzte Benutzer ist. Es sind die letzten Benutzer zwei, und so weiter, dass wir Ihnen die Details dieses Benutzers zeigen. Lassen Sie uns beginnen, indem Sie die Benutzerkomponente ändern, um Links für einige Beispielbenutzer zu generieren. Um die Dinge einfach zu halten, gehe
ich nur zur endgültigen Funktion, die eine Liste gut zurückgibt. Eine andere Möglichkeit wird sein, auf ein B I zu rufen, um die Liste zu bekommen. Benutzer in der Firma haben Update-Methode und ein Geschäft am wenigsten im Zustand der Komponente . Also brauchen wir Veränderungen. Es kann gerendert werden. Aber ich werde nur ein Array finden. Und mit einer Vier-Schleife fühle
ich ihren Ring mit Objekten, die nur eine I.
D-Eigenschaft enthalten , die die Idee der Benutzer bei der Rückkehr darstellt. Das wenigstens werde ich jetzt den Körper der Komponente ersetzen und die Funktion aufgerufen. Dann habe ich die mathematische Methode verwendet. Denken Sie daran, dass diese Methode ein neues Array mit den Ergebnissen aus einer Funktion erstellt, die für
jedes Element im Strahl aufgerufen wird . Diese Funktion wird also einen Umfang nehmen, diesen Alkoholbenutzer, der
das Objekt mit der Ideeneigenschaft darstellt, die ich für jeden Benutzer bin. Diese Komponente wird ein H zwei Element rendern. Denken Sie daran, dass in einem vermieteten Elemente rendern würde. React erfordert eine Schlüsseleigenschaft mit einem eindeutigen Wert für jedes Element. Dann habe ich eine Flügelkomponente, um einen Link zu erstellen, um die Details von diesem Benutzer anzuzeigen. Schließlich beim Importieren Link auf. Wenn ich die Anwendung ausführe, werden
wir sehen, dass die Links korrekt gerendert werden. auch, Beachten Sieauch,wie sich der Ural ändert. Ich klicke auf Sun Off Diese Links. Jetzt können wir etwas tun, um dies zu verbessern. Anstatt hart zu codieren, trennen die Benutzer vom Pfad, können wir sie viel von noch die
Komponente erhält verwenden . Wenn ich das React Developer Store Spinal geöffnet, Ich suche nach der Benutzerkomponente, die wir sehen können Die Euro-Eigenschaft hat den Wert, seine letzten Benutzer. So können wir den Lehrer aus dem Eigenschaftenobjekt übereinstimmen, das die Komponente empfängt und
viel Punkt-Yura anstelle des harten Kernwerts verwendet , ist der letzte Benutzer weniger und der Anfang ist wichtig, weil sonst wir verschachtelte -Routen unter dem Benutzer-Spot. Großartig. Die Links arbeiten noch in. In der nächsten Lektion wird die Funktionalität hinzugefügt, um die Details von jedem Benutzer anzuzeigen
11. Route verwenden: In Ordnung, lassen Sie uns ihre Out-Parameter verwenden, um die Details von jedem Benutzer anzuzeigen. Nach der Liste von Benutzerlinks, werde
ich um die Komponente mit einem Parameter deklarieren, um den Benutzer i d zu erfassen. Diese Ideen sind Zahlen, so dass wir die Regel mit einem regulären Ausdruck erzwingen können. Denken Sie daran, dass Fledermäuse jeden Ausdruck akzeptieren, den die Bibliothek, aber zu Rogic verarbeiten kann. Ich platziere die Stabkomponente hier, weil ich möchte, dass die Benutzerkomponente nach dem
geringsten angezeigt wird . Wenn Sie möchten, dass diese Komponente die Benutzerliste ersetzt, müssen
Sie am wenigsten in App-Punkt yes
neben der anderen Routenkomponente platzieren . Wie auch immer, wenn es eine Übereinstimmung gibt, wird
die Benutzerkomponente rendern. Also werde ich die Benutzer- und Routenkomponenten importieren und eine neue Datei erstellen. Das sagtest du schwul? Ja, für dieses Beispiel werde
ich es einfach auf dem Display halten. Die Idee des Benutzers, aber nicht ist, wie das I D aus dem viel das Objekt des Barons mit dem gleichen Namen extrahiert wird
, der im Bad definiert ist. Wenn Sie den Browser öffnen, sollten
Sie etwas Ähnliches sehen. Nun lassen Sie uns andere vier Nachricht so etwas wie Bitte wählen Sie einen Benutzer aus der geringsten. Anstatt jedoch eine Komponente für Entlassungen zu erstellen, verwende
ich die Rendereigenschaft außerhalb der Straßenkomponente. Mal sehen, da hast du es. Auch wenn ein verkörperter Pfad eingegeben wird, wird
die Meldung weiterhin angezeigt. Wir können diese Routen auch in einer Streckungskomponente hinaufgehen, um zu garantieren, dass nur eine der beiden übereinstimmt. Lassen Sie mich die Switch-Komponente importieren und ihre Anwendung testen. Großartig. Es funktioniert und wir sind fertig. Aber es gibt noch eine letzte Sache, die ich erwähnen möchte. Sie müssen vorsichtig sein mit der Art und Weise, wie Sie Route deklarieren. Zum Beispiel, wenn Sie die Route deklarieren, die die missus zuerst rendert, wird
die Benutzerkomponente nie gerendert, weil der Pfad wie dieser letzte Benutzer diese
letzte gut, im viel. Der Pfad ist die letzten Benutzer. Also, wenn Sie die Route in dieser Reihenfolge deklarieren, um dieses Verhalten zu vermeiden, so können wir sagen , dass die Lektion hier immer die spezifischsten Routen zuerst deklariert wird. Jetzt lasst uns dieses Glas erwachsen
12. Letzte Gedanken: Alles klar. Mittlerweile sollten
Sie ein gutes Verständnis haben, was Single Paste Anwendungen sind. Wie man eine mit reagieren und reagieren erstellt. Sparren. Sie haben gelernt, dass eine Route oder hält Ihre Anwendung Sie y und die Ural Sie denken und reagieren. Router ist die beliebteste Rotor-Bibliothek für reagieren. Außerdem haben
Sie gelernt, wie React Router,
seine wichtigste Komponente, einzurichten . Wie Routen funktionieren, wie dynamisches Nest zu bauen, die Dürre mit Teileparametern, denn es gibt noch viel mehr zu entdecken. Die offizielle Dokumentation deckt einige grundlegende und fortgeschrittene interaktive Beispiele . Im Klassenprojekt bringst du das alles zusammen. Sie müssen eine einzige Anwendung mit mindestens den folgenden Funktionen erstellen. Startseite, ein anderer Patient mit etwas Text und nicht von Seite auf einer Master-Detailseite Mit Nestor Dürre können
die Werte Marco sein, zum Beispiel ein Katalog aus Produkten oder eine Liste von Nachrichten. Die App kann eine aufgeblähte Zehen-, Coath-, Penn- oder Mantel-Sandbox sein, so dass jeder andere es überprüfen kann. Denken Sie daran, dass Sie das vollständige Quellwachstum aus dem Dem A-Projekt auf Get the Link in der Klassenbeschreibung finden können. Und wenn Sie Fragen oder Probleme haben, hinterlassen Sie einen Kommentar und ich werde versuchen, so schnell wie möglich zu antworten. In Ordnung, ich hoffe, Sie haben die Klasse genossen. Ich schätze, wenn Sie die Zeit haben, eine Bewertung zu hinterlassen und wenn Sie die Klasse mögen,
folgen Sie mir, um benachrichtigt zu werden. Wenn ich mehr Klassen freigebe, sehe
ich dich beim nächsten Mal und danke für das Anschauen.
Esteban Herrera, How can I help you?
