Vollständiger Leitfaden für RTK-Abfragen mit React JS

1. Einführung: Hallo und willkommen zu diesem Kurs, vollständige Anleitung zur RTK-Abfrage mit React js, kleineren Schaden, etwas Iteration. Und ich werde dein Instruktor in diesem Kurs sein. Und in diesem Kurs werden wir ein sehr leistungsfähiges Tool zum Abrufen und Caching von Daten lernen sehr leistungsfähiges Tool zum Abrufen und Caching von Daten , das als artikulative Abfrage bezeichnet wird. Wenn Sie ein React-Entwickler sind, verwenden Sie den Router möglicherweise als Statusverwaltung für Ihre React-Anwendung, um stattdessen die Anwendung zu pflegen. Und möglicherweise verwenden Sie auch Redux Zunge oder Redox Logger Middleware, um den gewünschten Effekt in Ihrer React-Anwendung zu bewältigen. redact Team hat also definitiv den neuen Ansatz zum Schreiben von Logik entwickelt. Daher wurde das Alter der Artikelabfrage durch das gleiche Reduktiv eingeführt , um das Anpassen und Caching von Daten mit der Schwärzung so einfach wie möglich zu gestalten. Und es basiert auf dem redact-Toolkit. Das bedeutet, dass Sie kein zusätzliches Paket installieren müssen , um mit Arctic jQuery zu arbeiten . Sie müssen nur ein Toolkit-Paket in Ihre React-Anwendung hinzufügen . Mit Hilfe der Artikelabfrage wird unsere Rudolf-Logik besser nachvollziehbarer und prägnanter sein. Lassen Sie mich Ihnen nun denjenigen unter Ihnen, die nicht wissen, was es ist, den kurzen Überblick über Rudolf geben. Redact Failure ist also State Management Library, die wir in unserer React-Anwendung verwenden Sie in Ihrer Anwendung verwenden werden. Nicht nur bei React, sondern auch bei der React-Bibliothek sehr beliebt. Das ist also der Überblick über den Rückgang. Lasst uns also verstehen, was wir in diesem Kurs lernen werden. Zunächst beginnen wir mit einigen theoretischen Konzepten. Als würden wir versuchen, das Kernproblem von React zu verstehen und warum wir Redux mit dem React verwenden. Dann werden wir verstehen, was ein Toolkit ist und welche APA in der Artikelabfrage geklebt ist. All diese Konzepte werden wir mit Hilfe der Pubertät verstehen. Und danach werden wir unsere Credit React-Anwendung mit Hilfe von RTK Query und JSON fix erstellen unsere Credit React-Anwendung mit . Mit Hilfe dieser Anwendung werden Sie verstehen, wie Sie eine Reihe von Endpunkten mit Hilfe der RTK-Abfrage-API schreiben . Sie werden lernen, API-Anfragen zu stellen, die erhalten, setzen, posten und löschen. Dies traf die Gesamtanwendung, die wir in diesem Kurs mit Hilfe von Hard jQuery erstellen werden. Sprechen wir nun über die Grundvoraussetzung, bevor Sie sich für Discord anmelden. Dieser Kurs ist so konzipiert, dass jeder an diesem Kurs teilnehmen kann , der daran interessiert ist, modernes Redux-Konzept zu erlernen, Sie müssen nur ein grundlegendes Verständnis von HTML, CSS, JavaScript sowie Reagieren Sie auf Basiswissen. Und am Ende dieses Kurses haben Sie das RTK-Abfragekonzept vollständig und können auch artikulierte Abfragen in Ihrem süchtig machenden React-Projekt implementieren . Sie können auch ersetzen, ob alte React-Logik in Ihrem React-Projekt mit dieser Artikelabfrage vorhanden ist. Was warten Sie darauf, an diesem Kurs teilzunehmen um all diese modernen Konzepte zu lernen? Und wenn Sie Fragen oder Anregungen haben, können Sie sich jederzeit an mich wenden. Ich werde mein Bestes geben , um Ihre Abfrage zu lösen. Das war's also. Von meinem Ende sehe ich Sie im Kursbereich. 2. Was ist Redux und warum wir sie verwenden?: In diesem Video werden wir zuerst das Kernproblem des React js Nachlassmanagements verstehen . Wir haben unsere Haupt-App-Komponente. Dann haben wir unsere Unterkomponente bekommen. Wenn wir einen Text ändern wollen, können wir dies nicht direkt tun. Stattdessen muss ich einen Elternteil informieren und den Text dort ändern. Und wenn ich eine zusätzliche Komponente bekomme, wird es noch komplexer. Deshalb haben wir eine Lektüre , von denen ein anderer Ansatz verfolgt wird. Also hier haben wir unsere Ansicht, unsere Anwendung, und in dieser Anwendung wird in einer bestimmten Komponente versandt und handeln. Dann Actionmarke durch den Reduzierstück. Reducer eher einfacher Job oder Aufgabe. Es wird eine Aktion ergreifen, dann wird es alle Manipulierten brauchen, und es wird einen neuen Staat geben. Diese Manipulation wird passieren, backen Sie auf dem Unveränderlichen. Das bedeutet, dass es den alten Vektor nicht ändert. Es wird die gesamte Strecke als Grundlage nehmen und dann eine brandneue Kopie aller abgebildeten Elemente erstellen , die mit den Änderungen in der Ploidie unberührt geblieben sind. Wir schaffen einfach einen neuen Aufhebung und geben diesen neuen Zustand zurück. Dies unveränderlich gibt Ihnen einen eindeutigen Status in Ihrer Anwendung. Jetzt bekommen wir einen neuen Zustand, der reduziert werden kann dann wird er in einem Geschäft gespeichert. Und wir werden nur ein Geschäft in unserer Anwendung haben. Dieser Vektor hat eine einfache Aufgabe, in Richtung unseres Staates zu drängen. Deshalb heißt es Restore. Möglicherweise haben Sie einen Mehrfachreduzierer, aber wir haben nur einen, der in unserer Anwendung gespeichert ist. Dann abonnieren Sie unsere Anwendung diesen Shop. Wann immer es veraltet ist, werde aktualisiert. Neuer State Park im Laden. Der Store sendet es automatisch an die gesamte Komponente und wird weitergeleitet, und die Anwendung wird aktualisiert. wir nun zum vorherigen Beispiel zurück, in dem wir unsere App-Komponente mit anderen Komponenten hatten. Und jetzt haben wir auch ein Geschäft. Wenn wir nun etwas ändern wollten, die Benutzerkomponente von MainComponent, dann werden wir versenden und handeln. Dann führt der Staat es ein. Und dann liegt uns der Weg allen Komponenten in diesen Daten am Herzen , was reduziert ist und warum wir Redux in React js verwenden. 3. Was ist Redux-Toolkit ?: Lassen Sie uns nun verstehen, was der insgesamt gute Leser zu liquidieren ist , der auch für die Verwaltung von Anwendungen verwendet wird, wenn Sie eine React-Anwendung auf effiziente Weise aussagen. Es werden einige Batterien zur Verfügung gestellt, die ein Werkzeugset für eine effiziente Entwicklung enthalten sind. Diese Batterien enthalten Toolset Begriff, sehen hier ein bisschen schick aus, aber Sie werden diesen Begriff später verstehen. Router waren bereits eine beliebte Option für die Staatsverwaltung in unserer React-Anwendung. Warum ist dann redact Toolkit erforderlich? Mit dem redact Toolkit war so viel Code erforderlich, um es zu konfigurieren, um dieses grundlegende Level zu optimieren. Und damit zu viel Boilerplate-Code , der unseren Code macht, lassen Sie ihn effizient reinigen. Außerdem müssen zu viele Pakete installiert werden, um eine skalierbare Anwendung zu erstellen. Mit traditionellem Redox haben wir früher Action und Reducer in einer separaten Datei geschrieben . Und das wird komplexer, wenn unsere App Sie dazu bringt, diese Herausforderung anzugehen , ein Leser-Toolkit entwickelt hat. Redact Toolkit ist ein besserer Ansatz um Logik loszuwerden. Insgesamt betrachtet der Leser seinen Zeitraum der Reduzierung und Entwicklung durch Einbeziehung des Lesers Corbett redact Tool gute Absätze, die Meinung nach gefüllt sind, um eine native Anwendung zu erstellen. redact Toolkit ermöglicht es Entwicklern also, einfachen, sauberen Redux-Code zu schreiben. Hier geht es also um redact Toolkit und warum wir es mit React verwenden. Ich hoffe, du verstehst diesen ausgefallenen Begriff jetzt, der ein Batterie-Toolset ist. Hier dreht sich also alles um Toolkit. Lasst uns nun verstehen, dass dieser Leser mit einem grundlegenden Szenario gut aussieht . Angenommen, wir müssen eine Zähleranwendung erstellen. Wir müssen es schaffen, dass es immer noch fünf ist. Ich zeige Ihnen die traditionelle Herangehensweise mit traditionellem Reduzieren. Also lesen wir normalerweise Reducer und Unfall in einer separaten Datei. Wie Sie sehen können, haben wir hier x und dot js, in denen wir zwei x Zehn haben zu erhöhen oder den Zählerwert zu dekrementieren und eine Dot-JS-Datei einzuführen, haben wir eine Logik, um eine Zählerwert oder dekrementieren Sie den Zählerwert des Theta. Traditionell schwärzt. Angenommen, lassen Sie uns jetzt sehen, wie wir mit dem Leser umgehen, um gut auszusehen. Im redact Tool könnten wir unseren Reduzierer und unsere Aktion in derselben Datei umschreiben . Sie können sehen, dass wir unsere Aktion bei Reducer unter dem Create Slice durch den Toolkit-Ansatz geschrieben haben unsere Aktion bei Reducer unter dem . Und Sie können den Code viel mehr Konzept machen indem Sie create verwenden. Sowohl der Reduzierer als auch ich können so unter dem Live geschrieben werden, indem man diesen Code sieht, ein Raster damit definiert und die Aktion sauberer wird. Es sind Daten zu schauen. Die Switch-Anweisung muss nicht mehr verwendet werden, um die Aktion mit dem entsprechenden Hersteller zu verwalten. Und noch eine Sache, die Sie haben könnten, beachten Sie hier, dass wir den Wert in der Reducer-Funktion direkt mutieren , anstatt einen neuen zu aktualisierenden Wert zurückzugeben. Dies geschah tatsächlich, weil das Redigt-Tool die Bibliothek verwenden konnte , die es ermöglicht , die Mutierung logisch zu schreiben und zu reduzieren. Hier dreht sich alles um das Reader-Toolkit mit dem Basisszenario. 4. RTK Abfrage verstehen: Lasst uns jetzt verstehen, was eine RTK-Abfrage ist. Rtk-Abfrage entweder leistungsfähiges Tool zum Abrufen von Daten und Protokollierung. Es wird hauptsächlich zum Abrufen des Data-COM-Servers und seines Caches verwendet, die Daten für die zukünftige Verwendung. Und hier wird auch erwähnt , dass es dazu dient, häufige Fälle für das Laden von Daten in Webanwendungen zu vereinfachen Laden von Daten in Webanwendungen die Nische zum Handschreiben von Datenabrufen und Zwischenspeichern der Logik selbst zu eliminieren . Hier müssen wir keine Logik manuell schreiben, unseren Fehlerteil laden und aufheben, wenn wir eine API-Anfrage stellen müssen. Was ist also generell passiert? Articulate Query kümmert sich um all diese Aufgaben hinter der Szene. allgemeine Artikelabfrage bot ein leistungsstarkes Toolset zum Definieren der API-Schnittstellenebene für unsere Anwendung. Und Sie müssen kein zusätzliches Paket installieren , um mit der Artikelabfrage zu arbeiten , da Artikelabfrage auf der anderen API im Reader Toolkit-Paket basiert . Sie müssen also keine Artikelabfrage zusätzlich in Ihrer Anwendung installieren . Lassen Sie uns nun sehen, welche APA, einschließlich Wissenschaftler RTK-Abfragedatei, um API zu erstellen. Creative PI ist also der Kern der Artikelabfragefunktion, Sie eine Reihe von Endpunkten definieren können. Beschreiben Sie, wie die Daten von einer Reihe von Endpunkten abgerufen werden, einschließlich der Konfiguration der Transformation dieser Daten. Und in den meisten Fällen sollten wir dies einmal pro verwenden. Insgesamt definieren wir in kreativer VA einen anderen, anderen Endpunkt, den Sie eine Reihe von Endpunkten aufrufen können. Hier dreht sich alles um das Kreative. Sprechen wir nun über die Basisabfrage. Glaubensbasierte Abfrage. Es ist eine kleine Wrapper um die Passform herum. Um die Anfrage zu vereinfachen. Innen ist mit Abfrage gefüllt, definiert Basis-URL für unsere API. Sprechen wir nun darüber der API-Anbieter des API-Anbieters als Anbieter verwendet werden kann , wenn kein Reduct gespeichert ist. Wenn wir es nicht in Ihrer Anwendung gespeichert haben. Sie können also diesen API-Anbieter verwenden. In diesem Kurs werden wir diesem Ansatz nicht folgen. Wir werden dem traditionellen Ansatz folgen. Im Grunde bringen wir den Anbieter der React redact Library mit und wir wickeln unsere App-Komponente mit dem Anbieter und wir geben unsere Restaurierte an die App-Komponente weiter. Dieser APA stellte Ansatz zur Verfügung, den wir in diesem Kurs nicht verwenden werden . Lassen Sie uns nun über das letzte Setup-Listener-Dienstprogramm sprechen, das verwendet wird, um die Recherche über sie zu ermöglichen und über die erneute Verbindung nachzudenken, die wir hier haben. Hier dreht sich alles um die Artikelabfrage. 5. Projektaufbau: Leute, jetzt werden wir unser React-Projekt einrichten. Ich verwende die TypeScript-Vorlage. Kopieren wir diesen Befehl hier. Und jetzt gehe ich in mein Verzeichnis. Hier. Ich öffne eine Eingabeaufforderung und fügen wir diesen Befehl ein. Und ich ändere den App-Namen. Also habe ich RTK Bindestrich Strom. Lasst uns Enter drücken. Es dauert etwa zwei bis drei Minuten, um alle notwendigen Abhängigkeiten zu installieren. Ich bin zurück 12, die ganze Abhängigkeit, die gesagt wird, überleben. Unser Projekt ist jetzt erstellt. Und ich habe dieses Projekt bereits in Visual Studio Code geöffnet . Gehen wir zuerst in den VS-Code und öffnen wir die package.json-Datei. Mal sehen, was wir in unserer package.json-Datei haben. Sie können also sehen, dass wir bereits ein Toolkit und ein dxdt Redux-Paket entfernt ein Toolkit und ein dxdt Redux-Paket weil wir diesen Befehl verwendet haben , um unser React-Projekt zu erstellen. Wenn Sie diesen Befehl verwenden, müssen Sie das Reader-Toolkit nicht manuell installieren und ydx reagieren. Deshalb habe ich diesen Befehl verwendet , um unser React-Projekt zu erstellen. Wir haben unser Reduct Toolkit und unser Herzindex-Paket. Was müssen wir tun? Bisher? Ich werde hier ein bisschen aufräumen. Wir brauchen also keinen Featureordner für dieses Projekt. Lasst uns das entfernen. Wir alle brauchen diesen App-Ordner auch nicht. Nehmen wir an, entferne das auch. Eine App-Punkt-TSX-Datei. Was wir kämpfen müssen, werde ich all diese unerwünschten Inhalte entfernen , die für unser Projekt nicht erforderlich sind. Lasst uns das entfernen. Lasst uns diese Richtung behalten. Als hätte ich die RTK-Abfrage nicht gemocht. Sagen wir mal, bewege das ganze Ding. Entfernen wir auch die Testdatei. Und eine ausführliche oder TSX-Datei. Erröten, um hier diese Codezeile zu kommentieren. Und auch übrig, um diesen zu kommentieren. Wir werden dies später abkommentieren sobald wir unser Redakt-Tool, das Raster in dieser Verpflichtung, konfiguriert haben das Raster in dieser Verpflichtung, und auch diese Importlinie kommentieren und diese Reihe wichtig sind, da später erforderlich ist bevor wir npm machen, installieren Sie einige Pakete, ich gehe in das Verzeichnis und ich werde Paket wie React, Router down installieren. Und ich rufe auch reaktiv an, weil wir auch in diesem Projekt die Drehmomentbenachrichtigung verwenden werden. Also entweder die Fehlermethode, unsere Erfolgsnachricht, lassen Sie uns diese beiden Pakete zuerst installieren. In der Zwischenzeit werde ich eine db.json-Datei erstellen , weil wir den JSON-Server in diesem Projekt verwenden werden. Lassen Sie uns eine db.json-Datei im Stammverzeichnis erstellen. Hier bezahle ich ein paar Daten. Also habe ich gerade ein paar erste Daten gemalt , damit wir mit unserer Arbeit beginnen können. Und Sie können die Daten auch aus Urin erstellen. Sie müssen Add name injizieren, Sie werden sich an eine ID wenden. Um diesen JSON-Server ausführen zu können, müssen wir ein Skript in unsere package.json-Datei schreiben. Ich wähle hier drüben ein Drehbuch aus. Sie sehen das erforderliche Skript um unseren JSON-Server ausführen zu können. Jason Cerebral wird 5 Tausend Hafen einschalten. Mal sehen, ob unser Paketinstallationsprogramm nicht. Also wurde unser Paket groß. Jetzt machen wir es hier und ich werde auch JSON-Server-Anzeigen ausschneiden. Nun, das ist unser Projektverzeichnis und ich füge hier eine weitere Eingabeaufforderung an. Und ich mache hier und den Server. Wir können auf diese Ressource über diese URL zugreifen. Kopieren wir diese URL. Irrtümlich. Scott sagt ab. Starten wir diesen Jetsons-Server noch einmal. Wir können auf diese Ressource über diese URL zugreifen. Also lasst uns das kopieren. Gehen wir in den Browser. Sie können sehen, dass wir alle Daten anzeigen können , die wir in unserer Datei und db.json haben. Das sind also unsere ersten Daten, die ich in meine db.json-Datei eingefügt habe. Dies sind unsere ersten Daten, die in unserem Browser unter dieser URL angezeigt werden. 6. Struktur: Jetzt sammle ich Sitzen oder Projekte. Ich erstelle hier ein paar Ordner. Ordner Ich werde Seiten haben. Der nächste Ordner, den wir haben werden allgegenwärtig. Nächsten Ordner werden wir Modell haben , weil wir hier TypeScript verwenden. Wir müssen also ein Modell für diese Kontaktdaten erstellen. Jetzt werden wir eine Tour unter der Quelle haben. Lassen Sie uns also hier erstellen wenn dor dot Ds, nicht JS, weil wir TypeScript verwenden, also könnte es TSX sein. Hier erhalten Sie einen Fehler. Bisher. Nun, was wir hier tun können, exportieren, const store. Wir können Ihrem Konsolenpunktprotokoll die Fehlerleiste geben. Jetzt werden wir das später entfernen. Was ich jetzt tun werde, lehne ich diese Route ab. Also erstelle ich hier ein paar Dateien. Es wurde hinzugefügt, ich werde editiert erstellen, bekam THF. Hier verwenden wir dieselbe Datei zum Hinzufügen des neuen Inhalts oder Aktualisieren des beendenden Kontakts. Dafür hat es hinzugefügt. Wir werden auch eine CSS-Datei für diesen Fall haben, also habe ich es dot CHS hinzugefügt. der nächsten Seite werden wir ein Zuhause haben, auf dem wir den gesamten Kontakt in einer Tabellenkomponente anzeigen werden. Dafür verwenden wir auch die CSS-Datei. Also Home-Dot-CSS. Die letzte Seite, die wir auf ganzer Seite haben werden, auf der wir ein einziges Kontaktdetail anzeigen werden. Dafür werden wir auch CSS-Datei info dot css verwenden. Und im Moment generiere ich hier nur ein reaktives Snippet. Und ich werde nur die Überschrift geben weil ich es diese Route in unserer Datei app.js ablehnen werde . Generieren wir dieses Snippet auch hier. Es wird zu Hause sein. Und lassen Sie uns ein Snippet in unserer Eingabe-Punkt-TXT-Datei generieren. Es wird in vollem Umfang sein. Gehen wir zuerst zu unserer Datei app.js, der ich all diese Route vom React Router aus registrieren werde . Wir müssen die linke obere Komponente mitbringen. Wir brauchen hier Routen, Routen, Browser, Router, und lassen Sie uns diesen entfernen. Und hier benutze ich den Browser-Router. Routen, auf denen ich den ganzen Dürreweg ablehnen werde, werden die Heimroute sein. Wir verwenden Year Dürre, obwohl wir nicht das genaue Keyword angeben müssen. Also hier verwenden wir die aktualisierte Version des React Routers nach unten. Sie können sehen, dass in unserem Paket oder JSON-Datei reagiert, mit Dr. Dom verbittert wurde. Sie werden sehen, dass wir hier auch keinen Switch verwenden. Wir verwenden Routen und hier wird es keine Komponente sein, es wird das Element sein. Wir können unsere Home-Component VS-Code diese Komponente automatisch für mich importieren. Lassen Sie uns das ein paar Mal kopieren. Dies wird der Add, Add Context sein. Wir werden die hinzugefügte Komponente mitbringen. Nun wird dieser der Kontakt bearbeiten sein. Wir werden den Kontext lesen und basierend auf der ID verwenden wir dieselbe Komponente, aktualisieren jedoch den auswerfenden Kontakt. Die Lebensdauer, wir werden eine Eingabeseite haben , auf der wir das einzelne Kontaktdetail sehen können. Es wird involviert sein. Und wir werden der einzige Ansprechpartner sein. Es basiert auf der ID. Hier. Wir werden die Info-Komponente mitbringen. Lassen Sie uns im Browser überprüfen , ob all diese geroutet, abgelehnt oder nicht. Gehen wir in den Browser. Sie können die Heimroute sehen, die als Detektor bezeichnet wird. Sehr schlecht im Kontakt. Sie sagten alle surjektiv Lassen Sie uns den Kontakt bearbeiten überprüfen. Im Falle eines Kontakts haben wir uns mit ihrem Ausweis konfrontiert. Es wird also dieselbe Seite gerendert, da wir dieselbe Seite verwenden , bevor wir den neuen Inhalt hinzufügen oder den vorhandenen Inhalt aktualisieren. Lassen Sie uns nun auch die Informationen überprüfen, falls dies falsch ist. Also werden wir den Ausweis angeben. Wurde auch abgelehnt. Wir haben unsere alte Route in dieser Anwendung erfolgreich abgelehnt . 7. RTK Query: Jetzt werden wir anfangen, an unserer RTK-Abfrage zu arbeiten. Wie Sie sehen können, haben wir in unserer db.json-Datei bereits einige Anfangsdaten. Ich schreibe eine Abfrage, um allen Daten zu begegnen , die wir in unserer db.json-Datei haben. Ich erstelle hier eine Datei und ernte einen Ordner. Der Dateiname wird wie Kontexte sein, APA-Punkt TSX. In dieser Datei erstellen wir eine Reihe von Endpunkten mit Hilfe von API aus Toolkit erstellen. Und wir müssen zu Query gehen und dann reagieren. Und wir müssen Create API und glaubensbasiertes sehr Album mitbringen , in dem wir unsere Basis-URL bereitstellen werden . Und wir müssen hier auch ein Modell erstellen. Es wird also wie Kontaktpunktmodell sein, Punkt-ts. Darin erstelle ich eine Schnittstelle für unseren Kontakt. Sie können sehen, dass unsere Inhalte eine ID, einen Namen, eine E-Mail und einen Kontakt haben . Lassen Sie zu dieser Kontext-API-Punkt-TXT-Datei gehen. Hier. Bringen wir diese Schnittstelle aus unserem Modellordner. Kontakt. Jetzt erstellen wir hier unsere Endpunktreihe mit dem Album API erstellen, exportieren, kontakte API. Wir werden Ihre API verwenden. Hier. Ich werde ihren Weg reduzieren. Dies ist erforderlich , da wir diesen Dienst mit unserem Code verbinden müssen . Wir können Ihnen nur eine Kontext-API für Reduzierteile geben. Hier werden wir unsere Basispaarung haben , in der wir unsere Basis-URL angeben werden. Und Thaddeus glaubensbasierte Abfrage. Unsere Basis-URL, http localhost. 5 Tausend. werden wir einen Hass auf den Endpunkt erzeugen. Wir werden dein Muster benutzen. Danach. Wir werden unsere Abfrage hier erstellen. Kontexte Punktabfrage. Hier. Wir werden unsere All-Abfrage in Form eines Objektbereichs abrufen. Wir müssen dieses Modell zur Verfügung stellen. Und wir müssen diesen Bereich angeben, weil unsere, unsere, wenn Tour in einem Array von Objekten in unserer DB-Dot-JSON-Datei kontaktiert wurde. Das siehst du hier. Darum habe ich es getrennt. Das zweite Argument wird das verdrahtete sein weil wir bei dem Argument nichts weitergeben. Es wird verkabelt sein. Darin werden wir eine Abfrage schreiben. Und hier sind wir. Bitte geben Sie unseren Endpunkt an. Es wird Kontakt sein. Diese Abfrage zeigt im Grunde ein Knie. Hoffe, wir kriegen diesen Kniehaken so. Von unserer Kontakt-API. Der Kniehaken wird wie riesige Kontext-Abfrage sein. Wie auch immer der Name du dir geben wirst, du wirst einen neuen Haken auf diese Weise aufdecken. Mal sehen, ob Sie hier die Daten angeben. Jetzt wird unser neuer Haken zu den USA. Verwenden Sie die Datenabfrage, okay? Es liegt an dir, wie auch immer der Name du geben wirst. Die Abfrage wird also geändert. Es wird jetzt Kontext-Abfrage verwenden. Ich hoffe, du verstehst meinen Standpunkt hier. Jetzt sind wir mit unserer ersten Abfrage fertig, die für das Abrufen der Daten verantwortlich ist , die wir auf unserem JSON-Server haben. Wir müssen unseren Shop konfigurieren. Also lassen Sie uns diesen Code entfernen und wir werden ihn in unser Toolkit konfigurieren. Also konfigurierter Speicher. Wir müssen auch diese Kontext-API, den Dienstordner, die Kontakt-API mitbringen . Hier werden wir konfigurieren. Unser Export ist gespeichert, entspricht dem Konfigurieren des Speichers. Hier benutze ich es. Es ist Kontexte API Dot Reducer Pfad. Ich muss den Reducer-Pfad in unserer Kontext-API-Punkt-TXT-Datei angeben , damit er mit unserem API-Punktreduzierer für historische Kontexte verbunden werden kann . Und hier benutze ich auch Middleware, Middleware. Und ich werde Standard-Middleware verwenden. So gute Standardeinstellung, Middle Ware. Gute Standard-Middleware. Erobert. Und wir werden unsere Kontakt-API umwandeln. Mit Middleware. Wir sind mit der Store-Konfiguration fertig. Gehen wir nun in die Indexpunkt-TXT-Datei. Und wir können einfach alle wichtigen Behandlungen und diese auch, den Anbieter, auskommentieren alle wichtigen Behandlungen und diese . Wir schlagen den Weg von if torr auf. Jetzt befindet es sich im Quellordner, sodass wir den Speicherplatz anhand dieses Pfads angeben können. Jetzt können wir diesen überprüfen, ob wir unser Reduct Toolkit erfolgreich konfiguriert haben oder nicht. Wenden wir uns an den Browser. Lass uns auf die Homepage gehen. Lassen Sie uns unser Reduktionstiefen-Tool öffnen. Mal sehen, ob der Staat ist. Jetzt können Sie sehen, dass wir diese Abfrage erhalten haben , ist Mutation und Abonnements. Und das, wenn wir unser Reduct Toolkit in dieser React-Anwendung erfolgreich konfiguriert haben. 8. Die Daten mit RTK Query abholen: Jetzt werden wir alle Kontexte, die wir in unserer db.json-Datei haben, in einer Tabellenkomponente anzeigen . Lasst uns also in den VS-Code gehen. Sie können also sehen, dass ich bereits einige Daten in unserer db.json-Datei habe. Zuerst zeige ich die Daten in dieser Tabellenkomponente in der Datei home.html an. Wir werden das von React 5k aus machen. Lasst uns den US-Effekt bringen. Wir müssen auch den Link-Modus, React Router dom, bringen. Danach brauchen wir auch Toast. Demo-Reaktor. Bringen wir das auch mit. Wir werden auch diese CSS-Datei mitbringen. Also importiere nach Hause, kein CSS. Ich bezahle den CSS-Code für diese Datei. Sie sich keine Sorgen um all diesen CSS-Code, denn ich habe bereits bei dieser CSS-Datei zu dieser Vorlesung. Diese CSS-Datei finden Sie in dieser Vorlesung selbst. Kommen wir zu dieser Datei home.html. Nun, was wir tun müssen, werden wir verwenden, dass Sie die Anfrage kontaktieren , um die Daten abzurufen, die wir in unserer db.json-Datei haben. Verwenden Sie die Kontaktanfrage. Sie können sehen, dass wir aufgerufen werden , importieren Sie diesen automatisch. Was müssen wir nun tun, wenn der Datenbankserver schrittweise eingestellt ist, also wird unser Auditor im Grunde genommen in den Daten präsentieren. Sie können sehen, dass wir in diesen Daten alle Daten haben werden , die wir in unserer db.json-Datei haben. Jetzt können Sie auch noch mehr Immobilien anziehen. Sie können auch Like Loading mitbringen. Laden können Sie hier auch jeden Switching verwenden. Sie können sehen, dass diese Abfrage in verschiedenen, unterschiedlichen Eigenschaften bereitgestellt wird, wie einfacher jeden Pitching-Erfolg. Du kannst diesen benutzen. Und wir werden nur Daten verwenden , die n Fehler laden auch Teil. Nach Ihrer Bequemlichkeit können Sie auch andere Eigenschaften verwenden, wenn Sie möchten, aber ich werde nur die drei Eigenschaften aus dieser riesigen Kontextabfrage verwenden . Jetzt haben wir alle Daten. Jetzt müssen wir Daten in einer Tabellenkomponente anzeigen. Lasst uns diesen entfernen. Ich gebe ein paar Atlantis Fliesen Jahr. Lassen Sie uns hier Marge Top 100 Pixel geben. Danach werde ich einen Link haben. Grundsätzlich wird es nie auf die Kopfkontaktseite gelangen . Kontakt. Dann haben wir einen Button mit dem Klassennamen. Fügen Sie den Wert des Umschlags mit dem Add-Kontakt hinzu. Jetzt, nach diesem Link, werden wir ein paar Pause machen. Dann haben wir eine Tabelle mit der Stiltabelle für Klassennamen. Nun, diese Tabelle scheitert die Tabelle ist falsch, also wird es eine Tabelle wie diese Art sein. Jetzt werden wir Tischkopf zuerst haben, dritte Tabelle, wir werden Tabellenzeile haben. Dann werden wir Tischkopf haben. Die erste Spalte wird die ID sein. Wir können Ihnen eine Kachel wie eine Länge Mitte, Linie, Mitte geben. Und ich werde diese Codezeile ein paar kopieren. Dies wird Name, E-Mail, Kontakt mit der Aktion, in der wir einen Löschvorgang ausführen können , es RTK-Abfrage. Jetzt nach diesem T-Kopf formatieren wir diesen. Nach diesem abgestuften werden wir unseren T-Körper haben. Im Hauptteil werden wir unsere Daten anzeigen , die wir in unserer db.json-Datei haben. Also Datenpunkt-Map, Datenpunkt-Map. Wir können Artikel haben. Es könnte jeden Sinn haben. Wir verwenden hier TypeScript, also müssen wir dieses bereitstellen. Andernfalls erhalten Sie einen Fehler. Index wird auch der Feind sein. Jetzt danach werden wir fummelig sein. Gibt die Tabellenzeile zurück. Wir müssen hier den Schlüssel definieren. Punkt-ID des Artikels. In der Tabellenzeile. Wir werden nur den ersten Tabellenkopf für Fotobearbeitung haben. Wir können Ihnen eine Bereichsreihe geben. Hier werden wir Index plus eins verwenden , da sie in der Tiefe von 0 angefangen haben. Wir werden also ethisch den Index plus eins erhöhen . Das wird also keine ID sein, Sie können hier eine Nummer angeben. Es sollte nicht IID sein. Und was müssen wir danach tun? Jetzt? Wir werden unsere Tabellendaten darin haben und können unseren Artikelnamen anzeigen. Ich kopiere ein paar Mal. Diese Art von Board, dies wird in der letzten Spalte, in der wir eine Aktion haben, per E-Mail Kontakt aufnehmen . Bei dieser Aktion werden wir drei Tasten zum Ausführen der Operation, Löschvorgänge und V-Betriebsintervall-Daten haben. Wir werden den Link hier haben. Und du musst hier zwei zur Verfügung stellen. Wir wollten zur Bearbeitungsseite navigieren . Lasst uns zuerst die Route nehmen. Wir haben Kontakt hinzufügen, dann Kontakt bearbeiten, Kontakt, dann Dollar, Artikelpunkt-ID. Danach werden wir in den Lebensraum gehen. Dann behalten wir hier den Klassennamen, Schönheit und Schönheit und bearbeiten. Nach dieser Schaltfläche haben wir eine weitere Schaltfläche, haben wir eine weitere Schaltfläche um den Löschvorgang auszuführen. Also Button mit dem Klassennamen, btn, btn Bindestrich Lily. Schaltfläche „Auswerten“ wird das Löschen sein. Wir werden bald auch hier die onClick-Methode definieren. Definieren wir zuerst den Button. Jetzt haben wir einen Ansicht-Button, der zu einer einzelnen Kontaktseite navigiert. Es wird auch eine Schaltfläche mit dem Klassennamen, btn, btn Bindestrich haben. Der Wert einer Schaltfläche ist die Ansicht. Wir navigieren zur Infoseite. Info. Wir können hier Dollar angeben. Hier müssen wir die ID angeben. Schauen wir uns auch die einzelne Kontaktseite an. Nur mit den Infos. Gehen wir zur Datei home.html. Und wir können fünf überprüfen, wo unsere Daten in der Tabellenkomponente angezeigt werden oder nicht. Jetzt können Sie sehen , dass wir die Daten in einer Tabellenkomponente sortieren können . Wir haben einen Namen, eine E-Mail, einen Kontakt und eine Aktion. Jetzt werden wir auch dieses Laden verwenden. Also können wir hier verwenden Licht ist Loading ist wahr. Dass wir einige Methoden wie das Laden zeigen werden. Okay, lass uns in den Browser gehen und wir können diesen auch überprüfen. Lasst uns diese Anwendung neu laden. Jetzt können Sie sehen, dass sie einen kurzen Moment, wir bekommen diese Ladung. Okay. 9. Fehlerbehandlung: Lassen Sie uns auch diesen Fehler verwenden. Bisher Fehler, ich werde den US-Effekt hier verwenden. Lassen Sie uns einen enormen Effekt verwenden. Hier. Ich werde das unabhängige Theater bei diesem großen Effekt nur laufen, wenn wir irgendeinen Fehler haben. Wir können dir Methoden wie Toast geben, wie etwas. Wir können das auch nehmen, ob es funktioniert oder nicht. Was ich jetzt machen werde, gehen wir zur Content API-Punkt-CSS-Datei. Und hier können wir das einfach ändern. Also lasst uns das ändern. Nehmen wir das hier. Gehen wir in den Browser. Aktualisieren Sie das hier. Wir kriegen nichts. Lassen Sie die Konsole diesen protokollieren. Eigentlich bekommen wir einen Konsolenprotokollfehler. Ob wir irgendetwas schneiden oder nicht. Gehen wir in den Browser und aktualisieren Sie diesen. Sie können also sehen, dass wir ein Objekt haben und den Status haben , wenn wir die Benachrichtigung nicht erhalten, da wir unseren Reaktor aktiv hoch in der App-Punkt-TXT-Datei nicht konfiguriert haben unseren Reaktor aktiv hoch in der App-Punkt-TXT-Datei nicht konfiguriert . Also müssen wir diesen Reaktor konfigurieren. Dann können nur wir die Benachrichtigung sehen. Also lasst uns das zuerst machen, ich werde nur die zwei Zeilen der Importanweisung auswählen , die sich auf den Reaktor bezieht. Und wir können den Container benutzen. Gehen wir in den Browser. Jetzt können Sie sehen, dass wir diese Methode haben , als wäre etwas schief gelaufen. haben wir auch probiert. Nehmen wir an, dass wir unsere Änderungen hier rückgängig machen. Es werden Kontexte sein. Gehen wir in den Browser. Jetzt sieht alles gut aus. Als Nächstes werden wir daran arbeiten den Kontakt hinzuzufügen, klicken Sie auf Inhalt hinzufügen. Dann werden wir hier eine tödliche Solarpark-Komponente sein, in der entweder Kontakt, Name, E-Mail und Kontakt bereitgestellt werden können . Also lasst uns das im nächsten Video machen. 10. Schreiben von POST RTK: Um also neue Zeitkontexte hinzuzufügen, schreibe ich hier eine Abfrage. Also schreibe ich eine Anfrage wie bei Kontakt. Und hier schreiben wir unser Builder-Muster, Builder-Punkt-Mutation , da wir neue Daten hinzufügen. Also hier müssen wir eine Mutation schreiben. Was wir hier tun können, wird das erste Argument das Objekt sein, da wir ein Kontaktdetail in einem Objektformular senden werden. Und dann unser Kontakt. Danach müssen wir hier abfragen. Dann kontaktiere. Wir werden einen Kontakt von unserer Komponente erhalten. Dann müssen wir die URL angeben. Die URL ein bisschen Kontext-Methode , die wir mit PHP haben. Bisher werden beide durch das Hinzufügen einer neuen Kontaktmethode hinzugefügt. Dann Körper, Körper, wir werden den Kontext senden , den wir erhalten Come-Out-Komponente. Wir haben für jeden Kontakt bezahlt. Hier. Jetzt stellen wir hier einen neuen Haken frei. Wir werden einen neuen Haken schreiben bei Kontaktmutation verwendet wird. Wir sind fertig mit dem Abfrageteil, der sich auf das Hinzufügen eines neuen Kontakts in unserer JSON-Datei bezieht . 11. Form: Jetzt müssen wir eine Formularkomponente in dieser hinzugefügten ID-Punkt-TXT-Datei erstellen . Also lasst uns das von React machen, ich werde einen enormen Zustandseffekt bringen. Von React, Router Dom. Wir müssen US para mitbringen und navigieren. Wir werden in Klammern später benötigen , sobald wir den Update-Vorgang ausgeführt haben. Jetzt brauchen wir auch Jugend-Navigation, um nach dem Hinzufügen eines neuen Kontakts nach Hause zu navigieren. Es ist auch erforderlich. Bringen wir auch die Zehen mit. Lasst uns den Toast ausdrucken. Lassen Sie uns diese DHS-Datei auch für diese Seite mitbringen. Also habe ich es dot-CSS hinzugefügt. Ich wähle hier den CSS-Code und diese CSS-Datei aus. Und mach dir keine Sorgen Leute, ich habe bereits CSS-Datei an diese Vorlesung angehängt, damit du sie von dort aus bekommen kannst. Lasst uns nun zuerst an unserer Formularkomponente arbeiten. Also definiere ich eine Ausgangsstatus- oder Statuskomponente. Anfangs. Name, E-Mail und Kontakt. Nennen wir deinen Namen. Sollte in Putty E-Mail mit Empathie sein. Kontakt, der das Impetigo sein wird. Jetzt definiere ich hier einen Staat, den Kostenwert. Stellen Sie ein. Wert. Normalerweise geben Sie an. Ich werde diesen Ausgangszustand hier passieren. Jetzt kann ich all diesen Wert aus unserem Formwert nehmen. Wir können Taxa wie Name, E-Mail und Kontakt machen. Und wir müssen auch, auf die Bemühungen von uns hin zu einer navigierenden Variablen navigieren, auch zu dieser auswählen. Grundlegende Sache, die wir hier gemacht haben. Was müssen wir zuerst machen? Ich arbeite zuerst an unserer Formularkomponente. Lassen Sie uns diesen entfernen, beschließt zu markieren. Ich werde ein wenig Inline-Styling bereitstellen. Das ist wieder Marge, Top 100 Pixel. Ich werde hier sein. Hier werde ich jemanden abrufen, der die Zeile erzählt. Auch hier gibt es eine dünne Linie, die aussagekräftig ist. Ich habe ein Widerspruch hier abgebildet. Auf diese Weise oder die Formularkomponente befindet sich in der Mitte. Danach werden wir ein Label haben, das wie ein Name sein wird. Denn es wird der Name sein. Wir werden InputField haben. In diesem werden wir eine Typ-ID haben. Nennen. Name wird nur Name sein. Der Platzhalter wird wie Name sein. Dann können wir deinen Namen nennen. Und wir werden Veränderungen haben. Hängen Sie auch davon ab. Die Handle-Eingabeänderung. Definieren wir dieses. Handle Eingabeänderung Außenseiter zurückgeben. Lassen Sie uns auch das Handle senden definieren, Einreichen durchführen, Senden behandeln. Wir können Handle Summit hier benutzen. Beim Absenden. Absenden. Beide Funktionen erhalten ein Ereignis. Wir werden später an dieser Funktion arbeiten. Jetzt kopiere ich diese Eingabe für ein paar Mal in unsere E-Mail und unseren Kontakt. Dies wird jetzt eine E-Mail. Dies wird die E-Mail sein. Die E-Mail-ID wird per E-Mail senden, Name wird die E-Mail sein. Kann Ihnen eine E-Mail geben die mit der E-Mail und der Lichteingabe für den Kontakt ausgewertet wird. Kontakt. Dies wird Kontakt. Dies wird die einzige Zahl sein. Lassen Sie uns Ihnen eine Typnummer geben. Wird Kontakt, Name wird Kontakt. Hier wird es in Kontakt sein. Zahl. Wert wird zu Kontakt. Wir haben zwei Warnungen hier. Da wir also TypeScript verwenden, können Sie hier alles geben, okay. Gehen wir also in den Browser und prüfen, ob unsere Farm-Komponente angezeigt wird oder nicht. Unsere Formularkomponente wird also hier angezeigt. Jetzt treffen wir uns hier mit einem Knopf. Fügen wir diesen Button auch hinzu. Von Credit InputField werden wir diesen Button hinzufügen. Eingabetyp wird der Gipfel sein. Und wir werden dir einen leichten Wert geben. Wertvoll, wertvoll sei wie. Gehen wir zum Browser. Jetzt können Sie sehen, dass wir auch unseren Button haben . Also ist unsere Formel jetzt fertig. 12. Verwenden von POST um Daten zu hinzufügen: Als Nächstes fügen wir unseren neuen Kontakt und diese db.json-Datei hinzu. Also werden wir die Abfrage verwenden. Zuerst. Arbeiten wir zuerst an dieser Funktion. Behandeln Sie Eingabeänderungen, trennen Sie sie von einem Punktziel, Namen und Wert. Dann auf Wert. Wir können den Bombenwert verteilen. Dann können wir wie Name, Spaltenwert machen. Also handle die Eingabe erledigt. Lasst uns nun an Handle Submit arbeiten. Wir werden den Zahlungsausfall verhindern. Um das Standardverhalten eines Browsers zu verhindern. Danach werden wir nur überprüfen, ob der Benutzer keinen Namen angegeben hat oder per E-Mail unsere Kontaktaufnahme erhalten hat. Ich möchte es nicht jemandem in PDF-Form haben. In diesem Fall wollte ich eine Methode darin in Form von beiden Benachrichtigungen bearbeiten . So können wir Ihnen einen Fackelpunktfehler geben. Wir können eine Methode wie Bitte geben Sie für jede Eingabe einen Wert an. Lasst uns das retten. Und im anderen Teil werden wir ethisch sein, Sie verwenden diese Abfrage, die wir in unserer Kontakt-API-Punkt-TXT-Datei erstellt haben . Hier müssen wir also etwas tun. Ganz oben. Wir müssen diese Anfrage stellen. Verwenden Sie Kontaktmutation. Wir haben hier mitgebracht. Jetzt müssen wir Kontakt hinzufügen. Kontakt. Und diesen Kontakt werden wir hier in unserem Handle-Gipfel verwenden. Hat mit dem Absenden fertig, wird das eine Sache sein. Lasst uns riesig sehen was hören. Danach. Wir können es einfach wie ein seltsamer Kontakt machen. Hier. Wir können unseren Formularwert, den gesamten Formularwert bereitstellen. Danach können wir zur Homepage navigieren und Ihnen eine Erfolgsmeldung geben wie der Kontakt erfolgreich hinzugefügt wurde. Kontakt wurde erfolgreich hinzugefügt. Jetzt können wir diesen überprüfen, ob es funktioniert oder nicht. Gehen wir also in den Browser. Lasst uns die App neu laden. Lassen Sie uns kämpfen variieren durch die Validierung des Eingabefeldes der Empathie. Klicken wir also auf Hinzufügen. Jetzt können Sie sehen, dass wir unsere Drehmomentbenachrichtigung erhalten haben. Jetzt fügen wir hier einen Kontakt hinzu. Also lass uns dir vorerst einen Namen „Laktase“ geben. Und dann lassen Sie uns auf gmail.com etwas Kontakt behalten. Und lasst uns auf die Hand klicken. Jetzt können Sie sehen, dass wir den Inhalt erfolgreich in unsere Tabellenkomponente einfügen können . Also Leute, wir haben den Add-Vorgang mit Hilfe der RTK-Abfrage durchgeführt . 13. Schreiben von DELETE Abfrage: Jetzt führen wir den Löschvorgang aus. Um einen Kontakt zu verwässern, schreiben wir zunächst eine Abfrage in der Kontext-API-Punkt-TXT-Datei. Wir werden fünf Abfragen schreiben, um den Kontakt zu löschen. Danach werden wir noch eine weitere Anfrage wie delete contact haben . Kontakt löschen. Wir werden hier ein Muster erstellen. Dies wird auch eine Mutation sein. Wir werden das erste Argument hier weit weitergeben . Es wird verkabelt sein. Trainiere. Warum übergeben wir eine Zeichenfolge, weil wir die ID übergeben werden. Sie können den Inhalt basierend auf der ID löschen. Deshalb wird es hier die Zeichenfolge sein. Weil wir die ID von unserer Komponente übergeben werden. Lassen Sie uns Ihre Anfrage schreiben. Wir werden einen Ausweis haben. Hier. Wir werden die URL angeben. Und die URL wird wie ein Kontext sein. Wir müssen die ID hier angeben. Und die Methode. Ich werde Ihnen eine Verdünnung geben , weil wir den Löschvorgang ausführen. Jetzt löschen Sie den Inhalt erneut, legen Sie den Kniehaken frei. Lassen Sie den Kritiker, der wusste, wer Löschkontext-Mutation verwendet. Jetzt werden wir diesen in unserer Home-Dot-TXT-Datei verwenden. Weil wir in der Datei home.html unseren Lösch-Button haben. Wir werden unsere onclick-Methode haben , mit der wir eine Methode definieren werden, light, delete, okay? Wir können die Punkt-ID des Artikels übergeben. Jetzt müssen wir diese Funktion draußen definieren und zu dieser zurückkehren. Löschen. Und es wird auch eine Sache sein. Und hier wird es einen Ausweis erhalten. Es könnte keines sein. Danach. Zuerst wollte ich das Window Popup eine Nachricht an Sie bestätigen. Tut dir leid, du wolltest diese Nachricht löschen. Einige Arten von Methoden, die ich dem Benutzer anzeigen wollte , bevor ich die Nachricht lösche. Es ist wie ein Verhältnis , dass Sie diesen Kontakt löschen wollten . Wenn Sie auf Okay klicken, es sich im Grunde genommen in einem stabilen Zustand. Hier können wir diese Mutationsabfrage verwenden. Also müssen wir unsere Verwendung zur Lösch-Kontaktmutation bringen. Wir können diesen verwenden, um unseren Kontakt zu löschen. Dies wird ein leichter Löschkontakt sein. Wir können hier Kontakt löschen verwenden, und wir können die ID übergeben. Hier. Wir können diese Einrichtung sowohl zum Erfolg führen. Kontakt, wurde erfolgreich gelöscht. Lasst uns jetzt zum Projekt gehen. Ob wir den Kontakt verdünnen können oder nicht. Lassen Sie uns auf diese Anwendung verweisen. Lassen Sie uns den vierten löschen. Jetzt klicken wir auf Okay. Jetzt können Sie sehen, dass wir die Methode des Augenkontakts gelöscht genannt haben , die „Tyrann“ sagt. Aber aus unserer Tabellenkomponente wird es nicht gelöscht. Wenn Sie Angst vor dieser Anwendung haben. Sie sehen dort die vierte aufgezeichnete, aber jetzt aus unserer Tabellenkomponente gelöscht . Warum passiert es? Weil wir in unserer Kontext-API-Punkt-TXT-Datei weitere Eigenschaften hinzufügen müssen. Wir müssen also Tag-Typen bereitstellen. Wir können dir Angriffstypen geben. Hier wird es Kontakt sein, da der Name von Modal Kontakt ist, wenn Änderungen in unserem gesamten Kontext auftreten, sodass es aktualisiert wird. Wir können diesen einen Tag-Typ auf diese Weise verwenden. In jeder Abfrage. In GitHub Query werden wir bereitgestellte Tags verwenden. Hier. Wir können diesen Kontakt wieder bestehen. Im Falle einer Mutation werden wir Tags für ungültig erklärt haben. Hier. Wir müssen die ungültige Steuer verwenden. Es wird Kontakt sein. Auch hier. Wir müssen ungültig verwenden. Wenn eine Änderung an unseren Daten stattgefunden hat, wird unsere Benutzeroberfläche mit den aktualisierten Daten umgeleitet. Versuchen wir es noch einmal. Lasst uns diese Anwendung erneut laden. Und lasst uns versuchen, noch einmal ein Wort zu löschen, record. Löschen Sie dieses und klicken Sie auf. Okay. Jetzt können Sie sehen, dass es dieses Mal gelöscht wurde , ohne diese Anwendung neu zu laden. Sie müssen diese Tags angeben um die aktualisierten Daten auf der Benutzeroberfläche anzuzeigen. Wir haben den Löschvorgang in dieser Anwendung mit Hilfe unserer Zerfallsabfrage durchgeführt . 14. Ansicht: Jetzt werden wir den einzelnen Datensatz basierend auf der ID auf dieser Infoseite anzeigen . Lasst uns das machen. Also fünf, wir werden eine Abfrage dafür schreiben. Gehen wir zur Content-API-Punkt-TXT-Datei. Hier schreiben wir eine Abfrage. Kontakt. Auch hier werden wir ein Builder-Pattern schreiben . Punkt-Abfrage. Das Faktargument wird der Kontext sein, da wir einen einzigen Kontakt im Objekt erhalten. Und das zweite Argument wird die Zeichenfolge sein, weil wir die ID von unserer Komponente übergeben werden , um den einzelnen Kontakt aus unserer db.json-Datei zu erhalten . Hier haben wir eine Anfrage gerichtet. Wir geben die ID an. Passen Sie hier weiteren Endpunkt an. Es wird der Ausweis sein. Und wir müssen hier auch das Provider-Tag angeben. Also lassen Sie uns das kopieren und fügen wir es hier ein. Lass uns dir ein Komma geben. Jetzt exportiert dieser Kontakt den neuen Hook. Wir können diesen neuen Hook hier definieren. Verwenden Sie die Kontaktanfrage. Okay. Gehen wir nun zur Info-Punkt-TXT-Datei , in der wir ein einziges Kontaktdetail aufteilen werden. Was wir nun tun müssen, wenn wir von Tenet reagieren, um die Wirkung der USA zu erzielen. Wir werden auch hier brauchen, er hat benutzt, weil wir IID von unserer URL benötigen, von React Router Dom. Wir müssen sowohl parallel als auch einen Link verwenden. Weil wir das tun, weil wir auch einen Zurück Button haben werden. Um zur Homepage zu navigieren. Lasst uns herausbringen, um zu reagieren. Jetzt bringen wir die CSS-Datei mit. Diese Info.plist-Datei auch. Infopunkt CSS. Ich füge den CSS-Code hier oder diese Info-Punkt-CSS-Datei ein. Und an diese Vorlesung ist bereits eine CSS-Datei angehängt. So können Sie leicht die CSS-Datei und diese Vorlesung herausfinden , die bereits angehängt ist. Hier, was wir zuerst tun müssen, holen wir uns den Ausweis. Wenn ich zu unserer Bewerbung zurückkehre. Wenn Sie auf Ansicht klicken, können Sie sehen, dass wir was diese ID2 haben. Wenn Sie diesen Ausweis mit Hilfe des US-Abs. Wir werden den Gebrauch besser benutzen. Und wir brauchen Heidi. Okay? Danach werden wir diese Kontaktabfrage verwenden. Diese Kontaktanfrage für Jugendliche. Wir werden einen Ausweis übergeben. Hier. Wir müssen ein Ausrufezeichen angeben. Hier. Wir werden die Daten trennen. Es enthält also ein einzelnes Objekt , in dem wir unsere Kontaktdaten, Namen, E-Mail und Kontakt haben. Wir werden hier auch den II-Fehler verwenden. Wir werden auch Fehler verwenden. Bringen wir das auch mit. trockene Teil werden wir hier stattdessen unseren Jugendeffekt verwenden. Dieser enorme Effekt hat sich nur gedreht. Wenn Sie irgendeinen Fehler haben. Wir können dir einen Fehler geben. Wir prüfen es. Wenn wir einen Fehler haben, dann ist ein Fehler aufgetreten. Und wir können etwas Methylat geben, etwas ist schief gelaufen. Jetzt haben wir unser einziges Kontaktdetail hier in diesen Daten. Was wir tun können, ist Stil. Ich kann etwas Marge geben, Top-Tipp Excel. Ich benutze den Unterricht, den Kartenunterricht. Ich benutze eine weitere Klasse, den Kartenkopf. Darin. Ich nehme Beta, irgendeine Richtung. Sie sind die Kontaktdaten. Nach diesem p-Tag. Was wir haben werden. Auch hier werde ich noch eine Klasse mit dem Container haben . Und da drinnen werden wir ein starkes Tag verwenden. Wir werden deinen Ausweis benutzen. Dann haben wir ein Span-Tag, dem ich die ID anzeigen werde. Wir haben die ID mit Delta gepackt, wir benutzen Muster. Jetzt mache ich hier ein paar Pause. Und ich werde das ein paar Mal kopieren, weil wir auch den Namen, die E-Mail und den Kontakt anzeigen werden. Dies wird Name werden. Dies wird wie Datenpunktname da diese Daten ein einzelnes Objekt enthalten, in dem alle Kontaktdaten wie Name, MLN-Kontexte enthalten sind. Dies wird also eine männliche Daten werden. Später dot böse. Der letzte wird Kontakt werden. Kontakt. Bei diesem Kissen haben wir unseren „ Zurück“ -Button, Button. Ich benutze den Klassennamen tn, tn dabei. Lassen Sie uns den Wert der Schaltfläche beibehalten. Geh zurück. Wir werden Air Link benutzen. Schneiden wir diesen Button aus und fügen ihn hier ein. Wir werden zur Homepage navigieren . Wenn Sie also hier auf die Schaltfläche Kopieren klicken, navigieren wir besonders zur Homepage. Mal sehen, ob es funktioniert oder nicht. Gehen wir also in den Browser. Lassen Sie uns also dieses Inhaltsdetail ansehen. Jetzt können Sie sehen, dass wir die Kontaktdaten für einzelne Benutzer auf unseren Informationen sehen können . Und wenn Sie auf „Zurück“ klicken, gelangen Sie nie zur Western-Homepage. Jetzt sind wir mit dem Einzelbenutzerkontaktdetail fertig dem Einzelbenutzerkontaktdetail das auf der Idee basiert, mit Hilfe unserer Zerfallsabfrage. 15. : Jetzt führen wir den Update-Vorgang durch. Wenn Sie also auf die Schaltfläche Bearbeiten klicken, navigieren wir hier zur Seite „Kontakt bearbeiten“. Wir werden den vorhandenen Wert unabhängig vom Eingabefeld für Name, E-Mail und Kontakt in acht auffüllen unabhängig vom Eingabefeld für Name, E-Mail und Kontakt in acht . Und die Schaltfläche „Auswerten“ wird auch von musste aktualisiert werden. Bisher machen wir all das Ding. Dann führen wir den Update-Vorgang in der hinzugefügten ID-Punkt-TXT-Datei durch. Was wir hier tun müssen, benutze ich param mit Hilfe von dir ist parallel. Wir werden unsere Ideen von unserer URL abrufen. Nachdem wir danach zuerst tun müssen, besteht unsere Aufgabe darin, die Daten in jedes jeweilige Eingabefeld zu füllen . Ich werde hier einen Status haben , der als Bearbeitungsmodus bezeichnet wird. Modus. Es wird anfangs falsch sein. Jetzt werden wir hier enorme Wirkung erzielen. Verwenden Sie den Effekt. Use Effect wird nur ausgeführt, wenn wir die ID haben und wenn Sie die Daten haben. Hier verwenden wir diese Abfrage, um den Fingerkontakt detailliertes Gewicht auf der ID zu erhalten , um in das jeweilige Eingabefeld einzufüllen. Hier in bearbeitet hat DIE Akte bekommen. Was wir tun müssen. Also werden wir diese Abfrage auch verwenden. Verwenden Sie die Kontaktanfrage. Und wir werden Daten holen. Bringen wir auch den Fehler mit. Dieser enorme Effekt läuft erst, wenn wir Daten haben. Hier werden wir prüfen, ob wir den Ausweis haben. Das bedeutet, dass Benutzer das vorhandene Kontaktdetail aktualisieren. In diesem Fall wollte ich den Landscape-Modus auf wahr machen. Hier prüfen wir, ob wir den Datensatz-Formularwert haben . Ich werde die Daten nur verteilen , da diese Daten ein einzelnes Objekt haben , das den Wert wie Name, E-Mail und Kontakt enthält. Es druckt diesen Wert also aus, um den zögerlichen Wert in sein jeweiliges und Portfolio zu füllen . In diesem Zustand werden wir den Statistik-Bearbeitungsmodus auf einen falschen Wert für unseren Ausgangszustand tun . Verwenden wir auch ein Wort, Jugend-Effekt. Dieser enorme Effekt mit Italien wird laufen, wenn Sie einen Fehler haben. Hier. Wir können prüfen, ob Sie einen Fehler haben. Außerdem werden wir einen Ausweis angeben. Wir können hier Methylat geben, abgefackelter Punkt. Etwas ist schief gelaufen. Im Falle eines Updates nehmen wir nur diesen Fehler teil. Wir können es so machen, als wäre etwas schief gelaufen , denn im Falle des Hinzufügens der neuen Kontexte erhalten Sie keine ID. Lassen Sie uns zunächst prüfen , ob wir den vorhandenen Wert auffüllen können. Und hier haben wir einen Fehler. Hier mit Italien müssen wir die ID angeben. Deshalb bekommen wir diesen Fehler. Wir können diese nach dieser Zeile benutzen. Okay? Lassen Sie uns zuerst in das Projekt eingehen und sehen, ob wir in der Lage sind, den Ausgangswert unabhängig davon zu in der Lage sind, den Ausgangswert füllen und gefüllt zu werden oder nicht. Jetzt können Sie sehen, dass wir den ausgehenden Wert in jedes jeweilige Eingabefeld veröffentlichen können . Lass uns zurückgehen. Klicken wir auf diesen 1-Sekunden-Datensatz. Es funktioniert. 16. Update mit RTK Query: Jetzt um die vorhandenen Kontaktdaten zu aktualisieren. Also müssen wir eine Abfrage hier in unserem Kontext schreiben, schwerere Punkt-TXT-Datei. Hier. Was wir hier tun müssen, ich werde das nur behandeln . Bleiben wir hier. Dies wird so sein, als würde die Update-Kontaktmethode die Ausgabe sein. Und hier erhalten wir einen Kontakt. Und der zweite wird die Zeichenfolge sein, weil wir den Inhalt basierend auf der ID aktualisieren werden. Hier. Was ich brauche ID und wir können die Rate der Inhaltszusätze wie Name, E-Mail und Kontakt weitergeben . Also können wir dir einfach eine Leiche geben. Wir können injizieren. Pfad ist rot, da das Thread-Objekt unsere aktualisierten Kontaktdetails wie Name, E-Mail, Kontakt enthält . Hier haben wir einen Fehler bekommen. Hier. Wir bekommen einen Fehler , weil es verkabelt wird. Es wird zufrieden sein , weil wir dieses Kontextobjekt aus unserer Komponente erhalten . Wir erhalten diesen Inhalt von unserer Komponente, die ID, Name, E-Mail und Kontakt enthält . Deshalb wird nur die ID erkannt. Und ich übergebe gerade die Rate der Details wie E-Mail, Name und Kontakt im Körper. Diese kleine Anpassung müssen wir hier vornehmen. Diese Abfrage wird erneut eine neue Hoffnung enthüllen. Lassen Sie dv diese neue Hoffnung hier strukturieren, Die US-Update-Kontaktmutation. Gehen wir nun zur adäquaten Punkt-TXT-Datei und es verarbeitet Summit. Wir haben zwei insbesondere die vorhandene Logik im Handling mit Italien aktualisieren. Wir müssen unsere Adjektivlogik aktualisieren. Also hier haben wir ob wir uns im unmittelbaren Modus befinden oder nicht. Wenn Sie also nicht mehr sind, bedeutete das, dass der Benutzer einen neuen Kontext hinzufügt. Wir können diesen Code ausschneiden und wir können bezahlen, um auseinander zu reißen. Wir müssen dies zuerst tun, wir müssen diese Use-Update-Kontaktmutation mitbringen. Kopieren wir das einfach. Und es wird ein Update zur Tech-Mutation verwendet. Und dies wird aktualisierter Kontakt sein. Behandeln Sie jetzt „Senden“. Wir können das einfach kopieren. Hier. Dies wird den Kontakt aktualisieren. Wir wollten den Bearbeitungsmodus auch auf „false“ speichern. Nach dem Aktualisieren des Inhalts wollten wir nie auf die Homepage gehen. Wir haben auch hier angegeben und navigieren. Und lassen Sie uns auch die Methode aktualisieren. Es wird erfolgreich kontaktbetrieben. Jetzt müssen wir auch hier den Wert der Schaltfläche basierend auf dem Bearbeitungsmodus ändern . Wenn Sie sich im Bearbeitungsmodus befinden. Aber jeder mit dem Update und im Falle des Hinzufügens wird es die Anzeige sein. Gehen wir in den Browser. Aktualisieren Sie diese Verpflichtung. Klicken wir nun auf „Bearbeiten“. Lasst uns jetzt diesen einen Namen aktualisieren. Und das wird wie James Gunn werden. Und klicken wir auf Update. Jetzt können Sie sehen, dass wir das vorhandene Kontaktdetail erfolgreich aktualisieren können. Wir haben den Update-Vorgang mit der Hair Pop RTK-Abfrage und dieser React-Anwendung durchgeführt . Jetzt ist es an der Zeit, alle Operationen einzeln durchzuführen , damit wir nichts kaputt machen. Fügen wir noch einmal einen neuen Kontakt hinzu. Und dieses Mal gebe ich dir die Rate gmail.com. Klicken Sie auf Hinzufügen, neuer Kontakt wurde erfolgreich in unserer Tabellenkomponente hinzugefügt. Lassen Sie uns das überprüfen. So können wir den Inhalt auch einsehen. Bearbeiten wir nun die vorhandenen Kontaktdaten. Also lasst uns drauf klicken. Jetzt werde ich dir einen Reporter geben. Aktualisieren wir auch die E-Mail. Berichtet. Klicken wir auf Update. Wir sind auch in der Lage, den Update-Vorgang durchzuführen. Führen wir nun den Löschvorgang aus. Also lösche ich den zweiten Datensatz. Klicken wir auf Löschen. Klicken wir auf Okay. Wir sind auch in der Lage, die Datensatz-Tabelle im Vergleich zur obigen artikulierten Abfrage zu löschen . 17. Projekt 2-Demo: In diesem Abschnitt werden wir mithilfe der RTK-Abfrage in React eine Anwendung für Lebensmittelrezepte erstellen eine Anwendung für Lebensmittelrezepte . Und wir werden in diesem Abschnitt die TypeScript-Vorlage verwenden , um diese App für Lebensmittelrezepte zu erstellen . Mit Hilfe dieser App werden Sie verstehen, wie Sie mit APIs von Drittanbietern arbeiten. In Bezug auf den Artikel werden wir die Edmund-API eines Drittanbieters verwenden , um das unterschiedliche, unterschiedliche Rezept auf unserer GUI hervorzuheben. In dieser Anwendung können Sie also nach einem anderen Rezept suchen. Versuchen wir also, den TP mit Brot zu durchsuchen. Also klicken wir auf Suchen. Sie können also sehen , dass wir das Rezept für Brot bekommen . Und wenn Sie ein bisschen gesundheitsbewusst sind, dann können Sie hier auch Tiefpunkte auswählen. Schon wieder. Es wird unser Ergebnis anhand dieser Gesundheitskategorie filtern. Und wenn Sie auf eine Rezeptkarte klicken, öffnet sich ein Modal , in dem ich weitere Details zu diesem bestimmten Rezept hinzugefügt habe . Das ist also die Gesamtanwendung, die wir in diesem Abschnitt mit Hilfe von Arctic a Query erstellen werden. In React. Im nächsten Video werden wir die Drittanbieter-API für Ödeme konfigurieren. Und danach werden wir mit der Einrichtung von Projekten beginnen. Also werde ich dich im nächsten Video sehen. 18. Projekt 2 Edamam-Rezept-API konfigurieren: Lassen Sie uns unsere API für Lebensmittelrezepte auf der Admin-Website konfigurieren. Stellen Sie also sicher, dass Sie ein Konto erstellen. Und sobald Sie ein Konto erstellt haben, landen Sie auf dieser Seite. Und dabei werden wir 31 verwenden. Mit drei werden wir nur zehn Anfragen pro Minute stellen können, was ausreicht, um nur zehn Anfragen pro Minute stellen können, was ausreicht, diese Anwendung für Lebensmittelrezepte zu erstellen. Unter Dokument erhalten wir also unsere Rezeptsuch-API. Also hier verwenden wir eine ältere Version. Also lass uns nach unten scrollen und wir brauchen diese APA. Kopieren wir also den TPA und speichern ihn irgendwo im Notepad. Jetzt benötigen wir die App-ID und den App-Schlüssel. Also müssen wir auf Get API key klicken. Danach müssen Sie unter Rezeptsuch-API auf diese Ansicht klicken . Das sind also unsere App-ID und App k. Lassen Sie uns diese Informationen also auch in einem einzigen Paar speichern. 19. Projekt 2 Einrichten: Jetzt beginnen wir mit der Arbeit an unserem Projekt-Setup. Um an unserem Standortrezept zu arbeiten, werden wir also eine Redox-Skriptvorlage verwenden. Also lasst uns diesen Befehl kopieren. Und ich füge mein Terminal ein. Und ich werde hier einfach meinen App-Namen ändern. Es wird ein RTK-Rezept sein, okay? Und drücken wir die Eingabetaste. Das Einrichten unseres React-Projekts mit einer Redox-Skriptvorlage dauert etwa zwei bis 3 Minuten . Warten wir also, bis die Projekte eingerichtet sind. Unser Projekt-Setup wurde im Laufe des Jahres abgeschlossen. Gehen wir also zuerst in dieses Verzeichnis. Das ist unser Zerfallsrezept. Bevor wir ein Image-Tag erstellen, müssen wir ein Paket für unser Projekt installieren. In diesem Projekt werden wir also Material Design Booster Five verwenden. Also lasst uns diesen kopieren. Und lassen Sie uns dieses Terminal öffnen. Ich werde es hier malen. Und drücken wir die Eingabetaste. Es wird das Paket installieren. Also hat unser Paket einen Stern bekommen. Lass uns das machen und mir den Start bezahlen. Und ich habe dieses Projekt bereits in meinem Visual Studio-Code geöffnet . Gehen wir also zum VS-Code. Wie Sie also sehen können, ist das Projekt in meinem VS-Code geöffnet. Und wir haben noch etwas Boilerplate-Code übrig, weil wir dieses Projekt mit einer Redox-Skriptvorlage erstellt haben . Gehen wir also zu dieser package.json-Datei. Wie Sie sehen können, müssen wir beim Erstellen eines Projekts mit der Redact-TypeScript-Vorlage Projekts mit der Redact-TypeScript-Vorlage das Toolkit-Paket nicht lesen und React Redux auch nicht installieren. Wir müssen diese beiden Pakete also nicht mit TypeScript installieren . Also Leute, lasst uns jetzt zum Browser gehen , weil unser Entwicklungsserver läuft, also haben wir kein Problem. Also lass uns im Browser sehen. Also haben wir diesen Inhalt gekauft und diesen Inhalt mit Italien. Es wird aus unserer Textdatei ab.js angezeigt. Wir haben also diesen Inhalt, der in unserem Browser angezeigt wird . Und lassen Sie uns auch diese beiden Ordner erkunden. Also haben wir eine Funktion gekauft und ich habe einen Ordner darin, den wir wiederhergestellt haben. Wir haben also eine Grundkonfiguration darüber, ob wir hier Hooks haben. Und wir haben einen Feature-Ordner , in dem wir einen Inhaltsordner haben. Dieser Inhaltsordner ist nicht erforderlich. Lassen Sie uns also diesen gesamten Ordner entfernen, falsch. Der Inhaltsordner war nicht erforderlich. Gehen wir jetzt zum Browser. Also jetzt unsere Bewerbung und die Pause hier drüben. Also müssen wir noch etwas aufräumen. Gehen wir also zur Store-Dot-CSS-Datei. Den brauchen wir nicht. Lassen Sie uns diesen entfernen. Lassen Sie uns diesen entfernen. Und speichern wir zuerst diese Datei. Gehen wir zur Datei app.js. Und ich werde unseren gesamten Inhalt entfernen. Wir können dir gerne ein Rezept geben. Vorerst. Nehmen wir an, entfernen Sie diesen, weil wir den gesamten Ordner gelöscht haben. Lokal auch nicht erforderlich. Wir können diese wichtige React-Aussage auch entfernen. Speichern wir diese Datei. Und lass uns zum Browser gehen. Jetzt haben wir kein Problem mit unserer Anwendung, da wir in unserer Anwendung, da wir diesem Projekt Material Design Bootstrap verwenden. Also müssen wir die CSS-Datei für das Materialdesign-Bootstrap mitbringen . Also, was können wir dafür tun. Also können wir diese wichtige Aussage kopieren und hier einfügen. Okay? So können wir die Änderungen in unserem Browser sehen. Gehen wir also zum Browser. Jetzt können Sie sehen, dass wir eine andere Überschrift haben. Also dann, wenn wir in diesem Projekt erfolgreich einen Material Design Book Club konfiguriert haben. 20. Ordnerstruktur in Projekt 2: Als Nächstes machen wir es aus Gründen der Struktur. Wir werden also einige Ordner und Dateien in dieser Anwendung haben . Wir werden eine Ordnerkomponente haben , in der wir einige Dateien wie Model-, nicht TFX-, Spinner-Punkt-T-Sets haben . Und wir werden eine Kartenkomponente haben. Also werde ich einfach ein Snippet in jeder Komponente generieren. die andere Weise erhalten wir im Browser eine Fehlermeldung, da wir in diesem Projekt TypeScript verwenden. Also schicken wir ihm auch ein Snippet für diese Komponente. Danach löschen wir diesen einen Feature-Ordner. Stattdessen werden wir dafür Dienste anbieten. Weil wir einen Endpunkt erstellen werden. Und darin werden wir diesen STP haben , APA Punkt ts. 21. Projekt 2 Konfigurieren des Stores und der RTK-Abfrage: Lassen Sie uns also zuerst Arctic a Query in diesem Projekt konfigurieren. Also hier müssen wir etwas APA aus unserem Toolkit mitbringen. Also von Redact bis Liquid müssen wir zur Abfrage übergehen. Reagiere, okay? Und wir müssen Create APA und Fitch Bit Query mitbringen. Jetzt nehme ich meinen API-Schlüssel und meine App-ID, die wir von Adam erhalten haben. Das ist also der API-Schlüssel und App-ID, die wir für unser Element generiert haben. Jetzt müssen wir hier einen Endpunkt erstellen. Also exportiere das NCP, APA. Erstellen Sie APA. Wir sind vordefiniertes Reduzierteil, weil wir dieses Rezept APA mit unserer Wiederherstellung verbinden müssen. Also müssen wir hier den Reduzierteil definieren. Danach haben wir die Basisabfrage unserer Admin-API vordefiniert . Wir möchten also Ihre auf Glauben basierende Anfrage verwenden und müssen die Basis-URL angeben. Die URL wird also wie HTTPS, apa.admin.com lauten. Danach werden wir Endpoint haben. Und wir werden ein Builder-Pattern schreiben. Hier. Wir werden Rezepte besorgen müssen. Mutation auf dem Baugrundstück. Wenn Sie sich der RTK-Abfrage ein wenig bewusst sind, diese Builder-Punkt-Mutation, die wir normalerweise für Umfragen oder Löschanfragen verwenden. Aber da wir hier sind, müssen wir das Rezept auf der Grundlage unserer Suchanfrage und Gesundheit herausfinden. Wir müssen also eine Variation oder eine Mutation vornehmen, weil wir Suche, Abfrage und Gesundheit von unserer Komponente erhalten müssen . Also hier müssen wir Mutation schreiben. Darin werden wir also eine Anfrage haben und wir werden eine Anfrage erhalten , das ist eine Suchanfrage. Und dann können wir zurückkehren. Also hier müssen wir die URL angeben. Also werde ich einfach diesen kopieren. Das ist also unsere Basis-URL, die wir bereits in der Phage-Basisabfrage angegeben haben. Okay, lass es hier drüben einfügen. Und wir werden diese Abfrage-Tamar-Komponente erhalten. Also können wir hier die Abfrage verwenden, okay? Und Gesundheit. Wir werden auch nur von unserer Komponente erhalten. Also lasst uns diesen ersetzen. Also lasst uns diesen formatieren. Und dieses Rezept wird New Hope entlarven. Was wir also noch tun können, Export nennen wir das Rezept APA. Dieses Rezept wird deinen neuen Haken enthüllen, damit wir ihn hier ausprobieren können. Also lasst uns diese Datei speichern. Und wir müssen etwas an unserer Store-Dot-CSS-Datei arbeiten. Also hier, lassen Sie uns diesen entfernen. Wir müssen keinen besseren Listener aus unserem Toolkit importieren. Also müssen wir vom Redact Toolkit aus zu dist, folder und query gehen. Und wir müssen den Setup-Listener mitbringen. Und jetzt bringen wir unser Rezept APA von unserem Service für Blei mit. Gehen wir zur Seite der Serie. Und wir müssen ein neues Rezept für VA mitbringen . Jetzt müssen wir unseren Reducer mit diesem Rezept APA verbinden. Sie sehen also den PABA-Reducer-Teil bei STP, den APA-Punktreduzierer. Danach müssen wir hier auch Middleware verwenden. Also werden wir Standard-Middleware verwenden. Also gute Standard-Middleware. Diese Standard-Middleware. Und wir müssen diese STP-APA auf unsere Middleware reduzieren. Formatieren wir das 15. Und hier können wir diesen entfernen. Okay? Und wir können Listener einrichten, speichern, nicht versenden. Okay. Speichern wir diese Datei. Also haben wir die if-Tour in diesem Projekt konfiguriert. Lassen Sie uns also das Terminal öffnen, unabhängig davon, ob wir ein Problem haben oder nicht. Wir haben also derzeit kein Problem. Gehen wir also zum Browser. Also haben wir auch hier kein Problem. Lassen Sie uns überprüfen, ob unsere Decay-Abfrage erfolgreich konfiguriert wurde oder nicht. Also werde ich ein Dev-Tool öffnen und lesen. Und Sie können sehen, dass wir mit unserem Reduktionstool etwas anfangen . Das gewinnt. Wir haben unsere Decay-Abfrage in dieser React-Anwendung erfolgreich konfiguriert . Jetzt können wir anfangen, an unserem Essen zu arbeiten. Diese SAP-Anwendung. 22. Projekt 2 Navbar und Sucheingabefeld: Zuerst werde ich das Rezept in einer Kartenkomponente anzeigen . Also werde ich anfangen, an dieser App-Dot-TXT-Datei zu arbeiten. Also hier müssen wir ein paar Hooks aus unserem React mitbringen . Von React. Lassen Sie uns das nutzen. Und normalerweise staatlich. Und wir müssen auch die Abfrage, die wir im Ordner Services geschrieben haben, mitbringen . Also müssen wir zu diesen Diensten gehen. Und wir müssen diese Anfrage stellen. Verwenden Sie die Get Recipe Mutation. Danach müssen wir einige Komponenten aus unserem Materialdesign-Bootstrap mitbringen . Reagieren Sie von MDB auf UHC. Wir brauchen MDB, MDB Input, MDB, MDB, NAB, aber ich bin Davy Container, MDB, Navbar Brand. Okay. Danach werden wir einen Teil des Staates definieren. Okay? Wir werden also einen Statusbalkenwert haben. Also definieren wir im Grunde einen Zustand, unsere dritte Eingangswelle hier drüben. Und danach müssen wir diesen Wert in ein anderes Diktat eingeben, nämlich in eine Abfrage. Das hast du gerade getan. Und das wird eingegeben. Wir werden auch Empathie zeigen. Jetzt müssen wir die Gesundheit definieren. Es ist also im Grunde genommen eine Kategorie. Es wird auf Gesundheit gesetzt. Und standardmäßig werden wir im Grunde einen Veganer anzeigen, okay? Und wir werden auch jeden Staat für unser Modell haben. Lassen Sie uns definieren. Und wir müssen auch ein einzelnes Rezept in einem Modell anzeigen. Also werden wir Objekt verwenden. Im Grunde sind wir also bereit, dieses eine Rezept zum Objekt zu machen. Definieren wir also hier in Teil D ein Objekt. Lassen Sie uns nun diesen entfernen. Jetzt brauchen wir nicht. Und hier werde ich nur etwas Inline-Style geben. Und lassen Sie uns Ihre Marge automatisch berechnen. Geben wir dem Abstand zehn Pixel. Ich gebe dir eine maximale Breite, tausend Pixel und richte den Inhalt aus. Es wird zentriert sein. In diesem Div werden wir jetzt die MDB-Navigationsleiste haben. Und das wird eine helle Hintergrundfarbe sein. Wir können auch Licht spenden. Dann haben wir einen MDB-Container und der wird geladen. Dann nehmen wir M DV, Navbar Brand. Wir können ihm einen Klassennamen geben, Textzentrum. Das ist also ein Bootstrap-Klassenname, den ich noch verrate. Danach können wir ein h5-Tag mit dem Klassennamen f, w haben . Ich habe den fetten, leeren Bindestrich zwei ausgegeben. Und ich werde hier Emoji verwenden. Also werde ich deinen Burger verwenden, Burger nach diesem Rezept. Dies ist unser Titel für diese Anwendung. Speichern wir das und sehen wir uns im Browser an, wie es aussieht. Jetzt haben wir also unsere nette Navigationsleiste schon hinter uns. Lassen Sie uns an einem anderen Teil weiterarbeiten. Nach dieser Navigationsleiste haben wir also auch das div, den Klassennamen, rho, d, Bindestrich eins, align items, center, md Bindestrich. Und in diesem Div werde ich ein Eingabefeld haben. Okay? Und hier geben wir eine Oberklasse an, die auf Autoebene sein wird . Lass uns das Rezept geben. Lass uns weiter Text eingeben. Danach haben wir einen Wert, den wir bereits definiert haben . Dann werden wir eine Zinnmethode haben. Definieren wir also auch das. Das wird also den Zielwert für den Event-Punkt erhalten. Nach diesem Eingabefeld haben wir noch einen Tag Zeit. Der Klassenname Ball Auto. Und wir werden einen Knopf haben. Also MDB, Schönheit und Suche. Okay? Wir werden die OnClick-Methode später definieren. 23. Projekt 2 Rezepte in Karte auflisten: Jetzt müssen wir also im Grunde ein anderes, anderes Rezept in einer Kartenkomponente festlegen . Also werden wir diese Abfrage verwenden, um das gesamte Rezept zu erhalten. Lassen Sie uns also diese Abfrage verwenden. Also Nachteile verwenden Rezept, Mutation. Und wir müssen diese Abfrage und Gesundheit bestehen. Also müssen wir auch dieses Rezept mitbringen. Also hier, zuerst bringen wir das mit , holen uns die Rezepte. Danach werden wir die Textur untersuchen, einen anderen, anderen Teil des Zustands, der durch unsere Artikelabfrage generiert wird. Sie können sehen, dass wir ein anderes Licht haben. Entweder wird geladen, all diese verschiedenen, unterschiedlichen Zustände werden es durch unsere Zerfallsabfrage erzeugen. Aus diesem Grund wird es als leistungsstarkes Datenanpassungstool bezeichnet . Wir benötigen also nur jede Ladung und Daten. In diesen Daten wird es unser gesamtes Rezept enthalten. Danach, was wir tun müssen. Wir haben also vordefiniert, wann Sie defekt sind. Und dieser riesige Effekt. Es läuft immer dann, wenn wir ein Rezept haben oder die Gesundheitskategorie ändern. In beiden Fällen müssen wir diese Abfrage ausführen. Okay? Also werde ich noch eine Methode definieren. Also hol dir ein Essensrezept. Definieren wir also diese Methode unter diesem riesigen Effekt. Also kosten Sie und holen Sie sich das Rezept. Und das wird eine Sache sein , weil wir einen asynchronen Betrieb durchführen werden. Sie können also sehen, dass wir in get recipe die API-Anfrage stellen. Und hier müssen wir noch eine Sache definieren, nämlich Methode. Also hier hast du diesen Fall, falls es mir gut geht. Lassen Sie uns also auch die Methode spezifizieren. Danach. Wir können einfach ein Gewicht machen, die Rezepte holen. Und wir müssen Abfrage und Zustand in Form von Objekten übergeben , weil wir hier nur in Form von Objekten empfangen . Also musst du diesen Weg gehen. Danach. Was wir tun müssen. Also können wir diesen überprüfen, ob er funktioniert oder nicht. Gehen wir also in den Browser und öffnen wir die Todesrate. Sie können sehen, dass Gott unser Versprechen hier erfüllt. Und hier haben wir ein Rezept. Sie können also sehen, dass die internen Daten, die wir haben, alles ATP sind. Interne Daten. Du musst zu Noten und Insidertreffern gehen. Du wirst ein anderes, anderes Rezept haben. Also müssen wir auf diese Weise zielen. Gehen wir also zum VS-Code. Hier können Sie also sehen, dass wir bereits über tiefe Strukturdaten verfügen. Wir müssen einfach auf diese Weise zielen, Punktreffer und Innentreffer. Wir haben unser anderes, anderes Rezept. Um das Rezept anzuzeigen, müssen wir jetzt an unserer Kartenkomponente arbeiten. Lassen Sie uns also mit der Arbeit an dieser Kartenkomponente beginnen. Dann werden wir unser Rezept immer noch von MDB reaktiviert anzeigen . Wir müssen ein Bauteil aus dem Materialdesign mitbringen. Wir müssen meinen Vater, Kolumne, MDB-Gruppe mitbringen , nicht Beauty und Gruppe. Mdb-Kartengruppe. Mdb, MDB-Kartenbild und IMDB-Kartenkörper. Okay? Danach müssen wir einige Anpassungen an dieser funktionalen Komponente vornehmen , da wir TypeScript verwenden. Also müssen wir auf diese Weise schreiben, funktionale Komponente React Dot. Und hier haben wir Platten, mit denen Robs Funktion bezahlt wird. Wir werden diesen außerhalb dieser Komponente definieren. Und es wird ein Requisitenrezept erhalten. Wann immer wir also eine Probe an eine funktionale Komponente in einem TypeScript übergeben , müssen wir unsere funktionale Komponente auf diese Weise schreiben. Und außerhalb dieser funktionalen Komponente müssen wir unsere Schnittstelle definieren. Sonst bekommen wir ein rotes. Definieren wir diese Prompt-Funktion. Und wir werden ein Rezept erhalten. Es könnte also alles sein, okay, danach, was wir tun müssen. Also können wir diesen entfernen. Und hier wird es MDB-Farbe sein, MDB-Kartenkörper. Dann werde ich das MDB-Auto benutzen. Und hier werde ich den Bootstrap-Klassennamen verwenden. Es wird ein Kantenbindestrich, Md-Bindestrich zu einem Bindestrich sein, SM Flux. Dann werden wir ein MDB-Kartenbild haben. Interne Quelle. Ich werde im STP-Bild angegeben. Also Rezeptpunktbild. Im Gegenzug können wir mit einem Lohnniveau rechnen. Also Rezept nicht beschriftet. Die Petition wird top sein. Stylisten. Gib mir einen Zeichenzeiger. Okay? Wir werden die onClick-Methode haben. Also werden wir das später definieren. Also lassen Sie uns diesen vorerst entfernen. Und danach werden wir den MDB-Kartenkörper haben. Und hier verwende ich das h5-Tag mit dem Klassennamen, habe w und fett. Hier. Wir werden das Rezepte-Niveau haben . Okay? Also lasst uns diesen formatieren. Und hier werden es MDB-Kartengruppen sein, Kartenkörper. Also lass uns hier die MDB-Kartengruppe verwenden. Speichern wir diese Datei. Damit Sie dieses detaillierte Tool sehen können, haben wir ein Ebenbild. Also verwenden wir diese Eigenschaft in unserer Kartenkomponente. Also lassen Sie uns diesen minimieren. Und ich werde diese Kartenkomponente in unserer App-Dot-TXT-Datei verwenden . Nach diesem Div werden wir also die MDB-Zeile haben. Okay? Und ich werde hier den Klassennamen verwenden. Zeile nennt Leben und eine Zeile nennt Bindestrich, md, Bindestrich drei, G, Bindestrich vier. Und wir haben Zieleinschläge erzielt. Wie Sie sehen können, haben wir dieses tiefere Werkzeug in unseren Köpfen, unser anderes, anderes Rezept. Wir müssen wie dieses Wort auf Daten abzielen, Punkte treffen. Und ich verwende hier einen ternären Ausdruck. Warum benutze ich diesen? Denn wenn du das nicht verwendest, also musst du auf diese Weise schreiben , Datenpunkt-Treffer, dann wirst du Datenpunkt-Treffer verwenden können, Punktmap. Okay? Also ihr Bürger, ich verwende diesen ternären Ausdruck. Also Datenpunkt Treffer, Punkt, Karte und Element beliebig. Da wir hier TypeScript verwenden, müssen wir dieses angeben. Und lassen Sie uns Ihre Kartenkomponente verwenden, die wir erstellt haben. sowjetische Code importiert die Kartenkomponente automatisch für mich. Und hier müssen wir die Rezeptrequisiten spezifizieren. Also Artikelpunktrezept. Wir müssen auf diese Weise geben. Speichern wir diese Datei. Und lassen Sie uns überprüfen , ob es funktioniert oder nicht. Gehen wir also in den Browser. Jetzt können Sie also sehen, dass wir in unserer Kartenkomponente verschiedene, unterschiedliche Rezepte rendern können . Okay. 24. Projekt 2 Rezept und Spinner suchen: Danach müssen wir nun die Suchfunktion implementieren. Wir haben also die Schaltfläche „Suchen“ erstellt, aber wir haben keine Logik ausprobiert , um die Suchfunktion auszuführen. Also hier werden wir eine OnClick-Methode haben. Und dann definieren wir diesen außerhalb des Handles der Rückgabeklausel. Okay? Also hier können wir eine Set-Abfrage durchführen und Sie können den Wert übergeben. Und nachdem wir auf die Suchschaltfläche geklickt haben, möchten wir, dass das Sucheingabefeld gelöscht wird. Wir können den Wert etwa an die Eingabe von t anpassen. Jetzt können wir die Suchfunktion in unserer Anwendung ausführen . Gehen wir also in den Browser. Und ich werde es mit dem Brot einrühren. Also geben wir hier das Brot ein. Lass uns auf Suchen klicken. Jetzt können Sie sehen, dass wir in der Lage sind, ein auf dem Brot basierendes Fischrezept zu erstellen. Okay, die Statusfunktionalität ist also auch in dieser Anwendung implementiert. Gehen wir nun zurück zum VS-Code. Und ich verwende, das wird auch Theta geladen . Also werde ich an unserer Spinner-Komponente arbeiten. Also hier, was wir tun müssen. Hier müssen wir also eine Komponente aus unserem Materialdesign Bootstrap mitbringen , nämlich Drucker, das heißt, die MDB ist Erdnuss. Und darin werden wir ein Div mit dem Klassennamentext haben , md Bindestrich fünf. Und wir werden hier MDB-Spinner verwenden. Und hier werden wir ein Span-Tag haben, bei dem der Klassenname visuell ausgeblendet ist. Okay? Und hier werde ich das Laden mit drei Türen geben. Und im MDB-Spinner müssen wir eine Prüfung bestehen , die den Klassennamen Grow lautet. Geben wir hier den leeren Bindestrich zwei. Lassen Sie uns etwas Inline-Stil beibehalten. Ich gebe hier drei davon. Ich werde ihnen diesen geben. Und diesen können wir entfernen. Das brauchen wir nicht. Lassen Sie uns diese Komponente in unserer App-Dot-TXT-Datei verwenden. Und hier bringen wir das wird geladen. Was wir also tun können, wir können überprüfen, ob das Laden stimmt. In diesem Fall wollte ich es dann malen, okay, also importiert VS-Code diese Spinner-Komponente automatisch für mich. Gehen wir jetzt zum Browser. Lassen Sie uns das veranschaulichen. Jetzt können Sie also sehen , dass wir auf unsere Verpflichtung hin einen Spinner gekauft haben . Jetzt die nächste Sache. 25. Projekt 2 Rezepte in der Gesundheitskategorie erhalten: Wir werden es implementieren, das hier unten aufgeführt ist. Wir werden also ein Gesundheits- und ein Dropdownmenü haben, das einige Optionen zum Filtern nach verschiedenen Gesundheitskategorien enthält . Also lasst uns daran arbeiten. Also werden wir diese Gesundheitskategorie in unserer Drop-down-Liste haben . Lassen Sie uns also hier ein Drop-down-Menü erstellen. Also hier haben wir Drop-down-Menü und wir werden keine ein Drop-down-Menü und wir werden keine Dropdown-Komponente verwenden, Rohmaterial als Bootstrap, wir werden normales HTML verwenden und wir werden diese jeweils mit CSS kacheln. Okay? Also hier haben wir ein Div mit dem Klassennamen Auto. Es wird automatisch sein. Und darin werde ich Select verwenden. Und wir werden einen Klassennamen, eine Kategorie und ein Drop-down-Menü haben . Und wir werden einen über die Jane-Methode haben. Es wird in Ordnung behandelt. Und wir können Ihren Wert weitergeben. Darin drin. Wir werden Optionen haben. Dann werden wir diese Option, die wir definiert haben, abbilden, unsere Strategien, die wir außerhalb definiert haben , funktionieren. Verwenden wir also die Adoption und den Index. Dann verwenden wir Ihr Options-Tag. Also hier werde ich Are nicht Level verwenden. Und verwenden wir hier den Wert. Optionswerte sind also, sie werden pro Tag angegeben. Lass uns dir einen Schlüssel geben. Und lasst uns diesen retten. Und lassen Sie uns definieren und doppelklicken. Außerhalb dieser Rückkehr kann der Klick verarbeitet werden. Und das wird eine Veranstaltung erhalten. Und wir können den Zielwert wie einen E-Punkt anpassen. Danach indexieren wir die CSS-Datei mit Punkten. Wir müssen also nach dem Styling für diese Dropdown-Liste der Kategorien suchen. Also füge ich einfach das Styling für diesen Klassennamen ein. Das ist also aussagekräftig, dass ich mich für unser Dropdown bewerben werde . Also lasst uns diesen speichern. Und lass uns in den Browser gehen. Nun zu diesem. Jetzt können Sie sehen, dass unser Styling im Drop-down-Menü angewendet wurde. Wählen Sie hier erneut das Rezept Brot aus. Jetzt suchen wir mit SAP rund um Brot. Und hier wählen wir die Gesundheitskategorie aus. Also werde ich hier einen niedrigen Server auswählen. Dieses Mal erhalten wir also anderes Ergebnisrezept, das sich auf Brot bezieht. Sie können also sehen, dass wir jetzt je nach Gesundheitskategorie unterschiedliche Ergebnisse erzielt haben . Dies ist also auch in dieser React-Anwendung implementiert. 26. Projekt 2 Rezeptdetails auf Modal anzeigen: Als letztes müssen wir an unserer modalen Komponente arbeiten. Also wann immer Sie auf eine kompetente Karte klicken. Deshalb werden wir einige zusätzliche Informationen zu diesem bestimmten Rezept anzeigen . Lassen Sie uns also an dieser Modellkomponente arbeiten. Also müssen wir zu VS Code zurückkehren. Und wir haben hier bereits ein kompetentes Modell geschaffen . Das kannst du sehen. In diese Modellkomponente müssen wir also eine Komponente aus dem Materialdesign-Bootstrap einbringen . Also Vineet-Komponenten wie MDB, modaler MDB-Dialog, MDB-Modellinhalt, modaler MDB-Header. Dann brauchen wir auch MDB-Butan. Imdb-Modell Muddy und MDB-Modell. Okay, lassen Sie uns das formatieren. Danach müssen wir die Schnittstelle für die Eingabeaufforderungen definieren , damit wir von unserer App-Komponente einen Tipp erhalten . Definieren wir also auch das. Also wir waren gut, wenn ihr dann die Dichte erhalten werdet. Das ist also eine Funktion, die ich so geschrieben habe wo das ein Objekt ist. Du kannst es geben, wenn du willst. Also beliebig, also wird es boolesch sein. Okay? Danach müssen wir diese funktionale Komponente modifizieren da wir mit den Aufgabengruppen arbeiten. Es wird also React dot FC sein. Und hier müssen wir diese Prox-Funktion übergeben. Dadurch wird die Funktion aufgerufen, und es wird umgeschaltet, also Rezept, Show und Set. Innerhalb des Begriffs werden wir also ein Fragment haben. Und hier werden wir ein IMDB-Modell haben. Hier werden wir jüdisch sein. Also, sobald dieses wahre Modell geöffnet wird, okay? Und wir müssen auch gestern definieren. Also, also modale MDB-Dialog. Dann werden wir modale MDB-Inhalte haben. Dann werden wir den modalen MDB-Header haben. Dann haben wir das h5-Tag mit dem Klassennamen f, w, Bindestrich fett. Das wird also Level sein, die Rezeptebene. Danach. Nach diesem Style-Tag haben wir MDB, BTN. Okay? Also hier gebe ich className btn, hyphen close, Taylor, none. Auf Klick. Wir werden noch geben. Also nach diesem Header haben wir den MDB-Modellkörper. Dennoch werde ich das Image-Tag verwenden. Okay? Also Gedanken, intern, wir werden das Rezept Doherty Maze haben. Drinnen abwechselnd. Wir werden das DOD-Level verschwunden sein. Dann haben wir das Div mit dem Klassennamen und dem iPhone. Dann haben wir das h5-Tag mit dem Klassennamen, text, start, F, W, Bindestrich, fett, text, Bindestrich stummgeschaltet. Und geben wir einen Inline-Stil. Das ist Float. Links. Drinnen ist fünfmal. Wir werden ein gewisses Maß an Kalorien haben. Okay? Danach werden wir wieder ein h5-Tag mit dem Klassennamen haben, was ich beendet habe, beginnt. Und hier werden wir die Kalorienzahl lösen. Also Rezept, keine Galerien. Und wir können die Einheit auch geben. Hier. Soweit Kalorien, es wird der Fall sein. T a L Nach diesem H5-Tag haben wir die Zutat. Ich kopiere einfach diesen. Ich werde es hier einfügen. Und lassen Sie uns diesen Stil entfernen. Wir brauchen diesen Stil nicht. Barzutat. Inhaltsstoffe. Die Inhaltsstoffe sind grundsätzlich in einer Reihe enthalten. Also werden wir hier die Karte verwenden. Also, wenn du dir das ansiehst, das ist unser Feld, okay? Also hier innerhalb der Mutation müssen wir dazu übergehen. Gehen wir zu Data Flow, um zu gelangen. Sie finden Zutaten für eine bestimmte Zutatenlinie von Recipe Insight. Okay, hier haben wir also die Zutatenlinie, die Array ist. Deshalb werde ich die Karte hier verwenden, um die Zutat für dieses bestimmte Rezept anzuzeigen . Also müssen wir das Rezept auf diese Weise ins Visier nehmen, die Zutat, die Linie, die Punktkarte, den Artikel. Es könnte jeder sein. Dann verwenden wir yet lift mit dem Klassennamen, dem von mir eingerichteten Text, den ich eingerichtet habe, und beginnen. Und hier haben wir unseren Artikel. Dann, nach dem Körper, nehmen wir einen. Also IMDB-Modell. Dafür werden wir also eine Schaltfläche zum Schließen haben. Also MDB, Schönheit und Nähe. Und hier, die Farbe, werde ich dem Land geben. Und onClick. Wir werden Schalter verwenden. Also müssen wir diese Funktion in unserer übergeordneten Komponente definieren, das ist die Textdatei ab.js. Lassen Sie uns nun am Rest des Stücks in unserer Datei app.js arbeiten . Also hier, was wir tun müssen. Immer wenn Sie also auf eine Karte klicken, wird ein Modal angezeigt. Außerhalb von Return müssen wir eine Funktion definieren. Und darin werde ich bei STP bestehen. Okay? Also können wir uns dem einfach widersetzen, egal wofür wir den staatlichen Wert haben. Wir können also hier bei SAP einstellen, was auch immer wir erhalten. Im Grunde speichern wir Objekte in einem Objekt. Dieses Rezeptobjekt enthält also unterschiedliche, unterschiedliche Details zu einem bestimmten Rezept, z. B. Zutaten auf Bildebene. Okay, wir speichern also Objekte, sogar drei, für die wir dieses Set-Rezept als leeres Objekt definiert haben . Wir untersuchen alles in einem Objekt. Also diesen Schalter, damit wir ihn hier benutzen können. In der Karte müssen wir also diesen Schalter bestehen. Also, okay, lass uns jetzt zu dieser Komponente gehen. Und auch hier müssen wir das definieren. Okay, ich werde das einfach kopieren, weil es dasselbe sein wird. Und hier müssen wir Toggle bestehen. Also hier onClick, was wir tun können. In onclick können wir also diesen Schalter verwenden, um dieses Rezept weiterzugeben. Okay, speichern wir diese Datei und gehen wir zur Textdatei ab.js. Sobald dieser silberne Look wahr geworden ist, müssen wir das Modell öffnen. Nach dieser MDB-Zeile müssen wir also im Grunde diese modale Komponente verwenden. Also wenn es stimmt, dann haben wir Bu, die Modellkomponente anzeigen. Lassen Sie uns also das von uns entwickelte Modell kompetent einsetzen. Also hatten wir diese wichtige Komponente automatisch für mich entfernt. Und hier müssen wir Requisiten wie das Showset weitergeben. Da dies also dazu auffordert und wir dies bereits in unserer Modellkomponente definiert haben, wird es hier der NCP sein. Und hier haben wir auch zwei Pfade. Jetzt speichern wir dieses und überprüfen in unserem Browser, ob es funktioniert oder nicht. Lassen Sie uns diesen aktualisieren. Klicken wir auf eine beliebige Kartenkomponente. Jetzt kannst du sehen, dass wir in der Lage sind , mehr Informationen zu diesem speziellen Rezept anzuzeigen , wie Kalorien und Zutaten. Das ist also auch erledigt. Also funktioniert alles. Du kannst es dort sehen. Deshalb haben wir diese App für Lebensmittelrezepte mithilfe der Artikelabfrage in React erstellt . Also werde ich eine Konsole öffnen, unabhängig davon, ob wir in dieser aktuellen Anwendung ein Problem haben oder nicht. Sie können also sehen, dass wir eine Art Warnung haben. Die Warnung können wir vorerst ignorieren. Und lassen Sie uns diese zweite Warnung korrigieren. Ich gehe in meinen VS-Code. Und hier können wir den Schlüssel benutzen. Also ist t gleich dem Index. Speichern wir diese Datei. Gehen wir zum Browser. Aktualisiere diesen. Jetzt sehen wir diese Warnung nicht, die sich auf unsere Kartenkomponente bezieht. Und du wirst diese Warnung vorerst ignorieren. Also lass uns diesen schließen. 27. Projekt 2 Befestigungstypen: Lassen Sie uns an dem Typ arbeiten, an dem wir in dieser Anwendung noch nicht wirklich gearbeitet haben. Gehen wir also zurück zum VS-Code. Und wenn ich nur Amy sagen würde, okay, damit Sie sehen können, dass wir in all diesen verschiedenen, unterschiedlichen Dateien den Typ wie jeden beliebigen verwenden müssen. Es sieht also nicht aus, wenn wir mit dem TypeScript arbeiten. Sie können also sehen, dass wir hier welche verwendet haben. Wir haben hier welche benutzt. Lass uns an diesem Typ arbeiten. Okay? Also, was ich Teilzeit machen werde, ist, hier einen Ordner zu erstellen, der üblich ist. Und ich werde einen Dateityp erstellen. Okay? Wenn Sie sich nun die Komponente im Modellpunkt TSX ansehen. Also hier haben wir ein Rezept. Bei dem Rezept sollte es sich um ein Objekt handeln, das Bilddaten der Inhaltsstoffe enthielt. Okay, also werden wir den Typ dafür definieren. Lassen Sie uns also den Typ exportieren. Und das sollte ein Empfängertyp und der Rezeptinhalt sein, die Eigenschaft wie das Etikett. Es wird also ein trainiertes Image sein. Es wird auch ein Frühling sein. Dann haben wir Kalorien, das wird eine Zutatenlinie sein. Linie mit Inhaltsstoffen. Das wird hinzugefügt und es wird etwas trinken. Okay. Jetzt speichern wir diese Datei. Gehen wir zu diesem Modell-Punkt-CSS. Und hier können wir diesen bringen. Das wird also beim STP-Typcode sein und diesen Typ automatisch für mich importieren. Also habe ich diesen Rezepttyp aus diesem Teil mitgebracht. Und hier haben wir auch eine breite Typisierung jeder anderen Art. Also hier wäre x der LTP-Typ. Und was können wir dafür tun, denn es stammt aus unserer App-Dot-TXT-Datei. Okay? Also hier was wir tun müssen, also React Dot Dispatch. Und hier wird es react.net axial und der Fehler Boolean sein. Wir müssen Boolean zuweisen. Okay? Danach, was wir tun müssen. Hier können Sie also sehen, dass wir eine Warnung erhalten haben. Gehen wir zu dieser Datei app.js. Hier. Sie können sehen, dass wir hier eine Warnung erhalten haben. Warum erhalten wir also diese Warnung? Denn wenn Sie zu dieser Textdatei ab.js zurückkehren , wo sie neu ist, also ein Rezept als Argument akzeptieren. Okay, was wir also tun können, wir können das Rezept bereitstellen. Und von hier aus müssen wir auch das Rezept bereitstellen , auch wenn Sie das Modell schließen. Weil wir jetzt mit dieser Gruppe zusammenarbeiten, müssen wir das Rezept bereitstellen. Danach. Gehen wir zu dieser Textdatei ab.js. Und was müssen wir hier tun? Wir können hier also nicht wieder wie alle schreiben, da Sie mit dem TypeScript arbeiten. Also, was wir hier tun können, es wird nur vom Typ LTP sein. Also müssen wir wieder zum Tippy-Typ von diesem Pfad bringen , der VS-Code importiert diesen automatisch für mich. Hier. Es wird breit sein, okay? Und hier müssen wir einfach nichts zurückgeben. Das ist also die kleinste, kleine Korrektur, die ich in dieser Anwendung mache , die sich auf den Typ bezieht. Jetzt müssen wir auch am Handklick arbeiten. Bearbeitet klicken Sie nichts , aber es ist ein Drop-down-Menü. Also hier wird es das React Dot Change Event sein. Und es wird ein HTML-Element sein, ein HTML-Auswahlelement. Da Sie sehen können, dass sie später bearbeitet wurden, haben wir nur ein Drop-down-Menü verwendet. Okay, deshalb ist es so ein HTML-Auswahlelement. Jetzt haben wir eine Warnung. Okay, lass uns in den Browser gehen. Jetzt können Sie sehen, dass es heißt, Ziele zu erreichen, Eigenschaften von Typ Rezept, Art eines Artefakts, dieses Problem zu befolgen. Was wir noch tun können. Also sollte es jetzt kein leeres Objekt sein. Okay? Oh, ja. Wir müssen diesen Rezepttyp mitbringen. Der Tippy-Typ ist bereits importiert. Darin müssen wir nun den Anfangswert definieren. Level ist nur die eingegebene Zeichenfolge , da zunächst alles die Eingabe D sein wird. Und das Image sollte auch darin bestehen, die Zinssätze, die wir haben, anzugeben, also werden sie Null sein. Und wir haben die Zutatenlinien. Also sollte es nicht sein, es sollte in einer schönen Ära sein. Jetzt ist diese Warnung weg. Und lassen Sie uns auch an diesem Teil arbeiten, in dem wir einen anderen, anderen Staat definiert haben. Also müssen wir auch hier den Typ erwähnen. Also hier wird es eine Zeichenfolge sein. Okay? Das ist auch ein Baum. Dies ist auch eine Zeichenfolge. Und dieser ist ein boolescher Wert. Speichern wir diesen. Und dort haben wir jede andere Zeit in dieser Datei verwendet . Also haben wir auch hier welche benutzt. Dafür, was wir tun können, können wir hier eine Nummer angeben. Und hier. Wir können diese Funktion verwenden. In einer modellierten Datei oder in einer TFX-Datei. Wir haben diese Funktion definiert. Also können wir diese Schnittstelle aus dieser Datei holen und wir können sie hier verwenden. Requisiten funktionieren. Also ich denke, wir müssen unsere Schnittstelle exportieren, exportieren, exportieren. Mal sehen, benutze es hier. Funktion. Wir fügen Code hinzu und haben diesen automatisch für mich importiert. Jetzt haben wir also noch keine andere Zeit in dieser Datei. Gehen wir wieder zur modellierten Datei oder TSX-Datei zurück. Also auch hier wieder, wir haben welche gekauft. Das ist also die JSX, okay, es sollte also eine seltsame Epithelquelle sein. Okay. Und lassen Sie uns auch Ihre Tiefe nutzen. Sollte keine Zahl sein und du solltest deinen Schlüssel benutzen können. Andernfalls erhalten Sie eine Warnung. Als ob jedes Kind ein Unikat sein sollte. Lassen Sie uns also Ihren Index verwenden. Und ich denke, auch in der Kartenkomponente verwenden wir jeden anderen Typ. Also hier können wir diesen Rezepttyp, diesen Rezepttyp auf diesen Pfad bringen . Und auch dafür sollte es ein Rezept sein. Okay? Hier geben wir schon das Rezept weiter. An jedem Ort, den wir noch haben, haben wir ME durch den richtigen Typ in unserer alten Datei ersetzt , in der wir einen anderen Typ verwendet haben. Gehen wir nun zurück zum Browser und überprüfen, ob er funktioniert oder nicht. Die Tatsache, dass ich auf jeden Fall denke , dass diese Verpflichtung besteht. Wir arbeiten. Okay, lassen Sie uns diese Anwendung aktualisieren. Lass uns etwas auswählen. Okay? Das funktioniert auch. Die Anwendung funktioniert wie gewohnt nachdem der richtige Typ in unserem Code definiert wurde. Das war's also aus diesem Video. 28. Projekt 2 Zusammenfassung: So konnten wir diese App für Lebensmittelrezepte mithilfe der RTK-Abfrage erfolgreich erstellen . In diesem Abschnitt hoffe ich, dass Sie jetzt gelernt haben wie Sie die Drittanbieter-API mit Artikelabfragen verwenden. Ich hoffe, Sie haben in diesem Abschnitt einige wichtige Konzepte im Zusammenhang mit Art K Query gelernt einige wichtige Konzepte im Zusammenhang mit . Also vielen Dank, Leute, dass ihr euch diesen Abschnitt angesehen habt. Ich werde weiterhin weitere Projekte hinzufügen die sich auf das Redact-Toolkit beziehen, einen Artikel, eine Abfrage. In diesem Kurs. 29. Zusammenfassung: Wenn Sie sich dieses Video ansehen, bedeutet das, dass Sie diesen Kurs abgeschlossen haben. Jetzt bin ich voll und ganz zuversichtlich, dass Sie mit React wenig Verständnis für das jQuery-Konzept der Kunst haben . Ich hoffe, Sie haben diesen Kurs mit einer neuen redigtativen Quantitative genossen und haben immer noch Zweifel an unserer Anfrage in Bezug auf diesen Kurs, dann können Sie immer wertvolle Gedanken im Kommentarbereich portieren Ich werde mein Bestes geben , um Ihre Anfrage zu lösen. Das war's. Von meinem Ende sehe ich dich im nächsten Kurs.