React Js-Anfängerkurs zum Vorankommen (Learn by Doing)

1. Alles über den Kurs für Reaktante Js: Schauen Sie sich diese wunderschöne Website an. Es ist alles mit React js unter Verwendung eines CSS-Frameworks namens Tailwind handcodiert . Es wurde sorgfältig und professionell entwickelt, um auf allen Geräten zu funktionieren. Was ist mit diesem schönen Netflix-Klon? Mache diese tolle Dashboard-Anwendung nicht. Schauen Sie sich diese aktualisierte professionelle React JS-Portfolio-Website an. Also was, es wäre super toll, wenn Sie genau wüssten , wie man diese Website von Grund auf neu gestaltet und codiert. Genau hier komme ich ins Spiel. Hallo, Willkommen und vielen Dank für Ihr Interesse an meinem neuen React js. Denn für Anfänger ist mein Name, hier ist x und ich werde in diesem Kurs Ihr Lehrer sein . In diesem Kurs beginnen wir bei Null, um die grundlegenden Konzepte zu lernen und zu verstehen. Reagiere. Am Ende sind Sie gut gerüstet, um komplexe Webanwendungen mit React j zu erstellen . Wir beginnen mit der Installation der notwendigen Tools, die für die Arbeit mit React in den Jahren erforderlich sind. Danach werden wir unsere erste React-Anwendung erstellen. Sie müssen sich also keine Sorgen machen , nur weil ich Ihre Hand halte und Sie durch die Grundlagen führe, die die Feinheiten des Musters von React js sind . Und genau wie bei unserem Bit-Instanzsatz Wenn Sie es nicht einfach erklären können, verstehen Sie es nicht gut genug. Mein Ziel in diesem Kurs ist es, zu erklären, einfach zu reagieren, damit es jeder gut genug versteht. Daher werden wir alle grundlegenden Konzepte von React behandeln, einschließlich fortgeschrittener Themen wie wer aussieht. In der Tat wird es eine komplette Serie sein. Und am Ende dieses Kurses sind Sie gut gerüstet, um komplexe Webanwendungen wie den Netflix-Klon, die React the Dashboard-Anwendung, die Lebensmittelrezept-Anwendung und die erstklassige professionelle React-js-Portfolio-Website zu erstellen komplexe Webanwendungen wie den Netflix-Klon, React the Dashboard-Anwendung, Lebensmittelrezept-Anwendung und , mit der Sie Ihre Jobs Ihren Kunden oder Ihren Arbeitgebern, einschließlich Ihrer Familien und Freunde, präsentieren können Ihre Jobs Ihren Kunden oder Ihren Arbeitgebern, einschließlich Ihrer . Kommen Sie ohne weitere Umschweife zu mir und lassen Sie uns loslegen. 2. 2 Was genau ist React js?: Was genau ist React und warum sollten wir es verwenden? React JS ist eine deklarative, effiziente und flexible JavaScript-Bibliothek für die Erstellung schneller und interaktiver Benutzeroberflächen. Ich möchte, dass Sie diese wichtigen Punkte unterstreichen. Benutzeroberflächen der deklarativen JavaScript-Bibliothek. Bevor wir fortfahren, möchte ich einen Eindruck korrigieren. React js ist kein Framework. Es ist eine Bibliothek. Und der Zweck, für den diese Bibliothek erstellt wurde besteht darin, interaktive Benutzeroberflächen zu erstellen gehört lediglich das Rendern der Ansicht und das Sicherstellen, dass die Ansicht mit dem Status synchronisiert ist. Das ist das einzige, was es öffnet. Und es macht es vollkommen in Ordnung. Daher verfügt React nicht über eine integrierte Lösung für die Verarbeitung von HTTP-Aufrufen, Routing und anderen Funktionen. Wir können jedoch all diese Funktionen verwalten , indem wir externe Bibliotheken installieren. Wenn Sie z. B. einen Button-Klick implementieren , der Sie von Komponente A zu Komponente B umleitet müssen Sie eine externe Bibliothek namens React Router Dome installieren . Ein weiterer wichtiger Punkt ist , dass React js deklarativ ist. Und dieses Paradigma impliziert einfach dass du reagierst, was du willst, indem du Code schreibst. Und mit Hilfe der Reactome-Bibliothek aktualisiert und rendert React effizient nur die eigentliche Komponente, wenn sich Ihr Status ändert. In Ordnung, also React wird die Zusammenfassung weg haben. Sind das Damen? Und es Ihnen einfacher machen, interaktive und komplexe Benutzeroberflächen zu erstellen? Und jetzt ist die Frage, warum sollten wir lernen zu reagieren? Und was genau ist der Vorteil in der Technologiebranche? Punkt Nummer eins ist die Marktnachfrage. Wenn Sie sich den Google-Trend ansehen, werden Sie feststellen, dass React js die Technologiebranche dominiert, wenn es um Bibliotheken oder Frameworks für die Erstellung von Benutzeroberflächen geht. Wenn Sie Ihre Möglichkeiten als Frontend-Entwickler erweitern möchten , ist React js eines der besten Tools, die Sie Ihrer Toolbox hinzufügen können. Punkt Nummer zwei ist Leistung. React verwendet lediglich einige clevere Techniken , um die Anzahl der kostspieligen Dome-Operationen zu minimieren , die für die Aktualisierung der Benutzeroberfläche erforderlich sind. Dies wiederum ermöglicht es den Entwicklern, eine Webanwendung zu erstellen , die Daten im Laufe der Zeit ändern kann , ohne die Seite neu laden zu müssen. Und nehmen Sie das bitte zur Kenntnis. Ordnung, sodass die Entwickler eine Webanwendung erstellen können , die Daten im Laufe der Zeit ändern kann ohne die Seite neu laden zu müssen. Lassen Sie mich Ihnen schnell eine Metapher geben. Z.B. hat einer deiner Freunde sein Bild auf Facebook gepostet. Also öffnest du das Bild und gibst das Bild dann sofort wie gewünscht ab. Du gibst das Bild gleich wieder. Der LikeCount wird erhöht, auch ohne dass die Seite neu geladen werden muss. Und das ist ein großer Vorteil von React-Chairs OR Gates. Es reagiert also irgendwie auf Veränderungen. Es ist zwar nicht vollständig reaktiv Kommunikation mit der Datenbank angeht, die Kommunikation mit der Datenbank angeht, aber mit Hilfe von Redox und anderen State-Management-Tools können Sie Anwendungsstarts einrichten, die so reagieren, dass sie vollständig reaktiv sind . Punkt Nummer drei ist ein starkes Ingenieurteam. React wird von Mehta erstellt und gewartet. Wenn ein Unternehmen wie Metta reagiert, um sein eigenes Produkt zu entwickeln und zu verwalten, können Sie daher reagiert, um sein eigenes Produkt zu entwickeln und zu verwalten, sicher sein, dass React js nicht so schnell sterben wird. Einige der größten Anwendungen der Welt wurden jedoch mit React erstellt. Anwendungen wie Netflix, PayPal, Facebook, Instagram, Dropbox und viele mehr. In diesem Kurs ist Netflix also eine der Anwendungen, die wir von Grund auf bis zur letzten Phase der Bereitstellung erstellen werden. Und natürlich, Lenin, wird es für Sie ein großes Plus sein, wie Sie dieses Projekt bauen . Klingt gut, oder? Wunderschön. Ein weiterer Vorteil ist die große Community und Beliebtheit. React js hat eine sehr große Community. Wann immer Sie also auf Probleme stoßen, haben Sie Tausende von Artikeln und Bibliotheken im Internet , die Ihnen helfen werden. Sie können es also auf Stack Overflow, W3 School und vielen mehr einrichten . Technisch gesehen folgen Anwendungsstarts mit React dem komponentenbasierten Architekturansatz , der einfach impliziert, dass Beschwerden einer der Grundbausteine der React-Anwendung sind. Und jetzt ist die Frage, was ist eine Komponente? Die Sorge? In der nächsten Vorlesung werden wir das ausführlich besprechen. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 3. 3 Komponente: Komponenten. Die Komponente ist ein isoliertes Teil der Benutzeroberfläche, das für den Aufbau komplexer Benutzeroberflächen konzipiert ist . Mit anderen Worten, es stellt einen Teil der Benutzeroberfläche dar. traditionelle Website kann in die Header-Komponente, aber in eine Container-Seitennavigation und die Fußzeilenkomponenten unterteilt in die Header-Komponente, aber in eine Container-Seitennavigation und die Fußzeilenkomponenten unterteilt werden. Stimmt es? Also lass es mich sauberer machen. Schauen Sie sich diese Portfolio-Website an. Und sicherlich ist dies ein weiteres großes Projekt, das wir in diesem Kurs bauen werden. Lassen Sie uns nun die Struktur verstehen und wie sie betrachtet wurde. Diese Portfolio-Website ist in kleinere isolierte Segmente unterteilt , die als Komponenten bezeichnet werden und zu denen auch die Home-Komponente gehört. Und wieder ist die Home-Komponente in kleinere Teile unterteilt, denen die Header-Komponente, die Profilkomponenten und schließlich das Profilfood gehören . Wir haben also die restlichen Komponenten wie die Komponenten „Über mich“, „ Lebenslauf“, „Testimonial“ und die Komponente „Kontaktiere mich“. All diese verschachtelten Komponenten sind also in einem Stammunternehmen zusammengefasst, den Technologieknoten. Die Roots-Komponente ist die Standardkomponente jeder React-Anwendung. Die Root-Komponenten sind also dafür verantwortlich , als Container für alle anderen Komponenten zu dienen als Container für alle anderen Komponenten , die beim Erstellen der React-Anwendung erstellt werden. In der Tat nenne ich diese Komponente die Mutter aller Unternehmen. Das ist übrigens meine persönliche Meinung. Wenn Sie es sich also genau ansehen, werden Sie feststellen, dass jede dieser Komponenten nur einen Abschnitt der Benutzeroberfläche definiert. Und all dieser Abschnitt wird dann zu der gesamten Anwendung zusammengefügt . Wenn wir diese Anwendung in einem Baum von Komponenten darstellen wollen, haben wir technisch gesehen diese Anwendung in einem Baum von Komponenten darstellen wollen, die App-Komponente, die die Stammunternehmen sind, ganz oben , oder? Im Folgenden werden wir also die Komponenten für das Zuhause haben. Und in den Hausbauteilen befinden sich das Header-Profil, der Profilfuß, unsere Firma. Und dann haben wir die Komponenten „ Abutment“, Lebenslauf“, „Testimonial“ und „ Kontaktiere mich“. Zusammenfassend lässt sich sagen, dass die Komponente es uns ermöglicht, unsere Anwendung in kleinere gekapselte Segmente zu unterteilen , die dann zu einer komplexeren Benutzeroberfläche zusammengesetzt werden können . Einfachste Techniken. Zum Zeitpunkt der Aufnahme hat eine Anwendung wie Facebook über 30.000 Unternehmen. Die Größe der Anwendung bestimmt also die Anzahl der zu verwendenden Komponenten. Eine gute Sache an Komponenten ist , dass Komponenten wiederverwendbar sind. In React js ist eine wiederverwendbare Komponente also ein Teil der Benutzeroberfläche, der in verschiedenen Teilen der Anwendung verwendet werden kann , um mehr als eine UI-Instanz zu erstellen. Einfach ausgedrückt bedeutet dies, dass eine Komponente mit unterschiedlichen Eigenschaften verwendet werden kann , um unterschiedliche Informationen anzuzeigen. Stimmt es? Das ist also alles für heute. In der nächsten Vorlesung werden wir mit der Einrichtung und Installation fortfahren. Bleib konzentriert und pass immer auf dich auf. 4. 4 Tool (Node js, vs Code, google chrome): In dieser Vorlesung werden wir die notwendigen Tools installieren, die für die Arbeit mit React js erforderlich sind, wie Node.js. Visual Studio Code ist wie Node.js kein Browser Ihrer Wahl, sondern vorzugsweise Google Chrome. Gehen Sie also schnell zu Node js.org. Hier ist die Adresse. Also genau hier werden wir die neueste stabile Version herunterladen und installieren. Ich habe es schon auf meinem Computer. Aber um Peppers beizubringen, muss ich es aus Gründen der Übersichtlichkeit zusammen mit Ihnen herunterladen und installieren . Wenn Sie also den Bildschirm beobachten, werden Sie zwei verschiedene Versionen sehen. Sie diese Version also bitte nicht herunter. Wissen Sie warum? Das liegt einfach daran, dass es mit zusätzlichen Komplexitäten verbunden ist, die Sie möglicherweise nicht herausfinden können. Lassen Sie uns also mit dem Herunterladen des LTS fortfahren. Hier, ist es vom Bildschirm entfernt? Ich klicke einfach, um es herunterzuladen. Der Grund, warum wir Node.js installieren, besteht darin, das MPM-Paket zu verwenden , um Bibliotheken von Drittanbietern zu installieren. Der Download war erfolgreich. Offen. Lass uns weitermachen. Sie können sich entscheiden, die Softwarelizenzvereinbarung zu lesen. Aber für mich werde ich einfach unsere Vereinbarung fortsetzen. Lass uns Kontinuum machen. Und zuletzt müssen wir auf die Schaltfläche Installieren klicken. Hier, ist es? Wenn deine Tasse wäre, würde das natürlich auf jeden Fall auftauchen. Sie müssen also nur Ihr Passwort eingeben. Und wenn Sie Windows verwenden, wird es eine einfache Installation sein. versteckte Installationssoftware, nicht die GS-Installation, ist also im Gange. Und diese würden definitiv eine Weile dauern. Also muss ich die Vorlesung nur vorspulen. Node.js wurde installiert. Erfolgreich. Schließen wir es. Richtig, Sie können also entscheiden, ob Sie es behalten oder zum Balken bewegen möchten. Aber für mich behalte ich es einfach . Öffnen wir jetzt das Terminal. Halte die Befehlstaste auf deinem Mac und tippe dann auf die Leertaste. Also werden wir nach einem Terminal suchen. Und hier ist es. Hier müssen wir die Version des Knotens überprüfen , den wir gerade installiert haben. Knotenstrich V, drücken Sie die Eingabetaste auf Ihrer Tastatur. Und das ist die Version eines Haares. Schließen Sie die Terminologie. Die nächste dünne Linie ist die Installation des Code-Editors. Und der Code-Editor, den ich in diesem Kurs verwenden werde , ist der VS Code. Sie können einen beliebigen Code-Editor Ihrer Wahl verwenden. Aber für mich ist der VS Code mein Favorit. Und ich empfehle Ihnen dringend, sich an den VS-Code zu halten , damit Sie mir in Zukunft nicht folgen können. Scrollen Sie nach unten und lassen Sie es uns herunterladen. Es ist vom Bildschirm verschwunden. Wir haben es für Windows und am rechten Bildschirmrand haben wir es für Mark. Also muss ich es nur für Mac herunterladen. Und wenn Sie Windows verwenden, müssen Sie es auch für Windows herunterladen. Der Download würde definitiv eine Weile dauern. Also muss ich die Vorlesung nur vorspulen. Herunterladen. Erfolgreich. Offen. Hier ist es. Du musst es nur starten. Und das war's. Der VS-Code ist geöffnet. An meiner Seite werden Sie sich also das aktuelle Projekt ansehen. Keine Sorge, dies scheint möglicherweise nicht zu enden, nur weil Sie kein Projekt mit VS Code geöffnet haben. Stellen Sie also sicher, dass Sie Google Chrome herunterladen. Und natürlich solltest du es inzwischen haben. Das ist alles für heute. Und in der nächsten Vorlesung werden wir unsere erste React-Anwendung erstellen. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 5. 5 Installation reagieren: In dieser Vorlesung werden wir unsere erste React-Anwendung erstellen. Gehen Sie also schnell zu React js.org. Hier ist die Adresse. Klicke auf Hunde. Hier ist es. Ordnung, also auf der rechten Seite des Bildschirms werden Sie den Tab sehen. Also musst du ganz oben auf Neue React-App erstellen klicken. Hier ist es. Das erste, was wir tun werden, ist, im Grunde eine Boilerplate einer React-Anwendung zu generieren, die aus den Bibliotheken, den ersten Dateien und Ordnern besteht , um eine einfache React-Boilerplate-Anwendung auszuführen . Scrollen Sie nach unten, ich zeige es Ihnen. Um eine neue React-App zu erstellen. Wir müssen diese Anweisungen befolgen. Der Befehl NP X würde verwendet, um eine neue React-App zu erstellen , ohne sie auf unserem System installieren zu müssen. Habe das alles nicht verstanden. Lassen Sie uns mit der Erstellung einer neuen React-App fortfahren. Gehe auf den Desktop. Und hier werden wir ein Stammverzeichnis erstellen. Ursache reagieren. Klicken Sie hier mit der rechten Maustaste auf Neuer Ordner. Reagieren, sprinten, verursachen, drücken Sie die Enter-Taste. Techniken. bei der Benennung Ihres Projekts Verwenden Sie bei der Benennung Ihres Projekts immer einen aussagekräftigen Namen , der den Zweck des Projekts angibt. Sie möchten es also in Zukunft erkennen können. Klingt gut, wunderschön. Öffnen Sie also schnell den VS-Code. Lassen Sie uns diese Beispielseite schließen. Die nächste Zeile besteht nun darin, den Ordner per Drag & Drop in den VS-Code zu ziehen. Schließen Sie erneut die Beispielseite maximieren Sie den VS-Code. Öffnen wir das integrierte VS Code-Terminal. Und ich mache Control Back Tick. Können Sie sehen, dass sich die Arktis in der oberen linken Ecke der Tastatur befindet, ebenfalls direkt unter der Escape-Taste. Wenn die Abkürzung für Sie nicht funktioniert, müssen Sie nur nach oben gehen und dann das neue Terminal dominieren. Du klickst darauf, es öffnet sich für dich. Direkt am Terminal. Wir müssen eine neue React-App erstellen. Und p x React-App erstellen. Die React-Anwendung wird in einem Verzeichnis namens Klein's installiert . Außerdem können Sie beschließen, den Namen dieses Verzeichnisses zu ändern. Ich empfehle Ihnen jedoch dringend, beim Convention-Client zu bleiben , einfach weil React js mit dem Frontend zu tun hat, was den UI-Teil der Anwendung impliziert. Sie können das Frontend auch so einschränken. Das ist also auch konventionell. In Ordnung? Aber für mich bleibe ich einfach bei der herkömmlichen Hitze auf der Enter-Taste, um fortzufahren. Die Installation von React ist im Gange. Und diese würden definitiv eine Weile dauern. Also muss ich die Vorlesung nur vorspulen. React wurde erfolgreich installiert. Um fortzufahren, müssen wir in das Client-Verzeichnis gehen, in dem wir React js installiert haben. Also mache ich einfach C, D, Kleins Schlag auf die Schlagtaste, um fortzufahren. Als Nächstes starten Sie den Frontend-Dev-Server. Und ich mache npm, startet, drücke die Enter-Taste, um es zum Laufen zu bringen. Übrigens bedeutet MPM einfach Node Package Manager. Auf dem Bildschirm befindet sich die React London Seite. Und standardmäßig läuft es auf dem Localhost-Port 3.000. Jetzt sind wir mit der Installation fertig. In der nächsten Vorlesung werden wir beginnen, das React-Boilerplate zu enthüllen. Das ist alles für heute und wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 6. 6 React: In dieser Vorlesung werden wir den React-Boilerplate-Befehl B vorstellen den React-Boilerplate-Befehl B , um auch den Explorer zu öffnen . Wir müssen das Terminal schließen. Sie müssen also auf das Symbol hier auf der rechten Seite des Bildschirms klicken . Aber für mich werde ich einfach die Kontrolle zurücknehmen. Öffnen Sie das Kundenverzeichnis. Hier ist es? Fahren wir mit der Datei package.json fort. Hier ist es? In der Datei package.json alle Abhängigkeiten gespeichert, werden alle Abhängigkeiten gespeichert, die das Frontend betreffen. Hier drüben. Wir haben auf visuelle Hilfen reagiert und 0.2 installiert. Direkt unten. Wir haben die Reaktorkuppel. Die Reaktantenkuppel wird verwendet, um mit dem Dokumentobjektmodul im Browser zu arbeiten . Hier haben wir die React-Skripte auf den Web Vitals. Und hier unten haben wir die Drehbücher. Und in der vorherigen Vorlesung haben wir MPM gestartet, um den Frontend-Dev-Server hochzufahren. Direkt darunter haben wir das angesehen. Wenn wir npm run build ausführen, werden die statischen Assets für Bereitstellungen überlastet. Wenn wir also eine Anwendung auf dem Server bereitstellen möchten, würden wir auf jeden Fall das Viewing verwenden. Hier. Wir haben den Test. Wird ausgeworfen. Eject ist erforderlich, wenn Sie aus Create, React, App aussteigen und Ihren Webpark anpassen möchten. Und hier haben wir die Konfiguration für ES-Lanes , mit der Sie einige mögliche Fehler in Ihrem Code hervorheben können. Schließlich haben wir den kompatiblen Browser mit der Datei package.json am wenigsten fertig ist. Fahren wir mit dem Paketprotokoll fort. Offen. Die Paket-Log-Hubs für die stabile Installation Ihrer Dependencies Door. Wir haben hier nichts zu suchen, aber wir müssen auch darüber sprechen. Hier haben wir die Redmi Dot MD Datei, die bei der Dokumentation hilft. Beispielsweise sind Sie mit der Erstellung Ihrer Anwendung fertig. Ihr könnt also zum Redmi-Punkt leer gefunden kommen , um die beteiligten Prozesse zu dokumentieren. Lassen Sie uns also schnell die Ordner enthüllen. Öffne die Öffentlichkeit, richtig. Im öffentlichen Verzeichnis haben wir die Datei index.html, das Logo und die Manifest-Punkt-JSON-Datei. Die Manifest-Punkt-JSON-Datei wird für Progressive Web App verwendet , die für den Zweck dieses Kurses derzeit nicht relevant ist. Als Anfänger müssen wir uns also auf den Indexpunkt HTML konzentrieren. Und hier ist es. Das ist alles für heute und wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 7. 7 Wie reagiert unter der Haube: In dieser Vorlesung werden wir den Ablauf von React als einseitige Anwendung verstehen , was impliziert, wie React JS unter der Haube funktioniert. Öffnen Sie schnell den Befehl B von index.html, um den Explorer aufzurufen. Öffentliches und verschwommenes HTML mit Indexpunkten für Kunden. Öffnen wir die Datei index.js und die App. Fahren Sie mit der Quelle fort, auf welcher der SRC-Indexpunkt js steht, hier ist er? Schließlich müssen wir den Befehl B der App js öffnen, um den Explorer zu schließen. Fangen wir mit der Datei index.html an. Scrollen Sie nach unten. Ich möchte, dass Sie sich dieses Div mit der ID root notieren. Das ist extrem wichtig. Tatsächlich dient dieses Div mit der ID Route als Container für die Empire-Anwendung. Gehen wir zur index.js. Die index.js ist der Einstiegspunkt jeder React-Anwendung. Für die beste Erklärung. Bevor wir fortfahren, werden wir die Anwendung auf React 17 herunterstufen. Und dann bin ich mit der Erklärung fertig. Wir werden es wieder zum Reagieren bringen und direkt in den Zeilen essen, direkt in den Zeilen essen um hervorzuheben, dass der Kunde es abwischt. Hier drüben. Highlights, wisch es ab. Außerdem müssen wir den Befehl X erneut markieren, um hier ein Komma zu platzieren und einzufügen. Also müssen wir das Semikolon entfernen, die Klammern an dieser anderen Klammer hier drüben. Also müssen wir die Wurzel entfernen. Wir werden die Reaktorkuppel verwenden, um sie zu kopieren und hier einzufügen. Wir müssen nur den strikten Modus abhaken. Wunderschön. Jetzt ist es uns gelungen, die Anwendung auf React 17 herunterzustufen . Ich möchte, dass Sie in dieser Vorlesung nur ruhig sitzen und meiner Erklärung maximale Aufmerksamkeit schenken. Lassen Sie uns nun verstehen, wie React JS unter der Haube funktioniert. Oben haben wir React aus dem React-Modul importiert. Unten. Wir haben React DOM von React bis zum Modul. Das React-DOM hilft dabei, die Low-Level-Kuppel von HTML mit der High-Level-Kuppel von React zu verbinden. Und auch der React-Dome hat eine Methode namens Render. Und die zufällige Methode verwendet zwei Parameter. Der erste Parameter sind die Elemente, in diesem Fall ein zu renderndes Reaktionselement. Der zweite Parameter ist ein Vanilla-JavaScript, nämlich document.getElementById. Und es sagt: Hey, ich binde mit dem DOM-Element im HTML. Genau. Ein plötzliches DOM-Element mit der ID von Roots. Und dieses DOM-Element mit der ID von Roots befindet sich direkt in der HTML-Datei. Türen reagieren also darauf, den ersten Parameter mit der ID von Roots in das DOM-Element einzufügen. Der Einfachheit halber wird alles, was Sie hier als ersten Parameter haben , an den Root-DOM-Knoten weitergegeben . Es wird direkt in diesem Div sitzen. Und was noch wichtiger ist, die index.html ist die einzige Seite, die im Browser gespeichert wird , um alles anzuzeigen, was Sie als ersten Parameter an den Roots-DOM-Knoten übergeben. Ordnung, also dieser Ansatz Komponenten auf einer einzigen Seite zu rendern und die Kuppel zu ändern, exabytet das Verhalten einer einzelnen Seite. Daher können wir sagen, dass React js verwendet wird, um eine einseitige Anwendung zu erstellen. Lassen Sie mich das auf den Index j herunterbrechen. Also hier drüben werde ich die App-Komponente als ersten Parameter entfernen und sie löschen. Also werde ich eine Kopfmarke haben, oder? Wir sind in der Spitzengruppe. Ich werde es tun. Speichern wir nun die Anwendung, um zu sehen, was passiert. Sicher. Bumm. Kannst du den Kopf sehen, ein Tag wird im Browser angezeigt. Also wenn wir das Element untersuchen. Rechtsklicken Sie auf Inspect. Genau hier sehen Sie die Datei index.html, die einzige Seite, die im Browser gespeichert ist. Also lasst uns versuchen, den Körper zu öffnen. Wenn Sie den Body öffnen, sehen Sie das Div mit der ID root. Also lasst uns schnell dieses D öffnen. Kannst du sehen, dass das head-one-Tag direkt in dieses Div mit der ID root eingefügt wird direkt in dieses Div mit der ID root So einfach ist das. Verstanden, wunderschön. Lass es uns noch einmal machen. Sie, richtig? Was auch immer Sie hier als ersten Parameter haben , es wird richtig eingefügt, zwischen dem Div mit der ID von Roots und dem Diff mit der Idee von Roots befindet sich genau hier in der index.html. Die index.html ist also die einzige Seite, die im Browser gespeichert wird , um anzuzeigen was Sie zwischen den DV eingegeben haben. Und aus diesem Grund werden Sie, wenn Sie die Konsole untersuchen, das Header-Eins-Tag zwischen dem Div mit der ID eines Roots sehen . Beste Erklärung, gut werden. Wunderschön. Gehen Sie also noch einmal zum VS-Code-Index Punkt js zurück. Lassen Sie uns es also abwischen und die App-Komponente zurückbringen. Übrigens wird die App-Komponente oben importiert. Und wenn Sie im Browser speichern, bumm. Und du wirst die Londoner Seite sehen. Lassen Sie uns die App zurück zu VS code up dot js enthüllen. Und hier in den Objekten haben wir ein Div mit dem Klassennamen unserer App. Und wir haben hier einen Hirten. Wir haben das IMG-Tag, das dieses Logo hier beschreibt , das sich ständig auf dem Bildschirm dreht. Wir haben das P-Tag. Hier, ist es? Schließlich haben wir das A-Tag. Das ist es genau hier. Also genau hier haben wir den Body und hier ist das Div mit der ID von root. Öffnen wir es. Kannst du sehen, wenn du das Div mit der ID root öffnest, wirst du ein anderes Div mit dem Klassennamen up sehen . Hier ist es? Öffnen wir das Div. Wir werden den Header mit dem Klassennamen unseres App-Headers sehen . Und hier ist es. Öffnen wir den Header. Wir haben also den Rest des Inhalts wie das IMG-Tag, das das Logo beschreibt. Wir haben das P-Tag. Kannst du sehen? Und schließlich haben wir das A-Tag, so einfach ist das. Lassen Sie uns die App schnell auf React 18 index.js zurückbringen. Und dann müssen wir einfach rückgängig machen. Jetzt haben wir die App erneut aktualisiert, um zu reagieren. 18 ist genau der gleiche Schmerz. Die App-Komponente ist hier als erster Parameter und sie wird diese Codezeile mit der ID der Wurzelhaare in das Div übergeben . Und du solltest immer daran denken , dass das Div mit der ID root hier in der index.html Spaß macht. Und die index.html ist die einzige Seite, die im Browser gespeichert wird, um den Inhalt anzuzeigen, den Sie zwischen diesem Div einfügen und das war's. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentriere dich darauf, immer vorsichtig zu sein. 8. 8 jsx: In dieser Vorlesung werden wir GSAs verstehen. Gehen Sie also schnell zur App Js-Befehl P, um dieses kleine Suchfeld oben aufzurufen und dann auf AARP einzustellen . Punkt j ist hier, oder? Wenn die Verknüpfung für Sie nicht funktioniert, müssen Sie nur zum Explorer navigieren und dann Mixture öffnen, um das Client-SRC zu öffnen. Und dann ist es hier. Der Explorer wurde geschlossen. Wunderschön. Direkt auf dem Bildschirm haben wir also eine Funktion, die einen Teil der Benutzeroberfläche zurückgibt. Also alles, was Sie hier sehen, heißt DSS. Dss steht einfach für JavaScript XML. Es ist eine Syntaxerweiterung von JavaScript, die verwendet wird , um die Bedeutung und Struktur Ihrer Webinhalte zu definieren . Diese mögen also mit HTML vertraut aussehen, aber es ist kein HTML. Was Sie auf dem Bildschirm sehen, wird GSAs genannt. Einer der Unterschiede zwischen HTML und Jesus ist das Klassennamenattribut. In HTML ist es eine Klasse. Und genau hier bei Jess ist es ein Klassenname, einfach weil class ein reserviertes Schlüsselwort in JavaScript ist. Dieses ganze Modell hier definiert also die Londoner Seite, die aus dem Logo, dem P-Tag und dem A-Tag besteht . Lass es mich dir schnell zeigen. Zurück zum VS-Code. Hier ist das IMG-Tag, das das Logo beschreibt. Ich bin hier, ist es gleich unten? Wir haben das P-Tag. Das ist es genau hier. Und zu guter Letzt haben wir hier das A-Tag. Ist es zurück zum VS-Code? Wenn ich also versuche, alles direkt in diesem Div zu löschen , werden wir ein neues Verhalten erleben. Ich werde vom ersten Header-Tag zum schließenden Header-Tag hervorheben . Wisch es ab. Sicher. Das ist das neue Verhalten. Der Bildschirm ist leer, einfach weil wir die GSS-Ausdrücke gelöscht haben , die die Londoner Seite definieren. Zurück zu VS Code. Außerdem müssen wir das Div mit dem Klassennamen unserer App löschen . Wir wollen alles von Grund auf neu machen. Also hier haben wir ein Headtag und dann ein Hallo Wort, speichern Sie es im Browser. Hey, ist es? Wie schön ist das? Das erste Tag hier beschreibt also die HelloWorld Sie hier im Browser sehen. So einfach ist das. Gehen Sie zurück zum VS-Code und lassen Sie uns weitermachen. Lassen Sie mich nun in Frankreich auf einige wichtige Punkte näher eingehen, die Sie bei Verwendung von GSAs berücksichtigen müssen. In all diesen wichtigen Punkten , die ich mit Ihnen teilen möchte sind äußerst wichtig. Punkt. Nummer eins ist, dass Sie in Jesus nur ein übergeordnetes Wrapper-Element haben können. Also wenn du so etwas machst, z. B. lass uns einen Hashtag haben und ich werde es tun. Ich heiße Barbara. Das würde also definitiv einen Fehler auslösen. Wenn Sie den Browser speichern und auschecken, wird die Beschwerde angezeigt. Es heißt, ich habe Jesus gerade geschickt , Elemente müssen in ein beiliegendes Etikett eingewickelt werden, was bedeutet, dass Sie die von Jess nicht außerhalb eines anderen GSAs haben können . Die einzige Möglichkeit, dies zu tun, besteht darin , den gesamten Jesus in ein übergeordnetes Element zu packen . Also lass uns hier drüben einen DV haben. Dann. Wir markieren, halten Sie die Alt-Taste auf Ihrer Tastatur gedrückt und tippen Sie auf die Aufwärtspfeiltaste, um es hineinzubewegen . Und wie Sie beobachten können, ist der Fehler weg. Lassen Sie uns den Code sauber halten. Wunderschön. Checkout, der Browser, alles funktioniert wie erwartet. Ich liebe es. Komm zurück. Dieses DV hier dient also als übergeordnetes Element. Sie können also keine Gestenelemente außerhalb eines übergeordneten JSX-Elements haben. Also, wenn ich so etwas mache, zB wenn ich hier ein Div habe, wird es einen Fehler geben. Ich habe gerade das Jesus-Element geschickt, das in ein beiliegendes Etikett verpackt sein muss . Das bedeutet also einfach, dass alle Gestenausdrücke in einem übergeordneten Element zusammengefasst werden müssen. Im Moment wird dieses Div also als übergeordnetes Element verwendet. Wir müssen es nur einziehen so einfach ist das. Punkt Nummer zwei. Klassenattribut in HTML wird in GSAs durch den Klassennamen ersetzt, einfach weil class in JavaScript ein reserviertes Schlüsselwort ist. Versuchen wir also, diesem Div einen Klassennamen zu geben. Der Klassenname ist Container. Speichern. Im Browser. Alles funktioniert einwandfrei. Lassen Sie uns also schnell die Konsole untersuchen. Befehl I, um die Konsole zu öffnen. Kannst du sehen, dass alles in Ordnung ist? Zurück zum VS-Code. Versuchen wir also, den Klassennamen im Browser durch class save zu ersetzen . Hier ist die Warnung in einer gültigen DOM-Eigenschaftsklasse. Und es stellte eine Frage. Meinten Sie einen Klassennamen? Ja. Wir meinen einen Klassennamen. Also muss ich zurückgehen und dann sparen. Schau es dir an. Lassen Sie uns die Konsole aktualisieren. Alles funktioniert einwandfrei. Punkt Nummer drei. Bisher wird Gmail in Jesus durch HTML4 ersetzt. Und auch für ist ein reserviertes Schlüsselwort in JavaScript. Als wir also versucht haben, so etwas zu implementieren, also genau hier, werden wir ein Label haben. Und geben wir das for-Attribut equa den Benutzernamen an. Das funktioniert also für HTML. Und wenn Sie es auf GSAs ausprobieren wird auf der Konsole auf jeden Fall eine Warnung angezeigt. Ungültig, Eigenschaft Vier nicht. Komm her. Wir müssen das für zwei ändern, HTML4. Diese werden das Problem also lösen. Sicher im Browser. Aktualisieren Sie die Konsole. Alles ist in Ordnung. Punkt Nummer drei, bei Jess, dem Onclick auf den oberen Rand, werden Indexattribute in Kommatasten geschrieben, was einfach bedeutet, dass Sie den ersten Buchstaben jedes Wortes mit Ausnahme des ersten Wortes groß schreiben. Nehmen wir also an, wir möchten hier eine Schaltfläche implementieren. Dann müssen wir ihre eigene Clique angeben. Wenn du es merkst, wirst du feststellen, dass der Onclick auch in Karma Case geschrieben ist. Wir haben es an die Klammern eines Kollegen gestellt. So implementieren Sie den OnClick in GSAs. Um es noch einmal zusammenzufassen, die Klasse in HTML wird in GSAs durch den Klassennamen ersetzt. Denn HTML wird durch Historie ersetzt, und deshalb wird im Jazz der OnClick-Event-Handler bei Jessie in Kommatasten geschrieben und auch in Klammern von Kollegen gesprochen. Hier können Sie also jede Funktion aufrufen , die Sie in der Anwendung definiert haben. Ich werde das vorerst einfach löschen weil wir in Zukunft den Event-Handler in de Dios behandeln, löschen werden. Und schließlich können Sie GSS-Aspirationen nicht außerhalb der übergeordneten Elemente haben . Alle Gesten und Ausdrücke, die Sie beim Erstellen Ihrer Benutzeroberfläche verwenden werden , werden also Ausdrücke, die Sie beim Erstellen Ihrer Benutzeroberfläche verwenden werden , werden in einem übergeordneten Element zusammengefasst. Also müssen wir es einziehen. Das war's. Das ist alles für heute und wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 9. 10 Arten von Komponenten: Jetzt sind wir fertig mit JSX. Aber es ist extrem wichtig, wissen Sie, diese, wenn ich einen Kommentar zu den Gesten und Ausdrücken abgeben möchte . Wie mache ich das? Technik, z. B. möchte ich einen Kommentar zur Geschichte abgeben. Wie kann ich das in GSAs erreichen? Die Abkürzungen dazu sind also , genau die GSS-Elemente auszuwählen zu denen Sie einen Kommentar abgeben möchten. Und in diesem Fall werde ich einen Kommentar zum H2-Tag platzieren . Sie müssen also nur auswählen. Lass es mich dir noch einmal zeigen. Wählen Sie die Befehlstaste auf Ihrer Tastatur aus, halten tippen Sie dann auf den Schrägstrich. Und genau damit wird der Ausdruck von Jess, den Sie ausgewählt haben , kommentiert . Wenn Sie es bemerken, werden Sie feststellen, dass hier alles in Ecoli-Klammern verpackt ist, okay? Und richtig, in den geschweiften Klammern können Sie die mehrzeiligen Kommentare verwenden. Das ist also der erste mehrzeilige Kommentar. Hier ist der abschließende mehrzeilige Kommentar. Einfach ausgedrückt, um Kommentare in Jess's verwenden zu können, müssen Sie sie in eine geschweifte Klammer packen. Wenn es also in eine geschweifte Klammer gehüllt ist, behandelt React js es als JavaScript-Ausdrücke. Sie können jetzt die mehrzeiligen Kommentare dazu verwenden. Das Gleiche gilt also, wenn Sie den Kommentar entfernen möchten , die Markierungen. Halten Sie die Befehlstaste gedrückt und tippen Sie auf den Schrägstrich. So einfach ist das. Selbst wenn Sie einen Kommentar zu den gesamten Jesses abgeben möchten , ist dies genau derselbe Vorgang. Nehmen wir an, ich möchte zu allem einen Kommentar abgeben, nicht das übergeordnete Element. Also ich muss einfach so markieren, die Befehlstaste oben gedrückt halten. Der Schrägstrich ist so einfach. Wenn Sie die Kommentare entfernen möchten, markieren Sie sie, halten Sie die Befehlstaste gedrückt drücken Sie den Schrägstrich. Genau so laufen Kommentare in GSAs also ab. Ich sehe, dir hat dieser Vortrag gefallen. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 10. 9 Kommentar in Jsx: Vorhin sprachen wir von kompetent und wir verleihen, dass Komponenten wiederverwendbar sind und dass sie auch in einer anderen Komponente verschachtelt werden können . Und jetzt stellt sich die Frage, wie Kompetenz in unserer Anwendung in Code umgesetzt wird? Der einfachste Weg, eine Komponente zu definieren , besteht darin, eine einfache JavaScript-Funktion zu schreiben. In React G haben wir zwei Arten von Beschwerden. Unternehmen mit funktionaler Komponente und Klasse. Funktionale Komponenten oder JavaScript-Funktion. Aber akzeptiere Sonden als Argument und gib dann einen gültigen GSAs zurück, welcher Electro Sense das Mockup ist, das die Benutzeroberfläche beschreibt. Der Einfachheit halber sieht die Syntax so aus. Diese Funktion ist einfach deshalb eine gültige React-Funktionskomponente , weil sie ein einzelnes Prüfobjektargument mit Daten akzeptiert ein einzelnes Prüfobjektargument mit und ein React-Element zurückgibt. Wenn wir also dasselbe mit der Klassenkomponente tun sollen, sieht die Syntax so aus. Aus Sicht von React. Die beiden obigen Komponenten sind gleichwertig, aber nur diese Klassenkomponente ist normalerweise unregelmäßig. Es6-Klassen, die eine kompetente Klasse aus der React-Bibliothek entfernen. Und es muss eine zufällige Methode haben, die die von Jess zurückgibt, was wiederum die Benutzeroberfläche beschreibt. In diesem Kurs werden wir uns jedoch an das funktionale Unternehmen halten einfach weil es extrem einfach ist, darüber nachzudenken. Und auch die Klassenkomponente verschwindet allmählich. Mehrheit der Unternehmen schreibt die Anwendung jetzt mit einer funktionalen Komponente neu. Wir müssen also auf jeden Fall den Trends folgen. Verwendung der Funktionskomponente. Wir müssen uns keine Sorgen um den Status machen , da wir mit Hilfe von Hooks den State und andere React-Futures nicht verwenden können , ohne eine Klasse zu schreiben. Und Hooks wurde 2018 eingeführt. React-Konferenztechnik. bei der Benennung Ihrer Komponenten Verwenden Sie bei der Benennung Ihrer Komponenten immer die Gewürzkonvention der Vergangenheit, was bedeutet, dass Sie den ersten Buchstaben jedes Wortes groß schreiben. Also werden z.B. Home-Komponenten so geschrieben. Wenn du es so nennst, React js, behandeln wir es wie einen Kuppelpark. Wunderschön. Der Punkt ist jedoch, dass ein Komponentencode normalerweise in einer JavaScript-Datei mit einer Punkt-JS-Erweiterung oder einer Punkt-CSS-Erweiterung geschrieben einer JavaScript-Datei mit einer wird. In diesem Kurs bleiben wir jedoch bei der Dot-JS-Erweiterung, z. B. werden die Home-Komponenten so geschrieben. Hauskomponenten Punkt. In Ordnung, das ist alles für heute. Und in der nächsten Vorlesung werden wir unsere ersten Funktionskomponenten von React erstellen . Wir sehen uns in der nächsten Vorlesung. 11. 11 Erstellen unseres ersten funktionalen Bauteils: Lassen Sie uns fortfahren, eine funktionale Komponente zu erstellen. Um fortzufahren, müssen wir das Komponentenverzeichnis erstellen. Öffne den Client. Innerhalb des SRC. Wir müssen mit der rechten Maustaste klicken und dann einen neuen Ordner. Und ich nenne es Komponenten. Beachten Sie, dass ich hier ein Wort im Plural verwendet habe. Das liegt einfach daran, dass wir so viele Komponenten im Verzeichnis dieser Komponente haben werden, richtig. Es sollte also eine gute Praxis sein, es mit Pleura Road Pizza auf der Enter-Taste zu benennen . Dann sind wir im Komponenten-Verzeichnis. Wir werden die Komponentendatei erstellen. Klicken Sie hier auf Neue Datei mit der rechten Maustaste auf Komponenten. Die Demo-Komponente punktet mit der Phrase von j. Ich möchte, dass Sie die üblicherweise bei der Benennung dieser Komponente verwendete Bezeichnung zur Kenntnis nehmen . Es wird Pascal-Namenskonvention genannt. Es bedeutet, dass Sie den ersten Buchstaben jedes Wortes groß schreiben. Außerdem möchte ich, dass Sie die Spannung zur Kenntnis nehmen. Hier wird Punkt g auf die Enter-Taste gedrückt und weniger Befehl B ausführen, um den Explorer zu schließen. Also hier werden wir die funktionale Komponente von Grund auf neu erstellen . Also müssen wir zuerst React aus dem React-Modul importieren. Im Moment ist dies optional. In Ordnung, also was den Code angeht, sind Komponenten einfach JavaScript-Funktionen. Und der Name dieser Komponente ist Demo-Komponente. funktionale Komponente gibt das JSX-Markup zurück, das die Benutzeroberfläche beschreibt. Wir werden ein Div haben, oder? Innerhalb des Divs werden wir ein Headtag haben und ich werde Hallo Lot machen. Das ist also am einfachsten. Jetzt ist es uns gelungen unsere funktionale Komponente zu erstellen. In der nächsten Zeile soll es im Browser angezeigt werden. Damit diese Komponente im Internet angezeigt wird. Das erste, was wir tun werden , ist die Komponente zu exportieren. Also hier werde ich die Exportfunktion, die Demo-Komponente, ausführen. Also habe ich die Funktion nicht exportiert. Wir müssen die Demo-Komponente direkt in der App rendern. G ist Befehl P, um das Suchfeld oben aufzurufen. Und wir werden nach bis suchen. Hier, ist es? Also hier werden wir zwei Schritte unternehmen. Schritt eins ist das Importieren der Demo-Komponente. Hier müssen wir also Demo-Komponenten aus offenen und geschlossenen einfachen Anführungszeichen importieren, oder Sie können auch doppelte Anführungszeichen verwenden. Hier müssen wir also auf das Verzeichnis abzielen , in dem sich die Demo-Komponente befindet. Dafür werde ich also Komponenten mit Schrägstrich machen . Die Slash-Demo-Komponente ist so einfach. Das habe ich nicht getan. Wir müssen diese Komponente direkt in der Rückgabeerklärung rendern . Also, was ich jetzt tun werde, ist, die Zeilen neun bis 13 hervorzuheben und sie zu löschen. Also müssen wir die Demo-Komponente direkt zwischen diesem Div mit dem Klassennamen Container rendern direkt zwischen diesem Div mit dem Klassennamen Container und sie dann schließen. Wenn wir keine Kinder zwischen dem Etikett haben, wäre es toll, das selbstschließende Etikett zu verwenden. Also markiere ich das abschließende Etikett und wische es direkt in den eckigen Klammern ab. Ich spezifiziere nur den Schrägstrich. Dies wird als selbstschließendes Etikett bezeichnet. Sicher. Im Browser. Bum, alles funktioniert wie erwartet. Und hier siehst du das Grußwort. Hallo nochmal. Jetzt haben wir die funktionalen Komponenten erfolgreich erstellt und im Web angezeigt. Herzlichen Glückwunsch. Das ist alles für heute und wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 12. 12 Arten von Export: Ax6 bietet zwei verschiedene Möglichkeiten Module aus einer Datei zu exportieren, darunter den Standardexport und den benannten Export. Wenn Sie den Bildschirm betrachten, werden Sie feststellen , dass wir diese Komponente als Standardexport exportieren. In Ordnung, der Standardexport ermöglicht es uns, ein Modul zu exportieren und diesem Modul einen beliebigen Namen zu geben , wann immer Sie es importieren möchten. Da wir die Demo-Komponente hier als Standardexport exportiert haben, können wir ihr einen beliebigen Namen geben. Okay, also nehmen wir zum Beispiel ich werde das einfach abwischen und dann werde ich Grid-Komponenten machen. Und hier müssen wir das Gleiche tun. Wir müssen Raster, Komponenten und Checkouts rendern. Alles funktioniert wie erwartet. Das kann also nur funktionieren, wenn Sie den Standardexport verwenden . Ein weiterer wichtiger Punkt, Sie beachten müssen, ist, dass es pro Modul nur einen einzigen Standardexport gibt. Also hier drüben, in dieser Komponente, werden wir keinen Standardexport mehr haben können. Sie können in einem Modul nur einen Standardexport haben. Klingt gut, Beautiful. Die nächste Zeile ist nun der benannte Export. Benannte Exporte sind nützlich , um mehrere Werte zu exportieren. Und während des Imports kann man genau denselben Namen verwenden , um auf den entsprechenden Wert zu verweisen. Lass es mich dir schnell zeigen. Also hier drüben, wenn wir den benannten Export verwenden wollen , müssen wir nur den Standard hier markieren und ihn dann löschen. Dies wurde in benannter Export umgewandelt. Also, wenn Sie im Browser speichern, hier ist die Beschwerde. Es versucht zu sagen, dass die Grid-Komponente nicht existiert. Gehe zurück zu VS Code und gehe zur App js. Und dann müssen wir genau den gleichen Namen des Moduls verwenden . Und hier ist der Name des Moduls Demo-Komponente direkt zur App. Um also mit dem benannten Export zu arbeiten, müssen wir den exakt gleichen Namen in geschweifte Klammern setzen. Genau hier. Wir werden eine lockige Klammer haben. Dann werde ich das einfach abwischen. Stimmt es? Innerhalb der College-Klammern müssen wir das Modul genau anhand seines Namens importieren, und der Name ist Demo-Komponente. Nachdem wir das getan haben, müssen wir auch die X-Hat-Komponente hier importieren , sie markieren, abwischen und dann werde ich die Demo-Komponente machen. Schau es dir im Browser an. Alles funktioniert wie erwartet. Ich liebe es. Okay, um es noch einmal zusammenzufassen Wenn Sie den Standardexport verwenden, könnten Sie keinen Namen für das Essen angeben , wenn Sie es importieren möchten. Und Sie können nur ein Standard-Exportpaar-Modul haben. Im Vergleich zu den genannten Exporten, bei denen wir mehrere Werte aus einem Modul exportieren können . Während des Imports kann man exakt denselben Namen verwenden , um auf den entsprechenden Wert zu verweisen. Dies ist oft eine synchrone Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 13. 13 Requisiten: Wir kommen jetzt, um darüber zu sprechen vielleicht ohne die Komponenten zu erwähnen. In den vorherigen Vorlesungen haben wir gelernt, dass Sie mit dieser Komponente die Benutzeroberflächen in unabhängige, wiederverwendbare Segmente aufteilen können. Deshalb möchte ich, dass Sie jetzt über jedes Segment isoliert nachdenken. Die Frage ist, wenn Komponenten voneinander getrennt sind, wie geben wir Informationen von Komponente A an Komponente B weiter? Hier, da Lee ist, wo die Sonden ins Spiel kommen. Was also genau ist, steht vielleicht für Eigenschaften. Es ist ein Objekt, das den Wert eines Angriffsattributs speichert . Und ermöglicht es Ihnen vielleicht auch, Daten von einer Komponente an eine andere zu übergeben. Genau von einer übergeordneten Komponente zu einer untergeordneten Komponente. Beachten Sie diese wichtigen Punkte. Requisiten sind unveränderlich, was einfach bedeutet, dass ihr Wert nicht geändert werden kann. Habe das alles nicht verstanden. Weiter zu VS Code und weniger praktisch wie schnell. Lass uns schnell die Stirnmarke loswerden. Geht zur App-Komponente über. Hier drüben. Ich muss nur den Klassennamen in App ändern , nur weil ich die Standard-CSS-Datei verwenden möchte. Ein weiterer wichtiger Punkt, Sie zur Kenntnis nehmen sollten , ist , dass Eingabeaufforderungen an einen kompetenten VGS weitergegeben werden können . Dies sind unsere Eigenschaften. Beispielsweise möchten wir Daten von der App-Komponente an die Demo-Komponente weitergeben . Um das zu tun, müssen wir zuerst die Attribute spezifizieren. Nehmen wir also an, wir wollen einen Namenstest bestehen. Also hier wird das Attribut benannt, weisen Sie ihm einen Wert zu . Gänseblümchen. Das ist also das Attribut. Hier ist der Wert an. All dies zusammen wird als Sonden bezeichnet. Nachdem wir dies getan haben, ist es uns gelungen, Sonden an die Demo-Komponente zu übergeben . Aber wenn Sie den Browser auschecken, passiert nichts. Sie können also im Browser nichts sehen. Wissen Sie warum? Es liegt einfach daran, dass wir auch die Sonden erhalten müssen, oder? In der Demo-Firma ist es sehr einfach, zur VS-Code-Demo-Komponente zurückzukehren VS-Code-Demo-Komponente , um die Sonden zu erhalten. Alles was wir tun müssen, ist, eine Sonde als Argument innerhalb der Funktion zu verwenden, richtig. Also werde ich Sonden machen. Sie können beschließen, den Namen der Sonden in einen anderen Namen zu ändern . Ich empfehle Ihnen jedoch dringend, sich an die Konvertierungstests zu halten , da dies die Konvention ist , die unter Entwicklern weit verbreitet ist. Nachdem wir dies getan haben, ist es uns gelungen, die Sonden direkt hier in der Demo-Komponente zu empfangen . Lass es mich dir zeigen. Diese Requisiten hier werden also im Requisitenobjekt gespeichert. Lass es mich dir beweisen. Komm her. Dann. Wir werden die Requisiten auf der Konsole protokollieren. Wir wollen also den Wert sehen, der in diesem Requisitenobjekt gespeichert ist . Gehe zum Browser. Lassen Sie uns schnell die Konsole untersuchen. Alt-Befehl I, um die Konsole zu öffnen. Wenn Sie die Konsole untersuchen, sehen Sie ein Objekt. Also lasst uns das Objekt schnell öffnen. Genau hier. Wir haben im Objekt- und Attributnamen den Wert Daisy. Technisch gesehen haben wir die Sonden bis in die Demo-Komponente erhalten . Das Nest und ln dienen dazu, auf den Requisitenwert zuzugreifen und ihn im Browser anzeigen zu lassen. Wenn wir also auf den Wert der Sonden zugreifen wollen, müssen wir nur auf die Attribute abzielen und dann würde der Wert direkt im VS-Code angezeigt. Und lass uns das schnell machen. Also genau hier werde ich ein Hadrian-Tag angeben , weil ich es direkt innerhalb des Header-h1-Tags machen möchte . Also normalerweise mache ich Requisiten Punktnamen im Browser. Sie werden Sonden sehen, die einfach deshalb so benannt sind, weil sie als Tests behandelt wurden. Damit das funktioniert, müssen wir hier die geschweiften Klammern verwenden und dann den Befehl X markieren, um ihn auszuschneiden und hier einzufügen. Wenn Sie es also in eine geschweifte Klammer packen, wird der JSON-Parser in der Lage sein, es als JavaScript-Ausdrücke zu erkennen JavaScript-Ausdrücke als Geschmacksache im Browser. Hier haben wir Daisy. In Ordnung, also lassen Sie uns schnell den VS-Code hinzufügen und weitere Attribute für die Component Tree-App-Komponente hinzufügen. Und hier haben wir die Requisiten als Namen. Jetzt werden wir noch eine Sonde haben. Weisen Sie ihm als Land den Wert Brasilien, sicher zu. Im Browser. Sie werden sie auf jeden Fall auf dem Bildschirm sehen. Aber wenn Sie sich die Konsole ansehen, werden Sie den Namen Daisy und das Land Brasilien sehen. Lassen wir es uns also schnell im Browser anzeigen. Zurück zur VS-Code-Demo-Komponente. Und dann mache ich hier Requisiten Dot Country, sicher im Browser. Und wir sind hier angekommen, Brasilien. In Ordnung, lassen Sie uns diese aussagekräftiger machen. Komm her, direkt im Header-H1-Tag. Ich mache „I am Requisiten“ -Punktnamen von Sonden, diesem Land. Sicher im Browser. Ich bin Daisy aus Brasilien. Wie schön diese. In Ordnung, also lass uns weitermachen. Hier hinten. Jetzt haben wir erfolgreich Tests von einer übergeordneten Komponente an die untergeordneten Komponenten weitergegeben . Um es noch einmal zusammenzufassen: Beim Umgang mit Sonden sind drei Schritte erforderlich. Der erste Schritt besteht darin, die Sonden zu senden, stimmt, Jess hat Attribute in die untergeordnete Komponente. Und Schritt zwei besteht darin, die Sonden zu erhalten, okay, und zwar mit dem Parameter einer Rezeptur. Und danach müssen wir es im Browser anzeigen, so einfach ist das. Okay, jetzt möchte ich, dass Sie sich daran erinnern, dass Komponenten wiederverwendbar sind. Gehen Sie schnell zu den Objekten und lassen Sie mich Ihnen beibringen , wie Sie diese Komponente wiederverwenden können. Ich werde diese Komponente nur hervorheben und dann Browser so oft duplizieren, wie ich möchte. Jetzt haben wir diese Komponenten wiederverwendet, aber Sonden. Das ist eine der Schönheiten von React, die mir den Kopf schwirrt. Ein weiterer wichtiger Punkt ist also , dass wiederverwendbare Komponenten mit unterschiedlichen Eigenschaften wiederverwendet werden können , um unterschiedliche Informationen anzuzeigen . Der VS-Code bleibt erhalten, und lassen Sie uns das schnell erledigen. Gegen Code. Hier. Dieses Attribut wird auch als Eigenschaft bezeichnet. Ich möchte den Wert des Attributs ändern. Hier werde ich mein Ziel erreichen, und mein Ziel ist aus den USA. Ändern Sie das Attribut hier. Sahelzone. Sahel kommt aus Indien. Und zu guter Letzt nehmen wir mir eine Doppelbar. Und das tun sie. Baba kommt aus Großbritannien. Im Browser. Kannst du das sehen? Hier haben wir DC aus Brasilien, Michael von USC, Sahel aus Indien. Und schließlich die Toolbar aus Großbritannien. Dies veranschaulicht, wie eine wiederverwendbare Komponente mit Sonden funktioniert. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 14. 14 Props.children: Requisiten tun Jhu Drain. Wenn Sie genau hinschauen, werden Sie feststellen , dass wir für all diese Komponenten ein selbstschließendes Etikett verwenden . Warum? Das liegt einfach daran, dass die Komponenten keine Kinder haben. In React ist G eine Komponente mit Kindern wird immer durch ein öffnendes und ein schließendes Tag identifiziert. Und die Kinder müssen zwischen den beiliegenden Schildern platziert werden . Nehmen wir an, wir möchten einige Informationen über diesen Typen hinzufügen , einschließlich seines Profilbilds. Wie gut, also was ich tun werde, um zuerst das selbstschließende Etikett zu entfernen und es dann mit dem eigentlichen Schließetikett zu schließen. Und hier ist es. Dies ist also das abschließende Tag, das verwendet wird, wenn die Komponente untergeordnete Elemente hat. Und in diesem Fall werden wir hier ein P-Tag haben. Und genau, innerhalb dieses P-Tag, das ich hier mache, werden wir ein weiteres P-Tag haben. Und zum Schluss mache ich das, wir werden ein Profilbild haben. Um mit Bildern zu arbeiten. Zuerst müssen wir dieses Bild importieren. Es gibt also mehrere Möglichkeiten, dies zu tun. Ich werde Befehl B ausführen, um den Explorer direkt im SRC zu öffnen . Wir werden einen neuen Ordner erstellen. Und das werden aufgenommene Bilder sein. Also richtig, in diesem Bilderordner werden wir das Profilbild importieren. Also, was ich jetzt tun werde, ist den VS-Code zu maximieren. Und hier auf meinem Desktop werden Sie das Verzeichnis der Grundmaterialien sehen. Zum Öffnen anklicken. Übrigens, dieses Verzeichnis befindet sich genau dort in der Beschreibung. Und hier ist das Profilbild. Also ziehe ich es einfach direkt in das Bildverzeichnis. Kannst du sehen, hier ist das Profilbild. Maximieren Sie den VS-Code-Befehl B, um den Explorer und dann auch das Profilbild zu schließen. Ganz oben müssen wir also Profilspitzen von importieren. Wir müssen also auf den SRC abzielen, direkt im SRC haben wir das Images-Verzeichnis. Direkt in den Bildern müssen wir das Profilbild genau anvisieren. Profilbilder Punkt PNG. Ich denke das ist richtig, oder? Also lass es uns schnell überprüfen. Befehl B. Hier haben wir das Profil Pigs Dot PNG. Es ist äußerst richtig. Scrollen Sie also nach unten und hier haben wir ein IMG-Tag als RC, das dieser Eingabe hier entspricht. Also müssen wir das Import Copy nennen, komm her, füge ein, schließe das IMG-Tag. Wenn Sie speichern und im Browser auschecken, werden Sie sehen, wie die Kinder herausfinden, warum. Das liegt einfach daran, dass wir auch die Heroinsonden der Kinder schnell zur Demo-Komponente von VS Code abrufen müssen. Also genau hier holen wir die Sonden der Kinder ab. Also lass es uns direkt innerhalb des H2-Tags machen, Klammer öffnen und schließen. Also, um die Sonden der Kinder abzurufen, werden wir nur Requisiten, Punkte, Kinder im Browser machen. Hier sind die Kinder. Das ist extrem genial. Um es noch einmal zusammenzufassen. Öffnen Sie die App js, und dann wird alles, was Sie hier zwischen dem Öffnungs - und dem Schließtag haben , als Children Probes bezeichnet. Und um die Sonden der Kinder abzurufen, müssen Sie nur Sonden, Punkte, Kinder, tun , so einfach ist das. Kehren Sie zu den App-Komponenten zurück. Und jetzt stellt sich die Frage, welche Art von Inhalt für Testpunktkinder zulässig ist, der Inhalt wird an eine Komponente übergeben, true fordert Sie auf, dass Kinder die folgende undefinierte boolesche Nullzahl, Zeichenfolge, React-Elemente einschließlich einer RA angeben können die folgende undefinierte boolesche Nullzahl, Zeichenfolge, . Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 15. 15 Props Unbedenklichkeit: Ein weiterer wichtiger Punkt , den wir beachten müssen , ist, dass Sonden unveränderlich sind. Und das bedeutet einfach, dass der Wert einer Sonde nicht geändert werden kann. Lass es mich schnell beweisen. Öffnen Sie die Demo-Komponente. Und hier werden wir versuchen, dem Namensattribut einen anderen Wert zuzuweisen. Also werde ich es hier machen. Requisiten, Dot Name, Equa, Angela im Browser, die Anwendung wird unterbrochen. Lassen Sie uns schnell nachsehen. Die Konsole. Der Eigenschaftsname kann nicht einem schreibgeschützten Wert zugewiesen werden. Sonden sind also schreibgeschützt, was einfach bedeutet, dass der Wert eines von einer übergeordneten Komponente gesendeten Testwerts in der untergeordneten Komponente nicht geändert werden kann . Und das ist der Grund, warum, wenn wir versuchen, dem Namensattribut einen anderen Wert zuzuweisen , die Anwendung Briggs. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 16. 15 Props Zerstörung: Prompts Destruktor in dieser Doktrin wurde in EXE eingeführt, da es sich um eine JavaScript-Zukunft handelt , die es Ihnen ermöglicht, mehrere Datenelemente aus einem Array oder einem Objekt zu extrahieren mehrere Datenelemente aus einem Array und sie dann ihren eigenen Variablen zuzuweisen. Das Schöne an der Strukturierung ist , dass sie die Lesbarkeit des Codes verbessert. Bei funktionalen Komponenten gibt es also zwei Möglichkeiten, Sonden zu destrukturieren, aber wir werden uns für die beste Option entscheiden , nämlich Sonden direkt innerhalb des Perimeters einer Funktion zu destrukturieren . Lass es uns versuchen. Stimmt es? Wir befinden uns im Parameter dieser Funktion, wir müssen sie abwischen. Und dann technisch gesehen Klammer. Gehen wir also zurück zur App. Hier haben wir den Attributnamen und das Attribut Land, oder? Also komm zurück, wir müssen genau auf den Attributnamen calmer country, comma, abzielen . Kinder haben diese Strukturierung nicht durchgeführt. Wir müssen direkt auf alle Attribute zugreifen. Wir brauchen die Sonden nicht mehr. Deshalb werde ich alle Vorkommen von Requisiten Punkt hervorheben . Halten Sie dann die Befehlstaste gedrückt und tippen Sie auf der Tastatur auf den Buchstaben D. D wie Hund, so, und dann wisch es ab. Drücken Sie die Esc-Taste, um die multikulturelle Bearbeitung zu deaktivieren. Schauen wir uns den Browser an. Kannst du sehen, dass alles wie erwartet funktioniert? Ich liebe es. Um es noch einmal zusammenzufassen: Wenn Sie Sonden destrukturieren möchten , muss dies direkt innerhalb des Parameters einer Funktion geschehen . Und um das zu tun, musst du zuerst eine lockige Klammer tragen. Und richtig, innerhalb der geschweiften Klammer, können Sie dann genau auf den Namen des Attributs abzielen. Was Sie also wissen sollten, ist Folgendes. Also hier, wenn du einen Fehler machst, lass uns hier etwas Böses machen. Lass uns das Land so pellen. Wenn Sie dies tun, speichern wir im Browser. Du wirst ein seltsames Ergebnis bekommen. Schau, der Name wird auf dem Bildschirm angezeigt, aber die Länder sind verschwunden. Wenn Sie diese Struktur ausführen, müssen Sie also genau auf den Namen des Attributs abzielen. Also mache ich es einfach rückgängig, rette Bone. Alles funktioniert wie erwartet. Ich liebe es. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 17. 16 Funktion als Requisiten: In der vorherigen Vorlesung haben wir gelernt, wie Requisiten von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben werden. Die Frage ist nun, ist es möglich, Requisiten von untergeordneten Komponenten an eine übergeordnete Komponente zu übergeben ? Und die Antwort lautet nein. Sie können Sonden nicht direkt von einer untergeordneten Komponente an eine übergeordnete Komponente übergeben . Sie können jedoch eine Referenz auf eine Funktion als Sonden an die untergeordnete Komponente übergeben . Etwas streifig, oder? Lass es uns schnell praktisch betrachten, damit du es gut genug verstehen kannst. Öffne den Explorer. Stimmt es? Wir sind in den Komponenten. Wir werden eine neue Komponente erstellen. Der Punkt g der Eltern befindet sich wieder direkt in der Komponente. Wir müssen auch eine weitere Komponente erstellen, child dot js. Wunderbar, schließ den Explorer. Dann muss ich auch die Demo schließen und die App spottet. Also nicht die übergeordnete Komponente, ich werde die Abkürzungen RFC verwenden, um die funktionale Komponente React js zu generieren. Auch hier gilt: Wenn die Verknüpfung auf Ihrer Seite nicht funktioniert, liegt das daran, dass Sie das Snippet nicht installiert haben. Um das Snippet zu installieren, gehe zu den Erweiterungen. Zum Öffnen anklicken. Also genau hier machen wir uns auf den ESM gefasst. React Slash, Redox Slash GraphQL, React Dash, native Snippets. Ich bin hier. Ist es ein Klick zum Öffnen? Und auf meiner Seite habe ich es schon installiert. Und deshalb seht ihr hier das deinstallierte Voting. Am Ende müssen Sie also nur noch auf die Schaltfläche Installieren klicken und dann wird es installiert. Schließen Sie es und schließen Sie auch die Erweiterungen. Jetzt funktioniert die Abkürzung für Sie. Wie richtig, lass uns weitermachen. Also direkt im Div werden wir einen Treffer haben, hier mache ich das ist Parent Component. Gehen wir zu dem Kind. G ist hier, ist es auch? Wir müssen die Funktionskomponente React js, RFC und Bone generieren . Wunderschön. Nachdem wir dies getan haben, definieren wir eine Funktion direkt in den übergeordneten Komponenten und übergeben diese Funktion dann als Sonden an die untergeordnete Komponente, die Elternkomponente. Und lass es uns gleich hier machen. Stimmt es? Also werde ich die Funktion Greet Parent machen. Also richtig, innerhalb dieser Funktion werden wir einen Dialog führen. Genau hier. Wir möchten „ Willkommen als Elternteil“ anzeigen. Das Nest und die Linie bestehen also darin, diese Funktion als Sonden an die untergeordnete Komponente weiterzuleiten. Lass es mich dir schnell zeigen. Oben müssen wir also untergeordnete Komponenten aus untergeordneten Komponenten mit Schrägstrich importieren . Lassen Sie uns also schnell die untergeordneten Komponenten rendern. Kind näher mit dem selbstschließenden Etikett. Wunderschön. Habe das nicht gemacht. Wir können nun damit fortfahren, die Funktion als Sonden an die untergeordnete Komponente weiterzuleiten . Dazu müssen wir das Attribut angeben und ihm dann einen Wert zuweisen. Aber dieses Mal wird der Wert diese Funktion sein, markieren und dann Kopieren, komm her, füge ein. Das sind also die Attribute und hier ist der Wert. Und all das nennt man Sonden. Verstanden, wunderschön. Wenn Sie dies tun, uns gelungen, diese Funktion als Sonden an die untergeordnete Komponente weiterzugeben . Nachdem wir dies getan haben, müssen wir die übergeordnete Komponente direkt im App-Befehl P rendern , um das Set-Feld oben anzuzeigen. Dann suche ich hier oben, oder? Wir müssen also nur einen Kommentar zu all diesen Highlights der Öfen abgeben . Halten Sie die Befehlstaste gedrückt und drücken Sie den Schrägstrich. Oben müssen wir also die übergeordneten Komponenten aus der übergeordneten Komponente mit einem Schrägstrich importieren . Direkt unten. Wir müssen die Eltern mit dem selbstschließenden Etikett näher an uns heranbringen. Speichern Sie, kehren Sie zu den übergeordneten Komponenten zurück. Jetzt ist es uns also gelungen, Requisiten an die untergeordneten Komponenten zu übergeben . Western Line soll es direkt in der untergeordneten Komponente empfangen . Kind. Und um das zu tun, müssen wir nur seine Requisiten als Argument nehmen. Und dann, wenn Sie die Konsole protokollieren , suchen Sie im Browser oder geben Sie den Befehl I ein , um die Konsole zu öffnen. Und wir müssen auch das Requisitenobjekt öffnen . Und hier ist das Attributraster mit der Funktion Grid Parents als Wert, der zurückgeht. Der Zweck dieser Vorlesung besteht also darin, die Funktion, die wir in der übergeordneten Komponente definiert haben, genau hier, in der untergeordneten Komponente, aufzurufen die Funktion, die wir in der übergeordneten Komponente definiert haben , genau hier, . also auf den Abbruch in der untergeordneten Komponente klicken, wollen wir diese Funktion aufrufen können, kommen Sie zurück, um uns zu kontaktieren. Lass uns gleich hier einen Button haben. Und genau hier. Wir müssen den Onclick angeben. Ein Klick auf das Boot. Wir wollen die Funktion grid parent aufrufen können. Und natürlich wissen Sie, dass die Funktion grid parent bereits im Requisitenobjekt gespeichert ist . Also werde ich jetzt Requisiten, Punkte, Raster machen. Wenn Sie dies also tun, sicher im Browser, ist dies die übergeordnete Komponente. Hier sind die untergeordneten Komponenten. also auf diese Schaltfläche klicken, wollen wir die Funktion aufrufen, die in der Clique der übergeordneten Komponente definiert wurde . Kannst du das sehen? An Eltern arbeiten? Um es noch einmal zusammenzufassen, definieren wir die Funktion hier in den übergeordneten Komponenten. Und danach übergeben wir die Funktion dann als Sonden an die untergeordneten Komponenten. Wann immer wir also Requisiten Dot Grid verwenden, wird der Wert abgerufen , der an die Attribute übergeben wird, in diesem Fall die übergeordneten Elemente des Funktionsrasters. Und schließlich lösen wir den unteren Teil aus, indem wir den Onclick angeben. Ein Klick auf diesen Button. Diese Funktion hier wird aktiviert. Was genau ist der Vorteil dieser Maßnahmen? Ordnung, der Vorteil dabei ist , dass es zur Leistungsverbesserung beiträgt. Wenn Sie also eine Belohnungsanwendung erstellen, stoßen Sie möglicherweise auf eine Situation , in der Sie eine Funktion in verschiedenen Komponenten verwenden möchten . In Ordnung, lass es mich dir schnell zeigen. Öffnen Sie den Explorer und dann Rechte innerhalb der Komponente. Rechtsklicken Sie auf die neue Datei. Und ich werde diese Benutzer dot js nennen. Schließen Sie den Explorer und generieren Sie die Funktionskomponente React js. Stimmt es? Innerhalb dieser Komponente möchten wir dieselbe Funktion auch nutzen. Okay? Was ich jetzt tun werde, ist, zuerst die Benutzerkomponenten von Dot Slash User zu importieren. Wir müssen es hier rendern. Näher ran mit dem selbstschließenden Etikett. Ich werde die Attribute Grids angeben und ihnen dann einen Wert zuweisen, in diesem Fall das übergeordnete Funktionsraster, das direkt als Komponente wiederverwendet werden kann. Dann müssen wir die Sonden erhalten. Also muss ich jetzt einfach zurück zu dem Kind gehen und diesen unteren Teil kopieren. Ich bin hier. Paste. Schauen wir es uns im Browser an. Hier ist das Bootfahren aus der untergeordneten Komponente und hier das Bootfahren aus der Benutzerkomponente. Wenn wir also auf die Schaltfläche und die Benutzerkomponente klicken, können Sie sehen, dass wir dieselbe Funktion aufrufen , die in der übergeordneten Komponente definiert ist . Und auch wenn wir auf die Diagrammkomponente klicken, funktioniert es genauso. Also, wenn Sie eine Anwendung erstellen und dieselbe Funktion in verschiedenen Komponenten verwenden möchten . Die beste Option besteht darin, diese Funktion als Sonden an die Komponente zu übergeben , die Seeds benötigt. So einfach ist das. Gehen wir zurück zu dem Kind. Ein weiterer wichtiger Punkt, den Sie beachten sollten, ist die Übergabe von Parametern beim Aufrufen einer in der übergeordneten Komponente definierten Funktion von der untergeordneten Komponente aus. Das ist also extrem wichtig. Tatsächlich erscheint es hauptsächlich als Interviewfrage. Lassen Sie uns nun darauf achten, wie das geht. Der einfachste Weg, Parameter von der untergeordneten Komponente an die übergeordnete Komponente zu übergeben , besteht darin Syntax der Pfeilfunktion zu implementieren. Wir werden hier eine Pfeilfunktion haben. Spezifizieren Sie es so. Damit können wir also eine beliebige Anzahl von Parametern an die Greet-Funktion übergeben . Lass es mich dir schnell zeigen. Also genau hier, wäre keine Funktionsstörung. Wir werden gleich hier die Fäden ziehen. Ich werde es tun, ich bin ein Kind. Wir wollen diese als Parameter an die übergeordnete Grid-Funktion übergeben. Hier. Wir müssen es richtig integrieren, in die verordnete Elternfunktion. Also hier werde ich ein Kind machen. Jetzt verwenden wir die Zeichenketteninterpolation. Ändere es in Embark tick, tack, tick. Wir nehmen geschweifte Klammern. Also werde ich gleich hier ein Kind machen. Ich werde nur einen Kommentar zu diesen abgeben. Nachdem wir dies getan haben, schauen wir uns das Ergebnis im Browser an. Klicken Sie auf die Schaltfläche. Du wirst sehen, willkommen Eltern, ich bin ein Kind. Und ich möchte, dass Sie sich daran erinnern, dass dies als Parameter von der untergeordneten Komponente an die übergeordnete Grid-Funktion übergeben wurde von der untergeordneten Komponente . Und die übergeordnete Grid-Funktion ist in den übergeordneten Komponenten definiert. Genau so werden also Parameter übergeben, wenn eine in den übergeordneten Komponenten definierte Funktion von der untergeordneten Komponente aus aufgerufen eine in den übergeordneten Komponenten definierte Funktion wird. Und bitte, ich möchte, dass Sie das zur Kenntnis nehmen, da es sich hauptsächlich um eine Interviewfrage handelt. Das ist alles für heute. Ich sehe, dir hat dieser Vortrag gefallen. Bleib konzentriert und pass immer auf dich auf. 18. 17 React State (useState): In dieser Vorlesung werden wir verstehen, wie State in React js funktioniert. Okay, nehmen wir an, Sie erstellen eine Anwendung und möchten die Daten einer Komponente verwalten , die sich im Laufe der Zeit ändern. Beispielsweise möchten Sie auf einen Klick auf eine Schaltfläche den Titel Ihrer Bewerbung in einen anderen Namen ändern . Ja, das wird also mit den US-Schuldenhaken gemacht. Weniger praktisch wie schnell, erstellen Sie also schnell eine neue Komponente mit dem Titel Component Command B. Klicken Sie hier auf Neue Datei mit der rechten Maustaste auf das Komponentenverzeichnis . Geben Sie Tool components dot g is generate ein. Die funktionale Komponente. Hier ist, wir hatten danach eine Firma, öffnen Sie die App js und dann lassen Sie uns diese Komponente genau hier ausführen. Zuerst müssen wir es importieren, Titelkomponenten aus Komponenten-Slash-Titelkomponente importieren. Zu diesen müssen wir auch einen Kommentar abgeben. Komm her und titelkompetent, näher ran mit dem sich selbst schließenden Tag, weiter zur Titelkomponente. Das Ziel dieser Vorlesung ist es also, den Titel unserer Anwendung zu ändern , wenn auf die Schaltfläche geklickt wird. Um also Kompetenzdaten zu erhalten, die sich im Laufe der Zeit ändern, müssen wir den US-Bundesstaat, der schaut, nutzen. Ganz oben müssen wir es also nur importieren. Drücken Sie hier ein Komma, öffnen und schließen Sie geschweifte Klammern. Und ich werde Daten verwenden. Der use that hook ist eine spezielle Funktion, die den Anfangszustand als Argument verwendet und dann ein Array mit zwei Einträgen zurückgibt. Es ist eine Funktion, also müssen wir sie aufrufen. Ich werde es so machen. Und der Anfangszustand wird eine leere Zeichenfolge sein. Wir haben auch erwähnt, dass wir diesen Hook verwenden , der ein Array von zwei Einträgen zurückgibt. Also genau hier haben wir const, Titelkomma setzt fest, und weisen es so zu. Diese Variable hier wird also verwendet, um den Anfangszustand beizubehalten. Und dann ist dieser Typ hier eine Setup-Funktion, mit der der Anfangszustand aktualisiert wird . Und in diesem Fall haben wir den Anfangsstatus React JS. Denn für Anfänger haben das noch nicht gemacht. Lassen Sie uns den Anfangszustand rechts innerhalb des H1-Tags anzeigen . Schlag eins. Wir werden eine geschweifte Klammer haben und dann müssen wir nur den Anfangsstatus anzeigen , also den Titel. Fügen Sie es hier ein, Speichern. Diese Variable hier behält also den Anfangszustand bei, wenn Sie den Browser speichern und auschecken. Los geht's. Siehst du das? Wunderschön? Die Absicht dieser Vorlesung ist es also, den Titel dieser Anwendung zu ändern , wenn auf eine Schaltfläche geklickt wird. Hier spezifizieren wir ein Bootfahren. Hier. Ich werde den Titel ändern. Wunderschön. Hier ist es. Wenn Sie jetzt auf die Schaltfläche klicken, passiert nichts. Lassen Sie uns den Onclick schnell implementieren. Klicken Sie auf Equa. Wir werden hier eine Pfeilfunktion übernehmen. Und dann müssen wir das Setup function sets type tool aufrufen , das ist dieser Typ hier drüben. Und wenn Sie bereit sind, unsere Funktion festzulegen , gehen wir in den neuen Zustand über. Also hier mache ich es einfach, lass es uns speichern und im Browser auschecken. Probieren wir es aus, indem wir auf den Änderungstitel Boating klicken. Siehst du, dass sich der Titel beim Anklicken des Bootes geändert hat? Lass uns neu laden. Kannst du React JS-Aufrufe für Anfänger sehen Und wenn ich auf den unteren Rand klicke, sehen wir die ultimativen React Hooks-Aufrufe. Das ist in der Tat wunderschön. Und eigentlich ist das nur ein kleiner Einblick in die USA, mach dir keine Sorgen. In der Zukunft? Wir werden Hooks im Detail besprechen. Um es noch einmal zusammenzufassen: Wann immer Sie mit Daten umgehen möchten , die sich im Laufe der Zeit ändern, müssen Sie auf jeden Fall die Verwendung von Git-Hooks verwenden. Der use that Hook ist eine Funktion, die den Anfangszustand als Argument annimmt und dann ein Array mit zwei Einträgen zurückgibt. Also, innerhalb dieses Arrays wird die erste Variable hier verwendet, wird die erste Variable hier um den Anfangszustand zu speichern. Und dann ist das zweite Element in diesem Array eine Setup-Funktion, die verwendet wird, um den Anfangszustand zu aktualisieren. Wenn also auf die Schaltfläche geklickt wird, wird diese Funktion aufgerufen. Und dann werden wir einen neuen Status haben, der verwendet wird, um den Anfangsstatus zu aktualisieren. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 19. 18 Event-Handhabung: Wenn Sie an Belohnungsprojekten arbeiten, wird die Anwendung auf jeden Fall Benutzerinteraktionen haben. Wenn der Benutzer also mit der Anwendung interagiert , werden Ereignisse ausgelöst. ZB Mausklick, Mauszeiger, Tastendruck und vieles mehr. Behandlung von Ereignissen mit React-Elementen ist also der Behandlung von Ereignissen mit seinen HTML-DOM-Elementen sehr ähnlich. Der Unterschied besteht jedoch darin, dass React-Ereignisse nach dem Karma-Fall benannt werden. Also zum Beispiel werden wir onclick haben, ist das von onclick. Und auch React-Event-Handler sind in die geschweiften Klammern geschrieben. Okay, lassen Sie uns praktisch damit schnell die Explorer-Rechte innerhalb des Kompetenzverzeichnisses öffnen . Wir werden eine neue Komponente erstellen. Und diese werden Click-Event-Handler genannt. Punkt g ist RFC, um die funktionale Komponente zu generieren. Genau hier definieren wir eine Funktion. Funktion. Klicken Sie auf Handler. Stimmt es? Innerhalb der Funktion werden wir Euclid auf der Konsole protokollieren, die Aktionsstimmrechte innerhalb des Divs. Wir werden die Aktionsabstimmung abhalten, richtig. Die Absicht hier ist also, Ihnen beizubringen wie das OnClick-Event funktioniert. Also geben wir direkt beim Bootfahren den Onclick an und stellen ihn dann so ein, dass diese Onclick auf dieser Schaltfläche ausgeglichen wird. Wir wollen diese Funktion auslösen. Dann mache ich hier einfach den Click-Handler. Nachdem wir das getan haben, müssen wir diese Komponente direkt in der App rendern. Spott. Highlights, geben Sie einen Kommentar zu diesen ab. Dann werden wir den Click-Event-Handler mit dem sich selbst schließenden Tag näher betrachten. Speichern Sie das Browser-Ergebnis und ich, um die Konsole zu öffnen. Und wenn wir jetzt auf diese Schaltfläche klicken, wird die Nachricht in der Konsole protokolliert. Lass es uns versuchen. Kannst du sehen, dass du auf die Aktionsschaltfläche geklickt hast? Wenn Sie erneut klicken, wird die Nachricht zweimal protokolliert. Also VAP ist, dass Lee weiß, wie man mit Ereignissen in den React-Jahren umgeht. Ordnung, also zurück zum Code und lassen Sie uns den häufigen Fehler hervorheben , dass wir angefangen haben, mit der Ereignisbehandlung zu sprechen. Manchmal möchten Sie so etwas vielleicht tun. Ich nehme die Klammern. Wenn Sie also die Klammern einbeziehen, wird es zu einem Funktionsaufruf. Sehen wir uns das Verhalten an, wenn Sie die Klammern einbeziehen. Zuerst muss ich neu laden. Können Sie sehen, wenn Sie die Konsole beobachten, werden Sie feststellen, dass die Nachricht in der Konsole protokolliert ist. Sie müssen also nicht auf die Schaltfläche klicken , damit diese Nachricht protokolliert wird. Kannst du sehen, auch wenn du auf die Schaltfläche klickst, passiert nichts. Warum? Wenn Sie die Klammern angeben, wird dies zu einem Funktionsaufruf. Wenn Sie also die Anwendung speichern und zur Konsole zurückkehren, wird die Funktion sofort aufgerufen. Treffer. Okay, und jetzt versuchen wir, die Klammern im Browser sicher zu entfernen. Jetzt müssen wir uns erfrischen. Kannst du sehen, dass nichts auf der Konsole protokolliert ist. Und jetzt müssen Sie auf die Aktionstaste klicken , um die Nachricht auf der Konsole zu protokollieren. Punkt, den Sie beim Umgang mit Ereignissen beachten sollten. Sie müssen die Klammern nicht angeben. Wenn Sie dies tun, wird es zu einem aufgerufenen Event-Handler und nicht zu einem Funktionsaufruf. In Ordnung, es ist also nur eine Funktion. Wischen wir es ab. Speichern Sie im Browser. Alles funktioniert wie erwartet. Um es noch einmal zusammenzufassen. Event-Handler in React js ist in Karma-Schlüsseln geschrieben, was bedeutet, dass Sie den ersten Buchstaben jedes Wortes mit Ausnahme des ersten Wortes groß schreiben. Danach musst du es auf eine geschweifte Klammer setzen. Und genau, innerhalb der geschweiften Klammern musst du nur reingehen. Die Funktion ist so einfach. 20. 19 bedingtes Rendering: Wenn Sie eine reale Anwendung erstellen, werden Sie sich definitiv in einer Situation wiederfinden, in Sie Jess's basierend auf den eingestellten Bedingungen rendern müssen . Wir haben also vier verschiedene Ansätze, um dieses Problem zu lösen. Fügen Sie die Anweisungen if else, die Elementvariable, Bedingungsoperator Gerbery und die Short Secrets oder Burrito hinzu. In dieser Vorlesung werden wir uns jedoch für den zuverlässigsten und am weitesten verbreiteten Ansatz entscheiden , der Gerberei , Conditional Operator und Short Secret oder Burrito beinhaltet . Praktisch ist, dass es den Explorer schnell öffnet, oder? Innerhalb der Komponente. Wir werden eine neue Komponente namens user login dot js erstellen . Generieren Sie die funktionale Komponente. Also direkt im Div werden wir einen Park erwischen. Und ich heiße Sie herzlich willkommen zum Klassenprojekt. Und wir werden auch ein weiteres H2-Tag haben. Und das wird so sein, Sie können nicht auf dieses Projekt zugreifen. Die Idee ist also Wenn die Bedingung zutrifft, werden wir die Hecke mit einem Tag und einem anderen Tag anzeigen. Wenn die Bedingung falsch ist, zeigen wir das H2-Tag an. Lassen Sie uns diese Komponente in der App, die GAS hervorhebt, schnell ausführen und einen Kommentar dazu abgeben. Vermassel es. Genau hier. Wir werden die Benutzeranmeldung aus der Benutzeranmeldung mit einem Schrägstrich der Komponente importieren . Genau hier. Wir müssen einfach tot hierher rennen. Mit dem selbstschließenden Etikett näher herangefahren und hierher zurückgezogen. Lassen Sie uns hier schnell eine Variable deklarieren. Dann melde ich mich an und setze es auf true. Fahren wir also mit der Implementierung fort. Also müssen wir das zuerst in eine geschweifte Klammer packen Command X zum Ausschneiden, die geschweiften Klammern öffnen, hierher kommen und es einfügen. Also melde ich mich jetzt an. Es ist wahr. Wir werden das H1-Tag und anderes anzeigen. Wir werden das H2-Tag im Browser anzeigen. Willkommen beim Projekt von ED Baba. Wenn wir das also auf falsch ändern, sicher, probieren Sie es aus. Sie können nicht auf dieses Projekt zugreifen. Also funktioniert alles wie erwartet einwandfrei. In Ordnung? Dies wird also verwendet, um anzuzeigen, wann die Bedingung erfüllt ist. Und dies wird verwendet, um anzuzeigen, wann die Bedingung falsch ist. Lass mich ein bisschen nach oben zoomen. Können Sie sehen, dass dies verwendet wird , um anzuzeigen, wann die Bedingung erfüllt ist. Damit wird angegeben, wann die Bedingung falsch ist, so einfach ist das. Die nächste Zeile ist also der Schuss Secret Approach. Der Shot Secret-Ansatz wird also verwendet, wenn Sie entweder etwas oder nichts rendern möchten. Weniger praktisch, ist es schnell? Also müssen wir zuerst einen Kommentar zu diesem Highlight abgeben. Halten Sie die Befehlstaste, die Tabulatortaste und den Schrägstrich gedrückt, um den geheimen Schuss-Ansatz zu verwenden. Nehmen wir also an, Sie möchten Hallo anzeigen, ich bin angemeldet, wenn die Bedingung erfüllt ist. Und wenn die Bedingung falsch ist, wollen wir kein Ethan anzeigen. Okay? Also nehme ich die geschweiften Klammern auf. Also hier melde ich mich an und prozenziere, ähm, Prozent, dann haben wir eine Kopfmarke. Und genau in diesem Tag werde ich Hallo sagen. Ich bin im Browser angemeldet. Es passiert nichts. Warum? Es liegt einfach daran, dass die Bedingung falsch ist. Also wenn du es auf true änderst, sicher im Browser, hallo, ich bin angemeldet. Also wird der Shot Secret-Ansatz verwendet, um es zu rendern oder so oder nichts. Lassen Sie mich Ihnen kurz erklären, wie es funktioniert. Beim Shot-Secret-Ansatz wird also zuerst die linke Seite überprüft, um zu überprüfen, ob die Bedingung erfüllt ist. Und basierend auf dem wahren C wird die rechte Seite bewertet. Wenn es also falsch ist, der rechten Seite falsch ist, werden wir niemals bewertet. Reagiere, ignoriert die rechte Seite. Einfach weil wir nicht möchten, dass etwas auf dem Bildschirm angezeigt wird , wenn die Bedingung falsch ist. Es wäre also nicht nötig , die rechte Seite zu bewerten. 21. 21 Map (Listen-Rendering): Wenn Sie eine React-Anwendung erstellen, müssen Sie immer ein Problem lösen wie Sie eine Liste von Elementen auf dem Bildschirm anzeigen. Beispielsweise werden Sie möglicherweise gebeten, die Liste der Produkte anzuzeigen , die Mitarbeiter von uns verwenden, und so weiter und so fort. React G ist die beste Methode , um eine Liste von Elementen auf dem Bildschirm anzuzeigen , indem Sie die Kartenmethode verwenden. der Map-Methode können Sie über ein Array iterieren und sein Element mithilfe einer Callback-Funktion ändern . Die Callback-Funktion wird dann jedes der Iris-Elemente ausgeführt. Techniken. Map ist keine Zukunft von React. Stattdessen ist es eine Standard-JavaScript-Funktion , die für jedes Array aufgerufen werden kann. Lassen Sie uns praktisch sein, ist es schnell, damit es jeder gut genug versteht? Fahren Sie fort, um eine neue Komponente zu erstellen. Richtig, im Verzeichnis der Komponente. Klicken Sie auf Neue Datei. Dies wird als Employee Least bezeichnet Delta G ist generisch, die funktionale Komponente. Lass uns den Explorer schließen. Also genau hier sind wir Glow Create eine Reihe von Mitarbeitern. Mitarbeiter gleichen, öffnen und schließen eckige Klammern. Und direkt innerhalb des Arrays werden wir das Daisy-Komma haben, wir werden das Mike-Komma haben, Joe. Und zu guter Letzt werden wir Angela haben. Beachten Sie, dass ich hier ein Wort im Plural verwendet habe. Es ist in der Tat eine gute Praxis, bei der Benennung Ihres Arrays immer ein Wort im Plural zu verwenden. Einfach weil ein Array eine Sammlung von Elementen mit einem ähnlichen Datentyp ist. Hier haben wir also mehrere Elemente direkt innerhalb des Arrays. Lass uns weitermachen. Die größte Herausforderung besteht nun darin, die Liste der Mitarbeiter im Browser anzuzeigen. Normalerweise können wir das also auch mit dem Array-Index tun. Also richtig, innerhalb dieses Divs werden wir ein H2-Tag haben. Also Rechte innerhalb des H2-Tags, wir werden eine geschweifte Klammer angeben und dann in diese Klammern schreiben, wir mussten nicht auf die Elemente im Array zugreifen. Und um auf das erste Element im Array zuzugreifen, müssen wir natürlich den Array-Index Null verwenden. Also werde ich jetzt für Mitarbeiter eckige Klammern auf Null setzen. Dadurch wird das erste Element in diesem Array abgerufen, markiert und dreimal dupliziert. Um dann auf die zweiten Elemente zuzugreifen, müssen wir das Index-Tool Index One verwenden. Und schließlich für den Index des vierten Elements drei Befehl P. Gehen wir zur App Js. Und hier müssen wir den Mitarbeiter entlassen. Zuerst müssen wir die Mitarbeiterliste aus der Komponente Slash Employee Leaves importieren . Und unten müssen wir nur eine Komponente hier rendern und sie dann mit dem Soft-Closing-Tag schließen. Und im Browser hier. Jetzt haben wir die Liste der Mitarbeiter im Browser angezeigt. Okay, dieser Ansatz mag einfach erscheinen und gut funktionieren, ja, aber er hat einen sehr großen Nachteil. Lassen Sie mich Ihnen schnell zurück zum VS-Code zeigen und zumindest, wenn Sie den Bildschirm beobachten, werden Sie feststellen, dass der Code wiederholt wird. Stellen wir uns also vor, wir haben Tausende von Mitarbeitern in dieser Sammlung, richtig. Das bedeutet dann, dass wir diese tausend Mal machen müssen. Wir werden so etwas haben, indem tausendmal auf den richtigen Index abzielen. Dadurch wird unser Code extrem laut und dieser ist überhaupt nett. folgen also den bewährten Methoden und Wir folgen also den bewährten Methoden und müssen die Map-Methode verwenden um eine Titration für das Array durchzuführen. In Ordnung, also lass uns schnell rückgängig machen. Wunderschön. Jetzt müssen wir nur noch das H2-Tag entfernen. Fangen wir bei Null an. Die Kartenmethode ist ein JavaScript-Code , der ausgewertet werden muss, oder? Also müssen wir es in eine lockige Klammer wickeln. Dann soll Nestor Line die Map-Methode für das Array aufrufen. Normalerweise lautet die Syntax Array Dot. Landkarte. Das sind also genau dieselben Schlagworte, aber in diesem Fall lautet der Name des Bereichs hier Mitarbeiter. Also mache ich einfach eine Punktkarte für Mitarbeiter. Die Map-Methode verwendet eine Funktion als Argument und in diesem Fall eine Pfeilfunktion. Und auch die Pfeilfunktion nimmt ein Argument auf, das ich als Mitarbeiter bezeichnen werde. Dieser Mitarbeiter hier repräsentiert jedes Element im Array. Auch hier können Sie beschließen, den Namen dieses Arguments zu ändern, aber ich schlage vor, dass Sie einen beschreibenden Namen verwenden , der für das Array relevant ist , über das Sie iterieren. So einfach ist das. Ordnung, also direkt im Funktionskörper würde die Transformation stattfinden. Also geben wir für jeden Mitarbeiter ein Hecken-zu-Tag mit dem Mitarbeiter als innere HTML-Rückgabe zurück, wir werden ein H2-Tag haben. Und genau, innerhalb des H2-Tags wir den Mitarbeiter als inneren HTML-Code zurück. Dieses Argument hier, das jedes Element im Array repräsentiert, ist so einfach. Speichern Sie im Browser. Hier das Schöne, dieses Problem, das wir gerade gelöst haben, ist ganz einfach. Wählen wir ein komplexeres Szenario. Zurück zum VS-Code. In einer Belohnungsorganisation. Zu den Mitarbeiterdetails gehören der Name, ID, die Telefonnummer usw. des Mitarbeiters. Ordnung, also lassen Sie uns schnell das Einwand eines Mitarbeiters formulieren , all diese Details richtig in die eckigen Klammern aufzunehmen . Ich wische einfach die Elemente ab und drücke dann die Eingabetaste wie folgt. Wir werden ein Objekt direkt im Array haben. Also direkt in diesem Objekt werden wir die Eigenschaften und ihren Wert haben. Und in diesem Fall die Angaben der Mitarbeiter. Wir werden den Namen durch ein Komma trennen. Wir werden das Geschlecht, männlich, durch ein Komma getrennt haben . Wir werden ein Land haben, Großbritannien. Und schließlich werden wir älter werden. Sie können also wählen , ob Sie so viele Details vor Ort haben möchten, wie Sie möchten. Aber für mich halte ich einfach hier direkt vor dem Objekt an. Wir werden es mit dem Komma trennen. Jetzt werden wir es markieren und dann so oft duplizieren, wie Sie möchten. Stellen Sie jedoch sicher, dass Sie die Details ändern , also die Werte. Also genau hier, ich werde sie ändern. Heute ist es soweit, tut mir leid. Das wird weiblich sein. Hier. Wir machen 19. Sie müssen also nur noch die Details ändern, um zu enden. Und ich bin fertig mit meinem. Kannst du schön sehen? Dieser Ansatz wird also für dieses Objekt nicht mehr funktionieren , nur weil wir es nicht mehr mit Zeichenketten zu tun haben. Also genau hier werde ich das H2-Tag abwischen und dann Klammern öffnen und schließen, oder? Klammern. Wir werden ein H2-Tag haben und ein H2-Tag schreiben. Wir müssen den Mitarbeiter als inneres HTML anzeigen. Und in diesem Fall repräsentiert der Mitarbeiter hier jedes Objekt in der Liste. Und um auf die Eigenschaften zuzugreifen, müssen wir den Punktoperator verwenden. Und hier mache ich den Punktnamen des Mitarbeiters. Wenn wir also auf die Eigenschaft abzielen, wird der Wert so einfach wie das hervorgehobene abgerufen, duplizieren Sie ihn viermal. Und wir haben hier einen Fehler. Es heißt, Gesten, Ausdrücke müssen ein übergeordnetes Element haben. Komm her. Wir werden eine Eltern-Div haben. Also direkt in diesem Div der Code hervorgehoben und dann eingefügt. Hier haben wir den Punkt des Mitarbeiters, das Geschlecht und den Mitarbeiter in diesem Land. Und schließlich im Alter angestellt. Sicher im Browser. Können Sie sehen, dass alles im Browser angezeigt wird und wie erwartet einwandfrei funktioniert? Jetzt haben wir die Liste der Mitarbeiter auf dem Bildschirm, aber es gibt einen anderen Ansatz dies nur in einer Zeile zu tun. Und das mit der Verwendung der Zeichenketteninterpolation, bei der es sich um Objektliterale handelt , direkt gegenüber VS-Code. Und lass uns das schnell machen. Lass uns hier alles loswerden. Wischen Sie es jetzt ab, damit wir den Code ein wenig sauber machen müssen. Perfekt. Also hier werden wir ein weiteres H2, H2-Tag haben. Wir werden eine lockige Zahnspange haben, oder? Innerhalb der lockigen Zahnspangen. Wir werden die Zeichenketteninterpolation verwenden. Um das zu tun. Wir müssen nur den Rindentee spezifizieren. Und die Batik befindet sich in der oberen linken Ecke der Tastatur, direkt unter der Escape-Taste. Hier werde ich einen Namen machen. Wir werden ein 1-Dollar-Zeichen haben, Klammern öffnen und schließen. Und ich mache den Punktnamen des Mitarbeiters. Komm her. Und hier haben wir die Agenda, die Punkte der Mitarbeiter, das Geschlecht. Wir werden Land, Mitarbeiter und Land haben. Und zu guter Letzt lassen wir jede Mitarbeiterin ein Punktalter, rettet sie. In Ordnung, also lassen Sie uns diesen Code schnell mit Prettier formatieren. Formatieren Sie Dokumente mit Prettier. Ich finde, der Code sieht gerade hübsch aus. Also kannst du es dir ansehen. Siehst du, lass mich ein bisschen rauszoomen. Und hier ist es. Schau es dir an. Kannst du richtig sehen? Lass es uns im Browser herausnehmen. Kannst du sehen, dass alles wie erwartet einwandfrei funktioniert? Ich liebe es. In Ordnung, also nach dem Mapping meisten Entwickler den Code noch destrukturieren die meisten Entwickler den Code noch. Lassen Sie mich Ihnen schnell beibringen, wie das geht. Also zerstöre den Code. Wir werden hierher kommen und dann können wir eine reguläre JavaScript-Funktion oder sogar eine Komponente haben . Also mache ich jetzt const, öffne und schließe geschweifte Klammern. Wir wollen den Namen, das Komma, das Geschlecht, das Karma, das Land und das Alter strukturieren Karma, das Land und das Alter und sie dann dem tatsächlichen Mitarbeiter zuordnen. Das Einfachste ist, dass wir, nachdem wir dies getan haben, den Punktoperator nicht mehr verwenden müssen , um auf die Eigenschaften zuzugreifen. Jetzt können wir direkt darauf zugreifen. Komm her, wähle den Punkt Mitarbeiter aus und drücke dann die Befehlstaste auf deiner Tastatur gedrückt. Tippen Sie auf den Buchstaben D, um alle Vorkommen des Hundes eines Mitarbeiters auszuwählen . So einfach ist das. Wischen Sie es dann ab. Speichern, drücken Sie die Esc-Taste , um die multikulturelle Bearbeitung zu deaktivieren. Und im Browser. Sie haben diese schönen. Jetzt sieht der Code übersichtlicher und lesbarer aus. Ich liebe es so. Stimmt es? Wenn Sie also den bewährten Methoden für die Verschachtelung von Linien folgen , müssen Sie den Code umgestalten. Mit dem Refactoring des Codes meine ich einfach, dass wir die Struktur unseres Codes verbessern sollten um die Lesbarkeit und Wartbarkeit zu verbessern. Der Weg, dies zu tun, besteht darin, die Logik von der Präsentationskomponente zu trennen. Lass uns das schnell machen. Wir wollen also nicht, dass die ganze Logik hier drüben geschrieben wird. Also müssen wir die Logik in einer separaten Komponente verstecken. Öffnen Sie den Explorer rechts im entsprechenden Verzeichnis, erstellen Sie eine neue Datei, und diese wird abgefangen. Mitarbeiterpunkt j ist generisch. Die funktionalen Komponenten. Kehren Sie schnell am wenigsten zum Platz M zurück. Dann müssen wir aus den Zeilen 3032, Zeilen 38, den Befehl X zum Ausschneiden markieren . Gehen Sie zurück zu Mitarbeiter, wählen Sie einen Wert von minus vier bis sechs aus, löschen Sie den Wert und fügen Sie dann den Befehl V ein. Nachdem wir das getan haben, müssen wir diese Komponente, die das Unternehmen des Mitarbeiters ist, abbilden und wieder einen Listenfehler anstellen. Ganz oben müssen wir also Mitarbeiter von Mitarbeiter mit Schrägstrich importieren. Direkt unten. Wir müssen es hier rendern. In der Nähe waren die selbstschließenden Etiketten zu sehen. Die nächste in der Reihe ist also, die DTs als Sonden weiterzuleiten. Also richtig, würde der Mitarbeiter nicht, wir werden den gleichen Namen haben. Punktname des Mitarbeiters. Wir werden das Geschlecht haben, das Geschlecht der Mitarbeiter. Und wir haben ein Land, das gleich ist, Mitarbeiter und Land. Und zu guter Letzt haben wir einen gleichwertigen Mitarbeiter, Punkt h. richtig? Also müssen wir nur den Code formatieren. Wunderschön. uns gelungen, all diese Details als Sonden an die Mitarbeiterkomponente weiterzugeben . Der nächste in der Reihe ist also, die Sonden so schnell wie möglich zu erhalten und direkt zum Mitarbeiter zu gehen. Zuerst müssen wir es empfangen, indem Sonden als Parameter direkt innerhalb der Funktion übergeben . Und danach müssen wir es Sonden zuweisen. Sicher. Nimm es im Browser heraus. Stimmt es? Wir haben einen leeren Bildschirm. Okay, geh zurück zum VS-Code. Hier scheint alles in Ordnung zu sein. Schauen wir uns den geringsten Schaden für den Mitarbeiter an, oder? Also müssen wir die geschweifte Klammer abkreuzen , sie abwischen, komm her , wisch sie ab und außerdem das Semikolon. Speichern Sie im Browser. Das sind sie, diese. Alles scheint einwandfrei zu funktionieren. Aber wenn wir die Konsole inspizieren, schauen Sie sich das an. Wir werden uns diesen nervigen Fehler hier ansehen , der besagt, dass jedes untergeordnete Element in einer Liste eine einzigartige Schlüsselrequisite haben sollte. Lass uns das in der nächsten Vorlesung machen. Wir sehen uns dann. 22. 22 einzigartige Key (Mapping): Ordnung, also wenn Sie die Konsole öffnen, werden Sie diesen nervigen Fehler hier sehen. Und es heißt, dass jedes Kind in einer Liste eine einzigartige Schlüsselrequisite haben sollte. Um dieses Problem zu lösen, müssen wir nur zum Code zurückkehren und den Schlüssel angeben. Also schnell Heroin zum VS-Code. Der Schlüssel muss etwas Einzigartiges sein. Zumindest werden wir nach einer Eigenschaft suchen , mit der jeder Mitarbeiter eindeutig identifiziert werden kann. Wenn Sie sich also die Liste ansehen, werden Sie feststellen, dass der Name ziemlich einzigartig ist. Die Mitarbeiter, direkt in dieser Liste, haben unterschiedliche Namen. Wir können dann damit fortfahren, den Namen als eindeutige Schlüsselsonde zu verwenden . Komm her. Ich mache Key Equa, den Punktnamen des Mitarbeiters. Sie sehen, dass der Fehler behoben ist, wenn Sie den Browser speichern und auschecken ? Wunderschön. Alles scheint einwandfrei zu funktionieren, aber es ist nicht ratsam, den Namen als einzigartige Schlüsselstütze zu verwenden. Warum? Das liegt einfach daran, dass Sie in einer Belohnungsorganisation wahrscheinlich zwei verschiedene Mitarbeiter haben. Dieses B hat den gleichen Namen. Es ist also nicht richtig, den Namen als eindeutige Schlüsselsonde zu verwenden. Lass es mich dir schnell zeigen. Hier haben wir einen Zweibalken. Also lasst uns diesen Typen hier auf Baba umstellen, denn in einer Belohnungsorganisation sind die Chancen groß, dass zwei Mitarbeiter den gleichen Namen haben. Also, wenn du so etwas hast, wird es einen Konflikt geben. Den Namen als Schlüsselprobe zu verwenden, wird also nicht mehr funktionieren. Kannst du sehen, dass es sagt und bis zu Kindern mit dem gleichen Schlüssel zählen? Es ist Abeba. Schlüssel sollten eindeutig sein , damit die Komponenten ihre Identität unabhängig von D beibehalten ihre Identität unabhängig von D Der beste Weg, dieses Problem zu lösen, besteht darin, eine Mitarbeiter-ID anzugeben , einfach weil in einer realen Organisation Mitarbeiter eine eindeutige ID haben müssen. Jeder Mitarbeiter hat also eine andere ID. Und das ist der beste Weg , um die wichtigsten Sonden zu spezifizieren. Komm her. Genau auf der Liste. Wir müssen nur die ID angeben, eins daraus machen, hervorheben, kopieren, herkommen, Mickey einfügen, um drei daraus zu machen. Und zu guter Letzt, mach es für. Wenn Sie also mehr Mitarbeiter in der Liste haben, können Sie auch deren IDs angeben , um der Anzahl der Mitarbeiter zu entsprechen. Und genau hier ändern wir es auf ID im Browser. Lassen Sie uns die Konsole schnell aktualisieren. Kannst du sehen, dass alles wie erwartet einwandfrei funktioniert? Ein weiterer wichtiger Punkt , den Sie beachten , ist, dass die Spezifizierung der eindeutigen Schlüsselsonden auf oberster Ebene erfolgen muss. Geh zurück zum VS-Code und lass es mich dir schnell zeigen. Wenn ich alles im Eltern-Div zusammenfassen sollte. Höhepunkte. Halten Sie die Alt-Taste auf Ihrer Tastatur gedrückt und tippen Sie auf die Aufwärtspfeiltaste, um die Tastatur hineinzubewegen. Und wenn wir dann speichern und zum Browser zurückkehren, funktioniert der Schlüssel nicht mehr. Der Ladevorgang sollte zumindest über eine einzigartige Tastenstütze verfügen. Das liegt einfach daran, dass die wichtigsten Untersuchungen auf oberster Ebene durchgeführt werden müssen. Also werde ich es einfach hervorheben und dann abschneiden. Komm direkt in die Div. Füge es ein. In Ordnung, wir müssen nur schnell den Code formatieren. Wunderschön im Browser. Lassen Sie uns die Konsole aktualisieren. Kannst du sehen, dass alles einwandfrei funktioniert. Das ist alles für heute. Ich sehe, dir hat dieser Vortrag gefallen. Bleib konzentriert. Unrealistisch. 23. 23 Regulärer Css: In dieser Vorlesung lernen wir, wie man React-Komponenten stylt. Es gibt verschiedene Optionen , um die React-Komponente zu gestalten. Und diese Optionen umfassen reguläre CSS-Stylesheets, Inline-CSS, CSS-Modul, CSS in GIS-Startkomponente und vieles mehr. In dieser Vorlesung bleiben wir bei den ersten drei, unserem Ansatz. Und jetzt beginnen wir mit dem regulären CSS-Stylesheet. Also schnell innerhalb des Kompetenzverzeichnisses werden wir eine neue Komponente erstellen. Unregelmäßige Stylesheets. Punkt G ist, dass ich in der Limine meiner Öfen immer darauf achte, einen aussagekräftigen Namen zu verwenden , damit es für mich in Zukunft so einfach wird, sie zu bezeichnen. Schließen Sie den Explorer und generieren Sie dann schnell die Funktionskomponenten. Also richtig, innerhalb des Divs werden wir ein Headtag haben und wir werden ein Schlagwort treffen. Ich werde lernen, wie man die React-Komponente stylt. In Ordnung, also lasst uns schnell die Kopfmarke stilisieren. Öffnen Sie den Explorer und erstellen Sie schnell eine CSS-Datei direkt im Verzeichnis der Komponente. Diese CSS-Datei würde abgefangen werden. Meine Styles sind auf CSS ausgerichtet. Nachdem wir die CSS-Datei erstellt haben, müssen wir das Hadrian-Tag stilisieren. Komm her. Zuerst. Um das zu tun. Wir müssen den Klassennamen angeben. Ich nenne es primär. Gehe zur CSS-Datei. Hier müssen wir den Primärnamen stilisieren, d. h. den Clusternamen, der verwendet wird, um auf das H1-Tag zu verweisen. Also richtig, geben Sie in den geschweiften Klammern regelmäßig die Schriftgröße an. Machen wir es zu 50 Pixeln, der Farbe. Lass es uns blau machen. Und schließlich müssen wir nur die Schriftfamilie angeben. Und ich werde es um eine Währung erhöhen, oder? Die nächste Zeile ist also, die CSS-Datei mit dem Unternehmen zu verknüpfen. Und komm ganz oben her. Wir werden einen Schrägstrich importieren, meinen Stil Punkt CSS, das einfachste , das die App-Komponente öffnet. Also müssen wir dazu einen Kommentar abgeben. Schnell. Lass uns importieren. Lassen Sie uns schnell reguläre Stylesheets aus dem regulären Stylesheet von Component Slash importieren . Genau hier. Wir müssen nur die regulären Stylesheets mit dem sich selbst schließenden Tag näher rendern die regulären Stylesheets . Speichern Sie im Browser , hier ist es, können Sie das sehen? Wunderschön? Okay, eine andere Sache Sie auch tun können, ist, eine Klasse bedingt anzuwenden , die auf Sonden oder Zuständen des Unternehmens basiert . Lass es mich dir schnell zeigen. Also genau hier haben wir eine gleichwertige Requisite. Stellen wir es auf wahr. Danach müssen wir die Sonden direkt in der regulären Stylesheet-Komponente erhalten . Und das tun wir, indem Sonden als Parameterrechte innerhalb der Deformation verwenden. Also, was ich tun werde, ist das. Wir werden eine Variable namens className haben. Wenn props dot primary dann gleich wahr ist, setzen wir den Klassennamen auf primary und errors. Wir setzen den Klassennamen auf sekundär, den einfachsten Punkt. Im Grunde wird also das Ergebnis der Operation auf der rechten Seite in dieser Variablen gespeichert. Und jetzt wird diese Variable als Klassenname verwendet. Werde herkommen. Markiert, wischt sie ab, öffnet und schließt geschweifte Klammern. Und dann müssen wir den Klassennamen angeben, der ist dieser Typ hier drüben. Also, wenn props dot primary gleich wahr ist, wir den Klassennamen als primär an, und dann stilisieren wir, wir stilisieren den Primärnamen. Und wenn es falsch ist, wird der Klassenname zweitrangig sein. All dies wird also in einer konstanten Variablen namens Klassenname gespeichert . Und dann geben wir es hier dynamisch weiter. Also das hier drüben wird das Primär sein, wenn die Bedingung erfüllt ist. Und es gilt als sekundär, wenn die Bedingung falsch ist. Gehen Sie zurück zur CSS-Datei. Wir müssen das Sekundäre stilisieren. Ich werde einfach alles von hier unten kopieren. Wir müssen nur die Farbe ändern zu. Tomate. Hier. Lassen Sie uns die Schriftfamilie abwischen. Sicher im Browser und im Knochen. Kannst du sehen, dass die Bedingung wahr ist? Deshalb werden wir den Primärstrahl stilisieren lassen. Wenn Sie also wieder hierher kommen und die Bedingung ändern, um den Safe im Browser zu erzwingen, werden wir so etwas haben. Siehst du, wie flexibel es sein kann? Wunderschön? Das ist also äußerst hilfreich, wenn Sie sich aufgrund Ihres Zustands als kompetent stylen möchten . In Ordnung, als nächstes kommt das Inline-CSS. Halte am VS-Code fest. Lassen Sie uns schnell eine neue Komponente namens inline dot js erstellen . Lassen Sie uns die funktionale Komponente generieren. Um die Inline-Styles zu erreichen, müssen wir nur ein Objekt erstellen und es auf das Style-Attribut anwenden. Lass es mich dir schnell zeigen. Wie immer werden wir einen Kopfhöreranhänger haben. Stimmt es? Wir sind im Head-Tag, mache ich, richtig, also müssen wir mit dem Inline-CSS das Style-Attribut anwenden. Also hier werde ich Style Equa machen. Gehen wir von einer Überschrift aus. Okay, jetzt müssen wir ein Objekt mit dieser Überschrift erstellen und diese Stadt direkt darin implementieren . Komm her. Ich mache const heading equa setze es auf ein leeres Objekt, oder? In diesem Objekt müssen wir diese Tau-Schriftgröße implementieren . Das ist also in Form eines Schlüssel-Wert-Paares, oder? Also mache ich 100 Pixel, ruhiger. Karla, Muskel wird Tomate machen. Wunderschön. Ich möchte, dass Sie beachten , dass die Schriftgröße auf Kommatasten steht. So funktionieren die Inline-Styles also auf GS. Wir mussten das Inline also nicht aus kompetentem Slash Inline importieren. Lassen Sie uns einen Kommentar zum regulären CSS platzieren. Und dann müssen wir die Inline mit einem selbstschließenden Etikett näher betrachten. Speichern Sie im Browser. Und bumm, richtig, irgendwo stimmt etwas nicht. Dieses Tau wird nicht auf die erste Markierung aufgetragen. In Ordnung, schauen wir uns die N-Linie an. Ups, hier ist ein Tippfehler aufgetreten. Wir müssen also nur die notwendige Korrektur vornehmen , indem wir das t löschen . Das soll also Style sein. Sparen und bumm. Alles funktioniert wie erwartet einwandfrei. Eine Sache, die ich mit dir besprechen möchte , ist , dass, wenn du ein anderes stylen willst, auf ein Schlagwort tippe, etwa so. Machen wir es uns dieses Mal zum Problem, zu taggen. Ich werde ihm ein Stilattribut geben. Jetzt müssen wir ein weiteres Objekt für das H2-Tag erstellen. Also hier werden wir es konstant machen. Nennen wir es Head In. Wir werden eine Schriftgröße von 50 Pixeln haben. Lass es uns blau machen. Nachdem wir das getan haben, müssen wir dieses Tau anwenden , indem wir es hier referenzieren. Einfügen, Speichern im Browser und fertig. Kannst du sehen? Wenn Sie also den Inline-Stil verwenden, müssen Sie ein anderes Objekt für die Attribute erstellen , die Sie stilisieren möchten. Das ist alles für heute. Und in der nächsten Vorlesung werden wir das CSS-Modul besprechen. Wir sehen uns in der nächsten Vorlesung. 24. 24 Css-Module: CSS-Module, unsere CSS-Dateien, in denen unsere Klassennamen und Animationen standardmäßig lokal begrenzt sind, was einfach bedeutet, dass sie nicht außerhalb ihrer Domäne verwendet werden können . Und das ist sehr hilfreich , um Konflikte in CSS zu vermeiden. Um es gut genug zu erklären, müssen wir die regulären CSS-Stylesheets verwenden und sie mit dem CSS-Modul vergleichen. Also schnell den Explorer öffnen und dann gleich beim SRC, wir müssen das reguläre CSS Stylesheet up styles dot css erstellen . Und genau beim SRC müssen wir jetzt das CSS-Modul erstellen. Und ich nenne es meinen App-Stilpunkt, entnommen aus dem Konventionsmodul Punkt CSS. So benennt ihr zumindest euer CSS-Modul. Gehen wir also zurück zum regulären Stylesheet, oder? In den regulären Stylesheets werden wir eine Fehlerklasse haben. Und ich werde es stilisieren, indem ich die Farbe Rot angebe. Einfach und kurz. Rechte innerhalb des CSS-Moduls, wir werden eine Erfolgsklasse haben. Und natürlich wird die Farbe grün sein. So einfach ist das. Gehen wir zur App. Spott. Die Rechte standen in der app.js. Wir müssen das reguläre CSS-Stylesheet importieren, App-Stile Punkt CSS. Die westliche Zeile besteht darin, das CSS-Modul zu importieren, und die Eingabe ist ziemlich einzigartig. Also müssen wir einen Namen angeben. In diesem Fall nenne ich es Module Towers. Also müssen wir es aus Dot Slash my app styles dot module dot css importieren . Genau so importiert man das CSS-Modul. Lassen Sie uns die CSS-Dateien verwenden. Lassen Sie uns zunächst einen Kommentar zu den Inline-Komponenten platzieren. Also direkt darunter werden wir ein H2-Tag haben , dessen Klassenname error ist. Also dieser Klassenname hier ist dieser Typ hier drüben, oder? Und dann werde ich einen Fehler machen. Wenn Sie im Browser speichern. Du wirst hier einen Fehler haben. Lassen Sie uns diese also schnell für das CSS-Modul implementieren. Ich nehme einen hier zum Taggen. Wir werden den Erfolg haben und dann den Klassennamen angeben. Der Klassenname wird also Modulus Towels Socks x sein. Also dieser Modulstil hier ist der Name, den wir verwendet haben, auf den Modulstil CSS zu verweisen. Jetzt sagen wir also, dass Modulus Tau die definierte Erfolgsklasse selbst markiert. Hier drüben. So einfach ist das. Lass uns schnell speichern und sehen, welchen Code du sehen kannst? Wunderschön. Und genau hier fängt der Spaß an. Geh zurück zu VS Squared. Lassen Sie mich Ihnen die Datei app.js zeigen und lassen Sie uns dann die Kommentare entfernen. Das Inline-G ist im Browser sicher. Dies sind die Stile, die von den Inline-Js stammen. Ja. Lass mich dir jetzt etwas zeigen. Dieses h2-Tag ist für die regulären CSS-Stylesheets. Also, wenn ich das kopiere und es hier direkt in die Inline einfüge , können wir es so machen. Und hier drüben werde ich von der Inline aus mit dem Pfeil beginnen, damit wir es unterscheiden können. Kannst du auch Inline-Fehler sehen? Wir haben den Fehler von der App-Komponente. Ich möchte, dass du hier aufpasst. Gehe zurück zur Datei app.js. Und dann, wenn ich das CSS-Modul kopiere und es direkt in das Inline-CSS einfüge, so. Wenn Sie im Browser speichern , wird ein Fehler auftreten. Und es heißt, das Modulhandtuch ist nicht definiert. Genau darüber sprechen wir. CSS-Module, unsere CSS-Dateien, bei denen alle Cluster, Namen und Animationen standardmäßig lokal begrenzt sind. Wenn Sie also ein CSS-Modul hier definiert haben, können Sie es nicht in einer anderen Komponente verwenden , da es lokal begrenzt ist. Verstanden, wunderschön. Also, wenn wir es unsicher ausziehen, kannst du sehen, dass alles einwandfrei funktioniert? Und der Vorteil des CSS-Moduls besteht darin, dass es den Umfang von CSS ermöglicht , indem automatisch ein eindeutiger Klassenname für das Format erstellt wird. Zweitens können Sie mit den CSS-Modulen denselben CSS-Klassennamen in verschiedenen Dateien verwenden denselben CSS-Klassennamen in verschiedenen Dateien ohne sich um Namenskonflikte sorgen zu müssen. Was genau ist eine großartige Zukunft? Das ist alles für heute und ich hoffe, Sie verstehen, was die CSS-Module sind. Pass auf dich auf. 25. 25 Formulareingabe (kontrollierte Komponente): In dieser Vorlesung werden wir besprechen, wie man mit Formularen in React JS arbeitet. Wir werden lernen, wie man Daten aus dem Formularelement erfasst und dann die Erfassungsdaten zur Einreichung zur Verfügung stellt. In normalem HTML. Formular, Elemente sind alle selbst dafür verantwortlich, die Benutzereingaben zu verarbeiten und die Werte entsprechend zu aktualisieren. Hier dargestellt, wollen wir auf ein Handwerkzeug reagieren und das Formularelement steuern. Solche Formularelemente, deren Wert von React und 100 gesteuert werden, werden also als konstruierte Komponente bezeichnet. Lassen Sie uns schnell fortfahren, indem wir eine neue Komponente erstellen , in der sich das zuständige Verzeichnis befindet. Wir werden eine Komponente aus impte dot js erstellen. Generieren Sie die funktionale Komponente. Also werde ich das einfach abwischen. Wir werden eine Firma innerhalb des Formulars haben. Wir werden ein Div haben, oder? Wir sind in der Def, wir werden ein Label haben. Also hier werde ich einen Namen machen. Und hier werde ich den Eingabetyptest mit dem sich selbst schließenden Tag näher betrachten. Normalerweise ist dies also nur ein einfaches HTML-Ampute. Aber in React müssen wir diesen Input in kontrollierte Imputes umwandeln . Um das zu tun, müssen wir also drei Schritte befolgen. Der erste Schritt besteht darin, den usted-Hook zu importieren und die Zustandsvariable zu deklarieren, die die Formungsperioden steuert. Also lasst uns schnell importieren, was die USA gemacht haben. Und hier müssen wir die zu verwendenden Zustandsvariablen deklarieren. Und in diesem Fall werden wir Kosten haben, oder? Wir sind im Array, wir werden das Namenkomma haben, die Setup-Funktion, die verwendet wird, um den Namen zu aktualisieren. Der Anfangszustand wird also eine leere Zeichenfolge sein. Hallo, in Ordnung, nachdem wir das getan haben, lassen Sie uns den Wert dynamisch anzeigen. Hier. Ich werde Value machen. Ups, sieh es dir an. Das sollte ein Name sein. Und hier werden wir einen Namen machen. Lassen Sie uns die Mischung der App-Komponenten öffnen , um einen Kommentar zu all diesen Dingen hier abzugeben. An der Spitze. Wir müssen aus Imputes importieren, aus Komponenten Slash aus Impute. Direkt unten. Wir müssen das ausführen, wenn wir Peers sicher im Browser bilden und zack, es ein bisschen so hochschieben. Nett. Das ist also der Browser, den wir haben. Aber wenn Sie in das Textfeld tippen, passiert vorerst nichts. Warum? Das liegt einfach daran, dass wir Onchange angeben müssen, um den Wert zu aktualisieren , wenn sich der Status direkt im VS-Code ändert. Beim Ändern eines Kerns. Wir werden hier eine enge Funktion übernehmen. Wir müssen die Funktion setName aufrufen , um den Anfangszustand zu aktualisieren. Die onchange ermöglicht also den Zugriff auf die Ereignisse und mit Hilfe des Event-Objekts werden wir den neuen Wert abrufen , den der Benutzer eingeben würde. Um den neuen Wert zu erhalten, verwenden wir Ereignisse, Punkte, Ziele Punktwerte. Dies ist der aktuelle Wert, den Sie in die Detailansicht eingeben. Dieser Wert hier wird die Anfangsphase aktualisieren. Sicher, und probieren wir es aus. Moment ist es schwer, meine Maus ist direkt im Eingabefeld, und ich werde es tun, Ababa. Alles funktioniert wie erwartet einwandfrei. Um zu verstehen, wie der Onchange funktioniert, müssen wir den Namen in der Konsole protokollieren. Also genau hier werde ich console.log im Browser namenssicher machen. Lassen Sie uns also schnell die Konsole untersuchen. Gerade jetzt. Wir haben keine Schmerzen, richtig, im Eingabefeld. Und auch die Konsole ist leer. Es wird also davon ausgegangen, dass wir eine leere Zeichenfolge haben. Also, wenn ich so etwas eingebe, kannst du jetzt sehen, dass wir E auf der Konsole haben und wir haben E hier drüben, direkt im Eingabefeld. Können Sie sehen, dass genau so das onchange-Ereignis ausgelöst wird , um die Setup-Funktion aufzurufen , um die Anfangsphase zu aktualisieren. Das ist also die Setup-Funktion , die verwendet wird, um den Anfangszustand zu aktualisieren. Und mit Hilfe dieser Ereignisse werden wir in der Lage sein, alles, was der Benutzer in das Eingabefeld eingibt, zu erfassen und es dann zu verwenden , um den Anfangszustand zu aktualisieren. Das Einfachste ist, dass ich zu viel rede. Also lass uns weitermachen. Lassen Sie uns schnell mehr Zustandsvariablen deklarieren, hervorheben und sie zweimal duplizieren. Lassen Sie uns diese ändern, um sie zu adressieren. Wir müssen die Adresse festlegen. Und das wird verzerrt sein. Sagt q. Der Anfangsstatus dieses Feldes wird React js so haben, okay, weil wir es eher wie ein Auswahlfeld machen wollen. Also komm her. Highlights aus den Längen 102 Zeilen 18. Dupliziere es zweimal. In Ordnung, also dafür werden wir das in Address ändern. Der Wert wird Adresse sein, was der Anfangszustand ist. Also müssen wir die Adresse anrufen. Komm her. Also hier drüben werden sich die Dinge ändern. Mir gefielen die Zeilen 29 bis 35. Jetzt werden wir innerhalb des Labels Rechte auf einer anderen Ebene haben . Ich mache eine Skalierung. Wir werden eine Auswahl treffen. Rechte innerhalb der Auswahl. Wir werden die Optionen haben, geben Sie den Wert an. Reagieren. Also hier werde ich React machen. Js markiert, duplizieren Sie es dreimal. Hier nehme ich Angola. Also hier werden wir uns solche Jahre angesehen haben , oder? Schließlich müssen wir auch den Onclick angeben. Also richtig, wählen Sie den Wert aus und geben Sie ihn an. Der Wert wird skaliert, was der Anfangszustand ist. Dann wird der Onchange gleich sein, wir übernehmen hier eine anonyme Funktion, die den Zugriff auf das Ereignis ermöglicht. Dann rufen wir die Funktion sets Q auf , um den Anfangszustand zu aktualisieren. Und dann lassen Sie uns die neuen Imputes ins Visier nehmen. E-Punkt-Ziel, Punktwert. So einfach ist das. Wenn Sie im Browser speichern, sehen wir, ob die Auswahloption funktioniert. Kannst du schön sehen? Alles funktioniert einwandfrei. Ich liebe diese. Ordnung, zum Schluss müssen wir die Schaltfläche angeben, um die Firma einzureichen. Richtig? Wo machen wir das jetzt? Okay, lass uns hier noch einen Div machen. Direkt in diesem Div werden wir einen Verriegelungsknopftyp haben, der Submit, Value lautet . Abschicken. Hier, wir machen Safe-Bomb. Alles funktioniert gut. Richtig? Schließlich müssen wir eine Funktion für das Bootfahren definieren. Scrollen wir schnell nach oben. Und dann, wie wir es hier versucht haben, reicht const, handle einen Chor ein. Hier nehmen wir eine Veranstaltung mit zu unserer Veranstaltung. automatische Seitenaktualisierung zu vermeiden, müssen wir also die Option verhindert als Standard aufrufen. Also mache ich EV t dot prevent default. Und schließlich, wenn auf die Schaltfläche geklickt wird, möchten wir, dass der Wert im Eingabefeld im Warndialogfeld angezeigt wird. Also hier werden wir die Zeichenketteninterpolation verwenden . Erstens haben wir den Namen, wir haben die Adresse und schließlich haben wir die Fähigkeit. Richtig? Jetzt müssen wir diese Funktion innerhalb der Firma direkt aufrufen . Um das zu tun. Zuerst müssen wir das Onsubmit spezifizieren. Und dann werde ich mich darum kümmern, einreichen. Die einfachsten Daten. Wenn Sie im Browser speichern. Lass es uns überprüfen. Okay, ich reagiere. Also klicken wir auf die Schaltfläche Absenden. Schau es dir an. Können Sie sehen, dass die Eingabe direkt hier im Warndialogfeld erscheint? Um es noch einmal zusammenzufassen: Wenn Sie ein Formular in React JS erstellen, müssen Sie das Formular in eine kontrollierte Komponente konvertieren . Und dazu müssen Sie zuerst den US-DID-Hook importieren und dann die erforderlichen Zustandsvariablen deklarieren, und dann die erforderlichen Zustandsvariablen deklarieren die verwendet werden sollen. Danach müssen Sie die Eingabe angeben und dann den Anfangszustand als Wert verwenden. Nachdem wir das getan haben, müssen wir den onchange höher spezifizieren, oder? Formatieren wir also den Code. Wunderschön. Kannst du sehen, dass das zumindest so ist, wie man in React-Jahren mit Formularen arbeitet . Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 26. 26 React Fragment: In dieser Vorlesung werden wir Fragmente besprechen. Ein übliches Muster in React besteht darin dass eine Komponente mehrere Elemente zurückgibt. Fragmente ermöglichen es uns also, eine Liste von untergeordneten Elementen zu gruppieren , ohne der Kuppel einen zusätzlichen Knoten hinzuzufügen. Lassen Sie uns das anhand eines Beispiels gut genug verstehen. Also schnell im Verzeichnis der Komponente werden wir ein neues Paket namens Fragments demo, frog demo erstellen . Und genau bei der Frosch-Demo erstellen wir eine neue Komponente namens Demo-Fragment. Rechtsklicken Sie auf Neue Datei. Demo-Fragmente zeichnen uns aus. Generieren Sie die funktionale Komponente. Drücken Sie die Esc-Taste, um die multikulturelle Bearbeitung zu deaktivieren. Dann hier, ich werde das einfach abwischen. Lassen Sie uns das Div durch ein Hadrian-Tag ersetzen. Jetzt markiere ich den div-Befehl D, um das Div mehrfach auszuwählen , und lösche es ab. Und jetzt drücken wir erneut die Esc-Taste , um die Monte-Carlo-Bearbeitung zu deaktivieren . Genau hier. Wir werden ein Beispiel für Fragmente haben. In Ordnung, lass mich dir etwas zeigen. Hier. Wir werden wieder eine Kopfmarke haben, die Herzfrequenz. Lass es uns so machen. Können Sie sehen, wenn Sie den Bildschirm beobachten, werden Sie feststellen, dass sich die Anwendung beschwert. Und wenn Sie mit der Maus darauf zeigen, heißt es, Gesten, Ausdrücke müssen ein übergeordnetes Element haben. Die Anwendung verlangt also, wir den GSS-Ausdruck in einem übergeordneten Element zusammenfassen . So schnell, wir werden es hier machen, div. Geben wir diesem Div den Klassennamen Container. Höhepunkte. Drücken Sie die Alt-Taste und tippen Sie dann auf die Aufwärtspfeiltaste, um es hineinzubewegen. Wunderschön. Speichern, Lassen Sie uns schnell eine Komponente in der App rendern. G ist nach oben scrollen. Und hier werden wir sie oder Fragmente aus den Demo-Slash-Demo-Fragmenten der Komponente Slash Frog importieren oder Fragmente aus den Demo-Slash-Demo-Fragmenten der Komponente . Direkt unten. Geben Sie dazu einen Kommentar ab. Wir werden sie als Fragmente rendern. Näher ran mit dem Soft-Closing-Etikett. Stellen Sie sicher, dass Sie die Anwendung speichern. Und im Browser. Bumm, kannst du sehen, dass alles wie erwartet einwandfrei funktioniert. Wenn Sie die Elemente jedoch untersuchen, klicken Sie mit der rechten Maustaste auf Inspizieren. Lass mich dir etwas zeigen. Öffne den Körper und die Rechte. Im Text siehst du ein Div mit der ID der geöffneten Routen, direkt in diesem Div siehst du ein weiteres Div mit dem Klassennamen unserer App. Lass uns öffnen. Und direkt in diesem Div wirst du auch ein weiteres Div mit dem Klassennamen Container sehen . Schau, wir haben hier so viele Elternknoten, und diese könnten die Leistung unserer Anwendung beeinträchtigen. Ordnung, also wenn Sie das Div hier mit dem Klassennamen des Containers öffnen , werden Sie das H2-Tag sehen. Aber das Problem sind diese, dieses Div mit dem Klassennamen Container wird benötigt, um die Gesten und Ausdrücke zusammenzufassen. In Ordnung, es dient also als übergeordneter Knoten. Das heißt, Jess hat Elemente. Aber das Problem hier ist, dass wir hier so viele Elternelemente haben . Und das könnte die Leistung unserer Anwendung verlangsamen . Was wir jetzt tun werden, ist dieses Div zu entfernen. Die einzige Möglichkeit , dies zu tun, ist die Verwendung von React Fragments. Heroin gegen VS Code. Öffnen Sie das Demo-Fragment. Also müssen wir den Unterschied abwischen. Können Sie sehen, dass sich die Anwendung beschwert? Jetzt werde ich das Div durch React-Punkte, Fragmente und Highlights ersetzen . Drücken Sie die Alt-Taste auf Ihrer Tastatur. Tippen Sie auf die Aufwärtspfeiltaste, um es hineinzubewegen. Und vergiss nicht, wir müssen den Code formatieren. Wunderschön. Lassen Sie uns das Element untersuchen. Kannst du gleich hier sehen, du wirst ein Div mit dem Klassennamen der App sehen . Bisher. In diesem Div haben Sie ein weiteres Div mit dem Klassennamen Container, das als zusätzlicher Knoten gespeichert wird. Aber jetzt haben wir hier kein Muster. Die zusätzlichen Knoten, die hinzugefügt wurden, sind also weg. Genau das ist das Schöne an React Fragments. Okay, es hilft also, zusätzliche Knoten zu entfernen und die Leistung Ihrer Anwendung zu verbessern . Nehmen wir also schnell ein anderes Beispiel. Öffne den Explorer. Stimmt, würde der Frosch nicht eine Demo machen? Wir werden eine Komponente namens my table dot js, generic, die funktionalen Komponenten erstellen . Lassen Sie uns also das Div durch eine Tabelle ersetzen. Stimmt es? Wir sind in der Tabelle, wir werden den Tischkörper haben, direkt darin. Wir werden die Tabellenzeile haben. Also werden wir direkt in der Tabellenzeile den Doppelpunkt der Tabelle haben. In diesem Fall wird die Spalte jedoch in einer separaten Komponente verwaltet. Schnell, lassen Sie uns die Spaltenkomponente Racket Construct Demo neue Datei erstellen , mein Spaltenpunkt js RFC, um die funktionale Komponente zu generieren, schließen Sie den Explorer. Also nach rechts in diesem Div werden wir die Tabellendaten haben. Und hier werde ich die Highlights der Fähigkeiten haben , duplizieren Sie sie. Also hier werde ich React js haben. Gehen Sie also zur App-Komponente. Wir müssen meinen Tisch rendern. Zuerst muss ich nur einen Kommentar dazu abgeben. Vermassel es. Lassen Sie uns meine Tabelle aus der kompetenten Slash-Frack-Demo Slash My Table importieren . Ganz unten. Wir müssen rendern, dass meine Tabelle G mit diesen selbstschließenden Tags näher dran ist. Speichern. Nachdem wir dies getan haben, müssen wir die Spaltenkomponenten innerhalb der Null, der Tabellenzeile, richtig rendern . Also müssen wir zuerst meine Spalte aus meiner Spalte importieren. Natürlich befindet es sich im selben Verzeichnis. Also hier müssen wir meinen Dickdarm schützen. Der Browser und Bone. Hier ist es wunderschön? Lassen Sie uns noch einmal schnell die Elemente untersuchen. Öffne den Körper. Das Div mit der ID von Roots. Wir haben ein weiteres Div mit dem Klassennamen AB. Und dann haben wir die Tabelle, den Tabellenkörper, die Tabellenrolle. Und jetzt haben wir einen zusätzlichen Knoten , der dem Baum hinzugefügt wird, das ist dieser Div hier, geöffnet. Und richtig, innerhalb dieser Division haben wir die Tabellendaten. Wenn Sie also die Konsole inspizieren, werden Sie dort einen nervigen Pfeil sehen. Können Sie sehen, dass Validate DOM Nesting TDI nicht als untergeordnetes Objekt einer Div angezeigt werden kann? Lass es mich dir in einer Kolumne zeigen. Du siehst den Kerl hier drüben. Es kann nicht als untergeordnetes Element einer Div erscheinen. Die einzige Möglichkeit, dieses Problem zu lösen, besteht darin, das Div durch ein Fragment zu ersetzen. Jetzt kommen wir her, befehlen D, um alle Vorkommen von DV auszuwählen, löschen es ab und ich mache Reaktionspunktfragmente. Sicher. Im Browser. Wir müssen die Konsole aktualisieren. Paar. Kann schauen, der Fehler ist weg. Ist das nicht wunderschön? Hoch? Ich liebe es. In Ordnung, lass mich dich zu den Elementen entführen. Komm her. Wenn Sie nun die Elemente untersuchen, ist der zusätzliche Knoten, der dem DOM-Baum hinzugefügt wurde, weg. Hier haben wir also das T-Körper-Theorem und TD. Siehst du, das ist genau der Punkt, den du beachten musst , wenn du mit Tabellen arbeitest. Der TDI kann also nicht in einem Div erscheinen. Vielmehr müssen wir die td-Elemente in ein React-Fragment einschließen . Das Einfachste, das gemacht wurde. Es gibt eine kürzere Syntax, die Sie für die Deklaration von Fragmenten verwenden können . Und die Syntax sieht so aus. Sie müssen nur den Befehl D für das React-Punktfragment auswählen, um alle Vorkommen auszuwählen, und löschen Sie es. Das leere Tag, das Sie hier sehen, ist also eine andere Möglichkeit, React-Fragmente zu schreiben. Wenn Sie im Browser speichern, sieht das Ergebnis genauso aus. Die wichtigsten Punkte, die Sie beachten sollten, sind also , dass Sie, wenn Sie das leere Tag als React-Fragment verwenden, die Schlüsselattribute nicht an das Essen weitergeben können. Die Schlüsselattribute können nur mit React-Punktfragmenten übergeben werden . Lass es mich dir schnell zeigen. Können Sie sehen, dass das Schlüsselattribut das einzige Attribut ist , das an ein React-Punktfragment übergeben werden kann ? Wenn Sie also so etwas tun und das leere Tag als Fragment verwenden, wird es für Sie nicht funktionieren. Die wichtigsten Punkte, die Sie beachten sollten, sind also, dass Schlüssel die einzigen Attribute , die an ein Fragment weitergegeben werden können. Und in Zukunft könnten sie Unterstützung für das Hinzufügen von Attributen hinzufügen. Moment ist key das einzige Attribut, das an den zweiten Punkt des Reaktionsfragments übergeben werden kann . Fragmente, die mit der expliziten React-Punktfragmentsyntax deklariert wurden expliziten React-Punktfragmentsyntax die einzige Art von Fragmenten, die die Schlüsselattribute annehmen können. Das ist also alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentriere dich darauf, immer vorsichtig zu sein. 27. Einführung in Hooks: Was genau ist Hooks und warum ist es wichtig, es zu lernen? In Ordnung, also was waren eigentlich Hooks erforderlich? Bevor wir fortfahren? Ich möchte sichergehen , dass Sie die grundlegenden Konzepte von React js bereits kennen. Und Sie kennen sich mit Themen wie Funktionskomponenten, Eingabeaufforderungen, Zuständen, Karten, Kontrolle , Imputen usw. aus. Wenn Sie jedoch ein Neuling sind, empfehle ich Ihnen dringend, meine React-JS-Einzelgespräche für Anfänger durchzugehen meine React-JS-Einzelgespräche für Anfänger um sich mit den grundlegenden Konzepten von React vertraut zu machen und dann zu Hooks zurückzukehren und mit unseren fortzufahren. Und jetzt fangen wir an. Was genau in React G verankert ist ist, dass Hooks in der nahen Zukunft in React System 0.8 erscheinen, was es uns ermöglicht, Zustands- und Lebenszyklusfunktionen zu nutzen , ohne eine Klasse zu schreiben. Ordnung, das bedeutet also, dass wir Lage sein werden, uns in den React-State alle staatlichen Futures in funktionalen Komponenten zu nutzen . Tatsächlich können Sie mit React Hooks genau die gleichen Ergebnisse erzielen, die Sie mit der Lifecycle-Methode erzielt haben. Und das kannst du mit weniger Code machen. Technologieknoten. React Hooks funktioniert nur mit funktionalen Komponenten. Nun stellt sich die Frage, wofür Hooks benötigt wurden? Und warum ist es wichtig zu erfahren, wer Punkt Nummer eins ist. Früher, als Reacts erstellt wurden. Um mit Klassen arbeiten zu können, müssen Sie dieses Schlüsselwort in JavaScript genau verstehen . Und wenn Sie mit Java-Skript vertraut sind, wissen Sie, dass JavaScript nicht genau wie in anderen Sprachen funktioniert. Wenn es um React Hooks geht, müssen Sie sich jedoch keine Sorgen um diese wichtigen Rod machen. Warum? Es liegt einfach daran, dass wir es mehr benutzen wollen. Klingt gut. Wunderschön. Punkt Nummer zwei. Sie müssen das Ereignis immer in der Klassenkomponente binden. Aber mit der Einführung von Hooks in der Funktionskomponente keine Methoden mehr verbindlich. Und das ist natürlich eine große Erleichterung. Punkt. Nummer drei. Klassen mischen das Hot-Reloading, sehr unzuverlässig. Einfach weil sie sich nicht sehr gut minimieren lassen. In Ordnung, also Klassen Mix Hot Reloading, sehr flockig. Punkt Nummer vier, Hooks, ermöglicht es, Stateful-Logic zwischen Komponenten zu Stateful-Logic zwischen Komponenten ohne Ihre Komponentenhierarchie zu ändern. Beachten Sie diese wichtigen Punkte. Sie können keine Hooks innerhalb einer Klassenkomponente verwenden. Hooks funktionieren nur in der funktionalen Komponente. Okay, Hooks können also nur in funktionaler Gesellschaft verwendet werden und sie sind innerhalb der Klassenkomponente unwirksam. Nummer zwei, Hooks enthalten keine wichtigen Änderungen und sie werden veröffentlicht und sind abwärtskompatibel. Zusammenfassend lässt sich sagen, dass Hooks oder spezielle Funktionen, mit denen wir uns in React States und Lifecycle-Futures funktionalen Komponente aus in React States und Lifecycle-Futures einklinken können, z. B. verwenden sie diesen Hook, ein Hook, mit dem Sie zwei Funktionskomponenten des Reaktionszustands hinzufügen können. Hooks ermöglicht es Ihnen, sich in React-Futures einzuklinken , ohne eine Klasse zu schreiben. Mit der Verwendung von Haken. Sie müssen sich keine Sorgen mehr um diese Keywords machen. Und schließlich ermöglicht es uns , Stateful-Logic wiederzuverwenden. Jetzt wissen wir, worum es bei React Hooks geht. Lassen Sie uns das in der nächsten Vorlesung praktisch betrachten. Das ist alles für heute. Tun Sie gut daran, ihn zu abonnieren. Und wir sehen uns in der nächsten Vorlesung. Ich konzentriere mich immer darauf, immer vorsichtig zu sein. 28. 27 useState Hooks: Lassen Sie uns mit den verwendeten Hooks fortfahren indem wir sie praktisch verwenden. Erstellen Sie schnell eine neue React-Anwendung und geben Sie ihr einen beschreibenden Namen. Sie können sich z.B. dafür entscheiden, es Hoops Practice zu nennen. An meinem Ende. Ich habe es schon erstellt. Fahren wir also mit VS Code fort. Öffnen Sie die Explorer-Clients. Stimmt es? Wir sind auf der SRC. Wir werden das Komponentenverzeichnis erstellen. Stimmt es? Innerhalb der Komponente erstellen wir eine neue Datei namens counter dot js. Generieren Sie die Funktionskomponenten. Perfekt. In Ordnung, lassen Sie uns über die Verwendung von Hooks sprechen. Sie verwenden, dass Hook eine spezielle Funktion ist , die den Anfangszustand als Argument verwendet und dann ein Array mit zwei Einträgen zurückgibt. Das erste Element im Array wird verwendet, um den Anfangszustand zu speichern. Das zweite Element im Array ist eine Setup-Funktion, die die Argumente akzeptiert, die zur Aktualisierung des Anfangsstatus verwendet werden. Lassen Sie uns es schnell implementieren, um genau zu wissen, wovon ich spreche. Um fortzufahren. Zuerst müssen wir die Usted importieren, die hierher kommen, plus ein Komma hier, Klammer öffnen und schließen. Und ich werde einfach solche Ustedes machen. Wie können sie diesen Haken verwenden, ist eine spezielle Funktion, oder? Also müssen wir es so aufrufen. Diese Funktion nimmt den Anfangszustand als Argument an. Und in diesem Beispiel wird der Anfangszustand Null sein, was dann ein Array mit zwei Einträgen zurückgibt was dann ein Array mit zwei Einträgen zurückgibt , const array. Also werden wir Kegel, Koma, setCount haben und es so zuweisen. Diese Syntax hier wird RE-Strukturierung genannt. Es ist genau hier die Zukunft von ES6. Das erste Element in diesem Array ist eine Variable , die zum Speichern des Anfangszustands verwendet wird. Das zweite Element ist also eine Setup-Funktion, die ein Argument akzeptiert, das verwendet wird, um den Anfangszustand zu aktualisieren Dies ist so einfach wie diese Techniken. Der Anfangszustand kann eine Zahl, ein boolescher Wert, eine Zeichenfolge oder ein Array sein. Okay, sie können also alle innerhalb dieses Parameters hier reingehen. Lassen Sie uns schnell die Anzahl im Browser anzeigen. Also richtig, wir sind auf der GSAs. Verwenden wir unser Hedge-One-Paket, um die Eröffnung und das Schließen des Kontos in geschweiften Klammern anzuzeigen . Und dann beziehen wir uns auf den Anfangszustand, die Anzahl, die gilt. Dieser Typ. Einfachste Punktspeicher-Mischung , um Ihre Anwendung auf dem Terminal auszuführen. Bevor wir also zum Browser übergehen, müssen wir diese Komponente in der App rendern. G ist genau hier. Wir müssen zwischen dem öffnenden Header-Tag und dem schließenden Header-Tag wählen . Ganz oben. Wir werden Kegel aus Schrägstrich-Komponenten und Schrägkegeln importieren. Also lass uns das Konto hier führen. Das ist noch einmal am einfachsten, stellt sicher , dass die Verpflichtung sicher ausgeführt wird. Im Browser. Und Knochen. Können Sie hier den Anfangsstatus der Gegenanwendung sehen . Lass es uns jetzt schöner machen. Ich werde es hier machen, ist es perfekt? Die Absicht dieser Vorlesung ist es also, den Anfangszustand unserer Inhaltsanwendung zu ändern den Anfangszustand unserer Inhaltsanwendung , wenn auf die Schaltfläche geklickt wird. Dafür müssen wir also eine Abstimmung festlegen, oder? Was sind die Bootfahren? Wir spezifizieren den Onclick, onclick dieser Schaltfläche. Wir werden diese Setup-Funktion aufrufen. Also genau hier werde ich Set Count machen. Und dann würde die Setup-Funktion ein Argument annehmen , das verwendet wird, um den Anfangszustand zu aktualisieren. Und in diesem Fall wird das Argument die Anfangsstatusklausel sein, der neue Wert dieses T. Lassen Sie mich das nach unten ziehen. Herzfrequenz, und das ist ein Funktionsaufruf. Wir müssen es in eine Pfeilfunktion umwandeln. Einfach so. Speichern Sie im Browser und knochen Sie. Probieren wir es aus, indem wir auf Bootfahren ändern klicken. Kannst du das sehen? Perfekt. Das ist Lee, das ist die Absicht. Um es noch einmal zusammenzufassen. Wenn Sie diese Daten nutzen möchten, ist React G zuerst da, Sie müssen das importieren, was das interessiert. Und danach müssen Sie den US-Did-Hook aufrufen und dann den Anfangszustand als Argument übergeben. Nachdem Sie das getan haben, müssen Sie es einem Array von zwei Einträgen zuweisen. Und wir sind in diesem Array, wir haben die ersten Elemente, die eine Variable , die verwendet wird, um den Anfangszustand zu speichern. Und das zweite Element ist eine Setup-Funktion, die ein Argument akzeptiert , das zur Aktualisierung der Anfangszustände verwendet wird. Und in diesem Fall ist das Argument hier die Anfangszustände plus eins. In Ordnung, also zum ersten Mal werden die Komponenten gerendert. Stattdessen wird eine Variable erstellt und auf Null initialisiert. Wenn Sie nun auf die Schaltfläche klicken, wird die zweite Methode aufgerufen, die dann die aktuelle Anzahl um eins erhöht. Aufrufen der setColor-Methode führt also dazu, dass die Komponenten erneut gerendert werden. Danach enthalten die Zählungen den aktuellen Wert, der dann im Browser angezeigt wird. So einfach ist das. Bei der Verwendung von React Hooks sind zwei Impotenzregeln zu beachten . Regel Nummer eins: Haken können nur auf oberster Ebene gefangen werden. Rufen Sie also keine Hooks innerhalb einer Schleifenbedingung oder verschachtelte Funktionen auf. Regel Nummer zwei: Hooks können nur innerhalb der React-Funktion aufgerufen werden. Das ist alles für heute und wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 29. 28 Update-Status basierend auf dem Wert des vorherigen Zustands: In dieser Vorlesung lernen wir, wie man den Status auf der Grundlage des vorherigen Zustandswerts festlegt. Außerdem werden wir den Unterschied zwischen diesem Beispiel und dem vorherigen Beispiel besprechen , das wir gemacht haben. In dieser Vorlesung werden wir also demonstrieren, wie der Zähler erhöht, verringert und sogar zurückgesetzt wird. Also lasst uns das schnell machen. Würde das Komponentenverzeichnis nicht? Wir werden eine neue Komponente namens Counter erstellen , um die funktionalen Komponenten zu generieren. Also lasst uns schnell den Use That Hook importieren . Es ist eine Funktion. Wir müssen es aufrufen und dann den Anfangszustand als Argument verwenden. Und in diesem Fall wird der Anfangszustand wie gewohnt Null sein. Und das gibt ein Array von zwei Einträgen zurück, oder? Also werde ich hier ein Array mit Const machen. Wir werden zählen müssen. Dann haben wir die Setup-Funktion, um die Anfangszustände zu aktualisieren und die Plaque zuzuweisen. Das hat unser Recht vereinfacht. Nachdem wir das getan haben, gehen wir schnell zum GSS über. Verwenden wir das Hadrian-Tag , um den aktuellen Wert anzuzeigen. Nachdem wir das getan haben, müssen wir den Vorstand Haynes implementieren. Zuerst werden wir hier Inkremente haben , indem wir sie dreimal duplizieren. Hier werden wir ein Dekrement haben. Und hier werden wir Resets haben. Einfach so. Ich spezifiziere den Onclick. Hat eine Pfeilfunktion übernommen. Wir rufen die eingestellten Zählungen auf und übergeben dann die anfängliche Anzahl plus den neuen Wert. Das Gleiche hier. Also werde ich einfach kopieren, vergleichen, einfügen. Der Unterschied besteht also darin, dass dies eine Produktion sein wird. Für den Reset. Wir müssen eine variable, konstante, anfängliche Anzahl deklarieren . Entspricht Zara. Nach einem Klick auf dieses Boot wollen wir die Zählervermietung zurücksetzen. Also werde ich jetzt so etwas machen. Lass es uns einfach in einem Div zusammenfassen. Verschieben Sie es so schnell wie möglich den Code formatieren. Perfekt, siehst du, wann immer ich den Code formatiere, bekommst du eine ordentliche Einrückung. Geben wir hier den onClick an. Wir müssen also auf Anfangsstrom einstellen. Okay, nachdem Sie das getan haben, öffnen Sie die App. Und hier müssen wir das Tattoo von einem kompetenten Slash-Counter importieren kompetenten Slash-Counter , um es hier zu rendern. Seit der Verpflichtung. Drücken wir auf die Kommentare zur aktuellen Version, was das vorherige Beispiel ist. Schau es dir im Browser an. Kannst du sehen? Versuchen wir es also, indem auf das Increment Borer-Team klicken. Wie schön. Okay. Verringern, Inkrementieren, Erhöhen, Verringern, Zurücksetzen. Alles funktioniert wie erwartet einwandfrei. Die Absicht dieser Vorlesung ist es also, den Zustand auf der Grundlage des vorherigen Zustandswerts zu aktualisieren. Also geh zurück zu Kamera zwei. Wir werden dieses Beispiel mit dem Increment Borer-Team demonstrieren . Und danach können Sie mit der Implementierung fortfahren, indem Sie auf den Rest der Schaltfläche klicken Wir werden eine Funktion inkremente aufrufen. Und diese Funktion würde oben definiert werden. Wir werden konstante Inkremente haben , setzen Sie es auf unsere Funktion. Dann stellen wir hier die Zählung so ein, dass sie plus eins zählt. Speichern Sie im Browser. Und alles funktioniert immer noch einwandfrei wie erwartet, oder? Gehen wir also direkt zu dem Problem über, das jetzt ist. Nehmen wir an, dass wir innerhalb dieser Funktion die Anzahl um zwei erhöhen möchten. Es ist also einfacher, so etwas zu tun. Wir müssen diese nur duplizieren und dann haben wir es so. Wenn Sie im Browser speichern, aktualisieren Sie und klicken Sie auf das Inkrement Boarding. Kannst du sehen, dass sich alles um eins erhöht. Aber sehen Sie, wir hatten erwartet, dass diese Anwendung um zwei erhöht wird. Aber jetzt haben wir es im Browser um eins erhöht. Es scheint nicht gut zu funktionieren. Das ist also einer der Nachteile bei der Verwendung CMS plus einer in den React-Jahren. Lassen Sie mich es also gut genug erklären. Wenn Sie sich das genau ansehen, werden Sie feststellen, dass wir denselben Status mehrmals aktualisieren. Infolgedessen aggregiert React all diese Daten zu einem einzigen Stapel und führt sie einmal aus. Also, selbst wenn wir das 1 Million Mal machen, lass es mich dir so zeigen. Speichern. Diese werden ebenfalls um eins erhöht. React wird also all diese Daten zu einem einzigen Stapel zusammenfassen und zwar so, wie sie akut sind. Sie sehen also möglicherweise nicht die Auswirkungen dessen, was Sie hier getan haben da dies durch MSE 123456 sogar erhöht werden soll . Das soll also um sechs erhöht werden, aber sieh, es sind Inkremente um eins. Das ist also der Nachteil der Verwendung von count plus eins und react. Und jetzt stellt sich die Frage, warum reagieren die Staaten? Mach dir keine Sorgen. Die Antwort auf diese Frage gebe ich Ihnen gegen Ende dieser Vorlesung. Lassen Sie uns dieses Problem also schnell lösen. Um dieses Problem zu lösen, müssen wir eine anonyme Funktion übergeben, die Zugriff auf den vorherigen Zustandswert hat. Und jetzt wird die Syntax anders aussehen. Satz zählt. Also richtig, wir sind in dieser Funktion, wir werden vorherige Zählungen durchführen, sie auf unsere Funktion setzen, dann haben wir hier vorherige Zählungen plus eine, okay, Markierung. Dupliziere es. Wenn Sie dies also tun und im Browser auschecken, neu laden, auf das eingekaufte Inkrement klicken und Sie sehen, dass es um zwei erhöht wird. So einfach ist das. Siehst du das? Jetzt funktioniert die Anwendung wie erwartet? Vertrauen Sie mir, es funktioniert tatsächlich wie erwartet. Hier haben wir eine Funktion übergeben , die Zugriff auf den vorherigen Zustandswert hat , und wir haben ihn um eins erhöht. Wir können also auch um fünf erhöhen. Lass mich dir duplizieren, duplizieren, duplizieren, sicher zeigen. Im Browser. Wir müssen in Schritten von fünf nachladen. So einfach ist das. Nehmen wir zum Beispiel an, dass Sie all diese Spitzen um zehn erhöhen möchten . Sie werden also eine solche Codewiederholung haben. Das gefällt mir nicht. Also lasst uns hier etwas zur Dehydrierung führen. Jetzt mache ich für let I ist gleich Null. Ich bin weniger als zwei und dann ich plus, plus so. Also hier haben wir die Set-Funktion. Also direkt im Inneren erhalten wir Zugriff auf den vorherigen Zustandswert. Dann der vorherige Zustandswert plus eins. Speichern Sie im Browser, aktualisieren Sie ihn schrittweise. Kannst du sehen, dass es um zwei erhöht wird. Wenn du herkommst, machst du fünf. Im Browser speichern, aktualisieren. Sie wird um fünf erhöht. Das bringt uns zurück zu der Frage, warum React Update State verkörpert? Lass mich dir eine Antwort geben. Der Grund, warum die Stadionabzeichen reagieren , liegt einfach darin, dass in React js die Komponente immer dann neu gerendert wird, wenn der Status aktualisiert wird. Stellen wir uns vor, wir haben das tausendmal aktualisiert. Es bedeutet einfach, dass unsere Komponente tausendmal neu gerendert wird . Und das wirkt sich auf die Leistung der Anwendung aus. Reagieren, straffen und sich für ein Update entschieden haben, sind einfach stapelweise geblieben. Es wird also all diese Vorkommnisse aggregieren und sie einzeln ausführen. Okay, ich verstehe also, dass diese Vorlesung ziemlich knifflig ist, aber ich schlage vor, dass Sie das Video immer wieder abspielen , um sich daran zu erinnern. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf ganzheitliche Pflege. 30. 29 Objekt als Zustandsvariable: In diesem Vortrag werden wir verstehen, wie das Objekt mit den US-Schulden umgeht, wer arbeitet hart, oder? Also lasst uns anfangen. Wir befinden uns im Komponentenverzeichnis. Wir werden einen neuen Zähler erstellen. Und ich nenne es Zähler. Drei Punkt g ist generisch, die funktionale Komponente. Schließen Sie den Explorer. So schnell. Lassen Sie uns die Use That Hooks als deklariert die notwendigen Zustandsvariablen importieren Hooks als deklariert , die verwendet werden sollen. Also hier werden wir Const Mary haben , die dieses Set trägt. Wir werden Mitarbeiter-Koma-Sets haben, Mitarbeiter Equa, äh, richtig? In diesem Beispiel wird die erste Phase ein Objekt sein, das über diese Objekte abstimmt. Wir werden eine Namensspalte haben, setzen Sie sie auf ein leeres Zeichenkettenkomma. Wir werden die Länderspalte haben, setzen Sie sie ebenfalls auf eine leere Zeichenfolge. Okay, der Ausgangszustand hier ist also ganz anders als in den vorherigen Vorlesungen. Umgang mit dem Objekt und die Verwendung dieses Hakens erfordern also einen neuen Ansatz. Es ist ganz einfach, also möchte ich dich hier nicht erschrecken . Lass uns das abwischen. Innerhalb des Div werden wir also ein Eingabe-Tag haben und der Typ equa testet den Wert. Wir müssen den Wert dynamisch anzeigen, den Punktnamen des Mitarbeiters. Dieses Attribut wird unverändert für den Namen verwendet, wenn der Benutzer anfängt, in das Eingabefeld zu tippen. Genau hier erhalten wir Zugriff auf die Ereignisse, setzen sie auf unsere Funktion und rufen dann die Methode set employee auf. Natürlich sollten Sie inzwischen wissen, dass dies ein Argument akzeptiert , das zur Aktualisierung des Anfangsstatus verwendet wird . So einfach ist das. Also, was sind die Klammern wir in ein Objekt nehmen, und ich nenne diese E-Punkt-Ziele, Punktwert. Wunderschön. Lassen Sie uns das Eingabe-Tag schließen. Okay, lass uns den Code formatieren. Besser. Höhepunkte aus Zeile 72, Zeilen 11. Dupliziere es. Also hier wird es Employee Dot Country sein. Die nächste Zeile besteht also darin, den Ortsnamen und das Land im Browser anzuzeigen. Und wir werden ein Div haben, direkt innerhalb des Div Lassen Sie uns ein p-Tag haben und das p-Tag schreiben. Ich werde es tun. Mein Name ist Mitarbeiter, Punktname, Markierungen und das Duplikat wird Mitarbeiter sein. Aber Land. Also hier mache ich es einfach, ich komme aus dem Employee Dot Country. Das Land, das Sie in das Eingabefeld eingeben, wird also hier angezeigt. In Ordnung, so sicher. Öffne die App. Ja, wir müssen es hier rendern. Und ich werde es teilweise tun, drei von Komponenten mit einem Schrägstrich und einem Kommentar zu Canvas vergleichen . Dann müssen wir die Anzahl von drei Punkten rendern , wobei G näher an dem sich selbst schließenden Tag liegt. Speichern Sie im Browser. Bumm, perfekt. Geben wir also etwas in den Namen ein. Der Name ist also ein Doppelbalken. Für den Namen funktioniert alles. Wenn wir also anfangen, etwas in das Länderfeld einzugeben, werden wir erleben, dass, wenn wir Verhalten hinzufügen, das Land Sie sein werden. Okay? Kannst du sehen, wenn du ihn in das Eingabefeld tippst, würde der Name hier verschwinden. Und wenn du anfängst, es in die Nim FUD einzutippen, wird das Land hier verschwinden. Also was ist es genau. Sie sehen jetzt auch, wenn Sie anfangen, in das Eingabefeld für das Land zu tippen, wird der Name gelöscht. In Ordnung, lassen Sie mich das schnell zu Ihren Renten bringen. Okay, lass es uns gleich hier machen. Lass uns noch einen Div machen, oder? Was für ein Div, wir werden ein P-Tag haben, oder? Wir sind auf dem P-Tag. Ich werde JSON Dot Stringify machen. Dann müssen wir im Browser und Bone auf den Mitarbeitersafe verweisen . Siehst du, jetzt haben wir den Namen und wir haben das Land. Wenn wir also den Namen in das Eingabefeld eingeben, erscheint er hier zwischen der Zeichenfolge. Und wenn wir das Land antippen, wird es auch hier zwischen dieser Zeichenfolge erscheinen . Schau es dir an. Der Name wird also ein Doppelbalken sein. Wenn ich in das Länderfeld eingebe, können Sie sehen, dass der Name verschwindet und das Land bleibt? Das passiert also einfach, weil sie diesen Hook verwenden , der Objekte nicht automatisch verwaltet und aktualisiert, im Gegensatz zur setState-Methode, die in der Klassenkomponente zu finden ist. Die Lösung für dieses Problem besteht also darin, den Spread-Operator zu verwenden , um das Objekt manuell zu verwalten und zu aktualisieren. Lassen Sie mich Ihnen schnell zeigen, dass es extrem einfach ist. Also genau hier müssen wir den Mitarbeiter so verteilen. Okay? Auch hier müssen wir den Mitarbeiter verteilen. Dies hilft also, die Objekte manuell zu verwalten und zu aktualisieren. Am einfachsten ist das, wenn Sie sparen. In Ordnung, probieren wir es aus. Baba. Baba erscheint hier. Das Land, Großbritannien. Das Vereinigte Königreich erscheint hier. Als Zuschauer funktioniert alles einwandfrei. Zusammenfassend lässt sich sagen, dass Sie, wann immer Sie Objekte als Zustandsvariable behandeln , den Spread-Operator verwenden müssen, um das Objekt manuell zu verwalten und zu aktualisieren. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 31. 30 Array Als Zustandsvariable: In dieser Vorlesung lernen wir, wie man Array als Zustandsvariable verwendet. Also richtig, erstellen Sie im Verzeichnis der Komponente schnell eine neue Datei namens Hooks. Sie klicken mit der rechten Maustaste auf neue Lüfterhaken , dieser Array-Punkt g ist RFC, um die funktionale Komponente zu generieren. Schließen Sie den Explorer. Lassen Sie uns schnell eine zu verwendende Zustandsvariable deklarieren. Aber bevor wir fortfahren, müssen wir zuerst den usted Hook auf der obersten Ebene plus ein Komma hier importieren . Öffne und schließe lockige Zahnspangen, Kumpel. Lassen Sie uns nun die Elemente der Zustandsvariablen deklarieren. Wir müssen Gegenstände zusammenstellen. Und der Anfangszustand wird ein leeres Array sein. Okay? Die Absicht dieser Vorlesung ist es also, dieser Reihe Elemente hinzuzufügen . Okay? Die Elemente, die wir zu diesem Array hinzufügen werden, werden also aus der angezeigten Eingabe stammen. Daher müssen wir die Zustandsvariablen für das Eingabefeld deklarieren. Stellen wir uns vor, wir möchten die Namen der Mitarbeiter zu diesem Array hinzufügen . Und das werde ich hier machen. Komma eines Mitarbeiters setzt Mitarbeiter gleich, Sie geben an, und der Anfangsstatus wird eine leere Zeichenfolge sein. Wo auch immer wir hier sind, wir werden in diesen Bereich aufgenommen. Und die Frage ist, wie können wir das machen? Keine Sorge, ich werde es dir in einem GC zeigen. Gehen wir schnell zur Benutzeroberfläche über. Markieren. Diese, wisch es ab. Lassen Sie uns jetzt ein H2-Tag haben. Und ich werde einen Mitarbeiter hinzufügen. Direkt unten. Wir werden mit dem selbstschließenden Etikett einen Input haben , der näher an uns herankommt. Und dann wird der Typ Testwert sein. Wir nehmen diesen Typen hier auf, das ist diese Variable , die den Anfangszustand beibehalten wird . Kopieren Sie es schnell und fügen Sie es hier ein. Wenn der Benutzer also anfängt, sie in das Eingabefeld einzugeben, müssen wir die Werte erfassen , die er eingibt. Dafür müssen wir also den onchange angeben. Genau hier. Wir werden die Fehlerfunktion übernehmen. Also richtig, innerhalb der Fehlerfunktion müssen wir die Setup-Funktion set employees aufrufen. Nachdem wir das getan haben, werden sie uns durch ihre Funktion hier Zugang zu den Veranstaltungen geben. Und mithilfe dieser Veranstaltung werden wir in der Lage sein, den Wert, den der Benutzer eingibt, gezielt zu erfassen. Ereignispunkt, Ziel, Punktwert. Das einfachste. ist also beabsichtigt, diesem Array über die Bootsclique Artikel hinzuzufügen . Lassen Sie uns also schnell die Abstimmung spezifizieren. Wahlrecht in diesem Boot werde ich bei Gegenständen innerhalb des Bootes ausüben. Wir müssen ihre eigene CLI angeben. also auf diese Schaltfläche klicken, rufen wir die Funktion Artikel hinzufügen auf. Lassen Sie uns diese Funktion schnell definieren. Komm an die Spitze. Wir werden also ständig Artikel hinzufügen haben. Stellen Sie dies auf unsere Funktion ein. Also richtig, innerhalb dieser Funktion werden wir diese Setup-Funktion eines Headsets aufrufen . Lassen Sie uns schnell die Wertesätze für das Elementarray übergeben. Und in der vorherigen Vorlesung haben wir gelernt, dass die Setup-Funktionen nicht die Kapazität haben, mit einem Update Schritt zu halten. Oder im Fall von Array können wir sagen, dass die Setup-Funktion Element nicht an das Ende des Mietvertrags anhängen kann. Daher müssen wir es manuell mit Hilfe des Spread-Operators handhaben . Lass es mich dir schnell zeigen. Ordnung, also um das Element festzulegen, werden wir ein Array haben und dann das Item-Array verteilen. Zu guter Letzt werden wir ein neues Objekt pushen. So einfach ist das, oder? Wir sind in diesem neuen Objekt. Wir müssen die ID-Elemente, Punkte, Land angeben, da wir eine ID benötigen, die verwendet wird, um die Elemente , die dem Array hinzugefügt werden, eindeutig zu identifizieren . Nennen Sie den Mitarbeiter. Hier drüben, direkt in diesem Objekt, können Sie so viele Daten hinzufügen, wie Sie möchten. Also wenn ich zB die Adresse eines Mitarbeiters hinzufügen möchte, müssen Sie nur die State-Variable duplizieren und die Variablen und die Setter-Funktion angeben. Dann komm ruhiger her. Sie können es unten hinzufügen. Am einfachsten ist es, nachdem wir dies getan haben, lassen Sie uns diese Elemente schnell zuordnen. Lass es uns direkt unter dem Boden machen. Ich möchte das UL-Tag verwenden. Stimmt es? Innerhalb des UL-Tags werden wir die geschweiften Klammern und dann die Elemente, die Punktzuordnung, haben . Die Kartenmethode. Wir nehmen eine Pfeilfunktion auf und öffnen und schließen dann Klammern. Stimmt es? Würde der Fehler nicht funktionieren. Wir werden einen Parameter übergeben. Dieser Parameter steht für jedes Element in der Liste. Dann müssen wir es hier auf dem Bildschirm anzeigen. Und das werde ich tun, ich werde das LI-Tag benutzen. Lassen Sie uns den Schlüssel als Item-Punkt-ID angeben. Und richtig, innerhalb des inneren HTML-Codes haben wir Artikelpunkte, Namen, das ist dieser Name hier, die ID und den Namen. Lassen Sie uns diese Komponente direkt in der App Js ausführen . Wir müssen Hooks dieses Array aus den Slash-Hooks der Komponente importieren . Hat RA, dazu einen Kommentar abgegeben? Komm her. Render, hakte es, Ira, sicher im Browser. Und bumm, wunderschön. Lass es uns überprüfen. Hier. Ich werde einchecken. Eine Bar, hat den ersten Mitarbeiter und ich habe auf die Tafel geklopft, sie wird hinzugefügt. Wir werden das C-Boom-Mikrofon haben. Okay, also wir werden diesen Namen hier haben. Das liegt mir sehr am Herzen, oder? Alles funktioniert wie erwartet einwandfrei. Gut unterrichtet, Wunderschön. Gehen Sie zurück zum VS-Code und lassen Sie mich erklären, was unter der Haube passiert. Also hier ist etwas los und ich muss es einfach erklären , damit es jeder gut genug versteht. Fahren wir mit der Funktion fort. Bevor wir fortfahren, formatieren wir den Code schnell. Perfekt. Es sieht sauber aus und ich liebe es. Okay, wenn also die Funktion „ Artikel hinzufügen“ aufgerufen wird, würde diese Setup-Funktion aktiviert werden. Also erstellen wir eine Kopie aller Elemente im Array, indem wir den Spread-Operator für die Liste der kopierten Elemente verwenden. Dann fügen wir ein neues Objekt an. Und auf diese Weise überschreiben wir nicht das ursprüngliche Array. Dadurch wird es tatsächlich an das Ende des Mietvertrags angehängt. Zusammenfassend lässt sich sagen, dass Sie, wenn mit Array als Zustandsvariable arbeiten, Sie mit Array als Zustandsvariable arbeiten, zunächst eine Kopie der Elemente mit dem Spread-Operator erstellen müssen . Nachdem Sie das getan haben, müssen Sie ein neues Element anhängen und es als Argument an unsere Funktion übergeben. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Sorgfältiger Kurs und ganzheitliche Betreuung. 32. 31 Den Code organisieren: Willkommen zurück, alle zusammen. In dieser Vorlesung werden wir also die Ordnerstruktur organisieren. Öffnen Sie den Explorer direkt im Unternehmensverzeichnis. Wir schauen uns das an, erstellen ein neues Verzeichnis namens usted practice. Also werden wir jetzt alle Dateien kopieren , die mit der Verwendung in den USA zu tun haben. Habe Essen geübt. Halten Sie die Befehlstaste auf Ihrer Tastatur gedrückt. Tippen Sie, um die zugehörigen Dateien auszuwählen. Ziehe es per Drag & Drop in die USA. Habe geübt. Klicken Sie auf Verschieben. Perfekt. Jetzt haben wir also das zuständige Verzeichnis und Rechte innerhalb des Komponentenverzeichnisses. Wir haben in den USA eine Übung gemacht, die alle Dateien enthält, die der Verwendung von Git-Hooks zu tun haben. Weil wir in diesem Kurs so viele Hooks üben werden. Also ist es gut. Wir organisieren unsere Ordnerstruktur. Das Problem hier ist nun, dass die Eingaben fehlen werden. Schließen Sie den Explorer. Und dann schauen wir mal, was passiert. Rechte in der Terminologie. Können Sie sehen, dass wir ein Problem mit den Eingaben haben. Kannst du sehen, wie richtig, lass uns das schnell lösen. Gehen Sie zurück zur App-Komponente, denn hier haben wir fast alle Importe. Lassen Sie uns also schnell all diese Dinge abnehmen und dann lassen Sie uns alles von Grund auf neu machen. So wie diese. Zähler aus Schrägstrichkomponenten importieren. Slash verwendete seinen Slash-Zähler zum Üben. Den Rest kannst du am Ende erledigen. Versteh es nicht, richtig. Also, wenn Sie den Browser auschecken, funktioniert alles wie erwartet einwandfrei. In der nächsten Vorlesung werden wir also beginnen, die Verwendung dieser Hooks zu üben. Das ist oft unser und erwischen Sie in der nächsten Vorlesung. 33. 32 useEffect Intro: Der US-Effekt ist ein Haken für die Kapselung Code, der mit Nebenwirkungen zu tun hat. Und es ist eine Kombination aus Komponente Did Mount, Komponente, Did Update. Die Komponente wird montiert. Bisher funktionsfähige Komponenten haben keinen Zugriff auf den Lebenszyklus der Komponente. Aber mit den Bemühungen der USA können Sie die Zyklus-Futures nutzen. Daher können wir sagen, dass Sie mit Use Effort Hooks Nebenwirkungen in Ihren Komponenten erzielen können . Einige Beispiele für Nebenwirkungen sind das Abrufen von Daten und direkte Aktualisieren der Kuppel. Zeitschaltuhren. Der Einfachheit halber verwenden sie die Effektsyntax, die so aussieht. Wenn Sie den US-Effekt nutzen möchten. Zuerst müssen Sie es oben importieren. Sie verwenden effect ist eine Funktion, daher müssen wir sie aufrufen. Hier fängt der Spaß bei Lee an. Okay, jetzt möchte ich, dass du deine Hände faltest und auf meine Erklärung achtest. Und bitte geben Sie nicht zusammen mit mir Code ein. Der US-Effekt ist also eine Funktion, schreibt. Und hier haben wir die Funktion aufgerufen. Die Funktion nimmt zwei Parameter an. Der erste Parameter ist eine Funktion, die nach jedem Rendern ausgeführt wird. Ordnung, was einfach bedeutet, dass jedes Mal, wenn die Komponente rendert, die Funktion aufgerufen wird. Der erste Parameter des US-Effekts ist also eine Funktion, die nach jedem Rendern aufgerufen wird. Dieser Typ hier. Okay, lass mich das zusammenstellen, damit du das Wesentliche verstehen kannst. Dies ist der erste Parameter des US-Effekts, einer Funktion, die nach jedem Rendern ausgeführt wird . Und der zweite Parameter ist ein leeres Array, das allgemein als Abhängigkeitsarray bezeichnet wird . Dafür müssen wir nur hier ein Komma setzen und dann ein leeres Array nehmen. Dies ist also der erste Parameter der US-Auswirkungen. Und dann ist dies der zweite Parameter der US-Auswirkungen. Dieser Typ hier wird nach jedem Rendern heiß. Das nennt man also den Effekt. Diese Funktion hier in den USA heißt Effect Hook, wenn ein leeres Abhängigkeitsarray als zweites Argument zur Wiederverwendung von Effect-Hook übergeben wird . Das bedeutet einfach, dass sie Effekte verwenden , die nur beim ersten Rendern ausgeführt werden. Wenn die Komponente also erneut gerendert wird, wird der Effekt nicht ausgeführt. Das ist genau die Verwendung der leeren Abhängigkeit RA. Ein weiterer wichtiger Punkt ist, dass Sie Effekte auch anhand der Sonden oder des Zustandswerts konditionieren können. Und das machst du, indem du es weitergibst, oder? Wir sind in dieser Reihe. In der nächsten Vorlesung. Wenn wir mit der Implementierung beginnen, werden Sie es auf jeden Fall gut genug verstehen. Ordnung, das ist nur ein kleiner Einblick in das, was sie verwenden. Wirkung ist. Ein weiterer wichtiger Punkt , den Sie zur Kenntnis nehmen sollten , ist , dass der US-Effekt innerhalb der Komponente definiert ist. Auf diese Weise können wir auf den Status und die Sonden zugreifen , ohne zusätzliche Codes schreiben zu müssen. Also lasst uns diesen Code schnell formatieren und ihn besser aussehen lassen. Perfekt. Um es noch einmal zusammenzufassen: Bevor Sie diese Effekte nutzen , müssen Sie sie zunächst auf oberster Ebene importieren. Der US-Effekt ist hier eine Funktion. Also müssen wir es hier aufrufen. Und nachdem dies geschehen ist, akzeptiert der US-Effekt zwei Parameter. Der erste Parameter ist eine Fehlerfunktion, die in diesem Fall den Effekt hat. Und der zweite Parameter ist ein leeres Array. Habe das alles nicht verstanden. Wir können wahrscheinlich sagen, dass das zweite Argument dazu beiträgt, eine bedingte Wirkung zu erzielen. Lass es uns praktisch in der nächsten Vorlesung sein? Wir sehen uns dann. 34. 33 Die Komponente wurde montiert und aktualisiert: In diesem Beispiel erstellen wir eine sehr einfache Anwendung, die den Dokumenttitel aktualisiert, wenn auf die Schaltfläche geklickt wird. Wir werden also nachahmen, die Komponente gemountet wurde und die Komponente innerhalb des Komponentenverzeichnisses schnell aktualisiert wurde. Lassen Sie uns ein neues Paket namens User Effect Practice erstellen . Befehl B. Um den Explorer zu öffnen, klicken Sie mit der rechten Maustaste auf Komponente, neuer Ordner. Stimmt es? Wir sind in der US-Effektpraxis. Wir werden eine neue Komponente namens Effekt erstellen . Beispiel: Ein Punkt g generiert die funktionale Komponente. Vergessen wir also vorerst die Nebenwirkungen und erstellen wir eine einfache Gegenanwendung. Importiert schnell den Use That Hook. Lassen Sie uns die erforderliche Zustandsvariable deklarieren, die verwendet werden soll. Der Anfangszustand wird eine Zahl sein, und in diesem Fall wird er Null sein, oder? Innerhalb des Körpers. Wir müssen die Anzahl anzeigen. Und dann fahren wir ein Boot und klicken auf diesen Button. Wir werden den Anfangsstatus aktualisieren. Also werde ich einfach klicken. Und hier müssen wir das onclick angeben. Bei Klick rufen wir die Funktion setCount auf. Und richtig, innerhalb des Parameters nehmen wir den Anfangszustand plus die neuen Updates an. Speichern Sie, öffnen Sie die App-Komponenten und es hat hier weniger geregnet. Also werden wir das erste Effektbeispiel aus der verwendeten Komponente Slash importieren , wenn Beispiel für den Schrägstricheffekt verwenden. Genau hier. Lassen Sie uns dazu einen Kommentar abgeben. Lassen Sie uns das erste Effektbeispiel rendern. Sicher im Browser und Bone sind richtig. Alles funktioniert einwandfrei. Kannst du sehen? Okay, lass mich etwas Schönes machen. Lassen Sie uns diese Anwendung anpassen. Also muss ich nur den Klick direkt im inneren HTML entfernen . Und ich gebe mit dem Pluszeichen an, speichern Sie im Browser und zack, sehen Sie so schöner aus. Ich liebe es. Lassen Sie uns das Bilirubin vergrößern. Das heißt, die Absicht dieser Vorlesung ist es, den Dokumenttitel zu aktualisieren , wenn auf die Schaltfläche geklickt wird. Lassen Sie uns das tun, indem wir die Nutzungseffekte implementieren. Um den US-Effekt umzusetzen. Zuerst müssen wir es importieren. Sie nutzen Wirkung ist auch eine Funktion. Also müssen wir es aufrufen. Komm her und ich werde Effekte verwenden. Bei der Verwendung von AT-Hooks eine Funktion als Argument akzeptiert, die nach dem Rendern der Komponente ausgeführt wird. Und das wird eine Fehlerfunktion sein. Also die Funktion, die als Argument übergeben wird, oder? In den USA wird die At-Hook-Funktion Effekt bezeichnet, okay? Wir bezeichnen diese Funktion also als Effekt. Also richtig, was die Auswirkungen sind, wir werden den Titel des Dokuments aktualisieren. Der Punkttitel des Dokuments entspricht. Lassen Sie uns angeben, wie das Geld tickt, und ich werde es tun. Du hast mal auf Zählen geklickt. Also geben wir die Zählung einfach hier weiter. Okay? Wenn Sie speichern und zum Browser zurückkehren, klicken Sie rechts auf die Plus-Schaltfläche. Siehst du, wenn du genau hinschaust, wirst du feststellen, dass der Titel aktualisiert ist. Wenn ich klicke, kannst du sehen, heißt es jetzt, dass du zweimal geklickt hast. Ich hoffe, du kannst das sehen. Ordnung, also lautet der Titel des Dokuments zunächst null Mal. Wenn wir also auf die Schaltfläche klicken , werden die Komponenten erneut gerendert. Und nachdem die Komponente gerendert wurde, wird die Verwendung dieses Hooks aufgerufen. Klicken Sie auf Können Sie sehen und jetzt haben wir Sie einmal angeklickt. Klicken Sie erneut, Sie haben zweimal geklickt. Und einfach so. Immer wenn ich also auf das Board klicke, wird der Status aktualisiert und die Komponente wird erneut gerendert. Wenn die Komponente erneut gerendert wird, wird dadurch der US-Effekt-Hook ausgelöst und der Dokumenttitel wird auf den aktualisierten Zählwert geändert. Das impliziert also einfach den US-Effekt Hooke nach dem Rendern der Komponente aufgerufen wird. Jetzt können wir sehen , dass das Verhalten dieser Anwendung genau den Erwartungen entspricht. Lassen Sie mich Ihnen erklären, was unter der Motorhaube passiert. Um Nebenwirkungen bei funktionellen Komponenten zu verursachen. Zunächst müssen wir den US-Effekt importieren. Wer? Der US-Effekt , wer ist eine Funktion, wir müssen ihn aufrufen. Danach werden wir also eine Funktion als Argument übergeben, oder? Innerhalb der US-IF-Funktion. Also legen wir direkt im Effekt den Dokumenttitel mithilfe der Dokumenttitel-Browser-API fest. Was auch immer Sie hier in dieser anonymen Funktion haben , wird nach dem Rendern der Komponente kalt. Wenn React-Renderings mitgeliefert werden , werden die von uns verwendeten Effekte gespeichert. Führen Sie dann unsere Effekte aus, nachdem Sie die Kuppel aktualisiert haben. Das passiert bei jedem Rendern, auch beim ersten. Beachten Sie diese wichtigen Punkte. Punkt Nummer eins: Die US-Effekte werden nach jedem Rendern ausgeführt. Punkt. Zweitens: Der Nutzungseffekt ist innerhalb der Komponenten definiert. Weise erhalten wir Zugriff auf diese Daten und Sonden ohne zusätzlichen Code schreiben zu müssen. Und deshalb konnten wir auf den Titel des Dokuments zugreifen. Um es noch einmal zusammenzufassen: Wann immer Sie den US-Effekt nutzen möchten , müssen Sie ihn nach den Eingaben aus dem React-Modul importieren. Sie müssen es innerhalb der Komponente wie folgt Rechte nennen . Also nehmen wir direkt in der Funktion eine Pfeilfunktion als Argument auf. Also, richtig, wenn die Fehlerfunktion Ort ist, an dem die Transformation stattfindet, nach dem Rendern der Komponente würde diese Funktion nach dem Rendern der Komponente abgefangen werden. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 35. 34 Bedingter Effekt: In diesem Beispiel werden wir lernen, wie man Effekte bedingt ausführt. In der vorherigen Vorlesung haben wir gelernt, dass der Effekt 2k nach jedem Rendern aufgerufen wird. Und in den meisten Fällen kann das Aufrufen der Effekte nach jedem Rendern zu Leistungsproblemen führen. Wir brauchen also eine Möglichkeit, Effekte in einer funktionalen Komponente bedingt auszuführen. Lass es uns schnell praktisch machen, um es gut genug zu verstehen. Erstellen Sie schnell eine neue Datei mit dem Namen Effektbeispiel direkt in der US-Effektpraxis Wir werden das zweite Effektbeispiel haben. Punkte, Spott generiert die funktionale Komponente, Close Down the Explorer oder Beautiful M Phi. Also müssen wir wie immer die Ustedes importieren und sie wirken, weil Frauen Abbilder der Buddha-Vorbilder sind. Was wir also tun werden, ist, alles aus dem Effektbeispiel eins hier unten zu kopieren . Effektbeispiel eins hebt die Kopie hervor. Komm her. Wir müssen nur einfügen. Und danach werden wir die Komponenten ändern, um Beispiel zwei zu bewirken. Also hier unten müssen wir nur Beispiel zwei ausführen. Sicher. Öffnen Sie auch die App-Komponente. Wir müssen das Effektbeispiel rendern, um den Effekt zu importieren. Beispiel zwei Punkt g ist hier, schreibe einen Kommentar dazu. Und dann werden wir das Beispiel für den Rendereffekt zum Speichern verwenden. Gehen wir zurück zu Beispiel zwei. Also genau hier gehen wir zum Konsolenprotokoll. Nutzungseffekt heißt Anwendung speichern und Browser auschecken. Klicken Sie auf die Schaltfläche. Alles funktioniert wie erwartet. Wenn wir die Konsole überprüfen, werden Sie das erwartete Ergebnis sehen. Der Nutzungseffekt wird aufgerufen. Jetzt möchte ich dir etwas zeigen. Lassen Sie uns das Eingabefeld schnell implementieren. Die Verwendung wird oben importiert. Die Zustandsvariable ist hier. Jetzt müssen wir den Status für das Eingabefeld zu einer Variablen machen . Nehmen wir den Namen setName an. Sie geben an. Und der Anfangszustand wird eine leere Zeichenfolge sein. Es könnte ein doppeltes oder ein einzelnes Anführungszeichen sein. Von diesen beiden wird es gehen. In Ordnung, lassen Sie uns das Eingabefeld schnell implementieren. Lass es uns direkt unter dem Boden machen. Schließe es mit dem selbstschließenden Etikett. Hier tippe ich, teste den Wert. Es wird ein Name sein. Also unverändert, das heißt, wenn der Benutzer anfängt, in das Eingabefeld die so genannte Fehlerfunktion zu tippen , die dann Zugriff auf die Ereignisse gewährt. Okay, nennen wir die Namensfunktion des Sets. Also Rechte innerhalb des Parameters der setName-Funktion, wir werden die Ereignisse verwenden, um zu erfassen, was der Benutzer in das Eingabefeld eingibt . E-Punkte, Zielpunktwert. Ich denke, Sie sollten das Onchange-Ereignis inzwischen gut genug verstehen . Nachdem Sie dies getan haben, gehen Sie zum Browser . Sofern wir das Verhalten nicht überprüft haben, müssen wir die Konsole aktualisieren. Wenn ich jetzt anfange, in das Eingabefeld zu tippen, werden wir ein seltsames Verhalten erleben. Also mache ich es an der Bar. Kannst du sehen, wenn du in das Eingabefeld tippst, wird der US-Effekt aufgerufen. Kannst du das sehen? Jetzt haben wir den US-Effekt sieben Mal erlebt. Aber sehen Sie, unsere Absicht ist es die Effekte nur dann aufzurufen, wenn auf die Schaltfläche geklickt wird. Wenn Sie also auch auf die Schaltfläche klicken, wird der Benutzereffekt ebenfalls aufgerufen. Und wenn Sie etwas in das Eingabefeld eingeben, wird auch der Nutzungseffekt aufgerufen. Dieser Aufruf ist also eigentlich irrelevant und wird definitiv die Leistung der Anwendung verlangsamen . Es ist nicht optimal. Die Lösung für dieses Problem besteht darin, den US-Effekt nur bedingt auszulösen, wenn der Zählwert aktualisiert wird. Weil wir hier beabsichtigen, den Dokumenttitel zu aktualisieren , wenn auf die Schaltfläche so geklickt wird , können Sie das sehen? Wir möchten also, dass die Effekte erst ausgelöst werden , wenn auf die Schaltfläche geklickt wird. Wenn Sie in diesem Fall jedoch etwas in das Eingabefeld eingeben, wird sie den Effekt verwenden aufgerufen, etwas in der Art zu tun. Kannst du sehen, dass all diese Dinge eigentlich irrelevant sind? Lass es uns schnell reparieren. In der vorherigen Vorlesung haben wir gelernt, dass die Verwendung von Vektorfunktionen zwei Parameter akzeptiert. Der erste ist glücklicherweise der Effekt selbst, und zweitens ist das Abhängigkeitsarray genau hier. Um diesem Problem ein Ende zu setzen, müssen wir hier das zweite Parameterkomma angeben, und dann nehmen wir ein leeres Array auf. Diese Anwendung hängt also von den Zählungen ab, um aktualisiert zu werden. Wenn die Zählungen aktualisiert werden, möchten wir, dass das verknüpfte Dokument ebenfalls aktualisiert wird. Wir können also sagen, dass die Anwendung von der Zählvariablen abhängt. Deshalb müssen wir die Rechnung berücksichtigen. Das bedeutet, dass der Effekt verstärkt wird , wenn die Anzahl aktualisiert wird. So lässt sich also zumindest ein Effekt bedingt ausführen. Wenn Sie speichern und zum Browser zurückkehren. Wir müssen den Browser aktualisieren und auch die Konsole aktualisieren. Wenn Sie nun auf die Plus-Schaltfläche klicken, wird der Effekt aufgerufen und der Dokumenttitel wird detailliert angezeigt. Schon wieder. Es zeigt die gleichen Ergebnisse. Wenn wir anfangen, in das Eingabefeld zu tippen. Siehst du, wir erleben nicht mehr, dass wir Verhalten hinzufügen. Jetzt wird unser Effekt aufgerufen, wenn der Strom aktualisiert wird. Kannst du sehen? Versuchen wir es also noch einmal, aktualisieren Sie es. Wenn ich es in das Kaiserfeld tippe, passiert nichts. Der Effekt wird nicht einfach deshalb aufgerufen, weil wir möchten, dass die Effekte aufgerufen werden , wenn die Anzahl aktualisiert wird. Wenn ich also auf die Plus-Taste drücke, werden die Komponenten erneut gerendert. Und nachdem die Komponente gerendert wurde, wird der Effekt abgefangen. Kannst du eine technokratische Konsole sehen? Alles funktioniert wie erwartet einwandfrei. Jetzt wird der Effekt nur noch Code abgerufen , wenn die Anzahl der Zustandsvariablen aktualisiert wird. Das ist alles für heute. In der nächsten Vorlesung werden wir uns mit der Funktion zur Reinigung von US-Effekten befassen. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 36. 35 Effekt clean: In dieser Vorlesung werden wir unser Wissen über News Effect Hooks vertiefen. Genau. Wir werden die Funktion zur Säuberung von US-Effekten erörtern. Was genau ist also die Funktion zur Effektreinigung? Die Cleanup-Funktion ist ein funktionsinduzierter Effekt-Hook, mit dem wir den Code aufräumen können , bevor unsere Komponente gemountet wird. Der US-Effekt 2k ist jedoch so aufgebaut , dass wir eine Funktion direkt darin zurückgeben können. Und genau in dieser Return-Funktion laufen die Aufräumharpunen. Die Bereinigungsfunktion verhindert Speicherlecks und entfernt unnötiges und unerwünschtes Verhalten. Techniken. Sie können den Status in der Rückgabefunktion nicht aktualisieren. In diesem Beispiel erstellen wir also eine einfache Anwendung, die die Position unserer Maus auf der Konsole, ausgehend von den X - und Y-Koordinaten, sperrt . Also richtig, wir werden effektive Übungen anwenden. Lassen Sie uns schnell eine neue Komponente namens Effekte erstellen. Beispiel drei. Generieren Sie die funktionale Komponente. Lassen Sie uns schnell die Use That Hook importieren und sie verwenden den Effekt. Ruhigere Effekte. Das einfachste. Für die X- und Y-Koordinaten deklarieren wir also deklarieren wir die notwendige Zustandsvariable, die direkt innerhalb der Komponente verwendet werden soll . Wir werden das Konstante x Komma gesetzt haben, das x gleich ist. Wenn Sie das im Anfangszustand verwenden, wird das eine Zahl sein. In diesem Fall keine Markierungen und keine Duplikate. Aus diesem Grund müssen wir y auf das Einfachste setzen , indem wir die Funktion definieren, um die Mauspositionskonstante zu protokollieren. Nehmen wir Ereignisse, stellen Sie es auf unsere Funktion und wir gehen zum Konsolenprotokoll. Das ist ein Mausereignis. Genau hier. Wir müssen die Setup-Funktion für das X aufrufen und mit der Funktion schreiben Wir werden den X-Koordinaten-Client X hervorheben und duplizieren. Also hier bekommen wir y. Also müssen wir die Setup-Funktion für y oder beautiful aufrufen. Lassen Sie uns schnell den Nutzungseffekt nennen. Direkt außerhalb dieser Funktion, die sich innerhalb der Komponente befindet, werden wir den US-Effekt aufrufen. Und der Effekt ist eine Funktion, die zwei Parameter akzeptiert. Der erste Parameter ist eine Pfeilfunktion. Und der zweite Parameter wird das Abhängigkeitsarray sein. Aber lassen wir es vorerst so belassen. Also richtig, wenn die anonyme Funktion wir in der Konsole protokollieren, wird Use Effect aufgerufen. Und hier wollen wir den Event-Listener hinzufügen. Fensterpunkte, Event-Listener hinzufügen. Also werden wir es per Mausbewegung haben. Wenn Sie die Maus im Browser bewegen, möchten wir die X- und Y-Koordinate auswählen. Bewege die Maus, Kolyma. Dann rufen wir die Log-Mausposition auf. Ich bin hier. Ist es das Einfachste , was im Körper war? Wir werden die Position anzeigen. Lassen Sie uns eine P-Tag-Koordinate x und y haben. Sicher. Wir müssen es in der App js rendern. Komm her. Wir müssen das dritte Effektbeispiel aus dem Komponenten-Slash-Effekt importieren . Beispiel drei Highlights. Schreiben Sie einen Kommentar zu diesen. Schließe es mit dem selbstschließenden Etikett. Speichern. Schauen wir uns das Ergebnis im Browser an. Und ich, um die Konsole zu öffnen. Ordnung, wenn Sie also Ihre Maus bewegen, können Sie sehen, Sie können jetzt die Mausposition auf dem Bildschirm sehen . Aber eine Sache, die wir nicht mögen , ist , dass jedes Mal, wenn wir die Maus bewegen, der Effekt aufgerufen wird. Der Effekt wird jedes Mal aufgerufen, wenn die Komponente erneut gerendert wird. Ordnung, jetzt müssen wir den Effekt konditionieren In Ordnung, jetzt müssen wir den Effekt konditionieren, indem wir das zweite Argument übergeben, das in diesem Fall ein leeres Array sein wird . Wenn wir also das leere Array angeben, teilen wir React praktisch mit, dass dieser Effekt nicht von irgendwelchen Sonden abhängt oder geblieben ist. Es gibt also keinen Grund diesen Effekt auf Konsequenzen als Re-Rendering zu bezeichnen, was einfach bedeutet, dass er nur zum ersten Mal nach dem Rendern der Komponente abgefangen wird . Lassen Sie uns das leere Array als zweiten Parameter übergeben. Vermassel es. Und hier müssen wir es mit einem Komma trennen und dann ein leeres Array nehmen im Browser speichern. Lass uns neu laden. Können Sie sehen, dass der Effekt aufgerufen wird nachdem die Komponente zu einem falschen Zeitpunkt gerendert wurde? Wenn ich jetzt meine Maus bewege, wird der Effekt nicht mehr kalt. Siehst du, jetzt haben wir nur die meisten Koordinaten in der Konsole angemeldet. Aber wenn ich das Abhängigkeitsarray entferne, die Komponenten jedes Mal neu gerendert, wenn Sie die Maus bewegen . Und das wird dazu führen, dass der Typ hier drüben Feuer macht. Jetzt C, sieh es dir an. Kannst du sehen, wenn ich die Maus bewege, wird die Komponente neu gerendert und der Effekt, der ausgelöst wird. Und natürlich wollen wir nicht, dass die Effekte jedes Mal ausgelöst werden, wenn wir die Maus bewegen. Deshalb müssen wir das leere Array wie folgt angeben. Wenn Sie das leere Array angeben, werden die Effekte ausgelöst, nachdem die Komponenten zu falscher Zeit gerendert wurden. Wenn die Konsequenz erneut gerendert wird, wird der Effekt also nicht mehr kalt. Also, wenn ein paar Monate deine Auswirkungen erwischt werden, dann nur eins. Sie müssen die leere Abhängigkeit RA und visit angeben. Wunderschön. Das steht oft auf n, Save in der nächsten Vorlesung. 37. 36 Die Komponente wird unmountet: Willkommen zurück an alle. In der vorherigen Vorlesung haben wir gelernt, wie man eine Komponente nachahmt , die in den USA wirkt. In dieser Vorlesung werden wir also lernen, wie man Komponenten verwendet, die unter Verwendung des Effekts verfügbar sind. Im Grunde werden wir in dieser Vorlesung eine Container-Komponente für das Log-Mass-Beispiel erstellen eine Container-Komponente für , das wir in der vorherigen Vorlesung implementiert haben. Richtig? Innerhalb des Containers fügen wir die Schaltfläche hinzu, mit der die Anzeige der Komponenten umgeschaltet wird . Erstellen Sie also schnell eine neue Datei namens Mamas Container. Also richtig, im Rahmen der Effektpraxis erstellen Sie eine neue Datei namens Mauscontainer Punkt g ist generisch, die funktionale Komponente. Lassen Sie uns schnell importieren, wer in den USA gemacht hat. Außerdem müssen wir den Effekt Beispiel drei importieren. Die nächste Zeile ist also, die notwendige Zustandsvariable für die Anzeige zu deklarieren . Also hier werde ich mich darauf berufen, dass die USA den Hook gemacht haben. Dann lassen wir die Ausstellung herkommen. Dies muss in Kommatasten erfolgen und der Anfangszustand wird wahr sein. Nachdem wir das gemacht haben, richtig, sind wir in der GSAs, die keine Schaltfläche hinzufügen müssen, um die Anzeigevariable zwischen wahr oder falsch umzuschalten. Schalten Sie die Anzeige um. Geben Sie den OnClick an. Also rufen wir die Setup-Funktion für ein festgelegtes Display auf. Jetzt werden wir hier jede Menge Display High haben, oder? Wenn also auf diese Schaltfläche geklickt wird, wechseln wir von Wahr zu Falsch, okay? Jedes Mal, wenn auf die Schaltfläche geklickt wird und die Anzeigevariable wahr ist, möchten wir das Effektbeispiel mit drei Komponenten rendern. Lass es uns schnell hier machen. Also, wenn display wahr und n ist, werden wir das dritte Effektbeispiel näher mit dem Soft-Closing-Tag rendern . Der Anfangszustand des Displays ist also auf True gesetzt. Und aus diesem Grund im Effektbeispiel drei Komponenten werden im Effektbeispiel drei Komponenten auf dem Bildschirm gerendert. Und wenn auf diese Schaltfläche geklickt wird, wird die Anzeige auf „ Falsch“ gestellt. So einfach ist das Effektbeispiel , dass drei Komponenten von der Kuppel aus berechnet werden , dass drei Komponenten von der Kuppel aus berechnet werden. Lass uns das schnell ausführen. Ein Mauscontainer in der App hebt hervor. Schreiben Sie einen Kommentar zu diesen. Komm her. Also werden wir die meisten Container aus Component Slash importieren meisten Container aus Component Slash Practice Slash Mars Container verwenden. Und natürlich müssen wir hier tot rüberfahren. Speichern. Schauen wir es uns im Browser an. Als Zuschauer funktioniert alles einwandfrei. In Ordnung, lassen Sie uns die Konsole untersuchen. Wenn ich jetzt die Maus bewege, die X- und Y-Koordinaten aktualisiert und die Anweisung wird auf der Konsole gedruckt. Und wenn ich jetzt auf das Umschaltdisplay klicke, wird diese Komponente von der Kuppel aus montiert. Lass es uns versuchen. Kannst du das sehen? Wunderschön? Nun, das Problem hier ist das. Wenn ich versuche, die Maus zu bewegen, wird die Anweisung auch auf der Konsole gedruckt. Schau es dir an. Siehst du, ich möchte, dass du diesen Kerl hier siehst. Jedes Mal, wenn ich die Maus bewege, werden die Anweisungen auf der Konsole gedruckt. Aber schauen Sie, wir haben die Komponenten gemountet, obwohl die Komponente entfernt wurde, der zu der Komponente gehörende Event-Listener immer noch zu hört der zu der Komponente gehörende Event-Listener immer noch zu und wird ausgeführt. Kannst du sehen, wenn ich die Maus bewege , siehst du das? Das Problem ist, Sie beim Mounten Ihrer Komponente immer sicherstellen müssen, dass Sie alle Abonnements, Listener und die Abrufanforderung, die Sie gestellt haben, stornieren . Einfach weil wir unsere Anwendung keinem Speicherleck aussetzen wollen . Um dieses Problem zu lösen, müssen wir die Funktion bereinigen. Indem wir die Funktion bereinigen, werden wir den Betrag n der Komponente nachahmen. tun wir, indem wir eine Funktion zurückgeben, oder? Wir befinden uns im ersten Parameter der US-Auswirkungen. Lass uns das schnell machen. Öffnen Sie also den Effekt Beispiel drei. Lass es mich dir zeigen, richtig. Innerhalb dieser Funktion geben wir eine weitere Funktion zurück , die als Cleanup-Funktion bezeichnet wird. Und ich werde Fensterpunkte entfernen. Der Event-Listener muss eine ruhigere Log-Mausposition bewegen. So einfach ist das. Jetzt schauen wir auf der Konsole nach, was darauf hinweist, dass wir unsere Funktion bereinigt haben. Console.log Komponente Console.log ist gemountet und der Code ist sauber und sicher. Lass es uns im Browser herausnehmen. Lass uns neu laden, richtig, lass uns die Maus bewegen. Können Sie sehen, dass wir die X- und Y-Koordinaten der Mausposition erhalten . Und wir haben den Staatsmann , der auf der Konsole gedruckt wird. Wenn ich nun auf das Umschaltdisplay klicke, werden im Effektbeispiel drei Komponenten montiert. Schau es dir an. Bewegen wir die Maus, um zu überprüfen, ob alles in Ordnung ist. Kannst du sehen, dass es sich die Veranstaltung nicht mehr anhört. Jetzt ist die Komponente auf der Konsole montiert. Der Code ist sauber. Tech Minute dieser wichtigsten Punkte. Wann immer Sie Ihre Komponente mounten möchten, stellen Sie immer sicher, dass Sie alle Abonnements, Listener und die von Ihnen gestellte Abrufanforderung kündigen stellen Sie immer sicher, dass Sie alle Abonnements, Listener und die von Ihnen gestellte Abrufanforderung kündigen. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Steifer natürlich, hier animalistisch. 38. 37 Holen Sie sich mehrere Posts: Mit den soliden Kenntnissen die ich in den vorherigen Vorlesungen erworben habe. In dieser Vorlesung lernen wir, wie man Daten von einer API abruft. dieses Beispiel zu implementieren, verwenden wir also die JSON-Platzhalter-API. Der JSON-Platzhalter ist eine kostenlose Online-Rest-API, die Sie verwenden können, wenn Sie gefälschte Daten benötigen. Und es wird hauptsächlich für den Unterricht von Paarprosa verwendet. Gehen Sie also schnell zu Jason placeholder.code.com. Scrollen Sie nach unten zu den Routen. Hier. Wir haben einen anderen Endpunkt. In dieser Vorlesung werden wir uns jedoch mit den verschiedenen Post-Endpunkten befassen. Zum Öffnen anklicken. Kannst du das sehen? Hier haben wir also die Daten im JSON-Format, das einfach ein Array von Objekten mit unterschiedlichen Eigenschaften in Bezug auf das Schlüsselwertpaar ist. Mit dem Effekt-Hook wollen wir diese Daten abrufen und sie mit Hilfe einer externen Bibliothek namens ox use auf dem Bildschirm anzeigen . Sie können auch die Fetch API verwenden. In dieser Vorlesung werden wir uns jedoch auf die Verwendung von Acts konzentrieren. Verwenden Sie schnell den VS-Code. Richtig, also genau hier beginnt das Formular. Richtig? Wir sind im Komponentenverzeichnis. Wir werden ein neues Paket namens Data Fetching erstellen. Rechte an den Daten des Alterns, wir werden eine neue Komponente namens Fetch erstellen. Mehrere Beiträge generieren die funktionale Komponente. Lassen Sie uns schnell eine zu verwendende Zustandsvariable deklarieren. Aber bevor wir fortfahren, müssen wir zuerst die USA importieren, die auf oberster Ebene angelangt sind. Genau hier. Wir werden eine Zustandsvariable für den Beitrag deklarieren. Ich werde Const Posts, Coma, Set Posts machen. Und der Anfangszustand wird ein leeres Array sein. Wenn Sie die RAD-Strukturierung beobachten, werden Sie feststellen , dass das Element benannt ist und die Pleura besorgt ist. Wissen Sie warum? Das liegt einfach daran, dass wir mehrere Daten abrufen. Wenn Sie also wie ein Profi Code schreiben, müssen Sie sich immer auf Namenskonventionen konzentrieren. Haben recht. Ich habe zu viel geredet. Lass uns weitermachen. Okay, der nächste in der Reihe ist also, den Effekt Hoop zu nennen. Und bevor wir fortfahren, müssen wir auch den US-Effekt importieren. Auf höchstem Niveau. Hier. Wir rufen die Funktion use the effect auf. Und die Effektfunktion nimmt eine Pfeilfunktion auf, sobald sie als Parameter fällt. Also richtig, in dieser Fehlerfunktion werden wir das Getter-Quiz machen. Bevor wir fortfahren, müssen wir jedoch auch eine externe Bibliothek namens Axial installieren. Schnell hier zum Terminal. Wir müssen den aktuell laufenden Server Control C stoppen , um ihn zu stoppen und sicherzustellen, dass Sie sich im Client-Verzeichnis befinden. Und dann werde ich den Node Package Manager installieren. Die Installation ist im Gange. Fertig, Access installiert, erfolgreich. Und oben müssen wir auch Axiome aus dem Zugriffsmodul importieren . Das einfachste ist, dass innerhalb der Effektfunktion wir innerhalb der Effektfunktion eine Get-Anfrage an die URL stellen müssen. Und ich mache Axiome Punkt Get. Und dann geh zurück zum Browser. Wir müssen die URL kopieren. Und wenn wir auf diese URL klicken, wird der gesamte Beitrag abgerufen. Klingt gut. Wunderschön. Lass uns das schnell machen. Kopieren Sie es und fügen Sie es dann hier ein. Die einfachste, die dies nicht getan haben, ist die Get-Anfrage, die ein Versprechen zurückgibt. Also müssen wir die Antwort protokollieren. Hier. Ich mache Punkt. Dann. Hier nehmen wir die Antwort entgegen. Direkt unten werden wir die Befragten auf der Konsole protokollieren. Wenn es einen Fehler gibt, müssen wir ihn abfangen und auch auf der Konsole protokollieren . Punkte fangen. Um den Fehler abzufangen und ihn im Konsolenfehler zu protokollieren. Also schneiden wir hier einfach die Luft ab. Was auch immer der Pfeil ist, wir gehen zum Konsolenprotokoll. Der Fehler ist der einfachste, der richtig ist. Nachdem Sie dies getan haben, als Nächstes den Anfangsstatus mit der neuen Coast aktualisieren . Dafür müssen wir also die Setup-Funktion hier aufrufen. Stellen Sie Beiträge auf Antwortpunktdaten ein. Coole Leute. Wenn Sie dies tun, wird alles wie erwartet angezeigt. Lassen Sie uns es schnell auf dem Bildschirm rendern. Komm her. Ich verwende die UL-Tag-Rechte innerhalb der UL und öffne geschweifte Klammern , um JavaScript-Ausdrücke aufzunehmen. Und ich werde eine Post-Dotmap machen. Lass mich dir diesen Beitrag hier zeigen. Dieser Typ, wir wollen alles, was wir hier haben und wie es auf dem Bildschirm angezeigt wird, abbilden. Und Sie wissen, dass die Map-Methode eine weitere Funktion übernimmt. Und diese Funktion nimmt einen Parameter auf. Dieser Parameter hier repräsentiert zumindest jeden Beitrag. Hier haben wir das LI-Tag. Also richtig, innerhalb des inneren HTML-Codes können wir einen Post-Punkt-Titel erstellen. Lass es mich dir schnell zeigen. Siehst du, wir haben hier den Titel, die Body-ID und die Benutzer-ID. In meinem Fall möchte ich also nur den Titel abrufen. Sie können beschließen, die Leiche und den Rest zurückzuholen. Also müssen wir jetzt auch den Schlüssel angeben, key equa post dots ID, das ist diese ID hier drüben. Wie wunderschön. Wir werden importieren , mehrere Beiträge von Component Slash data fetching, sludge, fetch multiple posts importieren, abrufen. Und mach das schnell zu. Holen Sie sich mehrere Beiträge, speichern Sie, gehen Sie zum Terminal. Wir müssen den Server hochfahren. Und sie sind so wunderschön. Jetzt ist es uns gelungen, all diese Beiträge hier abzurufen, was genau das PIE-Tool ist. Wenn Sie die Leiche zurückholen möchten, ist das extrem einfach. Komm her und dann musst du nur noch Punkte im Browser posten. Kannst du sehen, jetzt haben wir sowohl den Titel als auch den Text abgerufen. Du kannst das also am Ende machen, aber ich möchte es hier einfach halten. Speichern Sie im Browser. Alles funktioniert wie erwartet einwandfrei. Wenn Sie jedoch die Konsole beobachten, werden Sie die kontinuierliche Wiederholung der Daten zum Altern feststellen . Kannst du sehen? Wir möchten jedoch, dass die Daten nur abgerufen werden , wenn die Komponente gemountet wurde. Dafür müssen wir zum Code zurückkehren und das Abhängigkeitsarray angeben. Richtig, innerhalb der Effektfunktion. Genau hier. Lassen Sie mich Ihnen zeigen, dass dies die Effektfunktion ist. Der zweite Parameter wird also ein leeres Array sein. Wenn Sie speichern und zum Browser zurückkehren. Lass uns neu laden. Siehst du jetzt, die Konsole ist extrem sauber und alles funktioniert wie erwartet einwandfrei . Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie fokussiert und ganzheitlich. 39. 38 Button: In dieser Vorlesung werden wir lernen, wie man den Effekt auf die Wählerclique auslöst. Die Absicht dieser Vorlesung ist es also, die GET-Anfrage innerhalb des Click-Handlers zu stellen. Um fortzufahren, benötigen wir eine Zustandsvariable , deren Wert sich nur bei Bootsclique ändert. Und im Moment ist der einzige Wert, der sich in dieser Anwendung ändert, diese ID. Lassen Sie mich Ihnen das kurz als Zuma-Säule zeigen. Also, wenn ich eins mache, kannst du es sehen? Das ist es also, wovon ich gerade spreche. Wir wollen das bei der Wahlclique machen. Wir wollen es also nicht auf diese Weise implementieren. Kehren Sie schnell zum VS-Code zurück und lassen Sie uns fortfahren. Um eine solche Funktionalität zu implementieren. Lassen Sie uns schnell eine neue Zustandsvariable deklarieren , deren Wert sich ändert , wenn auf die Schaltfläche geklickt wird. Genau hier. Ich werde es einfach so machen. Dann rufe ich diese Schaltfläche Click ID auf. Natürlich wird sich das auf diese Weise ändern, so einfach ist das. Also werden wir den Anfangszustand so verlassen. Lassen Sie uns also schnell das Bootfahren umsetzen. Ordnung, bevor wir fortfahren, müssen wir den Code formatieren, damit er sauber und ein bisschen schön aussieht . Jetzt haben wir den Button hier drüben. Ein Klick auf diesen Button. Wir wollen eine Funktion aufrufen und der Name der Funktion wird behandelt. Klicken Sie auf die Schaltfläche, geben Bootfahren ein, und dann lautet der Wert id und rats. Aber beim inneren Test werde ich einen fetten Beitrag machen. In Ordnung, wir sind startklar. Nur noch eine Sache übrig, gerade jetzt. Deshalb wollen wir die Button-Click-ID auf die neue ID im Eingabefeld setzen . Und wie machen wir das? müssen wir tun, oder? Innerhalb dieser Funktion. Hier, die Wanne, werden wir eine Funktionskonstante haben , hundert Klicks, stellen Sie sie auf unsere Funktion ein. Und dann müssen wir die Setup-Funktion für den Set-Button-Klick aufrufen . Und jetzt aktualisieren wir es mit der aktuellen ID, die der Benutzer in das Eingabefeld wie folgt eingibt. So einfach ist das. Damit legen wir die Button-Click-ID fest, die ID, die aus dem Eingabefeld erfasst wird. Die nächste Zeile besteht also darin, den Effekt von der ID der unteren Klick-ID abhängen zu lassen ID der unteren Klick-ID abhängen und nicht von der unregelmäßigen Onchange. Lass es mich dir schnell zeigen. Können Sie bereits sehen, dass unser Effekt von dieser ID abhängt , die aus dem Eingabefeld erfasst wird. Aber jetzt wollen wir es auf die Bottom-Click-ID setzen, das ist dieser Typ hier drüben. Hier. Wir müssen es in die Button-Click-ID ändern. Die ID, die wir aus dem Eingabefeld erfasst haben, wird direkt in diesem Typen hier gespeichert. Schauen wir es uns im Browser an. Speichern Sie im Browser als den einen. Du holst nicht. Wunderschön. Lass uns zwei machen. Hier bei Fetch. Perfekter Satz. Alles funktioniert wie erwartet einwandfrei. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentriert sich immer noch auf ganzheitliche Pflege. 40. Einführung in die Kontext-API: Willkommen zurück, alle zusammen. Jetzt werden wir einen sehr interessanten und leistungsstarken Hooks namens US Context besprechen . Aber bevor wir fortfahren, ist es gut. Wir verstehen, was die Wettbewerbs-API ist und wie sie funktioniert. Danach werden wir uns die US-Context-Hooks ansehen , die die Dinge einfacher machen. Was ist also eine Wettbewerbs-API? Lassen Sie uns kurz eine React-Anwendung betrachten , die aus mehreren Komponenten besteht. oben befindet sich nun die App-Komponente, bei der es sich natürlich um die Stammkomponenten jeder React-Anwendung handelt, die Stammkomponenten jeder React-Anwendung die in den App-Komponenten verschachtelt sind, mehrere andere unabhängige Komponenten, eine isolierte Komponente auf verschiedenen Baumebenen. Und wir haben Komponente a, b und c sind die erste Ebene. Komponente. X ist in Komponente B verschachtelt Komponente Warum ist Komponente innerhalb von Kompetenz verschachtelt? Und Komponente z ist in Komponente y verschachtelt. Und jetzt besteht die Herausforderung darin, den Gesamtpreis eines Artikels in den Komponenten a, x und z anzuzeigen . Und der Preis des Artikels wird als Eigenschaft in der App-Komponente beibehalten. Um also den Preis und die verschachtelten Komponenten anzeigen zu können , müssen wir ihnen den Preis als Sonden aushändigen. Okay, damit Komponente a diesen Preis erhält, müssen wir ihn direkt als Requisiten weitergeben. Und das ist ganz einfach und unkompliziert. Damit Komponente X diesen Preis erhält, müssen wir ihn über die Zwischenkomponente B an Unternehmen und Eier weitergeben . Damit Komponente z den Preiswettbewerb erhält, müssen wir sie durch die Zwischenkompetenz und Y bestehen . Okay? Wenn Sie also den Komponentenbaum genau beobachten, werden Sie feststellen, dass die Komponenten b, c und y die Sonden nicht benötigen. Wir müssen die Sonden jedoch immer noch durch die Komponente leiten , um zur erforderlichen Komponente zu gelangen, in um zur erforderlichen Komponente zu gelangen der die Daten verbraucht werden. In diesem Szenario werden die Komponenten B, C und Y als Sondenträger bezeichnet , die die Aufforderungen nicht nutzen, sondern die Sonden zu den entsprechenden Komponenten transportieren müssen. Daher wird der Vorgang, bei dem Requisiten durch das verschachtelte Bauteil geführt werden, als Sondenbohren bezeichnet. Also jetzt möchte ich, dass Sie Ihre Augen schließen und sich vorstellen, dass wir hier über 25 verschachtelte Komponenten haben. Das bedeutet dann, dass wir all diese Komponenten dazwischen an die betreffende Komponente weiterleiten müssen . Und natürlich werden wir unseren Code durcheinander bringen. Und dies wird für bestimmte Arten von Eingabeaufforderungen zu einem Problem , das für viele Komponenten in unserer Anwendung erforderlich ist . Wie die Sprachpräferenzen. Die Authentifizierung verwendet das UI-Design. Okay, es wäre nett, wenn wir Daten direkt an die betreffende Komponente senden können Daten direkt an die betreffende Komponente , ohne die verschachtelten Komponenten untersuchen und durchbohren zu müssen . Okay, hier sind also die API-Spalten für Wettbewerbe. Wettbewerbe bieten die Möglichkeit, Daten durch den Komponentenbaum zu leiten , ohne das gesamte Semester manuell bohren zu müssen . Unternehmen. Mit anderen Worten, React Contest ermöglicht es uns, Daten in unserer Komponente einfacher auszutauschen. Es hilft, Sonden und Bohren zu vermeiden. Ja, das ist alles für heute. In dieser Vorlesung werden wir sehen, wie die Kontext-API vor der Einführung von Wer sich darum kümmert, verwendet wurde . Wir haben eine Menge praktischer Lügen, die USA ziehen den Kontext an, um zu sehen welche Flexibilität sie mit sich bringen. In Ordnung, also lass es uns in der nächsten Vorlesung praktisch anwenden. Wir sehen uns dann. 41. 39 Kontext implementieren: In dieser Vorlesung werden wir ein praktisches Verständnis von Kontext, API und deren Funktionsweise haben . Deshalb werden wir einen Preiswettbewerb durchführen, bei dem Komponenten verschiedener drei Stufen eine Prüfung auslesen können, die auf der obersten Ebene bestanden wurde. Und richtig, in diesem Beispiel verwenden wir Komponente Z, um den Preis von Artikeln anzuzeigen, ohne die Zwischenkompetenz und die Gründe dafür untersuchen zu müssen. Übrigens habe ich eine React-Anwendung namens Practice Contests erstellt . Pausieren Sie also schnell die Vorlesung am Ende und generieren Sie dann eine neue React-Anwendung. Ordnung, nachdem wir das getan haben, erstellen wir schnell das Komponentenverzeichnis. Richtig, innerhalb des SRC. Klicken Sie mit der rechten Maustaste auf neue Lebensmittelkomponenten. Und das Komponentenverzeichnis. Wir werden die Kompetenz Y und die Z-Komponente z Punkt js erstellen . Zu guter Letzt werden wir ein kompetentes y dot j is beautiful haben . Also muss ich nur das Z zum STM hier drüben bringen, Befehl V, um den Explorer zu schließen. Und dann lassen Sie uns die funktionalen Komponenten generieren, oder? Wir sind in den Blumen. Und jetzt konzentrieren wir uns auf den rechten Rand des Baumes. Okay? Wenn Sie also den rechten Rand des Baums beobachten, werden Sie feststellen, dass Komponente z innerhalb von Komponente y verschachtelt ist. Komponente y ist innerhalb von Kompetenz verschachtelt. Und schließlich ist Kompetenz direkt in der App-Komponente verschachtelt. Lassen Sie uns also schnell diesem Muster folgen und es in Code umwandeln. Dem Muster des Baums folgend ist die Komponente z also in y verschachtelt. Hier ist also kompetent, warum? Wir importieren die Komponente z, die Komponente z. Und dann rendern wir sie hier. Komponente warum ist in Komponente C verschachtelt? Gehen Sie zurück zu Kompetenz, importiert Komponente Y. Dann müssen wir hier Komponente y rendern. Schließlich wird Kompetenz dann in der App-Komponente gerendert. Gehen Sie zur App-Komponente. Import-Kompetenz von kompetenter Slash-Kompetenz und roten Haaren. Wir müssen Kompetenz so einfach wie das machen. Stimmt es? Also hier ist Lee der Ort, an dem der Spaß beginnt. Um Wettbewerbe durchzuführen. Wir müssen vier Schritte befolgen. Der erste Schritt besteht darin, den Wettbewerb mit dem verordneten Wettbewerbs-Methyl ganz oben zu erstellen . Und bitte tu es nicht gleich hier. Tun Sie es nicht innerhalb der Komponente. Es muss hier draußen sein. Wunderschön. Und jetzt werden wir einen Preiswettbewerb veranstalten. Kosten. Preiswettbewerbe, Equal, React, Dots, Create Contest. Nachdem Sie dies getan haben, besteht Schritt zwei darin, Ihren erstellten Wettbewerb zu nutzen und den Inhaltsanbieter um Ihren Komponentenbaum zu binden. Also hier muss ich diesen Typen erstmal hervorheben und ihn dann abschneiden. Und hier machen wir einen Preiswettbewerb für den Anbieter. Perfekt. Und dann müssen wir die Komponente dazwischen einfügen. So einfach ist das. Stimmt es? Fahren wir mit Schritt drei fort. Jetzt werden wir Ihrem Anbieter mithilfe der Value-Prop den erforderlichen Wert zuweisen. Was ich hier tun werde, ist, ihm Requisiten mitzunehmen, was gleichwertig ist. Jetzt müssen wir einen Preis angeben, und ich werde 200$ ausgeben. Und schließlich besteht Schritt vier darin, den Wert einer beliebigen Komponente mithilfe des Contests Consumer zu konsumieren den Wert einer beliebigen Komponente . Bevor wir fortfahren, müssen wir den Kontext exportieren. Komm her. Wir machen den Kerl gleich hier. Wir werden es in ein anderes Modul importieren können. Und jetzt besteht die Herausforderung darin , diesen Wert in Komponente z zu verwenden, ohne die Kompetenz und Y untersuchen zu müssen. Lassen Sie uns das schnell erledigen. Komm zur Firma und z. Ganz oben werden wir einen Preiswettbewerb aus der App-Komponente importieren . Wischen Sie das so schnell ab. Also hier werden wir einen Preiswettbewerb für Verbraucher veranstalten. Und wir werden einen Preis haben. Also genau hier geben wir ein Div zurück , oder? Innerhalb der Def. Wir müssen den Preissafe anzeigen. Stellen Sie sicher, dass Sie Ihre Anwendung ausführen und dann den Browser auschecken. Hier ist es. Kannst du das sehen? Wunderschön? Lass mich ein bisschen höher zoomen, oder? Jetzt konnten wir also den Preis, der in der App-Komponente beibehalten wird, konsumieren , oder? In Komponente z, auch ohne die Zwischenkomponenten durchbohren zu müssen , Freunde. Der Wettbewerb ist in der Tat mächtig und ein Tiefpunkt. Okay, die nächste Zeile ist, einen anderen Kontext zu betrachten, denn in Ihrer Anwendung stehen die Chancen gut, dass Sie mehrere Werte haben , die in einer anderen Komponente verwendet werden können. Schauen wir uns also an, wie mehrere Inhalte implementiert werden. Gehen Sie zur App-Komponente. Nehmen wir auch an, wir möchten den Namen des Elements anzeigen. Okay, zuerst haben wir den Artikelpreis angezeigt und jetzt müssen wir den Artikelnamen anzeigen. Also lasst uns schnell einen neuen Wettbewerb erstellen. Export const, und ich nenne es Item-Contests, Equa, React dot, Inhalte erstellen, sie exportieren, bearbeiten lassen. Wir werden es in verschiedenen Dateien verwenden können. So schnell. Hier wird es innerhalb des Punktanbieters für den Item Contest verschachtelt . Hallo, lass den abschließenden Tag-Befehl X ausschneiden und füge ihn dann hier ein. Lassen Sie uns den Code schnell so formatieren, dass er eine korrekte Einrückung hat. Wunderschön. Sie können den Code mit Prettier formatieren. Natürlich solltest du inzwischen wissen, wie das geht. Ordnung, nachdem wir das getan haben, müssen wir dem Wettbewerb einen Wert geben. Der Gegenstandswettbewerb wird eine Wertrequisite haben , nehmen wir an, Samsung. Nachdem wir das getan haben, müssen wir diesen Wettbewerb, der in der Firma veranstaltet wurde, nutzen. Also müssen wir hier auch den Artikelwettbewerb importieren. Nachdem Sie das getan haben, klicken Sie hier und markieren Sie den Befehl X zum Ausschneiden. Und dann geben wir den Artikelinhalt mit dem Punkt Verbraucher zurück , öffnen und schließen geschweifte Klammern. Dann haben wir die Funktion hier drüben. Stimmt es? Innerhalb dieser Funktion wir den div-Befehl V zurück , um das Div einzufügen. Und hier müssen wir den Artikel auch ausstellen. Dann muss ich einfach so einen Artikel machen. Machen wir es also lesbarer. Hier mache ich Presswettbewerbe und hier mache ich einen Artikelwettbewerb. In Ordnung, also lassen Sie uns den Code schnell mit Prettier formatieren. Perfekt, speichern. Lass es uns im Browser herausnehmen. Kannst du sehen, dass der Preiswettbewerb 200$ kostet. Der Artikel ist Samsung Friends. Das ist extrem großartig und ich liebe es. Jetzt sind wir also in der Lage, mehrere Wettbewerbswerte zu erhalten. Aber eine Sache, die ich sagen möchte , ist , dass dieser Ansatz ziemlich sperrig ist. Um die Komplexität zu reduzieren Revlon Mickey die Kontext-Hooks der USA verwendet. Und dann werdet ihr sehen , wie wir mehrere Wettbewerbe mit nur wenigen Codezeilen abschließen können . Das ist alles für heute. In der nächsten Vorlesung werden wir den Nutzungswettbewerb üben. Wer sieht dich in der nächsten Vorlesung? Konzentrieren Sie sich auf eine ganzheitliche Pflege. 42. 40 useContext für mehrere Kontext: In der vorherigen Vorlesung haben wir gelernt, wie man mehrere Contests mit dem Render-Requisitenmuster durchführt. Und in dieser Vorlesung werden wir denselben Mehrfachwettbewerb unter Verwendung des Nutzungswettbewerbs durchführen, wer sieht weniger praktisch aus? Geht es schnell? In Ordnung, es ist also nicht nötig , eine neue Komponente zu erstellen. werden wir also Komponente y verwenden , um den Wettbewerbswert zu konsumieren In dieser Vorlesung werden wir also Komponente y verwenden, um den Wettbewerbswert zu konsumieren, richtig. Komponente y, eine Sache, die Sie beachten müssen , ist , dass die Schritte zur Implementierung Wettbewerbs genau dieselben bleiben. Das einzige, was sich ändern wird, ist das Konsummuster. Verwendung von Kontexten ist also sehr einfach, um den Inhaltswert mit ein paar Codezeilen zu verbrauchen . Um mit dem US-Kontext-Hook fortzufahren. Zuerst müssen wir es an einer Stelle importieren, ein Komma hier, und dann Wettbewerb verwenden. Die nächste Zeile besteht darin, den erforderlichen Wettbewerb zu importieren, der verwendet werden soll. Importiert den Preiswettbewerb aus unserer App-Komponente. Und dann müssen wir auch den Item-Contest importieren. Sie stammen beide aus der App-Komponente. Nachdem Sie dies getan haben, wird in der nächsten Zeile der US-Contest Hook aufgerufen. In Ordnung, der US-Kontext ist also eine Funktion. Also müssen wir es aufrufen, oder? In der US-Kontextfunktion geben wir den Preis und den Artikelwettbewerb als Parameter ein. Also verwenden wir den Wettbewerb und dann geben wir den Preiswettbewerb ab, Highlights, Duplikat. Und hier werden wir den Item-Contest bestehen. Der US-Kontext gibt den Wettbewerbswert zurück. Also weisen wir es einer konstanten Variablen zu. Hey, das mache ich, ich nenne den variablen Preis. Und hier rufen wir das variable Item auf. Einfach so. So einfach ist das. Lass uns das abwischen. Und schließlich müssen wir den Inhalt und die Freunde konsumieren . Schau es dir an. Es ist extrem einfach, den Wettbewerb zu konsumieren. Wir müssen nur auf diese Variablen verweisen. Lass es mich dir schnell zeigen. Hier. Ich mache den Preis und ich mache hier den Artikel, speichere im Browser. Und das sind sie. Kannst du das sehen? Wunderschön? Wir können nicht mehrere Wettbewerbe in nur einer Zeile konsumieren. Das ist fantastisch und ich liebe es, wenn ich ehrlich zu dir bin, die Vorstellung, wer reagieren kann, macht die Dinge sehr einfach. So viele vergleichen die vorherige Implementierung. Sie werden die Einführung von Hooks in React auf jeden Fall zu schätzen wissen . Und jetzt ist die Frage, wann sollten wir den React-Wettbewerb verwenden? Der React-Wettbewerb eignet sich hervorragend, wenn Sie Daten weitergeben , die in verschiedenen Komponenten Ihrer Anwendung verwendet werden können . Und zu diesen Datentypen gehören Teamdaten wie dunkel oder hell, Stimmung. Verwenden Sie unsere Daten, bei denen es sich um den aktuell authentifizierten Benutzer handelt. Und schließlich befinden sich standortspezifische Daten , in denen wir unsere Sprache verwenden. Eine weitere Frage, die mir in den Sinn kommt, ist, was genau ist das Problem, das reagiert, angefochten , gelöst wird? Reagiere Wettbewerb. Helfen Sie uns, das Problem des Bohrens von Requisiten zu vermeiden. Das ist jetzt aus und wir sehen uns in der nächsten Vorlesung. Steph, ein Kostenanalyst, pass auf dich auf. 43. 41 useReducer: In der vorherigen Vorlesung hatten wir eine ausführliche Einführung in die Verwendung von Reducer Hooks. In dieser Vorlesung werden wir also mit dem praktischen Beispiel fortfahren. Wir werden dieses Beispiel demonstrieren indem wir eine einfache Gegenanwendung implementieren. Wir wären also nicht in der Lage, den Zählerwert zu erhöhen, verringern und sogar den Zählerwert auf Null zurückzusetzen. Die Anwendung mag jedoch einfach erscheinen. Aber auch hier gilt: Zeigen Sie das Muster , das Sie bei Ihrer täglichen Codierung sehen werden. Schnell im Verzeichnis der Komponente. Lassen Sie uns ein neues Paket namens use reduce our practice erstellen . In dieser Tasche. Lassen Sie uns eine neue Komponente namens My Counter One erstellen. Generieren Sie die funktionale Komponente direkt in den GSAs. Fahren Sie fort, um drei verschiedene Proteine herzustellen. Direkt in der Div. Wir werden eine Schraube in den Schritten haben. Und ich werde es zweimal duplizieren. Das werden Dekremente sein und das wird eine Neuwahl sein. Die westliche Zeile besteht also darin, den Zähler zu erstellen , der in den GSAs angezeigt wird. Dafür benötigen wir also die Verwendung von Graten oder Haken. Verwenden Sie zur Umsetzung Grate oder Haken. Zuerst müssen wir es auf oberster Ebene importieren. Also hier werde ich Reducer verwenden. Das habe ich nicht getan. Genau wie andere Hooks, die wir in der vorherigen Vorlesung studiert haben. Der Benutzer, der unser Hook ist, ist auch eine Funktion. Wir müssen es aufrufen. Also Rechte innerhalb der Komponente, wir werden die Verwendung aufrufen, ist unser Hook. Lassen Sie uns schnell die gleichen Schlagworte wiederbeleben. Zuvor haben wir gelernt, dass die US-Ridges oder Hook zwei Argumente akzeptieren. Das erste Argument ist eine Reduktionsmethode und das zweite Argument ist der Anfangszustand. Also richtig, innerhalb des Parameters haben wir das Komma der Reduziermethode und dann den Anfangszustand. Danach wird in der nächsten Zeile Anfangszustand deklariert und die Reduktionsfunktion definiert. Gehen Sie also außerhalb der Komponente. Ganz oben. Wir werden einen konstanten Anfangszustand haben, der gleich Null ist. Lassen Sie uns schnell die Reduzierfunktion definieren. Kostensenker, stellen Sie es auf unsere Funktion ein. Die Reducer-Funktion akzeptiert also zwei Parameter. erste ist der aktuelle Status und der zweite Parameter ist die Aktion. Also werden wir das Geschehen im aktuellen Zustand etwas ruhiger angehen lassen. Und so reduzieren sie, dass unsere Funktion auch einen Wert zurückgibt , der der neue Zustand ist. Hier für Lehrarbeiten. Ich werde zurückkehren. Neuer Staat wie dieser. Mach dir keine Sorgen. Wir werden sehen, wie es in Zukunft läuft. Damit der Übergang stattfinden kann, müssen wir den zweiten Parameter in der Reduzierfunktion auslösen , nämlich die Aktion. Sie können sich die Aktion also als eine Anweisung vorstellen , die an die Reduzierfunktion gegeben wird. Und basierend auf der Spezifikation der Aktion führt der Reduzierer den erforderlichen Zustandsübergang durch. Für dieses Beispiel werden wir also drei verschiedene Aktionen haben. Die Aktion „Erhöhen“, „Verringern“ und „Zurücksetzen“. Also lasst uns das schnell abwischen. Im Fall von Reducer besteht die übliche Praxis, Code auf der Grundlage seiner Aktion zu implementieren , darin, den Switch-Fall zu verwenden. Also hier werden wir wechseln. Der Switch-Ausdruck wird eine Aktion sein , die den Anforderungen unserer Anwendung entspricht. Das eigentliche hier ist Inkrement, Dekrement n, die Reset-Aktion. Hier haben wir also den ersten Großbuchstaben , der eine Inkrementspalte ist. Und wir geben den aktuellen Status plus einen, den einfachsten Punkt, zurück . Und hier muss ich diese nur duplizieren , zweimal dupliziert. Und hier haben wir das Dekrement. Die neue Stufe wird eins vom Anfangszustand subtrahieren . Hier haben wir die Case-Rosette, die den Zustand auf den Wert Null zurücksetzt. Und das ist der Ausgangszustand. Das wird also den Ausgangszustand zurückgeben. Und schließlich müssen wir den Standardfall angeben. In diesem Fall werden wir den Staat selbst zurückgeben. So einfach ist das. Der nächste Schritt in der Reihe ist nun, die Aktion zu versenden. Ähnlich wie in den USA, die Hooks verwenden, geben wir ein Wertepaar zurück , das wir mithilfe der 3D-Struktur und -Syntax abrufen können . Hier mache ich Const direkt drinnen. Und hier haben wir die Versandmethode. Dann ordne es so zu. Der Use Reducer gibt den aktuellen Status zurück , den wir in diesem Fall count nennen, zusammen mit der Versandmethode. Und die Versandmethode wird verwendet, um einen Code auszuführen , der einer bestimmten Aktion entspricht. Die Zählung hier ist also eine Variable, die verwendet wird, um den Anfangszustand so schnell zu speichern, oder? Innerhalb der GSAs verwenden wir den Tag head one, um die Anzahl anzuzeigen. Jetzt machen wir, dass er gewonnen hat, direkt drinnen. Wir müssen die Anzahl anzeigen, das ist dieser Typ hier, der verwendet wird, um den Anfangsstatus beizubehalten und auch den Status, der aktualisiert wird. Das wird nur benutzt, um den Staat zu halten, okay? Und dieser Typ hier ist es gewohnt, den Code basierend auf seiner Aktion zu versenden. Das wirst du in einem G-Theme sehen. Also richtig, bei der Sache mit dem Ball müssen wir ihre eigene Clique spezifizieren. Innerhalb des OnClick. Wir nehmen eine Fehlerfunktion auf, die zum Aufrufen der Versandmethode verwendet wird . Und die Versandmethode wird verwendet, um einen Code basierend auf seiner Aktion auszuführen. Wir haben Maßnahmenerhöhungen. So einfach ist das. Also werde ich diese jetzt kopieren. Sidway. Ich habe es direkt von den öffnenden geschweiften Klammern auf das On-Click-Kopieren kopiert. Komm her und füge es ein. Wir müssen diese also nur auf Dekrement umstellen, weil wir die Dekrementaktion durchführen wollen. Also komm so her und füge es auch ein. In diesem Fall möchten wir die Reset-Aktion ausführen. Wenn wir die Inkrementaktion ausführen, wird dem ursprünglichen aktuellen Wert eins hinzugefügt. Wenn wir die Dekrementierungsaktion ausführen, wird sie eins vom ursprünglichen Dosenwert subtrahiert. Und schließlich, wenn wir die Reset-Aktion ausführen, wird der Zähler auf Null zurückgesetzt, was dem Anfangszustand entspricht. Lassen Sie uns es schnell in der App-Komponente rendern. Kommen wir an die Spitze und dann müssen wir importieren, ich kann einen von Komponenten unterscheiden, die Verwendung von Komponenten reduzieren, unsere Praxis reduzieren, meinen Zähler auf eins setzen. Ich scrolle nach unten. Wir müssen nur Zähler eins randomisieren. Schließe es mit dem selbstschließenden Etikett. Speichern Sie, und stellen Sie sicher, dass Sie die Anwendung auf dem Terminal ausführen . Lass es mich dir zeigen. Können Sie sehen, dass meine Anwendung gerade im Browser läuft Die Idee ist, kannst du das sehen? Versuchen wir es, indem wir auf das Board klicken Haines, ich klicke auf das Inkrement, Botkin. Es erhöht sich. Die, auf die ich dekrementiere , verringert sich auf Null. Und wieder klicke ich auf Inkrement, Increment, Increment. Und dann lass mich dieses Mal versuchen , es zurückzusetzen. Wunderschön. Alles funktioniert wie erwartet einwandfrei. Um es noch einmal zusammenzufassen, kehren Sie zum VS-Code zurück und lassen Sie mich Ihnen schnell zeigen , wie Sie den US-Reducer verwenden können . Zuerst müssen Sie es oben importieren. Und dann ist der Reduzierer eine Funktion. Daher müssen Sie es auch aufrufen. Diese Funktion akzeptiert zwei Parameter. erste ist die Reduziermethode und die zweite ist der Anfangszustand. Und auch die Verwendung von Ridges oder Hook gibt ein Array mit zwei Werten zurück , in diesem Fall den Anfangszustand und eine Versandmethode. Die Versandmethode wird verwendet , um die Aktion zu versenden, und die Variablenzahl hier wird verwendet, um den Wert dieser Tabelle zu speichern. Wenn Sie also nach oben gehen, wo wir die Reducer-Funktion haben , dieser Typ hier drüben , der erste Parameter in den USA, Grate oder Hook hier, nimmt die Reduzierfunktion zwei Parameter auf. Zuerst ist der Staat und dann die Aktion. Im Fall eines Reducers besteht die Konvention, Code auf der Grundlage seiner Aktion zu implementieren , darin, die Sweet-Keys zu verwenden. Und deshalb haben wir die Suite unserer Haare. Und genau hier im Switch haben wir die Aktionen implementiert. Okay, wir haben also Zuschläge. Dadurch wird ein neuer Status zurückgegeben , der dem Ausgangszustand einen Status hinzufügt. Und natürlich sollten Sie wissen, dass der Anfangszustand auch der zweite Parameter ist. Rechte. Würden Sie unsere Funktion reduzieren nicht verwenden? Hier, ist es. Okay, wenn die Aktion also inkrementiert ist, wird dem Anfangszustand eins hinzugefügt. Und wenn es sich bei der Aktion um Dekremente handelt, subtrahieren wir auch eins vom Anfangszustand. Und wenn die Aktion zurückgesetzt wird, setzen Sie den Wert auf Null zurück. Und hier haben wir den Standardstatus der Anwendung. Schreibt, nicht wahr die Jesses? Wir haben einen Onclick implementiert, um die Versandmethode aufzurufen. Also richtig, innerhalb der Versandmethode haben wir die Aktion spezifiziert. Das ist jetzt oft der Fall und in der nächsten Vorlesung werden wir ein komplexeres Beispiel nehmen. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf Ganzheitlichkeit. 44. 42 useReducer State und Aktionsobjekt: Das zweite Beispiel des Use Reducers wird in dieser Vorlesung untersucht. Und in dieser Vorlesung werden wir das Zustandsobjekt und die Aktionsobjekte verwenden und nicht den einfachen Zustand und die Aktion, die wir in der vorherigen Vorlesung implementiert haben. So schnell haben wir unsere Praxis nicht reduziert, sondern eine neue Komponente namens My Counter erstellt, eine neue Komponente namens My Counter erstellt um schnell meinen Container zu öffnen. Hier ist der gesamte Code, der auf meiner Kamera gespeichert ist, markiert und kopiert ihn und fügt ihn ein. Lassen Sie uns schnell die notwendigen Korrekturen vornehmen. Hier. Wir müssen nur meinen Inhalt ändern, möchten Kontakt aufnehmen, wenn du schön speicherst. Die nächste Zeile besteht darin, die aktuelle Zustandsvariable in ein Objekt umzuwandeln . Scrollen Sie nach oben. Also, was ich jetzt tun werde, ist das abzuwischen. Jetzt müssen wir es auf ein Objekt setzen, oder? Innerhalb des Objekts. Ich mache Cantor. Setze es auf Null, genau wie diese Rechte in der Benutzeroberfläche waren. Jetzt zählen wir Punkte, Zähler a. Die Zähler stellen die ungetesteten Objekte dar. Die nächste Zeile besteht darin, unsere einfache Zeichenkettenaktion in ein Objekt umzuwandeln . Und hier ist es. In der Versandmethode markiere ich einfach die Zeichenfolge und schneide sie dann ab. Jetzt müssen wir es in ein Objekt umwandeln. In diesem Objekt nehmen wir eine Eigenschaft namens Typtyp auf , und der Aktionstyp ist Inkremente. Also müssen wir es auch in ein Objekt ändern, die Zeichenfolge hervorheben und ausschneiden, sie in ein Objekt ändern, und wenn wir den Typ nehmen, ist der Aktionstyp dekrementiert. Das Gleiche hier. Das einfachste. Und damit werden wir eine Aktion basierend auf dem Aktionstyp auslösen. Scrollen Sie also innerhalb der Reducer-Funktion nach oben. Der Switch-Ausdruck wird action dot py sein. Für die Aktion „Erhöhen“ und „Verringern“ geben wir also das neue Zustandsobjekt zurück , markieren es und löschen es. Lassen Sie uns ein Objekt spezifizieren. Wenn das Objekt, das wir machen werden, Luft kontern, dann zählen Punkte plus Eins. Das ist am einfachsten, das Gleiche hier. Geben Sie an, dass das Objekt einen Zustandspunkt enthält , und geben Sie ein Minuszeichen ein. Ich verteile das ein bisschen. Der Zustand und die Aktion der Komponente werden nun in ein Objekt umgewandelt. Und das war's. Rendering ergänzt die App Js. Und mal sehen, was wir im Browser haben. Importe aus Komponente Slash Use reduzieren unsere Praxis mit dem Schrägstrich Mitochondrien auf, lassen Sie uns dies hervorheben und einen Kommentar dazu abgeben. Dann werden wir dem entgegenwirken. G ist näher dran mit dem selbstschließenden Etikett. Speichern Sie die Anwendung und stellen Sie sicher, dass sie direkt im Terminal ausgeführt wird. Und der Browser. Lass es uns rausnehmen. Inkrement dekrement wie gewohnt zurückgesetzt, inkrementiert, verringert und empfangen. Alles funktioniert wie erwartet einwandfrei. Wunderschön. Nun stellt sich die Frage, warum sollten Sie diesen Ansatz dem vorherigen Ansatz vorziehen ? Ordnung, wir werden ein Beispiel demonstrieren , das eine gültige Antwort auf diese Frage gibt . Damit wirst du das Verständnis gut genug verstehen. Nehmen wir also an, wir möchten verschiedene Value- und Resorts versenden. Nehmen wir an, wir haben zwei zusätzliche Körper, um die Anzahl um fünf zu erhöhen und zu verringern. Das wäre möglich und sehr einfach, wenn es sich bei der Aktion um ein Objekt handelt. Und wenn Sie das Aktionsobjekt auschecken, werden Sie feststellen, dass es nur eine Eigenschaft hat, nämlich den Aktionstyp. Also werden wir dem Aktionsobjekt eine weitere Eigenschaft hinzufügen . Und diese Eigenschaft würde Wert genannt werden, was die Zahl darstellt, die verwendet wird, um den Zählwert zu erhöhen oder zu verringern. Um also Dinge zu melden, die wir zuvor erstellt haben, fügen wir eine zusätzliche Eigenschaft zum Essen, Komm her, Komma und dann Wert hinzu. Wir müssen es einfach auf eins setzen , weil wir möchten, dass diese Schaltfläche den Anfangszustandswert hier um ein Komma erhöht . In der Werteigenschaft und setzen Sie sie auf eins. Dadurch wird der Anfangszustand also um eins verringert. Und jetzt wollen wir in diesem Beispiel extrapolieren, was verwendet wird , um den Zählwert um fünf zu erhöhen und zu verringern. Kopiere die Formel 25, 26. Dupliziere es. Und hier mache ich Schritt fünf. Hier mache ich Schritt fünf, oder? Also hier mache ich fünf, den Wert fünf. Nachdem wir dies getan haben, müssen wir auch zur Reduzierfunktion zurückkehren. Und dann müssen wir es nicht so hardcodieren. Was ich jetzt machen werde, ist der Punktwert von Plus Auction. Und dieser Wert ist, dieser. Hier wird der Punktwert der Auktion angezeigt. Also dieser Wert steht für jeden dieser Typen hier, all diesen Typen hier drüben. Sparen wir uns schnell die Verpflichtung, die Ergebnisse im Browser zu überprüfen. Lass es uns versuchen. Auf das Brett zu schlagen bedeutet, um ein schönes Dekrement um eine perfekte Stufe fünf zu erhöhen. Kannst du dir die Verringerung um fünf vorstellen? Alles funktioniert wie erwartet einwandfrei. Ich drücke die Reset-Taste. Schau es dir an. Wunderschön. Indem wir die Aktion als Objekt verwenden , können wir also mehrere Daten in der Reducer-Funktion verwenden. Dies ist also eine der Antworten auf die Frage, die wir zu Beginn dieser Vorlesung gestellt haben. Lassen Sie uns nun das zweite Beispiel demonstrieren, um die zuvor aufgeworfene Frage aussagekräftiger zu beantworten. Und in diesem Beispiel konzentrieren wir uns auf die Bühne als Objekt. Nehmen wir also an, Sie möchten mehrere Zähler implementieren. Am besten und das tun Sie, wenn der Status ein Objekt ist , scrollen Sie nach oben. Also werden wir jetzt ein neues Gegenmittel haben. Und das wird Zähler B heißen Ich setze es auf 15. Um den Wert von Zähler B zu aktualisieren müssen wir zwei weitere Switch-Cases erstellen. Komm gleich her. Was ich jetzt tun werde, weil wir es früher erstellt haben, werde ich nur die duplizierten Zeilen 11 bis 13 hervorheben . Schau mir zu, wie ich den Zähler a auswähle. Dann müssen wir alle Vorkommen von Kontakt a innerhalb der Aktion markieren , die ihn dupliziert. Nimm deine Ursache oder an den rechten Rand und wische sie dann hier ab. Ich werde Counter sein machen, so einfach ist das. Und jetzt haben wir zwei verschiedene Eigenschaften als geteilte Objekte. Um die erwarteten Ergebnisse zu erzielen, müssen wir das Staatseigentum abgleichen. Lass mich dir zeigen, wie das geht. Punkt Punkt, Punkte, Staaten, drücken Sie ein Komma. Ich kopiere es einfach und füge es dann so ein, so. Schließlich müssen wir das Bootfahren implementieren , um die Aktion auf einen Klick auszuführen. Wenn ich nach unten scrolle, kopiere ich einfach Schritt fünf. Komm her. Lassen Sie uns ein Div erstellen, das in diesem Div verschachtelt ist. Und dann nenne ich diese Inkremente Kontakt be Highlight, Copy, come here and paste. Das wird also der Dekrementzähler B sein Wir müssen den Zähler be anzeigen. Hier. Ich werde das H2-Tag verwenden, um die Punktanzahl B bei B anzuzeigen Punktanzahl B bei B Also was ich jetzt tun werde ist dass das ein ist. Das ist Zähler B. Und du speicherst im Browser. Wunderschön. Der Anfangszustand von a ist also Null. Lassen Sie mich Ihnen zeigen, wie Sie dieses Datumsobjekt schreiben. Hier ist es? Für Kappa ist B 15. Wenn wir also auf diese Schaltfläche klicken, sollten wir in der Lage sein, die Vorstandszustände zu verwalten. Das ist also das Schöne daran, Staaten als Objekt zu benutzen. Jetzt probieren wir es aus. Können Sie sehen, dass es wie erwartet einwandfrei funktioniert? Ich drücke auf Reset und lass es uns für COUNTA be versuchen. Zähler B funktioniert nicht. Wissen Sie warum? Lass es mich dir schnell zeigen. Komm her. Direkt im Zähler b lösen wir die Inkrement-Aktion aus. Und diese Aktion ist für Zähler a. Zähler B funktioniert, müssen Sie die Aktion für Zähler B angeben und dann diese Option auslösen. Lass es mich dir gleich hier zeigen. Das ist für Zähler a und das ist der Zähler a. Jetzt mache ich Inkrement B. Ich mache Dekrement B. Wenn wir hier sind, machen wir Inkrement rückgängig, dekrementieren B, speichern und checken Sie es im Browser aus. Neu laden. Lass uns den Versuch machen und die Luft kontern. Kannst du Resets sehen? Probiere es an Theke B Kann schauen. Alles funktioniert wie erwartet einwandfrei. In Ordnung, also zusammenfassend, indem Sie Aktion als Objekt verwenden, können Sie zusätzliche Daten an die Reducer-Funktion übergeben . Und indem wir den Zustand als Objekt verwenden, sind wir in der Lage, mehrere Zustandsvariablen zu verwalten und zu verfolgen . Und in diesem Fall sind hier die Zustandsvariablen a und B. Und wir können das einfach tun weil der Zustand ein Objekt ist, das ist dieser Typ, den Sie hier sehen. Lass es mich dir schnell zeigen. Ich muss das nur abschneiden. Und dann ist hier das Objekt. Einfach weil der Staat ein Objekt ist, sind wir in der Lage, diese Leute hier zu halten . Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 45. 43 Multiple UseReducer: Im vorherigen Beispiel konnten wir zwei verschiedene Kontexte verfolgen , indem wir state als Objekt verwendeten. Und um den Inhalt zu aktualisieren, müssen wir zusätzliche Koffer in der Reducer-Methode erstellen . Aber wenn wir mit demselben staatlichen Übergang zu uns kommen müssen, gibt es dafür einen einfacheren Ansatz. Erstellen Sie also schnell eine neue Komponente namens Mein Konto oder drei. Stimmt es? Wir werden die Reducer-Praxis anwenden. Öffne meinen Steuerarm. Lassen Sie uns den gesamten Code markieren und kopieren und ihn dann hier einfügen. Wir müssen nur den Firmennamen in my contact three ändern , speichern, die App-Komponente öffnen und sie rendern lassen. Markieren Sie dies, platzieren Sie einen Kommentar dazu. Und dann komm an die Spitze. Wir müssen meine drei Kontakte aus Komponenten importieren , slash use, reduzierte uns üben, mein Konto oder drei zu kürzen. Rendern wir es hier. Sicher. Im Browser. Bum, die Anwendung ist in Ordnung. Jetzt haben wir eine einfache Gegenanwendung. Frontal, um gegen drei zu kommen. Der nächste Schritt ist also, einen weiteren Zustandskontakt mit genau derselben Transaktion hinzuzufügen , was unsere Reset-Funktion inkrementiert, dekrementiert. Wenn das der Fall ist, werden wir einen zusätzlichen Nutzungsreduzierer entwickeln. Also hier werden wir eine Konstante haben. Ich rufe diesen Typen an, kommt zum Komma. Ich rufe den entsandten Typen an. Dann rufen wir den Use Reducer auf. Und natürlich verwenden sie Reduce our texts in der Reducer-Methode als erstes Argument und dann den Anfangszustand als zweites Argument. Also direkt in der Division müssen wir diesen Typen entsenden. Also lasst uns das schnell machen. Höhepunkte aus den Zeilen 23 bis 26. Kopieren. Komm her. Wir werden ein weiteres Div erstellen und es dann in dieses Div einfügen. Also das wird so versendet , so, so. Und hier haben wir zwei Aufzeichnungen, aus denen hervorgeht, welcher Typ hier drüben ist, der den Staat innehat. Okay, machen wir es ein bisschen lesbar. Ich werde es einfach so machen. Wenn Sie speichern und zum Browser gehen. Siehst du, wir haben den ersten Kontakt und dann den zweiten Zähler. Lass es uns versuchen. Rosette erhöhen, verringern , zurücksetzen, erhöhen, verringern. Kannst du sehen, dass alles wie erwartet einwandfrei funktioniert . Ordnung, wenn Sie also mit verschiedenen Zustandsvariablen arbeiten , die genau dieselbe Stitch-Transaktion haben, empfehle ich Ihnen dringend, den Multiple-Reducer-Ansatz zu verwenden. Und dies wird dazu beitragen, die Komplexität der Verwaltung des Staates zu vermeiden , wenn es sich um ein Objekt handeln würde. Und auch um zu verhindern, dass wir Code in der Reducer-Funktion duplizieren. Ich verstehe, dass diese Vorlesung ziemlich knifflig ist, aber ich schlage vor, dass Sie das Video immer wieder abspielen das Video immer wieder , um sich daran zu erinnern. Das ist alles für heute. Und in der nächsten Vorlesung werden wir lernen, wie man mit einem globalen Staat umgeht. Wenn Sie den Entsafter benutzen und den Wettbewerb verwenden. Wir sehen uns bei Ihrer Internisten-Vorlesung. Bleib konzentriert und pass auf dich auf. 46. 44 useState und useReducer: Insbesondere auf der Komponentenebene haben Sie ein Beispiel für die lokale Staatsverwaltung mit Use Reducer gesehen . Es kann jedoch vorkommen, dass Sie den Status zwischen den Komponenten kommunizieren möchten. Daher sollten Sie vielleicht auf globaler Ebene operieren. Und jetzt ist die Frage, wie gehen wir das an? Durch die Kombination von Nutzungsreduzierung und Nutzungswettbewerben werdet ihr nicht in der Lage sein, den globalen Staat zu managen. In dieser Vorlesung werden wir also lernen, Wettbewerbe und Reducer zu nutzen, um die globale Bühne zu verwalten und zu verteilen. Das wird eine ziemlich gute Kombination sein. Haben recht. Betrachten wir nun eine einfache Gegenanwendung mit sechs verschiedenen Komponenten: Firma, ABC und XYZ. Der Status des Zählers wird also in der App Js beibehalten. Und die Aufgabe hier ist den Zählerstatus zwischen den Komponenten x und z zu teilen. Außerdem werden wir die Methode teilen, den Status aktualisieren, den Komponentenbaum einblenden, ohne Untersuchungen durchführen zu müssen, und Außerdem werden wir die Methode teilen, den Status aktualisieren, den Komponentenbaum einblenden, ohne Untersuchungen durchführen zu müssen, die Zwischenkomponenten durchbohren. Und die Lösung für dieses Problem besteht darin, die Wettbewerbs-API zu verwenden. Da wir also mit Hooks arbeiten, werden wir den Use-Contest-Hook verwenden um den notwendigen Wert bereitzustellen, der zur Steuerung des Kontrasts in den Komponenten a, x und z benötigt wird . Lassen Sie uns beginnen. Genau hier. Ich habe die App-Komponente bereinigt. Es ist ziemlich einfach und ich glaube, Sie können es an Ihrer Seite tun. Sie müssen also nur alle Komponenten löschen, die wir importiert haben, und dann alle Renderings löschen. Ich werde dieses Beispiel so erklären , dass Sie es gut genug verstehen. Lassen Sie uns jetzt beginnen. Innerhalb des Verzeichnisses der Komponente. Wir werden ein neues Paket namens Use Contests with Reducer erstellen . Stimmt es? In diesem Paket werden wir die Komponenten a, x und z erstellen . Generieren Sie schnell die funktionale Komponente in anderen Dateien. Habe das nicht gemacht. Als Nächstes erstellen Sie einen einfachen Zähler in der App-Komponente, App-Komponente und dem Gewicht. Das haben wir schon einmal gemacht. Also alles, was wir tun werden, ist es von meinem Zähler zu kopieren. Eins von G ist eins. Dann kopiere ich einfach von Spur 52, Cystein, gehe zurück zur App-Komponente und dann Pestis Territory. Lassen Sie uns also schnell importieren, dass sie den Reduzierer auf der obersten Ebene verwenden . Also müssen wir genau hier ein Komma setzen. Reduzierer verwenden. Also werden wir direkt in der App-Komponente, das ist dieser Typ hier, die Methode use reduce aufrufen. Und das erfordert natürlich zwei Parameter. Einer ist die Reducer-Methode und der zweite Parameter ist die Anfangsphase. Und all dies wird ein Array von zwei Einträgen zurückgeben. Ich mache Const. erste Element wird das Konto sein, dem der Wert des gesamten Staates gespeichert wird. Und die Nestelemente in diesem Array werden die Versandmethode sein. Wir müssen es so zuweisen. Am einfachsten ist, dass dies verwendet wird , um den gesamten Bundesstaat zu speichern , also den Wert des gesamten Staates zu speichern. Diese werden dann verwendet, um die Aktion Bhanwari zu starten. Wenn wir mit der Implementierung fortfahren. Sie werden es auf jeden Fall gut genug verstehen. Lassen Sie uns schnell den Wert des Staates anzeigen, richtig, um die GSAs einzufügen. Und natürlich werden wir die Komponenten a, x und z rendern . Gehe nach oben. Wir müssen Komponente a aus dem Competent Slash Use Contest mit Reducer Slash kompetent a importieren aus dem Competent Slash Use Contest . Dann importieren wir Komponente x, Komponente z. Lassen wir es uns hier durchgehen . Die Absicht hier ist also, innerhalb dieser Komponenten eine Aktion zu starten, richtig. Also wollen wir diese Daten hier verwalten, oder? N-Komponente a, x und z. Das ist genau die Absicht. Dies wird hier als die globalen Staaten bezeichnet. Und wir wollen die Dämmerungsperioden innerhalb der verschachtelten Komponenten verwalten . Der Unterricht ist gut, wunderschön. Wenn wir die Aktion innerhalb dieser Komponenten versenden müssen , müssen wir das Gewinnspiel nutzen, um den Zählwert und die Versandmethode anzugeben , die innerhalb dieser Komponenten verwendet werden sollen. Lassen Sie uns den Wettbewerb also schnell erstellen , indem wir die API für Kritikerwettbewerbe verwenden. Ganz oben. Wir werden Wettbewerbe wie Const, Can't Contest, Equa, React Dot und Create veranstalten. Nachdem wir den Wettbewerb erstellt haben, müssen wir ihn auch exportieren. Nachdem wir das getan haben, müssen wir diesem Wettbewerb einen Wert geben und dann die vorherige Komponente in den Wettbewerbsanbieter einbauen Komponente in den und die Wertattribute angeben, nämlich den aktuellen Wert und die Versandmethode. Lass es mich dir schnell zeigen. Also hier werden wir die gesamte Bewerbung mit dem Wettbewerb abschließen, den wir ins Leben gerufen haben. Und es ist der Count Contest Dots Provider weil wir ihm den Wert geben müssen, ein Highlight und dann schneidet es ab, komm her, füge es ein. Und jetzt müssen wir den Wert angeben, value equa. Wir müssen ein Objekt aufnehmen. Also lassen wir die Zählung Koma zählen und die Zählung Versand wird als Versand gewertet. Nachdem Sie dies getan haben, wird beim Auschecken des Browsers dieser Fehler angezeigt. Der Anfangszustand ist nicht definiert. Komm zurück und wir müssen den Anfangszustand rechts oben definieren. Die Anfangszustände sind gleich Null. Wenn Sie das also tun und den Browser auschecken, können Sie sehen, dass die ersten Kegel Null sind und das ist der Wert der Zustände. Dann haben wir die kompetenten A, X und Z. Als Nächstes müssen wir den Status und die Versandmethode verwenden. Dafür werden wir also den Wettbewerb nutzen, der zum VS-Code zurückgekehrt ist. Lassen Sie uns schnell im Handumdrehen Gesellschaft hinzufügen . Hier oben. Wir müssen auch den Nutzungswettbewerb importieren. Wir müssen den Kontext importieren, den wir in der App-Komponente erstellt haben . Importieren. Der Name des Wettbewerbs lautet Zählwettbewerbe von AP. In Ordnung, es ist also an der Zeit , den Wettbewerb zu konsumieren. Also richtig, innerhalb der Komponente werden wir uns auf den US-Kontext berufen. Lassen Sie uns den Wettbewerb als Parameter berücksichtigen. Dann müssen wir es einer Variablen zuweisen. Const kann so wetteifern. Nachdem wir das getan haben, können wir auf die Versandmethode zugreifen, die auf meinem Zähler 1 gespeichert ist, und den Button kopieren und dann in Komponente a einfügen. Okay, lassen Sie uns alles von hier kopieren, einschließlich des Head-Tag, und dann zu Firma Und hier müssen wir es nur zwischen das div-Tag einfügen . Einfach so. Lassen Sie uns schnell formatieren, um eine korrekte Einrückung zu erhalten. Gut. Jetzt heißt es also, lasst uns vorerst die Kopfmarke abnehmen. Wir brauchen es nicht. Also hier werden wir den Versand auf diese Weise nicht mehr haben. Also werden wir den Versand von Count Contest Punkt com erledigen. Lass mich dir in der App Js zeigen. Wir bringen diesen Typen her, um jede dieser Aktionen durchzuführen. Das einfachste. Also zurück zu Komponente a. Wir müssen das für den gesamten Versand erledigen. Also wähle ich einfach alle Versandarten aus und lösche sie ab. Das Gewinnspiel trotz genau hier, sieben Checkout in den Browser. Können Sie sehen, dass der Anfangszustand Null ist und dann inkrementiert und dekrementiert wird. Alles funktioniert einwandfrei. Wir müssen also nur genau den gleichen Zustand in den übrigen Komponenten verwalten . Das ist zumindest die Absicht der Vorlesung. Ich bin hier. Ich markiere einfach alles hier in Komponente A Copy, halte die Komponente X fest, markiere und wische sie dann ab, füge sie ein. Jetzt müssen wir das Vorkommen von Komponente a in Komponente x ändern . Speichern. Schau es dir an. Wunderschön. Es ist absolut nicht gut. Nochmals, um Komponente Z hervorzuheben, löschen Sie sie, fügen Sie sie ein, ändern Sie sie in Komponente Also schauen wir uns das an, um zu sehen, ob wir in der Lage sind , diesen Zustand hier zu verwalten, oder? Wenn Unternehmen A, X und Z im Browser aussteigen. Ordnung, also lassen Sie uns den Komponentennamen so gestalten , dass er beschreibend ist. Komm zu Firma und z und füge es hier ein, sorry, kompetent x. Und dann zum Schluss Firma in Z, sicher und im Browser-Bone. Also schauen wir es uns an. Wenn wir in der Lage sind, den globalen Status von Komponente A aus zu kontrollieren , klicken wir auf das Inkrement-Voting in der Komponente. Kannst du sehen, dass alles zerlumpt ist, auf jeden Fall in Ordnung wie erwartet. Wenn du dekrementierst. Wunderschön. Und wenn du es dann erhältst, bumm. Probieren wir es in Komponente x Inkremente, Dekremente, Empfangene aus . Komponente z erhöht, Dekrement geht zurück, Freunde. Das ist extrem genial. Jetzt sind wir also in der Lage, die Rechte der globalen Staaten mit den n-Komponenten a, X und Z zu verwalten und zu kontrollieren . Und das ist mit Use Contest und Use Reducer und Visits möglich . Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 47. 45 useState Data Fetch: Sie sagten, Schiffe verwenden Reducer, um den Vergleich zwischen den USA und dem US-Reducer zu veranschaulichen. Wir werden es veranschaulichen, indem Daten von einem API-Endpunkt abrufen. In diesem Beispiel werden wir also sehen, wie Daten mithilfe des Effekt-Hooks abgerufen werden, wobei die US-Hooks verwendet werden, um die Statustransaktion oder Transformation aufrechtzuerhalten . Und in der nächsten Vorlesung werden wir sehen, wie man dieselben Daten mit US-Effekt Hooke abrufen kann, indem man den Use Reducer verwendet , um die staatliche Transaktion aufrechtzuerhalten. Auf diese Weise können Sie die US-Schulden vergleichen. Und sie benutzen Reducer, um zu lernen, wann und wie man sie benutzt. Wir haben das Komponentenverzeichnis nicht erstellt. Lassen Sie uns schnell ein neues Paket namens ustedes erstellen und den Reducer verwenden. Stimmt es? Wir sind also in diesem Paket Lassen Sie uns eine neue Komponente namens Usage Data Phage erstellen. Generieren Sie die Funktionskomponenten. In dieser Vorlesung werden wir einen API-Aufruf zum Anpassen der Daten ausführen, sobald die Komponente gemountet ist . Und während die Daten abgerufen wurden, zeigen wir die Ladeanzeige an. Wenn die Daten also erfolgreich sind, werden wir die Ladeanzeige ausblenden und die Daten anzeigen. Schließlich löschen wir die Ladeanzeige und zeigen die Fehlermeldung an, falls beim Laden der Daten ein Problem auftritt. Lassen Sie uns schnell die Zustandsvariablen und die Setter-Methoden definieren . Und bevor wir mit Vätern fortfahren, müssen Sie die EU-Staaten von React importieren. Wir müssen also die notwendigen Zustandsvariablen deklarieren , die verwendet werden sollen. Und hier werden wir sein Laden haben, ruhigere Sets, wird geladen. Der Standardstatus wird auf true gesetzt. Wenn wir also einen API-Aufruf tätigen, sehen Sie die Ladeleiste direkt im Browser. Und hier drüben werden wir den Fehler haben. Und dann setzen wir den Pfeil hier drüben. Dies sollten Kommatasten sein und der Anfangszustand hier wird eine leere Zeichenfolge sein. Zu guter Letzt werden wir den Beitrag haben, und das sollten deine Seele und deine Kommatasten sein. Und der Anfangszustand wird ein Objekt sein. Dies wird also verwendet, um den Anfangszustand der Daten beizubehalten. Und diese werden verwendet, um den Ausgangszustand der Daten zu aktualisieren. Mit anderen Worten, wenn wir die Daten abrufen, werden diese verwendet, um den Anfangsstatus des Beitrags zu aktualisieren. Wenn die Daten unter der Haube verarbeitet werden, zeigen wir die Ladeanzeige benötigt wird, wenn etwas schief geht. Und schließlich wird dies verwendet, um den Status der neuen Daten zu speichern und zu aktualisieren . Das wäre fair. Die nächste Zeile besteht darin, die angewendete Spalte zu erstellen und zu aktualisieren. Die Notwendigkeit bleibt bestehen. Um den API-Aufruf zu tätigen. Wir müssen uns auf jeden Fall auf den US-Effekt berufen. Zuerst müssen wir es hier oben rechts importieren. Wir müssen die Auswirkungen geltend machen. Und die Wirkung erfordert zwei Parameter. erste ist die Funktion, die in diesem Fall eine Pfeilfunktion ist. Und das zweite ist ein Abhängigkeitsarray, und ich werde es als leeren Dichtebereich belassen. Nachdem Sie dies getan haben, müssen Sie als Nächstes eine Get-Anfrage stellen. Und um das zu tun, müssen wir zuerst acts use installieren. Und natürlich haben wir schon früher in der vorherigen Vorlesung Axiome installiert . Wenn Sie es jedoch nicht installiert haben, müssen Sie nur zum Terminal kommen und dann C steuern, um den aktuell laufenden Server zu stoppen. Und dann werden wir den Node Package Manager install acts use ausführen. Ich habe es schon installiert. Es ist also nicht nötig, dies ein zweites Mal zu tun. Wenn Sie es jedoch nicht auf Ihrem Computer haben, müssen Sie nur die Eingabetaste drücken, um es zu installieren. Lass mich es abwischen, nach oben scrollen und dann RTOs nicht installiert haben, wir müssen es an der oberen Eingabeachse von Axiomen importieren. Die Funktion innerhalb des US-Effekt-Hooks wird aufgerufen. Die Auswirkungen. Hier hat zumindest ein Nebeneffekt stattgefunden. Also innerhalb des Effekts, wir werden eine Get-Anfrage stellen. Also werden wir Axiome machen. Die Tochter versteht am einfachsten , dass wir den JSON-Platzhalter-Endpunkt verwenden. Gehen Sie also schnell zum Jason-Platzhalter und kopieren Sie die URL eines Beitrags. Und wir wollen die Route festlegen , die zu einem bestimmten Beitrag führt. Ich werde es einfach kopieren. Komm her, oder? Wir sind in der Schnur. Ich werde einfach bezahlen. Immer wenn wir eine GET-Anfrage stellen, wird immer ein Versprechen zurückgegeben. Deshalb werden wir einen Dan Blow Dot haben. Wenn die Anfrage erfolgreich ist, müssen wir einige Staaten umstellen. Wir werden hier eine Antwort haben. Wenn die Anfrage erfolgreich ist, müssen wir das Laden auf false setzen. Außerdem müssen wir den Ausgangszustand mit den neuen Daten aktualisieren , mit denen wir konfrontiert sind. Also werde ich die Antwortpunktdaten von Set Posts erstellen. Und schließlich müssen wir den Pfeil auf eine leere Zeichenfolge setzen , nur weil der Fetch erfolgreich ist. Fehler einstellen. Einer wurde leer gestreamt. Dies passiert, wenn der Fetch erfolgreich ist, aber nicht jedes Mal, wenn Sie eine reibungslose Fahrt haben. Ja, manchmal hast du vielleicht ein Problem. Das Abrufen der Daten wird nicht erfolgreich sein. Wenn also etwas schief geht, müssen wir den Pfeil fangen und ihn im Kartenblog behandeln. Lassen Sie uns den Catch-Block schnell spezifizieren, oder? Nach dem Versprechen dieses Typen, das ist die Höhle , dass es zurückkehrt, nehmen wir die Couch. Und was ich fangen werde, wir fangen jeden vorhandenen Pfeil, der gefunden wird. Wir müssen auch seine Last in Kraft setzen . Wir müssen post auf ein leeres Objekt setzen, was der Anfangszustand der Posierten ist. Okay, lass mich es dir oben zeigen. Und hier ist es, oder? Perfekt. Dann müssen wir den Fehler setzen. Also so etwas. Also werden wir etwas tun, das schief gelaufen ist. Nachdem ich diese in den Effekten getan habe. In der nächsten Zeile werden die Daten in den GSAs angezeigt. Wenn die Komponente Busey ist, die die Daten lädt, zeigen wir die Ladeanzeige an. Wenn die Daten erfolgreich abgerufen wurden, müssen wir die Daten nun auch direkt in der Doppelpunktklammer anzeigen , da wir hier den Insulin-JavaScript-Ausdruck verwenden müssen . Ich werde es tun, wenn es geladen gleich wahr ist. Ordnung, also wenn die Anwendung geladen wird, sagen wir, dass Daten geladen werden, und noch etwas anderes. Wenn die Daten abgerufen werden, müssen wir den Post-Punkt-Titel abrufen. Schauen wir uns den Beitrag an. Wir können den Titel oder die Leiche bekommen. Lass uns den Postkörper holen. Außerdem wollen wir den Fehler auf dem Bildschirm anzeigen. Wenn es also einen Fehler gibt, müssen wir den Fehler anzeigen , der hier beschreibbar ist. Und wenn es keinen Fehler gibt, müssen wir es so einstellen, dass es weiß, wann Sie die Anwendungsmischung speichern , um sie in der App-Komponente zu rendern. Komm her. Und das alles haben wir in der vorherigen Vorlesung gemacht. Also platziere ich einfach den Kommentar zu ihnen. Importiere, verwende es, Datenphage von Component Slash, es und verwendete Reducer Slush, benutze das digitale Zeitalter. Ich habe zu viel geredet. Haben recht, also lassen wir es innerhalb der App-Komponente richtig rendern. Sie geben ihre Wirkung an. Wir müssen die Anwendung auch hier ausführen. Und ich werde dafür npm start width machen. Es zeigt die Ladeanzeige. Und als der Prozess erfolgreich war, wurden die Daten gesichert. Wenn Sie die Anwendung neu laden, sehen Sie auf jeden Fall die Ladeanzeige. Kannst du es sehen, obwohl es im Handumdrehen erscheint? Aber wenn Ihr Internet ziemlich langsam ist, werden Sie es innerhalb weniger Sekunden sehen. Schau es dir an. Kannst du sehen, dass alles wie erwartet einwandfrei funktioniert. Lassen Sie mich Ihnen etwas zeigen , denn wir möchten auch sicherstellen , dass die Pfeilanzeige auch einwandfrei funktioniert. Gehen Sie also zurück zu VS Code. Und genau hier ändere ich einfach die URL. Diese URL ist falsch. Daher wird der Fehler auf dem Bildschirm angezeigt. Wenn Sie im Browser speichern. Erneut laden. Hoppla, da ist etwas schief gelaufen. Der Zweck dieses Beispiels besteht darin, die Schrittstransaktion zu überprüfen , wenn der US-Bundesstaat als Bundesstaatsvariable zum Abrufen von Daten verwendet wird. Mal sehen, wie es aussieht, wenn wir dasselbe Beispiel mit dem Use Reducer who? implementieren dasselbe Beispiel mit dem Use Reducer who? Das ist vorerst alles, in der nächsten Vorlesung werden wir sehen, wie dieses Beispiel mit dem Use Reducer implementiert wird. Wir sehen uns in der nächsten Vorlesung. 48. 46 useReducer DataFetch: In der vorherigen Vorlesung haben wir gesehen, wie man Daten abruft, mit dem Effekt, dass Hooke diesen Hook verwendet, um die Nachlasstransaktion zu verwalten. In diesem Beispiel werden wir also sehen, wie Daten mit dem US-Effekt Hooke abgerufen werden können, indem wir den Use Reducer Hook implementieren, um diese TID-Transaktion zu verwalten und zu verwalten. In diesem Paket werden wir eine neue Komponente namens User User Data Phage erstellen . Generieren Sie die funktionale Komponente. Lassen Sie uns schnell den Nutzungsreduzierer und den US-Effekt importieren. Also ganz oben, benutze Reduzierer, Koma. Nutzen Sie auch den Effekt. Wir müssen unsere CEOs aus Axiomen importieren. Lassen Sie uns den Anfangszustand als Eigenschaft eines einzelnen Objekts deklarieren . Lassen Sie mich Ihnen zeigen , wie das schnell geht. Konstanter Anfangszustand, setzen Sie ihn auf ein leeres Objekt. Und genau, innerhalb des Objekts gruppieren wir den gesamten Status, den wir in der Anwendung haben werden , direkt darin. Wir werden Loading haben und es auf True setzen, es auf True setzen, genau wie in der vorherigen Lektion. Der Fehler setzte es auf eine leere Zeichenfolge und den Beitrag auf ein leeres Objekt. Das sind also die Übergänge, die wir in dieser Anwendung benötigen. Und mit diesen konnten wir den gesamten Staat innerhalb eines Objekts gruppieren. Und riesig, extrem cool. Lassen Sie uns schnell die Reduzierfunktion definieren. Nachdem wir das getan haben, kommen Sie her, wir müssen sie aufrufen, um den Reducer zu verwenden. also bereit sind, den Reduzierer zu verwenden , nehmen wir den Reduzierer und den Anfangszustand als Parameter an. Das ist also der Anfangszustand , den wir hier oben haben. Für den Reduzierer müssen wir auch den Reduzierer definieren. Ich mache const, reduziere einen Kern und setze ihn auf eine Pfeilfunktion. Und die Reduzierung, die zwei Parameter berücksichtigt. Das erste sind die Staaten und dann das zweite die Aktion. Jetzt müssen wir den zweistufigen Übergang umsetzen. Erstens, wenn die Anfrage erfolgreich ist, und zweitens, wenn die Anfrage fehlschlägt. Lass es mich dir schnell zeigen. Gehen Sie zurück in den Steady-State von Phagen in den USA. Dies wird der erste Zustandsübergang sein, und dies ist der zweite Zustandsübergang. Lassen Sie uns sehen, wie Sie diese schnell implementieren können. Also richtig, innerhalb der Reduzierfunktion werden wir einen Schalter haben. Und der Switch-Ausdruck wird vom Typ Action Dot sein. Fall eins wird also data fetch socks x sein. Data underscore fetch underscore socks x. Wenn also alles in Ordnung ist, werden wir jetzt wieder laden, wie wir es in der vorherigen Vorlesung getan haben. Die Post. Wir werden das Aktionspunkt-Payload-Komma haben. Und dann wird der Fehler auch eine leere Zeichenfolge sein. Der zweite Fall ist, wenn die Anfrage ausgefüllt wird. Hier haben wir also Unterstrich-, Abruf- und Unterstrichfehler in den Groß- und Kleinschreibung. Wenn ein Fehler auftritt, geben wir hier so etwas zurück. Stimmt es? In der Rückgabe setzen wir das Laden so, dass der Beitrag auf ein leeres Objekt gesetzt wird, dann ist der Fehler aufgetreten, etwas ist schief gelaufen. Und natürlich müssen wir den Standardfall angeben, der den Status zurückgibt. Lassen Sie uns den Code schnell formatieren, um eine korrekte Einrückung zu erzielen. Ich habe die nicht gemacht, komm her. Für den use reducer hook gibt es also ein Wertepaar zurück, nämlich den aktuellen Status und die Dispatch-Methode const state comma dispatch und weist es dann wie folgt zu. Und jetzt machen wir den API-Aufruf. Und das sollte natürlich innerhalb des Effekts geschehen, der sich schnell auf den US-Effekt berufen lässt. Wir müssen nur direkt aus der vorherigen Vorlesung kopieren , um data, data fetch, zu verwenden. Dann kopiere ich aus den Zeilen 92, Zeilen 21. Kopieren. Komm her, oder? Wir sind in der Funktion. Wir müssen zahlen. Lassen Sie uns die notwendigen Änderungen vornehmen. Wir müssen also nur die gebrauchten Vorkommen direkt innerhalb des versprochenen Blocks ersetzen . Wir werden die Bahnen 35 bis 37 hervorheben. Wisch es ab. Jetzt, wo die Mastaktion erfolgreich ist, müssen wir die Aktion einleiten. Versand. Stimmt es? Wir sind in der Versandmethode. Wir nehmen ein Objekt auf. Und dann müssen wir den Aktionstyp und die Art der Aktion angeben , die ausgelöst werden soll , wenn der Abruf erfolgreich ist , sind Daten über den Dusko-Phage auf den Vasco-Socken x. Lassen Sie mich Ihnen das oben zeigen. Hier wird es hervorgehoben und dann kopiert. Komm her, füge es ein. Wir sind in der Schnur. Wenn wir die Giftstoffe für den Datenabruf versenden, müssen wir die Nutzlast angeben. Und die Nutzlast werden Antwortpunktdaten sein. Lassen Sie mich Ihnen erklären, was eine Nutzlast in einem GeV ist. Die Nutzlast sind die Daten, die Ihr Reduzierer verwendet , um den Status zu aktualisieren. Also werden wir uns neue Daten holen. Und dann wird das verwendet, um den Anfangszustand zu aktualisieren. Und natürlich ist der Anfangszustand nur ein leeres Objekt. Also müssen wir direkt im Catch-Block die Pfeilaktion auslösen. Versand, richtig? Versandbereite Methode. Wir müssen die Art der Aktion angeben. Der Typ dieser Aktion wird sein: Daten, Unterstrich, Abrufen, Unterstrich, Fehler. Komm her und füge es ein. So einfach ist das. Wir müssen die Payload hier also nicht angeben, nur weil wir die Fehlermeldung bereits angegeben haben . Und hier ist die Fehlermeldung. Lassen Sie uns die Daten schnell im Browser anzeigen. Wir müssen nur die Antagonisten der vorherigen Beispiele kopieren . Ein Anhängen von Zuständen an alle Variablennamen, einfach weil sie alle Teil des Zustandsobjekts sind, richtig, innerhalb des US-Datenphages müssen wir nur den Text wie diesen kopieren. Markieren und kopieren. Komm her. Füge es so ein. Lassen Sie uns schnell formatieren, um eine korrekte Einrückung zu erzielen. Perfekt. Was ich jetzt tun werde, ist Zustände an alle Variablen anzuhängen. Der Statuspunkt wird geladen. Und hier machen wir State DOT. Poste die Leiche. Rendern Sie das schnell in der App-Komponente und lassen Sie uns sehen, was wir im Browser haben , ist, unseren Datenabruf durch kompetenten Schrägstrich all diese Verzeichnisebenen zu reduzieren unseren Datenabruf durch kompetenten Schrägstrich , auf die Sie abzielen müssen. Und komm her, bitte einen Kommentar zu diesen riesigen Reducer-Datenphhagen. Speichern Sie und fahren Sie mit dem Browser fort. Sehen wir uns das erwartete Ergebnis an. Ups, irgendwas ist schief oder richtig gelaufen, Leute. Sie können sich erinnern, dass wir in der vorherigen Vorlesung die URL geändert haben. Also müssen wir zurück zu Jason. Bitte warten Sie, um die entsprechende URL zu kopieren. Und hier ist es. Kopieren, komm her und füge es ein. Und ich finde es auch gut, hier die Korrektur vorzunehmen. In Ordnung, damit Sie in Zukunft keine Probleme haben , wenn Sie auf meinen Code verweisen möchten. Okay, hier drüben, sparen und sehen wir uns das Expressresort an. Sie sind so wunderschön. Alles funktioniert wie erwartet einwandfrei. Der Unterschied zwischen diesem Beispiel und dem, was wir in der vorherigen Vorlesung gemacht haben , besteht darin, dass wir den relativen Zustand zusammenfassen konnten . Lass mich es dir oben so zeigen. Und auch die Schritttransaktionen sind zusammengefasst. Das Argument ist nun dieses. Wenn sie Reducer verwenden und daraus schließen, dass Hooke beide für die Staatsverwaltung verwendet werden. Wann ist es vorzuziehen, den Benutzerbenutzer zu verwenden? Die USA haben sich so schnell geschlagen. Lassen Sie uns das in der nächsten Vorlesung besprechen. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 49. 47 useCallback Hook: In dieser Vorlesung werden wir uns mit einem weiteren Impotenzproblem befassen, nämlich dem Rückruf in den USA. Es ist jedoch so wichtig, die Leistungsoptimierung zu verstehen , bevor wir mit der Verwendung von Callbacks fortfahren. Und daher ist dir das klar. Wir können jetzt besprechen, was ein Use-Callback ist, warum und wann Sie ihn verwenden sollten. Und hier habe ich bereits eine einfache Gegenverpflichtung eingebaut . So schnell, lassen Sie mich Ihnen das erklären. Gehen wir zu den App-Komponenten über. Und hier haben wir eine Komponente namens Hauptkomponente gerendert . Und hier ist es, richtig, neben der Hauptkomponente haben wir zwei verschiedene Komponenten, die mit unterschiedlichen Eigenschaften wiederverwendet werden , um verschiedene Informationen anzuzeigen. Und die erste ist die Counter-Komponente. Diese Zählerkomponente hier ist dafür verantwortlich, die aktuelle Anzahl der Lehrer anzuzeigen. Die Button-Komponente ist dafür verantwortlich, den Lehrer zu erhöhen. Und dann werden wir hier die Counter-Komponente wiederverwenden , um die Anzahl der Schüler anzuzeigen. Und dann haben wir auch die Button-Komponente wiederverwendet , um die Anzahl der Schüler zu erhöhen. Und all diese Funktionen hier sind oben definiert. Hier haben wir die Inkremente, die Chat-Funktion, die Inkremente der Schüler, und dann haben wir oben die notwendigen Zustandsvariablen. Stimmt, wir sind in dieser Funktion. Wir erhöhen, bringen Sie uns fünf bei. Hier erhöhen wir die Anzahl der Schüler um zehn. In Ordnung, das alles passiert also, wenn auf die Schaltfläche geklickt wird. Also komm zurück. Wenn Sie diese Komponente beobachten, werden Sie feststellen, dass wir sowohl die Prüfung als auch den aktuellen Zustand des Lehrers bestehen . Und die unterste Komponente, wir nehmen das Klicken auf den Griff als Prüfpunkt und geben dann und geben dann die t-test-Funktion inkrementiert als Wert ein. Diese Funktion ist oben definiert. Natürlich habe ich es dir schon gezeigt. Und das Gleiche hier. Wir haben die Darmzählung als Requisiten genommen und dann geben wir den Wert der aktuellen Schüler weiter, oder? Würde diese Schaltfläche nicht, wir übergeben das Handle click als Sonden und wir nehmen die Inkremente auf, die die Schüler als Wert haben, was der Wert der Eingabeaufforderungen ist, gehen schnell zur Button-Komponente über. In den untersten Komponenten befanden sich also eine destrukturierte Struktur von Griff, Clique und Kindern. Hier haben wir einen Button auf Klick auf diesen Button implementiert. Wir nehmen diese Eingabeaufforderungen auf, das ist der Griff , mit dem der Wert des Inkrementlehrers in der Funktion „Schüler erhöhen“ angezeigt wird. Und hier geben wir sie als inneres HTML an Kinder weiter. Das wird also den Test zwischen dem Bolton zeigen. Lassen Sie mich Ihnen kurz die Hauptkomponente zeigen. Also das innere HTML hier drüben, dieser Typ erhöht die Schüler und erhöht den Lehrer. Diese werden wegen der Requisiten Punkt Kinder angezeigt . Natürlich solltest du das inzwischen wissen. Gehen wir schnell zur Counter-Komponente über. Rechte innerhalb der Counter-Komponente würden Ihren Test und Ihre Zählung zerstören. Und hier machen wir Tests und zählen die Anzahl, die den aktuellen Wert der Lehrer und Schüler anzeigen . Zum Abschluss haben wir ein neues Verzeichnis namens use callback practice erstellt . Hier ist es. In diesem Verzeichnis haben wir also all diese Komponenten erstellt und dann die Hauptkomponente in der App Js gerendert. Und natürlich sind die Button-Komponente und die Count-Komponente in der Domain-Komponente verschachtelt. Und oben haben wir sie importiert, so einfach ist das. Habe die Anwendung nicht verstanden. Lassen Sie uns schnell mit dem Tagesgeschäft fortfahren . Schließ es. Der Zweck dieses Beispiels besteht also darin, sich auf die Leistungsoptimierung zu konzentrieren und die Leistung zu messen. Wir haben hier ein Log-Statement. Lass es mich dir zeigen. Können Sie sehen, dass dies dazu beiträgt die Komponente zu zeigen, die gerendert wird. Und hier haben wir auch einige Protokollauszüge. Also Rechte innerhalb des Terminals. Wir müssen die Anwendung ausführen. Perfekt. Das ist genau das, was wir erwarten. Wenn ich also auf Inkremente klicke, wird jeder, den wir uns beibringen, um fünf erhöht. Siehst du? Und wenn ich auf Inkremente klicke , werden Schüler, Schüler nach Anzahl erhöht. Alles scheint einwandfrei zu funktionieren. Lass uns schnell zur Konsole gehen und sehen welche Harpunen höher liegen, oder? Für eine Statistik müssen wir die Konsole also nur noch einmal leeren , damit sie sauber aussieht. Jetzt werde ich auf die Erhöhung der Anzahl der Abstimmungen klicken. Wenn ich auf das Inkrement „Lehrer“ klicke, wird das Rendern von Lehrern angezeigt, aber in Schritten finden Sie hier Details. Sie werden sehen, wie Schüler gerendert werden und beim Rendern von Bootfahren werden Schüler erhöht. Wenn ich auf die Inkremente Schüler klicke, siehst du eine gleiche Log-Anweisung Lehrer rendert, Stimmen inkrementiert, Lehrer rendern Schüler, Rendern bringt Inkremente Schüler. Also hier liegt leider das Problem. Denn wenn wir auf „Lehrer inkrementieren“ klicken, muss die Komponente „ Schüler inkrementieren“ nicht erneut gerendert werden. In diesem Fall werden jedoch die Komponenten der Schüler neu gerendert, wenn wir die Anzahl der Lehrer erhöhen . Und wenn wir die Anzahl der Schüler erhöhen, werden auch die Lehrerkomponenten neu gerendert. Und diese führen zu einigen Leistungsproblemen in Ihrer Anwendung. Stellen Sie sich vor, wir haben hier über 100 Komponenten. Und durch die Aktualisierung einer einzelnen Komponente wird die restliche Komponente der 1990er Jahre neu gerendert. Freunde. Das wird überhaupt nicht nett sein, da Sie anfangen werden, ein Leistungsproblem zu haben. Leistung zu optimieren, müssen wir daher nur die Komponente genau rendern, die erneut gerendert werden muss, wenn sie Änderungen angibt oder Änderungen veranlasst. Und das wird mit React Dot Memo gemacht. React Dot Memo ist ein fantastisches Tool zum Auswendiglernen funktionaler Komponenten. Und wenn es richtig angewendet wird, verhindert es, dass eine funktionale Komponente nicht erneut gerendert wird, wenn die Eingabeaufforderungen den Status nicht geändert haben. Hört sich gut an. Wunderbare Macht, oder? Sie können sich das Auswendiglernen also als eine Art von Grundwert vorstellen , sodass es nicht neu berechnet werden muss , wenn sich der Zustand oder die Sonden nicht geändert haben. Lassen Sie uns diese Anwendung also schnell mit React dot mammal VS Code optimieren . Und lassen Sie uns schnell zur Hauptkomponente übergehen. Ordnung, also um die Anwendung zu optimieren, werden wir ganz einfach tun. Also, was ich jetzt tun werde, ist, diesen Typen zu markieren , die Standardeinstellungen exportieren und ihn dann aufrufen. Komm her, füge es ein und dann machen wir React Dot Mammal. Und jetzt müssen wir vorbeikommen. Die Komponente ist so einfach. Also, was ich jetzt tun werde, ist das hervorheben und kopieren. Gehen wir zur Abstimmungskomponente. Komm her, füge es ein. Wir müssen die Komponente zur Abstimmungskomponente ändern . Hier drüben. Lassen Sie uns die Exportstandardwerte entfernen. Machen Sie dasselbe in der Counter-Komponente. Entferne die Exportstandards, komm her, füge sie ein. Hier müssen wir also die besorgniserregende Komponente, die die Gegenkomponente darstellt, übergehen . So einfach ist das. Speichern Sie und schauen wir uns den Browser an. Auffrischen. Beim ersten Rendern sehen Sie alle Komponenten direkt hier auf der Konsole. Rendern lehrt uns nach dem Zufallsprinzip gekauft in Schritten, Lehrer, Rendern Schüler und dann Rendern Voting-Inkremente Schüler. Lass uns die Konsole leeren. Jetzt probieren wir es aus, indem auf den Inkrement-Lehrer klicken. Kannst du sehen? Jetzt haben wir Rendering-Lehrer, dem Zufallsprinzip gekaufte Inkrement-Lehrer und dann Rendern, die abstimmen, um Schüler zu erhöhen. Moment sind wir in der Lage, die Anwendung ein wenig zu optimieren. Denn hier haben wir immer noch das Rendern, aber schrittweise Schüler direkt an der Konsole, was nicht sehr gut ist. Wenn wir also auf Inkremente klicken, Schüler, werden Sie zufällige Inkremente sehen, Lehrer rendern Schüler und dann zufällige Internatsstufen Schüler. Die Absicht dieser Vorlesung ist es also , unnötiges Rendern zu verhindern. Denn wenn Sie auf die Schülerabstimmung klicken, sollte die Komponente, die sich auf die Lehrer bezieht, nicht ebenfalls neu gerendert werden. Wenn Sie auf die Lehrer klicken, sollte die Komponente, die sich auf die Schüler bezieht, nicht erneut gerendert werden. Und das wird jetzt eine weitere Herausforderung mit sich bringen, da wir den Status der Studentenkomponente nicht ändern. Aber hier wird es erneut gerendert. Lass es mich dir schnell noch einmal zeigen. Und ich klicke auf inkrementelle Funktionen. Sie sehen, dass das Rendern der Stimmabgabe die Anzahl der Schüler erhöht. Wir ändern den Status der Studentenkomponente nicht und möchten daher nicht, dass sie erneut gerendert wird. Aber hier auf der Konsole können Sie sehen, dass die Abstimmung für die Schülerkomponente erneut gerendert wird. Wenn Sie die Konsole leeren und dasselbe tun, um die Anzahl der Schüler zu erhöhen, sehen Sie die Komponente, die sich auf den Lehrer bezieht, nämlich die Schaltflächenkomponente des Lehrers. Wird ebenfalls neu gerendert. Dies wird also als unnötiges Rendern bezeichnet. Lassen Sie mich Ihnen kurz erklären, was unter der Motorhaube passiert. Gehen Sie zur Hauptkomponente. Hier haben wir also die Counter-Komponente und sie akzeptiert den Lehrer als Sonden. Die Button-Komponente akzeptiert die Inkremente Teacher , wenn sie den Wert abfragt handelt es sich um die Funktion, die oben definiert ist . Hier ist es? Das bedeutet also einfach, dass, wenn der Status des Lehrers aktualisiert wird, die Zählerkomponente des Lehrers und die Button-Komponente des Lehrers neu gerendert werden. Aber das Problem ist jetzt, dass sogar das Studentenwahlrecht neu vergeben wird. Die Kontaktkomponente für einen Schüler wird jedoch nicht erneut gerendert. Das ist einfach so, weil wenn new die Inkrementierung jeder unserer Funktionen aufruft, jedes Mal, wird, eine neue Inkrements-Student-Funktion erstellt wird wenn die übergeordnete Komponente erneut gerendert wird, eine neue Inkrements-Student-Funktion erstellt wird. Und natürlich müssen wir bei der Arbeit mit Funktionen eine Referenzgleichheit berücksichtigen. Selbst wenn sich diese beiden Funktionen genau gleich verhalten, heißt das nicht, dass sie einander gleich sind. Daher unterscheidet sich die Funktion vor dem erneuten Rendern von der Funktion nach dem erneuten Rendern. Also einfach weil wir das Vermögen als Requisiten weitergeben, wird React, dot memo schnell erkennen, dass sich die Sonden geändert haben und dann wird es das erneute Rendern nicht vermeiden können. Etwas streifig, oder? Lassen Sie mich das aufschlüsseln. Wenn Sie Lehrer in neuen Schritten erhöhen, wird eine Schülerfunktion erstellt, die dazu führt, dass die Schüler die Abstimmungen erneut anzeigen. Und wenn Sie Schüler in neuen Schritten inkrementieren , wird jede unserer Funktionen erstellt, was auch dazu führt, dass die Lehrer-Funktion inkrementieren erneut gerendert wird . Und jetzt stellt sich die Frage, wie wir informieren, wie wir reagieren, um keine neuen Inkremente für diese Funktion zu erstellen , wenn wir sie aktualisieren Die Lehrer haben Recht. Also hier ist Lee, wo You Score Buck ins Spiel kommt. Also, was sind die Use Callback-Hooks? Sie verwenden die MMOS-Version der Callback-Funktion, die nur dann leuchtet, wenn sich eine der Abhängigkeiten geändert hat. Der Einfachheit halber verwenden sie den Callback-Hook, der verwendet wird, wenn Sie eine Kompetenz haben , in der ein Kind wiederholt rendert, ohne dass dies erforderlich ist . Ordnung, um den Use-Callback zu implementieren, müssen mehrere Bedingungen erfüllt sein. Die erste Bedingung ist, dass wir eine Callback-Funktion haben müssen. Die zweite Bedingung ist, dass wir die Diagrammkomponenten mit React Dot Memo optimieren müssen . Lass es mich dir zeigen. Hier. Wir haben die untergeordnete Komponente optimiert, und hier haben wir auch die untergeordnete Komponente optimiert. Die dritte Bedingung ist , dass wir die Referenzgleichheit überprüfen müssen. Für die Referenzgleichheit müssen wir überprüfen, ob die Funktionen gleich sind. Wenn also die obige Bedingung erfüllt ist, können wir unsere Anwendung mit dem US-Callback-Hook weiter optimieren . Stimmt es? Um den Use-Callback-Hook zu implementieren, sind also mehrere Schritte erforderlich. Keine Sorge, die Schritte sind in der Tat sehr einfach. Scrollen Sie nach oben. Zuerst müssen wir die Verwendung Kohlberg importieren. Und danach besteht Schritt Nummer zwei darin, die Verwendung Kohlberg aufzurufen. Und sie verwenden Callback, eine Funktion, die eine Callback-Funktion als erstes Argument verwendet. Also, was ich jetzt tun werde, ist, diese Funktion zu kopieren, so, Farbe hervorheben. Komm her und füge es ein. Und danach müssen wir es einer solchen Variablen zuweisen . Stimmt es? Wunderschön. Das zweite Argument des US-Callbacks ist also eine Abhängigkeitsarterie. Also, was ich jetzt tun werde, ist ein Komma anzugeben und dann den Abhängigkeitsbereich zu nehmen. Und dieser Rückruf hier hängt von der Variablen des Lehrers ab , um Gas zu geben. Komm her, markiere und kopiere es, füge es direkt in die Abhängigkeit ein. Diese Funktion wird nur ausgelöst, wenn sich der Status der Lehrer ändert. So einfach ist das. Lassen Sie uns also dasselbe für den Schüler replizieren. Verwenden Sie Callback. Akzeptiert eine Callback-Funktion als erstes Argument. Kopiere das. Markieren und streichen, komm her, füge es ein. Dann müssen wir es hier einer Variablen wie dieser zuweisen . Das zweite Argument ist ein Abhängigkeitsarray. Dies wird beschleunigt, wenn sich der Zustand des Schülers ändert. Wir müssen also nur students als Abhängigkeitsarray angeben . Es bedeutet also einfach , dass es vom Zustand des Schülers abhängt , ob er wütend wird. Wenn sich die Schüler nicht ändern würden, würde sich die Funktion nicht ändern. So einfach ist das. Also müssen wir es so zuweisen. Nachdem wir diese erledigt haben, schauen wir uns das schnell im Browser an. Auffrischen. Wunderbar für die Arbeitszeit , wenn die Anwendung geladen und alle Komponenten gerendert werden. Lassen Sie uns die Konsole schnell aktualisieren. so viele auf der Konsole auf die Inkremente Lehrer klicken, werden Sie feststellen, dass nur die Komponente, die sich auf werden Sie feststellen, dass den T-Test bezieht , neu gerendert wird. Okay? Sie werden also keine unnötigen Renderings wie bei der Studenten-Komponente mehr erhalten unnötigen Renderings . Und wenn Sie die Anzahl der Schüler erhöhen, löschen wir die Konsole und erhöhen dann bis zum Ende. Sie werden feststellen, dass nur die Komponente „ Später Schülers auf dem Bildschirm erneut gerendert wird. Und der Beweis ist direkt auf der Konsole. Damit können wir sagen, dass die Anwendung vollständig optimiert ist. Siehst du, wir haben keine nutzlosen Renderings mehr. Das ist extrem großartig und ich liebe es. Freunde. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 50. 48 useMemo Hook: In der vorherigen Vorlesung haben wir den Use-Callback-Hook besprochen, der sich auf die Leistungsoptimierung konzentriert. In dieser Vorlesung werden wir uns also mit der Verwendung von Memo-Hooks befassen, die sich auch auf die Leistungsoptimierung konzentrieren. Der React use memo Hook gibt einen feuchten Wert zurück. Und ich möchte, dass Sie sich das Auswendiglernen als Cagian-Werte vorstellen , damit es nicht neu berechnet werden muss. Techniken, sie verwenden Mama Hook läuft nur , wenn eine seiner Abhängigkeiten von Taten. Und das verbessert die Leistung. Um zu verstehen, wie die Höhe funktioniert, werden wir sie am Beispiel veranschaulichen. Lassen Sie uns schnell ein neues Paket namens use memo practice erstellen , oder? Wir befinden uns im Ordner Components New. Bereit, meine weitere Praxis zu nutzen. Lassen Sie uns in meinem Memo eine neue Firma gründen, counter dot js. Generieren Sie schnell die funktionale Komponente. Und dann deklarieren wir die notwendigen Zustandsvariablen und schon wird unsere Funktion so eingestellt, dass sie verwendet wird. Und natürlich muss man die US-Staatlichkeit importieren. werde keinen machen. Was ich hier tun muss, ist die Kommatasten zu benutzen, was die Setup-Funktion ist. Und der Anfangszustand wird sein. Null. Markiert, dupliziert es. Und dann markiere ich den großen Buchstaben, einen Befehl D, um die Vorkommen auszuwählen, ihn abzuwischen und ihn in sein zu ändern. Wir haben also die Zustandsvariablen Zähler a und Land B. Das einfachste. Und hier definieren wir eine Funktion, um a um eins zu erhöhen und dann auch Zähler b um zwei zu erhöhen. Konstante. Inkrementiere a. Equa und setze es auf unsere Funktion. Und dann setze ich Zähler A in Klammern. Wir werden die neuen Updates aufnehmen. Kontakt plus eins. Es ist so einfach wie die Highlights, replizieren Sie es. Sie müssen nur die Vorkommen dieser auswählen und sie so ändern, dass sie es sind. Und hier müssen wir nur COUNTA be plus eins machen. Deshalb wollen wir das Use Memo mit einer einfachen Gegenapplikation veranschaulichen . Lass uns schnell etwas auf dem Bildschirm rendern lassen. Hier werden wir ein P-Tag haben. Innerhalb des p-Tags mache ich ein e is, das solltest du natürlich inzwischen wissen. Hier wollen wir eine Schaltfläche implementieren, um den Zähler zu erhöhen. Ein Klick auf diese Abstimmung. Wir werden die Funktion Inkrement eine einfachste Verschuldung nennen . Also, was ich jetzt machen werde, wir werden eine weitere Div haben. Hebt diesen Typen von den Zeilen 18 bis 19 hervor, verschiebe ihn in dieses neue Div, das wir erstellt haben. Lassen Sie mich den Code also schnell formatieren. Perfekt. Also werde ich die Zeilen 15 bis 18 Duplikate hervorheben. Hier. Wir machen b. B b. Und B , oh mein Gott, ich hätte einfach die Vorkommnisse auswählen und es einmal machen sollen. Wenn Sie die Anwendung speichern, gehen Sie zu den Objekten und lassen Sie sie rendern. Dieser Ort ist ziemlich chaotisch, aber wir müssen das so verwalten. Importiert meine Memo-Zählung von Ihrem Original, Come Down, Highlights nach oben. Schreiben Sie einen Kommentar dazu. Schau es dir im Browser an. Wunderschön. Alles funktioniert einwandfrei. Also lass es uns anprobieren. Gut, sei gut, alles funktioniert einwandfrei. Also genau hier fängt der Spaß an. Lassen Sie uns nun die Anwendung verbessern. Nehmen wir an, wir möchten gerade anzeigen, wenn die Zahl gerade oder ungerade ist, wenn die Zahl ungerade ist. Lass es uns schnell verbessern. Komm her. Wir werden eine weitere Funktion haben, eine Konstante, eine gerade Zahl. Stellen Sie es auf unsere Funktion ein. Dieser Typ wird deine Ergebnisse nehmen. Und hier drüben werde ich das Ergebnis als Gleichzähler machen , ein Modul zwei ist gleich Null. Das ist also am einfachsten. Dann müssen wir zurückgeben, was auch immer das Ergebnis ist. Perfekt. Nachdem wir dies getan haben, werden wir es schnell auf der Benutzeroberfläche anzeigen. Direkt im P-Tag des Zählers. Wir müssen hier einige Bedingungen stellen. Also a ist, was auch immer der Zustandswert ist, und dann, ob er gerade oder ungerade ist. Wir müssen also angeben, ob die Zahl ungerade oder gerade ist. Und, ähm, ich werde es tun, es ist hier. Zuerst müssen wir die Funktion aufrufen. Sogar. Danach müssen wir das überprüfen. Wenn die Zahl gerade ist, sagen wir gerade. Jetzt. Wir werden seltsam sagen. Am einfachsten ist es, die Anwendung zu speichern und im Browser auszuchecken . Erneut laden. Okay, lassen Sie uns a inkrementieren. Kannst du sagen, es sagt, dass der Zähler eins ist und es seltsam ist. Nochmals erhöht, da heißt es, a ist zwei, n ist gerade, einfach so, oder? Eine weitere Sache, die wir tun wollen extrem wichtig ist , ist , dass wir versuchen werden, Langsamkeit winterliche Funktion zu induzieren. Nehmen wir also an, wir möchten, dass diese Funktion innerhalb weniger Sekunden ausgeführt wird. In Ordnung, wir wollen also eine gewisse Verzögerung als Okklusion. Dafür müssen wir der Funktion also eine gewisse Langsamkeit verleihen. Lass uns das schnell machen. Gehen Sie zum VS-Code. Genau hier. Ich lasse es gleich Null sein. ich dann kleiner als ist, haben wir genau das 09-fache, dann müssen wir I um eins erhöhen. Nachdem wir dies getan haben, haben wir dieser Funktion Langsamkeit verliehen. Das wird also die Berechnung von Silikonen verlangsamen. Gehe zum Browser. Lass uns neu laden. Wenn ich jetzt auf Contact Air klicke, kannst du sehen, dass es ein paar Sekunden dauert , bis ein inkrementiert wird. Versuch es noch einmal. Sehen Sie hier, dass Lee der Ort ist, an dem das Problem liegt. Die Langsamkeit wurde also auf dem Campus a induziert. Aber wenn ich jetzt auf Zähler b klicke, sehen Sie, erleben wir immer noch dieselbe Langsamkeit. Lass es mich noch einmal versuchen. Sie sehen, dass es einige Sekunden dauert, bis der Zähler berechnet wird und die Ergebnisse auf dem Bildschirm angezeigt werden. Aber sieh mal, das ist nicht das, was wir hier wollen. Alles, was wir wollen, ist, bei Kontakt A Langsamkeit zu induzieren und nicht beim Werden. Wir wollen also nicht, dass sich dies auf Zähler b auswirkt. Was hier also passiert , ist , dass die Komponente immer dann neu gerendert wird, wenn der Status aktualisiert wird. Und wenn die Komponente gerendert wird, wird die Funktion gerade Zahl zum zweiten Mal aufgerufen. Und natürlich ist die Funktion sehr langsam und verlangsamt daher den gesamten Prozess und das Update der Benutzeroberfläche. Wir möchten nicht, dass das mit der Anwendung passiert. Die Lösung für dieses Problem besteht also darin, zu verhindern, dass unnötiger Wert neu berechnet wird. Und in diesem Fall werden wir informieren, reagieren, um diese Berechnung nicht durchzuführen , wenn wir den Wert des Zählers ändern, sei die einfachste, dass es nicht nötig ist, zu berechnen und zu zeigen, welche Zahl ungerade oder gerade ist , wenn wir es mit Land B zu tun haben Denn genau das scheint die Anwendung gerade zu tun. Geh zurück. Wenn Sie auf Kontakt klicken. Die Berechnung dauert einige Sekunden, wobei Sie sich nicht sicher sind, ob die Zahl gerade oder ungerade ist. Kontakt B ist nicht daran interessiert zu sehen, ob die Nummer ungerade oder gerade ist. Wenn Sie den Zähler B inkrementieren, dauert es dennoch einige Sekunden, bis er berechnet wird. Einfach weil diese Langsamkeit, die wir diesem Kerl hier drüben zugefügt haben, sich auf diesen Kerl auswirkt. Deshalb müssen wir unnötige Berechnungen vermeiden. Und um diese unnötige Berechnung zu verhindern, müssen wir das US-Säugetier verwenden. Kehren Sie zum VS-Code zurück, um den Use-Memo-Hook zu implementieren. Zuerst. Es muss wie alle anderen Hooks importiert werden. Der verwendete Mama Hook ist eine Funktion, die wir aufrufen müssen. Also komm gleich her. Ich werde Memo benutzen. Das Memo wird aktiviert. Der Wert der Rückgabefunktion müsste als erstes Argument aufgerufen werden. In diesem Fall ist die Funktion zur Berechnung der Zahl gerade oder ungerade. Also hier kopiere ich einfach so von hier , hervorhebt, schneidet, komm her und füge es als das Use-Memo-First-Argument ein. Das zweite Argument ist ein Abhängigkeitsarray-Koma, das für ein leeres Array verwendet wird. Damit diese Funktion aktiviert wird, muss sie von a abhängen. Und ich mache Zähler a. Einfach so. Danach hebt dieser Typ hervor, schneidet. Komm her, ordne es so zu. Nachdem dies geschehen ist, ist die böse Zahl kein Funktionsaufruf mehr , da sie jetzt einen Wert speichert. Gehen Sie also zurück zur Benutzeroberfläche oder entfernen Sie die Klammern. Wir müssen diesen Kerl entfernen. Speichern Sie die Anwendung, die Anticodons, den Browser und laden Sie sie neu. Stimmt es? Probieren wir es aus, indem wir auf das Inkrement a klicken. Siehst du? Es dauert einige Sekunden, bis ein inkrementiert wird. Schau es dir an. Also probieren wir es an B. Sehen Sie, dass Zähler B erhöht wird , ohne Zeit zu verlieren? Jetzt funktioniert die Langsamkeit, die wir bei Zähler a induziert haben, nur bei Kontakt a einwandfrei. Und dieses Mal wirkt sie sich nicht auf Zähler be aus, nur weil wir den Use-Memo-Hook implementiert haben , um die Anwendung zu optimieren. Und in diesem Fall wird die Langsamkeit auf dem entsprechenden Zähler induziert. Wenn sich also ein Kontakt ändert, berechnet React den Wert neu und ignoriert den Kartenwert, was einfach bedeutet, dass der Kartenwert nicht mehr verwendet wird. Da sich der Wert für Zähler a also nie geändert hat, ist es nicht nötig, den ungeraden oder geraden Wert neu zu berechnen und dann wird react den Wert aus dem vorherigen Rendern verwenden , von diesem Klonus, den wir induziert haben, nicht beeinflusst wird. Und jetzt ist die Frage, was ist der Unterschied zwischen dem Use Callback und dem Use Mammal? Use Callback wird verwendet, um eine Funktion abzufangen, wohingegen Use Memo verwendet wird, um das Ergebnis einer aufgerufenen Funktion auszuschneiden. So einfach ist das. Oder Sie können sagen, dass der US-Callback verwendet wird, um eine Callback-Funktion abzufangen. Das ist alles für heute und wir sehen uns in der nächsten Vorlesung. 51. 49 useRef Hooks: In dieser Vorlesung werden wir uns mit der Verwendung von Ref Hook befassen. Der übliche Hook wird verwendet, um direkt innerhalb der Funktionskomponente auf ein DOM-Element zuzugreifen . Und es kann auch verwendet werden , um einen veränderbaren Wert zu speichern , der bei der Aktualisierung kein erneutes Rendern verursacht. Verwendung von Rough Hook ermöglicht es Ihnen außerdem, den Wert zwischen den Renderings beizubehalten. Lassen Sie uns das veranschaulichen. Die Absicht dieses Beispiels ist es, das kausale Recht im Eingabefeld zu fokussieren , wenn die Seite geladen wird. Nehmen wir an Sie erstellen ein Anmeldeformular. Wir wollen den Cursor direkt im ersten Eingabefeld fokussieren , wenn die Seite geladen wird. Erstellen Sie schnell ein neues Paket namens user of practice. Und ich hoffe, Ihnen hat die Art und Weise gefallen, wie ich die Vorträge organisiere. in der Praxis Lassen Sie uns in der Praxis eine neue Komponente namens Fullcost impute erstellen. Die Rechte waren in der Benutzeroberfläche. Lasst uns eine olympische Fehde anzetteln. Der Typ Equal Test. Schließe es mit dem selbstschließenden Etikett. Rendern Sie diese Komponente schnell in der App. Js importiert Fokusattribut von diesem Typen. Und hier müssen wir uns periodisch konzentrieren. Mal sehen, was im Browser passiert. Hier ist das Eingabefeld. Lass mich ein bisschen nach oben zoomen. Perfekt. Zurück zu VS Code. Konzentrieren Sie sich auf Unternehmen. Die nächste Zeile besteht darin, die Did-Mount-Funktionalität der Komponente zu implementieren. Zunächst müssen wir den US-Effekt importieren. Lassen Sie uns es hier schnell aufrufen. Es nimmt eine Pfeilfunktion als erstes Argument auf. Und es nimmt auch eine Abhängigkeit RA auf. Aber in diesem Fall lassen wir es leer, weil wir wollen, dass der Effekt verstärkt wird. Es ist also nicht erforderlich, eine Abhängigkeitsvariable anzugeben. Okay, lass uns mit dem riesigen Rave weitermachen. Aber oben, wir müssen die Benützungsnummer als College genau hier importieren . Keine Sorge, Sie werden auf jeden Fall verstehen, dass das Wesentliche folgt. Und natürlich wollen wir, dass es jetzt dauert. Lassen Sie uns es nun einer Variablen namens penetrative zuweisen. Ich habe den Href nicht erstellt. Das Nest und die Linie sind , davon Gebrauch zu machen. Und dann müssen wir das alles genau in das Eingabe-Tag einfügen , wo wir es verwenden können , um die href-Attribute zu spezifizieren. Wir müssen die Variable in Petrov aufrufen. Das Einfachste, dass wir endlich die Fokusfunktion für das Eingabeelement aufrufen müssen, oder? Unbenutzbar, genau hier. Lassen Sie uns die Fokusfunktion aufrufen. Und ich werde in Peter F Punkt aktuelle Götter für Autos machen. Einfach so. setzt React die aktuelle Raph-Eigenschaft auf den entsprechenden DOM-Knoten. Mal sehen, was in einem Browser passiert. Können Sie sehen, wann die Komponente montiert wird, konzentriert sich die Maus auf die angezeigte Eingabe. Diese Implementierung ist sehr hilfreich, wenn Sie ein Anmeldeformular erstellen. Und Sie möchten, dass das erste Eingabefeld des Registrierungsformulars beim Laden der Seite im Mittelpunkt steht. Du kannst es deutlich sehen. Benutze den Kurs in Ordnung, innerhalb des Eingabefeldes. Aber wenn wir den Href abnehmen, lassen Sie uns dazu einen Kommentar abgeben. Kannst du sehen, dass im Eingabefeld nichts gefunden wurde. Das Eingabefeld hat also keine vier Kerne. Aber wenn Sie die Referenz beim Neuladen des Browsers implementieren, können Sie sehen, auf das das Eingabefeld fokussiert ist? Genau das kann Ihnen der Benutzer also helfen. 52. 50 useRef Hooks Timer: zur weiteren Erläuterung, Benutzer von Hook, Lassen Sie uns zur weiteren Erläuterung, Benutzer von Hook, schnell ein Beispiel für eine Clock-Timer-Anwendung einrichten . Also richtig, wann benutzt du Schiedsrichter-Training? Lassen Sie uns schnell eine neue Komponente namens Timer erstellen. Rechtsklicken Sie auf neue Datei. Timer-Punkt. Generieren Sie die funktionale Komponente. Die Absicht dieser Vorlesung ist es, einen Intervalltimer zu implementieren , der alle Sekunden benötigt , um den Wert im Browser anzuzeigen. Dazu müssen wir zuerst die Variable deklarieren, die den Intervallwert enthält. Also, ganz oben auf der Liste der Ursachen, solltest du wissen, wie man diese macht. Und hier deklarieren wir eine Zustandsvariable. Und wir werden es einen Timer nennen. Also müssen wir hier nur ein Komma daraus machen. Und der Anfangszustand wird da sein. Lassen Sie uns schnell den Wert des Timers direkt in den GSAs anzeigen . Ich werde das H2-Tag verwenden. Dann mache ich hier Timer ist der neue Wert des Timer-Safes. Lassen Sie uns es schnell in der App-Komponente rendern. Und hier müssen wir den Timer aus Komponenten importieren Benutzer den Timer direkt darunter mit einem Schrägstrich versehen. Rendern wir es hier. Wenn Sie die Anwendung speichern und den Browser auschecken, sehen Sie, dass der Timer der Anfangszustand oder der Anfangswert des Timers ist . Kehren Sie zum VS-Code zurück und lassen Sie uns den Timer schnell implementieren. Um den Timer einzurichten, müssen wir ihn direkt innerhalb der WHO implementieren. Also müssen wir oben den Effekt Hooke importieren. Komm her. Der Hook ist eine Funktion und dann müssen wir ihn aufrufen. Diese Funktion verwendet eine Fehlerfunktion als ersten Parameter und auch der zweite Parameter ist ein Abhängigkeitsarray. Und in diesem Fall werden wir ein leeres Abhängigkeitsarray haben. Wir sind also im Effekt, wo die Transformation stattfindet. Wir werden ein konstantes Intervall haben, das gleiche eingestellte Intervall. Und wieder müssen wir eine Fehlerfunktion übernehmen . Also müssen wir direkt in dieser Funktion den Timer aktualisieren. Wir tun das, indem wir die Setup-Funktion für einen Timer aufrufen, direkt innerhalb des regulären Timers des vorherigen Timers. Und der vorherige Timer Plus , der einfachste. Und wir möchten, dass diese jede Sekunde im Browser angezeigt werden . Also genau hier setzen wir hier ein Komma und induzieren es dann hier. Nachdem wir dies getan haben, müssen wir eine Rückgabefunktion implementieren , um das Intervall zu löschen. Rückkehr. Hier mache ich Claire Interval. Wir müssen Java bestehen. Wenn Sie den Browser speichern und auschecken. Kannst du sehen? Die größte Herausforderung in dieser Vorlesung besteht darin, den Timer auszuschalten, wenn auf die Schaltfläche geklickt wird. Lassen Sie uns also schnell ein Boot implementieren , um diese Funktionalität auszuführen. Wir müssen den Onclick angeben. Ein Klick auf diesen Button. Wir wollen den Timer ausschalten. Okay, lass uns das machen und sehen, wie es läuft. Wir rufen die saubere Mehrwertsteuer an und geben dann das Intervall ab. Hier. Im Rahmen des inneren Tests werde ich den Klick-Timer machen. Wenn Sie den Browser speichern und auschecken. Sie sehen, es heißt, das Intervall ist nicht definiert. Weißt du, warum? Geh zurück zum VS-Code und lass es mich dir zeigen. Das liegt einfach daran, dass das variable Intervall nur lokal begrenzt ist und sich auf die WHO bezieht. Wenn Sie das tun, kann das Intervall also nur gelöscht werden, oder? Worin wirkt wer? Wir möchten das Intervall löschen, in dem auf die Schaltfläche geklickt wird. Und sofort haben wir den Button implementiert. Schau, was passiert. Es heißt, dass das variable Intervall, das wir hier übergeben haben, nicht definiert ist. Aber sieh mal, wir haben es hier in Zeile sieben definiert. Das bedeutet also einfach , dass dieses Intervall nur direkt im Effekthook sichtbar ist. Um dieses Problem zu lösen, müssen wir die Bedienung vereinfachen. Href, dessen Technik normalerweise verwendet wird, kann auch verwendet werden, um einen veränderlichen Wert zu speichern , der bei einer Aktualisierung kein erneutes Rendern verursacht. Auch hier ist der Benutzer f eine Funktion, also müssen wir ihn wie gewohnt aufrufen. Aber zuerst muss es in einen Club importiert werden. Hier oben rufen wir den Benutzer F auf. Jetzt machen wir const, ref in Dava und weisen es so zu. Die nächste Zeile besteht also darin, alle Intervalle durch Referenzpunktstrom zu ersetzen . Komm her, wir müssen diese Variable löschen. Dann mache ich Intervallpunkte. Aktuelle, einfachste Daten. Denken Sie daran, dass wir alle Intervalle ersetzen müssen . Und hier haben wir eine , die an die Clay Interval Methode weitergegeben wird. Ersetze es so. Hier haben wir noch einen. Wenn Sie die Anwendung speichern, nehmen wir den Browser heraus. Probieren wir es aus, indem wir auf Timeout deklarieren, abstimmen klicken. Schau es dir an. Jetzt ist es uns gelungen , den Timer zu löschen. Wenn wir auf dieses Board klicken, wird das Intervall gelöscht und dann stoppt der Timer. Das ist also ein weiteres Problem , das der Benutzer, wenn es löst. 53. 51 Yum Eat Website erstellen (react: In dieser Vorlesung beginnen wir mit dem Aufbau der Website. Und wie immer beginnen wir bei Null, indem eine neue React-Anwendung auf dem Desktop installieren. Lassen Sie uns schnell einen neuen Ordner namens Yom Eats erstellen. Das Nest und die Linie bestehen darin, den Ordner per Drag & Drop in den VS-Code zu ziehen. Also öffne schnell den VS-Code. Fahren Sie fort, um den Ordner in den VS-Code zu ziehen. Lassen Sie uns maximieren. Dann werde ich die Beispielseite verlassen. Öffnen Sie das integrierte VS Code-Terminal. Und ich werde Control und Bark Tea machen. Oder Sie finden es oben rechts hier, das ist Terminal und dann neues Terminal. Wir werden also den Befehl MUX verwenden, um eine neue React-App zu erstellen, ohne sie auf unserer MP x Dash React-App des Systems installieren zu müssen . Und dann wollen wir es in einem Verzeichnis namens Klein's installieren . Drücken Sie die Enter-Taste , um es abfeuern zu lassen. Oh, die Installation von React js ist im Gange. Und während die Installation läuft, möchte ich Ihnen ein CSS-Utility-Framework vorstellen. Dieses Framework ist Tailwind. Das Tailwind-Framework macht es sehr einfach, Ihre Anwendung zu stylen. Dann können Sie auf Erste Schritte klicken, um zu sehen , wie Sie einen initialisierten Rückenwind installieren. Hier der Rat, das zu installieren, Sie werden npm install dash d, tailwind CSAs ausführen. Und wenn du dann initialisieren willst, machst du NP x Tailwind CSS. Es braucht. Vorerst überspringen wir das Tailwind-CSS. Ich konzentriere mich auf die React-Installation. React wurde erfolgreich installiert. Der nächste Schritt ist also , den Frontend-Dev-Server zu starten . Gehen Sie zum Terminal. Zuerst müssen wir uns die D-Behauptungen ansehen. Dann mache ich npm starts. Und hier ist die React-Beispielseite. In Ordnung, jetzt sind wir mit der Installation von React js fertig. In der nächsten Vorlesung werden wir das Standardwerk bereinigen , indem wir unnötige Dateien löschen, die für diesen Zweck nicht benötigt werden. Und danach werden wir die Komponente auf der Grundlage der Anwendung erstellen Komponente auf der Grundlage , die uns angezeigt wird. Wir sehen uns in der nächsten Vorlesung. 54. 52 boiller aufräumen: In Ordnung, lassen Sie uns die Kesselplatten reinigen. Es bedeutet also einfach, dass wir unnötige Dateien löschen möchten , die wir nicht benötigen, um die Anwendung zu erstellen. Öffnen Sie also schnell den Client SRC. Hier. Das Setup test.js benötigen wir nicht. Also drücke ich die Befehlstaste auf meiner Tastatur und drücke dann die Maus, um auszuwählen, während ich die Befehlstaste gedrückt halte Wir möchten die restlichen nicht benötigten Dateien mehrfach auswählen . Also wähle ich den Bericht, Web-Vetos, Logo Punkt SVG, up test dot js und zuletzt up dots CSAs aus. Rechtsklick. Lass es uns schnell in den Müll werfen. Und wenn das passiert, wirst du diesen nervigen Fehler hier sehen, oder? Innerhalb der Terminalgruppen. Wir haben die App CSS ausgewählt, aber es scheint, dass etwas schief gelaufen ist. Also muss ich es wieder löschen , weil es nicht benötigt wird. Ja, die App Dot CSS ist weg. Und bitte lösche die App Js nicht. Ordnung, also der Rest dieser Dateien hier In Ordnung, also der Rest dieser Dateien hier ist extrem wichtig für die Erstellung unserer Anwendung. Also öffne die App, Juden. Und hier beschwert es sich, dass der Logo-Punkt SVG nicht gefunden wird. Vermassel es. Hier ist der Logo-Punkt SVG und dann ist hier das App-Punkt-CSS. Und natürlich haben wir es einfach gelöscht. Also, was ich jetzt tun werde, ist 1-2 zu markieren und es dann abzuwischen. Scrollen Sie nach unten. Okay, ich denke, vorerst ist alles in Ordnung. Die nächste Begriffszeile besteht darin, vom ersten Header-Tag bis zum abschließenden Header-Tag hervorzuheben , da wir hier keine dieser Elemente benötigen , wischen Sie es ab. Befehl S, um ein unbestimmtes All zu speichern. Es heißt, dass in dem Bericht auch die Vitalwerte fehlen. Und hier finden Sie es. Indexpunkt js. Hier. Zuerst müssen wir die Eingaben in den Zeilen fünf löschen. Nachdem das erledigt war, wurde es hier aufgerufen. Wir müssen es auch löschen. Jetzt denke ich, dass unsere Bewerbung nett wäre. Schauen Sie sich schnell den Browser an und sehen wir uns das Endergebnis an. Jetzt haben wir einen leeren Bildschirm, also ist dies genau das erwartete Ende. In der nächsten Vorlesung werden wir unsere Komponenten auf der Grundlage der Beobachtungen aus dem Yom-Projekt erstellen . Wir sehen uns dann. 55. 53 Komponenten erstellen: Bevor wir mit der Erstellung der Komponenten fortfahren, ist es äußerst wichtig, die Website zu beobachten , um zu verstehen, wie sie angesehen wurde. Lass uns schnell erwachsen werden. Schau es dir an. Dieses Design ist fantastisch, glaub mir. In Ordnung, also lasst uns anfangen. Wenn Sie nun auf den Bildschirm schauen, werden Sie feststellen, dass wir die Navigationskomponente, die Wanne, genau hier haben , zu der auch der Young gehört, sein Logo hier drüben, die kostenlose Lieferung. Und in der Mitte haben wir das Suchfeld. Auf der rechten Seite des Bildschirms. Wir haben auch die Karten, ja, ich hier drüben, wir haben das Symbol, um die Navigation umzuschalten. Wenn du klickst. Kannst du das sehen? Wunderschön? Und wir haben auch das X-Symbol für Hinweise. Direkt unter den Hauptnavigationskomponenten sehen Sie die Heldenfirma wir die wunderschöne Folie hier haben. Kannst du sehen? Und direkt unter der Hero-Komponente haben wir die Komponenten für die schnelle Lieferung. Nachfolgend haben wir auch die Top-Peak-Komponenten. Mit diesen schönen Slidern für die Show werden Sie es lieben. Und unten haben wir die Mühlenkomponente. Und hier ist die Komponente „ Trendkategorien“. Und hier haben wir die Newsletter-Komponenten. Direkt darunter befindet sich die Lebensmittelkomponente. Und jetzt ist es uns gelungen die Anwendung in ein kleineres gekapseltes Segment namens Komponenten zu unterteilen. Gehen wir also zu VS Code und erstellen Sie diese Komponenten. Lassen Sie uns das für einen Moment herunterziehen. Wenn der SRC auf diese Weise einen neuen Ordner namens components erstellt. Also werden wir direkt in diesem Verzeichnis die Blumen erstellen und haben wir die Top Nav-Komponente. Ich werde Top Nav-Dot G ist machen. Und bis ganz nach oben. Jetzt haben wir die Heldenkomponente, oder wir können sie auch die zukünftige Gegenstandskomponente nennen. Ich finde, das klingt besser. Also werde ich Few Child Dots, Jeers machen. Und danach haben wir die schnelle Lieferung. Wir haben die Top-Picks-Komponente, die Mahlzeiten-Komponente, meal ab.js, Trending Categories, und ich nenne sie Kategorien Punkt js. Wir haben die Newsletter-Komponente. Schließlich die Lebensmittelbestandteile. Also diese Anleitung zeigt, wie man eine Anwendung wie ein Profi erstellt. Wenn Sie die Anwendung beobachten, zerlegen Sie die Website zunächst in kleinere gekapselte Segmente, die als Komponenten bezeichnet werden. Und natürlich sollten Sie inzwischen wissen, dass die Komponente der Grundbaustein jeder React-Anwendung ist . Nachdem wir also alle Komponenten erstellt haben, in der nächsten Vorlesung werden wir in der nächsten Vorlesung PTI Wind installieren. 56. 54 Tailwind: Lassen Sie uns mit der Installation und Konfiguration von Tailwind fortfahren. Klickt auf die Schaltfläche Get Started. Hier ist der Rat. Also machen wir zuerst npm install dash d, Tailwind CSAs. Also klicke ich einfach hier, um zu kopieren. Gehen Sie zurück zum VS Code Terminal und stellen Sie sicher, dass Sie sich im Client-Verzeichnis befinden. Fügen Sie es hier ein und es wird verwendet, um den Rückenwind zu initialisieren. Lass mich es dir hier zeigen, oder? Wenn Sie also auf dieses Kopiersymbol klicken, kopieren wir den Stand des Befehls. Also schnell die Enter-Taste ketonieren, um es Fire oder Tailwind installiert zu bekommen , subtrahiert Form. Lass es uns überprüfen. Hier drüben. Ich werde die Komponenten zusammendrücken. Öffnen wir die Datei package.json. Und wenn du nach unten scrollst , ist hier der Rückenwind. Perfekt. Also genau hier siehst du die Tailwind Dot Config-Datei. Gehen Sie zurück zum Ratschlag dem Nest, um diese hier zu kopieren und in das Inhaltsfeld einzufügen. Also, was ich jetzt tun werde ist zurück zum Desktop zu gehen, der geöffnet ist. Und hier finden Sie die Materialien oder die Lebensmittelmaterialien. Öffnen Sie den Code **** power. Jetzt kopiere ich dieses Modul hierher. Also werde ich meine Parabel hervorheben und sie dann ersetzen. Speichern. Die nächste Zeile besteht also darin, diesen Ratschlag hier zu befolgen, markieren und dann zu kopieren. Oder Sie können auf dieses Symbol hier klicken, um es zu kopieren. Komm zurück, öffne den Indexpunkt CSAs-Highlights, wische ihn ab und füge ihn dann hier ein. Nachdem wir dies getan haben, ist es uns gelungen, den Tailwind einzurichten. Also jetzt möchte ich ein Basis-CSS für das Bootfahren erstellen, okay, also wird es eher dem globalen CSS ähneln , sodass alle Proteine in der Abrogation dem gleichen Muster folgen. Und das tun wir, indem wir eine Ebenenbasis hinzufügen. Dann haben wir hier unten, richtig, wir sind unten. Ich werde mich bewerben. Also werden wir den Stil Storyboard anwenden. Habe einen Block mit abgerundetem Strich x L gekauft . Also wenden wir eigentlich nur den Randradius auf das Boot an. Okay, das wird unsere Proteine also ein bisschen kurvig machen . Und dann wollen wir jetzt eine Polsterung von der X-Achse aus anwenden. Also mache ich p x. Das beinhaltet eigentlich die Polsterung von links nach rechts, okay? Also, was ist die X-Achse? Und ich werde es mit fünf Pixeln machen. Das PY steht also für die Polsterung oben und unten. Also oben und unten werden wir mit Polsterung eins haben. Dadurch wird also tatsächlich Platz oben, unten und unten geschaffen . So einfach ist das. Und falls Sie sich fragen, warum ich all diese Details hier habe, liegt das einfach daran, dass ich eine sehr intelligente Erweiterung namens Tailwind IntelliSense installiert habe eine sehr intelligente Erweiterung . Lassen Sie mich Ihnen jetzt zeigen , wie das geht. Öffne die Erweiterung, dann machen wir uns auf den Weg zu unserem Wind IntelliSense hier. Ist es an meinem Ende? Ich habe es schon installiert. Was Sie also an Ihrem Ende tun werden , ist auf die Schaltfläche „Installieren“ zu klicken. Genau da. Sie werden installieren statt deinstallieren sehen. Klicken Sie am Ende auf die Schaltfläche „ Installieren“ , um diese leistungsstarke Erweiterung zu installieren. Es ist in der Tat eine sehr starke Spannung und wird sicherlich hilfreich sein. Okay, mach es zu. Und jetzt, wenn ich mit dem Mauszeiger auf die Klasse fahre , siehst du genau so das CSS-Äquivalent. Im Grunde haben wir hier also den Grenzradius auf 0,75 rem angewendet . Und hier ist das linke Muster 1,25 rem. Das Muster rechts ist 1,25 rem. Wenn Sie den Mauszeiger auf diese bewegen, beträgt die Oberseite des Musters wiederum 0,25 rem und die Unterseite der Polsterung 0,25 rem. Das liegt einfach daran, dass ich eine sehr leistungsstarke Erweiterung namens Tailwind IntelliSense installiert habe. Das gibt dir also tatsächlich das CSS-Äquivalent von Tailwind. Und das passiert, wenn Sie den Mauszeiger auf die Hilfsklassen bewegen. ZB. Ich schwebe mit dem Mauszeiger auf diese Klasse hier drüben. Kannst du sehen, was wir hier einfach gemacht haben , ist die Randfarbe zu implementieren und in diesem Fall ist es Schwarz. Das ist jetzt aus. Und in der nächsten Vorlesung beginnen wir mit der Arbeit am Top Nav-Schüler. 57. 55 TopNav: In dieser Vorlesung werden wir mit der Top Nav-Komponente fortfahren. Und hier beginnt der Spaß. Also richtig, das Komponentenpaket zu bestellen. Öffnen wir die oberen linken Tata Js. Vorerst. Lassen Sie uns das Terminal und dann den Befehl B herunterfahren, um den Explorer zu schließen. Unsere AFC zur Generierung der React-js sind funktionale Komponenten. Perfekt. Lassen Sie uns diese Komponente schnell direkt in der App rendern und verspotten Sie den Befehl P, um dieses kleine Suchfeld oben anzuzeigen. Und ich werde einrichten, dass G geöffnet ist. Also direkt im Div mit dem Klassennamen AB rendern wir jetzt den oberen Teil, schließen ihn mit dem sich selbst schließenden Tag und Tech Load. Das Oberteil wird jetzt automatisch in eine Wanne importiert. Also, wenn du dich fragst, wie das geht, okay, lass uns bei Null anfangen und es abwischen. Und ich werde Top Nav aus Punkt- und Schrägstrich-Komponenten mit Schrägstrich machen . So einfach ist das. Kehren wir zur Top Nav-Komponente zurück. In Ordnung, also geben wir diesem Div einen Klassennamen. Dann geben wir die maximale Breite an. Machen wir es mit einem Abstand von 15, 20 von links und rechts. Lass es uns automatisch machen. Und wir lassen es anzeigen, anpassen, Inhalte ausrichten und dazwischen Leerzeichen setzen. Und dann richten wir die Elemente dass sie die Polsterung zentrieren. Wir werden es für die Einfachsten machen, die richtig sind. Ich weiß, dass jemand neugierig auf all diese Begriffe ist , weil einige von Ihnen, dies wird mittags erscheinen, aber unvorsichtig. Nach meiner großartigen Erklärung würdest du es auf jeden Fall gut genug verstehen. Was hier also passiert, ist, dass wir diesen Div erhalten, eine maximale Breite von 15, 20. Und machen Sie sich Notizen, so geben Sie einen benutzerdefinierten Wert an. Also kann ich das so abwischen, und dann können Sie den tatsächlichen Klassenwert angeben. Wenn Sie jedoch einen benutzerdefinierten Wert angeben möchten, öffnen Sie den Block wie folgt und machen dann 15, 20. Wenn ich also jetzt mit der Maus auf die Klasse fahre, wird das tatsächliche CSS-Äquivalent angezeigt , das hinter den Kulissen funktioniert. Lass es mich dir zeigen, ich hoffe auf die maximale Breite, dann haben wir hier die maximale Breite 15, 20. Wenn ich auf dem MX-Auto schwebe. Können Sie hier sehen, dass der Rand links für automatisch und den Rand rechts für automatisch ist. Das MX impliziert also einfach einen Rand auf der X-Achse, was eine Schauspielerin sagt, Rand von links nach rechts ist. Und hier haben wir es Display Flex. Und ich weiß, dass Sie sich nicht wundern werden, dass wir das Display hier nicht erwähnt haben. Wenn Sie jedoch mit der Maus auf den Klassenfluss fahren, sehen Sie, dass sich das Display biegt. Und hier begründen Sie den inhaltlichen Abstand dazwischen. Lass es mich dir zeigen. Können Sie sehen, dass der Inhaltsabstand zwischen den Elementen gerechtfertigt und die Elemente zentriert ausgerichtet werden und der Abstand eine Zügel ist. Aufgrund der Einfachheit dieser Erklärung weiß ich, dass Sie sie jetzt besser genug verstehen werden . Also lasst uns anfangen. Der obere Nerv ist in drei Stellen unterteilt. Wir haben die linke Seite, die Mitte und die rechte Seite. Also die linke Seite, lass es mich dir schnell zeigen. Hier. Auf der linken Seite haben wir den Hamburger, den Jungen, sein Logo und die kostenlose Lieferung. Und in der Mitte haben wir das Suchfeld. In der oberen rechten Ecke haben wir die Karten. Also lasst uns auf der linken Seite arbeiten. Wir werden hier ein Div mit dem Klassennamen haben und mit dem Klassennamen schreiben, wir werden einen Display-Flex haben, Elemente ausrichten, zentrieren. Leute. Etwas, auf das ich Sie wirklich aufmerksam machen möchte , ist, dass Rückenwind Eileen gemischt hat, sehr einfach. Ehrlich gesagt, am Ende dieses Kurses wirst du Tailwind immer benutzen wollen, glaub mir. Jetzt haben wir ein weiteres Div mit dem Klassennamen von Causal Knowledge Pointer. Also richtig, in diesem Div werden wir das Symbol rendern. Und dafür müssen wir das React-Icon installieren . Und jetzt werde ich es tun. Npm installiert die React-Dash-Symbole. Einfach so. Keton, die Enter-Taste. Okay, also React-Icons installiert, subtrahieren, fallen. Ich meine, sicher, du öffnest die Datei package.json und hier ist sie. Schließ es. Also werden wir direkt in diesem Div ein Symbol namens Outlined Menu rendern. Aber bevor wir das tun, müssen wir es zuerst aus den React-Symbolen importieren. Also werde ich Importe machen. Ich habe das Menü anhand des Schrägstrichs der React-Symbole skizziert. Wir haben zwei Suffixe mit KI. Denn hier stellen wir ihm KI voran und dann müssen wir es auch hier mit einem Farbstoff überziehen . Also werden alle AI-bezogenen Icons hier importiert. Cool. Also ich denke, wir sollten das jetzt tun , damit wir in Zukunft keine Zeit damit verschwenden müssen. Hier werde ich es machen. Ich habe solche ruhigeren Gliederungshinweise skizziert. Das Schließsymbol für das Menü. Lass mich dir schnell diesen Kerl hier zeigen. Das ist also der Typ, den wir gerade importiert haben, das ist das KI-Offline-Menü. Und das ist die Gliederung, dieser Typ, ich weiß, dass du all diese Tabs verstehst. Und zu guter Letzt Feldtag. All dem ist also KI vorangestellt. Und das ist der Grund, warum wir es mit einer Nische versehen haben. Lassen Sie uns nun das von mir skizzierte Menü ausführen. Geben wir ihm eine Größe. Ich sage 25. Sicher. Von hier aus starten wir mit npm das Projekt und stellen sicher, dass Sie diese Komponente direkt in der App rendern. Ups, tut mir leid Leute, der Befehl enthält einen Fehler. Also ich denke, das wird diesmal funktionieren. In der oberen linken Ecke des Bildschirms sehen Sie das Übersichtsmenü. Und dieses Symbol hier wird verwendet um die Seitenzählung umzuschalten. Gleich nach dem Abschluss-Div. Wir werden eine Kopfbedeckung haben und ich nenne, dass diese Rechte im Hippodrom liegen. Wir werden Spam bekommen. Spam. Ich gehe essen gehen. Geben wir ihm also den Stil className, test, dash nach Excel. Wir spezifizieren also im Grunde den Formularstil. Und wenn Sie den Mauszeiger auf die Klasse bewegen, wird Ihnen das CSS-Äquivalent angezeigt , das hinter den Kulissen läuft. Und bitte, wenn Sie Styles mit Tailwind anwenden, müssen Sie das Zitat nicht überschreiten. Also alles, was du tun wirst, wird innerhalb der Codes stehen. Klingt gut, oder? Wunderschön. Auf einem kleineren Gerät wie m möchten wir, dass der Test in Excel erscheint. Also implementieren wir im Grunde den Breakpoint hier drüben. Auf einem größeren Bildschirm wird der Test also für Excel angezeigt, so einfach ist das. Dann wird hier die Polsterung links und rechts zwei sein. Also, wenn du sparst, geh zurück nach Brasilien. Lass es mich dir zeigen. Jetzt. Wenn ich drücke, siehst du, dass der Test kleiner wird. Wenn Sie also an einem bestimmten Punkt erhöhen , wird dieser Test immer größer. Das wird also groß, mittel und das ist ein kleineres Gerät. Beobachte es noch einmal. Auf einem kleineren Gerät sieht der Test also so aus. Auf Medium wird die Schriftgröße zunehmen. Kannst du auf einem größeren Gerät sehen, dass es zunehmen wird. Schon wieder. Schau es dir an. Profit Leute. Ich finde Rückenwind also extrem genial und erleichtert sogar die Arbeit. Gut. Also gleich nach dem abschließenden Headtag werden wir ein Div haben. Geben wir ihm einen Klassennamen. Und richtig, innerhalb der Klasse werden wir es stilisieren, indem die Nutzenklassen im Rückenwind nennen. So funktioniert Tailwind zumindest. Also hier werden wir es auf einem kleineren Gerät heizen lassen . Okay, also auf einem großen Bildschirm, normale Displaybiegung, Elemente mittig ausrichten. Die Hintergrundfarbe wird grau sein. Geben wir also eine Zahl an , damit es tatsächlich hinzugefügt wird. Sollte ich die Dicke der Farbe sehen oder so? Dann wollen wir, dass es abgerundet wird. Lauf, das wird voll sein. Die Polsterung wird also eins sein. Die Tests. Machen wir es zu 14 Pixeln. Und bitte, hier müssen wir auch ein solches Pixel hinzufügen. Hey, bewege den Mauszeiger darauf und sieh es dir an. Jetzt haben wir die maximale Breite von 15, 20 Pixeln, schließen Sie den Unterschied. Lassen Sie mich jetzt erklären, was vor sich geht. Also hier werden wir ein P-Tag haben und ich werde drei machen. Noch ein P-Tag hier drüben, Duplikat. Und wir werden eine solche Lieferung haben. Also unter einem kleineren Gerät wollen wir nicht sehen, dass dieser Typ okay ist, aber auf einem größeren Bildschirm wollen wir sie hier oben sehen. Okay, lass es mich dir schnell zeigen, wenn du im Browser speicherst. Hier ist es? Also wenn ich den Bildschirm verkleinere, mal sehen, kannst du das auf einem kleineren Gerät sehen, verschwindet er. Aber wenn Sie auf einem größeren Bildschirm die Ansicht vergrößern, sollten wir sehen können, dass diese tatsächlich dafür sorgen, dass alles responsiv aussieht. Und natürlich würde ich mich sehr freuen, wenn Sie diese Anrufe auch bewerten und überprüfen könnten . Teile diese Kosten mit deinen Freunden , weil es hilfreich sein wird. Also lass uns das P-Tag kostenlos dialysieren, ich mache ClassName. Die Hintergrundfarbe sei G Dash, Orange, Dash 700, weil Frauen, die Dicke der orangen Farbe eigentlich sehr gut sein soll . Die Testfarbe wird weiß sein. Testet strichweiß. Der Hintergrund wird abgerundeter Narr sein. Die Polsterung ist auf die Probe gestellt. Wir wollten einsteigen. Und mach dir Sorgen, ich werde all diese Dinge in einem GPA erklären . Und auch hier geben wir ihm einen Klassennamen. Die Polsterung wird diesem Test standhalten , sie wird gebeugt werden. Speichern. Und mal sehen, was wir im Browser haben. Schau es dir an. Kannst du das sehen? Jetzt haben wir das Logo und die kostenlose Lieferung in einem sehr perfekten Zustand. Die habe ich geliebt. Lassen Sie mich nun erklären, was unter der Motorhaube passiert. Hier haben wir einen ClassName und auf einem kleineren Gerät werden wir all diese P-Tags verstecken. Auf einem größeren Bildschirm möchten wir jedoch, dass Elemente mit flexibler Ausrichtung in der Mitte angezeigt werden. Der Hintergrund der Formulare wird großartig sein. Der abgerundete Fuß wird den Ofen also zu einer Art weltlicher Einrichtung machen . Lass mich dir das hier zeigen. Und wenn Sie den Mauszeiger darauf bewegen, beträgt der Randradius 999 Pixel, was eigentlich 100 Prozent sein könnte. Und die Polsterung beträgt 0,2. Der Rem-Test ist, dass 14 Pixel richtig sind. Jetzt sind wir mit der linken Seite fertig. Fahren wir mit der Suchleiste in der Mitte fort. Gleich nach dem Abschluss-Div. Wir werden ein weiteres Div mit dem Klassennamen haben. Wir geben ihm eine Hintergrundfarbe von grau gestrichelt 200. Das würde also tatsächlich den Wert des Graus angeben, okay, wie grau es erscheinen wird. Solche Sachen. Abgerundetes Essen. Inzwischen solltest du all diese Dinge verstehen. Zeigt Biegung, Ausrichtung, Zentrierung und Muster von der X-Achse aus an, was links und rechts beinhaltet. Wir werden zwei draus machen. Und dann die Breite, wir werden unsere eigene benutzerdefinierte Breite haben. Also wann immer du so etwas machst, bedeutet das, dass du deine eigenen benutzerdefinierten Dinge implementieren willst , z. B. die linke und rechte Polsterung, ich kann entscheiden, es so zu machen eine benutzerdefinierte Weise, die ich machen kann, um Bilder zu haben. Wenn du so darauf fährst, siehst du, aber links. Also wenn Pixel richtig gepolstert werden, um Pixel zu haben, entscheide ich mich aber, das nicht zu tun. Ich werde es so belassen. Wann immer Sie also Ihren eigenen Stil haben möchten, können Sie die eckige Klammer verwenden. Jetzt ist die Polsterung links 0,5 rem Button, rechts ist 0,5 rem. Also die Breite 200 Pixel. Auf einem kleineren Gerät wird die Breite 100 Pixel betragen. Auf einem großen Gerät wird die Breite 500 Pixel betragen. Ups, sieh es dir an. Nett. Lass uns das Div schließen. Genau hier. Wir nehmen den Umriss, denk daran, dass wir ihn aus Riad importiert haben . Ikonen. Einfach markieren und kopieren. Und hier rendere ich das selbstschließende Etikett näher gebe ihm eine Größe von 25. Speichern Sie, schauen Sie sich den Browser an. Nun, kannst du es sehen, lass es mich dir zeigen. Hier, ist es? Das Problem ist jetzt jedoch, dass es an der oberen rechten Ecke des Bildschirms ausgerichtet wurde . Also werden wir einen Weg finden, es an der Mitte auszurichten. Auch hier direkt in der Div. Wir werden ein Eingabe-Tag mit einem Klassennamen haben und dann wird die Hintergrundfarbe lauten. Transparent, P-Strich T2. Natürlich weißt du, was es ist. Die Breite wird lächerlich sein. Damit werden tatsächlich 100 Prozent der Breite angegeben. Lass es uns rausnehmen. Schau es dir an. Kannst du sehen, wenn du mit der Maus auf die Klasse fährst, wirst du das eigentliche CSS sehen , das hinter den Kulissen läuft. Und es heißt, dass die Breite 100% beträgt. Und bitte, wenn diese ganze Leiste bei Ihnen nicht funktioniert, liegt es einfach daran, dass Sie den Tailwind IntelliSense nicht installiert haben. Gehen Sie also unbedingt zu den Erweiterungen. Dann installiere Tailwind Intelligence. Hat es. In Ordnung, gut. Übrigens habe ich dir in der letzten Vorlesung beigebracht, wie das geht . Lass uns weitermachen. Also die Fokusskizze, lassen Sie mich Ihnen etwas zeigen, bevor wir das tun. Speichern. Okay, lass es uns so im Browser schließen. Hier ist es? Kannst du sehen, wenn ich meine Maus direkt in das Eingabe-Tag setze, wirst du diese Gliederung sehen. Das ist es also, was wir nicht wollen. Wenn ich rausklicke, siehst du, dass es weg ist. Und wenn ich dann reinklicke, siehst du die Gliederung. Lass es uns schnell ausziehen. Also werde ich den Focus Outline machen. Es wird bekannt sein. Speichern Sie Jakarta, den Browser. Wenn Sie darauf klicken, sehen Sie, dass es weg ist. Perfekt. Okay, ich denke , wir sollten es mit dem selbstschließenden Etikett schließen. Dadurch sieht der Code etwas sauberer aus. Und hey, wir machen den Eingabetyp als Platzhalter für den Schnelltest. Wenn Sie solche Mahlzeiten im Browser speichern, können Sie feste Mahlzeiten sehen? Und das ist das Symbol, das wir dort ausleihen, das ist das Symbol für die Gliederungssuche. Wir müssen die Kürzungen umsetzen. Also, gleich nach dem letzten Tauchgang hier, werden wir eine Bootstour machen. Geben Sie den Clusternamen, der stilisiert werden soll, als G-Strich, Orange, Strich 700 ein. Das hilft also tatsächlich den Reichen, für die die Farbe dicker aussieht oder so. Der Test wird weiß sein. Wir möchten, dass es richtig versteckt ist, in einem kleineren Gerät und dann in einem mittelgroßen Gerät wie dem iPad. Okay? Wir werden die Elemente zentriert ausrichten. Die obere und untere Polsterung. Zu. Abgerundet. Wir werden dafür sorgen, dass das Essen direkt im Körper zirkuliert. Und ich werde Karten machen, wenn du speicherst und den Browser auscheckst. Und jetzt ist es uns gelungen das Suchfeld ein wenig in die Mitte zu schieben. Und dann wird der Schnitt an der oberen rechten Ecke des Bildschirms ausgerichtet. Das Nest und die Limette sollen das Schnittsymbol direkt in den Körper einfügen . Wie machen wir das jetzt? Okay, ich mache das hier, wir werden den Tankkarten-Treibstoff verwenden. Geh zur obersten Sache. Wir müssen auch dieses Eingabefeld eingeben, Feld ausschneiden. Und bitte frag mich nicht, woher all diese Namen kommen. Also werden wir es aus den React-Dash-Symbolen importieren. Dann werden wir es mit BAs zum Vorschein bringen. Lassen Sie uns also schnell alle Symbole importieren, die sich unter BAs befinden. Und ich denke, es ist noch einer. Hey, ich werde BS Person machen. So einfach ist das. Stimmt es? Wir sind unten. Wir werden BS-Treibstoff rendern und mit dem selbstschließenden Etikett näher an den Kraftstoff herankommen. Und dann geben wir die Größe an. Einfach so. Speichern Sie im Browser. An diesen können Sie sehen, dass alles wie erwartet aussieht. Also lass es mich dir zeigen. Wenn ich jetzt den Bildschirm minimiere, lass mich ihn herunterdrücken, um bestimmte Breakpoints zu erhitzen. Siehst du, kannst du auf einem kleineren Gerät sehen, wir wollen nicht, dass es auftaucht. Jetzt scheint die Katze gut zu sein. Wir haben unsere Ziele tatsächlich erreicht, und das ist in Ordnung. Die nächste Termlinie besteht also darin, das Side Draw zu implementieren. Wenn ich also auf diese Schaltfläche klicke, wird die Zeichnung ausgeblendet. Und wenn ich auf das Symbol klicke, zeichnen sie auch. Wir schließen. Lass uns das in der nächsten Vorlesung machen. 58. 56 Seitennavigation: Die Absicht hier ist also, auf das Hamburger-Menü zu klicken , um die Seitennavigation zu öffnen. Aber im Moment, wenn Sie darauf klicken, passiert nichts. Kannst du höher sehen, oder? Lassen Sie uns also schnell den VS-Code hinzufügen , um diese Funktionalität zu implementieren. Um fortzufahren, müssen wir zunächst die notwendige Zustandsvariable deklarieren, die verwendet werden soll. Also werde ich Const Side Enough machen, ruhiger legt jetzt Seite an und erwerbe den US-Staat. Und das wird eine boolesche Operation sein. Der Anfangszustand wird also falsch sein. Gut, nachdem wir das getan haben, lassen Sie uns schnell dieses Symbol hier implementieren . Also, wo haben wir es? Hier ist es, das AI-Menü. Und dann werden wir es in diesem Div-Wrapper-Div für das Gliederungsmenü implementieren . Wir werden onclick spezifizieren. Ein Klick auf dieses Symbol. Wir wollen die Seite jetzt öffnen, okay, also im Grunde ändert sie den Status von falsch zu wahr oder falsch zu wahr und falsch zu wahr und falsch zu wahr. Lass es mich dir schnell zeigen. Jetzt rufen wir die Setup-Funktion auf , um den Anfangszustand zu aktualisieren. Und es wird auf die Seitennavigation gesetzt. Ich werde nicht genug zitieren. Okay, also klicken Sie auf das Symbol hier. umgestellt Wenn Sie erneut darauf klicken, wird der Anfangszustand auf „Zwang“ Er wird auf „Durch“ umgeschaltet . Lassen Sie mich Ihnen zeigen, was ich mit dieser console.log Seite meine. Wenn Sie nun Ventrikel zum Browser sagen und stellen Sie sicher, dass die Anwendung bereits läuft. Genau hier. Ups, da steht, dass die Seite jetzt nicht definiert ist. Genau hier liegt das Problem. Hier ist ein Tippfehler aufgetreten. Das soll konstant sein, und ich weiß, dass einige von Ihnen diesen Fehler schnell erkennen und ihn an Ihrer Seite beheben können , wenn Sie im Browser speichern oder Command I verwenden, um die Konsole zu öffnen. Wenn ich jetzt auf das Menü klicke, wird der Anfangszustand geändert, der stimmt. Jetzt wird der Anfangszustand wahr, wenn ich erneut auf das Menü klicke, es wird die Kraft ändern. Im Grunde wechseln wir also von falsch zu wahr oder falsch zu wahr. Gut. Lass uns weitermachen. Okay, das Beste und Lernen ist also, ein Hintergrund-Overlay zu erstellen , weil wir wollen, dass alles professionell erscheint . Also gleich nachdem er sich eingekauft hat, werden wir einen weiteren div ClassName haben. Dann gebe ich ihm eine Hintergrundfarbe von Schwarz und teile dann das Schwarz durch 60 und mache mir Sorgen, du wirst auf jeden Fall das Ergebnis sehen. Die Position wird festgelegt, die Breite, machen wir sie zu 100%, was voll ist. Der Kopfbildschirm. Der Z-Index, weil wir möchten, dass er oben erscheint. Okay, es wird als Overlay gespeichert. Also müssen wir den Z-Index angeben. Stift von oben ist Null und von links ist Pfeil. Schließen Sie den DV, wenn Sie den Browser speichern. Nun, hier ist das Ergebnis. Keine Sorge, wir werden es kontrollieren. Wir werden es also kontrollieren, indem wir eine Bedingung stellen. Wenn also genug wahr ist, wollen wir das Overlay zeigen. Jetzt. Wir wollen nichts zeigen, was einfach bedeutet, dass wir das Overlay anzeigen wollen, wenn wir so auf das Hamburger-Menü klicken das Overlay anzeigen wollen, wenn wir so auf das Hamburger-Menü . Wenn also auf das Hamburger-Menü geklickt wird, zeigen wir das Übermaß an. Wir werden es nicht anzeigen lassen. Lass es mich dir schnell zeigen. Jetzt um JavaScript zu schreiben. Bei Jesus müssen wir die geschweifte Klammer öffnen. Dann mache ich es, wenn Sudden Nerv stimmt. Wir wollen auf dieser DVD hier zeigen, was die Overlay-Highlights sind. Schneide es ab und öffne dann die Klammern, weil wir ein UI-Layout erwarten, füge ein anderes wie dieses ein. Wir werden nichts zeigen. Speichern Sie und lassen Sie uns sehen, ob es funktioniert. Erneut laden. Kannst du sehen? Wenn ich also klicke, erscheint genau das wie man eine Bedingung für die übertriebene Sorge setzt, dass alles, was jetzt nach oben geht, Gestalt annehmen wird . In Ordnung, als Nächstes müssen Sie die Seitennavigation selbst erstellen. Also hier werden wir ein Div mit dem Klassennamen haben und schreiben wo der Clustername es stilisieren muss. Also hier schwebte der Umsatz an einer festen Position von oben, Null, von links, Null. Die Breite wird, geben wir eine benutzerdefinierte Breite an, 300 Pixel. Bildschirm. Wenn wir also auf Bildschirm klicken , bedeutet das einfach, dass die Höhe 100 ist. Wenige Höhen. Schau es dir an. Bg wird weiß sein, was der Hintergrund ist. Der Z-Index ist zehn. Wir wollen also, dass es sowohl rein als auch raus animiert wird. Geben Sie dafür die Dauer an. Und lass uns 300 draus machen. Wir können 200 machen, wenn Sie im Browser speichern. Hier ist es. Kannst du sehen, dass das bereits Gestalt angenommen hat, aber im Moment sieht es so aus, als wäre es am Bildschirm befestigt. Es ist nicht beweglich. Siehst du? Okay, lass uns weitermachen. Lass es mich dir zeigen. Also, lass uns etwas sehr Nettes machen. Lassen Sie uns eine Bedingung für das Seitenziel setzen. Also genau hier haben wir die öffnende und schließende geschweifte Klammer. Wenn also die Seitennavigation wahr ist, wollen wir diese Kachel hier zeigen, markieren und abschneiden. Komm her. Okay? Wenn die Seitennavigation wahr ist, wollen wir dieses Tau anzeigen. Okay? Markieren und kopieren Sie auch, aber jetzt werden wir den Stil ändern. Rosa. Lass es uns so machen. Format, der Code. Gut. Lassen Sie mich, lassen Sie mich Ihnen genau erklären , was hier passiert. Wenn also die Seitennavigation wahr ist, lassen Sie mich Ihnen hier den Anfangszustand zeigen. Wenn es wahr ist, möchten wir, dass es von den linken Nullpixeln aus erscheint. Und dann geben wir die Breite von 300 Pixeln an. Andernfalls wollen wir, dass es in eine negative Richtung geht, wenn es falsch ist . Lass es mich dir zeigen. Also hier spezifizieren wir den linken Strich. Wir werden einen benutzerdefinierten Wert haben. Und ich mache es zu 100 Prozent, verschiebe die Seitenleiste in eine negative Richtung zur X-Achse und verberge sie so vor dem Bildschirm. Sicher im Browser. Okay, lass mich hier etwas sehen. Okay, ändern wir es auf wahr. Es passiert nichts. Hier stimmt alles. Richtig Leute, lasst uns die 200 ändern, was die Dauer ist. Ändern wir es auf 300. Okay, Leute, das wird funktionieren. Wenn Sie es auf Falsch ändern. Speichern. Kannst du sehen, dass es verschwindet? Wann änderst du es auf wahr? Es scheint. Können Sie von links sehen wenn der Anfangszustand der Seitennavigation auf True gesetzt ist, wird die Navigationsleiste von links Null Pixel angezeigt, und dann wird die Breite 200 Pixel betragen. Aber wenn wir den Anfangszustand der Seite jetzt auf Falsch setzen , wird er von links zu 100% negativ. Okay? Und indem ich diese Seite verstecke, zeichne die einfachste. Lassen Sie uns nun damit beginnen, die Menü-Symbole zu implementieren , die jetzt die Seite tragen. Also lasst uns das in der nächsten Vorlesung machen. 59. 57: Willkommen zurück an alle. In dieser Vorlesung werden wir die Menüs also direkt in der Auslosung implementieren . Okay, das erste, was wir tun werden, ist ein Symbol zu implementieren , das verwendet wird, um die Sidedraw zu schließen. Lass uns das schnell machen. Also richtig, wir sind im DV. Lass mich dir das zeigen, das DV hier drüben, so, direkt drinnen. Wir werden das Symbol zum Schließen der Gliederung rendern. Lass mich sehen. Hier ist es. Wir haben es in der vorherigen Vorlesung importiert. Kopieren. Komm runter. Lass uns hier die Diode drehen. Näher ran mit dem selbstschließenden Etikett. Die Größe wird natürlich 25 sein. Speichern Sie im Browser. Hier ist es? Aber wir wollen es nicht in der oberen linken Ecke haben. Frauen müssen also in der oberen rechten Ecke stehen, direkt in der Navigationsleiste. Moment glaube ich nicht, dass der Stil schwierig wäre, also machen wir ihn anklickbar. Vorerst. Hier spezifiziere ich das Onclick OnClick-Symbol. Wir wollen auch den Anfangszustand von falsch auf wahr umstellen , so wie wir es in der vorherigen Vorlesung getan haben. Hier, lass mich dir genau zeigen, was wir hier gemacht haben. Also ich denke, ich muss den Onclick einfach so kopieren. Füge es hier ein. Formatieren wir den Code. Wunderschön. Speichern Sie im Browser. Klicken Sie auf Können Sie sehen, und klicken Sie dann darauf, um es zu öffnen. Diese beiden schließen sich. Ordnung, also lasst uns das Schließsymbol schnell stilisieren und es richtig ausrichten. Wir werden es auf absolute Position bringen. Lass es mich dir zeigen. Siehst du. Gut. Dann machen wir von rechts vier draus. Von oben. Machen wir vier draus. Und dann werden die Kosten gering sein. Speichern. Und jetzt ist es da. Schließen, öffnen, schließen, öffnen. Und jetzt hoffe ich, dass Sie gut genug verstehen , wie wir diese Ergebnisse erzielt haben. Wenn Sie es nicht zum ersten Mal verstehen, rate ich Ihnen, die Vorlesungen noch einmal durchzugehen um sich ein klares Bild davon zu machen, wovon wir sprechen. Sehen wir uns die mobilen responsiven Nachrichten an. Du wirst es auf dem iPhone sehen. Nehmen wir es auf dem iPhone 12. Schau es dir an. Alles cool. Lassen Sie uns also die Menüs hier implementieren, und das ist extrem einfach. Es ist so einfach wie ABC. Also nach dem Symbol haben wir hier eine Hecke zum Markieren. Die Polsterung dient zum Ablesen des H2-Tags. Wir werden es genauso machen wie in der vorherigen Vorlesung. Und dann werden wir eine Zeitspanne haben. Eine Zeitspanne. Ich gehe essen gehen. Lassen Sie uns die Spanne dialysieren. Orange 700. Und hier ist es. Eine Sache, die ich gerne mache, ist Schrift. Siehst du jetzt, dass das Span-Tag extrem verbogen wird. In Ordnung. Also direkt nach dem H2-Tag werden wir einen Knoten direkt im Navi haben. Wir werden eine ungeordnete Liste haben, UL. Geben wir ihm einen Stil. Lassen wir es Flex und die Spalte Flex Direction anzeigen. Die Polsterung ist für den Test. Grau 900. Cool. Wäre das nicht die UL, wir werden die LI-Tags haben, was das Mindeste ist. Dann geben Sie ihr hier einen Klassennamen, stilisieren Sie sie innerhalb der Klasse, indem Sie die Hilfsklassen, die genau dort vorhanden sind, und Tailwind, wirklich wichtig sind. Und ich gehöre zu den Klassen Test Dash Excel, PUI, das ist der obere und der untere Teil. Und dann werden wir einen Display-Flex haben. So einfach ist das. Also werden wir direkt innerhalb des LI-Tags den BS Pearson rendern, das ist dieses Symbol hier. Die Größe 25, gib ihr einen Klassennamen, um sie zu stilisieren. Also die Marge, richtig? Wer nur MR. wird es geben , für den eine Schauspielerin einen RAM ausgeben wird. Lassen Sie mich Ihnen zeigen, wie ich einen RAM generiere. Und dann der Test. Weißweine. Die Hintergrundfarbe ist schwarz. Abgerundet, Narr. Das wird tatsächlich dazu beitragen, die Grenze zu reduzieren, zu sparen. Und lass uns sehen. Gut. Kannst du das sehen? Jetzt haben wir diesen Typen hier und was du tun solltest , sind meine Konten. Also direkt innerhalb des LI-Tags, wenn Sie speichern, sieht es wie folgt aus. Fantastisch. Alles funktioniert wie erwartet. Du siehst höher, oder? Also, was ich jetzt tun werde, ist das LI-Tag wie folgt hervorzuheben. Und dann dupliziere es viermal, 1234. Oder Sie können viermal kopieren und einfügen. Was wir jetzt tun sollten, ist die Symbole zu ändern und das Label ist ziemlich einfach. Genau hier. Dieses Symbol wird CB Truck Return sein. Und natürlich sollten wir diese von Riyadh icon importieren. Ich denke, wir sollten es so machen, wie wir es zuvor gemacht haben. Wir werden alle notwendigen Symbole importieren , damit wir nicht hierher zurückkehren müssen, um das noch einmal zu tun. Hier. Wir werden importieren, wir werden FA, User Friends, FE, Google Wallet importieren . Sie können entscheiden, ein anderes Symbol zu verwenden. Nur deine Wahl. Okay. Ich denke, wir müssen das duplizieren, weil ich nicht mehr von Grund auf neu tippen muss. Also Leute, beachtet, dass wir Icons hier FE vorangestellt haben. Also werden wir seine Breite korrigieren. Das Gleiche hier. Wir stellen ihm TB voran, also müssen wir es mit TB reparieren. Nur so funktioniert es. Dann fragte ich mich, wie es funktioniert , weil ich es nicht weiß. Also hier importieren wir leere Hilfe, ruhiger. Ich habe Fieber skizziert, oder? Ups, die Gliederung sollte hier sein, Großbuchstabe 0. Gehen Sie durch Ihren Herd und stellen Sie sicher, dass die gesamte Eingabe korrekt ist. Okay. Lassen Sie uns jetzt anfangen, es zu nutzen. Hier haben wir TB Truck Return. Und das wird eine Lieferung sein. So viele sparen und auschecken. Die Nebenauslosung. Kannst du hier sehen, dass wir geliefert haben. Und wenn du hochzoomst, wirst du die Bälle hier sehen. In Ordnung, also müssen wir uns ändern. Der Rest dieses Typen ist der Nist seiner Favoriten mit leeren Umrissen. Hier. F8, Google Geldbörsen. Hoppla, das soll eine Brieftasche sein. Zu guter Letzt werden wir Hilfe bekommen. Sie können weitere Symbole und mehr Elemente hinzufügen , die Sie möchten. Okay, ich glaube nicht, dass wir das KI-Feldtag verwenden , wischen Sie es ab. Die FAQs, unsere Freunde, wir haben davon keinen Gebrauch gemacht. Wisch es ab. Sie können entscheiden, davon Gebrauch zu machen, wenn Sie möchten. Ups. In den Diagonalen von Riad wurde kein leerer Umrissfavorit gefunden. Mein absoluter Favorit. Dieser Typ hier drüben. Ups, Leute, wir haben zwei Suffixe mit MD. Ich habe dir gesagt, dass das nicht funktioniert, wenn du es nicht auch an die Oberfläche bringst. Wenn Sie es nicht voranstellen. Ich weiß nicht, warum sie das Zeug so gebaut haben. Also ups. Die richtigen Leute. Okay. In Ordnung. Okay. Es tut uns leid. Ich denke, das wird diesmal funktionieren. Ja, das wird gehen. Favoriten bringen Probleme. Ich weiß nicht warum. Wie dem auch sei, Rückenwind ist mein Favorit. Nun, alles ist welches Spiel? Und es funktioniert wie erwartet einwandfrei. Alles sieht gut aus. Sie sehen, ein Mobilgerät sieht gut aus. Meinerseits. Schau es dir an. Das ist klassisch. Das ist klassisch. In Ordnung Leute, wir sind jetzt mit dem Top fertig. Die nächste Termlinie besteht also darin, die zukünftige dritte Komponente zu implementieren. Lass uns das in der nächsten Vorlesung machen. Wir sehen uns dann. 60. 58 SiseNav letzter Schliff: Ordnung, bevor wir mit der zukünftigen Komponente fortfahren, müssen wir die notwendigen Korrekturen vornehmen. Wenn Sie den Browser öffnen, werden Sie feststellen, dass standardmäßig die Sidedraw geöffnet ist. Kannst du sehen? Wenn der Benutzer also Ihre Website besucht, wird er hier genau so hinzugefügt. Und das ist überhaupt nicht nett. Jetzt können Sie sehen, wenn ich darauf klicke, wird es geschlossen. Kannst du sehen, dass es standardmäßig so aussieht. Wissen Sie warum? Das liegt einfach daran, dass wir den Anfangszustand auf wahr gesetzt haben. Gehen Sie zurück zum VS-Code, direkt in den Zeilen 14, wo wir die Bundesstaaten haben. Wir setzen es auf Falsch. Der Anfangszustand ist also falsch. Wenn Sie zum Browser zurückkehren, können Sie sehen, dass er wie erwartet angezeigt wird, und dann muss der Benutzer auf das Hamburger-Symbol klicken , um die Navigationsleiste zu öffnen. Eine Sache, die ich auch gerne tun würde, ist, die OnClick-Rechte zu implementieren, wäre nicht übermäßig. Wenn ich also auf das Overlay klicke, sollte ich in der Lage sein, die Navigationsleiste zu schließen. Lass mich dir das Exemplar zeigen. Und hier ist das Overlay. Was ich jetzt machen werde. Mal sehen, ob es funktioniert. So etwas. Sicher. Hier. Wenn Sie auf den Hamburger klicken, öffnet sich die Seite. Unentschieden. Wenn Sie auf das Overlay klicken, wird die Seitennavigationsleiste geschlossen. In Ordnung, wir sind also nicht mehr nur auf das Schließsymbol angewiesen. Sie können auch auf das Plus-Symbol klicken. Klickst du auf das Overlay. Wunderschön. Die nächste Korrektur wird das Logo hier sein. Deshalb wollen wir, dass die Aedes körperlich erscheinen. Also, was ich jetzt tun werde, nach oben scrollen, ist, den spanischen Klassennamen und dann die Schriftart auf dem Armaturenbrett einzugeben. Und diese lassen es im Browser körperlich sicherer erscheinen . Siehst du, wie schön das ist? Schau es dir an. Fantastisch. Ich liebe es. 61. 59 Vorgestellte Komponente: Willkommen zurück an alle. In dieser Vorlesung werden wir mit der zukünftigen Komponente fortfahren. Gehen Sie zu VS Code, öffnen Sie den Explorer und schreiben Sie dann in das Komponentenpaket, Sie werden die Zukunft sehen. Jazz. Klicken Sie hier, um ein FCE zu öffnen und die Funktionskomponenten des React-Pfeils zu generieren. Lassen Sie uns diese Komponente schnell rendern, oder? Wir sind in der App Js. Und bitte stellen Sie sicher, dass Sie es oben importieren. Das erste, was wir tun werden, ist ein Array von Objekten zu deklarieren. Und genau, innerhalb des Objekts haben wir die URL der Bilder, die wir verschieben möchten. Hier. Ich mache Const Slider, equa, setze es auf ein leeres Array und Rechte innerhalb des Arrays, wir werden das Objekt haben. Also keine Sorge, ich habe das Objekt schon vorbereitet. Was wir tun werden, ist kopieren und einfügen. So einfach ist das. Also geh zurück zu den Lebensmittelmaterialien. Könnte ihr helfen und dann die Heldenobjekte kopieren. Komm her, markiere noch einmal die Zeilen fünf bis sieben. Wischen Sie es ab, da wir die vorgefertigten Objekte kopiert haben. Also müssen wir nur einfügen. Okay, also all diese Bilder, ich habe sie für Cloudinary bereitgestellt. Okay, ich habe ein Cloudinary-Konto , in das ich Bilder hochladen kann. Gut. Danach wird in der nächsten Zeile erforderliche Zustandsvariable deklariert, die verwendet werden soll. An der Spitze wollen wir also den US-Hook nutzen. Also werden wir direkt unter dem Array die in den USA erstellten Hook-Schnipsel wie diesen generieren . Also hier werden wir aktuelle Indexsätze haben. Lassen Sie diese beiden Hauptstädte sehen. Der Anfangszustand wird Null sein. In Ordnung? Lassen Sie uns die Benutzeroberfläche implementieren. Hebt die Zukunft hervor. Wisch es ab. Geben wir ihm einen Klassennamen und er ist in der Klasse beschreibbar. Wir müssen die Hilfsklassen verwenden, um das Div zu stilisieren. Geben Sie ihm eine maximale Breite von 15, 20 Pixeln und eine Höhe von 500 Pixeln. Die Breite. Machen wir vier Jahre draus. Ober- und Unterpolsterung Es wird für links und rechts sein , die Polsterung wird vier sein. Und wir werden es die relativen Rechte innerhalb der Division positionieren lassen. Wir werden ein weiteres Div haben, ihm einen Klassennamen geben und dann geben wir an, und dann geben wir an dass die Breite wieder die volle Breite ist . Also muss ich nur von hier kopieren. Die Höhe entspricht der vollen Höhe. Dadurch wird die Höhe zu 100 Prozent und die Breite zu 100 Prozent. Das solltest du inzwischen wissen. Machen Sie Schulden, um sich zu profilieren, BAG. Die Dauer beträgt 500. Die Position des Hintergrunds ist mittig. Die Hintergrundgröße ist Cava. Dadurch müssen die Bilder also so angepasst werden , dass sie in den Container passen. Das wird also die Übergangsdauer sein , so einfach ist das. Also lass es mich dir schnell zeigen. Jetzt. Ich kann wählen, ob ich Stile darauf anwenden möchte. Hintergrundbild. Jetzt müssen wir die literalen URL-Slider der Vorlagen innerhalb des Arrays verwenden . Aktuelle Indexpunkt-URL. Schauen wir uns also an , was im Browser passiert. Der Browser. Kannst du jetzt sehen, das ist das erste Bild. Lassen Sie mich also erklären, was unter der Motorhaube passiert. Genau hier haben wir eine Reihe von Objekten. Um auf das Element in einem Array zuzugreifen, müssen wir den Array-Index verwenden . Hier sagen wir also, dass der Anfangszustand des Index Null ist, was bedeutet, dass dieses Bild hier zurückgegeben wird. Also, wenn du den Browser auscheckst, hier, ist er? Dies ist das erste Bild rechts innerhalb des Arrays. Wenn ich dann eins indexiere, wird das zweite Bild im Array abgerufen. Können Sie den zweiten Index sehen, der die Textelemente oder das Bild im Array abruft Perfekt. Stimmt es? Jetzt haben wir unsere Bilder erfolgreich angezeigt, aber jetzt rutscht es nicht mehr, aber mach dir Sorgen, das würden wir in einem GeV machen. Bevor wir also mit den Folien fortfahren, müssen wir auch den Links- und Rechtspfeil implementieren. Scrollen wir schnell nach oben, wo wir die Icons von React Icons, BS, als verschiedene Compacts importieren . Links. Nest ist das Chevron-Kampfrecht des Bieres. Wir müssen diese also nur hervorheben und hier kopieren. Und dann ändern wir es in Schreiben. So einfach ist das. Scrollen Sie nach unten. Gleich nach diesem Div. Wir werden noch einen Div haben. Stimmt es? Innerhalb des Divs werden wir be rendern, so dass noch mehrere Verbindungen übrig sind. Wenden wir Stil an, um die Position absolut einzunehmen. Dadurch wird das Symbol also tatsächlich über dem Bild platziert. Die Obergrenze liegt bei 50 Prozent. Also werden wir hier ein negatives Translate x haben. Dann übersetze y. Geben wir einen benutzerdefinierten Wert an. 50%, richtig, sind fünf. Tests nach Excel. Das gibt also an, dass die Schriftgröße n, die Zeilenhöhe, abgerundet, voll ist. Polsterung. Im Hintergrund wird ein orangefarbener Strich 700 zu sehen sein. Der Test ist weiß. Lassen Sie uns den Cursor als Zeiger festlegen. So einfach ist das. Speichern Sie im Browser. Hier ist, der Typ hier drüben soll nach links kommen. Mal sehen, was falsch ist. Die Spitze liegt bei 50 Prozent. Übersetze x minus Null, Übersetze Y. Das wird -50 Prozent sein. Hier. Dies soll von links und der Modus von rechts beginnen . Ich denke, das wird das Problem beheben. Schau es dir an. Kannst du sehen? Perfekt. Die nächste Zeile besteht also darin, dieses Symbol hier zu duplizieren und es dann so auszurichten, dass es quadratisch ist. Das ist ganz einfach. Aus den Zeilen 2042, Zeilen 26, hervorheben und duplizieren. Also hier, lassen Sie uns das ändern, um sicher zu schreiben. Siehst du es jetzt? Gut. Ändern wir also das Symbol so, dass es die rechte Seite anzeigt. Hier wird es mehrere Compacts geben. Gut. Also Leute, alles nimmt Gestalt an und vergesst nicht, diesen Kurs zu wiederholen, zu bereichern ist extrem wichtig weil ich genau wissen muss , wie ihr euch dort fühlt. Gut unterrichten. Wunderschön. Okay? Also im Grunde möchte ich jetzt die Pfeile verstecken. Und dann möchten wir, dass der Fehler sichtbar wird , wenn wir den Mauszeiger auf den Slider bewegen. Dafür werde ich so etwas machen. Hier. Wir werden das übergeordnete Div so gruppieren. Also komm her und ich heize. Das wird also den Pfeil nach links verbergen. Jetzt wollen wir, dass der Pfeil links auf Hoover erscheint. Was ich machen werde, ist Group Dash, Hoover, regulär einen Display-Block zu haben. Speichern. Kannst du sehen, wenn ich den Mauszeiger darauf halte, wird es angezeigt. Schauen Sie sich das jetzt an. Siehst du, lass es uns schnell auf den Rechtspfeil anwenden. Ich muss nur alles von hier kopieren. Dann einfügen. Speichern Sie im Browser. Sie sehen, wenn ich den Mauszeiger darauf bewege, der Links- und der Rechtspfeil angezeigt, rechts. Wenn Sie jetzt auf die Pfeile klicken, passiert nichts. Definieren wir also schnell die Funktion zur Implementierung des Pfeils. Scrollen Sie nach oben. Entschuldigung, lassen Sie uns den Anfangszustand auf Null setzen, damit er gut aussieht. Hier definieren wir also eine Funktion, die den Pfeilklick verarbeitet. Konst. vorherige Slider, ein Core, stellte ihn auf unsere Funktion ein. Und hier haben wir eine Variable namens erste Folie. Setze es auf den aktuellen Index, der gleich Null ist. Noch einer. Und das wird neuer Index genannt. Entspricht der ersten Folie. Wenn also die erste Folie ganz richtig ist, werden wir Slider machen. Slido-Punktlänge minus eins, Pfeile. Der aktuelle Index wird minus eins sein. Die nächste Zeile ist also, den Status zu aktualisieren. Also setzen wir den aktuellen Index auf den neuen Index, einfach wie das die Onclick-Rechte innerhalb des Chevron Compacts links implementiert , das ist der Pfeil links. Und klicken Sie. Wir müssen die Funktion previous slider aufrufen. Wenn Sie die Kaufabwicklung im Browser speichern. Probieren wir es aus, indem wir auf den linken Schieberegler klicken. Leute, könnt ihr sehen? Es funktioniert wunderbar. Jetzt ist es uns gelungen unseren eigenen Slider von Grund auf neu zu erstellen. Wie schön diese Tage. Stimmt es? Lassen Sie uns es jetzt für den Rechtspfeil implementieren. Wir werden eine weitere Funktion haben, konstanten Nest-Slider, setzen Sie sie auf unsere Funktion. Und dann haben wir eine Variable namens first slide current index. Wir werden die Schieberegler in Punktlänge machen. Okay? Wir greifen also tatsächlich auf die gesamte Folie zu, unsere Rechte innerhalb des Arrays, um den Gesamtwert des Sliders zu erhalten. Das ist also die Länge des Slider-Punkts. Und dann machen wir hier minus eins. Neuer Index. Entspricht der letzten Folie. Wenn die letzte Folie also wahr ist, setzen wir sie jetzt auf Null. Also setzen wir es auf den aktuellen Index plus eins, so einfach ist das. Jetzt müssen wir den Anfangszustand aktualisieren, indem den aktuellen Index auf den neuen Index setzen. Und eigentlich hier. Bevor wir fortfahren, sollte dies bei Atrazin die letzte Folie sein. Also genau hier, klick, wir müssen diese Funktion aufrufen. Füge es hier ein. Speichern Sie im Browser. Lass es uns überprüfen. Kannst du sehen, dass alles einwandfrei funktioniert? Schau es dir an. Eine Sache noch. Komm her. Schon wieder. Diese werden eigentlich für die Kugeln direkt unter den Schiebereglern sein. Ich werde konstant haben. Gehen Sie zu Folie Equa, Folienindex. Lassen Sie uns den aktuellen Index auf den Folienindex des Parameters setzen. Coole Leute. Gehen Sie also nach oben und lassen Sie uns importieren. Eine Ikone. Dieses Symbol wird als Aufzählungszeichen direkt unter dem Slider gespeichert. Wenn Sie auf die Kugeln klicken, können Sie die Schieberegler bewegen. Keine Sorge, Sie werden es auf jeden Fall verstehen , wenn wir mit der Implementierung fertig sind. Unser X-Dot-Treibstoff, wie dieser von React Icons. Gleich nach diesem Div. Wir werden noch einen Div haben. Squiggly stilisiere es. Wir werden einen Display-Flex von oben haben. Wir werden es für Justify Content in der Mitte oben und unten haben . Das werden wir müssen. Was wir also tun werden, ist , die Folien zu kartieren. Okay? Also mache ich Slider, Punkte. Landkarte. Map ist eine Methode, oder? Und richtig. Innerhalb dieser Methode nehmen wir Elemente mit einem Parameter-Schieberegler auf, wobei dieser Typ hier für jedes Element innerhalb dieses Arrays steht . Und in diesem Fall die Bild-URL, ruhiger, leichter Index. Wir werden die Benutzeroberfläche rendern. Ein Div mit dem Klassennamen wird zu x L sein Cos ist Zeiger. Schließ es. Stimmt es? Beim Div rendern wir den RX gepunktet angezeigt. Schließ es. Also lass es mich dir schnell zeigen. Es heißt, Eric, doted fueled hat keinen Spaß gemacht. Wissen Sie warum? Das liegt einfach daran, dass wir wieder vergessen haben, ihm RAX voranzustellen. Leute. So reagiere ich. Die Symbole funktionieren. Speichern. Kannst du diese Symbole sehen? Aber wenn Sie jetzt darauf klicken, passiert nichts. Lassen Sie uns schnell die eigene Clique implementieren. Zuerst. Geben wir ihm einen Schlüssel. Weil sich die Anwendung beschweren wird , wenn Sie den Schlüssel nicht angeben. Lass es mich dir zeigen. Kannst du sehen, dass jedes Kind in einer Liste eine einzigartige Schlüsselrequisite haben sollte. Ich weiß, dass Sie wissen, dass dies nur eine Erinnerung ist. Ich werde hier c0 dem leichten Index gleichsetzen. Der Typ hier drüben, richtig? Speichern Sie erneut im Browser. Checken Sie auf der Konsole aus. Lass uns auffrischen. Jetzt. Der Fehler ist weg. Wunderschön. Okay, lassen Sie uns den Onclick implementieren. Bei einem Klick rufen wir die Funktion zur nächsten Folie auf. Machen wir es also lesbar. Gehen Sie zur nächsten Folie. Kopieren. Komm her. Füge es ein. Okay, gut. Also nehmen wir den Parameter auf. Slight Index ist so einfach. Wenn Sie im Browser speichern, klicke ich. Kannst du sehen, das ist extrem fantastisch, Freunde. In Ordnung, das ist vorerst alles für den Slider. Und in der nächsten Vorlesung werden wir mit den Komponenten der Delivery-App fortfahren. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 62. 60 Schnelle delivery: In Ordnung, willkommen zurück an alle. In dieser Vorlesung werden wir also mit der Quick Delivery App-Komponente fortfahren. Reiher zu VS Code. Schließen Sie das, öffnen Sie den Lieferpunkt js, schließen Sie den Explorer oder ein FCE um die funktionale Komponente des Reaktionspfeils zu generieren. Lass uns schnell tot innerhalb der App-Komponente ausführen. Und bitte stellen Sie sicher , dass Sie es oben importieren. Also geben wir die Breite als foo an, was 100 Prozent ergibt. Der Hintergrund ist weiß. Die Polsterung oben, die Polsterung, die Unterseite ist 16, und dann ist die Polsterung links und rechts endgültig. Das wird jetzt also als übergeordnetes Div dienen. Hier haben wir ein Geschichts-Tag. Lass es uns schnell stilisieren. Der Test ist orange, orangefarbener Strich 500. Machen wir es mutig. Vorderseite, Armaturenbrett. Ein Test besteht darin, sich zu übertreffen, und dann richten sich die Tests in der Mitte aus. Jetzt werde ich die schnelle Lieferung im Browser sicher machen . Hier, ist es? Jetzt, direkt nach dem letzten Tag mit der Historie, werden wir ein Div haben. Lassen Sie uns den Unterschied schnell stilisieren. Die Breite wird 15, 20 Pixel betragen. Margin links und Margin Right werden automatisch sein. Wir werden ein Anzeigeraster haben. Auf einem mittleren Gerät möchten wir dann, dass das Raster den zweiten Doppelpunkt anzeigt. Die Spalten der Rastervorlage dienen also dazu, das Div zu schließen. Jetzt haben wir ein Bild, IMG. Geben wir ihm einen Klassennamen und stilisieren wir dann das Bild. Die Breite beträgt 550 Pixel. Es wird ein konstanter Wert sein. Inzwischen weißt du, was das ist? Berggipfel und Randboden. Für SRC. Gehen wir zurück zu dem könnte ihr helfen die URL zu kopieren. Und hier ist es. Markieren und kopieren. Komm her, füge es ein. Schließen Sie es dann mit dem selbstschließenden Etikett. Lass uns sparen. Sehen Sie, was wir im Browser haben. Kannst du sehen, dass es hier erscheint. Die sind gut. Also gleich nach dem IMG-Tag werden wir ein weiteres Div haben. Geben wir ihm einen Stil. Wir werden ein Display, Flex, Flex Direction, Spalte, Ausrichtung des Inhalts und Mitte haben . Stimmt es? Wenn wir dieses Div tragen, werden wir ein P-Tag haben. Geben wir ihm schnell einen Stil. Auch dies wird ein benutzerdefinierter Stil sein. Das sind A, D, F. Nun, die Telefone werden fett sein. Auch hier werden wir eine Kopfmarke haben und ich werde sie machen . Schauen wir uns das an. Okay, es scheint in Ordnung zu sein. Wir müssen es auch stilisieren, oder? Auf dem mittleren Gerät. Der Test wird unser vierfaches und kleineres Gerät haben, es werden drei die Schrift ausatmen lassen. Machen wir es mutig. Polsterung oben, Polsterung unten Lass es uns auch schaffen. Ich denke, das wird alles in Ordnung bringen. Es sieht schon gut aus. Okay, mach dir keine Sorgen. Es wird auf jeden Fall an die Spitze kommen. Okay. Also werden wir jetzt ein P-Tag direkt unter dem Headtag haben . Also hier kopiere ich einfach einen Dummy-Test und füge ihn dann einfach hier ein. Das ist also nur ein Scheintest. Und wenn du willst, kannst du zurück zu dem gehen, der ihr helfen könnte. Ich weiß, dass die meisten von Ihnen genau das tun möchten , was ich tue. Also komm her und kopiere diesen Test. Aber du kannst ins Internet gehen und einfach den Dummy-Test machen und dann kannst du ihn da rüberkopieren. Wenn Sie die Kaufabwicklung im Browser speichern. Bumm, es sieht gut aus, aber ich mag es nicht , wie es aussieht. Format. Mach dir keine Sorgen. Lass uns weitermachen. Wir machen eine Verriegelung, geben ihr einen Klassennamen und dann lassen Sie uns dialysieren. Das Board im Hintergrund wird gesperrt. Der Test, oder? Wir sind im Boot, das wird dieser Typ hier sein. Ich muss es nur kopieren. Keine Wiederholung erforderlich. Die Breite, 200 Pixel, abgerundet, die Schrift. Machen wir ein Medium daraus. Rand, oben und unten. Machen wir es mit sechs Rändern, links und rechts. Lass es uns automatisch machen. Auf dem mittleren Gerät. Wir werden dafür sorgen, dass der Rand links und rechts Null ist. Und die Polsterung oben Polsterung unten werden drei sein. Also direkt beim Bootfahren werde ich schreiben, loslegen. Sicher. Okay, also alles scheint in Ordnung zu sein, aber das Ergebnis gefällt mir wirklich nicht. Also muss ich einfach zu VS Code zurückkehren. Lass uns hier die Dinge herausfinden. Dies ist das Div, das die gesamten Informationen hier enthält . Also was ich tun werde, wir haben 15, 20, ändern wir es auf 12, 40. Sicher. Lass es uns überprüfen oder schreiben. Alles sieht extrem toll aus. Und es sieht aus wie erwartet. Eine Sache, die noch übrig ist , ist, dass zwischen dem p-Tag unten kein Leerzeichen ist. Also ich denke, wir müssen das schnell beheben. Lassen Sie uns nun die richtigen Leute hinzufügen, können Sie sehen, dass wir sechs als Rand oben und Rand unten hinzugefügt haben . Aber sieh mal, es funktioniert nicht. Und du siehst, dass wir Strich sechs machen müssen. Und da hast du es. Perfekte Leute. Das ist alles für heute. Und in der nächsten Vorlesung werden wir mit den Top-Peak-Komponenten fortfahren. Und dort werde ich Ihnen auch beibringen, wie Sie mit der mitgelieferten Folie einen React-Slider erstellen . Wir sehen uns in der nächsten Vorlesung. Konzentriere dich darauf, immer vorsichtig zu sein. 63. 61 Top Pick: Willkommen zurück an alle. In dieser Vorlesung werden wir den Slider implementieren, der die Top-Peak-Komponente darstellt. Also, ohne weitere Umschweife, lasst uns anfangen. Öffne den Explorer. Und dann müssen wir den Top Peak Dot js öffnen und den Explorer schließen. Und dann mache ich ein FCE, um die funktionale Pfeilkomponente zu generieren. Im Moment möchte ich dieses Div ändern, oder? Wir möchten ein Reaktionsfragment haben , das als übergeordneter Knoten gespeichert wurde. Also gut, innerhalb dieser Fragmente werde ich Seite eins machen. Also werde ich hier Themen sagen. Geben wir ihm einen Kurs , damit wir ihn stilisieren können. Der Test Orange Dash 500, die Schriften, wir wollen, dass es ausgebuht wird. Testabzeichen nach Excel. Richten wir den Text zentriert aus. Polsterung oben und unten, unten Machen wir es zu den einfachsten, die richtig sind. Okay, sagen wir vorerst, Rechte innerhalb der App-Komponente. Lassen Sie uns das in der obersten Peak-Komponente ausführen und tun Sie gut daran, es in einer Wanne zu importieren. Sicher. Stellen Sie sicher, dass die Anwendung läuft. In Ordnung, also im Browser, hier ist es. Das wird also als Header gespeichert. Wunderschön. Die nächste Zeile besteht nun darin, diesen Gleiter zu implementieren. Okay, also schnell weiter zu splice gs.com. Dann sehen Sie die Schaltfläche Get Started, klicken Sie darauf. Und dann können Sie hier die Dokumentation nachlesen , um die bekannten Höhenarbeiten zu verstehen. Aber vorerst gehe ich hier einfach zum MPM über. Okay. Lass es mich dir schnell zeigen. Sie können den Link zu dieser Seite sehen, richtig, würde darauf hinweisen, dass wir uns im Dunkeln befinden. Hier, so installieren Sie die React-Folie hier. Ich werde kopieren, zu VS Code Control C zurückkehren, um den aktuell laufenden Serverbefehl V zu stoppen , den Befehl einzufügen und dann die Eingabetaste zu drücken, um ihn zu starten. Gut, installiert, erfolgreich. Jetzt ist der nächste Schritt, es mit einem Zylinder in das Thema zu importieren . Und dann wieder zurück zur Reaktionsfolie. Wir müssen diese Eingabe genau hier kopieren . Füge es oben ein. Sicher. Gut. Okay, so schnell, wir müssen auch die Daten importieren , die wir für den Top-Peak-Slider verwenden werden. Ich rate Ihnen, Ihren VS-Code zu minimieren. Befehl B , um den Explorer zu öffnen, die Komponenten zu schließen und den SRC zu schließen. Also öffne die Lebensmittelmaterialien auf. Dann wirst du das Paket hier finden , das Data heißt. Stimmt es? Innerhalb dieser Daten haben wir das Daten-JS-Modul, das aus den Kategorien besteht, wobei die mittleren und oberen Spitzendaten unvorsichtig sind. Wenn wir mit dem Import fertig sind, werde ich es Ihnen mitteilen. Ziehen Sie es also per Drag & Drop direkt in den SRC. Kannst du sehen, dass es jetzt im SRC ist. Wenn ich das SRC schließe, werden Sie die Daten nicht mehr sehen. Siehst du gut? Maximiere unser Recht. Also lasst es uns öffnen. Jetzt sehen Sie hier eine Reihe von Objekten und Rechten innerhalb des Objekts. Sie werden einige Elemente in Form eines Schlüssel-Wert-Paares sehen , das ist die ID. Und hier ist einer, der Titel, und hier ist was er ist. Der Preis bei 50 und das Bild. Dann sind dies die Daten für die höchsten Gipfel. Ich scrolle wieder nach unten. Sie werden die Daten für die Mahlzeit sehen. Natürlich gibt es eine Reihe von Objekten, die die ID, den Namen der Mahlzeit, die Kategorie, in die sie fällt, das Bild und den Preis umfassen Namen der Mahlzeit, die Kategorie, in die sie fällt, . Scrollen Sie erneut nach unten. Sie werden die Daten der Kategorien sehen. Und natürlich ist es genau dasselbe, aber jetzt haben wir unterschiedliche Daten. Ja, das ist genau das, was es ist. Und das hat den Vorteil, dass Sie wissen, wie man mit der API arbeitet, okay, also wenn wir Daten von hier abrufen können. Dann wird das Abrufen von Daten von S-Dinosauriern in Zukunft mit Sicherheit kein Problem mehr sein. Wenn wir mit dem Aufbau der Filmwebsite beginnen, müssten wir auf jeden Fall von einem API-Endpunkt aus passen. Ganz oben werden wir die Daten direkt in das Datenmodul importieren , die alle als Export bezeichnet werden. Lass es mich dir zeigen. Kannst du einen Punkt sehen, an dem der Gipfel konstant ist? Das ist also ein benannter Export. Und wir müssen es so aus Daten mit Schrägstrichen und Schrägstrichen importieren . So einfach ist das. Gut. Nun, hier beginnt der Spaß. Wir werden hier ein Div haben, gib ihm einen Klassennamen, um es zu stilisieren. Wir möchten, dass es in einem kleineren Gerät versteckt ist. Bei einem größeren Gerät möchten wir also, dass es Flex, die maximale Breite, anzeigt. Wir wollten 15, 20. Der Einfachheit halber möchten wir die Slider-Kategorie auf Mobiltelefonen nicht anzeigen . In Ordnung? Wir möchten, dass es auf einem größeren Bildschirm angezeigt wird, z. B. auf Ihrem Laptop, Desktop und dem Rest. Das wird auf jeden Fall auf Pixeln sein. Und dann ist die Marge automatisch. Aber in der oberen und unteren Polsterung ist das linke Muster rechts ebenfalls zwei. Nachdem wir das getan haben, müssen wir die Daten kartografieren, was das Thema Daten ist, also müssen wir all diese Oberteile hier abbilden. So wie das. Wir wollen, dass sie das durchstehen und es dann auf dem Bildschirm anzeigen lassen. Ist eigentlich sehr einfach, das zu tun. Zuerst die öffnenden und schließenden geschweiften Klammern. Und dann mache ich eine Punktkarte mit den Themen. Dann werde ich hier den Artikel machen. Dieser Artikel hier steht also für jedes Objekt, richtig, innerhalb des Themenbereichs. Ja, jetzt geben wir die Benutzeroberfläche zurück. Und direkt in der Benutzeroberfläche werden wir beginnen, die Artikel wie Titel, Preis, N und das Bild anzuzeigen . Also hier werde ich ein Div mit dem Klassennamen haben und dann müssen wir es stilisieren. Also stilisieren wir den Randradius , der drei x L-Position relativ sein wird. Also richtig, innerhalb dieses Div werden wir ein weiteres Div haben, ihm einen Klassennamen geben und dann das Div stilisieren. Da dieser Typ also relativ positioniert ist, wollen wir ihn absolut positionieren , sodass er so über dem übergeordneten Div stehen kann . Okay? Also dieser Div hier drüben wird über diesem Typen positioniert. Am einfachsten ist diese Position, absolut. Die Breite ist voll , also zu 100 Prozent. Die Höhe ist voll, was auch die Höhe zu 100 Prozent zum BG macht die Höhe zu 100 Prozent zum BG . Ich werde B G Dash Block machen. Aber in diesem Fall wollen wir, dass es ein bisschen transparent ist. Also teile ich es durch 50 und werde dann abgerundet, wodurch die Ränder etwas kurvig werden. Dann nehme ich Excel, den Test. Mach es einfach weiß. Schließ den Div. Okay. Lass uns das schließen. Ich denke, mir geht es gut. Cool, so. Deshalb wollen wir das p-Tag verwenden, um den Titel anzuzeigen. Also hier mache ich p, dann den Artikelpunkttitel. Sie können sich erinnern, dass dieses Element hier jedes Objekt im Array darstellt. Also dieser Artikelpunkttitel, das ist der Titel hier drüben , den wir anzeigen wollen. Und dann werden all diese Titel wie dieser, alle so angezeigt. Weil wir das Element verwendet haben, das jedes anzuzeigende Objekt darstellt , diesen Titel. Würde es auf jeden Fall gut genug verstehen. Speichern Sie und schauen wir es uns im Browser an, oder? Bevor wir es im Browser auschecken, denken Sie daran, dass wir den Server gestoppt haben, sodass wir den Server erneut starten müssen. In Ordnung, scrolle nach unten. Wo sind die Daten? Nirgendwo zu finden? Wenn Sie den Bildschirm beobachten, sehen Sie die Daten möglicherweise nicht, oder? Aber ich kann es dir versichern. Daten verstecken sich direkt in der unteren linken Ecke des Bildschirms. Lass mich ein bisschen nach oben zoomen. Und jetzt will ich euch zeigen ihr seht, einfach weil wir nicht stilisiert haben, dass ihr seht, einfach weil wir nicht stilisiert haben, sondern genau deswegen so aussieht es. Also komm her. Lassen Sie uns es nun dialysieren, ihm einen Klassennamen geben und den Klassennamen gut einschreiben. Aber links und rechts sind zwei Bilder. Wenn Sie speichern und im Browser auschecken, es möglicherweise nicht deutlich angezeigt. Also lasst uns jetzt etwas tun. Das ist das Eltern-Div dieses Typen, okay? Also haben wir diesen Kerl relativ positioniert und dann haben wir diesen Div so positioniert, dass er absolut ist. Im natürlichen Sinne bedeutet das, dass dieser Div direkt vor diesem D stehen wird . Okay? Also lass es mich dir schnell zeigen. Jetzt geh raus aus dem Def, außerhalb dieses D, okay. Wir werden ein IMG-Tag haben, weil ich das Bild jetzt anzeigen möchte , damit alles aussieht, wie wir es erwarten. Hier. Geben wir ihm einen Klassennamen. Okay, lassen Sie uns zuerst das Bild vor dem Klassennamen anzeigen . Also mache ich einfach das selbstschließende Tag rückgängig und mache SRC equal item dot IMG. Lass es mich dir hier zeigen. Also das ist es hier drüben. Wenn Sie im Browser speichern. Die Idee ist, siehst du, jetzt sieht es gut aus, aber es sieht nicht gut aus, weil wir das Bild nicht auch stilisiert haben. Aber zumindest kannst du hier das Essen mit dem entsprechenden Titel sehen . Hier haben wir den Sharma, wir haben den Fruchtsaft, wir haben den Joghurt, wir haben die Orangenbäume, das Ei, das ich pflanze. Wu Vata wird gut schmecken. Tilapia-Fische im Juli des Reises. Oh mein Gott, Leute. Lass uns dieses Zeug stilisieren. Lass es uns schnell dialysieren. Jetzt. Wir geben diesem IMG einen Klassennamen. Die Höhe wird eine benutzerdefinierte Höhe sein. Also lass uns 200 Pixel daraus machen. Die Breite. Machen wir es auf 2100 Pixel, was voll ist. Dann lassen Sie uns jetzt speichern und sehen, was wir haben. Es sieht so aus. Mach dir keine Sorgen. Wenn wir mit der Implementierung des Sliders beginnen, werden wir Leerzeichen zwischen den Elementen haben. Lass uns das jetzt beenden. Das Style-Objekt wird aufgerufen. Das wird also das Objekt sein, das passt. Und tatsächlich wird dadurch die Größe des Bildes so geändert, dass es in den tatsächlichen Container passt. Wir möchten, dass die Bildränder etwas kurvig sind, atmen Sie die gröberen aus. Machen wir daraus einen Zeiger. Also weiter, wenn Sie den Mauszeiger auf das Bild bewegen, wollen wir es skalieren. 105. Gut. Und wir wollen, dass es die Dauer verkürzt. Machen wir 300 draus. Sie speichern im Browser und haben Recht Wenn wir also mit der Maus auf das Bild zeigen, passiert nichts. Ordnung Leute, ich denke, wir müssen einen Slider einrichten , bevor wir beginnen , einige der Änderungen zu sehen. Aber lassen Sie uns vorerst einfach mit dem Slider abschließen. Okay? Okay, lassen Sie uns unten rechts unter dem p-Tag implementieren , sich direkt in diesem Div hier befindet. Wir werden die Unterseite anzeigen. Ich werde es tun, um zu schneiden. Lassen Sie uns die Grenze dialysieren. Die Grenze. Machen wir es gepunktet. Das ist mein eigener Stil, sodass du am Ende tatsächlich etwas anderes machen kannst. Die Farbe des Randes wird weiß sein. Der Test. Lass es uns auch weiß machen. Rand links und rechts wird seine Position absolut haben. Schließlich der Boden. Machen wir vier daraus, das ist der untere Rand. Okay? Wenn Sie speichern, sehen wir uns die Ergebnisse an. Gut. Kannst du die gepunktete Linie sehen? Siehst du? Aber das Problem ist jetzt, dass es nicht auf Weiß erschien. Lass mich etwas sehen. Ups, Leute. Hier liegt das Problem. Der Rand soll weiß sein. Jetzt können Sie es auf dem Bildschirm sehen. Siehst du, okay, lass uns den Slider so implementieren, dass alles gut aussieht, um den Slider zu implementieren. Zuerst müssen wir React Slide installieren , die wir in der Anfangsphase durchgeführt haben. Checken Sie die Datei package.json aus. Und hier ist es. Und wenn Sie dann auf den Gipfel gehen, müssen wir diesen Fehler auf jede Folie importieren, einschließlich des CSS-Pakets. Was wir jetzt tun werden, ist, es mit dem mitgelieferten zu verpacken. Also gleich nach diesem Div werde ich versorgt machen. Schließen Sie es, stellen Sie sicher, dass Sie es markieren, kopieren und dann fügen Sie es hier ein. So wie das. Okay, gut. Auf dieser Folie mache ich jetzt die Optionen zum Öffnen und Schließen der geschweiften Klammer, und dann möchten wir, dass vier pro Seite angezeigt werden. Wenn Sie jetzt auf den Bildschirm schauen, werden Sie feststellen, dass fast zehn Artikel auf der Seite 1, 234-567-8910, als Paar erscheinen . Das ist der Grund, warum das Bild nicht seine Form angenommen hat. Okay, jetzt wollen wir vier Artikel pro Seite. Wie das geht, ist also nach und nach. Wir wollen es für. Und noch einmal, bevor wir fortfahren, lassen Sie uns das Ganze mit der mitgelieferten Folie abschließen . Direkt unter der Rückseite. Wir werden Folie teilen, hervorheben, abschneiden, das abschließende Tag machen abschneiden, das abschließende Tag und es dann hinter dem schließenden Div platzieren. Hier so. Wenn Sie einen beobachteten Bildschirm speichern, werden Sie feststellen, dass diese Stadt angewendet wird. Sie sehen, wir haben 1234 und jetzt können Sie die Bilder verschieben. Siehst du, wie toll das ist? Wir haben die Pfeile zum Gleiten. Schau es dir an. Wunderschön. Wenn Sie nun die Gegenstände beobachten, werden Sie feststellen, dass dazwischen mehr Platz ist. Ja, also lass uns das schnell machen. Komm her, um Zwischenräume zwischen den Objekten zu schaffen. Alles, was wir tun werden, ist, dass der Abstand 0,5 Rem VCs entspricht, als meine eigene Spezifikation, du kannst es für m 5 oder was auch immer du willst 0,5 Rem VCs entspricht, als meine eigene Spezifikation, am Ende machen . Speichern und checken Sie den Browser aus. Nun, siehst du, kannst du das sehen? Das ist cool. Ich liebe es. Okay, also eine Sache, die ich tun möchte , ist, das Medikament etwas milder zu machen. Also lasst uns das schnell machen. Stellen Sie sicher, dass Sie hier ein Komma setzen und dann mache ich drogenfrei. Wenn Sie den Bildschirm betrachten , der sich auf der linken Seite des Bildschirms befindet, sehen Sie diesen Folienpfeil genau hier. Das gefällt mir nicht. Okay, ich schneide mir die Haare und dann mache ich Pfeile. Stellen wir es auf Falsch. Und ich denke, das ist das Ende. Siehst du? Jetzt ist der Pfeil weg. Felder werden gebildet. Was müssen wir nochmal tun? Okay, lass uns die Konsole öffnen und ich zeige es dir. Hier steht, dass wir jedes Kind wollen und zumindest ein einzigartiges Requisit haben sollten , das solltest du inzwischen wissen. Dann mache ich jetzt gleich den Punkt Punkt. Wir müssen also nach etwas suchen, mit dem die Artikel eindeutig identifiziert werden können. Und hier kann ich Ihnen sagen, dass die ID das einzige ist , mit dem all diese Dinge hier eindeutig identifiziert werden können , weil Sie auch zwei Artikel zum gleichen Preis haben können . Sie können zwei Artikel mit demselben Titel haben. Daher denke ich, dass die Verwendung der ID die beste Idee ist. Ja, also jetzt mache ich die Item-Punkt-ID. Wenn Sie im Browser speichern. Lass uns die Konsole wieder herausnehmen. Auffrischen. Wunderschön. Jetzt wird der Fehler des Schlüsselindexes nicht mehr angezeigt. Bitte nehmen Sie beim Anbringen des Schlüssels viel Zeit mit, dies muss auf oberster Ebene erfolgen. Also, wenn ich so etwas mache, kopiere diesen Schlüssel hier, erwischt. Angenommen, ich möchte es auf dieses Div anwenden. Wenn Sie im Browser speichern, öffnen Sie die Konsole und dann werden Sie sehen, dass das Diagramm in den Blättern eine eindeutige Tastenstütze haben sollte, einfach weil wir die Schlüsselstütze auf dieses DV hier angewendet haben . Es sollte also auf oberster Ebene geschehen. Also lass es uns so machen. Sicheres Auschecken, Browser, Konsole aktualisieren, neu laden. Alles funktioniert wie erwartet einwandfrei. So weit, so gut. Alles ist nett. Ich liebe es. Das Beste im Internet ist also, den Preis zu zeigen. Und natürlich, lassen Sie uns hier eine Alternative angeben , damit, wenn das Bild nicht angezeigt wird, tatsächlich etwas Gutes auftaucht. Wenn das Bild nicht angezeigt wird, zeigen wir den Namen des Artikels an. Also werde ich jetzt den Artikelpunkttitel machen. Wenn wir also eine Bildunterbrechung haben, wollen wir dieses Zeug genau hier anzeigen , was der Titel ist. Okay, lassen Sie uns den Code formatieren und er sieht sauber aus. Schließlich werden wir den Preis implementieren. Schon wieder. Dazu wollen wir das p-Tag verwenden. Ja, wir werden ein P-Tag haben. Und dann mache ich den Punktpreis für den Artikel. Wenn Sie den Browser speichern und auschecken. Kannst du jetzt sehen, dass der Preis so ist. Dialysieren wir es schnell mit einem ClassName , der ihm einen Teil in B x Strich zwei geben muss, aber in links und rechts sind es zwei. Und hier für den Titel müssen wir auch die Schriften fett machen. Schrift, Strich, Brett. Der Test, um sich zu übertreffen, ist top gepolstert. Okay, machen wir es einheitlich. Teil an der Spitze. Machen wir vier draus. Siehst du, dass alles gut aussieht? Ich liebe diese Ergebnisse. Freunde. Kannst du sehen, Leute, alles sieht gut aus. Wenn Sie jedoch den linken Bildschirmrand beobachten, werden Sie feststellen, dass dazwischen kein Leerraum ist. Und ich mag es so nicht. Okay. Also sollte es von hier aus so beginnen. Also lasst uns weitermachen und uns das Muster links ansehen . Der Div-Klassenname ist erfolgreich. Es sollte ein großer Bildschirm erscheinen, der die Position verschiebt. Die maximale Breite beträgt 15, 20 Pixel, der Rand ist Otto, die P-Welle und das P X sind zwei. Aber Leute, schaut euch das an. Hier kommt der Fehler ins Spiel. C P x. Hier müssen wir das Gleichheitszeichen entfernen. Kannst du den Pflegetresor sehen? Schau es dir jetzt an, es sieht gut aus. Leute, wir Menschen neigen dazu, Fehler zu machen, wenn Sie tippen und wenn Sie unterrichten, sprechen, Sie würden definitiv Fehler machen. Ja, also, aber das ist nicht unbedingt wichtig, weil jeder Fehler macht. Das ist vorerst alles für den Slider und er funktioniert einwandfrei. Ich liebe das Endergebnis noch einmal. Ja, also sieh es dir an. Wunderschön. Das ist alles für heute. Und in der nächsten Vorlesung werden wir mit der Mühle fortfahren. Also müssen wir die Lebensmittelbeschriftungen auf dem Bildschirm anzeigen. Wir sehen uns dann. 64. 62 Meal: Willkommen zurück an alle. Zuvor haben wir den Top-Peak-Slider implementiert. Und Papas. In Ordnung, also werden wir in dieser Vorlesung die Komponente Mahlzeit implementieren. Okay? Also werden wir die Essensdaten kartografieren und sie auf dem Bildschirm mit einem sehr schönen Design anzeigen lassen. Und glauben Sie mir, das Design wird wie gewohnt responsiv sein. Heroin in VS-Code-Komponenten umwandeln und dann Mahlzeit. Aber g schließt den Explorer, ein FCE zum Generieren der Reaktionspfeil-Funktionskomponente. Okay, ich werde das jetzt ausziehen. Gehen Sie zurück zur app.js und lassen Sie es uns hier rendern. Beginnen wir damit, dieses Div zu stilisieren. Geben Sie ihm zunächst einen Klassennamen. Und dann die maximale Breite, 15, 20 Pixel. Automatische Marge. Aber ich hatte keine Musterrechte für die Polsterung oben und unten von der linken Hand . Machen wir 12 draus. Ja, also richtig, in diesem Div werden wir den Hedge One Tag haben, der als Überschrift gespeichert wird. Jetzt gehe ich zum Thema. Ich möchte es von hier kopieren, das Headtag markieren, hierher kommen und einfügen. Wir müssen nur die Beschreibung ändern. Unsere Mahlzeit speichern. Und hier ist es. Kannst du direkt unter dem H1-Tag sehen, wir werden ein Div haben, gib ihm einen Klassennamen. Und dann das Div weniger stilisieren. Wir möchten, dass dieses Div sozusagen in einer Rasterspalte erscheint . In Ordnung, also sagen wir Display Grid. Dann. Auf mittelgroßen Geräten wie iPads möchten wir, dass das Raster in zwei Spalten angezeigt wird. Also mache ich Rasterspalten mit zwei Strichen, so einfach ist das. Also auf einem kleineren Gerät, nämlich SM, ändere diesen Typ in S M. Auf einem kleineren Gerät wollen wir eine Spalte. Und auf einem größeren Gerät wollen wir es mit vier Spalten. Hier. Ich ändere es auf unseren GI. Und nicht das LG in Form Ihres Gadgets. Okay, das ist groß. Susan, hast recht, welches Nest? Der Abstand sollte sechs betragen, aber ich denke, wir sollten den Rest der Stile implementieren , wenn wir mit dem Design fertig sind. Hier innerhalb der Div müssen wir die Daten zuordnen. Und natürlich haben wir diese Daten in der vorherigen Vorlesung hierher importiert. Und es ist richtig, wir sind in den SRC-, SRC-Daten, und dann werden Sie die Daten-JS-Datei sehen. Also rechts in diesem Modul haben wir die Mu-Daten. Und das ist natürlich nur eine Reihe von Objekten. Und schreibe das Renderobjekt, wir haben die Elemente in Form eines Schlüssel-Wert-Paares, der ID, des Namens, Kategorie, des Bildes und des Preises. Und dann haben wir wie viele von ihnen hier? Wir haben bis zu 15. Gut. Befehl B, um den Explorer zu schließen. Dann öffnen wir hier die geschweifte Klammer, um JavaScript-Ausdrücke aufzunehmen. Aber bevor wir fortfahren, müssen wir die Daten oben importieren, ich werde Importe durchführen. Es wird ein benannter Export von Mahlzeitendaten aus Data Slash Data GIS sein. Genau hier mache ich eine Punktkarte mit den Mahlzeiten, die Kartenmethode, den Impfstoff, einen Parameter namens Item. Und natürlich können Sie diesen Parameter beliebig benennen , aber ich empfehle Ihnen dringend, sich aber ich empfehle Ihnen dringend den Konventionspunkt zu halten, okay? Sie können ihm aber an Ihrer Seite einen anderen beschreibenden Namen geben. Dieses Element hier steht also für alle Elementrechte innerhalb des Objekts. Stellen Sie es also auf unsere Funktion ein. Und dann wollen wir eine Benutzeroberfläche zurückgeben. Richtig, innerhalb der Benutzeroberfläche werden wir ein Div haben. Geben wir ihm einen Stil. Dann. Die Grenze dieses Divs wird keine sein , da dies als Karte dienen wird. Ja. Das ist also der Div, auf dem die ganzen Höchstwerte beruhen werden. Also werden wir die Grenze auf Hoover bekannt machen. Wenn du den Mauszeiger auf diesem Div oder auf dieser Karte bewegst. Wir wollen es sozusagen auf 105 skalieren. Und die Dauer ist 300. Schließ es. Ja, also welches Nest? Jetzt werden wir ein IMG-Tag haben. Bild. Wir machen SRC, das ist die Quelle und die Quelle dieses Bildes. Es stammt aus dem Artikelpunktbild. Schließe es mit dem selbstschließenden Etikett. Die Sauce hier stammt also natürlich aus den Daten, die wir oben importiert haben. Wenn Sie also die IDs, Can you see beautiful now on a large screen, speichern und im Browser auschecken , erscheinen sie in vier Spalten, Spalte eins, Spalte 23.4. Wenn Sie genau hinschauen, wenn ich mit dem Mauszeiger auf das Bild gehe, wird es ein wenig vergrößert, und das macht es extrem schöner. Schau es dir an. Kannst du sehen, aber ich verstehe, dass zwischen den Elementen kein Abstand ist, aber das können wir genauso gut schnell beheben. Jetzt geh zurück zur Karte, das ist dieser Typ hier. Ich mache Gap, The Gap of Six. Speichern Sie im Browser. Kannst du sehen, dass wir jetzt Platz zwischen den Bildern haben. Aber auch hier wirst du feststellen, dass die Bilder nicht gut sind, Stout, mach dir keine Sorgen, wir werden das in einem G V machen. Jetzt ist es uns gelungen, alle Bilder richtig anzuzeigen, innerhalb der Mahlzeitendaten. Diese Typen hier. Das ganze Zeug ist cool. Jetzt wissen Sie, wie Sie mit React js mithilfe der Map-Methode dynamisch vorgehen können. Unterricht, gut. Wunderschön. In Ordnung, lass uns weitermachen. Jetzt. Lassen Sie uns das Bild stilisieren. Also hier mache ich className, direkt in der Klasse, ich mache die Breite. Machen wir es zu 100 Prozent, die Höhe. Machen wir es im Browser zu 100% sicher, die IDs. Nun, alles ist cool, aber wenn Sie es noch einmal genau beobachten, werden Sie feststellen, dass die Bilder irgendwie kaputt gehen, wie dieses Bild hier drüben. Also müssen wir die Größe des Bildes so ändern, dass es in seinen Container passt. Und das geht, indem Sie die Objekt-Feeds angeben. Komm her. Und ich werde Object Dash Cava machen. Der Objekt-Feed ist also Cava, speichern Sie ihn im Browser. Kannst du sehen, dass sie jetzt alle gut aussehen, ich mag es. Lassen Sie uns den unteren Teil des Bildes etwas kurvig gestalten. Komm her und ich mache einen abgerundeten Strich, LG, speichere im Browser. Papas. Jetzt hast du die abgerundeten Ränder. Hoffe du kannst es deutlich sehen. Fein. Lass uns weitermachen. Okay, Leute, ich beobachte gerade etwas. Wenn Sie es sich genau ansehen, werden Sie feststellen, dass die Höhe der Bilder nicht gleich ist. Ich mag eher diese Dusche hier. Die Höhe ist bei dieser Pizza nicht gleich. Und auch diese sehr leckeren Tilapia-Fische, die Sie dort sehen können. Wir müssen also nach einer Möglichkeit suchen , die Höhen anzugleichen. Und natürlich wird es sehr einfach sein. Ändern wir also die Höhe auf 200 Pixel. Wenn Sie im Browser speichern. Sie sind alle gleich. Nun, der Unterricht ist gut, wunderschön. Wenn das Bild also unterbrochen ist, müssen wir die alternative Option anzeigen. Also hier werde ich es abwechseln. Wir wollen es dynamisch anzeigen. Ich mache den Artikelpunkt mit dem Namen des Artikels. Gut. Nachdem wir das getan haben, arbeiten wir an dem Namen. Direkt nach dem abschließenden Tag des IMG werden wir ein Div haben, geben Sie dem Cluster einen Namen, um ihn zu stilisieren. Und dann lassen wir es Flex anzeigen. Richten Sie den Inhaltsabstand zwischen oben und unten für den Abstand links und das Muster rechts aus. Machen wir auch vier draus. Okay, lass uns diese beiden machen , damit es nicht zu viel wird. Schließ den Div. Speichern, direkt in diesem Div verwenden wir das P-Tag, um den Preis anzuzeigen. Okay? Ich werde Hi Tim, Hunde, Preis, Speichern und im Browser sehen. Okay, jetzt hast du den Preis hier drüben, aber so wollen wir ihn nicht. Lassen Sie uns es jetzt dialysieren. Geben wir ihm einen Klassennamen. Wir wollen, dass der Hintergrund orange ist. Orangefarbener Strich 700. Die Höhe ist, sie ist in der Breite. Ist 18. Abgerundet wollten wir zum Narren halten. Können Sie sehen, dass der Randradius dadurch fast zu 100% sphärisch wird. Jep. Wenn du im Browser speicherst, Papas. Okay, kannst du sehen, dass das jetzt nicht gut aussieht. Also wollen wir es jetzt oben auf dem Bild platzieren. Also werde ich Margin Top machen. Es wird eine negative Zehn sein. Deshalb verwende ich diese Minusgrenze als Zehnergrenze. Dadurch wird dieser Wert also tatsächlich zu einem negativen Wert. Speichern Sie und sehen Sie, wovon ich spreche. Es wird es an die Spitze bringen. Kannst du jetzt sehen, wir haben das Zeug hier oben auf dem Bild. Denken Sie also daran, bevor es unter dem Bild war, jetzt ist es oben, rechts. Also der Test, lass es uns weiß machen. weiß. Pui, das ist das Muster oben und unten, unten für die Polsterung links und rechts ist am Rand, ist acht, weil wir einen sehr großen Rand haben wollen . Wenn Sie selbst sparen und säen, können Sie sehen, dass es allmählich Gestalt annimmt. Ich liebe das ehrlich gesagt. Das sieht so nett und so wunderschön aus. Ja, das ist cool, großartig, großartig, fantastisch. Die Schriften, lass es uns fett machen. Dashboard für Unternehmen. In Ordnung, also habe ich den Preis nicht angezeigt. Das Nest und die Schlange sind, schauen wir uns das gleich hier an. Der Name der Mahlzeit. Ja, also direkt über dem Preis werden wir noch ein P-Tag haben. Dann mache ich den Punktnamen des Artikels. So einfach ist das. Speichern Sie, sehen Sie es sich an. Und du siehst, der Name erscheint hier. Und im Moment hat es den Preis nach rechts gedrückt. Alles hier oben ist gut und ich liebe es. Lass uns weitermachen. Geben wir ihm ein bisschen Stil. Hier. Ich werde das Font-Dashboard machen. Das ist das einzige, was wir hier tun werden . Ich kann es dir versichern. Okay, cool. Die nächste ist die View-More-Abstimmung. Ja, wir werden also direkt unter dem Namen des Artikels eine Schaltfläche „ Mehr anzeigen“ haben . Also direkt nach diesem schließenden Div werden wir ein weiteres Div mit dem Klassennamen haben. Okay, lass es uns schließen. Geben wir ihm eine Polsterung links von zwei und dann die Polsterung oben und unten. Lass es uns fallen lassen. Okay, jetzt siehst du vielleicht nichts. Also lasst uns hier daran arbeiten. Wir werden ein P-Tag haben und ich werde eine solche Ansicht machen. Und was ich tun werde, ist es mit einem Pfeil anzuzeigen. Also geh nach oben. Lass uns importieren. Lassen Sie uns das rechte Pfeilsymbol SM importieren von. Bevor wir also mit der Eingabe fortfahren, lassen Sie uns das Paket hier schnell installieren. Npm install, adhere, icon slash, react on here, ist es möglich, auch deine Seite zu besuchen und sie von hier zu kopieren. Sie sehen grünes Licht für die Installation. Die Lösung ist im Gange, also lasst uns sie weiterhin aus Hero Icon Slash, React und Look importieren . Die Installation ist abgeschlossen. Wunderschön. Okay, lass uns den Server starten, damit wir es nicht noch einmal machen müssen. Also hier wollen wir das Symbol anzeigen. Und ich werde nach dem View mehr machen. Ich werde unser OSM-Symbol richtig machen. Verschließen Sie es mit einem selbstschließenden Etikett. Geben wir schnell dieses Tau, die Breite, an. Machen wir fünf draus. Rand links. Lass es uns auch schaffen. Ja, also wenn du den Browser speicherst und auscheckst, okay, Leute, das Symbol funktioniert nicht. Ich weiß nicht wirklich warum. Also pausiere ich einfach das Video und recherchiere dann hinter den Kulissen, um zu verstehen, warum das Symbol nicht funktioniert. Weil wir hier eigentlich das Richtige getan haben. Wir können genauso gut etwas wie Slash Outline machen. Mal sehen, was passiert. Es hat nicht funktioniert. Okay, schauen wir uns die Konsole an. Sie versuchen zu importieren, bla, bla, bla, bla, bla, bla, bla. Von V1. Beide haben Ihre eigene Icon-Vision für unsere richtigen Leute installiert, es scheint, dass sie die Bibliothek tatsächlich aktualisiert haben. Also muss ich jetzt hinter den Kulissen einen Reset machen und dann schauen, was für uns funktioniert. In Ordnung. Wir sehen uns dann. In Ordnung, Leute, geht los. Nach den Recherchen , die ich hinter den Kulissen angestellt habe, wurde mir das klar. Sie haben die Bibliothek aktualisiert, okay, die einzige Lösung, die ich im Moment habe , besteht darin, die professionelle Bibliothek herunterzustufen. Wenn Sie hier nachschauen, werden Sie feststellen , dass wir Version 2.0 installiert haben. Die Idee ist also, es auf Version eins herunterzustufen. Ja, also werde ich es einfach markieren, löschen und direkt in der Datei package.json speichern. Und komm her, lass es mich dir zeigen. Wir müssen diesen Typen von hier kopieren, so, verstanden. dann direkt im Terminal sicher, dass Sie sich im Client-Verzeichnis befinden, und geben Sie den Befehl V zum Einfügen ein. Dann mache ich das einfach, weil wir auf eine bestimmte Version abzielen müssen , 1.0, 0.6. Dies ist also die Version, die es uns ermöglicht , diesen bestimmten Fehler zu verwenden. Also, wenn ich es installiere, schauen wir mal, was passiert. Okay, gut. Installiert, erfolgreich. Und warum ist es so? Also geh zurück zum Gyrus medialis. Und wenn Sie diese Gliederung nicht haben, müssen Sie einfach so etwas tun. Kontur mit Schrägstrich. Speichern. Fangen wir noch einmal mit mehreren an. Ordnung, also wenn Sie nach unten scrollen, ist hier der Fehler. Jetzt haben wir also den Pfeil auf dem Bildschirm angezeigt. Dann muss die Nesta-Linie richtig ausgerichtet sein , weil wir wollen, dass sie direkt vor der Ansicht steht. Ja. Gehen Sie also zurück zum VS-Code. Dann. Lassen Sie uns das P-Tag dialysieren. Gib ihm einen Klassennamen. Hier lassen wir es Flex anzeigen. Wenn Sie also Flex anzeigen, wird alles in derselben Zeile angezeigt. Hier ist es, kannst du es sehen? Fantastisch. Wir werden die Elemente zentriert ausrichten. Der Test. Ausweichen. Die Indigo-Charge erreicht 100 Stück. Lass es uns überprüfen. Oh, wunderschön. Hat mal nachgesehen. Kannst du sehen? Es funktioniert gut. Nehmen wir an, es gibt Leerzeichen zwischen dem Anzeigemodus und der Elementname ist tatsächlich zu groß und er ist von der linken Achse aus nicht gut ausgerichtet. Also lasst uns das schnell beheben. Geben wir ihm eine Margenobergrenze. Es wird ein negativer Wert sein, was ihn an die Spitze bringen wird. Machen wir sieben draus. Speichern Sie den Browser. Jetzt hat es funktioniert, aber es ist nicht in derselben Zeile von der linken Seite. In Ordnung Leute, das ist alles für heute. Und in der nächsten Vorlesung werden wir mit dieser Komponente fortfahren. 65. 63 Meal: Willkommen zurück an alle. Okay, also bevor wir weitermachen, möchte ich Ihre Aufmerksamkeit auf ein sehr wichtiges Ergebnis lenken und ich, um die Konsole zu öffnen, oder? Wir sind in der Konsole. Ihr wollt sehen, dass es in einer Liste ein einzigartiges Requisit haben sollte, Leute, ich dachte eigentlich, ihr werdet es an eurer Seite herausfinden können. Aber kein Problem, ich werde dir helfen, hier zum VS-Code zurückzukehren . Lass mich sehen. Direkt in diesem Div werden wir den Schlüssel angeben. Schlüssel entspricht item.name id. Die ID kann verwendet werden, um die Artikel im Array der Mahlzeitendaten eindeutig zu identifizieren. Natürlich weißt du das. Lass es mich dir noch einmal zeigen. Okay, hier ist es. Die ID ist also einzigartig. Wir müssen also die ID als eindeutigen Schlüssel verwenden, um jedes Element im Array oder jedes Objekt zu identifizieren, sozusagen Refresh. Und jetzt, wenn Sie die Konsole aktualisieren, funktioniert alles einwandfrei. Du hast nicht mehr den lästigen Irrtum über das Gute. Eine weitere wichtige Sache , die Sie zur Kenntnis nehmen ist der Name des Artikels und des View Mobile-Teams. Also wollen wir, dass es in der Reihe ist. Kannst du sehen, dass es so aussieht, als ob es sich überlappt. Was wir jetzt tun müssen, ist , sie richtig auszurichten. Komm her. Also genau in diesem Div, diesem Div hier drüben. Also haben wir gesagt, dass das Muster, links das Muster rechts, hier vier ist und Micky zwei hier, Speichern. Jetzt ist alles in Ordnung. Eine weitere Sache, die wir hier tun möchten, ist, dass zwischen der Überschrift und den Artikeln kein Leerzeichen steht . Also werde ich es einfach vermasseln. Hier. Der PI muss 12 sein. Das hier. Mal sehen, was passiert. Lass uns hier einen PUI haben. Aber oben und unten, unten, machen wir vier daraus. Im Browser speichern oder nicht? Jetzt funktioniert alles wie erwartet einwandfrei. In der nächsten Vorlesung werden wir mit der Implementierung des Bootfahrens beginnen , um die Artikel nach Kategorien zu sortieren. Wir sehen uns in der nächsten Vorlesung. 66. 64 Sort: Okay, jetzt haben wir ein sehr schönes Design mit den auf dem Bildschirm angezeigten Elementen. Der nächste Schritt ist die Implementierung der Boardings, um die Artikel nach Kategorien zu sortieren. Ordnung, also beim Klicken auf die Schaltfläche möchten wir die Artikel nach den entsprechenden Kategorien sortieren . Lassen Sie uns das schnell umsetzen. Vs-Code. Also, gleich nach dem abschließenden Headtag, werden wir eine Div machen. Geben wir ihm einen Klassennamen, damit wir ihn stilisieren können. Wir werden diesen Div Display Flex haben. Die Flexrichtung ist ein Doppelpunkt. Bei großen Geräten wird die Flexrichtung Rho sein. Richten Sie den Inhalt in der Mitte aus, schließen Sie den DFF. Also richtig, innerhalb dieses Div werden wir ein weiteres Div haben, ihm einen Klassennamen geben und dann können wir das Div stilisieren. Gerade jetzt. Wir werden einen Display-Flex haben, also kopiere ich einfach von hier und füge ihn ein. Wir wollen auch, dass es gerechtfertigt ist, Paste zu zentrieren. Und was ist wiederum auf einem mittleren Gerät MD. Wir wollen auch Inhalte rechtfertigen, um sie in den Mittelpunkt zu stellen. So einfach ist das. In Ordnung, lassen Sie uns schnell die Schaltflächen erstellen. Das werde ich machen, in Ordnung, wir sind in diesen Bootshighlights. Dupliziere es dreimal. Also hier mache ich Pizza, checke ein, checke die Schreibweise des Huhns ab. Und zum Schluss mache ich Salat, spare. Und mal sehen, was wir im Browser haben. Und Knochen. Kannst du sehen, dass es so aussieht. Es sieht in der Tat sehr toll aus, aber ich möchte es ein bisschen professionell fackeln, damit der Knopf wie Anden gemessen aussieht. Was jetzt also zu tun ist, den Botanikunterricht zu geben und ihn dann zu stilisieren, betont der Bertin. Und bitte müssen Sie hier nur präzise sein, ich hebe nur die Stimmrechte innerhalb des Tags hervor. Ich hebe jetzt die Zungen hervor. Wenn Sie also den ersten unterstützenden Präsidenten, das OT und die Befehlstaste auf Ihrer Tastatur markieren . Tippen Sie dann auf die Abwärtspfeil-Taste , um alle Dinge mehrfach auszuwählen, und geben Sie ihr dann einen Klassennamen. Jetzt kannst du sehen, dass wir alle Knöpfe auf einmal stilisieren wollen , und das ist fantastisch. Das erleichtert die Arbeit. Leute, ich bringe euch hier ein paar professionelle Stopps bei. Und ich hoffe es gefällt dir. Gib ihm einen Spielraum von eins. Der Rand wird orange sein, Strich 700, aber der Test wird weiß sein. Bei Hoover wollen wir also die Hintergrundfarbe auf Weiß ändern. Ich werde es mit Hoover machen. Ändern Sie den Hintergrund auf Weiß. Ja. Dann auch auf Hover. Wir wollen den Test auf Orange Dash 700 ändern. Wieder bei Hoover. Wir wollen die Rahmenfarbe ebenfalls auf Orange Dash 700 ändern . Ich denke, das ist alles für heute. Okay, lass uns schnell im Browser speichern. Hoppla, sieh es dir an. Also Leute, lasst uns hier den Hintergrund ändern. Wir müssen den Hintergrund anwenden. Lassen Sie mich Ihnen zeigen, wie wir das jetzt machen. Hier haben wir die Grenze, die orange sein soll. Der Test ist weiß, der Rand ist eins. Und dann geben wir den Hintergrund an. Bg, Dash, Orange, Dash, 700, speichern Sie und sehen Sie sich das Ergebnis im Browser an. Gut. Alles funktioniert einwandfrei. Aber im Moment, wenn Sie auf die Schaltflächen klicken , passiert nichts. Ups, Leute, schaut euch das an. Stellen Sie sicher, dass Sie es korrigieren. Es sollte solide sein und nicht anders. So wie das. In Ordnung. Pizza, alles, alles ist buchstabiert. Und dann spare hier. Gut. Es sieht gut der Hover-Effekt funktioniert einwandfrei. Wunderschön. Ich liebe ehrlich gesagt, was ich sehe. Wenn wir also auf die Erbsen klicken, die abstimmen , werden alle Elemente ausgewählt, die sich auf die Piazza beziehen. Chicken wählt die Artikel aus, die mit Hühnchen zu tun haben. Und dann filtert Solid auch die solide bewerteten Artikel heraus. Also, wie macht man das jetzt? Also müssen wir zuerst den US-Haken an der Spitze importieren. Es ist wichtig, Schulden zu verwenden. Und hier werden wir die Usted Snippets machen. Und ich nenne es Lebensmittel. Wir werden solche Lebensmittel auf Cup stellen. Ich habe es mir angesehen. Und hier wird der Anfangszustand die Mahlzeitendaten sein, das ist das Datenobjekt, das wir im Datenpaket haben. Ist es wichtig, dir das noch einmal zu zeigen? Okay, lass es mich dir hier zeigen. Das ist die Mahlzeit Beta, okay? Nachdem wir dies getan haben, wird davon ausgegangen, dass wir die Mahlzeitendaten einer Variablen namens Lebensmittel zugewiesen haben . Also werde ich es kopieren, komm her. Also machen wir eine Food-Punktmap , wenn du den Browser speicherst und auscheckst. Satz, alles cool. Ja. Stimmt. Lassen Sie uns also die Filterfunktionalität implementieren. Vermassel es direkt unter den Zustandsvariablen. Wir werden die Funktion definieren, um die Artikel nach jeder Kategorie zu filtern. Jetzt mache ich die Kategorie Const Few TA, das ist der Name der Funktion. Dann nehme ich die Kategorie als Parameter und setze sie dann auf unsere Funktion. Genau hier müssen wir den Anfangsstatus aktualisieren. Also werde ich den Punktfilter für die Mahlzeitendaten weil wir die MUX-Daten filtern werden , um jede Kategorie genau auszuwählen. Okay? Also hier werde ich den Artikel machen, ja. Stellen Sie es erneut auf unsere Funktion ein. Innerhalb von „Bereit“ geben wir die Punktkategorie des Artikels zurück , die der tatsächlichen Kategorie entspricht, richtig, innerhalb der Mahlzeitendaten. Nachdem Sie dies getan haben, müssen Sie den Onclick in weniger als einer Zeile implementieren. Formatieren wir den Code. So wie das. Entklicken Sie auf „Gleichheit“. Wir müssen die Lebensmittel und Lebensmittel auf meine Daten aktualisieren. Okay, gut. Markieren Sie diese Kopie, kommen Sie zu dem Stück nach oben oder unten und fügen Sie es dann hier ein. Aber jetzt wollen wir in diesem Fall die Funktion aufrufen , die wir hier definiert haben. Nennen Sie diese Funktion so. Dann müssen wir in der Kategorie Pizza bestehen. Okay? Speichern Sie und lassen Sie uns sehen, ob es funktioniert. Es heißt, dass Kategorien nicht definiert sind für. Habe ich das gemacht? Wohingegen, oh meine Güte, Leute, schaut euch Zeile zehn an. Jetzt sollte es funktionieren. Es ist mein Datum ist nicht definiert. Ups. Guys Augen schließen sich hier. Es ist spät in der Nacht, das tut mir leid. Versuchen wir es jetzt auf der Piazza. Es funktioniert, Leute, sieht wunderschön aus. Und wenn ich auf Alle klicke , werden alle Mahlzeiten zurückgegeben. Ich finde das gut, aber Hühnersalat funktioniert momentan nicht. Lassen Sie uns das schnell umsetzen. Ich muss diesen Typen nur kopieren. Fügen Sie es hier ein. Und das wird Hühnchen sein. Ich liebe Hühnchen so sehr. Kopieren Sie dann erneut, innerhalb des Festkörpers platziert, und ändern Sie dann die Kategorie in Festkörper. Speichern. Im Browser. Auffrischen. Wenn Sie auf Pizza klicken , werden Pizza, Hühnchen und Hühnersalat angezeigt. Es zeigt solide. Das ist extrem fantastisch, Leute und ich liebe es. Ich liebe jeden Teil dieses Kurses. Das ist alles für heute und alles funktioniert wie erwartet einwandfrei. Lassen Sie uns die Reaktionsfähigkeit des Mobilgeräts überprüfen. Kannst du das sehen? Es funktioniert gut? Schau es dir an. Nehmen wir es auf einem iPhone-Gerät auf. Salathuhn. Oh mein Gott. Okay, lass uns weitermachen. In der nächsten Vorlesung werden wir mit der Implementierung des Abschnitts mit den Top-Kategorien beginnen. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 67. 65 Trending: Wunderschön. In Ordnung, also werden wir in dieser Vorlesung an den Top-Kategorien arbeiten. Im Grunde werden wir also die Kategorien zuordnen und sie auf dem Bildschirm anzeigen lassen. Und natürlich werden wir dem Design ein sehr schönes Aussehen verleihen, damit es Design ein sehr schönes Aussehen für die Augen der Endbenutzer attraktiv aussieht. Gehen Sie direkt zum VS-Code-Befehl B, um die Explorer-Kategorien Jazz zu öffnen . Und dann werde ich eine grobe Untersuchung durchführen, funktionale Komponente degenerieren und dann müssen wir nur noch einmal die Daten durchgehen. Also hier sind die Kategoriendaten, dieser Pfeil hier drüben mit Objekt und dann die Elemente dort drüben. Also werden wir im Grunde den Namen und die Bilder anzeigen. Schließ es. Also werde ich zuerst Kategorien importieren. Und bitte, das ist ein kleiner Buchstabe aus Daten mit Schrägstrich und Schrägstrich. Natürlich solltest du das inzwischen wissen. Wir müssen die Kategorienkomponente direkt in der App rendern . Und stellen Sie bitte sicher , dass Sie es oben importieren. Also werde ich jetzt die Kategorien console.log erstellen. Etwas erscheint auf jeden Fall direkt auf der Konsole. Und hier sind die Details. Kannst du sehen? Der Index muss Null sein, die ID ist eins, der Name der Kategorie und der Bildpfad. Ja, Leute, genau das haben wir jetzt. Schauen wir uns also an, wie wir all diese Toughs auf dem Bildschirm anzeigen können . Geben wir dem Div einen Klassennamen, um es zu stilisieren. Die maximale Breite wird 15, 20 Pixel betragen. Marge, automatisch. Polsterung links und unten rechts ist für ausländische Oberseite und die Polsterung unten beträgt 12 K. Ich möchte genau sein, also bin ich mir dessen nicht sicher. Lass mich das Mail-JS oder irgendwas anderes öffnen und lass mich sehen. Okay. 15, 20, ich glaube, das war's. Okay. Fein. Wenn du hier speicherst, haben wir ein Head-Tag, das als Überschrift gespeichert wird, Seite eins, direkt in den Kategorien „ Ich werde auch Trending“. Ich muss nur den Stil von hier kopieren. Sie sind alle gleich. Kopieren. Komm her. Ich muss es einfach so ersetzen. Speichern Sie den Browser. Hier. Ist es. Gut? Das PY ist also 12 Pixel, ich denke, wir sollten es zu vier Pixeln machen. Ja, das ist jetzt Beta. In Ordnung, also lass uns weitermachen. Vanessa Line besteht gerade darin, die Daten zu kartieren und sie dann auf dem Bildschirm anzeigen zu lassen. Und stilisieren Sie den Artikel auch so , dass er in den Augen der Endbenutzer gut aussieht. Hier haben wir ein Div, geben ihm einen Klassennamen, einen Rasterstrich. Also lassen wir es das Raster anzeigen. Auf einem mittleren Gerät. Wir möchten, dass das Raster die sechs Spalten anzeigt. Geben Sie dann der Lücke fünf, Polsterung oben und unten, fünf, Polsterung links und Muster rechts. Lass es uns auch schaffen. Beginnen wir mit der Zuordnung der Kategorien. Kategorien, Punkte, Karte. Ich glaube, Sie alle können einen Gegenstand kartografieren. Es ist keine große Sache mehr für Sie alle, weil wir das gemacht jetzt in den letzten vier bis fünf Vorlesungen gemacht haben. Also, ja, sie können Elemente angeben, die jedes Element innerhalb des Arrays richtig repräsentieren . Und dann geben wir hier eine Benutzeroberfläche zurück, geben ihr ein Div mit dem Klassennamen. Dialysieren wir das Div-Muster, das für sein wird, lassen wir es Flex anzeigen. Richten Sie den Inhalt in der Mitte aus. Artikel, ausrichten. In der Mitte. Über Hoover. Wir wollen, dass es von eins bis fünf skaliert wird und die Dauer 300 beträgt. Okay, gut. Geschlossen unter dv. Schon wieder. Hier mache ich IMG, SRC Equal Item Dot Image. Schließ es. Wenn du sparst. Lass es uns im Browser herausnehmen. Hoppla, hier ist nichts. richtigen Leute. Lass es uns so machen. Schau es dir an. Kannst du sehen? Es funktioniert. Das sieht wunderschön aus. Okay, lassen Sie uns jetzt die Spitze überprüfen. Also das Bild, wir werden ihm eine Alternative geben. Wenn der Link des Bildes unterbrochen wird, könnte tatsächlich etwas anderes auf dem Bildschirm erscheinen. Nun, die Alternative, okay, ich nehme den Punktnamen des Artikels. Das ist also der Zeitpunkt, an dem der Link des Bildes tot ist, dieser Typ wird auftauchen, was der Name des Artikels ist. Lassen Sie mich Ihnen z. B. einen Fehler darin zeigen , wenn ich im Browser speichere, sehen Sie, dass die Namen angezeigt werden, oder? Das sind also die Alternativen, oder? Gut. Ich habe dir zu Beginn dieses Kurses gesagt , dass ich versuchen werde, so viel wie möglich alles einfach zu erklären , damit es jeder gut genug versteht. Und übrigens variiert die Stimme von Albert Einstein. Alles cool. Wenn Sie die Konsole überprüfen, werden Sie diese hier sehen. Also für diesen Moment möchte ich, dass du das Video pausierst und so viel wie möglich versuchst , es an deiner Seite zu implementieren. Willkommen zurück an alle. Jetzt möchte ich Ihnen helfen, dieses Problem zu lösen. Eigentlich ist es kein Problem, okay? Das ist also eine sehr einfache Sache, die jeder tun kann. Also müssen wir den Schlüssel angeben, oder? Auf höchstem Niveau. Ich werde den Artikel zu hart machen, ID, weil ID etwas ist, das verwendet werden könnte, um die Kategorien eindeutig zu identifizieren. Lass uns auffrischen. Gut. Können Sie sehen, dass es mobil und responsiv ist. Schwer, in Ordnung, also funktioniert alles wie erwartet einwandfrei. Das ist alles für heute. Und in der nächsten Vorlesung werden wir mit der Implementierung der Newsletter-Komponenten beginnen. Wir sehen uns dann. 68. 66 Trending Cateogry: Lassen Sie uns also schnell mit der Newsletter-Komponente VS Code fortfahren . Und dann müssen wir die Newsletter-Komponenten öffnen. Okay, schnell, Let's Run ist innerhalb der App-Komponente gestorben. Lass uns jetzt anfangen. Geben wir dieser Defektklasse einen Namen. Damit wir es stilisieren können. Die maximale Breite wird wie gewohnt 15, 20 Pixel betragen. Die Marge wird Otto sein. Der Test. Lass es uns weiß machen. Polsterung links und rechts. Lass es uns fallen lassen. Dann. Für die BG, die Hintergrundfarbe, geben wir unsere eigene benutzerdefinierte Farbe an. Also mache ich 24, 26, um ein weiteres Div mit dem Klassennamen zu sein. Dieses Mal werde ich ein Max Dash Auto Display Grid und ein großes Gerät machen. Wir wollen, dass es die dritte Spalte begrüßt. Und dann das Div mit dem Klassennamen. Also entriegeltes Gerät, wir werden es reparieren. Rand, oben und unten. Machen wir fünf oder vier draus. Okay. Wir machen eine Kopfbedeckung und ich gebe Ihnen nette Ratschläge, wie Sie Ihren Boden verbessern können. Wir werden hier ein P-Tag haben. Logan schon. Okay, speichern wir die Anwendung um zu sehen, was wir im Browser haben. Noch ein Div, gib ihm einen Klassennamen und dann mache ich MEINEN Strich vier, oder? Innerhalb dieser Div. Wir werden ein weiteres Div mit dem Klassennamen haben und dann werden wir einen Display-Flex haben. Die Biegerichtung ist also ein Doppelpunkt. Auf einem kleineren Gerät. Die Biegerichtung wird Reihe sein. Lassen Sie uns die Elemente ausrichten. Zentrum. Begründen Sie den Inhalt. Zwischenraum. Die Breite wird die volle Breite sein , also 100 Prozent. Okay? Okay, wir sind in diesem Div, wir werden hier ein Eingabe-Tag haben. Der Eingang wird mit einem selbstschließenden Etikett näher betrachtet. Geben wir ihm einen Klassennamen. P-Strich drei. Wir werden einen Display-Flex haben, der voll sein wird. Dann abgerundet. Midi-Test, lass es uns schwarz machen. Gut. Und der Eingabetyp equa, E-Mail. Geben wir ihm einen Platzhalter. Ich schreibe E-Mails, wenn du im Browser speicherst. Und hier ist es. Ok, die nächste Termzeile ist also, das Bootfahren zu erstellen. Also gleich nach dem Schließen des Eingabefeldes nehmen wir eine Flasche. Geben Sie diesem Button einen Klassennamen und stilisieren Sie ihn dann. Der Hintergrund wird ein benutzerdefinierter Hintergrund sein. Also mache ich die Pfeile D, F, a. Der Test ist breit. Wir wollen, dass die Grenze ein bisschen kurvig ist. Die Schriften werden mittelbreit sein. Also die Breite der Schaltfläche, lass uns 200 Pixel daraus machen. Rand links. Machen wir den linken Rand um vier. Und dann Rand oben und Rand unten. Machen wir sechs draus. Rand links und Rand rechts. Machen wir auch sechs draus. Dann. Grenze. Keine. Also hier werde ich mich sicher benachrichtigen. Kannst du hier sehen, ist es meiner Meinung nach die Breite des Buttons nicht. In Ordnung Leute, hier sollen Pixel sein, oder? Gut. Also gleich nach dem letzten Div werden wir ein P-Tag haben. Und das werde ich tun. Also. Tatsächlich wird das dazu beitragen, Zwischenräume zu schaffen. Und das werde ich hier machen. Wir nehmen Span, gib ihm einen Klassennamen. Wir müssen es stilisieren. Testen, innerlich testen wird okay sein. Wir müssen hier nur dieselbe Farbe verwenden, also kopieren und einfügen. Ordnung, zu guter Letzt, was ich jetzt tun werde , ist das abschließende P-Tag zu markieren , das sich durchgesetzt hat, es dann hier zu schließen. Danach, direkt unter dem letzten Div, werden wir einen Hedge-Pfeil haben. Gib ihm einen Kurs. Das wird also die Grenze dazwischen ziehen. Dann mach dir Sorgen, ich werde es dir zeigen, okay, lass uns einen Kommentar zu diesen drücken. Speichern Sie die Anwendung. Und jetzt haben wir so etwas. Es sieht nett aus. Entferne die Kommentare und dann den Klassennamen. Ich werde es tun. Mein Strich Eight. Zur Stilisierung der Anhängerkupplung sind der G-Strich und graue Strich 700 am Rand angebracht. Strich eins. Hier sind die Ergebnisse. Okay, also diese Zeile hier drüben. Finde alles cool. Ja, was ist nochmal, lass uns das hier durchgehen, weil mir die Art, wie der Button erscheint, nicht gefällt. Also bleib hier. Mein E6. P x ist drei und dann ist P Y drei. Okay? Also denke ich, wir müssen eine Polsterung hinzufügen. Also mache ich PY , also Polsterung oben, Polsterung unten. Machen wir drei draus. Rette unsere Augen. Es sieht sehr gut aus und ich liebe es. Das ist vorerst alles für die Newsletter-Komponenten. Und in der nächsten Vorlesung werden wir mit der FUTA fortfahren. Wir sehen uns in der nächsten Vorlesung. 69. 67 Footer: Willkommen zurück, alle zusammen. Ordnung, also haben wir in der vorherigen Vorlesung die Newsletter-Komponente implementiert. Sicherlich sieht alles gut aus wie erwartet. In dieser Vorlesung werden wir also mit der Implementierung der FUTA fortfahren. Gehen Sie zurück zu VS Code, öffnen Sie den Explorer und dann sind hier die vollständigen Todd-Jahre. Jedes FCE generiert unsere funktionelle Komponente Venentonuslinie dient dazu, die notwendigen Social-Media-Symbole zu importieren , die in der Fußzeile verwendet werden. Also hier mache ich in Töpfen FA, dribbeln Sie das quadratische Komma. Und das sollte Triple B sein, dann f, ein Facebook Square, FAA, GitHub Square, Instagram. Und schließlich FA, Twitter. Und all dies stammt von React-Dash-Symbolen. Und dann müssen wir es lösen, mit dem einfachsten, das wir haben, beheben , FH Reboot Square, f. F ist großes Quadrat, GitOps Square, Instagram und Twitter. In Ordnung, lass uns weitermachen. Jetzt. Lassen Sie uns das Div dialysieren. Dann haben wir eine maximale Breite von 15 , 20 Pixeln. Die Margin wird automatisch sein. Das Muster X, das von links nach rechts verläuft, dient zum Abdecken von oben und unten zur Hintergrundfarbe. Ordnung, also lasst uns einige der Sachen aus dem Newsletter kopieren . Okay, das ist also die Hintergrundfarbe, die wir verwendet haben. Also werde ich es einfach so machen. In Ordnung. Wir nehmen ein weiteres Div, geben ihm einen Klassennamen und sind dann oben und unten, unten ist 16. Aber dann ist das linke Muster rechts vier. Wir werden ein Anzeigeraster haben. Und auf einem großen Gerät möchten wir, dass das Raster drei Spalten anzeigt. Dann die Lücke, die Lücke ist acht. Tests wie geben ihm die Farbe des grünen Rasters 300. Cool. Noch ein Div, richtig, innerhalb dieses Divs werden wir ein Headtag haben. Dann mache ich es so schnell wie möglich, stilisiere den Hadrian, gib ihm eine volle Breite. Der Test wird drei x L sein. Die Schrift wird fett sein. Die Farbe wird orange sein. Strich 500. Wunderschön. Jetzt werden wir ein P-Tag haben, oder? Beim p-Tag kopiere ich den Dummy-Test und füge ihn ein. Lassen Sie uns den Code formatieren. Nach dem abschließenden p-Tag haben wir ein weiteres Div, geben ihm einen Klassennamen und lassen ihn dann flex anzeigen. Begründen Sie den Inhalt. Zwischenraum auf mittleren Geräten. Die Breite wird 75 Prozent betragen, die Marge oben und die Marge unten. Machen wir sechs draus. Und hier ist das. Lee ist der Ort, an dem wir das Symbol anzeigen werden. Okay, also zuerst nehmen wir die quadratische Größe von Facebook. Machen wir 30 draus. Markieren Sie es dann und duplizieren Sie es viermal. Dieser Ort wird auf Instagram, FE, Twitter, GitHub Square sein. Und zu guter Letzt das FE-Dribbling im Quadrat. In Ordnung, lasst uns sparen. Lass uns das ausführen. Die Komponente direkt in der App G ist hier. Wir werden eine vollständige Vorlesung halten , um es oben zu importieren. Speichern Sie im Browser. Sie sind diese. Kannst du sehen? Schau es dir an. Facebook, Instagram, Twitter, GitHub und so weiter. Meine Tür. Es trat nicht als Zuschauer auf. Mach dir keine Sorgen. Wir werden ihm einen professionellen Coach geben. Also lasst uns das schnell machen. Also direkt nach diesem schließenden Div werden wir ein weiteres Div mit dem Klassennamen haben. Sorry Leute, richtig, innerhalb des Divs. Bei größeren Geräten werden wir den Spaltenspann-Strich verwenden, stimmt. Wir werden einen Display-Flex haben Inhaltsabstand zwischen den oberen sechs Rändern rechtfertigen. Noch ein Div, oder? In diesem Div werden wir einen Hitch sechs dunkler haben. Und ich werde den Standort genau hier machen. Ich werde ClassName gleich machen. Machen wir die Telefone mittelgroß. Der Test. Wir werden hier einen benutzerdefinierten Test verwenden. Also werde ich 999 machen. In Ordnung? Ich gebe dir einen kleinen Hauch von Grün, oder? Jetzt werden wir alles haben , zumindest wirst du schreiben, dass es keine UL war. Wir werden die Listenelemente haben. Also hier gib ihm einen Klassennamen. Das Auffüllen von oben und unten dient dazu, ASM zu testen, was die Schriftgröße und die Markierungen der Zeilenhöhe impliziert und die Markierungen der Zeilenhöhe Wir müssen es dreimal duplizieren. Also hier werde ich New York City machen. Ich mache USA, Indien. Schließlich haben wir Kanada. Ich liebe Kanada so viel mehr, oder? Und tut es übrigens. Also was S, jetzt werde ich diesen Div hervorheben. Dann werden wir es dreimal duplizieren. 123. Und das ist das tatsächliche D, das wir erstellt haben. Speichern Sie und lassen Sie uns sehen, was wir im Browser haben. Alles sieht gut aus, aber das ist sicherlich nicht das erwartete Ergebnis. Ich mag es also nicht, wie dieses Zeug verstreut ist. Gehen Sie also zurück zum VS-Code, sofern Sie das nicht schnell beheben. Im Grunde liegt hier das Problem. Hier sagten wir, auf größeren Geräten wollen wir, dass es die dritte Rasterspalte ist. Aber das Problem ist, dass alles zusammengedrückt wurde. Und ich denke, das ist einer der Nachteile von Rückenwind. Du musst den dritten Spaltenstrich machen. Wenn Sie diese Daten hier nicht verwenden, wird es für Sie nicht funktionieren. Wenn Sie also Columbus Dash Three machen, wird er in drei Spalten aufgeteilt. Dann wird alles in Ordnung sein. Und du wirst so etwas haben. Schau es dir an. Magst du es? Ordnung Leute, das ist das Ende der Vorlesung und ich glaube, alles ist wie erwartet. Kannst du sehen? 70. 68 Testen und Reparieren: Willkommen zurück an alle. Ordnung, also haben wir in der vorherigen Vorlesung die Newsletter-Komponente implementiert. Sicherlich sieht alles gut aus wie erwartet. In dieser Vorlesung werden wir also mit der Implementierung der FUTA fortfahren. Gehen Sie zurück zu VS Code, öffnen Sie den Explorer und dann sind hier die vollständigen Todd-Jahre. Jedes FCE generiert unsere funktionelle Komponente Venentonuslinie dient dazu, die notwendigen Social-Media-Symbole zu importieren , die in der Fußzeile verwendet werden. Also hier mache ich in Töpfen FA, dribbeln Sie das quadratische Komma. Und das sollte Triple B sein, dann f, ein Facebook Square, FAA, GitHub Square, Instagram. Und schließlich FA, Twitter. Und all dies stammt von React-Dash-Symbolen. Und dann müssen wir es lösen, mit dem einfachsten, das wir haben, beheben , FH Reboot Square, f. F ist großes Quadrat, GitOps Square, Instagram und Twitter. In Ordnung, lass uns weitermachen. Jetzt. Lassen Sie uns das Div dialysieren. Dann haben wir eine maximale Breite von 15 , 20 Pixeln. Die Margin wird automatisch sein. Das Muster X, das von links nach rechts verläuft, dient zum Abdecken von oben und unten zur Hintergrundfarbe. Ordnung, also lasst uns einige der Sachen aus dem Newsletter kopieren . Okay, das ist also die Hintergrundfarbe, die wir verwendet haben. Also werde ich es einfach so machen. In Ordnung. Wir nehmen ein weiteres Div, geben ihm einen Klassennamen und sind dann oben und unten, unten ist 16. Aber dann ist das linke Muster rechts vier. Wir werden ein Anzeigeraster haben. Und auf einem großen Gerät möchten wir, dass das Raster drei Spalten anzeigt. Dann die Lücke, die Lücke ist acht. Tests wie geben ihm die Farbe des grünen Rasters 300. Cool. Noch ein Div, richtig, innerhalb dieses Divs werden wir ein Headtag haben. Dann mache ich es so schnell wie möglich, stilisiere den Hadrian, gib ihm eine volle Breite. Der Test wird drei x L sein Die Schrift wird fett sein. Die Farbe wird orange sein. Strich 500. Wunderschön. Jetzt werden wir ein P-Tag haben, oder? Beim p-Tag kopiere ich den Dummy-Test und füge ihn ein. Formatieren wir den Code. Nach dem abschließenden p-Tag haben wir ein weiteres Div, geben ihm einen Klassennamen und lassen ihn dann flex anzeigen. Begründen Sie den Inhalt. Zwischenraum auf mittleren Geräten. Wir werden eine Breite von 75 Prozent haben, die Marge oben und die Marge unten. Machen wir sechs draus. Und hier ist das. Lee ist der Ort, an dem wir das Symbol anzeigen werden. Okay, also zuerst nehmen wir die quadratische Größe von Facebook. Machen wir 30 draus. Markieren Sie es dann und duplizieren Sie es viermal. Dieser Ort wird auf Instagram, FE, Twitter, GitHub Square sein. Und zu guter Letzt das FE-Dribbling im Quadrat. In Ordnung, lasst uns sparen. Lass uns das ausführen. Die Komponente direkt in der App G ist hier. Wir werden eine vollständige Vorlesung halten , um es oben zu importieren. Speichern Sie im Browser. Sie sind diese. Kannst du sehen? Schau es dir an. Facebook, Instagram, Twitter, GitHub, und das Dribbling. Meine Tür. Es trat nicht als Zuschauer auf. Mach dir keine Sorgen. Wir werden ihm einen professionellen Coach geben. Also lasst uns das schnell machen. Also direkt nach diesem schließenden Div werden wir ein weiteres Div mit dem Klassennamen haben. Sorry Leute, richtig, innerhalb des Divs. Bei größeren Geräten werden wir den Spaltenspann-Strich verwenden, stimmt. Wir werden einen Display-Flex haben Inhaltsabstand zwischen den oberen sechs Rändern rechtfertigen. Noch ein Div, oder? In diesem Div werden wir einen Hitch sechs dunkler haben. Und ich werde den Standort genau hier machen. Ich werde ClassName gleich machen. Machen wir die Telefone mittelgroß. Der Test. Wir werden hier einen benutzerdefinierten Test verwenden. Also werde ich 999 machen. In Ordnung? Ich gebe dir einen kleinen Hauch von Grün, oder? Jetzt werden wir alles haben , zumindest wirst du schreiben, dass es keine UL war. Wir werden die Listenelemente haben. Also hier gib ihm einen Klassennamen. Das Auffüllen von oben und unten dient dazu, ASM zu testen, was die Schriftgröße und die Markierungen der Zeilenhöhe impliziert und die Markierungen der Zeilenhöhe Wir müssen es dreimal duplizieren. Also hier werde ich New York City machen. Ich mache USA, Indien. Schließlich haben wir Kanada. Ich liebe Kanada so viel mehr, oder? Und tut es übrigens. Also was S, jetzt werde ich diesen Div hervorheben. Dann werden wir es dreimal duplizieren. 123. Und das ist das tatsächliche D, das wir erstellt haben. Speichern Sie und lassen Sie uns sehen, was wir im Browser haben. Alles sieht gut aus, aber das ist sicherlich nicht das erwartete Ergebnis. Ich mag es also nicht, wie dieses Zeug verstreut ist. Gehen Sie also zurück zum VS-Code, sofern Sie das nicht schnell beheben. Im Grunde liegt hier das Problem. Hier sagten wir, auf größeren Geräten wollen wir, dass es die dritte Rasterspalte ist. Aber das Problem ist, dass alles zusammengedrückt wurde. Und ich denke, das ist einer der Nachteile von Rückenwind. Du musst den dritten Spaltenstrich machen. Wenn Sie diese Daten hier nicht verwenden, wird es für Sie nicht funktionieren. Wenn Sie also Columbus Dash Three machen, wird er in drei Spalten aufgeteilt. Dann wird alles in Ordnung sein. Und du wirst so etwas haben . Schau es dir an. Magst du es? In Ordnung Leute, das ist das Ende der Vorlesung und ich glaube alles ist wie erwartet. Kannst du sehen? 71. 69 Netflix (Erstellen Sie React: Willkommen zurück, alle zusammen. In diesem Abschnitt des Kurses werden wir mit dem Bau von Netflix Cologne beginnen. Und wie immer beginnen wir bei Null, um eine neue React-Anwendung zu installieren. also direkt auf dem Desktop Lassen Sie uns also direkt auf dem Desktop schnell ein neues Verzeichnis namens Netflix Clone erstellen . habe ich nicht getan. Ziehen Sie den Ordner per Drag & Drop rechts in den VS-Code. Wir müssen nur die Seite Erste Schritte schließen. In Ordnung, also werde ich einfach ja sagen. Schließen Sie dann diese Seite maximieren Sie die VS-Code-Presse-Steuertaktik , um das integrierte VS Code-Terminal zu öffnen. Oder Sie finden es auch im oberen Menü, Domino New Terminal. Lass mich es ziehen oder bauen, es wird welche geben, also hier mache ich und sei x, create dash, react, dash n. Wie wir es normalerweise tun, werden wir es in einem Verzeichnis namens cleanse installieren. Und natürlich wissen Sie, dass React js zum Erstellen einer Frontend-Anwendung verwendet wird . Das ist der Grund, warum wir es immer in eine direkte Rückforderung einbauen. Drücken Sie die Enter-Taste , um es zum Abfeuern zu bringen. Und die Installation würde auf jeden Fall eine Weile dauern. Also muss ich die Vorlesung vorspulen. React wurde erfolgreich installiert. Hier werde ich npm machen. Start-ups sind richtig, ich mache CD-Client und dann npm start. Alles funktioniert wie erwartet. Hier ist die Beispielseite. Lassen Sie uns den Code also schnell zurück zu VS bereinigen . Der Code wurde abgelehnt. Öffne das SRC. Wir brauchen den Setup-Testpunkt js nicht. Wählen Sie aus, drücken Sie die Befehlstaste auf Ihrer Tastatur und tippen Sie dann das Trackpad, um Berichte wie Lebensläufe, Logo-Punkt, SVG up test.js und all diese auszuwählen , die wir nicht benötigen. In Ordnung, nachdem Sie dies getan haben, klicken Sie mit der rechten Maustaste und verschieben Sie es in den Papierkorb. Öffne die App Js, das Logo ist weg. Wir müssen es abwischen. Und auch hier in der App js brauchen wir nichts. Also werde ich einfach alles hervorheben, vom ersten Header-Tag bis zum schließenden Header-Tag. Wisch es ab. Stellen Sie sicher, dass Sie speichern. Gehen wir zurück zur index.js. Und natürlich brauchen wir den Bericht Web Vitals und all das Zeug hier nicht den Bericht Web Vitals und all das . Wisch es ab. Was ist nochmal? Speichern wir die Anwendung und alles ist in Ordnung. Der Browser, das sind die erwarteten Ergebnisse. Ordnung, in dieser Vorlesung beginnen wir also mit der Erstellung der Seiten und der Komponenten. Wir sehen uns dann. 72. 70 Komponenten und Seiten: In dieser Vorlesung beginnen wir mit der Erstellung der Komponenten MPGs. also die Einnahmen aus dem SRC und erstellen Sie einen neuen Ordner mit dem Namen Komponenten. Noch einer, direkt innerhalb des SRC. Und ich werde diese Seiten eine andere nennen. Und das wird dein T heißen. Und schließlich wird das Stall genannt. Gut. Stimmt. Würde das Seitenverzeichnis nicht Seiten wie die Anmeldeseite, Movie Pitch, Anmeldung und viele mehr haben . Also lasst uns das schnell machen. Melden Sie sich auf peach.genome Ways an, Sie können auch GSS verwenden, wenn Sie möchten. Aber ich bleibe immer gerne bei der Dot JS-Erweiterung. Auch hier direkt auf den Seiten. Neue Datei, peach.genes. Hier ist Spieler Dot Js. Das wird also die Movie-Player-Komponente oder -Seite sein. Schau hier, wir werden die Fernsehsendung Punkt js haben. Der pH-Wert des Films ist. Dann haben wir Netflix Punkt G ist. Ordnung, nachdem wir die Seiten erstellt haben, lassen Sie uns schnell die zugehörigen Komponenten erstellen Sobald Sie mit der rechten Maustaste auf das Komponentenpaket klicken und dann auf eine neue Datei klicken, haben wir den Hintergrundbildpunkt g hier. Schon wieder. Die Hälfte des Umsatzes hatte unsere Punkte. Das wird also vorerst in Ordnung sein , wenn wir mit den Vorlesungen fortfahren, wir würden mehr Komponenten erstellen. Ordnung, nachdem wir das getan haben, lassen Sie uns schnell die funktionalen Komponenten direkt mit ihm generieren . Also muss ich sie von hier aus einfach alle schließen, die Komponenten schließen. Und dann mache ich auf der Anmeldeseite unser FCE. Bumm, einfach so. Netflix oder ein FCE-Player, eine FCE-Anmeldung oder ein FCE. Und das sollte auf alle Seiten und Komponenten angewendet werden . So einfach ist das. Okay, lass uns an der Komponente arbeiten. Ordnung, jetzt sind wir mit dem Einrichten der Seiten und Komponenten fertig . In der nächsten Vorlesung werden wir unsere Routen einrichten. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie fokussiert und ganzheitlich. 73. 71 Die Routen einrichten: Um mit der Route zu beginnen, müssen wir zuerst den React-Router installieren Ist er hier richtig? Ich muss nur diesen Befehl kopieren. Und natürlich können Sie zu NPM js.com gehen Pakete mit dem Schrägstrich React Router mit einem Schrägstrich versehen, tun und dann den Installationsbefehl hierher kopieren. Stimmt es? Wir sind im Terminal. Ich mache Control C, um den aktuell laufenden Server zu stoppen , und füge dann den Befehl npm, install, React, Router, Dash ein. Drücke nicht die Eingabetaste, um ihn zu starten. Installiert. Erfolgreich. Die nächste Zeile ist also, den Routenbefehl P zu implementieren , um das Suchfeld oben aufzurufen. Und inzwischen solltest du wissen, wie das geht. Und dann richte ich das G hier ein. Lass uns den Explorer schließen. Zuerst. Wir werden die Routen und Routen von Browser-Routern importieren. Lass es mich dir zeigen. Ich mache in Pots, Browser Outta, Coma, Routes, Routes, Routes, einfach so. All diese Pakete Wir werden von React Dash Route kommen. Mir gefällt das nicht einfach. Ordnung, nachdem wir das erledigt haben, lassen Sie uns schnell die Runden einrichten. Also hier werde ich alles löschen, weil wir die gesamte Anwendung direkt im Browser-Router zusammenfassen wollen die gesamte Anwendung direkt im Browser-Router zusammenfassen . Also werde ich einen Browser-Router machen. Und boom, diese werden vorerst als übergeordneter Knoten dienen. Also direkt drinnen werden wir die Routen haben. Das schließt also alle Strecken ein, für die wir innerhalb ihrer Grenzen Rechte haben werden. Wir werden einzelne Routen spezifizieren. Ja, also werde ich solche Strecken machen. Das ist also jede Route , die wir haben werden. Und damit werden alle Strecken geschlossen, die wir in der NPR-Anwendung haben werden . Und dann, direkt innerhalb der Routen, werden wir es mit dem Browser-Router abschließen , so einfach ist das. Also richtig, die einzelnen Strecken einzutragen, ich werde es genau machen. Also werden wir den genauen Pfad anvisieren. Der Pfad wird gleich einem Schrägstrich sein, nehmen wir an, dass wir angemeldet sind, okay? Wann immer wir uns also auf diesen Weg begeben, müssen wir ein Element öffnen, in diesem Fall die besorgniserregende Komponente. Dann mache ich Elemente. Also die Elemente, die wir öffnen wollen, es wird eine kompetente Karten-Login-Seite sein. Stellen Sie sicher, dass Sie es schließen. Was ist das selbstschließende Etikett? Und dann stellen Sie auch sicher, dass Sie die Anmeldeseite oben importieren. Also was ich jetzt tun werde, ist die Route mit einem selbstschließenden Etikett zu verschließen. Jetzt werde ich es markieren und dann sechsmal duplizieren. Einfach so. Hier haben wir ein Ziel, die Anmeldung. Wenn wir diesen Weg beschreiten, öffnen wir die Anmeldeseite. Bitte achte immer darauf, sie oben zu importieren. Und das sind die Seiten, die wir früher in dieser Vorlesung erstellt haben . Also ist hier nichts neu. Wenn wir uns also auf diesen Weg begeben, wollen wir uns öffnen. Lass mich dir auch den Login-pH-Wert zeigen, wenn wir uns treffen. Okay, öffnen wir die Objekte. Schon wieder. Ich versuche so viel wie möglich sicherzustellen, dass es jeder gut genug versteht. Wenn wir die Anmeldewege erreichen, öffnen wir die Anmeldeseite und so weiter und so fort. Hier. Ich mache den Player. Und wir müssen auch die Spielerseite öffnen. Das machen wir hier, TV. Und das wird die Fernsehsendungen öffnen . Das hier drüben wird die Homepage öffnen. Und in diesem Fall ist die Homepage Netflix. Okay. Ich denke, damit sind wir fertig. Lass mich das jetzt überprüfen. Die Anmeldeseite, Filmseite. Okay. Wir müssen auch die Filmseite öffnen. Also mache ich das hier v. Also müssen wir die Filmseite öffnen . Was meldet sich nochmal an? Ich denke, wir haben hier alle Stopps gemacht. In Ordnung, also schauen wir es uns an. Wenn Sie die Anwendung speichern. Hier werde ich npm start machen. Schauen wir es uns im Browser an. Und jetzt sind wir direkt auf der Homepage, das ist der Netflix-Punkt js. Also werde ich Slash Login machen. Und jetzt sind wir auf der Anmeldeseite. Nochmals, nimm den Schrägstrich ab. Ich mache Slash, melde dich an. Jetzt. Lass mich ein bisschen nach oben zoomen. Jetzt sind wir auf der Anmeldeseite. Also genau so werden wir es machen. Um alle Routen zu testen. Wir müssen es testen. Was für ein Chaos, wir werden fernsehen. Und das bringt uns zur Komponente oder Seite der TV-Sendung. Also arbeiten alle ihre Künstler einwandfrei. Du kannst genauso gut testen, dass dein Ende ist. Das ist alles für heute. In der nächsten Vorlesung werden wir mit der Gestaltung der Anmelde- und Anmeldeseite beginnen. Wir sehen uns in der nächsten Vorlesung. 74. 72 BackgroundImage wiederverwendbare Komponente: In dieser Vorlesung werden wir die wiederverwendbaren Komponenten für das Hintergrundbild erstellen . Also schnell das Hintergrundbild öffnen Punkt g ist, hey, ist es. Bevor wir fortfahren, müssen wir also gestylte Komponenten installieren. Ja, lass uns zu MPM Jeers übergehen. Hey, geht es darum, die gestylte Komponente zu installieren? Sie müssen nur den Befehl hierher kopieren. Oder Sie können Dash-Komponenten im Stil von npm install ausführen. Um Dash-Komponenten im npm-Stil zu installieren, müssen wir das aktuelle Neuron stoppen und erneut untersuchen, indem wir Strg-C drücken und dann den Befehl npm hier einfügen, der die Dash-Komponenten im Stil installiert ist. Die Stilkomponente ist also das, was wir verwenden werden, um unsere Verpflichtung zu gestalten. Im Grunde ist die Startkomponente eine React-spezifische CSS- und JS-Kachellösung, die eine Plattform für Entwickler schafft, auf der sie ihren tatsächlichen CSS-Code für die Gestaltung ihrer Komponenten verwenden können. Ja, wir nutzen es also, indem wir die Literale für die gemäßigten Temperaturen angeben. Keine Sorge, Sie werden sehen, wie es in einem G V funktioniert. Ich habe die Style-Komponente hier nicht im Hintergrund installiert , wir haben auch die funktionale Komponente generiert. Also müssen wir hier zuerst Stout aus Stout-Komponenten importieren. Und direkt darunter mache ich const background container equa, start dot div. So verwendet man also die Stout-Komponenten. Und nachdem wir das getan haben, wird unser gesamtes CSS zwischen den gemäßigten Litern geschrieben. Daher müssen wir die Template-Literale angeben. Und das ist übrigens nur die Arktis. Und Arctic befindet sich in der oberen linken Ecke, direkt unter der Escape-Taste auf Ihrer Tastatur. Hier ist Lee, wo wir das CSS schreiben werden. Nachdem ich das getan habe, werde ich diese Klasse so kopieren. Hier. Ich werde das so machen. Ja. Jetzt müssen wir am Hintergrundbild arbeiten. Ich mache IMG, SRC, Equa, gehe zurück zu den Netflix-Materialien und öffne dann. Sie könnten helfen und den Link zum Hintergrundbild des Netflix-Klons kopieren . Hier ist der Link, ja, Sie müssen also nur den Netflix-Hintergrundlink kopieren. Es befindet sich direkt in den Netflix-Materialien. Und dann öffne den Code-Helper. Hier. Ich füge es einfach ein und schließe es auch mit dem selbstschließenden Etikett. Wir müssen die Alternative spezifizieren. Ich werde es hier machen. Equa, Internetverbindung. Einfach so. Ja, wenn du speicherst, okay, jetzt müssen wir dieses Bild stilisieren. Gehen Sie also zurück zu den Stout-Komponenten rechts, zwischen den Template-Literalen. Das Styling der Anwendung würde also hier stattfinden. So einfach ist das. Also geben wir die Höhe des Hintergrundbildes an. Die Höhe. Machen wir es auf 100 Aussichtshöhen. Ordnung, bevor wir weitermachen, möchte ich Ihnen die Intelligenz von Stilkomponenten vorstellen , die Ihnen helfen, die Optionen direkt in IntelliSense anzuzeigen . Wenn Sie also zB Hecke eingeben, wird die Option Höhe angezeigt. Öffnen Sie also die Erweiterungen. Die Erweiterung, die wir für das VS-Code-Highlighting-Tool für die Standardkomponente festlegen werden. Also hier mache ich VS Code Dash Stout, Large Component. Hier ist es. Dies ist also ein Tool zur Syntaxhervorhebung für die Installation von stilisierten Komponenten. Ich hatte es schon einmal. Ich habe es einfach gelöscht, weil ich es zum besseren Verständnis von Grund auf neu installieren möchte . Jetzt bin ich mit der Installation des Syntaxhervorhebungswerkzeugs fertig, das es schließen muss. Sicherlich fragen mich einige von Ihnen dem Thema, das ich für meinen VS-Code verwende. Also wieder direkt in der Setbox, du musst nur noch für dich Fata Morgana einstellen. Hier ist es. Das ist also das Thema, das ich für meinen VS-Code verwende. Und am Ende sehen Sie die Schaltfläche Installieren. Also mach weiter, um es zu installieren und dann wirst du anfangen, genau dasselbe mit deinem Lehrer zu rocken. Gut unterrichten. Wunderschön. Schließ es. Ja, also ich werde einfach speichern und dann gehen wir zurück zum Explorer. Schließ es hier unten. Lassen Sie uns die Breite angeben. Wenn ich jetzt damit fertig bin, können Sie Rechte innerhalb von IntelliSense sehen? Es zeigt die Optionen. Ich liebe das. Das macht die Dinge einfacher. Installierte Unternehmen mit wird eine Breite von 100 Ansichten haben. Und achten Sie bitte immer darauf, es mit dem Semikolon zu beenden. Wenn Sie nicht mit einem Semikolon abgeschlossen haben , bekommen Sie definitiv Probleme. Nachdem wir das getan haben, möchten wir das IMG-Tag direkt darunter stilisieren. Ich werde IMG machen, geschweifte Klammern zu öffnen und zu schließen. Geben Sie ihm eine Höhe von 100 Ansichtshöhe und eine Breite von 100 Ansichtsbreite. In Ordnung, wir sind damit fertig. Wir müssen nur die Unachtsamen retten. Sie werden auf jeden Fall sehen, was Sie in einem Hausarzt gemacht haben. Wir müssen also nur die Anwendung npm start starten. Wenn du sehen willst, was wir bisher gemacht haben, musst du nur Command P tun, die App js öffnen, okay , vorerst muss ich nur einen Kommentar dazu abgeben. Ja, und ich werde ein Hintergrundbild wie dieses machen. Wenn Sie speichern und im Browser auschecken. Hier ist es. Können Sie sehen, dass dies die wiederverwendbaren Hintergrundkomponenten sind, die wir gerade hergestellt haben. In Ordnung. Kannst du sehen? Ist in Ordnung. Perfekt. Ich liebe es. Ich muss es nur abwischen und dann den Kommentar hier entfernen. Speichern. Geh zurück zur Normalität. Gehen wir zurück zur Homepage. Entferne den Slash TV. Und er hat zumindest die Homepage, Netflix. In Ordnung. Lassen Sie mich den Code mit Prettier formatieren. Ordnung, das ist jetzt schrecklich für die wiederverwendbaren Hintergrundkomponenten. Und in der nächsten Vorlesung werden wir auch die wiederverwendbare Header-Komponente erstellen . Wir sehen uns dann. 75. 73 Header reUseAble Komponente: In der vorherigen Vorlesung haben wir die wiederverwendbaren Komponenten für das Hintergrundbild erstellt. In dieser Vorlesung werden wir also auch die wiederverwendbare Header-Komponente erstellen . Also Command P und dann auf Head ArcGIS setzen. Und natürlich haben wir all diese Komponenten auch in der vorherigen Vorlesung erstellt . Gut. Wir sind also zuerst in dieser Komponente, wir müssen die Standardkomponente importieren, die im Stil von Stout-Komponenten importiert wird. Und hier drüben muss ich das einfach abwischen. Jetzt mache ich hier den Header-Container. Also müssen wir das schnell erstellen. Ich bin hier und mache den Header-Container equa stout dot d. So erstellen Sie also Ihre Startkomponente. Nachdem wir das getan haben, müssen wir den Buck tq angeben , damit wir unsere Styles nicht dazwischen schreiben können. Hier werden wir zumindest dieses Zeug stilisieren. Lass mich ein bisschen nach oben zoomen. Kannst du das Back-to-Back hier und das abschließende Back-to-Back hier sehen. Ich denke, es ist zu sehr so. Du musst rauszoomen. Fein. Lass uns weitermachen. Hier. Wir werden ein Div haben, gib ihm einen Klassennamen oder ein Logo. Direkt in der Def haben wir ein IMG-Tag, SRC equa. Kopieren Sie den Link des Netflix-Logos und fügen den Link des Netflix-Logos direkt aus der Code-Hilfe ein. Ich habe den Link schon kopiert. Gehen Sie also zurück zur Catawba und machen Sie das rückgängig, indem Sie das selbstschließende Etikett verwenden. Und dann müssen wir die Alternative spezifizieren , die ich hier draußen machen werde. Und ich werde eine Internetverbindung herstellen. Schauen Sie sich hier das Internet an. In Ordnung? Nachdem wir das erledigt haben, werden wir die Boards direkt vor dem Div mit dem Klassennamen Logo erstellen . Mit einem Klick auf diesen Button werden wir eine Bootstour machen. Wir navigieren zur Anmeldeseite oder zur Anmeldeseite, je nachdem, auf welcher Seite Sie sich gerade befinden. Ja. Wenn Sie also bereit sind, sich anzumelden, wird unten die Anmeldeseite angezeigt. Wenn Sie also bereit sind, sich auf der Anmeldeseite anzumelden, wird unten die Anmeldeseite angezeigt. Also lasst uns zuerst das schnelle Aufräumen machen. Ganz oben. Wir werden importieren. Benutze Navigate von Rate mal wo Reaktor, danach navigiere ich. Wir werden eine Variable namens Navigates haben. Erwerben, navigieren. Ordnung, also hier, wenn Sie auf diese Schaltfläche klicken, navigieren wir zu Ada, der Anmelde- oder Anmeldeseite, je nachdem, auf welcher Seite Sie sich gerade befinden. Also, wie machen wir das jetzt? Ich mache das hier, stelle es auf unsere Funktion und navigiere dann zu, Ich mache Requisiten, Punkte. Und natürlich muss er für diese Funktion auch Requisiten benötigen. Wir werden also Requisiten verwenden, um die Funktionalität des Bootes und den Test zu ändern . Also werde ich tun, wenn props dot login gleich wahr ist, werden wir zu Slash Login navigieren. In dieser gesamten Anwendung navigieren Sie also immer zur Anmeldeseite, wenn Sie diese Route wählen, um sie anzuzeigen. Wir haben es in der vorherigen Vorlesung gemacht. Hier, ist es? Ja, wann immer Sie diese Route wählen, werden Sie immer zur Anmeldeseite und zum Rest der Route sowie zu den entsprechenden Komponentenseiten navigieren zur Anmeldeseite und zum Rest der Route sowie zu . Also besuche einen anderen hier. Wir gehen zur Anmeldeseite schließen die Schaltfläche unten rechts, die Schaltfläche. Wir müssen auch den Test ändern. Lass es mich dir zeigen. Ich werde hier Requisiten Dot Login machen. Also, wenn die Aufforderung „Punkt-Login “ gleich wahr ist, werden wir den Login-Test wie folgt durchgehen. Loggen Sie sich ein. Ja. Sonst ändern wir den Test und das Boot in ein Schild. Nichts kniffliges hier drüben. Ja, lassen Sie uns sehr schnell damit beginnen, diese Komponente zu stilisieren. Aber hier zwischen der Arktis werden wir einen Display-Flex haben. Begründen Sie den Inhalt. Abstand zwischen Elementen zur Mitte ausrichten. Die Polsterung wird Sarah Far Aim sein. Nachdem wir das getan haben, müssen wir das Logo stilisieren. Das Logo, wir müssen das IMG stilisieren, das ist das IMG-Tag , das das Logo anzeigt. Hier mache ich IMG, gib ihm eine Höhe von drei Rem. Der gröbere Wert ist Zeiger. Lassen Sie uns jetzt schnell das Boarding stilisieren. Geh raus aus der Klammer, genau hier. Wir werden beides mit diesem Button hier machen. Gib ihm eine Polsterung, 0,5 Rem. Und eine Felge. Die Hintergrundfarbe, lass uns sie rot machen. Die Grenze wird als Caso-Pointer bekannt sein. Die Schrift auf dem Boot wird weiß sein, das ist der Typ hier drüben, die Anmeldung oder Anmeldung, Grenzradius. Machen wir es zu 0,2. Leute, das ist genau meine Spezifikation. Sie können also entscheiden, den Stil am Ende Ihrer eigenen Spezifikation oder Meinung zu ändern den Stil am Ende Ihrer eigenen Spezifikation oder Meinung zu . Die Schriftstärke wird sein, machen wir es fett. Und schließlich die Firmengröße, 1,05, rem, wunderschön. Speichern. Schauen wir uns kurz an , was wir bisher gemacht haben. Öffne die App js. Direkt außerhalb der Route. Wir werden den Header oben rendern. Das ist nur z.B. Sake. Save sagt, dass Requisiten nicht definiert sind. Was wir jetzt tun müssen, ist zum Header zurückzukehren. Kannst du sehen, dass das Aufforderungen sein sollen, okay, Speichern. Hier haben wir das Logo und hier haben wir die Anmeldung. Wenn Sie also hier auf diese Anmeldung klicken, werden Sie zur Anmeldeseite weitergeleitet. Schau es dir genau an. Wir sind genau hier auf der Homepage, das ist die Netflix-Seite. Wenn ich jetzt auf die Anmeldung klicke, schau es dir an. Jetzt wurden wir auf die Anmeldeseite weitergeleitet. Die Idee ist also einfach. Wenn wir uns auf der Anmeldeseite befinden, wird dieser Test hier geändert, um uns anzumelden. Wenn wir uns also auf der Anmeldeseite befinden, wird der Test innerhalb der Schaltfläche geändert, um sich anzumelden. Derzeit stehen Ihnen solche Funktionen möglicherweise nicht zur Verfügung, nur weil wir die Anmeldeseite und die Anmeldeseite nicht implementiert haben . Lass uns das in der nächsten Vorlesung machen, damit wir eine voll funktionsfähige Anmelde- und Anmeldeseite haben können . Wir sehen uns in der nächsten Vorlesung. 76. 74 Anmelde-Seite: Willkommen zurück an alle. In dieser Vorlesung werden wir die Anmeldeseite erstellen. also direkt im VS-Code Lassen Sie uns also direkt im VS-Code schnell den Explorer und dann die Komponente für die Anmeldeseite der Seite öffnen. Hier werden wir die notwendigen Dateien importieren , die benötigt werden. Zuerst müssen wir die Firma Stout in Pottstown von Stout Components importieren . Und hier importieren wir die wiederverwendbare Header-Komponente, importieren den Header von, Ups, wir müssen auf den Schrägstrich der Komponenten abzielen und dann Head IgA ist so einfach. Und wieder müssen wir auch das wiederverwendbare Hintergrundbild der Bag-Ground-Komponente aus dem Slash-Hintergrundbild der Komponente importieren das wiederverwendbare Hintergrundbild der Bag-Ground-Komponente . Okay, noch eine Sache. Wir müssen auch den US-Did-Hook importieren , weil wir ihn nutzen werden . Sind, jetzt können wir loslegen. Also hier drüben werde ich das abwischen. Dann rendere ich die Containerklasse. Jetzt müssen wir const container equa stout dot d ausführen und dann das Back-Tick angeben. Dann nehmen wir das CSS hier auf. Freunde. Ich möchte, dass du hier etwas zur Kenntnis nimmst. Du siehst den Kerl hier drüben. Diese sollten der Pascal-Namenskonvention entsprechen. Es bedeutet also, dass Sie den ersten Buchstaben jedes Wortes groß schreiben. Hier ist der Großbuchstabe C. Gut, oder? Innerhalb des Containers werden wir die wiederverwendbare Hintergrundbildklasse mit dem selbstschließenden Etikett vermieten die wiederverwendbare Hintergrundbildklasse . Also hier werden wir ein Div haben. Geben wir ihm einen Klassennamen mit Inhalten, oder? Wir sind im Inhalt, wir werden den wiederverwendbaren Header haben. Und was ich jetzt tun werde, ist die Login-Sonde hier zu spezifizieren. Lass es mich dir zeigen, öffne den Header. Kannst du hier sehen, dass wir Requisiten nehmen, also geben wir die Anmeldung an diese Komponente weiter. Wenn also props dot login wahr ist, öffnen wir die Anmeldeseite. Und sonst. Wir werden auch hier die Anmeldeseite öffnen, so einfach ist die Anmeldeseite. Wenn der Punkt-Login während der Abstimmung wahr ist, werden wir den Login-Wert anzeigen. Jetzt auch beim Bootfahren, wir zeigen ein Schild. So einfach ist das Ziel. Jetzt haben wir diese Login-Sonden direkt in die Header-Komponente weitergegeben . Unterricht, gut, wunderschön. Ordnung, hier haben wir ein Div mit dem Klassennamen body. Und genau an der Stelle an der wir ein weiteres Div haben werden, geben Sie ihm einen Klassennamen für Tests. Dann werden wir ein Hadrian-Etikett haben. Und ich werde unbegrenzt Filme, Fernsehsendungen und mehr machen . Auch hier werden wir einen Treffer für Tag haben. Und was werde ich tun? Überall, Kommaabbruch jederzeit. Auch hier werden wir einen Tag mit sechs Treffern haben. Dies sind also die Informationen , die Sie auf der Netflix-Abmeldeseite sehen können . Ja. Also kopieren wir einfach von dort. Dann mache ich mich bereit zuzuschauen. Geben Sie Ihre E-Mail-Adresse ein, um sie zu erstellen. Mitgliedschaftsrechte neu, das abschließende Div mit dem Klassennamentest. Wir werden ein weiteres Div haben, gib ihm den Klassennamen Schaum. Und direkt vom Schaum werden wir das Eingabefeld, den Typ, das Passwort und den Platzhalter gleich haben . Was ich jetzt machen werde, ist ein Passwort und der Name equa, Passwort, so einfach ist das. Und, ähm, noch eins, ein Eingabefeld. Der Typ hier entspricht E-Mail, Platzhalter entspricht E-Mail. Oder Sie können sagen, geben Sie eine E-Mail-Adresse ein oder ähnliches. Also lasst mich die E-Mail-Adresse angeben, Leute. Gut. Im Namen entspricht E-Mail. Schließen Sie es auch mit dem selbstschließenden Etikett. Was für ein Mol. Jetzt werden wir zwei Knöpfe haben. Hier. Wir werden ihn gekauft haben. Dies wird die Get Started Voting sein. Markieren und duplizieren. Dies wird die Anmeldeschaltfläche sein. So einfach ist das. Ordnung, schauen wir uns den Browser an, um zu sehen, was wir bisher getan haben. Komm her und ich werde die Route angeben, um die Anmeldung zu erreichen, die Anmeldung Seitenschrägstrich ist richtig. Hier ist die Bildhintergrundkomponente, die wir gerendert haben. Hier ist der Header, in dem wir das auch ausgeführt haben. Und unten, hier schreiben sie ups n. Die Eingabefelder. Hier ist die Schaltfläche Get Started, die Anmeldung, die E-Mail und das Passwortfeld, alles cool. In Ordnung. Es sieht so aus, als ob es nicht gut ausgerichtet ist. Ja, es liegt einfach daran, dass wir es nicht stilisiert haben. Lassen Sie uns diese Komponente also schnell stilisieren , damit sie gut aussieht. Geh zurück. Die Idee hier ist, all diese Punkte über dem Hintergrundbild zu platzieren . Wie Sie in der Kopfzeile sehen können, befindet sich das direkt unter dem Hintergrundbild. Um das zu tun, müssen wir angeben, dass die Position relativ ist, und dann wird die Position dieser Leute absolut sein. Also komm her und ich mache Position Relativ. Nachdem das erledigt ist, kannst du den Inhalt , der ist dieser Typ hier drüben, alles genau darin sehen? Wir werden es absolut machen, sodass es direkt über der Komponente des Hintergrundbilds platziert werden kann . Ich weiß, dass du verstehst, wovon ich spreche. Und in der Tat, kluger Kerl. In Ordnung, also werde ich Punktinhalte machen. Dann nehmen wir die absolute Position. Nachdem wir das getan haben, werden wir es als Nächstes von der oberen Null und von der linken Null aus positionieren . Also, wenn ich das hier mache, werden wir es auf Null setzen, wenn Sie das Auschecken im Browser speichern. Jetzt haben wir all diese Begriffe hier so . Kannst du sehen? Ich mache es von links, machen wir es auf Null. Wenn Sie also den Bildschirm beobachten, werden Sie feststellen, dass die Helligkeit des Hintergrunds ziemlich hoch ist. Ja, also werden wir es ein bisschen durchdacht machen. Also das, was oben erscheint, kann besser sichtbar sein, zum Beispiel das obere Ende hier. Ich werde also die Hintergrundfarbe angeben. Und ich werde RGBA machen. Null Komma Null Komma Null Komma Null Punkte 79. Das ist meine eigene Spezifikation, oder? Also kannst du an deiner Seite etwas anderes tun. Wenn Sie den Browser speichern und auschecken. Können Sie jetzt sehen, dass wir einen fundierten Hintergrund haben. Lass es mich dir zeigen. Lass uns das wieder ausziehen. Speichern. Wenn Sie neu laden, werden Sie feststellen , dass der Hintergrund so hell wird. Wenn du also diesen Typen freilässt, Save, Now, wird das ein bisschen gewertet, aber es erscheint vorerst ganz oben. Siehst du, ich weiß nicht, ob du die sehen kannst. Okay. Lassen Sie uns es so stilisieren , dass es zum Bildschirm passt. Geben wir ihm eine Höhe. 100 vh, die Breite 100 vh. Und Sie können sich erinnern, dass dies die tatsächliche Größe des wiederverwendbaren Hintergrundbildes ist. Wir rufen es hier also nur so auf, dass es zum Bildschirm des Hintergrundbildes passt , wenn Sie im Browser speichern. Wir haben immer noch so etwas. Und ich weiß nicht warum. Ups, das sollte so eine Ansichtsbreite von 100 sein. Und Sie können sich erinnern, dass dies die tatsächliche Dimension der wiederverwendbaren Hintergrundbildkomponente ist. Ja, also bringen wir es hierher, damit es auf den Bildschirm passt, speichern, schauen Sie sich den Browser hier an. Ist es noch einmal? Lass mich dir zeigen, was dieser Typ macht, als er Speichern kommentiert hat. Jetzt können Sie erkennen, dass der Hintergrund wirklich hell wird. Wenn du sparst. Es scheint unser Builder-Bit zu sein. Und genau danach suchen wir. Also hier mache ich Gitterschablonenspalten, 15-V-Kupplung und 85-V-h. Lassen Sie uns nun den Körper dialysieren. Der Körper. Lass es mich dir hier zeigen, ist es direkt im Körper? Wir werden einen Display-Flex haben. Und die Biegerichtung ist ein Doppelpunkt. Richten Sie den Inhalt mittig aus, richten Sie die Elemente mittig aus. Beim Speichern wird alles auf die Mitte ausgerichtet. Können Sie jetzt sehen dass das Logo an der oberen linken Ecke des Bildschirms ausgerichtet wurde an der oberen linken Ecke des Bildschirms ausgerichtet Hier wurde der Login-Button an der oberen rechten Ecke des Bildschirms ausgerichtet. Und in der vorherigen Vorlesung habe ich Ihnen gesagt, dass auf der Anmeldeseite die Anmeldeschaltfläche angezeigt wird. Wenn Sie sich auf der Anmeldeseite befinden, wird dieser untere Bereich geändert, um sich anzumelden. Ich denke, das haben wir in der vorherigen Vorlesung direkt in der Header-Komponente hier gemacht. Wenn du also die Requisiten hier drüben aufnimmst, funktioniert alles besser. Dieser Typ hier drüben. Das bedeutet also , dass wir die Login-Sonden an den Header übergeben haben. Hier wird also angezeigt, dass die Aufforderung zur Punktanmeldung gleich wahr ist. Button dort oben in der Abstimmung wird also geändert, um sich einzuloggen und sonst wird er geändert, um sich anzumelden. Aber lass es mich dir schnell zeigen. Komm her. Wir werden uns anmelden. Wenn Sie also die Anwendung, den Checkout, den Browser speichern , können Sie sehen, was wir bei der Abstimmung entworfen haben. So einfach ist das. Belassen wir es also vorerst als Login. Lass uns mit dem Stil fortfahren. Für den Test. Wir werden einen Display-Flex haben. Die Flexrichtung ist eine Spalte. Also werde ich einfach so von hier kopieren und es dann hier einfügen. Die Schriftgröße. Lass uns durch Rim kommen. Die Farbe der Telefone wird weiß sein. Lass es uns im Browser herausnehmen. Du siehst, dass alles gut ausgerichtet ist, das Zentrum. Okay, lass uns hier etwas machen. Wir müssen den Rechtfertigungsinhalt entfernen, um ihn in die Mitte zu stellen. Dann werde ich die Textausrichtung vornehmen. Center formatiert den Code, speichert die Anwendung. Und jetzt sind sie genau in der Mitte. Es ist in Ordnung. Okay. Das Nest ist die Kopfmarke. Wenn ich also ein Etikett treffe, die Polsterung 0,25 Platz für die Anhängerkupplung für das Etikett. Für. Also spezifizieren wir die Obergrenze des Randes. Und ich werde es auf -1,5 rem schaffen. Lass es uns ausziehen, damit du es deutlich sehen kannst. Drücken Sie auf der sicheren Seite auf einen Kommentar. Siehst du, ich mag die Leerzeichen zwischen den Tests nicht. Siehst du, es sieht nicht nach Linien aus. Um das zu lösen, müssen Sie das Randoberteil anwenden. Und ich möchte auch, dass die Fernsehsendung untergeht. Also für die Polsterung nehme ich die 0,25 Rem ab. Also gebe ich ihm 0,25 Rem. Gut. H6. Der Treffer F6 entspricht exakt der gleichen Dividendenmarge sodass er näher kommen kann. Alles nett. Ordnung, also fangen wir an, das Eingabefeld einschließlich des unteren Feldes zu stilisieren . Also genau hier mache ich das Dodds Formular. Wir werden ein Anzeigeraster haben. Geben wir die Breite auf 60% an. Okay? Wir müssen auch die Spalten der Rastervorlage angeben. Aber lassen wir das vorerst. Also hier werden wir den betrachteten Input stilisieren , die Farbe. Machen wir es schwarz. Verzeihung? 1,5 rem Die Schriftgröße, 1.2 rem. Und die Breite dieses Eingabefeldes wird 45 rem sein. Schauen wir es uns im Browser an. Speichern. Ich liebe es. Also hier sind die beiden Eingabefelder. Mach dir keine Sorgen um den Button. Dazu sind wir vorerst noch nicht gekommen. Etwas Wichtiges, das wir auch tun müssen, ist, lassen Sie mich Ihnen ein Auge zeigen, das auf das Eingabefeld gerichtet ist. Sie werden die Gliederung sehen. Sie sehen den blauen Umriss. Das will ich nicht. Also, was ich jetzt tun werde, bezieht sich auf Prognosen. Wir werden die Gliederung entfernen , nur damit es nicht so einfach ist. Also habe ich das nicht gemacht. Lassen Sie uns schnell die des Körpers stilisieren. Geben Sie ihm einen Abstand von 0,5 rem, eine Randvorlesung, um ihn mit dem Semikolon zu beenden und dann mit der Hintergrundfarbe. Lass es uns rot machen. Die Grenze, sie wird taub und gröber sein. Lassen Sie uns darauf hinweisen, zu speichern und zu sehen, was wir haben. Okay, lass es uns jetzt zusammenfassen. Die Farbe, lassen Sie mich Ihnen die Farbe der Schriftrechte zeigen. Aber beim Bootfahren fangen sie z.B. bei der Anmeldung an. Lass es uns weiß machen. Die Schriftgröße. Lass es uns ein bisschen erhöhen. 1,05 rem. Und die Breite dieses östlichen Randes beim Bootfahren. Speichern. Schau es dir an. Stimmt. jedoch Dies sind jedoch nicht die erwarteten Ergebnisse. Jetzt müssen wir also das erwartete Ergebnis erzielen. Was wir tun werden, ist das Passwortfeld zu markieren und die E-Mail anzuzeigen, wenn der Benutzer die E-Mail eingibt und den Startvorgang abbricht. Das Passwortfeld wird angezeigt und auch die Anmeldeschaltfläche wird angezeigt. Lassen Sie mich das wiederholen. Die Absicht ist, das Passwortfeld und die Anmeldeschaltfläche auszublenden . Was Sie also zuerst sehen werden, ist das E-Mail-Feld n, die Schaltfläche Get Started. Wenn Sie also Ihre E-Mail-Adresse eingeben und die Schaltfläche Get Started drücken, verschwinden die E-Mail und die Schaltfläche Get Started. Dann werden das Anmelde- und das Passwortfeld angezeigt. Lassen Sie mich Ihnen zeigen, was ich damit meine. Also scrolle nach oben. Jetzt müssen wir es umsetzen. Was die Ustedes, denken Sie daran, dass wir die USA importiert haben, früher gemacht haben. Wir müssen die notwendigen Zustandsvariablen deklarieren , die verwendet werden sollen. Wir werden es Show Password nennen. Karma legt das Show-Passwort fest, um die Stufe zu verwenden. Der Anfangszustand wird also so falsch sein. Lassen Sie uns nun das Eingabefeld konditionieren. Öffne die geschweiften Klammern. Wenn Ihr Passwort also gleich ist, zeigen wir das Passwortfeld an. Also, was ich tun werde, ist, das Passwortfeld wie diese Markierungen zu kopieren und es dann dazwischen einzufügen. Sonst. Wir zeigen das E-Mail-Feld, schneiden Sie es aus und fügen Sie es hier ein. So einfach ist das. Wenn Sie den Checkout im Browser speichern, das Passwortfeld jetzt nicht mehr angezeigt. Ja, Sie müssen also etwas eingeben, richtig, um es in das E-Mail-Feld einzufügen, und auf die Schaltfläche Get Started klicken, damit das Passwortfeld angezeigt wird. So einfach ist das. Lassen Sie uns nun eine Bedingung an den Tasten drücken, damit alles wie erwartet einwandfrei funktioniert. Lassen Sie uns schnell den Code formatieren. Hier. Wir werden noch eine lockige Klammer haben. Ich werde es tun. Wenn das Passwort anzeigen nicht existiert. Wir werden das Voting von Gets Started Hot zeigen und es hier einfügen. Jetzt. Wir werden die Anmeldeschaltfläche anzeigen. Wenn Sie im Browser speichern. Jetzt sieht alles so aus, aber wir möchten auch, dass es in der oberen rechten Ecke des Eingabefeldes erscheint . Jetzt komm her. Lassen Sie mich Ihnen zeigen, was wir links, rechts, im Schaum haben . Wir müssen die Spalten der Rastervorlage, eine Spaltenklammer, eine Klammer und eine geschweifte Klammer genau dazwischen angeben eine Spaltenklammer, eine Klammer . Also werde ich das Passwort anzeigen. Wenn Show Password wahr ist. Hier haben wir einen F-Pfeil, und dann haben wir hier einen FOR, wir versuchen, die Spalten und Fehler zu partitionieren. Wir müssen nicht NACH EINEM FÜR suchen, wenn Sie im Browser speichern und auschecken. Und das sind sie, kannst du sehen, alles sieht wie erwartet aus, perfekt in gutem Zustand. Lassen Sie mich also versuchen , meine E-Mail einzugeben. Ich gebe meine E-Mail-Adresse und klicke dann auf die Schaltfläche Get Started. Im Moment passiert nichts. Okay, gehen wir zurück und implementieren den OnClick, um mit der Abstimmung zu beginnen. Vermassele es, bis wir die Schaltfläche „Los geht's“ haben. Also klicke ich auf die Schaltfläche Get Started. Wir werden den Anfangszustand auf „Wahr“ ändern, oder? Es ist momentan also eher eine wahre oder falsche Stimmung. Also werde ich jetzt den Onclick auf die Schaltfläche Get Started implementieren . Ein Klick auf dieses Board in. Wir rufen die Setup-Funktion auf, um die eingestellten Anfangszustände zu aktualisieren. Passwort anzeigen. Wir stellen den Anfangszustand ein, den wahren Zustand. Also werden wir die Anfangszustände auf „Wahr“ aktualisieren. In diesem Fall der Typ hier drüben. Also klicke ich darauf, Fangen Sie an zu stimmen. Wir ändern den Status auf „Wahr und dann erscheint die Anmeldeschaltfläche. So einfach ist das. Also müssen wir uns jetzt erfrischen. Lassen Sie mich meine E-Mails bereinigen und dann loslegen. Sehen Sie, wenn Sie auf die Schaltfläche Get Started klicken, erscheint auch das Passwortfeld auf der Anmeldeschaltfläche. Hier können Sie Ihr Passwort eingeben. Also Freunde, das erwarten wir in dieser Vorlesung. Und außerdem möchte ich Ihnen etwas zeigen, das ich hinter den Kulissen gemacht habe und dessen Sie sich nicht bewusst sind. Wann beobachtest du diese Seite? Kannst du hier sehen, wo mein Netflix-Logo beginnt? Ich habe hier auch ein bisschen Platz . Ich habe hier etwas Platz dazwischen. Es liegt einfach daran, dass ich, um es in den Header einzufügen, eine Polsterung von einem Rem angegeben habe. Also, wenn du diesen Teil hier ausziehst und das Projekt speicherst, geh zurück. Jetzt haben Sie keinen Platz zwischen dem Netflix-Logo und der Unterseite. Das sehen also keine Zeilen wie diese aus. Und das war der Grund, warum ich hier ein Muster als Wireframe platziert habe . Jetzt kannst du sehen, sieht wunderschön aus, alles cool. Ich liebe es. Also Frankreich. In der nächsten Vorlesung beginnen wir mit der Erstellung der Anmeldeseite. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 77. 75 Login: Willkommen zurück, alle zusammen. In der vorherigen Vorlesung haben wir die Anmeldeseite implementiert. Und was die Show angeht, das sieht extrem schön aus und ich mag es. In dieser Vorlesung werden wir also mit der Erstellung der Anmeldeseite fortfahren. Lass uns schnell anfangen. Musste nicht VS-Code schreiben. Ich werde mich auf den Login peach.genome years einstellen und dann die Anmeldeseite öffnen. Wir müssen fast alles von hier kopieren, so wie hier, das ist das spontane Kopieren und Einfügen. Ja. Also was macht das nochmal, jetzt haben wir hier einen Wrapper. Und ich werde es tun, es sollte von hier aus beginnen. Zur besseren Lesbarkeit. Der Umschlag entspricht dem starken Punkt dV. Geben Sie dann das Back-Häkchen an. Er hat zumindest einen CSS-Stil gehabt, der stattfinden wird. Nachdem ich das getan habe, werde ich das löschen und dann werden wir einen übergeordneten Knoten namens Wrapper haben, das ist dieser Typ hier drüben. Die Nesta-Linie dient dazu, das Hintergrundbild wiederverwendbare Komponenten zu rendern . Sehen Sie jetzt, wie nützlich eine wiederverwendbare Komponente sein kann? Lass es uns auch hier rendern. Wir werden die wiederverwendbare Header-Komponente rendern. Aber bevor wir fortfahren, werden wir hier einen Div haben. Geben Sie ihm einen Klassennamen für den Anmeldeinhalt, wie diesen. Direkt rüber zu DV. Wir werden die Header-Komponente rendern. Und all diese Schwierigkeiten. Wir haben sie früher importiert. Wir kopieren einfach die Eingabe von der Anmeldeseite, wenn Sie speichern. Okay, lass es uns im Browser überprüfen. Komm her. Wenn Sie also unten rechts auf dieses Login klicken, befinden wir uns auf der Anmeldeseite. Sie werden zur Anmeldeseite weitergeleitet. Und lassen Sie mich Ihnen zeigen, wo wir das umgesetzt haben. Komm her, habe eine Komponente nach oben und unten scrollen lassen. Also hier spezifizieren wir den onClick. Wenn Prop Dot Login ganz richtig ist, werden Sie zur Anmeldeseite weitergeleitet. Und wenn Sie sich die Anmeldeseite ansehen, werden Sie feststellen, dass die Requisiten hier angemeldet sind. So einfach ist das. Wenn wir nun auf diese Schaltfläche klicken, zur Anmeldeseite weitergeleitet, und wir gelangen zur Anmeldeseite, werden wir zur Anmeldeseite weitergeleitet, und wir gelangen zur Anmeldeseite, melden Sie sich an . Und hier haben wir die wiederverwendbare Hintergrundkomponente gerendert. Und unten ist die Header-Komponente. Keine Sorge, wenn wir beginnen, die Verpflichtung zu stilisieren, wird alles, was hier im Inhalt enthalten ist, oben in der wiederverwendbaren Komponente für das Hintergrundbild platziert . Lass uns schnell weitermachen. Entschuldigung, richtig, nach dem Header. Wir werden ein Div mit dem Klassennamen Firma haben. Die Firma, wir werden eine weitere Div mit einem Klassennamen des Tools und dem richtigen Wort im Titel haben weitere Div mit einem Klassennamen . Du wirst hier einen riesigen Tag haben. Und ich werde das Protokollieren so einfach wie möglich machen. Ordnung, also direkt nach dem letzten Div des Klassennamentitels werden wir ein weiteres Div haben. Gib ihm den Klassennamen Container, oder? Um das Container-Div zu bringen, werden wir die Eingabefelder, Eingabetyp, die erforderlichen Texte und das sich selbst schließende Tag näher bringen. Hier mache ich Platzhalter equa, E-Mail. Sie werden also feststellen , dass ich die doppelten Anführungszeichen und einfachen Anführungszeichen verwendet habe . Es ist nicht unbedingt wichtig. Ja, also lass uns schnell weitermachen. Aber ich werde jetzt dieses Eingabefeld duplizieren , markieren und duplizieren. Dann ändere ich das hier auf Passwort, da dieses für das Passwortfeld verwendet wird. Hier gebe ich das Passwort direkt nach dem Eingabefeld ein, wir werden eine Bootstour machen das ist der Login-Button selbst. In Ordnung. Wenn Sie im Browser speichern, hier, oder? Moment müssen wir die Komponenten stilisieren , damit sie gut aussehen. Genau hier wird die Position des Wrappers relativ sein , sodass wir diesen Anmeldeinhalt direkt über der Hintergrundbildklasse platzieren können direkt über der Hintergrundbildklasse , sodass all diese Inhalte hier direkt über dem Hintergrundbild erscheinen. Also erkläre ich dieses Zeug immer wieder , einfach weil ich möchte, dass es in deinem Gedächtnis bleibt. Also hier werden wir das enthaltene Login stilisieren. Sie müssen nur den Punkt-Login-Inhalt kopieren und die geschweifte Klammer öffnen und schließen. Jetzt wird die Position lauten, weißt du was? Absolute. Also von oben, lass es uns Null haben. Von links. Lass es uns Null haben. Der Einfachheit halber behalten wir also alles, was im Inhalt enthalten ist, direkt über der Komponente für das Hintergrundbild. Und hier ist es. Können Sie sehen, dass sich jetzt alles direkt über der Hintergrundbildkomponente befindet. In Ordnung, geben wir ihm also eine Höhe von 100 Ansichtshöhe. Und, äh, wir haben auch eine Ansichtsbreite von 100. Und der Hintergrund wird mit Sicherheit derselbe sein. Also muss ich nur zur Anmeldeseite gehen und dann nach unten scrollen. Ich kopiere alles genau hier. Wir müssen keine Zeit damit verschwenden diese Planen immer und immer wieder zu machen. Das tut mir leid. Ich muss es einfach zuerst machen, aber es ist mir nicht in den Sinn gekommen. Speichern Sie im Browser. Gut. In Ordnung, nachdem wir das getan haben, müssen wir den Firmencontainer stilisieren. Also, was ich jetzt tun werde, ist, direkt nach der Header-Komponente weiteres Div zu erstellen ihm einen Klassennamen der Form Dodge Wrapper zu geben. Also alles genau hier, kopiere von den Spuren 152, Linien 20. Halten Sie am Mac die Wahltaste gedrückt und drücken Sie dann die Aufwärtspfeiltaste, um es hineinzubewegen . Wenn es bei dir nicht funktioniert, kannst du das auch. Markiert und dann Control X zum Ausschneiden fügt es in das Div mit dem Klassennamen Form Wrapper ein. Wenn Sie speichern, müssen wir jetzt den Form Wrapper stilisieren. Dodds, ich, zeige dir diesen Kerl. Weicheres Exemplar. Wir werden einen Display-Flex haben. Die Biegerichtung ist eine Spalte. Richten Sie Elemente mittig aus und richten Sie den Inhalt so aus, dass er die Lücke mittig bildet. Es wird sein, die Höhen zu rammen. Lass uns 85, 85 gegen h machen. Okay, lass es uns im Browser rausnehmen. Sie sehen es vielleicht nicht deutlich, aber im Moment nimmt dieses Top allmählich Gestalt an. In Ordnung, also lasst uns den festen Punkt dialysieren. Lassen Sie mich Ihnen das Formular zeigen. Dieser Typ hier drüben. Ich habe es einfach kopiert und eingefügt. Okay, wir werden eine flexible Anzeige, eine flexible Richtung, eine Spalte, eine Elementmitte ausrichten und ein Inhaltscenter einrichten. Also, was ich jetzt tun werde, ist alles von hier zu kopieren. Ich kopiere von den Zeilen 44 bis 48. Kopieren Sie es und fügen Sie es hier ein. Speichern. Schauen wir uns das Formular an. Alles sieht gleich aus, Sorge. Wir werden es verbessern. Also die Hintergrundfarbe des Formulars. Jetzt mache ich das in sechs. Sei Null. Zählen wir 123456 sind. Lassen Sie mich also speichern und den Browser auschecken. Kannst du sehen, hier ist, was wir gerade gemacht haben. Dieser Typ hier drüben, ich weiß nicht, ob du es deutlich sehen kannst. Gehen wir zurück. Okay. Ich werde etwas tun, damit es hier deutlich erscheint. Ich mache einfach 0,1. Okay? Siehst du, das ist genau das, worüber wir sprechen. Bring es zurück zur eigentlichen Phase. Lassen Sie uns das Formaldehyd bei 70 V h abgeben. Jetzt wird es deutlich sichtbar sein. Die Polsterung soll laufen. Die Farbe wird weiß sein, damit der Test innerhalb der Firma weiß erscheint. Und, ähm, was macht das nochmal, geben wir ihm einen Grenzradius. Wir wollen, dass der Rand ein bisschen kurvig ist. Also mache ich Nullpunkt für Regenfälle. Schauen Sie sich das an, wenn Sie im Browser speichern. Und hier ist es. Siehst du, jetzt haben wir die Firma bereit. Die nächste Begriffszeile dient der Stilisierung des Eingabefeldes und des Bootfahrens. Und ich hoffe, du kannst es jetzt deutlich sehen. Das Nest soll diesen Behälter stilisieren. Das ist, wir können den Eingabefeld-Punktcontainer paketieren. Und achten Sie bitte immer darauf, dass die Schreibweise Ihres Clusternamens korrekt ist. Okay. Flex anzeigen. Biegen Sie die Richtung, die Spalte, die Lücke. Lass es uns zu ihnen schaffen. Ich denke, das ist alles für den Container. Lassen Sie uns also auf das Eingabefeld abzielen. Hier haben wir die Imputes. Ich werde es dir in einem Hausarzt zeigen, scrolle nach oben. Hier ist das Div mit dem Klassennamen Container. Und direkt im Container haben wir die Eingabefelder. Also werden wir uns jetzt auf die Eingabefelder konzentrieren und sie dann stilisieren. Geben Sie den Randradius des Nullpunktes für das Em-Padding 0,5 rem an. Hier werden wir ein Zimmer haben. Die Breite beträgt 25 Zimmer. Die Höhe wird 3,4 betragen. Also lass uns speichern und in den Browser gehen. Die Idee ist, siehst du, es sieht absolut gut aus. Ich liebe diese. Absolut. Das sieht nett aus. Okay. Also müssen wir das Offline wieder abschalten. Kannst du sehen, wann ich meine Konsolenanforderungen stelle, du wirst diesen blauen Umriss sehen. Das ist also ziemlich einfach. Ich werde die Gliederung machen. Machen wir neun draus. Sicher. Hier im Browser. Wenn Sie Ihre Maus erneut darauf platzieren, sieht es gut aus. Lassen Sie uns also den Bolt und das Login-Voting dialysieren. Für den Button. Der Abschied wird 0,5 sein. Rem. Ups, ich mache das weiter. Ich verstehe das nicht. Geh raus. Die Hintergrundfarbe. Kann es so einfach lesen lassen. Grenze. Keine. Der gröbere Wert ist Zeiger, Randradius Nullpunkt. Wir müssen ihm einen Grenzradius geben, der dem Eingabefeld entspricht. Also ich kopiere einfach, dass dieser Typ 0,4 m groß ist. Okay, mal sehen. Gut. Jetzt geben wir ihm einen Höhen- und einen Breitenpunkt. Für ihn. Die Farbe wird weiß sein, das ist die Schrift, der Test, der im Textkörper geschrieben ist. Lass mich dir den Kerl hier zeigen. Und was wir tun werden. Lustiger Tweet. Ich werde die Schriftgröße fett machen. Um es zu machen 1,05 rem. Ich denke, das ist alles für heute. Lass uns speichern und zum Browser gehen. Alles sieht aus wie erwartet, und ich liebe diese. Wenn Sie nun die obere rechte Ecke des Bildschirms beobachten, werden Sie feststellen, dass unten die Anmeldung angezeigt wird. Wenn du also auf diesen Typen hier klickst, wirst du zur Anmeldeseite weitergeleitet. Hey, kannst du es sehen? Und hier sehen wir uns jetzt einloggen. Wenn Sie auf Login klicken, Sie zur Anmeldeseite weitergeleitet. Und natürlich haben wir es hier umgesetzt. Sie können also die Vorlesungen durchgehen, um sie gut genug zu verstehen und sich daran zu erinnern. Schauen wir uns also an, ob es hier in den Login-Komponenten oder auf der Anmeldeseite etwas zu tun gibt. Also ich finde alles cool, oder? Das ist also alles für heute. Und in der nächsten Vorlesung werden wir beginnen, die Authentifizierung mithilfe der Feuerbienen zu implementieren . Und ich kann Ihnen versichern, dass es schön sein wird , Sie in der nächsten Vorlesung zu sehen. 78. 76 Login: Ordnung, also bevor wir mit der Anmeldung und der Login-Authentifizierung fortfahren , möchte ich Sie auf etwas aufmerksam machen. Wenn Sie den Bildschirm beobachten, werden Sie feststellen, dass das Formular nicht sichtbar ist. Es ist nicht sehr sichtbar wie erwartet. Kannst du sehen? Es wird sehr schwierig sein zu erkennen, dass hier etwas ist. Also werden wir diese Energie korrigieren v. Eine weitere wichtige Beobachtung , auf die ich Sie aufmerksam machen möchte , ist der betrachtete Input, die Höhe ist zu hoch. Ja. Wir müssen also einen Weg finden, die Körpergröße zu reduzieren und das Unternehmen dann auch ein bisschen behinderter zu machen als zuvor. Gehe zurück zum VS-Code und scrolle nach unten. Für das Eingabefeld ist das also extrem einfach. Wir müssen nur die Höhe auf 2,4 Ram reduzieren. Kannst du jetzt sehen, dass es Beta erscheint. Arbeiten wir also am Hintergrund und der Firma. Was ich tun werde, ich werde das hervorheben. Lassen Sie mich Ihnen den Anmeldeinhalt zeigen. Ich werde hervorheben. Bevor ich fortfahre, möchte ich diese auf 0,4 ändern. Scrollen Sie innerhalb des Formulars nach unten. Ich muss diesen Kerl nur abwischen und dann kleben. Also ändere ich das auf drei, wenn du speicherst und den Browser auscheckst. Und hier ist es. Siehst du, jetzt sieht es etwas sichtbarer aus als zuvor. Aber ein anderes Problem ist, dass der Hintergrund immer heller wird und nein, wir wollen das nicht so. Lassen Sie uns also den Hintergrund hier behandeln. Machen wir es auf 0,6 und sehen, was das Ergebnis ist. Gut. wir mit der nächsten Vorlesung fort, in der wir mit der Implementierung der Login-Authentifizierung beginnen werden . Wir sehen uns dann. 79. 77 SetingUp Firebase: Willkommen zurück an alle. Ordnung, also in dieser Vorlesung werden wir unser Projekt mit Firebase verknüpfen. Um fortzufahren, müssen wir zuerst Firebase direkt in unserem Projekt installieren. Navigiere also mit dem Terminal zu VS Code , rechts. Stellen Sie sicher, dass Sie C, D-Kunden sind. Und dann installiert NPM Firebase. Drücken Sie die Enter-Taste , um es zu starten. Installiert. Erfolgreich. Öffnen wir also die Datei package.json. Und hier ist es. Hier. Jetzt haben wir Firebase erfolgreich installiert. Gehen Sie also schnell zur Firebase-Konsole und erstellen wir eine neue Anwendung. Feuerbasis. Sie können also zu firebase.google.com gehen und dann auf die Schaltfläche Get Started klicken. Lassen Sie uns ein neues Projekt hinzufügen. Also nenne ich es Netflix-Projekte und mache dann weiter. Schon wieder. Fortsetzung. Hier belassen wir es als Standardkonto für Firebase. Lassen Sie mich Ihnen zeigen, klicken Sie hier Sie werden sehen, dass Sie ein neues Konto erstellen und dann Standardkonto für Firebase auswählen. Dann erstelle ein neues Projekt fertig. Und jetzt haben wir ein neues Projekt erstellt. Wir müssen weitermachen. Und hier wählen wir die webbasierte Komponente aus. Ja, also wählen wir diesen Typen hier drüben aus. Lassen Sie uns eine webbasierte Komponente erstellen. Und jetzt geben wir der Anwendung einen Namen. Netflix-App. Sie können beschließen, Firebase Hosting für dieses Projekt einzurichten . Aber keine Sorge, vielleicht machen wir das später. Klicken Sie nun auf Registrieren. Nachdem das getan ist, wird dieser Code hier generiert. Gehen Sie jetzt zurück zum VS-Code, richtig, um den SRC aufzurufen, müssen Sie ihn nur öffnen. Und dann klickst du mit der rechten Maustaste auf Utils und erstellst eine neue Datei. Und ich nenne es Firebase Dash. Config Dot g ist hier. Wir müssen nur so auswählen. Bitte. Sie können hier sehen, was ich ausgewählt habe. Dann. Rechtsklick. Kopieren. Füge es hier so ein. Ja, nachdem wir das getan haben, lassen Sie uns den Code bereinigen. Wählen Sie aus den Linien für zwei Zeilen aus, um es zu löschen. Außerdem benötigen wir die Firebase Analytics vorerst nicht . Wir müssen es nur abwischen. Wisch das auch ab, wisch das ab. Nachdem wir das erledigt haben, ist der nächste Schritt in der Reihe, Gets Off von Fire Beads zu importieren. Scrollen Sie also nach oben. Und ich werde Importe machen. Runter vom Firebase-Schrägstrich mit den einfachsten Statistiken. Und schließlich müssen wir dieses Modul direkt unten exportieren. Ich mache eine Spot-Const, Firebase oder Equa. Steig aus. Dann geben wir die App genau hier weiter. So einfach ist das. Damit haben wir das Projekt erfolgreich mit Firebase verknüpft. Lassen Sie mich Sie so schnell durch die Firebase-Konsole führen, um sich damit vertraut zu machen. Beachten Sie also, dass wir diese Boilerplate hierher kopiert haben. Ja. Der nächste in der Reihe ist also , weiter zu trösten. In der unteren linken Ecke des Bildschirms sehen Sie diese Schaltfläche hier drüben , weiter zur Konsole, richtig, wir sind in der Konsole. Sie müssen den Butte öffnen und dann die Authentifizierung. Klicken Sie auf Get started. Klicken Sie also auf E-Mail-Slash-Passwort. Also müssen wir hier aktivieren und dann Speichern. In Ordnung, du wirst also dieses Grün hier sehen. Und dann, was ist, fahren Sie mit Use us fort. Genau hier werden alle Benutzer gespeichert, okay? Wenn sich ein Benutzer unserer Verpflichtung anmeldet, werden seine Anmeldeinformationen hier gespeichert, was das Passwort und die E-Mail beinhaltet. Das ist am einfachsten. In Ordnung, das ist alles für heute. Und in der nächsten Vorlesung werden wir mit der Implementierung der Anmeldeseite beginnen. Und dann kann sich der Benutzer für unser Projekt anmelden und mit dem Einloggen beginnen. So einfach ist das. 80. 78 CreateUsers: Willkommen zurück an alle. In Ordnung, lassen Sie uns mit der Anmeldeseite fortfahren. Gegen Code. Anmeldeseite Punkt j ist unser Recht ist endgültig. Also ganz oben. Als erstes importieren wir die Firebase-Dash-Konfiguration, das Modul, das wir in der vorherigen Vorlesung erstellt haben. Lass mich dir schnell diesen Kerl hier zeigen. Okay, also komm her und lass es uns hier machen. Wir werden Firebase von den Slash Firebase DashCon-Füßen von UT importieren . Also dieser Typ hier drüben, lass mich dir diesen Kerl zeigen. Sind, du verstehst all diese Dinge. Ich habe das nicht gemacht. Lassen Sie uns einige der Dinge importieren , die wir verwenden werden. zu tun, müssen wir uns an die besten Praktiken halten. Lass mich etwas tun. Ich werde die Zeilen zwei bis drei hervorheben. Hab es runter, komm her und füge es ein. Das werden also die Eingaben sein, die wir erstellt haben, aber das sind die wichtigsten Eingaben aus den externen Bibliotheken. Also hier werde ich Importe machen, Benutzer mit E-Mail und Passwort von Firebase erstellen und auch loslegen. Wir müssen On-Off-Änderungen importieren. Genau so. Lassen Sie uns schnell den Handler für die Anmeldung erstellen. Hey, ich mache const, handle, sign-in, equa und setze es auf unsere Funktion. Also hier werden wir eine Asynchronisierung haben. Gut. Also werden wir es gleich in einem Try-Catch-Block zusammenfassen. Hier. Ich werde Const E-Mail, Passwort verwenden. Und ich setze es auf Werte aus. Bevor wir fortfahren, erstellen wir schnell die notwendigen Zustandsvariablen, die verwendet werden sollen. Also werde ich die Erzählung machen. Sie verwenden Datenausschnitte von value, legen Telefonwerte fest. Okay, hier ist ein Cup-Set aus Werten. Der Anfangszustand wird ein Objekt sein. Und direkt in den Objekten werde ich E-Mails schreiben. Die E-Mail. Wir setzen es auf eine leere Zeichenfolge. Ja, der Anfangsstatus des E-Mail-Felds wird also leer sein. Ja, also das Passwortfeld, auch der Anfangsstatus, es wird eine leere Zeichenfolge sein, wodurch es leer wird. In Ordnung? Nachdem wir das getan haben, fahren wir mit den Formularwerten hier fort. Hier gehen wir zu unserer Breite, da dies ein Asynchron ist, also wird es ein Versprechen zurückgeben. Also müssen wir hier warten. Wir rufen die Methode „Benutzer erstellen“ mit E-Mail und Passwort auf. Wir haben es importiert. Lassen Sie mich Ihnen von oben von Firebase aus zeigen. Im Rahmen dieser Methode nehmen wir also die Firebase von Coma-E-Mail, ruhigeres Passwort auf, so einfach ist das. Und hier werden wir den notwendigen Fehler finden. Wenn wir also den Fehler erkennen, müssen wir ihn auf der Konsole protokollieren. Ich mache console.log. Dieser Typ hier drüben, das ist der Fehler. Wenn ein Fehler oder ein Problem auftritt, werden wir es auf der Konsole protokollieren. Ja, also was ist jetzt, wir müssen all diese Punkte im Eingabefeld implementieren, richtig. Das ist also das Passwortfeld. Der Wert aus den Werten Punkte, Passwort. Dadurch wird das Passwort abgerufen, das der Benutzer eingegeben hat, Rechte waren im Feld. Also unverändert. Das heißt also, wenn der Benutzer anfängt , in das Eingabefeld einzutippen. Dadurch erhalten wir Zugriff auf das Ereignis und setzen es dann auf unsere Funktion. Wenn der Benutzer anfängt, in das Eingabefeld einzutippen, müssen wir die Firma aktualisieren. Jetzt mache ich Set from Values. Wir müssen also unterschiedliche Werte verbreiten. Nachdem wir das getan haben, werden wir E-Punkt, Ziel, Punktname machen . Schließlich machen wir einen Punkt, um diesen Wert anzuvisieren. Wir müssen alles aus dem Wert wie diesem kopieren. Texte aus den Zeilen 42, 43 sind in der E-Mail enthalten. Also werden wir in das E-Mail-Feld einfügen. Aber jetzt müssen wir den Firmenwert auf E-Mail ändern. Das Einfachste, das getan zu haben. Wir müssen die bescheidene Anmeldefunktion aufrufen , wenn auf die Anmeldeschaltfläche geklickt wird. Also hier spezifizieren wir den Onclick, onclick dieser Verschraubung. Ich melde mich ab. Jetzt können Sie sehen, dass die Funktion registriert ist. Die Farbe der Schrift wird so scharf, antik. Aber wenn du hierher kommst, lass uns z.B. löschen. Vermassel es. Siehst du? In Ordnung, alles cool. Speichern Sie die Anwendung und lassen Sie uns sie testen. Wir werden NPM Starts machen , um das Projekt zu beenden. Deshalb ziehe ich es vor, die Firebase hierher zu ziehen , damit die Anwendung hier ist. In Ordnung, also lasst uns zur Anmeldeseite navigieren. Meine E-Mail wird eine riesige mistake@gmail.com sein. Klicken Sie auf Get Started. Das Passwort. Ich mache 123, ABC. Melden wir uns an. Lass es uns rausnehmen. Wenn wir uns wirklich angemeldet haben. Wir müssen die Konsole hier aktualisieren, um zu sehen. Leute, alles funktioniert wie erwartet. Kannst du jetzt sehen, ist das tech@gmail.com? Alles cool. Ordnung, die nächste Zeile besteht darin, den Benutzer auf die Homepage umzuleiten , wenn sich der Benutzer an- und abmeldet. also nach der Anmeldung, wenn die Anmeldeinformationen korrekt sind Sie auf die Anmeldeschaltfläche klicken, sollte die Anwendung Sie zur Homepage weiterleiten können , bei der es sich um die Netflix-Seite handelt. Geh zurück zu VS Code und hier drüben, vermassele es. Also ganz oben, wir werden importieren, was zum Geier ist das? Ein Wisch es ab. Speichern. Gehen wir jetzt zurück und schauen es uns noch einmal an. Ich möchte, dass wir hier genau sind. Nehmen wir an, Mike fügt gmail.com hinzu, los geht's. Passwort, eins, zwei, drei, ABC. Du meldest dich nicht an. Gehe zurück zur Konsole, aktualisiere. Gut. Es funktioniert immer noch wie erwartet. Diese Eingabe hier ist also unnötig. Ja, jetzt müssen wir React importieren, verwenden, navigieren, Router Doom. Und danach machen wir Const Navigates. Die CWA, benutze Navigate. Natürlich ist es eine Funktion. Ja. Und nachdem Sie das getan haben, kommen Sie jetzt hierher und lassen Sie uns die Authentifizierung einrichten. Ich mache einen Off-State-Change. Lassen Sie mich Ihnen diesen Typen zeigen, den wir von Firebase aus importiert haben . Wir führen hier tatsächlich die Authentifizierung durch. Der Ein-/Aus-Zustand wurde geändert. Wir machen das Firebase-Komma und geben dann den aktuellen Benutzer weiter. Dies hilft also dabei, den aktuellen Benutzer zu überprüfen , der sich angemeldet hat. Wenn sich der aktuelle Benutzer anmeldet, wird der Benutzer auf die Homepage weitergeleitet, die die Netflix-Seite ist. Was genau ist die Absicht? Hier? Das werden wir überprüfen. Also ich werde es tun, wenn der aktuelle Benutzer ist, also wenn es eine neue Registrierung gibt, ja. Wir werden zur Homepage navigieren . Keine Sorge, ich werde das in einem GeV erklären. Verwenden Sie Navigate. Navigiere. Leute, lasst uns diese ändern, um zu navigieren. Das klingt besser. Navigiere. Also hier navigieren wir, nachdem wir Ihre E-Mail-Adresse und Ihr Passwort eingegeben haben. Also hier werden wir überprüfen, ob der aktuelle Benutzer, wenn Sie der aktuelle Benutzer sind, der sich direkt von dieser Seite aus anmeldet, Sie zur Homepage weitergeleitet werden. Und mach dir Sorgen, wir werden das im Handumdrehen machen , damit du es sehen kannst. Wenn wir also diesen Konflikt hier angeben, bedeutet das, dass Sie zur Homepage weitergeleitet werden. Kannst du Slash sehen? Das bedeutet, dass Sie zur Netflix-Seite werden. Hier drüben heißt es, Identify Our User Navigates wurde bereits deklariert. Mal sehen, was hier passiert. Navigiere gleich, benutze, navigiere, Leute , schaut, wir haben hier etwas durcheinander gebracht. Wir müssen das abwischen. Und das tut mir leid. Safe-Harbor-Schreibweise verwendet. Es ist definiert, wird aber nicht verwendet. Warum wird es verwendet? Wahrscheinlich nicht auf dieser Seite, die sich auf der Anmeldeseite befindet. Ja, mach dir darüber vorerst keine Sorgen. Speichern Sie im Browser. Können Sie jetzt sehen, dass wir auf die Netflix-Seite weitergeleitet wurden . In Ordnung, lass es mich dir schnell zeigen damit du es gut genug verstehen kannst. Geh zurück zur Konsole. Ich werde all diese Benutzer löschen, Konten löschen. Und hier müssen wir auch den Account Lecture löschen, um ihn zu aktualisieren. Und du siehst, dass nichts hier ist. Vorerst. Geh zurück zur App. Auffrischen. Jetzt müssen wir zur Anmeldeseite navigieren . Jetzt sieh es dir an. Wenn ich mich mit einer neuen E-Mail angemeldet habe , werde ich auf die Netflix-Seite weitergeleitet. Ich werde es hier machen. John@gmail.com. Fangen Sie an. Ich mache 123ab C und melde mich dann an. Jetzt wurden wir auf die Netflix-Seite weitergeleitet. Und genau das ist die Absicht. Ja. Kannst du es gut sehen, also sind wir mit der Anmeldeseite fertig. In der nächsten Vorlesung werden wir die Authentifizierung mit der Anmeldeseite durchführen . 81. 79 Login-Authentifizierung: Willkommen zurück, alle zusammen. In der vorherigen Vorlesung haben wir also die Anmeldeseite implementiert. So können die Benutzer ein Konto erstellen und werden auf die Netflix-Seite weitergeleitet, was der Standard ist. Jetzt fahren wir mit der Login-Authentifizierung fort. Gehen wir also davon aus, dass Sie unsere Anwendung verwenden, um die Anwendung zu registrieren und sich dann abzumelden. Wenn Sie sich also abmelden, müssen Sie sich nicht von Grund auf neu anmelden. Sie müssen sich lediglich mit Ihren Anmeldeinformationen, die Sie zuvor erstellt haben , in der Anwendung anmelden. Bevor wir mit der Anmeldeseite fortfahren, werden wir einige Einstellungen vornehmen, die keine Zeit in Anspruch nehmen. Gehen Sie zurück zum Browser und dann zurück zur Firebase-Konsole. Wir möchten den Benutzer so löschen. Lassen Sie uns dieses Konto löschen. Also alle Konten, die Sie hier haben, löschen Sie alle Konten. Wir werden es von Grund auf neu erstellen. zum Code zurück, gehen Sie zur Anmeldeseite und dann werden wir einen Kommentar dazu abgeben. Wir möchten also nicht, dass es auf die Netflix-Seite weitergeleitet wird, wenn sie unsere Registrierung vorerst nutzen. Okay, nur für den Moment. Das ist nur z.B. Sake. Ein Kommentar zur Verwendung von navigieren. Sie können hier auch auf einen Kommentar drücken, wenn Sie möchten. Gut. Habe das nicht gemacht. Lass uns mit der Anmeldeseite fortfahren, oder? Wir sind auf der Anmeldeseite. Wir werden importieren, lassen Sie uns die Eingabe von der Anmeldeseite kopieren. Ich möchte nicht, dass wir hier Zeit verschwenden. Markieren und kopieren. Anmeldeseite und einfügen. Jetzt benötigen wir keinen dekretierten Benutzer mit E-Mail und Passwort. Zuvor haben wir die Benutzer erstellt und wir benötigen sie hier nicht mehr. Was wir jetzt brauchen, ist sich mit E-Mail und Passwort und hazy und all dem Zeug plus einem Komma hier anzumelden Passwort und hazy und . Und es wird aus der Firebase-Authentifizierung importiert. Und natürlich haben wir dieses Modul bereits erstellt. Nachdem wir dies getan haben, müssen wir auch die vom Benutzer navigierte Kopie von hier importieren und sie hier des Kommentars einfügen. Ordnung, also müssen wir auch den Saft importieren , der oben hängt. Um es professioneller zu machen, trenne ich jetzt die Eingabe, markiere sie, schneide sie ab, komme her und füge sie ein. Das ist also die Eingabe, die wir für die externen Bibliotheken gemacht haben, und das sind die Eingaben, die wir für unsere eigenen Dateien gemacht haben , die wir erstellt haben. Das hat zumindest die Möglichkeit, eine Anwendung wie ein Profi zu erstellen. Und bitte beachten Sie, dass dies Ihnen in Zukunft definitiv helfen wird , wenn Sie eingestellt werden. Als Nächstes müssen Sie nun die erforderlichen Zustandsvariablen erstellen, die verwendet werden sollen. Hier werde ich stattdessen die Use That Snippets generieren. Dann mache ich E-Mail und setze E-Mail. Das sollte auf Karpfen sein. Der Anfangszustand dieser wird also auch hier eine leere Zeichenfolge sein . Wir machen das Usage Snippet. Und das wird ein Passwort sein, tut mir leid, wie dieses festgelegte Passwort, das wird auf CUP sein. Und außerdem wird der Anfangsstatus eine leere Zeichenfolge sein, was das Anmeldefeld ist, oder? Lass es mich dir zeigen. Komm her, schlitz dich ein. Ordnung, also hier ist das E-Mail-Feld und hier ist das Passwortfeld. Der Anfangsstatus ist also ein leeres Feld wie dieses, bis der Benutzer anfängt, seine eigenen Anmeldeinformationen einzugeben. Gehen Sie zurück zum Code und lassen Sie uns beginnen. Stimmt es? Würde das Eingabefeld nicht vorlesen, um den Code zu formatieren. Nun, in Ordnung, jetzt sieht der Code gut aus. Wir werden den Onchange implementieren. Wenn der Benutzer also anfängt, in das Eingabefeld zu tippen, erhalten wir Zugriff auf die Ereignisse. In Ordnung? Rufen wir dann zuerst die Setup-Funktion auf, um die E-Mail zu aktualisieren. E-Mail einrichten. Dann setzen wir es auf e-Punkt, was auch immer der Benutzer eingibt, nämlich E-Punkt, zielt auf diesen Wert ab. Und ich habe dir all das beigebracht. Also, als wir tatsächlich die Grundform geübt haben, reagiert eins zu eins. Also hier mache ich den Wert „E-Mail“, „ Kopie“, „Gefällt mir nicht“, „ Markieren“ und „Kopieren“. Komm zum Passwortfeld und füge es hier ein. Formatiert den Code mit Prettier. Sie müssen nur die Shift- und Wahltaste auf Ihrer Tastatur gedrückt halten und dann auf Ihrer Tastatur auf F tippen, um mit Prettier zu formatieren. Oder Sie können auch so etwas wie das Folgende tun rechten Maustaste auf das Dokument mit einem hübscheren Code für das Motto formatieren . Okay, hier werden wir es ändern, um ein Passwort festzulegen. Hier unverändert. Der Wert wird ein Passwort sein . So einfach ist das. Ordnung, nachdem wir das getan haben, lassen Sie uns schnell die Authentifizierung durchführen. Scrollen Sie nach oben. In Ordnung, hey, wir machen const, handle, lock in, equa, setzen es auf unsere Funktion. Wir werden ein Waschbecken nehmen und es wird mit Sicherheit ein Versprechen einlösen. Also müssen wir warten. Das Problem ist hier so. Und ich melde mich mit E-Mail und Passwort an. Gleich in dieser Funktion übergeben wir Firebase of Karma, E-Mail und Passwort. Und all dies würde in einem Try-Catch-Block zusammengefasst werden. Also markiere es und schneide es ab. Dann generieren wir einen Try-Catch-Block. Also direkt im Testblock werden wir einfügen und genau hier im Catch. Wenn also Fehler oder Kosten auftreten, müssen wir den Fehler abfangen und ihn dann in die Konsole einloggen. Am einfachsten ist, dass wir, nachdem wir dies getan haben, schließlich die Authentifizierung durchführen müssen, um nach dem aktuellen Benutzer zu suchen. Und wenn die Anmeldeinformationen korrekt sind, müssen wir sie auf die Netflix-Seite weiterleiten. Und das haben wir natürlich in der vorherigen Vorlesung gemacht. Gehe zur Anmeldeseite. Komm her. Kopiere diesen Typen, markiere und kopiere. Außerhalb dieser Funktion. Bitte tun Sie dies nicht in dieser Funktion. Gehen Sie aus der Funktion heraus und fügen Sie sie ein. Jetzt müssen wir den Kommentar, das Format, den Code und die Shift-Option F entfernen , um den Code zu formatieren. Und dann müssen wir diese Funktion jetzt direkt innerhalb des Proteins nennen . Wenn auf die Login-Schaltfläche geklickt wird, müssen wir die Login-Funktion speichern aufrufen. Es heißt, Navigate ist nicht definiert. In Ordnung? Das liegt einfach daran, dass wir es nicht initialisiert haben. Denken Sie daran, dass wir es hier oben importiert haben. Jetzt müssen wir es hier initialisieren. Und das haben wir natürlich in der vorherigen Vorlesung gemacht. Und ich muss kopieren. Einfügen, Markieren, Entfernen des Kommentars, Speichern der Anwendung, und jetzt funktioniert alles einwandfrei. Der Code ist fehlerfrei. Aber eine weitere Sache, die Sie gesagt haben, ist ein Input hier drüben. Es ist ein unnötiger Import. Möglicherweise haben Sie diesen Import am Ende nicht. Also ignoriert. Speichern Sie, kehren Sie zum Browser zurück. Und jetzt melden wir uns an, denn zuerst müssen Sie ein Konto erstellen, bevor Sie sich anmelden. Ja. Also hier werde ich mich mit Slash anmelden. Stimmt. Um die Anmeldeseite aufzurufen. Ich mache angela@gmail.com. Fangen Sie an. Und dann erscheint das Passwort-Feld und wir machen 123ab c. Jetzt melde dich an. Wenn Sie auf die Schaltfläche „ Anmelden“ klicken, werden Sie vorerst nicht auf die Netflix-Seite weitergeleitet , nur weil wir diese Funktion entfernt haben. Lassen Sie uns nun sehen, ob wir die Registrierung erfolgreich aktualisiert haben. Jetzt haben wir das Konto für Angela erstellt und dieses Konto nicht erstellt. Wir müssen zur Anmeldeseite zurückkehren und die Anmeldeseite mit einem Schrägstrich versehen. Können Sie sehen, wenn Sie zur Anmeldeseite zurückkehren , werden Sie zur Netflix-Seite weitergeleitet. Wissen Sie warum? Lassen Sie mich Ihnen kurz erklären, was unter der Motorhaube passiert. Gehe zurück zum VS-Code. Wenn es also auf die Anmeldeseite hier kommt, wird es sagen: Hey, ich habe einen aktuell registrierten Benutzer gefunden. Also schnell, leiten Sie den registrierten Benutzer auf die Netflix-Seite weiter. Ja, genau das macht dieser Typ hier. Und aus diesem Grund sehen Sie, dass die Anmeldeseite geöffnet und dann schnell weitergeleitet wird. Mach die Netflix-Seite. Lassen Sie mich Ihnen schnell zeigen, wie Sie die von uns erwarteten Ergebnisse erzielen können. Gehen Sie zurück zum Browser und öffnen Sie dann die Konsole. Also richtig, wenn die Konsole hier auf dieses Ordnersymbol klickt, gehe zur Anwendung, oder? Also müssen wir zu Storage gehen, auf Speicher klicken und dann die Index-DB öffnen. Hey, ist es? Also müssen wir darauf klicken, löschen, erneut auswählen und löschen. Also, wenn wir jetzt noch einmal versuchen , auf die Anmeldeseite zu gehen und knochen, kannst du das jetzt sehen? Versuchen wir nun zu sehen, ob wir dieses Konto verwenden können , um uns auf der Netflix-Seite anzumelden. Denkt daran, wir haben Angela hier. Sie können ein beliebiges Konto Ihrer Wahl erstellen. Also wisch es ab, füge Angela ein. Und hier lautet das Passwort 123ab C. Klicken Sie auf Anmelden, um zu sehen, was passiert. Kannst du jetzt sehen dass alles wie erwartet einwandfrei funktioniert. Ist das nicht wunderschön? Es ist extrem schön und ich mag es. In der nächsten Vorlesung werden wir versuchen, die Abmeldefunktion so weit wie möglich zu implementieren. Geh zurück zum Code, Anmelde-ID dot js. Diese, wir müssen die Kommentare entfernen, damit alles wie erwartet einwandfrei funktioniert. Ist alles cool? Sicher? Anmeldeseite. Kay. Gut. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Wir werden uns auf eine ganzheitliche Versorgung konzentrieren. 82. 80 OnScrollEvent: Willkommen zurück an alle. Ordnung, also in der vorherigen Vorlesung haben wir die Authentifizierung implementiert und ich glaube, sie funktioniert bei Ihnen einwandfrei. Ja, also in dieser Vorlesung werden wir die Top-Navigation implementieren. Wenn ein Benutzer also auf den Link klickt, wird er zur entsprechenden Komponente weitergeleitet . In Ordnung, wir müssen also nicht manuell etwas wie Ablehnen, anmelden. Kannst du sehen, damit wir so etwas nicht mehr tun müssen. Ja, lassen Sie uns schnell den oberen VS-Code-Befehl B implementieren , um den Explorer und den Writable im Explorer zu öffnen. Wir müssen das nächste Flux Dot JS den Explorer wieder schließen. Und dann werde ich dieses Netflix hier löschen und diesem Div den Klassennamen hier geben , oder? Wenn der Held, werden wir das Heldenbild anzeigen, IMG SRC gleich, kopieren und fügen Sie den Hero-Link ein, für die Bildrechte steht, die in den Materialien waren. Keine Sorge, ich werde es dir hier in einem GeV zeigen, oder? Ja, es ist direkt in den Netflix-Materialien enthalten. Und dann können Sie den Code-Helper öffnen und ihn von hier kopieren. Wir machen das hier, Bild ist in Ordnung, es ist kein Problem. Das hier getan zu haben, ist das Ergebnis. Gut. Der nächste Schritt ist nun die Implementierung der On-Scroll-Ereignisse. Lassen Sie mich Ihnen zeigen, z. B. werde ich dieses Bild hervorheben, es so oft wie möglich duplizieren und den Browser speichern. Siehst du, jetzt kann ich von oben nach unten scrollen. Aber das eigentliche, was wir tun wollen , ist, das Ergebnis beim Scrollen zu erhalten, z. B. nehmen wir die Anwendung auf der Y-Achse an. Auf der Y-Achse ist das Scroll-Ereignis also gleich Null, aber wenn Sie nach oben scrollen, die Auto-Scroll-Ereignisse größer als Null. Also werden wir es so konditionieren, dass, wenn sie Scrollereignisse besitzen, der Seitenversatz Null ist. Wir wollen, dass der Anfangszustand falsch ist. Andernfalls wollen wir, dass der Anfangszustand wahr ist. Wenn die Anwendung also auf Seite Y so ist, wird der Versatz in Bezug auf die Tonhöhe gleich Null sein. Und wenn es dann gleich Null ist, setzen wir es auf Falsch. Wenn Sie jedoch zur obersten Seite scrollen, wird der Y-Offset größer als Null sein. Und wenn er größer als Null ist, setzen wir den Anfangszustand auf True. Lassen Sie uns es so implementieren, dass Sie es gut genug verstehen können. Geh wieder her. Wir werden es machen, richtig? Wir sind in der Komponente. Jetzt müssen wir also das On-Scroll-Event implementieren und ich mache Fensterpunkte beim Scrollen. Danach müssen wir auch die notwendigen Zustandsvariablen deklarieren, die verwendet werden sollen. Lassen Sie uns also schnell die gebrauchten Snippets generieren. Dann werde ich es verarscht machen. Es wird gesetzt, ist auf den Großbuchstaben I geschraubt Der Anfangszustand wird also falsch sein , weil dieser gleich Null sein wird. Wenn der Benutzer also die Anwendung öffnet, wird der Anfangszustand des Scrolls auf „Falsch“ gesetzt da wir weder nach oben noch nach unten geschraubt haben. Aber wenn wir anfangen zu scrollen, wird es größer als Null sein. Und das werden wir auf wahr setzen. Also, was wir jetzt machen werden, okay, gut. Hier müssen wir den Anfangsstatus aktualisieren, der auf Crowd gesetzt ist. Wir werden die Y-Offsets für verschraubt auf den Fensterpunkt Y einstellen. Wenn also der p-y-Offset des Fensters gleich Null ist, wird der Anfangszustand falsch sein. Und Pfeile, der Anfangszustand wird wahr sein. Und was jetzt ist, werden wir zurückkehren, wenn die Punkte und das Scrollen beginnen. Was ich jetzt tun werde, ist das Konsolenprotokoll zu scrollen, damit ich Ihnen zeigen kann, was es ist. Console.log ist grob. Speichern Sie das verwendete, es ist nicht definiert. Wir müssen es oben importieren. Benutze hast du nochmal gespeichert, alles funktioniert einwandfrei und im Browser, okay, seltsamer Befehl I, um die Konsole zu öffnen. Hier auf der Konsole. Und stellen Sie sicher, dass Sie es können. Sie sehen jetzt, dass die Anwendung bei einem höhenweisen Offset gleich Null ist. Im Browser werden Sie also falsch sehen. Wenn ich also nach oben scrolle, die Anwendung für höhenweise Offsets wird die Anwendung für höhenweise Offsets größer als Null sein. Daher wird der Anfangsstatus für tonhöhenweise Offsets auf „Wahr“ gesetzt. Lass uns sehen. Kannst du sehen, wenn du nach oben scrollst, es wird wahr zurückgegeben. Auch hier gilt wieder, dass die Anwendung wahr ist, aber viele erhalten drei Punkte, wenn die Anwendung bei tonhöhenweisem Offset Null wird, wird sie falsch zurückgeben. Kannst du jetzt sehen, dass es falsch ist? Scrollen Sie noch einmal nach unten, es wird wahr. Die Spitze, es erreicht Null und es wird falsch. Im Grunde ist das, was wir tun , wahr, falsch, wahr, falsch. Stimmt es? Wunderschön. Genau das ist also die Absicht in dieser Vorlesung. In der nächsten Vorlesung werden wir das Top-Navi implementieren. 83. 81 TopNav: Ordnung, also haben wir in der vorherigen Vorlesung die On-Scroll-Events implementiert. Wir konnten den Anfangsstatus von falsch auf wahr und falsch auf wahr aktualisieren . Und ich weiß, dass einige von Ihnen neugierig sind. Du willst wissen, warum wir das getan haben. Mach dir keine Sorgen. Am Ende dieser Vorlesung werden Sie es auf jeden Fall gut genug verstehen. Direkter Zugriff auf VS Code und weniger schnelle Implementierung der Top-Nav-Rechte waren in den Komponenten enthalten. Erstellen Sie eine neue Datei namens Top Mouth. Punkte sind ein FCE zur Generierung der Funktionskomponente. Lassen Sie uns also schnell die notwendigen Dinge importieren, die verwendet werden sollen. Zunächst verwenden wir das React-Symbol. Also werde ich npm install React Dash Icons machen. Während die Installation läuft. Wir werden von hier aus importieren, Outline importieren, sich von React-Strich-Symbolen abmelden , Schrägstrich. Wir haben es mit KI an die Oberfläche gebracht. Übrigens wurde das React-Symbol erfolgreich installiert. Wenn Sie es nicht auf Ihrer Seite installiert haben, müssen Sie das jetzt einfach tun. Als nächstes müssen wir das Stout aus der Stout-Komponente importieren. Als Eingangsverknüpfung dienen verschiedene Großbuchstaben L aus dem Reaktor Strich Route. Okay. Jetzt können wir gleich hierher gehen. Wir werden die Navigationsrechte in einem Array speichern . Also mache ich const, nav link, equal und setze es auf ein leeres Array. Und direkt während des Arrays nehmen wir ein Objekt auf. In Ordnung, wir sind im Objekt. Wir werden ihr einen Namen geben, um die Homepage ruhiger zu gestalten. Wir werden es so mit einem Slash verknüpfen . Lass es mich dir zeigen. Denken Sie daran, dass wir die Routen in der vorherigen Vorlesung implementiert haben. Die ganze Route hier. Also machen wir das für die Homepage, die Anmeldung von Fernsehspielern und so weiter, oder? Ich habe zu viel geredet. Das tut mir leid. Highlights duplizieren es dreimal und stellen Sie sicher, dass Sie hier ein Komma setzen, um es zu trennen. Nachdem wir das getan haben, ändern wir sie in eine Fernsehsendung und wir müssen uns auf den Weg machen. Dash-Fernseher. Er wird meine Liste sein. Wir müssen die Route, meine Liste, wir haben all diese Routen erstellt. Zu guter Letzt werden wir Filme machen, die Slash-Filme sind. So einfach ist das. Nachdem wir dies getan haben, werden wir oben rechts auf dem Bildschirm anzeigen dieses Array zuordnen und all diese Tabs lassen. Also, um das zu tun, und wir werden an der EU arbeiten. Jetzt werden wir genug Containerschiffe haben. In Ordnung. Hier. Ich mache Const, Love Container, ein Stout Dot Div. Dann können sie die Backticks setzen , damit wir es innen stilisieren können. Dieser Typ. Hier. Ist das. Okay, gut. Jetzt haben wir ein Div mit dem Klassennamen der linken Seite. Weil wir die linke Seite des Top Nav und die rechte Seite haben werden. Also außerhalb dieses Div werden wir einen weiteren Div haben. Geben Sie ihm einen Klassennamen auf der rechten Seite. Okay, lass uns auf der linken Seite arbeiten. Stimmt es? Auf der linken Seite werden wir das Logo haben. Also werden wir ein Div mit dem Klassennamen Logo haben. Dann das Logo, wir müssen es mit dem IMG-Tag anzeigen , SRC entspricht. Ich füge den Link des Logos hier ein und füge ihn mit dem selbstschließenden Etikett hinzu. Und diesen Link können Sie aus dem Materialverzeichnis kopieren und einfügen . Hier ist es? Ja, die Chancen sind gleich Logo plus das Einfachste. Was macht nochmal? Okay, jetzt müssen wir diese Elemente zuordnen, oder? Das ist also das Div mit dem Klassennamen Logo, direkt vor dem Div mit dem Klassennamen Logo. Wir werden eine geordnete Liste haben. Also werden wir die UL als Klassennamen für Links haben , direkt darin. Wir werden das Zeug genau hier durchgehen. Ich werde Nav-Link machen. Okay, ich denke, wir sollten ein Pluralwort daraus machen , weil es gut ist. Sie benennen Ihr Array mit einer Pluralstraße, da es sich um eine Sammlung von Details mit ähnlichem Datentyp handelt. Wir haben also Daten, nicht nur Daten. Ich verstehe, dass wir gerade nicht im Englischunterricht sind, aber es ist gut, wenn du grammatikalisch abwesend bist, wenn du Dinge machst. Ordnung, Navigationslinks, Punktkarte, noch eine Klammer, und dann nehmen wir die geschweiften Klammern hinzu, genau in den geschweiften Klammern, wir werden deinen Namen unterbrechen. Komma n ln oder einen Jiffy anzeigen. Scrollen Sie nach oben, dieser Name hier drüben. Und Link. Nachdem Sie dies getan haben, stellen Sie es auf die Fehlerfunktion ein, öffnen und schließen Sie die geschweifte Klammer und klicken Sie rechts, um die geschweiften Klammern einzufügen, wir kehren zur Benutzeroberfläche zurück. Also hier werden wir ein LI-Tag haben. Und ich habe einen Schlüssel gesteckt. Der Schlüssel wird benannt. Also direkt im LI-Tag, oder wir werden die Links haben, oder? Also hier müssen wir den Namen der Links anzeigen. Lassen Sie mich Ihnen beim Speichern die MPM-Statistikvorlesung im Verzeichnis des Kunden zeigen . Und bevor wir anfangen, gehen Sie zu Netflix. Vermassele es hier. Mal sehen, ob wir den oberen Knopf hier rendern können. Und bitte stellen Sie sicher , dass Sie es oben importieren. Speichern wir das Projekt. Komm her, Keton, die Enter-Taste, damit sie unser Gespräch wirklich zu sehr anheizt. Auf dem Bildschirm wird nichts angezeigt. Warum? Stimmt es? Mal sehen, was passiert. Oberes Navi. Das ist Link. Also haben wir Name und Link destrukturiert. Warum funktioniert es also nicht? Okay, lass uns etwas Ähnliches machen. Also müssen wir es verlinken, um den Link so zu spezifizieren, sicher im Browser. Lassen Sie uns das, was ist, noch einmal aktualisieren, lassen Sie mich sehen, was hier passiert. In Ordnung, also schauen wir uns das Problem hier an. Es heißt, dass Typfehler, Stil, Unterstrich, Unterstrich, Unterstrich für dieses Modul geparkt haben. Standard. Div ist keine Funktion. Leute. Schau es dir an. Es ist in der Tat ein Tippfehler. Das sollte Dots Div sein, wenn Sie die IDs speichern und im Browser auschecken , funktioniert alles einwandfrei. Nun, können Sie sehen, hier sind die Links. Wenn Sie auf die TV-Sendung klicken, gelangen Sie zur Seite mit der TV-Sendung. Geh zurück. Meine Liste. Filme. Als Aspartat funktioniert alles einwandfrei. Also müssen wir das Bauteil jetzt so schnell stilisieren . Lass uns auf der rechten Seite arbeiten, auf jeden Fall. Und wieder ist hier eine andere Art von Grafikfehler. Ich weiß es nicht. Also hier ist es, spät in der Nacht. Also bitte entschuldigen Sie mich, nur für diesen Vortrag. Ich werde D-Flag machen. Das ist in Ordnung. Wir alle machen Fehler. Und vielleicht ist es nur ein Tippfehler und nichts, was es sein sollte. Stimmt. Jetzt. Wir werden ein Wahlrecht haben? Wir sind in diesem Div mit dem Klassennamen Rightside Boarding. Und dann richtig, wir sind in diesem Boot werden die Offline-Abmeldung rendern. Schließen Sie es mit dem selbstschließenden Etikett. Speichern Sie im Browser. Hier ist es, kannst du sehen, hier ist die Abmeldung. In der nächsten Vorlesung werden wir dieses Protein also implementieren. Aber vorerst müssen wir die beanspruchte Benutzeroberfläche beibehalten, indem wir das Unternehmen stilisieren. Okay, lassen Sie uns die Komponente in der nächsten Vorlesung dialysieren. 84. 82 Globaler Css: Okay, bevor wir mit der Stilisierung dieser Komponente fortfahren , lassen Sie uns schnell einige notwendige Einstellungen vornehmen, oder? Wir sind im Indexpunkt CSS. Sie können also einfach Command V oder Control P ausführen, um das Suchfeld oben aufzurufen und dann einfach so nach Indexpunkt-CSS zu suchen . Und hier werden wir etwas globales CSS anwenden. Zuerst werden wir den Hintergrund ändern. Ich mache hier die Hintergrundfarbe. Machen wir es schwarz, einfach so. Nachdem wir das hier gemacht haben, machen wir Margin Null, Padding-Fehler. Die Boxgröße wird Borderbox sein. Also hier werden wir Overflow machen. Überlauf auf der X-Achse. Wir werden es verstecken. Und ich habe das getan, lass mich sehen. Gut. Jetzt ist der Hintergrund schwarz und Sie können nicht nach rechts scrollen. Sie werden es vielleicht nicht bemerken, aber ich kann Ihnen versichern dass Overflow Hidden einwandfrei funktioniert. Dies sind die notwendigen Einstellungen , die wir global vornehmen müssen. 85. 83 TopNav: Willkommen zurück an alle. Lassen Sie uns also schnell die Komponenten oben links stilisieren. Gehe zurück zum VS-Code. Bevor wir fortfahren, müssen wir zur Netflix-Seite zurückkehren . Und hier haben wir den Fensterpunkt im Scroll-Listener implementiert . Ja, also was wir jetzt tun werden, ist, es als Sonden an das obere Navi weiterzuleiten. Das ist also ziemlich einfach. Also hier werde ich Wachstum machen. Equa, ist kaputt. Jetzt wird es als Requisiten nach oben gereicht. Jetzt ist der nächste in der Reihe, es zu erhalten, oder? Wir befinden uns in der obersten Navigationskomponente. Und um das zu tun, müssen wir es nur hier destrukturieren. Es ist gescrollt. Das ist am einfachsten. Ja. Also, wenn ich das jetzt gemacht hätte, könnte ich die Informationen von hier bekommen, oder? Wir sind jetzt ganz oben. Wir werden herausfinden, ob der Staat wahr, falsch, wahr oder falsch ist . Gut, niste hier. Ich mache Navi, gebe dem einen anderen Klassennamen und das wird dynamisch sein, nicht. Also werden wir die Buckzähne haben. Und du weißt, dass es von hier kommt, oder? Gut. Also, wenn ich dieses Zitat wahr mache, werden wir dynamisch eine Klasse namens Screwed haben. Jetzt werden wir nicht rumschrauben müssen, einfach so. Eigentlich ist die Idee , dass wir das Oberteil stilisieren können. Keine Sorge, du wirst es gut genug verstehen, wenn ich damit fertig bin. Ja. Als nächstes werde ich alles so kopieren. Kannst du die Zeilen 20 bis 43 sehen? Verschiebe es im Navi. Dieser Typ hier. Kannst du sehen? Okay, in Ordnung, also lassen Sie uns jetzt ohne weitere Umschweife beginnen, die Anwendung zu stilisieren. Jetzt. Wir werden keine Schrauben, Punkte, keine Schriftrollen stilisieren. Wir werden es Flex anzeigen lassen. Punkte, scrolle. Schon wieder. Wir werden einen Display-Flex haben und dann ist die Hintergrundfarbe schwarz. Deshalb haben wir uns das Scroll-Event angehört . Wenn du Ventrikel zum Browser sagst und bumm. Nun, du siehst es vielleicht nicht klar weil wir das Navi stilisieren müssen, das ist dieser Typ hier. Ich muss nur Navi kopieren. Wir werden die Position haben. Lass es uns klebrig machen. Von oben werden wir Null sein. Das wird es also an die Spitze bringen. Und die Höhe dieser Top-Navigation wird sechs RAM betragen. Die Breite beträgt 100 Prozent. Begründen Sie den Inhalt. Abstand zwischen den Positionen wird korrigiert, weil wir den oberen Z-Index korrigieren wollten . Lass uns zwei draus machen und 0,4 auffüllen. Lassen Sie uns die Elemente zentrieren. Wenn Sie also den Browser speichern und auschecken, werden Sie jetzt, wenn Sie es vermasseln, feststellen, dass die Hintergrundfarbe der oberen Navigationsleiste schwarz wird. Ich bin mir sicher, dass du das kannst. Sie sehen, das liegt einfach daran wenn Sie die Anwendung auf der Y-Achse scrollen, dies auf wahr gesetzt wird. Wenn du dann scrollst auf true gesetzt ist, rufen wir diese Klasse auf, die die Schraube ist, und wenden dann den Hintergrund an, dass er schwarz ist. So einfach ist das, lassen Sie uns nun eine Transaktion durchführen, damit Sie beim Nullpunkt-Scrollen eine nette Animation haben . Das heißt, Satans ist in Stunden. Okay, lassen Sie uns das Logo schnell stilisieren, damit Sie ein klares Bild davon haben, was wir bisher getan haben, denke ich. Ja. Punkte. Lass uns die linke Seite machen. Ich rate immer, genau das zu kopieren, was Sie hier haben , damit Sie nicht unnötig in Schwierigkeiten geraten. Linke Seite. Wir lassen es Flex anzeigen und richten dann die Elemente mittig aus. Geben wir ein Leerzeichen dazwischen. Ich mache Gap to Ram. Lassen Sie uns das Logo anschließend schnell stilisieren. Das Logo, dann lassen wir es wieder anzeigen. Der gespaltene Fluss. Richten Sie den Inhalt zentriert aus, richten Sie die Elemente mittig aus und sparen Sie sich die Verpflichtung. Gehen wir nun präzise mit dem Bild um. Img die Breite. Machen wir zehn RAM auf Höhe zwei, rem, speichern Sie die Anwendung. Und das haben wir. Alles ist gut aufeinander abgestimmt. Jetzt haben Sie das Logo hier und jetzt haben Sie auch die Schaltfläche zum Abmelden hier. Gemeinsamer Teil hier. Und wir machen die Quotenlinks. Wir möchten diese Links hier stilisieren , die früher mit dem aktuellen Erscheinungsbild zu tun hatten. Also lassen wir sie Flex anzeigen , speichern und auschecken. Siehst du, jetzt haben wir eine Heimfernsehsendung und der Rest ist verschönert. Okay, wenn ich hier bin, LI, LI, werden wir eine Ziellösung anvisieren, ihr eine weiße Farbe geben. Speichern Sie im Browser. Jetzt hast du es. Okay, es ist in Ordnung, alles cool. Aber ich möchte, dass Sie noch etwas beachten, Sie sehen es vielleicht nicht deutlich, aber es wird auf dem Bildschirm angezeigt. Was ich nun tun möchte, weil ich möchte, dass du jeden Teil dieses Codes verstehst, markiere all diese Bilder. Sie können einen Kommentar dazu abgeben. Mach das nicht am Ende. Schau mir einfach zu, weil es für Lehrarbeiten ist. Möglicherweise sehen Sie es auch nicht so gut. Ich gehe zum Indexpunkt CSS und mache nichts, markiere und kommentiere die Hintergrundfarbe. Komm zurück. Gut. Das sind also die Punkte , die wir nicht wollen. Alles sieht so aus, lass mich, lass mich, lass es mich so gut genug machen. Also hier plus nochmal ein Kommentar dazu. Okay, gut. Kannst du diesen Punkt hier sehen? Punkt, Punkt, Punkt. Wir wollen nicht, dass es diese Punkte entfernt. Was ich tun werde, ist zum Link zurückzukehren und dann werde ich im Browser Listenstil, Typ, Safe machen . Jetzt ist der Punkt weg. Siehst du keinen weltlichen Ausweichmanöver mehr? Du kannst keine sehen. Wir sind hier. Lassen Sie uns nun die Unterstreichung entfernen. Ich mag den Hintergrund nicht , hey, ich werde nur die Dekoration machen. Keine, speichern Sie das Projekt. Und jetzt haben wir hier einen richtigen Link. Es ist nett, ich liebe es. Wenn Sie genau hinschauen, werden Sie feststellen , dass alle diese Verbindungen zusammengedrückt sind. Lass uns ein Leerzeichen dazwischen haben. Um das zu tun, richtig, wieder innerhalb des Links, werde ich Gap als Mickey Three Rem machen, speichern Sie im Browser. Ups, okay, es ist in Ordnung. Cool. Lassen Sie uns einige der Dinge rückgängig machen, die wir gerade gemacht haben, um Paprika beizubringen. Spare hier. Und jetzt haben wir die Anwendung wie diese. Gehe zurück zu Top Glove, ändere die Farbe auf weiß und gut. Siehst du, dass alles einwandfrei funktioniert. Okay, jetzt ist es an der Zeit, die rechte Seite zu stilisieren , auf der sich die Abmeldetaste befindet. Okay. Siehst du, es ist Zeit , diesen Kerl zu stilisieren. Was ich jetzt tun werde, wir werden die linke Seite schließen. Markieren Sie diesen Typen hier, stellen Sie sicher, dass er hier so schließt . Damit haben wir die linke Seite geschlossen und beginnen nun mit der rechten Seite. Punkte. Scrollen Sie nach oben. Rechte Seite. Wir werden es flexibel anzeigen lassen. Richten Sie die Elemente mittig aus. Der Abstand sollte ein Zimmer betragen. Lass uns auf den Button zielen. Lass mich dir diesen Button hier zeigen. Okay? Denn wenn Sie die Hintergrundfarbe Rot angeben , ist Rot in Ordnung. Dann die Grenze. Machen wir es bekannt. Kausaler Hinweis. Schau, was wir haben. Jetzt. Siehst du? Gut. Ich denke, wir müssen die Größe erhöhen. Bevor wir also die Größe erhöhen, werde ich das hier tun und mich konzentrieren. Die Gliederung wird nicht auf das SVG selbst abzielen, das ist dieser Typ. Lass es mich dir zeigen. Diese Typen. In Ordnung Leute, es ist spät in der Nacht, also gut, lasst uns weitermachen. Ich werde es als VG machen. Die Farbe der SVG ist rot. Die Schriftgröße, von der eine Schauspielerin die Größe der SVG erahnt, lassen wir es regnen. Es ist vielleicht zu groß. Also nehmen wir es heraus, speichern den Browser und Sie sehen, dass er extrem groß ist. Und lassen Sie uns das auf Weiß ändern und sehen, was passiert. Wenn die Anwendung. Und hier und du lädst neu, kannst du sehen, dass alles in Ordnung ist. Aber eine Sache, die wir nicht wollen, ist dieses Zeug hier drüben. Wir wollen, dass es hier ein bisschen kreisförmig ist. Was ich tun werde, Grenzradius, machen wir 50 Prozent draus. Also, wenn Sie diese Sicherheitsanwendung im Browser ausführen, haben wir es jetzt so ausgesehen. Kannst du sehen, dass alles wie erwartet einwandfrei funktioniert. Bevor wir diese Vorlesung beenden, möchte ich alles gut genug erklären. Noch einmal. Geh zurück zu Netflix. Also hier haben wir uns die eigenen Scroll-Events angehört. Ich habe mir die Ereignisse auf dem Bildschirm nicht angehört. Wir haben eine Zustandsvariable erstellt. Und wir sagten, wenn der Offset von window.py gleich Null ist, heißt das, wenn der Benutzer es nicht vermasselt hat, wird die Anwendung so aussehen. Und der obere Navigationshintergrund wird keine Farbe haben. Wenn wir also wissen, dass tonhöhenweise Offsets gleich Null sind, setzen wir den Anfangszustand auf Falsch, also behalten wir den Zustand und die Ls bei. Wir setzen den Anfangsstatus auf „Wahr“. ZB hier bei der Bewerbung haben wir nicht nach oben geschraubt. Jetzt ist der Pedra-Offset gleich Null. Daher wird false zurückgegeben. Wenn ich also nach oben scrolle, wird wieder Wahr zurückgegeben. Die Idee ist, dem Top Nav dynamisch einen Klassennamen zuzuweisen , der auf dem Status basiert. Wir mussten dem Klassennamen keine Hintergrundfarbe zuweisen . Also hier haben wir die Schrauben als Requisiten übergeben. Im oberen Navigationsbereich. Wir haben es hier durch diese Struktur erhalten. Lass mich dir das hier zeigen, nachdem ich das gemacht habe. Also hier haben wir einen Klassennamen, genau hier haben wir das Navi. Und hier haben wir es getan. Wenn eine Schraube gleich wahr ist, erhalten wir einen Klassennamen namens screwed. Ja, Pfeile. Wenn es falsch ist, werden wir einen ClassName-Code haben, der nicht scrollt. Wenn es also gescrollt ist auf true gesetzt, erlaubt es, diesen Clusternamen zu stilisieren und den Hintergrund auf Schwarz zu setzen. Lass es mich dir zeigen. Genau das passiert hier. Jetzt ist der Hintergrund schwarz. Wenn die Benutzer also die Anwendung nach oben vergrößern, wenden wir jetzt den schwarzen Hintergrund nach oben an. So wie das. Verstanden, wunderschön. Das ist also alles für heute. Und in der nächsten Vorlesung werden wir mit der Implementierung des Heldenbereichs beginnen. 86. 84 LogOut: Ordnung, also werden wir in dieser Vorlesung mit der Implementierung der Abmeldefunktion fortfahren . Wenn Sie also die obere rechte Ecke des Bildschirms beobachten, sehen Sie die Schaltfläche zum Abmelden. Wenn der Benutzer also auf diese Schaltfläche klickt wird angezeigt, dass er sich von der Anwendung abmelden kann. Lassen Sie uns das schnell umsetzen. Komm zurück zum VS-Code. Wir werden den Status importieren oder nicht, melden Sie sich von Firebase ab. Also ich denke, wir haben es auf der Anmeldeseite. Öffne schnell die Anmeldeseite und dann okay, lass uns diesen Kerl importieren. Markieren und kopieren. Gehe zum oberen Navigationsbereich. Füge es hier ein. Was wir wollen, ist automatisierter Wandel und auch die Abmeldung von Karma. Nochmals zur Anmeldeseite. Wir werden die Firebase kopieren, die wir erstellt haben. Lass es uns hier einfügen. Und schließlich werden wir mit Navigate importieren. So einfach ist das. Also eigentlich ist das, was wir hier machen werden, ziemlich einfach. Gehen Sie erneut zur Anmeldeseite zurück und scrollen Sie nach unten. Jetzt werde ich zuerst diesen Typen hier kopieren. Dann füge es hier nochmal auf die Login-Seite ein. Kopiere diesen Typen und füge ihn hier ein. Das wird also der Fall sein, wenn es keinen aktuellen Benutzer gibt . Wenn es keinen aktuellen Benutzer gibt, müssen wir zur Anmeldeseite navigieren. Wenn Sie auf die Schaltfläche Abmelden klicken, werden Sie zur Anmeldeseite weitergeleitet. Speichern. Scrollen Sie nach unten und lassen Sie es uns hier implementieren. Also onClick, wir rufen die Abmeldung hier mit Firebase auf. Genau wie diese. Speichern Sie das Projekt im Browser, oder? Kannst du das sehen? Jetzt sind wir ausgesperrt. Also, wenn ich auf Login klicke, schauen wir mal, was passiert. Ordnung, wenn ich jetzt auf die Abmelde-Schaltfläche klicke, werden wir ausgeloggt und die Anwendung leitet uns zur Anmeldeseite weiter. Lass es uns versuchen. Kannst du das sehen? Jetzt sind wir auf der Anmeldeseite. Alles funktioniert erwartungsgemäß auch einwandfrei , wenn ich mich in die Anwendung einloggen möchte. Also werde ich meine Konten verwenden. Angela gmail.com 123ab c, einloggen und bumm. Jetzt sind wir hier. uns gelungen , die authentischen Asiaten und alles funktioniert wie erwartet einwandfrei. In der nächsten Vorlesung werden wir also mit der Heldenseite fortfahren. Wir sehen uns in der nächsten Vorlesung. 87. 85 Hero: Willkommen zurück an alle. In dieser Vorlesung werden wir hier die Hero-Komponente entwerfen. Am Ende dieser Vorlesung werden wir also einen sehr schönen Blick auf das Design werfen. Geht zum VS-Code über. Und lass uns schnell weitermachen und Netflix Punkt js öffnen. Also genau hier werde ich einige dieser Bilder löschen, weil wir das einige dieser Bilder löschen eigentlich getan haben, um auf ihrer Website das Scrollen zu ermöglichen. Kannst du das sehen? Genau das war der Grund, warum wir die Bilder mehrmals ausgeführt haben . Wischen Sie es jetzt im Browser ab. Hey, ist es möglich, dass du sie gerade siehst, wir können vielleicht nicht wieder scrollen. Keine Sorge, überhaupt keine Probleme. Das erste, was ich hier tun werde, ist, aus Standardkomponenten zu importieren. Direkt unten. Ich mache Const Hero Container Equa Styled Dot D und dann die String-Interpolation, öffne die Bark 80k. Okay, jetzt sind wir fertig. Ich werde den Heldencontainer markieren und kopieren. Geh nach oben. Wir möchten die gesamte Anwendung im Hero-Container zusammenfassen . Markieren Sie den Befehl X, um ihn auszuschneiden, verschieben Sie ihn hier hinein, mixen Sie den Code, um den Code zu formatieren, und schon sieht er sauber aus. Lass uns weitermachen. Jetzt haben wir ein Div mit dem Klassennamen Hero. Innerhalb des Div haben wir das Top Nav gerendert und dann so grob wie Requisiten an das Top Nav übergeben. Und hier haben wir das Heldenbild. Was ich nun direkt nach dem abschließenden Tag des IMG tun werde , wir werden ein weiteres Div haben, geben wir ihm den Klassennamen container. Die Container-Div. Wir werden ein weiteres Div haben, gib ihm den Klassennamen Dido und das richtige Wort im Titel. Wir werden einen Hadrian-Tag haben und ich werde Superman machen. Diese werden also als Titel dienen. Wir werden also ein p-Tag haben , das als Beschreibung dient. Was ich jetzt tun werde, ist einen zufälligen Dummy-Test aus dem Internet zu kopieren und dazwischen einzufügen. Jetzt. Ich werde einfach so einfügen. Ja, also wenn du eine richtige Beschreibung von Superman hast, kannst du sie genauso gut hier drüben schreiben, aber für mich möchte ich keine Zeit verschwenden, also ja. Also direkt nach dem abschließenden Div des Klassennamentitels ist es hier. Wir werden einen weiteren Div haben. Und dieses Div wird uns den Button-Container div, div, den Klassennamen von Boardings, speichern uns den Button-Container div, div, . Wir werden also zwei verschiedene Schaltflächen haben, richtig, im Heldenbereich. Eine der unteren Schaltflächen wird die Play-Schaltfläche und die andere die Info-Schaltfläche sein, nämlich die Schaltfläche „Mehr“. Hier werde ich es machen. In einer Bitte gekauft, gib ihm einen Klassennamen für Play Between, ich werde einfach diese Mischung hervorheben um sie so zu duplizieren. Und was hier nochmal macht, ich werde mehr tun. Das M sollte auf Cup stehen. Und dann werde ich hier mehr tun. Wenn Sie also meinen Klassennamen hier finden, ist die Konvention nicht aussagekräftig genug. Sie können es beschreibend machen. An deinem Ende. Du kannst es vollständig schreiben. Wir können die Play-Taste, die More-Taste drücken. Damit können wir am Ende auskommen. Aber für mich werde ich es einfach so halten. Eine andere Sache, die wir tun werden , nach oben scrollen und dann werden wir einige der Symbole importieren , die wir im Board verwenden werden . Ich werde die AIR-Linie importieren und den Kreis schließen. Sie werden es mit einem anderen ergänzen. Teilweise. F, ein Abspiel von React Dash, Icon Slash. So einfach ist das, wenn Sie im Browser speichern. Diese. Also werden wir ihn hier haben, den Superman , der als Titel des Films dient, die Beschreibung hier. Und hier haben wir den Play-Button im mobilen Team. Wenn ich jetzt den Bildschirm ein wenig vergrößere, wirst du sehen, dass dieses Bild kaputt geht. Sieht so aus. Also, was ich jetzt tun werde, ist diese Firma zu stilisieren. Stimmt es? Wir sitzen auf dem Rücksitz. Wir machen Punkt hier, Reihe. Du wirst mit der relativen Position haben. Die Idee ist, hier die gesamten Register direkt oben auf dem Heldenbild zu platzieren . Also alles ist Superman, die Beschreibung auf dem Stück und das mobile Team wird direkt davor stehen. Okay, ich hoffe, wir müssen die Einbruchsbilder stilisieren, weil das Heldenbild kaputt ist und ich es nicht mag. Was ich jetzt tun werde, IMG, lass uns das Bild anvisieren und ihm eine Höhe geben. Machen wir die Höhe der Hecke 70 V und dann die Breite. Machen wir es zu 100% Ich denke, das wird in Ordnung sein. Speichere ein gestaffeltes Ausblenden im Browser und ich zoome wieder, zoome heraus, alles funktioniert jetzt, gut. Okay, dann ist Nest Online, um diese Typen ganz oben zu platzieren. Wie machen wir das? Kannst du mir sagen, mach dir keine Sorgen, ich helfe dir. Behälter mit Punkten. Lass mich dir hier alles zeigen. So steht das direkt im D für den Klassennamen des Containers. Also ich meine, all das Zeug, der Titel, die Beschreibung auf dem Boot. Lass es uns positionieren. Ratet mal, was? Es wird absolut sein, sodass es über dem Heldenbild platziert wird. Weil wir es hier auf relativ setzen. Und hier, wenn du absolut bist, wird dieser Typ ganz oben stehen. Nicht nur oben, direkt vor dem Körper? Ja. Okay. Keine Sorge, lass es uns tun, damit du es gut genug verstehst. Was ich jetzt tun werde, ist, den Boden zu einer Felge zu machen . Wenn du sparst. Gehe zurück zum Browser. Wir haben es immer noch hier unten. Lass es uns überprüfen. Ich habe geschrieben, dass es in Ordnung ist. Wenn du Absolute und das untere Rem machst, sollte sich dieser Container über dem Helden befinden, aber im Moment scheint es, dass er nicht funktioniert. Oh mein Gott, ich habe erkannt, dass die Mine falsch ist. Das tut mir leid. Das ist die richtige Schreibweise von Container. Ich weiß, dass die meisten von Ihnen es vielleicht in der Vorlesung gesehen haben . Stellen Sie sicher, dass Sie es korrigieren. Es ist ein Tippfehler. Wischen Sie den Kerl aus und kleben Sie ihn hier ein. Jetzt haben wir die richtige Schreibweise von Container. Speichern Sie im Browser. Jetzt haben wir die Öfen hier drüben. Okay, es ist in Ordnung, aber lass uns mehr Suppe daraus machen. Komm her. Ordnung, innerhalb des Containers haben wir den Titel. Und natürlich möchte ich noch einmal nach dem Klassennamen suchen weil ich nicht möchte, dass wir in ein weiteres Labyrinth gehen. Der Titel hier zum Kopieren. Leute, hört zu, wir müssen das so machen , damit es uns nicht gut geht, alles ist in Ordnung, oder? Wir tragen den Titel und haben das H1-Tag. Hier. Ich werde den Rand links haben, fünf Rem-Transformation, Großbuchstaben. Lass uns sparen und sehen. Okay, hier sieht es gut aus, oder? Geben wir ihm eine Schriftgröße von 73 Pixeln. Ordnung, also für den Hintergrund der Schrift werde ich einfach aus dem Code-Helper kopieren und einfügen. Geh und sieh es dir an. Du wirst den Heldenhintergrund sehen. Kopieren Sie diese Kachel und fügen Sie sie hier ein. Speichern. Und dann schauen wir uns das Ergebnis im Browser an. Schau es dir an. Siehst du jetzt, wir haben diesen Superman hier drüben, der gut aussieht. Ich liebe es. Okay, lassen Sie uns schnell das P-Tag stilisieren. Rand, Unterseite -50 Pixel. Die Breite beträgt 40 Pixel. Rand links als Beibehaltung. Der verbleibende Spielraum beträgt fünf Rem. Die Schriftfamilie ist kein Problem. Geben Sie ihm eine Schriftfamilie aus Lexend, Deca, Coma, Sans, Serif. Dann geben Sie einfach die Farbe an, die weiß sein soll. Alles wird gut aussehen. Es sieht in der Tat gut aus. Der untere Rand sollte 50 Pixel und nicht -50 Pixel betragen. Kannst du jetzt sehen , dass es oben ist. Außerdem haben wir die Knöpfe hier drüben , keine Sorge, wir werden sie jetzt nach oben bringen. Also direkt neben dem Titel haben wir einen weiteren Div. Lass mich dir das Div hier mit den Klassennamen der Internaten zeigen . Ich werde einfach diese Punktschaltflächen für den Klassennamen kopieren. Und dann werde ich es anzeigen lassen. Geben wir ihm einen Spielraum von fünf Rem. Umgeleitete Lücke zu Rem. Okay. Es ist in Ordnung. Okay. Was machen wir nochmal, müssen wir tun? Wir müssen den Button stilisieren und ihn schöner aussehen lassen. Wir haben auch die BTN-Klasse. Wir haben Punkte, mehr BTN-Klasse. Und all diese, du weißt schon, dass es ein Top ist, hier stimmt die Mischung der Schreibweisen deiner Klassennamen. Rechtfertigen wir den Inhalt. In der Mitte werden die Schriftarten innerhalb der Schaltfläche rot dargestellt. Geben wir ihm einen Grenzradius. Okay, machen wir daraus ein Wireframe. Dadurch wird es tatsächlich ein bisschen kurvig. Lass uns sparen und sehen. Okay, läuft in der Tat gut. Gehen wir weiter. Die Schriftgröße. Ein Punkt für ihn. Die Lücke besteht aus einem Felgenpolster, 0,9 Laufpolster links bis zum REM-Muster rechts. Shoe Point für AIM. Ups Leute, schaut es euch an. Ich weiß nicht, warum das immer wieder passiert. Okay. Der Rand wurde repariert. Wir wollen die Grenze nicht, also werde ich sie nicht machen Schauen wir mal, was wir jetzt haben. Und es sieht gut aus. Verkleinern. Ich liebe die Ergebnisse. Lassen Sie uns den Fall fortsetzen. Machen wir daraus einen Zeiger. Es wird also genau das Gleiche sein wie das Mehr zwischen n. Also kopiere den Stil von a hier und füge ihn hier ein , wenn du a speicherst, halte ihn raus. Stimmt es? Jetzt müssen wir die Hintergrundfarbe von more btn ändern . Und die Farbe hier, die Schriftfarbe selbst, wird weiß sein, die Hintergrundfarbe. Machen wir es schwarz und die Grenze. Pflege. Also dieser Typ hier, der Körper wird 0,1 RAM durchgehend weiß sein. Lass es uns überprüfen. Perfekt. Alles ist in einem guten Zustand. Aber eine Sache, die ich jetzt tun möchte, ist der Leerraum zwischen den Beschreibungen unten ziemlich übereinstimmt. Also denke ich, wir müssen es ein bisschen reduzieren. Lassen Sie mich die Beschreibung sehen, das ist der Titel. Die Beschreibung hier drüben, unten am Rand. Machen wir zehn draus. Siehst du was, wie poliert es so nicht funktioniert hat. Okay, wir werden einen Weg finden, es zu Fall zu bringen. Also ich werde es so aussehen lassen, Leute, es scheint, dass die -50 diesmal funktionieren wird und es funktioniert. Alles cool. Aber ich möchte, dass wir den Hintergrund etwas dunkel machen , damit das Bild, das das Heldenbild ist, okay, Leute, lasst uns es implementieren, damit ihr versteht, was ich sagen werde. Komm her, scrolle nach oben. Und hier machen wir die Hintergrundfarbe. Machen wir es schwarz. Nachdem ich das gemacht habe, richtig, Wouldn't the Hero, werde ich Punkt, Hintergrund, Strich, Bild machen. Keine Sorge, wir werden diese Klasse jetzt erstellen. Kopiere, gib dem IMG einen Klassennamen oder ein Hintergrundbild, den einfachsten Punkt und dann komm zurück und weniger Thailand ist es Hier? Mal sehen, was hier passiert. Futa, ich mache die Helligkeit. Lassen Sie uns die Helligkeit auf 40 Prozent erhöhen, da wir hoffen, dass das funktioniert. Es hat einwandfrei funktioniert. Genau das meine ich. Manchmal ist das Ergebnis Ihrer Arbeit die beste Erklärung. Das war meine Absicht. Komm her. Möglicherweise müssen Sie diese nicht einmal tun. Okay? Jetzt ist es uns gelungen, einen transparenten Hintergrund zu haben. Das ist ein Klassiker. Das ist alles für heute. Und in der nächsten Lektion werden wir das Play-Voting so implementieren , dass der Benutzer, wenn er auf die Play-Schaltfläche klickt, Sie zur Replay-Komponente weitergeleitet wird , in der der Film abgespielt wird. Es wird interessant sein. Wir treffen uns in der nächsten Vorlesung. 88. 86 Konsistente Margin: In Ordnung, wenn Sie also genau hinschauen, werden Sie feststellen, dass wir keine einheitliche Marge haben. Lassen Sie mich Ihnen den Inhalt hier zeigen, nämlich die Beschreibung, den Titel und die Schaltflächen. Der linke Rand beträgt fünf RAM. Aber wenn Sie sich die Oberseite ansehen, werden Sie feststellen, dass das Netflix-Logo hier links nicht einmal einen Rand hat. Was wir also tun werden, ist, auch den verbleibenden Rand als Phi des RAM anzugeben , sodass er von derselben Zeile aus beginnt. Sozusagen. Gehen Sie jetzt zurück zum VS-Code und öffnen Sie dann den oberen Bereich. Jetzt müssen wir wie diese nach unten scrollen, bis wir die linke Seite haben. Linke Seite, wir sind hier. Alles klar, ist es die Lücke zum Rammen? Linker Rand? Machen wir fünf Rem draus. Kannst du sehen, dass jetzt alles in Ordnung ist? Wenn Sie die obere rechte Ecke des Bildschirms beobachten, werden Sie feststellen, dass sich die Abmeldetaste fast außerhalb des Bildschirms befindet. Ich mag es nicht. Also komm her, wir werden nach der richtigen Seite suchen. Auf der rechten Seite, wo du, hier ist der Rand, richtig? Lassen Sie uns das Spektrum erweitern. Ich sehe Save. Wunderschön. Jetzt haben wir ein sehr gut aussehendes und ausgereiftes Design. Es ist nett so. Fahren wir mit der nächsten Vorlesung fort , in der wir die Movie Player Company entwerfen würden. 89. 87 VideoPlayer-Komponente: Ordnung, also in dieser Vorlesung werden wir die Movie-Player-Komponente erstellen. Aber bevor wir fortfahren, müssen wir den OnClick für diesen unteren Teil implementieren, nämlich den Play-Button. Wenn der Benutzer also auf die Play-Schaltfläche klickt, wird er oder sie zum Filmplayer weitergeleitet. Geh zurück zum VS-Code, Netflix. Wir müssen importieren, navigieren benutzen. Wo machen wir das jetzt? Okay, sieh dir das an, das Top-NEF. Ich schneide es ab, komm her und füge es ein. Das wären also die Beiträge, die wir von der Bibliothek haben, und das werden die Beiträge unserer eigenen Unternehmen sein. Also hier mache ich es in Pots, benutze Navigate von React, Router Dome. Hier müssen wir es initialisieren. Ich mache Const, Navigate. Ein Benutzer navigiert. Natürlich ist es eine Funktion. Also müssen wir so etwas machen und zu dem hier gekauften Stück zurückkehren. Ich mache onclick, onclick des Körpers. Wir werden zum Spieler navigieren. Okay, lassen Sie mich Ihnen noch einmal die App-Komponente zeigen. Ich zeige dir die immer wieder. Können Sie sehen, hier ist die Route und wir werden zu dieser Komponente navigieren , heißt Player-Befehl B. Und pages, pages, player, die Player-Seite, speichern, speichern im Browser. Lass uns auf diesen Button klicken und zack, wir sind hier direkt auf der Play-Seite. Kannst du das Stück oben sehen? Gut. Schließ das, schließ das unten, dann schließ es oben. Jetzt bleibt uns der Spielerpunkt g übrig. Also, was wir hier innerhalb der Player-Komponente machen werden, wir werden einen geteilten Container haben. Sie auch diesmal sicher, dass die Milz des Kontinents korrekt ist. Okay, lassen Sie uns Stout aus den Startkomponenten importieren. Und dieser Player-Container, const, player-container entsprechen stout.df und dann der Rücksitz. In Ordnung, es wird uns gut gehen. Definitiv. Habe einen DVI, gib den Klassennamen von clear, right wenn der Spieler div, ein weiteres Div mit dem Klassennamen des Rückwärtspfeils, rechts. Um den Zurück-Pfeil zu bringen, rendern wir den BSR nach links. Und dieses Symbol BSR links stammt vom React-Symbol in den Töpfen S, Pfeil links von den React-Strich-Symbolen. Und natürlich werden wir es mit BS lösen. Bs sind so richtig gelassen. Okay, es ist in Ordnung. Jetzt rendere ich das Symbol hier mit dem VS-Pfeil nach links. Und dann spezifizieren wir den Onclick. Was passiert, wenn der Benutzer auf dieses Symbol klickt? Wir möchten zurück zur Netflix-Seite navigieren. Also onclick, ich werde es machen. Jetzt bekommen wir hier minus eins und schließen es, was das selbstschließende Etikett ist. Jetzt haben wir also zwei Eingaben verwendet, navigieren und initialisieren sie. Gehen wir zurück zur Netflix-Seite und kopieren wir sie. Ich kopiere uns von hier aus navigieren. Komm her, füge es hier erneut ein, kopiere die Initialisierung und füge es hier ein. Alles cool. Also direkt nach dem abschließenden Div des Zurück-Pfeils des Klassennamens haben wir hier in diesem Div einen Klassennamen des Spielers. Ups, das sollte bitte Spieler sein. Wir werden das Video-Tag haben, Video sRC. Kopieren wir also den Trailer aus der Code-Halo-Leiste und fügen ihn dann hier ein. Dies ist der Link zum Video, das mit einem sich selbst schließenden Tag näher betrachtet wird, sofern die erforderlichen Einstellungen nicht erfüllt sind. Bevor wir mit den Einstellungen fortfahren, speichern wir und sehen, was wir haben. Lass uns auffrischen. Kannst du sehen, dass wir das Video hier haben? Vorerst. Sie können das Video nicht abspielen. Und ja, lassen Sie uns die notwendigen Einstellungen vornehmen. Wir werden Autoplay aktivieren. Dann machen wir eine Runde. Und die Kontrollen. Lass es uns mutieren , damit er keinen Lärm macht. Wenn du dich erfrischst. Kannst du sehen, okay, lass uns weniger entfernen als das Mutierte bewegen. Jetzt haben wir die Kontrolle darüber, dass alles funktioniert. Oh ja. Siehst du das? Es ist in Ordnung. Was ich jetzt tun werde, ist die Videos zu stilisieren und alles wird perfekt funktionieren. In Ordnung, Brenda Starr, Component Dot Player. Die Breite. Lassen Sie uns die Breite 100 Ansichtsbreite, die Höhe, 100 Ansichtshöhe, Punkte festlegen. Pfeil nach hinten. Lass es mich dir zeigen. Das ist der Buck Hirer. Stellt sicher, dass die Schreibweise korrekt ist. Habe mit Position absolut. Der Abstand ist zwei oder M, Z, Strichindex. Machen wir eins daraus. Wie V G, was für die Präzisierung des Symbols steht. Schriftgröße wird sein, was der Größe des Symbols entspricht. Machen wir daraus drei rem, kausaler Zeiger. Ich mache hier die Farbe der SVG, Farbe, Weiß. Mal sehen, was passiert. Los geht's. Jetzt ist es an der Zeit, das Video zu stilisieren. Das Video, was ich machen werde, werde ich zu 100 Prozent hoch machen. Wir haben 100 Prozent. Nachdem Sie dies getan haben, speichern Sie das Projekt und im Browser. Lass uns auf das Backboard klicken. Alles funktioniert einwandfrei. In Ordnung, unterhalten wir uns. Okay, es ist in Ordnung. Vielen Dank. Und das ist alles für heute. In der nächsten Vorlesung werden wir damit beginnen, die Karten so zu gestalten, dass die Filmauslage hier sehr interessant sein wird. Wir sehen uns in der nächsten Vorlesung. 90. 88 MovieCard: Willkommen zurück an alle. In dieser Vorlesung werden wir die Kartenkomponenten so gestalten, die Kartenkomponenten so dass, wenn der Benutzer den Mauszeiger über den Schnitt bewegt, der Filmtrailer und die restlichen Informationen erscheinen , z. B. die Rettungsboote in der Schaltfläche „Gefällt mir nicht“ in der Option „Zwei Favoriten hinzufügen“. Also, ohne weitere Umschweife, lasst uns anfangen. Kehren Sie zum VS-Code-Befehl B zurück, um den Explorer zu öffnen. Also werden wir direkt in der Komponente eine neue Datei namens card dot js are EFC erstellen , was hart ist, um die funktionale Pfeilkomponente zu generieren den Explorer zu schließen. Und wieder Command P. Wir werden nach Netflix suchen, damit wir diese Komponente rendern, das heißt, die Rechte der Kartenkomponenten waren auf der Netflix-Seite. Ich bin hier. Also werden wir die Kartenkomponenten hier rendern. Wenn ich das mache, wird die Kartenkomponente für mich oben importiert, scrolle automatisch nach oben. Das siehst du also hier. Okay. Stellen Sie also sicher, dass Sie die Kartenfirma in die Wanne importieren. Ich bin hier, rette. Also werden wir die notwendigen Eingaben vornehmen , wie zum Beispiel oben, wir werden den US-Did-Hook importieren. Und ich hoffe natürlich, dass Sie wissen, dass sie TikTok als Funktion verwenden. Wir müssen es also auf jeden Fall aufrufen , wenn wir es nutzen wollen. Wir müssen auch Use-Navigate aus dem React-Router-Dome importieren . Auch hier müssen wir Stout aus Stout-Komponenten importieren. Nachdem wir dies getan haben, importieren wir die erforderlichen Symbole, die verwendet werden sollen, z. B. das Lichtsymbol, das Abneigungssymbol und viele mehr. Keine Sorge, ich habe die Icons schon vorbereitet. Also, was wir tun werden , ist kopieren und einfügen, oder? Wir haben den Code **** Power. Und das sind sie. also die Symbole hier markieren und kopieren , wird das nicht als Helfer bezeichnet. Komm nach oben und füge es ein. So einfach ist das. Der scharfe Kreis stammt also von Riyad-Symbolen und wir haben ihn mit diesen aufgedeckt. Alle Symbole stammen also tatsächlich von Riyadh-Ikonen. Nichts worüber man sich Sorgen machen müsste. Nachdem ich das getan habe. Lassen Sie uns die notwendigen Zustandsvariablen deklarieren, die verwendet werden sollen. Zuerst machen wir const On whole bad karma, set on hovered. Dann machen wir Equa, benutzen Staaten. Natürlich ist es eine Funktion und dies wird eine boolesche Operation sein, also wird der Anfangszustand falsch sein. Ja, nachdem wir das getan haben, müssen wir auch hier das US-Navigation initialisieren. Komm her. Ich mache Const, Navigates, Aquatic, benutze Navigate. So einfach ist das. Nachdem wir dies getan haben, fahren wir mit dem Design fort. Komm her. Wir nehmen Const, Cut Container. Beginne Punkt div, und zwar genau dann , wenn die Bakterien , also dort, wo der Stil stattfinden würde. Kopieren Sie den Kartenbehälter. Und dann werden wir den gesamten Antrag mit dem Kartenbehälter verpacken . Öffnen Sie das Tag, fügen Sie es ein und schließen Sie es. Diese Highlights, dieser Typ, bring es rein. So einfach ist das. Was wir jetzt tun müssen, als das von innen wegzuwischen, wir werden das Poster aufhängen. Okay, also was ich tun werde ist IMG, SRC, Equa. Lassen Sie mich Ihnen den Link zum Posterbild zeigen. Hier ist es markieren und kopieren. Komm her und klebe es mit einem selbstschließenden Etikett näher an. Und innerhalb des Tags lassen Sie uns die notwendigen Einstellungen wie die Gewinnchancen, die Schätzung und die Wahrscheinlichkeit, dass es ein Filmplakat wird, vornehmen. Wenn das Bild also nicht angezeigt wurde, ist dies die Alternative. Dann spezifizieren wir hier den Onclick. Klicken Sie auf das Poster. Wir möchten zur Komponente Film abspielen weitergeleitet werden , wo wir mit dem Abspielen des entsprechenden Films beginnen. Also, was ich jetzt machen werde ist so und dann werde ich Navigate Slash Player machen . Lass es uns testen. Speichern Sie im Browser. Klick. Wunderschön. Alles funktioniert einwandfrei. Okay, gut. Bevor wir fortfahren, möchte ich, dass wir hier etwas sehr, sehr schnelles tun. Weil du dieses Zeug gut genug verstehen musst. Komm her, lass uns den Stil auf den ausgeschnittenen Container anwenden und ihm eine maximale Breite von 30 Pixeln geben. Dann möchte ich dir etwas zeigen. Geben wir ihm eine Hintergrundfarbe. Lass es uns rot machen. Wenn ich anfange, dann will ich einfach abheben. Die maximale Breite im Browser, können Sie sehen, dass der ausgeschnittene Container hier tatsächlich überall abdeckt? Siehst du, genau das wollte ich dir zeigen. Nachdem wir das getan haben, machen wir weiter. Lass uns Hoover für diesen Kartencontainer einrichten. Wenn der Benutzer also den Mauszeiger auf den Kartencontainer oder genauer gesagt auf das Filmplakat bewegt, möchten wir, dass der Trailer und einige der Informationen angezeigt werden bewegt, möchten wir, dass der Trailer und einige der Informationen angezeigt . Also lass es mich dir hier zeigen. Was wir jetzt machen werden, ist so. Wir machen unsere Mauseingabe. Was wir tun werden, ist den Anfangsstatus zu aktualisieren. Der Anfangszustand hier ist falsch. Wir müssen also die Setup-Funktion aufrufen , um den Anfangszustand zu aktualisieren. Und das ist natürlich genau so, dann setze es auf false. Was ich jetzt tun werde, wir müssen es direkt nach dem abschließenden IMG-Tag implementieren. Wir machen, wenn Hoover ein Vierbeiner ist und wir die gesamte Umsatzsteuer-Information anzeigen wollen , sonst tun wir nichts. Also hier, wenn ANOVA ganz richtig ist, müssen wir dieses IMG-Tag nur noch einmal kopieren, markieren, kopieren und hier einfügen. Achten Sie darauf, den Code so zu formatieren , dass er ein wenig sauber aussieht. Also zB Sake, ich muss nur speichern, zurück zum Browser gehen, braucht. Es passiert nichts. Das liegt einfach daran, dass wir bei der Eingabe mit der Maus die Anfangszustände so aktualisieren müssen , dass sie wahr und nicht falsch sind. So toll, so. Okay, wenn der Benutzer also eine Maus auf das Filmplakat setzt, müssen wir den Anfangsstatus auf true aktualisieren. Und dann rufen wir hier die Setup-Funktion auf und sind bereit, den Anfangszustand zu aktualisieren, der falsch ist. Wir werden es auf wahr aktualisieren. Und dann wird der Hover-Effekt , der dieses Bild ist, angezeigt. Schon wieder. Nachdem wir das getan haben, werden wir unser meiste Blatt machen , sodass, wenn sie benutzen, habe ich die Maus entfernt, Maus verlassen Acquire. Wir müssen auch den Ausgangszustand aktualisieren , um fast das Verlassen zu erzwingen. Kopieren Sie also alles hier und fügen Sie es als aktualisiert auf falsch ein. Nachdem wir das getan haben, schauen wir es uns an. Wenn du den Mauszeiger bewegst, siehst du diesen Kerl hier drüben, und wenn du die Maus abnimmst, verschwindet sie, fast Enter, du siehst, wie der Schwebeeffekt fast verschwindet, er wird wieder normal. Außerdem wollen wir bei Mouseover den entsprechenden Filmtrailer der Pasta sicherstellen. Also hier machen wir ein Video und spielen dann eine GS ab. Highlights Die Videokopie kommt hier nach dem abschließenden Tag des IMG. Das hier eingefügte zeigt einen Fehler und ich weiß nicht warum. Okay, mach dir keine Sorgen, das liegt einfach daran dass wir es in einen Elterncontainer einwickeln müssen. Also, was ich jetzt tun werde, richtig, wäre es nicht hier schweben. Wir machen Div, geben ihr den Klassennamen Hoover, richtig? In diesem Div werden wir ein weiteres Div mit dem Klassennamen image, dash, video, dash, Wrapper haben. Kopiere hier alles aus den Zeilen 2092, Zeilen 36, Ausschnitte. Am besten formatiert das Div mit dem Klassennamen Bild, Video oder APA nicht den Code, speichert die Anwendung und geht zurück zum Browser. wieder Hoover. Jetzt funktioniert alles wie erwartet, aber wir haben diese Komponente nicht stilisiert. Erwarten Sie also nicht, dass sie sauber und schön aussieht. Vorerst. Obwohl es nicht hässlich aussieht. Die Kameras aus und alles funktioniert einwandfrei. Ich habe wieder zu viel geredet. Also direkt nach dem schließenden Div des Clusternamens Image Video Wrapper werden wir ein weiteres Div mit dem Klassennamen Infocontainer haben . In vollem Dodge-Container, oder? Wäre das nicht der Infocontainer, wir werden mehrere Symbole haben , die angezeigt werden, wenn die Karte Harvard ist. Also hier haben wir ein Geschichts-Tag und dieses Verlaufs-Tag. Innerhalb werde ich rote Notiz machen, weil wir auch den Titel des Films anzeigen wollen, geben wir ihm einen Klassennamen. Wir werden es auch Filmnamen nennen. einem Klick auf den Filmnamen Mit einem Klick auf den Filmnamen wollen wir zur Play-Our-Komponente navigieren , in der der entsprechende Film abgespielt wird. Geben Sie hier den onClick an. Also, gleich nach dem Schlusstag der Geschichte, werden wir eine weitere Div haben. Und dieses Div wird alle Symbole enthalten , die verwendet werden. Also nenne ich das Div-Symbolrechte innerhalb des Div des Icon-Clusters. Wir werden ein weiteres Div haben, geben Sie ihm einen Klassennamen von Controls. Weil wir dort mehrere Steuersymbole haben werden. Jetzt rendern wir das erste Symbol. Ich platziere einen Kosher. Schließe es mit dem selbstschließenden Etikett direkt im Inneren. Geben Sie ihm auch einen Titel des Spiels, wenn Sie auf dieses Symbol klicken Wir möchten zur Movie Player Company weitergeleitet werden. Gleich nach der Schließung des Audioplay-Fußballladens werden wir noch einen haben. Roi drückt den Daumen hoch, fühlt sich an, als würde er abhauen. Und ich werde ihm den Titel Licht geben , hervorheben, duplizieren. Und dann werden hier unsere Artikel im Abseits sein. Und das wird Abneigung sein. Der Benutzer kann den Film mit „Gefällt mir“ oder „Gefällt mir nicht“ bearbeiten. Noch einer. Hier werden wir BS überprüfen lassen, um den Titel abzuändern und von der Liste zu entfernen. Ich habe die Grundstücke skizziert und ihr den Titel „Zu meiner Liste hinzufügen“ gegeben. Nachdem wir das also direkt nach dem Schließen des Div der Klassennamensteuerelemente getan haben, werden wir ein weiteres Div mit dem Klassennamen von close it down haben. Geben wir ihm einen Klassennamen. Informationen. Ich habe einen Überblick. Geben Sie ihm einen Titel mit weiteren Informationen. Näher mit dem sich selbst schließenden Tag direkt nach dem schließenden Div von Klassennamen-Symbolen wie diesem, diesem Div hier, das bei Zeilen 54 endet. Wir werden eine weitere Div mit dem Klassennamen Januar haben . Also werden wir den Film großzügig behandeln. Hier. Wir wollen sie mit einer ungeordneten Liste anzeigen. Innerhalb. Du wirst ein LI-Tag bekommen. Also hier werde ich handeln. Also kannst du, einfach, weil das dynamisch passieren wird. Also können wir das Zeug einfach so hier drüben haben. Wenn Sie die Anwendung speichern. Schauen wir uns an, was wir im Browser haben. Okay, lass uns saugen. Kannst du hier alle Haltestellen sehen? Tequila, play, the lag, dislike, add and remove. Wir haben hier eine ganze Menge Haltestellen. In Ordnung, das ist es, was wir jetzt haben. Ich verstehe zutiefst, dass es nicht schön aussieht, aber ich kann Ihnen versichern, dass es auch nicht hässlich aussieht. Also mach dir keine Sorgen. In der nächsten Vorlesung werden wir beginnen, dieses Unternehmen zu stilisieren. 91. 89 Card: Ordnung Leute, lasst uns also schnell die Kartenkomponente stilisieren. Gehe zurück zum VS-Code und scrolle nach unten. Und hier werden wir diesen Kommentar entfernen. Also geben wir ihm eine maximale Breite von 230 Pixeln. Wenn Sie den Browser und die IDs speichern und auschecken. Jetzt können Sie sehen, dass das Bild etwas größer ist, aber keine Sorge, das werden wir korrigieren. Und dann die Breite selbst, die ihm die Bilder eine Höhe von 100 Prozent geben. Der Cursor wird ein Zeiger sein. Lass es uns relativ positionieren. Jetzt wollen wir das IMG direkt im Inneren anvisieren. Also werde ich IMG machen. Geben wir ihm einen Randradius von 0,2 ram. Oh mein Gott, dieser Typ behält, ich weiß nicht warum. Die Breite 100 Prozent, die Höhe 100 Prozent. Z-Index. Machen wir zehn draus. Wenn Sie speichern, im Browser auschecken, sehen Sie, dass es so gut aussieht. Das Poster ist eigentlich sehr klein, aber es ist in Ordnung. Es gibt kein Problem. Lass uns weitermachen. Jetzt. Fangen wir an, am Hover zu arbeiten. Also weiter Hoover, DOD, Hoover. Und der Benutzer spielt so mit der Maus auf dem Filmplakat. Siehst du, all diese Tauben stehen nicht in einer Reihe, also müssen wir alles so platzieren, dass es schön aussieht. Zuerst werden wir den Z-Index haben. Gutartige Neun. Geben wir ihm eine maximale Inhaltshöhe. Die Breite wird 20 Felgen betragen. Die Position ist absolut. Aber jetzt wollen wir es nicht direkt oben platzieren. Lass es mich dir zeigen, speichere die Anwendung. Gehe zurück zum Browser. Kannst du sehen, wenn du den Mauszeiger bewegst? Siehst du? Wir wollen es also nicht direkt darauf platzieren. Also wollten wir uns ein bisschen erholen. Also mache ich von oben -18 V H von links wird Zara sein. Geben Sie den Randradius 0,2 an. Rem. Schaut euch das nochmal an, das tut mir leid. Geben Sie den Rand an, den wir machen werden Joe Punkt 1RM, durchgehend grau. Und natürlich sollte der RAM sein was der Wert ist, die Hintergrundfarbe, ich mache 181818, Transition, 0,3 s ist raus. Wenn Sie also auschecken, bewegt der Browser den Mauszeiger darauf. Lassen Sie mich Ihnen zeigen, können Sie sehen dass es allmählich Gestalt annimmt. Du merkst es vielleicht noch nicht , weil alles dunkel ist. Aber ich kann es dir versichern. Okay, lass uns weitermachen. Für das Bildvideo Wrapper-Punkte. Lass es mich dir hier zeigen. Bildsprache Dura. Wo bist du hier? Ist es hervorheben, kopieren, Punkte, geben Sie den Video-Wrapper und lassen Sie ihn dann relativ positionieren. Die Höhe beträgt 140 Pixel. Und für die IMG-Tag-Rechte innerhalb des Bild-Video-Containers geben wir ihm eine Breite von 100 Prozent. Die Höhen von 150 Pixeln. Das Objekt passt in die Hülle. Grenzradius 0,3 Bereich. Von oben Zara. Der Z-Index wird hier vier sein. Dann lassen wir es absolut positionieren. Okay, für das Video, richtig, im Hoover. Auch für das Video wird es genau die gleichen Abmessungen haben, also muss ich es nur kopieren und hier einfügen. Speichern. Lassen Sie uns jetzt den Browser ausschalten. Schau es dir an. Kannst du sehen, dass es allmählich Gestalt annimmt. Schon wieder. Lass es uns finalisieren. Für den Infocontainer in vier Strichcontainern. Lassen Sie mich von hier oben sehen, was wir in den Lebensmittelbehältern haben, der Typ bleibt, muss hier grammatikalisch trainiert werden. Denn wenn Sie die Klassennamen falsch buchstabieren, werden Sie die Dinge für sich selbst durcheinander bringen. Also lassen wir es die Spalte Flex, Flex Direction anzeigen . So gut wie eine Polsterung aus einem Rem. Geben wir ihm eine Lücke von 0,5 rem. Speichern Sie im Browser, Hoover darauf. Jetzt siehst du, wie sich alles allmählich entwickelt. für die Symbole und Punkte an, Sehen wir uns für die Symbole und Punkte an, was das Clustering für die Symbole ist. Es gibt auch Icons hier. Lach mich nicht aus. Ich versuche hier nur, genau zu sein, damit ich nicht in Schwierigkeiten gerate. Lassen wir es jetzt flexibel anzeigen Inhaltsabstand dazwischen begründen. Lassen Sie uns das SVG so stilisieren, dass die Farbe gut aussieht. SVG. Zuerst möchte ich ihm eine Farbe geben. Also die Farbe des SVG wird sein, lass uns es so machen, dass es so wäre. Sieben. Schau es dir an. Oh, ja. Kannst du jetzt sehen? Lass es uns zu Ende bringen. Geben wir ihm einen Rand von 0,100 REM, durchgehenden weißen Randradius. Wir wollen ihre Unterklasse, also werde ich eine Schriftgröße von 50 Prozent wählen. Caso ist Zeigerübergang. Es wird 0,3 s raus haben oder locker rein und raus. Sozusagen, du schaffst das, speichere und sieh, was wir haben. Kim, kannst du sehen? Okay, wir können also tatsächlich die Farbe der SVG in Weiß ändern . Ich denke, das wird besser sein. Ja, so geht es ihm besser. Also lasst uns die ANOVA machen. Wenn Sie den Mauszeiger auf das SVG bewegen, wird die Farbe diese sein. Lass es uns ausprobieren. Nimm es. Kannst du sehen? Es ist in Ordnung, als ob das in Ordnung wäre. Wenn Sie also genau hinschauen, werden Sie feststellen, dass zwischen den SVG-Symbolen kein Leerzeichen ist . Also, was ich tun werde, ist zu schreiben, bring die Icons her. Wir haben noch eine Stilisierung, das Steuerelement, Punkt, Steuerelemente. Lassen wir es Flex anzeigen. Dann geben wir ihm eine Lücke von einem Rem. Speichern Sie die Anwendung. Jetzt. Siehst du, ich denke ist die Lücke bei einem Rem eigentlich zu groß. Lass uns 0,5 Rem draus machen. Cool. Das ist in Ordnung. Beta-Nicht. Okay, bevor wir weitermachen, möchte ich dir hier etwas zeigen. Sie sehen dieses Symbol. Lassen Sie mich hier div mit dem Klassennamen von Icons teilen. Das ist der Div genau hier. Es endet hier. Es fasst also die Steuerelemente und das gesamte SVG zusammen. Also hier, was ich tun werde, das sind die Icons. Es fasst das gesamte SVG zusammen. Also schneide ich es von hier aus aus, füge es hier ein, damit es geschlossen wird, und zähle es. Gleich danach lassen wir Punkte generieren. Lassen wir es Flex die ungeordnete Liste anzeigen. Lassen Sie es auch flexibel anzeigen. Die Lücke. Machen wir einen Weinlauf daraus. Das Bündnismuster, richtig, wird 0,7 rem sein. Also werde ich es hier auf Fest of Type machen. Wir werden mindestens den Starttyp gleich Null machen. Also wollen wir die Punkte und alle Haltestellen entfernen. Also, Listenstil und Typ werden bekannt sein , wenn Sie den Browser speichern. Okay Leute, es scheint, dass all diese Städte die Großzügigen nicht beeinflussen. Schauen wir uns also oben etwas an. Es ist Januar. Siehst du? Genau deshalb überprüfe ich es ständig, weil es manchmal falsch sein könnte. Also lasst uns das so großzügig machen. Ja, speichern. Jetzt wird alles gut funktionieren. Geben wir ihm hier eine Farbe. Die Farbe wird breit sein. Speichern. Schon wieder. Jetzt siehst du, wir haben den Titel übrig. Lassen Sie mich Ihnen zeigen, wo wir diesen Titel haben. Hier oben rechts ist es. Jetzt? Der Klassenname zieht ein. Also werde ich direkt in den Infocontainer kopieren. Sehen wir uns den Infocontainer an, wo Sie, hier ist der Infocontainer. Und dann machen wir den Filmnamen Dada. Geben wir ihm eine weiße Farbe , damit Sie entscheiden können, ob Sie es stilisieren möchten, und wie Sie es möchten, wenn Sie den Mauszeiger bewegen. Kannst du sehen? Jetzt funktioniert alles wie erwartet einwandfrei. Schau es dir an. Wenn Sie auf den Titel klicken , gelangen Sie hierher. Okay. Also Leute, eine Sache, die ich nicht mag, ist, dass zwischen der Karte und dieser anderen Komponente kein Platz ist . Also, was ich jetzt tun werde, ist, hier eine Margenobergrenze festzulegen. Und lass uns ein Zimmer daraus machen. Siehst du jetzt, wir haben ein Leerzeichen zwischen den Unachtsamen. Wenn wir mit der Umsetzung der Filme beginnen, wird alles gut aussehen. Aber schauen wir uns die Karte vorerst noch einmal an. Okay, eine andere Sache, die mir hier aufgefallen ist, ist, dass, wenn Sie den Mauszeiger darauf bewegen, können Sie sehen, dass es untergeht. Dies ist nicht das erwartete Ergebnis. Ja, es sollte nach oben gehen. Und ich denke, das wird das Problem beheben, dass die Spitze -18 VH sein soll. Ich weiß, dass die meisten von Ihnen hier vielleicht nicht wirklich in Schwierigkeiten geraten , weil ich es hier als 18 v ausgesprochen habe , aber typografisch gesehen habe ich die Hecke übersprungen. Also speichern Sie im Browser. Alles funktioniert wie erwartet einwandfrei. Es ist großartig, ich liebe es. Das ist also alles für heute. Wir sehen uns in der nächsten Vorlesung. 92. 90 Api Key: Willkommen zurück an alle. In dieser Vorlesung beginnen wir mit der Arbeit mit der API. Und die API, die wir in diesem Kurs verwenden werden, ist die Filmdatenbank-API. Also schnell weiter, um als Punkte die Filme db.org zu entwickeln. Und dann genau hier in der Einführung, zoomen Sie nach oben und lassen Sie es mich Ihnen zeigen. Sie müssen auf den API-Link klicken. Klick. Und wenn Sie das tun, wird ein neuer Tab geöffnet. In der oberen rechten Ecke des Bildschirms sehen Sie die gemeinsame CMDB. Okay, also klicken Sie hier, um beizutreten. Was Sie tun werden, ist Ihre Anmeldeinformationen einzugeben. Mein Benutzername wird also eine Toolbar sein. Mein Passwort werde ich dir natürlich nicht sagen, was es ist, also kannst du dein eigenes Ding machen. Vergewissern Sie sich, dass Ihr Passwort korrekt ist. Meine E-Mail werde ich machen. Okay, lass uns ahaystack@gmail.com machen. Dann melde ich mich an. Gerade jetzt. Eine Bestätigungs-E-Mail wurde an mich gesendet. Ich werde also mein Gmail-Konto eröffnen. Und dann ist es hier. Ich muss hier auf diese Schaltfläche klicken, um mein Konto zu aktivieren. Und bumm, nachdem Sie das getan haben, können Sie Ihren Benutzernamen und Ihr Passwort eingeben. Du kannst hierher zurückkehren, mir das zeigen lassen und dann dein Passwort eingeben. Sie sind alle dasselbe. Ich werde das Konto und alles speichern. Schließ das, mach das zu. Und jetzt wirst du auf deine Profilseite weitergeleitet. Als Nächstes kommen Sie zu diesem Abmeldesymbol in der oberen rechten Ecke des Bildschirms. Klicken Sie, um die Navigation umzuschalten und klicken Sie dann auf Einstellungen. Wir sind in den Einstellungen, Sie müssen nur auf die API klicken. Und dann hier oben klicken Sie auf Erstellen. Und es sagt, welche Art von API Sie registrieren möchten , Entwickler oder Profi. Ich muss mich hier nur weiterentwickeln. Und danach müssen Sie alle diese Allgemeinen Geschäftsbedingungen lesen. Tun Sie das, wenn Sie möchten. Ungeachtet der Tatsache, dass ich die Allgemeinen Geschäftsbedingungen nicht gelesen habe, muss ich sie trotzdem akzeptieren. Okay. Fein. Der Name der Anwendung wird Netflix-Projekt sein. Die URL. Was wir jetzt tun werden, ist meine YouTube-URL zu kopieren und hier einzufügen. Gehen Sie vorerst davon aus, dass Sie keine Website haben. Ich muss nur zu YouTube gehen. Und dann ist hier meine YouTube-Seite wie diese. Kopieren Sie die URL. Sie können eine beliebige URL kopieren. Ich denke nicht, dass das wichtig ist. Fügen Sie es hier ein. Die Zusammenfassung der Bewerbung werde ich machen. Dies ist eine Beispielwebsite für Filme , für die Sie sich entscheiden können, sie zu schreiben. Der Test ist vorbei. I Vorname und Nachname. Sein X, k. Meine E-Mail ist schon da. Meine Telefonnummer. Ich muss nur so etwas wie diese Klausel machen, 23581400, es 3755. Und das ist übrigens meine tatsächliche Telefonnummer. Dass ich das überhaupt nicht sehe. Für die Adresse machen wir einfach eine temporäre, temporäre Adresse, markieren, kopieren, hierher kommen, einfügen, all diese Dinge. Spielt das wirklich eine Rolle? Okay? Die Stadt, ich mache Delta State, okay, tut mir leid, die Stadt wird sein, lasst uns das hier machen. Hier mache ich Delta-Bänder und die Postleitzahl. Was ist nochmal die Postleitzahl? Ich glaube, es sind 32 Nullen. Gibt es? Liege ich richtig? Sie müssen also nur Ihre Adresse in Ihre Daten hier eingeben und dann auf die Schaltfläche Senden klicken. Wunderbar. Also hier haben wir den API-Schlüssel. Lassen Sie mich Ihnen zeigen, dass dies der API-Schlüssel ist, und lassen Sie mich Ihnen eine weitere Sache zeigen , die Sie beachten müssen. Ich möchte ein bisschen vergrößern. So, das ist die Basis-URL. Wenn Sie also auf diese Basis-URL klicken, müssen Sie auf den eigentlichen Inhalt abzielen , den Sie phagen möchten, in diesem Fall den Film, Schrägstrich, was auch immer, was auch immer. Und dann platzieren sie den API-Schlüssel und machen es. Genau so werden Sie Ihren API-Schlüssel verwenden. Sie geben unsere Basis-URL an, das Ziel, was auch immer Sie hineinpassen möchten, in diesem Fall den Film, und Sie tun so etwas. Also hier schreibst du diese Abfrage, um den API-Schlüssel anzugeben, und der API-Schlüssel ist gleich d. In diesem Fall ist mein API-Schlüssel also dieser. Ja, auf deiner Seite wird dein API-Schlüssel anders sein. Kopieren Sie also bitte nicht meinen API-Schlüssel, da er für Sie nicht funktionieren wird. Ja, also was auch immer Sie als API-Schlüssel haben , sollten Sie auf Ihrer Seite verwenden. Lassen Sie uns also schnell den VS-Code hinzufügen und ihn richtig einrichten. Vs-Code. Also genau hier müssen Sie die Utils öffnen und mit der rechten Maustaste auf Neue Datei klicken. Und wir erstellen die Datei mit dem Namen Konstanten, Punkte, Jays waren in der Konstante G ist, wir werden die Basis-URL und den API-Schlüssel konfigurieren. Also, was ich machen werde, ist eine Spot-Const. Meine Unterstrich-API, der Unterstrich-Schlüssel, entspricht, lassen Sie mich Ihnen zeigen, öffnen Sie die doppelten Anführungszeichen und die Rechte innerhalb der doppelten Anführungszeichen. Geh zurück. Stellen Sie sicher, dass Sie diesen Typen hier hervorheben, oder? Klicken Sie auf Kopieren. Das ist also mein API-Schlüssel. Bitte stellen Sie noch einmal sicher, dass Sie Ihren eigenen API-Schlüssel kopieren und einfügen oder hierher kommen oder hierher kommen und ihn wie hier in die Anführungszeichen einfügen. Okay, also jedes Mal , wenn wir meinen API-Schlüssel verwenden wollen, müssen wir ihn nicht so nennen, okay? Also müssen wir nur meinen API-Schlüssel aufrufen und er wird den API-Schlüssel abrufen, der hier drüben ist. Ich mache eine Spot-Konstante, einen CMDB-Unterstrich und eine Unterstrich-URL. Das wird also die T MDB BaseURL sein. Ebenfalls. Wir werden es kopieren und direkt in die doppelten Anführungszeichen einfügen. Komm zurück. Ich habe dir das vorhin vom HTTPS aus gezeigt , was auch immer, was auch immer hier. Zwei Schrägstriche drei. Bitte schauen Sie sich an, was ich hervorgehoben habe. Chris hat es hier so gemacht. Auch hier sind wir mit der Einrichtung der API fertig. In der nächsten Vorlesung werden wir die Writer-Toolkits sowie das Setup installieren. Es gibt Dosis-Toolkits , um Daten abrufen zu können. Wir sehen uns in der nächsten Vorlesung. 93. 91 Redux: In dieser Vorlesung werden wir das Redox einrichten, um den VS-Code zu öffnen , und Control C, um den aktuell laufenden Server zu stoppen. Das erste, was wir tun werden, ist den Redox-Two-Schlüssel zu installieren. Hier ist der Installationsbefehl. Markierungen kopieren, hierher kommen und einfügen. Dieser Befehl befindet sich direkt im Code hydropower. Drücken Sie die Enter-Taste, um es zu starten. Don installiert. Erfolgreich. Lass es uns überprüfen. Öffnen Sie die Datei package.json. Und hier ist es. Schließ es. Jetzt sind wir im Laden. Klicken Sie mit der rechten Maustaste auf Neue Datei. Wir werden den Index erstellen, den Punkt g ist. Und hier ist Lee bereit, Voltaic Plays einzurichten. Also müssen wir zuerst importieren, das Sternkomma konfigurieren und die Schriftarten synchronisieren. Komma erzeugt Lügen in all diesen Fällen werden von AT-Lesern importiert, um sie einzugeben. Nachdem wir das getan haben, deklarieren wir den Anfangszustand. Der Anfangszustand entspricht, setzen Sie ihn auf ein leeres Objekt. Wenn das Objekt ist, werden wir den Film als leeres Array-Komma anvertraut haben , der Anfangszustand des nächsten geladenen Films. Es wird ein falsches Komma sein. Dann der Großzügige. Es wird ein leeres Array sein. In diesem Fall sind das Großzügige also einfach die Kategorien des Films. Und natürlich wissen Sie, dass ein Film zu drei oder vier verschiedenen Kategorien gehören kann . Das ist also zumindest das, was wir versuchen zu tun. Wir wollen die Filme über Kategorien beeinflussen. Mach dir keine Sorgen. wir anfangen, uns mit Filmen zu befassen, werdet ihr definitiv alles verstehen , was wir hier tun, aber wisst einfach, dass der Anfangszustand der Filme ein leeres Array ist, der Anfangszustand von großzügig geladen falsch ist und der Anfangszustand der Generäle ebenfalls ein leerer Bereich ist. Der Einfachheit halber, wenn der Generator nicht geladen ist, wollen wir keinen Film abrufen, so einfach ist das. Und das ist der Grund, warum wir hier tatsächlich diese Flagge hissen. Wenn das Großzügige also falsch ist, wird kein Film abgerufen. Das einzige Mal, dass wir Filme holen ist, wenn wir die Großzügigen abholen. Und indem wir die Abendessen abholen, können wir die Filme ausfindig machen , die diesen bestimmten Generälen gehören. Ich denke, Sie werden es auf jeden Fall gut genug verstehen, wenn wir weitermachen. Hier mache ich Const, Netflix Slice. Also erstellen wir dann die Folien hier. Netflix Slice Equa, Folien erstellen, Klammern öffnen und schließen, geschweifte Klammern öffnen und schließen. Und in den geschweiften Klammern werden wir den Namen Netflix haben, Karma, der Anfangszustand. Und dann müssen wir die zusätzlichen Ermäßigungen in Betracht ziehen. Und dann den Buddha, den Buddha, an ein leeres Objekt weitergeben . Darauf kommen wir gleich zurück, falls Sie das nicht getan haben. Schließlich müssen wir den CWA-Config-Store exportieren , const, store, den CWA, configure store. All diese Daten werden hier gespeichert. Und hier werden wir einen Reducer haben, Netflix Slice Reducer. Gut. Nachdem Sie dies getan haben, müssen Sie als Nächstes den gesamten Antrag mit dem Anbieter abschließen. Wir versuchen also, die gesamte Anwendung mit allem zu versorgen die gesamte Anwendung mit , was wir im Geschäft haben. Stimmt es? Wir sind im SRC. Lass es mich dir als RC zeigen. Es gibt eine index.js hier. Dies wird als index.js auf oberster Ebene bezeichnet. Hier werden also alle unsere Bewerbungen zu sehen sein. Ja, also was wir tun werden, ist, unsere Anwendung mit dem Shop zur Verfügung zu stellen unsere Anwendung mit dem Shop sodass wir, was auch immer wir hier tun, in der Lage sein werden, es an jeden anderen Herbst innerhalb dieses Projekts weiterzugeben jeden anderen Herbst innerhalb , so einfach ist das. Unterricht, gut, wunderschön. Schließ es. Kehren Sie zu den Rechten von index.js innerhalb des SRC zurück. Also hier werden wir importieren, wir werden den Anbieter aus React Redox importieren. Und wieder werden wir den Stern importieren. Es ist im Sport, also müssen wir es in geschweifte Klammern aus dem Dot Slash Store packen . Nachdem wir dies getan haben, lassen Sie uns die gesamte Verpflichtung gegenüber dem Anbieter abwickeln . Also hier werden wir uns den Stand ansehen, Stall Equa, den Laden genau hier. Und dann markieren Sie die in der Anwendungsvorlesung ausgeschnittenen und eingefügten Elemente , um den Code zu formatieren. Speichern Sie das Projekt. Komm her, rette. Stimmt, wir sind im Terminal. Wir müssen die Anwendung starten. Also schauen wir mal, ob es hier Probleme gibt. Wir müssen eine Weile warten. Gut, absolut, kein Problem. Odds Command I, um die Konsole zu öffnen. Und hier wirst du sehen, dass es keine Probleme gibt, oder? In der Konsole. Kannst du sehen, dass alles funktioniert? Das ist gut. Okay, wir sind mit der Einrichtung und Installation des Redox-Toolkits fertig. Und in der nächsten Vorlesung werden wir beginnen, Daten vom CMDB-API-Endpunkt abzurufen. Das ist alles für heute. Stellen Sie sicher, dass Sie Fragen stellen, wenn Sie verwirrt sind. Wir sehen uns in der nächsten Vorlesung. 94. 92 Fetch: In dieser Vorlesung werden wir die Filmgeneräle der CMDB-API beeinflussen . Also legen Sie Ihren Sicherheitsgurt an, holen Sie sich Ihren Kaffee neben sich und lassen Sie uns loslegen. Sie mich Ihnen versichern, dass es in der index.js Lassen Sie mich Ihnen versichern, dass es in der index.js gut ist. Wir schließen oder nicht. Dieser Typ, wir sind damit fertig, direkt im Stoppindexpunkt js. Lassen Sie mich ein wenig herauszoomen. Das erste, was wir hier tun werden , ist Ox zu installieren und den aktuell laufenden Server mit Control C zu stoppen. Und ich werde Node Package Manager install ox use ausführen. Die Installation ist im Gange. Komm an die Spitze. Wir müssen auch meinen Underscore-API-Schlüssel aus den Schrägstrichkonstanten von UT importieren. Wir müssen die Basis-URL verwenden . Diese URL, all diese habe ich in der vorherigen Vorlesung erklärt als wir unser Konto für die TM dB axial installiert haben Erfolg für den nächsten in der Reihe ist das Abrufen der großzügigen. Also direkt unter den Anfangszuständen werde ich es hier tun. Ich mache Export, Const, Get General, Get Generous, Equa, richte einen Think Tank ein. Klammern öffnen und schließen. Genau hier. Ich mache Netflix mit einem großzügigen Komma. Dann müssen wir die Async-Funktion eine Senke aufnehmen. Und das wird natürlich zu einem Versprechen führen. Also hier werden wir warten. Wir machen unser Gewicht axial dot get. Also, was werden wir bekommen? Wir werden den Film großzügig gestalten. Und dazu müssen wir zuerst die Basis-URL und dann einen Schrägstrich, Film-Slash-Liste und dann den API-Schlüssel angeben. Lassen Sie mich Ihnen schnell zeigen, wie Sie den Bug D, Dollarzeichen, geschweifte Klammern öffnen und schließen. Und ich werde CMDB baseUrl außerhalb des Schrägstrichs in geschweiften Klammern, des allgemeinen Schrägstrichs und der Film-Slash-Liste verwenden. Und dann haben wir hier eine Abfrage , die zur Zuweisung der API verwendet wird. Also mache ich den API-Unterstrichschlüssel, equa, was auch immer der API-Schlüssel ist. Und ich werde machen, mein API-Schlüssel ist so einfach. Und all das werden wir einer Variablen zuweisen. Ich mache const, const data, setze es zu großzügig und weise es dann so zu. So einfach ist das. Kannst du sehen? Gut. Okay, jetzt werden wir großzügig zurückkehren. So einfach ist das. Fügen wir es zu den zusätzlichen Reduzierern hinzu. Nachdem Sie dies getan haben, gehen Sie zu Extra Reduce us, um die Schlüssel hinzuzufügen. Scrollen Sie nach unten. Hier, ist es richtig? Wir sind im Builder. Wir machen Buddha-Punkte und fügen Schlüssel hinzu. Wir fügen Abendessen hinzu. Punkt erfüllt, ruhiger, der Staat und die Handlung. Öffne und schließe geschweifte Klammern, richtig, um sie einzufügen, wir werden State-Dots-Generäle machen, was der Auktionspunkt-Payload entspricht. Die Nutzlast werden die tatsächlichen Daten sein. Und hier mache ich den Zustand Degeneration ist geladen. Wir müssen es auf wahr stellen , denn gerade passen wir das Abendessen an. Also ich habe das gemacht, lass uns versuchen, das Konsolenprotokoll zu erstellen. Das großzügige Konsolen-Punktprotokoll. Großzügig, so. Öffnen Sie damit die Netflix-Seite. Und oben müssen wir Inputs importieren. Du benutzt den Versand, damit etwas passiert. Wir müssen eine Aktion einleiten. Keine Sorge, lass uns das machen, damit ich dir zeigen kann, was ich damit meine. Importe verwenden diese Passage aus React Redox. Also genau hier werde ich const machen, equa versenden, diesen Patch verwenden, oder? Ich würde keine Effekte verwenden. Wir müssen die Aktion abschicken, nach oben scrollen und weniger Eingaben machen. Sie verwenden Effekte in einer Wanne. Effekt von React Hook. Und wir müssen es aufrufen. Und natürlich wissen Sie, dass sie den Effektparameter verwenden . Eine ist die Funktion und die andere ist das Abhängigkeitskomma r0. Die Abhängigkeit hier, direkt darin, werden wir versenden. Was müssen wir hier tun? Wir wollen diesen Typen hierher schicken , der generiert wird. Das wäre es also, was es in der Lage wäre, die Daten abzurufen. Gehen Sie also zu Netflix dot js und wir werden versenden. Sei großzügig. Natürlich ist es eine Funktion, zu Abend zu essen. Und bitte stellen Sie sicher, dass Sie es oben so importieren . Nachdem Sie das getan haben, kehren Sie zum Terminal zurück. Lassen Sie uns die Anwendung noch einmal starten. Schau, was wir auf der Konsole haben. Hoffen wir, dass alles gut wird. Es heißt, Axiome sind nicht definiert. Unsere Richtigen gehen zurück zu index.js. Oben haben wir zwei Eingänge. Acts use from axis , so speichern Sie die Anwendung erneut, und dieses Mal werden wir sie zum Laufen bringen. Aber befehlen Sie mir, die Konsole zu öffnen. Und direkt in der Konsole siehst du dort drüben bereits einen Bereich. Öffnet den Bereich. Und wir haben den Film großzügig. Hier gibt es Action, Abenteuer, Animation, Komödie, Dokumentarfilm, Familie, Fantasy und vieles mehr. Also Leute, das ist extrem fantastisch und ich liebe es. Jetzt ist es uns gelungen, den Film großzügig zu gestalten. Ist das nicht wunderschön? Hallo. In der nächsten Vorlesung werden wir also die Filme selbst auf der Grundlage der Filmgeneräle anpassen . Wir müssen also Filme auf der Grundlage jeder Kategorie anpassen , so einfach ist das. Wir sehen uns in der nächsten Vorlesung. 95. 93 Fetches Filme: Willkommen zurück an alle. In der vorherigen Vorlesung konnten wir die Filmdinner vom TM DB API-Endpunkt abrufen . Und das sind die hier. In dieser Vorlesung werden wir also die Filme vom API-Endpunkt abrufen . Gehen Sie schnell zu VS Code und fahren Sie weniger fort. Bevor wir die Filme holen. Es gibt einige Rahmenbedingungen , die wir berücksichtigen müssen. Und in der Tat müssen wir diese Bedingungen angeben. Wir wollen also nicht nur alle Arten von Filmen unterbringen. Die einzige Art von Film, bei der wir die Filme mit dem Hintergrundpfad abrufen wollen , was die Filme mit dem Posterbild beinhaltet. Wenn der Film also kein Posterbild hat, wollen wir diesen Film auch nicht anpassen. Bevor wir einen Film anpassen können, müssen wir sicherstellen, dass die Filmgattung verfügbar ist. Wenn also die Filmgattung nicht geladen ist, wollen wir diesen Film nicht anpassen. Ja, also lasst uns das schnell mit Code implementieren. Bevor wir fortfahren, müssen wir meiner Meinung nach einen Kommentar diesem Konsolenprotokoll hinterlassen, damit es nicht stört. Oh, wunderschön. Jetzt ist die Konsole leer. Komm her. Wir werden also ein konstantes Array von Filmdaten haben, das gleich ist. Hier werden wir nun einige Parameter Array Comma Movies, Array Comma Comma aufnehmen . Großzügig. Stellen Sie es auf eine Pfeilfunktion ein. Okay, gut. Also gehen wir für jeden Film hier drüben, RA-Punkt für jeden. Jetzt werden wir hier einen Filmbereich haben. Const Film-Array. Setze es auf ein leeres Array wie dieses. Jetzt Filmpunkt, allgemeine Unterstrich-IDs, Punkte für jeden. Dann nehmen wir hier im Allgemeinen wieder die Einstellung auf eine Pfeilfunktion. Öffne, schließe geschweifte Klammer, konstant, Name entspricht großzügigen Punkten finden. Was wir hier also tun, ist nach den Großzügigen mit ihrer ID zu suchen. Wenn es also die Großzügigkeit gibt, müssen wir den Namen des Generals extrahieren und ihn dann in unser Array verschieben, so einfach ist das. Klammern öffnen und schließen und direkt innerhalb der Klammern, öffnen und schließen Sie geschweifte Klammern, nehmen wir die ID und dann außerhalb der Klammern id, wir machen id gleich. Und dann müssen wir hier die Bedingung schreiben. Wenn. Wenn wir also die großzügige ID finden, müssen wir nur den Namen extrahieren und den Namen in dieses Film-Array einfügen. Deshalb möchte ich den Namen dieses Film-Arrays in einen besser lesbaren Namen ändern . Und ich werde Filme machen, allgemein. Ich denke, das wird besser lesbar sein. Filme im Januar, so etwas. Also, wenn wir auch das Abendessen finden, müssen wir seine Generäle bewegen, Punkt drücken. Wir müssen sie in das Array schieben. Und ich werde Namen, Punkte, Namen machen. So einfach ist das. Nachdem wir das getan haben, müssen wir als Nächstes überprüfen, ob der Film einen Hintergrundpfad hat , also ob der Film ein Filmplakat oder ein Filmbild hat. Also werden wir die Krankheit hier haben. Wenn Filmpunkt-Hintergrundpfade sind, unterstreichen Sie den Pfad. Wenn der Film mit Hintergrundpfad existiert, müssen wir ihn in das Filmarray verschieben , das wir hier übergeben. Alle diese Öfen erklären sich von selbst. Meine Erklärung ist ziemlich einfach, also ihr bekommt auf jeden Fall die Gs. Also werde ich Movie Array Dot Bush machen. Also, was genau treiben wir voran? Wir brauchen den Ausweis. Ich mache Filmpunkt-ID, die durch ein Komma getrennt ist. Oh mein Gott, diese Intelligenz hier drüben blockiert dieses Zeug tatsächlich. Jetzt ist weg. Wir haben den Namen, also müssen wir den Namen des Films extrahieren. Und wir werden einen Film machen. Wo Originalname, Filmpunkt, Originalname unterstreichen. Und dann werde ich das tun. Wenn der Filmname existiert, müssen wir den Filmnamen und L's bekommen, wir bekommen den Filmpunkt Originaltitel. Also müssen wir den Filmtitel herausfinden falls der Filmname nicht existiert, weil der Titel des Films dasselbe ist wie der Name des Films. Manchmal verwendet der Administrator vielleicht den Titel, um den Film zu speichern, oder er verwendet den Namen, so etwas. Und deshalb haben wir diese Krankheit hier. Die nächste Begriffszeile besteht also darin, das Bild zu bekommen. Das Bild, das ich machen werde, Filmpunkte, Pfad im Hintergrund. Und zu guter Letzt werden wir für die Generäle Filme machen, General. Folien mit Punkten. Was wir jetzt tun wollen, ist die Generäle in Stücke zu schneiden. Lassen Sie mich erklären, was ich damit meine. Ihr wisst zum Beispiel alle, dass ein Film mehrere großzügige haben kann, ja. In einem Film kann also, sagen wir, Abenteuer-Action dazugehören , du weißt schon, solche Sachen. Wenn der Film also weniger hat, gehen wir von zehn Abendessen aus, wir wollen nur drei Abendessen holen. Wenn ein Film also fünf bis sechs Großzügigen gehört, brauchen wir nur drei der Großzügigen. Also werde ich Null Schrägstrich drei machen. Das ist so einfach wie a, B, C. Dann müssen wir hier überprüfen, ob ich etwas Gutes getan habe, okay, gut. Wenn wir die Anwendung ausführen, möchten wir feststellen, ob ein Wertfehler vorliegt. Jetzt sind wir mit dem Einrichten der ersten Bedingung fertig. Die zweite Bedingung ist in der Team-DB-Datenbank einfach. Ich kann Ihnen versichern, dass wir dort Tausende von Filmen haben. Aber jetzt wollen wir nur die Filme holen. Ja, wir wollen also nicht, dass 90 Filme 100 und mehr sind, wir brauchen nur 80 Filme. Wir müssen also auch die Bedingungen dafür festlegen. Hier mache ich const, hole Filmdaten und setze sie auf eine Sinc-Funktion. Und dann nehmen wir innerhalb der Funktion ein API-Komma, Komma, Koma, Paging. Und dann setzen wir das Paging auf Falsch. Keine Sorge, du wirst sehen, dass das G eindeutig genug ist. Das letzte Mal, wenn ich den Code hier verwende mache ich const movie array, equa, setze ihn auf ein leeres Array wie dieses. Also dieser Filmbereich hier drüben, den wir als Parameterrechte innerhalb des Arrays von Filmdaten übergeben haben . Jetzt verstehst du es. Also werden wir die Filme durchgehen, um nur 80 Filme zu finden, die ich machen werde. Denn lass mich eins gleichsetzen. Das Semikolon endet. Dann die Punktlänge des Filmarrays. Also, wenn die Punktlänge des Filmarrays weniger als 80 ist und wenn I weniger als zehn Semikolon ist und wir i, i plus, plus inkrementieren. Die Sinc-Funktion wird ein Versprechen zurückgeben, dann müssen wir es abwarten. Also werde ich ein Weight Acts Used Odd Gate machen. Also, was bekommen wir hier in das Backtick, API und Dollarzeichen , wir werden eine Seite machen und bitte sei vorsichtig hier drüben , damit du nicht in Schwierigkeiten gerätst. Und wenn sie dann existieren, zeigen wir die bezahlten und wir zeigen nichts. Also was ich machen werde Seite, also wenn Page Equa rauskommt, Stunden kein Problem. Ich werde jede Codezeile erklären. Geben wir einfach den Code und die ROE des Films ein. Dann werden wir ihre Ergebnisse haben. Karma, Filmbereich. Ruhiger, großzügiger. Nachdem wir das getan haben, werden wir das Filmarray zurückgeben. Also müssen wir zu guter Letzt den Film anpassen. Jetzt wurde die Bedingung gestellt. Schauen wir uns den Film schnell an. Wir werden diese Funktion exportieren weil wir sie als Aktionsrechte auf der Netflix-Seite versenden müssen. Also werde ich Const, Fat Movies, Equa, einen Sync-Funk machen. Stimmt es? Innerhalb dieser Funktion werden wir Netflix aufnehmen. Und genau hier schauen wir uns den Netflix-Slash-Trend an, weil wir den Film auch mit Zügen holen wollen . Also nehmen wir noch einmal die async-Funktion async und wait auf. Du weißt es schon. Hier werden wir diesen Typ aufnehmen. Außerdem wollen wir die Filme nach ihrem Typ abrufen. Es könnte eine Serie sein, ein saisonaler Film. Du schaust dir einen Film an oder zu Ende. Also, du weißt schon, Arten von Filmen, die beim Koma helfen. Und hier nehmen wir die Trunk-API als zweiten Parameter innerhalb dieser Funktion auf. Das wird uns also Zugang zu den Staaten geben. Also aufgrund unserer Funktion werde ich hier Const Netflix Slice machen. Also werden wir Zugriff auf den Netflix-Slice bekommen. Und von dort erhalten wir die Generäle, setzen sie auf myfunc, api dot gets, getState. Ich habe dir gesagt, dass wir dadurch Zugang zum Staat haben. Aus den Staaten. Wir werden uns die Filme schnappen können. So einfach ist das. Keine Sorge, ich muss die Erklärung noch durchgehen, damit Sie das Wesentliche gut genug verstehen. Ecua bekommt Filmdaten, oder? Wir machen in dieser Funktion das große Ding, öffnen und schließen die lockige Klammer. Jetzt müssen wir den Slash-Trending der TempDB-Basis-URL verwenden , weil wir den Film an Zügen anpassen wollen. Ich habe es dir vorhin gesagt. Slash-Trends ebenfalls. Wenn es im Trend ist und wir die Pfeife des Films bekommen müssen. Wenn es eine Serie ist, wenn es ein saisonaler Film ist. Und wir wollen es auch von Woche zu Woche schaffen. Okay, hier müssen wir unsere API, API on Bosco Key, equa, meinen API-Schlüssel plus ein Komma genau hier zuweisen API on Bosco Key, equa, . Großzügig. Und dann setze das auf wahr. Wenn der General also niedrig ist, stimmt das. Dann wollen wir nur den Film holen. Ich weiß nicht, was hier sonst falsch ist. Okay, lass uns etwas sehen. Hier müssen wir es mit den Klammern schließen. Ich denke, das ist nur die Luft. Okay, nachdem Sie diese gemacht haben, schauen Sie es sich an. Das ist eine A-Breite. Also müssen wir es einer Variablen zuweisen. Und ich werde Const Data machen. Und dann werden wir unser Ergebnis wieder aus den Daten ziehen, was S ist, und weisen es so zu. Speichern Sie die Anwendung. Und lass uns sehen. Es heißt, großzügig ist nicht definiert von, okay, Leute, schaut es euch an. Dieser Typ soll großzügig sein und du sparst wieder, mal sehen, was da steht. Es funktioniert einwandfrei, aber wir haben noch nichts auf der Konsole. Gehen Sie zurück und gehen wir zur Netflix-Seite Within. Okay, lassen Sie uns den Code formatieren. Lass uns die richtige Einrückung machen. Stimmt es? Danach haben wir const, generous loaded equa, benutze Selector. Stellen Sie sicher, dass Sie den Import mit Select All aus React und Redox auf Hazy durchführen. Sie verwenden Selector als Funktion und schreiben, um diese Funktion auszuführen. Wir nehmen die Staaten auf. Und ich mache State Dot, Netflix, Dot , Generous Loaded. Wir werden es also in den USA haben. Wir müssen die Maßnahme direkt innerhalb der Auswirkungen der USA einleiten. Ich habe diesen Typen gerade hier dupliziert. Hab keine Angst, oder? Innerhalb. Was ich machen werde, sind echte Highlights und schneide das ab. Jetzt. Also bleiben sie einfach beim Abholen von Filmen, wenn die Degeneration geladen ist. Also werden wir es hier konditionieren. Wenn das Abendessen geladen ist, wollen wir die Fetch-Movie-Methode wie folgt versenden die Fetch-Movie-Methode und sicherstellen , dass sie oben importiert wird. Hier ist es, Filme aus dem Laden zu holen, oder? Würde die Methode zum Abrufen von Filmen nicht, werden wir alle Arten von Filmen , die wir abrufen wollen, alle Arten von Filmen unterbrechen . Uh-huh. In Ordnung, nachdem wir das getan haben, möchten wir, dass diese beim Rendern der Komponente gestartet werden. Was ich also tun werde, ist das Abhängigkeits-Array zu nehmen , weil es vorerst von nichts abhängt, um den Start zu starten und die Anwendung zu speichern. Und dann müssen wir zurück zum Index-Spott. Scrollen Sie nach unten, wo wir die Methode zum Abrufen von Filmen haben. Und hier müssen wir so einen Schrägstrich setzen. Nachdem wir das getan haben, müssen wir es hier auch mit einem Semikolon beenden. Und dann mache ich hier console.log. Was wollen wir sehen? Wir wollen die Daten hier protokollieren. Also werde ich Daten machen, mir die Aufhebung sparen. Mal sehen, ob wieder etwas nicht stimmt, ist in Ordnung. Gehen Sie zurück zum Browser und hier haben wir das Versprechen , das Geld auszugeben. Jetzt öffne dieses Versprechen und sieh dir dann das Ergebnis hier an. Kannst du dir vorstellen, dass wir jetzt 80 Filme haben, oder? Das Tragen dieser IRI ist so schön. Ich mag es. Also haben wir hier etwas Großartiges gemacht. Lassen Sie mich nun die Einzelheiten erläutern. Okay, hier haben wir die Filmgeneratoren, das ist Drama, ja, die ID des Films. Das ist es hier mit der Bildbreite, in diesem Fall dem Hintergrundpfad. Hier ist der Pfad im Hintergrund. Und das ist der Name des Films, The Last of Us. Das ist es also. Öffnen wir das großzügige, Sie werden feststellen, dass das Abendessen hier eins ist. Ja. Du wirst also ein paar Filme haben, bei mehr als ein großzügiger, mal sehen, dieser Typ hier drüben. Er hat drei großzügige. Es gehört zu den Kategorien Science Fiction, Abenteuer und Action. Das haben wir also gemacht, als wir die Anzahl der abzuholenden Abendessen abhängig gemacht haben. Dieser Typ ist sehr großzügig geworden und so weiter und so fort. Lassen Sie uns den Code noch einmal durchgehen , damit Sie ihn gut genug verstehen. Also hier sind wir, um uns durch die Generäle zu ernähren. Und in dieser Zeile versuchen wir, für jeden großzügig mit seinem Ausweis vorzugehen. Immer wenn wir ein Abendessen bekommen, für das wir einen Ausweis haben, müssen wir den Namen herausnehmen und ihn in das großzügige Feld des Films einfügen. Das ist, dass Lee das war, was wir hier gemacht haben. Und hier, unter der zweiten Bedingung, haben wir überprüft, ob der Film einen Pfad im Hintergrund hat. Lassen Sie mich es Ihnen in diesem Fall zeigen. Dies ist der Pfad im Hintergrund. Wenn der Film einen Hintergrundpfad hat und wir uns für diesen Film interessieren. Das allein ist die Art von Filmen, die Frauen lieben. Also holen wir uns die Film-ID, die ist hier drüben. Der Filmname oder der Filmtitel, das ist der Typ hier drüben. Und auch das Bild, das der Hintergrundpfad ist Hier. Ist es. Nachdem wir das alles erledigt haben, müssen wir die großzügigen Kosten aufteilen, weil wir nicht mehr als drei Generäle in einem Film unterbringen wollen. Also, wenn ich spare, okay, lass es mich dir zeigen, nehmen wir an, wir wollen nicht mehr als zwei unterbringen. Wenn ich die Anwendung speichere, kehre ich direkt in der Konsole zum Browser zurück. Öffnen wir das großzügige Feld, damit Sie sehen, was ich damit meine. Nun, dieser Film hat nur eine Gattung. Und hier haben wir zwei Generäle. Siehst du jetzt, wir haben begrenzt, die Anzahl der Gattungen muss zwei sein. Sie können sich also dafür entscheiden, mehr als zwei großzügige Einnahmen für einen Film zu erzielen. Das haben wir also hier gemacht. Und natürlich haben wir mit drei Variablen begonnen. Wir haben die Variablen ID, Name, Bild und Allgemein. Die Idee speichert also die ID, der Filmname wird auf dem Namen gespeichert. Der Pfad des Filmhintergrunds wird auf dem Bild gespeichert und so weiter und so fort. Also genau hier ist das, was wir tun, einfach. Wir sagten, hör zu, wir wollen keinen Film holen, der älter als 80 ist. Und wie Sie auf diesem Array sehen können, lassen Sie es mich Ihnen zeigen. Unten sehen Sie, dass die Länge dieses Arrays 80 ist. Mal sehen, ob wir ein bisschen nach oben zoomen können. Okay, siehst du, damit wir keine Filme abrufen wollen , die über 80 sind. Ja, das haben wir hier gemacht. Und schließlich haben wir hier den Film nach Trend, Trendwoche und Art des Films abgerufen Trendwoche . So einfach ist das also. Nachdem wir das in der nächsten Vorlesung gemacht haben, werden wir die Filme zeigen, oder? Wir sind in der Benutzeroberfläche und es wird natürlich extrem großartig sein. Ich hoffe, Ihnen hat dieser Vortrag gefallen und bitte tun Sie gut daran, Fragen zu stellen, wenn Sie verwirrt sind. Ich verstehe, dass diese spezielle Vorlesung ziemlich knifflig ist, aber wenn du genug aufpasst, wirst du auf jeden Fall die G's bekommen. Wir sehen uns in der nächsten Vorlesung. 96. 94 Global: Ordnung, also in der vorherigen Vorlesung ist es uns gelungen, die Filmdaten abzurufen. Und jetzt werden wir es auf unsere globale Bühne bringen , damit die Empire-Komponenten mit diesen Daten kommunizieren können . Gehe zurück zum VS-Code. Und das Erste, was wir tun werden, richtig, wir sind in der Funktion zum Abrufen von Filmen. Zuerst müssen wir das Konsolenprotokoll entfernen. Und dann werde ich zurückkehren, Filmdaten abrufen, so einfach ist das. Nachdem wir das getan haben, müssen wir es zu diesem Makel hinzufügen. Komm her, markiere von Länge 66 bis 69 dupliziert. Also müssen wir die Großzügigen loswerden. Dann rufen wir hier die Funktion zum Abrufen von Filmen auf. Wenn die Funktion der Fed-Filme erfüllt ist, können wir sie dem Staat so wegnehmen. Also werden wir State-Dots vom Staat machen. Wir holen uns die Filme, dann die Hauptaction , die Payload. Nachdem wir dies getan haben, können wir mit den Filmdaten überall in der Anwendung kommunizieren , da sie dem Status hinzugefügt wurden. Geh zurück zu Netflix dot js. Und dann mache ich hier Movies equa you selector. Also wählen sie diese aus, geben uns Zugang zu den Staaten. Und natürlich ist es eine Funktion, oder? Wir sind in der Funktion. Wir nehmen die Staaten. Dann machen wir hier State Dot Netflix-Punktfilme, so einfach ist das. Und jetzt können wir mitteilen, um welche Daten es sich handelt. Lass es mich dir zeigen. Komm her. Lassen Sie uns all diese Konsolenprotokolle löschen. Hier. Ich mache console.log. Lass uns Filme protokollieren , damit du sie sehen kannst. Speichern Sie die Anwendung im Browser. Papas. Können Sie sehen, wir haben jetzt eine unendliche Schleife der Daten. Siehst du, lass uns versuchen, es zu öffnen. Sie sehen, genau das ist es, was Redox-Türen sind. Wenn also hier etwas zu diesem Datum hinzugefügt wird, könnten wir es nicht überall in der Anwendung finden. So wie du es hier sehen kannst. Jetzt haben wir die Filmdaten Konsum zur Verfügung gestellt. In der nächsten Vorlesung werden wir beginnen, die Daten zu konsumieren. Wir sehen uns in der nächsten Vorlesung. 97. 95 Stop Infinite Loop: Okay, also bevor wir zur nächsten Vorlesung übergehen, müssen wir hier ein paar Einstellungen vornehmen. Wenn Sie also die Konsole beobachten, werden Sie feststellen, dass wir hier eine Endlosschleife haben. Okay? Dem müssen wir also ein Ende setzen. Kannst du die Daten sehen, also die Filme werden unendlich auf der Konsole protokolliert . Ja. Also, was wir jetzt tun werden, zurück zur Netflix-Seite hier drüben, direkt auf Zeile 36. Ich werde nur einen Kommentar dazu abgeben. Sicher, im Browser, Daddy's, und dann aktualisieren. Die Endlosschleife wird also Ihren Laptop verlangsamen. Das ist der Grund, warum ich die Kommentare hier in das Konsolenprotokoll aufgenommen habe. Jetzt kann Ihre Maschine ein bisschen schneller sein als zuvor, weil die Endlosschleife tatsächlich alles verlangsamt hat. Okay, fahren wir der nächsten Lektion fort, in der wir beginnen, die Daten direkt auf dem Bildschirm anzuzeigen. Wir sehen uns dann. 98. 96 Film auf dem Bildschirm rendern: Willkommen zurück an alle. In der vorherigen Vorlesung ist es uns gelungen, die Filme von der CMDB-API abzurufen, und dann haben wir die Filme auf der Konsole gesperrt. In dieser Vorlesung werden wir die Filme also auf dem Bildschirm anzeigen, sodass die Endnutzer mit den Filmen interagieren können , indem sie entweder auf die Filme klicken, um sie anzusehen, oder indem sie die Filme hinzufügen , die ihnen kostenpflichtig gefallen. Also, ohne weitere Umschweife, lasst uns anfangen. Erstellen Sie schnell eine neue Komponente namens Slider Container, oder? Was sind die Komponenten? Rechtsklick. Neue Datei. Der flache Containerpunkt g ist ein weiterer. Ebenfalls richtig, um die Komponenten mitzubringen , die wir erstellen werden. Film-Slider-Punkt g ist Befehl B. Um den Explorer zu schließen. Dann muss ich den Konstantenindex löschen , schließen, schließen. Entschuldigung, nicht löschen. Wir müssen einige Seiten schließen. Jetzt sind wir bereit, den Slider-Container, alle FCE zur Generierung unserer Funktionskomponente und auch hier das Gleiche zu bringen alle FCE zur Generierung unserer Funktionskomponente und . Stimmt es? Okay, also öffne die Netflix Cheers. Genau hier. Wir werden den Slider-Container rendern. Scrollen Sie genau an derselben Stelle nach unten, an der wir die Karte ausgeführt haben, wir werden sie abwischen. Dann mache ich hier den Slider-Container, um sicherzustellen, dass er oben hier importiert wird . Nachdem wir das getan haben, müssen wir noch einmal die Filmsonden an den Slider-Container übergeben. Also werde ich hier Filme machen, Filme. Gehen wir also zurück zum Slider-Container und lassen Sie uns diese Sonden empfangen. Slater-Container. Dann geht es um die Destrukturierung von Filmen. Nachdem wir diese erledigt haben, müssen wir gestylte Komponenten importieren Beginnen Sie mit den unten aufgeführten Startkomponenten. Wir müssen auch den Film-Slider aus dem Movie-Slider importieren . Im Grunde wählen wir also die Filme aus, die wir nacheinander anzeigen möchten. Okay, also nacheinander wollen wir zehn Filme zeigen. Denken Sie also daran, dass wir über 80 Filme abrufen. Ja, also wollen wir in jeder Reihe zehn Filme anzeigen. Wir werden das tun, indem wir die Slides-Methode verwenden. Ja, das wäre also in der Lage von Anfang bis Ende auszuwählen, z. B. verkaufen wir es 0-10, 10-20, 20-30 und so weiter und so fort. Wir werden eine Methode haben, die sich Get Movies Between nennt. Also werden wir die Filme zwischen einem bestimmten Bereich platzieren. Lass es mich dir zeigen. Diese Methode nimmt also Start und Ende als Parameter auf und setzt sie dann auf die Fehlerfunktion. Schließlich werden wir Filme zurückgeben, und zwar dieser Typ hier drüben, den wir als Requisiten, Filme, Punkte, Dias übergeben haben . Okay? Was jetzt passiert , ist, dass wir in diese Filme gehen , wo wir alle Filme haben , über 80 Filme. Ja. Also werden wir uns diese Filme ansehen und sie dann so herausschneiden, wie wir es wollen. Lass es mich dir zeigen. Also wollen wir es aus Statistik, Komma auswählen und sind hier kannst du auch von und aus Schleppbooten machen. Ich möchte es so lassen oder beginnen und enden. Nachdem wir dies getan haben, implementieren wir es auf der Benutzeroberfläche, damit Sie das gerade gut genug verstehen. Wir brauchen diesen DV hier nicht. Alles was wir hier brauchen ist ein Schieberegler. Wir müssen daraus eine Klasse machen, indem es in Startkomponenten umwandeln. Const Slider Wrapper, Equal Stout, Dots, Div und dann in den Hintergrund treten. Würden wir nicht auf dem Rücksitz anfangen, diese Handtücher aufzutragen. Okay. Also richtig, wäre nicht der Slider-Wrapper, wir werden den Film-Slider rendern. Bewege den Schieberegler einfach so und schließe ihn dann mit dem sich selbst schließenden Tag. Also hier geben wir die Daten als Sonden an den Film-Slider weiter. Also mache ich data equa, öffne und schließe geschweifte Klammern. Wir nennen die Methode Get Movies Between. Also wollen wir Filme bekommen. 0-10. Ja. Und hier draußen werde ich nur Titel machen, nur auf Netflix. Also werde ich diesen Typen hervorheben und ihn dann sechsmal duplizieren. Jetzt schneiden wir die Filme also schon auf. Jetzt haben wir den Film heruntergeschnitten und von 80 Filmen bekommen wir 0-10, direkt um die erste Zeile zu drucken und die zweite Reihe, wir bekommen 10-2020 bis 30, 30-4040 bis 50 hier drüben. 50 bis 60. 60 bis 70. Hauptsache. Das ist alles. Okay. Ja, wir haben bis zu 80 Filme geholt. Also hier mache ich 70 bis 80, alles cool. Als nächstes müssen wir den Titel ändern. Diese erscheinen also oben in jeder Zeile, um der Rolle einen beschreibenden Namen zu geben, z. B. hier mache ich Trend in Actionfilmen, romantischen Filmen und so weiter und so fort. Du verstehst also all diese Tops sehr gut. Du musst es an deinem Ende tun. Hier werde ich Neuerscheinungen machen. Auf Netflix beliebte Neuerscheinungen. Ich denke, wir müssen die Dinge geordnet regeln. Ich rufe diesen Typen direkt in der Action an, füge die Aktion hervor, schneide sie ab und füge sie dann hier für die neuen Releases ein. Okay, lassen wir es so, als ob das in Ordnung ist. Nachdem wir dies getan haben, fahren wir mit den Film-Slidern fort, wo wir die Filme zuordnen und sie auf dem Film-Slider auf dem Bildschirm anzeigen lassen. Also, was wir jetzt tun werden, zuerst werden wir Daten und Titel destrukturieren. Lassen Sie mich Ihnen diesen Titel hier und diese Daten zeigen. Also haben wir sie einfach destrukturiert. Wir geben sie als Sonden an den Film-Slider weiter. Jetzt müssen wir also zu den Film-Slidern zurückkehren und diese Requisiten dann über den Film-Slider empfangen. Und dann mit den strukturierten Daten und dem Titel, richtig? Würde dieses Div nicht, wir geben diesem Div Klassennamen Slider, oder? Innerhalb des Divs werden wir die Filme kartografieren. Jetzt mache ich Daten, das ist dieser Typ hier drüben, der aus dem Slider-Container kommt . Und du weißt, dass diesem Typ hier die Filme zwischen“ zugewiesen wird und die Methode „Gets Movies Between “ die Filme zurückgibt. Ja. Okay. Ich weiß, dass du all diese Tabs verstehst. Film-Slider, und dann mache ich eine Datenpunktkarte. Wir nehmen den Komma-Index von Filmen auf. Genau hier. Ich werde zurückkehren, wir werden die Benutzeroberfläche zurückgeben. Aber in diesem Fall müssen wir die Kartenfirma angeben, weil wir die Karten abbilden wollen. Also, was ich tun werde, ist so zu schneiden. Und bitte stellen Sie sicher , dass Sie es in einer Wanne importieren. Die Filmdaten sind gleich, weisen wir ihm einen Film zu. Der Index entspricht dem Index. Natürlich müssen wir angeben, dass der Schlüssel die Filmpunkt-ID sein wird , näher mit dem sich selbst schließenden Tag. Wenn Sie speichern und im Browser auschecken, ist die Idee, können Sie jetzt sehen, Sie es möglicherweise nicht dynamisch anzeigen lassen, nur weil wir das noch tun müssen. Aber im Moment können Sie sehen, dass es uns gelungen ist, die Karten zuzuordnen. Okay, lassen Sie uns die entsprechenden Details anzeigen. Gehen Sie zurück zum VS-Code und öffnen Sie dann die Karte. G ist, wir sind im Auto, J, wir müssen die Filmdaten destrukturieren. Lass mich dir den Film zeigen. Das Tau hier drüben stammt aus dem Film-Slider. Und dann ordnen wir den Film zu, die Filmdaten. Ich weiß, dass du all das verstehst. Also geh zurück zur Karte. Gs haben die Filmdaten nicht destrukturiert. Wir müssen sie dynamisch anzeigen. Also hier müssen wir alles so löschen. Die Quelle dieses Bildes wird also von der CMDB kommen. Spezifizieren Sie die Arktis. Ich mache einen HTTPS-Dolon-Forward-Slash image.cmdb.org slash d slash p slash w 500. Dann haben wir hier 1-Dollar-Zeichen und öffnen und schließen dann die geschweifte Klammer. Und hier machen wir das Movie Data Dot Image. Wenn du sieben bist, checke den Browser und die IDEs aus. Siehst du, jetzt ist es uns gelungen in den Filmen dynamisch darzustellen. Ich liebe das. Das ist interessant. Du siehst unser Recht. Aber wenn Sie den Mauszeiger über die Filme bewegen, werden Sie die statischen Daten sehen, wie zum Beispiel das Rot , die Action und all diese Dinge. Lassen Sie uns sie also dynamisch aufrufen. Gehe zurück zu den Kartenbestandteilen und hier drüben auf den Mauszeiger, markiere und kopiere. Komm her. Wir möchten auch das entsprechende Posterbild zeigen, es abwischen und hier einfügen. Für das Video werden wir das Video live sehen, da wir keinen Zugriff auf das CMDB-Video haben, also müssen wir das Video jetzt einfach verlassen. Was müssen wir nochmal tun. Wir müssen den Titel anzeigen. Um den Titel anzuzeigen, müssen wir das abwischen und dann die geschweiften Klammern nehmen, damit wir zwischen den GSAs JavaScript schreiben können. Also, was ich jetzt machen werde, ist der Name der Filmdaten. Gehen wir zurück zu dem Punkt, an dem wir den Film großzügig haben. Hier drüben. Wir werden das jetzt durchgehen. Also, was ich tun werde, ist vorerst das LI-Tag abzuwischen und dann geschweifte Klammern zu öffnen und zu schließen, Filmdatenpunkt, Punktmob. Also schauen wir uns gerade die Großzügigen an. Also nehme ich im Allgemeinen an, stelle es auf unsere Funktion ein, oder? Wir sind in der Funktion, wir werden wieder das LI-Tag haben , oder? Wir sind im LI-Tag. Wir müssen den Film großzügig zeigen, und ich mache General, so einfach ist das. Lass uns im Browser speichern und sehen. In jedem Film. Kannst du sehen, dieser Film ist Babylon. Wenn du den Mauszeiger darauf bewegst, ist das Avatar, der Weg des Wassers. In Ordnung. Kannst du die letzte Woche sehen? Einige der Filme haben nur einen Titel und einige Filme auch. Es hat mehr als einen Titel. Also, ja. Also, wenn Sie den Mauszeiger auf diesen Film bewegen, Black Panther, Wakanda Forever. Die Dinge nehmen also langsam Gestalt an. Über Andys haben ein Schaufelrad mit Wasser. Der letzte Wunsch. Und all das Zeug, alles funktioniert wie erwartet einwandfrei. Und auf jeden Fall liebe ich ihr Resort. In der nächsten Vorlesung werden wir also die Slider-Komponente stilisieren und alles richtig ausrichten. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 99. 97 Styling: Willkommen zurück, alle zusammen. In der vorherigen Vorlesung haben wir die Filme auf dem Bildschirm angezeigt. Kannst du sehen? Ich verstehe also, dass diese Komponente nicht schön ist, aber sie sieht auch nicht hässlich aus. In dieser Vorlesung werden wir diese Komponente stilisieren und sie extrem schön aussehen lassen. Fahren Sie mit dem VS-Code fort. Und lass uns anfangen. Genau dann, wenn der Film rutscht. Zunächst werden wir von Startunternehmen ausgehen. Und dann unten machen wir const container equa, beginnen Punkt d. Also lassen Sie uns schnell diesen Kerl in der obersten Zeile erstellen , der von den Spuren 122, Zeilen 18, erwischt werden soll. Innerhalb des Container-Formats ist der Code hübscher. Nachdem wir das getan haben, werden wir eine weitere Div haben, oder? Um das Container-Div mit dem Klassennamen Wrapper zu bringen. Und wieder Highlights aus den Zeilen 112, Zeilen 15 Schnitte, eingefügt hier. Formatieren Sie den Code auch mit Pretty. Gleich nach dem Container werden wir eine Kopfmarke haben. Und hier nehmen wir den Titel auf , der ist dieser Typ hier drüben, der sich destrukturieren würde und der aus dem Slider-Container kommt. Hier, ist es. Wenn wir das tun, werden wir jetzt den einzigen Netflix-Trend haben, der auf Netflix und den anderen beliebt ist. Wir werden sie also oben in jeder Rolle anzeigen lassen, um dieser Rolle einen beschreibenden Namen zu geben, um sozusagen Veteranen zu beschreiben. Nachdem wir das hier gemacht haben, geben wir dem Container eine Lücke von 0,7 rem. Okay, so ist es in Ordnung. Wir werden die Position haben. Wirklich Tea Party. Nachdem wir das getan haben, wollen wir das versteckte Tag schnell stilisieren . Er hatte gewonnen. Lassen wir ihm einen Spielraum übrig. Der linke Rand beträgt 50 Pixel. Die Schriftgröße beträgt 25 Pixel. Die Schriftfamilie, ich werde sie hier wählen. Sie können sich dafür entscheiden, ihm eine beliebige Schriftfamilie Ihrer Wahl zu geben. Und das ist sozusagen Ihre eigene Spezifikation oder Ihr Rezept, lassen Sie uns weitermachen. Gleich nach der Kopfmarke. Wir werden das Wrapper ins Visier nehmen. Lass mich sehen. Hier ist der Wrapper. Das Wrapper, wir nehmen den Slider ins Visier und stilisieren ihn dann. Dunkler Schieberegler. Also lassen wir es Flex anzeigen. Dadurch werden die gesamten Elemente in jeder Zeile im Browser ausgerichtet . Kannst du sehen? In Ordnung, also ich denke, die Polsterung ist zu viel. Also müssen wir hier nach oben scrollen. Machen wir es zu einem Teil von One Rem Save. In Ordnung, ist gut. Denke auch, es ist zu viel, aber okay, lass uns weitermachen. Wir werden die Dinge auf jeden Fall reparieren. Also hier werden wir es geben. Lass mich dir etwas zeigen. Wenn Sie den Bildschirm betrachten, werden Sie feststellen, dass die Karten nicht mehr die entsprechende Breite haben , die wir ihnen zugewiesen haben. Ja. Also, was wir jetzt machen werden ist, dass es maximaler Inhalt sein wird . Wenn Sie im Browser speichern, sehen Sie, dass jetzt alles cool ist. Ordnung, wenn Sie also auch den Bildschirm beobachten, sehen Sie den roten Hintergrund auf der Karte. Das wollen wir überhaupt nicht. Ich habe es in der vorherigen Vorlesung für Unterrichtszwecke verwendet. Es ist einfach z.B. Sake. Geh zurück, öffne die Karte. Jazz. Richtig, innerhalb der Karte müssen wir nur die Hintergrundfarbe hervorheben. Okay, wisch es ab. Sicher im Browser. Papas. Gut. Hallo, richtig. Es nimmt allmählich Gestalt an. Geh zurück. Öffnen wir nun den Film-Slider. Geben wir eine Lücke, sodass zwischen den einzelnen Karten Platz ist. Die Lücke wird 0,6 RAM betragen. Transformiere, übersetze X Nullpixel. Wenn Sie das tun, ist hier das Ergebnis. Kannst du sehen? Also machen wir den Übergang 1 s. Einfach rein und raus, Rand links. Machen wir es zu 50 Pixeln. Nachdem Sie das getan haben, sehen Sie sicher, was wir jetzt haben. Gut. Kannst du Leute sehen, es sieht in der Tat gut aus. Nun, der Rand auf der linken Achse, ich glaube nicht, dass der linke Rand 50 Pixel betragen muss . Wir können also tatsächlich fünf Pixel daraus machen. Lass uns sehen. In Ordnung, gut. Nachdem wir das getan haben, lassen Sie mich Ihnen ganz oben zeigen, wir den ersten Tag haben dass wir den ersten Tag haben, mit dem der Titel angezeigt wird. Aber auf dem Bildschirm werden Sie es nicht sehen, nur weil die Schrift schwarz ist. Kannst du sehen? Wenn ich jetzt alles hervorhebe, wird es machbar. Also, was ich jetzt tun werde , ist die Farbe der Schrift anzugeben. Farbe. Lass es uns weiß machen. Das wird in Ordnung sein. Und das sind sie. Kannst du sehen? Okay, geben wir auch den linken Rand der Schrift an. Machen wir es also mit fünf Pixeln. Was ist der linke Rand des Hadrian-Tags, das zur Anzeige des Titels verwendet wird. Sind richtig, Leute. Alles sieht extrem ordentlich aus. Das ist so sauber und ich liebe es. Kannst du sehen? In Ordnung, als Nächstes muss der Slider implementiert werden. Stimmt es? Ich denke, das sollten wir in der nächsten Vorlesung machen. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert. Analysten passen auf. 100. 98 Leistungsoptimierung: Hinter den Kulissen wurde mir klar, dass die Leistung der Anwendung ein wenig beeinträchtigt wird. Lassen Sie mich Sie darauf aufmerksam machen. Wenn ich durch die Anwendung scrolle, werden Sie feststellen, dass die obere Navigationsleiste einige Zeit braucht, um ihre Hintergrundfarbe auf Schwarz zu ändern , wenn die Anwendung auf den Y-Achsen Null überschreitet. Jetzt sieh es dir an. Es braucht auch Zeit. Sie werden auch feststellen, dass die Anwendung langsamer wird. Du wirst sehen, ich weiß nicht , ob du das auf deiner Seite zur Kenntnis nehmen kannst. Können Sie sehen, dass die Anwendung ziemlich langsam ist. Bevor wir diesen Slider implementieren, müssen wir also die Leistung optimieren. Und das wird mit React dot mammal gemacht. Also müssen wir einen Weg finden, den Antrag zu gedenken. Ein React-Punktmemo ist also ein Hoch. Andere Komponenten, die eine andere Komponente akzeptieren und als Argument funktionieren, gehen zu VS-Code über, sofern sie nicht schnell implementiert werden. VS-Code. Gehen wir nun zurück zum Film-Slider. Zuerst. Was ich hier tun werde, ist den Code in React Dot Memo zusammenzufassen. Jetzt lösche ich die Fehlerfunktion, lösche den Zuweisungsoperator und scrolle dann nach unten. Wir müssen diesen Export auch löschen. Ich habe nicht alle Haltestellen gelöscht , also müssen wir diesen Typen löschen. Und ich werde die Standardeinstellungen exportieren, React-Punkt, Säugetier, offene und schließende Klammern. Und wir werden eine Funktion übernehmen. Und innerlich müssen wir auch das zweite Argument berücksichtigen, nämlich die Komponente. Markieren Sie hier alles, schneiden Sie es ab, kommen Sie her und fügen Sie es ein. Okay, wir müssen es ein bisschen näher und näher bringen. Markieren Sie anschließend die schließenden Klammern von React dot mammal. Schneid es ab. Also müssen wir es hier schließen, direkt auf Linie 18. Kannst du sehen, dass der Fehler weg ist? Jetzt ist diese spezielle Komponente optimiert. Lassen Sie uns auch die Kartenkomponenten optimieren. Natürlich weißt du, was zu tun ist. Wischen Sie die Pfeilfunktion, den Zuweisungsoperator, ab. Hier mache ich Export default, React Punkt Memo, nehme die Klammern und dann nehmen wir die Funktion so hervor, schneiden sie ab und kommen mit ihm. Und beim Einfügen wurden auch die schließenden Klammern der React-Punkt-Memoiren hervorgehoben . Schneid es ab. Wir müssen es hier schließen. Lass mich es dir hier unten so zeigen. Nachdem dies geschehen ist, beschwert sich die Anwendung immer noch. Scrollen Sie nach unten. Wir müssen diese Exporte löschen. Kannst du die Bewerbung sehen? Schon wieder? Schauen wir es uns im Browser an. Also lasst uns nach unten scrollen. Kannst du jetzt sehen, dass alles einwandfrei funktioniert? Schau es dir an. Hallo, richtig Leute. Das ist also alles für die Optimierung. In der nächsten Vorlesung werden wir mit dem Kartenschieber fortfahren. Wir sehen uns in der nächsten Vorlesung. 101. 99 Schieberegler: Willkommen zurück an alle. In dieser Vorlesung werden wir die Steuersymbole für den Slider implementieren , sodass die Endbenutzer die Filme nach links oder rechts verschieben können. also ohne weitere Umschweife Lassen Sie uns also ohne weitere Umschweife mit dem VS-Code beginnen. Das erste, was wir hier tun werden, ist, die Symbole aus dem React-Symbol-Scroll nach oben zu importieren . Und hier drüben werde ich die Importe machen. Wir müssen die Gliederung am linken Ende importieren, die UTLA fährt in Töpfen. Ich habe das linke Komma umrissen, oder? Das alles kommt jetzt von React-Symbolen. Also müssen wir es lösen, es mit einem Farbstoff reparieren, genau wie diese. Wunderschön. Nachdem Sie das getan haben, die nächste Zeile darin, die Symbole zu rendern, richtig, wären Sie nicht. Also direkt nach dem Div mit dem Klassennamen Wrapper werden wir ein weiteres Div haben. Geben wir ihm einen Klassennamen. Also hier werden wir auch die geschweiften Klammern öffnen, öffnen und schließen. Wir nehmen den Rindentee. Der Clustername wird also Slider Dash sein. Und ich nenne sie links, damit sie nach links zeigen . Ja. Das war's. Okay. Nachdem wir das getan haben, müssen wir das D schließen. Okay, richtig, würde das Div mit dem Klassennamen von Slider Action nicht links sein. Wir werden die Gliederungsebene mit dem sich selbst schließenden Tag näher rendern . Die nächste Zeile besteht also darin, dieses Def hervorzuheben, das Div des Klassennamens von Slider Action Highlight aus den Zeilen 152, Zeilen 17. Kopieren Sie direkt nach dem Div mit dem Klassennamen des Sliders. Hier ist das abschließende Div des ClassName-Sliders, und fügen Sie es dann hier ein. Also hier werden wir es hier in einen Ausreißer ändern . Ich ändere es auf rechts. Gut. Nachdem wir dies getan haben, wollen wir es schnell in der Stilkomponente stilisieren. Okay, lass es uns rausnehmen. Vorerst. Der Slider befindet sich direkt im Wrapper. Also, was ich jetzt tun werde, scrolle nach unten. Das ist der Wrapper. Es gibt einen Slider, oder? Wir sind im Gummi. Lassen Sie mich Ihnen diese Folie hier zeigen. Dann wollen wir die Slider-Aktion stilisieren. Also, nachdem wir die geschweiften Klammern des ClassName-Sliders geschlossen haben, werden wir den Slider für die niederländische Auktion stilisieren. Wir werden einen Display-Flex haben. Richten Sie den Inhalt mittig aus und richten Sie die Elemente in der Mitte aus. Wir werden es absolut positionieren, weil wir möchten sich die Symbole oben im Slider befinden. Also werden wir es absolut haben. Und denken Sie daran, dass bei diesen hier die Position auf relativ gesetzt war oder sie ist auf relativ gesetzt, sozusagen hallo, oder? Und übrigens, wir sind hier nicht im Englischunterricht. Das tut mir leid. Also den Z-Index, den Z-Strich-Index, machen wir ihn zu 99. Die Höhe, 100%. Die Spitze. Die Oberseite wird nach unten sein. Es wird Null sein. Die Breite. Machen wir es zu 50 Pixeln. Die Transaktion, wir werden sie in einer Sekunde haben, ist abgelaufen. Oder Sie können ganz einfach ein- und aussteigen, was Sie wollen. Also müssen wir das SVG stilisieren. Svg, wir machen das als VG, die Schriftgröße. Machen wir zwei zufällige daraus. Kausal. Machen wir es zu einem Zeiger. Geben wir ihm eine Farbe. Lass es uns weiß machen. Ist in Ordnung. Speichern Sie und lassen Sie uns sehen, was wir im Browser haben. Also Leute, das sind die Icons hier drüben. In Ordnung Leute, also erscheinen die Symbole hier drüben. Lass mich dir zeigen, kannst du sehen, dass wir zwei links und rechts haben, richte es richtig aus. Also, was ich jetzt tun werde, scrolle nach oben. Lassen Sie mich Ihnen diesen Kerl zeigen , der auch das Richtige angibt. Dieser Typ, der links zeigt. Wir müssen es sorgfältig stilisieren. Also komm her. Ich mache links. Von links wollten wir Null, rechts. Von rechts wollen wir, dass es auf Null geht. Sehen wir uns jetzt das Ergebnis dieser Implementierung an. Fein. Alles sieht gut aus. Und jetzt kannst du den Pfeil oder die Linke sehen. Und Sie können den Pfeil auf der rechten Seite sehen. Das ist das erwartete Ende. In Ordnung, nachdem ich all das getan habe, möchte ich Ihnen etwas erklären. Die Idee ist also, wir nicht wollen, dass die Pfeile standardmäßig auf den Karten erscheinen , wie diese. Ja, wir wollen also, dass die Pfeile nur erscheinen, wenn wir mit der Maus auf dem Slider fahren. Wenn sich die Maus also nicht auf dem Slider befindet, werden Sie die Pfeile nicht sehen. Lassen Sie uns schnell implementieren. Komm her, scrolle nach oben. Wir werden die notwendigen Zustandsvariablen deklarieren , die verwendet werden sollen. Und bevor wir das tun, müssen wir die USA importieren und einen Begriff. Und hier werde ich die Usage Snippets generieren. Also werde ich deine Staaten machen. Und hier sind die Schnipsel. Also werden wir zuerst die Sichtbarkeit der Kontrolle haben. Dann setzen wir die Sichtbarkeit der Kontrolle auf Falsch. Also der Anfangszustand wird falsch sein genau hier musst du das C machen, um auf Vergaser zu sein, die Kontrolle über die Sichtbarkeit einstellen und der Anfangszustand wird falsch sein. Wenn der Benutzer nun mit der Maus auf die Karte zeigt, sollen die Pfeile angezeigt werden. Wir machen das so, lass uns gleich kommen. Wir sind im Container. Wir werden hier eine Konstante haben. Ich mache Control Visibility, Aquatic. Kontrollieren Sie die Sichtbarkeit. Und macht es gleich darunter, müssen wir das on mouse enter n implementieren . Unsere Maus geht. Unter n rufen wir also die Setup-Funktion auf , um den Anfangszustand zu aktualisieren. Stellen Sie die Sichtbarkeit der Kontrolle ein. Und wir werden es auf wahr setzen. Die meisten Blätter. Dass wir die Sichtbarkeit der Kontrolle auf „ Falsch“ setzen, erklärt sich von selbst. Nachdem wir das getan haben, lassen Sie uns die Bedingung jetzt implementieren, oder? Wäre nicht das Div mit dem Klassennamen von Slider Action übrig. Wir müssen hier eine Bedingung stellen. Jetzt werde ich, wenn nicht, die Sichtbarkeit kontrollieren. Lass es uns so machen. Und L's, wir werden auch eine leere Zeichenfolge anzeigen. Das Gleiche gilt hier. Wenn es keine Kontrollsichtbarkeit gibt, was bedeutet, dass es keine Kontrollsichtbarkeit gibt, machen wir „Keine“. Und jetzt werden wir nichts tun. Die Idee hinter all dem Zeug ist also , dieses Neuron hier zu stilisieren. Okay? Also, wenn wir hier runter gehen, gibt es keine Punkte. Dann werden wir mit Display keine haben. Dadurch werden also die Steuersymbole ausgeblendet. Und wenn Sie aufgebraucht sind, legen Sie Ihre Maus auf die Karte. Es wird sichtbar sein. Wenn Sie das speichern und auschecken, der Browser. Kannst du sehen? Lass es mich dir zeigen. Ich nehme die Maus von der Karte ab. Wenn ich jetzt mit der Maus auf die Karte fahre, werden Sie die Symbole sehen. Kannst du sehen? Die Maus über den Mund bewegen? Und alles funktioniert wie erwartet einwandfrei. Wenn Sie jetzt auf das Symbol klicken, passiert nichts. Kannst du sehen, lass es mich dir zeigen. Wenn Sie auf das Symbol klicken, passiert nichts. Warum es einfach daran liegt, dass wir diesen Slider nicht implementiert haben. Gehen wir also zur nächsten Vorlesung, in der wir den Slider implementieren werden. Wir sehen uns in der nächsten Vorlesung. Konzentrieren Sie sich auf eine ganzheitliche Pflege. 102. 100 Den Schieberegler implementieren: In dieser Vorlesung werden wir den Slider implementieren. Am Ende dieser Vorlesung werden wir die Karten also nicht an den linken oder rechten Bildschirmrand bewegen können . Und auf jeden Fall werden Sie die Angel Resorts lieben. Lass uns schnell anfangen. Das erste, was wir hier tun werden, ist unnötige Zustandsvariable zu deklarieren. Scrollen Sie nach oben. Wir haben den US-Did-Hook aus der vorherigen Vorlesung importiert. Und genau hier importieren wir den User if hook. Und lassen Sie uns es hier schnell initialisieren. Liste Ref, equa. Benutze Rippe. Nachdem wir dies getan haben, lassen Sie uns schnell die Zustandsvariable Bewölkung S3 aufrufen. Und hier werden wir die Use-Stage-Snippets generieren. Ich nenne es Slide Up Position. Wir werden die Position des Schiebereglers festlegen. Ja, es wird auf CUP sein. Und dann wird der Anfangszustand des Sliders Null sein. Hier werden wir konstant haben. Wie begann Direction Equal zu unserer Funktion? Und dann nehmen wir hier die Richtung als Parameter. Also werden wir es dieses Mal tun. Lassen Sie uns einen Abstand zwischen einer Quadliste, einem roten Punkt und einem aktuellen Punkt ziehen. Was wir jetzt tun werden, ist die tatsächliche Position des Karrens auf der X-Achse relativ zum Viewport zu ermitteln. Und das können wir tun , indem wir die Ghetto-Bonding-Client-Methode anwenden. Get bekommt bindende Ansprüche für Eier. Natürlich ist es eine Methode. Wir erhalten die Position auf der X-Achse und ich mache -17. Also, wenn wir jetzt eine Bedingung haben. Wenn die Richtung gleich links ist und die Richtung eine Kernlinkslinie ist, Schiebereglerposition größer als Null. Das ist das einzige Mal, dass wir die Karte bewegen können. Es bedeutet einfach, wenn du auf das linke Symbol klickst, lass es mich dir hier zeigen. Also dieses linke Symbol hier drüben, wenn Sie darauf klicken, auch wenn die Richtung auf der X-Achse größer als Null ist. Also, was ich jetzt tun werde, ist den roten Punkt aufzulisten. Wir müssen die aktuelle Position ermitteln, diese aktuelle, und dann müssen wir sie mit einer Punkttransformation stilisieren. Also wollen wir es nach links animieren. Und dann werden wir hier Stil darauf anwenden. Wir werden das X-Dollarzeichen übersetzen. Also bewegen wir diesen Schieberegler um 230 Pixel nach links, in den Speicher. Wenn wir mit der Eingabe des Codes fertig sind, werde ich ihn einfach erklären, damit ihn jeder gut genug versteht. Ich mache Plus Distance und wende dann die Pixel hier an. Nachdem wir dies getan haben, müssen wir die Position so einstellen, dass die Position nach oben verschoben wird, plus eins. Das ist das Einfachste, Väter haben recht. Das ist also für die linke Seite. Wir müssen es auch für die rechte Seite implementieren. Ich muss nur aus der IF-Aussage kopieren. Markieren Sie die Linien Cystein bis 19. Kopieren. Komm her, füge es ein. Ändere diese nach rechts. Was macht nochmal? Jetzt machen wir es wenn die Schiebereglerposition weniger als vier ist, können wir dann die negativen 210 Pixel der Karte nur nach rechts verschieben ? So einfach ist das. Und das, das sollte minus eins sein, und das sollte plus eins sein. Speichern wir die Anwendung. Lassen Sie uns nun sehen, wie wir das auf beiden Seiten umsetzen können . Okay, was sind die Div des Klassennamens von Slider? Ich werde es tun. Und das wird Lists Ref sein. Dann implementieren wir es auf dem Symbol. Hier spezifizieren wir den Onclick, onclick des linken Symbols. Wir müssen diesen Schieberegler nach links bewegen. Also, was ich jetzt tun werde, ist die Funktion handle direction aufzurufen. Gleich drinnen gehen wir links vorbei. Ich kopiere den Onclick. Ich kopiere den Onclick. Lass es uns hier einfügen. Wäre keine Atlantikfahrt. Wir müssen es ändern , um mit diesen zu fahren. Ich glaube, alles wird gut funktionieren. Gehe zum Browser. Stellen Sie sicher, dass Sie es aktualisieren. Verschieben wir es nach rechts, Hintern, Hintern, Hintern, Verschieben wir es nach links. Bumm, bumm, bumm. Kannst du sehen? Alles läuft wie erwartet einwandfrei. Ich liebe das, aber der Slider ist ziemlich langsam. Geh zurück. Lassen Sie mich Ihnen zeigen, was die Slider-Aktion ist. Machen wir, dass 0,1 Sekunden vorbei sind. Versuchen wir es jetzt noch einmal. Siehst du, dass ich die liebe? In Ordnung, alles funktioniert einwandfrei. Es ist an der Zeit, es einfach zu erklären , damit es jeder gut genug versteht. Jetzt lade ich die Seite neu. 103. 101 Dashboard (Erstellen Sie React: In dieser Vorlesung beginnen wir bei Null, um eine neue React-Anwendung zu erstellen. Also richtig, auf meinem Desktop werde ich ein neues Verzeichnis namens Dashboard erstellen. Rechtsklicken Sie auf den neuen Ordner. Dies wird im Dashboard abgefangen. Die nächste Zeile besteht darin, dieses Verzeichnis per Drag & Drop in den VS-Code zu ziehen. Ich öffne einfach meinen VS-Code. Also werde ich es jetzt per Drag & Drop hierher ziehen. Schließen Sie die Beispielseite und maximieren Sie dann den VS-Code. Öffnen Sie schnell das integrierte VSCode-Terminal. Stimmt es? Ich würde nicht nein sagen. Wir müssen eine neue React-Anwendung generieren. Und um das zu tun, müssen wir den MPS-Befehl verwenden. Np x. Create Dash React, Dash r. React wird verwendet, um eine Frontend-Anwendung zu erstellen. Also müssen wir es in ein direktes Rekordflugzeug einbauen. Die notwendige Grundplatte, die für die Entwicklung unserer Frontend-Anwendung benötigt wird Entwicklung unserer Frontend-Anwendung , wird installiert, oder? Wir sind im Kundenverzeichnis. Drücken Sie die Enter-Taste , um es zu starten. Die Installation von React ist im Gange. React wird als nächstes erfolgreich installiert. Wir müssen in das Client-Verzeichnis gehen, in dem wir die React-Jahres-CD installiert haben, was einfach bedeutet, den Verzeichnisclient zu ändern. Genau hier machen wir npm. Starten Sie, drücken Sie die Eingabetaste, um es zu starten. Wunderschön. Hier ist die Londoner Seite einer React-Anwendung. Das ist alles für heute. In der nächsten Vorlesung werden wir die Heizplatten bereinigen, indem wir nicht benötigte Dateien löschen , die für dieses Projekt nicht benötigt werden. Wir sehen uns in der nächsten Vorlesung. 104. 102 Die Boiler reinigen: Willkommen zurück zu den Rückrufen. In dieser Vorlesung werden wir unnötige Blumen löschen , die in diesem Projekt nicht benötigt werden. Und diese Blumen enthalten den AP-Test, SVG mit dem Logo-Punkt, den Bericht, Web Vitals und die Setup-Testdaten. Also genau, als der Kunde den SRC öffnete. Und hier wählen wir Logo Dot SVG aus. Halten Sie die Befehlstaste auf Ihrer Tastatur gedrückt und klicken Sie dann, um Bericht, Web Vitals, Setup-Tests, Logo-Punkt-SVG und den Test hoch auszuwählen Web Vitals, Setup-Tests, . Rechtsklick. Löschen. Wunderschön. Und jetzt beschwert sich die Anwendung. Mal sehen, worum es bei dem Problem geht. Theorien können diesen Kerl nicht lösen, oder? Also müssen wir den Befehl P von index.js aufrufen, um das Suchfeld oben aufzurufen. Und dann suchen wir nach dem Indexpunkt g das ein wenig zu reduzieren. Befehl B, um den Explorer zu schließen. Also brauchen wir diesen Kerl nicht mehr. Sie berichten, Web-Vetos einlegen, markieren und löschen, speichern, und lassen Sie uns nochmal schauen, worum es bei dem Problem geht , sind genau hier. Ist es löschen? Wann sparst du? Wir müssen auch den Logo-Punkt-SVG-Befehl p löschen, vier oben setzen. Lassen Sie uns den Logo-Punkt-SVG markieren und dann löschen. In Ordnung, also müssen wir auch alles löschen. Ausgehend von Linie C gibt es zwei Linien. 19. Das öffnende Header-Tag zum schließenden Header-Tag. Wisch es ab. Rette sie richtig, es scheint, dass alles einwandfrei funktioniert. Jetzt. Lass es uns im Browser herausnehmen. Im Moment werden wir ein Hadrianrudel benutzen , um so etwas zu tun. Armaturenbrett. Speichern und checken Sie den Browser aus. Wenn Sie nun den Bildschirm betrachten, werden Sie feststellen, dass die Markierung am Kopf zur Mitte ausgerichtet ist. Gehen Sie zurück zu Command P und richten Sie dann die CSAs ein. Hier ist es. Kannst du Align Center sehen. Also alles hier ist mittig ausgerichtet. Markiert, abwischen, sicher im Browser. Und jetzt ist der Truthahn mit dem Kopf nach links ausgerichtet. Das ist oft unser Ziel. In dieser Vorlesung werden wir die Anwendung aufschlüsseln, um die Struktur und die Art und Weise, wie sie betrachtet wurde, zu verstehen . Und danach richten wir dann die Ordnerstrukturen ein. Wir sehen uns in der nächsten Vorlesung. 105. 103 Den Flow verstehen: Das Projekt verstehen und die Ordnerstruktur einrichten, indem die bewährten Methoden befolgt werden. In dieser Vorlesung werden wir das Muster unserer Projektordnerstruktur verstehen. Wir werden das Projekt enträtseln und die Grippe verstehen. Auf dem Bildschirm befindet sich also die React-Dashboard-Anwendung , die wir in diesem Kurs erstellen werden. Lassen Sie uns schnell an diesem Projekt arbeiten. Genau hier, wir haben jetzt die Spitze. Also oben links auf dem Bildschirm haben wir das Admin-Dashboard-Logo. Und in der oberen rechten Ecke haben wir die Benachrichtigungen. Am linken Bildschirmrand. Wir haben die Seite. Jetzt. Hier haben wir die Komponenten für zukünftige Informationen, die Diagrammkomponente zeigt die Hotelkomponenten an. Und direkt darunter haben wir die Transaktionstabelle n, die Tabelle der neu hinzugefügten Mitglieder. Lassen Sie uns jedoch schnell den Ablauf der Anwendung verstehen , indem wir die Seitennavigation verwenden , um durch die Projekte zu navigieren. Also hier haben wir die Benutzer. Wenn ich auf den Benutzer klicke, werde ich heruntergefahren, um ihn als Listenseite wiederzuverwenden. Sie sehen hier, wenn ich auf die Schaltfläche Bearbeiten klicke, werde ich zum Benutzerprofil weitergeleitet. Sie sehen hier, wir können einen Benutzer bearbeiten und dann die Daten aktualisieren. Und oben rechts auf dem Bildschirm haben wir die Schaltfläche Erstellen. Das führt uns also zur Komponente „Benutzer erstellen“. Und hier ist es wunderschön. Fahren wir mit den Produkten fort. Jetzt klicke ich auf die Produkte. Es bringt mich runter zu den Produktblättern. Also genau hier können wir einzelne Produkte auswählen. Wir können das Produkt sortieren, filtern, ausblenden oder jede Spalte anzeigen , die wir anzeigen möchten. Und das ist ab jetzt nicht mehr nötig. Wenn Sie auf die Schaltfläche Bearbeiten klicken , gelangen Sie zur Seite mit den einzelnen Produkten. All diese Komponenten auf den Seiten werden also in dieser Vorlesung erstellt. Also schnell Heroin zu VS-Code und lass uns sie erstellen. Befehl B, um den Explorer direkt im SRC zu öffnen . Rechtsklicken Sie auf den neuen Ordner. Das werden eingefangene Komponenten sein, oder? Wir sind im zuständigen Verzeichnis. Wir werden die entsprechenden Ordner erstellen. Rechtsklicken Sie auf den neuen Ordner. Natürlich werden wir die Chat-Komponenten haben. Das wird also Charts genannt. Im Moment sind wir also im Chat-Verzeichnis. Wir werden die Diagrammkomponenten erstellen. Jetzt. Klicken Sie auf Komponenten, Neuer Ordner. Und wir werden die Gesamtsumme der Anzeige erstellen. Klicken Sie erneut mit der rechten Maustaste auf Komponenten. Wir werden die Top Nav-Signoff Order Widgets erstellen Nav-Signoff , die zum Erstellen der Komponente „ Transaktionstabellen“ verwendet werden . Und schließlich direkt innerhalb des Unternehmens. Und wieder werden wir das Mitglieder-Widget erstellen. Wunderschön. Die Seiten beinhalten also, lassen Sie mich Ihnen hier zeigen, dass wir die Produktlistenseite auch rund um die einzelne Produktlistenseite haben die Produktlistenseite auch rund um werden. Wir werden die Cred Produktseite haben. Wenn es hierher kommt. Benutzer, wir werden die Listenseite des Benutzers, die Profilseite des Benutzers, die Seite des Benutzers haben . Okay, wenn Sie also nach Hause gehen, haben wir die Seite, die jetzt von der Oberseite der zukünftigen Produkte abhängt, entworfen . Aber Chats, die insgesamt angezeigt werden. Dies ist die Transaktionstabelle und die Komponente für neu beigetretene Mitglieder. Also müssen wir auch diesen Typen an der Spitze hier drüben erschaffen. Dafür. Gehen Sie zurück zum VS-Code, klicken Sie mit der rechten Maustaste auf Komponenten und neuen Ordner, und dann erstellen wir das zukünftige Essen. Also werden wir die gefilterte Komponente erstellen, oder? Auf dem Feld das Essen. Eigentlich bringe ich dir bei, wie man Code wie eine Perle schreibt. Das ist zumindest der Grund, warum ich alles einfach halten möchte. Jetzt sind wir damit fertig, oder? Wir sind im SRC. Wir werden ein neues Verzeichnis namens pages erstellen. Stimmt es? Wenn die Seite geöffnet ist, klicken Sie mit der rechten Maustaste auf den neuen Ordner. Wir lassen das Home die Seite erneut nachrüsten. Wir werden die kreative Produktseite haben. Wir werden die Produktseite selbst haben, auf der die einzelnen Produkte handelt. Wir werden die Produktliste haben. Wir werden die Benutzer haben. Okay, lass uns die Benutzerliste, das Benutzerprofil machen. Schließlich werden wir den Benutzer erstellen haben. Perfekt. Und jetzt haben wir unseren Ordner erfolgreich strukturiert. In der nächsten Vorlesung beginnen wir mit der Top Nav-Komponente. Um es noch einmal zusammenzufassen, oder? Würde das SRC nicht, wir haben ein Verzeichnis namens Components Rights erstellt . Im Verzeichnis dieser Komponente befinden sich die Chats, in denen die zukünftigen Vorstandsmitglieder des Hotels angezeigt wurden . Wir haben Bestellungen gemacht, wir haben genug getan und das Top Nav. Und Rechte drüben auf den Seiten, wir haben die Produktseite erstellen, den Benutzer erstellen, die Homepage, die Produkte, also die einzelnen Produkte, die Produktliste, mindestens verwenden. Das Benutzerprofil ist ziemlich einfach. Also hier ist die Top Nav-Komponente, die Side-Enight-Komponenten , die Future-Info-Komponente, die Chats, die das Split Hotel hat. Das ist also das älteste Widget und das ist das Mitglieder-Widget. Wenn Sie über die Seiten sprechen, haben wir auch die Listenseite des Benutzers, die Profilseite des und die Seite „Benutzer erstellen“. Wir haben dasselbe für die Produkte. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 106. 104 TopNav: In dieser Vorlesung werden wir das Unternehmen Top Nav aufbauen. Aber bevor wir fortfahren, müssen wir die Material-UI installieren, die es uns natürlich ermöglicht, die SVG-Symbole zu verwenden. Tische. Schreiben Sie einfach Any lot more quickly hidden auf material ui.com zu. Und klicken Sie auf Get started. Am linken Bildschirmrand werden Sie die Wanne sehen. Gleich drüben in der Wanne. Sie müssen auf Installation klicken. Hier haben wir die Hinweise zur Installation von Material. Du. In diesem Fall müssen wir nur den Befehl npm kopieren. Kopieren Sie, kehren Sie zu VS Code zurück, öffnen Sie das integrierte VSCode-Terminal, Terminal, das neue Terminal. Aber sieh mal, ich habe es schon geöffnet. Also, was ich tun werde, ist CD Claims und dann Command V, um den Befehl npm einzufügen , um Material zu installieren Sie klicken auf die Enter-Taste auf Ihrer Tastatur, um es zu starten. Die Installation ist im Gange. Installiert, erfolgreich. Die nächste Zeile besteht darin, Material Icon speziell zu installieren. Also hier werde ich den Node Package Manager machen. Installieren fügt einen Schrägstrich, Symbole Bindestriche hinzu, drückt die Enter-Taste, um es zu starten, alles erledigt, installiert, subtrahiert Fall. In der nächsten Zeile wird die Top Nav-Komponente erstellt. Und diese Komponente wird erstellt, oder? Wir befinden uns im Top-Navigationsverzeichnis. Also klicken Sie mit der rechten Maustaste auf top nav, new file, und ich nenne es top Nav dot j is. Ich möchte, dass Sie beachten, was üblicherweise bei der Benennung dieser Komponente verwendet wird. Es wird Pascal-Namenskonvention genannt, was bedeutet, dass Sie den ersten Buchstaben jedes Wortes groß schreiben. Der Unterricht ist gut, wunderschön. Drücken Sie die Enter-Taste, RFC, um die Funktionskomponenten zu generieren. Und wenn diese Abkürzung für Sie nicht funktioniert, müssen Sie nur zu den Erweiterungen gehen und dann nach React suchen. Native reagiert bereitwillig auf Schnipsel. Hier ist es. Es muss klicken und dann auf Ihrer Seite installieren. Geh zurück zum Explorer. Die nächste Zeile besteht darin, die CSS-Datei zu erstellen. CSS für den oberen Navigationspunkt. Schließen Sie den Explorer. Fahren wir also mit der Top Nav-Komponente fort. Was ich jetzt tun werde, ist, diese zu markieren und sie dann abzuwischen. Geben wir diesem Div nun den Klassennamen Top Nav-Container, oder? Wir sind im oberen Navigationscontainer. Wir werden ein weiteres Div mit dem Klassennamen Top Nav Wrapper haben . Das obere Navi wird also in zwei verschiedene Teilbereiche unterteilt, den linken Randbereich und den rechten Randbereich. Der linke Rand der oberen Navigationsleiste wird also verwendet, um das Logo anzuzeigen. Der rechte Rand wird verwendet, um die Benachrichtigung und das Admin-Profil anzuzeigen . Also genau hier werden wir ein Div haben. Geben Sie ihr den Klassennamen oben links, direkt in diesem Div, wir werden ein Feld haben, in dem das Logo angezeigt wird. Und ich werde Admin Dash machen. Deshalb wollen wir Test als Logo verwenden. Hier. Ich gebe ihm einen Klassennamen. Logos. Nett. Okay, lassen Sie uns schnell die Komponenten in der App rendern. Js Common P set for ArcGIS. Und dann müssen wir hier nur die Top Nav-Komponente mit einem sich selbst schließenden Tag näher ausführen mit einem sich selbst schließenden Tag näher und sicherstellen, dass sie oben importiert wird. Hier auf dem Terminal werde ich npm starts machen. Also Elemente, um ein echtes Bild von den Dingen zu bekommen , die wir tun. Hier ist der Admin-Dash in der oberen linken Ecke des Bildschirms. Stimmt. Wir sind im obersten Haus. Okay, gut. Direkt hier vor diesem Div mit dem Klassennamen oben links werden wir ein weiteres Div mit dem Klassennamen oben rechts haben . Hier organisieren wir die Benachrichtigung und das Profil, genau dann, wenn wir ein Div haben, geben wir ihm den Klassennamen top nav, icon container. Richtig, in diesem Div werden wir zuerst das Benachrichtigungssymbol haben. Und um das SVG-Symbol zu erhalten, müssen wir es von MEINEN Symbolen importieren. Benachrichtigung von at MUS importieren Schrägstriche und Materialien. Nutzen wir also diese Gelegenheit, um alle notwendigen Symbole zu importieren, die benötigt werden. Ruhiger. Hier brauchen wir die Sprache, wir brauchen das Einstellungssymbol. Und schließlich brauchen wir den Chat Babu, sicher oder richtig. Also hier werden wir die Benachrichtigung näher betrachten. Was für ein selbstschließendes Etikett. Und außerdem müssen wir ihm einen Klassennamen geben , nur weil wir ihn stilisieren werden. Oberes Navigationssymbol. Und hier werden wir eine Zeitspanne haben. Wenn der Klassenname des oberen Symbolabzeichens richtig ist, befinden wir uns im inneren HTML-Code, den wir anzeigen möchten die Benachrichtigung höher ist, oder? Also pass auf, was ich jetzt tun werde. Ich werde die Zeilen 11 bis 14 hervorheben. Halten Sie die Umschalttaste gedrückt und tippen Sie auf die Abwärtspfeiltaste, um es dreimal zu duplizieren. Sie müssen nur dreimal die Abwärtspfeiltaste drücken. Also hier müssen wir die Sprache rendern. Sagen wir für meine Haare oder drei Einstellungen. Wir müssen Diagramm Babu rendern. Am einfachsten ist, dass dies Benachrichtigungen sein müssen. Spare und lass uns sehen, was wir haben. Es heißt, dass die Benachrichtigung nicht definiert ist. Ja, natürlich müssen wir die Änderung hier vornehmen und erneut sparen. Perfekt. Also hier ist das Admin-Dashboard-Logo. Hier die Benachrichtigung und Laurie, die Dinge sind nicht so angeordnet, wie Sie es erwarten. Es liegt einfach daran, dass wir es nicht stilisiert haben. Lassen Sie uns also das Profilbild der Armee anzeigen. Direkt nach dem schließenden Div des Klassennamens, oberen Navigationssymbolcontainer, werden wir ein IMG-Tag haben, SRC equa. Ich kopiere einfach ein zufälliges Bild von einem Typen im Internet und füge es dann hier ein. Gleiche Ausgabe. Lassen Sie uns also mit einem selbstschließenden Etikett schnell näher ran. Speichern Sie im Browser. Hier ist es. Siehst du, hier ist das Foto des Typen, aber es sieht nicht so schön aus wie erwartet. Und ich habe dir den Grund genannt. In der nächsten Vorlesung, wenn wir anfangen, dieses Unternehmen zu stilisieren, würden Sie es auf jeden Fall lieben. Ordnung, lassen Sie uns zur nächsten Vorlesung übergehen, in der wir dieses Unternehmen stilisieren werden. Wir sehen uns in der nächsten Vorlesung. 107. 105 TopNav Css: In dieser Vorlesung werden wir jetzt die Oberseite der Komponenten stilisieren. Und am Ende werden wir ein sehr schön aussehendes Top Nav haben . Fahren Sie schnell mit VS Code fort. Öffne das obere Navi, CSS. Hier ist es. Teilen wir den Bildschirm. Jetzt. Wir werden das CSS oder den rechten Bildschirmrand haben . Und dann haben wir die obere linke Komponente am linken Bildschirmrand. Fahren wir mit dem Bild fort. Lassen Sie mich Ihnen zeigen, können Sie sehen dass das Bild den gesamten Bildschirm einnimmt. Und das gefällt mir nicht. Lass es uns schnell stilisieren. Jetzt müssen wir den Clusternamen des Images angeben. Der Klassenname ist admin, IMD. Kopieren. Komm her, Punkte, füge dann den Clusternamen des Bildes ein, öffne und schließe geschweifte Klammern. Stimmt es? In den geschweiften Klammern werden wir die Stile anwenden. Die Breite des Bildes wird 40 Pixel betragen. Die Höhe wird 40 Pixel betragen. Und natürlich wollen wir, dass das Bild kreisförmig ist. Dazu müssen wir den Randradius auf 50 Prozent festlegen , was die Hälfte der Höhe des Bildes und die Hälfte der Breite des Bildes in Anspruch nehmen würde Bildes und die Hälfte der Breite des Bildes , also 50 Prozent. Bevor wir also zum Browser übergehen, müssen wir die Komponenten mit der CSS-Datei verknüpfen. Ich bin hier ganz oben. Ich mache Input-Punkt-Schrägstrich, Top Nav-Punkt-CSS. So einfach ist das. Wenn Sie den Browser servieren und auschecken. Hey, ist es? Kannst du das sehen? Jetzt sehen wir das Bild wie erwartet wunderschön aus. Die nächste Zeile besteht darin, den Top Nav-Container zu stilisieren. Also Freunde, wir werden unsere CSS-Datei nach den Klassennamen sortieren , damit unser Code so einfach zu lesen und zu verstehen ist. Also hier, ganz oben im Bild, werden wir Punkte machen, hervorheben, kopieren. Komm her, füge ein, so. Der Top Nav-Container wird also oben sein, gefolgt vom Top Nav-Wrapper und so weiter und so fort. Also hier haben wir die Breite, 100 Prozent, die Höhe, 50 Pixel. Die Hintergrundfarbe. Ich entscheide mich für Alice Blue. Die Position wird klebrig sein. Top wird Null sein. Der Z-Index. Lass uns Triple Nine nehmen. Fantastisch. Lassen Sie uns nun den Top-Nav-Wrapper dialysieren, bei dem es sich um den Diagramm-Div zum Top-Nav-Container handelt. Ich markiere und kopiere. Geben wir ihm eine Höhe von 100 Prozent. Polsterung. Machen wir es zu Null Pixeln, 20 Pixel. Wir werden ein Display haben, Flex. Richten Sie die Elemente mittig aus. Wenn Sie den Browser servieren und auschecken. Wunderschön. Was wir jetzt tun werden, ist, Platz zwischen dem Logo und den Benachrichtigungen zu schaffen. Also müssen wir es in zwei Teile teilen. Dieser Typ hier drüben bewegt sich nach rechts und dann wird das Logo nach links ausgerichtet. Ich will das erreichen. Das ist alles, was ich tun werde , ist Raum dazwischen zu schaffen. Also werde ich den Inhaltsraum zwischen dem Speichern im Browser rechtfertigen . Hier ist es. Kannst du sehen, jetzt haben wir das Amine genau hier und wir haben die Benachrichtigungen oben rechts auf dem Bildschirm. Lass uns weitermachen. Die nächste Zeile dient der Stilisierung des Logos. Ich markiere und kopiere dann, komm her, füge ein. Einfach so. Die Schriftstärke wird fett sein. Die Schriftgröße wird sein. 30 Pixel, die Farbe. Lass es uns Alice blau haben, gröber. Machen wir daraus einen Zeiger, sodass, wenn sie aufgebraucht sind, bitte die Maus darauf drücken. Es zeigt, dass genug ist. Okay, lass es mich dir schnell zeigen. Ich denke, dir gezeigt ist der beste Weg, das zu erklären. Haben recht. Du kannst es einfach länger sehen , weil es Alice Blue ist. Geben wir ihm also eine Hintergrundfarbe. Die Hintergrundfarbe, lass uns sie rot machen. Die Hintergrundfarbe wird den Test also schön aussehen lassen, denn jetzt ist die Farbe des Tests in Form von Weiß, aber nicht ganz. Schau es dir an. Kannst du sehen, also wenn ich meine Maus oder Bedürfnisse platziere, kannst du sehen, dass es so angezeigt wird. Das liegt einfach daran, dass wir den Cursor als Zeiger festlegen , den Randradius. Wir möchten also, dass die Ränder des Hintergrunds etwas kurvig sind. Machen wir fünf Pixel daraus. Schrift, Familie, Monospace, Rand, Oberseite. Machen wir 30 Pixel daraus. Speichern Sie im Browser. Die sind höher, oder? Nett. Lassen Sie uns die Begnadigung spezifizieren. Es werden fünf Pixel sein. Speichern. Wunderschön. Jetzt werden wir es an die Spitze bringen. Es ist einfach hier drüben , weil sich dieser Typ tatsächlich irgendwie überlappt. Also lasst uns dafür sorgen, dass jetzt alles gut organisiert ist. Wir müssen die obere rechte Seite stilisieren. Dieser Typ ist hier, Punkte oben rechts. Dann müssen wir Flex anzeigen. Richten Sie die Elemente mittig aus. Speichern. Schau es dir an. Kannst du sehen, dass alles wie erwartet gut aufeinander abgestimmt ist? Die nächste Zeile ist der Symbolcontainer oben links. Das ist also der Container , in dem sich die Symbole befinden. Wenn Sie kopieren, kommen Sie hierher, Punkt oben links den Symbolcontainer. Also direkt im Inneren werden wir die relative Position haben. Natürlich wird der Corso auf Zeiger und dann auf Rand gesetzt , oder? Zehn Pixel. Sicher. Wir haben immer noch die gleichen Ergebnisse, aber diesmal ein besseres Ergebnis. Wir konzentrieren uns gerade auf die obere rechte Ecke des Bildschirms. K. Also der nächste in der Reihe ist der Lastkahn, der oben genug ist. Lassen Sie mich den Text hier hervorheben. Nicht nachgeben. Geben wir ihm eine Breite. 15 Pixel Die Höhe beträgt 50 Pixel. Position. Denken Sie daran, dass die vorherige Position relativ war. Und jetzt machen wir das bitte absolut. Dieser Typ hier wird hier sein. Wir müssen das CSS nach der Klasse sortieren , damit Sie in Zukunft nicht verwirrt werden. Wenn Sie so etwas tun, wird Ihr Code sehr einfach zu lesen und zu verstehen. Das obere minus 55 Pixel. Die Hintergrundfarbe wird rot sein. Die Farbe, die die Schriftfarbe ist, wird weiß sein. Wenn Sie also vorerst den Browser auschecken, schauen wir uns an, was wir haben. Kannst du sehen? Sie werden diesen roten Hintergrund mit der darauf geschriebenen Nummer der Benachrichtigung sehen . Der nächste Schritt ist also, es säkular zu gestalten. Kannst du sehen? Geben wir also den Grenzradius an. Machen wir 50 Prozent draus. Natürlich solltest du inzwischen verstehen, was es ist. Habe einen Display-Flex. Lassen Sie uns die Elemente zentrieren. Richten Sie den Inhalt in der Mitte aus. Die Schriftgröße. Machen wir zehn Pixel daraus. Wenn Sie den Browser speichern, schauen Sie sich das an. Alles ist wie erwartet gut aufeinander abgestimmt. Ich liebe es. Kannst du sehen, lass mich ein bisschen nach oben zoomen. Schau es dir an. Siehst du das? Als Nächstes ändere ich die Farbe der Symbole. Ich mag es so nicht. Okay, lass uns das schnell machen. Ich werde herkommen. Dies ist der Klassenname der Icons. Deshalb werde ich die Farbe Erbse hervorheben. Komm gleich her, Punkt, Punkt, Netzsymbol. Dann geben wir ihm eine Farbe des Bildes W. Speichern Sie es im Browser. Hier kannst du sehen, dass alles extrem gut aussieht. Ich liebe es. Also Freunde. Das ist alles für heute. In der nächsten Vorlesung werden wir mit der Arbeit an der Seitennavigation beginnen. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 108. 106 SideNav: In dieser Vorlesung werden wir das Side-Navi bauen. Das Ende. Wir werden ein sehr schönes Seitennavigationsgerät wie dieses Auto haben , oder? Fahren wir also mit VS Code fort. Öffnen Sie den Explorer und B und schreiben Sie dann das Side-Nav-Verzeichnis. Wir müssen die Seitennavigationskomponenten erstellen. Auch hier müssen wir die entsprechende CSS-Datei erstellen. Genau hier in den Komponenten der Seitennavigation. Lassen Sie uns die funktionalen Komponenten generieren. Und dann müssen wir diese Seitennavigationsrechte innerhalb der App-Komponente rendern . Dafür werde ich hier ein Div machen. Geben Sie diesem Div den Klassennamen Container. Ups, richtig. Okay. Dann sind wir hier im Div. Wir gehen den Nebennerven auf die Nerven. Und bitte tun Sie gut daran, es oben zu importieren. In Ordnung. Die Idee hier ist also, den Bildschirm in fünf verschiedene Einheiten zu unterteilen . Dann haben wir Einheit 1.234,5. Die Seitennavigation wird also eine Einheit des Bildschirms einnehmen. Der restliche Teil des Bildschirms wird also an der Seite viermal größer sein , das ist jetzt ganz einfach. Der Weg, dies zu erreichen, um es zu implementieren, war die Flexbox. Also werden wir direkt in den App-CSAs den Container erstellen, um Flocken anzuzeigen. Okay, lassen Sie uns wieder genug Komponenten rezitieren. Und dann müssen wir den Klassennamen dieses Divs angeben. Geben Sie ihm den Klassennamen Sidon of Container. Ich werde markieren und dann kopieren. Komm her, DOD-Seite genug Behälter, öffne und schließe die geschweiften Klammern. Dann lassen wir es Flex One. Dadurch nimmt es also nur eine Bildschirmeinheit ein, so einfach ist das. Gehen wir also zurück zur Seitennavigation und beginnen wir der Erstellung der Seitennavigation der Benutzeroberfläche. Ich werde das abwischen. Wir werden jetzt ein Div mit dem Klassennamen Folie für unseren Wrapper auf der rechten Seite haben jetzt ein Div mit dem Klassennamen Folie für unseren Wrapper auf der rechten , wir werden ein weiteres Div haben, geben Sie ihm einen Klassennamen für das Seitennavigationsmenü. Also direkt im Menü werden wir ein Hashtag haben, das ist drei. Geben Sie der Geschichte einen Klassennamen , um genau zu sein, Hall. Ich werde einfach das Dashboard machen, oder? Immer noch. Okay, im Seitennavigationsmenü werden wir das UL-Tag haben, zumindest den Klassennamen der Site Nav, richtig, wir sind in der UL, wir werden ein LI-Tag haben. Das LI ist ein Klassenname von Sidon des Listenelements. Stimmt es? Innerhalb. Wir werden eine Ikone haben. Und natürlich weißt du , dass wir unsere Icons von Materia you importieren werden. Sie müssen also nicht mehr zur Website zurückkehren , da wir sie hier bereits installiert haben. Was ich jetzt also tun werde, ist, geschweifte Klammern zu importieren und zu schließen. Linien tau aus MEI-Schrägstrich, Icon-Slash-Material. Dann müssen wir es hier rendern. Schließ es auch, was das selbstschließende Etikett ist. Wir müssen ihm einen Klassennamen geben. Also, wenn ein Grund für einen ClassName darin besteht, ihn stilisieren zu können. Und hey, ich werde es nach Hause machen ist ganz einfach. Okay, lass uns den Browser rausnehmen. Kannst du sehen? Schau es dir an. Jetzt sehen wir es so aus. Mach dir keine Sorgen. Wenn wir wieder anfangen, es zu stilisieren, werden Sie es extrem schön aussehen lassen. Fahren wir mit der Benutzeroberfläche fort. Also genau beim letzten Tag des LI-Tags werden wir ein weiteres LI-Tag haben. Gib ihm einen Klassennamen. Dieses Mal. Es wird ein Seitennavigationslistenelement sein, genau so. Okay, Kirby. Also müssen wir dieses Mal das Timeline-Icon importieren. Lass es uns hier unten regnen. Schließe es mit dem selbstschließenden Etikett. Und dann müssen wir auch den Klassennamen angeben. Und in diesem Fall werden die Clusternamen identisch sein. Also muss ich diesen Typen einfach von hier kopieren. Und dann einfach einfügen. Hier. Ich werde Analytik schreiben. Schon wieder. Ich muss das nur hervorheben und duplizieren. Wir müssen es also nicht noch einmal eingeben , denn wer hat das schon einmal gemacht? Zum Kopieren und Einfügen gefingert. Okay Leute, ich rede zu viel. Hier. Wir werden einen Aufwärtstrend haben. Also müssen wir das Symbol ändern. Jetzt werden wir Trend in importieren. In Ordnung, hier haben wir zwei. Der Trend im rechten Arm wird der Verkauf sein. Alt, Shift F, um den Code mit Prettier zu formatieren. Und wenn Sie Ihren VS-Code nicht installiert haben, müssen Sie natürlich Ihren VS-Code nicht installiert haben, nur zu den Erweiterungen gehen und dann nach Prettier suchen. Auf jeden Fall wirst du es da drüben haben. Klicken Sie auf die Schaltfläche Installieren , um es zu installieren. Wenn Sie speichern und im Browser auschecken. Du wirst so etwas haben. Also, was ich jetzt tun werde, lass mich dir das Div mit dem Klassennamen des Seitennavigationsmenüs zeigen . Sie sehen in den Zeilen 92, dass die Zeilen 25 hervorgehoben sind. Okay, wir müssen hier nur Platz machen, weil ich nicht möchte, dass irgendjemand verwirrt wird. Höhepunkte. Lass uns sehen. Also müssen wir es dreimal duplizieren. 123, einfach und kurz. Wenn Sie speichern und im Browser abhaken. Stimmt es? Also müssen wir die Symbole und den richtigen Job ändern , um der Spezifikation zu entsprechen. Fangen wir mit dem Typen hier an. Ich gebe nur ein Leerzeichen , damit du nicht verwirrt wirst . Ich unterrichte gerne in einem Lehmstall Marla. Stimmt es? Können Sie hier sehen, dass wir das Personensymbol aus dem Material importieren werden. Sie ändern auch die Benutzer dieser Tools. Hier müssen wir Inventar importieren. Hört mal, Leute, ihr könnt das tatsächlich an eurer Seite machen , ohne euch die Vorlesungen anzusehen. Uh-huh. Ja, das kannst du machen. Ich werde ein Symbol namens P importieren. Lassen Sie uns noch einmal die gesamten Symbole für diesen Abschnitt bei Horse Ich werde ein weiteres Symbol namens Assessment importieren. Also gleich darunter werden wir auch Pit haben. Wir müssen die Schreibweise ändern bis, nehmen wir an, Produkte. Dann werden wir hier die Bewertung durchführen. Okay. Können wir das als Verkauf belassen? Ja, das können wir, aber ich mache nur die Transaktion. Und zum Schluss werde ich dieses LI-Tag hier duplizieren. Und dann müssen wir einen weiteren Icon-Ereignisbaum importieren. Es scheint also, dass ich etwas getan habe, bis Neun hier für die Bewertung ist . Das sollte ein Bericht sein. Und hier werden wir eine Bestandsaufnahme machen. Und diese werden eine Transaktion haben. Gehen wir also zur nächsten Zeile über. Der Typ hier drüben, lass es mich dir zeigen. Damit sind wir also fertig. Okay? Jetzt fahren wir mit dem nächsten Abschnitt der Seitennavigation fort. Und das kannst du am Ende machen, wie ich bereits sagte. Für diesen Abschnitt werden wir importieren. Lassen Sie uns also das Symbol E-Mail-Karma importieren. Lassen Sie uns die Icon-Grading importieren. Und schließlich müssen wir für diesen Abschnitt das Symbol Chat Bubble importieren. Dies ist der erste, zweite und dritte Abschnitt. Hier. Neigte dazu, E-Mails zu senden. Der Bericht wird eine E-Mail sein. Hier. Lass es uns auf Chatbot-Board ändern. Hier, wären es Nachrichten oder Nachrichten? Sozusagen? Der letzte Punkt hier für diesen Abschnitt wird natürlich die Benotung sein. Die richtige Hoffnung wird bewältigt werden. Das ist also das letzte von allen. Mal sehen, was wir bisher gemacht haben. Kannst du sehen, dass es auch ohne Stabilisierung ziemlich schön aussieht. In der nächsten Vorlesung würden wir es also auf jeden Fall perfekt oder richtig machen. Gehen Sie also zum VS-Code und lassen Sie uns weitermachen. Lassen Sie uns die notwendigen Symbole importieren , die wir für den letzten Abschnitt benötigen. Setze hier ein Komma. Wir brauchen Verwaltungskonten, ruhiger, wir brauchen Analytik, ruhiger. Und schließlich brauchen wir Berichte. Hier. Wir müssen diesen Typen ändern, um Konten zu verwalten. Und hier steht ganz oben die Verwaltung von Analysen. Es wird Analytik hier drüben sein. Und schließlich werden wir Berichte haben. Und hier wird es Berichte geben. Speichern. Kannst du sehen? Vorlesung funktioniert also alles einwandfrei In dieser Vorlesung funktioniert also alles einwandfrei, wie erwartet. Bevor wir zur nächsten Vorlesung übergehen, müssen wir etwas tun. Hier sehen Sie ein Dashboard. Dashboards und Dashboards befinden sich im Abschnitt. Dieser Abschnitt soll ein anderer Abschnitt sein und nicht der Dashboard-Bereich. Also müssen wir zum Code zurückkehren und die Abschnitte spezifizieren. Nehmen wir an, das wird ein Admin-Menü sein. Sie können es auf Ihrer Seite nach Belieben ändern. Aber die Benennung sollte relevant sein. Hier. Sehen wir uns die Benachrichtigungen an. Und schließlich können wir hier sehen, unsere Mitarbeiter einfach etwas schreiben dass unsere Mitarbeiter einfach etwas schreiben, das für die Anwendung , die wir erstellen, relevant ist . Im Browser. Sie sind diese. Kannst du sehen? In dieser Vorlesung funktioniert alles einwandfrei wie erwartet. In der nächsten Vorlesung werden wir also beginnen, dieses Unternehmen zu stilisieren. Und am Ende wirst du es extrem schön aussehen lassen. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie fokussiert und ganzheitlich. 109. 107 Side Nav Css: In dieser Vorlesung werden wir beginnen, die Seitennavigationskomponente zu stilisieren. Am Ende. Sie werden sehr gut aussehen. Fahren Sie mit dem VS-Code fort und lassen Sie uns fortfahren. Öffne das Side-Navigation-CSS. Und hier müssen wir den Bildschirm in zwei Teile aufteilen. Am linken Bildschirmrand befinden sich die ausreichend gefütterten Unternehmen, und am rechten Bildschirmrand befindet sich die Seitennavigation, CSS. Okay, fangen wir mit dem Side-Navigationscontainer an. In der vorherigen Vorlesung haben wir den Flex auf eins gesetzt, was zufälligerweise Einheiten des gesamten Bildschirms beanspruchen wird. Okay? Geben wir ihm nun eine Höhe. Ein rotes V, dessen Position mit 50 Pixeln entspricht, wird klebrig bleiben. Die Hintergrundfarbe wird Alice Blue sein. Die 50 besten Pixel. Nachdem wir dies getan haben, verknüpfen wir die Komponente mit der CSS-Datei. Importe. Sicher im Browser. Kannst du die sehen? Perfekt. Die nächste Zeile ist der Side-Nav-Wrapper. Natürlich haben wir hier einen kleinen Fehler gemacht. Es muss p sein, bitte. Du musst es mit mir aushalten , weil ich die Audioaufnahme verweigert habe. Natürlich bin ich nicht die Roboter. Wir sind Menschen und können manchmal Rechtschreibfehler machen . Okay? Polsterung, 20 Pixel. Die Farbe, wir werden sie grau haben. Also werde ich fünf mal fünf machen, einfach so. Das Nest ist das Seitennavigationsmenü. Dieser Typ hier drüben, verstanden, komm her, Punkte, seitliches Navigationsmenü. Der untere Rand wird zehn Pixel betragen. Die Liste ist jetzt die Seite des Titels. Verstanden, komm her. Tot, Titel genug Seite. Wir werden die Schriftgröße so haben, dass sie der auf Bildern entspricht. Die Farbe, also die Schriftfarbe, RGB. Wenn es sieben ist, Komma eins, Komma eins ist es sechs, speichern und sehen, was wir im Browser haben. Cool. Siehst du, jetzt wird es nett. Lass es uns schöner machen. Die nächste Zeile ist zumindest die Seitennavigation. Bitte beachten Sie, wie ich das CSS entsprechend den Klassennamen einstelle. Dies ist eine der Möglichkeiten , Code wie ein Profi zu schreiben. Ich hoffe, du lernst etwas Schönes. Für die Seitennavigationsliste werden wir diesen Punkt hier entfernen. Kannst du sehen? Also lass es uns rausnehmen. Wir machen das im Listenstil. Wir werden es keins haben. Speichern und im Browser auschecken. Ist weg. Kannst du das sehen? Lass uns weitermachen. Komm zurück. Dann. Wir geben die Polsterung auf fünf Bilder an. Für das Seitennavigationselement, bei dem es sich um das Seitennavigationslistenelement handelt, Punkt-Anmeldelistenelement, das Padding, fünf Pixel. Lassen Sie uns die Kosten in Augenschein nehmen. Dann lassen wir es Flex anzeigen. Richten Sie Elemente an der Mitte und am Randradius aus. Machen wir fünf Pixel daraus. Wenn Sie speichern und zum Browser zurückkehren. Das bekommst du, richtig. Jetzt haben wir den Listeneintrag für die Seitennavigation erstellt. In der nächsten Zeile werden die Elemente hervorgehoben , wenn Sie die Maus darauf platzieren. Also werde ich diese einfach von hier kopieren. Füge die geschweiften Klammern ein. Und hier mache ich das aktive Punktkomma. Kopiere diesen Kerl noch einmal. Wenn Sie den Mauszeiger auf das Listenelement bewegen, geben wir als Hintergrundfarbe RGB an. Kann es tatsächlich Alice Blue machen. Aber lass uns das hier drüben weiterführen. Dann. Wir werden die Farbe der Telefone auf Schwarz ändern. Wenn Sie beim Auschecken im Browser speichern. Wenn Sie jetzt mit der Maus darauf zeigen, erhalten Sie diese schöne Schleife hier drüben. In Ordnung. Schließlich müssen wir Farbe hinzufügen, um genügend Symbole auszuwählen. Also dieser Winkel hier drüben, wir müssen ihm dieselbe Farbe wie das obere Navigationssymbol geben. Also, was ich jetzt tun werde, markiere das Symbol, das seitlich genug ist. Komm her. Dod, das Symbol reicht zur Seite, öffne die geschweiften Klammern. Und richtig, um die geschweiften Klammern einzufügen, müssen wir die Stile anwenden. Mein allgemeines Recht. Machen wir fünf Pixel daraus. Schriftgröße, 20 Pixel. Und die Farbe, die die Farbe des Symbols ist, wird Dodger Blues, Safe and Checkout sein. Der Browser. Kannst du sehen, dass als Zuschauer alles einwandfrei funktioniert. Und das ist extrem schön. Also schauen wir es uns an. Kannst du sehen? Es sieht nett aus. Ich liebe es. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 110. 108 Featured Item: In dieser Vorlesung konzentrieren wir uns auf die zukünftigen Artikel, Komponenten, wo wir den Umsatz, die Umsatzrenditen und die Propheten haben werden . Klicken Sie schnell auf den VS-Code und lassen Sie uns fortfahren. Das erste, was wir tun werden, ist, die Bildschirme ebenfalls in Einheiten zu unterteilen. So wie wir es in der vorherigen Vorlesung gemacht haben. Öffne den Explorer. Und dann erstellen wir im Home-Verzeichnis auch eine neue Komponente namens Whom Dot Gears. Wir müssen die entsprechende CSS-Datei erstellen. Stimmt es? Wir sind in dem Haus, in dem J ist, wir müssen die funktionale Komponente generieren. Dann geben wir diesem Div einen Klassennamen , dessen Container ich markieren und dann kopieren werde. Lassen Sie uns schnell die CSS-Datei importieren. Wen punktet CSS. Dann, richtig, wir sind im Home-CSS. Wir müssen das Kontinuierliche stilisieren. Die Idee ist also einfach. Lass es mich dir zeigen. Wir wollen, dass dieser Raum hier an der Seite jetzt sechsmal größer ist. In Ordnung, das zu tun ist extrem einfach. Alles was wir tun müssen ist Flex Six. Also, wenn du das tust, wird dieser Typ hier sechsmal größer sein als die Seitennerven, was einfach bedeutet, dass das Seitennavigationsgerät sechsmal in diesen Raum hier drüben geht . So einfach ist das auch. Wenn du viermal rein gehen möchtest, musst du es nur auf Flex for umstellen. Wenn du das tust, wird der Raum hier auf der Seite von Spades jetzt viermal größer sein . Lass es mich dir im Protokoll zeigen. Gehen Sie zurück zu unserer App-Komponente und dann werden wir die Home-Komponenten ausführen. Hier müssen wir wen von Punkt Slash Pages Slash, Home Slash Home importieren . Speichern Sie und kehren Sie zum Browser zurück. Sie können es vielleicht nicht beobachten, oder? Also werde ich dir jetzt helfen, hierher zu kommen, zurück zum Home-CSS zu gehen und lass uns die Hintergrundfarbe angeben . Lass es uns rot machen. Gut. In Ordnung, also ich möchte, dass du den Raum hier beobachtest. Unter dem Weltraum haben wir hier. Also, wenn ich das hier mache, drehe sechs und spare. Beobachten. Kannst du das sehen? Dieser Raum wird also sechsmal größer als der Raum der Seitennavigation, was einfach bedeutet, dass die Seite jetzt von sechsmal in diesen Teil hier drüben gehen wird . Also überlasse ich es Ihnen, sich am Ende Ihr eigenes Urteil zu bilden und den geeigneten Raum auszuwählen, für Ihr Projekt gut ist. Aber für mich werde ich es so belassen. Wischen wir den roten Hintergrund ab. Nun, hier ist Lee, wo der Spaß beginnt. Wenn die Komponente die Komponenten öffnet, oder? Wir sind im zukünftigen Verzeichnis. Wir werden eine neue Komponente namens Featured Dot erstellen . Erstellen Sie die entsprechende CSS-Datei. Wir sind in der Zukunft gs. Lassen Sie uns auch die funktionale Komponente generieren. Wir müssen die CSS-Datei importieren , damit wir das nicht vergessen. Hervorgehoben, aber CSAs. Perfekt. Okay, lass uns anfangen. Geben wir diesem Div den Klassennamen featured. Okay, wir werden diesen Kerl abwischen, würden ihn abladen. Direkt in diesem Div. Wir werden ein weiteres Div mit dem Klassennamen des zukünftigen Gegenstands haben , oder? Wir sind im zukünftigen Objekt, wir werden eine Spanne mit dem Klassennamen und dem Titel haben. Und der Titel wird Einnahmen sein. Natürlich kann es alles sein, was Sie möchten, aber lassen Sie es für die Anwendung, die wir erstellen, relevant sein. Wir werden hier ein weiteres Div haben, gib ihm den Klassennamen Featured, Featured Money Container. Und den Div nachrüsten. Wir werden ein Span-Tag haben. Der Clustername wird Featured Money sein. Dann mache ich es gleich hier, wir werden noch eine Zeitspanne haben. Gib ihm einen Klassennamen. Ausgewählte Geld-Lesungen. Deshalb wollen wir hier auch ein Symbol anzeigen. Was wir als Nächstes tun werden, ist das Symbol aus dem Materialsymbol zu importieren. Hier oben. Ich werde Importe machen. Pfeil vom Materialsymbol nach unten. Okay, wir brauchen den Tastaturpfeil. Tastaturpfeil nach oben, direkt zwischen dem Bereich. Wir werden tot davonlaufen. Nahaufnahme des sich selbst schließenden Tags mit der Tastatur und lassen Sie uns den Klassennamen angeben. Hervorgehoben. Symbol hoch. Okay, der Grund dafür ist, dass ich sie anders stilisieren werde. Ja, genau deshalb wird es verschiedene Klassennamen haben. Dann haben wir hier direkt nach dem abschließenden Div eine weitere Spanne mit dem Klassennamen des zukünftigen dämonischen Containers. Dieser Typ hier drüben, hier ist die Schlußdiva. Wir werden noch eine Zeitspanne haben. Geben Sie ihm einen Klassennamen des zukünftigen Serben. Das werde ich im Vergleich zu den letzten Verkäufen machen. Nachdem wir das getan haben, müssen wir diese Komponente rendern, oder? Wir sind in der Home-Komponente. Hier. Du musst nur diesen Kerl löschen. Wir werden rendern. Zukünftige Komponenten. Haben recht. Schließen Sie es mit dem selbstschließenden Etikett und stellen Sie sicher, dass Sie es überhaupt importieren. Wenn Sie den Browser speichern und auschecken. Hier ist es. Kannst du sehen? Jetzt haben wir so etwas Zeit. Wir haben also 1234. Also, was ich jetzt tun werde, ist es dreimal zu duplizieren. Gehen Sie zurück zu Vue.js. Wählen Sie das Div mit dem Klassennamen des ausgewählten Elements und öffnen und schließen Sie das Div. Also, was ich tun werde , ist es dreimal zu duplizieren , einfach so. Und dann müssen Sie nur noch die Informationen ändern und lassen Sie mich das für Sie erledigen. Das ist der Umsatz. Das wird also der Verkauf sein. Wir können sagen, dass der Umsatz 9.000 beträgt, was auch immer. Und dann können wir das so aussehen lassen. Wir müssen das Symbol ändern oder Sie können sich entscheiden, ein beliebiges Symbol Ihrer Wahl zu verwenden . Es ist nur eine Wahl. Also werde ich für mich ein Symbol namens Trending Up Friends verwenden . Sie können sich tatsächlich all diese Symbole auf ihrer Website ansehen , okay, material ui.com, Sie können sich all diese Symbole dort ansehen. Ich möchte also nicht Ihre Zeit damit verschwenden, Sie dorthin zu bringen, denn das ist nicht wirklich wichtig da wir es direkt von hier importieren können. Hey, ich werde Trend in allen machen. Die Cs sind ziemlich hoch. Wir können den Pfeil nach oben schaffen, um mit dem europäischen Raum aufzusteigen. Also hier wird es für Rücksendungen sein. Ich werde das so machen. Ich werde das so machen. Und dann müssen wir das Symbol ändern. Sind aufwärts. Jetzt können Sie jedes der Symbole verwenden. Pfeil nach unten ist cool. Das ist kein Problem. Weil unsere Rendite nicht so hoch ist. Für den letzten werden es also die Pro-Feeds sein. Also, was ich jetzt machen werde, sind Gewinne. Schau, jeder liebt es , etwas zu verdienen. Ich sage es dir ehrlich. Und die Gewinne werden wir extrem hoch machen. Jeder liebt es, erfolgreich zu sein. Also müssen wir das Symbol nach oben ändern. Okay, gut. Nachdem wir dies getan haben, müssen wir auch den entsprechenden Klassennamen angeben. Also hier mache ich ein paar Punkte, Symbol hoch. Machen wir das negativ , weil wir sie individuell stilisieren wollen. Wir können das positiv gestalten. Ganz wie du willst. Lassen Sie mich das auch positiv formulieren. Ganz wie du willst. Wir können sagen, dass die Rendite negativ sein sollte. In Ordnung, wir sind startklar. Schau es dir im Browser an. Wir haben 1234. Perfekt. Es sieht jedoch nicht wie erwartet gut aus. Mach dir keine Sorgen. Auch in der nächsten Vorlesung, wenn wir mit der Stilisierung dieser Komponente fertig sind, werden Sie sie auf jeden Fall lieben. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 111. 109 Featured Item Css: Willkommen zurück zu den Rückrufen. In dieser Vorlesung werden wir die Komponente mit wenigen Punkten stilisieren. Halten Sie am VS-Code fest und lassen Sie uns fortfahren. Du musst also das zukünftige CSS öffnen und dann wird das abgebildete G wie gewohnt den Bildschirm aufteilen. Aber bevor wir hier weitermachen, möchte ich etwas tun. Lass mich dir diesen Div hier zeigen. Wir geben ihm einen anderen Klassennamen. Also hier wird es der zukünftige Gegenstand B sein. Dann, wo immer Sie wieder zum zukünftigen Gegenstand kommen, werden wir hier C machen. Und schließlich werden wir d machen. Also suchen wir nach einer Möglichkeit , sie anders stilisieren zu können. Mit anderen Worten, wir werden auf jeden dieser Tuffs unterschiedliche Farben auftragen . Eine weitere Sache, die wir hier tun müssen , bevor wir mit der Stilisierung der Verpflichtung fortfahren , ist, Ihnen die Symbole zu zeigen. Wir geben ihnen ClassName und wir haben das Symbol nach oben gefiltert. Ich finde das nicht gut. Sie müssen also das zukünftige Element op auswählen und den Befehl D verwenden, um alle Vorkommen abzuwählen. Ich denke, das ist alles für heute. Verschieben Sie es nun mit der rechten Pfeiltaste nach vorne, löschen Sie den Speichervorgang, und lassen Sie uns dann mit den CSAs fortfahren. Zuerst müssen wir die Zukunft stilisieren. Im Grunde wollen wir, dass dieser Typ in einer horizontalen Firma auftritt. Also, um das zu tun, komm her Punkt, Zukunft, dann wird die Breite 100 Prozent betragen. Lass uns einen Display-Flex haben. Also speichere und sieh dir die Wirkung dieses Flexes an , den wir hier verwenden. Kannst du jetzt sehen, dass alles so aussieht. Lassen Sie uns also Platz zwischen den einzelnen Elementen schaffen. Okay? Das zu tun ist extrem einfach. Begründen Sie den Inhalt, Leerzeichen zwischen dem Speichern und dem Auschecken des Browsers. Sie sehen jetzt, wir haben Platz zwischen den einzelnen Elementen. In Ordnung, es erscheint bereits wie erwartet. Schau, wir müssen es nur schöner machen. Der nächste Eintrag in der Reihe ist der zukünftige Artikel. Markieren und kopieren Sie, kommen Sie her, Punkt gefilterter Artikel. Dann lassen wir es einen Flex One. Der Rand hat null Pixel, zwei Pixel, dann die oberen zehn Pixel des Randes. Polsterung. Für epische Zwecke. Der Randradius beträgt zehn Pixel. Das Kausale. Also eines Tages bewegt der Benutzer die Maus und schon wird es einen Zeiger von einem herrlichen vorher zeigen, oder? Ja. Und die Hintergrundfarbe. Ich werde Anticline Hide verwenden. Ordnung, wenn Sie den Browser speichern und auschecken, werden Sie sehen, dass das, oops, 30 Pixel sein sollten. Nochmals speichern und zurück gehen. Also, was wir hier als Lee haben werden, ist eine schöne dünne Linie, um den Boxschatten zu spezifizieren. Und natürlich können Sie es im Internet veröffentlichen, indem Sie die Box-Shadow-Website besuchen. Dann können Sie Ihr eigenes Urteil fällen und den passenden Box-Shadow verwenden den passenden Box-Shadow , der für Ihre Bewerbung geeignet ist. Für mich. Noch einmal. Ich werde einfach kopieren und einfügen, weil ich es schon im Kopf habe. Also das ist es für den Fall, dass du meinen eigenen Box Shadow verwenden möchtest . So, nur solche Werte. K. Also, was ich jetzt tun werde, ist das zu markieren und dann zu duplizieren. Hier nenne ich es gefiltertes Objekt B. Markieren Sie erneut diesen duplizierten Typ. Dies wird der vorgestellte Artikel C sein. Schließlich wird dieser Artikel gefiltert . Wenn Sie den Browser speichern und auschecken, sollte jetzt alles gut aussehen, perfekt. Das ist das erwartete Ergebnis, aber jetzt müssen wir nur noch die Farben ändern. Für den Fötus. Punkt B, die Hintergrundfarbe wird aquafarben gefiltert. Punkt C. Die Hintergrundfarbe wird violett sein. Dann wird die Fehde bei Punkt D der Hijab-Ersatz sein. Natürlich wusstest du, wie sehr ich diese Da Jia Bu liebe. Und ich hoffe, du kannst alles klar sehen. Hat mir gesagt, ob du klar siehst oder nicht. Okay, du kannst es deutlich sehen. Ist in Ordnung. Schauen wir uns den Browser an. Wunderschön. Ich liebe es. Ordnung, konzentrieren wir uns also auf die Schriften. Gerade jetzt. Wir werden die Zukunft zum Titel stilisieren. Die Schriftgröße beträgt nur 20 Pixel. Es ist nicht zu viel. Dann der gefilterte Geldcontainer, dieser Typ hier drüben. Stellen Sie sich zehn Pixel vor, null Pixel. Wir werden einen Display-Flex haben. Und dann richten wir die Elemente zentriert aus. Das Nest ist die Zukunft des Geldes. Und bitte, so wie ich diese CSS-Datei organisiere, solltest du meinem Beispiel so folgen. Es wird dir in Zukunft auf jeden Fall helfen. Die Schriftgröße beträgt 30 Pixel. Die Schrift Weeds ist fett gedruckt. Die zukünftige Margaret, hoppla, sieh dir an, was ich hier gemacht habe. Leute, hört mal, ich nehme um neun auf, also müsst ihr mich bitte anziehen. Was ich jetzt also tun werde, ist, alle zukünftigen Lungenentzündungsraten aufzuzeigen. Befehl D, um deinen Multicore auszuführen. Also die Bearbeitung, bei der normalerweise alle Vorkommen ausgewählt werden. Ich muss nur meine Maus hierher bewegen und das dann so machen. Kopieren. Lassen wir es Flex anzeigen. Lassen Sie uns die Elemente mittig ausrichten. Die Farbe, die die Farbe der Schrift ist. Lass es uns grün machen. Dann wollen wir das zukünftige Symbol negativ machen , es wird die Farbe Rot haben. Und dann die Futura-Schriftgröße Futura-Schriftgröße beträgt die Futura-Schriftgröße 15 Pixel. Die Farbe. Stimme zu. Speichern Sie und lassen Sie uns sehen , was wir jetzt haben. Perfekt, so einfach und nett. Ich liebe diese. Sie können also einige der Farben ändern, wenn Sie möchten. Aber für mich bin ich Qu und damit zufrieden. In Ordnung? Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 112. 110-Diagrammkomponente: Willkommen zurück zu den Rückrufen. In dieser Vorlesung werden wir die Chat-Analytik implementieren. Und natürlich wird es so interessant sein. Mach dir keine Sorgen. Es ist ganz einfach, das zu tun. Also gerate überhaupt nicht in Panik. Klicken Sie schnell auf VS-Code und fahren Sie weniger mit Heron zum VS-Code fort. Zuerst müssen wir die Waldstruktur und alles, was dazugehört, einrichten . Öffnen Sie also die Komponenten und schreiben Sie in das Chats-Verzeichnis. Wir werden eine neue Datei namens charts dot js erstellen. Erstellen Sie schnell die entsprechende CSS-Datei. Stimmt es? Innerhalb der Haushaltskomponenten. Wir werden das Diagramm G rendern. Aber vorerst müssen wir die funktionale Komponente generieren und weiter zum Haus G ist gleich hier drüben. Wir werden ein Div haben, geben Sie ihm den Klassennamen des analytischen Widgets von Chats. Stimmt es? Wir sind im Div, wir werden die Diagrammkomponente mit dem sich selbst schließenden Tag näher rendern Diagrammkomponente mit dem sich selbst schließenden Tag näher und sicherstellen, dass sie oben importiert wird. Lassen Sie uns schnell Stile auf die Chat-Analytics-Widget-Klasse anwenden . Helen nach Hause sss dot chat analytics lehnt ab. Was wir tun werden, ist Display Flex. So einfach ist das. Stimmt es? Jetzt sind wir mit dem Setup fertig. Es ist Zeit, mit der Chat-Analyse fortzufahren. Für eine Chat-Analyse verwenden wir eine externe Bibliothek namens Recharge. Und hier ist es. Also heroin to reach out.org, wir können die Anleitung öffnen und dann ist genau so installiert man Retards. Was ich jetzt auf dem Terminal tun werde , ist npm install retards to VS Code und dann Control C, um den aktuell laufenden Server zu stoppen. Npm install, erreichen Sie Anzeigen wie diese. Aber obwohl ich es bereits installiert habe, mache ich das nur, um Ihnen genau zu zeigen, wie Sie es installieren. also während der Installation Lassen Sie uns also während der Installation erneut Kontakt aufnehmen und dann auf Beispiele klicken. Also werden wir zuerst diese Daten aus Zeilen für zwei Zeilen kopieren , 47, kopieren. Komm her, gehe zum Chat GS Command B, um den Explorer zu schließen. Und dann müssen wir die Daten hier einfügen. Das sind also die Daten, die wir verwenden werden. Gehen Sie auch hierher zurück, wir müssen diese Importe kopieren. Aber tun Sie das, wir werden einige unnötige Eingaben löschen . Komm her an die Spitze. So wie das. Richard hat erfolgreich installiert. Es ist an der Zeit, dass das Mikrofon nicht mehr in den Charts ist. Gehen Sie wieder zurück zu den Ablesungen , um zur API zu gelangen. Und wir wollen die Flächendiagramme verwenden. Sie können jeden beliebigen Chat verwenden. Aber in diesem Kurs und zum Zwecke unserer Verpflichtung werden wir dieses Diagramm verwenden. Wir müssen also nur aus dem Eröffnungsbereich das Chat-Tag und das abschließende Tag kopieren , markieren und kopieren. zum VS-Code zurück, wählen Sie die Def aus, wischen Sie sie ab und fügen Sie sie dann ein. Wenn Sie also die Anwendung speichern und ausführen, wird sie sich definitiv beschweren, warum es einfach daran liegt , dass wir die Bereichs-Chats oben importieren müssen. Lassen Sie uns also diese unnötigen Eingaben abwischen. Importiert die Flächendiagramme und wir müssen auch Fläche einfach so importieren. Und die Legende hier besteht aus unnötigen Eingaben. Der Responsive-Container wird also in Zukunft verwendet. Also werden wir es nicht löschen. Das K. Nice. Unser Recht. Formatieren wir den Code, shift f, formatieren wir den Code. Und jetzt haben wir die richtige Einrückung. Okay, lassen Sie uns die Anwendung schnell erneut ausführen. Mpm-Statistiken. Hier ist die Chartanalyse. Mach dir keine Sorgen. Wir werden es mit unseren eigenen Daten abbilden. Jetzt haben wir also das Y und das X. Sind das. Kehren Sie zum VS-Code zurück und lassen Sie uns die Dinge richtig machen. Als Erstes ändern wir die Daten hier, den Namen, wir wollen, dass es ab Januar beginnt. Hier werden die Ausgaben sein. Das werden Renditen sein. Und hier werden wir es noch schwerer haben, oder? Du kannst hier also eigentlich angeben, wo du hinwillst, aber so soll es sein. Für den Namen wird es wieder Februar geben. Das wird teuer. Leute. Ich denke, du kannst mit dem subtilen Ende weitermachen. Das werden Renditen sein. Das wird total sein. Und du musst hier eine Kolumne platzieren. Sie müssen also nur die gesamten Daten ändern. Aber für mich habe ich all diese Daten bereit. Also werde ich einfach kopieren und einfügen. Wenn Sie diese Daten also kopieren möchten, müssen Sie nur zu den niederländischen Materialien gehen. Und dann wirst du all diese Tabs hier finden . Ich habe die Daten entsprechend angeordnet, sodass Sie das Video aufnehmen, pausieren und meins eingeben können , wenn Sie möchten. Also lass es mich langsam spielen. Kannst du sehen, dass du das Video pausieren kannst. Sie können also einfach all das Zeug hier eingeben , es ist ziemlich einfach. Jetzt müssen wir hierher zurückkommen. Die Breite unserer Diagramme wird 30 sein, die Höhe wird 350 betragen. Und bumm, Quaste von den oberen zehn, rechts ist 30, links ist Null und unten ist Null. Wir sind damit einverstanden. Es gibt überhaupt kein Problem. Aber eine weitere Sache, die wir tun werden ist den Linienverlauf hinzuzufügen, und das ist dieser Typ hier drüben. Okay? Nochmals, genau hier, werde ich all diese in die Dash-Materialien einfügen . Genau hier werden einige der Dinge angezeigt. Kopieren Sie das und duplizieren Sie es dann nur einmal. Der Datenschlüssel hier wird die Ausgaben sein. Und hier wird der Datenschlüssel zurückgegeben. Also zeichnen wir das Diagramm gerade mit unseren eigenen Daten. Hier wird der Datenschlüssel vollständig sein. Genau das, was du hier hast. Ausgaben, Rücksendungen an Tau. Okay? Alles ist richtig. Rücksendungen. Perfekt. Lass es uns im Browser herausnehmen. Könnt ihr richtig sehen, ich möchte, dass die Retouren rot erscheinen. Wir müssen zurückgehen und etwas dagegen tun. Sehen Sie also, dass die Renditen hier bei der Verwendung von Farb-PV liegen, bei dem es sich um diesen linearen Gradienten handelt. Und das ist der lineare Gradient, den wir selbst erstellt haben. Dies wird also auf die Rücksendungen angewendet. Und die ID heißt RV Copy. Dann zu den Rücksendungen hier, wir werden Color RV machen. Wenn Sie den Browser speichern und auschecken. Kannst du sehen, dass alles wie erwartet gut aussah? Aber es ist nicht gut ausgerichtet als Sorge. In der nächsten Vorlesung werden wir CSS verwenden, um den Job zu beenden. Aber lassen Sie uns vorerst ganz oben kurz eine Zusammenfassung von VS Code machen. Um das Diagramm nutzen zu können, müssen wir zunächst eine externe Bibliothek namens retards installieren. Und dann wird all dies aus dem Einzelhandelsmodul importiert. Die Fläche, das Flächendiagramm, X-Achse, Y-Achse und vieles mehr. Das sind also die Daten, die wir verwenden werden, um das Diagramm zu zeichnen. Also hier haben wir den Namen und der Name wird auf der X-Achse stehen. Lass es mich dir schnell zeigen. Kannst du sehen, hier ist die X-Achse. Hier haben Sie also Januar, Februar, März, April, Mai, Juni bis Juli. Der Rest dieser Daten wird also auf den X- und Y-Achsen aufgetragen. Und deshalb kannst du sie hier sehen. Das ist also alles für die Daten. Und hier haben wir die Behinderten wiedererkannt. Und dann geben wir ihm eine Breite seiner Fetthöhe von 350. Und dann sind die Daten hier die Daten, die wir verwenden wollen, und das ist dieser Typ. Lassen Sie mich Ihnen diese Daten hier zeigen. Also wenn ich es Data Be nenne, muss ich auch hierher kommen und es TBI nennen. Wenn Sie dem Browser Ventrikel sagen, wird es dasselbe sein. Korrekt? Sie können es also so belassen oder Entität einfach anhand der Standarddaten beobachten. Jetzt hier bei den Gradientenfarben. Das hängt also tatsächlich von dir ab. Ich persönlich habe diesen Farbverlauf selbst erstellt, weil ich wollte, dass die Rückseiten rot erscheinen. Also muss ich diese roten Gradientenspalten selbst erstellen. Aber dieser, der grüne und der andere Typ, der hier drüben auftaucht, ist eine Art Standardfarbe von Rachel. So können Sie mehr Farben erstellen und mehr Details hinzufügen. Dann ist das die X-Achse. Die X-Achse verwendet den Datenschlüssel des Namens , also Januar, Februar, März, April, Mai bis Juli. Also haben wir den Namen auf der X-Achse aufgetragen. Also hier ist die Y-Achse. Und dann haben wir die beiden Zähne, eigentlich den Tooltip. Lass es mich dir schnell zeigen. Wenn ich meine Maus darauf setze, helfen die beiden Zähne, die Informationen anzuzeigen. Also wenn du es z.B. ausziehst und speicherst, schauen wir mal, was passiert. Jetzt. Kannst du sehen, wenn du deine Maus darauf setzt, bekommst du die Details nicht mehr. Stimmt. Es ist also eine Art von TBS. Es gibt Ihnen Tipps, wie sich das Diagramm an einem bestimmten Punkt befindet. Können Sie an dieser Stelle sehen, die Kosten betragen 1.200, dann ist die Rendite 23.300, der einfachste Punkt. Und hier hast du den Typ, monoton zu sein. Daten zu den wichtigsten Ausgaben. Hey, streiche den Strich in dieser Farbe. Und dann ist die Füllundurchlässigkeit eins. Die Kraftstoff-URL, in diesem Fall die Farbe, die Sie verwenden möchten, ist also in diesem Fall die Farbe, die Sie verwenden möchten, ist Farb-ID für den Farbverlauf, die wir erstellt haben. Es ist also so einfach wie a, B, C. Und fürs Erste sage ich, passt auf euch auf und wir sehen uns in der nächsten Vorlesung. 113. 111 Chart Css: Die Chat-Analytik sieht schon extrem gut aus. Aber lassen Sie uns sehen, ob wir etwas tun können , um es perfekter auszurichten . Denn wie Sie sehen, gibt es keinen Abstand zwischen der Datenanalyse und den Feature-Informationen. Lassen Sie uns also schnell zu VS Code hinzufügen. Und bitte stellen Sie sicher, dass Sie die CSS-Datei importieren, richtig, um die Diagrammkomponente einzufügen. diese Weise verknüpfen Sie Ihre CSS-Datei mit der Komponente. Direkt in der Benutzeroberfläche. Wir werden hier ein Div machen. Geben Sie diesem Div den Klassennamen eines Chartcontainers. Die Anwendung beschwert sich also einfach, weil Sie das GSS-Element nicht außerhalb des übergeordneten Knotens haben können . Markieren wir also einen Reaktor, um das abschließende Tag, Präzedenzfall und die Alt-Taste auf Ihrer Tastatur zu markieren, und tippen Sie dann auf die Aufwärtspfeiltaste, um ihn in dieses Div mit dem Klassennamen Chad-Container zu verschieben . Und schnell müssen wir dieses Div stilisieren, das Chat-CSS öffnen. Dann machen wir es hier flexibel. Geben wir ihm eine Polsterung von zehn Pixeln. Und jetzt sehen Sie den Abstand zwischen dem oberen Rand. Der obere Rand beträgt 30 Pixel. Speichern Sie und lassen Sie uns das überprüfen. Stimmt. Jetzt ist es gut ausgerichtet. Wir haben ein Leerzeichen zwischen dem Diagramm n, den zukünftigen Informationen. Die westliche Linie dient zur Angabe des Boxschattens. Das ist also mein eigener Box-Shadow. Du kannst dich dafür entscheiden, lass mich dir schnell etwas zeigen. Schalten Sie das Internet ein. Also hier müssen Sie nur den Box-Shadow-Generator einstellen. Hier ist es? Kannst du hier sehen, dass du deinen eigenen Box-Shadow erstellen kannst. In Ordnung, also, ja, so viele speichern den Code. Kannst du sehen, dass alles einwandfrei funktioniert. Wenn wir also anfangen, auf der rechten Seite des Bildschirms zu arbeiten, werden Sie ihn in einer sehr guten Form sehen. Wir sehen uns in der nächsten Vorlesung. 114. 112 Style: Ordnung, bevor wir mit dem Abschnitt „Gesamtsumme anzeigen“ fortfahren , müssen wir einige Einstellungskonfigurationen vornehmen. Und es ist extrem einfach. Gehen Sie also schnell zu den Dash-Materialien, die sich direkt darin befinden. Du musst nur das öffnen , das könnte helfen. Dann werden wir dieses Tau-Highlight kopieren. Kopieren. Gehen Sie zurück zum Recodieren, öffnen Sie den Indexpunkt HTML. Dann müssen wir nur noch einen Ort finden, an dem wir die Einstellungen einfügen können. In Ordnung, lass es uns hier machen. Fügen Sie ein und speichern Sie dann. Warten wir nun ab, um das Ergebnis besser zu sehen. Ich liebe es so. In dieser Vorlesung werden wir also mit der Anzeige der Tau-Komponente fortfahren. Wir sehen uns dann. 115. 113 Gesamtkomponente anzeigen: Fahren wir mit der Anzeige zur Tau-Komponente fort. Gehen Sie also schnell weiter, um den kreisförmigen Fortschrittsbalken zu reagieren. Und hier ist die Adresse. Sie können auch nach dem kreisförmigen React-Fortschrittsbalken suchen. Hier, ist es? Hier drüben? auf dieser Seite werden Sie einen anderen Fortschrittsbalken sehen Direkt auf dieser Seite werden Sie einen anderen Fortschrittsbalken sehen. Der erste Schritt, den wir unternehmen werden, ist die Installation des kreisförmigen Fortschrittsbalkens von React. Folgen wir also dem Rat. Wenn Sie also Yum verwenden, ist dies der richtige Rat für Sie. Und wenn Sie MPM verwenden, finden Sie hier die Ratschläge für Sie. Also, was ich tun werde , ist diesen Rat oder diesen Befehl zu kopieren und dann zu VS Code zurückzukehren. Lass uns das schließen. Steuern Sie C, um das aktuelle Neuron im Server zu stoppen. Dann muss ich nur diesen Rat oder diesen Befehl hier einfügen . Drücken Sie die Enter-Taste, um es zu starten. Installiert. Erfolgreich. Wunderschön. Also öffne den Explorer, schließe den Chat, Jess, drücke Befehl B, um den Explorer zu öffnen . Und dann öffnen Sie die Komponente, in der unser Verzeichnis angezeigt wird. Wir werden eine neue Komponente namens Split Hotel Dossiers erstellen . Erstellen Sie die entsprechende CSS-Datei. Gehen wir zum Split-Hotel-RFC , um die funktionale Komponente zu generieren. Gut. Lass es uns schnell rendern, richtig, wir sind zu Hause. Dann gehen wir in dieses Div mit dem Klassennamen Charles Analytic Widget. Es wird direkt unter dem Diagramm angezeigt. Dann mache ich das Hotel in Split. Und bitte stellen Sie sicher , dass Sie es oben importieren. Speichern. Lassen Sie uns nun fortfahren. Wir beginnen damit, diesem Div den Klassennamen display container zu geben . Stimmt es? Wir sind im Div. Wir werden ein weiteres Div mit dem Klassennamen top haben . Und dann werden wir direkt im Inneren ein H1-Tag haben. Und die mache ich für den Gesamtumsatz. Geben Sie auch den Klassennamen an. Wir werden den Titel direkt vor diesem Div mit dem Klassennamen top machen . Wir werden einen weiteren Div haben. Gib ihm einen Klassennamen von Bhutan, oder? Um das Div mit dem Klassennamen unten zu bringen, werden wir ein weiteres Div mit dem Klassennamen des Featurecharts haben . Direkt darin müssen wir den React-Fortschrittsbalken anzeigen. Und um das zu tun , müssen wir es zuerst auf einmal importieren. Ich werde den zirkulären Fortschritt importieren mit dem auch Kinder aus dem React-Zirkularfortschrittsbalken arbeiten. Wir müssen einen weiteren namens Build Styles importieren. Nachdem wir das getan haben, importieren wir auch die Stile. Also, was ich tun werde , ist zur Webseite zurückzukehren. Hier sind eigentlich die Eingaben, aber ich benutze den kreisförmigen Fortschrittsbalken. Ich benutze den kreisförmigen Fortschrittsbalken bei Kindern. Also muss ich nur diese Eingabe für die Styles kopieren. Komm her, füge es ein, oder? So wie das hier. Perfekt. Lassen Sie uns nun beginnen, den säkularen Fortschrittsbalken zu verwenden. Also richtig, in diesem Div mit dem Klassennamen Zukunft werden wir den zirkulären Fortschritt mit Kindern umsetzen. Schließ es. Was ist das selbstschließende Etikett? Stimmt es? Innerhalb des Werts wird es 80 sein. All das Zeug. Sie können also auch direkt von der Seite kopieren, aber ich möchte nur meine eigenen Informationen angeben damit wir weitermachen können , was Sie wollen. Aber es ist gut. Du folgst meinem Beispiel. Der Test-Acquirer. Okay. Wir werden die Bockzähne direkt in den lockigen Klammern verwenden . Dann. Wir nehmen AT und außerhalb der lockigen Klammer gebe ich Prozent an. Das wird also die 80 Prozent zeigen, oder? Wir befinden uns im säkularen Fortschrittsbalken. Sorge, ich zeige dir in einem GeV die Strichstärke. Machen wir zehn Stile daraus. Jetzt müssen wir die Build-Stile verwenden. Kupplung, Klammern schließen, geschweifte Klammer öffnen und schließen. Ich mache Strich, Linienkurve. Das wird ABER t sein, einfach so, du kannst es aber nennen, aber ich weiß sowieso nicht, wie man das ausspricht. Dann wenn du speicherst und schauen ob wir etwas im Browser angezeigt haben. Und im Browser. Okay, das ist also der Prozentsatz, den ich zu erklären versucht habe. Dann ist hier der Fortschrittsbalken, hier ist der Titel für die Einnahmen der Stadt. Lassen Sie uns also die notwendigen Details hinzufügen und es extrem gut aussehen lassen. Vs-Code. Also gleich nach diesem Div mit dem Klassennamen zukünftiger Chats werden wir ein P-Tag haben. Geben wir ihm einen Klassennamen oder einen Titel. Also all das Zeug, ich glaube, du solltest es verstehen. Ich muss hier nichts erklären. Sie wissen bereits, was das P-Tag ist. Bearbeitung früherer Transaktionen. Koma, die letzte Zahlung wird möglicherweise nicht berücksichtigt. Dann musst du das P-Tag schließen. Das einfachste, richtig, Mal sehen, wie es im Browser angezeigt wird. Okay, hier sind die Sorgen. Wir werden anfangen, dies hart zu stilisieren und Sie werden es auf jeden Fall lieben. Formatieren wir den Code dass wir jetzt die richtige Einrückung haben. Hier. Wir werden ein Div mit dem Klassennamen Summary haben, oder? Wir sind in diesem Div, wir werden einen weiteren Div haben. Gib ihm einen Klassennamen. Nicht zum Artikel, richtig? Wir sind im Artikel. Wir haben auch ein Div. Geben Sie ihm einen Klassennamen oder einen Titel des Anzeigeelements. Hier haben wir ein weiteres Div, den Klassennamen des Elements aufgelöst. In diesem Div werden wir also einige Symbole anzeigen, um tatsächlich auf ein Negativ hinzuweisen. Also geh nach oben. Natürlich, weißt du, wir holen unsere Icons von, wir holen unsere Icons von, werden die Tastatur mit dem Pfeil nach unten aus der Material-UI importieren . Hier. Genau hier. Wir werden mieten ist gut. Sie schließen es mit dem selbstschließenden Etikett. Lassen Sie uns nun die Größe des Unternehmens angeben. Wir werden ein weiteres Div haben, geben Sie ihm einen Klassennamen mit der Ergebnismenge 15, 73. Okay, gut. Also kopieren wir jetzt das Div für den Klassennamen des Elements und duplizieren es dann zweimal. Was wir jetzt tun werden, ist die Details zu ändern. Das wird letzte Woche sein. Lassen Sie uns tun, dass wir diese auch positiv gestalten können. Weil es positiv ist, wird der Pfeil nach oben gehen. Also müssen wir zu den Symbolen zurückkehren und dann die Tastatur importieren. Okay, also auch hier werden wir es positiv machen, genauso wie positiv sein. In Ordnung, ich werde das Ziel hier so machen. Lass uns das machen, was du willst, dann weißt du, dass das nur ein vorübergehendes Detail ist. Also hier werde ich Tastatur spielen. Okay, ich denke, wir sind startklar. Bitte achten Sie darauf, den Code mit zu formatieren. Siehst du, jetzt haben wir richtige Einbuchtungen. Wenn Sie speichern und zum Browser zurückkehren. Hier, kannst du sehen, dass wir das Display komplett bereit haben? Aber jetzt sieht es nicht so schön aus wie erwartet. Und natürlich, weißt du, in der nächsten Vorlesung werden wir es auf jeden Fall nett machen. Wir sehen uns in der nächsten Vorlesung. 116. 114 Styling insgesamt: Lassen Sie uns fortfahren, die Gesamtkomponenten des Displays zu stilisieren. Fahren Sie mit dem VS-Code fort. Öffnen Sie schnell dieses Split Hotel Dot CSS. Und bitte, bevor wir fortfahren, müssen wir es nur verknüpfen , damit wir nicht vergessen, das in Zukunft zu tun. Importiere CSS mit Schrägstrichen. So einfach ist das. Wie üblich werden wir den Bildschirm wie folgt abgrenzen. Stimmt es? Beginnen wir mit der Anzeige des gesamten Containers. Kopieren. Komm her. Wir werden es an den Rand anpassen, oder? 15 Pixel Lassen Sie uns den Boxschatten spezifizieren. Also kopiere ich einfach den, den ich hier verwenden werde. Und ich habe dir gesagt, dass du im Internet nach Box-Shadow suchen kannst im Internet nach und dann wirst du auf eine Website weitergeleitet, auf der du, du weißt schon, selbst Stopps machen kannst . Sie müssen sich diese Ränder, die oberen 20 Pixel und den Randradius also nicht merken . Wir wollen, dass es ein bisschen am Rande ist. Driftpixel würden das also tun. Wenn Sie den Browser speichern und auschecken. Wunderschön. Jetzt hat es die erwartete Form angenommen. Kannst du sehen, wie richtig? Lassen Sie uns also den Rest der Artikel stilisieren. Die nächste Termzeile ist die oberste Zeile. Wir werden ein Display haben, Flex. Elemente ausrichten, zentrieren. Richten Sie den Inhalt aus und platzieren Sie ihn gleichmäßig. Deshalb wollen wir, dass die gesamte Spezies gleich ist. Und das ist, wenn Sie den Raum gleichmäßig nutzen. Ich denke, das weißt du inzwischen, die Farbe, du weißt natürlich, was eine gerade Zahl ist, oder? Mach es grau. Sieben Tickets für den Browser. Schau es dir an. Kannst du perfekt sehen. Western Line ist der Titel, und das ist dieser Typ überhaupt. Dann geben wir ihm eine Schriftgröße von 15 Pixeln. Die Schrift Weizen. Machen wir es mutig. Okay, lassen Sie uns das herausnehmen, um zu sehen ob wir die erwarteten Ergebnisse erzielen. Sind. Das ist zu klein. Machen wir es zu 18 Pixeln. Okay, jetzt ist es gut. In Ordnung. Der nächste in der Reihe ist der untere. Lass mich dir den Kerl hier zeigen. Die Polsterung. 20 Pixel zeigen Biegung und Biegerichtung an. Also wollen wir es von oben nach unten. Und ich werde eine Kolumne machen. In Ordnung, ich hoffe du verstehst deine Flexbox. Richten Sie Elemente zentriert aus und richten Sie den Inhalt aus. Zentrum. Dann die Lücke. Machen wir 14 Bilder draus. K. Diese Komponente nimmt allmählich Gestalt an. Als nächstes folgt das Zukunftsdiagramm. Dieser Typ hier. Wenn wir damit fertig sind, sollte alles gut aussehen. Lassen Sie uns die Breite angeben. 100 Pixel, die Höhe 100 Pixel. Gut. Kannst du sehen? In Ordnung, lass uns weitermachen. Die nächste Zeile ist der Titel. Wir werden einen Betrag machen. Lass mich dir den Kerl hier zeigen. Dann. Geben Sie ihm eine Schriftgröße von 30 Pixeln. Jetzt müssen wir die Beschreibung stilisieren. Font Weeds ist 300. Die Schriftgröße. Um Bilder zu haben, ist die Farbe grün. Text ausrichten, zentrieren, speichern und sehen wir uns an, wie die Beschreibung jetzt aussieht . Es sieht gut aus. Das Nest ist die Zusammenfassung. Die Breite. Machen wir es zu 100% Wir werden einen Display-Flex haben. Richten Sie dann die Elemente zentriert aus. Begründen Sie den Inhalt. Raum zwischen Verbrauchern und Raum zwischen den Haltestellen. Wenn Sie sich also den Browser-Bone ansehen, können Sie sehen, dass alles allmählich Gestalt annimmt. Lassen Sie uns also schnell mit der Gesamtanzeige fortfahren. Der nächste ist der Artikel. Und bitte folgen Sie meinem Beispiel, wie ich das CSS salze. Es wird dir in Zukunft definitiv helfen, damit du die vorhandene CSS-Klasse nicht zerstreuen musst. Wenn du das tust, wirst du Zeit brauchen , um nach einer bestimmten Klasse zu suchen, vielleicht wenn du das Projekt in Zukunft noch einmal stylen möchtest . Aber wenn Sie es so machen, können Sie es leicht bekommen, wenn Sie danach suchen. Wir testen eine Linie zur Mitte. Ich denke, wir sollten es einfach hochfahren. Okay. Als nächstes folgen die Artikelergebnisse. Lassen wir es Flex anzeigen. Elemente ausrichten. Mitte, der Rand oben, okay, von oben, lassen Sie uns zehn Pixel haben, reichen dafür aus. Dann die Schriftgröße. Machen wir es zu Theta1-Pixeln. Wir müssen das Negative stilisieren und das Positive wird das kopieren. Wenn es nun positiv ist, wollen wir die Farbe Grün zeigen. Und natürlich, wenn es negativ ist, oder? Wir wollen Farbe Rot zeigen. Wenn es negativ ist. So einfach ist das. Menschenmenge. Schau es dir an. Alles ist gut ausgerichtet und es sieht sehr schön aus. Magst du das nicht? Ich liebe es. In Ordnung, jetzt haben wir unser Display insgesamt in einem guten Zustand. Das ist jetzt aus. Und in der nächsten Vorlesung werden wir die Widgets erstellen. Wir sehen uns in der nächsten Vorlesung. 117. 115 Order Widget: In dieser Vorlesung beginnen wir mit der Erstellung der Komponente „ Reihenfolge, in der wir gemacht haben“, bei der es sich um die neueste Transaktionstabelle handelt, schnell zu VS Code übergehen und weniger fortfahren. Richtig? Wir sind in der Reihenfolge, in der wir das Verzeichnis erstellt haben. Wir werden die Bestellung Widget Company erstellen. Hey, ist es Rechtsklick Neue Datei. Bestellt den Widgetpunkt g RFC, um die funktionale Komponente zu generieren Lassen Sie uns schnell die entsprechende CSS-Datei erstellen. Als Nächstes verknüpfe ich meine Komponente mit der CSS-Datei, damit wir in Zukunft nicht vergessen, CSS mit einem Schrägstrich einzugeben. Und bitte nimm Kleidung mit. Das ist in einem Kleinbuchstaben. Wunderschön. Öffne schnell das Home-GAS und lass es über ein rendern. Also direkt nach dem schließenden Div von ClassName, Chat-Analyse-Widget, werden wir ein weiteres Div haben, geben ihm einen Klassennamen der Reihenfolge, ein Member-Widget. Richtig? In diesem Div werden wir das OBJ näher am sich selbst schließenden Tag rendern das OBJ näher am sich und tun Sie bitte gut daran, es oben zu importieren. Ich weiß nicht, ob der Code sauber ist, also muss ich nur zoomen. Ich denke, es ist zu groß. Okay, lass es uns so belassen. Speichern Sie so schnell und formatieren Sie den Code mit Prettier. Gut. Bevor wir also damit fortfahren, es im Browser zu überprüfen, müssen wir dieses Div mit dem Klassennamen von Order und dem Member-Widget, home sss dot, stilisieren dieses Div mit dem Klassennamen von Order und . Und dann werden wir hier Flex anzeigen. Geben Sie ihm einen Rand von 30 Pixeln und Knochen. Wenn Sie speichern, schauen Sie sich den Browser an. Nun, die Reihenfolge, in der wir die Komponente gemacht haben. Lassen Sie uns anfangen, daran zu arbeiten. Wir sind fertig mit dem Home, also schließen Sie es und fahren Sie dann mit der Bestellung des Widgets dot js fort. Lassen Sie uns diesem Div schnell einen Klassennamen dieses Containers geben , oder? Im Bestellcontainer werden wir ein Hashtag haben, um den Titel anzuzeigen. Geben wir ihm also zuerst einen Klassennamen oder einen anderen Titel. Dann mache ich die letzte Transaktion. Wenn Sie den Browser speichern und auschecken. Hier, ist es? Richtig? Wir sind in dieser Division. Wir werden auch einen Tisch haben. Geben Sie der Tabelle einen Klassennamen der Ordnungstabelle. Also richtig, wir sind in der Tabelle. Wir werden die Tabellenrolle haben, das ist die TR. Geben Sie ihm einen Klassennamen der Ordnung t sind Rechtshänder. Tr. Wir werden die Tabellenüberschrift haben. Sie geben hier den Klassennamen der Reihenfolge t an diesen anderen Tabellenkopf. Dann sind wir im inneren HTML. Wir machen Kunde, okay, markieren und duplizieren es fünfmal. Hier werden wir es so ändern. Im Grunde arbeiten wir also nur an der Tabellenüberschrift. Liebeskurs. Wenn wir fertig sind, werde ich es dir im Browser zeigen. Wenn Sie im Browser speichern. Diese, können Sie Kundendaten, Produkt, Betrag, Standort oder Status sehen ? Ups. Leute, ihr müsst grammatikalisch Exit Status Knights sein. Die nächste Zeile besteht also darin, die Tabellendaten zu erstellen. In Ordnung, damit wir die Tabelle mit einigen Details ertasten können. So wie es so aussah. Hier ist der Tabellenkopf und dies sind die Tabellendaten. Stimmt, wir sind im abschließenden TR-Tag. Wir nehmen noch ein T, R. Und das wird für die Tabellendetails sein. Geben Sie ihr einen Klassennamen der Ordnung t, r. Und dann haben wir direkt darin ein Td, das sind die Tabellendaten. Geben Sie den Klassennamen von Or the user IMD als RC an, da wir das Bild des Produkts anzeigen möchten. Bevor wir also mit dem schlimmsten Code fortfahren, müssen wir die Bilder mit Befehl B importieren, um den Explorer zu öffnen und dann die Öffentlichkeit zu öffnen. Jetzt müssen wir den VS-Code minimieren. Führen Sie zwei Dash-Materialien aus. Wir haben die Bilder, die wir in diesem Kurs verwenden werden. Ziehen Sie es per Drag & Drop dorthin, wo sie wahrscheinlich das Maximum herausholen möchten. Öffne die Bilder. Hier haben wir das Mitgliederbild, das ist das Bild, das wir verwenden werden, um es auf der Mitgliedertabelle anzuzeigen. Und hier haben wir das Produkt IMG, das sind die Produktbilder, z. B. haben wir den Kopfhörer. Ich weiß, dass du dieses Bett verstehst. Schließ es. Und dann ist SRC gleich vier. Wir müssen die Bilder referenzieren. Slash-Produkte, IMG Slash-Kopfhörer. Kopfhörer ist eines der Produktbilder, die wir mit einem selbstschließenden Etikett über dem Schrank haben , und dann ist der Ausgang die Alternative. Wenn dieses Bild also nicht geladen wird, werden wir Internetprobleme haben. Wenn dieses Bild also nicht im Browser erscheint, die Alternative, nämlich wird die Alternative, nämlich dieser Typ hier drüben, angezeigt. Und geben wir ihm den Klassennamen IMG, so einfach ist das, speichern und schauen wir es uns an. Genau hier ist perfekt, Leute. Alles sauber, aber nicht so sauber wie erwartet. Ich habe nicht an dem Bild gearbeitet. Jetzt werden wir an den restlichen Details arbeiten. Hier nehmen wir noch einen TD. Gib ihm den Klassennamen O'Donnell. Gleich nach dem letzten Tag des T D werden wir noch einen TD haben. Geben Sie ihr einen Klassennamen der Reihenfolge d. Hier haben wir also den 4. Januar 2023. Dies ist nur ein imaginäres Datum. Sie können also beschließen, den Titel zu ändern und ihn viermal zu duplizieren. Älterer Name, Betrag oder dieser Ort oder dieser Status. Nehmen wir also an, dieser Typ bestellt bei USC und dann ist der Status so, wie Sie ausgeben. Jetzt werden wir also Bestellungen mit unterschiedlichem Status haben. Also werden wir die einmaligen Ausgaben für Aufenthalte ablehnen und genehmigen lassen. Lassen Sie mich Ihnen zeigen, wie Sie diese Funktionalität implementieren können. Okay, lass es mich hier machen. Ich werde die Ausgaben vorerst streichen. Dann rendere ich eine Funktion namens Bootfahren und gebe ihr mit dem selbstschließenden Tag einen genehmigten Typ . Und wenn Sie dann speichern und im Browser auschecken, wird angezeigt, dass Bootfahren nicht definiert ist. Hier, ist es? Scrollen Sie also nach oben rechts, wir sind in der Komponente, wir werden das Team des Bootswachtmanns definieren. Stellen Sie es auf unsere Funktion ein. Direkt in der Funktion werden wir den Text eingeben. Und diese Funktion wird ein Stück der Benutzeroberfläche zurückgeben. In diesem Fall werden wir Boot fahren. Geben wir der Schaltfläche den Klassennamen von. Das wird abgeschlossen sein. Macaulay-Klammer. Geben wir ihm einen Klassennamen für die Wahl. Richtig? Wir sind im inneren HTML. Wir werden den Typ einfach so anzeigen. Auf diese Weise können wir für verschiedene Bestellungen einen unterschiedlichen Status angeben . In Ordnung, wir werden also in der Lage sein , eine ausstehende Bestellung unserer Konsole zu genehmigen. Natürlich. Sie werden in verschiedenen Farben erscheinen. Wenn die Bestellung z. B. genehmigt wird, gehen wir mit Grün auf den Markt. Und wenn es abgelehnt oder storniert wird, gehen wir mit Rot auf den Markt. Und wenn es noch aussteht, gehen wir mit Gelb auf den Markt. Das wird uns also helfen , ein solches Problem zu lösen. Das ist natürlich kein Problem. Speichern und checken Sie den Browser aus. Ausweise. Ihr Recht. Alles sah wie erwartet aus. Und hier ist die genehmigte Abstimmung. Die nächste Zeile besteht also darin, das TRO eines Klassennamens der Ordnung TRO zu duplizieren. Du wirst aus den Zeilen 22, 30 hervorheben. Und dann möchte ich es fünfmal duplizieren. Aber an Ihrer Seite können Sie beschließen, es so oft zu duplizieren, wie Sie möchten. Ich habe das nicht gemacht. Jetzt. Ich werde nur die Daten ändern, aber ich denke nicht, dass das notwendig ist. Ich werde mich also nur auf die Schaltfläche Genehmigen konzentrieren , damit wir dieselbe Reihenfolge haben können. Der Rest, aber ja. Okay. Lass mich etwas für dich tun. Ich will nicht, dass du verwirrt wirst. Hier. Wir werden die Jacke referenzieren und sie ist JPEG. Speichern und im Browser auschecken. Siehst du hier, ich mache einfach eine Jacke. Hier. Ich nehme Gucci. Also ich denke, das hätte ein Markenname sein sollen, aber es ist cool. Sie können die Daten ändern. Nehmen wir an, dieser Typ bestellt aus Großbritannien, dann wird der Status storniert. ZB und dieser andere Typ, lass uns einfach ihren Status ändern. Das wird noch ausstehen. Ändert den Status „ausstehend“. Lass uns das ändern, um zu stornieren. Ich möchte nur, dass du siehst, wie es funktioniert. Am Ende kannst du also tatsächlich all diese Details ändern, okay, du kannst sie mit etwas anderem füllen. Und schon haben wir die Produktbilder, damit wir die CROs mit den Bildern meiner Wahl versorgen können . Lassen wir es so, damit die Vorlesung nicht länger dauert wenn Sie das Projekt speichern. Gut. Also hier ist, was wir in dieser Vorlesung erreicht haben. Und ich kann Ihnen in der nächsten Vorlesung versichern, wenn wir beginnen, diese Komponente zu stilisieren, wissen Sie natürlich bereits, wie das erwartete Ende aussehen würde. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 118. 116 Styling: Richtig, fangen wir also an, diese Komponente zu stilisieren. Sie müssen also nur noch einmal Ihren Bildschirm teilen. Bringen Sie die CSS-Datei nach rechts und dann die Komponente nach links. Wir beginnen mit dem Auftragscontainer. Hier ist es markieren und kopieren. Komm her, Punkt oder der Container. Und dann wird der Fluss darin bestehen, 20 Pixel aufzufüllen. Wenn der Flux also zwei beträgt, bedeutet das, dass zwei Einheiten des Bildschirms benötigt werden. Der Boxschatten. Ich habe bereits den Box-Shadow, den ich verwende. Also muss ich einfach herkommen, hervorheben und kopieren. Und natürlich weißt du schon, wie man an den Box-Shadow kommt. Speichern Sie und lassen Sie uns sehen, was wir haben. Okay, gut. Kannst du etwas bemerken? Schau es dir an. Perfekt. Das Nest ist der Ordenstitel. Durchgeführt. Die Größe beträgt 20 Pixel. Die Schrift, Weizenrand, richtig? 20 Pixel sind gut. Hier ist es. Stilisieren Sie die Bestelltabelle. Die Breite beträgt 100 Prozent. Randabstand. 20 Pixel Speichern und auschecken Sie den Browser. Gut. Es nimmt allmählich Gestalt an. Der Benutzer der Bestellung. Wir werden einen Display-Flex haben und die Artikel mittig ausrichten. Das Nest ist also die Reihenfolge T, H, was der Header der Bestelltabelle ist. Think steht hier ganz oben. Testen Sie die Ausrichtung. Richten Sie den Text nach links aus. Kannst du sehen, dass jetzt alles in einem guten Zustand ist, aber du wirst es nicht bemerken können , nur weil das Bild eine große Anzahl von Spaten einnimmt. Wenn wir also die Bildgröße reduzieren, wird es vollkommen in Ordnung erscheinen. Die nächste Zeile besteht darin , das Bild zu stilisieren. Wie lautet der Klassenname des Bildes? Hier ist es der Punkt oder das IMG? Die Breite beträgt fünf Pixel. Die Höhe wird dieselbe Höhe und Breite haben. Seth? Kannst du sehen? Jetzt scheint es wie erwartet völlig in Ordnung zu sein. Wir wollen den Grenzradius angeben. Ein bisschen kurvig zu sein. Fünf Pixel werden uns dabei helfen. Wenn Sie den Browser auschecken, können Sie es möglicherweise nicht bemerken, nur weil es sich bei diesem bestimmten Bild um PNG handelt. Das Bild zeigt es dir, kannst du das sehen? Die Kanten sind gekrümmt. Damit es schön aussieht, werde ich die Farbe des Rahmens angeben. Wir werden es ein Pixel haben, durchgehend rot. Du kannst das Collado ändern und einfach kreativ sein. Kannst du jetzt Objektanpassung, Mitte, Rand, richtig sehen ? Zehn Pixel, speichern. Wunderschön. Kannst du sehen? Lass uns weitermachen. Die Linie soll die Reihenfolge der Bootspunkte stilisieren. Lass mich dir diesen Kerl hier zeigen. Die Polsterung, fünf Pixel. Wir wollen keine Grenze, keinen Grenzradius. Machen wir fünf Pixel daraus. Speichern Sie das Nest und die Linie, um Farben entsprechend dem Status anzuwenden. Also hier haben wir die Konsole genehmigt, die noch aussteht. Wenn es also genehmigt ist, möchten wir, dass diese Schaltfläche grün angezeigt wird. Risiken verfallen. Wir müssen nicht Rot zeigen. Und wenn es sich um Ausgaben handelt, wollen wir, dass es eine Art gelbe Farbe hat. Also lasst uns das schnell machen. Punkte. Dieser Typ hier, lass uns den Punkt kopieren und einfügen. Lass es mich dir hier zeigen. Ist es der Button-Typ? Also werden wir die Hintergrundfarbe E5, FA, F2 haben. Und die Farbe der Schrift wird irgendwie grün sein. Ja, im Browser speichern, neu laden. Der Status wird nicht angewendet. Was ist passiert? Das ist richtig. Konstanter Tiefpunkt. Das ist eigentlich richtig. Okay Leute, schaut mal, hier drüben wird es so einen Abstand geben. Okay. Wenn du es so geschrieben hast, wird es nicht funktionieren. Sie müssen es also nur ausschneiden und dann speichern. Schauen wir uns jetzt den Browser an. Wunderschön, hat funktioniert. Kannst du nett sehen. Wenden wir diese Handtücher an, die den Rest des Status ausmachen. Also werde ich diesen Typen einfach so kopieren. Hier, einfügen. Dann machen wir Dot Pending. Bitte überprüfen Sie immer, ob die Schreibweise Ihres Clusternamens korrekt ist. Genau aus diesem Grund habe ich den Bildschirm geteilt. Also können wir es überprüfen. In Bearbeitung. In Ordnung. Wenn es also noch aussteht, die Hintergrundfarbe die Form Gelb, 12, 34ff f, f, und sieht, dass die Schriftfarbe 32 Prozent beträgt. Bitte stellen Sie sicher, dass Sie es zusammenfassen und dann in Klammern setzen. Speichern Sie es wie erwartet im Browser. Lassen Sie uns abschließend die Stile für das Konsolenbootfahren und den Bootsrat implementieren für das Konsolenbootfahren und . Oder Sie können am Ende einen Rückgang sehen. Es ist überhaupt nichts falsch. Ich habe dir gesagt, dass du kreativ sein musst. Okay? In Ordnung, geben wir ihm eine Hintergrundfarbe. Wir werden dieses Format auch hier verwenden. Dieses Mal 35584. Das gibt uns die athletische Farbe, die wir wollen. Die Schriftfarbe wird D9 57 sein. Speichern Sie im Browser. Sie sind diese, können Sie sehen alles wie erwartet aussieht. Siehst du, es sieht extrem gut aus. Das ist professionell. Die Anwendung sieht extrem schön aus. Das ist oft unser n. In dieser Vorlesung beginnen wir mit dem Mitglieder-Widget. Wir sehen uns dann. 119. 117 Member: In dieser Vorlesung werden wir beginnen, die Mitglieder zu entwerfen, die wir erstellt haben. Hier sind es Techniken? Das Bestellungs-Widget ist doppelt so groß wie das Mitglieder-Widget. Und das erreichen wir, indem wir Flex Two machen, was bedeutet, dass dem Typen hier zwei Einheiten abgenommen werden. Also bei Schauspielerinnen heißt das, es ist doppelt so groß wie dieser Typ hier drüben. In der vorherigen Vorlesung habe ich also einen Fehler gemacht. Ich hatte erwartet, dass du diesen Fehler korrigieren würdest. Öffnen Sie also das Home-CSS. Das soll Flex sein. Und dann müssen wir es um zwei Biegungen drehen, was bedeutet, dass es zwei Einheiten des Bildschirms einnimmt. Nachdem wir das getan haben, schließen wir es. Befehl B, um den Explorer zu öffnen. Und genau, im Mitgliederverzeichnis werden wir eine neue Komponente namens Members erstellen. We jet dot g ist generisch, die funktionale Komponente. Und natürlich müssen wir auch das entsprechende CSS-Datei-Member-Widget Punkt CSS erstellen . Ordnung, also lassen Sie uns schnell die CSS-Datei mit der Komponente verknüpfen , die Punkte mit Schrägstrichen importiert. Wir Jet-Dot-CSS. Hier, erfreut. Es wird in Kleinbuchstaben geschrieben sein, außer dass wir drei Komponenten nach Hause haben und wir die Mitglieder rendern lassen. Das haben wir. Also direkt unter den Bestell-Widgets werden wir Mitglieder rendern. Wir nähern uns sowohl dem selbstschließenden Etikett als auch achten wir darauf, es immer oben zu importieren. Speichern und im Browser auschecken. Kannst du jetzt sehen, wir haben die Mitglieder, die wir hier hatten. Beginnen wir mit der Gestaltung des Mitglieder-Widgets. Öffne die Mitglieder des E-Jets. Also werde ich das jetzt einfach abwischen. Geben wir diesem Div einen Klassennamen von Mitgliedern. Wir haben Container gemacht, oder? Innerhalb der Div. Wir nehmen eine Spanne, geben ihr die Klassennamen der Mitglieder, mit denen wir uns gerade verbunden haben. Innerhalb des inneren HTML-Codes. Ich werde neu beigetretene Mitglieder machen. Hier werden wir ein UL-Tag haben, oder? Wir sind in der URL mit dem Klassennamen von Mitgliedern mit mindestens Leuten. Ich möchte hier in dieser Vorlesung ein bisschen schneller sein. Also musst du nur meinem Tempo folgen. Und rot mit dem UL-Tag, wir werden ein LI-Tag haben. Geben Sie ihm einen Klassennamen der Mitglieder, ein Widget-Listenelement. Sie müssen nur ein Element in die Liste kopieren, einfügen und bearbeiten. Wir werden ein IMG-Tag haben, SRC entspricht einem Bildschrägstrich. Lassen Sie mich Ihnen also etwas zeigen, das der Öffentlichkeit zugänglich ist. Hier sind die Bilder und hier ist das Mitgliederverzeichnis, in dem wir alle Mitglieder haben, Bildschrägstrich Mitglieder slash dc dot JPG. Schließen Sie es und stellen Sie dann ein Internetproblem dar. Natürlich sollten Sie wissen, was draußen ist. Geben Sie diesem IMD-Zielcluster den Namen dessen Namen bei IMG, näher mit dem sich selbst schließenden Tag. Mal sehen, was auf dem Bildschirm passiert. Wunderschön. Jetzt haben wir ein Div, geben Sie ihm einen Klassennamen von Member-Widget-Benutzern. Eine Sache, die du mir nacheifern solltest, ist wie ich Zeit damit verbringe, meinen Klassennamen zu schreiben. Ich achte immer darauf, es vollständig zu schreiben, um die Absicht des DV zu ermitteln. Wenn also ein anderer Entwickler meinen Code aufnimmt, wird er so einfach zu lesen und zu verstehen. In diesem Fall werden sie also kein Problem damit haben, Stopps in meinem Code einzustellen. Ich denke, du verstehst, worum es geht. Jetzt. Retro und D, wenn wir eine Spanne haben wollen, geben Sie ihr einen Klassennamen oder den Benutzernamen des Mitglieder-Widgets. Sie sehen Dominic Span wieder. Geben Sie ihm einen Klassennamen des Mitglieder-Widgets. Benutze einen Titel. Sie ist reaktiv bei Null, hat aber recht. Also direkt vor dieser Div mit den Klassennamen der Mitglieder, die wir bekommen, werden wir Boot fahren. Geben Sie ihm einen Klassennamen der Mitglieder, das Widget-Wahlrecht lag beim Bootfahren. Wir möchten ein Symbol anzeigen. Also, was ich hier tun werde, ist die Sichtbarkeit aus der Material-Benutzeroberfläche zu importieren. Hier müssen wir also den Sichtbarkeitscluster sowohl des sich selbst schließenden Tags als auch direkt darin rendern Sichtbarkeitscluster sowohl des . Wir müssen ihr auch einen Klassennamen geben, damit sie Mitglieder sein werden. Wir haben Icon gemacht. Und der Test wird angezeigt. Könnte wunderschön sein. Lass uns speichern und im Browser abhaken. In Ordnung, also hier ist das Boot in dem Symbol. Und wenn wir anfangen zu stilisieren, werden wir es gut aussehen lassen. Es ist also nicht nötig, dass der nächste in der Reihe ihn so oft duplizieren muss, wie Sie möchten. Nachdem Sie dies getan haben, können Sie auch das Bild des Benutzers, den Titel und den Rest ändern . Okay, ich mache einfach einen für dich und dann kannst du den Rest erledigen. Das ist also DC Dominic. Ich werde es hier machen. Sie sehen Victor auch. Sie ist reaktiv. Und lassen Sie mich die Bilder öffnen und sehen , ob ich ein sehr schönes Bild bekommen kann. Lady Dot PNG. Also hier werde ich Lady Dot PNG Portable Network Graphics machen . Ich hoffe, Sie wissen, dass, wenn Sie eine speichern, sehen Sie, was passiert. Okay, jetzt haben wir dieses Bild hier drüben. Okay, das ist im Grunde alles für den Moment und bitte stellen Sie sicher , dass Sie die Bilder und den Titel ändern. Das muss ich in dieser Vorlesung also nicht tun, denn wenn ich das mache, wird die Vorlesung zu lange dauern. Es gibt hier einen Tippfehler , den ich nicht mag. Das sollte also geschrieben werden. Ich mag es nicht, bei meiner Arbeit Fehler zu machen. Ich mag es perfekt und ordentlich. In Ordnung. Das ist also alles für heute. Und in der nächsten Vorlesung werden wir beginnen, diese Komponente zu stilisieren. Wir sehen uns dann. 120. 118 Styling des Member: In dieser Vorlesung werden wir beginnen, die Mitgliederkomponente zu stilisieren. Denn im Moment sieht es so aus, als ob alles aus dem Ruder gelaufen ist. Einfach weil dieses Bild zu klein ist. Es nimmt einen großen Teil des Bildschirms ein. Fangen wir also mit dem Bild an. Natürlich solltest du wissen, wie das geht. Nehmen Sie die Mitglieder, die wir gemacht haben, nach rechts und dann die Komponenten Ihrer Mitglieder nach links. Fangen wir mit dem Bild an. Wie lautet der Klassenname des Bildes? Img. Der Klassenname ist Widget IMG. Kopieren. Komm her. Die Breite beträgt 40 Pixel, die Höhe 40 Pixel. Dann geben wir den Randradius an, 50 Prozent, was der Hälfte der Breite und der Hälfte der Höhe entspricht. Und dann wird es eine kreisförmige Schleife geben. Wenn Sie speichern und im Browser abhaken. Und Sie sehen, jetzt nehmen die Dinge allmählich Gestalt an. Okay, machen wir es zu Objekt-Feeds. Über. Jetzt können wir anfangen, den Rest der Klasse zu stilisieren. Also hier haben wir zuerst die Mitglieder, die wir als Container erstellt haben. Ich bitte, stell sicher , dass es ganz oben steht. Der Flux wird eins sein. Das wird also eine Einheit dieses gesamten Abschnitts erfordern. Und natürlich, weißt du, dafür braucht man zwei Einheiten, also das ist doppelt so groß, und dann wird diese eine Einheit sein. Ich erkläre es einfach, damit es jeder gut genug versteht. Wenn Sie speichern und überprüfen , dass der Browser kann, sehen Sie die Polsterung wunderschön. Das Padding wird zehn Pixel betragen. Rand links. Machen wir 20 Pixel daraus. Sie speichern und checken im Browser aus. Gut. Die nächste Wahlperiode sind also die Mitglieder, wir sterben einfach zu Hause. Entschuldigung, wir werden es hier machen. Die Schriftgröße, 20 Pixel, Schriftbreite, lassen Sie uns 100 angeben. Und natürlich müssen wir den Box-Shadow dieses Containers angeben . Ich habe dir gesagt, dass ich einen Kostümkistenschatten habe, den ich für mein Projekt verwende. Also hier ist es. In Ordnung, gut. Das Nest besteht aus den Mitgliedern, deren Abstand mindestens Null ist. Polsterung. Der Listenstil. Ich bin mir sicher, was der Listenstil ist. Du siehst diesen Punkt hier drüben. Ich weiß nicht, ob Sie diese Punkte, diese Punkte, all diese Punkte, die auf diese Listenelemente hinweisen , deutlich sehen können all diese Punkte, . Also wollen wir es entfernen und wir werden tun, wenn Sie speichern und im Browser auschecken. Zoomen Sie ein bisschen nach oben. Kannst du sehen, dass es weg ist. Was Nest, denke ich, sind die Mitglieder mit mindestens einem Artikel. Wir werden einen Display-Flex haben, Elemente mittig ausrichten, Inhalte ausrichten und Abstand zwischen den Elementen haben. Also machen wir Platz zwischen Speichern. Und so können Sie den Unterschied sehen. Kannst du sehen? Also haben wir es flexibel gemacht und dann haben wir diesen Raum dazwischen geschaffen. Wenn Sie also die Flocken entfernen und das Projekt speichern, schauen Sie, wo Sie es haben werden. Jetzt denke ich, dass Sie auch die Nützlichkeit von Flux verstehen , wenn Sie den Abstand dazwischen weglassen . Lassen Sie mich Ihnen zeigen, was gut ist. Ich zeige dir diese. Kannst du sehen, dass jetzt alles geclustert ist. Schau es dir an. Du siehst , dass, wenn du die Inhalte zurücknimmst, die es rechtfertigen, Zwischenraum zu geben , das Raum dazwischen schaffen wird. All diese Schwierigkeiten. Ich denke, ich tue mein Bestes, damit Sie CSS verstehen, unabhängig davon, ob wir React verwenden, Rand von links nach rechts aus vielen Pixeln besteht. Die Unterseite ist 20 Pixel. Wunderschön. In Ordnung, wir sind fast fertig mit dem Stil. Das Nest besteht aus Mitgliedern mit diesem Benutzer. Lassen wir es Flex und Flexrichtung anzeigen. Wir wollen es von oben nach unten. Also werde ich den Doppelpunkt machen. Jetzt können Sie sehen, dass wir den Namen haben und dann haben wir die Berufsbezeichnung. Früher wurden sie also alle in derselben Zeile geschrieben. Lassen Sie mich Ihnen zeigen, wann ich die Flexrichtung abnehme , um Säule zu sein. Siehst du jetzt das Ich in derselben Zeile? Und wenn ich dann die Richtung biege, um die Spalte zu sein , beginnt sie von oben nach unten. Schau es dir an. Die nächsten in der Reihe sind die Mitglieder. Wir bekommen einen Benutzernamen. Wir müssen nur die Schriftart Weizen angeben. Lass uns dafür sorgen, dass es 100 sieht. Die Mitglieder, wir haben einen Titel benutzt. Der Schrift-Tweet ist 300. Das Nest ist also die Widget-Schaltfläche für Mitglieder. Dieser Button da drüben. Wir wollen, dass es schöne Loops aussieht, in denen ich eine Minute, Leute, bevor ich weitermache , dieses Bild ausschneiden muss, zu X kommt. Wir müssen es direkt hinter den Mitgliedern platzieren, wobei mindestens ein Element hier ist. So wie das. Ich versuche es zu klären. Also das ist, das habe ich dir natürlich schon mehrmals gesagt. Das Beste ist also die Abstimmung über das Mitglieder-Widget. Mitglieder, wir sind Boot gefahren. Lassen wir es Flex anzeigen. Lassen Sie uns die Elemente ausrichten. In der Mitte. Die Grenze. Wir wollen überhaupt keine Grenze um den Körper herum haben. Aber wir wollen den Randradius so spezifizieren , dass er ein bisschen kurvig sein kann. D ist zehn Pixel, Padding, sieben Pixel, hier zehn Pixel. Die Hintergrundfarbe und die Schriftfarbe werden also grau sein. Der Cursorzeiger. Schließlich werden wir das Mitglied stilisieren. Wir haben ein Symbol gemacht, das ist dieses Symbol hier drüben, das direkt im Körper erscheint. Die Schriftgröße beträgt Systempixel. Ränder rechts. Fünf Pixel. Wenn du sparst. Und schauen wir uns das Endergebnis an. Kannst du sehen, dass alles wie erwartet in Ordnung zu sein scheint? Wir sind also fertig mit der Homepage. Und das ist mit Sicherheit extrem schön. Das ist erstklassig. Ich liebe es. In Ordnung, das ist alles für heute. In der nächsten Vorlesung werden wir beginnen, unsere Routen zu spezifizieren. Wenn Sie also auf den Benutzer klicken, sollten Sie als Unternehmen in die USA gelangen. Wenn Sie auf die Produkte klicken , gelangen Sie ebenfalls zur Produktseite oder zur Komponente Drei Produkte. Okay. Also, wenn du den Namen und den Titel dieser Sachen hier ändern willst , kannst du das an deiner Seite tun. Vorerst. Zerfall. 121. 119 die Routen umsetzen: In einem realen Szenario sollte eine solche Anwendung in der Lage sein, Sie zu einer anderen Komponente weiterzuleiten , wenn der Link unterbrochen wird, oder? Was ist die Seitennavigation, wenn wir auf Verwendungen klicken, die Anwendung sollte in der Lage sein, Direktoren zu lesen , um sie auch als Seite wiederzuverwenden. Wenn wir auf Produkte klicken, sollte es uns zur Produktseite weiterleiten können. Um eine solche Funktionalität zu implementieren, müssen wir also eine externe Bibliothek namens React Router verwenden . Gehen Sie nicht schnell zu react router.com. Und hier haben wir die Dokumentation. Und natürlich können Sie in Ihrer Freizeit beschließen, die Dokumentation zu lesen, um den React-Router gründlich zu verstehen. Lass uns schnell fortfahren. Gehe zu VS Code. Um fortzufahren. Zuerst müssen wir den React-Router installieren, oder? Wir sind im Terminal. Ich werde Control C ausführen, um das aktuelle Neuron im Server zu stoppen und in das Verzeichnis des Clients zu schreiben. Ich mache Node Package Manager, Install, React, Dash, Router, Dash Dome. Am einfachsten ist es, wenn Sie die Enter-Taste drücken, um es abfeuern zu lassen. Die Installation ist im Gange. React Router Dome installiert, erfolgreich. Lassen Sie mich Ihnen schnell Command P zeigen und dann nach der Datei package.json suchen. Und hier ist es direkt online, Cystein. Schließ es. In der nächsten Termzeile werden die Komponenten erstellt, die wir umleiten möchten, um zu erfahren, dass auf den Link geklickt wurde. Öffnen Sie also die Komponentenseiten. Und dann, genau dann, wenn die USA, zumindest eine neue Komponente namens user list dot j erstellen eine neue Komponente namens user , um die funktionalen Komponenten zu generieren. Lassen Sie uns schnell die entsprechende CSS-Datei erstellen. Gut. Schließen Sie den Explorer. Öffne die App. G ist perfekt. Der nächste Schritt ist also, Browser-Router, Routen, Routen von React, Router, Dune, Sand zu importieren Routen, Routen von React, , oder? Lass es mich dir zeigen. Wir werden den Browser-Router importieren. Routen, ruhigere Routen von React, Router, Dash, nicht. So einfach ist das. Ich habe nicht all diese Toughs aus dem Reaktor importiert , aber das auf dem Nest besteht darin, die gesamte Anwendung mit einem Browser-Router zu verpacken . Also müssen wir nur dieses Div mit dem Klassennamen App löschen . Es ist überhaupt nicht notwendig. Ordnung, die Anwendung beschwert sich einfach, weil das GSS-Element in einen übergeordneten Knoten eingebettet werden muss . Und jetzt wird der übergeordnete Knoten der Browser-Router sein. Höhepunkte. Halten Sie die Wahltaste auf Ihrer Tastatur gedrückt. Tippen Sie auf die Aufwärtspfeiltaste, um es hineinzubewegen. Wenn diese Option für Sie nicht funktioniert, müssen Sie nur den Befehl X markieren, um ihn auszuschneiden und dann in den Browser-Router einzufügen. So einfach ist das. Lassen Sie uns die Routen schnell implementieren. Komm her. Ich werde Routen machen, die aus den gesamten Routen bestehen , die wir in diesem Kurs haben werden. Wir sind also in Displays. Wir werden unsere individuellen Routen haben. Dann mache ich Routen, spezifiziere den Pfad und den Pfad. Wir müssen nur einen Schrägstrich angeben. Das ist also ein Verweis auf die Home-Komponente. Nachdem wir das getan haben, müssen wir eigentlich die besorgniserregende Komponente spezifizieren. Und dann werde ich Elements Acquise machen, diesen Typen hier erwischen und ihn hier einfügen. Stellen Sie sicher, dass Sie das Leerzeichen dazwischen löschen. Einfach so, alles cool. Außerdem wollen wir sozusagen eine Route zur Listenseite oder Komponente des Benutzers erstellen . Also werden wir hier eine Route haben, oder? Wir sind auf der Route. Lassen Sie uns das oben Genannte spezifizieren. Es wird eine Slash-Benutzerliste sein. Dann spezifizieren wir die Elemente. Die Elemente beziehen sich in diesem Fall auf die betroffenen Komponenten. Und jetzt werden wir haben. Wenigstens der Nutzer, näher dran mit dem selbstschließenden Etikett. Und bitte stellen Sie sicher , dass Sie es oben importieren. Genau wie das Format sieht der Code mit Prettier sauber aus. Lassen Sie es uns jetzt testen. Höhepunkte. Ich werde alles direkt in die Anführungszeichen und im Browser kopieren . Wir werden also mindestens 3.000 Slash-Benutzer von localhost haben. Wenn Sie die Eingabetaste drücken. Sagt, diese Seite ist in keiner Weise zu erreichen. Es liegt einfach daran, dass wir den Server erneut starten müssen. Komm her. In Ordnung, wir sind im integrierten VSCode-Terminal. Stellen Sie sicher, dass Sie sich im Kundenverzeichnis befinden. Und dann mache ich Node Package Manager starte den Server einfach so. Und unter dem Browser. Kannst du sehen, jetzt haben wir die Seite des Benutzers. Wunderschön. Sie funktionierten jedoch wie erwartet. Wenn Sie jedoch auf Benutzer klicken, passiert vorerst nichts. Lassen Sie uns das schnell implementieren. Zurück zu VS Code. Öffnen Sie die Datei Node.js auf der oberen Seite und scrollen Sie nach unten. Okay, das ist also das Zuhause hier. Wir müssen diesen Listenpunkt abschließen, oder? Wir sind im Link. Also werden wir den Link hier spezifizieren. Und das mache ich hier, Link zur Homepage. also gleich Geben Sie also gleich den Schrägstrich an, der als Zeiger auf die Homepage dient. Standardmäßig spezifizieren wir die Homepage auf diese Weise. Dann Höhepunkte. Verschieben Sie es innerhalb des Links erneut nach rechts. Okay, hier ist der Benutzer. Geben Sie den Link an. Ähm, bitte stellen Sie sicher, dass Sie den Link vom React-Router importieren . Ist er genau hier? Okay, also hier werden wir einen Link zu machen. Wir müssen also die Route angeben , die uns zur Benutzerseite führt. Das haben wir natürlich schon einmal gemacht. Also müssen wir nur zu app.js zurückkehren und es dann so kopieren. Bitte stellen Sie sicher, dass dies genau mit dem übereinstimmt, auf das Sie hier abzielen. Fügen Sie es so ein und markieren Sie dann das Listenelement. Verschieben Sie es innerhalb des Links nach rechts. Formatieren wir den Code mit Prettier. Sieht gut aus. In Ordnung, speichern Sie das Projekt im Browser. Wenn ich also auf Home klicke, ist die Homepage erschöpft, wenn ich auf Benutzer klicke, führt uns das runter zur Wiederverwendung oder Geschwindigkeit, oder du verwendest sie sozusagen als Komponente. Die Anwendung funktioniert also wie erwartet einwandfrei. In der nächsten Vorlesung werden wir mit der Implementierung der Benutzerseite beginnen. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. 122. 120 User: In dieser Vorlesung werden wir die Komponente Benutzerliste implementieren. Im Grunde werden wir eine Tabelle haben der die Daten des Benutzers und seine Zahlungen aufgeführt sind. Diese Funktionalität wird also mit der Material-UI-Datentabelle implementiert. Bin schnell zu MU i.com gegangen und habe nach einem Tisch gesucht. Hier, ist es mei.com? Stimmt es? Eins im Suchfeld. Und wir werden uns gleich hier für den Tisch decken. Wir haben mehrere Tabellen, mit denen mehrere Anwendungen erstellt werden können . Wir haben hier die Basistabelle, Tabellendaten. Wir haben den dichten Tisch und viele mehr. Also, richtig? In diesem Kurs werden wir die Tabellendaten verwenden. Sie haben also die Möglichkeit , einen einzelnen Benutzer zu markieren und auch alle Benutzer auszuwählen. Sie können die Artikel direkt hier sortieren. Wir können uns für eine ungesuchte Sortierung in absteigender Reihenfolge entscheiden. Sie können Coulombs filtern, ausblenden oder anzeigen. Diese Tabelle ist also eigentlich die beste für die Anwendung , die wir erstellen. Lassen Sie uns also diese Tabelle verwenden. Scrollen Sie nach unten. Genau hier. Du wirst dieses Tag-Symbol sehen. Klicken Sie hier, um den Code zu öffnen. Um diese Tabelle zu implementieren. Zuerst müssen wir diese Bibliothek installieren. Markieren Sie alles , was in den einfachen Anführungszeichen steht, und kopieren Sie es dann. Geh zurück zu VS Code, öffne das integrierte Terminal, oder? Wir haben es bereits geöffnet. Also werde ich einfach den aktuell laufenden Server stoppen. Und dann führe ich den Befehl npm install aus, um das einzufügen, was wir von der MUL-Website kopiert haben, drücke die Eingabetaste, damit es gestartet wird. Damit können wir die installierte Datentabelle erfolgreich verwenden . Also genau hier haben wir die Spalten und die Spalten werden als Tabellenkopf gespeichert, oder? Es wird uns einen reifen, du kannst, du siehst wie Vorname, Nachname, Alter, vollständiger Name. Die Kolumne hier ist also dafür verantwortlich. Dann haben wir hier die Zeile und die Zeile wird als die Daten gespeichert, die zum Füllen der Tabelle verwendet werden. Und wenn Sie die Tabelle genau beobachten, werden Sie auf jeden Fall feststellen, dass sie wahr ist. Okay, hier haben wir also LastName für Snow. Vorname ist John und dann 35 Jahre alt. Komm her. Denken Sie daran, dass wir den Alarm geklärt haben. Okay, hier haben wir John Snow als Nachnamen. Der Vorname ist John, der Nachname ist Snow. Das Alter ist 35. Also all das Zeug hier drüben speichern wir als die Daten, um die Tabelle zu füllen. Genau hier. Wir werden das Datenraster rendern. Wir werden Regeln für Reihen festlegen, und das ist dieser Typ. Und dann werden wir Spalten als Spalten festlegen. Dieser Typ hier. Und dann haben wir hier die Option Reihen pro Tonhöhe. Hier ist es auf fünf gesetzt. Deshalb wirst du 12345 haben. Es wird also fünf in dieser Tabelle erscheinen. Sie können sich jedoch dafür entscheiden, die ROS-Marionettenoption auf eine beliebige Zahl Ihrer Wahl zu erhöhen . Und hier haben wir die Checkbox-Auswahl. So einfach ist das. Lassen wir das also direkt in unserer Anwendung implementieren. Gehe zurück zum VS-Code. Ich werde diese hervorheben und sie abwischen. Geben wir diesem Div einen Klassennamen. Und der Klassenname wird Benutzerliste sein. Also genau beim Div werden wir das Datenraster rendern. Aber vorerst müssen wir nur die Spalte Highlight Command C zum Kopieren kopieren, hierher kommen und einfügen, auch zurück gehen. Wir müssen diesen Impuls kopieren. Markieren Sie diese also und wischen Sie sie auch ab. Wir brauchen keine Markierungen der Zeilen 21 bis 22 und wischen das ab. Gut. Geh zurück. Lassen Sie uns die Zeilen kopieren. Und schließlich müssen wir die Daten kopieren, einverstanden? Am besten fügst du es hier ein. Richtig, lassen Sie uns diesen Klassennamen schnell stilisieren. Kopieren. Komm her. Ich werde die Punkt-Benutzerliste machen und wir werden flexibel sein. Machen wir vier draus und schauen, was wir an Bord haben. Öffne das Terminal und dann müssen wir das Projekt starten. Nachdem wir das getan haben, lassen Sie uns schnell verlinken. Komponente mit der CSS-Datei. Also hier mache ich Punkt Schrägstrich, user least dots, CSS, Save und checke den Browser aus. Die Ausweise. Kannst du das sehen? Wunderschön? Lass es uns versuchen. Ich überprüfe diesen Artikel und er wird ausgewählt. Als ich gesucht habe. Es funktioniert einwandfrei. Siehst du das? Hört zu, Freunde, das ist fantastisch. Wir können in aufsteigender Reihenfolge sortieren. Siehst du, du kannst filtern. Kannst du den vollständigen Namen anhand des Namens, des Nachnamens und des Alters sehen ? Du kannst hier eine ganze Menge machen. Wie gut, also die nächste Zeile ist, die Tabelle mit unseren Daten zu füllen. Weil diese Daten für die Anwendung, die wir erstellen, nicht relevant sind. Gehe zurück zum VS-Code. Wir hinterlassen die ID, dann die Fehde um den Vornamen, wir ändern ihn in einen Nutzernamen. Hier. Wir werden es ebenfalls ändern, um einen Namen zu verwenden, geben wir ihm eine Breite von 200. Und das wird in E-Mail geändert, und hier wird E-Mail sein. Okay, machen wir 200, was die Breite ist. Und hier haben wir das Feld für das Zeitalter. Lassen Sie uns den Rand in Status ändern. Status. Status. Wischen wir die Nummer ab. Die Breite ist 90. Und hier haben wir das Feld für den vollständigen Namen. Wir werden diese beiden ändern. Bezahlung. Löschen Sie die Beschreibung. Auch sortierbar. Wir werden es abwischen. Dann die Breite. Sobald dieses T genug ist. Fein. Alles cool, ich liebe es. Verschachteln Sie also ein weiteres zusätzliches Feld. Ich muss es nur hervorheben, duplizieren. Ich werde Maßnahmen ergreifen, sobald dieses T ausreicht. Gut. Nachdem Sie dies getan haben, sehen Sie, wenn Sie speichern und im Browser auschecken, dass wir jetzt den Header für Benutzername, E-Mail, Status, Zahlung und Aktion haben . Lassen Sie uns also die Use-as-Regel implementieren, bei der die Daten zum Füllen der Tabelle als gespeichert werden. Deshalb werde ich nur die Zeilen 32 bis 39 hervorheben. Wisch es ab. Die Idee ist eine. Wir werden den Nachnamen löschen, und das wird der Benutzername sein. Bitte stellen Sie sicher, dass es beim Coelom genau so ist. Also den Nutzernamen werde ich nehmen Victor Dominic. Also hier werden wir den Avatar einbeziehen. Und der Avatar wird hier sein. Ich kopiere nur die Bild-URL, aber ich möchte sie verwenden, und das ist sicherlich nur ein zufälliges Bild, das ich aus dem Internet bekommen habe. Okay, lass uns das abwischen. Hier. Wir werden eine E-Mail haben. Und der Status der E-Mail wird bis zu 4 ruhiger sein. Die Zahlung. Das ist alles. Formatieren wir den Code mit Prettier. Und wenn Sie den Code formatieren, wird er genau so aussehen. Was ich jetzt tun werde, ist es zu markieren und dann so oft zu duplizieren, wie Sie möchten. Hier sollten Sie also den Benutzernamen, die ID und den Rest der Details ändern . Aber für mich bin ich nur daran interessiert, die ID zu ändern. Okay? Der Benutzername hier könnte also Dominic Daisy sein. Der Avatar könnte ein beliebiges Bild im Internet sein. Die E-Mail, Sie können die E-Mail in etwas anderes ändern. Sie können diese aktiv oder inaktiv machen. Sie können hier einen anderen Betrag angeben. Wenn Sie also den Browser speichern und auschecken, die IDs, können Sie sehen, dass alles einwandfrei zu funktionieren scheint. Aber wenn Sie den Bildschirm beobachten, werden Sie feststellen, dass die Aktion hier leer ist, dann machen Sie sich Sorgen, dass dies in Zukunft geschehen wird. Also hier haben wir eine Schaltfläche zum Bearbeiten, eine Schaltfläche zum Löschen. Wir sind ziemlich bald auf dem Weg dorthin. In Ordnung, das ist alles für heute. Und in der nächsten Vorlesung werden wir den Code umgestalten. Mit dem Refactoring des Codes meine ich einfach, dass wir die Daten in einem separaten Modul haben werden. Der Code sieht ein bisschen hässlich aus, weil wir die Details hier haben, und das ist überhaupt nicht nett. In der nächsten Vorlesung werden wir die Daten also werden wir die in ein anderes Modul aufteilen. Wir sehen uns in der nächsten Vorlesung. 123. 121 Refactoring: In dieser Vorlesung werden wir den Code umgestalten. Mit Refactoring meine ich einfach, dass wir die Daten von den UI-Komponenten trennen werden. Gehen Sie also schnell zum VS-Code. Und lassen Sie mich Ihnen zeigen, wie Sie den Explorer öffnen. Und richtig, würde das SRC nicht. Wir werden ein neues Paket namens Datendatei erstellen , oder? Wir sind in der Datendatei. Wir werden eine neue Datei mit dem Namen Benutzerdaten erstellen . Punkt j ist genau hier. Wir werden die Benutzerdaten haben. Also mache ich eine Spot-Konstante, verwende sie als Daten, setze sie auf ein leeres Array und öffne es. Also richtig, wir sind in diesem Array, wir werden die Zeilen einfügen. Also Heron als Liste verwenden. Lass mich dir hier die Reihen zeigen. Also werde ich aus den Zeilen 208290 hervorheben, es abschneiden. Wir müssen das nur vom Heroin abwischen, um diese Daten verwenden zu können. Ich werde das einfach so einfach einfügen. Lassen Sie uns nun weitermachen, um wenigstens Fehler zu machen. Wir werden Benutzerdaten aus der Datendatei importieren und Benutzerdaten mit einem Schrägstrich versehen. Also genau hier werden die Zeilen den Benutzerdaten entsprechen. Wenn Sie speichern und im Browser auschecken. Hier funktioniert alles wie erwartet einwandfrei . Das ist alles für heute. Und in der nächsten Vorlesung werden wir sehen, wie man benutzerdefinierte Daten hinzufügt. Wir sehen uns dann. 124. 122 Benutzerdefinierte Daten hinzufügen: In dieser Vorlesung werden wir die Tabelle anpassen. Ordnung, also werden wir sehen, wie unseren eigenen benutzerdefinierten Artikel hinzufügen können, oder? Wir sind am Tisch. Lassen Sie mich Ihnen schnell zeigen, wie Sie das mit VS-Code machen. Also hier werde ich ruhiger vorgehen. Wir werden unsere benutzerdefinierten Felder und Daten hinzufügen. Und dann werden wir das mit der Render-Cell-Methode tun können . Mit der Render-Methode können Sie einen React-Node anstelle einer Zeichenfolge zurückgeben. Also hier werde ich zufällige Zellenspalten öffnen und schließen, um Klammern zu öffnen und zu schließen. Und wir nehmen einen Parameter. Parameter, setzen Sie diese auf unsere Funktion und die darin enthaltenen Rechte, wir geben ein React-Element zurück , in diesem Fall div, mit dem Klassennamen des Benutzers, oder? Wir sind in diesem Div, wir werden ein Bild haben. Jetzt. Das Bild entspricht den Parametern Punkt Rho-Punkt Avatar-Bild zeigt dir den Befehl P, und dann direkt, um unseren Datenpunkt g zu verwenden, also hier ist der Avatar. Ordnung, wir wollen also dieses Bild abrufen und es zusammen mit der Tabelle anzeigen, so einfach ist das. Komm her. Alternative hier, wir werden eine Internetverbindung herstellen. Näher ran mit dem selbstschließenden Etikett, direkt im Inneren. Wir machen params dot rho dot username seven, checkout. Der Browser. Die Idee ist, können Sie sehen, dass das Bild extrem groß ist , sodass es nicht richtig erscheinen kann. Lassen Sie uns das Bild schnell stilisieren, damit es sauber erscheint. Richtig? Wir sind in der Benutzerliste. Okay, lass es mich dir zeigen. Also hier müssen wir nur den AMD-Klassennamen kopieren. Ups, ich glaube, wir müssen den Klassennamen angeben. Ja, lass uns das schnell machen. Geben Sie den Klassennamen des Benutzers IMG ein, markieren Sie ihn und kopieren Sie ihn. Komm her. Punkt-Benutzer IMG. Geben wir ihm eine Breite von 40 Pixeln, Höhe von 40 Pixeln und dann einen Randradius. Es werden 50 Prozent sein. Margin, richtig? Neun Pixel. Objekt passt. Machen wir es sicher. Siehst du jetzt haben wir das Profil, das Nest und die Limette soll an der Action arbeiten. Direkt unter dieser Aktion möchten wir also eine Schaltfläche zum Bearbeiten und eine Schaltfläche zum Löschen haben. Wenn wir also auf die Schaltfläche Bearbeiten klicken, gelangen wir zur Profilseite, auf der wir auch Benutzer bearbeiten und aktualisieren können. Wenn wir auf die Schaltfläche Löschen klicken, wird ein bestimmtes Element gelöscht, um es in die Tabelle einzufügen. Wenn du dich dafür entscheidest, diesen Kerl zu löschen , wird er gelöscht. Okay. Wir löschen den Artikel anhand ihrer ID, Heroin und VS-Code. Und lassen Sie uns die Aktionen umsetzen. Wir werden genau das Gleiche tun. Also genau hier wollen wir natürlich einen Knoten zurückgeben. Also werden wir die Render-Cell-Methode verwenden. Nimmt einen Parameter auf. Dann können wir hier jetzt ein Reaktionselement zurückgeben. Also hier haben wir ein Div, dieses Div ist ein Klassenname für einen Aktionscontainer, oder? Wir sind in diesem Div, wir werden ein Boot fahren, geben Sie ihm den Klassennamen Benutzer. Also werden wir direkt im inneren HTML Änderungen vornehmen. Und hier haben wir die Schaltfläche Löschen. In diesem Fall verwenden wir jedoch das Löschsymbol aus den Symbolen oben. Und hier werden wir importieren, löschen, gliedern. Von diesem Typen hier. Hier haben wir also die Kunstlinie „Löschen“ das Löschen des sich selbst schließenden Tags. Geben wir ihm den Klassennamen delete, least, save, es sei denn, sie werden Browser genannt. Kannst du sehen, dass wir jetzt den Bearbeiten-Button haben und das Voting löschen können, allerdings. Es sieht nicht gut aus wie erwartet. Also lasst es uns schnell stilisieren und es besser aussehen lassen. Benutze all dieses CSS. Der Benutzer von Dod Edit muss überprüfen, ob die Schreibweise korrekt ist. Okay. Für mich, kannst du jetzt hier sehen dass es in Karma Case geschrieben ist und hier. Genau aus diesem Grund teile ich den Bildschirm gerne auf. Nett. Lassen Sie uns die Grenze kennen. Wir machen uns nicht wirklich die Mühe. Also der Grenzradius. Machen wir fünf Pixel daraus. Polsterung. Fünf Pixel, zehn Pixel. Hintergrundfarbe. Lass es uns dunkelblau machen. Und die Schriftfarbe wird weiß sein. Rand rechts? Der rechte Rand beträgt 20 Pixel. Wenn Sie im Browser speichern. Kannst du jetzt sehen, dass der Button wunderschön aussieht. Lassen Sie uns das Löschsymbol dialysieren. Hier. Wir werden Punkte haben. Lassen Sie mich es direkt von hier kopieren , damit wir keinen Fehler machen. Die Farbe wird rot und kausal sein. Sorgen wir dafür, dass sie in Sicherheit ist. Jetzt sieht alles klassisch aus. Ich liebe diese. In Ordnung, ich möchte, dass Sie etwas zur Kenntnis nehmen. Mein Hals. Klicken Sie auf einen beliebigen Teil der Tabelle, um ihn auszuwählen. Sie sehen, dass es notwendig ist, präzise zu sein. Wenn ich die Seite neu lade, möchten wir, dass diese Option nur ausgewählt wird , wenn der Benutzer darauf klickt, wie hier. Okay? Wir wollen also nicht, dass solche Dinge passieren. Es ist überhaupt nicht gut. Gehen wir also zurück zum VS-Code und verwenden ihn dann als Liste. Scrollen Sie nach unten. Genau hier. Wir würden die Auswahl bei onclick deaktivieren. Neu laden. Okay. Jetzt kannst du sehen, wenn ich hier klicke, es hat keinen Einfluss auf die Chatbox. Wir können also einen Artikel nur auswählen, wenn Sie ihn direkt überprüfen. Siehst du, dass das genau sein muss? Die Vanessa-Linie soll die Löschfunktion implementieren. Also ich denke, das können wir in der nächsten Vorlesung machen. Wir sehen uns dann. 125. 123 Delete-Button: In dieser Vorlesung werden wir die Schaltfläche Löschen implementieren. Wenn der Benutzer also unten auf Löschen klickt, sollten wir in der Lage sein, ein bestimmtes Element aus der Tabelle zu löschen . Okay, lassen Sie uns das schnell implementieren. Musste nicht VS Code. Ganz oben. Wir werden die notwendige Zustandsvariable deklarieren , die verwendet werden soll. Hier mache ich const, data, set data. Der Anfangszustand werden also die Benutzerdaten sein. Und bitte stellen Sie sicher, dass Sie es oben importiert haben. Hier. Ist es schwer, oder? Jetzt legen wir also den Ausgangszustand fest, der als Daten verwendet werden soll. Dabei handelt es sich um die Daten, die für die Datendatei geeignet sind den Ausgangszustand fest, der als Daten verwendet werden soll . Nest soll die Funktion definieren. Wir werden es hier haben. Konstante hundert Klicks entsprechen, stellen Sie es auf Ihre Funktion ein . Und dann werden wir direkt in der Funktion einige Male Daten in Datenpunkte setzen. Wir müssen also die Tabelle durchgehen und ein bestimmtes Element anhand seiner ID entfernen. Ja, also lass uns das machen. Hier. Wir nehmen einen Artikel und ich mache die Punkt-ID des Artikels. Wir geben den Onclick rechts innerhalb der Löschgliederung an. Wir werden den Onclick spezifizieren. Jetzt. Wir rufen das Handle an, klicken Sie hier. Eigentlich ist es gut. Wir ändern diese Funktion , um Löschungen zu verarbeiten. Ordnung, dieser Name ist also ziemlich relevant den Zweck, für den die Schaltfläche erstellt wurde. Hier, 200 löschen. Einfach so. Dann nehmen wir hier die Parameter dot rho dot id auf. Also direkt in der Zeile müssen wir die Daten aufnehmen, das ist dieser Typ hier. Dieser Typ hier behält den Anfangszustand bei und es sich heraus, dass der Anfangszustand als Daten verwendet wird. So einfach ist das. Hier müssen wir also nur zur Tabelle gehen und ein bestimmtes Element anhand seiner ID löschen. Und danach müssen wir auch die Tabelle aktualisieren und im Browser speichern. In Ordnung, es heißt, dass die ID nicht definiert ist. Hier. Okay, lass uns zu unserem Code gehen. Vermassel es, lass es mich dir zeigen. Ordnung, also müssen wir hier eine ID als Parametersafe für das Browser-Gedicht verwenden. Versuchen wir es, indem wir auf die Schaltfläche Löschen klicken. Also musst du das nur im Auge behalten. Ich möchte diesen Artikel mit der ID 5 löschen. Okay? Siehst du, der Gegenstand war die Idee von fünf ist weg. Lassen Sie mich jetzt einfach den Artikel mit der ID von zwei löschen. Du siehst, es ist weg. Wenn wir weiter löschen. Kannst du sehen, dass alles wie erwartet einwandfrei funktioniert. Aber wenn Sie die Seite neu laden, werden wir die Artikel haben. Aber weißt du warum? Das liegt einfach daran, dass wir es nicht irgendwo lagern. Also mach dir keine Sorgen, das ist keine große Sache. Ordnung, jetzt ist die nächste in der Reihe, die Schaltfläche Bearbeiten zu implementieren. Wenn wir auf die Schaltfläche Bearbeiten klicken, möchten wir die ID und die Benutzerdetails an eine neue Seite weitergeben . Lass es mich dir schnell zeigen. Lassen Sie mich den Code formatieren. Dies ist die Schaltfläche „Bearbeiten“. Stimmt es? Jetzt. Ich muss nur die Dame angeben und das Bootfahren hervorheben und es einziehen. Also müssen wir auf Slash verlinken, User Slash, einfach so. Dann Parameter Punkt Rho Punkt ID. In Ordnung, jetzt geben wir die ID an eine neue Seite weiter. Lassen Sie uns speichern und sehen, was wir im Browser haben. Link ist nicht definiert, okay, lass uns ihn schnell importieren. Importiert den Link vom React-Router , um ihn im Browser zu speichern. Lass es uns versuchen. Siehst du das? Wenn Sie nun die Wanne beobachten, werden Sie einen Gegenstand mit der ID eines Objekts sehen. Lass es mich dir noch einmal zeigen. Ich klicke auf diesen Artikel mit der ID fünf. Kannst du es hier sehen? Jetzt haben wir einen Artikel mit der ID fünf. Das ist alles für heute. Und in der nächsten Vorlesung werden wir damit beginnen, das Benutzerprofil zu erstellen, das die Benutzergeschwindigkeit darstellt. Wir sehen uns dann. 126. 124 Benutzerprofil: In der vorherigen Vorlesung haben wir das Mindeste des Benutzers implementiert. Ordnung, wenn ich jetzt auf die Schaltfläche Bearbeiten klicke, wird die Entzündung mit der Idee einer Entzündung auf eine neue Seite übertragen. Kannst du hier sehen, wir haben die ID von einem. Und hier sind wir auf einer neuen Seite. Geh zurück. Wenn ich auf die Schaltfläche Bearbeiten des Benutzers mit der ID fünf klicke , wird die ID sowie die Details der Person an eine neue Seite übergeben . Kannst du das sehen? Das werden wir also in dieser Vorlesung umsetzen. Hier drüben. Möglicherweise sehen Sie nichts direkt auf dem Bildschirm. Lassen Sie uns also schnell mit der Implementierung beginnen. Gehen Sie zum VS-Code. Das erste, was wir tun werden, ist die Route zu implementieren. Öffne die App Js. Genau hier. Wir werden die Route haben, geben Sie den Pfad an. Dann wird es so aussehen. Schrägstrich, Benutzer haben einen Schrägstrich in der Spalte und dann Benutzer-ID. Jetzt werden die Elemente die eigentlichen Komponenten sein, zu denen wir umleiten möchten. In diesem Fall wird es ein Benutzerprofil sein. Bitte stellen Sie sicher, dass Sie es oben importieren. So einfach ist das. Speichern. Und jetzt nutzen wir unser Profil weiter . Lassen Sie uns die CSS-Datei schnell mit der Komponente verknüpfen. Wisch das ab. Geben wir diesem Div den Klassennamen des Profil-Top-Containers. Also direkt in diesem Div werden wir ein weiteres Div mit dem Klassennamen des Profiltitelcontainers haben ein weiteres Div mit dem Klassennamen des , direkt darin. Wir werden ein Head-On-Tag haben, geben ihm einen Klassennamen oder einen Profiltitel. Jetzt werden wir Boot fahren. Geben Sie ihm einen Klassennamen oder ein Profil, fügen Sie Stimmrechte innerhalb des inneren HTML-Codes hinzu. Ich werde den Benutzer erstellen. Okay? Also direkt nach dem schließenden Div mit dem Klassennamen des Profil-Tidal-Containers werden wir ein weiteres Div haben, geben Sie ihm den Klassennamen Profilcontainer. Und dann ein Div mit dem Klassennamen Professional, oder? Innerhalb des Div mit dem Klassennamen des Profils. Sicher. Wir werden ein weiteres Div mit dem Klassennamen von profound show TO haben, wir werden ein IMG-Tag haben, das entspricht SRC. Ich kopiere einfach ein zufälliges Bild im Internet und füge es hier ein. Der ganze Link ist richtig, könnte er nicht helfen? Hier, ist es? In Ordnung, geben wir ihm schnell den Klassennamen profile show IMG. Schließen wir es mit dem selbstschließenden Etikett. Direkt nach dem Bild. Wir werden noch einen Div haben. Gib ihm einen Klassennamen ab. Profildetails, richtig? In den Profildetails werden wir Spam haben. Zeige einige Einstellungen, Dinge wie den Namen des Benutzers, den Titel und den Rest. Geben wir dem einen Klassennamen meines Profiltitels. Und den Titel werde ich einfach machen React, The React Developer. Also gleich nach dem letzten Div von Profile Shoe Top werden wir einen weiteren Div haben. Geben Sie ihm den Klassennamen Profil, Schuhunterteil, einfach so. Dann haben wir eine Spanne mit dem Klassennamen, dem Profil und dem Titel der Show. Wir werden diese verwenden, um die Kontodetails wie folgt anzuzeigen . Lassen Sie uns ein Div mit dem Klassennamen des Profils Show Info haben. Und genau darin werden wir hier einige Symbole haben. Dafür. Gehen wir nach oben. Importiere alle notwendigen Symbole, die für das Benutzerprofil benötigt werden. Also ganz oben, ich werde einen Teil machen, wir werden PEM-Identität importieren, ruhigerer Kalender heute. Ruhiger Standort, Suchen, Ruhiger, Männlich, Gliederung, Koma, Voll-Android, und veröffentlichen. Alles wurde aus den Dash Materials von MY Slash Icons importiert . Natürlich weißt du , dass ich hier ihre Identität habe, verschließe sie von dem selbstschließenden Etikett. Und direkt darin gebe ich ihr einen Klassennamen oder ein Profilshow-Symbol, das sich hier unten befindet, wir werden eine Spanne haben, als geben wir ihr den Klassennamen Profilschuh als Titel. Ordnung, also werde ich das Projekt speichern und dann schauen wir, was wir im Browser haben. Ordnung, das Bild nimmt also tatsächlich den gesamten Bildschirm ein. Also lasst uns das Bild schnell stilisieren. Komm her, oder? Und das Profil-CSS. Okay, lassen Sie uns zuerst den oberen Behälter des Profils dialysieren. Dieser Typ hier, Highlight Copy, komm her, Punkte Profil oben im Container. Und dann haben wir Flex, um sechs zu sein. Es belegt diese Einheit des Bildschirms. Und dann spezifizieren wir das Padding als Trainingspixel. Wenn Sie auch den Browser auschecken, Sie die Änderungen hier möglicherweise nicht sehen, aber Sie werden feststellen, dass die Seitenleiste tatsächlich kleiner ist. Okay, lassen Sie uns das Bild schnell stilisieren, um einen genaueren Blick darauf zu werfen, was wir bisher gemacht haben. Hier lautet der Clustername des Images professionell, IMG. Wir müssen nur die Größe des Bildes angeben. Ich nehme die Höhe, um zu sein, machen wir 40 Pixel daraus. Breite. Machen wir 40 Pixel daraus. So einfach ist das. Wenn Sie im Browser speichern, die IDs. Perfekt, also das haben wir jetzt. Lass uns weitermachen. Gehe zurück zu VS Code. Lassen Sie uns den Stil für das Bild fertigstellen , damit wir nicht dazu kommen müssen. Schon wieder. Geben wir ihm einen Grenzradius. 50 Prozent. Objekt passt. Lass es uns cava machen, speichern und im Browser auschecken. Okay, perfekt. Ist so nett. Aber was ich jetzt tun werde, ist die Höhe und die Breite zu ändern. Ich ändere es auf 100 Bilder. Ich möchte, dass das Bild etwas größer ist. Unsere Rechte, ich finde das okay. So kannst du am Ende jede Größe behalten. Aber für mich ist das genau das, was ich mag. Profil GAS. Also hier werde ich einfach dieses Div mit dem Klassennamen von profile show info aus den Zeilen 25 bis 27 hervorheben mit dem Klassennamen von . Und dann werde ich es viermal duplizieren. Also müssen wir das Symbol und die Details ändern. Also hier wird heute der Kalender sein. Und ich bin hier. Ich muss nur die Urkunden spezifizieren. Nehmen wir es sollte eine Telefonnummer geben. Also werde ich tun und tun, was du willst. Sie werden in Umrissen gefräst. Also gehe ich einfach zu do@gmail.com. Hier haben wir den Standort und die Suche. Also kann ich New York City machen, spare. Und mal sehen, was wir im Browser haben. Oder schreibe. Wunderschön. Fahren wir mit dem nächsten Abschnitt fort. Okay. gleich nach dem Abschluss von Professional zeigen, Lassen Sie mich Ihnen gleich nach dem Abschluss von Professional zeigen, dass dies der Profilschuh ist. Also direkt nach dem letzten Div, das bei Zeile 54 schließt, falls du meinem Beispiel wirklich folgst. Wir werden ein weiteres Div haben, geben Sie ihm den Klassennamen Profilupdate. Wir werden eine Zeitspanne haben. Geben Sie ihm einen Klassennamen und einen Titel für die Profilaktualisierung. Das wird bei D erledigt. Jetzt werden wir ein Formular haben. Stimmt, wir sind im Formular. Okay, geben wir also den Klassennamen an. Profil, Firma aktualisieren. Wir werden hier ein Div haben, geben Sie ihm links und rechts den Klassennamen Profilaktualisierung. Innerhalb dieses Divs werden wir einen weiteren Div haben. Geben Sie ihm einen Klassennamen für Profilaktualisierungselemente. Dann werden wir einen Label-Profilnamen haben. Hier werden wir ein Eingabe-Tag haben. Der Typ ist ein Quad-Test, der Platzhalter. Geben wir ihm einen Klassennamen für das Profilupdate. Zurechnungen. Schließ es. Was ich jetzt tun werde, ist das Div mit dem Klassennamen des Profils zu markieren , das Element zu aktualisieren, alles darin zu markieren und es dann viermal zu duplizieren. Gut. Jetzt werden wir diese beiden vollständigen Namen ändern. Dann. Dies werden E-Mails sein. Hier. Wir können eine Telefonnummer angeben. Hier können wir es so einfach angehen. Also direkt nach dem Schließen des Profilupdates habe ich diesen Entwickler hier gelassen. Lass es mich dir noch einmal zeigen. Hier ist das Div mit dem Klassennamen von profile update links, direkt nach dem schließenden Div, das hier geschlossen wird. Wir werden ein weiteres Div mit dem Klassennamen von Profile Update haben , oder? Richtig, innerhalb dieser Division. Geben wir ihm einen Klassennamen für Profil, Update oder Upload. Jetzt werden wir ein IMG-Tag haben, SRC equa. Auch hier kopiere ich dasselbe Foto und füge es hier ein. Dieser Bildlink hier drüben, kopieren und einfügen. Geben wir dem Bild den Klassennamen Profilupdate, IMG. Näher ran mit dem selbstschließenden Etikett. Direkt unter dem Bild werden wir ein Etikett haben. Html fallen einer Datei gleich. Schließ es. Und genau hier rufen wir das Veröffentlichungssymbol auf. Schließe es mit dem selbstschließenden Etikett. Geben wir ihm einen Klassennamen oder ein Profilaktualisierungssymbol. Hier haben wir ein Eingabe-Tag, das sich direkt innerhalb des Core-Dateityps schließt . Die ID, ein Qualifikator. Geben wir ihm etwas Stil. Das Display wird bekannt sein. Also lass es uns testen. Speichern Sie den Browser. Es heißt, keiner ist nicht definiert. Geh zurück. Eigentlich muss das in ein Zitat verpackt werden, schneiden Sie es aus und fügen Sie es hier ein. Speichern. Schau es dir noch einmal an. Wunderschön. Dieses Bild sieht extrem groß aus. Mach dir keine Sorgen. Das werden wir in Zukunft machen. Wenn Sie also nach unten scrollen, sehen Sie hier dieses veröffentlichte Symbol. Wenn Sie auf dieses Symbol klicken, wird ein Ordner geöffnet, aus dem wir ein Bild auswählen können. Klicke darauf. Können Sie sehen, dass Sie jetzt direkt auf Ihrem PC auf das Bild zugreifen können. Konsole. Scrollen Sie nach oben. Hier sind die Formulare. Lass uns jetzt weitermachen. In jedem Formular müssen Sie auf jeden Fall eine Unterseite haben, auf die klicken würden, um das Formular abzuschicken. Das ist zumindest das, was wir jetzt umsetzen werden. Also gleich nach dem Schließen von div formatieren wir den Code schnell erneut. Gleich nach diesem Abschluss-Div. Wir werden Boot fahren. Geben wir ihm einen Klassennamen für die Schaltfläche zur Profilaktualisierung. Und hier werden wir Updates machen. Das ist also der Test, der auf der Schaltfläche angezeigt wird. So einfach ist das. Speichern wir den Code. Gehen Sie zurück zum Browser und scrollen Sie nach unten. Hier ist der Boden. Sie sehen, wenn ich auf den Button klicke, lernt die Anwendung erneut. In Ordnung, das ist alles für heute. Und in der nächsten Vorlesung werden wir beginnen, das Benutzerprofil zu stilisieren. Und glauben Sie mir, das Ergebnis wird überwältigend sein. Wir sehen uns in der nächsten Vorlesung. 127. 125 Profile: Willkommen zurück, alle zusammen. So schnell. Beginnen wir damit, die Profilkomponente für VS-Code zu stilisieren. Wir beginnen mit dem Profilaktualisierungsbild. Lass mich dir schnell dieses Bild hier zeigen , weil es auf den Desktop geht, was wir tun werden. Lassen Sie uns es dafür schnell dialysieren. Punkte. Profil, Bild aktualisieren. Die Breite ist 80. Die Höhe ist 80. Grenzradius. Fünf Pixel. Objekt-Feeds, Cava. Rand links. 19 Bilder. Lass uns speichern und den Browser auschecken. Stimmt es? Alles sieht gut aus. Ich liebe es so. Lass uns weitermachen. Gehe nach oben. Also hier beginnen wir dem Profil mit dem Titel Container Copy. Und stellen Sie bitte sicher, dass das CSS in den drei vorkommenden Klassen gesetzt ist. In Ordnung, wir werden einen Display-Flex haben. Richten Sie Elemente mittig aus und richten Sie den Inhalt aus. Wir wollen, dass es ein Leerzeichen dazwischen gibt. Also mache ich den Zwischenraum. Lassen Sie uns den Boxschatten spezifizieren. Wir müssen den normalen Box-Shadow kopieren , den wir in diesem Kurs verwendet haben . Füge es hier ein. Geben wir ihm eine Hintergrundfarbe. Schräg ausweichen. Wenn Sie Ventrikel zum Browser sagen. Die Idee ist, siehst du, jetzt haben wir das Zeug hier drüben. Wir werden den bevorzugten Titel stilisieren. Gib ihm eine Farbe. Alice blau. Rand links, zehn Pixel. Die Schrift ist 300. Das Nest ist das Profil beim Bootfahren. Also dieser Knopf hier hat Blähungen verordnet. Die Breite beträgt 100 Pixel. Randabstand, fünf Pixel. Rand rechts? Zehn Pixel. Die Hintergrundfarbe ist Aquamarin. Geben wir ihm einen Randradius von fünf Pixeln. Und die Kosten werden darauf hindeuten , dass Sie sparen und es sich ansehen. Ich schreibe wunderschön. Nun zum Profilcontainer, dem Typen hier drüben, wir werden einen Display-Flex haben. Der obere Rand besteht aus 19 Bildern. Der Box-Shadow ist wie immer. Nun zur Profilshow, Flex, ich werde eine Party in 19 Bildern sein. Nun zur Profilshow Talk, Display Flex. Richten Sie die Elemente mittig aus. Schauen wir uns den Browser an. Geschafft, alles nimmt allmählich Gestalt an. Nest ist das Profilupdate. Lass mich dir das hier unten zeigen. Markieren Sie die Kopie. Flex to Power in 19 Pixeln. Rand links, 19 Bilder. Kannst du sehen, jetzt haben wir es hier ausgerichtet. Gut. Als nächstes kommt das Profil-IMG. Und natürlich haben wir es genau hier gemacht, nämlich die Profilshow IMG. Jetzt müssen wir die Profildetails stilisieren. Lass mich danach suchen. Okay. Ist es das Profil, das das Team teilt, fließt, biegt die Richtung. Wir wollen es von oben nach unten, richtig. Also werde ich den Doppelpunkt machen. Wenn Sie im Browser speichern. Kannst du sehen, dass das die Profildetails sind. Also, wenn ich die Flexrichtung abnehme, schauen wir mal, was passiert. Sie sehen, dass der Hügel der Details der untersten Reihe liegt. Was ist los? Ich gebe die Flexrichtung als Spalte an. Sehen Sie sich jetzt das neue Verhalten an. Gut. Okay, geben wir den linken Rand an. 19 Bilder. Nest ist mein Profilname. Die Schriftstärke beträgt 300. Dann haben wir hier meinen bevorzugten Titel. Das Gleiche hier. Kopieren, Einfügen, Profil, Schuh, Unterseite, Rand oben sind zehn Bilder. Jetzt haben wir das Profil, Titel anzeigen. Die Schriftgröße beträgt zehn Pixel. Lustiger Tweet. Lass uns dafür sorgen, dass es 100 Farben sieht. Ich werde das RGB verwenden. Für Rot. Wir werden 17570 Stück Grün und 170 Stück Blau im Browser haben . Hier ist es. Gehen wir zur nächsten Zeile, in der Profile Informationen anzeigen. Lassen wir es Flex anzeigen, Elemente ausrichten, Mittelpunkt, Rand, Elementpixel und Pixel anzeigen. Und die Farbe wird, sie wird grau sein. Speichern Sie, sehen Sie es sich an. Siehst du jetzt, dass der ganze Ort hier tatsächlich Gestalt annimmt. Und ich mag es. In Ordnung, alles ist in Ordnung. Nest ist eine professionelle Ikone. Also wollen wir die ganzen Icons hier stilisieren. Geben wir ihm eine Farbe. Dodge Apple, du bist in Sicherheit, oder? Okay. Nett. Ich liebe es so. Wir werden den ShowInfo-Titel des Profils stilisieren. Geben wir ihm eine Schriftgröße von 22 Pixeln. Die Schriftbreite 600. Kannst du jetzt sehen, dass die Bearbeitung dicker aussieht. Das Nest ist das Formular zur Profilaktualisierung. Als habe ich eine Display-Flex- und dann eine Flex-Richtungsspalte. Dann profiliere Artikel unter Label. Der untere Rand wird fünf Pixel betragen. Schriftgröße. Es werden 17 Pixel sein. Nun zur Profilaktualisierung in Perioden, dod Profilaktualisierung, dann haben wir die Breite 250 Pixel, die Höhe 21 Pixel. Geben wir ihm die Polsterung. Die Polsterung beträgt fünf Pixel. Grenze. Der Rand ist ein Pixel. Ein Pixel durchgehend grau. Geben wir ihm einen Randradius, weil wir wollen, dass er ein bisschen kurvig ist. Machen wir fünf Pixel daraus. Speichern Sie den Browser. Die Kinder. Wunderschön. Okay, wir müssen also alles aufeinander abstimmen. Lass uns das schnell machen. Jetzt sind das Nest und die Linie das Profilobjekt genau hier. Ist es Kopieren, komm her, füge es ein. Dann haben wir einen Display-Flex, die Flex-Richtungsspalte . Rechtfertigen wir den Inhalt. Leerzeichen zwischen der Schaltfläche „Aktualisieren“ unten. Aber ich weiß wirklich nicht, warum die Imputes nicht gut aufeinander abgestimmt sind. Wenn wir mit dem Button fertig sind, werden wir auf jeden Fall sozusagen ein paar kleine Kästchen oder Fehler korrigieren. Okay, lass uns weitermachen. Das Profil muss aktualisiert, hochgeladen, markiert und kopiert werden. Wir werden einen Display-Flex haben. Lassen Sie uns die Elemente mittig ausrichten. Nun zu den Profilaktualisierungs-Symbolen müssen wir nur noch den Kausalzeiger angeben, der auf das Profil-Update-Boarding verweisen soll. Lass mich das hier sehen. Markieren und kopieren. In Ordnung, also ich denke, wir müssen es richtig sortieren. Das wird genau hierher kommen. Weil wir die Schaltfläche zum Aktualisieren des Profils haben und das Profilaktualisierungssymbol, das Profil und das Bild aktualisieren haben. So wird es also sortiert. So konsultiert, wie Sie es möchten. Aber stellen Sie sicher, dass Sie sich das in Zukunft merken können. Die Grenze ist keine. Grenzradius, fünf Pixel. Polsterung, fünf Pixel. Das Kausal ist Zeiger, Schriftbreite, Wippen und Lesen. Die Hintergrundfarbe. Dann wird die Schriftfarbe weiß sein. Wir speichern den Browser. Wenn Sie also den Schaum beobachten, werden Sie feststellen, dass die Imputes nicht gut aufeinander abgestimmt sind. Und wie alles, es gibt kein Leerzeichen zwischen der Eingabe und auch der Button sollte nicht hier sein. Wir wollen, dass es im richtigen Alter angepasst wird, okay? Ich möchte, dass du das Video am Ende pausierst und so viel wie möglich versuchst , dieses Problem zu beheben. Und danach können Sie das Video fortsetzen, um meine Lösung für diese Probleme anzusehen. Lass mich dir meine Ethik zeigen. Gehe zurück zum VS-Code. Scrollen Sie zum Formular zur Profilaktualisierung. Hier ist es. Also wischen wir die Flexrichtung ab. Und ich werde den Inhaltsabstand zwischen dem Speichern rechtfertigen , schauen Sie sich den Browser an. Jetzt haben wir diese Ausrichtung hier drüben, und das ist die richtige Ausrichtung. Das einzige Problem, das wir hier haben , ist, dass zwischen dem Eingabeformular und den Beschriftungen sowie zwischen den Eingabefeldern kein Leerzeichen ist Eingabeformular und den . Gehe zurück zum VS-Code. Jetzt mache ich hier den oberen Rand. Machen wir es Nacht in Pixeln. Nachdem wir das getan haben, müssen wir jetzt auch das Element zur Profilaktualisierung stilisieren das Element zur Profilaktualisierung Hier liegt das Problem bei Lee. In Ordnung, wir werden also einen Display-Flex haben. Und dann wird die Biegerichtung eine Spalte sein, wodurch die Elemente von oben nach unten ausgerichtet werden. Sie müssen also nur das Profilaktualisierungselement wie folgt kopieren . Fügen Sie geschweifte Klammern ein, um sie zu öffnen und zu schließen. Lassen wir es Flex anzeigen. Die Flexrichtung ist eine Spalte. Wenn Sie den Browser speichern und auschecken. Hier ist es. Und jetzt ist alles wie erwartet gut aufeinander abgestimmt. Ich liebe diese. Lass uns noch eine Sache machen. Ich möchte, dass oben so etwas geschrieben wird. Geh zurück und das wird der bevorzugte Titel sein. Das haben wir wohl vergessen. Ich mache „Profil bearbeiten“. Wenn Sie im Browser speichern. Hier ist es. Kannst du sehen, dass alles wie erwartet aussieht? Das ist alles für den Moment n. In dieser Vorlesung werden wir die Komponente „ Benutzer erstellen“ implementieren. Sudan. 128. 131 User erstellen: In dieser Vorlesung werden wir die Komponente „ Benutzer erstellen“ implementieren. Wenn wir also auf das Boot „Benutzer erstellen“ klicken, werden wir zur Komponente „Benutzer neu erstellen“ weitergeleitet , in der wir neue Benutzer erstellen können , die sich schnell an den VS-Code drängen, sofern wir nicht fortfahren. Befehl B zum Öffnen des Explorers, richtig, würde das Benutzerverzeichnis nicht entschlüsseln. Wir werden eine neue Komponente namens create user the cheers erstellen. Generieren Sie die funktionale Komponente. Lassen Sie uns schnell die entsprechende CSS-Datei erstellen. Nett. Schließen Sie den Explorer-Befehl P und suchen Sie dann nach App Js. Das erste, was wir jetzt tun werden, ist die Route zu implementieren. Genau hier. Ich muss das nur markieren und dann hier duplizieren , oder? Wir sind in der Schnur. Der Pfad wird ein Schrägstrich sein, Benutzer erstellen. Und die Elemente, die gerendert werden sollen sind die Komponente „Benutzer erstellen“. Und bitte stellen Sie sicher , dass Sie es oben importieren. Stimmt. Lassen Sie uns nun sehen, ob das, was wir getan haben, tatsächlich funktioniert. Ich werde diesen Teil hier kopieren, direkt zu VS Code. Lass uns nach Hause gehen. Jetzt füge ich es hier ein. Es ist die Enter-Taste. Haben Sie recht? Jetzt befinden wir uns also in der Komponente Grid-Benutzer. Wunderschön. Sie sollten jedoch wissen, dass Ihre Endbenutzer in einer realen Anwendung den Pfad möglicherweise nicht auf diese Weise kopieren können. Also müssen wir die Schaltfläche zum Bearbeiten von Link-Benutzern implementieren. Und wenn wir dann auf „Benutzer erstellen“ klicken, möchten wir zu den Komponenten „Benutzer rekrutieren“ weitergeleitet werden. Lassen Sie uns also weitermachen und diesen unteren Teil mit einem Link abschließen . Benutzerprofil. Hier ist unten rechts, hier werde ich einen Link machen. Wir möchten hier auf diesen Teil verlinken. Okay? Markieren Sie dann das Bootfahren. Verschieben Sie es innerhalb des Links nach rechts. Das ist also der Teil , den wir direkt in der App Js erstellt haben , so wie dieser. Wenn Sie also die Anwendung im Browser speichern und auschecken , heißt es, dass der Link nicht definiert ist. direkt in das Benutzerprofil zurück um den Link vom React-Router zu importieren. Wir werden den Link von React Router importieren . Tu es nicht. Wenn Sie die IDs erneut im Browser speichern. Probieren wir es aus, indem wir auf gekauften Benutzer erstellen klicken. Kannst du das sehen? Wunderschön? Jetzt fangen wir an, die Creatives als Seite zu implementieren. 129. 126 Benutzerkomponente erstellen: In dieser Vorlesung werden wir die Komponente „ Benutzer erstellen“ implementieren. Wenn wir auf das Boot „Benutzer erstellen“ klicken, sollten wir zur Komponente „Benutzer neu erstellen“ weitergeleitet werden. Wir werden hier neue Benutzer erstellen können. Lassen Sie uns also schnell den VS-Code hinzufügen, um ihn zu implementieren. Vs Code-Befehl B, um den Explorer zu öffnen. Das erste, was wir tun werden, ist die Komponenten zu erstellen. Also richtig, wir sind im Benutzerverzeichnis. Wir werden eine neue Komponente namens create users.js erstellen. Generieren Sie die funktionale Komponente. Lassen Sie uns die entsprechende CSS-Datei erstellen. Wunderschön. Also müssen wir die CSS-Datei mit den Komponenten verknüpfen. Geben Sie Punkt, Schrägstrich, Erstellen, Benutzerpunkt, CSS ein. Und bitte machen Sie sich Notizen. Das ist ein kleiner Brief. Lassen Sie uns nun schnell den Route-Befehl P implementieren , um die Setbox oben zu öffnen. Und dann mache ich mich auf den Weg zu unserer App. Also genau hier muss ich diesen Typen hervorheben und ihn dann duplizieren. Also müssen wir jetzt den Pfad angeben. Highlights, wisch es ab. Der Pfad lautet Slash create user. So wie das. Dann werden die zu rendernden Komponenten, in diesem Fall das Element , create user. Bitte stellen Sie sicher, dass Sie es oben importieren. Schließen Sie den Explorer. Jetzt müssen wir diesen Pfad kopieren und es versuchen. Komm her, geh zurück nach Hause. Genau hier. Ich werde es einfügen. Drücken Sie die Enter-Taste. Und bumm, es ist die Komponente Pixel zur Rekrutierung von Benutzern. Hier drüben. Lassen Sie uns diesem Div schnell den Klassennamen des Containers create users geben. Markieren, kopieren. Gehen Sie zurück zur CSS-Datei dot create users container. Dann machen wir es für gut, machen wir sechs draus. Dann beträgt das Padding 20 Pixel. Wenn Sie den Browser speichern und auschecken. Ups, sieh es dir an. Der Benutzer ist ebenfalls in Kleinbuchstaben. Was vorher passiert ist , war , dass die Komponente die CSS-Datei nicht sehen konnte weil die EU auf einem Großbuchstaben stand. Jetzt ist alles in Ordnung. Speichern Sie im Browser. Hey, ist es so, dass der Create-Benutzer sechs Einheiten des Bildschirms einnimmt. Aber ich möchte auch, dass Sie verstehen , dass der Client in einer realen Anwendung den Pfad möglicherweise nicht so implementieren kann. Sie können möglicherweise nicht den gesamten Pfad so eingeben. Was wir also tun müssen, ist, das Create user boating mit dem Link abzuschließen das Create user boating mit dem Link , sodass der Benutzer, wenn auf Creative Juices Boating klickt, er auf Creative Juices Boating klickt, auf die Seite Benutzer erstellen gelangt. Wenn ich jetzt auf die Schaltfläche klicke, passiert nichts. Vs Code öffnet das Benutzerprofil. Also hier werden wir einen Link haben. Und wir möchten verlinken, lassen Sie mich Ihnen diesen Teil hier zeigen , den wir zuvor erstellt haben. Schrägstrich, Benutzerprofil erstellen zwischen die Anführungszeichen einfügen. Dann müssen wir das Bootfahren markieren es in den Link verschieben. Lassen Sie uns den Code schnell mit Prettier formatieren. Sieht nett aus. Nachdem wir das getan haben, probieren wir es aus. Sicher im Browser. Versuchen wir es, indem auf das Team „ Benutzerpool erstellen“ klicken. Kannst du sehen, dass als Aspartat alles einwandfrei funktioniert? Fangen wir also an, die Kreativen als Unternehmen zu gestalten. Schließen Sie es und dann die App-Komponente. In Ordnung, markiere diese, wisch sie ab. Also gut, in diesem Div werden wir ein Headtag haben. Geben wir ihm einen Klassennamen mit einem neuen Benutzertitel. Und der Titel wird New User sein. Unter dem H1-Tag. Wir werden eine Firma haben, weil wir unser Formular erstellen müssen , um die Daten des neuen Benutzers zu sammeln. Und richtig, wir sind im Formular, wir werden die Eingabefelder haben. Aber geben wir diesem Formular vorerst Clusternamen create user. Von hier aus werden wir ein Div haben. Geben Sie ihm den Klassennamen eines neuen Benutzerelements, direkt innerhalb des Divs, wir werden ein Label haben. Also richtig, wenn dieses Etikett. Wir machen den Nutzernamen. Wenn Sie den Browser speichern und auschecken. Hier ist es. Kannst du den Benutzernamen sehen? Hier ist der Titel, hier ist das Etikett. dieses Level tragen, wollen wir hier ein Eingabefeld haben. Unterhalb des Levels werden wir also die Attributschrift verwenden. Der Eingabetyp entspricht Text. Der Platzhalter, Issaquah. Sie sehen. Schließen wir es mit dem selbstschließenden Etikett. Seitlich beziehen sich die Platzhalter auf den Text, der als Standard direkt im Eingabefeld angezeigt wird . Schau es dir an. Kannst du jetzt sehen, dass wir im Eingabefeld sind, wir haben ein Testgänseblümchen. Und hier ist das Eingabefeld. Gut. Die nächste Zeile besteht nun darin, dieses Div mit dem Klassennamen des neuen Benutzers zu kopieren . Kopiere alles zwischen dem Div und dupliziere es dann sieben Mal. Jetzt fangen wir an, das Level zu ändern und die restlichen Öfen hier werden ihren vollen Namen haben. Dann werden wir hier eine E-Mail haben. Hier werden wir ein Passwort haben. Also werde ich so etwas machen. Mach dir keine Sorgen. Es bedeutet nichts. Es ist nur ein Platzhalter. Und hier werden wir eine Telefonnummer haben. Das wird unsere Adresse sein. Und vergiss New York City nicht. Jetzt werden wir die Agenda umsetzen. Das wird also tatsächlich einige Dinge erfordern, also müssen wir es zusammen machen. Die Tagesordnung muss entweder männlich oder weiblich sein. In Ordnung, jetzt benutzen wir den Radiobutton. Dann wird hier der Eingabetyp nicht mehr getestet, sondern Radio sein. Derzeit ist kein Platzhalter erforderlich. Der Name equa agenda, the ID, equal male, value, equal mirror. Jetzt werden wir hier ein anderes Label haben. Für eine Kernmühle. Im HTML-Code des Labels werden wir essen. Also werde ich jetzt diesen Typen hervorheben. Kopieren. Komm her, füge es ein. Der Eingabetyp ist also Radio, der Name ist Geschlecht. Aber dieses Mal wird die ID weiblich sein und der Wert wird weiblich sein. Außerdem muss ich diesen Typen nur hervorheben und kopieren. Komm her, füge es ein. Jetzt wird es weiblich sein, und hier wird es weiblich sein, einfach so. Markieren Sie Duplikat. Also hier werden wir die Bestellung machen. Okay, vielleicht haben wir andere Agenden, die ich nicht kenne. Du kannst es nicht Armee nennen , wenn du das weißt. Jetzt werde ich das hier machen. In Ordnung, schauen wir uns das im Browser an. Wunderschön. Kannst du hier sehen, wir haben männliche , weibliche und andere Agenda. Okay, also ich weiß das nicht, aber vielleicht lass uns weitermachen. Kehren Sie zum VS-Code zurück, sofern Sie das Top nicht ausführen. Also, was ich jetzt tun werde, ist, all diese Dinge in einem Div zusammenzufassen. Von hier aus mache ich div gebe ihm einen Klassennamen für die Agenda für neue Nutzungen. Stimmt, wir sind im Div. Ich werde die Zeilen 42 bis 46 hervorheben. Zieh es rein. Hier, ist es? In Ordnung, also lasst uns das Label schnell auf Geschlecht ändern. Okay, gut. Also richtig, wir befinden uns in dieser abschließenden Div, dieser abschließenden Div mit dem Klassennamen eines neuen Benutzerelements. Wir werden ein weiteres Div mit dem Klassennamen des neuen Benutzerelements haben . Ordnung, also neues Benutzerelement, richtig, setzen wir das Div ein, wir werden ein Label haben. Und ich mache hier aktiv, das ist der innere HTML-Code, der auf dem Bildschirm erscheint. Hier ist es. Jetzt haben wir eine Auswahloption. Geben Sie dieser Auswahl den Klassennamen der neuen Benutzerauswahl. Lassen Sie uns den Namen angeben. Machen wir das aktiv. Die ID. Aktiv, oder? Wir wählen ein Tag aus. Wir werden zwei Möglichkeiten haben. Möglichkeit. Der Wert wird lauten, oops, das sollte eine Zeichenfolge und keine Klammer für Kollegen sein. Wir werden uns hier haben, oder? Wir sind im inneren HTML. Wir werden es markieren, duplizieren. Und auf jeden Fall solltest du wissen, was das sein wird. Nein und nein. Einfach so. Lass uns einen CT-Browser speichern. In Ordnung, wir haben die Auswahloption. Kannst du sehen, wenn du klickst, hast du ja oder nein. Alles funktioniert wie erwartet einwandfrei. Formatieren Sie den Code erneut, damit wir eine korrekte Einrückung haben können . Und schließlich geben wir direkt nach dem schließenden Div mit dem Klassennamen des neuen Benutzerelements den Text body an. Geben wir dieser Botanikklasse den Namen der Schaltfläche Neuer Benutzer. Schafft. Wenn Sie im Browser speichern. Und Knochen. Hier ist das Create Boating. Und die Form ist eigentlich nett, aber nur, dass sie nicht wie erwartet besonders schön aussieht. Aber mach dir keine Sorgen. In der nächsten Vorlesung werden wir alles reparieren lassen und dann wirst du die Art Com lieben. Das ist alles für heute. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie fokussiert und ganzheitlich. 130. 127 Create erstellen: In Ordnung, willkommen zurück an alle. In dieser Vorlesung werden wir die Komponente „ Benutzer erstellen“ stilisieren. Also, ohne weitere Umschweife, lasst uns anfangen. Lassen Sie uns nun mit dem neuen Benutzertitel fortfahren. Wir werden einen Display-Flex haben. Lassen Sie uns die Elemente zentrieren. Dann. Begründen Sie den Inhalt. Zwischenraum. Okay, geben wir ihm einen Kastenschatten. Kopieren. Natürlich sollten Sie inzwischen wissen, wo Sie diesen Box-Shadow finden. Die Hintergrundfarbe, Dodge oder Blau. Dann die Schriftfarbe. Ich mache es Alice Blue. Polsterung von fünf Pixeln. Wenn du sparst. Schauen wir uns den Browser an. Kannst du sehen? Stimmt es? Fangen wir also mit dem Typen hier an, das ist das Telefon. Nun zum Crit-Benutzerformular. Wir lassen es Flex anzeigen, dann Flex Wrap. Wir werden es fallen lassen. Lass uns sparen und sehen, was wir haben. Stimmt es? Okay, das ist das Ergebnis. Also lass uns weitermachen. Das Nest ist das neue Benutzerelement. Markieren, kopieren. Komm her. Die Breite 400 Pixel. Lassen wir es die Spalte Flex, Flex Direction anzeigen. Mal sehen, jetzt wird das von oben nach unten angeordnet. Kannst du sehen, jetzt sind wir da. Rand, obere zehn Pixel, Rand rechts? 20 Pixel Jetzt wollen wir dieses Label stilisieren. Und wenn Sie den Bildschirm beobachten, werden Sie feststellen, dass sich diese Bezeichnung direkt im neuen Klassennamen des Benutzerelements befindet. Also, was ich jetzt tun werde, ist diesen Typen zu markieren Copy, come here, paste. Wir müssen uns auf den einfachsten Rand beziehen, unteren zehn Pixel. Die Schriftgröße wird 14 Pixel betragen. Die Breite beträgt 100. Die Farbe, die die Farbe der Form ist. In Ordnung, also lass es uns grau machen. Wenn Sie die Kaufabwicklung speichern, der Browser. Kannst du sehen? Wunderschön. Lass uns weitermachen. Nun zu den neuen Benutzerobjekt-Imputes, lassen Sie mich Ihnen zeigen, welches für die Eingabe-Tags ist. In Ordnung, auch hier. Wenn Sie den Bildschirm betrachten, werden Sie feststellen, dass sich das Eingabe-Tag direkt im Div mit dem Klassennamen neuer Benutzerelemente befindet. Also werde ich es einfach noch einmal hervorheben. Dieses Mal muss ich einfach alles so hervorheben. Ich bin hier, füge ein und dann müssen wir den Imput referenzieren. Die einfachste ist die Höhe 20 Pixel, wobei zehn Pixel aufgefüllt werden. Der Rand, ein Pixel, durchgehend grau, der Randradius, fünf Pixel. Okay, schauen wir mal, was wir an Bord haben. Gewinn. Sieht nett aus. Jetzt müssen wir die neue Benutzeragenda stilisieren. Lass uns sehen. Hier ist es Copy Dots? Sie verwenden Agenda. Und dann müssen wir den Input referenzieren , weil wir die Radiobuttons und den Rest von ihnen erfassen wollen. Also Rand oben. Machen wir 15 Pixel für das Etikett, oder? Würde die Nachrichtenagenda nicht? Wir beziehen uns auf diese Labels. In Ordnung. Und ich, ich werde diese hervorheben. Komm her. Einfügen. Ich mache Label. Der Rand als Pixel. Schriftgröße 18 Pixel. Die Farbe wird toll sein, aber lass es uns so machen. Fünf mal fünf. Aber dieses Grau ist eine Art Tika. Okay, lass es uns auf dem Bildschirm überprüfen. Gut davon in Nizza. Dann ist der nächste in der Reihe das Bootfahren und dieser Typ hier drüben, das ist die Auswahltaste und das Ding, das erstellt werden kann. Hier markieren wir die neue Benutzerauswahl, den Kopierpunkt, die Auswahl durch den neuen Benutzer und direkt darin. Geben wir die Höhe von 40 Pixeln an. Das hat fünf Pixel reduziert. Speichern. Gut. Alles nett. Lassen Sie uns schnell die Benutzerabstimmung erstellen. Ähm, dann schnappen wir uns schnell den Klassennamen. Der Klassenname hier ist neu. Benutze Abbrechen, Markieren und Kopieren. Komm her. Punktneutronen sind beide dünn. Und jetzt müssen wir diese Handtücher auftragen. Die Breite 200 Pixel. Die Grenze ist bekannt. Wir wollen keine Grenze. Die Hintergrundfarbe. Ich werde es hier oben ausweichen lassen. Die Farbe, in diesem Fall die Schriftfarbe, okay, machen wir sie zu Alice-Blau. Oder ich kann es auch weiß machen. Padding, links, rechts, sieben Pixel, oben, unten, zehn Pixel. Die Schrift hat einen Rand von 600, die oberen 30 Pixel. Lassen Sie uns schnell den Grenzradius implementieren. Randradius und Pixel sind in Ordnung. Und zu guter Letzt das Kausale, es wird Teergießen sein. Wenn Sie den Browser speichern und auschecken. Am Ende werden wir eine wunderschöne Expertin haben. Schau es dir an. Kannst du sehen, dass alles so gut aussieht und ich liebe diese. Also hier sind die Imputes. Alles cool. Freunde. Hier. Aktiv ist nein. Du schaffst es. Ja. Okay. Ich kann zwischen Mai und weiblich wählen oder es könnte eine andere Agenda sein, die ich im Moment nicht kenne. Dann haben wir hier die Tagesordnung selbst erhöht. Wir müssen etwas ändern. Das ist die Agenda, das Etikett hier, wir müssen es korrigieren. Öffnen Sie also den Benutzer erstellen. Hier. Wir können einfach altern, sagen wir 28,7, es rausnehmen. Gut. Alles funktioniert wie erwartet. Freunde, diese Komponente ist extrem schön und ich mag sie. Lassen Sie uns die gesamte Benutzerkomponente testen , um zu sehen, ob alles einwandfrei funktioniert. Ich bin nach Hause gegangen. Wunderschön. Genau hier. Ich habe auf den des Benutzers geklickt. Es führt mich zu den Juden als Liste. Ich kann einzelne Benutzer auswählen. Ich kann das Häkchen auch entfernen. Ich berate. Also, wenn wir hier mehr Artikel mit unterschiedlichen Fotos unter verschiedenen Namen haben , werdet ihr sehen, dass es sortiert wird. Also einfach, weil ich überall den gleichen Test verwende, Sie es vielleicht nicht bemerken, aber ich kann Ihnen versichern, dass das Salz einwandfrei funktioniert. Stimmt es? Also hier kannst du klicken und dann kann ungesucht nach aufsteigender Reihenfolge sortieren. Sie können filtern. Du kannst hier eine ganze Menge Sachen machen. Das kannst du auch. Löschen. Kannst du sehen, dass es einwandfrei funktioniert. Dann können Sie bearbeiten. Wunderschön. Alles sieht gut aus. Nach der Bearbeitung müssen Sie also nur noch auf die Unterseite Aktualisieren klicken. Aber denken Sie daran, dies ist nur eine Benutzeroberfläche. Daher funktioniert die Update-Funktionalität derzeit möglicherweise nicht. Wenn Sie also weitermachen, klicken Sie auf die kreativen Säfte Bootfahren und Bumm. Kannst du das sehen? Wunderschön? Alles ist nett. Das ist alles für heute. Und in der nächsten Vorlesung beginnen wir mit den Produktblättern. Wenn wir also auf die Produktliste klicken, sollten wir zur Komponente Produktliste weitergeleitet werden. Wir sehen uns dann. 131. 128 Product: In dieser Vorlesung werden wir mit den Komponenten der Produktliste fortfahren. Die Produktlistenkomponente ist also eigentlich dasselbe Paradigma wie die Listenkomponente des Benutzers. Ordnung, wir werden ähnliche Sachen wie dieses haben, aber nur, dass sich auch die Header-Namen ändern werden . Die Bilder. Aber die Tabelle ist genau dieselbe. Wir werden die MAOI-Datentabelle verwenden. Also schnell im VS-Code versteckt. Und beginnen wir mit der Implementierung des Route-VS-Code-Befehls B, um den Explorer zu öffnen. Also hier sind die Seiten, und das ist die Produktliste. der rechten Maustaste direkt in die Produktlisten, um die Produktlistenkomponente zu erstellen. Generieren Sie die funktionale Komponente und erstellen Sie schnell die entsprechende CSS-Datei. Öffne die App Gears. Hier ist Lee, wo wir das Routen-Duplikat implementieren werden . Hier gebe ich einen Pfad zur Produktliste an. Und dann werden wir die Komponenten der Produktliste rendern . Achte immer darauf, es oben zu importieren. Sicher. Versuchen wir es , um zu sehen, ob der Pfad tatsächlich funktioniert. Komm zurück nach Hause. Und hier werde ich es ganz oben einfügen. Klicken Sie auf die Eingabetaste. Und bumm, jetzt sind wir in der Produktlistenkomponente. Wunderschön, aber es sieht so aus , als würde nichts auf dem Bildschirm angezeigt, oder? Also lasst uns das schnell beheben. Jetzt haben wir innerhalb des CSS zunächst zwei Div, dieses div ist ein Klassenname des Produktlistencontainers. Markieren und kopieren Sie den Klassennamen Punkt des Produktlistencontainers. Und dann lassen wir es biegen. Sechs, sicher. Speichern Sie hier im Browser. Hey, ist es? Können Sie jetzt sehen, dass wir die Produktliste geschrieben haben. Nur am äußersten Ende. Alles funktioniert wie erwartet einwandfrei. Vertrau mir. In der nächsten Vorlesung beginnen wir mit der Konstruktion der Komponenten. Wir sehen uns dann. 132. 129 Product: Willkommen zurück an alle. In dieser Vorlesung werden wir mit der Gestaltung der Produktliste fortfahren. Und natürlich ist es einfach die Datentabelle, die wir in der vorherigen Vorlesung für die Benutzertabelle implementiert haben . Also, was ich jetzt tun werde ist zum Code-Helper zu gehen. Wir werden die Produktdaten kopieren. Und das sind alles bearbeitete Details. Wenn du es alleine machen willst, ist das ganz einfach. Öffnen Sie die Datendatei. Hier werden Daten verwendet. Komm her. Wir werden es gleich hier einfügen. Was wir hier haben, ist also genau das gleiche Paradigma wie was wir hier haben. Dies sind die Daten des Benutzers. Ja, es ist also genau dieselbe Idee. Wenn wir die ID, den Benutzernamen, den Avatar , der als Bild dient, den E-Mail-Status und die Zahlung haben. Wenn Sie also zu den Produktdaten gehen, haben wir die ID, den Namen, das Bild, den Bestand, den Status und den Preis. Also haben wir einfach die Felder geändert. Okay, perfekt. Gehen wir nun zurück zur Produktliste. Schon wieder. Gewöhnlicher P.sit. Wir werden den Benutzer am wenigsten öffnen . Stimmt es? Würde die Benutzerliste nicht? Wir haben die Kopie von hier bis zu diesem Punkt. Okay. Kannst du 9-64 sehen? Sie sehen, stellen Sie sicher , dass Sie korrekt kopieren. Kopieren Sie, kommen Sie zur Produktliste, fügen Sie sie hier ein. Gehen Sie erneut zur Benutzerliste zurück. Wir müssen die Daten auch kopieren. Einverstanden? Das haben wir in der vorherigen Vorlesung gemacht, als wir die Benutzerliste implementierten . Also das solltest du inzwischen wissen. Pestis zerreißen alles cool, alles auch schön. Wir müssen einige Eingaben kopieren. Wir werden das Datenraster importieren. Hier. Wir wollen all diese Dinge hier nutzen. Löschen. Wir kopieren die Zeilen drei, Zeilen fünf, das ist das Datenraster, die Verknüpfung und die Löschgliederung. Fügen Sie es auch hier ein. Wir müssen die Ustedes kopieren weil wir den US-Did-Hook verwenden werden. Wir beginnen mit der Implementierung der Löschtaste und speichern die Anwendung. Jetzt müssen wir die Felder mit exakt denselben Daten abgleichen, die wir direkt in den Produktdetails haben , wenn Sie die Datendatei öffnen. Also hier haben wir ID, Name, IMG, Bestand, Status und Preis, weiter zur Produktliste. Nachdem wir dies getan haben, werden wir Produktdetails aus SRC-Schrägstrichdaten mit Schrägstrich und Produktdaten mit Schrägstrich importieren Produktdetails aus SRC-Schrägstrichdaten mit Schrägstrich und Produktdaten . Einfach so. Okay? Also hier werden wir die Felder genau den gleichen Feldern zuordnen , die wir in den Daten haben. Also hier wird der Feldname Produkte sein. Der Kopf und der Name. Es wird ein Produkt sein. Genau hier, tut div, geben wir den Klassennamen des Produktlistenelements, geben dem IMG einen Klassennamen der Produktliste, IMG, was die Produktliste ist. Jedes Bild. Wir müssen hier vorsichtig sein, um keinen dummen Fehler zu machen. Wir werden das E-Mail-Feld auf Stock ändern, Wir werden das E-Mail-Feld auf Stock ändern so wie wir es in den Daten haben. Das wird der Status sein. Das wird der Status sein. Das Nest und die Schlange hier werden Price sein . Lass es mich dir zeigen. Wir haben den Status und wir haben den Preis. Hier haben wir die Action. Das hilft also beim Löschen und Bearbeiten, wenn eigentlich alles gleich ist, nur dass wir die Klassennamen und den Rest ändern müssen. Also hier haben wir ein Div mit dem Klassennamen von Action Container. Und wir haben eine Schaltfläche mit dem Klassennamen des Bearbeitungsbenutzers. Lassen Sie uns den Namen der untersten Klasse in einen produktiven Listeneditor umwandeln. Und hier ändere ich das auf Produkt löschen. Cool. In Ordnung, also zum Schluss scrolle nach oben und lass es mich dir zeigen. Wir müssen das also als Ausgangszustand annehmen. Wischen Sie es ab, markieren Sie es, kopieren Sie, kommen Sie her, fügen Sie die Daten direkt hier ein, speichert die Produktdaten als Ausgangszustand. Und die Produktdaten befinden sich direkt in diesem Modul. Und es umfasst all diese Artikel hier. Es ist so einfach wie diese Produktliste. Scrollen Sie nach unten und dann entsprechen Zeilen den Daten, die sich oben befinden. Speichern und checken Sie den Browser aus. Es heißt, dass Länder mit SRC-Datendateien die Produktdaten kürzen. Okay. Lassen Sie uns den Import erneut durchführen, Produktdaten importieren. Moment scheint es also, dass wir eine separate Datei für die Produktdaten erstellen sollten . Also, was ich jetzt tun werde, ist, zu kopieren, komm her, direkt in die Datendatei. Wir werden eine neue Datei erstellen, Produktdaten, Punkt js. Dann Heron, um unsere Daten zu verwenden. Lass uns alles so kopieren. Markieren. Schneide es von hier ab. Jetzt haben wir ein separates Modul für die gesamten Dateien , die wir verwenden werden. Und ich denke, das ist eine bessere Idee. Produktdaten. Und behalte es hier. Gut. Fügen wir den einzelnen Produktdetails ein S hinzu. Gehen wir nun zurück zur Produktliste. Also werde ich den Import wieder von vorne beginnen. Importiere Produktdetails von diesem Typen hier. Ich füge S to eat als Produktdetails hinzu. Ich denke, wir sind fertig. Sicher. Checkout, der Browser. Wunderschön. Klicken wir auf die Produkte. Im Moment haben wir die Artikel. Kannst du sehen? Etwas sehr Schnelles? Wir werden jetzt die Flocken spezifizieren , damit sie einige Einheiten auf dem Bildschirm annehmen können. Richtig, in der Produktliste. Ups, wir haben es hier gemacht. Lassen Sie uns also schnell die CSS-Datei mit der Komponente verknüpfen. Lassen Sie uns schnell CSS für Produktlisten mit Schrägstrichen importieren. Wenn Sie den Browser speichern, wird alles wie erwartet angezeigt, und ich liebe es. Im Moment wird das Bild nicht angezeigt. Schauen wir uns also die Schaltfläche zum Löschen an. Kannst du sehen, dass die Schaltfläche zum Löschen einwandfrei funktioniert? Siehst du? Schau es dir an. Coole Leute. Wenn ich neu lade, zeigen alle Elemente unseren Anfang. Das ist kein Problem , da dies nur eine statische Website ist. Ordnung, wenn wir also anfangen, es mit dem Backend zu implementieren, werden einige Daten irgendwo gespeichert. Und wenn wir dann löschen, aus der Datenbank löschen, verstanden, wunderschön. Versuchen wir, auf die Schaltfläche Bearbeiten zu klicken. Okay, die Schaltfläche Bearbeiten führt uns zur Benutzersprache des Editors, und das sollte nicht sein. Also geh zurück. Versuchen wir nun, das Bild zu reparieren. Wenn Sie in die untere rechte Ecke des Bildschirms schauen, sehen Sie die Paginierung. Wenn Sie also auf „ Können Sie sehen“ klicken, bewegen wir uns von einer Spitze der Tabelle zur anderen Seite. Okay. Gut. Im Moment wird das Bild nicht angezeigt. Mach dir keine Sorgen. Dafür habe ich eine einfache Lösung. Unterbrechen Sie die Vorlesung schnell, um sie zu beenden, und versuchen Sie, das Problem zu lösen. Wenn Sie fertig sind, können Sie das Video fortsetzen und meine eigene Lösung dafür sehen. Okay, vermassele es und lass es mich dir zeigen. Richtig, würden wir bei der Rendermethode hier nicht sagen, dass der SRC ein params dot rho dot avatar sein wird , ein Substantiv. Wenn Sie die Produktdaten öffnen, werden Sie feststellen, dass wir hier keinen Avatar haben. Alles, was wir hier haben, ist AMD. Wir müssen also auf das IMG verweisen und den Avatar notieren. Komm her und füge die IMG-Parameter Dot roll, dot IMG ein, wenn du im Browser speicherst. Und das sind sie, aber die Bilder erscheinen nicht wie erwartet. Es liegt also einfach daran, dass wir es nicht stilisiert haben. Okay, die Größe des Bildes hier ist also extrem groß. Es wird also vorerst nicht wie erwartet erscheinen , aber unvorsichtig. In der nächsten Vorlesung werden wir es schnell beheben. Das ist oft unser n. Lassen Sie uns schnell zur nächsten Vorlesung übergehen , um dieses Unternehmen zu stilisieren. 133. 130 Produktliste Css: Ordnung, lassen Sie uns Komponente der Produktliste, Heroin, zu VS Code stilisieren . Öffnen Sie die Produktliste CSAs. Und jetzt können wir den Bildschirm teilen. Öffnen Sie dann die Produktliste und scrollen Sie durch die Benutzeroberfläche. Also möchte ich zuerst, dass wir das Bild stilisieren. Also hier haben wir die Produktliste, IMG Punkt Produktliste IMG. Die Breite und die Höhe werden 50 Pixel betragen. Der Grenzradius. Fünf Pixel. Objekt passt. Einband. Speichern. Kannst du jetzt sehen, dass es in Ordnung scheint. Aber ich möchte auch, dass wir die Anzahl der Elemente erhöhen , die in dieser Tabelle angezeigt werden. Scrollen Sie also nach unten. Hier steht die Seitengröße, ich mache acht daraus. Wenn Sie im Browser speichern. Kannst du sehen, dass es ein Problem mit diesem Bild hier mit der ID von fünf gibt. Das Produkt war also die Idee von fünf. Wir müssen es überprüfen. Produktdaten. Lassen Sie uns hier nach dem Produkt mit der Idee von fünf suchen, oder? Warum tauchst du nicht auf? Okay, was ich jetzt tun werde, ist ein anderes Produkt von hier zu kopieren. Dann lassen wir es ersetzen, wischen es ab, kleben es hier ein. Wenn Sie uns retten und sehen, was als Nächstes passiert, funktioniert einwandfrei. Jetzt haben wir die Anzahl der Artikel erhöht , die auf unserer Tabelle angezeigt werden. Denken Sie daran, Ihre CSS immer zu sortieren und so, wie sie in der Komponentenzeile erscheinen , wird das Element der Produktliste sein Markierung und Kopie stehen ganz oben. Das Produktlistenelement steht also vor dem IMG der Produktliste oder dem Bild der Parameterliste. Wir werden einen Display-Flex haben. Lassen Sie uns die Elemente zentrieren. Der Rand wird zehn Bilder betragen. Wenn Sie den Browser speichern und auschecken. Okay, gut. Es sieht sauberer aus. Das Nest ist der Produktlisteneditor. Und es kommt direkt nach der Produktliste IMG. Lassen Sie mich Ihnen eine Urkunde zur Produktliste zeigen, markieren Sie sie und fügen Sie sie hier unter dem Produktlistenbild und dann unter dem Rand ein. Keine. Was ich um zehn Pixel reduziere. Padding, fünf Pixel, zehn Pixel. Die Hintergrundfarbe. Dodge W. Die Farbe. Es wird weiß sein. Konsole. Es wird Zeiger sein, Rand, oder? 20 Pixel Speichern und checken Sie den Browser aus. Die Beweise dieser Typen scheinen gut zu sein. Und lassen Sie uns das Bearbeiten Bootfahren einfach dialysieren. Was wir tun werden, ist die Farbe zu ändern. Kopieren Sie also den Klassennamen von product delete. Komm her, Punkt Produkt löschen. Gib die Farbe. Die Farbe wird rot sein und der Cursor wird Teer gießen. Sie speichern und auschecken den Browser. Und boom, alles sieht aus wie erwartet. Aber im Moment ist mir schnell aufgefallen, dass das Benutzerbild hier in der oberen rechten Ecke des Bildschirms, das sich hier in der oberen Navigationsleiste befindet, einfach verschwunden ist. Da drüben ist nichts. Es könnte ein Problem mit der Internetverbindung bei mir sein. Also hab keine Angst. Stellen Sie sicher, dass Sie das Problem beheben. Wenn es einen Treffer gibt, ist das vorerst alles. Wir sehen uns im nächsten Abschnitt dieses Kurses. Pass auf dich auf.