React.js: Datenfluss innerhalb der Anwendung

Hallo, mein Name ist Tony und in diesen Lektionen werden wir uns unterhalten über den Datenfluss innerhalb einer Anwendungsordnerstruktur und benutzerdefinierte Hooks mit Kontext-API. In dieser Lektion werden wir über mehrere Komponenten sprechen, Routing und Navigation. Werfen wir einen Blick auf die Anwendung. Sie können hier Aufgaben einzeln hinzufügen. Kreuzen Sie sie an und löschen Sie sie. Und darunter befindet sich ein Zähler, der zählt für uns. Bisher wurde alles serviert. Uns durch eine einzelne Komponente und das. Früher war die Komponente in der App untergebracht. Jetzt sieht unsere App etwas anders aus. Das sehen wir gerade. Dies steht uns bei Slashnda zur Verfügung, und wenn wir hierher kommen, dann auch wir Holen Sie sich diese minimale kleine Seite, nur um den Punkt zu veranschaulichen Das heißt Willkommen in meiner App. Wie wir das machen, liegt bei uns. Verwenden Sie eine bereitgestellte Reaktionskomponente. Uns von React Router Dom Browser-Router oder Router genannt. Dies ist die Nomenklatur dafür. Der Router ist die oberste Komponente. Routen befinden sich direkt darunter. Jetzt exportieren wir hier noch einmal Browser-Router-Router. Ich denke, wir könnten dies tun, um Verwirrung zu beseitigen. Dies gibt uns im Grunde das Gleiche. Der Browser-Router ist also die oberste Komponente. Routen finden Sie direkt darunter und einzelne Routen. Hier handelt es sich um eine einzelne Routenkomponente. Was passiert also in dieser einzelnen Komponente? Punkte jedes Einzelnen. Weg zu einer Art Komponente. Das dient dieser Route. Der Weg steht also an erster Stelle. Also für Slash Agenda, wenn dieser Weg. Ist genau das Element, das wir verwenden. Zur Ausgabe für diese Route ist dies. Agenda-Element hier. Werfen wir einen Blick darauf. Es ist im Grunde das, was wir in der hatten. App-Komponente, bevor wir sie verschoben haben. Eine eigene Komponente sein. Diese kommen als Requisiten. Also übergeben wir sie von der App-Komponente. Und der Rest Ist als. Früher war es so. Es gibt also keine Änderungen an diesem Teil. Wir machen hier das Gleiche. Nur geben wir keine Requisiten weiter. Hier überhaupt, denn es handelt sich um eine sehr, sehr einfache Komponente. Im Grunde heißt es einfach „Willkommen bei meiner App“ in der Mitte Bildschirm. Aber wir haben auch die Fähigkeit dazu. Machen Sie hier etwas ziemlich Ordentliches. Bisher haben wir genaue Pfade verwendet, aber wir haben auch die. Möglichkeit zur Verwendung von Platzhaltern. Also zum Beispiel, wenn wir alle wollten. Anfrage an Aufgaben: Alles, was zur Agenda weitergeleitet werden soll, ist dies wie wir das angehen würden. Wir würden die Routenkomponente verwenden, die Pfade wären Aufgaben Stern. Star ist also natürlich eine Wildcard. Für alles, was einem Slash-Aufgabenpfad folgt. Oder eher ein Teil des Weges. Und wir werden Navigate verwenden, was etwas Besonderes ist Element, das wir. Transportieren auch vom Reaktionsrouter Dom und wir werden dieses Navigate verwenden um zur Slash-Agenda zu navigieren. Mal sehen, wie das funktioniert. Also, wenn wir dorthin gehen würden. Und buchstäblich alles hier, Wir werden zur Tagesordnung weitergeleitet. Nun, natürlich in einer professionellen Organisation wird noch viel größer werden. Aber im Grunde, was Sie tun werden. Sehen Sie, es wird eine Art sein. Eine Variation dessen, was wir gerade gesehen haben, aber noch einmal vergrößert. Im professionellen Maßstab in einer realen Umgebung. In unserer nächsten Lektion gehen wir. Sehen Sie sich die ordnungsgemäße Struktur des Anwendungsordners an. Vielen Dank fürs Zuschauen. Tschüss.