React-Masterclass 2025: 3 reale Projekte erstellen

1. React Masterclass-Einführung: Willkommen zum ultimativen React-Kurs. In diesem Kurs werden wir React von seinen Grundlagen bis hin zu fortgeschritteneren Konzepten erlernen . Wir werden also damit beginnen, wie React funktioniert. Warum React so beliebt ist: Verständnis von Bb und JSX, Aufbau von Komponenten, Hinzufügen von Ereignissen, Statusvariablen, wichtigen Hooks, Zugriff auf lokalen Speicher, React Street-Modus, Filtern und Kurzschließen von Daten, Suchen mit Autorizgons, Routing und Navigation mit beliebtesten Danach werden wir auch das Aufrufen von APIs, das Behandeln von Fehlern, das Anzeigen der Loader-Funktionalität, die Verwaltung und Validierung des Formulars, die Seitennummerierung, das unendliche Scrollen, die Benutzerauthentifizierung und Autorisierung mit dem JSON-Webtoken, was sehr wichtig ist, das Aufrufen geschützter APIs, das Erstellen der Kontexte und vieles mehr sehen Behandeln von Fehlern, das Anzeigen der Loader-Funktionalität, Verwaltung und Validierung des Formulars, Seitennummerierung, das unendliche Scrollen, Benutzerauthentifizierung und Autorisierung mit dem JSON-Webtoken, was sehr wichtig ist, Aufrufen geschützter APIs, . Wenn Sie ein absoluter Anfänger im Reagieren sind, wissen Sie vielleicht nichts über diese Konzepte Lassen Sie mich Ihnen also die Implementierung dieser Konzepte zeigen. Mithilfe dieser Konzepte werden wir drei reale React-Anwendungen erstellen. Die erste ist die Task-Manager-Anwendung, und wir können sagen, dass sie schwierig bis einfach ist. In dieser Anwendung kann der Benutzer seine täglichen Aufgaben verwalten. Mit diesem Formular können wir also eine Aufgabe hinzufügen, indem wir die Tags auswählen Je nach Status wird sie hier angezeigt. Außerdem können wir diese Aufgabe aus unserer Anwendung entfernen, sodass sie das beste Projekt für Anfänger ist. Lassen Sie mich Ihnen nun unser zweites Projekt zeigen, nämlich die Filmanwendung. Das Tolle an diesem Projekt ist, dass diese Daten echt sind und wir sie von einer anderen Website erhalten. Außerdem können wir von hier aus unsere Filmliste filtern und sie nach Datum und Bewertung sowie nach auf- und absteigend kürzen Bewertung sowie nach auf- und absteigend Wir können sagen, dass es sich um einen Schwierigkeitsgrad bis Mittelstufe handelt. Lassen Sie mich Ihnen jetzt unser drittes Projekt zeigen. Dieses Projekt ist sehr aufregend. Also werden wir eine E-Commerce-Anwendung erstellen , die so aussieht. Sie können sehen, wie schön das aussieht. In diesem Projekt werden wir viele fortgeschrittene Konzepte wie Routing, API-Aufruf, unendliches Scrollen, Leerverkäufe von Produkten nach Preis oder Bewertung, Produktsuche mit automatischen Vorschlägen, Authentifizierung wie Registrierung, An - und Abmeldung, Verwaltung unseres Einkaufswagens und vieles mehr implementieren viele fortgeschrittene Konzepte wie Routing, API-Aufruf, unendliches Scrollen, Leerverkäufe von Produkten nach Preis oder Bewertung, Produktsuche mit automatischen Vorschlägen, Authentifizierung wie Registrierung, An Leerverkäufe von Produkten nach Preis oder Bewertung, Produktsuche mit automatischen Vorschlägen, - und Abmeldung, - und Abmeldung, Verwaltung unseres Einkaufswagens und vieles mehr Und nach Abschluss dieses Projekts werde ich Ihnen den Bereitstellungsprozess der React-Anwendung zeigen werde ich Ihnen den Bereitstellungsprozess der React-Anwendung zeigen. Jetzt fragst du dich vielleicht, wer ich bin? Ich bin Softwareentwickler und unterrichte über meinen YouTube-Kanal auch Programmieren in leicht zu Programmieren in leicht zu erklärender Sprache. Gott segne dich und mit meinen Online-Kursen. Außerdem gebe ich Ihnen viele Tipps und Tricks, die Ihnen bei der Erstellung besserer React-Anwendungen sehr helfen werden . Nach Abschluss dieses Kurses werden Sie React-Code mit mehr Selbstvertrauen und unter Verwendung der besten Techniken schreiben . Ich weiß, dass Sie sich darauf freuen, schnelle React-Anwendungen zu lernen und zu entwickeln. Lassen Sie uns also einsteigen und in diesen Kurs eintauchen. 2. Was ist React?: Willkommen im ersten Abschnitt des ultimativen React-Kurses. Bevor wir mit dem Erlernen von React beginnen, wollen wir uns zunächst darüber im Klaren sein, was React ist. React ist eine Open-Source-JavaScript-Bibliothek zum Erstellen von Frontend-Anwendungen verwendet wird. In einfachen Worten, mit React können wir schnelle und bessere Frontend-Anwendungen erstellen. React wurde 2011 von Facebook erstellt ist derzeit die beliebteste und am häufigsten verwendete JavaScript-Frontend-Bibliothek. Es gibt auch andere JavaScript-Bibliotheken wie Angular und View, aber sie sind nicht so besser wie React. Wenn Sie nach einem Job als Frontend-Entwickler oder Full-Stack-Entwickler suchen , sollten Sie wissen, wie Sie mit React eine bessere und schnellere Anwendung erstellen können. Sie fragen sich vielleicht, was ist das Besondere an React? Warum ist React so beliebt? Bevor React erstellt wurde, erstellte unser Browser beim Laden unserer Webseite in einen Browser eine baumartige Struktur mit unserem STML-Code Diese Baumstruktur wird als Document Object Model oder kurz Dom bezeichnet als Document Object Model oder kurz Dom Durch die Verwendung dieses Doom in JavaScript können wir unserer Anwendung nun verschiedene Funktionen hinzufügen Ausblenden der Seitenleiste beim Klicken auf die Schaltfläche, Bearbeitung von Formulareingaben usw. Hier ist also das Beispiel für das Ausblenden der Seitenleiste beim Klicken auf eine Schaltfläche Dies ist der Code von Vanilla JavaScript, was reinen JavaScript-Code ohne Verwendung externer Tools bedeutet ohne Verwendung externer Tools Stellen Sie sich nun vor, wir erstellen umfangreiche Anwendungen wie Instagram oder Amazon mit Vanilla JavaScript. Und wie viele Codezeilen müssen wir schreiben? Selbst wenn wir es schaffen, diesen langen Code zu schreiben, wird unser Code unübersichtlich und schwer zu verwalten Jetzt, zu diesem Zeitpunkt, kommt React ins Spiel. Mit React müssen wir uns keine Gedanken darüber machen, Vanilla-Javascript-Code zu schreiben. Stattdessen werden wir unsere Anwendung in kleine Codeteile unterteilen . Dieses kleine Stück Code wird als Komponente bezeichnet und dann kümmert sich React darum, einfachen Code für die Erstellung und Aktualisierung von Dom zu schreiben . Components wird verwendet, um wiederverwendbaren und besser organisierten Code zu schreiben . Lassen Sie mich Ihnen das anhand des Beispiels erklären. Hier haben wir also unser Projekt drei, bei dem es sich um eine E-Commerce-Anwendung handelt. Hier können wir sehen, dass wir eine neue Leiste haben, und auf der rechten Seite der Neb-Leiste haben wir ein paar Links für verschiedene Seiten So können wir die Nabar-Komponente separat erstellen, und in dieser Komponente können wir auch Komponenten für diese Links hinzufügen, und dann können wir sie mehrmals für Ny Bar-Links wiederverwenden Jetzt haben wir auf der Produktseite eine Seitenleiste und hier haben wir die Liste der Produkte, also erstellen wir zwei weitere Komponenten, Seitenleiste und In dieser Produktliste haben wir jetzt ein paar Produktkarten, sodass wir eine weitere Komponente für die Produktkarte definieren und sie dann in dieser Produktliste mehrmals wiederverwenden können Produktkarte definieren und sie dann in dieser Produktliste mehrmals wiederverwenden sie dann in dieser Produktliste mehrmals Also erstellen wir all diese Komponenten einzeln und kombinieren sie dann, um unsere Seite zu erstellen. Durch die Erstellung kleiner Komponenten können wir unseren Code einfach verwalten und unsere Anwendung funktioniert auch schnell. Außerdem können wir mit React eine einseitige Anwendung erstellen, was bedeutet, dass unsere Anwendung nur einmal geladen wird und dann alle Seiten geladen werden, und dann alle Seiten ohne die gesamte Seite neu zu laden ohne die gesamte Seite neu zu laden. Dadurch ist unsere Anwendung fast 50% schneller als normale SDML-CSS - und JavaScript-Anwendungen Ein weiterer Grund, warum React so schnell ist , ist, dass React über eine virtuelle Dom-Funktion verfügt Nun, das ist das Thema , das viele Entwickler verwirrt, aber es ist wirklich einfach. Lassen Sie mich Ihnen das anhand eines Beispiels erklären. Stellen Sie sich vor, Sie haben ein Puzzle auf Ihrem Tisch. Es ist ein wunderschönes Landschaftsbild und es enthält viele Puzzleteile , die zusammenpassen, um ein vollständiges Bild zu bilden Jedes Puzzleteil steht für einen anderen Teil Ihrer Webseite, z. B. eine Kopfzeile, eine Seitenleiste oder einen Hauptinhaltsbereich Nehmen wir nun an, Sie haben einen magischen Assistenten namens Virtual Puzzle Solver Dieser Assistent hat eine exakte Kopie Ihres Puzzles, aber es ist virtuell, nicht Wann immer Sie nun eine Änderung an Ihrem Rätsel vornehmen möchten, beschreiben Sie die Änderungen an Ihrem virtuellen Anstatt die echten Puzzleteile direkt zu manipulieren. Du könntest zum Beispiel sagen: Hey, virtueller Rätsellöser, ich möchte das blaue Teil von der unteren rechten Ecke in die obere linke Ecke bewegen unteren rechten Ecke in die obere linke Ecke Anstatt das Puzzleteil auf dem realen Tisch physisch zu bewegen , schaut sich Ihr Assistent schnell seine eigene Kopie an dann heraus, welche Änderungen erforderlich sind, und sagt Ihnen rechts, entfernen Sie das blaue Teil von unten rechts und fügen Sie es oben links hinzu. Jetzt nehmen Sie diese Änderungen am echten Puzzle auf der Grundlage der Anweisungen Ihres Assistenten vor. Der Vorteil ist, dass Ihr virtueller Rätsellöser schnell erkennen kann , welche Teile Sie bewegen müssen , um das aktualisierte Bild zu vervollständigen , ohne dass Sie jedes Teil manuell neu anordnen In diesem Beispiel steht das echte JigsoPuzzle für Untergang und der virtuelle Rätsellöser für die virtuelle Kuppel in React virtuelle Rätsellöser für die virtuelle Kuppel den echten Untergang und der virtuelle Rätsellöser für die virtuelle Kuppel in React. Wenden wir dieses Konzept nun auf Rax Virtual Doom an. Wenn Sie also eine Webseite mit React erstellen, behält sie eine virtuelle Darstellung Ihrer Webseite und sie wird als Virtual Dom bezeichnet Wann immer Sie Ihre Webseite aktualisieren möchten, beschreiben Sie die Änderungen am virtuellen Dom, anstatt das echte Doom direkt zu virtuellen Dom, anstatt das modifizieren Reax Virtual Doom vergleicht den neuen virtuellen Dom effizient mit dem vorherigen Genau wie Ihr virtueller Rätsellöser, schnell erkennt, welche Rätsel-PCs sein eigenes Rätsel lösen müssen Danach weiß React genau, welcher Teil des echten Doms geändert werden muss, um das neue virtuelle Dom Mithilfe dieses virtuellen Dom-Ansatzes optimiert React den Prozess der Aktualisierung des realen Doom. Das bedeutet, dass nur die erforderlichen Änderungen vorgenommen werden, wodurch Ihre Webseite effizienter und reaktionsschneller wird, wodurch Ihre Webseite effizienter und reaktionsschneller wird, insbesondere bei häufigen Aktualisierungen oder Interaktionen Zusammenfassend lässt sich sagen, dass der virtuelle Rätsellöser die Aktualisierung des echten Puzzles überschaubarer DX Virtual Doom macht die Aktualisierung des echten Doom reibungsloser und effizienter und auch die Leistung und Benutzererfahrung Ihrer macht. DX Virtual Doom macht die Aktualisierung des echten Doom reibungsloser und effizienter und verbessert auch die Leistung und Benutzererfahrung Ihrer Webanwendung. Das war's also für die Theorie. Machen Sie sich vorerst über all diese Dinge keine Gedanken. Sie werden diese Konzepte verstehen , wenn wir mehrere Projekte erstellen. 3. Entwicklungsumgebung einrichten: Lassen Sie uns eine Entwicklungsumgebung für diesen Kurs einrichten. Zuallererst brauchen wir Node JS. Eine Sache, die ich spezifizieren möchte, wir nur einen Teil von Node JS verwenden , ist, dass wir nur einen Teil von Node JS verwenden , der NPM heißt und als Node Package Manager bezeichnet Dieses NPM wird verwendet, um React-Anwendungen und einige zusätzliche Funktionen zu installieren React-Anwendungen und einige zusätzliche Gehen Sie zu nodjs.org und laden Sie die neueste stabile Version von NodeJS von hier Klicken Sie auf acht und der Download wird gestartet. Und ich habe einen Vorschlag, wenn Sie NodeJS bereits auf Ihrem System installiert haben, dann entfernen Sie bitte diese Version und installieren Sie die neueste Version von Öffnen Sie nun dieses Setup und klicken Sie auf Weiter. Akzeptieren Sie die Bedingungen „Weiter“, Weiter“, „Weiter“ und installieren Sie. Und sehen Sie, wie der Installationsvorgang gestartet wurde. Und es ist geschafft. Also installieren wir erfolgreich nodejs in unserem System. Lassen Sie uns das nun überprüfen. Öffnen Sie also die Befehlszeile in Windows, oder wenn Sie Mguser sind, öffnen Sie das Terminal und schreiben Sie den Knoten V und drücken Sie die Eingabetaste Wenn Sie nodejs erfolgreich installiert haben, werden Sie diese Version sehen Wenn Sie etwas erhalten, das Node nicht als interner oder externer Befehl erkannt wird, müssen Sie Node erneut installieren Schreiben Sie danach NPM und drücken Sie die Eingabetaste. Und wir bekommen auch diese Version, herrlich. Als Nächstes benötigen wir für diesen Kurs Vascde , einen der besten Code-Editoren. Fast 95% der Entwickler verwenden VSCode Fast 95% der Entwickler verwenden Gehen Sie also zu code.visualstudio.com und installieren Sie es. Es ist extrem einfach. Öffnen Sie den VS-Code und um unsere Programmiererfahrung zu verbessern, werden wir einige Erweiterungen installieren. Gehen Sie zu diesem externen Panel und suchen wir zuerst nach sieben React Snippets und installieren diese Erweiterung Dies ist eine der besten Erweiterungen schnell React-JS-Code zu schreiben Danach haben wir eine weitere coole Erweiterung namens Prettier Dies ist die Erweiterung, die jeder Entwickler im Vas-Code verwendet. Prettier formatiert Ihren Code auf sehr organisierte Weise. Installieren Sie diese Erweiterung. Nett. Jetzt müssen wir kleine Einstellungen für die Installation von Prettier im Installationsbereich Scrollen Sie im Installationsbereich zum Standardformatierungsbereich nach unten und kopieren Sie diese erste Codezeile Öffnen Sie nun die Einstellungen und öffnen Sie in der oberen rechten Ecke Einstellungen, Hunde und Datei und fügen Sie diese Zeile am Ende Speichern Sie diese Datei. Jetzt zurück zur Einstellung und zum Suchformat beim Speichern. Das ist nicht möglich und fertig. Nun noch eine Sache, viele Schüler fragen nach meinem VS-Code-Thema. Suchen Sie nach AU und installieren Sie diese Theme-Erweiterung. Klicken Sie nun auf diese Einstellungen und gehen Sie zum Code-Thema und setzen Sie es auf AU-Grenze, und fertig. Unsere Umgebung ist bereit. In der nächsten Lektion werden wir nun unsere erste React-Anwendung erstellen. 4. React-Anwendung erstellen: Es gibt also zwei Möglichkeiten, React-Anwendungen zu erstellen. Erstens können wir die Create React-App oder White verwenden. Create React-App ist die alte und die Erstellung benötigt mehr Zeit. Wir werden Weiß für die Erstellung der neuen React-Anwendungen verwenden . Erstellen Sie also zunächst einen Ordner, in dem Sie React üben möchten , und öffnen Sie diesen Ordner im Command prom. Und wenn Sie ein Mac-Benutzer sind, dann öffnen Sie den Ordner Terminal , schreiben Sie NPM, Create, White, und drücken Sie die Eingabetaste, um fortzufahren, schreiben Sie Y und drücken Schreiben Sie jetzt hier Ihren Anwendungsnamen. Ich schreibe die erste Bewerbung und drücke Enter. Jetzt müssen wir hier das Framework auswählen. Also wählen wir React und drücken Enter. Jetzt können wir hier Ja Script oder TypeScript auswählen. Mach dir darüber keine Sorgen . Wählen Sie einfach Ja-Skript und drücken Sie die Eingabetaste. In nur einer Sekunde ist unsere Anwendung fertig. Dadurch wird eine grundlegende React-Vorlage erstellt, sodass wir die React-Anwendung nicht von Grund auf neu erstellen müssen . Dieser Befehl gibt uns eine schnelle Reaktionsvorlage. Jetzt müssen wir hier diese drei Befehle schreiben. Also müssen wir zuerst in unsere Anwendung gehen, indem wir eine CD schreiben, Tabulatortaste drücken und die Eingabetaste drücken. Schreiben Sie jetzt NPM, installieren Sie es und drücken Sie die Eingabetaste. Dieser Befehl installiert alle Pakete, die benötigt werden, um eine React-Anwendung wie Webpack zu erstellen , mit der verschiedene Dateien in einer Datei gebündelt werden Ein anderes wichtiges Paket ist Bible. Dieses Paket wird zur Konvertierung von JSX verwendet, dem modernen JavaScript-Code, der JML-Code sagt Bible konvertiert diesen JSX also in einfachen JavaScript-Code , den Browser verstehen Keine Sorge, ich werde dir das in diesem Abschnitt zeigen. Schreiben Sie jetzt einfach Code, Punkt und drücken Sie die Eingabetaste. Dieser Befehl öffnet den Curen-Ordner im VS-Code. Wir können dieses Terminal schließen. Wir brauchen das nicht. Um diese React-Anwendung in unserem System auszuführen, öffnen wir das Terminal, indem wir Control plus Peptic oder Command plus BTI drücken , NPM run dive schreiben und Dieser Befehl wird einige Zeit in Anspruch nehmen und hier erhalten wir unseren Anwendungslink des lokalen Hosts Halten Sie die Strg- oder Befehlstaste gedrückt und klicken Sie auf diesen Link. Dadurch wird unsere Anwendung in unserem Browser geöffnet. So sah das React Starter Pack aus und ich sehe, dass es auf dem lokalen Host 5173 läuft Also haben wir erfolgreich unsere React-Anwendung erstellt. In der nächsten Lektion werden wir nun den ersten Code in unsere React-Anwendung schreiben . 5. Lass uns die React-Vorlage verstehen: Lassen Sie uns zunächst verstehen, was wir in dieser React-Vorlage erhalten. Zuerst erhalten wir einen Ordner, der keine Module ist. In diesem Ordner haben wir alle Pakete für unsere Anwendung installiert. Ohne diese Knotenmodule können wir unsere React-Anwendung ausführen, aber keine Sorge, wir berühren diesen Ordner nicht einmal. Das Lustige daran ist, wenn ich zwei bis drei Projekte in React erstelle, weiß ich nicht einmal, was dieser Knotenmodulordner macht. In SOT ist Node Modules der Ordner , in dem sich alle Installationspakete und Bibliotheken befinden. Als Nächstes haben wir den öffentlichen Ordner. Dieser öffentliche Ordner enthält statische Ressourcen, die direkt an den Client gesendet werden. Hier haben wir zum Beispiel White tot SVG, was unser fantastisches Symbol ist. Lass es mich dir zeigen. Hier in unserem Browser-Tab können wir unser fantastisches Symbol sehen. Danach haben wir den SRC-Ordner, was Quellordner bedeutet Dies ist der Ordner, in dem wir fast unsere gesamte Zeit damit verbringen , Code zu schreiben Hier haben wir zuerst den ASES-Ordner. In diesem Ordner werden wir all unsere Bilder, Symbole, Teiche usw. ablegen , die wir in unseren Komponenten verwenden werden Als nächstes haben wir eine Reihe von Dateien. erste ist App Dot JSX, die Stammkomponente unserer Anwendung, was bedeutet, dass dies der Ausgangspunkt unserer Komponentenkette ist der Ausgangspunkt unserer Komponentenkette Beachten Sie, dass dieser Jx die Erweiterung der React-Komponente ist. Es ist Hunden fast ähnlich. Wir werden den Unterschied in den kommenden Lektionen sehen. Lassen Sie uns das zunächst öffnen und sehen, wie die Komponenten aussehen. Alle React-Komponenten haben diese Grundstruktur. Oben importieren wir einige Dateien wie andere Komponenten, CSS-Dateien, oder wir importieren Objekte aus Paketen oder Logos, Bildern und allem. Danach haben wir eine Funktion, die denselben Namen wie unser Komponentenname hat. In diesem Fall ist das eine App. Nun, diese Funktion gibt immer etwas zurück , das ähnlich aussieht. HTML-Markup. Beachten Sie jedoch, dass dies nicht das ursprüngliche DML-Markup ist. Dies wird JSX genannt, was für JavaScript XML steht Mit diesem JSX können wir also STML- und JavaScript-Code zusammen schreiben, und das ist das Herzstück Das ist also der Teil, entscheidet, wie unsere Website aussieht, und diese Codeausgabe ist das, was wir in unserem Browser sehen Und auch die JSX-Syntax ähnelt dem STML-Markup. So können wir problemlos Code in JavaScript in weniger Code schreiben. Und am Ende exportieren wir in jeder Komponente diese Komponente standardmäßig, sodass wir sie in einer anderen Datei oder Komponente verwenden können. Wie Sie bereits gesagt haben, Weblelibrary, nehmen Sie diesen JSX-Code und konvertieren Sie ihn in einfachen JavaScript-Code in einfachen JavaScript-Code , Danach haben wir eine App-Dot-CSS-Datei, mit der das App-Punkt-JSX-Datei-Markup formatiert wird Und auch das geben wir oben in der App-Komponente ein. Als Nächstes haben wir die Hauptpunkt-JSX-Datei, die wichtigste React-Datei Dies ist die Datei, die unsere Komponenten mit unserer Indexpunkt-HTML-Datei verbindet , die wir hier haben. Keine Sorge, es ist dasselbe, wie wir unsere STML-Datei haben. Dies ist die Haupt-HTML-Datei, die in unserem Browser läuft . Lass es mich dir zeigen. Ich ändere hier diesen Titel in meine erste React-App. Speichern Sie diese Datei und sehen Sie im Browser, hier bekommen wir unseren aktualisierten Titel. Außerdem müssen wir unsere Seite nicht wie SDML aktualisieren. React lädt unsere Anwendung automatisch neu , wenn wir unsere Datei speichern, und das ist sehr cool Damit haben wir jetzt das F-Symbol, das wir zuvor gesehen haben Scrollen Sie nun nach unten zum Hauptteil und sehen Sie, hier haben wir nur zwei Tags. Der erste ist DU mit einer ID-Wurzel. Dies ist das Haupt-Tag , in dem alle Komponenten angezeigt werden. Lass es mich dir zeigen. Klicken Sie in unserem Browser mit der rechten Maustaste auf die Seite und gehen Sie zu Inspect. Hier können Sie sehen, dass wir unser Du mit ID root haben und darin haben wir unsere App-Komponente. Danach haben wir das Script-Tag und hier verlinken wir unsere Haupt-JSX-Datei Lassen Sie uns schnell sehen, wie der Code in der JSX-Datei mit dem Hauptpunkt aussieht JSX-Datei mit dem Hauptpunkt Ganz oben haben wir einige Importe. Danach haben wir Codezeilen, mit denen wir unsere App-Komponente mit Du verbinden können , die die ID root haben. Wir haben also React Dom, das wir aus dem React-Dom-Client importiert haben, und das hat eine Methode, create root. Und darin zielt es das Stammverzeichnis nach dem Punkt „Element nach ID abrufen“ ab. Danach hat diese Root-Variable eine Methode namens render, und darin übergeben wir die Komponente, die wir in diesem Root-Du anzeigen möchten. Mach dir darüber keine Sorgen. In der nächsten Lektion werden wir den ganzen Code von Grund auf neu schreiben. Nach dem Quellordner haben wir nun die Datei Getting nor, in der wir definieren können , welche Dateien oder Ordner nicht auf Github hochgeladen werden. Als Nächstes haben wir das Paket Dot GSN-Datei, das alle Informationen zu unserer Anwendung enthält Sie können hier den Namen und die Version sehen , und in diesem Abhängigkeiten-Array haben wir eine Reihe von Paketen, haben wir eine Reihe von Paketen die bei der Installation installiert werden, und wir haben auch deren Version Wenn wir in Zukunft unseren Ordner nor models verloren haben, mithilfe dieser Paketpunkt-GSN-Datei können wir mithilfe dieser Paketpunkt-GSN-Datei unsere Knotenmodule neu erstellen Jetzt haben wir auch Skripte , also Sortierkarten für diese Befehle Zum Beispiel haben wir zuvor NPM run Dao zum Ausführen unserer Anwendung verwendet NPM run Dao zum Ausführen unserer Anwendung Intern führt das also diesen React Script Dav-Befehl aus. Danach haben wir Packages Log Dot JSn, das im Wesentlichen verwendet wird, um die Abhängigkeit auf ein bestimmtes Vos und eine bestimmte Nummer zu sperren die Abhängigkeit auf ein bestimmtes Vos und eine bestimmte Nummer zu Und endlich haben wir die Datei confit js mit weißem Punkt, die das Konfigurationsobjekt unserer Anwendung ist Im Moment müssen wir uns keine Gedanken über diese anderen Dateien machen. In erster Linie liegt unser Fokus darauf, wie man schnelle und am besten reagierende Anwendungen erstellt. 6. Code von Grund auf neu schreiben: Lassen Sie uns jetzt Code von Grund auf neu schreiben. Der Grund, warum ich möchte, dass Sie Code von Grund auf neu schreiben, ist , dass ich Ihnen zeigen möchte, wie React-Komponenten eine Verbindung zum Stammelement herstellen. Löschen Sie zunächst den vollständigen Quellordner, wir werden ihn von Grund auf neu erstellen. Erstellen Sie nun einen neuen Ordner namens SRC und darin erstellen wir eine neue Datei namens main dot Jx Erinnerst du dich, was diese Jx-Hauptdatei macht? Schreiben? Es wird die Root-Komponente deklarieren, oder wir können sehen, was wir in dieser DU mit der ID root anzeigen wollen . Jetzt importieren wir oben einige Objekte aus der Bibliothek und mithilfe dieser Objekte können wir unsere Anwendung mit der Index-DML-Datei verbinden Importieren Sie zunächst das React-Objekt aus der React-Bibliothek. Wenn Sie mit diesem Import oder anderen JavaScript-Konzepten nicht vertraut sind , machen Sie sich keine Sorgen, schreiben Sie diesen Code so, wie ich schreibe, denn im nächsten Abschnitt verstehen wir alle nützlichen Konzepte von JavaScript, die wir in React verwenden. Als Nächstes importieren wir React Dom aus dem React-Dom-Client. In der nächsten Zeile erstellen wir nun eine Variable, const Auch hier handelt es sich um eine SEX-DA-Skriptfunktion, und das werde ich Ihnen im nächsten Abschnitt zeigen Also const und gib deinen Variablennamen an. Sagen wir mein erstes Element. Du kannst nehmen, was du willst. Es liegt ganz bei dir. Entspricht, hier schreiben wir H ein Tag. Das ist mein erstes Element. Und schließe das H-One-Tag. Beachten Sie, dass dies kein SDML-Markup ist. Das ist JSX, das wie SDML aussieht , weil wir kein JavaScript hinzugefügt haben Danach werden wir dieses Element in unserem Root D anzeigen . Also reagieren wir, Dom, Punkt, erstellen Und innerhalb dieser Methode müssen wir unser DU mit der Root-ID als Ziel angeben. Das Dokument ermittelt also Element für ID und übergibt hier die Wurzel in Doppelcodes. Und zuletzt müssen wir deklarieren, welches Element oder welche Komponente wir anzeigen möchten. Also schreiben wir Punkt, Rendern und darin übergeben wir unser Element, mein erstes Element. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unseren Text. Das ist mein erstes Element. Lassen Sie uns nun überprüfen, ob es in unserem RooTT ist oder nicht. Also rechtes Bein auf den Text und geh zur Inspektion. Und Sie können sehen, dass es in unserem Stammverzeichnis ist, also funktioniert es. Herzlichen Glückwunsch, Sie haben Ihre erste React-App erstellt. Jetzt fügen wir hier dieses Element hinzu. Aber in der echten React-Anwendung werden wir hier unsere App-Komponente hinzufügen. Mach dir darüber keine Sorgen. Ich verspreche, dass Sie sich bald mit React auskennen und nicht versuchen werden, jedes Thema auf einmal zu verstehen. Denn mit etwas Übung wirst du jedes Thema verstehen. 7. Abschnitt 02 JavaScript ES7-Refresher: Willkommen im zweiten Abschnitt des ultimativen React-Kurses. In diesem Abschnitt werden wir uns mit einigen der wichtigen Javascript-Themen befassen , die wir in React häufig verwenden. Wir beginnen mit War, wie er seine ArwFunction-Syntax auf Objekteigenschaften mit verschiedenen Methoden zugreift Danach werden wir die Destrukturierung von Objekten sehen . Also Methoden wie Map and Filter, Spread-Operator , ternärer Operator, Module und vieles mehr Einige dieser Konzepte kennen Sie vielleicht schon, aber sehen Sie diesen Abschnitt als Auffrischung Sie sind sich Ihrer Javascript-Kenntnisse sicher, dann können Sie diesen Abschnitt überspringen Es liegt ganz bei dir. Das Ziel dieses Abschnitts ist es, Sie mit allen notwendigen Konzepten von JavaScript vertraut zu machen , die in React verwendet werden. So können Sie React einfach lernen, ohne sich Gedanken über moderne JavaScript-Konzepte machen zu müssen, und sich hundertprozentig darauf konzentrieren, React zu lernen. 8. var, let und const: A t und const, diese drei Schlüsselwörter werden verwendet, um Variablen in JavaScript zu definieren Latin Const ist eine neue Funktion in modernem JavaScript. Die meisten Entwickler verwenden Let und Const anstelle von War Lassen Sie uns den Unterschied zwischen et const und War Needed verstehen et const und War In unserem vorherigen Projekt, das wir im ersten Abschnitt erstellt haben, openmin dot JSX-Datei, und hier entfernen wir erste Frage ist, was am Krieg falsch ist , dass wir neue Funktionen für die Deklaration verwenden müssen Also definiere ich hier eine Funktion namens print loop, und innerhalb dieser Funktion verwenden wir simple for loop. Zuerst definieren wir die Variable, I entspricht Null Dann setzen wir die Bedingung I auf weniger als drei und zuletzt I plus plus. Und innerhalb dieser Schleife wollen wir diesen Wert I drucken. Also Console Dot Log I. Jetzt, am Ende, rufen wir diese Print-Loop-Funktion auf. Sag die Änderungen und sieh sie dir an. Siehst du, hier bekommen wir Null, Eins und Zwei. Perfekt. Lassen Sie mich Ihnen jetzt zeigen, was das Problem mit dem Krieg ist. Also hier, nach dieser Herbstschleife, Konsolenfolie I. Können Sie sich vorstellen, wie unsere Ausgabe aussehen wird ? Lass es mich dir zeigen. Speichern Sie die Änderungen und C, hier erhalten wir diesen I-Wert, der drei ist. Also hier wollen wir die Variable I nur für diese For-Schleife definieren . In anderen Programmiersprachen sollte die Variable nur für den Block zugänglich sein, in dem sie definiert wurde, und das wird als Gültigkeitsbereich bezeichnet. R ist keine Blockbereichsvariable. Es ist die funktionale Bereichsvariable, was bedeutet, dass wir innerhalb dieser gesamten Funktion auf diese I-Variable zugreifen können . Stellen Sie sich nun vor, wir müssen uns immer einen neuen Variablennamen einfallen lassen. Um dieses Problem in Variablen ESC Oxcope mit zwei Schlüsselwörtern zu lösen, let und const Also gehen wir hier einfach an den Ort des Krieges vorbei, speichern die Änderungen und schauen uns das an Siehst du, hier bekommen wir den Fehler, I ist nicht definiert. Also jetzt ist diese I-Variable nur innerhalb dieser vier Schleifen zugänglich. Wir können sagen, dieser Blockbereich. Wir verwenden War, wenn wir auf Variablen mit vollem Funktionsumfang zugreifen wollen , aber das ist selten. Meistens verwenden wir late oder const, wenn wir auf diese Variable nur innerhalb des Codeblocks zugreifen wollen , in dem sie definiert wurden Jetzt denkst du vielleicht, was ist der Unterschied zwischen Late und Const Hier bedeutet Const konstant. Konstant bedeutet, dass wir es nicht ändern können. Lass es mich dir zeigen. Lassen Sie uns diesen Code entfernen und hier definieren wir zwei Variablen. erste mit lat, X ist gleich zehn und die zweite mit const, Y ist gleich zehn Jetzt können wir den Variablenwert, den wir mit late deklarieren, neu zuweisen den Variablenwert, den wir mit late deklarieren, Hier können wir angeben, dass X gleich 20 ist, aber wir können den Variablenwert, den wir mit const deklarieren, nicht neu zuweisen , also können wir nicht schreiben, dass Y gleich 20 ist Es wird uns einen Fehler geben. Und nimm. Siehst du, hier bekommen wir eine Typfehlerzuweisung zu einer konstanten Variablen. Wenn wir also ihren Wert ändern wollen, dann verwenden wir const und wenn Sie ihren Wert ändern wollen, dann verwenden wir late Um es noch einmal zusammenzufassen: Verwenden Sie das Schlüsselwort War nicht, da es einen Funktionsumfang hat, und ziehen Sie es Funktionsumfang hat, und ziehen Schlüsselwort Cs vor der Verspätung zu verwenden Verwenden Sie das Schlüsselwort at nur, wenn Sie das neu zuweisen möchten 9. Pfeilfunktion: Was ist also eine Pfeilfunktion? Fehlerfunktion ist eine weitere Möglichkeit , die JavaScript-Funktion zu definieren. Mit anderen Worten, wir können JavaScript-Funktionen auf einfache und unkomplizierte Weise schreiben . Dies ist eine sehr nützliche Funktion von Javascript, wenn wir an fortgeschrittenen Themen arbeiten. Ich füge unseren vorherigen Code in den Quellordner ein, wenn Sie die Konzepte überarbeiten möchten Hier definieren wir eine Funktion namens Say Hello. In dieser Funktion konsolen wir einfach das Punktprotokoll und wir wollen diese Hello JavaScript-Welt drucken. Wir definieren diese Funktion mit dem Schlüsselwort function. Lassen Sie uns nun sehen, wie Sie dieselbe Funktion mit der Pfeilfunktion erstellen . die Pfeilfunktion zu definieren, müssen wir also zunächst let oder const verwenden Aber in den meisten Fällen verwenden wir const weil wir diese Funktion nicht neu zuweisen wollen Hier schreiben wir unseren Funktionsnamen. Nehmen wir an, wir erstellen Gleichungen bis wir jetzt Klammern für die Funktion verwenden, und dann verwenden wir gleich und größer als, wodurch Und dann fügen wir Ci-Klammern hinzu, um den Cd-Block für diese Pfeilfunktion hinzuzufügen Darin schreiben wir das Punktprotokoll für die Konsole. Hallo JavaScript-Welt. Lassen Sie uns nun diese Funktion aufrufen. Hier können wir die Pfeilfunktion mit ihrem Namen aufrufen, genauso wie wir unsere normale Funktion nennen. Die Änderungen und schauen Sie sich das an. Öffnen Sie die Konsole und sehen Sie, dass wir hier das gleiche Ergebnis erzielen. Beide Funktionen sind also gleich. Diese Pfeilfunktionssyntax hilft uns bei fortgeschrittenem Javascript. Lassen Sie mich Ihnen meinen Trick zeigen, mit dem Sie sich an die Syntax dieser Pfeilfunktion erinnern können, als ich anfing, Javascript zu lernen. Also lassen wir unsere Funktion Hallo sagen. Entfernen Sie nun dieses Funktionsschlüsselwort und spielen Sie const ab. Dann fügen wir zwischen dem Funktionsnamen und der Klammer Gleichheiten hinzu, fügen wir zwischen dem Funktionsnamen und der Klammer Gleichheiten hinzu, und zwischen den Klammern und den C-Klammern fügen wir einen Pfeil wir Wenn wir nun im Pfeilfunktionscodeblock nur eine Zeile haben, können wir diese geschweiften Klammern Lassen Sie uns diese entfernen. Speichern Sie die Änderungen und sehen Sie wie einfach und leicht die Funktion zu definieren Könnt ihr das jetzt? Wie können wir Argumente zur Pfeilfunktion hinzufügen? Richtig, es ist genauso, wie wir die normale Funktion übergeben. Also fügen wir hier Sprache hinzu und in dieser Konsole zeigen wir diesen Sprachparameter an. Wenn wir nun diese Funktion aufrufen, übergeben wir sie, sagen wir reagieren. Speichern Sie die Änderungen und sehen Sie, wir bekommen Hello Javascript World React. 10. Zugriff auf die Objekte: Lassen Sie uns ein bisschen über Objekte sprechen. Wir wissen also, dass das Objekt ein Schlüssel-Wert-Paar ist. Mit anderen Worten, das JavaScript-Objekt ist eine Sammlung benannter Werte. Sie wissen vielleicht alles darüber, aber ich möchte für Sie nur sichergehen, dass die Grundlagen der Javascript-Konzepte stimmen. Es tut mir leid, wenn Sie das wissen. Sehen Sie sich diese Lektion einfach zur Auffrischung an. Deshalb verwende ich hier const, weil ich diesem Objekt keinen anderen Wert zuweisen möchte Also const user entspricht in C-Klammern, wir definieren Daten in einem wir definieren Daten in Der erste ist also der Name von Halley. Das ist übrigens mein Lieblingsname. Und noch eine Immobilie, sagen wir, mailen und auf Halley 07 bei der roten Gmail.com setzen Können Sie mir sagen, wie wir auf diese Immobilie zugreifen können? Richtig, wir können den Benutzerpunktnamen oder die Benutzerpunkt-E-Mail verwenden. Also konsolen wir einfach den Punktnamen des Dot-Log-Benutzers. Speichern Sie das und sehen Sie hier, wie wir Harley ganz einfach bekommen. Lassen Sie mich Ihnen nun eine weitere Option für den Zugriff auf den Objektwert zeigen für den Zugriff auf den Objektwert An der Stelle dieses Punktnamens verwenden wir also eckige Klammern und in Doppelcodes übergeben wir unseren Eigenschaftsnamen. Siehst du, hier bekommen wir auch Autoization. Schauen wir uns das an, mailen, die Änderungen speichern und einen Blick darauf werfen. Sehen Sie hier, wir bekommen unsere E-Mail. Wir werden in einem Teil von React die Methode mit eckigen Klammern verwenden . Deshalb füge ich diese Lektion hinzu. 11. Objektdestrukturierung: Ein weiteres Javascript-Konzept, das in React häufig verwendet wurde, ist die Objektdestrukturierung Mal sehen, was es ist. Stellen Sie sich also vor, wir haben ein Objekt namens user wtorsUser details wie Name für SAM und E-Mail an SAM email@gmail.com und Land In diesem Code wollen wir den Wert der Eigenschaft dieses Objekts extrahieren Sagen wir Name, E-Mail oder Land. Dafür schreiben wir, dass const name dem benutzerspezifischen Punktnamen entspricht. Als Nächstes schreiben wir const email equals user dot email. Und zu guter Letzt schreiben wir, dass cons country gleich user Und danach drucken wir diese Werte einfach aus. Also Punktprotokoll, Name, E-Mail, Land auf der Konsole. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie hier, wir bekommen diese Werte. Das Problem mit diesem Code ist nun die Anzahl der Zeilen. Stellen Sie sich vor, wir haben fünf bis zehn Eigenschaften , dann müssen wir fünf bis zehn verschiedene Variablen deklarieren, und das ist nicht die beste Vorgehensweise. Um dieses Problem zu lösen, verwenden wir die Destrukturierung von Objekten. Ich kommentiere diesen vorherigen Code aus und schreibe hier, const. Jetzt müssen wir hier ulipacket verwenden , das unserem Objektnamen user entspricht Jetzt denkst du, was wir in diese Cali-Klammern schreiben müssen in diese Cali-Klammern schreiben müssen Wir müssen hier nur unsere Variablennamen schreiben , die wir aus diesem Objekt extrahieren wollen Wir schreiben Name, E-Mail, Land und das war's. Dieser einzeilige Code funktioniert genauso wie diese drei Codezeilen. Lassen Sie uns das überprüfen. Speichern Sie die Änderungen und sehen Sie, dass es genauso funktioniert wie zuvor. Sie können sehen, wie einfach es ist, Objekte zu destrukturieren. Jetzt fragen Sie sich vielleicht, müssen wir immer alle Eigenschaften im Calibacket hinzufügen und die Antwort lautet nein Wir müssen nur die Namen der Eigenschaften hinzufügen, die wir extrahieren möchten Wenn wir beispielsweise nur auf Name und E-Mail zugreifen möchten, können wir diese Ländervariable entfernen. Was ist nun, wenn wir den Namen dieser Namensvariablen in beispielsweise einen Benutzernamen ändern möchten ? Dafür müssen wir hier einen Doppelpunkt hinzufügen und danach fügen wir den Benutzernamen hinzu. Lassen Sie uns überprüfen, ob das funktioniert oder nicht. Ändern Sie Ihren Namen in einen Benutzernamen, speichern Sie die Änderungen und sehen Sie sich das an. Siehst du, es funktioniert. Das nannten wir Objektdestrukturierung. 12. Kartenmethode: In dieser Lektion werden wir uns nun die Kartenmethode für das Array ansehen. Dies ist eine der am häufigsten verwendeten Array-Methoden in React-Anwendungen. In React werden wir die Map-Methode verwenden , um die Datenliste anzuzeigen. Stellen Sie sich zum Beispiel vor, wir arbeiten an einem E-Commerce-Projekt. In diesem Projekt haben wir nun eine Reihe von Produkten , die wir ausstellen möchten. Hier verwenden wir die Kartenmethode , um jedes Produkt anzuzeigen. Mach dir keine Sorgen, sag das einfach und du wirst es verstehen. Wir erstellen hier neue Produkte. Das Array entspricht hier dem Hinzufügen von Produkt eins, Komma Produkt zwei und Komma Jetzt wollen wir jeden Artikel der Produktliste so anzeigen. Das können wir also mit der MP-Methode tun. Also schreiben wir hier Produkte Punkt MAP. In dieser Map-Methode müssen wir nun eine Callback-Funktion übergeben , die für jedes Element ausgeführt wird Lassen Sie uns hier also die Funktion definieren. Nun, wie können wir den Wert jedes Elements in dieser Funktion ermitteln? Wir erhalten jeden Elementwert indem wir den ersten Parameter in dieser Funktion verwenden. Sagen wir Artikel oder Produkt. Sie können einen beschreibenden Namen verwenden. Jetzt geben wir einfach in Doppelcodes zurück und listen das Element-Tag auf. Was wollen wir nun hier hinzufügen? Ja, dieses Produkt. Fügen Sie also Plus-Produkt Plus hinzu, und wir fügen Doppelcodes hinzu, einen Artikel auf der Abschlussliste. Denken Sie daran, dass diese Map-Methode ein neues Array zurückgibt. Das vorherige Array wird dadurch nicht geändert. Lassen Sie uns dieses neue Array also in einer Variablen namens Display-Elemente speichern . Und danach konsolen wir einfach die Punktlog-Anzeigeelemente. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, wir bekommen eine Reihe von Listeneinträgen. Denken Sie also immer daran, was auch immer wir von dieser Funktion zurückgeben, sie wird ein neues Array hinzufügen. Und diese Funktion läuft für jedes Objekt, so einfach ist das. Jetzt sieht dieser Code etwas lang aus, sodass wir die Pfeilfunktionssyntax verwenden, das Funktionsschlüsselwort entfernen und hier den Pfeil hinzufügen können . Jetzt können wir diesen Code sogar vereinfachen , weil in dieser Funktion nur eine Zeile geschrieben wird. Also entfernen wir das Geschriebene und wir können auch die Car-Klammern entfernen. Sehen Sie jetzt, dass unser Code leicht lesbar aussieht. Lassen Sie uns überprüfen, ob diese funktionieren oder nicht. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, es funktioniert genauso wie zuvor. Also hier, das sieht ein bisschen hässlich aus. Anstatt diese Doppelcodes zu verwenden, können wir Vorlagenliterale verwenden Das ist sehr einfach und nützlich. Wir entfernen diese ganze Aussage und fügen hier Backticks hinzu. Wir schreiben unseren ersten Listenpunkt und unseren abschließenden Listenpunkt In der Mitte der Tags müssen wir dieses einzelne Produkt hinzufügen also in Vorlagenliteralen Wenn wir also in Vorlagenliteralen Variablen hinzufügen wollen, müssen wir Dollar- und Cali-Klammern verwenden Und innerhalb dieser können wir auf dieses variable Produkt zugreifen. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wir erhalten wieder das gleiche Ergebnis. Es liegt also ganz bei Ihnen , welche Syntax Sie verwenden möchten. In der nächsten Lektion werden wir uns nun eine weitere Array-Methode ansehen, nämlich Filter. 13. Filtermethode: Sehen wir uns die Filtermethode an, die zum Filtern von Arrays verwendet wird. In einfachen Worten, der Filter wird verwendet, um Elemente aus einem vorhandenen Array zu entfernen , und es wird immer ein neues Array zurückgegeben. in unserem vorherigen E-Commerce-Beispiel vor, Stellen Sie sich in unserem vorherigen E-Commerce-Beispiel vor, wir müssten Suchfunktionen für Produktnamen hinzufügen . Mit dieser Filtermethode können wir ein vorhandenes Array nach unserer Wahl filtern. Lass mich dir zeigen, was ich meine. Ich entferne den vorherigen Code, aber zu Ihrer Information werde ich ihn in einem separaten Ordner hinzufügen, damit Sie ihn zur Überarbeitung abrufen können. Hier erstellen wir also ein neues Array namens ages equals in square packet, five, 23, 14, 30 und 21. Lassen Sie uns dieses Array einfach in der Konsole protokollieren. Nehmen wir nun an, wir wollen Kanten herausfiltern , die 18 plus sind. Wir schreiben einen Alters-Punktfilter. Darin übergeben wir nun die Funktion, genauso wie wir es bei der Map-Methode getan haben. Wir können die Funktion definieren oder auch die Syntax der Pfeilfunktionen verwenden. Wie können wir jedes Array-Element in dieser Funktion abrufen? Richtig, die Variable wird beim ersten Parameter umgangen. Wir fügen hier eine Variable namens Alter hinzu. In diesem Zeitalter erhalten wir jedes Element dieses Arrays. Zuerst kommen wir hier auf fünf, dann auf 23 und dann auf 14 und 30 und 21. In dieser Funktion müssen wir nun den Zustand zurückgeben. Nehmen wir an, Alter älter als 18 Jahre. Welches Element diese Bedingung erfüllt , wird zu einem neuen Array hinzugefügt. Also zuerst diese Filtermethode, überprüft die Bedingung auf f, wodurch diese Bedingung nicht erfüllt wird , sodass die Filtermethode nichts tut. Dann überprüft sie die Bedingung auf 23, was diese Bedingung erfüllt, also fügt sie ein neues Array hinzu. Danach 14, die nicht bestehen werden. Danach 30, was diese Bedingung erfüllt, also werden 30 und dann auch 21 hinzugefügt. Nun gibt diese Filtermethode immer ein neues Array zurück. Speichern wir das in einer Variablen namens Erwachsene Am Ende protokollieren wir diese Erwachsenen in der Konsole . Speichern Sie die Änderungen und sehen Sie hier, dass wir 23, 30 und 21 bekommen. Hier können wir auch diesen Return entfernen und die Klammern aufrufen. Siehst du, es sieht einfacher aus. Denken Sie nur daran , dass wir bei jedem Element , das diese Bedingung erfüllt, ein Innu-Array hinzufügen, so einfach ist das Nehmen wir nun an, wir wollen diese 30 aus diesem Array entfernen Hier haben wir festgestellt, dass das Alter nicht gleich 30 ist. Speichern Sie das und sehen Sie, ohne 30 bekommen wir alle Elemente So verwenden wir die Filtermethode zum Herausfiltern von Daten. 14. Spread-Operator: Ein weiteres nützliches Feature von modernem JavaScript ist der Spread-Operator. Hier erstellen wir also ein Array namens Array eins und fügen hier eins, zwei, drei und vier hinzu. Danach definieren wir ein weiteres Array namens Array zwei. Und wir fügen hier sieben, acht, neun und zehn hinzu. Wie können wir diese beiden Arrays zu einem einzigen Array kombinieren? Um dieses Array zu kombinieren, erstellen wir eine neue Konstante, die einer Zahl entspricht, die einem Punkt in der Matrix entspricht Hier verwenden wir die Concat-Methode , mit der zwei oder mehrere Arrays kombiniert werden Und innerhalb dieser Concat-Methode übergeben wir unser zweites Array, das Array zwei ist Mal sehen, was wir bekommen. Die Konsole protokolliert dieses Zahlenfeld. Speichern Sie die Änderungen und sehen Sie sich das an. Sehen Sie, wir kombinieren diese beiden Arrays erfolgreich. Lassen Sie mich Ihnen jetzt eine kleine Übung geben. Hier wollen wir fehlende Zahlen zwischen diesen beiden Arrays hinzufügen fehlende Zahlen zwischen diesen beiden Arrays Unsere Ausgabe sollte also in der Reihenfolge eins bis zehn so aussehen. Unterbrechen Sie diese Lektion und versuchen Sie, zwischen diesen Arrays fünf und sechs zu addieren zwischen diesen Arrays fünf und sechs Jetzt versuche ich auch, das mit einer anderen Methode zu lösen . Wenn Sie Ihre Methode haben, können Sie diese im Bereich Fragen und Antworten stellen Also erstellen wir ein neues Array mit fünf und sechs. Und bei der Concat-Methode fügen wir dieses Array vor Array zwei Und damit erhalten wir unser Ergebnis. Lassen Sie mich Ihnen nun zeigen, wie Sie das auf moderne Weise tun können. Also kommentieren wir diese Zeile aus und schreiben konstante Zahlen, die jetzt entsprechen. Hier erstellen wir ein Array, und darin müssen wir zuerst alle Werte aus Array eins abrufen Also schreiben wir Punkt, Punkt, Punkt, was als Spread-Operator bezeichnet wird, und fügen dann unseren Array-Namen hinzu, der Array eins ist Dieser Ausdruck gibt alle Werte dieses ersten Arrays zurück. Danach wollen wir Array zwei hinzufügen. Also schreiben wir wieder den Spreadoperator Array Two. Speichern Sie das und schauen Sie sich das an. Siehst du, hier bekommen wir beide Arrays kombiniert. Jetzt fragst du dich vielleicht, wir wollen fünf und sechs dazwischen addieren. Dafür müssen wir also kein neues Array erstellen, wie wir es zuvor getan haben. Wo wir also unsere Elemente hinzufügen wollen, können wir sie einfach an dieser Stelle schreiben. Wenn wir am Anfang oder Ende etwas hinzufügen wollen, können wir das auch einfach tun, die Gene speichern und nachschauen. Siehst du, hier haben wir fünf und sechs. Siehst du, mit Spread Operator brauchen wir uns um nichts zu kümmern. Schreiben Sie einfach Punkt, Punkt, Punkt, einen Array-Namen und wir erhalten alle Werte dieses Arrays. So einfach ist das. Wir können den Spread-Operator auch für Objekte verwenden. Also hier definieren wir das konstante Objekt eins. Und darin fügen wir Meth einen Namen hinzu. Und danach definieren wir eine weitere Konstante, Objekt zwei. Und darin fügen wir dem vielfältigen Lehren und Lernen auch das Hobby hinzu . Jetzt wollen wir diese beiden Objekte kombinieren. Also definieren wir Konstante, sagen wir, Benutzer ist gleich zwei Jetzt müssen wir Objekte verwenden , weil wir ein neues Objekt bekommen wollen, und was wir hier schreiben, write, spread operator, object one, com spread operator, object two Und danach schauen wir uns einfach das Punktprotokoll dieses Benutzerobjekts an. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier kombinieren wir zwei Objekte. Wie bei Array können wir diesem Objekt jetzt auch weitere Eigenschaften hinzufügen. Wir fügen hier, sagen wir, YouTube zu Code Plus hinzu. Speichern Sie das und sehen Sie, hier bekommen wir unser Eigentum. Sie können sehen, wie einfach es ist, Arrays und Objekte mit dem Spread-Operator zu kombinieren Arrays und Objekte mit dem Spread-Operator Aus diesem Grund ist der Spread-Operator sehr nützlich. 15. Ternär-Operatoren: In dieser Lektion werden wir also etwas über ternäre Operatoren oder bedingte Operatoren lernen über ternäre Operatoren oder bedingte Operatoren Anhand seines Namens können Sie erraten, wofür er verwendet werden wird. Richtig, es wird zum Hinzufügen von Bedingungen verwendet. In einfachen Worten, ternäre Operatoren sind die Abkürzung, um Is-Bedingung zu schreiben Hier ist also die Syntax eines ternären Operators. An erster Stelle haben wir unseren Zustand Danach haben wir ein Fragezeichen, was im Grunde bedeutet, ob und dann haben wir einen wahren Ausdruck, ausgeführt wird, wenn die Bedingung wahr ist. Und dann haben wir eine Spalte, die für se steht, und wenn die Bedingung falsch ist, dann wird dieser falsche Ausdruck ausgeführt. In einfachen Worten, wenn die Bedingung wahr ist, dann wird der erste Ausdruck ausgeführt, der zweite Ausdruck wird ausgeführt. Lassen Sie uns das praktisch sehen. Lassen Sie uns diesen Code entfernen und einfach eine Variable erstellen, uns diesen Code entfernen und einfach eine Variable erstellen wobei const Mx gleich 50 ist Danach wollen wir eine Bedingung hinzufügen. Wenn Max größer als 35 ist, dann wollen wir zurückkehren, bestehen, andernfalls kehren wir zurück, scheitern. Also schreiben wir unsere Bedingung an die erste Position, die maximal größer als 35 ist. Wir fügen ein Fragezeichen hinzu und halten die Zeichenfolge fest, die wir zurückgeben möchten. In Codes geben wir also ein, und danach fügen wir einen Doppelpunkt hinzu, und wir fügen hier eine Zeichenfolge in Codes hinzu, was fehlschlägt. Jetzt geben wir hier eine Zeichenfolge aus diesem Ausdruck zurück, also müssen wir sie in einer Variablen speichern . Sagen wir Ergebnis. Und am Ende protokollieren Sie dieses Ergebnis einfach in der Konsole. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier kriegen wir einen Pass, weil unser Maximum größer als 35 ist. Wenn wir nun unser Maximum auf 30 ändern, speichern wir das und sehen wir hier, dass wir scheitern. Sie können also sehen, wie einfach es ist, ternäre Operatoren zu verwenden , wenn wir einen einzeiligen Ausdruck haben Wenn wir denselben Code im ELs-Zustand schreiben müssen, dann müssen wir ihn auf diese Weise schreiben Also deklarieren wir zuerst die Ergebnisvariable. Dann fügen wir die ELS-Bedingung zum Füllen dieses Ergebnisses hinzu. Sehen Sie hier, wir verwenden let , weil wir diesen Variablenwert neu zuweisen wollen dem auch sei, Sie können sehen, wie ternäre Operatoren Codezeilen für das Hinzufügen der EFL-Bedingung reduzieren Das ist das Schöne an modernen JavaScript-Funktionen. Diese Pfeilfunktion Dinari-Operatoren sind kleine Dinge , die Ihre Geschwindigkeit beim Schreiben von Code erhöhen und die Codezeilen reduzieren Ein kluger Entwickler ist nicht derjenige, der mehr Zeilen schreibt. Ein intelligenter Entwickler ist, der Code in weniger Zeilen schreiben kann , der aber trotzdem besser funktioniert als falscher Code. 16. Module in JavaScript: Module sind eines der wichtigsten Konzepte des wichtigsten Konzepte des modernen JavaScripts, das in React verwendet wird, oder wir können sagen, dass React auf Modulen funktioniert. Fangen wir also mit dem an , was Modul ist. Modul ist eine Datei, die Code zur Ausführung einer bestimmten Aufgabe enthält. Es kann Variablen, Objekte, Funktionen usw. enthalten . unsere Anwendung wächst, müssen wir also Tausende Codezeilen schreiben. Aber anstatt alles in einer einzigen Datei abzulegen, können wir unseren Code nach ihrer Funktionalität in separate Dateien aufteilen , die wir als Module aufrufen können. Und durch die Verwendung dieser Module können wir unseren Code organisieren und sehr einfach verwalten. Lassen Sie uns das praktisch sehen. Lassen Sie uns also diesen vorherigen Code entfernen und einfach eine Funktion namens post für unsere Anwendung erstellen . Stellen Sie sich vorerst vor diese Funktion gibt den UI-Teil eines einzelnen Beitrags zurück. In dieser Funktion schreiben wir ein Punktprotokoll für die Konsole. Das ist Post. Danach erstellen wir eine weitere Funktion namens Feed zum Anzeigen mehrerer Beiträge in dieser Funktion Zuerst schreiben wir ein Punktprotokoll für die Konsole. Das ist Feed und danach rufen wir hier diese Post-Funktion auf. Wie wir uns vorstellen, gibt diese Post-Funktion die Post-Benutzeroberfläche zurück, und diese Feeled-Funktion gibt den Mehrfachbeitrag zurück Wir rufen diese Post-Funktion einfach mehrmals auf. Ich weiß, das ist ein bisschen verwirrend, aber mach dir darüber keine Sorgen. Am Ende dieser Lektion macht das alles Sinn. Mal sehen, was wir hier bekommen. Am Ende rufen wir diese Feed-Funktion auf, speichern die Änderungen und schauen uns das an. Siehst du, zuerst kommen wir hierher, das ist ein Feed, und danach haben wir mehrere Beiträge. Nun, das ist nur ein Teil unserer Anwendung. Wir haben mehr Funktionen oder wir können sagen, mehr Teile, dann wird die Verwaltung dieses Codes nicht einfach sein. Wir können diesen Code also in mehrere Teile unterteilen , die als Module bezeichnet werden, und dann können wir unseren Code einfach verwalten und diesen Code auch in verschiedenen Anwendungen wiederverwenden . Also schneiden wir diese Post-Funktion von hier aus und erstellen in unserem Quellordner eine neue Datei namens post dot jsx, auch als Post-Modul bezeichnet wird Und in diese Datei fügen wir einfach diese Post-Funktion Jetzt haben wir vielleicht die Frage, wie können wir diese Post-Funktion in unsere Haupt-JSX-Datei verwenden diese Post-Funktion in unsere Haupt-JSX-Datei Weil wir derzeit nur in der postjsx-Datei auf diese Post-Funktion zugreifen können nur in der postjsx-Datei auf diese Post-Funktion Zuallererst müssen wir diese Funktion öffentlich machen, damit wir in anderen Modulen auf diese Funktion zugreifen können Dafür fügen wir zu Beginn einfach die Exporttastatur hinzu. Beim Exportieren können wir jetzt in beliebigen Dateien auf diese Post-Funktion zugreifen. In der Haupt- oder JSX-Datei müssen wir diese Funktion also importieren Also schreiben wir oben Import-Cali-Klammern, und in diese CL-Klammern müssen wir unseren Funktionsnamen hinzufügen, den wir importieren möchten In unserem Fall heißt es ab jetzt post in Codes, wir müssen den Pfad der Module schreiben , aus denen wir importieren wollen Also schreiben wir Punkt oder Punkt und Schrägstrich. Das bezieht sich auf den aktuellen Ordner und siehe, hier bekommen wir die Vorschläge Beitrag auswählen und fertig. Beachten Sie, dass wir hier auch eine Post-Dot-GSX-Datei schreiben können , wenn wir Post Dot TXT oder eine andere Post-Datei mit anderen Erweiterungen haben Post Dot TXT oder eine andere Post-Datei mit , aber das ist selten Wir schreiben also nicht immer diese Punkt-GSX-Erweiterung. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, es funktioniert genauso wie zuvor. Wir haben erfolgreich unser erstes Modul erstellt. Lassen Sie mich Ihnen jetzt eine kleine lustige Herausforderung stellen. Hier erstellen wir ein Post-Modul. Sie müssen das Feed-Modul getrennt von dieser Haupt-Gx-Datei erstellen und diese Feed-Funktion in dieser Haupt-Punkt-JSX-Datei aufrufen Feed-Funktion in dieser Haupt-Punkt-JSX-Datei Ich weiß, dass du das kannst. Versuch es einfach ein bisschen. Unterbrechen Sie also diese Lektion und schauen Sie sich danach diese Lösung an. Ich hoffe, Sie lösen diese Übung. Machen Sie sich keine Sorgen, wenn Sie diese Übung nicht abschließen können. Jetzt kannst du lernen, dass wir alle hier sind, um zu lernen. Aber wichtig ist, du zumindest versuchst, das zu lösen. Also gib dir selbst Anerkennung dafür. Zuallererst, im Hauptpunkt Jx Five, haben wir diese Feed-Funktion mit der Import-Anweisung gestrichen, weil wir Post-Funktion nur innerhalb dieser Feed-Funktion verwenden Und wir erstellen eine neue Datei namens Feed Dot JSX, und in diese Datei fügen wir diese Feed-Funktion Um diese Funktion nun in anderen Dateien zugänglich zu machen , müssen wir sie exportieren Speichern Sie das, und in der JSX-Hauptdatei oben importieren wir Cali-Klammern und das, was wir darin übergeben Schreiben Sie den Namen der Funktion oder Variablen, auf die wir zugreifen möchten. Also fügen wir Feed aus Codes, Punkt und Schrägstrich hinzu und wählen Feed aus Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, es funktioniert genauso wie zuvor. Sie können also sehen, wie wir unseren Code in mehrere Dateien, sogenannte Module, aufteilen oder aufteilen . Und wenn Sie dieses Modulsystem lernen, können Sie React-Komponenten leicht verstehen. In der nächsten Lektion werden wir nun eine etwas andere Methode zum Exportieren und Importieren von Modulen sehen , die wir im nächsten Abschnitt häufig verwendet haben. 17. Als Standard exportieren: In der vorherigen Lektion definieren wir nun Module und exportieren sie, definieren wir nun Module und exportieren um sie für andere Module zugänglich zu machen. Stellen Sie sich nun vor, wir haben eine weitere Funktion in diesem Feed-Modul, die als eine andere Funktion bezeichnet wird. Und darin konsolen wir einfach eine weitere Funktion protokollieren. Um diese Funktion zu exportieren, fügen wir hier das Export-Schlüsselwort hinzu, speichern es und in der Jx-Hauptdatei können wir auch diese andere Funktion importieren Hier entfernen wir diesen Feed aus dem Import und drücken einfach Strg plus Leertaste in Windows oder Befehl plus Leertaste in Mac, um die Vorschlagsliste zu öffnen Jetzt können wir hier die Liste der exportierten Objekte oder Funktionen sehen . D nennen wir den Namen Export, was bedeutet, dass wir sie importieren können, indem wir den Namen der Variablen verwenden. Es gibt aber auch eine andere Art des Exports , nämlich den Export als Standard. Ich führe also eine Punkt-JSX-Datei ein und möchte, dass diese Feed-Funktion, die die Hauptfunktion dieses Feed-Moduls ist, diese standardmäßig exportiert Um den Export als Standard festzulegen, fügen wir einfach den Export als Standard an der Stelle des Exports So einfach ist das. Sie denken vielleicht, was ist der Unterschied zwischen diesem Export und dem Exportstandard. Der einzige Unterschied besteht in der Importanweisung. Lass mich dir zeigen, was ich meine. Speichern Sie diese Datei und in Jx-Hauptdatei an der Stelle der geschweiften Klammern, wir fügen den Feed direkt ein, und das war's Hier können wir dieser Funktion einen beliebigen Namen geben. Das ist der einzige Unterschied. Wenn wir nun auch eine andere Funktion aus dem Feed-Modul importieren möchten , können wir auch mit geschweiften Komma-Klammern importieren . Hier können wir alle unsere benannten Exporte aus dem Feed-Modul importieren Jetzt fragen Sie sich vielleicht, warum wir diesen Export-Standard lernen müssen Denn in React werden wir auch diesen Standardexport für den Export aller Komponenten sehen . Ich möchte nicht, dass Sie verwirren nach einer anderen Exportsyntax suchen In dieser Feeddot-GXS-Datei sieht dieser Export-Standard jetzt ein bisschen hässlich aus Wir können dies unten entfernen, wir fügen den Exportstandard hinzu und hier übergeben wir unseren Objekt- oder Variablennamen , den wir exportieren möchten, nämlich Feed Und wir können diesen Export auch entfernen und nach dem Standardexport schreiben wir Export und in Objekt übergeben wir unseren Funktions- oder Variablennamen, so einfach ist das. Zusammenfassend lässt sich sagen, dass unsere Importanweisung für den Standardexport so aussieht. Und für den benannten Export sieht unsere Import-Anweisung so aus. Wir müssen nur Cal-Klammern verwenden. Hier dreht sich alles um Module und Exporte. Herzlichen Glückwunsch. Jetzt bist du bereit, React Jazz zu lernen. Wenn Sie sich diesen Kurs ständig ansehen, machen Sie fünf bis zehn Minuten Pause von Ihrem Bildschirm und schnappen Sie sich etwas frische Luft . Wir sehen uns im nächsten Abschnitt. 18. Abschnitt 03 React-Grundkonzepte: Willkommen im Abschnitt React Basic. In diesem Abschnitt lernen Sie einige der grundlegenden Konzepte kennen, die in React sehr wichtig sind. Wir beginnen mit dem Erstellen von Komponenten, Verständnis von JAX und Web, dem Hinzufügen von Elementen, dem Hinzufügen von Javascript-Ausdrücken, Attributen und Ereignissen Danach folgt das wichtigste Konzept von React, nämlich der Status und auch einer der am häufigsten verwendeten Hooks Umgang mit Eingaben, Mapping-Liste und vielem mehr. Ich freue mich sehr über diesen Abschnitt und hoffe, Sie auch, denn mit diesen Konzepten werden wir im nächsten Abschnitt unsere erste Anwendung erstellen . Also lass uns das machen. 19. Neues Projekt einrichten: Lassen Sie uns zunächst eine brandneue Anwendung erstellen, die wir in unserem ersten Projekt verwenden werden. Öffnen Sie also die Befehlszeile oder das Terminal in Ihrem Ordner, in dem Sie diese Anwendung erstellen möchten. Und erinnerst du dich, wie man eine React-Anwendung erstellt? Schreiben Sie mit NPM, erstellen Sie Weiß spätestens in Rot? Schreiben Sie jetzt unseren Anwendungsnamen, der Task Track lautet, und drücken Sie die Eingabetaste Stellen Sie sicher, dass wir unseren Anwendungsnamen immer in Kleinbuchstaben und ohne Unterstrich schreiben unseren Anwendungsnamen immer in Kleinbuchstaben und ohne Unterstrich Andernfalls erhalten wir einen Fehler. Jetzt wählen wir hier die React-Anwendung und danach die JavaScript-Variante. Gut. Lassen Sie uns nun diese drei Befehle ausführen. Zuallererst müssen wir das Verzeichnis für CD wechseln und zweimal die Tabulatortaste drücken. Lassen Sie uns nun alle Pakete und Bibliotheken mit NPM Install installieren. Und es ist fertig Lassen Sie uns nun dieses neue Projekt im VS-Code öffnen. Also schreiben wir Code Space Period. Dadurch wird der VS-Code in diesem Verzeichnis geöffnet. Lassen Sie uns diese Eingabeaufforderung schließen. Das brauchen wir nicht. Großartig. Lassen Sie uns nun überprüfen, ob wir unsere Anwendung erfolgreich eingerichtet haben oder nicht. Öffnen Sie das Terminal mit Control plus Batak oder Command plus Bata und schreiben Sie einfach NPM run DV Siehst du, wir bekommen diese React-Vorlage, und das bedeutet, dass wir unsere Anwendung erfolgreich eingerichtet 20. Eigene Komponente erstellen: In dieser Lektion werden wir nun unsere erste React-Komponente erstellen. Um es kurz zusammenzufassen: Die Komponente ist ein wiederverwendbarer Code, der zur Definition eines bestimmten Teils der Benutzeroberfläche verwendet Hier im Quellordner erstellen wir einen neuen Ordner namens Components In diesem Ordner speichern wir alle Komponenten unserer Anwendung mit Ausnahme unserer Stammkomponente, sich um diese App-Komponente handelt. Jetzt erstellen wir in diesem Ordner eine neue Datei namens Card Dot JSX oder Js. Jetzt haben Sie vielleicht die Frage, was ist der Unterschied zwischen der JSX- und der JS-Erweiterung? Zuallererst können wir jede Erweiterung schreiben, da beide gleich funktionieren Im Allgemeinen verwenden wir jedoch JSX-Erweiterung, da wir, wenn unsere Anwendung wächst, möglicherweise JavaScript-Code schreiben müssen Zu diesem Zeitpunkt teilt Ihnen diese JSX-Erweiterung mit, welche Datei die hintere Komponente ist und welche Datei nur Vanilla-JavaScript-Code ist Wenn wir Dot JSX verwenden, kann uns unser Code-Editor außerdem einen besseren Service bieten , z. B. Syntaxvorschläge, Fehlerüberprüfung und andere Funktionen Wird verwendet, um JSX-Code zu schreiben. Einige Entwickler verwenden jedoch auch die Erweiterung dot js Wenn Sie mit mehreren Entwicklern an einem einzelnen Projekt arbeiten , müssen Sie dieselbe Erweiterung verwenden , die sie bereits verwenden Also hier verwenden wir Punkt JSX. Dies sind die kleinen Details , die viele erfahrene Entwickler nicht kennen, und Interviewer stellen gerne solche Fragen Sie können diesen Punkt also beachten. Und noch etwas, schreiben Sie den Komponentennamen immer mit Großbuchstaben. Andernfalls funktioniert es nicht im Browser. Ich werde dir in der kommenden Lektion den Grund nennen. In dieser Komponente oben müssen wir jetzt React aus dem React-Paket importieren. Danach müssen wir hier eine Funktion oder Klasse definieren, die JSX zurückgibt Das sind also zwei Arten von Reaktionskomponenten, Funktionskomponenten und Klassenkomponenten Klassenkomponenten sind derzeit etwas alt , da wir für die Implementierung von Klassenkomponenten einige der fortgeschrittenen Konzepte von JavaScript erlernen müssen . Außerdem ist eine Klassenkomponente wenig komplexer als eine funktionale Komponente. Als Facebook React zum ersten Mal entwickelte, gab es nur einen Komponententyp , nämlich Klassenkomponenten. Aber als sich React entwickelte, hatte es funktionale Komponenten , und das macht React sehr einfach und leicht. Derzeit wechseln fast alle Entwickler zu funktionalen Komponenten, und aus diesem Grund entscheide ich mich , einen Diskurs mit funktionalen Komponenten zu erstellen. Hier definieren wir eine Funktion mit dem gleichen Namen wie unsere Komponente, nämlich Karte. Und innerhalb dieser Funktion wir H einfach ein Tag mit Text zurück, sagen wir, Kartenkomponente. Beachten Sie, dass wir eine Funktion auch mithilfe der R-Funktionssyntax erstellen können , und das war's. Wir erstellen unsere erste Reaktionskomponente. Sie können sehen, wie einfach es ist , eine Reaktionskomponente zu erstellen. Wir müssen nur React aus der React-Bibliothek importieren und danach eine Funktion mit dem Komponentennamen und das Element zurückgeben , das wir anzeigen möchten. Lassen Sie uns nun überprüfen, ob diese funktionieren oder nicht. Wie wir wissen, müssen wir diese Komponente zur Haupt- oder JSX-Dateirendermethode hinzufügen diese Komponente zur Haupt- oder JSX-Dateirendermethode Dafür müssen wir diese Kartenfunktion aus dieser Kartenkomponente exportieren diese Kartenfunktion aus dieser Kartenkomponente Wir erinnern uns, wie wir die Funktion direkt aus dem Modul exportieren , indem wir das Schlüsselwort Export verwenden. Du machst das wirklich super. Also schreibe Export, und diese Kartenfunktion ist unsere Hauptmethode. Wir können also die Standardkarte exportieren und hier die Funktionsnamenkarte schreiben. Speichern Sie das, und jetzt müssen wir diese Kartenfunktion in die Hauptdatei Dot SX importieren . Also hier, nach dieser App-Eingabe, importieren wir die Karte von und in Codes müssen wir unseren Dateipfad übergeben. Also Perioden-Komponentenkarte. An der Stelle dieser App-Komponente übergeben wir einfach die Kartenkomponente. Speichern Sie diese Datei und schauen Sie sich das an. Siehst du, hier bekommen wir unser H-One-Tag mit Text. Es ist also wirklich, wirklich einfach, Komponenten in React zu erstellen. Wenn Sie ein wenig verwirrt sind, sich keine Sorgen mit etwas Übung, Sie werden React beherrschen. Als ich anfing, React zu lernen, war ich auch verwirrt, aber ich habe weiter gelernt und vor allem geübt. Jetzt habe ich hier einen kurzen Trick, um die Grundstruktur von Komponenten in nur 1 Sekunde zu erstellen . Stellen Sie sicher, dass Sie die ES Seven React Nippet-Erweiterung installieren die ES Seven React Nippet-Erweiterung Das ist dafür notwendig. Also entfernen wir diesen kompletten Code und schreiben hier einfach RAFCE, was für React Arrow Function Component mit Export und Drücken der Tabulatortaste steht React Arrow Function Component mit Export und Drücken der Tabulatortaste Siehst du, hier bekommen wir das Boilerplate für React-Komponenten. diese verwenden, müssen wir diese Importfunktion nicht manuell eingeben und Anweisungen nicht immer wieder exportieren Ich lobe die Kappe für den einzelnen Cursor und die Kartenkomponente genau hier. Nutzen Sie die Änderungen und schauen Sie sich das an. Siehst du, es funktioniert genauso. Jetzt fragst du dich vielleicht, warum zeige ich dir nicht gleich zu Beginn diesen Schnitt? Der Grund dafür ist, dass ich Ihnen die komplette Struktur der Erstellung von Komponenten erklären möchte . Wenn ich dir diesen Trick zuerst zeige, dann kannst du Komponenten nicht richtig verstehen. Und ich wette, Sie verstehen das Erstellen von Komponenten sehr gut. Lassen Sie mich Ihnen jetzt ein wenig Übung geben. Ich muss eine weitere Rea-Komponente namens create todo erstellen. Im Gegenzug einfache Tags, erstelle von hier aus ein neues Todo in H one Tag. Ich bin mir sicher, dass du diese Übung abschließen kannst. 21. Lösung dieser Übung: Bevor wir mit der nächsten Lektion beginnen, möchte ich Ihnen kurz die Lösung der vorherigen Übung zeigen . In diesem Komponentenordner erstellen wir also eine neue Datei namens createdo dot Und in diese Komponente schreiben wir RAA, CE und drücken Step, und unsere Drücken Sie nun Escape und an der Stelle dieser ID schreiben wir einen Tag und erstellen von hier aus ein neues Todo Speichert diese und in Main Dot JSX Pile importieren wir create to do, und wir können hier auch Vorschläge sehen Wählen Sie den Vorschlag aus, und dadurch wird unsere Komponente aus unserem Ordner importiert Jetzt übergeben wir einfach hier, erstellen, um zu erledigen. Speichern Sie die Änderungen und sehen Sie, hier bekommen wir unsere Create-to-do-Komponente. Wenn Sie diese Übung nicht abschließen können, Sie sich auch keine Sorgen. Sie können sich die vorherige Lektion erneut ansehen. Es ist okay. Es gibt überhaupt keinen Druck. 22. Wie JSX und Babel funktionieren: In der vorherigen Lektion haben wir nun unsere Komponente erstellt und wir haben auch Code geschrieben, der genauso aussieht wie HTML-Code Aber wie ich dir bereits gesagt habe, ist das kein HTML-Code. Es ist JSX, ein moderner Code zum gemeinsamen Schreiben von STML und JavaScript. Wir haben das im Abschnitt gesehen, aber das ist nur eine kleine Einführung Lassen Sie uns nun verstehen, wie es intern funktioniert. Wie Sie vielleicht wissen, kann unser Browser JSX-Code nicht verstehen, aber er kann Vanilla-JavaScript-Code verstehen Wir müssen unseren JSX-Code in Vanilla-JavaScript-Code konvertieren , damit unser Browser ihn verstehen kann Dafür benötigen wir einen Compiler namens Babble. Er wird unseren JSX-Code in einfachen JavaScript-Code umwandeln , den Browser verstehen und rendern können Lassen Sie mich Ihnen das praktisch zeigen. Öffnen Sie in unserem Browser einen neuen Tab und gehen Sie zu Bblejs dot IO Und gehe zu diesem Abschnitt zum Ausschreiben. Hier können wir also unseren modernen JavaScript-Code schreiben, und Babble wird diesen Code in JavaScript-Code umwandeln , den Browser verstehen können Hier schreiben wir also einfach, dass die Überschrift const gleich H einem Tag entspricht Und übergebe hier eine Zeichenfolge. Das ist JSX. Und sieh mal, hier bekommen wir diesen Code. Also JSX konvertiert in diese JSX-Funktion. erste Argument dieser Methode ist nun H one, was unser Elementtyp ist Und das zweite Argument ist das Objekt, dessen Eigenschaft Kinder genannt wird. Im Grunde genommen sind Kinder das, was wir in unserem Element weitergeben. Hier können wir auch das Klassenattribut übergeben, das der Hauptüberschrift entspricht, und hier sehen wir, dass wir die Klasseneigenschaft in diesem Objekt erhalten Für Entwickler ist es einfacher und leichter , Code mit JSX zu schreiben , als diesen Vanille-JavaScript-Code zu schreiben Kurz gesagt, wir verwenden immer JSX für unsere Komponenten, und Webble kompiliert unseren Code in diese Und das ist der Grund, warum wir die React-Bibliothek nicht zwingend oben importieren müssen React-Bibliothek nicht zwingend oben importieren Aber vor dem React 18-Update müssen wir React oben importieren. Jetzt denken Sie vielleicht, wie können wir die alte Methode von React Dot Create Element sehen ? Also hier, in dieser Option, haben wir die Reaktionslaufzeit. Standardmäßig ist sie auf automatisch eingestellt, was diese JSX-Funktion ist, und wir können sie auf klassisch ändern Und hier bekommen wir diese alte Methode, JSS-Code mithilfe der Methode read dot create element in JavaScript-Code umzuwandeln JSS-Code mithilfe der Methode read dot create element in JavaScript-Code mithilfe der Methode read dot create Wenn Sie mehr zu diesem Thema lesen möchten, können Sie diesen Artikel lesen Ich werde den offiziellen Dokumentationslink anhängen. So funktionieren JSX und Babel in der React-Anwendung. 23. Elemente in Komponenten hinzufügen: In dieser Lektion werden wir nun einige Elemente zu unserer Komponente hinzufügen. Nach diesem Überschriften-Tag möchten wir also eine Schaltfläche hinzufügen. Also fügen wir eine Schaltfläche hinzu, die bei der Aufgabe aufgerufen wird. Jetzt bekommen wir hier einen Fehler in unserem JSX-Ausdruck. Lassen Sie uns das hinter uns lassen und sehen, dass der JSX-Ausdruck ein übergeordnetes Element haben muss Jetzt denkst du vielleicht warum. In der vorherigen Lektion habe ich Ihnen gezeigt, dass der JSX-Ausdruck in die JSX-Laufzeitfunktion konvertiert wird in die JSX-Laufzeitfunktion konvertiert Außerdem haben wir die Methode Reatt Create Element gesehen. Bei dieser Methode mit beiden Methoden können wir hier nur ein Element angeben Wenn wir also mehrere Elemente in JSX schreiben, werden wir verwirrt sein, welches Element wir wählen sollen In JSX fügen wir also immer Elemente in einem übergeordneten Element hinzu. Also fügen wir hier Du hinzu und verschieben unseren Code zwischen diesen Würfeln. Speichern Sie die Änderungen und sehen Sie , wie unser Code besser strukturiert formatiert Deshalb lieben Entwickler Prettier so sehr und Prettier fügen Sie hier auch diese Klammer und das Semikolon hinzu Das liegt an der automatischen Semikolon-Einfügung in JavaScript. Wenn wir zum Beispiel nur return und sonst nichts in dieser Zeile haben , setzt JavaScript hier automatisch ein Semikolon setzt JavaScript hier automatisch ein Semikolon ein. Lass es mich dir zeigen. Wir verschieben unseren JSX in die nächste Zeile. Wenn wir nun diese Datei speichern, siehe Jam-Skript und hier Sami Colin, werden diese nächsten Zeilen aus diesem Grund niemals ausgeführt Deshalb hübschere Anzeige hier in Klammern, speichere die Änderungen Sehen Sie hier, wir bekommen Überschrift und Button. Schauen wir uns acht an, damit wir auch das Markup sehen können. Hier im Wurzel-Du bekommen wir unser Du und in diesem Duo haben wir unsere Elemente Manchmal wollen wir dieses unerwünschte Div nicht für jede Reaktionskomponente hinzufügen . Sehen wir uns eine andere Methode zum Hinzufügen mehrerer Elemente an. In React haben wir eine Methode namens Fragment. Dieses Fragment wird verwendet, um ein übergeordnetes Element in unserem JSX hinzuzufügen, aber es gibt keine UI-Komponente im Browser zurück Lass mich dir zeigen, was ich meine. Also schreiben wir an der Stelle dieses Du's ein React Dot Fragment. Falls du dich jetzt fragst, wie ich diese öffnenden und schließenden Texte zusammen ändere , dann liegt das daran, dass ich diese Autoem-Tag-Erweiterung verwende Sie können diese Erweiterung auch installieren oder Ihre Tippgeschwindigkeit erhöhen Und hier sind die aktuellen Installationserweiterungen, die ich verwendet habe, sodass Sie sie auch überprüfen können. Dieses Material-Icon-Theme ist für das Thema von Con. Das gefällt mir sehr. Nun zurück zu unserem Thema, füge das React-Fragment als übergeordnetes Element hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, bei der Inspektion haben wir hier nur unsere beiden Elemente ohne diesen ungewollten Fehler. Jetzt gibt es auch eine weitere Abkürzung und eine einfache Methode, um Reaktionsfragmente hinzuzufügen. Wir können dieses Reaktionspunktfragment einfach entfernen und fertig. Diese leeren Tags funktionieren genauso wie Reaktionsfragmente. Speichern Sie die Änderungen und sehen Sie, dass es genauso funktioniert. 24. JavaScript-Ausdruck in JSX: In der vorherigen Lektion hatten wir also mehrere SDML-Elemente in unserem Lassen Sie uns nun sehen, wie Sie einen Javascript-Ausdruck oder -Code zu JSX hinzufügen einen Javascript-Ausdruck oder -Code zu Anstatt diesen Text anzuzeigen, möchten wir die Gesamtzahl solcher Aufgaben anzeigen Diese Null ist fest codiert, aber wir möchten die tatsächliche Anzahl der Aufgaben dynamisch anzeigen . Nur zur Veranschaulichung vor unserer schriftlichen Aussage erstellen wir eine Variable namens Aufgabe, sagen wir, fünf Nun, wie können wir diese Aufgabenvariable an der Stelle dieser fest codierten Zahl anzeigen an der Stelle dieser fest codierten Zahl Und die Antwort ist sehr einfach. Entfernen Sie also diese Zahl und kleben Sie die Cully-Klammern fest. Und zwischen diesen eckigen Klammern können wir jeden gültigen JavaScript-Ausdruck hinzufügen Also fügen wir hier eine Aufgabenvariable hinzu, speichern die Änderungen und sehen hier, dass wir fünf bekommen Lassen Sie uns diese Aufgabe auf Null ändern, und wir können auch Text am Anfang oder nach diesen CI-Klammern hinzufügen . Speichern Sie das und sehen Sie, hier bekommen wir Aufgabe Null. Zwischen diesen eckigen Klammern können wir also jeden beliebigen Javascript-Ausdruck schreiben Dieser Ausdruck sollte einen Wert zurückgeben , der bei der Ablage angezeigt wird Wenn wir hier zum Beispiel nur true schreiben und das speichern, bekommen wir nichts. Also wenn wir nichts anzeigen wollen, warum schreiben wir dann hier diesen Ausdruck in JSX Deshalb sage ich Ihnen, Sie sollen einen Ausdruck hinzufügen , der einen Wert zurückgibt, oder wir können sogar eine Funktion aufrufen, die einen Wert zurückgeben kann Nach dieser Aufgabe erstellen wir also eine Funktion, Zählaufgabe, Fehlerfunktion genannt wird, und innerhalb dieser Funktion geben wir diese Aufgabenvariable zurück. Und an der Stelle dieser Aufgabe nennen wir Count-Task-Funktion. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir wieder Null. Lassen Sie uns nun diesen Kern als Übung ein wenig interessant machen. Wenn also in dieser Funktion diese Aufgabenvariable auf Null gesetzt ist, möchten wir eine Meldung anzeigen, keine Aufgabe verfügbar ist, andernfalls ist es die aktuelle Aufgabennummer. Das ist wirklich ziemlich einfach. Ich hoffe du schaffst das. Hinweise, wir können diesen Aufgabentext entfernen und vollständige Zeichenfolge aus dieser Funktion zurückgeben. sich also etwas Zeit für diese Übung, und danach können Sie sich die Lösung ansehen. Zuallererst fügen wir in dieser Funktion die Bedingung hinzu, wenn Aufgabe gleich Null ist, dann keine verfügbare Aufgabe zurück Und sonst geben wir eine Zeichenfolge mithilfe der Vorlagenzeichenfolge zurück. Wenn Sie das in der Vorlagenzeichenfolge nicht wissen, können wir mit einer Zeichenfolge auf eine Variable zugreifen. Sehen Sie sich das an, wir fügen Acti, Task, Doppelpunkt hinzu und als Access-Variable fügen wir geschweifte Dollarklammern und Lassen Sie uns nun diese Aufgabe aus Jx entfernen. Das brauchen wir nicht. Sag rein und sieh es dir an. Siehst du, hier bekommen wir keine Aufgabe zur Verfügung. Und wenn wir unsere Aufgabe auf zwei ändern und sehen, dass wir auch hier eine Aufgabe bekommen. Sie können sehen, wie einfach es ist. Ich weiß, dass Sie diese Übung abgeschlossen haben, oder zumindest versucht haben, sie zu lösen. Machen Sie sich das zu eigen. Lassen Sie mich Ihnen nun das Shortcut-Rig zeigen , mit dem Sie denselben Code schreiben können. Also kommentiere ich diesen Code aus und anstelle der Verwendung von Ils verwenden wir ternäre Operatoren, die wir im vorherigen Abschnitt gesehen haben Also schreibe return, und zuerst fügen wir Bedingung hinzu, Aufgabe ist gleich Null Fügen Sie nun ein Fragezeichen für wahr hinzu und kehren Sie hierher zurück, keine Aufgabe verfügbar. Danach steht Doppelpunkt für fällt, und hier gibt es Häkchen, Aufgabe, Doppelpunkt, Dollar, CI-Klammern, Aufgabe zurück . Speichern Sie das und sehen Sie, dass es genauso funktioniert wie zuvor. Wir können es testen, indem wir seinen Wert auf Null ändern. Und wir sehen, dass uns keine Aufgabe zur Verfügung steht. 25. Attribute in Elementen festlegen: Sehen wir uns nun an, wie wir diesen Elementen Attribute hinzufügen können . Es ist wirklich einfach. Wir können das genauso machen wie in SDML Zum Beispiel möchten wir hier eine Werteigenschaft für diese Schaltfläche hinzufügen hier eine Werteigenschaft für diese Schaltfläche Also fügen wir hier einfach den Wert hinzu, der einer Task-Schaltfläche entspricht. Lassen Sie uns diese Schaltfläche nun dynamisch deaktivieren. In unserer Funktion definieren wir also eine neue Variable namens Hide button, die dem Wert true entspricht Wenn diese Höhenschaltflächenvariable nun auf true gesetzt ist, deaktivieren wir unsere Task-Schaltfläche Also schreiben wir hier disable equals to now auf die Variable excess, fügen geschweifte Klammern hinzu und übergeben hier die Schaltfläche Hide. Speichern Sie das und sehen Sie, dass unser Button deaktiviert ist. Und wenn wir unsere Variable auf fällt setzen, dann ist unsere Schaltfläche nicht verfügbar. So verwenden wir einfache und dynamische Attribute innerhalb von Elementen. Lassen Sie mich Ihnen jetzt eine Frage stellen. Wie können wir Klassenattribute für Elemente übergeben? Sie könnten sagen, dass Klasse gleich zwei ist, und wir übergeben hier den Klassennamen, aber das wird uns warnen Lassen Sie uns diese speichern und die Konsole öffnen. Sehen Sie, hier erhalten wir diese Warnung, dass die DOM-Eigenschaftsklasse ungültig ist, und sie gibt uns auch einen Vorschlag Meinten Sie Klassenname? In JSX müssen wir das Klassennamenattribut verwenden , anstatt eine einfache Klasse zu verwenden. Aber warum? Wie ich Ihnen bereits gesagt habe, konvertiert dieser JSX-Ausdruck in ein einfaches Javascript-Objekt und in diesem Objekt, wenn wir das Klassenattribut verwenden , und in JavaScript Klassenschlüsselwort bereits reserviert Deshalb verwenden wir in React den Klassennamen an der Stelle des Klassenattributs Ein weiteres wichtiges und anderes Attribut sind Stile, denen früher ein Inline-Stil für ein Element angegeben wurde. In einfachem TML schreiben wir also so etwas Stil entspricht und in Doppelcodes schreiben wir unsere Stile, sagen wir, Farbe Speichern Sie das und C, wir erhalten hier den Fehler , der besagt, dass wir hier Werte verwenden müssen, keine Zeichenfolge In JSX müssen wir dieses Style-Attribut auf ein einfaches Ja-Skriptobjekt setzen dieses Style-Attribut auf ein einfaches Ja-Skriptobjekt , das Stile enthält Oben erstellen wir ein Objekt namens styles equals to Jetzt müssen wir alle CSS-Eigenschaften in Kamelschreibweise übergeben , was bedeutet, dass außer dem ersten Buchstaben jeder erste Buchstabe eines neuen Wortes groß ist Wenn Sie zum Beispiel eine Hintergrundfarbe hinzufügen möchten, schreiben wir den Hintergrund und ein neues Wort mit der Farbe C und übergeben den Wert an Rot Ich weiß, das ist ein bisschen verwirrend, aber mach dir zu 99% keine Sorgen, wir verwenden diese Inline-Styles nicht einmal. Lassen Sie uns nun dieses Style-Objekt in diesem Style-Attribut übergeben . Dafür fügen wir hier Cali-Klammern hinzu, weil wir JavaScript hinzufügen und hier das Styles-Objekt hinzufügen Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier haben wir diesen roten Hintergrund. Nun, einige Entwickler definieren dieses Objekt nicht separat. Sie fügen es direkt in die geschweiften Klammern ein. Lass es mich dir zeigen Also schneiden wir dieses Objekt von hier aus und fügen es in dieses Style-Objekt ein. Diese ersten beiden Calibackets dienen also Zugriff auf JavaScript und für den Stil müssen wir ein Objekt übergeben, ein weiteres Calibacket, das diese Inline-Styles sehr verwirrend und schwer zu verwalten macht diese Inline-Styles sehr verwirrend und Und deshalb verwenden wir in JSX normalerweise keine Inline-Styles. Lassen Sie uns also diese Inline-Styles entfernen und auch diese Style-Variablen entfernen 26. Ereignisse in React: Lassen Sie uns nun darüber sprechen, wie wir Ereignisse in React definieren oder behandeln können . Umgang mit Ereignissen in React ist also dem Umgang mit Ereignissen in STML sehr ähnlich Lassen Sie uns zunächst unsere Komponente reinigen, also entfernen wir diese Konstante, akzeptieren diese Aufgabe und entfernen auch diese Funktion und entfernen dieses H-One-Element Und dazwischen übergeben wir die Aufgabe Calibracets und entfernen auch diese Deaktivierungseigenschaft Perfekt. Nun, wie ich Liu gesagt habe, reagieren alle Elemente als Ereignisse, die auf SGML-Ereignissen basieren Hier wollen wir zum Beispiel ein Klickereignis zu dieser Schaltfläche auf der Task-Schaltfläche hinzufügen Klickereignis zu dieser Schaltfläche auf der Task-Schaltfläche Also hier haben wir einen Klick, wir haben auch einen Doppelklick. Fügen Sie hier beim Klicken ein Ereignis hinzu, das gleich und in C-Klammern ist. Kannst du mir jetzt sagen, warum wir hier CI-Klammern hinzufügen? Das liegt daran, dass wir hier einen JavaScript-Ausdruck hinzufügen müssen. In diesem Fall fügen wir eine Funktion hinzu, die bei einem Klick auf diese Schaltfläche ausgeführt wird. In React haben wir jetzt eine beliebte Namenskonvention für den Umgang mit Ereignissen. Wir erstellen den Namen aller Ereignismethoden, beginnend mit dem Handle. Wenn wir uns nur den Funktions- oder Methodennamen ansehen, können wir sagen, dass dies für die Behandlung dieses Ereignisses bestimmt ist. Also hier erstellen wir den Funktionsaufruf handleClick. Wenn wir mit Doppelklick arbeiten, dann lautet dieser Name Handle Double Ein Hinweis, dass wir die meiste Zeit die CamelCase-Notation verwenden. Also handhaben wir die Klickpfeilfunktion, und innerhalb dieser Funktion konsolen wir einfach das Punktprotokoll bei der Jetzt müssen wir diese Funktionsreferenz in diesem On-Click-Event übergeben . Also genau hier, tippe auf Klick. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf diese Schaltfläche und sehen Sie, dass wir eine Aufgabennachricht erhalten. Sie nun sicher, dass wir diese Funktion nicht aufrufen , denn wenn wir diese Funktion hier aufrufen, wird sie nur ausgeführt, wenn diese Komponenten im Browser gerendert werden. In dieser Funktion wollen wir nun eine Reihe von Aufgaben inkrementieren Dafür müssen wir diese Konstante zunächst auf t setzen, müssen wir diese Konstante zunächst auf t setzen weil wir ihren Wert neu zuweisen wollen Und in unserer Funktion schreiben wir hier einfach Task Plus Plus. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf die Schaltfläche „Aufgabe“ und Sie können sehen, dass die Anzahl der Aufgaben auf der Seite nicht aktualisiert wird, aber wir erhalten dies in der Aufgabennachricht. Das bedeutet, dass die Funktion einwandfrei funktioniert. Lassen Sie uns also überprüfen, ob dieser Aufgabenwert steigt oder nicht. Nach dieser Nachricht fügen wir also ein Komma und eine Aufgabenvariable hinzu Speichern Sie das und drücken Sie diese Seite erneut. Sie auf die Schaltfläche klicken, können Sie sehen, dass die Werte steigen, aber das spiegelt sich nicht auf der Webseite Das ist das Thema der nächsten Lektion. Nein. 27. Was ist Staat: In der vorherigen Lektion haben wir also gesehen, dass unser Aufgabenwert steigt, aber er wird nicht auf Dom aktualisiert. Wenn wir also eine Änderung in unserem DOM anzeigen möchten, können wir definieren, dass die Variable, das Objekt oder das Array die normale JavaScript-Variable ist. Um also die Änderung auf Dom anzuzeigen, haben wir state in react. Dieser Status ermöglicht es uns, die sich ändernden Daten in unserer Anwendung zu verwalten und anzuzeigen. Wenn wir also unsere Variable als normale Javascript-Variable definieren , React diese Änderungen nicht wider , wenn wir diesen Variablenwert ändern. Wenn wir unsere Variable jedoch als Status definieren, React diese Änderungen wider , wenn wir diesen Variablenwert ändern. In einfachen Worten, Status wird verwendet, um React mitzuteilen, was diese Variable ist, und wenn sie sich ändert, spiegelt sich diese Änderung im Dom wider. Wie wir wissen, hat React ein virtuelles Dom. Wenn wir den Status einer Komponente ändern, reagieren wir auf diese neue Komponente und vergleichen diese neue Komponente mit der alten Komponente und spiegeln diese Änderungen dann nur im realen Dom wider. So einfach ist das. State ist ein sehr wichtiges Konzept von React, und viele Anfängerentwickler haben Probleme mit diesem Konzept, aber keine Sorge, Ihre Zweifel werden sich klären, wenn Sie das in der Praxis sehen. Jetzt fragst du dich vielleicht, wie wir eine Variable als Zustand definieren können? Also, um eine Variable als Zustand in einer funktionalen Komponente zu definieren, wie benutzt man einen Hook. Aber bevor wir Hook verwenden, wollen wir verstehen, was Hook ist. 28. Einführung von React-Hooks: Was sind also Hooks? Hooks sind Funktionen zur Verwendung einiger React-Funktionen in Funktionskomponenten. Mit anderen Worten, wir können sagen, dass Hooks Funktionen sind , mit denen funktionale Komponenten wie Klassenkomponenten funktionieren. Ich weiß, das klingt ein bisschen kompliziert, ist es aber nicht. Lass uns das anhand dieser Geschichte verstehen. Bevor React Hooks gestartet hat, gab es nur eine Möglichkeit, Status- und Lebenszyklusmethoden mithilfe der Klassenkomponenten zu verwenden Status- und Lebenszyklusmethoden . Entwickler hatten einige Probleme mit Klassenkomponenten, zum Beispiel sind Klassen etwas schwierig, besonders für diejenigen, die gerade erst angefangen haben zu reagieren. verwirrend mit diesem Schlüsselwort, und wir müssen bei der Erstellung einer neuen Komponente immer wieder alle Boilerplate schreiben bei der Erstellung einer neuen Komponente immer wieder React benötigt also einige Zeit, um spezielle Funktionen zu entwickeln. Wir können eine funktionale Komponente verwenden und diese speziellen Funktionen werden als Hooks bezeichnet. Ich denke, jetzt verstehen Sie, was React-Hooks sind, also Funktionen, mit denen funktionale Komponenten wie Klassenkomponenten funktionieren. Und heutzutage sind Hooks ein sehr wichtiges Konzept von React, das jeder React-Entwickler lernen muss. In der nächsten Lektion werden wir nun den ersten Hook sehen, der verwendet wird, um eine Variable als Zustand zu definieren. 29. useState-Hook: Definieren wir diese Aufgabe nun als Zustandsvariable. Um den Status zu definieren, haben wir einen Hook namens use state, und dies ist einer der wichtigsten und am häufigsten verwendeten Hook in React. Um also einen beliebigen Hook zu verwenden, müssen wir zuerst diesen Hook aus der React-Bibliothek importieren. Ein All-Hooks-Name beginnt mit dem Präfix use. Alle Funktionen, die mit use beginnen, sind React-Hooks. Oben, nach dieser Reaktion, fügen wir ein Komma hinzu und in Ci-Klammern importieren wir den Verwendungsstatus In unserer Funktionskomponente nennen wir das jetzt Used Hook Darin müssen wir den Standardwert der Variablen übergeben, der Null ist , weil wir die Aufgabe auf Null setzen wollen. Diese Funktion gibt nun ein Array zurück. Speichern wir das in einer Variablen namens count array. Danach schauen wir uns einfach das Punktprotokoll dieses Zählarrays an , um zu sehen, was sich in diesem Array befindet. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, dieses Array hat zwei Elemente. Das erste Element ist unser ursprünglicher Wert , der Null ist, und das zweite Element ist eine Funktion. Lass es mich dir zeigen. Zuallererst speichern wir das erste Element, Count-Array-Index Null, in der Variablen count. Und jetzt lassen Sie uns diese Tate-Variable auf der Webseite anzeigen. Also hier entferne ich diese normale Variable nicht , weil ich Ihnen den Unterschied zeigen möchte. Also duplizieren wir diese Zeile, indem wir in Windows Sift plus Alter plus Abwärtspfeil und unter Mac Saft plus Opson plus Abwärtspfeil Dies sind kleine Trigger , die Ihre Gesamtgeschwindigkeit erhöhen werden An der Stelle dieser Aufgabenvariablen fügen wir nun die Anzahl hinzu Speichern Sie das und sehen Sie, dass beide gleich aussehen. Lassen Sie uns nun sehen, wie wir diesen Zählstatuswert aktualisieren können. den Statuswert zu aktualisieren, haben wir also die Funktion als zweites Element in diesem Verwendungsstatus. Also zurück zum VS-Code, und wir speichern diese Anzahl in einem zweiten Element, in einer Variablen namens set count. Dies ist die übliche Namenskonvention für Staaten. Also Wert des Zustands, wir haben einen normalen Variablennamen und eine normale Funktion genannt , die den Wert dieser Variablen festlegen kann, wir hatten ein Präfix für diesen Funktionsnamen gesetzt. Zum Beispiel zählen, zählen, zählen , laden, laden, laden usw. Welchen Wert wir auch immer in dieser Set-Count-Funktion übergeben, es ist der Wert dieser Zählvariablen Lass mich dir zeigen, was ich meine. Also hier wollen wir diese Anzahl um eins erhöhen , wenn wir auf diese Schaltfläche bei Aufgabe klicken. Also schreiben wir Set Count und darin wollen wir den aktuellen Wert , also Anzahl plus eins. Wenn wir also auf diese Schaltfläche klicken, wird zuerst der aktuelle Wert von count abgerufen und dann eins hinzugefügt, und diese Funktion für die Einstellung der Anzahl setzt diesen Wert , der Null plus Eins für diese Zählung ist, ganz einfach. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf diese Schaltfläche und sehen Sie, dass der Zählstatus um eins steigt, aber die Aufgabenvariablen sind immer noch dieselben, und auch die Aufgaben bleiben immer bei eins. Warum? Denn wenn sich der Status unserer Komponente ändert, ganze Komponenten gerendert oder wir können sagen, sie werden erneut ausgeführt. Und das ist der Grund, warum die Aufgabe immer bei einem bleibt. Mach dir keine Sorgen. Wir werden das Rendern im nächsten Abschnitt im Detail verstehen. Eine andere Sache, wenn wir die Seite aktualisieren, beginnt diese Zählung wieder mit Null , weil wir hier den Standardwert auf Null setzen. Wenn wir hier fünf überschreiten, dann kommen wir beim Aktualisieren hier auf fünf. Lassen Sie uns nun diese Task-Variable und auch dieses Actuan-Tag entfernen Hier sieht unser Code ein bisschen hässlich aus, weil wir sehen können, dass wir für die Erstellung einer Zustandsvariablen drei Codezeilen schreiben müssen Stellen Sie sich vor, wir haben drei bis vier Zustandsvariablen, dann sieht unser Code chaotisch aus. Lassen Sie uns diesen Code mithilfe der Array-Destrukturierung kürzer machen. Lass es mich dir zeigen. Ich kommentiere diese drei Zeilen aus und wir schreiben hier use state, und innerhalb dieser Zeilen übergeben wir den Standardwert auf Null. Speichern wir das in Variable und an der Stelle des Variablennamens fügen wir eckige Klammern hinzu und schreiben darin zuerst den ersten Variablennamen, nämlich count, und dann den Funktionsnamen , der set count ist. Diese einzelne Zeile funktioniert genauso wie diese drei Zeilen, und das macht unseren Code sauber und leicht zu pflegen. Lassen Sie uns das mit dem TT-Hook noch einmal zusammenfassen. Used tt wird verwendet, um Zustandsvariablen in einer Funktionskomponente zu erstellen Zustandsvariablen in einer Funktionskomponente Um den verwendeten Hook zu verwenden, müssen wir ihn zuerst importieren und in der Funktionskomponente verwenden. Hier können wir jede Art von Daten wie Boolean, Zahl, Text, Objekt, Array usw. übergeben und sie dann mithilfe der Array-Destrukturierung speichern Die erste Variable ist ihr aktueller Wert und die zweite Variable ist die Funktion zur Aktualisierung dieses Werts. So einfach ist das. Ich weiß, dass einige Leute hier etwas verwirrt sind. Ich war auch verwirrt, als ich erfuhr, dass ich ihn zum ersten Mal benutzt habe. Aber mit etwas Übung habe ich dieses Konzept gelernt und es in meinen Projekten verwendet. 30. Benutzereingaben bearbeiten: In unserer Anwendung müssen wir jetzt oft Benutzereingaben berücksichtigen. Benutzer beispielsweise das Formular Long eingibt oder der Benutzer etwas in die Suchleiste schreibt, müssen wir diesen Eingabewert in unserer Komponente abrufen. Lassen Sie uns also eine Eingabe mit dem Typ Text erstellen. Wenn wir nun etwas in dieses Eingabefeld schreiben, möchten wir diesen Wert anzeigen. Dafür halten wir uns an das Ereignis onchange, das jedes Mal ausgeführt wird, wenn sich etwas in diesem Eingabefeld ändert So wie wir es in Vanda Javascript tun. Bei diesem Änderungsereignis hatten wir also eine Funktion namens Handle Change Lassen Sie uns nun diese Funktion definieren. Also const, handle change entspricht, hier verwenden wir die Pfeilfunktion In diesem Fall wollen wir den aktuell eingegebenen Wert im Punktprotokoll einsehen Dazu müssen wir hier ein Ereignisobjekt übergeben, und dieses Ereignisobjekt enthält verschiedene Informationen über dieses Eingabefeld Schreiben Sie also das CLG-Pcsle-Punktprotokoll und fügen Sie hier den Zielpunktwert für das Ereignis Dieser Ausdruck gibt den aktuellen Wert dieses Eingabefeldes zurück den aktuellen Wert dieses Eingabefeldes Speichern Sie die Änderungen und schauen Sie sich das an, schreiben Sie etwas und sehen hier bekommen wir diese Werte, also funktioniert es. Jetzt wollen wir diesen aktuellen Text auf unserer Webseite anzeigen. Kannst du dir vorstellen, was ich dir noch einen kleinen Hinweis geben werde. Dieser aktuelle Wert ändert sich, und wir müssen diese Änderungen anzeigen. Können wir normale Variablen verwenden? Nein, was werden wir dann verwenden? Richtig, wir verwenden use state. Bevor wir us state verwenden, entfernen wir diese drei Codezeilen . Das wollen wir nicht. Außerdem entfernen wir diese Aufgabe plus und das Punktprotokoll der Konsole aus der HandleClick-Funktion Jetzt ist hier noch eine Sache. Wir definieren unseren Use-State-Hook immer oben in unserer Funktionskomponente, sodass wir diesen Status in der gesamten Funktion verwenden können. Also nennen wir hier use state und übergeben darin unseren Standardwert. Und für die Eingabe wollen wir es auf eine leere Zeichenfolge setzen. Lassen Sie uns das nun in einer Variablen speichern , und wir verwenden hier Array-Restrukturierung, Eingabe und Set-Eingabe. In dieser Handle-Change-Funktion an der Stelle dieses Punktprotokolls der Konsole schreiben wir nun an der Stelle dieses Punktprotokolls der Konsole Set Input Function, Simple as Set. Lassen Sie uns nun am Ende die aktuelle Eingabe anzeigen. Fügen Sie also ein weiteres H-One-Tag und eine Eingabe zur Eingabe von Ci Brackets hinzu. Speichern Sie die Änderungen und schauen Sie sich das an, schreiben Sie hier etwas und sehen Sie sofort, dass wir den aktuellen Wert erhalten. So erhalten wir also den Wert der Eingaben in React. Hier habe ich einen kleinen Bonus für Sie, und das ist die Abkürzung, um diese Use-State-Zeile zu schreiben. Also schreibe einfach use state. Wenn Sie das nicht verstehen, dann installieren Sie die ES 7-Erweiterung , von der ich Ihnen zu Beginn dieses Kurses gesagt habe, dass Sie sie installieren sollen. Wählen Sie das aus und sehen Sie hier, dass wir eine Vorlage für den Nutzungsstatus erhalten. Hier erhalten wir mehrere Cursor, wodurch beide Namen geändert werden. Schreiben Sie also die Eingabe und drücken Sie die Tabulatortaste. Dadurch wird automatisch eine Set-Eingabe in Camel-Case geschrieben und hier der Standardwert, eine leere Zeichenfolge übergeben und die Escape-Taste gedrückt, und unsere neue Zustandsvariable ist fertig Das ist das Schöne an der Erweiterung. Ich hoffe, dir gefällt dieser Trick. In der nächsten Lektion werden wir sehen, wie man eine Liste anzeigt und darauf reagiert. 31. Mapping-Listen: Lassen Sie uns nun sehen, wie wir die Liste der Arrays in React anzeigen können die Liste der Arrays in React anzeigen Zum Beispiel erstellen wir hier ein Array namens Task, und im Moment fügen wir hier einfach Task eins, Task zwei und Task drei Jetzt müssen wir hier jede Aufgabe auf unserer Webseite so anzeigen . Wir fügen eine ungeordnete Liste hinzu, und darin fügen wir drei Listenelemente Das müssen wir mit der Map-Methode machen. Also hier müssen wir Kalibrackets hinzufügen, weil wir hier JavaScript-Ausdrücke hinzufügen werden Also Aufgabenpunkt MAP und darin wir jede Aufgabenpfeilfunktion, und jetzt geben wir hier einfach JSX zurück, was ein Listenelement ist Lassen Sie mich Ihnen erklären, was hier passiert. Wenn wir also die Kartenmethode in dieser einzelnen Aufgabe verwenden, erhalten wir zuerst diese erste Aufgabe. Also müssen wir diese Aufgabenzeichenfolge hier zwischen diesem JSX-Element anzeigen hier zwischen diesem JSX-Element Also wieder verwenden wir Cul-Klammern für den Zugriff auf Javascript-Ausdrücke in JSX, und wir übergeben hier diese Aufgabe. So einfach ist das. Nun fügen wir hier unsere Unterliste hinzu, und innerhalb dieser werden wir unsere Listenelemente verschieben. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie hier, wir bekommen diese Liste mit allen Artikeln. Wenn Sie Zweifel an der Map-Methode haben, können Sie sich die Lektion zur MP-Methode erneut im JavaScript-Refresher ansehen Lektion zur MP-Methode erneut im JavaScript-Refresher Nun, hier ist ein kleines Problem. In unserer Konsole erhalten wir diesen Fehler. Jedes Kind in einer Liste sollte eine eindeutige Schlüsselressource haben. Der Grund, warum wir diese Fehler erhalten , ist, dass wir jedes Element dieser Liste eindeutig identifizieren müssen jedes Element dieser Liste denn wenn sich etwas an einem dieser Listenelemente im virtuellen Dom muss React schnell identifizieren, welches Element sich geändert hat , und entsprechend muss React das echte DOM aktualisieren Also zurück zum VS-Code, und denken Sie immer daran, wenn wir die MP-Methode in React verwenden, müssen wir einen eindeutigen Schlüssel für das zurückgegebene Element übergeben. Also schreiben wir hier den Schlüssel, und hier müssen wir einen eindeutigen dynamischen Wert übergeben, nämlich diese Aufgabenzeichenfolge. Also übergeben wir diese Aufgabe einfach. Hier verwenden wir diese Aufgabenzeichenfolge, aber in der realen Anwendung haben wir jedes Aufgabenobjekt mit einer eindeutigen ID, und zu diesem Zeitpunkt übergeben wir die Aufgabenpunkt-ID. Mach dir darüber keine Sorgen. Das werden wir auch in den kommenden Abschnitten sehen. Beachten Sie auch, dass dieser Schlüssel in dieser aktuellen Liste nur eindeutig sein muss. Das heißt nicht, dass Sie diese Liste in dieser Anwendung nicht erneut anzeigen können, okay? Speichern Sie die Änderungen und aktualisieren Sie die Seite und sehen Sie, dass der Fehler behoben ist. So ordnen wir die Liste in React zu. Also herzlichen Glückwunsch. Sie haben die grundlegenden Konzepte von React erfolgreich ausgeführt. Mit diesen Konzepten werden wir nun unser erstes Projekt erstellen. Ich freue mich sehr darüber und hoffe, dass Sie es auch sind. Wir sehen uns also im nächsten Abschnitt. 32. Abschnitt 04 Erstes Projekt in React erstellen: Willkommen im vierten Abschnitt des ultimativen React-Kurses. In diesem Abschnitt werden wir unser erstes React-Anwendungsdesign erstellen, unser erstes React-Anwendungsdesign in dem wir sehen, wie der Entwickler denkt, bevor er mit der Entwicklung der Anwendung beginnt , und wie wir entscheiden , welche Komponenten in unserem Projekt erstellt werden sollen. In diesem Abschnitt werden wir unserem Projekt keine Funktionen hinzufügen. Wir werden uns nur auf die Erstellung von Komponenten und UIP konzentrieren. Ich freue mich sehr über dieses Projekt und hoffe, Sie auch, denn diese Art von Projekt ist ein großartiger Ausgangspunkt für alle React-Anfänger Lassen Sie uns also in dieses Projekt eintauchen. 33. Projektübersicht und Planung: Lassen Sie mich Ihnen zunächst einen kurzen Überblick über dieses Projekt geben , das als Task Track bezeichnet wird. Es ist ein netter Name, oder? Das grundlegende Ziel dieser Anwendung ist das Minus von Aufgaben. So sieht unsere Anwendung also aus, wenn wir keine Aufgabe haben. Um danach eine Aufgabe hinzuzufügen, schreiben wir die Aufgabe in dieses Eingabefeld. Dann wählen wir alle gewünschten Tags und können sie auch abwählen dann mithilfe dieses Dropdownmenüs die Aufgabenkategorie für erledigt oder erledigt aus Und dann fügen wir eine Aufgabe hinzu. Und sobald wir auf die Schaltfläche „Aufgabe“ klicken, ohne die Seite zu aktualisieren, wird unsere Aufgabe hier angezeigt. Wir können sogar mehrere Aufgaben hinzufügen, und wenn wir sie nicht benötigen, können wir diese einzelne Aufgabe entfernen. Das ist also ein ziemlich gutes und nettes Projekt, das Sie auch zu Ihrem Lebenslauf oder Portfolio hinzufügen können. Bevor wir mit der Erstellung eines Projekts beginnen, plane ich persönlich gerne den Prozess der Projekterstellung. Und mit einem Plan können wir viel Zeit und Mühe sparen. Das ist das Geheimnis, warum ich Projekte schnell und ohne Schreiben erstelle , Code verwende. Es ist völlig in Ordnung, wenn Sie diesem Prozess nicht folgen möchten, oder Sie können Ihren eigenen Prozess erstellen. Lassen Sie mich Ihnen sagen, wie ich über die Erstellung des AT-Projekts denke. Zuallererst werden wir den SDML- und CSS-Teil der Anwendung erstellen , was bedeutet, wie unsere Anwendung ohne jegliche Funktionalität aussieht Nachdem unser Design fertig ist, gehen wir zum Funktionsteil über. Wenn wir also auf Ettask klicken, Wenn wir also auf Ettask klicken wird die Aufgabe den Abschnitten hinzugefügt oder die Aufgabe gelöscht usw. Hier können wir auch einige Komponenten definieren. Hier haben wir zum Beispiel dieses technische Design, das für viele Orte gleich ist, und das ist die eine Komponente. Danach haben wir die Einzelkartenkomponente. Das Skelett aller Karten ist gleich. Wir müssen nur die Details ändern, und das ist unsere weitere Komponente. Danach haben wir das gleiche Design für diese drei Abschnitte. Gleiche gilt, wir müssen nur die darin enthaltenen Daten ändern, aber das Skelett ist dasselbe, was eine weitere Komponente ist. So können wir also die Komponenten für das Rag-Projekt erraten . Aber mach dir darüber keine Sorgen. Wir können es auch herausfinden, während wir das Design unseres Projekts erstellen. Sie müssen nur ein Design finden und wir können es als Komponente erstellen. kann Komponenten anhand des Designs erkennen , weil ich in so vielen React-Projekten übe, und mit etwas Übung werden Sie das auch tun. Sie sich über diese Dinge also keine Gedanken fangen wir an, unser erstes Projekt zu erstellen. 34. Das Website-Layout erstellen: Zunächst erstellen wir also das Grundlayout, oder wir können sagen, das Grundgerüst unserer Anwendung. Unsere Webseite ist also in zwei Abschnitte unterteilt, den Header und den Hauptbereich. Und im Hauptbereich haben wir drei Unterbereiche Lassen Sie uns also dieses Layout erstellen. Also zurück zum VS-Code, und zunächst werden wir das gesamte vordefinierte CSS, alle Elemente, zurücksetzen , da wir wissen, dass der Browser einigen Elementen bereits einen gewissen Rand und eine Auffüllung hinzugefügt hat eine Auffüllung hinzugefügt müssen wir entfernen. In der CSS-Datei mit Indexpunkten entfernen wir alle vordefinierten Stile und fügen zuerst einen Stern für alle darin enthaltenen Elemente hinzu. Wir setzen den Rand auf Null und den Abstand auf Null Und die Größe der Box entspricht der Rahmenbox. Dies sind alles CSS-Konzepte , von denen ich glaube, dass Sie sie bereits kennen. Speichern Sie diese Datei und danach in der App Dot JSX-Datei , unserer Stammkomponente, entfernen wir in der App Dot JSX-Datei , unserer Stammkomponente, den gesamten Code und schreiben RAFC zum Hinzufügen des Boilerplate-Codes In der App Dot JSX-Datei fügen wir unsere Anwendungskomponenten hinzu, da dies der Haupteinstiegspunkt für die Anwendungskomponentenhierarchie ist der Haupteinstiegspunkt für die Anwendungskomponentenhierarchie ist. Zuallererst fügen wir in dieser DU ein Header-Tag für unsere Header-Auswahl Und gib ihm den Klassennamen App Underscore-Header. Denken Sie daran, dass wir den Klassennamen am Ort des Unterrichts verwenden Klassennamen am Ort des Unterrichts A, hier verwende ich snaCCSE zum Schreiben aller CSS-Klassen. Du kannst benutzen, was du willst. Danach fügen wir ein Haupt-Tag für unseren Hauptbereich hinzu und übergeben Klassennamen an die App Underscore Main In diesem Hauptbereich möchten wir nun drei Abschnitte hinzufügen Also schreiben wir einen Abschnitt und fügen eine Aufgabenspalte mit Klassennamen hinzu, und wir duplizieren diese Punktzahl noch zweimal. In diesem Würfel fügen wir hier den Klassennamen zur App hinzu und das war's. Jetzt fügen wir CSS für dieses Layout hinzu. Oben importieren wir Codes, Perioden für den aktuellen Ordner und App-Punkt-CSS. Dies ist ein Schritt, den fast alle Anfänger oder sogar erfahrene Entwickler vergessen haben hinzuzufügen. Bevor wir CSS zu Komponenten hinzufügen, stellen Sie bitte sicher, dass wir diese CSS-Datei oben in der Komponente eingeben , da sonst unser CSS nicht gilt. Speichern Sie diese Datei und öffnen wir nun die App-Dot-CSS-Datei. Und lassen Sie uns all diese Kacheln entfernen. Das brauchen wir nicht. Und ganz oben, wir bei App, und darin müssen wir es einfach in Abschnitte unterteilen. Dafür verwenden wir cred so write display to grade und bewerten die Template-Zeilen, weil wir Zeilen mit 150 Pixeln für den Kopfbereich und Auto für den Hauptbereich definieren wollen 150 Pixeln für den Kopfbereich und Auto für den Hauptbereich Speichern Sie diese Datei und lassen Sie uns sehen, was wir bekommen. Oh, tut mir leid, wir haben vergessen, unsere App-Komponente als Root-Komponente hinzuzufügen . Also schreiben wir in die Haupt-JSX-Datei an der Stelle, an der diese Erstellung gemacht wurde, die App und entfernen auch diese beiden Importe Wir brauchen es nicht mehr. Speichern Sie die Inges und hier bekommen wir nur den Header, weil wir unserem Haupt-Tag nichts hinzugefügt Also zurück zum VS-Code. Und im Abschnitt mit der Aufgabenspalte hatten wir Abschnitt eins. Danach Abschnitt zwei. Und Abschnitt drei. Speichern Sie die Änderungen und sehen Sie, hier bekommen wir diese drei Abschnitte im Hauptbereich. Jetzt wollen wir diesen Aufgabenbereich nacheinander in der Spalte anzeigen . Dafür werden wir also Flachs verwenden. In der App-Dot-CSS-Datei unterstreichen wir in der App main innerhalb dieser Dateien, wir schreiben ein Display-Flag für ApplyFlexBX und auch für das Setzen dieses Abschnitts und auch für Danach setzen wir „Inhalt ausrichten“ auf „Leerzeichen gleichmäßig“ , um diese Leerzeichen gleichmäßig“ , um Außerdem fügen wir 20 Pixel für oben und unten und 8% für rechts und links etwas Abstand hinzu für oben und unten und 8% für rechts und links Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier haben wir unseren Abschnitt in der Mitte. Lassen Sie uns das mit Inspect überprüfen. Klicken Sie also mit der rechten Maustaste auf diesen Abschnitt und gehen Sie zur Inspektion. Sehen Sie hier, unser Abschnitt befindet sich in der Mitte. Jetzt wollen wir diesen Abschnitt groß genug machen , damit sie den Raum abdecken. Also fügen wir eine neue Klassenaufgabenspalte und definieren die Breite auf 333 3%. Lassen Sie uns vorerst der Tomate eine Hintergrundfarbe hinzufügen. Und zum Schluss fügen wir 20 Pixeln einen gewissen Rand hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie hier, unser Abschnitt behandelt die Breite. In der nächsten Lektion werden wir nun unser Header-Formular erstellen. 35. Aufgabenformularkomponente erstellen: Wie wir wissen, arbeitet React nach einem komponentenbasierten Ansatz. Und hier, in unserer Anwendung, haben wir keine Komponenten erstellt. Beginnen wir also mit unserer ersten Komponente für unser AT-Aufgabenformular. Lassen Sie uns vorher diese beiden Komponenten entfernen . Wir brauchen sie nicht. Und wir erstellen eine neue Komponente namens taskfm JSX. Gut. Nun sag mir, was wir zuerst in der Komponente machen. Richtig. Mit RAFC hatten wir Boilerplate Öffnen Sie jetzt die JSX-Datei der App. Sie dieses Header-Tag ein und fügen Sie es in unsere Aufgabenformularkomponente Jetzt wollen wir an der Stelle dieses Kopfzeilentextes zuerst ein Formular hinzufügen. Und in diesem Formular fügen wir zuerst eine Eingabe mit dem Typ Text und geben ihr einen Klassennamen für die Aufgabenunterstricheingabe sowie einen Platzhalter für die Eingabe Ihrer Danach müssen wir das DV-Tag mit dem Klassennamen zur Aufgabe hinzufügen : Unterstrichformular, Unterstrich unten, Unterstrichzeile Unterstrichzeile Danach müssen wir ein paar Tag-Buttons hinzufügen. Also fügen wir eine Schaltfläche mit einem Klassennamen-Tag hinzu. Und darin übergeben wir HTML. Lassen Sie uns diese Zeile nun noch dreimal duplizieren und diesen Text in CSS ändern. Danach, Ja-Skript. Und reagiere. Bei diesem Design- und CSS-Teil werde ich etwas schneller Bei diesem Design- und CSS-Teil , da dies unser einfaches STML und CSS ist Ich denke, Sie kennen diese Stile bereits. Ich kann dir alle Stile geben, aber das ist nicht fair, denn wenn du in React arbeitest, musst du auch STML und CSS schreiben Danach mussten wir die Eingabe für das Dropdown auswählen und den Klassennamen zum Unterstrichstatus der Aufgabe hinzufügen Und in diesen fügen wir ein Options-Tag mit dem Wert todo hinzu und zeigen Tags für todo an Zweiter Optionswert für doing und übergeben hier auch doing. Und der dritte Optionswert ist erledigt, und hier auch erledigt. Und zum Schluss fügen wir eine Schaltfläche mit dem Typ Submate Klassenname zum Unterstrich der Aufgabe hinzu und wir schreiben hier plus bei Aufgabe. Speichern Sie diese Datei Und jetzt lassen Sie uns diese Komponente in der App-Komponente anzeigen. Also ein App-Punkt-JSX-Datei, und wir fügen hier einfach spitze Klammern, Aufgabenformular und C VS-Code hinzu, der automatisch diese Komponente vorschlägt Wählen Sie dies aus und drücken Sie die Eingabetaste oder Tabulatortaste. Unsere Komponente wird oben automatisch importiert Stellen Sie nun sicher, dass wir dieses Komponenten-Tag schließen. Andernfalls erhalten wir einen Kompilierungsfehler. Wir können hier ein selbstschließendes Element verwenden. Gut, speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unser Formular. In der nächsten Lektion fügen wir nun Stile für diese Formularkomponente hinzu. 36. Stile für Formularkomponenten hinzufügen: Lassen Sie uns also Stile für diese Formularkomponente hinzufügen. also Stile hinzuzufügen, erstellen wir hier eine neue Datei namens taskform dot css Jetzt fragen Sie sich vielleicht, warum wir für diese Komponente eine separate Datei erstellen müssen für diese Komponente eine separate Datei erstellen Können wir die Stile in der App Dot CSS-Datei hinzufügen? Und die Antwort lautet ja. Wir können Stile zur App-Dot-CSS-Datei hinzufügen, und das tun einige Entwickler, aber das ist kein richtiger Ansatz, weil wir derzeit nur eine Komponente haben, aber stellen Sie sich vor, wir haben fünf bis zehn Komponenten und fügen alle unsere Stile in derselben Datei hinzu, die jeweiligen Stile zu ändern, müssen wir das CSS in dieser einzelnen Datei finden, und das wird schwierig und auch stressig. Deshalb definieren wir jeden Komponentenstil in einer separaten CSS-Datei. Lassen Sie uns also zunächst Codes, Perioden, Taskfm, Punkt, CSS importieren Perioden, Taskfm, Punkt, CSS Speichern Sie diese und gehen wir zu den Stilen in dieser Datei. Zuallererst wollen wir das ganze Formular in die Mitte verschieben. Wir fügen den Unterstrich-Header der App hinzu und darin setzen wir zuerst zwei Flaggen anzeigen und die Elemente zentriert ausrichten, wodurch unser Formular vertikal zentriert wird und der Inhalt ebenfalls mittig ausgerichtet wird, wodurch unser Formular horizontal zentriert Schließlich fügen wir einem Pixel den Wasserboden hinzu . Der Festkörper hat DC DC DC Speichern Sie das und schauen Sie sich das an. C, unser Formular ist in der Mitte. Lassen Sie uns nun Stile für dieses Eingabefeld hinzufügen. Punktaufgabe unterstreicht also Eingabe. Und in Gully-Klammern, Schriftgröße auf 20 Pixel, Schriftstärke auf 500, Hintergrundfarbe hat F 9f9f9, Farbe auf Schwarzwasser auf ein Pixel, Vollton und Farbe auf DF E drei, ein Pixel, Vollton und Farbe auf DF E Danach der Wasserradius auf fünf Pixel, Polsterung auf acht Pixel und 12 Pixel, der untere Rand auf 15 Pixel und die Breite auf 100% die Polsterung auf acht Pixel und 12 Pixel, der untere Rand auf 15 Pixel und die Breite auf 100%. Speichern Sie das und sehen Sie, wie die Eingabe fertig ist. Jetzt wollen wir dieses Formular groß machen. Hier fügen wir also den Punkt-App-Unterstrich, die Kopfzeile, die spitze Klammer und das Zielformular hinzu, und darin legen wir die Breite auf, sagen wir, 40% Speichern Sie das und sehen Sie, dass unsere Formularbreite jetzt gut ist. Lassen Sie uns nun die Stile für die Tags festlegen. Aber vorher müssen wir diese Tags mit diesem Drop-down-Menü trennen und die Task-Schaltfläche hinzufügen. In der Aufgabenformularkomponente umschließen wir also alle diese Tags mit DV-Tag und einen anderen Teil mit einem anderen Div Speichern Sie diese Datei, und in der CSS-Datei taskfm fügen wir die untere Zeile von Task Form Und innerhalb der Cul-Klammern wir nur DF und C hinzu, schlägt Display-Flags Das sind kleine Tricks , die ich durch die Erfahrung bei der Erstellung vieler Anwendungen gelernt habe die Erfahrung bei der Erstellung vieler Anwendungen Danach fügen wir die Elemente an der Mitte ausrichten und den Inhalt am Abstand dazwischen ausrichten. Ich habe das gesehen und unsere Tags gesehen, und diese beiden sind getrennt. Lassen Sie uns nun den Stil für die Tags festlegen. Also schreiben wir Tag und in eckigen Klammern fügen wir zuerst die Schriftgröße zu 14 Pixeln hinzu, Schriftstärke zu 500, Hintergrundfarbe, zwei hat F neun, F neun, F neun, Rand, ein Pixel, einfarbig hat DFE drei, E sechs, Randradius zu fünf Pixeln, danach fügen wir zwei Pixel für oben unten und zehn Pixel für links rechts, Rand rechts zu zehn Pixeln und Cursor zum Zeiger Speichern Sie die Gene und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Textstile. Lassen Sie uns nun CSS für das Dropdown festlegen. Also machen wir die Aufgabe, den Status zu unterstreichen. Darin addieren wir die Schriftgröße auf 16 Pixel, die Schriftstärke auf 500 auf ein Pixel, Solid hat einen Radius von 999 Bader auf fünf Danach die Breite auf 120 Pixel, die Höhe auf 40 Pixel und die Polsterung auf Null und fünf Speichern Sie dies und sehen Sie, dass ein Drop-down-Menü ebenfalls fertig ist. Jetzt der letzte Stil für diesen Absenden-Button. Also zurück zum VS-Code und schreiben Sie den Punkt Task Underscore Submit. Und innerhalb dieser Vergangenheit eine Größe auf 16 Pixel, eine Gewichtung auf 500, Hintergrundfarbe, zwei hat 64 57f9 Farbe bis Weiß, also F, Wasserradius bis fünf Pixel, Höhe bis 40 Danach werden bei einem Abstand von drei Pixeln Pixel, der linke Rand bis zehn Pixel, der Rand ohne Pixel und der Cursor bis zum Zeiger beibehalten linke Rand bis zehn Pixel, der Rand ohne Pixel und der Cursor bis zum Das sind sehr einfache Stile. Ich möchte Ihre kostbare Zeit nicht damit verschwenden diese Stile zu erklären. Wenn es einige wichtige Stile gibt, werde ich Ihnen das sicherlich erklären. Speichert die Änderungen und nehmt einen Blick hier zoomen wir ein bisschen und sehen jetzt sieht unser Formular ganz nett aus. Nur eine Sache. Ich möchte diese Platzhalterfarbe ändern, weil sie etwas dunkel aussieht Also zurück zu Aced. Und nach diesem Eingabestil fügen wir Punkt, Aufgabe Unterstrich, Eingabe, Doppelpunkt und Platzhalter Und innerhalb der eckigen Klammern fügen wir Farbe zu Speichern Sie die Chinges und schauen Sie sich das an. Siehst du jetzt, es sieht gut aus. 37. Tag-Komponente erstellen: In der vorherigen Lektion haben wir also unsere Formularkomponente erstellt, und in dieser Komponente können wir sehen, dass wir dieses Button-Tag haben, das wir mehrfach verwenden. Und wenn wir eine Aufgabenkarte erstellen, verwenden wir auch diese Tag-Schaltfläche. Es ist also besser, ein einzelnes Tag in einer anderen Komponente zu speichern . Kopieren wir also dieses einzelne Button-Tag. Und in diesem Komponentenordner erstellen wir eine neue Komponente namens tag dot Jx write RAFC for Jetzt drücken wir hier einfach auf den Knopf. wir nun eine neue Komponente für dieses Tag erstellen, erstellen wir auch eine separate Datei für das zugehörige CSS Wir erstellen eine weitere Datei namens tag dot css, und wie wir wissen, müssen wir sie vor dem Schreiben von CSS in diese Komponente importieren. Importieren Sie das Punkt-CSS für das Perioden-Tag. Speichern Sie diese Datei. Gut. Öffnen Sie jetzt die taskfmt CSS-Datei Und wir schneiden diesen Textstil von hier aus, speichern ihn und fügen ihn in unsere Tag-Dot-CSS-Datei Speichern Sie das. Fügen wir nun diese Tag-Komponente Task-Komponente an der Stelle der Tag-Schaltflächen hinzu. Also schreiben wir eine spitze Klammer, markieren und wählen den automatischen Vorschlag aus. Die Tag-Komponente wird automatisch eingegeben. Jetzt können wir all diese Schaltflächen entfernen und diese technische Komponente noch dreimal duplizieren. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir diese Schaltfläche mit vier STML-Tags. Jetzt fragst du dich vielleicht, wie können wir den Button-Text ändern? Und das ist das Thema der nächsten Lektion. 38. Requisiten in React: Lassen Sie uns nun sehen, wie wir den Namen dieser Tag-Schaltfläche ändern können den Namen dieser Tag-Schaltfläche ändern Dafür haben wir das Konzept der Requisiten in React. Also zuallererst, was sind Requisiten? Props steht für Eigenschaften, und Requisiten sind Argumente, die an Reaktionskomponenten übergeben In einfachen Worten, Requisiten werden verwendet um Variablen in Reaktionskomponenten zu übergeben Lassen Sie uns das praktisch sehen. Lassen Sie uns nun zunächst alle Dateien schließen, indem rechten Maustaste auf den Dateinamen klicken und Alle schließen auswählen. Lassen Sie uns nun unsere Aufgabenformularkomponente öffnen. Wenn Sie sich fragen, wie ich diese Dateien öffne, drücken Sie einfach Strg+P oder Befehl+P und hier den Namen der Datei, die wir öffnen möchten, und drücken Sie die Eingabetaste. Siehst du, ohne die Maus zu benutzen, können wir die Dateien öffnen, und das sind kleine Produktivitäts-Hacks , die Entwickler verwenden Hier wollen wir nun einen anderen Tag-Namen für diese Tag-Komponente übergeben anderen Tag-Namen für diese Tag-Komponente wir also hier Attribute in SDML-Elementen hinzufügen, können wir hier auch Attribute in der Komponente hinzufügen Also übergeben wir name gleich, und hier wollen wir den Tag-Namen übergeben Also fügen wir Codes hinzu, und in diesen fügen wir SDML hinzu. Hier möchte ich eines klarstellen. Wir können diesem Attribut einen beliebigen Namen geben. Es liegt ganz bei uns. Zum Beispiel können wir hier den Tag-Namen oder etwas anderes übergeben. Und wenn wir diesen Attributnamen verwenden, greifen wir auf diesen Wert in dieser Komponente zu. Ich weiß, das ist etwas verwirrend, aber mach dir keine Sorgen, wenn du dir diese komplette Lektion ansiehst, werden dir alle Zweifel klar. Lassen Sie uns zunächst diese anderen drei Tags auskommentieren, sie auswählen und Strg plus Schrägstrich oder Befehl plus Schrägstrich drücken plus Schrägstrich oder Befehl plus Schrägstrich Hier übergeben wir unser Attribut. Lassen Sie uns nun sehen, wie wir auf diesen Attributwert in unserer Komponente zugreifen können . Speichern Sie diese Datei und öffnen Sie die Tag Dot JSX-Datei. Um auf den Wert props zuzugreifen, können wir hier einfach props als Parameter für diese Komponentenfunktion übergeben als Parameter für diese Diese Requisite ist ein Objekt, das alle Werte des Attributs enthält, das wir in der Tech-Komponente festgelegt haben Also konsolen wir einfach Punktlog-Requisiten und fügen hier Requisiten hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Öffnen Sie die Konsole und sehen Sie, hier erhalten wir dieses Objekt, das die Eigenschaft Tagname und seinen Wert hat. Lassen Sie uns nun diesen Wert für unsere Tag-Schaltfläche drucken. Also hier an der Stelle dieses HTML-Codes fügen wir geschweifte Klammern hinzu, fügen wir geschweifte Klammern weil wir einen JavaScript-Ausdruck schreiben, und darin schreiben wir Props Dot Tag Name Rette Banden und sieh mal, hier bekommen wir SGML Jetzt fügen wir drei weitere Tags hinzu. Also zurück zu unserer Komponente und wir entfernen Kommentare aus den Tags, indem plus Schrägstrich oder Befehl plus Schrägstrich Und hier übergeben wir den Tag-Namen an CSS. Danach speichern Sie den Tagnamen an JavaScript und zuletzt den Tagnamen an Ra, um die Änderungen zu speichern und einen Blick darauf zu werfen. Siehst du, hier bekommen wir diese Tags mit unterschiedlichen Tagnamen, und so übergeben wir Attribute für Komponenten. Lassen Sie uns kurz alles über Requisiten zusammenfassen. Props ist eine Möglichkeit, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu In unserem Fall ist das Aufgabenformular unsere übergeordnete Komponente und das Tag, das sich in dieser übergeordneten Komponente befindet Wir nennen es eine untergeordnete Komponente und wir möchten Daten von der Taskfm-Komponente an die Tag-Komponente übergeben Taskfm-Komponente an die Tag-Komponente Wir übergeben einfach das Attribut des Tag-Namens und hier übergeben wir den Zeichenkettenwert Wir können aber auch Arrays, Objekte oder sogar Funktionen in den Requisiten übergeben , Objekte oder sogar Funktionen in den Requisiten Danach fügen wir, um auf den Wert dieser Requisiten zuzugreifen, den Parameter props in dieser Komponentenfunktion hinzu und wir übertragen unsere Daten in diese untergeordnete Komponente, 39. Aufgabenlistenkomponente erstellen: Lassen Sie uns nun jede Spalte der Ausgabeliste erstellen. Hier können wir in unserem Design sehen, dass diese drei Spalten zueinander stehen. Wir müssen nur den Titel der Spalte und Imoge ändern. Aber die Struktur all dieser Spalten ist dieselbe. Wir können eine Komponente für die Spalte erstellen und diese Komponente dann wiederverwenden. Darüber müssen wir nachdenken, wenn wir an React arbeiten weil React auf der Komponentenstruktur basiert. Lassen Sie uns eine neue Komponente namens Task Column Dot JSX erstellen. Darin fügen wir Boilerplate hinzu und in der JSX-Datei der App schneiden wir einfach diesen Aufgabenspaltenabschnitt aus und fügen ihn in unsere Aufgabenspaltenkomponente und fügen ihn in unsere Zuallererst möchten wir in dieser Spalte einen Titel hinzufügen Also erstellen wir Muss-Tags und wir schreiben, um zu tun. Nun, wie wir wissen, haben wir hier ein Bild. Öffnen Sie also den Ressourcenordner, und darin haben wir den Ordner Assets. Ziehen Sie jetzt einfach alle Bilder aus diesem Ordner und legen Sie sie in unseren Projekt-Assets-Ordner ab. Lassen Sie uns nun sehen, wie wir ein Bild in React hinzufügen können , da es sich ein wenig von dem unterscheidet, was wir in SDML tun Also fügen wir diesem ST-Tag ein Image-Tag hinzu, und hier können wir keinen relativen Bildpfad hinzufügen . Es wird nicht funktionieren. also ein Bild hinzuzufügen, egal ob es sich um JPG, PNG oder sogar SVG handelt, müssen wir zuerst das Bild oben importieren. Wie wir wissen, verwendet React Bundler wie Webpag, um den gesamten Code und die Assets zu bündeln , die in der Anwendung verwendet werden Und wenn wir eine Bilddatei in unsere Komponente eingeben, weiß der Bundler, dass er das Bild in das Bundle aufnehmen muss Deshalb müssen wir das Bild importieren. Also schreiben wir oben: Importiere Todo von hier aus, wir gehen einen Ordner oben und importieren direkt Dshit Dot PNG In dieser Bildquelle fügen wir nun Calibracets hinzu und fügen unser Todo Jetzt fragst du dich vielleicht, was in diesem Studio ist? Das ist also nichts anderes als nur ein Pfad unseres Bildes, der nach Bündeln sortiert wurde. Lass es mich dir zeigen. Bevor wir zurückkehren, konsultieren wir einfach das Dot Log This Studio, speichern die Änderungen und schauen uns das an Oh, es sieht massenhaft aus. Lassen Sie uns also zunächst diese Requisiten-Konsole entfernen. Öffnen Sie die Tag Dot JSX-Datei und entfernen Sie diese Konsolen-Punktprotokollzeile Speichern Sie die Änderungen und wir erhalten nichts , da wir unsere Aufgabenspaltenkomponente zu unserer App-Komponente hinzufügen müssen unsere Aufgabenspaltenkomponente zu unserer App-Komponente Zurück zum VS-Code und in unserer App-Komponente fügen wir die Aufgabenspaltenkomponente hinzu und sehen, dass Import funktioniert. Speichern Sie die Änderungen und schauen Sie sich hier den Pfad unseres Bildes an. Wir können auch direkt eine URL zur Quelle hinzufügen, aber so fügen wir lokale Bilder in React hinzu. Lassen Sie uns nun Stil für dieses Bild und diesen Titel hinzufügen. In diesem Image-Tag fügen wir dem Aufgabenspaltensymbol den Klassennamen hinzu. Außerdem fügen wir für diese Überschrift den Klassennamen zur Überschrift der Aufgabenspalte hinzu. Speichern Sie diese Datei und lassen Sie uns eine separate Datei für unsere Aufgabenspaltenstile namens taskcolumn dot CSS erstellen unsere Aufgabenspaltenstile namens taskcolumn dot CSS Der Grund, warum wir ihr immer den gleichen Namen geben wie unserem Komponentennamen, weil wir nur anhand des Dateinamens wissen können, dass diese Datei CSS dieser Aufgabenspaltenkomponente enthält CSS dieser Aufgabenspaltenkomponente wir also zunächst die Importieren wir also zunächst die CSS-Datei mit den Punkten für die Aufgabenspalte oben in unserer Komponente. Speichern Sie das. Und jetzt fügen wir etwas CSS hinzu. Zuallererst wollen wir unser Bild klein machen. Also schreiben wir ein Aufgabenspaltensymbol. Und darin schreiben wir Breite auf 30 Pixel, Rand schreiben wir auf fünf Pixel. Diese und unsere Ikone sehen perfekt aus. Dieser Text und dieses Symbol sind jedoch nicht vertikal zentriert. Lassen Sie uns auch diesen Tomatenhintergrund entfernen. Bei der Spaltenüberschrift der Aufgabe fügen wir innerhalb dieser Cully-Klammern innerhalb dieser Cully-Klammern zwei Flaggen ein und richten die Elemente mittig Speichern Sie das und lassen Sie uns den Tomatenhintergrund aus der App-Dot-CSS-Datei entfernen Tomatenhintergrund aus der App-Dot-CSS-Datei Öffnen Sie also diese Datei und entfernen Sie diese Hintergrundeigenschaft. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie jetzt, unser Titel sieht gut aus. Lassen Sie uns nun diese beiden Abschnitte durch unsere Aufgabenspaltenkomponente ersetzen . Gehen Sie also zur App Dot GSX-Datei und wir entfernen diese beiden Abschnitte Und fügen Sie einfach zwei weitere Aufgabenspaltenkomponenten hinzu. Sagen Sie die Änderungen und schauen Sie sich das an. Siehst du, wir haben drei Abschnitte. Nun, hier ist eine kleine Übung für dich. Wir müssen lediglich den Titel dieser beiden Spalten ändern. Machen Sie sich keine Gedanken darüber, dieses Bild zu ändern. Versuche einfach, diese Überschriften zu ändern. 40. Lösung dieser Übung: Ich hoffe also, dass Sie diese Übung lösen. Und wenn Sie das nicht lösen können, Sie sich keine Sorgen, versuchen Sie es zumindest. Und das ist das Wichtigste. Sehen wir uns nun die Lösung dieser Übung an. Hier müssen wir also Requisiten verwenden, weil wir Daten von der übergeordneten Komponente an die untergeordnete Komponente übergeben wollen Daten von der übergeordneten Komponente an die untergeordnete Komponente übergeben Also übergeben wir hier Requisiten, Titel an Tudo an zweiter Stelle, Titel an Doing und den letzten Titel Speichern Sie diese Datei und lassen Sie uns auf diese Requisiten in der Aufgabenspaltenkomponente zugreifen diese Requisiten in der Aufgabenspaltenkomponente Bei dieser Komponentenfunktion übergeben wir Requisiten als Parameter und ersetzen diese Aufgabe einfach durch runde Klammern und den Punkttitel der Requisiten Also lasst uns diese Konsole entfernen. Das brauchen wir nicht, speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir bekommen Titel. Ich glaube, Sie haben jetzt ein klares Verständnis dafür , wie man Requisiten benutzt Lassen Sie uns nun sehen, wie wir diese Symbole ändern können. Dafür verwenden wir auch Requisiten. Lass mich dir die Logik erklären. Zuerst geben wir alle drei Bilder in diese App-Komponente ein. Wir werden das als Requisiten weitergeben. Oben importieren wir zuerst das To-Do-Icon aus Perioden-Assets und das direkte Heat-Dot-PNG-Format. Danach importieren Sie das Doing-Symbol aus Assets und das PNG mit leuchtenden Sternpunkten Endlich importieren wir das De-Symbol aus den Assets und das Häkchensymbol mit dem Punkt PNG Lassen Sie uns diese Symbole nun mithilfe von Requisiten weitergeben. Hier schreiben wir Icon ist gleich und wir verwenden geschweifte Klammern. Kannst du mir sagen, warum du schreibst? Weil wir JavaScript-Ausdrücke schreiben und das Do-Icon übergeben. In ähnlicher Weise entspricht con danach dem Ausführen von Con, con entspricht dem Symbol „Erledigt Speichern Sie diese Datei. Und in die Aufgabenspalte an der Stelle, an der diese Aufgabe steht, schreiben wir einfach Requisiten Punkt C. Rette die Banden und sieh sie Siehst du, hier haben wir diese Icons. Sie können sehen, wie einfach React ist. Am Anfang hatten fast alle Entwickler Angst vor React, sogar ich hatte Angst vor React. Aber wenn wir mehr Anwendungen üben und entwickeln, lernen wir, schnell zu reagieren. Machen Sie sich darüber also keine Sorgen. Übe einfach deine Fähigkeiten und damit wirst du auch React beherrschen. Hier in unserer Komponente können wir sehen, wann immer wir auf irgendwelche Requisiten zugreifen wollen Wir müssen hier den Titel der Requisiten und das Punktsymbol der Requisiten eingeben Aber das sieht ein bisschen hässlich aus. Wir können dafür also die Objektstrukturierung verwenden. Hier schreiben wir also, dass das Kons-Objekt den Requisiten entspricht. Und innerhalb dieses Objekts übergeben wir hier einfach unsere Eigenschaftsnamen, den Titel und Oder wir können diese sogar vereinfachen, indem wir dieses Objekt direkt an der Stelle dieser Requisiten hinzufügen dieses Objekt direkt an der Stelle dieser Requisiten Beides funktioniert genauso Am häufigsten verwenden wir also diese Methode, entfernen diese Zeilen und schreiben auch an der Stelle dieses Punktsymbols Symbol und auch hier schreiben wir Speichern Sie die Änderungen und es funktioniert genauso wie zuvor. In der nächsten Lektion erstellen wir nun unseren letzten Teil der Benutzeroberfläche, die Aufgabenkarte. 41. TaskCard-Komponente erstellen: Lassen Sie uns also eine neue Komponente namens Tascardt JSX erstellen. Außerdem erstellen wir eine neue CSS-Datei namens Tascard Dot CSS nun in unserer Taskcard-Komponente Fügen wir nun in unserer Taskcard-Komponente mithilfe von RAFC einen Boilerplate für diese Komponente hinzu. Oben importieren wir einfach die importieren wir einfach Darüber müssen wir uns also keine Gedanken machen . Lassen Sie uns nun Elemente für diese Karte hinzufügen. An der Stelle dieser DU können wir also Artikel mit Klassennamen und Aufgabenkarte schreiben. Du kannst auch DU verwenden, aber ich verwende gerne semantische Tags Darin erstellen wir nun zuerst einen Absatz zum Hinzufügen von Aufgabendetails und Klassennamen zum Unterstrichtext der Aufgabe. Und darin schreiben wir einfach, dass es sich um einen Beispieltext handelt. In der nächsten Zeile benötigen wir nun Text auf der linken Seite und die Schaltfläche Löschen auf der rechten Seite. Also erstellen wir hier eine Summe mit Klassenname, Aufgabenkarte, unterm Strich. Und darin fügen wir zwei weitere DUO mit Klassennamen, Aufgabenkarten-Tags und zweitens Klassennamen mit Aufgabenlöschung hinzu. Jetzt fügen wir im ersten Teil unsere technische Komponente hinzu, um zu sehen, welche Eingabe nicht funktioniert. Also geben wir oben die technische Komponente aus dem Tag-Modul ein. Und lassen Sie uns diese Komponente zu unserer Karte hinzufügen. Jetzt übergeben wir hier einfach Namensrequisiten, sagen wir mal DML. Lassen Sie uns dieses Tag duplizieren und den Namen in CSS ändern. Erledigt. Lassen Sie uns nun ein Bild zu dieser Aufgabe hinzufügen und löschen. Und um das Bild oben hinzuzufügen, müssen wir das Bild importieren. Importieren Sie, löschen Sie das Symbol aus dem Ordner nach oben und löschen Sie das Punkt-PNG. Und in der Bildquelle übergeben wir geschweifte Klammern, das Löschsymbol und auch den Klassennamen an das Löschsymbol Speichern Sie diese Datei, und jetzt fügen wir diese Komponente zur Aufgabenspalte Also eine der Komponenten der Aufgabenspalte. Also hier, nach unserer Überschrift, fügen wir die Aufgabenkartenkomponente hinzu, und C, um zu importieren, funktioniert jetzt. Speichern Sie die Änderungen und schauen Sie sich das an. E, hier bekommen wir unsere Elemente. Lassen Sie uns nun Stile für diese Karte hinzufügen. Unsere Karte sieht also aus wie eine echte Karte. In der CSS-Datei mit Aufgabenkartenpunkt schreiben wir also eine Aufgabenkarte. Und in den ecuren Klammern addieren wir zuerst Breite zu 100%, mittlere Höhe zu 100 Pixel, Rand zu einem Pixel, Festkörper hat DC DC Als nächstes wird der Grenzradius auf zehn Pixel erhöht. Abstand auf 15 Pixel und Rand auf 15 Pixel für oben und unten und Null für links und rechts Danach hatten wir Stile für Text. Also schreiben wir Punkt-Task-Text. Und in den CLI-Paketen hatten wir eine Schriftgröße von 18 Pixeln. Schriftstärke bis 600, Rand unten bis 15 Pixel. Speichern Sie die Eingaben und ich sehe keinen Unterschied aufgrund dieses riesigen Symbols. Lassen Sie uns also Stile dafür hinzufügen. Also fügen wir den Aufgabenunterstrich und das Löschen hinzu. Und darin schreiben wir Breite auf 35 Pixel Höhe auf 35 Pixel Der Wasserradius beträgt 100% , damit der Kreis vollständig ist. Jetzt wollen wir das Löschsymbol in der Mitte sodass wir Display-Flags hinzufügen, Elemente zentriert ausrichten, den Inhalt ausrichten, auch zentrieren, den Cursor zum Zeiger, und der Übergang zu 0,3 Sekunden ist rein und raus. Dies dient dazu, ein wenig flüssige Animationen hinzuzufügen. Fügen wir nun den Hover-Effekt für den Symbolhintergrund hinzu. Also Punkt Aufgabe unterstreichen, Spalte dLate unterstreichen, Mauszeiger darüber bewegen und wir wollen nur die Hintergrundfarbe ändern, zwei hat IB, IB, Ib Lassen Sie uns danach unser Symbol klein machen. Wählen Sie also das Symbol „Löschen“. Und darin fügen wir eine Breite von 220 Pixeln hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Fein. Jetzt müssen wir diese beiden Divs in einer Zeile erstellen und sie in der linken und rechten Ecke platzieren Also zurück zum VS-Code, wir fügen hier Punkt, Aufgabe, Karte, Bottom Line Darin schreiben wir Display in Flaggen, richten Elemente zentriert aus und richten den Inhalt im Abstand dazwischen aus. Speichern Sie das und sehen Sie zu, dass wir unsere Karte bekommen. Lass mich dir jetzt einen kleinen Trick zeigen, den ich oft benutzt habe. Derzeit sieht dieses Löschsymbol zu dunkel aus. Im CSS für das Löschsymbol erhöhen wir die Deckkraft auf 50% Außerdem fügen wir hier einen Übergang hinzu, alle 0,3 Sekunden sind rein. Danach fügen wir Punktaufgabe, Delta, Call-On-Hover, Leertaste, Punktkippung und Symbol hinzu und wir erhöhen die Deckkraft auf 80%, weil wir die Opazität des Symbols erhöhen wollen , wenn jemand auch nur Sag die Änderungen und sieh sie dir an. Sehen Sie jetzt, unser Auto sieht gut aus. Ab dem nächsten Abschnitt beginnen wir nun, Funktionen für diese Anwendung hinzuzufügen , was der Hauptzweck dieses Kurses ist. Ich weiß, dass ich wenig schnelles CSS schreibe, aber das liegt daran, dass wir hier sind, um React zu lernen. Wenn wir im React-Kurs CSS lernen, dann gefällt das einigen von Ihnen vielleicht nicht. Außerdem schreibe ich dieses CSS zuerst, weil ich diese Anwendung übe bevor ich diesen Kurs aufnehme. Also verwirren Sie das nicht. Und wenn Sie sich diesen Kurs ständig ansehen, dann nehmen Sie sich bitte zehn bis 15 Minuten Pause und schnappen Sie sich etwas frische Luft Wir sehen uns im nächsten Abschnitt. 42. Abschnitt 05 Funktionalität in Projekt 1 hinzufügen: Willkommen im fünften Abschnitt des ultimativen React-Kurses. In diesem Abschnitt werden wir unser erstes Projekt abschließen, nämlich die Sask-Track-Anwendung Wir verstehen die Grundlagen der Funktionalität, Umgang mit Formularen, die Auswahl von Tags und das anschließende Hinzufügen von Aufgaben ihrer Eigenschaften, die Implementierung der Löschfunktion und wir werden auch den zweitwichtigsten Haken von React kennenlernen , nämlich den Use-Effekt Nachdem Sie diesen Abschnitt abgeschlossen haben, Sie sich sicher sein, eine React-Anwendung zu erstellen werden Sie sich sicher sein, eine React-Anwendung zu erstellen. Ich freue mich sehr darüber und hoffe, Sie auch. Lassen Sie uns also in diesen Abschnitt eintauchen. 43. Griffform: Bevor wir anfangen, Funktionen zu unserer Anwendung hinzuzufügen , wollen wir zunächst die Logik dieser Anwendung verstehen. Hier erstellen wir also zunächst eine Reihe von Aufgaben, die alle Aufgaben haben. Jetzt ist jede Aufgabe ein Objekt mit drei Eigenschaften. Zuerst die Aufgabe selbst, danach haben wir den Status der Aufgabe, was erledigt, erledigt oder erledigt werden kann. Und drittens haben wir Texte, also die Anordnung der ausgewählten Texte. Wenn der Benutzer also eine neue Aufgabe hinzufügt, fügen wir ein neues Aufgabenobjekt mit diesen drei Eigenschaften und zeigen sie dann in der Aufgabenspalte an, so einfach ist das. Zuallererst werden wir uns mit diesem Formular befassen. Die Bearbeitung des Formulars bedeutet hier, dass wir Benutzereingabewerte wie Text, Aufgabenstatus und ausgewählten Text abrufen müssen. Wenn wir diese Details nicht haben, wie können wir sie dann speichern? , wenn es sich um eine Aufgabenformularkomponente Erinnern Sie sich, wenn es sich um eine Aufgabenformularkomponente handelt, was wir verwenden werden, um Benutzereingaben zu erhalten? Richtig, es wird State Hook verwendet. Hier oben geben wir UseTateHok ein und in unserer Komponente erstellen wir oben die Zustandsvariable Task und Set Task Als Standardwert übergeben wir hier eine leere Zeichenfolge. Wenn sich nun etwas an unserer Eingabe ändert, setzen wir diesen Wert einfach in diesem Aufgabenstatus. Hier übergeben wir also ein Ereignis namens „Veränderung“. Und innerhalb dieses Ereignisses haben wir ein Ereignisobjekt Fehlerfunktion, und hier rufen wir einfach set task auf. Da wir nun wissen, dass jeder Wert wir in dieser Set-Task-Funktion übergeben, es der Wert unseres Aufgabenstatus ist, also der Zielpunktwert. Lassen Sie uns nun überprüfen, ob wir unsere Aufgabe bekommen oder nicht. Loggen Sie diese Aufgabe einfach mit einem Punkt auf der Konsole. Speichern Sie die Gene und sehen Sie sich das an, schreiben Sie etwas in dieses Textfeld und sehen Sie, dass wir den Eingabewert erhalten Jetzt, wo wir diesen Ausdruck hier schreiben, können wir ihn in einer separaten Funktion schreiben Also übergeben wir hier den Funktionsnamen und kümmern uns um die Änderung der Aufgabe. Und darin übergeben wir dieses Event-Objekt. Lassen Sie uns nun diese Funktion definieren. Const Handle Task Change entspricht also hier unserem Event-Objekt, das wir von hier aus übergeben, der Pfeilfunktion, und darin setzen wir die Aufgabe auf den Zielpunktwert des Ereignisses Speichern Sie die Änderungen und sehen Sie, es funktioniert genauso wie zuvor Wir können diesen Code in beiden Methoden schreiben. Jetzt können wir diesen Code sogar kürzer machen. An der Stelle dieses Ausdrucks in React können wir direkt unseren Funktionsnamen übergeben , der „Aufgabenänderung verarbeiten“ lautet. Beides funktioniert gleich. Aber denken Sie daran, wir müssen hier die Pfeilfunktionssyntax verwenden. Andernfalls wird kein Ereignisobjekt abgerufen. Wir erhalten den Wert unserer Eingabe. Lassen Sie uns nun sehen, wie wir den Wert dieses Dropdowns ermitteln können. Also wie wir es für diese Eingabe tun, machen wir es auch mit diesem Dropdown. Zuallererst erstellen wir also eine weitere Zustandsvariable zum Speichern des Werts des aktuellen Status. Also geben wir hier den Status an und übergeben den Status und setzen den Status und als Standardwert geben wir hier an, um zu tun, denn wenn Benutzer keinen Wert auswählen, fügen wir standardmäßig wenn Benutzer keinen Wert auswählen, den Status zu tun hinzu. In diesem Auswahl-Tag fügen wir nun das Ereignis „On Change“ hinzu. Und darin übergeben wir neue Funktionsreferenz und kümmern uns um die Statusänderung. Lassen Sie uns nun auch diese Funktion definieren. Wir können diese Funktion auch duplizieren, und an die Stelle dieses Namens schreiben wir unseren neuen Funktionsnamen und kümmern uns um die Statusänderung. Und an die Stelle dieser festgelegten Aufgabe schreiben wir den Satzstatus und das war's. Lassen Sie uns überprüfen, ob das funktioniert oder nicht. Hier fügen wir also auch den Status in der Konsole hinzu, speichern die Änderungen und schauen uns um, schreiben etwas, und wir können standardmäßig sehen, schreiben etwas, und wir können standardmäßig sehen, was wir als Status tun können. Lassen Sie uns nun den Wert aus dem Drop-down-Menü ändern und sehen, wie wir diesen Wert erhalten. Es funktioniert also. Also hier ist ein Problem. Wie wir für jeden Wert sehen können, müssen wir hier Zustandsvariablen erstellen und außerdem müssen wir eine separate Funktion für die Bearbeitung von Änderungen definieren , und das ist eine Menge Arbeit. Sie fragen sich vielleicht, gibt es dafür eine Abkürzung? Die Antwort lautet ja. Es gibt einen kleinen Trick , den wir in der nächsten Lektion sehen. 44. Shortcut-Trick für die Bearbeitung von Formularen: Derzeit haben wir in unserem Formular also nur zwei Ausfüllungen. Aber stellen Sie sich vor, wir haben fünf bis sechs Ausfüllungen und Sie erstellen eine Zustandsvariable für jede Eingabe, und das macht unseren Code unübersichtlich und schwer zu verwalten Schauen wir uns also an, wie man mehrere Eingaben mit einer einzigen On-Change-Funktion handhabt mehrere Eingaben mit einer einzigen On-Change-Funktion In der vorherigen Lektion haben wir individuelle Statusvariablen für das Ausfüllen von Formularen erstellt. Und dann setzen wir in jeder Handle-Change-Funktion diesen Wert auf unsere Zustandsvariable. Bei dieser Methode erstellen wir jedoch nur eine Zustandsvariable für alle Eingabefüllungen. Lass es mich dir zeigen. Lassen Sie uns diesen Code auskommentieren, und oben erstellen wir eine neue Zustandsvariable namens Aufgabendaten und legen Aufgabendaten fest. Und jetzt übergeben wir hier als Standardwert ein Objekt. Und in diesem Objekt haben wir mehrere Eigenschaften im Schlüssel-Wert-Paar. Also fügen wir eine Aufgabe zu einer leeren Zeichenfolge und den Status zu Todo hinzu. Lassen Sie uns nun eine neue Funktion erstellen, deren Änderung einer Fehlerfunktion entspricht Und wir werden diese Funktion bei allen Eingaben bei einem Änderungsereignis aufrufen bei allen Eingaben bei einem Änderungsereignis Also schreiben wir in unser Eingabefeld hier handle change. Kopieren wir nun einfach dieses Änderungsereignis und fügen es in unser Select-Tag ein. Wenn wir also den Wert in eines dieser Felder eingeben oder ändern , wird nur diese Funktion zum Ändern des Handles ausgeführt. Nun, der wichtigste Schritt und ohne diesen Schritt wird diese Methode nicht funktionieren. Der Schritt besteht also darin, dass wir alle Eigenschaften als Namensattribut aus unserem State-Objekt hinzufügen alle Eigenschaften als Namensattribut müssen. Lass mich dir zeigen, was ich meine. Für unsere Aufgabeneingabe möchten wir also ihren Eingabewert in dieser Aufgabeneigenschaft speichern. In unserem Eingabe-Tag fügen wir hier das Namensattribut hinzu, das der Aufgabe entspricht Für unser Status-Dropdown möchten wir nun seinen Wert in dieser Statuseigenschaft festlegen Also fügen wir in diesem ausgewählten Feld das Namensattribut zum Status hinzu. Stellen Sie sicher, dass wir den gleichen Namen schreiben, den wir in das Aufgabendatenobjekt schreiben. In dieser Handle-Change-Funktion schreiben wir nun unsere Hauptlogik. Hier übergeben wir also dieses E als Event-Objekt für all diese Füllungen und lassen uns dieses E-Punkt-Ziel einfach in der Konsole protokollieren. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, wenn wir eine Aufgabeneingabe eingeben, erhalten wir diese Aufgabeneingabe, und wenn wir einen Wert aus der Dropdownliste auswählen, erhalten wir das Auswahl-Tag Unsere Hauptlogik besteht darin, dass wir, wenn wir ein Formularfeld eingeben, zuerst den Feldnamen und den Wert erhalten und mit diesem Namen , der mit unserer Aufgabendateneigenschaft identisch ist, ersetzen wir seinen Wert durch den aktuellen Wert Ich weiß, das klingt ein bisschen kompliziert, ist es aber nicht. Lass uns das sehen und danach fühlen sich deine All-Outs klar an. Wir erstellen hier eine Namensvariable entspricht, dem Zielpunktnamen Und wir erstellen einen weiteren Variablenwert dem Zielpunktwert von e entspricht Und lassen Sie uns diese beiden Variablen trösten. Sag die Änderungen und sieh sie dir an. Siehst du, wir erhalten den Füllnamen und seinen Wert, wenn wir die Eingabefelder eingeben. Jetzt müssen wir nur noch diesen Wert in unserer Statusvariablen setzen , der sich auf ihren Eigenschaftsnamen bezieht. Also schreiben wir hier die festgelegten Aufgabendaten und wir erhalten hier die vorherigen Werte anhand dieses vorherigen Parameters. Dieser vorherige Wert entspricht unserem aktuellen Aufgabendatenwert. In dieser Pfeilfunktion geben wir nun das Objekt zurück. Zunächst geben wir alle vorherigen Werte mit dem Spread-Operator zurück. Jetzt müssen wir nur noch das Feld mit seinem Wert aktualisieren. Was auch immer wir von dieser Callback-Funktion zurückgeben, das wird der Wert unserer Zustandsvariablen sein Jetzt wissen wir, dass wir auf Objekteigenschaften zugreifen können , indem wir eckige Klammern verwenden und diese Namensvariable innerhalb von acht und Colm ihren Wert übergeben acht und Colm ihren Wert Wenn wir nun etwas in die Aufgabeneingabe schreiben, werden zuerst alle vorherigen Eigenschaften zurückgegeben, und dann finden wir die Eigenschaft task und ersetzen ihren Wert durch den mit der Aufgabe gefüllten Wert So einfach ist das. Lassen Sie uns diese Aufgabendatenvariable mit einem Punkt protokollieren und prüfen, ob wir Werte erhalten oder nicht. Speichern Sie die Ginges und sehen Sie sich das an. E, wenn wir ein Feld aktualisieren, erhalten wir seinen Wert in unserem State-Objekt, also funktioniert es Jetzt können wir diesen Code noch kürzer machen , indem wir die Objektstrukturierung verwenden. Also schreiben wir ein Punktziel und mithilfe der Objektstrukturierung rufen wir eine Namens- und Wertvariable ab Diese beiden Zeilen sind also identisch mit diesem einzeiligen Code. Also entfernen wir diese beiden Zeilen. Jetzt wollen wir dieses Aufgabendatenobjekt konsolen , wenn wir auf die Schaltfläche Beim Absenden der Aufgabe klicken. Also erstellen wir hier eine neue Funktion namens handle submit. Und innerhalb dieser Funktion verschieben wir einfach diese Konsole. Jetzt geben wir im Form-Tag das Submit-Event weiter und wir übergeben hier die Handle-Submit-Funktion. Jetzt fragen Sie sich vielleicht, können wir diese Funktion im OnClick-Ereignis dieser Schaltfläche übergeben diese Funktion im OnClick-Ereignis dieser Schaltfläche Und die Antwort lautet ja. Sie können diese Funktion auch bei einem Klickereignis weitergeben. Aber warum geben wir diese Funktion beim Absenden weiter? Der Grund dafür ist, dass, wenn jemand in das Eingabefeld schreibt und dann Eingabetaste drückt und wenn jemand auf die Schaltfläche Senden klickt, in beiden Fällen diese Handle-Senden-Funktion ausgeführt wird. Wir übergeben diese Funktion nur im TLK-Ereignis, dann funktioniert sie nur, wenn Sie auf die Schaltfläche klicken. Speichern Sie die Änderungen und schauen Sie sich um, schreiben Sie eine Aufgabe Und wählen Sie den Drop-down-Wert aus und klicken Sie auf Vollenden. Sehen Sie, für nur eine Sekunde erhalten wir den Wert, aber danach wird unsere Seite aktualisiert, weil das das Standardverhalten von Formularen ist wenn wir das Formular abschicken, wird diese Handle-Senden-Funktion ausgeführt und dann die Seite aktualisiert. Wir müssen das beenden. Also halten wir dieses E als Event-Objekt fest. Und schreibe E prevent Default. Diese Funktion verhindert das Standardverhalten von Formularen. Speichern Sie die Änderungen und sehen Sie sich das an. Füllen Sie dieses Formular aus und sehen Sie hier, dass wir diese Details erhalten. Lassen Sie uns diesen Trick kurz zusammenfassen. Zunächst erstellen wir an der Stelle, an der ein Zustand mit mehreren Verwendungszwecken erstellt wird, eine einzelne Statusvariable, nämlich ein Objekt Und in diesem Objekt werden wir den Namen der Eigenschaften und den Standardwert hinzufügen. Jetzt vergessen wir den Namen des Formularfeldes und übergeben die Namenseigenschaft genau so wie den Namen der Objekteigenschaften Danach werden wir bei einem geänderten Ereignis eine einzige Funktion für alle Formularfelder übergeben geänderten Ereignis eine einzige Funktion für alle Formularfelder In dieser Funktion erhalten wir zuerst den Namen und das Wertattribut aus dem Ereignisobjekt und dann ersetzen wir den aktuellen Wert unseres Aufgabendatenobjekts, so einfach ist das. So verwalten wir mehrere Formularfelder in React mithilfe der Shortcut-Methode. Sie können sehen, dass wir mit nur zwei Codezeilen Werte in unserem Objekt festlegen können. 45. Stricter React-Modus: Lassen Sie mich Ihnen jetzt etwas Interessantes zeigen. Wir duplizieren hier einfach Disconsol-Aufgabendaten und verschieben sie nach außen in unsere Komponente Eine der am häufigsten gestellten Fragen, die mir alle React-Anfänger stellen, ist, wenn wir das Dot Log für die Konsole erstellen, warum wir alle Daten zweimal sehen Sollten wir etwas falsch gemacht haben? Und als ich React zum ersten Mal gelernt habe, habe ich dieselbe Frage gestellt. Die Antwort lautet nein. Du machst nichts falsch. Es passiert aufgrund des Reaktionsmodus. Öffnen Sie in unserem Projekt die JSX-Hauptdatei. Hier können wir sehen, wie React unsere Anwendung mit dieser React-Stric-Mode-Komponente umhüllt unsere Anwendung mit dieser React-Stric-Mode-Komponente Lassen Sie uns zunächst diese Komponente im Ric-Modus kommentieren. Speichern Sie die Änderungen und werfen Sie einen Blick darauf dass wir hier unsere Daten einmal erhalten. Es ist also fest. Das liegt am React Street-Modus. Aber warum brauchen wir diesen Straßenmodus. React Street Mode ist also ein von React bereitgestelltes Tool, das Entwicklern hilft, qualitativ besseren Code zu schreiben indem es die potenziellen Probleme während der Entwicklung hervorhebt . Wenn wir unsere Anwendung in den React Dot Street Mode integrieren, zusätzliche Prüfungen und Warnungen aktiviert , die Ihnen helfen , Probleme zu identifizieren, bevor sie zu Problemen in der Produktion führen. Es sucht beispielsweise nach nicht unterstützten oder veralteten React-APIs und -Komponenten, speichert direkte Updates möglicherweise unnötige Renderings und rendert unsere Anwendung deshalb zweimal Es ist also besser, den Straßenmodus für unsere Anwendung zu aktivieren. Lassen Sie uns diese Befehle entfernen und Straßenmodus für unsere Anwendung aktivieren. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, wir erhalten wieder zwei Datenobjekte. Also ich reagiere 18, der Straßenmodus ist standardmäßig aktiviert und React rendert jede Komponente zweimal So funktioniert der strikte Modus im Entwicklungsprozess Wenn wir unsere Anwendung für die Produktion bereitstellen, wird der Straßenmodus nicht hinzugefügt , sodass unsere Komponenten nur einmal gerendert werden. Machen Sie sich darüber also keine Sorgen. Lassen Sie uns auch unsere Consult-Protokollzeile entfernen. In der nächsten Lektion werden wir uns der Implementierung der Steuerauswahl befassen. 46. Tag-Auswahl: Lassen Sie uns nun die Tag-Auswahlfunktion implementieren. Aber vorher entfernen wir diesen Code zum Auskommentieren. Jetzt fügen wir in unserer Aufgabendatenvariablen eine weitere Eigenschaft namens tags hinzu und übergeben ein leeres Array als Standardwert. Wenn wir ein beliebiges Tag auswählen, fügen wir dieses Tag zu diesem Array hinzu. Und wenn sich dieses Tag bereits in diesem Array befindet, werden wir dieses Tag ganz einfach entfernen. Und das ist mein Trick, um jede Logik in der Programmierung zu implementieren. Sollte ich dir diesen Trick geben, lass mich dir geben. Der Trick ist, wann immer wir Funktionen hinzufügen wollen, diese Funktionalität in menschlicher Sprache zu beschreiben , und das war's. Auf diese Weise können Sie die Logik jeder Funktionalität knacken. Zuallererst erstellen wir hier eine neue Funktion namens Select Tag, Error Function. Diese Funktion wird ausgeführt, wenn wir auf eines der Tags klicken. Also müssen wir die Funktion innerhalb dieser Tag-Komponente übergeben. Können wir das machen? Durch die Verwendung von Requisiten. Hier übergeben wir einfach Requisiten namens Select Tag und übergeben hier unseren Funktionsnamen , der Select Tag lautet Hier verwenden wir denselben Eigenschaftsnamen wie unseren Funktionsnamen, da wir uns keine Gedanken über die Angabe des neuen Namens machen müssen Sie können hier einen beliebigen Namen schreiben. Es liegt ganz bei dir. Lassen Sie uns das jetzt kopieren und für alle Tag-Komponenten einfügen. Speichern Sie das, jetzt öffnen wir diese Tag-Komponente. Und hier bei der Requisite können wir das Objekt destrukturieren und bekommen den Tag-Namen und das Celac-Tag Lassen Sie uns nun diese Requisiten entfernen und auch hier geben wir das Click-Event weiter und wir übergeben hier einfach das Celac-Tag Und das ist es. Unsere SellacTag-Funktion wird bei diesem Estag-Klick ausgeführt Lassen Sie uns nun unsere Logik für die Sectag-Funktion schreiben. Zuallererst stellt sich die Frage, wie können wir das aktuell ausgewählte Tag abrufen Denn wie können wir, ohne den Tag-Namen zu kennen , irgendeine Logik schreiben? In der Tech-Komponente können wir also diesen Tag-Namen als Argument dieser ausgewählten technischen Funktion übergeben . Aber wir können diese Funktion hier nicht aufrufen , da unsere Funktion dann nur einmal ausgeführt wird. Um dieses Problem zu lösen, können wir hier einen Funktionsfehler übergeben und darin Funktion selecteg aufrufen und den Tagnamen als Argument übergeben Speichern Sie diese Datei und in der Komponente für das Aufgabenformular erhalten wir hier das Tag als Parameter. Rufen Sie einfach dieses Tag auf, speichern Sie die Gengs und schauen Sie sich das Siehst du, wenn wir auf diese Tag-Schaltfläche klicken, bekommen wir diesen Tag-Namen Aber unser Formular wird auch eingereicht , weil wir hier das Aufgabendatenobjekt erhalten. Siehst du? Also lass uns das lösen. Öffnen Sie also die Tag-Komponente. Wir müssen hier einfach Button-Typ an Button weitergeben. Weil in allen Browsern, außer Internet Explorer, Standardtyp der Schaltfläche Senden ist, und aus diesem Grund wird unser Formular gesendet. Speichern Sie diese und sehen Sie, jetzt bekommen wir nur noch den Tagnamen. Jetzt ist unsere nächste Aufgabe, dieses Tag in einem Textarray zu speichern. In der Seat-Tag-Funktion schreiben wir also zunächst, ob Zustand vorhanden ist, und hier wollen wir das überprüfen. Unser Tag ist bereits im Steuerbereich verfügbar oder nicht. Also schreiben wir Punkte-Tags für Aufgabendaten. Hier verwenden wir eine Methode, und darin finden wir jedes Element, eine Pfeilfunktion, und wir müssen hier die Bedingung übergeben, Element ist gleich Eg. Erkläre dir diesen Ausdruck. Die Summenmethode gibt den Wert „Wahr“ oder „Falsch“ zurück. Wir überprüfen hier jedes Element unseres Punkt-Tag-Arrays für Aufgabendaten und vergleichen es hier mit einem Tag-Namen. Wählen wir zum Beispiel das STML-Tag aus, dann überprüft dieser Ausdruck jeden Wert dieser Tags, und wenn STML in diesem Array verfügbar ist, er true zurück, andernfalls false, so einfach Was wir tun werden, wenn das Tag bereits verfügbar ist, wir werden dieses Tag aus diesem Array entfernen Also schreiben wir Aufgabendaten, Punkttext, Punktfilter. Auch hier erhalten wir die Pfeilfunktion für jedes Objekt und übergeben hier die Bedingung, Element nicht dem Tag entspricht Wie wir wissen, ruft diese Filtermethode nun Elemente ab , die diese Bedingung erfüllen , und gibt ein neues Array zurück Also speichern wir das in Variablen namens Filter-Tags. Jetzt müssen wir unseren Textwert mit diesen neuen Filter-Tags aktualisieren . Also schreiben wir festgelegte Aufgabendaten. Zuerst erhalten wir hier den vorherigen Wert, Fehlerfunktion, und darin geben wir das Objekt zurück, und zuerst fügen wir alle vorherigen Werte mit dem Spread-Operator hinzu. Und wir überschreiben einfach Tags, um Tags zu filtern. Jetzt fügen wir die Bedingung Ls hinzu, was bedeutet, dass unser Tag in diesem Textarray nicht verfügbar ist Wir können dieses Tag direkt zu unserem Array hinzufügen Wir schreiben die Daten der festgelegten Aufgabe hinein, wir erhalten den vorherigen Wert, Pfeilfunktion, und hier geben wir das Objekt zurück, und hier fügen wir alle vorherigen Werte mit dem Spread-Operator hinzu. Denn ohne das werden auch unsere Aufgabe und unser Status ersetzt. Danach überschreiben wir Tags und hier übergeben wir unser aktuelles Tag Nun wollen wir sehen, ob das funktioniert oder nicht. Also einfach Dot Log, Tagdata Dot Tex, die Änderungen speichern und mal schauen Wählen Sie ein beliebiges Tag aus und sehen Sie, wie wir das Tag hier bekommen. Klicken Sie jetzt erneut auf dieses Tag. Siehst du, es ist weg. Nun, hier ist ein einziger Bug. Wählen Sie ein Tag und dann ein anderes Tag aus. Sie können sehen, dass unser vorheriges Tag weg ist. Also, warum das passiert, lass uns das herausfinden. In diesem Zustand ersetzen wir also direkt den Tag-Wert durch das aktuelle Tag, und aus diesem Grund haben wir unser altes Tag durch ein neues Tag ersetzt. Hier verwenden wir auch den Spread-Operator previous dot tags , der alle alten Tags enthält, und fügen am Ende einfach ein neues Tag hinzu. Ich mache diesen Fehler absichtlich, weil ich Ihnen zeigen möchte, wie wichtig diese vorherigen Werte sind. Speichern Sie die Änderungen und schauen Sie sich das an. Wählen Sie die Tags aus und sehen Sie, ob es funktioniert. 47. Ausgewähltes Tag in der Benutzeroberfläche anzeigen: Wenn wir jetzt unser Tag auswählen, können wir keinen Effekt auf unserer Seite zeigen, und das ist die schlechte Benutzererfahrung. Um das ausgewählte Tag anzuzeigen, müssen wir nur prüfen, ob dieses Tag in unserem Tag-Array verfügbar ist oder nicht. Hier erstellen wir eine neue Funktion namens Jack Tag Arrow Function. Darin wollen wir nun einfach true oder false für das Tag zurückgeben. Erinnerst du dich, mit welcher Methode wir das überprüft haben? Das haben wir bereits in der Sylac-Tag-Funktion gemacht, die eine Methode verwendet Wir geben hier einfach Aufgabendaten Punkte-Tags zurück. Darin erhalten wir Pfeilfunktion für jedes Objekt und wir überprüfen, ob das Element unserem Tag entspricht, und wir erhalten dieses Tag aus dem Parameter. Jetzt übergeben wir diesen wahren und falschen Wert für jedes Tag. Scrollen Sie also zur technischen Komponente. Wir übergeben hier noch eine weitere Requisite namens selected, und hier rufen wir die Check-Tag-Funktion Und darin übergeben wir unseren Tag-Namen in Doppelcodes. Beachten Sie, dass wir den gleichen Namen schreiben, den wir als Tag-Namen übergeben. Speichern Sie diese Datei, und in der technischen Komponente finden Sie hier ausgewählte Requisiten Mit diesen ausgewählten Probs können wir nun den ausgewählten Effekt hinzufügen Hier werden wir Inline-Stile verwenden, da wir unterschiedliche Farben für das SDML-CSS, das JavaScript und das React-Tag festlegen möchten JavaScript und das React-Tag Dafür erstellen wir eine Variable namens Tag-Stil und deklarieren als Objekt und innerhalb dieses Objekts wir das Schlüssel-Wert-Paar an Lass es mich dir zeigen. Zuerst übergeben wir SDML und hier als Wert übergeben wir ein Objekt mit der Eigenschaft Hintergrundfarbe Und der Wert für ein FD ist 821. Jetzt fragen Sie sich vielleicht, warum wir hier ein Objekt hinzufügen. Der Grund dafür ist, dass wir wissen , dass wir in Inline-Stilen ein Style-Objekt übergeben müssen. So können wir dieses Objekt direkt nach dem Tag-Namen hinzufügen. Lassen Sie uns nun Stile für andere Tags hinzufügen. Duplizieren Sie dieses Schlüsselwertpaar noch viermal, und hier fügen wir CSS hinzu und ändern Hintergrundfarbe auf 15 d4c8 Für JavaScript ändern wir nun Hintergrundfarbe zwei hat FF D eins, zwei C und für React-Hintergrundfarbe zwei für C, zwei für C, Beachten Sie, dass wir den gleichen Tag-Namen verwenden, den wir in den Tag-Namen props übergeben Andernfalls wird es nicht funktionieren. Jetzt denken Sie vielleicht, warum wir ein weiteres Schlüssel-Wert-Paar hinzufügen. Letzteres für den Standardhintergrund für keine ausgewählten Tags. Also fügen wir die Standardhintergrundfarbe zu hat F 9f9f9 hinzu. Lassen Sie uns nun Stile entsprechend den Bedingungen hinzufügen. Wir fügen hier style is equal to coli Klammern hinzu, weil wir einen Javascript-Ausdruck hinzufügen . Wenn diese Option aktiviert ist, fügen wir den textilen Textil hinzu und in einer eckigen Klammer übergeben wir Andernfalls fügen wir den Textpunkt default hinzu. So einfach ist das. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, wenn wir das Tag auswählen, ändert sich seine Hintergrundfarbe und danach kehrt es zur Normalität zurück. Bei anderen Tags werden diese Stile jetzt nicht angezeigt, diese Stile jetzt nicht angezeigt da wir die ausgewählten Requisiten für sie nicht übergeben Also zurück zur Aufgabenformularkomponente Hier wählen wir die ausgewählten Requisiten aus und kopieren sie von hier und fügen sie hier ein, und wir ändern den Tag-Namen Jetzt, genauso wie wir es für JavaScript tun, und dasselbe tun wir auch für React Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Sehen Sie, wie unsere Tags diesen ausgewählten Effekt haben. Ich weiß, dass dieses Objekt im Inline-Stil Sie verwirrt. Aber wenn Sie diesen Code überarbeiten, werden Sie das richtig verstehen Danach werden Sie sehen, wie einfach es ist, diese Auswahlfunktion zu implementieren Sie müssen nur in der Alltagssprache denken und Sie suchen nicht nach allem bei Google. Wenn du etwas ausprobierst und auf Lager hast, dann benutze es als Werkzeug. Nun, hier haben wir alle Details zur Aufgabe in dieser Aufgabendatenvariablen. In der nächsten Lektion werden wir also sehen, wie wir diese Aufgabe in unserem Abschnitt anzeigen können. 48. Aufgabenkarten anzeigen: Lassen Sie uns nun unsere Hauptfunktionalität dieser Anwendung hinzufügen , nämlich das Hinzufügen von Aufgaben. Ohne diese Funktion ist unsere Anwendung nicht nützlich. Hier speichern wir also all unsere Aufgaben in einem einzigen Array, und mithilfe der Status-Eigenschaft werden wir sie in jedem Abschnitt anzeigen. Wir erstellen dieses Array als Statusvariable , denn wenn wir die Aufgabe hinzufügen oder löschen, möchten wir die Änderungen auf unserer Kuppel sehen. Jetzt stellt sich die Frage, in welchem Teil unserer Anwendung wir dieses Array benötigen. Zuallererst müssen wir in unserer Aufgabenformularkomponente auf diese Array-Set-Funktion zugreifen in unserer Aufgabenformularkomponente auf diese Array-Set-Funktion , denn wenn wir unsere Aufgabe einreichen, möchten wir sie zu diesem Array hinzufügen. Danach müssen wir den Array-Status in dieser Aufgabenspaltenkomponente anzeigen . Wir benötigen also das Task-Array in diesen beiden Komponenten, taskfm und taskcolumn Also müssen wir diese Statusvariable in dieser App-Komponente erstellen in dieser App-Komponente Also können wir das als Requisiten in diesen beiden Komponenten übergeben. Also oben importieren wir den Nutzungsstatus aus der React-Bibliothek. Und in der Komponente schreiben wir uns State und übergeben den Variablennamen, Aufgabe und die festgelegte Aufgabe. Und wir übergeben mein Array als Standardwert. Lassen Sie uns nun diese Funktion für festgelegte Aufgaben als Requisiten in dieser Aufgabenformularkomponente übergeben als Requisiten in dieser Aufgabenformularkomponente Diese Datei und halten Sie die Strg - oder Befehlstaste gedrückt und klicken Sie einfach auf den Komponentennamen Es wird uns zu dieser Komponentendatei führen. Nun, hier beim Parameter, destrukturieren wir Requisiten. Ich weiß, dass wir das in dieser Komponente nicht brauchen, aber das ist eine gute Praxis, die uns in Zukunft helfen Hier erhalten wir also die Funktion „Aufgabe festlegen und in der Funktion „ Senden werden wir unsere Aufgabendaten in der Funktion „Aufgabe festlegen“ festlegen. Also schreiben wir unten Set Task. Jetzt bekommen wir auch hier die ersten vorherigen Werte, Pfeilfunktion und geben hier ein Array zurück, und zuerst fügen wir alle vorherigen Werte mit dem Spread-Operator hinzu. Danach fügen wir einfach Aufgabendatenobjekt hinzu und fertig. Lassen Sie uns nun meinen VS-Code mit Control und Minus oder Command und Minus ein wenig verkleinern . Speichern Sie diese Datei und lassen Sie uns überprüfen, was wir erhalten. Also zurück zur App Dot JSX-Datei und einfach Console Dot Log Tasktask speichern die Änderungen und werfen Sie einen Blick darauf Schreiben Sie das und wir können sehen, dass wir ein Textarray bekommen. Also lasst uns diese Konsole reinigen. Öffnen Sie die Taskformularkomponente, und hier entfernen wir diese Konsolentextzeile. Speichern Sie das und lassen Sie uns die Seite aktualisieren. Das ist Task Burn, wir wählen Tags und den Status auf Erledigen und klicken dann auf Attask Siehst du, hier bekommen wir diese Aufgabe. Lassen Sie uns nun eine weitere Aufgabe hinzufügen. Markiert den Status, um eine Aufgabe zu erledigen. Siehst du, das verstehe ich auch. Also das funktioniert. Lassen Sie uns nun diese Aufgaben in dieser Spalte anzeigen. In der App-Komponente hier in dieser Aufgabenspaltenkomponente übergeben wir die erste Aufgabe als Requisiten, und danach müssen wir diese Aufgaben nach Status filtern Wenn der Status beispielsweise in Bearbeitung ist, zeigen wir nur die Aufgabe an, deren Status gerade erledigt ist Also übergeben wir hier den Status, der gleich bis ist. Kopieren wir nun diese beiden Requisiten und übergeben sie hier in diese Aufgabenspalte Und wir ändern einfach den Status in Wird erledigt und auch hier fügen wir diese Requisiten ein und ändern den Status auf Speichern Sie diese. In der Komponente „ Aufgabenspalte“ strukturieren wir hier einfach Aufgabe und Status An der Stelle dieser statischen Aufgabenkarte fügen wir nun Calibraket Task Hier erhalten wir jede Aufgabe und auch den Index, und wir fügen hier einfach die Bedingung hinzu, Aufgabenpunktstatus diesem Status und der puritanischen Aufgabenkomponente entspricht , und darin übergeben wir ein Schlüsselattribut für jedes einzelne Element, nämlich unseren Dieser Ende-Operator gilt nur für den wahren Ausdruck. Also nur wenn diese Bedingung wahr ist, geben wir diese Aufgabenkartenkomponente zurück. Ansonsten bekommen wir nichts, speichern die Änderungen und schauen uns das an. Siehst du, hier bekommen wir zwei Karten. Eine zu erledigen und eine zu tun. Jetzt müssen wir nur noch diese Details auf dieser Karte ändern . diese Details in unserer Kartenkomponente anzuzeigen, müssen wir sie also Um diese Details in unserer Kartenkomponente anzuzeigen, müssen wir sie also mithilfe von Requisiten weitergeben Also hier entspricht der Titel dem Aufgabenpunkt Aufgabe. Danach entsprechen Tags dem Aufgaben-Punkt-Text. Speichern Sie diese Datei Und jetzt lassen Sie uns diese beiden Werte auf unserer Karte anzeigen. In der Kartenkomponente destrukturieren wir hier also die Requisiten und erhalten Titel und Tags Jetzt schreiben wir an die Stelle dieses Textes den Titel, und an der Stelle dieses Textes schreiben wir die Cul-Klammern und den Textpunkt Hier erhalten wir jedes Tag und auch den Index für die Übergabe an Key O-Funktion, und wir geben hier die Tag-Komponente zurück und übergeben den Schlüssel an den Index und den Tag-Namen an das Tag. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir diese Details und Tags. Als letztes wollen wir nun farbenfrohe Tags zeigen. Erinnern Sie sich, dass wir Immobilien ausgewählt haben? Auf diese Weise können wir farbenfrohe Tags hinzufügen. Lass es mich dir zeigen. Also hier übergeben wir nur ausgewählte Gleichungen an wahr, und das war's Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du jetzt, unsere Karte sieht richtig gut aus. Außerdem können wir, wenn wir einen beliebigen Requisitenwert ständig auf true übergeben wollen , nur diesen Requisitennamen schreiben. Genauso wie wir das Disable-Attribut in HTML schreiben. Speichern Sie das und sehen Sie, dass es genauso funktioniert wie zuvor. 49. Einzelne Aufgabe löschen: Bevor wir mit der Implementierung der Löschfunktion beginnen, wollen wir dieses kleine Problem in unserem Formular beheben. Wenn wir also unsere Aufgabe hinzufügen, sind diese alten Details immer noch da. Wenn Benutzer also ein weiteres Tag hinzufügen möchten, müssen sie zuerst die Tags trennen, und das ist keine gute Benutzererfahrung Wenn Sie also eine Website für einen Kunden erstellen, müssen Sie sich auch als Benutzer dieser Anwendung vorstellen und herausfinden, welche Probleme oder Fehler in Ihrer Anwendung verfügbar sind In der Komponente „Aufgabenformular“ möchten wir dieses Formular zurücksetzen, nachdem wir unsere Aufgabendaten in der Funktion „Aufgabe festlegen“ festgelegt haben. Im Grunde setzen wir dieses Aufgabendatenobjekt auf den Standardwert zurück Also schreiben wir festgelegte Aufgabendaten, und darin kopieren wir einfach dieses Standardobjekt und fügen es hier ein, und das war's Sag die Änderungen und sieh sie dir an. Senden Sie das Formular ab und sehen Sie, wie unser Text zurückgesetzt wird, aber dieses Textfeld und dieses Drop-down-Menü aber dieses Textfeld und dieses Drop-down-Menü sind immer noch identisch. Warum passiert das? Lass uns das herausfinden. Also hier, in diesem Eingabeelement, verknüpfen wir den Wert unserer Aufgabe nicht mit diesem Eingabewert. Lass mich dir zeigen, was ich meine. Wenn wir also etwas an dieser Eingabe ändern, wird dieser Eingabewert zu unserer Aufgabendatenpunkteigenschaft hinzugefügt . Aber wenn wir unsere Aufgabendaten-Punkt-Aufgabeneigenschaft ändern, dann ändert How React den Eingabewert. Dafür haben wir nichts getan. Mach dir keine Sorgen. Das ist sehr einfach. Dafür fügen wir hier einfach Wertattribut und in CL-Klammern Punkt Task Data hinzu. Außerdem übergeben wir bei dieser Auswahl das Wertattribut, das dem Punktstatus der Aufgabendaten entspricht Aus diesem Grund müssen wir eine Werteigenschaft hinzufügen , damit sie in beide Richtungen funktioniert Speichern Sie die Änderungen und schauen Sie sich das an. Schreiben Sie das Aufgabenauswahl-Tag und wählen Sie auch den Status aus und senden das Formular ab. Sehen Sie zu, wie unser Formular ordnungsgemäß zurückgesetzt wird. Lassen Sie uns nun sehen, wie wir die Aufgabe von hier aus löschen können. Also zurück zu unserer App-Komponente, hier erstellen wir eine Funktion, die die Löschfunktion übernimmt. Wie können wir nun eine bestimmte Aufgabe löschen? Hier wissen wir also, dass jedes Aufgabenelement seinen eigenen Index hat. Also übergeben wir hier den Aufgabenindex. In diesen verwenden wir nun die Filtermethode, also den Aufgabenpunkt Filter, hier erhalten wir jede Aufgabe und im zweiten Parameter Indexfehlerfunktion, und hier übergeben wir unsere Bedingung. Wir wollen nur die Aufgabe übernehmen, deren Index nicht dem Aufgabenindex entspricht. Jetzt wissen wir, dass diese Filtermethode ein neues Array zurückgibt. Also speichern wir das einfach in einer Variablen namens Neue Aufgabe. Und danach stellen wir diese neue Aufgabe in der Funktion Set Task ein. Unsere Löschfunktion ist bereit, wir müssen diese Funktion nur bei unserem Löschklick-Ereignis ausführen lassen . Wir übergeben also neue Requisiten in diese drei Komponenten der Aufgabenspalte Klicken Sie hier und halten Sie die Alt- oder Wahltaste gedrückt und klicken Sie hier und hier. Dadurch werden mehrere Cursor erzeugt, und wir schreiben hier einfach, handle delete ist gleich handle Und drücken Sie Escape. Speichern Sie diese Datei und öffnen Sie nun diese Komponente für die Aufgabenspalte Hier bekommen wir Requisiten zum Löschen von Aufgaben und übergeben sie einfach in diese Aufgabenkarten-Komponente Die Bearbeitungsverzögerung entspricht der Bearbeitung des Löschvorgangs. Außerdem übergeben wir Index gleich Index an Index, weil wir diesen Index in dieser Handle-Löschfunktion übergeben müssen Index in dieser Handle-Löschfunktion übergeben Und wir können sehen, dass wir hier verschachtelte Probs übergeben, was diese Handle-Löschfunktion ist Speichern Sie diese Datei, und jetzt erhalten wir in der Aufgabenkarten-Komponente in den Probs die Befehle der Aufgabenkarten-Komponente in den Probs die Befehle Löschen und Indexieren In dieser DU übergeben wir das Ereignis, das auf Klick aufgerufen wird. Und hier übergeben wir die Handle-It-Funktion. Jetzt müssen wir den Indexwert in dieser Handle-It-Funktion übergeben . Andernfalls funktioniert die Funktionalität unserer Website nicht. Wie können wir das also tun? Richtig, wir übergeben hier einfach die Pfeilfunktion, speichern die Änderungen und schauen uns das an. Klicken Sie auf das Löschen-Symbol und Sie können sehen, wie reibungslos die Aufgabe verlaufen ist. So einfach ist es also, die Löschfunktion zu implementieren. Nun, hier haben Sie vielleicht eine Frage warum wir die Löschfunktion in unserer App-Komponente erstellen. Wir können das in der Task-Komponente erstellen. Ja, wir können auch die Funktion zum Löschen von Griffen in der Aufgabenkartenkomponente erstellen . Aber hier können Sie sehen diese Funktion die Delit-Funktion benötigt, das Task-Datum benötigt und auch die Task-Funktion festlegt Wir erstellen die Funktion zum Löschen von Handles in der Taskkartenkomponente, dann müssen wir diese Aufgabe übergeben und die Aufgabe als Requisiten festlegen Wenn wir in einer App-Komponente ein Handle-Delat erstellen, die beide Variablen hat, müssen wir nur die Handle-t-Funktion als Requisiten übergeben dann müssen wir diese Aufgabe übergeben und die Aufgabe als Requisiten festlegen. Wenn wir in einer App-Komponente ein Handle-Delat erstellen, die beide Variablen hat, müssen wir nur die Handle-t-Funktion als Requisiten übergeben. Das ist also der Grund. 50. Grundlagen der VerwendungEffekthaken: Lassen Sie uns zunächst verstehen, was Use Effect ist. Nutzungseffekt wird verwendet , um Nebenwirkungen in unserer Komponente hervorzurufen. Was sind also Nebenwirkungen? Nebenwirkungen sind Handlungen , die mit der Außenwelt ausgeführt werden. Wir haben eine Nebenwirkung , wenn wir unsere Reaktionskomponenten verlassen müssen , um etwas zu tun. beispielsweise Daten von der API abrufen, wird die Kuppel, in der wir ein Dokument oder ein Fensterobjekt oder eine Timer-Funktion wie „ Timeout festlegen“ oder „Intervall festlegen“ verwenden, direkt aktualisiert wir ein Dokument oder ein Fensterobjekt oder eine Timer-Funktion wie „ Timeout festlegen“ oder „Intervall festlegen“ verwenden Timer-Funktion wie „ Timeout festlegen“ oder „Intervall festlegen Dies sind die häufigsten Nebenwirkungen bei React. Um irgendwelche Nebenwirkungen zu erzielen, müssen wir also den Use Effect Hook verwenden. Mach dir keine Sorgen über diese Theorie. Sagen wir das praktisch. Um also einen beliebigen Hook zu verwenden, müssen wir zuerst diesen Hook aus der React-Bibliothek eingeben. Also schreiben wir hier use effect, und jetzt können wir es in der Funktionskomponente verwenden. Wir nennen uns Effect Hook, was zwei Argumente akzeptiert. Erstens die Callback-Funktion, eine Funktion, in die wir unsere Nebeneffektlogik schreiben Diese Funktion wird immer dann ausgeführt , wenn sich an dieser gesamten Komponente etwas ändert Und das zweite Argument sind Abhängigkeiten , ein Array von Variablen, und es ist ein optionales Argument. Einfach ausgedrückt ist das erste Argument, was ausgeführt werden soll, und das zweite, wann ausgeführt werden soll. Use-Effekt wird bei jedem Rendern ausgeführt, d. h. wenn sich die Anzahl ändert oder wenn ein Rendervorgang stattfindet, wodurch ein weiterer Effekt ausgelöst wird. Aber wir können das durch Abhängigkeiten kontrollieren. Wenn Sie mit Klassenkomponenten vertraut sind, ist der Nutzungseffekt die Kombination aus Komponente wurde eingehängt, Komponente wurde aktualisiert und Komponente wurde unmountet Es gibt drei Varianten des Nutzungseffekts. Mach dir keine Sorgen. Wir werden jede Variante im nächsten Abschnitt im Detail sehen. Aber lassen Sie mich es Ihnen derzeit ganz kurz sagen. Verwenden Sie also zunächst den Effekt ohne Abhängigkeiten. Wenn wir also keine Abhängigkeiten übergeben, wird diese Callback-Funktion jedes Mal ausgeführt , wenn sich etwas in unserer Komponente ändert Zweitens verwenden Sie den Effekt mit einem leeren Array. Wenn wir also nur ein leeres Array übergeben, wird diese Callback-Funktion nur einmal ausgeführt wenn unsere Komponenten für Zeit übergeben werden Und drittens verwenden Sie den Effekt mit Variablen. Wenn wir zum Beispiel eine Aufgabenvariable übergeben, also wenn sich dieser Aufgabenstatus ändert, wird diese Callback-Funktion nur dann ausgeführt, und genau das wollen wir hier tun. In diese Callback-Funktion schreiben wir ein Punktgruppenelement für den lokalen Speicher Beim ersten Parameter übergeben wir nun unseren Variablennamen, der Task ist Und beim zweiten Parameter übergeben wir unser Task-Array. Aber hier müssen wir dieses Array in das Zeichenkettenformat konvertieren , da der lokale Speicher Zeichenketten nur als Werte speichern kann. Wenn wir ein Array direkt als Wert speichern, wird es automatisch in eine Zeichenfolge umgewandelt, aber dann können wir nicht auf diesen Buchstaben als Array zugreifen. Also verwenden wir hier die JSON-Punktzeichenfolge-UPI-Methode. Und übergeben Sie hier unser Task-Array. Diese Funktion konvertiert auch unser Array in das String-Format. Der einzige Unterschied besteht darin , dass wir diese Zeichenfolge erneut in ein Array konvertieren und verwenden können , die Änderungen speichern und einen Blick darauf werfen, eine Aufgabe einreichen und wir bekommen die Aufgabe hier. Lassen Sie uns nun sehen, ob es auch im lokalen Speicher gespeichert wird oder nicht. Öffnen Sie den lokalen Speicher und hier sehen wir unsere neue Aufgabe. Wenn wir jetzt eine weitere Aufgabe hinzufügen, sehen Sie, wie unser lokaler Speicher aktualisiert wird. Wie wir wissen, speichern wir unser Array jetzt in einer Zeichenfolge. Wenn wir also dieses Array erhalten, müssen wir es wieder in ein Array konvertieren. Also zurück zu unserer App-Komponente und an der Stelle dieses leeren Arrays übergeben wir JSON-Punktpars und darin übergeben wir diesen alten Aufgabenwert Diese Funktion konvertiert unsere Zeichenfolge in ein Array. Speichern Sie die Änderungen und aktualisieren Sie die Seite. Siehst du, wir verlieren unsere Aufgabe nicht, löschen eine Aufgabe und versuchen auch, die Seite zu aktualisieren. Siehst du, wir bekommen auch eine aktualisierte Aufgabe, sodass sie ordnungsgemäß funktioniert. Nun, hier ist ein kleiner Bug. Öffnen Sie den lokalen Speicher, und wenn wir dieses Task-Array von hier löschen , aktualisieren wir danach diese Seite. Sehen Sie, hier erhalten wir diesen Fehler , weil wir die Aufgabe im lokalen Speicher nicht finden können. Um das zu lösen, übergeben wir hier unseren Operator. Hier leeres Array. Wenn dieser Ausdruck Null zurückgibt, verwendet er ein leeres Array als Standardwert. Speichern Sie die Ringe und schauen Sie sich das an. Jetzt funktioniert unsere Anwendung gut. 51. Benutzerdefinierte Schriftarten hinzufügen: Jetzt ist unser Projekt fast fertig. Ich füge hier eine Aufgabe für die Demo hinzu. Jetzt müssen wir nur noch unsere Schriftstile für unsere Anwendung ändern . Es gibt also zwei beliebteste Möglichkeiten , Schriftarten in der React-Anwendung hinzuzufügen. Erstens haben wir eine Offline-Schriftdatei in unserem System und können CD und Link auch zum Hinzufügen von Schriftarten verwenden. Sehen wir uns den einfachsten Weg an, nämlich die Verwendung von CD und Link. Wir werden uns später in diesem Kurs mit der Offline-Methode befassen. Mach dir darüber keine Sorgen. In diesem Projekt werden wir also die Montserrat-Schrift hinzufügen. Gehen Sie also zum Browser, öffnen Sie einen neuen Tab und suchen Sie, sobald Sie bei Google Font sind Öffne diesen Beitrags-Link. Jetzt bekommen wir auf dieser Website viele Schriftarten kostenlos. Außerdem haben wir eine andere Website, Font Squirrel. Sie können verwenden, was Sie wollen. Es hängt völlig von dir ab. Hier können wir verschiedene Schriftstile auswählen , die wir verwenden möchten. Wählen Sie also 400, 500, 600, 708 hundert. In diesem Abschnitt haben wir nun die Möglichkeit, einfach Abschnitt importieren auszuwählen und diese Importanweisung zu kopieren diese Importanweisung In unsere CSS-Datei mit dem Indexpunkt oben fügen wir diese CD und den Link Gut. Kehren Sie jetzt wieder zum Browser zurück und scrollen Sie nach unten und kopieren Sie dieses CSS für diese Schriftfamilie. Und in unserer CSS-Datei mit Indexpunkt fügen wir hier Stile für den Hauptteil hinzu, und darin fügen wir unsere Schriftfamilie ein. Speichern Sie diese Datei und sehen Sie, wir bekommen unsere Stile und Schriften. Jetzt sieht unsere Anwendung wirklich toll aus. 52. Projekt 01 abschließen: Herzlichen Glückwunsch. Sie haben Ihr erstes Projekt in React erfolgreich abgeschlossen. Ich weiß, dass Sie viel daraus lernen, und Sie können auch sehen, dass es nicht wirklich schwer ist , eine Anwendung in React zu erstellen. Es ist wirklich einfach. Sie müssen die Funktionen und Merkmale von React erlernen . Sie sich keine Sorgen, alle Konzepte auf einmal zu lernen , denn das wird Sie überfordern Lernen Sie also einige Funktionen und üben Sie sie, lernen Sie dann wieder einige Funktionen und üben Sie sie erneut Übung ist der Schlüssel zum Erfolg, und darauf sollten wir uns konzentrieren. Sie möchten dieses komplette Projekt noch einmal üben, dann können Sie das tun. Auf diese Weise können Sie mehr über React erfahren, und wenn Sie sich wohlfühlen, können Sie diesen Kurs fortsetzen. Es liegt ganz bei dir. Verschiedene Menschen mögen unterschiedliche Herangehensweisen. Vielen Dank, dass Sie dieses Projekt aufgebaut haben. Ich weiß, dass Ihr Vertrauen in React gestiegen ist Wir sehen uns im nächsten Abschnitt. 53. Abschnitt 06 Projekt 02 – MovieManiac: Willkommen im sechsten Abschnitt des ultimativen React-Kurses. In diesem Abschnitt werden wir auch mit dem Aufbau unseres Projekts beginnen, nämlich dem Film Maniac Sie können sehen, wie cool es aussieht und die Filmdetails stammen von einer anderen Website Wir können diese Filme auch nach ihrer Bewertung filtern und sie danach auch nach Veröffentlichungsdatum oder Bewertung auf- und absteigend sortieren Veröffentlichungsdatum oder Bewertung auf- und absteigend Das Ziel dieses Projekts ist es, EPI-Anrufe, Filter - und Sortierfunktionen zu erlernen , die in vielen realen Anwendungen verwendet werden weiß, dass Sie von diesem Projekt begeistert sind, also lassen Sie uns in dieses Projekt eintauchen 54. Projekt und Layout-Stil einrichten: Beginnen wir mit der Erstellung des neuen Projekts. Öffnen Sie also Ihren React-Projektordner und öffnen Sie die Befehlszeile oder das Terminal in diesem Ordner. Können Sie mir jetzt sagen, mit welchem Befehl wir eine neue Anwendung erstellen werden? Schreiben Sie NPM, erstellen Sie White, Aerate, Latest und drücken Jetzt schreiben wir hier unseren Projektnamen Movie Maniac und drücken die Eingabetaste Wählen Sie nun das Framework aus, das React ist, und wählen Sie danach die Variante aus, bei der es sich um JavaScript handelt , und drücken Sie die Eingabetaste Jetzt müssen wir nur noch diese drei Befehle ausführen. Gehen Sie also zunächst in diesen Ordner mit der CD und drücken Sie die Tabulatortaste Wählen Sie den Movie Maniac-Ordner Lassen Sie uns nun alle Abhängigkeiten installieren. Also NPM installieren und Enter drücken. Es wird einige Zeit dauern. Lassen Sie uns bis dahin unsere Bewerbung planen. Zuallererst können wir unser Anwendungslayout in zwei Abschnitte unterteilen . Der erste ist Nevar und der zweite ist diese Filmliste. Definieren wir nun die Komponenten, wir für diese Anwendung erstellen können Eines möchte ich klarstellen: Dieser Planungsprozess ist kein absoluter Plan. Es ist nur ein schneller Ausgangspunkt. Wir können je nach Bedarf Komponenten hinzufügen oder entfernen. Also können wir zuerst diese Naba-Komponente trennen. Danach können wir eine Komponente für diese Filmkarte erstellen. Danach haben wir in diesem Display-Bereich drei weitere Bereiche, nämlich den beliebtesten Bereich mit den besten Bewertungen und den nächsten. Sie können jedoch sehen, dass die Grundstruktur aller Abschnitte dieselbe ist. Alle haben Überschriften, Filter, Kurzbefehle und eine Liste von Filmkarten Wir können also auch wiederverwendbare Komponenten dafür erstellen, und ich denke, das ist alles, was wir brauchen Lassen Sie uns nun überprüfen, ob unsere Abhängigkeiten installiert sind oder nicht. Und ja, es ist installiert. Lassen Sie uns dieses Projekt im VS-Code per Codespace-Punkt öffnen und die Eingabetaste drücken. Gut. Jetzt können wir dieses Terminal schließen. Wir brauchen es nicht. Außerdem schließen wir unseren Ordner. Stellen wir nun sicher, dass unser Projekt funktioniert oder nicht. Öffnen Sie also das Terminal mit Control plus Batak oder Command plus Batak und schreiben Sie NPM, führen Sie DO aus und Eine weitere Sache, wenn Sie diese Anwendung beenden möchten, drücken Sie dazu Strg+C oder Befehl+C Halten Sie nun die Strg- oder Befehlstaste gedrückt und klicken Sie auf diese lokale Host-URL. Und es funktioniert. Lassen Sie uns nun das grundlegende Layout für unsere Anwendung erstellen. Öffnen Sie also die App Dot JSX-Datei, und wir entfernen den gesamten Code von hier und erstellen eine funktionale Komponente mit RAF CE Zuallererst geben wir diesem Klassennamen, der App entspricht. Und in diesem Du wollen wir zuerst NaBr erstellen, wir schreiben hier den Naw-Tag und geben ihm einen Klassennamen Na Bar, hier schreiben wir Danach erstellen wir unseren Hauptteil unserer Anwendung, und in diesen schreiben wir einfach Speichern Sie diese und lassen Sie uns sehen, was wir bekommen. Siehst du, hier haben wir beide Abschnitte. Lassen Sie uns nun den Stil für jeden von ihnen festlegen. Aber vorher müssen wir einige grundlegende Stile entfernen. In der CSS-Datei mit Indexpunkten entfernen wir alle Stile, und oben schreiben wir Stern-Calibackets und schreiben Null C, es wird Margin Null schreiben. Danach ist B Null, und wir erhalten das Padding Null und die Größe der Box entspricht der Rahmenbox Das sind die Tricks, die ich bei Arbeit in mehreren Projekten gelernt habe Aber ich wünschte, ich hätte die Tricks am Anfang, und deshalb gebe ich dir diese Tricks schon früh. Danach fügen wir Stile für den Körper und ändern unsere Hintergrundfarbe auf 101010 Und Farbe zu FFF, was weiß ist. Speichern Sie diese Datei. Jetzt fügen wir CSS für unser Layout hinzu. In unserer App-Dot-CSS-Datei entfernen wir also alle Stile und Apps und innerhalb dieser eckigen Klammern schreiben wir die Zeilen der Vorlage Display to Grid auf 80 Pixel und automatisch Die Höhe des ersten Abschnitts beträgt also 80% und die Höhe des zweiten Abschnitts ist automatisch aktiviert Das weißt du schon richtig, und das ist alles, was wir für das Layout benötigen. Speichern Sie diese Datei und schauen Sie sich das an. Wir verstehen unsere tollen Styles nicht. Kannst du mir sagen , was der Grund ist? Stimmt? Wir haben die App-Dot-CSS-Datei nicht in unsere App-Komponente importiert, und genau das haben viele Entwickler vergessen. Also schreiben wir Import period slash app dot css, speichern die Änderungen und schauen uns das an Siehst du, wir verstehen unsere Styles. In der nächsten Lektion werden wir nun unseren Navbar-Bereich erstellen 55. Benutzerdefinierte Schriftarten hinzufügen: Lassen Sie uns nun die Schrift für diese Anwendung hinzufügen. Wie ich Ihnen bereits sagte, haben wir zwei Möglichkeiten, Schriftarten in unsere React-Anwendung einzufügen. Im ersten Projekt haben wir gesehen, wie man mit CDN Link eine Schrift hinzufügt. Sehen wir uns nun an, wie man Offline-Schriften hinzufügt. Also werden wir wieder MonstFont verwenden , weil das meine Lieblingsschrift ist Öffnen Sie also in unserem Browser einen neuen Tab, und wir suchen nach Monsaet Google Fonts und öffnen Jetzt haben wir hier oben die Option Familie herunterladen Klicken Sie darauf und sehen Sie, wie der Download gestartet wurde. Lassen Sie uns das im Download-Ordner öffnen und es einfach von hier aus entpacken Jetzt öffnen wir MonsttFolder. Und hier haben wir diese Art von Ordnerstruktur. In diesem statischen Ordner haben wir alle Schriftstärken einzeln. Nun zurück zu diesem Ordner, und hier haben wir die beiden vollständigen Schriftdateien , die alle Schriftstärken enthalten. Hier wollen wir keine Kursivschrift, wir wollen normale Schrift. Aber die Größe dieser Schrift ist ziemlich groß. Wir können sehen, dass es 218 KV ist, was der Größe für Schriftdateien entspricht. Sie können diese Schriftdatei in eine kleine Schriftdatei konvertieren . Im Browser unter Neuer Registerkarte suchen wir also nach TTF , unserem aktuellen Dateiformat, nach W FF Two , der beliebtesten Schriftdatei für Webbrowser Öffnen Sie diese Cloud Convert-Website und hier müssen wir unsere Schriftart auswählen Wählen Sie die Monster At-Schriftart, öffnen Sie sie und klicken Sie auf C Convert. Es wird wenig Zeit in Anspruch nehmen. Und klicken Sie auf Herunterladen. In unserem Download-Ordner können wir jetzt sehen, dass die Dateigröße auf 82,8 KB reduziert wurde, was einer Reduzierung von fast 60 bis 70% entspricht Hier benennen wir diese Datei in Monsratt WFF um. Lassen Sie uns nun überprüfen, ob dieses Telefonformat für alle Browser funktioniert oder Gehen Sie also zu caniuse.com und oben suchen wir nach WFF Und siehe da, es funktioniert in fast allen Browsern. Genauer gesagt unterstützen 97% der Browser diese Schriftart. Also zurück zum VS-Code, und in unserem Assets-Ordner erstellen wir einen neuen Ordner namens Fonts, und in diesem Ordner wir diese Schrift einfach per Drag & Drop. Lassen Sie uns nun sehen, wie wir diese Schriftart in unserer Anwendung anwenden können . Öffnen Sie die CSS-Datei mit dem Indexpunkt. Hier oben definieren wir unsere Schrift. Schreiben Sie also einfach in der Schriftphase und wählen Sie diesen automatischen Vorschlag aus. Jetzt haben wir hier zwei Eigenschaften. Die erste ist die Schriftfamilie, und hier übergeben wir unseren Schriftnamen, den wir verwenden möchten. Also können wir hier importierte Schrift oder so schreiben. Der Einfachheit halber schreibe ich einfach Montserrat. In der URL müssen wir den Pfad unserer Schriftdatei angeben. In Doppelcodes schreiben wir also Schrägstrich, wir haben Vermögenswerte Darin haben wir Schriften, und hier haben wir unsere Schrift Jetzt fügen wir in unserem Körper die Schriftfamilie zu Monseret Sanserif Denken Sie daran, welchen Namen wir auch immer in dieser Schriftfamilie angeben, denselben Namen müssen wir Andernfalls wird es nicht funktionieren. Speichern Sie die Gene und schauen Sie sich das an. Siehst du, wir haben die Antwort bei Font. So fügen wir unserer Anwendung Offline-Schriften hinzu. Aber meiner bescheidenen Meinung nach, wenn möglich, versuchen Sie, den CDN-Link zum Hinzufügen von Schriftarten zu verwenden Ich zeige Ihnen das nur, weil einige Kunden ihre eigene Schriftart für ihr Projekt hinzufügen möchten ihre eigene Schriftart für ihr Projekt Und so können Sie diese Schriften hinzufügen. 56. Navbar-Komponente erstellen: Lassen Sie uns also unseren Navbar-Bereich erstellen. Nun, diese Art von N-Bar ist in vielen Anwendungen sehr verbreitet, und wir möchten auch nicht dass unsere App-Komponente kompliziert So können wir unseren Nabar in der separaten Komponente definieren. In unserem Quellordner erstellen wir also einen neuen Ordner namens components, und darin erstellen wir einen weiteren Ordner namens Nabar In diesem NaBr-Ordner erstellen wir eine Navbar-JSX-Datei Außerdem erstellen wir eine Navbar-Dot-CSS-Datei. Lassen Sie uns nun eine Boilerplate in unserer Nabar-Komponente erstellen und oben importieren wir die aktuelle Navbar-Punkt-CSS-Datei und speichern diese Datei Nun zurück zur F-Komponente, wir haben dieses Nab-Tag und an dessen Stelle fügen wir unsere NaBr-Komponente hinzu und sehen, fügen wir unsere NaBr-Komponente hinzu und Speichern Sie diese Datei jetzt wieder in unserer Komponente an der Stelle dieser DU Wir fügen unser NAO-Tag Fügen wir nun alle Elemente für unseren Navar hinzu. Also fügen wir zunächst ein H-One-Tag und schreiben hier unseren Anwendungsnamen , der Movie Maniac lautet nun drei Links hinzuzufügen, erstellen wir ein Du und geben ihm einen Klassennamen, NaBr, und unterstreichen Lassen Sie mich Ihnen die Abkürzung zeigen, um das zu erstellen. Schreiben Sie Punkt und hier fügen wir unseren Klassennamen NaBr Underscore Inks und Head Tab Siehst du, wir bekommen DV mit diesem Klassennamen. Das heißt T, was uns hilft, zuerst Code zu schreiben. In diesen Nebar-Links erstellen wir nun ein Anker-Tag, und wir schreiben hier beliebt. Danach wollen wir dafür Imoge hinzufügen. Also in unserem Ressourcenordner , den Sie zuvor heruntergeladen haben Und darin haben wir Projekt für Ordner, und darin haben wir den Assets-Ordner. Ziehen Sie nun all diese Bilder in unseren Assets-Ordner. Gut. Jetzt importieren wir in unserer Number-Komponente oben Feuer von hier aus zwei Ordner-Up-Sets und Fire Dot PNG. Jetzt importieren wir zwei weitere Bilder für die am besten bewerteten und kommenden Links. Duplizieren Sie diesen Link noch zweimal und zuerst ändern wir dieses Feuer Stern und das Bild in leuchtendes Sternpunkt-PNG als letztes, importieren Party aus Partyphase Punkt-PNG diese Bilder hinzuzufügen, fügen wir ein Bild-Tag hinzu und übergeben hier Fire und in Alt Fire und in Alt Fire Um diese Bilder hinzuzufügen, fügen wir ein Bild-Tag hinzu und übergeben hier Fire und in Alt Fire Imoge sowie den Klassennamen an NabarUnderscore Imoge Lassen Sie uns diesen Anker-Tag nun noch zweimal duplizieren und wir ändern den Linknamen in „ Am besten bewertet“ und das Bild in „Stern“ und „lt“ in „Stern“ und „lt“ in „Stern“. Der letzte Link wird in „Demnächst“ und „Bild“ in „Party “ und das Bild Speichern Sie die Änderungen und wir erhalten den Fehler hier. Wir können sehen, dass ein Pfad nicht verfügbar ist. Also hier in unserer Abschiedsphase müssen wir die Schreibweise korrigieren Speichern Sie die Änderungen und sehen Sie, wir bekommen unsere Elemente Lassen Sie uns nun Stile für sie hinzufügen. Zuallererst trennen wir diesen Anwendungsnamen und diese Links. In der CSS-Datei Navbar Dot schreiben wir also Navbar und in geschweiften Klammern fügen wir zwei Display-Flags hinzu Positionieren Sie die Elemente in der Mitte und richten Sie den Inhalt so aus, dass der Abstand zwischen dem Abstand Null für oben und unten und 30 Pixel für links und Und von unten nach unten bis zu einem Pixel, Solid hat E sechs, E sechs, E Speichern Sie das und sehen Sie, dass sie getrennt sind. Nach diesem NaBr hatten wir eine Nab-Winkelklammer, H eine, und in den Gully-Klammern eine Größe bis 30 Pixel und Farbe zwei hat Danach fügen wir Stile für unsere NGA-Tags hinzu. Punkt-NaBr-Unterstrich Links, Winkel, V-Ziel, A und innerhalb der eckigen Klammern, bei Anzeige auf Flaggen, Elemente zentriert ausrichten, Schriftgröße auf 20 Pixel, Schriftstärke auf 500, Farbe auf Weiß, Textdekoration auf keine und Abstände auf und 15 Pixel Sag diese Nett. Das sieht gut aus. Lass uns das Imoge klein machen. Also fügen wir hier Punkt, nabarUnderscore, Imo g hinzu und in die Coli-Klammern fügen wir Breite zu 25 Pixeln, Höhe zu 25 Pixeln und den linken Rand zu sieben Pixeln und den linken Rand Speichern Sie die Änderungen und schauen Sie sich das an. Es sieht gut aus, aber wir bekommen unsere Links nicht hintereinander. Schauen wir uns das an und sehen wir hier, dass wir vergessen haben, Display-Flags für Nevar-Links hinzuzufügen, die fällig In unserer CSS-Datei fügen wir hier punktuelle NBR-Underscore-Links hinzu, und in Gulli-Klammern schreiben wir Display in Flaggen und richten Elemente Speichern Sie die Änderungen und sehen Sie sich das an. Sehen Sie jetzt, unser Nabar sieht perfekt aus. Ich weiß, dass ich beim SDML- und CSS-Teil etwas schneller vorgehen werde , weil Sie das bereits wissen 57. MovieList-Komponente erstellen: Lassen Sie uns nun unsere Filmlisten-Komponente erstellen. Also erstellen wir einen neuen Ordner im Komponentenordner namens Movie List. Und in diesem Ordner erstellen wir eine neue Datei namens movilest dot CSS und auch movilest dot und auch movilest Lassen Sie uns nun unseren Standardcode von RAFC hinzufügen und oben importieren wir die Movist-Dot-CSS-Datei mit Periodenstrichstrich wir Darüber machen wir uns also keine Sorgen. Jetzt fügen wir an der Stelle dieser DU Abschnitt hinzu und wir fügen den Klassennamen und die Liste der Filmunterstriche hinzu In diesem Abschnitt haben wir nun zwei Teile. Einer ist für unsere Kopfzeile, die die Überschrift des letzten Filters und die Sortierung enthält , und der zweite Teil ist die Filmautoliste. Wir fügen ein Header-Tag hinzu und geben ihm einen Klassennamen, den Header der Filmliste. Darin fügen wir zuerst das Tag hinzu und fügen den Klassennamen und die Überschrift der Filmliste hinzu. Jetzt fügen wir unseren Titel hinzu, der sehr beliebt ist. Und danach wollen wir Imoge hinzufügen. Also fügen wir ein Image-Tag hinzu und in der Quelle übergeben wir fire Alt, um Imoge auszulösen, und übergeben den Klassennamen an Navar, unterstreichen Imog , den wir in unserer Navbar-Komponente hinzugefügt haben. Jetzt müssen wir dieses Fire-Imoge oben importieren. Feuer importieren von hier aus gehen wir zwei Ordner hoch Assets und hier bekommen wir Fire Dot PNG Fügen wir D für unseren Filter und Shortting hinzu und geben ihm einen Klassennamen MovistFSFS für Filter und Kurzschlüsse. Jetzt möchte ich zuerst ein ungeordnetes Element hinzufügen, und darin werden wir ein Filterelement Also schreiben wir Al Dot MV, Unterstrichfilter, spitze Klammer, Punkt, Film-Unterstrichfilter, Unterstrichelement, multiplizieren mit drei Siehst du, hier bekommen wir diesen Code. Das ist die Macht von Emet. Jetzt kommen wir hier an acht plus Stern, sieben plus Stern und sechs plus Stern vorbei sieben plus Stern und sechs plus Stern Jetzt, nach dieser Liste, müssen wir zwei Dropdown-Felder hinzufügen. Also fügen wir Select Dot MV Underscore-Shorting hinzu. Und darin wollen wir drei Optionen haben. Bei der ersten Option übergeben wir nun die Sortierung nach, was Standard, Datierung und Bewertung ist. Jetzt können wir dieses Auswahl-Tag einfach duplizieren, und hier wollen wir nur zwei Optionen. Also können wir diese eine Option entfernen, und hier schreiben wir aufsteigend und zuletzt absteigend Speichern Sie die Änderungen und wir erhalten nichts, weil wir vergessen haben, unserer App-Komponente eine Filmlistenkomponente hinzuzufügen unserer App-Komponente eine Filmlistenkomponente Also fügen wir in der App-Komponente an der Stelle dieses Hauptinhalts die Komponente Filmliste hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Elemente. Lassen Sie uns nun Stile für sie hinzufügen. In der CSS-Datei mit Move-List-Punkten fügen wir also eine Punktfilm-Unterstrichliste Und in den geschweiften Klammern fügen wir einen Abstand von zehn Pixeln für oben und unten und 30 Pixel für links und rechts Danach setzen wir die Anzeige auf Flaggen, die Alan-Elemente auf die Mitte und die Ausrichtung des Inhalts auf den Abstand dazwischen, des Inhalts auf den Abstand dazwischen weil wir die Überschrift durch Filter und Sortierung trennen möchten Überschrift durch Filter und Danach fügen wir den unteren Rand auf fünf Pixel hinzu. Jetzt fügen wir Stile für unsere Überschrift hinzu, also Punkt Movist-Überschrift Und in den Clipaketen fügen wir zwei Flaggen, Zeilenelemente zur Mitte und eine Schriftgröße von 226 Farbe zwei hat FFE-400-Sprüche und wir verstehen hier nicht unseren Stil Also lass uns das überprüfen. In unserer Filmlistenkomponente können wir hier sehen, dass wir einen Stil für die Kopfzeile der Filmliste hinzufügen müssen. In unserer CSS-Datei ändern wir diese Filmlistenklasse Filmlisten-Header-Klasse. Sagen Sie die Änderungen und sehen Sie, wir trennen diese beiden Teile. Nun, hier weiß ich, dass die Schriftgröße etwas klein ist. Sie können sie nach Ihren Bedürfnissen erhöhen. Lassen Sie uns nun die Stile für diesen Filter und das Dropdownmenü festlegen. Also zurück zum VS-Code, und wir fügen hier hinzu, Film ist FS. Und in den Cali-Klammern fügen wir Anzeige hinzu, um Zeilenelemente in der Mitte zu kennzeichnen. Nun, hier ist eine Sache Wir wiederholen diese beiden Zeilen in unserer Anwendung viele Male. Sehen Sie hier, hier und auch die CSS-Datei, die wir in Nabar verwendet haben. Lassen Sie uns also eine separate Klasse für diese beiden Zeilen erstellen. Also schneide diese beiden Zeilen aus und öffne die Indexpunkt-CSS-Datei. Am Ende fügen wir die neue Klasse Align underscore center hinzu und fügen darin unsere Stile Wenn wir nun diese beiden Stile hinzufügen möchten, können wir einfach diese Align Center-Klasse zu diesem Element hinzufügen , und so wird Telvin CS erstellt Speichern Sie diese Datei, und in der CSS-Datei mit Filmlistenpunkten müssen wir die Align Center-Klasse für diese beiden Elemente hinzufügen Also entfernen wir diese beiden Zeilen von hier. Und entferne auch diesen Klassenstil. Speichere das. Und in der Filmlistenkomponente fügen wir zuerst Align Center vor Header und Align Center vor dieser Überschrift hinzu. Außerdem für diesen Tag und auch vor diesem Film den Unterstrichfilter Speichern Sie die Änderungen, und das funktioniert einwandfrei. Nun, zurück zur CSS-Datei mit Filmliste Wir fügen Nan Punktfilm, Filter, Listenstil 16 Pixel eine Größe hinzu. Jetzt fügen wir einen Punktfilm und ein Filterelement hinzu. Und in der Kalibration fügen wir eine Polsterung von fünf Pixeln und zehn Pixeln und den Cursor zum Zeiger Danach fügen wir Stil für unser Dropdown hinzu. Also Punkt-Filmkürzung und innerhalb dieser eckigen Klammern fügen wir Rahmen zu Nonne, Umriss zu Alsan, Rahmenradius zu fünf Pixeln Schriftgröße zu 16 Pixeln Schriftstärke zu 500, Schriftfamilie zu vererben, sodass es MonsetFont in unserer Drop-down-Liste verwenden kann Danach erhöhen wir die Höhe auf 30 Pixel, addieren Null und fünf Pixel und den Rand auf Null und zehn Pixel Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir verstehen unsere Styles. Endlich möchte ich nur diesen ausgewählten Filter anzeigen, damit der Benutzer sehen kann, welchen Filter er ausgewählt hat. Also fügen wir in der mobilisierten Komponente in diesem Listenelement eine weitere Klasse hinzu, in diesem Listenelement eine weitere Klasse hinzu, die als aktiv bezeichnet wird Wir werden diese aktive Klasse gegen einen aktiven Filter austauschen. Speichern Sie diese Datei, und in der CSS-Datei hinter diesem Filmfilter IAM fügen wir hinter diesem Filmfilter IAM den Schiebefilter m Punkt Aktive geschweifte Klammern und innerhalb dieses Boer-Volumenkörpers unten zu einem Pixel hat E sechs, E sechs, E sechs und die Schriftstärke 500 Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, das sieht wunderschön aus. Jetzt, nach diesem Header-Tag, erstellen wir ein weiteres Duo mit Klassennamen und Filmunterstrichkarten In diesem Duo werden wir all unsere Filmkarten hinzufügen. In der nächsten Lektion werden wir also diese Filmkarten-Komponente erstellen. 58. MovieCard-Komponente erstellen: Lassen Sie uns nun unsere letzte Komponente erstellen , die die Filmkartenkomponente ist Also erstellen wir im Ordner mit der Filmliste eine neue Datei namens movecard dot CSS und wir erstellen eine weitere Datei namens movicardt Der Grund, warum wir diese Komponente in MovilistFolder erstellen, ist, dass die Filmkarte Teil der Movieist-Komponente dass die Filmkarte Sie können dafür auch einen separaten Ordner erstellen. Es liegt ganz bei dir. Lassen Sie uns nun Standardcode hinzufügen, und oben importieren wir einfach die CSS-Datei mit Punktstrichen, Schrägstrich und Movecard Nett. In dieser Komponente geben wir das Anker-Tag zurück denn wenn jemand auf die Filmkarte klickt, öffnen wir diesen Link und geben ihm den Klassennamen der Filmunterstrichkarte In diesem Anker-Tag möchten wir jetzt unser Filmplakat hinzufügen Fügen Sie also das Image-Tag hinzu und fügen Sie dem Filmunterstrich-Poster einen Klassennamen Lassen Sie uns jetzt ein Dummy-Poster für temporäre Zwecke finden. Öffnen Sie also in unserem Browser eine neue Registerkarte und suchen Sie nach einem Filmplakatbild Wählen Sie eines der Bilder aus und klicken rechten Maustaste auf das Bild und kopieren Sie die Bildadresse nun zum VS-Code zurück und fügen Sie diesen Link in die Quelle Alt fügen wir das Filmplakat hinzu. Speichern Sie die Änderungen, und wir erhalten wieder nichts weil wir erneut vergessen haben, diese Filmkartenkomponente zu unserer Filmlistenkomponente hinzuzufügen . Also fügen wir beim Verschieben der Komponente „Liste “ hier die Komponente „ Filmkarte“ hinzu. Speichern Sie die Änderungen und C, wir erhalten unseren Beitrag. nun in unserer Anwendung Wenn wir nun in unserer Anwendung mit der Maus auf die Filmkarte zeigen, möchten wir einige Details zum Film wie Name, Veröffentlichungsdatum, Bewertung und kurze Beschreibung Nach diesem Poster fügen wir also eine DU mit Klassennamen und den Details zum Filmunterstrich Danach fügen wir drei Tags pro Filmnamen hinzu und fügen den Klassennamen hinzu, um die Unterstrich-Details zu verschieben, die Unterstrich-Überschrift Und in diese schreiben wir den Filmnamen. Danach fügen wir einen Tag mit dem Klassennamen, Datum des Filmunterstrichs und der Unterstrichrate hinzu . Und darin fügen wir zuerst einen Absatz hinzu, in dem wir das Veröffentlichungsdatum des Films angeben, und danach einen weiteren Absatz zur Anzeige Auf der rechten Seite dieser Bewertung möchten wir nun das Sternsymbol anzeigen. Also fügen wir das Bild-Tag, die Quelle zum Stern Alt-Taste zum Bewertungssymbol hinzu und geben ihm einen Klassennamen, um den Kartenunterstrich Imoge zu unterstreichen Jetzt müssen wir dieses Sternsymbol importieren. Oben importieren wir den Stern von. Hier gehen wir zu den Ordnern nach oben, Assets, Schrägstrich, Stern, Punkt, PNG. Gut. Jetzt wollen wir am Ende eine kleine Beschreibung anzeigen. Nach diesem dU fügen wir ein weiteres Absatz-Tag hinzu und geben ihm einen Klassennamen für den Film unter schottischer Beschreibung Darin fügen wir Dummi-Text, BLR 15, BLR 15 Dann ja und schau mal. Siehst du, wir haben unsere hässlichen Elemente. In der nächsten Lektion werden wir sie also schön machen. 59. Styling der MovieCard-Komponente: Lassen Sie uns also schnell Stile für die Filmkartenkomponente hinzufügen. Zunächst schließe ich alle anderen Dateien. Jetzt in der Movie Card Dot CSS-Datei, Punkt Movie Card. Und in geschweiften Klammern fügen wir Breite zu 200 Pixeln, Höhe zu 300 Pixeln, Rand zu 15 Pixeln , Überlauf zu verborgenem Wasser, Radius zu zehn Pixeln und Farbe zu Weiß Und Boxschatten auf Null Pixel, drei Pixel, acht Pixel für Unschärfe, RGBA, Null, Null, Null, Null, 0,25 Danach fügen wir ein gepunktetes Filmplakat hinzu und fügen es mit 200% und einer Höhe von 200% Sag die Änderungen und sieh, wir verstehen unseren Stil nicht Finden wir das Problem heraus. Klicken Sie also mit der rechten Maustaste auf unsere Karte und gehen Sie zur Inspektion. Wählen Sie dieses Anker-Tag aus und sehen Sie, dass hier unsere Breite und Höhe nicht angewendet werden. Und es schlägt uns vor, zu versuchen, die Anzeige auf etwas anderes als in Zeile einzustellen anderes als in Zeile denn wenn unser Element auf Inline gesetzt ist, wird dadurch die Breiteneigenschaft verhindert. Aber es gibt einen anderen Weg, das zu lösen. Wir können unsere Filmkarten aufgrund von Flaggen herstellen. In der Move-List-Dot-CSS-Datei fügen wir also Punkt-Filmkarten hinzu. Und darin schreiben wir Display to Flags. Biegen Sie den Zeilenumbruch ein, um den Inhalt gleichmäßig im Leerraum zu umbrechen und auszurichten. Nehmen Sie die Änderungen vor und sehen Sie, wir bekommen unsere Karte hier. Jetzt müssen wir unseren Abschnitt mit den Filmdetails anzeigen. Also hier müssen wir Position Absolute verwenden. Zuallererst erstellen wir in der CSS-Datei für Filmkarten unser Filmkartenelement, das unser übergeordnetes Element dieser Filmdetails ist , und setzen seine Position auf relativ. Und danach fügen wir unten Punkt-Filmdetails hinzu, und innerhalb dieser fügen wir Position zur absoluten Spitze auf Null hinzu. Breite 100%, Höhe 100% und Abstand zehn Pixel. Sag das und hier bekommen wir die Filmdetails. Lassen Sie uns diesen Text nun kacheln. Also zurück zu unserer CSS-Datei und wir fügen hier Punkt-Filmdetails hinzu und fügen in dieser einen Größe von 16 Pixeln hinzu und Farbe zwei hat FFE 400. Danach fügen wir den Punkt, den Film, das Datum und die Rate hinzu. Innerhalb der ecuren Klammern Anzeige zur Markierung hinzu und richten die Elemente zentriert Oh, tut mir leid, dafür haben wir bereits eine Klasse erstellt. Also entfernen wir diese beiden Stile und fügen den Abstand zwischen Schriftgröße und 12 Pixeln Schriftstärke bis 500 Rand zu fünf Pixeln für oben unten und Null für links und rechts hinzu. Farbe hat FF E 400. wir nun in der Filmkartenkomponente Fügen wir nun in der Filmkartenkomponente zuerst die Align Center-Klasse vor dieser Klasse hinzu, sonst werden wir sie vergessen. Speichern Sie diese Datei und kehren Sie zu unserer CSS-Datei zurück. Danach hatten wir die Punktkarte Imog und darin haben wir die Breite auf 20 Pixel, die Höhe auf 20 Pixel und den linken Rand auf fünf Pixel gesetzt Höhe auf 20 Pixel und den linken Rand auf fünf Und zu guter Letzt unterstreichen wir bei ME die Beschreibung, und darin Schriftgröße auf 12 Excel und Schriftstil auf Italien Sag die Änderungen und wirf einen Blick darauf. Siehst du, hier haben wir unseren Stil, aber wir müssen ein paar Änderungen vornehmen. Zuerst wollen wir einen kleinen Hintergrund für diese Details hinzufügen , damit der Text klar aussieht und wir wollen ihn auch unten platzieren. Also zurück zu Vacde und hier in der Filmdetail-Klasse fügen wir dem linearen Verlauf ein Hintergrundbild hinzu, und darin übergeben wir zwei Farben für den Verlauf Also RGBA, 00, Null, Null, RGBA, 00, Null, Eins Beide sind schwarz, aber zuerst eine mit einer Null und die zweite mit einer Opazität Danach mussten wir zwei Flaggen anzeigen, die Richtung zur Spalte kennzeichnen und den Inhalt bis zum Ende ausrichten Schans und eine Runde machen. Sehen Sie jetzt, unsere Details sehen sehr klar aus, und das ist die Stärke des Farbverlaufs Nun, ich sehe keine Wirkung für diese Datums- und Preislinie. Schauen wir uns an, was wir falsch gemacht haben. Zurück zu unserer Filmkarten-Komponente. Hier können wir sehen, dass wir den Klassennamen, den Filmunterstrich, das Datum und die Unterstrichrate Wahrscheinlich mache ich einen Fehler in dieser Schreibweise. Schauen wir uns unsere Karte an und sehen wir uns das DU an und dann. Hier bekommen wir dafür keine Styles. Also zurück zu unserer CSS-Datei, und ich korrigiere unseren Klassennamen, sehe mir die Änderungen an und schaue sie mir an. Siehst du, wir bekommen unsere Daten richtig. Jetzt wollen wir diese Details nur anzeigen , wenn wir mit der Maus über diese Karte fahren, und wir wollen sie auch vergrößern, wenn wir mit der Maus Also fügen wir oben die Filmkarte namens Hover Effect hinzu und darin wir einfach eine Transformation auf den Maßstab 1,08 hinzu jetzt in den Filmdetailstilen eine weitere Eigenschaft hinzu, eine weitere Eigenschaft hinzu Deckkraft standardmäßig auf Null gesetzt Und wenn wir unsere Filmkarte einbinden, setzen wir ihre Opazität auf eins also auf die Filmkarte, rufen Sie an und saugen Sie den Punkt MVE-Details ab Und innerhalb dieser Undurchsichtigkeit auf eins. So einfach ist das Sag Banden und sieh es dir an. Siehst du, hier bekommen wir, was wir wollen. Jetzt kommt dieser Effekt sehr plötzlich. Wir wollen das glatt machen. Bei unseren Filmkarten mussten wir also auf alle 0,2-Sekunden-In-Outs umsteigen. Und das Gleiche gilt für Filmdetails. Sag die Änderungen und sieh sie dir an. Siehst du, hier bekommen wir einen glatten Effekt. Hier haben wir also alle Komponenten mit Stilen fertig. Jetzt müssen wir unserem Projekt nur noch Funktionen hinzufügen. Wenn Sie sich diesen Kurs ständig ansehen, nehmen Sie sich zehn bis 15 Minuten Pause und schnappen Sie sich etwas frische Luft. Kümmere dich um deine Augen und wir sehen uns in der nächsten Lektion. 60. Was ist eine API: Bevor wir anfangen, eine API aufzurufen, wollen wir verstehen, was EPI ist API steht für Application Programming Interface und ist eine Möglichkeit für zwei Programme, miteinander zu kommunizieren Lassen Sie uns das anhand des Beispiels verstehen. Hier ist ein Restaurant. Wir sitzen am ersten Tisch und wollen etwas zu essen bestellen. Was werden wir in diesem Fall tun? Wir gehen nicht direkt in die Küche und bestellen unser Essen beim Koch. Stattdessen rufen wir einen Kellner an. Kellner nimmt unsere Bestellung entgegen und gibt sie dann in die Küche Danach beginnt die Küche mit der Bearbeitung unserer Bestellung und gibt dem Kellner Essen Und dann liefert der Kellner das Essen an unseren Tisch. Hier ist der Kellner also wie ein Bote, der unsere Anfrage entgegennimmt und die Anfrage an unser Ziel weiterleitet Und dann erhält er eine Antwortnachricht vom Zielort und bringt sie zu uns zurück Stellen Sie sich also vor, dieser Tisch , an dem wir sitzen, ist unser Anwendungs-Frontend. Wir wollen einige Daten über Kleidung bekommen, also rufen wir API, das ist unser Kellner, an und schicken Essensanfragen Jetzt überträgt die API diese Anfrage an einen Server oder eine Datenbank, die unsere Küche ist, und dieser Server oder diese Datenbank teilt die Antwort, also die Daten, die wir wollen, und die API liefert die Antwortdaten an unser Frontend Jetzt wissen Sie, was API ist EPI ist eine Möglichkeit, über die zwei Programme miteinander kommunizieren können Lassen Sie mich es Ihnen anhand eines anderen Beispiels aus der realen Welt erklären. Sie besuchen also wahrscheinlich die Website, auf der die Flugtickets gebucht werden, richtig. In dieser Anwendung, sagen wir Emirates, schreiben wir also unseren Abflugort. Sagen wir London und den zu erreichenden Ort, sagen wir Mumbai. Und wir geben unser Datum und die Art unseres Sitzplatzes und wir suchen nach Flügen und es werden Details zu Flügen angezeigt. Das ist aufgrund der API möglich. Wir rufen eine API auf, und diese API ruft diese Daten vom Server ab und gibt uns diese Daten. So einfach ist das. Hier ist eine Sache. Da wir diese Emirate-Website nutzen, erhalten wir nur die Flugdaten von Emirate-Flügen Es gibt jedoch einige Websites , auf denen Sie nach Flugdaten suchen und auf denen mehrere Flüge mit mehreren Fluggesellschaften zurückgegeben werden mit mehreren Fluggesellschaften Wie ist das möglich? Viele Unternehmen stellen ihre API öffentlich zur Verfügung, und wir bezeichnen diese API als öffentliche API. Durch die Verwendung dieser öffentlichen API können wir auf ihre Daten zugreifen. Da die Daten nun öffentlich zugänglich sind, muss das Unternehmen einen gewissen Schutz verwenden. Und zum Schutz haben viele öffentliche APIs ihren API-Schlüssel. Wenn unser Frontend also Anfragen an die API sendet, muss das Frontend APIKey mit dieser Anfrage senden Danach leitet die API diese Anfrage an den Server weiter , und bevor die Anfrage entgegengenommen wird , fragt der Server nach APIke, um auf die Daten zuzugreifen Unsere API leitet also unseren APIKey an den Server weiter, der Server überprüft diesen Schlüssel , ob er authentisch ist, erst dann gibt der Server Daten zurück Andernfalls gibt der Server einen Fehler zurück, Zugriff wurde verweigert. So einfach ist das. Jetzt fragen Sie sich vielleicht, wie wir ApiKey bekommen können , wenn wir auf die öffentliche API zugreifen wollen den API-Schlüssel zu erhalten, müssen wir uns auf deren Website registrieren, welche Unternehmen die API bereitstellen, und sie werden uns ApiKey zusenden In der nächsten Lektion erhalten wir unseren ApiKey für Filmdaten 61. API-Schlüssel generieren: In unserem Movie Maniac-Projekt werden wir also die öffentliche API von TMDB verwenden, um die Daten von Filmen abzurufen Wir erstellen die API hier nicht. Wir verwenden nur die öffentliche API. Der Grund, warum ich Ihnen die öffentliche API beibringen möchte, ist, dass sie heutzutage ein sehr verbreitetes Merkmal der Anwendung ist. Zum Beispiel verwenden einige Anwendungen, also die Wetterinformationen und was sie verwenden, nur die öffentliche API eines anderen Unternehmens. Durch die Verwendung einer öffentlichen API können Sie Ihre Anwendung nützlicher machen. Und wenn Sie sich für eine Stelle als React-Entwickler bewerben, dann wissen die Interviewer anhand Ihres Projekts auch, dass Sie auch öffentliche APIs verwenden können Schauen wir uns also an, wie wir den TMDB-API-Schlüssel bekommen können. Gehen Sie also zur TMDB-Website und gehen Sie zu weiteren Optionen und öffnen Sie die API-Option Hier sehen wir diese API-Link-Option zur Registrierung für Öffnen Sie das und hier können Sie sehen, dass ein TMW-Benutzerkonto erforderlich ist, um einen APIKey anzufordern Holen wir uns also unseren ApiKey. Klicken Sie also auf TMW Link beitreten und füllen Sie dieses Formular mit Ihren Daten aus Benutzername Cb 24, Geben Sie Ihr Passwort ein. Schreiben Sie erneut, bestätigen Sie das Passwort geben Sie Ihr echtes E-Mail-Konto ein und klicken Sie auf Anmelden Jetzt müssen wir unser E-Mail-Konto verifizieren. Öffnen Sie also Ihre E-Mail-Adresse und TMW-E-Mail und klicken Sie auf Mein Konto aktivieren Jetzt können wir das schließen. Jetzt können wir uns in unser Konto einloggen. Schreiben Sie also hier Ihr Passwort und klicken Sie auf Anmelden. Siehst du, wir leiten zu unserem Dashboard weiter. Jetzt können wir hier sehen , dass wir den API-Schlüssel anfordern müssen. Klicken Sie also hier und wählen Sie den Entwickler aus. Und akzeptiere diese Vereinbarung. Du kannst das lesen, wenn du willst. Jetzt müssen wir dieses letzte Formular für APike ausfüllen. Ich weiß, dass das ein wenig langwieriger Prozess ist, aber sie geben uns nützliche Daten, Facebook zu bekommen aber sie geben uns nützliche Daten, und dieser Prozess ist sehr üblich, um APike von Unternehmen wie Google oder Wählen Sie zunächst die Art der Nutzung, den Namen der persönlichen Anwendung für Movie Maniac, die URL der Anwendung zum lokalen Host Spalte 5173, URL der Anwendung zum lokalen Host Spalte 5173 Zusammenfassung der Anwendung für den Film Miniac ist die Anwendung , die so beliebt, am besten bewertet und Geben Sie danach Ihren Vornamen, Nachnamen, Telefonnummer, Adresse eins, Adresse zwei, Stadt, Bundesland, Postleitzahl ein und klicken Sie am Ende auf Senden, und wir müssen Klicken Sie nun auf Senden und sehen Sie hier, dass wir unseren API-Schlüssel erfolgreich erhalten haben. Nun wollen wir sehen, wie wir die API bekommen können. Öffnen Sie also diesen Dokumentationslink und hier müssen wir zum API-Referenzabschnitt gehen. Und in dieser Dokumentation erklären sie jeden einzelnen Endpunkt ihrer API Aber wir wollen nur die Film-API bekommen. Scrollen Sie also in diesem Abschnitt und gehen Sie zum Abschnitt mit den Filmdetails. Jetzt bekommen wir hier diese beliebte, bestbewertete und kommende API. Öffnen wir also Popular Now auf der rechten Seite, wir können die Details zu dieser API sehen. Beachten Sie, dass hier unsere SDTP-Methode GT ist. Wir werden diese SDTP-Methoden in den nächsten Abschnitten besprechen , in denen wir sehen werden , wie wir unsere private API aufrufen können Denken Sie vorerst daran, dass die GET-Methode verwendet wird, um die Daten von der API abzurufen, so einfach ist das Sie sich jetzt keine Sorgen, kopieren Sie einfach diese API von hier und in unserem neuen Tab öffnen wir diese API. Sehen Sie hier, es gibt einen Fehler zurück, der als ungültiger API-Schlüssel bezeichnet wird, und Ihnen muss ein gültiger Schlüssel erteilt werden. Im Grunde fragt es nach einem API-Schlüssel. Zurück zu unserer Registerkarte M-API-Einstellungen. Hier können wir sehen, dass wir dieses API-Beispiel haben, also kopieren wir einfach dieses Fragezeichen und die API-Schlüsselvariable. In unserer TRL fügen wir diesen APIKey jetzt als Query-Zeichenfolge ein. Und sehen Sie hier, wir bekommen die Daten zu beliebten Filmen. Wenn Sie sich fragen, wie Sie Ihre Daten in diesem schönen Format sehen können , müssen Sie eine Chrome-Erweiterung namens JSON Viewer Pro installieren . Also herzlichen Glückwunsch. Sie erstellen Ihren ersten API-Schlüssel. 62. API mit der Fetch-Methode aufrufen: Sehen wir uns nun an, wie wir diese API in unserer Anwendung mithilfe der Fetch-Methode aufrufen können diese API in unserer Anwendung mithilfe der Fetch-Methode Vertrauen Sie mir, es ist wirklich einfach und unkompliziert. Bevor wir nun die API aufrufen, müssen wir entscheiden, in welcher Komponente wir die API aufrufen müssen. Wir benötigen also Filmdaten in unserer Filmlistenkomponente, und anhand dieser Daten werden wir sie auf Filmkarten anzeigen. Hier wollen wir nun die API aufrufen , wenn diese Komponente übergeben wird. Erinnerst du dich , welchen Hook wir für die Ausführung der Logik beim Rendern von Komponenten verwenden werden ? Richtig, wir werden Use Effect Hook verwenden. Wie ich Ihnen bereits sagte, wird der Use-Effekt nun für drei verschiedene Variationen verwendet. Hier benötigen wir eine zweite Variante , bei der ein leeres Array an das Abhängigkeits-Array übergeben wird, weil wir die API nur einmal aufrufen wollen , wenn diese Filmlistenkomponente übergeben wird. Also schreiben wir hier use effect und drücken die Tabulatortaste. C, es wird automatisch oben importiert. Jetzt wissen wir, dass wir zwei Argumente übergeben müssen. Das erste ist für die Callback-Funktion, die Funktion, die wir ausführen möchten, und das zweite ist das Abhängigkeitsarray Hier übergeben wir ein leeres Array. Einfach. In dieser Callback-Funktion werden wir nun unsere Logik zum Aufrufen der API schreiben Zum Aufrufen der API verwenden wir also die Methode fetch Wenn Sie bereits in JavaScript gearbeitet haben, kennen Sie dieses Konzept bereits Und wenn Sie die Abruf-Methode nicht kennen, sich keine Sorgen, sehen Sie sich das an und Sie werden es verstehen Also hier fügen wir die Abruf-Methode hinzu. Jetzt müssen wir in dieser Funktion an erster Stelle unsere API-URL schreiben Zurück zum Browser, und hier kopieren wir unsere API-URL. Und in unserer Patch-Methode werden wir es in Doppelcodes einfügen. Nun, dieser Ausdruck gibt ein Versprechen zurück. Im Grunde bedeutet Versprechen, dass wir das Ergebnis in der Zukunft erhalten werden , nicht sofort. Das Ergebnis können unsere Daten sein, oder wenn etwas schief gelaufen ist, erhalten wir eine Fehlermeldung, aber wir bekommen definitiv alles. Lass mich dir zeigen, was ich meine. Also werden wir das in einer Variablen namens Response speichern. Und danach protokollieren Sie diese Antwort einfach mit einem Punkt in der Konsole. Speichern Sie die Gene und schauen Sie sich das an. Öffne die Konsole und sieh, hier bekommen wir das Versprechen. Wenn wir dieses Versprechen erweitern, hier der Status des Versprechens auf erfüllt gesetzt, weil diese API funktioniert. Und in diesem vielversprechenden Ergebnis erhalten wir eine Antwort von der API. Und in diesem Antworttext erhalten wir unsere Daten und andere Details zum API-Aufruf. Für den Umgang mit den JavaScript-Versprechen haben wir zwei Methoden, dann method und acing await. Mach dir keine Sorgen. Wir werden beide eins nach dem anderen sehen. Lassen Sie uns also zunächst diese Antwortvariable und auch das Konsolenpunktprotokoll entfernen . Und nach dieser Abrufmethode fügen wir Punkt DN Bei dieser zehnfachen Methode müssen wir nun die Callback-Funktion übergeben Und hier erhalten wir unsere Antwort als Parameter-Pfeilfunktion. Und jetzt lassen Sie uns diese Antwort einfach mit der Konsole protokollieren. Speichern Sie das und schauen Sie sich das an. Sehen Sie, hier erhalten wir eine Reihe von Eigenschaften, die sich auf unseren API-Aufruf beziehen, wie Status, URL, Text. Dieser Körper hat all unsere Daten. Jetzt denkst du vielleicht, warum können wir das nicht sehen? Das liegt daran, dass wir diese Daten in das JSN-Format konvertieren An der Stelle dieser Antwort schreiben wir also den Antwortpunkt JSON Speichern Sie das und wir werden sehen, dass wir hier wieder ein Versprechen bekommen. Und in diesem vielversprechenden Ergebnis erhalten wir unsere Filmdaten. auf diese Daten zugreifen zu können, müssen wir die Antwort Dot Json von dieser Funktion zurückgeben. Und aus diesem Grund erhalten wir ein weiteres Versprechen. Jetzt verwenden wir wieder diese Methode, um mit diesem Versprechen umzugehen. Und darin schreiben wir Callback-Funktion und wir erhalten hier Daten als Parameter, und wir konsultieren einfach das Punktprotokoll dieser Daten Speichern Sie das und schauen Sie sich das an. Siehst du, wir bekommen Filmdaten in diesen Ergebnissen, also funktioniert es. Nun, diese Patch-Methode mit zwei Methoden sieht ein bisschen hässlich aus. Sehen wir uns die zweite Methode zum Umgang mit Promise an. Lassen Sie uns diese beiden Than-Methoden entfernen. Wir brauchen sie nicht. Vor dieser Patch-Methode fügen wir nun eine Wartezeit hinzu, was bedeutet, dass unser Code vollständige Ausführung dieses Versprechens wartet. Wenn Sie diese Konzepte nicht kennen, empfehle ich dringend, sich die Tutorials Fetch Method und Async Rona Java Script anzusehen Fetch Method und Async Rona Java Das sind wirklich sehr wichtige Konzepte. Um Await verwenden zu können, müssen wir unsere Funktion nun asynchron machen Also hier, nach unserem Use-Effekt, werden wir eine neue Funktion namens Fetch movies erstellen Um diese Funktion nun asynchron zu machen, müssen wir vor dieser Klammer ein Schlüsselwort übergeben Lassen Sie uns nun unsere Abruf-Methode in diese Funktion verschieben. Gut. Jetzt wissen wir, dass dieser Ausdruck eine Antwort zurückgibt. Speichern wir das also in einer Variablen namens response. Und danach konsultieren oder protokollieren wir einfach diese Antwort. Vergessen Sie jetzt nicht, unsere Funktion „Patch-Filme“ in unserem Use-Effekt aufzurufen . Speichern Sie die Gene und schauen Sie sich das an. Aktualisieren Sie die Seite und sehen Sie, dass wir dieselbe Antwort erhalten wie bei unserer Methode „Erst dann“. Also müssen wir diese Antwort in das JSON-Format konvertieren. Also schreiben wir hier Response Dot JSON. Und das wird wieder zurückkehren, versprochen. Also schreiben wir wieder hier await, und lassen Sie uns diese JSN-Daten in einer Variablen namens data speichern Und am Ende protokollieren wir diese Daten in der Konsole. Speichern Sie die Gene und schauen Sie sich das an. Sehen Sie hier, wir bekommen unsere Daten. Und wenn wir acing await verwenden, sieht unser Code sauber aus. Wann immer wir also Daten aus einem API-Aufruf anzeigen möchten, werden wir dieser Methode folgen. Wenn Sie wenig Verwirrung haben, Sie sich keine Sorgen mit der Übung, Ihre Verwirrung wird verschwinden. Und ich habe einen ganzen Abschnitt hinzugefügt, speziell für das Aufrufen der API. Also mach dir darüber keine Sorgen. 63. Übung für MovieCard: Jetzt ist es Zeit für ein wenig Bewegung. In der vorherigen Lektion erhalten wir also unsere Filmdaten. Jetzt müssen Sie die Daten auf mehreren Karten anzeigen. Hier sind einige Eigenschaften , die Sie verwenden müssen. Der Hinweis ist, dass Sie UTT Hook aus irgendeinem Grund verwenden müssen. Nehmen Sie sich also etwas Zeit und versuchen Sie , diese Übung zu lösen. Und danach komm und sieh dir die Lösung an. 64. Lösung für diese Übung: Schauen wir uns also die Lösung dieser Übung an. Ich hoffe, du versuchst das zu lösen. Zuallererst werden wir oben eine Zustandsvariable zum Speichern dieser Filmdaten erstellen . Schreiben Sie also use state und drücken Sie die Tabulatortaste Ich importiere use oben. Und jetzt schreibe Use State Snippets, Movies und Set Und als Standardwert übergeben wir ein leeres Array An der Stelle dieses Punktprotokolls für die Konsole verwenden wir einfach Set Movies und speichern hier Datenpunktergebnisse, weil wir das Filme-Array im Datenpunktergebnis erhalten. Lassen Sie uns diese Filme nun in unserer Filmkarten-Komponente anzeigen . Also hier bei Culibackets stehen Filme auf MAP. Und darin erhalten wir ein einzelnes Filmelement, Pfeilfunktion und wir geben die Filmkartenkomponente zurück Erinnerst du dich, wenn wir die Map-Methode verwenden, müssen wir den Uni-Wert als Schlüssel übergeben. Wir fügen den Schlüssel hinzu und übergeben hier die Move-Dot-ID, die für jeden Film einzigartig ist. Jetzt müssen wir hier alle Filmdetails übergeben, die wir in unserer Filmkartenkomponente anzeigen möchten. An der Stelle, an der jedes Detail einzeln übergeben wird, können wir das gesamte Objekt in einer Variablen übergeben. Lass mich dir zeigen, was ich meine. Wir gehen hier einfach vorbei, Film ist gleich, und wir geben hier jeden Filmpunkt weiter. Speichern Sie diese Datei und öffnen Sie die Filmkartenkomponente. Und hier können wir unsere Filmrequisiten destrukturieren. Lassen Sie uns nun zunächst den gesamten Text anzeigen. An der Stelle dieses Filmnamens schreiben wir also den originalen Unterstrichtitel mit dem Move Dot An der Stelle dieses Datums unterstreicht der Filmstart das Datum unterstreicht der Filmstart Bewertung zur Änderung, Punktwert, Unterstrich Durchschnitt. Und Filmbeschreibung zur Move-Punkt-Übersicht. Speichern Sie das und sehen Sie hier, wo wir unsere Daten erhalten. Aber diese Filmbeschreibung ist sehr lang. Also lasst uns das zuerst lösen. Wenn Sie diese Übung bis zu diesem Punkt lösen, glauben Sie mir, Sie machen das wirklich großartig. Es gibt also viele Möglichkeiten, das zu tun. Wir fügen hier einfach die Punktscheibenmethode hinzu und übergeben Null und 100 und danach plus in Doppelcodes Punkt Punkt Punkt Punkt. Die Slice-Funktion zeigt also im Grunde nur die ersten hundert Buchstaben und danach zeigen wir drei Punkte an. Speichern Sie diese und sehen Sie zu, dass wir diese nette Beschreibung erhalten. Lassen Sie uns jetzt unser Poster ändern. Gehen Sie also zur Registerkarte Einstellungen und öffnen Sie die Dokumentation der TMDB-API. Hier im Bereich Bilder öffnen wir diesen grundlegenden Schritt Hier wird erwähnt, wie wir den Bildpfad hinzufügen können. Kopieren Sie einfach diese Bild-URL und an der Stelle unseres hartcodierten Bildes fügen wir Cully-Klammern Backticks hinzu und fügen diese URL einfach hier ein In dieser URL müssen wir jetzt nur noch diese Bild-ID ändern Also entfernen wir diese Bild-ID und entfernen auch einen Schrägstrich und fügen einfach Dollar-Klammern hinzu, verschieben den Punkt Poster Underscore Der Grund, warum wir diesen Schrägstrich entfernen , ist, dass der Schrägstrich bereits in der Pfadvariablen Poster Underscore verfügbar ist Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Filmplakate. Wir möchten die offizielle Seite dieses Films auf der TMW-Website öffnen , wenn wir auf die Filmkarte klicken Also hier in unserem Anker-Tag in HRF fügen wir wieder geschweifte Klammern und Backticks und hier übergeben wir HTTP als Colmlaww Film db.org slash Wir möchten diesen Link in einem neuen Tab öffnen. Wir fügen hier hinzu, Ziel entspricht einem leeren Unterstrich. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf eine der Karten und sehen Sie, dass sie in einem neuen Tab geöffnet wird. Perfekt. Hier haben wir unseren grundlegenden Teil dieser Bewerbung abgeschlossen. Ich hoffe, es macht Spaß und ist eine Lernerfahrung für Sie. Wenn Sie Fragen haben, können Sie diese im Bereich Fragen und Antworten stellen. Im nächsten Abschnitt werden wir nun mit der Implementierung von Filter- und Kurzschlussfunktionen beginnen. 65. Abschnitt 07 – Filterung, Sortierung und Dunkelmodusfunktionen: Willkommen in den Abschnitten s des Ultimate React-Kurses. In diesem Abschnitt werden wir sehen, wie wir die Filter-, Sortier- und eine Bonusfunktion implementieren können , wodurch sich unsere Anwendung von der Masse abhebt, nämlich die Funktion des Dunkel- und Hellmodus. Ich freue mich sehr darüber und hoffe, du auch. Fangen wir also damit an. 66. Filtern vs. Sortieren: Bevor wir mit der Implementierung von Filter- und Kurzfunktionen beginnen , möchte ich den grundlegenden Unterschied zwischen Filter - und Kurzfunktionen erläutern . Deshalb verwenden wir die Filterfunktion , um einige Daten herauszufiltern. in unserer Anwendung beispielsweise Wenn wir in unserer Anwendung beispielsweise auf eine Bewertung von acht plus Sternen klicken, sollten nur die Datensätze angezeigt werden , deren Bewertung höher als acht Sterne ist. Wir filtern also andere Filmdaten. Auf der anderen Seite dient der Kurzschluss der Anordnung von Daten in unserer Anwendung beispielsweise Wenn wir in unserer Anwendung beispielsweise „Aufnahme nach Datum“ auswählen, müssen wir unsere Filmdaten neu anordnen, sodass die Funktionalität die Daten immer in der richtigen Reihenfolge anordnet Es werden keine Daten entfernt, und das nennen wir Kurzschluss In einfachen Worten bedeutet Filtern also, dass wir nur nützliche Daten behalten, und Shorting bedeutet, dass wir Daten in einer bestimmten Reihenfolge aufbewahren Der Grund, warum ich Ihnen das erkläre, ist diese Erklärung Ihnen helfen wird, Logik klar zu verstehen und zu implementieren 67. Filterfunktion implementieren: Bevor wir also anfangen, Logik für Filter zu schreiben , müssen wir zunächst den aktuell ausgewählten Filter abrufen. Nach diesem Filmstatus erstellen wir also einen weiteren Nutzungsstatus und geben ihm einen Namen, eine Durchschnittsbewertung und eine festgelegte Durchschnittsbewertung. Und als Standardwert übergeben wir Null. Wenn wir nun auf diesen Listeneintrag klicken, setzen wir unsere durchschnittliche Bewertung auf diese Rate. Es ist wirklich einfach. Lass es mich dir zeigen. Also klicken Sie hier, und wenn Sie Windows haben, dann halten Sie Alt gedrückt oder wenn Sie einen Mac haben, dann halten Sie die Wahltaste gedrückt. Und jetzt klicken Sie hier und hier. Mit diesen können wir mehrere Cursors erstellen, und wir fügen hier ein Klickereignis, Pfeilfunktion und eine Handle-Filterfunktion hinzu. Drücken Sie SCA, um mehrere Cursor zu entfernen, und geben Sie hier einfach die Bewertung acht, sieben und sechs ein. Definieren wir nun diese Funktion. Wir können andere Funktionen wie diese minimieren. Diese Technik verwende ich immer , wenn ich mehr Codezeilen schreibe. Jetzt, nach dieser Funktion, kümmert sich const um den Filter, und hier bekommen wir Rate, Pfeilfunktion, und in dieser ersten Zeile setzen wir Min Rating auf diese Rate Erinnern Sie sich jetzt, welche Methode wir zum Filtern von Daten verwenden werden Richtig, es ist eine Filtermethode. Das weißt du schon. Nett. Also schreiben wir einfach Filme Dot Filter. Und darin erhalten wir jede Filmfehlerfunktion, und hier müssen wir die Bedingung erfüllen. Verschieben Sie den Punkt, um die Stimme zu unterstreichen Durchschnitt größer oder gleich der Bewertung. So einfach ist das. Diese Filtermethode gibt nun ein neues Array zurück. Also speichern wir das in einer Variablen namens Filter. Und jetzt können wir Filme einstellen und gefilterte Filme hier weitergeben. Speichern Sie die Änderungen und schauen Sie sich das an. Bevor wir nun unsere Funktionalität überprüfen, stelle ich in diesen Filmdetails fest, dass wir keine Bewertung erhalten. Also lass uns das beheben. Öffnen Sie die Filmkartenkomponente und scrollen Sie nach unten zu den Filmdetails. Hier müssen wir diesen Durchschnittswert in den Durchschnitt der Stimmen ändern. Speichern Sie die Änderungen und sehen Sie, hier bekommen wir unsere Bewertung. Klicken Sie nun auf Filter. Sagen wir sieben und sehen, dass es funktioniert. Klicken Sie jetzt auf acht und es funktioniert auch. Aber hier ist ein großer Fehler. Klicken Sie erneut auf sieben oder sechs. Es wird nicht funktionieren. Lassen Sie mich Ihnen erklären , was hier passiert. Wenn wir also Bewertung sieben plus wählen, wird diese Handle-Filterfunktion ausgeführt. Darin wird unser Durchschnittsratenstatus mit sieben aktualisiert. Danach filtert diese Filtermethode Filme und wir stellen Filme in dieser Setfilm-Funktion ein. Wenn Sie nun auf Bewertung sechs plus klicken, filtert diese Filtermethode nur zuvor gefilterte Daten, die alle eine Bewertung von sieben plus haben, anstatt unsere ursprünglichen 20 Filme zu verwenden, und das ist das Problem. Lass uns das lösen. Die Lösung besteht darin, dass wir ursprünglich alle Filme in diese Filmstatusvariable von der API setzen und danach Array nicht mehr berühren werden. Wird eine weitere Zustandsvariable erstellen und unsere Filme in dieser Variablen speichern. Und wenn wir unsere Daten filtern wollen, holen wir uns Daten aus unserem ursprünglichen Filmstatus und speichern dann unsere Filterdaten in unserer neuen Zustandsvariablen. Ich weiß, das ist ein bisschen verwirrend, aber sieh dir das an und du wirst es verstehen. Also hier erstellen wir eine weitere Zustandsvariable und geben ihr einen Namen Filter Filme und setzen Filter Filme. Und als Standardwert übergeben wir ein leeres Array. Zuallererst müssen wir dieses Filter-Film-Array füllen , wenn wir unsere API aufrufen. Also duplizieren wir die Zeile für festgelegte Filme und übergeben hier festgelegte Filter-Filme. Diese Filterfilme und Filme sind also beide gleich. Nun hatten wir in der Händel-Filterfunktion an der Stelle, an der die Filme gedreht wurden, an der Stelle, an der die Filme gedreht wurden, die Filterung eingestellt. Wir spielen also nicht mit der Anordnung der Originalfilme herum. Stattdessen verwenden wir es nur zum Speichern von Originaldaten. Jetzt unten müssen wir Filterfilme an der Stelle des Filmarrays verwenden . Sag die Änderungen und sieh sie dir an. Wählen Sie sieben, dann acht, dann sechs und C. Jetzt funktioniert es einwandfrei. Wenn wir nun Filter sechs ausgewählt haben und erneut auf diesen Filter klicken, möchten wir alle unsere Filme anzeigen. Lassen Sie uns das umsetzen. Fügen Sie hier in der Handle-Filterfunktion hinzu, ob die Zustandsrate der durchschnittlichen Bewertung entspricht Darin setzen wir zuerst die Durchschnittsbewertung auf den Standardwert, der Null ist, und danach stellen wir die Filter-Filme auf unsere Originalfilme Und sonst werden wir über diese Logik hinweggehen. So einfach ist das. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf Bewertung acht und erneut auf Bewertung acht. Siehst du, wir bekommen Daten zurück. Also funktioniert es jetzt. Nun, hier ist eine letzte Änderung. Wir möchten den aktuell ausgewählten Filter anzeigen. Also zurück zum VS-Code, und an der Stelle dieser Zeichenkettenklasse fügen wir Ci-Klammern hinzu, und hier fügen wir Bedingung hinzu, ich meine, Bewertung entspricht acht Wenn es wahr ist, kehren wir zu Klassen, Filmfilterelement und Aktiv zurück, Filmfilterelement und andernfalls geben wir nur das Filmfilterelement zurück Kopieren wir diesen Ausdruck und fügen ihn für beide Filter ein. Und ändere hier einfach sieben und sechs. Sag die Änderungen und sieh sie dir an. Siehst du, hier haben wir diese aktive Filterlinie. Sie können sehen, wie einfach es ist, die Filterfunktion zu implementieren. Hier in unserem Filmfilter ist dies ein wiederholbarer Vorgang So können wir unsere Filter-Film-Komponente trennen und das werden wir in der nächsten Lektion tun 68. Wiederherstellbarer Filterabschnitt erstellen: Anstatt dieses Listenelement einfach in eine separate Komponente einzufügen, werden wir diese gesamte ungeordnete Liste in die neue Komponente einfügen Lassen Sie uns das ausschneiden und in unserem Filmlistenordner eine neue Komponente namens Filter Group Dot JSX erstellen Jetzt fügen wir hier unseren Boilerplate und geben einfach unsere Unterliste zurück In dieser Komponente benötigen wir nun diese beiden Eigenschaften, benötigen wir nun diese beiden Eigenschaften, Min Writing und Handle Filter Wie können wir das also bekommen? Richtig? Durch die Verwendung von Requisiten können Sie sehen, dass React sehr einfach ist Speichern Sie diese Datei und kehren Sie zu unserer Filmlistenkomponente zurück. Und hier fügen wir eine Filtergruppenkomponente hinzu. Darin geben wir nun die Bewertung Man ab, Durchschnittswertung entspricht Und für den Handle-Filter geben wir Requisiten weiter, wenn die Bewertung der Clique dem Handle-Filter entspricht. Sie können hier sehen, dass wir diese ähnlichen Namen verwenden , weil das die beste Vorgehensweise für Entwickler ist und wir auch besser mit anderen Entwicklern zusammenarbeiten können Speichere das. Und jetzt in der Filtergruppen-Komponente, bei den Probs, destrukturieren wir sie und bekommen hier die Durchschnittsbewertung und bei der Bewertung klicken Lassen Sie uns nun diese Handle-Filterfunktion ersetzen, drücken Sie Strg+D oder Befehlstaste+D , um genau denselben Code auszuwählen, und schreiben Sie hier einfach auf Bewertung, Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, dass es immer noch funktioniert. Jetzt noch eine Sache, die ich in dieser Filtergruppenkomponente ändern möchte . Deshalb wollen wir heute nur drei Filter anzeigen. Wenn wir morgen beschließen, fünf plus vier plus oder neun plus Sterne hinzuzufügen , dann müssen wir diesen Listenpunkt mehrmals duplizieren, und das ist die schlechte Praxis. Also können wir dafür Array verwenden. Also eine Filmlisten-Komponente und wir fügen hier eine weitere Requisite hinzu, die in Cali-Klammern als „ratings equals“ bezeichnet wird Wir fügen ein Array hinzu, und innerhalb dieser fügen wir acht, sieben Wenn Sie also einen Filterwert hinzufügen oder entfernen möchten, können wir das einfach tun, indem wir dieses Bewertungsarray verwenden Speichern Sie diese Datei und kehren Sie zur Filtergruppenkomponente zurück. Ganz oben erhalten wir Bewertungen. Jetzt fügen wir nach unserer Nomenliste Calibrackets und Ratings Dot MAP Wir erhalten hier die Funktion für Fehler mit einer einzigen Rate und geben dieses Listenelement-Tag zurück An der Stelle dieser fest codierten Acht fügen wir hier Rate, also Rate und hier auch Rate in Ci-Klammern hinzu. Nun, hier fehlt uns eine Sache in der Kartenmethode. Kannst du mir das sagen? Richtig. Es ist eine Schlüsseleigenschaft. Also übergeben wir den Schlüssel, der der O-Rate entspricht. Hier sind alle unsere Tarife einzigartig, und deshalb können wir sie als Schlüssel weitergeben Andernfalls fügen wir einen Index hinzu. Lassen Sie uns nun diese beiden Listenelemente entfernen. Wir brauchen sie nicht, speichern Sie sie und sehen Sie, wie sauber unser Code mit dieser Array-Methode aussieht. 69. Sortierauswahl behandeln: Sehen wir uns an, wie man mit der Sortierauswahl umgeht. Zuallererst müssen wir hier eine Zustandsvariable zum Speichern von Sortierdetails erstellen . Geben Sie ihr also einen Namen und legen Sie die Sortierung fest. Jetzt übergeben wir hier als Standardwert ein Objekt. Dieses Objekt hat zwei Eigenschaften. Die erste ist kaufen und wir setzen sie auf Standard und bestellen auf ASC, was aufsteigend bedeutet Bei dieser Option „Erster Kauf“ können wir „Aufnahme nach Datum“ oder „Aufnahme nach Bewertung“ hinzufügen Und der Reihe nach speichern wir aufsteigend und absteigend. In unserem ersten Select-Tag übergeben wir den Namen an den Kauf ersten Wert an den Standardwert Der zweite Wert für die Veröffentlichung unterstreicht das Datum und der dritte Wert steht für den Durchschnitt der Stimmen Im zweiten Auswahl-Tag übergeben wir nun den Namen an die Bestellung, ersten Wert an ASC und den zweiten Wert an DSC , was Jetzt denken Sie vielleicht, warum wir nur diese Werte übergeben. Mach dir darüber keine Sorgen. Ich erkläre es dir später. Im Moment konzentrieren wir uns nur auf die Bearbeitung dieser Auswahl. Erinnern Sie sich, wie wir mit mehreren Eingaben mit derselben Funktion umgehen ? Lassen Sie uns diesen Trick hier anwenden. Wir übergeben hier ein Ereignis, eine Änderung entspricht einer kurzen Behandlung Und preiswert zum Schnäppchenpreis. Und auch für diese Auswahl übergeben wir dasselbe Änderungsereignis an Handle Short. Und Wert in der Reihenfolge der kurzen Punkte. Lassen Sie uns nun schnell diese Handle-Kurzfunktion definieren. Nach dieser Handle-Filterfunktion definieren wir eine neue Funktion namens handle short. Hier erhalten wir das Event-Objekt, die Pfeilfunktion In dieser Funktion erhalten wir zuerst den Namen und den Wert der aktuellen Eingabe Also C-Objekt, Namenswert entspricht E-Ziel. Und danach rufen wir Set Sort auf. Zuerst erhalten wir den vorherigen Wert, die Pfeilfunktion. Und hier geben wir einfach das Objekt zurück. Und dabei fügen wir vorherige Werte mit dem Spread-Operator und nennen danach in eckigen Klammern Callan-Wert, so einfach ist das Jetzt können wir diesen Code sogar kürzer machen. Also ich von der Funktion, wir wollen Objekt zurückgeben, dann können wir diese Rückgabe entfernen und auch die C-Klammer entfernen und unser Objekt in Klammern unser Objekt in Klammern setzen, denn wenn wir auf geschweifte Klammern verweisen, dann versteht unser Code, dass ci-Klammern ein Lassen Sie uns nun sehen, ob wir unseren Wert in dieser kurzen Variablen erhalten unseren Wert in dieser kurzen Variablen Also schauen wir uns einfach kurz das Punktprotokoll an, speichern die Änderungen und schauen uns das an. Öffnen Sie die Konsole und wählen Sie das Datum aus dieser Drop-down-Liste aus. Sehen Sie, ob es auf das Veröffentlichungsdatum eingestellt ist. Danach wählen wir Absteigend aus, und hier bekommen wir auch das Nun, hier ist ein kleines Problem. Wann immer wir den Status einer unserer Komponenten sehen wollen, müssen wir diese Zustandsvariable konsultieren oder protokollieren, was etwas langweilig ist. In der nächsten Lektion werden wir das Debugging-Tool für React-Anwendungen verwenden Debugging-Tool für React-Anwendungen 70. React-Anwendung debuggen: Zum Debuggen der React-Anwendung verwenden wir daher die beliebteste Browsererweiterung namens React Developer Tools Öffnen Sie also einen neuen Tab in Ihrem Browser und suchen Chrome Web Store. Öffne den ersten Link. Und in dieses Suchfeld schreiben wir React Developer Tools. Wenn Sie einen anderen Browser verwenden, können Sie direkt in der Google React Developer Tools-Erweiterung nach diesem Browser suchen . Sie können sehen, dass diese Erweiterung von 4 Millionen Benutzern heruntergeladen wird, weshalb sie sehr beliebt ist. Klicken Sie nun auf AttuCrom und geben Sie ihm die Erlaubnis zum Hinzufügen. Gut. Es ist hinzugefügt. Schließen Sie jetzt diesen Tab. Wir brauchen es nicht. Lassen Sie uns die Entwicklertools öffnen. Und in dieser Liste sehen Sie hier eine Option namens Komponenten. Öffne das. Das ist also unser Anwendungskomponentenbaum. Sie können hier sehen, dass wir unsere App-Komponente erhalten, die unsere Stammkomponente ist. Danach haben wir Nabar und danach die Filmliste, und in der Filmliste haben wir die Filtergruppe und eine Reihe von Filmkartenkomponenten Jetzt können wir den Status aller Komponenten sehen , indem wir sie auswählen. Also wählen wir die Komponente „ Filmliste“ aus. Hier sehen wir den Hook-Bereich, und das ist unser Kurzstatus. Wenn wir unseren Kurzwert ändern, sehen Sie, wir können diesen Wert hier sehen. Und hier können wir auch die Filmliste sehen. Wenn wir nun den Codeausschnitt dieser Komponente sehen möchten, klicken Sie auf dieses Codesymbol und sehen Sie, hier erhalten wir unseren Code Nun zurück zu den Komponenten Stab. Wenn wir nun eine komplexe T-Struktur haben, können wir unsere Komponente auch in diesem Suchfeld suchen. Insgesamt sind die React-Entwicklertools also ein sehr nützliches Tool zum Debuggen und Verstehen von React-Anwendungen Wir können die Komponenten, den Status, die Requisiten und vieles mehr einsehen Status, die Requisiten und vieles mehr Und mithilfe dieser können wir Probleme in unserer Anwendung leicht identifizieren und beheben 71. Sortierfunktion implementieren: Lassen Sie uns nun die Sortierfunktion in unserer Anwendung implementieren. Es gibt also viele verschiedene Möglichkeiten , die Kurzschlussfunktion zu implementieren Also hier werden wir eine externe Bibliothek namens LDSh verwenden eine externe Bibliothek namens LDSh Es ist eine sehr beliebte Bibliothek in JavaScript für den Umgang mit Objekten und Arrays Öffnen Sie also das Terminal und in das neue Terminal schreiben wir NPM I Dash Zi steht für Install. Und wenn Sie genau dieselbe Version verwenden möchten , die ich verwende, können Sie aerate 4.17 0.21 und height Enter schreiben Sehen Sie es installiert. Lassen Sie uns dieses Terminal gut minimieren. Um nun eine Bibliothek zu verwenden, müssen wir diese Bibliothek aus ihrem Paket importieren. Also schreiben wir oben einen Import-Unterstrich von Low Dash. Hier können Sie auch Low Dash oder einen anderen Namen schreiben, aber das ist der gebräuchlichste Name , den Entwickler gerne verwenden Jetzt denkst du vielleicht, warum ich Importe manchmal hier und manchmal unter diese Liste schreibe . Also wann immer ich etwas aus den Paketen importieren will, dann importiere ich es ganz oben. Und wenn ich etwas aus lokalen Komponenten, Bildern oder physisch importieren möchte , was wir im Quellordner erstellen, importiere ich das in diese zweite Liste. Auf diese Weise können wir leicht erkennen, welche Pakete wir verwenden und welche Komponenten wir verwenden. Sie können es auch trennen oder Sie können alle Eingaben zusammen schreiben. Es liegt ganz bei dir. Aber was auch immer Sie tun, machen Sie dasselbe in allen Komponenten. Konzentrieren wir uns nun auf die Sortierfunktion. Und eine Sache, die ich Ihnen über React sagen möchte ist, dass React die Statusaktualisierung synchron ausführt. Das heißt, wenn wir unseren Kurzstatus in dieser Funktion ändern , aktualisiert React diesen Status nicht sofort Lass mich dir zeigen, was ich meine. Deshalb beschränken wir uns hier auf die aktuell ausgewählten Sortiermethoden. Lassen Sie uns dieses Konsolen-Punktprotokoll einfach hierher verschieben. Sag die Änderungen und sieh sie dir an. Ändern Sie etwas in der Drop-down-Liste und sehen Sie, hier bekommen wir unser altes Bild wieder ins Lot. Wenn wir diesen Schuss erneut auf Bewertung C ändern, erhalten wir den vorherigen Status. Das ist also klar, React aktualisiert den Status nicht sofort. Aber warum funktioniert React so? Lass es mich dir erklären. Wenn Sie also in React sind, eine Funktion ausgeführt, reagieren Sie zuerst, lassen Sie die gesamte Funktion laufen. Und wenn es mehrere Statusaktualisierungen gibt, werden sie hintereinander gestapelt und dann nacheinander ausgeführt. Nach Abschluss dieser vollständigen Funktionsausführung, denn wenn React sofort einen Status aktualisiert, führt das zu unerwünschtem Rendern der gesamten Komponente, und das ist keine gute Sache. Aus diesem Grund führt React Befehle zur Statusänderung aus, nachdem die vollständige Funktionsausführung abgeschlossen ist. Wir können also unsere Sortierlogik in diese Handle-Sortierfunktion schreiben . Wir müssen etwas verwenden, das automatisch läuft, wenn sich unser Kurzstatus ändert. Kennen Sie etwas Ähnliches, das wir bereits verwendet haben? Stimmt das? Es ist Use Effect Hook. Nach diesem Use-Effect-Hook fügen wir einen weiteren Use-Effect-Hook hinzu. Und wie wir wissen, ist das erste Argument unsere Callback-Funktion und das zweite Argument ist das Dependency-Array, und in diesem Array übergeben wir unseren Kurzstatus In diesem Callback fügen wir nun eine Bedingung hinzu, die I short B nicht der Standardbedingung entspricht Wir wollen nichts für den Standardstatus kürzen. Darin schreiben wir einen Unterstrich, was unserer niedrigen Strichpunktreihenfolge Diese Methode wird verwendet, um Abkürzungen zu erstellen und die Reihenfolge in aufsteigend oder absteigend zu ändern , beide An der ersten Stelle müssen wir also unser aktuelles Array übergeben, das wir kürzen wollen, nämlich Filme filtern, weil es möglich ist , dass wir Filme nur mit sieben Sternen plus filtern und das dann kürzen wollen Nun müssen wir beim zweiten Parameter array übergeben und innerhalb dieses Parameters müssen wir die Eigenschaft übergeben, nach der wir die Kürzung durchführen wollen. Also SOT Punkt B. Und innerhalb dieser können wir auch mehrere Eigenschaften übergeben. Beim dritten Parameter müssen wir wieder ein Array übergeben, und innerhalb dieses müssen wir ASC für aufsteigend oder DSC für absteigend übergeben, und wir speichern diesen Wert in Denken Sie daran, dass wir beim ersten Parameter unser Array übergeben, das wir aufnehmen möchten Beim zweiten Parameter übergeben wir eine Reihe von Eigenschaften, anhand derer wir fotografieren werden. In unserem Fall kann es sich um das Veröffentlichungsdatum oder Stimmendurchschnitt handeln, die in der Reihe der Filme verfügbar sind. Und zuletzt beim dritten Parameter übergeben wir aufsteigend oder absteigend, so einfach ist Dieser Ausdruck gibt nun ein neues Array zurück. Also speichern wir das in einer Variablen, die als Kurzfilme bezeichnet werden. Danach setzen wir Filter-Filme auf zwei sortierte Filme. So einfach ist das. Außerdem entfernen wir dieses Konsolen-Punktprotokoll aus unserer Funktion. Wir wollen es nicht. Speichern Sie die Änderungen und schauen Sie sich das an. Schließe unsere Konsole, aktualisiere die Seite. Stellen Sie unsere Sortierung auf ein Datum ein und sehen Sie, wie sie sich ändert. Ändern Sie jetzt die Reihenfolge auf absteigend und sehen Sie , dass es auch funktioniert Sie können also sehen, wie einfach es ist, die Sortierung mit diesem Loads-Paket zu implementieren Wenn Sie diese Bibliothek nicht verwenden möchten, können Sie die Kurzschlusslogik wie folgt selbst schreiben . Es ist völlig in Ordnung Aber meiner bescheidenen Meinung nach funktioniert diese Ladebibliothek am besten für uns. Ich persönlich habe es in vielen Kundenprojekten verwendet. 72. Schalter für den Dunkellichtmodus hinzufügen: Lassen Sie uns nun sehen, wie wir unserem Projekt einen Schalter für den Dunkel- und Hellmodus hinzufügen können . Also erstelle ich diesen Switch für mein Kundenprojekt mit Ihrem STML und CSS also im Ressourcenordner Öffnen Sie also im Ressourcenordner unseren zweiten Projektordner, und hier erhalten wir diesen Komponentenordner im dunklen Modus Ziehen Sie diesen Ordner einfach in unseren Komponentenordner. Und das ist alles. So können Sie andere Projektkomponenten in Ihrem Projekt verwenden . Das ist die Stärke der Erstellung separater Komponenten. Schauen wir uns nun an, was sich in dieser Komponente befindet. Also Dunkelmodus-Komponente, und hier können wir sehen, dass wir eine Eingabe mit einem Typ-Kontrollkästchen haben , und danach haben wir ein Label, und darin habe ich zwei hinzugefügt, nämlich Komponente, Sonne und Mond Lass mich dir zeigen, wie das aussieht. Drücken Sie also Strg+P oder Befehl+B und suchen Sie nach der Navar-Komponente Jetzt müssen wir oben die Dunkelmodus-Komponente aus dem Dunkelmodus-Ordner importieren Dunkelmodus-Komponente aus dem Dunkelmodus-Ordner und diese Dunkelmodus-Komponente vor unseren Nav-Links hinzufügen Speichern Sie die Änderungen und schauen Sie sich das an. Hier bekommen wir einen Fehler. Lassen Sie uns die Konsole öffnen und sehen, dass wir hier diesen Fehler bekommen. Dies liegt daran, dass White diesen Import von React-Komponenten nicht unterstützt . Auf diese Weise können wir SVG als Komponente importieren. Um dieses Problem zu lösen, müssen wir die Bibliothek White Plug in SVGRNPMITPlug in SVGR verwenden Bibliothek White Plug in SVGRNPMITPlug in SVGR Eingabetaste Gut, Minimizer-Terminal und offener Jetzt, hier oben, geben wir SVGR aus dem weißen Plugin ds SVGR Und in diesem Plugin-Array rufen wir nach dieser Reaktion diese Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, wie schön dieser Schalter aussieht. Sie können dafür jeden beliebigen Schalter oder jedes Design verwenden. Es liegt ganz bei Ihnen und Sie können dieses Dunkelmodus-CSS auch ändern. Jetzt, hier im Dunkelmodus-Ordner, können wir sehen, dass wir zwei Swigs haben Wir können sie in unseren AsssFolder legen , damit unser Projekt besser organisiert Wählen Sie diese beiden Swiges und verschieben Sie sie in Und plötzlich erhalten wir diesen Fehler, der besagt , dass SVG am aktuellen Speicherort nicht gefunden wurde , weil wir es verschoben haben Also müssen wir unseren SVG-Pfad ändern. Also hier gehen wir zwei Ordner hoch, SATs und Sun Dot SVG Das gleiche machen wir auch für diesen Pfad. Mondpunkt SVG. Speichern Sie das und es funktioniert wieder. Nun der Grund, warum ich dir diesen vorgefertigten Dark Mode Switch gebe , weil er rein auf STML und CSS basiert Wenn ich Ihnen jeden einzelnen STML- und CSS-Teil erkläre, dann lassen sich viele Leute davon ablenken, weil wir hier sind , um React zu Außerdem gebe ich Ihnen den Link zum Ts-Tutorial, in dem Sie sehen können , wie Sie diesen Switch von Grund auf neu erstellen 73. Dunkelmodus-Implementierung: Bevor wir mit der Implementierung der Funktionen für den Dunkelmodus beginnen, wollen wir zunächst die Logik der Änderung des Themas verstehen. Grundsätzlich ändern wir nur die Farben unserer Website. So einfach ist das. Wir fügen keine Elemente hinzu oder ändern die Größe von Elementen. Nichts. Wir ändern die Farben unserer Anwendung. Die beste Lösung für diese Funktion besteht also darin, dass wir standardmäßig CSS-Variablen für jede Farbe auf unserer Website für ein dunkles Thema definieren CSS-Variablen für jede Farbe . Und wenn Benutzer das Thema auf hell ändern, ersetzen wir alle Variablen mit dem Farbwert So einfach ist das in dieser Dunkelmodus-Komponente Zuerst erstellen wir eine Funktion namens Set Dark Theme. Und in dieser Funktion möchte ich dem Körperelement ein Attribut hinzufügen. Dokumentieren Sie also den Punkt Query Selector und übergeben Sie hier den Text. Das Punkt-Set-Attribut, und hier übergeben wir den Attributnamen, das ist das Komma des Datenthemas, und wir setzen es auf dunkel also diese Eigenschaft verwenden, erhalten wir unseren Theme-Status Lassen Sie uns nun diese Funktion duplizieren und diesen Funktionsnamen ändern , um das Lichtthema und den Attributwert auf Licht zu setzen . Rufen wir nun hier eine dieser Funktionen auf. Nehmen wir an, stellen Sie ein dunkles Thema ein und sehen Sie, ob es funktioniert oder nicht. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie mit der rechten Maustaste auf die Seite und gehen Sie zur Inspektion. Im Body-Tag können Sie hier sehen, dass wir das Datenthema dunkel machen , also funktioniert es. Jetzt wollen wir sie bei Änderung dieser Summe einschalten , also schreiben wir eine neue Funktion namens Tgal Theme, und wir bekommen hier Event-Objekt, Und zuerst überprüfen wir, ob die Punktprüfung des Eventziels wahr Dann rufen wir die Funktion Set Dark Theme auf, wir nennen sie Satellite Theme Function. Jetzt wollen wir diese Funktion in dieser Eingabe bei einem Änderungsereignis übergeben . Wir sagen also, dass Veränderung einem Gesamtthema entspricht. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wenn wir dieses Thema umschalten, wird es sich hier ändern. Lassen Sie uns nun das CSS ändern. Also schwenken Sie die CSS-Datei mit dem Indexpunkt. Zuallererst verwenden wir oben die Spaltenwurzel. Und in diesen deklarieren wir alle Farbvariablen für dunkle Thema der Anwendung, da wir standardmäßig ein dunkles Thema festlegen möchten. Schreiben Sie also einen doppelten Bindestrich und schreiben Sie den Variablennamen. Nehmen wir an, der Hauptteil unterstreicht den Hintergrund und der zweite Wert hat 101010 Als Nächstes haben wir einen doppelten Strich, die Farbe des Unterstrichs und den Wert Und als nächstes fügt ein doppelter Strich einem FFE 400 eine Unterstreichungsfarbe und einen Wert hinzu Wenn Sie an einem anderen Projekt arbeiten, müssen Sie diesen Variablen, die Sie ändern möchten, alle Farben hinzufügen diesen Variablen, die Sie ändern möchten, Lassen Sie uns nun Farbvariablen für das Lichtthema definieren. Also müssen wir hier auf Daten abzielen da das Thema dem Licht entspricht Sie möchten ein helles Design als Standard verwenden, dann müssen Sie helle Themenfarben in diesem Stammverzeichnis hinzufügen, und in diesem Zustand müssen Sie dunkles Design hinzufügen In diesen definieren wir nun einen doppelten Strich, unterstrichenen Hintergrund und einen Weißwert Stellen Sie sicher, dass Sie denselben Variablennamen auch für das helle Thema verwenden , damit er diese dunklen Designvariablen ersetzt Als Nächstes haben wir die Farbe des Unterstrichs mit einem doppelten Strich. Wert auf Schwarz und zuletzt Unterstrich und Farbe der Überschrift mit doppeltem Strich auf Schwarz. Jetzt müssen wir alle Farben in unseren CSS-Dateien durch diese Variablen ersetzen unseren CSS-Dateien durch diese Variablen Hier im Hauptteil ändern wir also diesen Wert für die Hintergrundfarbe in eine Variable, und darin übergeben wir den Variablennamen, doppelten Strich und den Unterstrich im Hauptteil Farbe an variabel, doppelter Strich, Unterstrichfarbe. Speichern Sie diese Datei Lassen Sie uns nun Farben durch Variablen in anderen CSS-Dateien ersetzen. Also Panabar Dot CSS-Datei. Hier können wir diese Überschriftenfarbe in eine variable Farbe mit doppeltem Strich, Überschrift und Unterstrich ändern doppeltem Strich, Überschrift und Unterstrich Außerdem ändern wir diese Linkfarbe in eine variable Farbe mit doppeltem Strich und Unterstrich . Speichern Sie diese Datei Und jetzt schauen wir uns die CSS-Datei mit den Punkten der Filmliste an. Hier müssen wir die Farbe der Überschriften dieser Filmliste in eine variable Unterstrichfarbe mit doppeltem Strich und Überschriften ändern Überschriften dieser Filmliste in eine variable Unterstrichfarbe mit doppeltem Strich und Überschriften Sie denken vielleicht, warum wir diese Rahmenfarbe nicht ändern , weil wir ihre Farbe nicht ändern wollen, wenn wir das Thema ändern , und das ist alles, was wir ändern möchten Sag die Änderungen und sieh sie dir an. Siehst du, hier haben wir dunkles Thema und wenn es zu Mädchen ist, haben wir ein helles Thema. Standardmäßig ist dieser Schieberegler jedoch im hellen Modus. In der Dunkelmodus-Komponente in unserer Checkbox-Eingabe übergeben wir eine weitere Eigenschaft namens default check equals to true Speichern Sie die Änderungen und stellen Sie fest, dass es sich im Dunkelmodus befindet, sodass es funktioniert Aber dieses wechselnde Thema kommt sehr plötzlich. Fügen wir einen kleinen Übergang hinzu, damit es reibungslos abläuft. Also hier im Index dieser CSS-Datei, in allen Stilen fügen wir den Übergang zu allen 0,3 Sekunden hinzu, die rein und raus sind. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir bekommen diesen Moduswechsel. Hier ist eine Sache. Wenn wir diese Seite aktualisieren, beginnt sie standardmäßig mit einem dunklen Thema. Aber wir möchten, dass sich unsere Anwendung daran erinnert, ob Sie ein Design von total to light verwenden, dann bleibt es beim Aktualisieren im hellen Design Also müssen wir diese Einstellung in den Komponenten Local Storage, Soap und Dark Mode speichern Komponenten Local Storage, Soap und Dark Mode Und in dieser Funktion für ein dunkles Thema fügen wir hier dem ausgewählten Thema ein lokales Speicherpunktelement und dem Dunkelmodus einen Wert hinzu. Kopieren Sie nun diese Zeile und fügen Sie sie in Satellitentheme-Funktion ein und ändern Sie ihren Wert auf hell. Danach erstellen wir eine Variable namens Selected Theme und wir bekommen hier unser gespeichertes Theme. Im lokalen Speicher wird das Objekt abgerufen, und wir übergeben hier diesen Namen , der das ausgewählte Thema ist. Dann fügen wir eine Bedingung hinzu, wenn das gewählte Thema dem Licht entspricht, und dann nennen wir diese Funktion „Set Light Theme“ Andernfalls wird es standardmäßig mit einem dunklen Thema beginnen Also fügen wir hier die Funktion Set Dark Theme hinzu und rufen sie einfach auf. Speichern Sie die Änderungen und schauen Sie sich das an. Stellen Sie das Thema auf den Lichtmodus und sehen Sie, jetzt aktualisieren wir die Seite, wir sind immer noch im Lichtmodus. Aber hier müssen wir diesen Total-Button reparieren. In unserem Eingabe-Tag fügen wir also einfach das standardmäßig aktivierte Attribut „ ausgewähltes Thema“ hinzu, das nicht Licht entspricht Wenn unser ausgewähltes Thema also eine leere Zeichenfolge oder ein Dunkelmodus ist, bleibt der Schieberegler im Dunkelmodus Speichern Sie die Änderungen und sehen Sie, ob unser Togal-Schalter gut funktioniert Sie können diesen Code also nach Ihren Bedürfnissen ändern. Die Logik des Dunkelmodus wird jedoch dieselbe bleiben. 74. MovieList-Komponente wiederverwendbar machen: Derzeit ist unsere Filmlistenkomponente statisch. Wir wollen sie wiederverwendbar machen, was bedeutet, dass wir den Namen und das Symbol der Überschrift übergeben können und wir werden verschiedene APIs für Filme aufrufen, die am häufigsten verwandt sind, und für kommende Filme. Also lass uns das machen. Lass mich dir meinen Trigger zeigen, mit dem ich wusste, welche Daten wir durch Requisiten weitergeben wollen Bei der Move-List-Komponente wollen wir also zunächst diese API ändern Also zurück zur TMDB-API-Dokumentation. Öffnen Sie die Film-API mit den besten Bewertungen, und hier können wir sehen, dass es sich um dieselbe API-URL handelt, die wir für beliebte Filme verwendet haben Wir müssen nur beliebt durch den am besten bewerteten Unterstrich ersetzen besten bewerteten Unterstrich Und für kommende Filme müssen wir einfach kommende Filme überspringen Wir strukturieren die Requisiten hier und fügen zuerst Typen hinzu, die beliebt, am besten bewertet oder demnächst erscheinen können am besten bewertet oder Wir ändern die doppelten Codes durch hintere Häkchen und an der Stelle, an der dieser beliebte Code erscheint, geben wir Dollarklammern ein Als Nächstes wollen wir diesen Titel dynamisch ändern. Wir geben hier Culibackets und hier den Titel weiter. Wir ändern auch diesen Imoge, wir passieren hier Imoge . Außerdem ändern wir dieses T mit Häkchen, Dollar, kollifizierten Klammern, einem Imoge-Symbol Fügen wir diese Eigenschaften zu Requisiten hinzu. Also Titel und Imoge. Also das ist ganz klar. Wir müssen diese drei Eigenschaften nur als Requisiten weitergeben. Jetzt oben können wir dieses Bild im Bot entfernen. Das wollen wir nicht. Speichern Sie diese Datei und kehren Sie zu unserer App-Komponente zurück. In dieser Filmlistenkomponente übergeben wir hier type is popular title an popular und imoGetFR importieren wir Importieren Sie oben Fire aus Period Slash-Assets und Fire Period Slash-Assets Lassen Sie uns auch den Import nach Imoges durchführen. Importieren Sie also Sterne aus dem PNG-Format „Zeitraum“, Assets“ und „Leuchtende Sternpunkte Und zu guter Letzt importieren Sie die Gruppe aus der Periode, Elemente trennen sich, und das letzte PNG Lassen Sie mich die Schreibweise überprüfen. Ja, es ist richtig. Fügen wir nun die Liste der am besten bewerteten und kommenden Filme hinzu. Duplizieren Sie diese Komponente also noch zweimal und ändern Sie für eine Sekunde den Typ in den höchsten Unterstrich, den Titel in den am besten bewerteten und das Bild in den Stern Und für den dritten Typ geben Sie den Titel in demnächst ein und das Bild in die Party Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir haben drei verschiedene Sektionen für Filme. Jetzt haben wir oben Neva-Links, die nichts bewirken Wenn wir also auf den am besten bewerteten Link klicken, sollte unsere Seite zum am besten bewerteten Bereich scrollen Und wenn wir auf den nächsten Link klicken, sollte unsere Seite zum nächsten Abschnitt scrollen. Implementiere das. Es ist sehr einfach. In unserer Filmlistenkomponente haben wir also bereits Requisiten eingegeben, sodass wir den Typ als ID für diesen Abschnitt mit der Filmliste übergeben können ID für diesen Abschnitt mit der Filmliste Und das ist die Stärke der Erstellung wiederverwendbarer Komponenten. Sie können sehen, dass wir im Vergleich zu SDML-, CSS- und JavaScript-Anwendungen CSS- und JavaScript-Anwendungen unser Frontend schnell und sehr dynamisch gestalten können Speichern Sie diese Datei und öffnen Sie die NBR-Komponente. Und beim ersten Link gehen wir als beliebt Und für den zweiten Link wurde unser Pass mit dem höchsten Unterstrich bewertet Und den letzten Link geben wir als nächsten Speichern Sie Suche und Gs und schauen Sie sich das an. Klicken Sie auf den am besten bewerteten Link und scrollen Sie auf unserer Seite zum Bereich mit den am besten bewerteten. Wenn wir nun auf „ Demnächst“ klicken, scrollen Sie zum Abschnitt „Demnächst“. Aber das ist ein sehr plötzliches Scrollen. Lassen Sie uns das realistischer machen. Also füge die Indexpunkt-CSS-Datei ein. Hier fügen wir Stile für SDML-Tags, geschweifte Klammern und Scrollverhalten hinzu, geschweifte Klammern und Scrollverhalten hinzu, um das Bild zu glätten. Und das ist alles. Ja, wir müssen nichts anderes tun. Speichern Sie die Ringe und nehmen Sie einen. Klicken Sie auf einen Link und sehen Sie, wir bekommen diesen reibungslosen Scroll-Effekt Außerdem funktionieren unsere Filter - und Kurzschlussfunktionen gut mit einzelnen Komponenten Diese Anwendung sieht also sehr einfach aus, hat aber viele Funktionen aus der realen Welt, die unsere Anwendung modern und benutzerfreundlich machen unsere Anwendung modern und . Also herzlichen Glückwunsch. Hier ist unser Projekt zum Filmverrückten abgeschlossen. Sie können sehen, dass React sehr einfach und benutzerfreundlich ist. Sie müssen nur einige grundlegende Konzepte wie Komponenten, Status, Requisiten und einige RM-Methoden beherrschen grundlegende Konzepte wie Komponenten, Status, , und schon kann es losgehen Und noch etwas: Wenn Sie sich nur den Kurs ansehen, können Sie die Anwendung nicht selbst erstellen musst zusammen mit mir programmieren, oder du kannst dir eine Lektion ansehen und dann selbst Code schreiben. Mit dieser Methode wirst du React besser verstehen und auch dein Logikaufbau wird sich mit der Zeit verfeinern. Wenn Sie Zweifel haben, können Sie mich im Bereich Fragen und Antworten Ich beantworte gerne Ihre Fragen und sehe Sie im nächsten Abschnitt 75. Abschnitt 08 React-Routing: Willkommen zu Abschnitt acht des ultimativen React-Kurses. In diesem Abschnitt werden wir etwas über Routing lernen, das das sehr wichtige Konzept von React ist. Wenn Sie an großen React-Projekten arbeiten möchten, müssen Sie Ihrem Projekt auf jeden Fall React-Routing hinzufügen . Wir werden mehrere Routen, Single-Pace-Routing, Routenparameter, Abfragezeichenfolge, verschachteltes Routing, Navigation und vieles mehr sehen Routenparameter, Abfragezeichenfolge, verschachteltes Routing, Navigation und vieles mehr Nachdem Sie diesen Abschnitt abgeschlossen haben, haben Sie ein solides Verständnis dafür , wie Routing in React funktioniert Beginnen wir also mit diesem Abschnitt. 76. Projekt einrichten: Lassen Sie uns nun unser neues Projekt einrichten, weil wir nicht auch unser Projekt durcheinander bringen wollen und wir auch nicht alle Routing-Konzepte in diesem Projekt lernen . Nachdem wir das gelernt haben, werden wir auch Routing in unser Projekt aufnehmen. Im Ressourcenordner erhalten Sie also einen Ordner namens Routing Template. Öffnen Sie diesen Ordner und öffnen Sie ihn im VS-Code. Bisher haben wir unser Projekt von Grund auf neu erstellt. diese Weise können Sie jetzt andere React-Projekte verwenden und mit der Arbeit an ihnen beginnen. Also öffnen wir unser Terminal, indem wir Control plus Backtick oder Command plus Backtick drücken Control plus Backtick oder Command plus Backtick Und einfach hier, NPM, führe Dow aus und drücke Enter Und hier bekommen wir diese Nachricht. Weiß wird nicht als interner oder externer Befehl erkannt . Warum erhalten wir diese Nachricht? Der Grund dafür ist, dass wir in diesem Projekt keine Knotenmodule haben. Wie können wir nun Knotenmodule hinzufügen? Installieren Sie mithilfe von NPM und drücken Sie die Eingabetaste. Dieser Befehl führt alle Pakete und Bibliotheken aus, die wir in unserem Projekt verwendet haben Mit anderen Worten, es werden alle Abhängigkeiten mit verfügbaren Versionen in unserer Paket-SN-Datei installiert . Und deshalb ist das Paket jsnFle wichtiger als Nicht-Module Jetzt können wir NPM Run Dov ausführen. Entschuldigung, ich mache hier einen Tippfehler. Lass mich Dow mit NPM ausführen. Öffne diese URL und sieh, hier bekommen wir unsere Bewerbung. Mal sehen, was ich zu dieser Anwendung hinzufüge. In der App-Komponente haben wir also NaBr oben und ein Haupt-Tag für unsere Anwendung In diesem Haupt-Tag wollen wir das gesamte Routing durchführen. Schauen wir uns nun an, was in diesem NaBr steckt. Sie können sehen, dass dieser NaBr nur eine Bestellliste mit vier Listenelementen hat nur eine Bestellliste mit vier Listenelementen Und in diesen haben wir ein einfaches Anker-Tag mit HF und haben hier verschiedene Links erwähnt 77. Routing für React-Anwendung hinzufügen: Bevor wir Routing implementieren, wollen wir zunächst verstehen, was Routing ist. Hier haben wir also ein paar Anker-Tags. Wenn wir auf einen der Links klicken, werden wir zu diesem Link weiterleiten. Sehen Sie unter URL, wir haben einen lokalen Host, rufen Sie den Schrägstrich 5173 ArtCls auf Wenn wir also auf Artikel-URL klicken, wollen wir die Artikelseite anzeigen, und das nennen wir in einfachen Worten Routing Wenn wir auf den Link Produkte klicken, möchten wir die Produktseite anzeigen. Dies ist ein sehr häufiges Merkmal jeder Website. In unseren beiden Projekten haben wir kein Routing hinzugefügt, da unsere Anwendung nur eine Seite hat. Wenn wir jedoch ein anderes Projekt erstellen und weitere Seiten hinzufügen müssen, benötigen wir Routing. Wie wir wissen, ist React eine Ja Script-Bibliothek und hat keine Funktion zur Implementierung von Routing-Funktionen. Um Routing zu unserer Anwendung hinzuzufügen, verwenden wir eine externe Bibliothek namens React Router Dom. Dies ist eine der beliebtesten Bibliotheken für den Umgang mit Routing. Öffnen Sie also das Terminal und fügen Sie ein neues Terminal hinzu und schreiben Sie NPM install, React Router Dom Wenn Sie dieselbe Version installieren möchten, die ich verwende, können Sie hier mit der Rate 6.11 0.1 hinzufügen und die Eingabetaste drücken Wenn also in Zukunft React Router Dom grundlegend aktualisiert wird , können Sie diesem Code immer noch folgen Um Routing zu unserer Anwendung hinzuzufügen, müssen wir zunächst unsere Anwendung mit einer Browser-Router-Komponente umschließen, müssen wir zunächst unsere Anwendung mit einer Browser-Router-Komponente umschließen die im React-Router-Dom-Paket verfügbar ist. Also penmin dot JSX-Datei und oben importieren wir den Browser-Router aus React Router Dom Dass ich nicht den vollständigen Namen schreibe, ich schreibe nur den ersten Buchstaben dieser Bibliothek, RRD, und Vor unserer App-Komponente hatten wir die Browser-Router-Komponente und dieses schließende Tag nach der App-Komponente verschoben Diese Browser-Router-Komponente ist sehr wichtig, da das Routing ohne sie nicht funktioniert. Außerdem zeichnet diese Komponente aktuelle URL und die Navigation in unserer Geschichte auf. Mach dir keine Sorgen. Wir werden diese Geschichte in den nächsten Lektionen sehen. Denken Sie vorerst daran, dass unser Routing ohne diesen Browser-Router nicht funktioniert. Speichern Sie diese Datei und kehren Sie zu unserer App-Komponente zurück. Hier definieren wir unser Routing. Zuallererst fügen wir hier eine Komponente hinzu, die Route genannt wird. Mithilfe dieser können wir definieren, auf welcher Seite welche Komponente angezeigt werden soll. Mach dir keine Sorgen, sieh dir das an. Zuallererst wollen wir also unsere Home-Komponente definieren, und hier fügen wir unseren Pfad hinzu, der Home ist. Also fügen wir hier nur den Schrägstrich Now hinzu, welche Komponente wir anzeigen wollen Wir wollen diese Home-Komponente anzeigen. Also fügen wir das Elementattribut equals in CL-Klammern hinzu, wir fügen die Home-Komponente Hier können wir sehen, dass der automatische Import nicht funktioniert. Also hier haben wir eine weitere Erweiterung dafür. Öffnen Sie das Erweiterungsfenster suchen Sie nach Auto Import und öffnen Sie diese zweite Erweiterung. Notieren Sie sich diesen Namen, Sie müssen dieselbe Erweiterung installieren. Lassen Sie uns diesen Erweiterungs-Tab schließen und wieder, genau hier, Home. Siehst du, jetzt bekommen wir automatische Eingabe. Diese Routenlinie teilt unserer Anwendung also mit, ob die Browser-URL dieser Pfad ist, und zeigt dann dieses Element an. So einfach ist das, speichern Sie die Änderungen und werfen Sie einen Blick darauf. Öffnen Sie die Konsole und hier erhalten wir eine Fehlermeldung. Eine Route darf nur als untergeordnetes Element des Routenelements verwendet werden . Bitte fügen Sie Ihre Route in unsere Routen ein. Es heißt also eindeutig, dass wir unsere Routenkomponente mit der Routenkomponente verbinden sollen. Also oben importieren wir Routen nach dieser Route. Und vor unserer Route fügen wir die Routenkomponente hinzu. Verschieben Sie dieses abschließende Tag hinter diese Route, speichern Sie die Zentimeter und schauen Sie sich das an. A, hier bekommen wir unsere Home-Komponente auf der Indexseite unserer Anwendung. Lassen Sie uns jetzt andere Routen festlegen. Duplizieren Sie diese Routenkomponente noch dreimal. Zunächst ändern wir den Pfad in den Schrägstrich Produkte“ und die Komponente „Element“ in „Produkte Sehen Sie, welcher Import ordnungsgemäß funktioniert. Komponente „Pfad zu Artikeln“ und Komponente „Element zu Artikeln“. Und endlich der Pfad zum Schrägstrich Admin und das Element zur Admin-Komponente Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, zuerst sind wir zu Hause. Klicken Sie nun auf Produktlink. Wir bekommen Produkte, Artikel und Admin. Es funktioniert also gut. Jetzt fragen Sie sich vielleicht, warum wir unsere Routen nur hier definieren? Können wir Routen an einem anderen Ort definieren? Ja, wir können unsere Routen an jedem Ort definieren , an dem wir das Routing anzeigen möchten. Beispiel: Wir erstellen eine E-Commerce-Website und möchten diesem Projekt Routing hinzufügen. Diese Website hat verschiedene Bereiche wie die Navigationsleiste oben, die Fußzeile unten, die linke Seitenleiste für die Anzeige neuer Produkte und einen Hauptbereich In der Navbar haben wir jetzt ein paar Links wie Handys, Laptops, Uhren, Kleidung usw. Wenn wir auf einen dieser Links klicken, müssen wir diese Seite in diesem Hauptbereich öffnen Andere Teile der Website bleiben unverändert. Nur dieser Hauptabschnitt wird geändert. In diesem Hauptabschnitt müssen wir also unsere Routen definieren, und genau das haben wir in unserem Routing-Projekt getan. Kurz gesagt, denken Sie daran, dass sich in dem Teil, in dem wir Routen definieren, nur dieser Teil ändert wenn wir zu einer anderen Seite weiterleiten. 78. Seite nicht gefunden hinzufügen: In unserer Anwendung möchte der Benutzer jetzt auf eine URL wie ein Slash-Profil umleiten Wenn unser Projekt also keine Profilseite hat, können Sie hier sehen, dass wir nichts bekommen, was in Ordnung ist Aber wir wollen die 40, vier nicht gefundene Seite anzeigen , wenn der Benutzer auf eine Seite umleitet, die in unseren Routen nicht definiert ist. Schauen wir uns also an, wie wir das machen können. Nachdem wir alle Routen abgeschlossen haben, fügen wir eine weitere Routenkomponente hinzu. Und wir übergeben Pfad gleich Stern, was bedeutet, welcher Pfad auch immer in diesen anderen Routen nicht verfügbar ist , und wir übergeben das Element an die nicht gefundene Komponente Schauen wir uns nun an, was sich in dieser nicht gefundenen Komponente befindet. Siehst du, ich füge einfach ein Tag mit 404, Text „ Seite nicht gefunden hinzu und füge Rot Farbe hinzu. Also zurück zu unserer App-Komponente, speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir die 404-Nachricht „Seite nicht gefunden“. Sie können dieser Seite , die nicht gefunden wurde, benutzerdefinierte Stile hinzufügen. Es liegt ganz bei dir. Wenn wir jetzt zur Startseite gehen, bekommen wir unser Zuhause, und wenn wir zu einer anderen URL weiterleiten, sagen wir ABC, dann erhalten wir 404, Seite nicht gefunden. 79. Einseitige Anwendung erstellen: Bei unserer Implementierung haben wir jetzt kaum ein Problem. Wenn Sie feststellen, dass unsere gesamte Seite aktualisiert wird, wenn wir auf Links klicken . Lass es mich dir zeigen. Öffnen Sie die Entwicklertools und gehen Sie zu NetworkTab. Klicken Sie nun auf Anink und sehen Sie hier, dass wir diese 21-Anfrage stellen Wir wissen jedoch, dass React den gesamten Code in einer Bundle-Datei zusammenfasst und der Browser diesen Code dann je nach Bedarf abruft diesen Code dann je nach Wir müssen nicht für jede Seite ein vollständiges Paket senden. Wenn wir beispielsweise YouTube verwenden, wird die YouTube-Website nur vorübergehend geladen. Wenn wir danach ein Video öffnen, wird nur der erforderliche Teil geladen, aber es wird nicht erneut aktualisiert Diese Art von Anwendung wird als einseitige Anwendung bezeichnet Lassen Sie uns also unsere Anwendung zu einer einseitigen Anwendung machen ist die häufigste Funktion moderner Websites. Dafür öffnen wir also unsere Nebr-Komponente und fügen an der Stelle dieses Anchor-Tags eine Komponente namens Link hinzu, die wir von React Router Doom bekommen Sehen Sie, wie es oben automatisch installiert wurde. Lassen Sie uns auch diese Anker-Tags durch diese Linkkomponente ersetzen diese Linkkomponente ersetzen An der Stelle dieses HRF muss nun diese Linkkomponente ein Attribut angeben Wählen Sie diese HF aus und drücken Sie Strg plus D oder Befehl plus D und ersetzen Sie diese HRF durch zwei Ohne diese beiden Attribute funktioniert diese Link-Komponente nicht Speichern Sie die Änderungen und sehen Sie sich das an. Klicken Sie jetzt auf einen Link und sehen Sie, dass wir nicht alle SgtprQuests durchführen und dass unsere Websites auch nicht jedes Mal aktualisiert werden So können Sie sehen, wie einfach es ist unsere Anwendung zu einer einseitigen Anwendung zu machen Wir müssen nur die Link-Komponente an der Stelle der Ankerlinks verwenden . Manchmal möchten wir den aktuellen Routen-Link hervorheben Wenn wir uns also auf der Produktseite befinden, markieren wir den Link, damit der Benutzer weiß, auf welcher Seite er sich gerade befindet. Es ist wirklich einfach. Ersetzen Sie diese Link-Komponente durch eine andere Komponente namens Navink. Lassen Sie uns diesen Link Import entfernen Wir brauchen es nicht. Speichern Sie die Gene und schauen Sie sich das an. Es funktioniert genauso wie zuvor. Lass mich dir jetzt etwas Cooles zeigen. Schauen Sie sich diesen Link an und sehen Sie, ob wir den Link „Produkte“ auswählen Wir erhalten hier eine aktive Klasse. Unabhängig davon, welcher Link ausgewählt ist, Komponente New Bar diesem Link eine aktive Klasse hinzu Durch die Verwendung von CSS können wir also seinen Stil ändern In unserer Navbar-Punkt-CSS-Datei setzen wir also bei Punkt Navbar, Liste, Ankerpunkt Active Cali Brackets, Schrift auf 500 und Farbe auf Speichern Sie die Änderungen und den Galec. Siehst du, hier wird der Link zu unseren Artikeln hervorgehoben. Sie können sehen, wie reibungslos es funktioniert, und das ist die Stärke von React Router Dom. 80. Routingparameter (useParams): Jetzt müssen wir in unserer Anwendung manchmal Routenparameter verwenden Lassen Sie mich Sie mit dem Beispiel überraschen. Hier haben wir also die Komponente unserer Produkte. Lassen Sie uns nun einige Links in diese Komponente einfügen. Nach diesem AHT-Tag fügen wir also eine ungeordnete Liste hinzu, und darin brauchen wir Li, und darin brauchen wir die Link-Komponente Und hier übergeben wir bei Produkten mit doppeltem Code das Attribut zwei gleich zwei Wir wollen drei Verbündete mit einem Link im Inneren. Also schließen wir diesen Ali-Anker-Tag ein, den Link in Klammern und multiplizieren ihn mit drei und drücken Siehst du, wir bekommen diesen MT. Ich weiß, das ist ein bisschen kompliziert, aber es ist nur eine Zeit der Übung. Sobald es Ihnen langweilig wird, wiederholten Code einzugeben, werden Sie versuchen, dafür METs und Abkürzungen zu verwenden Lassen Sie uns hier Produkt eins übergeben, drücken Sie die Tabulatortaste, Produkt zwei, Tab und Produkt Jetzt wollen wir in diesem Link die Pfad-ID für jedes Produkt eins, Schrägstrich zwei und drei hinzufügen Pfad-ID für jedes Produkt eins, Schrägstrich zwei und drei Wenn wir also Produkte eins öffnen, was bedeutet, dass wir das Produkt sehen wollen, das die ID eins hat, oder welchen Parameter wir auch immer hier übergeben. Dies ist die übliche Struktur des Routings, und dies wird als Routenparameter bezeichnet. Mithilfe dieser ID rufen wir Details zu diesem bestimmten Produkt ab und zeigen diese Details auf unserer Webseite Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Gehen Sie zur Produktseite und hier erhalten wir eine Fehlermeldung. Also öffne die Konsole und sieh, hier bekommen wir, dass Ink nicht definiert ist. Also zurück zum VS-Code, und hier importieren wir diese Linkkomponente. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf Produkt eins und sehen Sie, hier bekommen wir die 404-Seite nicht gefunden, weil wir vergessen haben, eine Route für diesen Link hinzuzufügen. Also zurück zur App-Komponente, und hier, nach dieser Produktroute, fügen wir einen weiteren Routenpfad zu Produkten mit Schrägstrich hinzu, Schrägstrich, und jetzt fügen wir hier unseren Routenparameternamen Sagen wir ID. Beachten Sie , dass wir hier nur einen Routenparameter übergeben , weil wir nur einen benötigen. Wir können aber auch so viele Routenparameter übergeben, wie wir möchten. Denken Sie daran, wenn wir einen Routenparameter hinzufügen möchten, müssen wir am Anfang einen Doppelpunkt verwenden. Sonst wird es nicht funktionieren. Jetzt entspricht das Element hier fügen wir eine einzelne Produktkomponente Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf einen beliebigen Produktlink und sehen Sie, wie wir zu einer einzelnen Produktkomponente weiterleiten. Es funktioniert also. Jetzt fragen Sie sich vielleicht, was ist der Zweck dieses Routenparameters? Wir erhalten für jedes einzelne Produkt dieselbe Seite . Lass mich dir das zeigen. Eine Aufgabe besteht darin, diese ID in dieser einzelnen Produktkomponente zu ermitteln. Bei einer einzelnen Produktkomponente und zum Abrufen des Routenparameters von der URL haben wir also und zum Abrufen des Routenparameters von der URL einen Hook im React-Router-Dom Oben geben wir also Use-Parameter aus dem React-Router-Dom ein. Params stehen für Parameter. In unserer Funktionskomponente nennen wir diesen Use-Params-Hook und dieser Hook gibt automatisch das Objekt der Routenparameter zurück, und das war's Wir müssen nichts anderes tun. Lassen Sie uns diese in einer Variablen namens params speichern. Und danach protokollieren Sie diese Parameter einfach mit einem Punkt in der Konsole. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Öffnen Sie die Konsole. Und sehen Sie hier, wir bekommen Routenparameter im Objekt. Denken Sie daran, dass dieser Eigenschaftsname derselbe ist , den wir in unserer Route hier beschreiben. In der realen Anwendung können wir nun mithilfe dieser ID mithilfe dieser ID Daten von unserem Backend abrufen und viele weitere Dinge tun Lassen Sie uns diese ID vorerst einfach hier anzeigen. Also destrukturieren wir dieses Objekt und erhalten die ID. Entferne nun diese Konsole und lass uns diese ID nach dieser Überschrift ausdrucken Speichern Sie die Änderungen und schauen Sie sich das an. Schauen wir, wenn wir zu Produkt zwei übergehen, bekommen wir ein einziges Produkt zwei. Und wenn wir zu Produkt drei übergehen, erhalten wir ein einziges Produkt drei. Also, hier dreht sich alles um Routenparameter. 81. Abfragezeichenfolge: Geben wir nun den URL-Parameter ein, dem es sich um eine quadratische Zeichenfolge handelt Daten, die wir mit unserer URL-Anfrage übergeben möchten. Lassen Sie mich Ihnen ein Beispiel geben. Also hier Seite. Stellen Sie sich vor, wir haben eine Artikelliste und möchten diesen Artikel nach Datum und Kategorie auf Elektronik kürzen. Dies sind die Daten, die wir in unserer URL weitergeben möchten. Hier übergeben wir also die URL, das Fragezeichen, und danach wird alles, was wir hier übergeben, als Abfragezeichenfolge verwendet, und wir können diese Variablen in unserer Artikelkomponente abrufen. Ein anderes gängiges Beispiel für eine Abfragezeichenfolge ist die Suche. Lass es etwas auf YouTube. Beachten Sie, dass sich die URL in den Ergebnissen ändert, Fragezeichen, und hier erhalten wir die Abfragezeichenfolge. Wenn wir eine URL eingeben und sie in eine andere Registerkarte einfügen, erhalten wir dasselbe Suchergebnis. Das ist also die Arbeit der Abfragezeichenfolge. Also zurück zu unserem Beispiel, wir wollen hier an die Abfragezeichenfolge übergeben. Zuerst schreiben wir unseren Variablennamen, kurz nach gleich, ohne irgendwelche Codes, wir übergeben hier unseren Wert Sagen wir Datum. Um nun den zweiten Parameter zu übergeben, verwenden wir die Personenkategorie, die der Elektronik entspricht Nun wollen wir mal sehen, wie das geht. Ich weiß, das ist ein bisschen langweilig, aber diese Konzepte sind sehr wichtig, wenn wir an einer großen offenen Artikelkomponente arbeiten , und ganz oben müssen wir einen Hook importieren, um Abfragezeichenfolgenparameter abzurufen. Verwenden Sie die Suche PeramsrRouter doom. Dieser Use-Suchparameter ist unserem Use-State-Hook sehr ähnlich Wir nennen diesen Hook hier in unserer Funktion. Und bete mit zwei Gegenständen. Also speichern wir das in Variablen und verwenden die R-Destrukturierung, wir halten uns an die Suchparameter und die Suche nach Kommas. Sie können sehen, Suche nach Kommas. Sie dass es der Verwendung von State Hook sehr ähnlich ist Jetzt in dieser ersten Eigenschaft String-Parameter. Und mithilfe der festgelegten Suchparameter können wir Abfragezeichenfolgenparameter festlegen Sehen wir uns zunächst die Suchparameter an. Diese Suchparameter haben eine Methode namens GT. Und in Klammern müssen wir unseren Variablennamen übergeben. Sagen wir kurz B. Stellen Sie sicher, dass wir denselben Variablennamen schreiben , den wir in der Abfragezeichenfolge übergeben, und diese in der Variablen sort B speichern Lassen Sie uns nun diese Zeile duplizieren, indem plus lt plus Pfeil nach unten verwenden Plus Option plus Abwärtspfeil und ändere diese Aufnahme in eine Kategorie. Lassen Sie uns das jetzt hier ausdrucken. Also eckige Klammern, kurz nach, und danach, eckige Klammern Kategorie Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir diese beiden Query-String-Variablen. Sehen wir uns nun an, wie wir Set Search Perms zum Setzen von Abfragezeichenfolgenparametern verwenden können Set Search Perms zum Setzen von Abfragezeichenfolgenparametern Nach diesem AT-Tag erstellen wir eine Schaltfläche namens Shot B-Ansichten Außerdem übergeben wir hier beim Klicken und darin übergeben wir function, handle, short, B. Lassen Sie uns nun diese Funktion definieren. Also Const Handle geschossen von. Pfeilfunktion, und hier verwenden wir Set Search Perms und hier müssen wir Query-String-Variablen als Schlüssel-Wert-Paar übergeben Query-String-Variablen als Schlüssel-Wert-Paar Sortiert nach Ansichten und bewertet sie. Welches Objekt wir auch immer hier übergeben, es wird als Abfragestring gesetzt. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf diese Schaltfläche und sehen Sie in der URL, dass die Abfragezeichenfolge zu kurz B den Ansichten entspricht, aber unsere Kategorie ist weg In diesem Objekt fügen wir eine weitere Schlüsselkategorie dieser Kategorievariablen eine weitere Schlüsselkategorie und einen weiteren Wert hinzu Und wie wir wissen, können wir dies entfernen, wenn Schlüssel und Wert identisch sind. Speichern Sie die Änderungen und schauen Sie sich das an. Gehen Sie zurück zu unserer Seite und klicken Sie erneut auf diese Schaltfläche. Sehen Sie, hier haben wir unsere Abfragezeichenfolge. Sie können sehen, wie einfach es ist. 82. Verschachteltes Routing: Stellen wir uns nun diese Admin-Seite als Admin-Panel der Website Auf dieser Seite kann der Administrator alle Verkaufsdetails und alle Verkäuferdetails einsehen . Also Admin-Komponente, wir wollen zwei Link-Komponenten hinzufügen. Also im Inneren brauchen wir Ali und darin brauchen wir eine Link-Komponente mit zwei Attributen, die gleich admin sind, und wir schließen diese Ali- und Link-Komponente mit Klammern ein, jetzt für den ersten Link, wir fügen sales und Link auch den Schrägstrich Ali und darin brauchen wir eine Link-Komponente mit zwei Attributen, Link-Komponente mit die gleich admin sind, und wir schließen diese Ali- und Link-Komponente mit Klammern ein, jetzt für den ersten Link , wir fügen sales und Link Sales hinzu Zweitens verknüpfen wir Verkäufer und Verkäufer und stellen sicher, dass die Linkkomponente aus React Router Doom importiert Speichern Sie die Änderungen und schauen Sie sich das an. Wenn wir auf den Verkaufslink klicken, werden wir zur Admin-Verkaufsseite weitergeleitet Aber hier bekommen wir die Seite nicht gefunden. Hier wollen wir keine neue Seite öffnen. Stattdessen möchten wir die Verkaufsseite in diesem Admin-Panel anzeigen . Etwas sieht so aus. Wir klicken auf die Verkaufsseite, dann öffnet sich die Verkaufsseite unter diesem Admin-Panel. Und wenn wir die Verkäuferseite öffnen, wird diese Seite auch hier angezeigt. Stellen Sie sich also vor, diese vier Links sind unsere horizontale Leiste und diese beiden Links sind unsere Seitenleiste. Dieses Routing wird als verschachteltes Routing bezeichnet. Schauen wir uns also an, wie wir verschachteltes Routing hinzufügen können. Um die App-Komponente jetzt verschachteltes Routing zu definieren, müssen wir unsere verschachtelten Routen in eine Route einbinden An der Stelle dieses selbstschließenden Tags fügen wir nun ein separates schließendes Tag zwischen diesen Wir müssen unsere verschachtelte Route definieren Also fügen wir einen weiteren Routenpfad hinzu. Hier passieren wir unseren verschachtelten Routenpfad. Wenn Sie also Slash Admin Slash Sales definieren möchten, dann müssen wir hier nur sales schreiben, weil Slash Admin Nun vom Element zur Vertriebskomponente. Lassen Sie uns nun diesen Code duplizieren, und am Ort des Verkaufs geben wir das Verkäuferelement auch an Verkäufer weiter. Speichern Sie die Scharniere und schauen Sie sich das an. Wenn wir jetzt auf den Verkaufslink klicken, keine 404-Fehlerseite angezeigt, und auf beiden Seiten wird auch dieses Admin-Panel angezeigt Nun, warum wir unsere Vertriebs- und Verkäuferkomponente nicht bekommen. Dafür müssen wir also noch einen Schritt befolgen. Also Admin-Komponente , in der wir dieses NASDAR-Routing anzeigen möchten Und hier haben wir eine Komponente, die spezifiziert, an welcher Stelle wir das NASDA-Routing anzeigen möchten Also geben wir oben den Ausgang von React Router Doom ein. Und wo wir unser verschachteltes Routing direkt nach diesen beiden Links anzeigen wollen unser verschachteltes Routing direkt nach diesen beiden Also hier fügen wir unsere Outlet-Komponente hinzu und das war's. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Seiten. Beide Seiten funktionieren gut. Lassen Sie uns diese Lektion noch einmal zusammenfassen. Um also verschachteltes Routing zu definieren, werden wir unsere Unterseiten mit der Hauptrouten-Komponente In diesem Fall heißt es jetzt hinzufügen. Was auch immer wir in diesem Element übergeben, Was auch immer wir in diesem Element übergeben wird auf beiden Seiten angezeigt Wenn wir dieses Element hier nicht weitergeben, werden wir dieses Element auf diesen Seiten nicht sehen. Dies wird als SAD-Routing bezeichnet, da wir eine Seite innerhalb einer anderen Seite anzeigen. Und um das SAD-Routing anzuzeigen, müssen wir Outlet in dieser Admin-Komponente übergeben , so einfach ist das. Außerdem ist dieses verschachtelte Routing für React-Anwendungen nicht sehr verbreitet Nur manchmal brauchen wir das, mach dir darüber keine Sorgen. Jetzt hier sieht unsere App-Komponente ein bisschen hässlich aus, weil das alles Routing ist. Lassen Sie uns dieses Routing also in einer separaten Komponente speichern. Also schneiden wir das gesamte Routing und erstellen in unserem Quellordner eine neue Komponente namens Routing Dot GSX Wir fügen Boilerplate-Code und fügen an der Stelle dieser DU unsere Routen fügen an der Stelle dieser DU unsere Lassen Sie uns nun auch alle Eingaben aus der App-Komponente außer diesem Nabriput ausschneiden und in die Routing-Komponente einfügen Lassen Sie uns auch diese Routen- und Routenkomponente von hier aus ausschneiden und in unsere Routing-Komponente einfügen Speichern Sie diese Datei und kehren Sie zu unserer App-Komponente zurück. Fügen wir hier alle Routing-Komponenten hinzu. Speichern Sie dies und sehen Sie, wie unsere App-Komponente sauber aussieht. 83. Programmgesteuerte Navigation: Sehen wir uns ein weiteres wichtiges Merkmal des Routings an, nämlich die Navigation Stellen Sie sich also vor, wenn ein Benutzer diese Admin-Panel-Seite besucht, möchten wir überprüfen, ob die Benutzerrolle Administrator ist oder nicht. Also hier schließe ich zunächst alle anderen Dateien, schließe ich zunächst alle anderen Dateien, und hier definieren wir ein Objekt namens user equals object und übergeben hier die Eigenschaftsrolle und den Wert an, sagen wir, user Dies ist nur ein Beispiel für die Navigation. Danach können wir Ihre Bedingung weitergeben, z. B. wenn die Punktrole des Benutzers nicht gleich Admin ist, dann leiten wir diesen Benutzer auf die Startseite oder Anmeldeseite Um zu navigieren, haben wir also eine Komponente namens Navigate. Ganz oben importieren wir also Navigate aus einem Router-Doom. Und in diesem I-Blog wir einfach diese Navigationskomponente zurück Und innerhalb dieser Komponente fügen wir dem gleichen Home-Pfad ein Attribut hinzu, und das war's. Stellen Sie sicher, dass Sie diese Navigationskomponente zurückgeben , da ich bei der Aufzeichnung dieser Lektion vergessen habe, sie zurückzugeben, und viel Zeit damit verschwendet habe, diesen Fehler zu finden. Speichern Sie die Änderungen und sehen Sie sich das an. Versuchen Sie, das Admin-Panel zu öffnen und sehen Sie, dass wir direkt zur Startseite weiterleiten. Jetzt gibt es noch eine Möglichkeit, zu navigieren. Wenn wir also hier zur einzelnen Produktseite gehen, möchten wir hier die Schaltfläche „ Zurück“ hinzufügen. Öffnen Sie eine einzelne Produktkomponente. Zuerst fügen wir hier die Schaltfläche „ Zurück“ hinzu und fügen hier ein Ereignis beim Klicken hinzu, was Handleba entspricht Lassen Sie uns nun diese Funktion definieren. Also const, handleba, pfeilfunktion. Und darin schreiben wir unsere Navigationslogik. Dies wird als programmatische Navigation bezeichnet. Dafür müssen wir also einen Hook namens use Navigate verwenden. Also geben wir oben den Hook use Navigate ein, innerhalb dieser Komponente nennen wir diesen Hook, und dieser Hook gibt uns die Navigationsfunktion Also speichern wir diese Unvariable, die allgemein als Navigate bezeichnet wird. Und innerhalb dieser Handtaschenfunktion nennen wir diese Navigationsfunktion einfach Und darin müssen wir unseren Weg gehen. Also hier passieren wir einfach minus eins. Wenn wir zu einer bestimmten Seite navigieren wollen, können wir so etwas schreiben. Slash-Artikel. Lassen Sie uns das jetzt auf minus eins ändern , die Änderungen speichern und einen Blick darauf werfen Sehen Sie, wenn wir auf diese Schaltfläche klicken, gelangen wir zu unserer vorherigen Seite. So können wir in unseren wichtigen Funktionen von React Router Dom zu verschiedenen Seiten navigieren . Wenn Sie mehr über diese Bibliothek erfahren möchten, können Sie deren Dokumentation lesen. Aber um moderne React-Anwendungen zu erstellen. Wenn Sie Zweifel haben, können Sie mich im Bereich Fragen und Antworten fragen. Ich entschuldige mich für diese Routing-Projektstile, und Antworten fragen. Ich entschuldige mich für diese Routing-Projektstile weil ich möchte, dass Sie wichtige Routing-Konzepte verstehen ohne sich Gedanken über Stil und Aussehen der Anwendung Entwickler wissen es nicht, also zögern Sie nicht, Fragen dazu zu stellen 84. Übung für das Routing: Jetzt ist es Zeit für Routing-Übungen. In unserem vorherigen Filmprojekt hatten wir also kein Routing. Ihre erste Aufgabe ist also das Routing in diesem Projekt. Die Route sollte so aussehen. Auf der Startseite zeigen wir standardmäßig die Liste der beliebtesten Filme an. Wenn wir jetzt auf die am besten bewerteten Filme klicken, werden wir zur Route mit den besten Bewertungen weitergeleitet Wenn wir auf den Link mit den besten Bewertungen klicken, werden wir zur nächsten Seite weitergeleitet, und die nächsten Daten werden angezeigt. In der Navigationsleiste können Sie auch die aktive Route sehen. Danach besteht Ihre zweite Aufgabe darin, wenn wir auf eine Filmkarte klicken, diese wird mit ihrer ID zum Movie Slash weitergeleitet Mach dir keine Sorgen um diese Seite. Sie müssen die Film-ID auf dieser Seite anzeigen. Keine Stile, nichts. Nur einfacher Text. Ich übe hier nur das Routing. Wenn Sie dieses Projekt zu Ihrem Portfolio hinzufügen möchten, stellen Sie sicher, dass Sie dieses Projekt duplizieren, und dann diese Übung mit doppeltem Code durch. also 15 bis 20 Minuten Zeit sich also 15 bis 20 Minuten Zeit für diese Übung und schauen Sie sich die einzelnen Lektionen jederzeit noch einmal an. Es ist völlig in Ordnung. Ziel dieser Übung ist es, grundlegende Routing-Konzepte zu erläutern. Wir sehen uns also nach Abschluss dieser Übung. 85. Routing zu Project 02 hinzufügen: Ich hoffe, Sie versuchen, diese Übung zu lösen , denn der Versuch, diese Übung zu lösen , zeigt, dass Sie wirklich lernen möchten, zu reagieren. Wenn du es also überhaupt versuchst, dann schätze dich selbst dafür. Sehen wir uns nun die Lösung unserer Routing-Übung an. Zuallererst werde ich unser altes Projekt nicht unterbrechen Stattdessen werden wir ein doppeltes Projekt erstellen. Kopieren Sie also alle Dateien außer den Node-Modulen und der Package Dot Log Dot GCN-Datei Und in unserem Projektordner erstellen wir einen neuen Ordner namens Routing Exercise Und darin fügen wir unsere Dateien ein. Lassen Sie uns das jetzt im VS-Code öffnen. Gut. Lassen Sie uns zunächst alle unsere Projektabhängigkeiten installieren. Öffnen Sie das Terminal und schreiben Sie hier, NPM install, und drücken Sie die Eingabetaste Was wird dieser Befehl bewirken? Schreiben Sie. Es dient zum Hinzufügen und Installieren des Ordners mit Knotenmodulen. Danach müssen wir eine weitere Bibliothek für das Routing installieren, nämlich React Router Dom. Schreiben Sie NPM install, React Router Dom und drücken Sie die Eingabetaste. Es wird einige Zeit dauern, gut. Und am Ende lassen Sie uns diese Anwendung mit NPM Run Dow ausführen Und öffne diesen Link in unserem Browser. Siehst du, es funktioniert. Beginnen wir nun mit dem Hinzufügen von Routing. Zunächst müssen wir entscheiden, in welchem Teil wir das Routing anzeigen möchten. Also müssen wir Routing nach unserer NaBr-Komponente hinzufügen. Aber vorher müssen wir unsere gesamte Anwendung mit der Browser-Router-Komponente verbinden In der Hauptpunkt-JSX-Datei importieren wir also die Browser-Router-Komponente aus Rag Router Doom und wickeln unsere App-Komponente mit dieser Browser-Router-Komponente zusammen Speichern Sie diese Datei und lassen Sie uns unsere Routen definieren. In der App-Komponente oben importieren wir Routen und Routen aus dem Rag Router-Dom. Hier, nach dieser Zahlenkomponente, ist es besser, das Haupt-Tag hinzuzufügen, und in diesem Tag fügen wir Routing hinzu. Also fügen wir zunächst die Routenkomponente hinzu, und innerhalb dieser fügen wir unsere Routenkomponente hinzu. Ich gehe etwas schneller , weil wir diese bereits in diesem Abschnitt sehen. In dieser Route-Komponente haben wir also path, und zuerst definieren wir den Pfad für wen, dem wir ein Forward-Las-Element hinzufügen können. Hier schneiden wir einfach diese Filmlistenkomponente mit dem populären Titel aus und übergeben sie hier. Definieren wir nun eine weitere Route und setzen den zweiten Schrägstrich, den höchsten Unterstrich und das Element zu dieser Filmliste mit der am besten bewerteten Komponente Und zum Schluss definieren wir eine weitere Route mit bevorstehendem Pfad und Element zu dieser Filmliste mit kommender Physisch sagen wir auf diesem Pfad: Zeigt dieses Element an. React ist es egal, ob wir dieselbe Komponente rendern oder nicht. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, auf der Homepage bekommen wir nur die Liste der beliebtesten Filme. Jetzt ändern wir unsere URL auf die am besten bewerteten Unterstriche und sehen, dass wir am besten bewertete Komponente bekommen, also funktioniert es Lassen Sie uns nun diese Navbar-Links hervorheben. Öffnen Sie also die Nu Bar-Komponente und an der Stelle dieses Anker-Tags Welche Komponente werden wir hinzufügen? Richtig, es ist eine Nowlin-Komponente, und sehen Sie, sie wird oben automatisch zugewiesen. Ersetze dies jetzt auch durch New Link und auch durch diesen letzten Danach fügen wir an der Stelle, an der alle HRF stehen, das Attribut hinzu, wählen HF aus und mithilfe der Multi-Cursor-Bearbeitung ersetzen wir das Ganze HRF durch zwei Für den ersten Link übergeben wir nun HomeLink, was Als zweiten fügen wir einen Schrägstrich mit oberstem Unterstrich und für den letzten Link Speichern Sie die Gene und schauen Sie sich das an. Wenn wir auf diesen beliebten Titel klicken, erhalten wir einen beliebten Titel. Und wenn wir zum bestbewerteten Titel wechseln, bekommen wir hier Titel mit den besten Bewertungen, aber Filme ändern sich nicht. Lassen Sie uns das also ganz schnell beheben. In unserer Filmlistenkomponente rufen wir also Daten in diesem Use Effect-Hook ab Und wie wir wissen, wird dieser Use-Effect-Hook nur einmal ausgeführt, wenn diese Komponente gerendert wird Und in unserem Fall ruft diese Komponente Daten von der API ab, wenn wir uns auf einer beliebten Seite befinden Wenn wir unsere Seite jedoch auf „Am besten bewertet“ ändern, nur der Typtitel und die Emoji-Eigenschaften Und aus diesem Grund wird dieser Nutzungseffekt nie wieder auftreten. Um dieses Problem zu lösen, müssen wir diesen Use-Effect-Hook ausführen wenn sich diese Typ-Requisiten ändern Also hier übergeben wir einfach das Typunabhängigkeits-Array. Wenn Sie ein wenig verwirrt sind, machen Sie sich keine Sorgen. Im nächsten Abschnitt werden wir uns diese Konzepte im Detail ansehen. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wie sich unsere Filme je nach Typ ändern. Sehen wir uns nun diesen Link an. Und hier können wir die aktive Klasse sehen. Also müssen wir nur CSS für diese aktive Klasse hinzufügen. Also eine Nabar Dot CSS-Datei. Und nach diesem Naba-Links-Anker fügen wir die Nabarlink-Winkelhalterung und den Ankerpunkt Active hinzu Und in Gali-Klammern fügen wir die Schriftstärke auf 700 hinzu Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir hervorgehobene Tinte. Sie können sehen, wie einfach es ist, Routing hinzuzufügen. Viele Entwickler haben es sehr schwer gemacht , weil sie versuchen, alles in einem Schritt zu erledigen, aber immer versuchen, jede Implementierung Schritt für Schritt durchzuführen. 86. Routingparameter für einen einzelnen Film definieren: Wenn wir nun auf eine dieser Karten klicken, wollen wir TMW Link nicht öffnen Stattdessen möchten wir eine weitere Seite auf unserer Website öffnen, auf der unsere Filmdetails angezeigt werden können Lassen Sie uns also zuerst diesen Link ändern. Öffnen Sie die Filmkartenkomponente. Und oben importieren wir die Link-Komponente aus dem React-Router Dom. Jetzt fügen wir an der Stelle dieses Anker-Tags eine Link-Komponente hinzu und können dieses Zielattribut entfernen. Wir brauchen es nicht an der Stelle dieses HF, wir fügen zwei Attribute hinzu. Entfernen Sie außerdem diese DMD-Basis-URL. Wir behalten einfach die Slash Movie ID, speichern die Änderungen und schauen uns das an Klicken Sie auf eine Filmkarte und sehen Sie, wir leiten zur Movie-Slash-Film-ID Damit ist unsere halbe Aufgabe erledigt. Jetzt wollen wir nur noch diese Film-ID auf dieser Seite anzeigen. Aber vorher müssen wir diese Seitenroute definieren. Also App-Komponente, und hier unten fügen wir eine weitere Routenkomponente hinzu. Pfad entspricht jetzt dem, was wir hier passieren? Schreiben Sie eine Spalte mit einem Schrägstrich zum Film. Und hier fügen wir unseren Variablennamen, unsere ID oder unsere Film-ID Ich denke, das ist spezifischer. Nun, Element, hier wollen wir eine neue Komponente hinzufügen. Also erstellen wir in unserem Komponentenordner, in unserem Filmlistenordner, in unserem Filmlistenordner, eine neue Komponente namens single movie dot jsx Jetzt fügen wir hier unseren Boilerplate-Code hinzu. Nett. Speichern Sie diese Datei in unserer Route. Wir fügen eine einzelne Filmkomponente hinzu und der automatische Import funktioniert. Sie können sehen, wie schnell wir unseren Code mit der Auto Import-Erweiterung schreiben können . Speichern Sie die Änderungen und sehen Sie hier wir eine einzelne Filmkomponente erhalten, also funktioniert es. Lassen Sie uns nun einfach diese Film-ID anzeigen diese Film-ID Wissen Sie noch, was wir dafür verwenden werden? Richtig? Wir verwenden PeramShok von React Router Dom Also zurück zur einzelnen Filmkomponente in der Funktionskomponente, wir fügen use perams hinzu und wählen diesen Vorschlag aus und er wird Hier nennen wir diesen Hook, und er gibt ein Routenparameter-Objekt zurück Also speichern wir sie in Variablen, rufen Params auf, oder wir können sie sogar destrukturieren und hier die Film-ID hinzufügen , weil wir in unserer Route den Namen unserer Routenvariablen als Film-ID definieren Nun, an der Stelle dieser DU, fügen wir das Tag hinzu und genau hier einzelne Filme in geschweiften Klammern, die Film-ID, und das Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unseren Ausweis. Ich hoffe, dass alle Ihre Zweifel in Bezug auf das Routing jetzt geklärt sind. Es gibt immer Updates oder andere Syntax für das Schreiben von Code, aber die Kernkonzepte werden sich nie ändern, und genau das möchte ich Ihnen beibringen. Sobald Ihre Kernkonzepte klar sind, können Sie schnell neue Konzepte und Syntax erlernen. Wenn Sie sich diesen Kurs ständig ansehen, gönnen Sie sich bitte eine kleine Pause und schnappen Sie sich etwas frische Luft. Wir sehen uns im nächsten Abschnitt. 87. Abschnitt 09 Eine API aufrufen: Willkommen im neunten Abschnitt des ultimativen React-Kurses. Wie wir wissen, wird React verwendet um die Vorderseite und einen Teil unserer Anwendung zu erstellen. In der realen Welt haben wir auch ein Backend, das Logik ausführt und Daten in der Datenbank speichert und auch zur Authentifizierung verwendet wird Wenn Sie nur als React-Entwickler arbeiten möchten, müssen Sie kein Backend erlernen, z. B. kein Js-, Jango - oder Sie müssen jedoch lernen, wie wir unsere React-Anwendung mit dem Backend verbinden können unsere React-Anwendung mit dem Backend verbinden Und das werden wir in diesem Abschnitt lernen. Lassen Sie uns also darauf eingehen. 88. useEffect-Hook im Detail: Bevor wir anfangen, einen EPI aufzurufen, wollen wir zunächst genau verstehen, was Use Effect Hook ist und wie wir ihn verwenden können SiluuSefect wird also verwendet um Nebenwirkungen in unserer Komponente auszulösen Nebenwirkungen sind Aktionen , die außerhalb der Welt ausgeführt werden Wir führen eine Nebenwirkung aus, um außerhalb unserer Reaktionskomponenten etwas zu bewirken. beispielsweise Daten von der API abrufen und Daten im lokalen Speicher speichern, was wir in Project One sehen, werden die was wir in Project One sehen Kuppel- und Timer-Funktionen wie das festgelegte Timeout oder das festgelegte Intervall direkt aktualisiert wie das festgelegte Timeout oder das festgelegte Intervall Dies sind die häufigsten Nebenwirkungen bei React. Um jegliche Art von Nebenwirkungen zu erzielen, müssen wir also den Effekt Hook verwenden. Lassen Sie uns nun sehen, wie dieser Use-Effekt funktioniert. In diesem Abschnitt werden wir unser vorheriges Routing-Projekt verwenden, da das Erstellen eines neuen Projekts für jeden Abschnitt etwas mühsam ist Also hier, in der Komponente dieses Verkäufers, importieren wir zuerst Use Effect aus React und danach nennen wir diesen Use Effect in unserer Funktionskomponente Wie Sie wissen, benötigt dieser Use-Effect-Hooks zwei Argumente. Die erste ist die Colbek-Funktion , in der wir unsere Nebenwirkungen ausführen, und danach haben wir ein Abhängigkeitsarray Lassen Sie uns dieses Abhängigkeiten-Array vorerst nicht übergeben und in diese Callback-Funktion schreiben wir einfach die Dot Log-Komponente mount für die Konsole Speichern Sie diese Datei und schauen Sie sich das an. Öffnen Sie die Konsole und gehen Sie zur Admin-Seite. Siehst du, wir leiten zur Startseite , weil wir eine Benutzerrolle auf admin setzen müssen. In der Admin-Komponente ändern wir diese Rolle also in Admin. Speichern Sie diese und versuchen Sie nun, die Admin-Seite zu öffnen und zur Verkäuferseite zu wechseln. Hier können wir sehen, dass wir die Komponentenmontage bekommen. Wir bekommen diese Konsole zweimal wegen des Reaktionsmodus , den ich dir schon einmal gesagt habe. React Stit-Modus, rendern Sie unsere Komponente im Entwicklungsprozess zweimal Dieser Nutzungseffekt wird jetzt auf jedem Mount ausgeführt und erneut gerendert Aber lassen Sie uns zunächst verstehen, wann unsere Komponenten gemountet oder gerendert werden. Beim Komponenten-Mount wird unsere Komponente also zum ersten Mal in unserem Browser angezeigt. Wenn sich nach dem Mounten unserer Komponente in unserem Browser etwas an dieser Komponente ändert oder aktualisiert wird, führt dies zu einem erneuten Rendern. Wenn wir hier also keine Abhängigkeiten übergeben, wird diese Colvec-Funktion beim Einhängen und erneuten Rendern der Komponente ausgeführt , was bedeutet, dass sich etwas an der Komponente des Verkäufers ändert , so einfach Also lass uns das live sagen. Hier haben wir nichts zu sehen, das neu gerendert wird. Zuerst fügen wir hier Reaktionsfragmente hinzu, weil wir mehrere Elemente hinzufügen werden. Fügen wir nun ein Eingabefeld für die Verarbeitung ihres Werts Wir erstellen eine Zustandsvariable mit dem Namen und dem Setnamen und übergeben eine leere Zeichenfolge als Standardwert. Wir haben das schon oft gemacht, richtig. Jetzt übergeben wir hier ein unverändertes Ereignis, und hier erhalten wir das Ereignisobjekt, Pfeilfunktion und setzen den Namen auf den aktuellen Wert. Wie können wir also den aktuellen Wert ermitteln? Richtig? Durch Verwendung des Zielpunktwerts für den Ereignispunkt. Einfach. Speichern Sie die Änderungen und schauen Sie sich um, aktualisieren Sie diese Seite, und hier können wir sehen, dass wir Component Mount bekommen Jetzt schreiben wir etwas in diese Eingabe und Sie können sehen, wir bekommen wieder Component Mount. Auch hier gilt: Wenn wir etwas und C schreiben, erhalten wir erneut Component Mount. Lassen Sie mich Ihnen erklären , was hier passiert. Nachdem unsere Komponente bereitgestellt wurde, schreiben wir in dieses Eingabefeld, wodurch dieser Statusname in unserer Komponente geändert wird . Dadurch wird gerendert und aus diesem Grund wird unser Use-Effekt ausgeführt. Immer wenn wir Code beim Mount und Rendern ausführen möchten , verwenden wir Use-Effekt ohne jegliche Abhängigkeit. In der nächsten Lektion werden wir uns nun zwei weitere Varianten von Use-Effect-Hooks ansehen. 89. Abhängigkeiten von useEffect: In der vorherigen Lektion haben wir also gesehen, wie wir die Funktion beim Einhängen und Rendern ausführen können Manchmal möchten wir unsere Callback-Funktion nur einmal ausführen unsere Callback-Funktion nur einmal , wenn unsere Komponente im Browser eingebunden oder angezeigt wird Es ist wirklich einfach und leicht. Wir müssen hier nur das Abhängigkeiten-Array als leeres Array übergeben , die Änderungen speichern und schauen, hier bekommen wir zum ersten Mal die Komponente mounten. Wenn wir danach etwas an unserer Komponente ändern, wird dieser Nutzungseffekt nicht ausgeführt. Durch die Verwendung dieser ETR-Abhängigkeit erhalten wir Daten von der API, erhalten wir Daten von weil wir Daten nur einmal testen wollen, was wir in unserem Projekt auch schon getan haben, oder? anderes Beispiel: Nehmen wir an, wir rufen eine API die die Nummer der Benachrichtigung zurückgibt, sodass wir unseren Webseitentitel entsprechend dieser Nummer ändern können . Zuerst speichern wir die Nummer der Domain-Benachrichtigung auf fünf und danach schreiben wir hier den Punkttitel des Dokuments, der in CTI entspricht, wir fügen Dollar-Klammern, Benachrichtigungen und danach neue Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir einen benutzerdefinierten Benachrichtigungstitel. So viele React-Anwendungen zeigen dynamische Titel an. Nehmen wir nun an, an der Stelle dieser Benachrichtigung möchten wir diesen Namensstatus anzeigen. Hier schreiben wir den Namen und die Dollar-Cali-Klammern. Hier fügen wir einen Namen hinzu, speichern die Änderungen und schauen uns das an. Aktualisieren Sie die Seite und sehen Sie hier, dass wir nur Namenstext erhalten , da unser Name derzeit eine leere Zeichenfolge ist. Aber wenn wir etwas in diese Eingabe schreiben, bekommen wir diesen Namen nicht in unserem Titel, weil dieser Nutzungseffekt aufgrund dieses leeren Arrays nur einmal ausgeführt wird . Aber hier wollen wir es immer dann ausführen , wenn sich diese Namensvariable geändert hat. Also hier übergeben wir einfach Namensvariable in diesem Abhängigkeiten-Array. Sie können hier auch mehrere Variablen übergeben, die Änderungen speichern und einen Blick darauf werfen. Sie können jetzt sehen, dass unser Titel einen aktualisierten Namen hat . So funktionieren Abhängigkeiten im Use Effect. 90. useEffect-Bereinigungsfunktion: Sehen wir uns nun das letzte und wichtige Konzept von Use Effect Hook an Manchmal müssen wir also eine Bereinigungsfunktion hinzufügen, um Nebenwirkungen zu entfernen Zum Beispiel aktualisieren wir hier nur den Titel. Stellen Sie sich nun vor, wir abonnieren den Chatroom und wenn wir zu einer anderen Seite wechseln, möchten wir diesen Chatroom abbestellen . den Raum abzumelden, müssen wir also die Cleanup-Funktion verwenden Wisse, dass dieses Beispiel etwas schwer zu verstehen ist. Lassen Sie mich das für Sie vereinfachen. Stellen Sie sich vor, dies ist unsere Chat-Komponente , in der Personen chatten. Wenn zwei Personen chatten, müssen beide Personen dieselbe Raum-ID abonnieren oder sich mit derselben Raum-ID verbinden. Aus diesem Grund erhalten beide Personen die Nachricht sofort auf ihrem Bildschirm. Wenn jedoch eine Person den Chatroom verlassen hat, müssen wir uns abmelden oder die Verbindung zu diesem Raum trennen , damit diese Person keine Nachricht auf ihrem Bildschirm erhält. In den meisten Fällen müssen wir die Cleaner-Funktion nicht verwenden , manchmal müssen wir es tun, und deshalb möchte ich Ihnen das zeigen. Lassen Sie uns also hier diesen unerwünschten Code entfernen und erneut die Dot Log-Komponente Mount für die Konsole hinzufügen. Und am Ende unserer Callback-Funktion möchten wir eine Bereinigungsfunktion hinzufügen Also hier geben wir eine Funktion zurück. Und in dieser Funktion können wir unsere Bereinigungsfunktionslogik schreiben Diese Bereinigungsfunktion wird ausgeführt, wenn unsere Komponente unmountet oder vom Bildschirm entfernt wird Also schreiben wir hier einfach Console Dot Log Component Unmount Speichern Sie die Änderungen und schauen Sie sich das an. Aktualisieren Sie die Seite, und hier können wir zuerst sehen, wir die Komponente einhängen, dann die Komponente unmounten und wieder die Komponente einhängen Wie ich Ihnen bereits sagte, wird unsere Komponente aufgrund des React-Street-Modus zweimal gerendert Also zuerst wird es gemountet, dann reagiert es im Street-Modus, entfernt diese Komponente, und deshalb bekommen wir hier Component Unmount Und danach wird unsere Komponente wieder montiert. Wenn Sie nun zu einer anderen Seite gehen, werden wir hier erneut die Komponente unmounten lassen , weil unsere Komponente von unserem Bildschirm entfernt wurde So funktioniert die Bereinigungsfunktion . Mach dir darüber keine Sorgen Wir werden die Cleaner-Funktion in unserer Anwendung kaum ein einziges Mal verwenden . Um es kurz zusammenzufassen: Usefect wird verwendet, um Nebenwirkungen in unserer US-Effekt hat zwei Parameter: erstens Callback-Funktion und zweitens ein Abhängigkeitsarray, was optional Je nach Dependency Array gibt es für use effect drei Varianten. Die erste ist ohne Abhängigkeit führt diese Callback-Funktion Einhängen und bei jedem erneuten Rendern aus zweite ist ein leeres Array, das diese Calbeck-Funktion nur auf Mount ausführt , und das letzte ist ein Abhängigkeitsarray mit Variablen, das diese Calbeck-Funktion beim Rendern und auch dann ausführt , wenn sich eine dieser Variablen ändert Eine weitere Sache: Da wir unserer Komponente einen State-Hook mit mehreren Verwendungsmöglichkeiten hinzufügen , können wir unserer Komponente auch einen Hook mit mehreren Nutzungseffekten hinzufügen , so einfach ist Nein, ich wiederhole diesen Use-Effect-Hook viele Male, aber ich möchte nur sichergehen, dass Sie die richtigen Grundlagen für den Use-Effect-Hook haben die richtigen Grundlagen für den Use-Effect-Hook Außerdem möchte ich das Einhängen, Rendern und Unmounten erklären , was als Lebenszyklus von Komponenten bezeichnet wird Sie lernen also beide Konzepte in einer einzigen Lektion. 91. Grundlagen von HTTP-Anfragen: Bevor wir die API aufrufen, wollen wir uns ansehen, was SddprQuest ist So wie wir unseren Client kennen, oder wir können sagen, ob unser Browser einige Ressourcen benötigt, wird er Server über das Internet anfordern Diese Anfrage wird als SddprQuest bezeichnet. In einfachen Worten funktioniert diese SddprQuest also wie eine Brücke zwischen Wenn der Server nun SddprQuest empfängt, gibt er einige Ressourcen zurück, nach denen der Client fragt. Beispiel: Zuvor haben wir stdprQuest für das Abrufen der Filmdaten festgelegt stdprQuest TMDB-Server nimmt also unsere StdprQuest entgegen und Nun gibt es einige Methoden, die beschreiben, welche Art von Aufgabe Also zuerst haben wir Get Request, das zum Abrufen von Daten vom Server verwendet wird Das haben wir schon richtig gesehen. Als Nächstes haben wir eine Post-Anfrage, die verwendet wird, um Daten an den Server zu senden, z. B. ein Anmeldeformular oder ein Anmeldeformular Als Nächstes haben wir eine Anfrage gestellt, die verwendet wird, um die Daten auf dem Server zu ersetzen Danach haben wir eine Patch-Anfrage , mit der bestimmte Daten auf dem Server aktualisiert werden. Jetzt fragen Sie sich vielleicht, was ist der Unterschied zwischen Put und Patch? Zum Beispiel haben wir Server, die Informationen über zehn Bücher haben. Wenn wir nun dieses eine Buch durch neue Buchdetails ersetzen wollen , dann verwenden wir Put Request. Wenn wir jedoch bestimmte Details eines Buchs aktualisieren möchten, z. B. den Preis aktualisieren möchten, ersetzen wir hier nicht die gesamten Buchdetails, sondern wir ändern nur den bestimmten Teil dieser Buchdetails. In diesem Anwendungsfall verwenden wir also die Patch-Methode. Und zuletzt haben wir die Methode delete , mit der bestimmte Daten gelöscht werden. Wir stellen diese Anfrage bereits , wenn wir Websites verwenden, und wir verwenden Get Request mehrmals am Tag. Zum Beispiel öffnen wir die Website udemy.com. Hier senden wir eine Anfrage zum Abrufen der Webseite vom Server, sodass der Server diese Webseite als Antwort zurückgibt Hier verwenden wir GetRQuest ohne es zu wissen. In der nächsten Lektion senden wir nun eine Get-Anfrage, um Daten vom 92. Verkäuferdaten abrufen: Beginnen wir nun mit dem Abrufen von Daten von der API. Ich weiß, dass Sie das bereits wissen, aber ich möchte Sie überarbeiten und auch ohne Daten zu erhalten, wie können wir Funktionen zum Aktualisieren oder Löschen durchführen Lassen Sie uns schnell Daten von der API abrufen. Hier verwenden wir eine gefälschte API, die genauso funktioniert wie die ursprüngliche API, die Sie vom Bend-Entwickler erhalten. Gehen Sie zu Jason placeholder.typicod.com. Diese API wurde entwickelt, um das Aufrufen einer API zu testen und zu erfahren Scrollen Sie nach unten, und hier können wir verschiedene Arten von Daten, Beiträgen, Kommentaren, Fotos , Aufgaben usw. sehen . Wir werden die Daten dieses Benutzers verwenden. Öffnen Sie diese und hier können wir sehen, dass wir die Daten dieser verschiedenen Benutzer erhalten. Wir werden diese Benutzer als Verkäufer für unser Projekt betrachten. Kopieren Sie diese API-URL und kehren Sie zum VS-Code zurück. Wir benötigen diesen Nutzungseffekt nicht und fügen den Nutzungseffekt von Grund auf neu Verwenden Sie also den Effekt, die Callback-Funktion und hier das, was wir hinzufügen Abhängigkeitsarray mit Variablen oder ohne Abhängigkeit Richtig, wir werden ein leeres Array als Abhängigkeiten hinzufügen , da wir Daten nur einmal von der API abrufen möchten In dieser Callback-Funktion rufen wir nun unsere API zum Abrufen von Daten Zuvor haben wir in unserem zweiten Projekt die Methode fetch zum Aufrufen der API verwendet unserem zweiten Projekt die Methode fetch zum Aufrufen der API Aber jetzt werden wir die beliebteste Bibliothek für den API-Aufruf in React verwenden die beliebteste Bibliothek für den API-Aufruf , nämlich XoS Öffnen Sie also das Terminal und fügen Sie ein neues Terminal Hier installieren Sie NPM AXOS und drücken Mach dir keine Sorgen um Axios. Es ist einfacher zu verwenden als die Abruf-Methode. Jetzt geben wir oben Axios aus dem Axios-Paket ein. Jetzt schreiben wir in unserem Use-Effect-Hook Axios Jetzt müssen wir hier unsere SDTP-Methode hinzufügen, die zum Abrufen der Daten dient In dieser Funktion müssen wir nun unsere API in Codes hinzufügen, genauso wie wir es in der Abruf-Methode getan haben Jetzt gibt dieser Ausdruck ein Versprechen zurück. Also zur Handhabung, versprechen Sie, was wir verwenden können, schreiben. Wir können dann die Methode verwenden oder auf Await warten. Hier schreiben wir dann und wir bekommen hier eine Antwort, eine Pfeilfunktion, und wir schauen uns einfach die Punktprotokollierung dieser Antwort an. Heb dir das Ginges auf und sieh es dir an. Öffne die Konsole Siehst du, hier bekommen wir diese Antwort von der API. Sehen wir uns diese Anfrage genauer an. Also hier öffnen wir die Registerkarte Netzwerk. Im Moment erhalten wir keine Anfrage. Wenn Sie diese Seite aktualisieren, können wir eine Reihe von Anfragen nach Dokumenten und Skripten sehen. Wir wollen aber nur die Abrufanforderung sehen. Hier wählen wir also Filter, Fetch oder XHR, was für XML SddprQuest steht Hier bekommen wir aufgrund des React Street-Modus eine Anfrage von zwei Benutzern was für XML SddprQuest steht. Hier bekommen wir aufgrund des React Street-Modus eine Anfrage von zwei Benutzern. Hier können wir den Statuscode 200 sehen, was bedeutet, dass unsere Anfrage erfolgreich abgeschlossen wurde, und wir haben Zeit, diese Anfrage und wir haben Zeit Dies sind Details zu dieser speziellen STTP-Anfrage. Mal sehen, was darin enthalten ist. Hier können wir die Header dieser SDTP-Anfrage sehen. Jede SDTP-Anfrage und -Antwort ist also in Abschnitte unterteilt, Header, in denen wir Metadaten definieren, und im Hauptteil definieren wir die Daten oder rufen Hier können wir also einige allgemeine Header-Details zu unserer SDDPRQuest sehen einige allgemeine Header-Details zu unserer SDDPRQuest Wir können hier URL, Methode, Statuscode und Remote-Adresse sehen , die die IP-Adresse des Clients ist Danach haben wir Antwortheader, die der Server mit der Antwort sendet In den meisten Fällen müssen wir uns darüber keine Gedanken machen, und endlich haben wir einen Request-Header Darüber machen wir uns auch keine Sorgen. Jetzt haben wir auf der Registerkarte „Vorschau“ die Vorschau unserer Daten. Und auf dieser Registerkarte „Antworten“ erhalten wir unsere Daten strukturiert. Kehren wir jetzt zur Konsole zurück. Und hier können wir in diesem Antwortobjekt sehen, dass wir diese Konfigurationsdaten erhalten, in denen wir unsere Daten erhalten, Header nach XoS-Anforderungsstatus 200, der für Erfolg steht , und Statustext Die meiste Zeit haben wir es nur mit diesen Daten zu tun. Lassen Sie uns diese Datenliste also auf der Seite unseres Verkäufers anzeigen. die Daten anzuzeigen, müssen wir sie also in einem Zustand speichern. Also erstellen wir eine Statusvariable namens Sellers und setzen Sellers und übergeben hier ein leeres Array. An der Stelle dieses Punktprotokolls in der Konsole übergeben wir nun die Setseller-Funktion, und darin übergeben wir die Punktdaten für die Antwort Lassen Sie uns nun einfach die Verkäufer anzeigen. Also in CI-Klammern, Verkäufer-Punkt-Map, hier bekommen wir jeden Verkäufer und wir geben einen Absatz-Tag zurück und übergeben hier den Namen des Verkäufers. Und wie wir wissen, müssen wir für die Kartenmethode auch ein Schlüsselattribut hinzufügen. Der Schlüssel entspricht also der Punkt-ID des Verkäufers, die für jeden Verkäufer einzigartig ist Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Siehst du, hier haben wir den Namen dieses Verkäufers. Sie können sehen, dass wir mit Axios keinen zusätzlichen Schritt ausführen müssen, was wir bei der Fetch-Methode getan haben Ich hoffe, dass alle Ihre Zweifel an der G-Methode jetzt geklärt sind. 93. Lastindikatoren hinzufügen: Wenn wir nun Anfragen an den Server senden, dauert es einige Zeit, etwa eine halbe Sekunde oder weniger. Aber manchmal, wenn unsere Daten groß oder die Internetverbindung des Benutzers langsam ist, müssen wir die Ladeanzeige auf unserer Webseite anzeigen. Oben erstellen wir hier also eine Zustandsvariable namens Ioading und legen ILoading fest Als Standardwert übergeben wir false. Jetzt setzen wir in unserem Use-Effect-Hook, bevor wir mit dem Patchen von Daten beginnen, is loading auf true Und nachdem wir unsere Daten erhalten haben, die in dieser Then-Methode enthalten sind, fügen wir hier den Codeblock hinzu, und in einer neuen Zeile setzen wir loading auf false So einfach ist das. Jetzt, vor unserer Map-Methode, können wir Culipracket hinzufügen und hier eine Bedingung hinzufügen , wenn sein Dann zeigen wir hier das ST-Tag an und fügen darin Ladetext hinzu Speichern Sie die Änderungen und schauen Sie sich das an. Aktualisieren Sie die Seite und sehen Sie hier, dass wir Lade-Tags nur für Millisekunden bekommen , weil meine Internetverbindung schnell ist und auch die Datengröße klein Lassen Sie uns jetzt unser Internet langsam machen. Auf der Registerkarte Netzwerke können wir hier in diesem Trotoning also schnell drei G und langsam drei G auswählen, auch offline Wählen wir also langsam drei G und drücken die Seite erneut. Sie können hier sehen, dass wir diesen Ladetext bekommen, also funktioniert er einwandfrei Jetzt möchten wir manchmal den Ladeindikator für die ganze Seite anzeigen . Zum Beispiel zeigen wir hier Daten an und haben auch das Drei-Tag eingegeben. Wir wollen den Loader nur anzeigen , wenn die Daten des Verkäufers schnell werden. Aber manchmal möchten wir den Loader für die ganze Seite anzeigen. Dafür fügen wir einfach die Bedingung hinzu, ob die Bedingung vor dieser schriftlichen Bedingung steht und die Bedingung identisch ist Wenn I loading wahr ist, dann geben wir dieses ST-Tag mit loading Save the changes zurück und schauen uns das an Aktualisieren Sie die Seite und sehen Sie hier, dass wir diesen Ladetext für die gesamte Admin-Center-Seite erhalten . Im Moment brauchen wir ihn nicht. Lassen Sie uns also diese If-Bedingung entfernen und diese Datei speichern. Fügen wir nun schnell Ladespinner an der Stelle dieses Ladetextes Gehen Sie also zum Laden von Dot IO Slash CSS über. Ab hier haben wir 12 grundlegende kostenlose CSS-Loader in reinem SDML Nehmen wir an, wir wollen diesen Loader anzeigen. Klicken Sie darauf und hier erhalten wir SDML-Markup unten und CSS-Stile oben Kopieren Sie dieses STM-Markup, und im Komponentenordner erstellen wir einen weiteren Ordner mit dem Namen Common. Darin erstellen wir eine neue Komponente , die speziell für den Loader bestimmt Der Grund, warum wir diesen Loader zu diesem gemeinsamen Ordner hinzufügen ist, dass dieser Loader nicht nur für die Admin-Seite spezifisch ist Wir können den Loader auf verschiedenen Seiten verwenden. Es hängt ganz von uns ab. Zuerst fügen wir hier Boilerplate hinzu und fügen hier unser SDML-Markup Und an der Stelle dieser Klasse werden wir den Klassennamen hinzufügen Lassen Sie uns nun oben den Punkt CSS File Loader importieren. Und dafür erstellen wir eine neue Datei im gemeinsamen Ordner Loader Dot Css. nun zum Browser zurück, kopieren Sie diese Stile von hier und fügen Sie sie in die Loader-Dot-CSS-Datei ein. Jetzt können wir sehen, dass unsere Loader-Farbe derzeit weiß ist. Wir können es von hier aus ändern. Wechseln wir zu einer CD-CD-CD, die eine graue Farbe hat. Speichern Sie diese Datei und speichern Sie auch diese Loader-Komponente. Und jetzt lassen Sie uns diesen Loader anzeigen. Der Ort dieses Ladetextes. Entferne das und füge hier die Loader-Komponente hinzu. Speichern Sie die Änderungen und schauen Sie sich das an und sehen Sie hier, dass wir diesen Loader nach dieser Eingabe bekommen. Lass es uns in die neue Zeile verschieben. Also hier können wir diesen Lader einfach mit Du umwickeln. Speichern Sie die Änderungen und sehen Sie, hier bekommen wir den Loader in einer neuen Zeile. Das sieht ziemlich gut aus. 94. Fehlerbearbeitung: Wenn wir mit der API arbeiten, ist es wichtig, Fehler zu behandeln, denn wenn die Internetverbindung unterbrochen wird oder sie versuchen, an unerwünschte Daten zu gelangen, müssen wir ihnen Fehler anzeigen. Nun, vorher, hier fällt mir etwas auf. Anstatt diese Loader-Komponente in Dieu zu verpacken, können wir das Loader-JSX-Element hinzufügen Öffnen Sie also die Loader-Komponente, und hier wickeln wir diesen Würfel mit einem anderen Du ein Speichern Sie diese Datei und kehren Sie zur Komponente des Verkäufers zurück. Nach diesem Ladestatus fügen wir eine weitere Nutzungsstatusvariable namens errors and set errors hinzu. Und hier übergeben wir eine leere Zeichenfolge als Standardwert. Wie Sie vielleicht wissen, können wir jetzt, wenn wir mit Promises arbeiten, die Catch-Methode für die Fehlerbehandlung verwenden . Lass es mich dir zeigen. Nach dieser Methode fügen wir die Cache-Methode hinzu, und hier erhalten wir das Fehlerobjekt, Fehlerfunktion und lassen uns dieses Fehlerobjekt einfach in der Konsole protokollieren. Grundsätzlich gilt: Wenn wir einen Fehler in dieser Promise-Methode oder in dieser Then-Methode haben, erhalten wir diesen Fehler in diesem Fehlerobjekt. Lassen Sie uns hier in der API einen Tippfehler machen, die Änderungen speichern und einen Blick darauf werfen Öffnen Sie die Konsole und sehen Sie, wir erhalten ein Fehlerobjekt mit einer Reihe von Details In dieser Nachrichteneigenschaft erhalten wir die Fehlermeldung und in dieser Antwort erhalten wir eine Fehlermeldung vom Server. Derzeit sendet diese JcnPlaceHolder-API keine Nachricht. Wenn wir jedoch eine eigene API haben, sie möglicherweise unsere benutzerdefinierte Fehlermeldung zurück Lassen Sie uns diese Nachricht auf unserem Bildschirm anzeigen. Hier fügen wir den Code-Blog hinzu. Zuerst wollen wir das Laden auf „Falls“ setzen, wollen wir das Laden auf „Falls“ setzen denn selbst wenn wir einen Fehler bekommen, wollen wir das Laden trotzdem auf „Falls“ setzen, und zum Schluss setzen wir Fehler auf Error Dot Message. Fügen wir nun eine Bedingung nach diesem Loader hinzu. Wenn Fehler verfügbar sind, geben wir das Tag emphasize zurück, und hier zeigen wir einfach die Fehlervariable an. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir diesen Fehler. Lassen Sie uns nun Tipo aus der API-URL entfernen, diese Datei speichern und sehen, wie wir hier unsere Daten erhalten Es funktioniert also gut. Sie können sehen, wie einfach es ist, Loader und Fehler beim API-Aufruf anzuzeigen . Wir müssen nur die Grundlagen verstehen. 95. Versprechen mit asynchronem Wait: Lassen Sie uns nun schnell sehen, wie wir Promise und Errors mit einem Sync-Await umgehen können Promise und Errors mit einem Sync-Await Im Moment kommentiere ich diesen Code aus und nach unserem Nutzungseffekt erstellen wir eine neue Funktion namens Fetch Sellers, Error Function Und darin fügen wir diesen Ausdruck von hier aus hinzu. Und oben fügen wir hinzu, dass set is loading to true ist. Wie wir wissen, gibt dieser Ausdruck unser Versprechen zurück. Also fügen wir hier await hinzu und um await verwenden zu können, müssen wir unsere Funktion asynchron machen Lassen Sie uns diesen Wert nun in einer Variablen namens response speichern. Und danach kopieren wir einfach unseren Code aus der Methode und fügen ihn hier ein. Nennen wir diese Funktion nun in Use Effect. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, es funktioniert. Sehen wir uns nun an, wie wir mit Fehlern umgehen können. Um also Fehler als Wartezeit zu behandeln, müssen wir den Block try and catch verwenden. Also schreiben wir try catch und wählen diesen Vorschlag aus und sehen, dass wir diesen Try-and-Cache-Block bekommen. Das ist die Stärke der Erweiterung ES Seven. Lassen Sie uns nun diesen Code in den Try-Block verschieben und dieses Set beim Laden außerhalb dieses Blocks verschieben. Jetzt kopieren wir im Catch-Block einfach Code aus dieser Catch-Methode. Wir ändern den Namen dieses Fehlerattributs in Fehler. In einfachen Worten, wenn in diesem trockenen Block etwas schief gelaufen ist, dann wird dieser Skizzenblock ausgeführt. Machen wir hier einen Tippfehler, sagen wir die Änderungen und drücken Sie die Seite erneut Siehst du, hier bekommen wir diesen Fehler. So gehen wir also mit Fehlern um und versprechen es im asynchronen Awit. Aber hier können wir beide Codes vergleichen . Wir können sehen, dass unser bisheriger Code wartungsfreundlicher und organisierter aussieht als dieser asynchrone Avid In unserem Film-Maniac-Projekt gibt es Fehler, und deshalb sieht unser Code mit einem Zincavt einfacher Für den Rest dieses Abschnitts werden wir also diese Bandmethode verwenden Sie können verwenden, was Sie wollen, hängt ganz von Ihnen ab. 96. Neuen Verkäufer hinzufügen: Sehen wir uns nun an, wie wir neue Verkäuferdaten hinzufügen oder erstellen können. Nach dieser Eingabe fügen wir zunächst eine Schaltfläche namens Ed Seller hinzu. Außerdem fügen wir hier beim Klicken Ereignis hinzu und übergeben hier den Funktionsnamen, Verkäufer hinzufügen. Lassen Sie uns nun diese Funktion zum Hinzufügen von Verkäufern definieren. Also const, füge Verkäufer und Pfeilfunktion hinzu, und in dieser Funktion müssen wir zuerst ein neues Verkäuferobjekt erstellen Also const, neuer Verkäufer entspricht Objekt. Und zuallererst müssen wir den Namen übergeben und wir setzen auf diesen Namensstatus Hier sind Schlüssel und Wert, beide Namen sind identisch, also können wir diese entfernen. Hier müssen wir auch eine ID hinzufügen , da wir diese ID als Schlüssel in unsere Liste aufnehmen. Hier setzen wir also die ID auf das Array des Verkäufers, Punktlänge plus eins. Jetzt gibt es zwei Möglichkeiten, Daten auf der Website zu verarbeiten während wir Daten über die API senden oder aktualisieren. Erstens können wir unsere Daten oder die Benutzeroberfläche im Browser aktualisieren. Danach können wir die API aufrufen, um diese Daten hinzuzufügen oder zu aktualisieren. Diese Methode wird als optimistisches Update bezeichnet. Nun gibt es eine zweite Möglichkeit, bei der wir zuerst die API aufrufen, um die Daten hinzuzufügen oder zu aktualisieren, und danach werden wir unsere Benutzeroberfläche aktualisieren. Diese zweite Methode wird als pessimistisches Update bezeichnet. Fast alle modernen Websites verwenden einen optimistischen Ansatz da er im Vergleich zum pessimistischen Ansatz schnell und benutzerfreundlicher ist im Vergleich zum pessimistischen Ansatz schnell und benutzerfreundlicher Denken Sie zum Beispiel an eine Social-Media-Website. Wenn Ihnen ein Beitrag gefällt, sollte dieser sofort mit „Gefällt mir“ markiert werden. Wenn wir einen pessimistischen Ansatz verwenden, ruft der Browser die API auf, um diesem Beitrag ein „Gefällt mir“ hinzuzufügen. Danach wird dem Benutzer angezeigt, welcher schneller ist Natürlich optimistisch. Hier verwenden wir auch einen optimistischen Ansatz. Bevor wir die API aufrufen, setzen wir hier Verkäufer auf Array Zuerst fügen wir Verkäuferdaten mithilfe des Spread-Operators und danach fügen wir unser neues Verkäuferobjekt hinzu. Oder wir können dieses neue Verkäuferobjekt zuerst hinzufügen. Ich denke, das ist vorteilhafter. Speichern Sie die Änderungen und schauen Sie sich das an. Geben Sie hier den Namen ein und klicken Sie auf Verkäufer hinzufügen. Siehst du, hier bekommen wir einen neuen Verkäufer, also funktioniert es. Rufen wir nun die API zum Hinzufügen oder Erstellen neuer Daten auf. Also verwenden wir hier die Axios Dot Post-Methode zum Erstellen der neuen Daten Kopieren wir nun diese API aus unserer Abruffunktion und übergeben diese API hier Danach müssen wir beim zweiten Parameter unser neues Verkäuferobjekt übergeben , da wir das Objekt hinzufügen möchten Beachten Sie, dass diese Post-API unsere ID nicht verwendet , da die ID immer vom Backend generiert wird. Aber hier verwenden wir ID in K, und deshalb fügen wir diese ID zu unserem Objekt hinzu. Ich werde dir das in nur einer Sekunde zeigen. Wie wir wissen, ist dieser Ausdruck ein Versprechen. Also fügen wir dann die Methode hinzu, und hier erhalten wir eine Antwort und die Antwort enthält die neuen Benutzerdaten , die wir vom Server erhalten. Darin fügen wir Set-Verkäufer hinzu und hier fügen wir zuerst diese Punktdaten für die Antwort Danach fügen wir hier alte Verkäufer hinzu, die den Spread-Operator verwenden. Speichern Sie die Änderungen und schauen Sie sich das an. Schreiben Sie hier den Namen und klicken Sie auf Verkäufer hinzufügen. Im Netzwerk-Panel können wir hier eine neue Anfrage sehen. Lass uns das sehen. Und hier im Header haben wir die Anforderungs-URL, Anforderungsmethode zum Posten und den Statuscode für 201 , der für erfolgreich erstellte Daten verwendet wird. Sehen wir uns nun die Nutzdaten an, die wir mit der API senden, und in der Vorschau erhalten wir ein Benutzerobjekt, das diese API zurückgibt Denken Sie daran, dass diese JSON-Platzhalter-API ein gefälschtes Backend ist, nur um die API zu erlernen Es wird immer ein neues Benutzerobjekt mit der ID 11 zurückgegeben. Lass es mich dir zeigen. Klicken Sie erneut auf Anzeigenverkäufer. Hier in der Nutzlast sehen wir die ID 12, die wir senden, und in der Vorschau können wir sehen, dass wir die ID 11 erhalten Egal, wie viele Datensätze wir senden, es wird immer ein Objekt mit der ID 11 zurückgegeben Deshalb erhalten wir in der Konsole eine Fehlermeldung Kinder mit demselben Schlüssel 11. In dieser API müssen wir jetzt unseren Fehler behandeln. Also, für das, was wir verwenden, verwenden wir die Catch-Methode. Hier erhalten wir ein Fehlerobjekt, und zuerst setzen wir Fehler auf den Fehlerpunkt Message. Danach müssen wir unsere Verkäuferliste auf die vorherige Liste zurücksetzen . Zum Beispiel fügen wir hier einen neuen Verkäufer hinzu. Bevor wir diese API aufrufen, setzen wir diesen neuen Verkäufer nun in unsere Liste. Wenn wir jedoch aus irgendeinem Grund eine Fehlermeldung erhalten oder offline sind, müssen wir unsere Liste wiederherstellen. Stellen Sie also Verkäufer ein und hier geben wir direkt unsere Verkäuferliste weiter. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. In NetworkTab machen wir unsere Website offline. Fügen Sie jetzt einen Namen hinzu und klicken Sie auf Verkäufer hinzufügen Sehen Sie, für nur eine Sekunde sehen wir unseren Namen, aber danach stellen wir unsere Liste auf die vorherige Liste zurück, weil wir einen Netzwerkfehler haben So stellen wir also eine Post-Anfrage. Sie können sehen, wie einfach es ist. 97. Verkäufer löschen: Lassen Sie uns nun sehen, wie wir einzelne Verkäufer aus unserer Liste löschen können . Zuallererst müssen wir also für jeden Verkäufernamen die Schaltfläche Löschen hinzufügen . Aber vorher setzen wir unsere Anwendung auf No Throttle Link. Jetzt, hier in unserer Map-Funktion, umschließen wir dieses Absatz-Tag mit Du und am Ende fügen wir eine Schaltfläche namens Löschen hinzu. Speichern Sie das und wir erhalten eine Schaltfläche für jeden Verkäufer. Aber das sieht ein bisschen hässlich aus. Anstatt es in Du anzuzeigen, können wir hier die Tabulatortaste verwenden. Vor dieser Liste fügen wir eine Tabelle hinzu und darin wollen wir den Hauptteil haben. Jetzt verschieben wir unsere Liste in diesen Teamkörper und an der Stelle dieses Duos fügen wir TR für die Tabelle Und wir packen beides in ein TD-Tag. Also fügen wir mehrere Cursor mit Alter+Klick oder Wahl+Klick hinzu und fügen hier TD hinzu und lassen uns dieses schließende TD-Tag am Ende verschieben. Und zuletzt müssen wir den Schlüssel zu unserem übergeordneten Tag hinzufügen, sich in diesem TR-Tag befindet. Die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir die Schaltfläche Löschen in einer Zeile und mit demselben Leerzeichen. Aber hier haben wir diese zusätzliche Polsterung. In unserem TD-Tag entfernen wir also dieses Absatz-Tag. Wir wollen es nicht. Speichern Sie das und sehen Sie, wir haben die perfekte Liste. Lassen Sie uns nun verzögerte Funktionen hinzufügen. Also hier auf dieser Schaltfläche fügen wir die Funktion „On-Click-Event “ und „Hier übergeben“, „ Verkäufer löschen“ hinzu. Aber hier müssen wir die aktuelle Verkäufer-ID weitergeben , da wir dadurch unseren Verkäufer löschen. Wie können wir das also weitergeben? Richtig, wir fügen hier die Pfeilfunktion hinzu, und danach können wir hier die Punkt-ID des Verkäufers übergeben . So einfach ist das. Definieren wir nun diese Funktion, den Verkäufer löschen. Hier bekommen wir die ID- und Pfeilfunktion. Hier müssen wir zuerst die Änderung der Benutzeroberfläche anzeigen und danach die API zum Löschen aufrufen. Sie können diese Lektion pausieren und selbstständig damit beginnen, oder Sie können weitermachen. Wie wir wissen, verwenden wir jetzt die Filtermethode zum Löschen. Verkäufer wählen Filter. Darin finden wir jeden Verkäufer und hier geben wir den Zustand als ID weiter, nicht als Identifier Jetzt gibt diese Filtermethode ein neues Array zurück, sodass wir diese direkt an die Funktion Set Sellers übergeben können Wir setzen das Ganze in Klammern und fügen Set-Verkäufer hinzu. Rufen wir nun die API Fall Delay Task auf. Unsere API sollte so aussehen. Wenn wir einen Verkäufer entfernen möchten, der IDFi hat , fügen wir am Ende dieser API pi hinzu Axios Punkt Delight. Hier fügen wir diese API in Vectis hinzu und am Ende fügen wir den Schrägstrich Dollar Calipacket hinzu und hier fügen wir Jetzt, nachdem wir das gelöscht haben, wollen wir nichts mehr tun weil wir das Objekt bereits aus unserer Liste entfernt haben, also brauchen wir nicht die Methode then, sondern wir brauchen die Cache-Methode für oder Behandlung Also können wir diese Fangmethode aus der Anzeigenverkäuferfunktion kopieren und sie einfach hier einfügen Wenn wir also einen Fehler haben, wird die Liste dieses Verkäufers wiederhergestellt. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf Löschen und sehen Sie , wie es von hier entfernt wird. Außerdem haben wir auf der Registerkarte Netzwerk eine Anfrage, und in der Kopfzeile haben wir eine Methode zum Löschen, und wir können als Antwort sehen, dass wir nichts erhalten. Lassen Sie uns nun die Fehlerbehandlung überprüfen. Also fügen wir hier einen Tippfehler hinzu, speichern diese Datei und klicken auf Löschen A, wir bekommen einen Fehler und unsere Liste ist auch wiederhergestellt Es funktioniert also auch. Bevor wir vergessen haben, diesen Tippfehler zu entfernen , korrigieren wir ihn 98. Übung für den Aufruf der API: Jetzt ist es Zeit für ein wenig Bewegung. wir also die Löschfunktion hinzufügen, möchte ich, dass Sie die Aktualisierungsfunktion hinzufügen. also für jeden Verkäufer Wir haben also für jeden Verkäufer ein Pattern aktualisieren Wenn wir darauf klicken, ändern wir den Namen des Verkäufers Name plus Update am Ende. So einfach ist das. Lass mich dir einen kleinen Hinweis geben. Unser Axios-Ausdruck sieht so aus. Wir verwenden Ihre Patch-Methode , da wir nur ein Detail ändern Jetzt ist dieser aktualisierte Verkäufer das Verkäuferobjekt , in dem wir den aktuellen Verkäufernamen aktualisieren. Ich möchte, dass du diese Übung ausprobierst , denn wenn du alleine übst , wirst du bessere Entwickler sein. Probieren Sie es aus und schauen Sie sich dann die Lösung an. 99. Lösungsupdate für den Verkäufer: Sehen wir uns nun die Lösung dieser Übung an. Lassen Sie uns zunächst die Schaltfläche „Aktualisieren“ für jeden Verkäufer hinzufügen. Vor dieser Schaltfläche zum Löschen hatten wir also ein TD-Tag, und in diesem Tag fügen wir eine Schaltfläche namens Aktualisieren hinzu. Lassen Sie uns nun auch das OnClick-Ereignis und die Funktion Update Seller hier übergeben Funktion Update Seller hier Und hier wollen wir die ID weitergeben. Also Pfeilfunktion und Passar Seller Dot ID. Lassen Sie uns nun diese Funktion zum Aktualisieren des Verkäufers definieren. Das ständige Update des Verkäufers entspricht also hier der ID, der Pfeilfunktion Sie nun in dieser Funktion Erstellen Sie nun in dieser Funktion zunächst ein aktualisiertes Verkäuferobjekt Also konstant, aktualisierter Verkäufer entspricht Objekt. Jetzt möchten wir hier alle anderen Details zum aktuellen Verkäufer hinzufügen alle anderen Details zum aktuellen An der Stelle dieser ID benötigen wir also vollständige Verkäuferdetails. Deshalb ändern wir diese Verkäuferpunkt-ID in Verkäufer, was das aktuelle Verkäuferobjekt ist. Holen wir uns jetzt das Verkäuferobjekt hierher. Jetzt können wir hier mithilfe des Spread-Operators vollständige Verkäuferdetails hinzufügen . Und danach werden wir den Namen ersetzen. Nennen Sie also den Punktnamen des Verkäufers , der den aktuellen Namen plus den doppelten Codebereich aktualisiert hat. Jetzt haben wir das Verkäuferobjekt aktualisiert, müssen aber unsere alten Verkäuferdaten durch diese neuen Angaben in unserer Verkäuferliste ersetzen unsere alten Verkäuferdaten durch . Lassen Sie sich nicht verwirren, sehen Sie sich das an. Also hier fügen wir Sellers Dot Map hinzu. Und darin finden wir jede Funktion mit dem Verkäufer-Pfeil, und hier übergeben wir die Bedingung, ob als Punkt-ID der Verkäufer-Punkt-ID entspricht, was wir gerade aktualisieren Wenn das stimmt, geben wir dieses aktualisierte Verkäuferobjekt zurück. Andernfalls schreiben wir auf dasselbe Verkäuferobjekt. So einfach ist das Speichern wir dieses Array nun als unsere Verkäufer. Schließen Sie dieses Array also Klammern ein und wir fügen hier Set-Verkäufer hinzu. Wenn Sie mit dieser direkten Verwendung verwirrt sind, können Sie dieses Array in einer separaten Variablen speichern und es dann in Set Sellers übergeben Es hängt ganz von dir ab. Speichern Sie die Änderungen und klicken Sie auf Aktualisieren. Hier erhalten wir diesen aktualisierten Namen, was bedeutet, dass er funktioniert. Damit ist unsere halbe Aufgabe erledigt, und jetzt müssen wir nur noch die API aufrufen. Also fügen wir hier Axios hinzu und verwenden die Patch-Methode und übergeben hier unsere API Kopieren wir das also aus Funktion „Verkäufer löschen“ und fügen es hier Jetzt sind wir an der Stelle dieser ID bei Seller Dot ID. Und beim zweiten Parameter übergeben wir unseren aktualisierten Verkäufer. Jetzt, nachdem wir diesen API-Aufruf abgeschlossen haben, wollen wir wieder nichts tun, also brauchen wir nicht die Methode then, sondern wir brauchen die Cache-Methode. Also lasst uns diese Catch-Methode kopieren. Und füge es hier ein. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf Update und es funktioniert. Wir können als Antwort sehen, dass wir den aktualisierten Namen vom Server erhalten. Lassen Sie uns nun nach Fehlern suchen. Also machen wir hier einen Tippfehler und speichern das. Klicken Sie auf Update und sehen Sie hier, dass wir eine Fehlermeldung erhalten und unsere Liste mit alten Daten wiederhergestellt wurde Es funktioniert also auch. Jetzt können wir diesen Tippfehler entfernen. 100. Axios-Variable für HTTP-Anforderungen erstellen: Also hier, in unserer Anwendung, wir jedes Mal, wenn wir eine API-Anfrage stellen müssen wir jedes Mal, wenn wir eine API-Anfrage stellen, unsere vollständige URL schreiben, damit wir unsere Basis-URL für diese Anwendung definieren können Und danach müssen wir nur noch Benutzer schreiben. Lass mich dir zeigen, was ich meine. In diesem Quellordner erstellen wir also einen neuen Ordner namens Utils In diesem Ordner erstellen wir eine neue Datei namens API ds client dot js für die Erstellung von SddprQuest In diese geben wir also zuerst XOs von XOs geben wir Danach schreiben wir Xos dot create now in diese Funktion, wir müssen unser Konfigurationsobjekt übergeben Und in diesem Objekt haben wir die Basis-URL-Eigenschaft Und hier können wir unsere Basis-URL übergeben. also zur Komponente unseres Verkäufers zurück und kopieren Sie diese Basis-URL, die in allen APIs identisch ist, und fügen Sie sie hier ein. Wenn Sie an einem anderen Projekt arbeiten, müssen Sie hier „ Sie sind zurück“ und die URL angeben. Hier können wir auch unsere API-Header übergeben, die wir mit unserer API-Anfrage senden möchten Auch hier hängt es von der API ab. Jetzt wird die Instanz für den API-Aufruf zurückgegeben. Lassen Sie uns das als Standard exportieren. Speichern Sie diese Datei, und wenn wir jetzt eine API-Anfrage mit xOS stellen möchten, wir einfach diese Instanz ein und machen dasselbe wie mit dem ursprünglichen XOS Also zurück zur Komponente des Verkäufers, und anstatt das ursprüngliche Axios zu importieren, importieren wir den API-Client von hier aus gehen wir zwei Ordner nach oben, Utils Anstelle von Axios verwenden wir jetzt den API-Client verwenden wir Drücken Sie also mehrmals Strg+D oder Befehl+D und fügen Sie hier den API-Client Anstatt der vollständigen URL geben wir hier einfach Benutzer weiter. Verwenden Sie also diese Basis-URL und entfernen Sie bei der Bearbeitung mit mehreren Cursorn diese gesamte Basis-URL. Speichern Sie das und sehen Sie, dass es genauso funktioniert wie zuvor. Dieser API-Client funktioniert also genauso wie Axios, aber wir müssen baseUrl nicht für alle APIs übergeben Und aufgrund solcher Funktionen bevorzugen die meisten Entwickler die Axios- statt der Patch-Methode Dies sind die grundlegenden Konzepte für den Aufruf einer API, die Fehler behandelt und den Loader anzeigt Wachstum von React werden viele Bibliotheken in dieses Bild kommen, aber die grundlegenden Konzepte für das Aufrufen einer API werden dieselben bleiben. Die Auswahl einer Bibliothek hängt also ganz von Ihnen ab. 101. Abschnitt 10 – Projekt 03 E-Commerce-Anwendung: Willkommen zu Abschnitt zehn des Ultimate React-Kurses. In diesem Abschnitt werden wir unser drittes Projekt erstellen, die E-Commerce-Anwendung. In diesem Projekt habe ich versucht, alle wichtigen, nützlichen und fortgeschrittenen Konzepte zu behandeln nützlichen und fortgeschrittenen Konzepte , die Sie für die Anwendung in der realen Welt benötigen. Das wird also ein großes Projekt in Ihrem Portfolio sein . Sie können eine wunderschöne Landingpage dieser Website sehen. Danach haben wir das Routing und das führt uns zur Produktseite. Hier erhalten wir eine Liste aller Produkte mit unendlicher Scrollfunktion Von oben können wir unsere Produkte auch nach Preis und Bewertung sortieren unsere Produkte auch nach Preis und Bewertung Nebenbei haben wir ein paar Kategorien, und hier bekommen wir nur Produkte dieser Kategorie Wenn wir nun auf eine Produktkarte klicken, erhalten wir eine detaillierte Produktseite dieser Bildauswahl Außerdem können wir hier Artikel mit der gewünschten Menge zu unserer Karte hinzufügen mit der gewünschten Menge zu unserer Karte Und das Schöne daran ist, dass diese Website dynamisch ist, was bedeutet, dass all diese Daten von echtem Ben stammen , den ich für dieses Projekt erstellt habe In dem Moment, in dem wir im Nebr Artikel zu einer Karte hinzufügen , sehen wir hier, dass wir eine Reihe von Artikeln auf unserer Karte Auf der Kartenseite finden wir nun die Kartendetails in dieser einfachen Tabelle Von hier aus können wir auch die Menge der Artikel ändern. Mit dieser Änderung wird diese Rechnungstabelle aktualisiert und die endgültigen Kosten werden unten angezeigt. Wir können unsere Bestellung auschecken und unser Warenkorb wird leer und wir können unsere Bestelldetails auf der Seite Meine Bestellung sehen. Es ist also ein großes Projekt, aber kein schwieriges Projekt, weil wir dieses Projekt Schritt für Schritt abschließen werden. Viele Entwickler empfinden Großprojekte schwierig, weil sie versuchen, alles auf einmal zu bauen. Und das ist der Grund, warum sie ein einfaches Projekt für schwierig halten. In diesem Projekt werden wir also zuerst versuchen, unsere Benutzeroberfläche zu erstellen, und danach werden wir unsere Anwendung mit dem Node-JS-Backend verbinden . Ich freue mich sehr über dieses Projekt und hoffe, dass Sie es auch sind. Lassen Sie uns also näher darauf eingehen. 102. Projekt- und Layout-Stil einrichten: Fangen wir mit dem neuen Phrasenprojekt an. Öffnen Sie also Ihren Ordner, in dem Sie arbeiten möchten, öffnen Sie das Terminal oder die Befehlszeile in diesem Ordner. Und genau hier, NPM, erstelle Weiß, spätestens Rot, und drücke Enter Jetzt fügen wir hier unseren Projektnamen hinzu, nämlich card Wish Du kannst benutzen, was du willst. Ich mag diesen Namen. Wählen Sie nun das Framework aus, das React ist, und hier müssen wir die Sprache auswählen, nämlich JavaScript. Gehen wir per CD, Cartwis, in das Projekt und drücken Schreiben Sie jetzt NPM install für die Installation aller Pakete. Dieser Ordner in unserem VS-Code. Also Codepunkt. Schließen wir das Terminal. Wir brauchen es nicht und schließen auch diesen Ordner. Lassen Sie uns nun überprüfen, ob unser Projekt funktioniert oder nicht. Öffnen Sie also das Terminal mit Control plus BT oder Command plus BT und schreiben Sie NPM Run Down Drücken Sie die Strg - oder Befehlstaste und klicken Sie auf diesen Link, und er funktioniert einwandfrei Kommen wir nun zu einigen grundlegenden Stilen und Layouts für unser Projekt. Wir haben also zwei Abschnitte in unserer Anwendung. Der erste ist natürlich Navbar und der zweite ist der Hauptabschnitt für das Routing Lassen Sie uns hier also die App-Komponente öffnen und zunächst gesamten Code entfernen und hier einfach den Standardcode hinzufügen. Lassen Sie uns nun unser Website-Layout definieren. Zuallererst werden wir hier den Klassennamen zur App hinzufügen. Jetzt müssen wir für NaBR das Nau-Tag hinzufügen und hier Navar übergeben. Als Nächstes fügen wir das Haupt-Tag hinzu und darin werden wir das gesamte Routing durchführen Fügen wir nun Stile für dieses Layout hinzu. Oben importieren wir die CSS-Datei mit Punktstrichstrich und Schrägstrich. Speichern Sie diese Datei und öffnen Sie die App-Dot-CSS-Datei. Lassen Sie uns alle Stile von hier entfernen und die Punkt-App hinzufügen. Wir möchten unsere Anwendung in einer Zeile definieren. Deshalb verwenden wir hier Display, um Vorlagenzeilen für den ersten Abschnitt zu klassifizieren und auf ein Pixel zu verteilen, und Auto für unseren Hauptbereich. Die Änderungen und C, wir bekommen unser Layout in der Mitte. Lassen Sie uns also die Standardstile entfernen, die wir unserem Projekt hinzugefügt haben. Öffnen Sie also die CSS-Datei mit dem Indexpunkt und lassen Sie uns all diese Kacheln entfernen. Wir brauchen es nicht. Zuallererst hatten wir Stern-Ci-Klammern, Rand zu Null, Abstand zu Null und Größe der Box zu Rahmenrahmen Jetzt fügen wir im Hauptteil die Schriftgröße auf 16 Pixel hinzu, Hintergrundfarbe zwei hat F sechs, FFA Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unser Layout, aber unsere Schrift sieht ein bisschen hässlich aus. Lassen Sie uns schnell die Schriftart hinzufügen, Google Fonts-Website öffnen und wir haben bereits unsere Schriftart ausgewählt, die wir im vorherigen Projekt verwendet haben. Gehen Sie zum Abschnitt Import und kopieren Sie dieses Import-CDN In unserer Index-CSS-Datei oben fügen wir diesen CDN-Link Um nun die Schrift anzuwenden, kopieren wir die Schriftfamilie und fügen sie in unseren Körperstil Speichern Sie die Änderungen und schauen Sie sich das an. Jetzt sieht unsere Schrift gut aus. 103. Navbar-Komponente erstellen: Ich lasse uns jetzt unsere Navbar bauen. Anstatt also den gesamten Code in die App-Komponente zu schreiben, werden wir eine separate Komponente für unsere Navbar erstellen Lassen Sie uns also diese Navbar von hier aus ausschneiden und im Quellordner einen neuen Ordner namens Components erstellen In diesem Ordner erstellen wir einen weiteren neuen Ordner namens Navbar Und darin erstellen wir eine neue Datei namens Navbar Dot JSX und eine weitere Datei für Navbar jetzt in unserer Komponente Boilerplate-Code Sagen wir jetzt in unserer Komponente Boilerplate-Code Und vergessen Sie ganz oben nicht, die CSS-Datei mit Punktstrichen und Schrägstrich zu importieren . Lassen Sie uns nun zunächst das Markup für unsere Navbar-Komponente So können wir unseren Nabar in Abschnitte unterteilen. Der erste Teil ist der linke Teil unseres Nabars, Namen unserer Website und ein Eingabefeld mit Suchschaltfläche Der zweite Teil ist, dass wir mehrere Links haben. Also fügen wir an der Stelle dieser Aufgabe unser NOW-Tag ein und geben ihm einen Klassennamen für Navbar In diesem Tag hatten wir nun zwei Gebühren, einen für die linke Seite und einen für die rechte Seite Jetzt fügen wir im ersten Teil H einen Tag hinzu und übergeben hier den Klassennamen an die NaBr-Unterstrich-Überschrift. Und hier fügen wir unseren Website-Namen Cart Wish hinzu. Jetzt, nach diesem H, fügen wir ein Formular mit dem Klassennamen hinzu, das NaBr-Unterstrichformular. Ich werde dir später sagen, warum wir hier ein Formular hinzufügen. In diesem Formular fügen wir nun eine Eingabe mit dem Typ Text hinzu. Außerdem fügen wir der Navbar-Unterstrichsuche einen Klassennamen und einen Platzhalter für die Suche nach Platzhalter Danach fügen wir eine Schaltfläche mit dem Typ Senden hinzu und geben ihr einen Klassennamen, eine Schaltfläche mit einem Unterstrich für die Suche und hier Und das ist alles, was wir in unserem ersten Teil von NaBr hinzufügen wollen. Wir werden den zweiten Teil hinzufügen, der in der nächsten Lektion Links enthält. Speichern Sie die Änderungen und schauen Sie sich das an. Wir bekommen nichts, weil wir vergessen haben , unsere Nabar-Komponente zu unserer App-Komponente hinzuzufügen Also fügen wir in der App-Komponente hier New Bar und der automatische Import funktioniert Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie hier, wir bekommen unsere Elemente. Lassen Sie uns nun Stile für diese Elemente hinzufügen. In der Navbar-Punkt-CSS-Datei fügen wir also Navbar hinzu, und in Ci-Klammern setzen wir zuerst display auf flag, richten Elemente zentriert aus und richten den Inhalt anhand von Leerzeichen Dadurch werden unsere beiden Teile voneinander getrennt. Jetzt wird die Polsterung auf Null und 40 Pixel und die Hintergrundfarbe auf Weiß eingestellt Danach hatten wir den Punkt Nebr, die Überschrift, die unterstrichenen Klammern, den Rand rechts auf 20 Pixel und die Schriftgröße Speichern Sie das und sehen Sie, wie wir hier unsere Überschrift bekommen. Jetzt müssen wir dieses Formular in dieselbe Zeile verschieben. Dazu müssen wir also auch Display Flex verwenden und die Elemente zentriert ausrichten. Lassen Sie uns also eine separate Klasse für diese beiden Eigenschaften erstellen , da sie in unserer Anwendung häufig verwendet werden. Also schneiden wir diese beiden Zeilen und fügen in der CSS-Datei mit dem Indexpunkt unten aus und fügen in der CSS-Datei mit dem Indexpunkt unten eine neue Klasse namens Align Center hinzu und fügen darin weitere Dtiles Speichern Sie diese Datei und fügen wir zuerst diese Klasse vor neuen Klasse und auch für diesen zuerst fälligen Klassennamen hinzu, um die Mitte auszurichten Speichern Sie diese und kehren Sie zur Nabart-CSS-Datei zurück. Lassen Sie uns nun Stile für unser Formular festlegen. Suchen Sie ein NewBruerScore-Formular. Und in CL-Klammern fügen wir Breite auf 450 Pixel, Höhe auf 40 Pixel, Bader auf ein Pixel, Solid hat einen CD-CD-Wasserradius auf fünf Pixel und Polsterung auf drei Pixel Danach hatten wir die Punktsuchleiste, Unterstrichsuche und Cali-Klammern. Innerhalb dieser Klammern fügen wir Flaggen zu einer hinzu, weil wir möchten, dass unsere Eingabe gesamten verfügbaren Platz in unserem Formular abdeckt Dazu müssen wir unserem Formular also auch die Klasse Align Center hinzufügen Speichern Sie das und kehren Sie zu unserer CSS-Datei zurück. Hier fügen wir Höhe auf 100%, Polsterung auf Null und sieben Pixel, eine Größe auf 20 Pixel, ein Gewicht auf 500, Rand auf Null und auch Kontur auf Null hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Lassen Sie mich auf 100% herauszoomen und sehen, dass es gut aussieht. Lassen Sie uns nun Stil für diese Suchschaltfläche hinzufügen. Also fügen wir die Schaltfläche „ Unterstrich für die Suche , Klammern Ci, Höhe 200%, Auffüllung auf Null und zehn Pixel Schriftgröße auf 20 Pixel, Schriftstärke auf 500, Wer auf Nichts, Randradius auf fünf Pixel hinzu Die runde Farbe hat 64, 57f9. Farbe auf Weiß und Cursor auf Zeiger. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir bekommen unsere linke Navigationsleiste, aber hier ist eine Sache. Alle diese Eingaben und Tasten haben eine Standard-Schriftfamilie. Ich möchte unsere Schrift auch für sie verwenden. Also in der CSS-Datei mit Indexpunkt und verschiebe diese Schriftfamilie in all diese Stile. Ein Element, ein Monster in der Schrift. Sag das und sieh, jetzt sieht es gut aus. 104. Navbar-Links hinzufügen: Sagen wir nun Links in ihrem NaBR. Also hier am zweiten Tag fügen wir NaBrUnderscore den Klassennamen hinzu, Tinten Darin wollen wir nun Links erstellen. Also fügen wir ECA-Tag und HF zu has hinzu, und darin fügen wir Home hinzu. Und für Imog fügen wir ein Image-Tag und geben ihm einen Klassennamen, um Imog mit Tinte zu unterstreichen Lassen Sie uns nun einige Bilder für unser Projekt einrichten. Im Ressourcenordner haben wir den Ordner Project Three, und darin befinden sich Assets. Wählen Sie einfach all diese Bilder aus und legen Sie sie in unseren VS Code Assets-Ordner ab. Jetzt oben importieren wir Rocket von hier aus gehen wir zwei Ordner nach oben, Assets Slash Rocket Dot PNG Und lassen Sie uns diese Rakete einfach hier weiterreichen. Speichern Sie die Änderungen und schauen Sie sich das an. Hier bekommen wir, was wir wollen. Lassen Sie uns nun Stil für diesen Link hinzufügen. Zuallererst übergeben wir Klassennamen in dieses Anker-Tag und setzen es auf Align underscore center. Außerdem fügen Align underscore center before Navbar underscore-Links hinzu, um unsere Elemente vertikal auszurichten underscore-Links hinzu, um unsere Elemente vertikal Speichern Sie diese und fügen in der Navbar-Dot-CSS-Datei unten die Navbar-Unterstrich-Links-Cl-Klammern hinzu, eine Größe bis 20 Pixel. Danach fügen wir Punkte, NabrUnderscore-Links NabrUnderscore-Links Hier zielen wir auf das Anger-Tag und innerhalb dieses Randes auf 15 Pixel Und zum Schluss fügen wir einen Punkt hinzu: Link, Unterstrich imogKliBackets, Breite auf 25 Pixel und Rand links auf fünf Pixel und Sag die Änderungen und sieh, hier bekommen wir einen schönen Link . Lassen Sie uns nun einige grundlegende Stile für alle Anker-Tags festlegen. In der CSS-Datei mit Indexpunkten fügen wir also Anker-Calibackets, zu erbende Schriftgröße und die Schriftstärke auf 500 hinzu Schriftstärke Textdekoration auf „Nicht“, „ Farbe“, „Vererbung“ und Cursor auf Zeiger Schau dir die Chinges an und sieh sie dir an. Siehst du, hier haben wir unseren Stil, aber ich glaube, unsere Schriftgröße wird nicht angewendet Also schaue ich mir diese an und sehe, dass wir hier keine Angabe zur Schriftgröße erhalten. Wahrscheinlich schreibe ich einen falschen Klassennamen. Also in der Nava-Komponente, hier können wir sehen, muss ich NBR-Unterstrich-Links hinzufügen . Das tut mir leid Speichern Sie das und sehen Sie, dass es wirklich gut aussieht. Jetzt denken Sie vielleicht, wenn wir weitere Links hinzufügen, damit wir eine Komponente für diesen einzelnen Link erstellen können. Also schneide diesen Link von hier aus und im Nabar-Ordner erstellen wir eine neue Datei namens ink with icon JSX. Außerdem erstellen wir eine neue Datei für den Link mit Icon Jetzt fragen Sie sich vielleicht manchmal, warum wir CSS-Datei für jede Komponente separat erstellen Der Grund dafür ist, dass wir, wenn wir für jede Komponente eine separate CSS-Datei erstellen , direkt in anderen Projekten verwenden können diese Komponente mit ihrem CSS direkt in anderen Projekten verwenden können. Hier fügen wir unseren Standardcode von RAFC hinzu und oben importieren wir Perioden-Slash-Ink mit Gut. Jetzt, an der Stelle, an der dieser Tag fällig ist, fügen wir unseren Link ein. Lassen Sie uns auch diesen Link-Bildstil aus Nabar ausschneiden und in unsere CSS-Datei mit dem Link mit dem Symbol einfügen Lassen Sie uns diese Komponente nun wiederverwendbar machen. Hier brauchen wir also drei Requisiten, den ersten Link-Titel, der danach das Home ist, Link, den wir in diesem HF übergeben können, und zuletzt brauchen wir Imog, das wir in diesem Image-Tag verwenden Lassen Sie uns die statischen Werte durch unsere Requisiten ersetzen. Linktitel und Bild. Speichern Sie diese Datei, und jetzt fügen wir in der Nebar-Komponente hier den Link mit der Symbolkomponente hinzu, und hier übergeben wir unsere Also Titel zu Home, Link zu Forward Slash und Imoge Lassen Sie uns diesen Link jetzt noch fünf Mal duplizieren. Und für verschiedene Links benötigen wir unterschiedliche Imogs Also müssen wir das auch oben eingeben. Lassen Sie uns diese Eingabeanweisung noch fünfmal duplizieren und diesen Titel in Stern und das Bild in PNG mit leuchtendem Sternpunkt ändern diesen Titel in Stern und das Bild in PNG mit leuchtendem Sternpunkt Als Nächstes haben wir die ID-Schaltfläche und die Bild-ID-Schaltfläche. Als nächstes haben wir Memo und Image, Memo Dot PNG. Als Nächstes bestellen Sie ein Bild zum Verpacken. Und endlich haben wir ein Log-Bild-zu-Log-PNG-Protokoll. Jetzt ändern wir unten unseren zweiten Linktitel in Produkte, Link zu Slash-Produkten und Bild in Stern Als nächstes der Titel für die Anmeldung, Links Login und Imog to ID Button Als Nächstes haben wir den Titel zur Anmeldung, Link zur Slash-Anmeldung und Als Nächstes haben wir den Titel „Meine Bestellungen“, den Link „Meine Bestellungen“ und „Imoge“ zur Und endlich haben wir den Titel zum Abmelden, den Link zum Schrägstrich, das Abmelden und Imoge zum Loggen Speichern Sie die Änderungen und schauen Sie sich das an . Siehst du, wir haben diese schönen Links. Jetzt müssen wir nur noch den Link zum Einkaufswagen hinzufügen , der sich ein wenig von diesen Links unterscheidet , da wir unsere Kartenanzahl hinzufügen müssen. Hier fügen wir also ein weiteres Fahrzeugkennzeichen, HRF, zum Slash Cart und hier geben wir den Klassennamen an das Line Center Darin übergeben wir nun unseren Linknamen, der cart lautet. Für die Anzahl fügen wir einen Absatz und einen Klassennamen zur Zeilenmitte hinzu und die Anzahl der Warenkorbunterstriche. Und darin geben wir unsere Zählzahl weiter, die Null ist. Speichern Sie das und lassen Sie uns Stil dafür hinzufügen. Also fügen wir in der Navbar-Dot-CSS-Datei unten die Anzahl der Kartenunterstriche und Klammern hinzu, und darin fügen wir den Inhalt der Rechtfertigung zur Mitte hinzu. Aus diesem Grund fügen wir vor der Kartenzählung Klammern hinzu, und darin fügen wir den Inhalt der Rechtfertigung zur Mitte hinzu. Aus diesem Grund fügen die Klasse Align Center vor der Kartenzählung Danach die Breite auf 20 Pixel Höhe auf 20 Pixel, Bestellradius 200% für Hintergrundfarbe auf 64, 57f9, Farbe Eine Größe bis 15 Pixel und ein Rand links bis fünf Pixel. Nutzen Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir unsere Zählungen. So können Sie sehen, wie schön diese Navbar aussieht. Ich weiß, dass der Styling-Teil ein bisschen langweilig ist, aber er ist auch ein notwendiger Bestandteil jedes Projekts Also müssen wir das tun. Und während wir das tun, machen wir das einfach mit Freude 105. Heldenbereich erstellen: Lassen Sie uns nun unseren Heldenbereich für die Landingpage erstellen. Dieser Heldenbereich ist das Erste, was der Benutzer auf unserer Website sehen wird. Also müssen wir das wirklich nett machen. Zuallererst erstellen wir hier einen neuen Ordner namens home, in dem wir alle unsere Komponenten speichern , die sich auf die Homepage beziehen. Erstellen Sie also eine neue Datei namens Homepage Dot JSX. Und hier fügen wir mithilfe von RAFC Boilerplate-Code hinzu. Ist Ihnen aufgefallen, wie schnell und einfach diese Reaktion wird, wenn wir nur zwei Anwendungen erstellen? Stellen Sie sich vor, Sie arbeiten an jedem Projekt mit dieser Intensität, wie weit Sie in der Karriere als Webentwickler gehen können. Es ist nur eine Frage der Zeit. Auf unserer Homepage wollen wir also zuerst den Heldenbereich anzeigen, dann haben wir Feature-Produkte und dann auch den Heldenbereich. Der Grund, warum wir keine Homepage-Punkt-CSS-Datei erstellen , ist, dass wir unserer Homepage keinen Stil hinzufügen möchten. Alles, was Sie sind, sind separate Komponenten. Im Home-Ordner erstellen wir eine neue Datei namens Herosection Dot CSS Außerdem erstellen wir eine weitere Datei, Herosection dot JSX. Fügen Sie hier Boilerplate-Code hinzu, und oben importieren wir Hero Section, importieren wir Hero Section, Gut. Jetzt fügen wir an der Stelle dieses De einen Abschnitt hinzu und geben ihm einen Klassennamen, Hero Underscore Section Diese benötigen wir in zwei Teilen. Erstens für Details und zweitens nur für Bilder. Erstellen Sie also D mit der Klasse Align Unterstrich Mitte mal zwei. Gut. Jetzt fügen wir im ersten Teil zwei hinzu, die den Klassennamen und den Heldentitel enthalten. Darin schreiben wir mit und den Heldentitel enthalten. Darin dem iPhone 14 P. Danach fügen wir einen Absatz hinzu und geben ihm einen Klassennamen, den Unterstrich eines Helden Und wir geben hier Dummiteg als Untertitel weiter, also schreibe Lorem, 15, und drücke Und danach fügen wir ein Anker-Tag für die Schaltfläche Bis jetzt hinzu und geben ihm einen Klassennamen, Jetzt im zweiten Teil müssen wir dem iPhone das Bild-Tag und die Quelle hinzufügen und ihm einen Klassennamen für Hero Underscore Image geben einen Klassennamen für Hero Underscore Lassen Sie uns nun dieses Bild oben importieren. Also importiere ich das iPhone von hier aus, wir gehen zwei Ordner nach oben Assets, iPhone 14, prob P. Speichern Sie das und lassen Sie uns die Komponente Hero Section zu unserer Homepage-Komponente hinzufügen unserer Homepage-Komponente das speichern, müssen wir auch unsere Home-Komponente zu unserer App-Komponente hinzufügen Sie können sehen, wie Autoiport unseren Prozess beschleunigt. Sagen wir die Änderungen, und hier bekommen wir eine Fehlermeldung. Entschuldigung, ich habe versehentlich eine Punkt-CSS-Datei für den Home-Bereich hinzugefügt. In unserer Hero-Section-Komponente ändern wir dies also in eine Hero-Section-Punkt-CSS-Datei. Sag die Änderungen und sieh sie dir an. Wir können wegen unseres großen Bildes nichts sehen. Lassen Sie uns also Stil für unseren Heldenbereich hinzufügen. In der CSS-Datei Hero Section Dot fügen wir zuerst den Abschnitt Hero Underscore und die Gully-Klammern hinzu. Darin setzen wir Display auf GED, GED-Spalten auf ein FR und ein FR für Selbe Höhe auf 550 Pixel, Polsterung auf Null und 60 Pixel für links und Hintergrundfarbe auf Schwarz und Textfarbe auf Weiß. Danach fügen wir Abschnitt Hero-Unterstrich und die spitze Klammer hinzu Hier zielen wir auf Du Culiacket ab und fügen „ Inhalt ausrichten“ zur Mitte, Flexrichtung“ zur Spalte und Textzeile Hier können wir die Flexbox-Eigenschaft verwenden, da wir für diese Tauchgänge bereits die Mittelklasse Align festgelegt Danach fügen wir Stil pro Heldentitel hinzu, also unterstreiche Hero den Titel und die Schriftgröße auf 45 Pixel, die Schriftstärke auf 700 und den unteren Rand auf 15 Danach hatten wir den Untertitel Hero Underscore. Und darin fügen wir die Schriftgröße auf 24 Pixel, den unteren Rand auf 232 Pixel und die Breite auf Jetzt, nach diesem Untertitel, haben wir unseren Link, also Punkt Hero unterstreicht Und darin fügen wir eine Polsterung von 16 Pixeln und 32 Pixeln hinzu. Text wird in Großbuchstaben umgewandelt Abstand zu 1,5 Pixel, Schriftstärke zu 700, Rand zu zwei Pixel, durchgehend als FFF, Rahmenradius zu 32 Pixel, Hintergrundfarbe zu Weiß und Farbe zu Schwarz und Farbe Ich werde im Abschnitt „Styling“ etwas schnell , weil ich Sie nicht langweilen möchte, indem ich jeden einzelnen Stil erkläre Außerdem möchte ich keinen einfachen Stil verwenden, denn wenn unsere Anwendung eine gute Funktionalität hat, aber der Stil nicht gut ist, dann könnte Ihr Projekt ein bisschen langweilig aussehen. Fügen wir nun den O-Effekt für diesen Link hinzu. S-Punkt Hero unterstreicht Link, Spalte O. Und innerhalb dieser Hintergrundfarbe wird transparent und Farbe wird weiß Wir können hier auch einen Übergang zu allen 0,3-Sekunden-In-Out-Outs hinzufügen , um einen gleichmäßigen Übergangseffekt Lassen Sie uns nun den Stil für unser Heldenbild festlegen. Unterstreichen Sie also das Bild mit Hero und fügen Sie innerhalb der ecuren Klammern die Höhe auf 500 Pixel Außerdem möchten wir diesem Bild einen Hover-Effekt hinzufügen Der Übergang zu allen 0,3 Sekunden ist abgeschlossen. Danach fügen wir das Hero-Unterstrich-Bild, Spalte O, hinzu. Wir transformieren es einfach auf die Skala 1,05, speichern die Änderungen und schauen Schau, wie schön das aussieht. Ich mag diesen Stil wirklich. Lassen Sie uns diese Komponente der Heldenabteilung wiederverwendbar machen. Also in der Hero-Sektion-Komponente, welche Requisiten wir wollen. Zuerst wollen wir den Titel, dann den Untertitel, jetzt Tinte für B und ein Bild für das Display-Hero-Bild Lassen Sie uns nun diese Zeichenketten durch unsere Requisiten ersetzen. Also Titel mit Titel Dmitex zum Untertitel. Und hier geben wir Tinte in HRF weiter, und endlich haben wir ein Bild, wir ersetzen dieses iPhone Lass uns oben stehen, habe diesen Import von hier Wir brauchen es in dieser Komponente nicht. Speichern Sie das und in der Home-Komponente fügen wir diesen Import oben hinzu. Außerdem importieren wir ein weiteres Bild auf dem Mac aus zwei Ordnern höher als Assets, und hier sehen wir uns unseren Image-Namen an. Wählen Sie dieses Mac-System aus, drücken Sie F zwei und kopieren Sie diesen Namen von hier. Ich verwende diesen Trick, weil ich beim Importieren von Bildern keine Fehler machen möchte. Also können wir es einfach hier einfügen. Lassen Sie uns nun unsere Requisiten in dieser Komponente für den Heldenbereich weitergeben. Erstens entspricht der Titel dem von iPhone 14 P. Untertitel um die Leistung des neuesten iPhone 14 mit unserer professionellsten Kamera aller Zeiten zu erleben . Link vorerst einfach Schrägstrich und Bild auf das iPhone weiterleiten. Sag die Änderungen und es funktioniert genauso. Lassen Sie uns nun diese Komponente für den Heldenbereich duplizieren und nach unten verschieben. An der Stelle dieses Titels hatten wir das ultimative Setup erstellt. Was die Untertitel angeht, fügen wir hinzu, dass Sie nach der Konfiguration Ihres Mac Mini ein Studio-Display und farblich abgestimmtes Magic-Zubehör farblich abgestimmtes Magic-Zubehör in Ihre Tasche legen können Nochmals, Link zum erneuten Schrägstrich, wir werden ihn später ändern und das Bild auf Hier stelle ich fest, dass ich bei meinem iPhone 14-Titel einen Fehler gemacht habe. Ich achte bei dieser Aufnahme auf lange Untertitel-Tags , aber ich habe am Anfang einen Fehler gemacht Muss an meinem Tippen arbeiten, die Inges speichern und mal nachschauen Siehst du, wir haben unsere beiden Helden-Sektionen. Das sieht wirklich nett aus. In der nächsten Lektion werden wir nun einen Bereich mit Feature-Produkten erstellen , den wir zwischen diesen beiden Heldenbereichen hinzufügen werden. Ich weiß, das ist eine kleine lange Lektion. Sie können fünf bis zehn Minuten Pause machen und frische Luft schnappen Wir sehen uns in der nächsten Lektion. 106. Abschnitt „Ausgewählte Produkte“ hinzufügen: Lassen Sie uns nun den Bereich „Ausgewählte Produkte“ für unsere Homepage hinzufügen. Also hier im Home-Ordner erstellen wir eine neue Datei mit dem Namen Featured Products Dot CSS und wir erstellen auch eine neue Komponente namens Featured Products Dot JSX Jetzt fragen Sie sich vielleicht, warum ich zuerst eine CSS-Datei und dann eine JSX-Datei erstelle zuerst eine CSS-Datei und dann eine JSX-Datei Das liegt einfach daran, dass wir, wenn wir endlich eine CSS-Datei erstellen, wieder zur JSX-Datei wechseln müssen also in dieser JSX-Datei Fügen Sie also in dieser JSX-Datei unseren B Blet-Code hinzu, und oben importieren wir unsere vorgestellten Produkte in Gut. An der Stelle dieser Seite fügen wir nun Abschnitt mit dem Klassennamen und den hervorgehobenen Produkten hinzu Nun in diesem Abschnitt, was wir wollen. Zuerst wollen wir eine Überschrift, also zwei und fügen hier vorgestellte Produkte hinzu. Danach wollen wir drei Produktkarten hinzufügen, also müssen wir sie in ein weiteres De einpacken und ihr einen Klassennamen geben , eine Liste der ausgewählten Produkte. Und wir wissen, dass das eine Liste ist, also können wir hier Flexbox verwenden Vor diesem Klassennamen fügen wir also einen Unterstrich in der Darin erstellen wir nun einen Artikel und geben ihm einen Klassennamen, eine Produktunterstrichkarte. Und für den Moment reichen Sie einfach das Produkt hier ein. Speichern Sie die Änderungen und schauen Sie sich das an. Leider haben wir erneut vergessen, unsere Komponente „Ausgewählte Produkte“ zu unserer Startseite hinzuzufügen . Deshalb fügen wir zwischen diesen beiden Heldenbereichen unsere Komponente „Ausgewählte Produkte“ hinzu. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir unsere vorgestellten Produkte. Lassen Sie uns nun Stile für sie festlegen. In der CSS-Datei mit den Punkten „Ausgewählte Produkte“ fügen wir zunächst hervorgehobene Produkte mit Unterstrich, coole Klammern und einen Rand von 65 Pixeln hinzu Danach fügen wir hervorgehobene Produkte mit Unterstrich und spitze Klammern hinzu. Hier zielen wir auf zwei Tags ab, was unsere Überschrift ist Und genau hier, eine Größe bis 48 Pixel, Text an der Mitte ausrichten und Rand unten an 65 Pixel Lassen Sie uns zum Schluss den Stil für unsere Produktliste festlegen. Punktieren Sie also die hervorgehobenen Produkte, unterstreichen Sie die Liste, Coli-Klammern und fügen Sie sie hier hinzu, Inhalt mit Leerzeichen zu begründen Aus diesem Grund fügen wir die Klasse Align Center für diese Liste hinzu. Und danach fügen wir Margin, Bottom, wieder 65 Pixel hinzu. Ich sage dir noch einmal, dass ich dieses CSS schreiben kann , weil ich viel für dieses Projekt übe. Wenn ich dieses Projekt zum ersten Mal erstelle, muss ich auch für diese Kacheln Ausprobieren. Ich übe es, weil ich Ihre kostbare Zeit nicht mit Versuch und Irrtum beim einfachen Styling verschwenden möchte . Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Siehst du, wir bekommen unseren Bereich mit Feature-Produkten. In der nächsten Lektion werden wir nun eine Produktkarte für dieses Projekt erstellen. 107. Produktkarte erstellen: Lassen Sie uns nun eine Produktkartenkomponente erstellen damit wir sie mehrmals verwenden können. Lassen Sie uns also dieses Artikel-Tag ausschneiden und eine neue Datei namens Product Card Dot CSS erstellen. Danach erstellen wir eine neue Komponente namens Product Card Dot JSX Fügen wir hier Boilerplate hinzu, und oben importieren wir die CSS-Datei für die Produktkarte Gut. Jetzt fügen wir an der Stelle dieses De unseren Artikel-Tag ein, den wir gerade ausgeschnitten haben. Was wollen wir in der Produktkarte? Wir wollen zu DuS. Eine für die Anzeige, das Produktplakat oder das Bild, und eine zweite für Produktdetails. Hier fügen wir also Du hinzu und geben ihm einen Klassennamen, ein Produkt, das das Bild unterstreicht Und in diesem Du fügen wir unser Image-Tag hinzu und geben ihm eine Quelle, sagen wir, iPhone und Kunst zum Produktbild Lassen Sie uns dieses Bild oben importieren. Also, hier gehen wir zwei Ordner nach oben, Assets, Schrägstrich auf Nun, hier ist eine Sache. Ich möchte den Benutzer zur ausgewählten Produktseite weiterleiten , auf der der Benutzer weitere Details zu diesem Produkt sehen kann. So können wir dieses Bild mit einem Anker-Tag umhüllen. Wenn Sie wissen möchten, wie ich das mache, lassen Sie mich Ihnen zeigen, dass es wirklich einfach ist. Wählen Sie zuerst das Tag aus, das Sie umbrechen möchten , und drücken hier Strg+Sift plus P oder Befehl+Sift plus P W, Umbruch mit Abkürzung, wählen Sie dieses und hier den Tagnamen aus und drücken Siehst du, wir verstehen das. Jetzt können wir in HRF so bestehen, als ob dieses Produkt eins wäre. Diese ist die Produkt-ID. Nach dieser DU fügen wir nun eine weitere DU mit dem Klassennamen und den unterstrichenen Produktdetails hinzu In diesen Feldern fügen wir zunächst drei H-Tags hinzu und geben ihr einen Klassennamen, das Produkt unterstreicht Und hier schreiben wir 999 Dollar. Danach erstellen wir einen weiteren Absatz und geben ihm einen Klassennamen, einen Produktunterstrichtitel Und genau hier, iPhone 14 Pro. Jetzt haben wir endlich eine Zeile, die aus zwei Abschnitten besteht. Der erste hat die Bewertung und die Anzahl der Bewertungen, und ein anderer hat die Schaltfläche „In den Einkaufswagen“. Also erstellen wir ein Potter-Tag und geben ihm einen Klassennamen, einen Linienmittelpunkt und eine Fußzeile mit Produktinformationen Darin fügen wir nun eine DU hinzu und geben ihr einen Klassennamen, einen Linienmittelpunkt In diesem D benötigen wir nun zwei Absätze, einen für die Bewertung und einen für die Anzahl der Bewertungen. Fügen Sie den ersten Absatz und den Klassennamen hinzu, um den Mittelpunkt und die Produktbewertung aufeinander abzustimmen. Sie können sehen, dass Align Center Class nützlicher ist, wenn es darum geht, Dinge zu zentrieren Darin fügen wir nun Bild und in der Quelle Stern und Kunst zu Stern hinzu Hier schreiben wir unsere Bewertung, 5.0. Geben Sie nun nach diesem Absatz einen Klassennamen, ein Produkt, einen Unterstrich für die Bewertung und die Anzahl der Unterstriche Und genau hier, 120. Und endlich, nach diesem Tauchgang, fügen wir die Schaltfläche „Hier“ hinzu und geben ihr einen Kursnamen, legen sie in den Einkaufswagen. Und darin fügen wir ein Bild hinzu, und in der Quelle geben wir Korb und RT an den Korb weiter. Geben wir nun diese beiden Bilder oben ein. Also duplizieren Sie diese Eingabe noch zweimal, und hier schreiben wir Stern und Bildname in White Dstar Dot PNG Und zum Schluss ändern wir es in Korb und Bild in Korb-PNG . Speichern Sie die Änderungen. Und in der Komponente „Funktionen“ und „ Produkte fügen wir die Komponente „Produktkarte“ hinzu. Nett. Und jetzt lassen Sie uns diese noch dreimal duplizieren. Speichern Sie das und sehen Sie, wir haben unsere Landingpage durcheinander gebracht Lassen Sie uns den Stil dafür festlegen. Im CSS-Stapel mit Produktkartenpunkten fügen wir also zunächst eine Punkt-Produktunterstrichkarte El-Klammern und innerhalb dieser Breite auf 275 Pixel, Höhe auf 330 Pixel, Rand auf 20 Pixel, Werradius auf 12 Pixel, Box SDO auf RGBA, Null, Null, Null, 0,24 Danach null Pixel für XX, drei Pixel für die Y-Achse und acht Pixel für und acht Pixel für Wenn Sie andere Boxschatten erkunden möchten, habe ich eine Website, die ich häufig verwendet habe, wenn ich Boxschatten hinzufügen möchte Suchen Sie also im neuen Tab und holen Sie sich den CSS-Scan. Und hier haben wir 93 wunderschöne Boxschatten. Und wir können es als CSS kopieren, indem wir direkt auf dieses Feld klicken. So können Sie diese Website mit einem Lesezeichen versehen. Zurück zu unserer CSS-Datei. Hier fügen wir Weiß eine Hintergrundfarbe hinzu. Danach fügen wir ein Punktbild mit einem Produktunterstrich und innerhalb der Cali-Klammern fügen wir die Höhe zu 200 Pixel hinzu, Text zur Mitte ausrichten und den Rand unten zu einem Pixel hinzufügen, Solid hat wenn ich Ii Ii Danach zielen wir auf das Punktprodukt, das Unterstreichungsbild und das Bild-Tag ab Und innerhalb dieser Höhe zu 100%. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, unser Bildbereich ist fertig. Lassen Sie uns nun den Stil für diesen Detailbereich festlegen. Also fügen wir hier Punkte zum Produkt hinzu und unterstreichen die Details. Und darin fügen wir eine Polsterung von zehn Pixeln für oben und unten und 20 Pixel für links und rechts Danach setzen wir auf Produkt mit Punkt, unterstreichen den Preis und Calibacket. Darin fügen wir die Schriftgröße auf 21 Pixel und die Schriftstärke auf Fügen wir nun den Stil für das Punktprodukt hinzu und unterstreichen den Titel. Und hier fügen wir eine Größe zu 18 Pixeln und den oberen Rand zu vier Pixeln Speichern Sie das, und unsere Karte sieht aufgrund dieses Bildes immer noch massenhaft aus. Also lass uns das reparieren. Hier fügen wir also Punktprodukt, Unterstrich-Informationen und Unterstrich-Fußzeile Ali-Klammern, und hier fügen wir den Rechtfertigungsinhalt zum Abstand dazwischen und den Rand auf zehn Pixel für oben und unten und Null für links und Danach geben wir die Punktbewertung für den Produktunterstrich, die Cali-Klammern, Höhe auf 30 Pixel, Polsterung auf vier Pixel und die Schriftstärke von acht Pixeln Der Randradius liegt bei fünf Pixeln, die Hintergrundfarbe bei FC bei 311 und die Farbe Danach zielen wir Punktprodukt, die Unterstreichungsbewertung, das Bild, Coli-Klammern und innerhalb dieser Klammern mit bis zu 20 Pixeln und einem Rand von rechts auf fünf Pixel ab Danach fügen wir das Punktprodukt, Bewertung des Unterstrichs, die Anzahl der Unterstriche und die Cali-Klammern und innerhalb dieser Schriftgröße bis 16 Pixel, linken Rand auf zehn Pixel, Farbe auf Grau, Polsterung auf Null und zehn Pixel und Wasser links auf zwei Pixel. Solid hat DC DC DC Solid Speichern Sie das und schauen Sie sich das an. Hier können wir unseren Stil anhand dieses Korbbildes sehen. Also CTS-Code, und hier zielen wir auf einen Punkt auf zwei CAT-Coli-Klammern und darauf mit 40 Pixeln, Höhe auf 40 Pixel, Grenze auf Nonne, Randradius auf 100%, Hintergrundfarbe auf transparent. Und Cursor zum Zeiger. Und zu guter Letzt setzen wir Punkt A auf Karte und Bild-Tag Cully-Klammern und Breite auf 100% und Höhe auf 100% Sag die Änderungen und sieh sie dir an. Siehst du, jetzt sieht unsere Karte richtig gut aus. Im Moment machen wir diese Produktkartenkomponente nicht dynamisch da wir diese Daten im nächsten Abschnitt von unserem Backend abrufen werden . Unsere Ausleihseite ist jetzt also fertig. 108. Produktseite erstellen: In der vorherigen Lektion haben wir also unsere Startseite fertiggestellt. Beginnen wir nun mit unserer zweiten Seite , der Produktseite. So können wir diese Produktseite in Abschnitte unterteilen. Der erste Abschnitt ist die Seitenleiste , in der wir alle unsere Kategorien anzeigen, und auf der rechten Seite haben wir eine Produktliste Also schließe ich alle Dateien von hier aus. Und jetzt erstellen wir in unserem Komponentenordner einen neuen Ordner namens Produkte. Und darin erstellen wir eine neue Datei namens Productspage dot css Und danach erstellen Sie eine neue Komponente namens products page dot Lassen Sie uns nun den Standardcode verwenden, der RFC verwendet, und oben geben wir CSS mit Seitenpunkten für Periodenprodukte Jetzt fügen wir an der Stelle dieses Taues einen Abschnitt hinzu und geben ihm einen Klassennamen, Produkte und eine Und in diesem Abschnitt haben wir zwei Dinge: Seitenleiste und Produktliste Fügen wir hier also ein Seiten-Tag hinzu und geben ihm einen Klassennamen, Produkte und einen Unterstrich in der Seitenleiste Und darin schreiben wir eine Seitenleiste. Nach dieser Seitenleiste erstellen wir einen weiteren Abschnitt und geben der Klasse zwei Produkte, Unterstrich-Liste, Unterstrich-Abschnitt Und genau hier, Produktliste. Mal sehen, was wir bekommen. Speichern Sie diese Datei und in der App-Komponente kommentieren wir diese Homepage und fügen hier eine Produktseite hinzu. Und hier können wir sehen, dass ich eine Produktseite hinzufüge , die sich von der CSS-Datei unterscheidet. Also ändern wir diesen Dateinamen in Produktseite Punkt Jx. Außerdem ändern wir in dieser Komponente unseren Funktionsnamen in Produktseite und aktualisieren auch diesen Export Und oben fügen wir den Punkt CSS für die Produktseite hinzu. Speichern Sie diese Datei, und in unserer App-Komponente fügen wir hier die Komponente Produktseite hinzu. Mach dir keine Sorgen. Wir werden Routing hinzufügen, nachdem wir unsere Styles fertiggestellt haben. Im Moment wollen wir keine Komplexität. Speichern Sie die Änderungen und schauen Sie sich das an. Hier bekommen wir die Seitenleiste und die Produktliste. Lassen Sie uns den Stil für das Seitenlayout unserer Produkte festlegen. In der CSS-Datei mit Punkt für die Produktseite fügen wir Punktprodukte, Unterstrichseiten, Calibrackets und Display zu GED hinzu, weil wir unsere Anwendung in Abschnitte unterteilen möchten, GED-Vorlagenspalten für einen Frame und vier Frames und Padding auf einen Frame und vier Frames und Padding Speichern Sie die Änderungen und sehen Sie sich das an. Siehst du, wir bekommen separate Abschnitte. Fügen wir nun unsere Seitenleiste hinzu. Anstatt hier den ganzen Seitenleistenabschnitt zu schreiben, können wir eine neue separate Komponente für die Seitenleiste erstellen Also schneiden wir dieses Tag beiseite und erstellen im Produktordner eine neue Datei, Produkte und erstellen im Produktordner eine neue Datei, Produkte, Seitenleisten-Punkt-CSS, und eine weitere Datei Products, Sidebar Dot weitere Datei Products, Sidebar Hier fügen wir Boilerplate hinzu und lassen uns die CSS-Datei mit Seitenleistenpunkten für Perioden-Slash-Produkte importieren Perioden-Slash-Produkte Gut. Jetzt fügen wir an der Stelle dieser DU unser KI-Tag ein. Lassen Sie uns nun diesen Text in der Seitenleiste entfernen, und darin fügen wir zuerst das Astro-Tag hinzu und übergeben die Kategorie hier. Danach erstellen wir für die Anzeige der Links eine DU mit Unterstrich-Links für Klassennamen und Kategorien Und innerhalb dieser werden wir unsere Links pro Kategorie hinzufügen. Lassen Sie uns also Stile für diesen Teil hinzufügen. In unserer CSS-Datei fügen wir also Punktprodukte, fügen wir also Punktprodukte, Unterstriche in der Seitenleiste und hohe Klammern hinzu. Und in diesen fügen wir eine Polsterung von zehn Pixeln für oben und unten und 20 Pixel für links und rechts, Randradius fünf Pixeln und eine Hintergrundfarbe Danach fügen wir einen Stil für die Kategorieüberschrift hinzu. Punktprodukte unterstreichen also die Seitenleiste und wir zielen auf zwei Cali-Klammern ab, Schriftgröße auf 26 Pixel und den unteren Rand auf Speichern Sie das. Und in der Komponente Produktseite fügen wir unsere Seitenleistenkomponente für Produkte hinzu. Speichern Sie diese Datei und sehen Sie, hier bekommen wir eine schöne Seitenleiste. Lassen Sie uns nun die Links zu den Kategorien setzen. Die Links zu den Kategorien sehen also so aus. Auf der linken Seite haben wir Imog oder das Symbol, und dann auf der rechten Seite haben wir den Linktitel, wo wir diese Art von Struktur sehen, rechts, sie ist mit der Symbolkomponente verknüpft Der Unterschied ist genau das. Wir müssen ihre Positionen ändern, was wir mit CSS leicht tun können. Lass es mich dir zeigen. Hier fügen wir also einen Link mit der Symbolkomponente C hinzu, automatische Eingabe funktioniert, und bei Requisiten übergeben wir den Titel, sagen wir Elektronik nach dem Link zu Produkten, die Fragezeichen-Kategorie entspricht Hier übergeben wir also unsere Abfragezeichenfolge für die Kategorie, und damit können wir Daten aus dieser Kategorie abrufen Nach diesem Bild sagen wir Rakete. Jetzt importieren wir dieses Bild. Importiere Rocket von hier aus gehen wir zwei Ordner nach oben, Assets, Rocket Dot, PNG. Speichern Sie die Änderungen und schauen Sie sich das an. Wir erhalten den gleichen Link wie in unserer Navigationsleiste. Nun, wie dieser Link mit der Symbolkomponente weiß, wollen wir diesen Link zur Seitenleiste oder Na-Leiste hinzufügen. Dazu werden wir diesem Link mit der Symbolkomponente noch eine weitere Requisite übergeben diesem Link mit der Symbolkomponente noch eine weitere Requisite Die Seitenleiste entspricht true. Oder wir können das auch entfernen. Beides funktioniert gleich. Zum besseren Verständnis entfernen wir dies jedoch nicht. Speichern Sie dies und gehen Sie zum Link mit der Symbolkomponente. Hier, nach diesem Bild, destrukturieren wir eine weitere Requisite, nämlich die Seitenleiste Jetzt können wir hier eine Bedingung hinzufügen, und basierend auf dieser Bedingung werden wir Stile hinzufügen An der Stelle dieser Align-Center-Klasse fügen wir CLI-Klammern hinzu, fügen wir CLI-Klammern weil wir einen JavaScript-Ausdruck hinzufügen und hier die Bedingung I hinzufügen, dass die Seitenleiste wahr ist Dann geben wir Align center zurück und die Seitenleiste unterstreichen den Link, und die Seitenleiste unterstreichen den Link da wir nur Align Center zurückgeben Lassen Sie uns nun den Stil für diesen Unterstrich-Link in der Seitenleiste festlegen. Also beim Link mit der CSS-Datei mit dem Symbolpunkt und am unteren Rand fügen wir Unterstriche in der Seitenleiste, Calibraket, hinzu und darin müssen wir zuerst die Position unseres Bildes und Textes ändern die Position Biegen Sie also die Richtung um, um den Inhalt umzukehren , und mithilfe dieser beiden Eigenschaften können wir die Position unserer Elemente umkehren Danach ist eine Größe auf 21 Pixel, Polsterung auf zehn Pixel und 15 Pixel, Randradius auf fünf Pixel und Übergang auf alle 0,15 Sekunden rein und raus Sie wissen bereits, warum wir diesen Übergang, den pH-Effekt, hinzufügen. Sie den Mauszeiger über den Sidebar Link und darin ändern wir einfach die Hintergrundfarbe auf F sechs, F sechs, F sechs Speichern Sie das und schauen Sie sich das an. Siehst du, wir verstehen unseren Link-Stil. Lassen Sie uns nun unser Symbol etwas größer machen und den rechten Rand hinzufügen. Hier fügen wir also einen Punkt in der Seitenleiste und den Link hinzu, und wir zielen auf das Bildelement Darin ändern wir die Breite auf 30 Pixel, linken Rand auf Null und den rechten Rand auf acht Der Grund, warum wir den linken Rand auf Null setzen, liegt darin, dass wir in diesem Link, der Imoge unterstreicht diesem Link, der Imoge unterstreicht, einen linken Rand von fünf Pixeln haben Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unseren Link-Stil. So können wir also dieselbe Komponente verwenden und sie für einen anderen Stil verwenden. 109. Produktlistenabschnitt erstellen: Lassen Sie uns nun einen Abschnitt mit der Produktliste für unsere Produktseite erstellen . Also A für diesen Abschnitt, wir erstellen eine separate Komponente. Also erstellen wir in diesem Abschnitt von hier aus und in unserem Produktordner und in unserem Produktordner eine neue Datei, Produktliste Punkt CSS, und wir erstellen auch eine neue Komponentenproduktliste Punkt JSX, fügen Boilerplate hinzu und importieren oben eine Produktlistenpunkt-CSS-Datei Nun fügen wir an der Stelle, an der wir das tun werden, unseren Abschnitt Dieser Abschnitt mit der Produktliste besteht nun aus zwei Abschnitten. Der erste ist die Kopfzeile, und darin fügen wir den Titel des Produkts hinzu, und auf der rechten Seite fügen wir ein Drop-down-Menü hinzu, um unsere Produkte zu kürzen Im zweiten Abschnitt haben wir eine Produktliste. Fügen wir hier eine Kopfzeile mit dem Klassennamen, Align Center und Produkten, Unterstrichliste und eine Unterstrich-Überschrift hinzu. In dieser Kopfzeile fügen wir zuerst das Schlagwort hinzu und in diese Produkte Danach fügen wir den Select Tag Name zu Short hinzu und geben ihm eine Sortierung nach Klassenname, Produkt und Unterstrich Darin fügen wir nun unsere Optionen hinzu. Also Option, Wert auf Null und hier Relevanz übergeben. Dies ist der Standardwert, und deshalb übergeben wir keinen Wert. Lassen Sie uns den zweiten Optionswert zum Preis hinzufügen, DSE für was, richtig, für absteigend, und hier den Preis von hoch nach niedrig übergeben Preis von hoch nach niedrig diese Zeile duplizieren, ändern wir unseren Wert in Preis, ASC und ändern hier Preis, niedrig nach hoch Lassen Sie uns nun diese beiden Optionen duplizieren und an der Stelle des Preises wechseln wir zu Rate und hier auch zu Rate Nach diesem Header fügen wir nun einen Tag hinzu, in dem die Klassennamen die Produkte unterstreichen Und darin haben wir eine Liste von Produkten, die wir auf der Produktkarte anzeigen werden Anstatt also die Produktkartenkomponente im Home-Ordner zu definieren , können wir sie hierher im Produktordner verschieben. Sehen Sie es sich also so an, legen Sie es sowohl ab als auch in den Produktordner. Sie können sehen, wie einfach es ist, Komponenten in unserem Projekt zu verschieben, oder wir können es mit seiner CSS-Datei sogar in verschiedenen Projekten verwenden . Aber hier ist eine Sache. Wir müssen die Eingabeanweisung in der Komponente Feature-Produkte ändern. Also los, ein Ordner nach oben, Produkte, Schrägstrich der Produktkarte. Speichern Sie das Und in der Produktlistenkomponente fügen wir hier eine Produktkarte hinzu. Und duplizieren Sie es ein paar Mal. Speichern Sie diese Datei. Und auf unserer Produktseite fügen wir diese Produktlistenkomponente hinzu. Vergiss nicht, das zu tun. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir verstehen diese Elemente. Lassen Sie uns nun Stil für diesen Abschnitt hinzufügen. Also, ich füge eine Punkt-CSS-Datei zur Produktliste hinzu, wir fügen Punktprodukte, Unterstrichliste, Unterstrich-Abschnitt, Cali-Klammern, Polsterung bis zehn Pixel und Polsterung links bis 30 Pixel hinzu Danach fügen wir Punktprodukte hinzu, den Unterstrich zuletzt und Unterstrich Und innerhalb dieser Felder fügen wir dem Leerzeichen dazwischen den Rechtfertigungs-Inhalt hinzu , weil wir für diesen Header bereits die Mittelklasse ausgerichtet hatten Danach nehmen wir unsere beiden Sudar-Produkte ins Visier listen in der Kopfzeile zwei Cali-Klammern Und hier schreiben wir die Schriftgröße auf 26 Pixel. Danach zielen wir bei unseren Produkten auf die Kurzbezeichnung „Calibackets“ und innerhalb dieser Schriftgröße auf 18 Pixel, Schriftstärke auf 500, die Höhe der Schriftfamilie auf 35 Pixel, die Polsterung auf Null und fünf Pixel für links und rechts ab Grenze zu Nonne, Umriss zu Nonne und Randradius zu fünf Pixeln und Speichern Sie die Änderungen und sehen Sie, dass unser Header-Bereich fertig ist. Jetzt müssen wir nur noch Stil für diese Produktliste hinzufügen. Also unten fügen wir der Liste der Produkte Unterstriche hinzu Und innerhalb der Scully-Klammern fügen wir die Display-Flaggen flach ein, um den Inhalt gleichmäßig einzuwickeln und den Inhalt gleichmäßig im Leerraum auszurichten Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, unsere Produktliste ist fertig. Also herzlichen Glückwunsch. Wir haben unsere beiden wichtigen Seiten fertiggestellt. Das sieht wirklich gut aus. Was denkst du? Lass es mich im Bereich Fragen und Antworten wissen. 110. Einzelproduktkomponenten erstellen: Ich lasse uns jetzt eine einzelne Produktseite für unser Projekt erstellen. In dieser Lektion erstellen wir nur den Teil zur Bildauswahl. Hier haben wir also eine Reihe von Bildern, und wenn wir ein Bild auswählen , wird dieses Bild hier angezeigt. Es ist wirklich einfach. Lass es mich dir zeigen. also zunächst im nächsten Artikel 0R im Öffnen Sie also zunächst im nächsten Artikel 0R im Ressourcenordner den Projektory-Ordner Und darin haben wir eine JS-Datei mit Produktpunkten. Und darin erhalten Sie dieses Produktobjekt. Dieses Objekt enthält alle Details , die wir vom Backend erhalten werden. Im Moment brauchen wir nur diese Dummi-Daten. Für den Abschnitt mit einem einzelnen Produkt erstellen wir also einen neuen Ordner im Komponentenordner mit dem Namen Einzelprodukt Darin erstellen wir eine neue Datei namens Single Product Page Dot CSS. Außerdem erstellen wir eine neue Komponente namens Single Product Page Dot Jx Hier fügen wir Boilerplate-Code und oben importieren wir eine CSS-Datei mit einem Punkt für eine einzelne Produktseite Gut. Fügen wir hier unser Produktobjekt hinzu, weil wir es brauchen. Jetzt fügen wir an der Stelle dieser DU einen Abschnitt hinzu und geben ihm einen Klassennamen, eine Linie, einen Mittelpunkt und ein einzelnes Produkt. Darin befinden sich zwei Bereiche, einer für die Bildauswahl und der zweite für die Anzeige der Produktdetails. Wir fügen hier Du mit dem Klassennamen, align, center und zweitens Du mit dem Klassennamen, align, center und einzelnen Produktdetails hinzu. In diesem Bild fügen wir nun noch ein Du mit Klassennamen und Miniaturansichten mit einem einzelnen Unterstrich Und darin werden wir alle Bilder als Vorschaubilder anzeigen, was kleine Bilder bedeutet Welche Bilder wir anzeigen möchten. Richtig, wir wollen diese Bilder als Array anzeigen. Fügen Sie also Coli-Klammern und Produktpunktbilder und Map Darin finden wir jedes Bild und auch den Index hier. Das ist sehr einfach, oder? Wir haben das so oft gemacht, und hier geben wir das Image-Tag zurück. Und in der Quelle geben wir unser Bild Alt an den Produkttitel weiter. Jetzt, nach Ablauf dieser Frist, fügen wir dem Produktpunktbild eine Bildquelle hinzu. Und darin müssen wir vorerst Null überschreiten. Alt für Produkt, Punkttitel und Klassenname für Produkt mit einfachem Unterstrich, Anzeige mit Unterstrich Speichern Sie die Änderungen und wir müssen diese Seite zu unserer App-Komponente hinzufügen Umgehen Sie unsere Produktseite und fügen Sie hier einfach eine einzelne Produktseite Speichern Sie die Gene und schauen Sie sich das an. Wir bekommen unsere Elemente. Lassen Sie uns nun den Stil für diesen Abschnitt festlegen. In der CSS-Datei mit einem Punkt auf einer Produktseite fügen wir zunächst einen einzelnen Unterstrich (Produkt, Calibraket) hinzu. Hier fügen wir den Rechtfertigungsinhalt zur Mitte und 32 Pixeln für oben und unten und 48 Pixel für links und rechts hinzu oben und unten und 48 Pixel für links und Als Nächstes zielen wir darauf ab, das Produkt mit einem einzelnen Unterstrich, unterstrichene Miniaturansichten und coli-Klammern zu markieren und innerhalb dieser Anzeige die Flachsrichtung zur Spalte, den Flachswein zum Umbruch, Abstand auf 14 Pixel, den Abstand auf 14 Pixel, den Abstand auf acht Pixel und den Rand auf 16 Pixel zu kennzeichnen. Danach konzentrieren wir uns auf die kleinen Bilder, die kleinen Bilder, die Also dieser einzelne Unterstrich das Produkt, der Unterstrich der Miniaturansichten, Breite des Bilds auf 80 Pillen, die Höhe auf 80 Pillen, das Objekt passt auf einen Wasserradius von fünf Pixeln und den Cursor auf den Zeiger Danach fügen wir Punkt, einzelner Unterstrich, Produkt, Unterstrich, Kalibrackets und innerhalb der Breite auf 600 Pixel, Höhe auf ebenfalls 600 Pixel, Objekt Kampf um Deckung und Wasserradius auf zehn Pixel Objekt Kampf Das sind alles grundlegende CSS. Deshalb erkläre ich seinen Stil nicht. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir kriegen, was wir wollen. Wenn wir auf diese Bilder klicken, passiert nichts. Lassen Sie uns diese Funktionalität einstellen. Dazu müssen wir also eine Zustandsvariable namens „ Ausgewähltes Bild auswählen“ erstellen eine Zustandsvariable namens „ , und diese Zustandsvariable speichert den ausgewählten Bildindexwert. Standardmäßig wählen wir das erste Bild aus. Lassen Sie uns auch den Status aus React importieren. Gut. Jetzt fügen wir unten an der Stelle der Null das ausgewählte Bild hinzu. Wenn wir jetzt auf eines dieser Bilder klicken, müssen wir nur unseren ausgewählten Bildwert auf diesen Indexwert setzen . Lass es mich dir zeigen. Hier fügen wir in dieser Thmalimage-Pfeilfunktion ein On-Click-Ereignis hinzu und legen fest, dass das ausgewählte Bild indexiert Speichern Sie die Änderungen und schauen Sie sich das an. Ändere das Bild und sieh, wir bekommen das Bild hier. Jetzt müssen wir nur noch anzeigen , welches Bild gerade ausgewählt ist. In unserem Image-Tag fügen wir hier hinzu, dass der Klassenname der Bedingung entspricht, an der wir die Bedingung übergeben Wenn das ausgewählte Bild dem Index entspricht, fügen wir die ausgewählte Unterstrich-Bildklasse hinzu, andernfalls fügen wir nichts Dies und lassen Sie uns Stil für diese Klasse hinzufügen. In der CSS-Datei fügen wir also nach unserem Bildstil die Coli-Klammern nach unserem Bildstil die Coli-Klammern des ausgewählten Punkts hinzu transformieren sie auf den Maßstab 1,12 Speichern Sie die Änderungen und sehen Sie, hier erhalten wir dieses ausgewählte Bild Nun, dieser Effekt ist sehr plötzlich. Also lass uns das glatt machen. In diesem Bildstil hatten wir den Übergang zu allen 0,2 Sekunden, es rein, raus, die Änderungen speichern und einen Blick darauf werfen. Siehst du, wir bekommen diesen sanften Übergangseffekt. Sie können sehen, wie einfach die Bildauswahlfunktion ist. Wir müssen nur auf einfache Weise denken. In der nächsten Lektion werden wir nun Abschnitt mit Produktdetails für diese Seite hinzufügen. 111. Detailabschnitt für die Produktseite hinzufügen: Lassen Sie uns nun einen Detailbereich für eine einzelne Produktseite hinzufügen. In diesen Details fügen wir H ein Tag mit dem Klassennamen, einzelnen Produkt und dem Titel hinzu. Darin zeigen wir den Produkttitel mit Punkt an. Danach fügen wir einen Absatz mit dem Klassennamen und einer einzelnen Produktbeschreibung hinzu. Und darin fügen wir eine Produktpunktbeschreibung hinzu. Dies ist der Vorteil des Produktobjekts. Danach fügen wir ein weiteres Absatz-Tag hinzu und geben ihm einen Klassennamen, Einzelproduktpreis, und fügen hier geschweifte Dollarklammern, Produktpunktpreis, Punkt zwei fest hinzu, und darin übergeben wir zwei Dadurch wird unser Preis auf zwei Ziffern abgerundet. Danach fügen wir zwei Tags mit dem Klassennamen, der Menge und dem Titel hinzu und übergeben hier die Menge. Danach fügen wir einen Würfel mit Klassenname, Ausrichtung, Mittelpunkt und Mengeneingabe hinzu. Und innerhalb dieses Duos fügen wir eine Schaltfläche hinzu, deren Klassenname der Mengeneingabe entspricht, Schaltfläche und übergeben hier das Minuszeichen, und standardmäßig fügen wir disable zu true für die Minus-Taste Duplizieren Sie diese Schaltfläche, entfernen Sie diese Deaktivierung. Und geh einfach hier vorbei plus. Und zwischen diesen beiden Schaltflächen fügen wir einen Absatz mit Klassenname, Mengeneingabe und Anzahl hinzu. Gut. Jetzt haben wir endlich die Schaltfläche „Kopf in den Einkaufswagen“. Also fügen wir eine Schaltfläche mit dem Klassennamen Serge, eine Schaltfläche hinzu und fügen den Warenkorb hinzu Und hier gehen wir von Kopf zu Warenkorb weiter. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir all unsere Elemente. Lassen Sie uns nun Stile für sie festlegen. In unserer CSS-Datei unten fügen wir also einzelne Produktdetails, fügen wir also einzelne Produktdetails, Cali-Klammern mit 35% und eine Polsterung von 16 Pixeln und 24 Pixeln hinzu Danach haben wir einen einzigen Produkttitel. Und hier schreiben wir den unteren Rand auf 16 Pixel und die Schriftgröße auf 32 Pixel. Nach unserem Titel haben wir eine Beschreibung. Also diese einzelne Produktbeschreibung, c-Klammern, und hier fügen wir den unteren Rand, 16 Pixel und die Zeilenhöhe zu 1,4 hinzu. Danach haben wir den Preis, also Punkt Einzelpreis. Und innerhalb dieser schuppigen Klammern fügen wir den unteren Rand auf 16 Pixel, Schriftgröße auf 24 Pixel und die Schriftstärke auf 600 hinzu Danach haben wir den Mengentitel. Also der Titel der Menge. Schriftgröße auf 20 Pixel und Schriftstärke auf 700. Speichern Sie die Änderungen und schauen Sie sich das an. Zuerst müssen wir unsere Daten in der Spalte angeben. Also unsere einzelne Produktkomponente hier in unseren Details, wir fügen bimestal eine Linienmitte hinzu. Das wollen wir nicht Speichern Sie die Änderungen und sehen Sie, jetzt haben wir wenig gute Struktur. Lassen Sie uns den Rest der Stile hinzufügen. Zurück zu unserer CSS-Datei. Danach haben wir die Punktmengeneingabe, du, und darin setzen wir die Schriftgröße auf 20 Pixel, Schriftstärke auf 700 und den Rand auf fünf Pixel für oben, Null für links und rechts und 16 Pixel für unten. Danach zielen wir auf die Schaltfläche für die Punktmengeneingabe, Calibrackets, und darin fügen wir Breite auf 35 Pixel, Höhe auf 35 Pixel, für Größe auf 25 Pixel, Hintergrundfarbe hat FF 8848, Farbe auf Weiß, Rand, Substantiv, Werradius auf 100%, für Kreis und Cursor auf Zeiger. Lassen Sie uns nun den Stil für die deaktivierte Schaltfläche festlegen. Schaltfläche zur Mengeneingabe, Callan deaktiviert, und darin fügen wir die Deckkraft auf 0,3 und den Cursor auf die Standardeinstellung hinzu Speichern Sie das und sehen Sie, wie wir unsere Button-Styles bekommen. Jetzt müssen wir nur noch den Stil für diese Anzahl und die Schaltfläche „Zur Karte hinzufügen“ hinzufügen. Also fügen wir hier Mengeneingabe, Anzahl, Cali-Klammern, Rand bis Null und 40 Pixel für links und rechts sowie Textzeile zur Mitte Und schließlich zielen wir auf Punkt acht Kartenschaltfläche, Cali-Klammern und darauf, dass Inhalt und Abstand auf acht Pixel für oben und unten und 18 Pixel für links und rechts passen acht Pixel für oben und unten und 18 Pixel für links und Sag die Änderungen und sieh sie dir an. Rest der Stile ist okay, aber hier müssen wir eine kleine Änderung vornehmen. Wir fügen hier den unteren Rand hinzu, und lassen Sie uns auch sehen, warum wir für diese eingegebene Menge keine Marge erhalten. In unserem Mengen-Titel-Stil fügen wir also den unteren Rand auf drei Pixel hinzu, und hier entfernen wir diesen Würfel. Wir möchten diesen Stil für die Mengeneingabe anwenden. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, wie schön unsere einzelne Produktseite aussieht. Der Grund, warum ich empfehle , Ihren eigenen Stil zu schreiben , ist, dass Sie nach Abschluss dieses Projekts mit Stolz sagen werden, dass ich dieses Projekt von Grund auf neu erstelle Eine weitere Sache: Wenn wir den CSS-Teil aus der Frontend-Entwicklung entfernen , wird React seinen Wert enorm verlieren Ohne das richtige CSS sieht unsere Website sehr hässlich aus. Machen Sie sich selbst Anerkennung dafür dieses Projekt von Grund auf neu erstellt haben. 112. Warenkorbseitenkomponente erstellen: Lassen Sie uns nun eine Warenkorbseite für dieses Projekt erstellen. In dieser Lektion werden wir also alles ohne diese Tabelle erstellen. In der nächsten Lektion werden wir eine Tabelle erstellen. Also erstellen wir im Komponentenordner einen neuen Ordner namens CAT und darin eine neue Datei namens Cardpage dot CSS Danach werden wir eine weitere Komponente namens Cardpaget JSX erstellen eine weitere Komponente namens Cardpaget Hier Boilerplate und oben importieren wir die CSS-Datei mit Kartenseitenpunkten Jetzt fügen wir an der Stelle dieser DU einen Abschnitt hinzu und geben ihm einen Klassennamen, eine Zeile, einen Mittelpunkt und eine Warenkorbseite In diesem Abschnitt möchten wir zunächst Benutzerinformationen erstellen. Also können wir dieses Element hier erstellen oder wir können diese Komponente trennen. Wir können tun, was wir wollen. Es hängt völlig von uns ab. Hier werden wir diese Benutzerinformationen nicht wiederverwenden, also erstelle ich keine Komponente dafür. Dot Align Center zum Hinzufügen einer weiteren Klasse in T, wir können eine weitere Punkt-Benutzerinformation hinzufügen. Siehst du, wir kriegen beides hin. Jetzt wollen wir zuerst ein Benutzerprofilbild hinzufügen. Bild-Tag und Quelle zum Benutzer Alt zum Benutzerprofil. Nach diesem Bild wollen wir nun ein Du und innerhalb dieses Du fügen wir einen Absatz mit Klassenname und Benutzername hinzu. Und wir können deinen Namen an Halley weitergeben. Und danach erstellen wir einen weiteren Absatz mit Klassenname Benutzer-E-Mail und leiten Ihre E-Mail an Halley at dire Speichern Sie das und in der App-Komponente müssen wir diese Kartenseite hinzufügen Kommentieren Sie die einzelne Produktseite aus und danach fügen wir die Komponente Kartenseite hinzu. Speichern Sie die Änderungen und wir erhalten nichts. Öffnen Sie also die Konsole und endlich können wir sehen, dass der Referenzfehler erkannt wurde, Benutzer nicht definiert ist, und wir erhalten auch einen Dateinamen, Kartenseite und auch die Zeilennummer. Also zurück zum VS-Code und lassen Sie uns diesen Benutzer importieren. Also Benutzer importieren von wir gehen zu Ordnern nach oben Assets, Benutzer Punkt Web P. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir bekommen Benutzerinformationen. Lassen Sie uns nun weitere Elemente hinzufügen. Also hier geben wir Platz für den Kartentisch. Danach fügen wir eine Tabelle für die Warenkorbrechnung hinzu. Tabelle und geben ihr einen Klassennamen, Warenkorb unterstreicht Rechnung. Hier fügen wir Tbody hinzu und fügen darin Tabellenzeilen und Tabellendaten Hier übergeben wir die Zwischensumme und einen weiteren Datendollar an neun. Lassen Sie uns diese Tabellenzeile noch zweimal duplizieren, und anstelle dieser Zwischensumme fügen wir die Versandkosten hinzu, und hier fünf Dollar. Danach fügen wir für die letzte Zeile die Endsumme und zuletzt 1004 Dollar Nach dieser Tabelle fügen wir nun eine Schaltfläche mit dem Klassennamen Suchschaltfläche hinzu, die wir in der Navbar definieren, und fügen eine weitere Klasse hinzu, die Checkout-Schaltfläche Und hier bestehen wir den Checkout. Speichern Sie die Änderungen und schauen Sie sich das an. Hier bekommen wir unsere Elemente. Lassen Sie uns nun Stile für sie festlegen. In der CSS-Datei mit Punkt für die Warenkorbseite fügen wir also zuerst die Cali Brackets der Punktseite hinzu und fügen darin die Flexrichtung zur Spalte hinzu, richten den Inhalt so aus, Inhalt auf die Breite in der Mitte auf 60%, der Rand auf Null und Auto und Badding auf 32 Pixel und 48 Pixel ausgerichtet Danach fügen wir Benutzerinformationen hinzu und in Gali-Klammern Abstand auf 16 Pixel und den unteren Rand auf Danach geben wir die Informationen und das Bild mit dem Unterstrich des Datennutzers an und fügen innerhalb dieses Bereichs die Breite zu 80 Pill Höhe zu 80 Pic L hinzu, das Objekt mit den Füßen zu decken und Randradius auf 100% für einen Kreis Danach zielen wir auf den Namen des Punktbenutzers als Ziel ab. Und in Cully-Paketen fügen wir die Schriftgröße zu 21 Pixeln hinzu, die Schriftstärke auf 600 Speichern Sie die Änderungen und schauen Sie sich das an Siehst du, wir haben nette Benutzerinformationen. Lassen Sie uns nun Stile für diese Tabelle und diese Schaltfläche festlegen. Am unteren Rand fügen wir die frühen Klammern des Punktwagens und innerhalb des Felds „Self“ auf „ Flex“ und „mit“ auf 400 Pixel, Water Collaps“ bis , „ One Size“ auf 16 Pixel, Rand oben auf 16 Pixel und Hintergrundfarbe auf Weiß. Als Nächstes fügen wir die Klammern Dot Cart, Bill, TD und Ci hinzu. Und darin übergeben wir das Padding auf 12 Pixel und 20 Pixel und den Rand auf drei Pixel, Solid hat EI EI, ei Danach fügen wir Dot Cart, Bill, TD, Call on Last Child, Cali-Klammern und darin eine Textzeile mit einer Breite von 120 Pixeln hinzu Danach geben wir Punkt Cart, Bill, final und innerhalb dieser Schriftgröße auf 20 Pixel und die Schriftstärke auf 700 an Und schließlich zielen wir auf die Checkout-Schaltfläche und die Ci-Klammern ab. Zuerst fügen wir Align Self zu Flex hinzu, weil wir diese Schaltfläche auf der rechten Seite anzeigen möchten . Und das fügen wir auch für den Einkaufswagen hinzu. S? Danach Höhe auf 38 Pixel, wichtiger Rand auf 16 Pixel für oben, unten und Null für links und rechts, und Polsterung auf Null und 16 Pixel für links und rechts Fügen Sie hier auch wichtig hinzu. Speichert und schaut mal rein. Das sieht gut aus, aber unsere endgültigen Stile werden nicht angewendet. Also zurück zur Komponente der Warenkorbseite. Hier fügen wir der Karte Bill Final den Klassennamen hinzu. Speichert und schaut mal rein. Siehst du, diese Stile sehen wirklich gut aus. In der nächsten Lektion werden wir nun eine Kartentabelle erstellen. 113. Gemeinsame Tabellenkomponenten erstellen: Lassen Sie uns eine gemeinsame Tabellenkomponente erstellen. Sie denken vielleicht, warum wir das brauchen. Lass es mich dir zeigen. Hier in der Kartentabelle haben wir einen bestimmten Tabellenstil und den gleichen Stil wie auf der Seite Meine Bestellung. Der Unterschied besteht nur in Daten. Hier haben wir verschiedene Daten mit unterschiedlichen Überschriften. Sie können eine gemeinsame Tabellenkomponente erstellen und sie auf beiden Seiten verwenden. An der Stelle dieser Kartentabelle nennen wir die Tabellenkomponente wie folgt. Und für Überschrift übergeben wir hier Requisiten, Überschriften entsprechen in geschweiften Klammern, Array, und innerhalb dieser Zeile übergeben wir alle Überschriften, die wir Also geben wir zuerst den Artikelpreis, die Menge und die Summe weiter und entfernen den Artikel. Definieren wir nun diese Tabellenkomponente. Ich weiß, das ist vorerst etwas verwirrend, aber sieh dir das an und du wirst es verstehen. Also erstellen wir im Komponentenordner einen neuen Ordner namens common und in diesem Ordner fügen wir alle unsere gemeinsamen Komponenten hinzu. Lassen Sie uns nun eine neue Datei namens table dot css erstellen. Danach erstellen wir eine neue Komponente namens Tablet JSX Lassen Sie uns Boilerplate-Code hinzufügen und oben importieren wir die CSS-Datei mit Tabellenpunkten Jetzt fügen wir an der Stelle dieses de ein Tabellen-Tag hinzu und geben ihm den Klassennamen common Darin fügen wir nun THAD hinzu und darin fügen wir Tabellen Wie wir wissen, werden wir nun Requisiten für Überschriften verwenden, was Also destrukturieren wir Requisiten und bekommen Überschriften und in diesem TAD können wir unsere Überschriften rendern wir unsere Also die Überschriften sind mit MAP versehen, wir erhalten jedes Element und auch die Indexpfeilfunktion, und hier geben wir das Ts-Tag zurück, den Schlüssel zum Index, Schlüssel zum Index, Lassen Sie uns zunächst sehen, was wir bekommen. Speichern Sie das. Auf der Warenkorbseite müssen wir diese Tabellenkomponente aus dem gemeinsamen Komponentenordner importieren . Speichern Sie das und sehen Sie, wir erhalten diese Tabelle mit Überschriften. Für die Anzeige von Daten können wir hier weitere Requisiten übergeben, aber wir werden eine andere Methode verwenden Manchmal müssen wir JSX als Requisiten übergeben. Zum Beispiel wollen wir hier das T-Body-Tag mit der Liste der Elemente übergeben , was unser JSX ist Also wollen wir dieses JSX in dieser stabilen Komponente übergeben . Wie können wir das machen? Es ist wirklich einfach. Anstatt JSX in Requisiten zu übergeben, können wir das in Kindern hinzufügen Lass mich dir zeigen, was ich meine. Anstatt diese stabile Komponente selbst zu schließen, können wir diese Komponente hier als unser STML-Tag verwenden Und zwischen der öffnenden und schließenden Komponente fügen wir unser JS hinzu, also haben wir hier den T-Body und darin, wir sind in der Tabellenzeile und darin haben wir Tabellendaten iPhone 6, duplizieren Sie das noch viermal, weil wir fünf Überschriften haben Hier geben wir den Preis 999 Dollar, Menge auf eins, die Summe auf 999 Dollar, und am Ende fügen wir hinzu und entfernen Speichern Sie das und schauen Sie sich das an. Wir bekommen unsere Daten nicht , weil wir nicht definieren, wo wir diesen Kindern JSX zeigen wollen Also eine Tabellenkomponente, und in den Requisiten haben wir eine Eigenschaft namens children Diese untergeordneten Elemente enthalten ausschließlich JSX, die wir zwischen unserer öffnenden und schließenden Komponente übergeben Jetzt fügen wir diese Komponente einfach hier hinzu. Speichern Sie die Ringe und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Daten. Unsere Komponente funktioniert also. Lassen Sie uns Stile für diese gemeinsame Tabelle festlegen. In der Punkt-CSS-Datei fügen wir also zunächst die Tabelle Common Underscore und geschweifte Klammern hinzu. Darin fügen wir Breite zu 100% Rand unten zu 16 Pixeln hinzu, Rand zusammenklappen, zusammenklappen, Hintergrundfarbe zu Weiß Und Boxschatten auf Null Pixel, drei Pixel, acht Pixel, RGBA, Null, Null, Null und Opazität Danach fügen wir gemeinsame Punkttabelle, T-Kopf und TR C-Klammern hinzu, und innerhalb dieser übergeben wir die Höhe an 50 Pixel, Hintergrundfarbe, zwei hat 36, 34 A, Farbe in Weiß und Text wird in das obere C umgewandelt. Danach zielen wir auf .com table, T-Körper, TR, Cali-Klammern, Höhe auf 50 xl und Textaine auf Mitte ab. Und sogar für Tabellenzeilen möchten wir die Hintergrundfarbe ändern, sodass unsere Tabelle so aussieht. Also Punkt gemeinsame Tabelle, T-Hauptteil, TR, Spalte, N-tes Kind. Und hier kommen wir an Evan vorbei. C-Klammern, Hintergrundfarbe, zwei als FI, FI FI. Sag die Änderungen und sieh sie dir an. Warum finden wir keinen Stil für diesen T-Head? Schauen wir uns das an und wir können sehen , wir keinen Stil für diesen T-Kopf bekommen. Zurück zum VS-Code. Und in der gemeinsamen Tabelle Thad. Lassen Sie mich die Schreibweise überprüfen. Ja, es ist wahr. Oh, hier müssen wir TH ins Visier nehmen, die Scharniere speichern und einen Blick darauf werfen Siehst du, unser Tisch sieht sehr gut aus. 114. Warenkorbseitenkomponente ändern: Bevor wir mit der Erstellung unserer letzten Seite beginnen, nehmen wir nun einige Änderungen an unserer Warenkorbseite vor. Hier an der Stelle dieser Menge möchten wir die Menge mit der Plus- und Minus-Schaltfläche anzeigen. Das haben wir bereits auf unserer einzigen Produktseite erstellt. Das können wir hier einfach verwenden. In der einzelnen Produktkomponente brauchen wir das. Anstatt diese Elemente zu kopieren und einzufügen, erstellen wir dafür eine verwendbare Komponente Schneiden Sie das aus und im einzelnen Produktordner erstellen wir eine neue Datei namens Quantity Input Dot CSS Außerdem erstellen wir eine neue Komponente, Mengeneingabepunkt JSX Fügen wir Boilerplate-Code hinzu, und oben importieren wir die CSS-Datei mit Punkt für die Mengeneingabe An der Stelle, an der diese Zahlung erfolgt ist, wir einfach unsere Elemente zurück Sie können sehen, dass es uns einen Kompilierungsfehler gibt. Also wickeln wir diese Elemente mit den Reaktionsfragmenten ein. Gut. Speichern Sie das, und lassen Sie uns auch CSS für diese Elemente trennen. Vorher fügen wir in der Einzelproduktkomponente unsere Mengeneingabekomponente hinzu, speichern diese, und in der Einzelprodukt-CSS-Datei unten schneiden wir diese drei Stile aus, speichern sie und fügen sie in die CSS-Datei für die Mengeneingabe ein. Jetzt fügen wir auf der Kartenseite an der Stelle dieser Komponente die Mengeneingabe hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir bekommen unsere Mengenkontrolle ohne CSS- oder STML-Code zu schreiben Das ist das Schöne an der Erstellung von Komponenten. Lassen Sie uns nun dieses Stilproblem beheben. Hier fügen wir den Klassennamen, Ausrichtung der Mitte und die Mengeneingabe hinzu. Speichern Sie die Änderungen, und in der CSS-Datei mit Punkt am unteren Rand fügen wir die Tabellenmengeneingabe, CL-Klammern und innerhalb dieser Höhe 50 Pixel hinzu und richten den Inhalt zentriert aus. Wir nehmen die Änderungen vor und schauen uns das an. Siehst du, wir verstehen unsere Styles. Nun, noch eine Änderung an der Stelle dieses Entfernungstextes, wir wollen das Symbol „Entfernen“ anzeigen. Gehen wir also zur CAT-Seitenkomponente, und an der Stelle, an der der Text entfernt wurde, fügen wir Bild und Quelle zum Entfernen und Grafik zum Entfernen und an der Stelle, an der der Text entfernt wurde, fügen wir Bild und Quelle zum Entfernen und Grafik zum Entfernen des Symbols hinzu und fügen den Klassennamen an das CAT-Entfernungssymbol an. Lassen Sie uns das Symbol zum Entfernen oben importieren. Also importieren, entfernen, von hier aus gehen wir zu den Ordnern nach oben und entfernen das Punkt-PNG. Speichern Sie das und lassen Sie uns Stil für dieses Symbol hinzufügen. In der CSS-Datei mit Punkt auf der Warenkorbseite fügen wir das Punktsymbol zum Entfernen des Einkaufswagens hinzu, das die Breite auf 35 Pixel, die Höhe auf 35 Pixel und den Cursor auf den Zeiger kalibriert Höhe auf 35 Pixel und den Cursor auf den Zeiger Speichern Sie das Ja und schauen Sie sich das an. Siehst du? Unsere Paste sieht richtig gut aus. 115. Abschnitt 11 Vorabformular: Willkommen im 11. Abschnitt des ultimativen React-Kurses. In diesem Abschnitt werden wir alles über Formulare lernen, wie das Erstellen des Formulars, das Verwalten des Formulars ohne Bibliothek und auch mit der React-Hook-Formularbibliothek. Wir werden beide Möglichkeiten sehen. Danach werden wir uns die Formularvalidierung mit einer der angesagtesten Bibliotheken namens ZOD ansehen Formularvalidierung mit einer der angesagtesten Bibliotheken und auch erfahren, wie wir mit Datei- oder Bildeingaben in React umgehen können Lassen Sie uns also näher darauf eingehen. 116. Login-Formular erstellen: Lassen Sie uns zunächst die Benutzeroberfläche unseres Anmeldeformulars erstellen. Danach können wir lernen, ohne uns Gedanken über das Design machen zu müssen. Also hier erstellen wir einen weiteren Ordner namens Authentifizierung. Und in diesem Ordner werden wir unsere Login-Formularseite erstellen. Also erstellen wir eine neue Datei namens Login Page Dot CSS. Außerdem erstellen wir eine neue Komponente namens Login Page Dot JSX Hier fügen wir Boilerplate-Code und oben importieren wir die Punkt-CSS-Datei für die Anmeldeseite Gut. Jetzt, an der Stelle dieses Tages, fügen wir einen Abschnitt mit dem Klassennamen, Align-Center und der Formularseite hinzu. In diesem Abschnitt fügen wir nun das Form-Tag hinzu und geben ihm einen Klassennamen und ein Authentifizierungsformular. Jetzt fügen wir hier unsere Überschrift zum Anmeldeformular hinzu. Und danach haben wir Du, das alle Eingabefelder hat und ihm einen Klassennamen gibt, Formulareingaben. Jetzt fügen wir vorerst Namen und Telefonnummer hinzu, aber keine Sorge, wir werden das bald ändern. Für individuelle Eingaben fügen wir also eine DU hinzu und darin übergeben wir ein Etikett und geben deinen Namen weiter. Geben Sie in dieser DML nichts zur Überprüfung weiter. Ich werde es dir in einer Minute erklären. Danach fügen wir einfach Eingabefeld mit Typtext hinzu und geben ihm einen Klassennamen, ein Formular, eine Texteingabe und einen Platzhalter für die Eingabe Ihres Namens Jetzt duplizieren Sie das und an der Stelle dieses Namens schreiben wir die Telefonnummer und geben hier Typ für die Telefonnummer und den Platzhalter für die Eingabe Ihrer Telefonnummer Und zum Schluss fügen wir eine Schaltfläche mit dem Typ Senden hinzu und geben ihr einen Klassennamen, eine Suchschaltfläche und ein Formular „Senden“ und „Absenden und „Absenden Speichern Sie das, und jetzt müssen wir dieses Formular zu unserer App-Komponente hinzufügen. Kommentieren Sie also diese M-Bestellseite aus und fügen Sie hier die Anmeldeseite hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir bekommen hier Formularelemente. Jetzt müssen wir nur noch Stile für sie hinzufügen. In der Punkt-CSS-Datei auf der Anmeldeseite werden wir also zunächst unseren Abschnitt zentrieren, also Punkt FOM Page Cali Brackets, Inhalt zur Mitte hin ausrichten Danach fügen wir Coli-Klammern für das Authentifizierungsformular hinzu, und hier die Breite auf 30%, und hier die Breite auf 30%, den Abstand auf 32 Pixel für oben und unten und 48 Pixel für links und rechts, Rand oben auf 32 Pixel und die Hintergrundfarbe auf Weiß Danach zielen wir auf den Titel unseres Formulars ab. Bei der Authentifizierung, Formular H zwei und innerhalb geschweifter Klammern, fügen wir die Schriftgröße auf 40 Pixel, den unteren Rand auf 30 Pixel hinzu und den Text richten wir den Text mittig fügen wir die Schriftgröße auf 40 Pixel, den unteren Rand auf 30 Pixel hinzu und den Text richten wir den Text mittig Speichern Sie das und sehen Sie, dass unser Seitentitel gut aussieht. Jetzt müssen wir nur noch den Stil für dieses Etikett, die Eingabefelder und die Schaltfläche „Senden“ hinzufügen . Aber vorher legen wir dieses Label und die Eingaben in der Spalte fest. Hier fügen wir also die Punktform-Eingaben D und innerhalb dieser Anzeige zwei Flachs, Flachs Richtung zur Spalte und Rand unten 220 Pixel Danach fügen wir.com-Unterstrich-Eingaben , Label und Cali-Klammern hinzu, und hier fügen wir die Schriftgröße auf 18 Pixel, die Schriftstärke auf 600 und den unteren Rand auf drei Lassen Sie uns nun unsere Eingabefüllungen, also Punktform, Texteingabe, Cali-Klammern und innerhalb dieser Höhe, auf 35 Pixel ausrichten also Punktform, Texteingabe, Cali-Klammern und innerhalb dieser Höhe, , wobei der Abstand auf Null und acht Pixel für links und rechts Schriftgröße auf 17 Pixel, Schriftstärke auf 500 und Kontur auf Null Schließlich fügen wir .com hinzu, geben die Calibraket-Höhe auf 40 Pixel, die Breite auf 100% und den Rand auf 25 Pixel für oben, Null für links und rechts und zehn Pixel Speichern Sie die Änderungen und schauen Sie sich das an. Unser Formular ist fertig. Jetzt fragen Sie sich vielleicht, warum ich dieses Etikett leer gelassen habe. Viele Entwickler wissen nicht wirklich , was dieses Estim-Vier-Attribut bewirkt Sogar ich habe das gerade in meinem vierten oder fünften Projekt gelernt , als ich anfing Diese vier Attribute geben an , für welches Formularelement diese Bezeichnung gebunden ist. Lassen Sie mich Ihnen das praktisch erklären. Wenn wir auf dieses Namensschild klicken, können wir vorerst keine Wirkung feststellen. Jetzt fügen wir hier in unserem Eingabefeld das ID-Attribut hinzu und übergeben hier den Namen. Jetzt müssen wir in diesen Labels estim for attribute dieselbe ID hinzufügen , die wir in unserer Eingabe hinzufügen Also schreiben wir hier den Namen. Gleiche machen wir mit dieser Telefonnummer, ID zum Telefon und tM für Attribut zu Telefon. Speichern Sie die Einträge und schauen Sie sich das an. Schau mal, wenn wir auf dieses Etikett klicken, landen wir mit dem Cursor in der Eingabefüllung. Auf diese Weise verwenden wir Label für Attribute, die angeben, an welches Formularelement unser Label gebunden ist. 117. UseRef-Hook verstehen: Sehen wir uns nun einen weiteren wichtigen Hook in React an, nämlich use RF Fok Also zunächst, was ist Use Rf Hook und warum ist es wichtig Use Rf ist ein Hook für den Zugriff auf Dom-Elemente und auch für die Erstellung mehrerer Variablen, die die Komponente nicht erneut rendern. Dies sind die beiden häufigsten Anwendungsfälle für die Verwendung von Rf Fok. wir uns vorerst keine Gedanken darüber, eine veränderbare Variable zu erstellen Lassen Sie uns zunächst verstehen, wie wir auf Dom-Elemente zugreifen können. Deshalb haben wir hier in unserem Anmeldeformular vorübergehend den Eingabetyp für Telefonnummern auf Passwort gesetzt . Wie wir wissen, verfügen viele Websites über diese Funktion, mit der wir das eingegebene Passwort verstecken und anzeigen können. Nach dieser Eingabe fügen wir eine Schaltfläche hinzu, wir geben Button ein, denn wenn wir das Typattribut nicht angeben, ist es standardmäßig auf Senden gesetzt und wir haben bereits eine Schaltfläche zum Senden. Hier geben wir also das Passwort für die Höhe ein und duplizieren diese Schaltfläche und ändern sie so, dass das Passwort angezeigt wird. Sag die Änderungen und sieh sie dir an. Sehen Sie, hier können wir unser Passwort eingeben, das derzeit nicht sichtbar ist. Was wir nun tun wollen, ist wenn wir auf diese Schaltfläche „Passwort“ klicken, wollen wir unseren Eingabetyp auf einfachen Text setzen. Und wenn wir auf die Schaltfläche Höhe klicken, setzen wir den Typ wieder auf Passwort. Dafür müssen wir also auf dieses Eingabefeld zugreifen. Lassen Sie uns nun sehen, wie wir das mit Use Rf Hook machen können. Also schreiben wir uns zunächst in unserer Komponente ref Hook und wählen diesen automatischen Vorschlag aus. Jetzt müssen wir den Standardwert übergeben, genau wie bei Use Date Hook. Normalerweise fügen wir hier immer Null hinzu. Dieser Use-Ref-Hook gibt nun ein Objekt mit nur einer Eigenschaft namens current zurück . Machen wir das in einer Variablen namens password ref. Auf welches Element wollen wir nun zugreifen? Richtig, es ist unsere Passworteingabe. In diesem Element müssen wir also ein Attribut namens Rf hinzufügen. Und hier übergeben wir unseren Referenznamen, das Passwort Rf. Nun wollen wir sehen, was wir in diesem Passwort Rf bekommen. Vorerst fügen wir in dieser Schaltfläche „Ausblenden“ Klick-Ereignis hinzu, und hier fügen wir die Pfeilfunktion und das Konsolen-Punktprotokoll aktuellen Kennwortreferenzpunkt hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Öffnen Sie die Konsole und klicken Sie auf die Schaltfläche Ausblenden. Siehst du, hier bekommen wir diese Eingabe mit ID Phone. Mit diesem Element können wir jetzt alles tun, was wir mit Dom-Elementen in Vanilla-JavaScript tun. Jetzt fragen Sie sich vielleicht, wie wir wissen können, welche Methoden wir mit Elementen verwenden können und wie wir uns daran erinnern können. Die Antwort lautet also, Sie müssen sich an keine Methode erinnern. Lassen Sie mich Ihnen meinen Trick zeigen, um alle Methoden zu sehen , die wir mit Elementen verwenden können. Also hier, entferne einfach diese aktuelle Eigenschaft. Und speichere es. Jetzt können Sie in der Konsole dieses Passwort-Ref-Objekt mit der aktuellen Eigenschaft sehen . Klicken Sie nun auf diesen kleinen Pfeil und erneut auf diesen Pfeil. Hier sehen wir also alle Methoden , die wir auf dieses Element anwenden können. Zum Beispiel wollen wir Stil anwenden. Scrollen Sie nach unten und klicken Sie auf dieses Symbol, um es genauer zu sehen. Und hier kannst du dir die Eigenschaften des Stils ansehen. Klicken Sie darauf und Sie können alle Stileigenschaften sehen . So einfach ist das. In unserem Beispiel wollen wir hier also das Typattribut für diese Eingabe ändern. An die Stelle dieses Punktprotokolls der Konsole schreiben wir also das Passwort, den Referenzpunkt, der aktuelle Punkttyp dem Passwort entspricht und das Passwort kodiert Wir kopieren einfach dieses OnClick-Ereignis und fügen es für diese So-Schaltfläche Und hier ändern wir einfach den Typ in Text. Speichern Sie die Änderungen und schauen Sie sich das an, geben Sie etwas in diese Eingabe ein. Standardmäßig ist es auf Ausblenden. Klicken Sie jetzt auf Anzeigen und hier können wir unser Passwort sehen. Klicken Sie erneut auf Ausblenden und es heißt Ausblenden. Und sehen Sie, wie einfach wir mit Rf Hook auf Dom-Elemente zugreifen können . Nur für eine Obergrenze müssen wir zuerst eine Variable mit use Rf Hook deklarieren und hier unseren Standardwert übergeben , der Null ist. Danach übergeben wir einfach das RF-Attribut an jedes Element, auf das wir zugreifen möchten, und übergeben unseren Use-Rf-Variablennamen. So einfach ist das, wenn wir Vanilla-JavaScript verwenden, müssen wir hier den Dokumentpunkt Get Element nach ID oder Name schreiben . Aber in React müssen wir das nicht tun. Wir haben Rf ok für den Zugriff auf das Element verwendet. 118. Formularbearbeitung mit Ref-Hook: Im ersten Projekt sehen wir also, wie wir mit Hilfe von Use Date Hook mit Formularen umgehen können. Lassen Sie uns nun sehen, wie wir mit dem Use Rf-Hook mit Formularen umgehen können. Es ist wirklich einfach. Lass es mich dir zeigen. Lassen Sie uns also diese beiden Knöpfe entfernen. Wir brauchen es nicht und entfernen auch dieses F-Attribut. Ich füge sie nur hinzu, um zu erklären, wie man den RF-Hook benutzt. Ändern Sie diesen Typ in Zahl und entfernen Sie auch dieses p-Attribut. Jetzt rufen wir hier use Rf auf und übergeben hier null Standardwert und geben ihm einen Namen, nennen den Namen ref. In diesem Namen ref wollen wir nun eine Referenz auf diese Namenseingabe erhalten. Also fügen wir in der Eingabe das ref-Attribut hinzu, und hier übergeben wir den Namen ref. Lassen Sie uns nun das Absenden dieses Formulars erledigen. Also fügen wir hier unsere On-Submit-Funktion hinzu und übergeben hier die Absendefunktion. Lassen Sie uns nun diese Funktion definieren. Wir haben das schon einmal gemacht, jetzt in dieser Funktion Moment protokollieren wir diesen NameRV Punkt aktuell einfach in der Konsole protokollieren wir diesen NameRV Punkt Und in diesem Fall müssen wir auf diesen Eingabewert zugreifen, die Änderungen speichern und einen Blick darauf werfen, hier den Namen eingeben und auf Consubmit klicken Siehst du, unsere Seite wird aktualisiert. Warum passiert das? Wissen Sie es? Richtig. Das liegt daran, dass wir die Prevent-Standardfunktion nicht hinzufügen. Sie können jetzt sehen, dass Sie viele kleine Details über React kennen. Du machst das wirklich super. Hier fügen wir also ein Event-Objekt hinzu, und darin fügen wir die Standardfunktion E Dot Prevent hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Öffnen Sie die Konsole, schreiben Sie hier den Namen und sehen Sie, wir bekommen diesen Namen hier. Lassen Sie uns nun dasselbe für diese aufgefüllte Telefonnummer tun. Also hier erstellen wir eine neue Referenzkonstante, übergeben hier Null und geben ihr einen Namen, Telefonreferenz. Du kannst benutzen, was du willst. Es liegt ganz bei dir. In dieser Telefonnummerneingabe fügen wir nun das F-Attribut hinzu und übergeben hier unsere Telefonnummer. Und lassen Sie uns in unserer Handle-Submit-Funktion den aktuellen Punkt VLU in der Konsole protokollieren Sag die Tipps und wirf einen Blick darauf. Füllen Sie diese Eingaben aus und senden Sie sie ab. Sehen Sie hier, wir erhalten diese Werte. In der realen Welt werden wir jetzt das Objekt unserer Daten an den Server senden. Hier erstellen wir also ein Objekt namens user, und darin fügen wir die Eigenschaft name hinzu und geben diese an eine leere Zeichenfolge weiter. Und hier haben wir Telefon und als Standardwert fügen wir Null hinzu. An der Stelle dieser Konsole setzen wir nun den Punktnamen des Benutzers auf den aktuellen Wert von Name Rev Dot Danach entspricht das Benutzerpunkttelefon dem aktuellen Punktwert des Telefonreferenzpunkts Konsultieren Sie jetzt endlich das Punktprotokoll dieses Benutzerobjekts. Speichern Sie die Änderungen und schauen Sie sich das an, füllen Sie das Formular aus und hier erhalten wir unser Benutzerobjekt, das wir an den Server senden können. Eine kleine Änderung, wir müssen diese Zahlenfolge nur in eine Zahl umwandeln . Also hier setzen wir diesen Wert Klammern und fügen hier parse Speichern Sie die Änderungen, senden Sie ein Formular ab. Sehen Sie hier, wir haben ihre Nummer. So können wir mit Formularwerten umgehen, indem wir Rf verwenden. Jetzt fragen Sie sich vielleicht, was ist der beste Weg, mit Formularen umzugehen? Verwenden Sie Rf oder verwenden Sie State. Die Antwort lautet use state. Aber die Verwendung von Rf ist auch nützlich, wenn wir bis zu zehn Eingabefüllungen haben , denn wenn wir sref verwenden, führt das nicht dazu, dass die Komponente gerendert wird Wenn wir fünf bis sechs Formularausfüllungen haben, können wir einfach UtaTeHok verwenden Verwenden Sie nur den Sref-Hook für die Bearbeitung von Formularen. Ich gebe an, dass es zu Leistungsproblemen führt Verwenden Sie userefHuk In der nächsten Lektion werden wir unser Formular mit dem State Hook bearbeiten unser Formular mit dem 119. Formularbearbeitung mit Statushook: Lassen Sie uns also zunächst diese Konstanten entfernen, diese Zeilen aus dem Handle Submit entfernen und auch diese F-Attribute aus beiden Eingaben entfernen Jetzt erstellen wir zunächst eine Zustandsvariable mit SNIPID und geben ihr einen Namen user, set user und einen Standardwert. Wir übergeben ein Objekt mit dem Eigenschaftsnamen an eine leere Zeichenfolge und das Telefon ebenfalls eine leere Jetzt importieren wir oben, anstatt UF zu importieren, Tate Hook wir nun den Namen eingegeben haben, fügen wir das Änderungsereignis Darin finden wir das Ereignisobjekt, Pfeilfunktion und setzen Benutzer auf Objekt. Zuerst erhalten wir alle Werte aus dem vorherigen Benutzerobjekt und ersetzen einfach den Namen durch einen Punktzielwert. Jetzt machen wir dasselbe für die Fon-Eingabe. Kopieren Sie also diese Änderung und fügen Sie sie in diese Eingabe ein. Und ändere diesen Namen einfach in Telefon. Bisher haben wir eine separate Funktion für die Bearbeitung von Änderungen erstellt , aber wir können dies auch auf diese Weise tun. Sie können verwenden, was Sie wollen. Es liegt ganz bei dir. Endlich, in der Handle-Submit-Funktion, protokollieren wir von Console Dot dieses Benutzerobjekt. Speichern Sie die Änderungen und schauen Sie sich das an, füllen Sie das Formular aus und senden Sie es ab. Siehst du, hier bekommen wir unser Benutzerobjekt. Außerdem müssen wir diese Telefonnummer in eine Ganzzahl umwandeln. Umschließen Sie diesen Wert also mit Klammern und was wir verwenden, richtig, parse Jetzt haben wir auch hier ein kleines Problem. Wir wissen, dass alle Eingabefelder in SDML eine Werteigenschaft haben, um ihren eigenen Status beizubehalten Aber mit dieser Implementierung haben wir auch eine Benutzerstatusvariable Es ist also möglich , dass die Eigenschaft und die Eingaben nicht mehr synchron sind. Es wird nicht oft vorkommen, aber Vorbeugen ist besser als Heilen. Um dieses Problem zu lösen, fügen Sie also die Eigenschaft value hinzu und setzen Sie den Wert auf den Benutzerpunktnamen und auch hier den Wert auf den Benutzerpunkt Telefon Hier können wir dieses Eingabefeld also als Kontrollkomponente bezeichnen , da sein Status vollständig von React gesteuert wird Das bedeutet einfach, dass der Wert dieser Eingabe nicht von der Kuppel verwaltet wird, sondern vom Status der Komponente gesteuert wird. 120. Formulare mit React-Hook-Formular verwalten: Jetzt haben wir hier nur zwei Eingabefüllungen. Wenn unser Formular morgen komplexer wird, wird die Verwaltung des Formulars mit used schwieriger und zeitaufwändiger , da wir für jedes Eingabefeld Eigenschaften wie value und onchange event festlegen müssen In dieser Situation können wir eine der beliebtesten Bibliotheken verwenden, nämlich React Hook Form Diese Bibliothek hilft uns beim Erstellen schneller Formulare, und wir müssen uns keine Gedanken über die Verwaltung des Formularstatus machen. Diese Bibliothek macht das automatisch im allerletzten Code. Öffnen Sie also das Terminal und schreiben Sie in das neue Terminal NPM, ich reagiere, haken das Formular bei 7.43 0.9 ein und drücken Minimiere jetzt dieses Terminal. Jetzt müssen wir oben in unserer Komponente einen Hook namens use form aus der React-Hook-Formularbibliothek importieren . In unserer Funktionskomponente nennen wir das jetzt Use Form Hook. Dieses Use-Formular gibt ein Formularobjekt zurück. Also speichern wir das in einer Variablen namens form, und danach konsolieren oder protokollieren wir dieses Formular einfach, um zu sehen, was wir in diesem Formularobjekt erhalten Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, hier finden Sie viele Eigenschaften und Methoden wie das Absenden, Registrieren, Zurücksetzen, Zurücksetzen von Füllungen und so weiter. Hier können wir also unser Formular destrukturieren. Und zuallererst brauchen wir die Registermethode. Diese Registermethode verwendet den vollständigen Namen als Argument und gibt einige Eigenschaften zurück. Lass mich dir zeigen, was ich meine. Also hier an der Stelle dieses Formulars fügen wir die Registerfunktion hinzu und übergeben hier den vollständigen Namen. Sagen wir Name. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie hier, wir erhalten dieses Objekt mit ein paar Füllungen wie Namen auf Blur bei Änderung und F-Attribut Im Wesentlichen verwendet dieses React-Hook-Formular also f Hook für die Bearbeitung des Formulars Also, wie ich dir gesagt habe, müssen wir dieses React-Hook-Formular für komplexe Formen verwenden . Und wenn wir eine komplexe Form haben, verwenden wir den F-Hook. An der Stelle, an der die Attribute „ Änderung“ und „Wert“ stehen, können wir Kalibrate hinzufügen, und hier nennen wir diese Registerfunktion Und geben Sie hier unseren eingegebenen Füllnamen ein, der Name lautet. Wie wir gerade sehen, gibt diese Funktion einige Eigenschaften zurück. Um das hier hinzuzufügen, können wir den Spread-Operator verwenden. Gleiche machen wir bei dieser Eingabe, entfernen diese Eigenschaften und fügen hier Registerfunktion hinzu und geben hier unseren vollständigen Namen ein , der Telefon ist, und verteilen das einfach. Jetzt brauchen wir diese Statusvariable nicht mehr und entfernen auch diese Handle-Senden-Funktion. Hier in unserem Use-Form-Hook erhalten wir nun eine weitere Methode namens handle submit. Diese Funktion zum Absenden von Formularen wird verwendet, um das Senden von Formularen zu verarbeiten. Also hier nennen wir diese Handle-Senden-Funktion in einem Submit-Event. Und als Argument müssen wir eine Callback-Funktion übergeben Und in dieser Funktion erhalten wir unsere Formulardaten Hier erhalten wir also Formulardaten und wir protokollieren diese Formulardaten einfach mit einem Punkt Wenn wir also das Formular abschicken, läuft diese Pfeilfunktion ganz einfach Speichern Sie die Änderungen und schauen Sie sich das an. Füllen Sie das Formular aus. Und klicken Sie auf Senden und sehen Sie hier , dass wir unsere Daten erhalten und nicht viel Code schreiben müssen. Jetzt bekommen wir hier diese Telefonnummer als Zeichenfolge. Dafür müssen wir also das zweite Argument in dieser Registerfunktion übergeben . Also Objekt und wir setzen den Wert als Zahl auf true, speichern die Änderungen und aktualisieren die Seite, füllen das Formular aus und hier bekommen wir unsere Nummer. Also funktioniert es. In der realen Anwendung wollen wir diese Daten beim Absenden nicht einfach abrufen oder protokollieren, sondern wir werden API oder vieles mehr aufrufen. Anstatt diese Logik hier zu definieren, können wir diese Funktion also separat definieren. Also schneiden wir diese Pfeilfunktion aus, und hier erstellen wir eine neue Funktion namens Absenden und fügen einfach unsere Pfeilfunktion hier ein und übergeben sie beim Senden hier. Sie können sehen, dass unser Formular jetzt übersichtlicher und wartungsfreundlicher aussieht Das ist die Stärke der React Hook-Formularbibliothek. 121. Formularvalidierung: Bei einer realen Anwendung mit Gebäudeformular müssen wir also auch die Formularvalidierung für unser Formular anwenden. Lassen Sie uns zunächst verstehen, was Formularvalidierung ist. Formularvalidierung ist eine Technik, um sicherzustellen, dass Benutzer Daten korrekt eingeben oder nicht. Hier haben wir zum Beispiel unseren Namen ausgefüllt und der Benutzer gibt nur zwei Zeichen ein, dann müssen wir dem Benutzer einen Fehler anzeigen, als ob der Name aus drei oder mehr Zeichen bestehen sollte. Wir sind oft mit dieser Art von Fehler konfrontiert. Dies wird als Formularvalidierung bezeichnet. Die Validierung mithilfe des React-Hook-Formulars anzuwenden ist sehr einfach. den zweiten Parameter setzen, übergeben wir hier unser Validierungsobjekt und fügen darin die Validierungseigenschaft wie required auf zwei und die Mindestlänge auf drei hinzu. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Ohne etwas zu schreiben, klicken Sie auf Senden und sehen Sie hier, wir bekommen nichts weil das React-Hook-Formular nur dann an das Formular gesendet wird , wenn alle Felder validiert sind. Wenn wir drei oder mehr Zeichen schreiben, wird erst dann unsere Absendefunktion ausgeführt. Schauen wir uns nun an, wie wir Fehler in unserem Formular bekommen können. Dafür haben wir in diesem Use Form Hook eine Eigenschaft namens form state. Fügen Sie das hier hinzu und Consol protokolliert diesen Formularstatus einfach. Speichern Sie das und schauen Sie sich die Seite an und sehen Sie, dass Sie hier ein Objekt erhalten. Darin haben wir einige Eigenschaften wie Fehler beim Laden, ist gesendet, ist gültig und so weiter Lassen Sie uns einfach die Formstate-Punktfehler ausdrucken. Speichern Sie das, aktualisieren Sie die Seite. Und sehen Sie, wir haben derzeit ein leeres Objekt. Und in dem Moment, in dem wir das Formular abschicken, erhalten wir hier einen Fehler mit dem Namen Property. Und darin erhalten wir Art des Fehlers , der erforderlich ist. Wenn wir hier einen Buchstaben schreiben, erhalten wir einen weiteren Fehler mit dem Typ Mean Length. Durch die Verwendung dieses Fehlerobjekts können wir also Fehler anzeigen. Nach unserem Eingabefeld fügen wir also ein Hervorhebungs-Tag hinzu und geben ihm einen Klassennamen, ein Formular und einen Unterstrichfehler Und darin fügen wir hinzu, bitte gib deinen Namen Jetzt wollen wir diesen Fehler nur anzeigen , wenn wir einen Namensfehler haben. Umschließen Sie diese Betonung also mit Cl-Klammern und fügen Sie hier bedingte Formstate-Punktfehler Anstatt Fmst-Punktfehler zu schreiben, können wir jetzt die Fehlereigenschaft aus dem Formularstatus destrukturieren Also fügen wir hier oben einen Doppelpunkt hinzu und hier erhalten wir Fehler. Entferne dieses Konsolen-Punktprotokoll. Das brauchen wir nicht. Jetzt unten können wir Fehler verwenden, Punktname, Fragezeichen, Punkttyp entspricht erforderlich Wenn es wahr ist, zeigen nur wir diesen Fehler an. Jetzt fragst du dich vielleicht, warum ich hier ein Fragezeichen hinzufüge. Dieses Fragezeichen und Punkt werden als optionale Verkettung bezeichnet Wir benötigen das, weil der Betreff für Fehler leer sein kann. Das heißt , wenn wir keine Fehler in diesem Namensfeld haben, erhalten wir keine Fehler in der Punktnameneigenschaft, und wenn wir diese Fehlerpunktname-Eigenschaft nicht haben, dann wollen wir auf diese Typeigenschaft zugreifen, dann wird uns eine Fehlermeldung angezeigt Dieses Fragezeichen teilt Browser mit, ob der Punktname für Fehler verfügbar ist Überprüfen Sie diese Bedingung erst dann, andernfalls ignorieren Sie sie. Fügen wir nun einen Fehler für die mittlere Länge hinzu. Duplizieren Sie diese Zeile und hier fügen wir die mittlere Länge hinzu. Und ändern Sie diese Fehlermeldung auch , dass der Name aus drei oder mehr Zeichen bestehen sollte. Speichern Sie die Änderungen und schauen Sie sich das an. Senden Sie ein Formular ab und sehen Sie hier, dass wir diese Fehlermeldung erhalten. Bitte gib deinen Namen ein. Und wenn wir etwas schreiben, ändert sich die Fehlermeldung so, dass Name aus drei oder mehr Zeichen bestehen sollte. Und wenn wir drei oder mehr als drei Zeichen schreiben, dann verschwindet der Fehler, und das ist ziemlich cool, oder? Lassen Sie uns diese Fehlerfarbe ändern. In der Punkt-CSS-Datei auf der Anmeldeseite unten fügen wir den Punkt FM-Unterstrichfehler Und in Cali-Klammern fügen wir Rot Farbe hinzu Sag die Änderungen und sieh, hier bekommen wir einen Fehler in roter Farbe 122. Formularvalidierung basierend auf Schema: In der vorherigen Lektion hatten wir also die Formularvalidierung zwischen unseren Markups Wenn wir in Zukunft ein komplexes Formular haben, wir in Zukunft ein komplexes Formular haben, dann wird unser Markup sehr komplex und unser Code wird nicht mehr In dieser Situation können wir also eine andere Technik verwenden, die als schemabasierte Validierung bezeichnet wird Bei der schemabasierten Validierung können wir also alle unsere Validierungsregeln an einem Ort aufbewahren. Es gibt ein paar Bibliotheken wie Yup und Zod. Derzeit ist Zod sehr berühmt, also werden wir das nutzen. Öffne das Terminal und im neuen Terminal, rechts NPM, I Oder wenn Sie dieselbe Version installieren möchten , die ich verwende, können Sie hier 3.21 0.4 hinzufügen und die Eingabetaste drücken Nett, minimiere dieses Terminal. Jetzt importieren wir oben in unserer Komponente eine Methode namens Z aus Zod Mit diesem Z können wir das Schema für unser Formular definieren. In einfachen Worten ist ein Schema eine Reihe von Regeln für Felder. Jetzt möchte ich unsere Formularfelder auf E-Mail und Passwort ändern . Ich verwende nur Namens- und Schriftfelder , um Ihnen das Formular zu erklären. In unserem Formular ändern wir dieses Label also in E-Mail, auch hier E-Mail und ändern auch diese ID in E-Mail. Und innerhalb dieser Registrierungsfunktion ändern wir dies auch in E-Mail. Und hier können wir auch den Eingabetyp auf E-Mail ändern. Ändern Sie diesen Platzhalter, um Ihre E-Mail-Adresse einzugeben. Danach ändern wir dieses Telefon in ein Passwort. Und auch hier Passwort, Passwort eingeben, ID in Passwort und Platzhalter, um Ihr Passwort einzugeben Und in dieser registrierten Funktion übergeben wir auch das Passwort Lassen Sie uns nun das Schema für diese beiden Füllungen definieren. Also oben sind wir bei einem Punktobjekt. In dieser Funktion müssen wir nun ein Objekt übergeben, das alle Felder und auch Regeln für das Füllen enthält. Unser Anmeldeformular hat also die erste E-Mail, die eine Zeichenfolge ist, also eine Z-Punkt-Zeichenfolge mit Punkt E-Mail. Diese Methode überprüft, ob unsere E-Mail gültig ist oder nicht. Außerdem werden wir mindestens drei Zeichen festlegen. Hier definieren wir also drei Regeln für unser E-Mail-Feld, Zeichenfolge, unsere E-Mail und mindestens drei Zeichen. Jetzt machen wir dasselbe für das Passwortfeld. Eine Punktfolge und ein Mittelwert bis acht. Wenn Sie weitere Validierungsregeln anwenden möchten, können Sie sich die Zo-Dokumentation ansehen . Es ist wirklich einfach. Hier haben wir unser Schema zum Durchführen von Füllungen fertig gestellt, sodass wir es in einer Variablen namens Schema speichern können. Jetzt fragen Sie sich vielleicht, wie wir dieses Schema auf unser Formular anwenden können ? Dafür benötigen wir also eine weitere Bibliothek namens Hook Form Resolvers Also öffne das Terminal und schreibe NPM, ich bei Hook Form Slash Resolvers Bei 3.0 0.1 und drücke Enter. Durch die Verwendung dieser Resolver können wir ganz einfach unser Oder-Schema in unser React-Hook-Formular einfügen Oben importieren wir den ZR-Resolver aus dem Hook-Formular, die Slash-Resolver SOD. Gut. In unserem Use-Form-Hook übergeben wir hier ein Objekt, und darin haben wir eine Eigenschaft namens Resolver, und hier fügen wir den ZR-Resolver hinzu, und darin übergeben wir unser Schema. Lassen Sie uns jetzt kurz zusammenfassen, übergeben wir unser Schema. Lassen Sie uns jetzt was wir in dieser Lektion getan haben Zunächst erstellen wir mit der Z-Methode unser Validierungsschema, erstellen wir mit der Z-Methode unser Validierungsschema, einer Reihe von Regeln für das Ausfüllen von Formularen besteht Und dann wenden wir dieses Schema mithilfe von Zod Dissolver auf unser React-Hook-Formular an Wenn wir also Fehler haben, wird dies direkt zum Fehler beim React-Hook-Formular beitragen So einfach ist das. Lassen Sie uns nun sehen, wie wir diese Fehler anzeigen können. Zuallererst können wir in der Registerfunktion dieses Validierungsobjekt entfernen. Das brauchen wir nicht. Wir können auch diese eine Bedingung entfernen, und hier müssen wir nicht nach diesem Fehlertyp suchen. Stattdessen können wir so etwas tun. Wenn wir Fehler per E-Mail haben, zeigen wir nur dann einen Fehler an. An der Stelle dieser hartcodierten Fehlermeldung können wir auch Fehler als Punkt-E-Mail mit Punktnachricht verwenden. Diese Nachricht ist die Standardnachricht, die von Zod hinzugefügt wurde, aber wir können sie auch anpassen. Kopieren wir also diesen Code von hier und fügen ihn ein, damit das Passwort ausgefüllt An der Stelle dieser E-Mail fügen wir nun Fehler mit Punktpasswort und Fehler mit Punktpasswort und Message hinzu Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Aktualisieren Sie die Seite und schreiben Sie nichts und reichen Sie es ab. Sehen Sie hier, wir erhalten eine Fehlermeldung wie eine ungültige E-Mail und die Zeichenfolge muss mindestens acht Zeichen enthalten. Die E-Mail und das Passwort werden ausgefüllt und gesendet. Siehst du, hier bekommen wir unsere Daten, also funktioniert es. Lassen Sie uns nun diese Fehlermeldung anpassen. Um also unsere benutzerdefinierte Nachricht hinzuzufügen, können wir hier ein Objekt mit der Nachrichteneigenschaft übergeben. Und geben Sie hier die Nachricht weiter, bitte geben Sie eine gültige E-Mail-Adresse ein. Auch bei diesem Passwort Objekt und Nachricht an müssen Objekt und Nachricht an das Passwort mindestens acht Zeichen lang sein. Speichern Sie die Änderungen und werfen Sie einen Blick darauf, aktualisieren Sie die Seite und senden Sie das Formular ab. Sehen Sie, wir erhalten unsere benutzerdefinierte Bestätigungsnachricht, sodass Sie sehen können, wie einfach und unkompliziert Formular und Validierung mithilfe von React Hook Form und SOT Library zu handhaben sind. 123. Übung für Formulare: Jetzt ist es Zeit für ein wenig Bewegung. Ich möchte, dass Sie dieses Anmeldeformular mit React Hook aus der Bibliothek bearbeiten Anmeldeformular mit React Hook aus und auch eine Validierung für diese Eingabefelder hinzufügen. Sie sich keine Gedanken über die Bearbeitung von Bildeingaben, kümmern Sie sich um Eingabefüllungen und fügen Sie deren Validierung hinzu. Das ist sehr einfach und ich weiß, dass du es kannst. Hier sind die Details der benutzerdefinierten Bestätigungsnachricht diese verwenden, müssen Sie Validierungsregeln hinzufügen. Bevor Sie mit dieser Übung beginnen, möchte ich Ihnen die Anmeldeseite , da unser Hauptaugenmerk in diesem Abschnitt auf dem Formular liegt Öffnen Sie also den Ressourcenordner , den Sie zu Beginn dieses Kurses heruntergeladen haben, öffnen Sie den dieses Kurses heruntergeladen haben, öffnen Ordner Projekt drei und wechseln Sie zum Übungsordner Formular Hier habe ich die Komponente für die Anmeldeseite und auch die CSS-Datei hinzugefügt und auch die CSS-Datei Also mögen wir diese beiden Dateien und legen diese Dateien im Authentifizierungsordner Fügen wir nun diese Seite zu unserer App-Komponente hinzu. Kommentieren Sie also diese Anmeldeseite aus und fügen Sie hier die Anmeldeseite hinzu, und schon können wir loslegen. Unten füge ich auch eine Bestätigungsnachricht für dieses Formular hinzu. also etwas Zeit für diese Übung und kommen Sie dann zurück und sehen Sie sich diese Lösung an. 124. Lösung dieser Übung: Sehen wir uns nun die Lösung dieser Übung an. Ich weiß, dass Sie diese Übung lösen, und wenn Sie bei etwas nicht weiterkommen, dann machen Sie sich keine Sorgen, Sie können jetzt lernen, aber zumindest versuchen Sie es und das ist wichtiger. Ich werde mir also nicht viel Zeit nehmen und dir direkt die Lösung zeigen. Zuallererst geben wir oben use form hook aus der React-Hook-Formularbibliothek ein. Und innerhalb unserer Komponente nennen wir das Use Form Hook. Und speichern Sie das konstant und destrukturieren Sie direkt die Registermethode und behandeln Sie auch die Submit-Methode Jetzt fügen wir im Namenseingabefeld die Registerfunktion hinzu und übergeben hier unseren vollständigen Namen, der Name lautet Wie wir wissen, gibt diese Registermethode einige Attribute und Ereignisse zurück. Um das hinzuzufügen, müssen wir das verbreiten. Kopieren wir das und fügen es in alle anderen Eingabefelder ein. Drücken Sie Alt oder die Wahltaste und per Klick erstellen wir mehrere Cursor und fügen sie einfach ein Nun zur E-Mail, wir fügen hier E-Mail hinzu, hier fügen wir ein Passwort hinzu. Bestätigen Sie danach das Passwort und zuletzt die Lieferadresse. Lassen Sie uns nun das Senden erledigen. In unserem Formular fügen wir also ein Submit-Event hinzu, und darin nennen wir diese Handle-Submit-Funktion. Und darin übergeben wir unsere Funktion, den Aufruf beim Absenden. Lassen Sie uns nun diese Funktion definieren. Also Nachteile beim Senden, und wir bekommen hier Formulardaten, Pfeilfunktion, und lassen Sie uns diese Formulardaten einfach abfragen oder protokollieren. Speichern Sie die Änderungen und schauen Sie sich das an, füllen Sie dieses Formular aus. Und klicken Sie auf Con Submit. C, hier bekommen wir unsere Daten. Also bearbeiten wir unser Formular erfolgreich. Lassen Sie uns nun die Validierung mit Zod hinzufügen. Oben importieren wir also Z aus Zod und importieren auch den ZR-Resolver-Hook-Form-Resolver Zod Warum wir diesen ZR-Resolver benötigen, um das Schema mit dem React-Hook-Formular anzuwenden Lassen Sie uns nun ein Schema für unser Anmeldeformular erstellen. Also schreiben wir ein Punktobjekt und fügen darin unser Validierungsobjekt erste Feld ist der Name , also der Z-Punkt-Zeichenkettenpunkt Min 23. Und hier übergeben wir unsere benutzerdefinierte Fehlermeldung. Objektnachricht zum Namen sollte also mindestens drei Zeichen lang sein. Als Nächstes haben wir E-Mail, was eine Punktfolge ist, also Punkt-E-Mail. Und darin geben wir eine Nachricht weiter. Bitte geben Sie eine gültige E-Mail-Adresse ein. Danach fügen wir ein Passwort hinzu, das aus einer Punktfolge besteht. Außerdem bedeutet das Wort acht und hier benutzerdefinierte Nachricht an das Passwort muss die benutzerdefinierte Nachricht an das Passwort mindestens acht Zeichen lang sein. das Passwort zu bestätigen, fügen wir jetzt einfach eine Punktfolge hinzu. Ich werde Ihnen in nur einer Minute erklären, warum. Und endlich haben wir die Lieferadresse, die ebenfalls aus einer Zeichenfolge besteht und ebenfalls aus 15 Zeichen besteht. Und geben Sie an, dass unsere benutzerdefinierte Nachrichtenadresse mindestens 15 Zeichen lang sein muss. Wir müssen unser Passwort mit unserem ausgefüllten Bestätigungskennwort vergleichen . Dafür fügen wir nach diesem Objekt eine verfeinerte Methode hinzu. Darin können wir eine Callback-Funktion hinzufügen, die einen Datenparameter hat Schau dir das an und deine Zuteilungen werden verschwinden. Hier übergeben wir die Bedingung, die Daten, die das aktuelle Objekt unseres Formulars Punkt-Passwort entspricht dem Daten-Punkt-Bestätigungspasswort Dazu können wir nun auch eine benutzerdefinierte Nachricht an den zweiten Parameter übergeben Nachricht zur Bestätigung des Passworts stimmt nicht mit dem Passwort überein, und wir müssen eine weitere Eigenschaft namens path hinzufügen. Und hier in eckigen Klammern fügen wir unseren Feldnamen hinzu, der das bestätigte Passwort ist. Im Grunde bedeutet das, wenn Datenpunktpasswort und das Datenpunktbestätigungskennwort nicht identisch sind, dann erhalten wir diese Fehlermeldung für unser Feld zur Bestätigung des Passworts, so einfach ist dann erhalten wir diese Fehlermeldung für das. Also hier haben wir das Schema fertig. Also lasst uns das in einer Variablen namens Schema speichern. Gut. Jetzt müssen wir nur dieses Schema in unser React-Hook-Formular einfügen. In Use Form Hook fügen wir also ein Objekt hinzu, und darin haben wir den Resolver, und hier rufen wir ZorrSolver auf und Lassen Sie uns nun einfach diese Validierungsfehler anzeigen . In diesem Anwendungsformular erhalten wir also den Formularstatus, und hier können wir Fehler destrukturieren Nun fügen wir unter dieser Namenseingabe Cali-Pakete hinzu, und hier fügen wir hinzu, falls Fehler der Punktname wahr ist, dann zeigen wir das hervorhebende Tag mit dem Klassennamen und den Formularunterstrich Und darin fügen wir Fehler hinzu, Punktname, Punktnachricht. Kopieren Sie diese Bedingung und fügen Sie sie unter alle anderen Eingabefelder ein. Nun zu E-Mail, die in diesen zwei Fehlern Punkt E-Mail für Passwort, welche in diesem Fall zu Fehlern Punkt Passwort. Bei „Passwort bestätigen“ ändern wir dies in Fehler, Punkt, Passwort bestätigen. Und schließlich ändern wir die Lieferadresse in „Fehler bei der Lieferadresse“. Speichern Sie die Änderungen und werfen Sie einen Blick darauf, senden Sie ein Formular ab und sehen Sie hier, dass wir alle Bestätigungsnachrichten erhalten. Füllen Sie nun das vollständige Formular aus und klicken Sie auf Senden. Siehst du, wir bekommen unsere Eingabedaten. Sie können sehen, wie schnell und einfach wir Formular und Validierung mithilfe des React-Formulars und der ZO-Bibliothek handhaben können . 125. Bildupload bearbeiten: Lassen Sie uns nun sehen, wie wir mit Formularen umgehen können , die ein Bild vom Laden oder einen beliebigen Datei-Upload enthalten. Es gibt also mehrere Möglichkeiten , mit dem Bild des Ladens umzugehen. Ich möchte dir meine liebste und einfachste Methode zeigen. Hier erstellen wir also zunächst eine Zustandsvariable unter Verwendung von erstellen wir also zunächst eine Zustandsvariable unter Verwendung Ust-Schnipseln und geben ihr einen Namen, Profile Peak und Set Profile Und als Standardwert übergeben wir hier Null. Außerdem müssen wir oben den Status aus React importieren. Gut. Wenn wir jetzt unser Bild hinzufügen, setzen wir es in den Spitzenzustand des Profils, genau wie bei Eingabefüllungen. In dieser Dateieingabe fügen wir also ein unverändertes Ereignis hinzu, und hier erhalten wir das Ereignisobjekt, Pfeilfunktion und die Profilspitze. Zielpunktdateien abrufen. In diesen Dateien haben wir möglicherweise eine Of-Liste. Hier brauchen wir nur das erste Bild, also den Index auf Null. Schauen wir uns nun an, was wir in dieser Profilspitze bekommen. Einfach das Punktprotokoll in der Konsole aufrufen, das Profil ansehen, die Änderungen speichern und einen Blick darauf werfen. Aktualisieren Sie die Seite, und zuerst erhalten wir hier Null, was der Standardwert ist. Laden wir nun das Bild hoch und sehen, dass wir hier unser Dateiobjekt erhalten, das einige Eigenschaften wie Name, Größe, Typ usw. hat . Wenn wir also ein Bild auf den Server hochladen müssen, müssen wir dieses Dateiobjekt an unser Backend senden Keine Sorge, das werden wir im nächsten Abschnitt sehen. Konzentrieren wir uns vorerst auf den Umgang mit dem Hochladen von Bildern. Wir haben dieses Bildobjekt erfolgreich abgerufen. Jetzt müssen wir nur noch unser ausgewähltes Bild in dieser Bildvorschau anzeigen. Es ist wirklich einfach. Lass es mich dir zeigen. Hier in der Bildquelle an der Stelle dieses Benutzers fügen wir hier eine Bedingung hinzu. Wenn Profile Peak nicht Null ist, rendern wir unseren Profilpeak, andernfalls bleiben wir bei unserem Standardbild, das User ist. Nehmen Sie die Änderungen vor und schauen Sie sich das an, klicken Sie auf die Seite und laden Sie ein Bild Sehen Sie hier, unser Standardbild ist weg, aber unser ausgewähltes Bild wird nicht Der Grund ist hier, wir geben einfach unser Profilauswahlobjekt zurück, das nicht das Bild ist. Wir müssen dieses Objekt in ein Bild konvertieren, und wie können wir das einfach mit der Methode Creat Object URL tun? einfach mit der Methode Creat Object URL Aral Dot Create Object URL ist also eine Methode in JavaScript, mit der wir eine eindeutige URL für eine bestimmte Datei erstellen können eine eindeutige URL für eine bestimmte Datei erstellen Diese URL wird verwendet, um ein Bild im Bild-Tag anzuzeigen oder Audio- oder Videodateien im Media Player abzuspielen Beachten Sie, dass dies nur eine temporäre URL ist Wenn wir unsere Seite schließen, verschwindet sie. An der Stelle, an der dieser Profilspitze liegt, übergeben wir den Punkt Create Object URL und darin werden wir unser Bildobjekt, das Profil Peak ist, übergeben , die Änderungen speichern und einen Blick darauf werfen. Siehst du, hier bekommen wir unser ausgewähltes Bild. Sie können sehen, wie einfach und unkompliziert es ist, das Hochladen von Bildern in React durchzuführen. Damit füllen wir nun unseren Abschnitt für erweiterte Formulare aus. Im nächsten Abschnitt werden wir nun unsere React-Anwendung mit dem eigentlichen Backend verbinden , das ich für dieses Projekt erstellt habe. S im nächsten Abschnitt. 126. Abschnitt 12 Verbindung zum Backend: Willkommen im 12. Abschnitt des ultimativen React-Kurses. In diesem Abschnitt werden wir unsere React-Anwendung mit dem Backend verbinden . Ich habe dieses Backend speziell für diese Anwendung mit Nodejs, Express Js und MongoDB erstellt speziell für diese Anwendung mit Nodejs, Express Js und MongoDB , da Entwickler diese Technologien vor allem bei React-Anwendungen gerne verwenden Stelle möchte ich eines klarstellen : Wir werden Bend nicht entwickeln, weil es nicht Teil dieses Kurses ist und unser Hauptaugenmerk darauf liegt In der nächsten Lektion werden wir Mongo DB in unserem System, der Datenbank , installieren der Datenbank , Wenn Sie bereits Mongo Di B auf Ihrem Computer haben, Sie auch nach meinem Vorschlag, versuchen Sie auch nach meinem Vorschlag, die neueste Version von Mongo Di B zu installieren. Beginnen wir 127. MongoDB und Kompass in Windows installieren: Also lasst uns Mongo Di B unter Windows installieren. Wenn Sie einen Mac haben, können Sie diese Lektion überspringen. Gehen Sie also zunächst zu mongodib.com und schauen Sie sich diese Produkte an . Sie dann in der Community Edition Community Server Wählen Sie dann in der Community Edition Community Server aus. Scrollen Sie nach unten. Und hier können wir die MongoDB-Version auswählen. In meiner Empfehlung, ändern Sie es bitte nicht. Als Nächstes können wir unsere Plattform und dann das Paket auswählen. Mach dir darüber keine Sorgen. Klicken Sie einfach auf Herunterladen. Sehen Sie, wie der Download gestartet wird. Nachdem Sie den Download abgeschlossen haben, öffnen Sie das Setup und Sie werden nach der Installationsgenehmigung gefragt. Erlaube es. Klicken Sie auf Weiter, akzeptieren Sie die Vereinbarung, klicken Sie auf Weiter, klicken Sie auf Abschließen. Danach können Sie von hier aus Ihren Installationspfad ändern. Aber wenn Sie keinen Grund haben, ändern Sie ihn nicht. Klicken Sie einfach auf Weiter. Stellen Sie sicher, dass Sie diesen MongoDB-Kompass installieren auswählen ist die Anwendung für Mongo DB, in der wir alle Datenbanktabellen anzeigen und DM bearbeiten oder löschen können alle Datenbanktabellen anzeigen und DM bearbeiten oder löschen Klicken Sie auf Weiter und installieren Sie. Dies wird einige Zeit in Anspruch nehmen, etwa fünf bis zehn Minuten, da wir auch Mongo DB Compass installieren Lassen Sie uns dies nach Abschluss der Installation überprüfen. Geben Sie also in der Befehlszeile Mongo ein und drücken Sie die Eingabetaste. Wir bekommen diesen Fehler. Mongo wird nicht als interner oder externer Befehl erkannt Um diesen Fehler zu beheben, müssen wir erneut zur Mongo DB-Website gehen und hier oben, bei Produkten und in Tools, Produkten und in Tools, SeaCLNW auf Jetzt herunterladen klicken Und lade das einfach herunter. Öffnen Sie nun den Download-Ordner und die zusätzliche Punkt-Zip-Datei, die wir heruntergeladen haben. Öffnen Sie diesen Ordner und im Bin-Ordner erhalten wir die X-Datei von Mongo Also kopiere das und öffne das Laufwerk C. Programmdateien, MongoDB-Server, 6.0 Bean, füge es hier Diese Mongos sind unsere MongoDB-Zelle. Jetzt müssen wir nur noch einen letzten Schritt ausführen, nämlich den Pfad zur Umgebungsvariablen festzulegen Kopieren Sie diesen Pfad zu Beginn, suchen Sie nach der Umgebungsvariablen und öffnen Sie die Systemumgebungsvariablen. Klicken Sie nun auf diese Umgebungsvariablen und wählen Sie unter Systemvariablen den Pfad aus und klicken Sie auf Bearbeiten. Jetzt müssen wir diesen Bindpfad hier hinzufügen, auf Neu klicken und diesen Pfad eingeben. Klicken Sie auf Okay. Okay und okay. Starten Sie Ihre Eingabeaufforderung neu und öffnen Sie sie erneut. Genau hier, Mongos und drücke Enter. Wir werden die Mongo Di B-Zelle bekommen, also installieren wir Mongo Di B erfolgreich in Lassen Sie mich Ihnen nun einen kurzen Überblick über den Mongo Wenn wir diese Anwendung also zum ersten Mal öffnen, müssen wir unsere Verbindungszeichenfolge eingeben, die Lokaler Host lautet Schreiben Sie also diese Verbindungszeichenfolge, die ich schreibe, und klicken Sie auf Ccnect Siehst du, hier bekommen wir all unsere Datenbanken und Tabellen. 128. Backend einrichten: Nachdem wir MongoDB und Mongo DB Compass in unserem System installiert haben , ist es an der Zeit, unser Backend einzurichten und Daten in die Datenbank einzugeben Jetzt fragen Sie sich vielleicht, was dieses Backend benötigt und warum wir Daten in unsere Datenbank aufnehmen Wir haben also zuvor gesehen, wie man eine öffentliche API in React aufruft. Aber wenn wir Websites für Unternehmen erstellen, haben viele Unternehmen ihr eigenes Backend Also habe ich dieses Backend für unsere Anwendung erstellt, und auch nur das Backend wird Wir müssen unsere Produktdaten und Benutzerdaten in unserer Datenbank speichern Produktdaten und Benutzerdaten in unserer So können wir diese Daten abrufen und in unserer Anwendung anzeigen. Derzeit können wir in unserem Mongo Di B Compass sehen, dass wir nur eine vom System generierte Datenbank haben Wir müssen unsere eigene hinzufügen. Öffnen Sie den Ressourcenordner und im Ordner Project Three haben wir das Backend von Cartwis Öffne das und öffne es im VS-Code. Jetzt müssen Sie sich über nichts in diesem Backend Gedanken machen . Mach einfach wie ich und du bist bereit zu gehen. Also müssen wir zuerst alle Pakete installieren. Öffnen Sie also das Terminal und schreiben Sie NPM install und drücken Sie die Eingabetaste. Jetzt füge ich in diesem Datenpunkt jsnFle einige Daten für Produkte und Kategorien hinzu Um diese Daten in unsere Datenbank zu füllen, schreiben wir hier einfach Node Products, Punkt JS File und drücken Enter Und hier sehen Sie, dass wir Datenbank erfolgreich gefüllt oder wiederhergestellt haben. Lassen Sie uns das überprüfen. Wechseln Sie zu Mongodi, wir kompilieren und aktualisieren die Datenbank Und hier können wir die Catews-Datenbank sehen. Öffnen Sie das und in dieser Datenbank haben wir derzeit nur zwei Tabellen, Kategorien und Produkte Öffnen Sie die, und hier erhalten wir diese Kategoriendaten. Und wenn wir Produkte öffnen, erhalten wir Produktdaten. Von hier aus können wir diese Datensätze einsehen, aktualisieren und löschen. Jetzt können wir diesen Mongo D B-Kompass minimieren und in unserem Ben VS-Code Node Index Dot JS ausführen und C, wir bekommen, dass der Server auf Port 5.000 läuft und auch Lassen Sie uns überprüfen, ob diese API funktioniert oder nicht. Öffnen Sie einen neuen Tab im Browser und in der URL, schreiben Sie Local Host Column 5,000, weil unser Backend auf der API-Kategorie Local Host 5.000 läuft auf der API-Kategorie Local Host 5.000 läuft , und drücken Sie die Eingabetaste Siehst du, hier bekommen wir dieses Array mit allen Kategorien, also funktioniert es Schließt dieses Terminal nicht. Ohne dass dieses Terminal läuft. Wir können unsere React-Anwendung nicht mit Ben verbinden. Stellen Sie also sicher, dass es läuft, während wir API-Aufrufe tätigen. 129. Routing in unserer Anwendung implementieren: Bevor wir mit dem Patchen von Daten beginnen, implementieren wir nun das Routing in unserer Anwendung, da wir derzeit Komponenten manuell zu unserer App-Komponente hinzufügen müssen Komponenten manuell zu unserer App-Komponente Öffnen Sie also das Terminal und im neuen Terminal schreiben wir NPM, Install, React Router Dom bei 6.11 0.2 und Gut, minimiere dieses Terminal. Was ist nun der erste Schritt, um Routing anzuwenden? Richtig, wir müssen unsere Anwendung mit der Browser-Router-Komponente umschließen . Öffnen Sie also die Hauptkomponente und oben importieren wir den Browser-Router aus React Router Doom und umschließen unsere App-Komponente mit der Browser-Router-Komponente Speichern Sie die Änderungen und öffnen Sie nun die App-Komponente. Hier haben wir alle unsere Seiten, die wir erstellt haben, und deshalb habe ich Ihnen gesagt, dass diese Seiten hier auskommentieren sollen, damit wir nicht vergessen, Seitenkomponenten hinzuzufügen. Lassen Sie uns außerdem das gesamte Routing in einer separaten Komponente definieren. Andernfalls wird unser Code hässlich. Im Komponentenordner fügen wir einen weiteren Ordner namens Routing hinzu, und in diesem Routing erstellen wir eine neue Komponente namens Routing Dot JSX Fügen wir hier Boilerplate hinzu, und oben importieren wir zunächst Routen und Routen von React Lassen Sie uns nun diesen Betrag entfernen und fügen hier die Routenkomponente hinzu. Und innerhalb dieser Routen können wir unsere einzelne Routenkomponente hinzufügen. Aber vorher fügen wir alle Importe aus der App-Komponente hinzu. Hier schneiden wir alle Importe aus und fügen sie in unsere Routing-Komponente ein. Gut. Lassen Sie uns nun die Route definieren. Also zuerst den Pfad zum Schrägstrich weiterleiten, was die Startseite und das Element zur Startseite ist Danach fügen wir einen weiteren Routenpfad für Produkte und ein Element zur Produktseite hinzu Jetzt duplizieren Sie diese Route noch fünf Mal. Und hier fügen wir den Pfad zu den Produkten und ein Element zu einer einzelnen Produktseite Als Nächstes haben wir den Pfad zur Registrierung und das Element zur Anmeldeseite. Als Nächstes haben wir den Pfad zur Anmeldung und das Element zur Anmeldeseite. Als Nächstes fügen wir den Pfad zum Einkaufswagen und ein Element zur Warenkorbseite hinzu. Und endlich hatten wir einen Pfad zu meinen Bestellungen und ein Element zu meiner Bestellseite. Speichern Sie die Änderungen und legen Sie diese Routing-Komponente in unserer App-Komponente fest. Entfernen Sie also alle Seiten und fügen Sie hier einfach die Routing-Komponente hinzu. Meiner bescheidenen Meinung nach sollten Sie als Entwickler immer versuchen, Schritt für Schritt vorzugehen. Versuchen Sie nicht, alle Funktionen oder Aufgaben auf einmal zu implementieren . Auf diese Weise bleiben Sie weniger hängen und können klarer denken. Speichern Sie die Änderungen und lassen Sie uns sehen, wie das Routing funktioniert oder nicht. Siehst du, hier bekommen wir einen Fehler. Das liegt daran, dass wir den falschen Pfad betreten. Also müssen wir in der Routing-Komponente an der Stelle dieser Perioden-Slice-Komponenten der Stelle dieser Perioden-Slice-Komponenten einen Doppelpunkt hinzufügen. Wählen Sie dies aus und drücken Sie Strg+D oder Befehlstaste+D für die Bearbeitung mehrerer Cursors und fügen Sie hier einen Zeitraum hinzu. Sag die Änderungen und sieh sie dir an. Siehst du, hier bekommen wir unsere Homepage. Klicken Sie jetzt auf die Produktseite und sehen Sie, wir bekommen eine Produktseite, also funktioniert es. Aber wir müssen diese Links durch die NewLink-Komponente ersetzen NewLink-Komponente Also p Niemals Komponente, wir haben all diese Links im Link mit Icon-Komponente und diesen einen Link im Anker-Tag hier. Lassen Sie uns also diesen Anker durch die Newlin-Komponente ersetzen und HRF Speichern Sie dies und in Tinte mit der Symbolkomponente ersetzen wir den Anker durch die Newlin-Komponente und HRF 22. Sie können sehen, wie einfach wir unseren Code ändern können. Und deshalb speichern wir diesen Link in einer separaten Komponente. Speichern Sie das und lassen Sie uns CSS für den aktiven Link hinzufügen. In der Navbar-Punkt-CSS-Datei fügen wir hier also Punkt-NabarUnderscoe-Tinten, spitze Klammern, Anker und aktive Coli-Punktklammern hinzu und setzen die Schriftstärke und setzen Sagen Sie die Änderungen und schauen Sie sich das an. Wechsle die Seiten und sieh, hier bekommen wir unser Routing. 130. Produkte abrufen: wir nun unsere erste API zum Abrufen der Liste aller Produkte Und um die API aufzurufen, verwenden wir Axos, öffnen das Terminal, schreiben NPM install xOS und drücken Minimiere dieses Terminal und lass uns zunächst unsere API-Basis-URL für jede Anfrage definieren Also erstellen wir im Quellordner einen neuen Ordner namens Utils und in diesem Ordner erstellen wir eine neue Datei namens api Client Js Dies dient dazu, StdprQuest mit Xos zu erstellen. Denken Sie daran, wir haben das bereits erstellt. In diese Datei geben wir Xos von Xos ein und danach schreiben wir Xos dot RET Pass hier unser In diesem Objekt haben wir die Basis-URL-Eigenschaft. Und hier können wir unsere Basis-URL übergeben. Hier lautet unsere Basis-URL also SDDP-Spalte, lokaler Host mit doppeltem Schrägstrich, Spalte 5.000 Schrägstrich-API Spalte 5.000 Jetzt können wir hier auch unsere API-Header übergeben , die Sie mit senden möchten Auch hier hängt es von der API ab. Wenn Sie Frontend-Entwickler sind, erhalten Sie alle API-Details von Backend-Entwicklern Darüber müssen Sie sich keine Sorgen machen. Ich werde unsere API-Dokumentation im Ressourcenordner verlinken , oder Sie können sie aus den Anhängen herunterladen. Lassen Sie uns das jetzt als Standard exportieren. Speichere das. Und wenn wir jetzt eine API-Anfrage mit AXIOS stellen möchten, wir einfach diesen API-Client ein und tun dasselbe wie bei originalen XOs Wenn wir also eine Produktseite haben, müssen wir hier entscheiden, wo wir die API für Produkte aufrufen müssen In unserer Produktlistenkomponente zeigen wir also alle unsere Produkte an. Also können wir hier unsere API aufrufen. Zuallererst müssen wir in dieser Komponente eine Statusvariable zum Speichern der Produktliste erstellen . Schreiben Sie also use und drücken Sie die Tabulatortaste für den Import von ust und schreiben Sie uns Snippets und geben Sie ihr einen Namen, Produkte, Produktset, und als Standardwert übergeben wir hier ein leeres Array Erstellen Sie jetzt auch eine weitere Zustandsvariable namens error und setzen Sie Fehler Und als Standardwert übergeben wir eine leere Zeichenfolge. In dem Hook, in dem wir unsere Produkt-API nennen, nennen wir unsere API in Use Effect Hook , weil wir Daten abrufen müssen , wenn die Komponente übergeben wird. Verwenden Sie also Effect und darin befinden sich Callback-Funktion und der zweite Parameter für das Abhängigkeitsarray Rufen wir nun unsere API auf. Oben importieren wir den API-Client , der gerade vom Utils-API-Client definiert Fügen wir nun hier den API-Client-Punkt Get now hinzu. Darin übergeben wir unsere URL, übergeben wir unsere URL, sich um Slash-Produkte handelt Dieser Ausdruck gibt ein Versprechen zurück. Also dann Antwort, Pfeilfunktion, Produkte einstellen. Jetzt müssen wir hier unser Produktsortiment weitergeben. Um diese Antwort zu überprüfen, öffnen Sie einen neuen Tab im Browser und schreiben Sie unsere GAT-Methode. Lokaler Host, Spalte 5.000 API-Schrägstrich Produkte und drücken Sie die Eingabetaste Und sehen Sie hier, wir erhalten dieses Antwortobjekt mit einer Reihe von Eigenschaften Machen wir uns vorerst keine Sorgen darüber. Wir erledigen jeweils nur eine Aufgabe. Also zurück zum VS-Code, und hier übergeben wir Antwortpunktdaten, was unser Objekt ist, und wir erhalten hier Punktprodukte. nun Fehler zu behandeln, fügen wir die Catch-Methode hinzu, und hier erhalten wir Fehler, Fehlerfunktion und setzen Error auf Error Dot Message. Lassen Sie uns nun sehen, ob wir unsere Produktdaten bekommen oder nicht. Speichern Sie die Änderungen und kehren Sie zu unserer Anwendung zurück. Öffnen Sie die Entwicklertools und öffnen Sie hier den Komponentenschritt. Suchen Sie in der Produktliste, und hier erhalten Sie unsere Produktliste. Wählen Sie das aus und sehen Sie, in diesem Zustand erhalten wir unsere Produktpalette acht Produkten, also funktioniert sie. Lassen Sie uns diese Produkte nun auf einer Karte anzeigen. Statt der vielen Produktkarten erhalten wir bei der Produktpunktzuweisung ein einzelnes Produkt, eine Fehlerfunktion, und wir geben einfach die Produktkomponente zurück und vergessen nicht, der Produktpunkt-Underscore-ID, der eindeutigen ID für alle Produkte , ein identifizierendes Attribut hinzuzufügen Produktpunkt-Underscore-ID, der eindeutigen ID für alle Produkte , ein identifizierendes Attribut der eindeutigen ID für alle Produkte , ein Speichern Sie die NGs und schauen Sie sich das an. Siehst du, hier bekommen wir eine Karte mit acht Produkten. Lassen Sie uns den Fehler für diese API-Anfrage behandeln. Vor dieser Produktliste fügen wir also eine Bedingung hinzu. Wenn ein Fehler vorliegt, drucken wir diesen Fehler hier aus. Betonen Sie also das Tag und geben Sie ihm einen Klassennamen für den Fehler. Und hier fügen wir diesen Fehler hinzu. Lassen Sie uns nun einen Fehler generieren. Also machen wir an der Stelle dieser API-URL Tippfehler, speichern die Änderungen und werfen einen Blick darauf, drücken die Seite erneut und sehen, dass wir hier diesen Fehler bekommen Perfekt. Lassen Sie uns diesen Tippfehler entfernen In der nächsten Lektion werden wir nun unsere Produktkartenkomponente dynamisch gestalten unsere Produktkartenkomponente dynamisch 131. Produktkarte dynamisch machen: Lassen Sie uns nun unsere Produktkartenkomponente dynamisch machen und ein einzelnes Produktobjekt öffnen, einzelnes Produktobjekt öffnen, nur um zu sehen, was sich darin befindet. Hier haben wir Rezensionen, die wir hier anzeigen, Unterstrich-ID, Titelbild ist Array Wir brauchen kein Array, wir brauchen nur das erste Bild für das Poster. Danach haben wir Preis und Lagerbestand. Also Produktkarten-Komponente, und hier fügen wir zuerst alle Requisiten hinzu, die wir in dieser Komponente benötigen St-Struktur-Requisiten. Zuerst bekommen wir Ausweise, dann Bilder. Danach brauchen wir den Preis. Danach zählen Titel, Bewertung, Bewertung und schließlich brauchen wir Aktien. Lassen Sie uns nun die statischen Werte durch diese Requisiten ersetzen. An der Stelle dieses iPhones fügen wir ein Bild hinzu. Danach fügen wir hier den Preis hinzu. Dann fügen wir hier den Titel hinzu. Danach zählt die Bewertung und hier die Bewertung. Jetzt zeigen wir diese Kopf-zu-Karten-Schaltfläche nur noch, wenn der Aktienkurs größer als Null ist. Sehen Sie sich diese Taste an und drücken Sie die linke geschweifte Klammer. Dadurch wird unser Code in CLI-Klammern gesetzt. Wenn Sie die rechten Klammern drücken, wird dieser Code durch die rechte Culi-Klammer ersetzt Hier bestehen wir die Bedingung. Wenn der Lagerbestand größer als Null ist, dann zeige nur diese Schaltfläche von Kopf zu Karte an. Jetzt oben, leider haben wir vergessen, die Produkt-ID in diesen Link einzufügen. Also entfernen wir dieses Anker-Tag und fügen hier einen neuen Link oder eine Linkkomponente und ein Attribut zu geschweiften Klammern hinzu, Batak, Schrägstrich, Produkt, Schrägstrich, Dollar-ID Damit sind wir mit der Produktkartenkomponente fertig. Jetzt müssen wir nur noch diese Requisiten an die Produktkarte weitergeben. Also oben entfernen wir diesen Bildimport, speichern diese Datei und öffnen die Produktlistenkomponente Hier nach diesem Schlüssel übergeben wir die ID an die Produktpunkt-Unterstrich-ID, das Bild an das Produktpunktbild und hier erhalten wir das erste Bild Preis zu Produkt Punktpreis, Titel zu Produkt, Titel, Bewertung zum Produkt Punkt Rev. Punkt Punkt Punkt Die Anzahl der Bewertungen entspricht der Anzahl der Punkte im Vergleich zum Produkt. Und von Lager zu Produkt Punkt Lager. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie hier, wir bekommen alle Details, aber wir bekommen kein Bild. Mal sehen, warum wir dieses Bild nicht bekommen. Klicken Sie mit der rechten Maustaste auf das Bild, wählen Sie das Bild aus, öffnen diese DU und im Anchor-Tag haben wir unser Bild. Hier können wir sehen, dass wir nur den Bildnamen in der Quelle übergeben. Wir müssen hier die Bild-URL übergeben. Ich hatte bereits Details dazu in der API-Dokumentation. Also fügen wir in unserer Produktkartenkomponente an der Stelle dieses Bildes, Bates, an der Stelle dieses Bildes, Bates, hier HTTP hinzu, Spalte Double für unseren Schrägstrich, Lokaler Host, Spalte 5.000 Schrägstrich „Produkte“ hier fügen wir den Namen unseres Produktbildes hinzu. Also Dollar Image, nimm die Änderungen vor und sieh es dir an. Sehen Sie hier, wir bekommen unser Bild. 132. Kategorien abrufen: Lassen Sie uns nun alle Kategorien abrufen und sie in dieser Seitenleiste anzeigen Also bei der Seitenleistenkomponente der Produkte, und hier machen wir dasselbe auch beim Abrufen Zunächst erstellen wir mit Just Hook eine State-Variable und geben ihr einen Namen, Kategorien und festgelegte Kategorien Und standardmäßig übergeben wir ein leeres Array. Danach erstellen wir eine weitere Zustandsvariable namens errors and set errors und übergeben eine leere Zeichenfolge als Standardwert. Rufen wir nun unsere verwendete API Effect Hook auf. Verwenden Sie also Effect, und darin fügen wir eine Callback-Funktion hinzu, und hier fügen wir einfach ein leeres Array als Abhängigkeit Lassen Sie uns nun oben den API-Client zum Aufrufen der API importieren. Hier gehen wir zu Fullers Up, Utils und API-Client. Gut. Jetzt rufen wir hier die Methode Dot Get des API-Clients auf. Hier übergeben wir unsere API-URL, sich um einen Schrägstrich handelt, und wir wissen, dass dieser Ausdruck ein Versprechen zurückgibt Wir behandeln Versprechen mit dieser Methode. Hier erhalten wir die Antwort, Pfeilfunktion und legen Kategorien für Antwortpunktdaten fest. Zur Behandlung von Fehlern fügen wir nun die Cache-Methode hinzu. Hier erhalten wir Fehler, Fehlerfunktion und setzen Fehler auf Error Dot Message. Speichern Sie die Scharniere und schauen Sie sich das an. Öffnen Sie die Entwicklertools und öffnen Sie die Registerkarte Komponenten. Suchen Sie hier in der Seitenleiste nach Produkten und sehen Sie, wo wir unsere Kategorien finden. Lassen Sie uns sie jetzt auf unserer Seite anzeigen. Also zurück zum VS-Code. Und hier fügen wir Kategorien Dot MAP hinzu. Darin finden wir eine Fehlerfunktion für einzelne Kategorien, und wir schneiden einfach diesen Link mit Symbolkomponente ab und geben ihn hier zurück. Und bevor wir es vergessen, fügen wir den Schlüssel hinzu, der der Unterstrich-ID der Kategorie entspricht. Jetzt ändern wir unseren Titel in einen Punktnamen der Kategorie. Und wir umschließen unseren Link mit Cali-Klammern und ändern ihn in Batis und an der Stelle dieser Elektronik fügen wir einfach Dollar Cali Brackets und den Punktnamen der Kategorie An der Stelle dieses Bildes E übergeben wir nun unsere Also in Steuern, STDP, Spalte doppelt vier, Schrägstrich, Lokaler Host, Spalte 5.000, Kategorie, Schrägstrich und hier fügen wir unser Also Kategorie Punktbild. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Kategorien. Lassen Sie uns nun den Fehler anzeigen. Vor unserer Kategorienliste fügen wir eine Bedingung hinzu. Falls ein Fehler vorliegt, geben Sie den Fehler im Hervorhebungs-Tag und im Klassennamen als Fehler aus, und wir fügen hier einfach den Fehler hinzu. Lassen Sie uns nun Tippfehler machen, die Änderungen speichern und einen Blick darauf werfen, die Seite aktualisieren und sehen, dass wir hier unseren Fehler bekommen Entferne diesen Tippfehler und sieh zu, dass wir unsere Kategorien bekommen. 133. Benutzerdefinierter Hook für das Abrufen erstellen: Wie wir nun sehen können, sind das Abrufen Produkten und das Abrufen von Kategorien fast identisch Der Unterschied besteht nur darin, dass es sich um eine PIURL handelt. So können wir unseren eigenen benutzerdefinierten Hook erstellen , den wir für fast alle Abrufdetails verwenden können. Einige Entwickler halten benutzerdefinierte Hooks für ein beängstigendes Konzept, aber es ist wirklich einfach Benutzerdefinierte Hooks sind also im Grunde eine wiederverwendbare Funktion. Einfach ausgedrückt sind benutzerdefinierte Hooks unsere eigenen Hooks, die wir für unseren eigenen Gebrauch erstellen, und wir können sie in unserem Projekt mehrfach verwenden. Lassen Sie mich das hier im Quellordner zeigen, wir erstellen einen weiteren Ordner namens Hooks. Jetzt erstellen wir in diesem Ordner eine neue Datei namens sedata dot js Jetzt denkst du vielleicht, warum ich hier die Erweiterung dot js anstelle von dot JSX verwende Erweiterung dot js anstelle von dot JSX Der Grund, warum ich die Erweiterung Hear Dot JS verwende , ist, dass wir in diesem benutzerdefinierten Hook kein JSX verwenden werden Wir werden unsere Logik in einfachem JavaScript schreiben. Lassen Sie uns den Boilerplate-Code setzen und diese Rückgabeanweisung entfernen Wir wollen JSX hier nicht zurückgeben. Jetzt schneiden wir von unserem Produkt Seite für Komponente die Datumsvariablen aus und verwenden von hier aus den Effekt-Hook und fügen ihn in unsere benutzerdefinierte Hook-Komponente Jetzt oben importieren wir den Use-Effekt und haben ihn als Hook verwendet. Und geben Sie auch den API-Client vom Utils-API-Client ein. Da wir diesen benutzerdefinierten Hook zum Abrufen von Daten aus der API verwenden , ist es besser, diesen Datenvariablennamen in Daten umzubenennen Sehen Sie sich also diese Kategorien an und drücken Sie F zwei, genau hier, Daten. Und benenne diese festgelegten Kategorien auch um, um Daten festzulegen. Und hier übergeben wir Null als Standardwert , weil wir diese Daten nicht nur zum Speichern von Arrays verwenden. Wir können auch Objekte in diesen Daten speichern. Jetzt müssen wir nur noch diese API-URL ändern. Also ersetzen wir diese URL durch eine URL-Variable und erhalten diese URL-Variable auch als Parameter. Gut. Von dieser benutzerdefinierten Hook-Funktion aus geben wir jetzt einfach Daten und Fehlervariablen zurück. Speichern Sie diese Datei und in der Seitenleistenkomponente des Produkts Hier rufen wir einfach unseren benutzerdefinierten Hook auf, verwenden Daten und übergeben unseren Endpunkt, die Slash-Kategorie Dieser Hook gibt nun ein Objekt mit Daten und Fehlern zurück. So können wir das Objekt destrukturieren und hier Daten und Fehler abrufen Außerdem können wir diese Daten in Kategorien umbenennen. Und hier vor unserer Kartenfunktion fügen wir eine Bedingung hinzu, wenn Kategorien nicht Null sind, führen dann diese Kartenfunktion , weil der Standardwert dieser Daten Null ist und wir die Kartenmethode nicht für Null ausführen möchten. Es kann uns Fehler geben. Lassen Sie uns nun diese unerwünschten Importe entfernen, den Import auswählen, den Sie entfernen möchten , drücken Sie Strg plus Punkt oder Befehl plus Zeitraum und wählen Sie Alle ungenutzten Importe löschen. Siehst du, alle unerwünschten Importe sind weg. Lassen Sie uns das auch entfernen. Speichern Sie die Gene und schauen Sie sich das an. Siehst du, wir bekommen das gleiche Ergebnis wie zuvor. Lassen Sie uns nun unseren benutzerdefinierten Hook verwenden, um Produktdaten abzurufen. Also eine Produktlistenkomponente und entferne diese Variablen und verwende Effect Hook. Und hier nennen wir Use Data Hook und Pass und Point-to-Slice-Produkte. Gibt Daten und Fehler zurück und wir können diese Daten in Produkte umbenennen. Und wir können hier auch eine Bedingung hinzufügen , wenn das Produkt nicht Null ist, und erst dann diese Zuordnungsmethode ausführen. Und endlich entfernen wir all diese unerwünschten Importe und entfernen auch diese geschweiften Klammern Speichern Sie die Änderungen und wir erhalten eine Fehlermeldung. Lassen Sie uns die Konsole öffnen und hier sehen, dass wir Produkte bekommen. Punkt Map funktioniert nicht weil wir in unserem Use-Data-Hook unsere Antwort-Punktdaten in dieser festgelegten Datenfunktion speichern. Aber von der Produkt-API erhalten wir ein Antwortobjekt mit einigen Eigenschaften. Erinnerst du dich, lass es mich dir zeigen. Konsultieren Sie diese Produkte einfach hier. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir dieses Datenobjekt. Und in diesem Objekt haben wir eine Reihe von Produkten. Wir können hier also Datenpunktprodukte verwenden, oder wir können dieses Datenobjekt umstrukturieren und daraus Produkte herstellen. Ich denke, Restrukturierung ist für uns etwas verwirrend. Lassen Sie uns das jetzt oben entfernen, wir ändern diese Produkte Datenpunktprodukte und auch hier in Datenpunktprodukte. Und ganz oben konsolieren wir einfach Punktprotokolldaten mit diesen Daten. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Derzeit erhalten wir unsere Produkte. Lassen Sie uns nun die Seite aktualisieren und sehen, dass wir eine Fehlermeldung erhalten. In den Entwicklertools und in der Konsole erhalten wir die Fehlermeldung, dass die Eigenschaft Null nicht gelesen werden kann. Mal sehen, was hier passiert. Zuallererst übergeben wir in unserem Use-Data-Hook Null als Standardwert. Jetzt, zu dem Zeitpunkt, an dem unsere Daten Null , versuchen wir hier in diesem Zustand, sind, versuchen wir hier in diesem Zustand, auf Data Dot-Produkte zuzugreifen, und aus diesem Grund erhalten wir diesen Fehler. Und danach, wenn wir Daten vom Backend abrufen, erhalten wir diese Daten in unserer Konsole können wir in diesem Zustand eine Dafür können wir in diesem Zustand eine optionale Verkettung einrichten Wenn also Data Question Mark Dot Products verfügbar sind, führen Sie diese Schleife erst dann aus Die Änderungen und schauen Sie sich das an. Siehst du, jetzt funktioniert unser Code gut. Sie können also sehen, wie wir Fehler beheben können , indem wir sie einfach in kleine Teile zerlegen. Zuallererst müssen wir wissen, warum wir diesen Fehler bekommen, und dann müssen wir die beste Lösung dafür finden. Geraten Sie nicht in Panik , wenn Sie Fehler sehen. Fehler werden immer auftreten. Es liegt an dir, wie du damit umgehst. 134. Ladeskeleton hinzufügen: Derzeit funktioniert unsere Produktseite einwandfrei. Wir haben eine gute Internetverbindung und wir erhalten auch Daten vom lokalen Server. Wir bekommen also sehr schnell Daten. Aber stellen Sie sich vor, wenn die Benutzerverbindung langsam ist oder unser Server lange braucht, dann sieht diese Produktseite nicht gut aus. Lass es mich dir zeigen. Öffne die Konsole und wir kommen zur Warnung. Mal sehen, hier bekommen wir den Schlüssel fehlt. Also auf der Produktseite, aber in der Komponente in diesem Link mit der Symbolkomponente oben, fügen wir das identifizierende Attribut hinzu und übergeben hier die Unterstrich-ID mit einem Kategoriepunkt Speichern Sie das und sehen Sie hier, dass die Warnung weg ist. Öffnen Sie nun den Netzwerk-Tab und wählen hier Schritt drei G. Aktualisieren Sie die Seite. Und hier können wir sehen, dass es nicht gut aussieht, ohne dass wir beim Abrufen Ladeskelett zeigen können Es sieht aus wie. Sie können sehen, dass fast alle modernen Websites diese Ladeskelette Lassen Sie uns also zunächst dieses Ladeskelett erstellen. In unserem Produktordner erstellen wir also eine neue Komponente namens Product Card Skeleton Dot JSX Lassen Sie uns den Aktualisierungscode einrichten. Skelett zu erstellen, können wir nun CSS oder Library verwenden Die Wahl liegt bei dir. Was möchtest du benutzen? Ich benutze die Bibliothek gerne , weil sie einfach zu benutzen ist. Wenn Sie ein Skelett von Grund auf neu erstellen möchten, können Sie sich diese Tutorials ansehen. Ich werde den Link im Ressourcenordner ablegen. Und im neuen Terminal rechts NPM das Skelett laden und Enter drücken Gut. Jetzt importieren wir oben das Skelett aus der Skelettbibliothek von React Loading. Und danach diese Datei. Es werden also CSS-Kacheln für diese Skelettkomponente hinzugefügt. Also importiere Reac Loading Skeleton, Dist Skeleton, Dot CSS Nun, von dieser Komponente wir einfach diese Skeleton-Komponente zurück und lassen Sie uns sehen, was wir bekommen Speichern Sie das. Und in unserer Produktlisten-Komponente in dieser Produktliste sterben, fügen wir unser neues Komponenten-Produktkarten-Skelett hinzu. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier haben wir ein kleines Ladeskelett, aber wir können es nicht sehen. es groß zu machen, müssen wir also Stile für diese Skelettkomponente hinzufügen. Also zurück zu unserer Skelettkomponente, wir können hier Stile hinzufügen, und wir können auch eine Klasse hinzufügen, sodass wir der Produktunterstrichkarte den Klassennamen hinzufügen Produktunterstrichkarte den Klassennamen Und für dieses Skelett müssen wir die Breite extern hinzufügen, denn standardmäßig ist Skelett, Breite 200% hinzufügen Lass es mich dir zeigen. Speichern Sie das und sehen Sie hier, dass wir alle anderen Eigenschaften bekommen, aber nicht die Breite. Sie können es überprüfen, indem Sie es überprüfen. Also zurück zu unserer Komponente und füge hier 275 Pixel hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier haben wir dieses Skelett, genau wie die Produktkarte. Fügen wir nun mehrere Ladeskelette hinzu. In der Produktlistenkomponente können wir dieses Skelett mehrmals duplizieren, aber das ist eine schlechte Praxis. Also entfernen wir oben dieses Protokoll, und hier erstellen wir ein Array namens Skeletons und übergeben hier eins, zwei, drei, vier, fünf, sechs, sieben und acht Jetzt fügen wir in unserer JSX Skeletons Dot Map hinzu Hier erhalten wir jede Nummer und geben einfach das Skelett der Produktkarte zurück Und weiter, Schlüssel ist gleich Zahl. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier haben wir acht Ladekarten. Lassen Sie uns jetzt Ladelogik verkaufen. In unserem Use-Data-Hook erstellen wir also eine neue Zustandsvariable call is loading und set is loading. Und als Standardwert setzen wir ihn auf False. Bevor wir nun unsere API aufrufen, setzen wir E loading einfach auf true. Und nachdem wir unsere Daten mit der Methode hierher gebracht haben, fügen wir den CD-Block hinzu, und hier setzen wir is loading auf false. Außerdem setzen wir Es loading auf false, falls wir eine Fehlermeldung erhalten. Also füge hier den Codeblock hinzu und setze E loading auf false. Gut. Jetzt können wir es einfach von hier aus wieder laden damit wir in unseren Komponenten darauf zugreifen können. Speichern Sie die Änderungen, und in der Produktlistenkomponente ganz oben destrukturieren wir hier die Eigenschaft Und hier übergeben wir einfach die Bedingung, wenn es loading wahr ist, erst dann zeigen wir diese Skelette Speichern Sie die Änderungen und schauen Sie sich um, laden Sie die Seite neu und sehen Sie wie schön es aussieht, wenn das Skelett geladen wird So wirken sich kleine Funktionen stärker auf die Benutzererfahrung aus. 135. Produkte nach Kategorie abrufen: Derzeit haben wir unsere Produktdaten und auch Kategorien Wenn wir jetzt auf eine Kategorie klicken, möchten wir Produkte abrufen, die dieser Kategorie entsprechen Ich denke, wir haben in diesem Link einen Fehler gemacht. Also zurück zum VS-Code und in der Produkt-Seitenleistenkomponente hier in diesem Link müssen wir Slash-Produkte hinzufügen Wenn wir nur Produkte hinzufügen, wird dieser Link zur aktuellen URL wie folgt hinzugefügt Vergessen Sie also nicht, diesen Schrägstrich hinzuzufügen. Speichern Sie dies und kehren Sie zu unserer Seite zurück, klicken Sie auf Kategorie. Sehen Sie, dass es eine Abfragezeichenfolge hinzufügt. Jetzt wollen wir Produkte dieser Kategorie abrufen. Also zurück zur Produktlistenkomponente, und ganz oben in unserer API-Anfrage müssen wir nur die Kategorie als Abfrageparameter übergeben Jetzt fragen Sie sich vielleicht, wie wir den Abfrageparameter übergeben können. Es gibt also zwei Möglichkeiten, das zu tun. Wir können unsere Kategorie einfach so in unserem Endpunkt übergeben . Oder wir können das Configure-Objekt in diesem Use-Datenhook übergeben. Die Wahl liegt ganz bei Ihnen. Ich persönlich übergebe gerne das Konfigurationsobjekt, weil wir vorerst nur Abfrageparameter übergeben müssen. Aber wenn wir in Zukunft etwas mehr übergeben wollen , dann müssen wir definitiv configure object verwenden, und zu diesem Zeitpunkt wird unser Code durcheinander gebracht Es ist also besser, configure object zu verwenden. In diesem Use-Data-Hook übergeben wir also Objekt an das zweite Argument, und darin übergeben wir params, was das Objekt ist, und hier können wir alle unsere Abfrageparameter übergeben Also vorerst Kategorie zwei, lassen Sie uns Laptops weitergeben. Jetzt müssen wir dieses Objekt zu unserem Use-Data-Hook hinzufügen. Speichern Sie diese Datei und öffnen Sie die Datei us data dot js. Und hier bekommen wir das Objekt Configure, und wir nennen es eine benutzerdefinierte Konfiguration. Auch hier ändern wir den Namen dieses URL-Parameters in Endpoint. Ich denke, das könnte spezifischer sein. Jetzt ändern wir hier diese URL in Endpoint und übergeben hier einfach unser benutzerdefiniertes Konfigurationsobjekt . So einfach ist das. Sag die Änderungen und sieh sie dir an. Siehst du, hier bekommen wir nur Laptop-Details. nun in unserer Produktliste Wenn wir nun in unserer Produktliste Smartphones weitergeben, erhalten wir nur Daten von Smartphones. Wir übergeben also erfolgreich Kategorieabfragezeichenfolge in unserem API-Aufruf. An der Stelle dieses hartcodierten Werts müssen wir nun die Kategorie aus der URL übergeben. Erinnerst du dich, wie wir die Abfragezeichenfolge bekommen? Richtig? Wir verwenden Suchparameter Wir haben diese im Abschnitt Routing gesehen. Also fügen wir hier use-Suchparameter hinzu, und das gibt alle Abfrageparameter zurück Also Nachteile von Array, und hier bekommen wir Search und Set Search Lassen Sie uns die Abfragezeichenfolge für die Kategorie aus dieser Suche abrufen. Die Kategorie Const entspricht also dem Suchpunkt gt. Und hier übergeben wir den Namen unserer Abfragezeichenfolge , der Kategorie lautet An der Stelle dieser Smartphones fügen wir nun eine Kategorievariable hinzu. Oder wir können diese Kategorie auch entfernen. Warum? Weil Name und Wert identisch sind. Speichern Sie die Änderungen und schauen Sie sich das an. Aktualisiere die Seite und sieh, hier bekommen wir unsere Spielekonsolen. Wenn du zu Kopfhörern wechselst, aktualisiere die Seite. Siehst du, hier bekommen wir alle Kopfhörer-Produkte. Es funktioniert also, aber wir müssen jedes Mal aktualisieren, wenn wir die Kategorie wechseln, und das ist nicht gut. Also lass uns das beheben. Also hier müssen wir diese Kategorie als Abhängigkeit in unsere übergeben, also in diesem Use-Data-Hook übergeben wir das Abhängigkeitsarray am dritten Parameter und fügen hier eine Kategorie hinzu, übergeben wir das Abhängigkeitsarray am dritten Parameter und fügen weil wir Use-Effekt abrufen wollen, wenn sich die Kategorie ändert. Sagen wir das und in use data hook erhalten wir zuerst das Abhängigkeits-Array als Deps und an der Stelle dieses leeren Arrays übergeben wir Deps Wenn wir jetzt nur Deps verwenden, dann müssen wir in allen Benutzerdatenfunktionen ein Abhängigkeitsarray übergeben, was wir nicht wollen Also hier stellen wir einfach eine Bedingung. Wenn Deps verfügbar ist, erst dann Deps hinzu, andernfalls fügen wir ein leeres Array hinzu, so einfach ist Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, jetzt müssen wir unsere Seite nicht aktualisieren. Wir können von Kategorie zu Kategorie navigieren. 136. Seitennummerierung: Derzeit erhalten wir nur acht Produkte, aber in der Datenbank haben wir 24 Produktdetails Warum gebe ich nur acht Daten vom Server zurück? Das liegt daran, dass dies eine Technik ist , mit der wir die Datenlast in der API reduzieren können. Lassen Sie mich Ihnen erklären, warum. Derzeit ist unsere Anwendung sehr klein. 24 Daten sind keine große Sache. Aber stellen Sie sich vor, wenn unsere Anwendung wächst, könnten wir 1.000 oder 10.000 Produkte wie Amazon anbieten. Wenn wir also zu diesem Zeitpunkt alle Produktdetails in einem API-Aufruf erhalten , wird es länger dauern, und das wird dem Benutzer keine bessere Erfahrung bieten. Anstatt also alle Daten in einer einzigen Anfrage zu erhalten, teilen wir Entwickler sie in Seiten auf, als ob wir nur acht oder zehn Daten in einer einzigen Anfrage erhalten. Wenn der Benutzer mehr Daten benötigt, rufen wir die nächsten zehn Daten ab Also hier ist die Seiteneinleitung, die wir erstellen werden. Auf der ersten Seite haben wir nur acht Datensätze. Wenn wir danach auf die zweite Seite klicken, erhalten wir die nächsten acht Daten, so einfach ist das. Bisher müssen wir beim Abrufen anderer Seitendaten nur die Abfragezeichenfolge für Seitenparameter übergeben und auf diese Seitennummer setzen. Lass es mich dir zeigen Gehen Sie also zur Produktseite. Sie können diese Produkte notieren. Und jetzt fügen wir in unserem Param-Betreff eine Seite hinzu, sagen wir zwei Speichern Sie die Änderungen und schauen Sie sich das an. Sie können hier sehen, dass wir weitere acht Produktdaten erhalten. Wenn wir die Seite auf drei ändern, erhalten wir weitere Produktdaten. Jetzt, wo wir diese Seite fest codiert haben, können wir sie auch in unsere Abfragezeichenfolge aufnehmen. Hier schreiben wir also, dass die Seite C dem Suchpunkt „get“ entspricht. Und hier übergeben wir unseren Parameternamen, der page ist. Jetzt können wir die Seite auf diese Seite setzen. Und zur Vereinfachung können wir diese Seite entfernen. Vergessen Sie nicht, die Seite in diesem Abhängigkeitsarray zu übergeben. Andernfalls wird Use Effect nicht ausgeführt, wenn wir die Seitenzahl ändern . Speichern Sie das. Und jetzt wollen wir sehen, wie wir die Seitenzahl in unserer Abfragezeichenfolge festlegen können. Dafür haben wir hier die Suchfunktion eingestellt. Für Demonstrate temporary erstellen wir also eine Schaltfläche unter dieser Produktliste mit dem Namen Seite zwei. Und beim Klicken auf die Schaltfläche geben wir die Pfeilfunktion weiter, und hier nennen wir Handle Page Change. Und geben Sie hier unsere Seitenzahl weiter, die zwei ist. In dieser Funktion schreiben wir nun unsere Seitenlogik und setzen den Seitenparameter auf diese Seitennummer. Definieren wir diese Funktion oben. Also const, kümmere dich um den Seitenwechsel. Hier bekommen wir unsere Seite als Parameter, Pfeilfunktion, und darin setzen wir einfach die Suche auf Objekt, Seite auf diese Seite Mal sehen, ob es funktioniert oder nicht. Kehren Sie zur Produktseite zurück und klicken Sie auf diese Seite, um die Schaltfläche zu öffnen. Siehst du, wir bekommen die Daten der zweiten Seite, und auch in unserer URL können wir Seite zwei sehen. Hier ist ein kleiner Fehler, wählen Sie eine Kategorie aus und klicken Sie dann auf diese Seite, um sie zu ändern. Und siehe da, wir sind wieder auf unserer Seite mit einfachen Produkten mit Seite zwei. Sie können es überprüfen, indem Sie sich diese URL ansehen. Siehst du, wenn wir auf eine Kategorie klicken, haben wir eine Kategorie in unserer URL, und wenn wir auf die Schaltfläche Seite klicken, verschwindet unsere Kategorie und nur wir bekommen Seite zwei. Warum das passiert, lassen Sie uns das überprüfen. In unserer Funktion zum Ändern der Seite bearbeiten haben wir Surge also nur auf diese Seite eingestellt. Dadurch werden alle anderen Abfrageparameter aus URL ersetzt und Seite zwei gesetzt. Um das zu lösen, müssen wir also alle vorherigen Werte zu dieser eingestellten Suchfunktion hinzufügen . Und dann müssen wir Seite zwei hinzufügen. Vorher erstellen wir also eine neue Variable const, aktuelle Parameter, die dem Objekt Punkt aus Einträgen entspricht Und darin übergeben wir ein Array, und darin werden wir die Suche neu Mal sehen, was wir in den aktuellen Parametern bekommen. Die Konsole protokolliert also die aktuellen Parameter. Speichern Sie die Änderungen, öffnen Sie die Konsole, wählen Sie die Kategorie aus und klicken Sie dann auf die Schaltfläche Seite zwei C in der Konsole, hier bekommen wir diese Kategorie. Dieser Ausdruck gibt ein Abfragezeichenfolgenobjekt zurück, das in dieser Suchzeichenfolge verfügbar ist. Wir können dieses Objekt also einfach mithilfe der Objektstrukturierung vor dieser Seite hinzufügen mithilfe der Objektstrukturierung vor dieser Speichern Sie die Änderungen, und hier können wir sehen, dass wir die Kategorie ändern und auf Seite zwei klicken, dann enthält unsere URL die gesamte Abfragezeichenfolge Sie fragen sich vielleicht, warum wir hier keine Daten erhalten. Das liegt daran, dass wir in dieser Kategorie keine Seite zwei haben, was bedeutet, dass es in dieser Kategorie weniger als acht Produkte gibt . Aber in der URL können wir sehen, dass unsere Kategorie immer noch da ist. Also haben wir unsere Paginierungslogik angewendet. Jetzt benötigen wir nur noch die Benutzeroberfläche für die Paginierung, die wir in der nächsten Lektion erstellen 137. Paginierungs-UI erstellen: Lassen Sie uns nun die Pagination-Komponente zum Hinzufügen der Pagination-Benutzeroberfläche erstellen zum Hinzufügen Im gemeinsamen Ordner erstellen wir also eine neue Datei namens Pagination Dot CSS und auch eine neue Komponente namens Pagination Der Grund, warum wir diese Pigeonation-Komponente in den gemeinsamen Ordner aufnehmen, ist, dass wir sie in gemeinsamen Ordner aufnehmen, ist, dass wir sie verwenden können Hier fügen wir Boilerplate-Code hinzu, und ganz oben importieren wir Css zur Piginierung von Perioden wir Gut. Nun, was wir von dieser Komponente wollen. Wir wollen nur Seitenzahlen von dieser Komponente, und diese Komponente entscheidet, wie viele Seiten wir anzeigen müssen. Wenn wir zum Beispiel 100 Produkte haben und acht Produkte pro Seite anzeigen wollen , dann müssen wir 100 durch acht teilen, was 12 ergibt, was 96 ist, und wir benötigen eine weitere Seite für weitere vier Beiträge. Insgesamt benötigen wir also 13 Seiten. Ein anderes Beispiel: Wenn wir nur sieben Produkte haben, müssen wir die Seitennummerierung nicht anzeigen Also müssen wir mit diesen Logiken umgehen. Und dafür müssen wir drei Variablen übergeben. Zuerst benötigen wir hier den Gesamtbeitrag, Beitrag pro Seite und die Klickfunktion, die wir beim Klicken auf die Schaltfläche ausführen können. Hier erstellen wir also eine Variable zum Speichern von Seitenzahlen. Seite entspricht einem leeren Array. Danach fügen wir vier Schleifen hinzu, um dieses Array mit Seitenzahlen zu füllen Lassen Sie mich hier gleich eins sein. Als Nächstes schreiben wir I ser gleich dem Gesamtbeitrag, dividieren durch Beiträge pro Seite und I plus plus Jetzt schieben wir dieses I in dieses Array, also schreiben wir pages dot push und hier übergeben wir I. Wenn unser Gesamtbeitrag 80 beträgt und der Beitrag pro Seite zehn ist, dann erhalten wir zehn Seiten Aber wenn wir insgesamt 25 Beiträge haben und der Beitrag pro Seite acht ist, dann dividiert 25 durch acht, was 3,125 ergibt Wir haben nur drei Seiten und das wollen wir nicht. Um das zu lösen, haben wir in JavaScript eine Methode namens math dot Cal, die unsere Zahl auf die nächste Ganzzahl aufrundet, was bedeutet, wenn wir hier 2,05 übergeben, gibt sie drei zurück Also schließen wir diese Gleichung mit dieser Methode des mathematischen Punktsiegels ab. Wir müssen nur die Schaltfläche mit der Seitenzahl zurückgeben . Hier erstellen wir eine ungeordnete Liste und geben ihr einen Klassennamen, eine Nation In dieser Liste zeigen wir unsere Schaltfläche in Listenelementen an. Seiten auf der Karte. Hier erhalten wir jede Seitenpfeilfunktion, und hier geben wir das Listenelement zurück, geben die Taste zur Seite weiter. Darin fügen wir eine Schaltfläche mit Klassennamen, Seitennummerierung und Unterstrich-Schaltfläche hinzu. Und die OnClick-Funktion von Ereignis zu Pfeil. Und hier rufen wir die OnClick-Funktion auf und übergeben hier unsere Seitenzahl. Und in dieser Schaltfläche zeigen wir einfach die Seitenzahl an. Speichern Sie diese und fügen wir diese Komponente zur Produktlistenkomponente hinzu. Öffnen Sie also die Produktlistenkomponente unten, wir entfernen diese Seite zu der Schaltfläche, und danach fügen wir einfach unsere Seite zu einer Komponente hinzu Denken Sie daran, wir müssen drei Requisiten bestehen. Erstens, Gesamtbeitrag , also Datenpunkt Gesamtzahl der Produkte Beiträge pro Seite acht Beiträge pro Seite und ein Klick, um den Seitenwechsel vorzunehmen. Beachten Sie, dass wir hier nur Verweise weitergeben. Wir nennen es auf unserer Seite Nation Button. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir unsere Seite Nation Buttons. Klicken Sie auf Button zwei und sehen Sie, wir bekommen die zweite Seite. Klicken Sie auf Seite drei und wir bekommen Seite drei, es funktioniert. Jetzt haben wir hier einen kleinen Bug. Wenn wir unsere Kategorie festlegen, dann bekommen wir für nur drei Artikel auf dieser Seite eine Schaltfläche, was okay ist, aber ich mag es nicht. In unserer Paginierungskomponente übergeben wir hier eine Bedingung Wenn die Punktlänge der Seiten größer als eins ist, wir nur dann diese Paginierungsliste zurück Hier erhalten wir einen Kompilierungsfehler , denn wenn die Punktlänge der Seiten nicht größer als eins ist, diese Komponente nichts zurück Wir können diesen Code mit Reaktionsfragmenten umschließen. Und R ist weg. Wunderbar. Jetzt fragen Sie sich vielleicht , warum wir unserer Produktliste keine Bedingung hinzufügen. Der Grund ist also, wenn wir morgen diese Paginierungskomponente in einer anderen Komponente verwenden, dann müssen wir auch dort eine Bedingung übergeben, und das wollen wir nicht Deshalb füge ich dieser Paginierungskomponente eine Bedingung hinzu dieser Paginierungskomponente eine Bedingung Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, es ist für weniger als acht Produkte weg. Wenn wir zu Produkten weiterleiten, können wir die Seitennummerierung sehen Lassen Sie uns nun den Stil für diese Schaltflächen festlegen. In der CSS-Datei mit Paginierungspunkten fügen wir also zunächst die Seitennummerierung hinzu, und bei lockigen Paketen fügen wir weniger Stil zu keinem hinzu, zeigen zwei Flachs an, richten den Inhalt zur Mitte aus, Flachswechsel zum Umbruch und bei lockigen Paketen fügen wir weniger Stil zu keinem hinzu, zeigen zwei Flachs an, richten den Inhalt zur Mitte aus, Flachswechsel zum Umbruch . Und den Rand auf 16 Pixel. Als Nächstes setzen wir den Stil für die Punktpaginierung, den Unterstrich, die Cli-Klammern , und innerhalb dieser setzen wir die Breite auf 40 Pixel, die Höhe auf 40 Pixel, Rand auf Null und Schriftgröße von zehn 16 Pixel, Schriftstärke auf sechs und Rot, Rand auf ein Pixel, Festkörper hat Ii ei, ei, Randradius auf sechs Pixel, Hintergrundfarbe auf Weiß, Farbe auf Und der Cursor zum Zeiger. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir bekommen einen schönen Button. Jetzt wissen wir hier nicht , welche Seite ausgewählt ist. In unserer Paginierungskomponente, in unserem Button-Klassennamen, fügen wir die Bedingung hinzu, dass die aktuelle Seite dieser Seite entspricht Dann kehren wir zu Klassen, Seitennummerierung, Unterstrich-Schaltfläche und Aktiv Andernfalls geben wir nur die Seitennummerierung und die Klasse der Unterstrichschaltflächen zurück. Jetzt müssen wir auch hier die aktuell ausgewählte Seite abrufen. Also fügen wir diese aktuelle Seitenvariable in Requisiten hinzu. Speichern Sie dies und in unserer Produktlistenkomponente unten übergeben wir eine weitere Requisite, die aktuelle Seite, an diese Seite, die wir von use search PAMs erhalten Speichern Sie die Änderungen und lassen Sie uns auf CSS für die aktive Schaltfläche klicken. Also Punktpaginierung, Unterstrich-Schaltfläche, Punkt aktives Calibracket, Hintergrundfarbe auf Schwarz und Farbe auf Weiß Und mit dieser Paginierungsschaltfläche wechseln wir zu 0,2 Sekunden Speichern Sie die Änderungen und schauen Sie sich das an. Dennoch erhalten wir keinen aktiven Kurs, da diese aktuelle Seite aus einer Zeichenfolge und diese Seite aus einer Zahl besteht. Hier umschließen wir diese aktuelle Seite mit der Methode parse Int Die Änderungen und schauen Sie sich das an. Aktualisieren Sie die Seite und sehen Sie hier, dass wir eine Fehlermeldung erhalten. Lass uns die Konsole öffnen. Hier heißt es, dass wir die Eigenschaften von Null nicht lesen können. Wenn unsere Daten also Null sind, können wir nicht auf die Eigenschaft Data Dot Total Products zugreifen. Also umschließen wir unsere Paginierungskomponente mit Cali-Klammern und übergeben hier Wenn Daten verfügbar sind, rendern Sie nur die Paginierungskomponente Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Paginierungsnummer. Jetzt sind wir fast fertig. Wir haben einen letzten Bug. Also hier, wenn wir unsere Seitennummer ändern , passiert etwas. Lass es mich dir zeigen. Also ein Netzwerk-Tab und stelle die Verbindung zu Fast Three G her. Jetzt ändere die Seitennummer und hier können wir unser Ladegerüst sehen, und wir können auch unseren alten Beitrag sehen. Also lass uns das beheben. Öffnen Sie die Produktlistenkomponente, und hier an der Stelle dieses Endes übergeben wir einen ternären Operator Also Fragezeichen und auch diese geschweifte Klammer entfernen. Und hier passieren wir Colon. Also wenn e loading wahr ist, dann zeigen wir Skelett an, andernfalls zeigen wir Produkte an. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, wie sauber und hübsch unsere Seite aussieht. Ich weiß, dass diese Lektion etwas lang ist, aber Sie können sehen, wie einfach und unkompliziert es ist, unserer Anwendung eine Seitennummerierung hinzuzufügen Wir müssen nur die Seite in der API-Abfragezeichenfolge festlegen. Viele Entwickler sind vom Paginierungskonzept verwirrt, aber Sie können sehen, wie einfach und unkompliziert es ist 138. Unendliches Scrollen: Wie wir gesehen haben, ist die Paginierung ein sehr wichtiges Konzept, aber sie wird hauptsächlich in Datenbankanwendungen wie Blog-Websites und Bildungswebsites verwendet , auf denen die Leute bereit sind, ihr volle Aufmerksamkeit zu schenken Wenn Sie in diesen Anwendungen jedoch Anwendungen wie Social-Media-Apps oder etwas wie Instagram oder YouTube erstellen Social-Media-Apps oder etwas wie , können wir keine Paginierung hinzufügen Bei diesen Anwendungen müssen wir eine solche Funktion zum unendlichen Scrollen hinzufügen solche Funktion zum unendlichen Scrollen Wenn wir nach unten scrollen, erhalten wir Daten für die nächste Seite und können auch unsere vorherigen Daten sehen Wenn wir also die Funktion zum unendlichen Scrollen in unserer Anwendung verwenden , können wir leicht die Aufmerksamkeit der Benutzer auf sich ziehen, auch wenn der Benutzer nicht bereit ist, seine volle Aufmerksamkeit zu schenken Und deshalb verbringen die Leute mehr Zeit in sozialen Medien, weil sie nur scrollen müssen Lasst uns also die Logik des unendlichen Scrollens verstehen. Logik ist sehr einfach. Wenn wir das Ende unserer Seite erreichen, erhöhen wir unsere Seitenanzahl um eine, ganz einfach. Lassen Sie uns also diese unendliche Scrollfunktion in unserer Anwendung implementieren Scrollfunktion in unserer Anwendung Ich entferne diesen Paginierungscode nicht. Ich kommentiere nur diese Funktion aus und kommentiere auch die Paginierungskomponente aus, sodass Sie sie bei Bedarf als Referenz verwenden können Lassen Sie uns nun mit Schritt Nummer eins beginnen, bei dem wir ein Scrolling-Ereignis hinzufügen müssen, das uns Informationen gibt, wenn wir den Boden erreichen Also erstellen wir einen Use-Effekt-Hook zum Hinzufügen eines Event-Listeners. Hier fügen wir eine Callback-Funktion hinzu und übergeben ein leeres Array als Abhängigkeit , weil wir es nur einmal deklarieren wollen Darin schreiben wir nun Window Dot Add Event Listener. Übergeben Sie nun den ersten Parameter, scroll, und der zweite Parameter ist die Funktion, die wir beim Scroll-Ereignis aufrufen wollen, handle scroll Jetzt deklarieren wir diese Funktion, handhaben Scroll in use effect hook. Und darin schreiben wir unsere Logik. In JavaScript haben wir also ein paar Elemente, um die Daten von Dom im Dokumentpunkt Document Element abzurufen. Also hier destrukturieren wir es und kommen hierher, scrollen nach oben. Danach erhalten wir die Client-Höhe und zuletzt die Scroll-Höhe Lassen Sie uns nun einfach diese drei Variablen mit einem Console Dot Log protokollieren. Also, Console Dot Log, scrolle von oben nach Nach oben scrollen. Danach Konsolen-Punktprotokoll, Client-Höhe zu Client-Höhe. Und zu guter Letzt, Konsolenpunktprotokoll, Scrollhöhe zu Scrollhöhe. Machen Sie sich über diese Eigenschaften keine Gedanken. Sehen Sie sich das an und Sie werden all dies verstehen. Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Derzeit haben wir keine Bildlaufleiste. Öffnen wir also die Entwicklertools, und in der Konsole haben wir hier die Bildlaufleiste für unsere Seite. Und wenn wir scrollen, erhalten wir diese Werte. Scrollen Sie jetzt nach unten und dafür wollen wir eine Bedingung setzen. Hier ist das Scrollen nach oben ein Maß dafür, wie weit Sie auf einer Webseite nach unten gescrollt haben Im Grunde gibt es uns die Entfernung vom oberen Rand der Seite zu dem Ort an, an dem wir uns gerade befinden. Jetzt ist die Höhe des Clients die Höhe unseres Webbrowser-Fensters. Es stellt den sichtbaren Bereich der Webseite dar, den Sie sehen können, ohne zu scrollen Scrollhöhe ist die Gesamthöhe der gesamten Webseite, einschließlich der Teile, die derzeit in Ihrem Fenster nicht sichtbar sind derzeit in Ihrem Fenster nicht sichtbar Einfach ausgedrückt, zeigt Ihnen der Scroll-Top an, wie weit Sie nach unten gescrollt haben , der Client gibt Ihnen die Höhe dessen an, was Sie sehen können, und die Scrollhöhe gibt Ihnen die Gesamthöhe der gesamten Seite Wenn wir also den unteren Rand unserer Seite erreichen, entspricht der Scrollwert nach oben und der Höhe des Clients immer der Scrollhöhe Deshalb fügen wir hier in unserer Scroll-Funktion die Bedingung hinzu, dass ich nach oben scrolle und die Höhe des Clients größer oder gleich der Scrollhöhe Ich weiß nicht warum, aber manchmal funktioniert diese Bedingung nicht Um diese zu lösen, müssen wir hier einfach minus eins hinzufügen. Bevor man L von unten auswählt, wird diese Logik ausgeführt. Sie können diesen Wert nach Ihren Bedürfnissen ändern. in dieser Funktion vorerst Lassen Sie uns in dieser Funktion vorerst das Console Dot Log hinzufügen und nach unten gehen. Und wenn Sie keine Bildlaufleiste erhalten, können Sie hier im Perms-Objekt pro Seite bis zu zehn angeben Ich habe diese API speziell entworfen damit wir auch das bekommen können, was wir wollen Standardmäßig setze ich pro Seite auf acht, aber wir können übergeben, was wir wollen. Speichern Sie die Änderungen und sehen Sie sich an, dass wir hier zehn Produkte bekommen. Unten können wir nach unten gehen. Es funktioniert also. Nun der zweite Schritt , der darin besteht, dass wir unsere Seitenanzahl erhöhen müssen. Lassen Sie uns also dieselbe Logik wie bei unserer Funktion zum Seitenwechsel verwenden . Entfernen Sie also diesen Kommentar, und hier an der Stelle dieser Seite fügen wir den aktuellen PAM-Punkt-pH-Wert plus eins Rufen Sie diese Funktion nun in unserer Handle-Scroll-Funktion auf, oder wir können diese Funktion direkt aufrufen , ohne etwas zu ändern , und danach können wir die aktuellen Parameter Punkt Seite plus eins hier übergeben aktuellen Parameter Punkt Seite plus eins Aber mach dir darüber keine Sorgen. Speichern Sie die Änderungen und schauen Sie sich das an, scrollen Sie nach unten und wir erhalten nichts, denn hier erhalten wir Daten von Seite 11. Um das zu beheben, müssen wir den aktuellen Wert der Punktseite der Parameter abrufen , der aus einer Zeichenkette in eine Ganzzahl umgewandelt wird. Speichern Sie die Änderungen und schauen Sie zurück zu Seite eins und scrollen Sie nach unten. Wir erhalten unsere Daten für die zweite Seite, aber unsere vorherigen Daten Dafür können wir einen kleinen Trick machen, die Use-Datendatei öffnen und in unserem API-Aufruf, in der Methode dann, sehen, dass Use-Datendatei öffnen und in unserem API-Aufruf, in der Methode dann, sehen, wir diese Daten direkt in die Funktion „ Daten setzen“ setzen. Stattdessen können wir hier die Bedingung I angeben, der Endpunkt entspricht Slash-Produkten, und wir prüfen, ob wir Daten haben, die nicht Null und ob Data Dot Products verfügbar ist Wenn diese Bedingungen nun zutreffen, dann erhalten wir in der Datenmenge die vorherigen Daten, Fehlerfunktion, und hier wollen wir nur das Objekt zurückgeben In Klammern übergeben wir also Objekt. Hier fügen wir zuerst alle vorherigen Objektwerte hinzu und ersetzen hier unsere Produkte durch das Array. Zuerst erhalten wir Daten zu früheren Produkten, bei denen es sich um Spread-Operatoren handelt, vorherige Punktprodukte Danach fügen wir den Spread-Operator hinzu, die neuen Produkte, also Antwortpunktprodukte mit Punktdaten. Und wenn wir andere Endpunkte haben, dann setzen wir einfach Daten auf diese Daten. Wenn Sie etwas verwirrt sind, lassen Sie mich Ihnen erklären, warum wir das tun. Also nur für Produktanfragen, und wenn wir bereits Produkte in unserem Datenstatus haben, dann erhalten wir ein Objekt vier Eigenschaften, in denen wir ein Produktarray haben, aber die meisten anderen GAD-Anfragen geben direkt ein Array zurück Wenn wir also für alle Anfragen dieselben Daten verwenden, erhalten wir unsere Daten immer im Objekt und es wird eine Fehlermeldung angezeigt Deshalb müssen wir diese Bedingungen festlegen, die Änderungen speichern und einen Blick darauf werfen. Zurück zu Seite eins. Und scrolle nach unten. Siehst du, hier bekommen wir neue Produkte mit früheren Produkten. Jetzt passiert hier etwas Seltsames. Wenn wir unsere API aufrufen, sehen wir unsere vorherigen Produkte nicht. Deshalb entfernen wir in unserer Produktlistenkomponente unten unserer Produktlistenkomponente unten diesen ternären Operator und verwenden hier geschweifte Klammern und entfernen auch diese Spalte und fügen hier geschweifte Klammern Verschieben Sie nun diese Produktreihe vor dieses Skelett. Wenn wir neue Daten abrufen, wird das Skelett am Ende dieser Liste angezeigt Speichern Sie die Änderungen und schauen Sie sich das an. Und hier ändern wir unsere Seite auf Seite eins. Scrollen Sie nach unten und sehen Sie, dass das Skelett unten angezeigt wird. Jetzt haben wir ein weiteres kleines Problem mit dieser Implementierung. Beim unendlichen Scrollen müssen wir diese Seitenzahl nicht in der URL anzeigen Für die Seite ganz oben erstellen wir also eine neue Statusvariable namens page and set page Und als Anfangswert übergeben wir hier einen. Jetzt können wir diese Seite von hier entfernen. Wir brauchen es nicht. Im Grunde wird dieser Seitenwert durch unsere Seitenstatusvariable ersetzt, sodass wir nichts ändern müssen. Wir ändern hier nur diese Logik. An der Stelle, an der diese Funktion zum Ändern der Seite bearbeiten, eine festgelegte Seite hinzufügen, erhalten wir die vorherige Seite, Pfeilfunktion, die vorherige Seite plus eins. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, jetzt bekommen wir keine Seite in unserer URL. Wunderbar. Wir sind fast fertig mit dem Scrollen. Wir müssen diesem Use Effect-Hook nur eine Cleaner-Funktion hinzufügen diesem Use Effect-Hook , da wir uns derzeit auf der Produktlistenseite befinden Wenn wir auf eine andere Seite weiterleiten, wird auch das Scroll-Ereignis ausgeführt, was sich auf die Leistung unserer Anwendung auswirkt. Bei unserer Verwendung von Effect unten hatten wir die Pfeilfunktion geschrieben und einfach diesen Ausdruck kopiert und ihn einfach in „window dot remove Event Listener“ geändert „window dot remove Event Listener Speichern Sie die Änderungen und das funktioniert. Schauen wir uns jetzt noch einmal unsere Produktseite an. Also aktualisiere die Seite. Wir bekommen Produkte. Scrollen Sie jetzt. Nett, es funktioniert. Wählen Sie jetzt oben die Kategorie aus, und wir bekommen die Produkte unten Stattdessen wollen wir alle Produkte durch Produkte unserer Kategorien ersetzen alle Produkte durch Produkte unserer Kategorien Das ist also die kleine Burg. Lass uns das finden. Öffne, benutze den Datenhaken. Und in diesem Zustand unsere Endpunktprodukte und Datenpunktprodukte verfügbar. Dann fügen wir dem vorherigen Array neue Antwortpunktdaten hinzu. Aber wenn wir die Kategorie ändern, ist diese Bedingung auch wahr, und aus diesem Grund erhalten wir Daten am unteren Rand. Wir müssen eine weitere Bedingung hinzufügen, benutzerdefinierte Konfigurationspunktparameter, Punktseite ist nicht gleich Erst dann führe diese Logik aus. Speichern Sie die Änderungen und schauen Sie zurück zur Produktseite und drücken Sie sie erneut Scrollen Sie die Seite nach unten und wir erhalten die nächste Seite. Wenn wir nun auf eine dieser Kategorien klicken, werden wir diese Produkte nicht erhalten, da wir uns derzeit auf der zweiten Seite befinden und bei Spielekonsolen haben wir nur drei Produkte. Für Seite zwei haben wir also keine Produkte. Lassen Sie uns diese also schnell beheben. Also, ich habe die Komponente oben aufgelistet, nach unserem Use-Data-Hook fügen wir hier einen Nutzungseffekt hinzu nach unserem Use-Data-Hook und übergeben hier Callback-Funktion, und im Abhängigkeits-Array übergeben wir einfach die Kategorie Und darin setzen wir einfach Seite auf eins. Wenn sich also die Kategorie ändert oder aus der Abfragezeichenfolge entfernt, wird unsere Seite auf eins gesetzt. Und das wollen wir, richtig. Bewahren Sie die Scharniere auf und schauen Sie sich das an. Kehren Sie zur Produktseite zurück und sehen Sie sich dann die Kategorie an. Hier finden Sie unsere Produkte für diese Kategorie Lassen Sie mich Ihnen jetzt etwas zeigen. Ich weiß nicht, ob du es merkst oder nicht. Wenn wir am Ende angelangt sind, manchmal zwei Seiten zusammen geladen, oder manchmal werden sogar unsere Patch-Prom-Datenbank für alle Produkte angefordert . Also müssen wir das beheben. In unserer Handle-Scroll-Funktion fügen wir hier also ein paar Bedingungen hinzu. Erstens, wenn das Laden nicht stimmt, weitere Daten verfügbar und die letzte Seite weniger als der Datenpunkt Gesamtzahl der Seiten. Diese Gesamtzahl der Seiten, die wir vom Server erhalten. Und weil wir hier unsere Daten verwenden und Variablen laden, müssen wir in unserem Abhängigkeits-Array bearbeiten , die Änderungen speichern und die Seite aktualisieren und nach unten scrollen, und alle unsere Probleme sind behoben. Auf diese Weise können wir die Funktion zum unendlichen Scrollen implementieren, Weise können wir die Funktion zum unendlichen Scrollen implementieren um unsere Anwendung modern und ansprechend zu gestalten . Sie können also sehen, dass die Seitennummerierung und Funktion zum unendlichen Scrollen gar nicht so kompliziert sind Wir müssen nur die grundlegende Logik dieser beiden Funktionen verstehen die grundlegende Logik dieser beiden 139. Übung Einzelproduktseite: Jetzt ist es Zeit für ein wenig Bewegung. Mach dir keine Sorgen. Das dauert nur fünf bis zehn Minuten. Wenn wir also auf ein Produkt klicken, wir zur Seite mit den einzelnen Produkten weitergeleitet. Und hier möchten wir die einzelnen Produktdetails anzeigen. Außerdem erhalten wir diese Produkt-ID in unserer URL. Sie müssen diese API also mit dem Schrägstrich Produkt-ID am Ende der Endpunktprodukte aufrufen Schrägstrich Produkt-ID am Ende der Endpunktprodukte Dadurch werden diese Produktdaten hier zurückgegeben. Und während wir diese Daten abrufen, können Sie hier auch Ladetext anzeigen oder Sie können hier den Spinner anzeigen , den Sie direkt aus unserem vorherigen Routing-Projekt verwenden können aus unserem vorherigen Routing-Projekt Machen Sie sich als Nächstes keine Gedanken über die Schaltfläche mit zwei Einkaufswagen. Wir müssen uns nur um diese Mengenerhöhung und -verringerung kümmern . Der Hinweis ist, dass Sie eine neue Zustandsvariable für den Umgang mit Mengen erstellen , einige Zeit mit dieser Übung verbringen und sich dann die Lösung ansehen müssen. Ich weiß, dass du diese Übung abschließen kannst. 140. Lösung dieser Übung: Ich hoffe also, Sie lösen diese Übung oder Sie versuchen, sie zu lösen. Am wichtigsten ist, dass du es versuchst. Irgendwo festzusitzen ist sehr verbreitet. Manchmal bin ich auch irgendwann hängen geblieben, also mach dir darüber keine Gedanken In unserer Einzelproduktkomponente müssen wir also zuerst die aktuelle ID aus unserer URL abrufen. Denken Sie daran, dass dies ein Parameter ist, keine Abfragezeichenfolge. die Parameter von der URL abzurufen, müssen wir Perms verwenden SperamShok vom React-Router-Dom, und das gibt ein Objekt mit allen Parametern zurück, sodass wir es destrukturieren und die ID abrufen können Der Grund, warum wir diese ID hier erhalten , ist, dass wir in unserem Routing das Produkt und die Spalten-ID definieren Entschuldigung, wir fügen diese ID nach und nach zu diesem Pfad hinzu. Wir können dies so ändern, dass wir auf ID anrufen. Und wenn Sie hier vorbeikommen, Produkt-ID anrufen, dann müssen Sie die Produkt-ID destrukturieren Speichern Sie dies und kehren Sie zur einzelnen Produktkomponente zurück. Rufen wir nun unsere API auf, indem wir den Use Data Hook für den Endpunkt verwenden . Wir übergeben Backticks, Slash-Produkte und die Slash-Dollar-Ci Slash-Dollar-Ci Nun, das wird ein paar Eigenschaften zurückgeben. Destrukturieren Sie es und hier bekommen wir unsere Daten und benennen sie in Produkt um Außerdem erhalten wir Fehler und erleichtern das Laden. Lassen Sie uns nun diese Nutzungsparameter unter unseren Nutzungsstatus verschieben. Gut. Und lassen Sie uns dieses Produktobjekt entfernen, das wir erstellt haben, aber nur Temo Jetzt müssen wir in unserem JSX eine Bedingung hinzufügen Sehen Sie sich also alles fällig an und fügen Sie hier die Bedingung hinzu, dass das Produkt nicht Null ist Zeigen Sie diese dann hier an. Wir erhalten einen Kompilierungsfehler, weil wir mehrere Elemente zurückgeben Also packen wir diesen Betrag mit Reaktionsfragmenten ein. Speichern Sie die Änderungen und schauen Sie sich um, wählen Sie ein Produkt aus und sehen hier, dass wir diese Daten erhalten, aber keine Bilder. Lassen Sie uns also unsere Bilder anzeigen. Das haben wir bereits auf der Produktkarte gemacht. In der Quelle geben wir also Krawatten an, und vor diesem Bild fügen wir die Spalte STTP, den doppelten Schrägstrich, den lokalen Host, die Spalte 5.000, den Schrägstrich Produkte, den Schrägstrich Image mit Dollar und geschweiften mit Dollar Nun, das Gleiche machen wir hier. Baptis und davor fügen wir die STDP-Spalte, den doppelten Schrägstrich, den lokalen Host, die Spalte 5.000, den Schrägstrich für Produkte, den Schrägstrich für das ausgewählte Bild mit Dollar- und eckigen mit Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir bekommen unsere Bilder. Perfekt. Lassen Sie uns nun den Fehler und das Laden behandeln. Bei Fehlern halten wir uns also an die Bedingung. Wenn ein Fehler verfügbar ist, zeigen wir das Emphasis-Tag und geben ihm einen Klassennamen aus Error, und wir übergeben hier einfach den Fehler. Nun zum Laden zeigen wir den Ladespinner an. Also öffne ich unser vorheriges Routing-Projekt. Im Quellordner haben wir Komponenten und darin haben wir den gemeinsamen Ordner. Und hier haben wir die Loader-Komponente. Wählen Sie sowohl den JSX- als auch den CSS-Stapel aus und ordnen Sie sie in unseren gemeinsamen Ordner Jetzt fügen wir in unserer Komponente eine Bedingung hinzu Wenn dieses Laden wahr ist, fügen wir die Loader-Komponente hinzu. Speichern Sie die Änderungen und werfen Sie einen Blick darauf, aktualisieren Sie die Seite und sehen Sie, dass wir hier unseren Loader bekommen. Nun letzte Aufgabe, wenn wir auf diese Plus-Schaltfläche klicken, müssen wir diese Menge erhöhen. Dazu erstellen wir oben eine neue Zustandsvariable namens Menge und Menge, und standardmäßig übergeben wir eine. Jetzt müssen wir diese Zustandsvariable an unsere Mengeneingabekomponente übergeben , da wir in dieser Komponente eine Plus-Minus-Schaltfläche und auch die Mengenzählung haben. Hier übergeben wir also Menge an Menge, Menge an Menge und Lagerbestand an Produkt Punkt SOC Bewahren Sie die Scharniere auf und lassen Sie uns damit umgehen. In unserer Mengeneingabekomponente in den Requisiten erhalten wir also die Menge, die festgelegte Menge und den Lagerbestand Jetzt fügen wir hier in unserer Schaltfläche einfach ein Klickereignis Pfeilfunktion hinzu, und hier setzen wir die Menge auf Menge minus eins Jetzt gilt dasselbe, wir geben die Plus-Schaltfläche ein. Kopieren Sie dieses Klickereignis und fügen es für die Plus-Schaltfläche an der Stelle von minus eins ein, wir fügen plus eins hinzu, und zuletzt ändern wir dieses auf diesen Mengenstatus. Speichern Sie die Änderungen und nehmen Sie ein. C, die Menge nimmt zu, aber wir müssen eine Bedingung für dieses Deaktivierungsattribut hinzufügen. Deaktivieren ist also gleich Menge, weniger oder gleich eins Und auch in der Plus-Schaltfläche übergeben wir das Deaktivierungsattribut, übergeben wir das Deaktivierungsattribut größeren Menge oder dem Lagerbestand entspricht Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wenn wir mehr als eine Menge haben, dann ist die Minus-Taste nicht deaktiviert. Und wenn wir die Lagermenge erhöhen, ist unsere Plus-Schaltfläche deaktiviert. Perfekt. Hier ist unser 12. Abschnitt abgeschlossen. Ich hoffe, du lernst viel daraus. Wenn Sie Zweifel haben, können Sie mich im Bereich Fragen und Antworten Im nächsten Abschnitt werden Sie das Wichtigste an jedem großen Projekt sehen , die Benutzerauthentifizierung und -autorisierung Wenn Sie sich diese Kurse kontinuierlich ansehen, empfehle ich Ihnen dringend, 20 bis 30 Minuten Pause vom Bildschirm einzulegen und frische Luft zu schnappen, da es auch wichtig ist, auf unsere Gesundheit zu achten. Wir sehen uns im nächsten Abschnitt. 141. Abschnitt 13 Authentifizierung und Autorisierung: In diesem Abschnitt werden wir uns mit der Authentifizierung und der Reaktionsanwendung befassen, z. B. mit der Anmeldung, Anmeldung und Abmeldung Danach werden wir sehen, wie wir mit der Autorisierung umgehen können, d. h. nur angemeldete Benutzer können Elemente zur Karte, zur Zuschauerkarte usw. hinzufügen . Authentifizierung und Autorisierung sind beide sehr wichtige Themen für jede große Anwendung Für die Authentifizierung werden wir also das JSON-Webtoken verwenden Ich freue mich sehr über diesen Abschnitt und hoffe, Sie auch. Lassen Sie uns also näher darauf eingehen. 142. Eine neue Benutzer-API registrieren: Sehen wir uns zunächst die Registrierungs-API für unseren Benutzer an. Für die Verkostung der API haben wir also zwei Möglichkeiten. Wir können Postman verwenden, die externe Anwendung, die speziell für das Testen aller Arten von APIs entwickelt wurde, oder wir können die VS-Code-Erweiterung namens Thunder Client verwenden, die fast dieselben Funktionen bietet Der Einfachheit halber werde ich die VSCode-Erweiterung verwenden, aber Sie können auch Postman verwenden Es liegt ganz bei dir. Öffnen Sie von hier aus das Erweiterungsfenster und suchen Sie nach Thunder Client Und installiere diese Erweiterung. Gut. Lassen Sie uns nun diese Tender-Client-Erweiterung öffnen. Und hier können wir diese Art von Schnittstelle sehen. Machen Sie sich darüber keine Sorgen, klicken Sie auf Neue Anfrage. Und auf der rechten Seite sehen wir, dass wir ein Eingabefeld mit API-URL und ein Drop-down-Menü für die Auswahl von STTP-Methoden haben API-URL und ein Drop-down-Menü für die Auswahl von STTP-Methoden Wählen Sie also die Post-Methode und die API-URL aus, schreiben Sie die STTP-Spalte, den doppelten Schrägstrich, den lokalen Host, die Spalte 5.000, Schrägstrich, API-Schrägstrich, Schrägstrich Da wir für die Registrierung eines neuen Benutzers wissen, müssen wir nun Benutzerdaten im Hauptteil unserer API-Anfrage senden Dafür wählen wir einfach hier den Hauptteil aus, und hier können wir unsere Daten im JCN-Format übergeben Also geben wir zuerst den Namen an den Code weiter. Als Nächstes senden Sie eine E-Mail an den Code one@gmail.com. Dann Passwort für, sagen wir, eins, zwei, drei, 45678 und Lieferadresse, das ist meine Lieferadresse Im Moment senden wir unser Profilbild nicht , denn wenn wir unser Profilbild nicht auswählen, wird es standardmäßig auf Standard-Dot-JPG gesetzt Jetzt einfach zustimmen. Und hier bekommen wir den Statuscode 201, was für erfolgreich erstellt steht Und auch in der Antwort erhalten wir ein Objekt mit einem langen Token. Dies ist das JSON-Webtoken oder JWT, das fast alle modernen Anwendungen zur Benutzerauthentifizierung verwenden . Mach dir darüber keine Sorgen Ich werde Ihnen JCN WebTken in der kommenden Lektion ausführlich erklären in der kommenden Lektion ausführlich Im Moment sind wir erfolgreich registrierter Benutzer. Wir können überprüfen, ob Mongo DBCompass die Benutzersammlung öffnet und hier sehen wir, dass wir unseren Benutzer abrufen Lassen Sie uns nun sehen, wie wir mit unserer API-Anfrage ein Bild senden können. also Dateien wie Bilder, Audio, Video usw. zu senden , müssen wir Formulardaten verwenden. Dies ist eine weitere Möglichkeit , Daten mit unserer API-Anfrage zu senden , da wir im JSON-Format unsere Datei nicht senden können. Anstatt von hier aus JSON auszuwählen, können wir Formular auswählen. Jetzt können wir hier die Eingaben zum Ausfüllen von Formularen sehen, und auf der rechten Seite können wir Dateien aktivieren und sehen, dass wir hier die Option Dateien erhalten. Jetzt fügen wir in den Formularfeldern Name und Wert zu Code Plus hinzu. E-Mail an den Code two@gmail.com. Dann das Passwort für 12345678 und die Lieferadresse das ist eine neue Wählen wir nun das Profilbild aus. Für den vollständigen Namen übergeben wir also das Profil P mit dem Großbuchstaben P, und hier können wir die Datei auswählen. Also hier wähle ich das Logo meines Kanals aus. Lassen Sie uns jetzt Daten senden. Siehst du, hier bekommen wir ein neues Token, und das bedeutet, dass unser Benutzer erfolgreich registriert ist Öffnen Sie Mongoibcmpass und aktualisieren Sie die Dokumente. Und hier können wir sehen, dass wir einen neuen Benutzer mit der E-Mail code@gmail.com bekommen neuen Benutzer mit der E-Mail code@gmail.com Und Profil zu einem Profilspitzennamen. Es funktioniert. Jetzt können wir von hier unten unseren API-Namen umbenennen. Sagen wir Anmelde-API. Gut. In der nächsten Lektion werden wir unser Anmeldeformular mit unserer Anmelde-API verbinden 143. Anmeldeseite mit der API verbinden: Jetzt sind wir hier auf unserer Anmeldeseite in der Sendefunktion, momentan sind wir nur dabei, diese Formularwerte in der Konsole zu protokollieren Lassen Sie uns nun unsere Anmeldeseite mit unserer Anmelde-API verbinden. Anstatt die gesamte Logik hier zu schreiben, würde ich es vorziehen, Logik in eine andere JavaScript-Datei zu schreiben Logik in eine andere JavaScript-Datei In unserem Quellordner erstellen wir also einen weiteren Ordner namens services. Und darin erstellen wir eine neue Datei namens user services dot js. Können Sie mir sagen, warum ich die Erweiterung dot js verwende? Richtig, weil wir von hier aus keine JSX-Elemente zurückgeben Hier geben wir zunächst den API-Client ein, von hier aus gehen wir einen Ordner nach oben, utils, API-Client Jetzt erstellen wir hier eine Funktion namens Anmelden oder Registrieren, was auch immer Sie aufrufen möchten Und hier erhalten wir das erste Benutzerobjekt, das sind die Formularfelder unseres Anmeldeformulars, und danach übergeben wir unser Profil, das ein Profilbild ist Wie wir wissen, müssen wir zum Senden einer Datei unsere Daten im Formulardatenformat senden Dafür erstellen wir hier eine Variable namens body equals to new form data Jetzt müssen wir hier einfach alle Daten in diesen Körperformdaten hinzufügen alle Daten in diesen Körperformdaten Also den Körper nach oben und innerhalb dieser Funktion werden wir beim ersten Parameter den Namen unserer Eigenschaft definieren, nämlich Name. Und beim zweiten Parameter definieren wir den Wert, der Benutzerpunktname ist. Lassen Sie uns diese Zeile nun noch viermal duplizieren, und hier ändern wir unseren Namen E-Mail und auch in Benutzerpunkt-E-Mail. Als Nächstes haben wir ein Passwort und ein Benutzerpunktpasswort. Als nächstes haben wir die Lieferadresse und die Lieferadresse von User Dot. Und endlich haben wir Profil P mit P, und wir geben hier unser Profil weiter. Beachten Sie, dass der Name All Fills von Ihrer API abhängt. In Ihrer Anwendung könnte es der Benutzername an der Stelle dieser E-Mail sein. Sie müssen hier den Benutzernamen angeben. Mach dir darüber keine Sorgen. Der Entwickler von Bend gibt Ihnen diese Informationen zum Aufrufen der API, da wir über diese Namen im Backend auf diese Werte zugreifen können Diese Namen hängen vollständig von Ihrem Backend ab. Jetzt werden wir am Ende unsere API aufrufen, also den API-Client nicht posten, und hier übergeben wir unsere API, das heißt sssers signup Danach geben wir einfach unsere Körperdaten weiter. Wenn wir diese Anmeldefunktion aufrufen, generieren diese Formulardaten sie zuerst und wir senden sie an unser Backend Dieser Ausdruck gibt ein Versprechen zurück. Von hier aus können wir einfach das Versprechen zurückgeben. Um diese Anmeldefunktion nun in unserem Formular verwenden zu können, müssen wir diese Funktion von hier aus exportieren Speichern Sie diese Datei, und in unserer Komponente für die Anmeldeseite rufen wir hier in der On-Submit-Methode anstelle des Punktprotokolls in der Konsole einfach die Signup-Funktion auf und Sie können sehen, rufen wir hier in der On-Submit-Methode anstelle des Punktprotokolls in der Konsole einfach die Signup-Funktion und Sie können sehen Beim ersten Parameter müssen wir nun unsere Formularfelder übergeben, das sind diese Formulardaten das Und danach, beim zweiten Parameter, werden wir das Profil Peak übergeben. Lassen Sie uns diese Funktion nun in einen Codeblock packen. Gut. Nun, dieser Ausdruck ist ein Versprechen. Also werden wir hier Await verwenden. Und um Await zu verwenden, müssen wir hier async hinzufügen, so einfach ist das Lassen Sie uns nun diese Konsole von hier entfernen. Das wollen wir nicht. Speichern Sie die Änderungen und schauen Sie sich das an. Öffnen Sie die Entwicklertools für Windows-Benutzer, drücken Sie Ftwel oder Wahltaste plus Befehlstaste plus I auf dem Mac Öffnen Sie Network Stab und füllen Sie das Formular mit Name, E-Mail-Adresse, Passwort, Bestätigungskennwort und Lieferadresse Und klicken Sie auf Absenden. Es passiert nichts, aber auf unserer Registerkarte Netzwerke können wir hier sehen, dass wir eine API-Anfrage erhalten nämlich die Registrierung, und als Antwort erhalten wir ein Token. Jetzt SelagpFile Image, und wir werden diese E-Mail in den Code four@gmail.com ändern diese E-Mail in den Code four@gmail.com Andernfalls erhalten wir eine Fehlermeldung. Außerdem ändern wir diesen Namen in Code vier und in der Adresse ändern wir die vierte Lieferadresse. Klicken Sie auf Senden und sehen Sie hier, dass wir als Antwort erneut ein Token erhalten. Mit Bild oder ohne Bild, beide Szenarien funktionieren. Sie können sehen, wie einfach es ist, ein Bild in React an den Server zu senden. Wir müssen nur ein Formulardatenobjekt erstellen und unsere Daten darin anhängen Wenn wir jetzt erneut auf Senden klicken, erhalten wir als Antwort eine Fehlermeldung In der nächsten Lektion werden wir sehen, wie wir mit Fehlern umgehen können , die über die Anmelde-API zurückgegeben werden 144. Fehlerbehandlung für die Anmeldung: Um Fehler zu beheben, können wir jetzt Try and Catch Block verwenden Hier schreiben wir also nur TryCatch und wählen diesen Vorschlag aus und sehen, wir bekommen Try and Catch Block Platzieren wir nun die Sino-Funktion im Tri-Block und im Cache-Block, hier erhalten wir ein Fehlerobjekt Hier zeigen wir also nur einen Fehler an , den wir von unserem Backend zurückgeben Und dafür müssen wir hier die Bedingung angeben, ob wir eine Fehlerpunktantwort haben und Punktstatus der Fehlerpunktreaktion gleich 400 ist, was bedeutet, dass wir als Kunde etwas falsch gemacht haben Also hier haben wir einfach ein Consol Dot Log Dot Response-Objekt. Der Grund, warum ich Tricach und Acad verwende, ist auch nur, um Ihnen eine Demo zu zeigen Sie können auch die Dot Dan- und Cache-Methode verwenden , wie wir beim Aufrufen eines API-Abschnitts gesehen haben Speichern Sie die Änderungen und schauen Sie sich das an, füllen Sie das Formular aus Für die E-Mail-Adresse geben wir die alte E-Mail-Adresse weiter und senden das Formular ab. Und in der Konsole können wir das Antwortobjekt sehen. Und darin bekommen wir den Status 400, und in den Daten haben wir eine Nachricht an die E-Mail, die wir haben , ist bereits registriert. Lassen Sie uns diesen Fehler nun in unserem Formular anzeigen. diesen Fehler anzuzeigen, müssen wir ihn also zuerst in der Zustandsvariablen speichern. Also erstellen wir oben die State-Variable namens Form Error und setzen Form Error. Als Standardwert setzen wir eine leere Zeichenfolge. Gut. Jetzt setzen wir hier Formularfehler auf Error Dot Response Dot Data Dot Message. Dieses Antwortobjekt hängt vollständig von Ihrem Backend ab. In Ihrem Fall haben Sie einen Datenpunktfehler, also müssen Sie diesen Informfehler einstellen Jetzt unten, vor unserer Schaltfläche „Senden“, fügen wir hier eine Bedingung hinzu. Wenn ein Formularfehler verfügbar ist, geben wir das Emphasis-Tag mit dem Formularfehler des Klassennamens zurück und fügen hier einen Formularfehler hinzu. Sagen Sie die Änderungen und schauen Sie sich das an, füllen Sie das Formular aus und senden Sie es ab und sehen Sie hier, dass wir unsere Fehlermeldung erhalten. Derzeit rufen wir beim Absenden des Formulars nur die Anmelde-API auf Aber in der realen Welt müssen wir uns als Benutzer anmelden. Machen Sie sich darüber vorerst keine Sorgen. Das werden wir in Zukunft tun. 145. Eine Benutzer-API anmelden: Sehen wir uns nun die Login-API an. In unserer Tender-Client-Erweiterung fügen wir also eine neue API-Anfrage hinzu. Auch für die Anmeldung geben wir hier URL, STDP, Colm Double Forward Slash Local Host, Spalte 5.000 Schrägstrich API Schrägstrich User Slash Login ein und wählen auch die Post-Methode aus. Für diese API werden wir nun Daten im JSON-Format senden, werden wir nun Daten im JSON-Format senden da wir hier keine Bilder oder Dateien senden Andernfalls müssen wir Formulardaten senden. Jetzt im Hauptteil mögen wir JSON, und hier übergeben wir zwei Eigenschaften. Die erste ist E-Mail , also der Code one@gmail.com. Und dann geben wir unser Passwort an 12345678 weiter und senden eine Anfrage Sehen Sie, hier erhalten wir JCN-Webtoken in unserem Antwortobjekt, und mit diesem Token erhalten wir Machen Sie sich darüber vorerst keine Sorgen. Zunächst verbinden wir unser Anmeldeformular mit dieser Login-API. Also hier ist eine kleine Übung für dich. Ich möchte, dass du unser Login-Formular mit dieser Login-API verbindest und auch versuchst, Fehler zu behandeln. Und wenn es sich um einen Serverfehler handelt, zeigen Sie ihn vor der Anmeldeschaltfläche an. So wie wir es für das Anmeldeformular getan haben. Das wird kaum zwei bis 5 Minuten dauern, probieren Sie es aus und dann war es die Lösung 146. Login-Seite mit API verbinden: Ich hoffe also, dass Sie diese Übung lösen. Sehen wir uns nun die Lösung an. wir also unsere Anmeldefunktion in der Benutzer-Services-Datei erstellen , werden wir eine neue Funktion für die Anmeldung hinzufügen Also Funktion, Anmeldung, und hier erhalten wir Benutzerdaten, die wir über das Anmeldeformular senden Und hier geben wir einfach diesen API-Client-Punktpost zurück. Hier übergeben wir unseren Pfad-Slash-Benutzer Slash Login. Und beim zweiten Parameter übergeben wir einfach dieses Benutzerobjekt Um diese Funktion nun in unserem Login-Formular aufzurufen, müssen wir diese Funktion exportieren. Speichern Sie diese Datei und öffnen Sie die Komponente der Anmeldeseite In der Sendefunktion an der Stelle dieses Konsolen-Punktprotokolls übergeben wir die Anmeldefunktion von Benutzerdiensten und übergeben hier einfach unsere Formulardaten. Jetzt gibt dieser Ausdruck ein Versprechen zurück, also warten wir darauf und um await zu verwenden, müssen wir hier async hinzufügen Speichern Sie die Änderungen und werfen Sie einen Blick darauf, öffnen Sie die Anmeldeseite und geben Sie unsere E-Mail-Adresse und Passwort ein und nichts passiert Aber in Network Sab können wir den API-Aufruf sehen, der in der Antwort das JWT-Token zurückgibt Unsere halbe Aufgabe ist also erledigt. Jetzt müssen wir uns nur noch mit Formularfehlern befassen. Also zurück zum VS-Code, und hier fügen wir den Try-and-Catch-Block zur Behandlung von Fehlern hinzu. Verschieben Sie diese Zeile in den Try-Block und auch in die Catch-Methode, die in diesem Fehler zum Fehlerobjekt führt. In diesem Catch-Block fügen wir nun dieselbe Bedingung hinzu, die wir für das Anmeldeformular hinzugefügt haben Kopieren Sie also im Anmeldeformular diese I-Bedingung und fügen Sie sie einfach in unser Anmeldeformular Set Form Error zu verwenden, müssen wir diese Statusvariable erstellen Oben erstellen wir eine Zustandsvariable namens form error, set form error, und als Standardwert übergeben wir hier eine leere Zeichenfolge. Endlich haben wir diesen Fehler einfach in unserem Formular gesehen. Vor unserer Schaltfläche „Senden“ fügen wir eine Bedingung hinzu. Wenn ein Formularfehler verfügbar ist, fügen Sie das Hervorhebungs-Tag mit dem Klassennamen Formularfehler hinzu und geben Sie hier einfach den Formularfehler ein. Speichern Sie die Änderungen und schauen Sie sich das an, füllen Sie das Formular mit falschen Angaben aus und senden Sie das Formular ab. Sehen Sie hier, dass wir diesen Fehler bekommen. 147. Was ist JWT und wie funktioniert es: Nun, bevor wir uns eingehender mit der Benutzerauthentifizierung befassen, was wir mithilfe von JCN Web Token oder JWT tun Lassen Sie uns zunächst verstehen, was JWT ist. JWT steht also für JCN Web Token, das zur sicheren Übertragung von Informationen zwischen zwei Parteien wie Bend und Frontend verwendet wird Informationen zwischen zwei Parteien wie Bend und Lassen Sie uns das anhand des Beispiels verstehen. Also hier ist eine Harley. Er meldet sich mit seinen Kontoinformationen, E-Mail und seinem Passwort Unser Server überprüft zuerst die Informationen und wenn sie wahr sind, Server seine Benutzer-ID als Antwort zurück und speichert diese in einer Sitzung oder einem Cookie. Wenn er nun nach sicheren Informationen fragt, sagen wir all seine Bankinformationen. Server fragt zuerst nach der Benutzer-ID und wenn er eine Benutzer-ID hat, dann sendet der Server die sicheren Informationen. Aber hier ist ein großes Problem. Diese Sitzung oder dieses Cookie , in dem wir unsere Benutzer-ID speichern, kann im Browser einfach geändert werden. Nehmen wir an, ich ändere diese Benutzer-ID in eine andere Benutzer-ID. Dann erhalten wir die Informationen über den Datenbenutzer. Dieser Ansatz ist also nicht gesichert. Um dieses Problem zu lösen, führen wir nun JSON Web Token ein. Jetzt meldet sich Halley wieder mit seiner E-Mail und seinem Passwort an. Jetzt überprüft unser Server zuerst die Informationen, und wenn sie wahr sind, gibt Server das lange verschlüsselte eindeutige Token als Antwort zurück und speichert es im lokalen Speicher Das Tolle an diesem Token ist, dass es aus Benutzerdaten und einem geheimen Schlüssel besteht, wir auf dem Server definieren. Wann immer Harley also eine Anfrage nach gesicherten Informationen sendet, fragt der Server zuerst nach dem JWT-Token und verifiziert es mit unserem geheimen Schlüssel Es ist verifiziert, dann sendet der Server diese sicheren Informationen Wenn wir etwas an den Benutzerinformationen ändern, ändert sich auch unser Token. Ich weiß, das ist ein bisschen verwirrend. Lass es mich dir praktisch zeigen. In unserer Test-API kopieren wir dieses JSON-Webtoken. Öffnen Sie in unserem Browser einen neuen Tab und suchen Sie nach jwt dotIO. Dies ist die offizielle Dokumentation von JWT. Hier in den Bibliotheken können Sie die JWT-Implementierung für verschiedene Bibliotheken sehen JWT-Implementierung für verschiedene Scrollen Sie nun nach unten zum Abschnitt Debugger. Hier können wir unser Token dekodieren. Lassen Sie uns also verstehen, was das Token enthält. Fügen Sie also unser Token hier ein. Jetzt sind alle GWT-Token in drei Teile aufgeteilt. Im ersten Teil geht es um den Header , der in roter Farbe ist Im zweiten Teil geht es um die Nutzlast, die lila ist, und der letzte und wichtigste Teil ist die Signatur, die in der blauen Farbe ist Jetzt enthält dieser Header den Algorithmus und den Tokentyp, was sehr verbreitet ist. Konzentriere dich nicht darauf. Diese Payload enthält nun die Daten, die Server mit unserem Token senden In diesem Fall übergebe ich die Daten dieses Benutzers. Wir können im Backend festlegen , welche Daten wir in dieser Payload senden möchten So können wir diese Daten auf unserem Frontend anzeigen , ohne eine separate API aufzurufen, und wir haben mehr Daten I At, was für ausgestellt am steht, und der Wert ist die Zeit, zu der unser Token generiert wurde, und EXP ist unsere Ablaufzeit Der letzte Teil, der blau angezeigt wird, ist die Signatur, die auf der Grundlage dieses Headers, dieser Nutzdatendaten und des geheimen Schlüssels generiert wird, nur auf dem Server verfügbar ist Dadurch wird verhindert, dass Benutzer ihr eigenes Token erhalten und es dann mit der ID ändern, um so zu tun, als wären sie jemand anderes Denn wenn Sie etwas in dieser Payload oder diesem Header ändern, wird diese Signatur neu generiert Es besteht also keine Möglichkeit für Benutzer, etwas Unethisches zu tun Deshalb ist JWT so beliebt. Lassen Sie mich Ihnen jetzt zeigen, was ein geheimer Schlüssel ist. Dieser geheime Schlüssel ist eine Zeichenfolge, die wir am Backend definieren. In unserem Backend haben wir also diese Punkt-ENV-Datei, und hier definieren wir JWT Ich weiß, das ist ein einfaches Passwort, aber ich habe es nur so eingestellt, dass es dir angezeigt wird also nur mit diesem geheimen Schlüssel Unser Token wird also nur mit diesem geheimen Schlüssel validiert. Andernfalls erhalten wir einen Fehler. Zusammenfassend lässt sich sagen, dass wir, wenn sich Benutzer erfolgreich anmelden oder registrieren, ein JSON-Webtoken erhalten, das einfach als Sicherheitskarte fungiert. Der Benutzer fordert Daten an, die nur angemeldete Benutzer zugreifen können. Anschließend überprüft der Server zuerst die Sicherheitskarte, bei der es sich Anschließend überprüft der Server zuerst die Sicherheitskarte, bei der unser JSON-Webtoken handelt, und validiert sie mit dem geheimen JWT-Schlüssel Und wenn dieses Token verifiziert ist, Server diese Daten erst dann an unseren Benutzer zurück . So einfach ist das. 148. JWT nach dem Login und der Registrierung speichern: Wie wir jetzt wissen, erhalten wir in unserer Antwort JSON Web Token , wenn es sich um ein Register handelt oder ob wir mit einer gültigen E-Mail-Adresse und einem gültigen Passwort angemeldet sich um ein Register handelt oder ob wir Also müssen wir dieses Token auf der Website des Kunden speichern. Jetzt denken Sie vielleicht darüber nach, wo wir das Token speichern. Denken Sie daran, dass wir das in unserem Task-Wrack-Projekt getan haben. Wir speichern unsere Aufgabe im lokalen Speicher, dem kleinen Speicher des Browsers Hier warten wir auf unsere Login-API, die ein Antwortobjekt zurückgibt. Speichern wir das also in einer Variablen namens response und protokollieren wir diese Antwort einfach mit einem Punkt in der Konsole. Speichern Sie die Änderungen und schauen Sie sich das an. Geben Sie die gültige E-Mail-Adresse und das Passwort ein. Und senden Sie das Formular ab. Siehst du, hier bekommen wir ein Antwortobjekt und hier in den Daten bekommen wir unser Token. Lassen Sie uns das jetzt in unserem lokalen Speicher speichern. An der Stelle, an der diese Antwort erfolgt, können wir sie destrukturieren und uns Daten holen. Jetzt entfernen wir diese Konsole und wir schreiben das lokale Speicherpunktset. Diese Methode benötigt zwei Parameter. Erstens unser Variablenname, Token ist , und zweitens der Wert der Variablen, bei dem ein Datenpunkt-Token handelt. Speichern Sie die Änderungen und melden Sie sich erneut mit einer gültigen E-Mail-Adresse und einem gültigen Passwort an. Und mal sehen, ob wir das Token im lokalen Speicher haben oder nicht. Öffnen Sie also die Registerkarte „Anwendung“ von hier aus und in unserem Port, dem lokalen Host 5173 Hier bekommen wir unser Token. Jetzt müssen wir als letztes den Benutzer nach dem Login auf die Homepage weiterleiten. Also hier rufen wir use Navigate Hook von einem Crouterdm aus auf und speichern es in der Konstante Jetzt benutzen wir einfach here, Navigate und pass here Homepage. Speichern Sie die Änderungen und schauen Sie sich das an. Füllen Sie das Formular mit gültigen Daten aus und senden Sie es ab. Siehe, zur Homepage weiterleiten. Ein Anmeldeformular funktioniert ordnungsgemäß. Jetzt werden wir dasselbe tun, wenn sich Benutzer auf unserer Website registrieren, da ich nicht möchte, dass sich Benutzer nach der Registrierung erneut mit der E-Mail-Adresse und dem Passwort anmelden müssen. Von hier aus kopieren wir diese beiden Zeilen und in unserer Komponente für die Anmeldeseite wir diese Zeilen nach dem Warten Speichern wir diese API-Antwort nun konstant und destrukturieren wir sie, um hier Daten zu erhalten. Und zu guter Letzt müssen wir diese Navigation definieren. Nach unserem Nutzungsstatus rufen wir also use Navigate Hook auf und speichern das als Konstante, rufen Navigate auf. Speichern Sie die Änderungen und schauen Sie sich das an. Gehen Sie zur Anmeldeseite füllen Sie das Formular mit Name, E-Mail-ID, Passwort, Bestätigungskennwort und Lieferadresse Und wir klicken auf Consubmit. Siehst du, wir leiten wieder zur Homepage weiter. Das funktioniert also auch. 149. Benutzer von Token erhalten: In der vorherigen Lektion haben wir unser JSON-Webtoken also erfolgreich im lokalen Speicher gespeichert . Erinnern Sie sich noch daran, dass wir beim Dekodieren unseres Tokens auf der JWT-Website aktuelle Benutzerdaten in der Nutzlast erhalten? Dekodieren unseres Tokens auf der JWT-Website aktuelle Benutzerdaten in der Nutzlast erhalten Also müssen wir diese Benutzerdaten aus dem Token dekodieren und im Status speichern Die Hauptfrage ist jedoch , wo wir den Benutzerstatus definieren werden, in dem wir das Benutzerobjekt benötigen Wir brauchen einfach ein Benutzerobjekt in all unseren Anwendungen. In der App-Komponente definieren wir unseren Benutzerstatus, da App-Komponente unsere Stammkomponente ist Von hier aus können wir das Benutzerobjekt in all unseren Komponenten als Requisiten übergeben Benutzerobjekt in all unseren Komponenten als Requisiten Oben hatten wir ihn als Haken benutzt. Zuerst importieren wir ihn, und dann fügen wir gebrauchte Auszüge hinzu und übergeben hier user und set user Als Standardwert übergeben wir Null. Wenn unsere Komponente gerendert wird, müssen wir unser JSON-Webtoken dekodieren und diese Daten in diesem Benutzerstatus speichern Und dafür, was wir verwenden werden, richtig, verwenden wir use effect Hook, also nennen wir use effect An der ersten Position übergeben wir die Callback-Funktion und an der zweiten Position übergeben wir ein leeres Array, weil wir unser Token nur einmal dekodieren müssen In dieser Callback-Funktion werden wir jetzt zuerst das Token aus dem lokalen Speicher abrufen Sit local storage dot got m, und hier übergeben wir unseren Variablennamen, der Token ist Lassen Sie uns nun diese unveränderliche Variable, Token oder JWT genannt, speichern , wie auch immer Sie sie nennen möchten Um dieses ZSN WebTken zu dekodieren, haben wir Öffnen Sie also das Terminal, schreiben wir NPM install JWT decode und drücken die Eingabetaste. Gott. Lassen Sie uns dieses Terminal minimieren und oben importieren wir JWT-Decode aus JWT-Dekodierung Und in unserem Use-Effekt nennen wir diese JWT-Decodierungsfunktion und übergeben hier unser JWT Jetzt wird das Benutzerobjekt zurückgegeben. Speichern Sie es in der Variablen JWT-Benutzer da wir hier bereits den Benutzer verwenden, und wir konsultieren einfach das Punktprotokoll dieses JWT-Benutzers Speichern Sie die Änderungen und schauen Sie sich das an. Aktualisieren Sie die Seite, und in der Konsole sehen Sie, hier erhalten wir unser Benutzerobjekt. Speichern wir das einfach in unserer Benutzerstatusvariablen. An der Stelle des Punktprotokolls für die Konsole fügen wir also den Benutzer set hinzu. Jetzt können wir dieses Benutzerobjekt als Requisite an die Nabar-Komponente übergeben als Requisite an die Nabar-Komponente Aber bevor wir das tun, lassen Sie uns eine Bedingung überprüfen. Was ist, wenn wir kein Token in unserem lokalen Speicher haben? also auf der Registerkarte unserer Browseranwendung Wählen Sie also auf der Registerkarte unserer Browseranwendung dieses Token aus und entfernen Sie es von hier. Aktualisieren Sie nun die Seite und in der Konsole C wird die Fehlermeldung angezeigt , dass ein ungültiges Token angegeben ist. Wenn wir also kein Token im lokalen Speicher haben, erhalten wir nichts in dieser JWT-Variablen und dann wird dieser Nullwert an den JWT D-Code übergeben, und das gibt uns einen Fehler Um dieses Problem zu beheben, halten wir uns an den Try-and-Catch-Block und verschieben diesen Code einfach in den Try-Block. Wenn wir also einen Fehler in diesem Code haben, tun wir einfach nichts. Wenn Ihre Anwendung nur für angemeldete Benutzer funktioniert, können wir den Benutzer mit dieser Sketch-Methode zur Anmelde- oder Registrierungsseite weiterleiten. Bei unserer Anwendung ist das jedoch nicht der Fall. Speichern Sie die Änderungen und schauen Sie sich das an. Aktualisieren Sie die Seite und sehen Sie, dass wir keine Fehlermeldung erhalten, auch wenn wir kein Token haben . Jetzt ist hier noch eine Sache. Fast jedes Mal hat der Backend-Entwickler Zeit, zu der wir unseren dekodierten Wert eingegeben haben, eine Ablaufzeit für unser JSN-Webtoken festgelegt JSN-Webtoken aus Sicherheitsgründen und zu der wir unseren dekodierten Wert eingegeben haben, eine Ablaufzeit für unser In diesem Bend habe ich die Ablaufzeit auf 1 Stunde gesetzt, was bedeutet, dass nach 1 Stunde unser Token nicht mehr gültig ist und wir dadurch ebenfalls eine Fehlermeldung erhalten In unserem Use-Effekt, nachdem wir diesen dekodierten Wert im JWT-Benutzer gespeichert haben, übergeben wir hier eine Bedingung, wenn das Datum jetzt Punkt Ist größer oder gleich JWTUser Punkt EXP, JWTUser Punkt EXP Wenn diese Bedingung zutrifft, ist unser Token Also hier können wir das Token einfach aus unserem lokalen Speicher entfernen. Also lokaler Speicher, Objekt nicht entfernen und Tgon hier weitergeben Und danach laden wir einfach unsere Seite neu. Fügen Sie also den Standort hinzu und laden Sie ihn neu. Jetzt haben wir bestanden, was bedeutet, dass unser Token gültig ist. Erst dann setzen wir den Benutzer auf JWT. So einfach ist das. Jetzt fragen Sie sich vielleicht, warum wir hier mit 1.000 multiplizieren. Diese Datumspunkt-Now-Funktion gibt also die aktuelle Uhrzeit in Millisekunden zurück Um diese Ablaufzeit also in Millisekunden umzurechnen, müssen wir Sehen Sie sich die Änderungen an und es wird für uns funktionieren. 150. Ausblenden der Zeichenkomponente je nach Benutzer: Jetzt haben wir ein Benutzerobjekt, das anzeigt, dass der Benutzer authentifiziert ist Mit diesem Objekt können wir also Komponenten ein- oder ausblenden Hier in der Navbar wollen wir diese Moders-Logout- und Cat-Links nur anzeigen , wenn der Benutzer angemeldet ist Also hier, in der NaBr-Komponente, übergeben wir diesen Benutzer Speichern Sie das und in der Nabar-Komponente erhalten wir hier einen Benutzerrequisiten Jetzt unten umschließen wir diese drei Links mit den geschweiften Klammern, und hier fügen wir einfach Wenn der Benutzer verfügbar ist, diese Links nur angezeigt. Dies führt jedoch zu einem Kompilierungsfehler Also müssen wir diese Links mit React-Fragmenten umhüllen. Jetzt haben wir dasselbe mit diesen Anmelde- und Anmeldelinks zu tun , denn wenn der Benutzer bereits angemeldet ist, benötigen wir keine Anmelde- oder Anmeldeseite Umschließen Sie diese also mit Cy-Klammern, und hier fügen wir hinzu, dass der Benutzer nicht verfügbar ist Erst dann zeigen wir diese beiden Links Und wieder müssen wir hier jetzt Reaktionsfragmente hinzufügen, wenn wir hier den Benutzernamen anzeigen wollen, wir können das auch tun, indem wir dieses Benutzerobjekt verwenden, die Änderungen speichern und einen Blick darauf werfen. Siehst du, derzeit haben wir kein Benutzerobjekt, und deshalb bekommen wir hier Links zum Anmelden und Registrieren. Lass uns das überprüfen. in den Entwicklertools Öffnen Sie in den Entwicklertools die Registerkarte „Anwendung“ und sehen Sie, dass wir hier kein Token haben. Öffnen wir nun die Anmeldeseite und melden uns mit einer gültigen E-Mail-Adresse und einem gültigen Passwort an. Und klicken Sie auf Senden und sehen Sie hier, dass wir unser Token erhalten. Trotzdem erhalten wir Links zum Anmelden und Registrieren, auch wenn wir den Benutzerstatus haben. Warum passiert das? Einfach, weil dieser Nutzungseffekt in der App-Komponente nur einmal ausgeführt wird , wenn unsere App-Komponente gerendert wird. Wenn wir uns also in unser Formular einloggen, wird unsere App-Komponente bereits gerendert und der Benutzer ist bereits auf Null gespeichert. Lass mich dir etwas Cooles zeigen. Sobald wir diese Seite aktualisieren, können wir sehen, dass wir hier unsere Anmeldelinks erhalten. Um dieses Problem zu lösen, müssen wir unsere Seite nur bei der Anmeldung aktualisieren. Öffnen Sie die Komponente der Anmeldeseite und an der Stelle, an der diese Navigation schreiben wir einfach die Position des Fensterpunkts in Doppelcodes, wir übergeben unsere Startseite Lassen Sie uns nun diese Navigationsvariable entfernen und auch oben diese Navigationseingabe entfernen Speichern Sie die Änderungen und schauen Sie sich das an. Entfernen Sie dieses Token aus dem lokalen Speicher, aktualisieren Sie die Seite und melden Sie sich auf der Anmeldeseite mit E-Mail und Passwort an und senden Sie es ab. Sehen Sie, unsere Seite wird aktualisiert und wir erhalten auch Links zum Anmelden Machen wir jetzt dasselbe mit der Anmeldeseite. Öffnen Sie also die Komponente Anmeldeseite, und an der Stelle dieser Navigation schreiben wir, dass die Position des Fensterpunkts der Startseite entspricht Jetzt entfernen wir diese Navigationsvariable und auch oben entfernen wir die Option „Navigate Import Damit sind wir fertig In der nächsten Lektion werden wir nun Abmeldefunktion implementieren. Und 151. Logout-Funktionalität implementieren: Derzeit entfernen wir beim Abmelden das Token manuell aus unserem lokalen Speicher In unserer Anwendung haben wir jedoch unseren Abmeldelink, den wir für die Implementierung der Abmeldefunktion verwenden können Wenn also unsere Abmeldekomponente gerendert wird, werden wir dieses Token aus dem lokalen Speicher entfernen Dazu fügen wir in der Routing-Komponente unten eine weitere Route hinzu und legen den Pfad fest, fügen wir in der Routing-Komponente unten eine weitere Route hinzu und legen den Pfad fest um Abmeldung und Element zu Hier müssen wir eine neue Komponente für die Abmeldung erstellen. Im Komponentenordner haben wir einen Authentifizierungsordner, und in diesem Ordner erstellen wir eine Komponente namens Logout Fügen wir nun Boilerplate-Code hinzu. Außerdem entfernen wir diesen Betrag und geben null zurück, und geben null zurück weil wir nichts rendern wollen Um nun Code beim Rendern der Komponente auszuführen, müssen wir use effect Hook verwenden. Also fügen wir hier use effect callback function hinzu und als Abhängigkeit übergeben wir ein leeres Array Lassen Sie uns nun unsere Logik in diese Callback-Funktion schreiben. Lokaler Speicherpunkt entferne m, und hier übergeben wir unseren Variablennamen , der Token ist. Speichern Sie die Änderungen. Und in unserer Routing-Komponente fügen wir hier die Logout-Komponente zu den Element-Requisiten Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf den Link zum Abmelden und wir bekommen hier nichts. Aber wenn wir unseren lokalen Speicher überprüfen, können wir sehen, dass das Token von hier entfernt wurde Jetzt müssen wir den Benutzer auf unsere Homepage weiterleiten. Für das, was wir verwenden, richtig, verwenden wir die Position der Fensterpunkte. In der Abmeldekomponente fügen wir hier die Position des Fensterpunkts hinzu, die der Startseite entspricht Speichern Sie die Änderungen und schauen Sie sich das an. Loggen Sie sich mit E-Mail und Passwort in unsere Anwendung ein. Und siehe da, wir haben uns angemeldet. Klicken Sie jetzt auf Abmelden und sehen Sie, dass es funktioniert. Jetzt verfügt unsere Anwendung über beide Funktionen zum Anmelden und Abmelden So werden wir die An - und Abmeldefunktionen implementieren - und Abmeldefunktionen Sie können sehen, wie einfach es ist. wenn Entwickler JWT nicht verstehen Erst wenn Entwickler JWT nicht verstehen, fanden sie es kompliziert 152. Code vereinfachen: In unserer aktuellen Implementierung gibt es kaum ein Problem. Also hier, nach der Anmeldung, arbeiten wir mit lokalem Speicher und setzen dieses Token darin ein. Das Gleiche haben wir auf der Anmeldeseite gemacht. C. Auch in der App-Komponente holen wir uns das Token aus dem lokalen Speicher, und in der Lockout-Komponente entfernen wir dieses Wenn wir morgen beschließen, diesen Tokennamen in einen anderen zu ändern, müssen wir diesen Namen in den verschiedenen Komponenten aktualisieren diesen Namen in den verschiedenen Komponenten Es ist also besser, die gesamte Logik an einem Ort zusammenzufassen. In unserer Benutzerdienstdatei, in der Login-Funktion, geben wir also in der Login-Funktion, geben wir nur das Versprechen unserer API zurück. Stattdessen können wir unser Token auch in dieser Funktion speichern . Lass es mich dir zeigen. Am Ort der Rückkehr fügen wir also await hinzu und um await hinzuzufügen, müssen wir diese Funktion asynchron machen Jetzt können wir diese Antwort als Konstante speichern und die Daten hier destrukturieren Und zum Schluss fügen wir Punktsatzelement für den lokalen Speicher Token ein Punktsatzelement für den lokalen Speicher hinzu und übergeben hier das Datenpunkt-Token Also diese Login-Funktion, die sich komplett um unsere Login-Logik kümmert . Speichern Sie dies und in unserer Login-Komponente entfernen wir diese Konstante, und wir wollen auch nicht, dass dieses lokale Speicherpunktelement vorhanden ist. Jetzt fragst du dich vielleicht, warum wir diese Weiterleitung in unserer Login-Funktion nicht verschieben. Nach erfolgreicher Anmeldung ist es also wohin Benutzer weiterleiten sollen nicht Teil dieser Anmeldefunktion, wohin Benutzer weiterleiten sollen. Das hängt ganz von dieser Login-Funktion ab. Morgen beschließen wir, den Benutzer an einen anderen Ort umzuleiten, dann müssen wir diese Anmeldefunktion nicht ändern . Speichere das. Lassen Sie uns nun diese Komponente der Anmeldeseite schließen und dasselbe für unsere Anmeldelogik tun. Lassen Sie uns also dieses Punktsatzelement für den lokalen Speicher ausschneiden und auch diese Konstante entfernen. Speichern Sie die Änderungen, und in der Benutzerdienstdatei an der Stelle dieser Rückgabe fügen wir await hinzu und speichern das in konstanten und umstrukturierten Daten Danach fügen wir einfach diese lokale Speicherzeile und am Ende von await machen wir diese Funktion asynchron Gut. Lassen Sie uns nun die Abmeldefunktion vereinfachen Sc an diesem lokalen Speicherpunkt entfernen Sie die IM-Funktion. Und in unseren Benutzerdiensten unten erstellen wir eine weitere Funktion namens Logout und fügen sie einfach hier ein, entfernen die Artikelzeile und exportieren diese Funktion aus dieser Datei Speichern Sie dies und in unserer Abmeldekomponente nennen wir diese Abmeldefunktion einfach. Speichern Sie diese Datei Jetzt müssen wir den letzten Code aktualisieren, der sich in der App-Komponente befindet. In unserer Benutzerdienstdatei erstellen wir also eine weitere Funktion namens Guser. In dieser Funktion erhalten wir zunächst Token aus dem lokalen Speicher Const JWT entspricht also Local Storage Dot Get Item. Und hier übergeben wir das Token. Danach dekodieren wir unser JWT-Token. Oben importieren wir die JWT-Decodierung aus der JWT-Decodierung. Danach nennen wir hier in unserer Funktion JWT decode und übergeben hier dieses JWT Das gibt nun unser Benutzerobjekt zurück. Also geben wir das Objekt von hier zurück. Aber was ist, wenn wir dieses Token nicht im lokalen Speicher finden ? Dafür haben wir versucht, Block in unserer App-Komponente zu fangen. Aber an anderen Stellen, wenn wir diese Funktion Get User aufrufen , erhalten wir eine Fehlermeldung. Also fügen wir hier einen Block hinzu, versuchen ihn zu fangen. Und verschiebe diese Zeilen im Tri-Blog. Und wenn wir einen Fehler bekommen, wir hier einfach Null zurück, so einfach ist das. Lassen Sie uns nun diese Funktion „ Benutzer abrufen“ exportieren, speichern und in unserer App-Komponente diese erste Zeile entfernen. An der Stelle dieser JWT-Dekodierung rufen wir die Gatuser-Funktion rufen wir die Gatuser-Funktion Und oben entfernen wir diese JWT-Eingabe. Speichern Sie die Änderungen und kehren Sie zu unserer Benutzerdienstdatei zurück. Wenn wir nun den Namen unserer Token-Variablen ändern möchten, müssen wir das nur in dieser Datei ändern. Jetzt können wir diesen Variablennamen sogar in einer Variablen speichern. Oben erstellen wir eine Variable namens Tokenname und setzen sie in ein Doppelcode-Token. nun im Zeichen der Funktion Wählen Sie nun im Zeichen der Funktion diese Token-Zeichenfolge aus und drücken Sie Strg plus D oder Befehl plus D für mehrere Cursors und ersetzen Sie sie durch die Tokennamenvariable. Jetzt müssen wir diesen Namen nur noch an einer einzigen Stelle ändern und sehen, dass unser Code sauberer und wartungsfreundlicher aussieht Im nächsten Abschnitt werden wir sehen, wie wir geschützte APIs aufrufen können, und damit werden wir dieses Projekt fast abschließen S im nächsten Abschnitt. 153. Abschnitt 14 Aufruf von geschützten APIs und Routen: Willkommen im Abschnitt 14 des ultimativen React-Kurses. In diesem Abschnitt werden wir sehen, wie wir geschützte APIs aufrufen können, was einfach bedeutet, dass einige unserer APIs nur für angepasste Benutzer bestimmt sind. Wie auf unserer Seite „Meine Bestellung“ müssen wir alle Bestelldetails des aktuellen angemeldeten Benutzers abrufen. Wir werden also sehen, wie wir geschützte APIs aufrufen können, und wenn der Benutzer nicht angemeldet ist, leiten wir den Benutzer einfach zur Anmeldeseite weiter. Außerdem werden wir sehen, wie wir geschützte Routen verwalten können. Ich freue mich sehr über diesen Abschnitt und hoffe, Sie auch. Also lass uns anfangen. 154. Die Funktion „In den Warenkorb“ verstehen: Bevor wir nun die Head-to-Cart-Funktion in unserer Anwendung implementieren , wollen wir uns mit dieser Funktion vertraut machen. Zuallererst haben wir also die Kopf-to-Cart-Taste für die Komponenten. erste befindet sich auf der Produktkarte und zweite auf der einzelnen Produktseite. Für den Warenkorb erstellen wir also eine State-Variable, die Produkte, die wir unserer Karte hinzugefügt haben, zusammen mit der Menge gespeichert werden . Wenn wir beispielsweise ein iPhone 14 haben, können wir die Menge dieses Produkts auswählen und dann auf die Schaltfläche „Zum Einkaufswagen gehen“ klicken, und unser Iphone 14 wird mit dieser Menge in unser Einkaufswagen-Array aufgenommen . Für jedes Produkt haben wir also ein neues Objekt mit zwei Eigenschaften: Produkt, das Produktobjekt, und Menge, was die aktuell ausgewählte Menge ist. In diesem Warenkorb-Array können wir mehrere Produkte haben, und wir zeigen die Warenkorbgröße in unserer Navigationsleiste an. Dies ist der erste Teil. Teil zwei ist, dass unsere Karte eine lokale Variable ist, was bedeutet, dass diese Karte wieder leer ist, wenn wir die Seite aktualisieren . Wir wollen es nicht, oder? Also, was ist die Lösung hier? Nachdem wir diese Kartendetails im Bundesstaat hinzugefügt haben, können wir die Benutzerkartendaten im Backend speichern. Und beim Aktualisieren erhalten wir diese Kartendetails vom Backend. Wenn beim Hinzufügen von Produkten zur Karte ein Fehler auftritt, stellen wir unsere Karte im vorherigen Zustand wieder auftritt, stellen wir unsere Karte im her. So einfach ist das. Das haben wir bereits in unserem Abschnitt „PI aufrufen“ getan. Zunächst werden wir sehen, wie wir unsere Kartendaten im lokalen Bundesstaat speichern können . 155. Lokal in den Warenkorb legen: Beginnen wir mit unserem ersten Schritt, dem Hinzufügen von Produkten im lokalen Bundesstaat. Der erste Schritt, um eine Zustandsvariable hinzuzufügen, besteht also darin, zu entscheiden, wo wir unsere Zustandsvariable erstellen. Also hier ist eine Komponente unserer Anwendung. Wir haben die App-Komponente als Stammkomponente. Darin befinden sich zwei Komponenten: Nabar und Routing. Und in diesem Routing haben wir eine einzelne Komponente für die Produktseite, und darin haben wir unsere Kopf-zu-Karten-Schaltfläche Wir benötigen ein Array mit zwei Komponenten, einer Bar und einer einzelnen Produktseite. Lassen Sie mich Ihnen nun eine Abkürzung geben, um zu entscheiden, wo wir unsere Zustandsvariable definieren. Wenn unsere Zustandsvariable für den Zugriff auf zwei verschiedene Komponenten benötigt wird , sollten wir diese Zustandsvariable in der nächstgelegenen übergeordneten Komponente definieren . In einfachen Worten, schauen Sie sich einfach an, welche übergeordnete Komponente sowohl NaBr als auch der einzelnen Produktkomponente am nächsten ist Also hier ist die nächstgelegene übergeordnete Komponente unsere App-Komponente. Und wenn wir Warenkorb in einer Komponente definieren, können wir diesen Warenkorbstatus nur dann als Requisiten in diesen beiden Komponenten übergeben diesen Warenkorbstatus nur dann als Requisiten in diesen beiden Komponenten In unserer App-Komponente fügen wir also nach diesem Benutzerstatus nach diesem Benutzerstatus eine weitere Statusvariable namens cart und set cart Und als Standardwert übergeben wir das rechte, leere Array. Nun, zuallererst, was wir in der NBR-Komponente brauchen. Wir müssen nur die Anzahl der Produkte auf unserer aktuellen Karte anzeigen die Anzahl der Produkte auf unserer aktuellen Karte Als Requisiten geben wir die Anzahl der Karten weiter, die der Punktlänge des Einkaufswagens entspricht Speichern wir das, und in der NBA-Komponente erhalten wir die Kartenanzahl in den Requisiten und unten, an der Stelle dieser Null, zeigen wir einfach diese Sag das und jetzt brauchen wir uns um diesen Navar keine Sorgen zu machen. Nun zurück zu einer Komponente hier an der Stelle , wo Karte und Seitenkarte in der einzelnen Produktkomponente übergeben in der einzelnen Produktkomponente Wir können hier eine Funktion erstellen, Const Head to Cart, Pfeilfunktion, und darin schreiben wir unsere Logik für das Hinzufügen von Artikeln in das Warenkorb-Array Hier im Funktionsparameter erhalten wir das ausgewählte Produkt und auch die Menge dieses Produkts, die Anzahl der Produkte, die wir hinzufügen müssen Hier setzen wir einfach Karte zu Reihe. Zuerst fügen wir alle vorherigen Kartenwerte und danach fügen wir ein neues Objekt Hier setzen wir das Produkt auf dieses Produkt und die Menge auf diese Menge. Oder wir können diesen Code vereinfachen, indem wir beide entfernen. Wenn Sie später von dieser Syntax verwirrt sind, Sie sich keine Sorgen, Sie können diese alte Syntax verwenden. Es hängt ganz von dir ab. Lassen Sie uns diese Kopf-zu-Karten-Funktion nun durch Requisiten weitergeben. In der Routing-Komponente geben wir also von Karte zu Karte Speichern Sie diese Datei, und in der Routing-Komponente kommen wir zur Kartenfunktion in den Requisiten Und übergeben Sie es erneut in der Komponente für die einzelne Produktseite. Kopf in den Einkaufswagen entspricht also Kopf in den Einkaufswagen. Speichern Sie diese Datei, und in unserer Komponente für einzelne Produktseiten gelangen wir endlich zu den Requisiten von Kopf zu Warenkorb Und unten, in unserer Schaltfläche „Kopf in den Einkaufswagen“, geben wir das Klickereignis und fügen darin die Pfeilfunktion hinzu, und hier rufen wir die Head-to-Cart-Funktion auf Und als erstes Argument übergeben wir unser Produktobjekt, das wir vom Backend erhalten. Schau, und als zweites Argument übergeben wir die Menge. Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Öffnen Sie zunächst die Entwicklertools und eine beliebige Produktseite. Und von hier aus können wir die Menge ändern und auf die Schaltfläche „In den Warenkorb legen“ klicken. Und sehen Sie oben, wir kommen gegen eins. Öffnen wir nun eine weitere Produktseite und klicken auf „In den Warenkorb“. Und hier können wir sehen, wie die Zählungen aktualisiert wurden. Sehen wir uns nun unsere Warenkorb-Reihe an. Von hier aus öffnen wir die Registerkarte Komponenten und wählen unsere App-Komponente aus. Hier können wir das Cart-Array sehen. Ändern Sie nun dieselbe Produktmenge und klicken Sie auf zwei Karten. Siehst du, hier bekommen wir drei Produkte, und das ist der Bug. Also müssen wir das beheben. In unserer App-Komponente entfernen wir also diese Set-Card-Funktion und schreiben die Logik von Grund auf neu. Also erstellen wir zunächst eine neue Variable namens updated card und fügen alle vorherigen Werte hinzu, indem wir den Spread-Operator verwenden. Jetzt finden wir in diesem Array einen selektiven Produktindex. Also aktualisierter Card Dot Find Index. Hier erhalten wir jeden Artikel und überprüfen hier den Zustand bis zum Punkt Punkt Produktpunkt Unterstrich-ID entspricht Produkt, Punkt Unterstrich-ID Und wir speichern diesen Index in der Variablen namens Produktindex. Jetzt gibt diese Find-Index-Methode den Indexwert des Produkts zurück. Und wenn unser ausgewähltes Produkt in diesem Array nicht verfügbar ist, wird minus eins zurückgegeben. Hier müssen wir also die Bedingung erfüllen, wenn dieser Produktindex minus eins entspricht, was bedeutet, dass das Produkt nicht in unserem Warenkorb ist Dann rufen wir die aktualisierte Cart Dot Push-Methode auf. Und hier schieben wir Objekt mit Produkt zum Produktobjekt. Menge bis zu dieser Menge. Andernfalls werden wir nur die Menge des hinzugefügten Produkts aktualisieren , den Warenkorb aktualisiert. Hier geben wir den Produktindexpunkt an. Die Menge plus entspricht dieser Menge Wenn das Produkt nicht verfügbar ist, fügen wir ein neues Objekt mit den Eigenschaften Produkt und Menge Andernfalls addieren wir die Menge mit der alten Menge ihres Produkts. Am Ende setzen wir einfach den Warenkorb auf unsere aktualisierte Karte. Speichern Sie die Änderungen und werfen Sie einen Blick darauf, aktualisieren Sie die Seite, fügen Sie einen Artikel und klicken Sie auf In den Warenkorb legen. Sehen Sie, dass es hinzugefügt wurde. Ändern Sie nun die Menge und klicken Sie erneut auf In den Warenkorb legen. Siehe hier, nur Mengenaktualisierungen. 156. Geschützte API aufrufen: In der vorherigen Lektion haben wir unsere Produkte also im lokalen Kartenstatus gespeichert. Jetzt werden wir sehen, wie wir diese Head-to-Card-API nennen. Jetzt fragen Sie sich vielleicht, warum ich so viel Wert darauf lege , diese API aufzurufen? Ist das dieselbe API wie das Abrufen von Produkten oder das Abrufen von Kategorien Und die Antwort lautet nein, es ist nicht dieselbe API , die wir zuvor aufgerufen haben Dies ist die API, auf die nur angemeldete Benutzer zugreifen können . Lass es mich dir zeigen. Also Tender-Client-Panel und hier fügen wir eine neue Anfrage hinzu, wählen hier Anfrage posten und schreiben die API in die SDTP-Spalte, doppelten Schrägstrich, lokalen Host, Spalte 5.000 Schrägstrich API, Schrägstrich CAT hier übergeben wir unsere Produkt-ID Im Moment geben Sie hier einfach eine zufällige ID ein, und wir müssen die Mengennummer im Hauptteil dieser Anfrage übergeben Mengennummer im Hauptteil Wählen Sie also body aus, und hier im JSON übergeben wir einfach die Menge an fünf. Und sende die Anfrage. Hier können wir sehen, dass wir eine Fehlermeldung erhalten, Zugriff verweigert wurde und kein Token bereitgestellt wurde. Lassen Sie mich Ihnen nun zeigen, wie wir diesen Fehler vom Backend bekommen Im Bend-Projekt haben wir diesen Routenordner und darin haben wir eine CAT-Datei, und darin haben wir eine in der ich alle CAT-APIs definiere Jetzt müssen wir in Zeile 27 die Route schneiden, und hier füge ich beide Metallwaren hinzu. Mach dir keine Sorgen. Falls Sie Node Jazz nicht kennen, erzähle ich Ihnen nur, wie wir zu diesem Fehler kommen. Sie müssen keine einzige Zeile im Backend codieren. Dieser Oath ist also eine Middleware, die zuerst ausgeführt wird, bevor unser Haupt-API-Code Schauen wir uns nun an, was in diesem Moth steckt. Im Middleware-Ordner haben wir also beide Middleware, und hier haben wir Zunächst ruft diese Funktion unser JSON-Webtoken aus unserem Anforderungsheader namens X ein Token ab Und wenn wir dann unser JSON-Webtoken nicht in diesem Header übergeben , erhalten wir den Fehler „Zugriff verweigert“ mit dem Statuscode 401. Und wenn wir ein Token haben und dieses Token durch den geheimen JWT-Schlüssel verifiziert ist, dann wird es unsere API-Mittelwertlogik ausführen, wie zum Beispiel die Übersicht über diese beide Middleware Kurz gesagt, um auf geschützte APIs zugreifen zu können, müssen wir unser JSN-Webtoken in unserem Header XTken übergeben Nur dann können wir auf geschützte APIs zugreifen. Fast alle Anwendungen geben Token irgendwie an das Backend weiter, und der gebräuchlichste und sicherste Weg ist der Header. In unserer Anwendung müssen wir auch unser JSN-Webtoken im X oder Token setzen unser JSN-Webtoken im X oder Token also das Token im Header in unserem Utils-Ordner zu übergeben, erstellen wir eine weitere Datei namens set autocon dot js In dieser Datei oben importieren wir nun den API-Client aus dieser API-Client-Datei , der unsere vorgefertigte Axios-Variable ist Danach definieren wir die Funktion const set token. Und im Parameter erhalten wir unsere Token-Pfeilfunktion, und innerhalb dieser Funktion fügen wir eine Bedingung Wenn ein Token verfügbar ist, legen wir die Standardwerte für Punkte, allgemeine Punktüberschriften und eckige Klammern für den API-Client allgemeine Punktüberschriften und eckige Klammern fest. Hier übergeben wir unseren Header-Namen , der X oder Token ist Wir definieren denselben Header-Namen im Backend. In Ihrer Anwendung könnte es anders sein. Sie müssen also den Namen hier übergeben, der entspricht, wir übergeben Token Jetzt werden wir in L diesen Header entfernen, löschen, kopieren und ihn hier einfügen Und am Ende exportieren wir einfach standardmäßig diese Set- oder Token-Funktion. Speichern Sie diese Datei, und jetzt rufen wir in unserer App-Komponente außerhalb dieser Funktion unserer App-Komponente außerhalb dieser Funktion die Set- oder Token-Funktion auf. Und hier müssen wir unser JSON-Webtoken übergeben, das im lokalen Speicher gespeichert werden kann. Also können wir hier lokalen Speicher, Punkt, Objekt und Token schreiben . Wie wir wissen, definieren wir jetzt alle unsere lokalen Speichertoken in der Benutzerdienstdatei. Anstatt diesen lokalen Speicher hier zu schreiben, können wir ihn ausschneiden und in der Benutzerdienstdatei unten eine neue Funktion namens Get JWT exportieren Und darin geben wir einfach Local Storage Dot Get Item zurück, und hier übergeben wir den Token-Namen Speichern Sie diese Datei und in unserer App-Komponente können wir hier die Gt JWT-Funktion aufrufen So einfach ist das. Für unsere Anwendung müssen wir unseren Token-Header nicht bei jeder einzelnen Anfrage senden . Das haben wir für alle unsere API-Aufrufe festgelegt. 157. Aufruf der Add to Cart API: Rufen wir nun unsere Head-to-Card-API auf. Im Ordner Services erstellen wir eine neue Datei, Call Card Services, in der wir alle APIs für unsere Karte definieren. So wie wir es für Benutzerdienste getan haben. Auf diese Weise können wir unsere API-Aufrufe problemlos verwalten und müssen denselben API-Aufruf nicht mehrmals in unsere Anwendung schreiben . Also oben importieren wir den API-Client aus dem Utils-Slash-API-Client Erstellen Sie nun eine neue Funktion namens Add to Cart API. Und innerhalb dieser Funktion werden wir unsere API aufrufen. Also API-Client Dot Post. Hier in den Backticks fügen wir Schrägstrich-CRTs hinzu, jetzt müssen wir hier unsere ausgewählte Produkt-ID hinzufügen, damit wir diese Produkt-ID als Parameter dieser Funktion erhalten können , und wir benötigen die Menge dieses und wir benötigen die Menge Jetzt übergeben wir in unserer API die Dollar Und beim zweiten Parameter übergeben wir unser Körperobjekt Und dabei setzen wir Menge auf Menge oder wir können das entfernen. Dieser Ausdruck gibt das Versprechen zurück. Also können wir dieses Versprechen von hier aus einfach zurückgeben. A, lassen Sie uns diese Funktion von hier aus exportieren , die Änderungen speichern und in unserer App-Komponente in der Head-to-Cut-Funktion, nachdem wir unseren lokalen Status aktualisiert haben, rufen wir die Kopf-zu-Cut-API-Funktion von Kartendiensten auf. Und hier müssen wir zwei Argumente übergeben. Die erste ist die aktuelle Produkt-ID, also die Produktpunkt-Unterstrich-ID, und die zweite ist die Menge dieses Produkts Wie wir jetzt wissen, ist diese Funktion vielversprechend. Wir können das mit der Methode then und der Cache-Methode handhaben, oder wir können auch try and catch verwenden. Aber ich persönlich verwende gerne die Then-and-Catch-Methode. Dann wissen Sie jetzt, was wir tun werden , wenn wir das Produkt erfolgreich zu CAT hinzugefügt haben. Hier können wir einfach Warnung oder eine Toast-Benachrichtigung anzeigen Im Moment speichern wir einfach das Punktprotokoll, diese Antwortpunktdaten Und bei der Cache-Methode müssen wir mit Fehlern umgehen Im Moment protokollieren wir diese Fehlerpunkt-Antwort einfach in der Konsole . Und wenn das Produkt unserer Karte nicht hinzugefügt wird, setzen wir unseren Kartenstatus auf den vorherigen Status zurück. Stellen Sie einfach Karte zu Karte ein. Speichern Sie die Änderungen und schauen Sie sich das an. Öffnen Sie die Konsole, ändern Sie die Menge und legen Sie Glicon in den Warenkorb und sehen Sie die Nachricht, Artikel zur Karte hinzugefügt wurde Lassen Sie uns das jetzt in unserer Datenbank überprüfen. Also im Mongo D werden Pass, offene Kartensammlung. Siehst du, hier bekommen wir ein Dokument, und darin haben wir unser Produkt Perfekt. Lassen Sie uns jetzt einfach eine Toast-Benachrichtigung für Erfolg und Fehler anzeigen Toast-Benachrichtigung für Erfolg und Fehler Jetzt fragst du dich vielleicht, was eine Toast-Benachrichtigung ist? Lass es mich dir in nur einer Minute zeigen. Öffnen Sie zunächst das Terminal und in das neue Terminal schreiben wir NPM, I, React, Dessify und Mit der React to Stify Library können wir unsere Benachrichtigungen sehr einfach und modern anzeigen sehr einfach Minimiere nun dieses Terminal und oben importieren wir den Toast-Container und auch die Toast-Methode aus React Außerdem müssen wir die CSS-Datei importieren , um CSS-Datei Also importieren, reagieren, reagieren reagieren , CSS-Datei stiften Jetzt müssen wir diese Toast-Container-Komponente zu unserer Anwendung hinzufügen , damit wir sie an einer beliebigen Stelle in dieser Tube hinzufügen können Also hier fügen wir die Toast-Container-Komponente hinzu. Jetzt müssen wir nur noch unsere Nachricht in diese Toast-Funktion einfügen unsere Nachricht in diese Toast-Funktion In unserer damaligen Methode fügen wir also an der Stelle dieser Konsole Toast hinzu Jetzt können wir hier mehrere Methoden auswählen. Zum Beispiel haben wir Erfolg, bei dem die Benachrichtigung in grünem Text angezeigt wird. Und hier geben wir unser Nachrichtenprodukt weiter, das erfolgreich hinzugefügt wurde. Lassen Sie mich Ihnen jetzt auch andere Methoden zeigen. Also duplizieren Sie diese Zeile noch viermal und ändern Sie diese Methode auf Fehler für rote Farbe, Warnung für gelbe Warnung, Info für blaue Farbe, und wir haben auch die Standardeinstellung. Dafür werden wir nichts weitergeben. Außerdem fügen wir bei der Catch-Methode einen Toast-Dot-Fehler und eine Meldung hinzu, dass das Produkt nicht hinzugefügt werden konnte Heb dir die Ginges auf und sieh sie dir an. Klicken Sie auf In den Einkaufswagen und sehen Sie hier oben rechts, wir unsere Toast-Benachrichtigungen erhalten Wenn wir mit dem Cursor auf die Benachrichtigung zeigen, hört sie dort auf. Das sind also die Toast-Benachrichtigungen. Sie können sehen, wie einfach und unkompliziert wir Benachrichtigungen hinzufügen können Jetzt, wo Toast-Benachrichtigungen in der oberen rechten Ecke angezeigt werden, möchte ich sie in der unteren rechten Ecke anzeigen In der Toast-Container-Komponente haben wir eine Sonde namens Position Wenn Sie Autoizon nicht bekommen, drücken Sie Strg plus Leertaste oder Befehl plus Leertaste und sehen Sie hier, wir bekommen ein paar Eigenschaften Hier wählen wir unten rechts aus. Außerdem können wir diese Toast-Benachrichtigung weiter anpassen. Dazu können Sie in der offiziellen Dokumentation nachschlagen. Sie erklären es in sehr einfacher und leichter Sprache. Außerdem entfernen wir von hier aus diese unerwünschten Toast-Benachrichtigungen. O 158. Benutzerkorb vom Backend abrufen: Wenn wir also derzeit Produkte zu unserer Karte hinzufügen, werden diese erfolgreich in unsere Datenbank aufgenommen Jetzt müssen wir auf unserer Kartenseite nur Kartendetails in unserer Tabelle anzeigen. Also wenn eine Karten-Services-Datei, und hier definieren wir eine neue Funktion namens Get Card API. Und in dieser Funktion rufen wir einfach den API-Client Dot GAT auf. Und um die Benutzerkarte zu bekommen, übergeben wir SCAT. Sie können unsere API-Dokumentation als Referenz verwenden. Dieser Ausdruck gibt nun ein Versprechen zurück. Also geben wir das zurück und exportieren wir diese Funktion. Speichern Sie diese Datei, und in unserer App-Komponente nach dieser Head-to-Card-Funktion erstellen wir nach dieser Head-to-Card-Funktion eine neue Funktion namens Get card. Und innerhalb dieser Funktion rufen wir einfach unsere Get Card-API auf. Nun, was wird diese Funktion schreiben? Also gut, wir kommen her, versprochen. Punkt, hier bekommen wir eine Antwort und setzen den Warenkorb einfach auf die Punktdaten der Antwort. Bei der Catch-Methode fügen wir einen Toast-Dot-Fehler hinzu, etwas ist schief gelaufen Nun, auf welcher Seite wir die Karten-API abrufen möchten. Sie könnten auf der Kartenseite sagen, und das ist die falsche Antwort Lassen Sie mich Ihnen zeigen, was passiert, wenn wir unsere Gecard-Funktion auf der Warenkorbseite aufrufen unsere Gecard-Funktion auf der Warenkorbseite In der Routing-Komponente übergeben wir die Get-Card-Requisiten an den G-Cart. Speichern Sie dies und in der Routing-Komponente erhalten wir zunächst die Requisiten und übergeben sie direkt an die Kartenseitenkomponente Karte auf G-Karte übertragen. Speichern Sie dies und in der Komponente Warenkorbseite erhalten wir unsere Gcard-Funktion in den Requisiten, und im Use-Effekt rufen wir diese Verwenden Sie also den Effekt und übergeben Sie die Callback-Funktion und das leere Array als Und in der Callback-Funktion rufen wir einfach die Get Card-Funktion Sag die Änderungen und sieh sie dir an. Hier bekommen wir einen Fehler. Sehen wir uns das also in der Konsole an. Hier bekommen wir getcardpi Punkt n ist nicht die Funktion. In unserer App-Komponente hier habe ich vergessen, diese Funktion aufzurufen, die Änderungen zu speichern und sie mir anzusehen Sehen Sie, unser Fehler ist weg, und wählen Sie auf unserer Registerkarte „Komponente“ die App-Komponente aus, und hier erhalten wir ein Kartenarray. Wenn wir jetzt die Seite aktualisieren, erhalten wir auch die Kartendetails. Lassen Sie mich Ihnen jetzt den Hauptfehler zeigen. Gehen Sie zur Produktseite und aktualisieren Sie die Seite. Derzeit haben wir keine Artikel in unserem Warenkorb, aber im Backend haben wir zwei Artikel. Wenn wir denselben Artikel hätten, im lokalen Bundesstaat im Warenkorb hätten wir im lokalen Bundesstaat im Warenkorb ein neues Produkt mit neuer Menge. Aber im Backend haben wir eine andere Menge. Wenn wir Get card only auf der Warenkorbseite aufrufen, haben unsere Backend-Kartendaten und der lokale Status des Warenkorbs grundsätzlich unsere Backend-Kartendaten und haben unsere Backend-Kartendaten und der lokale Status des Warenkorbs unterschiedliche Daten, und das wollen wir nicht. Wir können diese Funktion „Karte abrufen“ also in der App-Komponente aufrufen. In unserer App-Komponente fügen wir also einen weiteren Nutzungseffekt hinzu, und hier im Callback rufen wir unsere Funktion Get card Aber hier müssen wir die Bedingung weitergeben. Wenn der Benutzer verfügbar ist, rufen wir diese Funktion „Karte abrufen , da diese API nur für angemeldete Benutzer zugänglich ist. Und im Abhängigkeits-Array können wir hier einen Benutzer hinzufügen. Wenn sich der Benutzer ändert, wird diese Get Card-API ausgeführt. Speichern Sie die Änderungen und werfen Sie einen Blick darauf, aktualisieren Sie die Seite und sehen Sie in der Karte, dass wir unsere Kartendaten erhalten. Nun, eine Frage, die Sie sich vielleicht stellen, warum wir die Getcard-Funktion nicht aus der Kartenseitenkomponente entfernen Wir können sie also als doppelte Überprüfung unserer Kartendaten verwenden. Wenn Sie diesen Nutzungseffekt entfernen möchten, können Sie das auch tun. Es ist völlig in Ordnung. Lass mich das auch entfernen. Jetzt müssen wir nur noch unsere Kartendetails in dieser Tabelle anzeigen. Für die Anzeige von Kartendetails benötigen wir also den Kartenstatus in dieser Komponente. Also zurück zu unserer App-Komponente. Anstelle dieser Katzenkarten-Requisiten fügen wir Karte zu Karte hinzu Und in der Routing-Komponente ändern wir auch diesen Wagen und geben ihn von Wagen zu Einkaufswagen Und endlich, auf unserer CAT-Seite, bekommen wir hier unser CAT-Array. Zur Überprüfung protokollieren wir dieses CAT-Array über die Konsole , speichern die Änderungen und öffnen auf der CAT-Seite die Konsole, aktualisieren die Seite und sehen, hier erhalten wir ein CAT-Array, das Array von Objekten mit Produkt- und Mengeneigenschaften. In unserer Warenkorbkomponente unten, im Hauptteil, fügen wir die Warenkorb-Punktmap hinzu. Hier erhalten wir einen einzelnen Artikel, Pfeilfunktion, und hier geben wir einfach diese Tabellenzeile zurück. Nun, hier ist dieser Artikel ein Objekt, also können wir ihn destrukturieren und uns Produkt- und Mengeneigenschaften anzeigen lassen Produkt- und Mengeneigenschaften anzeigen Ich werde ein bisschen schneller weil wir seit langem an React arbeiten, und Sie wussten diese Dinge bereits Wenn ich dir jeden Schritt erkläre, wirst du dich bestimmt langweilen. Also fügen wir zunächst in der Tabellenzeile der Produktpunkt-Underscore-ID ein identifizierendes Attribut Als Nächstes ersetzen wir diesen Namen durch den Produktpunkttitel. Dann fügen wir den Produktpunktpreis hinzu. Als Nächstes haben wir die Mengeneingabe. Hier geben wir also die Menge an diese Menge und den Lagerbestand an den Produktbestand weiter. Im Moment verwenden wir die Funktion „ Menge festlegen“. Und insgesamt geben wir die Menge an den Produktpunkt Preis weiter. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, in der Tabelle bekommen wir unsere Artikel. Wunderschön. Lassen Sie uns nun diese Zwischensumme berechnen. Dazu erstellen wir oben eine neue Statusvariable also uste aus und wählen Sie die Snippets aus, geben Sie ihr einen Namen, eine Zwischensumme und setzen Sie Zwischensumme und Standardwert auf Null Um die Zwischensumme zu zählen, verwenden wir die Callback-Funktion use effect, pass here und fügen im Abhängigkeits-Array das verwenden wir die Callback-Funktion use effect, pass here und fügen im Abhängigkeits-Array das Cart-Array hinzu. Kannst du mir sagen, warum wir hier use effect verwenden? Stimmt. Denn wenn wir unsere Warenkorbdaten ändern , wollen wir auch die aktualisierte Zwischensumme sehen In der Callback-Funktion definieren wir also zuerst, dass die Summe gleich Null ist. Dann verwenden wir Cart Dot für H Loop. Und hier bekommen wir die Pfeilfunktion für jeden Artikel. Und hier gilt: Summe plus entspricht Artikelpunktprodukt, Punktpreis entspricht Artikelmenge Und zum Schluss setzen wir einfach die Zwischensumme auf diese Summe. Jetzt geben wir unten die Zwischensumme ein und als Endergebnis schreiben wir die Zwischensumme plus die Versandgebühr, Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, hier erhalten wir unsere Zwischensumme und Summe entsprechend unseren Kartendaten 159. useContext-Hook: Derzeit haben wir in unserer Anwendung den Benutzerstatus und den Kartenstatus in unserer App-Komponente Jetzt müssen wir, wie in unserer Kartenkomponente, diese Benutzerdetails und das Profil oben anzeigen . Eine Lösung besteht darin, unser Benutzerobjekt mithilfe von Requisiten durch die Routing-Komponente und dann in die Kartenkomponente weiterzuleiten Requisiten durch die Routing-Komponente und dann in die Kartenkomponente Wir haben das schon so oft mit diesem Kartenstatus gemacht, aber das ist wirklich Zeitverschwendung und das wird auch als Prop-Drilling bezeichnet , was bedeutet, dass wir alle Komponenten bohren nur eine Requisite an die untergeordnete Komponente zu übergeben Eine andere Möglichkeit, Daten zu übergeben, ist die Verwendung des Context-Hooks. Use Contact Hook wird also verwendet, um globale Daten in React-Anwendungen wie Themen-, Benutzer-, Kartendetails usw. zu verwalten globale Daten in React-Anwendungen wie Themen- . In einfachen Worten, durch die Verwendung von Use Context Hook können wir den globalen Zugriff auf unsere Daten durch jede Komponente ermöglichen Wenn wir also unsere Benutzerdaten global machen, können wir in jeder beliebigen Komponente darauf zugreifen, ohne manuell Requisiten Schauen wir uns an, wie man Kontexte erstellt. Um also einen Kontext in React zu erstellen, müssen wir drei einfache Schritte ausführen. Erstens, den Kontext erstellen, zweitens den Kontext bereitstellen und drittens die Kontexte konsumieren. Mach dir über keinen von ihnen Sorgen. Sehen Sie sich das an und am Ende werden Sie die Magie der Kontexte sehen. Fangen wir also mit Schritt Nummer eins an , dem Erstellen des Kontextes. Hier erstellen wir also den globalen Status für unseren Benutzer. Also erstellen wir im Quellordner einen weiteren Ordner namens Context. Und in diesem Ordner werden wir alle unsere Kontakte definieren. Also hier erstellen wir eine neue Datei namens user Contacts dot JS. Um nun einen Kontext zu erstellen, importieren wir zunächst die Funktion „Kontext erstellen“ aus der React-Bibliothek. Diese Funktion wird verwendet , um Kontext zu erstellen. Jetzt rufen wir diese Funktion zum Erstellen von Kontexten auf, und hier übergeben wir Null für den Standardwert und speichern diesen in einer Variablen namens Benutzerkontext. Sie können angeben, was Sie wollen, aber es ist besser, denselben Namen als Fine zu verwenden. Und am Ende exportieren wir den Standardbenutzerkontext. Damit ist unser erster Schritt abgeschlossen. Lassen Sie uns nun Schritt Nummer zwei machen , der den Kontext bereitstellt. Wenn wir also unseren Benutzerstatus definieren, müssen wir die Kontexte in dieser Komponente eingeben. In der App-Komponente oben importieren wir also Benutzerkontexte aus Context, Schrägstrich-Benutzerkontexte Hier müssen wir definieren, welche Komponenten auf diesen Benutzerkontext zugreifen sollen Also nochmal, in dieser Hierarchie, wenn Sie Benutzerdaten an die Kartenkomponente übergeben möchten, und wir wollen auch, dass unsere Benutzerdaten in der Navbar-Komponente Hier müssen wir also nur die Daten für die Navbar- und Routing-Komponenten bereitstellen , und auf diese Daten kann in all ihren untergeordneten Komponenten zugegriffen in all ihren untergeordneten Schließen Sie diese beiden Komponenten also mit dem Punktanbieter für den Benutzerkontext Unabhängig davon, welche Komponente Sie zwischen diesem Anbieter übergeben, er und seine untergeordneten Komponenten können er und seine untergeordneten Komponenten auf diesen Kontextwert zugreifen. Jetzt können wir Werte übergeben, indem Wertattribut in diesem Kontextanbieter verwenden. Schreiben Sie also Wert gleich, wir fügen hier einfach diesen Benutzer In diesem Wertattribut können wir auch Funktionen, Objekte, alles Mögliche übergeben Lassen Sie uns nun sehen, wie Sie auf diese Variable in unserer Warenkorbseitenkomponente zugreifen können. Öffnen Sie unsere Kartenseitenkomponente , in der wir diesen Wert verwenden möchten. Aber wie können wir auf diesen Wert zugreifen? Oben importieren wir also den Use Context-Hook aus der React-Bibliothek. Und innerhalb dieser funktionalen Komponente schreiben wir Nutzungskontexte, und zwar mit Ausnahme eines Arguments, das unser Benutzerkontext ist. Also müssen wir diesen Benutzerkontext aus dem Schrägstrich-Benutzerkontext unseres Kontextes importieren aus dem Schrägstrich-Benutzerkontext unseres Kontextes Übergeben Sie nun diesen Benutzerkontext in diesen Verwendungskontext-Hook und wir speichern diesen Wert in einer Variablen namens Benutzerobjekt da wir hier bereits den Benutzer für unser Bild definiert Lassen Sie uns nun trösten, speichern Sie die Änderungen und werfen Sie einen Blick darauf. Hier in der Anwendung mein Token abgelaufen Also muss ich mich erneut anmelden und hier gehen wir zur Kartenseite. Sehen Sie hier in der Konsole, wir bekommen unser Benutzerobjekt. Welchen Wert Sie auch immer in diesem Kontextanbieter übergeben, wir können auf diesen Wert zugreifen, indem wir den Context-Hook verwenden. Wenn Sie diese drei Schritte verstehen , dann herzlichen Glückwunsch. Sie verstehen den Use-Context-Hook. Also hier an der Stelle dieses Benutzerbildes fügen wir Backticks hinzu, und innerhalb dieses coolen SDDB-Doppelgängers für unseren Schrägstrich, Lokaler Host, Spalte 5.000 Schrägstrich, Schrägstrich und hier fügen wir unseren Profilbildnamen und hier fügen wir Also Dollar, Cully-Klammern, Benutzerobjekt, Fragezeichen, Profilauswahl, denn wenn unser Benutzer Null ist , erhalten wir hier eine Fehlermeldung. Als Nächstes fügen wir an der Stelle dieses Namens dem Benutzerobjekt einen Namen hinzu, des Fragezeichens Und als Nächstes, an der Stelle dieser E-Mail, geben wir hier die E-Mail an das Benutzerobjekt weiter, markieren Sie die E-Mail mit Punkt. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Benutzerdaten, ohne Requisiten durchgehen zu müssen Jetzt brauchen wir dieses Benutzerbild nicht, also entfernen Sie es, und jetzt können wir dieses Benutzerobjekt in Benutzer umbenennen Jetzt zurück zu unserer App-Komponente. Hier übergeben wir den Benutzer als Requisiten. Das müssen wir nicht mehr tun. Entferne diese Benutzerrequisiten von hier und in der neueren Komponente an der Stelle, an der dieser Benutzer aus den Requisiten abgerufen wurde Hier rufen wir use Context Hook auf und darin übergeben wir unseren Benutzerkontext und speichern diesen Wert in der Benutzervariablen Speichern Sie diese und sehen Sie , dass es genauso funktioniert. 160. Übung Warenkorbkontext erstellen: Jetzt ist es an der Zeit, wenig Sport zu treiben. Da wir unseren Benutzerkontext definieren, können wir auch den Warenkorbkontext definieren , da wir ihn auf der Kartenkomponentenseite verwenden. Und in diesem Kontext übergeben Sie Werte wie das Cart-Array und die Head-to-Cart-Funktion. Ich möchte, dass Sie den Warenkorbkontext definieren und die Einkaufswagen- und Ed-to-Cart-Funktion als Wert angeben und diese Werte in der Warenkorb-Seitenkomponente abrufen und auch alle Komponenten aktualisieren , die die Einkaufswagen- oder Head-to-Card-Funktion von Requisiten verwenden Einkaufswagen- oder Head-to-Card-Funktion von Requisiten Wisse, dass das eine einfache Übung ist und du sie in nur zwei bis drei Minuten machen kannst Schließe die Übung ab und sieh dir dann die Lösung an. Ich hoffe, du löst diese Übung. Sehen wir uns nun schnell diese Lösung an. Im Ordner Context erstellen wir eine neue Datei namens card context dot gs. Der erste Schritt zur Definition von Kontexten besteht darin, die Funktion „Kontext erstellen“ zu verwenden Fügen Sie hier Create Context hinzu und sehen Sie, mit Hilfe von Autoiput erhalten wir das als Standardwert, wir übergeben hier Null, speichern diese Funktion nun in einer Variablen namens Kartenkontext, und am Ende exportieren wir einfach diesen Kartenkontext als Standard Speichern Sie diese Datei und in der App-Komponente, in der wir unseren Kartentarif definieren, sodass wir unseren Anbieter zu dieser Komponente hinzufügen müssen Hier fügen wir also nach dem Benutzerkontext den Kartenkontext hinzu, wählen den automatischen Import Punktanbieter und verpacken unsere Komponenten mit dem Kartenkontext-Punktanbieter. Und innerhalb dieses Anbieters haben wir Wertrequisiten, die dem Wert jetzt entsprechen. An der Stelle, an der eine einzelne Variable übergeben wird, können wir Objekte von Variablen und Methoden übergeben Übergeben Sie also zuerst das Cart-Array und zweitens die To-Cart-Funktion. Hier bedeutet das beides, in den Warenkorb gehen , um es in den Warenkorb zu legen. Ich schreibe direkt SOT-Code. Speichern Sie das, und jetzt können wir in unserer Warenkorbseiten-Komponente an der Stelle, an der das Karten-Array von Requisiten unserer Warenkorbseiten-Komponente an der Stelle, an der das Karten-Array von Requisiten abgerufen wird, einfach hinzufügen, Context verwenden und darin den , Context verwenden und darin Kartenkontext übergeben Und wir erhalten diese Werte hier in der Variablen namens Kartenkontext Oder wir können das Objekt destrukturieren und hier erhalten wir die Funktion Warenkorb und Hinzufügen zur Karte Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Siehst du, es funktioniert genauso wie zuvor. Lassen Sie uns jetzt alle Karten ersetzen , die wir von Requisiten bekommen Beginnen Sie also immer mit der Root-Komponenten-App, und wir können in der Near-Leiste sehen, dass wir die Kartenanzahl übergeben, was der Länge des Warenkorbs entspricht Damit wir das und in der Nebar-Komponente an der Stelle dieser Requisiten entfernen können Nebar-Komponente an der , rufen wir hier auf, verwenden Context und übergeben hier den Kartenkontext, und wir speichern diesen Wert in einer Variablen und strukturieren das Objekt um und erhalten Jetzt fügen wir unten, an der Stelle, an der die Anzahl der Warenkörbe angegeben ist, die Länge des Warenkorbs hinzu Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, es funktioniert auch. Lassen Sie uns nun andere Komponenten überprüfen. Also zurück zur App-Komponente. Hier können wir sehen, wie Cart und Heat-to-Cart beide durch Requisiten Also entferne diese beiden Requisiten. Und in der Routing-Komponente entfernen wir auch diese Requisiten Außerdem entfernen Sie diese Funktion bei der Warenkorbfunktion aus einer einzelnen Produktkomponente und entfernen auch Kartenrequisiten aus der Kartenseitenkomponente Wir haben diese Komponente für die Kartenseite bereits aktualisiert, also keine Sorgen Wir müssen nur diese einzelne Komponente der Produktseite aktualisieren . Also öffne diese Komponente und entferne die Requisiten und wir rufen hier an, benutzen Context Hook und übergeben hier einfach den Kartenkontext Dadurch werden unsere Werte zurückgegeben, also destrukturieren wir es hier und kommen zur Warenkorbfunktion die Änderungen speichern, können Sie sehen, wie einfach und ohne Propellerbohrungen unsere Variable in den Komponentenbaum übergeben werden kann 161. Artikel aus dem Warenkorb entfernen: Lassen Sie uns nun eine Funktion zum Entfernen von Artikeln implementieren. Zunächst werden wir das Produkt aus unserem lokalen Bundesstaat entfernen. Dann rufen wir die API auf, um Artikel ebenfalls aus unserem Backend zu entfernen. Lassen Sie mich also zuerst all diese Dateien schließen. Und in der App-Komponente nach der Funktion „In den Einkaufswagen erstellen wir nach der Funktion „In den Einkaufswagen“ eine neue Funktion namens Von der Karte entfernen. Und im Parameter erhalten wir die ID des Produkts , das wir entfernen möchten. In dieser Funktion speichern wir also zunächst unser aktuelles CAT-Array in einer Variablen namens Old Card, entspricht Array und verteilen unser Warenkorb-Array Jetzt schreiben wir Old Card Dot Filter. Hier erhalten wir jeden Artikel, bei dem es sich um das Objekt mit Produkt- und Mengeneigenschaft handelt. Und hier übergeben wir Zustand, Punkt Punkt Produkt, Punkt Unterstrich ID ist nicht gleich dieser Dadurch wird ein neues Array mit allen Produkten zurückgegeben , deren ID nicht mit dieser ID übereinstimmt Also speichern wir das in einer neuen Variablen namens Neue Karte, und danach setzen wir einfach Karte auf diese neue Karte. Lassen Sie uns nun diesen Code überprüfen. Hier in unserem Kartenkontextwert übergeben wir also unsere Funktion „ Aus der Karte entfernen“. Sehen Sie sich die Änderungen an, und jetzt greifen wir in unserer Komponente für die Warenkorbseite auf diese Funktion zu. Nach dieser Kartenanordnung entfernen wir diese auf der ersten Karte von hier. Wir brauchen es nicht und kommen hierher, nehmen es aus dem Warenkorb. Jetzt haben wir unten unser Entfernen-Symbol. In diesem Bild geben wir das Klickereignis und die Pfeilfunktion weiter und rufen hier die Funktion „Aus dem Einkaufswagen entfernen“ auf Pfeilfunktion weiter und rufen hier . Und geben Sie hier einfach die Produktpunkt-Underscore-ID ein. Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf, klicken Sie erneut auf die Seite und lassen Sie uns einen Artikel von hier entfernen Sehen Sie sich an, dass der Artikel aus unserer Warenkorb-Reihe entfernt wurde und dass auch unsere Zwischen- und Endsumme entsprechend unserer neuen Karte aktualisiert wurde Wenn wir jetzt die Seite aktualisieren, haben wir unser Produkt wieder weil wir unsere Karte aus der Datenbank beziehen das Produkt zu entfernen, müssen wir es auch aus unserem Backend entfernen. Öffnen Sie die Datei mit den Kartendiensten. Unten definieren wir eine neue Funktion namens Aus der Karten-API entfernen. Im Parameter erhalten wir die Produkt-ID. In dieser Funktion rufen wir jetzt die API-Client-Dot-Patch-Methode da wir nur einen Teil unserer Daten aktualisieren. Für das API-Backend verwenden wir hier Backticks, cart, slash remove, slash. Jetzt müssen wir hier unsere Produkt-ID hinzufügen, die wir aus unserem Warenkorb entfernen möchten Jetzt geben wir diesen Ausdruck zurück und am Ende auch eine Exportstörung Speichern Sie diese Datei und in unserer Funktion „Von der Karte entfernen “ rufen wir am Ende unsere API zum Entfernen von der Karte auf und übergeben hier unsere Produkt-ID. Nun, dieser Ausdruck gibt ein Versprechen zurück. Hier verwenden wir die Methode. Aber wenn wir das Produkt erfolgreich von unserer Karte entfernen, wollen wir nichts tun. Entfernen Sie dies dann und wir fügen die Fangmethode hinzu. Wenn wir einen Fehler haben, zeigen wir in Toast Dot Error an und geben hier weiter, dass etwas schief gelaufen ist Und danach setzen wir den Wagen auf den alten Wagen. So einfach ist das. Speichern Sie die Änderungen und schauen Sie sich das an. Artikel entfernen, Artikel von hier entfernt. Aktualisieren Sie auch die Seite und sehen Sie, dass sie auch aus dem Backend entfernt wurde Sie können anhand von Kontakten und Diensten sehen , wie einfach und unkompliziert es ist, einen PI anzurufen 162. Produktmenge erhöhen und verringern: Lassen Sie uns nun die Funktion zum Erhöhen und Verringern für CAT implementieren . In unserer App-Komponente definieren wir, nachdem diese Funktion aus dem Warenkorb entfernt wurde, nachdem diese Funktion aus dem Warenkorb entfernt wurde, eine neue Funktion namens Warenkorb aktualisieren im Parameter Wir erhalten die Produkt-ID, die wir aktualisieren möchten. In dieser Funktion deklarieren wir zunächst eine Variable namens updated card und speichern alle vorherigen Werte unserer Karte. Beachten Sie, dass es sich um eine aktualisierte Karte handelt, nicht um eine aktualisierte Karte. Danach schreiben wir die aktualisierte Karte, Punkt und suchen den Index. Hier erhalten wir einen einzelnen Artikel, und hier geben wir unseren Zustand weiter. Der Punkt mit dem Punkt, der den Punkt markiert, entspricht dieser ID Dadurch wird der Index unseres ausgewählten Produkts zurückgegeben. Speichern Sie das in der Variablen Call Product Index. Jetzt machen wir hier so etwas, aktualisieren AT und übergeben ihrem Produktindex die Punktmenge plus eins Und dann setzen wir den Warenkorb einfach auf aktualisiertes CAT. Jetzt ist hier eine Sache. Wir werden diese Funktion für beide Anwendungsfälle verwenden, und zwar zunehmend und abnehmend. Aber hier führen wir nur mehr Logik durch. In unserem Funktionsparameter fügen wir zunächst einen weiteren Parameter namens type hinzu , der erhöht oder verringert werden kann. Nachdem wir den Index gefunden haben, fügen wir die Bedingung hinzu, die ich eintippe, entspricht der Erhöhung und innerhalb dieses I-Blocks bewegen wir uns einfach über diese Logik Lassen Sie uns nun das duplizieren, was ich blockiere, und ändern wir diesen Typ , um ihn zu verringern, und ändern wir den Wert auf Minus, entspricht Eins nun unten Lassen Sie uns nun unten diese Funktion in unserem Kontextwert übergeben Speichern Sie die Änderungen und die Frage ist, wo wir diese Funktion importieren werden? Sollen wir diese Mengeneingabekomponente eingeben? Die Antwort lautet nein. Weil wir auf unserer einzelnen Produktseite dieselbe Mengeneingabekomponente verwenden nur um die Menge des Produkts zu ändern. An dieser Stelle möchten wir die API nicht aufrufen. Hier ist die Lösung. In der Warenkorbseitenkomponente erhalten wir unsere Funktion zum Aktualisieren der Karte. Und bei der Mengeneingabe haben wir die Anzahl der Requisiten festgelegt. Dies ist die Funktion, die wir beim Klicken auf die Plus-Minus-Schaltfläche aufrufen Klicken auf die Plus-Minus-Schaltfläche Ich weiß, das ist ein bisschen verwirrend. Schau dir das nur einmal an und du wirst das alles verstehen. In dieser festgelegten Menge geben wir also unsere Funktion „ Karte aktualisieren“ weiter, und wir übergeben auch ihre neuen Requisiten, Kartenseite an True und die Produkt-ID an die Produktpunkt-Underscore-ID an die Produktpunkt-Underscore-ID Speichern Sie diese und in der Mengeneingabekomponente in den Requisiten erhalten wir hier die Kartenseite und Bei dieser Klickfunktion halten wir uns jetzt an die Bedingung. Wenn die Warenkorbseite wahr ist, rufen wir eine Mengenfestlegungsfunktion auf. In diesem Fall ist das unsere Kartenaktualisierungsfunktion. Hier müssen wir also zwei Argumente Typ und Produkt-ID übergeben . Geben Sie also zuerst ein, um die Zahl zu verringern, und dann die Produkt-ID. Wenn unsere Warenkorbseite nicht stimmt, setzen wir einfach Menge auf Menge minus eins. Jetzt verstehen Sie also, warum wir diese Kartenseite und die Produkt-ID zu diesen Requisiten hinzufügen diese Kartenseite und die Produkt-ID zu diesen Requisiten Kopieren Sie jetzt einfach dieses OnClick-Ereignis und fügen Sie es an der Stelle dieses OnClick-Ereignisses Und zuerst ändern wir diesen Typ, um zu erhöhen, und in L ändern wir ihn auf Menge plus eins. Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf der Kartenseite auf die Plus-Minus-Schaltfläche und sehen Sie, dass sich unsere Menge entsprechend ändert. Auch der Preis wird aktualisiert. Unsere halbe Aufgabe ist hier erledigt. Jetzt müssen wir nur noch die API aufrufen, um sie zu erhöhen und zu verringern. Wo wir diese APIs in der Kartendienstdatei definieren. Gut. Du lernst wirklich schnell. Ich liebe es. Hier duplizieren wir das, was aus der CAT-API-Funktion entfernt wurde, einfach noch zweimal , weil diese drei APIs fast identisch sind. Lassen Sie uns nun diesen Funktionsnamen ändern um die Produkt-API zu erhöhen, und im API-Endpunkt an der Stelle, an der diese Entfernung erfolgt, müssen wir die Erweiterung hinzufügen, und das ist alles, was wir ändern müssen. Lassen Sie uns nun dasselbe tun, um die API zu verringern. Ändern Sie also den Funktionsnamen , um die Produkt-API zu verringern. Und im Endpunkt ändern wir das in den Warenkorb, indem wir den Schrägstrich verringern Speichern Sie die Änderungen, und in der App-Komponente in unserem Blog mit erhöhtem Typ rufen wir Increase Product API auf und übergeben hier einfach die ID. Jetzt brauchen wir die Methode nicht mehr. Wir fügen direkt die Cache-Methode hinzu. Und in dieser Cache-Methode fügen wir zuerst einen Toast-Dot-Fehler und übergeben hier, dass etwas schief gelaufen ist Und danach setzen wir den Warenkorb auf den vorherigen Warenkorb. Aber hier, in dieser Funktion, haben wir keinen vorherigen Warenkorb weil wir dieses aktualisierte Kartenarray ändern. Also definieren wir oben const old cart gleich array und spread cart array und übergeben diesen alten Einkaufswagen einfach in unserer SAT-Warenkorbfunktion Jetzt rufen wir im Blog vom Typ Verkleinerung die Produkt-API auf und übergeben hier auch die ID, und wir können diese Catch-Methode einfach kopieren und hier einfügen Speichern Sie die Änderungen und schauen Sie sich das an. Wenn Sie die Menge des Produkts ändern, können wir die Änderungen bei der Neuauflage überprüfen. Siehst du, wir erhalten eine aktualisierte Menge. Hier haben wir also unsere Funktion „Auf Karte“, „Aus Karte entfernen“, „Erhöhen“ und „Verkleinern“ erfolgreich abgeschlossen . 163. In Produktkarte in den Warenkorb legen: Rufen wir die Head-to-Cart-API für unser Warenkorbsymbol auf. In der Produktkartenkomponente können wir hier die Head-to-Cart-Funktion aus unserem Kartenkontext verwenden . Wir verwenden den Context Hook und darin übergeben wir den Kartenkontext. Jetzt wird das Objekt zurückgegeben, sodass wir es destrukturieren und die Head-to-Cart-Funktion aufrufen können und die Head-to-Cart-Funktion aufrufen Scrollen Sie jetzt nach unten, und in unserer Schaltfläche „Kopf zur Karte“ fügen wir ein Klick-Ereignis und eine Pfeilfunktion hinzu. Hier rufen wir einfach unsere Head-to-Cart-Funktion auf Jetzt müssen wir hier zwei Argumente übergeben. Das erste ist das Produktobjekt und das zweite ist die Menge. Leider haben wir nicht beides hier. Bei der Menge können wir einfach eine übergeben, da wir hier keine Mengeneingabe haben. Aber für das Produktobjekt müssen wir etwas tun. Ganz oben in der Liste der Requisiten können wir sehen, dass wir alle Variablen für unser Produkt erhalten Öffnen Sie also die Komponente Produktliste. Anstatt alle Informationen in einzelnen Requisiten zu übergeben , können wir hier das Produktobjekt direkt übergeben Entferne das alles und wir übergeben hier einfach das Produkt an dieses Produktobjekt Speichern Sie diese Datei und jetzt zu unserer Produktkartenkomponente zurück. Anstatt all diese zu bekommen, erhalten wir hier ein einzelnes Produktobjekt. Lassen Sie uns nun all diese Werte ersetzen. Also fügen wir an der Stelle der ID das Produkt, das Fragezeichen und die Punkt-Unterstrich-ID Hier verwenden wir das Fragezeichen, denn wenn Produktpunkt-Unterstrich-ID nicht verfügbar ist , erhalten wir eine Fehlermeldung Jetzt, an der Stelle des Bildes, haben wir das Produkt, das Fragezeichen, das Dotimag, das Array, und hier erhalten wir unser Danach Preis zu Produkt, Fragezeichen, Punktpreis, Titel zu Produkt, Fragezeichen, Punkttitel Bewertung zum Produkt, Qimark Punkt Revs Punkt T. Als nächstes zählt die Bewertung für das Produkt, zählt die Bewertung für das Produkt, Qimark Dot Reviews Punktanzahl und Lagerbestand für das Produkt, Qimark Punkt STAC jetzt können wir dieses Produktobjekt einfach in dieser „In den Einkaufswagen“ -Funktion übergeben Qimark Dot Reviews Punktanzahl und Lagerbestand für das Produkt, Qimark Punkt STAC jetzt können wir dieses Produktobjekt einfach in dieser „In den Einkaufswagen“ -Funktion übergeben. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Öffnen Sie die Produktseite und klicken Sie auf In den Warenkorb legen. Sehen Sie, dass das Produkt zu unserer Karte hinzugefügt wurde. Jetzt ist hier eine Sache. Wie wir wissen, ist unsere Add to Cart API geschützt, was bedeutet, dass nur angemeldete Benutzer Produkte zur Karte hinzufügen können. Also nennen wir uns oben wieder „ Kontakte“ und geben hier Benutzerkontakte weiter. Jetzt wird unser Benutzerobjekt zurückgegeben und unten, in unserer Button-Bedingung, fügen wir eine weitere Bedingung hinzu. Wenn der Benutzer nicht Null ist, zeigen wir diese Schaltfläche, um in den Einkaufswagen zu gelangen. Speichern Sie die Änderungen. Wenn wir uns abmelden und auf unserer Produktseite sind, wird das Warenkorbsymbol nicht angezeigt. Gehen Sie jetzt zur einzelnen Produktseite. Und hier haben wir auch die Schaltfläche „Zum Einkaufswagen gehen“. Jetzt rufen wir Use Context Hook und übergeben hier Benutzerkontakte. Dadurch wird ein Benutzerobjekt zurückgegeben, also speichern wir es in einer Variablen namens user Und am Ende packen wir den Kopf in den Einkaufswagen und auch diese Mengeneingabe und Mengenüberschrift und übergeben ihren Zustand. Wenn der Benutzer verfügbar ist, nur diese Elemente angezeigt. Jetzt wird uns das zu einem Kompilierungsfehler führen , weil wir mehr als ein Element zurückgeben. Wie können wir das also richtig lösen, indem wir AT-Fragmente verwenden? Also packen wir sie ein und sehen, dass es weg ist. Speichern Sie die Änderungen und schauen Sie sich das an. Hier bekommen wir unsere Produktinformationen ohne Buttons. Sie können sehen, wie einfach es mit Context Sook wird. 164. API für den Checkout aufrufen: Bevor wir etwas tun, melden wir uns erneut an, da wir uns in der vorherigen Lektion abgemeldet haben. Gehen Sie jetzt zur Warenkorbseite. Und hier nennen wir unsere letzte API, die Checkout-API. In unserer Anwendung fügen wir keine Zahlungsfunktionen hinzu, da das Frontend beim Hinzufügen von Zahlungsmöglichkeiten nur eine sehr geringe Rolle spielt. Bei Stripe Payment , der beliebtesten Payment-Gateway-Bibliothek zur Implementierung von Zahlungen, müssen wir beispielsweise , der beliebtesten Payment-Gateway-Bibliothek zur Implementierung von Zahlungen, nur eine API vom Frontend aus aufrufen. Der größte Teil des Zahlungscodes geht an das Backend. Es ist also nicht so vorteilhaft, Stripe in diesem Kurs hinzuzufügen, weil unser Hauptziel darin besteht, zu lernen, reagieren zu lernen, und das ist, was uns ziemlich gut macht. wenn du das wissen willst, sag es mir im Bereich Fragen und Antworten, ich werde diesen Abschnitt entsprechend aktualisieren Aber in meinem Vorschlag brauchst du das noch nicht. Konzentrieren Sie sich einfach darauf, nette und schnell reagierende Anwendungen zu erstellen. Für die API zur Bestellabwicklung im Ordner Services erstellen wir eine neue Datei namens order services dot js. In dieser Datei importieren wir zunächst den API-Client aus dem Slash-API-Client von Utils und hier erstellen wir eine Funktion namens Checkout-API innerhalb dieser Funktion Checkout-API innerhalb dieser Funktion Wir nennen hier einfach den API-Client Dot Post und in den Endpunkten Order Slash Jetzt müssen wir keine Daten mehr übergeben, da die Kartendaten automatisch vom Backend abgerufen Dieser Ausdruck gibt uns ein Versprechen, wir geben einfach Folgendes zurück: Speichern Sie diese Datei, und in der Kartenseiten-Komponente unten in der Checkout-Schaltfläche fügen wir hier ein Klick-Ereignis hinzu, fügen wir hier ein Klick-Ereignis Checkout-Funktion entspricht Lassen Sie uns nun diese Checkout-Funktion definieren. Zweitens, Checkout-Fehlerfunktion. Und hier rufen wir die Checkout-API von Order Services auf. Jetzt, nach diesem Checkout, müssen wir unsere Karte leeren. Also hier fügen wir dann Methode, Pfeilfunktion hinzu. Und in den Cali-Klammern fügen wir zuerst Toast von React zur S DiPi Library hinzu, und hier fügen wir Erfolg hinzu und hier geben wir unsere Nachricht weiter, Bestellung Und danach müssen wir unseren Kartenstatus leeren. Und dafür benötigen wir die Kartenfunktion. Also gehen wir zur App-Komponente und übergeben die Set-Card-Funktion in unserem Kartenkontext. Speichern Sie diese Datei und kehren Sie zur Kartenseite zurück. In diesem Anwendungskontext erhalten wir „Karte setzen“ und in unserer Funktion setzen wir „Karte“ auf „Leere Karte“. Oder wir können diese Setcard vor diesem API-Aufruf verschieben. Was ist nun, wenn wir einen Fehler für diese API bekommen? Also fügen wir hier die Catch-Methode hinzu, und in den geschweiften Klammern hatten wir einen Toast-Punkt-Fehler, und als Nachricht ist etwas schief gelaufen Danach setzen wir den Warenkorb wieder in den vorherigen Zustand zurück. Also definieren wir oben eine neue Variable namens old cart equals to array, und hier verteilen wir das Cart-Array Bei der Catch-Methode übergeben wir jetzt einfach Set Cart an Old Cart. Nutzen Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf die Schaltfläche Zur Kasse und unsere Katze ist leer. Lassen Sie uns das jetzt überprüfen. In unserem Mongo machen wir also einen Kompass und öffnen unsere CAT Wi-Datenbank Hier haben wir die Abholung von Bestellungen, und darin haben wir unsere bestätigte Bestellung und den Status auf „Bezahlt“ gesetzt 165. Übung Benutzeraufträge erhalten: Jetzt ist es Zeit für eine weitere kleine Übung. Hier auf unserer Seite „Meine Bestellung“ müssen wir alle Bestelldetails des aktuellen Benutzers anzeigen, und Sie erhalten die Bestellinformationen für den aktuellen Benutzer von dieser GAT-API. Unterbrechen Sie zwei bis drei Minuten mit dieser Übung, und ich weiß, dass Sie diese Übung beenden können. 166. Lösung für diese Übung: Sehen wir uns nun die Lösung unserer Übung an. Beachten Sie, dass es für diese Übung zwei Lösungen gibt. Zunächst erstellen wir also eine weitere Funktion in der Datei mit den Bestellservices für Meine Bestellungen EPI, aber das ist die langwierige Lösung Die Sten Street-Lösung besteht also darin, dass wir unseren benutzerdefinierten Hook verwenden können, mit dem wir jede Art von Daten abrufen Also hier in unserer Komponente rufen wir use data hook beim ersten Parameter auf, wir übergeben unseren Endpunkt , also order Dadurch wird nun ein Objekt mit Daten zurückgegeben, die wir in Bestellungen umbenennen können. Außerdem können wir hier einen Fehler bekommen und die Variable wird geladen. Jetzt können wir hier eine Bedingung für diese Tabellenkomponente festlegen Wenn die Reihenfolge nicht Null ist, diese Tabellenkomponente erst dann angezeigt. Jetzt müssen wir nur noch diese Bestellungen in unserer Tabelle anzeigen. Im T-Text hatten wir oben geschweifte Klammern, Ordnungspunkte auf der Karte, und hier bekommen wir eine Einzelreihenfolge und auch hier den Index Jetzt geben wir einfach diese Tabellenzeile zurück. Und übergeben Sie die Taste zur Bestellung, Punkt, Unterstrich-ID. Und in dieser Zeile fügen wir Tabellendaten und zeigen zuerst den Index plus eins Danach lassen wir den Produktnamen vorerst unverändert. Als Nächstes haben wir die Summe, also die Gesamtzahl der Bestellpunkte, und zuletzt fügen wir den Bestellpunktstatus hinzu. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Hier erhalten wir unsere Bestelldetails. Jetzt müssen wir nur noch die Produktnamen anzeigen. Dafür erstellen wir eine neue Funktion. Rufen Sie Get product string auf. Und als Parameter erhalten wir hier die Funktion Single Order, Error. Und zuallererst bestellen wir Punktprodukte, Dot MAP. Ich nenne das in den geschweiften Klammern, wir nennen das Get Product String-Funktion und übergeben hier einfach diese Reihenfolge. das in den geschweiften Klammern, wir nennen das Get Product String-Funktion und übergeben hier einfach diese Reihenfolge Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unseren Produktstring mit der Menge. Es funktioniert also ziemlich gut. Jetzt fügen wir hier den Loader hinzu. vor unserer Tabellenkomponente Fügen Sie vor unserer Tabellenkomponente I I loading is true hinzu, dann zeigen wir die Loader-Komponente. Und auch bei Fehlern übergeben wir hier neue Cully-Klammern Fehler ist verfügbar, dann geben wir das Emphasis-Tag mit dem Klassennamen und dem Formularfehler zurück , und hier zeigen wir den Fehler Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, es funktioniert für uns. Perfekt. 167. Geschützte Routen erstellen: In unserer aktuellen Implementierung haben wir hier nur einen kleinen Fehler. Wenn der Benutzer also angemeldet ist, werden nur dann diese Links zu Moder, Abmeldung und Warenkorb angezeigt Abmeldung und Warenkorb Wenn wir uns jetzt abmelden, sehen wir diese Links nicht, aber hier ist eine Sache Wenn wir in unserer URL den Pfad auf Slash CAT setzen und die Eingabetaste drücken, dann greifen wir auch auf diese geschützten Routen zu, und das wollen wir nicht, oder? Wenn der Benutzer also nicht angemeldet ist und versucht, auf geschützte Routen wie Moders oder die CAT-Seite zuzugreifen, werden wir ihn direkt zur Anmeldeseite weiterleiten Um dies zu implementieren, werden wir unsere Routing-Komponente öffnen Hier wissen wir, dass wir für die Definition der Route die Routenkomponente verwenden und hier Pfad- und Elementrequisiten übergeben Also hier werden wir eine neue Routenkomponente definieren. Wir werden diese geschützte Route nennen. Diese Komponente wird nur ein Wrapper für diese Routenkomponente sein . Sie prüft lediglich , ob der Benutzer nicht verfügbar ist, leitet ihn dann automatisch zur Anmeldeseite Andernfalls wird sie auf diese geschützte Seite umgeleitet . Mach dir keine Sorgen, sieh dir das an und alle Zweifel werden geklärt. In unserem Routing-Ordner erstellen wir eine neue Komponente namens protected route dot JSX Fügen Sie hier den Boilerplate-Code für diese Komponente hinzu. Zuallererst rufen wir in dieser Komponente im Gegenzug die Funktion Get user von den Benutzerdiensten auf, die ein Benutzerobjekt zurückgibt oder wenn das Token nicht verfügbar ist, es uns einen Nullwert Wenn also der Benutzer verfügbar ist, geben wir die Outlet-Komponente zurück. Andernfalls leiten wir zur Anmeldeseite weiter. Hier verwenden wir also die Navigate-Komponente von React Router Dom und übergeben das Attribut to Slice Login. Wenn Sie den Ausgang vergessen, nur für einen schnellen Repressor, an der Stelle dieses Ausgangs, unsere verschachtelten Routing-Komponenten angezeigt Keine Sorge, speichern Sie diese Datei und in der Routing-Komponente, welche Routen wir schützen wollen Richtig, das sind die letzten drei Routen, Cart, Moder und Logout Also fügen wir oben die Route hinzu und schließen diese drei Routen ab , die wir schützen möchten Jetzt übergeben wir im Element unsere geschützte Routenkomponente und fertig. Speichern Sie die Änderungen und schauen Sie sich das an. Hier sind wir nicht angemeldet und versuchen, auf die Kartenseite zuzugreifen und sehen, wir leiten zur Anmeldeseite weiter. Jetzt melden wir uns mit E-Mail und Passwort an und versuchen, auf die Kartenseite zuzugreifen. Und jetzt können wir auf diese Seite zugreifen. Es funktioniert also in beide Richtungen. Lassen Sie mich Ihnen jetzt erklären , was hier passiert. Hier verwenden wir natürliches Routing. Wenn unsere Anwendung also von diesen drei Routen aus navigieren möchte, wird zuerst diese geschützte Routenkomponente ausgeführt, und innerhalb dieser Komponente haben wir die Bedingung für Outlet und navigieren zur Anmeldeseite. Wenn der Benutzer also angemeldet ist, wird dieses Element am Ort des Outlets angezeigt , so einfach ist das. So erstellen wir also eine geschützte Route für unsere Anwendung. 168. Umleitung auf vorherige geschützte Seite: In der vorherigen Sitzung haben wir gesehen, dass wir nicht angemeldet sind und versuchen, auf geschützte Routen wie die Warenkorbseite zuzugreifen geschützte Routen wie die Warenkorbseite Dann navigieren wir zur Anmeldeseite Und wenn wir uns mit unserer E-Mail-Adresse und unserem Passwort anmelden, leiten wir zur Homepage weiter Idealerweise sollten wir erneut zu der geschützten Route weiterleiten, die wir zugreifen möchten. Das ist kein großes Problem, aber es wird unsere Benutzererfahrung ein wenig verbessern. Also lass uns das beheben. Für unsere geschützte Routenkomponente müssen wir also den vorherigen Standort mit dieser Navigationskomponente übergeben. Mach dir darüber keine Sorgen , sieh das an und am Ende wirst du das alles verstehen. Bevor wir also zurückkehren, rufen wir Use Location Hook von Rea Router Doom auf. Speichern wir es in der Variablen, Call Location Jetzt enthält dieser Standort alle Informationen über den aktuellen Standort der Seite Lassen Sie uns diesen Standort einfach mit der Konsole protokollieren. Beachten Sie, dass nur geschützte Seiten auf diese geschützte Routenkomponente zugreifen können. Lassen Sie uns zunächst diese Rückmeldung kommentieren. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Öffne die Konsole und ich logge mich einfach von hier aus ein und versuche, auf meine Bestellseite zuzugreifen. Sehen Sie hier, wir erhalten unser Standortobjekt, und in diesem Objekt haben wir diesen Pfadnamen , auf den wir zugreifen möchten. Zurück zum VS-Code, entfernen Sie dieses Konsolen-Punktprotokoll und entfernen Sie auch diesen Befehl. Jetzt müssen wir diesen Punktpfadnamen irgendwie an unsere Anmeldeseite übergeben . In dieser Navigationskomponente können wir zusätzliche Daten in den State-Requisiten übergeben State entspricht C-Klammern für das Hinzufügen von JavaScript-Code, und hier fügen wir ein Objekt mit der Eigenschaft von hinzu, und wir übergeben hier einfach den Pfadnamen dieses Punkts Speichern Sie die Änderungen, und jetzt müssen wir auf unserer Anmeldeseite nur noch vom Status aus darauf zugreifen In unserer Login-Komponente oben verwenden wir auch hier den verwenden wir auch hier Location-Hook von Rea Router Doom und speichern diesen in einer Variablen namens Location Lassen Sie uns nun das Protokoll und den Ort der Anmeldung einsehen und wir geben hier den Standort Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir das Login-Location-Objekt. Öffnen Sie das und sehen Sie, hier haben wir den Status, und damit haben wir von Immobilie zu unserem vorherigen Pfad, der CAT ist. Also hier, in der Funktion onsubmit, vor der Fensterpunktposition, haben wir den Standort und wir rufen Zustandseigenschaft mithilfe der Objektdestrukturierung Hier an der Position des Fensterpunkts fügen wir einfach eine wir einfach Wenn State definiert ist, leiten wir von dort zu Stat Dot weiter, andernfalls leiten wir einfach zur Homepage weiter. Speichern Sie die Änderungen und schauen Sie sich das an. Loggen Sie sich in dieses Formular ein und wir werden zur Kartenseite weitergeleitet. Es funktioniert also. Jetzt sind wir hier fast fertig. Derzeit sind wir jedoch in unserer Anwendung angemeldet, und wenn wir versuchen, auf die Anmeldeseite oder Anmeldeseite zuzugreifen, erhalten wir auch diese Seiten Wir sollten den Benutzer also auf die Homepage weiterleiten , wenn der Benutzer bereits angemeldet ist Dies sind sehr seltene Szenarien, aber es ist besser, sich um sie zu kümmern. Also lass uns das beheben. Also fügen wir in unserer Komponente für die Anmeldeseite, hier vor unserer JSX-Rückkehr, eine Bedingung hinzu Hier rufen wir eine Benutzerfunktion aus den Benutzerdiensten auf. Und wenn es einen Benutzer zurückgibt, kehren wir hierher zurück, navigieren von React Router Doom zur Komponente und navigieren zur Startseite Speichern Sie die Änderungen und schauen Sie sich das an. Wenn wir nun versuchen, auf die Anmeldeseite zuzugreifen, siehe, wir leiten zur Startseite weiter. Machen wir dasselbe für die Anmeldeseite. Kopieren Sie diese I-Bedingung und in unsere Anmeldeseitenkomponente, und in unsere Anmeldeseitenkomponente bevor unser JSX diesen Code weitergibt Wir importieren einfach Get User aus den Benutzerdiensten und importieren auch die Navigate-Komponente aus React Router Doom, und schon sind wir fertig So gehen wir also mit geschützten APIs und geschützten Routen in React-Anwendungen um Sie können sehen, dass es sehr einfach und benutzerfreundlich ist. 169. Abschnitt 15: Einige Probleme beheben: In unserer Anwendung haben wir also ein paar Dinge zu tun. Zuallererst müssen wir auf der Homepage Feature-Produkte aus dem Backend abrufen und sie in diesem Bereich anzeigen Als Nächstes haben wir jetzt hier Links für B. Auf dieser Schaltfläche werden wir also den Link zur Produktseite hinzufügen, und das war's für die Homepage. Gehen wir jetzt zur Produktseite. Hier haben wir eine kurze Option, aber wir haben diese Funktionalität nicht hinzugefügt. Also müssen wir das tun. Als nächstes haben wir eine weitere wichtige Funktion , nämlich die Suche nach unserem Produkt. Daher werden wir die Suchfunktion mit automatischen Vorschlägen vervollständigen . Sie können eine Liste für diese Aufgabe erstellen, und wenn Sie jede Aufgabe erledigen, können Sie überprüfen, ob sie abgeschlossen ist. Das gibt Ihnen mehr Klarheit und Sie können es schaffen, eine Aufgabe nach der anderen zu erledigen. Sie können sehen, dass dies meine Notizen sind, wenn ich dieses Projekt abschließe. Sie können auch all diese Aufgaben als Übung betrachten und versuchen, sie zu lösen, bevor Sie sich die Lösung ansehen. In ein paar Lektionen werden wir dieses Projekt abschließen. 170. Ausgewählte Produkte abrufen: Beginnen wir nun mit dem Abrufen von Feature-Produkten, Soap und Feature-Products-Komponenten Und hier, in dieser Komponente, nennen wir es Used Data Hook Beim ersten Parameter übergeben wir nun unseren Endpunkt, also Slash Products, Slash Featured Wie wir wissen, geben diese verwendeten Daten ein Objekt zurück, also destrukturieren wir es, und hier bekommen wir Datenfehler und erleichtern Lassen Sie uns diese Daten nun einfach in der Konsole protokollieren. Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Öffnen Sie die Konsole und sehen Sie, hier haben wir eine Reihe von drei Produkten. Jetzt müssen wir sie nur noch hier anzeigen. Öffnen Sie also die Produktlistenkomponente und kopieren Sie in der Produktliste diese Daten, sowohl Produkte als auch Skelett. Und in unsere Komponente mit den Produktmerkmalen an der Stelle der Karte mit den drei Produkten fügen wir sie ein. Jetzt ändern wir zuerst diese Datenpunktprodukte in „Nur Daten“ und auch hier „Datenpunktmap“, und auch hier „Datenpunktmap weil wir in unseren Daten ein Array erhalten. Danach müssen wir hier die Skelettkomponente importieren. Hier importieren wir das Skelett der Produktkarte. Da wir das Skeleton-Array definieren müssen. An der Spitze entspricht Skelette einem Array. Nun, wie viele Skelette wollen wir anzeigen? Wir wollen drei Skelette. Hier fügen wir eins, zwei und drei hinzu. Lassen Sie uns unseren Fehler anzeigen. Kehren Sie erneut zur Produktlistenkomponente zurück und kopieren Sie einfach diesen Fehler. Und fügen Sie es in unsere Produktliste mit Funktionen ein. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, hier bekommen wir unsere Feature-Produkte. Wir erledigen unsere erste Aufgabe. Wir können überprüfen, ob diese Aufgabe abgeschlossen ist. Lassen Sie uns das jetzt auch beheben , Link. Zuallererst, bei Produkten, hier haben wir unser iPhone 14-Produkt Klicken Sie mit der rechten Maustaste auf dieses Bild und kopieren Sie die Linkadresse. Kehren Sie jetzt zum VS-Code zurück und öffnen Sie die Homepage-Komponente. Und hier im Link zum ersten Heldenbereich fügen wir diese Linkadresse ein. Und zu Beginn entfernen wir unsere Basis-URL. Wir brauchen es nicht. Das Gleiche machen wir jetzt für die zweite Helden-Sektion. Also hier haben wir auch MacBook. Ich weiß, dass dies kein TT-Produkt ist, aber wir haben kein Mac Studio und deshalb können wir den Benutzer zum MacBook weiterleiten. Kopieren Sie also diese Linkadresse und in unsere Komponente fügen wir sie hier ein. Entfernen Sie außerdem die Basis-URL, speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf Jetzt kaufen und wir leiten zur iPhone 14-Seite weiter. Aber es aktualisiert unsere Seite. Lass uns damit aufhören. Also zurück zum VS-Code und öffnen Sie die Komponente Hero Section. Und hier an der Stelle des Anchor-Tags fügen wir die Link-Komponente aus React Router Doom hinzu und benennen diese HF in zwei Attribute um Speichern Sie die Änderungen und werfen Sie einen Blick zurück zur Startseite. Klicken Sie auf die Schaltfläche Bynw und sehen Sie, wir leiten zu dieser Hier erledigen wir also auch unsere zweite Aufgabe. In der nächsten Lektion werden wir jetzt an unserer Suchleiste arbeiten. 171. Produkte nach Suchanfrage abrufen: Lassen Sie uns nun Funktionen für die Suche nach Produkten hinzufügen. Also hier ist die Demo davon. Wenn wir in unserer Suchleiste nach etwas und die Eingabetaste drücken oder auf die Suchleiste klicken, rufen wir diese Daten nur von unserer Produkt-API ab Und Sie können sehen , wenn wir auf Suchen klicken , dass die Suchzeichenfolge zur Abfragezeichenfolge hinzugefügt wird Außerdem erhalten wir hier Autosuggon für Suchabfragen, und wir können auch mit den Pfeiltasten navigieren Es ist sehr einfach. Lass uns das sehen. In unserer aktuellen Implementierung müssen wir nur unsere Sucheingabe in unserer URL-Abfragezeichenfolge festlegen . Und aus dieser Abfragezeichenfolge werden wir diesen Suchtext in unserem API-Aufruf übergeben. So wie wir es in unserer Kategorie tun. In unserer NBR-Komponente haben wir also unsere Sucheingabe Zuallererst müssen wir also Text aus der Sucheingabe abrufen Also oben fügen wir hier den benutzten hinzu und fügen Snippets hinzu und geben ihm einen Namen, suchen und setzen die Suche und übergeben eine leere Zeichenfolge als Standardwert Jetzt übergeben wir in unserem Sucheingabefeld zuerst den Wert an die Suchvariable und danach übergeben wir das Ereignis onchange und darin erhalten wir das Ereignisobjekt, Fehlerfunktion und setzen die Suche einfach auf einen Zielpunktwert Hier erhalten wir also unseren Wert im Suchstatus. Jetzt müssen wir es nur noch in der URL-Abfragezeichenfolge festlegen. Zuallererst fügen wir in unserem Formular-Tag das Submit-Ereignis hinzu und übergeben die ER-Funktion, die das Senden übernimmt. Lassen Sie uns nun diese Funktion definieren: Handle, Submit. Hier erhalten wir ein Event-Objekt, und zuerst setzen wir E dot prevent default. Und was wird es bedeuten? Es verhindert ein Standardverhalten oder ein Standardformular. Danach übergeben wir hier eine Bedingung, wenn die Suche nicht gleich der T-Zeichenfolge ist Dann setzen wir diese Suchzeichenfolge in die Abfragezeichenfolge. Also hier haben wir zwei Möglichkeiten. Wir können Suchparameter verwenden, oder wir können den Navigate Hook verwenden Die Wahl liegt bei dir. Wir haben beide Hooks im React-Router-Dom gesehen. Ich persönlich verwende hier gerne Navigate, weil es einfacher ist als die Verwendung von Suchparametern. Nach der Verwendung von State rufen wir den Use Navigate Hook von React Router Doom auf und es wird uns die Navigate-Variable geben Fügen wir nun die Navigate-Funktion zu unserem Handle submit hinzu. Und hier übergeben wir unsere URL. In Betts übergeben wir also den Schrägstrich Products, Fragezeichen, Sarge entspricht Dollarklammern , Sarge. Speichern Sie die Änderungen und schauen Sie sich das an, schreiben Sie etwas und drücken Sie die Eingabetaste. Navigieren Sie zur Produktseite mit der Suchabfrage. Entfernen Sie nun diesen Text und drücken Sie einfach die Eingabetaste. Siehst du, wir bekommen Leerzeichen in der Abfragezeichenfolge, und das wollen wir nicht. In unserer Handle-Submit-Funktion übergeben wir in Navigate die Suchfunktion dotTremFunction Dadurch werden alle unerwünschten Leerzeichen entfernt. Und auch hier fügen wir Search Dot Cream hinzu . Speichern Sie die Änderungen und werfen Sie einen Blick zurück auf unsere Startseite. Und wenn wir Leerzeichen hinzufügen und die Eingabetaste drücken , wird dies nicht zur Produktseite weitergeleitet. Damit ist unsere halbe Aufgabe erledigt. Jetzt müssen wir nur noch diese Suchabfrage in unserem API-Aufruf übergeben . Bei einer Produktlistenkomponente erhalten wir also zuerst unsere Suchzeichenfolge aus der Abfragezeichenfolge. Also query, wir definieren const, Suchanfrage entspricht dem Suchpunkt GT und übergeben hier Variablennamen der Abfragezeichenfolge, also Jetzt übergeben wir diese Suchabfrage einfach in unseren Parametern. Vor unserer Kategorie fügen wir der Suchabfrage eine Suche hinzu. Und wenn wir unsere Suchabfrage ändern, sollten wir sie PI nennen, also müssen wir eine Suchabfrage zu diesem Abhängigkeitsarray hinzufügen. Speichern Sie die Änderungen und schauen Sie sich das an. Suchen Sie hier nach etwas und drücken Sie die Eingabetaste. Siehst du, wir bekommen nur zwei Produkte. Unsere Suchabfrage funktioniert also. Versuchen wir es noch einmal, schreiben Sie etwas und drücken Sie die Eingabetaste. Schau, dass es funktioniert. Lassen Sie mich Ihnen jetzt einen Bug zeigen. Gehe zur Produktseite und scrolle nach unten. Unsere Seite ist also auf drei eingestellt. Suchen Sie jetzt nach etwas und Sie können sehen, dass wir diese Daten nicht erhalten. Warum passiert das? Richtig, weil wir keine Seite drei für diese Abfragezeichenfolge haben. Also, was ist die Lösung dafür? Stimmt, das haben wir schon gesehen. Also müssen wir Seite auf eins setzen. In unserem Use-Effekt haben wir das also für unsere Kategorie getan. Jetzt fügen wir hier einfach eine Suchanfrage hinzu. Die Änderungen, und jetzt ist unser Fehler weg. Sie können sehen, wie einfach es ist , Suchfunktionen in React hinzuzufügen. Und hier ist unsere dritte Aufgabe abgeschlossen. In E-Commerce-Anwendungen oder Websites wie YouTube ist diese Suchfunktion also eine sehr nützliche und wichtige Funktion. Denken Sie also immer an die Logik der Suchleiste. Zuerst müssen Sie die Abfragezeichenfolge in der URL festlegen und diese Abfragezeichenfolge dann in der API übergeben, so einfach ist das. 172. Automatische Vorschläge in der Suchleiste: Wenn wir jetzt etwas in die Suchleiste schreiben, erhalten wir derzeit keinen Vorschlag für einen Produktnamen. In dieser Lektion werden wir also die Automatisierung für unsere Suchleiste zeigen Automatisierung für unsere Suchleiste In unserer N-Bar-Komponente fügen wir also nach unserer Handle-Submit-Funktion den nach unserer Handle-Submit-Funktion den Use-Effect-Hook hinzu und fügen darin die Callback-Funktion und das Abhängigkeitsarray mit dem Suchstatus Wenn sich also unsere Suche, diese Callback-Funktion und innerhalb dieser Callback-Funktion, ändern , rufen wir unsere Für API erstellen wir also in unserem Services-Ordner eine neue Datei mit dem Namen product services dot js In dieser Datei geben wir nun zunächst den API-Client aus dem Utils-API-Client-Modul Danach erstellen wir eine neue Funktion namens Get Suggestions API Und hier bekommen wir die Suche als Parameter, und innerhalb dieser Funktion wir einfach den API-Client Punkt GT jetzt als Endpunkt zurück , wir fügen Backticks, Schrägstrichprodukte, Schrägstrichvorschläge, Fragezeichen, Suche entspricht geschweiften Dollarklammern , Suche hinzu Wir haben das schon so oft gemacht. Lassen Sie uns diese Funktion jetzt einfach exportieren. Speichern Sie die Änderungen und kehren Sie zu unserer Navbar-Komponente zurück. Hier fügen wir zuerst eine Bedingung hinzu, wenn Suchpunkt Trim nicht gleich einer leeren Zeichenfolge ist, dann rufen wir nur unsere API Hier rufen wir Vorschläge abrufen, API-Funktion auf und geben hier unsere Suche weiter. Jetzt gibt diese Funktion ein Versprechen zurück. Hier verwenden wir also die Methode, und darin erhalten wir eine Antwort. Und um Vorschläge zu speichern, müssen wir eine neue Statusvariable erstellen. Nach unserem Suchstatus fügen wir also einen weiteren Use-State-Hook hinzu, fügen wir also einen weiteren Use-State-Hook Suggestions and Set Suggestions genannt wird. Und als Standardwert übergeben wir ein leeres Array. In unserer damaligen Methode setzen wir jetzt einfach Vorschläge für Antwortpunktdaten. Danach fügen wir die Catch-Methode hinzu, und hier erhalten wir ein Fehlerobjekt und protokollieren diesen Fehler einfach in der Konsole. Also fügen wir hier unsere Bedingung „Ich suche ist nicht leer“ hinzu und wenn die Suche leer ist, setzen wir die Vorschläge einfach auf ein leeres Array. Lassen Sie uns nun das Array mit den Vorschlägen in der Konsole protokollieren , die Änderungen speichern und einen Blick darauf werfen, etwas in die Suchleiste schreiben, und in der Konsole können wir sehen, dass wir diese Vorschläge erhalten. Diese Vorschläge bestehen aus einer Reihe von Objekten, und jedes Objekt hat nur zwei Eigenschaften, Unterstrich-ID und den Titel Also hier haben wir unsere Vorschläge. Jetzt müssen wir sie nur noch unter unserer Suchleiste anzeigen. Also müssen wir zuerst unsere Elemente hinzufügen und dann fügen wir den Stil für die Vorschlagsliste hinzu. Nach unserer Suchschaltfläche im Formular-Tag fügen wir eine neue Unterliste mit dem Klassennamen und dem Unterstrich-Suchergebnis hinzu. Darin fügen wir ein Listenelement-Tag mit dem Klassennamen, fügen wir ein Listenelement-Tag mit dem Klassennamen, Suchunterstrich-Vorschlag und einen Unterstrich-Link Darin fügen wir nun einfach die Link-Komponente von Rea Vorerst zur Requisite übergehen, um Produkte in Scheiben zu schneiden. Darin schreiben wir iPhone 14 Pro. Nun der Grund, warum wir hier die Link-Komponente hinzugefügt Wenn wir also auf diese Vorschlagszeile klicken, werden wir den Benutzer auf seine Produktseite weiterleiten. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unseren Vorschlags-Link. Lassen Sie uns jetzt Stil dafür hinzufügen. Sop Nabar Dot CSS-Datei. Nach unserer Suchschaltfläche fügen wir die Punktsuche, den Unterstrich, das Ergebnis mit runden Klammern Darin setzen wir zuerst die Position absolut oben auf 100% und links Um nun die Position absolut zu verwenden, müssen wir unsere Formularposition auf relativ setzen, nach oben scrollen, und im Navbar-Formular fügen wir Position Nun zurück zu unserem Suchergebnis. Und hier addieren wir mit 200% Rand oben zu zehn Pixeln, Wasser zu einem Pixel, Solid hat CD-CD-CD, Randradius zu fünf Pixeln, Hintergrundfarbe, Weiß und am Ende den Z-Index zu 9999 Danach fügen wir den Stil für Suchvorschlags-Link hinzu, also Punktsuche, Vorschlag, Link, und innerhalb der geschweiften Klammern setzen wir Display auf Flex Danach fügen wir den Stil für das Anker-Tag hinzu, das in der Link-Komponente verfügbar ist Dart Surge, Suggestion, Link, und hier zielen wir auf das Anker-Tag und die geschweiften Klammern ab. Hier fügen wir einfach die Breite auf 100% hinzu, addieren zehn Pixel und 20 Pixel, eine Größe auf 18 Pixel und den Cursor auf Und am Ende fügen wir den HR-Effekt für unseren Link hinzu. Dart Surge, Vorschlag, Link, Callan Hover. Und in den geschweiften Klammern setzen wir die Hintergrundfarbe auf E drei, E drei, E drei Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, unser Link sieht gut aus. Lassen Sie uns jetzt einfach unser Vorschlags-Array zeigen. Zurück zu unserer Neva-Komponente und in unserer ungeordneten Liste fügen wir CL-Klammern und Vorschläge mit MAP hinzu. Hier erhalten wir einen einzigen Vorschlag, Pfeilfunktion und geben diesen Listeneintrag einfach zurück Jetzt fügen wir in erster Linie der Vorschlags-ID mit Punkt und Unterstrich ein Schlüsselattribut Und in der Linkkomponente fügen wir Ci-Klammern und hintere Häkchen hinzu, und innerhalb dieser fügen wir Produkte mit Schrägstrich, Fragezeichen, Suche entspricht Dollar-Ci-Klammern und Vorschlagstitel mit Punkt Vorschlagstitel Und an der Stelle dieses fest codierten Titels fügen wir auch den Vorschlagspunkttitel hinzu Speichern Sie die Änderungen und schauen Sie sich das an, geben Sie etwas in die Suchleiste und wir erhalten Vorschläge Wenn Sie nun auf einen der Vorschläge klicken, wir zur Produktseite weitergeleitet und unsere Produkte werden entsprechend den Daten angezeigt. Die Vorschlagsliste bleibt jedoch unverändert geöffnet. Wir müssen sie schließen. Hier in unserer Link-Komponente fügen wir also ein Klickereignis und eine interne Fehlerfunktion hinzu. Und in den Klammern setzen wir zuerst die Suche ein Und setzen Vorschläge auf ein leeres Array. Speichern Sie die Änderungen und schauen Sie sich das an, schreiben Sie etwas und klicken Sie auf den Vorschlag. Siehst du, unser Vorschlag ist weg. Jetzt müssen wir dasselbe auch in unserer Handle-Submit-Funktion tun . Nach dieser Navigationsmethode fügen wir einfach Set-Vorschläge zu einem leeren Array hinzu. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, jetzt funktioniert es sehr gut, aber hier ist eine Sache. Auch wenn wir keine Vorschläge haben, bekommen wir trotzdem diese Zeilen. Klicken Sie also mit der rechten Maustaste darauf und gehen Sie zur Inspektion. Hier können wir sehen, dass es sich unseren ungeordneten Listenrand handelt. Lass uns das reparieren Also zurück zum VS-Code, und wir schließen unsere ungeordnete Liste mit geschweiften Klammern ein und übergeben hier einfach die Bedingung, wenn die Punktlänge der Vorschläge größer als Null ist, zeigen dann diese Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie jetzt, dass unsere Suchleiste gut funktioniert. Jetzt denken Sie vielleicht, was der Vorteil ist, wenn wir auf Vorschlag klicken und zu der Seite weiterleiten , die nur einen Artikel enthält. In unserer Datenbank haben wir derzeit also nur einen Artikel für jedes Produkt. Wenn unsere Datenbank jedoch wächst, haben wir möglicherweise ein iPhone 14 mit mehreren Farben, und zu diesem Zeitpunkt werden auf dieser Seite mehrere Produkte angezeigt. 173. Navigation für Autovorschläge: Wenn wir jetzt in unserer Suchleiste automatische Vorschläge erhalten, müssen wir auf diesen Suchvorschlag klicken. Aber in der realen Welt klicken 99% der Nutzer nicht auf den Vorschlagslink. Sie verwenden gerne ARO-Tasten, und das ist die gute Benutzererfahrung. In dieser Lektion werden wir also sehen, wie wir die Navigation mit den Ero-Tasten zu unserer Vorschlagsliste hinzufügen können. Zunächst erstellen wir also eine neue Statusvariable, rufen das ausgewählte Element auf, legen das ausgewählte Element fest und als Standardwert übergeben wir hier minus eins. Denkt einfach an die Logik und alle eure Zweifel werden sich klären. Wenn wir also die Abwärtstaste drücken, dieser ausgewählte Elementwert erhöht sich dieser ausgewählte Elementwert um eins, was Null ist. Und wir setzen eine Bedingung, wenn das ausgewählte Element mit dem Index unserer Vorschlagszeile übereinstimmt, dann markieren wir diese Zeile, so einfach ist das. Zuallererst müssen wir in unserer Sucheingabe ein Ereignis übergeben, das bei gedrückter Taste aufgerufen wird und jedes Mal ausgeführt wird , wird und jedes Mal ausgeführt wird , wenn wir eine beliebige Taste in dieser Eingabe drücken. Hier übergeben wir die Funktion handle key down. Definieren wir zuerst diese Funktion. Schreib const, handle key down. Wir erhalten hier ein Event-Objekt, und darin fügen wir einfach Console Dot Log E Dot Kee diese E-Punkt-Taste verwenden, erhalten wir den Namen der gedrückten Taste. Sagen Sie die Änderungen und schauen Sie sich das an, wählen Sie das Eingabefeld aus und drücken Sie die Pfeiltaste nach oben und sehen Sie hier, dass wir den Pfeil nach oben bekommen. Ich drücke den Abwärtspfeil und auch die Eingabetaste. Siehst du, hier bekommen wir unsere Schlüsselnamen. Jetzt können wir unsere Bedingungen entsprechend hinzufügen. In dieser Funktion fügen wir also unsere erste Bedingung I K entspricht dem Pfeil nach unten Stellen Sie sicher, dass Sie dieselbe Zeichenfolge schreiben, sonst funktioniert es nicht Darin schreiben wir nun das ausgewählte Element. Hier erhalten wir unsere Pfeilfunktion für den aktuellen Wert und geben den aktuellen Wert plus eins zurück. Danach fügen wir eine weitere Bedingung hinzu, wenn K dem Pfeil nach oben entspricht Und darin kopieren wir einfach diesen Ausdruck und fügen ihn hier Aber wir ersetzen ihn einfach durch den aktuellen Wert minus eins. Jetzt fügen wir endlich eine weitere Bedingung hinzu, wenn der Punkt K der Eingabe entspricht und auch das ausgewählte Element größer als minus eins sein sollte , denn wenn das ausgewählte Element minus eins ist und wir die Eingabetaste drücken, wird uns das eine Fehlermeldung geben Wenn das ausgewählte Element größer oder gleich Null ist, navigieren wir zu diesem Link Also definieren wir hier zuerst, Vorschlag gleich Vorschlägen ist, und als quadratisches Paket übergeben wir das ausgewählte Element Und danach navigieren wir einfach mit dieser Suche. Wie können wir das also mit der Navigationsmethode vereinfachen? Also hier kopieren wir diesen Link aus der Linkkomponente und fügen ihn in diese Navigationsmethode ein. Danach setzen wir die Suche auf eine leere Zeichenfolge und die Vorschläge auf ein leeres Array. Im letzten Schritt müssen wir nun den aktuellen aktiven Index hervorheben. in unserem Listenelement-Tag Dafür schneiden wir in unserem Listenelement-Tag diesen Klassennamen aus und HeklBackets ihre Bedingung hinzu Ich habe das Element ausgewählt, das dem Index dieses Vorschlags entspricht, dann fügen wir den Link für den Suchvorschlag und die aktive Klasse hinzu Da wir nur den Link zum Suchvorschlag hinzufügen. Außerdem müssen wir den Index aus dieser Kartenmethode abrufen. Speichern Sie diese Datei und lassen Sie uns CSS für diese aktive Klasse definieren. Öffnen Sie also die Navar-Punkt-CSS-Datei, und hier in unserem ***-Stil fügen wir eine weitere Klasse namens Suchvorschlag Link Punkt AcTV hinzu. Speichern Sie die Änderungen und schauen Sie sich das an, schreiben Sie etwas und drücken Sie die Tasten runter und hoch, um zu sehen, ob es funktioniert Jetzt drücken wir Enter und C, Link wird geöffnet. Aber wenn wir hier nach unten kommen und erneut den Abwärtspfeil drücken, wird unser ausgewähltes Element nicht hervorgehoben, ebenso wie der Aufwärtspfeil. Wenn wir also ganz oben auf unserer Liste stehen und erneut den Aufwärtspfeil drücken, müssen wir unseren ausgewählten Elementwert auf das letzte Element setzen . Gehen wir zurück zur Naver-Komponente hier in unserer Handle-Taste-Down-Funktion für den Pfeil nach unten. Wir übergeben hier die Bedingung, wenn der Strom Punktlänge minus eins entspricht, was das letzte Element ist, dann kehren wir zu Null zurück, was unser erstes Element ist, andernfalls geben wir den aktuellen Wert plus eins zurück Nun zu Pfeil nach oben, wir übergeben ihren Zustand. Wenn aktuell gleich Null ist, geben wir Vorschläge zurück, Punktlänge minus eins, was unser letztes Element ist, andernfalls geben wir den aktuellen Wert minus eins zurück Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, wir können in unserer Vorschlagsliste von oben nach unten gehen, aber hier ist ein Fehler. Wenn wir das letzte Element auswählen und dann weiterschreiben, müssen wir mehrmals die Aufwärtstaste drücken, und das ist die schlechte Benutzererfahrung Um das hier in unserer Handle-Taste-Down-Funktion zu lösen. Eine Bedingung hinzufügen Ich habe den ausgewählten Artikel mit einer Punktlänge von weniger als den Vorschlägen ausgewählt. Erst dann führen wir diese Logik aus. Verschieben Sie diesen Code also in den Zustand I, und andernfalls setzen wir ausgewählte Element auf den Standardwert, der minus eins ist. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, jetzt funktioniert es richtig. Sie können sehen, wie einfach es ist, unserer Vorschlagsliste eine Fehlernavigation hinzuzufügen. 174. Entblößungsmethode für die Erteilung von Vorschlägen: Derzeit haben wir in unserer Implementierung etwas sehr falsch gemacht Lass es mich dir zeigen. Öffnen Sie also in unseren Entwicklertools die Registerkarte Netzwerk und geben Sie hier etwas in diese Suchleiste ein. Hier können wir sehen, dass wir jedes Mal, wenn ein Benutzer ein Zeichen in die Suchleiste eingibt, einen API-Aufruf an das Backend tätigen. Hier senden wir zum Beispiel sechs Anfragen, und die ersten fünf Antworten benötigen wir wirklich nicht. Wenn wir also so viele Anfragen senden, verlangsamt sich unsere Anwendung und auch die Serverlast nimmt zu. Um die Anzahl der API-Aufrufe hier zu reduzieren, können wir also eine Technik verwenden, die als Debouncing bezeichnet wird Debouncing ist eine Methode, um die Ausführung einer Funktion zu verzögern , bis eine bestimmte Zeit vergangen Wenn ein Benutzer beispielsweise etwas in die Suchleiste eingibt, rufen wir nach einer gewissen Verzögerung unsere API Lassen Sie mich Ihnen zeigen, wie wir das machen können. Es ist wirklich einfach. In unserem Use-Effekt fügen wir hier die Funktion Set Timeout Da wir das außer der Callback-Funktion und einem zweiten Parameter wissen , müssen wir die Zeit in Millisekunden Hier vergehen wir 300 Millisekunden. Was auch immer wir zu dieser Callback-Funktion hinzufügen, sie wird nach 300 Millisekunden ausgeführt Wir werden diese Logik in unsere Callback-Funktion verschieben. Gut. Jetzt müssen wir für dieses Timeout eine Cleaner-Funktion hinzufügen Wir speichern dieses Timeout in Variablen, die als Verzögerungsvorschläge bezeichnet werden Im unteren Bereich geben wir zur Bereinigung die Callback-Funktion zurück Hier löschen wir einfach das Timeout und geben Verzögerungsvorschläge Speichern Sie die Änderungen und schauen Sie sich um, aktualisieren Sie die Seite, stellen Sie hier etwas bereit, und wir können hier sehen , dass wir nur eine Anfrage senden, also funktioniert es Lassen Sie mich Ihnen jetzt erklären , was hier passiert. Wenn sich unser Suchstatus ändert, wird die festgelegte Timeout-Funktion ausgeführt und nach 300 Millisekunden rufen wir unsere Vorschlags-API rufen wir Wenn der Benutzer nun innerhalb von 300 Millisekunden ein anderes Zeichen eingibt, wird das Timeout zurückgesetzt und der API-Aufruf wird erneut verschoben. Mein Benutzer schreibt innerhalb von 300 Millisekunden kein Zeichen , nur dann wird diese API aufgerufen. Kann diese Millisekunden nach unseren Bedürfnissen ändern, aber 300 Millisekunden sind die durchschnittliche Zeit, nicht zu langsam oder aber 300 Millisekunden sind die durchschnittliche Zeit, nicht zu langsam oder nicht zu schnell. Debouncing-Methode ist also sehr nützlich wenn Sie die Anzahl der API-Anfragen begrenzen möchten Damit ist unsere noch eine Aufgabe hier erledigt. 175. Produktliste sortieren: Lassen Sie uns nun unsere letzte Aufgabe erledigen, die darin besteht, unsere Produktliste zu kürzen Wenn es sich also um eine Produktlistenkomponente handelt, definieren wir zunächst eine Zustandsvariable zum Speichern des definieren wir zunächst eine Zustandsvariable Sortierwerts Wir nennen sie Short B und setzen Short B. Und als Standardwert übergeben wir eine leere Zeichenfolge Danach erstellen wir einen weiteren Verwendungsstatus zum Speichern der sortierten Produkte. Und als Standardwert übergeben wir ein leeres Array. Jetzt erhalten wir in unserem Select-Tag zuerst unseren aktuellen Shot-Wert. Wir übernehmen also das geänderte Ereignis, und darin finden wir die Funktion mit dem Event-Pfeil, und wir setzen für Sortierung B einfach den Zielpunktwert für den E-Punkt. Lassen Sie uns nun die Kurzschlussfunktion einstellen. In unserem vorherigen Projekt haben wir also unser Filmarchiv mit einer Low-Desk-Bibliothek gedreht Lassen Sie mich Ihnen nun eine andere Möglichkeit zeigen Kurzfilme hinzuzufügen, ohne eine Bibliothek zu verwenden Zuallererst fügen wir hier die Funktionen Use Effect Hook und Pass Callback im Abhängigkeitsarray Welche Variable fügen wir im Abhängigkeitsarray hinzu Wenn sich unsere Wertsituation ändert, wollen wir unsere Produkte leerverkaufen und wenn sich unsere Daten ändern, dann wollen wir auch Produkte leerverkaufen. Lassen Sie uns nun eine Logik für Leerverkäufe schreiben. Zuallererst fügen wir eine Bedingung hinzu: Wenn Daten verfügbar sind und Datenpunktprodukte nur verfügbar sind, dann wird unser Leerverkauf ausgeführt. In dieser Bedingung erstellen wir also zuerst die Kopie unseres Produktarrays Cons-Produkte entsprechen also Array-Produkten, Spread-Operator-Daten und Punktprodukten Nehmen wir nun die Bedingung I, kurz B, entspricht absteigendem Preis, und innerhalb dieser Bedingung verwenden wir Also schreiben wir Produkte mit dem Punkt SHOT. Lassen Sie mich nun schnell Ihre kurze Methode erklären. In dieser Sortiermethode erhalten wir also zwei Parameter A und B. A ist der Wert des ersten Elements und B ist der Wert des zweiten Elements. Mach dir darüber keine Sorgen , sieh dir das an. Für den Abstieg müssen wir hier passieren, B minus eins, und für den Aufstieg müssen wir A minus B passieren, so einfach ist In unserem Fall haben wir jetzt eine Reihe von Objekten. Hier geben wir B zurück, was unser zweiter Artikelpreis ist, minus A, was unser erster Artikel-Punktpreis ist. Nun, das wird ein sortiertes Array zurückgeben, wir packen es einfach mit sortierten Produkten ein und das war's. Fügen wir nun eine weitere Bedingung hinzu. C, sortiert nach, entspricht also dem aufsteigenden Preis. Und darin kopieren wir diesen Ausdruck und fügen ihn hier ein und ändern diese Bedingung in Preis minus B-Punkt-Preis Lassen Sie uns nun diese beiden Bedingungen duplizieren und hier ändern wir I in sf. An der Stelle, an der der Preis absteigt, setzen wir den Kurs absteigend fort Und bei unserer Sortiermethode setzen wir die Bedingung auf B-Punkt-Bewertungen, Punktezahl minus Punktpunktzahl für A-Punkt-Bewertungen Als Nächstes geben wir aufsteigend an und ändern die Vergleichsfunktion auf A-Punkt-Bewertungen minus Punktquote für B-Punkt-Bewertungen Wenn wir diesen Sortierwert dafür nicht haben, fügen wir hinzu und setzen sortierte Produkte einfach auf Produkte Jetzt, in unserer JSX, statt der Datenpunktprodukte, wir bei sortierten Produkten Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Ändern Sie die Auswahl zwischen Preis hoch und niedrig und sehen Sie sich unsere Produkte in absteigender Reihenfolge nach Preis sortiert Denken Sie immer daran, dass wir bei aufsteigender Reihenfolge die Vergleichsfunktion an A minus B übergeben müssen, und bei absteigender Reihenfolge verwenden wir B minus eins, und das So implementieren wir Kurzschlüsse ohne jegliche Bibliothek. Diese Sortiermethode funktioniert jedoch nur für Zahlen. In unserem vorherigen Projekt mussten wir Filme nach Datum kürzen, und deshalb verwenden wir die Low Desk Library. 176. Abschnitt 16 Performance- und Code-Management-Hooks: Willkommen im aktualisierten 16. Abschnitt der ultimativen Reaktoren Einige Schüler sagen mir, ich solle noch mehr React-Hooks erklären In diesem Abschnitt werden wir also einige React-Hooks sehen, mit denen Sie die Leistung Ihrer Anwendung verbessern können z. B. Memo verwenden und Callback verwenden Wir werden auch sehen, wann wir diese Hooks verwenden können und wann nicht Und nach diesen beiden Hooks werden wir einen weiteren Hook für die Codeverwaltung sehen, nämlich Use Reducer Hook Dies ist der Mini-Abschnitt, also fangen wir schnell damit 177. UseMemo-Hook verstehen: Lassen Sie uns nun verstehen, was Use Memo ist und wann wir es benötigen Use Memo ist ein Rahmen, der zur Verbesserung der Leistung verwendet wird , wenn wir teure Berechnungen in unserer React-Anwendung haben teure Berechnungen in unserer Jetzt fragen Sie sich vielleicht, was teure Berechnungen sind? Manchmal haben wir in unserer Anwendung komplexe Berechnungen wie das Finden der Summe von 1 Million Produkten oder das Ermitteln des Faktoriellen oder das Ermitteln der Fibonakiserie. Das sind wirklich umfangreiche Berechnungen, und die Berechnung des Ergebnisses kann einige Zeit in Anspruch nehmen In dieser Situation können wir den Memo-Hook verwenden, um die Zeit unerwünschter Berechnungen zu reduzieren und auch unnötige Rendervorgänge und auch Grund können wir die Leistung unserer Anwendung verbessern Lassen Sie mich Ihnen das praktisch zeigen. Um diese Hooks zu demonstrieren, verwende ich ein neues Projekt weil wir unsere E-Commerce-Anwendung nicht massenhaft nutzen wollen. Und nachdem wir das gelernt haben, werden wir diese Hooks in unserem Projekt implementieren. Sie können diese also einfach sehen und dann implementieren. Also habe ich hier eine Zustandsvariable namens count erstellt. Und in JSX habe ich zwei Schaltflächen erstellt, Minus und Plus, und in der Mitte zeigen wir die Anzahl an Nehmen wir nun an, wir müssen die Gesamtsumme von 1 Million Produkten ermitteln Dies ist nur ein Beispiel. Mach dir darüber keine Sorgen. Um das zu demonstrieren, habe ich diese teure Berechnungsfunktion entwickelt, die im Grunde so habe ich diese teure Berechnungsfunktion entwickelt, lange läuft und die Summe der Zählzahl zurückgibt. Und in unserem JSX zeigen wir einfach diese Summe an. Lassen Sie mich Ihnen zeigen, wie es im Browser aussieht. Sehen Sie, wir bekommen hier die Standardsumme. Lassen Sie mich jetzt auf diese Plus-Schaltfläche klicken. Siehst du, es dauert zwei bis 3 Sekunden pro Berechnung. Das ist völlig in Ordnung, weil wir einige berechnen müssen, aber hier ist eine Sache. Selbst wenn wir in dieser Komponente etwas tun, wird dieses Ergebnis erneut berechnet. Lass mich dir zeigen, was ich meine. Also hier in unserer Komponente erstelle ich eine neue Statusvariable namens Dark Theme und lege Dark Theme fest. Als Standardwert übergebe ich false. Keine Sorge, das ist nur eine Demo. Ich werde hier kein dunkles und helles Thema implementieren. Jetzt füge ich nach unserer Gesamtsumme ein Du hinzu und in diesem Du füge ich ein Tag hinzu und zeige hier das Thema an. Wenn das dunkle Thema wahr ist, dann zeigen wir den Dunkelmodus L den Hellmodus an. Und danach füge ich eine Schaltfläche hinzu, die als Gesamtthema bezeichnet wird. Und für diese Schaltfläche füge ich bei einem Klick-Ereignis ein einfaches Tag-Thema zum False-Dag-Thema hinzu Lassen Sie uns nun sehen, wie unsere Anwendung funktioniert. Wenn wir hier also die Anzahl erhöhen oder verringern, dauert es zwei bis 3 Sekunden, was gut ist. Lassen Sie mich nun versuchen, das Thema zusammenzufassen. Kannst du sehen, dass es wieder zwei bis 3 Sekunden dauert, das Thema zu ändern Weil diese teure Funktion wieder aufgerufen wird. Wir können das anhand dieser Konsolenzeile sehen. Warum berechnet es diese Summe neu? Richtig, weil wir den Status des Themes ändern. Und wir wissen, dass, wenn wir den Status des Themes ändern, gesamte Komponente neu gerendert wird, und deshalb zählt diese Summe wieder. Der ideale Weg ist also, wenn wir diese Zählvariable ändern, nur dann sollte unsere teure Berechnungsfunktion ausgeführt werden. Andernfalls wird unsere Anwendung verlangsamt. Wir haben das Problem, dass zur Berechnung unerwünschtes erneutes Rendern haben, und jetzt können wir das lösen Hier können wir den Memo-Hook verwenden , um die unerwünschten Berechnungen zu stoppen Seht euch das an und alle Zweifel werden sich klären. An der Stelle dieser teuren Berechnungsfunktion nennen wir use memo hook und genau wie use effect hook für use memo müssen wir auch an die Argumente des ersten Parameters eine Callback-Funktion übergeben , die wir innerhalb dieser Funktion ausführen wollen, wir wollen teure Berechnungsfunktion nennen Übergeben Sie unsere Zählung als Argument. Beim zweiten Parameter müssen wir ein Abhängigkeitsarray übergeben , in dem wir Variablen übergeben müssen. Immer wenn sich diese Variablen ändern, wird nur diese Funktion aufgerufen und deshalb übergebe ich hier count. Immer wenn diese Zählvariable geändert wird, diese teure Berechnungsfunktion ausgeführt und alles, was wir von dieser Funktion zurückgeben, wird zu unserer Gesamtvariablen hinzugefügt. Lassen Sie uns überprüfen, ob es funktioniert oder nicht. LconPlus S, es dauert zwei bis 3 Sekunden. Aber wenn wir jetzt auf das Gesamtthema klicken, ändert sich das sofort Auf diese Weise kann die Verwendung von Memo Hook die Leistung unserer Anwendung verbessern Leistung unserer Anwendung indem unerwünschte Berechnungen gestoppt werden Lassen Sie mich Ihnen nun eine Frage stellen. Wie können wir dasselbe Ergebnis erzielen, ohne den Memo-Hook zu verwenden Ich meine, wenn unsere Zählvariable geändert wird, sollte diese teure Berechnungsfunktion nur dann ausgeführt werden Das ist, wir haben eine andere Methode, denk darüber nach. Stimmt. Wir können das gleiche Ergebnis mit Use Effect Hook erzielen. Hier ist die Lösung mit Use Effect Hook. In dieser Implementierung müssen wir jedoch eine weitere Zustandsvariable namens total erstellen und total festlegen. In use memo müssen wir jedoch keine separate Statusvariable erstellen Diese Summe funktioniert als Gesamtzustandsvariable. Das ist also ein zusätzlicher Schritt für diese Use-Effect-Implementierung. Ansonsten funktionieren beide fast gleich. Daher ist es besser, Memo Hook für komplexe Berechnungen zu verwenden Memo Hook für komplexe Berechnungen zu verwenden 178. Übung für Teilsumme: Jetzt ist es Zeit für ein wenig Bewegung. also in unserem Cart Wis-Projekt Lassen Sie uns also in unserem Cart Wis-Projekt unsere Zwischensummenlogik ändern und dafür Memo Hook verwenden Ich weiß, dass du das sehr einfach machen kannst. Also probiere es aus und dann war die Lösung. Sehen wir uns jetzt die Lösung an. Öffnen Sie die Warenkorbseitenkomponente Lassen Sie mich zunächst diese Statusvariable für die Zwischensumme entfernen Einfach an der Stelle dieses Use-Effect-Hooks fügen wir den Use-Memo-Hook fügen wir den Use-Memo-Hook Nette automatische Eingabe funktioniert. Jetzt, wo wir diese Summe als Zwischensumme festlegen, geben wir einfach diese Summe zurück, weil use memo immer einen Wert zurückgibt . Erinnerst du dich? Und zum Schluss speichern wir diese Summe in der Variablen const subtotal Lassen Sie uns nun den Nutzungseffekt entfernen und die Eingabe von oben verwenden. Wir brauchen es nicht. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, es funktioniert genauso wie zuvor. Sie können sehen, wie einfach es ist, Mamo Hook zu verwenden. Als Use-Effekt benötigt use memo zwei Argumente. Erstens, Callback-Funktion, die immer einen Wert zurückgibt Und wenn wir keinen Wert von dieser Callback-Funktion zurückgeben wollen , warum verwenden wir dann den Memo-Hook Und das zweite Argument ist eine Reihe von Abhängigkeiten. Verwenden Sie also Memo Hook, wenn Sie komplexe Berechnungen durchführen müssen In der nächsten Lektion werde ich Ihnen einen sehr ähnlichen Hook zeigen, nämlich den Callback-Hook verwenden Wir sehen uns in der nächsten 179. Verwendung verstehen Callback-Hook: Lassen Sie uns nun etwas über Use Callback Hook lernen. Dieser Hook ist dem Use Memo Hook sehr ähnlich, was bedeutet, dass er verwendet wird, um die Leistung unserer React-Anwendung zu verbessern und unerwünschte Renderings zu verhindern. Der einzige Unterschied zwischen use memo und use callback besteht darin, dass use memo einen Wert zurückgibt und use callback eine Funktion zurückgibt. Das ist es. Ich weiß, das ist ein bisschen verwirrend. Lass es mich dir praktisch zeigen. Also hier entferne ich unseren vorherigen Use-Mammo-Code und erstelle zunächst eine Zustandsvariable mit dem Namen Use State namens Counter und Set Counter und dem Standardwert eins Wir erstellen eine weitere Zustandsvariable namens set theme und als Standardwert light Jetzt in unserem JSX erstelle ich hier das Thema als Tag und zeige es einfach hier und in Gully Bracket Theme Schau dir das an und du wirst verstehen, Callback Hook zu verwenden. Um nun den Theme-Wert umzuschalten, erstellen wir eine Schaltfläche und übergeben sie hier an das Ogle-Theme Für das OnClick-Event füge ich hier einen Funktionsverweis auf das GL-Thema hinzu Lassen Sie uns nun diese Funktion oben definieren. Gesamtthema entspricht also Pfeilfunktion und wir rufen einfach Set-Theme-Funktion auf und wir erhalten hier den vorherigen Wert, Pfeilfunktion, und wir übergeben hier Wenn Theme gleich hell ist, dann ändern wir es in dunkel, andernfalls ändern wir es Jetzt denkst du vielleicht, warum ich keinen Zähler zeige. Um den Zähler anzuzeigen, erstellen wir in unserem Quellordner eine neue Komponente namens Counter Dot JSX Ich weiß, dass Sie viele Fragen haben, aber nach den Ergebnissen werden Sie verstehen, was ich Ihnen zeigen möchte Lassen Sie uns mithilfe von RAFC Standardcode hinzufügen und hier geben wir einfach Tag zurück und zeigen hier Zähler, geschweifte Klammern und Zähler diesen Zähler zu ändern, erstellen wir eine Um den Zähler zu erhöhen, geben wir das Klick-Ereignis weiter und geben einfach die Funktion „Zähler erhöhen“ weiter. Wie können wir nun den Zähler abrufen und die Zählerfunktion erhöhen? Richtig, mit Requisiten. Wir destrukturieren hier, kontern und erhöhen die Zählerfunktion Speichern Sie die Änderungen und fügen Sie der Komponente, bevor sie zwei Tags hat, einfach die Zählerkomponente hinzu Jetzt müssen wir zwei Requisitenzähler an Zähler weitergeben und Zähler erhöhen, um den Zähler zu erhöhen Und zum Schluss müssen wir nur noch diese Funktion zum Erhöhen des Zählers definieren Der Zähler konstant erhöhen entspricht also dem Zähler setzen. Hier erhalten wir den vorherigen Wert, Fehlerfunktion und einfach den vorherigen plus eins. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, wenn wir auf die Schaltfläche Erhöhen klicken, erhöht sich der Zähler um eins, und wenn wir auf das Gesamtthema klicken, ändert sich das Thema Perfekt. Jetzt ist hier eine Sache. , wir führen in dieser Zählerkomponente Nehmen wir an, wir führen in dieser Zählerkomponente eine Aufgabe aus, die 500 Millisekunden dauert, was einer halben Sekunde entspricht Um das zu demonstrieren, fügen wir hier zuerst das Punktprotokoll der Konsole, die Zählerkomponente und das Rendern hinzu Und danach soll die Startzeit jetzt dem Leistungspunkt entsprechen Diese Performance Dot Now-Funktion gibt den Zeitstempel mit hoher Auflösung zurück Machen Sie sich darüber vorerst keine Sorgen. Und ich halte einfach die Y-Schleife fest und gebe ihr eine Bedingung, wenn Leistungspunkt jetzt minus Startzeit weniger als 500 ist, dann führe ich diese Schleife aus. Dadurch wird lediglich eine Verzögerung von 500 Millisekunden hinzugefügt. Speichern Sie die Änderungen und schauen Sie sich das an. Öffnen Sie die Konsole und aktualisieren Sie die Seite. Klicken Sie nun auf die Schaltfläche Erhöhen und sehen Sie hier, dass wir eine Meldung zum erneuten Rendern der Zählerkomponente erhalten und außerdem zweite Verzögerung beim Erhöhen des Zählerwerts haben , was wir wollen Perfekt. Aber hier ist das eine Problem. Selbst wenn wir auf das Toogle-Theme klicken, wird es auch als Counter-Komponente gerendert Nach einer Verzögerung von 500 Millisekunden ändert sich unser Thema . das Thema ändern, sollte die Counter-Komponente jedoch nicht erneut gerendert werden, da sie sich in zwei verschiedenen Zuständen befinden Hier wird unsere Counter-Komponente also unerwünscht neu gerendert, und aus diesem Grund unsere Anwendung langsamer Können Sie sich das Problem vorstellen , hier in der App-Komponente deutlicher zu demonstrieren , dass wir den Klassennamen an das Thema halten Und oben habe ich die App-Dot-CSS-Datei importiert. Speichere das, und in der App-Dot-CSS-Datei füge ich zuerst DU und in der C-Klammer einen Abstand 20 Pixeln hinzu Danach fügen wir Stil für Dark Class hinzu. Und darin fügen wir die Hintergrundfarbe zwei mit 101010 und Farbe zwei mit FFE 400 Speichern Sie die Änderungen und schauen Sie sich das an. Klicken Sie auf das Gal-Thema. Sehen Sie, wir können die Verzögerung deutlich erkennen. Also müssen wir das Problem unerwünschter Renderings lösen, und das können wir mit Us Callback Hook tun 180. So verwendest du useCallback-Hook in React: Lassen Sie mich Ihnen nun zeigen, wie wir Calbeck Hook verwenden können , um unerwünschte Renderings zu verhindern Wie Sie vielleicht wissen, gibt use callback immer eine Funktion zurück Also müssen wir zuerst herausfinden, welche Funktion unerwünschte Renderings verursacht Kannst du das richtig identifizieren. Es handelt sich um eine erhöhte Zählerfunktion , denn wenn wir auf ein kontogales Thema klicken, wird unsere App-Komponente neu gerendert und aufgrund dieser erhöhten Gegenfunktion Aus diesem Grund wird unsere Counter-Komponente auch neu gerendert. Aber unser Theme-Status hat nichts mit der Counter-Komponente zu tun, weshalb wir dann die Counter-Komponente rendern müssen In einfachen Worten, die Gegenkomponente sollte nur dann erneut gerendert werden, wenn wir unseren Zählerstatus ändern. Lassen Sie mich diese erhöhte Gegenfunktion wiederholen. Kommentieren Sie diesen aus. Sie können die Änderungen deutlich sehen. Die Verwendung der Callback-Hook-Syntax entspricht jetzt der Verwendung der Memo-Syntax. Wir können diese Pfeilfunktion mit Klammern umschließen und hier einfach den Callback-Hook hinzufügen. Nun, beim zweiten Parameter, müssen wir das Abhängigkeitsarray übergeben In diesem Abhängigkeitsarray, welcher Variablen wir hinzufügen werden, wird die Variable entgegengesetzt. Sind wirklich schlau, gut. Wenn sich also die Zählervariable ändert, sie nur dann durch diese erweiterte wird sie nur dann durch diese erweiterte Zählerfunktion neu erstellt Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Klicken Sie auf das Total-Thema, und es kommt immer noch zu Verzögerungen Um diese Logik zu vervollständigen, müssen wir also eine Kleinigkeit tun In welcher Komponente wir also unerwünschtes Rendern verhindern wollen, müssen wir diese Komponente mit der Mammo-Funktion umschließen Also hier oben können wir Mammo aus der React-Bibliothek importieren Und wenn wir diese Komponente unten exportieren, umschließen wir sie einfach mit der Mammo-Funktion Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Klicken Sie auf das Total-Thema und sehen Sie, dass es sehr reibungslos funktioniert, ohne dass wir eine Nachricht zum erneuten Rendern erhalten Wenn wir unseren Zähler ändern, wird erst dann unsere Zählerkomponente erst dann unsere Zählerkomponente Auf diese Weise verhindern wir ungewolltes erneutes Rendern. Lassen Sie uns nun die Verwendung von Callback Hook zusammenfassen. Use Callback Hook wird verwendet, um unerwünschte Rendervorgänge zu verhindern und uns dabei zu helfen, die Leistung unserer Anwendung zu verbessern Sie fragen sich vielleicht, sollten wir alle Funktionen in unserer Anwendung mit Use Callback Hook verpacken alle Funktionen in unserer Anwendung mit Use Callback Die Antwort lautet nein. Wir sollten nur die Funktionen einbinden, die zu unerwünschten Verlängerungen und Verzögerungen Gibt es einen Shortcut-Trick , um diese Art von Funktionen zu finden Die Antwort lautet ja. Es gibt einen Trick, den ich anwende als ich anfing, Callback-Hook zu verwenden Immer wenn Sie Funktionen als Requisiten übergeben und es in dieser Komponente einen anderen Status gibt, müssen Sie den Callback-Hook verwenden Lassen Sie uns überprüfen, ob dieser Trick für unsere App-Komponente funktioniert oder nicht. Also der erste Punkt, die Funktion übergibt Requisiten. In unserer App-Komponente übergeben wir die Funktion „ Zähler erhöhen als Requisiten an die Zählerkomponente Und zweitens sollte es in dieser Komponente einen anderen Status Hier haben wir also einen anderen Themenstatus als den Gegenstatus. Dieser Trick funktioniert also. Ich hoffe, Sie verstehen, dass Sie Callback Hook verwenden, Mamo verwenden und Callback verwenden, um die Anwendungsleistung zu verbessern Wenn Ihre React-Anwendung langsamer wird, können Sie sich Ihren Code ansehen und prüfen, ob Sie Use-Memo und Callback verwenden können Es ist nicht obligatorisch, aber Sie können sie verwenden, wenn Sie sie benötigen 181. Übung für die VerwendungCallback-Haken: Jetzt ist es an der Zeit, die Verwendung des Calbeck-Hooks zu üben. In unserem Cows-Projekt müssen Sie also herausfinden, ob es Komponenten gibt , für die Use-Callback benötigt wird Wenn Sie welche finden, müssen Sie den Calbeck-Hook in dieser Komponente verwenden Calbeck-Hook in dieser Komponente verwenden also etwas Zeit für diese Übung und erinnern Sie sich an diese beiden Punkte, um sie zu identifizieren Funktion durchläuft Prüfpunkte an die untergeordnete Komponente, und es sollte eine Zustandsvariable vorhanden sein Probieren Sie es aus und sehen Sie sich danach die Lösung an. In unserer Carwis-Anwendung überprüfen wir also zuerst unsere Stammkomponente, die die App-Komponente ist Hier haben wir also Zustandsvariablen, Benutzer und CAT. Außerdem übergeben wir die Funktion von übergeordneten Komponente an die untergeordnete Komponente Also können wir hier implementieren, Callback-Hook verwenden. Hier in der Funktion At to cart schließen wir diese Callback-Funktion einfach Klammern ein und fügen sie einfach hier hinzu, verwenden Callback und als zweiten Parameter fügen wir ein Abhängigkeitsarray hinzu und darin, was wir hinzufügen, richtig, wir fügen richtig, Für die Funktion „ Aus der Karte entfernt schließen wir ihre Callback-Funktion mit Klammern ein und oben fügen wir auch den Use-Callback-Hook hinzu und für den zweiten Parameter fügen wir das Array für die Unabhängigkeit des Kartenstatus “ schließen wir ihre Callback-Funktion mit Klammern ein und oben fügen wir auch den Use-Callback-Hook hinzu und für den zweiten Parameter fügen wir das Array für die Unabhängigkeit des Kartenstatus hinzu. Gleiche machen wir für diese Kartenaktualisierungsfunktion, schließen sie in Klammern ein und fügen hier das Use-Callback - und Abhängigkeits-Array mit dem Kartenstatus hinzu Use-Callback Für die Funktion Get card schließen wir nun ihre Callback-Funktion mit Klammern ein und fügen den Use-Callback-Hook Klammern Was wir nun zu diesem Abhängigkeits-Array hinzufügen, sollten wir Nein, wir benötigen hier keinen Kartenstatus denn wenn wir ein Array für die Unabhängigkeit des Kartenstatus hinzufügen, dann, wenn sich unser Kartenstatus ändert, nur dann wird diese Funktion „Karte abrufen “ ausgeführt, und das wollen wir nicht Wir wollen, dass wir Kartendetails erhalten, wenn der Benutzerstatus geändert wird Kartendetails erhalten Also fügen wir hier den Benutzerstatus hinzu, und so müssen Sie über das Hinzufügen von Abhängigkeiten nachdenken . Und das ist es. Wir fügen use Callback Hook in unserer App-Komponente hinzu. Speichern Sie diese Datei und wir müssen alle Komponenten, die diese Funktion verwenden, in die Mammo-Funktion einbinden Ich verpacke diese Komponenten schnell mit Mammo-Funktion. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, es funktioniert genauso wie zuvor. Mit use memo und use callback hook können wir die Leistung unserer React-Anwendung verbessern Jetzt könnten Sie sagen, wir sehen keine Leistungsverbesserung Ja, das können Sie derzeit sehen. Aber wenn unsere Anwendung zu diesem Zeitpunkt groß wird , sind diese Hooks wirklich hilfreich, um die Leistung zu verbessern. So können Sie Memo und Callback Hook verwenden. In unserer Anwendung finden Sie jetzt jede Stelle, an der Sie den Use-Callback-Hook hinzufügen können Dann müssen Sie an dieser Stelle den Use-Callback-Hook implementieren Das ist noch eine kleine Übung für dich. Schauen Sie sich unsere Anwendungskomponenten und wenn Sie den Ort gefunden haben, können Sie im Bereich Fragen und Antworten einen Befehl hinzufügen Andere Studierende erhalten diese Komponente ebenfalls zum Update. Su in der nächsten Lektion. 182. useReducer-Haken: Sehen wir uns nun einen weiteren React-Hook an, nämlich Use Reducer Use Reducer Hook wird also verwendet, um den komplexen Zustand und seine Methode zu organisieren In einfachen Worten, der Use Reducer wird verwendet, um unsere Komponente sauberer zu machen Ich weiß, dass das etwas verwirrend ist, also lassen Sie mich Ihnen das anhand eines einfachen Beispiels erklären Stellen Sie sich also vor, wir haben eine kleine Anwendung , in der wir eine Zählung haben, und wir haben drei Tasten: Erhöhen, Verringern und Zurücksetzen. Wenn wir auf Erhöhen klicken, wird die Zählung um eins erhöht. Wenn wir auf „Verringern“ klicken, Zählung um eins verringern und wenn wir auf „Zurücksetzen“ klicken, wird unsere Zählung auf den Standardwert zurückgesetzt , der Null ist. Sein Code sieht so aus. Oben haben wir CountState, US-State-Hook mit dem Standardwert Null verwendet. Für diesen Zustand gibt es nun drei Methoden, oder wir können sagen, es gibt drei Funktionen. Anzahl erhöhen, Anzahl verringern und Anzahl zurücksetzen. So einfach ist das. Jetzt ist dieser Code etwas unorganisiert, sodass wir diesen Code mithilfe von Use Reducer Hook organisieren können Ich kommentiere diesen Code aus und rufe hier use reducer hook auf. Dieser Hook akzeptiert nun zwei Argumente. erste ist die Reducer-Funktion, Die erste ist die Reducer-Funktion, also die Funktion, die entscheidet, welche Methoden wir aufrufen wollen, wie Increase, Reduce oder Reset Das zweite Argument ist der Standardwert unseres Zustands , der Null ist, richtig? Jetzt können wir hier auch ein weiteres Argument hinzufügen, das verwendet wird, um die Initialisierung des Statuswerts zu verzögern Aber normalerweise benutzen wir es nicht. Also vorerst wollen wir das nicht. Jetzt, genauso wie unser Use State Hook. Dieser Use-Reducer-Hook gibt auch ein Array zurück, das zwei Elemente enthält, aktuellen Status und eine Funktion , mit der wir den Status aktualisieren können Also C zuerst bekommen wir die Anzahl unserer Bundesstaaten. Zweitens die Funktion pro Updater-Status, und wir nennen sie Dispatch-Funktion Versand bedeutet, etwas zu senden. Es ist der gebräuchlichste Name für Reducer pro Verwendungszweck. Wenn Sie einen anderen Namen verwenden möchten, können Sie das auch tun. Es liegt ganz bei dir. Lassen Sie uns nun unsere Reduktionsfunktion definieren. Außerhalb unserer Komponentenfunktion definieren wir eine neue Funktion namens Reducer ist der wichtigste Teil von Use Reducer In dieser Funktion werden wir also unsere gesamte Logik für unseren Use Reducer schreiben Ich weiß, das ist ein wenig verwirrend, aber nach Abschluss dieser Lektion werden alle Ihre Zweifel geklärt sein Diese Use-Reducer-Funktion hat also zwei Parameter. Der erste Parameter ist der Status, was bedeutet, wo sich unsere Anwendung gerade befindet Und der zweite Parameter ist Aktion, was bedeutet, welche Aktion wir ausführen müssen. Zum Beispiel die Anzahl erhöhen, die Anzahl verringern, zurücksetzen usw. Diese Funktion gibt nun den aktualisierten Status unseres Zählstatus zurück den aktualisierten Status unseres Zählstatus Im Moment gebe ich nur den Status zurück, dem aktuellen Zählwert plus eins entspricht. Um diese Funktion aufzurufen, verwenden wir diese Versandfunktion. Also hier, in der Funktion „ Anzahl erhöhen“, rufe ich einfach die Dispatch-Funktion auf und übergebe nichts darin. Außerdem muss ich diese eingestellte Zählzeile auskommentieren. Nun wollen wir sehen, was wir bekommen. Speichern Sie also die Änderungen und schauen Sie sich das an. Klicken Sie auf die Plus-Schaltfläche und sehen Sie, dass der Zähler um eins steigt, denn in der Reduzierfunktion geben wir hier den Status plus eins zurück Wenn wir diesen Wert auf minus eins ändern, verringert sich der Zählwert Wenn wir diese Dispatch-Funktion aufrufen, wird diese Callback-Funktion ausgeführt und unabhängig davon, welchen Wert wir von dieser Funktion zurückgeben , wird dieser Wert zum aktuellen Statuswert So einfach ist das. Jetzt fragen Sie sich vielleicht, wie wir andere Aktionen wie Erhöhen oder Verringern für verschiedene Funktionen ausführen können? Dafür können wir in dieser Versandfunktion ein Objekt übergeben. In diesem Objekt fügen wir eine Eigenschaft namens type hinzu, und wir übergeben hier einfach type, um das gesamte Kapital zu erhöhen. gibt kein obligatorisches Gesamtkapital, aber es ist besser , die Art der Maßnahme hervorzuheben. nun diesen Typ verwenden, unsere Reducer-Funktion weiß unsere Reducer-Funktion, welche Aufgabe wir ausführen möchten Hier können wir eine diesem Typ entsprechende Bedingung setzen. Wir können I s verwenden oder wir können auch Switch Case verwenden. Ich verwende gerne Switch Case, Switch, und hier übergeben wir unsere Type-Eigenschaft. Jetzt ist die Frage, wie können wir die Typeigenschaft bekommen? Mit diesem Aktionsparameter erhalten wir die Typeigenschaft. Hier schreiben wir einfach eine Aktion , also diesen Objekt - und Punkttyp. Jetzt fügen wir innerhalb der geschweiften Klammern Groß- und Kleinschreibung, Erhöhung und Doppelpunkt hinzu, und hier geben wir den Status plus eins zurück Jetzt fügen wir eine weitere Groß-/Kleinschreibung hinzu, nämlich Verkleinern, Doppelpunkt, und was geben wir hier zurück Gewicht. Wir geben den Status minus eins zurück Als Nächstes fügen wir einen weiteren Fall hinzu, der zurückgesetzt wird. Doppelpunkt und hier geben wir Null zurück. Und aus Sicherheitsgründen fügen wir hier den Standardfall hinzu und geben den Status einfach so zurück , wie er ist. Wenn wir versehentlich einen anderen Aktionstyp hinzufügen, führt dies nicht zu einem Fehler. Die Reducer-Funktion ist also bereit. Jetzt müssen wir nur noch eine andere Art von Aktion auslösen. Kopieren Sie diese Versandfunktion und fügen Sie sie einfach der Funktion zum Verringern der Anzahl hinzu und ändern Sie diesen Typ auf Verringern. Als Nächstes ändern wir diesen Typ zum Zurücksetzen. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, unsere Anwendung funktioniert genauso wie zuvor. Sie können sehen, dass unser Code jetzt etwas übersichtlicher aussieht. Durch die Verwendung von User Reducer können wir unseren Code organisieren Lassen Sie uns diesen Use Reducer Hook noch einmal zusammenfassen. Use Reducer akzeptiert zwei Argumente . Reducer-Funktion , die einfach verwaltet , welche Art von Aktionen wir ausführen und was sie tut Und das zweite Argument ist der Standardwert. Jetzt gibt use reducer, genau wie use state, auch ein Array mit zwei Elementen zurück state und Dispatch-Funktion Dieser Status ist der aktuelle Statuswert, und mit dieser Versandfunktion können wir die Art der Aktion angeben Welchen Typ wir auch immer von hier aus übergeben, er wird in unserem Switch-Fall funktionieren, so einfach ist das. Reducer zu benutzen ist also nichts. Machen Sie einfach unseren Code übersichtlicher. Wenn Sie mit Ihrem aktuellen Code zufrieden sind, wenden Sie Use Reducer nicht gewaltsam für diese Es liegt ganz bei dir. Lass dich davon nicht verwirren. Jetzt könnten Sie sagen, dass unser Code durch die Verwendung dieser Reducer-Funktion hässlicher aussieht, und das ist wahr Die Lösung besteht darin, dass wir diese Reducer-Funktion in einer anderen Datei definieren und diese Funktion einfach hier in use reducer hook importieren diese Funktion einfach hier in use reducer In unserem Quellordner erstellen wir einen neuen Ordner namens reducers. In diesem Ordner erstellen wir eine neue Datei namens count reducer Jetzt schneiden wir diese Reducer-Funktion aus einer Komponente aus und fügen sie in die Count-Reducer-Datei und fügen sie in die Count-Reducer-Datei Außerdem können wir diesen Status in „zählen“ umbenennen. Ich denke, das ist sinnvoller und ändere auch den Funktionsnamen in Count Reducer Und dann exportieren wir einfach den Standard-Zählreduzierer. Speichern Sie die Änderungen, und in unserer App-Komponente an der Stelle dieses Reduzierers fügen wir den Zählreduzierer hinzu Speichern Sie die Änderungen und sehen Sie, dass unser Code jetzt sauberer aussieht. So können Sie Ihre Komponente sauber machen. 183. Übung für Reducer: Jetzt ist es Zeit für ein wenig Bewegung. In unserem Cardwise-Projekt haben wir unsere App-Komponente, in der wir verschiedene Methoden zur Änderung des Kartenstatus verwalten. Sie müssen also Use Reducer für den Kartenstatus implementieren. Außerdem liegt der Hinweis in der Reducer-Funktion, wir müssen nur die Status-Update-Logik anwenden und keine API aufrufen Es sollte getrennt sein. Hier ist der Fall einer für den Kartenstatus. Anhand dieses Beispiels können Sie weitere Fälle erstellen. Das wird Spaß machen Verbringen Sie einige Zeit mit dieser Übung und sehen Sie sich dann die Lösung an. 184. Komplexe Aktionen für Reducer: Ich hoffe, du löst diese Aufgabe, oder zumindest versuchst du, sie zu lösen Denn die Verwendung von Reducer Hook bei komplexen Aktionen wie Einkaufswagen hinzufügen“ oder „Karte entfernen oder „Karte aktualisieren“ ist etwas verwirrend Wenn Sie häufig verwirrt sind, sollten Sie in meinem Vorschlag den Use Reducer Hook nicht implementieren, da Sie am Ende des Tages Ihrem Code arbeiten müssen und Reducer nur zum Organisieren von Code verwenden Reducer nur Sie können Reducer Hook verwenden lassen. Es ist nicht verpflichtend, aber viele Schüler möchten lernen, wie man den Reducer Hook benutzt Deshalb füge ich diese Lektion hinzu. Sehen wir uns nun die Lösung dafür an. In unserem Quellordner erstellen wir einen neuen Ordner namens reducers, und in diesem Ordner erstellen wir eine neue Datei namens card reducer dot js In dieser Datei erstellen wir nun eine neue Funktion, Card Reducer, was entspricht, dass wir hier zwei Parameter erhalten. Weißt du, was sie schreiben? Zuerst erhalten wir den Status, oder wir können hier cart nennen, und zweitens ist Action, das Objekt, das wir in der Dispatch-Funktion übergeben. In dieser Funktion müssen wir nun switch case schreiben. Also switch, und hier fügen wir den Action-Punkt-Typ Cali Brackets Fall für „In den Warenkorb legen“. Spalte, gehen wir zur App-Komponente und lassen Sie uns diese Logik für den Stufenwechsel einfach herausschneiden, und lassen Sie uns diese Logik für den Stufenwechsel einfach herausschneiden bevor wir die Head-to-Cart-API aufrufen und sie in den Fall „In den Einkaufswagen hinzufügen“ einfügen. Um diesen Code nun zu formatieren, lass mich ihn gut speichern. Jetzt, am Ende, müssen wir einfach den aktualisierten Zustand zurückgeben. Entfernen Sie diese eingestellte Kartenfunktion und wir geben diese aktualisierte Karte zurück Lassen Sie uns nun diesen Reducer von hier aus exportieren. Exportieren Sie also Standard, Card Reducer. Sagt die Änderungen, und in unserer App-Komponente schreiben wir an der Stelle dieses Verwendungsdatumsreifens Use Reducer, und als erstes wollen wir hier Also Kartenreduzierer, nette automatische Eingabe funktioniert. Und beim zweiten Parameter hatten wir den Standardwert unserer Karte , der ein leeres Array ist Verwenden Sie jetzt Reducer Returns für Artikel, sodass wir hier Karte und Versandkarte destrukturieren können Jetzt rufen wir in unserer Kopf-zu-Karten-Funktion die Versandkartenfunktion auf, und darin übergeben wir Objekt, und die erste Eigenschaft ist Typ , also Kopf zu Stellen Sie sicher, dass Sie dieselbe Zeichenfolge schreiben , die Sie für Switch Case verwenden. Hier in unserem Switch-Gehäuse haben wir dieses Produkt und diese Menge nicht. Wie können wir das also hierher bekommen? Richtig. Genauso wie wir diesen Typ bekommen. In unserer Versandfunktion übergeben wir also eine weitere Eigenschaft namens Payload In dieser Nutzlast können wir alle externen Daten, die wir senden möchten, in der Reducer-Funktion senden Dies sind die gemeinsamen Eigenschaften Name, Typ und Nutzlast. Sie können ihn ändern, wenn Sie möchten, aber stellen Sie sicher, dass Sie diesen Eigenschaftsnamen in der Reducer-Funktion verwenden müssen diesen Eigenschaftsnamen in der Reducer-Funktion Wir übergeben hier das Objekt und wollen das Produkt als Produkt und die Menge als Menge senden als Produkt und die Menge als Menge Oder wir können es sogar so vereinfachen. Speichern Sie diese Datei, und in unserer Funktion zum Reduzieren des Warenkorbs erhalten wir hier die Nachteile von Cli-Klammern, das Produkt, Menge entspricht der Aktionspunkt-Nutzlast Rette die Banden und sieh dir das an. Oh, wir bekommen hier einen Fehler. Lass mich die Konsole öffnen. Sehen Sie, hier bekommen wir, dass die Funktion der Setcard nicht definiert ist. In unserer App-Komponente in unserer Getcard-Funktion können wir also die Setcard-Funktion nicht verwenden Wir benötigen also einen Fall für die Funktion Get Card. Also rufen wir die Versandkartenfunktion und übergeben ihren Typ an Get Card. Und was wollen wir in die Payload schreiben? Wir wollen ein Objekt mit Produkten als Antwort auf Punktdaten senden Produkten als Antwort auf Punktdaten Speichern Sie diese Datei und in unserer Reducer-Funktion definieren wir einen anderen Fall, eine Katzenkarte, eine Spalte, und darin wir einfach Aktionspunkt-Payload-Punktprodukte zurück Speichern Sie die Änderungen und schauen Sie sich das an. Auch hier erhalten wir einen Fehler. Ich denke, es gibt immer noch SAT-Kartenfunktionen. Sehen Sie hier, wir übergeben die Set-Card-Funktion im Kartenkontext. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Kartendaten. Unser Reduzierer funktioniert also gut. Jetzt brauchen wir noch einen Fall denn wenn unsere At to Cart API einen Fehler bekommt, müssen wir auch unsere Karte auf den vorherigen Status setzen Hier rufen wir also Funktion für die Versandkarte auf und übergeben hier den Typ, um die Karte zurückzusetzen Und bei Payload übergeben wir das Objekt mit der Karteneigenschaft. Speichern wir das und in der Reducer-Funktion unten fügen wir einen weiteren Fall für Revert Cart hinzu und geben hier einfach Action Payload Dot Card zurück Speichere das und es wird funktionieren. Lassen Sie uns nun ein Argument für das Entfernen der Frontkartenfunktion vorschlagen. In dieser Funktion schneiden wir diese Logik ab, bis die Karte gesetzt ist. Und in unserer Reducer-Funktion fügen wir eine weitere Hülle hinzu, die von der Karte entfernt wird Und hier fügen wir einfach den Code ein. Jetzt können wir an der Stelle der gesetzten Karte eine geschriebene neue Karte hinzufügen, aber hier ist die eine Sache. Wir benötigen hier die Produkt-ID , die der Benutzer entfernen möchte. Also können wir hier Action Dot Payload Dot ID hinzufügen. Das. Und in unserer App-Komponente rufen wir hier die Funktion „ Versandkarte und übergeben hier ein Objekt mit dem Typ, das von der Karte entfernt werden soll , und fügen Objekt mit der ID-Eigenschaft eine weitere Eigenschaftsnutzlast hinzu In der Cache-Methode wollen wir den Kartenstatus zurücksetzen. Wir können diese Versandkartenfunktion einfach kopieren um sie wiederherzustellen, und sie in die Cache-Methode einfügen Lassen Sie uns dies auch in allen Cache-Methoden ersetzen. Gut. Nun, hier brauchen wir diese alte Kartenvariable nicht, also können wir sie entfernen. Lassen Sie uns nun unseren letzten Fall festlegen, der für die Update-Karte gilt. Hier können wir zwei Lösungen implementieren. Wir können separate Kisten erstellen oder die Menge erhöhen und die Menge verringern. Oder wir können das einfach in einem einzigen Fall tun. Aber in diesen beiden Fällen sind wir sehr verwirrt. Überspringen Sie diese SA ist, oder wir können das einfach machen. Anstelle dieser Kartenfunktion kopieren wir einfach diese Versandkartenfunktion durch eine Karte vom Typ Cat, wodurch der aktuelle Kartenstatus durch die aktualisierte Karte ersetzt wird . Hier fügen wir das ein und ersetzen diese Antwortpunktdaten durch die aktualisierte Karte. Duplizieren Sie dies jetzt und wir tun dasselbe auch für die Verringerung. Speichern Sie die Änderungen und schauen Sie sich das an. Sehen Sie, das Hinzufügen, Entfernen und Aktualisieren aller Funktionen funktioniert gut. Jetzt müssen Sie entscheiden, ob Sie Reducer verwenden müssen oder nicht, um Ihren Code zu organisieren Meiner bescheidenen Meinung nach können Sie Reducer Hook für weniger komplexe Aktionen verwenden , aber für größere komplexe Aktionen schlage ich nicht vor, Reducer Hook zu verwenden Die Wahl liegt bei Ihnen. Wenn Sie auch nur ein bis 2% verwirrt sind, verwenden Sie für diese Aktion keinen Reducer Hook Es ist völlig in Ordnung. Dies ist der aktualisierte Abschnitt für den ultimativen React-Kurs und im nächsten Update geht es um React-Abfragen. Seien Sie gespannt auf diese Updates. Ich hoffe, Ihnen gefällt dieser Kurs. Seien Sie gespannt auf diese Updates. 185. Abschnitt 17 Master-React-Abfrage: Willkommen im 17. Abschnitt des ultimativen Rac-Kurses. In diesem Abschnitt lernen wir die beste Bibliothek für die Verwaltung und Daten in der React-Anwendung kennen, nämlich Reac Query Durch die Implementierung von Read Query in unserem Projekt wird die Leistung unserer Anwendung erheblich gesteigert Wenn ich mich entscheide, diesen React-Kurs zu erstellen , kenne ich mich ehrlich gesagt nicht mit allen Rea-Query-Funktionen aus. Als ich die Schüler um einen Themenvorschlag bitte, war das am häufigsten nachgefragte Thema Must Add Rea Query. Also habe ich versucht, über Raquery zu recherchieren, und es hat mich wirklich erstaunt, wie nützlich diese Bibliothek ist Wenn du genauso denkst wie ich, dann lass es mich im Bereich Fragen und Antworten wissen Ich liebe es, davon zu hören. Also hier ist der Vergleich. Ich zeige euch sowohl ohne Raquery mit Reaquery, wie sich unsere Anwendung verbessert Wie Sie sehen können, ist die Implementierung von Reaquery wirklich gut und also, ohne Ihre genaue Zeit zu verschwenden, Lassen Sie uns also, ohne Ihre genaue Zeit zu verschwenden, die Reaquery auf sehr einfache und unkomplizierte Weise erlernen 186. Was ist React Query und warum wir es brauchen: Bevor wir anfangen, Rea Query zu lernen, wollen wir zunächst verstehen, was Rea Query ist und vor allem, warum wir es brauchen. Re Query ist also eine Bibliothek, die verwendet wird, um Daten unserer API-Anfrage zu verwalten und zwischenzuspeichern. Durch die Verwendung der Requeri-Bibliothek können wir unsere Daten, die wir von APIs erhalten, einfach abrufen , aktualisieren und zwischenspeichern , Nun, hier verstehen wir Abrufen und Aktualisieren, aber Sie denken vielleicht, was Cache ist also ein Speicher, der die abgerufenen Daten im Speicher aufnehmen kann Es fungiert wie ein temporärer Speicher für unsere Daten, die wir von einer API-Anfrage zurückgeben Lassen Sie mich Ihnen das anhand des Beispiels erklären. In unserem Card Wish-Projekt rufen wir hier die gesamte Produktliste ab. Jetzt werden alle Produktdaten im Zwischenspeicher gespeichert , der als Case bezeichnet wird Wenn wir jetzt zu einer anderen Seite wie der Kartenseite gehen und erneut zu unserer Produktseite zurückkehren, zu unserer Produktseite zurückkehren, erhalten wir diese Daten sofort von Case. Wenn wir also Cache in unserer Anwendung implementieren, wird sich die Benutzererfahrung erheblich verbessern. Und das ist nicht gerade genug. Das andere Merkmal von Reaquery ist, dass wir Funktion zum Stornieren von Anfragen auf der Komponentenhalterung erhalten Außerdem erhalten wir mehrere Wiederholungsversuche. Das heißt , wenn unsere Netzwerkverbindung unterbrochen ist oder unsere Anfrage aus irgendeinem Grund fehlschlägt, kann die Anfrage mehrmals wiederholt werden Sie können diese Funktion auch ausschalten, wenn Sie möchten. Es liegt ganz bei dir. Als Nächstes erhalten wir auch eine automatische Aktualisierung im Zeitintervall. So können wir den Timer zum Beispiel auf 2 Minuten für die automatische Aktualisierung einstellen. Alle 2 Minuten erhalten wir Daten vom Server, wenn sich der Benutzer noch auf dieser Seite befindet. Natürlich können wir diese Funktionen implementieren, indem wir mehr Code schreiben, aber mit Requery können wir diese Funktionen in sehr wenig Code implementieren Wenn Sie die Benutzererfahrung Ihrer Anwendung verbessern möchten , können wir für die Verwaltung und Zwischenspeicherung von Daten aus der API die Rea-Abfragebibliothek verwenden Ich bin ernsthaft in diese Bibliothek verliebt. Entwickler denken, dass Raquery komplex ist, aber glauben Sie mir, das ist es nicht Es ist nur eine Frage der Zeit und der Übung. Um Raquery einfach zu machen, teile ich den Raquery-Abschnitt in Zunächst werden wir alle Konzepte in einem anderen Projekt lernen , und dann werden wir im nächsten Abschnitt praktische Übungen durchführen, indem wir diese Funktionen in unserem Cartwish-Projekt implementieren Fangen wir also an, Raquery zu lernen. 187. React Query in unserem Projekt einrichten: Lassen Sie uns nun Requeri in unserem Projekt einrichten. Raquery zu lernen, werden wir unser Catwish-Projekt also Um Raquery zu lernen, werden wir unser Catwish-Projekt also nicht durcheinander bringen Stattdessen werden wir alle Konzepte aus unserem vorherigen Routing-Projekt lernen , und nachdem wir alle Konzepte gelernt haben, werden wir unser Catwish-Projekt als Übung aktualisieren Hier verwenden wir unser altes Routing-Projekt, bei dem wir in den Abschnitten acht und neun das Routing und das Aufrufen von APIs lernen Sie finden Ihr Projekt nicht, dann machen Sie sich keine Sorgen, gehen Sie zum Ordner Ressourcen und Sie erhalten diese Rückfragevorlage, sich um dasselbe Projekt handelt Lassen Sie uns dieses Projekt also im VS-Code öffnen. Nett. Zuerst werden wir alle Pakete mit NPM install installieren Gut. Lassen Sie uns nun schnell eine Rea-Abfrage zu unserem Projekt hinzufügen. Also hier in unserem Terminal schreiben wir NPM, ich, im Schnitt, zehn SCR-Abfragen. Und wenn wir genau dieselbe Version installieren wollen, dann schreiben wir mit der Rate 0.12 0.2 und drücken Enter Gut. Minimiere nun dieses Terminal und öffne die JSX-Datei mit dem Hauptpunkt Hier müssen wir unsere Anwendung mit einer Rea-Abfragekomponente umschließen , genau wie wir es in Rag Router Doom getan haben Also hier importieren wir. Zuerst benötigen wir den Query Client von Ten Stack Raquery und zweitens brauchen wir den Query Client Provider Jetzt, nach unseren Importen, erstellen wir eine neue Instanz mit dem Namen Query Client, der einem neuen Abfrageclient entspricht Können Sie sich nun vorstellen, mit welcher Komponente wir unsere Anwendung mit dem Query Client Provider umschließen unsere Anwendung mit dem Query Client Provider , denn das ist die Komponente, die noch übrig ist. Du bist schlau. Jetzt fügen wir hier einfach das Client-Attribut hinzu und darin übergeben wir unseren Instant Query-Client , den wir gerade hier erstellt haben, und das war's. Wir haben unserem Projekt erfolgreich eine Rea-Abfrage hinzugefügt. Sie denken, Sie müssen sich an diesen Vorgang erinnern , dann machen Sie sich keine Sorgen. Sie können diesen Vorgang in der Rea-Abfragedokumentation nachlesen. In der nächsten Lektion werden wir nun Daten mit Raquery abrufen 188. Verkäuferdaten abrufen: Lassen Sie uns nun Daten mit einer Rea-Abfrage abrufen. In Re Query haben wir also einen Query-Hook, der verwendet wird, um die Daten von APIs abzurufen und zu verwalten Also hier in der Komponente unseres Verkäufers nennen wir U Query Hook from ten Stack und lesen die Query-Bibliothek In diesem US-Abfrage-Hook müssen wir nun ein Konfigurationsobjekt mit zwei Eigenschaften übergeben. Der erste ist für den Abfrageschlüssel, der die eindeutige Kennung für unsere Abfrage ist. Hauptsächlich wird es für das Caching verwendet. Jedes Mal, wenn wir Daten aus dem Backend abrufen , wie z. B. Verkäuferinformationen , wurden diese Daten mit diesem Schlüssel im Cache gespeichert, und in Zukunft werden sie über diesen Schlüssel zugänglich sein Wir müssen unseren Schlüssel auf ein Array setzen, das einen oder mehrere Werte haben kann. In den meisten Fällen ist der erste Wert eine Zeichenfolge, die verwendet wird, um die Art der Daten zu beschreiben , die wir im Cache speichern. In diesem Fall benötigen wir Verkäuferdaten. Hier können wir also wie andere Zeichenketten für Verkäufer übergeben oder wir können sogar Objekt wie eine Seite an eine übergeben usw. Machen Sie sich darüber vorerst keine Sorgen. Wir werden das im Detail in der Ratestunde sehen. Konzentrieren wir uns zunächst auf das Abrufen von Daten. Lassen Sie uns diese anderen Werte entfernen. Die zweite Eigenschaft ist nun die Abfragefunktion, die Funktion, mit der wir Daten vom Backend abrufen Beachten Sie, dass diese Funktion immer ein Versprechen zurückgeben sollte , das Daten oder Fehler zurückgeben kann Hier übergeben wir also die Fehlerfunktion und hier aus diesem Nutzungseffekt kopieren wir diese Punkt-Gad-Methode des API-Clients, die unsere Axios-Variable ist, und fügen sie einfach Nun fragen Sie sich vielleicht, sollten wir Axios immer für die Abfragefunktion verwenden Und die Antwort lautet nein. Wir können die Patch-API oder eine beliebige Bibliothek verwenden , um SttprQuest zu erstellen Raquery ist es egal, wie wir StdprQuest machen. Es kümmert sich nur um die Verwaltung und das Zwischenspeichern von Daten, stellt aber sicher, dass es Daten oder Fehler zurückgibt, nur Nun, wir wissen, dass dieser API-Client Dot Get Method Antwortobjekt zurückgibt, aber wir möchten nicht das vollständige Antwortobjekt im Cache speichern das vollständige Antwortobjekt im Cache Wir wollen nur die echten Daten speichern , die wir vom Backend erhalten. Also fügen wir hier dann die Methode hinzu, und darin erhalten wir eine Antwort, und dann geben wir einfach Antwortpunktdaten zurück. Und in diesen Daten erhalten wir ganz einfach die Informationen zu unseren Verkäufern. Jetzt können wir diese Logik auch außerhalb von Use-Abfragen implementieren . Also definieren wir oben eine Funktion namens Fat Sellers, und hier fügen wir unsere Pfeilfunktion hinzu. Und die Eigenschaft der Abfragefunktion, wir übergeben einfach die Funktionsreferenz. Zur Laufzeit rufen wir diese Funktion also auf. Und wenn dieses Versprechen erfüllt ist, erhalten wir eine Reihe von Verkäuferdaten, und dann wird dieses Array mit diesem Schlüssel im Cache gespeichert. Wie können wir auf Daten aus diesem Use-Abfrage-Hook zugreifen? Diese Verwendungsabfrage gibt ein Objekt mit einigen Eigenschaften wie Daten, Fehler, Laden, Status usw. zurück Objekt mit einigen Eigenschaften wie Daten, . Hier können wir das Objekt also umstrukturieren und Daten abrufen. Mit dieser Use-Abfrage müssen wir jetzt nicht mehr die Fehler des Verkäufers erstellen und die Statusvariablen werden nicht geladen Wir werden alle Variablen aus dieser Use-Abfrage abrufen. So können wir die Zustandsvariablen entfernen. Außerdem benötigen wir diesen Nutzungseffekt nicht. Und lassen Sie uns in unserem JSX vorerst diese Anweisung zum einfachen Laden und auch die Fehleranweisung auskommentieren und auch die Fehleranweisung Nun, hier an der Stelle dieser Verkäufer, können wir eine Datenpunktkarte schreiben, oder wir können unser Datenobjekt sogar umbenennen und ihm einen Namen geben, Verkäufer Ich denke, das ist genauer. Speichern Sie die Änderungen und lassen Sie uns unsere Anwendung ausführen. Also im Terminal, NPM run DV, öffne diesen Link. Navigieren Sie nun zur Admin-Seite und öffnen Sie die Verkäuferseite. Hier können wir sehen, dass wir einen Fehler erhalten. Öffnen wir also die Konsole und wir können sehen, dass die Eigenschaften von undefined nicht gelesen Also warum passiert das? Denn obwohl wir keine Daten vom Backend erhalten, unsere Daten standardmäßig auf Null gesetzt. Um dieses Problem zu lösen, müssen wir hier ein Fragezeichen hinzufügen, was eine optionale Verkettung darstellt Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir die Daten unseres Verkäufers. Aktualisiere jetzt die Seite. Siehst du, wir bekommen fast sofort unsere Daten. Das liegt am Caching. Lass mich dir das deutlich zeigen. Klicken Sie auf diese Verkaufsseite, und wenn wir auf die Verkäuferseite klicken, können wir diese Daten hier ohne Verzögerung direkt sehen . Das ist Caching Bei der Implementierung von Requery erhalten wir also automatische Wiederholungsversuche erhalten wir also automatische Wiederholungsversuche Wenn also etwas passiert und unsere API-Aufrufe fehlschlagen, wird Requery es noch Danach erhalten wir eine automatische Aktualisierung, sodass wir die Zeitspanne festlegen können. Nach dieser Zeit unsere Abfrage Die wichtigste Funktion ist das Caching, das heißt, wenn wir Daten zum ersten Mal abrufen , werden sie im Cache gespeichert Wenn wir dann das nächste Mal dieselben Daten erhalten, wenn sie im Cache verfügbar sind, gehen wir nicht zum Server Stattdessen holen wir es uns direkt aus dem Cache, was die Leistung unserer Anwendung enorm verbessern wird Leistung unserer Anwendung enorm In der nächsten Lektion werden wir uns nun mit Fehlern und dem Laden in einer Rea-Abfrage befassen 189. Fehlerbehandlung und Laden: Sehen wir uns nun die Fehlerbehandlung mit Raquery an. Wie wir wissen, gibt unsere Anfrage ein Objekt zurück. Und in diesem Objekt erhalten wir auch die Fehlereigenschaft Also bekommen wir hier einen Fehler. jetzt in unserem JSX Lassen Sie uns jetzt in unserem JSX den Kommentar aus dieser Fehleranweisung entfernen Und an der Stelle der Fehler fügen wir Fehler hinzu, und in unserem Emphais-Tag drucken wir eine Fehlerpunktmeldung Machen wir nun einen Tippfehler in unserem EPI und zeigen darauf, speichern wir die Änderungen und schauen uns das an Wenn Sie die Seite aktualisieren, können wir in der Konsole sehen, dass Raquery aufgrund der automatischen Wiederholungsfunktion mehrmals versucht Daten vom Backend abzurufen aufgrund Und nach einiger Zeit erhalten wir eine Fehlermeldung. Lassen Sie uns nun die Ladeanzeige anzeigen. wir also die Fehlereigenschaft erhalten, erhalten wir auch die Eigenschaft zum einfachen Laden von Eigenschaften aus unserem Use-Abfrage-Hook. Und in der JSX müssen wir nur diesen Kommentar entfernen und unseren Loader anzeigen Speichern Sie die Änderungen und schauen Sie sich das an. Hier können wir auch unsere Ladeanzeige sehen. So gehen wir also mit Fehlern und dem Laden in einer echten Abfrage um. Erinnern Sie sich, dass wir in unserem Cartwish-Projekt einen ähnlichen Typ unseres benutzerdefinierten Hooks erstellt haben , bei dem Daten verwendet werden Aber diese Use-Abfrage hat viel mehr Funktionen als unser Used-Data-Hook Also werden wir das tun, was für unsere Anwendung am besten ist. Verstricken Sie sich nicht in Ihren eigenen Code. Als professioneller Softwareingenieur oder Webentwickler ist es Ihr wichtigstes Ziel, dafür zu sorgen, dass Ihre Anwendung besser funktioniert Und dafür werden wir alles tun, was nötig ist. 190. Benutzerdefinierte Hooks mit React Query erstellen: In unserer aktuellen Implementierung können wir jetzt unseren US-Abfrage-Hook von unserer Komponente trennen. Sie können diesen Ansatz verwenden oder bei der aktuellen Implementierung bleiben. Die Wahl liegt bei Ihnen. Es hängt völlig von dir ab. In unserem Quellordner erstellen wir also einen neuen Ordner namens Hooks, und in diesem Ordner erstellen wir eine neue Datei namens Uellers dot JS Jetzt erstellen wir hier zunächst eine Funktion namens US-Verkäuferfehlerfunktion und am Ende exportieren wir die Standardfunktion für US-Verkäufer Jetzt schneiden wir aus der Komponente unseres Verkäufers zuerst die Funktion unseres Fat Sellers und fügen sie in unseren benutzerdefinierten Hook ein. Jetzt wieder zurück zur Komponente des Verkäufers. Von hier aus schneiden wir uns Abfrage mit diesem Konfigurationsobjekt. Und in unserer Verkäuferdatei in den USA kehren wir einfach mit Query hierher zurück. Lassen Sie uns nun den API-Client importieren, diesen Tippfehler entfernen und auch die US-Abfrage aus der TNSTekrQuery-Bibliothek importieren Speichern Sie die Änderungen. Und in der Verkäuferkomponente nennen wir uns hier einfach Sellers Custom Hook. wir also in jeder anderen Komponente Wenn wir also in jeder anderen Komponente Verkäuferdaten abrufen müssen, wir dies nur Use Sellers Hook nennen Lassen Sie uns alle unerwünschten Importe entfernen, die Änderungen speichern und einen Blick darauf werfen Siehst du, jetzt sieht unser Code ein bisschen sauberer aus. 191. React Query-DevTools hinzufügen: Eine der einfachsten Möglichkeiten, um zu lernen, wie Raquery funktioniert, ist die Verwendung von Raquery Lassen Sie uns Raquery Dev-Tools zu unserer Anwendung hinzufügen. Öffnen Sie also das Terminal und schreiben Sie NPM Ich sage direkt nach aquari DevTools, bei 5.13 0.3 und drücke Enter Gut, minimiere dieses Terminal und in unserer GSX-Hauptdatei importieren wir oben eine Komponente namens re aquery eine Jetzt müssen wir diese Komponente nach unserer App-Komponente Raquery DevTools hinzufügen und sicherstellen, dass wir sie innerhalb dieser Abfrage-Client-Provider-Komponente hinzufügen Sonst wird es nicht funktionieren, und das war's. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, in der unteren rechten Ecke haben wir ein wunderschönes Logo. Du bekommst ein anderes Logo, dann mach dir keine Sorgen. Diese Bibliothek ändert ihr Button-Logo viele Male zum Spaß. Klicken Sie einfach darauf und wir erhalten das React Query Dav-Tool. Hier erhalten wir diese Art von Struktur. Mach dir keine Sorgen. Es ist ziemlich einfach und nützlich. Hier können wir sehen, dass wir die Liste der Abfragen erhalten, bei der es sich um die API unseres Verkäufers handelt. Klicken Sie darauf. Jetzt können wir auf der rechten Seite sehen, dass wir hier unseren Abfrageschlüssel erhalten. Danach erhalten wir Beobachter, das ist die Anzahl der Komponenten , die die Anfrage dieses Verkäufers verwenden Derzeit verwendet nur eine Komponente diese Verkäuferabfrage. Nehmen wir an, wir verwenden dieselbe Abfrage in drei Komponenten, dann wird für die Anzahl der Beobachter drei angezeigt. Als Nächstes haben wir die Uhrzeit der letzten Aktualisierung angegeben Das ist das letzte Mal, dass die Abfrage abgerufen wurde Danach haben wir ein paar nützliche Aktionen wie Refetch, Invalidate, Reset, Remove Trigger Load Trigger So können wir das Laden auslösen und sehen. Hier bekommen wir unseren Ladeindikator. Lassen Sie uns jetzt das Laden wiederherstellen und wir lösen einen Fehler aus. Siehst du, wir bekommen unseren Beispielfehler. Jetzt, nach unseren Aktionen, haben wir den Datenexplorer, die Abfrage zurückgibt, und das sind die Daten unseres Verkäufers, und wir können auch seine Eigenschaften sehen. Jetzt haben wir endlich den Query Explorer. Hier können wir alle Eigenschaften und Details zu unserer Abfrage sehen . den meisten Fällen verwenden wir diesen Abschnitt nicht, aber einige Eigenschaften sind nützlich. Wie hier können wir unsere GC-Zeit sehen, was Garbage-Collection-Zeit bedeutet. Oder wir können sagen, dass die Fallzeit auf 300 K eingestellt ist, was einem Minisekundenwert und 5 Minuten entspricht Wenn also unsere Komponente von unserem Bildschirm entfernt wird, was bedeutet, dass wir keine Beobachter haben , und wenn die Abfrage keine Beobachter hat, werden diese Daten nach 5 Minuten Ja, wir können diese Eigenschaften ändern, und das werden wir in der nächsten Lektion sehen Außerdem, kleiner Tipp, von hier aus können wir das Thema unserer Entwicklungstools ändern. Ich mag ein dunkles Thema, also wähle ich ein dunkles. 192. React-Abfrageeigenschaften anpassen: Derzeit haben wir in Rea-Abfragen nur wenige Standardeinstellungen, die in den meisten Situationen gut funktionieren Wir können sie jedoch auch für alle Abfragen oder für eine einzelne Abfrage anpassen . Zum Beispiel können wir unseren GC-Zeitwert ändern. Lassen Sie mich Ihnen zeigen, wie wir das machen können. In unserer JSX-Hauptdatei, hier in diesem Abfrageclient, können wir also hier in diesem Abfrageclient, das Konfigurationsobjekt übergeben In diesem Objekt haben wir eine Eigenschaft, die als Standardoptionen bezeichnet wird, und wir können sie auch auf Objekt setzen, und in diesem Objekt haben wir die Eigenschaft queries, die auch Objekt ist In diesem Objekt können wir jetzt Standardwerte für unsere Abfrageeigenschaften übergeben. Also hier übergeben wir CT und wir können es auf 10 Minuten einstellen. Hier müssen wir den Wert in Millisekunden übergeben. Also von zehn zu 60 Sekunden zu 100 Millisekunden. Oder wir können direkt 600 K übergeben oder wir können hier sechs, doppelte Null, Unterstrich Null schreiben hier sechs, doppelte Null, Unterstrich Null In JavaScript können wir an der Stelle von Kommas in Ziffern einen Unterstrich hinzufügen Stelle von Kommas in Ziffern einen Unterstrich Speichern Sie die Änderungen und schauen Sie sich das an. In unseren Entwicklungstools unten können wir sehen, dass die C-Zeit auf 600.000 Millisekunden geändert wurde, was 10 Minuten entspricht Jetzt können wir auch ändern, wie oft unsere Abfrage wiederholt wird. Wenn also unsere Benutzerverbindung verloren geht oder wir einen Tippfehler in unserer Abfrage haben, wird die Abfrage mehrmals wiederholt Standardmäßig ist die Anzahl der Wiederholungen auf drei gesetzt, aber das können wir von hier aus ändern. Sagen wir fünf Speichern Sie diese Datei und in unserem Use Seller's Hook korrigieren wir Tippfehler in unserem Endpunkt, speichern die Änderungen und schauen sie uns an, öffnen NetworkTab und aktualisieren die Seite Hier ist unsere Anfrage zum ersten Mal ausgefüllt. Ich glaube, ich muss dieses Panel wechseln, um zu schreiben. Aktualisieren Sie jetzt die Seite und sehen Sie hier, dass die Anfrage fehlgeschlagen ist. Danach wird es einige Zeit dauern und es wird noch fünf Mal wiederholt Insgesamt werden also sechs Anfragen an diese Abfrage gesendet. Jetzt zurück zum VS-Code, und hier entfernen wir unseren Tippfehler Speichern Sie diese Datei, und in der Hauptdatei haben wir hier auch die veraltete Zeit, die angibt, wie lange unsere Daten als aktuell betrachtet werden Derzeit ist unsere veraltete Zeit auf Null gesetzt, was bedeutet, dass in dem Moment, in dem wir Daten vom Backend erhalten, sie als alt behandelt werden Wenn wir also das nächste Mal dieselben Daten benötigen, ruft Reacquery neue Aktualisierungsdaten vom Backend ab Lassen Sie uns das zur Demo auf 6 Sekunden einstellen. Speichern Sie die Änderungen, und hier erhalten wir neue Daten, die wir an der grünen Farbe erkennen können. Und nach 6 Sekunden wird es immer noch mittelalt. Nun, wie ich Ihnen schon sagte, reacquery gibt Ihre veralteten Daten automatisch wieder ab Lassen Sie mich Ihnen sagen, in welchen Situationen es aktualisiert wird Also zuerst, wenn unsere Benutzerverbindung wieder hergestellt wird, dann wird die Komponente eingebunden und zuletzt, wenn unser Anwendungsfenster neu fokussiert wird zuletzt, wenn unser Anwendungsfenster Also lass mich dir das praktisch zeigen. also hier in unserem Browser Wenn Sie also hier in unserem Browser einen neuen Tab öffnen und erneut zu unserem Anwendungs-Tab zurückkehren, zu unserem Anwendungs-Tab zurückkehren, werden unsere Daten aktualisiert Öffnen Sie also einen neuen Tab und kehren Sie zu unserer Anwendung zurück. Siehst du, hier bekommen wir eine Phraseninformation, und dann wird es still. In den meisten Anwendungen diese automatische Reflash-Funktion sehr wichtig Aber manchmal, wenn Ihre Anwendung diese Funktion nicht benötigt, können Sie sie auch deaktivieren In unserem Abfrageobjekt haben wir also die Eigenschaft refedg on reconnect Wir können es auf falsch setzen. Außerdem haben wir refedg auf mount und auf false und refetg auf den Fensterfokus gesetzt, wir können es auch auf wir können es auch Standardmäßig sind diese drei Eigenschaftswerte wahr, aber bei Bedarf können wir sie auf Falsch Lassen Sie mich Ihnen nun ein Szenario erklären. Wenn unsere Daten still werden, versucht Requery, neue Daten erneut vom Server Gleichzeitig werden jedoch Standbilddaten aus dem Cache an unsere Komponente zurückgegeben Standbilddaten aus dem Cache an Mit dieser Implementierung können wir unsere Daten sofort abrufen, aber gleichzeitig fordern wir auch die neuesten Daten unter der Haube an. Sobald wir die neuesten Daten haben, aktualisiert Raquery unseren Cache und aktualisiert auch die Daten auf unserer Komponente, was ziemlich cool ist, oder? Hier können wir also die Standardeigenschaften aller Abfragen ändern die Standardeigenschaften aller Abfragen In den meisten Fällen werden wir das nicht ändern , da diese Eigenschaften bereits gut sind. Aber manchmal müssen wir in unserer Anwendung diese Eigenschaften nur für eine Abfrage ändern. Wie können wir das also tun? Lass mich dir den offenen Verkäuferhaken zeigen. Und hier, im Use-Abfrage-Hook, können wir dieselben Eigenschaften wie Retrte an Five übergeben, und wir können auch andere Eigenschaften übergeben So können wir also die Standardeigenschaften von Abfragen ändern die Standardeigenschaften von 193. Übung für das Abrufen von Daten: Jetzt ist es Zeit für ein wenig Bewegung. Deshalb möchte ich, dass Sie auf unserer Admin-Verkaufsseite mithilfe von re aquari Daten über Todos aus unserer JCNPlaceholder-API abrufen unserer JCNPlaceholder-API Unsere API sollte also GDPs, Doppelpunkt, doppelter Schrägstrich, jsnplaceholder.typicod.com Schrägstrich Tu Doo lauten . . Diese API wird 200 gefälschte Todos-Daten zurückgeben. Erstellen Sie also einen benutzerdefinierten Hook zum Abrufen von Todos. Wir müssen diese Sudo-Titel in einem einfachen Absatz anzeigen diese Sudo-Titel in einem einfachen Absatz und auch Fehler - und Ladeindikatoren anzeigen Ich weiß, dass du das kannst, und danach war die Lösung Also hier ist eine Lösung für diese Übung. Zunächst erstellen wir in unserem Hooks-Ordner eine neue Datei namens ustdos dot js Hier erstellen wir eine neue Funktion namens ust Dos error function, und am Ende exportieren wir einfach diese Standard-Todos Nun, hier vor dieser Funktion, erstellen wir eine neue Funktion namens Fast Dos, Error Function Hier geben wir direkt den API-Client Dot Cat und Endpoint zurück, was Slash Todos ist Dieser Ausdruck gibt Promise zurück, also verwenden wir dann Methode, Antwort und geben einfach Antwortpunktdaten zurück Hier geben wir Antwortpunktdaten zurück, weil unsere JSON-Platzhalter-API Todos in der Dateneigenschaft zurückgibt Für Ihre API müssen Sie Ihre API-Antwort überprüfen und sicherstellen, dass Sie diese Daten zurückgeben Nennen wir nun unseren Use Query Hook aus der Raquery Library. Hier übergeben wir das Konfigurationsobjekt, und wir müssen hier zwei Eigenschaften übergeben Kannst du mir sagen, womit sie Recht haben? Abfrageschlüssel und Abfragefunktion. Also frage an ein Array ab und übergebe hier Todos. Danach die Abfragefunktion, um Todos zu übergeben, und wir geben diese Use-Abfrage einfach aus diesem Hook zurück Der Benutzer ändert sich und auf der Verkaufsseite hier in unserer Komponente nennen wir STDs Hook , den wir gerade Und wie wir wissen, hat dieser Hook ein Objekt mit Eigenschaften geschrieben. Also können wir es hier umstrukturieren und erhalten Daten, die wir in Tutu Dos umbenennen können Außerdem erhalten wir Fehler und erleichtern das Laden von Immobilien. Haben Sie bemerkt, wie einfach es wird, einen PI anzurufen? Ich liebe diese React-Query-Bibliothek wirklich. Was denkst du? Jetzt in unserer JSX ändern wir hier diese Überschrift in eine DO-Seite. Und um mehrere Elemente hinzuzufügen, verwenden wir React-Fragmente Verschieben Sie diese ans Ende, um unseren Code zu formatieren. Und nach unserer Überschrift fügen wir Calibracets, Todos, Fragezeichen, Fragezeichen Hier erhalten wir ein einzelnes To-do-Objekt, das ID, Titel, Erledigt und Benutzer-ID hat Erledigt und Wir haben hier einfach ein Absatz-Tag geschrieben und ihm einen Schlüssel zur Tudot-ID In diesem Absatz zeigen wir den Todo-Titel an. Lassen Sie uns auch die Fehler - und Ladeanzeige anzeigen. Fügen Sie vor dieser Kartenfunktion Cali-Klammern hinzu. Das Laden ist wahr, dann geben wir die Loader-Komponente zurück und die automatische Eingabe funktioniert endlich, wir fügen Cali-Klammern hinzu Wenn ein Fehler vorliegt, geben wir das Emphasis-Tag zurück und zeigen die Fehlermeldung mit Punkt an Die Änderungen und schauen Sie sich das an. Gehen Sie zur Verkaufsseite und sehen Sie, hier bekommen wir unsere Todos. Lassen Sie uns das in Query DevTools überprüfen und hier sehen, dass wir pro Verkäuferanfrage Null bekommen Diese Null ist die Anzahl der Beobachter, und auf unserer Seite haben wir keine Komponente, die die Verkäufer-API aufruft Derzeit hat unsere Seite in unserer Anwendung eine Komponente, die die Abfrage aufruft. Wenn wir zur Verkäuferseite wechseln, erhalten wir einen Beobachter für die Verkäuferanfrage und keinen Beobachter für die Abfrage Das ist es also, was Beobachter meinen. Anzahl der aktuell gerenderten Komponenten, die die Abfrage 194. Abfrageparameter in React Query verstehen: In dieser Lektion werden wir sehen, wie wir Parameter in unserem Use-Abfrage-Hook übergeben können Parameter in unserem Use-Abfrage-Hook übergeben Wir werden so etwas bauen. Vor unserer Überschrift haben wir eine Drop-down-Liste fünf Werten wie Benutzer eins, zwei, drei, vier und fünf. Wenn wir Benutzer eins auswählen, erhalten wir nur die Todos, die von Benutzer eins erstellt wurden Im Grunde werden wir eine Filterung durchführen. Aber hier erhalten wir Daten aus dem Backend und übergeben unsere Filterdetails in die Abfrageparameter unserer To-do-API Mal sehen, wie wir das machen können. Vor unserer Ladeanzeige hatten wir also sechsmal die Option ausgewählt und darin hatten wir die Option Bei unserer ersten Option fügen wir dem Wert nun nichts hinzu und hier übergeben wir select user Danach übergeben wir den Wert an eins und hier übergeben wir Benutzer eins. Ähnlich den Wert an zwei und Benutzer zwei, drei, Benutzer drei, vier, Benutzer vier und die letzten fünf Benutzer fünf. Hier benötigen wir diese Namens - und ID-Attribute nicht , sodass wir sie entfernen können. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, hier bekommen wir unsere Drop-down-Box. Wenn wir hier den ersten Benutzer auswählen, sollten wir nur zwei Dosen des Beitrags dieses Benutzers erhalten Wir müssen uns um dieses Dropdown kümmern. Oben erstellen wir eine neue Statusvariable namens Benutzer-ID, legen die Benutzer-ID fest und setzen sie als Standardwert auf Null In unserem Select-Tag fügen wir das Änderungsereignis hinzu, und hier erhalten wir die Fehlerfunktion für das Ereignisobjekt, und wir setzen die Benutzer-ID auf den Zielpunktwert des Ereignisses. Außerdem erhalten wir hier den Wert in einer Zeichenfolge, sodass wir ihn in eine Ganzzahl umwandeln müssen. Und wie können wir das machen? Richtig, indem wir unseren Wert in parse int einschließen, und hier übergeben wir auch den Wert an unsere Benutzer-ID Gut. In dieser Komponente verwenden wir jetzt unseren benutzerdefinierten Hook, für den wir früher verwendet haben. In diesem Hook können wir unsere Benutzer-ID-Statusvariable als Argument übergeben. Speichern Sie diese Datei und lassen Sie uns sehen was wir in unserem verwendeten Todos-Hook tun Zuerst erhalten wir hier die Benutzer-ID als Parameter, und hier in unserer API-Anfrage müssen wir diese Benutzer-ID mit unserer GAT-Anfrage übergeben Hier müssen wir diese Funktion in unsere Use-Todos-Funktion verschieben diese Funktion in unsere Use-Todos-Funktion So können wir in unserer Fair Studios-Funktion auf die Benutzer-ID zugreifen. Jetzt müssen wir hier so etwas wie diesen Schrägstrich Studios übergeben , und im Abfrageparameter übergeben wir die Benutzer-ID, die unserer Benutzer-ID entspricht Oder wir können das Objekt im zweiten Argument und addHeParams übergeben , was ein Objekt ist. Und hier übergeben wir einfach die Benutzer-ID an die Benutzer-ID, oder wir können müssen nicht zuletzt Wir müssen nicht zuletzt unseren Abfrageschlüssel ändern. Derzeit übergeben wir nur einzelne Zeichenfolge in unserem Abfrageschlüssel, aber jetzt haben wir es mit mehreren Daten in unserer Abfrage zu tun. Das müssen wir auch in unserem Abfrageschlüssel hinzufügen. Also hier übergeben wir unsere Benutzer-ID. Auch hier verwenden viele Entwickler gerne Hierarchiestruktur , die die Beziehung zwischen unserem Datenobjekt darstellt . Lass mich dir zeigen, was ich meine. Hier beginnen wir mit dem Objekt der obersten Ebene, nämlich Benutzern. Dieser Benutzer hat eine ID, die eine Benutzer-ID ist. Und mit dieser Benutzer-ID können wir Todos abrufen Dies ist dieselbe Struktur, die Bend-Entwickler verwenden, um die URL unserer API zu definieren Unsere API-URL kann also so aussehen. Benutzer eins, das ist Benutzer-ID, Schrägstrich Todos. Ich denke, dieses Muster ist spezifischer. Nun, hier ist die eine Sache. Hier übergeben wir die Benutzer-ID in diesem Abfrageschlüssel . Wenn sich die Benutzer-ID ändert, aktualisiert Rea Query die Daten aus unserer API. Wenn wir hier keine Benutzer-ID-Variable hinzufügen, wird unsere Abfrage nur einmal ausgeführt, auch wenn wir diese Benutzer-ID in unseren Parametern hinzufügen Dieses Abfrage-Array ähnelt also unserem Abhängigkeits-Array im Nutzungseffekt Speichern Sie die Änderungen und schauen Sie sich das an. Lassen Sie mich ein wenig herauszoomen. Nun sehen wir, dass wir derzeit keinen Benutzer ausgewählt haben, also bekommen wir hier Benutzer Null Todos und wir bekommen alle Todos Wenn wir nun den Benutzer zu einem ändern, erhalten wir nur Daten von unserem Benutzer In unseren Entwicklungstools erhalten wir Benutzer B Todos In ähnlicher Weise können wir andere Benutzer auswählen und für jeden Benutzer reacquery neue Daten abrufen Jetzt haben wir alle Daten in unserem Cache. Wenn wir zu den vorherigen Benutzern gehen, erhalten wir unsere Daten sofort, ohne dass sie geladen werden. Das ist das Schöne an einer echten Abfrage. Das einzige, was ich korrigieren möchte, ist, dass wir bei einem Nullwert unseren Abfrageschlüssel ändern werden. Zurück zum VS-Code, und hier übergeben wir die Bedingung, wenn die Benutzer-ID verfügbar ist, dann geben wir dieses Schlüssel-Array zurück, andernfalls geben wir ein Array zurück nur eine Zeichenfolge enthält, da für einen Null-Benutzer alles ohne Filter nach DOS abgerufen Speichern Sie die Änderungen und schauen Sie sich das an. Aktualisieren Sie die Seite und sehen Sie hier, dass wir nur zwei Dos erhalten. Wenn wir Benutzer eins auswählen, erhalten wir unseren Abfrageschlüssel mit der Benutzer-ID und Todos Jetzt haben wir hier ein kleines Problem. Wenn wir also wieder zur Benutzer-ID Null zurückkehren, dann bekommen wir hier unsere Daten nicht. Warum? Lassen Sie uns das in NetworkTab überprüfen Drücken Sie die Seite erneut. Zuallererst bekommen wir hier alle Todos Dann wählen wir Benutzer eins und hier erhalten wir eine Todos-Anfrage mit der Benutzer-ID Lassen Sie uns nun erneut auswählen, Benutzer auswählen und hier sehen wir, dass wir die Benutzer-ID nicht auf eine Zahl bekommen . Und das ist das Problem. Um dieses Problem zu lösen, müssen wir also eine Bedingung für diesen Benutzer-ID-Parameter übergeben. Um das zu vereinfachen, erstelle ich hier eine neue Variable namens params, die wir als Params-Objekt übergeben Danach fügen wir eine Bedingung hinzu. Wenn userId verfügbar ist, setzen wir params dot userId auf unsere Benutzer-ID Wenn die Benutzer-ID Null oder undefiniert ist, fügen wir keinen Wir können hier einfach Parameter an Parameter übergeben, oder wir können diese einen Parameter entfernen Speichern Sie die Änderungen und schauen Sie sich das an, klicken Sie auf die Seite, wählen Sie Benutzer eins aus, hier erhalten wir die Daten von Benutzer B, dann wählen Sie Benutzer aus und sehen Sie, hier bekommen wir alles So übergeben wir Abfrageparameter in einer echten Abfrage. 195. Paginierung in React Query: In unserer To-Do-Liste rufen wir jetzt 200 Aufgaben in einer einzigen Anfrage ab, aber das wird die Last erhöhen Bisher hatten wir in unserer Cartwig-Applikation dieselbe Situation Erinnern Sie sich, was wir getan haben, um diese Belastung zu reduzieren? Richtig, wir verwenden die Paginierung oder die Funktion zum unendlichen Scrollen. Zuerst werden wir uns in dieser Lektion die Paginierungsabfrage ansehen und dann werden wir auch sehen, wie man die Abfrage mit unendlichem Scrollen anwendet . Mach dir darüber keine Sorgen Lassen Sie uns zunächst diese Filterung entfernen , weil ich das nicht kompliziert machen möchte. Also entfernen wir diese Benutzer-ID-Statusvariable von hier. Entfernen Sie außerdem das Select-Tag mit diesen Optionen. Gut. Für die Seitennummerierung benötigen wir nun den Seitenstatus , den wir über unsere Seitenschaltflächen ändern oder handhaben können Hier erstellen wir also eine neue Statusvariable namens page set page, und als Standardwert übergeben wir hier eine. Fügen wir nun der Einfachheit halber die Schaltflächen „Zurück“ und „Weiter “ für die Seitennummerierung Nach unserer Tudos-Map fügen wir also eine Schaltfläche hinzu und übergeben hier vorherige und eine weitere Schaltfläche oder Für die vorherige Schaltfläche können wir nun das Deaktivierungsattribut hinzufügen, das deaktiviert wird, wenn die Seite gleich eins ist wir das Klickereignis und darin die Pfeilfunktion weitergeben und Seite für Seite minus eins setzen Für die nächste Schaltfläche übergeben wir hier die Option deaktivieren, wir geben Seite an Seitengröße weiter. Seitengröße ist die Anzahl der Daten, die wir auf einer einzelnen Seite anzeigen möchten. Und wir wissen, dass diese Abfrage 200 Aufgaben hat. Also geben wir hier mehr als 200 weiter. Jetzt könnten Sie sagen, hier wissen wir, dass wir 200 zu erledigen haben. Was ist, wenn wir die Gesamtzahl der Produkte in unserer Anwendung nicht kennen ? In dieser Situation müssen Sie den Backend-Entwickler also anweisen, auch eine Reihe von Produkten insgesamt mit Ihren API-Daten zu senden eine Reihe von Produkten insgesamt mit Ihren API-Daten Das sehen wir bereits in unserem Cartwh-Projekt, richtig. Jetzt übergeben wir hier das Click-Event, und darin legen wir Seite zwei plus eine Seite Gut. Hier erstellen wir eine einfache Variable namens Seitengröße , sagen wir mal zehn Jetzt fügen wir an der Stelle dieser Benutzer-ID Seite und Seitengröße hinzu Stellen Sie sich nun vor, dass wir in dieser Funktion auch Filter - oder Shot-by-Funktionen hinzufügen möchten. Dann müssen wir in dieser Funktion mehrere Werte hinzufügen. Stattdessen können wir also alle Werte in einem einzigen Objekt übergeben. Fügen Sie also ein Objekt hinzu und übergeben Sie die Seiten- und Seitengröße. Okay? In dieser Datei und uns, wie wir das früher an der Stelle dieser Benutzer-ID gemacht haben, bekommen wir unser Abfrageobjekt. Lassen Sie uns auch diese Parameter entfernen, und wenn eine Bedingung besteht, können wir hier direkt Perams übergeben Jetzt fügen wir in unseren Abfrageparametern Objekt hinzu, und darin müssen wir zwei Eigenschaften übergeben underscore limit und underscore start Diese Parameter hängen von Ihrer API ab. Hier für das Limit übergeben wir also unsere Abfrage Dot Pay Size und für den Anfang müssen wir den Startpunkt für unsere Todos übergeben Hier übergeben wir also die Punktseite der Abfrage minus eins und multiplizieren sie mit der Seitengröße unserer Abfrage Wenn unsere Seite nun auf eins gesetzt ist, dann eins minus eins, was Null ist und multiplizieren mit zehn, was ebenfalls Null ist. Unser Startpunkt ist also Null. Also bekommen wir Post 1-10. Dann wird unser Ausgangspunkt für Seite zwei eins nach zehn sein, also zehn Wir bekommen also Post 11-20, ganz einfach. Lassen Sie uns nun hier unseren Abfrageschlüssel ändern. Wir brauchen diese Bedingung nicht. Wir übergeben ein Array mit einer zu erledigenden Zeichenfolge und danach übergeben wir das Objekt direkt hier oder fragen das Objekt ab. Wenn sich also etwas an diesem Abfrageobjekt ändert, ruft Reacquery neue Daten von der API Speichern Sie die Änderungen und nehmen Sie eine. Sehen Sie, hier erhalten wir nur zehn Daten, und unsere vorherige Schaltfläche Klicken Sie jetzt auf Weiter und wir erhalten die nächsten zehn Daten. Und wenn wir zur vorherigen Seite zurückkehren, erhalten wir Daten, ohne laden, da sie im Cache gespeichert sind. Ein kleines Update, das wir jetzt machen wollen , ist, wenn wir auf Weiter, unsere vorherige und nächste Schaltfläche klicken , oben und dann nach unten gehen. Um das hier in Use Query zu korrigieren, fügen Sie hier eine Eigenschaft namens Platzhalterdaten Wir müssen eine Funktionsreferenz hinzufügen, nämlich vorherige Daten beibehalten Stellen Sie sicher, dass es aus der Abfragebibliothek von Ten Stag React stammt. Hier können wir sehen, dass es aus unserer Rea-Abfragebibliothek importiert wurde und das war's. Während wir neue Daten abrufen, sehen wir immer noch die vorherigen Daten, und wenn wir neue Daten erhalten, werden die vorherigen Daten danach verschwinden. Die Änderungen und schauen Sie sich das an. Klicken Sie auf Weiter und sehen Sie, während unsere Daten gepatcht werden, sind unsere vorherigen Aufgaben immer noch da und nach Abschluss der Anfrage erhalten wir unsere neuen Daten So können Sie sehen, wie einfach und unkompliziert es ist, mit Rea Query eine Paginierung hinzuzufügen 196. Unendliches Scrollen in React Query: Lassen Sie uns nun sehen, wie wir mit einer Rea-Abfrage eine unendliche Abfrage abrufen können Rea-Abfrage eine unendliche Abfrage abrufen Also werden wir unten die Schaltfläche „ Mehr laden“ hinzufügen, und wenn wir darauf klicken, erhalten wir unsere neuen Daten In der realen Anwendung werden wir unsere Daten laden, wenn wir das Ende unserer Seite erreichen. Das werden wir in unserem Übungsteil sehen. Lassen Sie uns das vorerst umsetzen. Zuallererst müssen wir für unendliches Scrollen unseren Use-Query-Hook durch den Use-Infinite-Query-Hook ersetzen den Use-Infinite-Query-Hook Speichern Sie das. Jetzt ist hier eine Sache. Wenn wir Use Infinite Query Hook verwenden, müssen wir kein seitenübergreifendes Iquery-Objekt übergeben Use Infinite Query erledigt das automatisch. Hier können wir das entfernen und auch diese Seite aus dem Abfrageobjekt entfernen. Jetzt denkst du vielleicht, wie können wir unsere Seitenzahlen zählen? Mach dir keine Sorgen. Es ist wirklich sehr einfach. Um die Seitenzahlen zu zählen, haben wir in unserer Use Infinite Query eine Funktion namens Get next page perm Hier müssen wir die Callback-Funktion übergeben, und diese Funktion hat zwei Parameter Letzte Seite, das ist das letzte Seitenarray unserer Aufgaben und der zweite Parameter ist „Alle Seiten“, was das zweidimensionale Array ist, oder wir können sagen, ein zweidimensionales Array, oder wir können sagen, ein zweidimensionales D-Array Etwas sieht so aus. Wir haben ein Array und in diesem Array haben wir die Daten jeder Seite nacheinander . Mach dir darüber keine Sorgen. Wenn wir unser Array drucken, werden Sie das verstehen. Denken Sie nur daran, dass diese „Alle Seiten die Anordnung aller Aufgaben sind. Nun, hier in dieser Funktion müssen wir die nächste Seitenzahl zurückgeben. Wie können wir das finden? Wie ich dir bereits gesagt habe, enthält die Seite „Alle Seiten“ alle Daten über unsere Todos Wenn wir zwei Seiten geladen haben, sehen unsere Daten für alle Seiten so aus Also hier können wir so etwas machen. Wir geben alle Seiten zurück, Punktlänge N plus eins, was unsere nächste Seitenzahl ist. Was ist nun, wenn wir zu der Seite scrollen , die nicht verfügbar ist? Dann müssen wir die nächste Seitenzahl nicht weitergeben. Wenn wir also eine Seitennummer übergeben, die in der JSON-Platzhalter-API nicht vorhanden ist, wird ein leeres Array zurückgegeben Also übergeben wir hier die Bedingung I letzte Seite, was die Datenpunktlänge unserer letzten Seite größer als Null ist Wenn sie wahr ist, kehren wir zur nächsten Seite zurück, andernfalls geben wir Null zurück, so einfach ist das Jetzt müssen wir nur noch die Seitenzahl in unserer früheren DOS-Funktion übergeben . Eine Rea-Abfrage übergibt unsere Seitennummer in unseren Abfragefunktionsparametern. Hier destrukturieren wir das Objekt und erhalten den Seitenparameter. Und übergeben Sie es an der Stelle der Punktseite der Abfrage. Außerdem geben wir als Standardwert Ihre Seite pro um an eins weiter. In einfachen Worten, was auch immer wir von dieser Perm-Funktion für die nächste Seite zurückgeben, wir erhalten diesen Wert in unserer Seite pro µm Speichern Sie die Änderungen, und in unserer Verkaufskomponente unten können wir beide Schaltflächen entfernen, können wir beide Schaltflächen entfernen, und hier fügen wir eine neue Schaltfläche hinzu, um weitere hochzuladen Lassen Sie uns ein Klick-Ereignis für diese Schaltfläche hinzufügen. Und hier müssen wir die Funktion „Nächste Seite“ übergeben, die wir von unserer Use Infinite Query erhalten. Und ganz unten, in unserem On-Click-Event, fügen wir einfach die Funktion „ Nächste Seite abrufen In unserem Catwig-Projekt können wir, wenn wir am Ende unserer Seite angelangt sind, wenn wir am Ende unserer Seite angelangt sind, einfach diese Funktion zum Abrufen der nächsten Speichern Sie die Änderungen und geben Sie einen Fehler ein, hier erhalten wir einen Fehler. Schauen wir uns das an und in der Konsole bekommen wir hier, dass Todos Dot Map keine Funktion ist Lassen Sie uns drucken, was wir in unseren Daten haben. Also konsolen Sie die Punktlog-Daten und wir entfernen diese Todos aus der Umbenennung Speichern Sie die Änderungen und scrollen Sie in unserer Konsole nach oben. Wir werden undefiniert. Ich denke, wir müssen die Kartenmethode auskommentieren. Speichern Sie die Änderungen und sehen Sie zu, dass wir die Daten erhalten. Hier handelt es sich bei diesen Daten um ein Objekt mit zwei Eigenschaften Seitenparameter und Seiten Auf diesen Seiten finden wir eine Reihe unserer zehn Aufgaben. In unserem JSX, vor unserer Todos-Dotmap, gab es also ein Daten-Fragezeichen, ein Daten-Fragezeichen, Punktseiten-Punktmap Hier erhalten wir die Pfeilfunktion für jede Seite mit den Datenpfeilen. Und hier müssen wir eine andere Kartenmethode zurückgeben , weil jede Seite ein Array von Aufgaben ist. Hier fügen wir also React-Fragmente hinzu, und darin können wir diese Map-Methode verschieben. Und ersetze diese Todos durch unsere Seite. Sag die Änderungen und sieh sie dir an. Siehst du, hier bekommen wir unsere Daten. Klicken Sie jetzt auf „Mehr laden und wir bekommen weitere Aufgaben, also funktioniert es Aber in unserer Konsole erhalten wir hier einen Fehler, der besagt, dass die Liste eine eindeutige Schlüsseleigenschaft haben sollte. Also hier in unserem React-Fragment müssen wir wichtige Requisiten übergeben Aus diesem Grund wird diese Syntax für Reaktionsfragmente nicht funktionieren. Wir müssen ein Reaktionspunktfragment hinzufügen. Und als Schlüssel dazu holen wir uns den Index und übergeben ihn hierher. Sag die Motoren und sieh dir das an. Siehst du, der Fehler ist weg. Wenn wir jetzt Daten abrufen, können wir unsere Schaltfläche deaktivieren Use Infinite Query hat dafür eine weitere Eigenschaft, nämlich das Abrufen der nächsten Seite Wenn wir die nächste Seite unten sehen, fügen wir in unserer Schaltfläche das Disable-Attribut hinzu und übergeben hier Patchen der nächsten Außerdem können wir unseren Button-Text ändern , sodass wir die Bedingung hier übergeben können Wenn Epatching next page wahr ist, geben wir Punkt, Punkt, Punkt zum Laden zurück, andernfalls zeigen wir „Mehr laden Außerdem schließen wir unsere Schaltfläche mit geschweiften Klammern und fügen hier I hinzu, da die nächste Seite wahr ist Erst dann zeigen wir die Schaltfläche „Weitere laden Diese Eigenschaft gibt zurück, ob unsere Abfrage die nächste Seite hat oder nicht. Sag die Enges und sieh es dir an, aktualisiere die Seite und klicke auf Mehr laden. Siehst du, hier bekommen wir unseren Ladetext, also funktioniert es. 197. useMutationshaken für Mutation: Bisher haben wir gesehen, wie wir Daten mit einer Rea-Abfrage abrufen können Lassen Sie uns nun sehen, wie wir mit Raquery mutieren können, was bedeutet, dass wir Daten in unserer Anwendung hinzufügen, aktualisieren oder löschen Lassen Sie uns zunächst alle Dateien schließen und die Verkäuferkomponente öffnen Und in dieser Lektion werden wir die Funktion „Verkäufer hinzufügen“ mit einer Leseabfrage ausführen. Für die Mutation haben wir einen Hook, der Mutation verwenden heißt, genauso wie wir use query haben und innerhalb dieser Funktion übergeben wir unser Konfigurationsobjekt. In unserem Use-Query-Hook haben wir eine Abfragefunktion. Aber bei der Verwendung von Mutation haben wir eine Mutationsfunktion. Und hier, was wir übergeben werden, richtig, wir übergeben unsere Funktion, die wir API nennen und Daten zurückgeben werden. Also übergeben wir die Pfeilfunktion und fügen API-Client Punktpost und 0,2 Schrägstrich, Benutzerpunkt und dann Methodenantwort hinzu, und wir geben einfach Antwortpunktdaten zurück Derzeit geben wir hier kein neues Objekt des Verkäufers weiter. Das werden wir in nur einer Sekunde sehen. Jetzt fragen Sie sich vielleicht, wie können wir diese API, die wir gerade definieren, aufrufen ? Dafür gibt diese Use-Mutationsfunktion ein Objekt zurück, das wir in einer Variablen namens Add Seller Mutation speichern. Dieses Objekt hat eine Methode namens mutate. Mit dieser Mutate-Funktion können wir die API aufrufen Wo wir diese API in der Anzeigenverkäuferfunktion aufrufen möchten. Zuallererst entfernen wir hier diese Set-Verkäufer und entfernen auch diese API-Anfrage. Wir brauchen es nicht und hier fügen wir nur Funktion zum Hinzufügen von Verkäufermutationen und Punktmutationen Dadurch wird unsere Mutationsfunktion aufgerufen. Jetzt können wir unser neues Verkäuferobjekt übergeben, das wir zuvor erstellt haben. Sehen Sie hier. Und wenn wir ein Objekt in einer stummgeschalteten Funktion übergeben, erhalten wir hier diesen Parameter in unserer Mutationsfunktion und übergeben ihn hinter unserem Endpunkt Speichern Sie die Änderungen und schauen Sie sich das an. Gehen Sie zur Verkäuferseite und öffnen Sie den Tab Netzwerk. Geben Sie einen neuen Verkäufer an und klicken Sie auf Verkäufer hinzufügen. Siehst du, hier erhalten wir die Anfrage-ID für neue Beiträge mit unserem Namen. Jetzt können wir, wie bereits zuvor, unsere neuen Verkäufer zu dieser Liste hinzufügen. Es gibt also zwei Möglichkeiten , unsere Liste zu aktualisieren. Erstens können wir unseren Cache direkt aktualisieren. Und zweitens können wir unseren alten Cache ungültig machen und dann können wir unsere Daten vom Server erneut abrufen In dieser Situation können wir diesen zweiten Weg nicht verwenden, da jcnPlaceHolder unsere Daten nicht zum tatsächlichen Server hinzufügt Es ist nur zum Probieren, aber mach dir keine Sorgen. Ich werde dir hier beide Wege zeigen. Sehen wir uns zuerst diesen zweiten Weg und danach werden wir unseren Code für die direkte Aktualisierung des Caches schreiben . Hier in unserem use-Mutation-Hook haben wir also eine weitere Methode, die bei Erfolg aufgerufen wird und ausgeführt wird, wenn unsere API-Anfrage erfolgreich abgeschlossen wurde. Außerdem haben wir eine Fehlereigenschaft, die ausgeführt wird, wenn bei dieser Mutation ein Fehler auftritt. Hier können wir eine Toast-Benachrichtigung für Fehler anzeigen. Im Moment wollen wir das bei Erfolg nicht wieder tun und wir übergeben die Callback-Funktion, und hier bekommen wir zwei Parameter Der erste Parameter gibt das Objekt unseres Verkäufers vom Backend zurück Wir können es als gespeicherten Verkäufer aufrufen und erhalten auch das Objekt des neuen Verkäufers, das wir gerade mit unserer API gesendet haben. Und in dieser Funktion sehen wir zunächst, wie wir die Anfrage unseres vorherigen Verkäufers ungültig machen können . Dafür nennen wir uns oben Query Client von rea Query. Und speichern Sie das in einer Variablen namens Query Client. Dieser Abfrageclient ist derselbe wie unsere Hauptpunkt-JSX-Datei, dieses Client-Objekt Jetzt fügen wir in unserer Funktion bei Erfolg den Punkt Abfragen für den Query Client mit dem Punkt Invalidate hinzu und darin müssen wir unseren Verkäufern den Abfrageschlüssel Object pass here übergeben unseren Verkäufern den Abfrageschlüssel Object pass here Welche Abfrage auch immer diesen Schlüssel hat, beginnt mit Verkäufern, dass alle Abfragen als ungültig markiert sind Aus diesem Grund aktualisiert eine erneute Abfrage diese Speichern Sie die Änderungen und schauen Sie sich das an, geben Sie hier den Namen unseres Verkäufers ein und fügen Sie den Verkäufer hinzu Sehen Sie, unsere Anfrage mit dem Schlüssel des Verkäufers wird beantwortet. Sie können das anhand des zuletzt aktualisierten Werts sehen. Sehen Sie sich erneut Verkäufer hinzufügen an und hier wird dieses Mal aktualisiert. Hier sehen wir keine Änderung in unserer Liste, da Jon Platzhalter unsere neuen Verkäufer nicht wirklich auf dem Server speichert Wenn sie das speichern, dann bekommen wir diesen neuen Verkäufer hier. Sehen wir uns nun einen anderen Weg an , nämlich den Cache direkt zu aktualisieren. Dafür kommentieren wir diese Methode aus und fügen einen Kommentar für Methode zwei hinzu. Und genau hier können Sie die Punktsatzabfragedaten des Clients abfragen. Beim ersten Argument müssen wir den Abfrageschlüssel übergeben, der Verkäufer lautet. Und der zweite Parameter ist die Datenfunktion. Also bekommen wir hier unsere Verkäufer, das Array der aktuellen Verkäuferliste, Fehlerfunktion, und wir geben ein Array zurück. Jetzt fügen wir zuerst unser gespeichertes Verkäuferobjekt und danach fügen wir Spread-Operator-Verkäufer hinzu, speichern die Änderungen und schauen uns das an. Geben Sie den Namen des Verkäufers ein und klicken Sie auf Anzeige. Siehst du, hier bekommen wir unseren neuen Verkäufer. So mutieren wir unsere Daten in React Query. Lassen Sie uns kurz die Mutation zusammenfassen . Wenn wir uns einen Query-Hook für Mutationen nennen, nennen wir Use Mutation Hook und innerhalb des Objekts übergeben wir die Mutationsfunktion, übergeben wir die Mutationsfunktion die mit dem API-Aufruf ihre Funktion übernimmt Danach haben wir die Success-Eigenschaft, die ausgeführt wird, nachdem unsere Mutation erfolgreich abgeschlossen wurde. Hier aktualisieren wir unsere Cache-Daten mit diesen Punktsatzabfragedaten des Abfrageclients. Und unten, um diese Mutation aufzurufen, fügen wir die Punktmutationsfunktion Ed Seller Mutation hinzu So einfach ist das. Wenn Sie etwas verwirrt sind, Sie sich mit dieser Übung keine Sorgen Sie werden dieses Konzept verstehen. Also hier ist eine kleine Übung für dich. So wenden Sie die Mutationsmethode für diese Funktion zum Löschen von Verkäufern und Aktualisieren des Verkäufers an. Das Ergebnis sollte unverändert bleiben da wir die Liste des Verkäufers löschen und aktualisieren. Versuche das zu lösen. Und wenn Sie möchten, können Sie sich diese Lektion noch einmal ansehen Wir sehen uns in der nächsten Lektion. 198. Verkäufer löschen und aktualisieren: Ich hoffe, Sie versuchen, diese Übung zu lösen. Sehen wir uns die Lösung jetzt ganz schnell an. Zuallererst werde ich diesen gebrauchten TD-Haken nach oben bewegen. Gut. Jetzt rufen wir nach unserer Ads-Fehlermutation erneut use mutation auf und übergeben ihre Funktion zur Änderung des Konfigurationsobjekts an die Pfeilfunktion. Nun, von unten, haben wir diesen API-Client aus der verzögerten Funktion abgerufen und fügen ihn hier ein. Hier brauchen wir diese Sketch-Methode nicht , also können wir sie entfernen. Und hier fügen wir dann Methoden-, Antwort- und Rückantwortdaten hinzu. Jetzt erhalten wir diese ID hier von diesem Parameter. Als Nächstes fügen wir Erfolgsmethode hinzu und übergeben hier die Callback-Funktion Hier erhalten wir unsere gelöschten Verkäuferdaten, Pfeilfunktion und schreiben die Punktsatzabfragedaten für den Query Client Beim ersten Argument übergeben wir unsere wichtigsten Verkäufer, beim zweiten Argument übergeben wir unsere Updater-Funktion Hier bekommen wir also unsere Verkäufer-Pfeilfunktion und wir geben hier den Verkäufer-Punktfilter zurück Hier wird die Pfeilfunktion „ Einzelverkäufer als ID angezeigt, die nicht der von uns ausgewählten Verkäufer-ID entspricht Also genau hier, Verkäufer-Punkt-ID gelöscht, aber hier ist ein Problem Sun-Platzhalter geben nichts zurück , wenn wir einen Benutzer löschen Lass mich dir das live zeigen. Um diese API aufzurufen, speichern wir dieses Mutationsobjekt in einer Variablen namens Delete Seller Mutation. Und in unserer Funktion zum Löschen von Verkäufern entfernen wir unseren vorherigen Code. Hier nennen wir es Funktion zum Löschen der Verkäufermutation mit Punkt zum Stummschalten Und darin geben wir unsere ID weiter, speichern die Änderungen und werfen einen Blick darauf, öffnen die Registerkarte Netzwerk und hier löschen wir den Verkäufer Siehst du, wir bekommen hier eine Löschanfrage, aber unsere Liste wird nicht aktualisiert, weil wir in der Serverantwort nichts erhalten. Nun, wie können wir das lösen? Es ist wirklich einfach. Wir können die Erfolgsmethode auch in unserer Funktion this mutate weitergeben Erfolgsmethode auch in unserer Funktion this mutate Nach unserem ersten Argument übergeben wir hier also das Konfigurationsobjekt und schneiden einfach unsere On-Success-Methode vom Use-Mutations-Hook ab Und fügen Sie es in dieses Objekt ein. Jetzt brauchen wir hier keinen gelöschten Verkäuferparameter, und an der Stelle dieser Deleteller-Punkt-ID übergeben wir einfach Sag die Änderungen und sieh sie dir an. Klicken Sie auf Löschen und unser Verkäufer wird von hier gelöscht. Lassen Sie uns nun sehen, wie wir den Verkäufer aktualisieren können. Nach unserer Delete-Mutation nennen wir wieder die US-Mutation Hook. Wenn Sie hier das Konfigurationsobjekt Mutationsfunktion hierher übergeben, erhalten wir ein aktualisiertes Verkäuferobjekt, das wir von unserer Funktion „Verkäufer aktualisieren“, der Fehlerfunktion, übergeben . Holen wir uns diesen EPA-Client mit Patch-Methode. Und füge es hier ein. Außerdem entfernen wir diese Sketch-Methode und fügen sie hinzu, da diese API unsere aktualisierten Verkäuferdaten zurückgibt. Also Antwort und Antwort mit Punktdaten. Jetzt fügen wir anstelle dieser Verkäuferpunkt-ID eine aktualisierte Verkäuferpunkt-ID hinzu. Jetzt bekommen wir hier Daten vom Server, sodass wir hier die Erfolgsmethode weitergeben können. Hier erhalten wir unser aktualisiertes Verkäuferobjekt, das wir vom Server erhalten, Pfeilfunktion, und innerhalb dieser Funktion fügen wir die Punktsatzabfragedaten des Abfrageclients hinzu. Zuerst fügen wir den Abfrageschlüssel hinzu, der auf Verkäufer eingestellt ist, und danach, aktualisierte Funktion, wir erhalten Verkäuferdaten, Pfeilfunktion. Hier müssen wir ein aktualisiertes Array zurückgeben. Dazu können wir von unten die Punktkartenmethode des Verkäufers ausschneiden und sie einfach hier einfügen. Und in unserem Zustand ändern wir die Verkäuferpunkt-ID in eine aktualisierte Verkäuferpunkt-ID. Um nun unsere Update-Mutation aufzurufen, speichern wir diese Verwendungs-Mutation in einer Variablen namens Update Seller Mutation. Und ganz unten können wir die eingestellten Verkäufer entfernen und einfach hier „ Verkäufermutation aktualisieren“ aufrufen Verkäufermutation aktualisieren und hier „Aktualisiertes Verkäuferobjekt“ übergeben Sagen Sie die Änderungen und werfen Sie einen Blick darauf, klicken Sie auf die Schaltfläche Aktualisieren und sehen Sie, dass wir hier den aktualisierten Verkäufer erhalten Jetzt verstehst du, wie wir Mutation Hook verwenden können , um unsere Daten zu mutieren Es ist wirklich einfach. Wir müssen nur üben. 199. Fehlerbehandlung in der Mutation: Lassen Sie uns nun sehen, wie wir mit Mutationsfehlern umgehen können. In unserem Objekt „Mutation hinzufügen“ haben wir eine Methode, die bei einem Fehler aufgerufen wird. Hier erhalten wir unser Fehlerobjekt, das wir von der API erhalten, und in dieser Funktion können wir auch die Logik für die Anzeige von Toast-Benachrichtigungen schreiben für die Anzeige von Toast-Benachrichtigungen Lassen Sie uns zunächst dieses Fehlerobjekt einfach in Consult protokollieren. Lassen Sie uns nun hier einen Tippfehler in unserem Endpunkt machen. Benutze NGs und sieh es dir an. Öffnen Sie die Konsole, geben Sie hier den Namen des Verkäufers ein und bearbeiten Sie ihn. Siehst du, hier bekommen wir einen Axios-Fehler. Dieser Fehler hat viele Eigenschaften wie CF, Message, Request usw. Im Moment brauchen wir nur diese Nachricht. Also zurück zum VS-Code und hier an der Stelle des Konsolen-Punktprotokolls können wir die Alert-Funktion schreiben und hier einfach eine Fehlerpunktmeldung übergeben. Bleibt abzuwarten, hier bekommen wir eine Fehlerwarnung. Wunderschön. Lassen Sie mich Ihnen nun zeigen wie wir auch Fehler auf unserer Seite anzeigen können. Es ist wirklich einfach. Wie wir wissen, geben alle Use-Mutations-Hooks ein Objekt mit einer Mutation und einer Reihe von Eigenschaften zurück mit einer Mutation und einer Reihe von Eigenschaften In diesen Fällen erhalten wir auch einen Fehler, bei dem es sich um dasselbe Objekt wie dieses Fehlerobjekt Von hier aus können wir die Fehlermethode auskommentieren . Am Ende können wir diese Bedingung duplizieren und sie so ändern, dass ein Punktfehler bei diese Bedingung duplizieren und sie so ändern, dass der Verkäufermutation hinzugefügt wird. Erst dann hier ausdrucken und Nachricht mit dem Punkt „Verkäufer-Mutationsfehler“ hinzufügen. Speichern Sie die Änderungen und nehmen Sie eine und sehen Sie, hier erhalten wir unseren Fehler. So zeigen wir Fehler bei Mutationen an. Lassen Sie uns nun diesen Tippfehler entfernen, damit wir unsere Anwendung erfolgreich testen In der nächsten Lektion werden wir nun unsere Fortschritte bei Mutationen aufzeigen 200. Fortschritt während Mutationen anzeigen: Jetzt läuft unsere Mutation oft im Hintergrund und das kann wenig Zeit in Anspruch nehmen. Zu diesem Zeitpunkt können wir also eine Art Loader oder Spinner anzeigen, um darauf hinzuweisen, dass eine Mutation im Gange Dazu gibt die Verwendung von Mutation eine Eigenschaft namens Es pending zurück Und mit dieser Eigenschaft können wir den Loader anzeigen. Dieser E-Status funktioniert genauso wie unser Ese-Ladestatus , den wir in unserem benutzerdefinierten Use-Data-Hook erstellt haben. Denken Sie daran, dass wir in unserer Schaltfläche „Verkäufer anzeigen“ an der Stelle dieses Anzeigenverkäufers die Bedingung erfüllen. Wenn die Adseller-Änderung „Ausstehend“ wahr ist, geben wir zurück und fügen Verkäufer hinzu, andernfalls wird der Standardwert Verkäufer hinzufügen Wir können also unsere Schaltfläche „Hinzufügen“ mit dem Attribut „ Deaktiviert“ deaktivieren und bei Verkäufer-Mutation einfach den Punkt E ausstehend übergeben Wenn es also wahr ist, dann wird unser Button deaktiviert, die Änderungen werden gespeichert und wir schauen uns das an. Schreiben Sie den Namen des Verkäufers und fügen Sie ihn hinzu. Sehen Sie hier, dass wir Verkäufer hinzufügen und auch unsere Schaltfläche wird deaktiviert. Sie können sehen, wie einfach und nützlich Raquery ist. Ich kann mir nicht vorstellen, dass ich Requeri in diesem Kurs nicht hinzufügen würde Aber Gott sei Dank füge ich es hinzu. Es wird dir sehr helfen. Und vielen Dank für die Anfrage. Ich habe auch viel daraus gelernt. 201. Optimistisches Update in React Query: Derzeit stellen wir in unserer Implementierung zuerst eine API-Anfrage und mutieren dann Daten auf unserer Seite, was als pessimistischer Ansatz bezeichnet wird Wir können hier aber auch einen optimistischen Ansatz anwenden, was im Grunde bedeutet, dass wir zuerst unsere Daten mutieren und dann unsere API für diese Mutation aufrufen Zuvor haben wir diesen Ansatz bereits gesehen, oder? Lassen Sie uns diesen Ansatz also in einer echten Abfrage implementieren. In unserer Mutation für Anzeigenverkäufer hier in unserem Use Mutation Hoop haben wir also unserem Use Mutation Hoop haben wir eine weitere Methode namens Mutate Hier übergeben wir die Callback-Funktion. Diese Funktion wird ausgeführt bevor diese Mutationsfunktion ausgeführt wird, und genau das wollen wir Lassen Sie uns das überprüfen. Hier beim ersten Parameter erhalten wir also unsere Daten, die wir an den Server senden , der dieser neue Verkäufer ist. Und innerhalb dieser Funktion rufen wir einfach das Punktprotokoll auf, wenn ein neuer Verkäufer mutiert Und danach lösen wir einfach eine Warnung mit einer Mutationsnachricht Speichern Sie die Änderungen und schauen Sie sich das an. Öffnen Sie die Registerkarte Netzwerk, drücken Sie auf die Seite, wir hier nennen, und klicken Sie auf Verkäufer. Sehen Sie, zuerst erhalten wir eine Benachrichtigung, und wenn wir auf Okay klicken, erhalten wir eine Post-Anfrage. Es ist also klar, dass diese stummgeschaltete Methode vor unserer Mutationsfunktion ausgeführt wird Und auch in unserer Konsole können wir hier sehen, dass wir unsere neuen Verkäuferdaten erhalten In dieser Funktion müssen wir also unseren neuen Verkäufer zu unseren Verkäuferdaten hinzufügen . Lassen Sie uns diesen Code entfernen. Und aktualisieren Sie einfach unsere Kundendaten. So können wir diese eingestellten Abfragedaten in unsere Stummschaltmethode verschieben und diesen gespeicherten Verkäufer in einen neuen Verkäufer ändern , und das war's Speichern Sie die Änderungen und sehen Sie sich hier den Namen an und klicken Sie auf Verkäufer hinzufügen Siehst du, wir erhalten sofort unsere neuen Verkäuferdaten und dann ruft die API auf. Jetzt müssen wir uns nur noch mit Erfolgs- und Fehlerfunktionen befassen. In unserer Funktion bei Erfolg werden wir unser neues Verkäuferobjekt ersetzen, das wir gerade in der stummgeschalteten Methode hinzugefügt Wir ersetzen das durch das gespeicherte Verkäuferobjekt, das wir vom Server erhalten Also schreiben wir die Punktsatz-Abfragedaten des Abfrageclients, geben Ihren Schlüssel an Verkäufer und für die Aktualisierungsfunktion bekommen wir hier Verkäufer, Pfeilfunktion. Wir übergeben Verkäufern die Fragezeichen-Punktkarte, Verkäufer-Pfeilfunktion und hier übergeben wir die einfache Bedingung. Wenn der Einzelverkäufer unserem neuen Verkäufer entspricht, geben wir den gespeicherten Verkäufer zurück, andernfalls geben wir den Verkäufer so zurück, wie er ist Nun, dieser neue Verkäufer ist dieses neue Verkäuferobjekt, das wir in unserer Anzeigenverkäuferfunktion übergeben Und wir sind hier fertig. Lassen Sie uns nun mit der Fehlerfunktion umgehen, denn wenn etwas schief gelaufen ist, müssen wir unsere Daten in den vorherigen Zustand zurückversetzen. Das haben wir in unserem Abschnitt zur Aufruf-API gesehen. Denken Sie daran, was wir zu diesem Zeitpunkt mit der damaligen Methode gemacht haben, wir tun dasselbe mit dieser Methode bei Erfolg. Und was wir mit unserer Cache-Methode gemacht haben, machen wir auch mit dieser Methode bei Fehlern. Unsere Syntax wurde geändert, aber unsere Logik ist dieselbe wie zuvor. Deshalb erkläre ich zuerst die neue Logik, und dann implementieren wir diese Logik mithilfe der React-Abfragebibliothek. Lassen Sie uns also die Fehlermethode behandeln und hier die Callback-Funktion übergeben In diesem Callback erhalten wir zuerst ein Fehlerobjekt, dann erhalten wir beim zweiten Parameter einen neuen Verkäufer und zuletzt erhalten wir Kontexte Jetzt könnten Sie nach Text fragen. In diesem Zusammenhang erhalten wir also alles, was wir von dieser Funktion zurückbekommen, wenn die Funktion stummgeschaltet Die Logik ist also, dass wir mit der Stummschaltfunktion unsere vorherige Verkäuferliste zurückgeben , und dann können wir diese Liste in unserem Kontext abrufen Schau dir das an und dein Ausgang wird gelöscht. Hier schreiben wir also vor unseren festgelegten Abfragedaten den Punkt Query-Client mit dem Punkt Abfragedaten abrufen. Und darin geben wir unseren Schlüssel weiter, nämlich Verkäufer. Lassen Sie uns diese Daten nun in einer Variablen speichern , die als vorherige Verkäufer bezeichnet wird. Und am Ende werden wir die vorherigen Verkäufer als Objekt zurückgeben. Hier können wir auch vereinfachen. Und ganz unten, in unserer On-Error-Funktion, erhalten wir in diesem Zusammenhang dieses Objekt mit dem Eigentum früherer Verkäufer. Also überprüfen wir zuerst, ob Context falsch ist, und kehren dann von dieser Funktion zurück. Und wenn Context verfügbar ist, können wir Query Client Dot Set Query Data Pass hier Key Seller ausführen und hier einfach Kontexte Punkt Punkt früherer Verkäufer übergeben . Lassen Sie uns nun überprüfen, ob das funktioniert oder nicht. Bei Fehlern machen wir hier einen Tippfehler in unserem Endpunkt, die Änderungen und schauen uns das an Schreiben Sie den Namen und klicken Sie auf Verkäufer hinzufügen. Zuerst wird der Name hinzugefügt, dann erhalten wir eine Fehlermeldung und unsere Liste wird auf den vorherigen Status gesetzt. Es funktioniert also ziemlich gut. Lassen Sie uns diesen Ansatz nun noch einmal zusammenfassen , damit Sie ihn besser verstehen können Zuallererst fügen wir die Funktion „ Stummschalten“ hinzu, die vor unserer Mutationsfunktion ausgeführt wird, und setzen unsere neuen Daten direkt in unsere Liste Danach müssen wir uns mit Erfolgs- und Fehlermethoden befassen Wenn unser API-Aufruf erfolgreich beendet wurde, ersetzen wir unser neues Datenobjekt durch die Speicherdaten, die wir vom Server erhalten. Und wenn wir bei unserem API-Aufruf einen Fehler erhalten, müssen wir unsere Liste auf den vorherigen Status zurücksetzen. die vorherige Liste zu erhalten, rufen wir unsere vorherigen Daten in dieser stummgeschalteten Funktion bevor wir mutieren, und geben sie einfach im Objekt zurück Wir können auch direkt vorherige Daten ohne Objekt zurückgeben, und dann müssen wir, falls wir irrtümlich sind, Kontexte schreiben, was zu Verwirrung führen wird Es ist also besser, ein Objekt aus dem Stummschalten zurückzugeben , und das war's Wir setzen erfolgreich einen optimistischen Ansatz um. 202. Benutzerdefinierter Hook für AddSellers-Mutation: Derzeit speichern wir in unserer Implementierung unsere gesamte Mutationslogik in dieser einzigen Komponente, die in Zukunft schwer zu verwalten sein kann So können wir diese Logik in einem separaten Hook speichern, genau wie wir Use-Seller erstellt haben. Wenn Sie mit dieser Implementierung einverstanden sind, müssen Sie dies nicht tun. Aber in meinem Vorschlag ist es besser, sauberen Code zu schreiben. In unserem Hooks-Ordner erstellen wir zunächst einen neuen Ordner namens Sellers Darin fügen wir alle unsere Hooks hinzu, die sich auf Verkäufer beziehen. Also verschieben wir diese Use Seller in den Ordner Sellers. Gut. Lassen Sie uns nun eine neue Datei mit dem Namen used seller dot js erstellen. Lassen Sie uns zunächst eine neue Funktion namens use add seller error function erstellen . Und unten exportieren Sie einfach die Standardeinstellung und verwenden Sie dann „Verkäufer hinzufügen“. nun zur Komponente unseres Verkäufers zurück, kopieren Sie diesen Abfrage-Client und kopieren Sie auch diese Mutation zum Hinzufügen von Verkäufern von hier und fügen Sie sie in unseren Use Add Seller Hook ein. Und hier an der Stelle, an der diese Mutation in einer Variablen gespeichert wird, können wir sie einfach von hier aus zurückgeben. Lassen Sie uns nun Zeile für Zeile einige Hooks und Methoden importieren , die wir in diesem Code benötigen. Also müssen wir zuerst den Query-Client verwenden, also importieren wir ihn aus einer Rea-Abfrage. Außerdem brauchen wir diesen Use-Mutations-Hook. Danach brauchen wir den IEI-Client, unser Axios ist , und ich habe auch vergessen, diesen Tippfehler von hier zu entfernen Und das ist es. Unser SedSeller Hok Speichern Sie diese Datei und in der Komponente des Verkäufers können wir an der Stelle, an der dieser Mutations-Hook verwendet wurde, Use Ed Seller aufrufen Sie können jetzt sehen, dass unser Code sauber aussieht. Aber wir haben diese Mutation zum Löschen und Aktualisieren in dieser Komponente. Wir können sie auch trennen, aber das gebe ich dir als Übung. Erstellen Sie separate Hooks für die Verwendung „Verkäufer löschen“ und „Verkäufer aktualisieren“. Ich zeige Ihnen diese Lösung nicht, weil sie zu einfach ist. So sieht unsere Komponente nachdem wir die Mutation von unserer Komponente getrennt haben. Sehen Sie, das sieht sauberer und pflegeleichter aus. 203. Abschnitt 18 Website-Performance mit React Query verbessern: Willkommen im 18. Abschnitt des ultimativen React-Kurses. In diesem Abschnitt werden wir nun Reac Query in unserem letzten Cartridge-Projekt implementieren in unserem letzten Cartridge-Projekt Wie ich Ihnen bereits gesagt habe, gebe ich Ihnen zuerst die Übung Beginn jeder Lektion, und Sie müssen diese Übung zu hundert Prozent lösen zu hundert Prozent Du steckst irgendwo fest oder du machst die Übung fertig, erst dann siehst du die Lösung. Aber zuerst musst du dein Bestes geben, um es zu lösen. Mach dir keine Sorgen. Ich werde dir nichts Neues geben. Sie haben diese Konzepte für React-Abfragen bereits im vorherigen Abschnitt gelernt . In diesem Abschnitt werde ich Ihnen auch zeigen, wie Sie ohne größere Schwierigkeiten eine Rea-Abfrage in ein vorhandenes React-Projekt einfügen können . Das Projekt zu aktualisieren ist eine Sache, die Sie in Ihrer beruflichen oder freiberuflichen Karriere tun müssen. Freust du dich also darauf, dein Projekt zu verbessern ? Lass uns anfangen. 204. Brauchst du React Query wirklich?: Bevor wir mit der Aktualisierung unseres React-Projekts beginnen , müssen Sie sich zunächst fragen, wir diese Reacquery benötigen oder nicht Denn wenn Ihre Anwendung nicht über viele Funktionen zum Abrufen von Daten aus der API verfügt, Hinzufügen von Requery sinnlos Dadurch wird nur die Belastung Ihrer Anwendung erhöht. Einer meiner Freunde hatte Requery in einem kleinen Projekt, das nur zwei kleine API-Aufrufe hat, Daten mit fünf Absätzen Denkst du an ihn? Trifft er gute Entscheidungen? Offensichtlich nicht, oder? Also hier sind unsere drei Projekte. Für welche Projekte ist Ihrer Meinung nach diese Rückübernahme nicht erforderlich? Richtig. Unser erstes Projekt, TAs Track, braucht diese Rückübernahme nicht. Jetzt hat unser zweites Projekt , der Film Maniac, drei API-Aufrufe Sollen wir Requery hinzufügen? Ja, wir können diesem Projekt eine Anfrage hinzufügen da der Schwerpunkt dieser Website auf API-Daten liegt Wenn Benutzer nicht schnell Filmdaten erhalten, schließen sie die Website sofort Und da unser Hauptaugenmerk auf API-Daten liegt, benötigen wir Anfragen, auch wenn wir drei API-Aufrufe haben So können wir Requery zu unserem Movie Maniac-Projekt hinzufügen. Und ich muss Sie nicht nach Project Three fragen, da es auch viele Funktionen zum Abrufen bietet So müssen Sie also über Ihr React-Projekt nachdenken. Außerdem werden wir in diesem Abschnitt nur unser Projekt drei aktualisieren, nicht Projekt zwei. Zunächst ersetzen wir in unserem Cartwih-Projekt die gesamte Abruflogik durch eine Use-Abfrage, und dann werden wir auch eine Rea-Abfrage für Mutationen implementieren Zuallererst muss ich eines klarstellen: Das Anwenden der gesamten Bibliothek auf bestehendes Projekt ist etwas verwirrend da wir uns zuerst über unseren vorherigen Code im Klaren sein müssen über unseren vorherigen Code im Klaren und dann müssen wir eine neue Bibliothek hinzufügen Und aus diesem Grund unterrichte ich mit unserem einfachen Routing-Projekt zuerst die Rea-Query-Bibliothek. Wenn Sie Reaquery im vorherigen Abschnitt richtig verstanden haben, sind Sie jetzt auf der richtigen Ebene , um es in unserem Cartwis-Projekt ohne Stress zu implementieren es in unserem Cartwis-Projekt ohne Mach dir keine Sorgen. Ich werde versuchen, alle Prozesse zu vereinfachen , was Ihnen sehr helfen wird. Fangen wir also an, Raquery in unserem Projekt zu implementieren. 205. React-Abfrage einrichten: Bevor wir mit der Verwendung von Rea Query beginnen, müssen wir zunächst Rea Query in unserer Cartridge-Anwendung einrichten. Sie müssen Ihr Cartridge-Projekt öffnen, oder wenn Sie Ihren Code ruinieren, erhalten Sie denselben Code wie meins im Ressourcenordner, Abschnitt Code. Und in diesem Ordner Abschnitt 16, fertiger Ordner. Und du kannst mir folgen. Stellen Sie jedoch sicher, dass Sie die Basis-URL Ihres Backends in der Konfigurationsdatei ändern . Hier in diesem Abschnitt zu Beginn jeder Lektion werde ich Ihnen Schritt für Schritt zeigen, wie Sie alle Lektionen als Übung abschließen können. Schritt Nummer eins, Installation von Reaquery in unserem Projekt, und Schritt Nummer zwei, Hinzufügen Reaquary Dao-Tools Sie können all diese Schritte als Übungsaufgabe ausführen. Beginnen wir also mit Schritt Nummer eins, der Einrichtung einer erneuten Abfrage in unserem Projekt Also öffne das Terminal und schreibe NPM, I, addict, dann SAC, slash reac Query, adt 5.12 0.2, und wir installieren Query DevTools, also space, addit tenga query devTools, am Datum addit tenga 5.13 0.3. Und drücken Sie die Eingabetaste. Gut. Erinnern Sie sich jetzt, in welcher Datei wir re query konfigurieren? Wir müssen Requeri zu unserer Hauptpunkt-JSX-Datei hinzufügen. Hier oben importieren wir den Abfrageclient aus Ten Stack rea Query und wir benötigen auch einen Abfrageclient-Anbieter Außerdem importieren wir echte Query DevTools aus re Query DevTools Jetzt, nach unseren Importen, erstellen wir eine neue Instanz namens Query Client, was New Query Client entspricht Jetzt müssen wir einfach unsere App-Komponente mit dem Query Client Provider verbinden Fügen Sie hier den Query Client Provider hinzu und verschieben Sie diese schließende Komponente nach unserer App-Komponente, und wir übergeben hier einfach Client an Query Client. Und um DevTools hier nach der App-Komponente hinzuzufügen, fügen wir einfach die React Query DevTools-Komponente Speichert die Änderungen und lässt mich meine Anwendung mit NPM run meine Anwendung mit NPM Öffne den Link und sieh nach. Hier bekommen wir Query DevTools. Hier haben wir Raquery erfolgreich in unserem Projekt eingerichtet. 206. Daten mit useQuery abrufen: Derzeit rufen wir in unserer Anwendung die meisten unserer Daten mithilfe des benutzerdefinierten Hooks use data Beim Use-Data-Hook verwalten wir Datenfehler jedoch manuell und vereinfachen das Laden von Eigenschaften Und wir wissen, dass wir diese Eigenschaften nicht verwalten müssen, wenn wir use query verwenden . Schritt Nummer eins ist, dass wir Use Query Hook in unserem Use-Data-Hook verwenden und Schritt Nummer zwei, wir werden alle Komponenten aktualisieren , in denen wir Data Hook verwenden. Lassen Sie uns zunächst unseren Use-Data-Hook aktualisieren. Zuallererst werden wir diese drei Zustandsvariablen und diesen Use-Effect-Hook entfernen und diesen Use-Effect-Hook und dann diese Return-Anweisung entfernen. Wir werden bei Null anfangen. Wie im vorherigen Abschnitt geben wir hier den Use-Abfrage-Hook aus unserer Funktion zurück. Erinnern Sie sich jetzt, was wir zu dieser Use-Abfrage hinzufügen werden? Richtig, wir fügen ein Objekt mit zwei Eigenschaften hinzu. Der erste ist der Abfrageschlüssel, und wie können wir diesen Abfrageschlüssel aus dem Parameter abrufen? Hier können wir also endlich den Abfrageschlüssel abrufen. Jetzt können wir hier diesen Abfrageschlüssel übergeben oder wir können ihn entfernen. Aber zum besseren Verständnis lasse ich das so, wie es ist. Jetzt fügen wir eine Abfragefunktion hinzu, und hier müssen wir eine neue Funktion zum Aufrufen aller Patch-APIs erstellen . Vor unserer Rückkehr erstellen wir eine neue Funktion namens Fetch-Funktion, Pfeilfunktion, und wir geben hier einfach die Punkt-Get-Methode des API-Clients zurück hier einfach die Punkt-Get-Methode des API-Clients Hier, was wir hinzufügen werden, richtig, wir fügen einen Endpunkt hinzu, den wir von unseren Komponenten erhalten werden Wenn wir danach eine Konfiguration hinzufügen möchten, können wir hier auch unsere benutzerdefinierte Konfiguration hinzufügen, genau wie zuvor. Wir wissen, dass dies ein Versprechen zurückgibt, dass dies ein Versprechen zurückgibt also fügen wir dann die Methode hinzu, und hier erhalten wir eine Antwort und geben einfach Antwortpunktdaten zurück. Wir können diese Funktion, die Abfragefunktion, einfach übergeben. Stellen Sie sicher, dass Sie diese Funktion hier nicht aufrufen, wir müssen die Referenz übergeben. Jetzt können wir für unsere Abrufabfrage die Standzeit für alle unsere Abrufanfragen auf 10 Minuten festlegen , was bedeutet, dass sie nach dem Abrufen unserer Daten aus dem Backend 10 Minuten aktuell bleiben, 10 Minuten aktuell bleiben, aber wir können sie nicht global festlegen , da wir in unserer E-Commerce-Anwendung die Kartendetails sehr schnell abrufen müssen Der Benutzer kann 10 Minuten sitzen oder seine Karte überprüfen. Verstehen Sie die Situation? Für jede Abfrage können wir also mithilfe eines Parameters eine andere Standzeit einstellen. Hier fügen wir also Standzeit hinzu und übergeben hier standardmäßig 5 Minuten, was 300 K entspricht. Und an der Stelle von 600 K fügen wir den Stahlzeitparameter hinzu. Und wenn wir keine benutzerdefinierte Konfiguration haben, kann uns diese benutzerdefinierte Konfiguration einen Fehler geben. Wir können also ein leeres Objekt als Standardwert übergeben. Lassen Sie uns auch diesen Tiefenparameter entfernen und oben diese erste Eingabezeile entfernen. Wir brauchen es nicht und das war's. Speichern Sie die Änderungen und hier ist unser erster Schritt erledigt. Wenn wir nun unsere Anwendung überprüfen, ist sie abgestürzt, weil wir beim Aufrufen des Used Data Hooks in unseren Komponenten Abfrageschlüssel nicht übergeben haben Keine Sorge, wir werden es reparieren. Wir müssen also alle unsere Komponenten aktualisieren, die einen gebrauchten Datenhaken verwenden. Jetzt haben Sie vielleicht eine Frage. Wie können wir herausfinden, in welchen Komponenten wir verwendete Daten verwenden? Es wird viel Zeit in Anspruch nehmen. Mach dir keine Sorgen. Ich habe ein Bohrgerät. Hier in unserem Explorer-Panel haben wir dieses Suchsymbol. Und hier können wir nach unserer Funktion oder Variablen suchen, die wir in unserem Projekt finden möchten. Hier schreiben wir also Benutzerdaten und es werden alle verwendeten Datenwörter angezeigt. Aber hier können Sie sehen, dass Eingabezeilen und auch Funktionszeilen angezeigt werden. Um es genauer zu filtern, können wir hier öffnende Klammern hinzufügen und sehen, wie unsere Liste eingegrenzt wird. Magst du diesen Trick? Ich hoffe er gefällt dir. Benutze es oft, wenn ich an großen Projekten arbeite. Jetzt klicken wir zuerst auf unsere erste Zeile, die sich in der Produktdatei befindet, und C, diese Datei mit hervorgehobenen Nutzungsdaten zu öffnen. Hier fügen wir also Null im zweiten Parameter weil wir kein benutzerdefiniertes Gunfig haben, und danach übergeben wir unseren Abfrageschlüssel , der Produkte und Featured Und immer noch Zeit bis zu 10 Stunden , weil wir hier nicht jedes Mal neue Daten benötigen Feature-Produkte werden nach 24 Stunden aktualisiert, und das war's. Lassen Sie uns nun überprüfen, ob das funktioniert oder nicht. Sag die Änderungen und sieh sie dir an. Siehst du, hier bekommen wir unsere vorgestellten Produkte. Unsere verwendeten Daten funktionieren also einwandfrei. Lassen Sie uns nun unsere zweite Komponente aus der Suche aktualisieren, nämlich unsere Seite „Meine Bestellung“. Gleiche. Hier übergeben wir den Anfrageschlüssel Null für die benutzerdefinierte Konfiguration an meine Bestellungen und immer noch Zeit bis 1 Minute , weil es notwendig ist. Also eins zu 60 zu 1.000, und das war's. Speichern Sie diese Datei. Als Nächstes haben wir eine Produktliste, aber wir berühren sie nicht, weil wir dafür Infinite Query verwenden müssen. Wir werden das überspringen. Danach haben wir die Produkt-Seitenleiste und hier fügen wir Null für Konfigurationsabfrageschlüssel zwei Kategorien und immer noch Zeit auf 24 Stunden, 24 auf 60 Minuten auf 60 Sekunden in 100 Millisekunden Aus diesem Grund fügen wir die Standzeit zu 24 Stunden hinzu, weil es auch selten vorkommt, dass eine E-Commerce-Anwendung ihre Produktkategorien aktualisiert Hier können Sie die Standzeit je nach Ihren Anwendungsanforderungen ändern Ihren Anwendungsanforderungen Es hängt ganz von dir ab. Speichern Sie dies für die letzte Seite, die eine einzelne Produktseite ist, fügen Sie den benutzerdefinierten Gun-Fake auf Null, den Abfrageschlüssel zu den Produkten hinzu, Komma Hier fügen wir die Produkt-ID hinzu und wir leben immer noch bis zum Standardwert Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, dass unsere Anwendung funktioniert, und ich bin erstaunt, dass wir hier auch Produktdaten bekommen, aber die Funktion zur unendlichen Abfrage wird nicht funktionieren. Schauen wir uns also unsere Komponente mit der Produktliste an. Oh, sehen Sie, hier übergeben wir ein Abhängigkeitsarray und unser Use-Data-Hook ruft diesen Query-Schlüssel ab, und deshalb funktioniert er für frühere Daten Aber wir müssen hier mit der Verwendung in Finite Query aktualisieren. Mach dir keine Sorgen. Es ist auch sehr einfach. 207. Infinite-Query implementieren: Lassen Sie uns nun die Infinite Query-Funktion für unsere Produktliste implementieren . Schritt Nummer eins: Wir werden einen neuen Hook für die Verwendung von Infinite Query erstellen , und in Schritt Nummer zwei werden wir unsere Produktlistenkomponente aktualisieren. Fangen wir mit Schritt Nummer eins an. Dafür erstellen wir in unserem Hooks Ordner eine neue Datei namens us proroductlst Hier erstellen wir eine Funktion namens Produktliste verwenden Und am Ende exportieren wir einfach die Standardprodukte und verwenden die Produktliste. Erinnern Sie sich jetzt, was wir von Infinite Query zurückgeben werden? Richtig, wir kehren hierher zurück und verwenden Infinite Query. Darin fügen wir nun ein Objekt mit einigen Eigenschaften hinzu. Der erste ist also der Abfrageschlüssel , der vorerst als Produkte gilt. Jetzt Abfragefunktion. Hier müssen wir eine Funktion zum Aufrufen der API erstellen. Const fresh products entspricht also der Pfeilfunktion, und wir geben einfach pi client dot Get 0.2 slash products zurück dot Get 0.2 slash Und hier müssen wir Seitenzahlen und Kategorien angeben, die wir aus unserer Produktlistenkomponente übergeben Siehst du, dieses Objekt hat alle Parameter, also können wir es direkt als Konfiguration hinzufügen. In unserer Funktion „ Produktliste verwenden“ erhalten wir das Objekt, sagen wir, als Abfrage, und fügen es einfach hinter unserem Endpunkt hinzu. Erinnern Sie sich, dass wir dasselbe in unserer vorherigen Lektion getan haben? Fügen wir nun dieses Abfrageobjekt auch zu unserem Abfrageschlüssel hinzu. Hier gibt dieser Ausdruck Promise zurück. Also fügen wir dann Methode und einfach Antwortpfeilfunktion und Antwortpunktdaten hinzu. Lassen Sie uns nun diese Funktionsreferenz in unserer Abfragefunktion übergeben . Nach der Abfragefunktion fügen wir eine weitere Eigenschaft namens Get next page param Können Sie mir sagen, warum wir diese Eigenschaft benötigen? Stimmt das? Im Grunde bedeutet diese Funktion, dass die Seiten entsprechend gezählt und phasenweise angeordnet werden. Hier müssen wir also eine Funktion übergeben, die zwei Parameter hat: Letzte Seite, das sind die Daten der letzten Seite, und der zweite Parameter ist All Pages, das Array aller Seiten. Und hier geben wir einfach die Bedingung zurück wenn die Punktlänge der letzten Seite größer als Null ist, was bedeutet, dass unsere letzte Seite Daten enthält, und wenn sie wahr ist, dann erhöhen wir die Seite, was der Punktlänge aller Seiten plus eins entspricht, andernfalls geben wir Null zurück. Wie wir nun wissen, werden wir, was auch immer wir von dieser Funktion zurückgeben, dieses Objekt in unserer Abfragefunktion abrufen. Also hier bekommen wir das Objekt und destrukturieren es hier und bekommen hier den Seitenparameter, und als Standardwert übergeben wir hier Jetzt müssen wir dieses Seiten-Pum zu unserem Abfrageobjekt hinzufügen, das wir von unserer Komponente übergeben werden Hier können wir sehen, dass wir die Seiteneigenschaft mit unserer Seitennummer übergeben Also müssen wir hier dasselbe tun. Zuallererst fügen wir an der Stelle dieses Abfrageobjekts ein Objekt hinzu, und zuerst destrukturieren wir unser Abfrageobjekt, und am Ende fügen wir dieser Seite eine Seite hinzu peram und das war's Speichern Sie die Änderungen und nennen wir diesen Hook in unserer Produktlistenkomponente Hier bei den Daten zum Verwendungsort nennen wir also „Produktliste verwenden“. Hier müssen wir den Endpunkt nicht überschreiten. Nur wir werden unsere Parameter weitergeben. Also schneide ich das Params-Objekt aus und entferne alle Dinge in unserer Funktion und füge es einfach Nun, hier brauchen wir diesen Seitenparameter nicht, weil wir diese Logik bereits in Gt next page params hatten, und wir entfernen auch diese übergebene Variable von oben Lassen Sie uns überprüfen, ob unsere Komponente funktioniert oder nicht. Kannst du es erraten? Stimmt? Es wird nicht funktionieren. Speichern Sie die Motoren und schauen Sie sich das an. Gut ist eine Produktseite und unsere App stürzt ab Lassen Sie uns die Konsole öffnen und sehen, dass hier eine Fehlermeldung angezeigt wird. Die festgelegte Seite ist nicht definiert. Deshalb entfernen wir unten diese Funktion zum Einstellen von Seiten. Und was wir hier hinzufügen werden, um die Daten für die nächste Seite zu erhalten. Richtig, wir müssen die nächste Seite abrufen, die wir von Use Infinite Query erhalten Und wir entfernen auch diesen Use-Effect-Haken, wodurch unsere Figur auf eins gesetzt wird Ganz unten, in unserem Use-Effekt, werden wir die Funktion „ Nächste Seite abrufen“ aufrufen Die Änderungen und schauen Sie sich das an. Sehen Sie hier, unser Fehler ist weg, aber wir erhalten unsere Daten immer noch nicht, also machen wir Fortschritte Hier erhalten wir den gleichen Fehler wie in unserem vorherigen Abschnitt Lassen Sie uns also einfach unsere Daten const dot protokollieren. Sehen Sie sich die Änderungen an und werfen Sie einen Blick darauf. Sehen Sie, hier erhalten wir Daten in einem Objekt mit zwei Eigenschaften, Seitenbalken, also dem Undefinierten Zweitens haben wir Seiten mit Objekten, und innerhalb dieses Objekts haben wir ein paar Eigenschaften, aktuelle Seite, Beitrag pro Seite, Produkte usw. Bisher kamen wir in den Seiten nur zu Doce Array Denken Sie daran, dass diese Eigenschaften ausschließlich vom Backend abhängen. In unserer GSX fügen wir also vor unseren Datenpunktprodukten Ci-Klammern hinzu, und hier bei den Datenpunktseiten den Punkt MAP Darin erhalten wir eine einzelne Seite, die unser Objekt ist Hier geben wir also Reaktionsfragmente zurück und innerhalb dieser verschieben wir einfach unsere Map-Methode, und an der Stelle von Datenpunktprodukten fügen wir Seitenpunktprodukte hinzu. Wie wir wissen, müssen wir nun unserem React-Fragment eine Schlüsseleigenschaft hinzufügen . Also halten wir das Reaktionspunktfragment fest. Schließen Sie auch dieses Reaktionspunktfragment und fügen Sie einfach den Schlüssel hinzu, der Index ist. Und wir geben es von Schlüssel zu Index weiter. Mal sehen, ob das funktioniert oder nicht. Speichern Sie die Änderungen und schauen Sie sich das an. Wir erhalten unsere Daten immer noch nicht. Hier bekommen wir Seiten, die nicht gelesen werden können. In unserer Datei müssen wir also Datenseiten mit Fragezeichen übergeben. Speichern Sie das und sehen Sie hier, dass die Seite in der Zeile 43 nicht definiert ist. Also lass uns das überprüfen. Siehst du, hier haben wir eine Seite. Lassen Sie uns also diese Bedingung entfernen, die Änderungen speichern und einen Blick darauf werfen. Wir erhalten keine Fehlermeldung und wir erhalten auch keine Daten. Nun, ich denke, das ist das Problem in unserer Methode. Ich denke, wir erhalten keine Daten weil wir hier Produkte mit Leerverkäufen anzeigen, aber das ist auch für Leerverkäufe erforderlich Vielleicht machen wir beim Leerverkauf etwas falsch. Lassen Sie uns das überprüfen Also hier in unserem Nutzungseffekt, oh, hier überprüfen wir den falschen Zustand. Also können wir diesen Zustand für Datenpunktprodukte entfernen und hier Datenpunktseiten hinzufügen. Und außerdem wollen wir hier alle Produkte bekommen. Also hier sind unsere Daten, also die Reihe von Objekten. Und in diesem Objekt haben wir eine Produkteigenschaft, die aus zehn Produkten besteht. Nun stellt sich die Frage, wie wir alle Produkte einfach mit der FlatMap-Methode abrufen können alle Produkte einfach mit der FlatMap-Methode Also hier, bei Data Dot Pages, was die Array Dot FlatMap-Methode ist Und hier bekommen wir jede Seite. Und wir geben hier einfach seitengenaue Produkte zurück. Durch die Verwendung dieser FlatMap-Methode erhalten wir kein Array von Arrays Alle unsere Produkte werden zu einem einzigen Array hinzugefügt. Jetzt, da wir Shortprodukte direkt anzeigen, können wir das aus unserer Kartenmethode herausnehmen, und wir brauchen nicht einmal diese Daten, Punktseiten, Punktkartenschleife. Lassen Sie uns auch diese Paginierungskomponente entfernen. Es wird unseren Code etwas chaotisch machen. Speichern Sie die Änderungen und schauen Sie sich das an. Siehst du, jetzt bekommen wir hier unsere Daten. Versuchen wir, die Sortierung zu ändern. Siehst du, es funktioniert auch. Lassen Sie uns nun die Funktion zum unendlichen Scrollen überprüfen und sie funktioniert nicht Ich denke, wir haben hier etwas grundlegend falsch gemacht , weil unsere Seite nicht auf zwei umgestellt wird, was bedeutet, dass wir bei der Verwendung des Infinite-Query-Hooks möglicherweise einen Fehler gemacht Ja, wir machen so einen großen Fehler. Lass es mich dir erklären. Das ist sehr interessant. Wie wir wissen, handelt es sich bei dieser letzten Seite die Daten, die wir zuletzt von unserem Backend erhalten. Hier behandeln wir diese letzte Seite als Array, aber wie wir wissen, erhalten wir ein Objekt aus unserem API-Aufruf. Lass es mich dir zeigen. Also hier fügen wir das Punktprotokoll für die Konsole, letzte Seite, hinzu und fügen hier die letzte Seite hinzu. Die Änderungen und schauen Sie sich das an. Hier können wir sehen, dass die letzte Seite kein Array ist. Es ist ein Objekt, das wir vom Backend bekommen. Hier erhalten wir die aktuelle Seite und die gesamte Seite ist Eigentum. Wir können hier also einfach die Bedingung zurückgeben, ob der letzte Punkt aktuellen Seite kleiner ist als die Gesamtzahl der Seiten auf der letzten Seite. Wenn das wahr ist, erhöhen wir unsere Seitenanzahl, also letzte Seite, Punkt aktuelle Seite plus eins, andernfalls geben wir Null zurück. Die Änderungen und schauen Sie sich das an. Warum ich hier nur acht Produkte kriege. Ich denke, unser Parameter wird nicht richtig übergeben. Lass mich nachschauen. Hier habe ich vergessen, Perms Property hinzuzufügen. Wir schließen unser Objekt mit geschweiften Klammern ein und fügen hier Perms-Eigenschaft hinzu und übergeben Speichern Sie die Motoren und schauen Sie sich das an. Lass uns die Konsole schließen. Siehst du. Endlich bekommen wir unsere unendliche Abfrage. Ich mache diese Fehler absichtlich, um Ihnen zu zeigen , welcher Fehler in Ihrem Projekt passieren könnte. Sie können also aus diesen Fehlern lernen wenn Sie Use Infinite Query implementieren. Zuerst überprüfen Sie die Eigenschaft der letzten Seite und geben dann entsprechend die nächste Seitenzahl zurück. Jetzt können wir das noch besser machen, indem Kartenskelette anzeigen und gleichzeitig mehr Daten abrufen In unserem Hook „ Produkte verwenden“ wollen wir also nicht, dass diese Eigenschaft geladen wird Wir bekommen hier einfach die Eigenschaft Patchen, und wir bekommen sie auch als nächste Seite. Hier in unserer Handle-Scroll-Funktion an der Stelle, an der ich lade, fügen wir I abholen hinzu, und dann fügen wir hinzu und dann als nächste Erst dann holen wir uns die nächste Seite. Ebenfalls im Abhängigkeits-Array ändern wir es auf „Abrufen“, und unten, hier, ändern wir „Laden“ auf Verwenden Sie Gs und nehmen Sie a. Sehen Sie jetzt, wie unsere Funktion zum unendlichen Scrollen besser funktioniert Sie können also sehen, wie wir Requery implementieren um unendlich viele Daten in einem bestehenden Projekt abzurufen Ich denke, dieses Video ist etwas lang, also kannst du fünf bis zehn Minuten Pause machen, wenig Wasser trinken oder etwas Musik spielen und dann diesen Abschnitt fortsetzen Wir sehen uns in der nächsten Lektion. 208. Sollten wir Caching in AutoSuggestions hinzufügen?: Wenn wir derzeit in unserem Projekt wissen wollen, welche Facing-API noch übrig ist, dann suchen wir hier, was wir richtig machen werden Also suchen wir im API-Client nach Get Method. Sehen Sie hier, wir bekommen drei Dateien. Die erste sind verwendete Daten, die wir aktualisiert haben. Als Nächstes haben wir Kartendienste, die wir in der nächsten Lektion sehen werden, und schließlich haben wir eine Produktservice-Datei , in der wir eine API für Vorschläge haben. Meiner bescheidenen Meinung nach ist das Hinzufügen von Gaching in der Suchabfrage nicht notwendig da viele Leute immer wieder nach denselben Produkten suchen möchten immer wieder nach denselben Produkten suchen Ein weiterer Grund für das Hinzufügen von Caching in unsere Anwendung ist, dass wir etwas weniger Anfragen an den Server senden möchten etwas weniger Anfragen an den Server senden Und wenn wir Caching zu unserem automatischen Suchvorschlag hinzufügen , können wir diese Vorschlagsanfrage nicht verzögern denn wenn wir Query für diese Abfrage verwenden, müssen wir Squery in unserer Komponente aufrufen Wir können es nicht Use Effect nennen , weil Rea-Abfragen uns das nicht erlauben Lassen Sie den Code implementieren, wenn Sie uns eine Abfrage zu dieser Komponente hinzufügen möchten, aber meiner Meinung nach wird dies die Auslastung unseres Servers erhöhen. Deshalb entscheide ich mich, uns Query nicht für automatische Vorschläge zu verwenden. 209. GetCart-Abfrage aktualisieren: Lassen Sie uns nun unsere letzte Abrufanforderung aktualisieren, die Kartenanfrage abrufen Für die Gecard-API verwenden wir unseren verwendeten Datenhook. In unserer App-Komponente rufen wir hier use data auf und übergeben Endpoint als erstes Argument, das ist card null für das Konfigurationsobjekt, und zuletzt fügen wir den Abfrageschlüssel hinzu , der card ist und fertig Wir können sehen, wie nützlich dieser verwendete Datenhaken ist. Wie wir jetzt wissen, wird dies unsere Daten zurückgeben. Also destrukturieren wir hier und holen uns unsere Daten und benennen sie in Kartendaten Jetzt, wo wir Use Reducer Hook anwenden, müssen wir so etwas tun Wir nennen hier UiPechOK und zuerst Callback-Funktion und die zweite ist das Dependency Array und fügen hier Kartendaten hinzu die Callback-Funktion und die zweite ist das Dependency Array und fügen hier Kartendaten hinzu . In dieser Callback-Funktion fügen wir nun eine Bedingung hinzu, falls die Kartendaten nicht Null, verfügbar sind Dann legen wir mithilfe der Versandmethode Daten in unserer CAT-Variablen Also von unten streichen wir einfach diese Versandmethode aus der Get Card-Funktion und entfernen auch diese gesamte Funktion. Wir brauchen sie nicht. Fügen Sie nun diese Versandfunktion in unser UIFectHok ein und an der Stelle der Antwortpunktdaten, was wir hinzufügen werden, fügen wir Jetzt unten haben wir diesen Use-Effect-Hook haben wir diesen Lassen Sie uns ihn nach unserem Use-Effect-Hook nach oben verschieben. Dieser Hook dient zum erneuten Abrufen der Kartendaten. Aber jetzt haben wir keine Funktion zum Abrufen von Karten. Was wir einfach machen werden. Wir haben eine Funktion in der US-Abfrage, nämlich re fetch, und an der Stelle von Gcard nennen wir Speichern Sie die Änderungen und schauen Sie sich das an . Hier müssen wir uns mit unserem Konto anmelden, um Kartendaten zu erhalten. Sehen Sie hier, wir bekommen unsere Kartendaten. Jetzt entfernen wir diese Funktion „Karte abrufen“ aus unserer Kartendienstdatei . Wir brauchen sie nicht. Und in unserer App-Komponente werden wir auch die Get Card-API-Eingabe entfernen. Andernfalls erhalten wir einen Fehler. Hier sind wir also mit allen Updates zum Abrufen von Daten fertig. 210. Mutation für In den Warenkorb legen: Fangen wir nun an, Mutationen für Mutationen zu verwenden. In unserer App-Komponente haben wir also drei Mutationen. Der erste ist von Kopf bis Einkaufswagen. Zweitens haben wir es aus dem Warenkorb genommen und zuletzt haben wir den Warenkorb aktualisiert. Fangen wir also mit dem ersten Head-to-Cart an. Wir haben es im vorherigen Abschnitt gemacht, wir werden für jede Mutation einen separaten Hook erstellen. In unserem Hooks-Ordner erstellen wir einen neuen Ordner namens CAT und in diesem Ordner erstellen wir eine neue Datei namens used to cart dot js. Lassen Sie uns nun eine Funktion namens Use Ad to Cart, Arrow Function erstellen . Danach exportieren wir standardmäßig diese Funktion. Gut. Von dieser Funktion aus kehren wir nun use mutation hook zurück. Und innerhalb dieser müssen wir das Konfigurationsobjekt übergeben. Die erste Eigenschaft ist nun die bekannte Mutationsfunktion von S V. Und hier müssen wir einfach wieder zur Karten-API zurückkehren, die wir bereits in der Card Services-Datei haben. Siehst du, hier kehren wir direkt zurück, versprochen. Also können wir hier Punkt und dann Methode hinzufügen und einfach Antwort - und Antwortpunktdaten hinzufügen. Oder wir können diese API einfach von hier abschneiden und auch diese Funktion entfernen. Jetzt verwenden wir to cut hook und geben diese API einfach zurück. Aber hier müssen wir in unserer Mutationsfunktion einen Parameter für diese ID und Menge abrufen . Auch hier müssen wir unsere Parameter in ein Objekt einschließen. Ich werde Ihnen in nur einer Sekunde erklären, warum. Nun, nach unserer Mutationsfunktion, was wir hinzufügen werden, richtig, wir fügen die Erfolgseigenschaft und wir übergeben hier die Callback-Funktion Nun, wie ich Ihnen schon sagte, haben wir hier zwei Möglichkeiten Wir können unsere aktuellen Kartendaten ungültig machen oder wir können unsere Cache-Daten aktualisieren. Im vorherigen Abschnitt aktualisieren wir unsere Verkäuferdaten, da unsere neuen Verkäuferdaten nicht in das Jasen-Platzhalter-Backend aufgenommen wurden Aber hier werden wir mit unseren Warenkorbdaten in unser Backend aufgenommen. Anstatt also die Falldaten zu aktualisieren, können wir unsere aktuellen Daten einfach ungültig machen. Durch die Ungültigkeit der aktuellen Kartendaten stellen wir sicher, dass unser Benutzer seine neuen Kartendaten erhält Hier müssen wir also den Query Client verwenden und wie können wir das richtig machen Indem Sie den Use Query Client oben aufrufen und ihn einfach in einer Variablen namens Query Client speichern. eigenem Antrieb fügen wir nun den Punkt Invalid Queries im Abfrageclient hinzu. Und darin müssen wir angeben, welche Abfrageschlüsseleigenschaft und welchen Schlüssel wir für ungültig erklären wollen. Wir machen den Warenkorb ungültig, speichern die Änderungen und kehren zu unserer App-Komponente zurück Hier oben, nach den Nutzungsdaten, rufen wir unsere Funktion „ Use at to cart Und wir wissen, dass dies eine Mutationsvariable zurückgeben wird. Also speichern wir das in einer Variablen namens Head-to-Cart-Mutation. Jetzt unten müssen wir nur noch die Mutationsfunktion aufrufen, indem wir die Kopf-zu-Kart-Mutationsvariable verwenden Lassen Sie uns nun diesen Code auskommentieren und wir rufen hier einfach die Kopf-zu-Kart-Mutationsfunktion Kopf-zu-Kart-Mutationsfunktion Nun, was wir beim ersten Parameter übergeben wollen. Das können wir hier in unserer Mutationsfunktion überprüfen. Siehst du, wir müssen ein Objekt mit ID und Menge übergeben. Also zurück zu unserer Komponente, hier fügen wir Objekt und ID zum Produkt hinzu, unterstreichen die ID mit dem Punkt und die Menge zur Menge Jetzt fragen Sie sich vielleicht, warum wir hier ein Objekt übergeben? Können wir ID und Menge getrennt weitergeben? Nein, das wird nicht funktionieren, denn wie wir im vorherigen Abschnitt bei der Funktion „Stummschalten“ gesehen haben, müssen wir alle unsere Parameter an der ersten Position an der zweiten Position übergeben der ersten Position an der zweiten Position Wir können ein Konfigurationsobjekt mit Eigenschaften bei Erfolg und bei Fehler hinzufügen mit Eigenschaften bei Erfolg und bei Fehler Hier haben wir bereits den Erfolg unserer Use-Mutationsfunktion hinzugefügt Erfolg unserer Use-Mutationsfunktion Wir brauchen es hier nicht. Hier benötigen wir nur eine Fehlerpfeilfunktion. Was wir im Falle eines Fehlers tun werden. Wir werden unsere Karte rückgängig machen, wenn in der Head-to-Cart-API etwas schief geht Sehen Sie, hier haben wir bereits eine Versandmethode für das Zurücksetzen des Karten-Arrays Also kopieren wir das einfach und fügen es hier ein, und das war's. Bisher haben wir die Kontextvariable verwendet , weil wir Daten zur Mutationsfunktion zurückgeben. Aber hier haben wir keine Mutation, also können wir das direkt tun Speichert die Änderungen und nehmt das Zahnrad. Jetzt klicken wir auf der Produktseite auf die Schaltfläche In den Warenkorb und unsere Anwendung ist abgestürzt Lass es mich in der Konsole sehen. Sehen Sie, hier können wir vor der Initialisierung keine Produktvariable verwenden Hier haben wir einen Fehler in unserer Kartenreduzierer-Datei. Öffnen Sie die Kartenreduzierdatei und in unserem Fall von Kopf zu Warenkorb verwenden wir hier das Produkt, um die ID zu unterstreichen, bevor wir die Produktvariable initialisieren Lassen Sie uns das vor diese Zeile verschieben, die Änderungen speichern und einen Hier erhalten wir einen weiteren Fehler für die Head-to-Cart-API , die wir entfernt haben. Wir müssen diese Eingabe auch aus unserer App-Komponente entfernen. Speichern Sie das und jetzt wird es funktionieren. Lassen Sie uns auf die Schaltfläche „ Zum Einkaufswagen gehen“ klicken. Nichts passiert. Lassen Sie mich die Query Dev Tools einchecken . Wir gehen zu den Mutationen und hier können wir sehen, dass wir einen Fehler haben. Lassen Sie uns diesen Fehler überprüfen. Wie wir in dieser Fehlereigenschaft wissen, erhalten wir hier unseren Fehler und protokollieren diesen Fehler einfach in der Konsole. Speichern Sie das und öffnen Sie die Konsole. Klicken Sie auf die Schaltfläche „In den Einkaufswagen“ Hier erhalten wir unseren Fehler und sehen, dass der API-Client nicht definiert ist. Oh, wir haben vergessen, den API-Client bei unserer Verwendung in der Kopf-zu-Karten-Datei einzugeben , und so lösen wir Probleme. Speichern Sie die Änderungen und schauen Sie sich das an. Lassen Sie mich all diese schließen und auf die Schaltfläche „Zum Einkaufswagen gehen“ klicken. Sehen Sie hier, dass es funktioniert, aber die Aktualisierung dauert einige Zeit, da wir keinen optimistischen Ansatz gewählt haben. Wenn wir nun verstehen, dass optimistischer Ansatz grundsätzlich bedeutet werden wir Änderungen auf unserer Website anzeigen , bevor wir unseren EPI anrufen Wenn die API-Anfrage erfolgreich abgeschlossen wurde, lassen wir unsere Daten unverändert oder laden sie zur Bestätigung erneut vom Server ab Und wenn bei der API-Anfrage ein Fehler auftritt, setzen wir unsere So einfach ist das. müssen wir nur noch unsere lokalen Kartendaten aktualisieren , bevor wir die API aufrufen. Das können wir mit zwei Methoden tun. Zuerst müssen wir die Mutate-Funktion verwenden, aber darin müssen wir dieselbe Logik schreiben, die wir in unseren Head-to-Cart-Reducer schreiben Anstatt also Mutate zu verwenden, können wir hier einfach eine Aktion mit dem Aktionstyp Head-to-Cart versenden Aktion mit dem Aktionstyp Head-to-Cart Sehen Sie hier, wir haben bereits diese Versandfunktion, kopieren Sie sie und fügen Sie sie ein bevor wir die Mutate-Funktion aufrufen, so einfach ist Jetzt können wir auch diesen Code zum Auskommentieren entfernen, die Änderungen speichern und einen Blick darauf werfen Siehst du, jetzt haben wir einen optimistischen Ansatz. 211. Mutation für Aus dem Warenkorb entfernen: Lassen Sie uns nun eine Mutation für unsere Funktion „Aus der Karte entfernen“ hinzufügen. Sie können dies auch als Übung betrachten und versuchen, die Funktion „Aus der Karte entfernen“ zu implementieren. Und was ist dann die Lösung? Also hier erstellen wir eine neue Datei namens use remove from cart dot js. Darin erstellen wir eine Funktion, verwenden „Aus dem Warenkorb entfernen“ entspricht der Pfeilfunktion und am Ende exportieren wir „Standard“, „ Verwenden“, „ Aus dem Warenkorb entfernen Jetzt geben wir hier die Funktion „ Mutation verwenden“ zurück und übergeben darin das Konfigurationsobjekt Und die erste Eigenschaft ist die Mutationsfunktion. Und hier müssen wir die API „Aus der Karte entfernen“ hinzufügen. Also gehen wir zur Card Services-Datei und können diese API ausschneiden und auch diese Funktion entfernen. Speichern Sie das. Und in unserer Mutationsfunktion geben wir hier diese API zurück und fügen dann Methoden-, Antwort- und Antwortpunktdaten hinzu und stellen sicher, dass wir den API-Client aus unseren Utils importieren weil ich oft vergessen habe, ihn zu importieren , wenn ich die API aus anderen Dateien kopiere Danach fügen wir die Erfolgs-Eigenschaft hinzu. Hier fügen wir eine Callback-Funktion hinzu und darin müssen wir unsere Kartenabfrage ungültig Wir brauchen hier den Query Client und dafür brauchen wir den Query Client Oben rufen wir die Funktion Use Query Client auf und speichern das in einer Variablen namens Query Client. Lassen Sie uns nun im Query Client den Punkt Abfragen ungültig machen. Darin fügen wir das Objekt mit dem Abfrageschlüssel zum Warenkorb hinzu. Speichern Sie diese Datei und in unserer App-Komponente nach unserer Verwendung bei TCAT Hook rufen wir nach unserer Verwendung bei TCAT Hook use remove from card Hook auf und speichern sie in der Variablen remove from card mutation Unten, in unserer Funktion „Aus dem Einkaufswagen entfernen“, nach dieser Versandfunktion fügen wir nach dieser Versandfunktion die Funktion „Aus dem Einkaufswagen entfernen“ hinzu. Und darin übergeben wir zuerst das Parameter-Objekt, das unsere ID ist Hey, haben wir einen ID-Parameter zu unserer Mutationsfunktion hinzugefügt ? Lassen Sie mich das überprüfen. Siehst du, hier habe ich vergessen, das Destrukturierungsobjekt hinzuzufügen und die ID als Parameter zu erhalten Speichern Sie das und kehren Sie zu unserer Datei zurück. Nach unserem Parameter-Objekt fügen wir nun ein weiteres Objekt hinzu , in dem wir Eigenschaften hinzufügen können. Also fügen wir die Funktion error und pass error hinzu, und darin wollen wir einfach unseren Kartenstatus zurücksetzen Also können wir diese Versandfunktion von hier kopieren und wir können auch diese Toast-Dot-Fehlerfunktion kopieren Ich denke, das wird helfen. Also fügen wir sie in unsere eigene Fehlerfunktion ein. Jetzt können wir diesen alten API-Aufruf entfernen. Wir brauchen ihn nicht. füge ich diese Fehlermeldung gerne in die Head-to-Cart-API ein. Speichern Sie die Änderungen und schauen Sie sich die Seite erneut an. Hier bekommen wir einen Fehler. Lass uns das trösten. Hier bekommen wir, dass unser Kartenservice keinen Export mit dem Namen Remove from card API anbietet. Oder wir haben vergessen, den Import unserer API zum Entfernen aus der Karte zu entfernen. Entferne das. Speichern Sie diese Datei und unsere Funktion „Von der Karte entfernen“ funktioniert einwandfrei. Gehen wir nun zu unserer letzten Mutation über , der Karte aktualisieren. 212. Mutation für Erhöhung und Verringerung: Lassen Sie uns nun unsere letzte Mutation implementieren, die für Zunahme und Verringerung steht. Zuallererst werden wir separate Hooks für beide APIs erstellen und sie dann in unserer App-Komponente aufrufen. In unserem Karten-Hooks-Ordner erstellen wir also eine neue Datei mit dem Namen use increased product dot JS, und wie Sie wissen, erstellen wir zuerst eine neue Funktion namens use increase product mit Pfeilfunktionssyntax, und am Ende exportieren wir einfach die Standardfunktion, erweiterte Produktfunktion zu verwenden. In dieser Funktion geben wir nun use mutation hook zurück und fügen unser Konfigurationsobjekt hinzu. Hier fügen wir der Pfeilfunktion eine Mutationsfunktion hinzu, und wir benötigen hier eine erweiterte Produkt-API. Also gehen wir zur Kartenservice-Datei und schneiden diese Erweiterungs-API aus und fügen sie in unsere Mutationsfunktion ein. Endlich müssen wir die Punkt-VN-Methode hinzufügen und wir haben Antwort- und Antwortpunktdaten . So einfach ist das. Jetzt brauchen wir hier diese Produkt-ID. Hier werden wir also ein Objekt mit dem ID-Parameter abrufen und sicherstellen, dass wir es in unserer Mutationsfunktion in der App-Komponente übergeben Außerdem importieren wir hier den API-Client. Fügen wir nun eine weitere Eigenschaft hinzu, die bei Erfolg aufgerufen wird, und wir übergeben hier die Callback-Funktion. Innerhalb dieser Callback-Funktion benötigen wir einen Abfrageclient Vor unserer schriftlichen Aussage fügen wir also C query client equals hinzu, wo wir die Funktion use query client aufrufen Sie können sehen, wie einfach wir in unserer Anwendung Mutationen vornehmen Es wird Sie erst überzeugen , wenn Sie es zum ersten Mal implementieren. Danach können Sie es einfach hinzufügen. Ich weiß, dass du diese Hook-Logik bereits vervollständigst , während ich spreche. Lassen Sie mich also auch diesen Code vervollständigen. Hier fügen wir einfach Query Client Dot Unvalid Queries hinzu, und darin übergeben wir das Konfigurationsobjekt mit dem Eigenschaftsabfrageschlüssel und übergeben die Karte, also die Daten, die wir ungültig machen wollen. Hier fällt mir eine Sache bei der Reduzierung der Produkt-API auf. Wir müssen nur diese API ändern und darauf hinweisen, Wir müssen nur diese API ändern und darauf hinweisen sodass wir eine gemeinsame API für Erhöhung und Verkleinerung erstellen können. Ich denke, es wird vorteilhafter sein. Zuallererst werden wir unseren Dateinamen in us updcard dot js ändern unseren Dateinamen in us updcard dot Gut. Außerdem ändern wir den Funktionsnamen, wählen ihn aus und drücken F zwei auf der Tastatur und verwenden genau hier die Update-Karte. Jetzt fügen wir hier in unserem Mutationsfunktionsparameter nach unserer Produkt-ID nach unserer Produkt-ID auch die Art des Updates hinzu. Und an der Stelle dieser Erhöhung fügen wir Dollar Clibackets hinzu, tippen, speichern die Änderungen, und in unserer App-Komponente oben entfernen wir zuerst diese beiden APIs von Kartendiensten, wir wollen das jetzt nicht in unserer Komponente haben, nachdem unsere Verwendung von der Karte entfernt wurde, rufen wir unsere use update card hook auf und wir speichern es in einer neuen Variablen namens Update card mutation. Scrollen Sie nun nach unten zur Datumskarten-Funktion. Hier im Zustand I müssen wir das Produkt erhöhen. Hier nennen wir Update Card Mutation Dot Mutation. Und beim ersten Parameter, den wir hinzufügen werden, schreiben Sie, Objekt mit Parameter Du machst das wirklich großartig. Also hier fügen wir ein Objekt mit ID- und Typeigenschaften hinzu. Denken Sie daran, dass wir hier Objekte verwenden , weil wir mehrere Parameter für die Mutationsfunktion haben . Jetzt übergeben wir nach unserem Parameter-Objekt ein weiteres Objekt für eine Fehlereigenschaft. Und wir übergeben hier die Callback-Funktion und innerhalb verschieben wir einfach diese beiden Zeilen Lassen Sie uns nun diesen alten API-Aufruf entfernen. Außerdem können wir hier für diese beiden Funktionen sehen, dass diese beiden Anweisungen identisch sein werden. Wir benötigen nur die Bedingungen für diese Mengenaktualisierung. So können wir diese Versandkarte verschieben und Kartenmutationszeile nach diesen beiden IF-Bedingungen aktualisieren und auch die Versandkarte und den API-Aufruf aus der zweiten I-Bedingung entfernen die Versandkarte und . Speichern Sie die Änderungen, und wir können auch die Kartendienstdatei aus unserem Projekt entfernen. Wir brauchen es nicht mehr. Lassen Sie uns nun unsere Implementierung überprüfen. Sehen Sie, unsere Funktion zum Erhöhen und Verringern funktioniert ebenfalls gut. diese Weise implementieren wir Mutation in unserem Cartridge-Projekt, und das wird definitiv die Leistung unserer Website verbessern . Wie ich Ihnen am Anfang zeige, gibt es hier einen Vorher-Nachher-Vergleich. Wir können deutlich sehen, dass die Leistung unseres Projekts nach der Rückübernahme viel besser ist Vielen Dank, dass Sie sich diesen kompletten Abschnitt angesehen haben. 213. Abschnitt 19 Bereitstellung: Jetzt ist es soweit. Wir haben unser Hauptprojekt abgeschlossen, die Card Wish E-Commerce-Anwendung. Derzeit läuft unser Projekt auf dem lokalen Host Stellen wir es also im Internet bereit. Danach können Sie diesen Link zur Website direkt mit Ihren Freunden teilen und ihn auch zu Ihrem Lebenslauf oder Portfolio hinzufügen. Es ist wirklich einfach. Lassen Sie uns also mit dem Bereitstellungsprozess beginnen. 214. Beginn der Bereitstellung: Lassen Sie uns nun mit der Bereitstellung unserer Anwendung beginnen. Hier in unserem Projekt haben wir also zwei Teile, Backend und Frontend Ohne Backend ist unsere Frontend-Anwendung nichts. Also müssen wir diese beiden Teile bereitstellen. Wir werden Render für unser Backend verwenden und für das Frontend werden wir Netlify verwenden Dies ist meine persönliche Wahl für den Einsatz. Wenn Sie in einem Unternehmen arbeiten möchten, dann ist es Ihre Entscheidung für den Service, ob Ihr Manager oder Kunde die Wahl hat, da dieser auch das Budget und die Ausstattung sehen muss. Zuerst werden wir unseren Code auf Github hochladen und dann unser Github-Repository mit unseren Diensten verbinden . Mach dir darüber keine Sorgen. Es ist wirklich einfach. Wir erklären Ihnen alle Schritte auf einfache und unkomplizierte Weise. Wenn Sie eine React-Anwendung ohne Backend bereitstellen möchten, können Sie die nächsten drei Lektionen überspringen und React-Anwendung direkt für die Bereitstellung vorbereiten Aber vorher müssen Sie Ihr Projekt auf Github hochladen Der Grund, warum wir in diesem Projekt auch das Backend einsetzen, ist dass wir unseren lokalen Server nicht starten müssen wenn wir auf unsere React-Anwendung zugreifen In unseren ersten beiden Projekten können wir nur unser Frontend bereitstellen , da wir in diesen Projekten kein Backend oder keine Datenbank haben 215. MongoDB-Cloud hinzufügen: Derzeit haben wir in unserem Backend eine lokale MongoDB-Datenbank Jetzt, wo wir unsere Anwendung bereitstellen, sowohl im Frontend als auch im Backend, kann jeder Benutzer auf unsere Anwendung zugreifen, aber nicht alle Benutzer haben Mongo Und das ist auch keine gute Sache. Unsere Anwendungsdaten sollten für alle Benutzer synchron bleiben. Also müssen wir unsere Mongo Db-Datenbank in der Cloud erstellen. Dadurch werden alle Benutzer dieselbe Datenbank verwenden. Gehen Sie also zu mongodb.com und melden Sie sich einfach mit Ihrem Die Registrierung dauert nur 1 Minute. Ich habe mich bereits angemeldet, also erhalte ich dieses Interface. Klicken Sie nun von hier aus auf Neues Projekt und geben Sie Ihren Projektnamen ein , der CAT Wish lautet, und klicken Sie auf Weiter. Von hier aus können Sie Ihrem Projekt Teammitglieder hinzufügen. Klicken Sie einfach auf Projekt erstellen. Klicken Sie nun auf Datenbank erstellen. Hier können Sie den Like-Plan sehen. Wir gehen einfach zur kostenlosen Version und klicken auf Erstellen. Jetzt bekommen wir hier unseren Benutzernamen und unser Passwort für unsere Datenbank. Also kopiere ich zuerst Benutzernamen und in Note Paid fügen wir ihn ein. Kopieren Sie danach auch dieses zufällige Passwort und fügen Sie es ebenfalls ein. Dies ist der wichtigste Schritt. Klicken Sie nun auf Benutzer erstellen. Als Nächstes müssen wir Zugriff auf das Netzwerk gewähren, das Daten in unserer Datenbank lesen und schreiben kann. Also wählen wir hier aus, jedem Netzwerkzugriff zu gewähren. Mach dir darüber keine Sorgen. Klicken Sie einfach auf Fertig stellen und schließen. Gehe zur Datenbank. Jetzt müssen wir nur noch allen Netzwerkzugriff gewähren. Von überall aus können Benutzer auf unsere Datenbank zugreifen und Produkte daraus abrufen. Gehen Sie auf der linken Seite zum Netzwerkzugriff. Hier haben wir unsere aktuelle Adresse. Klicken Sie auf Bearbeiten und klicken Sie einfach auf Zugriff von überall zulassen Dadurch wird unsere Adresse auf 0000 gesetzt, was für alle zugänglich ist, und klicken Sie auf Bestätigen Es wird einige Zeit dauern, bis wir sehen, dass es aktiv ist. Gut. Unsere Datenbank ist also bereit. Jetzt müssen wir nur noch diese Datenbank mit unserem Node-Backend verbinden . Also zurück zum Datenbank-Tab und einfach Cconnect. Jetzt mögen wir die Verbindungsoption. Und hier haben wir Schritte zum Verbinden der Knotenanwendung. Keine Sorge, kopieren Sie einfach diesen Datenbank-Link und öffnen Sie in unserem Backend-Vs-Code die Punkt-NV-Datei, und an der Stelle dieser lokalen Mongo-Db-Tinte fügen wir unsere Mongo Di B Cloud-Tinte fügen wir unsere Mongo Di B Öffnen Sie jetzt Not Paired und kopieren Sie unser Passwort. Zurück zum Va-Code, und wir müssen unser Passwort an der Stelle dieses Passworts einfügen. Beachten Sie, dass wir hier auch diese spitzen Klammern entfernen müssen. Speichern Sie diese Datei und wir sind hier fertig. Lassen Sie uns überprüfen, ob es verbunden ist oder nicht. Stoppen Sie in unserem Terminal diesen laufenden Server mit Control plus C oder Command plus C und schreiben Sie erneut den Knotenindexpunkt Js und drücken Sie die Eingabetaste. Das wird einige Zeit dauern und hier stellen wir eine Verbindung zur Datenbank her. Stoppen Sie jetzt erneut dieses Skript und führen Sie node products dot js aus, da wir derzeit keine Daten in dieser neuen Cloud-Datenbank haben , und C erhalten wir eine Erfolgsmeldung. also zurück zu unserer MongoV-Website und klicken Sie auf Sammlungen durchsuchen Und siehe, hier bekommen wir unsere Datenbank und Sammlungen. So verbinden wir erfolgreich Mongo Debi Cloud-Datenbank mit unserer Node-Anwendung 216. So lädst du Projekte auf GitHub hoch: Lassen Sie uns nun sehen, wie wir unser Projekt auf den Github hochladen können . Falls Sie Github nicht kennen, kurz gesagt, es handelt sich um eine Website, auf der Entwickler Code speichern, teilen und gemeinsam mit anderen daran arbeiten können . Github ermöglicht es Entwicklern, Repositorys zu erstellen, oder wir können Repos aufrufen, in denen sie ihren Code speichern und Änderungen im Laufe der Zeit verfolgen können ihren Code speichern und Änderungen im Laufe der Zeit verfolgen Und das ist die beste und einfachste Möglichkeit für Teams, gemeinsam an demselben Projekt zu arbeiten gemeinsam an demselben Projekt ohne den Code des jeweils anderen zu überschreiben Es gibt also viele Möglichkeiten, Code auf Github hochzuladen. Wir werden den einfachsten und einfachsten Weg sehen, nämlich die Verwendung der Github-Desktop-Anwendung. Schritt Nummer eins: Laden Sie die Github-Desktop-Anwendung herunter. Gehen Sie also zu unserem Browser, suchen Sie nach Github-Desktop-Anwendung und öffnen Sie diesen Github-Link. Klicken Sie nun auf die Schaltfläche Herunterladen. Das wird einige Zeit dauern. Und nachdem Sie dies abgeschlossen haben, öffnen Sie das Setup und unsere Installation wird gestartet. Wenn du es zum ersten Mal öffnest, musst du dich mit deinem Github-Konto anmelden. Um Ihnen das zu zeigen, entferne ich mein Github-Konto aus der Github-Anwendung. Jetzt, Schritt Nummer zwei, müssen wir uns mit dem Github-Konto anmelden. Gehen Sie also für die Anmeldung zu Dateien und öffnen Sie Optionen Klicken Sie auf die Schaltfläche „Für Github anmelden “ und fahren Sie mit dem Browser fort. Es wird uns also zur offiziellen Github-Website weiterleiten. Geben Sie nun Ihren Benutzernamen und Ihr Passwort für Ihr Github-Konto ein und klicken Sie auf Anmelden. Klicken Sie nun auf diesen Open Github-Desktop und er wird automatisch zu unserer Anwendung weitergeleitet. Mach dir keine Sorgen. Sie müssen es nur zum ersten Mal einrichten. Lassen Sie uns nun überprüfen, ob wir uns anmelden oder nicht. Gehen Sie also erneut zu den Dateien und öffnen Sie die Optionen. Und in den Konten, die wir hier sehen können, haben wir unser Github-Konto. Gehen Sie jetzt zur Git-Option und von hier aus können wir unseren Namen und unsere E-Mail-Adresse für unseren Github festlegen. Wenn wir also cool auf Github wechseln, werden andere Teammitglieder diesen Namen und diese E-Mail-Adresse sehen. Vergewissere dich, dass du hier deine offizielle E-Mail-Adresse auswählst und auf Speichern klickst. Nun Schritt Nummer drei, das Hinzufügen eines lokalen Repositorys. Um unseren Code zum Repository hinzuzufügen, gehen Sie zur Datei und wählen Sie Lokales Repository hinzufügen. Wählen Sie von hier aus den Pfad unseres Backend-Ordners aus. Und wählen Sie diesen Ordner aus. Jetzt heißt es hier, ein neues Repository zu erstellen, also klicken Sie auf diesen Link, und hier müssen wir unseren Repository-Namen übergeben. Mach dir darüber keine Sorgen , klicke einfach auf Repository erstellen und dann auf Repository erstellen. Lassen Sie uns nun überprüfen, ob wir den richtigen Pfad hatten oder nicht. Kreis mit Explorer und C, unser Ben-Ordner ist geöffnet Also schließe es und klicke einfach auf dieses öffentliche Repository. Von hier aus können wir unseren Repository-Namen und auch die Beschreibung ändern unseren Repository-Namen und auch die Beschreibung Dies ist kein Backend für eine Cartwage-Anwendung Und auch von hier aus können wir den Datenschutz unseres Codes auswählen Bitte machen Sie ihn für unseren Gebrauch nicht privat. Deaktivieren Sie dieses Kästchen und klicken Sie auf Repository veröffentlichen. Es wird einige Zeit dauern und fertig. Lass es uns auf Github sehen. Klicken Sie auf View on Github und sehen Sie hier, wo wir unseren Backend-Code sehen können Unten kannst du sehen, wie einfach es ist, Code auf Github hochzuladen Lassen Sie uns jetzt auch unser Frontend veröffentlichen. Also zurück zur Github-Anwendung, gehe zur Datei und klicke auf Local Repository. Wählen Sie den Pfad unseres Frontend-Projekts aus. Und klicken Sie auf Create Repository. Klicken Sie erneut auf Create Repository und dann einfach auf Published Repository. Hier können wir unser Apoame auf CartWisFrontend ändern. Du kannst schreiben, was du willst. Es liegt ganz bei dir. In der Beschreibung, die wir hinzufügen, ist dies die React-Anwendung für CartWishpject Lassen Sie uns dieses Kästchen ankreuzen, um unser Repository öffentlich zu machen Wir können das von der Github-Website aus eingeben. Klicken Sie auf Veröffentlichen und fertig. Lass es uns in Github öffnen und sehen, wie das Frontend auch auf Github veröffentlicht wird. 217. Backend bereitstellen: Lassen Sie uns nun zuerst unser Backend bereitstellen. Gehen Sie also zu render.com, und hier können wir den sofortigen Bereitstellungsprozess sehen Aber zuerst werden wir unser Konto von hier aus registrieren. Wir können Google oder Github für die Registrierung verwenden, oder wir können einfach E-Mail und Passwort verwenden. Es wird uns eine Aktivierungs-E-Mail senden, und in dieser E-Mail erhalten wir einen Aktivierungslink. Also kopiere ich diesen Link von hier und füge ihn in unsere URL ein. Und wir bekommen dieses Testboard. Mach dir darüber keine Sorgen. Klicken Sie einfach auf die Schaltfläche Neu. Und hier wählen wir Webservices aus. Jetzt müssen wir unseren Gitub-Account verbinden. Cl C Verbinde Gitub und melde dich mit deinem Gitub-Account an. Stellen Sie sicher, dass Sie dasselbe Github-Konto verwenden , in dem Sie Ihren Backend-Code veröffentlichen Lassen Sie uns nun Render in unserem Github-Konto installieren. Auf dieser Seite können wir auswählen, welches Repository wir zu unserem Render-Konto hinzufügen möchten. Sie können alle Repositorys hinzufügen, aber ich schlage vor, nur eine Repository-Option auszuwählen. Jetzt können wir von hier aus ein Repository auswählen. Also wählen wir das Cardwig-Backend aus und klicken auf Installieren. Jetzt werden wir zur Dashboard-Startseite weitergeleitet, und wir klicken erneut auf Neu und wählen Webdienste Siehst du, jetzt haben wir hier unser Repository. Einfach auf Connect klicken und wir bekommen hier unser Formular. Jetzt fügen wir hier zunächst unseren Anwendungsnamen hinzu , der Cartwig-Backend lautet Als Nächstes können wir die Region und den Zweig unseres Github-Repositorys auswählen Region und den Zweig unseres Github-Repositorys Jetzt fügen wir für das Stammverzeichnis einen Punkt hinzu. Als Nächstes haben wir eine Umgebung , die auf Knoten eingestellt ist. Ändere das nicht. Und für den Befehl build schreiben wir NPM install Und für den Startbefehl fügen wir einfach Node Index Dot JS Jetzt wählen wir von unten unseren Servicetyp aus , den wir auf kostenlos setzen. Klicken Sie nun auf dieses erweiterte Drop-down-Menü wählen Sie Geheime Datei hinzufügen und geben Sie ihr einen Namen mit dem Punkt ENV Nun zurück zu unserem Bend-Projekt, und darin haben wir eine ENV-Datei, in der wir unsere geheimen Variablen haben Kopieren Sie einfach den gesamten Code auf der Render-Website, klicken Sie auf den Inhalt und fügen Sie unseren Code hier Klicken Sie jetzt einfach auf Webumfragen erstellen und sehen Sie, wie der Bereitstellungsprozess gestartet wird. Es wird einige Zeit dauern, bis sich herausstellt, dass es erfolgreich ist, und jetzt wird es bereitgestellt. Und ich sehe, dass der Server auf diesem Port läuft und ich erhalte eine Fehlermeldung bei der Mongo-Deb-Verbindung. Lass mich das überprüfen Ich glaube, ich habe einen Fehler gemacht, als ich die geheime Datei hinzugefügt habe. Also hier gehen wir zur Registerkarte Umgebung und lassen Sie mich hier den Dateiinhalt überprüfen. Es ist gut. Oh, hier gebe ich einen falschen Dateinamen ein. Wir müssen Punkt ENV hinzufügen. Speichern Sie die Änderungen und kehren Sie zur Registerkarte Protokolle zurück. Klicken Sie hier auf die Option Manuelles Bereitstellen und wählen Sie den Befehl Aktuellsten Dienst bereitstellen aus. Es wird unsere Anwendung erneut bereitstellen. Hier bekommen wir den Build erfolgreich und die Bereitstellung und sehen, hier stellen wir die Verbindung zur Datenbank her. Lassen Sie uns das überprüfen. Also oben, hier bekommen wir unsere Backend-URL, kopieren sie, und im neuen Tab wir diese URL-Slash-API-Slash-URL für Produkte ein und sehen, hier bekommen wir unsere Produktdaten Also setzen wir unser Backend erfolgreich ein. Als Nächstes bereiten wir unser Frontend für den Einsatz vor. 218. React-Anwendung für die Bereitstellung vorbereiten: Lassen Sie uns nun unsere React-Anwendung für den Einsatz vorbereiten. In unserer aktuellen Anwendung rufen wir also unsere API mit dem lokalen SDTP-Host 5.000 auf, aber das ist das lokale Backend Wir müssen die API mit unserer bereitgestellten Anwendungs-URL aufrufen, die wir in unserer letzten Lektion gesehen haben In unserer Carts React-Anwendung öffnen wir also unsere API-Client-Datei und definieren hier unsere Basis-URL für API-Aufrufe Außerdem müssen wir unsere Basis-URL für unsere Bilder aktualisieren. Wir werden unsere Basis-URL an einer einzigen Stelle definieren, und indem wir sie verwenden, ersetzen wir unsere alte URL an allen Stellen. Also erstellen wir in unserem Quellordner eine neue Datei namens Config Dot JCN und hier fügen wir Cul-Klammern hinzu und fügen hier die Eigenschafts-Backend-URL hinzu Und als Wert kopieren wir unsere Backend-URL und Speichern Sie diese Datei, und jetzt ersetzen wir alle URLs durch sie. Öffnen Sie also zunächst die Dot-Js-Datei des API-Clients und importieren Sie oben die Konfiguration von. Hier gehen wir einen Ordner nach oben, Config Dot jCn. Lassen Sie uns nun diese Basis-URL entfernen, und hier fügen wir Back-Ticks hinzu und fügen hier Dollar-Cal-Klammern, config, BN-URL und danach Slash-API Speichern Sie dies und öffnen Sie oben die Produktkartenkomponente, aus der wir die Konfiguration importieren Hier gehen wir zu den Ordnern hoch, Config Touch und File. nun in unserem JSX Lassen Sie uns nun in unserem JSX diese URL durch Dollar-Klammern und die Backend-URL mit Konfigurationspunkten ersetzen Backend-URL mit Konfigurationspunkten Speichern Sie diese Datei und öffnen Sie die einzelne Produktkomponente. Hier oben importieren wir wieder die Konfiguration von. Hier gehen wir zu Folders up, Config Dot JS und File. Jetzt mag sie die Backend-URL und drückt Strg+D oder Befehl+D und ersetzt sie durch Dollar-Cul-Klammern und den Konfigurationspunkt Bend URL Speichern Sie diese Datei und öffnen Sie die Produktseitenleiste. Ganz oben importieren wir wieder Config from to folder up, config dot js und file. Lassen Sie uns nun diese URL durch den Dollar Culiackets Config Dot enUrl ersetzen Dollar Culiackets Config Speichern Sie diese und zuletzt geöffnete Kartenseitenkomponente und oben importieren wir die Konfiguration aus zwei Ordnern, config, touch config, Lassen Sie uns nun diese URL durch Dollar-Coli-Klammern ersetzen, den Punkt Bn URL und diese Datei speichern. Lassen Sie uns nun unseren aktualisierten Code in das Github-Repository übertragen. Also eine Github-Desktop-Anwendung und wählen Sie unser Frontend-Repository als aktuell aus. Und hier können wir alle Änderungen sehen , die wir in unserem Code vornehmen. Gleich hier, Nachricht, Ben-URL aktualisieren und auf Commit to Maine klicken, dann einfach Origin drücken, und schon sind wir fertig. 219. React-Anwendung bereitstellen: Lassen Sie uns nun unsere React-Anwendung auf Netlify bereitstellen. Gehen Sie also zu tontlfy.com und klicken Sie auf Anmelden, und klicken Sie auf Hier registriere ich mich mit meinem Github-Konto und werde nach einer Authentifizierung Klicken Sie also auf Netlify autorisieren und wir leiten zur Netlify-Seite und wir leiten zur Hier müssen wir einige häufig gestellte Fragen zu Netlify beantworten . Hier wähle ich Arbeit aus. Danach wähle ich etwas anderes und hier geben wir unseren Anwendungsnamen ein, Cartwis Beantworten Sie jetzt schnell diese Fragen. Es spielt keine Rolle. Das können wir später ändern. Klicken Sie am Ende auf Weiter zur Bereitstellung. Jetzt werden wir hier Deploy mit Github verwenden, und das wird erneut nach einer Autorisierung fragen. Erlaube es, genauso wie wir unseren Github zum Rendern autorisieren. Und danach bekommen wir einfach den Installationsprozess für Netlifi Hier wählen wir also nur das ausgewählte Repository aus, und unten wählen wir unsere CartWGFront-Endanwendung und unten wählen wir unsere CartWGFront-Endanwendung aus und klicken auf Installieren. Von hier aus können wir sehen, dass unser Repository in Netlifi hinzugefügt wurde . Klicken Sie darauf und es wird einfach gefragt, ob Sie unser Projekt auf Netlify bereitstellen möchten Klicken Sie also darauf und unser Code wird initialisiert. Sie können hier sehen, wie mit der Installation von Abhängigkeiten begonnen wird. Dies wird wenig Zeit in Anspruch nehmen, und danach wird es erstellt und bereitgestellt, und der gesamte Vorgang ist abgeschlossen. Hier erhalten wir die Erfolgsmeldung von Deploy, und unser Anwendungsname ist vorerst auf diesen Wert eingestellt. Mach dir darüber keine Sorgen. Klicken Sie einfach auf Erste Schritte. Hier können wir sehen, dass wir unsere Website bekommen, und das ist der Link zu unserer Website. Klicken Sie darauf und sehen Sie, wie wir unsere React-Anwendung erhalten. Hier ist unsere Anwendungs-URL eine zufällige URL. Wir können diesen Link nicht an unseren Kunden weitergeben, richtig. Also zurück zu unserer Netlify-Website, und hier haben wir unsere Seiteneinstellungen und auch Domaineinstellungen Klicken Sie also auf Domaineinstellungen und von hier aus auf Optionen und bearbeiten Sie den Seitennamen Jetzt haben wir den Namen unserer Website auf etwas Einzigartiges gesetzt, das noch kein Label ist Für Sie müssen Sie also eine oder zwei Patronen oder etwas anderes hinzufügen , um es einzigartig zu machen Speichern Sie diesen Namen, und jetzt hat sich die URL unserer Website geändert. Wir stellen unsere Anwendung erfolgreich völlig kostenlos auf Netlify bereit Wenn Sie diese Netlify Dot App entfernen möchten, müssen Sie Ihre eigene Domain mit dieser Site verbinden Wenn Sie diese Anwendung nur verwenden möchten, um Ihre Arbeit als Entwickler zu zeigen, ist dieser Name Lassen Sie mich Ihnen nun zeigen, wie Sie Ihr Projekt einfach aktualisieren können. Deshalb möchten wir hier auf unserer Website diese Website, den Titel und das Fab-Symbol ändern . Also zurück zu VSCode, und in unserem Indexpunkt stmlFle an der Stelle dieses Titels fügen wir die moderne E-Commerce-Anwendung CatWish Jetzt haben wir in unserem SS-Ordner die Datei Cartwishpvicon haben wir in unserem SS-Ordner die Datei Cartwishpvicon Verschieben Sie es also einfach in den öffentlichen Ordner. Und an der Stelle dieser SVG-Datei fügen wir einfach Cart Wig Favicon Dot SVG hinzu. Speichern Sie die Änderungen Und jetzt lassen Sie uns diese Änderungen implementieren. Um die bereitgestellte Anwendung zu aktualisieren, müssen wir nur unseren Code auf Github und Netlify erkennt die Änderungen automatisch Deshalb reagieren wir auf Github Also zurück zur Github Dextra-Applikation. Und hier übergeben wir unsere Commit-Nachricht, die aus dem Titel des Updates und dem Fab-Icon besteht , und Commit an die Hauptseite Und am Ende drücken Sie einfach Origin. jetzt auf unserer Netlive-Website Gehen Sie jetzt auf unserer Netlive-Website zum Bereich Bereitstellung. Hier können wir sehen, wie es aufgebaut wird, und am Ende wird die Website veröffentlicht. Lassen Sie uns die Website öffnen und sehen, dass unser Symbol aktualisiert wurde. So setzen wir unsere React-Anwendungen ein. Sie können sehen, dass der Bereitstellungsprozess sehr einfach und unkompliziert ist. Sie müssen lediglich Ihren Code in das Github-Repository hochladen und dann mithilfe von Netlify werden wir unsere Anwendung schnell bereitstellen Und um unsere Anwendung zu aktualisieren, müssen wir nur die Änderungen auf Github übertragen, und in den zwei bis drei Minuten wird unsere Website ganz einfach neu erstellt 220. Vielen Dank!: In Ordnung, das ist das Ende dieses Kurses. Es war gut, oder? Es war lang, aber Sie können Projekte sehen, die Sie erstellt haben , und auch herzlichen Glückwunsch, dass Sie es bis zum Ende Ich weiß aus den Statistiken, dass es nicht viele Leute hierher schaffen, aber du hast es geschafft Wir sind am Ende dieses Kurses hier. Vielen Dank und ja, wir sehen uns. Tschüss.