React.js: Datenfluss innerhalb der Anwendung

Name: React.js: Datenfluss innerhalb der Anwendung
Author: Tony Davydets

Dieser Kurs behandelt wesentliche Konzepte im Zusammenhang mit Routing und Navigation in einer React-Webanwendung. Sie werden lernen, wie Sie verschiedene…

Preview the first lesson free — get full access to all 1 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

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.

Anbieter : Tony Davydets 1 Lektion · 13m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

Dieser Kurs behandelt wesentliche Konzepte im Zusammenhang mit Routing und Navigation in einer React-Webanwendung. Sie werden lernen, wie Sie verschiedene Routen handhaben und Links erstellen, um zwischen Seiten zu navigieren. Außerdem lernen Sie die Context API kennen und erfahren, wie Sie eigene Hooks erstellen können.

Routing und Navigation sind wesentliche Bestandteile jeder Webanwendung und React bietet Werkzeuge, die diesen Prozess einfach und intuitiv gestalten. Sie werden lernen, wie Sie mit dem React Router ein Routing-System für Ihre Anwendung erstellen können. Sie werden lernen, wie Sie verschiedene Routen für verschiedene Seiten definieren, wie Sie Link-Komponenten verwenden, um zwischen Seiten zu navigieren, und wie Sie Parameter über URLs übergeben.

Die Weitergabe von Daten zwischen Komponenten kann mühsam werden, wenn Ihre Anwendung wächst, insbesondere wenn Sie Daten durch mehrere Komponentenschichten weitergeben müssen. In diesem Modul lernen Sie, wie Sie die Context-API erstellen und verwenden, um Daten in Ihrer Anwendung problemlos weiterzugeben. Außerdem lernen Sie, wie Sie mit der Context-API benutzerdefinierte Hooks erstellen können, die den Prozess der Datenweitergabe in der gesamten Anwendung vereinfachen.

Schließlich werden Sie eine vorgeschlagene Ordnerstruktur für die Organisation Ihrer React-Anwendung kennenlernen. Sie werden lernen, wie Sie Ihre Komponenten, Stile und Dienstprogramme in separaten Verzeichnissen organisieren können, wodurch Ihr Code übersichtlicher und einfacher zu navigieren ist.

Was Sie lernen werden

Navigieren Sie React-Webanwendungen mit React Router
Definieren Sie verschiedene Routen für verschiedene Seiten und erstellen Sie Links zur Navigation zwischen diesen
Übergeben Sie Parameter durch URLs, um Daten zwischen Seiten zu verschieben
Verwenden Sie die Context API, um Daten in Ihrer Anwendung freizugeben
Erstellen Sie benutzerdefinierte Hooks mit der Context API, um die Übergabe von Daten zu vereinfachen
Organisieren Sie Komponenten, Styles und Utilities in eine vorgeschlagene Ordnerstruktur

Wichtige Erkenntnisse

Routing und Navigation sind wesentliche Teile jeder Webanwendung, und React bietet Tools, um den Prozess einfach und intuitiv zu gestalten.
React Router ermöglicht das Aufbau eines Routing-Systems, das Routen definiert, Link-Komponenten für die Navigation verwendet und Parameter durch URLs übergibt.
Die Context API gibt Daten in einer Anwendung frei, ohne diese durch mehrere Schichten von Komponenten zu leiten.
Benutzerdefinierte Hooks, die mit der Context API erstellt wurden, vereinfachen die Übergabe von Daten in der gesamten Anwendung.
Eine vorgeschlagene Ordnerstruktur, die Komponenten, Styles und Utilities trennt, macht Code verwaltbarer und leichter zu navigieren.

Häufig gestellte Fragen

Was behandelt dieser Kurs?

Er behandelt Routing und Navigation in einer React-Webanwendung, einschließlich Behandlung von Routen und Erstellung von Links mit React Router, Verwendung der Context API zum Freigeben von Daten, Erstellung benutzerdefinierter Hooks mit der Context API und eine vorgeschlagene Ordnerstruktur für Ihre Anwendung.

Was werde ich über die Verwaltung des Datenflusses in React lernen?

Sie werden lernen, wie Sie Daten zwischen Komponenten mit der Context API übergeben, um Daten problemlos in Ihrer Anwendung freizugeben, und wie Sie benutzerdefinierte Hooks mit der Context API erstellen, um die Übergabe von Daten in der gesamten Anwendung zu vereinfachen.

Wie wird Navigation in diesem Kurs behandelt?

Sie werden lernen, ein Routing-System mit React Router zu erstellen, verschiedene Routen für verschiedene Seiten zu definieren, Link-Komponenten zur Navigation zwischen Seiten zu verwenden und Parameter durch URLs zu übergeben.

Welche Lektionen sind in diesem Kurs enthalten?

Der Kurs umfasst drei Lektionen: Mehrere Komponenten, Routing und Navigation; Anwendungsordnerstruktur; und Übergabe von Daten und benutzerdefinierten Hooks mit Context API.

Welche Fähigkeiten sind mit diesem Kurs verbunden?

Zugehörige Fähigkeiten umfassen Create React App, Flux (React.js), React JSX, React VR, React.js (JavaScript-Bibliothek) und WebMethods Flow.