Erstelle eine vollwertige Todo-Liste in React Js

1. Vollständiger React Js-Leitfaden: Von den Grundlagen zu dynamischen Apps: Hallo, zukünftige Webentwickler. Ich bin Man und Conny, euer freundlicher Instruktor und Guide auf dieser aufregenden React-Gas-Reise In diesem kurzen und süßen Kurs werden wir gemeinsam etwas Fantastisches bauen Aber bevor wir uns mit dem Projekt befassen, möchte ich Ihnen sagen, was auf Sie zukommt. Wir beginnen mit den Grundlagen und stellen sicher, dass Sie ein grundsolides Fundament haben und Gas reagieren können Dann beginnen wir mit dem Programmieren wo Sie das reale Projekt von Grund auf neu erstellen Am Ende dieses Kurses verfügen Sie über die Fähigkeiten und das Selbstvertrauen, um Ihre eigenen Reac GAS-Anwendungen zu erstellen und potenzielle Mitarbeiter oder Kunden zu beeindrucken Dies ist das Projekt, das wir gemeinsam aufbauen werden. Es ist eine Task-Tracker-App, Benutzer mithilfe dieses Formulars neue Aufgaben erstellen können. Wenn sie Aufgaben erstellen, wird die Aufgabe in diesem Container angezeigt. Lassen Sie mich Ihnen zeigen, wie wir das machen können. Nehmen wir an, wir möchten eine erste Aufgabe erstellen. Ich kann die Eingabetaste auf der Tastatur drücken oder diese Taste hier drücken. Wir werden also lernen, wie man auf Tastaturereignisse und auf Ereignisse mit HTML-Tasten wartet. Jetzt drücke ich die Eingabetaste auf meiner Tastatur. Und da hast du es. Das Objekt der ersten Aufgabe wurde dynamisch gerendert oder ist in diesem Container erschienen. Jetzt können Benutzer dieses Element entweder überprüfen, ob sie die Aufgabe abgeschlossen haben. Wenn sie dieses Kontrollkästchen aktivieren, wird es grün, was darauf hinweist, dass diese Aufgabe abgeschlossen ist. Sie können mehrere Aufgabenelemente hinzufügen, wie Aufgabe zwei, Aufgabe drei Sie können jetzt feststellen, dass wir hier eine Zählung haben , bei der die Anzahl der Aufgabenelemente in der Liste gezählt wird. Immer wenn Sie ein neues Aufgabenelement hinzufügen, wird diese Zahl hier dynamisch erhöht und zeigt die Anzahl der Aufgabenelemente in Echtzeit an. Jetzt können wir zwischen erledigten und ausstehenden Aufgabenelementen filtern . Wenn ich zu „Erledigt“ wechsle, werden nur die abgeschlossenen Aufgaben angezeigt , in unserem Fall also nur das Element „Aufgabe eins“. Wenn wir zu ausstehenden Elementen wechseln, sehen wir alle ausstehenden Aufgabenelemente in diesem Container. Von hier aus können Sie Elemente löschen Wenn Sie zu Alle wechseln, werden Sie feststellen, dass das Element der zweiten Aufgabe gelöscht wurde. Wir werden also lernen, wie man Elemente löscht und das Ergebnis dynamisch für die Benutzer rendert. Sie können mehrere Elemente überprüfen, wenn Sie möchten. Jetzt hat diese Anwendung auch zwei Seiten, die Startseite und die Info-Seite. können wir zwischen diesen Seiten navigieren Mit den Header-Navigationsschaltflächen können wir zwischen diesen Seiten navigieren. Wenn ich zur Info-Seite wechsle, erhalten wir diese einfache Info-Seite. Sie werden feststellen, dass der RO-Pfad in Schrägstrich about geändert wurde . Lass mich das nochmal machen. Wie Sie sehen können, hat sich das Vereinigte Königreich geändert. Diese Seite enthält eine kleine Beschreibung worum es bei dieser Anwendung geht. Wie Sie hier sehen können, ist diese Anwendung nur eine einfache Tracker-App, mit der Sie organisiert bleiben und Ihre Aufgabe effizient verwalten können. Es ist eine einfache App, aber sie enthält viele Funktionen. Zum Beispiel haben wir hier eine Programmierdrossel. Wir holen uns diesen Witz von einer externen API. Immer wenn wir von der Startseite zur obigen Seite wechseln, holen wir uns einen neuen Witz Wir werden lernen, wie man Daten von einer externen API abruft und die Daten dynamisch in unserer Anwendung rendert Dies geschieht jedes Mal, wenn Sie zwischen Seiten wechseln oder diese Seite aktualisieren Wenn Sie es aktualisieren, erhalten Sie einen neuen Choke. Jetzt stellen Sie vielleicht fest, dass wir hier unten einen Link mit der Aufschrift „Lernen Sie das Team kennen lernen Wenn Sie darauf klicken, erscheint eine Liste mit Namen. Diese Namen beziehen sich auf die Entwickler, die an dieser Task-Tracker-App gearbeitet haben. Jetzt stellen Sie auch fest, dass sich der URL-Pfad geändert hat, und am Ende haben wir hier ein Forward-Slash-Team Lassen Sie mich das noch einmal machen und die URL im Auge behalten. Wie Sie sehen können, haben wir hier einen neuen Choke, holen Sie ihn ab, und jetzt klicken wir auf diesen Link, und die URL wurde auf etwa vier Slash-Teams aktualisiert Das nennen wir eine verschachtelte Route und reagieren darauf. Mit verschachtelten Routen können Sie verschachtelte Layouts erstellen , ohne die Webseite aktualisieren zu müssen Wie Sie sehen können, ist diese Anwendung voller Funktionen, und hier gibt es viel zu lernen Es enthält also alles, was Sie zum Erstellen einer interaktiven Webanwendung benötigen. Wir haben Formulare, wir haben Schaltflächen, wir können mit der Tastatur interagieren. Wir können Aufgabenelemente filtern, ja. Wir können zwischen Seiten wechseln, und die Elemente werden nicht aus dem Container verschwinden. Also werden wir das auch lernen. Sie können dynamisches Rendern verwenden. Das ist auch eine sehr wertvolle Funktion in einer modernen Webanwendung. Wir können zwischen Seiten wechseln, einige Daten von einer externen API abrufen verschachtelte Layouts und verschachtelte Wie Sie sehen, mag es wie eine einfache Anwendung erscheinen, aber sie hat eine Menge zu bieten . Eigentlich ist das alles, was Sie brauchen, um Webanwendungen von Grund auf neu zu erstellen. Nach Abschluss dieses Kurses hängen Ihre Fortschritte also nur von Vorstellungskraft und einfach von Ihren CSS-Fähigkeiten ab. Aus diesem Grund werden Sie in diesem Kurs verstehen, was React GS ist, was GSX ist, wie React GS hinter den Kulissen funktioniert, und Sie lernen auch, wie Sie diese fantastischen Funktionen in einer Webanwendung erstellen diese fantastischen Funktionen in einer Jetzt wundern Sie sich vielleicht, warum dieser Kurs so kurz ist und nur etwa 2 Stunden dauert Nun, das ist eine gute Frage. Sie sehen, dieser Kurs wurde mit Blick auf Ihre Zeit und Ihr Lernen konzipiert. Ich glaube daran, Sie schnell und effizient auf den neuesten Stand zu bringen. Ich verzerre das grundlegende Wissen, das Sie benötigen, um IS zu beherrschen und eine Task-Tracker-App zu erstellen Kein Flaum, kein Füllstoff, nur die guten Sachen. Ich weiß, dass deine Zeit wertvoll ist, und ich respektiere das. den Kurs einheitlich gestalten, sparen Sie Zeit und erwerben trotzdem die Fähigkeiten, Ihre eigenen RGS-Projekte zu erstellen , ohne sich überfordert zu fühlen Wenn Sie also daran interessiert sind , diese Anwendung mit mir zu erstellen, melden einfach für diesen Kurs an und lassen Sie uns die Reise beginnen 2. Überblick über die Kurserwartungen und -voraussetzungen: Hallo, ihre zukünftigen React-Entwickler. Willkommen zu unserem Kurs zum vollständigen React GAS-Leitfaden von den Grundlagen bis hin zu dynamischen Apps Auf dieser aufregenden Reise werden wir in die Kernkonzepte von React eintauchen und untersuchen, wie es mit Java Script Hand in Hand um atemberaubende Benutzeroberflächen zu erstellen Lassen Sie uns also anfangen. Erste Sache, dritte. Lassen Sie uns verstehen, was React ist und warum es der Entwicklung eine immense Popularität für Saxophon in der Welt React ist eine leistungsstarke Dava-Skriptbibliothek, mit der wir mühelos faszinierende Benutzeroberflächen erstellen können Aber hier ist der Clou. React funktioniert nicht isoliert. Es ist eng in das Dava-Skript integriert. React nutzt die Magie von JavaScript unter der Haube, um unsere Benutzeroberflächen zum Leben zu erwecken Das bedeutet, dass es wird, ein solides Verständnis der JavaScript-Konzepte unglaublich hilfreich sein wird, ein solides Verständnis der JavaScript-Konzepte zu Laufe dieses Kurses unglaublich hilfreich sein wird, ein solides Verständnis der JavaScript-Konzepte zu haben , die Lassen Sie uns nun, bevor wir mit der spannenden Handlung beginnen, kurz einige Voraussetzungen und Tools behandeln Sie benötigen, um das Beste aus den Tools herauszuholen Wenn Sie bereits mit HTML, CSS und JavaScript vertraut sind, haben Sie einen guten Start hingelegt. Diese grundlegenden Sprachen werden sich als nützlich erweisen, wenn wir uns mit den Funktionen von Act befassen Was die Tools angeht, werden wir Visual Studio-Code für unsere Programmierabenteuer verwenden und kein DS, um unsere Anwendungen auszuführen Sie müssen keine Erfahrung mit NGS haben. Das einzige, was erforderlich ist, ist, NOGs von seiner offiziellen Website aus zu blockieren sich keine Sorgen, wenn Sie mit diesen Tools noch nicht vertraut werden Sie bei jedem Schritt begleiten Nun, ich bin mir sicher, dass Sie neugierig sind, warum Act in der realen Welt so häufig verwendet wird. Gestatten Sie mir, ein kurzes Beispiel zu nennen , um Ihre Motivation zu steigern. Stellen Sie sich vor, Sie navigieren einer dynamischen Website mit einer Fülle interaktiver Elemente, Schaltflächen, Foren und Animationen Diese Elemente müssen schnell und reibungslos auf Ihre Aktionen reagieren können Hier ertönt React. effiziente Renderprozess und der clevere Einsatz des virtuellen Doms sorgen für blitzschnelle Tests der Benutzererfahrung machen React zur idealen Wahl für die Erstellung ansprechender und responsiver Anwendungen Da hast du es also, ein kleiner Einblick in den Watson Store für dich auf Machen Sie sich bereit, die Geheimnisse der Handlung zu lüften, in die Welt von JavaScript einzutauchen und beeindruckende Benutzeroberflächen zu erstellen, und beeindruckende Benutzeroberflächen zu erstellen die bleibende Auswirkungen hinterlassen Ich freue mich, Sie bei jedem Schritt begleiten zu dürfen. 3. Schritt für Schritt deine erste ReactJs-APP erstellen: Erstellen Sie zunächst einen Ordner und öffnen Sie ihn in VSCO. Sie können den Ordner beliebig benennen. Ich habe Mine Task Tracker apsince genannt, das ist es, was wir bauen werden Als erstes müssen wir das Terminal öffnen. Dazu können Sie entweder hier auf das Terminalsymbol klicken. Oder navigieren Sie zum Menü und wählen Sie Terminal aus. Klicken Sie dann auf neues Terminal. Sobald das Terminalfenster geöffnet ist, stellen Sie sicher, dass Sie kein GS installiert haben. Sie können dies tun, indem Sie den folgenden Befehl ausführen , um die Version zu überprüfen. Wenn die Version angezeigt wird, bedeutet das, dass Sie kein GS installiert haben. Andernfalls müssen Sie es von der offiziellen Website entfernen Als Nächstes werden wir einen Befehl ausführen , um unsere erste React-GS-App zu erstellen Dies kann mit PM, PMPM oder Yn erfolgen. In diesem Fall verwenden wir den Befehl Create React App, ein Tool, das ein neues React-GS-Projekt mit einer vorkonfigurierten Struktur und Abhängigkeiten einrichtet neues React-GS-Projekt mit einer vorkonfigurierten Struktur Wenn Sie Yarn nicht installiert haben, müssen Sie die APX Create React-App verwenden und einen benutzerdefinierten App-Namen hinzufügen Alternativ kannst du einen Punkt verwenden, um anzugeben , dass du die Reacts-App im Coan-Ordner erstellen möchtest Reacts-App im Coan-Ordner Ich werde Yarn verwenden, da es stabiler ist als PMPM oder MPM. Drücken Sie die Eingabetaste und lassen Sie die Magie geschehen. Der Befehl hat erfolgreich eine Vier-GS-App erstellt eine Vier-GS-App , mit der wir arbeiten können. Ziemlich cool, oder? Hier ist die Projektstruktur. Der SRC-Ordner enthält den Quellcode der Anwendung. Der öffentliche Ordner enthält statische Elemente und die HTML-Datei mit dem Indexpunkt ist der Einstiegspunkt für Ihre App Obwohl AGS nur eine HTML-Datei verwendet, bedeutet das nicht, dass wir auf eine Seite beschränkt sind. Wir können mit JavaScript mehrere Seiten oder Routen erstellen. Jede Route verwendet JavaScript, um spezifischen HTML-Code basierend auf dem URL-Pfad zu rendern . Jeder AML-Code, den wir schreiben, wird innerhalb des TF-Elements mit der ID-Wurzel gerendert. Jetzt finden wir im SRC-Ordner verschiedene Dateien, wobei die wichtigste der Index DGS Diese Datei ist wichtig, weil sie Dava Script verwendet , um unseren gesamten Projektcode in das DV-Element mit der ID root zu rendern unseren gesamten Projektcode in das DV-Element mit der ID root Um es einfach auszudrücken: React ist wie Ihre Blaupause für Während React Dom als Bauteam fungiert , das diesen Bauplan in das eigentliche Gebäude umwandelt Es ist das Tool, das Ihre React-Komponenten aufnimmt und sie im Internet präsentiert, sodass Ihre Website zum Leben erweckt Die Index D GS-Datei, wir können diese Zeile hier entfernen Der Bericht Web Vitals ist ein Tool in React, mit dem die Leistung von Websites gemessen und gemeldet wird Derzeit benötigen wir es jedoch nicht. Sie können es gerne zusammen mit seiner Importanweisung entfernen. Lassen Sie uns diese Datei auch im SRC-Ordner löschen , da wir keine Tests ausführen müssen Unser Fokus liegt auf Reac TS selbst. Weiter zur Abdo GS-Datei. Wir haben eine Funktion gefunden, die die GSX-Syntax zurückgibt In React nennen wir es nicht HTML-Syntax wird als GSX bezeichnet, was für Javascript-XML steht GSX kombiniert HTML und JavaScript, sodass Sie UI-Code schreiben können, der sowohl einfach zu lesen ist als auch von JavaScript unterstützt wird Die Abdo GS-Funktion ist eine Komponente. In React ist eine Komponente jetzt eine Funktion, als Baustein für Ihre Benutzeroberfläche fungiert Stellen Sie sich das so vor, als würden Sie ein Lego-Set zusammenbauen. Jeder Lego-Brack entspricht einer Komponente. Bei diesen Komponenten handelt es sich um wiederverwendbare Bausteine , die I und Funktionen kapseln und Ihren Code so modular und wartbar machen Nach dieser kurzen Einführung in das Lesen von GS-Dateien und -Strukturen wollen wir nun die Anwendung ausführen und sehen, die Anwendung ausführen und wie sie im Browser aussieht Führen Sie im Terminal den Befehl PM start aus. Dadurch wird das in Ihrer Package-DO-JSON-Datei und/oder im Skriptabschnitt mit dem Schlüssel start definierte Skript ausgeführt Package-DO-JSON-Datei und/oder im Skriptabschnitt mit dem Schlüssel start definierte Skript Dieses Skript verwendet normalerweise Tools wie Web Pack oder by Bolt Bundle und transpiriert Ihren Code Dann initiiert dieser Befehl einen Entwicklungsserver und lädt die App automatisch neu, wenn Sie Wenn die Package D JM-Datei für Sie neu ist, stellen Sie sich diese als Kontrollzentrum für die Abhängigkeiten Ihrer Projekte Es listet die externen Tools und Bibliotheken auf, die Ihre App benötigt. Diese Abhängigkeiten werden mithilfe von APM verwaltet, das wie ein digitales Warehouse für Code funktioniert Durch die Untersuchung der Paket-DSO-Datei können die Experten Ihr App-Setup verstehen und die Konsistenz sicherstellen Sobald Sie den Befehl ausgeführt haben, öffnet sich ein Browser-Tab mit der URL Local host 3.000 Ein lokaler Server, auf den nur Ihr Computer zugreifen kann. Sie werden sehen, wie sich das GS-Logo mit einigen Texten und Stilen dreht. Gehen wir nun zurück und entfernen die Importanweisung für das Rags-Logo. Entfernen Sie den gesamten GSX-Code in der App-Komponentenfunktion, sodass nur die Return-Anweisung übrig bleibt Löschen Sie außerdem die Logo-SVG-Datei aus dem SRC-Ordner, da sie nicht mehr benötigt in der Apo GS-Datei, Beachten Sie in der Apo GS-Datei, dass es sich bei der App-Komponente um eine Funktion handelt Jede Komponentenfunktion in AGS sollte mit einem Großbuchstaben beginnen , um sie von anderen JavaScript-Funktionen zu unterscheiden Jetzt sollte jede React-Komponente immer etwas GSX-Code zurückgeben Sie können GSX direkt als Dev-Element zurückgeben oder es in Klammern einschließen Wenn Sie nun mit HTML vertraut sind und einige Kenntnisse über die Gruppenfunktionen von Java haben, der Rest von nun in dieser Dv Lassen Sie uns nun in dieser Dv einen Text mit der Aufschrift Hallo VGS hinzufügen. Speichern Sie die Datei Es wird automatisch neu gerendert, da der MPM-Startbefehl immer noch läuft und Änderungen überwacht Wenn Sie Ihre Änderungen speichern, indem Sie Strg S drücken, werden die Aktualisierungen auf der Seite angezeigt Alle HTML-Elemente wurden durch dieses TIFF ersetzt. 4. Stile zu deinem React-Projekt hinzufügen: Wir haben behandelt , wie SSML-Code mithilfe der GSX-Syntax innerhalb der REAGS-Komponente gerendert mithilfe der GSX-Syntax innerhalb der REAGS-Komponente Aber was ist mit Stilen? In der Abdo gS-Datei werden Sie feststellen, dass wir eine CSS-Datei mit dem Namen Abdo CSS importieren , die sich im Ordner SRC befindet Diese Datei enthält regulären CSS-Code. Wir importieren den CSS-Code zwar nicht explizit in die Apto GS-Datei, wir teilen ReAGs mit, dass es beim Rendern der AbDogs-Komponente auf dem Client-Zeichen auch die CSS-Datei abrufen und als Stylesheet für die Komponente verwenden sollte CSS-Datei abrufen und als Stylesheet für die Komponente verwenden sollte Für den Zweck dieses Kurses werden wir den spezifischen CSS-Code jedoch nicht verwenden Fühlen Sie sich frei, ihn vollständig zu löschen. Wenn wir zur Index-DGS-Datei übergehen, importieren wir auch eine weitere CSS-Datei mit dem Namen index-CSS Beim Erstellen einer Komponente in IGS empfiehlt es sich, empfiehlt es die entsprechende CSS-Datei mit demselben Namen wie der Komponentendatei zu benennen In der Index-DSS-Datei finden Sie Stile für den Hauptteil und andere Elemente, die denen zuvor ähneln Wir werden diesen Code auch nicht benötigen. Mach weiter und lösche diese Datei. Nun zurück zur Abdo GS-Datei Wir werden hier einige GSX-Elemente vorstellen, aber wir werden uns nicht ausführlich mit CSS-Details befassen Schließlich ist dies ein AGS-Kurs, kein CSS-Kurs kein Um diesen Prozess zu optimieren, habe ich eine Abdo-CSS-Datei und eine CSS-Datei mit Indexpunkten vorbereitet , die Sie herunterladen und verwenden Sie finden sie im Abschnitt Ressourcen dieser Videovorlesung Nachdem Sie die neuen CSS-Dateien heruntergeladen haben, kopieren Sie den Code aus der entführten CSS-Datei und fügen Sie ihn hier Der Code umfasst Klassen wie Task Tracker, Container und andere sowie Medienabfragen, um sicherzustellen, dass unsere Anwendungen auf verschiedenen Bildschirmen reagieren Wiederholen Sie dasselbe für den Index der CSS-Datei. Fügen Sie den Code, den ich bereitgestellt habe, auch in diese Datei ein. Ich habe das Styling auf den Hauptteil und das Stammelement angewendet, das in der Indexpunkt-HTML-Datei vorhanden ist. Denken Sie daran, dass hier unser gesamter Code gerendert wird. Ich habe das Stammelement so eingestellt, dass es als Raster mit 12 Spalten und 12 Zeilen angezeigt wird. Ganz unten, ganz unten, finden Sie das Timing für die Scrollleiste unserer Webanwendung 5. CSS-Scoping in ReactJs: Bevor wir mit dem Aufbau dieses Projekts fortfahren, müssen wir über das sehr wichtige Konzept von React GS sprechen wichtige Konzept GSS-Scoping, das jeder Komponente ihren eigenen, privaten Gestaltungsspielraum gibt jeder Komponente ihren eigenen, privaten Es ist ein Mechanismus, der sicherstellt, dass die Stile, die Sie für eine Komponente definieren , eine andere Komponente beeinflussen und bewusst beeinflussen Wenn Sie CSS für eine bestimmte Komponente schreiben, orientieren sich diese Kacheln an den Grenzen dieser Komponente Das bedeutet, dass die Kacheln, die Sie auf eine Klasse innerhalb der CSS-Datei der Komponente anwenden, nur für Elemente innerhalb der gerenderten Ausgabe dieser Komponente Wir erreichen dieses Scoping, indem wir eine Technik verwenden, die als CSS-Module oder CSS in GS-Bibliotheken bezeichnet wird CSS-Module oder CSS in GS-Bibliotheken In unserem Fall arbeiten wir mit CSS-Modulen. Alle diese CSS-Dateien werden als CSS-Module bezeichnet. Wenn Sie die CSS-Datei in eine Komponente importieren, die Klassennamen in dieser CSS-Datei so transformiert, dass werden die Klassennamen in dieser CSS-Datei so transformiert, dass sie für diese Komponente eindeutig sind. Dies verhindert Klassen von Klassennamen und garantiert, dass Ihr Stil nicht in andere Teile Ihrer Anwendung Stellen Sie sich vor , Sie hätten separate Räume für verschiedene Aktivitäten in Ihrem Haus Jedes Zimmer hat seine eigenen Möbel und Dekorationen. In ähnlicher Weise verfügt die React-Komponente über einen eigenen Satz von Stilen, die nicht mit Stilen anderer Komponenten kollidieren. Dieser Ansatz macht Ihre Codebasis modularer, wartungsfreundlicher und anfälliger für Stilkonflikte Wir können Ihre Komponenten mit dem Wissen gestalten, dass ihre Stile isoliert sind und sich nicht versehentlich auf andere Teile Ihrer App auswirken Wenn Sie nun Komponenten mithilfe des Index zur DS-Datei zusammenführen , sorgt React dafür, dass der Zauber des Stils nicht verloren geht. Selbst wenn Sie eine allgemeine Stilregel in Index to TSS und eine spezifische Stilregel in Abduct React weiß, wie man sie verwaltet. Der spezifischere Stil übernimmt normalerweise die Führung. Stellen Sie sich das so vor, als hätten Sie einen Masterplan für Ihr Haus. Die Details in jedem Raum stehen nicht im Widerspruch zum Gesamtdesign. Sie also beim Eintauchen in React daran, dass jede Komponente ein Baustein mit eigener Persönlichkeit ist . Es wird mit einer eigenen JavaScript-Datei und einer eigenen CSS-Datei geliefert . Und raten Sie mal, reagieren Sie, stellen Sie sicher, dass sich Ihre Styles innerhalb der jeweiligen Komponente gut verhalten, sodass eine harmonische und organisierte Web-App entsteht. 6. CSS-Regeln in ReactJs verstehen: Hey, lassen Sie uns tiefer in React eintauchen, und es ist Styling-Magie Magier, du dekorierst ein Zimmer. Du fängst mit einem Basisstil an. Aber dann fügen Sie einige persönliche Details hinzu. React funktioniert mit seinem CSS auf ähnliche Weise. Nehmen wir an, Sie haben eine Regel im Index dos SS , die den Körperrand auf Null setzt. Aber warte. In Abdosi SS gibt es auch eine Regel , die den Körperabstand auf drei festlegt Wer gewinnt jetzt? Es ist wie ein freundschaftlicher Wettbewerb zwischen den beiden. In diesem Showdown folgt React einigen Regeln. Wenn zwei Regeln dieselbe Macht haben, nennen wir das Spezifität. Die Regel, die später kommt, gewinnt. Es ist, als würde man entscheiden, wer das letzte Stück Pizza bekommt. Wenn das Indexpunkt-CSS „Rand Null“ ruft und Abdo CSS in aller Ruhe „ Rand drei“ sagt, steht letzteres im React stellt sicher, dass die Details in seiner CSS-Komponente Vorrang vor globalen Stilen haben Denken Sie bei der Erstellung Ihrer React-App daran, ihre Komponente ihre eigenen Stilregeln mitbringt und React den Überblick behält, indem es entscheidet , welche Regeln im Konfliktfall gelten sollen Für ein reibungsloses Entwicklungserlebnis müssen Sie jedoch vermeiden, Stile direkt über einen Elementselektor zu HTML-Elementen hinzuzufügen , sondern stattdessen Klassen verwenden 7. JSX-Code für die Track-App schreiben und CSS-Kurse anwenden: Abdu TS-Datei, lass uns dieses Div durch ein anderes ersetzen. Gehen Sie außerdem in die Mitte des neuen Divs und geben Sie dann eine neue Zeile zurück Dieses neue Div wird als Hauptcontainer für unsere Tracer-App dienen Hauptcontainer für unsere Tracer-App Wir müssen eine bestimmte CSS-Klasse aus der Abdo-CSS-Datei namens Task Tracer-Container darauf anwenden der Abdo-CSS-Datei namens Task Tracer-Container Kopieren Sie den Klassennamen und wenden Sie innerhalb des öffnenden Tags des Divs in der Abdo-GS-Komponente des Divs in der Abdo-GS-Komponente die CSS-Klasse mithilfe des In normalem HTML heißt dieses Attribut einfach class. Aber in Ragas ist es der Klassenname, und denken Sie daran, die Groß-/Kleinschreibung Camel zu verwenden Nach dem Gleichheitszeichen, innerhalb von Doppelcodes hinter der Task-Tracker-Containerklasse Es ist ähnlich wie das Schreiben von normalem HTML, aber achten Sie auf den Attributnamen und verwenden Sie immer die Camel-Groß-/Kleinschreibung für Attribute wie Klassennamen Wenn Sie dies speichern, stellen Sie sicher, dass Sie die Anwendung starten , indem Sie NPM Start im Terminal ausführen Öffnen Sie dann den Browser und Sie werden in der Mitte der Seite einen ansprechenden blauen Container sehen in der Mitte der Seite einen ansprechenden blauen Container Dieser Container enthält die Tracker-App zusammen mit ihren Hauptfunktionen Sie werden auch die Scrollleiste im Stil auf der rechten Seite bemerken. Bitte beachten Sie, dass ich das Containerelement auf dem Bildschirm mit dem Chrome-Zoom-Tool leicht vergrößert Containerelement auf dem habe. Kehren wir nun zum Code zurück und fügen ein Aufgabenelement in diesen Container ein. Fügen Sie den folgenden GSS-Code in dieses Div ein. Das erste Div ist ein Task-Tracker-Elementcontainer, und das innere Div ist das eigentliche Task-Tracker-Element. Dadurch wird Aufgabe eins innerhalb des blauen Containers gerendert. Im weiteren Verlauf des Projekts erhalten Sie eine Liste mit Aufgabenelementen wie Aufgabe eins gefolgt von Aufgabe zwei. Wir möchten jedoch jedes Element manuell schreiben. Andernfalls verwenden wir Tender A steml Javascript und CSS. Stattdessen verwenden wir React, um die Liste dynamisch für uns zu rendern Wie das geht, werden wir in den kommenden Lektionen behandeln. Konzentrieren wir uns nun auf die Gestaltung der Hauptstruktur unseres Task-Trackers a. Nur ein kurzer Rest: Jedes Mal, wenn wir die App-Datei speichern, wird der Indexpunkt S erneut ausgeführt, wodurch die App-Komponente gerendert wird. Die endgültige Ausgabe wird innerhalb des Stammelements in der HTML-Datei mit dem Indexpunkt angezeigt . Diese Datei wird dem Client zugestellt, wenn er auf unseren Webserver zugreift , der in unserem Fall der lokale Host 3.000 ist. 8. Meistern der JSX-Struktur und Kommentare für klare und organisierte Komponenten: Die Task-Tracker-App benötigt jetzt ein Formular mit einem Eingabefeld. Dieses Formular ermöglicht es uns, mithilfe von Reacts dynamisch Aufgabenelemente zur Aufgabenliste hinzuzufügen . in der App-Komponente bleiben, werden die Eingaben aus dem Task-Tracker-Container übernommen. Um dies zu erreichen, fügen Sie ein neues DF hinzu und legen Sie dessen Klassennamen auf einen Aufgabencontainer fest. Platzieren Sie das Eingabefeld innerhalb des DF in einer Schaltfläche, um der Liste neue Elemente hinzuzufügen. Ich würde jedoch lieber das eigentliche Eingabeformular vom Task-Tracker-Container trennen und den Container ausschließlich der Elementliste widmen. Um das zu erreichen, mache ich diesen Tauchgang und positioniere ihn so über dem Container. Wenn nun ein Problem in einer React-Komponente auftritt, muss unbedingt sichergestellt werden, dass alle GSX-Elemente in einem einzigen Wrapper-Element eingeschlossen sind in einem einzigen Wrapper-Element eingeschlossen Diese Vorgehensweise hilft React dabei, eine organisierte Struktur aufrechtzuerhalten Stellen Sie sich das wie das Packen für eine Reise vor. Sie würden nicht viele lose Gegenstände tragen wollen. Sie würden alles in eine Tasche oder einen Koffer packen, um sie zusammenzuhalten In ähnlicher Weise wenden wir im Bereich React ein ähnliches Konzept Sie können Ihren GSS-Code in ein HTML-Element wie ein Div oder einen Abschnitt Oder sogar ein leeres Tag wie dieses. Dieses Wrapper-Element muss nicht viel tun. Sein Zweck besteht darin, die React-Anforderungen zu erfüllen. Zum Beispiel, wenn Ihre Komponente mehrere Elemente wie Überschriften, Absätze und Schaltflächen enthält und diese alle in einem einzigen T - oder Abschnittselement Dies entspricht der Richtlinie für ein Wrapper-Element, sodass React Ihre Komponentenstruktur effektiv verstehen kann Ihre Stellen Sie sich das so vor, als ob Sie React einen Container anbieten , in dem Ihre GSX-Elemente untergebracht werden können, sodass das System die Anordnung nachvollziehen Nehmen wir nun an, wir möchten Kommentare einfügen, um den Zweck seiner Entwicklung zu verdeutlichen Wenn Sie sich mit GSX befassen, werden Sie eine interessante Technik feststellen Der reguläre doppelte Schrägstrich für einzeilige oder mehrzeilige Commons funktioniert nicht Stattdessen verwenden wir eine Hebelmethode, die darin besteht, Ihren Kommentar in zwei geschweifte Klammern einzuschließen und darin die mehrzeilige Kommentarsyntax zu verwenden die mehrzeilige Bemerkenswerterweise können diese geschweiften Klammern auch JavaScript-Code enthalten, das Hinzufügen dynamischer Inhalte zu Ihrer App kennzeichnet Mit dynamischem Inhalt meine ich das Ändern des GSX-Codes auf der Grundlage bestimmter Bedingungen , ohne bestimmter Bedingungen Wir werden uns in den kommenden Lektionen damit befassen, wie das erreicht werden In diesem Abschnitt fügen Sie der Lektion einen Kommentar hinzu, um weiterzugeben, dass der folgende Abschnitt eine Aufgabe ist Kopieren Sie diesen Kommentar und fügen Sie ihn über dem Aufgabencontainer Ändern Sie den Namen in Aufgabencontainer. Und schließlich fügen Sie dem Aufgabenelementcontainer einen weiteren Kommentar hinzu und nennen Sie ihn Aufgabenelement. Auf diese Weise wird bei der Überprüfung unseres Codes auf jeden Fall Struktur und die Ziele der App erfasst können sich jederzeit an diese Anpassungen halten, um die Klarheit Ihrer Codestruktur zu verbessern Wenn Sie Fragen haben oder weitere Unterstützung benötigen, zögern Sie nicht, diese zu stellen. 9. UI-Elemente für die Komponentenentwicklung: Lassen Sie uns unser Aufgabenformular weiterentwickeln. Fügen Sie zunächst ein Eingabeelement mit einem selbstschließenden Tag hinzu. Setzen Sie das Typattribut auf Text, stellen Sie einen Platzhalter mit der Aufschrift „ Aufgabe“ bereit und weisen Sie das Klassennamenattribut Achten Sie darauf, in Attributnamen keine Buchstaben zu verwenden, da Reacgs-Attribute keine Steuern oder Unterbewertungen enthalten Der Klassenname für das Eingabeelement wird eine Aufgabeneingabe sein. Unter dem Eingabefeld fügen wir eine Anzeige mit der Aufschrift Patton dem Klassennamen Task Bt N hinzu. Die Abkürzung steht für Button Nachdem Sie dies gespeichert und sichergestellt haben, dass Ihre App ausgeführt wird, öffnen Sie den Browser Sie werden das Formular sehen, allerdings ohne Styling. Aber keine Sorge, wir werden uns sofort darum kümmern. Ich möchte einen wichtigen Punkt ansprechen. Um es mit React zu sagen: Organisation ist der Schlüssel. Stellen Sie sich das so vor, als würden Sie ein komplexes Puzzle zusammenstellen. Teil benötigt seinen vorgesehenen Platz , um ein vollständiges Bild zu erhalten. In ähnlicher Weise zerlegen wir in React unseren Code in kleinere Einheiten, die als Komponenten bezeichnet werden. Diese Komponenten sind wie unterschiedliche Bereiche Ihrer App, z. B. eine Kopfzeile, eine Seitenleiste oder eine Fußzeile Indem wir unseren Code auf diese Weise organisieren, schaffen wir eine Struktur , die leicht zu verstehen und zu verwalten ist und die wir sogar in verschiedenen Teilen unserer App verwenden können Denken Sie also daran, in React Ihren Code in Komponenten aufzuteilen und zu beobachten, Ihren Code in Komponenten aufzuteilen wie Ihre App wunderbar zusammenpasst Innerhalb des koreanischen Codes können wir das Aufgabenformular vom Rest trennen und es in eine eigenständige React-Komponente umwandeln Erstellen Sie zunächst eine neue Falttür im SRC-Verzeichnis und nennen Sie sie Komponenten Die Konvention besteht darin, die Namenskomponenten zu verwenden , da sie beschreibend jedoch auch einen anderen Namen wählen, wenn Sie dies bevorzugen innerhalb der Komponenten, klappen Sie die Tür zusammen und erstellen Sie eine Aufgabe mit einem Dateinamen im Format GSX Beachten Sie, dass Sie entweder die GSX- oder die GS-Erweiterung verwenden können. Aber ich verwende hier GSX, um die Verwendungen der GSX-Syntax klar zu kennzeichnen Beim Erstellen einer React-Komponente ist es wichtig, die React-Bibliothek am Anfang der Komponentendatei zu importieren die React-Bibliothek am Anfang der Auch wenn Sie Reacting nicht direkt jede Komponente verwenden, ist dies erforderlich, da GSX in Java-Scrat-Code mit Verweisen auf React transpiliert wird in Java-Scrat-Code mit Deklarieren Sie nun als Nächstes die Funktionskomponente task f. Es hat sich bewährt, Komponentennamen mit einem Apocase-Buchstaben zu beginnen Komponentennamen mit einem Diese Vorgehensweise unterscheidet benutzerdefinierte Komponenten von HTML-Elementen und verbessert die Lesbarkeit des Definieren Sie die Funktion mithilfe der Pfeilsyntax. Dies stellt eine funktionale Komponente dar, eine einfachere Methode zur Erstellung von Komponenten als der ältere klassenbasierte Ansatz Exportieren Sie nun die Funktionskomponente, um sie für die Verwendung in anderen Komponenten und Dateien zugänglich zu machen für die Verwendung in anderen Komponenten und Dateien zugänglich Diese Komponente gibt den GSX-Code für das Aufgabenformular zurück , das wir ursprünglich in der Abdo GS-Komponente geschrieben haben. Und das ist alles. Speichern Sie jetzt alles und verwenden Sie die Aufgabenformularkomponente in der App-Komponente, die zuerst aus dem Komponentenordner importiert wurde. Auswahl der Aufgabenformulardatei. Integrieren Sie dann die Komponente wie jedes andere Element mit dem selbstschließenden Tag in den GSX-Code jedes andere Element mit dem selbstschließenden Tag in den Beim Speichern der Abdo GS-Datei werden Sie feststellen, dass sich im Browser nichts ändert Dies deutet darauf hin, dass wir den GSX-Code des Aufgabenformulars erfolgreich in eine eigenständige Komponente gekapselt GSX-Code des Aufgabenformulars erfolgreich in Wenden wir nun Siling auf die Aufgabenformularkomponente an. Erstellen Sie eine CSS-Datei mit dem Namen Task Form Dot CSS, die Sie im Abschnitt Videoressourcen finden Laden Sie sie herunter und fügen Sie den CSS-Code aus dieser Datei hier ein. Im CSS für das Aufgabenformular definieren wir einen Aufgabencontainer mit blauer Hintergrundfarbe und Medienabfragen, um die Reaktionsfähigkeit zu Um sicherzustellen, dass sich diese Kacheln auf den GSS-Code innerhalb der Aufgabenformularkomponente auswirken den GSS-Code innerhalb der Aufgabenformularkomponente Wir müssen die CSS-Datei hineinportieren. Nun ist es eine gute Praxis, diesen Port zum ersten Objekt in der Datei zu machen . Da wir die CSS-Datei genauso benennen wie die Komponente des Aufgabenformulars, vergessen Sie nicht, die CSS-Erweiterung mit Punkt anzugeben, damit AGS weiß, welche Datei entportiert werden muss Nach dem Speichern wird das Aufgabenformular im Browser wunderschön angezeigt Lassen Sie uns nun damit fortfahren, das Aufgabenelement als eigene Komponente zu erstellen . Erstellen Sie eine neue Datei mit dem Namen Task Item Dot CSX. Beginnen Sie wie immer mit einem Großbuchstaben für den Namen der Datei. Importieren Sie in dieser Datei zunächst das React-Paket aus React und deklarieren Sie dann ein Task-Element mit Funktionsnamen mithilfe der Pfeilsyntax Denken Sie daran, die Funktion unten auf der Seite zu exportieren, entweder als Standardexport mit dem Schlüsselwort default oder als Objekt, das die Task-Item-Komponente als Eigenschaft enthält . In diesem Fall müssen wir beim Import einer Komponente, die als Objekt exportiert wurde, einer Komponente, die als Objekt exportiert wurde, die Syntax zur Objektdestrukturierung verwenden Kopieren Sie als Nächstes den GSX-Code des Aufgabenelements aus der Abdo GS-Komponente und geben Sie ihn als GSX-Code für die Aufgabenelementkomponente zurück als GSX-Code für die Da jede Komponente über ein eigenes CSS-Modul verfügen sollte, erstellen Sie eine neue Datei mit dem Namen Task Item in der CSS-Datei Fügen Sie in der CSS-Datei den Code aus dem Ressourcenbereich dieses Videos ein. Fügen Sie dann die Punkt-CSS-Datei für das Aufgabenelement in die Komponente ein. Sie oben in der AbDogs-Datei Ersetzen Sie oben in der AbDogs-Datei den vorhandenen GSX-Code durch die Aufgabenelementkomponente. Sie können die VS-Code-Unterstützung verwenden , um ihn zu importieren oder den Port manuell hinzuzufügen Machen Sie dies nun endlich zu einer selbstschließenden Komponente und speichern Sie die AbDogs-Datei Im Browser sehen Sie das Aufgabenelement mit weißem Hintergrund und einem Hover-Effekt , der die Hintergrundfarbe hellgrau färbt Durch die Verwendung des Komponentenkonzepts in IGS verbessern Sie den Entwicklungsprozess und erstellen ein besser organisiertes und leistungsfähigeres Projekt Hier benötigen wir zum Beispiel eine Schaltfläche zum Löschen, fügen ein Button-Element mit dem Text del, der Abkürzung für Löschen, und den Klassennamen des Task Tracker-Elements Del hinzu. Nach dem Speichern erscheint der untere Teil mit einem Hintergrund. Wenn Sie die Aufgabenelementkomponente nach oben bewegen, wird sie erneut gerendert, wodurch auch die Komponente neu gerendert wird. Die endgültige Ausgabe wird innerhalb des Stammelements in der HTML-Datei mit Indexpunkt im öffentlichen Ordner angezeigt . 10. Erste Schritte mit dem State Management: Den useState Hook in React erkunden: Bevor wir mit der Erstellung der Funktion zum Löschen von Aufgabenelementen fortfahren , müssen wir uns mit der Erstellung von Aufgabenelementen mithilfe des Aufgabenformulars befassen Dabei wird der Aufgabeninhalt aus dem Eingabefeld übergeben und der Schaltfläche Hinzufügen dem Element zur beim Drücken der Schaltfläche Hinzufügen dem Element zur Aufgabenliste hinzugefügt, sodass er dynamisch in der Liste angezeigt wird. Um diese Funktionalität zu implementieren, entwickeln wir eine Funktion innerhalb der Aufgabenformularkomponente. Denken Sie daran, dass eine Komponente in React GS im Wesentlichen eine Funktion ist, in die wir die Anwendungslogik vor der Return-Anweisung einbetten können . Diese Logik könnte das Abrufen von Daten von einer API oder das Ausführen bestimmter Aufgaben beinhalten , wonach wir den GSX-Code zurückgeben Lassen Sie uns die Funktion als Aufgabenelement bezeichnen und die Pfeilfunktionssyntax verwenden Innerhalb der Funktion müssen wir den Eingabewert extrahieren, der den Aufgabeninhalt darstellt, und ihn in einer Variablen speichern , die von der gesamten Anwendung gemeinsam genutzt werden kann . Um den aktuellen Status des Eingabefeldes zu verfolgen und zu ermitteln, verwenden wir einen React-Hook. Hooks sind von React bereitgestellte Funktionen, mit denen Sie mit verschiedenen Aspekten des Komponentenstatus und des Lebenszyklus interagieren können. Betrachte sie als eine Möglichkeit, React mitzuteilen, dass ich etwas Bestimmtes tun möchte wenn sich dieser Teil meiner Komponente ändert. Wenn Sie beispielsweise den Überblick über Eingabedaten behalten möchten , die sich im Laufe der Zeit ändern können, würden Sie den U-State-Hook verwenden. Es ist, als würde man einen Marker auf ein Puzzleteil setzen, das sich bewegt. Immer wenn sich dieses Teil ändert, Sie von React aufgefordert, die Ansicht zu aktualisieren Importieren Sie den Use-State-Hook aus dem React-Paket, und jetzt gibt dieser Hook ein Array mit zwei Elementen Das erste Element steht für den letzten Status der verfolgten Daten. In unserem Fall der Eingabewert. Das zweite Element ist eine Funktion, mit der der Status der Daten aktualisiert wird. Wir nennen es Set Input Value und es sollte immer mit Set beginnen. Wenn Sie beispielsweise eine Benutzernamenvariable verfolgen, würden Sie diese Funktion set user name nennen. Um den Eingabewert zu aktualisieren wenn sich der Wert des Eingabefeldes ändert, verwenden Sie das Änderungsattribut. Setze es auf ein offenes Ende, das C Brass schließt , um Gescpt-Code innerhalb des GSS-Codes zu schreiben Diese Funktion verwendet ein Ereignisargument, das wir verwendet haben, um den Status des Eingabewerts mithilfe der Funktion „Eingabewert setzen“ zu aktualisieren Eingabewerts mithilfe der Funktion „Eingabewert setzen“ Benennen Sie das Argument aus Gründen der Übersichtlichkeit in Event um. Greifen Sie vom Ereignis aus auf die Zieleigenschaft zu, die den Eingabewert enthält. Das Änderungsattribut aktualisiert den Eingabewert jedes Mal dem Eingabefeld ein Zeichen hinzugefügt wird. Wenn der eingestellte Eingabewert aufgerufen wird, wird die Aufgabenformularkomponente erneut gerendert. Dies verdeutlicht, warum der U-State-Hook wertvoll ist. Er löst ein erneutes Rendern der Komponente aus , wenn sich der Status ändert. Als Nächstes führen wir die Funktion at task item aus, um den Eingabewert zu speichern und der Elementliste hinzuzufügen. Vorerst protokolliert die Konsole den Eingabewert. Diese Funktion wird ausgeführt, wenn Sie auf die Anzeigenschaltfläche klicken. Wir müssen mithilfe des On-Click-Attributs auf das Klickereignis warten. Platzieren Sie den Funktionsnamen in den geschweiften Klammern und rufen Sie ihn hier nicht Geben Sie stattdessen einen Verweis auf den Funktionsnamen an. Wenn auf den unteren Rand geklickt wird, wird die Funktion aufgerufen Sie können den direkten Verweis verwenden oder eine Pfeilfunktion definieren , um die Funktion at task item und side aufzurufen Funktion at task item und side Unabhängig vom Ansatz bleibt das Konzept dasselbe. Verwenden Sie für saubereren Code die direkte Referenz wie folgt. Nachdem Sie die Änderungen gespeichert haben, öffnen Sie den Browser, öffnen Sie das Inspektorfenster und gehen Sie zur Registerkarte Konsole Lassen Sie uns die Konsolenregisterkarte so anordnen, dass sie besser sichtbar nun in der Anwendung die erste Eingabeaufgabe und klicken Sie auf das AT-Muster In der Elementliste passiert zwar nichts, aber der Eingabewert wird in der Konsole gedruckt. Dies liegt daran, dass ein Aufgabenelement immer dann ausgeführt wird , wenn auf das Apuem geklickt wird 11. Komponentenkommunikation verstehen: Die Verwendung von Requisiten in React meistern: Jetzt müssen wir jedes neue Aufgabenelement in einem Array in einem anderen Verwendungsstatus speichern jedes neue Aufgabenelement in einem Array in einem anderen Verwendungsstatus Wir werden diesen Nutzungsstatus innerhalb der App-Komponente definieren , da wir das Array von Elementen verwenden müssen , um die Liste der Elemente im Browser dynamisch zu rendern. Das Wichtigste zuerst. Fügen wir hier den Nutzungsstatus hinzu und rufen ihn auf. Wir müssen auch das React-Paket importieren und die Syntax zur Objektdestrukturierung verwenden , um den Ue-State-Hook aus React zu importieren Dieser US-Bundesstaat wird ein Array zurückgeben. Das erste Element dieses Arrays steht für das Array von Elementen. Wir können es Aufgabenelemente nennen. Die zweite ist die Set-Funktion. Wird für die Aktualisierung der Artikelanordnung verantwortlich sein. Der knifflige Teil besteht nun darin , dass wir die gesetzten Aufgabenelemente innerhalb des Aufgabenformulars aufrufen müssen , wann immer die Funktion at task item ausgeführt wird und das neu erstellte Aufgabenelement im Elementarray speichern müssen. Aber wie erhalten wir Zugriff auf die Funktion „Aufgabenelemente festlegen “, wenn wir sie bereits in der App-Komponente definiert haben? Auch hier bietet React eine überwältigende Lösung. Wir können in React etwas verwenden, das als Requisiten bezeichnet wird, was einfach ein Funktionsargument Auf diese Weise kann eine Funktion normalerweise auf eine andere Funktion oder Variable zugreifen andere Funktion oder Variable indem sie sie als Argument übergibt Funktionsargumente sind für uns nichts Neues , es sei denn, Sie kennen sich mit Java-Skript nicht aus. Was uns neu ist, ist die Art und Weise, wie React die Requisiten an die Komponentenfunktion weitergibt Wenn Sie die gesetzten Aufgabenelemente an die Aufgabenformularkomponente übergeben möchten , müssen wir ein Attribut hinzufügen und es als Set Task Items bezeichnen und es der eigentlichen Funktion „Aufgabenelemente setzen“ zuordnen Auf diese Weise haben wir innerhalb der Aufgabenformularkomponente über das Objektargument Requisiten Zugriff darauf der Aufgabenformularkomponente über das Objektargument Requisiten Denken Sie daran, dass seine Eigenschaft innerhalb des Prop-Objekts als Requisite bezeichnet wird und es sich nur um einen Verweis auf Wenn wir die Funktion „ Aufgabenelemente festlegen“ aufrufen, rufen wir die Funktion „Aufgabenelemente festlegen“ tatsächlich innerhalb der App-Komponente Das hat nichts mit React zu tun. So funktioniert Javascript einfach. Wir werden den Eingabewert, der ein einfacher Text für die Aufgabenelemente ist, nicht speichern , weil wir möchten, dass die Aufgabenelemente ein Array sind. Wir werden das tun, indem wir diesen Eingabewert als neues Element in das Array der Aufgabenelemente übertragen. Aber zuerst müssen wir Zugriff auf das Aufgabenelemente-Array haben . Wir werden es als Requisite weitergeben. Fügen Sie einen neuen Attributnamen für Aufgabenelemente hinzu. Übrigens können Sie die Requisite beliebig benennen, aber achten Sie darauf, sie so zu benennen, dass sie sinnvoll ist, und setzen Sie sie der richtigen Variablen oder Funktion gleich der richtigen Variablen oder Funktion In der Aufgabenformularkomponente verwenden wir nun das Objekt prop, um auf das Array mit den Aufgabenelementen zuzugreifen Dann können wir die JavaScript-Methode namens push verwenden, um das neu erstellte Element zum Array hinzuzufügen Ich bevorzuge einen anderen Ansatz, bei dem ein Array übergeben und dann drei Punkte ohne Leerzeichen hinzugefügt werden, dann drei Punkte ohne Leerzeichen hinzugefügt gefolgt von der Array-Requisite für die Aufgabenelemente Dies wird als Spread-Operator bezeichnet , der alle Array-Elemente innerhalb des neuen Arrays verteilt Dann können wir ein neues Element hinzufügen, indem wir ein Komma hinzufügen und den Status des Eingabewerts übergeben. Wenn wir auf diese Schaltfläche klicken, wird diese Funktion ausgeführt, was dazu führt, dass die eingestellten Aufgabenelemente mit einem neuen Array aktualisiert einem neuen Array das alle Aufgabenelemente zusammen mit dem neu erstellten enthält. Wenn die Anwendung zum ersten Mal gestartet wird, hat das Array der Aufgabenelemente den Wert Null. In Javascript können wir keine Array-Operationen mit einem Nullwert verteilen oder ausführen . Wir können dieses Szenario vermeiden, indem den Anfangswert des Status auf ein leeres Array setzen. Die p-Komponente wird jedes Mal neu gerendert der Status der festgelegten Aufgabenelemente von der Aufgabenformularkomponente aus aufgerufen wird. Kann das beobachten, indem die Konsole das Array der Aufgabenelemente in der App-Komponente protokolliert , dann speichert und den Browser öffnet. Lassen Sie mich die Konsole und das Aufgabenformular bei Aufgabe eins löschen und auf das untere Feld klicken. Sie werden sehen, dass das Array mit den Aufgabenelementen auf der Konsole gedruckt wird. Wenn Sie einen Status in einer React-Komponente in einer Konsole protokollieren, wird er möglicherweise zweimal hintereinander ausgelöst, wenn der Status des Reacts-Patching-Mechanismus geändert Es kann mehrere Statusaktualisierungen gruppieren, sodass das Protokoll für seine Pfade ausgelöst Dies ist ein normales Verhalten zur Optimierung des Renderings und der Aktualisierungen. Es ist wichtig zu beachten, dass die genaue Anzahl der Protokolle nicht garantiert werden kann und je nach Reaktion und internen Prozessen variieren kann . 12. Dynamisches Rendering: Aufbau responsiver Oberflächen in React: In Ordnung. Lassen Sie uns nicht einfach das Array mit den Aufgabenelementen auf der Konsole ausdrucken. Stattdessen möchten wir jedes Element aus dem Array nehmen, es in der Aufgabenverfolgung oder im Container anzeigen und gleichzeitig die Elementliste des Browsers aktualisieren, und gleichzeitig die Elementliste des Browsers aktualisieren damit sie dem Status des Aufgabenelementarrays entspricht. Immer wenn sich der Status ändert, sollten die Liste und der GSS-Code ebenfalls entsprechend aktualisiert werden Um dies zu erreichen, setzen wir die Aufgabenelementkomponente in doppelte geschweifte Klammern Das tun wir, weil wir den Java-Skriptcode in diesen Klammern verwenden Java-Skriptcode in diesen Klammern Wir werden die Map-Methode verwenden, eine Hand-Gray-Funktion in JavaScript Mit Map können wir Array der Aufgabenelemente durchsuchen und mit jedem Element einzeln interagieren. Innerhalb der Maps-Callback-Funktion erhalten wir Zugriff auf jedes Aufgabenelement. Auf diese Weise können wir eine Komponenteninstanz für ein Aufgabenelement mit bestimmten Daten erstellen eine Komponenteninstanz für ein Aufgabenelement mit bestimmten Daten Diese dynamische Rendering-Strategie bietet uns eine Reihe von Komponenten. Es stellt eine einzigartige Aufgabe aus dem Array dar. Was die mathematische Funktion erzeugt, ist ein Array von g Sx Elementen, denen jedes einem Element im ursprünglichen Datenarray entspricht. Wenn wir das speichern und einen Blick in den Browser werfen, werden wir sehen, dass zwei Aufgabenelemente in der Liste gerendert wurden Das liegt daran, dass unser Array nur zwei Elemente hat. Wenn wir nun ein weiteres Element über das Aufgabenformular hinzufügen, wird ein neues Element dynamisch am Ende der Liste angezeigt. Der Inhalt dieser Elemente ist jedoch noch nicht dynamisch. Um sie dynamisch zu machen, verwenden wir Requisiten und übergeben das Aufgabenelement an die Aufgabenkomponente Wir werden das durch die Task-Requisite ersetzen. Wenn ich es einfach so schreibe, wird es als Klartext angezeigt Aber wenn ich es mit einem doppelten Relate-Brass umschließe, wird es als Javascript-Variable behandelt und durch ihren tatsächlichen Wert ersetzt Jedes Mal, wenn ein neues Element erstellt wird, wird es mit seinem eindeutigen Wert in die Liste aufgenommen alles dank der Map-Funktion, die eine Reihe von Komponentenelementen für Aufgabenelemente generiert . Immer wenn sich das Array der Aufgabenelemente ändert, wird die Komponente erneut ausgeführt die Map-Funktion so ausgelöst, dass sie erneut ausgeführt und das Array von Elementen generiert wird Jedes Listenelement wird als untergeordnetes Element bezeichnet. Wenn wir nun die Aufgabenliste löschen, indem wir die Seite neu laden und versuchen, ein neues Element hinzuzufügen, stellen Sie möglicherweise fest, dass in der Konsole ein oder angezeigt wird, das Ihnen mitteilt , dass jeder untergeordnete Analyst eine eigene Schlüsselresquisite benötigt So können wir das Problem beheben. Wir können der Task-Item-Komponente die Schlüsseleigenschaft als Attribut hinzufügen Task-Item-Komponente die Schlüsseleigenschaft als Attribut Es sollte ein eindeutiger Schlüssel sein, entweder eine Zahl oder eine Zeichenfolge Kann den Indexparameter der Map-Funktion verwenden, wodurch jedem Element ein anderer Schlüssel zugewiesen wird als den anderen. Wenn Sie in React dynamisch eine Liste von Komponenten mithilfe der Map-Funktion oder einer anderen Methode rendern , benötigt jede Komponente einen eindeutigen Bezeichner Hier kommt das wichtigste Requisit ins Spiel. Die Hauptrequisite ist ein spezielles Attribut, das Sie jeder dynamisch gerenderten Komponente zuordnen Es ist eine Aufgabe, React dabei zu helfen, jede Komponente einzigartig und effizient zu unterscheiden jede Komponente einzigartig und effizient zu Dies ist besonders nützlich , wenn Änderungen an der Liste vorgenommen werden, z. B. beim Hinzufügen, Entfernen oder Neuanordnen Wenn Sie Änderungen an der Liste der Elemente vornehmen, stützt sich React auf die Schlüsselresquisite, um herauszufinden, welche Komponenten geändert wurden, hinzugefügt werden müssen oder entfernt werden sollten Dieser intelligente Ansatz reduziert unnötige Updates und macht den gesamten Prozess reibungsloser und schneller 13. Aufgaben und dynamische Interaktion in React Web App: Nach dem Rendern von Elementen in der Task-Tracker-Containerliste ist es an der Zeit, an der Aufgabenelementkomponente zu arbeiten und das Löschen eines Elements aus der Liste mit dieser Schaltfläche zu ermöglichen . Mit dieser Schaltfläche wird nun ein Element aus dem Aufgabenelementarray gelöscht , da wir dieses Array verwenden , um die Aufgabenelement-Nester in der App-Komponente zu rendern die Aufgabenelement-Nester in der App-Komponente Wir müssen die Funktion definieren, die das Löschen des Elements in der App-Komponente übernimmt Benennen Sie hier die Funktion und löschen Sie das Element anhand der ID. Verwenden Sie eine Funktion außerhalb der Funktion , die ein ID-Argument akzeptiert. Darin werden wir das Array und den Status der Aufgabenelemente mithilfe der Methode set task items aktualisieren . Lassen Sie uns zunächst die neue Version des Arrays vorbereiten. Lassen Sie uns eine Konstante als Namen für neue Aufgabenelemente deklarieren und sie dem Aufgabenelemente-Array gleichsetzen. Wir verwenden die Filtermethode, um durch die Array-Elemente zu iterieren und nur Elemente zurückzugeben, deren ID nicht der ID des Elements entspricht, das wir löschen möchten Die Filterfunktion gibt ein neues Array zurück , das das gelöschte Element nicht enthält Wir werden das neue Aufgabenelementarray als neuen Status des Aufgabenelementarrays übergeben . Jetzt müssen wir die Löschfunktion ausführen, wenn wir auf diese Schaltfläche zum Löschen klicken Aufgabenelementkomponente auf diese Schaltfläche zum Löschen klicken. Wir werden die Funktion Delete Item by D als Requisite übergeben. Dann warten wir hier drinnen auf das Klickereignis auf diese Schaltfläche und führen das Löschen des Elements mit einer D-Funktion Anstatt jedes Mal, wenn wir auf eine bestimmte Requisite zugreifen wollen , müssen wir Requisiten mit einem Punkt auf irgendwas schreiben Ich würde lieber die Objektdestrukturierung verwenden um die Requisiten aus dem Requisitenobjekt zu extrahieren Weise wird klar, was diese Komponente als Requisiten akzeptiert, und sie ist auf diese Weise besser organisiert Wenn wir das jetzt speichern und versuchen, ein Objekt zu löschen, passiert nichts, weil wir die Element-ID nicht an die Funktion „Element nach ID löschen “ übergeben die Funktion „Element nach ID löschen Wie Sie wissen, können wir die Funktion nicht direkt auf diese Weise aufrufen , da wir einen Verweis auf die Funktion übergeben müssen , ohne sie Andernfalls wird sie jedes Mal aufgerufen , wenn die Komponente gerendert Es gibt zwei Möglichkeiten , die ID zu übergeben. Erstens können wir die Bandfunktion verwenden, die diesen Kontext akzeptiert. Nun, da sich dieses Schlüsselwort in Java-Skript auf das Objekt bezieht , zu dem die entsprechende Funktion oder Methode gehört Es stellt den Kontext dar , in dem die Funktion aufgerufen wird und hilft Ihnen beim Zugriff auf Eigenschaften und Methoden dieses Objekts Das zweite Argument werden die eigentlichen Funktionsargumente sein, was in unserem Fall nur das Aufgabenelement ist. Dies ist eine sehr komplizierte Art, eine einfache Sache zu tun. Ich bevorzuge es, eine RO-Funktion wie diese hinzuzufügen , genau wie wir es zuvor getan haben, und die Funktion „Element nach ID löschen“ aufzurufen und die Aufgaben-ID zu übergeben . Derzeit haben wir noch keine ID in der Task-Requisite, weil wir Aufgabenelement als Klartext speichern Wir müssen dies aktualisieren, bevor wir fortfahren, indem wir es durch ein Objekt ersetzen , dessen ID-Eigenschaft auf einen dynamischen Wert gesetzt Bei diesem dynamischen Wert handelt es sich um eine einfache Operation, bei der es sich um die Länge des Arrays der Aufgabenelemente plus eins handelt. Dann können wir der zweiten Eigenschaft den Namen Text und ihren Wert auf den Eingabewert setzen. Auf diese Weise können wir Aufgabenelemente anhand ihrer IDs aus dem Array löschen . Jetzt befindet sich der Inhalt des Aufgabenelements in der Texteigenschaft. Stellen Sie sicher, dass Sie das aktualisieren. Speichern wir das jetzt und im Browser. Wir müssen neu laden , weil wir die Form der Aufgabenelemente aktualisiert haben die Form der Aufgabenelemente aktualisiert Fügen wir nun Aufgabe eins und dann Aufgabe zwei hinzu. Bevor wir die Elemente löschen, wir zum Code in der App-Komponente zurück und protokollieren die Element-ID in der Konsole , um einen genaueren Überblick darüber zu haben , was hinter den Kulissen passiert. Lassen Sie uns Aufgabe Nummer eins löschen. Sie werden feststellen, dass Nummer eins auf der Konsole gedruckt wurde. Wenn wir Aufgabe Nummer zwei löschen, wird die Nummer zwei in der Konsole gedruckt. Das zeigt Ihnen nun, wie flexibel und dynamisch Ya sein kann, was Entwicklern die Möglichkeit eröffnet, spannende und interaktive Web-Apps zu entwickeln. nun im Aufgabenformular Lassen Sie uns nun im Aufgabenformular mithilfe der Objektdestrukturierung die Requisiten aus dem Argument Requisiten extrahieren mithilfe der Objektdestrukturierung die Requisiten aus dem Argument Requisiten und die Komponente aktualisieren Jetzt möchte ich hier etwas Wichtiges hervorheben. Wenn wir versuchen, der Aufgabe ein Element hinzuzufügen, funktioniert es einwandfrei. Wenn wir das Feld Restanzeige jedoch leer lassen, wird der Artikel zur Artikelliste hinzugefügt. Wir müssen verhindern , dass das passiert. Und das, indem wir der Funktion „Aufgabenelement anzeigen “ einen Prüfblock Funktion „Aufgabenelement bevor wir den Status der Umfrage zu den Aufgabenelementen aktualisieren. Wenn der Eingabewert einer leeren Zeichenfolge entspricht, wird die Ausführung des Codes mit der Rückgabeanweisung wie folgt blockiert. Jetzt wird es gut funktionieren, wenn wir eine leere Zeichenfolge übergeben. Aber wenn wir das Leerzeichen als Wert hinzufügen und die At-Taste drücken, wird das Objekt erstellt können wir auch einfach verhindern, indem wir die Trim-Funktion verwenden, die alle Leerzeichen aus einer Zeichenfolge entfernt Wenn der Eingabewert nur ein Leerzeichen enthält, der Trim-Wert eine leere Zeichenfolge zurück. wird diese If-Anweisungsbedingung erfüllt, was dazu führt, dass die Ausführung des Codes blockiert und die Erstellung leerer Aufgabenelemente verhindert wird dass die Ausführung des Codes blockiert und . In den meisten modernen Web-Apps wie Google müssen wir jetzt nicht mehr auf die Suchschaltfläche klicken , um die Suche auszuführen. Wir können einfach die Eingabetaste drücken und es wird die gleiche Arbeit machen. In unserer Anwendung können wir dasselbe tun , indem wir auf das Schlüsselwortereignis warten. Wenn die Enter-Taste gedrückt wird, führen wir die Aufgabenelementfunktion A aus. Wir können auf dieses Ereignis im Container-Element warten , indem wir ein Key-Down-Attribut verwenden . Sie können auf jedem GSX-Element auf das Ereignis warten, aber es ist immer besser, es dem übergeordneten Element zuzuordnen aber es ist immer besser, es dem übergeordneten Element zuzuordnen Dieses Attribut erfordert einen Callback , der ein Ereignis akzeptiert Wir können dieses Ereignis verwenden, um nach dem Namen der Taste zu suchen , die vom Benutzer gedrückt wurde Wenn es der Eingabe von zehn mit dem javascylogischen Operator end entspricht , können wir das Aufgabenelement at ausführen Lassen Sie uns das jetzt sagen und im Browser testen. Bei Aufgabe Nummer drei drücken Sie die Eingabetaste auf Ihrer Tastatur. Da hast du's. So ist es viel einfacher. Jetzt möchten wir unserer Aufgabenformularkomponente eine weitere Verbesserung hinzufügen . Ich möchte das Eingabefeld löschen wenn wir ein neues Element hinzufügen, indem die At-Taste oder die Enter-Taste auf der Tastatur drücken. Dieser ist auch super einfach. Wir müssen nur hierher kommen, nachdem Array mit den Aufgabenelementen aktualisiert haben, und dann den Eingabewert mit der Funktion „Eingabewert festlegen“ aktualisieren den Eingabewert mit der Funktion „Eingabewert und auf eine leere Zeichenfolge setzen. Wenn wir das im Browser testen, wird es nicht funktionieren. Aber wenn wir den Put-Wert-Status hier protokollieren und im Browser mit der Eingabe beginnen, werden Sie sehen, dass sich der Status des Put-Werts jedes Mal ändert, wenn wir etwas eingeben. Achten Sie darauf, wenn ich die ER-Taste drücke, wir werden sehen, dass der letzte Status des Eingabewerts leer ist Es funktioniert tatsächlich, hat aber keine Auswirkungen auf das Eingabefeld, da wir den Status des Eingabewerts nicht mit dem tatsächlichen Wert der Eingabe verbunden dem tatsächlichen Wert der Eingabe Dazu müssen wir den Attributwert des Eingabeelements so einstellen, dass er dem Status des Eingabewerts entspricht. Wenn wir nun versuchen, eine neue Aufgabe zu erstellen und dann die Eingabetaste oder den Abuton drücken, wird das Eingabefeld gelöscht 14. Eine dynamische Checkbox mit visuellen Indikationen in React erstellen: Beginn des Löschens von Aufgabenelementen. Wir müssen eine Schaltfläche erstellen, die als Kontrollkästchen fungiert, um ein bestimmtes Aufgabenelement als erledigt zu markieren. Dazu fügen wir ein Span-Element hinzu, das als Schaltfläche dient. Ja, das können wir erreichen, weil wir in React und Java-Skript im Allgemeinen React und Java-Skript im Allgemeinen auf das Klickereignis eines beliebigen Elements warten können, sodass wir dieses Element in eine funktionale Schaltfläche verwandeln können. Fügen wir nun das Wort Ende hinzu. für den Klassennamen Verwenden Sie für den Klassennamen das Häkchen Klasse. Wenn Sie auf dieses Span-Element klicken, wird der Status dieses Task-Elements auf „Aktiviert“ gesetzt. Wir machen das mit dem State-Hook. Stellen Sie sicher, dass Sie es oben in dieser Datei portieren. Dann nennen wir diesen Status ist geprüft und das zweite Argument heißt Sets checked function. Wir hören uns das Klickereignis für das Span-Element an und führen eine Funktion namens handle check box change aus. Diese Funktion existiert noch nicht, also müssen wir sie definieren. Nebenbei können wir den Status use checked auf true aktualisieren und den Anfangsstatus auf force setzen. In diesem Fall kann der Benutzer das Aufgabenelement als erledigt markieren. Wenn sie ihre Meinung ändern, können sie den Status „ Leichtigkeit geprüft“ jedoch nicht aktualisieren. Wie jedes Mal, wenn diese Funktion ausgeführt wird, wird der Status „ Ease-Checked“ auf „true“ gesetzt. Wir wollen nicht, dass das passiert. Wir möchten also, dass unsere fertige Taste als Umschalter fungiert, wie ein normales Kontrollkästchen, bei dem Sie durch Drücken derselben Taste ein oder und dasselbe Häkchen setzen können durch Drücken derselben Taste ein oder und dasselbe Häkchen Um das zu erreichen, können wir den Statuswert aktualisieren, indem wir ein Ausrufezeichen hinzufügen und die Konstante Ease Checked übergeben Diese slosikalische Operation gibt immer den entgegengesetzten Wert des koreanischen Staates zurück Wenn es wahr ist, wird es falsch, und wenn es aktiviert ist, wird es Wenn wir jetzt versuchen, das fertige Potent zu testen, wird es funktionieren, aber wir werden visuell nichts bemerken Lassen Sie uns zuerst finish durch k ersetzen und es innerhalb einer Spanne mit dem Icon-Klassennamen einordnen. Der Klassenname des Symbols wird vorerst keine Wirkung haben, aber das ist in Ordnung, denn wir werden ihn in den nächsten Lektionen durch ein echtes Symbol ersetzen . Wie fügen wir nun einige visuelle Hinweise , um den Status des Checkbox-Elements darzustellen Nun, mit RacGas können wir mithilfe des Style-Attributs einen Dynamik-Swing erreichen mithilfe des Style-Attributs einen Dynamik-Swing Dieses Attribut wird verwendet , um einen Zeilenstring hinzuzufügen. Zwei geschweifte Klammern platzieren und ein Objekt bereitstellen? Dieses Objekt kann jede CSS-Eigenschaft enthalten. Normalerweise setzen wir dieses Attribut in HTML auf eine Zeichenfolge. In Reagas sollte es sich jedoch um ein Objekt handeln dessen CSS-Eigenschaft eine Eigenschaft des Objekts ist In unserem Fall verwenden wir die Eigenschaft Hintergrundfarbe und machen ihren Wert dynamisch, die Eigenschaft Hintergrundfarbe und machen indem wir den Variablenstatus, der auf Leerzeichen geprüft innerhalb eines ternären Operators t Wenn es wahr ist, setzen wir die Hintergrundfarbe auf den folgenden Farbcode, und wenn es falsch ist, setzen wir es auf Weiß Speichern Sie dies und klicken Sie im Browser auf die Schaltfläche K. Sie werden feststellen, dass die Hintergrundfarbe auf Grün geändert wird . Wenn Sie erneut klicken, wird es wieder weiß. Sie werden aufgrund der Übergangseigenschaft innerhalb der CSS-Klasse mit Häkchen einen fließenden Übergang zwischen den beiden Farben feststellen aufgrund der Übergangseigenschaft innerhalb der CSS-Klasse mit Häkchen einen fließenden Übergang zwischen den beiden Farben . dieser Eigenschaft zwischen den beiden Hintergrundfarben dauert Übergang dieser Eigenschaft zwischen den beiden Hintergrundfarben dauert 0,3 Sekunden . 15. Aufgabenabwicklung und Zustandsmanagement in deiner React-App verbessern: In der Aufgabenelementkomponente haben wir den Status „Leichtigkeit geprüft“ erstellt und verwenden ihn nur, um die Hintergrundfarbe des Checkbox-Elements zu aktualisieren . Die Hauptfunktionalität, die darin besteht, das Aufgabenelement als abgeschlossen zu markieren und den Status des Aufgabenelements zu aktualisieren , haben wir jedoch noch nicht entwickelt besteht, das Aufgabenelement als abgeschlossen zu markieren und den Status des Aufgabenelements . Um diese Funktionalität zu erreichen, müssen wir in der Komponente eine Funktion zum Erledigen von Aufgaben definieren . Diese Funktion akzeptiert zwei Argumente, Aufgaben-ID, und ist abgeschlossen, ein Mobbing-Argument Wir werden diese Funktion als Requisite an die Aufgabenelementkomponente übergeben als Requisite an die Aufgabenelementkomponente In der Funktion „ Checkbox Change“ führen wir diese Funktion zur Erledigung von Aufgaben aus und übergeben dabei die Aufgaben-ID Für das Argument is complete verwenden wir den Status ese checked und fügen ein Ausrufezeichen nun zurück: Wenn wir ein bestimmtes Aufgabenelement aktualisieren müssen, müssen wir das gesamte Array aktualisieren Anstatt das Array außerhalb der Funktion „Set Task Items“ zu aktualisieren , wie hier gezeigt, können wir es anders machen. Wir können ein Coback übergeben das durch das Array mit den vorherigen Aufgabenelementen bereitgestellt wurde Dieser Callback sollte den neuen Status zurückgeben , der in unserem Fall ein Array ist Als Nächstes iterieren wir mithilfe der Map-Funktion durch das Array der vorherigen Aufgabenelemente Für jedes Aufgabenelement prüfen wir, ob seine ID mit dem Task-ID-Argument übereinstimmt Wenn ja, geben wir ein Objekt zurück und verteilen die alten Aufgabeneigenschaften mithilfe des Spread-Operators , der auch für Objekte funktioniert. Aber stellen Sie sicher, dass Sie Objekte in Objekte und Arrays in Arrays verteilen Objekte in Objekte und Arrays in Arrays Wir fügen dann eine neue Eigenschaft namens completed hinzu und setzen sie auf true Bei der ersten Erstellung des Aufgabenelements sollten wir die Eigenschaft abgeschlossen auf erzwingen setzen, um sicherzustellen, dass alle Aufgabenelemente mit der Aufgabe beginnen und abgeschlossen werden Gehen wir nun zurück und fügen der Aufgabenelementkomponente die Requisite für die Erledigung der Aufgabe hinzu. Zusammenfassend lässt sich sagen, dass wir, wenn wir auf das Checkbox-Element klicken, Funktion zum Ändern der Checkbox auslösen, wodurch der Status „Ease-Checked“ aktualisiert und die Hintergrundfarbe der Checkbox geändert Anschließend wird die Funktion zum Abschließen von Aufgaben mit der Aufgaben-ID und den Argumenten abgeschlossen aufgerufen. Diese Funktion führt die Funktion „Aufgabenelemente festlegen“ aus. Aktualisierung des Status der Aufgabenelemente und Markierung des Zielelements als abgeschlossen Übrigens, wenn die ID der Aufgabenelemente nicht mit der ID der Zielelemente übereinstimmt, wird sie unverändert an das Array zurückgegeben. Was die Eigenschaft complete anbelangt, sie nicht wie folgt auf true gesetzt werden, sondern sollte sie nicht wie folgt auf true gesetzt werden, sondern auf den Wert des Arguments is complete gesetzt werden. Auf diese Weise können wir mit nur einem Tastendruck zwischen aktivierten und deaktivierten Zuständen wechseln Zuständen mit nur einem Tastendruck zwischen aktivierten und deaktivierten Lassen Sie uns das Array mit den Aufgabenelementen protokollieren , um besser zu verstehen , was passiert Öffnen Sie nun den Browser, stellen Sie sicher, dass der Server läuft, und fügen Sie dann ein Element der Aufgabe 1 hinzu. In der Konsole sehen Sie das Aufgabenelemente-Array, das das Element „Aufgabe 1“ enthält, wobei die Eigenschaft „Erledigt“ auf „fällt“ gesetzt ist. Wenn Sie auf die Schaltfläche k wird die Eigenschaft abgeschlossen auf true gesetzt. Das Vorhandensein von zwei Arrays, die hier gedruckt werden, ist auf die Art der Reaktionen zurückzuführen, die je nach Zustand der Komponente manchmal mehrfach neu gerendert je nach Zustand der Komponente manchmal mehrfach Wenn es zweimal gerendert wird, ist das normal, aber mehr als zwei- oder dreimal kann dies auf ein Problem hinweisen Jetzt möchte ich ein Problem in der App beheben , das vielleicht ein Anfang ist Wenn Sie ein paar Elemente hinzufügen, dann ein Element löschen und überprüfen, weiteres Element ohne Aufgabe hinzufügen, dann dieses Element überprüfen und dann überprüfen und dann versuchen, Aufgabe Nummer zwei zu löschen, werden beide Aufgaben gelöscht. Dieses merkwürdige Verhalten ist darauf zurückzuführen, dass wir die Elementarray-Requisite nicht von der Aufgabenformularkomponente übergeben und sie innerhalb der Funktion „Status des Aufgabenelements festlegen“ verwenden sollten die Elementarray-Requisite nicht von der Aufgabenformularkomponente übergeben und sie innerhalb der Funktion „Status des Aufgabenelements festlegen“ verwenden sie innerhalb der Funktion „Status des Aufgabenelements festlegen Diese Manipulation des Zustands führt zu unbeabsichtigten Konsequenzen, einschließlich des gleichzeitigen Löschens mehrerer Aufgaben Um dem entgegenzuwirken, brauchen wir nun einen kontrollierteren Ansatz für die staatliche Verwaltung Wir können diesen Code herausschneiden und Funktion set state ein Coback hinzufügen, indem wir das Argument prev verwenden, das die neuesten Zustandsdaten enthält Wir kehren dann zurück und fügen das Array dort ein. Anstatt die Aufgabenelemente prop zu verwenden, verwenden wir das Argument Prev Dadurch wird sichergestellt, dass wir immer mit dem neuesten Stand arbeiten. Probieren Sie das jetzt im Browser aus. Löschen Sie die Konsole bei Aufgabe eins, bei Aufgabe zwei, überprüfen oder überprüfen Sie dann Elemente, und wenn Sie ein bestimmtes Element löschen, wird nur dieses Element gelöscht. 16. Praxisnahe Übungen mit useEffect Hook: Hinzufügen von Filtern und dynamisches Styling: Unsere React-Anwendung nimmt ihre endgültige Form an. Wir können neue Elemente erstellen, wir können sie als abgeschlossen markieren und löschen. Jetzt möchte ich dem Striker-App-Container ein Element hinzufügen und die Anzahl der koreanischen Aufgaben für den Benutzer berechnen Dies wird die Benutzererfahrung verbessern. In der App-Komponente und im Task-Tracker-Container-Div fügen wir ein Infoleistenelement hinzu. Fügen Sie zunächst eine ID hinzu und setzen den Klassennamen auf die Task-Tracker-Infoleiste. In diesem Dif wird das Span-Element hinzugefügt und die Länge der Aufgabenelemente gerendert Wenn wir jetzt im Browser einen leeren Weg haben, erhalten wir keine Elemente Immer wenn wir einen weiteren Artikel hinzufügen, erhöht sich die Anzahl und es wird uns angezeigt, wie viele Artikel wir in der Liste haben. Jetzt möchte ich in der Infoleiste einige Schaltflächen haben, um die Aufgabenelemente nach ihrem Status zu filtern, damit wir die abgeschlossenen Aufgaben filtern und sie alleine in der Liste rendern oder die ausstehenden Aufgaben filtern und sie auch alleine in der Liste rendern können. Lassen Sie uns hier zuerst das Span-Element und dann den gesamten Text hinzufügen. Dies wird verwendet, um den Filter zu entfernen und alle Elemente in der Liste zu rendern. Das zweite anklickbare Element dafür verantwortlich, nur die abgeschlossenen Aufgaben anzuzeigen, und das letzte Element ist für die ausstehenden Aufgaben zuständig, die Aufgaben, die nicht als erledigt markiert sind Jetzt werden wir jeden Filtertyp mit einem Ue-Status behandeln jeden Filtertyp mit einem Ue-Status Wir werden einen Filtertypstatus und die entsprechende Set-Funktion haben. In der U-State-Funktion selbst setzen wir den anfänglichen Wert des Filtertyps auf all. Wenn kein Filter angewendet wird, rendern wir alle Aufgabenelemente. Wenn wir die Aufgabenelemente wegfiltern, sollten wir das gefilterte Ergebnis in einem anderen Verwendungsstatus speichern. Andernfalls gehen die Originaldaten verloren, wenn wir stattdessen den Status des Aufgabenelements ändern . Nennen Sie diese neuen Aufgaben mit Statusfilter. Lassen Sie uns zunächst den Status des Filtertyps behandeln. Wir fügen dem Element all einen OnClick-Event-Listener hinzu , führen die Funktion set filter type und setzen den Status auf Kopieren Sie dies als Nächstes, fügen Sie es in die Schaltfläche „Abgeschlossen“ und ändern Sie den Status auf Gehen Sie hier genauso vor und ändern Sie den Status des Filtertyps auf Ausstehend. Wenn wir den Filtertyp aktualisieren, indem wir auf eine dieser Schaltflächen klicken, filtern wir das Array mit den Aufgabenelementen und speichern die Ausgabe im gefilterten Aufgabenarray. Anstatt also die Aufgabenelemente auf die Art zu rendern, müssen wir das gefilterte Aufgabenarray rendern. Und wenn wir auf die Schaltfläche O klicken, aktualisieren wir das Filteraufgaben-Array mit dem Aufgabenelemente-Array, das alle erstellten Elemente enthält. Der Status der Aufgabenelemente wird als Speicher dienen. Wie werden wir nun das gefilterte Task-Array aktualisieren , wenn sich der Filtertyp ändert? Nun, in React können wir einen weiteren so genannten Use-Effekt verwenden , ein leistungsstarkes Tool für Reacts, um zusätzliche Aufgaben zu erledigen, die ausgeführt werden müssen , wenn sich etwas in Ihrer App ändert? Wir haben eine Liste von Aufgaben, die wir nach verschiedenen Kriterien filtern möchten . Wenn Sie „Effekt verwenden“ verwenden, können Sie diese Liste automatisch aktualisieren , wenn sich der Filter ändert. Es ist so, als ob React dazu neigt, bestimmte Änderungen im Auge zu behalten und dann als Reaktion darauf bestimmte Maßnahmen zu ergreifen In unserem Fall verwenden wir use effect, um nach Änderungen am Filtertyp zu suchen und die Umfrage zur Filteraufgabe entsprechend zu aktualisieren Filteraufgabe entsprechend Dadurch bleibt Ihre App responsiv und synchronisiert sich mit den Entscheidungen der Nutzer. Jetzt akzeptiert der User Effect-Hook zwei Argumente. Der erste ist ein Coback, der den gesamten Code enthält, den wir ausführen möchten Das zweite ist das Array von Abhängigkeiten, das ist wie eine Beobachtungsliste für Änderungen Sie fügen Variablen ein, auf die Sie reagieren möchten, um sie im Auge zu behalten. Wenn sich eine dieser Variablen ändert, der Code innerhalb von use effect erneut ausgeführt, oder mit anderen Worten, der Benutzereffekt coback wird ausgeführt Es ist eine Art zu sagen: Hey, reagiere, wenn sich diese Dinge ändern, mach dieses Zeug Wenn Sie das Array leer lassen, der Effekt einmal ausgeführt, wenn die Komponente gestartet wird. Wenn Sie das Array vollständig entfernen, der Effekt bei jeder Aktualisierung der Komponente ausgeführt. In unserem Fall wollen wir auf den Status des Filtertyps und das Array der Aufgabenelemente achten , sodass wir jedes Mal, wenn wir ein neues Element im Array haben, die Filterfunktion erneut ausführen. In diesem Callback überprüfen wir nun, ob der Filtertyp den Wert abgeschlossen hat Dann werden wir das Filteraufgaben-Array mit dem vorherigen Argument und der Filtermethode aktualisieren mit dem vorherigen Argument und der Filtermethode Geben Sie dann nur die Elemente zurück, bei denen die Eigenschaft completed den Wert true hat. Andernfalls setzen wir das Filteraufgaben-Array auf das ursprüngliche Array zurück. Dies sollte so eingestellt werden, dass Aufgaben gefiltert und das Aufgabenelemente-Array übergeben werden, das alle Aufgabenelemente enthält. Speichern wir das jetzt und testen wir es im Browser. Ops, wir haben eine Bestellung, und das liegt daran, dass ich den Anfangsstatus des Filter-Task-Arrays auf eine Zeichenfolge gesetzt habe , aber es sollte ein leeres Array sein. Ich habe es aus dieser Zeile kopiert und nicht aktualisiert. Jetzt speichern wir und gehen zum Browser. Die Bestellung ist verschwunden, und jetzt fügen wir ein neues Aufgabenelement hinzu. Fügen Sie dann Aufgabe zwei hinzu. Lassen Sie uns Aufgabe eins als erledigt markieren Wenn wir auf das abgeschlossene Muster klicken, werden Sie feststellen, dass die Liste gefiltert wird und nur die abgeschlossenen Aufgaben enthalten sind. Wenn Sie auf das O Paton klicken, werden alle Elemente gerendert Nun, es würde dasselbe tun, wenn Sie auf den jeweiligen Filter klicken , weil wir das immer noch nicht codiert haben Fügen wir den Code hinzu, um abhängige Aufgaben zu filtern. Fügen Sie hier eine LF-Anweisung hinzu. Wir müssen prüfen, ob der Filtertyp gleich ausstehend ist. Wenn ja, werden wir den Status des Arrays der Filteraufgabe aktualisieren und dasselbe tun , was wir hier getan haben. Kopieren Sie diesen Code und fügen Sie ihn ein und geben Sie nur Elemente zurück, deren abgeschlossene Eigenschaften auf falsch gesetzt sind. Aber jetzt filtern wir mithilfe des vorherigen Arrays für Filteraufgaben ein Array , das bereits gefiltert wurde. Dies wird zu einem seltsamen Verhalten führen und der ausstehende Filter wird nicht funktionieren. Darüber hinaus werden die Dinge anfangen, zusammenzubrechen. Was wir hier tun müssen, ist Array der Aufgabenelemente selbst zu filtern, denn wie ich schon oft gesagt habe, wird dieser Array-Status immer alle Aufgabenelemente enthalten. Lassen Sie uns den Filter-Callback von hier kopieren und das Filter-Aufgabenarray mit dem neuen Aufgabenelemente-Array aktualisieren das Filter-Aufgabenarray mit dem neuen Aufgabenelemente-Array aktualisieren Kopieren Sie den gesamten Code und lassen Sie uns dasselbe in dieser zweiten if-Anweisung tun und einfach die Eigenschaft complete auf false ändern jetzt im Browser sicher, dass Sie die Paste erneut laden, um alles zurückzusetzen Fügen Sie dann Aufgabe eins, Aufgabe zwei und Aufgabe drei Lassen Sie uns Aufgabe eins überprüfen. Wenn wir die erledigten Aufgaben filtern, erhalten wir nur Aufgabe Nummer eins, was bedeutet, dass sie funktioniert. Wenn wir auf Ausstehend klicken, erhalten wir abhängige Aufgaben. Aber Aufgabe Nummer zwei ist jetzt überprüft. Aber wenn wir den Filter entfernen, indem wir auf klicken, verschwindet das Häkchen. Dies ist nur ein Renderproblem Wenn wir also mit den Filtern spielen, die Aufgabenelementkomponente nicht korrekt gerendert. Wir können das Problem beheben, indem wir zur Aufgabenelementkomponente gehen und einen Nutzungseffekt-Hook hinzufügen. Stellen Sie sicher, dass Sie es aus dem I-Paket importieren. Dieser Use-Effect-Hook achtet darauf der Aufgabenpunkt abgeschlossen ist und ob es sich um überprüfte Variablen handelt. Und wenn sich eine von ihnen ändert, werden wir den Status „ Benutze geprüft“ aktualisieren. Speichern Sie alles und kehren Sie zum Browser zurück. Wenn Sie nun zwischen abgeschlossenen und ausstehenden Filtern wechseln, werden Sie feststellen, dass die Komponenten des Aufgabenelements korrekt gerendert werden. Um solche Fehler in Zukunft zu vermeiden, stellen Sie einfach sicher, dass Sie den Use-Effect-Hook verwenden, wenn Sie GSX-Elemente haben , die aufgrund einer Bedingung gerendert wurden Bevor ich dieses Video beende, möchte ich noch etwas hinzufügen Wenn wir derzeit zwischen Filtern wechseln, können wir den aktuellen Filtertyp nicht anhand der Benutzeroberfläche ermitteln. Was ich hier tun möchte, ist den aktiven Filtertyp hervorzuheben. Wir können das hier drinnen tun, indem wir das Style-Attribut autorisieren , um dynamisches Styling hinzuzufügen Wir werden die Hintergrundfarbe je nach Filtertyp aktualisieren je nach Filtertyp Wenn es abgeschlossen ist, verwenden wir den Endoperator und geben diesen grauen Hintergrund zurück Das sollte eigentlich alles noch nicht abgeschlossen sein. Kopieren Sie dieses Stilattribut und platzieren Sie es im nächsten Pan-Element, das den fertigen Filter darstellt und ändern Sie hier alles mit abgeschlossen. Fügen Sie hier ein weiteres Gleichheitszeichen , um daraus eine logische Operation zu machen. Lassen Sie uns abschließend dasselbe für das Biegefiltermuster tun. Wenn der Filtertyp dem Biegen entspricht , ändern wir die Hintergrundfarbe in die Farbe Grau. Wenn du das speicherst und im Browser nachschaust, können wir sehen, welcher Filtertyp aktiviert ist. 17. Erste Schritte mit React-Icons: Verbessere deine Benutzeroberfläche: Die Komponente des Aufgabenelements. Ich möchte den Inhalt des Checkbox-Elements und der Schaltfläche zum Löschen durch einige schöne Symbole ersetzen Checkbox-Elements und der . In React GS können wir ein Paket namens React Icons blockieren und verwenden. Anstatt diese Symbole von Grund auf neu zu erstellen und nach Bildern zu suchen. Das React-Icons-Paket bietet Ihnen eine Vielzahl von Symbolen direkt zur Hand Sie können PM install oder Yarn ad verwenden , um das React-Icons-Paket zu installieren. Drücken Sie dann die Eingabetaste und warten Sie, Sie dann die Eingabetaste und warten bis die Installation abgeschlossen Du kannst mit der C-URL zur offiziellen Seite von React Icons navigieren . Dort finden Sie Anweisungen zur Installation und Nutzung des Pakets. Auf der linken Seite dieser Seite finden Sie eine Liste verschiedener Symbolbibliotheken wie Font Awesome Material Design und mehr, alles in einem Paket. In dieser Suchleiste können Sie nach einem bestimmten Symbol suchen. In unserem Fall möchten wir ein Löschsymbol. Ich werde Löschen eingeben. Dadurch erhalte ich eine Liste mit Löschsymbolen, aus denen ich wählen kann. Du kannst dir aussuchen, wen du willst. Für mich wähle ich diesen. Wenn Sie darauf klicken, wird der Name des Symbols für Sie kopiert. Jetzt können Sie zum Projekt zurückkehren , das oben in der Aufgabenelementkomponente befindet, rechts und an der Tafel, zwei geschweifte Klammern öffnen und dort den Namen des Symbols einfügen Wir werden dieses Symbol aus dem A-Symbolpaket und aus dem AI-Ordner importieren dem A-Symbolpaket und aus dem AI-Ordner Sie können sehen, dass wir hier viele Ordner haben , aber Sie können anhand der ersten beiden Buchstaben des Symbolnamens erkennen, in welchem sich Ihr Symbol befindet . Als Nächstes benötigen wir ein weiteres Symbol für den Check-Button. Ich suche nach Scheck und wähle diese beiden Symbole aus. Im Projekt werde ich je nach Status „ Ost“ zwischen ihnen hin- und herschalten . Wenn das Aufgabenelement aktiviert ist, rendere ich das ausgefüllte Symbol, und wenn es deaktiviert ist, rendere ich das leere Checkbox-Element Gehen wir zurück zum Projekt und zur Aufgabenelementkomponente und fügen beide Symbole in separate Port-Anweisungen wie diese ein Lassen Sie uns nun mit der Schaltfläche „Löschen“ beginnen. Entferne diesen Text und füge das AI-Outline-Löschsymbol hinzu, genau wie bei einer React-Komponente. Wenn wir das jetzt speichern und im Browser einchecken, werden wir sehen, dass das Symbol dort gerendert wurde. Aber es braucht etwas Übung, um es größer zu machen. Gehen Sie zurück und fügen Sie einen Klassennamen und ein Symbol hinzu, das Sie in der CSS-Datei des Aufgabenelements finden , wenn Sie es sich ansehen möchten Jetzt wird diese Klasse das Löschsymbol größer erscheinen lassen. Gehen wir zurück zur Check-Taste und löschen dieses Pan-Element. Stattdessen rendern wir das quadratische BS-Häkchensymbol. Es muss auch das Klassennamensymbol haben , um es so größer zu machen. Wenn ich jetzt klicke, siehst du, dass die Hintergrundfarbe grün wird, aber es ist tatsächlich der Hintergrund des Icon-Containers, nicht das Symbol selbst. Ich möchte zwischen diesem und dem gefüllten Symbol wechseln. Im Projekt möchte ich also zwischen diesem und dem gefüllten Symbol wechseln . Fügen wir es hier hinzu und fassen wir dann beide in zwei geschweiften Klammern zusammen, weil wir einen Java-Script-Code hinzufügen müssen Wir werden prüfen, ob der Variablenstatus aktiviert ist, nicht wahr ist Das bedeutet, dass der Artikel nicht geprüft wurde. Dann werden wir dieses Symbol rendern. Andernfalls rendern wir das ausgefüllte Symbol. Wenn ich jetzt im Browser auf das Checkbox-Symbol klicke, wird es durch das ausgefüllte Checkbox-Symbol ersetzt, aber wir möchten nicht, dass es mit der Farbe Schwarz gefüllt wird. Wir können die Füllfarbe mithilfe des Füllattributs ändern und sie an diesen Farbcode anpassen , der eine hellgrüne Farbe ist. Aber jetzt im Browser sieht es so aus, als wäre es verschwunden. Aber das liegt nicht daran, dass der Hintergrund des Elements auch grün ist. Auf diese Weise können wir es sehen. Um das zu beheben, entfernen wir dieses Stilattribut von hier und dieses Mal können Sie dort das Kontrollkästchen zum Ausfüllen sehen, und es funktioniert wie von Zauberhand. Jetzt möchte ich auch das Löschsymbol durch das ausgefüllte Symbol ersetzen. Suchen wir nach dem Löschen und wählen wir dieses aus. Da es mit den Buchstaben AI beginnt, können wir es auch von hier importieren. Scrollen Sie dann nach unten und lassen Sie uns es hier durch dieses Symbol ersetzen und das Füllattribut auf die Farbe Rot setzen, da es sich um eine Schaltfläche zum Löschen handelt. Lassen Sie uns abschließend das alte Symbol von hier entfernen und den Browser überprüfen. In Ordnung. Wir können nichts sehen, weil auch hier die Hintergrundfarbe rot ist. Das müssen wir innerhalb dieser Klasse ändern. Öffnen Sie das Aufgabenelement in der CSS-Datei. Und entfernen Sie die Eigenschaft Hintergrundfarbe. Jetzt können wir das Löschsymbol sehen. Wie Sie sehen können, hat die Verwendung von Symbolen unsere App schöner und unterhaltsamer gemacht. 18. Hinzufügen einer mehrseitigen Navigation: Implementieren von React Router DOM: Die Task-Tracker-Funktionalität ist abgeschlossen. Jetzt konzentrieren wir uns darauf, mehrere Seiten oder mit anderen Worten mehrere Routen hinzuzufügen . Dazu fügen wir zuerst eine Kopfzeile oben auf dieser Seite hinzu und fügen dann einige Navigationslinks hinzu. Im Komponentenordner fügen wir eine neue Komponente hinzu und nennen sie Header G SX. Zuerst portiere ich React von React, definiere dann die Funktion der Header-Komponente und exportiere sie unten Innerhalb dieser Komponente geben wir ein Header-Element zurück und geben ihm den Klassennamen header. Im Inneren werden wir zwei Navigationslinks haben, einen für die Startseite und den anderen für eine Info-Seite. Diese beiden Elemente werden den Klassennamen als Header-Element haben. Wir haben diese Klassen immer noch nicht. Wir werden eine neue CSS-Datei für die Header-Komponente erstellen. Sie finden diese Datei im Ressourcenbereich dieses Videos. Fügen Sie es einfach zu Ihrem Projekt hinzu. Es hat einige Stile für das Header-Element und für die Header-Elemente. Jetzt wird die Header-Komponente zur Index-CS-Datei hinzugefügt , da wir möchten, dass der Header auf allen Seiten vorhanden ist. Fügen Sie hier den Header hinzu und stellen Sie sicher, dass Sie ihn aus dem Komponentenordner importieren. Wenn wir das im Browser testen, können wir sehen, dass sich der Hader oben auf der Seite befindet, aber ohne jegliche Gestaltung liegt daran, dass ich vergessen habe, die Hydro Dot***-Datei in die Header-Komponente zu entpacken Hydro Dot***-Datei in die Wenn wir jetzt noch einmal nachschauen, werden wir die Kopfzeile mit den Navigationsschaltflächen Home und Info sehen , gleichen Effekt hat In unserem Fall ist die Startseite nun die AB-DGS-Komponente. Was uns hier fehlt, ist die AT-Seite. Wir werden eine Komponente dafür erstellen und sie nach DGS X benennen. Auch hier portiere React von React, definiere dann die Komponentenfunktion und nenne sie about page und exportiere sie unten Lassen Sie uns zunächst einfach einen Tauchgang mit einem Text, der etwas darüber sagt, zurückgeben. Fahren Sie nun in der Index-DoziS-Datei fort und verwenden Sie die Seitenkomponente wie folgt Im Browser werden Sie sehen, dass dort ein Text gerendert wurde, aus der About-Seitenkomponente stammt Wir möchten nicht, dass die Info-Seite gleichzeitig mit der Homepage gerendert wird. Wir möchten, dass jede Seite auf einer separaten Route gerendert wird. Wenn wir beispielsweise zu Local House 3.000 slash a navigieren, sollten wir nur die Seite „Über uns“ erhalten Wenn es nun darum geht, Webanwendungen mit React zu erstellen , haben Sie vielleicht bemerkt, dass React standardmäßig einen Single-Page-Anwendungsansatz oder kurz gesagt SPA unterstützt oder kurz gesagt SPA In SPAs wird zunächst alles auf einer einzigen HTML-Seite geladen Benutzer mit der App interagieren, aktualisiert React einen Teil dieser Seite dynamisch, sodass der Eindruck entsteht, durch verschiedene Seiten zu navigieren , ohne die gesamte Seite zu aktualisieren Es gibt jedoch Szenarien, in denen Sie unterschiedliche Seiten mit separaten URLs haben möchten , wie die obige Seite. Hier kommt die Magie des React-Router-Doom-Pakets ins Spiel Mit diesem Paket können Sie jetzt das Verhalten mehrerer Seiten in einer einseitigen Anwendung simulieren das Verhalten mehrerer Seiten in einer einseitigen Anwendung Mit dem React-Router-Doom-Paket können Sie Routen für verschiedene Seiten innerhalb Ihrer Anwendung definieren verschiedene Seiten innerhalb Ihrer Anwendung Es leitet Komponenten an eine bestimmte URL weiter. Sie können beispielsweise eine Route für die Info-Seite einrichten , genau wie Sie es für die Startseite tun würden. Sobald Sie den React-Router Dom gestartet haben, werden wir ein paar Dinge dafür importieren. Erstens der Browser-Router , der ein wichtiger Bestandteil des React-Router-Dump-Pakets ist , und React Es hilft Ihrer App bei der Verwaltung verschiedener QRLs und zeigt die richtigen Komponenten auf der Grundlage dieser URLs an Stellen Sie sich das als den Navigator vor, der sicherstellt, dass , wenn Benutzer zu einer bestimmten URL wechseln, der richtige Inhalt auf diesem Bildschirm angezeigt wird Verwenden wir nun den S QR, um seinen Namen in „Nur Router“ zu ändern. Wir werden diese Komponente verwenden, um alle unsere App-Komponenten zu verpacken. Als Nächstes importieren wir die Routenkomponente und die Routenkomponente. Die Routenkomponente wird all unsere Seiten enthalten, und um mit einem U zwischen Seiten zu wechseln, verwenden wir die Routenkomponente. Jetzt kann diese Komponente ein Pfadattribut akzeptieren. Für die Startseite werden wir einen Schrägstrich hinzufügen, der die Root-Route darstellt Um dann die App-Komponente zu rendern, verwenden wir das Komponentenattribut und übergeben den Namen der Komponente Wir werden dasselbe für die Info-Seite tun. Aber dieses Mal wollen wir, dass der Pfad ein Schrägstrich ist. Sie können den Schrägstrich entfernen, wenn Sie möchten. Die Komponente , die auf diesem Pfad gerendert wird, ist nun die About-Seite Der Header ist nicht in der Routenkomponente enthalten , da wir ihn auf jeder Route rendern möchten. nun im Browser Gehen Sie nun im Browser zur URL Local hose 3,000 about, und schon sind Sie fertig. Die Seitenkomponente „Über uns“ ist die einzige Komponente , die gerendert wurde. Lassen Sie uns nun der Info-Seite etwas Styling hinzufügen. Erstellen Sie eine CSS-Datei mit einem Punkt, in der Sie eine Containerklasse erstellen und ihr Sie eine Containerklasse erstellen diese Eigenschaften hinzufügen. Dadurch springt der Info-Text einfach in die Mitte der Seite. Wenn wir zurück zur Root-Route navigieren, wird der Tracker wieder aktiviert. 19. Navigation verbessern: Meistern der NavLink-Komponente in ReactJS: Wir möchten mithilfe der Header-Navigationsschaltflächen zwischen den Seiten navigieren Header-Navigationsschaltflächen zwischen den Seiten navigieren Derzeit sind dies jedoch nur Pan-Elemente. Wir müssen sie in Hyperlink-Elemente ändern. Wir werden das H ref-Attribut für die Homepage wie folgt auf die Root-Route setzen die Homepage wie folgt auf die Root-Route In ähnlicher Weise machen wir dasselbe für den About-Link und setzen die H-Referenz auf a. Mit diesen Änderungen können wir mithilfe dieser Schaltflächen zwischen den A-Ten-Homepages navigieren . Konzentrieren wir uns nun darauf, den aktiven Navigationslink mit einer anderen Farbe und einem anderen Stil hervorzuheben den aktiven Navigationslink mit . Wenn wir uns auf der AT-Seite befinden, sollte der Navigationslink hervorgehoben sein. Die Herausforderung besteht jedoch darin, dass wir nicht möchten, dass die Seite neu geladen wird Jedes Mal, wenn die Seite neu geladen wird, verliert unsere Anwendung ihren Status und alle Daten werden gelöscht Um dies zu verhindern, das Reacro-Dom-Paket eine nützliche Komponente namens Die Noveling-Komponente von React Router Dom ist wie ein erweiterter Navigationslink für Es ähnelt dem ACML-A-Tag, aber anstatt das H t-Attribut zu verwenden, verwenden wir ein anderes, das als Two bezeichnet wird Die Novelin-Komponente wendet automatisch den Stil für aktive Links Wenn Benutzer auf Novel klicken, wird die koreanische Seite visuell hervorgehoben, wodurch ein flüssigeres und intuitiveres Navigationserlebnis Um dies zu erreichen, erstellen wir nun eine neue Klasse in der CSS-Datei mit Header-Punkten für den aktiven Status der Kopfzeile Ich finde, dass diese Klasse bereits in der Datei definiert ist. Wenn du es nicht findest, dann folge mir. In dieser Klasse passen wir die Farbe mithilfe dieses Codes an, eine blaue Farbe steht. Lass es uns etwas dunkler machen. Kehren Sie nun zur HoDogs-x-Datei und schließen Sie den ersten Nav-Link im Klassennamenattribut im Klassennamenattribut mit einer lockigen Basis Übergabefunktion, die ein Objekt akzeptiert, das zwei Eigenschaften enthält, ist aktiv und steht noch Die Eigenschaft es active wird auf true gesetzt, wenn der URL-Pfad im Browser mit dem URL-Pfad innerhalb der beiden Attribute übereinstimmt . Die Eigenschaft es pending wird dagegen zur Verwaltung der Navigation verwendet , wenn auf Daten- oder ACN-Operationen gewartet wird. In diesem Callback müssen wir nun einen Klassennamen zurückgeben Wir geben unter bestimmten Bedingungen die Klasse des Header-Elements zurück. Zusammen mit der aktiven Klasse des Header-Elements, wenn die Eigenschaft e active den Wert true Sie können bei Bedarf gerne mehr als eine Klasse hinzufügen. Wenn es nicht aktiv ist, überprüfen wir die Eigenschaft Es pending. Falls wahr, geben Sie die Klasse des Hydro-Elements zusammen mit der Klasse des ausstehenden Hydro-Elements Definieren wir nun die Klasse Hydro Item Pending in der Hydrod Nun, lassen Sie uns die Testfarbe einfach auf hellblau umstellen. Kehren Sie hier zur Hydro-Komponente zurück. Wenn die Eigenschaft e pending ebenfalls falsch ist, Wenn die Eigenschaft e pending ebenfalls falsch ist, wenden Sie die Kopieren wir nun all das, was in die zweite N-Link-Komponente eingefügt wurde . Wenn Sie dies im Browser testen, die Änderungen möglicherweise nicht sofort ersichtlich Wenn wir jedoch hineinzoomen, werden wir die dunkelblaue Farbe bemerken. Machen wir es einfach deutlicher, indem wir die Farbe auf Grün ändern und die Schriftstärke auf 800 erhöhen. Lassen Sie uns versuchen, eine Textdekorationseigenschaft hinzuzufügen , die auf Unterstreichen eingestellt Wenn wir diese Änderungen nun im Browser testen, ist jetzt klarer, welches Speichern aktiv ist und auf welcher Seite wir uns gerade befinden 20. Die Link-Komponente meistern und eine benutzerdefinierte 404-Seite erstellen: erneuter Anwendung mit mehreren Routen müssen wir das Szenario bewältigen, in dem der Benutzer eine Route anfordert, die in unserer Routenliste nicht vorhanden Das bedeutet, dass wir den Fehler „Seite nicht gefunden“ behandeln müssen. Wir können das ganz einfach in der Index-DGS-Datei tun, indem wir am Ende der Routenliste eine neue Routenkomponente am Ende der Routenliste Dieses Mal verwenden wir das Elementattribut, das jeden GSX-Code enthalten kann, sogar eine Komponente wie Wir rendern jedoch nur ein Div mit der Meldung, dass der Seitenknoten gefunden wurde, und fügen einen Link hinzu, über den Sie zur Startseite zurückkehren können Wir möchten die Seite nicht neu laden , wenn wir auf diesen Link klicken Wir möchten, dass unsere App wie eine mobile App funktioniert und schnell ist. Wenn Sie in einer mobilen App zwischen Abschnitten oder Seiten wechseln , wird die mobile App nicht aktualisiert. In React können wir die Komponente NAV-Leiste verwenden, genau wie wir es in der Kopfzeile getan haben. Denken Sie jedoch daran, dass die NAV-Leiste nur für Navigationslinks verwendet werden sollte. Aus diesem Grund bietet das Dom-Paket des React-Routers eine weitere Komponente für normale Links. Diese Komponente heißt Link. Stellen Sie sicher, dass Sie es oben importieren. Jetzt können Sie die Link-Komponente genauso verwenden, wie Sie ein normales Hyperlink-Element Verwenden Sie öffnende und schließende Tags, und dazwischen können Sie Text wie „Zurück nach Hause“ hinzufügen für den Link überhaupt Verwenden Sie für den Link überhaupt die beiden Attribute wie folgt. Nun, der wichtigste Teil hier ist der Pfad dieser Route. Es sollte auf ein Sternsymbol eingestellt sein. Auf diese Weise überprüft React Router Dom bei Änderungen des URL-Pfads die Liste der verfügbaren Routen und die Reihenfolge, in der sie definiert wurden. Ich fange an, die erste Route zu vergleichen, die die Root-Route ist. Wenn die Pfade nicht übereinstimmen, wird der Reihe nach zum nächsten übergegangen. Wenn es eine Route mit einem Sternsymbol erreicht, hält es an und wählt diese Route aus. diesem Grund habe ich erwähnt , dass Sie die Route am Ende der Routenliste platzieren müssen . Andernfalls wird eine Route, die Sie unter dieser allgemeinen Route angeben, niemals erreicht. Ordnung. Lass uns den Browser überprüfen. Wie Sie sehen können, werden wir diese Nachricht rendern, wenn der Routenpfad nicht existiert . Wenn wir auf diesen Link klicken, wir ohne erneutes Laden zur Startseite zurück 21. Persistentes Statusmanagement in React: Daten über Routen hinweg pflegen: Routen zu unserer Anwendung hinzufügen, stehen wir vor einer weiteren Herausforderung. Wenn wir ein Element zur Liste hinzufügen und dann zur Info-Seite navigieren und zur Startseite zurückkehren , ist dieses Element nicht dort. Das liegt einfach daran, dass die App-Komponente jedes Mal neu gerendert wird, wenn sich die Route ändert . Wenn das passiert, kehren all diese Zustände zu ihren ursprünglichen Werten zurück. Hier kehrt das gefilterte Aufgabenarray zu einem leeren Array und alle unsere Daten gehen verloren. Wir können dies beheben, indem wir die Heimatroute aus der Routenliste entfernen und die App-Komponente direkt außerhalb der Routenkomponente und innerhalb der Router-Komponente rendern die App-Komponente direkt außerhalb . Das liegt daran, dass innerhalb der App-Komponente eine Heimatroute definiert wird , indem der gesamte GSX-Code in die Routenkomponente Die Routenkomponente kann nicht außerhalb der Router-Komponente verwendet werden Aus diesem Grund haben wir die App-Komponente innerhalb der Router-Komponente im Index zur GS-Datei hinzugefügt . Ich nehme diesen ganzen Code und erstelle eine Route mit der Routenkomponente , die sich auf den Routenpfad bezieht. dann innerhalb des Elementattributs Fügen Sie dann innerhalb des Elementattributs ein öffnendes und schließendes Tag wie folgt hinzu und fügen Sie den Code ein, den wir zuvor ausgeschnitten haben. Wenn wir dies im Browser testen, werden Sie feststellen, dass die Seite mit der gefundenen Notiz zusammen mit der Startseite gerendert wurde. Wir werden das gleich beheben. Aber zumindest jetzt, wenn wir ein Element zur Liste hinzufügen und zwischen Routen wechseln, ist das Element da. Das bedeutet, dass die App-Komponente nicht erneut gerendert wurde. liegt einfach daran, dass die Routenkomponente die Komponente immer neu rendert, wenn sich der Pfad ändert. Was wir hier gemacht haben, ist, dass wir nur den GSX-Code erstellt haben, den Teil, der neu gerendert wird , sodass nicht alle Staaten angetastet werden Der Grund, warum die Seite, die nicht gefunden wurde, auf der Startseite gerendert wird , ist, dass wir alle unsere Routen an einem Ort platzieren müssen alle unsere Routen an einem Ort platzieren Das erste, was ich tun werde, ist den gesamten GSX-Code der Startseite zu nehmen Schneide es aus und dann in den Komponentenordner. Ich werde eine neue Seitenkomponente erstellen und sie Home nennen. Lassen Sie uns React von React aus unterstützen. Definieren Sie die Home-Funktionskomponente. Und geben Sie den gesamten GSX-Code zurück , den wir aus der App-Komponente übernommen haben, und vergessen Sie nicht, die Home-Komponente unten zu exportieren die Home-Komponente unten Jetzt müssen wir all diese Zustände und Variablen als Requisiten von der App-Komponente an die Home-Komponente übergeben diese Zustände und Variablen als Requisiten von der App-Komponente an die Home-Komponente Öffnen Sie hier ein Objekt und kopieren Sie all diese Eigenschaften in Ihren Code. Stellen Sie außerdem sicher, dass Sie alle anderen Komponenten importieren , die in diese Datei verwendet wurden. Jetzt werden wir in der App-Komponente die Home-Komponente hier verwenden. Und stellen Sie sicher, dass Sie es oben portieren. Lassen Sie uns Ports entfernen, die wir nicht mehr benötigen. Jetzt müssen wir endlich alle erforderlichen Requisiten einreichen. Sie können die Liste der Requisiten hier kopieren und einfügen und jede Requisite auf die entsprechende Variable setzen Danach müssen wir alle Routen aus der Index-DGS-Datei entfernen Index-DGS-Datei und sie in der App-Komponente platzieren Denken Sie daran, dass wir all dies tun, um sicherzustellen, dass die Routenkomponente nicht die gesamte App-Komponente erneut rendert, was dazu führen würde, dass sie den App-Status verliert Jetzt können wir hier tatsächlich den Backslash entfernen und es einfach so belassen Wenn wir eine bestimmte Route als Index unserer App festlegen möchten , wie zum Beispiel das Zuhause hier, können wir den Attributindex hinzufügen , ohne ihn auf einen Wert zu setzen Standardmäßig ist er auf true gesetzt Im Index der GS-Datei müssen wir die Routenkomponente entfernen, müssen wir die Routenkomponente entfernen da wir in der gesamten Anwendung nur eine Routenkomponente haben sollten. Lassen Sie uns auch alle verwendeten Ports entfernen. Richtig. Jetzt fügen wir im Browser ein Aufgabenelement hinzu. Wenn wir zwischen Routen wechseln, wird das Aufgabenelement nicht gelöscht. 22. Data Fetching in React meistern: Erstellen einer Info-Seite mit API-Integration: Lassen Sie uns jetzt eine bessere About-Seite erstellen. Lassen Sie uns das entfernen und ein Tiefenelement mit dem Klassennamen Container hinzufügen . Sie finden die CSS-Datei im Bereich Ressourcen. Jetzt werden wir hier ein H-Tool-Element haben , das etwas über unsere Dienstleistungen aussagt. Dahinter ein Absatzelement, in dem wir beschreiben können , worum es in unserer App geht. Wir können schreiben. Wir sind hier, um Ihnen eine einfache Task-Tracker-App zur Verfügung zu stellen, mit der Sie organisiert bleiben und Ihre Aufgaben effizient verwalten können. Speichern Sie dies und im Browser werden Sie die Änderungen auf der obigen Seite sehen. Weiter unter diesem Absatz werden wir einen weiteren DI-Abschnitt haben, in dem wir einige Programmierwitze von einer API abrufen werden einige Programmierwitze von einer API Geben Sie diesem Dif den Abschnitt mit dem Klassennamen und dem Witz. Darin werden wir einen Text mit einer Breite von H mit der Aufschrift Programmierwitz haben Text mit einer Breite von H mit der Aufschrift Programmierwitz Und darunter ein Span-Element, in dem wir den Witzinhalt rendern werden. Im Grunde werden wir bei jedem Rendern einer Seite einen Witz abrufen. Fügen wir einen U-Status hinzu und nennen ihn Witz, um den Witz zu speichern und seinen Anfangswert auf ein Objekt zu setzen seinen Anfangswert auf ein Objekt zu Inhaltseigenschaft auf Null gesetzt Um nun Daten von einem externen IBI abzurufen, müssen wir den Benutzer Fat Hook verwenden ihn verwenden, können wir warten der Abrufvorgang beendet ist. Wenn es beendet ist, werden wir die Seite mit den abgerufenen Daten erneut rendern Lassen Sie uns die Abhängigkeiten vorerst ganz leer lassen. Dann definieren wir im Use-Effect-Callback eine Funktion und nennen sie Fetch Diese Funktion wird asynchron sein , da wir auf den Abrufvorgang warten wollen Darin verwenden wir einen Tri-Catch-Block, um mögliche Fehler zu erkennen und sie mit der Console Dot Error-Methode auf die Konsole zu drucken mit der Console Dot Error-Methode auf die Konsole Sie im Tri-Blog Deklarieren Sie im Tri-Blog eine konstante benannte Antwort und verwenden Sie das Schlüsselwort await, um die Ausführung des Codes zu stoppen , bis wir den Witz mit der Fetch-Funktion abgerufen Diese Funktion akzeptiert die AP-URL als erstes Argument Fahren Sie fort und kopieren Sie auch die URL. Dies ist eine kostenlose API, die bei jeder Anfrage einen Witz über Programmierung zurückgibt . Deklarieren Sie als Nächstes eine Datenkonstante, verwenden Sie erneut das Schlüsselwort await und rufen Sie die JSM-Methode für die Antwort auf Nun übergibt diese Methode den Antworttext ausdrücklich als JSM JCN ist nur eine JavaScript-Objektnotation, in ein Javascript-Objekt umgewandelt wird Wenn wir die Daten als Javascript-Objekt haben, können wir den Joke-Status festlegen und die Inhaltseigenschaft mit Data Dot Joke aktualisieren Jetzt müssen wir nur noch die Funktion „Abgerufene Witze am Ende des Use-Effect-Callbacks das Array der Abhängigkeiten leer lassen, wird der Use-Effect-Hook nur einmal ausgeführt , nachdem die Komponente bereitgestellt wurde Und mit Mount meine ich, wenn die Komponente zum ersten Mal im Browser gerendert wird Wenn wir das speichern und im Browser testen, wenn wir die Route wechseln, wird der Nutzungseffekt ausgelöst und wir werden den Witz dort sehen Aber es gibt etwas, das wir reparieren müssen. Wenn Sie es derzeit bemerken, kann der Witz manchmal undefiniert sein Wenn wir hier also ein Konsolenprotokoll hinzufügen und zum Browser zurückkehren und zwischen den Routen zur Ausführung des Abrufs und der Konsole wechseln , werden wir feststellen, dass der Witz manchmal undefiniert ist. Um das zu beheben, können wir hier eine if-Anweisung verwenden und prüfen, ob der Witz Wenn ja, werden wir die Ft-Joke-Funktion erneut ausführen. Ja, das können wir tun, denn in JavaScript Aufrufen einer Funktion in sich selbst als Rekursion bezeichnet Es ist eine Technik zur Lösung von Problemen, indem man sie mit derselben Funktion in kleinere Instanzen aufteilt Fügen Sie eine S-Anweisung hinzu, um den Fall zu behandeln, dass wir einen Witz haben. In diesem Fall können wir den Inhalt des Witzes aktualisieren. Wenn wir dies nun über den Browser testen, stellen Sie sicher, dass Sie die Konsole löschen. Gehen Sie dann zur Startseite und wechseln Sie zurück zur Info-Seite. Du wirst feststellen, dass wir den Witz verstanden haben. Aber in der Konsole können wir sehen, dass wir zwei Witze abrufen, was bedeutet, dass der Nutzungseffekt zweimal ausgelöst wurde, und das entspricht dem internen Status der About-Seite. Lassen Sie uns das Schritt für Schritt beheben. Fügen wir zunächst einen neuen Status hinzu und geben ihm einen Namen, der abgerufen wird. Dieser Status wird verwendet, um im Browser deutlich zu machen , dass wir Daten abrufen Setzen Sie den Anfangswert auf true, da wir die Daten direkt beim Mounten der Komponente abrufen Als Nächstes kommen wir hierher, wenn das Abrufen von Daten beendet ist, und bevor wir die Daten speichern, setzen wir den Status is fetching auf False und machen dasselbe, wenn wir einen Block innerhalb des Catch-Blocks erhalten Jetzt wollen wir im GSX-Code den Benutzer darüber informieren, dass wir etwas abrufen, damit er nicht denkt, dass unsere App kaputt ist Setzen Sie dieses Span-Element also in ein Paar geschweifter Klammern und überprüfen Sie, ob das Abrufen wahr ist Dann geben wir einen Text mit der Aufschrift Abrufen mit drei Punkten zurück. Wir können das im Browser testen. Wie Sie sehen können, ist die Abrufnachricht da, aber sie verschwindet sehr schnell Wir können es verlangsamen, indem wir das Fenster mit den Dev-Tools öffnen und zur Registerkarte Netzwerk gehen , hier diesem Menü suchen und es von nicht mehr auf langsame drei G umstellen . Dadurch wird die Erfahrung nachgeahmt, mit einer langsamen und eingeschränkten Mobilfunkverbindung im Internet zu surfen mit einer langsamen und eingeschränkten Mobilfunkverbindung im Internet , was das Abrufen des Chokes von der Joke SApi verlangsamt Chokes von der Das wird uns helfen, die abgerufenen Nachrichten im Browser zu sehen . Auf diese Weise können wir ein neues Problem in der Funktionalität unserer Apps entdecken ein neues Problem in der Funktionalität unserer Apps In der Konsole können Sie feststellen, dass der Use Effect-Hook viele Male ausgelöst wird. Jedes Mal sind die Daten undefiniert, und schließlich erhalten wir die Daten von der API Aber selbst dann wird der Nutzungseffekt noch einmal ausgelöst, was dazu führt, dass zwei Witze von der API abgerufen Benutzer werden dies möglicherweise nicht bemerken. Unsere Aufgabe als Entwickler ist es, diese kleinen Fehler zu entdecken und zu beheben. Zunächst fügen wir dem Status des Scherzobjekts eine abgerufene Eigenschaft hinzu und setzen ihren Anfangswert auf true Wir werden dann vor der Funktion Fetch Joke hierher kommen und prüfen, ob Joke Dot Fetch auf true gesetzt ist oder Ist dies nicht der Fall, werden wir die Ausführung des Codes mit einer Return-Anweisung beenden des Codes mit einer Return-Anweisung und die Daten nicht abrufen Aber wenn es wahr ist, werden wir die Daten abrufen Und wenn wir fertig sind, werden wir die abgerufene Eigenschaft auf Force setzen , sodass wir die Daten nicht erneut abrufen Da der Nutzungseffekt diesmal Wert der abgerufenen Eigenschaft abhängt, muss er dem Abhängigkeiten-Array hinzugefügt werden Ordnung. Wenn wir jetzt im Browser die Info-Seite erneut testen, werden wir feststellen, dass sich das Problem verschlimmert. Jetzt holen wir die Daten viele Male ab. Auch wenn wir Scherzdaten haben. Aber keine Sorge, dieses Problem kann mithilfe einer Use-Effect-Funktion namens Cleaning Up After Effects behoben werden . Dazu wird am Ende des Use-Effect-Hooks eine Callback-Funktion zurückgegeben , mit der wir einige Variablen bereinigen können In unserem Fall wollen wir die Eigenschaft effect joke auf force setzen Jetzt müssen wir das Witz-Objekt wie folgt zu den Abhängigkeiten hinzufügen . Score Back wird ausgeführt, wenn die Komponente nicht eingebunden ist oder wenn sich die Abhängigkeiten und die Abhängigkeit Y ändern Es wird häufig für Aufgaben wie Beratung, Abonnements, Entfernen von Event-Listenern oder in unserem Fall für das Zurücksetzen von Zuständen auf ihre ursprünglichen Werte verwendet, Zurücksetzen von Zuständen auf ihre ursprünglichen Werte wenn der Effekt nicht mehr benötigt wird Dadurch werden Speicherlecks oder unerwartetes Verhalten verhindert. Wenn wir das jetzt im Browser testen, funktioniert alles normal und ohne Probleme. Jetzt müssen wir uns noch um eine Sache kümmern. Stellen Sie sich vor, die Joke-API ist ausgefallen, was bedeutet, dass sie nicht aufgelöst werden kann. Die Daten werden also immer undefiniert sein. In diesem Fall wird diese Aussage immer der Wahrheit entsprechen und wir werden am Ende die Funktion fetch joke für immer ausführen die Funktion fetch joke zu verhindern, können wir eine let-Variable außerhalb der Fetch-Joke-Funktion deklarieren und sie Fetch count nennen Setze ihren Anfangswert auf Null. Am Ende des Tri-Blocks erhöhen wir dann die Anzahl der Abrufe, indem wir den Plus-Plus-Operator verwenden Dieses Javascript wird als Post-Increment-Operator bezeichnet . Er wird verwendet, um den Wert einer numerischen Variablen um eins zu erhöhen einer numerischen Variablen um In dieser Anweisung werden wir verlangen, dass die Anzahl der Abrufe kleiner oder gleich zwei Andernfalls werden wir die Funktion fetch joke nicht erneut ausführen Funktion fetch joke Ordnung. Jetzt möchte ich den Code hier ein wenig verbessern. Es ist immer eine gute Methode, die Anzahl der Nutzungszustandsfunktionen in Ihrem Code zu reduzieren . das Abrufen des Status zu vereinfachen, können wir ihn aus dieser Komponente entfernen und ihn im Scherzstatus als Eigenschaft ersetzen Jetzt können wir alles in einer Statusfunktion aktualisieren. neben dem Catch-Block Wenn wir neben dem Catch-Block auf Fehler stoßen, können wir den Inhalt des Witzes auf „Kein Witz“ setzen und ihnen dann mitteilen, dass sie können wir den Inhalt des Witzes auf „Kein Witz“ setzen und ihnen dann mitteilen, dass sie neu laden können, damit sie die Daten erneut abrufen können, und die Eigenschaft fetch auf force setzen und dasselbe für die Eigenschaft ease fetching tun für die Eigenschaft ease Vergessen Sie hier unten nicht, den Code zu aktualisieren und das Joke-Objekt zu verwenden , um auf den Status „Ease Fetching“ zuzugreifen Im Browser wird sich nichts ändern, aber er wird die Dinge in Ordnung halten, und wir können jedes seltsame Verhalten verhindern Vergessen Sie nicht, das Netzwerk-Throlling auf „Kein Throlling “ zurückzusetzen Netzwerk-Throlling auf „Kein Throlling Fahren wir mit der nächsten Lektion fort. 23. Verschachtelte Routen in React.js meistern: Navigation in komplexen App-Strukturen: Manchmal möchten wir unserer Anwendung vielleicht verschachtelte Routen hinzufügen Mit verschachtelten Routen meine ich die Anzeige einer bestimmten Seite innerhalb einer anderen, basierend auf dem Uro-Pfad Lassen Sie uns in Betracht ziehen, innerhalb der Info-Seite eine Sofort-Route hinzuzufügen innerhalb der Info-Seite In diesem Fall müssen wir ein abschließendes Tag hinzufügen und dann eine weitere Routenkomponente hinzufügen. Übrigens bevorzuge ich es, das Element-Tag anstelle des Komponenten-Tags zu verwenden , aber Sie können es gerne so lassen, wie es ist. Jetzt wird sich diese Routenkomponente von selbst schließen und wir setzen das Pfadattribut auf Entwickler. Im Wesentlichen fügen wir eine Seite hinzu, auf der eine Liste der Entwickler angezeigt wird , die zur Erstellung dieser Anwendung beigetragen haben. Jetzt setzen wir das Elementattribut auf einen Punkt mit dem Text dved by oder weißt du was? Wir können stattdessen die verschachtelte Basis in Team umbenennen. Innerhalb des Elementattributs rendern wir eine Komponente namens team Gehen Sie nun zum Komponentenordner erstellen Sie eine neue Datei mit dem Namen Team TSX Portieren Sie zuerst React von React und definieren Sie dann die Funktion. Dann exportiert. In dieser Komponente geben wir eine Liste von Entwicklern zurück. Kopieren Sie zuvor das folgende Array , das einige falsche Namen enthält. Wir werden dieses Array verwenden, um die Liste der Entwickler zu rendern. nun ein di zurück und fügen Sie darin ein H-Zwei-Element mit den Textentwicklern , die an der Task-Tracker-App gearbeitet haben. Fügen Sie darunter ein geordnetes Listenelement hinzu. Darin verwenden wir die Map-Funktion, um den Namen und den Index durchzugehen Wir geben ein Listennamenelement zurück, setzen den Schlüsselwert auf das Indexargument und platzieren das Namensargument in geschweiften Klammern Speichern Sie nun alles und ersetzen Sie in der AP-Komponente diese ID durch die Team-Komponente Wenn wir nun den URO-Pfad about slash team im Browser speichern und zu diesem navigieren , sollte die Entwicklerliste unten angezeigt werden Das passiert jedoch nicht. Der Grund dafür ist, dass wir innerhalb der Komponente dev at the outlet zur Komponente at page wechseln müssen innerhalb der Komponente dev at the outlet zur Komponente at page , die aus dem Dom-Paket des React-Routers importiert werden kann. Auf diese Weise stellen wir sicher, dass die Team-Komponente gerendert wird, wenn der Router-Pfad etwa dem Schrägstrich Team entspricht Jetzt fungiert die Outlet-Komponente als Platzhalter und zeigt Inhalte an, die auf der koreanischen Route basieren Es ist wie ein Slot, in den Routeninhalte eingefügt werden. Dies ist besonders nützlich, wenn Sie verschachtelte Layouts erstellen oder verschiedene Teile des Tempos je nach Route ändern verschiedene Teile des Tempos je nach Route Es hält Ihren Code organisiert und macht es einfach, zwischen verschiedenen Bereichen Ihrer Anwendung zu wechseln verschiedenen Bereichen Ihrer In Ordnung, denken Sie daran, dass wir auf Wunsch noch mehr verschachtelte Routen hinzufügen können Wunsch noch mehr verschachtelte Routen hinzufügen Fügen wir zum Beispiel eine Route hinzu, die auf die Indexroute verweist. Diese wird gerendert , wenn der Router-Pfad gleich a ist. Wir befinden uns innerhalb des Routers, was bedeutet, dass sich die Indexroute auf die About-Route bezieht Diese Route rendert eine Verbindungskomponente mit der Aufschrift Meet the Team, was sich auf die obige Teamroute bezieht Ich füge diesen Link als verschachtelte Route hinzu weil ich möchte, dass er auf der Grundlage des Ural-Pfads angezeigt wird Das ist der einfachste Weg, dies zu erreichen. Wenn wir nun im Browser von der Startseite zur obigen Seite navigieren, notieren wir unten den Link Meet the Team. Wenn Sie darauf klicken, wird der URL-Pfad geändert , sodass der Link verschwindet und die Teamkomponente gerendert wird. Sie werden feststellen, dass beim Wechseln zwischen verschachtelten Routen die übergeordnete Komponente ausgelöst wird, bei der es sich um die AT-Seite handelt, die neu gerendert wird 24. Praxisnahe Übungen mit useRef: Dein React-Projekt in Schwung bringen: Bestimmte moderne Webanwendungen. Wenn der Client die Seite abruft, wird das Eingabefeld automatisch aktualisiert, sodass der Benutzer in unserem Fall sofort mit dem Hinzufügen von Aufgabenelementen beginnen kann Wir können dies sehr einfach innerhalb der Aufgabenformularkomponente erreichen , indem einen neuen React-Hook namens use RAF verwenden , der wie ein Namensschild für Elemente in Ihrem Code ist Es hilft Ihnen, auf ein bestimmtes Element in der Kuppel zu verweisen, sodass Sie mithilfe von JavaScript damit interagieren können. Nicht nur für Formulareingaben. Sie können es für jedes Element verwenden, das Sie im Auge behalten möchten. Es ist, als würden Sie eine Haftnotiz auf etwas kleben, damit Sie es später leicht finden können. Wenn Sie den Use-RAF-Hook aufrufen, erhalten Sie ein Objekt namens F. Wir können es input ref nennen. RF ist wie ein Container, der eine Referenz auf ein Dom-Element oder einen Wert enthält . Dann fügen wir innerhalb des Eingabeelements ein RF-Attribut hinzu und setzen es der Eingabe F gleich. Auf diese Weise können wir auf das Eingabeelement zugreifen. Stellen Sie sich das als einen Java-Script-Elementselektor vor. Es gibt eine Bedingung , um dieses Ra zu verwenden. Es sollte nur aufgerufen werden, wenn das Eingabeelement im Browser gerendert wird. Wir müssen es innerhalb eines Use-Effect-Hooks verwenden und die Abhängigkeiten hinzufügen und es leer lassen, sodass es nur einmal ausgeführt wird, wenn die Komponente bereitgestellt wird. Im Rahmen dieser Verwendung von Fact Hook können wir die Eingabe ref verwenden, um auf den Koan-Wert der Referenz aus der koreanischen Eigenschaft zuzugreifen den Koan-Wert der Referenz aus der koreanischen Diese koreanische Eigenschaft bezieht sich auf das Eingabeelement. Um den Fokus auf das Eingabefeld zu richten, was bedeutet, dass die Textleiste hinzugefügt wird, können wir die Focus-Methode wie folgt aufrufen. Normalerweise setzen wir den Anfangswert der Referenz auf Null, wodurch vermieden wird, dass ein Anfangszustand angenommen wird und unbeabsichtigte Auswirkungen vermieden Stellen Sie nun sicher, dass Sie alle Änderungen speichern. Aktualisieren Sie dann die Webseite in Ihrem Browser. Dabei werden Sie feststellen, dass das Eingabefeld automatisch in den Fokus rückt. Dadurch können Benutzer sofort mit der Interaktion mit der Anwendung beginnen, indem sie Inhalte eingeben , ohne dass weitere Maßnahmen erforderlich sind Wenn Sie sich die Eingabe-Referenz ansehen möchten, können Sie sie in der Konsole protokollieren und Sie erhalten das HTML-Eingabeelement in der Konsole Wenn wir nun nur den Eingabebereich trösten, Sie im Deep-Tool erhalten Sie im Deep-Tool ein Objekt mit einer Eigenschaft namens Coan Übrigens haben wir hier ein R, das besagt, dass eine Komponente eine unkontrollierte Eingabe verändert , um sie zu Er spricht von einem Komponentenwert von undefiniert zu definiert wechselt Hier geht es um das Eingabeelement innerhalb der Aufgabenformularkomponente Wo wir seinen Wert auf den Eingabestatus setzen. Das Problem dabei ist, dass der Anfangszustandswert nicht undefiniert sein sollte Wir können das leicht ändern, indem Use-State-Hook eine leere Zeichenfolge dem Use-State-Hook eine leere Zeichenfolge als Anfangswert Wenn wir nun die Paste aktualisieren, wird die URL nicht erneut gedruckt.