Das vollständige React-Bootcamp 2023 (aktualisiert)

1. Einführung: Willkommen im kompletten React Bootcamp. Hallo, mein Name ist Andrew und ich bin React-Entwickler. Hallo, mein Name ist unser Ash und ich kann UI UX Designer. Wollten Sie schon einmal eine App ähnlich wie Twitter oder Facebook erstellen? Bevorzugen Sie Praxis gegenüber Theorie? Wenn ja, sind Sie zusammen am richtigen Ort, wir werden drei separate Projekte von unterschiedlicher Komplexität von Grund auf neu erstellen, ein Tic-Tac-Toe Spiel und Film Search App und schließlich ein Geschwätz. Dieser Kurs richtet sich an Personen, die gerne Web-Apps entwickeln möchten. Wir Technologien, die heutzutage immer beliebter werden. Zuerst besprechen wir alle Grundlagen, die Sie kennen müssen, bevor Sie in React springen. Hier werden wir über keine GS, gute clientseitige und serverseitige Rendering-APIs und wichtige Tools sprechen, damit Sie sich in jeder Phase der Entwicklungsansätze wohl fühlen. Gleich danach haben wir einen dedizierten JavaScript-Abschnitt, aber wir haben die neuesten und aktuellen Funktionen der Sprache entdeckt. Dann bewegen wir uns leicht, um mit dem kleinen Teil der Theorie zu reagieren. An dieser Stelle werden Sie wissen, sobald Riak hergestellt ist und wie es funktioniert. Von hier aus starten wir mit unserem ersten Projekt, dem Tic-Tac-Toe Spiel. Es hat eine moderne Benutzeroberfläche mit coolen Animationen und nahtlose Funktionalität in diesem Projekt, lernen Sie zuerst reagieren kennen. Sie lernen, wie Sie Komponenten erstellen, dynamische Stile in Benutzeroberflächen. Aber wir werden über Statusverwaltungs- und Komponentenlebenszyklusereignisse mit Hooke's sprechen. Am Ende dieses Projekts werden Sie in der Lage sein, eine einfache Web-App zu erstellen, die Ihre starke Reaktion Basic zeigt, und Sie werden den Entwicklungsfluss im Allgemeinen erleben. Das zweite Projekt heißt „Kasse“. Es fungiert als Suchmaschine für TV-Filme und Shows. Sie können Informationen über jeden Film oder AG erhalten. Und darüber hinaus können Sie sie zu Favoriten hinzufügen, um sie in der Zukunft zu überprüfen, wir diese Projekt, Sie bewegen sich in Richtung einer komplexeren React-App oder Sie arbeiten mit externen APIs und verwalten nicht-primitive Szenarien mit Kostüm 3i-Hooks. Darüber hinaus erfahren Sie mehr über CSS und JS als Alternative für Styling und Anwendung, wir werden das Konzept der dynamischen Routen und Remote-Datenabruf zu erkunden. Sie werden auch verstehen, wie Sie React-Komponenten mithilfe von integrierten Reaktionswerkzeugen optimieren und analysieren können. Am Ende dieser Projekte werden wir unsere App sogar in eine progressive Web-App verwandeln, die offline funktioniert. Nach Abschluss der Abendkasse können Sie eine typische React-Anwendung erstellen, die umfassendere und erweiterte React-Kenntnisse erfordert. Unser abschließendes Projekt wird ein Chat mit den beliebtesten Funktionen sein, die von jeder Chat-Anwendung benötigt werden. Dazu gehören Social Media Logins, Account-Management, rollenbasierte Berechtigungen, Echtzeitdaten und viele andere coole Funktionen in diesem Projekt, werden Sie Firebase in erster Linie kennen lernen. Hier werden Sie die Benutzerauthentifizierung und das globale Zustandsmanagement beherrschen. In diesem Stadium wird React Hooks Ihre Hauptwaffe sein, um eine produktionsfähige React-App zu entwickeln , die Stile selbst verwaltet, ist nicht immer wünschenswert. Deshalb werden wir hier eine UI-Komponentenbibliothek verwenden, um ein vordefiniertes Designsystem zu verwenden. Schließlich werden wir unser eigenes Backend mit Cloud-Funktionen entwickeln, und wir werden die Echtzeit-Benachrichtigungsfunktion zu unserer Chat-Anwendung hinzufügen. Warte, du bist noch nicht fertig. Sie sind bereit, Ihnen in jeder Phase des Kurses zu helfen und Ihre Fragen so schnell wie möglich zu beantworten. Sind Sie bereit zu erforschen, reagieren Sie gemeinsam. Wir sehen uns in der Klasse. 2. Anforderungen: Hallo, mein Name ist Andrew. Ich werde dein Instruktor sein. Werfen Sie Dick Koers. Lassen Sie mich Ihnen von den Voraussetzungen erzählen, damit dieses Gericht anfangen kann, mit reagieren zu können. Zunächst einmal alles Wissen aus HTML und CSS unerlässlich. Ich werde keine zusätzliche Aufmerksamkeit geben, um zu erklären, was dif Tag ist. Dasselbe gilt für CSS. Ich erwarte, dass Sie über Klassen und Selektoren Bescheid wissen, aber keine Stopps machen, um HTML- und CSS-Grundlagen zu erklären . Aber Sie können immer Fragen in den Commons stellen. Es gibt definitiv ein paar Schlüsselmomente von HTML und CSS, und das wird erklärt. Aber die meiste Zeit werden wir mit JavaScript arbeiten. Ich erwarte nicht, dass Sie ein gutes JavaScript sein oder einige anständige Erfahrung haben. Ich wollte über Programmierung im Allgemeinen wissen, Sie müssen grundlegende Dinge verstehen, wie was verfügbar ist oder ein Krieg ist ein Vier-Look. Du wirst es bekommen, du weißt es heute. JavaScript-Syntax. Während des Kurses ist es sehr benutzerfreundlich Herz zu verstehen. Teile werden erklärt, also mach dir keine Sorgen darüber. Es gibt auch einen speziellen Abschnitt, der Onley zu JavaScript gewidmet ist. Es deckt die wichtigsten Aspekte der Sprache ab, um sicherzustellen, dass Sie genug wissen, um mit Reaktionseilen zu beginnen , und ich versuche, alles so glatt wie möglich zu machen. Trotzdem wollte ich so viele Fragen stellen, wie Sie können. Und sei nicht schüchtern, dumme Fragen zu stellen, die immer da waren, um dir zu helfen. Lassen Sie uns schnell zusammenfassen. Sie müssen sich bewusst sein, HTML CSS und einige allgemeine Programmierkenntnisse. Das war's. Wir sehen uns im nächsten Video. 3. Updates und Probleme: Hey, in diesem Video möchte ich auf eine Datei verweisen, die Ihnen über die Updates und Änderungen erzählt , die Menschen während des Kurses machen. Im Web ändert sich alles ständig. Und um mit aktuellen Inhalten auf dem Laufenden zu bleiben, haben wir diese Datei erstellt. Bitte finden Sie Updates und Probleme dot pdf-Datei im Bereich Projekte und Ressourcen innerhalb Sie zwei wichtige Kapitel, wichtige Updates und häufige Probleme zu sehen . Wichtige Updates betreffen alle, die den Kurs besuchen. Bitte lesen Sie dieses Kapitel, um Inkonsistenzen während der Videos zu vermeiden. Häufige Probleme beziehen sich auf potenzielle Fehler, die möglicherweise auftreten, und deren Lösungen zusammen. Bitte beziehen Sie sich auf diese Datei an erster Stelle, wenn Sie ein Problem haben. Im schlimmsten Fall lesen Sie bitte Kapitel drei. Wir möchten Sie immer auf dem neuesten Stand halten. Nur. Viel Glück bei den Projekten. 4. Einführung in den ersten Abschnitt: Hey, willkommen zum Kurs in der Rubrik Mobile Abdeckung Alle Dinge, die wir wissen müssen, bevor wir anfangen Mit der React-Entwicklung. Dazu gehören Werkzeuge, ein wenig Theorie und ein paar andere Dinge. Ich hoffe, Sie genießen sie. Wir sehen uns dort. 5. Git + Git Bash (Windows): Hey, in diesem Video werden wir installieren und bekommen was gut ist und warum brauchen wir es? All das werden wir im kommenden Video behandeln. In diesem Video dreht sich alles um die Installation. Lass uns gehen. Wie immer öffnen wir zuerst Google und dann werden wir danach suchen und dies wird uns auf die offizielle Website bringen. In einem neuen Tab öffne ich nicht geladen. Und auf der aktuellen Registerkarte suche ich nach Git, der vor Ort installiert ist. Dies bringt uns zu mindestens one.com. Warum brauchen wir es? Wenn Sie Unstimmigkeiten bei der Git-Installation feststellen oder wenn Sie wegen der Git-Installation verloren gehen. Dies ist das neueste, aktuelle Tutorial zur Sonneneinstrahlung. Das empfehle ich. Wenn Sie also unter macOS, Linux, Windows sind , spielt das keine Rolle. Navigieren Sie einfach hierher und es ist sehr einfach und unkompliziert. Alles klar, jetzt gehen wir zurück zu Downloads. Dieses Video richtet sich an Windows-Benutzer, aber wenn Sie von Linux oder macOS stammen, ist es auch völlig in Ordnung. Wenn Sie also unter Linux sind, klicken Sie einfach hier und wählen Sie je nach Distribution einfach den Befehl aus. Es ist sehr einfach zu machen, okay? Wenn Sie aus der macOS-Welt kommen, haben Sie ein paar Möglichkeiten. Sie können Abschied mit einem Paketmanager wie Homebrew installieren einem Paketmanager wie Homebrew oder direkt ein Installationsprogramm verwenden. In diesem Tutorial wird empfohlen, ein Installationsprogramm zu verwenden, was der einfachste Weg unter macOS ist, okay? Da wir unter Windows sind, klicken wir auf Windows und wir werden das Installationsprogramm bekommen. Wenn Sie von einem anderen Betriebssystem kommen, empfehle ich Ihnen dennoch, dieses Video schnell durchzugehen da wir einige wichtige Fragen behandeln werden. In Ordnung, also haben wir das Installationsprogramm geöffnet und wir haben Weiter geklickt. Was brauchen wir hier? Zusätzliche Icons. Das liegt an Ihnen, Windows Explorer-Integration. Das ist also nur Windows Option. Und wir wollten Git Bash hier auswählen, und wir wollten die gute GUI deaktivieren. Niemand benutzt Gutes um zu gehen. Dies ist ein visuelles Werkzeug, um ein gutes darzustellen, Okay? Und Git Bash ist eine Kurzversion des Unix-Terminals namens Bash. Diese Kurzversion ist also nur unter Windows unter Git Bash Day verfügbar. Und ich denke, das ist sehr nützlich und praktisch. Unter Windows haben wir also cmd und PowerShell, und wir werden Git Bash installieren und es anstelle von CMD und PowerShell verwenden . Okay, dann wollten wir ein gutes L von c auswählen. Dies ist also nur für den Fall, dass wir wirklich große Dateien und unser gutes Projekt haben , diese Option ermöglicht es uns, diese Dateien zu platzieren. In einem guten Projekt wollten wir also grundsätzlich Assoziationen behalten. Ich brauche keine täglichen Updates und kein Git-Bash-Profil für Windows Terminal. Ich bin mir also nicht sicher, aber ich denke, dies hängt mit dem neuen Windows Terminal zusammen, das kürzlich veröffentlicht wurde. Okay, also will ich es auch nicht. Als nächstes, diesen Schritt, wählen wir einen Editor aus, bei dem Sie sich wohl fühlen. Ich weiß also, dass Sie noch nichts wissen, aber in gutem Zustand besteht die Möglichkeit, dass es einen Konflikt zwischen mehreren Dateien geben wird . Und um diesen Konflikt zu lösen, müssen Sie diese Dateien manuell durchgehen und bearbeiten. Wenn dieser Konflikt auftritt, öffnet get einen Editor , den Sie hier standardmäßig auswählen. Okay, wählen Sie also etwas aus, das Sie verwenden können, zum Beispiel Visual Studio-Code. Alles klar, als nächstes hier. Was haben wir hier, justieren, den Namen des ersten Zweigs auch den Namen des ersten Zweigs in Ihrem Repository. Das ist knifflig. Wir werden auswählen, wir werden auswählen, lassen, entscheiden. Aber worum es hier geht. Nun, ich verstehe, ich weiß, dass du noch nichts weißt, aber es gibt dieses Konzept von Zweigen in gutem Zustand. Vor etwa einem Jahr haben gute Community und GitHub Community beschlossen, gute Community und GitHub Community den Standard-Zweignamen zwei zu ändern, main kurz bevor er Master hieß. Jetzt heißt es offiziell main, aber es gibt immer noch viele Projekte , die weiterhin Master verwenden. Was ich also empfehle, ist einfach zu wählen, auszuwählen, zu lassen, zu bekommen, zu entscheiden. Dann lasst uns Weiter drücken. Und hier haben wir Ihre Pfadumgebung angepasst daher möchten wir Empfohlene zweite Option auswählen. Es ermöglicht uns, Git von jeder Terminal-Shell aus zu verwenden , sei es CMD, PowerShell oder Bash, oder von jeder anderen Software und Shells, die wir installieren und verwenden werden. Deshalb ist die zweite Option das, was wir wollen. In diesem Schritt. Wir wollen nichts ändern, behalten Sie einfach eine standardmäßige Verwendung gebündelt OpenSSH wird vier erhalten. Es sind Verbindungen könnten SSH-Tunnel verwenden. Okay. Deshalb wird es mit einer ausführbaren SSH-Datei gebündelt, die von OpenSSH stammt. Okay, als Nächstes, hier, https Transport Back-End. Verwenden Sie weiterhin OpenSSL. Wir wollen es auch nicht ändern. Weiter hier über Zeilenenden. Nun, gut ist ein plattformübergreifendes Tool. Es gibt jedoch einige spezifische Dinge, die irgendwie, irgendwie verwaltet oder kontrolliert werden müssen, um diese plattformübergreifende Verfügbarkeit zu erreichen. Und eines dieser Dinge sind Linienenden. Die Sache ist, dass Zeilenenden unter Windows und auf Unix-ähnlichen Systemen unterschiedliche Codierungen haben, okay? Und es könnte große Probleme verursachen, Projekte zu erhalten. Dies gibt uns die Möglichkeit unser Projekt problemlos plattformübergreifend zu halten. Dies ist eine sehr kleine Sache, aber es ist sehr wichtig, denn wenn Sie dritte Option auswählen und einige Änderungen vornehmen, um ein Projekt unter Windows zu erhalten , und dann öffnen Sie dieses Projekt auf einem mit verschiedenen Betriebssystemen werden Sie viele Probleme haben. Warum wollen wir es nicht. Für Windows wählen wir diese Option aus. Als Nächstes wurde der Terminalemulator für die Verwendung mit Git Bash konfiguriert . Okay, also wird Git Bash wieder unsere neue Shell sein, die wir als Alternative zu CMD und PowerShell verwenden werden. Also minzig ist dieses Terminalfenster, okay, also wenn ich CMD öffne, habe ich dieses Standard-Windows-Fenster, im Grunde das richtige, genau wie es sagt, die zweite Option hier, Standardkonsolenfenster. Mentee ist also, dass diese Software, die im Grunde die Trans-Terminal-Shell ausführt, darin Shells enthält. Es wird also das Fenster sein , das wir konfigurieren können, seine Farbe und Codierung ändern können, und andere Dinge können Schlüsselbindungen sein, all das. Das ist also nur das Fenster, das Terminal-Shells ausführt. Okay? Also möchten wir Mentee verwenden und dann das Standardverhalten einer guten Umfrage auswählen. Du weißt noch nichts davon, aber lass uns Standard wählen. Dies ist fast immer die bevorzugte Option. Und ich würde immer sagen. Wählen Sie als Nächstes einen Helfer für Anmeldeinformationen aus. Hier möchten wir Git Credential Manager Core auswählen. Dies ist spezifisch für Windows hier, aber verwenden Sie diese Option immer noch. Was es tut, wird es Zeiten geben, ich meine, immer so. Wir wollten unser gutes Projekt irgendwo veranstalten. Wir haben auf GitHub gehostet. Und um uns für GitHub zu autorisieren, müssen wir unsere Anmeldeinformationen für einen GitHub, unseren Benutzernamen und unser Passwort eingeben. Um sie nicht jedes Mal zu beantworten müssen diese Anmeldeinformationen sicher irgendwo in einem Cache-Speicher gespeichert werden. Unter Windows heißt dieser Cache-Speicher Git Credential Manager Core. Deshalb mussten wir unsere Anmeldeinformationen nicht jedes Mal eingeben. Wir möchten unsere Änderungen an GitHub weitergeben. Okay, als Nächstes wollten wir bei diesem Schritt System-Caching, symbolische Reinigungen aktivieren. Behalte es so wie es ist. Wir kommen als Nächstes und brauchen überhaupt keine experimentellen Funktionen. Also klicke einfach auf Installieren. Vorherige Version wird entfernt. Ja, ich meine, für mich weil ich es bereits installiert hatte. Warten wir eine Sekunde, bis es installiert ist und schauen wir uns an, was wir haben. Okay, gut. Abschluss des guten Setup-Assistenten. Ich möchte nicht, dass Versionshinweise fertig werden. Jetzt ist gut installiert. Wie können wir das überprüfen? Lass uns zu CMD gehen. Und in cmd möchten wir einfach Git Space Dash, Dash Version eingeben. Und wenn Sie sehen, dass die Version installiert ist, Glückwunsch, get ist jetzt installiert. Dies bezieht sich nur auf Windows-Benutzer, die installiert haben die Git Bash während der Installation ausgewählt haben. Wie können wir „Keep Bash“ überprüfen? Nun, wir können Git Bash direkt von einer anderen Shell aus ausführen, zum Beispiel Cmd sehen. Wenn ich also Git Bash mit Dash eintippe, sehe ich, dass Git Bash nicht erkannt wird. Nun, das ist ehrlich zu sein, erwartet. Und um das zu beheben, müssen wir erneut eine kleine Änderung unserer Pfadvariablen tun . Was müssen wir also tun, um Panel zu starten und auf der Suche mit Typ III und V. Dann bearbeiten wir die Systemumgebungsvariablen und Vitamingemüse. Und unter System werden Blasen nach Pfad suchen. Doppelklicken Sie darauf. Und hier am Ende der Liste sehen Sie C Program Files, good, CMD oder welchen Installationspfad Sie während der Installation gewählt haben. Okay, also wenn wir diesen Pfad öffnen, gehen wir zu Ordnern. Und lass uns hierher gehen. Ausführbare Dateien, die wir hier haben, sind gute, gute GUI, alles außer Git Bash. Wenn wir jedoch hier den Ordner holen , haben wir Git Bash ausführbar. In Ordnung? Um diese ausführbare Datei vom Terminal aus verwenden zu können, müssen wir der Pfadvariablen einen Ordnerpfad hinzufügen. Okay? Also gehen wir zurück zu dieser Liste. Wir klicken auf Neu und fügen C Program Files hinzu. Gut. Also haben wir OK geklickt, OK, OK. Jetzt starte ich das Terminal erneut. Und wenn ich jetzt Git Bash tippe, boom, bin ich in der Git Bash-Shell und es benutzt Minty. Wenn ich also hier auf Optionen klicke, siehst du das Logo von Minty. Es mag also sehr ähnlich aussehen, aber es wird tatsächlich wie die Windows-Standardkonsole verwendet. Aber das läuft im Minty Terminal Emulator. In Ordnung, wenn Sie möchten, können Sie hier verschiedene Optionen konfigurieren, Schlüsselauswahl, Windows Terminal. Das sind also alle Optionen und nur Fall, und das ist Git Bash. Wenn wir hier sehr einfache Linux-Befehle eingeben möchten, können wir dies beispielsweise tun, um alle Dateien in diesem Ordner aufzulisten. Okay, großartig, und das ist unsere Entropie der C-Benutzer. Das ist meins. Es wird dein Benutzername hier drüben sein. Wenn wir auf eine andere Festplatte gehen wollten, geben wir cd ein, um das Verzeichnis und dann den Namen der Festplatte zu ändern. Großartig, also geht es um Git Bash. Sie können es auch über das Ausführungsfenster im Start-Panel oder durch Drücken von Windows plus r ausführen und Git Bash eingeben. Und du bist drin. Das ist im Grunde genommen, das ist alles, was wir brauchen, um Git zu konfigurieren, okay, vielleicht ist eine weitere Option der Befehl Git config, oder? Wenn wir also bei Läsion zu Total gehen, spielt es keine Rolle, wann für Windows, für Linux spielt keine Rolle. Also hier müssen wir konfigurieren, unseren Namen und unsere E-Mail verwenden, oder? Kopieren Sie diesen Befehl einfach hier und fügen Sie ihn in Terminal ein. Und hier gib deinen Namen ein. Es kann dein richtiger Name sein, oder es kann dein Spitzname sein, was auch immer du tust. Drücken Sie also die Eingabetaste für Ihren Benutzernamen und dann dasselbe für E-Mail. Also was sind das? Diese werden in den Commit-Nachrichten sichtbar sein. In der guten Geschichte werden wir all das behandeln, aber das ist etwas, das andere Benutzer und Sie in Ihrer Projektgeschichte sehen werden, etwas Reales auswählen, das heißt, es wird im Grunde installiert Windows-Benutzer, Sie werden Bashes installiert. Im kommenden Video werden wir ausführlich darüber sprechen und wie es unser Leben erleichtern wird. Wir sehen uns dort. 6. Git sehen (Windows) ändern: Hey, zuerst möchte ich erwähnen, dass dieses Video nur für Windows-Benutzer gedacht ist. In diesem Video möchte ich mich mit dem Auftritt von Git Bash befassen. Lass mich dir zeigen, was ich meine. Wenn ich Git Bash starte. Ich mag es nicht, wie es aussieht. Ich möchte das heißt W 64 entfernen, ich möchte diesen Eintrag B in meinem Computernamen entfernen . Das brauche ich nicht alles. Dies ist völlig optional, aber es wird Ihre Entwicklererfahrung ein wenig angenehmer machen . Also lasst uns das ändern. Was wir tun müssen, müssen wir zuerst navigieren , um den Installationsordner zu erhalten. Also wird es für mich C sein, Programmdateien, gut. In diesem Ordner wollen wir ETC. Und Profil D wird hier nach einem guten Aufforderungspunkt SH suchen, und wir öffnen ihn mit jedem Texteditor. Ich öffne es mit Sublime Text. Und das wirst du sehen. Ich weiß, was völlig verwirrend sein wird und wir wissen nicht, was hier vor sich geht, aber keine Panik. Wir wollen sie nur entfernen oder vielleicht durch etwas anderes ersetzen. Um den Titel Ming W6 zu entfernen, Titel Ming W6 zu entfernen, werden wir anscheinend nach etwas mit Titel suchen. Dieses Dollarzeichen-Titelpräfix ist also genau für Ming W 64. Also entfernen wir es einfach von hier. Und wir entfernen auch den Doppelpunkt, entfernen dieses Semikolon aber nicht von hier, da dies Teil dieser Farbe ist , die im Grunde genommen als diese dargestellt wird. Also hier, lass mich meinen Spitznamen mit einem Pfeil setzen und lass mich die Datei speichern. Lassen Sie mich jetzt Git Bash neu starten. Also gehe ich wieder zum Run-Fenster Git Bash. Und jetzt boom, ich sehe meinen Spitznamen und und ich MACHE mich gerade ziemlich cool Jetzt möchte ich all das entfernen, was ich hervorgehoben habe. Also suche ich nach EMS-System. Ich entferne diese Zeile einfach komplett. Dann entferne ich den Benutzer beim Hostnamen. Und was ich gerne machen möchte, möchte ich den aktuellen Pfad hervorheben , der hier angezeigt wird. Wenn ich also zu sehen navigiere, habe ich es so, aber ich wollte es in Klammern stecken. Backslash w ist also das aktuelle Arbeitsverzeichnis. Also möchte ich es so in die Boxklammern stecken. Okay, und eine Klasse, was ich machen wollte, wollte ich vielleicht die Aufforderung vom Dollarzeichen auf einen Pfeil ändern . Also hier suche ich nach dieser Zeile. Okay, die Aufforderung wird immer ein Pfeil sein. Ich ändere es, ich habe die Datei gespeichert und jetzt sehen wir uns das Ergebnis an. Also starte ich noch einmal Git Bash neu. Und jetzt ist das unser letzter Auftritt. Wenn wir zu Disk D navigieren, haben wir es so. Ziemlich cool. Dies ist also auch völlig optional und das ist meine persönliche Präferenz, weil ich Einfachheit mag und mir gefällt, wie es aussieht. Und für mich sieht es aus meiner Sicht viel, viel besser aus als zuvor. Es liegt ganz bei dir, ob du es brauchst oder nicht. Aber das war's. Das wollte ich ansprechen. Wir sehen uns im nächsten. 7. Git (macOS) installieren: Hey, in diesem Video zeige ich dir, wie man Git unter Mac OS installiert. Navigiert zuerst zu Google und tippe git ein. Gehe zur ersten URL. Dies ist die offizielle Website. Klicken Sie auf Downloads und wählen Sie dann macOS aus. Sie werden einige Möglichkeiten sehen, wie Sie Git installieren können. Wir werden das mit Homebrew wählen. Homebrew ist Paketmanager. Es ermöglicht uns, verteilte Software mit einem einzigen Terminalbefehl herunterzuladen . Installieren Sie Homebrew, kopieren Sie den Installationsbefehl von der Website, gehen Sie dann zu Launchpad und führen Sie das Terminal aus, fügen Sie den Befehl ein und warten Sie, bis er installiert ist. Möglicherweise werden Sie auch zur Eingabe Ihres Passworts aufgefordert. Jetzt, da wir Homebrew haben, können wir Git einfach installieren, zurück zur Website navigieren und Homebrew installiert Git kopieren, das Terminal öffnen und den Befehl einfügen. Es dauert ein paar Sekunden, bis Homebrew installiert wird, in Ihr System gelangt. Wenn es heißt, dass Get bereits installiert ist, dann geht es Ihnen gut. Es liegt wahrscheinlich an Xcode. Und das war's. Tschüss. 8. VSCode (Windows) installieren: Hallo, In diesem Video werden wir den VS-Code und den Editor installieren , den wir während des gesamten Kurses verwenden werden. Warum zunächst VS Code oder Visual Studio-Code? Ich denke, ich persönlich denke, dass dies einer der besten Editoren und IDE ist , die für JavaScript-Projekte verfügbar sind. Wenn Sie mit einem anderen Editor, zum Beispiel Atom für die Entwicklung, vertraut sind , wenn Sie Vorkenntnisse haben, ihn gerne verwenden. Aber beim Training rate ich seinen Raketen aufgrund seines Plug-In-Systems Pseudocode und ist einfach bequem. Okay, also lasst es uns installieren. Was wir tun müssen, ist wie immer zu Google zu gehen und VS Code einzugeben. Und es bringt uns auf die offizielle Website. Also schlage ich vor, die Docs-Seite zu öffnen und nicht auf die Seite zu schauen. Auf der Download-Seite haben wir also Installer für drei verschiedene Betriebssysteme, Windows, Linux und macOS. Für Windows ist es also ziemlich einfach, oder? Sie klicken auf das Installationsprogramm und es startet den Download, okay, für Linux und macOS rate ich, zur Docs-Seite zu gehen und dann je nach Betriebssystem zum entsprechenden Abschnitt zu gehen. Für Linux ist es also auch ziemlich einfach. Abhängig von Ihrer Linux-Distribution gibt es Hunde, die Sie lesen und sehen können , wie Sie NodeJS installieren müssen. Ich meine, wie genau werden Sie das machen, weil die Befehle je nach Ihrer Distribution unterschiedlich sein werden. Okay, also behandle einfach die Hunde. Vertrauen Sie mir, das ist ziemlich einfach und im Grunde das Gleiche für Mac OS. Das ist ein einfacher Weg. Du bekommst das Installationsprogramm und ziehst es einfach in dein Launchpad. Das war's. Und VS Code gilt als installiert. Okay, also für Windows haben wir den Installer. Wir starten es. Dieser Benutzer wollte uns erden und sagte: Oh zahlen. Also in Also ja, ich möchte weiterlaufen. Okay. Ich schließe es. wirst du nicht sehen. Okay. Also bin ich hier. Ich wollte akzeptieren. Sie können den Pfad ändern, wenn Sie dies als Standardinstallation wünschen. Dies ist auch in Hunde geschrieben. Du kannst hier darüber nachlesen. Also wo ist es? Okay, es ist hier. Jetzt klicken wir auf Weiter. Als Nächstes. Jetzt müssen wir hier zwei Pfad auswählen, die standardmäßig ausgewählt sind, aber stellen Sie sicher, dass er vorhanden ist. Registrieren Sie Code als Zusatzstoff für unterstützende Dateitypen. Ja, dies wird empfohlen, ausgewählt zu werden. Dies ist optional und wenn Sie ein Desktop-Element erstellen müssen, dann klicken Sie auf Installieren. Danach dauert es einige Zeit und boomt, Sie sehen VS-Code auf Ihrem Desktop. Danach starten Sie es und landen in einem solchen Fenster, das Thema wird anders sein, aber es spielt keine Rolle. Vscode ist jetzt installiert. Wie konfiguriere ich mit SQL-Code und wie installiere ich Plugins. Alles wird im nächsten Video behandelt. Wir sehen uns dort. 9. VS-Code (macOS) installieren: Hallo, In diesem Video zeige ich Ihnen, wie Sie VS-Code auf macOS installieren, zur Google-Suche gehen und Fiasko eingeben, dann auf den Download-Button klicken und Sie zur Download-Seite gelangen. Klicken Sie auf das macOS-Installationsprogramm. Es wird automatisch mit dem Download für Sie gestartet, warten Sie, bis es fertig ist. Und das hat die Datei geöffnet, in der Sie den VS-Code sehen. Ich kann eine Verknüpfung ausführen, einfach das Symbol auf Anwendungen direkt danach ziehen und ablegen , VS-Code gilt als installiert und Sie können darauf zugreifen, indem Sie zum Mittagessen gehen, aber dann nach VS-Code suchen, öffnen und überprüfe, dass alles in Ordnung ist. Und das ist alles. Siehst du im nächsten. 10. VSCode und Erweiterungen: Hey, in diesem Video möchte ich über VS-Code sprechen, wie wir den VS-Code konfigurieren und was wir tun müssen, um uns während der Entwicklung wohl zu fühlen. Lass uns gehen. Das erste, was ich vorstellen möchte, ist die VS-Code-Suchleiste, da es erstaunlich ist, die Suchleiste zu öffnen. Ich drücke Control P. Und es bringt mich hierher. Ich kann hier alles eingeben, was ich will, aber es wird keine übereinstimmenden Ergebnisse liefern, da es versucht, Defiles im aktuellen Projekt nachzuschlagen. Aber da wir im Moment, in dem ich geöffnet habe, kein Projekt haben , gibt es keine übereinstimmenden Ergebnisse. Was ich stattdessen tippen möchte, ist Pfeil nach rechts. Indem Sie ganz am Anfang den Pfeil nach rechts eingeben. Es bedeutet, dass ich integrierte VS-Code-Befehle oder VS-Code-Optionen verwenden möchte integrierte VS-Code-Befehle oder VS-Code-Optionen , um möglicherweise düster zu navigieren. Wenn ich zum Beispiel Pfeil und dann Einstellungen JSON eintippe, gibt es mir Einstellungen geöffneten Einstellungen chasten. Lassen Sie mich darauf klicken und es bringt mich zu den Einstellungen JSON-Datei. Einstellungen JSON-Datei ist also im Grunde genommen als Code-Benutzerkonfigurationsdatei. Hier müssen wir nur verschiedene Befehle eingeben, um Erweiterungen zu konfigurieren, einige Tools oder was auch immer zu konfigurieren. Als erstes wollte ich hier platzieren, lass mich den Browser öffnen. Und hier habe ich diese Datei, diese Codekonfiguration. Sie haben diese URL und vielleicht schon, wie sie geteilt wird. Also öffne es einfach. Und von hier aus nehme ich das Fenster des IS-Sicherheitsvertrauens. Und ich werde es einfach so hier platzieren. Und was es tut, deaktiviert das Sicherheitsfenster, aber keine Panik. Was ist ein Sicherheitsfenster? Nun, VS-Code wird Sie oft fragen, vertrauen Sie dieser Umgebung oder vertrauen Sie diesem Ordner? Und vertrau mir, das ist sehr nervig, dieses Fenster zu deaktivieren. Kopieren Sie einfach diese Option und Sie werden dieses Fenster nie sehen. Schon wieder. Wenn Sie neugierig sind, können Sie diese Codezeile jederzeit auskommentieren und selbst sehen. Aber ich behalte es so wie es ist. Jetzt für eine Sekunde. Ich werde die zweite Option verlassen und ich werde von hier aus einfach die allerletzte Option wählen, bei der es um Prediger geht. Was ist Prediger? Pre-Clear ist ein Tool, das wir im kommenden Video ausführlich behandeln werden . Prediger wird es unseren Code bilden, wenn wir Dateien speichern, diese Zeile stellt sicher, dass unser Code formatiert wird, wenn wir auf Speichern klicken . In diesem Schritt ist VS Code grundsätzlich bereits konfiguriert und Sie können sofort mit Entwicklungsversuchen beginnen. Aber eine Sache, die ich erwähnen möchte, ist das integrierte VSCode Terminal. Wenn ich also auf das Terminal klicke und auf ein neues Terminal klicke, öffnet es PowerShell für mich, weil ich unter Windows bin. Wenn Sie unter Linux oder macOS sind, sehen Sie Bash für Linux- und macOS-Benutzer, das ist in Ordnung. Aber für Windows-Benutzer wir seit der Installation von Git Bash verwenden wir seit der Installation von Git Bash Git Bash und nicht PowerShell oder Cmd, da VS Code und Windows standardmäßig PowerShell verwendet. Was müssen wir also tun? Wir müssen zu dieser Datei zurückkehren und diese Konfiguration kopieren und mich am Ende hier platzieren lassen. Was es also tun wird, wird VSCode anweisen, Git Bash als integriertes Terminal zu verwenden . Es ist nicht anders, als würden Sie es außerhalb von VSCode öffnen. Es ist einfach praktisch, alles an einem Ort zu verwenden, insbesondere Werkzeug wie Terminal. Ich habe alle diese Optionen kopiert, wenn der Pfad für Sie anders ist, ersetzen Sie ihn einfach nach demselben Muster. Und lass es uns schließen und dann lass es uns wieder öffnen. Und lasst uns überprüfen, dass wir jetzt Git Bash verwenden. Das heißt, Windows-Benutzer Glückwunsch, wir verwenden Git Bash. Nun, das Letzte, worüber ich in diesem Video sprechen möchte, und ich würde sagen, das Wichtigste VS-Code-Erweiterungen. In Ordnung? Was ist also VS-Code-Erweiterungen? Dies sind alles optionale Tools, die den VS-Code mit wirklich hervorragender Funktionalität ausdehnen . Um zu Extensions zu wechseln, klicken wir auf dieses Symbol im linken Bereich. Und hier habe ich schon 33 Erweiterungen installiert. Das ist viel, was ich weiß, aber keine Panik. Wir müssen nicht alle installieren. Was ich jetzt tun werde, werde ich schnell die Erweiterungen durchgehen, die meiner Meinung nach für unseren Kurs erforderlich sind. Und es liegt an Ihnen, ob Sie sie installieren möchten oder nicht. Um in der Suchleiste zu verkaufen und zu erweitern, geben Sie einfach den Erweiterungsnamen ein. Zum Beispiel bessere C Plus Plus-Syntax. Du klickst zum Beispiel auf die Erweiterung und klickst auf Installieren. Danach wird es installiert. Und es könnte Sie auffordern, den VS-Code neu zu starten, aber es ist sehr selten. Und übrigens brauche ich diese Erweiterung nicht, also werde ich sie einfach deinstallieren. Also gehe ich zurück zu Installierte Erweiterungen und lasst uns schnell nach ihnen suchen. Die erste Erweiterung, die ich erwähnen möchte , ist das Namensschild. Was es tun wird. Es wird einfach HTML umbenennen, Tag öffnen und schließen, während wir HTML eingeben. Das ist sehr nützlich. Ich empfehle dieses, Bracket Birne Color Riser. Ich denke, dies ist eine der Erweiterungen, die es installieren sollte da sie einfach die öffnende und schließende Klammer hervorhebt und dekodiert. Dies ist nützlich, weil es unseren Code lesbarer und unterscheidbarer macht . Ich kann diese Erweiterung nur wärmstens empfehlen. Als nächstes haben wir ES 7 React redux GraphQL React Native Snippets. Dies ist eine wichtige Erweiterung. Wir werden es oft nutzen , wenn wir React-Code schreiben. Also installiere es. Ich werde diese Verlängerung in Zukunft noch einmal erwähnen . Dann haben wir ES Fusseln. Wir werden ES Fusseln im kommenden Video ausführlicher behandeln . Stellen Sie jedoch sicher, dass Sie diese Erweiterung im Voraus installiert haben. Als nächstes haben wir Highlight-Matching-Tag. Genau wie es heißt, wird das passende HTML-Tag hervorgehoben, genau wie Sie darauf sehen. Vorschau. Ziemlich cool. Ich denke, es ist, es ist nützlich. Jetzt haben wir IntelliSense für CSS-Klassennamen. Nun, ja, es ist nützlich. Was es also tun wird, wird die automatische Vervollständigung für CSS-Klassennamen hinzugefügt , die in unserem Projekt definiert sind, ganz bei Ihnen. Als nächstes haben wir Material Icon Theme. Es wird nur diese Reihe von Symbolen zu den Dateien hinzufügen , die wir im Datei-Explorer hier im linken Bereich sehen werden. Ich benutze es und empfehle es jedem. Npm-Intelligenz. Dieser ist wichtig. Was es tun wird, wird eine äußere Vervollständigung für Pakete und Bibliotheken hinzufügen äußere Vervollständigung für Pakete und , die wir in Code importieren werden, dringend empfohlen. Als nächstes haben wir Pfadintelligenz. Im Grunde das Gleiche, aber für lokale Dateien. Daher importiert die automatische Vervollständigung für lokale Dateien. Dann haben wir Prediger, Prediger, ein Tool, das unsere Dateien formatiert. Also nochmal, wir werden das ausführlich behandeln, also stellen Sie einfach sicher, dass es installiert ist. Und die letzte Erweiterung wird in Anführungszeichen umgeschaltet. Das Zitat umschalten ist sehr einfach. Es schaltet im Grunde nur Anführungszeichen um. Wenn Sie beispielsweise hier lesen, müssen wir dies abhängig von Ihrem Betriebssystem drücken , um Anführungszeichen von Single zu Double, von Double auf Backticks umzuschalten . Lass es mich dir demonstrieren. Wenn Sie diese Tasten einfach irgendwo drücken, wird diese Meldung angezeigt, wird diese Meldung angezeigt dass das Ausführen des beigesteuerten Befehls fehlgeschlagen ist. Die Sache ist, dass Sie diesen Befehl nur in Anführungszeichen verwenden müssen. Ich muss meinen Cursor hier in einen Text mit Anführungszeichen setzen und dann die Kombination verwenden, um Anführungszeichen zu verdreifachen. Ich benutze es sehr persönlich und kann es jedem wärmstens empfehlen. Ich glaube, das war's. Ich habe alles abgedeckt, was ich wollte. Ich habe alle Erweiterungen erwähnt , die meiner Meinung nach wichtig sind. Ich habe dir alles über Einstellungen gegeben, JSON, weißt du, über integriertes Terminal. Ich persönlich öffne es mit Control plus J-Tastenbindung, nicht von hier aus. Und ja, das war's. Vielleicht ist noch eine Sache zu erwähnen das VSCode-Theme. Wenn Sie möchten, dass VS Code cool aussieht, suchen Sie nach einem Erweiterungsthema, okay, und wählen Sie etwas aus, das Ihnen gefällt. Ich persönlich mag das Firefox-Theme. Und ich habe es schon installiert. Also klicke ich einfach auf Farbthema einstellen, Firefox, dunkel und boom. Jetzt habe ich verschiedene Farben in meinem VS-Code. Ziemlich nett. Es hat auch ein leichtes Thema, wenn Sie interessiert sind. Okay, ich glaube, das ist alles. Wir sehen uns im nächsten. 11. Arbeiten – Teil 1: Hey, in diesem Video werden wir darüber reden, gut, los geht's. Zuallererst, was ist Git? Git ist ein Projektmanagement-Tool, das es uns ermöglicht , alle unsere Projektdateien im Auge zu behalten. Zum Beispiel werden wir viele Änderungen an unserem Quellcode vornehmen, wenn wir unsere Projekte entwickeln. Vielleicht dauert es ein Jahr. Vielleicht wird es zwei Jahre dauern, dieses Projekt zu entwickeln. Nach einem Jahr werde ich mich wahrscheinlich nicht erinnern, was ich in der Vergangenheit gemacht habe, wie Angst vor mir war. Und um diese Projektgeschichte zu haben, existiert Gutes. Es wird uns ermöglichen, zu sehen, welche Änderungen wir vorgenommen haben was genau bei diesem speziellen Schritt schief gelaufen ist. Vielleicht möchten wir etwas ändern. Vielleicht möchten wir mit anderen Menschen einen Beitrag leisten und um all das zu bewältigen, existiert Gutes. Lasst uns das alles in der Praxis sehen. Zuerst erstelle ich einen neuen Projektordner. Ich öffne bereits den VS Code. Jetzt müssen wir einen Projektordner öffnen. Ich klicke auf Ordner öffnen. Dann gehe ich zu einem Ordner, in dem ich einen anderen Ordner erstellen möchte. Dies wird mein Testprojekt sein und ich werde es in VS Code öffnen. Großartig. Öffnen wir nun das integrierte Terminal. Ich drücke Control plus j. Und es wird Git Bash für mich öffnen. Und wie Sie sehen können, befindet es sich bereits im Projektordner. Großartig. Jetzt müssen wir zuerst gut in diesem Projektordner initialisieren . Um das zu tun, müssen wir Git eintippen. Und Sie werden sehen, dass diese Nachricht ein leeres Git-Repository in diesem Ordner initialisiert hat. Und wichtiger Punkt hier, dass es einen versteckten Ordnerpunkt erstellt einen versteckten Ordnerpunkt , um den versteckten Ordner anzuzeigen Wir müssen ls minus a eingeben. Es werden alle Dateien und Ordner im aktuellen Ordner angezeigt plus versteckte Ordner. So gut. Und wir können tatsächlich zu diesem Ordner navigieren , indem wir CD verwenden, um das Verzeichnis zu wechseln. Und dann können wir wieder ls eingeben , um alle Dateien und Ordner anzuzeigen. Und Sie können hier eine Reihe von Dingen sehen, aber wir interessieren uns nicht für sie. Wichtiger Punkt hier, dass alle unsere guten Projektdetails gelöscht werden, wenn wir diesen Ordner löschen wollen. Wenn ich also zurück zum Hauptordner navigiere, verwende ich CD und zwei Punkte, und jetzt lösche ich sie. Also gebe ich einen RAM als unseren F- und Ordnernamen ein, um alle Dateien und Ordner in gutem Zustand zu löschen und den Ordner selbst zu erhalten. Jetzt können Sie diesen Master sehen, Meistertitel ist hier verschwunden. Dies bedeutet, dass get jetzt vollständig aus diesem Ordner gelöscht wird. Jetzt lass mich noch einmal Git eintippen. Und Boom, gut, wird jetzt noch einmal initialisiert. Großartig. Was ist mit diesem Meistertitel hier drüben? Was ist das? Dies ist unsere derzeitige Niederlassung. Wir werden später über Filialen sprechen. Gerade jetzt. Konzentriere dich nicht darauf. Wir sind daran interessiert, sich selbst zu besorgen, was es tut. Was sind die Vorteile? Erstellen wir zuerst eine Datei hier drüben. Wir nennen es einen Dateipunkt TXT. Hier tippen wir hallo. Vielleicht wird das unsere Hauptprojektdatei sein, ziemlich dump, aber es wird den Trick machen. Um nun gut zu verwenden, können wir zuerst den Git-Status eingeben, um zu verstehen, was in diesem bestimmten Moment in einem guten Projekt vor sich geht . Sie können also noch keine Commits sehen. Wir befinden uns derzeit im Zweigmaster und wir haben eine Reihe von nicht verfolgten Dateien, um spezifischer zu sein. Für eine Datei, einige file.txt, nichts hinzugefügt werden, aber nicht verfolgte Dateien, die in guten Projektdateien vorhanden kann nichts hinzugefügt werden, aber nicht verfolgte Dateien, die in guten Projektdateien vorhanden sind, in drei verschiedenen Zuständen sein. erste Status ist nicht nachverfolgter Zustand, zweite Status ist der Stufenstatus. Der dritte Status ist, wenn Dateien festgeschrieben werden. Moment befinden wir uns im unverfolgten Zustand. Was heißt das? Es bedeutet, dass wir erkannt werden, dass wir einige neue Dateien in unserem Projekt haben, aber sie sind noch nicht Teil dieses guten Projekts. Um diese Dateien hinzuzufügen, um sie wissen zu lassen, dass wir diese Dateien verfolgen möchten , um sie als Teil unseres guten Projekts aufzunehmen, müssen wir sie dem Stage-Status hinzufügen. Um das zu tun, müssen wir genau wie hier angegeben eingeben , git add file. Also können wir Git tippen, etwas file.txt hinzufügen. Ich habe die Tabulatortaste zur automatischen Vervollständigung Also tippe ich einfach eine Datei ein, etwas F, dann drücke die Tabulatortaste und es ermöglicht mir, den Dateinamen für mich zu vervollständigen. Aber ich kann auch git add dot machen, um alle Dateien in diesem Ordner zum Bühnenstatus hinzuzufügen . Der Punkt repräsentiert also alle Dateien im aktuellen Verzeichnis. Ich benutze diesen Befehl, weil er kürzer ist. Git fügt Punkt hinzu. Jetzt können Sie sehen, wie sich die Farbe in Blau geändert hat. Und was passiert. Geben wir noch einmal den git status ein, um zu sehen, was wir noch keine Commits haben, Änderungen, die übernommen werden müssen. Jetzt können Sie sehen, dass wir eine neue Datei haben, einige file.txt. Großartig. Das bedeutet, dass sich unsere Akte im Bühnenzustand befindet. Und da wir VS Code verwenden, hat VS Code die Git-Integration integriert und der Zerfall ist ein wirklich leistungsfähiges Werkzeug. Deshalb haben wir hier auf der linken Seite dieses Symbol mit einer Nummer darin. Lasst uns darauf klicken. Diese Registerkarte stellt also die Integration von Get dar. Sie können also sehen, dass wir hier zwei Dropdowns haben, inszenierte Änderungen und Änderungen. Sie können sehen, dass jetzt unsere Summe file.txt innerhalb von inszenierten Änderungen. So können Sie links sehen, was vorher war, und rechts mit Grün, was hinzugefügt wurde, da es sich um eine neue Datei handelt, sehen wir links nichts und Rot. Wenn Sie mit all diesen guten Befehlen zu kämpfen haben mit all diesen guten Befehlen oder ich es nicht weiß Aus irgendeinem Grund fällt es Ihnen schwer, sich an alle zu erinnern. Du könntest hier immer die Git-Integration nutzen. Wenn ich also hier auf Minus klicke, wird diese Datei aus dem Stagestatus gelöscht und sie wird wieder in den nicht verfolgten Zustand versetzt. Wenn ich nun den Git-Status, das Terminal erneut, tippe , können Sie nicht verfolgte Dateien sehen , einige file.txt. Wenn ich diese Datei nun zum Bühnenstatus hinzufügen möchte, klicke ich einfach auf das Pluszeichen. Boom, es ist, es ist, es ist wieder inszeniert. Großartig. Was ist der Stage-Status? Nun, dieser Stufenzustand ist im Grunde die vorbetriebliche Phase, in der Dateien übernommen werden können. Was ist ein Commit? Ein Commit ist nur ein Datensatz in der Git-Historie und stellt Änderungen dar, die am Projekt vorgenommen wurden. Jetzt verpflichten wir uns diese Datei in unsere gute Geschichte. Was wir also tun können, können wir git commit eingeben und dann müssen wir minus M für Commit-Nachricht eingeben. Und wir geben etwas file.txt hinzu. Ich führe diesen Befehl aus. Und Sie werden den behandelten Modus sehen, eine Datei geändert, eine Einfügung, großartig. Und alle Änderungen auf der linken Seite sind verschwunden. Das ist in Ordnung. Wenn wir nun erneut den git status eingeben wollen, werden Sie nichts sehen, was Sie verpflichten müssen. Das liegt daran, dass Commit eine Waffe ist. Es ist schon in der Vergangenheit. Good verfolgt alle unsere Commits, die wir in der Vergangenheit gemacht haben. Um den Git-Verlauf und das Terminal anzuzeigen, müssen wir Git-Log eingeben. Wir haben ein Commit, das wir edit some file.txt genannt haben. Datum ist dies und der Autor, mein Nickname und meine E-Mail und Commit Hash auf Master Branch. Nehmen wir an, ich möchte dieser Datei neue Änderungen hinzufügen. Ich werde einfach weitermachen und diese Datei ändern. Ich gebe etwas Dumped ein und speichere die Datei. Auf der linken Seite sehen Sie, dass wir wieder neue Änderungen an der Datei haben . Und das haben wir hinzugefügt, das hatten wir vorher. Jetzt sind die gleichen Schritte. Wir müssen zuerst diese Änderungen oder die Datei hinzufügen, die den Stage-Status geändert wurde, oder? Und danach können wir diese Datei festschreiben. Denn wenn ich jetzt Git Commit mache und etwas tippe, wird eine Fehlermeldung angezeigt. Nun, es ist keine Fehlermeldung, aber es wird nichts festschreiben, da Good nur inszenierte Dateien festschreiben kann. Zum Beispiel, wenn ich eine neue Datei erstelle, test.js und ich tippe, ich weiß nicht, sehr grundlegende Sache in JavaScript, Konsolenprotokoll. Hallo. Ich gehe zurück zu diesem Tab. Ich gebe den Git-Status ein. Sie werden sehen, dass eine Datei geändert wird, eine Datei wird nicht verfolgt. Jetzt möchte ich all diese Akten inszenieren. Ich werde Git Add Dot machen. Und Sie werden sehen, dass sie alle jetzt inszeniert sind. Und wenn ich git commit tippe, werden diese inszenierten Dateien dem neuen Commit hinzugefügt. Alles klar? Was ist jedoch, wenn ich nicht möchte, dass alle diese Dateien festgeschrieben werden? Vielleicht habe ich diese Datei erstellt, aber ich bin noch nicht bereit, sie zu verpflichten. Ich möchte nur diese Änderungen an der Geschichte übernehmen. Also was ich tun werde, werde ich test.js aus diesem Bühnenzustand entfernen und ich werde nur eine Datei in diesem Stadium belassen. Wie ich bereits sagte, begeht Git nur inszenierte Dateien. Wenn ich also git commit tippe und ich werde einige file.txt eingeben. Ich führe es aus. Sie werden sehen, dass der Test einfach bleibt, weil er immer noch nicht verfolgt und nicht festgeschrieben ist. Und wenn ich Git log tippe, werde ich jetzt sehen, dass ich die Note verpflichten muss. Wenn ich jetzt test.js hinzufügen möchte, tippe ich erneut git add dot, dann git commit. Und ich tippe edit, test. Ja, cool. Wieder viel Glück. Und ich habe meine Git-Geschichte da drüben. Das ist es, was gut tut. Es ermöglicht uns, diese Projekthistorie durch Commit-Nachrichten zu erstellen . Aber okay, das scheint nützlich zu sein, aber ich sehe hier nicht den Hauptpunkt, um alle Dateien zu sehen, alle Änderungen, die Sie vorgenommen haben um Projekt zu erhalten, oder verschiedene Befehle, wie zum Beispiel gute Show. So können wir git show eingeben und dann Hash festschreiben , um die an diesem bestimmten Commit vorgenommenen Änderungen anzuzeigen . Also werde ich das einfach kopieren und eine gute Show Cash-Nachricht abgeben. Wir haben dieses Commit. Das ist der Unterschied. In der Datei. Einige file.txt haben wir eine Zeile bearbeitet und die zweite Zeile bearbeitet. Das ist es. Jetzt stimmte ich zu, dass dies nicht bequem ist, alles durch das Terminal zu sehen. Aus diesem Grund gibt es viele VS-Code-Erweiterungen, die wir installieren können , um diesen Prozess zu visualisieren. Wenn ich also Git in der Erweiterungssuche eintippe, wirst du viele verschiedene Erweiterungen wie gute Geschichte sehen , Land bekommen, gutes Diagramm. Und alle von ihnen werden dir helfen, mit dem Guten zu arbeiten. Sie ermöglichen es Ihnen, Ihre Kit-Entwicklung so komfortabel wie möglich zu visualisieren, wiederzuverwenden und zu gestalten. Ich persönlich verwende keines davon, weil ich denke , dass diese Integration mehr als genug ist und der Rest auf GitHub weitergehen wird. Im zweiten Teil werden wir über den GitHub sprechen. Github ist damit verwandt, was GitHub ist. alles wirst du im nächsten Video wissen. Wir sehen uns dort. 12. Arbeiten – Teil 2: Hi, Willkommen im zweiten Teil der guten Serie. In diesem Video werden wir über GitHub sprechen. Was ist GitHub und warum brauchen wir es? Lassen Sie uns daran denken, ich habe das kleine gute Projekt aus dem ersten Teil, in dem ich zwei Dateien und ein paar Commits im Terminal Wenn ich Log bekomme, kann ich die Git-Geschichte dieses Projekts anzeigen. Nun, die Frage ist, was passiert, wenn ich diesen Testprojektordner von meinem PC lösche, wird mein Projekt komplett verschwunden sein? Und die Antwort auf diese Frage wird tatsächlich GitHub sein. Es wird uns zu Hilfe kommen. Github ist ein Hosting-Service für gute Projekte, genau wie wir Hosting für Websites haben, ist GitHub ein Hosting-Service oder Plattform für gute Projekte. Wenn ich zu Google gehe und nach einem GitHub suche, bringe ich das auf die offizielle Website. Wenn Sie noch kein GitHub-Konto haben, schlage ich vor, bereits eines zu erstellen . In diesem Moment habe ich mich bereits angemeldet. Ich möchte erwähnen, dass es einige andere beliebte Hosting-Dienste für gute Projekte gibt , wie zum Beispiel Git Lab oder vielleicht Bitbucket. Der Unterschied zwischen ihnen liegt in Funktionen und Integrationen, die sie Ihnen geben. Github ist der gebräuchlichste. In Ordnung, jetzt haben wir unser GitHub-Konto hier und möchten unser gutes Projekt, das wir lokal auf unserem PC haben, auf GitHub hosten das wir lokal auf unserem PC haben . Wie können wir das machen. Also müssen wir zuerst ein Remote-Repository auf GitHub erstellen. Wenn ich auf das Pluszeichen und die obere Ecke klicke und auf neues Repository klicke, wird ich aufgefordert, meine neuen Repository-Details einzugeben. Ein Repository ist im Grunde ein Projekt okay, das Sie auf GitHub setzen. Repository bedeutet also Projekt, aber auf GitHub, also wird mein Repository-Name mein Projekt sein. Ich lasse die Beschreibung leer Repository-Sichtbarkeit , dass es sich öffentliches und privates Repository handelt. Wenn Sie sich für öffentlich entscheiden, Ihr Repository für alle sichtbar, aber nur autorisierte Personen können zu diesem Repository beitragen wenn es privat ist, niemand wird es jemals erfahren und sehen dieses Repository. Wählen wir also privat aus klicken wir dann auf Repository erstellen. In diesem Schritt haben wir ein neues Projekt auf GitHub erstellt. Jetzt müssen wir stundenlanges lokales gutes Projekt, das wir auf unserem PC haben, mit einem Remote-Repository auf GitHub verknüpfen . Wir können es auf zwei Arten tun, entweder über HTTPS oder über den SSH-Tunnel. Ssh ist eine verfügbare Option, aber GitHub empfiehlt HTTPS, da es einfacher und einfacher einzurichten ist, verwenden wir HTTPS. Sie können bereits feststellen, dass GitHub einige Schritte vorschlägt, wie wir unseren lokalen Code oder unser lokales Projekt mit dem Remote-Repository verknüpfen können unseren lokalen Code oder unser lokales Projekt mit dem Remote-Repository verknüpfen . Wir werden dem zweiten Schritt folgen, um ein vorhandenes Repository zu verschieben, da unser lokales gutes Projekt als lokales Git-Repository bezeichnet werden kann . Kopieren wir einfach den ersten Befehl von hier und legen ihn ins Terminal. Was fügt Git Remote den Ursprung hinzu? Führen wir zuerst diesen Befehl und schauen wir uns an, was passieren wird. Nichts wird gedruckt und das ist vollkommen in Ordnung. Aber jetzt weiß unser lokales gutes Projekt über dieses Remote-Repository Bescheid. Wir können überprüfen, dass Sie durch Eingabe von git remote dash v Ursprung sehen und Sie sehen Repository-URL, die wir von hier kopiert haben. Es ist auch hier erhältlich. Schauen wir uns diesen Befehl noch einmal an. Also haben wir Git Remote Add. Dies ist der Befehl, unsere Repositorys zu verknüpfen. Origin ist der Name eines Alias , den wir dieser URL zuweisen, da es einfacher ist, immer auf Nickname oder Alias anstelle von URL zu verweisen , der Ursprung war. Dies ist der gebräuchlichste Name. Okay. Was müssen wir nun tun, um unsere lokalen Dateien beim Hosting zu applaudieren, wir müssen Git Push als den Alias machen, den wir mit unserer Repository-URL verknüpft haben , der Ursprung und der Name von Zweig, die wir bereitstellen möchten. Also Git Push Ursprungs Master. Wenn wir wieder öffnen und Git Hub, werden wir sehen, dass es einen guten Zweig Main und dann Git Push Origin main vorschlägt , da ich diese Aufregung bereits vor etwa einem Jahr erwähnt habe, dass die Community sich verschieben möchte Standard-Zweigname von Master zu Main, aber wir werden jetzt weiterhin Master verwenden. Also werden wir Git Push Origin Master anstelle von Git Push Origin Main verwenden . Ich führe es aus. Und Sie werden sehen, dass ein neuer Zweig für diese URL-Rate erstellt wurde . Kommen wir zurück zu GitHub, aktualisieren die Seite und boomen, wir können sehen, dass hier alles sichtbar ist. Was wir also auf GitHub machen können. Github, wir können unsere völlig gute Geschichte sehen. Wir können alle Dateien sehen und wir können zu dem Zeitpunkt sehen, als dieser Befehl für diese Datei erstellt wurde, okay, also vor drei Stunden war das neueste Commit für diese Datei und für diese Datei auch für Tests, ja, wir können klicken auf Dateien, um den Inhalt anzuzeigen. Wir können tatsächlich auf Commits klicken, um zu sehen, welche Änderungen an diesem Commit vorgenommen wurden. Für die Bearbeitung einer Datei, die erneut festgelegt werden soll, haben wir diese Zeile geändert oder entfernt und diese beiden Zeilen hinzugefügt. Grün ist das, was hinzugefügt wurde. Rot bedeutet etwas, das entfernt wurde. Kommen wir zurück zum Repository. Wir können auch die vollständige gute Historie anzeigen , indem wir auf diesen Button klicken. Und wir können sehen, dass wir drei Commits haben. Wir können das Repository an dieser Stelle im Verlauf durchsuchen . Wenn wir klicken, können wir an dieser Stelle sehen dass es nur eine Datei gab. Kommen wir noch einmal zum Hauptrepository zurück und beantworten die Hauptfrage, warum brauchen wir GitHub? Wir brauchen GitHub, um mit anderen Menschen zusammenzuarbeiten oder unser Projekt tragbar zu machen. Was ich meine ist, dass wir diesen Testprojektordner versehentlich auf unserem lokalen PC verlieren. Aus irgendeinem Grund existiert es einfach nicht. Unser Projekt existiert jedoch auf GitHub. Was wir also tun können, können wir unser Projekt nicht von GitHub laden und es in unseren lokalen PC legen, indem wir auf diesen grünen Button klicken, wir haben hier ein paar Möglichkeiten. Wir können zip herunterladen oder klonen. Wenn wir also auf Zip herunterladen klicken und wenn wir diese Zip öffnen, sehen Sie alle darin enthaltenen Dateien. Das ist also eine Möglichkeit. Die zweite Möglichkeit besteht darin, dieses Repository mit der CLI zu klonen. Also wählen wir eine HTTPS-Verbindung. Wir werden diese URL kopieren. Und nun nehme an, dass mein Testprojekt hier nicht auf dem PC existiert. Ich hab es verloren. Wenn ich es also wiederherstellen oder zurückholen wollte, mache ich Git-Klon und dann die URL, die ich kopiert habe. Also wird es kopiert, es wird einen neuen Ordner namens mein Projekt erstellen und alle Dateien darin ablegen. Wenn ich meinen Projektordner inspiziere, siehst du etwas file.txt und test, ja. Aber auch wenn ich in meinen Projektordner gehe und wenn ich leider F mache, um versteckte Dateien anzuzeigen, wird es hier einen weiteren Git-Ordner geben. Dies liegt also daran, dass beim Klonen eines Repositorys bereits ein guter Ordner mit Git-Setup geliefert wird. Stellen Sie sich vor, dass Testprojekt auf diesem PC nie existiert hat. Ich klone das Repository mit HTTPS und Git-Clon. Und jetzt ist mein Git-Setup bereits abgeschlossen. Ich kann einfach zu diesem Projektordner navigieren und alles ist bereits vorhanden. Setup für mich. Ich kann jetzt weiterhin neue Commits machen, einige Änderungen vornehmen und dann erneut auf GitHub hochladen, lass mich meinen Projektordner löschen. Ich brauche es eigentlich nicht. Ich navigiere zurück. Jetzt. Wie kann ich mich tatsächlich weiterentwickeln, sobald ich mein Projekt auf GitHub habe? Das ist eine gute Frage. Nun, genau wie zuvor, wenn ich neue Änderungen am Projekt vornehmen muss, werde ich einfach meine Änderungen vornehmen. Vielleicht füge ich eine weitere Zeile mit Hallo zwei hinzu und speichere sie. Jetzt, wie Sie sich erinnern, habe ich Änderungen nicht verfolgt. Wenn ich den git status eintippe, sehen Sie, dass diese Datei geändert wurde. Also muss ich diese Datei wieder zum Bühnenstatus hinzufügen. Ich werde Git Add Dot setzen. Sie werden es hier sehen, es erscheint jetzt in inszenierten Änderungen und jetzt kann ich es verpflichten. Also hat Git Commit Hallo zwei hinzugefügt. Wenn ich jetzt Git log tippe, kann ich oben ein neues Commit sehen. Jetzt habe ich vier Commits, aber wenn ich zurück zu GitHub gehe, sehe ich es hier nicht, weil GitHub und Git nicht magisch miteinander synchronisiert sind. Wann immer Sie neue Änderungen an Ihrem PC vornehmen, sind diese lokal. Sie sind nur auf Ihrem PC verfügbar. Und wenn Sie sie beim Hosting sehen möchten, müssen Sie sie zum Hosting hochladen. Und um das zu tun, verwenden wir erneut Befehl git, push, Good Push und den Namen von LES und unseren Alias. Wir können überprüfen, dass mit git remote dash v unser Ls Ursprung ist, was zu diesem Repository führt, was korrekt ist. Also werde ich Git Push Origin machen und dann den Namen des Zweigs beherrschen. Jetzt sehe ich, dass meine Änderungen hochgeladen werden. Ich aktualisiere die Seite. Und vor einer Minute wurde hier ein anderes Komitee hinzugefügt , was richtig ist. Wenn ich auf diese Commit-Nachricht klicke, werden Sie sehen, dass diese beiden Zeilen genau das bearbeiten, was ich gerade getan habe. Und noch einmal die Hauptfrage beantwortet, was GitHub macht? Warum brauchen wir es? Github wird benötigt, um die Zusammenarbeit zwischen Menschen zusammenzuarbeiten und unser Projekt so portabel wie möglich zu gestalten. Im nächsten Video werden wir über Filialen und darüber sprechen , wie Menschen mit GitHub zusammenarbeiten. Wir sehen uns dort. 13. Arbeiten – Teil 3: Hi, willkommen im dritten Teil der guten Serie. Im letzten Teil haben wir unser lokales gutes Projekt erfolgreich auf GitHub eingesetzt . Und wir wissen, was GitHub ist. Es ist eine Hosting-Plattform für die Zusammenarbeit und wir verwenden GitHub, um das obere Projekt so portabel wie möglich zu gestalten. In diesem Teil werden wir diese Hauptkonzepte guter kalter Zweige entdecken . Und wir werden darüber reden, wie wir an GitHub zusammenarbeiten können . Lass uns gehen. Lasst uns zuerst über Zweige sprechen. Dieser geheimnisvolle Meisterzweig war von Anfang an hier. Aber was heißt das? Wenn wir Git Branch im Terminal eingeben, werden wir sehen, dass Sie nur Master haben, aber wir können so viele Zweige erstellen, wie wir möchten. Zweig ist also nur eine weitere Kopie unseres Projekts. Schauen wir uns das an einem Beispiel an. Lasst uns also einen neuen Zweig erstellen. Um einen neuen Zweig zu erstellen, müssen wir Git Checkout als minus b eingeben und dann den Namen des Zweigs, den wir erstellen möchten, nennen wir es mein Dash-Feature. Sie können sehen, dass Sie zu einem neuen Zweig wechseln. Mein Feature, ich tippe wieder Git Branch ein. Ich habe Master und ich habe mein Feature und eine Reihe von Master. Ich sehe jetzt mein Feature, das liegt daran, dass dies in diesem Moment mein aktiver Zweig ist. Was Sie hier sehen, ist Ihre derzeit aktive Niederlassung. Nun, was ist der Unterschied gerade, diese beiden Zweige sind gleich, aber nehmen wir an, ich möchte eine neue Funktion in meine App entwickeln, aber ich möchte meinen Hauptcode nicht berühren. Mein Hauptcode bleibt unverändert, aber ich wollte eine neue Funktion entwickeln. Hier kommen Niederlassungen ins Spiel. Mein Master-Zweig enthält also meine neueste App für den Code, der für die Produktion bereitgestellt wird. Es funktioniert gerade. Und gleichzeitig wollte ich ein neues Feature entwickeln. Also erstelle ich einen neuen Zweig namens mein Feature, und jetzt fange ich an, mich für diesen neuen Zweig zu entwickeln. Angenommen, ich bin in meinem Feature-Branch, ich erstelle ein neues Commit. Meine neue Funktion wird ein neues Konsolenprotokoll sein, das Hallo drei sein wird. In Ordnung? Jetzt übernehme ich diese Änderungen. Zuerst schiebe ich in den Stage-Status und dann mache ich ein neues Commit. Ich nenne es entwickelte mein neues Feature. Großartig. Wenn ich ein Git-Log mache, um den Verlauf anzuzeigen, kann ich meinen vorherigen Verlauf und dann mein neues Commit sehen, meine neue Funktion entwickeln. Großartig, aber wie ist es nützlich? Nun, wenn ich aus irgendeinem Grund zurück zu meinem Hauptcode wechseln und sehen muss, was da war. Ich kann jetzt zwischen Zweigen wechseln. Also setze ich Git Branch, um zu sehen welche Zweige eine Hälfte machen, und dann kann ich Git Checkout-Master machen, um zwischen Zweigen zu wechseln, aber diesmal ohne Minus B Flag. Jetzt bin ich zum Zweigmaster umgestellt. Und Sie können sehen, wie diese Änderung, die Dr. in meinem Feature-Branch vorgenommen hat, verschwunden ist. Dies liegt daran, dass diese Änderung Teil meines Feature-Branchs ist. Es hat keine Beziehung zum Master, denn wenn ich ein Git-Log einfüge, werden Sie sehen, dass ich dieses Commit nicht habe , dass ich es in meinem Feature-Branch freigegeben habe, im Master-Zweig, es ist völlig anders. Wie Sie sehen können, sind Master und mein Feature eine Art Kopien meines Projekts, die gleichzeitig existieren. Ich kann diese Zweige manipulieren, Ich kann diese Zweige manipulieren um verschiedene Funktionen zu entwickeln. Wie kann ich dieses Zweigkonzept tatsächlich nutzen, um es für mich oder für Leute, mit denen ich zusammenarbeite, nützlich zu machen . Angenommen, es gibt 10 Personen, die an demselben Projekt arbeiten und Personen in ein Repository einladen und zu Einstellungen gehen und den Zugriff verwalten müssen . Und hier laden Sie normalerweise Mitarbeiter ein. Personen, die Zugriff auf dieses private Repository haben, können also dieses private Repository haben, können Änderungen an diesem Repository vornehmen. Aber wenn das, alles, wenn alle Leute, die an einem Projekt arbeiten, in denselben Master-Zweig oder Hauptzweig drängen . Das wird ein bisschen durcheinander sein. Wir wollen es so strukturiert wie möglich gestalten, um unsere gute Geschichte sauber, lesbar und wartbar zu halten . Und um das zu tun, werden wir Filialen nutzen. Angenommen, unser Hauptcode befindet sich im Master Branch, der das neueste Commit hinzugefügt hat Hallo zu Ich bin eine andere Person, die irgendwo da draußen sitzt. Ich bin Mitarbeiter und erstelle einen neuen Zweig, mein Feature, das ich bereits erstellt habe, und ich habe etwas geändert. Ich möchte diese Änderungen an GitHub übertragen, und ich möchte diese Änderungen in den Hauptcode zusammenführen, sich wieder im Master-Zweig befindet. Was ich also tun muss, muss ich zuerst diesen Zweig schieben. Auf GitHub. Um das zu tun, werde ich Git Push Origin machen , weil dies unsere Aliens für das Repository sind. Wir erinnern uns an diesen Git Push-Ursprung, mein Feature. Warten wir eine Sekunde. Und jetzt ist es gedrängt und es schlägt sogar vor, dass wir eine Pull-Anfrage für mein Feature auf GitHub erstellen , indem wir sie besuchen. werden wir in einer Sekunde sprechen. Aber wenn wir zu GitHub zurückkehren, sehen wir bereits, dass mein Feature vor weniger als einer Minute kürzlich Pushs hatte. Vergleichen und ziehen Sie Request. Wenn ich die Seite aktualisiere, sehe ich jetzt zwei Zweige. Wenn ich hier klicke, habe ich den Standard-Zweigmaster und ich habe Ihre Zweige, meine Funktion aktualisiert es vor Minuten von mir und dem Hauptzweig der CEU vor Stunden von mir. Und hier kann ich sehen, ob ich schwebe, ich sehe ein Commit vor dem Master. Um diese Änderungen, die ich in meinem Feature-Branch habe, in den Master zu übertragen diese Änderungen, die ich in meinem Feature-Branch habe , muss ich eine Pull-Anfrage direkt auf GitHub erstellen. Ein Pull-Request ist diese Entwickleranfrage, wenn Sie Projektbetreuer bitten , Ihren Zweig in den Hauptzweig zusammenzuführen . Im Grunde möchten Sie also einen Beitrag leisten und möchten diese Änderungen in den Hauptcode übertragen. Wir klicken auf neuen Pull-Request. Wir werden es als entwickelt bezeichnen. Mein neues Feature wird einen Kommentar hinterlassen, dass ich gerade diese großartige Änderung vorgenommen habe. Und hier wählen wir das aus. Wir wollen pushen, wir wollen meinen Feature-Branch in Master zusammenführen. Dies sind alles die Commits, die ich in diesem Zweig gemacht habe. Ich kann so viele Commits wie möglich erstellen. Zum Beispiel, wenn ich ein anderes Commit hinzufüge, vielleicht console.log, hallo, nochmal, ich inszeniere diese Änderungen, ich verbinde sie erneut, neue Änderung. Wieder drücke ich, Good Push Origin, mein Feature. Die Zweigstelle wird aktualisiert. Selbst wenn ich bereits eine Pull-Request erstellt habe, habe ich sie noch nicht erstellt. Aber wie auch immer, also klicke ich auf Create, Pull, Anfrage. Und mal sehen, was wir hier haben. Zuerst sehen wir die Fähigkeit zum Zusammenführen überprüfen da es zu Konflikten bei diesen Änderungen kommen kann. Aber da wir keine Konflikte haben, ist es in Ordnung. Wir werden also unsere Pull-Requests hier sehen. Also was wird jetzt passieren? Ich bin die Person, die dort drüben sitzt und diese Pull-Anfrage erstellt, dann kommt Projektleiter oder Projektbetreuer herein und die Person, die für die Pull-Anfrage verantwortlich ist, geht hierher und es sieht das, hey, diese Person wollte diese Änderungen zusammenführen. Also klickt er auf diese Pull-Anfrage. Okay, großartig, dieser Typ hat diese großartige Veränderung gemacht. Oh mein Gott. Ich möchte diese Änderungen zusammenführen. Also führt diese Person diese Pull-Anfrage zusammen. Also wählt er hier eine der Optionen aus. Lassen Sie mich auf Merge Pull Request klicken und sehen, was passieren wird. Also füge Pull-Anfragen dieser Person zusammen, dieser Zweig hat meine neue Funktion entwickelt, Zusammenführung, Zusammenführung, Umfrageanfrage, erfolgreich aufgetaucht und Löschzweig geschlossen. Wir klicken auf diesen Zweig wurde gelöscht, Anfragen abrufen, zusammenführen. Wenn ich hier zu meinem Projekt zurückkehre, sehe ich Zusammenführungs-Pull-Anfragen von Sherlock 16, meinem Feature, und es ist jetzt Teil einer guten Geschichte. Wenn ich auf Commits klicke, sehe ich, dass ich zuerst diese beiden Commits habe , die ich in meinem Feature-Branch hatte. Und darüber hinaus habe ich eine weitere Commit-Merge-Pull-Anfrage. Jetzt wurden all diese Änderungen in meinem Feature-Branch dem Hauptcode zusammengeführt und sind hier verfügbar. So tragen Menschen normalerweise durch Pull Request One bei, all diese Änderungen sind auf GitHub. Wir werden Diskrepanzen haben, da wir sieben Commits im Master-Branch, in unserem lokalen Projekt sieben Commits im Master-Branch, im Remote-Repository, auf GitHub Wir haben immer noch meinen Feature-Branch. Und wenn wir mit Git Checkout Master zum Master gehen. Und wenn wir Git-Log machen, sehen wir, dass das neueste Commit hier hinzugefügt wird hallo zwei, während hier Pull-Anfragen zu eins zusammenführen. Um das zu beheben, müssen wir die neuesten Änderungen von GitHub in unseren lokalen Code herunterladen die neuesten Änderungen von GitHub in , um den Verlauf zu synchronisieren. Um dies zu tun, ist der Befehl Git Push sehr ähnlich, aber anstelle von git push verwenden wir git pull. Also wieder bekommen wir Pull als die Repository-Bereiche und dann den Namen des zu ziehenden Zweigs. Also wollen wir den Meister aus dem Ursprung ziehen. Ich führe es aus. Und du wirst das Tolle sehen, dass etwas passiert ist. Und wie Sie sehen können, sind jetzt alle meine Änderungen hier. Das neueste Commit wurde vorgestellt, hallo vier und ich, und jetzt habe ich Hallo in meinem Code. Ziemlich cool, um zu überprüfen, dass ich wieder git log. Und Sie sehen, dass ich übrigens mehrere Anfragen Bombe von Sherlock 16 habe mehrere Anfragen Bombe von Sherlock 16 , um diesen Zustand zu verlassen, wenn Sie, wenn die gute Geschichte überläuft, einfach q eingeben können und Sie zum Terminal bringen. In Ordnung, ich würde sagen, dass dies wahrscheinlich der Fall ist, so nutzen die Leute GitHub, um zusammenzuarbeiten. Das Modell wäre ein bisschen anders, wenn es sich ein öffentliches Repository handelt und Sie zu einem Open-Source-Projekt beitragen möchten . Aber das werden wir in dieser Serie nicht behandeln. Dies ist mehr als genug für uns, um zu verstehen, wie Git funktioniert und wie Menschen miteinander zusammenarbeiten. Also nochmal, ich werde den Flow normalerweise noch einmal wiederholen . Und wenn Sie eine neue Änderung erstellen möchten und an einem Projekt arbeiten. Zuerst erstellen Sie einen neuen Zweig, indem Sie git Checkout minus b und den Namen des Zweigs verwenden, es kann alles sein. Okay, also diese Kopie, dieser neue Zweig wird aus dem Zweig erstellt , der zum Zeitpunkt der Ausführung dieses Befehls aktiv war. Dieser Zweig enthält jetzt alle Commits, die Sie beim Ausführen dieses Befehls hatten . Okay, Sie entwickeln weiter Conduct Branch, führen Sie so viele Commits aus, wie Sie zum Vervollständigen der Funktion benötigen. Dann schieben Sie diesen Zweig mit gutem Push zu GitHub. Dann erscheint es im Repository. Dann gehen Sie zu Ihren Pull-Requests und erstellen eine neue Pull-Anfrage, um Zweig, den Sie gerade auf GitHub veröffentlicht haben, mit dem Hauptcode in den Hauptzweig zusammenzuführen gerade auf GitHub veröffentlicht haben, mit dem Hauptcode . Und dann wird eine verantwortliche Person kommen und das sehen, Hey, der Typ möchte diesen Zweig mit dem Hauptcode zusammenführen. Und sobald diese Pull-Anfrage zusammengeführt oder akzeptiert wurde, werden Ihre Änderungen in den Hauptcode zusammengeführt. Danach muss jeder, der an einem Projekt arbeitet, die neuesten Änderungen aus dem Hauptzweig ziehen neuesten Änderungen aus dem , indem er den Befehl git pull verwendet. Und das war's. Dies ist der grundlegende Fluss von Git und GitHub Zusammenarbeit Glückwunsch. Ich denke, das ist unsere fertige für gute Serie, und wir sehen uns in der nächsten. 14. Node.js (Windows) installieren: Hi, In diesem Video werden wir Node.js unter Windows installieren. Was ist NodeJS und warum brauchen wir es, wird im nächsten Video erklärt. Was wir tun müssen, ist einen beliebigen Browser zu öffnen und zu Google zu gehen. Und Google wird nach keiner GS suchen. Der erste Link wird die offizielle Website sein. Hier müssen zwei Versionen heruntergeladen werden, LTS und aktuelle Version. aktuelle Version ist die neueste Version, die zum Download zur Verfügung steht, und LTS ist die neueste stabile Version. Wir müssen es nicht zu kompliziert machen. Darum kriegen wir LTS. Klicken Sie auf diesen und öffnen Sie dann das Installationsprogramm. Warte ein bisschen und klicke auf „Weiter“. Ja, ich akzeptiere Next, ändere den Pfad, wenn nötig. Als nächstes brauchen wir bei diesem Schritt keinen GS-, NPM- und Einstellungspfad. Als Nächstes haben wir in diesem Schritt Tools für native Module, und wir möchten diese Option auswählen. Was ist das und warum brauchen wir es? Genau wie es heißt, müssen einige NPM-Module bei der Installation von CC plus plus kompiliert werden . Was heißt das? Dies bedeutet, dass es einige Bibliotheken, Module oder Pakete gibt, die wir während unserer Entwicklung installieren werden , die einige native Binärdateien erfordern , die spezifisch für das Betriebssystem sind, in unserem Fall Windows. Die Tools, mit denen diese glatten Muskeln kompiliert werden , sind Python- und Visual Studio-Build-Tools. Diese Option wird sie also einfach installieren wenn sie jetzt fehlen, oder? auf Weiter und klicken Sie auf Installieren. Ich klicke nicht auf Installieren, da ich bereits kein GS installiert habe. Aber für dich wird das passieren. Wenn Sie auf diese Schaltfläche klicken, wird ein neues CMD-Fenster angezeigt. Und es wird so etwas sehen , wie wir es tun werden und diese Reihenfolge installieren , dass wir diese Anzahl an Speicherplatz benötigen. Schließen Sie einfach dieses Fenster und danach wird ein anderes Fenster geöffnet, nämlich das PowerShell-Fenster. Und es wird das gesamte Installationsprotokoll geben. Warte also einfach etwas, bis es fertig ist und dann geht's dir gut. wird kein JS als installiert angesehen. Lassen Sie uns das jetzt überprüfen. Wie macht man das. Klicken Sie auf Start-Panel und suchen Sie nach cmd. Dann öffnen wir das. Und in CMT geben wir Node Space, Dash, Dash Version ein. Drücken Sie Enter und Sie sollten die Version sehen , die Sie gerade installiert haben. Es ist möglicherweise möglich, dass beim Eingeben von Node Dash, Dash Version, etwas wie der Knoten nicht als interner oder externer Befehl erkannt wird . Wir müssen also einen anderen Weg finden , um unsere Installation zu überprüfen. Um dies zu tun, müssen wir erneut zum Start des Panels gehen als zur Systemsteuerung. Und dann suchen wir nach Programmen und Funktionen, okay? Hier müssen wir überprüfen, dass wir keine GS in der Liste haben. Wenn Sie also kein GS in der Liste haben, werden Sie feststellen, dass Sie nicht als interner zusätzlicher Befehl erkannt werden. Dann müssen Sie eine kleine Anpassung Systemkonfiguration vornehmen. Was Sie also tun müssen, ist erneut auf das Startfeld im Suchtyp ENV zu klicken das Startfeld im Suchtyp ENV und die Systemumgebungsvariablen bearbeiten auszuwählen. Klicken Sie dann auf die Umgebungsvariablen. Und hier müssen Sie unter Systemvariablen die Pfadvariable finden. Doppelklicken Sie darauf. Und in der Liste sehen Sie keine C-Programmdateien. Kein JS, was mein Installationspfad für keinen Jazz ist. Da Sie es also nicht hier in der Liste haben, sehen Sie, dass der Knoten nicht erkannt wird, okay? Was Sie also tun müssen, müssen Sie auf Neu klicken und Ihren Installationspfad für keine GS hinzufügen. Wenn Sie die Option in der Installation nicht geändert hätten, wären es auch C-Programme, NodeJS. Also klicke auf Neu, füge den Pfad hier ein, okay? Okay, okay, dann starte einfach das Terminal neu. Versuchen Sie es dann mit Node Dash, Dash Version. Schon wieder. Danach solltest du die Version sehen. Und das ist es im Grunde. Herzlichen Glückwunsch, Sie haben gerade NodeJS unter Windows installiert. Wir sehen uns im nächsten. 15. Node.js (macOS) installieren: Hallo, In diesem Video zeige ich dir, wie man NodeJS auf macOS installiert. Lass uns gehen. Wie immer gehen Sie zuerst zu Google und geben NodeJS ein, gehen zur ersten URL, der offiziellen Website, navigieren dann zur Download-Seite und klicken auf das macOS-Installationsprogramm. Der Download startet automatisch. Öffnen Sie die heruntergeladene Datei. Sie sehen, dass der Installationsassistent auf Weiter klicken, dann die Bedingungen akzeptieren, dann den Installationspfad überprüfen und auf Installieren klicken. Es wird Sie zur Eingabe Ihres Passworts auffordern und das ist in Ordnung. Warten Sie, bis kein GS direkt nach dem Installationsvorgang installiert , bis kein GS direkt nach dem Installationsvorgang Sie haben kein GS und NPM in Ihrem System, um die Installation zu überprüfen. Lass uns zum Terminal gehen und schlecht essen gehen. Suchen Sie dann nach dem Terminal, um den NodeJs-Typknoten dash V zu überprüfen , der für Version steht. Es sollte die Version drucken, die Sie installiert haben. Und auf die gleiche Weise müssen wir auch NPM überprüfen. Geben Sie also npm dash v ein, und das war's. Wir sehen uns im nächsten. 16. Node.js und NPM – Teil 1: Hi, Willkommen zu wissen GS-Einführungsvideo. Im Moment werden wir darüber sprechen, was kein GS ist. Warum brauchen wir es und wie können wir es benutzen? Lassen Sie uns zuerst das Wichtigste gehen, was ist keine GS weiß, ist eine JavaScript-Laufzeitumgebung. Es bedeutet, dass es uns ermöglicht, JavaScript auszuführen. Und du wirst wahrscheinlich denken, warum brauchen wir keine GS? Weil wir JavaScript im Browser laufen lassen und das ist der Punkt. Heutzutage können wir JavaScript mit Hilfe von NodeJS außerhalb des Browsers ausführen , wir können JavaScript verwenden, um mobile Anwendungen zu schreiben. Wir können JavaScript verwenden, um Desktop-Anwendungen zu schreiben. Wir können im Grunde alles mit JavaScript machen. Dank der Notiz ja, denn es ermöglicht uns, JavaScript außerhalb des Browsers auszuführen . Wenn ich zum Beispiel den Browser hier öffne, klicke ich auf Inspect, dann gehe ich zur Konsole. Das ist also eine Browserumgebung. Ich kann hier jedes gewünschte JavaScript schreiben. Wenn ich zum Beispiel console.log 5 plus 2 eingeben möchte, wird es sechs für mich ausgeben. Das ist großartig, aber das ist im Browser. Wenn ich es woanders ausführen wollte, dürfte ich das nicht tun. Aber mit Hilfe von Knoten, ja, das kann ich tun. Gehen wir zum VS-Code und lassen Sie mich einen neuen Projektordner erstellen. Ich gehe in den Ordner „Meine Projekte“ und hier werde ich GS testen. Ich wähle diesen Ordner aus. Und jetzt erstellen wir hier eine neue Datei , wir nennen sie test.js. Bevor wir etwas schreiben, wir zuerst sicher, dass kein JS installiert ist. Wir können darauf zugreifen. Dafür öffne ich mein integriertes Terminal. Und um auf NodeJS zugreifen zu können, muss ich nur den Knoten eingeben. Sobald sie den Knotenbefehl ausgeführt haben, gehe ich in die Umgebung Node.JS ein. Also hier kann ich JavaScript ausführen. Zum Beispiel das Gleiche, was ich im Browserkonsolenprotokoll 2 plus 4 gemacht habe . Ziemlich genial. Dies ist der Beweis dafür, dass JavaScript außerhalb des Browsers ausgeführt wurde. Dies ist jedoch nicht sehr praktisch für uns, immer JavaScript in das Terminal zu schreiben. Um diesen Modus zu beenden, der mehrmals die Strg plus C drücken wird. Großartig. Und jetzt schreiben wir stattdessen ein paar JavaScript-Dateien , die wir später als ohne JS ausführen werden , bevor wir in Dateien springen, ich möchte nur erwähnen, dass jede Datei, jede JavaScript-Datei, die ausgeführt wird innerhalb der Node.JS Umgebung wird ein Modul sein. Ein Modul ist eine JavaScript-Datei, die in sich geschlossen ist. Es bedeutet, dass es nicht nur über die Außenwelt weiß , was darin geschrieben ist. Lasst uns zuerst erstellen, vielleicht bin ich hörbar? Const fünf ist gleich fünf. Und jetzt konsolen wir Dot Log 5 und klicken Sie auf Speichern. Das war's. Wir haben gerade unser erstes Skript erstellt. Nun führen wir es aus, um eine Datei auszuführen, wir müssen node und dann den Namen des Skripts eingeben , das wir ausführen möchten. Also das wird Test-GS sein. Ich führe diesen Befehl aus und du kannst fünf in der Konsole sehen , weil ich nur Log 5 konsolen kann. Wenn ich diese Zeile entferne, werde ich sie auskommentieren. Und ich werde versuchen, das Skript erneut auszuführen. Nichts wird gedruckt. Und das ist offensichtlich, weil wir im Inneren nichts tun. Lassen Sie uns unsere Aufgabe ein bisschen schwerer machen. Was ist, wenn wir zwei Dateien zu Modulen haben? Lassen Sie sich hier einen zweiten Punkt erstellen und lassen Sie uns hier eine Zeichenfolge setzen. Vielleicht mein Name, ich drucke Andrew. Und was ich tun möchte, möchte ich irgendwie Informationen zwischen diesen beiden Modulen austauschen . Also wollte ich meinen Namen von der zweiten Gs in den Test geben . Ja. Und das kann ich durch Import und Export tun. Um also etwas aus einem Modul zu exportieren, verwenden wir das Modul. Unsere Experten exportieren also ein Objekt. Und in diesem Objekt setze ich meine Namensvariable so ein. Also kann ich es tatsächlich so machen. Mein Name, dann ruf meinen Namen an. Aber in JavaScript können wir eine Kurzschrift verwenden. Wir können es einfach so ausdrücken und es wird großartig funktionieren. Jetzt wird mein Name aus dem zweiten Gs exportiert. Versuchen wir das zu importieren. Wenn ich zurück zu Ts gehe, gs, lass mich das alles entfernen. Ich werde eine Const setzen, dass ich meinen Export so benennen werde. Ich habe meinen Namen importiert, egal. Und um das zu importieren, was ich von hier exportiert habe, muss ich erforderlich eingeben. Und drinnen muss ich den Weg zu diesem Modul legen, das nur eine zweite GS sein wird. Ich muss die Erweiterung nicht angeben. Also lege ich Punkt und Schrägstrich hier drüber, um anzugeben, dass sich diese Datei in diesem Ordner befindet. Nun, was ich tun werde, werde ich einfach konsolenlog importiert meinen Namen importiert. Ich speichere die Datei, gehe zurück zum Terminal und dann wieder Knoten, Test, GS. Boom, was ich sehe, ich habe ein Objekt. Und dieses Objekt enthält meinen Namensschlüssel. Genau das, was ich von Sekunde exportiert habe, ja, tatsächlich können wir das in importiertes zweites Modul umbenennen. Und dann kann ich auf den importierten zweiten Modulpunkt meinen Namen verweisen , weil dies ein Objekt ist und es Schlüssel meinen Namen hat. Ich speichere es, führe das Skript erneut und ich habe gedruckt in die Konsole eingegeben. So funktioniert NodeJS, indem es einfach verschiedene Module erstellt , die Daten untereinander teilen. Dieses System mit einem Required und mit Modulexporten wird als gemeinsames GS bezeichnet, das so geschrieben wird. Komma gs. Dies ist ein natives Import-Exportsystem in Node.JS. Derzeit arbeitet die NodeJS-Community jedoch aktiv an einem System, arbeitet die NodeJS-Community jedoch aktiv an das als ECMO Script-Module bezeichnet wird. Diese Module sind also Teil der Browserumgebung und sind derzeit in einer Node.JS Umgebung experimentell. Sie unterscheiden sich also geringfügig von Bedarf- und Modulexporten, sind jedoch einfacher und intuitiver zu bedienen. Probieren wir sie aus. Was denken Sie, um ACML Script-Moleküle in der Umgebung Node.JS verwenden zu können, müssen wir unseren Modulen eine weitere Erweiterung hinzufügen. Anstelle von js müssen wir also MGS verwenden, das Modul GS, MGS sein wird und diese Datei auch umbenennen, was mgs sein wird. Anstatt erforderlich, kommentiere ich diese Zeile durch Drücken von Strg. Und stattdessen verwende ich Import. Da wir dann ein Objekt exportieren, setze ich wieder geschweifte Klammern. Und ich gebe an, dass ich meinen Namen importieren muss. Es ist wichtig, denselben Namen anzugeben , denn wenn ich etwas anderes angeben möchte, existiert es für das exportierte Objekt nicht, oder? Also werde ich meinen Namen aus dem zweiten Modul angeben. Großartig. Und jetzt werde ich meinen Namen konsolenprotokollieren. Und im zweiten MGS anstelle von Modulexporten ich anstelle von Modulexporten einfach meinen Namen exportieren. Das war's. Und es sieht viel, viel sauberer aus als CommonJS. Versuchen wir nun einen ausgeführten Knotentest. Ja, und wir werden haben, kann das Modul aha IC nicht finden. Dies liegt daran, dass ich wahrscheinlich die Erweiterung angeben muss. Lass es mich ausprobieren. Ja, genau. Es gibt also einen weiteren Nachteil beim Verwenden des ECMO-Skript-Moduls im aktuellen Status von NodeJS, ich muss immer die Erweiterung mit CommonJS angeben, ich kann zugeben, dass ich die Erweiterung angeben wenn a Importieren Sie verschiedene Module wie diese, aber mit dem ECMO-Skript-Modul muss ich das tun. Das Ergebnis ist das gleiche. Ich führe das Drehbuch aus. Ich habe Andrew, aber Sie können sehen, dass es das ECMO-Skript-Modul in unserem Projekt verwendet. Wenn wir all diese Entwicklungssachen erledigen, verwenden wir die Umgebung Node.JS und verwenden Achmat Script-Module. Sie können sehen, dass dies ein sehr einfaches Beispiel ist. Es verwendet hier einzelne Skripte, nichts Kompliziertes. Wir brauchen jedoch offensichtlich etwas komplexeres und dies ist unser Thema für das nächste Video. Wir sehen uns dort. 17. Node.js und NPM – Teil 2: Hey, willkommen zum zweiten Teil der NodeJs-Einführung und dem letzten Teil wir besprochen haben, was nicht ja ist und wie wir einzelne Skripte ausführen können. In diesem Video werden wir über NPM sprechen und wie wir npm verwenden können, um Projekt- und Projektabhängigkeiten zu verwalten. Lass uns gehen. Zuallererst, was ist npm? Npm steht für Node Package Manager und ist bereits mit NodeJS gebündelt. Wenn Sie also kein JSON installiert haben, haben Sie bereits NPM, um zu überprüfen, dass Sie im Terminal einfach npm eingeben. Es gibt eine Dash-Version und es wird die derzeit installierte NPM-Version drucken. Wie können wir npm benutzen oder was tut es für uns? Nun, die Sache ist, dass es in echten JavaScript-Projekten Abhängigkeiten oder Projektpakete gibt. Dies sind also diese Bibliotheken, verschiedene Module aus dem Internet oder verschiedene Tools, die wir in unser Projekt installieren. Und npm ist das Tool, das uns das ermöglicht. Um diese Pakete zu installieren, aber zuerst, wie man npm in unserem Projektordner initialisiert. Um dies zu tun, müssen wir den Befehl npm init verwenden. Und sobald Sie diesen Befehl ausgeführt haben, werden Sie nach einigen Dingen wie Paketnamen, Version und einigen anderen Dingen aufgefordert . Überspringen Sie das einfach, indem Sie ständig die Eingabetaste drücken. Sobald der Befehl beendet ist. In der Projektroute sehen Sie package.json-Dateipaket Jason ist die Manifestdatei, die unser Projekt beschreibt, in dem wir den Projektnamen sehen können, vielleicht die Beschreibung der Projektversion. Wenn wir diese Autorenlichter setzen und sehen, ob wir Skripte und ein paar andere Abschnitte haben Skripte und ein paar andere Abschnitte über die wir in einer Sekunde sprechen werden. Die Frage ist, welches Paket JSON für uns macht? Wie kann es nützlich sein? Nun, lass uns zum Browser gehen. Lassen Sie uns in Google nach NPM suchen und wir werden auf der offiziellen npm-Website landen. Npm hat die NPM-Registrierung. Node Package Manager ist also ein Tool, mit dem wir Pakete in unserem Projekt verwalten können. Aber woher stammen diese Pakete? Sie stammen aus der NPM-Registrierung. Die NPM-Registrierung ist der Ozean verschiedener Pakete, Tools und Bibliotheken, die wir mit npm in unser Projekt installieren können . Auf dieser Website können Sie also nach verschiedenen Paketen suchen. Es gibt Millionen, Milliarden verschiedener Bibliotheken, die wir verwenden können. Aber jetzt suchen wir einfach nach dem, den ich vorbereitet habe, nämlich Cowsay. Lasst uns das anklicken. Und jetzt können wir die offizielle Webseite für diese auf dieser Seite sehen , wir finden ihre Dokumentation, wie wir dieses Paket installieren können, was es tut, wie wir es verwenden können und alle anderen Dinge. Wir können sehen, dass es für Abhängigkeiten ist. Die Sache ist, dass Pakete, die in der NPM-Registrierung veröffentlicht werden, Abhängigkeiten haben und diese Abhängigkeiten auch veröffentlichte Pakete sind. Und diese Pakete könnten auch Abhängigkeiten haben. Abhängigkeiten, Abhängigkeiten und Abhängigkeiten von Abhängigkeiten werden als Peer-Abhängigkeiten bezeichnet. Auf dieser Seite finden wir auch einige wichtige Informationen wie Version, wie viele wöchentliche Downloads der Autor zuletzt veröffentlicht hat , und einige andere Dinge. Lasst uns die Dokumentation lesen. Was sehen wir hier? Zuallererst, was macht dieses Paket? Nun, dieses Paket ist im Grunde sehr einfach. Sein einziger Zweck besteht darin, diese Kuh einfach ins Terminal zu drucken . Also schauen wir uns den Installationsteil an, npm installieren minus g Cowsay. Kopieren wir diesen Befehl und legen wir ihn in unser Terminal. Mal sehen, was passieren wird. So können wir sehen, dass etwas passiert. Können wir sehen, dass die Installation bereits erfolgreich war. Wir können Edit 41-Pakete und die Version sehen , die wir installiert haben, die 1.5 ist. Warum 41 Paket? Genau wie ich bereits erwähnt habe, haben Pakete ihre eigenen Abhängigkeiten, und diese Abhängigkeiten haben ihre eigenen Abhängigkeiten. Und schließlich haben wir diesen Abhängigkeitsbaum. Deshalb haben wir am Ende insgesamt 41 Pakete. Wir haben npm Cowsay installiert. Was hat es gemacht? Nun, es hat gerade Cowsay als globales Paket in unser System installiert . Als globales Paket, weil wir das g Flag minus, um zu überprüfen, ob wir npm list minus g eingeben können, dann Strich, Strichtiefe gleich 0. Führen wir diesen Befehl aus und schauen wir uns an, was gedruckt wird. Ich habe hier bereits ein paar Pakete weltweit installiert, aber in Ihrer Liste sehen Sie Cowsay. Was heißt es also? Was gibt es uns? Das bedeutet, dass wir das Paket jetzt weltweit als CLI in unserem System verwenden können . Mal sehen wir den Nutzungspark Cowsay JavaScript. Lassen Sie es uns kopieren. Und lasst uns versuchen, es im Terminal auszuführen. Ich habe diese kleine hübsche Kuh hier, die JavaScript sagt. Genau das macht dieses Paket und wir können es als CLA in unserem Terminal verwenden. Und es spielt keine Rolle , von wo es weltweit verfügbar ist. Wenn ich hier eine andere Git Bash-Instanz öffne, kann ich immer noch Cowsay verwenden. Weil wir Cowsay wieder als globales Paket installiert haben. Es bedeutet, dass wir es überall benutzen können. Es gibt zwei Arten von Paketen, oder ich würde auf zwei Arten sagen, wie wir ein Paket installieren können. Erstens können wir es global installieren, genau wie Sie hier sehen. Wenn also ein Paket global installiert wird, ist es nicht an ein Projekt gebunden, sondern wird nur global in Ihrem System installiert. Die zweite Möglichkeit besteht darin, ein Paket als Projektabhängigkeit zu installieren . Wenn ein Paket als Projektabhängigkeit installiert , ist es zunächst nicht global verfügbar. Es wird nur in dem Projekt verfügbar , in dem es installiert wurde Lassen Sie uns zuerst Cowsay als globales Paket deinstallieren und stattdessen als Projektabhängigkeit installieren. Also geben wir zuerst npm install minus g Kuh Sake ein. Sie werden am Ende sehen, dass 41 Paketnote entfernt wurde. Um nun Cowsay als Projektabhängigkeit zu installieren, müssen wir npm Cowsay installieren, aber dieses Mal ohne minus g Flag, führen wir diesen Befehl aus und mal sehen, was passieren wird. Was ist neu im Seiten-Datei-Explorer. Wenn wir also das Paket Jason öffnen, sehen wir zuerst einen neuen Abhängigkeitsabschnitt. Da das Paket Jason also unsere Manifestdatei ist, wird es alle Abhängigkeiten auflisten, die wir installiert haben. Also haben wir nur einen Abhängigkeits-Cowsay dieser Version installiert . Jetzt sehen wir auch package.json. Und package.json erscheint, wenn Sie Abhängigkeitspaket installieren. JSON Zweck ist es, Versionen der installierten Abhängigkeiten und Abhängigkeiten von Abhängigkeiten zu suchen der installierten Abhängigkeiten und Abhängigkeiten . Auf diese Weise können wir verschiedene Probleme mit Versionsauflösungen vermeiden . Und wir haben auch Node Modules Ordner. Der Node-Modulordner ist der Ordner, in dem alle Pakete installiert wurden. Wenn wir diesen Ordner öffnen, sehen wir hier eine Reihe verschiedener Pakete zusammen mit Cowsay. Dies sind diese 41 Pakete, die wir gesehen haben, dass sie installiert wurden. Sie befinden sich hier unter Node-Modulen. Wenn wir diesen Ordner löschen, werden sie gelöscht. Gehen wir nun zurück zu Cowsay und schauen wir uns an, wie wir dieses Paket tatsächlich verwenden können. Wenn wir also nach unten scrollen, können wir die Verwendung als Modul sehen. Denken Sie daran, dass ich denen gesagt habe, dass alle Dateien in Node.JS, unsere Module gleich mit Paketen sind. Da Pakete in der NPM-Registrierung auch JavaScript-Dateien sind, bedeutet dies, dass es Module gibt. Mal sehen, wie wir es als Modul verwenden können. Und wenn ich mir dieses Code-Snippet ansehe, kann ich sagen, dass dieses Beispiel require verwendet, was bedeutet, dass es CommonJS-Importsystem verwendet. Aber jetzt wissen wir, dass es CommonJS gibt und es auch ECMO Script-Module gibt. Stattdessen werden wir atmosphärische Module verwenden. Also lassen Sie uns dieses Beispiel kopieren. Und lasst es uns in unsere Test-Mgs legen. Aber anstatt zu benötigen, verwende ich bei meinem Skriptimport. Also geben wir den Import Cowsay aus Cowsay ein. Und hier muss ich den Paketnamen angeben, wobei der Abhängigkeitsname vom Paket JSON. Ich muss den Pfad nicht angeben, in dem ich keine Knotenmodule referenzieren muss. Ich muss nur den Abhängigkeitsnamen eingeben , der Cowsay sein wird. Lassen Sie uns das jetzt löschen und löschen wir es und speichern wir es. Und lasst uns versuchen, dieses Skript auszuführen. Ich gebe den Knoten test.js ein. Und mal sehen, wieder haben wir diese Kuh, die sagt, dass ich ein Moodle bin, aber jetzt ist Cowsay Teil unseres Projekts. Als wir es global installiert haben, war es unabhängig. Es war nur ein Tool in unserem System, das wir über das Terminal verwenden können. Aber da Cowsay jetzt Teil unseres Projekts ist, sind wir in diesem speziellen Projekt an Cowsay gebunden. Wenn ich den Ordner der Knotenmodule entfernen möchte, gehen wir weiter und löschen sie vollständig. Und wenn ich versuche, diese Datei erneut auszuführen, werden Sie sehen, dass das Paket Cowsay nicht gefunden werden kann , weil wir gerade alle erforderlichen Dateien gelöscht haben, die zum Ausführen von Cowsay erforderlich sind. Um also Pakete neu zu installieren im Paket Jason aufgeführt sind, das in unserem Projekt aufgeführt ist, müssen wir einfach npm installiert eingeben, wenn wir keinen Node-Modulordner haben, aber wir müssen die Pakete installieren. Wir geben einfach npm install ein. Also was es tun wird, es wird in das Paket Jason schauen. Es wird nach dem Abschnitt „Abhängigkeit“ suchen und fehlende Pakete installieren. Das war's. Jetzt kann man es wieder sehen 41 Paket, wenn ich das Skript noch einmal ausführe, war die Kuh da. Großartig. Schauen wir uns das Paket JSON und lassen Sie uns den Abschnitt „Skripte“ hier finden. Ich möchte jetzt über diesen Abschnitt sprechen, die Sache ist, dass es in den Projekten ein paar projektspezifische Skripte gibt. Dieser Abschnitt heißt also NPM-Skripte. Normalerweise werden projektspezifische Skripte durch NPM-Skripte definiert. Wir haben hier bereits ein Testskript definiert, aber lassen Sie es uns entfernen und definieren wir unser eigenes Skript. Es kann alles sein, wir können es nennen, wie wir wollen. Zum Beispiel mein Testskript. Und hier müssen wir eingeben, was das Skript tun wird. Wenn ich zum Beispiel im Terminal etwas in die Ausgabe drucken möchte , würde ich den echo-Befehl verwenden, echo, hallo, und hallo wird gedruckt. Also gut, hier können wir dasselbe definieren. Zum Beispiel wird mein Testskript Echo hallo ausführen, zum Beispiel bei Code hallo. Um dieses NPM-Skript auszuführen, muss ich nun npm run und den Namen des Skripts eingeben, das mein Testskript sein wird. Sobald sie diesen Befehl ausgeführt haben, sucht dieser Befehl in diesem Ordner nach Paket JSON, und er wird in diesen Skriptabschnitt schauen und mein Testskript finden, und dann wird es einfach alles ausführen, was geschrieben wurde hier. Probieren wir es aus. Du kannst sehen, ich habe Hallo, im Grunde das gleiche Ergebnis. Deshalb könnte es nützlich sein. Nun, es gibt einige Situationen, in denen wir hier vielleicht ein wirklich, sehr langes Drehbuch haben. Stell dir vor, es läuft so. Und jetzt, anstatt all das zu schreiben, können wir die ganze Zeit einfach npm ausführen, mein Testskript ausführen und es wird das Ding machen. Das war's. Wir werden ausführlicher über NPM-Skripte sprechen sobald wir vorerst ein echtes React-Projekt gerüstet Lassen Sie es uns einfach leer. Eine weitere Sache, die ich hier erwähnen möchte, ist, dass Projektabhängigkeiten von zwei Arten sein können. Eigentlich gibt es regelmäßige Abhängigkeiten , die wir in unserem Quellcode verwenden, und es könnte Entwicklerabhängigkeiten geben. Dev-Abhängigkeiten sind also ebenfalls Teil des Projekts, werden jedoch nicht im Quellcode referenziert. Sie werden nur für die Entwicklung verwendet. Diese Pakete, die wir für die Entwicklung installieren werden, werden also Prediger und ES Flusen sein. Und wir werden sie als taube Abhängigkeiten installieren. Wir werden in den kommenden Videos darüber sprechen. Sie werden verwendet, um unsere Entwicklung zu erleichtern, sind aber optional. Wenn wir Dev-Abhängigkeiten entfernen, kann das Projekt weiterhin ausgeführt werden. Wenn wir diese Abhängigkeit jedoch von hier entfernen Knotenmodule entfernen, kann das Projekt nicht ausgeführt werden da es von Cowsay abhängt. Wenn wir also Dev-Abhängigkeiten entfernen, kann das Projekt weiterhin ausgeführt werden. Wenn wir jedoch die Hauptabhängigkeit entfernen, wird das Projekt nicht ausgeführt, da jetzt die Abhängigkeit fehlt weil unser Projekt davon abhängt. Dev-Abhängigkeiten sind jedoch nur Abhängigkeiten für unsere Entwicklungsumgebung. Es hat keinen direkten Einfluss auf den Quellcode. Wir werden noch einmal darüber reden Sobald wir über den Prediger im Benzin sprechen werden. Aber im Moment denke ich, dass es genug ist. Alle JavaScript-Projekte werden mit npm, den NPM-Registrierungspaketen, verwaltet den NPM-Registrierungspaketen, Sie werden JSON in Ihrem Stammordner gepackt haben. Sie werden Abhängigkeiten aus der NPM-Registrierung installiert haben. Dann verweisen Sie auf diese Abhängigkeiten in Ihrem Quellcode. Am Ende des Tages, wenn Sie das Projekt entweder entwickeln müssen oder das Projekt erstellen müssen, haben Sie hier NPM-Skripte im Paket Jason definiert. Und das war's. So sehen alle JavaScript-Projekte aus. Das war's für NodeJS. Und wir sehen uns im ES-Fusseln- und Prediger-Video. 18. Was sind Prettier und ESLint?: Hey, in diesem Video möchte ich über Prediger in ES Flusen sprechen. Was sind das für Tools? Warum interessiert es uns und wie werden sie uns helfen? Lasst es uns gemeinsam herausfinden. Als erstes möchte ich erwähnen, dass ich in diesem Video dasselbe Projekt wiederverwenden werde, das ich im Einführungsvideo Node.JS erstellt habe . Wie Sie sich erinnern, enthält es nur eine Abhängigkeit, nämlich Cowsay, und wir verwenden es nur in MGS. Fangen wir damit an. Preachers ist ein Tool, das alle unsere Dateien formatiert. Es hat nur einen Zweck, Dateien zu formatieren. Es gewinnt den vordefinierten Konflikt. Lasst uns also herausfinden, wie wir Prediger benutzen können. Wenn wir zu Google gehen und nach einem Prediger suchen, landen Sie auf der offiziellen Website. Gehen wir zur offiziellen Installationsdokumentation und folgen wir ihr einfach. Zuerst installierte Prediger lokal. Kopieren wir diesen Befehl und legen wir ihn ins Terminal. save-dev-Flag innerhalb des Befehls bedeutet also , dass dieser Paketprediger als Entwicklungsabhängigkeit installiert wird . Wenn wir package.json öffnen, sehen wir hier einen neuen Abschnitt, Dev-Abhängigkeiten, bei denen es sich um Entwicklerabhängigkeiten handelt. Und wir werden den Prediger hier sehen. Jetzt. Lass uns mit den Hunden fortfahren. Und hier haben wir eine leere Konfliktdatei erstellt. Auch hier kopiere ich einfach den Befehl. Legen Sie es in das Terminal, und es wird einen leeren Prediger RT JSON für mich erstellen, jeder Werkzeugprediger und Eastland, erfordert eine Konfigurationsdatei, um zu verstehen, was wir von diesem Tool wollen. Und wir können all diese Konfliktoptionen für Prediger in der Dokumentation unter Optionen-Link sehen . Wenn wir hierher gehen, werden wir hier verschiedene Optionen sehen, die wir im Bild RC Jason verwenden können, zum Beispiel Tab mit. Also werde ich einfach die Tab-Breite von hier aus verwenden. Ich kopiere es einfach lege es in die Konfiguration. Und wir können sehen, dass der Standardwert zwei ist. Also lass mich vielleicht 10 hier rüber stellen und mal sehen, was passieren wird. Ich habe die Akte gespeichert. Ich gehe zurück, um MGS zu testen. Ich drücke Control S, um die Datei zu speichern. Und Boom, du siehst, dass sich die Einrückung geändert hat. Jetzt. Es verwendet die Tippbreite von 10 leeren Zeilen. Sie denken wahrscheinlich darüber nach, wie es automatisch so ist , als würde man diese Datei formatieren. Die Sache ist, dass das, was wir gerade in unserem Projekt unter Entwicklerabhängigkeiten installiert haben, Prediger als Tool installiert haben, aber außerhalb der Formatierung ist die Funktion, wie wir sehen, über den VS-Code verfügbar ist -Erweiterung, die Sie bereits hätten installieren sollen. Wenn Sie das nicht getan haben, gehen Sie zur Registerkarte Erweiterungen. Sucht hier nach Predigt. Dies ist die Erweiterung und installieren Sie sie und stellen Sie sicher, dass sie bereits konfiguriert ist. Wenn Sie das nicht getan haben, möchten Sie den Prediger wiederverwenden, um das Video zur VS-Code-Konfiguration von Projekt zu Projekt anzusehen , um das Video zur VS-Code-Konfiguration von Projekt . Sie möchten hier nicht immer verschiedene Optionen angeben. Glaub mir, es wird nur ein paar geben. Aus diesem Grund werde ich Ihnen dieses Geschenk mitteilen und Sie können einfach kopieren und einfügen Predigerkonflikt , den ich überall verwende, einfach kopieren und einfügen. Also lass es mich hierher legen und lass mich die Akte speichern. Wie Sie sehen können, verwende ich fünf Befehle und das reicht aus, damit ein Prediger arbeiten kann. Du siehst, ob ich es speichern werde. Es nutzt diesen Konflikt jetzt. Großartig. Beantwortung der Frage, warum brauchen wir Prediger? Zuallererst müssen Sie verstehen, dass Prediger ein optionales Werkzeug ist, aber es wird dringend empfohlen, dass Sie Prediger in Ihrem JavaScript-Projekt haben . Der Grund dafür ist, dass wir unseren Code so lesbar und wartbar wie möglich machen wollten . Und der Prediger wird uns dabei helfen. Welches bevorzugst du? Diese seltsame Formatierung? Weil Sie aus irgendeinem Grund die manuelle Einrückung nicht beendet oder bevorzugen Sie sehr sauberen Code, der mit Prediger erreicht wurde? Ich schätze, es wird die zweite Option sein. Betrachten Sie schließlich eine Situation, in der Sie viele Dateien im Projekt haben und diese nicht formatiert sind. Prediger. Was ist in diesem Fall zu tun? Nun, die erste Option besteht natürlich darin, zu jeder Datei zu wechseln, Control S zu drücken, um jede Datei manuell zu speichern, und dann wird sich der Prediger an ihnen bilden. Aber das ist nicht sehr praktisch. Es wäre besser, ein Skript zu erstellen , das alle unsere Dateien gleichzeitig formatiert. Und dieses Skript werden wir Prediger benutzen, und hier kommen NPM-Skripte ins Spiel. Lassen Sie uns ein NPM-Skript erstellen, das Prediger verwendet, um alle unsere Dateien innerhalb des Projekts mit Prediger RC JSON zu formatieren . Wenn wir also zur Prediger-Dokumentation zurückkehren, gehen wir zur Installationsseite. Scrollen wir nach unten und hier können wir sehen, dass jetzt alle Dateien mit Prediger formatiert werden und wir haben diesen Befehl und px-Preacher-Strich, Bindestrich rechts. Lass es mich kopieren. Und navigieren wir zurück zu den NPM-Skripten. Also lassen Sie uns hier definieren und Ihr NPM-Skript , das wir formatieren werden. In diesem Skript setze ich n px, Prediger Strich, Strich, rechten Punkt. Wir brauchen jedoch nicht wirklich und Px hier können Sie lesen, was n px in dieser gelben Warnung ist. Sind wir uns sicher? Also ist n px im Grunde ein Tool, das ohne JS ausgeliefert wird, mit dem Pakete ohne Installation direkt aus der NPM-Registrierung ausgeführt werden können. Wenn ich Prediger nicht installiert habe und dann würde ich n px Preacher Dash verwenden, Dash Reidar. Es würde funktionieren, weil NP x Prediger ohne Installation direkt aus der NPM-Registrierung verwenden wird Prediger ohne Installation direkt , aber wir brauchen es überhaupt nicht. Wir haben Prediger installiert. Und wenn wir Prediger hier im NPM-Skript schreiben, wird der Prediger verwendet, der in Knotenmodulen installiert ist. Probieren wir den Befehl aus, den wir gerade definiert haben. Ich gehe zurück zu meinem Terminal und führe das npm run-Format aus. Du wirst sehen, dass etwas passiert. Und jetzt sind einige Dateien betroffen, im Grunde alle von ihnen. Schütteln wir sie aus. Also haben wir diese Datei formatiert, diese Datei formatiert, diese Datei formatiert. Also ist im Grunde alles jetzt mit einem Prediger formatiert. Gehen wir zurück zum Prediger RC Jason und ändern wir es vielleicht auf 10 Tablette. Und lassen Sie uns den Befehl erneut ausführen npm run format. Und Sie werden sehen, dass alle Dateien jetzt gegen Predigerkonflikte formatiert sind gegen Predigerkonflikte formatiert , die wir gerade definiert haben. Das war's. Jetzt weißt du was Prediger macht und warum brauchen wir ihn? Lassen Sie uns schnell zusammenfassen. Preacher ist ein Tool, das Dateien in unserem aktuellen Projekt formatiert , hübscher hat eine Konfigurationsdatei die Dot Preacher RC JSON ist. Wir können Prediger über die NPM-Skripte verwenden oder wir können Prediger über die VS-Code-Erweiterung verwenden, die wir installiert haben. Also diese Erweiterung, das einzige, was sie tut, ermöglicht es uns nur, Dateien zu formatieren. Wenn wir auf die Schaltfläche „Speichern“ klicken, wenn wir diese Erweiterung deaktivieren oder wenn wir sie nicht haben, wird der Prediger nicht in unseren Dateien gebildet, wenn wir auf Speichern klicken, die einzige Möglichkeit für uns, die Dateien werden über unser benutzerdefiniertes NPM-Skript erstellt, das wir Format genannt haben. Aber mit der Erweiterung ist es viel, viel bequemer. Lassen Sie uns nun zu ES Lint übergehen, bevor wir nach Eastland springen, lassen Sie mich einfach schnell auf unsere vorherige Einstellung zurückgreifen und den Formatbefehl erneut ausführen. Großartig. Was ist Eastland? Eastland ist auch ein optionales Tool, mit dem wir JavaScript anhand einiger vordefinierter Code-Richtlinien auf einige häufige Probleme prüfen JavaScript anhand einiger vordefinierter Code-Richtlinien auf einige häufige Probleme können. Wir benötigen ES Flusen, um zu überprüfen, dass wir keine sehr einfachen Fehler in unserem Code haben, z. B. undefinierte Variablen, nicht verwendete Variablen, oder vielleicht haben wir einen Code, der falsch verwendet wird, und ES Fusseln wird lass es uns darüber wissen. Also nochmal, genau wie bei Druck, lass uns zu Google gehen und nach ES-Fusseln suchen. Lasst uns hier klicken. Sie können sehen, dass ES-Fusseln ein lineares ist. Linear ist also ein Werkzeug, das den Code tatsächlich auf Fehler überprüft. Klicken wir auf Erste Schritte und folgen wir noch einmal der Dokumentation. Also npm installiere ES lint save-dev, copy. Lasst es uns wieder ins Terminal legen. Dash, dash save dev-Flag wird sicherstellen, dass ES Lint als Entwicklerabhängigkeit im Paket Jason installiert wird , wiederum sind Wasser-Entwickler-Abhängigkeiten, Dev-Abhängigkeiten jene Tools die wir in der Entwicklung verwenden umgebung. Sie sind nicht Teil des Quellcodes. Wenn ich also Island und Prediger entfernen will, wird mein Projekt weiterhin laufen können. Großartig. Wir haben ES Lint installiert. Folgen wir nun der Dokumentation. Es schlägt also vor, den Befehl init zu verwenden , um die Konfigurationsdatei zu initialisieren. Lassen Sie es uns stattdessen manuell erstellen. Also werde ich hier eine neue Datei erstellen, und ich nenne sie dot ES lint RC. Das wird also meine ES-Lint-Konfigurationsdatei sein. Um ES Flusen zu konfigurieren, müssen wir genau dem gleichen Muster folgen wie beim Prediger. Sie müssen eine Konfigurationsdatei erstellen und wir müssen ein paar Befehle eingeben , damit Yes Lint verstehen kann, was wir davon wollen. Kommen wir zurück zur Website und hier haben wir eine Konfiguration. Also lasst es uns einfach kopieren. Aber wir werden hier ein paar Optionen ändern. Ich lege es hier hin. Ich werde das entfernen und wir enden mit dem Regelabschnitt. Im Regelabschnitt in Island, RC, definieren wir ES-Fusselregeln, die wir in unserem Projekt verwenden möchten, nach in unserem Projekt denen unser Code überprüft wird. Zum Beispiel kann ich eine Regel eingeben, die kein unbenutzter Virus genannt wird, und wir müssen hier einige Optionen angeben. Und Sie können sehen, dass es mir sogar den automatischen Vervollständigungseditor abgenutzt und abgenutzt gibt . Also was sind das? Wenn ich also aufschiebe, wird diese Regel deaktiviert und mein Code wird nicht mit dieser Regel verglichen. Wenn ich mich als Option für eine ES-Fusselregel einsetze . Es bedeutet, dass es Flusen mich warnt, wenn ich gegen diese Regel verstöße. Und ich habe eine dritte Option, was ein Fehler ist. Das bedeutet, dass Lint, wenn ich gegen diese Rolle gehe , einen Fehler erzeugen wird. Es gibt also einige, sagen wir mal, entscheidende Regeln, die ich für mich als andere melden möchte . Und es gibt einige vielleicht kleinere Regeln, die ich mir als Warnungen melden möchte . All diese Regeln finden wir in der Dokumentation. Ich schlage immer vor, dass Sie sich die Dokumentation ansehen. Dort finden Sie alles, damit Sie hier sogar Warn-Fehleroptionen sehen können , genau das, was Ihnen gesagt wird. Jetzt können wir zum Benutzerhandbuch gehen und wir können zu Regeln gehen. Dies ist eine Regelreferenz. Alle Regeln findest du hier immer. Wenn ich zum Beispiel nach keinen unbenutzten Balken suche, kannst du es hier sehen. Lass uns danach suchen. Ja, nicht erlaube unbenutzte Variablen. Das ist es, was die Regel tut, ist dies die Verwendung unbenutzter Variablen zu ermöglichen. Probieren wir es also aus. Ich komme zurück zu meinem Code. Und hier was ich habe Parsing-Fehler, die Tasteneingabe ist reserviert. Nun, ja, zuerst müssen wir ES Lint verstehen lassen , dass wir die neueste JavaScript-Syntax verwenden . Um das zu tun, gehen wir zu ES Lint. Hier fügen wir eine weitere Option hinzu, die Parser-Optionen sein wird. Innerhalb der Parser-Optionen müssen wir also die AVMA-Version liefern. Und lassen Sie uns 2020 hierher stellen , wenn ich die Datei speichere und MGS erneut teste, und ich sehe einen weiteren Fehler, der besagt, dass Import und Export nur im Quelltyp-Modul angezeigt werden , das wieder von ES Lint kommt. Also gehe ich zurück zu ja Lind und ich kann hier eine andere Option bereitstellen , wird der Quelltyp, Modulgrad sein . Jetzt haben wir keine Fehler oder Warnungen, daher haben wir keine unbenutzte Virenregel definiert , die zu einem Fehler führt, wenn wir dagegen gehen, stimmt, lasst uns mgs testen. Und hier lassen Sie uns eine End-Use-Variable erstellen. Vielleicht nenne ich es Hallo. Und was sehen wir hier? Wir sehen, dass es mit einer roten Linie hervorgehoben ist. Wenn ich mit der Maus schwebe, siehst du, wie niedrig ein Wert zugewiesen wird, aber nie verwendet wird. Und es kommt, wie Sie aus ES-Fusseln sehen können , keine unbenutzten Variablen. Wenn ich zurück zu ES lint RC gehe und wenn ich diese Regel deaktiviere, deaktivieren Sie die Überprüfung gegen diese Regel. Du wirst jetzt sehen, ich habe keine Warnung oder einen Addierer. Also lasst uns wieder hierher kommen und lassen Sie es uns als Warnung ausdrücken. Und wir können sehen, dass es gelb ist, weil es jetzt eine Warnung ist. Und wenn ich es wieder zum Äußersten setze, wird es rot. Großartig. Lassen Sie uns vielleicht eine Warnung halten und gehen wir zurück zur Dokumentation. Kommen wir also zurück zur Installationsseite. Und hier können wir ganz unten sehen, dass wir die Extents Option auch in ES-Fusseln setzen können . Die Sache ist, dass ES Flusen viele verschiedene Regeln hat und all diese Regeln hier ständig manuell schreibt . Das ist nicht sehr praktisch, weil unsere ES Fusseln ziemlich, ziemlich lang sein wird. Das ist nicht praktisch. Um dieses Problem zu lösen, hat ES lint Konfigurationsdateien oder sagen wir vordefinierte Konflikte, die wir von ES-Fusseln erweitern können, kommt in ES-Fusseln empfohlenen Konflikten eingebaut. Also kopieren wir es einfach und legen es ganz oben. Jetzt benutzen wir den empfohlenen Sträfling. Wenn wir wieder MGS testen, sehen wir, dass wir die Konsole jetzt nicht definiert haben. Nun, das liegt daran, dass es Dinge fusselt , die wir in der Browserumgebung ausführen. Und dafür müssen wir noch einmal angeben, dass wir in keinem Jazz laufen. Dafür müssen wir die ENV-Optionen hier platzieren und geben an, dass wir drinnen sind. Notiz. Und wir werden es wahr machen, wir können tatsächlich viele verschiedene Optionen wie ES6 setzen , um erneut anzugeben, dass wir die neueste JavaScript-Syntax verwenden. Und es gibt viele verschiedene Möglichkeiten. Und vertrau mir, du musst sie nicht alle kennen. Weil Sie immer die erste Dokumentation haben , die Sie verwenden können, wenn Sie Probleme mit dem Verständnis von Eastland haben oder Sie können einfach ja kopieren und einfügen. Verknüpfen Sie Konflikte von irgendwo und passen Sie sie an Ihre Bedürfnisse an. Dies ist sehr einfach. Lassen Sie es uns so behalten, wie es ist. Eine wichtige Anmerkung, die ich betonen wollte , ist, dass man nur dieses gelbe Schweben sehen kann oder vielleicht sieht man das Rot hier drüben schwebt. Ich meine, direkte Berichterstattung innerhalb des VS Code, dank der Erweiterung. Also habe ich ES Lint Extension installiert. Das, das ES-Fusseln in VS-Code integriert. Deshalb sehe ich hier diese rote Linie. Wenn diese Erweiterung deaktiviert wäre würde ES Lint mir nicht wirklich gemeldet, genau wie ich es gerade sehe. Es würde nicht rot werden. Der einzige Weg, wie ich von diesem Fehler wissen würde , wäre, den Befehl ES lint auszuführen, genau wie wir es zuvor mit Prediger getan haben. Also lasst uns vielleicht ein anderes NPM-Skript erstellen und den Befehl für Eastland definieren. Gehen wir zurück zu package.json. Hier werde ich den Befehl vielleicht lint setzen und ich werde ES lint asterix dot JS aufrufen oder da wir die MGS-Erweiterung haben, werde ich hier drüben und gs setzen, wir zu ES Lint gegen alle Dateien mit der MGS-Erweiterung laufen . Gehen wir in das integrierte Terminal und lassen Sie uns das Skript ausführen, das wir definiert haben, npm run lint, und Sie werden sehen, dass ES Lint ein Problem meldet. Hallo wird ein Wert zugewiesen, der aber nie benutzt wird. Das ist also sehr praktisch, da wir im Produktionscode anscheinend keine Variablen haben und verwenden wollen. Und es gibt viele verschiedene Fehler und Warnungen, die wir möglicherweise erhalten. Aber vertrau mir, das ist zu unserem eigenen Besten. Es lint hilft uns, unsere Codebase mit weniger Fehlern wie möglich zu pflegen . Wir werden ES-Fusseln in Kombination mit Prediger oft verwenden . Es gibt jedoch ein Problem mit ES Flusen und Preacher. Die Sache ist, dass sich einige Predigerregeln mit den ES-Fusselregeln überschneiden. Und um diesen Fehler zu beheben, müssen wir zu ES lint navigieren. Wenn wir zu ES Flusen gehen scrollen wir hier zur Zusammenfassung, wir können sehen, wie es Flusen-Sträflingprediger Prediger verwendet um Prediger und ES-Link zusammen nett spielen zu lassen. Navigieren wir zum ES-Prediger des schlanken Konflikts. Und lass uns zum Installationsteil gehen. Wir werden es kopieren. Wir werden es hierher stellen. Und wieder, Dash, Dash, speichern Sie das Dev-Flag, um dieses Paket als Entwicklerabhängigkeit zu installieren. Wenn Sie sich die Abhängigkeiten von Entwicklern ansehen, werden Sie jetzt einen Prediger des östlichen Konflikts sehen. Und mal sehen, was wir bei Preacher für das umfangreiche Array in Ihrer Eastland RC-Datei tun müssen. So erstreckt sich einige andere Konfigurationen und den Druck. Alles klar, also sagen wir, lasst uns Prediger kopieren. Kommen wir zurück zu ES Fusselstrecken. Und Sie können aus dem Beispiel sehen, dass es ein Array verwendet. Es Fusseln unterstützt also beides. Verwandeln wir es in ein Array. Und lasst uns Prediger hierher stellen. Nett. Ohne dieses Paket, ohne diesen ESPN-Prediger, landen Sie in einer Situation, in der Sie Eastland-Fehler haben und nicht verstehen, warum Sie sie haben. Dieses Paket stellt sicher, dass Sie keine Konflikte haben. Und ich werde sehen, dass es das ist. Das ist alles, was ich über ES-Fusseln und Prediger erzählen wollte , um schnell zusammenzufassen, was ist Eastland? Eastland ist ein Tool, mit dem wir unseren Code, unseren JavaScript-Code, anhand einiger vordefinierter allgemeiner Richtlinien überprüfen unseren JavaScript-Code, anhand können. Es wird unseren Code letztendlich weniger fehleranfällig machen, und es wird sicherstellen, dass unsere Codebasis so sauber wie möglich ist. Preacher wird unsere Codebase so formatieren , dass sie so lesbar wie möglich wird. Nur noch einmal werde ich sagen, dass diese Tools optional sind, aber Sie werden Prediger und ES in fast jedem JavaScript-Projekt sehen ES in fast jedem JavaScript-Projekt weil die Leute möchten, dass ihre Projekte lesbar sind und weniger fehleranfällig zu sein. Das war's. Wir sehen uns im nächsten. 19. Was sind Server, JSON, REST API und GraphQL?: Hey, in diesem Video möchte ich über Server sprechen. Was ist ein Server? Was ist eine API? Was ist eine Rest-API? Was ist GraphQL? Lasst es uns gemeinsam herausfinden. Beginnen wir zuerst mit dem Server. Was ist ein Server? Ein Server, es ist nur ein Computer irgendwo im Internet. Es läuft etwas Software. Und diese Software auf diesem Computerunterricht für unsere eingehenden Anfragen. Wenn ich zum Beispiel zu einer Website navigiere auf diesen Link klicke, sendet mein Browser eine Anfrage an diesen Server. Auf der linken Seite ist dies mein Browser und er sendet diese Anfrage an diesen Server. Dieser Server verarbeitet die eingehende Anforderung und sendet HTML-, CSS- und JavaScript-Dateien zurück . Also wieder ein Server, es ist nur ein Computer, der eine Software ausführt , die unsere eingehenden Anfragen irgendwie bearbeitet und eine Antwort zurücksendet. Was ist, wenn ich nicht immer HTML-, CSS - und JavaScript-Dateien erhalten möchte , möchte ich vielleicht nur eine Abfrage auf der Website ausführen, wie in der Suchleiste. Muss ich wieder HTML zurückgeben? Nein, das tust du nicht. Sie müssen nur die Daten, das Ergebnis dieser Abfrage, in der Suchleiste abrufen. In diesem Fall müssen Daten in einem anderen Format übertragen werden. Ein anderes Format ist normalerweise JSON-Format oder XML-Format. Aber XML ist bereits veraltet, würde ich im Internet sagen, jeder benutzt JSON. Lassen Sie uns also nach JSON oder vielleicht sogar nach JSON-Platzhalter-Free Fake Rest API suchen. Okay, also müssen wir zuerst herausfinden, was JSON ist. Ich klicke hier einfach auf Script ausführen. Und ich erhalte dieses JSON ist nur ein Format, in dem Daten über das Internet übertragen werden. Es kann nicht nur im Internet, sondern in jedem anderen Szenario verwendet werden. Es ist einfach, Informationen in diesem Format zu übertragen. Es sieht einem JavaScript-Objekt sehr ähnlich. Kommen wir jetzt zurück zu unserer Leinwand. Wie passt es zu diesem Szenario? Stellen Sie sich vor, ich bin hier auf der Website und tippe etwas in die Suchleiste ein, die sich auf der Website befindet. Und ich möchte meine Suchergebnisse im JSON-Format zurückholen, ich würde eine weitere Anfrage an diesen Server senden, und dieser Server wird meine Anfrage, meine Anfrage, bearbeiten. Es wird nach der Datenbank suchen. Es wird die Ergebnisse abrufen und diese Daten im JSON-Format an mich zurücksenden, was genau so aussieht. Keine Notwendigkeit für HTML, CSS oder JavaScript. Diese Art von Server, der HTML-, CSS- und JavaScript-Dateien hostet , wird normalerweise als Hosting-Dienste bezeichnet. Sie werden also verwendet, um grundlegende HTML-Seiten zu hosten. Sie legen einfach Ihre Dateien, HTML und CSS auf ihren Computer und liefern diese Dateien einfach auf ihrem Computer. Das war's. Was ist mit API-Servern? Was ist also eine API in erster Linie, API steht für Anwendungsprogrammierschnittstelle, und sie passt normalerweise nur zu API-Servern weil API-Server meistens diesem Zweck eines Zwischenhändlern zwischen Sie und die zugrunde liegende Datenbank. Dies ist jedoch nicht nur der Fall. Nun, sie werden normalerweise als API-Server bezeichnet , weil sie Schnittstellen für alles sind , was hinter diesem Server steckt. Deshalb heißen sie APIs oder Interfaces oder wie auch immer er sie nannte. Werfen wir noch einmal einen Blick auf diesen JSON-Platzhalter. Also sende ich eine Anfrage an diese URL. Ich kopiere es einfach und lege es hier hin. Wenn ich darauf zugreife, werden Sie dies wahrscheinlich so im Rohformat sehen. Dieser Server fungiert als Rest-API, da er dem restlichen Format folgt. Es ist also eine API, weil es sich um eine benutzerdefinierte Serverimplementierung handelt. Es ist also diese benutzerdefinierte Software, die auf dem Server installiert ist, die meine Anfrage bearbeitet und Jason zurücksendet Dies ist der API-Teil. Was ist Ruhe? Rest bedeutet, dass es dem restlichen Entwurfsmuster bei der Restimplementierung folgt . Dies bedeutet, dass der Code des Server-JSON-Platzhalters , der ruhig ist, mehrere Endpunkte verfügbar macht , auf die wir zugreifen können , um Daten abzurufen. Zum Beispiel. Gehe zum Schrägstrich, um Dos Schrägstrich zu machen. Das ist Todo ID. Wir erhalten Daten, die mit der ID Nummer 1 zu tun haben. Wenn ich hier sieben tippe, wirst du sehen, dass ich jetzt Benutzer-ID eins, ID sieben und verschiedene Daten habe. Wenn es vier sein wird, werden es andere Daten sein. Wenn es so etwas sein wird, werden Sie nichts sehen, weil es ihren API-Server nicht existiert . Dieser, auf den wir gerade zugreifen, ist tatsächlich eine API für die zugrunde liegende Datenbank dass es unter der Haube benutzt. Okay, und es folgt dem Restmuster. Sie können hier zur Hauptwebsite navigieren. Und Sie können nach anderen Endpunkten suchen , die auf dieser Ressource verfügbar sind. Zum Beispiel können Sie hier Ressourcen sehen. Wir können zu Posts gehen, wir können zu Benutzern gehen, wir können zu Alben gehen. Und Sie können sehen, dass sie alle unterschiedliche Endpunkte haben. Auch dies liegt daran, dass es nach der Ruheimplementierung folgt. Stellen Sie sich ein großes Haus mit vielen Türen vor. Ein großes Haus ist also der Server, der API-Server. Und diese Türen sind und Punkte , auf die Sie zugreifen, um Daten zu erhalten. Und diese Daten werden im JSON-Format übertragen. Weil es sehr einfach ist, dieses Format zu verstehen. Es ist sehr leicht und einfach zu lesen oder zu schreiben, aber Rest ist nicht die einzige Serverimplementierung , die es in freier Wildbahn gibt. Es gibt eine andere, die gerade sehr beliebt ist , der GraphQL heißt. Und es gibt offensichtlich die anderen. Also, aber derzeit derzeit hauptsächlich zwei Typen, Rest API und GraphQL API. Graphql ist gleichzeitig eine Sprache und gleichzeitig die Serverimplementierung, die Architektur. Lassen Sie uns also in Google oder vielleicht GraphQL Explorer nach GraphQL suchen . Es bringt uns zu dieser GitHub Docs-Seite GraphQL API. Und das wird es, wir werden auf dieser Seite landen. Ich muss mich anmelden, um es benutzen zu können. Also melde ich mich mit meinem Konto an. Wenn Sie vorerst kein GitHub-Konto haben, ist es in Ordnung. Schau dir einfach das Video an. Das ist also GraphQL-Sprache. So sieht es aus. Um Daten vom GraphQL Server anzufordern, müssen wir eine Ko-Variation wie Dad in diesem Format nach der QL-Sprache des Graphen senden . Wenn ich es also senden werde, werden Sie sehen, dass ich Daten in diesem Format bekomme und es ist JSON-Format, wie Sie sehen können. Was ist also der Unterschied zwischen grafisch und Ruhe? Nun, zuerst hat die Rest-API, genau wie ich bereits erwähnt habe, genau wie ich bereits erwähnt habe, mehrere Endpunkte. Zum Beispiel Slash Todos. Wo ist es? Slash-Kommentare, Alben, Fotos und Aufgaben. Um auf Daten zugreifen zu können, muss Ihre URL unterschiedlich sein, um auf verschiedene Ressourcen zugreifen zu können. Aber GraphQL, es ist etwas anders. Wenn ich auf Inspect klicke und hier zur Registerkarte Netzwerk gehe, wenn ich auf diesen Play-Button klicke, sehen Sie die URL, auf die zugegriffen wird, nämlich Slash GraphQL-Schrägstrich-Proxy. Und wenn ich eine andere Anfrage ausführe, ändert sich die URL nicht. Nun, die GraphQL-Serverimplementierung hat nur einen Endpunkt , über den alle Anfragen durchlaufen um zu verstehen, was der Benutzer abgelehnt was wir vom Server wollen. Wir senden diese Ko-Variation an den Server. Wenn wir beispielsweise auf einer neuen Registerkarte zu Referenzen und Abfragen navigieren . Lassen Sie uns also nach dem Benutzer suchen und es erwartet ein Argument. Versuchen wir es mit dieser Abfrage. Also werde ich das alles entfernen. Ich gebe den Benutzer ein, genau wie es hier heißt. Und wir müssen ein Argument vorbringen. Sie geben ein Argument vor. Wir müssen Klammern öffnen und wir bringen dieses Argument hier vor. Login ist das Argument des Typs string. Wir geben meinen Spitznamen hier drüben. Jetzt müssen Sie in geschweiften Klammern angeben, welche Art von Daten wir erhalten müssen. Also wird es Login sein. Wenn ich es so ausdrücke. Nun, ich habe im Grunde die gleichen Informationen, aber die Abfrage ist anders und ist zu diesem Zeitpunkt dieselbe. Hast du den Unterschied schon entdeckt? Nun, der Unterschied, der Hauptunterschied zu GraphQL und Rest API besteht darin, dass GraphQL nur Daten sendet, nach denen Sie fragen, oder? Also bitte ich hier nur um Login in meiner Anfrage. Diese Abfrage wird also tatsächlich als Schema bezeichnet, das Sie vom Server anfordern. In Ordnung, also fordere ich dieses Schema nur Login einzuloggen und ich bekomme nur wieder zur Rest-API. Wenn wir zu Posts gehen, habe ich nach Beiträgen gefragt. Ich gebe nicht an, welche Felder ich aus der Pose abrufen möchte. Dies liegt an dem Server, zu entscheiden , dass Server Titel und Körper zentriert, und das können wir nicht ändern. In Ordnung, wenn ich auf Beiträge mit dieser ID zugreife, gibt es mir Titel und Text. Aber mit GraphQL kann ich angeben, welche Felder ich vom Server abrufen möchte, wenn wir zu den Hunden navigieren. Also loggen Sie sich ein, tatsächlich gibt diese Abfrage uns Typ User zurück. Wenn wir es öffnen, hat der Benutzer viele Felder und wir können tatsächlich Intelligenz von GraphQL verwenden. Also drücke ich einfach die Steuertaste. Und hier habe ich Bio Control Space hier Ich habe vielleicht Namen hier ich habe mich eingeloggt. Sie können also sehen, dass ich die Abfragesprache verwende , um anzugeben, welches Feld ich abrufen möchte. Und wenn ich auf Play klicke, um die Abfrage zu senden, sehen Sie jetzt, dass ich mein benutzerdefiniertes Daten-Shape habe , das in der Abfrage angegeben ist. Ziemlich cool. Das ist also der Hauptunterschied. Und du wirst wahrscheinlich denken, dass GraphQL ist, Oh mein Gott, Es ist erstaunlich. Warum brauchen wir überhaupt Rest-APIs? Das Problem dreht sich alles um die Implementierung und ihre Komplexität. Graphql wurde vor einigen Jahren von Facebook erstellt und es wurde sehr populär. Rest-API ist jedoch eine ausgereiftere und kampfgetestete Lösung. Graphql ist schwer. einfach ist es nicht. Es ist einfach, Graph kill zu konsumieren, aber um GraphQL zu implementieren, bedarf es guter Kenntnisse. Rest-API ist einfacher, einfacher zu implementieren und im Vergleich zu GraphQL-Glückwunsch intuitiver. Jetzt weißt du, was eine API ist. Wir sehen uns im nächsten. 20. Client (SPA) VS. Server (dynamisch und statisch): Hey, in diesem Video möchte ich über clientseitige und serverseitige Apps sprechen . Warum interessiert es uns und warum ist es wichtig, den Unterschied zu verstehen? Lass uns zuerst gehen. Lass mich meine kleine Leinwand öffnen, die ich vorbereitet habe. Oben hier haben wir drei Haupttypen des Renderings im Web. Das erste ist das serverseitige Rendern, bei dem es sich um ein serverseitiges Routing handelt. Dann haben wir clientseitiges Rendern, das clientseitiges Routing verwendet. Und dann haben wir einen hybriden Ansatz , der beides kombiniert. Der beste Weg, um den Unterschied zwischen diesen drei zu verstehen , ist die Betrachtung der Beispiele. Und genau das werden wir tun. Wenn ich hier zum Browser gehe, habe ich zwei Websites vorbereitet, Steam-Website und Netlify. Beide sind serverseitige Rendering-Apps. Und woher wissen wir davon? Wenn wir mit der rechten Maustaste auf die Seite klicken und zur Seitenquelle aufrufen , sehen wir hier das Markup. Wenn wir also das Markup in der Seitenquelle sehen, bedeutet dies, dass die Seite serverseitig gerendert wird. Das ist es, was Sie hier sehen, wurde vom Server zurückgegeben, wenn ich auf diese URL zugreife. Außerdem enthält jede Seite eindeutige Met-Angriffe. Das bedeutet, wenn ich auf eine andere Seite gehe und Seitenquelle dieser Seite anschaue, die Meta-Tags anders und das Markup wird für jede Seite auf der Website eindeutig sein. Jetzt haben wir ein zweites Beispiel, Netlify. Es verwendet auch serverseitiges Rendern. Wenn ich die Seite anschaue, habe ich genau das gleiche Bild. Ich habe einzigartige Meta-Tags und ich habe das Markup. In Ordnung? Aber Netlify ist anders. Die Sache ist, dass Netlify statische Seiten oder statisches serverseitiges Rendern verwendet, während Steam dynamisches serverseitiges Rendern verwendet. Was ist der Unterschied? Der Unterschied besteht darin, dass im Falle von Netlify alle diese Seiten nur statisch sind sich nicht ändern. Dies bedeutet auch, dass jede Seite auf der Netlify-Website eine eigene HTML-Datei hat. Wenn ich zur Preisseite gehe, hat die Preisseite eine eigene HTML-Datei, genau wie die Homepage oder jede andere Seite. Was ist mit Dampf? Dampf, etwas anders. Es verwendet dynamisches serverseitiges Rendern. Es bedeutet, dass diese Seite, zum Beispiel Spielseite, nur eine Skelettseite ist. Es hat die Vorlage, die zum Rendern von Spielen verwendet wird. Wenn ich also auf eine andere Seite gehe, kannst du sehen, dass es genauso aussieht. Das einzige, was geändert wurde, sind die Informationen auf der Seite, aber das Layout ist das gleiche. Und dieses Layout ist das Skelett, das verwendet wird, um Daten dynamisch in dieses Skelett einzufügen. Und genau das macht Dampf. Für all diese Spielseiten haben sie also nur ein Skelett. Und dieses Skelett wird wiederverwendet , um die Daten dynamisch einzufügen. Es wird dynamisch genannt, da der Server jedes Mal ich eine Anfrage zum Zugriff auf diese Seite sende, , wenn ich eine Anfrage zum Zugriff auf diese Seite sende, dynamisch HTML-Markup erstellt und dann an mich zurücksendet, um abzulehnen. Deshalb ist jede Seite jede Seite anders. Es hat ein eindeutiges Markup, da es dynamisch auf dem Server erstellt oder zusammengestellt wurde . Im Gegensatz zu statischen Seiten wird das HTML-Markup zum Anforderungszeitpunkt nicht zusammengestellt , wenn ich auf diese Seite zugreife. Markup wurde zusammengestellt, als die Anwendung erstellt wurde. Es wurde also einmal erstellt und jetzt jedes Mal, wenn ich auf diese Preisseite zugreife, sendet es nur das statische Markup da es sich nicht ändert. Ordnung, Der Nachteil bei statischen Seiten ist, dass wir, In Ordnung, Der Nachteil bei statischen Seiten ist, dass wir, wenn wir etwas an unserem statischen Inhalt ändern müssen, die App neu erstellen, HTML-Seiten regenerieren und sie dann wieder zum Hosting hochladen müssen. Jetzt gelten sie als aktualisiert. Beim serverseitigen Rendern ist dies nicht der Fall. Sie haben das Skelett und die Daten werden dynamisch eingefügt. Dies bedeutet, dass Daten, die aus der Datenbank abgerufen wurden und dann basierend auf diesen Daten HTML zurückgegeben werden. Du musst nichts ändern. Sie müssen keine Seiten regenerieren oder irgendetwas tun. Nur wenn Sie das Layout oder das Skelett ändern müssen. Nur in diesem Fall muss es erneut bereitgestellt werden, muss es erneut bereitgestellt werden um alle Änderungen an diesem Skelett widerzuspiegeln. Gehen wir zum zweiten Typ, bei dem es sich um das clientseitige Rendern handelt, oder häufiger als Einzelseiten-Apps als PA bezeichnet. Was sind diese Websites? Hier habe ich auch zwei Beispiele vorbereitet. Telegramm, Webversion. Und diese Snapshot-Website , die übrigens mit React erstellt wurde. Wenn ich also Telegramm, Seitenquelle anzeigen, überprüfe ich, dass ich hier überhaupt nichts habe. Wenn ich zum Body-Tag gehe, ist es völlig leer. Wenn ich jedoch Elemente der Seite anschaue, ist das Markup vorhanden. Was passiert hier? Vom Server? Ich bekomme diese Bär-HTML-Datei nur mit JavaScript-Paketen. Und JavaScript ist derjenige, der meine Seite rendert, wer erstellt das Markup? Wer erstellt den HTML-Code im Browser. diesem Grund wird es clientseitiges Rendern genannt, da JavaScript diejenige ist, die die Seite im Browser rendert , sobald wir diesen HTML-Code vom Server haben . Dies ist der Unterschied. Beim serverseitigen Rendern haben wir also bereits Markup zusammengestellt und vom Server im Voraus zurückgegeben. Aber bei einseitigen Apps oder mit clientseitigem Rendern haben wir das nicht. Wir haben ein Minimum an HTML und der Rest wird durch JavaScript im Browser zusammengestellt. Das war's. Es gibt jedoch einen sehr entscheidenden Nachteil einseitigen Apps oder beim clientseitigen Rendern. Es ist schlecht für SEO, das für Suchmaschinenoptimierung steht. Die Sache ist, dass wenn Sie möchten, dass diese Seite von Google oder Facebook eingestuft und gecrawlt wird , ist es immer besser, serverseitiges Rendern zu machen. Weil Crawler, was das Meer, sie sehen genau das, diese Seitenquelle. Sie sehen das Markup, sie sehen Matt-Angriffe. Und basierend auf diesen Markup- und Meta-Tags können sie ausführen und verstehen, worum es auf dieser Seite geht. Aber einseitige Apps, Crawler, sehen sie keine davon. Sie warten nicht darauf, dass JavaScript im Browser die Seite zusammenstellt und rendert. Sie sehen nur dieses leere Körper-Tag und diese grundlegenden mathematischen Angriffe. Wenn Sie also eine gute Suchmaschinenoptimierung benötigen, verwenden Sie serverseitiges Rendern. In Ordnung, jetzt haben wir dieses Konzept des serverseitigen Routing und des clientseitigen Routing. Was sind das? Und einseitige App. Sie können sehen, dass sich die URL ändert, wenn ich durch Seiten navigiere , aber meine Seite wird nicht aktualisiert. Dies wird als clientseitiges Routing bezeichnet, da es auf dem Client von JavaScript behandelt wurde. Dies bedeutet, dass JavaScript diejenige ist , die die URL ändert. Javascript ist derjenige, der die Seite rendert. Okay? Es sendet keine zusätzlichen Anfragen an den Server. Es ist alles im Browser erledigt. Anders als beim serverseitigen Routing können Sie, wenn ich zu einer anderen Seite gehe, sehen Sie, wenn ich zu einer anderen Seite gehe, sehen Sie, dass es aktualisiert wird , weil ich den Server bitte, mir diese Seite zur Verfügung zu stellen. Und das ist der Unterschied. Serverseitiges Routing ist also wenn Sie eine weitere Anfrage an den Server senden und mit einseitigen Apps mit clientseitigem Routing nach dieser Seite fragen . Dies geschieht alles innerhalb des Browsers ohne zusätzliche Anfragen. Okay, großartig. Jetzt wird die dritte Art des Renderings als Hybridansatz bezeichnet. Hybrider Ansatz ist am besten aus zwei Welten kombiniert werden. Wir haben serverseitiges Rendern, und wir haben clientseitige Navigation, clientseitiges Routing. Ein Beispiel wäre die Dokumentation von Netlify. Wenn ich also die Seitenquelle überprüfe, sehe ich das Markup und sehe eindeutige Met-Angriffe. Ziemlich cool. Wenn ich jedoch versuche, zu einer anderen Seite zu navigieren, können Sie die URL-Änderungen sehen. Die Seite wird jedoch nicht aktualisiert. also bei der ersten Anfrage auf Wenn Sie also bei der ersten Anfrage auf diese Website zuerst so zugreifen, sendet sie bereits zusammengestellte Markups vom Server an Sie, was bedeutet, dass es sich um serverseitiges Rendern handelt. Danach übernimmt JavaScript nach dem Laden der Seite die Kontrolle und Sie haben dieses Gefühl , wenn Sie auf der Webseite surfen. Ziemlich cool, oder? Im Moment ist der hybride Ansatz also sehr, sehr beliebt, weil er wiederum das Beste aus zwei Welten vereint. Sie können durch serverseitiges Rendern eine gute SEO-Optimierung haben, und Sie können beim clientseitigen Routing ein App-ähnliches Gefühl haben. Ziemlich cool. Was sind die Nachteile und Vorteile jedes Ansatzes? Also habe ich das schon erwähnt, aber das mache ich noch einmal. Der erste ist C0, das für Suchmaschinenoptimierung mit serverseitigem Rendern steht . COO ist das beste Ergebnis, COO ist das beste Ergebnis da Sie bereits damit gemeint haben, dass Angriffe zusammengestellt wurden. Sie haben bereits den Markup zusammengestellten Seiteninhalt. Und basierend auf diesen Informationen, Crawler wie Google Crawler, Facebook, Twitter-Trawler und andere Troller. Sie können Ihre Seite basierend auf diesen Informationen analysieren und Ihre Seite mit einseitigen Apps entsprechend einstufen. Dies ist nicht der Fall. Wenn ich die Seite anschaue, sehe ich nur ein sehr großes Minimum. Es gibt jedoch eine moderne Lösung um dieses Problem mit einseitigen Apps zu lösen. Und die Lösung besteht darin, eine einseitige App vorab zu rendern. Das bedeutet, dass jede Seite in einer einseitigen App in clientseitigen App in einer statischen HTML-Datei vorgerendert wird . Jede Seite hat also ihren eigenen HTML-Code. Und wenn Sie auf diese Seite zugreifen, werden Sie damit den statischen HTML-Code erhalten, der generiert wurde. Das macht Netlify. Netlify ist ein Hosting-Service, der einseitige Apps vorrendern , um sie SEO-optimiert zu machen. Dies ist eine wirklich großartige Lösung. Als nächstes haben wir ein App-ähnliches Gefühl. So verfügen serverseitige Rendering-Apps, insbesondere das serverseitige Routing, über diese Funktion nicht, über diese Funktion nicht da Sie sehen können, wann immer Sie navigieren, die Seite wird aktualisiert und Sie sofort verstehe, dass dies eine Website ist. clientseitigen Routing erhalten Sie jedoch ein App-ähnliches Gefühl, da die Seite nicht aktualisiert wird, genau wie wir die mobile Anwendung durchsuchen. Und der letzte Punkt ist, erfordert JS, serverseitig gerenderte App oder genauer gesagt statische Seiten. Sie bedeuten vielleicht überhaupt nicht JavaScript. Es kann sich um einen statischen Inhalt nur mit HTML und CSS handeln , der kein JavaScript benötigt. Aber einseitige Apps oder clientseitige Apps benötigen immer JavaScript, da alles mit JavaScript erledigt wird. Es ist wie der Kern clientseitiger Apps. Und wenn Sie JavaScript deaktivieren oder wenn es aus irgendeinem Grund nicht verfügbar ist , funktioniert der Apple einfach nicht im Training. Wir werden uns darauf abzielen, mit React einseitige Apps zu erstellen . Ich hoffe, es war klar und wir sehen uns im nächsten. 21. VS Code: Hi. In diesem Video werde ich Ihnen meine Verknüpfungen zeigen, die ich in V s Code verwende. Dies wird für alle nützlich sein. Konzentriere dich nicht auf die Kälte Gerade jetzt. In diesem Video handelt es sich um Verknüpfungen. Wir beginnen, indem Sie einen Projektordner für dieses Halten Control öffnen, als drücken Sie K plus o und wählen Sie dann den zu öffnenden Ordner aus. Und wir sind Einsicht. Jetzt müssen wir dafür terminalisieren. Sie können die Steuerung drücken, plus Tiled oder Control plus J T öffnen sich in stark Terminal Kichern zwischen verstecken und zeigen State Press Control plus Jay, Es gibt viele Situationen, in denen wir Codezeilen bewegen müssen, damit nur halten aus und drücken gehackte und untere Pfeile bewegt sie Linien Cordis zeigen Be dann müssen wir mehrere Registerkarten öffnen, um Datei in einem neuen Tab zu öffnen verwalten. Öffnen Sie einfach die Datei aus dem Explorer oder drücken Sie Steuerelement plus B für Riesco Charge Bar, Dann suchen Sie nach der Datei und drücken Sie die Eingabetaste, um zwischen Tabs zu wechseln. Halten Sie die Zahlen von 1 bis 9 aus und drücken Sie sie. Sie öffnete die entsprechende bestellte tippen Sie die meiste Zeit. Wir müssen es hinzufügen. Etwas in mehreren Zeilen. Mehrzeilenauswahl und helfen Sie uns, den Kurs oder an den richtigen Ort zu bewegen. Halten Sie die Kontrolle gedrückt, plus die oben- und untersten Pfeile nach oben und unten, um die Auswahl mit Löwen zu erweitern. Release Control Plus aus und jetzt sind wir in der Lage, Code im Multi-Line-Modus zu bearbeiten, halten, Shift und drücken Wiesen für einzelne Charakterauswahl waren halten Kontrolle und drücken Sie Pfeile um Autos oder zu den nächsten oder vorherigen Wörtern zu bewegen. Sie können Verschiebung und Kultur kombinieren, um die ganze Gemeinde auszuwählen. Wir können auch bestimmte Übereinstimmung für mehrzeilige Bearbeitung wählen, bewegen Sie Ihren Kurs oder auf die Station oder wählen Sie einige Zeichen Kontrolle und drücken Sie D. , halten Sie die Kontrolle und drücken Sie D. Präsident de Es wird Vorkommen zu der Auswahl hinzufügen, die dem Muster entsprechen. Wir können auch mehrere Registerkarten für die bequeme Steuerung der Presse erstellen, plus umgekehrter Schrägstrich, um diese Koreanisch in mehrere Wasserhähne zu teilen. Eigentlich kann das gleiche auf die Klemme innerhalb der Klemmenpresse und umgekehrter Schrägstrich angewendet werden, um mehrere Instanzen zu öffnen. Dies, was zwischen Instanzen halten und drücken Sie oben oder unten Pfeil und das ist es. Dies sind die wichtigsten Abkürzungen, die den Entwicklungsprotest erleichtern werden. Sie können immer Stempel Invesco Einstellungen waren hier unten anpassen. Wir sehen uns in der nächsten 22. Einführung in JavaScript: Hallo, Willkommen im JavaScript-Bereich. In diesem Abschnitt werden wir über die häufigsten JavaScript-Syntaxfunktionen sprechen . Wir werden die Grundlagen nicht behandeln, da wir all das während des Prozesses verstehen fortgeschrittenere und gebräuchlichere Muster anhängen werden und fortgeschrittenere und gebräuchlichere Muster anhängen werden. Wir müssen all das verstehen, um uns während der Entwicklung wohl zu fühlen. Hoffe, es wird dir gefallen. Wir sehen uns im nächsten. 23. Var VS. VS. Konst: Hallo, In diesem Video werden wir über verschiedene Arten von Variablen sprechen , die in JavaScript existieren. Dies sind var, let und const. In diesem Video werden wir den Unterschied zwischen ihnen und welchem Typ wir in dieser Situation verwenden müssen. Lass uns gehen. Wie wird das alles organisiert? Ich erstelle ein einziges Skript , das ich file gs benennen werde. Und dann führe ich dieses Skript mit Beispielen über das integrierte Terminal mit dem Befehl node file.js aus. Also bar, lass und const. Was ist der Unterschied? Lassen Sie uns vielleicht eine Variable vom Typ var erstellen und sie meinen Namen nennen. Dann werde ich nur console.log diese Variable. Und dann führen wir das Skript aus. Du wirst sehen, dass Andrew gedruckt wird, alles funktioniert. Was ist also der Deal mit dieser Variablen? Sie beschäftigen sich mit var ist, dass diese Art von Variable dem nächstgelegenen Funktionsbereich eingeschlossen ist. Um zu verstehen, dass wir diese Variable innerhalb einer Funktion erstellen müssen. Erstellen wir also eine Funktion. Druckt meinen Namen aus. Und in dieser Funktion werde ich var setzen. Und dann melde ich meinen Namen darin ein. Wenn ich jetzt das Skript ausführen werde, werde ich dich nichts sehen, weil es eine Funktion ist und ich muss es anrufen, meinen Namen ausdrucken. Großartig. Führen Sie das Skript nun erneut aus. Du wirst Andrew sehen, das Ergebnis ist das gleiche. Wenn ich das Konsolenprotokoll außerhalb des Funktionsbereichs platzieren werde, erhalte ich einen Referenzfehler. Weil mein Name im Funktionsbereich definiert ist. Es ist außerhalb davon nicht sichtbar. Deshalb haben wir einen Referenzfehler. Großartig, das verstehen wir. Wieder, was ist der Deal mit var? Traurig ist es dem nächstgelegenen Funktionsumfang beigefügt. Es bedeutet, dass es egal ist wie viele Bereiche ich in dieser Funktion habe, es wird überall sichtbar sein. Was ich meine ist, wenn ich eine Menge, sagen wir mal, wenn Blöcke hier, wenn fünf größer als einer sind, dann werde ich einen anderen in ihrem Blog erstellen , nur um Bereiche zu erstellen, okay? Wenn 10 weniger als 20 ist, wenn fünf größer als drei ist, spielt es keine Rolle, was ich hier mache. Ich möchte nur so viele innere Bereiche wie möglich erstellen. Und was ich jetzt tun werde, werde ich var, meinen Namen am meisten in ihrem Geltungsbereich einsetzen , und dann werde ich versuchen, auf meinen Namen in dieser Funktion zuzugreifen . Was glauben Sie ist, dass dieser Code wie erwartet in Arbeit geht und wir werden den Eintrag im Terminal sehen. Probieren wir es aus. Ich werde den Skriptknoten file.js erneut ausführen. Und wir sehen Andrew, nun, das ist unvorhersehbar. Wir möchten, dass diese Variable sich verhält, dass sie außerhalb des Bereichs, in dem sie definiert wurde, tatsächlich nicht sichtbar ist. Der Bereich, in dem diese Variable definiert wurde, ist also dieser innerste Block, wenn er definiert wurde, sagen wir in diesem Block, in diesem wenn hier drüben, dann wäre er überall sichtbar drinnen aber nicht außerhalb davon. Var ist wieder, ist dem nächstgelegenen Funktionsbereich beigefügt. Es spielt keine Rolle, wo oder in welchem Bereich ich die Variable vom Typ var innerhalb einer Funktion definiert habe, ihre Sichtbarkeit wird immer Funktionsbereich sein. Und das ist schlimm, weil es unvorhersehbar ist. Wir möchten immer sicherstellen, dass unsere Variable immer nur in dem Bereich sichtbar ist , in dem sie hier definiert wurde. Um dieses Problem zu beheben, haben wir Variablen vom Typ, let und const. Wenn ich also LED hier rüberlege, versuche ich, das Skript auszuführen. Es wird ein Referenzfehler angezeigt. Denn jetzt ist let auf den nächstgelegenen Bereich gerichtet, eigentlich auf den Bereich, in dem es definiert wurde. Und das Gleiche mit const. Wenn ich const hier rüberbringe und dieses Skript ausführe, wirst du das Gleiche wieder sehen. Mein Name ist kein definierter Referenzfehler. Um das zu beheben, müssen wir, um den Referenzfehler zu beheben, auf meinen Namen in diesem Bereich verweisen, in dem er verfügbar ist, was dies sein wird. Verschieben wir das Konsolenprotokoll in diesen Bereich. Und lass es uns nochmal versuchen. Sie werden sehen, dass der Eintrag ausgedruckt wird. Und jetzt ist dies vorhersehbar, weil wir wissen, dass diese Variable in diesem Bereich definiert ist und ihre Sichtbarkeit endet, wenn wir nach draußen gehen Wenn ich das Konsolenprotokoll in diesem Bereich einfüge, werden Sie sehen wieder der Referenzfehler. Oh, lass mich die Akte speichern. Sie werden einen Referenzfehler sehen, da dies außerhalb des Bereichs liegt. Wo ist mein Name definiert, oder? Dies ist der Unterschied zwischen Blei Const und Var Let und Const Art von Faserschalen. Sichtbarkeit endet mit dem umschließenden Bereich, während var mit dem nächstgelegenen Funktionsbereich endet. Wenn ich also eine andere Funktion innerhalb einer Funktion habe, sagen wir, Funktion hallo. Und dann definiere ich dasselbe. All das in Hello als var wird nur innerhalb der Hello Funktion sichtbar sein . Es wird nicht sichtbar sein, meinen Namen zu drucken, sondern auf Hallo. Alles klar, ich schätze, es ist klar. Was ist dann der Unterschied zwischen let und const? Lassen Sie sich diese Art von Variable ändern, die tendenziell neu zugewiesen wird. Nehmen wir an, ich habe meinen Namen erstellt und möchte ihn dann in Zukunft neu zuweisen. Vielleicht möchte ich jetzt, wie wertvoll nicht Andrew, sondern etwas anderes ist. Was ich also tun würde, würde ich das wertvoll neu zuweisen. So wird mit Namen jetzt John. Und wenn ich das Protokoll John konsolen will, werden Sie tatsächlich John nicht Eintrag sehen , weil es jetzt einen anderen Wert hat. Geben wir ein, das neu zugewiesen werden kann. Bei const ist es jedoch nicht. Lass es mich speichern und das Skript ausführen. Sie werden die Zuweisung zur konstanten Variablen sehen , weil const konstant bedeutet, etwas, das sich nicht ändert, wenn ich es doppelt meines Namens erstelle und als Eintrag einfüge, bedeutet, dass es sich nicht ändert. Es wird immer Andrew sein. Schon wieder. Lassen Sie sich neu zuweisen. Wenn Sie eine Variable, meinen Namen und dann in Zukunft erstellt haben, wenn Sie sicher sind , dass Sie sie umbenennen werden, verwenden Sie Lead, da Lead neu zugewiesen werden kann , wenn Sie nicht möchten, dass sich diese Variable ändert Sie sind sicher, dass der Wert , den Sie dieser Variablen zuweisen, so bleibt. Benutze const. In der Praxis haben die meisten Variablen den const-Typ. Und diese Variablen, von denen wir wissen, dass wir sie neu zuweisen werden. Wir werden lat benutzen, aber ansonsten const, und wir benutzen nie var. Um es schnell zusammenzufassen, ist Draht ein Datentyp von itable, was die Fähigkeit war, der nächste Funktionsumfang ist. Es spielt keine Rolle, wie meisten diese Variable definieren würden. Es wird weiterhin im Funktionsbereich sichtbar sein. Und wie let und const werden let und const auf den nächstgelegenen Bereich gerichtet, in dem sie definiert sind. Lassen Sie diese Art von Variable neu zugewiesen werden und const ist konstant. Wenn Sie eine konstante Variable erstellen, wird diese später nicht geändert. Es gibt jedoch noch einen kleinen Trick mit const, und dieser Trick sind Objekte. Wenn Mein Name also ein Objekt sein soll, kann dieses Objekt geändert werden, aber Sie können den Typ nicht von Objekt zu etwas anderem wechseln . Was ich meine ist, wenn mein Name, definiere ich ihn als Objekt und später möchte ich es in John ändern. Ich werde den Auftrag zum ständigen Kampf haben. Aber wenn ich sagen möchte, modifizieren Sie das Objekt selbst, geben Sie ihm einen neuen Schlüssel. Zum Beispiel wird mein Name Punkt etwas Hallo sein. Und dann gehe ich zur Konsole meinen Namen protokollieren. Sie werden das Objekt sehen, das einen Schlüssel hat, etwas mit dem Wert Hello. Daran musst du dich erinnern. In diesem Fall werden Sie also nicht direkt nach doppeltem Typ modifiziert, sondern ändern das Objekt selbst. Jetzt kennen Sie den Unterschied zwischen verschiedenen Arten von Variablen. Ich sage es noch einmal. In der Praxis werden die meisten unserer Variablen vom Typ const sein. Und für jene Variablen, die sich tendenziell ändern, verwenden wir den LED-Typ. Wir werden VAR niemals benutzen. Wir sehen uns im nächsten. 24. Was ist Array.map verwendet?: Hi, in diesem Video sprechen wir über Array-Dot-Map. Die Array-Punkt-Map-Methode ist alle JavaScript-Arrays verfügbar. Es wird verwendet, um ein Array von Elementen zu iterieren, und es wird verwendet, um jedes Array-Element in etwas anderes umzuwandeln . diesem Grund ist die Name-Array-Punktmap. Sehen wir es uns an einem Beispiel an. In file.js. Ich werde ein neues Array erstellen, das ich hallo nennen werde und es 4326 sein lasse. Nehmen wir an, ich möchte über dieses Array iterieren. Ich möchte, dass Sie einfach jedes Array-Element konsolenprotokollieren. Im Allgemeinen kann ich das mit der traditionellen Art erreichen , dies mit der for-Schleife zu tun, aber wir können jetzt eine Radarkarte verwenden. Also werde ich Hello Dot Map setzen. Und sobald ich Klammern öffne gibt mir der VS-Code die Beschreibung. Sie können sehen, dass die Dot-Map-Methode eine Callback-Funktion erhält. Und das zweite Argument ist dieser Bogen. In diesem Arc geht es um das Schlüsselwort, dieses Schlüsselwort in JavaScript. Das werden wir nicht anfassen. Wir sind daran interessiert. Die Callback-Funktion. Callback ist die Funktion, die als Argument an eine andere Funktion übergeben wird. Da wir also eine Funktion an die Map-Funktion übergeben werden, rufen wir sie deshalb auf, rufen Sie zurück. Alles klar, ich denke, es ist klar, dass wir den Wort-Callback oft verwenden werden. Dieser Callback erhält also drei Argumente. Das erste Argument ist Wert, dann haben wir Index und Array. Und lassen Sie uns die Funktion eingeben. Und wenn ich Klammern wieder öffne, sehe ich Wert, Index und Array. Wert ist also der Wert des aktuellen Elements. Die Sache ist, dass die Dot-Map-Methode über ein Array iteriert. Dieser Callback, den wir an die Dot-Map-Methode übergeben , wird für jedes Array-Element ausgeführt. Wenn wir also insgesamt vier Elemente in diesem Array haben, bedeutet dies, dass diese Callback-Funktion für jedes Array-Element und jeden Wert viermal ausgeführt wird . Das erste Argument im Callback wird aktuelle Wert sein, über den wir iterieren. Zum ersten Mal, dass dieser Callback ausgeführt wird, wird der Wert sein, zum zweiten Mal wird der Wert drei sein, und so weiter bis zum allerletzten Element. Das zweite Argument hier ist der Index, und es wird der Index des aktuellen Array-Elements sein. Für das erste Element wird es also 0 sein, da Arrays in Programmierung mit 0 Index beginnen. Es wird also 0, 1, 2 und 3 sein . Nennen wir es idx. Und das dritte Argument wird das Array sein. Und es wird dasselbe Array sein für das wir diese Dot-Map-Methode angewendet haben. Also sagen wir es so, und ich werde in diesen Callback innerhalb dieser Funktion eingehen. Lassen Sie uns eigentlich console.log, Wert, Index und Array. Und jetzt versuchen wir, die Skriptknotendatei HGS auszuführen. Und was wir sehen, also geht zuerst der Wert. Wie Sie für drei bis sechs sehen können, sehen wir alle unsere Array-Elemente, was korrekt ist, weil dieser Callback wieder für alle Array-Elemente ausgeführt wird. Die zweite Spalte, die wir sehen, ist der Index dieses Elements. Also für hat 0 Index, das sehen Sie im Terminal. Und das letzte Element wird Index drei haben , weil dies das letzte Element ist und wir wissen, dass Arrays mit 0 Index beginnen, was korrekt ist. Und der dritte Wert wird das Array selbst sein , auf das diese Dot-Map-Methode angewendet wurde. Dies ist jedoch nicht die wahre Macht der Punkt-Plot-Methode. Es wird verwendet, um jedes Array-Element in etwas anderes umzuwandeln . Und sie nahmen Map-Methode erzeugt einen neuen Wert. Es produziert ein neues Array. Es bedeutet, dass ich es in eine Variable schreiben kann. Also werde ich const result gleich hello.mat setzen. Und dann kann ich tatsächlich console.log Ergebnis haben, um zu sehen, was ich habe. Wenn ich dieses Skript ausführe, habe ich ein Array von vier Elementen, bei denen jedes Element nicht definiert ist. Warum ist es undefiniert? Nun, die Sache ist, dass die Map-Methode erwartet, dass wir einen Wert von dieser Funktion aus diesem Callback zurückgeben einen Wert von dieser Funktion aus diesem Callback zurückgeben. Und der Wert, den wir zurückgeben, wird als neuer Wert für das aktuelle Element festgelegt. Wenn wir nichts von einer Funktion zurückgegeben haben, gibt diese Funktion standardmäßig nichts von einer Funktion zurückgegeben haben, undefined zurück. Deshalb haben wir überall undefiniert. Versuchen wir, Return for vom Rückruf zu setzen. Kannst du raten, was der Wert sein wird? Ich werde dieses Skript ausführen und jetzt wird es 4, 4, 4, 4 sein. Nun, auch hier diese Callback-Funktion für jedes Array-Element ausgeführt. Und für jedes Array-Element kehren wir zurück, wenn ich den Wert multipliziert mit zwei einsetze, können Sie das Ergebnis jetzt erraten? Mal sehen. Jetzt haben wir 864 und 12. Im Grunde genommen haben wir jedes Array-Element einfach mit zwei multipliziert. Weil dieser Callback noch einmal für jedes Array-Element ausgeführt wird. Zum ersten Mal. Es wird für das erste Element ausgeführt, das vier ist, Wert wird für sein, Wert wird mit zwei multipliziert, wir geben acht zurück, was bedeutet, dass im Rückgabewert für die Map-Methode für das erste Element, wir haben Wert 8. Das ist es, was wir sehen. Das Gleiche gilt für das zweite Element. Dieser Callback läuft. Der Wert wird 3 sein. 3 multipliziert mit 2 ist 6 für das zweite Element. Jetzt haben wir sechs und so weiter bis zum allerletzten Element. Und das war's. Dies ist eine Wortarray-Punktmap, für wir es oft verwenden werden, insbesondere in React, aber wir müssen ein Array zuordnen , um Markup zu reagieren. Deshalb ist es sehr wichtig die Map-Methode zu verstehen. Das war's. Und wir sehen uns im nächsten. 25. Was ist Array.reduce: Hey, in diesem Video werden wir über eine Redoxreduzierung sprechen, genau wie ein Radar-Map-Array-Punkt , der Iterate über Elemente eines Arrays reduziert. Es macht jedoch grundsätzlich eine andere Sache, wenn Array-Dot-Map verwendet wird, um jedes Array-Element einem anderen Wert zuzuordnen, Array dot Reduce wird verwendet, um alle Array-Elemente in einen einzigen Wert zu komprimieren oder zu reduzieren. Sehen wir es uns an einem Beispiel an. Wenn wir zu File GS zurückkehren, werden wir hier ein neues Array erstellen, hallo, das sieben sein wird. 6945 vielleicht. Großartig. Jetzt können wir die Dot-Reduce-Methode auf die gleiche Weise verwenden , wie wir die Map-Methode verwenden, was bedeutet, dass wir hallo dot reduce eingeben können. Und genau wie bei Dot Map müssen wir eine Callback-Funktion bereitstellen. Diesmal erhält die Callback-Funktion jedoch verschiedene Argumente. Wir haben also vorherigen Wert, aktuellen Wert, aktuellen Index und Array. Versuchen wir also zu sehen, was sie sind. Also liefern wir den Rückruf und öffnen wieder Klammern für den IntelliSense. Und wir haben den ersten vorherigen Wert, den aktuellen Wert, den aktuellen Index und das Array. Genau wie bei Dot Map führt Dot Reduce diesen Callback für jedes Array-Element aus. bedeutet, dass dieser Callback für jedes Element fünfmal ausgeführt wird . Deshalb wissen wir, was aktueller Index und Array sein werden. Genau wie in Dark Map wird Array das gleiche Array sein, das wir für diese radius-Methode verwenden. Und der aktuelle Index wird der Index des aktuell iterierenden Elements sein , der 01234 sein wird. Wir brauchen sie nicht. Das einzige, was wir brauchen, ist vorheriger Wert und aktueller Wert. Meistens ist der vorherige Wert jedoch kein kalter vorheriger Wert. Es heißt Akkumulator. Was ist Akkumulator? Wir werden uns in einer Sekunde unterhalten. Ich möchte nur erwähnen, dass die Methode dots Reduce auch ein zweites Argument neben dem Callback erwartet. Das zweite Argument ist der Anfangswert und es ist optional. Also lasst uns 0 setzen. Großartig. Was ist ein Akkumulator oder was ist dieser vorherige Wert? Die Sache ist, dass die Dot-Reduce-Methode funktioniert, indem jedes Array-Element komprimiert oder tatsächlich in Richtung des Endergebnisses akkumuliert wird. Es bedeutet, dass wir mit einem Anfangswert mit 0 beginnen. Okay? Wenn dann alle diese Callbacks für jedes Array-Element ausgeführt werden, ändert dies irgendwie unseren Anfangswert. In Ordnung? Und am Ende, beim allerletzten Callback-Lauf, haben wir das Ergebnis. Dies bedeutet, dass die Methode „dots Reduce “ auch einen Wert erzeugt, aber anstelle eines neuen Arrays eine einzige Ausgabe erzeugt. Vielleicht werden es also 15 sein, wir wissen es nicht. Da es also einen Wert erzeugt, platzieren wir ihn, lassen Sie es uns in eine Variable setzen. Also das const Ergebnis wird hallo dot reduzieren, und am Ende werden wir nur console.log Ergebnis sein. Großartig. Wenn wir nun versuchen, den Protokollakkumulator abzubrechen , und daneben werden wir aktuellen Wert konsolenprotokollieren. Und wir werden dieses Skript ausführen. Was wir sehen werden, die Ausgabe ist nicht ziemlich offensichtlich. Was haben wir? Wir haben zuerst 0 und dann Undefined, Undefined, Undefined Amplifying. Um uns nicht zu verwirren, haben wir tatsächlich fünf Konsolenprotokolle, die von den Callbacks stammen , und das letzte für das Ergebnis. Lass es mich so ausdrücken. Und wir führen es aus. Ja, perfekt. Warum haben wir also viele undefinierte Werte? Nun, beim ersten Lauf, wenn dieser Callback für den ersten Element47 Akkumulator läuft , wird unser Anfangswert sein, den wir hier angegeben haben. Deshalb sehen wir aktuelle Wert 0 das aktuelle Element sein wird, das ist sieben. Darum sehen wir 07. Was auch immer wir von diesem Callback zurückgeben, wird traurig sein , da der Akkumulatorwert für den nächsten Rückruf ausgeführt wird. Weil wir nichts von dieser Funktion zurückgegeben haben. Standardmäßig ist der Rückgabewert nicht definiert. Das ist der Grund, warum bei der nächsten Ausführung dieses Callbacks für das zweite Element, das sechs ist, Akkumulator undefiniert. Wenn wir einen für jeden nachfolgenden R1-Akkumulator zurückgeben , wird es immer einer sein, und der endgültige Wert wird auch eins sein. Wenn ich das Skript ausführe, kannst du es selbst sehen. Wir haben immer Akkumulator auf eins eingestellt, aber das ist sehr gedumpt. Wir wollen tatsächlich etwas damit machen. Wie wir Punkt reduziert verwenden können, um etwas Reales zu tun, können wir tatsächlich die Methode „Punkte reduzieren“ verwenden, um die Summe aller unserer Elemente zu finden. Wir können tatsächlich Akkumulator plus Stromwert eingeben. Und das war's. Das wird den Trick machen. Speichern wir es tatsächlich und schauen wir uns an, was gedruckt wird. Wir sehen, dass das Ergebnis 31 ist. Aber wie wir damit gelandet sind, lassen Sie es uns aufschlüsseln. Für den ersten Lauf. Bei diesem Callback ist der Akkumulator auf 0 festgelegt, da unser Anfangswert 0 ist, der aktuelle Wert sieben sein wird. Also haben wir 0 plus 7. Das sehen wir hier drüben. Von diesem Rückruf werden also sieben zurückgegeben. Wir geben den ersten Lauf wird eine Return Seven sein. Dies bedeutet, dass der Akkumulator bei der zweiten Ausführung Callbacks für Element sechs dieses Callbacks für Element sechs dieser Rückgabewert aus dem vorherigen Lauf sein wird . Wir haben also Akkumulator gleich 27 beim zweiten Lauf für das zweite Element, und wir haben sieben plus aktuellen Wert. Also haben wir 7 plus 6, wir haben 13, was bedeutet , dass wir ab dem zweiten Lauf 13 zurückgeben. Bei der dritten Ausführung dieses Callbacks für Elemente neun wird der Akkumulator 13 sein, da wir aus dem Callback für den vorherigen Lauf zurückgegeben werden . Vier Elemente, 613, Deshalb sind es jetzt 13. Also 13 plus aktueller Wert wird 13 plus 9 sein werden 22 sein. Wir kehrten 22 zurück. Für das vierte Element Akkumulator ist 2222 plus vier werden 26 sein. Rückkehr 26 zurück. Und für das letzte Element haben wir Akkumulator 26. 26 plus fünf werden 31 sein. Und das wird unser endgültiger Wert sein. Unser endgültiger Wert, den wir in der Ergebnisvariablen haben, wird also der Wert sein , der vom allerletzten Rückruf der Dots Reduce-Methode zurückgeben würde allerletzten Rückruf der Dots Reduce-Methode zurückgeben , die breit ist. Dieses erste Argument wird Akkumulator genannt , da dieser Wert genau wie Sie gerade beobachtet haben, über alle Callbacks angesammelt wird , die wir in der Dot-Reduce-Methode haben. Es ist ein sehr flexibles Tool und zunächst ist es wirklich schwer zu verstehen, wie Punkte reduzieren funktioniert, aber vertrauen Sie mir, es ist sehr flexibel. Ein anderes Beispiel wäre, wenn wir aus diesem Array ein neues Objekt erzeugen müssen. Zum Beispiel wollten wir dieses Objekt haben, bei dem der Schlüssel der Index des Elements sein wird und der Wert abgewertet wird. Also zum Beispiel wird Element 0 sieben sein, Element eins wird 6 sein, das zweite Element wird 934 und vier fünf sein, oder? Angenommen, wir müssen dieses Array in dieses Objekt umwandeln. Das ist also unser gewünschtes Ergebnis. Wir können tatsächlich punktreduzierte verwenden, um dies zu erreichen. Lassen Sie mich diese Commons entfernen und sehen, wie wir das angehen können. Wir wissen also, dass wir am Ende ein Objekt erhalten müssen. Bevor wir die Summe berechnet haben, wissen wir, dass unser endgültiger Wert eine Zahl sein wird. Deshalb haben wir 0 hier rübergebracht. Aber jetzt, da es ein Objekt sein wird, wir hier ein leeres Objekt platzieren. Dies wird unser Ausgangspunkt sein. Akkumulator für den ersten Lauf wird ein leeres Objekt sein. Der aktuelle Wert bleibt immer noch der Wert, den wir in unserem Array haben. Um dieses Ergebnis zu erzielen, müssen wir also tatsächlich Werte innerhalb dieses Objekts zusammenführen. Da wir mit Objekten arbeiten müssen, müssen wir ein Objekt aus diesem Callback zurückgeben , da dies unser Akkumulator ist. Unser Endergebnis ist wieder ein Objekt. Deshalb ist unser Akkumulator ein Objekt. Also kehren wir zurück und wir müssen ein Objekt zurückgeben. Um Objekte zusammenzuführen, müssen wir Object Dot Assign eingeben. Das erste ist also das Ziel. Und hier werden wir einen Wert liefern, der mit diesem Objekt zusammengeführt wird. Aber bevor wir es zusammenführen können, müssen wir das Objekt tatsächlich erstellen, oder? Also werden wir const setzen, sagen wir mal gemapptes aktuelles Element. Und lasst es uns zuerst als leeres Objekt ausdrücken. Und dann müssen wir diesen einzelnen Wert schaffen, der darstellt unser aktuelles Element innerhalb des Endergebnisses darstellt. Wir möchten also, dass dieses Map-aktuelles Element dieses Objekt ist. Für das erste Element wird es also 0, 7 sein. Wir möchten, dass das gemappte aktuelle Element von dieser Form ist, und wir werden dieses Objekt in unseren Akkumulator zusammenführen. Also müssen wir irgendwie erreichen, dass wir tatsächlich gemapptes aktuelles Element eingeben können. Dann müssen wir den Index unseres Elements benutzen. Jetzt können wir unser Argument hier setzen und es aktuellen Index nennen. Sag es so aus. Auf diese Weise können wir referenzieren, dass der aktuelle Elementpunktstromindex gleich dem aktuellen Wert entspricht. Und diese Linie wird uns dieses Ergebnisraster bringen. Jetzt haben wir dieses Ergebnis mit unserem akkumulatorgemappten aktuellen Element zusammengeführt , und jetzt werden wir unser gewünschtes Ergebnis erzielen. Schauen wir es uns an. Knotendatei gs. Und heute haben wir 0 Elementwert 7, ersten Elementwert sechs Sekunden, 9, dritte, vierte, 45, Klasse. Alles so wie ich wollte. Was ist eigentlich hier passiert? Versuchen wir es und console.log Akkumulator. Nun, und wie Sie sehen können, ist dies ein wirklich großartiges Beispiel aus dieser Ausgabe. Sie können sehen, wie sich der Akkumulator bei all diesen Callback-Räufen tatsächlich ansammelt. Also haben wir zuerst für den ersten Lauf dieses Callbacks unser leeres Objekt gehalten, oder? Deshalb sehen wir hier ein leeres Objekt. Dann haben wir dieses Element hier erstellt, was das ist, und dann haben wir es zu einem leeren Objekt zusammengeführt. Das kehren wir also vom ersten Lauf zurück. Beim zweiten Durchlauf haben wir dies mit dem ersten Objekt zusammengeführt, was zu diesem Objekt mit 76 und so weiter bis zum allerletzten Element. Am Ende haben wir also unser gewünschtes Ergebnis. Ziemlich genial. Dot Reduce ist sehr leistungsstark und sehr flexibel. Es ist wichtig zu verstehen, dass Dr. US ziemlich üblich ist, nicht so üblich wie die Dot-Map-Methode, aber dennoch sehr häufig verwendet wird. Ich weiß, dass es schwer zu verstehen ist. Punkte reduzieren sich ganz, wenn du es zum ersten Mal siehst, aber vertrau mir, nimm dir einfach etwas Zeit, experimentiere damit, spiele mit den verschiedenen Werten. Probieren Sie es selbst aus, versuchen Sie vielleicht die Konsolenprotokollierung Versucht, verschiedene Werte in einen Strahl einzufügen, versuchte, von hier aus verschiedene Werte zurückzugeben. Und Sie werden sehen, dass Sie nach einiger Zeit verstehen werden, dass Sie diesen Aha-Moment haben werden. Ich bin mir ziemlich sicher. Ich denke, das sind alle vier Punkte reduzieren Methode. Ich hoffe, es war klar. Ich habe versucht, es so weit ich konnte zu zerlegen und der Rest liegt an dir. Wir sehen uns im nächsten. 26. Funktionsdeklaration VS. Ausdruck: Hey, lasst uns über Funktionsausdruck und Funktionsdeklaration sprechen. Warum müssen wir den Unterschied wissen und was sind das? Dies wird eher ein theoretisches als ein praktisches Video sein. Aber ich denke, dass dies wichtig ist , um den Unterschied zu verstehen, obwohl B möglicherweise nicht benötigt wird. Unabhängig davon wird es Sie am Ende des Tages zu einem besseren Entwickler machen. Lasst uns gehen. Wenn ich also zurück zu Datei G, S gehe, deklariere ich eine Funktion. Ich nenne es Hallo, und drinnen werde ich das Protokoll abbrechen. Mein Name ist Andrew. Und unten erstelle ich ein wertvolles Hallo zu und zu dieser Variablen. Ich weise eine Funktion zu. Und drinnen werde ich drucken. Und du auch. Wie Sie sehen können, tun beide das Gleiche. Rufen wir sie an. Also rufen wir zuerst Hallo an und dann rufen wir Hallo zum Terminal an. Ich führe das Skript und die Ausgabe aus. Nun, es ist im Grunde das Gleiche, oder? Was ist also der Unterschied? Der Unterschied besteht darin, dass das erste Beispiel eine Funktionsdeklaration ist und das zweite Beispiel ein Funktionsausdruck ist. Das zweite Beispiel ist eigentlich ein variabler Ausdruck. Wenn ich also eine Variable einfüge und ihr einen Wert gebe, wird es ein Ausdruck sein. Das Gleiche können wir hier drüben beobachten. Wir weisen einer Variablen grundsätzlich eine Funktion zu. Anders als hier drüben. Hier machen wir Funktionsdeklaration. Der wichtigste Unterschied zwischen diesen beiden besteht darin, dass bei der Funktionsdeklaration keine Rolle spielt, wo wir das Funktionswetter definieren. Es ist oben oder ganz unten, aber mit Funktionsausdruck und spielt tatsächlich eine Rolle. Lasst uns beide am Ende setzen. Und rufen wir sie noch mal an. Ich führe dieses Skript aus. Und was ich sehe, die erste Funktion, die Funktionsdeklaration ist, durchgegangen und ich kann die Ausgabe sehen. Aber das zweite Beispiel, fehlgeschlagene Referenzfehler, kann vor der Initialisierung nicht auf Hello Tube zugreifen. Die Sache ist, dass hallo zwei ein Funktionsausdruck ist und JavaScript diese Funktion nur erstellen wird wenn JavaScript tatsächlich zu dieser Zeile geht, Funktionsdeklaration erstellt wird oder es wird zum Kotelett gehisst. In JavaScript gibt es dieses Konzept des Hisens, wenn Funktionsdeklarationen tatsächlich nach oben verschoben werden , bevor der Code ausgeführt wird. Deshalb spielt es keine Rolle, wo wir sie definieren. Der Code wird immer, die Sprache wird diesen Code immer so sehen, als ob die Funktionsdeklaration ganz oben wäre, genau so. Aber der Funktionsausdruck bleibt dort, wo er definiert wurde. Genau wie bei Variablen können wir tatsächlich auf Variable verweisen. Sagen wir Hallo, bevor es erstellt wurde. Wenn ich also unten hoch erstellen werde und wenn ich versuche, diesen Code auszuführen, gebe ich den gleichen Adder. Referenzfehler kann vor der Initialisierung nicht auf hoch zugreifen. Da dies also ein Ausdruck ist und das gleiche ist, das wir mit Hallo zu sehen sehen, ist dies ein Ausdruck und wir können nicht auf diesen Ausdruck zugreifen , bevor er hier oben erstellt wurde. Das einzige Problem dafür ist also, tatsächlich auf Hallo zuzugreifen, tatsächlich auf Hallo zuzugreifen nachdem wir diese Variable erstellt haben. Wenn ich es jetzt ausführen werde, werde ich in molaren JavaScript-Projekten keinen Fehler in der realen Welt sehen . Das ist eigentlich kein Ding. Sie werden ein solches Verhalten im Code nicht beobachten. Nun, weil dies hauptsächlich mit einfachem JavaScript zu tun hat und es immer gut ist, den Unterschied zu kennen und zu verstehen, oder? Aber in modernen Projekten, da wir Tools haben, die unseren Code verarbeiten, wird dieses Ding nicht stattfinden, aber wie gesagt, ist es gut und ich persönlich halte wichtig, den Unterschied zu verstehen. Um es schnell zusammenzufassen, ist Funktionsausdruck, wenn Sie Variablen eine Funktion zuweisen, es ist einfacher sich daran zu erinnern, ob Sie sich daran denken können, die Funktionsdeklaration immer mit Funktion als beginnt das erste Wort. Und Funktionsausdruck hat keine Funktion als erstes Wort weil das erste Wort, das wir hier haben, es einer Variablen zuweisen und Funktionsdeklarationen unabhängig von oben verschoben werden wo sie kurz vor dem Ausführen des Codes definiert werden. Und das war's. Wir sehen uns im nächsten. 27. Arrow und Default: Hey, sprechen wir in diesem Video über Pfeilfunktionen und Standardargumente. Lass uns gehen. Wenn ich zu file.js navigiere, erstellen wir eine einfache Funktionsdeklaration , die wir meinen Namen nennen. Und es wird Andrea drucken, was mein Name ist. Und lassen Sie uns ein zweites Beispiel erstellen , das eine Pfeilfunktion verwendet. Und die Pfeilfunktion ist an erster Stelle ein Funktionsausdruck, was bedeutet, dass er einer Variablen zugewiesen wird. Also werde ich const, meinen Namen, 2 gleich Klammern setzen , dann die Pfeilfunktion oder manchmal wird es eine Fettfunktion genannt. Und nach diesem Funktionskörper werde ich console.log setzen und zwei zeichnen. Wenn ich meinen Namen anrufe, wissen wir, was das Ergebnis sein wird. Aber wenn ich meinen Namen anrufe, wird es das Gleiche sein? Schauen wir es uns an. Knoten file.js. Und wir sehen, dass die Ausgabe vorhergesagt wird, weil es sich nur um eine Funktion handelt, aber es ist jetzt eine Pfeilfunktion. Was ist der Unterschied? Der erste Unterschied besteht darin, dass Pfeilfunktionen im Vergleich zu Funktionsdeklarationen eine leichtgewichtigere Syntax aufweisen leichtgewichtigere Syntax . Nun, die Sache ist, dass wir häufig Pfeilfunktionen verwenden werden, besonders im modernen JavaScript. Sie werden noch bevorzugter als Funktionsdeklarationen, die mit dem Schlüsselwort function beginnen . Es gibt nicht, weil die Syntax leichtgewichtiger ist, insbesondere wenn wir Callbacks liefern, zwei verschiedene Methoden. Es ist einfacher, eine Pfeilfunktion bereitzustellen. Wenn ich zum Beispiel Array-Punkt-Map verwende, ist es einfacher für mich, eine Pfeilfunktion bereitzustellen. Es ist leichter, eine Pfeilfunktion zu schreiben , anstatt Funktion und dann Klammern zu verwenden. Und jetzt sieht es aus wie Dad, es könnte sogar einige Leute verwirren. Irgendwann spielt es wirklich keine Rolle, welche, ob es sich um Funktionsausdruck oder Funktionsdeklaration handelt. Es spielt keine Rolle, denn am Ende des Tages wird unser Code von den Build-Tools verarbeitet , die sich um all das unter der Haube kümmern . Der zweite Unterschied hat etwas mit diesem Schlüsselwort in JavaScript zu tun . Wir werden diesen Anwendungsfall nicht mit dem Schlüsselwort dieses behandeln . Aber ich würde sagen, dass du wirklich zu Google gehen und es dir selbst ansehen solltest . Suchen Sie einfach nach Pfeilfunktionen, diesem Schlüsselwort. Und der dritte Unterschied besteht darin, dass Pfeilfunktionen es uns ermöglichen , eine noch kürzere Syntax als diese zu verwenden. Wenn wir einen einzelnen Wert aus einer Pfeilfunktion zurückgeben müssen , können wir die Verwendung der geschweiften Klammern weglassen , um den Funktionskörper anzugeben. Wenn mein Name zum Beispiel eine Zeichenfolge zurückgibt, Andrew, können wir ihn tatsächlich so schreiben, genauso wie wir es in meinem Namen haben werden. Also lass es mich schreiben. Gib Andrew zurück, und es wird keinen Unterschied geben, oder? Aber mit Pfeilfunktionen können wir es sogar kürzer machen. Also kopiere ich einfach die Zeichenfolge Andrew. Ich entferne geschweifte Klammern. Und ich werde einfach eine Zeichenfolge setzen, und jetzt wird nichts geändert, aber die Syntax ist viel, viel kürzer. Lassen Sie uns überprüfen, dass mein Name tatsächlich eine Zeichenfolge zurückgibt, Andrew, da er einen Wert zurückgibt, schreibe ich ihn in eine andere Variable. Nennen wir es m und dann console.log M. Great. Dann führe ich das Drehbuch wieder aus und du wirst Angio sehen, richtig. Dies ist es, was von meinem Namen zurückgegeben wird. Es ist sehr wichtig zu verstehen, dass die Funktion nichts zurückgibt, was bedeutet, dass sie undefined zurückgibt, wenn Sie es so schreiben die Funktion nichts zurückgibt, was bedeutet, dass sie undefined zurückgibt, . Lassen Sie mich dieses Skript ausführen und Sie werden undefiniert sehen. Nun, weil dies keine kurze Syntax ist, ist dies dasselbe wie das Schreiben, aber ohne das Schlüsselwort return. Daher ist es wichtig zu verstehen, dass Sie, wenn Sie kürzere Syntax benötigen oder verwenden möchten, immer daran geschweifte Klammern zu löschen. Und es ist auch wichtig zu verstehen, dass kürzere Syntax nur einen einzigen Wert zurückgibt. Wenn Sie innerhalb einer Funktion eine Aktion ausführen müssen, können Sie die kurze Syntax nicht verwenden da Sie in diesem Fall Ihren Code nirgends schreiben können. In diesem Fall müssen Sie hier eine Operation durchführen, oder? Richtig, Ihr benutzerdefinierter Code und dann am Ende würden Sie einen Wert wie diesen zurückgeben. Es gibt also keinen Unterschied, ob Sie es wie mit dem Schlüsselwort return tun oder ob Sie es mit der kürzeren Syntax tun, ist die gleiche. diese Weise schreiben Sie den Code wann immer möglich, versuchen Sie, eine kürzere Syntax zu verwenden. Es ist kürzer. Es gibt eine Sache, die ich zu dieser kurzen Syntax erwähnen möchte , ist, wenn Sie ein Objekt zurückgeben müssen. Wenn wir also eine Situation haben, wir ein Objekt zurückgeben müssen, zum Beispiel Name, Eintrag. Also dieses Objekt möchte ich von dieser Pfeilfunktion zurückkehren. Nun, mit dem Schlüsselwort return sieht es so aus. Aber wie es ohne das Schlüsselwort return aussehen wird, werden Objekte auch geschweifte Klammern haben und der Funktionskörper auch geschweifte Klammern haben. Wenn wir es so ausdrücken wollen. Sie werden einen Syntaxfehler sehen, denn nun, das sind falsche JavaScript-Dinge, die dies Funktion ist, aber es ist kein Objekt. Um dieses Problem tatsächlich zu beheben, müssen Sie das zurückkehrende Objekt einfach so in Klammern wickeln . Auf diese Weise wird es verstehen, dass Sie einen einzelnen Wert zurückgeben möchten , den Sie eine kürzere Syntax verwenden möchten, und Sie geben ein Objekt zurück , um zu überprüfen, mit dem Sie das Skript ausführen können. Und wir sehen, dass wir jetzt unser Objekt zurückgegeben haben. Toll, so gut, dass sie über Pfeilfunktionen sitzen. Wir werden sie oft nutzen. Sprechen wir über Standardfunktionsargumente. Nun, das ist eigentlich einfach. Es gibt viele Situationen, in denen wir Argumente an unsere Funktionen übergeben müssen . Zum Beispiel mein Name ist das einzige, was diese Funktion tun wird. Es wird das erste Argument, das wir liefern werden, konsolenprotokollieren . Und nennen wir dieses Argument meinen Namen. Also auf der Empfangsseite haben wir meinen Namen und dann drucken wir meinen Namen ist mein Name. Großartig. Wenn ich jetzt meinen Namen anrufe, lass mich den nicht benötigten Code entfernen. Wenn ich meinen Namen ausführe, ohne den Parameter für dieses Argument anzugeben. Nun, in diesem Fall wird Mein Name undefiniert sein, weil wir ihn nicht geliefert haben, oder? Wir haben keinen Wert für meinen Namen angegeben. Um zu überprüfen, ob wir sehen können, dass mein Name nicht definiert ist. Und es gibt viele Situationen, in denen wir in unserem Code und unseren Variablen unterschiedliche Umstände haben . Sie erzeugen keine erwarteten Werte. Sie bringen kein erwartetes Ergebnis, oder? In diesem Fall möchten wir sicherstellen, dass wir immer einen Fallback-Wert haben, um den Standardwert für dieses Funktionsargument anzugeben. Wir müssen einfach gleich setzen und dann einen Standardwert angeben. Ich weiß es nicht, John. In Ordnung, jetzt, wann immer ich dafür keinen Wert gebe, mein Namensargument John statt und wird als Fallback verwendet. Jetzt versuchen wir das Skript auszuführen und du wirst sehen, dass mein Name John ist, oder? Weil ich nichts übergebe. Dies wurde aufgegriffen und jetzt wird John verwendet und John wird gedruckt. Wenn ich Angio liefern will, wird John nicht anstelle von Andrew verwendet , weil Andrew nicht undefiniert ist. Es ist ein Wert, den wir für dieses Argument übergeben, oder? Führen Sie entweder das Skript aus. Jetzt sehe ich, dass ich Andrew heiße. Alles funktioniert gut. Wenn ich also undefined bleibe, was wird gedruckt? Richtig? John? Um zu überprüfen, dass wir wieder unter dem Skript stehen, heiße ich John. Perfekt. Stellen Sie sich die Situationen vor, in denen wir mehrere Argumente in einer Funktion haben . Sagen wir meinen Namen und mein Alter, und ich werde meinen Namen ausdrucken und mein Alter wird mein h sein. Wenn ich keine Argumente gebe, wird Mein Name undefiniert sein. Mein h wird undefiniert sein. Um undefiniert, undefiniert, perfekt zu überprüfen. Jetzt kann ich tatsächlich einen Standardwert für alle oder nur für ein Argument angeben. Also lass es mein Alter sein und standardmäßig wird es gleich 10 sein. Wenn ich jetzt erneut durchführe, wirst du sehen, dass mein Name undefiniert bleibt , weil wir keinen Fallback-Wert haben. Und mein Alter ist 10 Jahre. Vielleicht. Bringen wir es John an. Lass uns Andrew hier einschenken. Und lasst uns undefiniert sein, um unsere Gedanken abzuschließen, sagen wir klar und unser Wissen. Also für meinen Namen und du wirst abgeholt, und für mein Alter werden 10 abgeholt, weil wir undefiniert liefern. Dies ist das Gleiche wie überhaupt keinen Wert zu liefern, oder? Wenn ich es schreibe, heiße ich Andrew und mein Alter ist Stan. Perfekt. Nun, das war's. Jetzt wissen Sie, wie wir Pfeilfunktionen nutzen werden. Was sind das? Und jetzt wissen Sie über Standardfunktionsargumente Bescheid. Wir sehen uns im nächsten. 28. String: Hallo, In diesem Video werden wir über String-Vorlagen sprechen, oder tatsächlich werden sie Template-Strings und String-Interpolation genannt . Lass uns in file.js gehen. Angenommen, ich wollte meinen Namen in einem Satz ausdrucken. Ich möchte sagen, mein Name ist Andrew, mein h ist 10. Dafür erstelle ich drei Variablen. Die erste Variable wird Name sein , der Andrew sein wird. Der zweite wird h sein, wird 10 sein. Und das dritte wird das Ergebnis sein , das ich auf die Konsole drucken werde. Um also einen Satz zu machen, muss ich Strings verketten da ich dynamische Werte verwenden werde, die Name und Alter sind. In der Programmierung. In anderen Programmiersprachen erfolgt dies normalerweise unter Verwendung des Plus-Operators. Das wird also so aussehen, als wäre mein Name Plusname. Dies wird einen Eintrag ergeben. Dann noch einmal plus. Und jetzt ist der String-Punkt, den ich mein Alter eingeben muss , dann wieder plus h. Und wir müssen uns auch um die Räume kümmern. Hier. Ich muss ein Leerzeichen hinzufügen und auch hier. Großartig. Versuchen wir nun, es auszudrucken und dieses Skript auszuführen, Knotendatei gs. Mein Name ist Andrew May, h ist 10 Grad. Dies ist unser gewünschtes Ergebnis. Aber wie Sie sehen können, ist dies nicht sehr praktisch, weil diese Syntax eigentlich nicht praktisch ist. Was ist, wenn wir viele Variablen haben und eine wirklich lange Zeichenfolge haben, dann wird sie unlesbar. Was ist, wenn es einen besseren Weg gibt, das zu tun? Nun, das ist tatsächlich String-Vorlagen oder normalerweise als Vorlagenzeichenfolgen bezeichnet. Versuchen wir, diese Codezeile mit einer Zeichenfolgenvorlage erneut auszuführen. Also werden wir weitere variable Ergebnisse für erstellen. Und wir werden String-Vorlage verwenden. Um String-Vorlage verwenden zu können, müssen wir Backticks verwenden. Für reguläre Strings verwenden wir also reguläre Anführungszeichen, oder? Entweder ein einziger Reclose oder doppelte Anführungszeichen. Für String-Vorlagen verwenden wir Backticks. Also schalte ich die Anführungszeichen mit der Erweiterung „Anführungszeichen umschalten“, die ich in VS Code installiert habe. Sie finden es im VS-Code-Marktplatz. Diese Erweiterung schaltet Anführungszeichen ein. Dann drücke ich die Tastenbindung, um die Anführungszeichen zu wechseln , und ich höre bei Backticks auf. Backticks, die Zeichenfolge wird so ausgewertet wie sie ist, wie sie im Code angezeigt wird. Also werde ich tippen, mein Name ist Leerzeichen. Und hier wollte ich dynamisch, sagen wir mal einen Wert injizieren. Um dies zu tun, müssen wir diesen Wert in eine Zeichenfolge interpellieren. String-Vorlagen ermöglichen es uns, dies mithilfe des Dollarzeichens und der Syntax der geschweiften Klammern zu tun. Wenn wir also das Dollarzeichen gefolgt von geschweiften Klammern in geschweifte Klammern setzen, können wir jeden JavaScript-Ausdruck einfügen, der einen Wert erzeugt. Dieser Wert wird in diese Zeichenfolge an dieser Stelle in dieser Zeichenfolge interpoliert . Also wollten wir hier Namen angeben. Mein Name ist Name. Ich hab Dodd gesetzt. Mein Alter ist wieder, das Dollarzeichen gefolgt von geschweiften Klammern h. ich werde es speichern. Ich werde es neben unserem ersten Ergebnis konsolenprotokollieren. Und lasst uns diese beiden vergleichen. Wie Sie sehen können, sind sie gleich. Der Unterschied besteht jedoch im Syntaxergebnis, um String-Vorlagen zu verwenden und der erste verwendet nur den Plusoperator und die Verkettung von Strings, zu denen jemals resultiert haben. Dies ist eine viel schönere und umfassendere Syntax, und diese Syntax wird in modernem JavaScript bevorzugt. Niemand verwendet tatsächlich Verkettung um Strings zu verketten, vielleicht sehr selten, meistens werden Sie String-Interpolation mit String-Vorlagen mit Backticks sehen . Wie ich bereits erwähnt habe, die Zeichenfolge, die in Backticks erscheint , so ausgewertet, wie sie ist. Das bedeutet, dass wenn ich viele leere Räume und vielleicht hier drüben platzieren werde, alle in die endgültige Zeichenfolge aufgenommen werden. Wenn ich also Leerzeichen hier lege, leere Strings, werden es leere Zeichenfolgen in der Ausgabe sein. Lass es uns sehen. Sie können sehen, dass der Abstand beibehalten wird. Ich lege hier drei leere Zeilen, sie erscheinen in der Ausgabe. können wir nicht mit dem Plus-Operator machen. Wenn ich hier Leerzeichen einlege, habe ich einen Syntaxfehler. Und wenn ich versuche, das Skript auszuführen, habe ich einen Syntaxfehler, ungültiges oder unerwartetes Token, wenn wir leere Zeilen in unserer Zeichenfolge verwenden möchten leere Zeilen in unserer Zeichenfolge verwenden und wir sie behalten wollten, wir müssen es verwenden String-Vorlagen. Dies führt also zu einer ungültigen Syntax. Lasst es uns zurücklegen, wie es zuvor war. In Ordnung, jetzt verstehen wir String-Vorlagen, wie ich bereits erwähnt habe, in geschweiften Klammern, wir können jeden JavaScript-Ausdruck einfügen. Und wie wir uns erinnern, ist Ausdruck eine Entität, die einen Wert erzeugt. Also haben wir einen Namen, der verfügbar ist Ausdruck, er gibt Andrew eine Zeichenfolge. Was ich sagen möchte ist, dass wir uns nicht darauf beschränken, nur Variablen hier zu setzen. Wir können jeden JavaScript-Ausdruck hineinlegen. Zum Beispiel verwenden wir den ternären Operator. Wenn 10 größer als fünf ist , setzen wir eine Namensvariable ein. Andernfalls verwenden wir das Alter , weil 10 immer größer als fünf ist, wir werden immer einen Namen haben. Also lasst uns versuchen es zu sehen. Und wir haben Mein Name ist Andrew, mein Alter ist 10 Jahre. Tolle Arbeiten. Wechseln wir den Betreiber. Und jetzt werden wir haben, mein Name ist 10, weil wir hier falsch haben, und deshalb erhalten wir am Ende H. So können wir tatsächlich jedes Jahr eine Funktion setzen. Lass uns const erstellen und meinen Namen holen. Und es wird John hierher zurückbringen, oder? Und in geschweiften Klammern, die String-Interpolation verwenden, rufe ich diese Funktion auf. Bei dieser Funktion wird mir die Zeichenfolge zurückgegeben. Probieren wir es aus. Wir werden sehen, dass ich John heiße. Mein Alter ist 10 Jahre und das war's. Das ist alles, was wir über String-Vorlagen oder String-Literale und String-Interpolation wissen String-Vorlagen oder String-Literale müssen. Am Ende müssen Sie sich drei Dinge über String-Vorlagen merken . Der erste ist also, dass sie Backticks verwenden. Sie verwenden keine regulären Anführungszeichen. Wenn Sie hier reguläre Zitate setzen, funktioniert dies nicht. String-Interpolation funktioniert nicht. Wenn ich es mir ansehe, wirst du sehen, dass ich das Dollarzeichen habe und geschweifte Klammern gedruckt werden . Ich muss meine Anführungszeichen in Backticks ändern, damit die String-Interpolation funktioniert. Das zweite, woran man sich erinnern sollte , ist , dass wir innerhalb der String-Interpolation jeden JavaScript-Ausdruck einfügen können. Wir sind nicht begrenzt. Und das dritte, woran man sich erinnern sollte, ist, dass die Zeichenfolge innerhalb von Backticks so ausgewertet wird, wie sie ist. Das bedeutet, dass wenn wir leere Leerzeichen hier platzieren, diese in die Zeichenfolge einbezogen werden. Sie werden nicht weggelassen. Das war's. Wir sehen uns im nächsten. 29. Objekt und Array: Hey, in diesem Video werden wir über Objekt sprechen und Array strukturiert. Diese beiden Funktionen werden häufig genutzt. Schauen wir sie uns in file.js an. Sagen wir, ich wollte ein Objekt erstellen, lass es Auto sein. Und es wird die folgenden Schlüssel haben. Farbe, die rot sein wird, sagen wir Gears 5 und vielleicht Motortyp. Lasst uns Diesel setzen. Nehmen wir an, ich möchte auf Schlüssel dieses Objekts zugreifen. Normalerweise würde ich es also wie Auto machen dann DOD und dann den Schlüsselnamen eingeben, auf den ich zugreifen möchte. Und wenn ich es in eine Variable setzen wollte, würde ich es normalerweise so machen. Also werde ich eine neue Variable namens Engine deklarieren. Und dann würde ich Auto und Aufmerksamkeit schenken. Und wenn ich all diese Objekte ziehen wollte, würde ich für jedes eine separate Variable erstellen. Zum Beispiel werden const Zahnräder sein und das Gleiche werden wir für die Farbe tun, oder? Wir können dies als drei separate Codezeilen sehen. Nun, das ist im modernen GPS nicht sehr praktisch, wir können etwas Einfacheres tun, Objektzerstörung. Anstatt das zu tun, lassen Sie es mich auskommentieren. Wir können es durch eine Zeile ersetzen. Also werden wir const setzen, dann werden wir geschweifte Klammern setzen, um anzugeben, dass dies Objekt sein wird, das Strukturieren durchführt. Dann werden wir gleich setzen und das Objekt, das wir zerlegen möchten, das Auto von diesem Autoobjekt sein wird, wir wollten Motor und Zahnräder ziehen. Sagen wir, wir brauchen keine Farbe. In geschweiften Klammern gebe ich an, welche Schlüssel ich von diesem Objekt ziehen möchte. Es wird also Farbe sein. Und dann ziehe ich Gänge. Wird diese einzelne Codezeile diese beiden gerade für Farbe und Zahnräder ersetzt? Wenn wir auch den Motor ziehen wollten, würden wir hier einfach den Motor tippen. Und natürlich ist es sehr wichtig, den Schlüsselnamen sehr streng anzugeben. Sagen wir, wenn wir aus irgendeinem Grund Gänge hier haben und sie groß geschrieben sind, wissen wir davon nichts, oder? Und wir destrukturieren Zahnräder, es wird undefiniert sein, weil es auf diesem Objekt nicht existiert. Versuchen wir vielleicht, Konsolenprotokoll, Farbe. So. Lassen Sie mich es schnell machen und auch uralt. Okay. Lassen Sie mich schlecht Node File GS und Sie sehen Colorado und Getriebe undefinierter Motordiesel, da wir Zahnräder haben, Objekte, die mit einem Großbuchstaben beginnen, und wir zerlegen Zahnräder, die darauf nicht existieren -Objekt. Wir haben undefiniert, aber andere Werte sind es. Alles klar. Also lasst es uns zurücklegen und überprüfen wir, ob es funktioniert. Großartig. Jetzt haben wir Gears 5 , dieses Objekt strukturiert, denkt, ist ein wirklich mächtiges Werkzeug. Das ist im Grunde alles was es tut. Es zieht einfach Schlüssel von einem Objekt. Das war's. Dies ist im Grunde das Gleiche wie bei diesen drei separaten Zeilen. Ich würde sagen, das ist nur eine Kurzschrift. Es bringt nichts Neues. Es ist nur eine Kurzschrift. Es gibt noch eine Sache an diesem Objekt, das nur strukturiert wird, ist, dass wir, sagen wir beim ersten Ansatz mit diesen drei Zeilen, Variablen leicht umbenennen können. Wenn ich einen Automotor angeben wollte, würde ich die Variable einfach so von Motor zu Automotor umbenennen . Ziemlich einfach, oder? Aber wenn das Objekt strukturiert wird, denken Sie daran, dass wir immer einen strengen Schlüssel angeben müssen , den wir destrukturieren möchten , da sonst fraglich nicht existieren wird. Der Schlüssel wird für dieses Objekt nicht existieren. Wie können wir sie umbenennen? Nun, um das zu tun, sagen wir anstelle des Motors, wollen wir den Automotor benutzen. Ich muss Doppelpunkt und dann den neuen Namen für diese Variable setzen . Also ziehe ich jetzt vom Autoobjekt den Motor und benannte Motor in Automotor um. Engine wird nicht als Variable existieren. Es wird als Automotor erscheinen. Wenn ich das Console-Log Only Engine gehe, schauen wir uns an, was wir haben werden. Wir werden einen Referenzfehler haben. Die Engine ist nicht definiert , da diese Variable nicht existiert. Wir haben den Motorschlüssel gezogen, aber der Variablenname ist jetzt Automotor. Wenn wir also auf den Automotor verweisen, wird es uns keinen Fehler geben. Ich glaube, es ist klar. Also das Gleiche mit anderen Schlüsseln, wenn Sie Farbe umbenennen möchten, setzen wir Spalte und dann Autofarbe. Und das war's. Ziemlich einfach, oder? Als traurige Objektzerstörung , weil es wirklich mächtiges Werkzeug ist. Wir werden es oft benutzen, besonders in React. Werfen wir einen Blick auf ein echtes Beispiel, das wir tatsächlich in React verwenden werden. Also erstelle ich eine Funktion, sagen wir mal eine Funktion. Und diese Summenfunktion erhält ein Argument, nennen wir es Arc Car. Wir werden erwarten, dass unser Auto ein Objekt sein wird. Und wir können eine Funktion aufrufen. Und wir liefern unser Autoobjekt für unser Auto, oder? Lassen Sie uns es schnell auskommentieren und versuchen wir es und console.log, arg, car so. Und wir werden unser Objekt ziemlich einfach sehen. Nehmen wir an, wir wollten tatsächlich Log separate Schlüssel von diesem Objekt abbrechen. Also nochmal das gleiche Bild wie wir es gerade gemacht haben. Also verweisen wir entweder auf diese Schlüssel, indem wir die Syntax des Arc-Auto-Türschlüssels verwenden. Zum Beispiel Arc-Auto-Punktfarbe. Stimmt's? Wir haben gelesen, wenn ich Motor benutzen werde, wird es illoyal sein, wenn ich einen nicht vorhandenen Schlüssel bereitstelle , zum Beispiel quadratische Räder, oder? Ich werde undefiniert, weil dieser Schlüssel für dieses Objekt nicht existiert. Anstatt dies zu tun, kann ich die Umstrukturierung von Objekten verwenden und ich kann sie tatsächlich direkt in Klammern verwenden. Also der erste Weg, wie wir diese Codezeile tatsächlich verwenden können , einfach so. Und es wird funktionieren, oder? Genau wie wir es bereits besprochen haben. Stattdessen kann ich tatsächlich bewegen, dass dieses Objekt direkt in Klammern strukturiert wird. Also kopiere ich das einfach und lege es hier hin. Und jetzt haben wir gerade noch mehr Codezeilen entfernt. Jetzt kann ich direkt auf kritische Farben und Zahnräder zugreifen. Lassen Sie uns überprüfen, ob wir gelesen haben und fünf, was richtig ist. Nett. Lassen Sie uns dieses Beispiel ein bisschen weiter ausdehnen. Was passiert, wenn ich ein zweites Objekt an eine Funktion bereitstelle? Angenommen, ich gebe ein zweites Objekt an. Vielleicht wird es kein Auto sein, aber ich stelle es einfach als Auto. Alles klar? Und hier erwarte ich ein Objekt, und ich erwarte, dass dieses Summenobjekt zwei zwei Schlüssel haben wird , Name und Alter. Also kann ich sie referenzieren, indem einige Objekte mit Punktnamen oder Alter mache. Stattdessen kann ich hier wieder die Objektzerstörung direkt nutzen. Also würde ich Namen und Alter angeben. Wir verwenden Objektzerstörung für unsere beiden Argumente. Argumente sind also durch das Komma getrennt, oder? Und die Schlüssel, die wir destrukturieren ziemlich einfach in geschweiften Klammern angegeben , dass eine Funktion ein wirklich gutes Beispiel ist da wir in React einen sehr ähnlichen Code haben werden . Kombinieren wir Objekt strukturiert mit Standardargumenten. Was ist, wenn ich keine Argumente für irgendeine Funktion gebe? Lass mich das zweite Objekt von hier entfernen. Und sagen wir, ich destrukturiere Farbe und Zahnräder. Probieren wir es aus. Was bekomme ich? Ich werde die Eigenschaftsfarbe von undefined nicht destrukturieren. Was ist passiert? Nun, die Sache ist, wie Sie sich erinnern, wenn wir keine Argumente für einige Funktionen angeben, dieses Argument, das wir von einem Peer in dieser Funktion erwarten , undefiniert sein wird. Was wir also hier im Grunde tun, versuchen wir, diese Schlüssel aus einem leeren Wert zu ziehen , der im Grunde nicht unter der Haube existiert, es sieht so aus. Also ziehen wir Farbe und Zahnräder von unbestimmtem ab. Aber wie Sie sehen können, führt diese Syntax zu einem Typfehler. Das ist falsch. Um diesen Fehler tatsächlich zu beheben, können wir ihm in diesem Fall Fehler tatsächlich zu beheben, einen Fallbackwert liefern. Also lege ich ein leeres Objekt und jetzt mal sehen, was wir haben werden. Wir werden unbestimmtes, unbestimmtes haben. Nun, dies wird erwartet, weil wir für dieses Objekt keinen Wert angegeben haben . Undefinierter Wert fällt auf ein leeres Objekt zurück. Und von diesem leeren Objekt, Disruptor nicht vorhandene Schlüssel, Farbe und Zahnräder. Nun, weil sie nicht für ein leeres Objekt definiert sind. Wenn ich die Farbe grün setze und versuche, sie zu protokollieren, werden Sie sehen, dass der Wert grün ist und die Zahnräder undefiniert sind, oder? Denn auch hier fällt unser undefinierter Wert auf dieses Objekt zurück. Und von diesem Objekt destrukturieren wir die Farbe in Zahnrädern. Es gibt tatsächlich einen weiteren Nachteil bei diesem Ansatz. Was ist, wenn ich hier ein leeres Objekt bereitstelle? Wie wir vielleicht wissen, ist ein leeres Objekt bereits ein definierter Wert, oder? Ich lege ein leeres Objekt ein. Kannst du raten, was Farbe und Zahnräder sein werden? Richtig? Es wird undefiniert sein. Undefiniert, da sie jetzt Farbe und Zahnräder für dieses Objekt nicht vorhanden sind. Deshalb haben wir undefiniert. Undefiniert. Was ist, wenn wir irgendwie Standardwerte für separate Objektschlüssel angeben möchten? Der Ansatz ist derselbe, indem das Gleichheitszeichen verwendet wird. So können wir die Farbe standardmäßig grün sein. Lassen Sie uns ein leeres Objekt setzen, um dies in einer Sekunde zu überprüfen. Und die Gänge sind standardmäßig sechs, oder? Wenn ich es jetzt betreibe, siehst du grün und sechs. Ziemlich genial. Um dieses Beispiel zu erweitern, was passiert, wenn ich den Standardwert für das Objekt selbst entferne, aber die Standardwerte für separate Schlüssel behalte und hier ein leeres Objekt entfernen werde . Versuchen wir es auszuführen. Schon wieder. Wir haben die Eigenschaftsfarbe von undefined nicht lesen , da wir wieder die gleiche Situation haben. Diese beiden Schlüssel werden versucht , von undefined zu destrukturieren, was zu einem Typfehler führt. Um das zu beheben, müssen wir den Fallback bereitstellen. Das ist wichtig. Wir bieten den Fallback für das Objekt selbst, und hier stellen wir Standardwerte für separate destrukturierte Schlüssel zur Verfügung. Aber ich kann zustimmen, dass diese Syntax ein bisschen verwirrend ist. Wir können es tatsächlich umgestalten, damit es schöner aussieht. Irgendwann werden wir eine weitere Codezeile haben, aber es ist in Ordnung. In Klammern behalte ich nur den Standardwert für das Objekt selbst bei. Und anstatt die Strukturierung zu verwenden, gebe ich den Namen für das Argument an. Lass es also ein Auto-Objekt sein. Und auf einer neuen Linie werde ich tatsächlich die Umstrukturierung für das Objekt setzen, const color getriebe ist gleich Car-Objekt. Jetzt können Sie sehen, dass wir die Bedenken in der Klammer tatsächlich getrennt haben. Wir haben nur den Standardwert für das Objekt selbst und in einer neuen Zeile angegeben für das Objekt selbst und in einer neuen Zeile Wenn wir diese Strukturierung verwenden, geben wir Standardwerte für separate Schlüssel an, so einfach das ist, ich persönlich denke, dass dies eine der coolsten Funktionen im modernen GIS. Ich mag es sehr, aber wir haben auch eine Radiusstrukturierung neben Objekt. Die Strukturierung ist eigentlich sehr, sehr ähnlich. Sagen wir also, ich habe ein Array oder lass mich vielleicht all das entfernen. Ich werde eine Funktion behalten, aber ich werde es auskommentieren. Und unten werde ich ein Array erstellen. Und ich werde einige Werte wie 5, 4, 3, 2 und 8 angeben. Und genauso wie ich die Umstrukturierung von Objekten auf ein Objekt anwende, kann ich eine Radiusstrukturierung verwenden, um zu signalisieren, dass wir Objektzerstörung verwenden. Wir verwenden geschweifte Klammern, aber für Arrays verwenden wir Box-Klammern. Auf die gleiche Weise geben wir Box-Klammern gleich summenarray an. Aber dieses Mal müssen wir den Namen der Schlüssel nicht genau befolgen. Wird es Einwände erheben? Wir haben Schlüsselnamen, aber im Array haben wir es nicht. Im Array haben wir eine Bestellung. Wenn wir also die Objektzerstörung anwenden, spielt es keine Rolle , in welcher Reihenfolge Sie die Schlüssel destrukturieren. Aber in Wut ist Strukturierung. Es ist wichtig. Sie können jedoch alle Namen angeben , die Sie für Ihre zukünftigen Variablen wünschen. Zum Beispiel möchte ich Ihr, das zweite Element dieses Arrays, stören . Um dies zu tun, muss ich zuerst das erste Element destrukturieren. Die Reihenfolge, die Sie in einer Radiusstrukturierung angeben , ist die gleiche wie die Elemente im ursprünglichen Array Destruktor das erste Element, ich gebe das erste Element. Und jetzt habe ich das zweite Element, zweite Element, das 4 sein wird. Also wird das erste Element 5 sein, das zweite Element wird vier sein. Wie Sie sehen können, wird die Bestellung beibehalten. Erstes Element fünf Sekunden 4. Wenn ich das dritte Element hier setze, kannst du den Wert erraten? Nun, ja, es werden drei sein. Schauen wir es uns an. Konsolenprotokoll, erstes Element, zweites Element und drittes Element. Notieren Sie die Datei GS, was wir sehen 5, 4, 3, genau die gleichen Werte. Wenn ich dieses Element aus irgendeinem Grund ausstrahlen wollte, sagen wir, ich benutze es so, oder? Const, zweites Element. Nun, das wird nicht funktionieren. zweite Element wird jetzt das erste Element sein, das ist fünf. Wenn ich es mit einer Konsole protokolliere, wirst du es sehen, es werden fünf sein. Denn auch hier ist die Reihenfolge wichtig, wenn Sie eine Umstrukturierung anwenden, da Elemente, geordnet sind, keine Schlüsselnamen haben. Sie können dieser Variablen einen beliebigen Namen geben, aber Sie müssen die Bestellung beibehalten. Ich denke, es ist endlich ziemlich klar, ich würde sagen, dass eine Radiusstrukturierung auf die gleiche Weise wie die Umstrukturierung von Objekten verwendet wird . Wenn Sie etwas Ähnliches mit einer Radiusstrukturierung in Klammern machen möchten Ähnliches mit einer Radiusstrukturierung , wenn Sie Funktion verwenden, funktioniert es. Der Unterschied besteht nur darin, dass q bei der Objektzerstörung q geschweifte Klammern mit der Radiusstrukturierung verwenden müssen, Sie Box-Klammern und auch die Reihenfolge verwenden werden. Denken Sie daran, dass in einem Array Elemente geordnet sind und Sie deshalb alle vorherigen Elemente destrukturieren müssen. Wenn Sie die Elementnummer destruktorieren wollten. Und wenn ich das vierte Element destrukturieren möchte, muss ich Ihre ersten drei stören. Dies ist unvermeidlich, während sie in Objektschlüsseln nicht geordnet sind. Deshalb können Sie jede Bestellung verwenden. Bei der Zerstörung der Schlüssel geht es um Objekt- und Radiusstrukturierung. Wir werden es oft benutzen und ich hoffe, es war dir klar. Wir sehen uns im nächsten. 30. Spread und Rest: Hi, dieses Mal werden wir über den Rest sprechen und die Betreiber verbreiten. Diese beiden sind eng mit dem Objekt im Rennen verbunden und werden in modernen JS viel verwendet. Lasst uns herausfinden, was sie tun. Wenn ich zurück zu File GAS gehe, lass mich vielleicht eine Funktion erstellen und die Spitze, die ich eine Funktion nennen werde. Es wird Argument Nummer eins, Argument Nummer 2 und 4 erhalten . Jetzt loggen religiöse Konsole arg1, arg2, perfekt. Lassen Sie mich unten diese Funktion aufrufen und lassen Sie mich Hallo als erstes Argument angeben. zweite Argument wird n bis zum dritten sein wird 15 entfernt sein, vielleicht nur eine leere Pfeilfunktion, und dann lass es nur Nummer 5 sein. Großartig. Wenn ich dieses Skript ausführen werde, werde ich sehen, dass ich Hello Andrea habe, die ersten beiden Argumente. Nun, wie können wir den Rest der Argumente tatsächlich erreichen und wie wir sie in einer einzigen Einheit sammeln können , in S und Google erträglich, deshalb existiert der Rest Operator. Es sammelt den Rest, die Argumente über den Rest von etwas in ein einziges Fass. Oben werde ich also nur eine kurze Referenz für uns geben. Also der Restoperator sammelt oder sagen wir falsche Werte in einer einzigen Variablen. Fehler. Großartig. Um den Restoperator zu verwenden, müssen wir die drei Punkte und den Namen der Variablen eingeben, in die der Rest geschrieben wird. Also lass es von Bögen ausgelöscht werden. Es kann ein beliebiger Name sein. Lassen Sie mich nun versuchen, restliche Bögen zu konsolenprotokollieren. Und jetzt haben wir 15 anonyme Funktionen und 5, wir werden im Grunde den Rest der Argumente, die wir nicht definiert haben. Wir können also sehen, dass unsere ersten beiden Argumente Hallo und NGO sind, und der Rest ist 15, die Funktion und fünf, großartig, wenn ich R2 hier entfernen werde, können Sie erraten, wie sich der Rest von RX ändern wird? Probieren wir es aus, oder? Also haben wir jetzt Andrew am Anfang als 15 Funktion und fünf. Und so funktioniert der Rest Operator. Es nimmt nur den Rest der Werte und faltet sie alle in eine einzige Variable, einfach so. Sehen wir uns nun an, wie wir den Restoperator in Objekten und Arrays verwenden können . Lassen Sie mich das aussprechen. Und ich werde ein Objekt erstellen, würde sagen, es wird Person sein und Name wird Andrew sein. Vielleicht wird das Alter 10 sein. Angenommen, ich habe hier ein Objekt strukturiert. Und ich möchte vielleicht einen Namen von diesem Personen-Objekt abrufen, dass ich Gepäck stornieren werde. Wir können Angio-Note erhalten. Vielleicht fügen wir dort weitere Schlüssel hinzu. Sagen wir Hobbyspiele, perfekt. Was ist, wenn ich irgendwie nur den Namensschlüssel und den Rest der Schlüssel abrufen möchte , möchte ich in ein neues, völlig neues Objekt falten. Wir werden in diesem Fall wieder den Restoperator benutzen. Genau wie in der Funktion werde ich nur drei Punkte innerhalb des Objekts verwenden , die Strukturierung und den Namen des Objekts , in das der Rest geschrieben wird. Also lass es der Rest der Person sein. Lassen Sie mich nun versuchen, den Rest der Person zu konsolenprotokollieren. Und was ich bekommen werde, bekomme ich ein neues Objekt mit den restlichen Schlüsseln, die ich nicht destrukturiert habe. Also habe ich nur den Namen destrukturiert. Und der Rest ist h und Hobby. Deshalb werde ich in dem neuen Objekt, das der Rest der Person ist, das der Rest der Person ist, H und Hobby sehen, wenn ich H hier hinzufüge. Jetzt wird der Rest der Person nur Hobby enthalten, weil dies der Rest ist. Was ist übrig? Lassen Sie uns das überprüfen. Perfekte Hobbyspiele. Wenn ich auch das Hobby zerstöre, kannst du den Wert jetzt erraten? Stimmt's? Es wird ein leeres Objekt sein. Wenn ich alle Schlüssel entferne, kannst du den Wert jetzt erraten? Richtig. Es wird genau das gleiche Objekt sein , denn der Rest sind alle Schlüssel, die wir nicht destrukturiert haben , da wir nichts gehört haben. Der Rest ist im Grunde alles hier. Die gleiche Regel gilt für das Löschen. Lassen Sie mich das aussprechen. Und unten werde ich ein Array erstellen. Und ich werde 5, 4, 3, 10 und 8 setzen , oder? Und ich werde eine Razzia Umstrukturierung durchführen. Also const bogs Klammern aus einem Array, von einigen wieder möchte ich das erste Element und den Rest greifen . Ich möchte in eine völlig neue Variable schreiben. Also werde ich noch einmal drei Punkte und den Namen der Variablen setzen , die der Rest eines Arrays sein wird. Lassen Sie uns überprüfen, ob ich den Rest eines Strahls in der Konsole protokollieren werde. Und ich bekomme 4, 3, 10 und 8, was der Rest des Arrays ist , das ich nicht destrukturiert habe. Wenn ich dein zweites Element zerstöre. Jetzt wird der Rest 3, 10 und acht sein, denn nun, ich habe die ersten zwei Elemente und der Rest ist 310 und 8. Wenn ich das richtig überprüfe, funktioniert alles perfekt. Jetzt haben wir nicht über den Spread-Operator gesprochen, aber wir können sehen, dass er auch die drei Punkte hat. Nun, die Sache ist, dass die Rest- und Spread-Operatoren die gleiche Syntax haben, aber sie werden in verschiedenen Kontexten verwendet und es ist sehr leicht, sie zu übersehen. Wie wir wissen, akkumuliert oder verfälscht der Rest von etwas in einer einzigen Variablen. Sie verbreiten Operator tut genau das Gegenteil. Es entfaltet einen gewissen Wert. Lassen Sie mich es Ihnen also demonstrieren. Nehmen wir an, wir haben ein Objekt. Alles klar, wo ist es? Lassen Sie uns dieses Personen-Objekt wiederverwenden. Und sagen wir, ich habe ein anderes Objekt, das ein anderes Objekt genannt wird. Und es hat einige Bereiche wie KI-Genom, in denen ihr Name Alex sein wird, und vielleicht wird Auto BMW sein. Großartig. Was ist, wenn ich diese beiden Objekte zusammenführen möchte? Wir können den Spread-Operator verwenden, um dies zu erreichen. Im Folgenden erstellen wir ein völlig neues Objekt, das wir zusammengeführtes Objekt aufrufen. Es wird ein leeres Objekt sein. Und in diesem leeren Objekt werden wir zuerst das Personen-Objekt verbreiten und dann ein anderes Objekt verbreiten. Also verbreiten wir zuerst Person und dann verbreiten wir ein anderes Objekt. Kannst du erraten, was das Tal von Merced Objekt sein wird? Lassen Sie uns das marschierte Objekt überprüfen. Und wir sehen, dass das neue Objekt alle Schlüssel enthält , die wir persönlich und in einem anderen Objekt haben. Nun, genau wie ich es dir schon sagte, entfaltet der Spread-Operator Werte. In diesem Fall entfaltete es zuerst das Personen-Objekt und dann entfaltete es ein anderes Objekt. Darüber hinaus hat es, wie Sie vielleicht bereits bemerken, wie Sie vielleicht bereits bemerken, genau die gleiche Syntax, drei Punkte wie der Restoperator, aber sie haben beide den zugrunde liegenden Unterschied, dass wiederum der Spread-Operator entfaltet Werte, während der Restoperator sie faltet. Werfen wir einen Blick auf ein anderes Beispiel mit Objekten. Was wäre, wenn ich stattdessen nur ein anderes Objekt in der Person direkt zusammenfüge . kann ich es ganz einfach machen. Ein anderes Objekt. Und natürlich muss ich es ganz oben setzen. Und jetzt brauche ich kein zusammengeführtes Objekt. Und jetzt wird unser neues Personen-Objekt alle Schlüssel von Bowl selbst und von einem anderen Objekt enthalten . Dies ist sehr flexibel, da Sie jetzt den Spread-Operator verwenden können , um Objekte nach Ihren Wünschen zu verwalten. Sie können Objekte zusammenführen. Sie können ein Objekt in ein anderes zusammenführen. Und es gibt ein paar andere Anwendungsfälle , mit denen Sie diesen Spread irgendwie verwenden können, um die Schlüssel eines Objekts an einem anderen Ort zu entfalten . In unserem Fall, was wir gerade getan haben, haben wir alle Schlüssel dieses Objekts in das Person-Objekt aufgeklappt . Wenn ich den Spread-Operator entfernen will, Mal sehen, was abgewertet wird. Wir werden ein anderes Objekt als wichtige Erkenntnisperson haben. Und dieser Schlüssel enthält den Wert des Objekts mit Schlüsseln, anderem Namen und Auto. Warum haben wir es so? Nun, diese Syntax, die Sie hier sehen, ist im Grunde die Abkürzung eines anderen Objekts, Doppelpunkt, eines anderen Objekts. Dies ist der Schlüssel, das ist der Wert. Aber wenn wir eine Situation haben, wenn der Schlüssel denselben Namen wie die Variable haben wird , die die Abwertung enthält, was ein anderes Objekt ist. Wir können die Kurzschrift benutzen und es wird funktionieren. Perfekt. Sehen wir uns nun den Spread-Operator beim Löschen an. Das werde ich kommentieren. Und ich werde für unser Summen-Array ungewöhnlich. Also hier haben wir den Rest eines Arrays. Lasst uns das tatsächlich entfernen. Und lass uns dieses Beispiel benutzen. Y ist, lassen Sie uns eine neue Variable und keines der beiden Arrays erstellen, und lassen Sie es 123 sein. Gut. Nun, genauso wie wir gerade Objekte zusammengeführt haben und genau die gleiche Art und Weise, wie wir löschen zusammenführen können, oder? Also hier erstelle ich ein völlig neues Array. Ich nenne es Ergebnis. Und in diesem neuen Array werde ich zuerst eine Zusammenfassung entfalten, und dann werde ich ein anderes Array entfalten. Am Ende werden wir beide Arrays einfach verketten. Zusammenfassung und vergiss nicht drei Punkte. Und dann noch ein Array mit drei Punkten. Jetzt sind wir nur Ergebnisse des Konsolenprotokolls und erhalten schließlich zwei Arrays zusammen. Großartig. Dies ist räumlich flexibel mit Arrays, da wir in der Lage sind, ein Array an jedem Ort in ein anderes Array zu entfalten. Das heißt, wenn ich sie einfach ersetzen werde, tausche ich sie einfach aus, oder? Ich werde eine ganz andere Reihenfolge haben, weil jetzt ein anderes Array zuerst geht. Deshalb sehe ich 123 und das resultierende Array. Wenn ich den Spread-Operator von beiden entfernen will. Jetzt hat unser Array nur zwei Elemente, bei denen jedes Element selbst ein Array ist. Stimmt's? Wir haben also eine Reihe von zwei Elementen. erste Element ist ein Array, zweites ist ein Array, aber das ist nicht genau das, was wir wollen. Normalerweise wollen wir diese verschachtelten Arrays nicht. Wir wollten mit flacheren Rennen arbeiten , weil das bequem und gut ist, das ist einfach normal zu sehen. Es wird viele Situationen geben, in denen wir den Spread-Operator in Arrays verwenden müssen. Und wir möchten eine gewisse Reihenfolge mit dem Spread-Operator strikt befolgen , wir können alle Werte überall platzieren, wo wir wollen. Genau wie ich es gerade mache, oder? Also kannst du den Wert erraten, den resultierenden Wert, wenn ich diese Codezeile einfüge, lass mich sehen. Zuerst werde ich ein anderes Array haben. Nach all den Werten eines anderen Arrays, das 1, 2, 3 ist , werde ich 15, 16 und 12 haben. Danach werde ich alle Werte der Zusammenfassung haben. Und am Ende werde ich 16, 1 und 0 haben. Ziemlich cool. Ich schätze, es dreht sich alles um die Spread- und Ruheoperatoren. Wir werden sie oft benutzen. Sie sind sehr, sehr nützlich. Also rate ich dir, dich damit vertraut zu machen und ein bisschen zu üben. Sie mögen verwirrend sein, aber letztendlich sind sie sehr einfach. Also vertrau mir, nimm dir einfach etwas Zeit, gewöhne dich dran und wir sehen uns im nächsten. 31. Async Code, Event: Hallo, wir haben endlich unser letztes JavaScript-Thema erreicht, ein Sink and Sink Code verspricht und asynchron erwartet Sie. Dies ist das wichtigste Thema in der modernen GS, Kenntnis dieses Themas ist unerlässlich. Ohne dieses Wissen wird sich die JavaScript-Entwicklung für Sie niemals vollständig anfühlen. Deshalb schlage ich vor, sich mit diesem Thema so vertraut wie möglich zu machen. Um einen Sink and Sink Code und Versprechen zu verstehen, müssen Sie tiefere Themen verstehen, wie GPS unter der Haube funktioniert, was ist Ereignisschleife und Call-Stack? In diesem Video werde ich versuchen, in einfachen Worten zu erklären, wie JavaScript funktioniert, um dann das Konzept der Versprechen zu verstehen, loszulassen. Was Sie gerade auf dem Bildschirm sehen, ist ein Überblick darüber, wie JavaScript den Code ausführt. Dieses Bild beschreibt, wie GS im Browser läuft. Für NodeJS wird es etwas anders sein, aber es ist in Ordnung, es für unseren Anwendungsfall zu verwenden. Im gelben Rahmen können Sie also Teile der JavaScript-Engine sehen , die Heap- und Call-Stack genannt werden. Heap befindet sich im Speicher zugewiesenen Speicherplatz, in dem alle definierten Variablen während der Codeausführung leben. Call Stack ist der Durchsatzort, an dem JavaScript entscheidet, was ausgeführt werden soll. Als nächstes werden wir über Call-Stack und einen Moment sprechen. Außerhalb des GS-Frames können Sie Web-APIs, Callback, Warteschlange und Ereignisschleife sehen . Diese alle sind nicht Teil der JavaScript-Engine. Dies bedeutet, dass sie durch die Umgebung definiert sind , in der JavaScript ausgeführt wird. Wir kennen zwei primäre JavaScript-Ausführungsumgebungen, Browser und NodeJS. Web-APIs enthalten beispielsweise Dinge wie DOM-API oder Fetch-API, die Teil der Browserumgebung sind. Nur Web-APIs sind in Node.JS nicht implementiert. Wir haben keine HTML-Manipulationsfunktionen wie Document get element by ID und NodeJS. Dies sind Funktionen, die in der Browserumgebung implementiert sind, wissen nur gs , implementiert jedoch einige Dinge aus Web-APIs. Legen Sie beispielsweise ein Timeout fest. Sie sehen in beiden Umgebungen genauso aus, aber unter der Haube ist die Implementierung anders. Möglicherweise haben Sie bereits gehört, dass JavaScript eine Single-Thread-Sprache ist. Aber was heißt das? Dies bedeutet, dass JavaScript einen einzelnen Call-Stack hat. Als Single Call Stack bedeutet, dass die Sprache jeweils nur eine Operation verarbeiten kann . Stellen Sie sich eine einfache Tür vor. Nur wenige Menschen, die versuchen, durch die Tür zu gehen , können jeweils nur eine Person passen. Es kann nicht gleichzeitig zu Personen passen , wenn die erste Person in die Tür geht. Und wenn diese Person größer wird als andere Personen, die versuchen, durch die Tür zu kommen , müssen sie warten, weil sie nicht eintreten können, nachdem die Aktienperson die Tür verlassen hat, können andere Personen fahren Sie fort und gehen Sie dasselbe mit der JavaScript-Engine durch , wenn zwei Codezeilen nacheinander laufen, zum Beispiel zwei Konsolenprotokolle. Wir wissen, dass die erste Codezeile immer zuerst ausgeführt wird und Erst nach Abschluss der ersten Zeile wird die zweite Zeile ausgeführt. Das bedeutet, dass, wenn die erste Codezeile fünf Jahre dauern wird, die zweite Codezeile all diese fünf Jahre warten wird , bis die erste Operation abgeschlossen ist, und erst danach wird sie ausgeführt. Auch hier ist JavaScript eine einzelne Thread-Sprache mit dem Single-Call-Stack. Aufgrund eines einzelnen Call-Stacks kann die GS-Engine jeweils nur einen Vorgang verarbeiten. Call Stack ist ein temporärer Speicher für alle ausstehenden Funktionen, die ausgeführt werden sollen. Und es ist als Stack organisiert, eine Struktur, die der letzten ersten Out-Methode folgt. Zuletzt bedeutet zuerst, dass das letzte Element, das dem Lager hinzugefügt wird, immer zuerst entfernt wird, ein Stapel Platten ist ein perfektes Beispiel für das letzte Mal, stellen Sie sich zuerst einen Stapel Platten vor. Man stapelt Platten übereinander. Sobald Sie Vorlagen übereinander haben, Nehmen wir an , Sie müssen die allererste Platte von unten entfernen . Du kannst es nicht einfach von unten rechts nehmen? Wenn Sie das tun würden, fällt der Stapel und die Platten werden zerstreut. Die einzige Möglichkeit für Sie, das gespielt zu nehmen , besteht darin, alle Platten nacheinander von oben zu entfernen, bis Sie die gewünschte Platte unten erreichen die gewünschte Platte unten Diese Art von Organisation wird als Stapel bezeichnet. Die letzte Platte, die dem Stapel hinzugefügt wurde , wird zuerst von diesem Stapel absteigen. Somit ist der Name zuletzt zuerst raus. Java's könnte Stack aufrufen, folgt genau der gleichen Organisation. Stellen Sie sich jetzt einen Container vor. Dieser Container wird der Call-Stack sein. Auf der linken Seite gibt es einen einfachen Code. Mal sehen, wie JavaScript gegen dieses Snippet protestieren würde. Javascript teilt den Code in Funktionen auf. Wenn JavaScript eine Funktion ausführen muss, wird die Funktion oben im Aufrufstapel hinzugefügt. Jedes Mal, wenn die Funktion beendet oder zurückkehrt, wird sie aus dem Aufrufstapel entfernt. Also sieht JavaScript zuerst console.log. Bist du bereit? Es wird dem Call-Stack hinzugefügt als ausgeführt und sofort entfernt. Danach gs, Cs, drucken Sie meine Biografie, es wird zum Anrufstapel hinzugefügt, drucken Sie meine Biografie, GS sieht zuerst, bekomme zuerst meinen Namen, was bedeutet, dass er oben auf dem Anrufstapel hinzugefügt wurde . Gs schaut hinein, Get FirstName und sieht, dass diese Funktion einen Wert zurückgibt. Sobald die Funktion zurückkehrt, entfernt GS sie aus dem Aufrufstapel. Die Ausführung von print my bio geht weiter. Jetzt funktioniert gs, Cs getAge, die gleiche Situation. Gs schaut in GetAge, die Funktion kehrt zurück und wird aus dem Call-Stack entfernt. Dann gibt es endgültige console.log. Mein Name ist Andrew, mein Alter ist 10 Jahre, hinzugefügt und sofort entfernt. Drucken Sie meine Bio-Exits und Call Stack ist leer. Jetzt ist die Ausführung von Hauptcode oder Mainframe abgeschlossen. Der berüchtigte maximale Call-Stack wurde überschritten oder Stack-Overflow-Fehler treten auf, wenn die Call-Stack-Größe aufgebläht ist und die Zahl lächerlich groß wurde, dass die Engine diese Anzahl von Vorgängen innerhalb des ruf Stack an. Weil JavaScript einen einzelnen Call-Stack hat , der so organisiert ist, wie Sie es gerade gesehen haben. Es heißt Blockieren. Denken Sie daran, dass eine Operation nach dem anderen, nächste Funktion erst ausgeführt wird , wenn das vorherige Ende abgeschlossen ist. Dies führt uns zum Begriff synchron, was im Grunde bedeutet, dass die Ausführung nacheinander verläuft , wie wir es im Code sehen. Das Blockierverhalten kann leicht in der Browserumgebung aufgenommen werden. auf einer beliebigen Seite mit der rechten Maustaste, wählen Sie, prüfen aus, und öffnen Sie dann die Konsolenregisterkarte. der Konsolenregisterkarte können wir jedes gültige JavaScript im Browser ausführen . Zum Beispiel console.log. Wow wird Wow produzieren, das in der Konsole gedruckt wird. Perfekt. Aber was ist dem Blockierverhalten in der Browserumgebung, wir haben die Alarmfunktion und es ist ein gutes Beispiel, um das Blockierverhalten zu demonstrieren. Also tippe ich Alert High ein. Und wenn ich die Eingabetaste drücke, was passiert ist, dass ich zuerst das Pop-up sehe, das hoch sagt, aber was passiert unter der Haube? Unter der Haube wurde die Alert-Funktion zum Call-Stack hinzugefügt und sie wurde noch nicht entfernt, da die Warnung nicht beendet wurde und die Warnung keinen Wert zurückgab, was bedeutet, dass die Warnung immer noch ist innerhalb des Aufrufstapels und blockiert die Ausführung aller nachfolgenden Funktionsaufrufe. Ich werde alles konsolenprotokollieren. Wenn ich die Eingabetaste drücke. Nichts passiert, weil sich derzeit die Warnung im Aufrufstapel befindet und die Ausführung blockiert und die Ausführung weiterhin blockiert, bis die Alert-Funktion zurückkehrt oder beendet wird . Und das wird passieren, was ich drücken werde, Okay, also drücke ich console.log. Ich führe das Konsolenprotokoll noch zwei Mal aus und dann drücke ich OK, Mal sehen, was passieren wird. Jetzt. Du siehst, wie alles gerade unter der Haube aufgetaut ist. Die Alert-Funktion wurde aus dem Call-Stack entfernt und die Ausführung wurde fortgesetzt. Deshalb sehe ich alle meine S3-Konsolenprotokolle, für die ich früher die Eingabetaste gedrückt habe. Großartig. Jetzt verstehen wir den Synchronisierungscode. Wie Sie sehen können, ist es nicht sehr praktisch, immer auf den Abschluss einer Operation zu warten. Hier kommt ein Synchronisierungscode zur Rettung. Wenn JavaScript einen Senk-Code liest, wird es verarbeitet, nicht ausgeführt, im Hintergrund verarbeitet und nach der Verarbeitung in eine separate Warteschlange gestellt, die darauf wartet, dass der Aufrufstapel wird leer, wenn gesamte Synchronisierungscode ausgeführt wird und der Aufrufstapel leer wird, asynchroner Code, der in die Warteschlange gestellt wurde, wird in den Call-Stack geschoben und wird jetzt ausgeführt. Es gibt spezielle Sprachfunktionen, die es uns ermöglichen, asynchronen Code zu schreiben. Dies sind Versprechen und Rückrufe, deren Implementierungen uns von der Umwelt ausgesetzt sind . Browser, Web-APIs verarbeiten den Code im Hintergrund und verzögern seine Ausführungsereignisschleife in diesem System ist eine Art Beobachter für den Call-Stack und die wartende Async-Warteschlange, einmal aufgerufen wurde Stack ist leer. Ereignisschleife zieht Elemente aus der Warteschlange und platziert sie in den Call-Stack. Dieses Konzept führt ein nicht blockierendes Code-Ausführungsmodell ein. Es ändert nichts an der Tatsache, dass Call Stack jeweils nur eine Operation verarbeiten kann, aber es ermöglicht, den Code nicht blockierend auszuführen. Betrachten wir einen Fall mit zwei Operationen. Senden Sie eine Anfrage an einen Server und drucken Sie Hallo an die Konsole. Die Anforderung würde 500 Millisekunden dauern , während das Drucken abgeschlossen ist. Hallo würde nur zehn Millisekunden dauern, wenn müssten Sie mit dem sync-modalen Konsolenprotokoll 500 Millisekunden auf die Anfrage warten fertig und erst dann wird hallo gedruckt. Mit dem nicht blockierenden Modell würde die Anforderung asynchron im Hintergrund verarbeitet . Nun, der Synchronisierungscode setzt seine Ausführung fort. Wir würden sehen, dass Hello sofort nach zehn Millisekunden und der Anfrage im Hintergrund gedruckt wird , wir werden die Ausführung irgendwann in der Zukunft nach 500 Millisekunden unter der Haube beenden , es gibt tatsächlich mehrere Warteschlangen. Einer für Timer, einer für Kühltaschen, 14 Versprechen usw. Sie haben unterschiedliche Prioritäten und bestimmte Reihenfolge. Zum Beispiel haben Versprechen Vorrang vor Callbacks, um dies nicht zu kompliziert zu machen. Stellen wir uns vor, es gibt eine einzige Warteschlange für den gesamten asynchronen Code. Eines der Beispiele für asynchronen Code sind Callbacks. Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben wird . Callbacks sind standardmäßig nicht asynchron, aber diejenigen, die von den Web-APIs bereitgestellt werden, sind es tatsächlich. wir zum Beispiel einen Blick auf setTimeout. Es ist sowohl in Know-GS- als auch in Browser-Umgebungen verfügbar. Wir werden uns zwei Beispiele ansehen. Eins in kein GS und einer im Browser. Es spielt eigentlich keine Rolle, wo wir setTimeout verwenden werden. Aber je mehr desto besser, oder? Das erste Beispiel wird in keinem GS liegen. Und ich habe diesen einfachen Code bereits mit zwei Konsolenprotokollen und setTimeout vorbereitet . SetTimeout erwartet also, dass wir zwei Argumente angeben, wobei das erste Argument der Callback ist, der nach der Anzahl der Millisekunden ausgeführt wird , die wir liefern. Als zweites Argument gebe ich in diesem Fall 0 Millisekunden an, was bedeutet, dass die Ausführung nicht verzögert wird. Aber mal sehen, wie der Code ausgeführt wird. Kannst du das Ergebnis erraten? Was wird zuerst kommen? Mal sehen. Ich führe das Skript aus und wir sehen 1 , 2 und erst dann wird Timeout ausgelöst. Die Sache ist, dass setTimeout asynchron ist. Dies bedeutet, dass das Timeout, der Callback, der Rückrufwarteschlange im Hintergrund hinzugefügt wurde . Ich werde 2504,52 Sekunden liefern. Mal sehen, wie das Bild anders sein wird. Ich führe das Skript aus, ich sehe 12. Dann sehe ich die Verzögerung von 2,5 Sekunden. Und erst dann feuert der IC Timeout unter der Haube. Settimeout wurde durch den Code verarbeitet. Settimeout wurde dem Call-Stack hinzugefügt, aber der Callback und die Timer-Ausführung wurden an die Node.js APIs delegiert , die im Hintergrund verarbeitet werden sollen, setTimeout wurde aus dem Call-Stack entfernt. Es bedeutet, dass die Hinrichtung fortgesetzt wird. Dann sehen wir die Konsolenprotokollierung am Anrufstapel und sofort entfernt. Und das Gleiche mit dem zweiten Konsolenprotokoll , das dem Anrufstapel hinzugefügt und sofort entfernt wurde. Und sobald er im Hintergrund ist, wird der Timer nach 2,5 Sekunden in der Zukunft bearbeitet . Dieser Callback wird aus der Hintergrund-Callback-Warteschlange in den Call-Stack aufgenommen der Hintergrund-Callback-Warteschlange und dann ausgeführt. Und es spielt keine Rolle, wie viele Millisekunden ich für das zweite Argument liefern werde. Es wird immer ein Protest auf nicht blockierende Weise sein, und er wird in die Callback-Warteschlange gedrängt. Und erst nachdem der Call-Stack leer ist, zieht die Ereignisschleife diesen Callback aus der Hintergrund-Callback-Warteschlange und schiebt ihn in den Call-Stack. Es spielt keine Rolle, wie viele Millisekunden ich bereitstelle oder wo ich diesen Code ablege, es wird immer asynchron Protest sein. Wenn ich es dazwischen lege und 0 Millisekunden bereitstelle, ist das Bild das gleiche. Werfen wir einen Blick auf das zweite Beispiel. Sie können einen sehr einfachen Index-HTML sehen , der ein einzelnes Schaltflächenelement mit id, btn hat. Dann habe ich im Skript einfach diesen Button mit der DOM-API, dem dokumentierten Credits Selector, dem Hashtag, meinem BTN gezogen . Dann füge ich diesem Button-Element einen Listener für das onClick-Ereignis und für das OnClick-Ereignis auf BET- und Click-Funktion wird ausgelöst. Im Moment ist es leer, aber fügen wir etwas in das Konsolenprotokoll hinzu hallo. Und lass mich die index.HTML tatsächlich im Browser öffnen . Rechtsklick im Datei-Explorer anzeigen. Doppelklick drauf und boom, los geht's. Rechtsklick Inspect. Und ich öffne den Konsolen-Tab, ich klicke auf mich und ich sehe, dass Hallo gedruckt wird, genau wie wir es im Handler für das OnClick-Ereignis definiert haben. Perfekt, kopieren wir tatsächlich den Code , den wir in keinem GS hatten, in den Handler. Nun, wird das Verhalten das gleiche sein wie in no, GS. Lassen Sie uns das überprüfen. Ich gehe zurück zum Browser und aktualisiere die Seite. Ich drücke die Taste und wie ich sehen kann, geht zuerst 1, 2, und erst dann wird Timeout ausgelöst, obwohl es zwischen den Konsolenprotokollen platziert wird. Wenn ich es auf den Job lege und wenn ich es mache , sagen wir zwei Sekunden. Ich aktualisiere die Seite. Ich klicke unten, ein bis zwei Sekunden vergingen bei IC-Timeout-Bränden. Nun, das Bild ist das gleiche. Was passiert, ist, dass SetTimeout, sobald JavaScript setTimeout liest , wieder zum Aufrufstapel hinzugefügt wird, aber der Callback und der Timer wurden diesmal an die Web-APIs im Browser delegiert. Das bedeutet, dass sie im Hintergrund verarbeitet werden. Die Hinrichtung geht weiter. Settimeout wird aus dem Call-Stack entfernt. Konsolenprotokoll wurde zum Call-Stack hinzugefügt, ausgeführt und entfernt. Und das Gleiche mit dem zweiten Konsolenprotokoll. Sobald der Code abgeschlossen ist, der Mainframe oder der Hauptcode beendet, wird die Ereignisschleife ständig nach der Callback-Warteschlange suchen. Der Rückrufwarteschlange wird also ein Di Callback hinzugefügt. Und dann sieht die Ereignisschleife das und schiebt diesen Callback in den Call-Stack. Und danach geht der Anruf nach hinten los. Aber sehen wir es uns tatsächlich mit dem blockierenden Beispiel an. Was ist, wenn ich Alert anstelle des Konsolenprotokolls einfüge, gebe ich einfach Alert High ein. Und ich entferne das zweite Konsolenprotokoll. Und jetzt ist die Frage, dass das festgelegte Timeout im Hintergrund verarbeitet wird, sobald die Warnung beginnt, die Ereignisschleife zu blockieren, Mal sehen. Ich aktualisiere die Seite. Ich drücke die Taste, Alarm wird ausgelöst und jetzt blockiert es die Ereignisschleife. Aber ich sehe nichts in der Konsole. Und wenn ich die Taste OK drücke, erst danach beginnt der Code erst danach mit der Verarbeitung des Callbacks. Weil setTimeout nach der Warnungszeile erscheint. Wenn wir setTimeout vor die Alarmzeile stellen, wird das Bild anders sein. Um die Seite zu aktualisieren. Klicken Sie erneut auf Mich. Alert blockiert die Ereignisschleife, aber jetzt hat SetTimeout die Verarbeitung dieses Callbacks bereits an Web-APIs delegiert. Dies bedeutet, dass während Alert die Ereignisschleife blockiert, Callback von Web-APIs im Hintergrund verarbeitet wird. Und jetzt befindet sich dieser Callback in der Callback-Warteschlange und wartet darauf, in Richtung Call Stack geschoben zu werden . Wenn ich auf Okay drücke, sehe ich sofort Timeout-Feuer. Stimmt's? Aber wenn ich Okay drücke, ändert sich innerhalb dieser zwei Sekunden, das Bild innerhalb dieser zwei Sekunden, aktualisiert die Seite, klicke mich und klicke sofort auf Okay. Und Sie können sehen, dass es noch weniger als zwei Sekunden war noch weniger als zwei Sekunden denn sobald ich auf die Schaltfläche klicke, wird dies sofort an die Web-APIs delegiert. Und es spielt keine Rolle, wie lange die Alarmzeile die Ausführung blockiert. Dies wird bereits im Hintergrund verarbeitet. Großartig. In einfachen Worten können wir sagen, dass asynchroner Code die Art von Code ist , der nach allem synchronen Code immer ausgeführt wird. Um sich leicht an dieses Konzept zu erinnern, stellen Sie sich zwei Spalten vor, eine für die Synchronisierung und 14 asynchronen Code, sagen wir, gs beginnt den Code zu lesen und sortiert dann den Code in Zink und die Zinkspalten. Und sobald es Zeit ist, den Code auszuführen, platzieren Sie einfach die asynchrone Spalte unter die Senk-Spalte. Und los geht's. Dies ist die Reihenfolge, in der der Code ausgeführt wird. Natürlich ist dies zu sehr vereinfacht, aber es gibt die Grundidee. Im modernen GAS werden Sie überall Versprechen sehen. Die Grundlage für Versprechen ist asynchroner Code. Deshalb ist es so wichtig, dieses Konzept zu nutzen. Serveranfragen, Datenbankoperationen, Datei-Leseoperationen. Für all das würden wir Versprechen und asynchronen Code verwenden. Ich hoffe, es war klar und jetzt können Sie besser verstehen, wie GS den Code interpretiert. Nächstes Mal werden wir über Versprechen sprechen und Asynchron erwarten. Sieh dir andere an. 32. Async und Sync – Vorteile und Async Awart: Hi, In diesem Video werden wir endlich über Versprechen sprechen und Asynchron erwarten. Lass uns gehen. Wir wissen, dass die Grundlage für Versprechen asynchroner Code ist. Aber was ist dann ein Versprechen? Ein Versprechen ist ein Objekt, das irgendwann in Zukunft einen gewissen Wert erzeugen wird . Auf nicht blockierende Weise asynchron kann ein Versprechen einer der drei Staaten sein, die anstehend sind, der Ergebnisstatus und der abgelehnte Staat. Während sich ein Versprechen im ausstehenden Zustand befindet, bedeutet dies, dass sich das Versprechen nicht gelöst hat oder noch keinen Wert hervorgebracht hat, ein Versprechen ist gelöst. Das bedeutet, dass das Versprechen bereits einen Wert hervorgebracht hat. Und wenn Versprechen abgelehnt werden, bedeutet dies, dass dieses Versprechen geworfen und hinzugefügt wurde und es keinen Wert hervorgebracht hat. In Ordnung, lasst uns sehen, wie ein sehr grundlegendes Versprechen aussieht, und mal sehen, wie wir anfangen können, mit ihnen zu arbeiten. Lassen Sie mich also eine Variable erstellen. Ich nenne es sowas tun. Und innerhalb dieser Variablen rufe ich einfach den versprochenen Konstruktor auf. Um das zu tun, muss ich ein neues Versprechen machen. Und der Versprechenskonstruktor, ich muss den Testamentsvollstrecker oder den Rückruf liefern , der das Versprechen initialisiert. Also werde ich einen leeren Rückruf übergeben. Und dieser Callback, den ich an den Konstruktor übergebe , erhält immer zwei Argumente. Das erste Argument heißt „Resolution“. Zweitens ist die Ablehnung. Das erste Argument ist also die Funktion, die wir innerhalb des Callbacks aufrufen müssen , um aus diesem Versprechen einen Wert zu erzeugen. Und wenn wir Ablehnung nennen, werfen wir offensichtlich einen Fehler aus diesem Versprechen. Wir lehnen dieses Versprechen ab. Also rufe ich zum Beispiel einfach Resolution an. Und wie Sie der Intelligenz entnehmen können, habe ich einen Wert, den ich bestehen muss. Wir lösen ein Versprechen mit gewissen Wert, weil Versprechen einen Wert hervorbringt. Also zum Beispiel hallo. Lasst uns versuchen, dieses Versprechen einfach irgendwie zu benutzen. Denken Sie also daran, dass ein Versprechen, es ist keine Funktion. Es wäre also falsch, es mit Klammern zu nennen als ob das wertvolle eine Funktion wäre. Es reicht gerade aus, auf das Versprechen zu verweisen , damit es funktioniert. Wenn ich die Datei speichere und dann das Skript ausführe, werden Sie sehen, dass nichts passieren wird, weil wir nichts in die Ausgabe drucken. Aber wenn ich das Konsolenprotokoll mache, werde ich in diesem Fall sehen, dass das Versprechensobjekt gedruckt wird. Es ist wichtig zu beachten, dass das, was Sie hier sehen, das Versprechensobjekt ist. Es ist also das Versprechen selbst. Es ist nicht der Wert, den das Versprechen löst. Dieser Rückruf, den wir an den Promise-Konstruktor übergeben , wird synchron initialisiert. Dies bedeutet, dass dieser Callback blockiert ausgeführt wird, wenn wir auf einige verweisen . Der Wert, der aus diesem Versprechen gelöst wird, wird jedoch nicht blockierend gelöst. Und um einen Wert aus diesem Versprechen zu lösen , die eigentliche Zeichenfolge hallo zu erhalten, muss ich diese spezielle Versprechenssyntax verwenden damals genannt wird, oder einfach nur ehrwürdige Syntax. Es heißt manchmal so. So tue ich etwas DOD. Und von der Intelligenz, die Sie sehen können, habe ich endlich drei Optionen, und einen Wert aus diesem Versprechen zu lösen, muss ich die Punkt-dann Methode für das Versprechensobjekt und die 2D-Punkt-Dot-Dot-Dot-Methode aufrufen Versprechensobjekt und die 2D-Punkt-Dot-Dot-Dot-Methode Ich muss einen Rückruf bestehen. Und dieser Callback als erstes Argument erhält den Ergebniswert aus diesem Versprechen, zum Beispiel den gelösten Wert. Und wenn ich versuche, den Ergebniswert des Konsolenprotokolls zu konsolen, werden Sie sehen, dass es unsere Zeichenfolge Hallo sein wird. Wenn ich das Skript ausführe, wird Hallo in die Ausgabe gedruckt , was korrekt ist. Was ist mit der Ablehnungsfunktion, die wir als zweites Argument im Initialisierer erhalten . Versuchen wir es also und verwenden Sie anstelle von Resolve ablehnen, und sobald sie es aufrufen, können Sie einen optionalen Argumentgrund sehen. Wenn wir also ein Versprechen ablehnen, haben wir es aus irgendeinem Grund abgelehnt, meistens werden Sie ein Versprechen mit einem Fehler und anderen Versprechen ablehnen , dass Sie sagen werden, dass Sie in freier Wildbahn begegnen werden. sie werden alle mit einem Adder-Objekt ablehnen. Deshalb scheiterte statt nur die Ablehnung mit diesem Versprechen zu bestehen. Aber die Nachricht wie diese, stattdessen übergeben wir einen neuen Editor und die Nachricht wird vielversprechend sein, gescheiterte Note. Wenn ich dieses Skript ausführen werde, sehen Sie Fehler, Versprechen fehlgeschlagen und die Warnung zur sehen Sie Fehler, Ablehnung der Versprechung und wichtigen Hinweis hier sehen, dass dieser Rückruf nie ausgelöst wurde, weil das Versprechen wurde abgelehnt und wir sehen keinen Ergebniswert. Es bedeutet, dass das Versprechen einen Fehler auslöst und wir nichts tun, um damit umzugehen. Versuchen Sie immer, Fehler von Promises zu erkennen. Dies ist wirklich wichtig, da sonst Nachrichten wie diese unbehandelte Ablehnung von Versprechen angezeigt werden, die die Anwendung möglicherweise zum Absturz bringen können. Um diese Ablehnung innerhalb des Versprechens einzufangen, müssen wir den Fangblock verwenden, den wir zuvor gesehen haben. Also werde ich einfach DOD setzen und dann rufe ich einfach die Catch-Methode auf. Und drinnen muss ich auch einen Rückruf übergeben , da das erste Argument, das den Rückruf der Catch-Methode zurückruft , alles erhalten wird , womit wir dieses Versprechen ablehnen. Da wir dieses Versprechen mit einem anderen Objekt abgelehnt haben , scheiterte das neue Versprechen. Hier. Erstes Argument, ich erhalte das Objekt. Also gehe ich einfach zum Konsolenprotokoll. Und ich werde sagen, dass Adder aufgetreten ist. Und dann drucke ich einfach die Fehlermeldung aus. Großartig, versuchen wir die Datei auszuführen. Sie werden sehen, dass wir keine Warnung zur Ablehnung von unbehandelten Versprechen haben. Und dieses Mal sehen wir unser Konsolenprotokoll. Wann immer wir das Versprechen ablehnen, jeder Tanz, den wir definiert haben wird jeder Tanz, den wir definiert haben, um aus diesem Versprechen zu lösen, niemals ausgeführt , weil das Versprechen einen Fehler auslöst und dieser Fehler oder diese Ablehnung durch den Fangblock behandelt wird. Ein weiterer guter Tipp über Versprechen ist der Dot Dance. Sie können so oft angekettet werden, wie wir wollen, genauso wie Fangblöcke. Wenn ich hier zum Beispiel noch einmal einen Punkt setzen werde , wirst du endlich die intelligente Skizze sehen. Und dann rufe ich wieder die dann Methode auf, ich gebe den Anruf zurück. Diesmal habe ich einen Wert erhalten, sagen wir, und ich versuche, den Protokollwert in Sekunde zu konsolen. Und kannst du raten, was dieser Wert sein wird? Lass es uns versuchen. Und wir sehen, dass ein Versprechen gescheitert ist. Aha, okay, anstatt abzulehnen, lassen Sie uns erneut Entschlossenheit verwenden, um sagen zu lassen, dass wir die Kontrolle über Punkttanz geben. Wir müssen dieses Mal keinen Adder aus diesem Versprechen werfen. Notizdatei GS, Sie können sehen, dass Hallo zuerst gedruckt wird , weil wir dies beim ersten Rückruf tun und dann sehen wir, dass der Wert im zweiten Dan undefiniert ist. Die Sache ist, dass wenn Sie Multiples und Argumente verketten, das erste Argument im nachfolgenden Dan der Rückgabewert vom vorherigen dann sein wird, denn von diesem ersten, dann Callback wird nichts sicherstellen. Der zweite Punkt dann wird das erste Argument undefiniert sein. Wenn ich hier fünf zurückgebe, Wert hier jetzt fünf. Lass es uns versuchen. Und Sie werden den Wert in Sekunden sehen, dann ist fünf Grad. Wenn ich also noch ein drittes Duck Dan benutzen werde, und dieses Mal sagen wir mal Val Three In Dritter, dann wird es drei sein, oder? Es wird undefiniert sein, oder? Weil Literatur nichts von der vorherigen. Wenn ich dann 10 zurückgeben will, wird Val drei 10 sein. Ich hoffe, es ist klar. Und du hast vielleicht eine Frage, warum müssen wir hier mehrfachen Tanz verketten? Die Sache ist, dass wir in der realen Welt mit mehreren Versprechen gleichzeitig arbeiten werden. Und in einem Versprechen werden wir ein anderes Versprechen so nennen, werden wir ein anderes Versprechen so nennen wie dann einen Punkt machen, dann werden wir im Inneren etwas wie ein anderes Versprechen zurückgeben und dann wieder und so weiter. Aus diesem Grund ist es einfacher, das Ergebnis einer Logik an eine andere zu übergeben , um den Code zu vereinfachen , damit er lesbarer wird. Ich weiß, dass es verwirrend sein könnte, weil es hier jetzt kein echtes Beispiel gibt. Aber vertrau mir, es ist vollkommen in Ordnung. wirst du in Zukunft sehen. Versuchen wir tatsächlich, anhand von Versprechungen ein realeres Beispiel zu erstellen . Also werde ich das alles einfach entfernen. Lassen Sie uns stattdessen ein völlig neues Versprechen erstellen, dass wir die setTimeout-Funktion, die wir bereits kennen, einschließen werden. Wir möchten setTimeout in, sagen wir versprechenbasierte Syntax umwandeln . Zum Beispiel möchte ich eine Funktion erstellen, nennen wir sie Gewicht, Summe. Diese Funktion würde ich übergeben, sagen wir mal Anzahl von Millisekunden, sagen wir 40000 für 40 Sekunden. Und dies wird eine Funktion sein , die ein Versprechen zurückgeben wird. Und nach dieser Funktion , sobald das Versprechen gelöst wird dieser Callback ausgeführt, sobald das Versprechen gelöst ist. Zum Beispiel, Konsolenprotokoll, vergingen vier Sekunden. Es ist eine Art Ersatz für setTimeout, aber die Verwendung der versprochenen Syntax. Wie können wir das umsetzen. Das ist also unser Modell. Lassen Sie uns einfach auskommentieren und jetzt fangen wir an, das Versprechen zu schreiben. Weight Sum ist also eine Funktion, die ein Argument erhält, nämlich die Anzahl der Millisekunden. Also werde ich nur Gewichtssumme erstellen. Als Pfeilfunktion. Diese Funktion erhält ein Argument-Timeout in einem solchen Chaos. Und diese Funktion gibt ein Versprechen zurück, das neue Versprechen an den Versprechenskonstruktor abwirft, ich übergebe den Callback. Und dieser Callback erhält zwei Argumente, Ergebnis und Ablehnung. Aber da wir uns hier nicht auf Ablehnung treffen, verwende ich einfach das Argument „Resolution“. Also jetzt müssen wir irgendwie verzögerte Codeausführung innerhalb dieses Versprechens, wir können setTimeout verwenden. Also rufe ich einfach setTimeout an. Erstes Argument ist erneut der Rückruf, der nach der angegebenen Anzahl von Millisekunden als zweites Argument ausgelöst wird . Und für das zweite Argument werde ich nur das Argument für Gewicht einer Funktion selbst übergeben , Timeout in der Masse. Und sobald diese Kälte nach hinten losgeht, rufe ich einfach die Entschlossenheit auf, um dieses Versprechen zu lösen. Und das war's. Dies ist unsere Implementierung. Lassen Sie uns unsere Verwendung dieses Versprechens kommentieren und sehen wir uns einfach an, wie es funktioniert. Notieren Sie die Datei GS. Ich kann sehen, dass vier Sekunden vergangen sind, und ich sehe meine Ausgabe vier Sekunden nach. Ihnen zu zeigen, wie dies nicht blockierend sein wird, können wir tatsächlich dasselbe Beispiel aus unseren vorherigen Videos verwenden , das Konsolenprotokoll-Konsolenprotokoll 2. Es spielt keine Rolle, wo ich einen Versprechenspunkt Dan gebe, es wird immer mit der Punktsyntax auf nicht blockierende Weise gelöst . Es bedeutet, dass es nach allem synchronen Code immer erscheint . Um das noch einmal zu überprüfen, machen wir es vielleicht etwas kürzer. Eine Klasse von 100. Du siehst 12 und erst dann sind vier Sekunden vergangen. Und es spielt keine Rolle, ob ich setTimeout stelle oder nicht hier drüben. Zum Beispiel werde ich es einfach ohne Logik lösen. Es wird immer am Ende sein, weil ein Versprechen immer auf nicht blockierende Weise gelöst ist. Ich hoffe, es ist klar. Werfen wir einen Blick auf ein anderes Beispiel aus der realen Welt mit der Fetch-API , die wir im Browser zur Verfügung haben. Wenn ich bei Google nur den JSON-Platzhalter eintippe, landete ich auf dem JSON-Platzhalter-Punkttyp code.com. Wenn ich ein wenig nach unten scrolle, findest du diesen Abschnitt mit einem Beispiel. Also kopiere ich das einfach und füge es in mein NodeJs-Skript ein. Wenn ich versuche, die Datei auszuführen, sehen Sie, dass Fetch nicht definiert ist, da Fetch wieder nur in der Browserumgebung verfügbar ist. Es ist Teil von Browser-Web-APIs. Es ist nicht nativ in Node.JS implementiert. Deshalb funktioniert dieser Code nur im Browser. Also habe ich wieder kopiert, ich gehe zur Browserkonsole, oder? Und hier führe ich den Code aus. Also lasst es uns aufschlüsseln. Was passiert hier? Was also abgerufen wird, geben wir zunächst eine URL zu dieser Funktion an, und diese Funktion sendet eine Anfrage an diese URL und gibt uns die Antwort zurück. Dieser Punkt-Abruf ist eine Funktion, die ein Versprechen zurückgibt. Deshalb müssen wir die Punktdichte-Syntax verwenden um dieses Versprechen zu lösen. Fetch sendet also eine Anfrage nicht blockierend an die URL im Hintergrund. Und sobald die Antwort für diese Anfrage fertig ist und der Browser bereit ist, damit umzugehen, dieses Versprechen gelöst, dieser Anruf hinten los und wir erhalten Zugriff auf das Antwortobjekt. Und wie Sie sehen können, ist dies unser Nutzlastsinn für uns zurück vom Server. Und das ist das Versprechen, das anhängig war Sobald es kalt war und sobald es mit dem ersten Punkt gelöst wurde, sehen Sie, dass der versprochene Zustand jetzt erfüllt ist. Wie ich bereits erwähnt habe , wird diese Anfrage nicht blockierend bearbeitet. Das bedeutet, dass Dan nach 10 Sekunden auf nicht blockierende Weise ausgelöst wird, wenn diese Anfrage bis zu 10 Sekunden dauert , dieser Rückruf innerhalb des ersten Punktes . Aber wie lautet diese Antwort hier? Versuchen wir, dieses Beispiel ein wenig neu zu schreiben. Und anstatt Response JSON aufzurufen, gehen wir einfach zum Antwortobjekt console.log , das wir hier haben. Und wie Sie sehen können, hat das Antwortobjekt etwas Kumpel, Kumpel benutzte Header. Nun, dieses Antwortobjekt repräsentiert die Antwort des Servers. Und für dieses Objekt haben wir die Punkt-JSON-Methode, die wir für dieses Objekt aufrufen müssen, um die Nutzlast im JSON-Format zu erhalten. Wenn wir also nur auf diese URL in einem separaten Tab zugreifen wollen , oder? Das passiert alles wie manuell. Wir machen es manuell mit dem Suchfeld des Browsers, aber um es programmgesteuert zu tun, würden wir fetch verwenden und dann die Punkt-JSON-Methode aufrufen , die für das Antwortobjekt verfügbar ist. Diese aber JSON-Methode ist auch die Cerence ein Versprechen. Da es sich jedoch um eine einzige Aktion innerhalb dieses Rückrufs handelt, der Wert dieses Versprechens wird der Wert dieses Versprechens automatisch gelöst, und es ist der Rückgabewert aus diesem Rückruf. Was hier passiert, ist, dass innerhalb des ersten Punktes dann response.data nicht Methode aufgerufen wird , dieses Versprechen wird gelöst und es wird zurückgegeben. Ab dem ersten Punkt und dann Callback , da dies die Kurzschrift für Pfeilfunktionen ist, wissen wir bereits, dass der Rückgabewert der Dodge JSON-Methode als erstes Argument in der folgenden dann verfügbar sein wird deshalb haben wir hier ein Argument namens JSON. Du kannst es benennen, wie du willst, und dann trösten wir ihn einfach. Wenn wir dieses Beispiel ausführen, werden wir daher unsere Nutzlast sehen. Aber dieses Mal haben wir es programmgesteuert gemacht, anstatt Browser zu gehen und einfach auf den Euro zuzugreifen. Jetzt geschieht dies alles programmgesteuert mit der im Browser verfügbaren Fetch-API. Großartig. Ich würde sagen, es geht um Versprechen, aber es gibt noch eine Sache. Wir haben auch etwas namens async erwartet. Und asynchrone Wartezeit ist nur eine alternative Syntax zur Punkt-dann Syntax, da wir mit mehreren Versprechen gleichzeitig arbeiten werden , wird die Punktpunktsyntax irgendwann wirklich chaotisch. Deshalb ist eine Alternative zu dieser Syntax asynchron erwartet. Mal sehen, wie es aussieht, und versuchen wir, dieses Beispiel mit fetch mit async await neu zu schreiben . Zunächst einmal ist die asynchrone await-Syntax nur innerhalb einer Funktion verfügbar. Das bedeutet, dass wir eine Funktion erstellen müssen, um es verwenden zu können. Also erstelle ich einfach eine neue Funktion. Nennen wir es Anfrage senden. Und um die asynchrone await-Syntax innerhalb dieser Funktion verfügbar zu machen, müssen wir diese Funktion als Senke markieren. Also asynchrone Funktion sende Anfrage, wenn es eine Pfeilfunktion war, Const, sagen wir Anfrage senden. Es wäre so. Kurz vor der Pfeilfunktion würden wir das async-Schlüsselwort eingeben, aber lassen Sie uns die reguläre Funktionssyntax beibehalten , damit wir das wissen. Um dieses Versprechen zu lösen, müssen wir den Punkt Dan aufrufen und einen Rückruf innerhalb der Async-await-Syntax bereitstellen . Wir verwenden keinen Punkt, dann verwenden wir das Schlüsselwort await. Warte auf dich. Deshalb heißt der Syntaxname async await, denn nun, es sind nur zwei Schlüsselwörter, asynchron, um die Funktion zu markieren, die mit async verwendet werden soll, auf Syntax und ein Gewicht warten, um das Versprechen zu lösen. Ich rufe einfach Fetch an. Lass es mich kopieren. Hol. Und um darauf zu warten, dass dieses Versprechen gelöst wird, muss ich einfach ein Gewicht nach vorne legen und dies wird den Punkt ersetzen, dann wird er vor einer Wartezeit wieder genannt, ich muss den Ergebniswert aus diesem Versprechen unterschreiben über Apple zum Beispiel wird dies Antwort gleich sein warten, holen. Und das Gleiche werden wir mit der JSON-Methode machen. Jetzt haben wir Zugriff auf das Antwortobjekt. Und dann erstellen wir die neue Variable JSON. Und es wird erwartet Response Dot JSON, der auf dem Antwortobjekt verfügbar ist. Wenn Sie das Schlüsselwort await nicht verwenden, ist die JSON-Variable das Versprechensobjekt, genau wie Sie es die JSON-Variable das Versprechensobjekt, am Anfang des Videos gesehen haben. Das ist nicht das, was wir wollen. Wir wollen den Ergebniswert aus diesem Versprechen nur , wenn ich das await-Schlüsselwort entfernen werde , oder? Und wenn ich mit dem Mauszeiger auf die Variable fahre, sehe ich Versprechen, denn dies ist das Versprechensobjekt. Aber wenn ich warte, werde ich welche haben, was bedeutet, dass diese Variable jeden Wert enthält, aber es ist definitiv kein Versprechensobjekt. Jetzt werden wir versuchen, JSON zu konsolenprotokoll. Und dieser Code wird diese drei Zeilen einfach vollständig ersetzen. Ja, es ist ein bisschen mehr Zeilen, aber diese Syntax ist einfacher zu lesen. Die asynchrone await-Syntax basiert auf Versprechungen, und ihre Absicht ist es, Versprechen zu machen eher wie normaler synchroner Code auszusehen. Weil Sie sehen können, können wir diesen Code Zeile für Zeile lesen , anders als bei Punkt, dann ist ein Knoten , der hier zeigt, die zweite Codezeile, oder? Zeile Nummer sieben wird nicht vor den Ergebnissen der Zeile 6 ausgeführt , da wir das Schlüsselwort await verwenden. Dies bedeutet, dass, wenn diese Codezeile, Versprechen 10 Sekunden dauert, um ausgeführt zu werden, der Code nicht geht weiter. Es wird alle zehn Sekunden warten, bis sich das Versprechen gelöst hat, weil wir das await-Schlüsselwort verwenden, das Versprechen wartet. Das Versprechen löst sich und erst dann geht die Hinrichtung weiter. Ich hoffe, es ist klar zu überprüfen, ob wir die Funktion aufrufen und diesen Code im Browser ausführen lassen . Und Sie werden sehen, dass wir genau das gleiche Ergebnis haben werden. Wir werden unsere Nutzlast sehen , die wir vom Server erhalten. Okay, ich schätze, das ist alles für dieses Video. Und ich weiß, dass es wirklich schwer war , diese Menge an Informationen zu verstehen. Es war sehr verwirrend, aber vertrau mir, es ist nicht so kompliziert, wie es scheinen mag. Wir werden das Thema noch einmal in unseren React-Projekten anhängen . Und hier sehe ich dich das nächste Mal. Tschüss. 33. ECMAScript: Hey, in diesem Video möchte ich über atmosphärische Module in der Umgebung Node.JS sprechen , wir wissen bereits, dass es ein natives Modulsystem gibt , das als Common GS bezeichnet wird. Es verwendet die Required- und Modul-Export-Syntax , um etwas aus einem Modul in der Browserumgebung zu importieren und zu exportieren einem Modul in der Browserumgebung Wir haben auch ein natives Browsermodulsystem , das als Skript bezeichnet wird. Module und atmosphärische Module verwenden Import- und Exportsyntax. Nodejs-Community drängt Ackman Script-Module dazu, in Node.JS implementiert zu werden, um CommonJS zu ersetzen, da Ekman Script-Module bequemer und umfassender sind. Und schließlich haben wir Tools entwickelt, die es uns ermöglichen, ACML Script-Module in der Umgebung Node.JS ohne direkte Unterstützung für atmosphärische Module in der Umgebung Node.JS zu verwenden Umgebung Node.JS ohne direkte Unterstützung für atmosphärische Module in , und modern JavaScript sehen Sie ECMO Script-Module. Und selten würde ich sagen, du würdest CommonJS sehen. In diesem Video möchte ich über den Import und Export von atmosphärischen Modulen sprechen , da es einige wichtige Aspekte gibt , die wir über sie verstehen müssen. Lassen Sie uns zunächst zwei Dateien erstellen. Also benenne ich file.js in file.js MGS um , um ACML Script-Module nativ in der Node.JS Umgebung zu verwenden . Dann erstelle ich eine zweite Datei namens Second MGS. Und ab dem zweiten MGS exportiere ich ein paar Dinge. Also erstelle ich zuerst eine Variable namens Five, und ich exportiere fünf direkt daneben. Ich exportiere Const 10. Und ich werde es so angeben. Siehst du den Unterschied? Also habe ich zuerst eine Variable erstellt, dann habe ich sie exportiert. Und hier ist nur ein Einzeiler, im Grunde das Gleiche wie oben. Vielleicht exportieren wir etwas anderes. Exportieren Sie const. Mein Name wird Andrew sein. Und ganz am Ende werde ich den Export Standard setzen und dieses Mal lass es einfach so einkaufen. Wie Sie sehen können, haben wir zwei Arten von Experten. Wir haben Exporte benannt und haben einen Standardexport. Als Aqua Script-Module gibt es zwei Arten von Experten, die benannt und standardmäßig benannt sind. Es kann nur einen Standardexport in einem Modul und so viele benannte Exporte geben, wie Sie möchten. Nun, wie können wir all diese tatsächlich importieren. Wenn ich hier zu File MGS gehe, muss ich etwas aus dem zweiten MGS importieren eingeben. Großartig. Was soll ich hier liefern, um 5 zu importieren? Nun, die Sache ist, dass jedes Modul sein eigenes Exportobjekt hat, das Expertenobjekt für zweite MGS wird so aussehen. Also erforschen wir zuerst fünf, oder? Was unser benannter Experte sein wird, denn nun, wir haben die Bibel fünf genannt und wir exportieren Variable mit dem Namen fünf. Fünf werden also fünf sein, dann dieselbe Breite, 10 und dasselbe mit meinem Namen. Dies sind alle unsere benannten Exporte. Am Ende haben wir den Export Default Shot, Standardexperten . Sie haben keinen Namen. Das liegt daran, dass sie Standard sind. Sie exportieren nur einen Wert. Sie können sehen, dass ich keinen expliziten Namen für eine Zeichenfolge scharf erstellt habe, oder? Es ist keiner Variablen zugewiesen, es wird nur standardmäßig exportiert, atmosphärische Module hängen diesen Standardexport tatsächlich unter dem Standardschlüssel an das Exportobjekt an das Exportobjekt an, genau so. Irgendwann haben wir ein Objekt wie dieses. Das exportieren wir aus zweiten Mgs. Wenn ich jetzt 5 importieren möchte, kann ich object is structuring verwenden. Warum? Weil gut, wir exportieren ein Objekt. Auch hier hat jedes Modul ein Expertenobjekt, und da es sich um ein Objekt handelt, können wir die Objektzerstörung verwenden. Deswegen. Hier neben dem Import werde ich geschweifte Klammern für diese Strukturierung setzen. Und ich importiere 5, richtig, gab den Schlüssel an, den ich importieren wollte 5. Außerdem möchte ich vielleicht meinen Namen, fünf und meinen Namen holen . Lass uns console.log fünf und meinen Namen. Und lassen Sie uns das Skript ausführen, um das zu überprüfen. Und wir sehen fünf und Andrew. Was stimmt. Was ist jedoch mit unserem Standardexport hier drüben? Versuchen wir, den Standardwert zu importieren. Eigentlich weniger Zerstörungsausfall. Wenn ich das mache, habe ich sofort einen Syntaxfehler. Die Sache ist, dass wir dieses reservierte Standardschlüsselwort nicht einfach verwenden können. Dies ist nicht zulässig, um den Standardexport zu importieren, wir müssen die Strukturierung nicht verwenden. Stattdessen. Wir müssen ihm nur unseren eigenen Namen für den exportierten Wert geben. Lass es also mein Standard-Importkomma sein und dann alle benannten Exporte. Wenn wir also nicht alle diese genannten Exporte benötigen, können wir nur den Standardexport importieren, was scharf sein wird. Also werde ich diesen Strukturierungsteil entfernen und nur meinen Standartimport behalten. Lassen Sie mich nun versuchen, meinen Standartimport in der Konsole zu protokollieren. Sie werden scharf sehen und es spielt keine Rolle welchen Namen ich für meinen Standartimport gebe. Es spielt keine Rolle, weil wir es anfangs tun, es hat keinen Variablennamen. Im Gegensatz zu unseren benannten Experten haben sie alle einen aussagekräftigen Namen. Wir exportieren die Variable mit dem Namen fünf. Deshalb können wir sie einfach umbenennen, wenn wir diese Variable importieren , oder? Wir können einfach 55 großgeschrieben setzen , existiert nicht für das exportierte Objekt. Wir haben fünf, was Kleinbuchstaben ist. Deshalb müssen wir die gleichen Regeln strikt befolgen wie bei der Objektzerstörung. Wir müssen dieselben Namen verwenden, die wir exportieren. Ein anderer Anwendungsfall wäre, wenn wir all dies als ein einziges Objekt importieren müssen. Genau wie Sie hier sehen, möchten wir nicht wie benannte Exporte und Standardexport trennen , einfach so. Wir wollen sie nicht so trennen. Stattdessen wollten wir das eine ganze Objekt erhalten. In diesem Fall können wir Asterix als und dann den Namen des Objekts importieren . Also lass es das zweite Modul sein. Und jetzt, wenn ich das zweite Protokoll abbrechen will, werden Sie sehen, dass ich im Grunde mein Exportobjekt habe . Ich habe 5, 10, meinen Namen und Standardwert. Und um auf den Standardexperten zugreifen zu können, muss ich jetzt tatsächlich auf den Standardschlüssel verweisen, oder? Du wirst scharf sehen. Wenn ich auf 10 zugreifen muss, muss ich 10 verwenden. Was wir gerade gemacht haben, haben wir das gesamte Modul in dieses zweite Modul importiert , die Schlagschale, würde ich in der Praxis sagen, dies ist in der Praxis in der realen Welt weniger üblich. Die meiste Zeit werden wir entweder einen Standardexport oder einen benannten Export sehen . Sie werden in der realen Welt viel benutzt. Wir werden tatsächlich entweder so sehen 510 oder wenn ein Modul nur den Standardexport hat, würden wir nur diesen Standartimport verwenden. Und wir würden es einfach so benutzen. Nun, da wirst du es im Grunde sehen. Es ist nicht so schwer, diesen Teil zu verstehen. Sie müssen nur immer daran denken, dass es zwei Arten von Exporten gibt . Als Standardexport und benannter Export gibt es nur einen Standardexport für ein einzelnes Modul, mit dem Sie den Standardexport hier nicht exportieren können. Wenn ich das versuche, werden Sie sehen, dass ich Syntaxfehlerkennung bereits die Syntaxfehlerkennung deklariert habe. Ich empfehle Ihnen, sich immer daran zu erinnern, dass jedes Modul ein Objekt hat, das exportiert wird und alle benannten Exporte mit diesem Objekt zusammengeführt werden. Es ist einfacher, sich daran zu erinnern, dass Sie dieses Objekt importieren müssen. Die Verwendung von Objekt ist Strukturierung. Ich denke, ECMO Script-Module machen Spaß und ich mag sie wirklich. Und ich hoffe, U2 wird dich im nächsten sehen. 34. ECMAScript oder JavaScript: Hey, das wird kurz sein. Ich möchte nur den Unterschied zwischen einem Skript und JavaScript klären . Sie haben wahrscheinlich viele Begriffe gesehen, wie ES6 ist fünf, ES 2015. Nach diesem Video wirst du den Unterschied kennen. Um nach der Antwort zu suchen, verwende ich Google und tippe einfach ECMO-Skript oder GS ein. Und Google wird mir den Unterschied sagen. Wie wir aus dem ersten Pop-up sehen können, ist die ECMO-Skriptspezifikation ein Blueprint zum Erstellen einer Skriptsprache. Und JavaScript ist eine Implementierung dieses Blueprints. Und Sie können verschiedene Variationen dieser Aussage über all diese Links sehen. Um diese Aussage schnell zusammenzufassen, kann ich sagen, dass das ECMO-Skript eine Reihe spezifischer Kationen ist , die JavaScript implementiert. Es bedeutet, dass AGMA-Skript eine Art Skript für einen Film ist , in dem Film JavaScript ist, so einfach ist. Für weitere Informationen können Sie zur Wikipedia-Seite für das ECMO-Skript navigieren . Lassen Sie mich diese Seite öffnen und von hier aus können wir verschiedene Versionen von Acme Scrape sehen. Die gebräuchlichste Version des ACML-Skripts ist wahrscheinlich ja, 2015, das ES6 heißt, da es sich um die sechste Ausgabe des ECMO-Skripts handelte. Wenn Sie nach unten scrollen, können Sie lesen, was genau für diese bestimmte Version erstellt wurde . Und es gibt auch einen Begriff namens ES. Wie Sie sehen können, ist dies ein dynamischer Name, der sich auf die nächste Version bezieht, die zum Zeitpunkt des Schreibens enthalten wird. Jetzt wissen wir, dass jeder, der JavaScript als ECMO-Skript bezeichnet , eine richtige Person ist. Denn jetzt wissen wir, dass diese beiden im Grunde dasselbe sind. Ich glaube, das war's. Weitere Informationen finden Sie in Wikipedia oder Google. Wir sehen uns im nächsten. 35. Was ist React?: Hey, endlich fangen wir an, über React zu reden. Diese kurzen kommenden Videos werden auf die Theorie und Konzepte von React eingehen. Zögern Sie nicht, diese Serien jederzeit in Zukunft zu referenzieren . Los geht's React ist eine Bibliothek zum Erstellen von Benutzeroberflächen. Es kann verwendet werden, um Websites, mobile Apps und sogar Desktop-Apps zu erstellen . Der einfachste Weg, um zu reagieren, besteht wahrscheinlich darin im Internet zu reagieren, um Websites zu erstellen. In diesem Video werde ich aus Sicht des Webs sprechen, reagiert Ziel ist es, Benutzeroberflächen mit so genannten Komponenten zu erstellen . Für Websites ist es nur React oder React für das Web. Für mobile Apps ist es React Native für Desktop-Apps, es heißt Elektron. React funktioniert nur auf der Ansichtsebene. Dies bedeutet, dass React nicht dazu zwingt, wie Sie Ihre App erstellen sollten. React erzwingt einfach seine eigene Logik und diktiert, wie Sie die zugrunde liegenden HTML-Elemente manipulieren sollten . Der Rest liegt in der Vergangenheit an dir. Hier, um 20 und 10, wurde jQuery viel verwendet, um HTML über JavaScript zu manipulieren. Heutzutage ist es jedoch nicht nötig, jQuery zu verwenden. Da React nur auf die Bibliothek ist, kann sie in jede vorhandene App integriert werden , um eine Benutzeroberfläche zu erstellen. Beispiele für React-Websites sind Facebook und Netflix. Discord verwendet React für alles, um seine Website, mobile App und sogar ihre Desktop-App mit React zu erstellen mobile App und sogar ihre Desktop-App . Ziemlich beeindruckend, nicht wahr? React ist kein Framework, das von anderen Teilen der Anwendung besteht mit anderen Tools und Bibliotheken erstellt werden muss. Und Sie werden sehen, dass, sobald wir mit der Codierung begonnen haben, zunächst nur für Websites verwendet wurde , die vollständig von JavaScript verwaltet werden und eher mobile Apps füllen sollen. Aber im Moment, React Community, hat es viele Tools und Frameworks geschaffen , um zu reagieren. Daher sind wir heutzutage in der Lage, mit React jede Art von Website zu erstellen. Aber da ist es serverseitiges Rendern, einseitige App, statische Webseiten oder vielleicht eine Hybridanwendung. Und du hast wahrscheinlich andere Lösungen gesehen, wie Vue, JS, Svelte oder vielleicht sogar Angler. Sie alle basieren auf Komponenten und erzielen schließlich das gleiche Ergebnis. Es ist wirklich schwer zu sagen, welches man wählen soll. Etwas ist einfacher. Etwas ist schwieriger. Wenn Sie immer noch mit der Wahl zu kämpfen haben, würde ich empfehlen, das mit einem ansprechenderen Namen oder Logo auszuwählen , so einfach ist. Aber in unseren Projekten werden wir React kennenlernen. Bleiben Sie dran, denn es sind nur noch ein paar Theorievideos übrig bevor wir bis zum nächsten Teil in den Codierungsteil kommen. 36. Komponentenbasierter Ansatz: Hey, dort Im vorherigen Video habe ich Komponenten und komponentenbasierten Ansatz erwähnt. Aber was ist die Komponente? Eine Komponente ist nur ein HTML-Block, der in Zukunft nicht reduziert werden kann. Komponentenbasierter Ansatz besteht darin, wenn eine Anwendung mit Komponenten erstellt wird, sollten Sie sich eine Komponente besser als ein benutzerdefiniertes, vom Benutzer erstelltes HTML-Tag vorstellen . Darüber hinaus können Komponenten auch Logik und Status enthalten. Beispielsweise kann eine Komponente eine Schaltfläche sein , die die Farbe ändert. Nach dem Anklicken ändert die Schaltfläche ihre Hintergrundfarbe. Wir können diese Komponente als Farbschaltfläche benennen. Und später in irgendeinem Teil des HTML-Codes, Verwenden Sie die Schaltfläche Farbe so oft wir möchten. Dies ist im Grunde das, was wir mit HTML-Tags machen. Die Komponenten unterscheiden sich nicht. Es ist sinnvoll, sie als Bausteine für die App zu betrachten . komponentenbasierte Ansatz bildet einen Baum von Komponenten. Zusätzlich zu diesem Baum gibt es eine Root-Komponente, die andere Komponenten in der React Root-Komponente verschachtelt , die fast immer als App bezeichnet wird, oder andere Komponenten sind innerhalb der App-Komponente verschachtelt. Komponenten, die oben liegen, werden als Komponenten der obersten Ebene bezeichnet. Dies sind normalerweise Seiten. Komponenten, die höher im Baum erscheinen , werden Eltern genannt. Sobald das unten lag, werden Kinder genannt. Werfen wir einen Blick auf die offizielle Facebook-Seite. Facebook ist der Schöpfer von React und deshalb ist es bestmögliche Beispiel, das man beobachten kann. Ich werde versuchen, den Raum in Komponenten aufzuteilen , um Ihnen eine Grundidee zu geben: Los geht's. Die gesamte Website selbst ist die App-Komponente. Oben hätten wir Navbar-Komponente und Navbar in der Mitte, es gibt eine Navigationskomponente und jede Schaltfläche darin ist auch eine andere Komponente. Auf der rechten Seite kann es sich um eine profilierte Navigationskomponente handeln, bei der jede ähnliche Schaltfläche dieselbe Komponente ist , aber mehrmals wiederverwendet wird. Probieren Sie es selbst aus und teilen Sie das unten stehende Dropdown-Menü in Komponenten unter der jetzt Leiste auf, es kann eine Homepage-Komponente sein. Die Homepage enthält drei Komponenten. Sidebar links, Seitenleiste rechts und Feed in der mittleren Seitenleistenkomponente enthält Menü. Feed-Komponente enthält eine Liste von Beiträgen und die Seitenleiste auf der rechten Seite enthält etwas anderes. Es liegt ganz an den Entwicklern Komponenten zu strukturieren und zu erstellen. Es ist sicherlich möglich, das gesamte Markup und die gesamte Logik in einer einzigen Komponente beizubehalten Logik in einer einzigen Komponente ohne andere Komponenten zu erstellen. Aber dann wäre die Idee eines komponentenbasierten Ansatzes völlig gefährdet. Und es wird das Gleiche sein, als überhaupt keine Komponenten zu verwenden. Am Ende des Tages enden wir mit einem Baum von Komponenten. Und dieser Baum hat immer eine Richtung von oben nach unten. Wenn es Änderungen an einer übergeordneten Komponente gibt, sind alle untergeordneten Elemente dieser Komponente ebenfalls betroffen, weil sie Teil davon sind. Lassen Sie uns abschließend schließen. Die Entwicklung mit React basiert auf einem komponentenbasierten Ansatz. React App kann als Komponentenbaum visualisiert werden. Komponenten sind wiederverwendbare Teile der App. Vorteile von Komponenten sind Wiederverwendbarkeit und Konsistenz in der gesamten Anwendung. Ob Usability User Post Component an einer beliebigen Stelle in der App eingefügt werden kann beliebigen Stelle in der App eingefügt , war nur eine einzige Codezeile. Mit Konsistenz verhält sich die Benutzerpostkomponente unabhängig von der Seite oder dem Ort, an dem sie verwendet wird, immer genau gleich . Nun, das war's. So werden heutzutage alle modernen Apps mit Komponenten erstellt. Ich hoffe, es ergibt Sinn. Cia. 37. Funktionen vs. Kurse: Hi, React. Es gibt zwei Arten von Komponenten für uns, klassenbasierte und funktionelle Abfälle. Sie unterscheiden sich in der Syntax und der Art und Weise, wie wir Daten in ihnen manipulieren. Vor React Hooks hatten wir keine andere Wahl, Kompetenz unter Verwendung von Klassen in der Gegenwart zu schaffen, die Situation ist etwas anders. Mit React Hooks verwenden wir Funktionen, um Komponenten zu erstellen. React-Hooks sind nur in funktionsbasierten Komponenten verfügbar , weshalb Funktionen Komponenten vereinfachen. Die Syntax ist leichter und einfacher zu verstehen. In unseren Projekten werden wir React Hooks verwenden, was bedeutet, dass wir mit funktionsbasierten Komponenten arbeiten werden. Nur. Klassenbasierte Komponenten werden immer seltener verwendet. Es ist jedoch möglich, dass Sie manchmal klassenbasierte Komponenten sehen, aber das ist völlig in Ordnung. Das React-Team hat seine Einsätze an React Hooks und sie glauben , dass Hooks die Zukunft sind. Nach Abschluss des letzten Projekts können Sie klassenbasierte Komponenten lesen , und Sie werden keine Probleme beim Übergang zwischen Funktionen und Klassen haben keine Probleme beim Übergang . Ich hoffe, es ergibt Sinn. Wir sehen uns im nächsten. 38. React: Hallo nochmal. Mal sehen, wie React unter der Haube funktioniert. Am Beispiel einer einseitigen Anwendung, dem besten Weg, an eine React-App zu denken, als ob eine Struktur von Komponenten in React wäre, gibt es eine Sache, die als Befestigungspunkt bezeichnet wird , in den die React-Anwendung eingefügt wird oder besser zu sagen, standardmäßig eingehängt, ist es ein div-Tag mit ID unhöflich. Oben im Baum befindet sich die App-Komponente, die der Wrapper für alle Komponenten in der App ist. In der App-Komponente befinden sich Komponenten der obersten Ebene. In ihnen legen Sie verschachtelte Komponenten und so weiter bis zur sehr verschachtelten Komponente. Wenn wir einen Moment daran denken würden, ist es ziemlich dasselbe wie die HTML-DOM-Struktur, oder? Das Document Object Model oder DOM ist die Darstellung der HTML-Seite in Form eines Tag-Baums. Dom ist, wie Browser HTML-Markup sehen und interpretieren. Wenn wir grundlegende Dinge in JavaScript wie document.getElementById-ID , ist dieses Dokumentobjekt Teil der DOM-API, die vom Browser bereitgestellt wird. React erstellt in der Speicherdarstellung des Komponentenbaums namens virtuelles DOM. Es ist das gleiche wie das DOM des Browsers, aber es wird nur intern von React verwendet. Wenn React App, die in der Seitenkomponentenstruktur gerendert wird , aus der virtuellen dominanten Präsentation in HTML-Markup übersetzt wird. Dieses HTML-Markup wird dann in das Montageelement auf der Webseite eingefügt. Denken Sie daran, dass all dies über JavaScript geschehen wird. Wenn Daten Komponenten sind, die aktualisiert werden müssen, arbeitet React immer mit dem virtuellen DOM an erster Stelle. Es nimmt den zuvor erfassten Status des virtuellen DOM an, vergleicht es mit dem neu erstellten mit Updates und berechnet den Unterschied. Wenn es einen Unterschied gibt, berechnet React, welche Daten und Komponenten aktualisiert werden müssen. Und diese Änderungen werden als 3D-Render bezeichnet. Jeder Render repräsentiert im Grunde genommen virtuellen DOM-Status, den virtuellen DOM-Status, der Prozess der Berechnung der Differenz zwischen Rendern wird als Abstimmung bezeichnet. Und der Algorithmusname für diesen Prozess lautet React Fiber. Einfach ausgedrückt erkennt React Fiber, was zwischen den Re-Rendern aktualisiert werden muss. Sie haben vielleicht eine Frage, warum verwenden Sie virtuelles DOM? Fügt es nicht einen zusätzlichen Schritt und mehr Komplexität hinzu? Nun, es kommt darauf an. Virtuelles DOM ändert sich oder leichter , da sie sich alle im Speicher befinden, im Gegensatz zu Änderungen in einem echten DOM Wenn das HTML-Markup geändert wird, berechnen Browser normalerweise das Layout und streichen die Webseite neu. Es ist besser, 100 Updates in virtuellem DOM zu haben, was schließlich zu einem einzigen echten DOM-Update und einem Patch führt einem einzigen echten DOM-Update und einem Patch , das größer ist, als alle 100 Updates direkt auf echtes DOM anzuwenden . Wenn wir durch eine Website unter der Haube navigieren, wird HTML ständig aktualisiert. React stellt sicher, dass diese Aktualisierungen so effizient wie möglich durchgeführt werden. Die Idee hinter virtueller Kuppel besteht darin, die Anzahl der echten DOM-Updates zu reduzieren. Ich weiß, dass es schwierig sein könnte , diese Menge an Informationen wahrzunehmen, aber es ist völlig in Ordnung. Sie sind nicht verpflichtet, alle Details zu kennen. Jetzt wissen wir, wie React intern funktioniert. Das ist einer, bei dem ein fehlendes Stück über seine Architektur, diese Erbsen sind Einwegdatenfluss , der als Fluss bezeichnet wird. Flux ist der Name einer reagierten internen Architektur. Flux impliziert, dass Daten in der App immer in eine Richtung von oben nach unten fließen. Wenn beispielsweise Daten innerhalb einer Komponente aktualisiert werden, die Komponente und alle ihre untergeordneten Elemente ebenfalls gerendert. Sollten Kinder aktualisiert werden oder nicht, ist die Arbeit für die zuvor erwähnte React Fiber, den Algorithmus, der berechnet was genau aktualisiert werden muss. Tatsache ist jedoch, dass Updates von übergeordneten Komponenten zu untergeordneten Komponenten verlagert werden. Es ist unmöglich, dass Datenfluss von unten nach oben geht. Ich denke, das werden Sie spüren können , wenn wir React-Code schreiben. Alles klar, lassen Sie uns unter der Haube zusammenfassen, react verwendet eine eigene HTML-DOM-Darstellung namens virtuelles DOM. virtuelle DOM-Ziel ist es, die Anzahl der realen DOM-Updates zu reduzieren . React Core-Algorithmus heißt React Fiber und seine Hauptaufgabe besteht darin, zu berechnen, was genau zwischen den Re-Rendern aktualisiert werden muss . Architekturdesign heißt Flux, was impliziert, dass die Datenflüsse nur in eine Richtung von übergeordneten Komponenten zu untergeordneten Komponenten. Nun, das sind alle Informationen über React. Mach dir keine Sorgen, wenn das verwirrend war. Sehen Sie sich einfach das Video an oder suchen Sie bei Bedarf nach weiteren Informationen. Wir sehen uns als Nächstes. 39. Boilerplates: Hey, dieses Mal möchte ich darüber sprechen wie wir mit der Entwicklung einer neuen React Web App beginnen können. In diesem Video werde ich keine anderen Online-Plattformen wie CodePen für die direkte Entwicklung im Browser betrachten wie CodePen für . Weil diese Plattformen nur als Spielplätze verwendet werden oder normalerweise nur um den Code schnell mit dem grundlegenden Setup zu teilen. Um zu verstehen, wie moderne JavaScript-Apps erstellt werden, müssen wir verstehen, was unser Projekt Butler ist ein Projekt Bundler ein Tool, das den gesamten Quellcode, Skripte, Stile, Bilder, Prozesse, all das, und erstelle ein Projekt gebaut. Project Built ist eine gebündelte minifizierte Version des Quellcodes, die für maximale Effizienz optimiert ist. Das sind Tonnen von Projekt Bundler Sound sind die häufigsten sind Webpack, Roll-up und Paket. Alle modernen JavaScript-Projekte werden von diesen Tools abgedeckt. Großartig, Kommen wir zu unserer Hauptfrage zurück, wie wir mit der Entwicklung einer neuen React-App beginnen können. Es läuft schließlich auf drei Durchgänge hinaus. Die erste Möglichkeit, eine React-App zu erstellen, besteht darin , alle Build-Tools wie Webpack für React von Grund auf neu einzurichten und zu konfigurieren . Die zweite Möglichkeit besteht darin, eine Projektvorlage zu verwenden. Wir haben Tools entwickelt, die bereits für die React-Entwicklung konfiguriert sind. Und der dritte Weg besteht darin, ein React-Framework wie nächste GS oder Gatsby zu verwenden . Es gibt keine richtige Antwort darauf, welche Sie wählen sollten. Es hängt alles davon ab, nach welcher Konfiguration Sie suchen, persönlichen Vorlieben, Besonderheiten und so weiter. Alles manuell einzurichten und Projekt Butlers wie Webpack von Grund auf neu zu konfigurieren , ist heutzutage selten zu sehen. Fast jedes Mal würden Sie entweder eine Vorlage oder ein Framework verwenden. Vorlagen werden übrigens oft als Boilerplates bezeichnet, was bedeutet, wann immer Sie sehen, wo die Boilerplate nicht ausflippt, ist es nur eine andere Möglichkeit, Word-Vorlage zu sagen. Es gibt viele verschiedene Community erstellte React-Projekt-Boilerplates, die eine Vorlage kopieren und anfangen nichts mehr zu entwickeln. Die bekannteste React-Boilerplate ist wahrscheinlich die Create React App, die vom React-Team unter der Haube verwaltet wird vordefinierte Webback-Konfiguration verwendet. Sie könnten versucht sein, nur Create React App zu verwenden. Es ist jedoch wichtig sich daran zu erinnern, dass die Create React App nicht die einzige Möglichkeit ist , React-Apps in der Gegenwart zu entwickeln, es gibt viele großartige Alternativen. Derzeit sind VDD und Snowpack ziemlich beliebte Tools für Front-End. Eine andere Möglichkeit, mit React umzugehen besteht darin, ein React-Framework zu verwenden. Frameworks sind derzeit sehr beliebt , besonders als nächstes, ja, aber ich würde sagen, dass es besser ist, mit dem Lernen zu beginnen, ohne ein Framework zu reagieren. Da Frameworks für ChES Frameworks spezifische Funktionen und Rollen in unseren Projekten enthalten, werden wir bereits konfigurierte Vorlagen und Build Hills verwenden . Welche? Setzen Sie sich selbst ein, sobald Sie in die Projekte einsteigen, sehen Sie andere 40. 1 TicTacToe Projektübersicht: Hallo ihr alle. Willkommen im Bereich Tic Tac Toe. Dies wird ein kurzes Einführungsvideo sein ein kurzes Einführungsvideo dem Sie eine Vorschau des Projekts anzeigen können. Das Projekt wird das Tic Tac Toe-Spiel sein, das Sie jetzt auf Ihrem Bildschirm sehen können. Wir können auf Quadrate klicken. Wir können das Spiel spielen. Immer wenn wir einen Gewinner haben, wird die Gewinnkombination hervorgehoben. Wir werden unterschiedliche aktive Wirkungen haben. Ebenfalls unten ist der Spielverlauf , Spielverlauf , wir durchqueren und sehen können, welche Züge wir gemacht haben, wenn wir auf Quadrate klicken, können wir den Verlauf überschreiben, falls wir die Schaltfläche zum Starten des Spiels benötigen, und ich würde sagen, das ist so ziemlich alles. Obwohl es vielleicht einfach aussieht. Es enthält viele grundlegende Konzepte, die eine gute Grundlage für Ihr React-Wissen bilden. Also lasst uns anfangen. 41. 2 Neues Projekt mit Vite erstellen und konfigurieren: Hallo zusammen. Wir werden endlich mit dem Bau des ersten Projekts beginnen, das Tic Tac Toe sein wird. Das Tool, mit dem wir Tic Tac Toe bauen werden, wird Vite sein. Dies ist die offizielle Vite-Website , die Sie gerade sehen können. Sie können es bei Google finden. Ich klicke auf „Get Started“ und lass uns sehen, was genau Vite macht. Im Grunde ist Vite ein Frontend-Tool, das das Projekt erstellt. Es kann alles sein. Es kann React sein, es kann rohes JavaScript sein oder es kann jedes andere unterstützte Framework sein. Unter der Haube verwendet Vite Rollup. Rollup ist ein Modul-Bundler. Rollup ist im Grunde das Tool, das das Projekt erstellt, und Vite ist die Konfiguration rund um Rollup. Vite ist ziemlich schnell und im Moment sogar sehr beliebt. Lassen Sie uns die Dokumentation durchgehen und zu Ihrem Projekt für die erste Woche scrollen. Wir benötigen Node-Version 14 und höher, aber ich bin mir ziemlich sicher, dass Sie die neueste stabile Version haben , die derzeit 18 ist. Wir können sehen, dass wir mit npm ein neues Projekt erstellen können , indem wir einfach diesen Befehl ausführen. Ich kopiere diesen Befehl und gehe zu CMD. In allen Projekten werde ich Git Bash verwenden, und in VS Code werde ich Git Bash verwenden. Für diesen werde ich jedoch CMD verwenden. Sie können jede andere Shell verwenden. Ich habe mich speziell für CMD entschieden weil Vite uns ein paar Fragen stellen wird und wenn Git Bash als separate Instanz ausgeführt wird, hat es im Gegensatz zu CMD Probleme mit der Interaktivität. Sobald ich diesen Befehl ausführe, stellt Vite mir ein paar Fragen und dann erstelle ich einen neuen Projektordner. Ich werde jedoch einen neuen Projektordner in unserer aktuellen Terminalnavigation erstellen . Im Moment werde ich in CMD navigiert, um meinen Benutzernamen zu sehen. Dies ist ein Benutzerordner, und sobald ich den Befehl Vite ausführe, wird der Projektordner hier in diesem Verzeichnis erstellt . will ich nicht tun. Ich möchte meinen eigenen Projektordnerpfad festlegen. Dafür muss ich zuerst entscheiden, wo ich mein Projekt platzieren möchte. Für mich wird es hier in d_Web sein. Dies ist der Ort, an dem ich mein Projekt platzieren möchte. Zuerst muss ich im Terminal zu diesem Ordner navigieren . In CMD gebe ich den Festplattennamen ein, um die Navigation auf Diskette D zu ändern. Wenn du in Git Bash bist, dann musst du cd d und Doppelpunkt eingeben, dann musst du cd d und Doppelpunkt eingeben, wenn du dich in einer anderen Shell befindest, dann bin ich mir ziemlich sicher , dass du Linux-Shell, wie Bash, oder vielleicht auf Mac, ich bin mir ziemlich sicher, dass du das nicht einmal brauchst. Wie dem auch sei, ich bin auf der D-Diskette, dann tippe ich cd ein, cd steht für Change Directory, und ich gebe einfach cd_web ein. Ich weiß, dass es _web ist, denn wenn ich ls eingebe, ist ls ein Unix-Shell-Befehl um alle Ordner in der aktuellen Navigation aufzulisten. Da CMD jedoch ein Windows-basiertes Terminal ist, muss ich dir verwenden, also ist dir die Befehlsalternative zu einem Less innerhalb von Windows Power Terminal. In D habe ich _web. Das ist genau das, was ich navigiere, also gebe ich cd_web und bumm, jetzt bin ich in diesem Ordner und kann den Vite-Befehl sicher ausführen. Ich werde den kopierten Befehl ausführen. Es hat mich nach einem Projektnamen gefragt, wir werden ihn Tictactoe-vite nennen. Ich drücke „Enter“. Jetzt muss ich ein Framework auswählen. Wir werden React wählen und die Variante wird JavaScript sein. Großartig. Jetzt war der Befehl erfolgreich. Da steht, dass das Gerüstprojekt in _web tictactoe-vite abgeschlossen ist. Führen Sie jetzt cd, npm install, npm run dev aus. Das machen wir in der Abteilung. Wir werden das beenden. Was ich nun tun werde, ich öffne die VS Code-Datei, öffne den Ordner und gehe jetzt zu D web und wähle Tictactoe-vite als Projektordner in VS Code aus. Sobald wir drinnen sind, haben wir hier ein paar Akten. Das allererste , was wir tun werden, die Installation von Abhängigkeiten. Wir haben die Dateien erstellt. Wir haben das Paket json mit einigen Abhängigkeiten bereits aufgeführt, aber wir haben keine davon installiert. Dafür öffne ich integrierte Terminal in VS Code, und hier, was ich tun werde, werde ich Abhängigkeiten installieren, indem ich npm install ausführe. Npm wurde ohne Argumente installiert und scannt das Paket json in der aktuellen Navigation. Meine aktuelle Navigation ist der Tictactoe-Vite-Ordner. Es sucht nach dem Paket json. Es sucht nach darin aufgeführten Abhängigkeiten und Entwicklungsabhängigkeiten, und wenn sie fehlen deinstalliert werden, installiert npm sie. Ich werde diesen Befehl schreiben und warten. Während es sein Ding macht, schauen wir uns an, welche Art von Abhängigkeiten wir hier haben. Standardmäßig haben wir die Abhängigkeiten React und React-Dom installiert. Dies sind Kernpakete von React, also React ist das Kernpaket und React-dom ist das Kernpaket speziell für das Web, da Web das DOM-Modell verwendet. In den Dev-Abhängigkeiten haben wir die Typen React, wir brauchen sie in den Typen react-dom eigentlich nicht. Das ist etwas für TypeScript. Ich bin mir nicht sicher, warum sie reinkommen. Dann haben wir Vitejs Plugin-React und Vite selbst als Tool. Außerdem sehen wir hier viteconfig.js. Da mit Vite jedes Frontend-Projekt erstellt werden kann, muss es erkannt werden. Zuallererst hat Vite fast keine Konfiguration. Wir müssen spezifizieren, wir müssen konfigurieren mit, okay, nimm meine React-Dateien und mach bitte die Magie, und Vite wird es tun. Dafür müssen wir das Plugin installieren, das bereits installiert ist, und dann müssen wir dieses Vite-Plugin in viteconfig hier auflisten. Sie sehen, alles ist bereits für uns konfiguriert. Wir müssen wirklich nichts tun. Wenn Sie mehr über die Vite-Konfiguration erfahren möchten, folgen Sie diesem Link hier. Es ist ziemlich einfach. Wenn ich mein Terminal wieder öffne, können Sie ab sofort hinzugefügte Pakete sehen, alles ist großartig. Zwei weitere Dinge erscheinen hier, package-lockjson und Node-Module. package-lockjson steht also für die Version , die wir gerade installiert haben. Es fängt die spezifische Version des Pakets ab , das wir installiert haben. Dann haben wir Knotenmodule. Knotenmodule sind der Ort, an dem all unsere Abhängigkeiten installiert wurden. Da wir diesen Ordner haben, können wir unsere Skripte jetzt einfach ausführen und sie werden funktionieren. Bevor wir das tun, lassen Sie uns hier noch ein paar Dinge konfigurieren. Wir werden unserem Projekt Eslint und Prettier hinzufügen. Um das zu tun, müssen wir sie zuerst installieren. Ich werde npm install dash dash save-dev ausführen. Save-dev wird npm install anweisen, die Pakete als Entwicklerabhängigkeiten zu installieren, also installiert npm eslint und prettier. Dann müssen wir Konfigurationsdateien für diese beiden erstellen. Sie können sehen, dass nach Abschluss des Befehls sowohl Prettier als auch eslint als Entwicklerabhängigkeiten im Paket json angezeigt werden. Ich werde eine neue Datei.prettierrc erstellen und die andere wird.eslintrc sein. Nun, wie werden wir diese beiden konfigurieren? Wir haben etwas namens Gist. Dieser Link wird mit Ihnen geteilt. In diesem Gist finden Sie.eslintrc - und.prettierrc-Dateien. Dies sind die Konfigurationen , die wir verwenden werden. Wir werden es einfach von hier kopieren und einfach so einfügen. Sie können jede hübschere Konfiguration wählen, die Sie möchten. Dies ist nur meine persönliche Präferenz, die ich speziell für dieses Projekt ausgewählt habe . Sie können alle Werte für Ihre Bedürfnisse ändern. Dann eslint config, ich habe auch von dort kopiert. Es ist jedoch eher interessant als hübscher. Hier machen wir ein paar Dinge. Wir erweitern eslint recommended, die in eslint integrierte Konfiguration. Wir müssen es nicht installieren. Dann erweitern wir Plug-in, React, Recommended und Plug-in React JSX Runtime sowie Prettier. Diese kommen eigentlich aus den Paketen, also diese Pakete müssen installiert werden. Wenn wir hier zu diesem Gist zurückkehren, können wir die Entwicklerabhängigkeiten MD, eslint-config-prettier und eslint-plugin-react finden . Wenn wir hierher gehen, müssen wir sie zuerst installieren. Dies sind die Plug-ins , die wir erweitern und sie erscheinen nicht aus dem Nichts. Sie müssen installiert werden. Ich kopiere einfach den Installationsbefehl für eslint-plugin-react und installiere ihn. Genau das Gleiche werde ich für eslint-config-prettier tun. Was machen die beiden? Das eslint-config-prettier stellt sicher, dass unsere Eslint-Konfiguration und Prettier-Konfiguration nicht miteinander kollidieren. Dieses Paket stellt nur sicher , dass wir nicht auf Missverständnisse zwischen diesen beiden Tools gestoßen sind. Eslint-Plugin-React ist ein ziemlich beliebtes Paket. Nun, im Grunde eine Liste von Regeln für Linting React-Projekte. Die Konfiguration, die wir hier unten haben, habe ich im Grunde Dokumentation der eslint-plugin-react-Seite entnommen. Sie finden ihn hier. Wir erweitern dieses Plug-in um zwei Dinge : das empfohlene Regelwerk sowie die JSX-Laufzeit. JSX-Laufzeit, darauf kommen wir zurück, was das genau ist. Insights-Regeln, ich habe die React-Requisitentyp-Regel deaktiviert, die aus dem Plugin-React-Paket stammt. Der Grund für diese Requisitentypen ist etwas, das wir nicht behandeln werden. Es ist jedoch hier enthalten, sodass wir es nicht wirklich brauchen. Es wird nur unseren Entwicklungsprozess stören, also haben wir diese Regel einfach komplett deaktiviert, wir haben sie abgeschaltet. Der Rest ist so, wie ich es dir gesagt habe, er wurde von hier aufgenommen. Großartig. Lassen Sie uns endlich versuchen, das Projekt auszuführen. In den Skripten sind standardmäßig drei Skripts definiert: dev, build und preview. Dev wird den lokalen Entwicklungsserver betreiben, bauen, wir werden das Projekt erstellen und ich bin mir ziemlich sicher, dass es uns eine Vorschau des endgültigen Produktions-Builds geben wird . Es wird die Produktions-Build-Dateien bereitstellen. Lassen Sie uns weitermachen und das Dev-Skript npm run dev ausführen. Nach einer Sekunde sehen Sie diese Meldung. Jetzt können wir tatsächlich auf diese URL zugreifen , sodass wir sie im Browser öffnen können. Wenn ich hierher gehe, wirst du das sehen. Nun, das ist im Moment unsere React-Anwendung. In diesem Fall hat es einen lokalen Server für uns erstellt und uns den Link bereitgestellt , über den wir auf den Entwicklungsserver zugreifen können. Dies ist der Ort , an dem wir das Projekt vor Ort sehen und entwickeln können . Beenden wir den Befehl, indem wir mehrmals Strg-C drücken . Lassen Sie uns den anderen Befehls-Build ausprobieren und sehen. Wenn ich npm run build starten werde, wirst du hier ein paar Dinge sehen. Vite erstellt den Ordner dist und innerhalb des dist-Ordners erstellt es SVG-, HTML - und interne Assets, es erstellt JS- und CSS-Dateien. Dieser Befehl nimmt alle Dateien im Quellordner und baut sie in HTML-, CSS-, JavaScript- und Sekundärdateien auf. Dieser Build-Befehl erzeugt endgültigen Produktions-Build unserer Anwendung. Später können wir den Ordner dist nehmen und ihn für das Hosting bereitstellen. Genau das werden wir später in diesem Projekt tun. Wir müssen wirklich nichts innerhalb von dist inspizieren. Es ist optimiert, es ist minimiert und man kann sehen, dass es hässlich aussieht. Das ist völlig in Ordnung, da es auf diese Weise optimiert werden soll. Auch hier verwendet Vite unter der Motorhaube Roll-up. Das Roll-up ist das Tool, das all diese Minimierung, Transpilation und den Rest erledigt. Schauen wir uns nun an, was haben wir hier unter anderen Dateien? Der Quellordner ist der Ordner, in dem wir unsere Quelldateien erstellen werden. Alle Reaktionskomponenten, der gesamte Code geht in den Quellcode. Die restliche Konfiguration, eslint, prettier, die nicht Teil des Quellcodes sind, aber Teil der Projektkonfiguration sind, befinden sich im Stammordner hier neben dem Paket Jason. Außerdem haben wir hier Index-HTML. Indexieren Sie HTML hier, das wird unser Einstiegspunkt sein. Hier beginnt unser Projekt von selbst. Darauf kommen wir später zurück. Was wir jetzt tun werden, wir werden nichts anfassen. werden wir im nächsten Video behandeln. Lassen Sie uns vorerst einen Überblick über den Rest geben. Wir haben einen öffentlichen Ordner und wir haben den Quellordner. Der öffentliche Ordner ist der Ort für statische Assets unseres Projekts. Sie werden immer unter dem Root-Pfad unserer Anwendung bereitgestellt . Was ich meine ist, dass wir den Befehl dev erneut ausführen lassen. Wenn wir darauf zugreifen wollen, schauen wir uns an, was wir in der Öffentlichkeit haben. Wir haben Vite SVG. Wenn wir also auf Slash zugreifen, was Root-Vite SVG ist, sehen wir, dass die Datei hier unter Vite SVG bereitgestellt wird, sodass der Pfad, den Sie für die Datei im öffentlichen Ordner haben , dem URL-Segment zugeordnet wird. Wenn ich einen Ordner erstellen will, nennen wir ihn. Ich weiß nicht, lol und wir können Vite hineinschieben lol dann wird Vite SVG unter lolvite.svg serviert. Dies ist der Ort für Dateien, die vom Build-Tool nicht werden sollen veröffentlicht oder irgendwie minimiert veröffentlicht oder irgendwie minimiert oder beeinflusst werden sollen. Sie werden so bleiben, wie sie hier sind, in der Öffentlichkeit, und wir können sie in unserer Anwendung referenzieren. Der öffentliche Ordner ist in jedem Frontend-Projekt weit verbreitet . Großartig. Jetzt, wo wir wissen, was all diese Dateien sind, gibt es nur noch eine Sache, die wir tun wollen, bevor wir mit der Entwicklung und dem Durchsuchen dieser Dateien beginnen können . Wir möchten Git in unser Projekt einführen . Was müssen wir tun, wir müssen zuerst initialisieren, Git hier. Im Terminal geben wir git init ein und hier kannst du sehen, dass Git jetzt vorhanden ist, also was wir tun können, wir werden das alles zur Stufe hinzufügen und dann alles übernehmen. Nur eine Anmerkung hier. Es gibt hier eine neue Datei namens Gitignore. Gitignore ist die vom Git-System erkannte Datei und alles, was in Gitignore aufgeführt ist , wird von Git ignoriert. In diesem Ordner haben wir viele sekundäre Dateien, die uns nicht wirklich interessieren. Wir haben hier jedoch auch Node Modules und dist. Diese beiden werden von Git ignoriert und wenn Sie den VS-Code sehen, sind sie nicht einmal hervorgehoben. Was heißt das? Das heißt, wenn wir Dateien übertragen, werden alle betroffenen Dateien als Teil des Git-Projekts hinzugefügt, aber die hier aufgelisteten Dateien werden von Git nicht erkannt. Sie werden einfach ignoriert und diese Knotenmodule werden ignoriert , weil wir sie nicht wirklich brauchen. Dies sind dynamisch generierte Dateien. Wenn wir, sagen wir, unser Projekt mit jemand anderem teilen wollen , Person, die alle Projektdateien herunterlädt wird diese Person, die alle Projektdateien herunterlädt, diese und Node-Module nicht haben , weil sie viel Gewicht und sie nicht wirklich brauchen, weil sie dynamisch erstellt werden können. Ich gebe einfach npm install ein, Node-Module werden neu erstellt. Ich gebe npm run build ein und der Ordner dist wird neu erstellt. Wir brauchen sie nicht wirklich viel Gewicht und sie können dynamisch erstellt werden. Deshalb sind sie in Gitignore aufgeführt. Lass uns weitermachen und alles mit dem Punkt git add zum Stage-Status hinzufügen, sodass wir hier eine Reihe von Warnungen sehen können. Manchmal ist es völlig in Ordnung. Git stellt sicher, dass unser Projekt plattformübergreifend zwischen verschiedenen Systemen unterschiedlichen Kodierungen läuft, sodass wir uns darüber keine Gedanken machen müssen. Danach übergeben wir all diese Staging-Dateien mit der ersten Commit-Nachricht und wenn wir git log eingeben, sehen wir, dass wir hier den ersten Commit haben. Fantastisch. Jetzt müssen wir dieses Git-Projekt auf GitHub hochladen. Was wir tun werden, wir gehen hier zu GitHub. Wir werden hier auf Neues Repository klicken. Name des Repositorys , wir bleiben bei TicTactoe-Game. Ich werde dieses Repository als öffentlich auswählen. Ich werde es später veröffentlichen, sobald wir damit fertig sind, wir brauchen keine ReadMe-Datei, die mit dem neuen Repository initialisiert ist, weil wir das später selbst erstellen werden, oder vielleicht können wir es jetzt tun, also erstelle ich eine neue Datei namens README.md, und darin werde ich die Markdown-Syntax verwenden. Dies ist die Syntax des Dokuments, also füge ich hier nur Hashtags hinzu. Denk nicht zu viel darüber nach. Nennen wir es Tic Tac Toe-Spiel. Ich speichere es und da es sich um eine neue Datei handelt, müssen wir erneut einen Commit hinzufügen. Hinzugefügt, README.md. Perfekt. Jetzt haben wir zwei Commits. Großartig. Wir brauchen ReadMe nicht, wir brauchen Gitignore nicht, weil Gitignore es bereits automatisch per Vite hinzufügt. Wir benötigen keine Lizenz. Ich klicke auf Repository erstellen. Großartig. Hier im Setup kann ich jetzt konfigurieren und mein neu erstelltes Repository auf GitHub mit meinem lokalen Repository auf meinem Computer verknüpfen mein neu erstelltes Repository auf GitHub mit . Wir können der Aufforderung hier folgen. Wenn wir ein komplett neues Repository erstellen, wenn wir keine Dateien haben, aber das ist nicht der Fall. Wir müssen uns dafür entscheiden, ein vorhandenes Repository an die erste gemeinsame Linie zu verschieben . Ich werde hier einfach Zeile für Zeile kopieren. Git remote am Ursprung. Sobald ich das gemacht habe, kann ich danach git remote-v eingeben und ich werde sehen, dass ich unter Alias Origin dieses Repository habe und wenn ich diesen Link kopiere und in einem neuen Tab öffne, führt es mich hierher, und ich werde sehen, dass ich unter Alias Origin dieses Repository habe und wenn ich diesen Link kopiere und in einem neuen Tab öffne, führt es mich hierher, was bedeutet, dass der Link korrekt ist. Dann schlägt es uns vor, git branch-M main einzugeben. Ich glaube nicht, dass wir das tun werden. Das Problem mit GitHub und Git Community ist, dass sie sich nicht entscheiden können, was der bessere Name für den Standard-Haupt-Branch ist, naja, normalerweise heißt er Master. Wir sind derzeit in der Master-Branche, aber die Leute wollen es ziemlich einfach machen. Anstelle von Master wollen manche Leute Main sehen. Wir bleiben beim Meister. Das ist doch keine große Sache. Was wir tun werden, da wir das Projekt jetzt mit dem Remote-Repository verknüpft haben, das es auf GitHub hochlädt, indem wir git push origin master eingeben . Origin ist der Alias , der auf das Repository verweist , und Master ist der Name des Zielzweigs im Repository, in den wir unseren aktuellen Code pushen werden . Ich mache diesen Befehl. Sie können sehen, dass etwas passiert ist , und wenn ich die Seite hier aktualisiere, sehe ich alle Projekte hier und die ReadMe-Datei , die wir erstellt haben. So etwas. Herzlichen Glückwunsch an alle. Wir haben die Tic Tac Toe-Projekte erstellt und konfiguriert. Wir sehen uns im nächsten Video. Wir werden endlich mit der Erstellung der App beginnen und wir können sehen, was die Komponenten sind. Tschüss. 42. 3 Eslint und Prettier: Hallo du, hier ist nur eine kurze Erinnerung an ESLint und Prettier. Da wir sicherstellen wollen , dass diese Tools in unseren VS-Code integriert sind und wir alles in Echtzeit sehen, die Highlights sehen und beim Speichern Defiles bilden, müssen wir sicherstellen, dass die Erweiterungen installiert sind. Gehen Sie hier zur Extension Stop und stellen Sie sicher, dass Sie hier die Prettier Code Formatter Extension sowie die ESLint-Erweiterung installiert haben Prettier Code Formatter Extension . ESLint-Erweiterung stellt sicher , dass alle ESLint-Probleme hervorgehoben werden, sodass Warnungen oder Fehler , die wir im Code haben, die Erweiterung kümmert sich darum. Prettier-Erweiterung stellt sicher, dass Dateien gegen den Konflikt formatiert sind , wenn sie sicher sind. Für die Prettier-Konfiguration benötigen wir jedoch etwas mehr Konfiguration Dafür müssen Sie in VS Code zu den JSON-Einstellungen gehen. Öffnen Sie die Benutzereinstellungen JSON, und hier im Inneren möchten wir sicherstellen , dass wir das Editor-Format auf save true sowie den Editor-Standardformatierer und JavaScript, den Editor-Standardformatierer, haben. All das wird auf der Seite Erweiterungen beschrieben. Öffnen Sie diese Seite einfach direkt im VS-Code, scrollen Sie einfach durch, kopieren Sie das Format sowie das Copy-Editor-Format und speichern Sie es und fügen Sie es einfach so in Ihr Einstellungs-JSON ein. Sobald Sie die Dateien speichern, werden sie automatisch formatiert. Für die ESLint-Erweiterung benötigen wir keine Konfiguration, es funktioniert einfach. Wir sehen uns. 43. 04 Was sind React und -Requisiten: Hallo zusammen, lasst uns endlich herausfinden , was wir im Quellordner haben. Lassen Sie uns zunächst sehen, wie Vite alles im Quellordner auflöst. Wenn ich npm run dev ausführen will, dann bedient Vite den Dev-Server und wir haben das. All das wird in der Quelle erstellt und definiert. Aber wie löst Vite das eigentlich? Wenn wir in package.json nachschauen und in das Dev-Skript, das Dev-Skript , schauen, was es tatsächlich tut, ruft es einfach den Vite-Befehl auf. Ein optionales Argument für den Befehl Vite ist jedoch der Pfad zu index.html , der als Eintrag für Vite dient, um zu verstehen, dass, hey, dies unser Einstiegspunkt ist. Index.html, das wir hier haben , ist der Eintrag, und wenn Vite ohne Argumente aufgerufen wird, sucht es standardmäßig wenn Vite ohne Argumente aufgerufen wird, nach index.html im aktuellen Ordner, was in unserem Fall korrekt ist. In index.html haben wir einfaches Markup, sodass Vite zu dieser index.html führt , sobald der Befehl gestartet wird, und es sieht, dass wir, okay, in index.html ein Skript haben, das okay, in index.html ein Skript haben, das auf die Quelle main.jsx verweist. Quelle main.jsx ist der Einstiegspunkt für die React-Anwendung, während index.html der Punkt zur Anwendung selbst ist. Nun, in einer Anwendung können Sie tatsächlich mehrere React-Apps haben, aber das kommt selten vor. Wir haben ein Skript, das auf main.jsx verweist. Wir haben dev mit der auf root gesetzten ID und wir haben hier ziemlich standardmäßige Met-Angriffe. Wir können es tatsächlich ändern und es Tic Tac Toe nennen. Sobald ich es gespeichert habe, können Sie im Terminal sehen , dass es zur Ladeseite geändert wurde. Wenn ich zurückgehe, wurde es automatisch für mich geladen. Ich habe nichts gedrückt und der Titel wurde geändert. Ziemlich genial, nicht wahr? Wenn wir hineinschauen, source main.jsx. Hier lernen wir React endlich kennen. Wir haben ein paar Dinge aus React und react-dom/client importiert . Dieser Import von React aus React, bevor React 17 in jeder Datei erforderlich war , in der Sie React-Code schreiben. Ab React 18 ist dies jedoch nicht mehr erforderlich. Sie können den Import in React weglassen. müssen wir ihn in unserem Fall Da wir den React-Namespace verwenden, um den strikten Modus zu verwenden, jedoch nur hier importieren, aber in allen anderen Dateien müssen wir Import React from React nicht eingeben. Dies war erst vor React 17 wieder notwendig. In eslintrc haben wir das Plugin jsx-runtime, um Eslint so zu konfigurieren , dass wir verstehen, dass wir React 18 verwenden Bitte sagen Sie uns nicht, dass wir React aus React importieren müssen. Eslint weiß davon. Wir importieren ReactDOM und bei einem ReactDOM-Objekt rufen wir createRoot auf. An die Methode createRoot übergeben wir get-Element des Dokuments mit der ID root. Wir holen uns ein Element aus index.html, das nur ein leeres Element ist, und dieses leere Element wird als Montagepunkt bezeichnet. Dies ist das nur leere Element. Es kann jedes gültige HTML-Element , das in HTML vorhanden sein muss. Es wird als Gefäß für die React-Anwendung dienen. Für den Komponentenbaum. Wir erstellen Root aus diesem HTML-Element. Wir bekommen es wieder von index.html, IDs müssen übereinstimmen, wenn ich etwas anderes eingeben will , das nicht mit root define und index.html übereinstimmt. Auf der Seite wird nichts erstellt. Nun, das ist offensichtlich. Großartig. Wir bringen es zurück auf den Root und stellen sicher, dass alles funktioniert. Sobald wir das Root-Objekt auf dem Root-Objekt haben , rufen wir die Render-Methode auf. An die Rendermethode müssen wir den Komponentenbaum übergeben , der auf der Seite vorhanden sein soll. Nun, um die Rendermethode zu rendern, übergeben wir im Grunde unsere React-Anwendung, unsere React-Komponenten. Die App-Komponente stellt fast immer die Hauptkomponenten der React-App dar. Es heißt fast immer, da bin ich mir ziemlich sicher, einfach App. React StrictMode, es ist etwas , das kürzlich in React eingeführt wurde. Es ist auch als Komponente erhältlich, aber was es tut, es macht nur ein paar Dinge die uns vor möglichen Problemen oder Fehlern warnen, die wir in der React-App haben könnten. Wir lassen es einfach so. Wir ändern hier nichts. Was Sie hier sehen, ist unser Komponentenbaum, einfach so. Alle Komponenten beginnen immer mit einem Großbuchstaben. Sie werden keine einzige Komponente sehen, die mit einem Kleinbuchstaben beginnt. Das ist unmöglich. Die erste goldene Regel lautet, dass Komponenten immer groß geschrieben werden. Immer, egal was passiert. Wir haben den React StrictMode-Modus und die App-Komponente, und dies ist unser Komponentenbaum. Lassen Sie uns nun endlich einen Blick in die App-Komponente werfen. In der App-Komponente, oh mein Gott, wir haben schon etwas. Wenn wir den Mauszeiger bewegen, können wir jeden Eslint-Fehler sehen von der React/JSX-No-Target-Leer-Regel herrührt. Nun, das ist in Ordnung wir werden nichts dagegen tun, wir werden das Markup sowieso entfernen, also ist es uns egal. Das ist gut. Dieser Eslint sagt uns , dass es unsicher ist, Anker-Tags ohne bestimmte Attribute zu verwenden. Perfekt. Dann fassen wir es einfach nicht an. Dies ist eine Komponente. App-Funktion, die Sie hier sehen , ist eine Komponente, sie heißt App, es ist also eine App-Komponente und wir haben hier bereits einige Dinge erstellt, aber lassen sie einfach entfernen, wir brauchen sie nicht. Ich werde das entfernen, ich werde das entfernen , was du gesagt hast und von dem wir nichts wissen , React-Logo, App.css. Vielleicht können wir App.css behalten. Rest können wir dann entfernen. Stattdessen können wir einfach hallo eingeben und den Klassennamen überhaupt entfernen. Wir haben ein einzelnes Div, hallo und close div, wir speichern es. Dann entfernen wir den Assets-Ordner. Wir brauchen es nicht. Wir werden index.css entfernen. Wir brauchen es nicht in main.jsx. Wir werden den Verweis auf index.css entfernen , da wir diese Datei gerade entfernt haben. Wir haben nur main.jsx, das die App-Komponente importiert, und in der App-Komponente haben wir App.css. Großartig. Eine Komponente ist nur eine Funktion, die JSX-Markup zurückgibt. Was Sie hier sehen, ist HTML, aber in Wirklichkeit ist es unter der Haube in JavaScript übersetzt. Alles, was du hier schreibst, ist JavaScript. Dieses HTML-Markup hier heißt JSX. Wenn ich mich nicht irre und wenn ich mich richtig daran erinnere, ist es die Kombination aus JavaScript und XML, da bin ich mir nicht sicher, aber dieses Markup heißt sowieso JSX. Wenn Sie sehen können, haben wir auch die Erweiterung.jsx. Wir hätten die Erweiterung just.js anstelle von jsx verwenden können, aber die Sache ist, da Vite ein Frontend-Tool ist und es auch irgendwie erkennen muss, wo genau wir React-Markup haben und wo genau wir reguläres JavaScript haben. müssen alle unsere Komponenten oder alle unsere Dateien benennen, in denen wir ein jsx-Markup mit der Erweiterung.jsx haben . Deshalb siehst du main.jsx weil wir JSX-Markup in einer App.jsx haben , denn nun, das ist eine Komponente und sie wird definitiv JSX-Markup enthalten. Auch hier ist eine Komponente nur eine einfache Funktion , die JSX-Markup zurückgibt, das wie HTML aussieht und im Grunde in JavaScript übersetzt wird. Wir können hier jedes gültige HTML eingeben. Wenn ich span-Tag oder h1-Tag eintippe und es einen Titel nenne, dann speichere ich es, dann gehe ich zurück, Sie können sehen, dass es hier wiedergegeben wird. Großartig. Wenn ich das Markup im Browser überprüfe, sehe ich die div-ID root, was wiederum unser Einhängepunkt für die in index.html definierte Anwendung ist, und dann wird unsere React-Anwendung im div gemountet, genau wie Sie hier sehen. Das Markup, das wir in der App-Komponente, dem Div und dem Titel definiert haben . So einfach ist das. Jetzt haben wir auch App.css hier. Wie Sie bereits bemerkt haben, , eine CSS-Datei zu erstellen, um einige Stile zu erstellen oder eine React-Anwendung zu stylen reicht es gerade aus, eine CSS-Datei zu erstellen, um einige Stile zu erstellen oder eine React-Anwendung zu stylen. Schreiben Sie hier normales CSS und importieren Sie es dann in die Komponente. Einfach so. Nichts besonderes. Um den Elementen, die wir im Markup haben, Klassen zuzuweisen , müssen wir das className-Attribut an Elemente übergeben , nicht class, sondern className, denn denken Sie daran, dass dies zwar HTML-Markup ist, es aber im Hintergrund in JavaScript übersetzt wird. Das bedeutet, dass es von React verarbeitet wird. In React übergeben wir nicht nur die Klasse, sondern das className-Attribut. Innerhalb des className-Attributs geben wir an, welche Klassennamen dieses Element haben soll. Lassen Sie uns etwas Zufälliges weitergeben. Lassen Sie uns die Kartenklasse übergeben , die in CSS definiert ist. Wir machen einfach eine Karte und speichern sie dann. Wenn wir uns das genauer ansehen, können Sie sehen, dass dieses Div eine Kartenklasse mit dem hier definierten CSS hat . Es funktioniert einfach so. Daran ist nichts Besonderes. Dann lassen Sie uns fortfahren und unsere eigenen Komponenten erstellen. Innerhalb des Quellcodes erstellen wir einen neuen Ordner namens Components. In diesem Komponentenordner erstellen wir eine neue Datei, die wir Square.jsx nennen werden. Hier erstellen wir eine neue Funktion namens square, und vorerst wird sie ein einfaches Div zurückgeben, hallo. Aus dieser Datei werden wir das Standardquadrat exportieren , einfach so. Jetzt haben wir gerade eine quadratische Komponente erstellt und möchten sie in einer anderen Komponente verwenden. In der Reaktion verwenden Sie Komponenten innerhalb anderer Komponenten. Alles ist eine Komponente von React. Wir kehren zur App JSX zurück und hier importieren wir Quadrat aus quadrierten Komponenten, und dann geben wir hier einfach square und selbstschließend ein. Sie können sehen, wann Sie Komponenten verwenden möchten, Sie verwenden sie wie HTML-Elemente. Aber auch hier die erste Regel: Sie werden immer großgeschrieben. Im Grunde genommen sind sie wiederverwendbaren HTML-Tags sehr ähnlich, aber sie sind Komponenten, in denen ihre eigene Logik definiert ist. Wenn wir erneut zur App gehen, können Sie sehen, dass Hallo hier hinzugefügt wird. Dies ist unsere Komponente und das Markup befindet sich auf der Innenseite des Quadrats. Es geht um Hallo. Wenn ich es in etwas anderes ändere, wird es hier wiedergegeben. So einfach ist das. Jetzt wissen Sie, dass jedes HTML-Attribut einige Argumente empfangen kann , um einige Informationen zu übergeben, um einige Daten an dieses Element zu übergeben. Zum Beispiel haben wir ein Image-Tag. Das Bild-Tag erwartet zwei Attribute, source und alt, falls das Bild nicht geladen wird. Lassen Sie uns fortfahren und versuchen, diese vite.svg als Quelle für dieses Image-Tag anzugeben . Da vite.svg unter root bereitgestellt wird, weil denken Sie daran, dass der öffentliche Ordner URL-Segmenten zugeordnet ist, gebe ich einfach vite.svg an, speichere es und Sie sehen, dass es funktioniert. Es verweist uns auf vite.svg, was korrekt ist. Komponenten haben auch Attribute, aber all diese Attribute werden von uns in der Komponentendefinition vollständig definiert. Diese Attribute werden Requisiten genannt. So wie HTML-Elemente Attribute haben, verfügen Komponenten über Anweisungen, um einige Daten innerhalb dieser Komponente zu übergeben . Wir haben eine quadratische Komponente. Wenn wir die quadratische Komponente öffnen, sind das hier nur statische Daten, es wird nur Hallo angezeigt. Was wäre, wenn ich die quadratische Komponente anzeigen und ändern möchte , was darin angezeigt werden soll? Nehmen wir an, wir können quadratische Komponenten einfach so duplizieren und wir werden mehrere quadratische Komponenten haben, zum Beispiel hallo, hallo, hallo, hallo. Aber was ist, wenn sie dynamische Größeninformationen benötigen, einige dynamische Daten wie Hallo 1, Hallo 2, 3, 4 usw.? Um das zu tun, müssen wir Requisiten weitergeben. Requisiten ist nur das Objekt , das die Komponente als erstes Argument erhält. Einfach so. Wenn wir Log-Requisiten stornieren und wenn wir die Konsole öffnen und ich die Seite aktualisiere, werden hier mehrere Konsolenprotokolle angezeigt. Warum haben wir mehrere? Weil wir die quadratische Komponente mehrmals ausführen. Für jede Komponente wird das Konsolenprotokoll gedruckt. Im Moment ist es ein leeres Objekt. Es ist nicht undefiniert, es ist ein leeres Objekt. Was auch immer wir als Requisite an die Komponente übergeben, erscheint hier unter dem Requisiten-Objekt. So wie wir Attribute an Elemente weitergeben, übergeben wir Requisiten an Komponenten. Nehmen wir an, zu dieser neuesten quadratischen Komponente geben wir Requisiten weiter. Auch hier wird es völlig benutzerdefiniert sein. Nennen wir es Wert. Wir werden String 5 bestehen. Wir gehen hierher zurück, ich aktualisiere die Seite, in der Browserkonsole können wir den Wert 5 sehen. Es wurde zweimal storniert und gesperrt. Nun, das ist falsch, dass es zweimal abgesagt wurde. Ich denke, der Grund könnte der strenge Modus hier sein. Lassen Sie mich es sehr schnell versuchen und es entfernen. Wenn ich aktualisiere, habe ich jetzt nur noch ein Konsolenprotokoll. Das ist seltsam. Die Sache ist, wenn die Komponente aktualisiert wird, wurde sie intern aktualisiert. Wenn die Komponente aktualisiert wird, JavaScript erneut ausgeführt und die Logik innerhalb der Komponente wird erneut ausgeführt. Aus irgendeinem Grund zwingt die Strict Bone-Komponente die Komponente, JavaScript innerhalb der Komponente erneut zu rendern, um es erneut auszuführen und wir sehen mehrmals ein Konsolenprotokoll für dieselbe Komponente. Lass es uns so belassen. Wir haben den Wert 5. Für den Rest der Komponenten, die wir hier haben, ist es immer noch ein leeres Objekt, denn nun, wir übergeben nichts darin, aber für die letzte Komponente übergeben wir den Wert 5, wir übergeben die Requisite. Großartig. Ich denke, es ist klar , dass es sich bei diesen Komponenten um ein leeres Objekt handelt, da wir hier nichts übergeben , aber hier übergeben wir den Wert 5. Jetzt haben wir innerhalb des Requisitenobjekts einen Schlüsselwert mit dem Wert string 5. Innerhalb der quadratischen Komponentendefinition können wir diesen Wert jetzt hier verwenden. Da es sich um ein Objekt handelt, ist es unter props.value verfügbar. Lassen Sie uns explizit log props.value trösten und die Seite aktualisieren, wir sehen undefined und five, denn auch hier gilt, dass für all diese Komponenten, die den Wert prop nicht übergeben, Wert undefiniert ist, aber für die letzte Komponente wird der Wert String 5 sein. Großartig. Jetzt können wir innerhalb des JSX-Markups JavaScript-Ausdrücke anzeigen. Wenn ich jetzt etwas tippe oder wenn ich möchte, schauen wir uns an, diesen Requisitenwert als Text in meiner Komponente anstelle von Hallo anzuzeigen , damit es sich dynamisch anfühlt. Ich würde wahrscheinlich props.value eingeben. Aber wird es funktionieren? Lass es uns versuchen und sehen. Wenn ich meine Seite öffne, sehe ich props.value als Text , weil es nicht funktioniert. Es ist nur eine Schnur. Aber wenn wir props.value als JavaScript in unserem JSX-Markup auswerten wollen , müssen wir geschweifte Klammern verwenden. Einfach so. In geschweiften Klammern können wir jedes gültige JavaScript eingeben. Es wird ausgewertet und schließlich in das von uns geschriebene Markup interpoliert. Wenn wir hierher zurückkehren, sehen wir nur fünf. Aber wo sind die restlichen Komponenten? Wenn wir das Markup überprüfen, sind sie einfach leer. Da sie leer sind, nehmen sie keinen Platz auf der Seite ein. In der letzten Komponente, die gerendert wurde, werden jedoch fünf Komponenten angezeigt. Was genau geben wir hier als Requisite durch? Wenn wir weitermachen und hier weitere Zeichenketten wie Hallo übergeben, wird Value mein Name sein. Der Wert wird etwas sein. Lass uns diesen entfernen und wir speichern ihn und wir gehen zurück. Sie können sehen, dass alles angezeigt wird , gerade als wir vorbeifahren. Auf diese Weise können wir mithilfe von Requisiten die Informationen an die Komponente weitergeben. Hier ist ein kurzer Tipp, da wir immer wissen, dass das erste Argument für die Komponentenfunktion das Requisitenobjekt sein wird. Wir können Destrukturierung verwenden, anstatt ständig Requisiten zu schreiben . Was ich tun werde, ich werde die Destrukturierung einfach direkt innerhalb der Funktionsargumente anwenden . Da wir den Wert von key aus dem Requisitenobjekt destrukturiert haben, werde ich ihn mir einfach so schnappen. Jetzt sieht es viel sauberer und wir müssen keine Requisiten mehr schreiben. Auf diese Weise können wir innerhalb der Komponente beliebig viele Requisiten übergeben . Abgesehen von [NOISE] können wir auch ein weiteres spezielles vordefiniertes Requisit namens Children übergeben . Kinder sind etwas , das Sie innerhalb der Komponente als eigenes Markup übergeben . Damit meine ich das, wenn Sie gerade in die quadratische Komponente schauen. Es ist selbstgeschlossen. Es ist und drinnen reichen wir verschiedene Requisiten. Wir können es aber auch so schreiben. Quadrat und schließen Sie es dann in einer separaten Zeile. Dann können wir drinnen so etwas wie div weitergeben, hallo. Vielleicht heißt es in einem anderen Titel, das ist ein Titel. In diesem Fall schließt sich diese Komponente jetzt nicht mehr von selbst. Diese bleiben automatisch geschlossen, aber das ist wie eine normale Komponente, die sich nicht selbst schließt und innerhalb dessen geben wir Markup weiter. Alles, was wir auf diese Weise in die Komponente übergeben . Dieses Markup hier, hallo da, das ist der Titel. Es wird in der Komponentendefinition verfügbar sein. Als Requisite der Kinder ist es ein reservierter Schlüsselname, der speziell dafür reserviert ist. Wenn ich hier weitermachen und Kinder auf der Konsole protokollieren soll. Wenn wir die Konsole erneut öffnen, können Sie sehen, dass sie für die übrigen Komponenten denen wir keine Kinder übergeben, undefiniert ist. Aber für die erste Komponente gibt es hier einige seltsame Dinge, wenn Sie sie öffnen. Dies ist das JavaScript , das dem JSX-Markup tatsächlich hinter dem JSX-Markup verwendet wird. Wir können die Kinder nehmen und es rendern. Wir können es als Steckplatz benutzen. In anderen Bibliotheken heißt es Slots. Im Reaktor heißt es Kinder. Sie übergeben etwas Markup innerhalb der Komponente und dann die Komponente darin, indem Sie es verwenden, da ein Kind entscheiden kann, wo genau es gerendert wird. In dieses Markup werde ich tippen, Kinder werden unten gerendert. Innerhalb des Div interpoliere ich Kinder, denn auch hier gilt, wenn ich nur solche Kinder übergebe, es als Zeichenkettenkinder betrachtet wird. Da children jedoch eine Variable in dieser Funktion ist, müssen wir sie in das JSX-Markup interpolieren. Einfach so. Wenn wir nun in unseren HTML-Code schauen, haben wir hier verschiedene Dinge. Für die erste Komponente haben wir etwas, dann haben wir Kinder, das unten gerendert wird. Dann haben wir div, Kinder, die wir an die darin enthaltene Komponente übergeben haben . Wir geben Hallo und das ist der Titel. Das ist genau das , was wir hier sehen. Dieses HTML-HTTP wird innerhalb einer quadratischen Komponente interpoliert. Es ist als Kind erhältlich. Es wurde als Requisite für Kinder ausgestellt. Auch hier kannst du dich nicht ändern. Es bleibt immer so. Es ist ein reservierter Requisitenname für Kinder. Es ändert sich nie und es wird immer so bleiben , egal was passiert. Für den Rest unserer Komponenten wird nichts gerendert. Du wirst sehen, dass es ein leeres Div sein wird. Wann immer Sie versuchen, undefinierte Null anzuzeigen, oder sagen wir was auch immer, versuchen Sie undefinierte Null zu interpolieren. Innerhalb des JSX-Markups wird es nicht gerendert, da es ja als leerer Wert betrachtet wird und nicht angezeigt wird. Wenn ich weitermache und einfach versuche, Null darin anzuzeigen, wird nichts da sein. Es wird nur ein leeres Div sein. Das Gleiche gilt für undefined und für false. Alle falschen Werte werden nicht zu etwas ausgewertet. Sie werden einfach weggelassen. Einfach so können wir Komponenten erstellen. Cool, nicht wahr? Im nächsten Video werden wir eine Platinenkomponente erstellen. Wir werden eine Quadratwurzelkomponente erstellen und versuchen, einige Funktionen in die App zu integrieren. Wir sehen uns dort. 44. 05 Wie man CSS-Stile anwendet: Hallo zusammen. Lassen Sie uns die App weiter entwickeln. letzte Mal haben wir die Komponenten besprochen, wie wir Komponenten erstellen können, wie wir Kinder weitergeben können, was die Komponenten sind, wie wir sie anzeigen können usw. Lassen Sie uns nun beginnen und unserer App Leben einhauchen. Was wir jetzt tun werden, wir werden das Markup erstellen , das in unserem Spiel verwendet wird. Wir kehren zur App JSX zurück. Wir werden alles von hier entfernen. Wir werden diesen Klassennamen vorerst entfernen, wir werden den Import von Square entfernen und wir werden fortfahren und eine neue Komponente im Komponentenordner erstellen , die wir Board JSX nennen werden. Es wird unseren Vorstand repräsentieren und wir werden die gesamte relevante Logik in diese Komponente integrieren. Auch hier werde ich eine Wortfunktion erstellen. Darin werden wir vorerst div als Hallo anzeigen und anhand dieser Datei werden wir diese Board-Komponente untersuchen. Dann importieren wir in der App JSX das Board vom Components Board. Dann werden wir es hier als selbstschließende Komponente versuchen. Jetzt kehren wir zum Browser zurück, wir sehen Hallo, das von Board Component stammt. Jetzt definieren wir innerhalb des Boards den ersten Marker. Wir geben ihm ein Klassennamenschild. Es wird noch nirgends behandelt, nicht in einer CSS-Datei, nirgends. Wir werden es einfach mit dem Klassennamenbrett kennzeichnen. Im Inneren werden wir Zeilen erstellen, denn wenn ihr euch daran erinnert unser Spiel Tic-Tac-Toe sein wird dass unser Spiel Tic-Tac-Toe sein wird und es muss diese, sagen wir, zeilenartige Struktur innerhalb von HTML sein . Wir werden drei Zeilen erstellen. Wir werden drei Tauchgänge machen. Jedes Div hat ein Klassennamenbrett, eine Reihe und innerhalb jeder Zeile haben wir drei Quadrate. Es wird im Grunde nur ein Raster sein, drei mal drei. In jeder Zeile verwenden wir die quadratische Komponente. Wir werden Quadrat von Quadrat importieren. Das./ steht übrigens für den aktuellen Ordner, in dem dieses Dateiboard JSX es in diesem Fall gefunden hat. Wenn ich tippe. /, es steht für diesen Komponentenordner. Das bedeutet, dass alles, was ich weiter eintippe , in diesem Ordner aufgelöst wird. Ich importiere Standard, exportiere, diesen, einen Namen, sein quadratisches Innenbrett, und all das wird aus dieser quadratischen Datei hier importiert. In jeder Reihe werde ich das Quadrat dreimal laufen lassen , einfach so. Irgendwann sieht es ungefähr so aus. Wenn ich aktualisiere, haben wir immer noch Markup aus dem letzten Video, aber lassen Sie uns es tatsächlich entfernen und lassen Sie uns nur die Value-Requisite verwenden. Aber wir müssen es immer noch in jede Instanz von square root, die wir ausführen, übergeben . Ich übergebe hier den Wert Null. Der Wert wird eins sein. Übrigens übergebe ich im letzten Video den Wert als Zeichenfolge. Einfach so. Eine Zeichenfolge kann ohne geschweifte Klammern übergeben werden, aber wenn Sie versuchen, fünf zu übergeben und möchten, dass es eine Zahl statt einer Zeichenfolge ist, müssen Sie geschweifte Klammern verwenden. Auch hier können Sie mit geschweiften Klammern überall im JSX-Markup alle gültigen JavaScript-Ausdrücke verwenden. Null als Zahl ist ein JavaScript-Ausdruck, und wir können ihn als Wertrequisite übergeben, und es wird nur die Zahl 0 oder Nummer eins sein. Wenn Sie möchten, dass es eine Zeichenfolge ist, können Sie sie einfach so eingeben und es wird eine Zeichenfolge sein. Ein Ausdruck, der zu einer Zeichenfolge ausgewertet wird. Aber wenn es eine Zeichenfolge ist, kannst du sie so übergeben. Wenn wir Zahlen übergeben, müssen wir geschweifte Klammern verwenden. Wert 0, Wert wie dieser. Lass mich das schnell alles kopieren und es bis acht so machen . Sie haben vielleicht eine Frage, warum es bei Null beginnt. Nun, ich habe es dir nicht gesagt, aber wir werden ganz kurz darauf eingehen , wie wir den Vorstand repräsentieren werden, wie wir das schaffen und wir irgendwie Quadrate darstellen müssen. Wir können sie durch Indizes darstellen. Eine Erhöhung der Programmierkenntnisse beginnt bei Null. Da wir eine Gehaltserhöhung verwenden werden, um ein Brettspiel zu verwalten, beginnen die Indizes bei Null. Deshalb geben wir unseren Quadraten vorerst Indizes und sie beginnen bei Null, weil dies Array-Elemente sein werden. Wir gehen zurück und sehen uns das an. Nun, wenn wir HTML untersuchen, ist das genau das, was wir geschrieben haben. Lassen Sie uns es jetzt ein bisschen stilvoller machen. Wir kehren zum Quadrat JSX zurück und unsere Quadrate werden anklickbar sein. Anstelle von div können wir eine Schaltfläche mit dem Typ button rendern und ihr den Klassennamen square geben , den wir gleich definieren werden. Nun, es sieht so aus, , und es ist nicht so schlimm, nicht wahr? Aber wir werden hier unsere eigenen Stile anwenden. Wenn wir hier zu Gast zurückkehren, genau auf dieser Seite, auf der Sie alle bereitgestellten Informationen für Sie haben können , wenn Sie hier scrollen, haben wir hier styles.scss. Nun, SCSS ist für Sass-Dateien. Sass ist ein CSS-Präprozessor , den wir verwenden werden. Was ist ein CSS-Präprozessor? Es ist im Grunde nur eine Sprache, die auf CSS aufbaut und über eigene Funktionen verfügt. Irgendwann, wenn wir dieses Etwas Punkt SCSS schreiben , wird es zu etwas Punkt-CSS kompiliert, und es wird genauso funktionieren wie normales CSS. Es hat jedoch Nachteile seiner eigenen Funktionen, zum Beispiel beim Verschachteln. In regulärem CSS dürfen wir Selektoren nicht verschachteln. Wir müssen sie in einer Reihe schreiben, wie Punkt History Rapper, dann Space, dann Punkt History. In SASS kann alles verschachtelt werden. Wir können Variablen und verschiedene Dinge haben. Sie können in Google nach SASS, Syntactically Awesome Style Sheets, suchen . Sie können es öffnen, auf „SASS lernen“ klicken und diese Seite sehr schnell durchgehen. Es ist nicht zu lang, es ist ziemlich kurz und es deckt und zeigt Ihnen alle SASS-Fähigkeiten, zum Beispiel Variablen. Durch die Verwendung des Dollarzeichens können Sie Variablen in CSS haben. Ziemlich cool, und du kannst nisten. Sie können sehen, wenn Sie dieses SASS-Markup schreiben, es wird in dieses CSS übersetzt, also werden wir SASS verwenden. Um das zu tun, müssen wir Vite anweisen. Wir müssen Vite sagen, dass wir anstelle von regulärem CSS auch SASS verwenden möchten und Vite unterstützt SASS. Wenn wir zur Vite-Dokumentation zurückkehren und auf „Suchen“ klicken und hier nach SASS suchen und den ersten Link öffnen, haben wir den Abschnitt CSS-Präprozessor, und Vite bietet integrierte Unterstützung für SCSS-Dateien. Sie dazu dann die Unterstützung, Aktivieren Sie dazu dann die Unterstützung, die wir für die Installation des SASS-Compilers benötigen. SASS-Compiler ist als npm-Paket namens SASS verfügbar. Sie können diesen Befehl hier sehen. Wenn ich npm SASS eintippe und ich den ersten Link setze. Dies ist das Paket , das uns die Möglichkeit gibt, SASS in CSS-Dateien zu kompilieren. Wir müssen es also nur installieren und Vite kümmert sich tatsächlich um den Transpilationsprozess. Ich kopiere einfach diesen Befehl, öffne das Terminal, stoppe den Befehl, indem ich Strg-C drücke, sodass unser Diff-Server kaputt geht, dann werde ich SASS installieren. Dash D ist im Grunde dasselbe wie Dash, dash save-dev. Nur eine Abkürzung. Es wird SASS als Entwicklerabhängigkeit installieren, und wenn Sie jetzt in das Paket JSON schauen , werden Sie SASS unter den Dev-Abhängigkeiten sehen. Großartig. Jetzt müssen wir zuerst npm run dev ausführen um den Server erneut zu starten, und wir können weitermachen und tatsächlich SASS-Dateien erstellen. Im Quellordner erstelle ich Styles.scss und was werde ich tun? Ich gehe einfach zum Gast und kopiere einfach alles von hier und füge es in Style-CSS ein. Sie müssen hier nicht zu sehr ins Detail gehen. Dies ist das letzte Markup , das wir in unserer Anwendung haben werden, da es in diesen Videos nicht um CSS geht. Wenn Sie etwas ändern müssen oder wenn Sie etwas Neues hierher bringen möchten, steht es Ihnen frei, das zu tun. Bitte mach weiter, ändere es, spiel damit, wir werden dieses Markup verwenden. In diesen Stilen haben wir eine Vorstandsklausel definiert. Dann verschachteln wir innerhalb des Bretts die Klasse Brettreihe und dann innerhalb der Brettreihenklasse die quadratische Klasse. Unter der Haube, wenn Sie SASS erneut öffnen, Nesting hier in diese Selektoren kompiliert, also im Grunde Board, und innerhalb der Board-Zeile wird zu etwas Ähnlichem kompiliert, und Square wird zu so etwas kompiliert. Das ist sehr praktisch, finde ich. Wir haben Board- und Board-Row - und Quadratwurzelklassen Was wir also tun werden, SASS-Punktdatei in unsere App zu importieren. Wir werden App Dot CSS nicht mehr benötigen, also löschen wir es einfach. Dann gehen wir zur App-Komponente und anstatt App-CSS zu importieren, importieren wir Styles Dot CSS, und es wird funktionieren. Jetzt haben wir hier die Klassen Board, Board Row und Square. Wir gehen zu Square und weisen die Klasse square zu, die sich diesem CSS auflösen wird. Innerhalb des Boards haben wir einen Vorstand und eine Vorstandsreihe, die sich für diese Klassen entscheiden wird. Jetzt kehren wir zur App zurück und bumm, Sie können sehen, es sieht einfach so aus. Sie können jedoch sehen, dass etwas nicht stimmt oder etwas nicht stimmt, ist eigentlich unser Markup also müssen wir es ein wenig ändern. Wenn wir hier zur App gehen, geben wir die Komponente, die unser gesamtes Markup umschließt. Wir geben ihm hier die App-Klasse , die wir einfach so definiert haben. Also können wir ihm den Klassennamen App geben. Was es tun wird, es wird uns die grundlegende Flex-Box mit dem Spalten-Setup geben . Wenn wir hierher zurückkehren, können Sie sehen, dass wir jetzt unser endgültiges Raster haben, das so aussieht. Ziemlich cool. Das war's mit dem Styling. Jetzt kennst du noch einen Trick, wie du deine App mit SASS stylen kannst. Wenn Sie bereits einen anderen Präprozessor wie Less kennen, können Sie auch in der Vite-Dokumentation nachlesen, in der Vite-Dokumentation nachlesen wie Sie ihn oder den Stift anschließen können. SASS ist in allen gängigen Anwendungslösungen sehr beliebt . Ich finde es ziemlich cool und sehr praktisch. Jetzt haben wir eigentlich mit Interaktivität angefangen , sind aber bei Stilen gelandet. Ich denke, vorerst werden wir mit Stilen enden , und im nächsten Video werden wir tatsächlich über Interaktivität sprechen. Ich denke, es macht dir nichts aus. Da wir hier schon viel gearbeitet haben, SASS eingeführt und wir Board - und Square-Komponenten erstellt und wir haben unser hübsches Markup hier, lasst uns eigentlich alles festlegen. Was haben wir hier? Wir haben App-CSS entfernt, wir haben das Paket JSON geändert, wir haben ein paar Dateien gelöscht. Also machen wir einfach weiter und fügen dem Stage State alles hinzu. Ich tippe „Git add dot“ ein, sodass alles unter Staged Changes erscheint und wir werden einfach alles übernehmen, und wir werden den Commit als installiertes SASS bezeichnen Board - und quadratische Komponenten erstellt, bloße Knochen, so etwas in der Art. Sehr seltsame Commit-Nachricht, aber ich denke, es wird reichen. Wir verpflichten uns zu allem. Damit alles auf GitHub erscheint, müssen wir es bereitstellen, denn auch hier müssen wir uns daran erinnern, dass Änderungen, wenn Sie sie übernehmen, lokal auf Ihrem PC verbleiben. Wenn du jetzt zu GitHub zurückkehrst, wird nichts geändert, da all deine Änderungen lokal übernommen werden . Du musst also jedes Mal, wenn du neue Änderungen lokal einführst, auf GitHub-Hosting bereitstellen , also git push origin master. Ich mache das und erfrische mich, und jetzt haben wir alles gut. Fantastisch. Wie versprochen, wird es im nächsten Video um Interaktivität gehen, also sehen wir uns dort. 45. 06 React State with useState hook, React Ereignisse: Hallo nochmal. In diesem Video werden wir wie versprochen über Interaktivität sprechen. Was ich mit Interaktivität meine. Interaktivität ist etwas , das passiert, wenn Benutzer mit der Webseite interagiert. Wenn ich auf den Button klicke, muss etwas passieren. Ein Ereignis tritt ein und etwas wird auf dem Bildschirm aktualisiert. Das nennt man Interaktivität. Jetzt würden wir sehen, wie wir das in React verwalten können. In rohem JavaScript, in reinem JavaScript ohne React, haben Sie eine JavaScript-Datei. Normalerweise greifen Sie nach Elementen mit der DOM-API, etwa zum Abrufen von Dokumenten nach der ID. Du schnappst dir eine Schaltfläche, dann schreibst du den Button.add Event Listener, und an diesen Listener hängst du eine Funktion an, die ausgeführt wird, wenn du auf die Schaltfläche klickst. Aber als Reaktion ist es so ziemlich dasselbe. Es sieht anders aus, aber es ist fast dasselbe, also lasst uns JSX hier öffnen. Beispiel eine Lassen Sie uns als Beispiel eine Schaltfläche erstellen und damit spielen. Ich habe das Board vorerst entfernt. Wo war die Komponente vorerst? Wir brauchen es nicht. Wir haben hier einen Eslint-Editor, keine ungenutzten Variablen. Es erzeugt einen Fehler, anstatt zu vergeben Lassen Sie uns es tatsächlich zum Laufen bringen, damit es weniger Variablen sind. In Eslint verwende ich einfach keine ungenutzten Variablen und ich wollte eine Warnung ausgeben, also wird sie jetzt orange statt rot sein und es wird uns nicht sehr stören. Also werde ich weitermachen und ein Button-Element erstellen und es aufrufen, bitte klicken Sie mich an. Nun, was ich mit dieser Schaltfläche tun möchte, vielleicht möchte ich etwas aktualisieren oder ich möchte das Loggen abbrechen und einen Wert in der Browserkonsole sehen. Wie können wir das machen? jedes Element, an jedes HTML-Tag, das im JSX-Markup verwendet wird, können Sie einen Event-Handler übergeben, sodass wir Ereignisse, Klickereignisse, Mausereignisse, verschiedene Arten von Ereignissen haben Klickereignisse, Mausereignisse, und wann immer ich Event-Handler sage, beziehe ich mich auf die Funktion, die ausgeführt wird , wenn dieses Ereignis eintritt. Nehmen wir zum Beispiel dieses Button-Element. Wenn ich versuche, ein Attribut, das mit einem beginnt, von der Intelligenz aus zu übergeben , sehe ich eine ziemlich lange Liste verschiedener Ereignisse, die für dieses Element verfügbar sind. Onsubmit, onResize, onMouse, over onKeyUp usw. Im Moment interessieren wir uns für das onClick-Ereignis, also mache ich einfach onClick und für dieses Attribut auf dem Button-Element muss ich einen Event-Handler übergeben, eine Funktion, die ausgeführt wird, wenn der Klick erfolgt, also übergebe ich hier eine leere Funktion und innerhalb dieser Funktion werde ich console.log, „Hallo“ also wenn ich es speichere, gehe ich zurück zur App. Wenn ich jetzt auf den Button klicke, siehst du, dass Hallo jedes Mal gedruckt wird, wenn siehst du, dass Hallo jedes Mal gedruckt wird ich darauf klicke, sodass es tatsächlich funktioniert. In reinem JavaScript erhalten alle Event-Handler immer das Ereignisobjekt als erstes Argument, sodass diese Funktion hier in reinem JavaScript immer ein Ereignisobjekt erhält , das das Ereignis darstellt. Versuchen wir, das Loggen dieses Objekts hier abzubrechen. Mal sehen, ob es einen Unterschied gibt. Wenn ich also hier auf die Schaltfläche klicke, kann ich Hallo sehen und dann sehe ich das Event-Objekt. Dieses Event-Objekt ist also ein Wrapper um ein natives Event-Objekt, das du normalerweise mit reinem JavaScript bekommst, aber in React ist das etwas, das als syntaktisches Ereignis bezeichnet wird, also ist es im Grunde nur ein Wrapper natives Ereignis mit den wenigen React-Eigenschaften. Wenn Sie es sich ansehen, haben Sie hier einen Haufen verschiedener Eigenschaften sowie ein natives Ereignis, auf das Sie nur mit dem Ereignis event.native zugreifen können . Auf diese Weise können Sie bei Bedarf ein natives JavaScript-Ereignisobjekt abrufen. Aber meistens reicht es gerade aus, um sich synthetisches Ereignis zu beziehen. den meisten Fällen enthält es die Informationen, nach denen Sie suchen, falls Sie sie verwenden müssen. In diesem Fall benötigen wir also überhaupt kein Event-Objekt. Wir sind daran interessiert , der App etwas Interaktivität zu Lassen Sie uns sie jetzt ausprobieren und sehen, wie wir das tun können. Nehmen wir an, wir haben einen Zähler. Lassen Sie mich weitermachen und eine Variable erstellen. Nennen wir es „Lass den Zähler zählen , der bei eins beginnt“. Was ich nun tun möchte, ich wollte nur diesen Zähler hier anzeigen und jedes Mal, wenn ich auf die Schaltfläche klicke, möchte ich den Wert eins, 2, 3 usw. erhöhen . innerhalb des OnClick-Ereignishandlers versuchen, Lassen Sie uns innerhalb des OnClick-Ereignishandlers versuchen, diese Funktion hier in die App zu verschieben , damit sie schöner aussieht. Es sieht einfach ansprechender und einfacher zu lesen aus, also können wir diese Funktion hier erstellen und wir können sie onBtnClick nennen und ich werde sie einfach von hier kopieren, hier einfügen und für das onClick-Attribut werde ich btnClick weitergeben. Einfach so, sagen wir, innerhalb dieses Event-Handlers möchte ich den Zähler hier erhöhen, möchte ich den Zähler hier erhöhen also lassen Sie uns ihn anstelle des Konsolenprotokolls vielleicht behalten. Lassen Sie uns weitermachen und sagen, Zähler ist Zähler plus eins. Nichts besonderes. können wir sehen, dass es tatsächlich erhöht wurde? Gehen wir nach vorne und unten. Lassen Sie uns den Zählerwert anzeigen also verwende ich geschweifte Klammern um den Wert erneut in nur sechs zu interpellieren , da es einen variablen Zähler hat. Ich speichere es. Ich gehe zurück , ich sehe einen. Nur wir haben es anfangs, großartig. Wenn ich versuche, darauf zu klicken, passiert nichts. Aber warum ist das so? Das Problem bei diesem Ansatz ist, dass React nicht genau den gleichen Regeln folgt wie normales JavaScript. Wenn Sie also einfaches JavaScript verwenden und versucht hätten , eine sehr ähnliche Logik zu schreiben, hätte es funktioniert, aber nicht mit React. In React müssen Sie immer dann, wenn Sie einen Wert benötigen , der sich über einen bestimmten Zeitraum ändert, nachdem, sagen wir, über den Zeitraum der Interaktivität die Änderungen abgewertet haben, ihn als Status festlegen. In React muss ein Wert, der sich ändert, also ein Zustand sein. In nur einer Sekunde können wir jetzt unseren ersten Staat erstellen. Aber bevor wir das tun, lassen Sie mich Ihnen kurz erklären, warum das nicht funktioniert. Ich werde Paint öffnen und dir einfach schnell schreiben, wie React damit umgeht. In React gibt es das Konzept des erneuten Renderns. Bei einem erneuten Rendern wird die Komponente im Grunde auf der Webseite neu gezeichnet. Wenn wir state verwenden, löst state immer das erneute Rendern einer Komponente aus, und der Status beim nächsten erneuten Rendern wird aktualisiert. Aber wenn wir einfach solche Variablen erstellen und versuchen, sie zu aktualisieren, wird das nichts bewirken. Der Grund dafür ist , dass, wenn wir einfach versuchen, die Variable einfach so zu mutieren, dies nicht dazu führt, dass die Komponente erneut gerendert wird. Lebenszyklus einer Komponente basiert eigentlich auf erneuten Renderings. Wenn wir die Seite aktualisieren, wird die Komponente auf der Seite gemountet. Das bedeutet, dass es zum ersten Mal gerendert wird. Nehmen wir also an, dieses Quadrat hier steht für einen einzelnen Render. Die Komponente ist auf der Seite gemountet, sie wurde gerendert, sie wurde angezeigt. nun nach den React-Regeln Wenn ich nun nach den React-Regeln etwas auf dem Bildschirm aktualisieren möchte, wenn ich etwas innerhalb dieser Komponente aktualisieren möchte, muss ich dafür ein erneutes Rendern auslösen. Ungefähr auf diesem Bild wird es so aussehen. Dieses erneute Rendern wird zu einem anderen Rendern führen. Dies sind Frames und React wechselt über sie. Das ist also unser erster Render. Nehmen wir an, wir aktualisieren den Status. Auch hier ist der Status der Wert , der sich über einen bestimmten Zeitraum ändert. Der Status wurde aktualisiert, Statusaktualisierung löst ein erneutes Rendern aus, und jetzt haben wir eine Komponente , die erneut gerendert wurde. Nochmals, bei Variablen wird es nicht funktionieren, wenn wir sie einfach so verwenden . Der Grund für diese Variablenaktualisierung ist diese Zeile Nummer 9, sie löst kein erneutes Rendern aus und das ist ein Problem. Wir bleiben bei diesem ersten Frame und versuchen, diesen Zähler plus einen hier zu aktualisieren, und das ist nichts, es löst kein erneutes Rendern aus, was bedeutet, dass wir state für alle Werte verwenden müssen, von denen wir wissen, dass sie sich nach einiger Interaktivität über einen was bedeutet, dass wir state für alle Werte verwenden müssen , von denen wir wissen, dass bestimmten Zeitraum ändern werden . Jedes Rendern hier, also das ist das erste Rendern, das zweite Rendern, sie oszillieren voneinander, sie wissen nichts voneinander. Das erste Rendern weiß nicht , dass es ein zweites Rendern geben wird, und genauso wie das zweite Rendern nicht weiß ob es ein erstes oder ein vorheriges Rendern gab , oszillieren sie miteinander. All das wird intern vom React verwaltet, aber der Hauptpunkt hier ist, dass wir wissen müssen , dass wir, um etwas zu aktualisieren, eine Komponente zum erneuten Rendern auslösen müssen. Immer wenn ein Status aktualisiert wird, löst er das erneute Rendern einer Komponente aus. Wenn wir nun wollen, dieser Zähler aktualisiert wird und wie erwartet funktioniert, müssten wir von React aus etwas namens useState untersuchen. Oben werde ich einfach useState importieren und hier verwende ich named import from React. Was ist UseState? Im React gibt es ein Konzept von React Hooks. Was ist ein Haken? Hook ist im Grunde nur eine Funktion, mit wir den Lebenszyklus von Komponenten manipulieren können. Was ist der Lebenszyklus einer Komponente? Der Lebenszyklus einer Komponente ist nur ein Zeitraum , in dem etwas innerhalb der Komponente passiert. Es wird montiert, es wurde aktualisiert, es wird demontiert, das ist also der Lebenszyklus einer Komponente. Wir können React Hooks verwenden, um den Lebenszyklus dieser Komponente irgendwie zu manipulieren. UseState ermöglicht es uns also, einen Wert zu schaffen , der sich im Laufe des Lebenszyklus einer Komponente verändert. Wie wir es verwenden können. In unserer Komponente müssen wir nur useState als Funktion aufrufen. Auch hier sind alle React Hooks Funktionen. Übrigens beginnen alle React Hooks immer mit dem Präfix use. Das ist also die Konvention in React. Wann immer Sie etwas verwenden sehen, ist es definitiv ein React Hook. Wir nennen es als Funktion und als erstes Argument müssen wir den Anfangszustand übergeben. Was wird der Standardwert für diesen Staat sein? In unserem Fall wollten wir ihm den Anfangswert eins geben, also geben wir einfach eins weiter. Jetzt gibt diese useState-Funktion immer ein Array zurück. useState gibt immer ein Array mit genau zwei Elementen zurück. Lassen Sie uns weitermachen und ihn vorerst einen Rückgabewert nennen und versuchen, ihn auf der Konsole zu protokollieren und direkt in die Komponente zu schreiben. Mal sehen, was wir hier haben? Also aktualisiere ich die Seite und hier habe ich, wie ich dir gesagt habe, eine Reihe von genau zwei Elementen. Das erste Element ist zu diesem Zeitpunkt beim aktuellen erneuten Rendern ein Zustandswert, und der zweite Wert innerhalb dieses Arrays die Aktualisierungsfunktion , die wir aufrufen müssen , um diesen Status zu aktualisieren. Lass mich dir zeigen, was ich meine. In den meisten Fällen werden Sie sehen, dass wir eine Restrukturierung verwenden werden weil wir wissen, dass useState immer ein Array mit genau zwei Elementen zurückgibt, sodass wir eine Umstrukturierung getrost anwenden können. Das erste Element wird unser Status sein und das zweite eine Funktion, die wir aufrufen müssen, um den Status zu aktualisieren. Diese werden als Status- und Statusaktualisierungsfunktion bezeichnet , und wir können sie beliebig benennen. Unser Status wird Counter genannt, und die Aktualisierungsfunktion, um den Status festzulegen, werden wir ihn SetCounter nennen. Jetzt entferne ich diesen Let-Zähler ist eins. Ich entferne diesen Zeilenzähler plus 1, wir brauchen ihn nicht wirklich. Versuchen wir, unseren Zähler zu trösten. Wir mussten es eigentlich nicht stornieren, wir haben es schon hier. Wenn ich es speichere, aktualisiere ich die Seite, wir haben immer noch eine hier. Das ist unser Ausgangszustand. Wenn wir nun den Status aktualisieren möchten, müssen wir die Status-Aktualisierungsfunktion setCounter aufrufen. Zwischen Klick und Klick passiert, wir wollen den Wert erhöhen. Also, was wir tun können. Wir können setCounter aufrufen und müssen darin nur einen neuen Wert für diesen Status übergeben . Lassen Sie uns vorerst einfach einen statischen Wert angeben. Sagen wir 10. Ich speichere es, gehe zurück zum Browser, jetzt klicke ich auf die Schaltfläche und Sie sehen, dass der Wert auf 10 geändert wurde. In der Konsole ist wichtig , dass Sie hier Hallo sehen. Was passiert ist, ist, dass beim Klicken auf die Schaltfläche SetCounter aufgerufen wurde der Status von eins auf 10 aktualisiert wurde. Dann fand das erneute Rendern statt. Wenn wir hier zu diesem kleinen Diagramm zurückkehren, ist das, was passiert ist, dass diese Komponente auf der Seite gerendert wurde. Wir klicken auf die Schaltfläche, wir haben den Status aktualisiert, und diese Statusaktualisierung hat das erneute Rendern ausgelöst. Der zweite Frame hier stellt unser aktuelles Rendern dar , wobei der aktuelle Status 10 ist. Warum sehen wir hier das Konsolenprotokoll? Tatsächlich sehen wir hier das Konsolenprotokoll, weil wir es in onBtnClick haben. Aber was ist, wenn wir das Konsolenprotokoll hier außerhalb von onBtnClick platzieren . Lass es uns noch einmal versuchen. Ich aktualisiere die Seite. Wir sehen zuerst zwei Konsolenprotokolle, aber das ist zu erwarten, denn wie Sie sich erinnern, habe ich Ihnen im vorherigen Video über React StrictMode gesagt, es war beabsichtigt die Komponente zweimal zu rendern, um Fehler zu erkennen, aber das ist nicht der Punkt, oder vielleicht wird das der Punkt sein. Lassen Sie mich React StrictMode für eine Sekunde entfernen . Ich aktualisiere die Seite. Wir sehen ein Konsolenprotokoll hallo, weil die Komponente gemountet wird, die Logik innerhalb der Komponente läuft, wir sehen das Konsolenprotokoll. Großartig. Aber wenn ich jetzt auf die Schaltfläche klicke, sehen wir, dass der Wert aktualisiert wird, die Komponente gerendert wird und wir sehen zum zweiten Mal Hallo. Wir sehen das, weil auch hier bei jedem neuen Rendern die Logik innerhalb der Komponente erneut ausgeführt wird. Javascript wird erneut ausgeführt, wenn die Komponente erneut gerendert wird, sodass der Status beibehalten wird, da useState eine interne React-Funktion ist. Nun, es wird vollständig auf React verwaltet, sodass der Wert, der sich im Laufe der Zeit ändert , von React verwaltet wird. Es ist hartnäckig. Alles ist cool. Aber wir sehen hier das Konsolenprotokoll, weil, nun, das ist etwas, das wir in die Komponente bringen und die Logik wird erneut ausgeführt, also sehen wir es ein zweites Mal. Wenn wir kurz davor sind, den Status erneut zu aktualisieren, wenn die Komponente das nächste Mal neu gerendert wird, erscheint ein weiteres Hallo usw. Sie werden jedes Mal Hallo sehen, Sie werden jedes Mal Hallo sehen wenn die Komponente erneut gerendert wird. Aber was passiert, wenn ich erneut auf den Button klicke? Siehst du, ich klicke noch einmal darauf und wir sehen kein Hallo mehr. React ist intelligent genug, um zu erkennen dass der Status derselbe bleibt, sodass der Wert gleich bleibt. React ist intelligent genug, um die Komponente nicht immer wieder zu aktualisieren. Es führt nicht ständig eine Neuberechnung durch wenn der Zustandswert derselbe ist. Lass uns weitermachen und versuchen, einfach den Zähler zu erhöhen. Wir können Zähler plus 1 machen, einfach so. Wenn ich jetzt die Seite aktualisiere, klicke ich auf die Schaltfläche, ich sehe 2, ich sehe Hallo, weil die Komponente erneut gerendert wird. Ich klicke erneut auf den Button und jetzt das Hallo, wir sehen 3 und so weiter und so weiter. diesem Ansatz mit der Aktualisierung des Zustands müssen wir jedoch einen etwas anderen Ansatz verwenden, wenn wir einen neuen Wert für diesen Zustand festlegen müssen und einen neuen Zustandswert aus dem aktuellen Zustandswert berechnen möchten Zustand festlegen müssen und einen neuen Zustandswert aus dem aktuellen Zustandswert berechnen Zustandswert aus dem aktuellen Zustandswert . Anstatt einen Zähler plus 1 zu machen, können wir tatsächlich einen alternativen Callback an die State-Update-Funktion übergeben . Status-Aktualisierungsfunktion kann eines von zwei Argumenten empfangen. Entweder ein neuer Zustandswert, genau wie Sie gesehen haben, also 5, 10, neuer Wert, der die Voraussetzungen bereitet, oder wir können einen Callback an diese Zustandsupdate-Funktion übergeben, und innerhalb dieses Callbacks ist das erste Argument ein Wert, aktuellen Status darstellt. Sagen wir Stromzähler. Was auch immer wir von diesem Callback zurückgeben , wird als neuer Wert festgelegt. Nach diesem Rückruf können wir jetzt den aktuellen Zähler plus 1 zurückgeben . Es wird dasselbe sein und aus Benutzersicht wird nichts geändert, aber intern ist dies der richtige Ansatz, wenn Sie einen neuen Zustandswert aus dem aktuellen oder vorherigen Zustandswert berechnen müssen neuen Zustandswert aus dem aktuellen oder vorherigen Zustandswert berechnen . Da dies der Zähler ist und wir ihn erhöhen möchten, müssen wir den aktuellen Zählerstatus kennen. Sie in dieser Situation Verwenden Sie in dieser Situation immer den Callback-Ansatz. Wenn wir es nur auf eine Zufallszahl setzen wollten, brauchen wir es nicht wirklich, da wir den aktuellen Status nicht benötigen , um den neuen Status zu berechnen. Wir kehren zur App zurück. Ich erfrische mich. Auch hier hat sich, wie ich Ihnen gesagt habe, aus Benutzersicht nichts geändert. Mit so etwas können Sie Elemente auf der Seite manipulieren. Basierend auf diesem einfachen Grundwissen werden alle React-Apps einfach so erstellt. Sie haben mehrere Staaten. Sie können so viele Staaten erstellen, wie Sie möchten. Sie können sie nach Belieben manipulieren mit verschiedenen Ereignissen beim Klicken auf Ereignis, Schweben, wenn etwas geöffnet wird, etwas geschlossen wird, alles wird mit solchen Zuständen verwaltet. Ich denke, für dieses Video wird das reichen. Jetzt weißt du über React-Events , an die du etwas weitergeben kannst. Für dieses Attribut können Sie einen beliebigen Event-Handler übergeben , um eine Funktion auszuführen , wenn ein Ereignis eintritt. Dieser Event-Handler erhält immer ein Ereignisobjekt als erstes Argument, falls Sie es benötigen. Wenn du es nicht tust, nun, benutze es einfach nicht. Wenn Sie einen Wert auf der Seite, den Farbzähler, den Text oder was auch immer aktualisieren Farbzähler, den Text oder müssen, haben wir dafür eine Erklärung. Variablen funktionieren nicht , weil React nicht auf diese Weise funktioniert. React basiert auf dem Konzept des Re-Renderings, und um den Wert aller Renderings beizubehalten, müssen wir State verwenden. Wir können das tun, indem wir den Use-State-Hook verwenden. Hooks in React sind nur Funktionen, die Sie während des Lebenszyklus einer Komponente aufrufen , um Daten innerhalb der Komponente zu bearbeiten. Sowas in der Art. Im nächsten Video werden wir sehen, wie wir dieses Wissen nutzen und wie wir es in unserem Spiel anwenden können. Wir werden den Spielstatus erstellen und die Quadrate manipulieren, sodass der Status irgendwie aktualisiert wird, wenn wir darauf klicken . Wir sehen uns dort. 46. 07 Creating erstellen: Hallo. Im letzten Video haben wir über Interaktivität gesprochen, über Staat, was Staat ist, wie er uns helfen kann. In diesem Video können wir mit dem Status fortfahren, aber dieses Mal werden wir ihn in unserem Spiel anwenden. Im Vergleich zum vorherigen Video habe ich hier ein paar Dinge geändert. Ich werde nur sehr schnell auf diese Änderungen verweisen und die eslintrc-Konfiguration ist veraltet. Ich habe als Warnung keine unbenutzte Vars-Rolle gesetzt. Lassen Sie uns dafür eigentlich einen weiteren Commit hinzufügen. Vergabe von Balken reduziert die Erwärmung. Okay, das wird großartig funktionieren. Lassen Sie uns nun mit der Interaktivität fortfahren. Wenn wir also zum Board gehen, erstellen wir hier unseren Spielbrettstatus, der im Grunde unser Spielbrett darstellt. Aber die Frage ist, wie werden wir das machen? Wenn Sie sich erinnern, habe ich einmal erwähnt, dass es ein Array sein wird. Deshalb haben wir hier neun Elemente und sie beginnen alle mit Null. Sie beginnen einfach bei Null, nicht alle. Also, ich werde Paint hier öffnen. Ich sage dir, wie genau wir den Spielstatus mit einem Array darstellen können . Es wird eine Reihe von neun Elementen sein. Standardmäßig ist es also ein leeres Array mit neun Elementen. Und standardmäßig ist jedes Element null, okay. Standardmäßig haben wir zunächst ein Array mit neun Elementen, jedes Element wird Null sein. Dann, wenn wir auf ein Quadrat klicken. Unsere Quadrate werden also durch Indizes innerhalb dieses Arrays dargestellt . Das erste Quadrat hat den Index Null, das zweite Quadrat den Index eins, zwei und so weiter. Wenn wir auf ein Quadrat klicken, sagen wir, wir klicken auf ein Quadrat mit dem Index eins, wird sein Wert von Null auf x oder Null geändert , je nachdem, wer auf dieses Quadrat geklickt hat. Und einfach so werden wir den Staat verwalten. Irgendwann werden wir also ein Array von neun Elementen haben, jedes Element kann entweder eine Null sein , wenn das Quadrat nicht angeklickt wird, oder x oder Null, wenn das Quadrat angeklickt wurde. Lassen Sie uns weitermachen und intern werden wir zuerst useState aus React importieren. Innerhalb von Bord werden wir einen neuen Staat erstellen , den wir Quadrate nennen können. Setze Quadrate, es wird useState sein. Jetzt müssen wir zunächst ein Array von neun Elementen erstellen , und jedes Element ist standardmäßig Null. Dafür können wir hier nur einfaches JavaScript verwenden, sodass wir den Array-Konstruktor nicht mit neun als Array-Länge aufrufen können . Dann rufen wir die Punktfüllmethode und füllen das Array mit Nullen. Schließlich wird es ein Array von neun Elementen erzeugen , in dem jedes Element Null ist. Nun, wie können wir eigentlich jedes Quadrat jeder Komponente zuordnen , die ein Quadrat darstellt? Im Moment bestehen wir 0,1,2,3 und 4. Also werden wir stattdessen die Quadrate Null übergeben. Da das Quadrat also unser Zustand ist, wird es immer ein Array sein , das das erste Element aus diesem Array abgerufen hat. Für das zweite Quadrat können wir uns also das zweite Element schnappen und so weiter. müssen wir für jedes Quadrat tun. Machen wir weiter und machen das für jedes Quadrat. Also speichern wir es. Wir kehren zur App zurück. Diese Seite kann nicht erreicht werden. Das liegt daran, dass ich den Entwicklungsserver nicht besucht habe. Also, npm run dev. Ich gehe zurück und jetzt können wir sehen, dass unsere Quadrate leer sind. Nun, das wird erwartet, weil wir einen Nullwert haben. Wir bestehen Nullen. Und wenn Sie sich erinnern, wenn wir versuchen, Null anzuzeigen, wird es nicht ausgewertet. Es wird zu nichts und zu HTML führen. Nun, was können wir eigentlich tun? Sie können sehen, dass wir den Status irgendwie aktualisieren müssen, um die Quadrate zu aktualisieren, um den Zustand zu aktualisieren, wenn wir auf ein Quadrat klicken, wie können wir das machen? Wir sind also an Bord geblieben, aber wir haben die ganze Logik der quadratischen Komponente innerhalb der quadratischen Komponente. Was wir tun können, wir können Requisiten benutzen. Also können wir hier im Board eine Funktion definieren , die die Logik verwaltet, und wir können diese Funktion als Requisite an die quadratische Komponente übergeben . Also nochmal, wir setzen nur Requisiten ein, um einige Daten, einige Informationen an Komponenten weiterzugeben . Also hier, was werden wir tun? Wir werden eine neue Funktion namens handle square click erstellen . Diese Funktion erhält ein Argument. Wir werden diese Funktion mit einer Argumentposition aufrufen . Es wird der 0,1,2,3,4,5,6,7 sein und 8 wird der Index des Quadrats sein. Und innerhalb dieser Funktion werden wir etwas tun. Vorerst lassen wir es einfach leer. Also, wie ich Ihnen sagte, werden wir Eingabeaufforderungen verwenden , um Daten an Square zu übergeben. Was wir tun wollen, wenn wir auf dieses Quadrat klicken, dieses Handgriff-Quadrat wird kalt sein. Was können wir also tun, wir können onClick oder Squared Click weitergeben , wie auch immer Sie diese Requisite benannt haben. Nennen wir es einfach onClick. Und für diese OnClick-Requisite gehen wir weiter und bauen Square Click. Aber das Problem ist, dass, da wir das Handle quadrat click here übergeben, und wenn wir es auf diese Weise übergeben, dann nehmen wir das onClick hier innerhalb des Quadrats, und wir müssen diese Funktion innerhalb von square aufrufen und die Position als Argument übergeben , weil Handles Quadrate click das Positionsargument erhält. Also, wenn wir diese Funktion aufrufen, müssen wir diese Position übergeben. Aber das Problem ist, dass Square darüber eigentlich nichts wissen muss. Was wollen wir idealerweise tun, wir wollen nur die onClick-Funktion hier abrufen und für das onClick-Attribut wollen wir diese Funktion so übergeben. Und Square wird diesbezüglich keine Logik anstellen. Alles wird hier an Bord verwaltet. Um das zu tun, was wir hier für die onClick-Requisite tun können, können wir eine Funktion übergeben, und diese Funktion ruft handleSquareClick mit der Position auf, die wir benötigen. Irgendwann sieht es also ungefähr so aus. Wir können das sogar vereinfachen und den Funktionskörper entfernen. Jetzt sieht es prägnanter aus und es sieht so aus. Warum müssen wir eine Funktion übergeben , die eine andere Funktion aufruft? Warum können wir es so nennen? Nun, das Problem ist, wie Sie sich erinnern, dass, wenn die Komponenten auf der Seite eingebunden werden, JavaScript innerhalb der Komponente ausgeführt wird, und mit dieser Syntax, etwas JavaScript, gehen wir Zeile für Zeile vor, und sobald JavaScript Licht verwendet, wird es sehen, dass wir diese Funktion einfach hier in dieser Zeile aufrufen. Was es also tun wird, es wird diese Funktion sofort write aufrufen . Und was auch immer die Funktionsstörung zurückgibt, wir werden gesetzt, hier wird der Wert für onClick prop übergeben, da unsere Funktion nichts zurückgibt, sie wird undefiniert sein, und irgendwann wird onClick hier innerhalb des Quadrats undefiniert sein. Nichts wird passieren. Wir werden diese Funktion „write straightaway“ und am Ende „ undefined“ haben. Das ist nicht genau das , was wir wollen. Zuallererst ist der Event-Handler in erster Linie eine Funktion. Deshalb übergeben wir eine Funktion, nichts anderes. Also übergeben wir eine Funktion , die Handles schnell mit den Argumenten aufruft , die wir benötigen. Nun, wie Sie sehen, müssen wir das für jedes Quadrat hier machen, einfach so und eine andere Position passieren , aber Sie können feststellen, dass es hier eine kleine Wiederholung gibt. Wir haben viele Dinge , die wir hier vereinfachen können. Anstatt also Werte, Quadrate, dann den Array-Index, dann onClick und das ständige Wiederholen von Handgriffen zu bilden, können wir diese Funktion vereinfachen. Wir können diese Syntax vereinfachen, indem wir eine andere Funktion verwenden. Also, was können wir hier tun, um diese Wiederholung zu vermeiden, hier im Board können wir eine weitere Funktion erstellen, die wir so etwas wie ein Renderquadrat nennen können . Dieses RenderSquare erhält wieder eine Position, die der quadratische Index sein wird , und innerhalb dieser Funktion können wir dann das JSX-Markup zurückgeben. Wir werden es einfach hier kopieren. Von RenderSquare aus können wir jetzt square zurückgeben, also statt Quadrate Null übergeben wir squares position und handleSquareClick. Anstelle von Null werden wir die Position bestehen. Irgendwann so etwas. In JSX verwenden wir jetzt geschweifte Klammern, um JavaScript hinein zu interpolieren. Da wir hier Variablen, die JavaScript-Ausdrücke sind, auf genau die gleiche Weise interpolieren können JavaScript-Ausdrücke sind, auf genau die , können wir hier Funktionen aufrufen, da Funktionen auch Teil von JavaScript-Ausdrücken sind . Anstatt alle Quadrate einfach so zu schreiben , was wir tun können, können wir einfach geschweifte Klammern öffnen und RenderSquare aufrufen und den Nullindex darin übergeben. Sobald die Komponente springt, wird diese Funktion mit Null als Argument aufgerufen , das die Position innerhalb der Komponente sein wird . Es gibt JSX-Markup zurück und dieses JSX-Markup wird an der Stelle interpoliert, an der diese Funktion gut aufgerufen wurde, im Grunde hier. Genau das Gleiche werden wir für den Rest unserer Quadrate tun . Ich kopiere es einfach zweimal. Ich entferne das, weil wir es nicht mehr brauchten, und ich werde genau dasselbe für die restlichen Quadrate tun, also 3, 4 , 5, 6, 7, 8. Auch hier rufen wir die Funktion auf, wenn die Komponente gemountet Diese Funktion gibt JSX-Markup zurück, und dieses JSX-Markup wird an der Stelle eingefügt, an der diese Funktion aufgerufen wird. Wenn Sie diese Funktion nur so referenziert haben, passiert nichts. Wenn ich zurückgehe, schauen wir mal, was passiert. Nun, wir sehen hier einige seltsame Dinge und wenn wir versuchen, es zu sehen, haben wir hier nur zwei Quadrate. Was wir gerade machen, im Grunde versuchen wir, die Funktion selbst anzuzeigen. Nicht das, was die Funktion zurückgibt sondern die Funktionssignatur naja und reagieren, es funktioniert nicht so, wenn Sie versuchen , Objekte so darzustellen, wie sie sind, werden Sie das nicht können. Sie müssen sie zuerst in Zeichenketten umwandeln, aber das werden wir jetzt nicht tun. Das ist eine etwas fortgeschrittene Sache und darauf werden wir in Zukunft zurückkommen. Wir nennen diese Funktion, wir übergeben ihr ein Argument und wir überprüfen, ob alles funktioniert. Wir haben unsere Komponente im Grunde nur leicht überarbeitet , aber sie macht genau das Gleiche. Es rendert den Wert an dem Index, den wir hier angeben, einen Wert aus unserem quadratischen Array, das der Zustand ist. In handleSquareClick müssen wir hier etwas Logik anwenden, also etwas Logik, um Quadrate irgendwie anzuzeigen. Um den Quadratstatus zu aktualisieren, müssen wir in unserem Fall die Funktion state update aufrufen , wenn wir die Quadrate indexieren. Das ist genau das, was wir tun werden. Da unser Status ein Array ist , das im Laufe der Zeit geändert wird, und unser neuer Array-Status , den wir berechnet haben , aus dem aktuellen Status berechnet werden muss , verwenden wir die Callback-Version von set state. Ich werde hier den Callback weiterleiten und das erste Argument wird zu diesem Zeitpunkt Square State sein. Ich nenne es CurrentSquares und wir müssen den CurrentSquares-Zustand irgendwie manipulieren und einen neuen und einen neuen Quadratstatus mit aktualisierten Werten erhalten. Ein Punkt, den ich im vorherigen Video nicht erwähnt habe, ist, dass wir die Zustandsvariable nicht mutieren können. Was meine ich damit? Wenn wir useState verwenden und versuchen, diese Quadrate zu nehmen und versuchen, so etwas zu tun, entsprechen Quadrate an einer bestimmten Position etwas. Was wir hier machen, wir manipulieren diesen Zustand direkt , anstatt diese Status-Update-Funktion zu verwenden , das wird nicht funktionieren. Dies ist auf diese Weise verboten, der Status wird nicht aktualisiert. In React funktioniert das nicht so. müssen wir ständig die Status-Update-Funktion aufrufen Dazu müssen wir ständig die Status-Update-Funktion aufrufen, also wird das auch hier nicht funktionieren. Wir nennen setSquares und innerhalb von Setsquares haben wir auch CurrentSquares, das den jeweiligen Bundesstaat darstellt. Wenn wir versuchen, den Staat hier erneut direkt zu mutieren, funktioniert das nicht. Das wird einfach nicht funktionieren. So funktioniert React nicht. Wir müssen die Funktion aufrufen und einen neuen Wert zurückgeben. Bei React geht es nicht darum, Werte direkt zu mutieren. React geht es darum, neue Werte zurückzugeben , wenn das für Sie Sinn macht. Aus den SetSquares müssen wir einen neuen Wert zurückgeben. Was wir tun können, um all unsere Quadrate zu wiederholen und sie irgendwie zu aktualisieren, wir können die Methode Array.map verwenden und die Methode Array.map verändert den Zustand nicht, sondern gibt einen neuen Array-Wert zurück. Deshalb ist es sicher, das zu tun. Ein gibt CurrentSquares.map zurück, also werden wir unseren quadratischen Zustand wiederholen. Unser erstes Argument wird der Wert sein, den wir gerade in einer Schleife überarbeiten, also wird es unser SquareValue sein. Dann haben wir den Index des Quadrats. Nennen wir es einfach Pos. Da wir in diesem Funktionsbereich bereits eine Position haben, kommt es zu einer Kollision von Variablen, wenn wir versuchen, sie Position zu nennen . Wir bleiben einfach auf dem Laufenden. Immer wenn ich von der.map für das aktuelle Element zurückgekehrt bin, wird diesem Element ein neuer Wert zugewiesen. Hier wird die Logik ziemlich einfach sein. Die Position, die wir an diese Funktion übergeben, ist die Position, auf die wir im Grunde klicken. Um uns nicht zu verwirren, benennen wir es tatsächlich in geklickte Position um und hier, Index in Array.map, rufen wir Position auf. Wir werden herausfinden, ob die angeklickte Position der Position des Quadrats entspricht , das wir betrachten In diesem Fall geben wir vorerst X aus der.map zurück. Andernfalls geben wir einfach denselben Quadratwert zurück, wenn das Quadrat, das im Moment in einer Schleife angezeigt wird , nicht das Quadrat ist, auf das wir geklickt haben. Jetzt speichern wir es, es sieht so aus, als ob es, wenn es formatiert ist etwas verwirrend sein könnte, weil wir eine Funktion haben , die Funktion aufruft , und innerhalb der Funktion haben wir einen Callback Gewöhnen Sie sich einfach daran, also kehren wir zur App zurück. Versuchen wir nun, auf ein Quadrat zu klicken. Ich klicke in die Mitte und zack, nichts passiert. Warum ist das so? Versuchen wir es hier im Konsolenprotokoll mit dem quadratischen Zustand. Mal sehen, was wir haben. Wir haben eine Reihe von Nullraten und wenn ich klicke, passiert eigentlich nichts. Mal sehen, was hier falsch sein könnte. Der falsche Teil hier ist, dass Sie sehen können die quadratische Komponente nicht gespeichert wurde. Das liegt daran, naja, was auch immer ich gerade hier geschrieben habe, es wurde nicht gespeichert, also wurden die Änderungen im Grunde nicht übernommen. Ich speichere es und jetzt sollte es funktionieren. Ich klicke auf das Quadrat und du siehst, jetzt habe ich X hier und wenn du hier siehst, wurde der Status aktualisiert. Da ich nun auf ein Quadrat mit dem Index 4, 0, 1, 2, 3, 4 geklickt habe, haben wir auf dieses Quadrat geklickt und innerhalb dieses Arrays das Element mit Index 5 aktualisiert und seinen Wert auf X gesetzt, und seinen Wert auf X gesetzt was genau das enthält, was wir brauchen. Wenn wir weitermachen und all diese Quadrate anklicken, werden Sie sehen, dass alle Quadrate mit Zugriff gefüllt werden, was genau das ist, was wir wollten, und wir sehen all diese Konsolenprotokolle ständig wieder. Denn seit wir diesen Status aktualisieren, rendert die Komponente die Logik in den internen Läufen erneut und wir sehen jedes Mal, wenn die Logik erneut ausgeführt wird, das Konsolenprotokoll. Großartig. So etwas können wir unseren Staat verwalten. Im Moment denke ich, dass das genug sein wird. Im nächsten Video stellen wir unsere Spieler vor. Wir werden tatsächlich den aktuellen Spieler haben, sodass wir unterscheiden können, wer als Nächstes auf dieses Quadrat klickt. Es wird entweder X oder Null sein, also können Sie jetzt sehen, dass wir nur X haben, was nicht gerade das ist, wonach ich suche. Im nächsten Video werden wir uns damit befassen. Wenn wir auf dieses Quadrat klicken, ist es entweder X oder Null. Wir sehen uns dort. 47. 08 Spieler X und O hinzufügen: hallo. Im vorherigen Video haben wir über diese Zustandsquadrate gesprochen, und wir haben es tatsächlich geschafft, X in das Quadrat zu setzen , wenn wir darauf klicken. In diesem Video werden wir weitere Funktionen hinzufügen. Wenn wir also auf das Quadrat klicken, Wenn wir also auf das Quadrat klicken können wir entweder x oder Null anzeigen. Mit anderen Worten, wir werden einen Spieler haben. Bevor wir neue Änderungen einführen, haben wir bis jetzt viele Änderungen gegenüber dem vorherigen Video vorgenommen. Wir haben diese Funktion hinzugefügt, wenn wir auf das Quadrat klicken, wir zeigen X darin an. Nun, lassen Sie uns weitermachen und diese Änderungen vornehmen. Ich tippe einfach git add ein. und ich nenne diese Commit-Nachricht, sagen wir mal Display X, wenn man auf ein Quadrat klickt. Lassen Sie uns den Server erneut starten. Fantastisch. Lassen Sie uns nun im Grunde eine Player-Funktionalität hinzufügen. Der Spieler ist etwas, das sich im Laufe des Komponentenzyklus ändern wird. Das heißt, es wird ein Staat sein. Was wir einführen werden, ist ein neuer Staat, und der Staat wird der Spieler sein. Wir werden diesbezüglich jedoch keine Komplikationen machen. Es wird nur ein einfacher boolescher Wert sein , der uns sagt , wer der nächste Spieler sein wird. Wir werden es so etwas wie ISXNext nennen. Wenn es wahr ist, setzen wir den Zustand auf x, andernfalls wird er Null sein, so einfach ist das. Innerhalb des Boards können wir weitermachen und einen neuen Status erstellen und ihn in isxNext umbenennen und die Funktionen aktualisieren, indem wir neuen Status erstellen und ihn in isxNext umbenennen und die Funktionen aktualisieren, isxNext setzen, und standardmäßig ist er falsch. Da wir bereits so ziemlich alles haben , was wir brauchen, werden wir nur diese Zeile 12 modifizieren. Hier geben wir x zurück. Es ist hier fest codiert. Aber stattdessen werden wir nur eine weitere einfache „wenn nicht“ -Bedingung einführen . Wir werden fragen. Wenn xNext ist, dann ist der Wert, den wir dem angeklickten Quadrat zuordnen , X , andernfalls wird er Null sein. Gleich nachdem wir den setSquare-Status aktualisiert haben, werden wir auch setisXNext aktualisieren. Wir werden es umschalten, da es ein Boolean ist. Ich rufe setisxNext auf, und da wir es umschalten müssen und es in der Reihenfolge umschalten wird, müssen wir den aktuellen booleschen Schalter kennen , der in diesem Moment entweder wahr oder falsch ist, und wir werden ihn einfach umdrehen. Wir werden wieder die Callback-Version von Set State Updater verwenden . Wir drücken auf Rückruf. CurrentIsxNext oder machen wir es einfacher. Nennen wir es einfach wie P oder prev für previous, oder lassen Sie uns ohne Komplikationen vorgehen, unabhängig von CurrentIsXNext. Um diesen booleschen Wert umzuschalten, müssen wir nur die Negation im Voraus anwenden, einfach so, und das war's. Was es tun wird, es wird das aktuelle boolesche Stadium erreichen. Es wird entweder wahr oder falsch sein, wenn es falsch ist, wenden wir Negation auf Falsch an, es wird wahr, und wenn das wahr ist, wenden wir Negation an, es wird falsch. Drehen Sie im Grunde den booleschen Wert um und wir tun es, nachdem wir den Status der gesetzten Quadrate aktualisiert haben. Wir machen das, wir kehren zu unserer App zurück. Wir klicken und jetzt haben wir zuerst Null. Jetzt klicken wir weiter, wir haben X und wir gehen los, und Sie können sehen, dass es hin- und hergeschoben wird und alles so funktioniert, wie wir es erwarten. Wenn ich jedoch erneut auf das Quadrat klicke, siehst du hier etwas geworfen. Das Problem ist, wenn wir auf das Quadrat klicken, die Logik erneut ausgeführt und das Quadrat am Index an der Position aktualisiert , auf die wir geklickt haben. Was wollen wir hier hinzufügen, eine weitere Bedingung. Wenn das Quadrat bereits einen Wert hat, wenn es nicht Null ist, dann führen wir diese Logik einfach nicht aus. Hier sind die oberen inneren Griffe quadratisch, wir können fragen, ob die Quadrate schon, clickedPosition, der Wert wahr ist. Wahrer Wert bedeutet nicht Null. Unser Quadratwert kann entweder Null, X oder Null sein. Wenn dieser Wert wahr ist, bedeutet das, dass er nicht Null ist. In diesem Fall kehren wir einfach von dieser Funktion zurück. Das Schlüsselwort return beendet die Funktion und geht nicht weiter. Wir speichern es. Mal sehen, unsere wird so aussehen. Ich klicke auf Quadrate und versuche erneut, auf das Quadrat zu klicken , und nichts passiert, weil es erneut den Zustand überprüft und die Funktion beendet. Ziemlich cool. So etwas, wir haben Spieler in unser Spiel aufgenommen. Unser nächster Schritt wird darin bestehen, oben die Nachricht anzuzeigen, wer der nächste Spieler sein wird. werden wir jedoch im nächsten Video tun . Vorerst werden wir unsere aktuellen Änderungen festlegen. Ich nenne diesen Commit. Was wir getan haben, lassen Sie uns überprüfen. Wir haben hier im Grunde einen Spieler vorgestellt. Hat einen Spieler in das Spiel eingeführt. Wenn Sie auf ein Quadrat klicken, zeigen Sie entweder x oder Null an. Das verpflichten wir uns, wir setzen es ein. Ich habe es falsch geschrieben. Drücken Sie Origin Master. habe ich nur, weil ich hinter den Kulissen etwas gemacht habe , als ich das Video ausgeschaltet habe. Entschuldigung, das solltest du nicht haben. Ich werde einfach das erste Flag einfach so verwenden und jetzt ist alles auf GitHub. Bitte mach dir nichts aus diesem Teil, du wirst ihn nicht haben. Großartig. Wir sehen uns im nächsten Video. 48. 09 Zeige nächsten Spieler und winner: Hallo. Im vorherigen Video haben wir es geschafft, unserem Spiel Spielerfunktionen hinzuzufügen. In diesem Video werden wir fortfahren und die Meldung hier oben auf dem Spielfeld anzeigen, die besagt, dass der nächste Spieler da ist und wenn wir einen Gewinner haben, zeigen wir den Gewinner an. In diesem Video werden wir all das sowie die Berechnung des Gewinners behandeln . Zuallererst, was wollen wir tun? Wir müssen entscheiden, was genau wir als Markup für die Nachricht verwenden möchten. Der nächste Spieler ist x oder Null. Nun, wir wollen es in App jsx machen. Hier nur ein einfacher H2-Tag, der besagt, dass der nächste Spieler vorerst jemand ist. Wenn ich zurückgehe, sieht es vorerst so aus. Wir haben jedoch bereits ein Problem. Was wir hier verwenden müssen um anzuzeigen, wer der nächste Spieler sein wird. Wie Sie sehen können, befinden sich die gesamte Logik und der Status in der Platinenkomponente. Das bedeutet, dass es für die Außenwelt nicht verfügbar ist. Die einzige Komponente , die über Quadrate und den gesamten Zustand und all diese Logik Bescheid weiß , ist die Platinenkomponente selbst Sie können alle Daten, die Sie von dieser Komponente benötigen, an ihre untergeordneten Komponenten weitergeben . Zum Beispiel, wie wir es mit Quadraten machen. Wenn wir von außen auf diesen Staat oder die Daten zugreifen wollen , ist das unmöglich. Wir haben hier zwei Möglichkeiten. Die erste Option besteht darin, den nächsten Spieler , der eine Nachricht innerhalb des Spielbretts ist , tatsächlich zu bewegen nächsten Spieler , der eine Nachricht innerhalb des Spielbretts ist . Vielleicht stell es hier hin. Wir haben im Rahmen dieser Nachricht alle Daten, die wir benötigen , sodass wir daraus etwas herausholen und es schließlich anzeigen können . Wir haben den nächsten Spieler. Diese oder die zweite Option besteht darin , einen Teil dieser Logik in die übergeordnete Komponente zu verschieben. Zum Beispiel an die App-Komponente und dann die erforderlichen Informationen über Requisiten an die Board-Komponente übergeben über Requisiten an die Board-Komponente und dann hier weitere Informationen, die für die Nachricht benötigt werden, pausieren . Wenn wir versuchen, es zu visualisieren, wenn wir Paint öffnen, haben wir ein solches Bild. Wir haben eine App-Komponente , die die Board-Komponente rendert , und auch innerhalb der App rendern wir Nachrichten. Es ist vorerst nicht Bestandteil, aber immer noch Teil der App, nicht Teil des Boards. Der Status wird hier innerhalb der Bordkomponente verwaltet. Da die Nachricht nicht Teil des Forums ist, hat sie keinen Bezug dazu. Es lebt wie ein separates Blatt, dann bedeutet das, dass es unmöglich ist, Zugang zu dem zu erhalten, was an Bord passiert. Die erste Option, die ich erwähnt habe, besteht darin, die Nachricht hier zu einem Teil der Board-Komponente zu machen . Wenn wir zum Board gehen und hier eine Nachricht posten, können wir auf Daten zugreifen, sodass wir sie hier verwalten können. Das ist die erste Option, aber das werden wir nicht tun, wir möchten, dass die Nachricht Teil der App-Komponente ist. zweite Option besteht darin , die Logik zu erhöhen, den Status auf die übergeordnete Komponente, die App, und dann die erforderlichen Daten mithilfe von Requisiten an die entsprechenden Komponenten zu übergeben . Die Logik wird in der App gespeichert und dann geben wir Daten über Requisiten an das Board weiter und dann übergeben wir weitere Daten an die Nachricht, in Zukunft wieder Requisiten verwenden. Moment ist es keine Komponente, aber die Idee ist dieselbe. Wir teilen Daten in der Patentkomponente. Wir öffnen das Board und vom Board aus nehmen wir den Status und verschieben ihn in die App-Komponente. Das Gleiche werden wir mit dem Import machen. Wir werden es in die App einfügen und auch den Quadratklick bearbeiten. Von nun an wird es live sein und innerhalb der App-Komponente verwaltet werden. Ich kopiere es hier. Ich habe es in die App gesteckt. Einfach so. Wir speichern das Board, aber Sie können sehen, dass wir im Board keinen quadratischen Mauszeiger mehr haben. Wenn wir den Mauszeiger bewegen, ist die Quadratwurzel nicht definiert, da sie hier nirgends erstellt wurde, das Gleiche gilt für Quadrate. Platinenkomponente hat jetzt diese undefinierten Werte. Nun, das bedeutet, dass wir irgendwie Zugriff darauf bekommen müssen und das werden wir durch Requisiten tun. Da wir jetzt Quadrate haben und Quadrat hier in der App verwalten, können wir es mit Requisiten an die Board-Komponente weitergeben. Ich werde hier einfach so Quadrate weitergeben und das Quadrat Click genauso handhaben. Jetzt kann ich innerhalb des Boards Destruct Link anwenden und Quadrate nehmen und das Quadrat anklicken. Wenn ich jetzt beide Dateien speichere, öffne ich meine App erneut. Alles funktioniert wie zuvor, aber jetzt lebt der Staat in der App, und alle erforderlichen Daten werden über Requisiten an die Leiterplattenkomponenten weitergegeben. Großartig. Das bedeutet, dass die Nachricht, die wir in der App-Komponente anzeigen, jetzt Zugriff auf den Status hat. Wir können die Nachricht anzeigen. Unsere Logik wird ziemlich einfach sein. Ich werde hier eine neue Variable erstellen und Ihnen sagen, warum. Wir nennen es eine Nachricht oder sagen wir eine Statusmeldung. Hier machen wir isxNext, wir geben x string zurück, andernfalls Nullzeichenfolge und eine Statusmeldung zurück , da sie verfügbar ist, werden wir sie in JavaScript interpolieren. Wir sagen, der nächste Spieler ist {Statusmeldung}, oder sagen wir, statt der Statusmeldung nennen wir ihn den nächsten Spieler. Der nächste Spieler ist der nächste Spieler. Wir speichern es und nächste Spieler ist Null. Fantastisch. Wir klicken. In der Tat war es Null, und Sie sehen, dass es sich geändert hat und es geht weiter und alles funktioniert wie erwartet. Möglicherweise haben Sie jedoch eine Frage, warum werden wir hier als Variable angezeigt? Warum gründen wir dafür nicht vielleicht acht Bundesstaaten? Die Sache ist, dieser nächste Spieler ist ein sogenannter abgeleiteter oder berechneter Zustand, und warum erstellen wir dafür nicht einen anderen Zustand mit use state? abgeleitete oder berechnete Status ist ein Wert, der vom letzten Status abgeleitet wird. Da wir isxNext als Status haben und wissen, dass bei jeder Ausführung der Komponente die interne Logik ausgeführt wird, was bedeutet, dass diese Codezeile bei jedem erneuten Rendern der Komponente erneut ausgeführt wird . Die Sache ist, wenn die Komponente erneut gerendert wird, wird der Status aktualisiert. Das bedeutet, dass für das aktuelle Rendering der Status, den wir hier haben, aktuell sein wird. Es ist der letzte Staat, den wir haben. Da diese Logik erneut ausgeführt wird, verwendet sie hier immer den neuesten Status isxNext. Deshalb müssen wir dafür nicht wirklich einen weiteren Staat schaffen. Wir erstellen einfach einen Wert, der vom neuesten Zustandswert abgeleitet wird. Nun, es klingt vielleicht etwas kompliziert, aber wenn Sie darüber nachdenken, ist daran nichts Raffiniertes. Wir haben bereits einen Wert, der sich ändert, und wir leiten tatsächlich etwas von diesem Wert ab. Nichts weiter als das. Deshalb müssen wir keinen weiteren Use State erstellen, das macht keinen Sinn. Jetzt haben wir die Nachricht , die besagt, wer der nächste Spieler sein wird , aber lassen Sie uns noch weiter gehen und den Gewinner anzeigen. Wann immer wir einen Gewinner haben, möchten wir ihn ausstellen. Der Gewinner ist dieser Typ, der nächste Spieler X. Wenn wir zu dem Gast zurückkehren , der am Anfang mit Ihnen geteilt wurde, und wenn Sie darin nach calculatewinner.js suchen, haben Sie hier eine Funktion: Gewinner berechnen. Lassen Sie uns diese Funktion kopieren. Kehren wir zu unserer App und dem internen Quellcode zurück, erstellen wir eine neue Datei und nennen sie winner.js. Falls Sie es bemerkt haben, haben wir diese Datei nicht mit der Erweiterung dot.js6 benannt , da diese Datei kein js6-Markup enthält. Es ist nur ein normales JavaScript. Von hier aus, aus der JS-Datei, werden wir die Funktion calculatewinner exportieren. Was es macht, es nimmt unser Quadrat Array, das wiederum, wenn Sie sich erinnern, ein Array ist, in dem wir unsere quadratischen Werte speichern; Null, X oder Nullen, und aus diesem Array berechnet es den Gewinner. Wenn es keinen Gewinner für Baumwollquadrate gibt, wird Null zurückgegeben. Wenn es einen Gewinner gibt, wird X oder Null zurückgegeben, was in Zeile 15 stattfindet. Wie funktioniert das? Wie funktioniert die Funktion? Hier haben wir eine Linienanordnung definiert, die im Grunde alle möglichen Gewinnkombinationen im Tic-Tac-Toe-Spiel darstellt . Zum Beispiel ist 0, eins und 2 die Kombination 0, 1 und 2, also wenn Sie Xs in einer Zeile haben. Sie können jede mögliche Kombination überprüfen , die Sie hier sehen. Auch hier ist es nur ein Satz aller möglichen Gewinnkombinationen. Was machen wir dann hier? Wir verwenden den einfachen For-Loop. Und wir schauen uns diese an. Wir gehen jede Gewinnkombination durch. Ich meine sehr einfach. Wir vergleichen unser aktuelles Quadrat mit einer Gewinnkombination. Wenn wir diese Gewinnkombination in unserem Quadrat-Staat und unsere Quadrate in der Reihe haben, wir einfach den Gewinner zurück. Hier verwenden wir die Array-Destrukturierung in Zeile 13. Linien in Augenposition stellen dieses Array dar. Aus diesem Array umschließen wir das erste, zweite und dritte Element und nennen sie a, b c. Für dieses Array wird zum Beispiel a Null sein, b wird eins sein, zwei wird c. Dann sehen wir, ob es einen Gewinner gibt, wenn wir diese if-Logik verwenden . Wenn Sie wirklich daran interessiert sind, wie es funktioniert, versuchen Sie einfach, die Werte selbst in diese, sagen wir, Formel einzubauen. Ein bisschen Logik hier. Wir kehren zur App zurück und können dies tun, indem wir diese Funktion einfach in der App-Komponente ausführen . Da wir Square State bestehen müssen und Calculatewinner als Gewinner ausgibt. Wir müssen keinen weiteren Staat gründen. Diese Gewinnervariable, die wir haben, wird wiederum der vom quadratischen Zustand abgeleitete Zustand sein. Ich werde hier weitermachen, vielleicht oben, ich werde die Gewinnervariable erstellen. Was ich tun werde, ich werde calculatewinner importieren. Dies heißt Export, also importiere ich es mit geschweiften Klammern von Winner. Ich nenne das hier Funktion und darin übergebe ich unseren quadratischen Zustand. Ich werde hier einen Gewinner haben. Lass uns versuchen, es zu protokollieren und zu sehen, was wir haben. Ich öffne die Konsole. In der Konsole habe ich Null, weil wir, naja, keinen Gewinner haben. Wenn ich das Spiel spiele, null, null. Lassen Sie uns einen Gewinner erstellen. Wenn ich jetzt hier klicke, habe ich die Gewinnkombination und Sie sehen, dass sie hier Null ergibt, denn jetzt haben wir einen Gewinner, und zwar Null. In diesem Fall müssen wir anzeigen. Lass uns weitermachen. Wir haben bereits, dass der nächste Spieler der nächste Spieler ist, aber wir werden diese Nachricht leicht ändern. Oder vielleicht werden wir es nicht anfassen. Hier erstellen wir eine weitere Variable , die wir zu diesem Zeitpunkt Statusmeldung nennen werden. Hier werden wir fragen, ob wir einen Gewinner haben, dann sagen wir, Gewinner ist Gewinner, die Variable, die wir haben. Wir müssen hier jedoch eine Zeichenkettenvorlage verwenden , um die Zeichenketteninterpolation anzuwenden. Ich werde diese Zeichenfolge in eine Zeichenkettenvorlage umwandeln indem ich normale singuläre Anführungszeichen durch hintere Häkchen ersetze. Dadurch kann ich die Interpolation verwenden, indem das Dollarzeichen und geschweifte Klammern verwende, sodass der Gewinner der Gewinner ist. Andernfalls verwenden wir, falls wir keinen Gewinner haben, verwenden Nachricht des nächsten Spielers, die wir bereits hier haben. Anstatt zu zeigen, dass der nächste Spieler der nächste Spieler ist, zeigen wir diesmal nur die Statusmeldung. Ich habe es falsch geschrieben. Es wird eine Statusmeldung sein. Schauen wir uns nun an, was wir hier haben? Wir haben also nur den nächsten Spieler, der nächste Spieler ist. Ich verstehe. Stattdessen müssen wir sagen, dass der nächste Spieler der nächste Spieler ist. Wir gehen zurück, wir haben den nächsten Spieler, der Null ist. Lass uns das Spiel spielen. Lassen Sie uns einen Gewinner erstellen. Jetzt sehen wir die Nachricht, Gewinner ist X. Großartig, weil wir einen Gewinner haben. Cool. Hier gibt es jedoch ein Problem. Wenn du versuchst, das Spiel zu spielen, wenn du weitermachst, können wir immer noch auf Quadrate klicken, aber das kann leicht behoben werden. Wir haben bereits die Logik , die Funktion zu beenden, wenn wir auf dasselbe Quadrat klicken zweimal oder dreimal auf dasselbe Quadrat klicken, nur mehrmals. Hier verlängern wir einfach diese Bedingung und wir werden es sagen. Wenn wir zweimal auf dasselbe Quadrat klicken oder wenn wir einen Gewinner haben, beenden wir einfach die Funktion. So einfach ist das. Lass es uns versuchen. Ich habe das Spiel gespielt. Wir haben jetzt einen Gewinner. Wenn ich auf eines der Quadrate klicke, lasse ich keine Logik laufen, weil wir hier enden weil das vielleicht falsch, vielleicht wahr ist, es spielt keine Rolle, aber hier stimmt es definitiv. Wir haben die Ausgangsbedingung. Einfach so, wir sind fast fertig mit unserem Spiel. Die einzige Funktion , die wir hier hinzufügen werden , ist die Spielhistorie. Wir werden in der Lage sein, durch den Spielverlauf zu navigieren. Wir werden unsere Spielzüge, die wir gemacht haben, verfolgen und zwischen ihnen hin- und herreisen können, aber das werden wir im kommenden Video regeln. Im Moment reichen diese Änderungen aus. Lassen Sie uns sie tatsächlich auf Git da wir hier viele verschiedene Dinge vorstellen werden. Ich öffne das Terminal, füge alles zur Bühne hinzu und benenne all diese Änderungen als, mal sehen, lass uns einen Überblick geben. Zuerst haben wir den Staat von Bord geholt. Es erschien in der App-Komponente und dann haben wir den Gewinner angezeigt. Nun, das ist eine Menge. Wir werden es Ihnen mitteilen, die Komponente „Status zur App“ angehoben und dem Benutzer eine Statusmeldung anzeigen. Keine Statusmeldung an den Benutzer, berechne den Gewinner. Machen wir es uns mit den Nachrichten nicht kompliziert. Ich denke, das wird ausreichen. Schließlich stellt Lead alles auf GitHub bereit. diesem tiefgründigen Hinweis Lassen Sie uns zu diesem tiefgründigen Hinweis dieses Video hinzufügen. Wir sehen uns im nächsten. 49. 10 Zeige game: hallo. In diesem Video werden wir weiterhin über Nachrichten sprechen, die wir dem Benutzer hier anzeigen. Der einzige Punkt, den wir vorherigen Video, in dem wir die Statusmeldung angezeigt haben, übersehen haben, ist die Auslosung des Spiels. Was ist, wenn wir das Spiel beenden , aber irgendwann keinen Gewinner haben? In diesem Fall möchten wir dem Benutzer eine weitere Meldung zeigen, dass, sagen wir, X und Null unentschieden sind, es also ein Unentschieden gibt. Um das zu tun, müssen wir hier mehr Logik anwenden. Aber wir werden das in einer Komponente tun , die wir speziell für Statusnachrichten erstellen werden. Innerhalb der Komponenten erstelle ich eine neue Datei, die ich Statusmeldung nennen werde. Dies wird die neue Komponente sein. Von hier aus erstelle ich eine Komponente für den Export von Statusnachrichten. Statusmeldung. Vorerst einfach so, es wird ein Div sein, das Hallo sagt. Außerdem muss ich es von hier aus exportieren. Dann werde ich in App JSX Quadrate aus quadrierten Komponenten importieren. Ups, Entschuldigung, nicht quadratisch, Statusmeldung. Dann werden wir hier anstelle der H2-Statusmeldung die Statusmeldungskomponente einfach so anzeigen. Also entfernen wir das. Jetzt sollte sich die Statusmeldung irgendwo in der Statusnachrichtenkomponente befinden. Wir haben hier jedoch keine Daten , weshalb wir erneut Requisiten verwenden werden, um alle erforderlichen Daten an die Statusnachrichtenkomponente zu übergeben. Wir haben hier die nächste Ebene und die Statusmeldung, wodurch sie direkt in die Statusnachrichtenkomponente verschoben werden. Wir haben kein ISXnext und wir haben hier keinen Gewinner. Aus diesem Grund erwarten wir, dass sowohl der Gewinner als auch ISXnext bestätigt wird. Die Gewinnerberechnung erfolgt hier. Die Sache ist jedoch, dass wir auch herausfinden müssen, wann wir keine leeren Quadrate und keinen Gewinner haben? Wir müssen diese Logik schreiben. Um Unentschieden anzuzeigen, müssen wir wissen, ob alle Felder mit etwas belegt sind und wir immer noch keinen Gewinner haben, diesen Wert zu erhalten, den booleschen Wert, der angibt , dass wir erneut Zugriff auf unseren Quadrat-Status benötigen . Wir werden es auch in der Statusmeldung benötigen. Wir werden es auch hier weitergeben. Winner, isxNext und Squares bleiben hier. Gib alles als Requisiten weiter. Also hier, wenn ich eine Komponente für Statusmeldungen rendere , gebe ich Winner, ich übergebe isxNext und ich gebe Quadrate weiter. Großartig. Nun, hier werden wir etwas verwenden, das als bedingtes Rendern bezeichnet wird. Nun, davon weißt du eigentlich nichts, aber wir haben hier in Zeile 3-5 bereits bedingtes Rendern angewendet . Beim bedingten Rendern wird einfach etwas angezeigt, das auf der Bedingung basiert. hier zum Beispiel Wenn ich hier zum Beispiel geschweifte Klammern in JSX öffne und sagen wir, eine einfache Bedingung schreibe , ist fünf weniger als 10. In diesem Fall zeige bitte div an, was bedeutet, dass fünf kleiner als 10 ist. Andernfalls zeige ein anderes Div an, das etwas anderes sagt. Was Sie hier sehen, wird als bedingtes Rendern bezeichnet. Ist im Grunde genau das, was wir hier machen. Anstatt hier einfach nur Zeichenketten zu verwenden, können wir einfach so JSX-Markup schreiben , und irgendwann sieht alles so aus. Aber wir brauchen kein JSX-Markup, wir brauchen einfache Zeichenketten, also belassen wir es so. Nun, was ist mit Draw? Was ist die Logik für die Anzeige von Draw? Wir müssen wissen, dass alle Felder auf dem Spielfeld belegt sind und wir keinen Gewinner haben. Um den booleschen Wert zu erhalten , der angibt, ob wir keine freien Quadrate auf dem Brett haben, erstellen wir eine weitere Variable, da es sich wiederum um einen abgeleiteten Zustand handelt. Wir nennen es „Keine Züge mehr“. Es wird die Methode squares.every.. every sein , die Methode , die als Löschen bezeichnet werden kann. Es wird entweder wahr oder falsch zurückgegeben. Wir leiten den Rückruf an alle weiter. Dieser Callback wird für jedes Element innerhalb eines quadratischen Arrays ausgeführt . Wenn jeder Callback, wenn der Callback für jedes Element den Wert true zurückgibt, dann wird der endgültige Wert irgendwann wahr sein. Wenn mindestens ein Callback False zurückgibt, der Endwert falsch. Das ist im Grunde der Name jeder. Der Callback hat genau die gleichen Argumente wie die Map-Methode. Zuerst haben wir das Element , das in unserem Fall der Quadratwert sein wird . Das ist genug, wir brauchen keinen Index und wir brauchen kein Array selbst. Wir prüfen einfach, ob der Quadratwert nicht gleich Null ist. Das überprüfen wir. Wenn nicht jeder Wert gleich Null ist, gibt die gesamte Bedingung den Wert wahr zurück. Wenn mindestens eine Quadratwurzel nicht Null ist, die gesamte Struktur, die gesamte Bedingung, den Wert Falsch zurück. Das ist genau das, wonach wir suchen. Jetzt nehmen wir einfach das Div und können hier mehrere Bedingungen anwenden. Wenn wir einen Gewinner haben, können wir etwas ausstellen. Hier ist der Trick, wie wir auch bedingtes Rendern anwenden können . Wenn wir einen Gewinner haben, können wir ein logisches Ende verwenden und dann jede gewünschte JSX anzeigen. Dies ist auch bedingtes Rendern und dies ist eine Alternative zum Schreiben. Wenn wir einen Gewinner haben, zeigen Sie dies an, andernfalls zeigen Sie bitte Null an. Wenn Sie sich erinnern, wird Null zu nichts ausgewertet und irgendwann wird nichts angezeigt, aber es könnte mühsam sein, jedes Mal zu schreiben, deshalb wählen die Leute normalerweise diese Art, Dinge zu schreiben. Aber du musst vorsichtig sein. Dieses Ding hier, wenn Sie nach der Bedingung suchen, muss es sich um einen booleschen Wert handeln. Wenn es kein boolescher Wert sein soll sondern etwas, das wahr ist, zum Beispiel Null, wird Null angezeigt. Null wird als falscher Wert betrachtet , dies ist jedoch kein boolescher Wert. Der Operator und funktioniert also nur, wenn diese Bedingung genau falsch zurückgibt. Wir müssen sicherstellen, dass dieser Wert boolesch ist, wenn Sie diesen Ansatz mit logischem Ende verwenden möchten . In unserem Fall ist der Gewinner bereits ein boolescher Wert, also müssen wir das nicht tun. In Zukunft werden Sie jeden Fall auf diese Situation stoßen, wenn Sie sich daran erinnern werden, insbesondere wenn Sie es mit einem Rennen und Daten zu tun haben, die von APIs stammen. Unsere Logik besteht darin, wie folgt zu sein. Wenn wir einen Gewinner haben, möchten wir den Gewinner als Gewinner anzeigen. Ich kopiere es einfach und lege es hier ab. Dann können wir hier ein weiteres bedingtes Rendern anwenden und sagen, wenn wir keinen Gewinner und keine Züge haben, können wir etwas anderes anzeigen. Wenn ich es speichere, wird es automatisch formatiert. Wir werden am Ende eine solche Struktur haben. Dann haben wir eine weitere Bedingung, in der wir keinen Gewinner haben und wir haben keine Knoten, die sich nach links bewegen. Aber dieses Ding sieht nicht hässlich aus, aber es könnte sehr unpraktisch und manchmal sehr schwer zu lesen sein. Anstatt das zu tun, können wir es besser lesbar schreiben. Wenn Sie sich also erinnern, was wir in der Board-Komponente gemacht haben, haben wir diese quadratische Renderer-Funktion erstellt , von der wir das JSX-Markup zurückgeben. Hier können wir genau den gleichen Ansatz anwenden und die Bedingungen für bedingtes Rendern in diese Funktion schreiben . Hier werden wir es erzählen. So etwas wie eine Statusmeldung rendert, okay? Diese Funktion akzeptiert nichts als Argumente, weil wir uns hier mit keinen Argumenten befassen. Wir erhalten Zugriff auf alle Daten, die wir im oberen Bereich haben. Hier werden wir nur fragen. Wenn wir einen Gewinner aus dieser Funktion haben, geben wir Gewinner als Gewinner zurück. Dann fragen wir, ob wir keinen Gewinner haben und wir keine Züge mehr übrig haben. Das bedeutet, dass wir ein Unentschieden haben, in diesem Fall zeigen wir die Höhe Null und x an. Ansonsten können wir technisch gesehen eine weitere Bedingung hinzufügen, zum Beispiel wenn wir keinen Gewinner haben und keine Züge mehr übrig haben In diesem Fall gehen die Spiele weiter und wir zeigen an, dass der nächste Spieler der nächste Spieler ist, so. Wir können es jedoch wie eine Standard-Rückgabeanweisung diese Funktion machen, weil es keinen Sinn macht, dies anzuwenden, weil dies die letzte ist und dann definitiv nur ausgelöst wird , wenn diese beiden fehlschlagen, also müssen wir es hier nicht wirklich überprüfen oder wir können es tun, lassen Sie es uns so belassen, lassen Sie uns nach dieser Bedingung suchen und unter Wenn wir in diesem Fall keine IF-Bedingung haben , die uns zufrieden stellt geben wir nichts zurück, nur für den Fall, dass bei uns etwas schief geht. Dies wird jedoch niemals passieren. Lass es uns in Div verpacken. Der nächste Spieler wird der nächste Spieler sein, wir brauchen kein Dollarzeichen, wir brauchen eigentlich nichts mehr, wir haben nur eine Render-Statusmeldung und statt all dieser seltsamen Konstruktion können wir einfach die Render-Status-Nachrichtenfunktion aufrufen. Jetzt sieht es viel lesbarer aus, nicht wahr? Wir kehren zu unserem Spiel zurück und sehen, dass der nächste Spieler da ist, was richtig ist Lass uns weitermachen und einen Gewinner erstellen und alles funktioniert wie erwartet, aber lass uns weiter gehen und eigentlich keinen Gewinner haben, naja, das ist schwer. Das ist nicht schwer, also wie Sie jetzt sehen können, sind alle Felder mit irgendwas belegt, aber Sie haben keinen Gewinner und irgendwann haben wir Null und X unentschieden, genau das, was wir gemacht haben, was großartig ist. Lassen Sie uns nun weitermachen und das stylen, denn Sie können sehen, dass wir diese Styles-Datei von Anfang an hier haben, aber wir haben nicht viel dagegen weil wir mit all diesen Funktionen beschäftigt waren. Lassen Sie uns also weitermachen und diese Statusmeldung stylen, Lassen Sie uns also weitermachen und diese Statusmeldung stylen da wir unsere Styles hier bereits haben. Wenn wir uns die Geschichte genauer ansehen, werden wir uns in Zukunft damit befassen, wir haben hier die Statusnachrichtenklasse definiert, großartig, also gehen wir hier zur Statusnachricht und zu diesem Wrapping-Element zu div. Lassen Sie uns eine Statusmeldung für den Klassennamen hinzufügen, wenn wir speichern, haben wir schon so, wir haben einen Rand, vielleicht machen wir daraus ein H2-Element, wie es zuvor war, aber eigentlich wird sich nichts wirklich ändern, weil wir die Schriftgröße haben, die hier eingestellt ist, großartig. Gehen wir jetzt los und fügen hier etwas hinzu , denn wie Sie sehen können, die Span-Elemente, die seit einer Statusmeldung gehen , auch die Schriftstärke normal, da ist wahrscheinlich, dass ich beabsichtigt habe, dass es dieses H2-Tag ist. Außerdem haben wir hier Klassen, Text grün und Texte orange, die wir auf unsere X- und Zero-Spieler anwenden können, also was ich tun werde, werde ich so machen, also für diese Null und X, die wir hier haben, können wir sie in solche Span-Elemente einwickeln, und zu diesem Span-Element können wir tatsächlich Pluspunkte hinzufügen. X wird grün sein und Null wird orange sein, also fügen wir die grünen Tags für x hinzu, für Null fügen wir den Plusnamen des Textes Orange hinzu, jetzt sieht es so aus, ziemlich cool. Als Nächstes müssen wir, wenn wir den nächsten Spieler haben, Stile irgendwie bedingt anwenden, nun, das , Stile irgendwie bedingt wenn wir den nächsten Spieler haben, Stile irgendwie bedingt anwenden, ist etwas Neues, über das wir noch nicht gesprochen haben, also müssen wir Klassen irgendwie bedingt anwenden. Auch hier werden wir den nächsten Spieler in die Spanne packen und den nächsten Spieler hier anzeigen, aber jetzt müssen wir auch dynamisch Klassen auf der Grundlage des Spielers anwenden, also für die Spanne geben wir den Klassennamen weiter und anstatt nur eine Zeichenfolge zu übergeben, übergeben wir einen JavaScript-Ausdruck, also verwenden wir dafür wieder Klammern und hier sind wir werde fragen. Wenn Xnext ist, wenden wir in diesem Fall die grüne Textklasse an, andernfalls wenden wir die orangefarbene Textklasse an. Da es sich also um ein JavaScript handelt, können Sie jede verfügbare Methode verwenden, um die Zeichenfolge irgendwie zu transformieren, anzuwenden, zu kombinieren , zu verketten, und schließlich wird sie hier als Zeichenfolge für den Klassennamen ausgewertet, also schauen wir mal. nächste Ebene ist Null und sie ist tatsächlich orange und während wir das Spiel spielen, können Sie sehen, wie sich die Farben ändern und die Farben funktionieren, was erstaunlich gut funktioniert. Am Ende haben wir also auch den Gewinner als Gewinner, also die gleiche Logik wie hier, wir werden uns für den Gewinner bewerben. Gewinner ist Gewinner, aber dieses Mal fragen wir, ob Gewinner gleich x ist, nur dann verwenden wir die Tags grün, sonst text, orange, lass uns schnell überprüfen, großartig, Gewinner ist x. Vielleicht eine Sache, die wir hier hinzufügen können und die für die Zukunft nützlich sein könnte und für uns jetzt ist, dass Sie jetzt sehen können, wann immer wir etwas anzeigen wollen, es ist immer in ein Element eingewickelt, in diesem Fall in ein H2-Tag, in div, aber was ist, wenn ich hier kein Div löschen, überhaupt kein Div anzeigen möchte ? Was ist, wenn ich nur Winner is anzeigen möchte, wie es mit dem span-Tag ist, ohne das in ein Div zu packen, weil wenn Sie Markup öffnen, es in das Div eingeschlossen ist, was ist, wenn ich das nicht tun möchte? Ich möchte nur Winner is und span ohne Div anzeigen , wie direkt in H2. In diesem Fall können wir etwas verwenden, React-Fragmente genannt wird, also ist das React-Fragment im Grunde nur ein leeres Element Wenn ich also das Div entferne und wenn ich React.Fragment eintippe, also importiere React aus React, weil jetzt der React-Namespace im Grunde eine Komponente ist, aber er ist wie eine leere Komponente, nur ein Platzhalter. Wenn ich React Fragment überall hier verwende, aktualisiere ich die Seite, ich spiele das Spiel, ich öffne Markup, ich öffne Markup, hier wird nichts gerendert, außer dass der Gewinner ist, entschuldigen Sie , außer dass der nächste Spieler in Span ist, ich hatte kein Wrapping-Element. Auch hier stellt das React-Fragment im Grunde ein leeres Element dar, aber das React-Fragment ist eine sehr breite Syntax und es ist gut zu wissen, dass Sie es immer verwenden können React-Fragment hat jedoch eine leichtere Syntax. Wenn Sie es entfernen und Ihre Klammern einfach so leer lassen, ist dies eine Kurzversion des React-Fragments. Wir können den React-Namespace von hier entfernen und React-Fragmente überall und einfach so leere Klammern behalten und es wird funktionieren, also das ist auch das React-Fragment, aber das ist eine kurze Syntax davon ohne explizit React.Fragment zu sagen, zögern Sie nicht, jede zu verwenden, ich bevorzuge diese Syntax, weniger Code, desto besser. jetzt sind wir mit den Statusmeldungen für immer fertig, also lasst uns weitermachen und unsere Nachrichten übertragen, entschuldigen Sie mich, unsere Änderungen, denn nun, wir haben viel getan, wir haben über bedingtes Rendern gesprochen, wir haben über bedingte Stile, dynamische Stile, dynamische Klassennamen gesprochen und wir haben auch die Auslosungsnachricht angezeigt, großartig. Jetzt habe ich bereits alles zum Stitch-Status hinzugefügt, diesmal verwenden wir die VSCode-Benutzeroberfläche, also klicke ich hier auf das „Plus“ -Zeichen, um alle Änderungen zu speichern, jetzt sind sie alle in Phase und wir können hier eine Nachricht eingeben und auf Commit drücken, aber ich bevorzuge es, alles manuell auszuwählen, aber ich möchte, dass es in Staging ist und dann manuell git commit und determine eingeben. Nachricht übertragen wird diese Komponente abspielen oder ja, Nachricht anzeigen, Nachricht anzeigen, Stile anwenden oder Statusnachricht , und das war's. Im nächsten Video werden wir mit der Spielhistorie beginnen, wir werden darüber sprechen, wie wir diese Spielhistorie-Funktion, die wir nutzen können, einführen können, das wird Spaß machen. Wir sehen uns dort. 50. 11 Implementierung von Spielverlauf: hallo. In diesem Video werden wir über die Geschichte des Spielens sprechen. Im letzten Video, das wir über Game Draw gesprochen haben, werden die Nachrichten , die hier oben erscheinen, angezeigt. nächste Spieler ist, wir haben einen Gewinner, wir haben ein Unentschieden, was unglaublich ist, aber dieses Mal werden wir über die Spielgeschichte sprechen , sodass wir auf jeden Zug klicken können , den wir gemacht haben, und dann durch die Geschichte reisen können. Um das zu erreichen, müssen wir unseren Staat tatsächlich transformieren. So wie wir derzeit einen Spielstatus verwalten, tun wir das, indem wir Quadrate und isxNext-Zustände verwenden. Das ist in Ordnung und wir werden es auch weiterhin so handhaben. Wir werden jedoch seine Form leicht ändern. Da Geschichte etwas ist, an das wir uns erinnern müssen weil wir sie durchqueren können, müssen wir sie irgendwie in eine Reihe verwandeln. Lass mich Paint öffnen und dir zeigen wie genau wir den Gaming-Status repräsentieren werden. Da es sich um eine Geschichte handelt, wird es eine Reihe von Elementen geben. Es wird ein Array sein und innerhalb dieses Arrays wird jedes Element ein Objekt sein. Es wird im Grunde ein Array von Objekten sein und jedes Objekt in diesem Array hat zwei Schlüssel, Quadrate und isxNext. Jedes Objekt in diesem Array repräsentiert den Zustand des Spielbretts zum Zeitpunkt unseres Zuges. Um den Überblick über die Züge zu behalten, die wir im Spiel machen, unserem CurrentMove, benötigen wir einen Zähler. Wir müssen irgendwie verfolgen, was unser CurrentMove ist , damit wir in dieser Geschichte reisen können. Wenn wir auf ein Historienelement klicken, sagen wir, wir gehen zu Zug Nummer 1, gehen wir tatsächlich zu Zug Nummer 1 und unser CurrentMove wird geändert. Dafür brauchen wir einen anderen Staat, der das nachverfolgt. Lassen Sie uns weitermachen und sehen wie das in der Realität aussehen wird. Hier oben in der App erstelle ich einen neuen Status , den wir history und setHistory nennen werden, und das muss ein Array sein. Standardmäßig haben wir bereits den Spielstatus, der leer ist, genau wie hier in den Zeilen 11 und 12. Wir erstellen ein leeres Array mit einem Objekt darin, und standardmäßig sind es Quadrate, was ein Array von neun Elementen sein wird was ein Array von neun Elementen sein , die mit Nullen gefüllt sind, und dann wird isxNext falsch sein, genau wie wir es hier haben. können wir getrost entfernen. Dann erstellen wir einen weiteren Status , der unseren CurrentMove darstellt . Wir machen weiter. Wir erstellen CurrentMove und setCurrentMove. Standardmäßig ist unser CurrentMove Null. Unser Zähler wird auf Null basieren. Großartig. Jetzt können wir sehen, seit wir alles geändert haben, wir haben hier viele Fehler. Lass uns das ändern. Wie können wir den neuesten Stand des Spielbretts abrufen, den wir hier haben? Wir können eine weitere Variable erstellen, die unser abgeleiteter Wert aus den Zuständen History und CurrentMove sein wird . Wir können es, sagen wir, GamingBoard nennen. Das wird Geschichte sein und unser CurrentMove. Eigentlich wird es uns dieses Objekt für unseren CurrentMove geben . Anstatt hier nur Quadrate zu analysieren, geben wir GamingBoard.Squares weiter. Sie können sehen, dass ich dafür sogar den IntelliSense habe. Fantastisch. Nun, handleSquareClick, wir werden das in einer Sekunde berühren. Gehen wir hier zur Statusmeldung. Moment analysieren wir zwei Requisiten, isxNext und Squares. Jetzt ist alles unter einem Objekt zusammengefasst. Wir können das Objekt einfach an die Statusmeldung übergeben. Was ich tun werde, ich werde GamingBoard einfach direkt zur Statusmeldung analysieren. Ich werde diese beiden Requisiten entfernen. Ich werde hier die Statusmeldung öffnen. Da ich GamingBoard analysiere, , anstatt isxNext und Squares zu destrukturieren werde ich GamingBoard verwenden, anstatt isxNext und Squares zu destrukturieren. Ich werde GamingBoard hier destrukturieren. Jetzt muss ich GamingBoard.Squares, GamingBoard.isxNext und auch hier GamingBoard.isxNext eingeben GamingBoard.isxNext . Aber was ich tun werde, da GamingBoard nur ein Objekt mit zwei Tasten, Quadraten und isxNext ist , werde ich hier eine weitere Destrukturierung anwenden. Was ich vom GamingBoard-Objekt aus machen werde, ich werde Quadrate und isxNext destrukturieren . Eine kurze Erinnerung. Das ist dasselbe. Diese einzelne Zeile ersetzt uns jedes Mal, wenn wir GamingBoard.Squares like that und GamingBoard.isxNext schreiben GamingBoard.Squares like . Fantastisch. Wir haben uns mit der Statusmeldung befasst. Kümmern wir uns um alles andere. Um an Bord zu kommen, analysieren wir Quadrate. Jetzt haben wir GamingBoard.Squares, und jetzt müssen wir uns irgendwie mit HandleSquareClick auseinandersetzen. Nun, die Logik ist, dass wir eine Geschichte haben und wann immer wir einen neuen Zug entwickeln, wann immer wir das Spiel spielen, müssen wir unser Array erweitern. Wir müssen diesem Array neue Werte hinzufügen. Lassen Sie uns das in HandleSquareClick tun. Zuerst haben wir jetzt GamingBoard.Squares hier. Dann werden wir statt Set-Quadraten setHistory machen und wir werden in einer Sekunde zu dieser Logik zurückkehren. anstelle von setisxNext Was werden wir anstelle von setisxNext tun? Wir werden einfach unseren CurrentMove erhöhen. Immer wenn wir auf ein Quadrat klicken, wird der Zug, der Zähler erhöht. Wenn Sie sich an unser Beispiel aus früheren Videos zum Thema Zähler erinnern , ist dies genau der Fall. CurrentMove, und wir können es intern CurrentMove nennen. Wir haben diesen Namen hier jedoch bereits als unseren Bundesstaat, also nennen wir ihn einfach Move. Zug wird Zug plus 1 sein. Wir werden es einfach noch einmal erhöhen. Move wird unseren aktuellen Status für CurrentMove darstellen . In setHistory werden wir es statt CurrentSquares CurrentHistory nennen, und jetzt müssen wir die Historie irgendwie erweitern. Zuallererst müssen wir unseren aktuellen Spielstand kennen. Um das zu tun, müssen wir das neueste Element aus dem History-Array abrufen . können wir tun, indem wir tippen. Lassen Sie uns vielleicht die Variable lastGamingState nennen , die Geschichte sein wird , und wir holen uns das letzte Element, indem history.length minus 1 eingeben. Auf diese Weise können wir das neueste Element aus dem History-Array abrufen , das wiederum ein Objekt dieser Form sein wird. Was wir nun tun können, ist, wir tatsächlich einen neuen Status berechnen können dass wir tatsächlich einen neuen Status berechnen können, den wir dem History-Array hinzufügen werden. Wir haben hier bereits die Logik. Anstatt return setzen wir es in eine neue Variable namens NextGamingState. Anstelle von CurrentSquares verwenden wir LastGamingState.Squares und anstelle von isxNext werden wir LastGamingState.isxNext verwenden. Um nun den neuen Wert für den History-Status festzulegen, müssen wir von diesem Callback zurückkehren. Ausgehend von diesem Rückruf, dem, was wir tun werden, werden wir das, was wir gerade hier erstellt haben, NextGamingState, mit unserem aktuellen Geschichtsstatus verknüpfen. Wir können dafür die Methode array.concat verwenden. CurrentHistory.concat und wir werden hier ein neues Objekt vorstellen. Wir müssen ein Objekt dieser Form analysieren. Squares wird NextGamingState sein. Wir haben es NextGamingState genannt, nennen wir es NextSquaresState. Wir werden es so analysieren. isxNext wird wieder die Umkehrung eines Booleschen Werts sein, wie wir es zuvor getan haben, aber dieses Mal beziehen wir uns auf unseren latestGamingState, den wir hier haben, also latestGamingState.isxNext. Wir wenden Negation an, um den Booleschen Wert umzukehren , und alles wird jetzt auf magische Weise funktionieren. Gehen wir zurück und versuchen wir Konsolenprotokollverlauf und CurrentMove, beide, auszuprobieren, um zu sehen, was tatsächlich vor sich geht. Wir gehen zum Konsolenprotokollverlauf und zu CurrentMove. Übrigens protokolliere ich beide auf der Konsole im Objekt. Ich mache das nur nach meinen persönlichen Vorlieben. Auf diese Weise ist es einfacher , sie in der Konsole anzuzeigen. Es gibt keinen besonderen Grund dafür. Sie können sie einfach so auf der Konsole protokollieren , nacheinander. Wenn Sie sie jedoch auf der Konsole als Objekt protokollieren, ist es einfacher, sie anzuzeigen. Wir gehen zurück zum Spiel, wir inspizieren, wir sehen die Konsole, wir öffnen das Objekt. Wir haben CurrentMove, Null, wir haben History, das ist ein Array. erste Element ist dieses Objekt mit Nullquadraten. Lassen Sie uns nun das Spiel spielen und sehen, wie sich das ändert. Ich klicke mehrmals irgendwo und wenn ich diese öffne, kannst du sehen, dass unser CurrentMove-Index für den nächsten erhöht wurde und bei jedem nächsten Zug der Index erhöht wird. Wächst. Anfangs war es nur eine Reihe von Nullen innerhalb des ersten Elements, dann haben wir das Spiel gespielt, das haben wir dem History-Array hinzugefügt, dann haben wir erneut gespielt, wir haben mehr Elemente zur Historie hinzugefügt, sodass wir es auf diese Weise verfolgen können. Die Frage ist nun, wie können wir es tatsächlich anzeigen? Da wir ein Array haben, ist das sehr einfach. Wenn wir zur App-Komponente zurückkehren, müssen wir sie hier irgendwie anzeigen. Ich schlage vor, eine weitere Komponente im Ordner der Komponente zu erstellen , die wir History nennen werden. Dies wird ein Bestandteil der Geschichte von Yan sein. Wir werden es standardmäßig aus History JSX exportieren. Vorerst wird es nur eine leere Funktion sein. In der App werde ich den Verlauf aus der Komponentenhistorie importieren . Ich werde nach unten scrollen und diese Verlaufskomponente unter Bord rendern . Ich speichere es, und jetzt wollen wir in der Historie irgendwie alle Schritte anzeigen, die wir gemacht haben. In der Realität sieht es so aus. Wenn Sie ein Array von Elementen haben, möchten Sie normalerweise, dass jedes Element etwas im Markup darstellt. Wenn wir zum Beispiel eine Liste von Früchten haben, die als Array dargestellt werden, sagen wir Apfel, Kiwi und etwas anderes in React, sieht das normalerweise so aus. Sie nehmen ein Array von Elementen und ordnen jedes Array-Element dem JSX-Markup zu. Diese Apfelzeichenfolge wird in div umgewandelt, wodurch diese Apfelzeichenfolge angezeigt wird, und dasselbe gilt für die übrigen Elemente. An die Geschichtskomponente übergeben wir unser History-Array als History-Requisite. In der Geschichte können wir es stützen, indem wir das Objekt verwenden, das vom Requisiten ablenkt. Von der Komponente aus kehren wir zum JSX-Markup zurück, die umschließenden Elemente sind div, und dafür verwenden wir ein geordnetes Listenelement. Hier müssen wir jedes Array-Element in unserer Geschichte dem JSX-Markup zuordnen. Ich öffne geschweifte Klammern, um JavaScript in JSX zu interpolieren. Ich werde history.map machen. Jetzt, vorerst ohne zusätzliche Logik, die div anzeigen wird, also von d.mapcallback, ich auch JSX-Markup zurück und sage hier Hallo. dich jetzt nicht um die rote Nachricht, wir können sie in einer Sekunde anhängen. Speichern wir es einfach und schauen wir, was wir haben. Wir haben Hallo. Wir haben das Spiel gespielt und Sie können sehen, dass jedes unserer Array-Elemente tatsächlich dem entsprechenden Div innerhalb von HTML zugeordnet ist . Da wir sechs Elemente haben, wurde jedes Element hier dem Div zugeordnet. Mir ist übrigens gerade aufgefallen, dass wir auch etwas falsch gemacht haben, weil wir hier nur diese anzeigen. Lass uns sehen. Ich habe irgendwie die Logik geändert. Lassen Sie uns schnell überprüfen , ob es funktioniert. Großartig. Ich habe davon gesprochen, dass jedes Array-Element dem entsprechenden Div zugeordnet ist. Das haben wir mit der Methode.map gemacht. Sie haben jedoch bereits bemerkt, dass in der Konsole eine Warnung angezeigt wird, und wenn ich den Mauszeiger hier bewege, wird es dasselbe sein, Schlüsselstütze für das Element im Iterator fehlt. Die Sache ist, wenn Sie.map innerhalb des JSX-Markups verwenden , um das Array-Element JSX zuzuordnen, müssen Sie immer die Schlüsseleigenschaft für die JSX-Elemente übergeben , die zugeordnet werden. Der Grund dafür ist, dass React intern jedes Element verfolgen muss , das Sie dem JSX-Markup zugeordnet haben, falls es in Zukunft geändert wird. Der Grund dafür ist , dass dieses Array dynamisch ist jedes zugeordnete JSX-Element innerhalb dieses Arrays eindeutig dargestellt werden muss. Um zu helfen, eindeutig dargestellt zu reagieren und jedes Array-Element eindeutig zu identifizieren, müssen wir die Schlüssel-Requisite übergeben und die Schlüssel-Requisite muss für jedes Element eindeutig sein. In unserem Fall ist jedes Array-Element ein Objekt, Quadrate und IsNext-Schlüssel, sodass wir hier nichts Besonderes haben. Was wir in einfachen Fällen tun können, wir können einfach einen Array-Elementindex als Schlüssel übergeben , weil er für jedes Element eindeutig ist, weil er für das erste Element Null ist, für das zweite, eins usw. Es identifiziert das Element in diesem Array eindeutig. Es wird für unseren Fall ausreichen. Wir werden uns diesen Index hier holen. Zuerst haben wir das Objekt mit den Quadraten und isNext. Wir brauchen es nicht, aber wir müssen es trotzdem definieren, weil wir sonst den Index nicht abrufen können , der als zweites Argument dient. Da wir kein Objekt verwenden werden, das es Unterstrich nennen wird, und wir werden den Index abrufen. Für den Schlüssel werden wir den Index einfach so übergeben. Wenn ich es speichere, wenn ich es aktualisiere, können Sie sehen, dass jetzt alles beim Alten geblieben ist, aber wir haben keine Probleme mehr mit dem Schlüssel, da jetzt jedes Element innerhalb des Arrays eindeutig identifiziert ist. Jetzt haben wir hier den Index, und wir können ihn auch innerhalb des Div interpellieren und diesen Index anzeigen. Was wir hier sagen können, ist der Index. Mal sehen, was haben wir? Wir haben Zug ist eins, Zug ist 2, 3 und 4. Großartig. Bisher sieht es ziemlich gut aus, aber zunächst möchten wir nicht anzeigen, dass Bewegung Null ist. Wir wollen so etwas wie ein neues Spiel anzeigen oder das Spiel starten. Wir werden hier bedingtes Rendern anwenden. Anstatt das zu tun, werden wir fragen, ob der Index gleich 0 ist, dann werden wir den Text für das neue Spiel wie diesen anzeigen. Andernfalls öffnen wir Backticks und sagen, geh zum Verschieben des Hashtags. Hier werden wir den Index anzeigen. Mal sehen, wie das aussieht. Wenn ich die Seite aktualisiere, haben wir standardmäßig ein neues Spiel. Wenn ich das Spiel spiele, können Sie sehen, dass wir jetzt viel sauberere Ergebnisse haben. Aber statt eines neuen Spiels, lassen Sie es uns vielleicht nennen, gehen Sie zum Spielstart. Tatsächlich können Sie sehen, dass sie überhaupt nicht anklickbar sind. Lassen Sie uns dieses Div in ein Button-Element vom Typ a Button konvertieren , ich speichere es und jetzt sehen Sie, dass es kaputt ist. Wenn Sie sich jedoch erinnern, haben wir unsere Styles in styles.css. Für diese Geschichte können wir diese Klassen, die hier bereits geschrieben sind, tatsächlich anwenden . Zuerst haben wir History-Wrapper , den wir div history-wrapper zuweisen können. Dann haben wir die Geschichte selbst. Dies wird unser ungeordneter Listenverlauf sein. Dann wird in der Historie jedes Li-Element gestylt. Nun, eigentlich richtig, weil wir vergessen haben, dass es das Element sein muss. Anstelle der Schaltfläche geben wir hier li ein und verschieben die Schaltfläche hinein. Wir haben immer noch diese Nachricht für den Schlüssel, weil ich dir gesagt habe, dass der Schlüssel zugewiesen werden muss und nur an das Wickelelement weitergegeben werden darf. Die Schaltfläche befindet sich in diesem Element. Das Element selbst ist eine Lüge. Ich muss ihm den Schlüssel für das Li-Element übergeben . Jetzt speichere ich es. Wir haben hier auch die Klasse btn-move. Wir können diesem Button ClassName btn-move geben. Mal sehen, das Ergebnis. Sieht soweit ziemlich gut aus. Sie können sehen, dass es viel, viel schöner aussieht. Aber die Sache ist, dass wir jetzt nichts tun können. Wir müssen irgendwie die Traversing-Funktion hinzufügen. Die Logik, wo wir das tun werden, wird in App jsx platziert. Wir haben bereits den Status CurrentMove, der angibt, in welchem Schritt wir uns gerade befinden. Hier können wir eine Funktion erstellen, die unseren CurrentMove ändert. Wir werden diese Funktion moveTo nennen. Dieser MoveTo wird ein Argument erwarten. Nennen wir es Bewegung. Was wird es tun? Es wird nur den Status auf den Vorgang aktualisieren , der gerade bestanden wird. Immer wenn wir sie MoveTo nennen, sagen wir fünf, wird MoveTo fünf gesetzt. Jetzt geben wir einfach diese moveTo-Funktion als solche Requisite an die Geschichte weiter. In der Geschichte schnappen wir uns MoveTo. Hier können wir dieses MoveTo an das onClick-Ereignis anhängen. Für dieses Button-Element spezifizieren wir den onclick-Event-Handler. Wir übergeben eine Funktion, die moveTo mit dem Index dieser Bewegung aufruft. So etwas. Ich speichere es. Ich aktualisiere die Seite. Lass uns das Spiel spielen. Wir haben hier mehrere Züge. Immer wenn ich hier klicke, habe ich moveTo keine Funktion, das liegt daran, dass ich App jsx wieder nicht gespeichert habe. Lass es uns noch einmal versuchen. Ich spiele es, ich klicke auf „Moves“ und du kannst sehen der Spielstatus tatsächlich ändert. Es funktioniert wie erwartet. Um es jedoch benutzerfreundlicher zu gestalten, möchten wir unseren aktuellen Schritt hervorheben , an dem wir uns gerade befinden. Wir kehren zum Code zurück und hier in der Geschichte können wir erneut dynamische Klassen anwenden. Wenn wir uns Stile ansehen, haben wir hier eine aktive Klasse, die btn-move gegeben werden kann. Wir haben bereits die Klasse btn-move, aber sie ist für alle Elemente statisch. Jetzt öffnen wir geschweifte Klammern. Wir werden hier btn-move weitergeben. Wir werden diese Zeichenfolge in eine Zeichenkettenvorlage umwandeln, damit wir die Zeichenketteninterpolation anwenden können, wodurch wir JavaScript in dieser Zeichenfolge verwenden können. Hier werden wir eine sehr einfache Logik anwenden. Wenn index oder sagen wir, CurrentMove gleich Index ist, dann wird dieses Element aktiv und diese Kacheln werden angewendet. Wir geben eine aktive Klasse, andernfalls geben wir ihr eine leere Klasse. Aber wir haben CurrentMove hier nicht , also müssen wir es wieder als Original und in App jsx erhalten . Ich werde unseren CurrentMove gleich hier oben weitergeben. CurrentMove ist gleich CurrentMove. Sowas in der Art. Lass uns sparen und mal sehen. Nun, jetzt wird es tatsächlich grün. Lassen Sie uns das HTML-Markup untersuchen. Wir haben btn-move und wir haben eine aktive Klasse. Genau das, was wir geschrieben haben, weil der Index des ersten Elements Null ist und CurrentMove standardmäßig Null Dies ist unser Anfangszustand. Wir spielen das Spiel und Sie können sehen wie sich der Klassenname ändert und das neueste Element standardmäßig immer eine aktive Klasse hat. Aber wenn wir auf „Verlauf“ klicken, um es zu bereisen, können Sie sehen, wie sich ClassName ändert. Ziemlich cool. Sowas in der Art. Versuchen wir jedoch, das Spiel zu spielen. Gehe zu einem Zug und spiele dann das Spiel weiter. Du kannst sehen, dass hier einige seltsame Dinge vor sich gehen. Das Problem ist, dass unser Spielstatus nicht mit dem Schritt übereinstimmt, zu dem wir zurückgekehrt sind. Das ist problematisch. Was wir tun wollen, wenn wir durch die Geschichte reisen und wenn wir auf das Quadrat klicken, wollen wir die Geschichte überschreiben. Jetzt müssen wir hier eine weitere Logik hinzufügen , um das zu erreichen. Wir müssen erkennen, ob wir die Geschichte durchqueren , und wenn wir sie durchqueren, wollen wir sie überschreiben. Ansonsten wollen wir es so lassen, wie es jetzt ist. Kommen wir zurück zu App jsx und Insights Set History. Lassen Sie uns zunächst feststellen, ob wir eine Route durchqueren. können wir tun, indem wir die neue Variable isTraversing einführen. Die Logik wird die nächste sein. Wenn unser CurrentMove plus 1 nicht CurrentHistory.Length entspricht. Dann können wir versuchen, es auf der Konsole zu protokollieren und zu sehen, ob das stimmt und warum wir den aktuellen Zug plus 1 ausführen. Lassen Sie uns erneut einen CurrentMove trösten und protokollieren Sie history.length. Nennen wir es seine Geschichtslänge. Mal sehen, warum wir hier plus 1 hinzufügen müssen? Wenn ich „Konsole“ öffne und das Spiel spiele, siehst du, dass unsere Historienlänge immer plus 1 ist. Dann der CurrentMove , den wir haben. Dies liegt daran, dass die Mindestlänge der Historie eine ist , die hier von unserem Standardstatus festgelegt wird, während CurrentMove auf einem Index von Null basiert. Um das zu normalisieren, müssen wir zum aktuellen Zug plus 1 addieren, damit sie zueinander passen. Wir überprüfen einfach. Wenn „CurrentMove“ der Länge entspricht, die wir haben, dann wissen wir, dass wir uns im letzten Zug befinden und nicht die Geschichte durchqueren. Aber wenn wir nicht gerade bei unserem letzten Zug sind, dann durchqueren wir, so etwas in der Art. Jetzt müssen wir irgendwie auch unseren „LastGamingState“ ändern , denn wann immer wir unseren letzten Zug machen, verketten wir immer, wir fügen die aktuelle Spielhistorie am Ende des Arrays hinzu. Wenn wir jedoch überschreiben wollen, wollen wir die Historie erweitern, die sich zum Zeitpunkt dieses Schritts befindet. uns egal Zug Nummer drei und was auch immer darunter liegt, ist uns egal. Im Moment interessieren wir uns nur für Geschichte. Wir müssen hier die folgende Logik schreiben . Wir müssen es ändern. Wir können fragen, ob wir auf der Durchreise sind, in diesem Fall nehmen Sie bitte die aktuelle Historie bei aktuellem Zug. Andernfalls nimm das neueste Element aus dieser Geschichte. Die Logik mit „NextSquareState“ ändert sich nicht , und jetzt müssen wir hier, anstelle von Concat für die aktuelle Historie, anstelle von Concat für die aktuelle Historie, auch ein anderes Basisarray in Betracht ziehen , dem wir den neuen Status des Spielbretts zuordnen werden. Wir werden eine neue Variable erstellen und sie vielleicht so etwas wie base nennen. Hier werden wir noch einmal fragen, ob wir in diesem Fall bitte aus der aktuellen Geschichte herausschneiden , hier nur diese Elemente herausschneiden. „Gehe zum Spielstart“, „gehe zu Zug 1“, „gehe zu Zug 2“. Wir schneiden vom Nullindex zum aktuellen Historienindex von letzter plus 1. Andernfalls behalten Sie bitte den aktuellen Verlauf als Basisarray bei. Anstelle von Last wollen wir Last Gaming State verwenden, und anstelle von Current History möchte ich Base verwenden. Wir werden gleich auf diese Logik zurückkommen. Ich weiß, es sieht furchtbar aus, besonders bei all diesen Nestern. Aber schauen wir uns an, wie unser Spiel gerade aussieht. Wir reisen durch die Geschichte, alles ist gut. Wir sind im dritten Zug, und wenn ich die Geschichte überschreiben möchte, kann ich das jetzt tun. Sie können sehen, dass wir im Grunde den Rest der Geschichte streichen und ihn mit unserem neuen Schritt hier außer Kraft setzen. Einfach so. Es funktioniert reibungslos. Was ist nun mit der Logik hier? Auch hier wird slice verwendet, um einige Elemente aus diesem Array zu trennen, aus dem aktuellen History-Array. Wir haben vom ersten Element bis zum Index der aktuellen Historie von plus 1 aufgeschlüsselt . Wir nehmen einfach den Index geringsten Spielstatus, den wir haben, und fügen einen hinzu, weil wir auch hier den auf Null basierenden „CurrentMove“ haben. Könnte verwirrend sein, aber gehen Sie es einfach ein paar Mal durch und es wird Sinn machen. Es ist auf den ersten Blick nicht so einfach, aber es ist nicht allzu komplex, und Sie müssen nicht wirklich viel darüber nachdenken. Jetzt haben wir die Spielhistorie und es funktioniert erstaunlich gut. Wir können reisen, wir können die Geschichte problemlos überschreiben. Perfekt. Nun, es scheint, als hätten wir viel getan und wir haben tatsächlich viel getan. Lassen Sie uns das unnötige Konsolenprotokoll entfernen und sehen, ob wir hier etwas hinzufügen müssen. Vielleicht können wir hier eine Nachricht hinzufügen, so etwas wie den aktuellen Spielverlauf. Mal sehen, wie es aussieht. Es sieht so aus, was in Ordnung ist, und ich denke, das wird für dieses Video ausreichen. Lassen Sie uns versuchen, alles zu tun, was wir hier getan haben. Das ist eine Menge. Ich werde die App beenden, alles zur Stage hinzufügen und ich werde alles festlegen und ich nenne es Spielverlauf bearbeiten. Im Grunde ist das genau das, was wir gemacht haben. Wir haben diesen Zustand in ein Array umgewandelt. Wir haben unsere Logik geändert und alles an die neue Staatsform angepasst , die wir mit der Geschichte eingeführt haben. GIT commit hat Game History hinzugefügt. Fantastisch. Vielleicht fügen wir hier noch eine zusätzliche Sache hinzu. Es ist völlig unnötig, aber es wird uns für das zukünftige Video helfen, und ich werde Ihnen bis zum nächsten Video eine kleine Übung geben . Ich werde den Server erneut starten und was ich tun werde, ich werde das Array als Anfangszustand außerhalb der Komponente verschieben . Ich werde es hier erstellen und es neues Spiel nennen. Ich habe alles in Großbuchstaben geschrieben, weil dies die konstante globale Wertdefinition ist die konstante globale Wertdefinition die wir nicht ändern werden, und ich gebe ihr dieses Array so. Für den ersten Status werde ich ein neues Spiel bestehen. Ich kann es tatsächlich innerhalb der Komponente bewegen, aber es ist besser, es draußen zu lassen. Der Grund dafür ist , dass, wenn Sie sich daran erinnern, jedes Mal, wenn wir ein neues Zeilen-Rendern haben, JavaScript Inside ausgeführt wird, und wann immer JavaScript ausgeführt wird, alle neuen Variablen erstellt, und da ein neues Spiel etwas Statisches ist, das wir nicht bei jedem Zeilen-Rendern neu erstellen müssen, können wir es einfach nach draußen verschieben. Dies ist nur eine sehr kleine Optimierung, aber sie wird uns nur für GIT dienen. Warum haben sie das getan? Im nächsten Video, was wir tun werden, fügen wir eine Schaltfläche hinzu, auf die wir klicken und die das Spiel zurücksetzt. Hier ist eine kleine Übung für dich bis zum nächsten Video. Versuche es selbst zu machen. Erstellen Sie eine Schaltfläche, zeigen Sie sie irgendwo hier an, und wenn Sie darauf klicken, wird der Spielstatus auf den ursprünglichen Zustand zurückgesetzt. Auch hier spielst du das Spiel, du klickst auf die Schaltfläche, es aktualisiert den Status. Versuchen Sie, dies mit der neuen Spielvariablen zu implementieren , die wir außerhalb der Komponente erstellt haben . Ich werde das bestätigen und sagen, dass ich außerhalb der App-Komponente in einen neuen Spielstatus versetzt wurde , und ich werde alles auf Master pushen und im nächsten Video wird es uns helfen, das Spiel zurückzusetzen. Versuche Sport zu treiben. Wir sehen uns im nächsten. 51. 12 Hinzufügen des game: Hey, wie war deine Übung vom letzten Video? Hast du das geschafft? Mal sehen. In diesem Video fügen wir eine Schaltfläche hinzu, die unseren Spielstatus zurücksetzt. Lass uns gehen. Also hier oben im Markup, direkt über dem aktuellen Spielverlauf, fügen wir ein Button-Element vom Typ Button hinzu und teilen mit, dass ein neues Spiel gestartet wird. Wenn wir also darauf klicken, soll es etwas tun. Wir werden den onClick-Handler hier platzieren, und für dieses onClick-Ereignis werden wir onNewGameStart angeben, und dass onNewGameStart eine Funktion sein wird, die wir hier und jene Funktion erstellen werden, das einzige, was es tut, es wird nur den Status aktualisieren. Im vorherigen Video haben wir ganz am Ende das neue Spiel an die Außenseite der Komponente verschoben , und das wird uns jetzt helfen. Jetzt können wir tatsächlich anrufen, Verlauf festlegen und wir können ein neues Spiel bestehen, was unser Ausgangszustand ist. Neben der Historie müssen wir auch den Zähler für unseren aktuellen Zug zurücksetzen. Wir werden weitermachen und „ Aktuelle Bewegung setzen“ aufrufen und auf Null zurücksetzen. Mal sehen. Wenn ich es speichere, spiele ich das Spiel, ich klicke auf „Neues Spiel starten“. Alles wurde jetzt aktualisiert. Es ist jedoch ungestylt und wenn wir uns das Style-CSS ansehen, haben wir hier die Klasse.btn-reset. Lass uns weitermachen und es benutzen. Für diese Schaltfläche übergebe ich also den Klassennamen und ich übergebe btn-reset. Aber wenn du siehst, gibt es hier auch die aktive Klasse. Was ich tun wollte, als ich diese aktive Klasse eingeführt habe , war, dass diese Schaltfläche immer dann aktiv wird, wenn wir einen Gewinner haben . Also werden wir hier die Logik innerhalb des Klassennamens anwenden. Da wir wieder JavaScript anwenden werden, verwenden wir geschweifte Klammern und zunächst wird dies eine Zeichenkettenvorlage mit Backticks sein. Wir geben ihm die statische Klasse btn-reset und dann öffnen wir Anführungszeichen für die Zeichenketteninterpolation und innerhalb dieser geschweiften Klammern für die Zeichenketteninterpolation werden wir fragen. Wenn wir also einen Gewinner haben, geben Sie ihm bitte eine aktive Klasse, andernfalls lassen Sie es leer. So etwas und jetzt mal sehen. Wir haben also diesen hübschen Button hier und wenn wir das Spiel spielen und loslegen und einen Gewinner haben, und wann immer wir einen Gewinner haben, wird dieser Button aktiv. Wenn wir die Geschichte durchqueren, funktioniert alles wieder wie erwartet. Sieht gut aus. Das war's für den Button-Reset. Wie Sie sehen, ist das nicht kompliziert, also lassen Sie uns weitermachen und es festlegen. Ich werde diese Änderungen dem Status Phase hinzufügen und mich dann verpflichten. Commit-Nachricht wird hinzugefügt, um das Spiel zurückzusetzen oder ein neues Spiel zu starten. Fantastisch. Ich schiebe alles auf GitHub und wir sehen uns im nächsten Video. 52. 13 Hervorheben des game (Gewinnkombination): Hallo zusammen. Was werden wir in diesem Video tun? Wir können die Gewinnkombination anzeigen falls wir einen Gewinner haben, und auch, aber wir ändern die Farbe der Quadrate, da sie jetzt schwarz sind. Lassen Sie uns jetzt vielleicht zuerst mit Farben beginnen. Wenn wir zum Komponentenquadrat gehen, wird die Logik hier so ziemlich dieselbe sein , wie wir sie in der Statusmeldung haben. Wenn Sie sich erinnern, haben wir hier den dynamischen Klassennamen angewendet. Wenn der Gewinner X ist, ist der Text grün, andernfalls ist der Text orange. Die Klassen, die wir hier innerhalb von Styles definiert haben, geben im Grunde nur die Farbe dem Element, das hier durch die SAS-Variable definiert ist. Hier im Quadrat konvertieren wir es einfach in einen JavaScript-Ausdruck. Wir werden Anführungszeichen von doppelten Anführungszeichen zu Backticks ändern . Ich werde weitermachen und fragen, ob unser Wert X ist, dann werden wir Text grün anzeigen, andernfalls werden wir Text orange anzeigen. Einfach so, nichts Kompliziertes. Sie können jetzt sehen, dass alles in ein wunderschönes Farbsystem umgewandelt wurde . Wenn wir klicken, wenn wir spielen, funktioniert es. Großartig. Lassen Sie uns nun darüber nachdenken, wie wir die Gewinnfelder tatsächlich hervorheben können. Um Gewinnfelder hervorzuheben, müssen wir die Quadrate kennen. Wir müssen ihre Indizes kennen. Wir müssen wissen, dass, wenn wir Gewinner X für diese Gewinnkombination haben, wir Gewinnquadrate und Index 2 haben. Dann haben wir 0, 1, 2 , 3, Index 4 und Index 6. Das sind unsere Gewinnfelder. Wir berechnen den Gewinner in der Funktion „Gewinner berechnen und geben nur das Gewinnquadrat zurück, nur seinen Wert. Mit dieser Funktion können wir jedoch auch Gewinnfelder zurückgeben. Denn hier überprüfen wir jede mögliche Gewinnkombination. Wir haben bereits diese Variablen a, b und c, sie sind hier strukturiert stellen die Gewinnindizes dar, die Gewinnkombination. Mit dieser Funktion „ Gewinner berechnen können wir ein Objekt zurückgeben nicht nur Null oder den Gewinner. Wir können ein Objekt mit dem Gewinner und den Gewinnfeldern zurückgeben . Falls wir keinen Gewinner haben, wir jetzt Null zurück. Aber ändern wir es in ein Objekt. Wir geben Gewinner oder Null zurück, und die Gewinnquadrate werden ein leeres Array sein. Aber falls wir einen Gewinner haben , geben wir ein Objekt zurück, Gewinner wird das Quadrat c oder das Quadrat a oder das Quadrat b sein , es spielt keine Rolle. Aber für Gewinnfelder wir die Linien i zurück oder wir können sie tatsächlich so zurückgeben. Wir können ein neues Array erstellen und dann explizit angeben, dass wir a, b und c zurückgeben , oder wir können eine Zeile a, Zeile i, angeben. Jetzt kehren wir zu J6 zurück. Jetzt ist dieser Gewinner ein Objekt. Wenn ich markiere, wird mir auch ein Objekt angezeigt. Ich kann diese Struktur hier verwenden. Aus der zurückgebenden Objekt-ID-Struktur, Gewinnerschlüssel und den Gewinnquadraten. Gewinner und ein Gewinnquadrat. Jetzt können wir diese Gewinnfelder als Requisite an die Brettkomponente weitergeben und dort mit dieser Logik umgehen. Ich gebe die Gewinnfelder an das Brett weiter, und innerhalb des Bretts schnappe ich mir Gewinnfelder und die quadratische Komponente , die hier auftauchen würde. Ich kann eine Requisite übergeben , die angibt, ob dieses Quadrat ein Gewinnquadrat ist oder nicht, und dann etwas Logik innerhalb der quadratischen Komponente anwenden. Im Renderquadrat werde ich überprüfen, ob das Quadrat ein Gewinnquadrat ist. Ich erstelle nur eine Variable innerhalb des Renderquadrats und nenne sie Gewinnerquadrat. Gewinnfelder sind eine Reihe von Gewinnindizes. Wie 0, 1 und 2. Nehmen wir zum Beispiel diese Kombination. Wir müssen überprüfen, ob die Position dieses Quadrats innerhalb der Reihe der Gewinnquadrate liegt. Wenn das stimmt, dann wissen wir, dass das Quadrat Teil der Gewinnkombination ist. Wir können einfach WinningSquares.Includes überprüfen Dies ist ein Array, das die globale Methodenposition enthält. Das war's. Dann können wir dieses Gewinnquadrat weitergeben, während ich zur quadratischen Komponente heruntergehe. Wenn wir die quadratische Komponente öffnen, verschieben wir sie hierher. Innerhalb des Quadrats, seit wir bestanden haben, befindet sich das Gewinnfeld. Wir schnappen uns dieses Gewinnquadrat aus dem Requisitenobjekt. Hier können wir einen anderen dynamischen Klassennamen anwenden , der auf diesem gewinnenden quadratischen Boolean basiert . Die Methode dot includes wird als boolescher Wert zurückgegeben , der angibt, ob dieses Array dieses Element enthält. Wir haben hier bereits einen dynamischen Nachnamen basierend auf dem Wert angewendet. Wir können genau das Gleiche für sein Gewinnfeld tun. Ich werde diese Zeichenfolge einfach um eine weitere Interpolation erweitern diese Zeichenfolge einfach um eine weitere Interpolation und fragen, ob dies das Gewinnquadrat ist Bitte wenden Sie etwas ClassName an und etwas ClassName wird sein, wenn wir Styles öffnen, CSS, darin haben wir diese gewinnende Klasse. Diese Siegerklasse fügt die hier definierte skalierte Textanimation hinzu, die die Schriftgröße unendlich vergrößert. Gehen wir zurück zum Quadrat. Wenn es sich um ein Gewinnquadrat handelt, fügen wir die Gewinnklasse hinzu. Andernfalls hängen wir eine leere Klasse an. Mal sehen, ob es funktioniert und danach werden wir etwas mit dieser Folie machen , weil Sie sehen, dass sie gerade etwas chaotisch aussieht. Lass uns einen Gewinner haben. Bumm. In der Tat funktioniert es. Schau dir das an. Wir haben hier alles vorbereitet. Ziemlich cool, nicht wahr? Immer wenn wir die Geschichte durchqueren und zu den letzten Zügen zurückkehren , wird die Animation immer noch da sein. Wenn wir uns das Markup ansehen, haben wir jedem Quadrat, das Teil der Gewinnkombination ist, die Gewinnklasse zugeordnet . Ziemlich cool. Lassen Sie uns jetzt etwas mit dieser Zeichenfolge machen, weil sie ein bisschen chaotisch aussieht. Wir können eigentlich nicht viel dagegen tun. Wir können es in mehrere Variablen aufteilen und dann alles miteinander kombinieren, vielleicht so etwas wie colorClassName. Dann können wir diese Logik von hier aus einfach herausschneiden, sie so formulieren, dann können wir vielleicht etwas wie WinningClassName sagen und dann machen wir genau dasselbe. Wir haben diese Logik einfach herausgeschnitten und sie hier platziert. Anstatt diese Logik in der Zeile zu verwenden, wie wir es gerade getan haben, wird die Variable übergeben. Das wird ColorClassName sein. Wir interpolieren diesen Variablenwert innerhalb dieser Zeichenfolge und machen dasselbe hier, WinningClassName. Jetzt sieht es viel sauberer aus. Wir haben die Logik im Grunde in mehrere Zeilen aufgeteilt. Was auch immer du bevorzugst. Wenn Sie es etwas sauberer machen möchten , ist dieser Weg in Ordnung. Wenn es dir auf die chaotische Art gefallen hat, kannst du das gerne tun. So etwas haben wir die Gewinnkombination, sie wurde in der Spielhistorie hervorgehoben . Großartig. Ich denke, im nächsten Video werden wir die letzten Vorbereitungen treffen und ein paar Dinge mehr geben , vielleicht nur zusätzlichen Text, mehr Stile. Wir werden die App endlich für die Bereitstellung auf einem Hosting vorbereitet haben . Fantastisch. Bevor wir das Video beenden, entfernen wir nun Kommentare und Konsolenprotokolle und lassen Sie uns alles bestätigen. Sehen wir uns an, was wir gemacht haben, also haben wir die Berechnung geändert als die Rückgabe diesen Wert in ein Objekt mit zwei Schlüsseln, Gewinner- und Gewinnquadraten, zurückgab, dann geben wir diese Gewinnquadrate an Ihre Board-Komponente weiter. Innerhalb des Boards erkennen wir, ob das Quadrat, das wir durchlaufen haben, ein Gewinnquadrat ist, und basierend auf dieser inneren quadratischen Komponente wenden wir dynamisch Klassennamen an, um die Animation umzuschalten. So etwas. Lass uns gehen und alles begehen. Git füge das hinzu. Die Nachricht wird hervorgehoben und die Gewinnkombination wird hervorgehoben. Fantastisch. Lass uns alles vorantreiben. Bis zum nächsten, wir sehen uns dort. 53. 14 Endnote: hallo. In diesem Video geben wir unserer Anwendung vor dem Einsatz den letzten Schliff. Nun, wenn wir zu unseren Stilen gehen, genauer gesagt hier, zu body element, wenden wir diese Roboto-Schrift an, aber wir haben sie nicht wirklich auf unserem PC. Wir haben es nirgends. Woher kam es? Die Sache ist, dass es nicht wirklich angewendet wurde . Lassen Sie uns das reparieren. In dem Gast, den wir mit uns geteilt haben, haben wir hier einen HTML-Index mit einigen Eigenschaften. Wenn wir in unser Index-HTML schauen, haben wir diesen Link zu dem Stylesheet , das wir hier haben, nicht . Das Stylesheet, was es tun wird, es wird die Roboto-Schriftart von Google APIs herunterladen. Wir werden das einfach einbeziehen und in dieser Zeile, wenn wir die App aktualisieren, ändert sich nichts, weil wir den Dev-Server nicht ausgeführt haben. Ich betreibe den Server, ich gehe zurück zur App. Jetzt haben wir tatsächlich die Roboto-Schrift angewendet. Wenn ich diese Zeile entferne, sehen Sie, wie sich die Schriftfamilie ändert. Aber sobald wir die Schrift, die wir im Stylesheet angegeben haben, nicht laden , funktioniert alles. Großartig. Fügen wir nun den Titel oben zu unserer App hinzu. Hier in der App, direkt über der Statusnachrichtenkomponente, werden wir das einfache h1-Titel-Tag anzeigen und TIC TAC TOE mitteilen. Um es ansprechender zu gestalten, können wir die Farbe von TAC ändern. Wickeln wir es in ein Span-Element ein und geben ihm einen Klassennamen mit grünem Text. Speichern wir es. Jetzt sieht es viel besser aus, und ich denke, wir sollten die Eigenschaft font-weight bold wirklich aus dem aktuellen Titel mit der Spielhistorie entfernen die Eigenschaft font-weight bold . können wir tun, indem wir Inline-Styles anwenden. Nun, was großartig ist. Wir haben es nicht gehört oder wir haben es vorher nicht gesehen. Die einzige Möglichkeit, wie wir Stile in der App angewendet haben , war die Verwendung der Klassennameneigenschaft. Klassennamen werden hier in der SaaS-Datei definiert. Was ist jedoch, wenn wir keine CSS-Dateien oder SaaS-Dateien haben ? Wie können wir Stile anwenden? Nun, ohne React in nur einer HTML-Datei können wir zwei Arten von Stilen haben. Wir können Elementen Klassennamen geben, oder wir können Inline-Styles übergeben. Das Gleiche können wir hier in React tun. An diesen Spielverlauf können wir die Stileigenschaft übergeben und die Stileigenschaft muss ein Objekt sein. Wir müssen Stile mit JavaScript angeben, nicht mit CSS, sondern mit JavaScript. Wir werden CSS mit Hilfe von JavaScript schreiben, und das wird Inline-Styling genannt. Wir möchten die fett gedruckte Schrift aus dem Titelelement entfernen , das wir hier haben. Elementstil wird der normalen Schriftstärke entsprechen. Hier müssen wir die Schriftstärke einfach so normal übergeben. Mal sehen, ob es geklappt hat. Wenn wir das Element untersuchen, kann ich sehen, dass der Stil und die Schriftstärke normal sind. Dies sind Inline-Styles. Das JavaScript-Objekt , das wir hier übergeben wurde in diese Inline-Style-Zeichenfolge konvertiert. Sie können sehen, dass ich den Bindestrich zwischen Schrift- und Gewichtungswörtern nicht angegeben habe zwischen Schrift- und Gewichtungswörtern denn wenn Sie Inline-Styles angeben, müssen Sie die Kamel-Groß- und Kleinschreibung verwenden. Wenn Ihre Eigenschaft einen Bindestrich zwischen Wörtern oder Leerzeichen enthält, was auch immer, ersetzen Sie sie immer durch Kamelbraun. Zum Beispiel Schriftfamilie. Sie hätten eine Schriftfamilie in Camel Case Manier. So etwas. Lass uns die Inline-Styles woanders anwenden. Wenn wir zur Komponentenhistorie gehen, haben wir hier diese Schaltfläche, die dieses Element in der Liste darstellt. Machen wir es fett, wann immer es aktiv ist. Wenn wir Klassennamen öffnen, schauen wir mal, ob sie dort fett gedruckt sind. Eigentlich ist es mutig. Was wir hätten tun können, wenn wir keine Stile verwendet hätten, hätten wir Folgendes tun können, wenn wir in die Geschichte gehen. Hier hätte ich Style bestanden und spezifiziere, du siehst hier doppelte Klammern. erste Klammer gibt an, dass wir JavaScript in ihren Klammern verwenden werden , und die zweite in ihren Klammern bedeutet, dass sich um ein Objekt handelt, in das wir ein Objekt übergeben. Deshalb haben wir hier doppelte Klammern. Schriftgewichtseigenschaft, wir hätten fragen können, ob die aktuelle Bewegung dem Index entspricht, wird sie fett gedruckt, andernfalls normal. Wenn wir diese Klassen nicht hatten, lassen Sie uns sie entfernen und sehen, ob sie funktioniert haben. Wenn ich hineinzoome und das Spiel spiele, können Sie sehen, dass das Element, für das diese Bedingung zutrifft, fett dargestellt wird. Im Grunde genommen wird unser aktueller Schritt gewagt. Andernfalls ist die Schriftstärke normal. Wir benötigen es nicht für dieses spezielle Element , da dies bereits in CSS funktioniert hat. Sie können sehen, dass die Schriftstärke fett gedruckt ist, wenn sie aktiv ist, sodass wir hier keine Inline-Styles benötigen. Ich denke, das ist es. Ich würde sagen, wir sind mit unserer Bewerbung fertig. Wir haben alle Funktionen, wir haben all diese Stile. Alles funktioniert reibungslos und sieht toll aus. Fühlen Sie sich frei, alles zu modifizieren, fühlen Sie sich frei, Ihre eigenen Stile anzuwenden , damit zu spielen, es zu erweitern oder vielleicht etwas zu ändern. Es gibt keine strengen Anforderungen, dass dies speziell auf diese Weise geschehen muss. Du bist hier der Entwickler und du bist derjenige, der entscheidet. Wenn Sie den Titel hier ändern müssen, können Sie den Titel gerne ändern. Wenn Sie zusätzliche Metatags in den Kopf einfügen möchten, können Sie das gerne tun. Wir sind hier fertig. Dies ist der endgültige Status unserer App. Im nächsten Video werden wir über den Einsatz sprechen. Aber bevor wir dieses Video beenden, lassen Sie uns es zusammenfassen und alles festlegen. Ich öffne das Terminal, ich übernehme alles. Ich werde die Änderungen spezifizieren, die wir vorgenommen haben, also haben wir die Schriftart und den Titel hinzugefügt. Der TIC TAC-Spieletitel wurde hinzugefügt TIC TAC-Spieletitel und die Roboto-Schriftart hinzugefügt. Ich schiebe alles noch einmal auf GitHub. Wie immer, wir sehen uns im nächsten. 54. 15 Bereitstellung zum Überschwemmen: Hallöchen. In diesem Schritt haben wir unsere wertvolle App fertiggestellt. Es sieht wunderschön aus. Es hat alle Funktionen. Jetzt ist es an der Zeit, dass wir diese Anwendung mit der Außenwelt teilen. Wir wollen es im Internet veröffentlichen , damit wir den echten Link haben, die echte URL, die wir unseren Freunden geben können. Wie wir das machen können. Es gibt viele verschiedene Dienste , die unsere statischen Dateien kostenlos oder nicht kostenlos hosten können. Wir werden kostenlose Dienste nutzen. Aber die Frage ist, wie genau passiert das? Wann werden wir das im Paket Json definierte Build-Skript ausführen , erstellt vite unsere Anwendung und erstellt statische Dateien, HTML, CSS, JavaScript und Bilder, falls wir welche haben. Dann können wir diesen Ordner nehmen und ihn einem Hosting-Anbieter geben. Dieser Hosting-Anbieter stellt diese Dateien irgendwo auf seinen Servern bereit und stellt sie über eine automatisch generierte URL öffentlich zur Verfügung. Einer der Dienste , mit denen wir unsere Anwendung kostenlos hosten können , um unser HTML, CSS und JavaScript kostenlos zu hosten JavaScript kostenlos Er wird immer kostenlos sein und ist sehr einfach. Der Dienst heißt Surge. Sie können darauf zugreifen, indem Sie zu surge.sh gehen. Das Coole an Surge ist seine Einfachheit, Sie benötigen kein zusätzliches Setup. Was Sie tun müssen, Sie müssen nur das globale Surge-Paket installieren und dann mit dem Befehl Surge die App einfach so bereitstellen. Lass uns weitermachen und das tun. NPM installiert Global Surge. Ich werde es in mein Terminal einfügen. Es wird das globale Surge-Paket installieren. Es heißt, eine Sicherheitslücke mit kritischem Schweregrad. Nun, darüber musst du dir keine Sorgen machen. Wann immer Sie Sicherheitslücken sehen, kann dies ziemlich häufig vorkommen, insbesondere bei globalen Paketen. Nun, das ist das Problem des Pakets. Was können wir dagegen tun und was sind die Sicherheitslücken? Sicherheitslücken im Code , den wir aus diesem Paket herunterladen und er könnte bösartig sein. Aber du musst es nicht ernst nehmen. In der NPM-Welt wird das Paket meistens einmal am Tag, vielleicht zweimal am Tag aktualisiert . Aber Sie können nicht immer mit den Änderungen, mit den Updates Schritt halten. Sie werden mindestens einmal eine kritische Sicherheitslücke sehen. Ihre Optionen sind zunächst, nichts zu tun und auf die neueste Version zu aktualisieren und hoffen, dass der Paketautor die Sicherheitsanfälligkeit behoben hat. Die zweite Option besteht darin, dieses Paket nicht zu verwenden. In unserem Fall können wir nicht wirklich viel tun , deshalb machen wir mit. Jetzt haben wir das globale Suchpaket installiert und es heißt , dass wir den Suchbefehl ausführen müssen. Wenn ich das mache, werde ich aufgefordert, mich entweder anzumelden oder ein Konto zu erstellen. Ich gebe einfach meine E-Mail-Adresse und dann mein Passwort ein. Ich habe bereits ein Konto, also wird es mich anmelden. In Ihrem Fall wird Ihnen jedoch ein neues Konto erstellt. Jetzt fordert es mich auf , das Projekt zu starten, aber ich brauche momentan nichts. Also werde ich einfach Control C ausführen , um die Veröffentlichung meiner App zu stoppen. Zuerst müssen wir es bauen. Ich werde das npm run build-Skript und Vite wird den neuesten Build unserer App erstellen. Großartig. Jetzt ist es da. Es sieht verkleinert, verklammert und so ähnlich aus. Jetzt wollen wir den Ordner Dist nehmen und ihn für die Suche bereitstellen. Also verwenden wir den Suchbefehl und geben dann den Pfad zu dem Ordner an , den wir bereitstellen möchten , relativ zu unserer aktuellen Navigation. Seit unserer aktuellen Navigation Tictactoe-vite und unser Ordner befindet sich in diesem Ordner im selben Verzeichnis. Wir müssen nicht verrückt danach werden. Wir müssen nur den Ordnernamen angeben , den wir bereitstellen möchten. In unserem Fall ist dies ein Ordner namens Dist. Wenn ich das mache, starte ich einfach Search Dist. Es fragt mich nach der Domain. wenn Sie es auf Surge bereitstellen, wird es immer in einer Subdomain bereitgestellt. Es wird immer etwas Dot Surge Dot Sh sein. Sie können den Teil von surge.sh nicht ändern, aber Sie können eine eindeutige Subdomain auswählen, die derzeit nicht belegt ist. Standardmäßig generiert Surge automatisch eine Subdomain , die verfügbar ist, aber Sie können sie ändern. Lass uns vielleicht gehen und es tictacgame.surge.sh nennen. Ich wähle diesen Namen. In Ihrem Fall müssen Sie sich jedoch Ihre eigene Subdomain einfallen lassen , denn wenn Sie versuchen , eine Subdomain bereitzustellen , die bereits von einem anderen Surge-Benutzer genutzt wird, wird Ihnen die Erlaubnis verweigert oder so. Es wird Ihnen mitteilen, dass Ihre Anfrage abgebrochen wird. Stellen Sie also sicher, dass Sie etwas Einzigartiges auswählen und bleiben Sie dabei. Ich wähle tictacgame.surge.sh. Ich bereite es vor und jetzt ist es auf tictacgame.surge.sh veröffentlicht. Jetzt kann ich diesen Link nehmen und dorthin gehen. Wie Sie jetzt sehen können, ist meine App live. Es hat einen HTTPS-Link. Das bedeutet, dass das SSL-Zertifikat vorhanden ist. Es wird von Surge verwaltet. Darüber müssen wir uns keine Sorgen machen. Alles funktioniert. Sie können diesen Link jetzt verwenden und mit Ihren Freunden teilen. Schau dir das an. Wie cool ist das? Großartig. Nun, zum späteren Nachschlagen, möchten wir vielleicht den Bereitstellungsprozess vereinfachen. Was ist, wenn ich etwas ändern und dann erneut auf genau dieselbe Domain bereitstellen möchte ? In diesem Fall muss ich also meine neuen Änderungen vornehmen und neue Änderungen an der App vornehmen. Dann werde ich npm run build erneut ausführen, um neuen aktualisierten dist-Ordner zu erstellen, und dann muss ich surge dist ausführen und dieselbe Domain eingeben. Ich möchte es jedoch so einfach wie möglich machen. Warum erstellen wir also nicht ein weiteres Skript im Paket Json und nennen es deploy. Lassen Sie uns fortfahren und ein neues Deploy-Skript erstellen. Das wird zwei Dinge bewirken. Als Erstes wird der Befehl build ausgeführt, npm run build, und direkt danach können wir mit dem logischen AND-Operator den Befehl verketten, der nach npm run build ausgeführt wird. Also wollen wir Surge Dist und die Domain , die wir bisher haben, ausführen . Surge, der Name des Ordners , den wir bereitstellen möchten, dist und dann die Domain. Ja, ich kann es als Argument an den Surge-Befehl übergeben und es wird funktionieren. Surge wird verstehen , dass wir auf diesen Domainnamen zugreifen wollen . Wir können also HTTPS entfernen und nur diesen Domainnamen behalten. Wenn ich nun versuche, etwas zu ändern, vielleicht in der App, lassen Sie uns schnell überprüfen, ob es funktioniert. Also lasst uns Tic zu etwas anderem ändern, und jetzt führe ich npm run deploy aus. Sie werden sehen, dass es den Build-Befehl aufnimmt und direkt danach den Surge-Befehl. Es wurde bereitgestellt, heißt es, auf titacgame.surge.sh veröffentlicht. Wenn ich mich erfrische. sehen Sie neue Änderungen. Cool, oder? In Ordnung. Lassen Sie uns alles wieder hierher zurücksetzen und erneut einsetzen. Auch hier wurde ein neuer Build produziert. Auch hier wurde es bereitgestellt und erneut in dieser Subdomain veröffentlicht. Fantastisch. Das war's. Jetzt haben Sie unsere App online. Du kannst weitermachen und es mit der Welt teilen. Lassen Sie uns unser von uns eingeführtes Deploy-Skript übernehmen, git commit hat das Deploy-Skript hinzugefügt. Also herzlichen Glückwunsch, wir haben dieses ziemlich coole Spiel hier mit nicht so viel Aufwand entwickelt. Wir haben es im Surge Service veröffentlicht. Jetzt ist es im Internet verfügbar und es wird immer kostenlos sein. Es wird für immer kostenlos gehostet und jetzt können wir uns damit rühmen. Im nächsten und letzten Video über Tic-Tac-Toe werden wir zusammenfassen, was wir in diesen Videos genau gelernt haben, welche Konzepte wir verstehen was wir jetzt mit unserem Wissen anfangen können. Wir sehen uns dort. Herzlichen Glückwunsch zum Einsatz. 55. 16 Zusammenfassung: Hallo nochmal. In diesem Video werden wir kurz zusammenfassen was genau wir bisher im Tic-Tac-Toe-Spiel gelernt haben . Lass uns gehen. Wenn wir uns unsere Struktur ansehen, können wir bereits erkennen, dass wir wissen, wie man Vid benutzt. Wir kennen Frontend-Tools , mit denen unser Projekt erstellt werden kann. Wenn wir uns das JSON-Paket ansehen, können wir feststellen, dass wir auch etwas über das Hosting gelernt haben und wie wir die Anwendung kostenlos hosten können. Sie können in Google alle Hosting-Dienste auswählen , mit denen Sie statische Dateien, HTML, CSS und JavaScript hosten können, und sehen, wie Sie diese anwenden können falls Sie eine Alternative zur Suche benötigen. Wir kennen uns jetzt mit Hosting-Diensten aus. Wenn wir in den Quellordner und Haupt-JSX schauen, können wir feststellen, dass wir React 18 verwendet haben. Dies ist die API von React 18-Headern und unterscheidet sich von React 70. Wir haben hier gelernt, wie man die neueste React-Version verwendet. Wenn wir in App JSX schauen, können wir hier eine andere Logik sehen. Wir wissen bereits, was ein Staat ist, wie wir den Status verwalten können, wie wir den Status aktualisieren können und warum er benötigt wird. Wir wissen auch, welcher Wert aus diesem Zustand abgeleitet wird und warum wir nicht wirklich einen weiteren Staat erstellen müssen , um diese Berechnungen zu verwalten, wie Gewinner oder vielleicht wie ein Spielbrett. Wir wissen auch von State Update oder Function, dass sie auf verschiedene Arten aufgerufen werden können, entweder mit dem Callback, wann immer wir einen neuen Status anhand des aktuellen Zustandswerts setzen müssen , oder einfach mit einem normalen Aufruf ohne Callback, nur mit dem Wert. Wir kennen uns jetzt mit JSX-Markup aus. Wir wissen, wie man Klassennamen anwendet. Wir kennen Inline-Styles mit nur dem Style-Objekt, sodass wir CSS mit JavaScript schreiben können . Wir wissen, wie wir dynamische Stile anwenden können, indem einfach Zeichenkettenvorlagen und ein bisschen JavaScript verwenden. Wir wissen, wie man Requisiten weitergibt. Die Eingabeaufforderungen sind im Grunde die Attribute von Komponenten, mit denen Sie Daten an die Komponente übergeben können. Wir haben etwas über bedingtes Rendern gelernt. Wir wissen, dass wir JSX-Markup unter bestimmten Bedingungen rendern können , und das können wir auf verschiedene Arten erreichen. Wir können das in der Zeile machen, indem den AND-Operator direkt in JSX verwenden, oder vielleicht können wir eine Hilfsfunktion erstellen und die Logik hineinschreiben. Mal sehen, was wir noch hier haben. Wenn wir in Square schauen, haben wir es bereits besprochen. Wenn wir in die Geschichte schauen, haben wir sie nicht durchgesprochen. Wir wissen jetzt auch , dass wir ein Array verwenden und jedes Array-Element dem JSX-Markup zuordnen können. Falls wir Listen anzeigen müssen, verwenden wir die Dotmap-Methode. Die Dotmap-Methode ordnet jedes Array-Element dem JSX-Markup zu , wenn wir es in JSX verwenden. Wann immer wir das tun, denken wir daran, dass wir die Schlüsselrequisite immer an das Wrapping-Element übergeben müssen , da React jedes zugeordnete Element in JSX identifizieren muss . Ich glaube, das ist es. Wir haben bereits so viele Konzepte über React gelernt. Vertrauen Sie mir, all diese Konzepte, die Sie erlebt haben, bilden die Grundlage, die Sie benötigen, um mit React alles zu erstellen. Alles, was Sie hier sehen, ist in jeder anderen React-Anwendung vorhanden. Wenn Sie sich damit flexibel fühlen und das nutzen können , ist das großartig. Das bedeutet, dass Sie in Zukunft keine Probleme haben werden , jegliche Art von Anwendung zu erstellen. Herzlichen Glückwunsch. In diesem guten Sinne werden wir das Tic-Tac-Toe-Projekt beenden. Wir sehen uns beim nächsten Mal. 56. 17 Extra: Hallo ihr alle. Eigentlich habe ich vergessen, ein kleines subtiles Detail zu unserer App hinzuzufügen. Es geht um Stile. Es geht um diese Kreise , die wir im Hintergrund sehen. Wir sehen sie jetzt nicht, weil wir sie nicht hinzugefügt haben, aber ich habe vergessen, das zu tun. In Style CSS gibt es die Klasse BG Balls, die sich um die Hintergrundkreise kümmert. Wir müssen nur irgendwo im App-Markup ein leeres Element erstellen . Sagen wir ein leeres Div. Wir geben ihm den Klassennamen BG Balls. Wenn wir die Seite aktualisieren, sehen wir die Kreise im Hintergrund, sie sind responsiv und sehen ziemlich gut aus. Das tut mir leid. Vergessen Sie nicht, die App erneut bereitzustellen und diese Änderung wegzulassen. Ich mache einfach weiter und füge hinzugefügte Hintergrundkreise hinzu. Dann führe NPM Deploy aus. Die Deploy-Skripte, die wir in [unhörbar] definieren. In Ordnung, wir sehen uns. 57. 01 Box Office App Übersicht: Hallo, willkommen bei Box Office. In diesem Video möchte ich euch kurz das Projekt vorstellen, was das sein wird. Moment schauen Sie sich Box Office an. Dies wird eine Such-App für Filme und Schauspieler sein. Sie können nach Filmen oder Schauspielern suchen, und die Daten, nach denen Sie suchen werden aus der API abgerufen. In der Eingabe gebe ich zum Beispiel etwas wie Mädchen ein, und wenn ich die Eingabetaste drücke oder auf die Suchtaste drücke, sehe ich die Ergebnisse. All diese Ergebnisse werden vom externen API-Server abgerufen, der öffentlich verfügbar ist. Wir werden in der Lage sein, Shows zu spielen. Wenn wir auf eine Show klicken, sehen wir diese coole Animation. Um dem Benutzer mitzuteilen, dass diese Sendung jetzt mit den Sternen markiert ist, können wir auf Lesen Sie mehr klicken In diesem Fall wird eine neue Seite in einem neuen Tab geöffnet. Hier können wir alle Informationen sehen , die wir von der API abgerufen haben; Details, Staffeln, Besetzung, alles über die Show. Hier gehen wir zurück zu Ihrem Home-Here-Button für den Fall, dass wir zurückkehren müssen. Lassen Sie uns diesen Tab schließen. Jetzt, da wir hier die Hauptrollen gespielt haben, werden sie woanders verfügbar sein. Sie werden auf der Registerkarte Start verfügbar sein. Wenn wir hier navigieren, alle Sendungen, die wir zuvor ausgewählt haben , jetzt hier auf dieser Seite angezeigt. Selbst wenn ich den Browser schließe, den Tab schließe oder die Seite aktualisiere, unsere Sendungen immer noch da. Sie werden nicht in einer Datenbank gespeichert, sondern im Speicher des Browsers, insbesondere im lokalen Speicher. Gehen wir zurück zur Startseite und Sie können sehen, dass die Eingabe immer noch da ist. Das Gleiche passiert mit der Eingabe, genau wie die Sendungen, die wir Sternen markiert haben, irgendwo im Browser gespeichert werden, genauso wie wir es mit der Eingabe hier tun. Wenn ich die Seite aktualisiere, ist die Eingabe immer noch da. Außerdem haben wir hier diese Radiobox, Radiobuttons, wenn wir zu Schauspielern wechseln und dann nach einem Namen suchen , zum Beispiel James. Anstelle von Shows werden wir jetzt die Schauspieler sehen. Auch hier dieselbe API, aber im Gegensatz zu Serien haben Schauspieler keine eigene Seite, da wir nicht zu viele Informationen von der API erhalten. Das ist ausreichend, nur Karten für Menschen, für Schauspieler, und diese Anwendung ist auch eine progressive Web-App. Das bedeutet, dass unsere Anwendung jetzt installiert werden kann, als wäre sie eine native Anwendung, unabhängig davon, ob wir uns auf einem Desktop- oder Mobilgerät befinden. Zum Beispiel habe ich hier in der rechten oberen Ecke diese Installationsschaltfläche, und wenn ich darauf klicke, werde ich aufgefordert, diese Website zu installieren , als wäre es eine Anwendung. Wenn ich direkt danach auf Installieren klicke , werde ich, sagen wir, umgeleitet oder in einem neuen Fenster geöffnet , das eigenständig läuft , und das ist meine Anwendung. Gleich danach, wenn ich hier auf meinen Desktop zurückgehe, sehe ich das, ich kann es jetzt. Das ist meine Abkürzung für die Anwendung. Wenn ich es schließe und wenn ich es erneut öffne, wird es in einem separaten Tab geöffnet und verhält sich genauso. Ziemlich cool. Ich würde sagen, das ist es, das ist unsere Anwendung, das wird viel Spaß machen. Wir sehen uns dort. 58. 02 Das Projekt mit Create React App erstellen: Hallo, da. Wie fühlst du dich nach Tic-Tac-Toe? Bereit fortzufahren? Dieses Mal werden wir an Box Office arbeiten, einer Web-App, mit der wir nach verschiedenen Filmen und Schauspielern suchen können . Lass uns gehen. Für Box Office werden wir die Create React App verwenden. Es ist ein sehr beliebtes React-Boilerplate, mit dem wir Projektdateien erstellen können. In Tic-Tac-Toe haben wir ein Tool namens Vite verwendet. Dieses Mal werden wir die Create React App verwenden. Create React App ist wie ein heiliger Gral aller Vorlagen für React-Anwendungen. Der Grund dafür ist , dass die Create React App vom React-Team betreut wird. Es ist das, was wir eine offizielle React-Vorlage nennen können. Sie haben eine Frage, warum haben wir uns für Create React App entschieden , als wir Vite in Tic-Tac-Toe verwendet haben? Die Antwort darauf ist sehr einfach. Nur weil es keinen wirklichen Grund für diese Entscheidung gibt. Was auch immer Sie wählen, es wird Ihnen gut gehen. Für unseren Handel möchten wir jedoch so viele Optionen wie möglich ausloten und herausfinden was wir tun können und was wir erreichen können , indem wir verschiedene Vorlagen verwenden. Sie werden alle so ziemlich gleich sein. Sie können unterschiedlich sein, je nachdem , wie viel Sie mit der Anpassung vornehmen können. Aber insgesamt sind sie sich ziemlich ähnlich. Im Moment bin ich auf der offiziellen Create React App-Vorlagenwebsite. Was wir tun können, finden Sie unter Get Started. Von hier aus haben wir bereits den Schnellstartbereich, in wir diesen Befehl einfach kopieren können. Aber unsere Box Office App wird eine sogenannte progressive Web-App sein. Wir werden über Progressive Web App sprechen. Was ist das? Warum ist es cool und warum brauchen wir es oder vielleicht brauchen wir es nicht? Wir werden uns später an der Kinokasse mit all dem befassen, aber wir müssen eine bestimmte Maßnahme ergreifen bevor wir die Anwendung zusammenstellen. Später können wir es benutzen. Wenn wir nach unten scrollen und zu Templates gehen, können wir sehen, dass wir den Befehl Create React App mit dem Template-Flag ausführen können . Wenn wir zu Advanced Usage gehen oder wenn wir zur Entwicklung übergehen, lassen Sie mich sehen, wo das ist, Ihre App zu erstellen, eine progressive Web-App zu erstellen. Wenn wir hier zu diesem Abschnitt gehen , erhalten wir diesen Befehl, den wir mit der angegebenen Vorlage ausführen können , dass dies eine progressive Web-App sein wird. Genau das werden wir kopieren und verwenden, um neue Projektdateien zu erstellen. Also was ich tun werde, ich gehe zu dem Ordner in dem ich mein Projekt sehen möchte. Dies wird der Wrap-Ordner sein, den ich im vorherigen Video hatte. Der Ansatz ist derselbe. Sie müssen diesen Befehl in dem Ordner ausführen , in dem Sie Ihren Projektordner sehen möchten . Ich öffne Git Bash, du öffnest dein Terminal. Es kann alles sein. Wir werden keine Interaktivitätsprobleme haben wenn wir Windows mit Git Bash verwenden. Ich gehe zu Diskette D und dann zum App-Ordner. Hier werde ich diesen Befehl anstelle meiner App hier einfügen. Ich werde die Box Office-Vorlage und die Create React App-Vorlage PWA wählen . Wenn ich die Eingabetaste drücke, wird der Befehl gestartet. Es dauert ein paar Minuten, bis alle erforderlichen Dateien erstellt sind. Es erstellt nicht nur Dateien, installiert auch alle Abhängigkeiten aus dem Paket Jason, sodass dieser Befehl eine Weile dauern kann. Sie uns während des Installationsvorgangs Lassen Sie uns während des Installationsvorgangs über den Unterschied zwischen Vite und Create React App sprechen . In Tic-Tac-Toe haben wir Vite verwendet. Vite ist im Grunde eine Konfiguration, die auf dem Modul-Bundler-Roll-up mit der Create React App aufbaut. Es ist fast dasselbe. Create React App ist eine Konfiguration die auf dem Modul-Bundler Webpack aufbaut. Während Vite für jede Frontend-Bibliothek und für jedes Frontend-Projekt verwendet werden kann , zielt die Create React App nur auf React ab. Vite verwendet Roll-up. Create React App verwendet Webpack, und beide sind Konfigurationen, die auf diesen Modulbudlern basieren. Es gibt keinen großen Unterschied, was zu wählen ist. Die Antwort ist, dass es sehr subjektiv ist, was man wählt. Ich persönlich bevorzuge Vite, aber die Create React App hat ihre eigenen Vorteile, zum Beispiel haben sie diese sofort einsatzbereite progressive Web-App-Unterstützung, was großartig ist und perfekt zu unseren Projektanforderungen passt. Lass mich zurück zum Terminal gehen. Ich kann sehen, dass alles installiert wurde. Ich kann die Erfolgsmeldung und die Willkommensnachricht sehen. Wenn ich meinen Ordner hier öffne, habe ich Box Office und darin meine Projektdateien. Jetzt öffne ich VS Code und in VS Code öffne ich das Ordnerlabor. Das wird Box Office sein. Hier haben wir ein paar Dinge, die sich geringfügig von dem unterscheiden, was wir zuvor in Tic-Tac-Toe hatten. Darüber werden wir gleich sprechen. Bevor wir fortfahren, öffnen wir den Gast, den Sie mit Ihnen geteilt haben. Von hier aus konfigurieren wir Prettier und ESLint. Das Setup wird so ziemlich das gleiche sein wie in Tic-Tac-Toe, aber etwas anders. Lassen Sie uns zunächst die ESLint-Konfiguration kopieren. Ich werde eslintrc erstellen. Kopiere alles hier, das gleiche werde ich für Prettier tun. Was haben wir in ESLint hier? Genau das gleiche Setup wie in Tic-Tac-Toe, aber wir haben hier auch das Plugin, React Hooks und nur ein paar Regeln, die hier definiert sind. Dann müssen wir Abhängigkeiten installieren. Genau wie zuvor müssen wir ESLint-Konfiguration Prettier installieren. Das Prettier-Plugin, das wir erweitern, das wir installieren müssen, um ESLint-Plug-in React sowie das React Hooks-Plugin zu installieren. Ich kopiere einfach diese Plug-ins hierher. Der Installationsbefehl lautet eslint-config-prettier, eslint-plugin-react und eslint-plugin-react-hooks. Außerdem muss ich die Tools selbst installieren. Ich muss Prettier und ESLint installieren. Großartig. Warten wir nun auf die Installation. Ich habe bereits sechs Sicherheitslücken mit hohem Schweregrad. Nun, was ich als Nächstes tun werde. Als Nächstes werden wir überprüfen, was genau wir im Paket Jason haben. Fangen wir mit den Skripten an. Wie ich Ihnen schon sagte, ist Create React App eine Konfiguration, die auf dem Webpack zugrunde liegenden Modul-Bundler aufbaut. Diese versteckte Konfiguration wird uns über das React-Skriptpaket angezeigt, das über NPM verteilt wird. So wie wir Beat über NPM verteilt haben, haben wir React-Skripte. Aus diesem Grund haben wir in unseren Skripten React-Skripts zum Starten, Erstellen, Testen und Auswerfen. Was sind diese Skripte? In Tic-Tac-Toe haben wir das Dev-Skript, das den lokalen Entwicklungsserver für uns ausführt. Hier heißt es Start. Nun, normalerweise heißt es Start, aber es macht genau das Gleiche. Es startet den lokalen Entwicklungsserver. Dann haben wir wieder das Build-Skript, um ein Produktions-Build-Testskript zu erstellen, das Tests ausführt. Wir werden das in einer Sekunde anfassen und auswerfen. Eject können wir uns Konfiguration von React-Skripten abmelden und die Konfiguration selbst so anpassen , wie wir es benötigen. Dann haben wir viele Abhängigkeiten im Zusammenhang mit der Workbox. Was ist das? Dies alles hängt mit der Erstellung einer progressiven Web-App zusammen. werden wir später sprechen, wir werden nichts davon berühren. Web Vitalwerte, wir werden uns gleich damit befassen. React Scripts ist das Paket mit der Konfiguration. React-Abhängigkeit und Testbibliothek, darauf werden wir gleich eingehen , ebenso wie unsere Dev-Abhängigkeiten, die wir gerade installiert haben. Fantastisch, wenn wir nun in den öffentlichen Ordner schauen, ist der Zweck dieses Ordners genau der gleiche wie im Feed. Alle Dateien, die wir hier platzieren, werden in unserer Anwendung dem URL-Segment zugeordnet. Hier haben wir Index-HTML im öffentlichen Ordner. Wenn wir es im Feed im Stammordner hatten, haben wir es hier öffentlich. Dies ist, sagen wir, der erste große Unterschied zwischen Feed und Create React-App. Hier haben wir ein paar Dinge, die anders sind. Zuerst haben wir diese öffentliche URL, eine globale Variable, diese öffentliche URL wird vom Webpack gesendet. Wenn unsere App kompiliert wird, verarbeitet Webpack Index-HTML und ersetzt diese öffentliche URL den Stammpfad unserer App. In unserem Fall wird es in etwa so übersetzt. Einfach ein Favicon und das war's. Jetzt haben wir auch das Root-Element , in dem die Anwendung gemountet wird. So ziemlich das, was wir in Tic-Tac-Toe hatten. Dann haben wir die Manifest-Datei. Die Manifestdatei bearbeitet etwas, das mit der Erstellung der Progressive Web App zu tun hat. Es steuert im Grunde die Verknüpfung, mit der unsere Anwendung geöffnet wird . Wir werden das behandeln, sobald wir zur Progressive Web App zurückkehren, wir denken jetzt nicht darüber nach. Nun, was haben wir im Quellordner? Im Quellordner haben wir eine sehr einfache Einrichtung. Lassen Sie uns eigentlich das Start-Skript ausführen , um den Entwicklungsserver zu starten. Mal sehen, was wir hier haben. Wenn ich hierher zurückgehe, dauert es einige Zeit, bis ich die App öffne. Während es noch geöffnet wird, schauen wir uns an, was wir im Index haben, den es geöffnet hat. Schauen wir uns an, wie die App aussieht und kehren wir zu den Dateien zurück. Sie können sehen, dass es ein paar Minuten dauert und wir haben hier bereits ein sofortiges Problem. React ist in App.js definiert, wird aber nie verwendet, da Sie, wie ich Ihnen schon sagte, in React 17 und früheren Versionen immer React aus React importieren mussten, immer React aus React importieren mussten wenn Sie JSX in Dateien verwenden. Ab React 18 ist dies nicht erforderlich. Wir verwenden hier die spezifische Plugin-Option jsx-runtime, die uns sagt, dass wir sie nicht benötigen. Deshalb entfernen wir es. In React 18 ist dies nicht erforderlich. Nun, das ist unsere Anwendung, so sieht es im Moment aus, nichts allzu Besonderes, ziemlich einfaches Setup. Sehen wir uns die Akten an. Beginnen wir mit Index.js, unserem Einstiegspunkt, und hier haben wir ein paar Dinge , die wir noch nie zuvor gesehen haben. Zuallererst haben wir das Dokument Reactdom.createRoute. Ruft das Element anhand der ID root Dies ist das Element, das wir aus dem Index-HTML abgerufen haben. Die IDs müssen übereinstimmen. Hier wird die Anwendung gemountet. Auch hier haben wir den strikten Modus , der unsere App ziemlich einfach eingerichtet macht, aber wir haben auch eine Service Worker-Registrierung und wir haben Web-Vitalwerte gemeldet. Was sind das? Registrierung von Servicemitarbeitern und GS für Servicemitarbeiter. Dies sind die Dateien , die unsere Web-App zu einer progressiven Web-App machen werden . Wir wollen jetzt nicht wirklich an sie denken. Das werden wir später verwenden. Wir behalten sie einfach und ignorieren vorerst einfach, was wir hier über die Registrierung von Service Worker haben. Nochmals, darüber werden wir später sprechen. Aber wir haben hier auch Berichte über Web Vitals. Wenn wir hineinschauen, Web Vitals, ist das, was wir importieren. Hier ist es nur eine einfache Funktion, die etwas importiert, das als Web Vitals bezeichnet wird, und danach ruft sie hier eine Reihe von Funktionen auf. Was ist ein Web Vitals, das hierher importiert wird? Das ist das Paket, das wir hier haben Web Vitals. Wenn wir zur NPM-Registry zurückkehren, innerhalb der NPM-Registrierung nach diesem Paket suchen, können wir innerhalb der NPM-Registrierung nach diesem Paket suchen, in dem wichtig ist, und sehen, was es genau tut. Kurz gesagt, Web Vitals ist ein Paket, es ist im Grunde nur eine Reihe von Funktionen, die Sie in Report Web Vitals finden. Diese Funktionen ermöglichen es uns, die Leistung unserer Anwendung zu messen. Welche Art von Aufführung? Die Leistung basiert auf verschiedenen Metriken, die wir sammeln können , wenn unsere Seite geladen wird. Sie können hier auf der offiziellen NPM-Seite des Pakets ausführlich über sie lesen . Dies ist sehr nützlich, wenn Sie maximale Optimierung und maximale Geschwindigkeit in Ihrer App erreichen möchten . Wie es funktioniert, ist das innerhalb des Index, ja, wir nennen diesen Bericht Web Vitals und hier als Callback , der hier bei der Leistungseingabe hier nochmal definiert wird. Der Callback, den wir hier weitergeben, wird für jede Metrik aufgerufen. Wenn wir bestehen, stornieren Sie einfach hier. Das bedeutet, dass alle unsere Leistungskennzahlen gestrichen werden. Lass mich es tatsächlich speichern und lass uns sehen, was genau ich brauche. Wenn ich zur App zurückkehre, gehe ich zu Inspect. Wenn ich in die Konsole schaue, sehe ich hier verschiedene Metriken. Konsole wurde als Objekte mit den verschiedenen Werten protokolliert. Genau das macht das Web Vitals-Paket. Es misst die Leistung und gibt Ihnen Kennzahlen. Nichts weiter als das. Wir brauchen es nicht wirklich. Vielleicht, aber wir werden es später benutzen, aber nicht jetzt. Also können wir es hier als einfache Funktion belassen. Schauen wir uns das Innere von App.js an. Eigentlich wäre eine gute Frage hier, warum haben wir alle Dateien Erweiterung with.js anstelle von JSX? Denn in Tic-Tac-Toe verwenden wir.jsx überall. Nun, Vite hat verlangt, dass wir die Erweiterung.jsx verwenden, und Vite funktioniert so, dass es alle Dateien mit der Erweiterung JSX aufnimmt und versteht , dass dies React ist. Da Create React App hier nur auf React-Apps ausgerichtet ist, ist dies keine Voraussetzung, da klar ist, dass alles React sein wird. In Vite war das jedoch anders, da Vite auch für andere Bibliotheken verwendet werden kann. Wir werden unseren Dateien auch die Erweiterung with.js nennen. Wir werden sie im kommenden Video umbenennen. Im Moment werden wir von hier nichts löschen. In App.js haben wir eine Logo-Datei hier importiert. Ich möchte hier nur eine kurze Notiz machen, weil wir unsere statischen Assets wie Bilder, Schriften, etwas, das statisch ist und keine Verarbeitung erfordert, keine Verarbeitung erfordert, öffentlich zugänglich machen und dann vom Quellcode aus referenzieren können. Aber hier wird es importiert. SVG-Datei ist ein Bild. Es wurde importiert, als wäre es ein Skript oder ein Modul. Dann wird alles, was hier wichtig ist, als Quelle übergeben. Wenn wir uns HTML ansehen, tut uns leid, hier haben wir ein Bild , das auf die URL verweist. Sie können sehen, dass es automatisch generiert wurde oder dass etwas mit dieser URL gemacht wurde. Genau. Unter der Haube, was Webpack getan hat, also dass das Paket React die Konfiguration skript, es verstanden, dass wir ein Bild importieren wollen. Dann hat es das Bild verarbeitet und automatisch die URL dafür generiert. Im Grunde wurde es also vom Bundler verarbeitet. Sie haben vielleicht eine Frage warum. Warum müssen wir es getrennt halten? Warum importieren wir manche Dateien, manche Bilder so aus Quelle und andere halten wir öffentlich? , es steckt eigentlich kein besonderer Grund Ich vermute, es steckt eigentlich kein besonderer Grund dahinter. Der Unterschied besteht darin , dass diese Dateien vom Bundler verarbeitet werden. Diese, die sich in einem öffentlichen Ordner befinden, werden vom Bundler nicht verarbeitet. Wir hätten diese logo.svg in Public verschieben können. Dann würden wir in App.js einfach auf logo.svg verweisen, oder? Wenn ich es speichere, aktualisiere ich, alles bleibt beim Alten und Sie können sehen logo.svg auf der Anwendungsroute bereitgestellt wird , weil wir es im öffentlichen Ordner haben und die URL-Segmente zugeordnet sind, wie Sie sich erinnern. Es wird in der Quelle platziert, dann wird es einfach so importiert und dann die Quelle angegeben. Auf diese Weise können Sie Bilder laden. Es heißt, das kann nicht gelöst werden. Das liegt wahrscheinlich daran, dass ich meine App neu starten muss , damit sie das wieder aufnehmen kann. Lassen Sie uns das für alle Fälle tun, um sicherzugehen. Aber ich denke, das ist alles, was wir tun mussten. Was wir hier tun können, um das zusammenzufassen, was wir gerade erstellt haben, müssen wir auch in Git dieses Projekt, das wir gerade erstellt haben, auf GitHub hochladen und einen weiteren Commit hinzufügen , weil wir neue Abhängigkeiten installiert haben. Ich starte die App. Sie können sehen, dass es einwandfrei funktioniert hat und die URL erfolgreich war. Wie dem auch sei, Sie können hier sehen, dass Git tatsächlich schon drin ist. Als ich die Vorlage erstellt habe und die npx Create React App ausgeführt habe, wurde Git automatisch in diesem Ordner initialisiert. Wenn ich git log eintippe, habe ich hier bereits einen ersten Commit. Das Kommando hat sich darum gekümmert. Da wir jedoch unsere eigenen Änderungen eingeführt haben, werden wir sie übernehmen. Mal sehen, was wir hier haben? Wir haben App.js, index.js. Ich werde einfach alle Änderungen entfernen, die wir hier vorgenommen haben, weil wir sie wirklich nicht benötigen. Wir werden im nächsten Video alles machen. Wir interessieren uns nur für unsere ESLint-Konfiguration, die wir hinzugefügt haben, und für die Prettier-Konfiguration, für die wir package lock und package.json hinzugefügt haben, weil wir die Dev-Abhängigkeiten installiert haben. Großartig. Alles ist auf der Bühne. Ich übernehme einfach alles und nenne es installiert und konfiguriert Prettier und ESLint. Fantastisch. Jetzt ist es an der Zeit , dass wir dieses Projekt auf GitHub hochladen. Lass uns gehen. meinem GitHub-Konto werde ich in der oberen rechten Ecke ein neues Repository erstellen . Mein Repository-Name wird Box Office App sein. Ich werde es privat machen. Ich möchte keine Read Me hinzufügen. Ich habe bereits Gitignore. Wenn wir wie zuvor in Gitignore nachschauen, haben wir sowohl Knotenmodule als auch den Build-Ordner ignoriert. Wenn wir in Tic-Tac-Toe den Build im Festplattenordner generiert haben , generiert Create React App den Build im Build-Ordner. Lassen Sie uns eigentlich das Repository erstellen und dann den Befehl build ausführen. Dann werden wir alles hochladen. Ich klicke auf Create Repository. Folgen Sie dann erneut genau dem gleichen Verfahren. Ich kopiere git remote add origin in meine Repository-URL. Ich platziere es in meinem Terminal, ich führe diesen Befehl aus. Dann mache ich git remote minus v, um zu überprüfen, ob Alias-Ursprung auf mein GitHub-Repository verweist. Fantastisch. Also werde ich Git Push Origin Master machen. Und wenn ich jetzt mein GitHub-Repository aktualisiere, ist es da. Fantastisch. Lassen Sie uns versuchen das Build-Skript am Ende auszuführen , um zu sehen, ob es tatsächlich funktioniert. Npm run build wie in package.json definiert. Wo sind unsere Skripte? Hier, und mal sehen, heißt es , einen optimierten Produktions-Build erstellen. Nun, wir haben React ist definiert, aber nie verwendet. Das ist genau das, was wir tatsächlich hatten. Das ist ziemlich nervig, dass keine ungenutzten Variablen einen Fehler erzeugen. Weil Sie sehen können, dass der Build unterbrochen wird , weil ESLint für keine ungenutzten Variablen einen Fehler erzeugt. Lassen Sie uns weitermachen und speziell für diese Regel, wenn ich mich nicht irre, haben wir in Tic-Tac-Toe genau dasselbe für keine ungenutzten Variablen gemacht. Wir werden es Ihnen sagen, bitte geben Sie uns eine Warnung statt eines Fehlers. Eine Warnung, es ist nur eine Warnung. Es ist nur eine Nachricht, um dich zu warnen. Es macht den Build nicht kaputt oder so. Sie können jetzt sehen, dass es gelb geworden ist und mein Build erfolgreich abgeschlossen wurde. Ich werde es einfach so lassen wie es ist, ich werde App.js nicht ändern. Lassen Sie mich die Änderungen entfernen, die ich vorgenommen habe. Hier können Sie sehen, wie der Build-Ordner erscheint und wenn wir in das Terminal schauen, haben wir die Ausgabe, dass das Projekt erstellt wurde, vorausgesetzt, es wird auf der Route gehostet , dann andere Befehle, und wenn wir in Build nachschauen, können wir sehen, dass dies unser Produktions-Build ist. Wir haben nur statische Dateien. Wir haben HTML-, CSS-, JavaScript-, Bilder- und JSON-Dateien und sogar TXT. Wir haben eine Lizenz für einen Servicemitarbeiter. Jetzt nehmen wir den Build-Ordner und laden ihn hoch, um ihn zu hosten. Nochmals, das werden wir ganz am Ende tun. Du kannst sehen, wie es funktioniert. Es sieht perfekt aus, nicht wahr? Fügen wir nun diese ESLint-Änderung zu Git hinzu. Also werde ich es übernehmen und benennen, keine ungenutzten Variablen in eine Warnung umgewandelt und dann alles auf GitHub hochladen. Großartig. Im nächsten Video werden wir all diese Dateien im Quellcode bereinigen. Danach beginnen wir mit der Entwicklung. Wir sehen uns dort. 59. 03 Reinigung von redunanten Dateien: Hallo zusammen. Im letzten Video haben wir mit der Create React-App-Vorlage ein neues Projekt erstellt. In diesem Video werden wir nur eine kleine Bereinigung durchführen, bei der diese unnötigen Dateien, die die wir nicht verwenden werden, aus dem Quellcode entfernt werden. Richtig, wir werden mit der Entwicklung beginnen. Lass uns gehen. Zuallererst habe ich im letzten Video nicht wirklich etwas über Setup-Tests und die Testbibliothekspakete, die wir hier haben, behandelt Setup-Tests und . So können wir React-Anwendungen tatsächlich testen. Wir können programmatische Tests mit einer sogenannten React-Testbibliothek schreiben. Das werden wir hier an der Kinokasse nicht tun. Deshalb entfernen wir es einfach weil es unbenutzt bleibt. Als Erstes werde ich „App.test.js“ entfernen. Ich werde „Setup.Tests.js“ aus „package.json“ entfernen. Ich werde all diese Abhängigkeiten einfach so entfernen. Mal sehen, und das war's. Jetzt haben wir die Testbibliothek aus dem Projekt entfernt , da wir sie hier nicht behandeln werden. Als nächstes haben wir „logo.svg“. Wir brauchen es nicht wirklich. Wir haben "index.css „, wir können es tatsächlich behalten. Wir haben "App.css ", wir brauchen es nicht wirklich, weil "index.css" globale Styles für den Körper enthält Lassen wir es einfach dort und berühren wir es nicht. Dann haben wir „reportWebvitals.js“. wir wirklich interessiert sind, benötigen wir es möglicherweise, um die Leistung zu messen Wenn wir wirklich interessiert sind, benötigen wir es möglicherweise, um die Leistung zu messen, sodass wir es für alle Fälle behalten können. "Service-worker.js" ist etwas, das wir später anhängen können , wenn wir uns mit progressiver Web-App befassen werden. Übrigens, wenn Sie in den Service-Worker hineinschauen, können wir bereits sehen, dass wir hier etwas haben, das rot markiert ist. Auch hier sind es unsere schönen ESLint-Regeln. Was wir dagegen tun können, wir können ESLint einfach nur in diesen beiden Dateien deaktivieren, in "service-worker.js" und in „serviceWorkerRegistration.js“. Auch hier werden wir später über diese Dateien sprechen. Wir möchten nur sicherstellen , dass diese Dateien keine Fehler oder Warnungen von ESLint erzeugen. Wir werden eslint-disable einfach so mit einem Schrägstrich in Asterix verwenden , um ESLint nur für diese Datei zu deaktivieren. Ich werde diese Zeile kopieren und sie ganz oben in "serviceWorkerRegistration.js" einfügen. Jetzt haben wir hier keine ESLint-Warnungen oder Fehler. Fantastisch. Als Nächstes werden wir "index.js" und "App.js " umbenennen , sodass sie die Erweiterung.jsx haben, nur um Dateien mit JSX-Markup und Dateien ohne JSX-Markup, nur normale JS-Dateien, zu unterscheiden und Dateien ohne JSX-Markup, nur normale JS-Dateien, zu . Dies ist besonders wichtig für "service-worker.js" und "erviceWorkerRegistration.js“. Weil es in diesen Dateien überhaupt nicht um React geht. Dies sind Dateien, die sich nur mit dem Frontend befassen. Sie können nicht speziell in React verwendet werden. Wir benennen "index.js" um, um das.jsx-Markup zu haben. Genau das Gleiche werden wir für "App.js" tun. In App.jsx müssen wir React nicht aus React importieren, da wir auch hier React 18 verwenden. Und React 18 erfordert nicht, dass Sie React in den Geltungsbereich von jsx importieren. Wir haben "logo.svg" entfernt, also entfernen wir den Verweis auf eine nicht existierende Datei. Wir haben "app.css" entfernt, wir entfernen erneut den Verweis auf eine bestehende Datei. In der App-Komponente können wir vorerst einfach Hallo behalten, ohne dass hier ein Klassenname angegeben wird. Ziemlich einfach. Auch hier ziemlich einfach. "Index.css" wird beibehalten, deshalb haben wir importiert. Mal sehen, was hier noch alles passiert. Was auch immer wir am Ende in der Öffentlichkeit haben, wir werden es durch unsere eigenen Symbole ersetzen, durch unsere eigenen Bilder. Wir löschen sie vorerst nicht, und ich denke, das ist so ziemlich alles. Das einzige, was wir tun müssen, npm install auszuführen, um die Änderungen widerzuspiegeln, die wir an „package.json“ vorgenommen haben. Da wir diese Abhängigkeiten der Testbibliothek hier entfernt haben, wurden sie aus „package.json“ entfernt, aber sie werden nicht aus „node_modules“ deinstalliert. Wenn ich npm install ausführe, werden einfach die nicht vorhandenen Abhängigkeiten und „package.json“ aus dem Ordner „node_modules“ entfernt die nicht vorhandenen Abhängigkeiten und . Sie können sehen, „ 71 Pakete wurden entfernt“. Auch hier habe ich sechs hohe Sicherheitslücken. Bitte erschrecke mich damit nicht. Lassen Sie uns vorerst festlegen, git add. Es ist bereits in der Phase und „git commit“ wird entfernt oder der Quellordner aus der ersten Create React-App bereinigt . Einrichtung. Fantastisch. Wir geben alles, um alles zu meistern , und was das Gute daran ist, dass wir uns im nächsten Video sehen. 60. 04 React Router v6 Einführung: Hey, in diesem Video werden wir endlich mit der Codierung fortfahren und endlich anfangen, etwas zu bauen. Lass uns gehen. Wenn Sie sich an Tic-Tac-Toe erinnern, hatten wir in unserer Bewerbung nur eine Seite. Wir hatten keine Navigation zwischen den Seiten, und die Sache ist, dass in React keine in die Bibliothek integrierte Navigation vorhanden ist. Das heißt, wenn wir eine gewisse Navigation zwischen den Seiten erreichen möchten , müssen wir dies selbst tun. Nun, dafür gibt es ein Paket, das die Navigation für uns verwaltet. In Wirklichkeit gibt es mehrere Pakete, die das Routing innerhalb der App ermöglichen können . Diese Navigation zwischen Seiten wird als Routing zwischen Seiten bezeichnet. Es gibt verschiedene Pakete, die das können, sie haben mehr oder weniger die gleiche Schnittstelle. Der, den wir verwenden werden , ist React Router. Wenn ich die offizielle Dokumentation hier öffne, kann ich wählen, dass ich neu bin. Ich kann jedoch zustimmen, dass ihre neueste Dokumentation nicht sehr klar ist. Ich habe nichts gesehen, was ich ausführen muss, um React Router zu installieren , und auch dieses Tutorial ist sehr lang und deckt alles ab, aber was ist, wenn ich nur einen schnellen Start machen möchte? Um mit dem React Router zu beginnen, müssen wir zuerst dieses Paket installieren und dazu müssen wir npm install react-router-dom ausführen. Wir machen das, danach erscheint es im Paket json. Jetzt werde ich den Entwicklungsserver erneut ausführen und schauen wir uns die Dokumentation an. Wenn wir hier das Setup durchführen, wir tatsächlich aufgefordert, eine neue React-App mit Vite zu booten. Wir werden diesen Schritt überspringen. Danach sehen wir „Einen Router hinzufügen “ und hier müssen wir so etwas erstellen. Aber ich persönlich finde es etwas verwirrend, dieser Dokumentation zu folgen, weil ich React Router aus den vergangenen Versionen kenne Derzeit befindet es sich in Version 6 und jede Hauptversion, wie 5, 4, 3 , ändert immer ihre API, ihre Schnittstelle, weil sie jetzt völlig anders ist als zuvor. Um es einfach zu machen, gehen wir links zu den Hauptkonzepten und hier gehen wir zu dem Abschnitt Rendern, falls ich mich nicht irre. Hier finden Sie ein sehr gutes Beispiel , aus dem hervorgeht, was genau React Router macht und was wir tun werden? Anstatt der ganzen langen Dokumentation zu folgen, nehmen wir nur das, was wir brauchen. Wir nehmen dieses Beispiel und wir werden verstehen, was genau React Router uns bieten kann. Wir können einen ziemlich einfachen Create-Root-Aufruf sehen , den wir bereits in index.jsx haben , und wir sehen, dass wir diesen Sortierbaum benötigen. Zuallererst benötigen wir einen Browser-Router. Wir werden das importieren und das alles werden wir wahrscheinlich in der App machen. Wir können den Browser-Router tatsächlich importieren und in index.jsx verwenden Lassen Sie uns dies jedoch in der App tun. Wir müssen es zuerst von irgendwoher all diese Komponenten holen , sie sind alle von React-Router-Dom importiert, und irgendwo in dieser langen Dokumentation gibt es sie. Sie können sie tatsächlich dort finden. Wir brauchen einen Browser-Router und wir brauchen Routen, und wir brauchen eine Route. Also, wir werden etwas von React-Router-Dom importieren , also müssen wir uns den Browser-Router schnappen und wir müssen Routen abrufen, nicht Router, und wir müssen uns die Route schnappen. Diese drei Komponenten. Was ich jetzt tun werde, ich kopiere einfach das Markup und füge es einfach so in die App ein. Aber hier, jetzt haben wir nicht all diese Komponenten , die hier definiert sind, das ist in Ordnung. Was ist eigentlich hier los? Durch die Verwendung dieser baumartigen Struktur können wir Routen in unserer React-Anwendung definieren. Stellen Sie sich Routen als Seiten vor, also jede Route wird durch eine Seite dargestellt. Route ist im Grunde nur ein URL-Segment. Wenn Sie, sagen wir für Pfadteams, immer dann, wenn die URL beispielsweise Slash Teams ist , können wir diese Teamkomponente mithilfe der Syntax anzeigen. Aber das werden wir nicht tun. Moment müssen wir nur mindestens etwas anzeigen. Lassen Sie uns das kommentieren, diese Routenkomponenten, und indem wir sie uns ansehen, lassen Sie uns sehen was wir selbst mitbringen können. Wir werden einfach weitermachen und die Route unter Pfad, Route und Index erstellen . Ein Element wird etwas sein. Was müssen wir hier anzeigen? Hier müssen wir die Komponente rendern , die unsere Seite darstellen soll. Ich schlage vor, dass in Source dann ein neuer Ordner erstellt und ihn Pages genannt wird. Hier erstellen wir Komponenten, die unsere Seiten repräsentieren. Ich werde hier eine neue Datei erstellen, nennen wir sie Home.jsx. Von hier aus erstelle ich solche Home-Komponente und exportiere sie dann standardmäßig so. Ab jetzt wird es ein einfaches Div mit der Aufschrift Homepage sein. Also, für den Pfadindex nur für Route, werden wir die Home-Komponente rendern und übrigens, Sie können sehen, sobald ich home eingebe und wenn mein Cursor am Ende steht, habe ich diesen IntelliSense hier aus der Drop-down-Liste. Wenn ich „Tab“ drücke, wird es für mich automatisch importiert, ziemlich cool, nicht wahr? Jetzt behalte ich es so und wenn ich zu meiner App zurückkehre, schaue ich mir an, was ich habe. Ich habe hier eine Homepage und wenn ich zu einer anderen URL gehe, habe ich eine leere Seite. Wenn ich mir die Markierung ansehe, öffne ich den Körper, ich habe eine Route. Aber unterwegs habe ich nichts. Das liegt daran, dass ich hier keine Route, keine Seite definiert habe. React Router funktioniert so, dass er das URL-Segment hier abgleicht, den Pfadnamen mit dem Pfad, den Sie hier beim Rendern angeben, das entsprechende Element. Versuchen wir nun, eine weitere Seite zu erstellen. Nennen wir es Kontakt und hier rendern wir einfach. Nur um ein Beispiel zu geben, erstelle ich div und sage Kontakt. Wenn ich jetzt zu Kontakt gehe, sehe ich das Markup, das, was ich hier als Element übergeben habe , einfach so. Jetzt wissen wir, wie React Router funktioniert. Den Rest, den Sie hier im Beispiel sehen, werden wir in den nächsten Videos behandeln, da es hier um das Layout geht, sodass wir ein Layout haben können, das von mehreren Seiten gemeinsam genutzt werden kann . Dann kommt diese Route ohne Pfad oder ohne Index ins Spiel. Wir werden auch diese Spalte hier behandeln, die die Darstellung einer dynamischen Seite sein wird , aber auch hier werden wir sie später behandeln. Das ist nicht der richtige Zeitpunkt. Was wir jetzt tun werden, wir werden vielleicht einfach unsere ersten Seiten erstellen. Was ich Ihnen hier sagen kann, ist, dass wir in Box Office die Homepage haben und dann werden wir die Starter-Seite haben. zukünftige Referenz fügen wir, da wir bereits zwei Seiten erstellt haben, da wir bereits zwei Seiten erstellt haben, eine weitere Seitenkomponente hinzu, die wir Start-Grundlagen nennen werden, und ich werde einfach alles kopieren, was ich darin habe. Ich werde es in Starred umbenennen. Dann importiere ich innerhalb der App-Komponente erneut die mit einem Stern versehene Komponente, die unsere Seite darstellt. Anstelle von Kontakt werde ich einen Stern und statt Kontakt den mit einem Stern markierten Pfad anzeigen, nur um zu überprüfen, ob ich meine mit Sternen markierte Seite habe, wenn ich zu „Mit Sternen“ gehe . Großartig. Was ist dann mit diesen leeren Seiten, wenn wir eine undefinierte Route einschlagen? Es ist nicht 404, aber es ist eine Seite, die nicht gefunden wurde. React Router hat dafür eine Erklärung , wie man damit umgeht. Wenn wir hier zum FAQ-Bereich gehen, können wir sehen, wie ich in React Router 6 eine No-Match-404-Route hinzufüge . Du kannst das einfach benutzen. Wir werden es vielleicht am Ende oder oben platzieren Wenn ich mich nicht irre, kann es überall platziert werden. Anstatt dass momentan kein Treffer wichtig ist oder wir ihn vielleicht nicht ändern werden , werden wir einfach nicht gefunden anzeigen . Lass es uns versuchen. Wir gehen zur App und wann immer wir eine Route wählen, die wir nicht definiert haben, erhalten wir nicht gefunden. Aber wenn wir zur Homepage gehen, haben wir eine Homepage, wenn wir zu Starred gehen, haben wir einen Stern. Fantastisch. Nun, wie wir zwischen diesen Seiten navigieren können, weil wir Anker-Tags haben, aber wir können Anker-Tags nicht wirklich verwenden, wenn wir clientseitige Routing-Bibliothek wie React Router verwenden. Dafür müssen wir eine bestimmte Komponente verwenden. Gehen wir nach Hause und jetzt brauchen wir hier die sogenannte Link-Komponente, die wir erneut aus der Dom-Link-Komponente von React Router importieren . Ich werde einfach eine solche Link-Komponente anzeigen, es ist im Grunde nur ein Wrapper für das Ankertag, aber es ist spezifisch für React Router sodass React Router verstehen kann, dass Sie von einer Route zu einer anderen Route wechseln möchten, und dann nennen wir es Go to Started anderen Route wechseln möchten, und dann Page. diese Link-Komponente müssen wir prop called übergeben, um dann die Route anzugeben, zu der wir gehen möchten , wenn wir auf diesen Link klicken. Da unsere markierte Komponente unter Pfad mit Sternchen definiert ist, wechseln wir, wenn wir auf Gehe zur Sternseite klicken, zur markierten Route. Jetzt gehen wir zurück zur Startseite. Wenn wir uns das Markup ansehen, können Sie sehen, dass es sich unter der Haube tatsächlich um einen Ankertag handelt , der zur markierten Route führt. Wenn wir darauf klicken, befinden wir uns jetzt auf der mit den Sternen markierten Seite. Cool, nicht wahr? Das war's. Nun, das sind eigentlich die Grundlagen von React Router. Wie Sie sehen, besteht der Zweck darin, Ihnen dieses Navigationserlebnis in der React-App zu bieten. Denn auch hier hat React keine integrierte Lösung dafür Deshalb müssen wir unsere eigene Lösung verwenden oder eine Bibliothek installieren, die uns Routing-Funktionen bietet. Ich denke, das ist alles für die Einführung in React Router. Im nächsten Video werden wir mit der Erstellung von Layouts beginnen und mit unserer App fortfahren. Am Ende wollte ich nur eine Anmerkung zu React Router hinzufügen und warum nennen wir sie eigentlich Routen, warum nennen wir sie nicht Seiten? Die Sache ist, dass wir eine sogenannte Single-Page-Anwendung erstellen. Eine Single-Page-Anwendung ist hier im Grunde nur eine einzelne Index-HTML-Datei , weshalb sie als Single-Page-App bezeichnet wird. Wann immer wir zwischen Routen navigieren oder sie Seiten nennen, passiert tatsächlich, dass React Router JavaScript verwendet , um HTML-Markup zu ersetzen und dann entsprechende Komponenten anzuzeigen Wir nennen es Navigation, aber im Grunde genommen nimmt es vorhandenes HTML, entfernt es und fügt neues HTML ein, und dann ersetzt es die URL durch was auch immer wir als Route angeben. Alles hier wird von JavaScript verwaltet. Wir haben immer noch dieselbe Seite, es ändert sich nicht, dass sich HTML hier nicht ändert, das Skelett, die Vorlage, diese Indexierung ändert sich nicht, aber JavaScript ahmt tatsächlich dieses Navigationserlebnis nach, sodass es für den Endbenutzer, der die Anwendung aussieht, als würden wir auf Seiten navigieren. Nun, wir können sagen, dass wir es tatsächlich sind. Technisch gesehen ist das nur das Entfernen von HTML und Einfügen von neuem HTML auf der Seite und das Ändern des URL-Segments, das war's. In herkömmlichen Apps wird die Seite aktualisiert, wenn Sie auf eine andere Seite klicken , und in diesem Fall haben Sie eine echte, sagen wir Seite-zu-Seite-Navigation. Hier bei der etwas so genannten clientseitigen Navigation bedeutet clientseitige Navigation, dass wir tatsächlich mithilfe von JavaScript durch Seiten navigieren. Lassen Sie uns nun die Änderungen, die wir vorgenommen haben, übernehmen. In der App werde ich sie vielleicht einfach behalten. Bewahren wir es zum späteren Nachschlagen auf. Wir werden jsx addieren, wir werden home hinzufügen, wir werden alles zur Bühne hinzufügen, wir haben React Router installiert und schließlich werden wir alles übernehmen und Edit, React Router dom zur App sagen oder vielleicht React Router dom installiert haben. Perfekt. Wir sehen uns im nächsten. 61. 05 Layouts und Navigation zwischen Seiten: Hallo nochmal. In diesem Video werden wir über Layouts sprechen, wie wir sie verwalten können und was die Layouts überhaupt sind. Im letzten Video haben wir den React-Router installiert und sagen wir konfiguriert. Dies ist die Routing-Lösung , die wir für unsere App verwenden werden. Jetzt werden wir sehen, wie wir Layouts tatsächlich anwenden können , da wir eine Sternseite und eine Indexseite haben und sagen wir, sie haben ein gemeinsames Layout. Auf beiden Seiten wollen wir die Navigation sehen. Was wir tatsächlich tun können, wir können zu einer Home-Komponente gehen und den Link hier platzieren. Dann gehen wir zur markierten Komponente und setzen den Link hier ein, aber das ist eine Menge Wiederholung. Wir wollen nur ein gemeinsames Markup haben , das wir an einer Stelle platzieren und es wird überall angezeigt. dieses Beispiel ansehen Wenn wir uns dieses Beispiel ansehen und zur Dokumentation zurückkehren, wenn wir zu Main Concepts, Rendering gehen, ist dies die Stelle, an der wir das Markup aus dem letzten Video übernommen haben . Wir können etwas namens Layout Routes sehen. Wenn Sie es hier lesen, heißt es im Grunde, dass dieses Routenelement hier, das andere Routen umschließt, nur eine Komponente ist , die den zugrunde liegenden Routen ein gewisses Layout verleihen kann. Es stellt nicht die Seite selbst dar. Pager werden nur durch Routen dargestellt, die hier die Pfadeigenschaft definieren. Um das Layout zu erreichen, können wir diesem Ansatz folgen. Wenn wir das Layout zwischen der Homepage und der markierten Seite teilen müssen , können wir sie wie hier in die Route einbauen. Also lass uns weitermachen. Wir werden eine Routenkomponente erstellen. Wir werden die Homepage und die Seite mit den Sternen auf diese Weise einwickeln . Wir können das Element als einzelne Requisite ohne Pfadrequisite angeben . Hier ist unser Layout, das wir gerne für diese Seiten sehen würden. Wie werden wir das schaffen? In der Sortierung würden wir einen neuen Ordner erstellen und ihn Komponenten nennen. Hier platzieren wir eine neue Komponente, die wir MainPageLayout oder MainLayout nennen. Hier werde ich das Hauptlayout erstellen. Dann exportiere es von hier, exportiere Standard, MainLayout. Fantastisch. Jetzt importieren wir dieses Layout aus den Komponenten MainLayout. Dann verwenden wir anstelle des Seitenlayouts das Hauptseitenlayout. Aber wie genau funktioniert es? Denn wenn ich mein Hauptlayout öffne, ist es komplett leer. Da ist nichts drin. Was wird also gerendert? Lass es uns versuchen und sehen. Wenn wir jetzt zur App zurückkehren , ist unsere App leer. Nun, was passiert? Die Sache ist, wenn Sie sich erinnern, dass wir in React etwas namens Children Prop haben. Wenn wir eine Komponente definieren und sagen wir so etwas wie MainLayout und innerhalb übergeben wir etwas, was auch immer wir innerhalb dieser Komponente zwischen öffnender und schließender Klammer übergeben , es wird als untergeordnetes Requisit verfügbar , das wir innerhalb des JSX-Markups innerhalb dieser Komponente verwenden können. Mit dem React-Router sieht es jedoch nicht so aus. Wir geben keine Kinder weiter, weil wir es als selbstschließende Komponente weitergeben. Also, wie funktioniert es? Wenn wir hier in PageLayout nachschauen, müssen wir nach etwas suchen, das Outlet heißt. Hier auf der rechten Seite befindet sich der Abschnitt Outlet. In diesen Komponenten, die Layouts darstellen, wird Outlet verwendet . Sie repräsentieren im Grunde die Kinder, zumindest das Konzept ist dem von Kindern sehr ähnlich. Ich akzeptiere diese Reihe von Routen. Dieses Element hat das Hauptlayout. Aber da wir hier keinen Zugriff auf Kinder haben, müssen wir diese MainLayout-Komponente trotzdem irgendwie wissen lassen , dass wir rendern wollen, was auch immer drin ist. Dafür hat der React-Router diese Komponente namens Outlet. Outlet ist im Grunde wie Kinder, aber für alle Routen, die innerhalb dieser Routenkomponente passiert werden . Nun, es ist verwirrend. Lass es mich dir einfach zeigen. Wir importieren etwas von Reaction for Dom und dieses Etwas wird sich als Outlet herausstellen. Anstatt Kinder zu schreiben, ist Outlet der Ersatz. Wir benutzen keine Kinder, wir benutzen nur Outlet. Einfach so. Hier oben in unserem Outlet werden wir sagen, dass es sich um geteiltes Markup handelt. Ich speichere es. Ich gehe zurück und Sie können sehen, dass das, was hier gerendert wird, dies ist geteiltes Markup und dann ist dies eine mit Sternen versehene Seite. Im Grunde steht Outlet hier für alles, was wir innerhalb dieses Layouts passieren wie es durch die Routenkomponenten definiert ist. Wenn wir jetzt nach Hause gehen, werden wir genau das gleiche Bild sehen. Wir haben das ist geteiltes Markup. Jetzt werden wir fortfahren und eine Navigation hinzufügen , die auf allen Seiten geteilt wird. Innerhalb der Komponenten werde ich eine neue Komponente erstellen, die ich Navs nennen werde. Vorerst wird es wieder wie immer div sein, was etwas aussagt und dann standardmäßig Navs exportieren. Großartig. Dann befindet sich in main statt dessen Shared Markup, wir werden die Navs-Komponente anzeigen. Auch hier können Sie sehen, dass ich angefangen habe zu tippen, mein Cursor ist am Ende. Ich habe das Drop-down-Menü mit den Informationen und wenn ich „Tab“ drücke , wird es jetzt automatisch importiert. Seien Sie damit jedoch vorsichtig. Dies ist eine sehr wichtige Funktion, ich würde sagen, da sie die anderen Dateien problemlos importieren kann , nicht genau das, was Sie erwarten. Seien Sie vorsichtig damit und überprüfen Sie immer Ihre Eingaben. Wir sind hier unter Navs. In Navs möchten wir die Navigation anzeigen. Wir werden uns den Code holen , den wir bereits auf der Homepage haben. , dass wir die Link-Komponente Sie erinnern sich, dass wir die Link-Komponente verwenden, um zwischen den Seiten zu navigieren, wenn wir clientseitige Bibliothek React-Router-dom verwenden. Ich werde den Import-Link von React-Router-Dom kopieren. Ich werde es in Navs platzieren. Hier müssen wir die Navigation anzeigen . Wie werden wir das machen? Zunächst müssen wir unsere Schaltflächen definieren, auf die wir klicken und zwischen den Seiten wechseln werden. Lassen Sie uns fortfahren und unsere Anordnung von Schaltflächen definieren, eine Reihe von Elementen, die unsere Links sein werden. Dann werden wir diese Links genau so dem JSX-Markup zuordnen, wie wir es mit der Geschichte in Tic-Tac-Toe getan haben. Hier außerhalb von Navs werde ich eine Komponente erstellen, werde ich eine Komponente erstellen weil wir eine Komponente kennen, nur eine Variable namens Links. Es wird eine Reihe von Objekten sein und jedes Objekt wird die folgende Form haben. Es wird Text haben, und das muss es auch. Das wird etwas sein , das wir an die Link-Komponente übergeben werden , und Text ist der angezeigte Text. Der Text wird zu Hause sein. Es geht zur Route, zur Homepage. Dann fügen wir hier ein weiteres Objekt hinzu. Wir werden es Starred nennen. Es wird uns zur markierten Route führen. Jetzt müssen wir dieses Array nehmen und es als JSX-Markup markieren. Also hier, in Navs, können wir anstelle von div ein UL-Element anzeigen, oder vielleicht innerhalb von div werden wir UL anzeigen, lassen wir es so belassen. Innerhalb dieser UL werden wir nun unsere Links kartieren. Also werde ich hier geschweifte Klammern öffnen. Ich werde es Links.Map sagen. Jetzt nehmen wir den Gegenstand. Nennen wir das Objekt, das wir zuordnen, als Objekt. Wir werden es dem Element li zuordnen. In diesem li-Element, werden wir sagen, zeigen Sie bitte item.text an und als Schlüssel, weil Sie sich daran erinnern, dass wir, wenn wir Elemente immer dem JSX-Markup zuordnen , dem Wrapping-Element eindeutigen Schlüssel übergeben müssen, der das Element innerhalb des JSX-Markups identifiziert, das zugeordnet wird . In unserem Fall ist das URL-Segment , das wir hier verwenden, also für jedes Element einzigartig, oder es kann Text sein. Aber lassen Sie uns zum Schlüssel übergehen. Item to wird unser Element identifizieren. Wir müssen es auch in einen Link verwandeln. Wir verwenden dafür die Link-Komponente, die wir aus React-Router-dom importieren. Anstelle des Elementtextes werden wir also den Artikeltext verknüpfen. Für den Queue Prop Inside Link Opponent geben wir item.to weiter. Es wird so aussehen. Jetzt kehren wir zur App zurück und was wir sehen, sehen wir Navigation. Wenn wir auf Starred klicken, gehen wir zur Starred Seite. Wenn wir auf Home klicken, gehen wir zu Home. Cool, nicht wahr? Herzlichen Glückwunsch, jetzt haben wir die Navigationskomponente, die ziemlich cool funktioniert, und wir haben Layouts verwendet, um das zu verwalten. Lassen Sie uns jetzt die Homepage aufräumen und den Link hier entfernen und einfach Home sagen. Jetzt sieht es so aus. Fantastisch, nicht wahr? Vielleicht lassen Sie uns hier weitermachen und einen Titel hinzufügen. Lassen Sie uns hier eine neue Komponente erstellen und sie Title oder, sagen wir, AppTitle nennen. Lassen Sie uns von hier aus einen anderen Ansatz verfolgen, da wir immer eine Funktion erstellt und diese dann standardmäßig exportiert haben . Stattdessen können wir einfach Exportstandard sagen und dann die Funktion und was sie sagt, sehen wir uns an, dass der Komponentendefinition der Anzeigename fehlt , natürlich. Also, was es will, dass wir tun, es will, dass wir so etwas tun. Funktion AppTitle. Weil es möchte, dass wir eine Funktion exportieren, die tatsächlich einen Namen hat, nicht nur eine solche anonyme Funktion, sondern mit dem Namen. Das ist in Ordnung. Das wird den Code etwas deklarativer machen. Manchmal hilft es, Fehler aufzuspüren , die von verschiedenen Funktionen herrühren können. In unserem Fall wird dies nicht der Fall sein. Aber lassen Sie uns trotzdem mehr über die JavaScript-Syntax erfahren. Nennen wir es so. Hier können wir also anstelle von Navs und Outlet den H1-Titel anzeigen. Titel wird also die Requisite sein , die wir erhalten werden. Da wir begonnen haben, uns eingehender mit der JavaScript-Syntax zu befassen, wenden wir die Destrukturierung erneut eingehender mit der JavaScript-Syntax zu befassen, an einer anderen Stelle an, anstatt sie zu destrukturieren . Also erhalten wir das Requisiten-Objekt. Hier, in der nächsten Zeile, werden wir die Destrukturierung anwenden, anstatt das direkt in die Argumente einzubetten. Wir werden uns also sowohl den Titel als auch den Untertitel schnappen. Untertitel befindet sich innerhalb des Absatzes, des Untertitels, und lassen Sie uns diese AppTitleComponent im Hauptlayout direkt unter den Navs verwenden . AppTitle, wieder IntelliSense und Tab und Boom, es wird importiert. Mal sehen, wie es aussieht. Ich sehe nichts oder habe ich etwas verpasst? Lass mich sehen. Nein, habe ich nicht. Eigentlich habe ich es getan. Wenn ich mir das Markup ansehe, kann ich sehen, dass ich mein Markup habe, aber es ist leer. Nun, was passiert dort? Weil, naja, Sie haben es vielleicht bemerkt, aber ich habe den AppTitle ausgeführt, ohne dass irgendwelche Requisiten übergeben wurden. AppTitle rendert jedoch Titel und Untertitel. Weil wir sie nicht bestanden haben, sind sie leer. Das bedeutet, dass sie undefiniert sind. Der Titel ist undefiniert, der Untertitel ist undefiniert, weil wir sie erneut nicht bestanden haben. In diesem Fall müssen wir sie entweder weitergeben, hallo und etwas anderes. Bumm, jetzt ist es hier, es wurde angezeigt, alles funktioniert. Aber hier ist eine Alternative. Nehmen wir an, wir haben Situationen in denen wir aus irgendeinem Grund überhaupt keine Requisiten weitergeben . Vielleicht haben wir diese Komponente, die an mehreren Stellen wiederverwendet wurde , oft, was auch immer, und nicht immer, wenn wir Requisiten weitergeben. Aus diesem Grund können wir hier in Components genau dasselbe tun, da Komponenten nur Funktionen sind und wir wissen, dass wir Standardargumente auf Funktionen anwenden und wir wissen, dass wir Standardargumente können. Aus dem Requisitenobjekt wird also immer ein Requisitenobjekt definiert, es ist zumindest leer. Von diesem Objekt lenken wir Ihren Titel ab, Untertitel, die für dieses Objekt nicht definiert sind , weil wir keine Requisiten übergeben haben. Aber wir können Standardwerte für sie anwenden. Wenn wir standardmäßig keinen Titel übergeben, es Box Office und Untertitel, Filmsuche, oder nennen wir es vielleicht, suchen wir einen Film oder einen Schauspieler? Nur eine Frage, so etwas. Unsere endgültige Struktur wird so aussehen. Wenn wir hineinschauen, können Sie sehen, nun, sie werden angewendet. Wenn ich zum Hauptlayout zurückkehre, nun, Sie können sehen, dass ich nichts übergebe, aber ich habe immer noch meine Standardwerte. Wenn ich es ändern oder überschreiben möchte, würde ich sie einfach sofort weitergeben und sie werden funktionieren. Da wir sie jedoch standardmäßig hier in AppTitle definieren , werden wir hier nichts an Requisiten weitergeben. Lass es uns tatsächlich auf Navs legen. Also sieht es so aus. Fantastisch. Also ich denke , das war's für das Video. Wir haben tatsächlich viel getan und viele neue Konzepte behandelt. Wir haben Layouts behandelt, wie wir Layouts verwalten können , die auf mehreren Seiten geteilt werden können. Wenn wir hineinschauen, verwenden wir diese Outlet-Komponente, die den Ersatz für Kinder darstellt, aber für die Routendefinition , die wir hier haben. Dann haben wir auch behandelt, wie wir mithilfe der Link-Komponente eine Navigation erstellen und sie in einem gemeinsamen Markup anzeigen können mithilfe der Link-Komponente , ebenso wie Titel und Standardargumente, Standardwerte für die Argumente oder für die Requisiten. Bisher sieht es gut aus. Lassen Sie uns alles festlegen und dieses Video mit einer guten Note beenden. Also werde ich die App beenden. Ich werde alles mit einer Nachricht begehen. Ich nenne es „Navigation und geteiltes Layout für Start - und Startseiten hinzugefügt “. Unglaublich. Wir sehen uns im nächsten. 62. 06 Eingänge: Hallo nochmal. Im letzten Video haben wir Layouts und Navigation in unserer Anwendung verwaltet. Es sieht ziemlich cool aus. Jetzt können wir zwischen verschiedenen Seiten navigieren. Wir wissen, wie man Routen erstellt. Unser nächster Schritt hier ist das Tags-Feld , das wir auf der Homepage haben , in das wir etwas eingeben, dann klicken wir auf die Schaltfläche. Dann nehmen wir den Text aus der Textbox und senden ihn an ein Backend, das uns Daten zurückgibt. Bevor wir das alles implementieren können, müssen wir jedoch verstehen, wie wir Eingaben in React verwalten können. In diesem Video werden wir genau das tun. Gehen wir also zur Home-Komponente und erstellen wir hier eine einfache Texteingabe. Nichts Schickes. Wenn wir zu Home gehen, haben wir jetzt dieses leere Element hier, ein leeres Textfeld. Dagegen können wir nicht viel tun. Was ist, wenn ich einen Mehrwert daraus ziehen möchte? Wie kann ich das machen? Denn, nun, in Zukunft werden wir hier eine Schaltfläche hinzufügen und wenn wir auf diese Schaltfläche klicken, müssen wir den Wert dieser Eingabe irgendwie umschließen. Von Tic-Tac-Toe wissen Sie, dass wir den Status immer dann verwenden müssen , wenn wir einen Wert haben, der sich im Laufe des Lebenszyklus der Komponente ändert . Immer wenn wir etwas in die Eingabe eingeben, ändert sich dieser Wert. Aus diesem Grund werden wir React verwenden, State Hook verwenden. Also lass uns weitermachen. Von React werden wir wie zuvor neu zurückkehren. Also rufen wir usstate hook und müssen darin den Standardwert übergeben , der anfänglich der Wert für unseren Status ist, wenn die Komponente gemountet wird . Da es ein Eingabeelement sein wird und das Eingabeelement immer eine Zeichenfolge ist und wenn wir nichts darin haben, geben Sie nur leere Textbücher ein, es ist immer noch eine Zeichenfolge, aber leer. Deshalb werden wir hier eine leere Zeichenfolge übergeben. Der Grund dafür ist, dass, wenn wir für usstate nichts angeben, wir es einfach so nennen. Standardmäßig Anfangszustandswert undefiniert. Wie Sie sich erinnern, gibt usstate ein Array mit genau zwei Elementen zurück , wobei das erste Element der Zustand selbst ist. Also nennen wir diesen Zustand Eingabewert. Die Status-Aktualisierungsfunktion wird als Eingabewert gesetzt. Nun, wie können wir tatsächlich auf diese Updates warten , indem wir etwas in das Textfeld eingeben? Wenn Sie sich erinnern, haben wir Ereignisse für jedes HTML-Element verfügbar. Sie beginnen also mit dem Präfix on. Wenn wir uns also mit Eingaben befassen, müssen wir das onChange-Ereignis verwenden. Für dieses OnChange-Ereignis übergebe ich also einen Event-Handler und lassen Sie uns sehen, was wir haben und wann dieses Ereignis ausgelöst wird. Ich werde hier eine Funktion erstellen , nenne sie onInputChange. Wenn Sie sich erinnern, erhalten alle Event-Handler immer das Ereignisobjekt als erstes Argument. Ich werde einfach das Ereignisobjekt auf der Konsole protokollieren und dann onInputChange als OnChange-Ereignishandler übergeben. Wenn ich nun in die Eingabe tippe, kann ich sehen, dass jedes Mal etwas in der Konsole protokolliert wird , und wenn ich dieses Objekt erweitere, habe ich hier die Zieleigenschaft , an der wir interessiert sind. Ereignisziel stellt also das Ziel dieses Ereignisses dar. In unserem Fall wird dies das Eingabeelement selbst sein . Wenn ich es hier erweitere, habe ich eine Werteigenschaft, die den Wert darstellt, den das Eingabeelement zu einem bestimmten Zeitpunkt hat. Deshalb können wir weitermachen und das Ereignisziel auf der Konsole protokollieren. Lassen Sie uns zunächst das Ereignisziel betrachten, um noch einmal zu sehen , dass das Ereignisziel bei jeder Eingabe unser HTML-Eingabeelement darstellt. diesem Eingabe-HTML-Element haben wir diese Werteigenschaft, die jeweils den Eingabewert darstellt. Immer wenn ich tippe, sehen Sie, dass wir jetzt auf den Wert zugreifen können , den wir in der Textbox haben. Ziemlich cool. Jetzt können wir den eingegebenen Wert setzen, den Zustand der Daten in diesen Datenzustand übertragen. Wir können den Zielwert des Ereignisses übergeben, um den Status festzulegen. Jetzt aktualisieren wir bei jeder Eingabe den Status mit dem Zielwert des Ereignisses. Großartig. Nun, wie wir tatsächlich sehen können , dass dieser Eingabewert das ist was wir in Lehrbüchern schreiben. Wie Sie sich erinnern, können wir es einfach hier ablegen, Konsole protokollieren und überprüfen, da das Status-Update die Komponente veranlasst, erneut einzutreten, und wenn Komponenten gemietet werden, wird Komponente veranlasst, erneut einzutreten und wenn Komponenten gemietet werden, darin enthaltene JavaScript erneut ausgeführt und bei jedem erneuten Eingeben sehen wir das Konsolenprotokoll. Lass es uns versuchen. Immer wenn ich jetzt tippe, kann ich tatsächlich home.jsx6 in Zeile 6 sehen. Ja, ich habe dieses Konsolenprotokoll, was bedeutet, dass die Komponente erneut eingegeben wird, unser Status wird entsprechend der Eingabe aktualisiert. Mit diesem Ansatz haben wir ein Problem. Was Sie hier sehen, wird als unidirektionale Datenbindung bezeichnet. In Bibliotheks-Frameworks wird es also immer dieses Konzept der einseitigen Datenbindung oder der bidirektionalen Datenbindung geben. Was bedeutet das? Mit diesem Ansatz haben wir also die unidirektionale Datenbindung eingeführt, wir warten auf Änderungen in der Textbox und aktualisieren den Status. Wenn wir jedoch den Status aktualisieren, aktualisieren wir den Wert der Eingabe nicht. Versuchen wir zu sehen, was ich meine. Wenn wir diesen Eingabewert also irgendwo auf der Seite anzeigen möchten, können wir einfach die Interpolation verwenden. Einfach so. Wir wissen bereits, was zu tun ist. Wir haben hier einen Eingabewert. Lass uns einfach sehen, ob es funktioniert. Immer wenn ich tippe, wird es in J6 interpoliert und angezeigt. Ziemlich cool. Wie können wir überprüfen, ob es sich um eine einseitige Datenbindung handelt? Ich werde hier eine Schaltfläche mit der Schaltfläche „Typ“ erstellen und diese nach dem Zufallsprinzip aktualisieren. Zum Entklicken sage ich, setzen Sie den Eingabewert bitte auf so etwas wie meinen Namen. Mal sehen, was wir haben. ich also tippe, wird mein Status aktualisiert, aber wenn ich auf „Auf Zufallsprinzip aktualisieren “ klicke, der Text in der Eingabe jedoch nicht aktualisiert. Also, was passiert hier genau? Die Sache ist, bis wir eine unidirektionale Datenbindung haben, binden wir die Änderungen , die wir innerhalb von Lehrbüchern vornehmen, an den Zustand, aber wir haben den Zustand nicht an das Textfeld gebunden, an die Eingabe. Um das zu beheben, müssen wir ein Wertattribut an das Eingabeelement übergeben , sodass jeder Wert innerhalb des Zustands, den wir haben , zugeordnet wird an den Wert von Textbox gebunden wird. Für das Wertattribut übergebe ich also den Eingabewert. Mal sehen, ob ich hier etwas eintippe und dann auf „Auf Zufall aktualisieren“ klicke, jetzt wurde der Text nicht nur hier aktualisiert, sondern er wurde auch innerhalb des Eingabeelements aktualisiert. Denn jetzt haben wir eine bidirektionale Datenbindung. Wenn wir den Status aktualisieren, wird das Textfeld aktualisiert, und wenn wir das Textfeld aktualisieren, wird der Status aktualisiert. Es ist bidirektional, funktioniert in zwei Richtungen, anders als wir es zuvor getan haben. Wenn wir den Wandel vorantreiben und hier nur Werte beibehalten , wird es genauso sein. Es wird eine einseitige Datenbindung sein. Wir haben hier diesen Fehler, der besagt, dass Sie eine Value-Prop ohne einen onChange-Handler angegeben haben. Sogar React sagt dir, dass hier etwas nicht stimmt. Wie Sie sehen, kann unidirektionale Datenbindung sehr schwierig sein. Sie müssen sich also immer daran erinnern , was am besten zu Ihnen passt. Ich würde sagen, dass Sie in den meisten Fällen möglicherweise nicht einmal bemerken, dass eine unidirektionale Datenbindung Ihre Probleme mit sich bringen kann , und in den meisten Fällen wird dies auch nicht der Fall sein. bidirektionale Datenbindung ist jedoch wichtig, und Sie müssen den Unterschied verstehen und wissen, wie Sie ihn nutzen können. Bisher haben wir in diesem Video gelernt, wie man den Status mit Eingaben verwaltet. Wie wir sie für Änderungen innerhalb des Eingabeelements und des Aktualisierungsstatus verwenden können . Wir haben auch gelernt, was einseitige Datenbindung ist, was bidirektionale Datenbindung ist und was der Unterschied zwischen ihnen und warum eine einseitige Datenbindung schwierig sein kann. Es ist immer besser, die bidirektionale Datenbindung zu verwenden , wenn Sie sich nicht sicher sind. Ich denke, das ist es. Jetzt weißt du im nächsten Video alles, was wir brauchen. Wir werden hier einen Button erstellen. Wir nehmen alles, was wir in das Textfeld schreiben , und senden es an die API. Mal sehen, wie es ausgeht. Wir sehen uns dort. 63. 07 Formular Einreichung: Hallo, da. Wie Sie sich erinnern, haben wir im letzten Video über Eingaben gesprochen, wie wir Eingaben verwalten können, wie wir Eingabewerte an Zustände binden können und über den Unterschied zwischen bidirektionaler und unidirektionaler Datenbindung. In diesem Video senden wir Daten, die wir in ein Textfeld schreiben, an eine API und wir erhalten die Ergebnisse der API zurück, sodass wir dem Benutzer etwas in unserer Anwendung anzeigen können . Im letzten Video haben wir das alles in Home.jsx gemacht. Eigentlich können wir es behalten, wir platzieren einfach diese Schaltfläche hier, direkt unter der Eingabe, damit wir Text eingeben können. Wir haben bereits InputValue und wir haben onInputChange. Vielleicht können wir es so etwas wie searchString nennen, weil es im Grunde unsere Suchzeichenfolge für Suchergebnisse sein wird . Wir können den Status in searchString, searchs-t-R umbenennen searchString, searchs-t-R und searchs-T-R setzen. Wir müssen es nicht ausgeben, Wert wird searchString sein und onChange wird onSearchString oder onSearchInputChange sein , und wir werden searchString aktualisieren. Dann werden wir diese OnClick-Schaltfläche vollständig entfernen. Wir werden diese beiden in ein Formular packen und dann das onSubmit-Attribut des Formulars nutzen. Eigentlich formen sie in React, sie funktionieren etwas anders. In Single-Page-Apps arbeiten Sie mit Formularen etwas anders als in herkömmlichen Apps. Wenn Sie in herkömmlichen Apps auf „Senden“ klicken und ein Formular haben, müssen Sie hier eine Aktion definieren , die Sie auf eine andere Seite bringt. Wenn Sie auf „Senden“ klicken, wird der Benutzer weitergeleitet und die Daten werden an eine andere Seite gesendet. In Single-Page-Apps und modernen Web-Apps wird es nicht so verwaltet. Wie wird es dann verwaltet? In das Formular geben wir die onSubmit-Methode ein, und diese onSubmit-Methode wird die Funktion sein , die wir onSearch aufrufen. Auch hier haben wir das Event-Objekt, da es sich um einen Event-Handler für das Submit-Ereignis handelt. Lassen Sie uns versuchen und vorerst nichts tun, was für onSubmit onSearch gilt. Auch hier gilt: Da es sich um ein Formular nicht um einen Button handelt, müssen wir angeben, dass dieser Button vom Typ Senden sein soll, damit wir das Formular müssen wir angeben, dass abschicken können. Wenn wir darauf klicken, wird das Formular tatsächlich gesendet, und anstatt es nach dem Zufallsprinzip zu aktualisieren, wird gesucht. So etwas. Versuchen wir also zu sehen, ob ich hier etwas tippe und wenn ich „Enter“ drücke oder wenn ich auf „Suchen“ klicke, lass mich „Enter“ drücken. Siehst du, dass die App aktualisiert wurde? Sie können sehen, dass die Seite aktualisiert wurde. Jetzt habe ich dieses Fragezeichen oben. Das liegt daran, dass wir das Formular nicht richtig bearbeitet haben, weil es der Meinung ist, dass das Formular weil es der Meinung ist, dass das Formular, die Aktion, von einer anderen Seite bearbeitet werden muss. Es versucht, auf eine andere Seite umzuleiten, um Daten zu übermitteln. Genau wie bei einem Tool in modernen Web-Apps wird das Formular jedoch nicht so behandelt. Damit onSubmit die Seitenaktualisierung verhindert, müssen wir die Aktion verhindern, die das Submit-Ereignis ausführt. Dafür nennen wir Event-Prevent Default. Durch den Aufruf dieser Methode verhindern wir das Standardverhalten dieses Ereignisses. Wenn ich die Seite aktualisiere, lasse mich das Fragezeichen oben entfernen. Jetzt tippe ich etwas, ich klicke auf „Enter“. Du siehst, dass nichts passiert. In unserem Fall müssen wir, anstatt dass nichts passiert, tatsächlich Daten an die API senden. Was wird die API sein? Wie werden wir das schaffen? Wo fangen wir an? Wenn wir hier raten und zu Ressourcen scrollen, finden Sie die TVMaze API hier. Öffnen wir diesen Link. Die TVMaze API ist eine öffentliche API, die uns Informationen über verschiedene Filme und Schauspieler geben kann . Es ist völlig kostenlos und hat ein unbegrenztes Kontingent, und es ist öffentlich. Sie können einfach diese URL öffnen und der Dokumentation folgen. Es ist ziemlich gut dokumentiert mit guten Beispielen und guten Erklärungen für die Endpunkte, die es hat. Was uns interessiert, ist eigentlich der allererste Absatz hier, dem „Suche anzeigen“ steht. Es hat diese URL und hier ist ein Beispiel. Versuchen wir, das in einem neuen Tab zu öffnen. Wie Sie sehen können, haben wir hier Daten. Wir greifen einfach darauf zu und wir bekommen Daten zurück. Wenn Sie sich die URL ansehen, wir hier den Parameter q, query string an, und wenn ich ihn in etwas anderes ändere, geben wir hier den Parameter q, query string an, und wenn ich ihn in etwas anderes ändere, erhalte ich je nach Suchzeichenfolge unterschiedliche Ergebnisse. Dieser Q-Parameter ist im Grunde die Suchzeichenfolge. Sie können darüber in der Beschreibung der Funktionsweise dieses Endpunkts nachlesen . Wir werden diesen Endpunkt in unserer App verwenden. Gehen wir zurück und legen es hier ab. Ich werde es einfach kommentieren. Jetzt haben Sie vielleicht eine Frage. Wie senden wir eine Anfrage an diese API? Nun, wir können im Browser darauf zugreifen, aber wie können wir das in der App machen? Nun, im Browser haben wir eine Web-API namens Fetch. Abruffunktion ist in der Browserumgebung global verfügbar, sodass wir sie in JavaScript verwenden können. Fetch sendet eine Anfrage an die angegebene URL. Wir können diese URL nehmen, wir können Fetch aufrufen. Auch hier handelt es sich um eine Funktion , die Anfragen sendet und global im Browser-JavaScript verfügbar ist. Wir rufen diese Fetch-Funktion hier auf und übergeben die URL darin. Ich klicke auf „Enter“ und wie Sie sehen können, wird uns ein Versprechen zurückgegeben, ein Versprechensobjekt. Das bedeutet, dass wir angefangen haben, mit asynchronem JavaScript zu arbeiten. Hier fängt es an, interessant zu werden. Um einen Nutzen aus dem Versprechen zu ziehen, müssen wir dieses Versprechen abwarten oder es lösen. Im Moment verwenden wir hier die Syntax.then. Diese Fetch-Funktion löst das Antwortobjekt auf. Das Versprechen, das von Fetch zurückgegeben wurde, führt zu dem Antwortobjekt, das die Antwort auf diese Anfrage darstellt . Nennen wir es so. Ich nenne es Antwort und versuchen wir es mit der Antwort console.log. Dies ist das Antwortobjekt, das wir haben. Es stellt den Status der Antwort, die verwendete URL, die Header und einige verschiedene Dinge hier dar. Aber auch für dieses Antwortobjekt ist die Methode.JSON als Antwort auf JSON verfügbar. Es ist auch eine Methode , die ein Versprechen zurückgibt. Das Versprechen wird an den Antworttext weitergeleitet. Was Sie hier im Browser sehen, ist der Antworttext. Es ist im Grunde das, was vom Server zurückgegeben wird, die Antwort, also erhalten wir sie im JSON-Format. Deshalb nennen wir die JSON-Methode. Auch hier gibt es ein Versprechen zurück, das an den Körper weitergegeben wird. Was werden wir tun? Wir werden hier von Anfang an multiple dense verketten Dann rufen wir die Methode.JSON für das Antwortobjekt auf. Dann geben wir das Versprechen von.then callback zurück, das heißt beim nächsten. Dann wird es gelöst. Als nächstes drin. Dann haben wir unsere Payload oder unseren Antworttext. Nennen wir es body und console.log body. Nun, diese Zeichenfolge gab uns dieses Array von 10 Elementen. Wenn wir es erweitern, können Sie sehen, dass dies die Daten sind, die wir hier im Browserfenster haben. Cool. Aber jetzt verwalten wir das programmgesteuert mit der Fetch-API. Genau das Gleiche können wir nicht nur hier, sondern in unserem Code tun , denn was wir hier schreiben, wird clientseitiges Browser-JavaScript sein und wir haben hier direkt im Browser damit gespielt hier direkt im Browser aber es spielt immer noch keine Rolle. Dies war nur, um Ihnen einen Überblick zu geben , wie das sein wird. Aber wir werden es hier in unserem Code machen. In onSearch werden wir diese Fetch-API tvmaze.com/search/shows nennen . Anstatt die Syntax der.then zu verwenden, können wir jetzt async-await verwenden, um sie lesbarer zu machen. Um Await verwenden zu können, wenn Sie sehen, dass ich mit dem Mauszeiger darauf fahre, heißt es, Wait-Ausdrücke nur innerhalb von Sync-Funktionen erlaubt sind was bedeutet, dass wir diese Funktion als Sync markieren müssen, und jetzt verschwindet die Nachricht. Wir warten auf Fetch, dann bekommen wir eine Antwort. Dann haben wir body von await response.json. Wenn ich hier eine Antwort eingebe und „Punkt“ drücke, können Sie sehen, dass ich jetzt IntelliSense habe, was mir die JSON-Methode gibt. Wenn ich es anrufe, können Sie sehen, dass das Fenster geöffnet wird, was bedeutet, dass es versprochen ist. Jetzt haben wir eine Leiche. Wenn wir versuchen, den Logtext hier zu löschen und zu unserer Anwendung zurückkehren, wo ist er? Hier. Eigentlich ist es egal. Wenn ich hier etwas eintippe, kann ich hier Daten sehen, die von Home.jsx Zeile 16 stammen, aus unserem Konsolenprotokoll hier, was bedeutet, dass wir die Suche nur programmgesteuert durchgeführt haben. Wir senden eine Anfrage. Wenn wir hier den Netzwerk-Tab öffnen und wenn ich auf „Suchen“ klicke, können Sie sehen, dass wir eine Anfrage an die URL senden , die wir in Fetch angegeben haben, und wenn wir eine Vorschau anzeigen, erhalten wir die Daten. Fantastisch. Lassen Sie uns diese Anfrage nun dynamisch machen, da wir die Suchzeichenfolge hier haben, aber wir senden die ganze Zeit Sprache. Wir haben hier searchString angegeben, damit wir es an den Fetch übergeben können statische Zeichenfolge durch Backticks ersetzen. Anstelle von Jungs können wir hier unseren SearchString interpolieren. Lassen Sie uns nun versuchen, den Konsolenprotokolltext zu erstellen. Nochmals, ich erfrische mich. Ich tippe Mädchen. Ich klicke auf „Suchen“. Wenn ich in den Netzwerk-Tab schaue, kann ich sehen, dass ich Suchsendungen sende, die Mädchen abfragen. Wenn ich etwas anderes tippe, können Sie sehen, dass es etwas anderes sein wird. Wenn ich Kauderwelsch tippe, wird es Kauderwelsch sein. Unsere Anfrage ist dynamisch. Wie cool ist das? Jetzt wissen Sie, wie wir Daten abrufen können. Sie können sehen, dass jetzt alles zu einem einzigen Stück dieser wenigen Linien verbunden ist . Großartig. Wir verwenden die TVMaze API. Du kannst es durchlesen. Es ist ganz einfach mit guten Beispielen, einfach schnell das Kästchen überfliegen. Im nächsten Video werden wir diese Funktion wiederverwendbar machen und versuchen Ergebnisse anzuzeigen, die wir hier von der API erhalten. Diesen Text werden wir versuchen, ihn in unserem JSX-Markup anzuzeigen. Lassen Sie mich die Änderungen, die wir vorgenommen haben, bestätigen. Ich klicke auf das Pluszeichen. Ich werde die App beenden und sagen, lass mich sehen, welche Änderungen ich vorgenommen habe? Nehmen wir an, suchen Sie nach Filmen oder suchen Sie mit einem Klick auf die Schaltfläche nach Sendungen. Nehmen wir an, ein Textfeld oder eine Suche hinzugefügt. Suchen Sie mit einem Klick auf die Schaltfläche nach Sendungen. So etwas. Dann lade es auf GitHub und bis zum nächsten . Wir sehen uns dort. 64. 08 Rendering von Daten von der TV Maze API: Hallo nochmal. In diesem Video werden wir endlich die Ergebnisse zeigen , die wir von der API erhalten. Im letzten Video haben wir erfahren, wie wir Daten anhand dessen, was wir in das Eingabeelement eingeben, abfragen können . Dieses Mal werden wir versuchen, die Daten anzuzeigen, die wir von der TVMaze API erhalten , mit der wir Daten abfragen. Lass uns gehen. Wenn wir zu unserem Code zurückkehren, haben wir die folgende Logik, um Daten abzurufen. Wir werden jedoch dieselbe Logik auch auf anderen Seiten verwenden . Warum erstellen wir nicht einen sehr einfachen Wrapper für diese Funktionen, damit sie einfacher in anderen Dateien wiederverwendet werden können? Was ich intern machen werde, ich werde einen neuen Ordner erstellen , den ich so etwas wie API oder vielleicht Utils nenne oder du kannst ihn nennen, wie du willst. Es geht nur darum, es vom Rest der Logik vom Rest der Datei zu trennen der Logik vom Rest der , und es wird einfacher sein, es zu finden. Hier werde ich eine Datei namens tvmaze.js erstellen, und was werde ich in dieser Datei tun? Ich werde eine wiederverwendbare Funktion erstellen, die wir ApiGet nennen werden. Dieses APIGet erhält nur den Pfadnamen der URL, also genau wie Sie es in der Dokumentation sehen. Wir werden nur dieses URL-Segment an die Funktion übergeben, und die Funktion erledigt den Rest. Anstatt dies zu tun, rufen wir einfach ApiGet auf und geben dann Suchshows und Query-Strings weiter , etwa so. Wir können jedoch noch weiter gehen und dafür einen weiteren Wrapper erstellen. Anstatt diese Funktion so zu verwenden, können wir einfach die Funktion search for shows aufrufen und dann einfach die Suchzeichenfolge übergeben, und das war's und der Rest, die ganze Logik hier, wird intern verwaltet. Ziemlich cool. Lassen Sie uns das umsetzen. Zunächst müssen wir dieses APIGet erstellen , damit wir es so verwenden können. Dieses APIGet wird eine Funktion sein , die als Versprechen zurückgegeben wird, was der Antworttext sein wird, genau wie hier. Irgendwann wird es so aussehen. Lass uns weitermachen und das tun. Wir übergeben den QueryString hier. Das erste Argument, das diese Funktion erhält , wird QueryString sein. Diese Funktion verwendet fetch diese beiden Zeilen. Ich werde sie von hier kopieren. Da wir hier das Schlüsselwort wait verwenden, beabsichtigen wir, async-await zu verwenden, also markiere ich diese Funktion als async und gebe aus dieser Funktion den Hauptteil zurück. Wir bekommen diese URL jedoch hier fest codiert. Wir können es nach draußen verschieben, um es irgendwie oben zu deklarieren, damit wir wissen, was die BASE_URL hier ist. Hier oben erstelle ich einfach eine Variable namens BASE_URL und es wird diese https://api.tvmaze.com ohne Schrägstrich sein . Dann werde ich es einfach in den Abrufaufruf BASE_URL interpretieren . Anstatt Schrägstrich-Suchshows und dann Suchzeichenfolge zu verwenden , wende ich einfach QueryString an, den wir als Argument übergeben, was diese Zeichenfolge mit dem führenden Schrägstrich sein wird. Stattdessen verwende ich einfach QueryString. Irgendwann wird unsere URL so aussehen. Es wird BASE_URL und der QueryString benötigt , den wir aus den Argumenten übergeben. Schließlich wird diese Art von URL gebildet. Jetzt machen wir weiter. Wir waren uns einig, dass wir weiter als ApiGet gekommen sind und zusätzlich zu ApiGet eine weitere Funktion erstellen , die wir searchForShows nennen, damit wir keine Slash-Suchshows mit Schrägstrichen weitergeben. Wenn Sie das verwalten möchten, wird es an einem einzigen Ort verwaltet , in einer einzigen Datei hier in tvmaze.js. Von hier aus werde ich exportieren, weil wir es später in der Home-Funktion namens export const searchForShows verwenden werden. Auch hier erhält diese Funktion nur den QueryString, genau das, was wir in die Eingabe eingeben. Es wird eine Abfrage sein. Nennen wir es einfach Query. Diese Funktion rufen wir ApiGet auf und sie übergibt search, shows, und die Abfrage wird eine Abfrage sein, die wir übergeben. Dies nennen wir ApiGet und was auch immer ApiGet zurückgibt, wird von searchForShows zurückgegeben. Ich verwende hier die kurze Syntax für Pfeilfunktionen. Diese Syntax ohne explizite Verwendung des Funktionstextes mit geschweiften Klammern gibt das zurück, was ApiGet zurückgibt. Dies entspricht dem Schreiben von Return ApiGet. Um es zu verkürzen, verwenden wir es so. Ich speichere es und jetzt kann ich diese searchForShows in meinem home.jsx verwenden . Ich importiere von, wir gehen eins für die höhere Ebene zurück. Wir schnappen uns api/tvmaze und wir schnappen uns SearchForShows. Jetzt können wir all das entfernen und searchForShows mit dem QueryString aufrufen , der unser searchString sein wird. So. Wenn wir die Ergebnisse sehen, nennen wir es ApiData und log ApiData und kehren zur App zurück. Was auch immer wir hier eingeben, schauen wir uns die Registerkarte Netzwerk an. Wir geben Mädchen ein, wir drücken „Enter“. Sie können sehen, dass die Anfrage korrekt gestellt wird, Anforderungs-URL ist korrekt. Es hat alles perfekt funktioniert. Wenn wir in die Konsole schauen, können wir sehen, dass in der home.jsx-Zeile 15, genau dort, wo wir unser Konsolenprotokoll haben, dieses erhalten wir. Das sind unsere API-Daten. Was können wir jetzt tun? Wir können einen anderen Zustand erstellen und alle Daten, die wir hier erhalten, wir können sie innerhalb des Zustands platzieren, denn auch hier handelt es diesen API-Daten, die wir erhalten , um Daten, die sich im Laufe des Lebenszyklus der Komponente ändern die sich im Laufe des Lebenszyklus der Komponente , weil wir nach diesen Daten suchen. Es kann leer sein, es kann nicht geladen werden, etwas könnte damit zusammenbrechen. Ich werde weitermachen und hier werde ich einen neuen Status erstellen , den wir showsResult nennen werden, oder nennen wir ihn einfach apiData und setApiData, und er wird hier state verwendet. Standardmäßig ist es ein leeres Array, oder vielleicht ist es standardmäßig null. Hier, was ich tun werde, diese variable Länge 15, nenne ich sie als Ergebnis oder Antwort. Ja, nennen wir es einfach result und ich rufe setApiData auf, und setApiData wird das Ergebnis sein. Welches Array wir auch hier erhalten, wir platzieren es in unserem APIData-Status. Dann wissen wir schon, was mit den Arrays zu tun ist. Du erinnerst dich daran. Wir können jedes Element JSX Barker zuordnen und es dann anzeigen. Was wir direkt unter dem Formular tun werden. Lass uns hier ein Div erstellen. Was wir tun werden, wir werden hier eine Funktion erstellen. Anstatt die Dotmap-Methode einzubinden oder lassen Sie uns zuerst diese Dotmap-Methode einbetten. Beim Mapping gibt es eine Sache zu beachten . Wir werden ApiData Map aufrufen. Wir haben Daten hier und im Moment werden wir sie einem einfachen Div zuordnen. Schauen wir uns an, welche Art von Daten wir hier haben. Welche Form haben Daten? Wir haben eine Reihe von Objekten. Wenn wir dieses Datenobjekt untersuchen , das dieses von mir hervorgehobene Objekt darstellt, hat es eine Score-Taste und dann die Show-Taste. In der Show haben wir einen Namen, wir haben eine ID-URL. Lassen Sie uns vorerst nur den Namen anzeigen. Wir müssen auf data.show zugreifen. Ich interpoliere data.show.name. Du musst immer daran denken , dass du die Schlüsselrequisite weitergeben musst. Der Schlüssel muss etwas Einzigartiges sein , da wir es mit API-Daten zu tun haben. API-Daten, wenn sie von beckoned stammen, haben normalerweise eine ID, und die ID steht eindeutig für das Element. ID ist das perfekte Gehäuse für die Schlüsselrequisite. Die Daten zeigen eine ID zur eindeutigen Identifizierung des zugeordneten Elements. Lass es uns versuchen. Wir gehen zur App und was haben wir hier? Wir haben bereits den Fehler, der besagt, dass die Eigenschaften von Null beim Lesen der Karte nicht gelesen werden können. Wenn ich die Seite aktualisiere, wird mir immer dieser Fehler angezeigt. Was passiert? Die Sache ist, unser Anfangszustand hier ist Null. Das bedeutet, dass beim Rendern der Komponente die Status-API-Daten Null sein werden. Da wir auf keine Schaltfläche geklickt haben, haben wir keine Ergebnisse erhalten. Der Staat ist Null. Wenn wir versuchen, Null zuzuordnen, erhalten wir diesen Fehler, weil unser Code im Grunde so aussieht, null.map. Nun, das ist falsch. Deshalb sehen wir diesen Fehler. Es heißt, Eigenschaften von Null können nicht gelesen werden, Karte wird gelesen. Was bedeutet, dass es versucht, null.map auszuführen. Wie können wir das überwinden? Wir können es auf verschiedene Arten schaffen. Der einfachste Weg, damit umzugehen, besteht darin, den Anfangszustand von Null in ein leeres Array zu ändern . Lassen Sie mich zurück zu den API-Daten kommen. Wenn wir es in ein leeres Array ändern, wir nichts sehen, wenn wir keine Daten haben , da das Array leer ist , da das Array leer ist. Denn naja, letztlich wird nichts kartografiert werden. Wenn wir zum Beispiel nach Jungs suchen und wenn wir unsere Ergebnisse von der API erhalten, wird jedes API-Element dem entsprechenden Div mit dem Namen der Sendung zugeordnet . Was ich Ihnen jedoch alternativ zeigen möchte, anstatt ein leeres Array als Standardstatus zu verwenden, können wir immer noch Null verwenden, aber wir können unsere Logik etwas anders handhaben. Gehen wir weiter und erstellen wir eine Hilfsfunktion, die wir renderApiData nennen. Anstatt die Methode.map hier direkt einzubinden, die, wie Sie sich erinnern, aufrufen wird , haben wir das bereits getan, renderApiData und wir werden eine Renderlogik bedingt innerhalb dieser Funktion verwalten . Hier erstelle ich RenderApiData. Anstatt dies zu verwenden, werde ich sagen, dass unser Anfangszustand Null ist, denken Sie daran. Wenn wir versuchen, Null anzuzeigen, erhalten wir eine Fehlermeldung, da wir Nullen nicht zuordnen können. Wir können einfach überprüfen, ob API-Daten null sind oder ob unsere API-Daten falsch sind, wir geben Null zurück. Andernfalls wissen wir, dass es definitiv ein Array sein wird , sobald es gesetzt ist. Oder vielleicht können wir die Logik umkehren, damit sie besser lesbar und besser ist. Wir können es erkennen. Wenn wir API-Daten haben und Daten wahr sind, sind sie nicht Null. Es ist zum Beispiel so etwas wie ein Array. In diesem Fall haben wir die Methode.map aufgerufen, um apiData, map, data und dann die Logik, die wir haben, zurückzugeben map, data und dann die Logik, . Andernfalls gilt standardmäßig, dass, wenn diese Bedingung fehlschlägt und unsere API-Daten falsch sind, sie hier, diese Bedingung durchfallen. Dann geben wir standardmäßig nichts zurück. Denken Sie daran, dass Nullergebnisse in Nichts innerhalb des JSX-Markups gerendert werden. Wenn wir zur App zurückkehren, können Sie sehen, dass nichts angezeigt wird. liegt daran, dass unsere API-Daten anfänglich auf Null gesetzt sind. Deshalb rendern wir Null. Aber sobald ich nach der API suche, habe ich meine Daten hier. Fantastisch. Immer wenn ich die Abfrage ändere, wird sie aktualisiert. Schau dir das an, wie sieht es aus? Eine weitere Sache, die ich hier hinzufügen möchte , ist die Datenverarbeitung. Ich weiß, wir haben schon viel besprochen und es ist viel. Aber was ist mit Fehlern? Würde, wenn unsere Anfrage, die wir hier gesendet haben, wenn wir in das Netzwerk schauen, wenn die Anfrage, die wir hier gesendet haben, aus irgendeinem Grund fehlschlägt, wird ein Fehler ausgelöst. Was passiert in diesem Fall? Wir können diesen Fehler tatsächlich bei der Suche nach Shows oder in API-Daten emulieren . Anstatt also nur die API-Suche durchzuführen, können wir einfach einen Fehler auslösen, bis etwas Schlimmes passiert ist. Genau das passiert, wenn diese Anfrage aus irgendeinem Grund fehlschlägt, etwas Schlimmes passiert ist. Lass es uns versuchen und sehen. Wir haben unerreichbaren Code, der wiederum von eslint stammt. Eslint, du hast mir viel gerettet. Im Moment werden wir das nur kommentieren. Ich suche nach irgendwas, so etwas wie Hallo. Wenn ich klicke, passiert nichts. Aber Sie können hier in der Konsole sehen, wir haben einen Versprechungsfehler nicht erwischt , etwas Schlimmes ist passiert. In diesem Fall müssen wir uns immer daran erinnern, wenn wir uns mit asynchronem JavaScript befassen, wenn wir uns mit APIs befassen, müssen wir immer Fehler auffangen und behandeln, egal was passiert, auch wenn Sie sich über diese API sicher sind, wie großartig sie ist und Ihnen jeden Fehler einfallen können. Nun, du musst deine Denkweise ändern. Irgendwann wird etwas zu einem Fehler führen, also müssen Sie sicherstellen, dass Sie damit umgehen. In diesem Fall können wir innerhalb dieser Awart-Suche nach Sendungen das Ganze einschließen und versuchen, den Catch-Block zu finden, um etwaige Fehler abzufangen. Ich werde diese beiden Zeilen innerhalb des Versuchs verschieben. Wenn etwas im try-Block fehlschlägt, wird der Fehler im Catch-Block ausgespuckt. Wir können einen anderen Staat erstellen, und welchen Fehler wir auch immer hier erhalten, wir können ihn innerhalb des Staates platzieren. Hier oben erstelle ich den ApiDataError und den Status SetApiDataError. In der Standardeinstellung ist es ebenfalls Null. Ich werde weitermachen und innerhalb des Catch-Blocks einfach setApiDataError für jeden Fehler aufrufen , den wir hier haben. Wenn wir nun versuchen, den Protokollfehler zu stornieren , ist der Status standardmäßig Null. Aber wann immer wir einen Fehler haben, können wir sehen, dass wir das andere Objekt in unserem Staat haben. Wir können es in renderApiData verwenden und im Falle eines Fehlers jede Fehlermeldung anzeigen. Wir können feststellen, ob wir ApiDataError haben. In diesem Fall zeigen Sie bitte div an, was besagt, dass ein Fehler aufgetreten ist, und wir können ApiDataError.Message interpolieren , da unser ApiDataError das Fehlerobjekt sein wird. Lass es uns versuchen. Wenn Sie sich erinnern , dass im API Gateway etwas Schlimmes passiert ist. Wir sagen, es spielt keine Rolle. Wir klicken auf Suchen und sehen jetzt, dass ein Fehler aufgetreten ist, etwas Schlimmes ist passiert. Cool. Wir müssen uns jedoch auch daran erinnern, dass wir diesen Status aktualisieren müssen , falls wir einmal auf Suchen klicken dieser Fehler aufgetreten ist. Dann klicken wir das nächste Mal auf Suchen und dann wird die nächste Anfrage bearbeitet. Unsere API-Daten in unserem Bundesstaat hängen jedoch. Es hat immer noch seinen vorherigen Status, daher wird es angezeigt. Wir müssen sicherstellen, dass wir es vor jeder Anfrage, die wir senden, bereinigen . Wir rufen setApiDataError auf, um den Anfangszustand zu erfahren. So verwalten wir den gesamten Ablauf unserer Anfrage. Jetzt können wir einen neuen Fehler entfernen und die Logik gemeinsam verwenden. Lassen Sie uns alles noch einmal in Aktion sehen. Ich suche Mädchen, ich habe Mädchen, ich habe Jungen und ich habe alles, was ich hier tippe. Alles funktioniert wie erwartet. Falls die API einen Fehler auslöst, wird dieser hier behandelt. Wie können wir das testen? Wir können tatsächlich einfach etwas Kauderwelsch in Euro eingeben und sehen, was uns die API bietet. Ich habe Mädchen getippt. Ich klicke auf Suchen. Sie können auf der Registerkarte Netzwerk sehen, dass es jetzt rot ist. Es heißt 404, was bedeutet, dass wir etwas falsch gemacht haben. Dieser Endpunkt existiert offensichtlich nicht. Unsere API zur VMA-API hat einen Fehler zurückgegeben. In unserem Fall wurde ein Fehler zurückgegeben. Es wurde gerade eine 404-Statusmeldung zurückgegeben. Fetch verstand, dass es sich um einen Fehler handelte, aber es gab keine Fehlermeldung. Es heißt, dass der Abruf standardmäßig fehlgeschlagen ist. Wenn wir jetzt versuchen, es wieder zu ändern. Wenn wir nach Jungs suchen. Jetzt wurde alles angezeigt. Wie cool ist das? Ich finde es sieht toll aus. Wir haben alle möglichen Situationen behandelt, die schief gehen könnten. Jetzt haben wir eine ziemlich robuste Logik, nicht nur um Daten zu erstellen, sondern auch um Fehler zu behandeln, und wir zeigen die Daten an, die von der API stammen, so etwas. Ich denke, wir haben hier tatsächlich viel besprochen. Wir haben über verschiedene Staaten gesprochen, wir haben über das Abrufen von Daten gesprochen, wir haben über das Erkennen von Fehlern gesprochen, wir haben über die Anzeige von Daten gesprochen. Das ist eine Menge. Lass es uns zusammenfassen. Git hinzufügen, git commit. Nennen wir es: Daten von der TVMAZE-API abrufen und anzeigen . Erstellen Sie eine wiederverwendbare Funktion zum Abrufen von Daten. Zur wiederverwendbaren Funktion beziehe ich mich auf die Suche nach Sendungen. Fantastisch. Lassen Sie uns verpflichten und daran setzen, alles zu meistern. Wir sehen uns im nächsten. 65. 09 Fix Prettier funktioniert nicht: Hallöchen. Dieses Video wird schnell gehen, da mir gerade ein kleines Problem bei der Projekteinrichtung aufgefallen ist. Das Problem ist diese schöne Datei. Also habe ich den Dateinamen falsch geschrieben und aus diesem Grund hat der Konflikt, den wir hier angegeben haben, nicht funktioniert. Sie haben jedoch vielleicht bemerkt, als ich Dateien gespeichert habe, sie nicht mehr formativ waren. Dies liegt daran, dass wir die Prettier-Erweiterung installiert haben . Wenn diese Erweiterung die in Ihrem Projekt platzierte Konfiguration nicht finden kann, wird standardmäßig Wenn diese Erweiterung die in Ihrem Projekt platzierte Konfiguration nicht finden kann, wird standardmäßig die in Ihrem Projekt platzierte Konfiguration nicht finden kann, auf die Konfiguration zurückgegriffen, die irgendwo intern in dieser Erweiterung definiert ist. Deshalb hat es immer noch funktioniert. Sie nutzte diesen Konflikt jedoch nicht aus. Um das zu beheben, lassen Sie mich diese Datei in prettierrc umbenennen. Jetzt kann es also tatsächlich abgeholt werden. Wenn ich, sagen wir, zur App-Komponente gehe und sie speichere, sehen Sie jetzt, dass ich tatsächlich einfache Anführungszeichen habe, wie sie in hübscheren Konflikten definiert sind . Um das kleine Problem zu beheben, muss ich jedoch jede Datei in der Quelle durchgehen. Es könnte mühsam sein und wir haben nicht viele Dateien, also können wir es manuell machen, aber hier ist ein Tipp. Wir können eine hübschere Common-Line-Schnittstelle verwenden und ein kleines Skript schreiben , das den internen Quellcode einer alten Datei bildet . Wenn ich zu Prettier Documentation gehe, klicke ich auf Docs und im Abschnitt Usage kann im Abschnitt Usage nach CLI suchen . Den Ausschnitt finde ich hier. In der Praxis könnte das ungefähr so aussehen. Ich kann das einfach kopieren. Gehe zum Paket JSON, definiere hier ein neues Skript, das ich Format nennen werde, wo ich einen hübscheren Dash Dash Write Dot schreiben werde. Dot formatiert alle Dateien im aktuellen Verzeichnis, aber das möchte ich nicht tun. Deshalb ändere ich es auf source dot blast streaks, asterix, dot, dann curly brackets, JS, JSX. Keine Panik, das ist ein sogenanntes Glob-Pattern oder eine Glob-Syntax. Es wird verwendet, um Dateien abzugleichen, und Prettier kann dieses Muster oder diese Syntax als Argument akzeptieren. Es sucht also nach allen Dateien im Quellcode und in alten Unterordnern und sucht nur nach Dateien mit der Erweiterung Dot JS und Punkt JS6. Ich werde es speichern. Ich werde das NPM-Run-Format machen. Mal sehen, was wir haben. Jetzt können wir die Ausgabe sehen. sind also alle Dateien, die mit dem Format Script by Feature formatiert wurden . Das hübschere hier, auf das ich mich beziehe, wird von den Node-Modulen übernommen da wir es als Dev-Abhängigkeit installiert haben. Also schreiben wir Prettier hier in NPM-Skripten und es wird das installierte Prettier von Node-Modulen aufgelöst , so einfach ist das. Jetzt, wo wir alles repariert haben, lassen Sie uns alles festhalten und sagen, hübschere Konfigurationsfehler behoben, das Formatskript zum Paket JSON hinzufügen. Fantastisch. Wir sehen uns im nächsten. 66. 10 Radio: Hallöchen. In diesem Video werden wir mit der Entwicklung der Homepage fortfahren, und dieses Mal fügen wir Radiobuttons in unser Formular ein, mit denen wir nach den Ergebnissen suchen, und wir werden wählen können , ob wir nach Serien oder nach Schauspielern suchen möchten. Lass uns gehen. Ich gehe zurück zur Home-Komponente, innerhalb der Home-Komponente, direkt unter der Texteingabe Ich erstelle hier eine weitere Eingabe, da es sich um ein Optionsfeld handelt. Ich platziere es innerhalb des Label-Elements, sodass es sich um Ich platziere es innerhalb des Label-Elements, eine Typeingabe handelt. Radio-Label wird shows sein, Name wird searchOption sein, der Wert dieses Optionsfeldes wird shows sein. Dann erstelle ich einen weiteren Eingang, weiteren Radiobutton, diesmal für Schauspieler. Schauspieler, Typ Radio, Name bleibt gleich, da diese beiden Radiobuttons den gleichen Status haben, Wert wird Schauspieler sein. Ich gehe zurück zu meinem Markup und sehe , dass die Kontrollkästchen da sind, Entschuldigung, Optionsfelder. Damit wir den Wert, die Auswahl unserer Checkboxen, irgendwie in die API-Anfrage aufnehmen können, benötigen wir nun Auswahl unserer Checkboxen, irgendwie in die API-Anfrage aufnehmen können, einen anderen Status für diese Radiobuttons. Oben erstelle ich einen weiteren Status , den ich searchOption nenne, etwa so, setze searchOption standardmäßig, es wird angezeigt. Unser SearchOption-Status kann entweder Serien oder Schauspieler sein, entweder zeigt Zeichenfolge oder Schauspielerstring. Auf dieser Grundlage senden wir eine entsprechende Anfrage an die TVMaze API. Jetzt müssen wir den Status, den wir gerade erstellt haben , mit den Optionsfeldern verknüpfen , die wir zuvor geschrieben haben. Es ist so ziemlich dasselbe wie bei der Eingabe vom Typ Text, wir werden eine bidirektionale Datenbindung durchführen, wir haben bereits einen Wert, jetzt müssen wir auf das Änderungsereignis für diese Eingaben warten. Die Logik ist genau dieselbe, ich werde hier den on Change Event Handler vorstellen , den ich bei Radio Change nennen werde, und es wird für beide Elemente hier oben rechts daneben gleich sein . onSearchInputChange, ich werde über Radio Change schreiben, es empfängt auch das Ereignisobjekt, und jetzt kann ich, um den SearchOption-Status festzulegen, um den SearchOption-Status festzulegen, auf das Wertattribut verweisen, das wir an jedes entsprechende Optionsfeld übergeben haben . Optionsfelder werden durch Werte dargestellt sodass wir tatsächlich auf event.target zugreifen können, wodurch das Eingabe-HTML-Element angezeigt wird. Sie haben ein Wertattribut und es gibt uns den entsprechenden Wert, den wir jedem der Funkgeräte zugeordnet haben . setSearchOption wird event.target.value sein, im Grunde dasselbe wie bei onSearchInputChange. Nun, das ist eine unidirektionale Datenbindung, wie Sie sich erinnern, aber achten Sie auf Änderungen innerhalb des Radios, aber wir haben den SearchInput-Status nicht wieder mit dem Eingabeelement verknüpft, also haben wir hier bereits ein Wertattribut, aber der Radiobutton-Status wird nicht durch das Wertattribut dargestellt, sondern durch das check-Attribut, und unser Radiobutton shows aktiviert, wenn unsere searchOption gleich ist, damit wir es einfach so schreiben können. Die Suche nach Shows entspricht Shows. Dieser Ausdruck ist wahr, wenn die Suche nach Sendungen als Zeichenfolge erfolgt. Genau die gleiche Logik, die wir für den Input der Schauspieler anwenden werden. Es wird nur überprüft, wenn Suche nach Serien den Schauspielern entspricht. Großartig. Schauen wir uns das jetzt an. Lassen Sie uns SearchOption in der Konsole protokollieren, und entschuldigen Sie mich, es heißt immer noch, dass ich hier nach Sendungen gesucht habe. Entschuldigung, ich wollte searchOption verwenden Wenn state gleich shows ist, wird diese Eingabe überprüft. Das Gleiche gilt für Schauspieler. Großartig. Versuchen wir nun, SearchOption auf der Konsole zu protokollieren um sicherzustellen, dass wir alles richtig gemacht haben. Standardmäßig wird angezeigt, dass dies der Anfangszustand ist. Wenn ich Schauspieler auswähle, es Schauspieler, wenn ich wieder Serien auswähle, es immer noch Serien, was bedeutet, dass alles einwandfrei funktioniert. Jetzt müssen wir diesen searchOption-Status irgendwie in unsere Anfrage einfügen und die entsprechende Logik irgendwo im On-Search-Handler platzieren die entsprechende Logik irgendwo im On-Search-Handler . Moment werden wir es sehr einfach ausdrücken, aber im nächsten Video wir diese Komponente leicht umgestalten werden wir diese Komponente leicht umgestalten und sie viel, viel besser aussehen lassen. Aber was wird überhaupt die Logik sein? Wenn wir zur TVMaze API-Dokumentation zurückkehren, haben wir diesen Endpunkt hier verwendet, um nach den Sendungen zu suchen. Wenn wir in das Inhaltsverzeichnis schauen, gibt es hier einen weiteren Link , der uns zum Bereich für die Personensuche führt, und es ist fast dasselbe wie bei Shows. Sie können sehen, das Template ist im Grunde fast dasselbe, aber dieses Mal suchen wir nach Leuten statt nach Shows, also wie wir das in unserem Code erreichen können. Wenn wir zu TVmaze.js zurückkehren, haben wir hier bereits diese wiederverwendbare Funktion namens search for shows. Wir können diese Funktion kopieren und sie in searchForPeople umbenennen Anstatt /search/shows an API get zu übergeben, übergeben wir /search/people, und alle Argumente bleiben gleich, da wir hier auch eine Abfragezeichenfolge haben. Fantastisch. Wir gehen zurück zu homejsx, diesmal importieren wir SearchForPeople. Die Logik im Suchhandler wird sehr einfach sein. Wenn searchOption equals shows ist, führen Sie bitte diese Logik aus , die wir bereits haben, andernfalls führen Sie bitte dieselbe Logik aus, rufen Sie aber searchForPeople auf. Sie können sehen, dass wir hier eine kleine Wiederholung haben, aber das werden wir im nächsten Video anpassen. Denken Sie vorerst nicht zu viel darüber nach. Mal sehen, wie es aussieht. Wir kehren zu unserer App zurück, zeigt standardmäßig ausgewählte Sendungen, wir suchen nach etwas und Sie können sehen, dass alles wie erwartet funktioniert. Wenn wir Schauspieler auswählen und dann auf „Suchen“ klicken, haben wir einen leeren Bildschirm. Was ist passiert? Wenn wir in den Netzwerk-Tab schauen, können wir immer noch sehen, dass die Anfrage mit dem richtigen Endpunkt /search/people durchgegangen ist, aber wenn wir in die Konsole schauen, haben wir diesen Header, der besagt, dass die Eigenschaften eines undefinierten Lesenamens nicht gelesen werden können . Was ist passiert? Wenn wir uns den Antworttext ansehen , den wir von der API erhalten haben, ist dies das Objekt, das wir haben, aber innerhalb des Codes schreiben wir tatsächlich, wenn wir einen API-Datenstatus haben, werden wir data.show.id oder data.show.name rendern , aber in unserem Actors-Ergebnis haben wir das nicht. Wir haben nicht data.show, wir haben data.person. Wir greifen im Grunde auf die falschen Daten zu. Konsole hier, erzählt uns davon. Eigenschaften eines undefinierten Lesenamens können nicht gelesen werden, da data.show in diesem Antwortobjekt undefiniert ist . Dann versuchen wir, auf undefined.name zuzugreifen, und das sehen wir, können die Eigenschaften eines undefinierten Lesenamens nicht lesen. Das ist unser Problem. Die Lösung dafür wird darin bestehen, dass wir irgendwo hier schreiben müssen, wenn wir nach Schauspielern suchen oder wenn wir, sagen wir, Schauspielerergebnisse haben , Schauspieler anzeigen, aber wenn wir Ergebnisse von Sendungen haben, zeigen Sie bitte Serien an, und wir können nicht dieselbe Logik wie hier anwenden. Wir können uns nicht auf unseren Staat verlassen, wir müssen uns auf die Datenform verlassen, die wir haben. Hier in der Logik können wir einfach tun, ob, wo ist es? Wir haben ein Array, wir werden fragen, ob das erste Element der API-Daten die Eigenschaft show hat In diesem Fall können wir feststellen, dass wir mit den Shows arbeiten, wir haben Show-Daten von der API. Andernfalls, wenn wir keine Shows haben unser erstes Element in diesem Array nicht die Eigenschaft show hat, können wir erkennen, dass wir mit den Leuten hier arbeiten, mit diesem Personenobjekt. Wir werden etwas anderes sagen, bitte starte ApiData.map und Daten werden diesmal nicht angezeigt, sondern data.person. Datenperson, mal sehen, ID auch und Datenperson, sagen wir Name, so ziemlich das Gleiche wie bei Sendungen. Lass es uns jetzt versuchen. Es sieht ein bisschen chaotisch aus , keine Sorge, wir werden das alles etwas später beheben . Mal sehen, ob alles funktioniert. Ich suche nach Serien, ich erhalte Ergebnisse von der API, sie werden gerendert, perfekt. Ich wechsle zu Schauspielern und suche nach etwas wie Andrew und du kannst jetzt sehen, dass wir keinen Adder haben, die Konsole ist klar, Konsole ist klar, wir erhalten eine Antwort im Netzwerk-Tab und wir haben Daten gerendert, sodass wir sehen können, dass es funktioniert hat. Fantastisch, nicht wahr? Großartig. Ich kann sagen, dass wir das erreicht haben, was wir vorerst wollten Lassen Sie uns unsere Änderungen übernehmen und im nächsten Video werden wir diese Komponente leicht umgestalten und die Logik, die wir mit dem Formularelement haben , hier in einer separaten Komponente zusammenfassen. Aber lassen Sie uns vorerst einfach alles festlegen und dieses Commit so benennen, lassen Sie mich sehen, Suche nach Schauspielern hinzugefügt. Großartig. Lass uns zu GitHub wechseln und wir sehen uns im nächsten. 67. 11 Verschieben von search zu seiner eigenen Komponente: Hallo nochmal. In diesem Video werden wir weiter mit unserer Logik arbeiten, die wir im vorherigen Video vorgestellt haben. Wir haben eine Option hinzugefügt, um entweder Shows oder Schauspieler auszuwählen , und dann senden wir basierend auf dieser Auswahl eine entsprechende Anfrage an die TV Maze API. Sie können sehen, dass, nachdem wir diese Logik hinzugefügt hatten, unsere Home-Komponente mit vielen verschiedenen Logiken etwas aufgebläht wurde . Wir können es tatsächlich vereinfachen und genau das werden wir jetzt tun. Warum verschieben wir nicht die ganze Logik, die sich auf das Formularelement bezieht, all diese Zustände, warum verschieben wir sie nicht eine separate Komponente und platzieren die Logik dort, und dann werden wir durch Sonden nur das verfügbar machen, was wir brauchen. Lass uns versuchen, das zu tun. Im Komponentenordner erstelle ich eine neue Komponente, etwa searchformjsx. Von hier aus exportiere ich die Suchformularkomponente. Aber jetzt wird es nur noch ein leeres Div mit etwas Exportstandardsuchformular sein. Lassen Sie uns nun eine wichtige Komponente ausprobieren und sehen, wie diese Komponente ungefähr verhalten soll , damit wir die Logik entsprechend schreiben können. Ich werde das Suchformular aus dem Komponenten-Suchformular importieren . Anstatt all dem, was ein Suchformular schreiben wird. Was brauchen wir? Wir möchten die Suche irgendwo hier in dieser Komponente durchführen , da dies die Komponente ist in der wir tatsächlich Daten rendern. Wenn wir alles innerhalb des Suchformulars verwalten wollten, könnten wir von außen nicht auf diese Logik zugreifen. Wir werden die Zustandslogik mit Eingaben innerhalb der Komponente verwalten Eingaben innerhalb der Komponente aber die Suche wird hier tatsächlich stattfinden. Die Suchlogik wird in Home-JSX geschrieben. Wir müssen irgendwie einen Weg finden, eine Sonde freizulassen, die es uns ermöglicht , hier in JSX zu Hause nach Sendungen zu suchen. Wir können diese Suchfunktion einfach an das Suchformular und das Insight-Suchformular weitergeben Suchfunktion einfach an das Suchformular und das Insight-Suchformular , wenn wir auf Senden klicken, wodurch die Funktion aufgerufen wird, die hier zu Hause definiert ist. Wir werden es so etwas wie on search nennen und wir werden unsere Concert-Funktion weitergeben , die wir bereits haben, aber wir werden die Logik leicht modifizieren. Anstatt das alles zu schreiben, werden wir nur eine einzige Zeile haben. Lassen Sie uns nun das Markup mit dem Formularelement, das wir haben, kopieren mit dem Formularelement, das wir haben, und es wie folgt in ein Suchformular einfügen. Jetzt müssen wir die Logik, die wir in Heim-JSX haben, in ihren Zustand versetzen, z. B. bei Änderung der Sucheingabe und beim Funkwechsel. Wir werden das alles in das Suchformular verschieben. Hier auch diese Zustände, Suchoption und Suchzeichenfolge. Lassen Sie uns diese beiden kopieren. Stellen wir sie hier oben drauf. Wir müssen den Use State jetzt importieren. Ich werde das auch kopieren. Das einzige, was wir von hier aus verpasst haben , ist der On-Search-Handler. Lassen Sie uns weitermachen und es hier definieren. Anstatt das bei der Suche aufzurufen, werden wir es beim Absenden aufrufen Der Grund dafür ist der folgende. Wir können das an den Suchhandler hier direkt als Probe übergeben und dann direkt als Submit-Handler angeben aber wir werden das Event-Objekt verfügbar machen, was bedeutet, dass wir die Logik schreiben müssen , um das Submit-Ereignis zu verhindern. Die externe Komponente, die Home.jsx ist, muss davon jedoch nicht wirklich wissen. Warum muss ich wirklich eine gewisse Standardlogik, ein gewisses Standardverhalten verhindern? Wir können einen Teil dieser Logik von der Suche direkt in die Suchformularkomponente verschieben . Hier erstelle ich eine Submit-Funktion und übergebe sie als Submit-Attribut. Auch hier haben wir das Event-Objekt in dieser Funktion. Wir verhindern die standardmäßige Absendeaktion, indem wir event prevent default aufrufen , und direkt danach müssen wir diese Logik ausführen. Aber diese Logik wird hier definiert. Wir können die Such-Requisite erwarten, die eine Funktion sein wird, und wir werden sie einfach hier aufrufen, einfach so. Lass es uns versuchen. Anstatt event prevent default zu schreiben, brauchen wir es hier nicht, da es bereits in der Suchformularkomponente erledigt ist. Ich werde es entfernen. Im Moment rufen wir die eigene Suche ohne Argumente auf, was bedeutet, dass ich hier nichts erhalte. Nur eine Funktion ohne Argumente. Wir haben jedoch den Zugriff auf die Suchoption verloren und wir haben den Zugriff auf die Suchzeichenfolge verloren. Um das zu beheben, können wir jedes Mal, wenn wir die Suchfunktion aufrufen , die wir in Home definiert haben, Argumente hier übergeben, weil wir ihn hier im Suchformular haben. Warum rufen wir nicht die Suchzeichenfolge und die Suchoption im Internet auf ? Aber um es benutzerfreundlicher zu machen, wir die API, die Suchformularkomponente bereitstellen, um sie hier benutzerfreundlich zu gestalten können wir die API, die wir über die Suchformularkomponente bereitstellen, um sie hier benutzerfreundlich zu gestalten, ein Objekt sein, so etwas wie Optionen. Abfrage, sei es nur Q die Suchzeichenfolge und die Suchoption, lassen wir es so wie es ist. Irgendwann werden wir ein Objekt namens Optionen mit der Eigenschaft Q und der Suchoptionseigenschaft haben. Wir werden dieses Objekt an die Suchfunktion übergeben . Hier erhalten wir das Optionsobjekt und können hier direkt die Destrukturierung durchführen. Wir werden Q Property und Search Option Property umstrukturieren . Wir schnappen uns Q, wir schnappen uns die Suchoption anstelle der Suchzeichenfolge. Jetzt werden wir Q verwenden. Lass es uns versuchen und sehen. Wenn ich die Seite aktualisiere, passiert nichts , weil ich den Entwicklungsserver nicht ausgeführt habe. Lassen Sie mich das sehr schnell machen. Warten wir eine Sekunde. Es ist hier. Lass mich auffrischen. Lass uns sehen. Unsere Funktionalität sollte nicht wirklich geändert werden , da wir hier nur einen kleineren Faktor berücksichtigen. Wir erwarten, dass sich alles genauso verhält wie zuvor. Mädchen, wir haben Mädchen, funktioniert perfekt, Schauspieler. Sagen wir, Garry, wir haben Garry. Sie können sehen, dass die Funktionalität gleich bleibt, aber jetzt wurde unsere Logik in einer Heim-JSX drastisch vereinfacht. Wir haben hier im Grunde fast nichts außer der Logik, die sich auf die Suche selbst bezieht. Die Logik, die sich um die Form aller Eingaben kümmert , wurde in das Suchformular eingekapselt. Jetzt haben wir die Bedenken getrennt. Macht Sinn. Ich glaube, das tut es. Das war's für heute. Warte, das ist es eigentlich nicht. Dagegen müssen wir noch etwas tun, weil Sie sehen, wir haben hier immer noch die kleine Wiederholung. Wir können es tatsächlich so belassen und denken nicht wirklich viel darüber nach. ist nichts auszusetzen, aber wir können es einfacher machen. Wir können sagen, zuerst eine Variable namens result erstellen. So werden wir dann die festgelegten API-Daten hierher verschieben und einfach so etwas tun. Oder vielleicht können wir es sogar einfacher machen indem wir die Logik mit ternären Operatoren verknüpfen, Suchoption wird angezeigt, bitte warten Sie auf die Suche nach Sendungen, andernfalls warten Sie auf Leute. Aber ich denke, diese Aussage wird reichen. Fantastisch. Nun, das ist alles. Lassen Sie uns alles verpflichten , was wir gerade gemacht haben. Wie können wir das benennen? können wir ganz einfach benennen. Wir nennen es einfach faktorierte oder sagen wir oszillierte Suchformularlogik und Suchformularkomponente. Perfekt. Wir sehen uns im nächsten. 68. 12 Karten für Shows und Schauspieler anzeigen: Hallo. In diesem Video werden wir die Entwicklung fortsetzen und mit der Anzeige von Daten aus der TV Maze API fortfahren . Derzeit ist unsere Logik zur Anzeige von Daten sehr einfach. Wir ordnen einfach den API-Datenstatus und zeigen dann entweder das Akronym oder den Anzeigenamen an. Lass es uns dieses Mal Wirklichkeit werden lassen. Anstatt das zu schreiben, können wir diese ganze Logik wiederum in einer separaten Komponente oszillieren, speziell für Schauspieler, und in anderen Komponenten, speziell für Serien. Lass uns das machen. Im Komponenten-Ordner werde ich hier zwei weitere Ordner erstellen, einen für Schauspieler und einen weiteren für Shows. In diesen Ordnern werden wir bestimmte Komponenten platzieren, die sich nur auf Serien oder Schauspieler beziehen. Im Ordner shows erstelle ich eine neue Komponente, die ich ShowGridJsX nennen werde. Dies wird jetzt als einfaches, div-exportiertes Standard-ShowGrid sein , und als zukünftige Referenz werde ich diese Logik kopieren und sie werde ich diese Logik kopieren und sie auch in ActorsGrid einfügen. Aber dieses Mal werde ich es in ActorsGrid umbenennen. Gehen wir jetzt zurück nach Hause. Anstatt dies zu tun, können wir jetzt, anstatt Elemente hier direkt zuzuordnen, anstatt Elemente hier direkt zuzuordnen, entweder ShowGrid oder ActorGrid anzeigen. Wenn wir Shows haben, zeigen wir ShowGrid an. Sie können den Intellisense erneut sehen. In der Drop-down-Liste drücke ich die Tabulatortaste und habe überprüft, ob er korrekt importiert wurde. Nun, das war es, also kann ich weitermachen. Das Gleiche werde ich für Schauspieler tun, anstatt hier Elemente abzubilden, werde ich ActorsGrid anzeigen. Das Intellisense, Bum, importiert. Ich habe die Eingabe überprüft. Sieht toll aus. Es ist jetzt viel einfacher, nicht wahr? Damit wir Daten innerhalb dieser Komponenten anzeigen können, müssen wir Daten weitergeben, damit sie sie irgendwie von innen aus manipulieren können. Für ShowGrid werden wir die Ausstellungsrequisiten weitergeben, und es werden API-Daten sein. Für Actors Grid werden es wiederum Akteure sein , API-Daten. Im Moment sind wir mit der Home-Komponente fertig. Die gesamte Logik wird in der entsprechenden Grid-Komponente platziert . Fangen wir zuerst mit den Shows an. Wir gehen zu ShowGrid, hier erhalten wir die Requisite der Show , die wir hier von homejsx weitergeben. Großartig. Jetzt werden wir in Show Grid die Daten zuordnen. Wir werden showsgrid.map schreiben. Hier haben wir unser Datenobjekt. Lassen Sie uns zunächst kurz daran erinnern, was haben wir? Wir haben die Daten show.name, wenn ich mich nicht irre, und für den Schlüssel gebe ich Daten weiter, zeige die ID. Lassen Sie uns das einfach schnell überprüfen. Kommen wir zurück zur App. Ich tippe etwas und erhalte eine Fehlermeldung, die besagt, dass Eigenschaften von undefined nicht behandelt werden können. Ich glaube, ich verstehe es jetzt. Das Problem ist, dass wir den Fall behandelt haben, in dem Stufe gleich Null ist. Aber wir haben den Fall , in dem die Stufe ein leeres Array ist, nicht wirklich behandelt . Weil du gesehen hast, habe ich jetzt Kauderwelsch eingegeben, aber wenn ich etwas Sinnvolles eingebe und wir tatsächlich Ergebnisse von der API haben, haben wir ein Array. Aber wenn ich etwas Kauderwelsch eingebe, wird es ein leeres Array sein. Wenn wir in den Netzwerk-Tab schauen, können Sie anhand der API in Ihrer Vorschau sehen, dass wir ein leeres Array haben und das hier nicht behandeln. Aber in der Logik, die wir schreiben, überprüfen Sie bitte das erste Element innerhalb des Arrays. Aber da das erste Element nicht existiert, ist es undefiniert, wir haben im Grunde undefined.show . Das müssen wir in Ordnung bringen. Wir müssen den Fall berücksichtigen, wenn wir ein leeres Array haben. Hier fügen wir eine weitere If-Bedingung hinzu, wenn apiData.length gleich Null ist. Sie können hier sehen, was ich gemacht habe, ich habe dieses Fragezeichen hier hinzugefügt. Dies wird als optionale Verkettung bezeichnet , denn wenn die API-Daten Null sind und ich null.length eingebe, erhalte ich eine Fehlermeldung. Um diesen Fehler zu verhindern und sicherzustellen, dass die JavaScript-Zugriffslänge nur dann erfolgt, wenn die API-Daten wahr sind, können wir dieses Fragezeichen hier hinzufügen. Wenn API-Daten falsch sind, sind sie Null, es wird kein Fehler ausgegeben, der besagt, dass die Eigenschaftslänge von Null nicht gelesen werden kann. Aber wenn es wahr ist, wird es weitermachen und es wird die Eigenschaft length verwenden. Wenn apiData.length gleich Null unser Array leer ist, werden wir keine Ergebnisse anzeigen. Versuchen wir zu sehen, dass wir, wenn ich Kauderwelsch eingebe, ein leeres Array von der API erhalten und diesmal keine Ergebnistexte haben. mich sieht es gut aus. Lassen Sie uns etwas eingeben , das Sinn macht. Wir haben Mädchen, die Logik, die die ältesten Sendungen zeigt, ist in ShowGrid geschrieben. Sieht vollkommen in Ordnung aus. Lassen Sie uns nun fortfahren und die Kartenkomponente für die Show erstellen . Die Kartenkomponente wird unsere Style-Showcard sein, bei der wir alle Daten über die Show sehen , anstatt sie nur in einem einfachen Div anzuzeigen. Im Ordner shows erstelle ich ShowCardJSX. Das wird eine Visitenkarte sein. Auch hier einfach div, und standardmäßig exportieren wir ShowCard. Jetzt werden wir diese Showcard hier in ShowGrid verwenden . Anstatt jedes Element, jedes Show-Objekt, diesem einfachen Div zuzuordnen , werden wir jedes Element der Showcard-Komponente zuordnen. Stattdessen werde ich jedes Element ShowCard zuordnen. Nochmals, Alto-Eingabe, und ich muss Requisiten an die ShowCard-Komponente übergeben. Es ist jedoch alles rot, weil ich wieder die Schlüsselstütze weitergeben muss. Es spielt keine Rolle, ob das Element Ihre eigene benutzerdefinierte Komponente oder nur ein HTML-Element ist, Sie müssen immer den Schlüssel übergeben. Der Schlüssel wird die Datenshow-ID sein. Welche Daten wollen wir nun in ShowCard anzeigen? Fangen wir mit etwas Einfachem an. Also zuerst erhalten wir eine Namensrequisite und wahrscheinlich werden wir ein Bild erhalten oder lassen Sie uns zuerst mit dem Namen beginnen. Innerhalb des Div werden wir das innerhalb des h1-Tags anzeigen . Wir werden den Namen interpolieren. Jetzt müssen wir die Namensrequisite hier weitergeben. Wenn ich die Komponente show card zuordne, übergebe ich name, equals data, show.name, etwa so. Lass es uns versuchen und sehen. In der Tat können Sie jetzt sehen, dass alles groß und fett ist. Das ist unser H1-Tag. Dann geben wir das Bild weiter, wenn wir unsere API-Daten überprüfen. Lass es uns versuchen und sehen. Wir haben ein Showbild. Ein Bild ist ein Objekt mit mittleren und originalen Schlüsseln. Versuchen wir zu sehen, ob sich diese Daten irgendwie ändern. Bild, wir haben immer noch welche, aber ich kann Ihnen sagen, dass das Bild hier möglicherweise Null ist, da nicht alle Sendungen, die wir von dieser API erhalten, Bilder enthalten. Sie haben möglicherweise keine Daten. In diesem Fall ist das Bild Null. Wie können wir etwas anzeigen? Für diese Situationen schlage ich vor, zu tun. Falls wir kein Bild von der API erhalten, würden wir dem Benutzer das Platzhalterbild zeigen, so etwas wie Bild nicht gefunden. Dafür können wir zu dem Gast zurückkehren , den Sie mit Ihnen geteilt haben. Hier finden Sie den Platzhalter für Shows, Schauspieler ohne Titelbild. Sie können auf dieses Bild klicken, dann mit der rechten Maustaste darauf klicken, das Bild speichern unter und lassen Sie es uns in unser Projekt einfügen. Ich lege es in öffentlichen Ordner und nenne es als nicht gefunden image.png. Großartig. Wenn ich in die Öffentlichkeit schaue, ist es jetzt hier erschienen und wir können tatsächlich auf dieses PNG-Bild in unserem Quellcode verweisen . Schauen wir uns einfach schnell an, wie es aussieht. Bildquelle wird kein gebundenes Bild sein , da sich unsere Datei öffentlich befindet und über die App-Route bereitgestellt wird. Wir speichern es, wir kehren zur App zurück und wann immer wir nach Sendungen suchen, haben wir das, perfekt. Das ist das Bild, das wir haben. In Show Grid übergeben wir jetzt image prop, aber wir geben an, ob data.show.image in diesem Fall wahr ist, nimm dieses image.medium, data.show.medium, andernfalls zeige bitte nicht gefunden. Wie haben wir es benannt? image.png nicht gefunden. Großartig. Jetzt können wir uns in der Showcard die Bild-Requisite schnappen und sie irgendwo hier oben ausstellen. Wir werden das Bild in ein Div packen. Dann wird die Quelle das Bild sein, das wir weitergeben, und das wird der Name der Show sein. Lass uns schnell sehen , was wir haben. Wir haben hier etwas falsch gemacht. Mal sehen, wir haben keine Quelle. Warum ist das so? Es muss data.show.image.medium sein. Jetzt siehst du, hat ziemlich gut funktioniert. Lassen Sie uns versuchen, nach Schauspielern zu suchen, und Sie können sehen, jetzt haben wir all diese Titelbilder. Nett. Lassen Sie uns fortfahren und die App-Daten eingeben. Was müssen wir noch zeigen? Wir möchten vielleicht nur eine Zusammenfassung und in jeder Karte zeigen , aber wir werden auch einen Button für die Zukunft haben , um diese Show zu starten. Wenn wir auf diese Schaltfläche klicken, wird sie gestartet, und wenn wir auf die Karte klicken , gelangen wir zur Show-Seite. Das werden wir in Zukunft schaffen. In der Visitenkarte benötigen wir einen Ausweis. Wir werden auch eine Zusammenfassung benötigen. Mal sehen, wie wir hier alles anzeigen können. Wir werden hier ein Div erstellen. Ein Div wird vorerst wahrscheinlich nur ein Link sein, den wir aus dem [unhörbar] importieren. In dem Link werden wir sagen, lesen Sie mehr. Der Link führt uns vorerst zur Route. Dagegen werden wir vorerst nichts unternehmen. Dann haben wir hier eine Schaltfläche vom Typ Button, die bei mir vorerst ein Stern sein wird. In Zukunft wird sie durch das Symbol ersetzt. Über die Zusammenfassung. Zusammenfassung werden wir irgendwo hier anzeigen und wir werden keine Zusammenfassung anzeigen, da dort die Requisite, die wir erhalten, einfach nicht angezeigt wird, wir werden sie irgendwie transformieren. Der Grund dafür ist, dass wir, wenn wir uns die API-Antwort ansehen, die zusammenfassende Zeichenfolge haben. Aber wie Sie sehen können, handelt es sich um eine HTML-Zeichenfolge. Das bedeutet, dass wir einfach diesen HTML-Code nehmen und verwenden können. Das Problem ist, dass es ziemlich lang ist. Wir wollen es kurz machen. Wir wollen hier nicht Hunderte von Wörtern anzeigen. Ich schlage vor, diese zusammenfassende Zeichenfolge in eine sehr kurze Zeichenfolge umzuwandeln . Wir werden von hier aus alle HTML-Tags entfernen und wahrscheinlich nur, sagen wir, die ersten 10 Wörter nehmen. Wie können wir das machen? Nehmen wir an, wir erhalten diese Zeichenfolge hier. Lassen Sie uns die Logik in der Browser Console hier schreiben. Wir haben diese Zeichenfolge hier. Für diese Zeichenfolge transformieren wir sie zuerst in ein Array, indem Methode.split aufrufen, und wir teilen sie durch Leerzeichen auf. Jetzt haben wir so etwas. Dann nehmen wir nur die ersten 10 Elemente aus diesem Array, .split danach werden wir vom Index Null auf Index 10 aufteilen. Am Ende haben wir ein Array von 10 Elementen. Dann werden wir dieses Array wieder in eine Zeichenfolge umwandeln . Wir werden alle Elemente mit einer leeren Zeichenfolge dazwischen verbinden . Es sieht so aus. Aber wir haben hier immer noch HTML-Tags, also müssen wir sie ersetzen. Ich werde die für alle Zeichenketten verfügbare Methode der.replace ändern . Hier übergebe ich einen sogenannten regulären Ausdruck. Ich werde alle unnötigen Zeichen abgleichen und sie dann durch eine leere Zeichenfolge ersetzen. Im Grunde wird es sie einfach wegnehmen. Denken Sie nicht darüber nach , dass das passt. Der reguläre Ausdruck, den ich schreiben werde, ersetzt einfach alle HTML-Tags in unserer aktuellen Zeichenfolge. Es wird so aussehen. Sie dem einfach nicht viel Aufmerksamkeit. Unser Endergebnis wird so aussehen. Wir haben diese HTML-Zeichenfolge genommen, sie gekürzt und alle HTML-Tags entfernt. Ich kann diese Logik einfach kopieren. Sie haben gerade hier geschrieben, und ich werde so etwas wie eine Zusammenfassung ohne Zusammenfassung machen. Wenn ich mich nicht irre, ist die Zusammenfassung in der Sendung vielleicht auch nicht vorhanden, deshalb werden wir hier nach falschen Werten suchen . Wenn wir eine Zusammenfassung haben, rufen wir die Split-Methode und all diese Logik auf, um unseren HTML-Code in eine einfache Zeichenfolge umzuwandeln, andernfalls geben wir keine Beschreibung. Dann werden wir die Zusammenfassung entfernt anzeigen. ID ist vorerst unbenutzt, aber wir werden sie so belassen. Wir speichern die Datei, gehen erneut zu Show Grid und geben die ID weiter, die data.show.id sein wird und als Namen haben wir sie bereits. Am Ende werden wir eine Zusammenfassung geben. Es wird ziemlich einfach sein, nur data.show.summary. Ich weiß, dass es nach viel klingt, aber glauben Sie mir, dies ist nur eine normale Methode, wenn Sie mit Daten aus der API arbeiten. Sie müssen sich irgendwie überlegen wie Daten angezeigt werden sollen. Das ist hier einfach normal. Ich speichere es, ich gehe zurück, und wenn ich diesmal nach Jungen suche, wo sind meine Jungs? Sie sind hier. Jetzt habe ich die zusammenfassende Zeichenfolge , die wir mit dem Link Lesen transformiert haben, sowie die Schaltfläche „Mich markieren“. Nun, sieht toll aus, nicht wahr? Jetzt verbringen wir hier tatsächlich viel Zeit auf Shows. Lassen Sie uns schnell die Schauspieler zusammenfassen, die wir haben. In Actor Grid können wir diese Logik einfach von hier kopieren. Wir benötigen kein Konsolenprotokoll. Ich kopiere einfach die Logik aus dem Show-Grid füge sie in das Actors Grid ein. Ich werde schnell die Requisiten der Schauspieler erhalten, die ich hier überreiche. Actors.POP-Daten. Ich mache das innerhalb von Show Grid. Ich muss das innerhalb des Actors Grid machen. Ich empfange Schauspieler hier. Ich ordne Schauspieler zu und ordne sie der Schauspielerkarte zu. ActorCard.jsx. Ich werde diese Logik sehr schnell von der Showcard kopieren sie in die Karte des Schauspielers legen. Ich benenne Showcard in Actor Card um, und welche Daten erhalte ich dieses Mal? Zuallererst haben Schauspieler auch Namen. Sie haben auch Bilder und sie haben auch IDs, oder vielleicht auch nicht. Wir benötigen keinen Ausweis, da wir für jede Show eine separate Seite haben werden , aber wir werden nicht für jeden Schauspieler eine eigene Seite haben. Wir brauchen einen Namen, wir werden ein Bild brauchen, wir werden wahrscheinlich etwas wie Geschlecht, ihr Land, vielleicht Geburtstag und Todestag brauchen . Dann verwende ich hier im Actors Grid die Darstellerkarte. Es wurde automatisch importiert, anstatt all diese Requisiten zu übergeben. Lass mich es entfernen. Als Schlüssel übergebe ich einen Datenpunkt, lassen Sie mich das mal sehen. Was haben wir hier? Karte anzeigen ist nicht definiert. Die Zusammenfassung ist nicht definiert. Komm schon. Lass mich nach Schauspielern suchen. Lassen Sie mich die Netzwerkanfrage sehen. Hier habe ich eine Person. Das ist Person, also Daten, Person. Persönlich habe ich Geburtstag, null Land, null Todestag, null Geschlecht, Frauen. Sie können sehen, wir haben bereits viele Nullen. Nun, das ist nicht schlecht. Wir geben den Namen weiter. Es wird einfach data person.name sein. Dann wird es Country sein. Wenn ich nicht betrunken bin, kann Country tatsächlich ein Objekt sein. Es ist ein Objekt mit Namen hier. Ich gebe nur Daten, Person, Land.Name weiter. Land kann jedoch Null sein, also müssen wir das überprüfen. Wenn Daten, Person, Land wahr sind, geben Sie bitte den Namen an. Andernfalls geben Sie es bitte Null. Dann haben wir Geburtstag. Wie du gesehen hast, kann Geburtstag nicht Null sein, aber wir kümmern uns um die Innenseite der Schauspieler-Karte. Wir geben Daten, Person, Geburtstag weiter. Dann haben wir auch den Todestag , der so ziemlich dem Geburtstag entspricht. Dann haben wir auch das Geschlecht. Geschlecht wird Daten, Person, Geschlecht sein. Außerdem glaube ich, wir haben das Bild vergessen. Bild, ich denke, es wird so ziemlich das Gleiche sein wie bei Shows. Ich kopiere es einfach. Ich werde fragen, ob Daten, Person, Bild existieren. Bitte geben Sie Daten, Person, Bild, Medium, sonst nicht gefundenes Bild PNG an. Großartig. Was wird nun das Markup für das Actor Grid sein? Lass mich sehen. Das Bild bleibt ohne Namen gleich. In H1 werden wir weiterhin den Namen anzeigen, aber neben dem Namen werden wir auch das Geschlecht in Klammern anzeigen , falls es eines gibt. Wir können unsere Logik hier einordnen. Sie erinnern sich, dass wir bedingtes Rendern direkt in JSX einbetten können , wenn das Geschlecht da ist . Bitte zeigen Sie die Zeichenfolge an, die aus Klammern und in Klammern besteht, wir werden das Geschlecht interpolieren und dieses Geschlecht kann Null sein. Wenn wir den Operator und verwenden um diese Logik bedingt wiederzugeben, möchten wir immer sicherstellen, dass Geschlecht ein boolescher Wert ist. Deshalb werden wir es entweder in einen solchen booleschen Wert umwandeln, um es zu überprüfen, oder wir können eine doppelte Negation anwenden, wodurch es auch in einen booleschen Wert umgewandelt wird. , neben dem Namen werden wir das Land innerhalb des Absatztags anzeigen Ich glaube, neben dem Namen werden wir das Land innerhalb des Absatztags anzeigen. Wir werden fragen, ob das Land bekannt ist, dann zeigen wir eine Zeichenfolge an, die besagt, dass das Land stammt. Sonst sagen wir es keinem Land, niemandem. Dann haben wir Geburtstag und Todestag. Wir werden hier dieselbe Logik anwenden. Wenn wir Geburtstag haben, ein boolescher Wert. Bitte zeigen Sie das P-Tag mit geboren am Geburtstag an. Wahrscheinlich ist das Gleiche für den Todestag oder für einen Todestag, anstatt nichts zu zeigen, wenn er das tut, können wir immer noch sagen, dass diese Person am Leben ist. Deshalb werden wir hier das P-Tag erstellen und fragen, ob wir bitte den Todestag haben. Display starb an diesem Todestag. Andernfalls bitte lebend anzeigen. Wir brauchen den Div unten nicht wirklich. Unser endgültiges Markup sieht so aus. Wir brauchen die Link-Komponente nicht oben drauf. Nun, das war eine Menge und ich bin jetzt schon müde , all diese ziemlich langweilige Logik der Anzeige von Daten zu schreiben. Aber wir müssen das trotzdem durchmachen. Lass uns nach Shows suchen. Wir haben alles, was angezeigt wird. Jetzt sind wir zu Schauspielern gewechselt. Dieses Mal suchen wir nach Harry, nicht nach Gary, sondern nach Harry. Hier haben wir ein Bild. Sie können sehen, ob das Bild nicht existiert. Es wird angezeigt, dass das Bild nicht gefunden wurde. Dann haben wir den Namen, das Geschlecht in der Klammer. Dann haben wir kein Land, niemand, der lebt oder nicht am Leben ist, als die Person geboren wurde. Alle Daten, die wir von der API haben , werden auf diese Weise angezeigt. Ich denke, das ist es. Lass uns alles verpflichten und lass uns weitermachen. Ich werde alles begehen. Ich weiß, dass du diese eine Warnung gesehen hast, die wir wegen dieser ID haben. Das ist in Ordnung. Lass es uns vorerst dort belassen. Wir werden uns später damit befassen. Wir werden alles tun und wir werden sagen, dass die Daten der Serien und Schauspieler angezeigt werden. Lass uns alles unter Kontrolle bringen und lass uns eine Pause einlegen. Wir sehen uns im nächsten. 69. 13 Seiten mit dynamischen Inhalten: Hallo zusammen. Im letzten Video haben wir Karten für Shows und Schauspieler erstellt. Dieses Mal werden wir über dynamische Seiten sprechen. Wie ihr euch in den Karten für Shows erinnert, haben wir diesen Link zum Lesen mehr. Wenn wir zum Markup zurückkehren, ist dies die Link-Komponente, die wir von React Router dom verwendet haben. Moment löst es sich auf der Homepage im Stammverzeichnis auf. Im Grunde macht es nichts, wenn wir darauf klicken. Was wir nun stattdessen tun wollen Wenn wir auf „Mehr lesen“ klicken, sollten wir zur jeweiligen Show-Seite navigieren. Zunächst müssen wir entscheiden, wie genau unsere Show-Seite dargestellt werden soll. In diesem Fall und in den meisten Fällen werden Seiten durch IDs dargestellt. Wir haben ShowID. Es kann unsere eindeutige Kennung für die Seite Wenn wir also auf eine Seite in der URL klicken, wird irgendwie ShowID angezeigt. Wir können hier zwei Optionen in Betracht ziehen. Erste Option, unsere URL sieht ungefähr wie Slash Show aus, und dann wird die ID der Show als Teil der Abfragezeichenfolge angegeben. So etwas. Zweite Option, die wir in Betracht ziehen können, anstatt die ID als Teil der Abfragezeichenfolge anzugeben, können wir showId tatsächlich in ein URL-Segment umwandeln. Irgendwann wird die Show-Seite eine URL haben, so etwas wie Slash Show, Slash showId, und diese ID wird je nach Show, auf die wir klicken, geändert. Die Frage hier ist, wie dies mit React Router erreicht werden kann. Wenn wir hier zur App-Komponente zurückkehren, habe ich, wie Sie sich erinnern, das Markup, das ich der Dokumentation entnommen habe, zum späteren Nachschlagen auskommentiert das Markup, das ich der Dokumentation entnommen . Hier haben wir diese Routenteams und darin haben wir etwas mit Doppelpunkt, wir haben Doppelpunkt Team-ID. Was auch immer Sie hier sehen, ist etwas, das als dynamischer URL-Parameter oder dynamisches URL-Segment bezeichnet wird, weil es sich ändert. Alle unsere Daten , die wir in unserer Anwendung haben , sind dynamisch, denn was auch immer wir in die Eingabe eingeben, es wird dynamisch sein. Wir können nicht wirklich vorhersagen welche Daten wir von der API erwarten sollten. Wir müssen irgendwie darüber nachdenken, wie wir das Skelett für die dynamischen Daten schreiben können . Ich schlage vor, dass wir die zweite Option in Betracht ziehen , die ich Ihnen gerade zeige, und unsere URL wird wie Slash show, slash showID aussehen. Dieser dynamische showID-URL-Parameter ist das, was Sie hier in diesem Beispiel mit einem Doppelpunkt sehen. Wir geben ihm einen Namen, sagen wir TeamID. Wir geben an, dass dieser benannte Parameter etwas Dynamisches ist, das wir der URL entnehmen können. In unserem Fall, was wir hier tun können, können wir eine weitere Route erstellen und wir werden sie außerhalb des Hauptlayouts erstellen , da wir für die Show-Seite nicht hauptsächlich die Route verwenden werden, die wir zuvor erstellt haben. Diese Route wird den Pfad mit einem Schrägstrich anzeigen, einem Schrägstrich und einem Doppelpunkt anzeigen lassen. Dieses dynamische URL-Segment hier, ich habe ihm den Namen ShowID gegeben. Ich werde einen URL-Parameter haben , der dynamisch sein wird, und er wird den Namen showId haben. Für diese Route möchte ich die Show-Seite anzeigen. Lass uns weitermachen und eine erstellen. Unter Seiten erstelle ich eine weitere Komponente namens show, weitere Datei namens show, und das Markup wird vorerst sehr einfach sein , Seite in der App anzeigen. Ich werde diese Show-Page-Komponente importieren und versuchen wir es. Wenn ich zu Slash Show, Slash etwas navigiere , wirst du sehen, dass ich eine Show-Seite habe. Es funktioniert tatsächlich. React Router konnte diesen Pfad anpassen und mir die Show-Komponente rendern. Wenn ich zu Just Show gehe, habe ich, nicht gefunden, weil nur Show ohne dynamisches URL-Segment nicht zu dieser Routendefinition passt. Deshalb fällt es auf, not found zurück. Aber sobald ich etwas mit Schrägstrich anzeigen gehe, werde ich die Seite anzeigen lassen. Großartig. Nun stellt sich die Frage, wie wir diese ShowID irgendwie von der URL hier abrufen und in unserer Show-Komponente verwenden können. Unsere Strategie wird die folgende sein. Immer wenn wir zur Show-Seite navigieren und showID im URL-Segment in unserer Komponente haben , können wir dieses URL-Segment nehmen, wir können diese showID nehmen und es dann innerhalb der Komponente verwenden , um die TVMaze API abzufragen und Showdaten abzurufen. Dies ist ein sehr verbreiteter Ansatz, wenn Sie mit dynamischen Seiten arbeiten. Sie werden einen dynamischen Teil innerhalb der URL haben, und wann immer Sie zu dieser Seite navigieren, nehmen Sie diesen dynamischen Teil aus der URL und verwenden ihn innerhalb der Komponente, um Daten abzufragen. In unserem Fall wird das ShowID sein. Nun, wie können wir diese ShowID aus der URL entnehmen? Wenn wir zur React Router-Dokumentation zurückkehren , haben wir links ein Menü. Wir können nach unten zum Abschnitt Hooks scrollen und hier werden wir uns den Use Params Hook interessieren. Sie können diese kurze Beschreibung hier lesen , also use params hook gibt ein Objekt zurück, Schlüsselwertpaare der dynamischen Parameter der aktuellen URL, denen der Routenpfad entspricht. Lass uns das versuchen. Sie können sehen, dass es aus React Router dom importiert wurde. Ich werde genau das Gleiche tun. Ich kopiere das einfach sehr schnell. Ich brauche keine Route, also muss ich nur Parameter verwenden und in Show rufe ich einfach use params auf. Ich werde eine neue Variable namens params erstellen. Im Moment werde ich einfach die Log-Parameter stornieren und sehen, was ich habe. Ich gehe hier zum Browser Cancel, und hier können Sie sehen, dass ich ein Objekt habe, bei dem showId dem entspricht, was ich in der URL angegeben habe. Dieser Schlüssel hier entspricht dem Parameternamen, den wir diesem URL-Segment innerhalb der Routendefinition gegeben haben. Wenn wir hier so etwas wie, ich weiß nicht, ganz zufällig eintragen, ich aktualisiere die Seite, Sie können jetzt die wichtigsten Änderungen sehen. Ich habe ihm speziell etwas Sinnvolles wie showID gegeben, damit wir später mit dem use params Hook auf diese dynamische ShowID zugreifen können . Da es ein Objekt sein wird, können wir diese Strukturierung verwenden. Aus diesem Params-Objekt hole ich mir ShowID. Lassen Sie uns versuchen, das hier in unserem JSX zu interpolieren. Seite für showID anzeigen. Lass es uns versuchen und ich habe festgestellt , dass meine App nicht gespeichert ist Lass mich sie speichern. Sie können Seite für Show sehen, was auch immer ich in die URL eingegeben habe. Wenn es Show mit Id1 wäre, hätte ich für Show 1. Einfach so haben wir jetzt eine dynamische Seite erstellt , die unsere Show repräsentieren wird. Da ist noch eine Sache dran. Wir werden die URL im Browser-Suchfeld nicht ständig manuell ändern , oder? Wir müssen den Link ändern , den wir in der Showcard haben. Es bringt uns tatsächlich zu dieser dynamischen Seite. Lass uns versuchen, das zu tun. Inside show wissen wir, dass wir für Attribute, für Requisiten, dynamische Werte mithilfe von JavaScript bereitstellen können. Anstatt einfach eine statische Zeichenkettenwurzel zu übergeben, können wir geschweifte Klammern öffnen. Wir können sagen, bitte geh zu Slash, zeige die Slash-ID und das war's. Lass uns versuchen, das zu sehen. Wenn wir nach „Hallo“ suchen und immer wenn ich den Mauszeiger auf den Link in der linken unteren Ecke bewege, siehst du den URL-Schrägstrich zeigen, fünf oder etwas. Es wird für jede Show immer anders sein. Wenn ich darauf klicke und zur Seite navigiere, lass mich zurückgehen und auf etwas anderes klicken . Du wirst sehen, dass es jetzt anders ist. So können wir mit React Router dom dynamische Seiten in unserer App erstellen , und wir können dynamische Parameter mit dem use params Hook von der URL abrufen dem use params Hook von der URL und sie dann innerhalb der Komponente verwenden, um Daten abzurufen. werden wir im nächsten Video machen. Lassen Sie uns vorerst einfach alles verpflichten, was wir hier getan haben. Lassen Sie uns einen Überblick geben. Insight-App haben wir eine neue dynamische Crowd erstellt, die auf dem showID-Parameter basiert. Wir haben diesen Parameter showId genannt. In der Show-Komponente, die wir erstellt haben und die Komponente repräsentiert unsere Seite, haben wir den showID-Parameter mithilfe des use params-Hook abgerufen. In der kurzen Karte haben wir den Link so geändert, uns tatsächlich zur Show-Seite weiterleitet. Fantastisch. Ich werde alles als dynamische Show-Seite erstellen benennen, und ich denke, das wird in Ordnung sein Verschiebe alles auf GitHub und wir sehen uns auf der nächsten Seite. 70. 14 Einführung in die useEffect Haken: Hallo. Im letzten Video haben wir eine dynamische Showseite erstellt. Jetzt ist es an der Zeit, dass wir einige dynamische Daten auf dieser Seite abrufen. In diesem Video werden wir darüber sprechen, wie dies erreicht werden kann. Damit wir verstehen, wie es funktioniert, müssen wir einen anderen React-Hook namens useEffect kennenlernen . Sie erinnern sich, dass ich zuvor mit einem über den Lebenszyklus von Komponenten gesprochen habe . Der Lebenszyklus einer Komponente ist der Zeitraum vom Einbinden der Komponente bis zum Abmelden von der Seite. Schauen wir uns den Lebenszyklus der Komponenten genauer an. Wir können drei verschiedene Zeitpunkte unterscheiden , zu denen die Komponente montiert wird. Zweitens ist die Komponente bereits montiert und wird jedes Mal neu gerendert, und wird jedes Mal neu gerendert wenn sich der Zustand im Inneren ändert. erneute Rendern und der dritte Zeitpunkt werden entfernt oder nur, wenn die Komponente demontiert wird. Diese drei Zeitpunkte stellen den Lebenszyklus der Komponente dar. Für unsere Strategie zum Abrufen von Daten interessieren wir uns nur für den Zeitpunkt, interessieren wir uns nur für den Zeitpunkt, zu dem die Komponente montiert wird. Weil unsere Logik die folgende sein wird. Sobald wir die dynamische Seite für Show öffnen, holen wir uns die Show-ID von der URL und verwenden dann diese Show-ID, um Daten nur einmal abzurufen , wenn die Komponente gemountet wird. Wir möchten diese Logik zum Abrufen von Daten nicht jedes Mal erneut ausführen Logik zum Abrufen von Daten nicht jedes Mal wenn die Komponente erneut gerendert wird. Dies ist wichtig, um zu verstehen , dass wir Logik nur einmal ausführen müssen. Lassen Sie uns nun versuchen zu sehen, wie uns der UseEffect Hook dabei helfen kann. Lassen Sie mich wahrscheinlich zum Suchformular navigieren. In dieser Komponente werden wir mit diesem UseEffect Hook spielen und verstehen, wie er funktioniert und wie er uns helfen kann. Ich werde diese drei Punkte zum Lebenszyklus von Komponenten hier darlegen . Dann werde ich oben von React useEffect importieren. Versuchen wir nun, diesen Haken zu benutzen. Innerhalb der Komponente rufe ich diesen Hook auf, und dieser Hook erhält zwei Argumente. Das erste Argument ist die Funktion, der Callback, der die von uns gewünschte Logik ausführt , und das zweite Argument ist ein sogenanntes Array von Abhängigkeiten. Wir werden etwas später über eine Reihe von Abhängigkeiten sprechen . Lassen Sie uns vorerst einfach ein leeres Array übergeben. Unser erster Anwendungsfall ist nun die Montage der Komponente. Wir wollen die Logik nur einmal ausführen , wenn die Komponente gemountet wird. Dieser Callback wird übrigens der Effekt des useEffect genannt . Bezeichnen wir diesen Callback als Effekt. Mein Effekt wird sein, dass ich einfach das Konsolenprotokoll ausführe und sage Component Mounts. Nichts Kompliziertes. Kehren wir nun zu unserer App zurück, öffnen wir die Konsole und in der Konsole sehen wir die Komponentenhalterungen , die zweimal gedruckt werden. Es wird zweimal gedruckt, weil wir den strikten React-Modus haben. Wenn Sie sich daran erinnern, dass es bei der Entwicklung bewusst darauf hinausläuft, Komponenten zweimal zu verwenden, um mögliche Fehler zu erkennen. Wir wollen dieses Verhalten nicht, wenn wir mit useEffect arbeiten. Moment werde ich nur den strikten React-Modus entfernen. Kommen wir zurück zu unserer App. Wenn ich die Seite aktualisiere und die Komponente mountet, wird die Suchformularkomponente gemountet, ich sehe mein Konsolenprotokoll hier. Wenn ich versuche, einen dieser Zustände zu aktualisieren, wenn ich etwas in die Eingabe eingebe, wird die Komponente erneut gerendert. Sie werden jedoch feststellen, dass Component Mounts nie wieder ausgeführt werden. Lass es mich versuchen. Ich tippe etwas in die Eingabe, diese Komponente wird neu gerendert. Component Mounts werden jedoch nie wieder funktionieren. Um uns das Beobachten zu erleichtern, füge ich hier das Konsolenprotokoll hinzu und sage, dass die Komponente erneut gerendert wird. Was haben wir hier? Halterungen für Komponenten. Wir sehen ein erneutes Rendern von Komponenten. Das ist in Ordnung, da dies das erste Mal ist , dass die Komponente montiert wird. Dann sehen wir tatsächlich die Nachricht, die wir in useEffect verwenden. Wenn ich diesen Status aktualisiere, nur die Komponente neu gerendert. Wir sehen nie Komponentenhalterungen. So können wir die Logik nur einmal ausführen, wenn die Komponente gemountet wird. Lassen Sie uns nun den dritten Anwendungsfall hier beobachten. Wenn die Komponente demontiert wird. In useEffect innerhalb dieses Effekts, innerhalb des Callbacks, können Sie eine sogenannte Cleanup-Funktion übergeben . Es ist im Grunde die Funktion, die vom Callback zurückgegeben wird. Rückgabefunktion. Diese Funktion hier wird ausgeführt, wenn die Komponente ausgemountet wird. Lass es uns versuchen und sehen. In der Cleanup-Funktion werde ich Komponenten-Unmounts schreiben. Mal sehen. Erstens haben wir genau das gleiche Verhalten wie zuvor. Aber sobald sie die Seite ändern, die Navigation, wenn ich zur Startseite gehe, dieses Komponentensuchformular wird dieses Komponentensuchformular von der Seite entfernt. Mal sehen, was passiert. Ich fange an und du siehst die Komponenten unmounts. Die in der Bereinigungsfunktion definierte Logik wird ausgeführt, kurz bevor die Komponente von der Seite entfernt wird. Auf diese Weise können wir uns in den unmontierten Zeitpunkt einklinken. Bisher haben wir zwei Zeitpunkte festgelegt, wann die Komponente montiert und wann die Komponente demontiert wird. Beim zweiten Anwendungsfall, wenn die Komponente erneut gerendert wird, wird es mit useEffect etwas schwierig. Nehmen wir an, ich möchte eine gewisse Logik ausführen, wenn sich die Suchoption ändert. UseEffect kann eine gewisse Logik ausführen , wenn sich etwas ändert. Dieses zweite Argument, das Abhängigkeitsarray, dient genau diesem Zweck. Es definiert und weist den useEffect an, diese Logik vom Callback aus auszuführen , wenn sich etwas ändert. Innerhalb des Abhängigkeitsarrays listen wir Werte auf, auf die wir warten möchten, und wenn sich dieser Wert ändert, weisen wir useEffect an, bitte führen Sie die Logik erneut aus. Lass es uns versuchen und sehen. Ich werde die Cleanup-Funktion kommentieren, anstatt Komponenten zu mounten, werde ich etwas wie Änderungen der Suchoption mitteilen. Als Abhängigkeitsarray als einen der Werte innerhalb des Abhängigkeitsarrays übergebe ich als einen der Werte innerhalb des Abhängigkeitsarrays die Suchoption. Mal sehen. Ich aktualisiere die Seite, nichts wird gedruckt, weil ich gerade auf der Startseite bin . Sobald ich zur Homepage gehe, sehen wir, dass die Komponenten neu gerendert und die Suchoption geändert wird. Warum sehen wir Änderungen der Suchoption, wenn wir etwas innerhalb der Abhängigkeitsrate angeben? Die Sache ist, dass useEffect immer mindestens einmal ausgeführt wird, egal was passiert. useEffect wird mindestens einmal ausgeführt, egal was passiert. Wenn ich nun versuche, etwas in die Eingabe einzugeben, sehen wir nur das erneute Rendern der Komponenten, wir sehen nie Änderungen der Suchoptionen. Aber sobald ich den Status der Suchoptionen aktualisiere , indem ich die Suchoption set aufrufe, wird useEffect erneut ausgeführt. Mal sehen. Wir sehen Änderungen der Suchoptionen. Wir ändern es erneut, und jedes Mal, wenn der Wert geändert wird , wird der Effekt erneut ausgeführt. So einfach ist das. Hier können Sie beliebig viele Abhängigkeiten auflisten. Wenn sich einer von ihnen ändert, wird der Effekt jedes Mal erneut ausgeführt. Im Grunde achten wir auf Wertänderungen, und wenn diese Wertänderung stattfindet, wiederholt sich der Effekt. Mit dieser Methode können wir uns in die Re-Rendering-Logik der Komponente einklinken und hier unsere eigene Logik ausführen, indem wir wiederum den useEffect-Hook verwenden . Nennen wir es jedoch den Anwendungsfall 2.5, wenn wir die Logik vor dem nächsten erneuten Rendern ausführen möchten. Es mag raffiniert klingen, und bis zu einem gewissen Grad ist es das auch, aber schauen wir uns an, wie es funktioniert. Unsere 2.5 wird vor den nächsten drei Neurendern logisch sein. Die Bereinigungsfunktion hier, ich habe Ihnen bereits gesagt, wenn Sie etwas Logik ausführen möchten , bevor die Komponente summiert wird, können Sie diese Funktion aus dem Effekt zurückgeben und was auch immer Sie hineinlegen , wird ausgeführt, bevor die Komponente demontiert wird. Dies funktioniert jedoch nur, wenn das Abhängigkeitsarray leer ist. Wenn wir Abhängigkeiten innerhalb des Abhängigkeitsarrays haben, wird die Bereinigungsfunktion für jeden Effekt ausgeführt. Wenn der aktuelle Effekt beendet ist, wird die Logik für diesen Effekt ausgeführt , bevor der nächste Effekt ausgeführt wird. Anstelle der Komponentenmengen nehmen wir an, dass sich die Suchoption ändert, und hier im selben Konsolenprotokoll und hier im selben Konsolenprotokoll werden wir auch die Suchoption einfügen. Wir werden den Wert des Staates erkennen können. Lass es uns versuchen. Ich aktualisiere die Seite. Ich sehe Änderungen der Suchoption. Es wird derzeit angezeigt. Sobald sie die Option ändern, schauen wir, was passiert. Wir sehen, wie die Komponenten wie gewohnt neu gerendert werden, wir sehen Änderungen der Suchoptionen. Sagen wir die Suchoption, sagen wir, bevor sich die nächste Suchoption ändert, oder sagen wir vor dem nächsten useEffect-Lauf. Lass es uns noch einmal versuchen. Wir sehen Änderungen der Suchoptionen, Shows. Jetzt ändern wir die Option, und was ich vor dem nächsten Ausführen von useEffect sehe, wird angezeigt. Diese Bereinigungsfunktion wird für jeden Effektlauf ausgeführt. Unser derzeitiger Versuch, diesen Effekt zu erzielen, richtet sich an staatliche Akteure. Da unser aktueller Status aus Akteuren besteht, diesem Moment die letzten Auswirkungen auf. der Effekt das nächste Mal ausgeführt wird, wird die Bereinigungsfunktion für unseren aktuellen Effekt für Schauspieler ausgeführt . Wenn ich es wieder auf Shows ändere, werden wir vor dem nächsten useEffect-Lauf mit Schauspielern sehen und dann werden wir sehen sich die Suchoptionen für Shows ändern. Lass es uns versuchen. Wir sehen vor dem nächsten useEffect-Lauf, eigentlich ab sofort für unseren vorherigen useEffect-Lauf und unseren neuen Lauf von useEffect. Nun, das klingt kompliziert. Eigentlich ist es das auf den ersten Blick. Es macht jedoch tatsächlich Sinn. Es gibt viele Anwendungsfälle, in denen Sie jede dieser Optionen verwenden möchten . Durch die Verwendung von useEffect sind wir in der Lage, einige Logiken während eines kompetenten Lebenszyklus unter verschiedenen Bedingungen und Umständen auszuführen kompetenten Lebenszyklus unter . Wir können das Abhängigkeitsarray verwenden, um useEffect anzuweisen , wann wir diese Logik ausführen möchten . Im Moment haben wir uns useEffect angesehen und den Wert des Suchoptionsstatus in der Konsole protokolliert , wenn sich eine Suchoption ändert. Vielleicht haben Sie eine Frage, warum wir UseEffect hier verwenden, wenn wir das Konsolenprotokoll ohne useEffect direkt hier platzieren können , genau wie wir es beim erneuten Rendern von Komponenten getan haben. Nun, die Sache ist, wieder mit useEffect haben Sie das Abhängigkeitsarray. Dieses erneute Rendern der Konsolenprotokollkomponente wird bei jedem kompetenten Re-Rendering ausgeführt, egal was passiert. Die Komponente wird gerendert, Sie werden immer das Konsolenprotokoll sehen. Mit dem useEffect warten Sie jedoch nur auf Werte, die sich ändern, und diese Werte werden im Abhängigkeitsarray angegeben . Wenn Sie ein leeres Abhängigkeitsarray angeben, werden diese useEffect nur einmal ausgeführt , wenn die Komponente gemountet wird. Diese Logik, die Bereinigungsfunktion hier wird ausgeführt, wenn die Komponente ausgemountet wird. Selbst wenn Sie die Abhängigkeit haben, beim Aushängen der Komponente feststellen, werden Sie beim Aushängen der Komponente feststellen, dass die Bereinigungsfunktion ebenfalls ausgeführt wird. Lassen Sie uns das beobachten. Wir wechseln die Schauspieler und wir haben unseren vor dem nächsten useEffect-Lauf. Wenn die Komponente nicht gemountet wird, werden Sie dies vor dem nächsten useEffect-Lauf sehen. Im Grunde bereinigt die Bereinigungsfunktion, genau wie ich Ihnen gesagt habe, genau wie ich Ihnen gesagt habe, den aktuellen useEffect-Lauf. Mit diesem Ansatz können wir Daten nur einmal abrufen, können wir Daten nur einmal abrufen wenn die Komponente gemountet wird. Wir geben ein leeres Abhängigkeitsarray , um useEffect anzuweisen, nur einmal auszuführen , wenn die Komponente gemountet wird. Innerhalb des Effekts werden wir die Logik von der API abrufen. So einfach ist das. Jetzt, wo wir etwas mehr über den Kompetenzlebenszyklus wissen, wissen wir, dass wir useEffect verwenden können, um kompetente Logik während des Lebenszyklus von Komponenten zu manipulieren . Wir können Daten abrufen und endlich etwas anzeigen. Im nächsten Video werden wir genau das tun. Lassen Sie uns vorerst den React Strict Mode zurückbringen und darüber werden wir noch einmal sprechen. Für den Moment ist das alles. Wir sehen uns im nächsten. 71. 15 Fetching von TV mit useEffect: Hallo nochmal. Im letzten Video haben wir über den useEffect Hook gesprochen, wie er uns helfen kann, die Logik innerhalb der Komponente während des Lebenszyklus der Komponente zu manipulieren die Logik innerhalb der Komponente während des Lebenszyklus der . Versuchen wir, useEffect auf unserer dynamischen Show-Seite anzuwenden , um einige Daten abzurufen. Lass uns gehen. Ich gehe zu den Seiten, Show.jsx. Wie Sie sich erinnern, holen wir uns hier die ShowID aus der URL. Lass uns nach Shows suchen. Sagen wir, Jungs. Wir gehen mehr lesen. Wir haben diese URL. Was auch immer wir in der URL, unserem dynamischen Parameter, haben , wir holen es mit dem useParams Hook ab. Lassen Sie uns nun UseEffect aus dem React-Paket importieren und jetzt in das Paket, das useEffect ausführen wird. Da wir Daten nur einmal abrufen wollen, wollen wir Logik nur einmal ausführen, wenn die Komponente gemountet wird. Aus diesem Grund geben wir ein leeres Array von Abhängigkeiten an. In diesem useEffect werden wir FetchData abrufen. Mal sehen, wie der Endpunkt aussehen wird. Das wird uns Informationen zur Show geben. Wenn wir zur TVMaze API gehen und hier nach dem Abschnitt Shows suchen, haben wir diesen Endpunkt/shows/id, und Sie können dieses Beispiel sehen. Lass es uns öffnen und sehen. Durch Angabe der ID der Show können wir alle erforderlichen Daten abrufen. Lassen Sie uns eine weitere wiederverwendbare Funktion in der tvmaze.js erstellen , in der wir diesen Endpunkt abfragen. Lassen Sie uns von hier aus eine weitere Funktion untersuchen , die wir getShowById nennen werden. Als Argument geben wir showId an, und darin rufen wir ApiGet auf, und wir nennen diese URL, diesen Endpunkt. Da ID etwas Dynamisches ist , das wir durch das Argument bereitstellen, werden wir Backticks verwenden, damit wir die Zeichenketteninterpolation anwenden können. Unsere Funktion wird so aussehen. Jetzt können wir in show jsx getShowById aus der API tvMaze importieren. Dann können wir in useEffect getShowId aufrufen und showId übergeben. Wir möchten eine Sync-Wait-Syntax verwenden , weil sie benutzerfreundlicher ist, aber Sie können den Callback von useEffect nicht async durchführen. Wenn ich das mache, werden Sie hier diese Warnung sehen, die aus dieser ESLint-Regel für Hooks stammt. Es sagt, Effekt-Callbacks sind synchron, um Rennbedingungen zu verhindern, stellen Sie die Async-Funktion und die Site ein. Sie können dieses Beispiel hier sehen. Nun, genau das werden wir tun. Wir werden eine asynchrone Funktion in useEffect erstellen und diese Funktion dann darin aufrufen. Lass uns das versuchen. In unserem Fall wird es wie fetchData aussehen. Wir markieren den Callback nicht als async , der FetchData heißt. In FetchData rufen wir ein Weight get show by ID auf und geben showID an, und geben showID an die wir aus der URL abgerufen haben. Sobald ich showId in useEffect verwende, werden Sie feststellen, dass ich jetzt diese Warnung hier habe, die besagt, React-Hook useEffect eine fehlende Abhängigkeit hat, showId. Wenn Sie etwas in der Komponente definiert haben und dieses Etwas, diesen Wert , im Idealfall in useEffect verwenden, muss er idealerweise als Abhängigkeit von diesem useEffect angegeben werden . Der Grund dafür ist, dass, sagen wir unsere showID hier auch dynamisch sein könnte, zum Beispiel könnte es unser Status sein, und wir möchten diesen useEffect ausführen, wenn sich dieser Wert ändert. Wenn wir hier keine Abhängigkeit angeben, lassen Sie unser Array von Abhängigkeiten leer. Die Logik wird nur einmal ausgeführt, wenn die Komponente gemountet wird. Aber was ist, wenn sich diese ShowID ändert, sagen wir von 1-2? In diesem Fall ist es für uns sinnvoll, Daten erneut abzurufen, um die neueste Sendung mit ID gleich zwei zu holen. Wenn wir die Reihe von Abhängigkeiten jedoch leer lassen, wird der Effekt nie wieder ausgeführt. Damit wir das korrigieren können, was auch immer wir in useEffect verwenden, alle Werte hier, die potenziell dynamisch sein oder sich ändern könnten , müssen wir das angeben. Dies ist unsere Abhängigkeit von diesem useEffect-Callback. Deshalb werde ich showId als Teil von useEffect auflisten. Jetzt bekommen wir unsere Daten hier. Versuchen wir es mit Konsolenprotokolldaten. Wir kommen zurück. Was wir jetzt sehen, sind zwei Konsolenprotokolle. Der Grund dafür ist wiederum der StrictMode, den wir haben. StrictMode ist problematisch und wurde in React Version 18 eingeführt, aber Sie können jetzt sehen, dass wir in der Entwicklung dieses Problem haben , dass die Komponente zweimal neu gerendert wird. Da wir in useEffect Daten abrufen, bedeutet das, dass wir Daten zweimal abgerufen haben. Das ist nicht wirklich das, was wir wollen. In diesem Fall empfiehlt das React-Team, dass Sie ab React 18, wenn Sie Daten abrufen möchten, etwas anderes als useEffect verwenden sollten. Wir werden etwas später darüber sprechen, aber das ist sehr umstritten. Vor React,18 in Version 17 und früher die sehr einfache und standardmäßige Methode zum Abrufen von Daten genau das, indem useEffect verwendet wurde. Nun, mit React 18 ändert sich nicht viel, außer dass wir jetzt React StrictMode haben. Moment schlage ich vor, React StrictMode zu entfernen, und wir werden es später aktivieren, wenn wir eine Alternative zur Verwendung des useEffect Hook für FetchData sehen werden. Moment werde ich in Index jsx einfach React StrictMode entfernen. Unser useEffect wird in der Entwicklung nicht zweimal ausgeführt . Jetzt speichern wir es. Ich habe die Seite aktualisiert und Sie sehen, ich habe hier Daten. Wenn ich die Registerkarte Netzwerk öffne, aktualisiere ich die Seite. Hier finde ich den Aufruf der TVMaze API mit showID, den wir von der URL erhalten. Wenn ich eine Vorschau ansehe, sind das die Daten, die wir haben. Lassen Sie uns nun einen Status erstellen und diese Daten in den Zustand versetzen. Nennen wir es einfach showData und setzen show data. Dies wird der useState-Anruf sein. Standardmäßig sind die Daten Null. Dann erstellen wir einen weiteren Status, um jeden Fehler abzufangen , falls die Anfrage fehlschlägt. Ich werde showError, setShowError erstellen. In der Standardeinstellung sind Anrufe Null. Ich werde einen Weg zu getShowId, getShowById in den try catch Block packen . Innerhalb des Catch-Blocks rufe ich set showError auf null auf. Wenn ich dann Daten erhalte, rufe ich setShowData und lege diese Daten als Teil des Zustands fest. Jetzt können wir bedingtes Rendern verwenden, um alle Daten anzuzeigen, die wir aufgenommen haben, und wir können den ShowData-Status verwenden. Wir können die Logik des bedingten Renderings direkt in die Komponente schreiben , nicht nur innerhalb des JSX-Markups, nicht nur, indem wir beispielsweise eine Hilfsfunktion verwenden , in der wir Logik definieren, wir können sie auch direkt in die Komponente schreiben. Hier frage ich nur, ob wir showError von dieser Funktion haben , von unserer Komponente, geben Sie bitte div zurück, was besagt, dass wir einen Fehler haben, showError.Message, weil showError das Fehlerobjekt sein wird. Hier habe ich es auf Null gesetzt, tut mir leid, es muss das andere Objekt sein, das wir hier fangen. Falls wir nun einen Fehler haben, geben wir das JSX-Markup mit einem Fehler zurück. Wenn wir ShowData haben, haben wir in diesem Fall Show-Daten. Lassen Sie uns vorerst einfach absagen. Lass uns sehen. Was haben wir? Wir haben einen Namen, also lass es den ShowData-Namen sein. Wenn keine dieser beiden Bedingungen erfüllt ist, können wir standardmäßig sagen, dass die Daten geladen werden. Ich kann sehen, dass ich search showError nicht verwendet habe. Hier habe ich es tatsächlich nicht benutzt. Lass uns sehen. Ich habe Showdaten, Jungs. Wenn ich aktualisiere, können Sie das hier blinken sehen, und dieses Blinken bedeutet, dass diese Daten geladen werden. Die Daten werden so schnell geladen, dass wir nicht einmal bemerken können , dass die Daten eine Nachricht laden. Aber wenn dieser API-Aufruf beispielsweise 10 Sekunden dauern würde, würden wir sehen, dass Daten geladen werden. Mit diesem Ansatz können Sie Daten abrufen, wenn die Komponente gemountet wird. Im nächsten Video werden wir uns einen neuen Begriff vorstellen , der Custom React Hooks heißt. Zum Beispiel haben wir hier useState verwendet und wir haben sowohl useEffect als auch useParams verwendet. Was auch immer Sie direkt aus React importieren, diese Hooks werden als integrierte React-Hooks bezeichnet. Aber Sie können anhand von react-route-dom sehen, dass wir etwas namens useParams importieren. Es ist auch ein React-Hook, aber es ist kein Teil der React-Bibliothek. Es ist etwas Benutzerdefiniertes, das von React-Router-dom erstellt wurde. Im nächsten Video werden wir darüber sprechen und unseren eigenen benutzerdefinierten Hook erstellen. Aber bevor wir dieses Video beenden, lassen Sie uns alles, was wir getan haben, begehen. Zunächst haben wir den StrictMode deaktiviert, sodass unser useEffect in der Entwicklung nicht zweimal ausgeführt wird. Dann erstellen wir eine getShowById-Funktion , die Daten abruft und innerhalb der Show-Komponente den useEffect-Hook, den FetchData, verwendet. Git add dot commit everything. Wir werden FetchData innerhalb der Show-Komponente angeben oder Show-Daten innerhalb der Show-Komponente abrufen, einfach so. Nächstes Video, benutzerdefinierte Hooks. Wir sehen uns dort. 72. 16 Custom React Haken: Hallo, da. Im letzten Video rufen wir mit Hilfe von useEffect Daten in der Show-Komponente ab. letzte Mal habe ich erwähnt, dass wir in diesem Video über den Unterschied zwischen integrierten React-Hooks und benutzerdefinierten Hooks sprechen den Unterschied zwischen integrierten React-Hooks und benutzerdefinierten Hooks werden, die wir aus anderen Bibliotheken importieren können. Die Sache ist, dass diese benutzerdefinierten Hooks eigentlich nur mehr Logik sind , zusätzlich zu integrierten React-Hooks, die Sie bereits gesehen haben, wie useEffect oder useState. Was ist dann der Unterschied? Diese Hooks useParams sind zum Beispiel nur Hooks mit zusätzlicher Logik, sodass wir Logik nicht in die Komponente schreiben müssen. Die Frage ist hier, warum brauchen wir benutzerdefinierte Hooks? Sie können sehen, dass wir im letzten Video tatsächlich drei verschiedene Hooks verwendet haben, eigentlich zwei Hooks, aber wir verwenden sie dreimal in unserer Komponente, useState, useState und dann useEffect hier. Nehmen wir nun an, ich möchte diese Logik in anderen Komponenten wiederverwenden. Was ist dann meine Option? Ein sehr naiver Ansatz besteht darin, diesen Code einfach zu kopieren und ihn irgendwo in anderen Komponenten zu verwenden. Aber du kannst sehen, dass es eine Menge Wiederholungen sind. Wenn wir nicht speziell über React sprechen, wenn wir uns das Beispiel der Programmierung ansehen können , um Logik irgendwie wiederzuverwenden, verwenden wir Funktionen oder wenn wir einfach etwas von der Stelle extrahieren wollen , würden wir auch eine Funktion verwenden, um den Raum, in dem diese Logik vorhanden ist, nicht zu färben. Genau das Gleiche gilt für Hooks. Wenn Sie die Hook-Logik wiederverwenden oder nur die Logik aus der Komponente extrahieren möchten , können Sie sie in einem benutzerdefinierten Reaktor platzieren. Das ist der Grund, warum wir sie verwenden. Sie werden verwendet, um die Hook-Logik wiederzuverwenden zweite Option ist, wenn Sie Logik aus der Komponente extrahieren möchten , damit sie innerhalb dieser Komponente nicht viel Platz beansprucht. In unserem Fall wird diese Logik nirgends in der App wiederverwendet, da wir nur einen Ort haben, an dem wir eine bestimmte Show innerhalb der Show-Komponente abrufen . Aber stellen wir uns vor, wir hätten einen anderen Ort, an dem wir diese Showdaten abrufen wollten. Anstatt die Logik zu kopieren und einzufügen, hätten wir sie in einen benutzerdefinierten Hook in allen Komponenten einfügen allen Komponenten denen wir die Show abrufen müssen. Lass mich dir zeigen, was ich meine. Oben auf der Datei erstelle ich einen benutzerdefinierten Funktions-Hook , den ich so etwas wie useShowById nenne. Du kannst ihm einen beliebigen Namen geben. Aber alle React-Hooks haben die Konvention, dass sie mit dem Use-Präfix beginnen müssen. Wenn Sie Ihren benutzerdefinierten Hook benennen möchten, stellen Sie sicher, dass er mit use, useShowById beginnt Es wird nur eine einfache Funktion sein und ich kopiere einfach meine Logik nach fetchData von der Komponente in den useShowById-Hook. Sie können hier ein paar Dinge sehen. Zuallererst haben wir innerhalb des Hooks keinen Zugriff auf die showID-Variable. Aber da es sich um eine Funktion handelt, können wir sie als Argument empfangen. Lass uns das machen. Sie können sehen, dass wir in der Show-Komponente jetzt keinen Zugriff auf showError oder ShowData haben. Genau der gleiche Ansatz. Wenn unsere useShowById nur eine Funktion ist, können wir einen Wert daraus zurückgeben. Wir sagen, gib ein Objekt mit zwei Schlüsseln zurück , showData und showError. Jetzt können wir diesen useShowByID-Hook in der Show-Komponente verwenden . Wir rufen diesen Hook einfach auf, wir übergeben showId und dieser Hook gibt uns ein Objekt mit zwei Schlüsseln zurück , showData und showError. Zerstören wir sie. Schauen Sie sich jetzt unser Endergebnis an. Wir haben nur eine einzige Zeile und die Logik ist woanders geschrieben. Wenn ich es verstecke, können Sie sehen, dass unsere Komponente jetzt viel sauberer ist als zuvor, und unsere Logik, Daten abzurufen, um abzurufen, zeigt, dass sie woanders lebt. Wenn ich diese Logik nun in anderen Komponenten wiederverwenden möchte, würde ich einfach useShowById, pass, showId als Argument aufrufen pass, showId als Argument und dann meine ShowData und meinen showError erhalten Lassen Sie uns zum Beispiel diese Zeile kopieren. Wenn ich Show in der App-Komponente abrufen möchte, würde ich einfach diesen Hook in der Vergangenheit verwenden, egal welche Show ich will, als Argument und ich hätte Zugriff auf showData und showError. Die Logik mit benutzerdefinierten Hooks, die Idee mit benutzerdefinierten Hooks ist dieselbe wie bei Funktionen in der Programmierung, aber bei benutzerdefinierten Hooks schreibt man Logik auf eingebaute oder andere React-Hooks. So einfach ist das. Das war's jetzt. Aber Sie erinnern sich, dass wir im letzten Video, als wir den useEffect-Hook vorgestellt haben, dieses Problem mit dem React-Strict-Modus in der Entwicklung hatten . Der React-Strict-Modus rendert die Komponente zweimal. Deshalb läuft unser useEffect immer mindestens zweimal. Das war problematisch. Die Lösung, die die Reaktion empfiehlt, besteht darin , etwas anderes anstelle von useEffect zu verwenden. Im nächsten Video werden wir darüber sprechen. Wir werden über die Alternative zu useEffect zum Abrufen von Daten sprechen . Wir werden endlich in der Lage sein unseren React-Strict-Modus wiederherzustellen, und wir werden keine Probleme damit haben, Daten nur einmal abzurufen , wenn die Komponente gemountet wird. Lassen Sie uns vorerst alles festlegen und dieses Video wie immer mit einer guten Note beenden. Meine Commit-Nachricht wird sehr einfach sein Extrahieren Sie die Datenstapellogik in einen benutzerdefinierten Hook useShowById. Fantastisch. Wir sehen uns im nächsten. 73. 17 Datenabruf mit Bibliotheken: Hallo nochmal. Im letzten Video haben wir über den Unterschied zwischen integrierten React-Hooks und benutzerdefinierten React-Hooks gesprochen . Im Grunde sind benutzerdefinierte React-Hooks die Hooks, die wir mit unserer eigenen Logik zusätzlich zu den integrierten React-Hooks schreiben. Der Grund dafür ist , dass wir etwas Logik extrahieren wollen oder ob wir die Hook-Logik wiederverwendbar machen wollen. In diesem Fall verwenden wir benutzerdefinierte Hooks. Wir rufen auch Daten von der TVMaze API nur einmal ab, wenn die Komponente gemountet wird. Das machen wir mit Hilfe des useEffect-Hooks. Aber wenn Sie sich erinnern, haben wir React StrictMode deaktiviert, weil es die Komponente zwingt, in der Entwicklung zweimal neu zu rendern, was bedeutet, dass useEffect immer mindestens zweimal statt nur einmal ausgeführt wird . Dies ist für unsere spezifische Situation problematisch . Um dies zu vermeiden, empfiehlt das React-Team Daten mit etwas anderem abzurufen. Sie empfehlen nicht, den useEffect-Hook zum Abrufen von Daten zu verwenden , wenn Sie React StrictMode aktiviert haben. Sie sprechen über etwas anderes. Was ist das? Nun, im Frontend gibt es das Konzept von sogenannten Datenabrufbibliotheken. Zwei Beispiele hierfür können React Query sein und SWR verwenden Beide sind sehr beliebt und beide sind einander sehr ähnlich. Aber was sie tatsächlich tun, zum Beispiel auf der Seite use SWR, können wir dieses sehr einfache Beispiel sehen, mit dem wir den use SWR-Hook aufrufen , sagen wir den Pfad , den wir abrufen möchten, und dann die Funktion, die Daten abruft. Dann gibt uns der Hook einen Datenfehler, den wir in unserer Anwendung verwenden können. Wenn wir das nun mit dem vergleichen, was wir hier geschrieben haben, finden Sie einen sehr ähnlichen Hinweis. Unser Hook hier zielt jedoch speziell darauf ab, Unser Hook hier zielt jedoch speziell darauf ab Sendungen von der TVMaze API abzurufen und sie per ID abzurufen. Das ist also die spezifische Logik , die eng mit der TVMaze API verknüpft ist , um Sendungen gezielt nach ID abzurufen . Wenn wir, sagen wir, eine Menge unterschiedlicher Abruflogik in unserer Anwendung über, sagen wir, Hunderte von Komponenten hinweg hätten eine Menge unterschiedlicher Abruflogik unserer Anwendung über, sagen wir, Hunderte von Komponenten hinweg , müssten wir uns in diesem Fall etwas Abstrakteres einfallen lassen, um unsere Abruflogik wiederverwendbarer zu machen und nicht eng an eine bestimmte Implementierung gekoppelt zu sein. Bibliotheken zum Abrufen von Daten machen genau das; sie geben uns den abstrakten Hook , mit dem wir Daten innerhalb der Komponente abrufen können. So ist es für uns einfacher , diese Logik in der Anwendung, die wir schreiben und die wir erstellt haben, wiederzuverwenden , diese Logik in der Anwendung, die . Suchen wir zum Beispiel in React Query nach Quick Start. Sie können sehen, dass die Logik ziemlich ähnlich ist; wir haben etwas namens Abfrageschlüssel und Abfragefunktion, darüber werden wir gleich sprechen, aber die Logik ist die folgende. Wir haben einen abstrakten Hook zum Abrufen von Daten, zu diesem abstrakten Hook wir unsere Logik zum Abrufen von Daten an, und dieser benutzerdefinierte Hook gibt uns einen Datenfehler und lädt Variablen, die wir innerhalb der Komponente verwenden können. Sie dienen dazu, das Abrufen von Daten für Entwickler optimierter, wiederverwendbarer und benutzerfreundlicher zu gestalten. Lassen Sie uns versuchen, eine dieser Bibliotheken zu installieren. In unserem Fall verwenden wir die React-Abfrage, das liegt nur daran, dass ich mich so entschieden habe. Wenn Sie möchten, können Sie useSWR ausprobieren, die Syntax ist ziemlich ähnlich. In der Dokumentation gehe ich zur Installationsseite. Von hier aus kopiere ich einfach das von NPM installierte Tanstack/React-Query. Ich werde diese Abhängigkeit zu meinem Projekt hinzufügen. Es wird im Paket Jason hier oben erscheinen. Großartig. Jetzt gehe ich zum Schnellstart und folge dem Beispiel. Zuerst müssen wir einen Kunden erstellen, dann müssen wir einen sogenannten Kreditkundenanbieter verwenden und diesen Kunden dorthin weiterleiten. Dann können wir innerhalb der Komponenten den useQuery-Hook verwenden. Mal sehen, wie es uns helfen kann. Ich kopiere einfach diese Eingaben von hier, ich gehe hier zur App-Komponente, ganz oben, ich werde nur Abfrageclient und Critic Client Provider importieren nur Abfrageclient und Critic Client Provider , einfach so, dann erstelle ich einen neuen Kreditkunden außerhalb der Komponente, dann verwende ich den Kreditkundenanbieter, sagen wir irgendwo hier, und schließe ihn am Ende. Irgendwann sieht meine App jetzt so aus. Großartig. Jetzt kann ich zur Show-Seite gehen und anstatt den use show by ID-Hook zu verwenden, verwenden wir hier den useQuery-Hook. Lassen Sie uns kommentieren, was wir hier haben, nennen wir useQuery, das auch aus tanstack/react-query importiert werden kann. Lass uns das machen. Wir benötigen nur useQuery und innerhalb der Komponente werden wir useQuery so aufrufen. Jetzt müssen wir hier Optionen übergeben. Options ist nur ein Objekt mit verschiedenen Schlüsseln , das wir liefern. Abfragetaste und Abfragefunktion sind erforderliche Optionen, die wir übergeben müssen. Der Abfrageschlüssel identifiziert eindeutig unsere Abfragelogik, unseren Faktor wie getsToDos in der gesamten Anwendung. Abfragefunktion ist die Logik zum Abrufen von Daten. Mal sehen, wie wir das nutzen können. Zuerst müssen wir den Abfrageschlüssel übergeben, und Sie können jetzt sehen, dass es sich um ein Array handelt. In unserem Fall können wir es so etwas wie Show Maybe nennen und dann wird unsere Show anhand der ID identifiziert, an die Sie sich erinnern. Wir werden Show und ShowID weitergeben. Dann müssen wir Fetcher bestehen. Sie können jedoch sehen, dass im Beispiel gerade die Abfragefunktion getsToDos übergeben wird . Aber in unserem Fall müssen wir irgendwie Zugriff auf ShowID in unserem Fetcher bekommen . Unser Fetcher ist diese Funktion, die wir zuvor erstellt haben, namens getShowById. Wenn wir in die Dokumentation schauen, ist sie irgendwo darin versteckt, ich sage Ihnen wo. Es befindet sich hier im Abschnitt Query Keys. Wenn wir hier hingehen und ganz nach unten scrollen und wir den ganzen Abschnitt hier sehen können, ob Ihre Abfragefunktion von der Variablen abhängt, ob Ihre Abfragefunktion von der Variablen abhängt die in Ihrem Abfrageschlüssel enthalten ist. Wir werden hier nur diesem Beispiel folgen. Ich kopiere es einfach und platziere es so. Der Abfrageschlüssel wird show statt todoId sein, wir werden showId anstelle von fetchToDobyId platzieren, wir werden getShowById aufrufen. Wir werden ShowID weitergeben. useQuery gibt uns ein Ergebnis zurück. Wenn wir versuchen, IntelliSense von diesem Ergebnisobjekt aus zu verwenden, können Sie sehen, dass wir hier eine Menge Dinge haben, aber wir interessieren uns speziell für Daten und Adder. Lass uns versuchen, das zu tun. Aus dem Ergebnisobjekt werde ich Daten abrufen und den Fehler abrufen. Ich werde sie umbenennen. Wir können Daten anstelle von ShowData verwenden, aber lassen Sie uns sie umbenennen Ich setze einen Doppelpunkt neben den destrukturierten Schlüssel und nenne ihn ShowData. Auf diese Weise. Der von mir destrukturierte Datenschlüssel wird in ShowData umbenannt. Aus dem Ergebnisobjekt heraus habe ich immer noch Daten destrukturiert, aber ich wollte nur einen anderen Namen haben, ShowData. Das Gleiche gilt für den Fehler, es wird showError sein. Jetzt kann ich tatsächlich zu meiner Bewerbung zurückkehren und sehen, wie sie funktioniert. Aber ich muss die App erneut starten, npm run start, ich komme zurück. Lass uns gehen und uns erfrischen. Sie können sehen, nun, nichts hat sich geändert, aber Moment haben wir den useQuery-Hook verwendet. Es ist eine benutzerdefinierte Hook-Logik, die irgendwo in der Tanstack/React-Query-Bibliothek geschrieben ist . Wir verwenden es nur, um Daten abzurufen. Sie können sehen , dass dieser Hook uns diese abstrakte Schnittstelle bietet , sodass wir diese Funktion in einen Hook wie useQuery einschließen und Daten nur einmal innerhalb der Komponente abrufen können. Dieser Abfrageschlüssel hier ähnelt etwas dem Abhängigkeitsarray in useEffect. Wenn sich etwas im Abfrageschlüssel ändert, werden die Daten hier wie bei useEffect abgerufen, sehr ähnlich. Das React-Team rät uns tatsächlich , so etwas zum Abrufen von Daten zu verwenden. Das ist eigentlich eine sehr gute Empfehlung. Sie wollten sich nicht jedes Mal in Ihrer Bewerbung mit all dieser sich wiederholenden Logik auseinandersetzen . Diese Bibliotheken haben viele Optionen, diese Bibliotheken sind für das Abrufen optimiert, sie haben diese Cache-Schlüssel und sie können viel mehr als nur das einfache Abrufen von Daten, spitze Komponentenmounts. In modernen React-Anwendungen ist die Bibliothek zum Abrufen von Daten ein sehr guter Weg. Wir werden useQuery für unser konkretes Beispiel verwenden. Jetzt können wir die Logik entfernen , die wir zuvor geschrieben haben, und jetzt können wir React.StrictMode wieder einbeziehen, da unsere Abfragelogik jetzt nicht zweimal ausgeführt wird. Lass uns das sehen. Wenn ich die Seite hier aktualisiere, habe ich nur einen Aufruf an die API, was bedeutet, dass unsere Logik, die wir hier schreiben , nicht zweimal abgerufen wird und wir trotzdem Zugriff auf React StrictMode haben. Mit diesem Ansatz haben wir zwei Fliegen mit einer Klappe geschlagen. Ich hoffe, es war nicht zu kompliziert oder ausgefeilt, um zu verstehen, wie das Abrufen von Daten in React funktioniert. Wir haben mit useEffect mit dem Nötigsten angefangen, weil useEffect verwendet werden kann, um Daten zu manipulieren und die Logik für einen Komponentenlebenszyklus zu manipulieren. Wir haben useEffect verwendet, um Daten nur einmal abzurufen , wenn die Komponente gemountet wird, aber wir mussten React StrictMode deaktivieren , da wir sonst etwas Logik schreiben müssen , um das doppelte Rendern im Entwicklungsmodus irgendwie zu überwinden . Um das zu überwinden, haben wir eine Bibliothek zum Abrufen von Daten verwendet. In unserem Beispiel haben wir React Query installiert. React Query gibt uns den abstrakten Hook useQuery, mit dem wir Daten innerhalb der Komponente abrufen können. Hoffentlich macht es Sinn. Diese Bibliotheken zum Abrufen von Bibliotheken sind eine gute Wahl, wenn Sie mit modernen React-Apps arbeiten. Lassen Sie uns die Änderungen , die wir vorgenommen haben, übernehmen. Was wir getan haben, wir haben im Grunde nur React Query installiert dann unseren benutzerdefinierten Hook für fetchShowById durch den useQuery-Hook ersetzt . Wir haben auch React StrictMode an die Anwendung zurückgegeben , da wir keine Probleme mehr mit dem Abrufen von Daten in useEffect hatten. Nun fügen wir alles zur Bühne hinzu, lassen Sie uns festlegen und sagen wir, die React-Abfrage installiert, useShowById durch den useQuery-Hook ersetzt. Fantastisch. Bis zum nächsten. 74. 18 Zuordnung: Hallöchen. Im letzten Video haben wir über Bibliotheken zum Abrufen von Daten gesprochen. Wir haben über React Query gesprochen und React Query in unsere App integriert. Wir haben den Use-Abfrage-Hook in der Show-Komponente verwendet , um Daten anhand der Show-ID abzurufen. Wenn wir jedoch zu Home jsx, Ihrer Home-Komponente, zurückkehren , können Sie sehen dass wir hier auch Daten abrufen. Es ist etwas anderes, als nur eine einfache GET-Anfrage zu stellen, wenn die Komponente gemountet wird. Da wir im Grunde Filter haben, geben wir etwas in das Suchfeld ein, dann können wir verschiedene Optionsfelder auswählen und dann klicken wir erst auf die Suchschaltfläche , nachdem die Anfrage gesendet wurde. Die React-Abfrage - und Datenabrufbibliotheken können diese Szenarien jedoch auch bewältigen. Ich habe einen Auftrag für dich. Können Sie den Use-Abfrage-Hook in die Homepage integrieren , damit wir diese Nutzungszustände hier durch einen einzigen Use-Abfrage-Hook ersetzen können . Versuchen Sie, den Use-Abfrage-Hook in die Home-Komponente zu integrieren . Hier ist ein Rat , den ich Ihnen geben kann. Sie können in der React Query-Dokumentation speziell nach Leuten und Konzepten suchen, nach denen Sie suchen können. Lassen Sie mich sehen, wie Abfragen deaktiviert, mit einem Schrägstrich unterbrochen werden, und ganz unten haben sie dieses Beispiel mit faulen Abfragen. Sie können dieses Beispiel hier verwenden, um die Komponente Use query inside home zu integrieren . Die Logik wird diesem Beispiel sehr ähnlich sein, aber Sie müssen diese Logik an unseren Anwendungsfall anpassen. Machen Sie weiter, versuchen Sie das, und dann werden wir das Ergebnis im nächsten Video vergleichen . Wir sehen uns dort. 75. 19 Verwendung von React Query zur Suche von Daten auf der Startseite: hallo. Wie war dein Auftrag? Konnten Sie erreichen, was wir wollten? Konnten Sie den useQuery-Hook in Home-Komponenten integrieren ? Lass es uns versuchen und sehen. Wie ich Ihnen bereits gesagt habe, können Sie auf dieses Beispiel zurückgreifen, um die Logik mit dem useQuery-Hook zu implementieren. Was ich tun werde, ich kopiere einfach diese beiden hier und lege sie oben drauf. Wir müssen auch UseQuery aus React-Query importieren. Lassen Sie uns die Eingabe oben platzieren. Dann müssen wir React.useState nicht verwenden, weil wir useState direkt aus der Bibliothek importieren, und jetzt müssen wir das an unseren Anwendungsfall anpassen. Zuallererst, was ist dieser aktivierte Schlüssel hier? Die Sache ist, dass es Situationen gibt, in denen wir Daten bedingt abrufen möchten, da diese Logik standardmäßig ausgeführt wird, wenn die Komponente gemountet wird. Daten werden abgerufen, wenn die Komponente gemountet wird. Dies ist jedoch nicht immer der Fall. Was ist, wenn wir einen Umschalter haben und wenn dieser Schalter wahr ist oder wenn wir den Filter nur anwenden, oder wenn wir den Filter nur anwenden dann wollen wir die Logik abrufen. In diesem Fall können wir hier die aktivierte Option verwenden, um React-Query verstehen zu lassen , dass wir diese Logik entweder ausführen oder nicht ausführen möchten . In unserem Fall haben wir Filter. Unsere Filter sind die Abfragezeichenfolge, was auch immer wir in das Suchfeld eingeben. Dann haben wir auch die Suchoption, die der Wert für Read Your Button ist, den wir auswählen, entweder Shows oder Schauspieler. Das sind Filter, die wir haben. Da wir die gesamte Logik verwalten, die mit der Eingabe dieser Filter zum Auswählen und Lesen Ihrer Schaltflächen verbunden Eingabe dieser Filter ist, verwalten wir das alles in SearchForm. Dann übergeben wir die Daten zurück an die Startseite, indem wir hier die OnSearch-Funktion verwenden. Wir müssen uns irgendwie überlegen, wie wir diese Filterinformationen an den useQuery-Hook übergeben können . Wir können, sagen wir, den Hilfsstatus für Filter verwenden , und dann können wir diesen Filter als Teil des QueryKey übergeben. Wenn der Filter null oder leer ist, haben wir nichts ausgewählt, wir deaktivieren einfach die Abfrage, denn als wir die Seite aufgerufen haben, wollen wir keine Daten abrufen, weil wir ja keine Filter haben. Wir haben nichts eingegeben. In unserem Fall filtern Sie standardmäßig anstelle einer leeren Zeichenfolge, Null ist und wir übergeben sie an die aktivierte Option. Wenn der Filter nur wahr ist, können wir die Daten abfragen. In diesem Fall wird der Hook aktiviert. Dann übergeben wir auch den Filter als Teil des QueryKey. Das heißt, wenn sich der Filter ändert, wenn sich dieser Wert irgendwie ändert, wird es in unserem Fall ein Objekt sein. Wenn dieses Objekt geändert wird, versteht ReactQuery das und der QueryKey ändert sich, und der useQuery-Hook validiert die Abfrage erneut. Die Abfrage wird mit dem neuen QueryKey erneut ausgeführt. Im Grunde wird QueryFunction, die wir hier bereitstellen, ausgeführt. Auch hier werden die Daten aktualisiert und die Datenvariable , die wir hier haben, erneut gefüllt. Genug geredet, lasst uns endlich etwas tun. Zuallererst müssen wir diesen Filter hier setzen. Wir werden das in der Onsearch-Funktion tun , die wir hier haben. Wir brauchen nicht all diese Try-Catch-Blöcke. Ich werde das nur kommentieren. In Onsearch rufe ich einfach setFilter auf und setze setFilter auf die Abfragezeichenfolge, und setze setFilter auf die wir haben, und auf die Suchoption, die wir haben. Dann übergeben wir, wie ich dir schon sagte, den Filter als Teil des QueryKey und nicht als Todos. Nennen wir es so etwas wie Suche, es spielt wirklich keine Rolle. In QueryFunction müssen wir die Logik , die wir hier haben, irgendwie platzieren , basierend auf der searchOption. In dieser QueryFunction werden wir fragen, ob filter.searchOption das ist, was wir gesetzt haben, und wenn ich die Logik in diesem QueryFunction-Filter schreibe , definiert ist, wird sie nicht Null sein. Denn wie Sie sich erinnern, wird die Abfrage deaktiviert, wenn der Filter in unserem Fall Null ist. Das bedeutet, dass es sicher ist, hier filter.searchOption zu schreiben , ohne sich Sorgen machen zu müssen, dass der Filter möglicherweise Null sein könnte, und es wird uns eine Fehlermeldung geben. Sowas wie kann die Eigenschaften searchOption von null nicht lesen . Falls filter searchOption = shows, in diesem Fall bitte searchforShowsFilter.q, andernfalls searchforPeopleFilter.q. Das war's. Jetzt können wir die Logik entfernen , die wir zuvor bei der Suche hatten. Wir können diese beiden useState-Hooks hier entfernen, Daten, die wir aus dem useQuery-Hook destrukturieren, wir werden sie als ApiData benennen, einen Fehler, den wir destrukturieren, werden wir ihn als ApiDataError nennen. Das war's. Ich entferne diesen unerwünschten Kommentar und lass uns sehen, was wir haben. Lassen Sie uns die Konsole untersuchen. Schauen wir uns die Registerkarte Netzwerk an. Ich tippe etwas wie Hallo. Klicken Sie auf „Suchen“ und Sie können sehen, dass es funktioniert hat. Nun, das gleiche Verhalten wie zuvor. Wenn ich zu Schauspielern wechsle und Jungs tippe. Hier haben wir zum Beispiel die Anfrage, wenn ich es wieder auf Shows ändere und dann wieder etwas anderes wie Mädchen mache , werden Daten abgerufen. Denn auch hier ändert sich der Filter, wenn wir die Suchtaste drücken. Immer wenn wir auf die Schaltfläche Suchen klicken, aktualisieren wir den Filterstatus. Der Filterstatus wird aktualisiert, QueryKey wird, sagen wir, für ungültig erklärt, er ändert sich. Das bedeutet, dass ReactQuery Daten mit dem neuesten Filter und dem neuesten QueryKey, den wir übergeben, erneut abruft . Einfach so. Sie haben dieses seltsame Verhalten wahrscheinlich schon bemerkt, wenn Sie sehen, wie mehrere Anfragen bearbeitet werden. Die Sache ist, dass ReactQuery etwas hat, das als erneutes Abrufen von Daten bei Neuorientierung bezeichnet wird. Dies ist eine der Funktionen dieser Bibliotheken zum Abrufen von Daten. Immer wenn Sie versuchen, das Fenster neu zu fokussieren , werden die Daten aktualisiert. Du kannst sehen, wenn ich in den Netzwerkjob klicke, dann klicke ich wieder irgendwo auf der Seite, es wird immer die Anfrage gesendet. Dieses Verhalten mag meistens gewollt sein, aber in unserem Fall ist dieses Verhalten definitiv unerwünscht. können wir deaktivieren. Innerhalb der Optionen übergebe ich refetchOnWindowFocus, und wenn Sie den Mauszeiger bewegen, können Sie die Beschreibung lesen , was genau diese Option bewirkt, wodurch sie unverändert bleibt. Lass uns sehen. Lass uns nach etwas suchen. Wenn ich versuche, das Fenster erneut zu fokussieren , passiert nichts. So etwas. haben wir useQuery auch in der Home-Komponente, herzlichen Glückwunsch. Ich hoffe wirklich, dass du diese Aufgabe gemeistert hast. Es könnte ziemlich herausfordernd sein, und das lag definitiv daran, dass es sich um eine neue Bibliothek handelt, eine neue Logik. Aber du siehst, wenn du dich daran gewöhnt hast, ist es am Ende nichts wirklich Komplexes. Lassen Sie uns die Änderungen , die wir vorgenommen haben, übernehmen. Es wird ziemlich einfach sein. Wir sagen nur, dass bearbeiten oder verwenden Sie Query auf der Startseite, um Suchdaten abzurufen. Fantastisch. Alles auf GitHub übertragen und bis zum nächsten. 76. 20 Informationen auf Seite anzeigen: Hallo nochmal, im letzten Video haben wir den Use-Query-Hook zur Homepage hinzugefügt und jetzt haben wir den kompletten Zyklus des Datenabrufs in unseren Komponenten. Aber da wir die Show-Seite erstellt haben, müssen wir die Showdaten auf dieser Seite anzeigen. Genau das werden wir in diesem Video tun Wir werden Daten auf der Show-Seite innerhalb der Show-Komponente auffüllen , los geht's. Welche Daten müssen wir anzeigen? Wenn wir uns die API-Antwort ansehen , erhalten wir diese in unseren Daten. Wir müssen entscheiden, was genau wir auf der Show-Seite anzeigen wollen also werden wir ein paar Komponenten erstellen und ich habe bereits eine Idee, also lass uns weitermachen. Zunächst erstelle ich im Ordner von show eine neue Datei namens ShowMainData.jsx. Das wird eine Komponente sein. Aber jetzt wird ein einfacher DIV-Export-Standard zurückgegeben , der die Hauptdaten anzeigt. Dann erstelle ich auch, lass mich eine weitere Komponente sehen , der ich Details nenne, jsx-Details, dann werden wir wahrscheinlich etwas anderes hinzufügen. Für den Moment ist das ausreichend, wir gehen zurück zur Show-Seite. Hier haben wir das mit Show-Daten, ShowData.Name. Stattdessen verwenden wir die Komponente show main data, die wir aus Komponenten importieren, shows showMainData, wo wir es jetzt so behalten. Danach werden wir die Details anzeigen. Hier können wir Details unter dem h2-Tag angeben und dann Details anzeigen und wir müssen sie auch aus den Showdetails importieren. Ordnung, lass mich es speichern, lass mich zurück zur Show-Seite gehen und hier habe ich Hallo, hallo, genau das, was wir momentan in unseren Komponenten haben. Was werden wir in ShowMainData anzeigen? Ich denke, wir brauchen den Namen der Sendung, so etwas wie eine Zusammenfassung und Steuern, lass mich sehen. Wir haben hier Namen, wir haben Genres, wir haben durchschnittlich oder nicht durchschnittlich, Bewertungsdurchschnitt, also werden wir das alles in ShowMainData anzeigen , lassen Sie es uns dort weitergeben. Zuallererst benötigen wir auch ein Bild und wenn Sie sich erinnern , haben wir dieses Bildmedium im Original, und es kann Null sein. Wir werden dieses Mal Nullfälle innerhalb der Komponente behandeln , also lassen Sie uns einfach showData.image übergeben , dann übergeben wir den Namen, der showData.Name lautet, dann werden wir die Bewertung bestehen. Die Bewertung wird sein, lassen Sie es mich einfach finden, einfach den Durchschnittswert, wir geben das Objekt weiter und behandeln den Durchschnittswert innerhalb der Komponente, showData-Bewertung, dann benötigen wir eine Zusammenfassung, da wir uns erinnern, dass wir sehr kurze Version der Zusammenfassung in Showcard anzeigen, diesmal zeigen wir die vollständige Zusammenfassung auf der Show-Seite an . Wir werden die Zusammenfassung weitergeben , die sich hier befindet. Dies ist die HTML-Zeichenfolge, wie Sie sich an die ShowData-Zusammenfassung erinnern , und dann übergeben wir die Genres. Lass mich hier nach Genres suchen. Dies ist nur eine Reihe von Genres dieser Show, ShowData-Genres. Fantastisch. Gehen wir nun in ShowMainData und holen wir uns all diese Eingabeaufforderungen. Wir schnappen uns das Bild, wir schnappen uns den Namen, die Bewertung, die Zusammenfassung und die Genres. Was wir nun in dieses Div schreiben werden, müssen wir zuerst das Bild anzeigen. Die Quelle wird Image.MEDIUM sein, wie Sie sich erinnern, aber dieses Mal werden wir das Originalbild anstelle der Vorschau in mittlerer Größe anzeigen. Wir müssen jedoch die Null-Anwendungsfälle behandeln , wie Sie sich erinnern also werden wir fragen, ob das Bild der Wahrheit entspricht und ob Bilder definiert sind? Dann verwenden Sie bitte das Originalbild , andernfalls verwenden Sie bitte das Bild, das nicht gefunden wurde. Wenn ich zurück zur Showcard oder zum Showgrid gehe , habe ich hier eine ziemlich ähnliche Logik Ich werde einfach das nicht gefundene PNG-Bild wiederverwenden und es hier ablegen und wenn Sie sich erinnern, dass PNG-Bild wiederverwenden und es hier ablegen es im öffentlichen Ordner abgelegt ist, wird es unter dem Stammverzeichnis bereitgestellt. Lassen Sie uns neben dem Bild vielleicht auch Alt hinzufügen, dessen Name angezeigt wird, dann werden wir die Informationen anzeigen, also trennen wir diesen Block durch ein Div. Hier geben wir etwas wie Namen als Titel ein, dann zeigen wir hier die Bewertung an , sodass wir die Bewertung als Durchschnitt angeben können , dieses Objekt, aber auch die Bewertung kann Null sein oder wenn ich mich nicht irre, kann der Bewertungsdurchschnitt null oder nicht definiert sein oder er kann Null sein, da Null sein oder wenn ich mich nicht irre, kann der Bewertungsdurchschnitt bin ich mir nicht sicher , aber der Bewertungsdurchschnitt dieser Struktur wird immer derselbe sein. In diesem Fall können wir etwas tun, wenn der Bewertungsdurchschnitt etwas Wahres ist oder sagen wir, er ist nicht Null, wir können den Operator oder verwenden. Was ich meine ist, dass wir annehmen, dass wir einen Bewertungsdurchschnitt von Null haben. Lassen Sie uns den Durchschnitt hier erstellen, er ist Null, also werden wir entweder Durchschnitt oder Hallo anzeigen und Sie können sehen, dass er ist Null, also werden wir entweder Durchschnitt oder Hallo anzeigen und Hallo gedruckt wird was bedeutet, dass der Durchschnitt nicht durchgegangen ist, weil er falsch ist und Null als falscher Wert betrachtet wird . In diesem Fall zeigen Sie bitte Hallo an. Wir werden hier genau dieselbe Logik anwenden. Wenn der Durchschnitt also Null ist oder wenn er in diesem Fall falsch ist , geben Sie bitte N/A an, macht das Sinn? Dann werden wir die Zusammenfassung anzeigen , aber hier ist die Sache. Lass uns versuchen, das einfach zu tun, mal sehen, was wir haben werden. Kehren wir zu unserer App zurück und wir haben hier ein ziemlich großes Bild. Das ist in Ordnung, lass uns einfach erhöhen und nach unten scrollen. Hier können Sie sehen, dass wir die HTML-Zeichenfolge so erhalten, wie sie ist. Die HTML-Zeichenfolge betrachtet sie tatsächlich als Zeichenfolge und nicht als HTML. Wenn wir in Daten schauen, ist es nur eine Zeichenfolge und React weiß nicht , dass dies HTML ist. Damit wir HTML so behandeln können, als ob es HTML wäre, müssen wir Folgendes verwenden. Zunächst werden wir dieses Div in eine sich selbst schließende Komponente verwandeln und an dieses Div können wir etwas namens DangerouslySet innerHTML übergeben. Dies ist eine spezielle React-Requisite, dies muss ein Objekt sein und dieses Objekt hat eine HTML-Eigenschaft und wir übergeben eine Zusammenfassung darin. Mit dieser Konstruktion versteht React, dass wir HTML tatsächlich als HTML behandeln wollen . Lass es uns versuchen und sehen. Jetzt können Sie sehen, dass wir hier keine HTML-Tags haben und wenn wir das Markup überprüfen , wird jedes HTML, das wir erhalten haben , tatsächlich als HTML behandelt. Warum ist das auf DangerouslySetInnerHTML gesetzt? Die Sache ist, wenn Sie beispielsweise HTML anzeigen oder HTML in die Seite einfügen möchten , es kann bösartiges JavaScript enthalten. Um das zu verhindern, warnt React Sie, dass, wenn Sie sicherstellen möchten, dass Sie HTML auf der Seite einfügen möchten , dies vollständig Ihre Entscheidung ist und die Vorsichtsmaßnahme ist, dass Sie dangerouslySetInnerHTML verwenden müssen weil es gefährlich ist. Neben der Zusammenfassung werden wir die Genres anzeigen. Wir können Genres erkennen und warum ich hier ein Fragezeichen habe. Genres werden sein, lassen Sie mich sehen, damit wir ein Array haben , was bedeutet, dass wir jedes Element dem JSX-Markup zuordnen können . Wir werden die Methode.map verwenden, los geht's. Wir werden hier eine weitere Div kreieren und Genres werden Genres sein. karte. Hier haben wir das Genre und wir werden vielleicht ein Span-Tag anzeigen und darin können wir das Genre anzeigen. Wenn wir das.map verwenden , um das JSX-Markup zuzuordnen, müssen wir den eindeutigen Schlüssel an das Map-Element übergeben . Lassen Sie mich sehen, dass Genres ziemlich einzigartig sind, würde ich sagen, also können wir das Genre selbst als eindeutigen Schlüssel weitergeben. Lass es uns versuchen und sehen. Ich zoome hinein, wir haben Genres, Comedy-Familie. Ich denke, diese Show hat nur ein Genre. Es hat Comedy und Familie. Da wir kein Leerzeichen haben, sieht es so aus, als ob dies eine einzelne Zeichenfolge ist, ist es aber nicht. Passt bitte nicht auf , dass dies vorerst ungestylt ist. Moment beschäftigen wir uns nur mit Logik in unserer Anwendung. Wir werden uns am Ende mit dem Styling befassen. Jetzt lass mich sehen, also haben wir jedes Problem benutzt, das wir wollten. Im Moment denke ich, das ist es. Lassen Sie uns weiter gehen und uns mit den Details befassen. Welche Insiderdetails werden wir zeigen? Lassen Sie mich sehen, welche Daten wir hier haben? Wahrscheinlich werden wir so etwas wie den Status der Sendung anzeigen, ob sie noch läuft, beendet ist oder vielleicht gerade veröffentlicht wurde und wann genau diese Sendung uraufgeführt wurde, und vielleicht das Netzwerk, wo genau die Sendung veröffentlicht wurde. In welcher Region, auf welchem Fernsehsender, so etwas. Um die Komponente detailliert zu beschreiben, übergebe ich zuerst den Status und das wird nur ShowData.Status sein, dann wahrscheinlich, wenn die Show uraufgeführt wurde, also wird es nur ShowData.Premiered und dann Netzwerk sein. Network ist nur ein Objekt, ShowData.Network. Cool. Ich speichere es. Dieses Mal gehe ich hier zur Details-Komponente, ich übergebe Status Premiered Network und ich schnappe mir Status Premiered Network oder vielleicht nehmen wir diesmal einfach eine andere Syntax , um erneut, sagen wir, gelegentlich JavaScript zu verwenden. Anstatt Requisiten direkt in Funktionsargumenten zu zerstören, werden wir das in einer separaten Zeile tun nur weil wir wollen, dass es so ist, daran ist nichts Besonderes. Hier sage ich statt „Hallo“ einfach, füge vielleicht ein Absatz-Tag hinzu und sage „Status ist Status“. Dann sage ich in einem anderen Absatz „Premiere an diesem Tag“ und dann werden wir das Netzwerk anzeigen. Dieses Netzwerk kann jedoch auch Null sein, da nicht alle Sendungen diese Informationen enthalten, sodass wir diesen Fall behandeln müssen. Wir müssen davon ausgehen , dass dies tatsächlich eine gute Praxis ist , wenn Sie mit etwas Unbekanntem arbeiten. Es ist sehr gut, davon auszugehen , dass etwas null oder undefiniert sein kann oder möglicherweise noch nicht einmal vergangen ist. Wir werden das Netzwerk fragen, ob es vertrauenswürdig ist, ob es existiert? In diesem Fall zeigen wir eine Zeichenfolge an, etwa an diesem Tag auf einem bestimmten Kanal oder Land uraufgeführt wurde . Wählen wir wahrscheinlich nur den Namen, der an diesem Tag auf network.name uraufgeführt wurde. Ich habe Backticks verwendet, um anzugeben, dass wir die Zeichenketteninterpolation innerhalb der Zeichenfolge verwenden möchten , und dann interpoliere ich den Netzwerknamen innerhalb der Zeichenfolge für den Netzwerknamen. Andernfalls zeigen Sie bitte Null an, zeigen Sie nichts an oder wir können sicherstellen , dass wir hier den booleschen Wert verwenden. Wir können das Netzwerk in einen booleschen Wert umwandeln und anstatt den ternären Operator zu verwenden, können wir das logische Ende verwenden. In diesem Fall wird kein Netzwerkname nur angezeigt , wenn das Netzwerk wahr ist. Schauen wir uns nun an, was wir haben und wir haben den Status beendet und an diesem Tag auf CBC uraufgeführt. Fantastisch. Jetzt sieht es so aus, hätten wir fast alles gezeigt, was wir wollten. Wir können jedoch noch einen Schritt weiter gehen und mehr Daten anzeigen, z. B. Informationen zu den Staffeln und Informationen zur Besetzung. Was brauchen wir in diesem Fall? Wenn wir in die API-Daten schauen, die wir erhalten haben, haben wir keine Informationen über Besetzungen oder Shows. Aber wenn wir zur TV Maze API zurückkehren, haben wir hier diesen Abschnitt, lassen Sie mich sehen, über das Einbetten. Durch das Einbetten können wir mehr Daten über die Show laden, und hier ist ein Beispiel. Lass mich es öffnen. Die URL sieht so aus. Wir haben Episoden einbetten, Besetzung einbetten und wenn wir nach unten scrollen, sehen wir diesen eingebetteten Unterstrich-Abschnitt mit Folgen und Besetzung. Das ist genau das, was wir tun werden, aber wir müssen unsere Funktion so ändern, dass sie angezeigt wird. Lassen Sie uns diesen eingebetteten Teil kopieren und dann die getShowByID-Funktion verwenden, um Daten abzurufen. Hier zur URL können wir Einbettung, Folgen und Besetzung hinzufügen . Aber statt Episoden werden wir Staffeln einbetten. Wir können auch Informationen zu den Jahreszeiten abrufen. Anstelle von Folgen geben wir Staffeln an. Wir speichern es, wir kehren zur Show zurück, und jetzt wurde es erneut validiert, weil Sie sich erinnern wenn Sie den Fokus zwischen Fenster und etwas anderem wechseln, Daten aktualisiert werden, wenn Sie den Fokus zwischen Fenster und etwas anderem wechseln, weil wir den useQuery-Hook verwenden, und wir können sein Verhalten verhindern , indem wir RefetchOnWindowFocus verwenden. Wenn Sie dieses Verhalten nicht wollen, brauchen wir dieses Verhalten wahrscheinlich nicht, ich werde es deaktivieren, genau wie wir es auf der Homepage getan haben. Mal sehen, was wir in diesem Fall haben. Sie können jetzt sehen, dass wir diesen Unterstrich eingebettet haben , hier haben wir Informationen zu Besetzung und Staffeln. Lassen Sie uns diese URL kopieren, sie hier öffnen und die Datenform der Staffeln und Besetzungen ansehen. Zunächst müssen wir entsprechende Komponenten für Staffeln und Besetzung erstellen . Im Ordner Shows erstelle ich cast.jsx und ich erstelle seasons.jsx. Ich werde das Markup schnell kopieren, also wird es vorerst div sein, Requisiten, wir werden sie in der Reihe destrukturieren und ich werde es Cast nennen. Das Gleiche werde ich für Seasons tun. Jetzt werden wir diese Komponenten in der hier gezeigten Abbildung verwenden. Im nächsten Div werden wir also wieder so etwas wie div haben, werden wir also wieder so etwas wie div haben ein weiteres Titel-Tag , auf dem Seasons stehen. Hier werden wir die Komponente „Jahreszeiten“ anzeigen. Es wurde automatisch importiert. Wenn ich mir den oberen Teil ansehe, wurde es aus den Komponenten Show Seasons importiert. Ich kopiere das. Anstelle der Staffeln werde ich jetzt die Besetzung anzeigen und dann die Besetzung erneut importieren. Wie importiere ich? Ich drücke „Tab“, bumm, oben importiert. Großartig. Welche Daten werde ich weitergeben? Für die Komponente „Jahreszeiten übergebe ich die Staffeln-Requisite, und die Staffeln werden zu eingebetteten Staffeln mit Unterstrichen. Das erhalten wir von der API, also übergebe ich show data underscore embedded. Achte darauf, dass du es nicht falsch buchstabierst, .seasons, und genau das Gleiche werde ich für die Besetzung tun, aber anstatt Staffeln weiterzugeben, werde ich die Cast-Requisite showData embedded.cast weitergeben. Jetzt, in Seasons, werde ich die Staffel-Requisite, an der wir vorbeigekommen sind, zerstören. Mal sehen, was ich hier zeigen werde. Zunächst möchten wir wissen, wie viele Staffeln wir insgesamt haben. Wenn ich zur App zurückkehre, habe ich dieses Problem: unerwartetes leeres Objektmuster. Lassen Sie uns das schnell beheben. Wenn wir zu Cast gehen, werde ich das einfach entfernen. Also in Seasons , was ich ausstellen werde. Zunächst werde ich im P-Tag die Saisons insgesamt anzeigen. Lassen Sie uns überprüfen, ob wir das haben, Saisons insgesamt. Hier fügen wir seasons.length hinzu. Wenn wir uns unsere Daten ansehen, sind Jahreszeiten nur ein Array. Jede Jahreszeit ist also ein Array-Element, was bedeutet, dass die Anzahl der Elemente der Anzahl der Jahreszeiten entspricht. Nun, es scheint logisch zu sein, also werden wir seasons.length verwenden. Neben den Staffeln insgesamt werden wir die Folgen insgesamt zeigen und sagen , lass mich sehen. Da wir Staffeln als Array haben und in jedem Element haben wir die Reihenfolge der Folgen, und im Grunde genommen, wie viele Folgen haben wir in einer einzigen Staffel? Wir müssen irgendwie die Gesamtzahl der Folgen in der gesamten Staffelliste berechnen . Wir können etwas array.reduce verwenden, um das zu berechnen. Also werden wir Seasons.reduce sagen. Seasons Reduce wird jetzt standardmäßig aktiviert sein, also wir unser gesamtes Saison-Array auf eine Zahl reduzieren . Wir werden dieses Saison-Array zu einer Zahl zusammenfassen. Wir werden einfach jedes Array-Element durchgehen und die Reihenfolge der Folgen zusammenfassen. Hier ist dies unsere Summe und das zweite Element hier wird unsere Summe und das zweite Element das aktuelle Array-Element sein , das in einer Schleife übertragen wird. Das wird Saison. Also werden wir sagen, bitte sende uns etwas mehr plus Staffel.Episodenbestellung zurück . Lassen Sie uns versuchen, zu sehen, ob wir keine Bestellung haben. Wir haben insgesamt eine Staffel, insgesamt 13. Folgen. Toll, es hat funktioniert. Neben dem Absatz werden wir nun Daten der einzelnen Jahreszeiten anzeigen, also im Grunde diese Informationen, was bedeutet, dass wir jedes Saisonelement dem jsx-Markup zuordnen müssen . Wir werden die Dotmap-Methode verwenden. Wir sagen seasons.map, season. Wir werden es einem Div zuordnen oder lassen es jetzt Hello oder Key sein, wir werden die Saison überstehen. lass mich die Daten sehen. Die Jahreszeit hat eine ID, die eindeutig dargestellt ist , sodass wir sie sicher als Schlüssel verwenden können. Wir werden sagen, bitte geben Sie die Jahreszeit, die Jahreszeitennummer an, also die Nummer der Jahreszeit. Großartig. Dann zeigen wir das p-Tag an. Wir werden den Folgen mitteilen wie viele Folgen diese Staffel hat. Wahrscheinlich können wir die Reihenfolge der Staffelfolgen verwenden, warum nicht? Dann zeigen wir an, wann diese Staffel ausgestrahlt wurde, und wir können das Premierendatum und das Enddatum verwenden. Großartig. Lassen Sie mich es also in separate Div aufteilen, dann werde ich es ausgestrahlt mitteilen. Was ich tun werde, sage ich Season.PremiereDate, SeasonEndDate. Wahrscheinlich das, ja. Lass es uns versuchen und sehen. Wir haben Staffeln insgesamt, Episoden insgesamt, dann haben wir Staffel eins 13 Folgen und sie wurde von diesem Datum bis zu diesem Datum ausgestrahlt. Sieht für mich gut aus. Wenn wir noch etwas hinzufügen müssen, werden wir das später tun, vorerst reicht das aus. Lassen Sie uns dieses Mal an der Cast-Komponente arbeiten. Zum Gussbauteil übergeben wir die Gussproquisite. Also hier in der Gusskomponente schnappe ich mir die gegossene Requisite und lass uns überlegen, welche Daten wir hier anzeigen werden. Lassen Sie uns die API untersuchen. Die Besetzung ist auch nur ein Array und jedes Array hat diese Person, Charakter, dieses Selbst und die Stimme Keith. Mal sehen, was wir tun werden. Wir werden wahrscheinlich einfach jedes Array-Element einigen Informationen zuordnen und sie hier anzeigen. Lass uns das machen. Also machen wir einfach cast.map. Nennen wir es Item und wir werden es vorerst einem Div zuordnen. Der Schlüssel wird, lassen Sie mich sehen, item person.id sein, wahrscheinlich das. Ich denke, das wird ziemlich einzigartig sein. In der Div werden wir zunächst, lassen Sie mich sehen, wahrscheinlich das tatsächliche Bild anzeigen lassen Sie mich sehen, wahrscheinlich . Lass uns versuchen, das zu tun. Lassen Sie uns das Bild vorerst in ein Div packen. Das Bild wird item.person.image sein, aber Sie denken daran, dass das Bild Null sein kann , also müssen wir uns darum kümmern. Wenn item.person.image existiert, verwenden Sie in diesem Fall item.person.image.medium. Ansonsten benutze es noch einmal, lass es uns schnappen, lass uns das nicht gefundene Bild png verwenden. Toll, speichern wir es. Dann werden wir neben dem Bild, das wir anzeigen, lassen Sie mich sehen, wir haben item.person.name und dann werden wir den Charakter in dieser Show in dieser Show anzeigen. Der Charakter wird der Charaktername sein, also hat diese Person item.character.name gespielt. Und weißt du was? Es ist ziemlich repetitiv, jedes Mal einen Punkt mit einem Punkt einzugeben, also werden wir von diesem Gegenstand aus Person und Charakter destrukturieren. Anstatt jedes Mal Item Dot zu schreiben, schreiben wir einfach person.character. Also character.name. Lassen Sie mich sehen, wie wir etwas anderes verwenden können. Wir haben dieses Selbst und diese Stimme hier. Stimme bezieht sich wahrscheinlich darauf, ob dies nur das Voice-Over war und die Rolle nicht direkt in der Show gespielt wurde. Es war nur ein Voice-Over von dieser Person, damit wir das vielleicht gebrauchen können. Wir können die Stimme auch von hier aus destrukturieren , weil es der Schlüssel zu unserem Artikel ist und wir werden fragen ob diese Person sich um das Voice-Over kümmert. Wir werden einfach so etwas wie eine weitere Pipe anzeigen , weil wir das hier verwendet haben und wir werden Voice-Over sagen , andernfalls eine leere Zeichenfolge oder wir können wieder den Operator und verwenden und wir wollen sicherstellen, dass dies ein boolescher Wert ist , aber ich denke, dieser Wert hier wird immer ein boolescher Wert sein , also müssen wir diese Variable nicht drehen Dieser Wert wird in einen booleschen Wert umgewandelt indem eine doppelte Negation angewendet wird oder ein boolescher Konstruktor verwendet wird. Ich denke, das wird ausreichen. Versuchen wir nun, unser Endergebnis zu sehen. Wir haben die folgende Show-Seite. Lass mich es kleiner machen. Im Moment weiß ich, dass es ungestylt ist , aber wir werden uns darum kümmern, keine Sorge. Wir haben alles, was wir von der Show wollen. Wir betten eine Zusammenfassung ein, wir zeigen Durchschnittsbewertungen an, wir zeigen Genres an, wir zeigen Details an, wann die Sendung ausgestrahlt wurde, vielleicht wann sie beendet wurde, wir zeigen Informationen zu Staffeln und wir zeigen Informationen zur Besetzung an. Was war die Person, die diese Rolle gespielt hat und war diese Person eine Voice-Over-Figur oder war es einfach eine beliebige Figur in der Show. Ich denke, das ist es. Es war tatsächlich viel. Wir haben mit API-Daten gearbeitet und entsprechende Komponenten zur Anzeige von Daten erstellt. Wo lasst uns jetzt alles begehen. Lassen Sie uns kurz einen Überblick darüber geben, was wir hier haben. Wir haben die Funktion get show by id geändert , um Daten abzurufen, wir betten Staffeln ein, wir betten Cast ein, dann verwenden wir die Informationen, die wir von der API erhalten , und zeigen diese Informationen auf der Show-Seite an. Wir haben die entsprechenden Komponenten erstellt, wir haben die entsprechenden Requisiten übergeben und dann haben wir alles innerhalb der entsprechenden Komponente erledigt , ungefähr so. Ich füge alles zur Bühne und meine Commit-Nachricht wird mit detaillierten Showdaten auf der Show-Seite angezeigt. Cool. Eine weitere Sache, auf die ich hier hinweisen möchte, ist, dass wir, wie Sie sich erinnern, dieses RefetchOnWindowFocus-Verhalten der Benutzerabfrage who deaktiviert haben. Wenn wir jetzt erneut validieren, entschuldigen Sie mich, lassen Sie mich die App erneut starten. Wo ist unsere Show-Seite? Ups, ich habe es versehentlich geschlossen. Was ich meine ist, dass, wenn wir Fenster jetzt neu fokussieren, die Daten nicht ständig abgerufen werden, aber was passiert, wenn unsere Show-ID nicht existiert? Lass es uns versuchen und sehen. Lass uns etwas Kauderwelsch versuchen. Mal sehen, was wir haben? Wir sehen, dass Daten geladen werden, und wir können dieses Wiederholungsverhalten sehen. Sie können sehen, dass die Anfrage tatsächlich dreimal gesendet wurde, und wenn bis zum Zeitpunkt der dritten Anfrage immer noch ein Fehler in unserer Anfrage auftritt, wird bei dritten Anfrage immer noch ein Fehler der Verwendung der Abfrage ein Fehler angezeigt. Sie können sehen, dass die Bibliothek zum Abrufen von Daten mehr als einfach ist . Bitte rufen Sie meine Daten ab, wenn die Komponente gemountet wird. diesem Datenabruf wird davon ausgegangen, dass die Anfragen möglicherweise fehlschlagen können, und wenn es fehlschlägt, wird es automatisch einige Male erneut versucht, mit einem sogenannten exponentiellen Backoff. Wenn unsere Anfrage beispielsweise zum ersten Mal fehlgeschlagen ist, wird die Anfrage nach einer Sekunde erneut versucht. Schlägt sie fehl, findet die nächste Wiederholung nach zwei Sekunden und nächste Wiederholung nach drei Sekunden statt. Use Query kümmert sich darum. Ziemlich cool. Das war's. Wir sehen uns im nächsten. 77. 21 Hinzufügen der Taste "Go Back": Hallo nochmal. Im letzten Video haben wir Komponenten erstellt, mit denen wir Daten zu einer bestimmten Sendung auf der Show-Seite anzeigen. Es war ziemlich lang. Jetzt müssen wir ein bisschen mehr über die Benutzererfahrung nachdenken. Was meine ich damit? wir davon aus, dass wir auf der Homepage sind, bestimmten Sendung suchen, dann klicken wir auf Read More. Wir landen auf der Show-Seite. Jetzt haben wir hier keine zusätzlichen Schaltflächen für die Navigation, was bedeutet, dass der Benutzer auf Zurück zur vorherigen Seite klicken muss , und wenn wir zu dieser Seite zurückkehren, sehen wir, dass alle unsere Daten weg sind, wir müssen die Suche erneut starten. Was wir in dieser Situation tun können. Zunächst müssen wir auf der Show-Seite eine Schaltfläche hinzufügen , die den Benutzer zurück zur Homepage bringt. Dies wird für den Benutzer nur ein bisschen bequemer sein. Aber es löst immer noch nicht das Problem, dass die Daten weg sind, wenn der Benutzer zu dieser Seite und an der Kinokasse zurückkehrt zu dieser Seite und an der Kinokasse Wir kümmern uns nicht darum, aber im Idealfall müssen wir uns irgendwie an die letzte Suche erinnern , die wir durchgeführt haben. Wenn der Benutzer zu dieser Seite zurückkehrt, ist sie immer noch da. Wir werden das nicht an der Kinokasse behandeln, wir werden eine Alternative vorstellen. Was ist, wenn wir nach der Sendung suchen und wenn wir auf Mehr lesen klicken, wird der Benutzer auf den neuen Tab geleitet? Es öffnet diese Show-Seite auf der neuen Registerkarte. Lass uns weitermachen und das tun. Wenn wir zur Showcard-Komponente zurückkehren, die wir haben, verwenden wir hier diese Link-Komponente. Wir verwenden die Link-Komponente, weil wir die clientseitige Routing-Bibliothek React-Router verwenden , und damit wir die Navigation über Links ordnungsgemäß abwickeln können, verwenden wir diese spezielle Linkkomponente, verwenden wir diese spezielle Linkkomponente aus dem React-Router-Dom importiert wurde. Wenn wir jedoch etwas in einem neuen Tab öffnen möchten, hat das in gewisser Weise nichts mit dem Routing der Client-Site zu tun. In diesem Fall können wir ein einfaches Ankertag verwenden, anstatt die Link-Komponente von React Router dom zu verwenden. Wir können es also einfach entfernen und anstatt Clink zu verwenden, werden wir das Ankertag anzeigen. Ankertag hat die Eigenschaft „ Trog“. Jetzt können wir ein weiteres Attribut des Anker-Tags namens target angeben und den Unterstrich leer angeben. Sobald ich leer als Ziel angebe, erhalte ich diesen Fehler von ES Link, der von React JS x target blank kommt , dass bitte die Beziehung nicht referenziert verwenden. Ich kopiere einfach unspezifiziert. Dies ist nur eine sehr kleine Sicherheitsmaßnahme. Ich speichere es. Versuchen wir es jetzt. Wenn ich auf Mehr lesen klicke, wird meine Show-Seite in einem neuen Tab geöffnet. Ziemlich cool. Da wir uns jedoch darauf geeinigt haben , die Benutzererfahrung etwas komfortabler zu gestalten, werden wir die Schaltfläche „Zurück zur Startseite“ irgendwo oben hinzufügen . Wir gehen zur Komponente „Seite anzeigen“. Hier oben, rechts oben, Hauptdaten anzeigen. Wir können hier zwei Dinge hinzufügen. Wir können entweder eine Link-Komponente hinzufügen , die uns zurück nach Hause bringt, so etwas, zurück nach Hause, und das ist eine völlig gute Lösung. Wir werden diesen tatsächlich benutzen. Aber ich möchte nur, dass du die Alternative dazu siehst. Weil der React-Router eine Routing-Bibliothek ist. Es hat etwas zu bieten. werden wir uns ansehen. Trotzdem können wir die Link-Komponente verwenden. Anstatt vorerst Clink zu verwenden, fügen wir eine Schaltfläche hinzu und sagen : „Geh zurück zur Startseite“. Auf dieser Schaltfläche vom Typ Button schalten wir den On-Click-Handler ein, Go back und das auf Go Back wird etwas für uns tun. Wenn wir zur React-Router-Dokumentation zurückkehren, gibt es dort etwas, das als Use Navigate bezeichnet wird. Verwenden Sie den Navigate-Hook, wenn Sie sich dieses Beispiel ansehen, können wir programmgesteuert zwischen den Seiten navigieren und dabei weiterhin den React-Router dom verwenden. Anstatt die Link-Komponente, sagen wir, deklarativer zu verwenden , verwenden wir eine Funktion die die Navigation grundsätzlich programmgesteuert und imperativer durchführt. dieses Beispiel ansehe, kann ich die Navigation von React Router dom abrufen und verwenden. Eigentlich habe ich schon importiert, also werde ich es einfach so machen. Entschuldigung, benutze keine Parameter, benutze Navigate. Dann rufe ich hier use navigation auf. Diese Verwendung von navigation gibt uns eine Funktion zurück, die wir aufrufen müssen, um zu einer bestimmten Seite zu navigieren. Navigiere zu, ich nenne es so. Wenn wir auf „ Zurück zur Startseite“ klicken , rufen wir navigieren zu auf und geben dann an, wir kehren zur Startseite zurück. Kommen wir zurück zur App. Oben haben wir diesen Button hier. Nochmals, diese Schaltfläche, sie verknüpft keine Komponente, es ist eine Schaltfläche. Wenn wir klicken, kehren wir nach Hause zurück. Falls Sie programmgesteuert navigieren oder Benutzer zu einer Seite umleiten müssen , können Sie den Use Navigate Hook verwenden. Aber in unserem Fall müssen wir die Schaltfläche nicht wirklich programmgesteuert in einen Link verwandeln. Wir können die Link-Komponente direkt verwenden , weil sie tatsächlich sinnvoller ist. Deshalb werden wir nicht navigieren verwenden, das bleibt bei der Link-Komponente. So einfach ist das. Versuchen wir es jetzt und sehen es uns an. Wenn wir in das Markup schauen. Jetzt ist es eigentlich das Ankertag. Cool. Wenn wir darauf klicken, kehren wir immer noch nach Hause zurück. Aber es erfordert , dass wir weniger Code verwenden. Es ist sogar besser, weil es jetzt richtiges Markup macht, richtiges HTML-Markup, um zwischen Seiten zu navigieren, da es ein Ankertag ist. Cool. Jetzt haben wir die Benutzererfahrung nur geringfügig erhöht. Jetzt sieht es viel, viel besser aus. Das war's für heute. Lassen Sie uns die Änderungen übernehmen. Wir haben Go back to home hinzugefügt und wir öffnen die Seite anzeigen in einem neuen Tab. Ich werde es in meiner Commit-Nachricht sagen Schaltfläche „ Öffnen“ oder „Mehr lesen“ den Benutzer jetzt zu einem neuen Tab bringt Link „Zurück zur Startseite“ wurde auf der Show-Seite hinzugefügt. Das war's. Drücken Sie alles, um aufzustehen. Wir sehen uns im nächsten. 78. 22 Einführung in useReducer als Alternative zu useState: Hallo, im letzten Video haben wir nur ein bisschen über die Benutzererfahrung gesprochen. Wenn wir jetzt auf Mehr lesen klicken, wird die Seite in einem neuen Tab angezeigt, und wir haben die Schaltfläche „Zurück zur Startseite“ hinzugefügt . Das ist alles großartig. fehlt uns jedoch die Funktionalität für die Schaltfläche „Star Me“. Immer wenn wir auf diese Schaltfläche klicken, möchten wir diese Show mit einem Stern markieren. Später, wenn wir zur Seite mit den Sternen navigieren, können wir hier unsere Sternenliste sehen. Wie wir das erreichen können. Bevor wir das tun können, müssen wir uns die Alternative ansehen, den Staat zu verwenden. Kommen wir zurück zu unserer Komponente. Sagen wir wahrscheinlich zur Homepage. Hier spielen wir mit dem neuen Haken. Wie Sie bereits wissen, wir den useState-Hook verwenden , wenn wir einen Wert haben möchten , der sich im Laufe des Lebenszyklus der Komponente ändert müssen wir den useState-Hook verwenden , wenn wir einen Wert haben möchten, der sich im Laufe des Lebenszyklus der Komponente ändert. Im Grunde ist es nur ein Wert, der sich ändert. Es gibt uns die Zustandsvariable und die Funktion, mit der wir diesen Zustand aktualisieren können. diese Weise verwalten wir den lokalen Zustand einer Komponente. Es gibt eine Alternative zur Verwendung von state namens useReducer. Es ist eine Alternative, das bedeutet, dass es useState nicht ersetzt, genauso wie useState useReducer nicht ersetzt. Sie können verwenden, was Sie wollen und was auch immer Sie für angemessener halten . Wenn wir useState haben und sagen wir eine eingestellte Filterfunktion haben, die wir aufrufen können um den Status mit useReducer zu leiten, haben wir etwas, das als Aktionen bezeichnet wird. Wir initiieren tatsächlich eine Aktion und dann wird diese Aktion von einer Funktion ausgeführt, und diese Funktion entscheidet, wie der Status auf der Grundlage einer Aktion aktualisiert wird. Wir schauen uns das Beispiel eines Zählers an. Der Hook, über den ich gesprochen habe, ist useReducer. Wir werden in einer Sekunde definieren, was ein Reduzierer ist. Hier oben rufe ich UseReducer an. Dieser useReducer als erstes Argument erhält einen sogenannten Reducer. Darüber hinaus werde ich eine Reducer-Funktion erstellen. Jetzt wird es eine leere Funktion sein und ich werde sie an useReducer übergeben. Als zweites Argument muss ich den Anfangszustand übergeben. Genau wie bei useState ist unser Status standardmäßig Null, weil wir Counter implementieren werden. Wenn wir auf eine Schaltfläche klicken, möchten wir sie entweder erhöhen oder verringern. useReducer gibt uns, genau wie useState, ein Array mit genau zwei Elementen zurück. Wir werden diese beiden Elemente zerstören. Das erste Element wird wieder der Staat sein, genau wie beim useState. Sagen wir Zähler. zweite Element wird ein sogenannter Versand sein. Was muss ich nun tun, um den Status irgendwie zu aktualisieren? Das Reducer-Konzept, also dieser UseReducer-Hook, basiert auf dem Konzept der Reducer. Lass mich Paint öffnen und dir etwas erklären. Visualisieren Sie einfach die UseReducer-Idee. Mit useReducer verfolgen wir einen Ansatz für Aktionen, die von einer einzigen Funktion , dem Reducer, ausgeführt werden. In unserem Bundesstaat finden mehrere Aktionen statt. Im Falle eines Zählers haben wir zum Beispiel Inkrement. Lassen Sie mich es etwas größer machen und dann haben wir eine Dekrementierung. Nehmen wir an, wir haben eine weitere Aktion namens Reset Counter, Reset. Dann werden all diese Aktionen von dieser Dispatch-Funktion an die interne React-Logik gesendet. Dann haben wir eine einzige Funktion namens Reducer, die all diese eingehenden Aktionen abwickelt. Wann immer eine Aktion ausgelöst wird, wird sie von der Reduzierfunktion verarbeitet, und was auch immer die Reduzierfunktion zurückgibt , ist der neue Zustand. Dieser gesamte Ablauf ersetzt den useState-Hook und basiert auf dem Reducer-Konzept. Nun, was ist der Reduzierer? Wie ich bereits erwähnt habe, ist Reducer nur eine Funktion , die diese Aktionen irgendwie abwickelt. Aber was sind diese Aktionen? Das ist der Punkt. Wir müssen die Maßnahmen selbst definieren. Eine Aktion ist in diesem Fall nur ein Objekt, das einige Daten übermittelt. Zum Beispiel können wir eine Aktion definieren, um Daten zu inkrementieren. Wenn wir über Reduktoren sprechen, wenn wir über dieses gesamte Konzept sprechen, wird normalerweise wenn wir über dieses gesamte Konzept sprechen eine Aktion immer ein Objekt sein. Bei dem Typ sagen wir Inkrement und etwas zusätzliche Nutzlast. Es kann alles sein. Es kann ein neuer Wert sein, was auch immer. Dieses Objekt kann jede Form annehmen. Aber normalerweise hat es diesen Typ, diesen Schlüssel und diese Nutzlast, nur um es konsistenter zu machen. Wir müssen diese Maßnahmen selbst definieren. Dann werden sie innerhalb des Reduzierers behandelt. Ich werde hierher gehen. Im JSX-Markup sage ich, Zähler wird Zähler sein, interpellieren Sie den Staat. Dann füge ich hier zwei Buttons hinzu. Eins wird inkrementiert, das zweite wird dekrementiert und das dritte wird zurückgesetzt. Jede Funktion hat diesen onClick und nennen wir diese Handler als onIncrement, dann onDecrement und onReset. Jetzt müssen wir diese Funktionen erstellen. Lass es uns hier oben schaffen. Wir haben onIncrement, dann haben wir onDecrement und wir haben onReset. Es muss etwas passieren. Wir müssen Aktionen ausführen , um den Status irgendwie zu aktualisieren. Wir können den Versand anrufen. Hier müssen wir eine Aktion verabschieden. Wenn zum Beispiel Inkremente vorgenommen werden, lösen wir eine Aktion aus. Auch hier ist eine Aktion nur ein Objekt. Nehmen wir eigentlich diesen. Wir benötigen hier vorerst keine Nutzlast. Wir werden einfach eine Aktion auslösen und es wird ein Objekt vom Typ INCREMENT sein. Wenn wir herabsetzen, wollen wir eine Aktion DEKREMENT auslösen. Wenn wir keinen Reset haben, können wir eine Aktion vom Typ RESET auslösen. Auch dies sind die Objekte , die wir uns selbst für uns definieren. Es wird für uns einfacher sein, sie zu verstehen. Immer wenn dieser Dispatch aufgerufen wird wird diese Aktion von der Reducer-Funktion ausgeführt. Diese Reduzierfunktion muss einen neuen Zustand zurückgeben. Lassen Sie uns vorerst Null zurückgeben. Diese Reduktionsfunktion erhält zwei Argumente. Zuallererst empfängt es CurrentState. Genau wie bei der Status-Update-Funktion mit useState , wenn wir den Callback übergeben. Wir haben Zugriff auf currentState als erstes Argument. Die gleiche Idee steckt hier im Reduzierer. Wir haben CurrentState, nennen wir es CurrentCounter. Das zweite Argument ist die Aktion, die wir ausgelöst haben. Ich werde CurrentCunter und Action protokollieren. Gehen wir zurück. Wir haben so etwas. Lassen Sie uns die Konsole untersuchen. Immer wenn ich auf Increment klicke, sehe ich zwei Dinge, die getröstet werden. Ich sehe, dass CurrentCounter gleich Null ist. Das ist unser aktueller Stand. Wir haben Action. Aktion ist einfach das, was wir übergeben, als wir die Versandfunktion aufgerufen haben Dies ist diese Aktion hier. Basierend auf dem, was wir übergeben, basierend auf dem, was wir versenden, können wir unsere Logik in eine einzige Funktion schreiben. Wenn Sie mit Reduzierern arbeiten, arbeiten Sie normalerweise mit einem Schaltgehäuse. Wir werden action.type wechseln. Falls wir den Typ INCREMENT haben. In diesem Fall geben wir vom Reduzierer CurrentCounter plus 1 zurück. Wir erhöhen den Zähler. Auch hier wird alles, was vom Reduzierer zurückgegeben wird, als neuer Zustand festgelegt. Falls wir ein Dekrement haben, sagen wir CurrentCounter minus 1. Falls wir RESET aufrufen, geben Sie bitte 0 zurück. Falls keine dieser Optionen standardmäßig übereinstimmt, wir 0 zurück. Lass es uns speichern und mal sehen. Wenn ich auf Inkrementieren klicke, wird der Zähler inkrementiert. Wenn ich auf Zurücksetzen klicke, wurde es auf Null zurückgesetzt. Wenn ich dekrementiere, wird es dekrementiert. Wie Sie sehen können, indem diese Reducer-Funktion verwenden und die Aktionen , die wir selbst definiert und dann innerhalb der Registerfunktion behandelt haben. Wir können diese Logik erreichen , um den Staat auf der Grundlage von Aktionen zu verwalten. Und auch dies ist eine Alternative zur Verwendung des useState-Hooks. Verwenden Sie den Reduzierer so, wie Sie den Status angeben, aber mit dem Konzept der Reduzierer und Dispatching-Aktionen, welche Sie verwenden sollten. Das hängt vom Anwendungsfall ab und , was Sie mehr bevorzugen. Am gebräuchlichsten ist die Verwendung von useState, aber nehmen wir an, wenn Ihre Logik zum Aktualisieren des Zustands viele, sagen wir, verschiedene Aktionen beinhaltet , zum Beispiel Increment, Reset, setzt einen bestimmten Wert, sagen wir, Increment um 10, sodass Sie Ihre Logik haben können, den Status basierend auf bestimmten Aktionen zu aktualisieren sodass Sie Ihre Logik haben können, den Status basierend auf bestimmten Aktionen zu aktualisieren, können Sie den useReducer-Hook verwenden. Ich erzähle Ihnen das alles , weil wir für unsere Logik zur Implementierung, Start Shows, unsere Logik zur Implementierung, Start Shows, den User-Reducer-Hook verwenden werden, weil wir ein paar Aktionen wie Start Show und OnStart Show haben werden . Ich habe bereits erwähnt, dass Sie für diese Aktion hier alle Daten übergeben können. Mal sehen, was ich damit meine. Wie ich dir schon sagte, wir haben einen einzigen Ort, an dem wir uns mit Logik befassen, und was auch immer von der Reduzierfunktion zurückgegeben wird von der Reduzierfunktion zurückgegeben , wird als neuer Zustand gesetzt. Warum haben wir hier nicht eine andere Aktion namens SET_VALUE definiert , etwa so. Dann erstelle ich hier einfach einen weiteren Button und sage Set, sagen wir, 500. Dann onClick onSetToValue. Ich werde diese Funktion hier erstellen und Typ SET_VALUE versenden, damit sie vom Reducer verarbeitet werden kann. Ich übergebe den Wert, oder sagen wir NewCounterValue 500. Da wir nun Zugriff auf das Aktionsobjekt innerhalb des Reducers haben und wissen, dass das Aktionsobjekt genau das ist , was wir versenden, können wir sagen, dass action.newCounterValue zurückgegeben wird. Was auch immer wir als newCounterValue übergeben, wird von der Reducer-Funktion zurückgegeben , wird von der Reducer-Funktion und es ist der neue Zustand. Lassen Sie uns versuchen, Increment, Set to 500 zu sehen , es ist 500, ungefähr so. Alle Daten, die Sie hier übergeben, sind in der Reducer-Funktion verfügbar. Das ist es im Grunde. Zu Reducern gibt es vielleicht nichts mehr hinzuzufügen , wenn Sie wahrscheinlich von Redux gehört haben, einer Bibliothek zur Verwaltung des globalen Zustands in React-Apps. Redux basiert auf dem Reducer-Konzept. In einer Redux löst man solche Aktionen aus und wickelt sie dann alle innerhalb von Reducern ab. Cool. Lassen Sie uns das alles loswerden. Hoffentlich war klar, warum useReducer als Alternative zu useState nützlich sein könnte . Eigentlich würde ich vielleicht hinzufügen, dass all diese Aktionen bei Inkrement, bei Dekrement, leicht durch useState Hook ersetzt werden können . Anstatt die gesamte Logik innerhalb des Reducers zu handhaben, können Sie einfach etwas wie setCounter tun, sagen wir CurrentCounter plus 1. Das Gleiche kannst du drinnen nach Belieben tun. Entschuldigung, es wird so sein, CurrentCounter minus 1. Sie würden im Grunde dieselbe Logik schreiben wie in den Reducer. Wenn Sie den UseState Hook verwenden und wenn auf Reset, wäre es nur setCounter zu wissen und es könnte einfacher sein. Das hängt davon ab. Deshalb wird es als Alternative bezeichnet. Es liegt an Ihnen, was auch immer Ihren Bedürfnissen entspricht. Jetzt, wo wir UseReducer kennen, können wir es tatsächlich verwenden, um unsere Logik zum Starten von Shows zu implementieren . Cool. Wir sehen uns im nächsten. 79. 23 Starred zeigt p1: Hallo, da. Im letzten Video haben wir über useReducer als Alternative zum useState-Hook gesprochen. Es kann verwendet werden, um den Status zu verwalten wenn mehrere Aktionen definiert sind und wir den Status anhand einiger Aktionen aktualisieren möchten . Wir werden UseReducer verwenden, um unsere Logik für das Studium von Sendungen zu implementieren . Lass uns gehen. Zuallererst, wie werden wir mit der Logik umgehen , die hinter den Starserien steckt? Immer wenn wir auf die Schaltfläche „Start Me“ klicken , fügen wir dem Array die ID anzeigen hinzu, die unser Status sein wird. Der Status der Startshows wird nur aus einer Reihe von Show-IDs bestehen. Wenn wir auf eine Show klicken, wird die ID zum Array hinzugefügt. Wenn wir zweimal darauf klicken, wird es aus diesem Array entfernt. Wenn wir dann zur Startseite gehen, nehmen wir das mit einem Stern versehene Show-Array und verwenden es dann , um Daten von der TV Maze API abzufragen. Ziemlich einfach. Die Frage ist, wo werden wir diese Logik schreiben? Wir haben eine Home-Komponente. In der gesamten Komponente, die entweder das Raster oder das tatsächliche Raster angezeigt wird , basierend auf den uns vorliegenden Daten. Wir werden die Logik vorerst in Show Grid schreiben und später werden wir diese Logik in eine andere Datei extrahieren . Es wird einfacher sein , in anderen Komponenten darauf zuzugreifen, zum Beispiel in der Startkomponente, da unsere Logik irgendwann von mehreren Dateien gemeinsam genutzt wird . Wir fangen einfach an. In Show Grid werde ich useReducer aus React importieren. Dann rufe ich Sie vorerst mit einem, sagen wir, Star-Show-Reducer an, den wir in einer Sekunde erstellen werden. Unser Anfangszustand wird ein leeres Array sein. useReducer gibt als Array aus zwei Elementen zurück, wobei das erste Element der Zustand selbst sein wird , also mit einem Stern markiert, und dann die Dispatch-Funktion, sagen wir, Versandstart. Jetzt müssen wir den Show-Reducer mit Sternen erstellen, eine Funktion, die sowohl die Logik zur Aktualisierung des Status als auch die Definition von Aktionen übernimmt. Wir werden hier im Grunde nur zwei Aktionen haben. Zur Starshow und zur Unstar-Show. Definieren wir sie. Immer wenn wir auf Star Me klicken, wir eine Aktion vom Typ Stern mich oder sagen wir einfach Stern, und die Daten, die weitergegeben werden, werden ID anzeigen. Die zweite Aktion wird unstar sein. Auch hier geben wir den Ausweis an den Reduzierer weiter. Innerhalb des Reduzierers ist das erste Argument unser aktueller Status. Nennen wir es als aktuellen Start. Das zweite Argument wird ein Objekt sein, die Aktion, die ausgelöst wird. Dann schreiben wir hier, indem wir erneut den Switch-Fall verwenden, die Logik für die Ausführung Aktionen, die ausgeführt werden. Wir schreiben Logik auf der Grundlage des Aktionstyps. Wir wechseln den Aktionstyp. Falls wir einen Stern haben, geben Sie in diesem Fall bitte die aktuelle Starred.concat-Aktion showId zurück. Unabhängig von der Show-ID , die wir durchführen, fügen Sie diesen Wert bitte zu unserem aktuellen Sternen-Array hinzu. zweite Aktion wird auf Star sein , um die wir uns kümmern werden. In diesem Fall müssen wir diese Show-ID aus unserem aktuellen State-Array entfernen . Wir können die Punktfiltermethode verwenden, die für das Array verfügbar ist. Für Elemente erwartet die Filtermethode also zunächst einen Callback, in dem wir die Logik schreiben , um Elemente innerhalb des Arrays zu filtern. Diese Punktfiltermethode genau wie die Dark Map erhält genau wie die Dark Map genau die gleichen Argumente. erste Element ist der Wert, das aktuelle Element, das wir in einer Schleife überfahren , dann der Index dieses Elements und die Referenz auf das Array selbst. Wir benötigen nur den Wert, der die Show-ID sein wird. Was auch immer dieser Punktfilter zurückgibt, es kann entweder wahr oder falsch sein. Wenn dieser Callback für dieses Element den Wert true zurückgibt, bleibt dieses Element innerhalb dieses Arrays. Wenn der Callback für das Element, das wir in einer Schleife überfahren, den Wert false zurückgibt, wird es nicht in das endgültige Array aufgenommen. Wir werden nur sagen, ob show ID nicht gleich action show ID ist. Mit dieser Logik können wir alle Elemente herausfiltern , die diese Bedingung nicht erfüllen. Wenn wir in diesem Fall etwas Unbekanntes weitergeben, geben Sie bitte standardmäßig dasselbe Muster mit einem Stern zurück. Lassen Sie uns hier eine Funktion erstellen , die die Logik verarbeitet , wenn wir auf die Schaltfläche „Star Me“ klicken. Wir sagen Const auf Stern, ich klicke. In dieser Funktion werden wir die Logik schreiben. Zuallererst wird, wenn Sie mich anklicken, eine Funktion , die die Show-ID als Argument erhält. Dies ist Show ID, die entsprechende Show ID mit der Schaltfläche, Star Me“. Es bezieht sich auf die Show-ID , auf die wir im Grunde klicken. Dann müssen wir hier drinnen herausfinden, ob die Show bereits in den Hauptrollen aufgeführt ist. Wenn Show ohne Sterne ist, wir die Startaktion, andernfalls wir die UnStar-Aktion. Wir können eine Variable namens starred erstellen und fragen einfach ob starred shows array die Show-ID enthält, auf die wir geklickt haben. Wenn diese Sendung mit einem Stern versehen ist, werden wir sie mit einem Stern versenden. Die Aktion wird vom Typ OnStar sein, und Show-ID , wir müssen die Show-ID hier übergeben, wird das sein, was wir OnStar nennen, ich klickbreite. Andernfalls rufen wir Dispatch Starred vom Typ Star an Jetzt müssen wir das irgendwie onStarmeClick verwenden. Nun, wir können diese Funktion in ShowCard verwenden. Wir können, sagen wir, ein Argument übergeben, eine Requisite namens onStarClick übergeben und wir können das Verzeichnis onStarmeClick hier so übergeben, oder sagen wir , onStartMeClick wird onStarmeClick sein. In ShowCard schnappen wir uns die OnStarmeClick-Sonde, die wir jetzt bestehen. Sie können sehen, dass dieser onStarmeClick mit dem Argument showId aufgerufen wird, was bedeutet, dass wir immer, wenn wir onStarmeClick aufrufen, showId übergeben müssen. Auf dieser Schaltfläche hier, onStarMe, teilen wir onClick mit, bitte rufen Sie onStartMeClick an und geben Sie die ID der Sendung weiter. Cool. Jetzt haben wir den kompletten Ablauf, lasst uns versuchen, Log StarredShows abzubrechen , um zu sehen was genau wir in unserem Bundesstaat haben. Inzwischen ist es zunächst ein leeres Array, das haben wir festgelegt. Wenn ich auf StarMe klicke, sehe ich jetzt, dass showID zu diesem Status hinzugefügt wurde. Ziemlich cool. Versuchen wir, eine weitere hinzuzufügen. Wir können jetzt sehen, dass wir drei Elemente haben. Wenn ich zweimal auf dieselbe Sendung klicke, wird sie aus dem staatlichen Tarif entfernt. Unsere Kernlogik, Unstar-Shows zu starten, funktioniert einwandfrei. Da sich dieser Hook jedoch innerhalb der ShowGrid-Komponente befindet, immer dann, wenn wir zu Start und dann, sagen wir, zurück zu Home navigieren dann, wenn wir zu Start und dann, sagen wir, zurück zu Home wird unser Zustand immer dann, wenn wir zu Start und dann, sagen wir, zurück zu Home navigieren, wieder auf den Anfangszustand , weil dieser Zustand für diese Komponente lokal ist Wenn die Komponente ausgemountet wird, ist der Zustand weg. Wir müssen darüber nachdenken, wie wir diese Daten tatsächlich dauerhaft speichern können. Das können wir tun, indem wir beispielsweise StarredShows im Browserspeicher speichern, StarredShows im Browserspeicher speichern damit wir es später abrufen können. Das wird etwas fortgeschritten sein, denn das Erste, was mir in den Sinn kommt, wenn wir den Status zwischen mehreren Seiten, zwischen mehreren Komponenten teilen müssen , können wir diesen Status erhöhen, sagen wir irgendwo auf App. Wenn wir unseren Staat hier verwalten lassen, kann dieser Staat als Requisite an, sagen wir, Kinderkomponenten weitergegeben werden, um kann dieser Staat als Requisite an, sagen wir, Kinderkomponenten weitergegeben werden, um die Hauptrolle zu spielen und nach Hause zu bringen. Aber in diesem Fall heben wir alles nach oben, sodass jeder, sodass jeder, unsere Stammkomponente, etwas über diesen Zustand weiß. Das ist nicht schlecht und dies ist eine ziemlich standardmäßige Methode, um den Share-Status zwischen Komponenten in React zu verwalten. Aber wir werden eine Alternative dazu vorstellen. Warum machen wir das auf diese Weise und heben die Komponente State to App nicht an? Denn selbst wenn wir den Status zwischen Seiten innerhalb der App teilen, beim Aktualisieren der Seite dieser Status beim Aktualisieren der Seite weg. Aber das wollen wir nicht tun. Stattdessen wollen wir den Status irgendwie beibehalten, sodass unsere StarredShows immer noch da sind, wenn wir die Seite aktualisieren . Selbst wenn wir den Browser schließen oder vielleicht diesen Tab schließen, werden unsere StarredShows nicht verschwinden. Was wir in diesem Fall tun werden, wir können einen sogenannten Browserspeicher verwenden. Wir können speziell lokalen Speicher oder Sitzungsspeicher verwenden. Dies ist wie eine kleine Datenbank , die sich im Browser befindet, und Sie können sie verwenden, um temporäre Daten im Browser zu speichern . Es ist eine Datenbank vom Typ Schlüsselwert, was bedeutet, dass Sie unter einem bestimmten Schlüssel einen bestimmten Wert speichern können, und wenn Sie die Seite aktualisieren oder sagen wir, den Browser schließen und zu dieser Seite zurückkehren, für diese bestimmte URL, für diese bestimmte Website, ist dieser Speicher persistent. Die Werte sind immer noch da, es sei denn, sie werden von der Anwendung selbst oder manuell von Ihnen, vom Benutzer, bereinigt . Wir werden unsere Startseite im lokalen Speicher speichern. Lassen Sie uns weitermachen und darüber nachdenken, wie wir das machen können. Wir müssen uns überlegen, wie wir den Status, den wir in unserer App haben, in den lokalen Speicher schreiben können den Status, den wir in unserer App haben, in den lokalen Speicher schreiben . Wir müssen es synchronisieren, denn wann immer wir diesen Status ändern, möchten wir es auch im lokalen Speicher speichern, in der Datenbank speichern, und wenn wir dann die Seite aktualisieren, möchten wir die Daten aus diesem Speicher abrufen und sie dann in unserer App verwenden. Damit können wir beispielsweise zusätzliche Logik zusätzlich zu useReducer schreiben . Dafür können wir zusätzlich zu useReducer einen benutzerdefinierten Hook mit zusätzlicher Logik erstellen, der useReducer einen benutzerdefinierten Hook mit zusätzlicher Logik erstellen, Status im lokalen Speicher beibehält. Das ist etwas fortgeschritten, aber das ist, sagen wir, nicht verwirrend. Lass uns weitermachen und versuchen, das zu tun. Wir haben bereits den useReducer-Hook und wollen die Logik schreiben, die alles genauso macht wie useReducer, aber auch den Status mit dem lokalen Speicher synchronisiert. Wir können vielleicht einen benutzerdefinierten Hook namens usePersistedReducer erstellen. Lassen Sie uns weitermachen und diesen benutzerdefinierten Hook oben drauf machen, wir werden ihn usePersistedReducer nennen. Wir wollen die API des eingebauten Hooks beibehalten, was bedeutet, dass wir genau dieselben Argumente verwenden wollen, wir wollen genau dieselben Elemente zurückgeben, sodass alles so ziemlich gleich ist. Lass uns weitermachen und versuchen, das zu tun. In usePersistedReducer werden wir useReducer verwenden. Da dieser Hook, sagen wir, wiederverwendbar sein wird , wollen wir die Logik hier nicht, sagen wir, eng an StarredShows koppeln , es wird etwas, sagen wir, abstraktes und wiederverwendbares sein, um mehrere Anwendungsfälle zu behandeln. Wir werden diesen Patch einfach Dispatch nennen und statt StarredShows werden wir ihn einfach State nennen. Dann müssen wir in diesem useReducer den Reducer übergeben, da wir die API von usePersistedReducer beibehalten werden. Wir werden es tatsächlich wie useReducer, usePersistedReducer verwenden , wir werden, sagen wir, einen Reducer übergeben , dann wollen wir den Anfangsschlüssel übergeben und dann wollen wir auch den lokalen Speicherschlüssel übergeben, und dann wollen wir auch den lokalen Speicherschlüssel übergeben den lokalen Speicherschlüssel unter dem die Werte hier gespeichert werden. Da wir nun drei Argumente übergeben müssen, müssen wir sie in usePersistedReducer empfangen, also erhalten wir Reducer, erhalten initialState und wir erhalten LocalStorageKey. Wir gehen zu UseReducer über. Den Reducer übergeben wir initialState und wir übergeben etwas namens Initializer. Was ist das? Beim Aktualisieren der Seite wollten wir Daten aus dem lokalen Speicher abrufen und als Ausgangszustand verwenden. Wir möchten diese Logik nur einmal ausführen , wenn die Komponente gemountet wird, damit wir die Initialisierungsfunktion verwenden können. Es ist das dritte Argument , das nur einmal ausgeführt wird , um initialState zu initialisieren. Dieser Initialisierer erhält ein Argument, initialState. Im Grunde wird alles, was wir hier übergeben, als Argument im Initialisierer verfügbar sein . Dies geschieht in diesem Fall, wenn der Initialisierer irgendwo außerhalb als separate Funktion erstellt wird. In diesem Fall werden wir das nicht tun, wir werden den Initialisierer einfach direkt hier einbinden, was ihn initial nennt. Dieses erste Argument wird im Grunde nur der Anfangszustand sein , den wir hier übergeben. Jetzt wird die Logik wie folgt aussehen. Zuerst müssen wir überprüfen, ob wir bereits Daten im lokalen Speicher haben. Lokaler Speicher ist auf dem Fensterobjekt verfügbar, es ist, sagen wir, eine globale Variable was bedeutet, dass wir einfach den lokalen Speicher starten können und dann zack, es funktioniert einfach. Hier werden wir PersistedValue fragen. Wenn der lokale Speicher GetItem unter einem bestimmten Schlüssel erhält, müssen wir zuerst verstehen, ob dieser Wert innerhalb der Layerbasis existiert oder nicht. Lassen Sie uns vielleicht ein bisschen mit localStorage spielen , damit Sie sich ein Bild machen können. LocalStorage können wir unter bestimmten Schlüsselinformationen setItem setzen. Sagen wir, unter Key Low kann ich Wert hoch sagen. Ich führe diese Logik aus und gehe zurück zu localStorage. Hier, nur für den Fall, dass ich es aktualisiere, können Sie sehen, dass ich unter Key Low jetzt Wert High habe. Ich kann hier beliebig viele Werte speichern, ich kann sie umschreiben. Da dieser Wert nun im Speicher des Browsers gespeichert ist, kann ich einfach getItem aufrufen und dann den Schlüssel angeben , unter dem ich meinen Wert erhalten wollte. Ich gebe getItem niedrig an, ich habe meinen Wert hoch erhalten. Die Sache mit localStorage ist, dass es nur mit Zeichenketten arbeiten kann . In unserem Fall ist der Zustand, mit dem wir arbeiten, ein Array, was bedeutet, dass ist der Zustand, mit dem wir arbeiten, ein Array, was bedeutet wir, wenn wir in LocalStorage schreiben , unser Array in eine Zeichenfolge umwandeln und wenn wir dieses aus dem lokalen Speicher abrufen, müssen wir es erneut von einer Zeichenfolge in ein Array konvertieren. Wie wir das machen können. Zunächst erhalten wir von LocalStorage Item unter LocalStorageKey. Unser persistenter Wert wird entweder Null oder eine Zeichenfolge sein. Null, falls dieser Wert nicht im lokalen Speicher existiert, andernfalls wird es immer eine Zeichenfolge sein, da localStorage wiederum nur mit Zeichenketten funktioniert. Hier wird alles, was wir vom Initialisierer zurückgeben als endgültiger Anfangszustand festgelegt. Was auch immer wir hier angeben dient als Argument für den Initialisierer und dann entscheidet der Initialisierer was der endgültige InitialState sein wird. Wenn wir diesen Initialisierer nicht hatten, können wir einfach initialState übergeben und es wird funktionieren. Aber wenn wir mit dem Initialisierer gearbeitet haben und wir mit dem Initialisierer arbeiten , weil wir mit localStorage gearbeitet haben, fügen wir all diese Logik hinzu. Hier werden wir fragen, ob der persistente Wert wahr ist. In diesem Fall wenden Sie bitte die Methode JSON.parse an. Was ist JSON.parse? Wir haben eine Reihe von, sagen wir, Elementen 1, 2. Wir konvertieren es in eine Zeichenfolge, indem die Methode JSON.stringify verwenden. Jetzt wurde unser Array in eine Zeichenfolge umgewandelt und wenn wir sie von localStorage abrufen, ist dieser persistente Wert diese Zeichenfolge. Jetzt müssen wir diese Zeichenfolge zurück in ein Objekt konvertieren , zurück in ein Array. Wir können JSON.parse anstelle von JSON.stringify verwenden, um unseren Wert von localStorage zu deserialisieren , und wir können sehen, dass wir unerwartet und nicht weiß haben. Da dies bereits ein Objekt ist, muss es eine Zeichenfolge sein. Nehmen wir an, wir übergeben eine Zeichenfolge, die dieses Array ist , und wir haben immer noch dieses Problem; es ist kein gültiges JSON. Was ist los? Wahrscheinlich möchte es, dass ich das benutze. Lass uns sehen. Jetzt übergebe ich die gültige Zeichenfolge und Sie können sehen dass sie die Zeichenfolge zurück in das Array analysiert hat. Jetzt hat diese Datenstruktur den Typ eines Arrays, nicht nur eine Zeichenfolge. Hoffentlich macht es Sinn. Hier analysieren wir PersistedValue, andernfalls, wenn persistedValue null ist, wenn der Wert nicht existiert, verwenden Sie bitte den Anfangswert , der der InitialState sein wird. Jetzt sind wir endlich mit der Logik fertig, um den Status zu initialisieren , wenn die Seite aktualisiert wird oder wir zur Seite zurückkehren. Cool. Jetzt müssen wir irgendwie auch Zustandsupdates innerhalb des usePersistedReducer-Hooks synchronisieren , an dem wir gearbeitet haben. Wir können UserEffect verwenden, weil Sie sich erinnern, dass UserEffect es uns ermöglicht, uns in den Lebenszyklus von Komponenten einzubinden und Logik auszuführen, wenn sich etwas ändert. Ich importiere UserEffect und rufe von hier aus userEffect auf und übergebe das Abhängigkeitsarray , in dem ich angeben werde. Wenn sich unser Status ebenso ändert wie unser Schlüssel; localStorageKey, führen Sie in diesem Fall bitte diesen Callback aus. Auch hier gilt: Wenn sich der Status ändert oder wenn sich LocalStorageKey ändert, rufen wir diese Funktion auf. Diese Funktion synchronisiert den Status mit localStorage, also teilen wir localStorage.set mit. Der Elementschlüssel ist localStorageKey und der Wert ist state. Wir müssen es jedoch in eine Zeichenfolge umwandeln, bevor wir in LocalStorage schreiben können. Wir werden JSON.stringify state aufrufen. Am Ende dieses Hooks möchten wir, dass er ein Array mit genau zwei Elementen zurückgibt , sodass unser Hook usePersisted Reducer dem ursprünglichen useReducer-Hook ähnelt. Wir werden es sagen [unverständlich]. Geben Sie diese Pakete an und geben Sie sie zurück und das war's. Das wird unser letzter Haken sein. Es ist im Grunde nur eine zusätzliche Logik zusätzlich zum integrierten UseReducer , der den Status mit localStorage synchronisiert . Wie ich dir schon sagte, es ist ein bisschen fortgeschritten, aber wenn du es dir ansiehst, ist es hier eigentlich nicht kompliziert. Anstatt useReducer zu verwenden, rufen wir hier in ShowGrid usePersistedReducer auf und als Schlüssel als drittes Argument sagen wir starredShows. Versuchen wir es jetzt und sehen es uns an. Wenn wir zur App zurückkehren, öffnen wir den lokalen Speicher der Anwendung. Lass es uns vorerst aufräumen, lass uns nach Sendungen suchen. Sie können sehen, sobald die Komponente auf der Seite gemountet ist, dieser usePersistedReducer-Hook ausgeführt, der Zustand ist initialisiert, da sich unser Status ändert und useEffect mindestens einmal ausgeführt wird. Es hat hier bereits begonnen , den Status mit localStorage zu synchronisieren . Unter Key Start Shows platzieren wir unser leeres Array, unseren InitialState. Wenn ich versuche, etwas Boom zu starten, ist Show hier Edit. Es ist synchronisiert. Wenn ich zu etwas anderem auf „Star me“ klicke, wurde es immer mit localStorage synchronisiert , was bedeutet, dass es funktioniert hat. Fantastisch. Im Moment denke ich, dass das gut sein wird, denn nun, ich denke, das reicht vorerst. Im nächsten Video werden wir darüber sprechen, wie wir mit dieser Logik vorgehen können, sodass wir tatsächlich irgendwie anzeigen können , ob diese Sendung mit den Hauptrollen spielt oder nicht. Teilen Sie dem Benutzer irgendwie visuell , dass diese Show bereits gestartet ist, und dann werden wir wahrscheinlich all die Daten auf der mit den Sternen markierten Seite abrufen . Lassen Sie uns vorerst das festlegen; was wir bereits haben, damit wir die Änderungen nicht verlieren. Hier werde ich sagen, eine anfängliche Logik hinzugefügt, um Sendungen mit UseReducer zu starten. UsePersistedReducer wurde erstellt , um den Status mit localStorage zu synchronisieren. Im nächsten Video werden wir damit fortfahren . Wir sehen uns dort. 80. 24 Starred Shows p2: Hallo zusammen. Im letzten Video haben wir begonnen, an den Funktionen zu arbeiten, die mit Sternen gekennzeichnet sind. Wir haben einen benutzerdefinierten Hook-Use Persisted Reducer erstellt , der unseren StarredShows-Status mit dem lokalen Speicher synchronisiert hat, sodass wir bei jeder Aktualisierung den Status aus dem lokalen Speicher neu initialisieren können. Ich habe es im vorherigen Video nicht gezeigt, aber wenn wir versuchen, StarredShows abzusagen , wenn ich die Seite aktualisiere, lass mich zur Startseite zurückkehren. Wenn ich die Seite aktualisiere und wenn die Komponente gemountet wird, wird unser Anfangszustand aus dem lokalen Speicher abgerufen, was auch immer wir hier haben. Wenn wir es bereinigen, wenn wir alles aus dem lokalen Speicher entfernen, die Seite aktualisieren und nach Sendungen suchen, ist unser Standardstatus ein leeres Array. Cool. Jetzt müssen wir uns überlegen, wie wir diesen Hook tatsächlich, sagen wir, auf mehreren Seiten, auf Home und Start wiederverwenden können. Aber zuerst teilen wir dem Benutzer mit, ob diese Show gestartet ist oder nicht. Wir kehren hier zu ShowGrid zurück und zur ShowCard, wir können eine weitere Requisite namens isStarred weitergeben. Das ist Starred wird ziemlich einfach sein, wir werden nur fragen, ob StarredShows. Staat, den wir haben, enthält diese Daten, zeigt die ID. Das ist also isStarred ein boolescher Wert, der angibt, ob diese Show bereits im StarredShows-Array vorhanden ist . Dann schnappen wir uns in ShowCard einfach IsStarred als Requisite. Vorerst werden wir nur fragen, ob diese Sendung bereits in den Hauptrollen aufgeführt ist, bitte auf Star me anzeigen, oder einfach Unstar me oder Star me. Lass es uns versuchen und sehen. Immer wenn ich hier klicke, wird es zu Unstar me. Wenn wir auf „Hallo morgen“ klicken, ist es immer noch Unstar me. Wenn ich jetzt die Seite aktualisiere, suche ich erneut nach Hallo. Wenn ich scrolle, können Sie sehen, dass die Werte beibehalten werden. Selbst wenn ich meinen Browser schließe, diesen Tab schließe und wieder zu dieser Seite zu den spezifischen Sendungen zurückkehre, wird immer noch Unstar me angezeigt, da wir den Status erneut mit dem lokalen Speicher synchronisiert haben. Cool. Lassen Sie uns nun fortfahren und die Logik, die wir hier geschrieben haben aus ShowGrid in eine separate Datei extrahieren, damit wir später dieselbe Logik auf der Startseite wiederverwenden können . Lass uns gehen. Wahrscheinlich im Quellcode oder vielleicht erstellen wir einen neuen Ordner namens library, kurz lib. Hier erstellen wir eine Datei namens UseStarredShows. In diese Datei werde ich all die Logik einfügen, die sich auf Hooks bezieht, die wir zuvor geschrieben haben. Das ist usePersistedReducer, das ist StarredShowsReducer, das ist dieser usePersistedReducer-Aufruf und der Import von useReducer und useEffect. Wenn wir also, sagen wir, genau den gleichen Hook in einer anderen Komponente verwenden wollen, sagen wir innerhalb von Seiten, die mit einem Stern markiert sind, würden wir ihn einfach so kopieren. Wir müssen usePersistedReducer erneut aufrufen, wir müssen StarredShowsReducer erneut übergeben, denselben Schlüssel angeben, aber wir können noch einen Schritt weiter gehen, wir können darüber einen weiteren benutzerdefinierten Hook erstellen und sagen wir, die Logik dort verstecken. In useStarredShows erstellen wir einen neuen Hook namens useStarredShows und diesen Hook nennen wir usePersistedReducer und anstatt nur Zerstörungswerte hier, wir den Wert zurück , den usePersistedReducer hier zurückgibt. Hier werden wir wahrscheinlich nichts weitergeben, weil wir, sagen wir, die Logik direkt hinter diesem Hook verbergen wollen , also können wir innerhalb unserer Komponente einfach useStarredShows aufrufen und es tatsächlich speichern, dann aus useStarredShows exportieren und dann aus der Bibliothek useStarredShows importieren und useStarredShows sein und der Hook wird useStarredShows sein. Wir nennen es und wir bekommen einfach StarredShows und wir bekommen einfach DispatchStarred. Sie können sehen, dass es jetzt viel, viel sauberer aussieht als zuvor. Jetzt ist es auch wiederverwendbar, was bedeutet, dass wir innerhalb der mit Sternen versehenen Komponente genau dasselbe tun können. Wir können einfach useStarredShows wir innerhalb der mit Sternen versehenen Komponente genau dasselbe tun können aufrufen und dieselben Daten löschen. Lass uns das machen. In starred werde ich useStarredShows importieren und hier werden wir wahrscheinlich dispatchStarred nicht benötigen, wir werden die Dispatch-Funktion nicht benötigen, also werden wir sie nicht destrukturieren, wir werden nur das erste Element nehmen, die StarredShows. Nun, hier können wir die Logik zur Gutschrift der Daten schreiben, das werden wir im nächsten Video tun. Moment gehen wir wahrscheinlich zu Starred page, starred, starredshows.length , wo die Anzahl der Serien angezeigt wird, in denen wir bisher die Hauptrolle gespielt haben. Lassen Sie uns versuchen zu sehen , ob es funktioniert hat. Wenn wir zur Startseite gehen, können wir sehen, dass zwei Sendungen mit einem Stern markiert sind. Dies ist das, was wir in unserem Status sehen, im lokalen Speicher gespeichert wird. Wenn wir versuchen, den lokalen Speicher zu bereinigen und wenn wir die Seite aktualisieren, wird Sternchen Null sein , weil wir alles entfernt haben, der Status wurde neu initialisiert, so etwas in der Art. Lassen Sie uns vorerst einfach alles verpflichten, was wir hier getan haben. Wir haben die Hook-Logik in eine separate Datei extrahiert , in der wir zusätzlich zu unserem usePersistedReducer speziell für StarredShows einen weiteren benutzerdefinierten Hook erstellt der wir zusätzlich zu unserem usePersistedReducer speziell für und ihn useStarredShows genannt haben. Dann verwenden wir diese benutzerdefinierte, mit Sternchen versehene Komponente, um vorerst die Gesamtzahl der von uns hinzugefügten Shows anzuzeigen , und wir verwenden diesen Hook innerhalb von ShowGrid, useStarredShows sowie dem visuell benachrichtigten Benutzer, indem Star me- oder Unstar me-Texte basierend auf der Show-ID anzeigen, unabhängig davon, ob sie sich innerhalb des State-Arrays befindet oder nicht. Eigentlich schien es viel zu sein. Es war jedoch nicht so viel, oder? Also füge ich alles zur Bühne hinzu und sage erstellten useStarredShows, benutzerdefinierter Hook hat die gesamte Hook-Logik platziert oder sagen wir useStarredShows-Hook-Logik in einer separaten Datei platziert. Teilen Sie dem Benutzer mit, ob die Sendung angestarrt wird oder nicht. Teilen Sie dem Benutzer mit, ob die Sendung angestarrt ist oder nicht. Das war's. Lass uns zu GitHub wechseln und wir sehen uns im nächsten. Im nächsten Video werden wir all diese Shows abrufen, die wir innerhalb der Startkomponente Zugriff haben. Jetzt werden wir sie von der TV Makes API abrufen und sie endlich anzeigen. Wir sehen uns. 81. 25 Starred Shows p3: Hallo zusammen. In diesem Video werden wir endlich die Seite mit den Stars der Sendung fertigstellen. Im vorherigen Video haben wir einen benutzerdefinierten Hook namens User Starred Shows erstellt . Dabei handelt es sich um einen Hook zusätzlich zu Use Persisted Reducer, der ebenfalls ein benutzerdefinierter Hook zusätzlich zum Use Reducer ist ebenfalls ein benutzerdefinierter Hook zusätzlich zum Use Reducer jedoch mit zusätzlicher Logik, die den Status mit dem lokalen Speicher synchronisiert. In diesem Video nehmen wir die mit Sternchen markierten Sendungen, in denen wir eine mit Sternen versehene Komponente haben , und rufen sie dann von der TVMaze API ab. Zuallererst haben wir eine Reihe von Show-IDs. Wenn wir in die TVMaze-Dokumentation schauen , haben wir keinen Endpunkt. Versuche danach zu suchen, wo wir mehrere Sendungen gleichzeitig aufnehmen können . In unserem Fall werden wir also mehrere Anfragen an die API senden. Gehen wir zur markierten Komponente. Hier würden wir standardmäßig use effect verwenden, würden wir standardmäßig use effect verwenden um Daten nur dann von der API abzurufen, wenn die Komponente gemountet wird. Da wir jedoch die Datenabrufbibliothek verwenden, verwenden wir Query, können wir sie verwenden, um Daten abzurufen . Lassen Sie mich das von der Home-Komponente kopieren, ich gehe hier hin, drinnen importiere ich die Benutzerabfrage aus der React-Abfragebibliothek. Jetzt wird unser Abfrageschlüssel mit einem Stern markiert und wir übergeben die Reihe der Sternchen versehenen Sendungen, die wir als Abfrageschlüssel haben. Dann müssen wir innerhalb der Abfragefunktion alle unsere Shows abrufen. Wie können wir das machen? Der erste und naive Ansatz ist, dass wir tatsächlich den einfachen For-Loop verwenden können, dann wiederholen wir jede Sendung, die wir innerhalb des mit Sternchen versehenen Show-Arrays haben , wir nehmen jede Show-ID und senden dann die Anfrage. Sie können jedoch sehen, dass all diese Anfragen, die wir senden können, sagen wir, wir haben zwei Ausstellungs-IDs innerhalb des Bundesstaates und wir werden zwei Anfragen senden. Wenn wir jedes Element in einer Schleife durchlaufen können wird die erste Anfrage gesendet, erst wenn sie fertig ist , wird die zweite Anfrage gesendet. Das ist nicht effizient, da die Anfragen, die wir für Shows senden werden, nicht voneinander abhängig sind. Wir wollen, dass das so schnell wie möglich geschieht. Deshalb müssen wir mehrere Anfragen gleichzeitig senden . Um dieses Verhalten zu erreichen, verwenden wir promise.all. Lass mich dir zeigen, was ich meine. In der Abfragefunktion werden wir die folgende Logik schreiben. Bevor ich das mache, entfernen wir Option aktiviert und wir werden den Windows Focus erneut abrufen. Hier wird die Logik wie folgt aussehen. Lass es nur eine Funktion und eine Sync-Funktion sein. Hier werden wir zuerst unsere kartografieren, wo ist sie? API TV-Labyrinth. Diese Funktion „Get Show by ID“. Wir werden die Funktion , die das Versprechen zurückgibt, einem Array zuordnen. Klingt schon kompliziert, aber lassen Sie mich Ihnen zeigen, was ich meine. Was wir hier machen werden. Wir sagen, sagen wir, API-Anforderungsversprechen. Wir werden starredshows.map machen. Wir werden die Show-ID der API zuordnen , um eine solche Anzeige nach ID zu erhalten. Wir geben hier die Show-ID an. Mit diesem Ansatz werden wir am Ende eine Reihe von Versprechungen erhalten. Weil wir jede Show-ID so zuordnen , dass sie nach ID angezeigt wird, was ein Versprechen zurückgibt. Am Ende erhalten wir eine Reihe von Versprechungen. Um eine Reihe von Versprechen zu handhaben und sicherzustellen , dass diese Anfragen, sagen wir, parallel zur gleichen Zeit bearbeitet werden , können wir die Methode promise.all verwenden. Wir werden es Await Promise.all sagen. Wir können tatsächlich, weißt du was, all diese Logik von hier in eine wiederverwendbare Funktion in TVMaze.gs verschieben . Wir werden die Shows dieses Mal nur anhand der Ausweise mitteilen und wir werden die Ausstellungsausweise hier erhalten. Anstatt einfach API Get Here zu machen, werden wir diese Funktion in eine Synchronisierungsfunktion verwandeln und die Logik, die wir hier geschrieben haben, in get show by IDs einfügen. Wir werden jede Show-ID einem Versprechen zuordnen, dann innerhalb von promise.all, und wir sehen bereits, dass das Versprechen nicht definiert ist und eigentlich von ES Lint stammt. Nun, das ist interessant. Ich nehme an, das liegt daran, dass wir innerhalb von ES Lint RC ES Lint anweisen müssen , zu verstehen, dass wir die neueste JavaScript-Syntax verwenden , die moderne, also werden wir sagen ES6 wahr sein wird. ES6 bedeutet ECMAScript Version 6 und höher. Nun, ich denke, wir haben keine Fehler, das stimmt. Um promise.all zu versprechen, geben wir API-Anforderungsversprechen oder nennen wir es einfach Versprechen, um es einfacher zu machen. Was promise.all macht, ist, dass es eine Reihe von Versprechen parallel löst, und sie werden alle auf einmal gelöst und parallel bearbeitet. Unter der Haube sieht es so aus, als ob Versprechen 1, Versprechen 2, Versprechen 3 zu versprechen. Alles wieder, eine Reihe von Versprechungen. Promise.all löst sie alle auf einmal. Dann ergibt promise.all ein Array aufgelöster Werte. Wenn wir eine Reihe von Versprechungen haben, sagen wir, Versprechen 1, Versprechen 2, Versprechen.all löst sie alle auf einmal. Promise.all gibt ein Array aufgelöster Werte zurück. Wenn sich Versprechen 1 beispielsweise auf den Wert 1 auflöst, würden wir ein Array mit einem, sagen wir, aufgelösten Wert 1 erhalten . Sie haben versprochen, sich um etwas anderes zu kümmern, wir würden den Wert „Resolved, Solved“ erhalten. Wenn das Versprechen zu nichts führt , vielleicht zu Null, wäre ein undefinierter Wert undefiniert oder Null. Die Reihenfolge wird jedoch beibehalten. Welche Reihenfolge auch immer hier vorhanden ist, in derselben Reihenfolge werden Versprechen gelöst, wenn promise.all verwendet wird. Ein Punkt hier: promise.all gibt auch ein Versprechen zurück, also müssen wir es umgehen. Das ist wichtig. Jetzt können wir es als Ergebnis bezeichnen. Hier geben wir Versprechen ab und geben das Ergebnis zurück. Weil in unserem Fall jedes Versprechen dazu führt, dass Daten angezeigt werden, werden wir irgendwann eine Reihe gelöster Versprechen erhalten , was bedeutet, dass wir eine Reihe von Sendungen erhalten werden . Wir werden es auf der Konsole protokollieren , um zu sehen, womit wir genau arbeiten. In Start J6 nennen wir das Get Show by IDs. Vielleicht weißt du was? In get show by ID betten wir Daten ein. Aber auf der Startseite brauchen wir es nicht. Anstatt get show by ID hier aufzurufen , rufen wir ApiGet ohne den Embed-Teil auf. So etwas. Auf der mit den Sternen markierten Seite geben wir nun an, bitte rufen Sie Get Shows by IDs an. Inside query function und inside pass mit Sternchen zeigen, dass wir das haben. Jetzt werden wir Fehler mit Sternchen und Sternchen markiert haben. Verwechseln Sie uns nicht mit dem Benennen. Nennen wir es wahrscheinlich Starshow, Starstard-Show-IDs. Hier wird es nur StarredShows und StarredShows fehlerfrei sein. Jetzt wenden wir hier einfaches bedingtes Rendern an , genau wie zuvor auf der Show-Seite mit ob und wenn Sie drehen. Wir werden fragen, ob StarredShows tatsächlich wahr ist. In diesem Fall geben Sie bitte ShowGrid zurück , da wir Show Grid verwenden , um alle Shows anzuzeigen, die wir haben . Das wird ShowGrid verwenden , aber zuerst müssen wir es importieren. Importieren Sie ShowGrid. Es wird für mich bereits automatisch aus den Komponenten ShowGrid vervollständigt . Wenn wir mit Shows begonnen haben, kehren wir zu ShowGrid und ShowGrid erwartet, dass wir die Shows hier bestehen. Lassen Sie uns versuchen, das zu tun, shows entspricht StarredShows und standardmäßig Wochenende und Display Hello. Lassen Sie uns zuerst versuchen, zu sehen, was wir haben. Unsere App läuft nicht, weil wir den Div-Server nicht gestartet Okay, jetzt haben wir unsere Shows Versuchen wir, etwas hinzuzufügen, starme mich. Jetzt gehen wir zur Startseite und zack, wir haben einen leeren Bildschirm und wenn wir in die Konsole schauen, sehen wir, dass die Eigenschaften einer undefinierten Lese-ID nicht gelesen werden können. Was passiert, wenn wir in ShowGrid schauen? Wo ist es? Wir erhalten Shows, die ein Array sein sollen , und innerhalb dieses Arrays hat jedes Element den Schlüssel.show property.show, hat jedes Element den Schlüssel.show property.show aber es wird in unser Ergebnis schauen und das ist es, was wir in der Konsolenanmeldung erhalten, die hier nach IDs angezeigt werden. Sie können sehen, dass wir eine Reihe von Elementen haben und nicht jedes Array-Element die. Eigentum anzeigen. Wir müssen es irgendwie reparieren. Wir müssen diese Datenform an die Datenform anpassen , die voraussichtlich in der Komponente verwendet wird. Die Frage ist, wo genau müssen wir das tun? Das ist eine gute Frage. Nun, wenn wir diese Funktion, sagen wir, in unserem Fall, in unserer App so wiederverwendbar wie möglich machen wollen in unserem Fall, in unserer App so wiederverwendbar wie möglich , stimmt das nicht, aber dennoch ist es eine gute Praxis, die erforderlichen Änderungen nur dort vorzunehmen , wo sie benötigt werden, und wenn wir sie wiederverwendbar machen wollen, wollen wir sagen, die Datenform hier nicht irgendwie ändern lassen . Wir werden diese Logik in der Abfragefunktion ausführen. Hier in getShowsByIds muss ich das Ergebnis nicht mehr auf der Konsole protokollieren oder lassen Sie es uns vorerst behalten, und später werden wir das loswerden. Aber innerhalb der Abfragefunktion hier werden wir Folgendes tun. Wenn getShowsByIds das Versprechen gelöst ist, werden wir jetzt den Punkt dieser Syntax verwenden, weil es besser zu dieser Syntax passt. Sehen wir uns diese Syntax an, die wir hier haben. Anstatt async wait zu verwenden, können wir Async von hier entfernen Wenn diese getShowsByIds-Anfrage also beendet ist , wenn das Versprechen mit diesem Ergebnis aufgelöst wird, wir jedes Array-Element zuordnen und alle Daten, die wir hier haben, unter dem Schlüssel show, unter der Eigenschaft show verschachteln Daten, die wir hier haben, unter dem Schlüssel show, , sodass wir der Struktur entsprechen, die erwartet wird wird vom ShowGrid verwendet, da wir ein Array von Elementen benötigen in dem jedes Element die show-Eigenschaft hat. Was wir tun werden, wir werden das Ergebnis mitteilen. map werden wir hier Show-Daten erhalten und von diesem Callback , der showData zurückgibt, um es einfacher zu machen, anstatt die längere Syntax mit return zu verwenden, werden wir return showData mit geschweiften Klammern mitteilen. Wenn wir jetzt versuchen, StarredShows hier abzusagen , haben wir immer noch dieses Problem. Lass mich sehen. Wir haben ShowData. Das liegt daran, dass wir zugeordnet haben, dass Sie sehen können , dass jedes Array-Element den ShowData-Schlüssel hat, aber wir erwarten, dass es nur angezeigt wird. Hier können wir anstelle von Show Data show and show verwenden. Jetzt versuchen wir zu sehen, dass wir uns erfrischen und bumm, jetzt funktioniert alles wie von Zauberhand. Wenn wir uns das Ergebnis ansehen, haben wir diese Daten , die wir von getShowsByIds erhalten , und dann haben wir die Daten zugeordnet. Wir verschachteln diese Daten tatsächlich unter dem Show-Schlüssel in jedem Array-Element, ungefähr so. Jetzt können wir dieses Ergebnis endlich von hier entfernen und einfach promise.allpromises zurückgeben. Hier müssen wir nichts ändern, das ist unsere Logik hier. Jetzt müssen wir uns mit dem Fall befassen, in dem wir keine Starserien haben. Nehmen wir an , ich räume den lokalen Speicher auf, ich aktualisiere die Seite, nichts wird angezeigt, aber im Idealfall möchten wir dem Benutzer sagen, dass , hey, wir keine StarredShows haben. Wir haben bereits diese If-Bedingung geschrieben, die sowohl für Shows als auch für solche ohne Shows funktioniert , da ein leeres Array auch ein wahrheitsgemäßer Wert ist , sodass wir einfach feststellen können, ob starredShows.Length größer als Null ist, wenn wir mindestens eine Show haben , und wir verwenden hier die optionale Verkettung, da unser Anfangszustand durch use query undefiniert sein wird. Nun, die Anfrage erfolgt nicht sofort, also diese StarredShows können undefiniert sein und keinen Fehler auslösen Lassen Sie mich das zum Beispiel entfernen, ich aktualisiere es, ich gehe zur Konsole und sehe, dass ich aktualisiere es, ich gehe zur die Eigenschaften von undefined nicht gelesen werden können, da dieser Status zunächst wieder undefiniert ist, die Anfrage wird nicht sofort ausgeführt. Wir können hier entweder die optionale Verkettung verwenden oder wir können fragen, ob starredShows wahr ist . Dann verwenden wir den Add-Operator, this starredShows, dieser Zeitpunkt definiert ist, können wir sicher starredShows.Length eingeben, aber um das zu vereinfachen, verwenden wir die optionale Verkettung. Wenn die Länge von StarredShow größer als Null ist, zeigen wir ShowGrid an und fügen dann eine weitere Bedingung wenn die Länge von StarredShow gleich Null ist. In diesem Fall zeigen wir div so an, als ob keine Shows mit Sternen markiert wurden. Dann fügen wir eine weitere Bedingung hinzu falls wir einen Fehler haben. Wenn wir shows adder gestartet haben, werden wir sagen, dass ein Fehler aufgetreten ist und wir sagen starredShowsError.Message. Wenn in diesem Fall keine dieser Bedingungen erfüllt ist, teilen wir standardmäßig mit, dass die Sendungen noch laufen oder nur die Sendungen geladen werden. Dies ist vorerst unser letzter Markt, lassen Sie uns versuchen, es zu sehen. Wenn ich schnell aktualisiere, ein kurzes Blinken angezeigt, da dieser Status zunächst undefiniert ist, das heißt nur für einen kurzen Zeitraum nicht übereinstimmen und wir sehen, diese Bedingungen nur für einen kurzen Zeitraum nicht übereinstimmen und wir sehen, dass Sendungen geladen werden dass Sendungen , wenn die Anfrage länger dauert als erwartet. Wir werden sehen, dass Sendungen geladen werden, dann sehen wir, dass keine Sendungen mit Sternen markiert wurden. Wenn wir nach Hause gehen, suchen wir nach Serien, bei denen wir hier mitgespielt haben, dann suchen wir nach etwas anderem, hey Alter, hey, wir gehen zurück zu den Stars, du kannst sehen, jetzt haben wir diese Shows hier. Selbst wenn wir die Seite aktualisieren, sind die Shows immer noch da. Ziemlich cool. Jetzt haben wir den kompletten, vollständigen Zyklus dieser mit Sternen ausgezeichneten Funktionalität. Herzlichen Glückwunsch. Das war's vorerst, wir werden alle Änderungen zur Bühne hinzufügen. Wir haben ES Link zuerst angewiesen, modernes JavaScript zu verwenden, damit wir modernes JavaScript zu verwenden, damit keine Fehler erhalten, wenn wir einen solchen Promise-Konstruktor schreiben . Wir haben hier eine weitere Funktion hinzugefügt, um alle Sendungen abzurufen , wenn wir die Show-IDs kennen. Wir verwenden die Methode promise.all, um alle Anfragen gleichzeitig zu bearbeiten promise.all, um alle Anfragen gleichzeitig , da diese Anfragen nicht voneinander abhängig sind, diese Anfragen nicht voneinander abhängig sind, sondern parallel bearbeitet und dann auf einmal gelöst werden müssen und dann auf einmal gelöst Genau das macht promise.all. Dann haben wir in der mit Sternen versehenen Komponente den Use-Abfrage-Hook verwendet , um Daten abzurufen. Wir wissen bereits, was er tut und warum wir ihn verwenden, dann wenden wir bedingtes Rendern an, um Daten anzuzeigen. Das war's. Großartig. Lassen Sie uns alles festlegen und sagen wir, abgerufene, Sternen versehene Sendungen Daten und Anzeige. ShowGrid für sie. Cool. Ich schiebe alles auf GitHub und in diesem guten Sinne, wir sehen uns im nächsten. 82. 26 Zuordnung: Hallo nochmal, ich habe eine kleine Aufgabe für Sie, um sich daran zu erinnern, dass zur Implementierung von Start Shows angezeigt werden , Daten im Browser zu speichern. Wenn wir die Seite aktualisieren, ist unser Status immer noch da. Wir haben lokalen Speicher verwendet, Speicher im Browser , der Daten persistieren kann. Wäre es nicht schön, wenn wir auch was wir in das Suchfeld eingeben, in der Home-Komponente beibehalten könnten. Also, wenn ich die Seite aktualisiere, ist alles, was sich in der Textbox befindet, immer noch da. Die Idee hier ist sehr ähnlich. Also für Startshows haben wir unseren eigenen Hook erstellt, der den Zustand synchronisiert, genannt Fuse persisted Reducer. Wir können einen sehr ähnlichen Rahmen erstellen, der diesmal Hughes persisted state on top of US state heißt , und dann diesen Bundesstaat verwenden, um dieses Datum für das Suchfeld zu implementieren. Das ist die Aufgabe für dich. Mach weiter und probiere das aus. Und diesmal können Sie anstelle von lokalem Speicher vielleicht Sitzungsspeicher verwenden. Der Unterschied zwischen lokalem Speicher und Sitzungsspeicher besteht darin, dass der lokale Speicher Daten beibehält, auch wenn Sie den Tab schließen und den Browser schließen, Sitzungsspeicher nur Daten beibehält, bis Sie den Tip schließen, den Tab schließen und dann zur Seite zurückkehren. Auch hier wird der Sitzungsspeicher leer sein, was möglicherweise besser für Textbox geeignet ist, da wir ihn nicht speichern möchten , wenn wir den Tab schließen oder den Browser schließen. Die API ist also nicht dieselbe, was bedeutet, dass Sie anstelle von lokalem Speicher Sitzungsspeicher schreiben und der Rest bleibt gleich, Objekt und Seitenelement abrufen. Versuchen Sie also, diesen persistenten Benutzerstatus zu erstellen und ihn dann so zu implementieren, dass und ihn dann so zu implementieren der Status des Suchfelds beibehalten wird. Viel Glück damit. Wir sehen uns im nächsten. 83. 27 Implementierung von benutzerdefinierten Hook usePersistedState: Hallo nochmal, wie war dein Auftrag? Konnten Sie erreichen, was wir wollten? Konnten Sie Daten im Sitzungsspeicher dauerhaft speichern? Lass uns sehen. Wenn wir zum Suchformular zurückkehren, haben wir hier den Befehl state, um die Suchzeichenfolge state zu verwenden . Wenn wir es nun im lokalen Speicher oder Sitzungsspeicher beibehalten möchten , müssen wir eine zusätzliche Logik schreiben. Wir können die ganze Logik irgendwo in einer anderen Datei extrahieren , und dann hier im Suchformular wollten wir einfach use persisted aufrufen oder vielleicht search string verwenden, was uns wieder ein Array aus zwei Elementen, Zeichenfolge und Suchzeichenfolge, zurückgibt , damit wir die API des Use-State-Hooks nicht ändern. Es wird so ziemlich dasselbe sein. Lassen Sie uns das alles umsetzen. Unter dem Bibliotheksordner, den ich hier habe , in dem sich use start chose befindet, erstelle ich eine neue Datei namens use search, STR, search string. Hier exportiere ich const, verwende die Suchzeichenfolge. Unser Hook akzeptiert keine Argumente, wir werden alles darin behandeln, also wird der Anfangszustand durch den Hook im Inneren definiert. wollen wir uns nicht kümmern, wenn wir diesen Haken benutzen. Dann hebe ich es mir vorerst auf. Dann werde ich von hier aus aus der Bibliothek importieren und die Suchzeichenfolge verwenden. Der endgültige Look wird so aussehen. So ziemlich das Gleiche wie zuvor , aber die ganze Logik, jetzt gehen wir rein. Im Falle einer Verwendung unterstützten die Startanzeigen wöchentlich diesen benutzerdefinierten Hook namens use persisted reducer. Wir können genau dasselbe mit use state machen , aber statt use-reducer werden wir use state verwenden. Ich werde das als Referenz kommentieren. Verwenden Sie erneut ein Factorable, das benötigt wird, um diesen Status mit dem Sitzungsspeicher zu synchronisieren. Ich benötige Ihren Status und hier erstelle ich den persistenten Status. Use persistent state erhält den Anfangsstatus als Argument. Hier rufe ich use state an und übergebe den Anfangsstatus hier. Aber anders als bei use reducer kann use state entweder den Anfangszustand als Argument oder die Initialisierungsfunktion erhalten den Anfangszustand als Argument oder die , die nur einmal ausgeführt wird, um den Zustand zu initialisieren. Im Fall von use reducer war es das dritte Argument, im Fall einiger angeben, ist es einfach immer noch dasselbe Argument, aber Sie übergeben den Callback einfach dort. Hier im Inneren wird die Logik so ziemlich dieselbe sein wie beim lokalen Speicher. Zuallererst beziehen wir uns auf den Sitzungsspeicher, holen Sie sich den lokalen Speicherschlüssel des Elements. Wir müssen den lokalen Speicherschlüssel hier bekommen. In unserem Fall wird es der Sitzungsspeicherschlüssel sein. Wir werden es aus der Verwendung persistenter Zustandsargumente herausholen. Neben dem Anfangsstatus können wir den Sitzungsspeicherschlüssel übergeben. Andererseits haben wir einen persistenten Wert, falls ein Wert existiert, desoralisieren wir ihn aus der Zeichenfolge, andernfalls verwenden wir den von uns übergebenen Anfangswert, das Anfangsstatusargument sein wird. Fantastisch. Hier erhalten wir die Status - und Status-Update-Funktion. Dann genau die gleiche Logik mit Nutzungseffekt. Wir nehmen es einfach von hier aus und sagen, wann immer sich der Status oder wann immer sich der Sitzungsspeicherschlüssel ändert, rufen Sie bitte session storage dot set item, session storage key JSON, stringify, state auf. Dann geben wir ab der Phase „persisted genau dieselbe API wie für den Use-State-Hook beizubehalten “ ein Array mit zwei Elementen zurück, wobei das erste Element der Zustand und das zweite die State-Update-Funktion ist, um genau dieselbe API wie für den . Jetzt können wir diese Kommentare hier entfernen und darin die Suchzeichenfolge verwenden. Wir können use persistent state aufrufen, innerhalb dessen wir den Anfangsstatus übergeben, es ist eine leere Zeichenfolge und der Sitzungsspeicherschlüssel wird eine Suchzeichenfolge sein. Fantastisch. Was auch immer dieser persistente Zustand zurückgibt, und er gibt ein Array mit zwei Elementen zurück , wobei das erste Element der Zustand ist, zweite die Status-Aktualisierungsfunktion ist, genau dieselbe API wie für den Use-State-Hook. Anstatt dies zu schreiben und dann return state und set state zu schreiben, können wir einfach das zurückgeben, was die Funktion use persisted state zurückgibt. zurück, verwenden Sie den persistenten Status. Nun, das ist es. Jetzt können wir den Hook verwenden, den wir im Suchformular erstellt haben , und er wird auf magische Weise funktionieren. Lass es uns versuchen und sehen. Wenn ich die Seite aktualisiere, können Sie sehen, dass ich im Sitzungsspeicher eine Schlüsselsuchzeichenfolge habe, was auch immer wir hier als Sitzungsspeicherschlüssel angeben , sodass der Status mit dem Wert initialisiert wird , den wir hier standardmäßig als leeren String übergeben. Was auch immer wir nun in das Suchfeld eingeben, es wird als Wert innerhalb des Sitzungsspeicherschlüssels unter der Suchzeichenfolge umgeleitet des Sitzungsspeicherschlüssels unter der , da wir den Effekt dafür verwenden , um den Status zu synchronisieren. Wenn ich aktualisiere, können Sie sehen, dass alles, was wir im Sitzungsspeicher haben , jetzt als Anfangszustand in einem Textfeld angezeigt wird , wenn ich es aktualisiere. Das ist zum Beispiel sehr praktisch, wenn ich die Seite versehentlich aktualisiere, macht es hoffentlich Sinn. Nicht zu komplex, wie Sie sehen können, und ich hoffe wirklich, dass Sie so ziemlich dieselbe Logik implementiert haben. Moment werden wir alles festhalten und sagen, dass dies die Verwendung von Suchzeichenfolge Hook war, Commit-Nachricht wird in der dritten Form gespeichert, Textfeldwert im Sitzungsspeicher. Die gesamte verwendete Logik, Suche, Zeichenfolge, Haken. Ich schiebe alles auf GitHub. Wir sehen uns im nächsten. 84. 28 Einführung zu Styled Components: Hallöchen. Im letzten Video würde ich sagen, dass wir unsere gesamte Logik innerhalb der App abgeschlossen haben. Jetzt ist es an der Zeit, dass wir über Stile sprechen. Wie wir die Anwendung gestalten werden. In diesem Video werden wir über den Ansatz sprechen, den wir verfolgen werden , und hier ist ein Spoiler für Sie, der Ansatz wird aus stilisierten Komponenten bestehen. In diesem Video werden wir sehen, wie gestylte Komponenten funktionieren. Warum genau wählen wir sie aus und am Ende werden wir stilisierte Komponenten mit der traditionellen Art vergleichen , Apps mit nur normalen CSS-Stilen zu verkaufen. Lass uns gehen. Was sind gestylte Komponenten? Das ist nur eine Bibliothek zum Stylen oder Reagieren Anwendungen mit einem Ansatz namens CSS-IN-JS. CSS in JavaScript ist ein Ansatz, der es uns ermöglicht, CSS-Markup mit Hilfe von JavaScript zu schreiben. Moment bin ich auf der offiziellen Website von Style Components, offizielle Dokumentation. Was wir jetzt in diesem Video tun werden, wir werden die Grundlagen durchgehen, um zu verstehen wie genau wir diese Bibliothek verwenden können. Wenn ich ein wenig nach unten scrolle, werde ich den einfachen Installationsvorgang durchführen. Ich werde zu meiner Bewerbung zurückkehren. Ich werde hier eine neue Terminalinstanz öffnen und Komponenten im Stil von npm install ausführen. Sobald es installiert ist, werde ich die Instanz einfach schließen. Ich habe das nur gemacht, um die Anwendung selbst nicht zu stoppen. Jetzt sind die gestylten Komponenten unter dem Paket Jason erschienen. Abhängigkeiten In der Dokumentation können wir Ihre erste gestylte Komponente sehen. Wir müssen Styled aus Styled-Components importieren und dann so etwas verwenden. Gehen wir zur Home-Komponente und wir können uns mit gestylten Komponenten hier auf der Homepage bewerben . Oben werde ich Styled aus Styled-Components importieren. Dann mache ich styled.button und lasse am Ende dafür leere Häkchen übrig. Also, was ist das? Indem Sie das Element style, style.HTML, aufrufen , das Sie in dieser sehr langen Liste haben , können Sie beispielsweise das zugrunde liegende Element erstellen , das Sie stylen möchten, zum Beispiel styled button. Aus diesem Element erstellen Styled-Components eine Komponente und diese Komponente wird Stile haben. Wenn wir zurück zur Dokumentation gehen und ein wenig nach unten scrollen, finden wir hier dieses einfache Beispiel, style.button back-Ticks und dann CSS-Markup Wie Sie sehen können, wird CSS-Markup in Back-Ticks geschrieben. Das Syntaxhighlight, das Sie hier sehen können, stammt übrigens von der VS Code-Erweiterung, die als VS Code Styled Components bezeichnet wird. Wenn Sie möchten, dass Ihre Syntax hervorgehoben und automatisch vervollständigt wird, haben Sie diese Erweiterung installiert. Wir können hier CSS in Back-Ticks schreiben. Styled-Component verwendet das Button-Element und verwendet im Grunde nur und verwendet im Grunde nur dieses native HTML-Button-Element und wendet die hier geschriebenen Stile darauf an. Am Ende wird die Button-Komponente erzeugt, die wir in unserem Markup verwenden können. Lass uns weitermachen und es versuchen. Im Markup verwende ich die Komponente im Button-Stil die erstellt wurde, und sage hier Hallo. Ich speichere es. Ich gehe zurück zu meiner App und was haben wir hier? Wenn wir in das Markup schauen, haben wir hier diesen hübschen Button mit diesem eindeutigen Klassennamen. Alle Stile wurden zusammengeführt und lassen Sie uns aufschlüsseln, was wir hier haben. Zuallererst rendert diese Button-Komponente das HTML-Button-Element genau das, was wir hier als Basiselement für die Anwendung von Stilen angegeben haben , was bedeutet, dass diese Button-Komponente hier im Grunde ein natives HTML-Button-Element rendert, was bedeutet, dass wir alle Requisiten, die dieses Styled.something hat, direkt an diese Komponente übergeben können. Wenn das Button-Element ein Attribut namens type hat, können wir hier type übergeben. Wenn ich es speichere, wirst du sehen, dass es reflektiert wird. Ich habe jetzt Type Button, genau das Gleiche, was Sie mit allen regulären, sagen wir nativen HTML-Attributen für das Button-Element machen sagen wir nativen HTML-Attributen , wenn Sie möchten, dass es so etwas wie beim Klicken übergibt, oder wenn Sie so etwas wie Datenattribute, ein benutzerdefiniertes Attribut, übergeben ein benutzerdefiniertes Attribut, würden Sie das tun, dann wird es funktionieren. Cool. Jetzt haben wir diesen eindeutigen Klassennamen hier. Was ist das und warum sieht es so seltsam aus? Die Sache ist , dass diese Kacheln , die Sie hier speziell für dieses Element schreiben , nur auf dieses Element beschränkt sind, was bedeutet, dass diese Stile einzigartig sind. Dieser Klassenname ist eindeutig und wurde automatisch von Styled-Components generiert. Gestylte Komponenten garantieren die Einzigartigkeit der Klassen, die Sie für dieses Element schreiben. Wenn ich eine andere Style-Komponente erstelle, die genauso aussieht, aber einen anderen Namen hat, spielt das keine Rolle. Es kann, sagen wir, alles sein, und dann verwende ich diese Anything-Komponente neben dieser Button-Komponente, sie haben genau die gleichen Stile. Sie sehen visuell gleich aus. Aber wenn man ihre Klassennamen vergleicht, sind sie unterschiedlich. Was die gestylten Komponenten getan haben, war, dass auf der Grundlage dieser Stile ein eindeutiger Klassenname generiert wurde. Auch hier erstellt styled-components lokal begrenzte, einzigartige Stile, speziell für das Element. Macht Sinn? Ich glaube, das tut es. Wir haben hier auch dynamisches Styling für uns zur Verfügung. Wenn wir zur Dokumentation zurückkehren und nach unten scrollen, finden wir hier ein weiteres Beispiel, finden wir hier ein weiteres Beispiel, erweitertes Beispiel mit Zeichenketteninterpolation. Lassen Sie uns diese Zeichenketteninterpolation kopieren. Kommen wir zurück zu unserer Schaltfläche, und hier verwende ich einfach diese Zeichenketteninterpolation. Ich muss auch den CSS-benannten Export aus gestylten Komponenten importieren . Wenn wir jetzt zur App zurückkehren, wird nichts geändert. Aber was genau macht diese Zeichenketteninterpolation? Zuallererst können wir hier die String-Interpolation verwenden, weil wir hier CSS innerhalb von Backticks schreiben. Innerhalb von Backticks können wir JavaScript interpolieren, indem wir $ und geschweifte Klammern verwenden. Hier übergeben wir eine Funktion , die dieses CSS zurückgibt, sagen wir, ein weiteres CSS-Markup hier. Was ist los? Hier verwenden wir etwas, das als Requisitenargument bezeichnet wird. Dieses Argument wird ein Objekt sein, das die Primärschlüsseleigenschaft hat , aber nichts ändert sich. Diese Requisiten beziehen sich hier auf die Requisiten, die wir tatsächlich an die Komponente übergeben. Wenn ich hier primary übergebe, wird es eine benutzerdefinierte Requisite an diese Button-Komponente sein, was bedeutet, dass sie hier unter diesem Requisitenobjekt verfügbar ist. Wenn ich zur App zurückkehre, werden Sie sehen, wie sich diese Stile geändert haben. Wenn ich mir das Markup ansehe, sind das die Stile, die angewendet wurden, als wir das primäre Requisit übergeben haben. Sie überschreiben unsere Basisstile. Um es klarer zu machen, erstellen wir eine weitere Schaltfläche mit dem Namen Hello, aber ohne das primäre Attribut zu übergeben, ohne die primäre Requisite zu übergeben. Sie können jetzt sehen, dass diese unterschiedlich sind. Sie haben hier dieselbe Basisklasse, eindeutig generiert wurde, aber die zweite Klasse ist einzigartig. Auf diese Weise können wir dynamische Stile mithilfe von gestylten Komponenten anwenden . Du kannst hier im Grunde jede Requisite weitergeben. Es kann alles sein, was nicht primär ist. Nehmen wir an, es kann wie die Schriftgröße sein und Sie können angeben, wie viele Pixel Sie möchten, z. B. 20. Dann können Sie innerhalb der Zeichenketteninterpolation mithilfe dieser Funktion mithilfe dieser Funktion CSS basierend auf den Requisiten zurückgeben , die Sie an die Komponente übergeben. Nehmen wir zum Beispiel an, wir möchten die Schriftgröße für jede Schaltfläche dynamisch angeben, wir würden erneut eine Zeichenketteninterpolation innerhalb dieser Stilkomponente aufrufen eine Zeichenketteninterpolation innerhalb dieser Stilkomponente und hier würden wir einfach übergeben. Wenn wir die Schriftgröße übergeben, geben Sie bitte CSS an, Sie bitte CSS an, das die Schriftgrößeneigenschaft gegen die Verkleinerung der Interpolation props.fontsize Pixel hat , die wir übergeben. Wir interpolieren JavaScript im Grunde in CSS-Markup. Wenn wir nun hierher zurückkehren und das Element untersuchen, haben wir hier eine Schriftgröße von 20 Pixeln. Mir ist gerade aufgefallen, dass dieses Schriftgrößenattribut auch dieses Schriftgrößenattribut an das Button-Element angehängt ist. Dies ist möglicherweise nicht erforderlich und das ist möglicherweise überhaupt nicht gewünscht. Ich denke, wenn wir etwas Zufälliges an Startkomponenten übergeben und es hier nur als Argument als Teil dieses Requisitenobjekts zur Verfügung stellen wollen es hier nur als Argument als Teil dieses Requisitenobjekts zur Verfügung stellen , wollen wir ihm das $ voranstellen , damit die gestylten Komponenten verstehen, dass, sagen wir, bitte nicht interpolieren. Übergeben Sie diese Schriftgröße nicht als das tatsächliche Attribut des zugrunde liegenden Elements. Machen Sie es nur innerhalb dieser Zeichenketteninterpolation verfügbar , wenn wir Stile anwenden. Jetzt würden wir uns hier auf die Schriftgröße der Requisiten beziehen, auf die Schriftgröße mit dem Präfix $, wenn ich mich nicht irre. Ja, im Moment können Sie sehen, dass wir immer noch die Stile haben und es funktioniert immer noch. Auf diese Weise können wir dynamische Stile anwenden. Wenn wir hier zur Dokumentation zurückkehren, finden wir ein weiteres Beispiel für gestylte Komponenten. Wir erstellen eine weitere stilisierte Komponente namens Container. Lass uns weitermachen und das oben machen. Ich werde dieses Mal den Stil, das Div, erstellen , die Komponente am Ende, die wir haben werden, wird Container sein. Jetzt können wir unsere Schaltflächen in die Container-Komponente einwickeln. Wenn wir uns das noch einmal ansehen, werden Sie einen eindeutigen Klassennamen sehen, der diese Komponente, die die entsprechenden Stile hat, spezifisch identifiziert . Ich würde sagen, das ist ein gutes Intro für Stilkomponenten. Sie können sehen, dass es sehr einfach ist, die Anwendung mit diesem Ansatz zu stylen die Anwendung mit diesem Ansatz , da hier alles eine Komponente ist. Es mag, sagen wir, verwirrend sein, zwischen regulären Komponenten und installierten Komponenten zu unterscheiden, aber das sind die Nachteile. Sie müssen das goldene Mittel finden, wo Sie Ihre Styles haben möchten oder wo Sie Ihre regulären Komponenten haben möchten. Stilkomponenten sind jedoch eine sehr beliebte Lösung. Ich würde sagen. Eine Sache, die es auch bietet, ist ein sogenanntes globales Thema oder globale Konfiguration. Wenn wir zu den Dokumenten für stilisierte Komponenten zurückkehren und in der oberen rechten Ecke nach einem Thema suchen, können wir diese Referenz für den Themenanbieter finden, und die Referenz zum Themenanbieter werden wir jetzt ausprobieren. Lassen Sie uns den Themenanbieter aus den gestylten Komponenten hier oben importieren . diesem Beispiel folgen, übergeben wir dann die Theme-Requisite an die Theme-Provider-Komponente. Das Thema, das wir hier übergeben müssen, muss ein Objekt sein. Definieren wir es irgendwo oben. Wir werden es Thema nennen. Es wird nur ein Objekt sein und dieses Objekt, was auch immer Sie hier angeben, wird innerhalb der Zeichenketteninterpolation in jeder gestylten Komponente verfügbar sein. Das bedeutet, dass Sie hier jede globale Konfiguration definieren können , die Sie in gestylten Komponenten verwenden möchten . Es können Farben sein, es können, sagen wir, Schriftgrößen sein , es kann eine Schriftfamilie sein, an der Kinokasse. Wenn wir die App stylen, verwenden wir zum Beispiel Farben und Schriftfamilien, hier können wir Farben angeben. Nehmen wir an, das Hauptteil wird nur rot sein. Dann übergeben wir das Theme-Objekt hier an den Theme-Anbieter. Nun, innerhalb der Interpolation, wo immer Sie den globalen Themenkonflikt verwenden möchten , den Sie hier haben, schreiben Sie einfach Farbe, um die Interpolation erneut zu öffnen. Wir übergeben eine Funktion, die ein String-CSS-Markup zurückgeben muss. Es werden, sagen wir, Requisiten sein. props.theme und props.theme werden hier auf dieses Objekt verweisen. props.theme.colors.main. Wenn wir jetzt zur App zurückkehren und sehen, wird die Farbe rot sein. Anstatt jetzt überall in jeder gestylten Komponente Rot zu schreiben , würden Sie einfach auf props.theme.colors.main verweisen. Anstatt diese Farbe an allen Stellen zu ändern, haben Sie dann eine einzige Stelle , an der diese Farbe definiert ist. Zum Beispiel habe ich jetzt beschlossen, meine Hauptfarbe von Rot auf Blau zu ändern. Ich würde hier einfach Blau eingeben und das wird sich in allen Komponenten widerspiegeln , in denen auf prompts.theme colors main verwiesen wird. Wir werden diesen Ansatz verfolgen, um, sagen wir, eine globale Konfiguration an der Kinokasse zu erstellen . Nun, dies war eine Einführung in gestylte Komponenten. Lassen Sie uns nun vergleichen, was genau es uns bietet und was genau die Nachteile sind und was der Unterschied zwischen beispielsweise der Verwendung von Zellkomponenten und einer herkömmlichen Art der Verwendung von CSS ist. Ich öffne Paint. Auf der linken Seite haben wir etwas, das statisches CSS genannt wird , und in der rechten Ecke haben wir etwas namens Laufzeit-CSS. Gestylte Komponenten sind Teil von Laufzeit-CSS, aber wir beginnen mit der ersten statischen Komponente. Was ist statisches CSS? , schreiben wir es auf traditionelle Weise Wenn wir CSS schreiben, schreiben wir es auf traditionelle Weise in CSS-Dateien, und dann werden die CSS-Dateien in die App importiert. Wenn wir uns zum Beispiel GitHub ansehen, verwenden sie statisches CSS, um ihre Website zu gestalten. Was ich damit meine, wenn wir in ihr Markup, in den Hashtag schauen , laden sie CSS-Dateien, und wenn wir einen dieser Styles öffnen, einen der CSS, lassen Sie uns vielleicht einen anderen öffnen. Es gibt einen globalen. Es hat diese Klassennamen wie Color Border Inverse, vielleicht so etwas wie BG Gray. Sie importieren statische CSS-Dateien , die zum Zeitpunkt der Erstellung definiert wurden, und verwenden dann die Klassennamen, die aus diesen CSS-Dateien stammen , innerhalb des Markups. Öffnen wir das Bodytag. Hier sehen Sie regelmäßige, verständliche, umfassende Klassennamen. Aber wenn wir in gestylte Komponenten schauen, ist das etwas anders. Statische Klassennamen, unabhängig davon, was zum Zeitpunkt der Erstellung definiert ist. Wenn wir dynamische Klassennamen anwenden möchten oder wenn wir dynamische Stile mit statischen CSS-Klassennamen anwenden möchten , gehen Sie mit statischem CSS vor. Nehmen wir an, wir haben hier eine Schaltfläche, die primär sein kann, wir würden, sagen wir, mit einer regulären CSS-Punkt-Button-Klasse erstellen, dann würden wir eine primäre Punktklasse erstellen, und wenn wir diese Schaltfläche dann stylen, werden wir einfach die Klassennamen umschalten. Nehmen wir an, es wäre standardmäßig ein Button-Element, das Sie hier haben würden, z. B. Button-Klasse, und wenn Sie dann auf etwas klicken, hat diese Schaltfläche einen zusätzlichen Klassennamen namens primary. Auf diese Weise können Sie statische Klassennamen und statische CSS-Stile verwenden, um dynamische Klassennamen speziell für Elemente zu erstellen . Bei Styled-Components oder mit Laufzeit-CSS ist das anders. CSS ist, sagen wir, in Defly eingebaut. Was ich damit meine. Wenn wir hier in unsere App schauen, haben wir im Hashtag keine CSS-Dateien verbunden. Die Frage ist, woher genau diese Stile kommen? Sie kommen von. Lass mich sehen. Wenn wir den Hut öffnen. Hier haben wir das Style-Tag. Die Sache ist Laufzeit-CSS, was es macht, die Komponenten im Bibliotheksstil injizieren Stile dynamisch in die Seite, indem sie das Style-Tag verwenden. Wenn wir Styled-Components , Markup, offizielle Dokumentation öffnen , haben sie diese, lassen Sie mich sehen, sie haben genau das gleiche Style-Tag hier, wo diese Styles eingefügt werden. Das ist leer, ich bin mir nicht sicher warum. Schauen wir uns das an, das ist eine globale Verschmelzung. Dies sind keine dynamischen Stile. All diese Stile, die Sie hier sehen sind in das Style-Tag integriert. Es ist leer hier. Lassen Sie mich es mit der Seitenquelle versuchen. Hier ist es nicht leer. All diese Stile hier sind hier in die Style-Technologie integriert. Die Sache ist, dass diese Dateien auf Defly injiziert werden. Sie wurden zum Zeitpunkt der Erstellung nicht definiert. Das heißt, als ich auf diese Seite zugreife , war das Style-Tag zuerst leer. Aber wenn ich tatsächlich auf diese Seite gehe, waren die gestylten Komponenten, die Teile, welches JavaScript auch immer, gestylten Komponenten, die Teile, welches JavaScript auch immer, genau hier in Backticks. Dann dauert es einige Zeit, das zu verarbeiten, zu analysieren, was wir hier schreiben, dann erstellt es dieses CSS-Markup und dann fügt es dieses CSS-Markup hier in das Style-Tag ein. Auf diese Weise werden Stile zur Laufzeit, während Benutzerinteraktionen, eingefügt . Das Besondere an diesem Ansatz ist, dass beim Wechseln zwischen Seiten nur die Stile eingefügt werden, die für die Anzeige des Inhalts auf dieser bestimmten Seite erforderlich sind . Das bedeutet, dass nur Stile geladen die für den aktuellen Inhalt benötigt werden. Es werden niemals Stile eingefügt, die für diese bestimmte Seite nicht erforderlich sind . Im Gegensatz zu herkömmlichen Apps importieren Sie hier diese große, große CSS-Datei, sie hat viele verschiedene Klassennamen, aber sie werden möglicherweise nicht auf der Seite verwendet. Gestylte Komponenten injizieren Styles zunächst dynamisch zur Laufzeit und wenn, injizieren Styles zunächst dynamisch zur Laufzeit sagen wir, etwas ist dynamisch, wir haben zum Beispiel die Probe hier geändert Diese Styles werden ebenfalls dynamisch eingefügt und zu den Style-Tags hinzugefügt, sodass sie auf der Seite verfügbar werden. Bei herkömmlichen Apps ist das nicht richtig. Alles muss Voraus vordefiniert und über CSS-Dateien geladen werden. Das Problem mit dieser CSS-NGS-Lösung, insbesondere mit Runtime-JavaScript, ist, dass sie Zeit in Anspruch nimmt. Es dauert einige Zeit, dieses JavaScript zu analysieren, um es in CSS zu übersetzen und es in die Seite einzufügen. Es ist Datenverarbeitung, es braucht Zeit. Das bedeutet, dass, wenn Sie einen sehr großen, sagen wir Elementbaum auf der Seite haben sagen wir Elementbaum auf , der eine stilisierte Komponente ist, dies irgendwann zu einem Engpass werden kann , da das JavaScript Zeit braucht, um es zu verarbeiten. Wenn Sie Millionen von Hunderten von Komponenten auf der Seite haben , kann es eine Sekunde oder ein paar Sekunden dauern , bis die Stile in die Seite eingefügt werden. In den meisten Apps ist dies jedoch nicht der Fall. Aber Sie sollten diese Option wirklich in Betracht ziehen müssen, wenn Sie an größeren Apps arbeiten und derjenige sind, der Entscheidungen trifft. Aber auch hier bin ich die meiste Zeit nicht hier, um dich zu erschrecken. den meisten Fällen ist das völlig in Ordnung und Endbenutzer werden den Unterschied nicht einmal sehen. Für die Kinokasse werden wir gestylte Komponenten verwenden. Wir werden diese Option ausprobieren. Der Vorteil von gestylten Komponenten besteht darin, dass wir mit ihnen auf einfache Weise die globale Konfiguration zunächst mit JavaScript definieren können. Wir erstellen das Theme-Objekt und es stellt alles durch die Interpolation innerhalb der Style-Komponenten bereit. Der zweite Vorteil ist , dass wir dynamische Klassennamen einfach anwenden können , indem wiederum dieselbe Zeichenketteninterpolation verwenden, und drittens ist alles JavaScript. Sie müssen überhaupt keine CSS-Dateien erstellen. Alles ist hier direkt geschrieben. Der Nachteil ist, dass es zunächst einmal , weil dies JavaScript ist Rechenzeit benötigt, weil dies JavaScript ist. Auch hier kann es bei sehr großen Apps zu einem Engpass kommen. In kleineren Apps wird dies überhaupt nicht sichtbar sein. Zweiter Nachteil: Es könnte verwirrend sein, da jetzt alles eine Komponente ist und es leicht ist, zwischen regulären Komponenten und gestylten Komponenten zu verwechseln . Ich denke, das ist es. Moment werden wir nur alle Änderungen entfernen , die wir in Home GS6 vorgenommen haben. Ich werde die Installation der gestylten Komponenten beibehalten und dann werden wir im nächsten Video endlich die gesamte Anwendung mithilfe von gestylten Komponenten stylen . Wir sehen uns dort. 85. 29 Styling der App p1: Hallöchen. In diesem Video werden wir weiter über Stile sprechen. In diesem Video werden wir unsere Bewerbung stylen, nicht vollständig, aber wir werden den Hauptteil davon machen. Lass uns gehen. Im vorherigen Video habe ich Styled-Components bereits installiert, ich führe einfach npm install styled-components aus, ich kann diesen Befehl erneut ausführen, nur Fälle, um sicherzustellen, dass das Paket definitiv installiert ist. Gleich danach starte ich den lokalen Entwicklungsserver und lassen Sie uns sehen, wo genau wir mit dem Styling unserer Anwendung beginnen werden. Die Stile, die ich in diesem Video verwenden werde, werden Ihnen über den Gast mitgeteilt , zu dem Sie bereits Zugriff haben. Fangen wir von hier an. Zunächst werden wir die Google-Schrift, insbesondere Roboto, mit unserer Anwendung verbinden insbesondere Roboto, mit unserer Anwendung und möglicherweise den Titel ändern. Denn im Moment ist es nur die React-App. Ich gehe einfach hierher, stylingPart1.md und kopiere den Index-HTML , den ich hier habe. Dann navigiere ich zu index.HTML. Hier verbinde ich anstelle des Titels diese Schrift, lade dieses Stylesheet und ändere den Titel auf Box Office. Jetzt wird es unter Box Office erscheinen. Meine App erscheint an der Box Office und ich habe diese Schrift Roboto hier angeschlossen. Fantastisch. Aus dem vorherigen Video erinnern Sie sich, dass ich über das Thema Styled Components gesprochen habe Thema Styled Components Wir haben den Theme Provider verwendet. Lassen Sie uns weitermachen und dieses Thema erstellen. Wenn ich zurück zu Gast navigiere, habe ich dieses Objekt hier. Dieses Objekt hier wird unsere globale Themenkonfiguration sein . Nur ein paar Farben plus die globale Schrift, die wir verwenden werden, das Roboto, das wir gerade in Index-HTML eingebunden haben. Ich nehme das Themenobjekt, ich gehe zur App JS6, lass mich sehen. Hier füge ich dieses Themenobjekt hinzu, und jetzt muss ich den Themenanbieter verwenden und dieses Themenobjekt an die zugrunde liegenden Komponenten übergeben. Lassen Sie uns zunächst das Markup hier loswerden, wir brauchen es nicht mehr, es wurde auskommentiert. Dann werde ich aus den gestylten Komponenten den Themenanbieter importieren. Hier unten den Client-Anbieter abfragen oder darüber hinaus. Es ist nicht wirklich wichtig, ich rufe den Themenanbieter an, ich werde meinen Browser-Router in den Theme-Anbieter packen und als Theme-Objekt übergebe ich das Theme-Objekt, das wir hier haben, dass wir es vom Gast kopiert haben. Jetzt können Sie sehen, dass diese neue Ausgabe tatsächlich war, sagen wir, mit diesem neuen Theme-Objekt wurde unsere App j6 etwas verschmutzt. Was wir in diesem Fall tun können, wir können vielleicht teilweise oszillieren oder die Logik, die wir bisher hier geschrieben haben, in einer separaten Datei extrahieren . Zum Beispiel können wir diesen Theme-Anbieter und das Theme-Objekt irgendwie in eine separate Datei extrahieren diesen Theme-Anbieter und das Theme-Objekt irgendwie in und von dort aus alles verwalten. Damit meine ich, dass wir im Quellordner eine neue Datei namens theme.jsx erstellen können. Jetzt können wir hier das Themenobjekt verschieben und hier können wir unsere eigene Komponente erstellen, die vielleicht so etwas wie globales Thema genannt wird. Lassen Sie uns versuchen, das zu erstellen, const, globalTheme. Dieses GlobalTheme werden wir innerhalb von Appjsx anstelle des Theme-Anbieters verwenden . Wir müssen den Themenanbieter nicht aus stilisierten Komponenten importieren, das Theme-Objekt hier drinnen verwalten und dann den Theme-Anbieter verwenden, um das Team-Objekt zu übergeben Wir können die gesamte Logik in Theme jsx extrahieren alles von hier aus verwalten. Dafür können wir nur eine Komponente namens Global Theme erstellen , und wir können den Browser-Router nicht einfach so in eine globale Themenkomponente einwickeln . Das werden wir aus Denmark jsx importieren . Lass mich das machen. Ich importiere einfach aus dem globalen Thema. Dieses GlobalTheme muss exportiert werden nach, ich nenne export const, GlobalTheme. Jetzt sieht es viel sauberer aus. Dieses GlobalTheme muss all seine Kinder, die ihm übergeben werden, ausliefern. Das bedeutet, dass ich innerhalb der GlobalTheme-Komponente die untergeordneten Requisiten destrukturieren und von dieser Komponente aus werde und von dieser Komponente aus einfach den Theme-Anbieter zurückgebe , der aus gestylten Komponenten importiert wurde, und alte Kinder werden hineingehen. Für die Theme-Requisite werde ich das Theme-Objekt hier übergeben. Jetzt haben wir das Thema erstellt, wir haben die Logik in Theme jsx verwaltet, aber wir müssen auch einige globale Stile anwenden. Moment haben wir einige globale Stile hier im Index-CSS definiert , aber für unsere Stillösung verwenden wir gestylte Komponenten. Wir können tatsächlich stilisierte Komponenten verwenden , um ein globales Thema zu erstellen, das, sagen wir, irgendwie nicht auf eine bestimmte Komponente beschränkt ist. Also einige Stile, die durch stilisierte Komponenten definiert werden, die global verfügbar sind. Anstatt Index-CSS zu verwenden, können wir diese Datei tatsächlich löschen. Innerhalb von index jsx können wir jetzt den Verweis auf ein vorhandenes Index-CSS entfernen . Jetzt müssen wir irgendwie globale Stile kreieren. In der Styled-Komponente haben wir eine Sache namens Create Global Style. Wir können in der Dokumentation danach suchen. Lass mich sehen. Globaler Stil erstellen, APA-Referenz, globalen Stil erstellen, nur im Internet. Es ist nur eine Funktion , die Sie aufrufen. Auch hier Backticks, Sie schreiben globale Styles, globales CSS und verwenden es dann einfach als Komponente. Im Grunde dasselbe wie die Verwendung von regulären Stilkomponenten, aber dieses Mal wird es nicht auf bestimmte Komponenten beschränkt sein. Die Stile werden global angewendet. Wir werden Create Global Styles hier nennen, aber wir haben diesen Ruf als internen Gast, der mit uns geteilt wird. Also können wir es einfach von hier aus nehmen, lassen Sie es uns kopieren und einfügen. Ich rufe einfach create global style auf, der aus gestylten Komponenten importiert wurde , und spezifiziere dann einige globale Stile, speziell hier für Budget Deck. Was ich hier mache, verwende ich die String-Interpolation, um das Theme-Objekt zu interpolieren und die hier definierte Schriftfamilie zu nutzen. Sie erinnern sich, weil wir hier Backtest verwenden, dürfen wir die Zeichenketteninterpolation verwenden. Wir müssen eine Funktion übergeben, die etwas CSS zurückgibt , das hier direkt interpoliert wird. Im vorherigen Video habe ich Requisiten verwendet, genau dann habe ich props.theme gemacht. Da das erste Argument jedoch ein Objekt ist , das den Themenschlüssel enthält, können wir den Themenschlüssel direkt innerhalb von Argumenten destrukturieren . Das ist völlig optional. Dies dient nur dazu, sagen wir, diese Syntax zu vereinfachen und zu verkürzen. Ich werde das Thema von hier aus einfach destrukturieren und die Theme-Schriftfamilie verwenden. Auch hier bezieht sich das Theme-Objekt auf das Objekt, das wir hier definiert haben , und dann übergeben wir es an den Theme-Anbieter. diesem Grund ist es in unserer Definition für gestylte Komponenten verfügbar . Dann verwenden wir einfach diese globalen Stile in unserem Markup, wie eine unregelmäßige Komponente. Jetzt wird das alles auf magische Weise verfügbar. Wenn wir noch einmal zu unserer App gehen und nach dem Body-Tag suchen, lassen Sie mich es finden, können Sie sehen, dass die Stile angewendet wurden. Wir haben die Schriftfamilie Roboto sans-serif, genau wie wir sie im Theme und dem Rest des CSS definiert haben, das wir hier platziert haben. Großartig. Nun, was wird unser nächster Schritt sein? Ich denke, wir werden zuerst mit der Navigation beginnen , weil wir eine kleine Sache haben, die wir besprechen müssen. Was ich mit dieser kleinen Sache meine, wenn wir zwischen den Seiten navigieren, möchten wir angeben, welche Seite gerade aktiv ist. Wenn ich zum Beispiel auf der Homepage bin, möchte ich dem Benutzer zeigen , dass dieser Link aktiv ist. Wenn ich zum Start navigiere, möchte ich angeben, dass der Startlink gerade aktiv ist. Wie kann ich das machen? Wenn wir zu den Komponenten zurückkehren, nav.sjsx, hier haben wir dieses einfache Markup, wir ordnen unser Links-Array einfach dem LI-Element mit der Link-Komponente zu , die aus React-Router-dom importiert wird. Wie können wir irgendwie überprüfen, ob dieser Link, den wir hier rendern, aktiv ist. Aber dieser React-Router hat eine bestimmte Komponente, und wenn wir in der Dokumentation nach Komponenten für NavLink suchen , können wir der Beschreibung entnehmen, dass ein NavLink eine spezielle Art von Link ist , der weiß, ob er aktiv ist oder nicht. Wenn wir weiter lesen, heißt es, dass standardmäßig eine aktive Klasse zu einer NavLink-Komponente hinzugefügt wird, wenn sie aktiv ist. Kurz gesagt, anstatt einen Link zu verwenden, können wir eine Komponente namens NavLink verwenden, und wenn sie aktiv ist wird die aktive Klasse standardmäßig an diesen Link angehängt. Lass es uns versuchen und sehen. Ich habe den Link durch Navlink von React-Router-DOM ersetzt, ich gehe zurück zu meiner App, ich überprüfe das Markup. Ich schaue mir den Tag [inaudible] hier an, und Sie können sehen, dass ich gerade auf der Startseite bin und sehe, dass dem Link plus active hinzugefügt wurde. Wenn ich zur Startseite navigiere, wird Now plus active an Home angehängt. Einfach so gab uns der React-Router die Möglichkeit, unseren aktiven Link zu stylen , indem wir einfach den Link durch den Navlink ersetzen. So einfach ist das. Sie können mehr lesen, wie anpassbar dieser NavLink sein kann, vielleicht aufgrund einiger Bedingungen, aber in unserem Fall möchte er irgendwie geändert werden, die Schnittstelle, zum Beispiel, wenn wir uns die Dokumentation ansehen, können wir dieses Style-Tag verwenden, das kann eine Funktion sein, die diesen aktiven Schlüssel vom ersten Argument erhält . Damit werden wir nicht weiter gehen, wir gehen einfach zurück zu unserem Gast hier und ich habe die Styles schon für uns vorbereitet. Lassen Sie mich erklären , was wir hier haben. Zunächst kopieren wir diese Komponente im Nav-Listenstil und platzieren sie irgendwo unten. Zuallererst müssen wir den Stil importieren. Oben rufen wir den Importstil aus gestylten Komponenten auf. Hier erstellen wir ein einfaches UL-Element, dieses mit Stilen. Jetzt ersetzen wir UL einfach durch Novelist, und alles, was im Markup enthalten ist , wird gestylt. Auch hier erstellen wir Stile, die ein geordnetes Listenelement mit Stilen markieren, und dann geben wir auch an, dass jedes LI-Element darin einen Rand mit 10 Pixeln hat. Lass es uns versuchen und sehen. Wir kehren zur App zurück, Sie können sehen, dass das Layout geändert wurde. Wenn wir uns die L-Klasse wie zuvor ansehen, haben wir eine eindeutig generierte Klasse speziell für dieses Nav-Listenelement, speziell für dieses UL-Element, wir können die Stile sehen. Wenn wir das LI-Element untersuchen, hat es auch Stile. Toll, es hat funktioniert. Aber was ist jetzt mit den Links? Weil wir keine NavLink-Komponente angefasst haben. Wenn wir hier zum Gast zurückkehren, haben wir hier auch einen Link gestylt. Lassen Sie mich es kopieren und ich werde erklären, was wir haben. Gestylte Komponenten sind, sagen wir, vielseitig genug, dass wir damit keine einfachen, sagen wir nativen HTML-Elemente stylen können . Es ermöglicht uns, auch andere Komponenten zu stylen. Hier rufe ich styled als Funktion auf und übergebe die darin enthaltene NavLink-Komponente als Argument. Auf diese Weise erweitern wir die NavLink-Komponente mit diesen Stilen, die wir hier haben. Auf diese Weise wird dieser Link-Stil am Ende nur eine NavLink-Komponente sein, aber mit diesem CSS-Stylesheet das so einfach. Anstatt NavLink hier zu verwenden, kann ich getrost den Link-Stil verwenden , oder vielleicht können wir ihn sogar NavLink-Stil nennen, wenn Sie möchten Lassen Sie uns den Link-Stil beibehalten. Was wir drinnen machen, wir geben einfach wieder die Farbe aus dem Designobjekt an und dann haben wir hier den Ampersand, und dann haben wir.active, was bedeutet, wenn dieses Element, also dieses Ampersand sich auf sich selbst bezieht, was bedeutet, dass sich Ampersand hier auf die NavLink-Komponente selbst bezieht , und dann, wenn diese Komponente, wenn dieses Element, wenn dieser NavLink die aktive Klasse hat, Wir haben angegeben, dass es dieses und dann das andere Markup eingefärbt hat, um den gewünschten Effekt zu erzielen. Lass es uns versuchen und sehen. Was haben wir? Wir gehen zurück und Sie sehen jetzt haben wir diese schöne Navigation. Wenn wir navigieren, wird jetzt die Seite angezeigt, die gerade aktiv ist. Toll, lass uns weitermachen. Wenn wir hier zum Gast zurückkehren, haben wir hier noch einen Moment , der Custom Radio heißt. wir für diese Radiobuttons, die wir hier haben Nehmen wir für diese Radiobuttons, die wir hier haben, an, wir erstellen benutzerdefinierte Optionsfelder. Wenn es darum geht, Eingaben wie Checkboxen oder benutzerdefinierte Radios zu gestalten, ist das ein bisschen umständlich, aber nicht wirklich kompliziert. Wenn wir zu der Suchformularkomponente gehen, die wir hier haben, sehen wir, dass wir zwei Bezeichnungen haben. In jedem Etikett befindet sich ein Eingang vom Typ Radio. Wenn wir ein benutzerdefiniertes Funkelement erstellen müssen , das vollständig gestaltet werden soll, müssen wir einen etwas anderen Ansatz wählen, um es, sagen wir, wiederverwendbar zu machen. Damit meine ich, dass ich vorschlage, eine Komponente zu erstellen, die wir Custom Radio nennen. Unter Komponenten erstelle ich eine neue Datei namens Custom radio.jsx, also erstelle ich hier ein benutzerdefiniertes Radio. Hier wird es vorerst nur ein Etikett sein. Ich lege es zur Seite und lass uns sehen, was wir haben. Wir haben ein Etikett und darin haben wir Text, und dann haben wir eine Eingabe. Also können wir das Markup einfach hier kopieren und es in ein benutzerdefiniertes Radio einfügen. Was wollen wir nun tun und welche Schnittstelle wollen wir diesem benutzerdefinierten Funkelement geben? Lassen Sie uns einfach abschätzen, wie genau wir es verwenden möchten. Moment erstellen wir also ein Label und geben stattdessen die Eingabe weiter. Ab sofort wird es eine Komponente namens Custom Radio sein . Wir rufen Custom Radio auf, und an dieses benutzerdefinierte Radio möchten wir idealerweise alle Requisiten übergeben, alle Attribute, die wir an das Eingabeelement vom Typ Radio übergeben . Also werde ich das alles einfach kopieren, vielleicht ohne Typ Radio, weil es dieser Komponente bereits um Radio geht. Wir werden den Namen und die Werteprüfung unverändert bestehen. Aber was ist mit dem Etikett? Was sind unsere Optionen? erste Option ist, dass wir dieses Label vielleicht als Kinder weitergeben können , zum Beispiel so. Dies könnte eine Option sein, aber stattdessen bevorzuge ich es, es als Attribut zu übergeben. Also werden wir sagen, definiere ein weiteres Attribut, eine weitere Requisite, die wir Label nennen werden, und wir werden hier Shows geben. Anstatt Kinder zu verwenden, wird es sich um eine selbstschließende Komponente mit einer zusätzlichen Requisite namens Label handeln. Nun, wie können wir das alles innerhalb von Custom Radio handhaben? Zunächst spezifizieren wir hier Requisiten und anhand der Requisiten werden wir destrukturieren. Zuallererst nehmen wir das Label-Attribut, das beschriftete Requisiten, die wir übergeben werden, dann innerhalb des Markups, wir werden dieses Label interpolieren, und jetzt ist unser Ziel, all diese Requisiten zu nehmen, den Rest der Requisiten, die wir übergeben, egal was diese Requisiten sind, wir wissen, dass sie alle irgendwie zum Eingabeelement hier umgeleitet werden . Die Frage ist also, wie können wir das machen? Wir werden nicht alle Requisiten nacheinander zerstören , oder? Das wollen wir nicht tun. Wir wissen, dass wir das Label nehmen und der Rest wird definitiv in das Eingabeelement gehen. In React gelten dieselben Regeln, da das Requisitenobjekt immer noch nur ein JavaScript-Objekt ist das Requisitenobjekt immer noch nur ein JavaScript-Objekt ist. Wir können diese Strukturierung verwenden, wir können den Spread-Operator verwenden, wir können den Rest-Operator verwenden. All diese Regeln gelten also. Ich schlage vor, dass wir den Spread-Operator tatsächlich verwenden können . Wir können hier drei Punkte aufrufen und Eingabe-Requisiten angeben. diese Syntax hier verwende, kann ich sie hier vielleicht direkt einbetten. Also nehmen wir hier nur die Label-Requisite, und was auch immer wir übergeben, der Rest der Requisiten ist unter dem Eingabe-Requisitenobjekt verfügbar . Jetzt können wir das Eingabe-Requisitenobjekt nehmen und all diese Requisiten, die wir übergeben, verteilen, indem wir einfach so den Spread-Operator verwenden. Zunächst verwenden wir den Rest-Operator, um beispielsweise alle Requisiten, die wir an das benutzerdefinierte Radio übergeben, zu akkumulieren Alle Requisiten werden unter Eingabe-Requisiten, Objekt verfügbar, und dann verteilen wir alle Requisiten, alle Schlüssel innerhalb der Eingabe-Requisiten, als Requisiten, als Attribute für das Eingabeelement. Jetzt werden wir vom benutzerdefinierten Radio standardmäßig das benutzerdefinierte Radio exportieren, und jetzt müssen wir das alles irgendwie stylen. Gehen wir also zurück zum Gast hier, haben wir Radio gestylt. Lass uns das alles kopieren und dann unten platzieren. Jetzt müssen wir zuerst gestylte aus gestylten Komponenten importieren. Hier erstellen wir ein gestyltes Punktelabel, und ich nenne die zurückkehrende Komponente als gestyltes Radio. Anstelle des Labels können wir einfach das gestylte Radio verwenden, und jetzt wird alles wie von Zauberhand funktionieren. Das ganze CSS-Markup besteht also nur darin, ein benutzerdefiniertes Optionsfeld zu erstellen vollständig mit dem Thema, das wir haben, und den Farben, die wir in diesem Thema definieren, gestaltet ist. Jetzt speichern wir es. Außerdem müssen wir hier ein zusätzliches Markup hinzufügen, nur ein leeres Span-Element. Einfach so. Es wird innerhalb des Markups verwendet, es wird gestylt. Gehen wir nun zurück und verwenden im Suchformular das benutzerdefinierte Radio. Also, anstatt ein Label zu verwenden und einfach so, werden wir zuerst ein benutzerdefiniertes Radio importieren. Importieren Sie einfach so benutzerdefinierte Radio-ROM-Komponenten aus dem benutzerdefinierten Radio , und das benutzerdefinierte Radio wird standardmäßig exportiert, sodass ich den benannten Export oder den Namensimport nicht verwenden muss. Das ist falsch. Jetzt verwende ich einfach das benutzerdefinierte Radio. Ich übergebe die beschriftete Requisite und die restlichen Requisiten werden umgeleitet, sagen wir zum zugrunde liegenden Eingabeelement. Also das Gleiche werde ich mit Schauspielern machen. Ich brauche dieses Etikett hier nicht mehr. Ich kopiere einfach das benutzerdefinierte Radio-Label Schauspielern und die Requisiten werden der Rest sein. Eine weitere Sache, die mir hier aufgefallen ist, wir haben angegeben, dass dieser Eingang vom Typ Radio sein wird. Wir geben jedoch nirgends an, dass unser zugrunde liegender Eingang auch den Typ Radio hat. Lassen Sie uns zunächst sagen, dass all diese Requisiten, die wir an das benutzerdefinierte Radio übergeben , zum zugrunde liegenden Eingabeelement umleiten, aber was auch immer wir übergeben, wir können es mit den Requisiten überschreiben , die wir hier definieren, indem sie, sagen wir, nach der Verbreitung einbeziehen. Unser Input wird also vom Typ Radio sein. Wenn wir Requisiten angeben, nachdem wir diesen Spread gemacht haben, wird alles, was wir angeben, dadurch überschrieben. Wenn ich hier zum Beispiel an benutzerdefiniertes Radio übergebe, sagen wir Text, dieser wird durch das überschrieben, was ich nach diesem Spread spezifiziere sagen wir Text, dieser wird durch das überschrieben, dieser wird durch das überschrieben . Aber wenn ich hier im benutzerdefinierten Radio spezifiziere, Radio vor dem Spread eintippe, überschreibt die Spread, sagen wir die Standard-Requisiten , die ich hier übergebe. Aber wenn es danach definiert wird, wird es überschrieben. Genau die gleichen Regeln wie bei Verteilung innerhalb eines einfachen Objekts. Also verteilt ihr hier etwas, sagen wir Input-Requisiten, und dann spezifiziert ihr das. Der Typ wird Radio sein. Im Grunde ist alles, was wir in Zeile 12 haben , grob übersetzt. Was Sie in diesen Zeilen sehen drei bis sechs, ungefähr das Gleiche. Wir geben den Typ Radio an, wir müssen hier keinen Typtext angeben. Jetzt können wir einfach alles retten. Wir können zu unserer App zurückkehren und sehen, dass wir jetzt gestaltete Elemente haben, aber wir haben vergessen, das Label hier zu löschen , und jetzt können Sie sehen, dass es funktioniert. Wenn ich spezifiziere, suchen Sie jetzt nach Jungen, dann wird tatsächlich nach Schauspielern gesucht. Dann bin ich zu Shows gewechselt und es funktioniert. Also hier ist alles gut, und ich denke, das wird es speziell für dieses Video sein. Wir haben, sagen wir, die wesentlichen Dinge für das Styling behandelt . Ich denke, wir haben viel erreicht. Beschränken wir uns vorerst darauf und verpflichten uns zu allem. Lassen Sie uns kurz einen Überblick darüber geben, was wir getan haben. Zunächst haben wir in index.HTML diesen Link zur Roberta-Schrift hinzugefügt, wir haben den Titel auf Box Office gesetzt, in app.jsx verwenden wir die globale Themenkomponente, verwenden wir die globale Themenkomponente die wir in der jsx erstellt haben. Also haben wir diese globale Ding-Komponente erstellt, die nur ein Wrapper ist , der auf dem Theme-Anbieter und den globalen Stilen aus gestylten Komponenten aufbaut. Die Logik wird im Theme jsx verwaltet. Wir haben das globale Themenobjekt erstellt, das wir in unseren stilisierten Komponenten in der gesamten App verwenden . Dann haben wir in navs.jsx die Nav-Link-Komponente verwendet, da dies keine Komponente ist, die uns den aktiven Link bereitstellt. Der aktive Link erhält also die aktive Klasse, und dann verwenden wir diese aktive Klasse in unserem CSS-Markup, um den aktiven Link zu stylen. Dann haben wir die benutzerdefinierte Optionskomponente erstellt und verwendet , bei der es sich um ein benutzerdefiniertes Optionsfeld handelt, das wir erneut mit Hilfe von Stilkomponenten erstellt haben . Wir haben hier auch diesen neuen kleinen Trick kennengelernt , wenn wir beispielsweise die Requisiten mithilfe der Operatoren Rest und Spread an das zugrunde liegende Element umleiten oder übergeben müssen Requisiten mithilfe der Operatoren Rest und Spread an das zugrunde liegende Element umleiten oder übergeben . Wir können also ein Objekt in ein Element aufteilen und welche Schlüsselwerte es auch hat, sie werden alle als Requisiten betrachtet, als Attribute des Elements. Das klang nach viel. Lassen Sie uns alles festlegen und sagen wir , installierte Komponenten, dann werden wir sagen, dass der globale Strahl mit SC erstellt wurde. Lassen Sie uns das mit gestylten Komponenten vereinfachen. Benutzerdefiniertes Radio erstellt. Nav-Link vom React-Router wurde verwendet, um den aktiven Link zu stylen. Klingt großartig. Lass uns alles auf GitHub übertragen und im nächsten Video werden wir mit den Stilen fortfahren. Wir sehen uns dort. 86. 30 Styling der App p2: Hallo nochmal. Im letzten Video haben wir begonnen, die Anwendung mithilfe von gestylten Komponenten zu stylen. In diesem Video werden wir weitermachen. Wenn wir zu dem Gast zurückkehren, den du mit dir geteilt hast, findest du stylingpart2.empty. Dies ist die Datei, auf die wir verweisen können. Wir haben eine Menge CSS-Markup, und das alles zu schreiben wird sehr lang und langweilig sein . Um das zu vermeiden, verwenden wir einfach das vorhandene Stylesheet, sodass Sie und ich das alles nicht selbst aufschreiben müssen. Lass uns eins nach dem anderen gehen. Was wir in StylingPart2.md haben. Zuerst haben wir AppTitle.jsx und wir haben hier eine Komponente im Titlewrapper-Stil. Lass es uns kopieren. Kommen wir zurück zu unserer App. Lass uns dorthin gehen, wo ist es? Was war die Akte? AppTitle.js x? Gehen wir zu AppTittle.jsx, und hier unten verwenden wir diesen Titlewrapper und importieren Styles aus gestylten Komponenten. Anstelle des div hier verwenden wir jetzt Titlewrapper, und all dieser h1- und p-Text darin wird wie unseren Stilen in styled div hier gestylt. Speichern wir es. Lass uns zur App zurückkehren und sehen. Jetzt, bumm, wir haben diesen ziemlich zentrierten Titel. Fantastisch. Lass uns weitermachen. Als nächstes haben wir ein Suchformular auf der Liste. Lassen Sie uns das alles kopieren und navigieren wir zur Suche nach. Im letzten Video hier haben wir diese CustomRadio-Komponente bereits erstellt. Jetzt fügen wir zusätzliche Stile hinzu, damit unser gesamtes Formular gut aussieht. All diese gestylten Komponenten werde ich ganz unten hineinlegen . Nur um zu erwähnen, dass Sie diese Komponenten im Stil überall platzieren können. Sie können searchform.style.jsx erstellen und alle stilisierten Komponenten dort platzieren und sie dann in das Suchformular importieren. Dies ist der Fall, wenn Sie die Suchformulardatei selbst nicht verschmutzen möchten . Weil gestylte Komponenten, CSS , viel Platz beanspruchen. Nur für den Fall, dass Sie das alles nicht hier schreiben möchten, können Sie es in eine separate Datei schreiben und es dann hier auf der Site importieren. In unserem Fall schreiben wir alles unten. Zuerst müssen wir Styled importieren, ich drücke die Intellisence, um das Drop-down-Menü zu öffnen. Hier importiere ich wie immer gestylte aus gestylten Komponenten. Lassen Sie uns nun diese Komponenten verwenden. Zuerst haben wir das Eingabeelement gestaltet. Wir haben diese Texteingabe, also anstatt die Eingabe zu verwenden, werden wir die Sucheingabekomponente verwenden, eine stilisierte Komponente, die wir erstellt haben. Als nächstes haben wir dieses Div im RadioWrapper-Stil. Das wird hier ein zusätzliches Div sein, gestylt oder wie habe ich es genannt? Es war RadiosWrapper. Es wird nur ein Div sein , das unsere beiden Custom-Radios einfach so umhüllt . Am Ende haben wir auch den Such-Button-Wrapper , der ein weiteres zusätzliches Wrapper-Div für dieses Button-Element sein wird . Wir können den Suchschaltflächen-Wrapper verwenden und darin eine Schaltfläche vom Typ Senden platzieren. Das schreiben wir in styles. Speichern wir es. Kommen wir zurück zum Formular und schauen wir uns das jetzt an. Bisher sieht es so gut aus. Lass uns versuchen, nach Jungs zu suchen. Sie können sehen, dass unsere Karten noch nicht gestylt sind. Wir werden das im Moment beheben. Aber das Formular sieht toll aus. Übrigens haben wir hier in diesem Suchfeld keinen Platzhalter. Lass es uns vielleicht hinzufügen. Ich übergebe die Platzhalteraufforderung an die Sucheingabekomponente, die eigentlich keine Komponente ist. Es ist immer noch das Eingabeelement. Platzhalter wird nach etwas suchen. Lass es uns versuchen und sehen. Jetzt sieht es besser aus. Großartig. Lass uns noch weiter gehen. Außerdem haben wir eine Reihe von Dateien, denen das Präfix common vorangestellt ist. Dies sind gestaltete Komponenten, die in unserer App in mehreren Dateien gemeinsam genutzt werden . Sie werden in mehrere andere Komponenten importiert. Deshalb wird ihnen das Präfix common vorangestellt. Das bedeutet, dass wir innerhalb von Komponenten wahrscheinlich einen Ordner namens common erstellen und diese gestylten Komponenten dort platzieren werden. Zuerst haben wir flexgrid.jsx. Kopieren wir das. Lassen Sie uns hier eine neue Datei namens Flex Grid erstellen. In dieser Datei exportieren wir einfach die Flexgrid-Komponente. Nichts besonderes. Dann haben wir eine Suchkarte. Dies wird eine Reihe von Komponenten sein , die wir verwenden werden , um die Suchkarte zu gestalten. Sowohl für Serien als auch für Schauspieler kopieren wir diese Markierung. Wir stellen es hier hin. Von hier aus exportieren wir zwei Dinge Suchbild-Wrapper und dann die Suchkartenkomponenten. Wir werden diese beiden verwenden , um Suchkarten zu gestalten. Gehen wir jetzt weiter. Hier haben wir StarIcon jsx. Lassen Sie uns dieses erstellen, StarIcon, jsx. Das wird interessant sein. Dies ist nur ein gestyltes Div. Hier verwenden wir jedoch eine Requisite namens active. Wir werden aktive Requisiten übergeben, um die Farbe dieses StarIcons zu ändern . Wir werden das in einem Moment ansprechen wenn wir zu dieser Komponente zurückkehren, wenn wir sie verwenden werden. Jetzt haben wir hier noch eine Sache namens Textzentrum. Nichts Besonderes hier. Nur ein Div, das den Text darin zentriert. Das nächste, was wir haben, heißt Pages Show.jsx. Lassen Sie uns das alles kopieren. Gehen wir zu Pages Show.jsx. Wie zuvor werden wir alle unsere Stilkomponenten verwenden. Unten werden wir gestylte aus gestylten Komponenten importieren. Mal sehen, wie wir diese Komponenten verwenden können. Verpackung zu Hause. Es hat den Stil div und darin wird das Ankertag formatiert . Hier haben wir den Link , der uns zur Homepage führt. Wir werden das in die Wrapper-Komponente zu Hause einwickeln. Irgendwann sieht es ungefähr so aus. Dann haben wir den Show-Page-Wrapper , der hier der Wrapper für das gesamte Markup sein wird. Ich werde es einfach so benutzen. Dröhnt. Zeigt den Seitenumschlag an und das abschließende Tag zeigt den Seitenumschlag. Dann haben wir auch InfoBlock, InfoBlock ist dieses wiederverwendbare Div für unsere zusätzlichen Informationen für die Show. Hier finden Sie InfoBlock-Details, InfoBlock-Saisons und InfoBlock-Besetzung. Hier haben wir auch das. Wir haben einen Fehler, die Daten werden geladen. Anstatt nur div zu verwenden, können wir die Komponente im Textzentrum , die wir im aktuellen Ordner erstellt haben, wiederverwenden Komponente im Textzentrum , die wir im aktuellen Ordner erstellt haben, . Ich importiere aus Komponenten, Common Text Center, und ich werde das Textzentrum importieren, und anstatt diese Divs hier zu verwenden, werde ich das Textzentrum anwenden. Fantastisch. Lassen Sie uns nun versuchen, zu sehen ob ich auf eine der Sendungen auf read more klicke. So sieht unsere Seite gerade aus. Wir haben jedoch immer noch ungestylte Hauptdaten der Sendung, wir haben immer noch ungestylte Details, Staffeln und Besetzung. Wenn wir hier zu Gast zurückkehren, haben wir die Besetzung der Sendungen, die Details der Sendungen, die Staffeln, die Showcard. Wir werden das alles jetzt stylen. Fangen wir mit der Besetzung an. Ich werde das alles kopieren und in die Besetzung der Show aufnehmen. Bei der. Unten wird das Styled aus den gestylten Komponenten importiert und die Besetzungsliste dient als Wrapper für die Besetzung. Darin haben wir Dinge , die als Liste von Klassennamen gestaltet werden. Wir können diese Klassennamen tatsächlich in unserem Markup verwenden und sie werden gestylt, weil wir das für das div, die Stile, angeben. In der Besetzungsliste haben wir dieses Div, das ein Cast-Item mit dem Klassennamen sein wird. Dann haben wir den Bild-Wrapper , der eigentlich unser Bild-Wrapper sein wird, ich nenne es so, und dann haben wir Schauspieler, das wird dieser Klassenname Schauspieler sein. Fantastisch. Nun, wenn wir wieder hierher kommen, haben wir keine Besetzung für diese Show verfügbar. Lass uns etwas anderes versuchen. Wir haben ein sehr großes Bild. Wisse, was hier ist. Wir werden uns gleich damit befassen, aber Sie können das jetzt sehen, unsere Besetzung ist gestylt. Sieht ziemlich cool aus. Gehen wir jetzt weiter. Gehen wir hier zur Detailkomponente. Details werden in diesem DetailWrapper angezeigt. Nichts wirklich Besonderes hier in der Details-Komponente, anstelle von div können wir einfach DetailsWrapper anwenden. Gehen wir zurück und sehen uns die Details an. Nichts wirklich Besonderes, nur zusätzlicher Spielraum hier. Kommen wir zurück zu den Tauchgängen. Jetzt haben wir hier Jahreszeiten. Lassen Sie uns das alles kopieren. Gehen wir zu den Jahreszeiten. Unten importiere ich , wieder Stil aus gestylten Komponenten. Wir haben SeasonSwrapper. Dies ist im Stil von div, SeasonWrapper. Lass es uns so benutzen. Was haben wir dann drinnen? Warum wurde es nicht benutzt? Weil ich das S vergessen habe. Wir haben hier auch SeasonList. Lassen Sie uns das für dieses Div verwenden, wenn wir das Markup zuordnen. Hier drinnen stylen wir auch saisonale Artikel. Dann bestehen wir die linke Klasse, dann bestehen wir die rechte Klasse. Unser Saison-Item wird dieser Div sein, den wir kartografieren. Der Nachname wird ein Saisonelement sein, wie es in der Dateikomponente definiert ist. Artikel der Saison Dann haben wir die Klasse verlassen und die Klasse schreiben. Aber hier haben wir das folgende Markup, was bedeutet, dass wir Staffeln und Folgen anzeigen möchten. Sehen wir uns auf der linken Seite und den Rest auf der rechten Seite an. Wir können Staffeln und Folgen in Div. zusammenfassen. Direkt in das Div können wir den Klassennamen von left eingeben. Dann geben wir dem Div den Klassennamen von right. Das Premierendatum und das Enddatum der Staffel, wir können sie vielleicht in das starke Etikett stecken , um es gewagt zu machen. Lassen Sie uns versuchen zu sehen, was wir am Ende haben. Jetzt haben wir das, mal sehen. Linke und rechte Seite sind genau so, wie wir sie hier definiert haben. Wir sehen hier keine Kühnheit, aber jetzt sehen wir sie, weil wir sie haben. Lassen Sie uns das Markup überprüfen. Großartig. Unsere Daten sind jetzt fett gedruckt, weil sie sich innerhalb des starken Tags befinden. Perfekt. Lassen Sie uns jetzt weitermachen. Wir haben hier auch ShowCard. Das wird endlich interessant. In ShowCard unten werde ich diesen Aktionsbereich und den StarBTN-Abschnitt platzieren . Lassen Sie mich wie gewohnt den Stil aus gestylten Komponenten importieren. Das erste, was ich hier tun möchte, ist das Folgende. Wenn wir zu unserer App zurückkehren und uns die Zusammenfassung ansehen, die wir hier entfernen, erhalten wir, wie Sie sich erinnern, rohes HTML. Wir ersetzen alle HTML-Tags, HTML-Zeichen. Aber es sieht so aus, als würde es einfach ohne Grund herausgeschnitten. Am Ende können wir nur drei Punkte hinzufügen , um es benutzerfreundlicher zu gestalten. Wir können entweder eine Zeichenkettenvorlage wie diese anwenden und am Ende können wir drei Punkte hinzufügen. Aber um es, sagen wir, weniger ausführlich zu machen, können wir es einfach mit dem Plus-Operator verketten und es wird genau das gleiche Ergebnis liefern, aber es sieht viel besser aus, denke ich. In diesem Fall passt es besser. Wenn wir jetzt hinschauen, sehen wir am Ende drei Punkte, was großartig ist. Lassen Sie uns nun die gestylten Komponenten verwenden, die wir hier haben. Zuallererst haben wir keine, sagen wir, gestylte Komponente die unseren Marker umschließt, die, sagen wir, Stile für die Karte bereitstellt , nur für etwas Bestimmtes wie Action-Section und StarBTN. Aber wir haben diese Komponentendatei im gemeinsamen Stil namens searchCard.jsx erstellt und darin haben wir eine Suchkarte und einen Suchbild-Wrapper. Lassen Sie uns diese beiden in ShowCard verwenden und wir werden diese beiden später in der Schauspielerkarte verwenden. Ich werde von Common SearchCard importieren. Ich werde angeben, dass ich SearchCard importiere und SearchImageWrapper importiere. Jetzt wird SearchCard das Wrapping-Div sein. Dann ist das Div, das das Bild umschließt tatsächlich searchImageWrapper. Dieser ActionSection hier wird das Div sein , das unseren Aktionsbereich definiert Lesen Sie mehr in den StartMe-Schaltflächen. Dann haben wir hier auch StarBTN, das ist ein Button-Element im Stil, das ist dieses. Lassen Sie uns jetzt versuchen, es zu benutzen. Mal sehen, wie unsere Karten gerade aussehen. Sie können sehen, dass sie nicht schlecht aussehen. Alles scheint gültig zu sein, aber wir haben hier, sagen wir, kein Symbol. Das Symbol, das wir zuvor erstellt haben, ist dieses StarIcon. Dies ist nur ein gestyltes Div mit diesem spezifischen CSS-Attribut, sagen wir Clippath. Lass uns versuchen, es zu benutzen und schauen wir uns an, wie es aussehen wird. Anstatt die Texte isStarred unStar Me und Star Me zu verwenden. Ich werde das kommentieren. Darin werde ich die StarIcon-Komponente übergeben, aber ich muss sie auch aus dem normalen StarIcon importieren. Großartig. Lassen Sie uns jetzt sehen. Jetzt haben wir hier den Stern , der mit der CSS-Eigenschaft clip path erreicht wird. Aber du kannst sehen, wenn ich darauf klicke, wenn ich versuche, die Show zu starten, passiert nichts. Wir müssen es irgendwie aktiv machen. Wir müssen die Benutzer wissen lassen , dass diese Show beginnt. Zuvor verwendeten wir Conditional Rendering, Star me und Unstar me. Aber jetzt, da wir gestylte Komponenten haben, können wir dynamische Stile sehr einfach anwenden , indem wir die Zeichenketteninterpolation innerhalb gestylter Komponenten verwenden . Ich übergebe einfach diese Funktion und spezifiziere. Wenn wir props.active an die Sternsymbolkomponente übergeben haben , wenden Sie bitte diese gelbe Farbe an. Andernfalls tragen Sie bitte diese grauweiße Farbe auf. Was wir hier tun müssen, ist, dass wir die aktive Requisite hier einfach an die Sternsymbolkomponente übergeben , die isStarred sein wird. Wenn isStarred auf true gesetzt ist, active prop den Wert true, was bedeutet, dass es innerhalb der Style-Komponente verwendet wird , um die gelbe Farbe auszuwählen. Wenn es falsch ist, wird es hier die graue Farbe sein. Lass es uns versuchen und sehen. Ich speichere alles. Jetzt können Sie sehen, dass es tatsächlich gelb ist , weil diese Show jetzt in den Hauptrollen aufgeführt ist. Wenn ich darauf klicke, werden die Stile geändert. Ich klicke noch einmal darauf, bumm, die Show ist in den Hauptrollen. Ziemlich genial. Cool. Wir sind hier mit ShowCard fertig. Gehen wir nun zu unserem Gast über. Hier haben wir auch unsere letzte Komponente hier in guests showMainData. Lass uns eigentlich alles von hier kopieren. Wo ist es? Es ist einfach weggeflogen. Kommen wir zurück zu ShowMainData. Unten haben wir hier tatsächlich viele Komponenten. Gehen wir nach oben und lassen Sie uns sehen. Zuerst haben wir MainDataWrapper. Dies wird das Div sein , das alles umschließt, also Klammer öffnen, Klammer schließen. Bum, wir haben es. Dann haben wir den Bildumbruch und dann haben wir im Inneren Bildtextstil, was bedeutet, dass wir das Markup hier ein wenig ändern müssen. Wir werden einen zusätzlichen Div-Wrapper für das Image-Tag hinzufügen und className für das Div wird image-wrap sein. Cool. Nun, dieser Div hier , der den Rest des Markups umschließt, wird dieser Datenabschnitt sein, den wir hier haben. Lass es uns benutzen. Großartig. Jetzt haben wir auch die Überschrift und wir haben auch eine Zusammenfassung und die Genres. Unsere Überschrift wird das Wrapper für H1 Div und Span sein. Es ist ein bisschen zu abstrakt, aber die Überschrift wird hier nur das h1-Tag sein, das div- und vielleicht das Startsymbol , das wir hier noch nicht verwendet haben. Lass mich h1 und div hier einpacken. Wir haben Headline, die jetzt den Titel hat , die das Div mit Bewertung haben, aber innerhalb des Divs können wir auch sagen StarIcon hinzufügen. Lassen Sie mich hier rating.average verwenden und je nach unserem Stil haben wir das Span-Element in Dive, sodass wir es tatsächlich in eine Span einwickeln können. Dann können wir hier das StarIcon verwenden, das wir von Common StarIcon importieren werden. Wir rufen einfach die StarIcon-Komponente auf und geben an , dass sie immer aktiv ist. Wir werden immer die gelbe Farbe haben. Irgendwann wird das Markup so aussehen. Lass es uns versuchen und das Ergebnis sehen. Am Ende haben wir hier diesen gelben Stern , der neben der Bewertung immer gelb sein wird. Cool. Es sieht nicht schlecht aus. Hier haben wir auch eine Zusammenfassung und die Genres. Die Zusammenfassung wird nur das gestylte Div und die Genres auch das Div im Stil haben; lass es uns benutzen, oder das umschließende Div oder vielleicht auch nicht. Genres werden nur das Div sein , das die Methode.map löscht. Lass es uns versuchen zu sehen, und jetzt schau dir einfach unsere Seite an, wie schön es ist. Es ist vollständig responsiv. Sie können versuchen, die Größe des Fensters zu ändern und auf Ihrem Handy darauf zuzugreifen. Es wird auf allen Geräten gut aussehen. Geh zurück zur Startseite, wir haben diese Seite gestylt. Wir haben fast alles gestylt, aber wir vermissen ein paar Dinge. Sie können zum Beispiel sehen, dass diese Kartenliste , sagen wir, überhaupt nicht gestylt ist. Wir wollen ein Netz haben. Mal sehen, welche Dinge wir hier nicht gestylt haben. Wir haben Show Grid nicht gestylt, also kehren wir zu ShowGrid zurück. Hier verwenden wir für dieses Div die wiederverwendbare, von uns erstellte Komponente namens FlexGrid. Ich verwende einfach dieses FlexGrid in ShowGrid und lasse mich all diese Komponenten schließen , weil wir viele Dateien geöffnet haben. Ich gehe zurück zu ShowGrid. Hier verwende ich FlexGrid und importiere es aus /common/FlexGrid. Fantastisch. Ich gehe zurück auf die Seite und du siehst, dass alles gut aussieht. Es ist vollständig responsiv und sieht gut aus. Was ist jetzt mit Schauspielern? Lass mich nach Schauspielern suchen. Man kann sehen, dass Schauspieler nicht gestylt sind , weil wir sie komplett vergessen haben. Lass uns das reparieren. Wir gehen hier zu Schauspielern. Für ActorCard importieren wir diese gemeinsame SearchCard-Komponente von Common SearchCard wird searchCard sein und alles in eine SearchCard wickeln wenn wir in die SearchCard-Datei schauen. Wir haben hier auch searchImageWrapper, also verwenden wir für das Div, das das Bild-Tag umschließt searchImageWrapper, das ebenfalls aus Common SearchCard importiert wird . Mal sehen, vielleicht müssen wir von hier aus je nach Stil etwas ändern , aber ich denke nicht, dass wir das nicht tun müssen. Wir müssen das FlexGrid auch tatsächlich verwenden , um aus unseren Karten ein Raster zu erstellen. Wir gehen zu ActorsGrid und verwenden wie zuvor nur FlexGrid aus dem gemeinsamen FlexGrid importiert wurde. Jetzt sieh dir das an. Es sieht toll aus. Schauspieler sind gestylt, Shows sind gestylt, alles sieht toll aus. Wir haben dieses StarIcon, aber wenn wir zur Starred-Seite gehen, sehen wir auch , dass alles gut aussieht da wir in der Starred-Komponente innerhalb der Starred-Seite die wiederverwendbare ShowGrid-Komponente verwenden. Lass uns den Rest sehen. Was haben wir hier? Auf anderen Seiten haben wir auch nur ein paar Dinge verwendet. In Starred verwenden wir zum Beispiel diese leeren Divs ohne Stile. Wir können sie durch eine textsensorische Komponente ersetzen , die sich in einem gemeinsamen Ordner befindet. Dies ist auf der Starred-Seite. Anstatt nur div zu zeigen, wurden keine Shows in den Hauptrollen gezeigt. Wir werden TextCenter verwenden und dieses TextCenter muss aus Components/Common/TextCenter importiert werden . Einfach so. Anstelle dieses Div verwenden wir TextCenter, es zeigt unser LadetextCenter. Überall ist TextCenter. Das Gleiche, was wir wahrscheinlich tun werden. Lass mich sehen. In JSX zu Hause zeigen wir, anstatt dieses Div und div keine Ergebnisse anzuzeigen, sondern nur TextCenter IntelliSense, das aus dem normalen TextCenter importiert wurde, keine Ergebnisse TextCenter, und ich denke, das ist es. Lass mich sehen. Wenn ich nach Hause gehe und etwas völlig Kauderwelsch tippe, haben wir definitiv keine Ergebnisse. Wir werden diese Nachricht hier haben, keine Ergebnisse. Wenn wir zu Markiert gehen und den Speicher hier leeren und die Seite aktualisieren, wird die Meldung Keine Sendungen wurden mit Sternen markiert angezeigt. Schließlich ist unsere Anwendung jetzt vollständig gestylt. Wir haben alles und wir haben uns um jede Seite in der App gekümmert . Großartig. Lassen Sie uns jetzt alles hier begehen. Würde es erlauben? In diesem Video war es eine lange Reise. Die Commit-Nachricht wird gestylt, die gesamte Anwendung gestylte Komponenten verwendet. Fantastisch. Im nächsten Video werden wir der App nur ein paar, sagen wir, kleinere Stilelemente hinzufügen . Um es noch interaktiver zu gestalten, wird das interessant sein. Wir sehen uns dort. 87. 31 Styling der App p3: Hallo, herzlichen Glückwunsch zum Styling der gesamten App. Jetzt haben wir alles vorbereitet. Wir können jedoch ein paar Teile verbessern, sodass es meiner Meinung nach etwas besser aussieht. Zuallererst möchte ich erwähnen, dass, wann immer wir nach Karten suchen, diese einfach bei uns auftauchen. Wäre es nicht schön, etwas Animation bereitzustellen , wenn diese Elemente erscheinen, zum Beispiel eine Einblendanimation. der NPM-Registry finden Sie das Paket React Fade In, das nur eine Komponente ist , die Sie importieren. Sie spezifizieren es genauso wie wir gestylte Komponenten verwenden. Sehr ähnlich und dann bietet es Animationselemente für seine Kinder. Sie verblassen und sie verblassen mit der Verzögerung. Dieses Paket ist sehr einfach zu verwenden, es ist jedoch immer noch ein Paket. Ich meine, für einen so einfachen Anwendungsfall benötigen wir möglicherweise überhaupt kein Paket. Sie können es einfach installieren und denken nicht darüber nach, CSS zu schreiben, aber weniger Pakete haben Sie, desto besser, weil es weniger Abhängigkeiten in Ihrer App hat. Zuerst wollte ich dieses Paket verwenden, aber dann habe ich beschlossen, dass wir tatsächlich nur ein sehr kleines CSS-Markup schreiben können nur ein sehr kleines CSS-Markup , das einen sehr ähnlichen Effekt erzielt. Wenn wir hier zum Kern zurückkehren und die MD-Datei mit drei Punkten gestalten, finden Sie hier das, sagen wir, erweiterte Flags-Grid MD-Datei mit drei Punkten gestalten, finden Sie hier das, sagen wir, , das wir bereits in Common Flex Grid jsx mit dieser Animation und den Keyframes haben . Lassen Sie mich das alles kopieren und einfach ersetzen. Jedes Mal, wenn die Flex-Grid-Komponente montiert wird, wird diese Fade-In-Animation angezeigt, die durch diese Keyframes definiert wird. Es wird einfach die Kapazität von Null auf Eins bringen und wir werden einen sehr ähnlichen Effekt erzielen wie React Fading, aber ohne die Verzögerung. Lass es uns versuchen und sehen. Wann immer ich jetzt nach Schauspielern oder Serien suche, genau wie immer, wenn ich irgendwo die Flex-Grid-Komponente verwendet habe , werden Sie sehen, dass diese Fade-In-Animation im Spiel ist, egal ob sie für Serien ist, ob sie für Schauspieler ist, ob sie auf der Startseite ist. Sehr ähnlicher Effekt, jedoch ohne jegliche Abhängigkeit. Sie sollten auch bedenken, dass Sie sich in Zukunft, wenn Sie etwas von npm installieren wollen, wenn Sie etwas von npm installieren wollen, zuerst eine Frage stellen sollten. Brauchst du diese Abhängigkeit wirklich oder kannst du sie selbst machen? Das ist sehr wichtig , wenn Sie an echten Projekten arbeiten wollen . Großartig. Nun, das nächste, was ich hinzufügen möchte, ist, dass, wann immer wir eine Show beginnen, unser Stern, den wir hier haben, einfach gelb wird. Das ist nicht schlecht, aber wir können es benutzerfreundlicher machen und wir können, sagen wir, eine Animation bereitstellen, wenn wir mit einer Schaltfläche beginnen, wenn wir diese Show starten, der Stern tatsächlich, sagen wir, irgendwie animiert wird. Wenn wir hier darauf zurückkommen, finden wir das auch unter Styling Teil drei MD, die Karte JSX mit verbesserter StarBTN-Style-Komponente zeigen. Gehen wir zu den Shows, zeigen wir die Karte. Hier haben wir das StarBTN, wenn wir es vergleichen. Hier definieren wir eine weitere Klasse namens Animate und wir haben hier etwas Neues. Kopieren wir es und schauen wir uns an, was wir haben. Zuallererst definieren wir die Animate-Klasse, die auch Animationen hat, wie sie durch diese Keyframes definiert sind, aber wir haben hier auch diese Interpolation und wir haben hier ein Sternsymbol, was sie bewirkt. Sie wissen, dass wir innerhalb des CSS-Markups, innerhalb der gestylten Komponente, ähnlich wie bei SAS die Verschachtelung von Elementen spezifizieren können . Hier habe ich das Startsymbol interpoliert und das bedeutet, dass alles, was ich hier interpoliert habe, tatsächlich auf vorhandene gestylte Komponenten als Referenzgetriebe aufgelöst wird . In dieser Animate-Klasse haben wir, wann immer dieses Element StarBtn die Animate-Klasse hat, innerhalb dieses Elements starBTN wann immer dieses Element StarBtn die Animate-Klasse hat, innerhalb dieses Elements starBTN unser Symbol verschoben. Wann immer es StarBtn gibt, eine aktive Klasse, wird eine animierte Klasse haben, bitte stylen Sie die Sternsymbolkomponente, die darin verwendet wird. Auf diese Weise können wir beschließen, den Symbolstil gezielt zu starten. Dieses Element, wann immer StarBTN eine Klasse hat. Lass es uns versuchen und sehen. Wir möchten der StarBtn-Komponente den Klassennamen animieren, wenn die Show gestartet wird. Was nur angeben wird, wann die Show gestartet wird, bitte fügen Sie die Animate-Klasse an. Lass es uns versuchen und sehen. Kehren wir zu unserer Anwendung zurück und Sie haben gerade diese Animation gesehen. Immer wenn ich auf die Show klicke, wird sie jetzt vergrößert und verkleinert. Es funktioniert. Sieht soweit gut aus, aber wenn wir zur Startseite gehen und wenn ich die Seite aktualisiere wird immer noch dieselbe Animation angezeigt und ich habe nichts getan. Das liegt daran, dass beim Einhängen der Komponente diese Animate-Klasse hinzugefügt wird, weil unsere Show bereits begonnen hat und wir die Animation sehen. Das ist nicht schlecht, aber das ist nicht gerade das Verhalten , das wir erreichen wollen. Wir wollen die Animation nur ausführen, wenn die Komponente tatsächlich gestartet wurde, nicht wenn die Komponente montiert wird. Um das gewünschte Ergebnis zu erzielen, werden wir einen neuen Hook namens use ref einführen . Was ist das? Lassen Sie uns es zunächst aus React importieren. Dies ist einer der integrierten Hooks, die Sie während Ihrer zukünftigen Entwicklerkarriere benötigen. Was ist das für ein Haken? Use ref ist nur ein Hook , den du so aufrufst und dieser Hook gibt dir eine Referenz zurück. Eine Referenz, die Sie dann angeben, oder sagen wir , diese Referenz einem Element zuordnen . Lass es uns versuchen und sehen. Zum Beispiel möchten wir diesem StarBTN eine Referenz geben. Nennen wir diese Referenz einfach so StarBTN ref. Damit wir diese Referenz verknüpfen können, haben wir gerade den Hook aufgerufen unsere StarBtn-Ref-Variable erhalten, jedoch noch keinem dieser Elemente zugeordnet ist. Um das zu tun, müssen wir an StarBtn, eine Requisite, eigentlich ein Attribut namens ref übergeben StarBtn, eine Requisite, eigentlich ein , und an diese Referenz geben wir die StarBtn-Referenz an. Sie können Ref einfach an Ihre benutzerdefinierten Komponenten übergeben , sagen wir. Wenn ich das habe, lass mich zum Beispiel den App-Titel sehen, den ich im Hauptlayout verwende Ich kann nicht einfach die Referenz übergeben und dann etwas anderes angeben. Ref wird nur an die zugrunde liegenden nativen HTML-Elemente übergeben . Wenn Sie Referenzen an Ihre benutzerdefinierten Komponenten weitergeben möchten, müssen diese ordnungsgemäß behandelt werden, und darüber werden wir in Zukunft sprechen . Aber vorerst beschränken wir uns auf native Elemente, da StarBTN im Grunde nur ein natives HTML-Element ist, denn unter dem Haken ist es immer noch nur ein Button. Es ist eine Komponente, die von der Styled Components Library erstellt wurde und Referenzen ordnungsgemäß verarbeitet. Was auch immer wir hier übergeben, wir werden im Grunde zum nativen HTML-Element der Schaltfläche weitergeleitet . Wir übergeben ref als StarBtnRef. Nun, was können wir damit machen? Warum sollten wir das tun? Lassen Sie uns versuchen , den onClick-Handler hier zu überarbeiten , den wir an StarBtn übergeben. Anstatt eine Funktion zu übergeben , die onStarmeClick aufruft, erstellen wir eine Funktion namens handleStarClick, die wir hier erstellen werden. HandleStarClick inside, das onStarmeClick aufruft und die ID hineingibt. Lassen Sie uns aber auch StarBtnRef auf der Konsole protokollieren und sehen, was wir haben. Wenn wir eine Konsole öffnen, , wenn ich hier klicke sehen wir jedes Mal, wenn ich hier klicke, das Objekt mit nur einer Eigenschaft namens current. Wann immer Sie eine solche Referenz erstellen, haben Sie immer ein Objekt, egal was passiert, mit dem aktuellen Schlüssel. Sie können sehen, dass die aktuelle Eigenschaft auf das Button-Element verweist , auf das HTML-Element namens Button, nicht auf Button 2, sondern nur auf das darunterliegende Button-Element. Dies entspricht beispielsweise dem Schreiben von document.getElementById. Wenn Sie ein Element anhand der ID abrufen, ist dies das Äquivalent. Wann immer Sie in React direkt mit der DOM-API auf das zugrunde liegende Element zugreifen müssen , anstatt document.getElementById, document.getElementByClassName mit etwas anderem verwenden, würden Sie Referenzen verwenden und dann starbtnRef.Current verwenden und dann Ihr Element abrufen. Ich speichere es, starbtnRef.Current. Nochmals, ich klicke auf den Button, du wirst sehen, dass ich jetzt dieses Element habe, was bedeutet, dass ich hier einfach alles verwenden kann, was ich will, und mit der DOM-API damit spielen kann. Es ist jedoch wichtig, Elemente zu verknüpfen und die Referenz zu übergeben. Denn wenn ich das nicht mache, meine Referenz leer. Lass es mich versuchen und sehen. Ich aktualisiere die Seite. Ich klicke, jetzt gibt mir mein StarBtnRef.Current undefined , weil jetzt meine Referenz leer ist. Es war mit nichts verbunden. Sie nicht, das ref-Attribut zu übergeben , wenn Sie ref verwenden Vergessen Sie nicht, das ref-Attribut zu übergeben , wenn Sie ref verwenden. Da jetzt starbtnRef.Current auf das zugrunde liegende DOM-Element zeigt, können wir die DOM-API verwenden, um unsere Klassennamenliste zu manipulieren. Hier erstelle ich einfach eine Variable namens, sagen wir starBtnElement. Es wird starbtnRef.Current sein. Zuallererst kann unser Strom, wie Sie gerade gesehen haben, undefiniert sein, also werden wir hier einfach einen Safe-Check durchführen. Wenn starbtnRef.element falsch ist, beenden Sie bitte diese Funktion. Andernfalls fahren wir fort und sagen, wenn die Show mit den Sternen markiert ist, in diesem Fall bitte wie folgt vor. Mir ist gerade aufgefallen, dass es Start statt Stern heißt. Lassen Sie mich es in StarBtnElement umbenennen. StarBtnElement.ClassList.remove (animiert). rufen wir star.btnElement.ClassList.Add (animate) auf. Zunächst einmal stimmt die Logik hier nicht. Lassen Sie uns zunächst sehen, ob das funktioniert, und dann werden wir das besprechen. Immer wenn ich klicke, kannst du sehen, dass meine Sendung mit den Hauptrollen gespielt wird und ich sehe die Animation nur , wenn ich hier klicke. Aber wenn ich zu den Sternen zurückkehre, habe ich immer noch diese Animation. Das liegt daran, dass ich diesen ClassName hier verwende. Lass mich es entfernen. Versuchen wir es jetzt und sehen es uns an. Derzeit läuft keine Animation. Lass mich zurück zur Homepage gehen. Aber wenn ich versuche, die Show zu starten, kann man sehen, dass die Animation da ist. Warum verwenden wir diese Logik hier? Wenn diese Funktion ausgeführt wird, hat isStarred immer noch den vorherigen Status. Lesen Sie es einfach, da der Code hier geschrieben ist. Unsere Show ist derzeit in den Hauptrollen zu sehen. Wenn wir darauf klicken, möchten wir keine Animation ausführen. Wenn unsere Sendung gerade als Star markiert ist und wir sie nicht mehr als markiert markieren, entfernen wir die Animate-Klasse. Wir wollten hier keine Animation laufen lassen. Wenn unsere Sendung jedoch derzeit unstarred ist, diese andere Bedingung ausgelöst. In diesem Fall fügen wir die Animate-Klasse hinzu, um die Animation bereitzustellen. Auf diese Weise können wir mithilfe der DOM-API des useRef-Hoops Klassennamen direkt manipulieren, und des useRef-Hoops Klassennamen direkt manipulieren, sagen wir, unbedingt mithilfe der DOM-API, anstatt die ClassName-Schnittstelle zu verwenden , die uns React zur Verfügung stellt. Einfach so können wir Animationen hinzufügen und haben den neuen Hook namens useRef kennengelernt. Um es kurz zusammenzufassen UserRef kann als Referenz für zugrunde liegende native HTML-Elemente verwendet werden , falls Sie Zugriff auf die DOM-Schnittstelle dieses Elements erhalten möchten , etwa so. Lass uns alles zur Bühne hinzufügen und lass uns festlegen. Erstens haben wir das React Fade-In-Paket nicht verwendet. Wir verwenden unser einfaches CSS, um einen sehr ähnlichen Fade-In-Effekt zu erzielen. Anstatt dann nur className zu verwenden , um Animationen für das Starelement bereitzustellen , verwenden wir den useRef-Hook, um Zugriff auf das zugrunde liegende DOM-Element zu erhalten . Dann verwenden wir diese DOM-API, ClassList-Eigenschaft des DOM-Elements, um die Animate-Klasse hinzuzufügen und zu entfernen , um unbedingt Animationen hinzuzufügen oder zu entfernen, die in unserer gestylten Komponente definiert ist. Jetzt können wir das übernehmen und sagen, FlexGrid eine Animation hinzugefügt. Nehmen wir an, FlexGrid wurde eine Einblendanimation hinzugefügt. StarBtn-Animation hinzugefügt, oder sagen wir, eine Skalenanimation zu StarBTN hinzugefügt. Fantastisch. Das war's für heute. Wir sehen uns im nächsten. 88. 32 Bereitstellung auf Github-Seiten: Hallo. In diesem Video werden wir Box Office endlich einsetzen, sodass wir am Ende eine öffentlich zugängliche URL haben , die wir mit unseren Freunden teilen können. Im vorherigen Projekt, in Tic Tac Toe, haben wir einen Dienst namens Search.SH verwendet Dieses Mal werden wir etwas Neues ausprobieren. Das Hosting, das wir verwenden werden, wird GitHub Pages sein. Warum GitHub Pages und nicht Search? Zuallererst sind sie sich sehr ähnlich, beide werden verwendet, um statische Dateien zu hosten, aber wir wollen erkunden, wir wollen neue Dinge ausprobieren, wir wollen Alternativen sehen. Am Ende können Sie vergleichen, was Ihnen besser gefällt, GitHub Pages oder Search oder vielleicht sogar etwas anderes. Lass uns gehen. Zunächst navigieren wir zur Dokumentation zur Create React App. Wenn wir auf „Get Started“ klicken, können wir links nach dem Abschnitt Bereitstellungen suchen. Im Deployment-Bereich können wir nach GitHub Pages suchen. Was wir tun werden, werden wir einfach dieser einfachen schrittweisen Anleitung folgen . Als erstes werden wir aufgefordert, package.json zu öffnen und das Homepage-Feld für Ihr Projekt hinzuzufügen. Lass uns das machen. Ich kopiere einfach die Homepage, öffne package.json, irgendwo in package.json werden wir die Homepage hinzufügen. Aber hier müssen wir ein paar Dinge ändern. Zuallererst mein Benutzername.github.io. Mein Nutzername muss durch deinen Nutzernamen auf GitHub ersetzt werden . Ich nehme meins. Meine App muss durch deinen Repository-Namen auf GitHub ersetzt werden . In meinem Fall wird es eine Box-Office-App sein. Irgendwann wird die URL für mich so aussehen. Sehr ähnlich, muss auch für dich sein. Ich speichere package.json, ich komme zurück zum Tutorial. Sehen wir uns Schritt Nummer 2 an. Dann müssen wir ein Paket namens gh-pages installieren und dann ein Deploy-Skript zu package.json hinzufügen. Lassen Sie uns zuerst die Abhängigkeit installieren. Ich kopiere einfach den Befehl. Ich werde meine App beenden und dann den Installationsbefehl ausführen. Schauen wir uns während der Installation was wir zum Verpacken von.json benötigen. Wir müssen zwei weitere Skripts hinzufügen, Deploy und Pre Deploy. Kopieren wir sie. Kehren wir zu package.json zurück. Inzwischen haben wir die Abhängigkeit bereits installiert. Gehen wir zu den Skripten und fügen wir am Ende Predeploy und Deploy hinzu. Wir brauchen keine Pluspunkte , die kopiert wurden, wir speichern und hier, was wir sehen. Wir haben das Deploy-Skript definiert und dann haben wir Predeploy. Nehmen wir an, Npm ist intelligent genug, um zu verstehen, dass Predeploy vor dem Deploy-Skript ausgeführt werden muss. Wann immer wir also das Deploy-Skript ausführen , wird Predeploy ausgeführt. Predeploy erstellt die App, der Anwendungs-Build wird im Build-Ordner erstellt, und dann geben wir an, dass Sie den Build-Ordner hier bereitstellen, sodass sich der Build, den Sie in Zeile 35 sehen, auf den Build-Ordner in unserem Projektstammverzeichnis bezieht. Wenn wir dann im Tutorial weiter gehen und Sie die Bereitstellung stattdessen auf einer GitHub-Benutzerseite durchführen, beachten Sie, dass dies nicht unser Fall ist. Der dritte Schritt besteht darin, einfach npm run deploy auszuführen. Lass uns versuchen, das zu tun. Jetzt können wir npm run deploy ausführen. Sehen wir uns die Ausgabe an. Zuerst sehen wir npm run build, das kommt aus dem Predeploy-Skript, dann haben wir die gh-pages minus den Befehl build, und jetzt heißt es veröffentlicht, aber wir haben keine URL, wohin müssen wir gehen? Die Homepage, die wir in package.json angegeben haben, ist eigentlich die URL, die wir besuchen müssen , um auf unsere App zuzugreifen. Kopieren wir diese URL. Öffnen wir es in einem neuen Tab. Aber sobald wir hier navigieren, werden wir sehen, dass es nicht gefunden wurde, es ist 404. Was passiert also? Lassen Sie uns das untersuchen. Wenn wir zu unserem Repository zurückkehren, gibt es eine Sache, die ich zuvor nicht erwähnt habe GitHub Pages ist nur für öffentliche Repositorys kostenlos verfügbar . In meinem Fall ist das Repository privat. Es ist hier in der oberen linken Ecke mit Privat markiert Um GitHub Pages kostenlos nutzen zu können, muss ich sicherstellen, dass dieses Repository öffentlich ist. Gehen wir zu den Einstellungen und ändern in den Einstellungen die Sichtbarkeit unseres Repositorys von privat auf öffentlich. Wir gehen zur Einstellungsseite, wir scrollen nach unten und hier unter Gefahrenzone ändern wir die und hier unter Gefahrenzone Sichtbarkeit des Repositorys, wir ändern es auf öffentlich. Ja, ich möchte es veröffentlichen. Ja, ich bin mir sicher. Möglicherweise werden Sie auch nach Ihrem Passwort gefragt, das ist in Ordnung. Jetzt wurde mein Repositorium öffentlich. Wenn wir jedoch erneut versuchen, auf die URL zuzugreifen, ist sie immer noch dieselbe und wurde nicht gefunden. Wir müssen das Hosting anweisen, wir müssen GitHub Pages anweisen , dass wir unsere App jetzt veröffentlichen möchten. Zuallererst, wie funktioniert es? Wenn wir hier zur Repository-Hauptseite gehen, werden zwei Zweige angezeigt, die jetzt verfügbar sind. Bisher war es nur einer. Wenn wir jetzt auf diese beiden Zweige klicken, sehen wir hier die Filiale von gh-Pages. Wenn wir auf diesen Zweig klicken, sehen Sie alle Dateien , die wir im Build-Ordner haben. Im Grunde genommen hat der Deploy-Befehl hier, was er gemacht hat, diesen Build-Ordner verwendet , einen neuen Zweig in unserem Repository erstellt und alle Dateien aus dem Build-Ordner in den gh-pages-Zweig auf GitHub hochgeladen . Das Hosting von GitHub Pages funktioniert so , dass es einen Ihrer Zweige in Ihrem Repository benötigt und alle Dateien, die sich hier befinden, auf den GitHub-Servern gehostet werden. Auf diese Weise können wir Dateien hosten, die sich in unserem Repository befinden. Um GitHub Pages so zu konfigurieren , dass das Hosting auf diesen bestimmten gh-pages-Zweig dieser Dateien verweist, müssen wir erneut die Einstellungsseite unseres Repositorys aufrufen. Auf der linken Seite suchen wir nach dem Abschnitt Seiten, und hier geben wir an, dass, okay, die Quelle für unser Deployment von einem Zweig aus bereitgestellt wird. Dies ist die Standardeinstellung, das sollten Sie vorerst haben, und für den Zweig geben Sie an, dass Sie unsere Dateien vom gh-pages-Zweig aus hosten möchten . Wir klicken auf „Speichern“ und direkt danach wird die Bereitstellung ausgelöst. Jetzt dauert es ein paar Minuten, ein oder zwei Minuten, um all Ihre Dateien aus dem gh-Branch in Ihrem Repository auf das Hosting zu übertragen. Wenn wir hier zu Aktionen gehen , dem Tab Aktionen in Ihrem Repository, sehen Sie hier nun diesen einen Workflow-Lauf. Wenn Sie darauf klicken, sehen Sie den Fortschritt Ihres Einsatzes. Sobald es fertig ist, sehen Sie hier eine grüne Markierung. Das bedeutet, dass Ihre App hier unter dieser URL veröffentlicht wird . Lass uns warten, bis es fertig ist und dann melde ich mich bei dir. Jetzt scheint es, dass unsere App bereitgestellt wurde. Man kann sehen, dass alles grün ist. Jetzt habe ich auch diese URL hier gesehen. Wenn ich darauf klicke, sehe ich das. Zuallererst ist meine Anwendung wie zuvor unter derselben URL verfügbar , die Sie auf der Homepage angeben, unter dem Homepage-Schlüssel in package.json. Aber wenn wir darauf zugreifen, sehen wir Not Found. Warum ist das so? Die Sache ist, dass es tatsächlich bereitgestellt wurde, aber aus irgendeinem Grund heißt es nicht gefunden, und es kommt definitiv aus unserer Anwendung, denn wenn wir das Markup untersuchen, ähnelt es unserer Anwendung, dem, was wir in index.html haben, unserem Skelett. In der Öffentlichkeit haben wir dieses Skelett. Es gehört uns. Wir haben den gleichen Kopf, wir haben alles dasselbe. Aber was ist passiert? Die Sache ist, wenn wir zum Tutorial in der Create React App-Dokumentation zurückkehren , es enthält diesen Hinweis namens Notes zum clientseitigen Routing. Das Problem ist, dass das GitHub-Hosting nicht wirklich für die Verarbeitung von clientseitigen Anwendungen konfiguriert ist , um keine Single-Page-Apps zu verarbeiten , die clientseitiges Routing verwenden. Weitere Informationen finden Sie hier in der offiziellen Dokumentation. Wir werden etwas namens HashRouter von React Router verwenden . Dies ist eine der hier angebotenen Lösungen . Lass uns das machen. Wir kehren zur App zurück, wir Open Source, App.jsx. Hier verwenden wir BrowserRouter, der aus React Router dom importiert wird. Stattdessen können wir etwas namens HashRouter verwenden , und das war's. Der Rest wird auf React Router dom sein. Dafür werden wir keine zusätzlichen Schritte benötigen. Um zu verstehen, was es tut, lassen Sie uns zuerst den lokalen Entwicklungsserver erneut ausführen , npm run start. Das haben wir jetzt. Zuallererst ist unsere App jetzt, obwohl sie lokal bereitgestellt wird, unter dem Präfix /box-office-app verfügbar, unabhängig davon, welches Präfix wir auf der Homepage im Paket JASON angeben . Create React-App ist intelligent genug, um zu verstehen, dass wir sie unter dem App-Präfix für die Kinokasse bereitstellen können . Deshalb wird es hier aufbewahrt. Wenn Sie jedoch Apps unter einem Präfix bereitstellen, müssen Sie dies als Ihre Basis-URL betrachten. Was ich damit meine, wenn wir suchen, zeigt zum Beispiel, zeigt zum Beispiel, wenn wir hier den Mauszeiger auf read more bewegen, gehen wir zu dieser Seite /show/show ID. Wenn wir auf GitHub-Hosting sein können, sieht unsere URL wie folgt aus : /box-office-app/show/show ID. Aber wir werden dieses Präfix nicht haben, genau wie wir es hier auf dem lokalen Host haben. Es wird problematisch sein , da unsere Seite sonst nicht gefunden wird. Was ich damit meine ist, dass wir zuerst die App bereitstellen und Sie werden sie selbst sehen, und dann werden wir das mit einer sehr kleinen Ergänzung zu unserem bestehenden Code beheben . Ich führe das Deploy-Skript einfach erneut aus. Es erstellt erneut meine App und veröffentlicht sie dann erneut auf GitHub Pages. Wenn wir auf der Registerkarte Aktionen zum Repository zurückkehren, wird erneut ein Workflow ausgeführt. Wir warten einfach, bis es eingesetzt ist , und dann checken wir aus. Es ist jetzt im Einsatz. Kommen wir zurück zur App. Wenn wir zu unserer App zurückkehren, sehen wir immer noch nicht gefunden. Aber wenn ich aktualisiere, haben wir jetzt die Anwendung. Es sieht vollkommen in Ordnung aus. Wenn Sie sich jedoch die URL ansehen, haben wir jetzt diesen Hash hier. Es wird verwendet, um das clientseitige Routing ordnungsgemäß zu handhaben , wenn wir es auf GitHub Pages bereitstellen. Aber wir haben noch ein weiteres Problem, das ich gerade erwähnt habe, mit dem Link, mit dieser Schaltfläche „Mehr lesen“. Wenn ich auf diese Schaltfläche klicke, sehen Sie, dass wir zu /show/show ID navigieren. Wir haben kein App-Präfix für die Kinokasse und aus diesem Grund haben wir 404. Um das Problem zu lösen, müssen wir zuerst verstehen, warum es passiert. Lass uns mehr lesen und markieren. Das werden Komponenten, Shows, Showcard sein. Hier verwenden wir ein einfaches Ankertag, das auf /show/show ID zeigt. Das ist in Ordnung und es wird funktionieren. Es funktioniert, wenn unsere App unter der Route und nicht unter dem Präfix bereitgestellt wurde . müssen wir irgendwie in Ordnung bringen. Eine naive Lösung besteht darin, das Präfix, das Sie hier haben, manuell einzugeben. Es wird funktionieren, aber das ist keine gute Lösung. Wir müssen uns irgendwie automatisch für das Präfix entscheiden, das wir hier haben. React Router kümmert sich darum. In der Vergangenheit haben wir die Link-Komponente, die wir von React Router verwendet haben , durch diesen Ankercheck ersetzt React Router verwendet haben , durch diesen Ankercheck da wir diese Link-Komponente nicht wirklich benötigten. Aber jetzt werden wir es wieder zurückbekommen. Ich werde den Link von React Router dom importieren. Dann verwende ich statt des Ankertags wieder einen Link, noch einmal. Anstelle von href gebe ich to an und lasse das Feld Ziel und die Beziehungsattribute leer. Auf diese Weise haben wir immer noch den gleichen Link wie zuvor, aber diesmal kümmert sich die Link-Komponente von React Router dom um das Präfix. Es wird automatisch zur richtigen URL weitergeleitet. Versuchen wir nun erneut, das Bereitstellungsskript auszuführen, die App erneut bereitzustellen und das Endergebnis zu sehen. Wir sehen uns, sobald es eingesetzt ist. Ich habe noch eine Minute gewartet. Hier ist mein dritter Einsatz, erst vor einer Minute veröffentlicht wurde. Ich werde zu meiner App zurückkehren. Ich werde mich erfrischen. Ich suche nach Sendungen und wenn ich jetzt auf Read More klicke, wurde meine URL jetzt korrekt aufgelöst da sie jetzt von der React Router-Bibliothek verarbeitet wurde. Einfach so konnten wir unsere App bereitstellen. Glückwunsch. Kehren wir nun zu unserem Code zurück und lassen Sie uns alles bestätigen. Zunächst haben wir die Bibliothek gh pages installiert, um sie auf GitHub Pages bereitzustellen. Das Homepage-Feld im Paket JSON gibt an, Das Homepage-Feld im Paket JSON wo genau die Anwendung bereitgestellt wird. Auch hier stellen wir den Build-Ordner bereit, der durch den Befehl npm run build erzeugt wird. Jetzt ersetzen wir auch den Browser-Router durch Hash-Router, da GitHub Pages das clientseitige Routing nicht richtig handhabt. Eine Möglichkeit, dieses Problem zu beheben, besteht darin, den Hash-Router zu verwenden wie in der Dokumentation zur Create React-App vorgeschlagen. Dann haben wir auch ein einfaches Ankertag wieder auf die Link-Komponente von React Router dom geändert ein einfaches Ankertag wieder auf die Link-Komponente von , da wir uns auf das Präfix festlegen müssen , sobald unsere App auf GitHub Pages bereitgestellt ist. Lass uns alles zur Stage hinzufügen und dann Commit und sagen wir Deployment, die App auf GitHub Pages bereitstellen, HashRouter verwenden, Link statt nativen Ankertag verwenden. Cool. Ich schiebe alles auf den Master und gehe zurück zu meinem Repository, nur Fälle, um sicherzustellen, dass alles bereitgestellt wird. Meine letzte Änderung vor 10 Sekunden. Ich habe eine zweite Filiale namens gh pages. Immer wenn Sie npm run deploy ausführen, aktualisiert es GitHub Pages und aktualisiert Dateien, die auf Ihrer URL gehostet werden und die Sie verwenden können, um sie mit Ihren Freunden zu teilen. Eine weitere einfache Sache, die ich hier hinzufügen möchte , ist, dass wir tatsächlich diese URL verwenden können , auf der sich unsere Anwendung befindet. Besuchen wir es einfach noch einmal. Ja, es ist in der Tat hier. Wir können diese URL zu unserem Abschnitt Über uns auf der Repository-Seite hinzufügen . Ich klicke hier auf das Einstellungssymbol. Unter Website füge ich den Link hinzu und klicke auf Änderungen speichern. Jetzt bumm, es erscheint hier. Dies dient nur dazu, dass Sie in Zukunft problemlos auf Ihre Anwendung zugreifen können . Das war's für heute, wir sehen uns im nächsten. 89. 33 PWA (Progressive Web App): Hallo nochmal. Im letzten Video haben wir die Kinokasse endlich in der Live-Umgebung eingesetzt. Dieses Mal werden wir über Servicemitarbeiter sprechen. Wie Sie sich erinnern, haben wir im allerersten Video, als wir dieses Projekt erstellt haben, den Servicemitarbeiter, Registrierung von Servicemitarbeitern sowie den Registrierungspunkt für Servicemitarbeiter auf dem Register, und ich habe Ihnen gesagt, dass wir später darüber sprechen werden. Jetzt ist die Zeit gekommen. Dieser Servicemitarbeiter wird benötigt, um unsere Bewerbung zu erstellen, um die Kinokasse bei Progressive Web App zu erstellen. Was ist eine progressive Web-App? Eine progressive Webanwendung ist einfach jede andere Webanwendung, jede andere Website, die einer Liste bestimmter Dinge folgt . Wenn die Website-DevUp-Anwendung diese Liste von Optionen erfüllt, wird diese Website zu einer progressiven Web-App. Das bedeutet, dass die Anwendung offline verfügbar wird. Die Anwendung kann als echte mobile Anwendung installiert werden , unabhängig davon, ob Sie sich auf dem Desktop oder auf einem Mobilgerät befinden. Die Frage hier, welche Optionen machen eine Website zu einer progressiven Web-App? im Chrome-Browser Wenn Sie im Chrome-Browser zu den Chrome-Entwicklertools wechseln diesen Abschnitt auf der rechten Seite erweitern, können Sie zum Lighthouse-Abschnitt wechseln. Lighthouse ist ein integriertes Tool im Chrome-Browser. Es ermöglicht uns, die Leistung einer Website zu bewerten , indem wir die Geschwindigkeit, die Ladezeit und einige verschiedene Metriken messen . Hier unter Kategorien haben wir diesen progressiven Web-App-Check. Lassen Sie uns dorthin gelangen und dann auf Analyze Page Load klicken und sehen, was passieren wird. Es wird nur ein paar Sekunden dauern, bis die Website überprüft wird, und jetzt haben wir , dass wir fast alles perfekt grün haben, aber wir sind an keinem davon wirklich interessiert. Wenn ja, können Sie einfach nacheinander vorgehen, verschiedene Abschnitte erweitern und lesen, was verbessert werden kann, was geändert werden kann. Vielleicht müssen Sie nichts ändern , aber ganz unten haben Sie den PWA-Bereich, die Progressive Web App. Eine Liste der Dinge, die Sie hier sehen, ist im Grunde das, was die Website befolgen muss, um eine progressive Webanwendung zu werden. Zuallererst haben wir hier nicht ein paar Dinge. Unsere Anwendung ist nicht installierbar Um unsere Anwendung installierbar zu machen, müssen wir einen Servicemitarbeiter vorstellen. Was ist ein Servicemitarbeiter? Servicemitarbeiter, es ist eigentlich einfacher, wenn ich es visualisiere. Wir haben die Website hier. Unsere Website hier links. Dann haben wir auf der rechten Seite ausgehende Anfragen. Einfach so. Lassen Sie uns das vielleicht selbst überprüfen, also gehen wir zum Netzwerk-Tab und wenn wir die Seite aktualisieren, sehen wir eine Liste von Anfragen. Dies ist also, dass unser Browser eine Anfrage an den GitHub-Seitenserver stellt , um Index-HTML abzurufen, um JavaScript-CSS-Dateien vom Hosting-Server abzurufen. Ein Servicemitarbeiter ist nur ein Drehbuch. Es befindet sich im Browser, irgendwo im Browser, außerhalb unseres Anwendungsdienstmitarbeiters und was es tut, es fängt einfach all diese Anfragen ab, ausgehende Anfragen und macht etwas damit. In unserem Fall ist der Service Worker nur ein Proxy, der all diese ausgehenden Anfragen abfängt und sie in den Cache-Speicher des Browsers legt . Wenn also das nächste Mal auf diese Dateien zugegriffen wird , verwendet der , verwendet der Servicemitarbeiter den zwischengespeicherten Speicher ruft all diese Anfragen ab, und ruft all diese Anfragen ab, alle abgerufenen Dateien zuvor aus dem Cache-Speicher und stellen sie unserer Webseite zur Verfügung. Auf diese Weise kann unsere Anwendung offline verfügbar werden, was bedeutet, dass jede Anfrage, die gesendet wird, vom Servicemitarbeiter abgefangen wird. Es überprüft den Cache und wenn diese Anfragen im Cache vorhanden sind, werden sie vom Servicemitarbeiter aus dem Cache bedient. Um es kurz zusammenzufassen: Ein Service Worker ist nur ein Skript, das sich irgendwo im Browser befindet. Es ist nur ein Proxy , der ausgehende Anfragen vom Browser abfängt . So etwas. Wenn wir zu unserer Anwendung zurückkehren, sehen wir, dass wir hier eine Service Worker JS-Datei haben. Dies ist das Skript selbst, der Service Worker selbst, das im Browser außerhalb unserer Anwendung ausgeführt wird . Diese Datei, die Sie hier sehen befindet sich irgendwo im Browser. Aber die Frage ist, wie können wir damit umgehen? Wie wir damit eigentlich etwas anfangen können. Bevor wir diese Frage beantworten können, haben wir hier die Arbeitsbox. Was sind das und wenn wir in das Paket Json schauen, haben wir viele Workbox-Abhängigkeiten. Dies sind im Grunde nur Bibliotheken , die es uns ermöglichen, irgendwie, einfach eine Logik in das Service Worker-Skript zu schreiben. Sie können sehen, dass dieses Skript von der Create React-App und der hier geschriebenen Logik automatisch generiert wurde dass dieses Skript von der Create React-App und der hier geschriebenen Logik Es fängt einfach alle Anfragen ab und legt sie in den Cache-Speicher. müssen wir nicht wirklich viel nachdenken. Wir werden hier nicht unsere eigene Logik für Service Worker schreiben , wir werden bestehende Logik verwenden, und es wird ausreichen, alles zwischenzuspeichern , und das Wordbox ist nur eine Reihe von Funktionen, die wir importieren und verwenden, um das zu erreichen. Da diese Datei von der Create React-App generiert wurde, werden wir sie nicht ändern, wir sind nicht daran interessiert. Das wird wieder ausreichend sein. Jetzt haben wir auch eine Registrierung für Servicemitarbeiter. Damit der Browser versteht, dass wir dieses Service Worker JS irgendwie verwenden wollen, müssen wir es im Browser registrieren , denn wenn wir es einfach als Teil unserer Anwendung platzieren, passiert nichts, also müssen wir diesen Service Worker irgendwie in unserer Anwendung registrieren und diese Service Workerregistrierung hat hier zwei Funktionen. Die erste Funktion heißt Register, die von hier exportiert wurde, und zweite Funktion heißt Unregister. Auch hier wird all diese Logik von der Create React-App automatisch generiert und reicht für unseren Anwendungsfall wieder aus. Die Registrierungsfunktion registriert Service Worker JS, wenn unsere Anwendung ausgeführt wird registriert Service Worker JS, wenn unsere Anwendung , und die Funktion zum Aufheben der Registrierung Registrierung vorhandener Service Worker in unserer Anwendung auf. Wenn wir in den Index jsx schauen, haben wir hier alles als Service Worker Registration aus Service Worker Registration eingegeben Service Worker Registration aus Service Worker . Das bedeutet, dass wir unter dem Importobjekt für die Registrierung von Servicearbeitern Importobjekt für die Registrierung von Servicearbeitern zwei Funktionen haben, registrieren und abmelden, und die ganze Zeit hieß es für uns die Registrierung aufheben weil wir nicht an Service Worker interessiert waren. Um einen Servicemitarbeiter zu registrieren, müssen wir die Registerfunktion aufrufen. Wenn Sie jedoch Register verwenden, funktioniert es in beiden Umgebungen, wenn Sie lokal entwickeln und wenn es live bereitgestellt wird um beispielsweise GitHub-Seiten zu hosten. Aber da es Caching verwenden wird und die Caching-Strategie hier aggressiv ist, bedeutet das, dass alles zwischengespeichert wird . Ich schlage uns also zuerst zu überprüfen, ob wir uns gerade in der lokalen Entwicklung befinden Wir wollen diese Punkt- und Registerfunktion nicht nennen. Aber wenn wir uns in einer Live-Umgebung befinden, dann bitte ja, die Registerfunktion aufgerufen. Wie können wir das überprüfen und wie können wir endlich sehen, wie das funktioniert? In der Anwendung haben wir Zugriff auf etwas namens process.env. Dies ist nur eine Reihe von Umgebungsvariablen , auf die wir Zugriff haben. Umgebungsvariablen sind Variablen, die global von der Umgebung festgelegt werden , in der unser Code ausgeführt wird. Lassen Sie uns versuchen, process.env auf der Konsole zu protokollieren, und wenn ich Punkt eingebe, habe ich hier Intellisense, ich habe Node ENV. Wenn ich mit dem Mauszeiger fahre, können Sie tatsächlich sehen, dass es drei potenziell unterschiedliche Werte hat: Entwicklung, Produktion und Test. Aber in unserem Fall werden wir trotzdem log js stornieren, um zu sehen. Nehmen wir die aktuelle ENV an, und vorerst werden wir die Registrierung trotzdem aufheben. Ich werde den lokalen Entwicklungsserver ausführen, und ich werde auch das Problem beheben, dass der Prozess nicht definiert ist, das von ESLint kommt , weil Protest etwas ist das auf der JS-Seite des Knotens ausgeführt wird, nicht von JavaScript, das im Browser ausgeführt wird , also müssen wir den ESLint verstehen lassen , dass wir auch in der Umgebung von node.JS laufen, nicht nur innerhalb der Browser. Node true, dieser Knoten ist wahr Wir lassen ESLint verstehen, dass wir uns gerade in der Node-JS-Umgebung befinden . Dies wird nichts bewirken außer dass nur dieser Fehler behoben wird. Das war's. Ich führe meine App lokal aus. Wenn ich zur Konsole gehe, sehe ich, dass aktuelle ENV der Entwicklung entspricht. Was ich hier ausführen werde, um den Build-Befehl zu erstellen, um den Produktions-Build für diesen variablen Knoten ENV zu erstellen, wird bei der Erstellung festgelegt . Wenn wir also den lokalen Entwicklungsserver verwenden, ist dies ein Entwicklungs-Build. Die App ist gebaut, aber direkt unter der Haube, das sehen wir nicht. Grund sehen wir, dass der Knoten ENV auf Entwicklung gesetzt ist, da dies unser Entwicklungs-Build ist und diese Variable wiederum während der Build-Zeit gesetzt wird. Wenn wir den Befehl build ausführen, wird der Knoten ENV in unserer App auf Produktion gesetzt und wir können diese Variable verwenden , den Service Worker zu registrieren oder die Registrierung aufzuheben. Lass uns versuchen, das zu tun. Wir werden hier eine einfache Bedingung hinzufügen. Wenn process.env.node ENV gleich Produktion ist, rufen Sie in diesem Fall bitte die Registrierung von Servicemitarbeitern an und registrieren Sie sich. Cool. Versuchen wir nun, die Anwendung erneut bereitzustellen. Sobald es bereitgestellt ist, werden wir sehen, wie sich alles geändert hat. Wir sehen uns in einer Sekunde dort. Hallo nochmal. Jetzt ist unsere Anwendung bereitgestellt. Mein erster Deployment-Workflow hier. Jetzt kehren wir zu unserer Anwendung zurück, und wenn wir sie aktualisieren, wurde jetzt etwas geändert. Zuallererst haben wir dieses Installationssymbol hier in der Suchleiste, aber wir werden es gleich berühren. Wir sind an der Registerkarte Bewerbung hier interessiert. Wenn wir hier zum Abschnitt Service Worker gehen, haben wir jetzt service-worker.js. Diese service-worker.js wurde erneut durch diese Registerfunktion registriert , die aus der ServiceWorkerRegistration-Datei importiert wird . Das ist die Registerfunktion, klicken Sie auf die "service-worker.js“, die auf der box-office-apps/service-worker.js verfügbar ist. Es ist Register, dieser Service Worker im Browser, als auf unsere Anwendung zugegriffen wurde, und jetzt wird dieser Service Worker ausgeführt, was bedeutet, dass der Service Worker jetzt aktiv ist und alle ausgehenden Anfragen abfängt und sie im Browser zwischenspeichert . Sie können sehen, dass, wenn ich es erneut aktualisiere, meine Dateien, zum Beispiel dieser Index-HTML, von ServiceWorker bereitgestellt werden, genau wie die übrigen Dateien hier. Lass mich „Cache leeren und Hard Reload“ starten. Mach es nochmal. Eigentlich hat sich nichts geändert, aber die App wird immer noch von ServiceWorker aus bedient. Wenn ich mich nicht irre, ist es hier irgendwo im Cache-Speicher. Sie können es im Cache-Bereich auf der Registerkarte Anwendung sehen . Unter Cache-Speicher sehen Sie nun, wo sich die Box Precache befindet, Dateien, die im Cache gespeichert werden. Einfach so können wir den Leuchtturm betreiben. Befehlen Sie erneut und sehen Sie, was wir derzeit für die Checkliste für progressive Web-Apps haben. Lass uns gehen. Wir haben meine App geprüft. Nur ein paar Sekunden, wir gehen ganz nach unten und sehen jetzt, dass die Progressive Web App jetzt installierbar und nicht wirklich optimiert ist . Nun, es ist eigentlich optimiert, aber wir haben hier nur einen Punkt. Manifest hat kein maskierbares Symbol, aber das werden wir im nächsten Video beheben, wenn wir das Symbol, den Namen unserer App und einige weitere Dinge anpassen den Namen unserer App . Im Moment können wir sehen, dass unsere Anwendung installierbar ist. Das Symbol, das wir hier in der oberen Ecke der Suchleiste sehen , können wir darauf klicken und unsere Anwendung installieren , als wäre es eine native App. Wenn Sie ein Mobilgerät verwenden, das Popup auch angezeigt, sobald Sie auf Ihre App für ein Mobilgerät zugreifen. Sie werden das Popup sehen, in dem steht, Hey, Sie können diese Website tatsächlich als Anwendung installieren. Wenn Sie auf „Installieren“ klicken, wird die Website zu Ihrem Startbildschirm hinzugefügt, als wäre die Website zu Ihrem Startbildschirm es eine native Anwendung. Wenn ich jetzt zu meinem Desktop zurückkehre, habe ich hier diese App namens Create React App Sample. Moment hat es diesen seltsamen Namen weil dies in der Manifestdatei angegeben ist , die wir im nächsten Video anpassen werden. Aber die Sache ist, dass dies jetzt eine Anwendung ist, sie ist installierbar. Wenn ich darauf klicke, können Sie sehen, dass es jetzt nicht in einem Browser geöffnet wird. Es öffnet sich in einem eigenen Fenster als wäre es eine native echte Anwendung. Es wird genauso funktionieren wie zuvor. Ziemlich cool. Sie können sehen , dass der neue Tab tatsächlich im Browser geöffnet wurde . Das ist die Sache mit progressiven Web-Apps. Idealerweise sollten Sie nichts in neuen Tabs öffnen, sondern den aktuellen Tab verwenden und nur, sagen wir, eine Seite für die Navigation verwenden, ohne neue Tabs zu verwenden. Aber jetzt haben wir immer noch die Anwendung, die als native App läuft. All dies wurde durch den Einsatz von ServiceWorker erreicht , der uns die grüne Checkliste für progressive Web-Apps gab . Zusammenfassend lässt sich sagen, dass eine progressive Web-App nur eine Webanwendung ist, die einer bestimmten Liste von Dingen folgt. Zum Beispiel muss es über einen Service Worker verfügen, die Anwendung muss etwas Caching verwenden, damit sie offline verfügbar ist. Dann muss es auch über HTTPS und ein paar andere Dinge, die Sie in Lighthouse finden, bereitgestellt werden. Versuchen wir es noch einmal. Was haben wir noch hier? werden mehrere Tabs geöffnet. Lass mich es auffrischen. Was willst du? Analysieren Sie das Laden der Seite. Schauen wir uns die Liste einfach schnell noch einmal an. In der Liste haben wir, lassen Sie mich sehen, die Themenfarbe, konfigurierten benutzerdefinierten Begrüßungsbildschirm, das Touch-Symbol, das spezifische Viewport-Tag und das Manifest, um das wir uns sehr bald kümmern werden, Servicemitarbeiter. All diese Dinge machen eine Website, progressive Web-App, einfach so einfach. Ein weiteres Mal ist der Service Worker, als Proxy im Browser registriert wurde , um die Anfrage abzufangen , das Herzstück des Ganzen. Nur als Servicemitarbeiter konnten wir diesen installierbaren Abschnitt hier erreichen. Unsere Anwendung wurde jetzt sowohl installierbar als auch offline verfügbar. Ich denke, es war ziemlich klar was Progressive Web App genau ist, was Service Worker ist und wie alles ungefähr funktioniert. Lassen Sie uns endlich zu unserer Anwendung zurückkehren und die Änderungen, die wir vorgenommen haben, bestätigen. Zuerst haben wir Eslintrc bearbeitet, sodass wir die Datei process.env ohne Warnungen oder Fehler verwenden können , und wir überprüfen das. Wenn wir uns in der Erstellungsphase befinden, verwenden Sie bitte ServiceWorkerRegistration.register. Dadurch wird die Datei service-worker.js im Browserkontext registriert . Cool. Lassen Sie uns diese Änderungen vornehmen. Aktivieren Sie den Servicemitarbeiter in der Produktionsumgebung. Ich aktualisiere mein GitHub-Repository und das war's vorerst. Im nächsten Video werden wir uns mit dem Problem befassen , das wir in Lighthouse gesehen haben, sodass es zu 100 Prozent grün sein wird. Wir sehen uns dort. 90. 34 Fixierung der Basis-URL zum korrekten Auflösen von Bildern auf Github-Seiten: Hallo zusammen. Im letzten Video haben wir diese coole progressive Web-App namens Box Office erstellt . Aber hier ist ein Problem, das ich tatsächlich übersehen habe, und es geht wieder um die Basis-URL in unserer App. Wenn Sie bemerkt haben, dass Sie nach bestimmten Sendungen suchen und diese kein Bild haben, versuchen wir, dieses nicht gefundene Bild als PNG anzuzeigen. Alle unsere Dateien werden jedoch unter dem Box Office-App-Präfix auf GitHub Pages-Hosting bereitgestellt . Dieses Bild kann jedoch nicht geladen werden, da Sie sehen können, dass es immer 404 ist , weil es in dem Pfad, den wir zu laden versucht haben, nicht existiert . Wir haben das Präfix nicht angegeben. Wie können wir das tatsächlich beheben? Wenn wir zu unserer App zurückkehren und Bild suchen, das nicht gefunden wurde, geben wir es einfach so an. Nur ein statischer spezifischer Pfad. Aber da wir das Präfix haben, müssen wir es irgendwie verstehen. Eine Möglichkeit , das zu beheben, besteht darin , das Bild nicht im öffentlichen Ordner zu verwenden, sondern darin , das Bild nicht im öffentlichen Ordner zu verwenden, es tatsächlich im Quellordner abzulegen und es dann so zu verwenden, als wäre es, sagen wir, ein Modul. Dann wird es von der zugrunde liegenden Webpack-Konfiguration verarbeitet und der Basispfad wird automatisch aufgelöst. Das Gleiche wie wir es mit dem Ankertag und der Link-Komponente gemacht haben . Nun, zumindest ist die Idee dieselbe. Ich werde das nicht gefundene Bild einfach irgendwohin verschieben, sagen wir in den Bibliotheksordner, das PNG-Bild nicht gefunden. Anstatt jetzt überall auf das nicht gefundene Bild-PNG zu verweisen , importiere ich einfach das nicht gefundene Bild aus der Bibliothek, nicht gefundene Bild-PNG. Vielleicht nenne ich es nicht gefundene Bildquelle und spezifiziere es einfach so. Dann kopiere ich diesen Import und mache überall den gleichen Import. Hier, das habe ich gerade auch in der Besetzung gemacht. Lassen Sie mich hier den richtigen Pfad sehen. Wir gehen einen Ordner zurück, den zweiten Ordner, die Bibliothek, das PNG-Bild wurde nicht gefunden. Wir geben die Bildquelle nicht gefunden an, genauso wie wir es innerhalb des Showrasters tun werden. Importiert keine Bildquelle von. Wir gehen wieder zurück, zurück zur Bibliothek, nicht gefundenes PNG-Bild, keine gefundene Quelle und dasselbe. Endlich werden wir das in showMainData tun. Keine Bildquelle aus der Bibliothek gefunden, kein PNG-Bild gefunden. Lassen Sie uns nun versuchen, die App erneut bereitzustellen, und lassen Sie uns sehen, wie sich das genau in unserem endgültigen Code widerspiegeln wird. Wir sehen uns in einer Minute, sobald dieser Code bereitgestellt ist. Jetzt wurde die Anwendung erfolgreich bereitgestellt. Kommen wir zurück zu unserer App. Lassen Sie uns nun die Seite aktualisieren. Unsere letzte Suche war „Hallo“. Wir suchen wieder danach. Dieses Mal sehen wir auch nicht gefunden. Warum ist das so? Das Problem ist, dass unser aktuelles Image, unser vorheriges Bild, von Service Worker bereitgestellt wird. Es wurde nicht aktualisiert. Es wird aus dem Cache bereitgestellt, was bedeutet, dass wir den Cache leeren müssen , um die Updates zu sehen. Ich klicke mit der rechten Maustaste auf die Schaltfläche Aktualisieren der oberen linken Ecke und klicke auf „Cache leeren“ und „Hard Reload“. Alternativ kann ich zur Registerkarte „Anwendung“ gehen, zu „Speicher und auf „ Seitendaten löschen“ klicken. Es löscht den gesamten Cache im Browser speziell für diese Website. Lassen Sie mich auf „Seitendaten löschen“ klicken. Dann erfrische ich mich einfach. Dann suche ich nach „Hallo“. Dieses Mal wurde unser Antrag erfolgreich gelöst. Sie können sehen, dass wir anstelle der tatsächlichen URL dieses Base-64-Datenbild sehen. Was ist das? Da uns unser Image von der Create React-App zur Verfügung gestellt wurde , die zugrunde liegende Webpack-Konfiguration darum gekümmert. In der Dokumentation der Create React-App wurde irgendwo erwähnt, dass, wenn das Bild eine geringere Größe als den bestimmten Schwellenwert hat , die Datei zu verarbeiten und die Datei im öffentlichen Ordner bereitzustellen. Das Bild wird in das Base-64-Format konvertiert und dann, sagen wir, Inline. Diese, sagen wir, eine lange Zeichenfolge steht für unser Bild, nicht als Datei, sondern als Zeichenfolge. Ziemlich cool. Jetzt sieht alles gut aus soweit. Im nächsten Video werden wir der Anwendung, wie versprochen, den letzten Schliff geben. Wir werden benutzerdefinierte Symbole und benutzerdefinierte Namen verwenden, damit unsere Anwendung perfekt ist. Wir sehen uns dort. 91. 35 Finale Note: Hallo zusammen. In diesem Video geben wir unserer App endlich den letzten Schliff. Wir werden Symbole erstellen, wir werden Titel ändern, damit die Anwendung endlich perfekt ist. Lass uns gehen. Aber bevor wir das tun, lassen Sie uns die Änderungen vornehmen, die wir im vorherigen Video vorgenommen haben. Wie Sie sich erinnern, haben wir im vorherigen Video unser Problem mit dem Bild behoben. Lassen Sie uns schnell alles zur Bühne hinzufügen und dann alles bestätigen, indem wir sagen das Bild aus der Öffentlichkeit verschoben wurde oder das nicht gefundene Bild einfach zur Quelle verschieben und es dann importieren , anstatt es aus dem öffentlichen Ordner bereitzustellen. Ziemlich lang, aber es lohnt sich. Dann schiebe ich alles auf Master und lass uns endlich zu unseren Icons zurückkehren. Zunächst müssen wir uns für ein Symbol entscheiden , das wir hier in der Registerkarte verwenden werden. Wenn wir zu dem Gast zurückkehren, den wir für die Kinokasse haben, haben wir hier dieses Geldsymbol , das ich für uns vorbereitet habe. Wir können dieses Symbol einfach hier herunterladen. Ich werde es in den Ordner Downloads legen. Dann müssen wir eine Reihe von Symbolen generieren, die wir im öffentlichen Ordner platzieren werden. Im Moment haben wir diese grundlegenden Reaktionssymbole , die wir jetzt ersetzen können, aber zuerst müssen wir diesen Satz von Symbolen generieren. Normalerweise entscheiden Sie sich zuerst für ein Symbol , das Sie verwenden möchten. Es kann zum Beispiel deins sein. Es ist nicht zwingend erforderlich, dieses spezielle zu verwenden. Wenn Sie Ihre haben, können Sie sie gerne verwenden. Wir gehen zu Resources.md. Hier unten finden wir diesen Favicon-Generator , den ich für uns hinterlassen habe. Wir gehen auf diese Seite. Wir klicken hier, wir laden das Bild hoch, das wir für das Icon-Set verwenden möchten. Wir laden herunter. Im Ordner Downloads haben wir jetzt dieses favicon_io. Es ist im Archiv. Im Moment werde ich alles in einen Ordner extrahieren. Dies ist die Reihe von Symbolen , die ich irgendwann habe. alles werden wir nicht nutzen. Wir werden diejenigen wiederverwenden, die bereits im öffentlichen Ordner vorhanden sind . Ich öffne einfach den öffentlichen Ordner hier. Anstelle von logo192 von React verwende ich einfach das , das ich hier habe. Ich kopiere es. Ich ändere den Namen. Ich lösche den vorherigen. Ich benenne diesen um. Dann mache ich dasselbe mit diesem Logo. Ich lösche es. Ich verschiebe den in der gleichen Größe hierher. Ich gebe ihm den gleichen Namen. Favicon wird komplett ersetzt. Das war's. Inzwischen ist alles bereit. Wenn wir zu manifest.json gehen, verweisen wir hier auf all diese Symbole. Diese Symbole werden verwendet, wenn Ihre Anwendung auf dem Startbildschirm installiert wird. Was auch immer Sie hier angeben , diese Manifestdatei weist Progressive Web App an, diese Informationen zu verwenden. Wenn wir hier beispielsweise React-App als Kurznamen angeben, sehen die Benutzer dies, wenn sie Ihre Anwendung auf dem Startbildschirm hinzufügen . Wir haben keinen langen Namen für unsere App. Wir verwenden nur Box Office für den Kurznamen und Box Office für den regulären Namen. Symbole bleiben hier, aber wenn wir zu unserer Anwendung zurückkehren und uns an unseren vorherigen Lauf für Lighthouse erinnern , hatten wir dieses Problem mit dem maskierbaren Symbol. Schauen wir uns noch einmal an, was genau wir da hatten. Auch hier betreibe ich Lighthouse outdate. Es dauert hier ein paar Sekunden. Wir gehen ganz nach unten und sehen, dass unsere Anwendung installierbar ist. Alles ist gut, aber wir haben kein maskierbares Symbol. Wir gehen hierher. Sie lesen hier über maskierbare Symbole. Dies ist ein neues Format. Im Grunde müssen wir nur ein weiteres Symbol zu manifest.json hinzufügen und angeben, dass es den Zweck eines maskierbaren Symbols hat. Wir können diesen Maskable.app Editor verwenden , um ein vorhandenes Symbol in ein maskierbares Symbol zu konvertieren. Vielleicht lassen Sie uns das schnell machen. In der rechten Ecke klicke ich auf die Schaltfläche Hochladen und gebe unser Symbol an. Nun, es sieht so aus, aber ich wollte, sagen wir, einen weißen Hintergrund haben , damit unser maskierbares Symbol so aussieht. Cool. Dies wird unser maskierbares Symbol sein. Das wird unser Problem mit dieser Checkliste in Lighthouse lösen. Wir klicken auf Exportieren. Nehmen wir an, es wird die maximale Größe sein. Wir laden herunter. Im Ordner anzeigen. Dies wird ein maskierbares Symbol sein, das wir in den öffentlichen Ordner legen werden. Ich verschiebe es hierher, und jetzt müssen wir das maskierbare Symbol angeben. Das ist in meinem manifest.json und sag, dass maskable_icon.png, die Namen müssen übereinstimmen, vom Typ sein wird, lass mich sehen. Wo ist es? Wo sind diese Informationen über maskierbare Symbole? Hier. Es wird einen maskierbaren Zweck haben. Wir kommen zurück, wir spezifizieren den Zweck maskierbar. Wir sparen. Das ist es. Jetzt wird unsere Anwendung überall erstaunlich gut aussehen, mit unseren eigenen Titeln, mit unseren eigenen Symbolen. Lassen Sie uns alles noch einmal bereitstellen. Warte, entschuldige mich. Ich bin auf den falschen Weg gegangen. Ich wollte zuerst alles bereitstellen. Npm run deploy. Warten wir jetzt einfach ein paar Minuten und wir sehen uns, sobald die Anwendung bereitgestellt ist. Die Anwendung wurde erfolgreich bereitgestellt. Gehen wir zurück zur App und sehen uns das Endergebnis an. Bevor wir das tun, bevor wir die Seite aktualisieren, löschen wir einfach den Speicher erneut, um alle Caches zu löschen, was auch immer wir im Browser gespeichert haben, Cache leeren und aktualisieren. Jetzt können Sie sehen, dass wir hier unser benutzerdefiniertes Symbol haben , benutzerdefinierte Titel. Alles wird jetzt so verwendet, wie wir es in der Manifestdatei angegeben haben . Sie können tatsächlich unter dem Tab Bewerbung hier auf Manifest klicken und verschiedene Informationen zu Ihrer Bewerbung sehen . Lassen Sie uns nun sehen, wie es aussehen wird, wenn es zum Startbildschirm hinzugefügt wird. In einem der vorherigen Videos haben wir, als wir einen der Servicemitarbeiter ihn registriert haben, hinzugefügt und ihn registriert haben, unsere App zum Startbildschirm hinzugefügt. Sie können jedoch sehen, dass es hier nicht aktualisiert wurde. Lassen Sie es uns tatsächlich ausführen und zuerst deinstallieren und erneut installieren. Was ich tun werde, ich klicke hier einfach auf drei Punkte. Klicken Sie auf Uninstall Create React App Sample. Überprüfe die Markierung. Löschen Sie auch Daten aus Chrome. Jetzt ist es weg. Ich werde zu meiner Anwendung im Browser und sie noch einmal installieren. Installieren Sie Box Office. Installiere. Jetzt, bumm. Ich gehe wieder zu meinem Startbildschirm zurück, in meinem Fall ist es der Desktop. Jetzt habe ich meine Box Office-Anwendung, die wie jede andere App auf meinem Computer aussieht. Wenn ich darauf klicke, haben wir immer noch alles beim Alten. Ich würde sagen, das ist es. Jetzt erstellt ihr diese tolle Anwendung, die offline funktioniert, die installierbar ist und mit den verschiedenen dynamischen Daten von APIs arbeitet . Du hast viele Konzepte gelernt. Ich würde sagen, Sie haben Ihr React-Wissen damit erheblich erweitert, aber jetzt ist es soweit. Aber bevor wir diesen beenden, lassen Sie uns tatsächlich alle unsere hinzugefügten Symbole übernehmen. Ich werde alles zur Bühne hinzufügen. Ich werde alles begehen. Nehmen wir an, es wurden benutzerdefinierte Symbole hinzugefügt und manifest.json aktualisiert. Lassen Sie uns alles in den Master-Branch verschieben , damit die Änderungen im GitHub-Repository übernommen werden . Das ist es. Herzlichen Glückwunsch dazu. Im nächsten Video werden wir zusammenfassen, was wir genau mit der Box Office gelernt haben. Wir sehen uns dort. 92. 36 Zusammenfassung: Hey, ja. In diesem Video werden wir alles zusammenfassen, was wir bisher an Box Office gelernt haben . Jetzt haben wir diese tolle progressive Web-App, die offline funktioniert, die installierbar ist, die mit API funktioniert und sie sieht einfach cool aus, nicht wahr? Lass uns vielleicht zu unserer Commit-Historie gehen und das schnell durchgehen. Zuallererst verwenden wir als Tool, sagen wir als Boilerplate für die Erstellung von Kinokassen, sagen wir als Boilerplate für die Erstellung von Kinokassen, die Create React App, die die zugrunde liegende Webpack-Konfiguration verwendet, die wir mithilfe des React-Scripts-Pakets verwenden. Jetzt weißt du, was React-Skripte sind. Jetzt wissen Sie, was Create React App ist, was bedeutet, dass Sie wissen, wie man mit Create React Boilerplate arbeitet . Wir haben auch Prettier und ESLint verwendet, aber das ist nichts Neues. Sie kennen diese Tools bereits. Lass uns sehen. Wir haben von React Router erfahren, weil wir, wie Sie wissen , standardmäßig und in React , standardmäßig und in React keine integrierte Lösung für das Routing in unserer Anwendung haben . Bei React dreht sich alles um Rendern, aber es geht nicht um eine so einfache Navigation. Aus diesem Grund haben wir eine Bibliothek namens React Router verwendet , um die Navigation innerhalb unserer Anwendung zu erreichen . Lass uns sehen. Nach React Router haben wir dann verschiedene Funktionen hinzugefügt, um mit dynamischen Daten zu arbeiten, um mit der API zu arbeiten. Wir haben die integrierte Browser-API namens „Fetch“ verwendet . Um Daten von der API abzurufen, haben wir viele wiederverwendbare Funktionen erstellt , die wir in unserer gesamten Anwendung verwenden, und sie sehen sehr einfach aus. Wir behandeln alle potenziellen Addierer innerhalb von Komponenten, falls etwas schief geht. Wir behandeln Fehler richtig, indem wir Try-Catch-Blöcke in unseren Komponenten verwenden . Wir haben auch herausgefunden, dass wir, wenn wir Daten abrufen wollen, wenn die Komponente gemountet wird, wenn wir einige Interaktionen auf der Seite ausführen, anstatt „useEffect“ zu verwenden, eine Bibliothek zum Abrufen von Daten verwenden können . In unserem Fall haben wir die React Query-Bibliothek kennengelernt , mit der wir Daten abfragen können, wenn die Komponente gemountet wird oder wir eine Suche auf der Seite durchführen. Jetzt kennen Sie sich mit Bibliotheken zum Abrufen von Daten aus. Bibliotheken zum Abrufen von Daten sind in modernen React-Anwendungen ein Weg . Es gibt empfohlene Methoden, um mit Daten zu arbeiten , da mit dem Wachstum Ihrer Anwendung immer mehr Anforderungen gestellt werden. Bibliotheken zum Abrufen von Daten werden uns helfen , all das mit Leichtigkeit zu verwalten. Jetzt, wo ich auch „useEffect“ erwähnt habe, wissen Sie jetzt, was „useEffect“ macht „useEffect“ können wir eine Nebeneffektfunktion ausführen Nebeneffektfunktion Wenn sich etwas in der Komponente ändert, haben wir eine Reihe von Abhängigkeiten in useEffect. Lass es mich hier im Code finden. Wir haben hier eine Reihe von Abhängigkeiten, und wenn sich etwas innerhalb der Rate ändert, wenn sich der Wert ändert, führen wir diese Nebeneffektfunktion aus. Ganz zu schweigen davon, dass wir zusätzlich zu „useState“, „useReducer“ und „useEffect“ auch unsere eigenen benutzerdefinierten Hooks erstellt useState“, „useReducer“ und „useEffect“ auch unsere eigenen benutzerdefinierten Hooks haben. Diese benutzerdefinierten Hooks sind wie alle anderen Hooks, aber mit zusätzlicher Logik. Jetzt wissen Sie, dass Sie für den Fall, dass Sie eine wiederverwendbare Logik für integrierte Hooks erstellen müssen , einfach einen benutzerdefinierten Hook erstellen und die gesamte Logik hineinlegen. Schließlich wird es wiederverwendbar. Wir haben auch mit dem Browserspeicher gearbeitet, wir haben mit dem Sitzungsspeicher gearbeitet, wir werden mit lokalem Speicher arbeiten. Sie wissen, dass Sie jetzt Daten im Browser persistieren können . Dies ist natürlich kein Ersatz für eine Datenbank. Wenn Sie jedoch Informationen wie die Sucheingabe oder Benutzereinstellungen irgendwie speichern müssen , können Sie diesen Speicher problemlos verwenden. Mal sehen, was wir sonst noch hier haben? Kommen wir zurück zur Commit-Historie. Hier haben wir auch diese dynamischen Seiten erstellt. Dies ist auch Teil von React Router, aber jetzt kennen Sie das Konzept dynamischer Seiten. Sie erstellen eine Vorlage oder ein Skelett und dann holen Sie sich den dynamischen Parameter aus der URL, in unserem Fall war es show ID Wenn ich also nach einer Show suche, gehe ich zur Seite innerhalb der URL anzeigen, wir haben die Show-ID, die wir in der Komponente abrufen , und dann verwenden wir diese Show-ID, um Daten abzurufen. Auf diese Weise können wir dynamische Seiten erreichen. Jetzt kennen Sie dieses Konzept. Mal sehen, was wir auch hier haben? Nochmals „useQuery“ über Query-Daten, andere anfängliche Logik mit benutzerdefinierten Hooks, das haben wir besprochen, wir haben auch gestylte Komponenten installiert. Eine CSS- und JS-Runtime-Lösung für das Styling von Komponenten. Jetzt können Sie entscheiden, was für Sie besser ist. Verwenden Sie entweder gestylte Komponenten oder etwas sehr Ähnliches oder verwenden Sie die traditionelle Methode mit CSS-Dateien. Denn jetzt kennen Sie die Nachteile, jetzt wissen Sie, was die Vorteile sind und Sie sind derjenige, der entscheidet, was Sie verwenden werden. Ich persönlich bevorzuge die traditionelle Art , Apps zu gestalten, und ich bin kein großer Fan von CSS und JS. Außerdem fügen wir diese Fading-Animation als Ersatz für das von mir erwähnte Paket React-fade-in hinzu. Ich habe es nur einmal erwähnt, aber darauf habe ich nicht viel Wert gelegt. Wir benötigen weniger Abhängigkeiten in unseren Anwendungen. Je weniger Abhängigkeiten desto besser, da Sie weniger Dinge verwalten müssen. Ich denke, es macht Sinn, und Sie werden sich in Zukunft an diese Regel halten , weil es zu Ihrem eigenen Besten sein wird. Wir haben auch progressive Web-Apps kennengelernt. Was ist die Progressive Web App? Es ist nur eine Webanwendung, die einer bestimmten Liste von Dingen folgt , zum Beispiel benötigen Sie benötigen eine Service-Worker-Datei, sie muss über HTTPS bereitgestellt werden, sie muss diese Manifestdatei haben , und wenn die Anwendung, die Website, all diese Anforderungen erfüllt, wird sie zu einer Progressive Web App. Es ist wie eine betitelte Website und der Titel ist Progressive Web App. Die Anwendung wurde aufgrund des Servicemitarbeiters offline verfügbar . Jetzt wissen Sie, dass Service Worker ein Skript ist , das irgendwo im Browser außerhalb unserer Anwendungskontexte läuft und alle Anfragen, alle ausgehenden Anfragen, ausgehenden Anfragen, und etwas mit ihnen macht. In unserem Fall verwenden wir Service Worker, um alle ausgehenden Anfragen zwischenzuspeichern. Die Anwendung funktioniert offline, sobald sie irgendwo auf dem Startbildschirm installiert ist. Ganz am Ende haben wir unsere eigenen benutzerdefinierten Icons hinzugefügt, indem wir die mir generierten [unverständlichen] Symbole verwendet haben, die ich mit Ihnen geteilt habe , aber das ist nicht wirklich wichtig, Sie können jeden Generator verwenden, aber die Sache ist jetzt, dass Sie den gesamten Ablauf sehen können, wie die Anwendung von Grund auf erstellt wird , bis hin zum Design und einigen Änderungen in der Zukunft. So etwas. Herzlichen Glückwunsch, Sie haben einen sehr guten Job gemacht. Für den Moment ist das alles. Wir sehen uns im nächsten. 93. Was ist Firebase?: Hey, willkommen in der neuen Sektion hier. Wir werden über zurück in Lösung für unser endgültiges Projekt reden. Wann immer wir eine einzelne Seite App erstellt haben, um mit der Datenbank zu kommunizieren, würden wir normalerweise unseren eigenen AP I Server erstellen oder einen vorhandenen verwenden. Moderne, kleine oder mittelgroße Anwendungen nicht unbedingt direkt zurück und von nackten Knochen selbst die meiste Zeit, die sie tun, aber es hängt von der Art der Anwendung ab. Wäre es nicht schön, wenn wir hinten eine Obstruktionsschicht hätten? Und so brauchen wir es nicht selbst einzurichten und uns mehr auf die Anwendung zu konzentrieren? Nun, Feuerbasis kann uns helfen, das zu erreichen. Es wird als Service-Lösung winkt, die uns die Abstraktionsschicht um den Rücken gibt und es tut. Noch mehr Firebase ist Emma Bile und Web Platform, die auf der Google Cloud Platform aufgebaut ist. Es bedeutet, dass es zusammen mit jedem Google-Cloud-Dienst verwendet werden kann. Von nun an brauchen wir uns keine Sorgen über die Erstellung unserer eigenen AP-I-Datenbank Wartungsdatei zu machen, alles bereits da ist und auf uns wartet. Also in unserem Code, anstatt eine Anfrage an ein A P I zu senden, um Daten abzurufen. Wir würden nur eine Bibliothek verwenden, die Funktionen bereits ziemlich gut für uns hat. Wie bekommen Sie dieses Dokument von I t und diese Funktion wird mit der Datenbank interagieren. Es hat wirklich Zeit singen Unterstützung und schnellere Abfragen. Und es ist auch gut dokumentiert, was wirklich wichtig ist zu verstehen. Bachir. Welche Feuerbasis ist im nächsten Video, sondern wird durch Feuerbasis Dienste gehen und wir werden versuchen sie zu bewerten. Wir sehen uns dort. 94. Übersicht über Firebase Services: Hey, lasst uns schnell die Feuerbasis und ihre Dienste erkunden. Für dieses Video habe ich feuerbasiertes Dashboard aus unserem letzten Projekt hier eröffnet. Wir können jeden Dienst, den wir innerhalb eines Firebase-Projekts verwenden, überwachen und verwalten. Wir könnten mehrere APS verwalten. Es kann mehrere Runden-APs geben, und das wird dieselbe Datenbank teilen. Oder wenn wir Android-, IOS- und Web-Anwendungen hätten , könnten wir alle von einem einzigen Dashboard auf der linken Seite verwalten. Innenseite Seitenleiste. Unter entwickeln können Sie eine Liste von Haupt-Firebase-Diensten sehen. Lasst uns eins nach dem anderen gehen. Eine Syndization. Mit dem Service sind wir in der Lage, sich anzumelden und Benutzer über unsere Anwendungen hinweg zu authentifizieren. Das ist wirklich cool, denn, sagen wir, wenn wir mit Google auf der Website schauen und später in die Android-Anwendung mit dem gleichen Konto schauen, werden die Daten die gleichen sein. Es gibt viele verschiedene Zeichen und Methoden für uns zur Verfügung, und die Sache ist, dass sie alle konfigurierbar sind. Es waren nur ein paar Klicks. Dieser Service ist abgeschlossen. Es hat ein Mail-System integriert, das alle E-Mail-Verifizierungen und Vertiefungen verarbeitet. Wir brauchen Sie nur die Vorlage von der E-Mail anpassen. Außerdem unterstützt es SMS-Verifizierung, die auch wirklich cool ist. Dann geht die Datenbank. Firebase hat zu Datenbasis für jetzt Fire Store und riel Zeitdatenbank gefragt. Sie beide sind Jason-basierte keine Fortsetzungs-Datenbanken mit Unterstützung für Echtzeit-Updates. Was ist der Unterschied und welche zu verwenden? Es hängt von vielen Faktoren ab, aber hier gibt es drei Hauptunterschiede. Erstens, Preismodell Feuerladen wird pro Vorgang berechnet. Lesen, Schreiben, Löschen oder Aktualisieren. Dies ist nicht gut für Hochfrequenz-Daten schreibt Echtzeitdatenbank hat dafür besser geeignet da es für Speicher und Bandbreite berechnet wird, was der perfekte Anwendungsfall für so etwas wie eine untergeordnete Anwendung ist. Zweite Abfragen. Fire Story gibt uns erweiterte und zusammengesetzte Abfragen im Vergleich zu Echtzeit-Datenbank So Echtzeit-Datenbank hat wirklich schlechte Abfrage-Builder, aber es ist gut genug, um nicht zu komplizierten Datenbankstrukturen zu verwalten. Dritte Struktur sie beide Jason basierte Fire Store hat Dokumente, Sammlungen und Untersammlungen, die Datenbank robuster machen. Echtzeit-Datenbank ist nur ein großes Jason-Objekt. Deshalb hat es Eigenart sehr Unterstützung und die meiste Zeit müssen wir ein k ein dupliziertes Daten für unser Projekt de normalisieren . Wir werden Echtzeit-Datenbank verwenden, weil wir eine Menge von Faried und Schreiboperationen haben. Und wir brauchten keine komplexen Abfragen. Wenn es keine Chat-Anwendung wäre, hätte ich den Fire Store erreicht, da es anspruchsvollere Abfragen und Datenbankstruktur hat . Außerdem sind wir nicht darauf beschränkt, auf Lee eine Datenbank zu verwenden. Wir können sowohl Feuerladen als auch Echtzeit-Datenbank in einer einzigen Anwendung kombinieren. Dann haben wir Lagerraum. Nichts zu Besonderes. Hier drüben. Hier Bubble Porter, Benutzerbilder und Audio-Dateien Firebase Hosting hier. Wir werden unsere Website bereitstellen. Es unterstützt nur statische Dateien. Wenn wir also eine serverseitige Rendering-Anwendung haben, wird dieses Hosting nicht funktionieren. Cloud-Funktionen in unserer Anwendung waren auch in der Lage, benutzerdefinierte zurück zu schreiben und den Server letzte Cloud-Funktionen zu informieren , die aus dem Mantel aufgerufen werden können. Wir werden nur eine bereitstellen, die Benachrichtigungen an Benutzer sendet. Wir werden mehr über Server sprechen zuletzt, wenn wir in das Thema Maschine zu bekommen. Lauren, erhalten erstaunliche Tool, das maschinelles Lernen Dienstprogramme wie Bilderkennung und die anderen bietet . Aber leider ist es nur für IOS und Android APS an der Unterseite verfügbar. Wir haben noch andere Dienste. Sie alle sind ergänzend und werden für die Überwachung und Analyse von eingesetzten Anwendungen verwendet. Wir können die Leistung von unserer Website aus verwalten, wie schnell sie niedrig ist und einige andere Metriken. Wir können sogar Firebase Analytics integrieren, was im Grunde Google Analytics ist, aber als Firebase-Dienst umschlossen ist, und ganz unten haben wir Dienste beschränkt, um Benutzer für unser Projekt zu engagieren. Wir werden nur Firebase Cloud-Messaging verwenden, die es uns ermöglichen, Echtzeitbenachrichtigungen an Benutzer zu senden , wenn der Browser dafür unterstützt. Und das ist es im Grunde. Dies war auf hohem Niveau Überblick aus Kamin. Aber was ist mit der Sicherheit? Ist es sicher genug? Wir werden herausfinden, dass in den nächsten Medien sehen Sie dort. 95. Firebase: Hey, mal sehen, wie sicher Firebase iss. Da wir keinen serverseitigen Code haben, greifen wir von Client-Seite auf die Datenbank zu. Wie werden wir irgendwelche sensiblen Daten offenlegen? Ja und nein. In Kamin Datenbanken sind über öffentliche Euro zugegriffen. Dies ist ein Teil des Konflikts. Nehmen wir an, wir haben einige Daten innerhalb der Datenbank. Wir haben öffentliche Ihre el No. Einen auch. Und wenn Random Person versucht, auf den Ural zuzugreifen und wir die Datenbank nicht geschützt haben, kann diese Person alle Daten erhalten, ob sie öffentlich sein soll oder nicht, um unbefugten Zugriff zu verhindern, ihre Sicherheitsregeln. Diese Regeln definieren, wie auf Daten zugegriffen werden kann und von wem. Das bedeutet, dass das Sicherheitsniveau davon abhängt, wie gute Sicherheitsregeln geschrieben werden. Es ist eine gute Praxis, die Datenbank standardmäßig nach unten zu schauen und dann nur Regeln. Wie wir Code schreiben, gelten Sicherheitsregeln für Lee für Sie Kunden. I Wenn wir ein benutzerdefiniertes Backend mit Cloud-Funktionen schreiben, gelten diese Regeln nicht, wenn die Anwendung wächst. Manche Leute finden es schwer zu schreiben, um Rituale zu suchen. Aus diesem Grund nutzen sie Cloud-Funktionen und führen Server selbst bei der Validierung durch. Dasselbe gilt für Cloud-Speicher. Wir haben öffentliche, die krank sind und Regeln standardmäßig. Zugriff auf den Speicher ist nur von angemeldeten Benutzern möglich. In den meisten Fällen funktioniert es gut. Aber es bedeutet nicht, dass, wenn wir ein Bild hochladen, das wir teilen möchten, dieses Bild gesperrt wird. Jede hochgeladene Datei kann öffentliches Europa haben. Alles klar, das ist es für die Sicherheit. Ich hoffe, es war umfassend und prägnant. mit Was istmitder Preisgestaltung? Ist Firebase frei? Das werde ich im nächsten Video rausfinden. Wir sehen uns dort. 96. Firebase: Hey, mal sehen, ob wir etwas bezahlen müssen, um die Feuerbasis zu benutzen. Wie für draußen, gibt es zwei Pflanzen zur Verfügung. Spark and blaze gezündet Plan ist völlig kostenlos und es kommt mit ein paar Einschränkungen. Polizeiplan ist Pay, wie Sie gehen Modell. Beide von ihnen haben sehr Generäle freakier Und selbst wenn Sie abonniert sind Blaze Plan, es sei denn Ihre APP hat eine Menge von aktiven Benutzern, Sie werden nichts für uns bezahlen, um sicherzustellen, dass wir nicht bekommen aufgeladen Spark-Plan ist Ordnung. Mit den jüngsten Aktualisierungen Ihrer Feuerbasis und Google Cloud, um Cloud-Funktionen nutzen zu können ,müssen wir den Blaze Plan für unser Projekt aktivieren. Mit den jüngsten Aktualisierungen Ihrer Feuerbasis und Google Cloud, um Cloud-Funktionen nutzen zu können , Aber keine Sorge, aber wir werden darauf eingehen, wenn wir mit Cloud-Funktionen beginnen. Bis dahin, Funkenplan ist unsere Wahl Für weitere Details, navigieren Sie bitte auf die Preisseite zu Avala alles selbst. Alles klar, ich schätze, das ist alles, was ich für die Feuerbasis in der Produktion abdecken wollte. Im nächsten Video werden wir Finalist angefangen, unser Projekt zu bauen. Wir sehen uns dort 97. Projektübersicht: Hey, willkommen in der neuen Sektion. Hast du eine Pause gemacht? Denn jetzt werde ich Ihnen zeigen, wie unser abschließendes Projekt aussehen wird, als wir uns jetzt zum ersten Mal auf der Website engagiert haben. Aber wir werden die Anmeldeseite sehen. Von hier aus. Wir können entweder mit Facebook oder Google fortfahren. Lassen Sie uns Google wählen. Dann werde ich nach dem zweiten Konto wählen und dann bin ich in der App. Auf der linken Seite kann ich sehen, dass Board neue Chatroom Bottoms erstellen und Chatrooms auflisten, die auf der rechten Seite verfügbar sind . Wenn ich auf entweder aus Chatrooms klicke, werde ich seine Nachrichten und ein paar andere Dinge sehen, die wir nur in einer Sekunde behandeln werden. Beginnen wir zuerst mit Dashboard Wenn ich also von hier aus darauf klicke, kann ich mein Konto verwalten. An der Spitze kann ich sehen, dass ich jetzt mit Google verbunden bin, und ich kann auch mein Konto mit Facebook verknüpfen. Wenn ich also auf einen Link zu Facebook klicke, wird es mich bei Bedarf zur Eingabe meiner Phrasebook-Anmeldeinformationen auffordern. Und gerade jetzt bin ich mit dem Sprachführer verbunden. Es bedeutet, dass das nächste Mal, wenn ich mit Facebook schauen, um App zu kaufen, Ich werde mit diesem Konto verknüpft werden. Ich werde am Ende mit dem gleichen Konto, dann habe ich einen Spitznamen und ich kann von hier aus bearbeiten. Wenn ich also auf die Schaltfläche „Bearbeiten“ klicke, kann ich es ändern. Also lassen Sie es ein wenig ändern, und wenn ich auf sicher klicke, wird es aktualisiert. Außerdem kann ich mein ometer bearbeiten, wenn ich auf Select New Avatar klicke, und wenn ich dieses Bild wähle, werde ich in der Lage sein, es ein wenig auf Entwicklungszustand hinzuzufügen. Und dann klicke ich auf un hochgeladen und mein Al Atar wird aktualisiert. Und von hier aus kann ich mich auch abmelden. Als nächstes haben wir neue Chatroom Schaltfläche erstellen. Also lassen Sie uns in Europa Namen angeben, sagen wir, whoa und Beschreibung wird Whoa sein! Wenn ich darauf klicke, erscheint es hier drüben, und der Chatroom wird vorerst komplett leer sein. Lassen Sie uns also den ersten Chatraum auswählen, weil er bereits mit einigen Nachrichten gefüllt ist. Also, was haben wir hier? Also, bei jeder Nachricht, wenn wir sie drauf haben, können wir das wie Button sehen. Es wird Ihnen zeigen, wie viele diese bestimmte Nachricht halb mag. Also, wenn ich darauf klicke, Ich werde die Zehe entfernen, wie wenn ich wieder in klicken, wie zu dieser Nachricht hinzugefügt werden. Und wir können auch sehen, ob dieser Benutzer online oder offline ist. Also, wenn wir sie in diesem Kreis haben, können wir sehen, dass dieser Benutzer an diesem bestimmten Tag zu dieser bestimmten Zeit offline war. Und das ist mein Konto. Deshalb bin ich momentan online. Auch, würden Sie hier haben, wenn wir auf Benutzer Spitzname Global Sea Motile Fenster mit seinem von einem Auto . Es ist voller Name Mitglied seit diesem Datum. Also, wenn dieser Benutzer der Anwendung beigetreten ist und auch wir können Admin-Berechtigung von diesem Benutzer steuern , wenn wir derzeit ein Administrator von dieser Gruppe sind, werden wir einen Blick auf die Administratorberechtigung nur in einem Moment nehmen. Also, was haben wir sonst noch? Alle Nachrichten sind also in Datumsangaben aufgeteilt. Sie sind nach Datumsangaben gruppiert. So können Sie heute sehen, ich schicke diese Nachricht ist gestern gab es diese Nachrichten und so eine auch wir haben Paginierung aus. Nachricht ist es bedeutet, dass wir nicht alle unsere Nachrichten aus der Datenbank absenken. Wenn wir den Chat eine Last nur sehen, sagen wir 15 Nachrichten. Und dann, wenn wir auf mehr laden klicken, werden wir mehr Nachrichten sehen, die in unsere Anwendung geladen werden. In Ordnung, damit wir normale Textnachrichten an unseren Tschad senden können. Dann sind wir auch in der Lage, Dateien zu senden. Wenn ich also auf die Schaltfläche „Anhang“ klicke, werde ich diesen Sterblichen sehen. Dann klicke ich auf Upload. Ich kann auch normale Dateien auswählen. Assim juckt. Also werde ich diese Datei auswählen, dieses Bild, dass ich es öffnen werde. Es wird hier erscheinen, dass ich klicken werde, senden Sie zum Chat. Und wie Sie sehen können, wenn ich eine normale Datei schicke, Ich bestätige Laden Sie es, indem Sie einfach auf diese Ihre out klicken. Wenn es sich um ein Bild handelt, wird es hier angezeigt. Und wenn ich darauf klicke, werde ich die Vorschau sehen. Und auch, Ich werde diese Ansicht ursprünglichen Boden haben. Und wenn ich darauf klicke, wird das Original im neuen Wasserhahn geöffnet. Außerdem sind wir in der Lage, Audiodateien zu senden. Wenn ich also auf diesen Button hier drüben klicke, wird die Aufzeichnung gestartet und ich kann das sehen. Hier drüben bedeutet es, dass es momentan in meinem Mikrofon aufgenommen wird. Wenn ich also noch einmal auf diesen Button klicke, wird meine odio-Nachricht gespeichert. Das war gerade jetzt Rekord. Und ich werde es spielen können, wenn es vom Browser unterstützt wird. Alles klar, was haben wir sonst? Also oben können wir Raumnamen sehen, wir können Broadcast-Nachricht sehen. Und dieser blaue Knopf hier drüben, sie sind verwandt, aber wir werden einen Blick in einen Moment werfen. Darauf können wir auf Zimmerinformationen klicken, um die Beschreibung aus diesem Chatraum zu sehen. Und auch, wenn wir ein Admin außerhalb dieser Gruppe sind, sind wir in der Lage, diesen Aiken zu sehen. Wenn wir also darauf klicken, können wir es hinzufügen. Rauminformationen wie Name und Beschreibung. Also, wenn ich wieder auf die Schaltfläche Bearbeiten klicke, kann ich für jeden Namen, den ich will. Und dann bin ich in der Lage, es zu speichern, und es wird erfolgreich aktualisiert. Alles klar, also jetzt, über Broadcast-Nachrichten. Was sind das? Lassen Sie mich Ihnen zuerst zeigen, wie die Zugeständnisberechtigung kontrolliert werden kann. Also lassen Sie mich tatsächlich in diese App von meinem Telefon aus schauen, und ich werde Admin-Berechtigung entfernen. Also jetzt bin ich drinnen in der App, und Sie können sehen, dass der Status geändert wurde. Und jetzt sehe ich das grüne Dunkel. Ordnung, also werde ich Admin-Berechtigung für dieses Konto entfernen, das Sie jetzt sehen können. Also, was werde ich tun? Ich klicke auf mein Profil und ich klicke auf Zimmer Zulassungsberechtigung, aber von meinem Telefon. Also jetzt habe ich Admin-Berechtigung entfernt. Und jetzt kann ich nur diesen Benachrichtigungsknopf und Zimmerinformationen haben. In Ordnung, jetzt werde ich mir die Erlaubnis geben, und Sie können sehen, dass es aktualisiert wird und alles in Echtzeit ist. Also, was passiert hier? Also zunächst einmal diese Benachrichtigungsschaltfläche, So bedeutet es, dass ich möchte abonnieren oder abbestellen von Benachrichtigungen, die ich von erhalten zugibt aus diesem Chatraum. Also jetzt bin ich abonniert. Und wenn ich meine Meinung ändere, werde ich abonnieren, und ich werde überhaupt keine Nachrichten erhalten. Also, was sind das für Benachrichtigungen? Dies sind Echtzeit-Benachrichtigungen, die vom Browser auf dem Gerät angezeigt werden. Es sind also diese Berechtigungen oder Benachrichtigungen, dass, wenn ich auf diesen Boden klicke, ich Benachrichtigungen hier sehen kann und jetzt sind sie erlaubt. Also, was wird passieren? Lassen Sie mich eine Benachrichtigung von meinem Telefon an alle Benutzer in diesem Chatraum senden. Also jetzt, von meinem Handy, werde ich auf Broadcast-Nachricht hier klicken. Ich werde Titel und Nachricht angeben, und dann werde ich eine Nachricht veröffentlichen. Also lasst uns sehen, was passieren wird. Also ich Steidl, Ich werde wählen, Sagen wir Web taub und für Nachricht, Ich werde Hallo vom Telefon tippen und dann Nachricht veröffentlichen. Und wie Sie jetzt sehen können, habe ich diese Webhälfte aus diesem Raum. Ich helfe hallo von meinem Handy. Und auch ich habe diese Benachrichtigung in Fenstern. Also was? Es bedeutet, dass, wenn ich gerade auf der Website bin, ich diese Art von Benachrichtigung erhalten, dass ich schließen kann, wenn ich sagen, außerhalb des Browsers oder ich einfach den Browser vollständig schließen. Und wenn ich eine Benachrichtigung erhalte, lassen Sie mich eine andere senden und ja, ich kann sehen, dass ich immer noch eine Benachrichtigung in Windows oder in Ihrem Betriebssystem haben werde , wenn es unterstützt wird. Also das ist, was unsere riel Zeit Nachrichten auf diese Weise können Sie nicht, wenn ich Ihre Benutzer, um sie zu engagieren . Das ist also ziemlich viel über unsere Anwendung, eine Menge Dinge zu decken und ich werde es so umfassend wie möglich machen. Ich denke, Sie werden es genießen. Und ich werde dich im nächsten Video sehen. Wir werden loslegen. Wir sehen uns dort. 98. Chat-App Updates kommen!!: Hallo Leute. In diesem Video möchte ich auf bevorstehende Updates für die Chat-Anwendung hinweisen. Beide Projekte, Tic-Tac-Toe und Box Office, wurden aktualisiert, aber Updates für Chat-Anwendungen stehen noch aus. Um den Übergang von Box Office-Updates zu älteren Versionen der Chat-Anwendung so reibungslos wie möglich zu gestalten, gibt es dieses Video. Was wir tun werden, wir werden die Vorlage verwenden , die ich für uns vorbereitet habe. Wir haben diesen Repository-Chat-App-Starter. Der Link wird in den Ressourcen mit Ihnen geteilt, sodass Sie darauf zugreifen können. Du landest auf dieser Seite, gehst zu dieser Seite, dann musst du auf den grünen Code-Button klicken, dann klickst du auf „Zip herunterladen“. Dann gehst du zu dem Ort, an dem du die Zip-Datei heruntergeladen hast, und entpackst sie. Ich schnappe mir einfach den Ordner. Ich habe es zum Herunterladen bereitgestellt und hier habe ich das Projekt. Dann gehe ich zu VS Code. Ich öffne diesen Ordner als Projekt in VS Code. Hier, dieser und ich sehe das. Hier findest du das Starterprojekt. Sie haben alle benötigten Abhängigkeiten wie den Sass-Compiler, die RSuite-Bibliothek installiert , Umleitungen sind wichtig. Dann haben wir den React-Router und die Firebase-Bibliothek installiert. ESLint und Prettier sind beide hier konfiguriert. Darüber müssen Sie sich keine Sorgen machen. In der Quelle haben Sie hier Stile. Basis-App mit React Router einer älteren Version, die in Chat-Anwendungsvideos verwendet wird. Sie haben alles konfiguriert, Stile importiert, Sie sind fertig. Das einzige, was Sie tun müssen, ist zuerst Git hier zu initialisieren. Du tippst git init ein, dann fügst du alles zu Stage hinzu, dann bestätigst du das. Gleich danach müssen Sie dieses neue Git-Projekt mit Ihrem GitHub-Repository verknüpfen . Du gehst zum GitHub-Repository, erstellst ein neues Repository, dann erhältst du die Repository-URL und dann machst du git remote, fügst den Ursprung und die Repository-URL hinzu, du kopierst, wenn du ein neues Repository hier auf GitHub erstellen willst . Gleich danach müssen Sie Abhängigkeiten installieren. Wie Sie sehen können, gibt es keinen Ordner für Knotenmodule. Das einzige, was Sie tun müssen, ist einfach npm install einzugeben, und es werden alle im Paket Jason aufgeführten Abhängigkeiten installiert . Danach bist du startklar. Sie müssen das Startskript verwenden , indem Sie npm run start ausführen und mit der Entwicklung fortfahren. Der Rest bleibt gleich. Schauen Sie sich einfach die Chat-App weiter und alles wird in Ordnung sein. Das war's. Wir sehen uns dort. 99. Das Projekt erstellen: Hey, willkommen. Im Moment werden wir unsere schützen wie zuvor verwenden, wir werden erstellen Reaktor-App verwenden und in Ihrem Projekt zu erstellen, müssen wir Ordner von jedem öffnen, um unser Projekt in das Terminal zu setzen. Also von meinem Terminal, werde ich ausführen und p x erstellen reagieren, und dann den Namen des Ordners , der Chad App sein wird. Und dann werde ich NPM verwenden, weil ich Garn auf meinem System installiert habe. Und jetzt wird das EU-Projekt für uns geschaffen. Warten wir, bis alles fertig ist. In Ordnung? Scheint, als wären wir fertig. Nun öffnen wir den V-Code. Und von hier aus öffnen wir unseren neuen Ordner. Also, was haben wir drinnen wie zuvor? Unter Quelle haben wir unsere anfänglichen Dateien für Paket Jason. Wir haben unsere Skripte und so weiter. Lassen Sie uns also unsere anfängliche Säuberung durchführen, damit wir keine ap CSS benötigen. Dann brauchen wir auch nicht all das in unserer App-Komponente. Also lassen Sie uns es aufräumen, wie dies führt, um diesen Klassennamen zu löschen, wir werden nur Hallo setzen. Wir werden Tillett Logo und Import für uns. Ja. Hat abgelegt, dann brauchen wir AP Test GS nicht als vier Index CSS. Nun, wir brauchen es eigentlich nicht auch, dann für den Index? Ja, lassen Sie uns den Straßen-Modus entfernen, weil wir Fehler erhalten, wenn wir andere Bibliotheken verwenden. Es ist völlig normal. Dann entfernen wir Index CSS und lassen Sie uns Service-Worker für jetzt kommentieren, genau so, dann brauchen wir kein Logo SVG. Wir brauchen keine Tests und wir sind hier fertig. Was machen wir jetzt? Wir werden andere Abhängigkeiten installieren, und wir werden sie aus dem Ordner Assets erhalten. Also lassen Sie uns diesen Ordner öffnen und Gerüst öffnen. Doug Jason. Also von hier aus werden wir Kommentare kopieren, um Abhängigkeiten zu installieren. Kopieren wir also die erste Zeile und lassen Sie sie einfach so in unser integriertes Terminal . Nun, während es installiert wird, lassen Sie uns Prediger und ausgezeichnete Konfigurationsdateien erstellen. Also für exzellente, wird es, ja, ja, Land RC sein. Und für Prediger wird es schöner, RC, RC, und lassen Sie uns sie auch von unserem Gerüst in Jason-Akte kopieren. Also für ja, gelehnt haben wir das. Legen wir es hier und speichern Sie es. Und für jedes Jahr haben wir das alles klar. Also, ja, Fusseln und Prediger sind Don, lassen Sie uns unser NPM-Skript anpassen. Also lasst uns das alles kopieren und hineinlegen. Paket Jason, innerhalb dieses Skriptabschnitts unten, genau so. Und auch haben wir das klare Skript, um den Rechnungsordner zu löschen. Also, kurz bevor wir unsere gebauten Let uns und PM produzieren, Ron Clear wie ein gestorben. In Ordnung, also sind wir fertig mit Skripten. Was haben wir sonst noch in der Disc-Entfaltungsdatei? Wir haben eine andere Zeile für Installationsabhängigkeiten, was Notizen ist. Ass sind Anzug reagieren Router und Reaktor für stumm. Lass es uns kopieren. Und lassen Sie mich erklären, was passieren wird. Also für unser Style-System werden wir SAS mit Ihnen verwenden. Ich Bibliothek genannt sind hier, und wir können einen Blick auf unseren Anzug werfen, wenn wir nicht auf seine offizielle Dokumentation messen. Was ist also eine Y-Bibliothek? Es ist eine Bibliothek, die uns bereits ziemlich finden Komponenten gibt, die wir verwenden können. Und das ist es im Grunde. Wir werden sehen, dass, wenn wir anfangen, es zu verwenden, ziemlich einfach ist und es unsere Entwicklungsgeschwindigkeit erhöht. wirst du sehen. In Ordnung. Und wann immer wir sehen, dass unser Anzug nicht genug für unsere Fälle ist, werden wir verwenden sagt Ok. Außerdeminstallieren wir, installieren wir, reagieren Router und reagieren Rotterdam Alles in Ordnung, so dass es im Grunde ist. Aber eine Sache zu tun ist auch, diesen Stile-Ordner für unser Projekt zu kopieren. Also, was ist das für Stile Ordner? Also kommt es mit Assad aus vordefinierten Klassen. Also lassen Sie uns tatsächlich diesen Ordner kopieren. Also werde ich diesen Ordner kopieren. Dann werde ich diese Datei in ah öffnen, im Datei-Explorer enthüllen, dann in Wunden. Ich werde diesen Stile-Ordner einfügen und schauen wir uns mal an. Was haben wir drinnen? Also haben wir unsere Hauptdatei, die im Grunde unser Index CSS ist oder nur unsere Hauptdatei für Stile hier definieren würde, sagen wir, wirklich ein paar Off-Klassen, die wir verwenden werden. Es wird Sie sehen und sie Sie sind wirklich einfach. Nichts zu kompliziert. Dann haben wir Dienstprogramm und Sie Einrichtung Farben, die wir in Maine CSS importieren. So können wir jetzt unsere Dateien verwalten. Also, für das Dienstprogramm hier haben wir Klassen, die Bootstrap-Dienstprogrammklassen ähnlich sind, also werden wir sie viel in unserem Code verwenden. Also, bitte schauen Sie sich sie an. Sie sind nicht so schwer zu verwalten. Ich habe keine Utility-Farben. Dies sind grundsätzlich Klassen für Farben. Nichts zu Besonderes hier drüben. Und dann haben wir außer Kraft gesetzt, wie er SS. Also in diesem Jahr bin ich Bibliothek sicher, dass es für Desktop-Anwendungen gedacht ist. So einige von ihren Komponenten sind nicht wirklich gut, um auf mobilen Geräten angezeigt und sie für mobile Bildschirme anzupassen. Ich habe ein wenig ihr CSS modifiziert, ich überschreibe ihre Klassen ein wenig. Jetzt sehen sie auch auf mobilen Geräten gut aus. Das ist nur, um alles gut zu machen. Die Polizei schaut sich das alles an. Es ist sehr einfach. Stellen Sie sicher, dass Sie wissen, was passiert. Also in Abdel Gs, was wir tun müssen, müssen wir es importieren. Also lasst uns importieren. Ah, wir sind Styles Haupt-CSS genau so. Und auch müssen wir unseren Anzug und Fortschritt konfigurieren. Also, wenn wir zu ihrer offiziellen Website navigieren und wenn wir zu den ersten Schritten gehen und wenn wir auf Verwendung in Kreta klicken , reagieren App von hier, können wir sehen, dass wir auch ihre Standard-CSS-Lösungen importieren müssen kopieren Sie diese Codezeile und setzen Sie es, bevor wir unsere wichtigsten Stile einfach so importieren. Also jetzt sind wir bereit, mit unserem Konflikt für Sie zu gehen. Ich Eine Sache, die hier zu tun ist, tatsächlich unser Projekt zu verbinden, um Hilfe zu erhalten. Also lassen Sie uns das integrierte Terminal öffnen und alle unsere Dateien festschreiben. Also zuerst werden wir alles dem Bühnenzustand hinzufügen, und dann werden wir Commit bekommen. Sagen wir, so etwas wie das Gerüst. Im Moment gehen wir Teoh auf. Wir bekommen ihn Konto. Dann werden wir ein Repository erstellen. Dann werden wir seine Chat-App nennen. Machen wir es privat, und wir werden ein neues Repository erstellen Direkt danach können wir diesen Befehl unten kopieren. Ferne am Ursprung. Lasst uns das kopieren und in unser Terminal hineinschreiten. Jetzt werden unsere lokalen Dateien mit diesem Remote-Repository assoziiert und wir müssen unsere lokalen Änderungen online schieben , um sie zu bekommen. Lassen Sie uns verwenden Push Ursprung Senf. Und jetzt schauen wir uns an, so dass alles bereitgestellt wird. Wenn wir die Seite aktualisieren, wird unser Projekt online sein. Also haben wir alles. Chraidi. Und im nächsten Video werden wir anfangen zu bauen. Wir sehen uns dort 100. Das the erstellen und konfigurieren: Hey, in diesem Video werden wir ein neues Firebase-Projekt erstellen und unsere Anwendung bearbeiten. Lass uns gehen. Also lasst uns Google öffnen. Und hier lasst uns Feuerbasis eingeben. Dann lass uns zuerst dein L öffnen und wir landen auf Feuerbasis. Offizielle Webseite. Da Fire Base Teil von der Google Cloud-Plattform ist, verwaltet Google alles. Das bedeutet, dass wir kein neues Konto erstellen müssen. Wenn wir ein Google-Konto haben, was meiner Meinung nach jeder tut, dann werden wir unser Google-Konto mit Firebase Project verknüpfen. Also lassen Sie uns auf Erste Schritte klicken und hier klicken wir auf Neues Projekt hinzufügen. Dann werden wir neue Projektnamen angeben, die Chat-Web-App sein wird. Lassen Sie uns sagen, dann klicken Sie auf Weiter. Dann lassen Sie uns Google Analytics deaktivieren. Wir brauchen es nicht wirklich. Und warten wir ein paar Minuten, bis unser Projekt erstellt ist. Okay, gut. Scheint, als wäre das Projekt fertig. Lasst uns weitermachen. Dann landen wir auf der Feuerbasis Armaturenbrett. Also von hier werden wir alles verwalten. Und wie Sie sehen können, sind wir derzeit auf dem Funkenplan, so dass es bedeutet, dass wir für nichts in Rechnung gestellt werden. In Ordnung, jetzt müssen wir unsere Webanwendung zu unserem Firebase-Projekt hinzufügen. Klicken wir also auf diese Schaltfläche „Einstellungen“ und wählen Sie dann Projekteinstellungen. Dann, hier unten, werden wir unsere APS von hier sehen. Lassen Sie uns auf diese Laboranwendung klicken, und dann lassen Sie uns den Namen für unsere App eingeben, die sein wird, Nehmen wir an , einfach chatten und lassen Sie uns nicht Firebase-Hosting einrichten. Klicken wir auf Registrieren. Es wird auch ein paar Sekunden dauern, und jetzt ist unsere Anwendung bereit. Klicken wir auf, Weiter zu beraten. Jetzt müssen wir Dienste einrichten, die wir innerhalb unserer Anwendung verwenden werden. Also zuerst, lassen Sie uns Datenbank einrichten. Also lasst uns darauf klicken. Und auf dieser Seite sind wir in der Lage, entweder Cloud Fire Store oder Echtzeit-Datenbank, so stellen Sie sicher, dass Sie nicht verwenden Cloud Fire Store. Sie verwenden eine Echtzeit-Datenbank hier unten, also lassen Sie uns klicken, Datenbank erstellen und wählen Sie Start im gesperrten Modus, damit alle unsere Regeln nach unten gesucht werden . OK, also lassen Sie es uns aktivieren, und es dauert ein paar Sekunden, nur um eine neue Datenbank für uns zu erstellen. Alles klar, es ist erledigt. Jetzt müssen wir auch Speicher für unsere App einrichten. Also lasst uns darauf klicken und dann loslegen. Es wird uns um Regeln bitten. Klicken wir auf „Weiter“. Dann müssen wir den Standort für unsere Lagerung auswählen. Es ist sehr wichtig und es beeinflusst diese Geschwindigkeit wirklich, also wählen Sie einfach die nächste zu Ihnen. Für mich ist es wohletwas wohl mit Europa. Also wähle ich Europa West drei aus. Dann klicke ich auf Dung und es dauert ein paar Sekunden, um eine neue Geschichte für uns zu erstellen. Warten wir. Okay, perfekt. Scheint, als wäre der Speicher fertig. Unsere letzte Sache ist es, die Authentifizierung für unsere Anwendung einzurichten. Also lassen Sie uns hier auf Authentifizierung klicken. Wir haben keine registrierten Benutzer. Für jetzt, lasst uns auf Sign and Method klicken, und von hier aus können wir alle Signierungsanbieter sehen, die wir verwenden können. Wir werden keine E-Mail verwenden, und Passwort wird nur Google und Facebook verwenden. Also zuerst, lasst uns darauf klicken. Und dann lasst uns einfach so aktivieren klicken. Also lassen Sie uns Unterstützung und E-Mail auswählen und dann öffentlichen Namen projizieren. Lassen Sie uns vielleicht sagen, etwas wie Chat, App und lassen Sie uns auf sicher klicken, und danach wird es alles automatisch konfigurieren. Wir müssen uns um nichts kümmern. Google Sinan ist bereits aktiviert. Und was ist mit Facebook? Loggen Sie sich ein Also lasst uns darauf klicken. Und von hier haben wir keine automatische Konfiguration. Wir müssen es manuell machen. Also lasst uns hier auf aktivieren klicken. Wir müssen APP, Idee App Geheimnis ausfüllen . Und wir müssen das benutzen. Umleiten Sie Ihre l Also, was müssen wir in Google tun? Wir müssen Facebook-Entwickler eingeben. Dann gehen wir zu Facebook für Entwickler. Und hier auf dieser Seite oben, werden wir auf meine APS klicken und von hier aus werden wir auf Create APP klicken, können ausgewählt. Und dieser Spielname wird so etwas wie Charts sein, die gerade geweint wurden. Alles klar, dann lassen Sie uns auf Create app I d. Dann lassen Sie uns Sicherheitsüberprüfung durchgeführt und ah waren Facebook-Anwendung erstellt werden . Also von hier, was wir tun müssen, müssen wir zu den Einstellungen gehen, dann gehen Sie zu grundlegenden Und hier finden wir unsere App I d und up Geheimnis. Rufen wir p App I d und dann Tempo es hier drüben. Dann müssen wir auch unsere App geheim machen. Lassen Sie uns auf Show klicken und nennen wir es auch und fügen Sie es hier in Feuerbasis. Und wir müssen das auch hinzufügen. Leite dein l hierher, lass es uns kopieren. Dann speichern wir unsere Änderungen. Und hier unter Prokes, lasst uns auf Pluszeichen klicken. Wenn wir also darauf klicken, müssen wir Facebook auswählen. Schauen Sie und klicken Sie auf Einrichten. Und dann müssen wir wählen, dass wir in der Lage, auf Web anmelden, dann Website Ihre l. Ich weiß nicht. Setzen Sie einfach etwas, das wirklich keine Rolle spielt. Eigentlich, nein, wir brauchen das nicht. Lassen Sie uns auf Einstellungen klicken, weil wir bereits Facebook haben. Logan daran Es war nur ein schneller Start von Facebook-Team. Also hier für diese gültigen Redirect Ihre andere müssen wir diese Ihre l hinzufügen, die wir auf Feuerbasis haben . Also stellen Sie sicher, dass es hier ist. Also, jetzt ist es editieren. Klicken wir auf Änderungen speichern. Und jetzt ist unsere Facebook-Anwendung bereit. Also lasst es uns retten. Und jetzt unsere Facebook in konfigurieren Sie es und wir konfigurieren es alles innerhalb Firebase Website . Jetzt können wir es tatsächlich zu unserem Code hinzufügen. Also lasst uns zurück zu V s Code und von hier. Öffnen wir zuerst unser Terminal. Ich denke, wir müssen Global Seelye von der Feuerbasis installieren. dazu Geben SiedazuNPM install Dash G Firebase Tools ein und installieren Sie es. Ich habe es bereits auf meinem Rechner, also werde ich es danach nicht zweimal installieren. Wenn wir diese Feuerbasis Werkzeuge haben, müssen wir Feuerbasis eingeben und das ist alles. Danach wird es Sie auffordern. Autorisieren Sie sich, füllen Sie bitte die Anweisungen aus. Und danach, wenn ich diesen Befehl ausführe, werde ich dieses Licht in der Arbeit sehen. Also bin ich bereit, fortzufahren. Ja. Dann muss ich Dienste auswählen, die ich initialisieren möchte. Also brauche ich nur Datenbank. Also navigiere ich mit Pfeilen und ich wähle mit Raum und auch ich brauche Hosting Onley. Diese beiden wählen keinen Speicher aus. Also dann drücke ich Enter Dann wähle ich ein bestehendes Projekt verwenden und dann werde ich Chat-Web-App auswählen , die ich gerade erstellt habe. Ich habe ausgewählt, welche Datei für spätere Abfallwalzen verwendet werden soll. Lassen Sie uns einfach eingeben als das öffentliche Verzeichnis, das ich anstelle von öffentlich verwenden möchte. Lassen Sie uns Typ gebaut und dann möchte ich meine App als eine einzelne Seitenanwendung konfigurieren. Das ist wahr. Also lasst uns klicken. Ja, und der eingebaute Index HTML existiert bereits über, oder? Ja. Ich will, dass du überschreibst. In Ordnung, jetzt. Feuerbasis ist assoziativ. Nehmen wir an, unser Remote-Projekt, das wir gerade erstellt haben, dass eine mit unserem lokalen Projekt verbunden ist, können wir Firebase Jason Fire Besar See sehen, die unser Projekt I d als innerhalb der Datenbankregeln enthält . Wir haben unsere Datenbankregeln und innerhalb der Firebase Jason haben wir unsere lassen Sie uns sagen, Projektbeschreibung. Also für Datenbankregeln aus dieser Datei für das Hosten bereitgestellt werden, haben wir Öffentlichen Ordner , der erstellt wird. Dann haben wir Dateien ignorieren, die wir nicht auf Firebase-Hosting bereitstellen und auch neu schreibt. Weißt du noch, als wir versuchten, unser Projekt auf Hip Hop hochzuladen? Also, wenn wir die Seite aktualisieren, wurden wir nicht gefunden. Das liegt daran, dass wir eine einseitige Anwendung haben und Firebase dieses Problem löst, indem wir nur alle Routen schreiben und es für einzelne Seiten Rap konfigurieren. Wir werden also keine Probleme damit haben. Alles klar, das war's. Jetzt können wir tatsächlich Bibliothek in unser Projekt installieren. Also, lassen Sie uns einfach PM install firebase eingeben. Und warten wir, bis es fertig ist. In Ordnung, wir haben Firebase als Bibliothek installiert. Nun, was wir unter Quellordner tun müssen, lassen Sie uns in Ihrem Ordner erstellen, dass wir MISC nennen und hier werden wir eine neue Datei Firebase Punkt gs erstellen. Hier werden wir unsere Feuerbasis in unserer App konfigurieren. Also denken wir zuerst, dass wir tun müssen, müssen wir zurück auf die Website gehen, dann wieder zurück zu den Projekteinstellungen. Und wenn wir von hier nach unten scrollen, können wir diesen Firebase-Konflikt finden. Also lasst uns das kopieren. Und hier werden wir einen neuen wertvollen lassen Sie uns sagen, nur ständigen Konflikt zu schaffen und lassen Sie uns es einfach so einfügen, dass jetzt fähig ist. Importieren Sie auch Firebase-Bibliotheken. Also werden wir Import Fire Base von Firebase App eingeben. Es ist wichtig, nicht aus Firebase zu importieren, da es die gesamte Bibliothek und die gesamte Bibliothek wirklich, wirklich großist wirklich, wirklich groß und alle Dateien daraus hinzugefügt werden. So stellen wir sicher, dass wir nur Firebase-App importiert haben, dass das, was wir tun müssen, müssen wir feuerbasis dar initialize app nennen und innen müssen wir unsere Konfliktdatei stimmen Also lassen Sie uns dick kommen . Und jetzt gibt dies für initialize App als eine Instanz aus Feuer basierte Anwendung zurück. Also lassen Sie uns es in ein wertvolles lassen Sie es uns zuweisen, sagen wir, einfach App einfach so. Und wir sind bereit, jetzt zu gehen. Mit dieser App wertvoll, sind wir bereit, Firebase-Dienste wie bis ab ab native Bienen zugreifen, Fire Store-Funktion, Messaging all das. Also, aber das ist, was wir im nächsten Video tun werden, wie wir gemacht werden. Die eine Sache, die ich tun möchte, bevor wir dieses Video beenden, möchte ich unsere Änderungen verpflichten, um Hilfe zu erhalten. Also lasst uns bei Punkt vergessen Dann werden wir setzen, Commit bekommen und wir werden sagen, dass das initialisierte Firebase-Projekt So etwas. Alles klar, Perfect. Wir sehen uns im nächsten. 101. Seiten erstellen - private und öffentliche Routen: Hey, jetzt haben wir Firebase in unserem Projekt initialisiert. Beginnen wir mit dem Erstellen des Projekts selbst. Das erste, was ich tun werde, werde ich mein Terminal öffnen und ich werde ausführen und PM Run beginnen , Server zu entwickeln. Aber kurz bevor ich diesen Kommentar ausführe, werde ich neue Datei erstellen, die dot e n v dot local ist und ich werde es in das Root-Verzeichnis und hier Rivalen beruhigen Browser zu keiner. Dies soll verhindern und PM Ron beginnt die Anwendung sofort in meinem Browser zu starten. Also hasse ich dieses Verhalten wirklich. Wenn es Ihnen gefällt, machen Sie diesen Browser nicht. Keine Sache. Also, jetzt werde ich diesen Befehl ausführen und ich muss manuell zum Browser gehen und auf lokalen Host 3000 zugreifen . Also hier werde ich die hallo Nachricht sehen, die ich in Abdel Gs angegeben habe, wenn das Risiko entfaltet das Projekt. Nun, was wir tun müssen, müssen wir zuerst unsere Seiten definieren. Aber wir haben nicht initialisiert reagieren Rotor, wenn Risiko entfaltet die App so lässt navigieren zu Index togs und hier zu initialisieren Reactor wird Browser-Rotor von React Router stumm importieren und dann müssen wir unsere App-Komponente um den Browser wickeln, Drehkomponente. Und jetzt sind wir in der Lage, es zu benutzen. Okay, gut. Lass uns gehen. Teoh Abdel Gs und hören, welche Routen wir definieren werden. Lassen Sie uns zuerst den Schalter verwenden. Runter hier, Def. Also werde ich Schalter von React ruder als innerhalb des Schalters setzen. Die Leute definieren die Route. Und welche Routen sollten wir hier setzen? Nun, wir werden ein paar Routen zu finden haben, und einer von ihnen ist die Signatur Seite und die Homepage. Und die Sache ist, dass wir nicht in der Lage sein, auf die Homepage zugreifen, bis wir in der APP angemeldet sind . Also müssen wir eine Art von Privatforelle definieren, die nur Zugang sein kann, wenn wir angemeldet sind . Also, was wir tun, das erste, was Leute tun, wird neuen Ordner auf der Ressource erreichbar Namensseiten erstellen . Hier werden wir zwei neue Komponenten erstellen, die unsere Seiten darstellen werden. Zuerst wird ein Anmeldeseite Zeichen sein und sie ist hier. Ich werde Gerüst und Sie Komponente mit der Snipper-Erweiterung. Und lassen Sie uns einfach so einloggen. Dann werde ich eine andere Komponente erstellen, Holmdel Gs und ich werden genau das Gleiche tun. Und ich werde jetzt ein gerechtes Zuhause nennen. Wie können wir diese Zeilen hier definieren? Wir können Route setzen und dann können wir das erste Zeichen setzen, so dass diese Route definiert ist. Aber was ist mit zu Hause? Wie können wir es privat machen für diese wird eine andere Komponente erstellen. Wir werden es private Route nennen und es wird diese Routenkomponente imitieren, die von React Router kommt . Aber es wird verbessert und es wird gegen einen Zustand überprüfen. Also unter Wunden, lassen Sie uns neue Ordnerkomponenten erstellen Hier werden wir neue Datei private Route einfach so setzen. So wird es diese Routenkomponente imitieren. Also, wie ist diese Routenkomponente zu befrieden? Welche Probleme gehen wir? Was Kinder einen Weg machen. Also müssen wir Pfad angeben. Also für die Unterzeichnung wird es nur signieren. Also jetzt über den privaten Rauer. Also lassen Sie uns definieren, wie wir es verwenden werden. Es wird also eine private Route im Inneren sein. Wir müssen eine Komponente oder nur Kinder gießen, die wir rendern möchten. Es wird unsere Homepage sein, genau so und für Requisiten. Wir müssen auch spezifiziert, dass wir diese Komponente nur auf Schrägstrich rendern. Okay, jetzt im privaten Weg. Wir wissen, dass alles, was wir an diese privat gereiste Komponente als Requisiten übergeben, tatsächlich irgendwie zu dieser Routenkomponente umgeleitet werden wird . Also hier werden wir alles strukturieren und es hineinlegen. Sagen wir, Route Requisiten. Das einzig richtige, was wir brauchen, um daraus zu bekommen, sind die tatsächlichen Kinder, die wir rendern wollen. Also lasst uns d Struktur Kinder und alles andere wird unter Route Requisiten verfügbar sein. Und wir müssen eine einfache Bedingung hier drüben gießen. Sagen wir es vorerst. Da wir kein Profil haben, erstellen wir einfach den Stier unschätzbar wertvoll Lassen Sie uns sagen Profil und setzen Sie ihn auf false. Und jetzt, was wir tun werden, werden wir fragen, ob unser Profil auf Narren gesetzt ist. Wenn wir kein Profil haben, dann werden wir zurückkehren und Ihre Komponente, die wir nicht verwendet haben, bevor es umgeleitet werden wird , die auch von React Rotor-Paket kommt. Und diese Umleitung wird im Grunde umgeleitet, um Pass anzugeben. So erhält es nur eine Requisite, die zu und dafür angeben wird. Also, wenn wir keine Zeichen und Daten haben. Wenn wir kein Profil haben, werden wir zur Unterzeichnung umleiten. In Ordnung. Ziemlich einfach. Nun, wenn diese Bedingung keinen Platz einnimmt, dann würden wir normalerweise unsere Komponente verwenden, die wir als Kinder übergeben. Anstatt dieses def zurückzugeben, werden wir einfach die Route vom Reaktionsrotor zurückgeben als vier Requisiten. Wir werden alle Requisiten angeben, die wir hier sammeln. Also werden wir sie über diese Routenkomponente mit genau dieser Syntax und innerhalb verbaler Vergangenheit Children einfach so verteilen . Und wenn wir es speichern, schauen wir es uns an. Wenn es jetzt tatsächlich funktioniert, wenn ich versuchen werde, einen Schrägstrich Homepage zuzugreifen, werde ich sofort umgeleitet, weil wir immer falsche Bedingung haben. Es bedeutet also, dass wir immer auf die Anmeldeseite weitergeleitet werden. Wenn ich also gesagt habe, dass es jetzt zu wahr ist, wenn ich versuchen werde, auf die Homepage zuzugreifen, werde ich da sein. Das ist es also. So können wir den privaten Weg machen. Und auch, wenn wir angemeldet sind, wollen wir die Anmeldeseite nicht sehen. Wir möchten auch weitergeleitet werden, sagen wir, auf unser Dashboard oder auf die Homepage. Also, was wir tun können, werden wir eine weitere Komponente erstellen, die wir öffentliche Crowd nennen werden. Also lassen Sie uns öffentliche Route erstellen. Nicht Ja, und lassen Sie uns tatsächlich alles von privaten Weg kopieren. Und hier, lassen Sie uns private Route in öffentliche Route umbenennen. Und hier wird das Ding das nächste sein. Also, wenn wir Profil haben, dann werden wir auf die Startseite umgeleitet werden. Auf diese Weise werden wir, wenn wir angemeldet sind, nicht in der Lage, die Anmeldeseite zu sehen, wo sofort zu Hause weitergeleitet wird. Also ist die Logik irgendwie gleich. Aber es ist jetzt umgekehrt, wie wir tatsächlich Einweg-Menge tatsächlich in der gleichen Weise wie wir unsere private Ich werde verwendet. Also hier, statt nur Route wird schlechte öffentliche Rauer, die wir aus Components Ordner importieren. Jetzt brauchen wir diesen Import vom React Router nicht. Lass es uns retten. Und eigentlich wird nichts geändert, weil wir keine Daten für das Profil haben. Also, das ist es im Grunde. So sind wir in der Lage, unsere privaten und öffentlichen Massen in React Router zu verwalten. Nun lassen Sie uns unsere Änderungen begehen und dieses Video beenden, also werden wir alles bekommen, dann werden wir unsere Nachricht übergeben, die öffentliche und private Routen erstellt wurde. Im nächsten Video werden wir mit dem Erstellen der Anmeldeseite beginnen. Wir sehen uns dort. 102. Anmeldeblatt: Hey, willkommen in diesem Video, werden wir mit dem Bau der Entwurfsseite beginnen. Lass uns gehen. Bevor wir anfangen. Ich möchte nur erwähnen, dass wir den Reaktionsanzug benutzen werden. Du. Warum Bibliothek, die wir installiert haben? Wir werden es sehr nutzen. Bitte öffnen Sie diese Dokumentation bei Ihrem nächsten Schritt, damit Sie immer darauf zugreifen können. Gehen Sie also zur Startseite und klicken Sie dann auf Komponenten. Und hier auf dieser Seite finden Sie alle Komponenten, die diese Bibliothek uns West zur Verfügung stellt. Es ist sehr einfach zu bedienen, und sie alle sind meist intuitiv. Nehmen wir also an, wenn wir von hier auf jeder Unternehmensseite zu Schaltflächenkomponente gehen, können Sie viele verschiedene Beispiele und Anwendungsfälle finden. Und auch, wenn Sie klicken auf zeigte die Quelle, Sie vertrauen, wie diese Komponente in Ihrem Mantel verwendet werden kann. Sie können es immer kopieren und einfügen. Und wenn Sie nur wissen müssen, welche Komponente als Requisiten erhält, können Sie nach unten scrollen und alle möglichen Requisiten anvertrauen, die an diese bestimmte Komponente weitergegeben werden können . Ordnung, also in unserem Code, wenn ich dieses Zeug schreiben werde, werde ich nicht referenzieren Es kann ein paar Mal sein, aber die meiste Zeit, weil es besser intuitiv ist. Ich werde es nicht erklären. Wenn Sie also immer noch nicht wissen, was passieren wird, navigieren Sie bitte zu dieser Dokumentation. In Ordnung, also lasst uns anfangen. So können Sie zu unserem Code navigieren und lassen Sie uns Anmeldeseite öffnen. Und hier werden wir zuerst beginnen, wir werden diese def entfernen, und wir werden Containerkomponente aus unserem Anzug setzen. Sie könnten denken, dass es sehr ähnlich ist, von Bootstrap zu behaupten, weil es Container jemals in dieser Bibliothek ist . Ist es nicht. Es gibt uns nur die Anzeige von Flex. Dann werden wir Grit benutzen. Und in dieser Bibliothek ist großartig so ziemlich wie in Bootstrap. Aber im Gegensatz zu Bootstrap hat es 24-Säulensystem. Im Gegensatz zu Stiefeln, fallen Sie mit 12 Kämmen. Ordnung, also innerhalb des Gitters, haben wir wachsen und innerhalb der Reihe, wir haben Spalte genau so. So wird unser Dickdarm Gesundheit von seinem Maximum mit auf mittleren Geräten sein. Also auf sehr kleinen Geräten, wir gehen zu armen alten 24 Spalten auf Medium und höher. Wir werden jetzt 12 setzen, in dieser Spalte werden wir Panel-Komponente setzen, und es wird uns im Grunde ein paar von klopfen geben. Okay, also drinnen werden wir Def setzen. Und in diesem schwierigen definieren Alter zu Tag, das sagen wird, Willkommen zu chatten Unter wir Pitak setzen, die sagen wird, progressive Chat-Plattform vier Mahlzeit Kämpfe, so etwas. In Ordnung, schauen wir es uns an. Wenn ich die Seite aktualisiere, sehe ich diesen seltsamen, seltsamen Hintergrund. Das ist, weil ich Spalte aus unserem Anzug Leap Karussell importiert habe. Ich wollte das nicht. Dies ist ein wenig schwierig, wenn Sie äußere Intel Essence verwenden, stellen Sie sicher, importiert nur aus unserem Anzug. Wenn ich es jetzt speichere, kann ich sehen, dass es tatsächlich funktioniert hat. jedoch Unser Text istjedochnicht zentriert. Wir wollen es zentrieren, damit wir eine unserer Dienstprogrammklassen verwenden können, die wir im Dienstprogramm schlecht sind, wie hier sagt, und sie sind fast wie Bootstrap, so können wir Klassennamen, Textcenter definieren und es wird Arbeit. jedoch sehen, Wir könnenjedoch sehen,dass unsere Komponente, wenn wir inspiziert , nicht vollständig auf große Geräte zentriert ist. Auf Mobilgeräten ist es jedochOK. Auf Mobilgeräten ist es jedoch Das ist, weil, wenn wir diese 12 Säulensystem anwenden, unser Element ist nicht, Nehmen wir es an. Wir müssen uns bewerben. Versatz. Es ist wieder sehr ähnlich, wie in Bootstrap. Also für 12 Spalten müssen wir Offset von sechs Spalten davor anwenden. Also werden wir einen leeren Offset von sechs Spalten setzen. Und gerade jetzt wird unser großes Element zentriert sein, wie Sie von dieser Polsterung hier sehen können. In Ordnung. Es sieht gut aus unter einem Disney, wenn wir noch einen Def setzen wollen. Und hier werden wir unsere Schaltflächen definieren, mit Google signieren und sich mit Facebook anmelden. Also zuerst werde ich Knopf setzen. Dann, als Requisiten, werde ich passieren. Es wird ein Block-Button sein. Es wird alles mit seinem Elternteil nehmen. Dann werde ich Farbe setzen, und ich werde es auf blau setzen. Und das war's vorerst. Also in diesem Boden werde ich Aiken-Komponente aus unserem Anzug gießen, und wie ich kann, werde ich angeben, dass ich vier Facebook einfach so stützen kann. Und dann werde ich einen einfachen Text setzen, weiter mit Facebook, aber groß geschrieben und das gleiche werde ich für die Unterzeichnung mit Google tun. Ich werde eine Farbe grün angeben. Und anstelle von Phrasebook kann ich Google Aiken angeben und dann mit Google einfach so fortfahren. Nun, was sehen Sie einen Blick? Okay, es scheint gut zu sein, aber wir wollen etwas Marge hinzufügen. Also für Disney, wenn wir Klassennamen und Rand oben drei setzen, so etwas. Okay, sieht gut aus. Jetzt müssen wir es so machen, dass vertikal zentriert. Oder vielleicht an einem gewissen Rand zu den oberen Elementen. Es sieht also schöner aus. Also für diese großartige Komponente, werden wir Klassennamen definieren, und wir werden Rand oben Seite setzen. Dies ist also eine Klasse, die ich in einer der Utility-Dateien definiert habe, so dass es den Elementen nur viel Spielraum gibt. Also, wenn wir es untersuchen, wie Sie sehen können, gibt Margin Top uns 150 Spitzen sonst. Alles klar, also sieht es gut aus. Was ist mit Funktionalität? Wie können wir unsere Unterzeichnung tatsächlich verwalten und schließlich beginnen, diese Facebook- und Google-Wissenschaft hinzuzufügen . Was müssen wir also innerhalb von Firebase gs tun, wo wir unsere Anwendung initialisiert haben? Wir müssen die Bibliothek von der Feuerbasis importieren. Also hier werden wir Firebase einfach so importieren. Dann hier unter App werden wir const in verfügbar exportieren, die nur aus nennen wird und wir app-dot off aufrufen und es wird uns das Objekt geben, das wir verwenden können, um mit der Feuerbasis zu interagieren. Also lassen Sie es uns innerhalb der Unterzeichnung speichern. Wir werden unsere Handler für On Click-Ereignis für Schaltflächen definieren. Also werden wir zuerst auf,sagen wir, Facebook anmelden, und dann werde sagen wir, Facebook anmelden, ich das gleiche für Google auf Google-Signierung tun und ihre Funktionalität ist fast die gleiche. Also werde ich 1/3-Funktion erstellen, die ich innerhalb auf Facebook-Signierung und innen auf Google-Signing aufrufen werde. So werden wir es so etwas wie melden Sie sich mit Provider und Provider entweder als Facebook oder Google. Alles klar, als Argument wird es diesen Anbieter erhalten und dann werden wir einige denken Einsicht. Also innen auf Facebook, loggen Sie sich ein. Wir werden anrufen, melden Sie sich mit Provider und Rubble Pass ein Anbieter wird in einem Moment sprechen, und hier auch mit Provider signieren jetzt, wie wir tatsächlich signieren können, so Inside Signing mit Provider, wir kann einfach tippen und importiert aus unserer Misc Firebase Datei dieses off Objekt, das wir von hier bekommen, wenn wir nur Punkt von Intelligenz setzen. Wir können eine Menge von Dingen sehen, die hier passiert. Wir können auf den aktuellen Benutzer zugreifen. Wir können das Passwort zurücksetzen und anders bestätigen. Wenn wir nur signieren, können wir hier verschiedene Dinge haben. Wir senden in mit E-Mail und Passwort mit Telefonnummer mit Papst bis mit Umleitung. Also viele Dinge, die hier passiert, sind wir daran interessiert, mit Pop-up zu signieren und wenn wir dies innerhalb montiert nennen , müssen wir den Anbieter übergeben und es wird vorausgesetzt, dass wir als Argument erhalten werden . Also werden wir es hier setzen. Also, was ist dieser Anbieter? Also dieses Provider-Objekt, das wir aus der Firebase-Bibliothek importieren müssen , sagen wir , sagen wir, und es ist statisch. Also, was wir hier tun müssen, müssen wir Feuerbasis aus Firebase Slash AP wieder importieren, es ist wichtig, aus Firebase Schrägstrich ap zu importieren Also hier, als Anbieter, werden wir neue Firebase Punkt auth dot facebook übergeben off Provider und wir müssen es nennen wird es uns zurückgeben und Ihr Provider Objekt, das wir als undokumentiert an Dysfunktion und den gleichen Rebellen für Google-Signing übergeben werden. Wir werden neue Feuerbasis absetzen, aber dieses Mal Google aus Anbieter einfach so. Nun, was ist das eigentlich assoziieren? Handler mit Knöpfen. Also für auf Klick-Ereignis für Facebook-Muster werden wir auf Facebook-Signatur setzen und für Google, Google, wir werden auf Klick auf Google setzen, Anmelden einfach so. Alles klar, sieht gut aus. Jetzt ist diese Unterzeichnung mit Pop up, wenn wir jedoch, es ist ein Versprechen. Also müssen wir darauf warten. Lets konvertieren unsere Signierung mit Provider in eine Senkenfunktion und warten auf diese Unterzeichnung mit Pope up. Und dann lassen Sie uns die Ergebnisse in das Ergebnis umsetzbar. Und lassen Sie uns Konsul schauen und sehen. Was erhalten wir, obwohl, obwohl, wenn ich die Seite eröffnete ich Rat aktualisieren, dann kann ich sehen, dass reagiert mit 400 Arkwright. Das ist in Ordnung. Klicken wir zum Beispiel auf Weiter mit Google . In Ordnung, Sie können sehen, dass es tatsächlich etwas tut, und jetzt kann ich eines meiner Google-Konten auswählen. In Ordnung, wählen wir meine Konten aus. Und jetzt können Sie sehen, dass ich hier ein Ergebnis habe. So ist es ein Objekt, das drei verschiedene Objekte zusätzliche Benutzerinformationen hat, so dass wir sehen können, dass dies unser neuer Benutzer ist. Wir können E-Mail Vornamen, verschiedene Ideen bekommen . Wir können ein Bild bekommen, wenn unsere E-Mail verifiziert ist. Also diese Daten kommen von Google und Sie können Anbieter sehen. Das gebe ich Google. Dann haben wir Anmeldeinformationen, verschiedene Zugriffstoken und dann haben wir Benutzerobjekt. Daher stellt dieses Benutzerobjekt derzeit angemeldeten Benutzer dar. Es ist allgemein. Und von hier aus können wir verstehen, ob unser Benutzer eingeloggt ist. Sind wir nicht. Wir werden über dieses Benutzerobjekt in den kommenden Videos ausführlich sprechen. Also jetzt, was wir tun können Wir können tatsächlich zurück zu Firebase Schwächen, Gehen Sie zur Authentifizierung. Hier können wir unsere Authentifizierung neu laden. Nehmen wir an, melden Sie sich in der Datenbank an. Und hier beschränken wir unsere E-Mail mit Provider, wenn es erstellt wurde und erstellt Benutzer I d. Also, vor allem, dies ist keine Datenbank. Dies ist genau wie eine kleine Datenbank in dieser Authentifizierungsbibliothek. Wir müssen immer noch unsere Benutzer innerhalb der Datenbank speichern. Das ist nur zu verfolgen. Wie viele Nutzer haben wir uns in unserer App angemeldet oder so etwas? In Ordnung, also lassen Sie uns jetzt unseren Code etwas ändern und lassen Sie uns unseren Benutzer in der Datenbank speichern. Also zuerst, lassen Sie mich sagen, versuchen, fangen, fangen, schauen Sie hier rüber, weil wir mit Versprechen arbeiten und wir wollen sicherstellen, dass wir immer mit anderen umgehen . Und übrigens, nur um den Benutzer zu benachrichtigen, dass wir derzeit angemeldet sind oder wenn wir irgendwelche Fehler haben, können wir die Alert-Komponente verwenden, die wieder aus unserem Anzug kommt. Wenn wir also einen Fehler haben, rufen wir Alarm auf, und wenn wir Punkt setzen, können wir sehen, dass wir Zugriff auf atter Info und Erfolgs- und Warnmeldungen haben . Also lasst uns für eine Nachricht einreichen. Also als erstes Argument, werden wir Fehler diese Nachricht setzen, und dann müssen wir die Dauer dieser Nachricht von dieser Warnmeldung absetzen. Also lassen Sie uns für Sekunden in angegeben in Millisekunden schlecht. Und wenn wir eingeloggt sind, werden wir wachsam machen. Sagen wir Erfolg. Und dann werden wir mit nochmals „Timeout“ vier Sekunden eingeloggt. In Ordnung. Scheint gut. Nun, was wir mit diesem Ergebnis tun können. Wie Sie sich erinnern, haben wir ein Objekt erhalten. Wir erhielten zusätzliche Benutzerinformationen und erhielten auch Benutzerobjekt. Nun, indem Sie überprüfen, ob zusätzliche Benutzerinformationen Ihr Benutzer ist Wenn unser Benutzer ist, der derzeit signiert wird, ist es ein neuer Benutzer wird es in der Datenbank speichern. Also, wie können wir das tun? Gehen wir zurück zu Firebase Thaci s hier. Wir werden eine andere Bibliothek importieren, die Firebase-Schrägstrich Datenbank sein wird, um mit der Datenbank zu interagieren und ähnlich wie aus. Wir werden const Datenbank ap dot Datenbank einfach so exportieren. So unter dieser Datenbank, wertvoll können wir mit Datenbank interagieren. Lassen Sie uns so von der Insider-Signierung genießen, werden wir Datenbank referenzieren, die wir von Misc Firebase importieren. Dann werden wir Punkt hier setzen. Wir müssen Referenz angeben, die im Grunde Pfad in unserer Datenbank auf dem Ritual speichern unsere Daten ist. Also werden wir unsere Benutzerinformationen unter Schrägprofilen Schrägstrich Benutzer i d speichern. Also lasst uns String-Interpolation öffnen. Und als Benutzer I d. Wir werden Benutzer Punkt referenzieren Wir können E-Mail-Anzeige, Name verzögert und viele andere Dinge im Zusammenhang mit diesem Benutzer haben. Aber wir sind an Benutzer I d interessiert so dass dieser Benutzer ich d wird der gleiche wie dieser Benutzer sein. Ich d in der Authentifizierungsbibliothek. Es wird also so sein, als würden wir einen neuen Benutzer erstellen. Es wurde zur Authentifizierung hinzugefügt, der Benutzer I d automatisch generiert wird, und dann werden wir diesen Benutzer I d verwenden, um den Benutzer in der Datenbank zu speichern. In Ordnung, also jetzt, wenn wir die Referenz haben, können wir einen weiteren Punkt setzen und von hier aus müssen wir die SAT-Methode aufrufen. Und wie Sie aus der Beschreibung sehen können, schreibt es Daten an diesen Datenbankspeicherort. Also, wenn ich es hier nenne, werden wir ein Objekt speichern, weil wir benachbarte basierte Datenwege haben. Also wird unser Objekt so aussehen. Wir werden Name und Name wird Benutzer Punkt Anzeigename sein. Dann werden wir auch erstellt haben, an dem sagen wird, wenn das Konto erstellt wurde. Um also einen richtigen Zeitstempel in unsere Datenbank zu setzen, muss wieder etwas statisches verwendet werden. Lassen Sie uns die Eigenschaft sehen, die aus der Firebase Library kommt. So erhalten wir einen Bericht Firebase Punkt Datenbank Punkt Serverwert Punkt Zeitstempel, und es wird bereinigt Zeitstempel in unsere Datenbank setzen. Ordnung, also dieser Punkt sagte, gibt auch dieses Versprechen zurück. Also, wenn wir etwas mit Datenbank oder was auch immer tun, interagieren wir mit allem. Höchstwahrscheinlich werden wir mit Versprechungen interagieren. Deshalb müssen wir es abwarten und alles wird von diesem catch-Block gefangen und Benutzer wird benachrichtigt. Alles klar, lassen Sie uns das alles retten, denn es scheint wirklich eine Menge zu sein. Klicken wir nun auf, Weiter mit Google. Wählen wir meine E-Mail aus und jetzt bin ich angemeldet. Aber es ist eigentlich ein wirklich seltsam. Das ist wahrscheinlich, weil ich dieses Konto bereits hinzugefügt habe Hier, vielleicht lassen Sie mich es dieses Konto. Und jetzt versuchen wir es noch einmal, weil wir eine Angelegenheit bekommen müssen. In Ordnung, also klicken wir auf, fahren mit Google fort, dann wählen wir unser Konto erneut aus. Und jetzt haben wir die Erlaubnis heute Abend verweigert. Und wir haben das nicht für uns, lassen Sie uns Punkt auf ihre Nachricht setzen. Aber die Sache ist, dass wir die Erlaubnis verweigert haben, und das ist, weil, wenn wir unsere Datenbank öffnen , Ordnung, lasst uns gehen und klicken, Datenbank erstellen. Dann gehen wir zu Regeln. Und hier haben wir standardmäßig die gesperrte Datenbank erstellt. Was auch immer wir versucht haben, mit der Datenbank zu tun, wir werden diese Erlaubnis heute Abend haben, denn, wie Sie sehen können, haben wir Lese- und Rechteberechtigungen gesetzt, um für alle aus unserer Datenbank zu fallen. Um das zu vermeiden, was wir hier tun können, bevor wir diese Regeln sagten , werden wir sagen, dass für Profile , und wir müssen sagen, EBA für unsere Sicherheitsregeln. Und es ist nicht der Standardweg, etwas mit Sicherheit zu definieren, aber es braucht nur Zeit, um sich daran zu gewöhnen. Vertrauen Sie mir, es ist sehr einfach zu arbeiten. So haben wir unseren Profilpfad. Wir müssen nur der Vergangenheit folgen. Also speichern wir unsere Daten unter Profilen Schrägstrich Benutzer i d. Also werden wir es als Objekt setzen. Also haben wir Profile, dann müssen wir einen Schlüssel setzen. Und weil es etwas Dynamisches sein wird, das sich ändern wird, wir ein Dollarzeichen setzen, und dann können wir so etwas wie Benutzer setzen, d. Dies ist nur, um es innerhalb verschachtelten Objekts zu referenzieren. Lassen Sie mich erklären, was ich meine. Also in dieser Vergangenheit werden wir wieder ein anderes Objekt öffnen, und drinnen werden wir einen weiteren Schlüssel setzen, der Dot Leckerbissen und Dot richtig sein wird? Genau das Gleiche, wie wir hier drüben haben. Also für dot Lesen Sie, was wir tun werden. Wir werden verweisen, ob dieser Benutzer i d , den wir von hier erhalten haben. Jetzt geht es wie verfügbar. Wir können es innerhalb dieses Bereichs referenzieren. Nehmen wir an, dass ich gerade hervorgehoben habe. Also, wenn Benutzer ich d das ist, dass man hier in diesem sagen wir, Kontext aus Regeln ist ein globaler wertvoller, auf den wir zugreifen können, so dass wir Daten von Profilen Schrägstrich Benutzer i dlesen können i d . Regeln ist ein globaler wertvoller, auf den wir zugreifen können, so dass wir Daten von Profilen Schrägstrich Benutzer i dlesen können. Wir könnten versuchen, auf gleich uns dot-Benutzer i d zuzugreifen , also bedeutet es eigentlich nur der Besitzer von diesem Dokument. Nur der eigentliche Benutzer kann seine eigenen Daten lesen. Jede andere Person, jeder andere Benutzer wird Zugriff verweigert. In Ordnung, so definieren wir die Regeln für „Nicht behandeln“. Also lassen Sie es uns kopieren und wir werden das gleiche für Punkt Recht anwenden? Also, was wird hier passieren? Wie wird es verstehen, die zwei Jahre unterzeichnet in Nun, lassen Sie uns zurück auf den Code, wenn wir dieses Zeichen in mit Pop Pop nennen. Jetzt ist unser Benutzer intern bei Firebase-Diensten angemeldet. Wenn wir danach versuchen, auf die Datenbank zuzugreifen, wird Firebase es aufheben und dieser Benutzer, den ich d wird der Datenbank bekannt sein und es wird dieser Auth Dot Benutzer i d sein. Und dann werden wir es gegen den Pfad überprüfen, in den wir schreiben. Klicken wir nun auf Veröffentlichen. Okay, Regeln veröffentlicht. Jetzt gehen wir zurück zur Datenbank und tatsächlich, lassen Sie uns kopieren, Visit ALS und lassen Sie uns sie auch einfügen . Datenbankregeln zu Jason. Also sind sie immer da. Richtig? Gehen Sie dann zurück zur Authentifizierung. Lassen Sie uns diesen Benutzer löschen und beginnen wir von vorne. Also werde ich auf klicken, Weiter mit Google. Ich wähle mein Konto und jetzt habe ich keinen Fehler. Jetzt bin ich eingeloggt. Also, wenn ich jetzt zurück zur Datenbank navigiere, kann ich sehen, dass ich Daten habe. Ich habe Profile und dass ich Benutzer habe ich d genau das gleiche wie wir hier haben. So funktioniert es also mit Feuerbasis. In Ordnung, also wenn wir es erweitern, können wir sehen, dass wir unseren Namen haben, gekühlt 16 ist, was mein Name auf Google-Konto ist. Und dann haben wir erstellt, bei denen Millisekunden intern von Feuerbasis gespeichert ist. In Ordnung, jetzt haben wir den Benutzer erstellt und unsere Signaturseite verwaltet. Herzlichen Glückwunsch. Ich schätze, es war nicht zu kompliziert für dich. weil es hier viele Dinge zu decken gibt. Signieren Sie den Zufluss als diese Datenbank als Sicherheitsregeln. Und alles geht auf einmal. Ich weiß, das ist schwer, aber vertrau mir, lass es nach einer Stunde gehen, oder vielleicht eines Tages, wenn du dir das alles noch einmal ansehen wirst . Es wird nicht so kompliziert sein. Alles klar, also lassen Sie uns unsere Änderungen begehen und dieses Video beenden, also werden wir ziehen, alles erreichen, und dann werden wir etwas wie die Seite bearbeiten und unterschreiben und mit Facebook Schrägstrich Go Mädchen. In Ordnung. Perfekt. Im nächsten Video werden wir unser Gespräch mit der Authentifizierung fortsetzen und unsere Benutzerverwaltung beginnen. Wir sehen uns das. 103. Profile – Context und globales Staatliches Management: Hey, in diesem Video möchte ich über Kontext, ein p i und globales Staatsmanagement sprechen . Wenn es darum geht, Benutzerprofile zu verwalten, wie wir dies erreichen können, wissen wir, dass es global die meiste Zeit innerhalb jeder Komponente zugänglich sein muss. Stellen Sie sich eine sehr weniger Komponente in der APP vor. Diese Komponente muss den Benutzernamen anzeigen, der derzeit in Frage signiert ist, wo wir diesen Benutzer genau verwalten. Nehmen wir an, in der APP-Komponente. Um den Benutzernamen zu erhalten, müssen wir ihn durch die Requisiten an jede nächste Komponente den ganzen Weg entlang des Baumes übergeben. Aber das ist nicht cool. Wir haben, wie, 10 Komponenten oben, und jede Komponente spielt eine Rolle darin, dass dies Requisitenbohrungen genannt wird. Wenn einige Wert wird weitergegeben, die Requisiten auf eine Menge von Ebenen tief, das ist nicht gut und sollte vermieden werden, um Probleme kniend zu vermeiden. Es gibt Kontext, ein P I in reagieren. Es führt das Konzept off Provider und Consumer-Provider ist eine Komponente, die alle ihre Kinder mit einem gewissen Wert oder Kontext bietet . Consumer ist eine Komponente, die den Kontext verbraucht und den Wert mithilfe von Kontext abruft. AP I. Wir können einfach unsere Benutzer in Provider-Komponente und dann Verbraucher verwalten. In jeder Komponente. Wir wollen Sondenbohren und Zwischenkomponenten vermeiden. Wir würden Benutzerkontext erstellen und Benutzernamen als Wert setzen. Dann würden wir Komponente um den Benutzer-Provider wickeln. Im Grunde erhalten alle Komponenten Zugriff auf den Benutzerkontext, um ihn innerhalb der Komponente zu konsumieren , wo wir den Kontextwert erhalten müssen, den wir verwenden Context-Hook nennen würden. Auf diese Weise sind wir in der Lage, den Benutzernamen von jedem Ort in unserer App zu erhalten. Es gibt keine Einschränkungen bei der Kontext-Verwendung. Wir sind in der Lage, es überall in der APP-Komponente um die Homepage herum mehrseitige Form und so weiter zu setzen. Alles klar, mal sehen, wie Kontext AP ich an dem Beispiel aus unserer Chat-Anwendung funktioniert. Lasst uns gehen. auf dem Ressourcenordner Lassen Sie unsauf dem Ressourcenordnereinen anderen Ordner erstellen, den wir Kontext aufrufen. Und hier werden wir all unseren erstellten Kontext setzen. Lassen Sie uns neue Datei und mobile Namen erstellen es nicht vielleicht Benutzerkontext, sondern Profilkontext. Ich denke, es ist besser geeignet in unserem Fall, Also lasst uns Profil Punkt Kontext doggy s. Also, was ist unsere Strategie? Wir werden diesen Kontext erstellen und ihn in unsere APP-Komponente einfügen, so dass jede andere Komponente in unserer Anwendung Zugriff darauf erhalten kann. Was müssen wir also tun, um einen Kontext zu schaffen? Wir müssen einfach Create-Kontext aufrufen, der aus dem React-Paket kommt. Also lasst es uns zur Verfügung stellen. Und sagen wir, es wird nur so Profilkontext sein. Jetzt müssen wir einen Provider erstellen, eine Komponente, und das wird alle seine Kinder mit diesem Profilkontext zur Verfügung stellen. Also lassen Sie uns schlecht Export CONST. Profil-Provider. Und es wird eine Komponente sein. Das wird also eine Funktion sein, die genau so ist. Alles klar, was müssen wir jetzt hier an Bord gehen? Was wird zurückkehren? Es wird Profilkontext-Anbieter zurückgeben und dann innerhalb dieses Anbieters brauchen wir Unterstützung all unserer Komponenten, was auch immer wir hineingehen. Es werden also unsere Kinder sein. Dieser Profilanbieter ist nur ein Rapper, also lasst es uns als Requisite hier drüben zerstören und es in die Provider-Komponente einfach so setzen . Alles klar, jetzt, wenn wir es haben oder wir sehen können, muss reagieren im Umfang sein. In Ordnung, lassen Sie mich reagieren. Und manche Leute werden diese Warnung jetzt loswerden, wie wir tatsächlich alles tun können. Da dies also eine Komponente ist, können wir unser Staatsmanagement direkt hier machen. Lassen Sie uns Teoh unsere private Route navigieren, und hier wissen wir, dass wir dies für jetzt setzen. Wir setzen diesen Stier in Wert. Dies fällt nur standardmäßig. Also lasst uns das behandeln und er wird unseren Kontext konsumieren. Also lasst uns das sagen. Sagen wir mal, Bullion. In diesem Kontext werden wir erstellen, Lassen Sie uns Profil sehen und das Profil als verwendeter Zustand, der ,sagen wir, Abul im Wert für jetzt sein wird sagen wir , nur um zu demonstrieren, wie Kontext funktioniert, um an Wert an diesen Kontext zu übergeben, müssen wir es als Requisite setzen, um ihre Komponente hier zur Verfügung zu stellen. Und wir müssen unser Profil einfach so weiterleiten und gehen, um das Profil zu treffen. Lasst uns es einfach nicht so zerstören. Alles klar, wir sind bereit zu gehen. Das ist es. So können wir unseren Kontext jetzt verwalten, um ihn tatsächlich innerhalb unserer App innerhalb unserer Komponente zu verwenden . Wir müssen es hier in App-Komponente nur um Schalter setzen. Also lassen Sie uns eingeben, was wir es Raw-Datei-Provider genannt haben. Und das war's. Und sie werden über Kontext nachdenken, dass es sehr anpassbar sein kann, weil dies nur eine Komponente ist . Nehmen wir an, wenn wir brauchen, um Benutzer mit spezifischen I d zu bekommen. Wir können einfach diesen Benutzer i D als Requisite übergeben, und dann können wir es von Requisiten hier greifen und dann unsere A P I Anruf oder jede andere staatliche Verwaltung im Zusammenhang mit diesem bestimmten Benutzer i Das ist wirklich, wirklich cool, Alles klar, jetzt, da wir alle unsere Komponenten mit Profil-Provider zur Verfügung gestellt haben, ohne es zu verbrauchen. Also, wie sind wir in der Lage, das zu tun? Wie Sie sich erinnern, habe ich erwähnt, verwenden Sie Kontexthook. Also innerhalb unserer privaten Route, Statt dies zu tun, können wir einfach Konstante Profil gleich verwenden Kontext, der aus dem React-Paket kommt und dann innerhalb der Datensätze innerhalb des Elternteils ist, müssen wir den Kontext angeben, den wir erstellt haben. Es wird dieser Profilkontext sein, und es ist wirklich mühsam, Profilkontext jedes Mal zu referenzieren, wenn wir es mit Verwendungskontext nennen . Um das zu vermeiden, können wir einen anderen Hook erstellen, einen Rapper für Profilkontext, um ihn zugänglicher zu machen. Also von Profilkontakten Ja, Datei, wir könnten Const exportieren. Nehmen wir an, Verwenden Sie Profil Hook , der Kontext verwendet wird, Profilkontext einfach so. Und jetzt heißt es, dass man das nicht nennen kann. Oh, entschuldigen Sie mich. Es wird eine Funktion sein, die zurückgibt, was dieser Verwendungskontext zurückgibt. Und dieser Verwendungskontext gibt uns einen Wert zurück. Aus unserem Code können wir einfach das Nutzungsprofil aufrufen und den Verwendungskontext von hier entfernen. Und gerade jetzt wird dieses Profil dieser Wert sein, den wir hier übergangen haben. Also, jetzt können wir überprüfen, ob kein Profil, dann werden wir so umleiten und lassen Sie uns genau das gleiche für das öffentliche Profil tun. Also von hier, anstatt falsch, werden wir verwenden Profil, und das ist es im Grunde. Jetzt habe ich bereits die App gestartet, Also, wenn ich ein frisches hatte, hat sich nichts geändert. Wie Sie sehen können, wenn ich versuche, auf die Homepage zuzugreifen, werde ich weitergeleitet, um sich anzumelden, damit nichts geändert wurde. Aber jetzt verwalten wir unser Profil als ein globaler Staat, auf den wir von jeder Komponente zugreifen können, nicht nur von öffentlichen Crowd. So kann jede Komponente, die sich innerhalb des Profilanbieters befindet, auf ihren Kontext zugreifen. Ordnung, mit dem Verwendungskontext, Hook und wir haben einen Wrapper um den Verwendungskontext mit Profilkontext erstellt , der Profil verwendet wird. So ist es jetzt noch benutzerfreundlicher für uns zuzugreifen. Außerdem ist es sehr wichtig zu erwähnen, dass wir diesen Profilkontext erstellt haben. Oder vielleicht stellen wir uns vor, dass wir so etwas wie Gegenkontext vorgeführt haben. Sagen wir 12345 alles in Ordnung, und in unserer App. Anstatt es so zu verwenden, verwenden wir es mehrmals. Also lassen Sie uns sagen, für die Anmeldeseite haben wir, sagen wir Counter Context Counter Provider wie dies alles in Ordnung, und das gleiche gilt für zu Hause. Also haben wir es so. Wir haben jetzt zwei verschiedene Kontakte. Ihre Definition ist die gleiche, aber sie sind anders. Also, wenn innerhalb Anmeldeseite, lassen Sie uns sagen, versuchen und Zugriff auf Kontext off counter, dann werden wir zu einem bekommen. Nun, Sie, wenn wir versuchen, auf den gleichen Kontext mit dem Verwendungskontext zuzugreifen, haken Sie innerhalb der Homepage ein, erhalten aber einen anderen Wert, weil sie auch unterschiedliche Zustände haben. In Ordnung, also ist es, als würde man Zustände trennen, aber mit einer Definition muss nur darauf hinweisen , dass es anders ist. Also, das ist im Grunde es im nächsten Video, was wir tun werden, wir werden weiterhin mit unserem Profilanbieter arbeiten und Leute haben schließlich unseren angemeldeten Firebase-Benutzer verwaltet . Wir sehen uns dort. 104. Globales Profile mit Kontext: Hey, willkommen in diesem Video. Wir werden unseren angemeldeten Firebase-Benutzer mit Kontext verwalten. AP Ich Lassen Sie uns gehen Im vorherigen Video, wenn wir den Kontext AP kennen lernten wir erstellt Profilanbieter . Also lassen Sie uns jetzt den tatsächlichen Zustand anstelle eines Bullen im Wert verwenden. Lassen Sie uns also false durch null ersetzen. Und lassen Sie uns auch aufrufen, Lassen Sie uns die Satz-Profil-Update-Funktion definieren. Ordnung, dann werden wir Yousef Act benutzen, um Benutzer von der Feuerbasis zu bekommen, wenn die Komponente montiert wird. Also lassen Sie uns Ihre Tatsache nutzen und hören, was wir tun werden. Wir werden den Staat geändert abrufen. Also von Firebase gs, werden wir unser Objekt verwenden. Und wenn wir Punkt setzen, wenn wir auf, wir sehen, dass wir auf beiden Zustand geändert verwenden können. Also hat sich das auf den US-Bundesstaat geändert. Erlauben Sie uns, den aktuell angemeldeten Benutzer innerhalb der Feuerbasis zu abonnieren. Und innerhalb dieses Abonnements sind wir in der Lage, auf off object zugreifen. Also lassen Sie es uns so sagen und für die Analyse. Konsul, loggen Sie das Objekt ab. Nun, wenn wir zurück zur App navigieren, wenn wir unseren Rat öffnen, werden wir dieses Objekt aus sehen. Und wenn wir erweitert es ist genau das gleiche Objekt, wenn wir mit der entweder Facebook oder Google angemeldet . So einfach kann es gemanagt werden. Wenn wir bei der App abgemeldet wären, würden wir dieses Objekt nicht sehen. Das wäre es jetzt. Also ist die Sache, warum wir es gerade sehen? Da Firebase Manager-Sitzungen für uns, müssen wir nicht alles implementieren. Sobald wir angemeldet sind, Autor, Objekt wird automatisch für uns ausgefüllt und für uns verwaltet. Wir müssen nicht alles tun, was wir brauchen, um sich nur anzumelden oder abzumelden, und dann wird das Benutzerobjekt hier sein. Also, wenn wir diese Informationen verwenden, was wir das tun können, anstatt nur Konsul, schauen Sie, wir werden fragen, ob beide Objekte existieren. Wenn es mit einem gewissen Wert gefüllt ist, dann werden wir etwas tun. Andernfalls, wenn dieses Earth-Objekt nicht das Objekt ist, wenn es sich noch befindet, ist der Benutzer nicht angemeldet. Also dieser On-Off Zustand geändert, wird mindestens einmal aufgerufen, wenn die Komponente mountet und wenn wir nicht angemeldet sind, dann wird es gesetzt, um zu wissen, auch wenn wir uns von der Anwendung abmelden, weil dies das Abonnement ist . Es wird von diesem Anruf abgeholt. Back and off Objekt wird so zu wissen sein. Also in diesem sonst werden wir Profil auf jetzt und hier setzen, wenn wir das Objekt haben, das wir aufrufen können, Profil setzen und einige Profildaten setzen, die wir hier definieren werden. So werden unsere Profildaten der nächste sein, der es wird der erste Benutzer I d sein , dass wir von beiden Objekt Punkt Ihr i d bekommen, was wir hier sehen können. Und es wird unseren Benutzer widerspiegeln I d inthe e off viele Bibliothek, die wir auf Feuerbasis gesehen haben. Und auch ich war Benutzer ich d in Echtzeit Datenbank. Dann wollen wir vielleicht auch E-Mail. Also werden wir Objekt-Punkt-E-Mail übergeben, und auch, wir brauchen unsere Daten aus der Echtzeit-Datenbank, also müssen wir es tatsächlich hier bekommen. Also, was wir tun werden, wie wir sehen können, wird Profil bereits erklärt. In Ordnung, vielleicht weniger. Nennen Sie es einfach Daten und die Profildaten. Okay, also hier, um aktuelle Daten aus der Datenbank für diesen Benutzer zu erhalten, müssen wir erneut Datenbank von MISC Firebase aufrufen. Dann werden wir noch einmal die Referenz setzen, wir werden Profile machen. Dann werden wir ausgießen Objekt Punkt Ihre i d Dann wechseln wir Zitate für String contar Population und dann wollen wir Luftzeitabonnement für unseren Benutzerführer gießen. Wenn sich also etwas geändert hat, dann wollen wir darüber informiert werden. Wir wollen nicht alles manuell verwalten. Also mit Echtzeit-Datenbank und mit tatsächlich jeder Datenbank und Feuerbasis, ist es sehr einfach. Also, um Daten nur zu erhalten, wenn wir dot once Methode aufrufen, um ein Echtzeitabonnement auf diese Daten zu setzen, müssen wir es als Funktion und erstes Argument aufrufen. Wir müssen das Ziel angeben, das Ereignis. Sagen wir so auf Wert. Wir wollen diesen Colback ausführen. Also, wenn sich unsere Daten an diesem Pfad innerhalb der Datenbank wie irgendetwas ändern, werden diese Colback wie jedes Mal ausgelöst und wir erhalten einen Snapshot. Also lasst uns Konsul Luck eine Momentaufnahme einfach so machen. Also jetzt sind wir zu Hause, weil wir tatsächlich einige Profildaten bekommen. Und wie Sie sich erinnern, innerhalb der privaten Route gegen das Profil, überprüfen wir innerhalb der privaten Route gegen das Profil,so dass wir die Anmeldeseite nicht sehen. Okay, das ist gut. Unser Datensnapshot hat also Schlüsselknotenreferenz und ein paar andere Dinge und Meta-Daten im Zusammenhang mit diesem Snapshot an diesem Pfad innerhalb der Datenbank. Nun, in der Momentaufnahme haben wir diese Methode. Es wird Snapshot Punkt-Wert Snap Shirt, dunklen Wert genannt . Und es wird uns die Daten aus der Datenbank geben, Informieren Sie sich JavaScript-Objekt. Lassen Sie uns also sagen, Profildaten sind gleich Snapshot, nicht Wert. Und jetzt lasst uns Salak Profildaten wie diese kommen. Schauen wir es uns an. Jetzt. Wenn ich die Seite aktualisieren, kann ich sehen, haben ein Objekt mit erstellter Anzeige und Namen, die sie sieht 16. Genau die gleichen Daten, die wir innerhalb der Datenbank haben. Was müssen wir jetzt tun? Wir können dieses Profil tatsächlich zerstören. Daten schwächen D Struktur, Namen und erstellt, dass so. Und hier können wir dieses Datenobjekt in dieses Abonnement so verschieben, und dann, was wir tun können. Wir können dies auch bei Profildaten hier drüben verschieben. Und für diese Daten können wir Namen setzen und auf genau so erstellt. Also unser Profil am Ende werden wir an Ihrer i D E-Mail erstellt haben. Richtig? Das ist es also. Und jetzt haben wir diesen Datenprofilstatus im Kontext weitergegeben. Also innerhalb unseres privaten Outs müssen wir auch irgendwie verfolgen, wenn wir gerade angemeldet sind. Also müssen wir den Ladezustand setzen, um einen Spinner oder etwas anderes zu setzen. Also lassen Sie uns einen anderen Zustand setzen, den wir nennen, ist geladen und gesetzt wird standardmäßig geladen. Es wird auf „true“ gesetzt werden. Und gleich nachdem wir gesagt haben, dass das Profil, das wir Set nennen, geladen wird und es auf falsch gesetzt wird. Oder wenn wir kein Profil haben, rufen wir Set ist geladen und setzt auch Stürze. Alles klar, jetzt ist das geladen. Wir werden mit unserem Kontext vorbeigehen. Also, anstatt nur Profil innerhalb zu übergeben, werden wir ein Objekt mit dem Ladezustand und auch Profil übergeben. Also, jetzt, innerhalb unserer privaten Route, wenn wir verwenden Profil, erhalten wir ein Objekt mit seinem Profil und Profilobjekten im Inneren. Also werden wir unser Profil von ihm strukturieren und das gleiche Handy tun vier verwenden Profil. Also jetzt, was wir hier tun können, innen privat heraus können wir tatsächlich nutzen Dies ist Senkung. Also lasst uns d Struktur wird geladen und was wir fragen werden. Also werden wir einen anderen, wenn hier drüben, und wir werden fragen, ob unsere Daten geladen werden und wir immer noch keine Profildaten haben. Dann werden wir den Container von unserem Anzug zurückgeben und drinnen legen wir die Gesetzesordnung. Es wird ein Spinner sein, auch eine Komponente aus unserem Anzug, und es wird zentriert sein. Es wird zentriert werden Vertical e Wolf Größe whoops. Off-Größe entspricht M d. Dann wird der Inhalt geladen, und die Geschwindigkeit wird langsam sein. Und lassen Sie es uns bewegen, um es zu vermeiden, dass es ihr geliehen hat. Lassen Sie es uns einfach so nach oben bewegen. Ordnung, das ist also unsere erste Bedingung, und dann müssen wir das auch ändern. Wir werden fragen, ob wir kein Profil haben, und wenn wir keinen Ladezustand haben, dann werden wir umleiten. In Ordnung, also schauen wir es uns an. Jetzt. Wenn wir die Seite aktualisieren, sehen wir den Spinner ziemlich cool, richtig? Und erst wenn wir die Daten bekommen, sehen wir die Homepage. Alles klar, machen wir genau das Gleiche für die öffentliche Menge. Also lasst uns diese Logik kopieren und sie hier rüber stellen. Lasst uns Destructor lädt und wir werden fragen, ob wir geladen haben und wir kein Profil dann werden wir wieder den Ladezustand wie diesen setzen, wenn wir Profil haben und haben, dann werden wir wieder den Ladezustand wie diesen setzen, wenn wir Profil haben und es könnte ein bisschen schwierig sein. Also, wenn wir Profil haben und lädt auf false gesetzt ist, dann werden wir umleiten. Alles klar, das ist es im Grunde. Ich möchte nur, dass Teoh einen weiteren wichtigen Schritt hier macht, weil wir mit Abonnements in reagieren arbeiten . Immer wenn wir mit Echtzeit-Listern auf die Daten arbeiten, verwenden wir ein Abonnement. Wenn wir also ein Abonnement haben, müssen wir es abbestellen, wenn wir es nicht brauchen. So änderte sich das auf der US-Bühne. Wenn Sie sehen können, gibt es Feuerbasis abgemeldet. So gibt es uns eine Funktion, die wir aufrufen müssen, um dieses Abonnement auf Off-Status geändert abzumelden . Also lassen Sie es sagen, sagen wir auf sub und wir werden dies auf sub und unsere Cleanup-Funktion von Yousef handeln abrufen . Also werden wir eine Funktion zurückgeben und hier werden wir abrufen. Also genau so und das gleiche gilt für unsere Datenbank-Referenz hier drüben. Also in dieser Vergangenheit haben wir einen Echtzeit-Zuhörer, der Wert ist, und es ist unser Colback. Wir wollen also sicherstellen, dass wir uns auch von diesem abgemeldet haben. Also hier, sagen wir, in dieser Verwendung der Tatsache, werden wir gießen, einen Benutzer referenzieren. Dann werden wir zuweisen Verwenden Sie eine Referenz auf Datenbankreferenz an diesem Pfad wie folgt und dann Benutzer rau auf Wert. Wir werden diesen Callback ausführen, wenn wir keine Daten haben. Wenn unser Benutzer nicht angemeldet ist, Wenn wir kein anderes Objekt haben, werden wir fragen, ob Benutzer-Ref definiert ist. Dann rufen wir an, benutzen raue Punkt aus, denn wenn ich Punkt hier drüben setze, kann ich anziehen, ich könnte einmal setzen und auch ich kann abschieben und das weg, wie Sie sehen können, löst einen Callback, der zuvor mit an verbunden ist, so können wir. Auf diese Weise können wir diesen Rückruf von diesem Pfad innerhalb der Datenbank abbestellen. Eigentlich, das gleiche werden wir in unserem Cleanup für den Gebrauch Effekt tun. Also dieses, wenn wir uns abgemeldet haben und dieses, wann immer wir die Komponente belegen, also hier werden wir fragen, ob Benutzer Raph, dann werden wir einen Ref Dot aus dieser Benutzerreferenz abbestellen. Alles klar, also ist es im Grunde. Ich hoffe, es war nicht zu verwirrender Grund für mich. Wann? Zum ersten Mal. Als ich es sah, war es das, aber am Ende macht es Sinn. Alles klar, lassen Sie uns unsere Änderungen übernehmen und dieses Video beenden. Wir werden alles erledigen. Dann werden wir alles mit der Nachricht begehen. Etwas wie Mann Alter Benutzer mit Profilkontext Setzen riel time subs so etwas. Alles klar, wir sehen uns im nächsten Video. 105. Anfängen zu den Sidebar und Dashboard zu erstellen: Hey, willkommen. Jetzt, da wir den vollen Signierfluss haben, lasst uns endlich anfangen, unsere Homepage zu bauen. Wir werden von der linken Seite beginnen. Also zuerst werden wir unsere Schaltflächen als Chatroom Liste erstellen und dann gehen wir nach Maine. Shatt-Fenster. Lassen Sie uns also innerhalb von Seiten statt dieses def gehen. Lassen Sie uns unsere Körnung definieren. Also wird es eine große Komponente sein, die fließend sein wird und Klasse Name wird ein Chuan 100 sein. Wir werden es in voller Höhe machen. Dann im Inneren werden wir Element steuern und dann werden wir Säulenelement aus unserer Anzug gießen . Für kleine Geräte werden alle Spalten benötigt, die 24 Spalten sind und von mittleren Geräten ausgehend. Wir werden es so etwas wie acht sagen. Nicht Gesundheit, aber acht. Und in dieser Spalte werden wir Sidebar-Komponente verwenden, aber nicht diejenige, die aus unserem Anzug kommt. Der, den wir selbst erschaffen werden. Lass es uns retten. Und unter Komponenten, lassen Sie uns eine neue Datei erstellen, die wir Sidebar doggy s nennen. Lassen Sie uns es öffnen und fragen Sie einen Ordner nach einem Rappen. Dave, ich werde den Klassennamen auf die volle Höhe setzen und dann ein bisschen nach oben klopfen. Also drinnen werden wir es in zwei Elemente aufteilen. Also werden wir den oberen Teil mit unseren Buttons haben und unten werden wir eine Chatroom Liste haben . Also lassen Sie uns zuerst def für unseren oberen Teil und unten erstellen, weil wir noch kein Geschwätz auf der Liste haben . Lassen Sie uns einfach unten Text wie folgt. Also in diesem verschiedenen wird Dashboard Jonggle gießen, die in einem Moment erstellen und speichern Sie es. Also andere Komponenten. Lassen Sie uns einen neuen Ordner erstellen , den wir den Bericht hier benennen werden. Bubble definierte zwei Dateien. Zuerst wird indizierte Togs sein, was unsere Dashboard-Komponente sein wird, aber wir werden alles verwalten, aber im Moment werden wir es leer halten. Also lassen Sie es uns nennen, Papa Bericht und einfach Hallo Einblick und zweites Element wird Dashboard Jonggle sein. Also hier werden wir unseren Knopf und den Drover selbst definieren. Also zuerst wollen wir das Wickeldiv loswerden. Dann werde ich hier einen Knopf definieren , der unser Tobler sein wird. Nehmen wir an, es wird ein Blockelement sein. Es wird blauen Kragen haben und innen wollten Aiken setzen, die wir aus unserem Anzug importieren. Aiken wird dieses Wort sein. Und dann wird Text Dashboard wie folgt sein. Nun sagen wir eigentlich mit und mal sehen, was haben wir? Also, wenn wir die Seite in der Seitenleiste aktualisieren, wir haben kein Dashboard bis los, Lassen Sie uns importiert. Und auch zu Hause Wir haben keine Sidebar. Lassen Sie uns auch importiert. In Ordnung, schauen wir es uns an. Richtig. Also haben wir Knopf. Aber wenn wir klicken, passiert nichts. Also lassen Sie uns unsere Drover-Komponente auf oder Drover definieren, Element hier neben Button. Ich werde Drover setzen, der aus unserem Anzugpaket kommt und es ist nicht so schließendes Element drinnen. Wir müssen tatsächlich Drover-Elemente gießen, aber wir werden sie in diesem Index Erwachsenen-NGS-Datei definieren. Also für diesen Kampf müssen wir nur diese Show-Eigenschaft definieren und es wird sein Es muss ein Bowline-Wert sein , der anzeigt, wann dieser Drover geöffnet wird. Dann müssen wir auf Höhe Ereignis definieren und dann müssen wir auch die Platzierung definieren. In unserem Fall wird es auf der linken Seite sein oder jetzt müssen wir tatsächlich unsere Handler oder Zustand für unseren Drover definieren . Wir müssen den Überblick über seinen Zustand behalten. Und da wir viele Motels oder Drover in unserer Anwendung haben werden, und wir werden eine Menge der gleichen Logik wieder verwenden, schlug ich vor, eine benutzerdefinierte Hoffnung zu schaffen, dass wir den Modellstatus benennen und es wird nur drei Elemente ist auf der Höhe und auf der Ausstellung geöffnet. Also unter MISC, lassen Sie uns neue Datei benutzerdefinierte Haken GS erstellen. Hier werden wir eine neue Funktion definieren, die unser Haken sein wird , den wir mit Modellstatus benennen werden. Es wird Standardwert erhalten. Nehmen wir an, Standardwert , der auf false gesetzt wird, wenn er nicht definiert ist. Im Inneren wir Zustand definieren, und standardmäßig wird dieser Zustand unser Standardwert sein, den wir als Argument übergeben und auch hier werden wir ein paar Hilfsfunktionen definieren. Sagen wir es. Erste Funktion wird offen sein, und es wird eine umwickelte Verwendung kalt zurück im Voraus um es zu optimieren, und er wird anrufen, sagte ST, und wir werden es auf wahr und das gleiche setzen wir gelten zu schließen. Aber statt wahr, werden wir hier falsch schütten und von diesem Haken werden wir unseren Staat zurückgeben. Vielleicht lassen Sie uns umbenennen es auch offen ist, und das hier Set ist offen. Also von diesem Haken, werden wir zurück ist offen, offen und schließen Helferfunktionen. Und vergessen Sie nicht, den diesjährigen Modellstatus aus benutzerdefinierten Hooks zu exportieren. Ordnung, also in Arab oder Toggle, werden wir diesen Verwendungsmodellzustand verwenden, der uns zurückgibt, ist offen. Dann gibt es uns nah und offen zurück. Also, jetzt können wir es benutzen. Also auf Höhe, werden wir mit unserer eigenen Kleiderfunktion angeben, die wir in der Hook-Show definieren. Es ist ein Bulle im Wert, so wenig angeben ist offen und auch für unsere Schaltfläche. Wenn wir darauf klicken, wollen wir den Drover zeigen. Also für diese Schaltfläche für auf Klick Ereignis, wir werden einfach öffnen angeben. In Ordnung. Und jetzt müssen wir eigentlich etwas in Rover stecken. Es wird dieses Element sein. Also lassen Sie uns Dashboard definieren und Sie werden sehen, dass es von Punkt importiert wird Es bedeutet, dass es aus unserem aktuellen Ordner importiert wird. Also, warum wir Index Gs so setzen? Wenn wir es also in einer anderen Komponente verwenden, sagen wir innerhalb von Seiten und der Art, wie wir es importieren , wird es so sein. Wir werden aus Komponenten importieren. Dieser Bericht gibt keine Dashboard-Index GS an, da er als Index bezeichnet wird. Ja, wir können nur den Ordnernamen angeben, wo dieser Index Punkt gs re Websites und es wird funktionieren. Alles klar, jetzt lassen Sie uns alles retten und schauen wir uns mal an. Wenn ich nun auf das Dashboard klicke, funktionierte es perfekt. Also schätze ich, das war's für dieses Video. Im nächsten Video werden wir fortfahren und unseren Sterblichen ein wenig reaktionsfähiger machen. Denn wenn ich einfach darauf klicke, wenn ich, weißt du, weißt du einfach die Größe des Fensters ändern will, dann siehst du, dass es statisch bleibt. Dies ist kein benutzerfreundliches Verhalten, daher werden wir es später beheben. Aber für jetzt, lassen Sie uns unsere Änderungen zu begehen, und wir werden sagen, starten oder beginnen, die Sidebar-Komponente zu bauen. In Ordnung. Perfekt. Wir sehen uns im nächsten. 106. Responsive Sidebar mithilfe der Media: Hey, willkommen hierbei. Wir werden unseren Job, äh,den wir im vorherigen Video erstellt haben , reaktionsschnell machen äh, . Was ich meine ist, dass jetzt, wenn wir versuchen, unser Element zu inspizieren und wenn wir Drover öffnen, wenn wir die Größe des Fensters ändern, es statisch bleibt. Nun, es reagiert überhaupt nicht, was wir tun können, um das für Drover zu beheben. Es ist diese Sonde verfügbar, die voll ist, was bedeutet, dass Drover wird für den Vollbildmodus verfügbar sein. Lassen Sie uns diese vollständige Eigenschaft überprüfen und mal sehen, was haben wir? Also gerade jetzt, wenn wir es öffnen, wenn wir auf Desktop-Geräten sind, können wir sehen, es ist Vollbild. jedoch Wenn wirjedochauf mobilen Geräten sind, sieht es gut aus. Also, was? Dio schwächen? Im Idealfall möchten wir diese Vollbildschirmeigenschaft nur dann aktivieren, wenn wir auf mobilen Geräten sind . Also müssen wir einige es programmgesteuert gut bestimmen, wir können tatsächlich Medienabfragen verwenden, aber sie sind nur verfügbar und CSS Aber mit Hooks können wir das gleiche Ergebnis programmgesteuert erreichen. Also lassen Sie uns die Asset-Datei den Assets-Ordner öffnen und hier eingeschränkt Medienabfrage gs verwenden. Lassen Sie uns es öffnen und kopieren Sie diesen Haken jetzt Lassen Sie uns diesen Haken auf unsere benutzerdefinierten Schweine dgs und lassen Sie uns importieren eine Tatsache von reagieren. Also, jetzt, was dieser Haken macht es Haken in Fenster viel Medien a p I, und es erlaubt uns, Medienabfragen zu manipulieren. Programmgesteuert werde ich hier nicht in Details eintauchen. Mal sehen, wie es funktioniert. Also werde ich die Datei speichern. Dann kommen wir zurück zu Dashboard Tuggle. Und hier werden wir diesen Gebrauch Media Query Hook nennen und innerhalb müssen wir einen Medien-Breakpoint übergeben . Nehmen wir an, wir werden unsere Eltern leichter öffnen und wir werden Max mit 1992 Pixeln passieren. Und jetzt kehrt dieser Haken bei Bullen zurück, der anzeigt, ob er wahr oder falsch ist. Mit diesem können wir überprüfen,ob wir derzeit auf einem Gerät mit 992 Pixeln sind. Mit diesem können wir überprüfen, Also lass uns arm ist mobil und diesen Bullen werden wir zahnige, volle Requisite passieren . Wenn wir also auf mobilen Geräten sind, werden wir die volle Eigenschaft aktiviert haben. Wenn wir auf Desktop-Geräten sind, wird dies auf Stürze gesetzt und wir werden diese volle Eigenschaft nicht haben, wenn wir sie speichern. Lassen Sie uns zurück zur App jetzt, wenn wir auf mobilen Geräten sind. Wenn unsere Bildschirmgröße weniger als 992 Pixel ist, haben wir unseren vollen Drover und es funktioniert perfekt. Und wenn wir auf Desktop-Geräten sind, haben wir diesen statischen Drover, der nicht geändert wird. Nun, das ist genau das Verhalten, das wir wollten. Also hier sind wir mit unserer Reaktionsfähigkeit fertig. Lassen Sie uns dieses Video beenden und unsere Änderungen übernehmen. Lassen Sie uns alles auf den get setzen und wir werden unser Commit als Edit verwenden Media Query Hook nennen und Drover ansprechbar gemacht. Ok, perfekt. Wir sehen uns in der nächsten. 107. Dashboard - Teil 1: Hey, willkommen in diesem einlösbaren. Weiter bauen unsere Sidebar und wir werden anfangen, genau Dashboard zu bauen. Lass uns gehen. Also zuerst, öffnen wir Index-Togs und hier statt zu besuchen, wenn wir Drover-Elemente verwenden wollen. Da wir also keinen Rapper haben, weil wir ihn innerhalb des Flughafens definiert haben, umschalten diese Drover, werden wir Reaktionsfragmentinformationen wie diese verwenden. Also unser Job, er Elemente werden drover dot nicht über dot Heather Inside Header betitelt. Wir werden Drover Dot Titel bekommen und weil aus V s Code Bark mit React Fragment Jetzt habe ich diese Datenduplizierung, aber das ist in Ordnung. Also als nächstes hatten Sie er wir Drover Dot Körper haben und dann werden wir Drover Dot Footer genau so haben. Also im Körper waren dabei, Benutzerdaten anzuzeigen. Also hier werden wir portieren. Sagen wir h drei Element und dann werden wir sagen,, Hey, Benutzer oder wir haben Profil. Wir haben Punktnamen profiliert. Dieses Profil wird also unser Profil sein, das wir von der Verwendung Profil-Hook erhalten. Das ist unser Kontext. Also rufen wir Nutzungsprofil an und ich habe keine Intelligenz. Also lasst uns Profilkontext öffnen. Und jetzt, wenn ich Intelligenz lege, wird es wichtig für mich sein. In Ordnung. Gut. Also im Körper haben wir Text innerhalb des Titels angezeigt. Wir ziehen nur Dashboard und in der Fußzeile, werden wir Abmelden Button hinzufügen. Also lassen Sie uns Schaltflächenelement hinzufügen. Es wird ein Bloke Element sein. Es wird rote Farbe haben und für unclipped werden wir auf Abmelden angeben und wir werden gegossen Abmelden als Text. In Ordnung, also vielleicht lassen Sie uns einfach einen Klick für jetzt entfernen und lassen Sie uns diese H drei Tack unten löschen . Schauen wir es uns an. Was haben wir als Ergebnis? Wir haben recht. Perfekt. Jetzt haben wir Hass. Sie sieht 16 aus, was unser Benutzername ist. Und dann haben wir abgemeldet Button, aber es hat noch keine Funktionalität, also lassen Sie es uns hinzufügen. Nun, wenn wir uns von der Anwendung abmelden, möchten wir, dass Sie auch dieses Modellfenster schließen. Aber diese enge Funktion rezitiert innerhalb Data Board Togo. Also schlug ich vor, ein Abmelden zu definieren, innerhalb des Dashboard-togo zu funktionieren und es dann an die Dashboard-Komponente weiterzugeben. Also hier werden wir Const auf Abzeichen setzen. Und weil wir diesen offenen Zustand hier drüben haben, jedes Mal, wenn wir ihn öffnen und schließen. Wir werden eine neue Kopie dieser Funktion bei der Abmeldefunktion haben. Also wollen wir diese Kopie behalten. Wir wollen, dass Sie es auswendig lernen. Also werden wir verwenden Rückruf im Voraus und innen würden die nächste Logik setzen. Wir müssen Abmelden aufrufen, was auf dem Eid verfügbar ist. Objekt? Oh, nicht abmelden. Melden Sie sich einfach ab. Und das war's. Das wird sich komplett abmelden. Unser derzeitiger Benutzer. Alles wird von der Feuerbasis verwaltet. Dann müssen wir Alarmbereitschaft setzen, was ein in für Alarmbereitschaft sein wird. Wir werden sagen, abgemeldet. Es dauert vier Sekunden und dann schließen wir auch den Drover. Da es also von unserem benutzerdefinierten Hook stammt, mussten wir es als Abhängigkeit übergeben. Aber das ist in Ordnung. Kleidungsfunktion wird im Gebrauch Modellzustand gespeichert, weil wir es innen setzen. Verwenden Sie CLO zurück, wie Sie sich erinnern. Nein, lasst uns weitergehen. Melden Sie sich beim Dashboard und im Dashboard ab. Lasst es uns verzehren. Melden Sie sich ab. Ist es kapitalisiert? Ja, das ist es. Also vier weiter. Melden Sie sich ab. Klicken Sie auf. Wir werden die Abmeldefunktion anlegen. In Ordnung? Es scheint in Ordnung zu sein. Jetzt schauen wir es uns an. Wenn wir unsere Tafel öffnen, wenn wir jetzt auf Abmelden klicken, sind wir abgemeldet. Und die potenzielle Frage könnte sein, warum wir zur Anmeldeseite weitergeleitet werden. Das liegt daran, dass wir in unserem Kontext das „Aus-Zustand“ geändert haben. Wenn wir uns also abmelden, weil es sich um ein Echtzeit-Abonnement handelt, wird Firebase es abholen. Es wird den Benutzer abmelden, und diese Colback wird ausgelöst. Also, wenn wir kein Objekt haben, rufen wir set profile, um zu wissen. Und wenn wir Profil jetzt oder undefiniert gesetzt haben, wenn wir innerhalb der privaten Route schauen, leiten wir Benutzer um sich anzumelden. Das ist also genau das, was passiert. So haben wir jetzt das komplette Signier- und Abmeldesystem, das nahtlos funktioniert. Alles klar, um zu überprüfen, dass alles funktioniert. Gut. Melden wir uns noch einmal an und ich werde wieder genau das gleiche Konto auswählen. Jetzt bin ich umgeleitet. Ich bin eingeloggt und wieder, ich habe Hass. Sie sieht 16 aus. So perfekt. Es funktioniert so, wie es funktionieren muss. Lassen Sie uns nun unsere Änderungen übernehmen und dieses Video beenden. Wir werden portieren, alles erreichen, dann begehen wir. Gestartet ein Dashboard zu bauen und es Abmelde-Button und Anzeige Benutzername. Alles klar, wir sehen uns in der nächsten. 108. Dashboard – Wiederverwendbare und bearbeitbare Komponenten (Teil 2): Hey, willkommen in diesem Führer waren weiterhin zu bauen, dass Schweinefleisch und verbal eine Komponente erstellen, die wir mehrmals in unserer Anwendung an ein paar Stellen wiederverwenden werden. So wird es eine Eingabe mit den beiden Tasten sein, die während ich zu bearbeitet wurde. Wenn wir es speichern, aktualisieren wir tatsächlich Daten innerhalb der Datenbank. Lass uns gehen. Also zuerst schlage ich vor, die eigentliche Komponente zu erstellen. Also unter Komponenten, lassen Sie uns neue Datei erstellen glaubwürdig in Port für jetzt. Lass es leer sein. Lass uns einfach Hallo hier drüben setzen. Lassen Sie uns zunächst definieren, wie wir es verwenden werden. Öffnen wir die Wortdatei hier unter Hey, Profilname. Lassen Sie uns Teiler von unserem Anzug setzen. Und dann lassen Sie uns Edita ble Import definieren. Also was? Requisiten sollten Einsicht wieder passieren. Also zuerst wir den Anfangswert übergeben, die Eingabe traurig sein wird. Also lassen Sie uns Anfangswert setzen , der Profil dunkler Name sein wird. In Ordnung, dann müssen wir auch auf sichere Funktion definieren und das wird ausgelöst, wenn wir die Eingabe speichern . Also lassen Sie uns sicher anziehen und definieren es hier drüben. Also werden wir auf sichere und diese Callback-Funktion setzen, sie wird den gleichen Wert wie ein Argument erhalten. Lassen Sie uns also neue Daten und lassen Sie uns diese Funktion leer. Außerdem wollten wir vielleicht ein Etikett vor der Eingabe melden, also haben wir die Möglichkeit, eine reaktive Komponente als Requisite an die essbare großzügige Komponente zu übergeben . Also lassen Sie uns so etwas wie Alter von sechs definieren. Vielleicht, lassen Sie uns sagen, es wird Nick Name und Klassenname wird Rand unten sein weil wir etwas Raum zwischen unserem Label und zwischen der tatsächlichen Eingabe hinzufügen wollen. Und auch können wir andere Requisiten übergeben, die Judy Input-Element umgeleitet werden. Also vielleicht können wir auch so etwas wie Name übergeben, was in unserem Fall Spitzname sein wird in unserem Fall . Was wird also mit unserem Spitznamen eingegeben werden, dass wir es hinzufügen können? Alles klar, Cool. Öffnen wir also unsere Komponente und beginnen wir mit dem Bau. Also zuerst haben wir Anfangswert. Ich habe eine der wichtigsten Requisiten gearbeitet. Dann werden wir Destruktor auf sichere ehrwürdige haben auch Etikett, das wird in diesem Alter sechs sein, und es gibt eine Chance, und dass dieses Label nicht übergeben werden. Also lassen Sie uns jetzt VT falten und dann auch einige andere Dinge, wie Platzhalter. Vielleicht so. Lassen Sie uns armen Platzhalter. Und standardmäßig, es wird gesagt, Wählen Sie etwas wie richtig, Ihr Wert. In Ordnung. Und dann schlage ich vor, eine Requisite zu gießen, die unsere leere Nachricht darstellt, wenn jemand versucht unsere Eingabe zu speichern und sie leer ist, so dass wir wie einen globalen Wert setzen können, der sagt, dass die Eingabe leer ist. Aber was, wenn wir es anpassen wollen? Also lassen Sie uns es auch als Requisite leere Nachricht übergeben. Und standardmäßig, wenn es nicht in Requisiten angegeben ist, werden wir sagen, dass es vor Gericht sein wird, sein leeres alles in Ordnung, und jede andere Requisite wird unsere Eingabe Requisiten sein. Alles klar, also für das Leben, was wir tun werden, also hier, direkt vor dem eigentlichen Importelement, werden wir das Label portieren. In Ordnung, dann werden wir Input geben, die von unserem Anzug kommt. Also für diese Eingabe, bei der allerersten Requisite, werden wir unsere Eingangskulturen übergeben, und wir werden ein paar von ihnen überschreiben. Also werden wir Platzhalter überschreiben, der dieser Platzhalter von Requisiten sein wird. Dann werden wir auch andere Dinge haben, die wir innerhalb dieser Komponente verwalten werden, wie seinen internen Zustand. Also, wenn wir es bearbeiten, werden wir alles von hier aus verwalten. Also lasst es uns im Voraus hier setzen. Also werden wir einen neuen Zustand definieren , der,sagen wir, sagen wir, nur Eingabe und dann in Port als Standard-Anfangswert gesetzt wird. Es wird unser Anfangswert sein, dass wir hier hinübergehen. Also lassen Sie uns Anfangswert setzen. Alles klar, dann haben wir einen eigenen Change Handler, den wir angeben müssen. Also lassen Sie uns auf Eingangsänderung gießen. Normalerweise erhält es, wie Sie sich erinnern, wie Sie sich erinnern,ein Ereignisobjekt. Aber auf unserem Anzug, es ist etwas anders als das erste Argument für auf Veränderung Ereignis. Also, wenn ich hier unverändert setze, wenn ich darauf schwebe, können Sie sehen, dass das erste Argument Wert ist. So ist es nur für uns gemacht, benutzerfreundlicher zu sein, so dass wir stattdessen Wert haben, sogar den Zielpunktwert referenzieren. Also hier werden wir auch zurückrufen setzen, weil wir keine Abhängigkeit haben und wir es im Voraus von hier aus optimieren wollen . Bubble-Aufruf setzt nur die Eingabe auf ihren Wert wie diesen. Und für diese Änderungen werden wir auf Importwechsel gießen, Ordnung. Und vergessen Sie auch nicht, den tatsächlichen Wert mit unserer Eingabe zu verknüpfen, und wir sind hier fast fertig. Jetzt wollen wir auch unsere Eingabe bearbeiten pflanzliche. Es wird also nur ein Anlagewert sein, der anzeigt, also werden wir seinen glaubwürdigen Zustand erstellen , der wünschenswert ist und standardmäßig auf false gesetzt wird. Ordnung, also wird diese Eingabe deaktiviert, wenn wir glaubwürdig sind, auf false gesetzt. Also, wann ist essbar so das wahre? Wir werden in der Lage sein, unsere Anfrage zu verwalten. Also lassen Sie uns tatsächliche Schaltfläche erstellen, die anzeigt, dass so lassen Sie uns schlechte Eingabegruppe wird nicht nur Schaltfläche setzen, weil wir die beiden Schaltflächen in unserem Import entweder schließen oder bearbeiten haben . Also werden wir Eingabegruppe setzen, damit es begrapscht aussieht, weißt du? Also Eingabegruppe in Taste und innerhalb dieses Knopfes, wir werden setzen, ich kann und das komme ich wird der nächste sein. Also, wenn unsere Eingabe wird essbar sein, ehrwürdige Anzeige schließen Taste. Ansonsten, wenn wir die tatsächliche Eingabe sehen und wir nicht beabsichtigen, sie zu bearbeiten, erhalten wir hinzugefügt Also dies ist nur ein Symbol mit, wie, wie Bleistifte, so dass wir sehen können, dass wir es hinzufügen können. Alles klar, also für diese auf Klick-Button, werden wir auf Bearbeiten klicken gießen und diesen unbearbeiteten Klick werden wir hier definieren. Also beim Bearbeiten Click wird es auch zitieren, verwenden Sie Rückruf im Voraus, weil wir keine Abhängigkeiten haben oder tatsächlich mit Ihnen. Aber es spielt keine Rolle, Corneau. Also werden wir setzen Set ist glaubwürdig, um den Wert von unserem aktuellen Zustand umzukehren. So werden wir diese Funktion aufrufen, die den Bowling-Wert umkehrt. Und dann wollen wir auch sicherstellen, dass wir, wenn wir auf Abbrechen klicken, den Ausgangszustand zurückkehren. Also wollen wir auch set-input aufrufen und nur für den Fall, setzen Sie es zurück auf den Anfangswert. So erscheint es jetzt als Abhängigkeit. Also lasst es uns hier setzen. Und sagen wir eigentlich mit und sehen, was hier vor sich geht. Alles klar, Cool. Also, jetzt haben wir es so, und es sieht fast cool aus, aber es scheint, als wäre ich ein etwas. Oh, ja, eigentlich, weil wir Eingabegruppe verwenden, müssen wir es um die Eingabegruppe wickeln. Das ist mein Schlimmes. So wichtige Gruppe. Und ich werde das so am Ende setzen. Sehen wir uns mal an. Alles klar, jetzt sieht es gut aus. Ich kann es jetzt nicht hinzufügen Eingabe, weil ist essbar so zu fallen. Wenn ich jetzt auf diesen Button klicke, kann ich ihn hinzufügen. Dieser Knopf. Und wie Sie sehen können, wenn ich auf diese Schaltfläche klicke, wird die Funktion zum Bearbeiten von Klicks ausgelöst. Wenn wir also diesen eingestellten Eingabeanfangswert nicht haben, wenn ich auf diese Schaltfläche klicke, wird er nicht wieder auf den Standardwert gesetzt. Wir wollen also sicherstellen, dass es immer anfänglich ist, wenn wir es abbrechen. In Ordnung. Was müssen wir sonst noch tun? Wir müssen eine andere Flasche definieren, die angezeigt wird, wenn wir tatsächlich auf Bearbeiten klicken. So sind wir in der Lage, hier zu genießen. Was? Wir werden eingießen. Wir werden eingießen. Wenn unser Import glaubwürdig ist, dann werden wir eine andere Eingabegruppe unten rendern. Lass es uns einfach kopieren und hier rüber bringen. Also für auf Klick, werden wir auf sicheren Klick setzen. Es wird nicht dasselbe auf Save das sein. Wir gehen als Requisite. Wir werden einen anderen auf sicheren Klick hier definieren. Für jetzt. Lass es so sein. Also, für diesen Knopf, was wir zu seiner passiven feuerbaren Veränderung gehen. Ich kann, ich kann, wird ein statischer Aiken sein. Und das kann ich, wenn ich mich erinnere, ist es Scheck. Werfen wir einen Blick. Alles klar, los. Ja, das ist es. Überprüfen Sie. Es scheint, als hätten wir das Markup. Lassen Sie uns tatsächlich die Funktionalität für auf sicheren Klick definieren. Also, was werden wir hier tun? Zuerst werden wir eine sehr primitive Validierung durchführen. Zuerst erhalten wir den getrimmten Wert, um unnötige Leerzeichen um unseren Text zu vermeiden. Also lassen Sie uns getrimmten Wert setzen und es wird Eingang Punkttrimmen sein. Okay, dann werden wir überprüfen, ob unser getrimmter Wert nur ein leeres Feld sein wird. Dann werden wir alarmieren wurde befriedet. Leere Nachricht als Requisite. Wir können diese leere Nachricht hier drüben setzen und uns eine Auszeit von vier Sekunden machen. In Ordnung. Dann am Ende werden wir setzen Set ist glaubwürdig fällt, denn wenn wir auf sicher klicken, wollen wir es nicht glaubwürdig machen, wie es vorher war. Und jetzt hier werden wir noch gegen einen nachsehen. Denken Sie, es wird sein, wenn getrimmt wird nicht unser Anfangswert sein. Also werden wir überprüfen, ob wir etwas wirklich bearbeiten und unser Wert anders ist Onley, dann rufen wir unseren eigenen sicheren Rückruf zurück, den wir hier im Dashboard angeben. So wird es in einer Spüle-Funktion sein. Also lassen Sie es uns beruhigen, denn es wird konfrontiert sein, es wird ein Versprechen sein, also müssen wir es abwarten. Also lassen Sie uns eine Spüle gießen und uns ein Gewicht auf den Safe gießen, den wir hier passieren. Und wie Sie sich erinnern, erhält dieser Rückruf neue Daten als Argument. Also hier müssen wir unsere tatsächliche Eingabe übergeben. Also lassen Sie uns schlecht nicht eingeben oder vielleicht auf Wert getrimmt, weil wir es nicht mit den nur unnötigen Leerzeichen um ihn herum setzen wollen. Alles klar, jetzt schauen wir es uns an. Und hier, lass uns ausverkauft kommen. Sehen Sie, neue Daten, um zu sehen, ob es tatsächlich funktioniert hat. Jetzt scheint es ziemlich fertig zu sein. Vielleicht werden wir es in Zukunft ein wenig an unsere Anforderungen anpassen. Aber jetzt sieht es gut aus. Öffnen wir unser Dashboard. Lasst uns aufmachen, Konsul, und schauen wir uns mal an. Also jetzt, wenn ich es editiere, wenn ich absage, ist alles gut. Wenn ich also wieder auf Safe klicke, ändert sich nichts. Und wir haben diesen Anruf nicht auf Safe gefeuert. Also, wenn ich es ändere und wenn ich es jetzt speichere, habe ich den neuen Wert, der konsul von diesem auf sicheren Handler gesperrt wird. Also hat es tatsächlich funktioniert. Und ich schätze, wir sind hier im nächsten Video fertig. Wir werden tatsächlich einige Funktionen auf diese Komponente anwenden, oder vielleicht um diese Komponente. Also aktualisieren wir unseren Riel-Spitznamen. Aber jetzt lassen Sie uns dieses Video beenden und unsere Änderungen übernehmen. Also werde ich erstellt wiederverwendbare, glaubwürdige Eingabe setzen . Alles klar, Perfect. Wir sehen uns im nächsten. 109. Dashboard - Nickname aktualisieren: Hey, willkommen in diesem Video. Wir werden weiter bauen unser Dashboard essbare aktualisieren unseren echten Spitznamen in riel Time Datenbank. Lasst uns gehen. Im letzten Video haben wir glaubwürdige Input erstellt. Und wir definieren dies auf sichere Funktion, die wir weitergegeben haben, um Kräutereingabe zu bearbeiten. Diese Callback-Funktion wird also unsere endgültige Eingabe erhalten, wenn wir auf Speichern klicken Also lassen Sie uns jetzt diese Daten verwenden und unsere Datenbank aktualisieren. . Also, wie zuvor, werden wir unsere Datenbank, Objekt verwenden, um auf Datenbank zuzugreifen. Dann müssen wir Befriedung Referenz auf die Datenbank wählen. Also werden wir Profile Schrägstrich setzen. Wir werden hier drin eine Schnur ihrer Polizei benutzen. Wir werden Profil setzen. Nicht Benutzer, ich d. Jetzt müssen wir nur Spitzname aktualisieren. Das wollen wir nicht erschaffen haben. Also müssen wir genauer sein, wenn es darum geht, etwas innerhalb der Echtzeitdatenbank zu referenzieren . Also müssen wir hier drüben auf diesen Namen verweisen. Was wir tun können, können wir es tatsächlich auf zwei Arten referenzieren. Wir können Ihren Schrägstrich hier drüben setzen und den Namen setzen, oder ich bevorzuge einen anderen Weg, nur um ihn benutzerfreundlicher zu machen . Ich würde das Kind hier und hier rüber bringen. Ich muss auch den Pfad angeben, aber dieser Pfad wird relativ zu dem Pfad sein, den wir in der ersten Referenz angegeben haben. Also lasst uns diesen Namen schieben. Also werden wir ein Kind von diesem Pfad innerhalb der Datenbank angeben, Ordnung. Oder tatsächlich, lassen Sie es in einem wertvollen setzen wir es, sagen wir, Benutzer Nick Name, ref. Dann werden wir einen Try Catch-Block definieren, weil wir mit asynchronen Daten und Versprechungen arbeiten werden. Also hier werden wir gießen, warten, und dann rufen wir einfach den Benutzernamen Spitzname ralf dot sat, Daten in die Datenbank schreiben wird. Und hier werden wir neue Daten setzen, die wir als Argument erhalten. Danach werden wir nicht, wenn ich Benutzer mit Erfolgsnachricht und wir sagen Spitzname Bean aktualisiert hat und wieder für Sekunden und für jede andere werden wir auf ihre Nachricht setzen, wo wir unsere Nachricht als Text und auch vier Sekunden setzen. Alles klar, scheint nett zu sein. Schauen wir es uns an. Lassen Sie uns zurück zur App navigieren, wenn ich auf Bearbeiten klicke, lassen Sie mich meinen Spitznamen ändern, um Be einzugeben als ich auf sicher klicke und Spitzname wurde aktualisiert Und wenn wir zurück zur späteren Basis gehen. Sie können sehen, dass die tatsächlichen Daten geändert werden. Versuchen wir es noch einmal. Lassen Sie uns sagen, dass ich weiß, und ich klicke sicher. Nickname wurde aktualisiert. Die Datenbank wird aktualisiert. Alles schien schön weg. Wenn Sie noch eine Frage haben. Warum genau das? Hey, Andy wird aktualisiert, wenn wir die tatsächlichen Daten in der Datenbank aktualisieren. Okay, noch einmal für eine Erklärung. In unserem Provider-Kontext haben wir Abonnements, Echtzeit-Listener für unsere Daten verwendet . Also für eine Referenz verwenden, die unser Datenbankpfad unter Profilen ist, Benutzer I d. Wir setzen Echtzeit-Listener diese Rückruf zurück. Also dieses kalte Back feuerte jedes Mal, wenn sich etwas unter diesem Pfad innerhalb der Datenbank ändert. Wenn wir also sagen, dass Namensänderungen unter Benutzer I d als dieser Rückruf ausgelöst wird und wir werden Profilstatus mit diesem Datenobjekt aktualisieren, das zu dem Zeitpunkt neu sein wird, wenn diese Colback ausgelöst wird. Das gleiche gilt für erstellt bei oder für jede andere gefüllt. Wenn wir also so etwas wie das Alter hier hatten, und wenn sich das Alter verändert hat, dann werden diese Colback gefeuert und so eins in Ordnung, ich schätze, das ist in Ordnung. Und du verstehst es. Jetzt lassen Sie uns unsere Änderungen übernehmen und das Video beenden. Also lasst uns gut bei allem kommen. Dann lassen Sie uns Pete Commit setzen, Nehmen wir an, aktualisierter Spitzname in der Datenbank. In Ordnung. Sieht gut aus. Wir sehen uns in der nächsten. 110. Dashboard - Link von Providern (Teil 4): Hey, in diesem Video wir weiter bauen die Flughafenkomponente und wir werden Benutzerkonto mit mehreren Signaturanbietern oder mehreren Sinan-Methoden verknüpfen . , Zum Beispiel, wenn ich mich verbinde oder wenn ich mit Facebook gucke und dann, wenn ich hinausschaue und mit Google eingucke, lande ich auf demselben Konto. Ich werde nicht zwei verschiedene Konten haben. In Ordnung, also lasst uns das machen. Zuerst navigieren wir zurück zu unserem Code. Und hier unter Dashboard, lassen Sie uns Ihre Datei erstellen, die wir Provider Block für jetzt nennen. Lassen Sie es eine leere Komponente sein und lassen Sie uns zu unserem Dashboard innerhalb Index GS direkt nach Hey Profile Name Provider Block bearbeiten . Perfekt. Nun, um fortzufahren, müssen wir wissen, wie wir tatsächlich auf unsere aktuellen Benutzerdaten zugreifen können, wo Benutzer Objektdaten spezifischer zu sein. Anstatt unseren Verwendungsprofil-Hook zu verwenden, um die Daten zu erhalten, können wir tatsächlich off-Objekt verwenden, und dann können wir auf den aktuellen Benutzer zugreifen. Also lasst uns es schnecken und sehen, was ihr bekommt? Also, wenn ich jetzt zu diesem Board gehe, wenn ich jetzt in Consul schaue, habe ich das Benutzerobjekt aus, das derzeit im Benutzer angemeldet ist, also wird es von der Feuerbasis verwaltet. Hier beschränken wir verschiedene Zugriffstoken, Aktualisierungstoken, Anzeigenamen, E-Mail und andere Daten. Aber wir sind gerade an Anbieterdaten interessiert, die wir hier haben. Also ist es im Grunde ein Array von Providern oder Array von Simon-Methoden, die wir gerade verwenden . Also, wie Sie sehen können, gerade jetzt haben wir gerade jetztnur ein Element, das Google dot com ist. Daher werden wir diese Informationen verwenden, um anzuzeigen, dass wir derzeit nicht mit diesem spezifischen Anbieter verbunden sind. Und die Sache ist, dass, wenn Sie sich erinnern, wir Echtzeit-Zuhörer für unsere Profildaten setzen. Also, wenn wir etwas aktualisieren, wird es an allen Orten mit den Anbietern aktualisiert. Es funktioniert nicht in Echtzeit, daher müssen wir es mit dem Reaktionszustand verwalten. Also in Ordnung, gehen wir zurück zum Provider-Block. Und hier werden wir einen neuen Zustand definieren , den wir nennen, ist verbunden, und es wird nicht ein Bowling-Wert sein. Es wird ein Objekt sein, das anzeigt, ob wir mit Facebook oder Google verbunden sind . Also werden wir ein Objekt mit zwei Tasten haben, google dot com und facebook dot com, das ist Provider i d kann gefunden werden, dass in diesem Array, so wie Sie für Google sehen können, ist es Google dot com. In Ordnung, also für Google Dot Com, wir überprüfen, ob wir verbunden sind. Also greifen wir auf uns aktuelle Benutzerpunkt-Anbieterdaten zu. Also ist es ein Array, und auf dem Regen können wir einige anwenden, um zu überprüfen, ob ein Element tatsächlich die Bedingung rechtfertigt. Also werden wir hier unsere Daten haben, und wir werden überprüfen, ob einige von unserem wo Array-Elemente Provider I D oder Google Dot com haben. Wenn Datenanbieter I d gleich Google dot com und das gleiche werden wir für Facebook tun. Also lasst es uns kopieren. Und ersetzen wir Google dot com mit facebook dot com. Alles klar, gut. Auf diese Weise haben wir jetzt verfügbar ist verbunden. Das zeigt an, was wir mit Google oder Facebook verbunden sind. Nun wollen wir unseren Marker definieren. Also in diesem Def, werden wir unsere Tasten oder Angriffe gießen, die darauf hinweisen. Und hier werden wir eine Last von bedingtem Rendering haben. Aber jetzt hören Sie zu. Trotz, ästhetisches Markup. Also zuerst wird Element angepackt werden. So wird das Stapelelement in der Nähe sein, Kräuter, und es wird Farbe grün haben, weil es vier Google innen sein wird, werden wir Aiken haben. Und das kann ich haben, kann ich von Google und es wird sagen, verbunden. In Ordnung. Und jetzt haben wir auch heute Morgen. Lassen Sie es uns gleich hier oben stellen. Wir werden uns für Facebook bewerben. Also lasst es uns kopieren. Und lassen Sie uns Farbe durch das Blau ersetzen und ich kann mit Facebook. In Ordnung. Scheint gut. Jetzt schauen wir es uns an. Wenn wir jetzt zum Dashboard gehen, sind wir verbunden. Dies wird also angezeigt, wenn wir tatsächlich mit unseren Anbietern verbunden sind. In Ordnung, dann werden wir andere Dinge definieren, die unsere Knöpfe sind, um sich mit diesen oder dem Provider zu verbinden . Also lasst uns ein bisschen ablegen, in diesen Block verschmelzen, und dann werden wir unsere Böden definieren. So wird der erste Button für Google sein. Es wird also ein Blockelement sein. Es wird Farbe grün und innen wieder haben. Wir werden sehen, und ich komme und ich kann sein, Sagen wir, auch Google und wir werden X mit Google verknüpft nennen. Das gleiche wird für Facebook sein. Lassen Sie es uns kopieren. Und ersetzen wir Farbe mit dem blauen Lynn zu Facebook. Und ich kann, wird Facebook sein. In Ordnung, schauen wir es uns an. In Ordnung. Sieht gut aus. Also werden wir diese unten Tasten haben, um tatsächlich mit dem Anbieter zu verbinden. Und diese zwei an der sagen Leute haben, wenn wir verbunden sind. In Ordnung. Lassen Sie uns zuerst unser bedingtes Rendering für den Fall gießen, wenn wir bereits verbunden sind. Also für diese Tags, werden wir setzen, wenn verbunden ist, dann, weil es ein Objekt ist, können wir auf seine Eigenschaften zugreifen. Also, wenn ich mit Google Dot com auf Lee verbunden bin, dann werde ich dieses Tag-Element rendern und das gleiche tatsächlich, werden wir für Facebook tun. Also, jetzt werden wir eine auf Lee angezeigt, wenn wir verbunden sind. In Ordnung. Sieht gut aus. Und für diese Schaltflächen werden wir die nächste angewendet. Also, wenn wir nicht mit Google verbunden sind, die kommen, dann werden wir diese Schaltfläche anzeigen und das gleiche wird vier Facebook tun. Also, wenn wir nicht mit Ihrem Facebook verbunden sind, dann werden wir diese Art von Schaltfläche anzeigen. In Ordnung, schauen wir es uns an. Wenn ich mein Dashboard öffne, bin ich mit Google verbunden und bin nicht mit Facebook verbunden. Alles klar, jetzt ist es eigentlich, einige Funktionen zu tun, um alles mit einem Zustand anzuwenden. In Ordnung, also zuerst müssen wir definieren, waren Handler. So werden wir insgesamt für Handler haben, um Handler zu UNL Inc von Google und Facebook, und zwei Handler auf einen Link zu Facebook und Google. Also lassen Sie uns definieren sie zuerst wird auf einem Link auf Facebook Link wie folgt sein. Dann haben wir Google entlinkt. Dann haben wir Facebook und LinkedIn Google verlinkt und Google so verlinkt. Alles klar, Erstens, lasst uns vielleicht unverknüpfte Funktionalität machen, also wird es irgendwie gleich sein, und es ist sehr einfach zu tun. Also werden wir eine andere erstellen, wie, eine gemeinsame Funktion, die wir innerhalb auf Link Facebook aufrufen und Google erlauben, dass wir anrufen werden, wissen Sie, nur auf Link, und dann wir werden hier Provider I d Provider erhalten. Das gefällt mir. Ordnung, also nennen wir das unlink von unverknüpftem Facebook so, und dann setzen wir Facebook Dot com und dasselbe, was wir für Gogol tun werden. Wir werden auf Link Google Dot com so setzen. Alles klar, Sie haben die Verknüpfung des tatsächlichen Anbieters aufgehoben. Wir werden das nächste tun, was wir zuerst versuchen, fangen Block, und wir werden zuerst fragen, ob nur eine Anmeldemethode für den Benutzer übrig bleibt. So ist es möglich, dass wir von Google losgelinkt, und dann haben wir keine Anmeldeanbieter überhaupt auf diese Weise, Konto wird aufgegeben und es wird keine Anmeldemethode haben, so bedeutet es, dass es irgendwie sein wird. Deshalb wollen wir das vermeiden. Und wir werden überprüfen, ob off dot aktuellen Benutzer dot Provider Daten Punktlänge gleich eins ist . Und wir wollten und verknüpfen. So haben wir nur eine Anmeldemethode und wir klicken auf unlink. Wir werden eine Warnung erhalten. Wir werden einen neuen Editor werfen, und wir werden sagen, dass Sie nicht trennen können für, ähm Provider I d , dass wir als Argument hier erhalten. Und jetzt werden wir diese Angelegenheit fangen, die wir hier rüber werfen, und wir werden es aufmerksam machen und Kunstredakteur, wir werden eine bessere Botschaft für vier Sekunden sagen. Alles klar, wenn hier alles cool ist und wenn wir Anbietern sagen, die verbunden sind und wir von einem von ihnen trennen wollen , ist es sicher. Also werden wir dot aktuellen Benutzer dot unlink diese Methode abrufen, wenn ich sie aufrufe, können Sie auf Links einen Anbieter vom Benutzerkonto sehen und ich muss Provider I D übergeben , der Provider I d von unseren Argumenten sein wird. Es ist also ein Versprechen, was wir tun werden, wir werden erwartet. Und weil es ein Think wartet Index, müssen wir einen Sing vor die Funktion setzen. Also, nachdem wir erwartet haben, müssen wir unser Set aktualisieren verbunden ist. Wir müssen unseren lokalen Staat aktualisieren. Also, was können wir tun? Wir können tatsächlich eine andere Funktion erstellen, nur um unseren Zustand zu aktualisieren, so dass wir es so etwas nennen können , wie dieses Update verbunden ist, und innerhalb können wir Provider I d übergeben und dann nur bewerten, ob es wahr ist oder fällt. Also hier, melden Sie Provider i d. Und wenn wir die Verbindung aufheben, wollen wir es auf Kraft setzen. Also lassen Sie uns dieses Update erstellen ist verbunden, wir werden Provider I d erhalten . Und dann werden wir tatsächlich erhalten, den Wert, so etwas. Also innerhalb dieser Funktion werden wir nennen Set ist hier verbunden, wir werden vorherigen Wert innerhalb des Rückrufs erhalten. Und hier müssen wir zurückkehren und Sie Wert, weil es ein Objekt ist. Wir wollen sicherstellen, dass wir die Struktur erhalten. Also werden wir zurückkehren. Okay, lassen Sie es vielleicht explizit von dieser Callback-Woche im Gegenzug ausdrücken und Alba Jet hier, wir werden den vorherigen Zustand so zusammenführen und dann den tatsächlichen Provider aktualisieren i d Wir müssen diese Art von Klammern öffnen. Dann müssen wir Anbieter I d als Schlüssel zitieren und dann enthüllt den Wert zu beruhigen. Alles klar, auf diese Weise wird es das Objekt mit dem angegebenen von i d und Wert aktualisieren. In Ordnung. Gut. Sieht gut aus. Lassen Sie uns vielleicht auch, und eine andere Warnung hier drüben mit Warnung, vielleicht nur Info, und wir werden sagen, getrennt vom Anbieter getrennt von mir d wie dies, es sei denn, setzen Sie vier Sekunden hier über . In Ordnung. Nun, lassen Sie uns diese Handler tatsächlich mit unseren Schaltflächen verknüpfen, also müssen wir Facebook aufheben. Wir müssen es hier zum Sackelement bringen. Also hier können wir das auf nahem Ereignis haben. Also für dieses unclos Ereignis, Kautable geben Sie auf Link Google, tatsächlich, und das gleiche für Facebook. Also hier werden wir uns anziehen und wir werden dieses Mal auf Link Facebook setzen. In Ordnung. Jetzt verfügt es über ausreichende Funktionalität, um es zu testen. Also lasst uns das Dashboard öffnen. Lassen Sie uns auf dieses schließende Element klicken. Also, wenn wir darauf klicken, können Sie nicht von Google dot com trennen, weil wir nur Google-Signing-Methode nur eine davon haben . Also, wenn wir davon trennen, werden wir unser Konto machen, dass alles in Ordnung, jetzt ist es tatsächlich und unsere Link-Funktionalität . Also wieder, es wird fast das gleiche sein. Also werden wir eine gemeinsame Funktion als UNL Inc erstellen. Also lassen Sie es uns sagen, vielleicht hier drüben und wir werden es nennen. Lasst uns verknüpfen. Alles klar, also wird es keinen Provider i d erhalten, aber das Provider-Objekt dasselbe, wie wir es im Inneren verwendet haben. Anmeldeseite. Lassen Sie uns diesen neuen Firebase Auth Firebase Provider sehen. In Ordnung, also habe ich es kopiert. Also lassen Sie mich es kommentieren. Und hier werden wir diesen Link anrufen und dann unterschrieben. Wir müssen Provider-Objekt übergeben, das wir als Argument erhalten. Also für Facebook, werden wir neue Firebase von Facebook aus dem Provider anrufen. Lassen Sie uns zuerst Feuerbasis von Feuerbasis importieren. In Ordnung, schau, der Trainer und das Gleiche wird für Link Google tun. Also lasst es uns kopieren. Und hier rufen wir Google Auth Anbieter an. Alles klar, sieht gut aus. Jetzt lassen Sie uns diese Handler im Voraus mit unseren Schaltflächen verknüpfen. Also auf klicken, wir werden Google verlinken und für diesen Button klicken Sie auf einen Link Facebook. In Ordnung. Sieht gut aus. Also, was wird jetzt unsere Strategie sein? Also ist es eigentlich sehr, sehr einfach mit Feuerbasis wieder, wir müssen unser Auth Objekt verwenden. Und hier werden wir unseren aktuellen Benutzer anrufen und dann mit Pop-Up-Link mit Pop-Up verknüpfen. Wir müssen nur das Provider-Objekt angeben, das wir als Argument erhalten, das eines davon sein wird , Ordnung. Also, wieder, es ist ein Versprechen, das wir erwarten müssen. Und nachdem es erfolgreich aktualisiert wurde, was auf Sie Rennfunktion umgewandelt wurde, nachdem es erfolgreich aktualisiert wurde, werden wir Benutzer mit Alarm in vier benachrichtigen. Nehmen wir an, verbunden oder vielleicht zwei verbunden. Provider. Verwenden wir das Rincon-Präparat. Und weil es am Provider-Objekt ist. Dieses Mal hat dieses Provider-Objekt Provider I d als Schlüssel. Und wieder werden wir vier Sekunden im Falle eines anderen angeben. Wir werden auf ihre Nachricht aufmerksam machen, und wir werden unsere Nachricht hier so setzen. Und am Ende des Tages müssen wir auch unseren lokalen Staat aktualisieren. Also werden wir dasselbe nennen wie bevor Update verbunden ist. Und dieses Mal ziehen wir Provider Dot Provider I D. und dann werden wir wahr sein, weil wir unser Konto verknüpfen. In Ordnung, jetzt scheint es in Ordnung. Schauen wir es uns an. Es scheint, als hätten wir alle Funktionen. Lassen Sie mich nochmals nachsehen. Okay, sehen gut aus. Gehen wir nun zum Dashboard. Wenn ich auf Link zu Facebook klicke, mal sehen, was jetzt passieren wird. Ich werde gebeten, in meine Facebook-Bust zu schauen, weil ich mich bereits angemeldet habe. Jetzt habe ich auf Facebook verlinkt. Wenn ich zur Authentifizierung gehe und wenn ich eine frische hatte, kann ich sehen, dass ich Provider anmelden muss, die mit diesem Benutzer verbunden sind. Also hat es tatsächlich funktioniert. Nun, wenn ich Lassen Sie uns einen Klick auf Trennen von Facebook Jetzt, Ich habe von Facebook dot com getrennt. Wenn ich auf Google klicke, können Sie die Verbindung zu Google nicht trennen, da es das einzige ist, das noch übrig ist. Und wenn ich wieder aktualisiere, können Sie sehen, wie Facebook verschwinden. Also, eigentlich funktioniert alles. In Ordnung, also war es eine Menge, eigentlich, eigentlich, ich schätze, das ist der gute Zeitpunkt, dieses Video zu beenden. Also werden wir alles in den Zustand der Bühne hinzufügen, und dann werden wir Commit verknüpften Facebook und Google zu einem Konto erstellten Anbieter Block Who bekommen ? Alles klar, wir sehen uns im nächsten. 111. Dashboard - Erstellen (Teil 5): Hey, in diesem Video werden wir weiterhin Dashboard bauen, und wir werden unser Management mit Benutzerprofil-Avataren beginnen. Also in diesem Video werden wir eine Schaltfläche erstellen und wir werden in der Lage sein, ein Bild von unserem PC auszuwählen , das wir dann auf Feuerbasis hochladen und als unser Avatar-Bild verwenden werden. Lass uns gehen. zunächst Lassen Sie unszunächsteine neue Datei auf ihrem Dashboard erstellen. Der Ärgername eines Autos applaudiert Bt rein. Dann lassen Sie uns eine leere Komponente erstellen. Für jetzt, lassen Sie uns Hallo in als in Index GS, die unser Dashboard direkt nach essbarer Eingabe ist. Lassen Sie uns referenzieren Avatar-Upload Bt in so. Okay, gut. Jetzt fangen wir an, unsere Komponente zu bauen. Unser oberes Element wird also eine Entwicklung für den Klassennamen sein. Wir werden es ein wenig abseits der Marge am Hacken geben, das wird leer drei sein. Und dann wollen wir alles zentriert halten. Deshalb haben wir das Steuerzentrum gestellt. In Ordnung, dann müssen wir den Dateityp für die Eingabe angeben, aber wir wollen den nativen nicht verwenden, weil es nicht der beste Weg aussieht. Also für jetzt, lassen Sie es uns einfach als Text behalten und vielleicht, wenn Sie wollen, können Sie es ändern. Um das zu tun. Wir müssen ein Dif hier drüben setzen. Dann lassen Sie uns Label-Insight angeben. Und in diesem Label, werden wir wählen neuen Avatar und auch neben diesem Text in das Etikett. Wir werden die Datei ablegen, aber wir geben ihm keine Anzeige. Also klicken wir tatsächlich auf diesen Text. jedoch Gleichzeitig klicken wirjedoch auf diese Eingabe. Also lassen Sie uns Port aus der Typdatei so einfüllen. Und lassen Sie uns auch den Klassennamen ausgeben, keine anzeigen. Und wir haben diese Warnung auf dem Etikett, die besagt, dass sie mit der Steuerung verknüpft werden muss. Also für diese Eingabe, lassen Sie uns eine Idee so etwas wie Al Atar Upload definieren. Und lassen Sie uns diese Idee zu html vier für dis Label geben. HTM von vier wird also Avatar sein. Applaus. In Ordnung. Auch für dieses Label werden wir den Klassennamen aus diesem Spielblock geben. Außerdem wird es gröberer Zeiger sein, und es wird ein wenig gepolstert wie folgt sein. In Ordnung, schauen wir es uns an. Jetzt. Wenn ich zum Dashboard gehe, sieht es schön aus. Jetzt haben wir diesen Knopf. Wenn wir darauf klicken, können wir Dateien auswählen. Machen wir es so, dass wir hier nur Bilder auswählen können. Also für diese Eingabe werden wir eine andere Requisite setzen, die ist, außer und es wird eine Zeichenfolge von akzeptierten Dateitypen sein. Aber lassen Sie uns diese Dateitypen außerhalb der Komponente angeben. In Zukunft ist es einfacher, innerhalb dieser Komponente zu navigieren. Lassen Sie uns Dateiimporttypen binden, und es wird als Drink Off Dateitypen durch Komma referenziert werden. Also zuerst akzeptieren wir PNG-Dateien als J PAC-Dateien und J packen diese Erweiterung ab. Ordnung, also für diese außer Requisite, wir Datei-Import-Typen übergeben und wir sind bereit zu gehen Jetzt lasst es uns überprüfen. Wenn wir hier darauf klicken, können wir P und G und J zurück Dateien sehen. In Ordnung. Sieht gut aus. Was wird unser nächster Schritt sein? Wenn wir also ein Bild auswählen, möchten wir, dass ein neues Modell geöffnet wird, und in diesem Sterblichen sehen wir die Vorschau. Also müssen wir den Motor von Indo definieren. Also hier, neben dem Etikett werden wir Modellelement aus unserem Anzug verwenden. Und in diesem Modell werden wir Modell Dot Heather als daneben setzen. Wir werden Körper und auch Fußzeile wie diese haben. Also für das Modell, müssen wir zeigen Eigenschaft angeben. Es ist ein Aufzählungszeichen, das angibt, ob es offen ist oder nicht als auf Höhe Handler, wenn dieses Modell geschlossen wird. Also müssen wir unseren eigenen Brauch verwenden. Hoffe, dass wir früher erstellt verwenden sterblichen Zustand, um tatsächlich diese Werte zu erhalten. Also lasst es uns importieren. Und lasst uns D Struktur ist offen, offen und geschlossen. Also für auf Höhe Ereignis, werden wir Close Handler aufrufen und für Show werden wir angeben, ist offen. Also in Moto Heather, wir Port-Modell Punkt-Titel Also dieser Titel wird ein gerechtes und applaudieren Vielleicht so, applaudieren neuen Avatar und lassen Sie uns diesen Titel unten hier entfernen. Dann in den Körper. Wir werden etwas anderes spezifizieren. Und in der Fußzeile werden wir einen Grund setzen, der unseren Avatar hochlädt. Also lassen Sie uns Applaud New Avatar eingeben und für diese Schaltflächen wird Aussehen angeben. Sagen wir, Geist, und auch wir werden es mit off 100 geben, indem wir angeben, dass es ein Blockelement sein . , jetzt, Also, jetzt, wie Sie sehen können, haben wir keinen Auslöser, um unser Moto zu öffnen. Wir müssen irgendwie bestimmen, wenn wir die Datei auswählen. Also dafür werden wir auf Änderungsereignis beim Import off-Typ-Datei verwenden. Lassen Sie uns also die eigene Veränderung befriedigen. Und für diese eine Änderung werden wir eine Funktion erstellen, die wir bei Dateieingabeänderung benennen werden. Alles klar, jetzt lassen Sie uns hier oben und diese Funktion erstellen, weil es ein Handler für ein Ereignis ist. Diese Funktion empfängt ein Ereignisobjekt. Ordnung, also wird dieses Ereignisobjekt Ziel und unter Ziel haben. Wir werden in der Lage sein, auf tatsächliche Dateien zuzugreifen, die wir auswählen, und es kommt immer als Array von Dateien. Lassen Sie uns also aktuelle Dateien unter sogar Zieldateien setzen. Da es also immer ein Array sein wird, müssen wir überprüfen, ob wir nur eine Datei auswählen. Also lasst uns nachsehen. Wenn aktuelle Dateien, die Länge gleich eins ist, dann werden wir unsere Logik anwenden. Also lasst uns zuerst unser erstes Element aus dem Array greifen. Also lasst uns Datei setzen, und wir werden aktuelle Dateien setzen und auf das erste Element verweisen. Dann müssen wir tatsächlich überprüfen, ob die Datei, die wir auswählen, die gültige Datei ist, weil es egal ist, was wir angeben. Hier drüben. Ich kann für jede Datei suchen und ändern Sie es auf alle Dateien, und dann kann ich kaufen Mai Steak Upload, Nehmen wir an, nebenan. Also wollen wir überprüfen, ob diese Datei tatsächlich ein Bild ist. Also hier oben, lassen Sie uns Mitteltypen angeben, die für uns zugänglich sind. Dazu lassen Sie uns alle verfügbaren angeben, Nehmen wir an, akzeptierte Dateitypen. Also hier wollten wir ein Array von Strings angeben. Also zuerst wird unser Strahl Typ Bild Schrägstrich p und G sein. Dann werden wir Bild Schrägstrich j Pack haben. Also, wenn ich mich nicht irre, ist es das Richtige. Und auch werden wir Bild Schrägstrich p j pack haben. Alles klar, gut. Jetzt müssen wir eine Hilfsfunktion erstellen, die überprüft, ob diese Datei Array aus Mitteltypen erfüllt . Also, wenn unser Dateityp einer von ihnen ist, so werden wir eine neue Hilfsfunktion erstellen, die Name ist gültige Datei und es wird Datei als Argument erhalten, und es wird Dateityp gegen diese Werte zu überprüfen. Also gehen wir einfach zu überprüfen akzeptierte Dateitypen enthält Datei Tochter Typ. Alles klar, so dass es einen booleschen Wert zurückgibt. In Ordnung, also jetzt hier, drinnen. Ah, waren Handler. Wir können fragen, ob wir fragen, ob es gültig ist, unsere Akte einreichen, dann tun wir etwas. Andernfalls zeigen wir dem Benutzer einen Fehler an. Oh, Junge, du hast die falsche Aktenzeit ausgewählt. Also lasst uns wachsam machen. Dann werden wir Warnung setzen, nicht einen Fehler, und wir werden angeben, vielleicht falschen Dateityp, und dann lassen Sie uns schlechte Datei Tochter so eingeben, und lassen Sie uns vier Sekunden angeben. Also, was werden wir tun, wenn wir die gültige Akte haben? Zunächst einmal werden wir unser bewegliches Fenster öffnen. Aber kurz bevor wir es öffnen, müssen wir irgendwie unser Image aufstellen, das wir applaudieren. Dafür werden wir einen neuen Zustand schaffen. Lassen Sie uns also einen neuen Zustand mit Verwendungsstatus erstellen , den wir benennen werden. Nehmen wir an, nur Bild und Bild standardmäßig einstellen. Es wird auf jetzt gesetzt. Aber wenn wir Bild ausgewählt entwickelt haben. Wir werden „Setimage“ nennen, und wir werden die Datei als unseren Staat so machen. Alles klar, jetzt schauen wir es uns an. Wenn ich also zum Dashboard gehe, wenn ich einen neuen Avatar auswähle, wenn ich ein Bild hochlade, Ordnung, Motile öffnet sich. Jetzt machen wir das Gleiche. Aber lassen Sie uns Jason-Datei wählen. Wenn ich auf Öffnen klicke, habe ich eine falsche Dateityp-Anwendung, Jason. Also hat es tatsächlich funktioniert. In Ordnung? Was wird unser nächster Schritt sein? Unser nächster Schritt besteht darin, die Vorschau anzuzeigen und das Bild anzupassen. Also, wie wir in der Lage sind, das zu tun, werden wir react-Avatar-Editor-Paket verwenden, das von einem PM kommt Ich mag dieses Mini-Paket wirklich . Es gibt uns die Möglichkeit, das hochgeladene Bild anzupassen. Wir werden nicht in zu viele Details eintauchen, aber wir werden nur in der Lage sein, unser Bild so zu skalieren, dass es notwendig ist. Also zuerst, lasst es uns installieren. Also werde ich mein Terminal öffnen und von hier aus, was ich noch ein in Ordnung habe . Ich werde npm installieren reagieren Avatar, Editor und lassen Sie uns warten, bis es tatsächlich installiert ist oder richtig ist. Scheint, als wäre unser Paket installiert worden. Lassen Sie uns den AP und P. M Run erneut ausführen, starten und mal sehen, wie wir dieses Paket tatsächlich verwenden können. Lassen Sie mich also den Importbefehl kopieren. Lassen Sie mich es hier ganz oben stellen. Und wie Sie sehen können, muss ich diese Komponente so verwenden. Also lasst uns das kopieren. Lassen Sie uns diese Komponente als in unserem Code für Modellkörper kopieren. Wir werden diese Komponente spezifizieren, aber zuerst werden wir überprüfen, ob wir unser Bild innerhalb des Staates definiert haben. Also lasst uns schlechtes Image. Wenn wir ein Bild haben, werden wir das über unsere Editor-Komponente und für das Bild anzeigen. Wir werden unsere Datei angeben, dass wir den US-Bundesstaat für With und Height Mobile auf 200 begrenzt haben . Dann für die Grenze werden wir sagen, nur 10 setzen . Und das ist diese Grenze an Kanten, als wir keine Farbe brauchen. Wir brauchen keine Skala, aber wir brauchen Grenzradius. Wir wollen es umkreist lassen. Also werden wir Grenzradios 100 angeben. Alles klar, jetzt schauen wir es uns an. Wenn ich die Seite aktualisieren, dann klicke ich auf Modell Wählen Sie neuen Avatar. Wenn ich auf dieses Auto klicke und jetzt öffnen, kann ich sehen, dass ich dieses Converse Element habe, das ist dieses Paket. Und jetzt bin ich in der Lage, es mein Bild ein wenig hinzuzufügen. Alles klar, so sieht es gut aus, aber es zentriert sich nicht. Es bedeutet, dass wir zusätzlichen Markt für dieses Bild für diesen Avatar-Editor hinzufügen müssen. Lassen Sie uns ein weiteres Def um es so herum. Und für diesen Def. Lassen Sie uns die Anzeige flex angeben. Also werden wir das Display Flex setzen. Begründen, sagen wir, zentrieren, ausrichten Elemente zentrieren und lassen Sie uns es in voller Höhe so setzen. Wenn ich ein frisches hätte, schauen wir es uns an. Wenn ich ein frisches hätte, Lassen Sie mich ein Bild erneut auswählen. Aber trotzdem sieht es nicht gut aus, weil es nicht gerechtfertigt ist. Mitte. Es ist gerechtfertigt Content-Center. Lassen Sie es mich versuchen. Wählen Sie Neuer Avatar aus. Alles klar, jetzt sieht gut aus. Es ist zentriert. Okay, also denke ich, das ist es für dieses Video, und unser nächster Schritt wird sein, das Bild wirklich hochzuladen. Aber es wird das Thema für unser nächstes Video zu diesem Schritt sein. Lassen Sie uns unsere Änderungen übernehmen und dieses Video beenden. Also werden wir alles zu diesem Stadium hinzufügen, dass wir Commit bekommen werden, und wir werden sagen, angefangen, mit Benutzeravatar zu arbeiten. Applaus. In Ordnung. Sieht gut aus. Wir sehen uns im nächsten. 112. Dashboard - Hochladen von Avatar auf Firebase (Teil 6): Hey, in diesem Video, wir werden weiterhin auf Avatar-Upload zwischen Komponente arbeiten, und wir werden fertig Hochladen que sera Wasser. Lass uns gehen. Das erste, was gequibbelt Sie würden einen Handler für ein Klick-Ereignis definieren, um Ihren Avatar-Button applaud . Lassen Sie uns also auf Klick-Ereignis beruhigen und lassen Sie uns eine neue Funktion erstellen, die wir beim Upload nennen werden . Klicken Sie auf. Dann werden wir diesen Handler direkt nach der Dateiimportänderung setzen, und jetzt müssen wir irgendwie Zugriff auf das eigentliche Bild bekommen. Dieses Mal wird dieses Bild bearbeitet. Also müssen wir Zugang zu diesem umgekehrten Element bekommen. Also, wenn wir es untersuchen, ist es eine Umkehrung innerhalb von Dom, weil es um unsere Editor-Komponente geht, die wir aus dem Paket verwenden . Also, um zu verstehen, was tatsächlich passiert, wie wir das Bild bekommen können, das wir brauchen, um zu ihrer Dokumentation zu navigieren, als wenn wir nach unten scrollen , haben wir ein Beispiel darauf beschränkt, auf das resultierende Bild zuzugreifen. Hier haben wir diese Methode beschränkt bekommen Bild skaliert, um sich zu unterhalten. Aber wie wir aus diesem Beispiel sehen können, verwendet es klassenbasierte Komponente, und es verwendet auch etwas namens Referenzen. Referenzen in React sind also die Möglichkeit, direkt auf Dom-Elemente zuzugreifen oder Elemente direkt dort zu reagieren , wo angemessener programmatisch zu sagen wäre. Lassen Sie uns also herausfinden, wie wir tatsächlich eine Referenz auf unsere Avatar-Editor-Komponente innerhalb einer funktionsbasierten Komponente setzen können . Also zuerst müssen wir einen Hook importieren, den wir vorher noch nicht von reagieren gesehen haben , der ref verwendet wird , der für Verwendungsreferenz steht. Jetzt müssen wir eine neue Referenz erstellen, und wir werden diesen Referenz-Avatar-Editor Graph nennen, und wir werden diesen Haken so nennen. Jetzt müssen wir diesen Verweis an diese Komponente übergeben. Also werden wir Raph angeben, und dann werden wir Avatar-Editor grob gießen. So, jetzt sind wir in der Lage, diese zugreifen, Nehmen wir an, Avatar, Editor-Komponente mit dieser Referenz, das ist unser Wasser, das ich zu rau gemacht. Also beim Hochladen klicken. Lassen Sie uns einen Blick werfen. Wir müssen auf diesen Editor zugreifen. Holen Sie sich Bildfertigkeit, um auf den tatsächlichen Wert von dieser Referenz zuzugreifen. Wir müssen die nächste setzen, damit wir uns unterhalten, und wir werden sagen, wir werden auf Avatar Edita ralf dot current zugreifen. Es ist also das aktuelle Element aus dieser Referenz, weil es auch undefiniert sein kann. So stellen wir sicher, dass wir auf das aktuelle Element zugreifen. So als nächstes können wir auf die eigentliche Methode zugreifen, die wird Bild skaliert werden, zwei Kameras. Also lassen Sie es uns nennen. Und jetzt können wir tatsächlich unser umgekehrtes Element haben. Aber die Sache ist, dass wir nicht mit dem Gespräch arbeiten können. Wir können es nicht hochladen. können wir eigentlich gar nichts machen. Also zuerst müssen wir es in eine ehemalige konvertieren, die wir zu Feuerbasis applaudieren können, damit wir Converse tatsächlich in eine Blob-Datei konvertieren können. Und eine Bloke Datei ist nur eine Stückdatei, die im Binärformat dargestellt wird. Mit diesem Format können wir applaudieren. Also, auf jedem umgekehrten Element haben wir diese Methode, die aufgerufen wird, zu blockieren, und die Sache mit diesem Methode zu blockieren, dass es nur Rückrufe akzeptiert. Wir können eigentlich keine Versprechen gebrauchen. Dafür möchte ich diese Colback-basierte Methode in ein Versprechen konvertieren. Um das zu tun, werden wir das nächste hier an der Spitze tun. Wir werden eine neue Funktion definieren, die wir erhalten Block nennen, und diese Funktion wird eine Converse wie diese erhalten und diese Funktion wird zurückkehren und Sie versprechen Objekt. Also lassen Sie uns wieder neu setzen, ich verspreche es. Also haben wir es noch nicht gesehen. Um ein tatsächliches Versprechen zu erstellen, müssen wir eine Rückrufeinsicht setzen, die zwei Argumente erhält, Ergebnis und Ablehnung. Also werden wir diese Methode aufrufen, um das Versprechen tatsächlich zu lösen oder abzulehnen. Also hier, drinnen, was werden wir tun? Wir rufen Converse zu Bluff an. Dann werden wir diesen Rückruf mit dem mit dem Ergebnis angeben, das der eigentliche Bluff sein wird . Und in diesem kalten Rücken werden wir es überprüfen. Wenn unser Blut existiert und alles in Ordnung ist, werden wir uns aus diesem Versprechen ergeben, dass wir es lösen werden. So Ergebnis und Wert wird der eigentliche Sprengrat sein. Wenn wir keine Blockelemente haben, die mit einem neuen Fehler und für eine Fehlermeldung ablehnen würden , werden wir von so etwas wie Dateiproteste jemals sagen. Ordnung, also haben wir jetzt auf diese Weise eine kalte, zurückbasierte Methode in ein Versprechen umgewandelt . Also, jetzt können wir das in die Luft sprengen und was wir tun können, werden wir versuchen, fangen Block hier drüben zu versuchen und jetzt, was wir tun werden, werden wir das nennen explodieren so. Dann werden wir Leinwand reinlegen. Und weil es ein Versprechen ist, müssen wir jetzt warten. Und falls wir einen Fehler haben, wird es von diesem Block hier gefangen. Also, weil wir erwarten, Index, müssen wir diese Funktion in eine beliebige Funktion konvertieren. Ordnung, also wird das Ergebnis unsere Explosion sein, dass wir jetzt zum Dateispeicher über Speicher applaudieren können . Wie wir das tun können. Wir haben noch nichts hochgeladen. Nun, navigieren wir zurück zu Firebase Doggy s und importieren wir hier eine andere Bibliothek aus Firebase. Dieses Mal wird es Firebase Schrägstrich Speicher jetzt tatsächlich Zugriff auf Speicher in genau der gleichen Weise werden wir exportieren, const Storage App Dot Storage alles in Ordnung. Und der Speicher A pie ist dem Datenbankspeicher sehr ähnlich. Wir müssen die Referenz angeben, die tatsächlich der Pfad zur Datei ist, und dann müssen wir sie applaudieren. Also jetzt hier. Zuerst werden wir den Pfad angeben, unter dem wir unser Bild speichern werden. Es wird,sagen wir, Avatar-Dateireferenz wie diese sein sagen wir, , so dass wir auf unser Speicherobjekt von Misc Firebase zugreifen würden . Dann werden wir Punkt setzen und dann werden wir Referenz nennen. Also werden wir unsere Dateien auf ihrer Vergangenheit speichern, die s slash Profil Schrägstrich Benutzer i d also müssen wir Sie dorthin bringen. Ich d Also lassen Sie uns verwenden Profil Hook, So const Profil, wir werden von Verwendung Profil erhalten. Dann werden wir den Profilpunkt Ihres i d angeben und es in String-Interpolation konvertieren . Und dann, tatsächlich, lassen Sie uns Zugang Kind und Kind wird Avatar sein. Alles klar, was wir hier tun, wir geben diesen Pfad in unserem Speicher an, also wird er unseren Ordner darstellen und dieses Kind wird es eine Datei namens Avatar sein. Wir werden keine Verlängerung setzen, da es automatisch von der Feuerbasis abgeholt wird. Alles klar, jetzt, das nächste, was gequibelt ist, werden Sie die Datei hochladen. Also lassen Sie uns const Upload-Avatar-Ergebnis setzen. Dann werden wir eine Gewicht-Avatar-Datei Arraf Dot setzen. Und wenn wir es nennen, können wir sehen, dass wir tatsächlich entweder Blob oder Array-Pufferarray setzen können. Also lasst uns tatsächlich unseren Blub hier drüben setzen, und dann lasst uns auch zweites Argument. Wir können Meta-Daten angeben. Also für Materie Daten, lassen Sie uns Cash Control Header angeben. So können wir tatsächlich unsere Bilder innerhalb des Browsers einzahlen. Also lasst uns eine Bargeldkontrolle setzen. Und für die Bargeldkontrolle werden wir die Öffentlichkeit als Marx Age angeben. Wir gehen nach Port 3600, was eine Stunde in Sekunden darstellt. Dann multiplizieren wir mit 24, um den tatsächlichen Tageswert zu erhalten, und dann werden wir mit drei multipliziert. Also, jetzt haben wir Marken, die frei sind. Drei Tage in Sekunden angegeben. Alles klar, jetzt, wo wir Petar haben , lassen Sie mich diese Sammy Spalte von hier entfernen. Jetzt, da wir ein Plourde-Avatar-Ergebnis haben, müssen wir die Don't load your l aus unserer Datei, damit wir es in unserer Datenbank speichern können. Also hier werden wir ständigen Download setzen, Ural. Also nennen wir Upload unserer Wasserergebnis-Punkt-Referenz. Machen Sie sich nicht täuschen, und rufen Sie nicht direkt herunterladen Ihre l Weil, wie Sie sehen können, ist es veraltet ID Referenz zu verwenden, die nicht laden Euro bekommen. Also rufen wir Ralf an, und dann rufen wir an. Holen Sie sich nicht Euro laden. Es gibt ein Versprechen zurück. Also warten wir darauf. Und jetzt können wir es wirklich im Inneren speichern. Unsere Datenbank lässt schlechte Benutzer Avatar Raff, die unsere Referenz innerhalb Echtzeit-Datenbank darstellen wird . Also, welche wird Datenbank Daut Ralf sein, als es sein wird? Profile Slash Profil Punkt Ihre i d Und dann werden wir Kind eines Autos setzen. Und jetzt werden wir User Avatar Raff anrufen, setzen, nicht Euro laden. Und gleich danach werden wir Alarmpunkt-Info über ein Auto nennen, das Bohne applaudiert hat. Und lassen Sie uns vier Sekunden. Und für den Fall, dass jeder Redakteur ist, werden wir alles alarmieren und wir werden unsere Botschaft auch mit vier Sekunden sagen. Und auch kurz bevor wir diese Datei speichern, lassen Sie uns auch den Ladezustand angeben. Also hier werden wir einfach erstellen wird geladen und gesetzt wird, was standardmäßig geladen wird, wird Ihre false gesetzt. Also, wenn wir alle Operationen direkt davor ausführen, rufen wir set wird geladen auf true. Und dann, wenn wir fertig sind, rufen wir set wird geladen auf false und wenn wir fehlgeschlagen sind, rufen wir auch Set wird geladen auf false jetzt, wenn wir es tatsächlich verwenden, wir verwenden es tatsächlich für diese Schaltfläche, um es deaktiviert zu machen. Also deaktiviert wird nur sein, wenn wir seinen Ladezustand aktiviert haben. In Ordnung, also war es eine Menge. Nun, lassen Sie es uns wirklich testen. Also lassen Sie mich die Seite aktualisieren. Lass mich öffnen, Armaturenbrett. Lassen Sie mich Neuer Avatar auswählen. Jetzt klicke ich auf dieses Auto. Ich werde auf Applaud neuen Avatar klicken, und ich kann sehen, Avatar wurde applaudiert. Alles klar, jetzt schauen wir uns zuerst in unserer Datenbank an. So scheint es, als hätten wir jetzt Avatar hier. Wie Sie jetzt sehen können, haben wir diese Öffentlichkeit, die krank ist, was zu einer Firebase-Speicherung führt. Schauen wir es uns an. Unser Lager. Und hier können wir einen Ordner sehen. Lasst uns darauf klicken. Dann haben wir Benutzer I d. Und im Inneren haben wir Avatar-Datei. Also, wenn wir darauf klicken, können Sie sehen, wir haben diese Ihre l, die wir klicken können, und es öffnet uns das Bild in Ihnen tippen. Aber die Sache ist, dass wir jetzt erfolgreich Datei in Feuerbasis Speicher hochgeladen. Also, wie können wir jetzt dieses Bild darstellen? Nun, ich denke, das ist Thema für unser nächstes Video, denn im Moment wird es zu lang. Alles klar, also lassen Sie uns alles speichern, um System zu bekommen. Lassen Sie uns es unsere Änderungen kommen und sagen wir hochgeladen User Avatar. Alles klar, wir sehen uns in der nächsten. 113. Dashboard - User und Initialen von Benutzer-Namen (Teil 7): Hey, in diesem Video zeigen wir das hochgeladene Avatar-Bild in unserem Dashboard an. Lass uns gehen. Zuerst möchte ich die Komponente aus unserem Anzug zeigen, die Allah Teer ist. Also navigierte ich zu seiner Dokumentation, und ich öffnete ALIT sind unter Datenanzeige. Also hier das coole Ding an dieser Komponente, dass es tatsächlich Namensinitialen zeigen kann, wenn wir kein Bild haben. Also lassen Sie uns ein Beispiel öffnen. Und mal sehen, wie wir tatsächlich Namensinitialen setzen können, wenn wir keine Quelldatei haben. Also müssen wir diese Initialen einfach an Avatar Component übergeben. Was ich also vorschlug, schlug ich vor, einen Wrapper um diese Komponente zu erstellen. Also, wenn wir kein Bild haben rebellieren Anzeigenamen Initialen. Also unter Komponenten, lassen Sie uns eine neue Datei erstellen, die wir Profil Avatar nennen. Also lassen Sie es eine Komponente sein, die dieses Ah zurückgibt, was sind Komponenten, die von unserem Anzug so kommt? Welche Requisiten sollten wir für diesen Avatar angeben? Also werden wir den Namen vom Benutzer brauchen, also geben wir ihn als Requisiten weiter. Also lassen Sie uns Destruktornamen und was auch immer zu dieser Komponente geht, es wird auf die Avatar-Komponente aus unserer Serie umgeleitet. Also lass es uns sagen, Teoh Avatar Requisiten. Und dann lassen Sie uns es über das ganze Element verteilen. Alles klar, gut. Nun, in diesem Avatar, müssen wir Namen Initialen portieren. Aber sagen wir, unser Name ist so etwas wie Andrew, und etwas geht danach. So, wie wir die tatsächlichen Namensinitialen erhalten können, werden wir eine Hilfsfunktion erstellen. Also lasst uns das löschen. Und unter MISC, lassen Sie uns eine neue Datei erstellen, die wir Helfer doggy s nennen und hittable definieren alle unsere vernünftigen Funktionen, die uns während des Codes helfen. Also werden wir eine neue Funktion erstellen, die wir nennen, Nehmen wir an, erhalten Namensinitialen. Es wird Benutzername als Argument erhalten, und unsere Logik wird die nächste sein. Zuerst werden wir es in eine Reihe von Auszeichnungen aufteilen, und dann werden wir überprüfen, ob wir zwei oder mehr Wörter in unserem Spitznamen haben, dann bekommen wir erste Briefe zuerst an die Bezirke. Also lasst uns zuerst den tatsächlichen Bereich bekommen. Wir werden es nennen, sagen wir Split Name. Dann machen wir den Namen Punkt zur Oper. Der Fall wird im Voraus in Großbuchstaben umgewandelt, und dann teilen wir ihn durch Leerzeichen auf. Auf diese Weise werden wir mit einem Array von Wörtern enden. Und dann werden wir überprüfen, ob die Länge des geteilten Namen-Array-Dokuments größer als eins ist. Wenn wir also zwei Auszeichnungen haben, geben wir zumindest den Namen Split zurück, Erstes Wort. Und dann müssen wir vom ersten Wort an den ersten Buchstaben bekommen. Also werden wir zweite Klammern öffnen, und wir werden das erste Element setzen. Dann werden wir Pluszeichen setzen, um in einem Bezirk zu schneiden. Dann werden wir diesmal gegen den Namen Bleidt setzen Hubble Referenz. Das zweite Element. Das zweite Wort. Also werden wir einen und wieder setzen, wir werden auf den ersten Brief verweisen. Wir haben Null gesetzt. Ordnung, InOrdnung,falls wir standardmäßig nur ein Wort haben, kehren wir zurück. Teilen Sie einfach den Namen Null, das ist das erste Wort. Und dann erster Element-Anfangsbuchstabe. In Ordnung. Und lassen Sie uns diese Funktion auch von hier aus erkunden. Nun, in unserem Profil-Avatar hier in geschweiften Klammern, können wir tatsächlich anrufen, Namen bekommen und es zeigt, und wir können Namen übergeben, die wir von Requisiten erhalten. Alles klar, jetzt gehen wir zu Avatar. Applaud Bt und Komponente. Und hier, lassen Sie uns diese Komponente verwenden. Also werden wir Profil-Allah-Auto als Quelle setzen. Wir werden Profil Punkt Avatar und dann für Namen angeben. Wir werden Profilpunktnamen angeben. Auf diese Weise, wenn wir eine Quelldatei haben, dann wird die Quelldatei angezeigt. Wenn wir es nicht haben, werden unsere Namensinitialen da sein. Alles klar, lassen Sie es uns speichern und schauen wir uns mal an. Was haben wir? Gehen wir zurück zu unserem Dashboard und jetzt sehe ich, dass ich kein Avatar-Bild habe . Na gut, vielleicht ein Let's Upload. Öffnen wir es. Lassen Sie uns Upload New Avatar Avatar wurde hochgeladen, und immer noch kann ich alle Daten sehen. Okay, das liegt daran, dass wir unsere Kontakte nicht geändert haben. Unsere Profilkontakte. Lassen Sie uns zu Profilkontext gehen und Daten, die wir hier übergeben haben, haben keine Ah, was ist aber innerhalb Al Atar Applaud BT in US-Quelle. Ich habe Profil Avatar angegeben. Dieses Profil stammt aus dem Verwendungsprofilkontext. Also, was müssen wir jetzt tun, wo wir Daten aus der Datenbank wieder? Wir können es tatsächlich von hier aus unserer Momentaufnahme zerstören, oder? So einfach wie das. Also dann werden wir es auch an unsere Kontakte weitergeben Alles klar, speichern wir es. Und jetzt schauen wir uns mal an. Wenn ich jetzt zu meinem Dashboard gehe, habe ich dieses Bild. Aber zuerst sieht es wirklich seltsam aus, also lasst es uns ein bisschen modifizieren. Gehen wir zum Profil Avatar und standardmäßig, direkt bevor wir alle Requisiten verteilen. Lassen Sie uns Kreis setzen, so dass es standardmäßig eingekreist wird. Schauen wir es uns an. Jetzt ist es eingekreist, aber die Größe ist wirklich, wirklich klein. Also was, wir können im Avatar-Upload-Button dio? Wir können Klassennamen anwenden und das wird es beheben. Wir wissen, dass unser Bild, unser Converse, das wir für unseren Teer-Editor angegeben haben, 200 mal 200 ist. Also werden wir mit 200 Höhe 200 Pixel anwenden, die Klassen, die Sie in Utility-Klassen beschränkt haben. Also lasst es uns retten. Und wenn wir jetzt zum Armaturenbrett gehen, haben wir die richtige Größe für M A Tropfer. Aber das Bild selbst ist wirklich klein, also müssen wir das eigentliche Bild rezitieren. Dafür. Ich habe diesen Plusnamen erstellt, den Sie auch innerhalb von Dienstprogrammen finden können, das Bild in voller Größe ist, und es wird mit einer Höhe von 100% dem Bild geben. Jetzt sieht es gut aus. jedoch Es gibtjedochein kleines kleines Problem. Wenn ich dieses Bild verzögert habe, lassen Sie es uns jetzt von hier aus liefern. Wie Sie sehen können, wenn wir kein Bild haben, bekomme ich Namensinitialen, aber sie sind auch zu klein, also müssen wir auch die Telefongröße anpassen. Also lassen Sie uns dafür eine riesige Größe voranziehen und alles wird gut. Schauen wir es uns an. Jetzt. Ich habe auch die richtige Größe für meinen Text. Also lassen Sie uns jetzt vielleicht den Spitznamen ändern und zwei Wörter setzen. Lassen Sie uns setzen und sein. Und lassen Sie uns überprüfen, ob wir zwei Buchstaben als unsere Initialen haben und in Haben wir hier eine angezeigt ? Schön. Lassen Sie uns versuchen und applaudieren New Allah Auto. Wählen wir es aus. Und Avatar wurde hochgeladen, sieht gut aus und funktioniert nahtlos. Okay, gut. Ich schätze, das ist der gute Zeitpunkt, um dieses Video zu beenden. Also lassen Sie uns unsere Änderungen mit Nachricht begehen. Etwas wie angezeigt haben einen tar Benutzer Avatar. Okay, perfekt. Wir sehen uns im nächsten. 114. Create-Room Knopf und Funktionalität hinzufügen: Hey, willkommen in diesem Video. Wir werden neue Bottom Billow Dashboard hinzufügen, das uns lieben wird, um einen neuen Chatraum zu erstellen . Lass uns gehen. Gehen wir zurück zu Code und anderen Komponenten. Wir werden neue Datei erstellen, die wir schaffen Raum bt n motile Don't nennen. Ja, Lassen Sie uns voll gehen Diese Komponente für jetzt. Lass es nur Hallo sein und lass es uns tatsächlich benutzen. In unserer Sidebar Öffnen Sie die Sidebar. Und hier unten Armaturenbrett Tuggle, wir werden schaffen Raum Bt und Moto. In Ordnung, jetzt lasst uns nicht mit dem Disk-Gegner beschäftigen. Und hier werden wir eine Schaltfläche definieren, die ein Modellfenster mit Formular öffnet, in dem wir füllen werden, um tatsächlich einen Chatraum zu erstellen. Also wird es in Ordnung sein, vielleicht eine Diff-Komponente. Also drinnen werden wir Knopf setzen, der unser Tuggle sein wird, um das Flaschenfenster zu öffnen. Also werden wir das in Sicht bringen. Also das kann ich haben Symbol aus kann kreativ sein, und der Text wird neue Chat-Raum zu schaffen. Ordnung, also dieser Knopf wird ein Block Elemente sein, es wird Farbe grün haben und beim Klick gehen wir , Teoh, Teoh, öffne unser Moto. Also lassen Sie uns tatsächlich unseren benutzerdefinierten Haken verwenden, um den tödlichen Zustand zu verwalten. So wird dieser Haken verwendet Modellzustand von hier begonnen, Infrastruktur ist offen, offen und dann geschlossen. Und für Button klicken, Wir gehen zu gießen offen. Alles klar, jetzt definieren wir unser bewegliches Fenster. Also lasst uns Modellelement aus unserem Anzug setzen. Wir werden, wie immer, sterbliche Heather haben wie immer, . Dann werden wir Körper haben und ins Wanken gehen. Alles klar, gut. Also in Heather, werden wir Titel mehr setzen. Sie werden Titel und innen punktieren. Wir setzen so etwas wie einen neuen Chatraum ein und lassen uns dieses Idol von hier entfernen. Ordnung, im Körper, wir werden die Form und den inneren Fuß definieren, oder wir werden den Knopf setzen, um das Formular zu senden. Also lassen Sie uns zuerst die Schaltfläche erstellen. So wird es ein Button-Element sein. Es wird blockiert werden. Komponente und Aussehen wird primär sein. Okay, schätze ich. Das Erscheinungsbild ist standardmäßig auf primär festgelegt. Aber lassen Sie es uns einfach so behalten, wie es ist. In Ordnung? Erstellen Sie einen neuen Chatraum. Jetzt speichern wir es und mal sehen, Was haben wir? Also, jetzt haben wir diese neue Chatraum erstellen, haben jemals. Wir haben nicht die Marge, also lasst uns mal etwas ansprechen. Also für diese steife, lassen Sie uns Klassennamen setzen und fügen Sie Rand oben zwei hinzu. In Ordnung. Sieht gut aus, jetzt in diesem Körper würde unsere Form definieren. Also lasst uns schlechtes Formelement aus unserem Anzug. Und in diesem geboren, werden wir unsere Eingabeelemente definieren, und sie sind unter gebildeten Gruppenkomponenten gruppiert. Also lasst uns schlechte Formgruppe und innerhalb dieser Form. Aber offen wird das erste Kontroll-Label haben. Und dann werden wir Formularsteuerung setzen, die der eigentliche Import selbst sein wird. Lasst uns so vorgehen. Also innerhalb Steuerelement Label, werden wir auf den ersten Port-Raumnamen und Formular-Steuerelement wird Name, Name und Platzhalter sein wird ein Platzhalter wird so etwas wie Chatroom Name eingeben und drei Enten, und es wird eine selbstschließende Komponente sein, weil es eine Eingabe ist. Alles klar, wenn ich also in dieser Formulargruppe schwebe, heißt es, es definiert nicht, also lasst uns es aus unserem Anzug importieren. In Ordnung, dann definieren wir unsere zweite Eingabe. Sagen wir, würde eigentlich und sehen, was wir haben. Wenn wir also auf Neuen Chatraum erstellen klicken, wird nichts passieren, weil wir keine Show Requisite für motile Fenster angegeben haben. Also lassen Sie uns setzen ist offen und auf Höhe, wir werden Kleiderbügel setzen. Alles klar, sieht gut aus. Jetzt schauen wir es uns an und ich sehe, dass wir viel Platz hier drüben hinzugefügt haben. Also lasst uns schlechter Rand oben eins jetzt ist es. Ok, öffnen wir es. Und hier können wir sehen, dass wir unseren Eingang haben, aber es ist ein wenig aus, nicht voll mit. Also lasst es uns schnell reparieren. Und vier Tage bilden Elemente. Wir werden es so machen, dass es alles mit dem Wrapper-Element abnimmt. Alles klar, sieht gut aus. Nun gehen wir weiter und lassen Sie uns eine zweite Foreign Group erstellen, die Raumbeschreibung sein wird. Also für diese Reformgruppe auch werden wir auchSteuerelementbeschriftung auf Formular-Steuerelement wie folgt kopieren Für dieses Steuerelement Etikett werden wir Beschreibung angeben, und für dieses Formular-Steuerelement wir eine Textbereich-Komponente. Also lassen Sie uns schlechte Komponentenklasseneigenschaft. Es wird Textbereich sein als ihre Rose. Standardmäßig ist gleich fünf. Name wird Beschreibung sein. Und Platzhalter wird sein Lassen Sie uns sagen, geben Sie Rom. Beschreibung. In Ordnung. Sieht gut aus. Werfen wir einen Blick, wenn ich darauf klicke. In Ordnung. Ich habe eine Beschreibung. Ich habe echten Namen. Okay, jetzt, vielleicht lassen Sie uns unseren Zustand für die tatsächlichen Daten definieren. Also hier was? Wir werden Ford, wir werden Ihren Zustand definieren, dass wir nennen, bilden, Wert und Fremdwert als Update-Funktion setzen. Ihr Zustand wird also der nächste sein, dass es ein Objekt sein wird, und ich, was ich vorschlage, schlug vor, es außerhalb der Komponente zu setzen, weil wir es zum Anfangswert rezitieren werden, wenn wir es einreichen. Aber wir werden das Formular einreichen. Also lasst uns das Showformular eintragen. Und es wird ein Objekt mit Name und Beschreibung Einsicht sein. In Ordnung. Das gleiche wie wir Namen Requisite für unseren Input haben. In Ordnung, also bist du vorbei. Standard wird Anfangsform sein. In Ordnung? Außerdem benötigen die Leute den Ladezustand. Lassen Sie uns es im Voraus definieren. Wir werden es verwenden, wenn wir das Formular absenden. Ihr Zustand wird also falsch sein. Also gut, Also gut, zuerst müssen wir uns darum kümmern, wann wir die Daten nehmen müssen. Also, wenn wir ein eigenes Änderungsereignis verwenden Also lassen Sie uns vier const auf Formularänderung und die Sache mit unserer Anzug, wenn wir auf Änderungsereignis verwenden, gibt es uns automatisch den Wert als erstes Argument, nicht das Ereignisobjekt. Also werden wir hier Wert haben. Also werden wir CET-Formularwert als Wert gießen. Und eigentlich ist es etwas anders mit unseren Anzugformen. Wenn wir eine Formularkomponente in unserer Sicherheit haben, gibt es Ihnen automatisch nicht den Wert aus der tatsächlichen Eingabe, die Sie es hinzufügen. Aber es gibt Ihnen den Wert aus dem gesamten Formular, so dass es wirklich bequem ist, es mit dem Verwendungsstatus zu verwenden. Ordnung, also bei der Formularänderung, werden wir für unsere Formularkomponente portieren. Also auf Change-Handler wird auf Formularwechsel sein. Jetzt. Wir müssen auch unsere Daten irgendwie validieren und zuerst werden wir den tatsächlichen Zustand mit dem Formular verknüpfen. So hat es diese Eigenschaft namens Formularwert. Es muss also ein Objekt sein, das mit der Form nur unser Zustand interagiert. In Ordnung, also werden wir einen schlechten Formwert haben. Und dieses auf Änderungsereignis wird uns den neuen Formularwert geben, wenn wir ein Element aus diesem Formular aktualisieren . Also, was wird unser Objekt am Ende sein? In Ordnung. Also, wie ich bereits sagte, jetzt müssen wir irgendwie die Daten validieren, das Formular, wenn wir eingereicht haben. Nun, unser Anzug liefert uns, ob wir mit Hilfsmethoden, um das zu erreichen, ein Schema definieren können, das wir unserem gebratenen übergeben können, und dann wird unser Anzug gegen dieses Schema überprüfen. Also lassen Sie uns unser Schema definieren. Ich hier an der Spitze für unser Formular, Lassen Sie uns definieren es Modell. Und hier werden wir ein Schema verwenden, das wir aus unserem Anzug importieren, als wir das Modell setzen. Und in diesem Modell müssen wir ein Objekt setzen, das unseren Staat repräsentieren wird. Also werden wir einen Namen haben. Es muss die gleiche Form wie unser Staat haben. Also Name wird String-Typ sein, der tatsächlich von Schema-Typen kommt. Also lassen Sie uns strukturieren es String oder vielleicht Schemapunkt-Typen von diesem Objekt, wir werden d Struktur-String-Typ. Dann werden wir den String-Typ verwenden, um diesen Namen zu definieren, wird ein Schrumpfen sein. Also String-Typ, dann werden wir setzen ist erforderlich, um die Validierung durchzuführen und andere Nachricht wird erschossen werden . Name ist erforderlich, alles in Ordnung, und das gleiche wird tun. Vier Beschreibung. Lassen Sie es uns kopieren. Lassen Sie uns in Beschreibung umbenennen und sagen wir, Beschreibung ist erforderlich, die coole Denken Sie über diese moralische Schema-Validierung, dass es in Echtzeit validiert wird. Jetzt müssen wir dieses Schema auf unserem Formular einreichen. Also lasst uns diese Formularkomponente finden. Und hier als motil werden wir unser Moto-Schema spezifizieren, unser Modellobjekt hier. In Ordnung, jetzt müssen wir tatsächlich die Submit-Funktion erstellen. Also zuerst einmal, lassen Sie uns tatsächlich auf Formularwechsel. Es ist hier nicht optimiert, weil wir eine Menge von Zuständen haben, die sich ständig ändern, zum Beispiel, ist offen und Fremdwert. Also jedes Mal, wenn wir auf Formularänderung erstellt haben und Sie diese Funktion kopieren. Also lasst uns es im Voraus auswendig lernen, um es optimierter zu machen. Alles klar, und jetzt lassen Sie uns tatsächlich unsere On Submit-Funktion erstellen. Also werden wir es nennen, sagen wir bei der Einreichung und es wird eine Senkenfunktion im Voraus sein und hier wird der erste Schritt sein, Daten tatsächlich zu validieren. Also, wie können wir das tun? Wie es unsere Daten anhand des Schemas validieren kann, das wir hier definieren. Wir müssen tatsächlich einen Verweis verwenden, um unsere Formularkomponente zu referenzieren, und dann mit dieser Referenz können wir seine internen Methoden aufrufen, um sie zu validieren. Also, was können wir jetzt tun? Wir wissen, dass wir ref von react verwenden können. Also lasst es uns hier setzen. Lassen Sie uns es Form nennen, ref, und dann werden wir verwenden ref von react nennen. Dann werden wir dieses Formular ref an diese Formularkomponente übergeben. So rau wird Form, Atem und Hören sein. Der erste Schritt wird sein, wenn Form ref Punkt aktuelle Punktprüfung. Also diese Prüfmethode ist auf dieser Formularkomponente verfügbar, auf die wir direkt hier zugreifen , Also diese Überprüfung wird diese Daten validieren unseren Formularwert, das ist unser Zustand gegen das Schema, das wir hier definieren. Wenn also alles in Ordnung ist, wird es mit dem wahren Bullen Wert zurückkehren. Wenn nicht, wird es falsch sein. Wir werden also überprüfen, ob unsere Formularwertprüfung nicht bestanden hat. Wenn wir also einen falschen Wert haben, werden wir einfach von dieser Funktion als Rat zurückkehren. Wir werden unsere Datenbank mit dem neuen Raum aktualisieren. Lassen Sie uns also gießen, dass CET vor jeder asynchronen Aufgabe auf true geladen wird. Und hier werden wir ein neues Objekt erstellen, das wir in der Datenbank speichern werden. Sagen wir also neue Raumdaten. Es wird tatsächlich sein, ah, wo unser Staat Wert bildet. Aber auch wir werden eine andere Eigenschaft aufbringen, die erstellt werden wird, also hier werden wir alle Formwerte verbreiten, die wir haben, und dann werden wir erstellt und dann werden wir Feuerbasis von Firebase importieren und dann hier hat erstellt, bei wir werden Firebase Punkt Datenbank Punkt Serverwert Punkt Zeitstempel gießen. Jetzt haben wir die komplexen Neurondaten, die wir in der Datenbank speichern müssen. Lassen Sie uns also versuchen catch blawg vor einer asynchronen Aufgabe. Und für den Fall, dass es besser ist, werden wir eingießen. CET wird auf false geladen, und wir töten Alert-Punkt Bessere Fehlermeldung mit vier Sekunden. In Ordnung. Sieht gut aus. Jetzt werden wir warten Datenbank für Projekt von Firebase aufrufen. Dann werden wir Dr. Ralf für diesen Verweis setzen. Wir werden nur Räume angeben, so dass wir unsere Zimmer unter den Zimmern halten, Pfad innerhalb der Datenbank und zu schieben. Und Sie, sagen wir Wert zwei Datenbank, so dass der Schlüssel automatisch generiert wird. Wir werden Push-Methode nennen, also und in den Schulen wurden neue Raumdaten übergeben. Also, nachdem wir Daten in unserer Datenbank haben, lassen Sie uns setzen zwei Stürze laden und lassen Sie uns unseren Anfangszustand zurücksetzen. Also lassen Sie uns sat Formwert nennen. Es wird Anfangsform sein, und danach müssen wir sicherstellen, dass wir auch in der Nähe des Motel-Fensters. Also lasst uns auch Kleidung nennen. Und dann lassen Sie uns eine weitere Warnung mit Informationen und wir sagen Fremdwert. Lassen Sie mich hier Zitate aufstellen. Wir sagen Fremdwert-Punktname oder lassen Sie mich es vorher so nennen. So Formwert wird sein, werden wir sagen, wurde erstellt. Und dann wieder, vier Sekunden wie immer. Alles klar, also sieht es gut aus. Jetzt müssen wir tatsächlich verwenden ist das Laden und auf Formular senden. Wir werden es für diesen Button setzen, den wir hier anklicken und wir werden so weiterleiten . Und jetzt, um dies zu verwenden, ist der Ladezustand. Wir werden es für diese Schaltfläche verwenden. Wir werden es deaktiviert, wenn wir das Laden auf true gesetzt haben. Alles klar, es war eine Menge. Jetzt lassen Sie es uns wirklich testen. Also lassen Sie mich jetzt aktualisieren, nur um sicherzugehen. Lassen Sie mich eintreten. Hallo, dann werde ich etwas anderes setzen. Und hier, wenn ich es leer lasse, können Sie sehen, dass eine Beschreibung erforderlich ist. Das Formular wird tatsächlich in Echtzeit validiert. Das liegt daran, dass wir das Schema definiert haben. Alles klar, lass uns armen Hallo. Und lassen Sie uns die Beschreibung aus diesem Raum machen. Lassen Sie uns auf Erstellen neuen Chatraum und wir können sehen, dass Alarm ist keine Funktion. Okay, vielleicht lassen Sie es uns so bewegen wie diese Warnung. In Ordnung. Alert-Punkt-Fehler war das eigentliche Problem. Ich rief nur e r R, aber es ist Fehler. Das ist also meine Wette. Alles klar, jetzt versuchen wir es noch einmal. Erstellen Sie einen neuen Chatraum. Lassen Sie uns Hallo Beschreibung. Hey, drei neue Chatroom Erlaubnis heute Abend. Das ist in Ordnung, denn wir müssen auch Sicherheitsregeln für unsere Datenbank definieren. Also lassen Sie uns Regeln öffnen und hier werden wir unser nächstes Schema definieren. Also, die nächsten zwei Profile, lassen Sie uns das kopieren. Wir werden auch Zimmer und Zimmer portieren, die wir spezifizieren werden. Also für das Lesen und Schreiben für alles drin hier drüben, werden wir es nur zulassen, wenn der Benutzer authentifiziert ist. Stattdessen, wenn wir diese Überprüfung verwenden, werden wir sagen, dass Lese- und Schreibberechtigung nur erlaubt ist, wenn aus, nicht gleich jetzt und das gleiche, was wir für im Grunde alles hier tun werden, wir werden es hier setzen statt zukünftige Idee, werden wir haben, Sagen wir, Zimmer I d. Und dann auch zum Lesen. Wir werden den Autor beruhigen, nicht gleich Schnee und ab, nicht gleich jetzt. In Ordnung. Sieht gut aus. Lassen Sie es uns kopieren. Und lassen Sie uns es auch mit unserer lokalen Datei synchronisieren, die Datenbankregeln ist. Jason. Lass es uns retten. Und schauen wir uns mal an. Jetzt werden unsere Regeln veröffentlicht. Wenn ich jetzt auf Neuen Chatraum erstellen klicke, wurde hallo erstellt. Und wenn Sie in der Datenbank jetzt unter Räumen schauen, haben wir einen neuen Schlüssel, der automatisch von der Datenbank generiert wurde. Und dann haben wir unsere Daten bei Beschreibung und Name erstellt. In Ordnung. Sieht perfekt aus. Ich schätze, das ist der gute Zeitpunkt, um dieses Video zu beenden. Lassen Sie mich alles begehen. Und dann werden wir die Schaltfläche erstellen angeben, um neuen Chatraum zu erstellen. Oder vielleicht auf neue Schaltfläche unten, um neuen Chatraum zu erstellen. Alles klar, wir sehen uns in der nächsten. 115. Aufstellung von Chat-Räume Listen Teil 1 Teil: Hey, In diesem Video werden wir anfangen, Chatham List Inside Sidebar Hier unten zu erstellen. Lass uns gehen. Lassen Sie uns in Bardo GS in erster Linie hoffen. Und hier, gleich nach einer Kreatur auf Bt und Moto, werden wir Trennkomponente aus unserer Anzug und Innenblase vorbeibringen. Konversationstext beitreten Und auch, lassen Sie uns diesen Import nach oben verschieben, um eine ausgezeichnete Warnung zu vermeiden. Schauen wir es uns an. Sieht gut aus. Jetzt müssen wir tatsächlich Komponenten definieren. Also unter Komponenten-Ordner, lassen Sie uns einen neuen Ordner erstellen, den Menschen Räume hier benennen. Wir werden zwei neue Dateien Chatroom Liste Punkt GS und Raumartikel. Nicht Ja, also wird der Raumartikel mittlerweile leer sein. Und eigentlich gilt das gleiche für Chatroom Liste innerhalb der Seite Bardo Gs Hier unten. Anstelle dieses Textes, den wir als Platzhalter verwendet haben, lassen Sie uns Chatroom Liste verwenden. Alles klar, lassen Sie es uns retten. Werfen wir einen Blick. Wir können tatsächlich den Hello Text sehen, so dass es funktioniert. Perfekt. Lassen Sie uns nun den Markt definieren. Hoffen wir in Chatham List und hier werden wir genug Komponente aus unserem Anzug für die Requisiten setzen Aussehen Satel passieren. Dann wird es vertikal und umgekehrt sein. Und für Klassennamen, werden wir die nächste übergeben. Also müssen wir diese Komponente machen diese Elemente kriechen ein ble. Also werden wir Überlauf an Warum übergeben? Scroll-Zugriff. So werden wir die Bildlaufleiste immer sehen. Und wir werden auch den Zoll Crow passieren, um es zu stylen. Alles klar, und dann innerhalb der Blase vorbei genug Punkt Itim und dann Raumartikel wie das. In Ordnung, schauen wir uns mal an. Ok. Sieht perfekt aus. Wir können Brecheisen ergreifen, und wir können sehen, dass es ein wenig gestylt ist. Okay, gut. Lassen Sie uns nun unser Markup für Raumelement definieren. Also werden wir es in zwei Teile teilen. Dave ist innen oben, Teil und unten, Teil innen. Unteren Teil, wir werden unseren Text definieren. Also werden wir gesponnenes Element setzen, und wir werden noch keine Nachrichten für jetzt und für den Klassennamen setzen. Wir werden angeben, dass es wird angezeigt werden Flex ausrichten Elemente Center, und wir werden Text Black off anwenden 70% Kapazität. Ok. Für den oberen Teil, werden wir hier Raum Namen und wie viel Zeit vor? Die letzte Nachricht wurde veröffentlicht. Also lasst uns Klasse definieren. Nennen Sie den Displayflex aus, richten Sie dann den Inhalt zwischen zwei Anzeigenflächen zwischen unseren Elementen aus und richten Sie dann die Artikelmitte . Alles klar, also wird unser erstes Element im Alter von drei Titeln mit dem Zimmernamen drinnen sein. Also zuerst werden wir statischen Text definieren, und wenn wir die tatsächlichen dynamischen Werte haben, werden wir sie abwischen. Also für H drei, werden wir Text verschwindet angeben, um Überlauf zu verhindern. Und zweites Element wird eigentlich eine neue Komponente sein, die Leute installieren. Also für jetzt, lasst uns span setzen und lasst uns zuerst einen Blick auf den Browser werfen. Schauen wir es uns an. Wie es aussieht, sieht es gut aus. Aber statt dieses x X, werden wir die Zeit vor React verwenden, um eine relative Zeit wie diese zu zeigen, die vor fünf Minuten veröffentlicht wurde . zwei Stunden. Eines Tages gehen. Also lasst es uns installieren. Ich öffne Hunde und kopiere dieses Commened. Dann werde ich meine App stoppen und dieses Paket installiert. Lassen Sie uns warten und dann werden wir weitermachen. Okay, Paket wurde installiert. Lassen Sie uns den Start wieder starten und lassen Sie uns dieses Paket verwenden. Also aus der Dokumentation werde ich diesen Import kopieren. Dann werde ich in Zimmer Artikel importiert und lassen Sie uns die Firma selbst kopieren. Und lassen Sie es uns anstelle dieser Spanne platzieren, damit wir es nicht lokalisieren müssen. Dann benutzen wir jetzt ein neues Date. Stattdessen, außerhalb dieses Datums trinken, um nur die aktuelle Zeit anzuzeigen. In Ordnung, also lasst uns die App aktualisieren und schauen wir uns mal an. Okay, jetzt haben wir gerade jetzt perfekt. Und sie werden über diese Bibliothek denken, dass es diesen Timer aktualisieren wird, Sagen wir in Echtzeit, aber ich mag das Aussehen von diesem Text nicht. Also werde ich den Klassennamen vor einiger Zeit ändern, Komponente ein wenig. So wird es normal gebildet werden. Und auch Text schwarz. Sagen wir 45 Opazität. Werfen wir einen Blick jetzt. In Ordnung. Sieht viel besser aus. Okay, lass uns weitermachen. Und unsere letzte Überlegung hier wird es sein, diese Komponente tatsächlich zu machen, um diese Chatroom Liste volle Höhe zu machen. Also dafür müssen wir es berechnen, weil unser Chat eine ganze Seite ist. Also, wie können wir das tun? Wie können wir uns dem nähern? Wir wissen, dass unsere ganze Seite 100% ist. Wir können die Höhe vom oberen Teil aus der Seitenleiste bekommen, und dann können wir diesen oberen Teil von 100 subtrahieren, dann werden wir die Resthöhe kennen lernen, die unsere Chat-Room-Liste ist. Lass uns gehen. Also lasst uns nicht großes Alter Bardoczky s schieben Und unser oberster Teil ist dieses Def Element. Um die tatsächliche Höhe davon zu bekommen, def, müssen wir Referenzen verwenden. Also lassen Sie uns eine neue Referenz erstellen, die wir topside, Bar Arraf nennen und wir werden ref Hook verwenden. Dann werden wir diesen Topside bereft übergeben, um diesen Def Atem topside by ref zu sein , und wir werden Höhe zur Verfügung stellen, damit wir den Überblick behalten werden. Also lassen Sie uns Ihre Bühne definieren, die Höhe benennen und für jetzt fest saß, standardmäßig wird es so sein, jetzt oder 20 es ist eigentlich egal innerhalb Gebrauch Effekt. Wir werden die tatsächliche Höhe von diesem Def bekommen und dann gesagt, es zu sagen. Also lassen Sie uns verwenden Effekt. Und in diesem Verwendungseffekt, lasst uns den nächsten fragen. Also, wenn wir Topside by Ref Punktstrom haben, weil es in einigen Momenten undefiniert sein kann, also werden wir überprüfen, ob es tatsächlich definiert ist, dann werden wir die Höhe von Ralf nach oben setzen, nicht die aktuelle Punkt-Scroll-Höhe. Also, wenn wir versuchen, auf die obere Seite ohne Strom zuzugreifen, ist es, als ob wir versuchen, auf Element zuzugreifen, wenn wir es mit Dokument erhalten. Get Element von i t. So ist es in einigen Fällen wie diesem sehr nützlich. Wir wollen auch diese Effekt-Callback-Funktion ausführen, wenn unsere oben waren. Balken F ändert sich. Ordnung, jetzt lassen Sie uns diesen Zustand diese Höhe an Chatham-Liste übergeben, damit wir die tatsächliche Höhe berechnen können . Also lassen Sie uns über Elementhöhe als Höhe passieren und innerhalb Jet Room Liste d Struktur über Elementhöhe und dann, was wir tun werden. Wir werden Stil im Lyons-Stil anwenden, der Höhe sein wird, unheilbar, unheilbar, CSS Berechnungsfunktion verwenden. Also lasst uns Schweinefleisch alc. Dann werden wir 100% Alter minus über Element über Elementhöhe verwenden und am Ende werden wir Pixel setzen, weil diese Höhe in Pixel beruhigt. Jetzt schauen wir uns mal an. Wenn die App aktualisiert wird, passiert tatsächlich nichts. Das ist, weil wir nicht Kaskade waren volle Seitenhöhe. Also, was passiert, dass im Haus zwielig hier ist? Wer sagte h 100 auf Lee zu der großen Komponente, aber es für eine verschachtelte Komponenten als auch zu arbeiten. Wir müssen die Höhe 104 alle Kinder für alle verschachtelten Komponenten einstellen. Also für Zeile, wir werden Alter angeben 100 und für Spalte wird das gleiche jetzt tun. Innerhalb des Seitendrahtes wenden wir bereits H 100 auf ihr Erziehungselement an, so dass es funktioniert. Werfen wir nun einen Blick und lassen Sie uns die Komponente untersuchen. Wie Sie sehen können, haben wir bereits volle Höhe und es wird automatisch berechnet und wir werden keinen Überlauf haben . Es passt immer auf die volle Seitenhöhe. Wenn wir also dieses Element inspizieren, können wir sehen, dass die Höhe automatisch für uns berechnet wird. Also haben wir 138 Pixel, die Höhe vom oberen Teil entfernt ist. Aus der Seitenleiste. Alles klar, also sieht es schön aus. Und ich denke, das ist es für dieses Video und das nächste werden wir weitermachen. Also lassen Sie uns alles auf den Bühnenzustand hinzufügen und lassen Sie uns Commit begonnen, mit der Chatraum-Liste zu arbeiten . Wir sehen uns im nächsten 116. Chat von Räume – Teil 2-: Hey, da. In diesem Video werden wir weiter an Chatham List arbeiten. Letztes Mal haben wir Mark up definiert. Dieses Mal werden wir den Staat erstellen und verwalten. Gehen wir, bevor wir in den Code kommen. Ich möchte definieren, wie wir auf diesen Zustand zugreifen werden. Also Chatrooms. Es ist etwas Schulden, die wir global innerhalb der Homepage zugreifen werden. Also werden wir Kontext a p I verwenden, um es von innerhalb der Sidebar-Komponente zugreifen zu können, sondern auch aus dem Chat-Fenster, das wir noch nicht erstellt haben. Lassen Sie uns zu Kontakte-Ordner navigieren und hier lassen Sie uns Ihre Dateiräume Kontext erstellen. Die G s. Hier werden wir neue kontext-undateable dame rooms Kontext mit erstellen kontext-Funktion , die von react kommt zu schaffen. Dann müssen wir eine Komponente definieren, einen Anbieter, der allen seinen Kindern den Kontext zur Verfügung stellt. Lassen Sie uns also const rooms Provider als Argument exportieren. Es wird Kinder erhalten und es wird Räume Kontext Punkt Anbieter zurückgeben, und wir werden Kinder in als Wert setzen. Für jetzt, lasst uns einfach eine Schnur setzen. Und wenn wir sie auf dieser Komponente haben, heißt es, reagieren muss im Umfang sein. Also lassen Sie uns importieren reagieren von reagieren. In Ordnung. Gut. Jetzt definieren wir den Zustand. Es wird also einfach sein. Deshalb können wir den Zustand verwenden. Also lassen Sie uns standardmäßig Räume und Sat-Räume definieren. Es wird auf mounten gesetzt, und wir werden unsere Daten innerhalb der Nutzung Effekt erhalten, wenn Komponente mounts. Also lassen Sie uns für die Verwendung Effekt und innen zuerst, werden wir unseren Verweis auf die Datenwege speichern. Also, wenn wir Datenbank öffnen, erinnern wir uns, dass wir unsere Daten unter Räumen speichern, Schrägstrich Raum I d. Und dann geht Daten. Also, was wir tun werden, werden wir einen Echtzeit-Zuhörer auf Räume setzen, damit wir Echtzeit-Updates erhalten können. Lassen Sie uns erstellen Sie wertvoll, dass wir Raum-Liste rau nennen und es wird Datenbank dot ref Zimmer sein. Also, jetzt haben wir die Referenz. Dann werden wir einen Echtzeit-Listener mit Punkt auf Methode setzen. Also rufen wir die Raumliste an. Ralf dachte an Wert und dann für den Callback. Wie für jetzt, erhält es Snap Shirt. jetzt angeht, werden wir Konsul schauen, Snapshot-Punkt-Wert richtig. Und weil es ein Echtzeit-Listener ist, müssen wir es abbestellen, weil es sich um ein Abonnement handelt. Also werden wir dies innerhalb der Bereinigungsfunktion tun. Off Use-Effekt hier. Wir werden Raum-Liste rauen Punkt Off setzen, es wird alle Echtzeit-Listener von dieser Referenz innerhalb der Datenbank trennen . Alles klar, lassen Sie es uns retten. Und lassen Sie uns diesen Kontext tatsächlich verwenden. Gehen wir zur Startseite. Und hier werden wir alles um Zimmer Anbieter wickeln. Okay, sagen wir mit und schauen wir uns mal an. Wenn ich zur Konsole gehe, kann ich sehen, dass ich einen Snapshot-Wert habe , der ein Objekt ist, bei dem jeder Schlüssel Raumidee ist und dann Daten weitergibt. Also haben wir diesen Vorarbeiter, weil wir Jason-basierte Datenbank haben. Aber das sind nicht gerade die vier Monate, mit denen wir zusammenarbeiten wollten. Wir brauchen einen Atemweg. Lassen Sie uns also eine Hilfsfunktion erstellen, die diesen Objekttyp in ein Array umwandelt. Also werden wir eine neue Funktion in Helfern togs definieren, die wir benennen werden. Lassen Sie uns eine Transformation zwei Array mit I d. Es wird Snapshot-Wert als Argument erhalten und es wird zurückkehren. Als nächstes wird zuerst überprüft, ob der Snapshot-Wert vorhanden ist. Wenn unsere Daten nicht jetzt, wenn wir irgendwelche Daten haben. Also, wenn das der Fall ist, dann werden wir die Logik setzen. Sonst werden wir zurückkehren und leer. Richtig. Also, was wird unsere Strategie sein? Wir werden Objekt die Kuss-Methode nennen, um alle Raumideen in ein Array zu gießen. Und dann werden wir jeden Wert, jeden Raum, den ich habe, diesen Daten zuordnen . Lass uns gehen. Lassen Sie uns also Objektpunktschlüssel vom Snapshot-Wert setzen, um alle Kinder als Array zu erhalten. Dann werden wir jeden Wert aus diesem Bereich, in dem jedes Element Raum I d ist, einem Objekt zuordnen , das alle Daten aus unserem Raum sein wird. Wir können es mit Snapshot-Wert aus Raum I D zugreifen und dann werden wir eine andere Eigenschaft anhängen , die Raum I dseinwird. , sein mit Snapshot-Punktwert, lassen Sie uns tatsächlich transformieren es weniger große neue wertvolle Daten hier. Wir werden Transformation zu Array mit i d setzen und wir werden Snapshot-Punkt-Wert-Einsicht übergeben. In Ordnung. Und lasst uns später konsularische CTA sehen, was wir tatsächlich erhalten. Nun, Wie ich sehen kann, habe ich ein Array von Räumen und ich habe Daten und auch ich habe ich d als Eigenschaft. Alles klar, das ist es, was ich will. Nun, lassen Sie uns tatsächlich den Zustand aktualisieren. Rufen wir Setrooms an und legen Daten hinein. Und dann lassen Sie uns diesen Zustand an den Kontext übergeben, als unser Wert, dessen Räume sind. Alles klar, das ist es vorerst. Ich denke, im nächsten Video werden wir das beenden und wir werden unsere Zimmer aus der Datenbank anzeigen. Aber für jetzt, lassen Sie uns dieses Video beenden, indem wir unsere Änderungen begehen. Holen Sie Commits Bindestrich M und für Nachrichtenbericht erstellt Räume Kontext. Okay, wir sehen uns in der nächsten. 117. Chat - Räume zeigen und sie als Links (Teil 3) verwenden: Hey, da. In diesem Video werden wir Chatrooms anzeigen, die wir in der Datenbank speichern, indem wir das Markup und den Kontext verwenden, den wir in den vorherigen Videos erstellt haben. Lass uns gehen, öffnen wir unseren Code. Und hier lassen Sie uns Chatraum Liste Komponente öffnen. Hier konsumieren die Menschen unseren Kontext. Und wieder wie zuvor, anstatt Cues-Kontext zu verwenden und dann den Kontext durch Importieren der Datei zu spezifizieren, werden wir einen Helfer-Haken in Räumen, Kontakten erstellen . Lassen Sie uns exportieren. Const. Wird es benennen. Verwenden Sie Räume, und es wird eine Funktion sein, die uns den Wert der Kontakte zurückgibt. Also lasst uns setzen, um Kontext zu verwenden und Räume zu beruhigen Kontext. Auf diese Weise vermeiden wir den Aufruf von Cues Kontext mit Räumen, Kontext jedes Mal, aber Räume verwenden. In Ordnung, also in zerschmetternden Listenkomponenten. Lassen Sie uns diesen Gebrauch Räume Haken nennen und jetzt erhalten wir den Kontextwert. Nun ist die Sache, dass diese Räume zu der Zeit null sein könnten, wenn wir versuchen, darauf zuzugreifen, weil unser Anfangszustand langweilig ist und nur wenn die Komponente eingehängt wird, erhalten wir die tatsächlichen Daten. Also müssen wir bedingten Lauf setzen, trinken und es hier drinnen überprüfen. Genug. Lassen Sie uns sagen, wenn wir keine Zimmer haben. Dann zeigen wir die Lauder-Komponente, die aus unserem Anzug kommt. Es wird zentriert sein, und es wird zentriert sein. Vertical E. Außerdem wird es Inhalt haben, was heißt, laden und es wird eine niedrige Geschwindigkeit haben. In Ordnung. Und lassen Sie uns auch Größe auf mittlere Größe angeben. Alles klar, Zitat. Nun lassen Sie uns das zweite bedingte Rendering anzeigen, um tatsächlich Daten anzuzeigen, die wir jedes Array-Element abbilden werden, das sind Räume, die wir mit Transformation transformieren, um mit I d zu einem j 6-Element zu gelangen. Also lassen Sie uns fragen, ob wir Zimmer und Zimmer dot Land ist größer als Null Onley. Dann rufen wir Raum an, Startkarte drinnen, wir haben wenig meinen Tim und wir haben eine Karte. Dieses Zimmer verführe ich, Artikel Komponente so zu lieben. Und vergessen Sie nicht, wenn wir diese Punktkarte verwendet haben, müssen wir die Schlüsselstütze angeben. Also lasst uns Raum dunkel machen. Und dann werden wir das ganze Raumobjekt als Zimmer übergeben, Eigentum an Zimmergegenstand wie dieses. Und dann werden wir das ganze Raumobjekt als Zimmer übergeben, In Ordnung. Sieht gut aus. Jetzt öffnen wir den Raumpunkt hier, werden wir Chur oder Eigentum zerstören, und innerhalb der Komponente werden wir wieder unser Gleichgewicht bekommen, indem wir dieses Mal das Raumobjekt strukturieren. So werden wir an erstellt haben und auch wir werden Raumnamen haben. Also statt dieser statischen besteuert, werden wir Raumnamen anzeigen, die wir D Struktur und auch vor vier Mal Komponente. Wenn wir keine Nachrichten haben, werden wir die Zeit anzeigen, wenn dieser Raum erstellt wurde. Also lassen Sie uns einfach passieren Neues Datum überhaupt erstellt, Lassen Sie uns speichern und werfen Sie einen Blick. Perfekt. Jetzt können wir sehen, dass Zimmer vor einem Tag erstellt wurde und Zimmername ist Hallo, Vielleicht wollen wir versuchen, ein weiteres Zimmer zu schaffen. Also lasst uns auf unser Moto klicken. Lassen Sie uns passieren, wenn ich Roll Name und was auch immer Bericht für die Beschreibung kannte. Wenn Sie darauf klicken, können wir sehen, dass die Daten in Echtzeit aktualisiert werden, so dass alles perfekt funktioniert. jedoch Ich möchte diese Komponentejedochauch in einen Link verwandeln. Also, wenn wir darauf klicken, gehen wir tatsächlich zur Chat-Seite. In Ordnung, also können wir zurück zum Code navigieren und gehen wir hier zur Chat-Room-Liste für diesen Schnupftabak-Artikel. Zuerst. Denken Sie, ich möchte das tun, ich möchte die Komponentenklasse angeben, damit es dieses genug Element mit diesem bereitgestellten Element für eine kompetente Klasse rendert . Es wird verknüpft Komponente, die von Reaktor Router stumm für diese Link-Komponente kommt , werden wir seine Eigenschaft zu befrieden, was auch ist. Also lasst uns zwei setzen. Und lassen Sie uns String-Interpolation verwenden, um anzugeben, welchen Pfad es geben wird, wenn wir darauf klicken. Also wird es Chats Schrägstrich Raum I d. Also lassen Sie uns String contar Population öffnen und lassen Sie uns Raum Idee setzen. Alles klar, cool. Schauen wir es uns an. Jetzt. Wenn ich darauf klicke, können Sie sehen, dass sich der Ural ändert und wir tatsächlich die Funktionalität haben. Aber ich möchte diesen Artikel auch aktiv machen, wenn wir den richtigen Pfad haben, der dem Link entspricht . Also, was wir nach wie vor mit der Abendkasse tun müssen, müssen wir unseren aktuellen Standort bekommen. Also lassen Sie uns verwenden Location Hook, der von React Router Down-Paket kommt. Jetzt für diesen Schnupftabak, wir eine weitere Eigenschaft übergeben, die aktiv Schlüssel sein wird, so dass der aktive Schlüssel Ort sein wird, nicht Pfadname. Dann müssen wir beruhigen oder, sagen wir, jeden Liebesgegenstand mit seiner Strömung verbinden. Lasst uns einen Schlüssel. Dafür müssen wir eine weitere Eigenschaft übergeben, die Ereignisschlüssel sein wird. Und es muss dem aktiven Schlüssel entsprechen, der Position Punkt Pfadname ist. Also wird es Schrägstrich Chats sein, Schrägstrich Raum I d. Also für Ereignisschlüssel, werden wir genau das gleiche wie für Eigenschaft angeben. Und jetzt wird es funktionieren. Schauen wir es uns an. Und gerade jetzt, wenn unser Standort übereinstimmt, haben wir die coole Animation und wir haben den aktiven Schlüssel. So funktioniert es perfekt. Aber ich möchte eins ändern. Denken Sie anstelle von Chats, ich möchte einfach so chatten. In Ordnung, schauen wir uns noch einmal an. Wenn ich zur Chat-Seite wechseln, habe ich dieses Element aktiv. In Ordnung. Gut. Das ist es also. Lassen Sie uns unser Video beenden. Lassen Sie uns alles in den Bühnenzustand versetzen, und dann rufen wir uns an, erhalten Sie Commit mit den angezeigten Chatrooms. Alles klar, cool. Das ist es für dieses Video. nächste Mal werden wir unseren richtigen Teil von der Website zu bauen und wir werden anfangen, Chat-Fenster zu bauen. Wir sehen uns dort 118. Erstellen von Nested Layout für die Homepage: Hey, In diesem Video werden wir Lee unsere für die Homepage erstellen. Also für jetzt haben wir bereits den linken Teil gebaut, welche eine Sidebar? Moment werden wir unseren richtigen Teil definieren, und wir werden sehen, wie sie ein reaktionsfähiges Let's Go spielen werden. Also lasst uns zu Hause togs Datei öffnen. Und hier werden wir ein Nest haben, eine Dürre. Also, wenn wir auf einen Chatraum klicken, können wir sehen, dass wir zu Chat-Schrägstrich Raum i d gehen. Dafür müssen wir eine säurevolle heraus erstellen, weil wir es auf der Homepage zeigen werden. Also, was ich vorgeschlagen habe, dio hier statt nur eine Datei direkt zu verwenden, lassen Sie uns erstellen, um nicht den Ordner zu Hause. Und hier werden wir alle Nestor Dürren setzen und die DGS wird in Index-Togs sein . Also lassen Sie uns einen neuen Ordner zu Hause erstellen, in dem wir nach Hause setzen, als wir ihn in Index Punkt gs umbenennen werden . Und hier ist unser Nest die Dürre wird Chat-Seite sein. Also lasst uns eine neue Datei erstellen, die wir Chat Doggy s nennen werden , und im Moment wird sie leer sein. Solicititous Port. Hallo? Ordnung, also innerhalb dieses Index Wenn wir es speichern, lassen Sie uns aktualisieren Das Verzeichnis kann nicht geöffnet werden. In Ordnung, vielleicht lasst uns die App neu starten und es wird funktionieren. Lassen Sie mich erfrischen. Alles klar, jetzt scheint es gut zu sein. Gut. Lasst uns weitermachen. Also wird unser erster Schritt definiert werden. Ah, wo? Nestor Dürre. Also hier, neben dieser Spalte, lassen Sie uns switch-Anweisung definieren und hier werden wir die Chat-Route und die Sidebar gießen Es wird beibehalten, weil es unser Layout ist. Also in diesem, was wir ausgießen und weil unsere Homepage bereits privat ist, brauchen wir keine Nest-Dürren zu gießen. Auch private Routen. Wir können sie als öffentlich benutzen, weil unsere Eltern privat sind. Das bedeutet, dass diese bereits geschützt sind. So wird es genau Route sein und Pfad wird Schrägstrich Tschad Schrägstrich Chat I d, um dem Gitter zu folgen. Wir müssen hier auch eine Säule setzen. Also lassen Sie uns Spalte setzen und innen werden wir Chat gießen und lassen Sie uns auch aus diesem Ordner importiert . Also lassen Sie mich den Chat angeben und wir werden Chat benutzen. Alles klar, jetzt sieht es gut aus. Lassen Sie uns definieren, wie Maney Spalten die Chat-Seite nehmen wird. Auf kleinen Geräten dauert es also alle 24 Spalten und auf mittleren Geräten. Wir werden den Rest abnehmen, damit es 16 sein wird und dann wird Klasse Name auch eine Kirche 100 sein. Jetzt schauen wir uns mal an und schauen wir mal. In Ordnung, haben wir Hallo, lassen Sie uns untersuchen und versuchen, Eis zu rece. In Ordnung, also sehen wir, dass, wenn wir auf kleinen Geräten sind, wir das haben, sagen wir, von oben nach unten, Lee raus. Das ist nicht das, was wir wollen. Wir wollen dieses Hallo auf kleinen Geräten ausblenden und weil wir das nicht nur verstecken müssen, wollen wir auch sicherstellen, dass wir, wenn wir in den Chatraum gehen, die Navigationsleiste nicht sehen. Die Seitenleiste. Deshalb müssen wir eine Art von ah, sagen wir, komplizierten Zustand. Also zuerst müssen wir unseren Bruchpunkt definieren, wenn wir auf dem Desktop sind, und das ist, wenn wir 992 Pixel haben. Also zuerst lassen Sie uns definieren ist Desktop, und es wird das Ergebnis aus Verwendung Media-Abfragehook sein, die wir früher definiert haben. Und hier werden wir fragen, ob Männer mit IHS 992 Pixeln, richtig? Also in diesem Fall werden wir Desktop haben. Außerdem müssen wir unsere zweite Bedingung nehmen, wenn wir genau auf der Startseite sind, damit wir Sidebar auf kleinen Geräten anzeigen können , nicht auf der Chat-Seite, so dass sie ausgeblendet wird. Also lassen Sie uns definieren, ist genau so. Lassen Sie uns es von der Verwendung zerstören, nicht verwenden. Media Query verwendet Route viel. Es ist ein weiterer Haken, der vom React-Router kommt, das gleiche wie Verwendungsort. Aber dieser Koch gibt uns, sagen wir, denkt im Zusammenhang mit unserer aktuellen Route und Dürre Spiel. Also eine dieser Requisiten ist genau und es wird sagen, ob wir derzeit auf dieser definierten Route sind , die Homepage ist. Also, wann immer wir auf nur Schrägstrich wird es uns geben ist genau gleich der Wahrheit. In Ordnung, also lassen Sie uns jetzt unseren Zustand definieren. Also lassen Sie uns schlecht Sidebar rendern und wir werden fragen, ob es Desktop ist, wenn es genau auf Lee übergeben wird, dann werden wir in der Lage sein, Sidebar zu rendern. Also, jetzt hier, lassen Sie uns die nächste Logik gießen. Also, wenn wir Sidebar rendern können, dann werden wir diese Spalte setzen und jetzt müssen wir auch definieren, Nehmen wir an, eine vier vier Stunden oder wenn jemand öffnet eine kaputte Chat-Seite, wir können es leer leben und es wird in Ordnung sein. Aber machen wir es schick und ziehen wir hier und hier rüber. Wir werden fragen, ob es nur Desktop ist. Dann wollen wir Spalte zeigen, und es wird,denke ich, die gleiche Lee aus wie hier haben denke ich, . Also lassen Sie es uns einfach kopieren. Und drinnen ziehen wir es. Nehmen wir an, nur Text, der sagt Bitte wählen Sie Chat und Klassenname wird besteuert werden Mitte und Rand oben Fage Rechte. Jetzt schauen wir uns mal an. Also, wenn jetzt sind wir auf Schrägschatten weniger Raum I d. Wir können nur Geschwätz auf Seite sehen. Wenn ich dies entferne und zur Startseite navigiere, kann ich nur Seitenleiste sehen, so dass es gut aussieht. Wenn ich die Größe ändere, kann ich beide sehen, damit ich meinen Chatraum sehen kann, aber stattdessen aus dem eigentlichen Chat. Wann immer es nicht ausgewählt ist, kann ich sehen, Polizei Auswahl auf voller Rücken für heraus geschossen, so funktioniert es wie 404 und wenn ich einen der Chats auswähle, kann ich das eigentliche Chat-Fenster sehen. Ich schätze, das ist es für dieses Video. Nächstes Mal werden wir weitermachen. Aber jetzt lassen Sie uns einfach unsere Änderungen begehen. Lassen Sie uns sagen, Holen Sie sich alles. Holen Sie sich Commit und lassen Sie uns sagen, dass wir unsere für Homepage erstellt und Shat-Seite für rechts erstellt haben. Ehrfürchtig. Wir sehen uns im nächsten. 119. Layout/Komponente: Hey da, in diesem Video, werden wir Lee für Chattering Seite erstellen, die wir auf der rechten Seite sehen können statt dieser . Hallo? Lasst uns gehen. Gehen wir zurück zum Dekodieren. Und hier unter Komponenten-Ordner, lassen Sie uns grüßen und Ihren Ordner und dass wir Shatt Fenster innerhalb nennen. Wir werden drei neue weitere Ordner erstellen und jeder wird jeden Teil dieser Seite darstellen . Also werden wir erste Folder wird Nachrichten sein. Dann gießen wir oben und unten so, einen inneren Blasenplatz, alle entsprechenden Komponenten. Also im Inneren unten, lassen Sie uns Index Togs setzen und es wird für jetzt leer sein, als das gleiche, was wir für den Rest tun werden. Also hier werden wir Index-Togs setzen, aber ein Name, der es meldet, dass wir Nachrichten hineinlegen werden, Speichern wir es und schließen. Und unsere neueste Komponente wird dieser Vortrag sein. Lassen Sie uns also einen weiteren Index-Togs erstellen. Und lassen Sie uns die Spitze mit der obersten Text-Einsicht setzen. In Ordnung, speichern wir es und navigieren wir zur Chat-Seite. Also hier, in diesem Def, lassen Sie uns ein anderes def gießen. Das wird ein Rapper für Chat Top sein, und wir werden es nur in einer Sekunde importieren. Dann gießen wir noch einen Dave ein. Und im Inneren werden wir Nachrichten und dasselbe setzen. Wir werden für Tschad unten, alle Rechte und für jeden dieser Daves beantragen . Wenn wir öffnen Haupttochter ein CSS. Hier haben wir Klassen Diagramm oben, Tschad unten und Schuss Mitte. Also lassen Sie uns sie für Top-Level Porter Chat Top vier Nachrichten verwenden. Wir werden einen Kumpel in die Mitte setzen und für aber, ähm, wir werden den Klassennamen Chad unten setzen. Alles klar, jetzt importieren wir diese Komponenten. Also zuerst, lasst uns Chat importieren. Tell up von Lassen Sie uns navigieren zwei Komponenten, Chat-Fenster und oben. Dann werde ich drei Mal kopieren. Dann werde ich unten und Nachrichten verwenden, und dann werde ich sie durch den Chat unten und Nachrichten ersetzen. Alles klar, sieht gut aus. Werfen wir einen Blick. Also, jetzt, wenn mit einem frischen wir sehen können, haben wir Top-Nachrichten und unten und lassen Sie uns diese Verpackung entfernen, def. Und schauen wir uns noch einmal an. Jetzt haben wir Top-Nachrichten und unten ganz unten. Alles klar, gut. Nun lassen Sie uns unsere anfängliche Logik für Chatroom Seite definieren. Also zunächst einmal, lasst uns diese Chad I D. Von unseren Perimetern greifen , wie Sie innerhalb der Homepage mit befriedigt es als nur Chat I d erinnern. Also lasst uns von Verwendung Programme Haken greifen, die wir mit React Rotor-Paket verwenden können. Und dann können wir alle unsere Zimmer, die wir im Kontext haben, wie Sie sich erinnern. Also lassen Sie uns verwenden Räume Haken, die wir früher erstellt haben. Und jetzt lassen Sie uns tatsächlich unsere aktuellen Raumdaten abrufen. Also, was müssen wir tun? Zunächst einmal müssen wir gegen dieses Zimmer überprüfen, weil es standardmäßig nicht sein kann, wie Sie sich erinnern. Also lasst uns fragen, ob Zimmer nicht existieren oder ob dieser Wert jetzt ist, dann werden wir die Rechtsordnung Komponente gießen, die aus unserem Anzug kommt. Und wieder wird es vertikal wie zuvor zentriert sein. Es wird mittlere Größe haben. Es wird Inhalt geladen und die Geschwindigkeit wird langsam sein. In Ordnung. Unser nächster Schritt ist, unser aktuelles Zimmer von diesem Zimmer zu bekommen, ist ein Preis. Also lassen Sie uns Port const Aktuelle Zimmer wird Zimmer dot finden wir Zimmer Artikel bekommen. Dann werden wir von i d Equals Chat fragen. Ich d. in Ordnung. Und dann am Ende, wenn wir kein aktuelles Zimmer haben. Also, wenn wir ein zufällig Ihr l setzen, das nicht innerhalb dieses Raums Array existiert, dann werden wir H sechs Element mit dem Klassennamen, Textmitte und Rand oben Seite zurückgeben . Das wird sagen, Tschad, ich habe nicht gefunden. In Ordnung. Sieht gut aus. Lasst uns das entfernen, Lauder. Lassen Sie uns diesen Import nach oben verschieben. Lasst uns retten. Werfen wir einen Blick. So verkohlt, Dieser nicht gefunden. Alles klar, ich bin hier gelaufen. Lassen Sie mich die Negation davor stellen. Also, jetzt wird es funktionieren. In Ordnung, also haben wir Nachrichten unten gesprochen. Und wenn wir einen Zufallsschrumpfen hier drüben setzen, aber wir werden erschossen, nicht gefunden. Ok, perfekt. Also das ist es für dieses Video im nächsten Video, Ich möchte über Kontextprobleme sprechen und warum es eine schlechte Idee ist, direkt nutzen Räume, Haken. Lassen Sie uns unsere Änderungen begehen und das beenden. Also lassen Sie uns bei allem, was Sie System bekommen, dass wir unsere Nachricht begehen und wir werden sagen erstellt Klay, unsere vier verkohlte Seite. Alles klar, gut. Wir sehen uns im nächsten. 120. Problem Context und eine Potential Lösung: hallo Kontext. AP ist erstaunlich, nicht wahr? Aber immer mit jedem guten Werkzeug gibt es auch eine negative Seite. Das Problem mit dem Kontext ist, dass wir einen Teil seines Wertes auswählen können. Wir können einen Selektor aus diesem Grund nicht definieren. Immer wenn der Kontext mit dem Use contacts Hook verbraucht wird, selbst wenn der Wert nicht verwendet wird und er sich ändert, wird die Komponente gerendert. Stellen Sie sich den Kontext vor, der weitergibt und Objekt mit der nächsten Struktur. In einer Komponente, in der Titel angezeigt wird, möchten wir nur die Titelsteuer erhalten, richtig, damit wir Ihren Titeltext vom Kontextwert zerstören können und es scheint in Ordnung. jedoch Für den Kontext spielt esjedochkeine Rolle, ob es sich um Destruktor handelt oder Sie versuchen, Elemente teilweise auszuwählen. Es gibt Ihnen immer den gesamten Kontextwert von nun an, da Titelkomponente den Wert erhält, wenn sich irgendetwas in unserem Objekt ändert. Zum Beispiel, Suche setzen, wird die Titelkomponente zu rendern, und das ist schlecht. Um dies zu lösen, können wir den Kontext tatsächlich in zwei separate Kontextanbieter einen pro Objektschlüssel aufteilen. Auf diese Weise teilen wir Verantwortlichkeiten und machen nicht ausgelöst werden, weil wir nur das verbrauchen was wir innerhalb einer Provider-Komponente benötigen, waren nicht auf Sie beschränkt. Nur ein Kontext kann mehrere Kontexte unter einem Provider kombinieren. Es ist sehr nützlich, wenn wir die Kontakte passieren, zum Beispiel das Ergebnis des Nutzungsstatus, des Zustands und seiner Update-Funktion für sie. Das sind zwei separate Kontexte, die unter einem Provider gruppiert sind. Also, jetzt, wenn wir innerhalb einer Komponente konsumieren Kontext, der die Update-Funktionskomponente bereitstellt, wird nicht gerendert werden. Wenn sich dieser Zustand ändert, wird er nur gerendert, wenn der tatsächliche Wert aus konsumierten Kontext geändert wird, was die Update-Funktion ist. In diesem Fall funktioniert dies in den meisten Fällen. jedoch Situationen, Es gibtjedoch Situationen,in denen wir ein großes Objekt durch den Kontext übergeben möchten, und das Erstellen eines neuen Kontexts für jeden Schlüssel wird ein Overkill sein. Für diese Situationen. Es gibt einen Paketkontextselektor, der uns Funktionalität bietet, um den Wert aus dem Kontext teilweise auszuwählen . Es kommt mit den wenigen Einschränkungen, aber wenn es mit Bedacht verwendet wird, können Renderer überhaupt vermieden werden. Nur um darauf hinzuweisen, dass all das rücksichtsvoll ist, wenn man Creed Enten anstelle von Kontext ein P I verwendet. Für das Staatsmanagement jedoch hat Redox jedocheine Lernkurve und bringt mehr Komplexität, abhängig von der -App. Du brauchst es wahrscheinlich nicht. Deshalb verwenden wir Kontext. A p i im nächsten Video werden wir verwenden Kontext-Selektor installieren und wir werden sehen, wie es uns helfen kann, Sie zu sehen, dass 121. Context in Praxis – Erstellung des aktuellen Room: hi in diesem Medium wird Kontext für den aktuell geöffneten Chatraum mit Cues Context Lecter Paket erstellen . Bevor wir beginnen, lasst uns untersuchen, wie alles gehandhabt wird. Im Moment gibt es Räume Kontext, der die gesamte Homepage raubt. Kontextdaten sind Chatroom Liste mit Echtzeit-Abonnement. Es bedeutet, dass, wenn sich irgendetwas in einem außerhalb des Raums Kontext ändert, Wert innerhalb der Schatten-GS-Räume aktualisiert wird. Kontext wird verbraucht. Jede Aktualisierung eines Zimmers wird also zu einer Kapitulation führen. Zwei aktuell geöffnete Chat-Seite, auch wenn das AB-Datum nicht damit zusammenhängt. Daher innerhalb von Chad Ogea s einen werden wir innerhalb von Chad Ogea s einenneuen Kontext zur Verfügung stellen, den wir den aktuellen Raumkontext benennen und wir werden derzeit offene Raumdaten für diese Kontexte übergeben . Wir verwenden Kontextselektor. Stellen Sie sich eine Situation vor, wenn der Name des aktuell geöffneten Raums aktualisiert wird. Es wird eine Übergabe für derzeit offenen Raum schaffen und Werte, die wir an den aktuellen Raumkontext übergeben werden , werden ebenfalls vermieden. Es gibt eine Komponente, die den aktuellen Raumkontext verbraucht und nur die Beschreibung und nicht den Namen anzeigt , da diese Komponente nicht gerendert wird. Änderungen wirken sich auf Lee auf die Komponente aus, die den Namen anzeigt. Okay, lassen Sie uns alles in die Praxis umsetzen. Ich habe bereits offizielle fröhliche Webseite für die Verwendung des Kontext-Selektor-Pakets geöffnet und wenn ich vom Installationsteil nach unten scrollen, kann ich sehen, dass ich diesen Befehl kopieren muss. Also lasst es uns tun. Gehen wir zurück zum Code und innerhalb des integrierten Terminals werde ich es ausführen und warten, bis es installiert ist. Perfektionieren Sie die Pakete dort. Lassen Sie uns nun die App ausführen und gehen Sie nicht zurück zur Dokumentation. Aus dem Verwendungsteil können wir sehen, dass es sich tatsächlich nicht von der Art unterscheidet, wie wir normalen Erstellen Kontext verwenden. So können wir zurück zum Code navigieren. Und hier in ihrem Kontext, Ordner weniger große neue Datei, die wir aktuellen Raumkontext nennen. Zwielig. Ja, hier. Wir werden aktuellen Raumkontext schaffen und wir werden erstellen Kontext verwenden, den, der von nicht von reagieren kommt. Lassen Sie uns Teoh ein sechs mo Juwel und von der Verwendung Kontext-Selektor umgewandelt. Alles klar , der nächste Teil wird sein, die Provider-Komponente zu erstellen. Also lassen Sie uns setzen Export const aktuellen Zimmeranbieter, so dass es Kinder erhalten und dann auch wird es Daten erhalten, so dass es einige Daten tragen wird, die wir an diesen Anbieter übergeben werden. Also hier werden wir Strom vom Context Dar Provider zurückgeben. Und wir werden arme Kinder dort und um Wert. Wir werden Daten pausieren, also Provider-Komponente wird wie ein Mittelmann sein. In Ordnung, Also, wenn wir unsere Reaktion haben, muss Umfang beginnen. Also lassen Sie uns importieren reagieren von reagieren oder ich gehe. Lassen Sie uns nun sehen, wie können wir einige Daten von hier auswählen? Also müssen wir Kontext verwenden, Selektor. Dann müssen wir Kontext bereitstellen, den wir konsumieren wollen. Und dann liefern wir den Colback, der unseren Wert weckt, wo Argument unser aktueller Zustand ist . Also lassen Sie uns von hier ein wenig nach unten navigieren. Wir können sehen, dass wir es tatsächlich so verwenden können. Also lassen Sie uns das kopieren und es hier in den aktuellen Raumkontext stellen. Also, was wir tun werden, werden wir es in unseren eigenen benutzerdefinierten Haken verwandeln. Lassen Sie uns den Kontextselektor aus dem Paket selbst importieren, und dann werden wir es in einen Haken verwandeln. Also lassen Sie es in Funktion konvertieren. Und anstelle des Vornamens verwenden wir den aktuellen Raum und lassen uns ihn auch exportieren. Und für diese Verwendung aktuellen Raum, wir werden nur den Selektor übergeben. Also lassen Sie uns den Selektor hier übergeben. Und anstelle des Personenkontextes werden wir den aktuellen Raumkontext gießen und für den Selektor werden wir Selektor zur Verfügung stellen. Wir sind schon hier. Gehen wir nicht zurück zu unserer Chat-Seite. Und hier, anstelle dieser leeren Klammern anstelle von Reaktionsfragment, lassen Sie uns diesen Provider verwenden. Also werden wir den aktuellen Zimmeranbieter stellen, und wir müssen Daten weitergeben, die wir in diesen Kontext stellen werden. Also lassen Sie uns Daten setzen Und für Daten, werden wir ein Objekt erstellen, das wir nennen werden, Sagen wir aktuelle Raumdaten. Also hier werden wir dieses Objekt erstellen, und hier werden wir die nächsten Werte übergeben. Aus unserem jetzigen Raum werden wir den Namen und die Beschreibung hervorheben, indem wir die Werte zerstören. Und dann werden wir den Namen und die Beschreibung an aktuelle von Daten übergeben, die an den D-Kontext übergeben werden . Also, wenn wir es speichern und wenn wir jetzt alles hier speichern, wenn wir zu unserer App zurückkehren, wird nichts mehr geändert. jedoch sagen, Wenn wirjedoch sagen,dass wir hier oben zum Chat gehen, verwenden wir den aktuellen Raumhaken, den wir erstellt haben. Dann wählen wir vielleicht einen Namen aus und für den Selektor werden wir State übergeben und vom Staat werden wir den Namen auswählen oder vielleicht nicht, Staat. Lassen Sie uns einfach Neid um Wert so setzen. Und jetzt anstelle von oben, lassen Sie uns diesen Namen aus dem Kontext anzeigen. Alles klar, wenn ich sage, dass, wenn ich mich erneuere, ich sehe Hallo den Raumnamen, den wir an die Kontakte weitergegeben haben, und wenn ich umtausche, wird es geändert. Das ist es also. So können wir tatsächlich Spitzenwerte aus dem Kontext. Und es ist auch sehr wichtig zu beachten, dass diese Werte, die wir aus dem Zustand auswählen, den wir aus dem Kontext auswählen, es wichtig ist zu verstehen, dass wir Objekte auswählen können, weil Objekte durch Referenzen verglichen werden. Und wenn wir die Dokumentation für dieses Paket geöffnet haben, wenn wir nach unten zu Einschränkungen scrollen, können wir sehen, dass Provider-Trigger Onley rendert, wenn der Kontextwert bevorzugt geändert wird , so dass Objekte bevorzugt geändert. Also müssen wir vorsichtig damit sein. Wir müssen nur primitive Typen auswählen, deren Objekt nicht ist. Und auch, wenn wir nach Einschränkungen schauen, müssen wir unsere Komponente umwickeln reagieren, Mama. Also lasst uns auch Säugetier aus reagieren und lasst es uns so umwickeln. Also jetzt ist unser Wert auswendig gelernt. Und wenn sich etwas für diesen Strom aus Daten ändert, lassen Sie uns eine Beschreibung. Und in dieser Top-Komponente verbrauchen wir nur Namen. Diese Komponente wird nicht aktualisiert, wenn die Beschreibung geändert wird. Das ist es also. Eine Sache, die hier zu verweisen ist, dass, wie ich bereits erwähnt habe, wenn wir Räume in dieser Komponente konsumieren, und wenn sich etwas ändert, die gesamte Komponente gerendert wird. Also einschließlich dieser Chat Top-Nachrichten und Chat unten. Aber weil wir hier Säugetier verwenden, lernt Teoh unsere Komponenten ein. Wir haben den Update-Baum erheblich reduziert, so dass nur diese Wrapping-Dips bei jeder Änderung aktualisiert werden . zugrunde liegenden Komponenten Chat-Up-Nachrichten im Chat unten werden nicht gerendert. Das ist es also. Das ist die Höhle. Es ist aus dem Kontext. AP Ich Lassen Sie uns dieses Video beenden. Also lassen Sie uns alles festschreiben und legen Sie die nächste Nachricht erstellt aktuellen Raumkontext mit Verwendung Kontextselektor. Alles klar, wir sehen uns in der nächsten 122. Erstes Chat – Oberer Teil: Hallo. In diesem Video werden wir eine Bau-Chattel Seite starten. Gehen wir, Lassen Sie uns zurück zum Code navigieren und öffnen Sie Index-Togs, die im oberen Teil hier darstellt . Anstelle dieses Namens werden wir ein anderes def gießen. Das wird noch ein Oberteil sein. Also für diesen schwierigen Klassennamen auf Display flex beenden, rechtfertigen Inhalt zwischen den Zeilenartikeln Mitte wir werden das Alter vier Tack ziehen und innerhalb der Rebellen-Anzeige Ah, waren Chat-Namen. Also hier von einem Vokalnamen und Klassennamen für diese Pfanne wird Text verschwinden und auch wir werden setzen und ich kann hier vor diesem Text, wenn wir auf mobilen Geräten sind, so können wir nicht zurück auf die Homepage zu bekommen. Also hier, lasst uns an Bord und ich kann und kompetente Klasse wird ein Link sein, der von React Router stumm kommt , als der Eiken selbst Arrow Kreis sein wird. linke Größe wird doppelt X sein und weil es eine Link-Komponente ist, müssen wir auch Eigentum zur Verfügung stellen, die zur Homepage führen wird, oder? Und auch wir werden bedingten Klassennamen für diesen Aiken gießen. Also werden wir fragen, ob wir auf mobilen Geräten sind. Dann werden wir einen Klassennamen setzen. Und wenn wir auf dem Desktop sind, werden wir andere Klassennamen dafür setzen. Wir werden den Media-Abfrage-Haken verwenden, den wir früher verwenden, und wir werden den Bullen erstellen, der mobil ist. Und dann werden wir Media Query von benutzerdefinierten Hooks und innerhalb eines Bubble Port Markierungen mit off 992 Pixel verwenden . Alles klar, wenn wir auf mobilen Geräten sind, ziehen wir das Display in Linienblock, als Batting wird null Marge rechts zu Text Blue und Lincoln gestylt, um unser Link-Element vollständig auf Stil zu machen. Und wenn wir auf Desktop-Geräten sind, dann zeigen wir diese Aiken einfach nicht an. Also lasst uns sparen und inspizieren. Was haben wir? Also, jetzt haben wir den Namen des Zimmers. Wenn ich das Fenster inspiziere und die Größe ändere, kann ich diese Schaltfläche hier sehen. Wenn ich darauf klicke, gehe ich zurück zur Startseite, um Chathams zu sehen. Na gut, sieht gut aus. Lasst uns weitermachen. Also, hier, neben diesem h vier, lassen Sie uns Schaltfläche Symbolleiste setzen, die von unserem Anzug kommt, und das war unser zu tun Also auch, lassen Sie uns Klassennamen aus Ws No rap setzen. Alles klar, vereinheitlichte ein frisches. Ordnung, InOrdnung, also ist das neben diesem Tag zu tun, wenn wir noch einen Def setzen wollen und es wird unser unterster Teil sein . Also für diesen unteren Teil, werden wir setzen, anzeigen, flex, rechtfertigen Inhalt zwischen und richten Elemente zentrieren. Wir werden als lustiges Element gießen, das auch unser zu tun sein wird. Und auch, wir werden einen Knopf hier drüben setzen, also wenn wir darauf klicken, öffnet sich ein Modellfenster und wir können die Raumbeschreibung sehen. Es wird also eine weitere Komponente sein, die wir erstellen werden und wir werden es Bräutigam Info, BT und Moto Dar g s in Ordnung nennen Info, . Denn jetzt wird es leer sein. Lasst es uns drinnen benutzen. Index-Togs hier. Wir werden von Info Bt und Moto gegossen, richtig? Lassen Sie uns sagen, mit und jetzt definieren wir unsere Komponente. Zunächst einmal werden wir hier auch unsere Zimmerbeschreibung und den Zimmernamen anzeigen. Also, dafür werden wir Kontext verwenden, Kurfürst. Also vor allem werden wir schlechte Beschreibung hier drüben, und es wird verwendet Auto und geworfen Haken werden. So bekommen wir unseren Wert und aus dem Wert wachsen wir Beschreibung. Und erinnerst du dich, dass ich dir gesagt habe, dass es wichtig ist, Objekte nicht auszuwählen, weil sie referenziell e verglichen werden Also bedeutet es, wenn wir mehrere Werte aus einem Objekt auswählen müssen , müssen wir sie separat auswählen. Sie werden also zu einem primitiven Wert, weil Beschreibung eine Zeichenfolge ist. Daher ist es ein primitiver Typ. Also müssen wir auch den Namen anzeigen. Also werden wir genau das Gleiche tun. Verwenden Sie den aktuellen Raum, und wir werden den Spitzen-Raumpunktnamen. Alles klar, klar, in unserem Markup gießen wir ein Knopfelement aus unserem Anzug hinein. Wir werden Rauminformationen gießen und Aussehen wird blink sein und Klasse Name wird klopfen auf X Zugang ist jetzt Null, weil wir ein Motil haben, werden wir wieder unseren eigenen benutzerdefinierten Haken verwenden , der sterblichen Zustand verwendet wird. Also lassen Sie mich es importieren. Und von diesem Haken, den wir greifen, ist offen, nah und offen. Nun, neben diesen Button-Elementen können wir uns eine moralische Komponente leisten, als für Show-Eigenschaft, die wir einstellen werden, ist offen für auf Höhe. Wir werden uns anziehen. Und in diesem Sterblichen, wie immer, werden wir sterbliche Dot Heather haben. Dann haben wir Körper und Fußzeile. Also lasst uns diese Werte ersetzen, Littlefoot sie. Okay, also für Model Heather, werden wir Modellpunkttitel gießen und für Titel, werden wir über diesen Raumnamen als für Fußzeile gießen. Wir gießen noch einen Knopf, der das Moto schließt. Also lasst uns Kleidung setzen, dann werden wir auf Click angeben wird Kleidung sein und es wird auch ein Block-Element sein, Ordnung? Und wir sind Leiche, die etwas Einfaches spezifizieren wird, was ein Sechs Tack sein wird. Und wir werden Beschreibung setzen und Klassenname wird Rand unten eins sein, dann wird die Beschreibung selbst gehen. Also lasst uns Beschreibung setzen. Und jetzt lasst uns speichern Und lasst uns dieses Dropping def entfernen und es durch den reakten Kontext ersetzen . Lassen Sie uns auch den Import nach oben verschieben. Und auch wir haben diesen offenen Handler nicht verwendet. Lass es uns tagelang setzen. Schaltfläche auf Klick wird geöffnet sein. Alles klar, lassen Sie es uns speichern und schauen wir uns mal an. Jetzt haben wir Zimmer Informationstaste, die wie ein Link aussieht. Und wenn wir darauf klicken, haben wir ein moralisches Fenster, das über Hallo sagt. Beschreibung Beschreibung. Hey, nah dran. Lassen Sie es uns noch einmal in Ihrem eigenen Namen testen. Wir haben diese seltsame Beschreibung und alles funktioniert gut. Das ist es also für dieses Video. Lassen Sie uns unsere Änderungen begehen. Lassen Sie die Leute auf alles bekommen kann, dann begehen. Nehmen wir an, begann zu bauen Chat Top Erstellt eine Raumbeschreibung. Modoff. Alles klar, Perfect. Wir sehen uns in der nächsten. 123. Denormalizing – Creating erstellen: Hallo. In diesem Video werden wir anfangen, verkohlten Boden zu erstellen. Gehen wir, bevor wir anfangen. Ich möchte erwähnen, dass im vorherigen Video, als wir anfingen, Chat Top zu erstellen, ich vergessen habe, ein paar Details zu erwähnen. Zuallererst müssen wir noch ein paar Klassennamen hinzufügen und es wird dieses Alter für Element sein. Also lassen Sie uns Klassennamen setzen und wir werden Text verschwinden lassen, um zu verhindern, dass Steuern überlaufen, wenn es zu lang ist. Und dann werden wir die Display-Flags hinzufügen und Items Center ausrichten, um sicherzustellen, dass, wenn wir auf mobilen Geräten sind, diese Aiken und Text vertikal zentriert, rechts und auch ein weiteres Detail. Wenn wir den Raum für Betty Inamoto öffnen, verwenden wir Kontextauswahl, Also, damit es funktioniert, müssen wir auch das Element um Säugetier reiben. Das haben wir vergessen zu dio-Dio. Also lassen Sie uns Memo hier unten und lassen Sie uns auch importiert von React Now verwenden Kontext. Der Selektor funktioniert wie erwartet. Na gut, gehen wir weiter und fangen wir mit Chad Bottom an. Lassen Sie uns Teoh Index Dodgy s innerhalb des unteren Ordners navigieren. Und hier lassen Sie uns unseren Markt so definieren, dass wir zuerst für die Gruppe einströmen und innerhalb dieser Eingabegruppe werden wir die tatsächliche Eingabe mit Platzhalter setzen, richtig? Und du sagst hier und drei Punkte am Ende. Neben diesem Import werden wir ein Buttonelement gießen. Also lassen Sie uns Import Gruppe Dar Schaltfläche definieren. Und dieser Knopf wird die Farbe blau und das Aussehen der Primary in dieser Scheunengruppe haben, werden wir gießen. Ich komme und ich kann wird geschickt werden. In Ordnung, sagen wir, warten wir und mal sehen, was haben wir? Also, jetzt haben wir diesen Import und wir haben den Boden. Wenn wir also auf diese Schaltfläche klicken, wird die Nachricht gesendet. Alles klar, jetzt definieren wir unsere Funktionalität. Also zuerst, wir brauchen Staat. Also lassen Sie uns Import erstellen und sagte in schlecht, und standardmäßig wird es auf einen leeren Shrink gesetzt werden. Dann müssen wir auf Change-Handler für das Änderungsereignis für unseren Import angeben. Und auch wir müssen unsere Input mit dem tatsächlichen Zustand assoziieren. Also lassen Sie uns Wert definieren. Es wird Importeur sein. Und für ein Änderungsereignis werden wir auf Importänderung angeben. Heller. Lassen Sie uns dies bei Importänderung definieren und wir können es im Voraus optimieren, wo sie Callback verwenden , weil wir Eingangszustand haben, der häufig ändert und bei Importänderung keine Abhängigkeit haben wird . Also dieses unveränderte Ereignis gibt uns Wert als erstes Argument und Ereignis. Also müssen wir den tatsächlichen Wert von hier erhalten, und dann werden wir sagen, Import mit Wert nennen . Und nur um zu erwähnen, dass, weil wir diese Eingabe, die aus unserer Anzug kommt , als Komponente verwenden , deshalb erhalten wir Wert als erstes Argument. In jedem anderen Fall erhalten wir nur das Ereignisobjekt. Jetzt müssen wir Funktionalität zu unserer Schaltfläche hinzufügen, um die Nachricht tatsächlich zu senden. Deshalb werden wir eine neue Funktion angeben, die wir auf Send Click benennen werden. Es wird unser Handler für auf Klick Ereignis auf dieser Schaltfläche sein. Also lassen Sie uns beruhigen. Also foran klicken, werden wir auf senden klicken und zuerst, hier werden wir eine einfache Überprüfung machen Wenn ich im Hafen waren. Wenn unsere Nachricht nicht leer ist, so werden wir den Import Punkt Trim gleich leere Nachricht angeben. Wenn es der Fall ist, dann wird es einfach die Dysfunktion beenden. Als nächstes müssen wir die Nachricht zusammenstellen. Und in Zukunft werden wir auch Nachrichten abgelegt haben. Dafür werden wir eine gemeinsame Funktion erstellen, die aufgerufen wird, um die Nachricht zu montieren, damit sie gemeinsame Eigenschaften an unsere Nachricht anfügt. Also hier oben, werden wir neue Funktion erstellen, die wir benennen, zusammenstellen, nachrichten, und als Argument wird es Benutzerprofil erhalten. Und lassen Sie uns sagen, Tschad, ich d ok, und dann wird es uns ein Objekt mit dem Raum i d, das überprüft werden wird, I d. Dann werden wir Autor Objekt haben und hier werden wir de normalisierte Daten, bevor wir fortfahren. Lassen Sie mich die Struktur erklären, die wir haben werden. Wenn wir also jetzt unsere Datenbank öffnen, haben wir Zimmer und Profile und unsere Daten sind jetzt flach und sehr einfach zu verwalten. Aber jetzt haben wir Zimmer und wir müssen Nachrichten erstellen. Wie können wir uns dem nähern? Wir können natürlich Nachrichten innerhalb dieses Objekts setzen, Jedoch, mit Echtzeitdaten basierend, weil wir begrenzte Anfragen sind, müssen wir mit Bedacht auf unsere Struktur entscheiden. Mit Echtzeit-Datenbank ist es wirklich wichtig, die Struktur so flach wie möglich zu halten. Es bedeutet, dass wir idealerweise kein verschachteltes Objekt erstellen möchten. Deshalb werden wir ein weiteres Mal sehen, Routenobjekt erstellen, das wir Nachrichten und Einblicke nennen werden. Wir werden unsere Nachrichtendaten setzen und dann darauf hinweisen, dass diese Nachricht zu diesem bestimmten Raum gehört . Wir werden den Raum in dieser Nachricht angeben. Und auch wir werden de Normized Data de Normizing bedeutet, dass wir unsere Daten kopieren und duplizieren . Dies soll verhindern, dass mehrere Abfragen auf unserer Datenbank ausgeführt werden, wenn wir etwas anzeigen müssen . Zum Beispiel Chat-Nachricht mit Chat-Nachricht. Wir möchten auch Benutzerprofilnamen, Avatar und andere Dinge anzeigen . Wenn wir also Nachricht anzeigen, wenn wir keine Daten duplizieren, müssen wir eine zweite Anfrage an unsere Datenbank senden und das tatsächliche Profilometer erhalten. Um zu verhindern, dass mehrere Anfragen ausgeführt werden, werden wir es duplizieren. Dies ist also in keiner SQL-Datenbank normal. Lass uns gehen. Also, um Nachricht für den Autor zusammenzustellen, werden wir Namen gießen, der den Namen profiliert wird, dann werden wir auch Ihre i d gießen , das Profil sein wird, das Ihr i d dann erstellt wird, wird Profil erstellt bei, und wir müssen auch bedingten Avatar gießen. Also, wenn Sie dort keinen Schiedsrichter haben, legen wir es nicht in dieses Objekt dafür. Wir werden drei Punkte einschenken. Dann werden wir ein schlechtes Profil auf Avatar, und wir werden fragen, ob Geschenk existiert. Dann gießen wir den Avatarschlüssel mit Profiltür-Avatar. Sonst werden wir ein leeres Objekt gießen. Wenn also Profil-Avatar existiert, werden wir dieses Objekt angeben. Und weil wir drei Punkte haben, können wir dieses Objekt nicht auf dieses globale Objekt verteilen. Auf diese Weise wird es diese Eigenschaft an dieses Objekt anhängen. Andernfalls werden wir das leere Objekt verbreiten, das nichts hinzufügt. Okay, als nächstes werden wir Ihren Autor hinzufügen, erstellt bei und hier werden wir Firebase angeben. Aber lasst uns in erster Linie importiert. Lassen Sie mich importieren Feuerbasis aus der Firebase-App, und es wird Firebase-Datenbankserverwert sein. Zeitstempel. In Ordnung, jetzt verwenden wir diese Nachricht zusammenstellen und lassen Sie es uns hier rüber bringen. Also werden wir eine neue verfügbare erstellen, die Nachrichtendaten benennen wird. Dann werden wir anrufen, eine Nachricht mit Profil und Chad I D zusammenstellen damit wir ein Profil aus unserem Kontext bekommen. Also lassen Sie uns schlechtes Profil von Verwendung Profil Hook, die wir aus Profilkontext haben, verwenden Sie Profil. Und auch, wir müssen Chat-Idee bekommen. Und wir können es mit der Hilfe von Paramus bekommen, die von React Router Jugendprogramme kommt . Alles klar, gut. Nun zu diesen Nachrichtendaten müssen wir den eigentlichen Nachrichtentext anhängen. Also hier, lassen Sie uns die Nachricht beruhigen. Datentext wird unser Input sein. In Ordnung. Und jetzt ist die Sache, dass wir eine atomare Operation durchführen müssen, um Daten an mehreren Stellen innerhalb der Datenbank mit Echtzeit-Datenbank zu aktualisieren . Es ist wirklich einfach zu tun, und das liebe ich wirklich. Warten Sie. Also, was werden wir tun? Wir werden eine neue Nachricht innerhalb Nachrichten Pfad erstellen. Und auch werden wir Zimmer aktualisieren. Und hier werden wir noch eine Requisite setzen, Gemüse-Name, letzte Nachricht. Dies ist, um die letzte Nachricht hier in dieser Chatraum-Liste anzuzeigen. Alles klar, was wir tun werden, werden wir ein neues Objekt erstellen. Es wird standardmäßig ein leeres Objekt sein, das Updates sein wird. Und die Logik wird die nächste in diesem Objekt modellieren wir unsere Aktualisierungsdaten innerhalb der Datenbank bezogen Lee auf die Route aus der Datenbank. Also werden wir den Update-Pass als Schlüssel haben. Und für diesen Schlüssel werden wir die tatsächlichen aktualisierten Daten haben, und dann werden wir diese Updates für die Route aus der Datenbank aufrufen, und es wird es als eine atomare Operation ausführen. Das gefällt mir wirklich. Also, was ich meine ist, dass wir zuerst eine neue Botschaft definieren müssen, die ich im Voraus habe. Also für das, lassen Sie uns neue variable Nachricht I d. hier erstellen . Wir werden Datenbank setzen. Dieses Mal wird es Datenbank sein, die von Let me wieder kommt, wie man es importiert, richtig? Es funktioniert nicht. Lass es uns manuell machen. Also werden wir Datenbank von MISC importieren. In Ordnung, gehen wir zurück zu Ordnern. Okay, noch eine Ebene. Sonstiges Firebase. Alles klar, Perfect. Also, Datenbank, dann müssen wir Verweise auf unsere Nachrichten angeben. Dann werden wir den Boden schieben, und dann werden wir auf diese Weise erhalten wir einen einzigartigen Schlüssel aus der riel Zeitdatenbank ohne das eigentliche Dokument zu erstellen. Okay, Jetzt müssen wir dieses Aktualisierungsobjekt aktualisieren. Also lassen Sie uns Updates setzen und unsere erste Eigenschaft wird Nachrichten sein. Dann werden wir die Nachricht angeben, die ich hier drüben habe. Und für diese Nachrichtwerden wir Nachrichtendaten beruhigen, werden als zweites Objekt Räume sein wird, Slash Chat I D und Schrägstrich letzte Nachricht und für die letzte Nachricht, werden wir alle unsere Nachrichtendaten zu beruhigen und auch oben drauf, werden wir Nachricht i d anhängen also Nachricht I d wird Nachricht sein, die ich d mag. Jetzt müssen wir die eigentliche Datenbank aktualisieren. Also hier, wir werden versuchen, fangen Block, fangen Block, und hier werden wir eine Wartezeit rufen und lasst uns Dysfunktion Teoh eine Senkenfunktion umwandeln. Wir rufen unsere Datenbank mit Treff an. Also erhalten wir Verweis auf die Straße von unserer Datenbank, ohne den Pfad anzugeben, dann wird das Update aufrufen und wir werden unser Update-Objekt übergeben, und es wird alle von Keys übergebenen Updates Spitze, und es wird diese Vergangenheit innerhalb die Datenbank direkt nach der Aktualisierung unserer Daten. Wir rufen Set-Input wieder auf eine leere Zeichenfolge, und wir werden auch Alarm-Türfehler setzen und wir werden jemals Dock-Nachricht angeben, okay? Und vielleicht auch Lasst uns den Ladezustand definieren. Also neben diesem Import, lassen Sie uns erstellen ist laden und traurig ist Leihgabe, die standardmäßig auf false gesetzt wird. Dann rufen wir an, dass er geladen wird, bevor wir eine asynchrone Aufgabe machen. Falls wir versagt haben, nennen wir es Satya Falls. Und wenn wir fertig sind, auch rufen wir auchFalse an. Lassen Sie uns nun den Dis Ladezustand für diese Schaltfläche verwenden. Also lassen Sie uns deaktiviert Onley, wenn unsere Daten gerade geladen werden, vielleicht lassen Sie uns speichern und werfen Sie einen Blick. Was haben Sie? Also, wenn ich eine Nachricht an die Datenbank schicke, habe ich die Erlaubnis heute Abend, und das liegt daran, dass wir keine Sicherheitsregeln spezifiziert haben. Lassen Sie uns zu Regeln navigieren. Und dann lassen Sie uns das alles kopieren. Fügen wir es hier unten ein. Lassen Sie uns es in Ihre Nachrichten umbenennen und geben Sie Nachricht I d Lassen Sie uns es speichern und lassen Sie uns es mit unseren lokalen Regeln synchronisieren. Und jetzt versuchen wir, eine neue Nachricht zu senden. Also, wenn ich jetzt klicke, öffnen wir unsere Datenbank und hier kann ich einen neuen Pfad sehen, der Nachrichten ist, die ich neu generierten Schlüssel habe, was eigentlich diese Nachricht ist, die wir mit dieser Codezeile erstellt haben . Wenn wir es hier öffnen, haben wir bei der Zugehörigkeit geschmort Dieses Zimmer I, d Text Autor, ist die nächste Person und Innenräume. Wenn wir jetzt öffnen, haben wir auch eine Nachricht verloren, das ist diese Nachricht, die wir gesendet haben. Es sieht also gut aus. Das einzige, was ich hier tun möchte, ist eigentlich, dass ich vielleicht bei einem neuen Handler für das on key down Event möchte. Wenn wir also auch auf Enter Button klicken, wird die Nachricht gesendet. Also für diesen Import, lassen Sie uns auch auf Key Down-Ereignis setzen und wir werden auf Key Down-Handler angeben, Lassen Sie uns es als nächstes setzen, Teoh auf Eingabeänderung. Und das auf Qi unten wird sein oder vielleicht lassen Sie es uns hier unten setzen, neben dem gesendeten Klick innen auf Taste nach unten. Wir werden dieses Mal ein Ereignisobjekt erhalten, und wir werden fragen, ob Ereignis Kiko oder gleich 13 ist. Wenn unsere Taste, die wir drücken, ist eingeben, dann werden wir zuerst Ereignis verhindern Standard aufrufen, um jede Standardfunktionalität für diese Schaltfläche definiert zu verhindern . Dann werden wir auf gesendeten Klick anrufen. In Ordnung, , versuchen wir es noch einmal,wenn ich noch mal Hallo sage. Wenn ich auf Eingabe rechte Nachricht gesendet wurde und die Datenbank wurde aktualisiert. Also schätze ich, das war's. Lassen Sie uns dieses Video beenden. Lassen Sie uns alle unsere Änderungen abnehmen, indem wir bei allem gut anrufen. Dann erhalten Sie Commit und, lassen Sie uns erstellen verkohlt unten Gesendete Nachrichten an de Chat. Prächtig. Wir sehen uns im nächsten. 124. Letzte Nachricht in Raumliste anzeigen: Hallo. Nun, da wir Nachrichten in unserer Datenbank haben und wir Lust Message Eigenschaft auf Chatroom Daten zur Verfügung haben , können wir diese letzte Nachricht in Chatroom Liste Inside room Element anzeigen. Lass es uns tun. Lassen Sie uns zurück zu Code navigieren und öffnen Sie uns Raum Element Komponente hier oben, wo wir d Struktur um Eigenschaften. Lassen Sie uns auch d Struktur letzte Nachricht als zuerst hier innerhalb der Zeit vor, anstatt Ihr Datum anzuzeigen erstellt auf Lassen Sie uns fragen, wenn wir Nachrichtendaten verloren haben, dann werden wir neues Datum aus der letzten Nachricht angezeigt, die an so erstellt wurde, wenn diese Nachricht erstellt. Andernfalls behalten wir es so, wie es war, bevor wir anzeigen, wenn der Raum erstellt wurde, dann hier unten, wo wir keine Nachrichten anzeigen. Doch statt dessen, lassen Sie uns schlechte bedingte Rendering. Wenn wir also die letzte Nachricht haben, werden wir das letzte Nachrichten-Markup anzeigen. Sonst wird es wie zuvor sein. Wir werden Spannweite anzeigen. Noch keine Nachrichten. Also in diesem Reaktionsfragment, werden wir den ersten Benutzer Avatar und dann die eigentliche Nachricht setzen. Also wird dieses Def Rapper für Profil-Avatar-Komponente sein, die wir früher erstellt haben, wie Sie sich erinnern. Also lasst uns es importieren und für Requisiten. Lassen Sie uns angeben, Quelle wird letzte Nachricht sein. Werfen wir einen Blick. Letzte Nachricht Tochter Autor Nora al atar Punkt Autor Lord Avatar Name im Fall, wenn Avatar nicht definiert ist, wird letzte Nachricht Autor Punkt Name und Größe wird Rauch sein. Und für diese taub lassen Sie uns gießen, um Flex und ein Zeilenpunktcenter anzuzeigen. Sie stellen sicher, dass das Avatar-Element 10 ist, um vertikal zu lesen. Dann entscheiden Sie, ob wir diese Rinde für Reaktionsfragment neben diesem Profil-Avatar loswerden . Lassen Sie uns einen weiteren tauben mit Klassennamen-Tags anzeigen verschwinden, um Angriffe von Überlauf und Rand links zu verhindern . Lass uns dich hineinbringen. Wir werden Def setzen. Das wird sagen, letzte Nachricht Punkt Autor Punktname. Und nächstes Jahr nach dem Namen werden wir arm sein. Letzte Nachricht, Hund Text und in Richtung dieses Autors Namen, werden wir Text kursiv anzeigen, nur um zwischen dem Namen des Autors und der letzten Nachricht zu unterscheiden. Alles klar, lassen Sie uns alles retten. Kommen wir nicht zu unserer Bewerbung zurück. Das kann ich unerwartet sehen. In Ordnung, also nochmal, dieses Reaktionsfragment Buck. Nun, wenn ich sage, was ich sehen kann, habe ich die eigentliche Botschaft. Ich kann den Namen des Autors sehen. Ich kann meine Nachricht sehen und meinen Ah-Wurf sehen. Jetzt vielleicht. Versuchen wir es mit einer neuen Nachricht. Also lassen Sie mich Hallo aus der Zukunft sagen. Wenn ich diese Nachricht schicke, kann ich sehen, dass die Nachricht gesendet wurde. Gerade jetzt wieder, mein Avatar, mein Name und Hallo aus der Zukunft. In Ordnung, das ist es also. Es war ziemlich einfach, oder? Lassen Sie uns unsere Änderungen begehen. Lassen Sie uns alles setzen, um System zu erhalten und lassen Sie uns verpflichten, indem Sie sagen, Anzeige letzte Nachricht im Raumelement, für die Tat. Wir sehen uns in der nächsten. 125. Arbeiten mit denormalisierten Daten: Hey, jetzt haben wir Lust Nachricht in der zerschmetternden Liste. Aber hier ist das Problem, weil wir Daten jetzt duplizieren. Wenn wir sagen, ich gehe zu meinem Dashboard und ich aktualisiere meinen Spitznamen auf etwas anderes, lassen Sie uns speichern, um Look 16 zu zeigen. Dann aktualisieren sie auch meinen Avatar. Wenn ich es hochlade, wird es hochgeladen. Aber letzte Nachricht wird nicht aktualisiert, da diese Daten innerhalb der Datenbank dupliziert werden. Wir müssen uns darum kümmern, wenn wir die tatsächlichen Daten aktualisieren. Wenn wir einige Änderungen vornehmen, stellen wir sicher, dass wir auch alle Referenzen aktualisieren, die wir dupliziert haben. Lassen Sie uns nicht zurück zum Code und lassen Sie uns zum Dashboard navigieren, Gehen wir zu Dashboard Togo und gehen Sie dann zum Dashboard. Und hier, statt dieses Benutzers Spitzname rau setzen neue Daten. Wir müssen einen Weg finden, um alle Referenzen zu aktualisieren. Also, was ich vorgeschlagen habe, möchte ich vorschlagen, eine Hilfsfunktion zu erstellen, die alle Referenzen in unserer Datenbank erhält , und dann können wir unsere Datenbank mit alten diese Referenz aktualisieren. Eigentlich wird es das gleiche sein, wie wir es in Tschad unten getan haben, als wir dieses Aktualisierungsobjekt erstellt haben, und wir haben mehrere übergeben, um eine atomare Operation durchzuführen, so dass es im Grunde dasselbe sein wird. So können wir diese Funktion so aufrufen. Lassen Sie uns definieren, wie wir es tun werden. Also statt eines Gewichts Benutzer Spitznamen Raff Set, wir werden anrufen, Nehmen wir an, wir werden Updates erhalten und weil wir auf unsere Datenbank zugreifen, wird es in einem Satz Operation sein. Wir werden es benennen. Nehmen wir an, lassen Sie Benutzerupdates innerhalb. Wir werden Benutzer I d übergeben, die wird Profil verehren Ihre i d. Dann werden wir den Schlüssel übergeben, den wir aktualisieren müssen. Also in unserem Fall wird es Name sein und dann werden wir den tatsächlichen Wert übergeben , der neue Daten wie folgt sein wird. Also, jetzt müssen wir Dysfunktion schaffen. Lassen Sie uns zwei Helfer navigieren, sie s und hier unten, lassen Sie uns exportieren Funktion de Probleme Namen Benutzer Updates bekommen. So wird es alles Funktion sein und es wird Benutzer i d empfangen dann wird es Schlüssel zum Aktualisieren erhalten und auch wird es Wert erhalten. Und vielleicht lassen Sie uns auch das Datenbankobjekt zusammen mit unserer Funktion übergeben. Also hier werden wir auch dieses Datenbankobjekt übergeben, das wir innerhalb misc Kamin nur für die Bequemlichkeit wie diese haben . Also, jetzt innerhalb von Helfern, können wir auch Datenbank hier drüben haben. Jetzt werden wir ein leeres Objekt erstellen. Undefinierbare Kohle-Updates als unser erstes Update wird der tatsächliche Wert sein, den wir versuchen, so Updates zu aktualisieren. Dann wird Profile Schrägstrich Benutzer i d als Schrägstrich Schlüssel zu aktualisieren, und es wird auf Wert gesetzt werden. Jetzt müssen wir die tatsächlichen Referenzen bekommen. Also unsere Referenzen sind Werfen wir einen Blick Nachrichten Nachricht I D. Als Autor als Avatar in Auch Räume erstellt. Letzte Nachricht. Also, was werden wir tun? Wir werden ein paar Versprechen definieren, weil es mehrere Versprechungen gibt. Wir wollen sie nicht eins nach dem anderen machen. Wir wollen sie sofort ausführen. Deshalb werden wir unsere Versprechen definieren. Und dann werden wir alle mit Versprechen Punkt erwarten Alle unsere erste Verheißung wird Nachrichten bekommen und es wird db dot Ralf Dar Nachrichten sein, dann um Nachrichten zu bekommen, wo sagen wir, dieser Autor, ich d gleich Ihnen unser Benutzer, Wir müssen zuerst die volle Bestellung nach Kind. Dann müssen wir angeben, welches Kind. Wir gingen zur Referenz. Also in unserem Fall Referenznachrichten So haben wir das Nachrichtenobjekt. Dann haben wir Autor Schrägstrich Benutzer i D. Also lassen Sie uns Ordnung nach Autor Schrägstrich Benutzer i d setzen und dann wird dieser Schlüssel gleich dem Benutzer i d sein. Dass wir als Argument erhalten und dann werden wir einen Wert setzen, um den tatsächlichen Wert zu erhalten . Dann wird unser zweites Versprechen sein, Benutzerräume zu bekommen, was DB-Referenz Schrägstrich Räume sein wird. Dann müssen wir wieder Ordnung nach Kind bringen. Und dieses Mal, wenn wir die Räume öffnen, haben wir weniger Nachricht Schrägstrich Autor Schrägstrich Benutzer i d. Also lassen Sie uns Junge letzte Nachricht Autor, Benutzer I d. Und dann gleich Benutzer i d. Und wieder einmal Wert. Jetzt, da wir diese beiden Versprechen im ungelösten Zustand haben, müssen wir sie auflösen. Aus diesem Grund werden wir ein Gewichtsversprechen schaffen, dass alle im Inneren müssen wir eine Reihe von Versprechungen übergeben die Nachrichten bekommen und Zimmer wie diese bekommen und Nachrichten erhalten uns Snapshot von Nachrichten zurückgeben und Zimmer bekommen uns einen Schnappschuss von Zimmern zurückgeben. Also hier werden wir sie strukturieren. Das erste Element ist Nachrichten erhalten. Also werden wir zuerst Nachrichten, Schnappschüsse oder Nachrichten erhalten . Druckknopf-Hemd Eine zweite wird Räume sein, Snap Shirt, das wir korrespondierende Klay am Snatcher und Air Snapshot nennen werden. Dann für jede Nachricht, die wir mit User-Idee haben, rufen wir für jeden so Nachrichten-Snapshot für jede Nachricht, die wir erhalten, wir erhalten Nachrichten-Snapshot, und hier werden wir Updates aufrufen. Dann werden wir schlechte Nachrichten Schrägstrich Nachricht Snapshot Punkt Schlüssel, die die Nachricht i d darstellt. Also werden wir ein Objekt mit all diesen Nachrichten haben, und Schlüssel wird diese Idee off Nachricht sein. In Ordnung, so Nachricht Schlüssel Schrägstrich Autor Schrägstrich Schlüssel zu aktualisieren. Auf diese Weise verweisen wir auf Nachrichten Autor und das Kind, das wir aktualisieren möchten, ob es Allah Auto Name Ihr I d oder erstellt bei. Und dann, damit dieser Schlüssel aktualisiert wird, werden wir Wert setzen und genau das gleiche, was wir für unsere Momentaufnahme tun werden. Also lassen Sie es uns tatsächlich kopieren. Und anstelle von m Schnappschuss, lassen Sie uns schlechte Luft Snapshot, die Raum ist, Snap Shirt und dann für Updates, wir werden Räume setzen, dann werden wir Raum Snapshot Dot Key bekommen, die Dann werden wir hier letzte Nachricht haben. Dann haben wir Autor und dann Schlüssel, um mit Wert zu aktualisieren. In Ordnung. Und gleich danach werden wir das Aktualisierungsobjekt zurückgeben, das wir erstellt haben. Nun lassen Sie uns sagen, was Lassen Sie uns zu Ihrem Dashboard navigieren lassen und kommentiert, und lassen Sie uns wirklich wichtig dieses Objekt von Helfern, aber es scheint, als ob es automatisch importiert werden kann. Also lassen Sie uns importieren Benutzer-Updates von Lassen Sie uns referenzieren unsere Helfer Misc Helfer und es scheint , als ob es nicht richtig gefunden wird, also bringen Sie dorthin. Aktualisieren. Alles klar, bringen Sie dorthin. Aktualisierungen wie diese. Ok, perfekt. Jetzt, da wir Updates haben, anstatt diese Funktion hier drüben aufzurufen und anstatt auf die tatsächlichen Daten zu verweisen, können wir tatsächlich nur Datenbank-Dot Ref Tür-Update mit Updates aufrufen. Dann werden wir erwartet und wir werden all das und auch all das entfernen. Jetzt speichern wir es und lassen Sie uns eigentlich auch öffnen. Applaud Bt, in dem lädt unseren Avatar und lassen Sie uns die Logik finden. Also hier wieder, da wir innerhalb des Dashboards hören können, können Sie es kopieren und stattdessen wieder die referenzierende das untergeordnete Element ausschalten und dann so aktualisieren. Lassen Sie uns Updates setzen würden Ihre Updates als für Profil i d bekommen. Wir werden Avatar dieses Mal aktualisieren und Avatar wird nicht laden Euro so. Lassen Sie uns nun diese Referenz entfernen. Lassen Sie uns dieses Benutzeravatar-Set entfernen. Lasst uns diese Logik fangen. Lass es uns hier setzen und jetzt schauen wir uns mal an. Wenn es tatsächlich funktioniert hat, navigieren wir zurück zum Code. Lassen Sie mich die frische nur für den Fall, wenn ich zum Dashboard gehe, wenn ich auf Änderung klicke, meinen Spitznamen Okay, vielleicht werde ich hallo sagen. Neuer Name. Wenn ich auf sichere Spitzname klicken wurde aktualisiert und ich habe immer noch und hier zu sein. Okay, vielleicht lassen Sie mich das Dashboard eins überprüfen. Meine Zeit. Ich habe einen Namen hier drüben. Lassen Sie uns protokollieren Updates und werfen Sie einen Blick. Was ist los hier drüben? Wenn ich inspizieren, Ich gehe zur Konsole Ich aktualisiere meinen Spitznamen. Ich habe diese Art von Updates, Nachrichten, Profilen, Ordnung, aber ich aktualisiere meine letzte Nachricht nicht. Das ist also komisch. Lass uns Teoh-Helfer navigieren. Und hier schauen wir uns mal an. Zu aktualisierende Autorenschlüssel Okay, Snap Shirt verloren. Verfasser, Ihr I D Lassen Sie uns unsere Datenbank überprüfen. Letzte Nachricht. Autor, Ihr I D Das ist Benutzer I d, dass wir übergeben. Oh, entschuldigen Sie mich. Hier darf nicht zuletzt sein. Muss weniger Nachricht sein. Lass es uns retten. Und jetzt noch ein Mal. Ändern wir unseren Spitznamen. Tiu. Sagen wir, sie sieht 22 aus. Wenn ich meinen Spitznamen aktualisiere, wird er hier aktualisiert. Perfekt. Lassen Sie uns nun nach Al Atar suchen Wenn ich wieder ein neues Bild hochlade, wurde Avatar vermieden. Schauen wir uns rein. Letzte Nachricht. Ja. Ah, Was wurden aktualisiert? Okay, nur für den Fall, dass noch ein Mal. Applaus. Avatar wurde aktualisiert. Perfekt. Werfen wir einen Blick. Ja, es wurde aktualisiert, also hat es tatsächlich funktioniert. In Ordnung. Perfekt. Nun lasst uns dieses Konsul Glück entfernen, das wir hier drüben gemacht haben, und lassen Sie uns unsere Änderungen begehen. Das ist es. Lasst uns alles in den Bühnenzustand einsteigen und uns verpflichten. Aktualisieren Sie alle Benutzerreferenzen, wenn Daten aktualisiert werden. Ok. Perfekt. Wir sehen uns im nächsten. 126. Chat-Nachrichten erkennen: Hey, da. In diesem Video werden wir Chat-Nachrichten hier in der Mitte innerhalb der Chat-Seite anzeigen. Lassen Sie uns gehen, Gehen wir zurück zu Code und lassen Sie uns unsere Ordner Chat-Fenster Nachrichten finden. Und hier haben wir Index-Togs bereits weniger groß, und Sie Datei, die Nachricht Element nennen wird. Für den Moment wird es leer sein. Also lasst uns Hallo reinlegen. Und lassen wir es wie das innerhalb von Nachrichten hier in erster Linie lassen, wir werden unseren Staat definieren, den wir mit dem Verwendungszustand verwalten werden. Also werden wir es Nachrichten und Sat-Nachrichten nennen. Und standardmäßig wird es so sein zu wissen. Dann müssen wir auch unseren Chat greifen, den wir gerade geöffnet haben. Also, dafür werden wir verwenden Paramus Hook, der von React Rotor kommt und wir werden Kind zu bekommen , ich d jetzt in Gebrauch Effekt. Wir rufen unsere Datenbank an. Zuerst greifen wir unseren Verweis auf den Chat-Pfad innerhalb der Datenbank, die Nachrichten ist. Also lasst uns schlechte Nachrichten rau. Dann werden wir Datenbank aufrufen, aber nicht die, die aus Firebase-Paket eins kommt, die von feuerbasierten RGs kommt. Also lasst uns das importieren. Dann werden wir Referenz Schrägstrich Nachrichten angeben. Jetzt werden wir einen Echtzeit-Listener auf Hold-Nachrichten setzen, die mit geöffnetem Chattering zusammenhängen . Also werden wir befriedigen Nachrichten sehen, Ralf, Tür Ordnung nach Kind. Und hier werden wir Zimmer I D. beruhigen und das ist eine Eigenschaft, die wir auf jeder Nachricht haben, das ist Raum I. D. Also wird das von der Idee gleich sein, i d, dass wir von Paramus erhalten. Nun schien es als Abhängigkeit, also lasst uns bearbeiten. Und gleich danach, lassen Sie uns einen Echtzeit-Zuhörer setzen, damit wir Wert setzen und ehrenvolle Callback beruhigen , der Snapshot erhält. Nun, wie Sie sich erinnern, wird dieser Schnappschuss ein Objekt sein, bei dem jeder Schlüssel die Nachricht I d ist und dann bekommen wir die tatsächlichen Daten. Also müssen wir es transformieren. Und wir haben es bereits mit der Transformation zu Array mit I d Funktion gemacht. Also werden wir es noch einmal nennen. Also lasst uns schlechte Daten und dann werden wir Transformation in Array mit i d setzen, dann werden wir den Snapshot-Punktwert aufrufen und ihn an diese Funktion übergeben. Und dann werden wir den Zustand mit Daten wie diesen aktualisieren und weil es ein Echtzeit-Listener ist . Es ist ein Abonnement, das wir abbestellen müssen. Also lassen Sie uns Ah verwenden, wir sind Cleanup-Funktion für die Verwendung Effekt. Und hier werden wir Nachrichten, Floß und Hund abschütten , und wir können Wert angeben. Auf diese Weise werden wir uns von allen Echtzeit-Zuhörern auf diesem Weg abmelden. In Ordnung, jetzt, unser nächster Schritt ist die Anzeige von Daten. Und zuerst müssen wir tatsächlich ein paar Mobbing-Werte bekommen, die uns helfen, unsere Botschaften bedingt zu machen . Unsere erste wird also leer erschossen und verkohlt. Leer wird nur sein, wenn wir Nachrichten definiert haben und dann Nachrichten Punktlänge gleich 20 Also haben wir alle Nachrichten geladen, aber es gibt keine Nachrichten überhaupt. Richtig, dann können wir auch Nachrichten zeigen, die zeigen, ob wir unsere Nachricht Element machen können , die wir erstellt haben. Also, wenn wir Nachrichten und Nachrichten Punktlänge ist größer als Null. Also könnten wir diese Bedingung direkt hier in unser Markup setzen, aber nur um sauberer zu sein,wissen Sie, wissen Sie, wir haben sie hierher gebracht. Also in diesem Def, werden wir die nächste Logik setzen. Zuallererst wird es kein Diff sein. Es wird ein u L. Dann Klassenname wird Nachrichtenliste sein und auch Zoll wachsen, dass im Inneren wir gießen wird leer verkohlt. Dann zeigen wir ein Verbündetes an, weil wir dich haben, ich und wir werden noch keine Nachrichten sagen. Und dann, wenn wir Nachrichten zeigen können, dann werden wir Nachrichten gießen, Doc Map und wir werden jede Nachricht dem Nachrichtenelement zuordnen. Lassen Sie uns es für Intelligenznachrichtenelement öffnen. Er wird Nachricht Tür i d. Und dann werden wir Nachricht mit einer Nachricht wie dieser übergeben Jetzt innerhalb Nachricht müssen wir diese Eigenschaft de strukturieren. Also lassen Sie uns Nachrichten und hier auf der unteren Ebene D Struktur aus Nachrichten setzen, aber nicht aus Nachrichten. Entschuldigen Sie mich von der Nachricht. Benennen wir es in Nachricht um. Lassen Sie uns speichern, was sich auch an der Nachricht ändert. Und von dieser Nachricht werden wir zerstörerischer Autor Schwierigkeiten D Struktur erstellt an und wir werden Text destructor. Jetzt wird es ein l i Element sein und es wird Klassennamen aus getrennt und Rand unten eins haben . Dann bringen wir Dave hierher. Das wird der oberste Teil unserer Botschaft sein. Und dann werden wir ein anderes def setzen. Und in diesem anderen wird Spanne setzen, die unsere Nachricht selbst erkennt und Klassenname wird Ward brechen alle, um Text vom Überlauf zu verhindern, wenn es zu lang ist. Also für unseren oberen Teil, wir Klassennamen von Display-Flags angeben ausrichten Elemente zentrieren Schriftart wird kühner und Rand unten eins sein , dann hier werden wir gießen Erstes Profil Avatar, Lassen Sie uns es öffnen. Profil für alle Matar. Und jetzt lasst uns Intelligenz verwenden, um importiert zu werden. Also als Quelle gehen wir billiger. Autor Punkt-Avatar für Namen. Wir werden uns oder Doc Name vier Klassennamen einschenken. Es wird Marge übrig bleiben. Eine Größe wird überschüssig sein. Und dann neben diesem Avatar, wir werden Spawn Element setzen, ob wir aus Name und Klassenname angezeigt wird um Rand links zu und nach dieser Wirbelsäule angezeigt wird, wenn diese Nachricht erstellt wurde. Also werden wir die Zeit vor sich bringen. Also lasst uns Raumartikel öffnen. Lassen Sie uns diesen Import aus der Zeit gefangen werden. Legen wir es auf den Kotelett. Rufen wir p zur gleichen Zeit an und legen Sie es hier anstelle dieses Datums. Zeit, die wir anzeigen werden. Gerade erstellt bei und für Klassennamen für Normal und Text schwarz. Wir werden es behalten, wie es ist, aber wir werden auch Marge links anzeigen, um wem? Es war eine Menge. Jetzt schauen wir uns mal an. Wie Sie sehen können, haben wir unsere Botschaften. Und jetzt, wenn ich sagen würde, deine Nachricht ausführe, sagen wir hallo. Sie können sehen, dass es hier drüben erschienen ist. Und auch es wird hier innerhalb der letzten Nachricht erschienen. Also, jetzt haben wir tatsächlich unsere Nachrichten angezeigt werden. Und es wird auch für jeden anderen Chatraum funktionieren. Sagen wir Hallo von hier. Jetzt haben wir eine Nachricht hier drüben. Ok. Perfekt. Also dies ist ein lassen Sie uns unsere Änderungen zu begehen. Lassen Sie uns alles vergessen. Lassen Sie uns sagen, begehen. Und Leute benennen angezeigte Nachrichten innerhalb der Chat-Seite. Alles klar, wir sehen uns in der nächsten. 127. Benutzerprofildaten anzeigen: Hallo. In diesem Video werden wir ein neues Modellfenster hinzufügen. Wenn wir also auf den Benutzernamen eines Benutzers klicken, können wir das Benutzerprofil beobachten. Kommen wir nicht zurück zum Code. Und hier unter Nachrichtenordner, lassen Sie uns Ihre Datei begrüßen. Gemüse-Name Profil-Info. BT und Moto GS. Lassen Sie uns eine neue Komponente erstellen. Und jetzt lasst es uns leer halten. Lassen Sie uns Nachricht Element öffnen. Und hier anstelle des Span-Elements, wo wir Autorenname anzeigen, Lassen Sie uns Profil in für BT und Moto und für diese Komponente anzeigen, weil wir Benutzerdaten erhalten müssen , müssen wir es innerhalb anzeigen. Wir werden Profilstütze passieren und wir werden passieren. Nur Autor und alles andere wird von innerhalb der Komponente verwaltet. Von hier aus werden wir Ihr Profil für jetzt zerstören und den Markt definieren. Also zuerst werden wir Taste setzen und diese Schaltfläche wird sagen, kurzen Namen von unserem Benutzer. Also lassen Sie uns neue lebensfähig hier schaffen, dass wir Kurzname nennen werden und es wird nur auf Lee die erste Abwehr Spitzname spielen . Also, wenn es ein vollständiger Name wie Vorname zweiter Name ist, werden wir nur den Vornamen anzeigen. Also lasst uns Profil-Job-Namen setzen. Dann teilen wir es mit leeren Leerzeichen und dann greifen wir das erste Element. Jetzt werden wir nur den Vornamen anzeigen, weil es Modell sein wird. Wir müssen auch einen sterblichen Zustand bekommen. Also lassen Sie uns unseren Haken verwenden , der Modellzustand verwendet wird. Hier erhalten wir offen, nah und offen. In Ordnung, jetzt neben dieser Leiche und wir werden das Modell gießen. Und in diesem Modell, lassen Sie uns zuerst zeigen Eigenschaft definieren, die sein wird, ist offen und auf Verstecken wird Kleidung als in diesem Moto sein . Wir werden sterbliche Tochter haben, Heather wie immer. Dann werden wir Körper haben und wir werden Fußzeile wie diese haben. Also in Heather werden wir sterbliche Tür Titel haben und innerhalb moralischen Titel werden wir kurze Namen Profil anzeigen, dann innerhalb Körper oder vielleicht innerhalb der Fußzeile, Blase Display unten, die ein Blockelement auf Klick sein wird Es wird schließen unser Moto und es wird gerade über auf nur diese diese Sterbliche als im Inneren Körper schließen. Zuerst werden wir es Klasse Name aus Textmitte setzen Also in einer Blase schlecht genau das gleiche Avatar-Bild wie wir es in Avatar tun. Ein Blut Bt, in dem ja ist, dieses Profil Avatar. Also lassen Sie es uns kopieren und lassen Sie es uns hier setzen. Jetzt importieren wir Profil Avatar. Und daneben zeigen wir H vier an, wo wir den vollständigen Namen dieses Benutzers anzeigen werden. Also lasst es uns zuerst schnappen. CONST. Der Name wird aus dem Profil genommen. Und vielleicht lasst uns auch Avatar schnappen und sagen wir, erstellt bei Also jetzt brauchen wir Teoh die Struktur nicht oder wir brauchen kein Profil hier angeben. Also für dieses Alter, denn wir werden Marge sprechen, um etwas Marge an der Spitze hinzuzufügen. Und dann werden wir Mitglied anzeigen, da und dann werden wir Mitglied seit Variable gießen , die wir erstellen werden. Also lassen Sie uns armen const Mitglied da und wir werden neues Datum erstellen setzen und dann werden wir einfach nur auf lokale Tageszeichenfolge aufrufen, um unser Datum zu ehemaligen. Nein. Also haben wir nicht offen benutzt. Also lasst es uns dafür auf Klick setzen. Okay, gut. Nun lassen Sie uns Nachricht Element öffnen. Sieht gut aus. Sieht gut aus. Jetzt schauen wir uns mal an. Also, wie Sie jetzt sehen können, haben wir den Knopf. Wenn wir darauf klicken, können wir sehen, dass sie 22 aussieht. Profilen Sie unser Bild, vollständigen Namen, Mitgliederszenen und schließen Sie Perfect. Aber ich möchte es nicht so angezeigt werden. Also werden wir nur ein paar Dinge. Alles andere, was an diese Komponente als Requisite übergeben wird, wird zu Knopf-Requisiten umgeleitet . Und lasst uns dieses Def als Rapping-Element loswerden. Lassen Sie es nur eine Taste am Ende sein, so dass alle diese Requisiten an diese Schaltfläche übergeben werden. Also lassen Sie uns Bt und Requisiten Objekt über diese Komponente so verteilen. Also für dieses Profil in vier Beat und Modell, können wir Aussehen passieren, die Link sein wird. Und auch wir können Klassennamen übergeben. Fügen wir Polsterung hinzu. Zito Dan. Lassen Sie uns Rand links und auch Text schwarz hinzufügen. Speichern wir es und schauen wir uns jetzt an. Sieht gut aus. Wenn ich habe oder ich sehen kann, dass es etwas ist, das anklickbar ist. Wenn ich darauf klicke, kann ich Benutzerdaten erhalten. Okay, perfekt. Das ist es also. Jetzt lassen Sie uns unsere Änderungen übernehmen. Holen Sie sich alles, holen Sie sich Commits. Nehmen wir an, die Benutzerdaten mit maro Fenster angezeigt werden. Alles klar, wir sehen uns in der nächsten 128. So fügst du Präsenz – Teil 1: Hallo. In diesem Video werden wir Rial Zeit Präsenz in unserer Anwendung mit Fire Base verwalten. Es ist ziemlich einfach zu tun. Lasst uns herausfinden, wie wir damit umgehen können. Gehen wir zu Google und lassen Sie uns einfach Firebase Riel Zeitpräsenz eingeben. Dann können wir zum ersten Link gebaut Präsenz und Wolkenfeuerladen gehen. Und hier haben wir bereits eine Lösung mit Präsenz in Echtzeit Datenbank. Also müssen wir nur dieses Code-Snippet fangen und es dann in unserer Anwendung verwenden. Also lassen Sie uns erste Kopie ist offline und online für Datenbank Wertsachen und lassen Sie uns zu Profilkontext navigieren . Dies ist der Ort, an dem wir alles umgehen werden, denn hier können wir Zugang zur Authentifizierung bekommen. Objekt mit Echtzeit-Abonnement. Alles klar, also lassen Sie uns trotz eines Bels hier oben setzen und Var durch Constant ersetzen. Jetzt schauen wir uns mal an. Was müssen wir als Nächstes tun? Also müssen wir Database Floß zu Informationen zu erraten verbunden. Das ist also wie ein allgemeiner Weg in Datenbankpfad, auf den wir zugreifen können, und wir können Echtzeitpräsenz aus derzeit angemeldeten Benutzer bekommen . Also lassen Sie es uns einfach kopieren. Oder lassen Sie uns das alles so kopieren, und lassen Sie es uns hier drinnen platzieren. Wenn Authentifizierungsobjekt, Denver wird unsere Echtzeit-Anwesenheitsverwaltung durchführen. Also hier müssen wir Verweis auf vernetzte anstelle von Firebase-Datenbank erhalten. Lassen Sie uns später Basis verwenden, die wir in misc bekommen haben. Feuerbasis. Also dann erhalten wir Verweis auf den Wert verbunden, was in eine schmale Funktion umgewandelt wird als wir erhalten. Snap. Sicher, wenn Snapshot dieser Wert falsch ist. Lassen Sie uns schlecht und drei Personen Gleichheit als Benutzerstatus. Datenbank Ref. Also schauen wir uns mal an. Das ist so wertvoll, dass wir kopieren können. Und das ist der Ort, an dem wir unseren Status in unserer Echtzeitdatenbank speichern. Was wir also tun müssen, weil es ein Echtzeit-Abonnement sein wird, müssen wir es auch in Zukunft abbestellen. Also lasst es uns hier in Yousef als neue Lebensfähigkeit handeln, wir werden es nennen, Benutzer erschreckt Datenbank rau. Lassen Sie uns Datenbank entfernen und lassen Sie uns einfach Benutzerstatus setzen, ref. Dann werden wir Benutzer Starter Ref Datenbank Ralf Status zuweisen und Sie Idee, Lassen Sie uns es hier an der Spitze, einfach so, und stattdessen weg Sie Idee. Lassen Sie uns Ihr i d verwenden und ersetzen Sie es durch die String-Interpolation. Also werden wir beide Objekt Punkt Ihr i d so bekommen, weil es ein Abonnement ist. Wenn wir weggeschaut werden. Lassen Sie uns überprüfen, ob wir den Benutzerstatus haben. Ref, wenn wir es erledigt haben, werden wir uns davon abmelden. Und das gleiche werden wir auch für unsere Bereinigungsfunktion über Heldenbenutzerstudien tun. Grob weg. Okay, perfekt. Jetzt lassen Sie uns diesen Teil verwalten. Also lassen Sie uns alle Kommentare entfernen. Lassen Sie uns das alles entfernen. Und hier werden wir gießen Benutzer begann Riemen auf. Trennen ist offline für Datenbank, dann Funktion. Lassen Sie uns in eine Erwachsenenfunktion umgewandelt. Dann ersetzen wir es durch Ihren Status. Ref. Sad ist online für Datenbank, also ist dies im Grunde es. Jetzt schauen wir uns mal an. Wir haben Feuer. Basis ist nicht definiert. Werfen wir einen Blick. Firebase-Datenbank. In Ordnung. Weniger Import Feuerbasis von Firebase App, so dass wir Zugriff auf Serverwert erhalten können. Male Temp. Speichern wir es und schauen wir uns mal an. Wenn wir drinnen sind,wird uns die Erlaubnis verweigert. Wenn wir drinnen sind, Das ist interessant. Das ist wahrscheinlich etwas mit Sicherheitsregeln. Schauen wir uns an, wo wir unsere Daten schreiben. Äh, huh. genau. Also schreiben wir unsere Daten, um den Status von Ihnen I d. So lassen Sie uns wieder richtige Sicherheitsregeln für diese Vergangenheit innerhalb der Datenbank. Also haben wir den Status. Also nennen wir es diesen Weg. Wir werden es so machen. Also hier werden wir Benutzer I d haben und dann werden wir in der Lage sein, an diesen Ort auf Lee zu schreiben. Wenn wir aus, ich d gleich, um ihre Ideen so lächerlich zu verwenden Kopieren Sie diese Logik und fügen Sie sie hier so ein. Jetzt speichern wir es und schauen wir uns an, ob es tatsächlich funktioniert hat. Wenn ich meine App neu zu machen, kann ich jetzt sehen, dass ich keine Warnungen habe. Also nennen wir es P Gefäße und lassen Sie uns singen schreit sie mit unseren lokalen Daten wie diese. Gehen wir nun zurück zu den Daten und schauen wir es uns hier an. In unserer Datenbank haben wir New Path, das ist Studien, dass ich meinen Benutzer habe, ich d. Und dann habe ich weniger Veränderung und blieb online. Jetzt schauen wir uns mal an. Wenn ich mich von der Anwendung abmelde, habe ich online geblieben, also ist dies, weil wir, wenn wir uns abmelden, haben wir keine geologische für unsere Datenbank, also Onley, wenn wir uns anmelden. Lassen Sie mich mit Google fortfahren und lassen Sie mich mein Konto auswählen. Okay? Ich bin eingeloggt. Sie können sehen, dass die letzte Änderung geändert wurde. Du hast gesehen, wie die Flotte erschossen wurde, oder? Also, was passiert? Dass es tatsächlich funktioniert, wenn wir uns anmelden, aber nicht, wenn wir uns abmelden. Und die Sache ist, weil wir unsere Sicherheitsregeln auf diese Weise setzen, können wir Lee schreiben und lesen, wenn wir von Ihnen haben, ich d. Also, wenn wir unsere von unserer Anwendung einloggen, wenn wir uns abmelden , wird dieses Autorenobjekt auf jetzt gesetzt, so wird das gefeuert. Und wenn wir unsere Logik hier über setzen, wenn wir uns auf diese Weise abmelden, werden wir die Erlaubnis heute Abend bekommen, weil zu der Zeit, wenn wir versuchen, Recht auf die Datenbank des Objekts wird jetzt gesetzt werden. Die Lösung hier ist nur, um zum Dashboard zu gehen. Gehen wir zu Dashboard Tuggle hier. Wir müssen diese Logik eingießen. Also, kurz bevor wir abmelden Mobile Recht auf Datenbank. Wir haben also immer noch Zugang zu unseren Sicherheitsregeln. So können wir immer noch Zugriff auf das Autorenobjekt haben. Und erst dann werden wir unseren Benutzer abmelden. Also, welche Logik sollte hier genau so gesetzt werden, wie wir hier in Benutzerstarter gießen. Refs, das ist. Ah, für Datenwege fliegen. Also, was ich Ihnen von hier an vorgeschlagen habe, werden wir CONST exportieren. Ist ein Fliegen für Datenbank. Dann werden wir diese Logik kopieren. Kurz bevor wir uns von unserer Anwendung abmelden, fügen wir diese Logik ein. Dann werden wir importieren ist offline für Datenbank. Dann werden wir die Datenbank Dodds Ralf gießen, dann werden wir den Status als Schrägstrich setzen. Dann lassen Sie uns Zitate ändern und unseren aktuellen Benutzer pique. Dann werden wir das Set gießen, und dann werden wir ein Fliegen für eine Datenbank so etwas auf Lee setzen, dann weil es ein Versprechen ist. Also lasst uns hier drüben fertig machen. Erst dann werden wir unseren Benutzer abmelden. Wir werden unseren Benutzer alarmieren und unsere Anwendung schließen. Und im Falle eines Fehlers werden wir auch unseren Benutzer benachrichtigen, aber besser. Und wir werden eine bessere Punktbotschaft sagen. In Ordnung, jetzt schauen wir uns mal an. Also lassen Sie mich die App nur für den Fall aktualisieren. Werfen wir einen Blick in die Datenbank. Jetzt haben wir den Status online, und wenn ich mich abmelde, bin ich abgemeldet. Und jetzt bin ich aus der Linie geblieben. So ziemlich cool jetzt, wenn ich mich wieder unterschreibe, ich bin angemeldet und der Status wurde geändert. Und jetzt, wenn ich meine Anwendung schließe, wenn ich meinen Tab schließe, kann ich sehen, dass Zustand ein Fliegen ist, also funktioniert es tatsächlich. Und das ist es. So kann es mit Feuererhöhung gehandhabt werden. Es war ziemlich einfach, oder? Das einzige, was ich hier tun möchte, ist, dass ich mich tatsächlich auch von referenzierten oder info dot connect abmelden möchte, wenn wir abgemeldet sind. Also lassen Sie uns ausgießen, wenn wir unsere unterzeichnet sind und auch wir werden das gleiche für die Bereinigungsfunktion setzen , nur für den Fall. Auf diese Weisebehandeln wir alle Echtzeit-Abonnements und alles funktioniert gut. Auf diese Weise Nun, das war's für dieses Video. Also lassen Sie uns begehen. Unsere Veränderung wird alles in den Bühnenzustand bringen. Und dann werde ich alles mit Nachricht begehen. Ich werde sagen, eine Riel Zeitpräsenz, Zuhörer für einen Benutzer. Perfekt. Im nächsten Video werden wir eine Echtzeitpräsenz für Benutzer im Chat-Fenster anzeigen. Wir sehen uns dort 129. So fügst du Präsenz – Teil 2: Hey, da. In diesem Video werden wir Echtzeitpräsenz für jeden Benutzer, den wir im Chat sehen, anzeigen. Es wird als Dar vor Benutzer Avatar angezeigt. Gehen wir, bevor wir damit anfangen. Ich möchte darauf hinweisen, dass wir im vorherigen Video, als wir die Echtzeitpräsenz für jeden Benutzer hier verwaltet haben, diesen Vergleich gemacht haben. Wenn der Snapshot-Wert als die dreifache Gleichheit gleich false ist, ist dies also nicht ganz richtig, da dieser Wert möglicherweise kein Bowling ist. Um das zu verhindern, lassen Sie uns tatsächlich doppelte Negation setzen, um es in eine Bowline umzuwandeln. Und jetzt wird alles gut. Alles klar, jetzt fangen wir an. Also, was müssen wir zuerst gehen? Wir werden einen benutzerdefinierten Haken erstellen, der uns die Anwesenheit von besonders Benutzern geben wird. So können Sie zu benutzerdefinierten Hooks navigieren. Und hier unten, lassen Sie uns exportieren und Sie funktionieren, die Präsenz verwenden wird. Und dieser Haken wird Benutzer I D empfangen , dass wir Präsenz aus bekommen wollen. Also lassen Sie uns unseren Zustand für Präsenz schaffen. Wir werden es Präsenz und die Anwesenheit nennen. Es wird ein einfacher Verwendungszustand sein, der standardmäßig davon ausgegangen wird, dass er weiß. Dann in dir die Tatsache, dass wir unsere Benutzerdaten ziehen werden. Also zuerst müssen wir Referenz bekommen. Also lassen Sie uns große const Benutzerstatusdiagramm würde Datenbank von Firebase dot treff sein dann begann ein schlechter Status Schrägstrich Ihr I d, dass wir als Argument bekommen, dann müssen wir ein Array von Abhängigkeiten gießen, als wir brauchen, um Ihre i d innen zu übergeben. Dann werden wir schlechte Benutzerstatus Rough dar auf Wert. Dann werden wir kurz drängen, und gleich danach werden wir prüfen, ob Snapshot existiert. Also, wenn es einen Datensatz innerhalb der Datenbank für diesen Pfad gibt, dann werden wir const-Daten gleichen Snapshot-Punktwert gießen. Und dann werden wir Daten anwesend machen, Ordnung. Und innerhalb der Bereinigungsfunktion werden wir den Benutzerstatus Raft, Benutzerstart abbestellen . Es ist grob dran. Und von diesem Haken, werden wir Präsenz zurückkehren, richtig? Perfekt. Sieht gut aus. nun Lassen Sie unsnuneine Komponente erstellen, die ein Punkt sein wird, wo wir die Benutzerpräsenz anzeigen werden. Also gehen wir zu Komponenten. Und hier weniger toll. Sie Datei Gemüse-Namen Präsenz Punkt der g s Also in dieser Komponente werden wir unsere Custom Koch nennen, die Verwendung Präsenz ist. Also lassen Sie uns schlechte const Präsenz gleich verwenden Präsenz. Und wir werden Ihr I D übergeben , das als Requisite für diese Komponente erhalten würde. Dann innerhalb des Markups werden wir das nächste Mal unsere Anzugdokumentation öffnen. Dann lassen Sie uns nach Tooltip suchen. Öffnen wir es. Lassen Sie uns ein Beispiel aus Auslösen von Ereignissen Hover finden. Also brauchen wir genau diese Funktionalität. Gehen wir zu Beispielen und lassen Sie uns das kopieren. Dann werden wir es in unserem Hof so platzieren. Lassen Sie uns flüstern von unserem Seher und statt der Schaltfläche, werden wir einen Batch und Tooltip wird nicht dieser Tool-Tipp angezeigt. Es wird diese Komponente sein. Lassen Sie uns es kopieren und lassen Sie es uns so stützen. Jetzt müssen wir auch Tooltip und Innen Tooltip importieren. Wir werden nichts platzieren. Für den Moment, aber es sagt, dass leere Komponente sich selbst zu schließen und Sie sind direkt drinnen. Wir werden Abzeichen auch von unserem Anzug und Insider-Charge setzen Nun, eigentlich nichts setzen. Es wird nur ein Pfeil aus etwas Farbe sein. Also, jetzt müssen wir bekommen, was wir in Tooltip setzen. Und was werden wir innerhalb Charge setzen, welche Farbe angezeigt wird? Nun, wir müssen tatsächlich eine Logik ausführen, und der beste Ort, um damit umzugehen, ist tatsächlich, eine benutzerdefinierte Funktion zu erstellen, die wir von hier aus aufrufen werden . Also für diese Abzeichen werden wir den Klassennamen aus dem Auto zeigen, Sir. Zeigen Sie ihr und Stil Hintergrundfarbe wird erhalten Farbe, die wir in einem Moment erstellen und im Inneren werden wir Präsenz wie diese und für Tool-Tipp für unseren Text übergeben. Wir werden passieren, SMS bekommen. Und wir nennen es wäre Präsenz so. Also, jetzt müssen wir diese beiden Funktionen erstellen, So können wir hier nach oben navigieren. Und zuerst werden wir Farbe schaffen. Wir werden Präsenz erhalten. Und zuerst, wenn Präsenz undefiniert ist oder wenn es jetzt ist. Also, wenn es nicht definiert ist, dann werden wir tolle Farbe zurückgeben, richtig? Dann werden wir Switch-Anweisung setzen und dann werden wir zwischen Präsenzdarstellung wechseln. Lassen Sie uns unsere Datenbank Präsenz Punkt Zustand öffnen. Dann, wenn wir Fall online haben, dann werden wir grüne Farbe zurückgeben. Wenn wir Fall aus Lügen haben, dann werden wir Rad-Farbe anzeigen und standardmäßig werden wir auch großartig wie diese anzeigen. Also für Farbe, wir jetzt lassen Sie uns dies für Text erstellen. Also lassen Sie uns definieren, erhalten Text mit Anwesenheit als auch. Und wieder prüfen wir gegen keinen Wert. Wenn wir also keine Anwesenheit haben, werden wir in keinem Staat aufzeigen. Dann werden wir die Staaten wieder anwesend sein. Wenn es gleich zwei online ist, dann werden wir online zurückkehren. Sonst werden wir Lust online zurückgeben, als wir String-Interpolation öffnen, als neue Datumspräsenz zu setzen . Lust hat sich verändert. Zwei lokale Dates trinken so. Okay, perfekt. Nun wollen wir diese Komponente tatsächlich verwenden. Lassen Sie uns zum Nachrichtenelement navigieren. Und kurz bevor wir Profil Avatar anzeigen, lassen Sie uns Präsenz nicht verwenden. Und lassen Sie uns Ihre Idee als Autor Dot Ihr I d übergeben. Moment werfen wir einen Blick. Und tatsächlich, wenn meine App jetzt vor meinem Profil frisch ist, kann ich grünen Punkt sehen Und wenn ich schwebe, kann ich online sehen. Wie können wir nun gegen mehrere Benutzer getestet werden? Nun, lassen Sie mich abmelden und lassen Sie mich mit Facebook schauen, so dass es mich und Sie Benutzerprofil erstellen und wir werden es sehen So jetzt können Sie Dad sehen. Es ist unbekannter Zustand Und das ist, weil, wie Sie sich erinnern im vorherigen Video, setzen wir Sicherheitsregeln für den Status Schrägstrich Benutzer I d. So können wir Onley unseren aktuellen Benutzer lesen. Ich d gleich zwei Benutzer ich d, dass wir versuchen, innerhalb von acht immer zuzugreifen. Jetzt haben wir die Erlaubnis heute Abend. Nun, um das richtig zu beheben, werden wir es so behalten, wie es ist. Aber für regionals wir angepasst und wir werden sagen, wenn nicht gleich Schnee auf Lee, dann werden wir in der Lage sein, Benutzerdaten zu lesen. OK, jetzt kopieren wir es und synchronisieren es mit unseren lokalen Daten. Lassen Sie uns sagen, wo und jetzt werfen wir einen Blick. Wenn ich meine App jetzt aktualisiere, sieht es in Ordnung aus. Und wenn ich schwebe, kann ich zuletzt online an diesem Datum sehen, so dass es tatsächlich funktioniert. Und wenn ich hallo sage, kann ich sehen, dass ich derzeit online bin und andere Benutzer offline ist. Also das ist es und es funktioniert ziemlich genial. Lassen Sie uns unsere Änderungen begehen. Lassen Sie uns gießen, bekommen alles Land, begehen und lassen Sie uns dieses Spiel für Echtzeitpräsenz für eine Tatsache gießen. Wir sehen uns im nächsten 130. Edit hinzufügen: Hallo. In diesem Video werden wir Drover zum Chat hinzufügen, wo wir in der Lage sein, es Rauminformationen wie Raum, Name und Beschreibung hinzuzufügen Raum, . Lass uns gehen. Kommen wir nicht zurück zum Code und suchen wir unseren Top-Ordner. Und hier im Index-Togs war einfach öffnen Sie es neben dieser Datei. Lassen Sie uns jeden erstellen, den wir Edit Room BTM Drover Inside nennen werden wir den nächsten Markt setzen . Also zuerst werden wir Buttonelement verwenden und drinnen werden wir nur einen Brief setzen, der für admin steht. Dann Klassenname wird Grenze Radios Kreis als Größe wird kleine Farbe rot sein und auf Klick. Wir werden offenen Handler setzen, den die Leute von der Verwendung Modell State Hook greifen, das wir oft benutzt haben . Wie für jetzt, Also lasst uns grub ist offen, offen und schließen. Jetzt müssen wir das moralische Fenster schaffen. Also lasst uns von Drover grüßen. Lassen Sie uns aus RC oder so in diesem Rover importiert werden, werden wir Show-Eigenschaft gießen, die offen sein wird als auf. Hyde wird Kleidung sein und Platzierung wird richtig sein und das gleiche wie für Modelle. Drover hat Drover Header Körper und für so lassen Sie uns diese Komponenten erstellen. Innerhalb Fußzeile werden wir eine weitere Schaltfläche gießen, die nur sein wird, um den Drover zu schließen, so wird es ein Block Elemente und auf Klick werden wir unsere Drover in Heather zu schließen, wir gehen zu gießen, fuhr oder Titel und für Drover Titel, wir werden den Edit Room All jetzt, eigentlich, für Drover Body gießen eigentlich, , bevor wir es definieren. Lassen Sie uns diese Komponente tatsächlich innerhalb der oberen Komponenten verwenden. Also lassen Sie uns Index-Zahnräder innerhalb des oberen Ordners und hier innen öffnen. Aber in der Werkzeugleiste Lassen Sie uns dabei Raum VT und Drover verwenden, das ist es. Jetzt in unserem Körper wurden definieren, Elemente eins für Raumnamen und 14 Raumbeschreibung zu importieren und wir werden unsere Edita ble Eingabe verwenden, die wir früher verwenden. Also lasst uns diese Komponente öffnen und dann lasst uns wichtig. Also für Ed Izabal Eingabe müssen wir den Anfangswert übergeben. Also holen wir uns das aus unserem aktuellen Raumkontext. Also hier an der oberen Blacks Board, Name gleich verwenden aktuellen Raum und wir werden Wert Punkt-Namen und das gleiche, was wir für die Beschreibung tun . Also lasst es uns schnappen. Und auch, lasst uns diese Komponente umwickeln, Säugetier. Also lassen Sie mich Memo hier drüben und lassen Sie mich es so importieren. In Ordnung? Jetzt müssen wir unsere Komponenten setzen. Also für den Edit Herbal Import für die erste Eingabe, die über Name sein wird, wir den Anfangswert-Namen übergeben, als wir auf sichere Funktion zur Verfügung stellen müssen und lassen Sie es auf Namen sicher sein . Wie für jetzt, dann werden wir Etikett und Etikett setzen wird Ahh sein, sechs Element mit Klasse. Name außerhalb des Randes, unten zwei. Dann wird es Name sein. Und auch leere Nachricht wird genannt Kann leer sein. In Ordnung. Unsere zweite in Armen wird ein Textbereich im Hafen sein. Also lassen Sie uns die kompetente Klasse beruhigen. Es wird Textbereich stieg standardmäßig fünf sein. Dann werden wir auch Anfangswert als Beschreibung gießen, als wir unsicher setzen werden, was auf Beschreibung sicher sein wird und auch leere Nachricht wird Beschreibung kann nicht leer sein. In Ordnung, jetzt speichern wir es und definieren wir diese Funktionen. Also zuerst werden wir auf Namen sicher erstellen, und dann werden wir eine eigene Beschreibung sicher erstellen. Und weil unsere Funktionalität sehr ähnlich ist, werden wir eine gemeinsame Funktion erstellen, die innerhalb jeder dieser Funktionen aufgerufen wird . So wird es sein, sagen wir, aktualisieren Daten von Tagesdaten, und es wird Schlüssel erhalten. Oder sagen wir Feld, was wir aktualisieren müssen und auch den Wert tatsächlichen Wert, der traurig zu diesem Schlüssel sein wird . In Ordnung, jetzt, im eigenen Namen Save. Wir werden Update-Daten mit dem Namen als Schlüssel und auch neuen Namen aufrufen , der als Argument an diese Funktion übergeben wird, weil wir diesen Handler an glaubwürdige Eingabe übergeben haben . Und wie Sie sich erinnern, wenn wir es öffnen, gibt es uns den endgültigen Wert. In Ordnung, also das gleiche werden wir für die Beschreibung sicher hier tun, wir werden Beschreibung und neu setzen. Sagen wir, Schreibtisch wird ein neuer Schreibtisch. Also innerhalb der Daten werden wir Datenbankobjekt aufrufen. Dann werden wir Verweis auf Zimmer Schrägstrich Raum I D oder Chat i d angeben also werden wir das von der Verwendung Haram greifen. Also lasst uns teilen i d von der Verwendung Programme greifen. Lassen Sie uns schlechter Import an die Spitze. Und dann für diese Referenz, wir angeben, dass Child wird Schlüsselsatz wird Wert sein. Danach. Wenn wir mit dem Schreiben von Daten in die Datenbank fertig sind, werden wir Alarm aufrufen, und wir werden den Erfolg erfolgreich aktualisiert und lassen Sie es für vier Sekunden setzen. Und falls wir einen Fehler haben, werden wir auch Alarm sagen, aber diesmal besser. Und wir werden unsere Botschaft so setzen. Alles klar, sieht gut aus. Lassen Sie uns diesen leeren Raum löschen. Lasst uns sparen und schauen wir uns mal an. Jetzt haben wir diesen A-Button oben rechts. Lasst uns darauf klicken. Wir haben Drover und das erste Problem. Ich sehe, dass wir hier keinen Spielraum haben, also wenn wir inspizieren, können wir sehen, dass, wenn wir die Importgruppe öffnen und wir müssen, Dave hier drüben ist und sie im Grunde keinen Spielraum haben. Also lasst uns unseren glaubwürdigen Import öffnen. Also müssen wir etwas Platz für dieses Def gießen, oder es kann eine Option sein. Also, was ich vorgeschlagen habe zu tun, können wir ein weiteres Argument an glaubwürdige Eingabe übergeben, die Räuber Klassenname sein wird und standardmäßig leer sein wird. Also dann werden wir diesen Rapper-Klassennamen an diesen Dieb Klassennamen übergeben und was wir tun werden Es wird mit verdammten navigieren sagen, Sie waren glaubwürdige Eingabe. Und für Textbereich begann ein spezifizierter Rapper schließen Name wird Rand oben drei sein, um etwas Platz oben darauf hinzuzufügen , lassen Sie uns einen Blick. Jetzt kann ich sehen, dass es gut aussieht. Nun lassen Sie uns tatsächlich einige Daten bearbeiten. Kann neuer Name Rom sein. Und wenn ich sage, wo ich erfolgreich sehen kann, aktualisiert und Raumname wurde aktualisiert. In der Tat. Okay, kalt. Aber es gibt ein Problem uns. Denken Sie daran, mit Räubern sind sie nicht genau ansprechbar. Also, was müssen wir tun? Wir müssen die volle Eigenschaft an diesen robur weitergeben, wenn wir auf mobilen Geräten sind. Also werden wir verwenden Media Query Hook hier oben. Wir geben an, dass sein Handy benutzt wird. Medienabfrage. Und hier werden wir Markierungen mit off 99 2 Pixel angeben. Dann gehen wir vorbei. Dies ist mehr Galle bis zum vollen Eigentum und es wird nur aktiviert, wenn wir auf mobilen Geräten sind . Also, wenn wir es öffnen und wir präzisieren das Fenster, es sieht immer noch gut aus. Okay, das ist es, schätze ich. Jetzt lassen Sie uns unsere Änderungen übernehmen. Lassen Sie die Menschen alles auf die Bühne. Staat ist immer und dann begangen werden. Bearbeitungsraum hinzugefügt. Drover. In Ordnung. Im nächsten Video werden wir unserem Raum mehr Sicherheit hinzufügen, da , wie Sie sehen können , vorerst wir es, wie Sie sehen können, vorersthinzufügen können. Dieser Raum, obwohl wir nicht zugelassen sind, weil wir keine Benutzerberechtigungen haben. Das ist also unser Thema für das nächste Video. Wir sehen uns dort. 131. Role-based und Sicherheitsregeln: Hey, da. In diesem Video verwalten die Menschen unsere rollenbasierte Sicherheit auf bestimmten Füllungen. Wenn wir versuchen, es hinzuzufügen. Zimmerinformation, Los geht's. Also, zuallererst, wie wir unsere Rollen definieren werden. Wenn wir unsere Struktur in Räumen öffnen, können wir sehen, dass wir bei Beschreibung, letzte Nachricht und Name erstellt haben . Also hier werden wir auch eine weitere Eigenschaft hinzufügen, die wird zugibt. Und mit Echtzeit-Datenbank können wir ein Rennen schlecht machen oder wir können. Aber sie sind wirklich schlecht verwaltet, weil von seinem schlechten Abfrage-Builder-System, weil wir von seinen schlechten Abfragen auf der Echtzeitdatenbank unsere Edmonds als Array von Benutzer-IDs setzen. Also, wenn der Benutzer zu diesem Array gehört, bedeutet dies, dass der Benutzer ein Administrator ist und es nicht als Array setzen wird. Wir werden ein Objekt in unserer Datenbank erstellen, und jeder Schlüssel wird Benutzer i d sein. Und wenn dieser Benutzer ein Administrator ist, dann wird es auf true beraten gesetzt. Dieser Benutzer befindet sich nicht in der Datenbank. In Ordnung, also zuerst, was wir tun müssen, müssen wir einen Benutzer zu unseren Daten hinzufügen. Gehen wir zu, sagen wir neuen Raumnamen. Oder vielleicht lassen Sie es uns in etwas Spezifischeres umbenennen. Sagen wir cool, lassen Sie es uns retten. Und nun lassen Sie uns hier durch diese Datenbank navigieren. Wir werden ein neues Feld hinzufügen, das wir zugibt, als wir hier auf Pluszeichen klicken werden. Dann müssen wir unseren Benutzer I d setzen Was wir tun können, können wir zum Profilkontext gehen. Und dann, wenn wir aus Objekt, lassen Sie uns Konsul Ankläger i d unseren Benutzer i d zu bekommen. So jetzt kann ich mich von Benutzer I d gefangen und setzen Sie es in Datenbank und dann setzte Wert auf true und dann auf Raumdaten bearbeiten So sieht es so aus. Nun, um den Zugriff zu beschränken, müssen wir Sicherheitsregeln definieren, so können Sie zu Regeln navigieren. Und hier werden wir das nächste, was für unsere Zimmer Weg tun. Wir werden das richtige Eigentum entfernen, so dass es von hier abgeholt wird, so dass niemand tatsächlich zwei Zimmer Pfad rechts kann , aber sie sind in der Lage, Räume zu lesen als für Zimmer I d. Stattdessen, off schreiben Sie es so. Wir können die Regel nicht neu erstellen, sondern auch für die letzte Nachrichteneigenschaft, die so ist. Wir bringen uns zu beruhigen, oder? Regel sagte, abschalten nicht gleich Nein, Lassen Sie mich für Schlamm es so. Dies liegt daran, wenn Sie sich erinnern, wenn wir Daten an mehreren Stellen aktualisieren, wir aktualisieren auch die letzte Nachricht in unserem Zimmer. Im Grunde genommen kann jeder, der zum Chat schreibt, die letzte Nachricht im Raum aktualisieren, aber nicht andere Felder wie Raum, Name und Beschreibung. Hier werden wir Modelle für genau diese Gefühle definieren, so für Raumidee, wir sind in der Lage, Daten zuerst zu schreiben, wenn die Daten nicht vorhanden sind. Wenn wir versuchen, und Sie Zimmer zu schaffen, werden wir angeben, ob Daten. Diese Daten sind also wieder ein globales Objekt innerhalb von Sicherheitsregeln und stellen die aktuellen Daten dar , auf die wir zugreifen möchten. Also, wenn Daten vorhanden sind, so ist es eine Bowline in der Lage, in diese Vergangenheit zu schreiben, wenn Daten nicht vorhanden sind. Also, wenn wir versuchen, einen neuen Raum mit dem spezifischen Raum I d zu erstellen, oder wenn wir ein Admin sind, dann werden wir in der Lage sein, diese Informationen zu schreiben und zu bearbeiten. Also, wie können wir das tun? So wissen wir, dass wir es unter hinzufügen Männer speichern, dann haben wir Benutzer I d und wahr. Mit einer Datenbank mit Sicherheitsregeln funktioniert es also so. Ich habe die Dokumentation für Echtzeitdaten geöffnet, im Grunde Rituale. Und hier habe ich diese Information beschränkt. Wenn ich ein wenig nach unten scrolle, kann ich diese Informationen finden, auf die ich zugreifen kann, indem ich diesen Ansatz verwende. Also werde ich genau das gleiche Muster verwenden und was ich tun werde. Ich werde fragen, ob Daten, auf die wir zurzeit zugreifen wollen, Kinderzulassungen haben. Dann haben wir in diesem bei Mons Child ein weiteres Kind, das unser Benutzer sein wird. Und wir können es von beiden Objekten bekommen. Also werden wir fragen, ob Kind off dot Ihr i d dot Wert gleich zwei ist. Wahr. Also, wenn wir einen Datensatz für unseren Benutzer in Edmunds gefüllt haben, dann werden wir in der Lage sein, auf diesen Pfad zu schreiben. Jetzt speichern wir es und schauen wir uns mal an. Nun, wenn ich ein Admin von dieser kalten Gruppe bin, werde ich darauf klicken. Ich werde in der Lage sein, es zu bearbeiten, weil wir unseren Benutzer I d in die Datenbank bearbeiten. Nehmen wir an, dass etwas Zufälliges jetzt erfolgreich aktualisiert wird. OK, jetzt lassen Sie uns zu einem anderen Raum navigieren Wenn wir kein Admin sind, Lassen Sie mich versuchen, es zu bearbeiten. Hallo Welt. Wenn ich jetzt versuchen werde, es zu genießen, werde ich heute Nacht Erlaubnis bekommen, damit unsere Sicherheitsregeln funktionieren und das ist ziemlich cool. Und deshalb haben wir jetzt den Zugriff auf unsere Datenbank eingeschränkt. Aber auch wir müssen es programmatisch verwalten, müssen wir Männer usw. hinzufügen. Also lasst uns das auch tun. Also lassen Sie uns navigieren, um Raum zu schaffen, Strand Hand Modell. Und hier wird Wasser tun. Wenn wir einen neuen Raum schaffen, werden wir uns hinzufügen, um Männer hinzuzufügen. Also, hier, wenn wir in Ihren, ähm, Daten definieren ähm, , werden wir auch ein neues Objekt hinzugefügt Beans hinzufügen. Und wir werden uns spezifizieren. Lassen Sie uns an erster Stelle importieren. Ja, es wurde aus dem aktuellen Benutzer importiert, Ihr I d ist auf true gesetzt. Jetzt, wenn wir in Ihrem Zimmer hinzufügen, setzen wir uns als Admin ein. Als Nächstes , müssen wir wissen,wer Adnans genau gehört. So können Sie zu Chatel gs navigieren und hier für einen aktuellen Raum. Wir werden das nächste tun, weil es ein Objekt ist und wir mit I raise arbeiten müssen Idealerweise, wenn wir in unserem Code arbeiten, müssen wir dieses Objekt in ein Array verwandeln. Also lassen Sie uns hier erstellen. Neue, wertvolle Ad-Mons und Insider-Helfer. Wir werden eine neue Funktion definieren, die unser Objekt nur in ein Array transformiert. Wir werden es also genau so nennen, wie wir es mit dieser Funktion getan haben. Aber wir werden sagen, transformieren Sie sich hier einfach in Array. Wir werden Snapshot-Wert wieder erhalten und lassen Sie mich definierte Funktionstastatur, und diese Funktion wird ziemlich einfach sein. Also, wenn Snapshot 12 existiert, dann werden wir Objektschlüssel von diesem Snapshot-Wert zurückgeben, so dass wir ein Array von Benutzer-IDs erhalten . Andernfalls beginnen Sie eine Rückkehr und leeren Sie Sofort sagen wir diese Helfer und lassen Sie uns es im Inneren verwenden. Chatterjee ist hier. Wir werden uns in Array verwandeln. Sagen wir, die heutige Zimmertür Adnans und jetzt haben wir die Verwaltung. Aber auch wollen wir wissen, ob wir derzeit angemeldet sind Benutzer ist ein Admin. Also was? Wir sind zu dir gekommen. Wir können ein neues Wertvolles ist Admin erstellen und wir werden einfach fragen, ob Zulassungen diesen aktuellen Benutzer Punkt Ihrer i d enthalten und wie wir es diese Daten zusammen mit dem Kontext weitergeben können . Also lassen Sie uns passieren, gibt zu und ist admin. Von nun an werden wir in der Lage sein, diesen Drover Onley zu zeigen, wenn wir zugeben. Also, jetzt lasst uns Teoh unser oberstes Teil navigieren. Lassen Sie uns zu Index-Togs innerhalb des oberen Ordners navigieren und aus dem Kontext hören. Wir werden seinen Admin nutzen den aktuellen Raumwert zu greifen. Der Wert ist Admin so. Und jetzt werden wir fragen, ob wir Admin Onley sind, dann werden wir in seinem Zimmer Bt und Drover zeigen. Werfen wir einen Blick in diesen ersten Raum, wo wir der Admin sind. Wir können diesen Drover sehen, und wir sind in der Lage, es hinzuzufügen. Rauminformationen wurden erfolgreich aktualisiert. Aber in dem Raum, in dem wir nicht zugeben, werden wir nicht in der Lage sein, diesen Drover zu sehen. Und auch werden wir nicht in der Lage sein, es zu aktualisieren, weil wir Sicherheitsregeln gesagt. Lassen Sie uns tatsächlich die Sicherheitsregeln kopieren. Und lassen Sie uns sie mit ah, Kriegseinheimischen synchronisieren . Öffnen Sie Datenbankregeln und fügen Sie sie hier ein. In Ordnung. Es scheint gut zu sein. Haben Sie das dort, wo es noch eine Sache an unseren Sicherheitsregeln gibt. Wenn wir unseren Rat inspizieren, können wir sehen, dass wir diese Firebase Warnung haben, dass Ihre Daten niedriger sind und sie bei Ablehnung filtern . Erwägen Sie, den Index auf der Raumidee bei Nachrichten zu beenden. Also lasst uns das machen. Das ist, um unsere Abfragen noch leistungsfähiger zu machen. So können Sie zu Regeln navigieren. Und, lasst uns sehen, erwägen, Index auf Raum I d hinzuzufügen. bei Nachrichten. Lassen Sie uns das kopieren. Und diese Nachricht ist, dass wir es hier drüben so hinzufügen. Jetzt lassen Sie uns probieren und schauen, ob wir diese Warnung noch haben können, okay? Im Moment ist unser Rat klar. Ich sehe keine Warnung. Lassen Sie uns wieder unsere Regeln kopieren und fügen Sie sie ein. Teoh, unsere Datenbank-Regeln, Jason so. Okay, das ist es also für dieses Video. Auf diese Weise werden wir unsere Sicherheit verwalten. Jetzt lassen Sie uns unsere Änderungen übernehmen. Lassen Sie uns bei allem in den Bühnenzustand. Und dann lassen Sie uns Änderungen mit den Update-Sicherheitsregeln für die rollenbasierte Berechtigung übernehmen. Und das ist alles. Alles klar, wir sehen uns in der nächsten. 132. Role-based: Hey, da. In diesem Video werden wir Schaltfläche hinzufügen, um rollenbasierte Berechtigung verwalten zu können. Also, wenn wir auf jemandes Benutzerprofil klicken, wenn wir derzeit sind und waren aus dieser Gruppe, wir sind in der Lage, diesen Benutzer zu erstellen und war auf Let's not get back to code gewesen. Und lasst uns aufmachen, schätze ich. Nachricht Element. Also hier werden wir eine kleine Änderung an Profil-Info, BT und Modell tun. Also lasst es uns öffnen. Und hier wollen wir diese Schaltfläche hier unten anzeigen. Wie können wir das tun? Nun, es ist eigentlich einfach. Wir können einige Kinder an diese Komponente übergeben und sie werden hier angezeigt. Also hier im Seitenprofil in vier Milliarden Modell, wir werden auch d Struktur Kinder und dann die Kinder, die wir in der Fußzeile direkt vor unserem Schließen-Knopf angezeigt werden . Jetzt lass es uns retten. Lassen Sie uns nicht mit einem Nachrichtenelement interagieren. Und hier für Profil in für Betty Anne Morrow, lassen Sie uns einen anderen Boden passieren, so dass dieser Boden ein Blockelement sein wird, und auf Klick wird etwas, das in ein paar Sekunden definieren wird. Außerdem wird es Farbe blau haben und Text wird der nächste sein. Also, zuerst müssen wir definieren, wann diese Schaltfläche angezeigt wird. Vielleicht, lasst uns kommentieren. Und hier lassen Sie uns ein paar schlechte Äpfel kreieren und es zuerst so zum Vortrag bringen. Okay, also müssen wir zuerst definieren, ob wir Admin-Berechtigung erteilen können. Dafür müssen wir unsere kontaktierten Daten erhalten. Also lassen Sie uns Admin von der Verwendung aktueller Raum bekommen. Lassen Sie mich das Auto in den Raumkontext öffnen, dann lassen Sie mich den Haken importieren und vom Wert Begin ein Peak ist admin. Und wir brauchen auch andere Eingeständnisse. Verwenden Sie also den aktuellen Raumwert. Wert gibt so zu. Dann lasst uns unser Nachrichtenelement um Memo wickeln, weil wir Kontextselektor verwenden und hier werden wir das nächste tun. Zuerst müssen wir wissen, ob Nachrichtenautor ein Admin ist. Also lassen Sie uns seine Nachricht Autor Admin erstellen und wir werden Edmunds fragen Inklusive Autor, Autor Tür Sie I d. Dann müssen wir wissen, ob wir der Autor der Nachricht sind, damit wir seinen Autor von Essbar erstellen und wir können uns aktuelle fragen. Lassen Sie uns aus dem aktuellen Benutzerpunkt importieren Ihr I d gleich Autor indoor Sie d mag dies. Und dann können wir eine andere essbare erstellen, die nennen lassen Sie uns sagen, kann Zugriff gewähren oder Admin gewähren. Und wir können Admin-Berechtigung erteilen, wenn wir Mons selbst hinzufügen. Und auch, wenn wir nicht Nachrichtenautoren sind, so können wir jetzt all diese Wertsachen verwenden, um unsere Schaltfläche bedingt anzuzeigen . Also zuerst werden wir arm. Wenn wir gewähren Admin nur getan, wir werden diese unten und auch für die Nachricht angezeigt Wir werden seine Nachricht setzen, Autor admin. Dann sagen wir, Admin-Berechtigung entfernen. Wie sonst werden wir sagen, geben Sie Admin in diesem Raum so etwas. Okay, jetzt, schauen wir mal, was wir getan haben. Lassen Sie mich erfrischen. Nur für den Fall, wenn ich dieses Profil geöffnet, Ich kann sehen geben admin in diesem Raum. Wenn ich klicke, passiert nichts, weil wir keine Funktionalität definiert haben. Also lassen Sie hier navigieren und alle Funktionen, die wir in Nachrichten Komponente gießen werden, und dann werden wir diese Funktionalität an Nachricht Element übergeben. Okay, also für Nachricht Element hier, wir werden sagen, behandeln Admin-Funktion, die wir übergeben werden, dass wir bekommen. Und für diesen Griff admin. Wir werden passieren. Sagen wir, Autor Punkt Ihr I d. Alles klar, jetzt müssen wir diesen Griff Admin von Requisiten bekommen und lassen Sie uns zu Nachrichten navigieren. Und hier werden wir konstante Handle admin definieren, und lassen Sie uns es im Voraus mit Verwendung zurückrufen optimieren, weil wir es an untergeordnetes Element übergeben . OK, so dass dieser Handle admin wird Ihre i d erhalten und dann lassen Sie uns zuerst unsere Edmunds ref innerhalb der Datenbank definieren, so dass wir ein Call-Datenbankobjekt . Dann Referenz wird Räume sein, als es wird Chat I d sein. Dass wir bereits von Gebrauch Dauerwellen haben und dann Schrägstrich voraus. In Ordnung, jetzt müssen wir Chat-Ideen eine Abhängigkeit hinzufügen und hören, was wir tun müssen. Wir müssen unseren vorherigen Wert tatsächlich erhalten, um ihn auszulösen. Wenn wir also auf diesen Button klicken und wir die Erlaubnis erteilen möchten, dann wird es an ihm sein. Andernfalls, wenn dieser Benutzer bereits über die Berechtigung verfügt, möchten wir sie widerrufen. Also tatsächlich, um es mit Echtzeit-Datenbank zu tun, wenn wir seine Dokumentation öffnen, können wir diesen Abschnitt unter dem Lesen der richtigen Daten speichern Estrin Abschnitte sehen. Auf diese Weise sind wir in der Lage, Zugriff auf den vorherigen Wert zu erhalten und wir können ihn aktualisieren. Und am wichtigsten ist, es ist Transaktion. Es bedeutet, dass Daten nicht beschädigt werden. Also lassen Sie uns tatsächlich genau den gleichen Ansatz verwenden. Also lassen Sie mich kopieren all das und was ich dio werde ich nennen erwarten, was diese Ausgabe Rennfunktion umwandeln . Rufen wir Ausweichen hinzufügen Männer Ralf Dar-Transaktion. Dann erhalten wir unseren aktuellen oder vorherigen Wert , der Einlass sein wird und hören, was wir sagen werden. Ich werde den gleichen Code einfügen, den ich kooperiert habe, und hier werde ich fragen, ob Zulassungen existieren . Nur dann werde ich meine Logik ausführen. Also, wenn es gibt, dann möchte ich fragen, ob es zugibt, dass Sie ich existieren. Dann möchte ich den Zugriff widerrufen. Also werde ich zugeben, dass ich es weiß. Und wenn wir Wert setzen, um für Echtzeit-Datenbank wissen, wird es aus der Datenbank gelöscht werden, weil Sie tatsächlich keine Werte dort speichern können. Also, wenn wir nicht die Erlaubnis haben, dann werden wir grunzen. Also voraus, dass Ihr i d auf True gesetzt wird. Lassen Sie uns nun den Rest des Codes entfernen. Und am Ende werden wir wieder zugeben, und es wird sein Ding tun. Richtig? Ruf an. Jetzt müssen wir den Benutzer darüber informieren, ob wir den Zugriff widerrufen oder gewährt haben. Also werden wir Alarmtür reinlegen und was soll hier berichten? Wie können wir angeben, ob wir dafür den Zugriff widerrufen oder gewährt haben? Wir können hier zur Verfügung stellen, dass wir zurücktreten werden. Sagen wir eine Warnmeldung. Also, wenn wir den Zugang widerrufen haben, werden wir Alarmbereitschaft setzen. Nachricht an den Administrator. Berechtigung wurde entfernt. Und für true, beginnen Sie eine angegebene Miller-Nachricht. Administratorberechtigung erteilt, etwa so. Dann werden wir diese Warnmeldung an Alert-Info übergeben, und ich Wir müssen diesen Handle-Admin an Nachrichtenelement übergeben. Also lasst uns Board mit Admin umgehen. Verwalten Sie den Administrator. jetzt Sehen wir unsjetztmal an. Gehen wir zurück zu unserer App. Wenn ich auf diesen Benutzer klicke, geben Sie admin in diesem Raum. Administratorberechtigung erteilt. Jetzt habe ich Admin-Berechtigung entfernen. Wenn ich darauf klicke, sehe ich Admin-Berechtigung entfernt. Lassen Sie uns durch unsere Datenbank navigieren. Finden wir diesen Raum, der Platz für diesen Raum ist. Jetzt. Wenn ich Zugriff erteile, können Sie einen neuen Wert in der Datenbank sehen. Und wenn ich den Zugriff entferne, kann ich sehen, dass er aus der Datenbank entfernt wurde. In Ordnung, ich schätze, das geht alles um Sicherheit und rollenbasiertes Management. Lassen Sie uns tatsächlich unsere Änderungen übernehmen und dieses Video beenden. Aber bevor wir das tun, lassen Sie uns diesen Import nach oben verschieben, und dann lassen Sie uns Änderungen übernehmen. Also komm an alles, dann bekomme Commit und wir sagen hinzugefügt Button, um Admin-Zugriff zu gewähren oder zu widerrufen. Alles klar, Perfect. Wir sehen uns im nächsten. 133. Programmatisch mit Haken hinzufügen: Hallo. In diesem Video werden wir pro Grammatical Hover zu Diagrammelementen hinzufügen, und es wird als Grundlage für kommende Videos dienen. Lasst uns loslegen. Unser Pro grammatical wird jedoch jedoch von einem benutzerdefinierten Haken verwaltet werden, und wir haben diesen Haken im Internet beschränkt. Also lasst uns Google öffnen und lasst uns einfach use hooks eingeben und dann Hover verwenden. Dann öffnen wir den ersten Link, der das Code-Snippet erhalten und lassen Sie uns diesen Hook kopieren. Ich werde all diese Funktion kopieren. Dann komme ich zurück zum Code als in benutzerdefinierten Haken am Ende. Ich werde diese Funktion aufrüsten, und ich werde sie von hier exportieren. Und auch muss ich Entwurf für diesen verwenden. Also lassen Sie mich importiert. Und wie ich sehen kann, habe ich diese unnötige Abhängigkeit. Aber das ist nicht genau wahr. Also lassen Sie uns Ja hinzufügen, Lind, Warnung für diese Zeile. Und lassen Sie uns diesen Haken auch ein wenig ändern, anstatt bedingt die Bereinigungsfunktion zurückzugeben . Lassen Sie uns diese Rückkehr hier bis zum Ende bringen. Alles klar, jetzt sind wir bereit mit dem Haken. Lassen Sie uns zum Nachrichtenelement navigieren und hier werden wir diesen Haken verwenden. Also an der Spitze. Wir werden ein neues Wertvolles schaffen, und wir werden die Verwendung jedoch Hook nennen jedoch . Also diese Verwendung Howard Hook. Es gibt uns ein Array aus genau zwei Elementen, wo das erste Element die Referenz ist, die wir dem Element zuweisen müssen. Also lassen Sie uns selbst Referenz nennen und dann tatsächlich die Aufzählung bewertet, die angibt, ob dieses Element derzeit schwebt oder nicht. Also nennen wir es das Selbst ref und lassen Sie es an dieses L I Element übergeben. Also Referenz wird selbst ref sein. Jetzt können wir tatsächlich diesen Anlagewert verwenden und wir können etwas tun, aber das so für jetzt, was ich vorschlage zu tun, Ich will nur Teoh die Hintergrundfarbe ändern, wenn wir schweben. Lassen Sie uns also schlechte dynamische Clustering für dieses Verbündete Element. Also lasst uns diesen Schrumpfen in Klammern rauben und lasst uns Rincon Trip Begrüßung verwenden. Und zuerst werde ich hinzufügen, Autos sind ein Zeiger auf dieses Verbündete Element. Wir wissen also, dass immer wenn wir schweben, etwas passieren wird. Und dann frage ich, ob unser Verbündeter Howard ist, lass es mich in Harvard ändern. Dann werde ich den Hintergrund schwarz von jeweils 0,2% anzeigen. Andernfalls überhaupt kein Klassenname. nun Wenn ichnunzurück zum Code navigiere, kann ich sehen, dass ich immer dann meinen Hintergrund bekommen kann. Das ist es also. Und das ist das Ende dieses Videos. Lassen Sie uns unsere Änderungen begehen. Lassen Sie uns alles auf die Bühne gestellt blieb. Dann lassen Sie uns mit dem Edit Pro grammatical Hover begehen. Alles klar, wir sehen uns in der nächsten. 134. IconControl - Likes (Teil 1): Hallo in diesen beiden Videos werden wir gerne in unserer Anwendung behandeln. In diesem Video werden wir eine Komponente erstellen, die ein Wrapper rund um die Kontrolle sein wird. Ich komme, dass wir dem Nachrichtenelement hinzufügen werden. Gehen wir, Lassen Sie uns zurück auf den Code und lassen Sie uns zuerst definieren, wie wir diese Komponente verwenden werden. Also lasst uns die Nachricht I eröffnen, Tim, und wir werden sie direkt nach einer Zeit platzieren. Also hier wird eine Komponente haben, so etwas wie ich VT und Kontrolle kann. Und dann diese Komponente Nun, außer in den nächsten Requisiten. Also definieren wir zuerst, ob es sichtbar sein wird oder nicht. Für jetzt, lass es sichtbar sein. Dann werden wir sagen, ich kann nennen und für jetzt, lassen Sie es schwer für unsere Likes sein. Dann werden wir auch Tool-Tipp haben, der so etwas wie diese Nachricht sagen wird. Außerdem wird es einen Handler auf Klick-Handler haben. Also für jetzt, lassen Sie es eine leere Funktion sein und es wird auch eine zwei bedingte Requisiten haben. Also zuerst wird Farbe sein und dann wird es Bankinhalt sein. Schließlich wird es Aikens Aiken schließen müssen und, wie ich zu vermitteln, wie ich kann, wollen wir mit Inhalten geneigt angezeigt werden. Deshalb stellen wir Batch-Inhalte als zusätzliches Problem dar. Und für jetzt, sagen wir, dass fünf mag so etwas haben. In Ordnung. Jetzt lassen Sie uns tatsächlich diese Komponente erstellen und sehen, wie es so aussehen wird, hier Unter Nachrichten, Lassen Sie uns Aiken erstellen, VT. Und Kontrolle. Und lassen Sie uns definieren, wie es aussehen wird, bevor wir ein Markup machen. Lasst uns zuerst die Requisiten greifen, so dass wir sichtbar sind. Dann haben wir auch ich nennen kann. Wir haben Tool-Tipp haben wir auf Klick, und wir haben Badge Inhalt Weg. Andere Requisiten werden wir unter Requisiten speichern. Objekt. Okay, also wird es ein Diff mit Klasse Name der Marge links sein, um sagen wir, Stil wird der nächste sein. Also werden wir Sichtbarkeitsstütze setzen, und es wird auf Lee sichtbar sein, wenn es sichtbar ist, auf wahr gesetzt. Also, wenn sichtbar ist, dann sichtbar, sonst ausgeblendet. Okay, gut in diesem Def. Wir müssen gießen. Nehmen wir an, ein bedingter Batch-Inhalt eine bedingte Komponente, und hier ist ein kleiner Trick. Wie Sie das machen können. Es ist nicht wirklich eine wirklich primitive oder offensichtlich. Sagen wir, nähern wir uns. So erstellen Sie eine bedingte Render-Off-Komponente in einer Komponente. Es ist also der Trick. Zuerst haben wir hier gegossen, und Sie Komponente, sagen wir bedingte Abzeichen wie folgt, wird es eine Eigenschaft erhalten, die wird, sagen wir, Zustand, wo ein Wert, den wir wollte anzeigen. Dann werden wir hier bedingte Abzeichen eingießen und als Requisite wir den Zustand passieren und dieser Zustand wird unser Abzeichen Inhalt sein. Und hier werden wir fragen, ob wir eine Bedingung haben, dann gehen wir in den Krieg mit Inhalten ohne Bedingung, was unser tatsächlicher Wert sein wird. Und dann werden wir in Children so rappen. Sonst werden wir einfach Kinder zurückgeben. Also, ja, das ist der Trick. Und wir müssen auch Kinder von unseren Requisiten holen. Es wird so etwas aussehen, aber ich kann sehen, dass etwas nicht stimmt. Also, was passiert hier weg? Ich habe die Klammer vergessen. In Ordnung, das ist es also. Nun, wenn wir viel Inhalt haben, wird diese bedingte Stapel sonst gerendert werden, wir haben Kinder, das ist der gesamte Inhalt, den wir innerhalb übergeben. Okay, aber drinnen werden wir vergehen. Sporen und Flüstern ist die Komponente aus unserem Anzug, die sie für so etwas wie Werkzeugspitze verwendet haben . Also für ein Flüstern, werden wir passieren. Lasst uns ein Platzierungs-Kotelett. Dann werden wir Delay passieren. Es hat auch eine Verzögerung von null als dilly. Verstecken wird auch Zito sein. Delay Show wird auch Null-Trigger sein wird Holler und Lautsprecher sein. Wir werden Tooltip und Tool-Tip-Nachricht übergeben. Wir werden Schuldeigentum wie dieses in diesem Flüstern übergeben oder für einen Auslöser, wir werden Symbolschaltfläche normale Komponente aus unserem Anzug anzeigen. Und dafür wenigstens Aiken, Button, werden wir zuerst alle Ernte gießen, die wir hier erhalten haben, und dann werden wir auf Klick-Handler haben und wir werden auf Klick übergeben, den wir erhalten. Dann werden wir es sagen, als eine Kreisgröße wird sehr klein sein. Und auch kann ich selbst sein wird, kann ich uns importieren lassen. Und für ICANN werden wir Ikone setzen. Ich kann nennen, dass wir auch als Eigentum erhalten. Jetzt scheint es bereit Inside Nachricht Element. Wir können sehen, dass ich bequem ist nicht definiert. Lassen Sie uns importieren und sehen, wie es aussieht. Also, wenn wir jetzt unsere Anwendung öffnen, haben wir Likes. jedoch Wir habenjedochkeine Farbe. Also, was ich hier vorschlug, wir werden einen bedingten Kragen gießen. Also, wie tragbar, das zu tun? haben wir schon getan. So können wir so etwas gießen. Wir können unser Objekt verbreiten, wenn unser Zustand wahr ist oder wir ein leeres Objekt verbreiten können. In diesem Fall werden wir keine Eigenschaft passieren. Also werden wir so etwas wie wenn unser Zustand wahr ist, dann schütten wir die Farbe rot ab. Und sonst werden wir ein leeres Objekt setzen, damit es funktioniert, und es wird denken. Nun, wenn ich eine frische hatte, können Sie sehen, dass ich rote Farbe habe, wenn der Zustand wahr ist. Sonst habe ich falsch. Okay, gut. So funktioniert es. Und übrigens, wenn Sie sich fragen, wohin es gehen wird, wird es hier für diese Requisiten gehen. Und diese Requisiten werden an Aiken Button weitergegeben. Also im Grunde sagten wir Farbe für diesen Aiken-Button. Okay, Also das ist es für dieses Video im nächsten Video, wir werden die Likes und Handy auf Funktionalität anzeigen. Aber wie jetzt, lassen Sie uns dieses Video beenden, indem wir unsere Änderungen begehen. Führt alles in den Bühnenzustand und bekomme dann Commit. Schöpfer, ich kann VT in Steuerkomponente wie diese. Okay, perfekt. Wir sehen uns im nächsten. 135. Funktionalität gefällt (Teil 2): Hey, da in dieser Video-Blase, fügen Sie Funktionalität auf die Schaltfläche „Gefällt mir“. Lass uns gehen. Lassen Sie uns zuerst zur Datenbank navigieren und sehen, wie wir mit unserer Datenstruktur umgehen werden. In jedem Nachrichtenelement werden wir also zwei neue Eigenschaften erstellen. First Property wird wie Count sein, der die Gesamtzahl aus Likes auf dieser bestimmten Nachricht angibt. Und dann werden wir haben, Nehmen wir an, mag es ein Array von Werten mit den Benutzer-IDs sein, die diese Nachricht mochte. Aber anstatt zu speichern und Ray wollte ein Objekt auf die gleiche Weise verwenden wie wir es mit Rooms gesteht, lassen Sie uns zur App navigieren. Und hier lassen Sie uns das erste Nachrichtenelement öffnen. Hier erhalten wir Handle wie Funktion und dieses Handle wie Funktion. Wir werden es hier an diesen eigenen Click-Handler übergeben. Wir werden dieses Handle wie und für Handle nennen, als würden wir Nachricht Punkt i d übergeben. Okay, jetzt navigieren wir nach unten in Textil gs Und hier, wenn wir erstellen und Sie Nachricht, werden wir eine neue Eigenschaft anhängen wie count, und standardmäßig wird es auf Null gesetzt. Okay, jetzt lassen Sie uns zu Nachrichten navigieren, um dodgy s zu indizieren. Und hier, definieren wir Const Handle wie Handler lässt Rapper in. Er wurde im Voraus zurückgerufen. Und jetzt definieren wir unsere Logik. Wir werden es an Nachrichtenelement auf dem ähnlichen Kerzenlicht übergeben, also wird es die Nachricht I d erhalten und die Logik wird tatsächlich die gleiche sein wie mit dem Handle-Admin, weil wir eine Transaktion verwenden werden. Also lassen Sie uns eigentlich alles von hier gefangen und lassen Sie uns es in Griff wie aber statt voraus, ref, wir gehen zu schlechter Nachricht, ref und Nachricht Ref wird Datenbank Ralf als Nachrichten sein. Und dann anstelle der Chat-Idee, werden wir die Nachricht I d verwenden. Okay, dann müssen wir auch diese Funktion in eine Senkenfunktion für die Transaktion konvertieren, anstatt zuzugeben, dass wir eine Nachricht erhalten. Dann werden wir fragen, ob Nachricht existiert, dann ob Nachricht Punkt mag und Nachricht Dar dich mag , ich d aus unserem aktuellen Benutzer. Also lasst uns es von einem anderen Objekt greifen. Lassen Sie uns den aktuellen Benutzer verwenden und wir werden Sie i d. Also, wenn wir haben, wie von diesem bestimmten Benutzer, dann werden wir zuerst löschen dies wie und auch wir wollen unsere wie Joan verringern. Also lasst es uns reparieren, um Nachricht Dog likes. Dann werden wir die Zählung um eins verringern . Also lass uns Junge, meine Nase ist gleich eins. Eine Warnmeldung wird wie entfernt werden. Okay? Andernfalls, wenn wir gießen wollen und Sie mögen, werden wir eine Nachricht wie Conan Plus gleich eins setzen und weil wir dieses mag Objekt gesagt haben , wissen Sie, es kann nicht in Datenbanken existieren -Community hat das auch gehandhabt. Und wenn wir versuchen, etwas zu nicht-existen Objekt hinzuzufügen, erhalten wir einen Fehler. Also fragen wir zuerst, ob keine Nachricht mag. Wenn wir also dieses Objekt nicht haben, werden wir es als leeres Objekt initialisieren. Also Nachricht Likes wird ein leeres Objekt sein. Und nur dann werden wir im Stande sein, Nachricht zu setzen. DOT mag dein i d gleich der Wahrheit. Und dann wird die Nachricht wie bei ihr sein. Okay, perfekt. Nun sagen wir, warten wir und schauen wir uns mal an. Wenn wir versuchen, auf diese Nachricht klicken, haben wir Transaktion fehlgeschlagen, und dies liegt daran, dass es versucht, wie, Anzahl, nicht vorhandene Eigenschaft für vorhandene Nachrichten zu aktualisieren Anzahl, . Also, was ich vorschlug zu tun, ich möchte all diese Passage Dorf ist nur, um die Datenbank ein wenig aufzuräumen. Jetzt sind wir in der Lage, eine neue Nachricht mit den neuen Eigenschaften zu setzen. Also lasst uns eine neue Nachricht schreiben. Und jetzt hat es fünf wie Count und wir können das in Ordnung bringen. Aber für jetzt, wenn wir darauf klicken und wir können sehen, wie, bearbeiten, wenn wir zur Datenbank gehen, wenn wir unsere Nachricht öffnen, können wir sehen, wie zählen eins und mag enthält unseren Benutzer i d. Und wenn wir noch einmal darauf klicken, können wir sehen, wie Likes verdünnt ist und, wie, zählen solche zu Zito. Okay, perfekt. Jetzt lassen Sie uns tatsächlich reparieren unsere Sie ich nicht vergessen, Artikel hier zu Nachricht. Wir müssen Requisiten übergeben, Teoh, ich kann die Kontrolle haben. Also zunächst einmal, wenn wir Farbe aus rot haben, wenn unsere Botschaft gemocht wird, richtig, Also lasst uns arm ist Licht wertvoll, das hier an der Spitze schaffen const sein Leben und wie wir das definieren können. Also zuerst müssen wir sehen, ob diese Nachricht irgendwelche Likes hat. Also lasst uns greifen, Likes und wie zählen aus unserer Nachricht. Und hier werden wir fragen, ob unsere Nachricht irgendwelche Likes hat. Dann legen wir Objektschlüssel ab. Diese mag Array von User-Ideen zu bekommen und dann können wir schlechte Includes, Lassen Sie uns sagen, aus Dar aktuellen Benutzer, nicht wahr? Auf diese Weise können wir erkennen, ob unsere Nachricht von diesem bestimmten Benutzer gemocht wird. Okay, dann gehen wir vorbei. Dies wird gerne hier angezeigt schwächen. Wir werden es in den Zustand bringen, und dann werden wir die Farbe Rot setzen. Okay, dann haben wir dieses sichtbare Eigentum. Und das ist für die Reaktionsfähigkeit von unseren Botschaften. Wenn wir also unser Fenster rezitieren, landen wir auf mobilen Geräten. Auf mobilen Geräten wollen wir unsere Symbole nicht ausblenden. Wir wollen sie immer anzeigen. Dafür können wir Medienabfrage verwenden, um das zu erkennen. Also zuerst, lassen Sie es hier direkt unter Verwendung Hover wir setzen, ist mobil. Und dann werden wir Media Query verwenden, und wir werden fragen, ob wir Markierungen mit 992 Pixeln haben. Also, wenn wir mobil sind, lassen Sie uns tatsächlich neue lebensfähige erstellen. Dass wir sagen können Aiken zeigen Also, wenn wir haben ist mobil oder wenn unser aktuelles Element schwebt, so werden wir sie nur sehen, wenn wir sie auf der Nachricht haben Nur dann können wir Aikens anzeigen , so für sichtbar Wir werden ziehen kann zeigen, dass ich auf Klick kommt Wir Ich werde gießen und dergleichen und für Bankinhalte statt fünf werden wir unsere aktuelle wie Count setzen Okay, gut. Nun werfen wir einen Blick Wenn wir haben, wo wir sehen können, wir haben Symbol Wenn wir die Größe des Fensters ändern Und wenn wir auf mobilen Geräten waren in der Lage, die Eiken zu sehen . Okay, perfekt. Nun, wenn ich auf diese wie Nachricht klicke, kann ich wie zählen sehen und es wird auch in Farbe off rot angezeigt. Das ist es. Und es sieht ziemlich cool aus. Wieder eine Feuergröße? Zurück zu meiner Galle. Ich kann es immer sehen. Das ist es. Und ich schätze, lassen Sie uns unsere Veränderungen begehen. Lassen Sie mich mein Terminal Lead öffnen Schlecht bekommen an alles, als Handle Nachricht wie OK, Perfekt begehen könnte OK, . Wir sehen uns im nächsten 136. Verzögerung von Löschungen: Hey, da. In diesem Video werden wir Delish in off chap Nachrichten für diese Trümmer bei einem anderen Aiken Bt in Kontrolle zu Nachrichtenelement behandeln . Lasst uns gehen. Lassen Sie uns zum Nachrichtenelement navigieren Dodgy? Ja. Und hier neben „Gefällt kann ich die Kontrolle beginnen. Lassen Sie eine andere Aiken zwischen Steuerung, um die Nachricht zu löschen, und es wird auf Lee, um die Nachricht sichtbar sein . Autor. Also Onley-Nachrichtenautor kann das tun. Also lassen Sie uns das kopieren und lassen Sie uns bedingt machen, dass unsere nächste Aiken die Kontrolle wurde. Wenn wir also Autor von der Nachricht sind, dann werden wir in der Lage sein, das zu sehen. Also brauchen wir keine Farbe. Brad, wir brauchen, ist sichtbar. Ich kann nennen, wird in der Nähe sein. Tooltip wird verzögert Diese Meldung Wir brauchen keinen veg Inhalt. Und für das Entklappen werden wir Griffdill es hinzufügen, dass wir von Requisiten erhalten werden. Okay, ich schätze, wir sind hier fertig. Werfen wir einen Blick, wenn ich, aber ich kann sehen, geliefert diese Nachricht, okay, ziemlich cool. Lassen Sie uns nun nicht zwei Nachrichten in Text-Togs einbinden. Und hier lassen Sie uns diese Funktion definieren. Lassen Sie uns die const Griff Dill es ziehen und schnell im Einsatz zurückrufen im Voraus. Lassen Sie uns auch nicht über Abhängigkeiten vergessen und lassen Sie uns es im Voraus an Nachrichtenelement übergeben. Okay, gut. Dieses Handle Delete erhält also eine Nachrichtenidee als Argument. Also lasst uns es packen und ich werde unsere Logik in erster Linie definieren. Wir werden fragen, ob Sie wirklich beabsichtigen, diese Botschaft zu liefern. Vielleicht hat er einfach nur darauf geklickt. Also werden wir fragen, ob Fenster bestätigen, senden Sie diese Nachricht. Also, wenn Benutzer auf Nein klickt, dann werden wir einfach von Dysfunktion zurückkehren. Dann müssen wir hier ein paar Operationen ausführen, wenn wir die Datenbank aktualisieren. Denn wie Sie sich erinnern, wenn wir absichtliche Nachricht hier drüben, müssen wir auch unsere letzte Nachricht Eigenschaft im Zimmer betrachten. Also müssen wir es auch aktualisieren, und wir müssen eine atomare Operation durchführen. Dazu werden wir ein Update-Objekt erstellen, und dann werden wir unsere Datenbank aus dem Stamm aktualisieren, wie wir es zuvor getan haben. Okay, also lasst uns neue Updates erstellen, Objekt, das für jetzt leer ist. Und dann werden wir erste Updates setzen, als die Leute Nachrichten aktualisieren. Dann werden wir die Nachricht aktualisieren. Ich d Annable sagte es zu wissen, dass es die ursprüngliche Nachricht löschen wird, dass, wenn unsere Nachricht zuletzt ist , wir unsere Zimmerinformationen aktualisieren wollen. Also müssen wir zuerst erkennen, wenn unsere Botschaft verloren geht. Dafür werden wir hier eine neue wertvolle schaffen, die wir nennen, ist zuletzt, Lassen Sie uns es über Updates setzen. Und es wird ein Vergleich zwischen unserem aktuellen Zustand und der Nachricht I D also werden wir uns auf Nachrichten beziehen. Dann Nachrichten Punktlänge minus eins. Wir werden die neueste Nachricht von unserem Zustand Array, dass ich d gleich zwei Nachricht I d ist. Also, wenn das wahr ist, dann sind unsere Nachrichten Lust OK, also hier werden wir fragen, ob unsere Nachricht Lust ist als für diese Updates. Objekt. Wir spezifizieren Schrägstriche Räume, Schrägstrich Chat I D. und dann ist die letzte Nachricht gleich der nächsten. Es wird also das vorherige Objekt neben unserem aktuellen erweiterten Objekt sein. Also müssen wir Nachrichten Punktlänge minus zwei, das vorherige Objekt, richtig? Also werden wir es über die letzte Nachricht verbreiten. Also lassen Sie uns Nachrichten als Nachrichten Punktlänge minus zwei weiterleiten. Und auch wir müssen die Nachricht i d angeben um sich für die letzte Nachricht zu erinnern. Also werden wir auch Nachrichten setzen, Nachrichten über Länge minus zwei Punkt i d. Und weil wir versuchen, Nachrichten Punktlänge minus zwei zuzugreifen, könnte dies jetzt sein oder dieses Objekt kann nicht Existenz sein. Also müssen wir es dagegen überprüfen. So können wir das tun, indem wir einfach hier setzen. Wenn unsere Nachricht zuletzt ist und Nachrichten gedacht Länge größer als ein Onley, dann stellen wir sicher, dass dieses Objekt existiert. Okay, dann ist unser nächster Fall zu überlegen, wenn wir nur noch eine Nachricht im Chatraum haben. Und wenn wir es verzögert haben, wollen wir die letzte Nachricht löschen, ähm, Informationen dafür. Wir werden überprüfen, ob unsere Nachricht verloren geht und Nachrichten Punktlänge gleich eins auf Lee ist. Dann werden wir für die letzte Nachricht Mel Value ziehen, um es zu liefern. Und am Ende werden wir unsere Datenbank aktualisieren. Also lassen Sie uns versuchen, Kage. Schauen Sie hier rüber. Dann werden wir anrufen, warten Datenbank Punkt Entwurf Tür Update mit Objekten und lassen Sie uns in irgendetwas umwandeln Funktion . Und lassen Sie uns auch Array von Abhängigkeiten angeben. Also müssen wir Ideen und Botschaften weiden. Und auch um diese Warnung zu vermeiden, Colettes Unterdrücker so. Und lassen Sie uns auch Warnung hier setzen, um Benutzer zu benachrichtigen, dass wir die Nachricht gelöscht haben. Also Nachricht hat Bean erweitert und nicht Nachrichten Nachricht. Und für jeden Fehler werden wir Alarmtür setzen, Fehler eingeben, aber Nachricht. Okay, sieht gut aus. Jetzt schauen wir uns mal an. Lassen Sie mich ein paar neue Nachrichten hinzufügen. Hallo? Sie sind high. Okay, wenn ich also die allerletzte Nachricht in der Datenbank lösche, kann ich sehen, dass die Rauminformationen aktualisiert werden. Und jetzt habe ich die letzte Nachricht auf dort gesetzt, was richtig ist. Nun, wenn ich es tue, nicht die letzte Nachricht, sondern eine davon. Sagen wir hallo. Ich sehe, dass die letzte Nachricht im Raumelement nicht aktualisiert wurde. Das ist richtig. nun Wenn ichnundie letzte Nachricht lösche, habe ich neue Nachrichten. Und wenn ich nur eine Nachricht in der Datenbank habe und wenn ich diese lösche, habe ich an beiden Stellen noch keine Nachrichten. Okay, das ist also gut. Und so werden wir damit umgehen. Alles klar, lassen Sie uns unsere Änderungen übernehmen und dieses Video beenden. Lassen Sie uns alles vergessen und dann begehen. Behandeln Sie erweiterte Nachrichtenzusammenarbeit. Alles klar, wir sehen uns in der nächsten. 137. Aufladen von Komponente - Teil 1: Heiligtümer. In diesem Video werden wir in Funktionalität für Datei-Upload beginnen. Gehen wir, Lassen Sie uns zu Bottom Ordner navigieren und lassen Sie uns Index togs öffnen. Hier werden wir ein neues Symbol hinzufügen, unten zu unserem Import. Hier auf der linken Seite wird es Modellfenster öffnen und von dort werden wir unsere Dateien hochladen. Also lassen Sie uns eine neue Datei im Inneren erstellen. Dieser Ordner wird es Attachment BT und Moto Gs nennen. Lassen Sie uns armes Hallo drinnen und lassen Sie uns es hier innerhalb von Index-Togs verwenden, kurz bevor die Eingabeelemente Attachment Bt und Moto anzeigen würden. Okay, jetzt definieren wir unseren Markt. Also hier müssen wir in schlechte Gruppe Dar unten gießen, denn wenn wir Importgruppe innerhalb verwenden, müssen wir in Port-Gruppen-Schaltfläche gießen, um zu arbeiten und gut aussehen. Also für diese wichtige Gruppen-Schaltfläche, wir Aiken angeben, was wird Anhaftung sein, jetzt müssen wir, um Sie mit moralischen Zustand umgehen. Also lassen Sie uns verwenden Moto State Haken und lassen Sie uns aufwachsen seine offene nah und offen. Wenn wir also auf diesen Boden klicken, öffnen wir unser bewegliches Fenster. Ok, perfekt. Neben dieser Schaltfläche definieren wir das tatsächliche sterbliche Fenster. Also lassen Sie uns Modell importieren. Und in Moto werden wir Mortal Heather, Körper und Fußzeile angeben . Okay, gut für dieses Modell. Wir werden Show-Eigenschaft angeben, die offen ist und auch auf Höhe, wird nahe für Heather sein. Element innen, wir werden Moto Titel in Mortal Titel gießen wir werden angezeigt werden, sind bodenbelegte Dateien. Und lasst uns diesen Dollar von hier für eine Modellfußzeile entfernen. Wir werden einen Grund befriedigen, um unsere Akten zu applaudieren. Also lasst uns neues Knopfelement eingießen und innen werden wir einen Plourde gießen. Oder vielleicht, sagen wir, zum Chat geschickt. Also für jetzt, es wird nur eine Klick-Eigenschaft haben. Und neben diesem Grund werden wir ein kleines Element anzeigen und darin wird sagen, dass Onley-Dateien weniger als fünf Megabyte erlaubt sind. Und lassen Sie uns dieses kleine Element an der richtigen Seite ausrichten. Und auch, lassen Sie es ein wenig aus Rand oben geben. Okay, lassen Sie es uns retten. Und für Körper, lassen Sie uns Hallo für jetzt angeben. Und nehmen wir einen lokalen, um die Hälfte zu sein. So jetzt können wir sehen, dass wir diesen seltsamen Markt wegen dieser def haben. Wir brauchen sie nicht. Wir müssen reagieren. Fragment. Okay, noch einmal. Jetzt haben wir unten Wenn wir darauf klicken, haben wir diese Art von Moto senden an den Tschad und wo nur Dateien weniger als fünf Megabyte erlaubt sind . Unser applaud Element werden hochgeladen. Komponente wird von reaktiv sein. Also lassen Sie uns nach einer Plodder suchen und gehen Sie zu manuell. Dies ist also die Art der Komponente, die wir aus unserem Anzug nehmen werden. Wenn wir Code-Snippet öffnen, rufen wir P all das auf und lassen Sie es uns im Inneren verwenden. Ah, trage Körper statt hallo. Lassen Sie uns einen Portier importieren. Und hier werden wir aus dem Boden gießen gleich zwei. False als Aktion wird nur eine leere Zeichenfolge sein, weil wir es manuell für unverändertes Ereignis behandeln werden. Wir werden auf Veränderung spezifizieren, Heller, das wird schaffen. Wir werden keine Referenz verwenden, da wir alles manuell behandeln werden. Dann werden wir in der Lage, mehrere Dateien und auch am wenigsten Typ hochladen. Wir werden Bildtext angeben. Okay, jetzt müssen wir unseren Zustand für hochgeladene Dateien behandeln. Also lassen Sie uns hier einen neuen Zustand erstellen, dass wir standardmäßig Namen, Datei, Liste und Dateiliste setzen. Es wird eine leere Rate und diese Dateiliste sein. Wir müssen es an diese applaudierte Komponente weiterleiten. Also lassen Sie uns Dateiliste als Dateilistenstatus übergeben. Jetzt müssen wir dies bei Änderung definieren, Handler. Also lassen Sie uns diese Funktion hier und dieses eine Änderungsereignis erstellen, wenn wir uns Feuerliste gibt , die Typ abgelegt ist. Also haben wir im Grunde Array-Off-Dateien, die wir applaudieren müssen. Aber von diesem Strahl müssen wir ein paar Dinge filtern. Zunächst einmal müssen wir Onley-Dateien zulassen, die weniger als fünf Megabyte an Daten sind. Und auch wollen wir die maximale Anzahl von hochgeladenen Dateien einschränken. Nehmen wir an, 25 Also müssen wir zuerst unsere Größe in Bytes definieren, um sie zu beschränken. Also müssen wir fünf Megabyte Bisse bekommen, um das zu tun. Also hier an der Spitze, lassen Sie uns Max Datei Größe wertvoll erstellen, und hier werden wir setzen Also zuerst werden wir 1000 packen, die einen Biss darstellt. Dann werden wir mit 1024 multiplizieren, um ein Megabyte in Bissen zu bekommen und dann mit fünf multipliziert , um fünf Megabyte Bisse zu erhalten. Ordnung, also in diesem unveränderten Handler lässt es schlecht filtern, sagen wir Wert oder wertvoll. Dann werden wir Datei-Array-Punkt-Filter aufrufen Hier werden wir Element erhalten. Und für dieses Element werden wir fragen, ob dieses Element Blob Datei Punktgröße es uns die Größe der aktuellen Datei kleiner oder gleich max Dateigröße Onley gibt. Dann wird es zu unserer gefilterten A Vergewaltigung hinzugefügt. Außerdem von diesem gefilterten Array, möchten wir von diesem gefilterten Array,dass Onley fünf Elemente greift. Also lasst uns Scheibe setzen und aus der Scheibe werden wir Onley 1. 5 Elemente wie das spezifizieren. Also gleich danach werden wir „Feuerstelle“ nennen und wir werden so gefilterte Einblicke einschenken. Okay, wenn wir sagen, dass wir jetzt sind, haben wir dieses Gleichheitszeichen unten. Lass uns alles retten. Lassen Sie uns zurück zur APP navigieren Lassen Sie uns auf diese Schaltfläche klicken und wir können sehen, dass es nicht voll ist mit. Also lassen Sie uns das schnell beheben für applaudierte sie. Wir werden Klassennamen mit 100 angeben. Welcher Sparer jetzt? Und schauen wir uns noch einmal an. Also, wenn ich auf diese Schaltfläche klicke, gehe ich zum Hochladen, Ich kann sehen, dass es voll ist mit Ich kann mehrere Dateien auswählen. Nehmen wir an, ich werde sie alle auswählen. Aber nur die ersten 5 Dateien werden ausgewählt. 12345 Ich kann sehen, dass es tatsächlich funktioniert. Jetzt muss ich Funktionalität hinzufügen, um den Chat-Button zu senden, um alle von ihnen hochzuladen. Ich kann sie auch von hier aus verwalten. Okay, cool. Also lassen Sie uns erstellen Und Sie, Handler, die unser Handler für diese auf Klick auf Chat-Button sein wird. Lassen Sie uns also, sagen wir, auf einem Plourde wird es in einer Spüle, Funktion und Einsicht sein . Zuerst werden wir, sagen wir, den Ladezustand definieren sagen wir, . Okay, also lassen Sie uns erstellen ist geladen und gesetzt wird standardmäßig geladen. Es wird falsch sein. Und das ist geladen. Wir werden für diesen Boden gießen. Also für Behinderte werden wir setzen ist Laden für auf Klick. Wir spezifizieren uns auf eine Plourde. Und lassen Sie uns auch unseren Applaus oder behindert machen. Wenn wir das schaffen, haben sie deaktiviert. Wann wird geladen? Okay, perfekt. Also für einen Plourde werden wir das nächste tun. Lasst uns ziehen, versuchen fangen Block in erster Linie. So wissen wir, dass wir Dateiliste als Array von Dateitypen haben. Es bedeutet, dass wir mehrere Dateien in unsere Datenbank applaudieren. Also, um mehrere Versprechungen zu behandeln, werden wir Versprechen Punkt All verwenden, aber zuerst müssen wir eine Reihe von Versprechen dafür bekommen. Lassen Sie uns wertvolle Applaud-Versprechungen erstellen und wir werden unser Dateilisten-Array versprechen, um eine Reihe von Versprechungen zu erhalten. So Dateiliste Punktkarte wird abgelegt werden. Dann müssen wir auf unseren Speicher zugreifen. Also lasst uns einen Speicher stellen. Dann werden wir Speicherobjekt von MISC Firebase verwenden. Dann ziehen wir die Referenz, und wir werden sie ausdrücken. Teoh, lasst uns Schrägstrich plaudern. Okay, so wie das. Okay, Jetzt müssen wir Diagramm I D packen , aber es ist sehr einfach. Wir können es mit Cues bekommen, Paramus Hook benutzen Programme. Von hier aus werden wir Diagramm I d React Router bekommen. Lass es uns nach oben bewegen. Und für diese Speicherreferenz, dann werden wir angeben lassen ein Kind. Dann werden wir einen Dateinamen gießen und um mit dem zufälligen Namen zu kommen, können wir einfach Datum ab und zu setzen , sagen wir, Scholle Datei dunklen Namen, um es mehr oder weniger randomisiert zu machen. Okay, dann dass Ihre Plourde, wir werden den Port gießen und wir können tatsächlich diese Blockdatei verwenden, die wir von Dateiobjekten haben . Es wird funktionieren. Okay, also ist es fast so. Aber für diese Datei möchte ich Bargeldkontrolle angeben. Heather, um es in unserem Browser für Port einzahlen zu können, werden wir den zweiten Umfang angeben. Es wird Objekt aus sein, machte eine Daten. Also hier geben wir die Bargeldkontrolle an und wir werden das nächste tun, damit es öffentlich wird und dann das Alter markiert. Wir müssen hier angeben, Max, Alter in Sekunden. Also lassen Sie uns drei Tage in Sekunden angeben. Also lassen Sie es sagen, um die Begeisterung der Reise zu stärken. Und jetzt lasst uns unsere Logik machen. Also zuerst werden wir eine Stunde in Sekunden bekommen, das sind 3600. Dann multiplizieren wir mit 24, um einen Tag in Sekunden zu bekommen und dann mit drei multipliziert, um drei Tage in Sekunden zu bekommen. Ok, gut. Gleich danach. , Vergessen Sie nicht,von dieser Callback-Funktion zurückzukehren. Dann bekommen wir das nächste Ding. Dann werden wir ein const ein Plourde Schnappschüsse, eine Plourde Schnappschüsse, die wir nennen werden erwarten Versprechen Punkt. So werden einstündige Dateien hochgeladen. Wir werden ein Array von applaud Snapshots erhalten. Dann, wie Sie sich daran erinnern, Ihre l 4 hochgeladene Datei öffentlich zugänglich zu machen, wissen Sie, es ist auch ein Versprechen, dass wir Gedo anrufen und die Aura senken müssen. Es ist also ein Versprechen. Also wieder werden wir mit einem anderen Bereich der Versprechen enden. Deshalb müssen wir wieder eine neue Reihe von Versprechen abbilden. Deshalb sagen wir, es wird Formversprechen sein. Und hier werden wir Applaud Snapshots Dot Map nennen und von hier aus bekommen wir Pacing Snap Shirt, und dieses Snap Shirt wird uns das nächste geben. Also werden wir ein Objekt zurückgeben, das Inhaltstyp Snap Shore Metadaten Inhaltstyp sein wird . Dann werden wir Namen haben , der geschnappt werden wird. Shore Meta-Datenpunktname. Es wird Dateiname hochgeladen werden, Dateiname, und dann Ihre eigenen wird ein Gewicht, das wir schnappen kurzen Punkt Referenztür greifen können nicht laden Europa so. Das wird also unsere Daten sein, die wir jetzt in der Datenbank speichern werden, um diese Straße verspricht wir neue wertvolle erstellen, die wir Dateien nennen werden. Dann nennen wir ein Gewichtsversprechen Tochter alles geformte Versprechen, und ich hätte unsere Akten, die wir in unserer Datenbank sagen müssen. Also für die Index-Chirurgie, ja, wir werden eine neue Funktion erstellen, die wir im nächsten Video für out verwalten werden. Rufen wir es einfach im Voraus an. Also von Requisiten hier, werden wir eine Funktion nach einem Plourde erhalten, und diese nach dem Upload wird hochgeladene Dateien verwalten und sagte sie in die Datenbank. Also rufen wir an, warten auf eine Plourde und wegen Dysfunktion werden wir unsere Akten von dieser Struktur weitergeben. Dann nach dem Rückruf, werden wir das Laden auf false setzen. Und auch schließen wir unser bewegliches Fenster so. Und für den Fall, dass wir einen Fehler haben, rufen wir das Laden an. Und dann werden wir die Tür besser mit Fehlerpunktmeldung alarmieren. Alles klar, das ist es für dieses Video. Leider können wir es noch nicht testen. Wir können, aber es wird nur Dateien in diesen Speicher hochladen. Im nächsten Video werden wir also weiter daran arbeiten. Und wir werden diese nach dem Upload Funktion erstellen. Aber wie jetzt, lassen Sie uns unsere Änderungen übernehmen und das Video beenden. Also komm an alles und bekomme dann Commit. Anlage erstellt, unten mit einer Floater-Komponente. Alles klar, wir sehen uns im nächsten. 138. In Teil 2 hochgeladen: Hey, da. In diesem Video werden wir nach Upload-Funktion definieren, die wir im vorherigen Video erwähnt Lassen Sie uns zu Index Togs innerhalb Bottom Folder navigieren und hier unten rechts, bevor wir Markup definieren. Lassen Sie uns nach einem Plourde in Verwendung Callback-Funktion eingewickelt erstellen. Und auch, lassen Sie es bis Abhängigkeiten als leer jeden Also lasst uns dies nach einem Plourde im Voraus passieren . Teoh Attachment Bt und sterblich. Und das nach dem Hochladen empfängt Dateien, die wir brauchen, um innerhalb einer Debatten zu gießen, um diesen Anhang zu erinnern schlagen Moto hat seinen eigenen Ladezustand, und das ist Onley innerhalb Modell. Aber drinnen in Jubel. Ja, wir haben diesmal auch Ladezustand für die tatsächliche Eingabe. Also, kurz bevor wir eine Operation in der Datenbank machen, lassen Sie uns auch sagen, applaudiert auf true inside Index togs. Okay, dann, das gleiche wie für auf gesendeten Klick. Wir müssen eine atomare Operation definieren, also werden wir Aktualisierungen als leeres Objekt erstellen. Und lassen Sie uns diese Logik für sagen wir, vier Nachrichtendaten hier drüben und diesen Push-Schlüssel jetzt kopieren , weil wir mehrere Dateien haben, die wir hochladen müssen und diese Dateien in der Rate sind, die wir Dateien für jeden aufrufen werden, um über jede Datei in Dieses Recht wird die Datei erhalten. Und für jede Akte bekommen wir eine schlechte Nachricht und wir werden auch Nachrichtendaten definieren. Also lasst uns diese Logik von On Send gefangen sein Klicken und setzen Sie sie für jede Datei. Also stellen Sie Nachricht zusammen. Und anstelle von Text, werden wir Datei angeben und für Datei werden wir Datei-Objekt angeben, das wir innerhalb der Anlage BT-Modell erstellt haben , die dieses Objekt ist. Okay, jetzt haben wir die Nachricht I d wir haben Updates mit Nachrichtendaten. Sieht nett aus. Jetzt müssen wir auch übertreffen, wenn ich Lust Nachricht, wie wir hier drüben tun, so innen auf ein paar Klick ist es ziemlich einfach. Nun, da wir haben, sagen wir, dieses Aktualisierungsobjekt, das mit diesen Daten gefüllt ist, wie können wir die allerletzte Nachricht greifen? Obwohl es eigentlich ziemlich einfach ist, dauert es nur einige Zeit, um die Logik zu verstehen. Also zuerst werden wir die letzte Nachrichtenidee greifen, die Objektpunktschlüssel von Updates sein wird und dann von diesem Array aus, sagen wir Nachrichten Idee. Wir werden das allerletzte Element aufknallen, das die letzte Nachricht sein wird. Ich OK, dann setzen wir Updates, Zimmer, chatten ich letzte Nachricht. Und anstelle von Nachrichtendaten werden wir Aktualisierungen letzte Nachricht Idee nennen. Und für die Nachricht I d. Wir geben die letzte Nachricht an. Alles klar, und dann werden wir das kopieren. Alles klar, Versuchen Sie, Block von hier zu fangen, und wir werden es hier drüben setzen. Und lassen Sie uns diese Funktion in irgendetwas konvertieren. Funktion. So aktualisiert eine Datenbank Ref Aktualisierungen. Okay, Said senkt Wir brauchen nicht in Armen und es sieht in Ordnung jetzt, lassen Sie uns eigentlich angeben Array der Abhängigkeit ist mit Chat I D und Profil und jetzt sind wir bereit, es zu testen. Jetzt wir nicht zurück zur APP. Lassen Sie mich auf Datei-Upload klicken. Ich werde alle diese Dateien als geöffnet auswählen. Dann schicke ich sie an den Tschad und sehe leere Nachrichten. Allerdings, wenn wir innerhalb der Datenbank schauen, Ich kann vier neue Nachrichten sehen und wir haben eingereicht, wie, Anzahl erstellt bei wir Autor haben. Und wenn wir Datei öffnen, können wir Inhalt, Typ, Typ, Name und Euro Verweis auf unseren Speicher haben. Das ist es also. Und es hat tatsächlich funktioniert. Herzlichen Glückwunsch im nächsten Video. Wir werden alle Dateien anzeigen, die wir hochgeladen haben. Aber jetzt kommen wir in unseren Veränderungen. Lassen Sie uns alles vergessen. Holen Sie sich Commit und speichern Sie Applauded Dateien in D Data Labyrinth. Alles klar, wir sehen uns in der nächsten. 139. Bilder und hochladen Dateien – Teil 3: Hey, in diesem Video werden wir alle unsere hochgeladenen Dateien anzeigen. Lassen Sie uns gehen, Gehen wir zurück zum Code und lassen Sie uns Nachricht öffnen Bytom Komponente der Ort, wo unsere Elemente gerendert werden. Und hier unten statt dieser Pfanne mit nur Text im Inneren, werden wir bedingtes Rendering setzen. Aber zuerst greifen wir nicht nur Text für die Nachricht, sondern auch, sondern auch, sagen wir Datei Jetzt, in diesem anderen, sind wir in der Lage, bedingtes Rendern zu tun. Also, wenn wir Text in unserer Nachricht auf Lee haben, dann werden wir Steuernachricht anzeigen. Denn wenn wir eine Datei in unserer Nachricht haben, dann werden wir eine benutzerdefinierte Funktion erstellen, um Dateien zu rendern. Also lassen Sie es uns nennen, rendern Dateinachricht und drinnen, wir werden unsere Datei übergeben, dann hier oben aus dieser Komponente, werden wir diese Funktion definieren, rendern abgelegte Nachricht, so dass es die Datei und diese Funktion wird uns standardmäßig nur einen Link zurückgeben. Und in diesem Link werden wir Download-Datei Punktnamen gießen. Wenn unsere Datei kein Bild und für einen treff ist, werden wir die Datei Tür Europa gießen. Ok, gut. Nun, wenn unsere Datei ein Bild ist, speichern wir Inhaltstyp innerhalb der Datenbank, so dass wir gegen diese Eigenschaft überprüfen können. Also, wenn Datei-Inhaltstyp Bild enthält, dann werden wir dif Element innerhalb dieses def zurückgeben, werden wir ein Bild als Schaltfläche gießen. Wenn wir also darauf klicken, öffnen wir das Moto-Fenster. Und auch werden wir diese Bodenansicht Original haben, um uns auf den anderen tippen und die volle Größe zu sehen . Also für diesen Tag, wenn wir Klassennamen von der Höhe bis zu 20 angeben und dann innen, werden wir Bild Bt in Moto erstellen und für das in Dur zwischen Modell, wir Wunden passieren, die abgelegt werden. Ihr l- und auch Dateiname wird abgelegt werden. Name der Ente. Jetzt müssen wir tatsächlich dieses Bild, Schönheit und Moto erstellen . Also innerhalb von Nachrichten. Lassen Sie uns neue Datei Bild VT in Moto Don't Yes erstellen. Und wie immer werden wir ein Model gießen. Aber wir werden es um Reaktionsfragment als innen wickeln. Anstelle der Schaltfläche, werden wir in Port off Typ Bild setzen. Es macht diesen Import fungiert als eine Schaltfläche, obwohl es sich um ein Bild handelt. Also für alternative, beginnen Sie eine diese Datei und für Eigenschaften angeben, wir werden Quell- und Dateinamen angeben. Also lassen Sie uns schlechten Quell- und Dateinamen. Und wie ich sehen kann, habe ich den falschen Dateinamen. Lassen Sie mich es also durch Bild Bt im Sterblichen ersetzen. Und lassen Sie mich es mit Bild Bt und Moto umbenennen. Okay, also importieren Sie das Bild vom Typ für die Quelle. Wir werden die Quelle für auf Klick angeben. Wir werden angeben, dass offene Schulden vom Gebrauch Modellstaat Gebrauch sterblichen Zustand greifen, so ist offen, offen und geschlossen. Und wir werden auch angeben, ob Sie Klassennamen hier drüben, das ist Max mit off 100 max, versteckt 100. Und mit wird Alpha sein. Okay, gut ist so für die Eingabe. Das ist es. Jetzt wollen wir eigentlich Motile definieren. Also lasst uns schlechte sterbliche Komponente als Mortal Door Heather, Körper und Fußzeile, Körper und Fußzeile. Also in Heather, werden wir sterbliche Titel Modell Tür Titel zeigen und wir werden den Dateinamen hineingießen und uns auch mit Todesfällen befassen. Und das jetzt in Essen er wir werden nur einen Link zu einem externen Wasserhahn angeben. Also werden wir ein und ein treff wird Quelle sein und wir werden Teer angeben, leer für die neue Registerkarte. Und wir müssen auch Beziehung spezifizieren. Kein Öffner, kein Rap Ferrer. Ja, so schätze ich. Und diese Komponente ist nicht selbstschließend. Wir werden die ursprüngliche Ansicht innerhalb und innerhalb der Ansicht Modell Körper würde das eigentliche Bild anzeigen . Also lasst uns ein Bild-Tag Dan setzen, für Wunden. Wir werden Wunden spezifizieren. Und für die Höhe, sagen wir, 104 mit, Sagen wir, auch 100 aus wird lassen Sie es Datei. Okay, jetzt lassen Sie uns verwenden Dies ist offen für Show Eigenschaft auf Höhe wird in der Nähe sein und es sieht OK jetzt lassen Sie uns diesen Import nach oben und innerhalb der Nachricht Element verschieben. Lassen Sie uns diese Komponente importieren. In Ordnung, jetzt schauen wir uns mal an. Wenn ich die App aktualisiere, sehe ich nicht laden Datei, Name, Download, Dateiname und ich kann Bilder sehen. Also lassen Sie uns schnell zu beheben sagte Statt dieser Klammern, lassen Sie uns beide geschweiften Klammern. Und jetzt werfen wir einen Blick, so dass wir tun, diese Datei laden. Ich kenne diese Akte nicht. Wenn wir darauf klicken, werden wir tatsächlich anfangen zu downloaden, und ich sehe immer, dass wir Bilder haben und wenn wir darauf klicken. Wir haben diese Ansicht original, und wenn wir darauf klicken, kommen wir zum neuen Hahn. Okay, es sieht ziemlich gut aus. jedoch In Lust Nachrichten haben wirjedochleeren Raum, also lasst es uns schnell reparieren. Lassen Sie uns zu Ihrem Raumelement navigieren und hier innerhalb der letzten Nachricht Text. Lasst uns das nächste setzen. Also, wenn wir keinen letzten Nachrichtentext haben, dann werden wir die letzte Nachricht Punkt Datei Punkt Name angeben und das war's. Jetzt schauen wir uns mal an. Wir haben einen Dateinamen, okay, ziemlich cool. Und das ist es im Grunde. Lassen Sie uns nun dieses Video beenden und unsere Änderungen übernehmen. Lassen Sie uns alles vergessen. Holen Sie sich Commit und lassen Sie uns sagen, hochgeladene Dateien für die Tat anzeigen. Wir sehen uns in der nächsten. 140. Audio-Nachrichten Record und hochladen – Teil 4: Hallo. In diesem Video werden wir eine Option zu einem Plourde User Recorings direkt aus dem Browser hinzufügen, so dass wir in der Lage sein, Audio-Nachrichten an den Chat zu senden. Lasst uns gehen. Also, wie werden sie damit umgehen? Nun, da wir bereits den Code für den Datei-Upload haben, wird es relativ einfach sein. Wir müssen nur einen Weg finden, wie man die Stimme des Benutzers aufzeichnet. Dafür. Wir werden React benutzen, Mike Library. Es ist eine Bibliothek, die Benutzerstimme aufnehmen und dann visualisieren bietet. Aber wir werden diese Visualisierungsoption nicht verwenden. Wir brauchen nur die Aufzeichnung. Also lassen Sie mich diese Bibliothek installieren. Ich werde diese Empfehlung nur kopieren, als in mehr Terminal. Ich werde es hinrichten. Und während es unter Bottom Ordner ausgeführt wird, lassen Sie uns neue Datei pflanzlichen Namen erstellen. Sagen wir Audio-Nachricht Bt in doggy esque. Denn jetzt wird es nur ein leerer Deve sein. Und lassen Sie uns diesen Index-Togs unten verwenden. Also hier, direkt nach der Anlage, Beat und Moto Lassen Sie uns Rodeo verwenden meine sagte, Sie sind TTN und auch lassen Sie uns nach dem Upload übergeben, weil wir Audio-Nachrichten hochladen werden. Also innerhalb dieser Komponente, werden wir nach dem Upload erhalten. Und jetzt lassen Sie uns unseren Markt gut definieren. Es wird fast das gleiche wie für die Befestigung schlagen Moto sein. Also lassen Sie uns Eingabegruppe unten von hier kopieren und als unser Markt eingefügt. Also dann lassen Sie uns importieren Importgruppe Schaltfläche für entclipped. Wir werden unseren eigenen Handler haben und lassen Sie uns auch das Symbol importieren. Und denn ich kann mein Krähentelefon benutzen? Okay, gut. Nun, wie wir in der Lage sind, dies zu verwenden, reagieren meine Kleiber Lassen Sie uns zur Verwendung und zum Beispiel gehen. Also lassen Sie uns das Importteil kopieren und es hier oben platzieren. Dann lassen Sie uns tatsächlich die Komponente verwenden. Und schauen wir uns an, welche Art von Requisiten wir passieren müssen. Also zuerst haben wir diesen Datensatz, und wenn ich auf dem Grundstück schweben, sagte zu wahr Aufnahme beginnen. Also brauchen wir den Staat, um zu kontrollieren. Wenn wir mit unserer Aufzeichnung beginnen wollen, lassen Sie uns eine erstellen. So wird es sein, ist Rekord in. Bullen wird standardmäßig aufgezeichnet, es wird auf false gesetzt und wir werden diesen Zustand übergeben, um Eigenschaft aufzuzeichnen, die für Klassennamen , wir werden Anzeige keine setzen, um irgendein reagierendes Mike Element anzuzeigen, aber um ihre -Funktionalität. Also, für einmal, hör auf. Dies wird unser Handler sein, wenn wir die Aufzeichnung haben und wir es hochladen möchten. Dafür werden wir auf einem Plourde-Handler erstellen. Also lassen Sie uns eine Plourde anziehen und im Voraus werden wir es in Gebrauch zurückrufen. Also, lassen Sie es jetzt leer lassen und auf Daten, wir brauchen das nicht, denn wenn wir zur Verwendung scrollen, können wir sehen, dass, wenn Daten es optional ist, aufgerufen wird, wenn eine Kanalhustenreihenfolge verfügbar ist wir brauchen das nicht. Wir brauchen keine Wurffarbe und Hintergrundfarbe, weil wir diese Komponente einfach nicht anzeigen , die wir auch übergeben müssen. Ich meine, tippen Sie auf diese Komponente, um sicherzustellen, dass wir MP 3 erhalten. Ehemalige. Also lassen Sie uns meinen Typ passieren und dann lassen Sie uns Audio MPA drei beruhigen. Okay, jetzt gut, bereit zu gehen. Also zuerst, lassen Sie uns dies beim Klicken definieren. Also lassen Sie es uns hier im Laden setzen und optimieren wir es mit Verwendung kalt zurück im Voraus weil wir einfach Said ist geladen anrufen und wir werden unseren Bullen Wert hier umkehren . Okay, jetzt gut für beim Hochladen, wir werden die nächste Logik gegossen. Es wird korrelativ Lee das gleiche wie innerhalb von Attachment BT und Moto sein. Also müssen wir Speicher referenzieren, damit wir diese Logik von hier kopieren können, als wir sie hineinlegen werden . Versuchen Sie es hier zu fangen. Wir werden dieses Applau-Versprechen kurz bekommen. Also müssen wir es in eine Senkenfunktion konvertieren. Also Speicherreferenzprüfung, ich d. Lassen Sie uns auch Chat I d. Von der Verwendung Paramus Haken als für die Lagerung greifen . Wir müssen es von ISC Firebase importieren, als für Kind für Dateinamen, die wir gegossen werden. Nicht dieser Dateiname, aber wir werden einfüllen. Sagen wir, Audio als Unterstreichung. Und dann öffnen wir String-Interpolationsdaten ab und zu am Ende, wir werden Tochter MP drei als für Blob-Datei setzen. Was müssen wir für die eigentliche Datei angeben, wenn wir reagieren? Mike on stop Eigenschaft gibt uns diese Aufzeichnung von Daten. Da wir Javascript verwendet haben, haben wir keine Typen. Und wir können nicht überprüfen, welche Art von Daten wir hier erhalten. Aber was wir tun können, können wir tatsächlich eine Funktion direkt hier drüben setzen, um die Intelligenz zu bekommen. Also erhielten wir diese Daten hier drüben. Und wenn ich Daten Dar setze, kann ich Blub hier drüben haben. Dies ist also ein Typ von Objekt entwickelt, das wir in Firebase-Speicher hochladen können. Also lassen Sie uns Daten Hund Blow Cash Control setzen. Wir werden es so lassen, wie es jetzt ist. Wir müssen auch die eigentliche Datei angeben, die wir innerhalb der Datenbank setzen, nicht innerhalb des Speichers. Also lasst uns es von hier aus greifen Befestigung, bt und Modell. Ich werde diese Objektstruktur kopieren. Dann werde ich eine wahre Datei erstellen und dann werde ich sie so platzieren. Also Snapshot, Mediendaten. Hugh R L Okay, gut. Jetzt müssen wir eigentlich Onley nach einem Plourde mit einer Reihe von Dateien anrufen, die wir applaudieren wollen , weil wir nur eine haben. Wir können nur ein leeres Array setzen und dann unsere Datei hineinlegen. Also, jetzt haben wir eine Art von Rate, richtig. Also für alle Fehler, werden wir Warnung Dar Fehler Fehler Punkt Nachricht dann für Bereich der Abhängigkeiten setzen. Wir gehen nach dem Hochladen vorbei und teilen ich . Außerdem müssen wir eine Art von einem Ladezustand definieren. Also lasst uns neue lebensfähige Schulden schaffen. Wird sagen, ist das Hochladen Lassen Sie es sagen, applaudiert. Standardmäßig wird es falsch sein und wir werden diese Funktion direkt vor einem Plourde aufrufen und auf true setzen. Also nach Applaus oder vielleicht direkt davor, wir werden sagen, ist applaudiert auf false und auch im Falle eines Ackerbaus auch Satz genannt wird auf falsch applaudiert . Also jetzt zu Eingabegruppe Bt und wir können deaktiviert Onley übergeben, wenn hochgeladen wird. Und wir müssen unseren Benutzer irgendwie benachrichtigen, wenn wir die Aufzeichnung machen, damit er das verstehen kann . Ok, deine Stimme wird dafür aufgezeichnet. Wir werden einen bedingten Klassennamen ziehen. Also, wenn wir Aufzeichnung haben, dann werden wir jeden Kumpel Blinzeln angeben. Und das ist der Klassenname mit der CSS-Animation, die ich in einer der CSS-Klassen definiert habe . Jetzt sieht es gut aus und alles andere sieht gut aus. Jetzt können wir die Funktionalität testen. Ich habe es nicht gestartet, also lassen Sie mich die AB ausführen, jetzt können wir sehen, wie der Entwicklungsserver gestartet wird. Okay, warten wir ein paar Sekunden, bis die APP ausgeführt wird. Okay, ist geladen. Jetzt versuchen wir, das aufzuzeichnen. Also, wenn ich diesen Knopf drücken, können Sie sehen, dass jetzt, hier habe ich Diese Registerkarte ist mit Ihrer Kamera. Wir mikrofonen dieses Symbol. Und auch, wenn ich nicht meine Erlaubnis hätte, Mikrofon zu benutzen, hätte es mich darum gebeten. Und jetzt werde ich benachrichtigt, dass meine Stimme es jetzt aufnehmen wird. Wenn ich also noch einmal auf diesen Button klicke, kann ich sehen, dass ich hier einen neuen Datei-Upload habe. Und wenn wir in die Feuerbasis gehen, als in den Tschad, dann können wir all unsere Akten haben. Und auch Audio-Nachricht. Okay, das ist es also. Im nächsten Video werden wir darüber sprechen, wie wir in der Lage sind, diese Audio-Nachricht in der ersteren anzuzeigen, die direkt schwächen . Hören Sie sich diese ältere Nachricht im Browser an, Aber für jetzt, lassen Sie uns unsere Änderungen zu begehen. Lassen Sie mich anrufen, bekommen Sie alles, dann, wer begangen hat und lassen Sie uns angeben, zusätzliche Option, eine Option zum Aufzeichnen und eine schlechte Audio-Dateien. Alles klar, wir sehen uns in der nächsten. 141. Audio- und Delete Teil - Teil 5: Hey, da. In diesem Video werden wir hochgeladene Benutzer-Audiodatensätze anzeigen. Und auch werden wir ein weiteres Problem beheben, das auftritt, als wir mit dem Datei-Upload begannen. Lassen Sie uns nie zurück zum Code und öffnen Sie uns Nachricht Element den Ort, wo wir unser Element rendern . Also hier überprüfen wir gegen die Zeit der Inhaltsdatei. Also lasst uns hier noch eine if-Aussage hinzufügen und wir werden gegen Audios überprüfen. Also werden wir eine Akte fragen. Inhaltstyp umfasst Audio. Also, wenn dies der Fall ist, werden wir ein Audio-Element zurückgeben, so dass für diese Reihenfolge in der Lage sein wird, Steuerelemente zu verwenden. Und lassen Sie uns auch schlechtes Quellelement es wird ein selbstschließendes Element sein. Quelle wird eingereicht werden, Herr, Herr, Ihr L und Typ werden odio MPA drei sein. Und wenn dies vom Browser nicht unterstützt wird, dann werden wir zeigen, dass Ihr Browser das Audio-Element nicht unterstützt. Ok? Und lasst uns Odeon von hier entfernen. Und jetzt haben wir in diesem Jahr verschlankt Warnung Medienelemente wie ein Audio muss eine Spur für Untertitel haben . Das ist in Ordnung, aber wir haben keine Cop Schienbeine. Deshalb müssen wir diese Warnung deaktivieren. Lasst uns das machen. Speichern wir es und lassen Sie uns diesen Unterdrücker bewegen. Jetzt können wir sehen, dass wir diesen Track haben, damit wir ihn spielen können. Ich kann meine Stimme hören, so dass sie tatsächlich funktioniert und das ist es für Audio-Nachrichten. Es war ziemlich einfach jetzt über andere Probleme, die entstehen, wenn wir begannen, mit Philip Oumzugehen Philip O Wann war krank ID die letzte Nachricht oder eine der Nachrichten mit Dateien, als wir es nur tun Nachricht innerhalb der Datenbank. Dateien aus dem Speicher werden jedoch nicht verdünnt. Was ich meine ist, lassen Sie mich versuchen, diese ältere Nachricht zu löschen. Wenn ich also das lösche, das ich in den Speicher gehe, aktualisiere ich es. Ich kann sehen, es ist ihr zu stehlen, um das zu beheben. Wir müssen unseren Mantel reparieren. So können Sie zurück zu Index-Togs navigieren. Inside Botschaft ist der Ort, an dem wir liefern. Unsere Botschaft ist, so dass dies Dorffunktion behandelt wird. Also hier müssen wir irgendwie auch Datei delish ausführen, wie tragbar das zu tun. Also innerhalb der Nachricht Element, wenn wir anrufen, lassen Sie es uns finden. Wenn wir behandelt aufrufen, gelöscht, wir übergeben Nachricht i D. Allerdings wissen wir nicht, ob diese Nachricht eine Datei hat oder es ist nur eine Textnachricht. Also lassen Sie uns auch eine schlechte Datei zu diesem Handle Löschfunktion. So, jetzt wissen wir, dass, wenn es eine Datei so innen, wie bis der Deckel wir auch Datei erhalten und direkt nachdem wir dill es Nachricht innerhalb Datenbank. Wir können auch noch einen Versuch machen, Block hier rüber fangen, und wir können das nächste tun. Also, wenn wir eingereicht haben, dann werden wir diesen Try Catch-Block hier drin setzen, und wir werden zuerst den Verweis auf diese Datei in der Firebase-Geschichte greifen, damit wirsagen wir , abgelegt rau nennen können sagen wir , . Wir können Speicher als Referenz aus Ihrer Hölle abrufen und gibt es Versprechen zurück oder nicht wissen, es scheint nicht so Referenz von Ihrem L. Und dann werden wir die Datei Tür angeben, Sie sind raus. Dann können wir einfach Datei Ref Door Dill es nennen, also wird dies definitiv ein Versprechen sein. Und im Falle eines anderen, werden wir Alert jemals Alarm Fehler angeben. Und hier ist ein sehr wichtiger Moment zu fangen. Stellen wir uns vor, wir liefern die Botschaft und das scheitert. Also, wenn das scheitert. Dadurch wird versucht, die Nachricht zu löschen. Um sicherzustellen, dass, wenn dies fehlschlägt, auch der nächste Code fehlschlägt. Wir müssen von diesem Catch-Block zurückkehren, wenn wir einen Fehler haben. Also, jetzt haben wir dies eine Senke bei einer Funktion, die keinen Rückgabewert erwartet. Wir können die noch einmal die Ja, Lind Warnung für die gesamte Datei unterdrücken . Und jetzt sieht es gut aus. Also lassen Sie uns zuerst manuell löschen diese Geruchsmeldung, die wir sie aufzeichnen. Und wenn ich versuche und erweitert die neueste Nachricht hier drüben, wenn ich erweiterte Nachricht gelöscht wurde. Und wenn Sie in meine Datenbank schauen, habe ich zwei Bilder. Aber wenn ich mich jetzt erneuere, habe ich nur einen. So wurde alles erfolgreich behoben. Okay, jetzt lassen Sie uns unsere Änderungen begehen. Lass uns alles bekommen, dann bekommst du Commits. Nehmen wir an, angezeigte Audio-Nachrichten und Fix File delish in, wenn Nachricht zugestellt wird . In Ordnung. Perfekt. Wir sehen uns in der nächsten. 142. Group nach Daten: Hey gibt es in diesem Video mobile Gruppen-Chat-Nachrichten nach Datum, so dass wir in der Lage, Chat passen in datumsbezogene Nachrichten aufgeteilt. Okay, lass uns nie wieder zum Code zurückkehren und mal sehen, wie wir uns dem nähern werden. Also zuerst brauchen wir eine Art Funktion, die unsere Nachrichten nach Daten gruppiert. Also lasst uns eins erstellen. Öffnen wir Helfer Togs. Und hier unten, lassen Sie uns neue Funktion erstellen, die die Gruppe kaufen benennen Es wird ein Array als erstes Argument erhalten , und dann wird es Gruppierung Schlüsselfunktion erhalten. Es wird ein kalter Rücken und lassen Sie mich erklären, wie wir dieses Mädchen mit Funktion benutzen werden. Also werden wir es so nennen. Das erste Argument werden wir Nachrichten übergeben, Array und dann Gruppierung. Schlüsselfunktion ist ein Rückruf, der ein Element aus diesem Array erhält. Also in unserem Fall Nachrichtenelement, dann wird alles, was wir von diesem Callback zurückkehren, unser Gruppierungsschlüssel sein. Also in unserem Fall ist es Datum. Also werden wir die Nachricht abgeben, die ich bei so etwas erstellt habe. Dann ist es gewachsen, wird uns ein Objekt zurückgeben, bei dem jeder Schlüssel dieser Gruppierungsschlüssel sein wird, den wir von diesem Rückruf zurückgeben. Also, wenn wir das Datum zurückgeben, dass es US-Nachrichten nach Datum gruppieren wird. Also lassen Sie uns so etwas sagen, wir haben ein Datum wie dieses und dann werden wir Array aus Nachrichten haben die sich auf dieses Datum beziehen und so weiter, und so eine. Okay, ich schätze, das ist klar. Jetzt lassen Sie uns diese Funktion erstellen. Lass mich ungewöhnlich, Dad, und wir werden Array-Punkt reduzieren, damit es nicht reduziert wird, einen Rückruf erhält. Und zweites Argument ist der Anfangswert des Zustands. Es wird also nur ein Objekt sein. Und für das co zurück erste Argument ist Akkumulator, wir werden ein Ergebnis verwenden, und dann der aktuelle Wert aktuelle Element gerade zu dem Element geht in Ordnung von jeder Iteration werden wir Ergebnis zurückgeben und dann werden wir das nächste tun zuerst, wir gießen Gruppierungsschlüssel wertvoll, und wir werden Gruppierung Schlüsselfunktion aufrufen und wir werden Element Einsicht übergeben. Auf diese Weise werden wir in der Lage sein,auf Nachrichtenelement innerhalb dieses Rückrufs zuzugreifen. Auf diese Weise werden wir in der Lage sein, Okay, gut. Jetzt werden wir gegen das Null-Tal oder das nicht existierende Tal überprüfen. Also, wenn Ergebnis Gruppierung Schlüsseleigenschaft nicht existiert, dann werden wir es wie sonst initialisieren. Wir erhalten eine Warnung oder einen Fehler, wenn wir versuchen, etwas auf nicht vorhandenes Objekt auszuführen . Also werden wir den Ergebnisgruppierungsschlüssel setzen und dann werden wir es als leeres Array zitieren. Ordnung, dann, wenn das existiert, dann werden wir das Ergebnis Gruppierung Schlüsselpunkt Push aktuelle Element setzen und das ist es. Jetzt sind wir in der Lage, es zu benutzen. Lassen Sie uns Nachrichten öffnen, indexieren Togs, und lassen Sie uns den Ort finden, an dem wir Nachrichten rendern. Also gerade jetzt ist es nur diese Kartenfunktion hier drüben. Lassen Sie uns es tatsächlich kopieren und erweitert. Und anstelle dieser Kartenfunktion gehen wir zu unseren eigenen benutzerdefinierten funktionalen Rendernachrichten. Der Tod wird erschaffen. Also hier lassen wir const grander Nachrichten und es wird eine Funktion sein, und innerhalb davon wird diese Nachrichtenkarte setzen. Aber lasst es uns vorerst kommentieren. Und hier werden wir Gruppe von so nennen, lasst uns arme const Gruppen. Dann werden wir gruppieren durch anrufen. Wir werden Nachrichten unseren Zustand des ersten Arguments übergeben und dann in Schlüsselfunktion gruppieren, so dass es Nachrichtenelement und Problemgruppe nach Daten erhalten wird. Also, um Element zu spezifizieren erstellt, aber erstellt Anzeige zu erinnern, es ist nur ein Datenbank-Zeitstempel. Es ist kein Datumsobjekt, das wir verwenden oder in JavaScript anzeigen können. Also lassen Sie uns es in ein spätes Objekt konvertieren, und dann passen wir an diesem Datum Objekt mit dem Datum String an. Alles klar, jetzt haben wir Gruppen und wir müssen Elemente erstellen, die wir in J sechs innerhalb Hund schieben und anzeigen . Lassen Sie uns also Objektschlüssel erstellen, dann Gruppen und für jede Methode angeben. Also, was hier passiert, dass wir jedes Datum durchlaufen werden, jeden Schlüssel innerhalb des Gruppenobjekts. Also werden wir uns hier und für jeden Tag verabredet haben. Zuerst werden wir Elemente Array erstellen. Also lassen Sie es Elemente lassen, die wir ändern werden. Und für diese Gegenstände, zuerst, werden wir unser erstes Element drängen. Das wird ein Date sein. L I Element. Also lassen Sie uns neue l I innerhalb Rebel angezeigt Datum und Klassenname wird Text Center Rand wäre nicht eins und Pad und auch müssen wir Schlüssel angeben, die Datum sein wird, und es ist einzigartig in diesem. Gruppen arrangieren. In Ordnung. Nun müssen wir auch alle Nachrichten zu diesem bestimmten Datum übertragen, damit wir neue Nachrichten erstellen können . Jeder und wir werden diese Kartenfunktion hier drüben benutzen. Also werden wir Gruppen Datum gießen, um auf alle Nachrichten zuzugreifen, die zu diesem bestimmten Datum, über das wir gerade iterieren. Also gruppieren Sie ST-Punkt-Karte und wir werden jede Nachricht dem Nachrichtenelement von hier aus zuordnen. Lassen Sie es uns kopieren und löschen Sie es. Wir brauchen es nicht mehr, also werden wir es so kartieren, und ganz am Ende werden wir einfach Gegenstände verdunkelte Katze nennen und dann Nachrichten, Ordnung? Und das ist es eigentlich. Und am Ende dieser Funktion werden wir Gegenstände zurückgeben, und sie werden zum Dummen gerendert. Es heißt also, dass Artikel nie zurückgetreten werden. In Ordnung, also lasst uns const setzen, Speichern wir es und schauen wir uns mal an. Wenn wir navigieren,sehe ich keine Nachricht. Wenn wir navigieren, Lassen Sie mich etwas andere Syntax versuchen. Nun, wenn wir frisch sind, können wir Aikens haben. Okay, also lasst uns das benutzen statt Dose cat. Also, was wir hier tun, um alle unsere Artikel in Push zu verteilen. Also werden sie als separate Argumente behandelt, um zu schieben. Also, anstatt Cower-Nachrichten wie diese zu übergeben, haben wir sie so weitergegeben. 12345 Alles klar, das ist also, was dieser Spread-Operator in diesem Fall tut. Okay, also jetzt haben wir, sagen wir, Donnerstag, 18. Juni, wenn ich Hallo setze. Jetzt habe ich den 19. Juni, so dass es tatsächlich funktioniert. Und jetzt haben wir diese hübsche kleine nette Gruppierung. In Ordnung, das ist es also. Und ich schätze, wir sind hier fertig. Lassen Sie uns unser Video beenden. Lass uns eingießen, alles holen, dann bekommst du ein bisschen. Und lassen Sie uns gruppierte Nachrichten nach Datumsangaben für die Wirkung angeben. Wir sehen uns im nächsten. 143. Pagination und Kontrolle der Position: Hallo. In diesem Video werden wir die Paginierung innerhalb des Chats behandeln. Im Moment laden wir alle Nachrichten aus der Datenbank und das ist nicht wirklich gut. Also in diesem Video werden wir das Zahlen und auch wir werden dieses Problem beheben. Wenn wir die Seite aktualisieren oder zwischen Chats wechseln, werden wir nicht nach unten scrollen. Lass uns gehen. Die Frage ist also, wie Sie mit der Paginierung in Firebase umgehen können? Nun, es gibt ein paar Ansätze und die häufigste ist nur Sie wieder Teoh neue Chat-Nachrichten abonnieren Jedes Mal, wenn wir einen neuen Teil laden, Dies ist der Ansatz, den wir nehmen. Wir können einen anderen Ansatz Teoh nur alte Nachrichten auf dem ursprünglichen Herrn senken und dann neue Updates abonnieren. jedoch nicht funktionieren, Dieser Ansatz wirdjedoch nicht funktionieren,denn wenn wir alte Nachrichten einmal auf Lee laden und wir eine der Nachrichten aktualisieren , wird sie nicht in Echtzeit aktualisiert. Das ist also nicht unser Fall. Wir wollen alle Nachrichten aktualisieren, und sie alle müssen in Echtzeit sein. Deshalb werden wir den ersten Ansatz verwenden. Also können Sie zu Index Punkt gs innerhalb von Nachrichten navigieren und hier oben, wir werden zuerst unsere Größe für die Seite angeben. Lassen Sie es Seitengröße von 15 sein. Jetzt müssen wir in unserer Komponente geblieben erstellen, die unsere aktuelle Grenze darstellt. Also lassen Sie uns Limit erstellen und Limit setzen. Standardmäßig ist dieser Status gleich der Seitengröße. Okay, gut. Jetzt schauen wir uns rein. Nutzen Sie die Tatsache, wo wir unsere Nachrichten holen. Also haben wir diese Nachricht, ref, die nicht auf diese Verwendung von Tatsache oder Tagen beschränkt ist, weil es keine internen Werte verwendet , so dass wir es sicher hier nach oben verschieben können. Alles klar, gut. Jetzt müssen wir hier funktionieren, um erste Botschaft zu locken und zu Herrn mehr Nachrichten, wenn wir auf den Button oben klicken. Also werden wir eine neue Funktion erstellen, nur um die Logik zu teilen. Also hier, vor der Verwendung der Tatsache, dass wir eine neue Funktion Lord Nachrichten erstellen und wir werden es in Gebrauch einschließen Rufen Sie zurück im Voraus, um es zu optimieren. Und lasst uns diese Logik hier drüben in Lord Botschaften setzen. Und löschen Sie dieses Abonnement nicht. Es ist wirklich wichtig, sich von Benutzerfakten abzumelden. Also, jetzt haben wir dieses Kind RG hier drüben als Abhängigkeit lassen Sie uns bearbeiten. Und wenn Sie Nachrichten neu laden, wir auch sicher, dass wir uns von alten Nachrichten abgemeldet und die neuen Updates abonniert . Also hier, kurz bevor wir unsere neuen Daten erhalten, rufen wir die Nachricht ref dot aus, um sich von den vorherigen Updates abzumelden. Ordnung, jetzt, in dieser User-Tatsache, wir Lord Nachrichten anrufen, und wir werden innerhalb einer Reihe von Abhängigkeiten angeben, und wir werden den Chat entfernen , weil von nun an Es ist nicht Ablassen von diesem Verwendungseffekt. Okay, gut. Und was ist mit Limit? Und was ist mit Lord More Funktionalität? Lassen Sie uns große neue Funktion neben Lord Nachrichten, die wir auf niedriger mehr nennen können auch Rapper im Einsatz zurückrufen. Und was sollten wir drinnen hineinlegen? Wir werden einfach Lord Botschaften mit unserer Grenze nennen, die wir innerhalb des Staates haben. Also jetzt müssen wir Lord Botschaften und Begrenzung als Abhängigkeiten angeben und das war's. Das ist alles für diese Funktion. Nun, innerhalb Lord Nachrichten erhalten wir Grenze, die wir erhöhen wollen, wenn wir auf Lord More klicken. Also hier werden wir ein Limit haben. Und wenn wir versuchen, neue Nachrichten für unseren Abfrage-Builder, können wir diese Eigenschaft namens Limit angeben, um zuletzt. Also die Anzahl von Notizen, die in dieser Abfrage enthalten sind, und wir werden Limit angeben, oder weil wir bereits begrenzt hörbar deklariert haben, nennen wir es nicht zu begrenzen und lassen Sie es hier vorbei. Und falls wir überhaupt keinen Wert haben legis befriedigen Seitengröße Nur ein kleiner Fullback hier drüben . Und jedes Mal, wenn wir einen neuen Teil von Nachrichten senken, müssen wir unser derzeitiges Limit erhöhen. Richtig? Wenn wir also auf diesen Button klicken, wird unser nächstes Limit unser aktuelles Limit plus Seitengröße sein. Also hier werden wir setzen Grenze gießen, und dann werden wir auf vorherige, vorherige plus Seitengröße verweisen . Okay, jetzt müssen wir diesen Boden definieren, und wir müssen diesen Entladen mehr Handler für diesen Grund setzen. Also hier ganz unten, wo wir unser Markup rendern, werden wir die nächste Logik setzen. Also müssen wir fragen, ob wir Nachrichten und Nachrichten haben Don't Length ist größer oder gleich unserer Seitengröße Onley. Dann werden wir ein anderes l I Element im Inneren zeigen wir Knopf setzen und innen unten werden wir tiefer mehr gießen. Nun lassen Sie uns ein paar Klassennamen hinzufügen. Also für diesen Verbündeten werden wir eine Steuerzentrumsspanne oben zwei und Marge unten auf ebenfalls setzen. Und auch für auf Klick, wir werden eigene niedriger mehr angeben. Und auch wir werden es mit der grünen Farbe, nicht rot setzen . Das gefällt mir nicht. Alles klar, gut. Sehen wir uns mal an, was wir getan haben. Wenn wir unsere Seite jetzt öffnen, wie ich, aktualisieren Sie sie noch einmal. Wir können sehen, jetzt haben wir Onley 15 Nachrichten und wenn ich auf mehr laden klicken, können Sie sehen, dass mehr Nachrichten geladen wurden. Das ist es also. Das ist es, was passiert. Also jetzt, wenn wir unsere Seite zunächst laden, haben wir unser anfängliches Abonnement Onley vier Seitengröße, die derzeit 15 ist. Wenn wir dann auf Lord More klicken, wird dies mit unserem aktuellen Limit gestartet, das wir erhöhen, und es wird auf 30 erhöht werden , und wir werden von diesen Updates abbestellen und wir werden neue Updates abonnieren . Das ist also, was im Hintergrund passiert. Alles klar, , was ist mit unserer Schriftrolle? Wie Sie sehen können, ist es ziemlich kaputt, weil, wenn wir neue Nachrichten gesenkt. Wir Bohnen krochen jedes Mal an die Spitze. Das ist nicht gut, also müssen wir es irgendwie kontrollieren. Nun, dafür müssen wir Referenz verwenden, um das eigentliche Element zu erhalten, damit wir seinen Scroll-Besitz manipulieren können . Dafür, Lassen Sie uns neue Referenz hier erstellen. Und es wird,sagen wir, selbst Ref mit gebrauchten Ref-Haken sein sagen wir, . Okay, dann werden wir den Verweis auf unser „l-Lement „weitergeben. Also Referenz wird Selbstreferenz sein. Und jetzt fangen wir an, es zu manipulieren. Also zuerst, für unseren anfänglichen Verwendungseffekt, wenn wir unsere Seite zunächst laden, wollen wir bis ganz unten scrollen, oder? Also hier werden wir Note spezifizieren und wir werden selbst Ref Punkt Strom referenzieren, um den tatsächlichen Verweis auf unser Element zu erhalten . Und hier, gleich nachdem wir unsere Nachrichten geladen haben, können wir Knoten scrollen oben gleich keine Scrollhöhe gießen. Und es wird Lloyds Sache. Ich habe jemals das Problem mit diesem Ansatz ist, dass, weil diese Botschaften des Herrn eine asynchrone Operation ist und dies synchron ist, so dass dies ausgeführt werden könnte, bevor dieser Herr Botschaften mit seinem Denken getan hat, so ist es wichtig, es wie jeder denken Operation dafür. Wir werden es um die eingestellte Zeit wickeln unsere und wir werden etwas wie 200 Millisekunden angeben . Auf diese Weise stellen wir sicher, dass dies auf Lee ausgeführt wird, wenn Lord Nachrichten fertig sind und wenn alle Elemente, die wir anzeigen möchten, auf der Seite angezeigt werden. Alles klar, jetzt schauen wir uns mal an. Wenn ich die Seite aktualisiere, kann ich sehen, dass ich nicht gedacht habe, aber ich bin nach unten scrollen. Ja, ich kann das sehen. Eine kleine Verzögerung von 200 Millisekunden. Aber das ist in Ordnung, oder? Daran ist nichts falsch. jedoch Jetzt werde ichjedochnach unten gescrollt. Ok? Unser nächster Ansatz ist es, diese Krähe Position tatsächlich zu halten, wenn wir auf Lord More klicken. Also sind wir nicht nach oben gekratzt. Nun, für das in Lord, mehr in erster Linie. Lassen Sie uns noch einmal auf unsere aktuellen Elemente verweisen. Also beachten Sie, dass selbst ref Strom sein wird. Bevor wir dann auf Lord More klicken, müssen wir die vorherige Höhe von unserem Scroll-Element von unserer Scroll-Position wissen. Wenn wir also neue Elemente gesenkt haben, erhalten wir die neue Höhe und dann können wir diese Werte subtrahieren. Also hier werden wir alte Höhe wertvoll gießen. Und hier werden wir Knoten-Scroll-Höhe gießen. In Ordnung, dann, nach unseren Nachrichten, rufen wir die „Timeout“ wieder an, um unsere Operation wieder asynchron zu machen. Mit einer Zeitüberschreitung von 200 Millisekunden und dann innerhalb, wir neue Höhe angeben, die keine Scrollhöhe sein wird. Und dann werden wir Knoten scrollen oben gleich neue Höhe minus alte Höhe angeben. Alles klar, jetzt retten wir es. Lassen Sie uns dieses Tempo entfernen und schauen wir uns an. Jetzt scrollen wir nach unten, und wenn ich auf Lord More klicke, können Sie sehen, dass diese Krähenposition beibehalten wird. Okay, es sieht also ziemlich gut aus. Wie geht's dir? Es gibt noch einen Fall zu handhaben. Immer wenn ich etwas im Chat schreibe, sagen wir hallo. Sie können sehen, dass ich nicht nach unten scrollen. Also müssen wir das in Ordnung bringen. Und im Idealfall wollen wir es so etwas machen. Wenn wir also mehr als 50% in unserem Chat gekratzt haben und wir etwas eingeben, wollen wir nach unten scrollen. jedoch an, Nehmen wirjedoch an,wenn wir nach alten Nachrichten suchen. Und wenn wir etwas oder jemand anderes eingeben, wollen wir nicht nach unten scrollen. Richtig Dafür müssen wir auch unsere Logik definieren. Hier oben, wir eine neue Funktion erstellen, die sicher nach unten scrollen wird, und es wird diese selbst ref aktuelle erhalten. Also hier werden wir Notiz setzen, und hier werden wir die nächste Logik setzen. Und auch können wir zweites Argument angeben, das wird sagen wir Schwelle sein, die,sagen wir, sagen wir, 30% von standardmäßig sein wird. Okay, hier werden wir den Prozentsatz von unserer Scroll-Position berechnen, und dann werden wir den Vergleich zurückgeben. Wir werden den Bullen in Wert verwandeln, wenn unser Prozentsatz, den wir hier definieren, größer ist als die Schwelle, die befriedigt wurde. Okay, also Prozentsatz wird die nächste Logik haben. Zunächst einmal multiplizieren wir unseren Wert mit 100%. Dann teilen wir diesen Wert durch keine Scrollhöhe Miner, keine Client-Höhe, und diese Logik wird uns den Prozentsatz geben. Und als voller Rücken werden wir nur Null bieten. Ok? So können wir jetzt Dysfunktion verwenden, um festzustellen, ob wir wirklich nach unten scrollen müssen, wenn wir die Schwelle hassen. Okay, also lass mich das kopieren und zu den Botschaften des Herrn gehen und hören, was wir tun werden. Beginnen Sie uns beruhigen const wieder. Sagen wir, Knoten und dann werden wir selbst Ralf dunklen Strom referenzieren und was es tun wird. Wir werden es direkt setzen, nachdem wir Nachrichten gesetzt haben. Dann werden wir fragen, ob wir mit unserem aktuellen Knoten nach unten scrollen und den Schwellenwert auf 30% Onley halten sollen . Dann gießen wir kein Scrollgespräch und dann keine Scrollhöhe, okay? Und eigentlich, weißt du was? Wir können diese Notiz nach oben setzen, um sie wiederzuverwenden. Okay, so wie das. Jetzt schauen wir uns mal an. Also lassen Sie mich mehr Nachrichten laden. Lassen Sie mich nach oben scrollen. Und gerade jetzt, wenn ich eine neue Nachricht tippe, bin ich nicht nach unten gerollt. jedoch Wenn ichjedochmehr als 30% scrolle und wenn ich hike tippe, kann ich sehen, dass ich nach unten scrollen werde. Das ist also ein Kerl. So können wir mit der Paginierung umgehen. Und so können wir unsere Scroll-Position steuern. Okay, ich schätze, es war nicht zu verwirrend, weil für mich, auf den ersten Blick, es waas Alles klar, also lassen Sie uns unsere Änderungen begehen. Lassen Sie uns ziehen, um alles zu bekommen, Commit zu bekommen und sagen wir, es Paginierung und Kontrolle der Scrollposition. Perfekt. Wir sehen uns im nächsten. 144. Bereitstellung zum to: Hey, wie jetzt, unsere Chat-Anwendung hat alle Kernfunktionen implementiert. Das einzige, was fehlt, sind wirklich Zeitbenachrichtigungen. Um es zu implementieren, müssen einige Dinge getan werden, um Ways Project zu feuern. Wir werden darüber im nächsten Abschnitt sprechen und diesen Abschnitt auf eine gute Notiz zu beenden, lassen Sie uns unsere aktuelle Tschad mit Firebase Hosting offene Feuerbasis bereitstellen, die Jason im Straßen-Ordner zum Hosting-Objekt befindet . Lassen Sie uns hinzufügen vor bereitgestellten Haken NPM laufen gebaut Rechnung Skript ist in Paket Jason definiert. Jetzt ist es so einfach wie die Eingabe von Firebase deploy vom Terminal aus. Mit diesem Befehl werden alle Teile des Projekts bereitgestellt, die in der Firebase Jason erkannt wurden . Dazu gehören Datenbankregeln und Hosting. Wir könnten auch separate Teile bereitstellen, indem Sie Firebase bereitstellen, Dash Dash nur Hosting, nachdem der Commander fertig ist, können wir auf den Host in Abschnitt innerhalb Firebase Dashboard gehen. Hier finden wir einen Euro, um auf unsere Bab App zuzugreifen. Es wird zwei von ihnen geben. Verwenden Sie die, die Sie mehr mögen, beide funktionieren. Firebase verfolgt auch Bereitstellungen und wir können auf jeden Bereitstellungsdatensatz im Versionsverlauf zurücksetzen Lassen Sie uns die App öffnen, um zu sehen, dass es tatsächlich funktioniert. Schön. Sieht gut aus und ziemlich schnell. jedoch fehl, Facebook Logan schlägtjedoch fehl,wenn jemand außer uns versucht, sich anzumelden, um es zu beheben. Gehen wir zu Google und Time. Facebook für Todesfälle, Klicken Sie auf meine abs als Chat-Anwendung wählen. Gehen Sie zu den grundlegenden Einstellungen für die Datenschutzrichtlinie. Euro Copy Website Curole und eingefügt hier als blättern Sie nach unten. Klicken Sie auf und Plattform und stellen Sie sicher, dass Sie Ihre Rhapsodie hinzugefügt haben. Klicken Sie auf Änderungen speichern, als gehen Sie zum Dashboard und drehte diese, die oben, um sicherzustellen, dass es zeigt Leben. Und das war's. Alles klar, das war das letzte Video in diesem Abschnitt. Im nächsten Abschnitt werden wir über benutzerdefinierte Kamin-Backend mit Cloud-Funktionen sprechen. Wir sehen uns dort. 145. Firebase: Hallo. Dieser Abschnitt widmet sich Echtzeitbenachrichtigungen und Cloud-Funktionen. Echtzeit-Benachrichtigungen werden mit brandbasiertem Cloud-Messaging implementiert, für das eine benutzerdefinierte Rückgabe erforderlich ist. Und deshalb nutzen wir Cloud-Funktionen. Damit wir fortfahren können, müssen wir unser Feuerrennprojekt auf die Blaze Anlage mit aktuellen Firebase Preisaktualisierungen von nun an aktualisieren , genannt Funktionen erfordern Blaze Plan, da die Verwendung einiger Google-Cloud-Dienste, die nicht verfügbar im kostenlosen Platt Blaze Plan übergeben wird. Du gehst Moto und das bedeutet nicht, dass wir bezahlen müssen. Alle diese Dienste werden mit wirklich Generälen gegeben. Prediger, vertrau mir die gegebenen Quoten, du wirst nie die zahlende Grenze heizen, aber es liegt ganz an dir. Bitte lesen Sie mehr über blaze Plan auf der Feuerbasis Preisseite, um mit dem Blaze Plan zu arbeiten. Gehen Sie zum Firebase-Dashboard, Klicken Sie unten auf Upgrade und wählen Sie Blaze Plan. Wenn Sie noch keine Zahlungsquelle haben, wird Google Sie nach Ihren Fahrzeugdetails fragen und danach wird es das Projekt aktualisieren, um zu überprüfen welchen Plan? Schneidprojekt verwendet. Schau dir einfach den linken Boden an. Jetzt werden wir alle im nächsten Video sagen, wir werden über Cloud-Funktionen und Server weniger Architekturen sprechen. Wir sehen uns dort 146. Was sind Serverless und Container?: Hey, reden wir über Server weniger. Klingt ziemlich cool, oder? Um besser zu verstehen, was es serverlos ist. Lassen Sie uns klug, wie normaler Server wieder funktioniert in bereitgestellt Server laufen und warten auf Verbindungen. Hier ist nichts falsch, aber hier ist ein kleiner Nachteil. Wir haben keine Benutzer, während Server weiterhin Ron und Verbraucher-Ressourcen. Nicht sehr vorteilhaft ist es, wenn ein Server, der bereitgestellt wird, bei Bedarf ausgeführt wird. Oder es ist besser zu sagen, dass Code auf Abruf auf Lee ausgeführt wird, wenn er benötigt wird. Wenn der Zugriff von niemandem im Decodieren ist, wird er nicht ausgeführt. Die meiste Zeit wird Serverless Ansatz vorgestellt. Informeller Server Letzte Funktionen. Jede Funktion wird separat bereitgestellt und verfügt über einen eigenen Ausführungskontext. Wenn es Funktion bereitgestellt wird, hat es ein eigenes Http, Ihr l, das verwendet wird, um die Funktion zu untersuchen. Dein L ist wie ein Trigger, um den Code auszuführen. Es gibt keinen tatsächlichen Server am Ende. Es gibt nur Code, der bei Bedarf ausgeführt wird. Unter der Haube wird die ganze Magie von Docker-Containern angetrieben. Ein Container ist ein kleines wie überwältigendes Paket aus Was auch immer mit virtuellen Maschinen eingefügt wird, das gesamte Betriebssystem ist so begeistert mit Containern auf Lee. Der Inhalt, der darin gespeichert wird, ermöglicht es, mehrere Container auf einem Betriebssystem auszuführen . Jede bereitgestellte Funktion, mit all ihrem Code und Abhängigkeiten, wird in einen eigenen Container gelegt, der bei Bedarf trans wenn die Funktion ausgelöst wird. Container müssen jedoch auch gehostet und bereitgestellt werden. Samba Recht Dies wird von Cloud-Anbieter gesteuert und verwaltet. Darum brauchen wir uns keine Sorgen zu machen. Und da alles für uns verwaltet wird, brauchen wir uns auch keine Sorgen um Skalierung und Wartung zu machen. Bereitgestellte Kampagnen werden automatisch basierend auf Anzahl Off-Aufrufen skaliert. Jetzt wissen wir, dass jeder Server weniger Funktion ein separates Stück Code ist, der auf Lee ausgeführt wird, wenn tatsächlich eine Funktion verwendet wird, ist sich nicht bewusst, von einer anderen, wie wir in der Lage sind, Code über mehrere Funktionen zu teilen . Beispielsweise müssen alle bereitgestellten Funktionen auf eine freigegebene Variable oder eine andere Funktion zugreifen. Es hängt ab und Cloud-Anbieter mit Feuer. Code der Base-Cloud-Funktionen wird im globalen Bereich freigegeben. Was sind die Nachteile, dass der Haupt Start genannt wird, wenn Code für eine Weile nicht ausgeführt wird , dass der Funktions-Container in den Ruhezustand geht. Wenn jemand versucht, auf den Code-Container zuzugreifen, dreht sich und es dauert einige Zeit. Dies ist so genannter Kaltstart. Es hängt von mehreren Faktoren ab. Zum Beispiel, wie groß ist die Dekodierung für diese Funktion? Oder wie viele Abhängigkeiten nachweisen, nachdem ein Code ausgeführt wurde, bleibt der Container für eine Weile im erwärmten Zustand und wartet auf nachfolgende Anfragen. Es bedeutet, dass der Kaltstart nicht stattfindet. Aber nach einiger Zeit, wenn es überhaupt keine Anfragen gibt, wird der Behälter schlafen gehen, und das nächste Mal werden wir die Kälte sehen. Beginnen Sie mit Server Less. Die Preisfindung wird anhand der Anzahl Off-Aufrufe und der Dauer der Ausführung ausgewertet. Firebase Cloud-Funktionen haben kostenlos abreißen Millionen kostenlose Aufrufe pro Monat, und das ist erstaunlich. Jetzt wissen wir, was weniger dient und was Cloud-Funktionen sind. Ich hoffe, es hat dir gefallen. Wir sehen uns in der nächsten. 147. Cloud – Wie ist alles vernetzt?: Hallo. Lassen Sie uns über Firebase Cloud Messaging sprechen. Was genau ist das? Cloud-Messaging ermöglicht es uns, Echtzeit-Benachrichtigungen an Benutzer zu senden. Wenn wir auf der Website sind, können wir eine Benachrichtigung aus dem Nichts bekommen. Wenn die Website und der Browser geschlossen sind, können wir systemeigene Benachrichtigungen auf Mobilgeräten erhalten. Es wird eine Benachrichtigung sein, als ob es eine echte mobile Anwendung unter der Haube war, verwendet es Browser, Boucher, FBI und den Hauptnachteil, dass es eingeschränkte Unterstützung und Browser und einige Betriebssysteme hat . Okay, lassen Sie mich den vollständigen Zyklus von Firebase Cloud Messaging erklären. Jeder Benutzer hat also ein eindeutiges Token, das Benutzergerät darstellt. Wir erhalten dieses Token vom Benutzer und speichern es in der Datenbank. Dieses Token sollte später nicht öffentlich verfügbar sein. Fire Base verwendet dieses Token, um eine Benachrichtigung an das Benutzergerät zu senden, um Benachrichtigungen auf dem Gerät zu erhalten . Wir werden einen Servicemitarbeiter einrichten. Wie du dich erinnerst. Es ist ein Mittelmann-Skript, das im Browser sitzt. Siedler Arbeiter werden oft verwendet, um einige Hintergrundaufgaben zu profi. Benachrichtigungen sind ein gutes Beispiel. Es wird eingehende Nachricht abfangen und Browser verwenden. Bush ap I Es wird die Benachrichtigung angezeigt. Für die Tat. Jetzt weißt du, wie es funktioniert. Im nächsten Video werden wir zur Ziege kommen. Wir sehen uns, dass 148. Device in der Datenbank speichern: Hey dort in diesem Video, wir werden Benutzer Geräte-Token zu bekommen und speichern Sie es in der Datenbank. Aber bevor wir das im vorherigen Video tun, als wir unsere Anwendung eingesetzt haben, bekommen wir dieses Hosting Bargeld und auch wir modifizierten Feuer basierend auf Jesus. Also zuerst, lassen Sie uns öffnen und ignorieren. Und lassen Sie uns Punkt Firebase fuller hinzufügen, um zu ignorieren, um sicherzustellen, dass wir diesen Ordner nicht verfolgen . Alles klar, gut. Nun lassen Sie uns unsere Änderungen zu begehen und sagen wir, bekomme Commit, Bereitstellen der App Perfect Now Ich habe bereits die Dokumentation für Firebase Cloud Messaging geöffnet, und von hier aus müssen wir Web-Anmeldeinformationen erhalten. Und das sind freiwillige Anwendungsserver-Identifikationsschlüssel. Das ist also der kaputte Schlüssel, den wir brauchen, um Firebase Cloud in erster Linie einzurichten . Also gehen wir zum Dashboard, als lassen Sie uns gehen, um es Einstellungen zu nähern und dann zu Cloud-Messaging von hier. Unter Web-Konfiguration müssen wir ein neues Schlüsselpaar generieren. Also lasst uns auf diesen Boden klicken und das ist unser dampfer Schlüssel, den wir verwenden werden. Es ist öffentlich, damit wir es teilen können. Ich meine, teilen Sie es nicht, aber es ist öffentlich verfügbar Jetzt gehen wir zu unserer Anwendung. Lass es uns tatsächlich laufen. Und dann lasst uns Oakland Firebase Doggy an erster Stelle stehen. Also hier werden wir Firebase-Messaging importieren, dann hier unten. Wir werden überprüfen, ob es vom Browser unterstützt wird, so können wir Anti-Export const. Messaging. Dann fragen wir, ob Firebase gestorben ist. Messaging wird unterstützt. Also, wenn es so ist, dann rufen wir App Dot Messaging auf, um die Instanz zu erhalten. Andernfalls wird gesagt, dass es nicht dann unten. Wir müssen es einrichten, um diesen Vapid-Schlüssel zu verwenden, den wir generiert haben. Lassen Sie uns also fragen, ob wir Messaging unterstützt haben. Also, wenn wir die Instanz haben, dann rufen wir Messaging an, benutzen öffentlichen Vapid-Schlüssel. Sie können dies in ihrer Dokumentation finden. In Ordnung, also lassen Sie uns diesen Schlüssel kopieren und ihn hier einfügen. Okay, gut. Und ich muss einen Handler für unsere Nachrichten einrichten. Lassen Sie mich das erklären. Nachrichten oder Benachrichtigungen sind in zwei Arten verfügbar Vordergrundnachrichten und Hintergrundnachrichten. Hintergrundnachrichten sind die Nachrichten, die behandelt werden, wenn unser Tab oder Browser geschlossen ist und Vordergrundnachrichten sind diejenigen, die sichtbar sind, wenn wir die Website scrollen Daher müssen Vordergrund-Nachrichten innerhalb der App behandelt werden. Hintergrundmeldungen werden von Service Worker behandelt. Also hier werden wir Nachrichten über Nachricht anrufen und für Wissen ist es so zu halten, wie es ist. Daten des Konsulats. Also werden diese Abonnements, sagen wir, unsere Vordergrundbotschaften behandeln. Okay, sagen wir mit und jetzt lassen Sie uns zu dekodieren, um Benutzergerät in der Datenbank zu speichern. Also lasst uns Profilkontext öffnen. Das ist also nicht der Ort, wenn wir in unseren Benutzer schauen. Also hier, wir müssen es schaffen. Und wenn ich die Dokumentation erneut öffne, kann ich sehen, dass ich diesen Code kopieren kann, um das aktuelle Registrierungstoken zu erhalten. Also, eigentlich weißt du eigentlichwas? Lassen Sie mich das kopieren und uns irgendwo hier unten einfügen. Aber zuerst müssen wir sicherstellen, ob Messaging vorhanden ist. Also werden wir überprüfen, ob Messaging existiert, die ich von MISC Firebase importiert habe. Also, wenn das der Fall ist, dann werde ich diesen Code beschleunigen, und vielleicht lassen Sie mich ihn in eine Spüle umwandeln wartet Index. Also lassen Sie mich einen Versuch fangen Block hier drüben setzen. Dann werde ich Nachrichten gießen, Token holen. So wird es const Tokcan sein. Nehmen wir an, aktuelles Token gleich wartet auf Messaging. Holen Sie sich Token und lassen Sie uns in Facing Funktion konvertieren. Okay, perfekt. Dann werden wir überprüfen, ob aktuelles Token existiert. Lassen Sie das alles kopieren. Also, wenn dieses aktuelle Token existiert, dann werden wir einige Dinge tun. Wir brauchen es nicht einmal, als im Falle aus Fehler werden wir in der Konsole und bei unserem aufgetretenen angezeigt . Okay, gut. Jetzt lass es uns tun. All das. Und los geht's. Jetzt müssen wir dieses Token in der Datenbank speichern. Dafür können wir Datenwege Dar Graph und der Ort oder der Pfad, den wir unsere Token starten , gleich zwei FC m Token Schrägstrich Token I d und dannSchrägstrichBenutzer i d. Schrägstrich können wir Datenwege Dar Graph und der Ort oder der Pfad, den wir unsere Token starten, gleich zwei FC m Token Schrägstrich Token I d und dannSchrägstrichBenutzer i d. Choke Ins auf der Rückseite. Und okay, also wird es FC m Token sein. Dann werden wir nach aktuellem Token, und als Kind werden wir Objekttürbenutzer abschütten. I d i d. Aus dem aktuellen Benutzer. Ok. Perfekt. nun die Dokumentation nach unten scrolle, kann ich sehen, dass das Token auch aktualisiert werden kann, also müssen wir das auch dafür behandeln. Lassen Sie uns dieses Stück Code kopieren und es neben diesem Strike Hedge-Block wie folgt setzen und dieses eigene Token aktualisieren es ist ein Abonnement. Es bedeutet also, dass wir uns dafür in Zukunft wieder abmelden müssen. Hier, Anti hacken in dir die Tatsache, dass Let's Armer Joe erfrischen kann, ich bin U-Boot, okay? Und wir werden auf Token oder frisch zu dem schrecklichen gießen. Und hier unten, wenn wir uns abmelden, werden wir überprüfen, ob Witz und Aktualisieren auf sub, Dann werden wir diese Funktion zwei Monate davor aufrufen und das gleiche Handy tun in der Cleanup-Funktion. Okay, gut. Nun, was wir hier tun müssen, lassen Sie uns auch in irgendetwas umwandeln. Funktion. Also, hier werden wir einen Sing setzen, und tatsächlich wird die Logik irgendwie dieselbe sein, also können wir sie einfach kopieren und so hier drüben platzieren. Okay, gut. Jetzt sind wir bereit zu gehen, aber weil wir direkt zur Datenbank auf den Pfad, den wir nicht zu Sicherheitsregeln hinzugefügt haben, müssen wir sie leicht ändern. Also lassen Sie uns zur Datenbank gehen, dann gehen wir zu Regeln. Und hier fügen wir einen neuen Eintrag hinzu. Also lassen Sie mich den Disc-Status wie diesen kopieren, dann werde ich den Status durch FC M-Token ersetzen. Dann werden wir einen Witz bekommen. Und ich D und mobil erlauben Read nie. Weil wir niemandem erlauben möchten, auf unsere Token zuzugreifen. Und für richtig Onley ist der Benutzer, das ist derzeit Sinan in der Lage, sein eigenes Token zu speichern. Richtig, also werden wir überprüfen, ob ein neuer Datenpunktwert ist. Also, wenn der Benutzer i d, den wir auf dieses Token schreiben, ich t gleich zwei von Ihnen. Ich d. okay. Gut. Jetzt lassen Sie uns genießen und es sieht gut aus. Jetzt gehen wir zu unserer Anwendung. Lassen Sie uns auffrischen. Okay, jetzt perfekt. Lassen Sie uns den Rat öffnen, um zu sehen, ob wir keine Warnungen haben. Okay, wir haben den Redakteur True. Wurde Toking, konnten die Standarddienstmitarbeiter nicht registrieren. Okay, das ist also gut. Und weil wir noch keinen Service-Mitarbeiter haben, bekommen wir diesen Eintrag. Das ist gut, aber dieser Fehler sagt, dass es funktioniert. Jetzt lassen Sie uns unsere Änderungen übernehmen. Und im nächsten Video werden wir Service Worker einrichten. Also lassen Sie uns gießen, bekommen Sie alles und lassen Sie uns überprüfen, welche Art von anderen empfangen werden sollen. Unerwartete Erklärung des Rates. Okay, das ist gut. Lassen Sie uns begehen. Und sagen wir, bearbeiten Sie Firebase-Messaging und speichern Sie Erstickungsbenutzer-Token in der Datenbank. Perfekt. Wir sehen uns im nächsten 149. Service Worker hinzufügen: Hey, da. In diesem Video werden wir weiterhin Firebase-Cloud-Messaging einrichten und einen Service-Mitarbeiter einrichten . Also habe ich bereits zur Firebase-Dokumentation navigiert und dann wähle ich empfangene Nachrichten aus. Also in diesem Abschnitt kann ich lesen und Sie können mehr über Vordergrund- und Hintergrundnachrichten lesen, aber wir sind an Service Worker Datei interessiert. Also lassen Sie uns nicht zu unserem Code vergessen und das erste, was wir tun werden, aber werden tatsächlich die Regeln gefangen , die wir im vorherigen Video mit FC M-Token erstellt haben. Also lassen Sie uns das alles kopieren, dann gehen Sie zu Datenbank Narren Jason und fügen Sie alle von ihnen hier jetzt über Service Worker. Also, wie Sie sehen können, ist dies tatsächlich der Service-Workercode. Rufen wir es sein. Und innerhalb Öffentlicher Ordner, lassen Sie uns neue Datei Firebase Messaging-Dienst Worker doggy s erstellen. So muss es mit diesem Dateinamen übereinstimmen. Es ist sehr wichtig, weil dies der Name ist, der von der Feuerbasis als Zerfall erkannt wird . Jetzt lassen Sie uns alles einfügen, was wir hier haben, und wir können es tatsächlich tun. All diese Kommentare so, dann brauchen wir die Nachricht nicht. Unglaublich. Und auch, lassen Sie es lint für die gesamte Datei deaktivieren. Ok, gut. Jetzt für diesen Konflikt hier, müssen wir unseren Konflikt initialisieren, den wir in unserer Anwendung initialisieren. Also lasst uns den Feuerplatz Dodgy eröffnen. - Ja. Und lassen Sie uns einfach dieses Objekt kopieren und es hier einfügen, so dass es Firebase SDK innerhalb von Service-Worker initialisiert . Und auch müssen wir sicherstellen, dass die Version, die wir hier importieren, mit unserer sdk-Version im Paket Jason übereinstimmen muss . Also lasst es uns öffnen. Und hier haben wir 7.15 jetzt hoffen wir in Service-Arbeiter, es hat 7.15. Das ist in Ordnung. Jetzt speichern wir es. Und ich habe den AB schon geleitet. Jetzt gehen wir zurück zur APP. Lassen Sie mich es jetzt aktualisieren, Wie Sie innerhalb des Rates sehen können, Ich habe überhaupt keine Warnungen, Also können wir zu unserer Datenbank navigieren. Und wie Sie jetzt sehen können, habe ich hier FC m Token. Wenn ich es öffne, habe ich das ziemlich entlang Benutzer ich d-Token und dass ich meinen Benutzer i d habe und das ist es tatsächlich bevor wir unsere Änderungen begehen, weil wir einen neuen Service-Worker mit Firebase Cloud-Messaging im Inneren verwenden . Wir brauchen eigentlich keinen Service-Worker durch Create React App. Also, was ich in Zukunft vorgeschlagen habe, werden wir das brauchen. Ist der lokale Host wertvoll? Also lassen Sie es von hier kopieren und in Helfer wie diese stecken und lassen Sie uns von hier aus exportieren . Jetzt speichern wir es Und lassen Sie uns Service, Arbeitsdatei und innen nach GS oder Index-Togs löschen . Lassen Sie uns diese Kommentare löschen. Wir brauchen sie nicht mehr, und jetzt können wir unsere Änderungen begehen. Also nochmal, lasst uns alles an Bord gehen und dann Commit bekommen. Und lassen Sie uns an ihm sagen, Service-Arbeiter auf, dass sagte Perfect, Wir sehen uns in der nächsten. 150. Cloud-Funktionen und Node Version Manager (NVM) einrichten: Hey, da. In diesem Video werden wir Cloud-Funktionen in unserem Firebase-Projekt einrichten. Lass uns gehen. Gehen wir zurück zu V s Code. Öffnen wir das Terminal. Und hier müssen wir nur Feuerbasis eingeben. Du brauchst Funktionen. Dann wird es uns mit ein paar Fragen auffordern. Lasst uns schlagen. Ja. Dann wählen wir Javascript. Dann vier Jahre Lind, wählen wir aus. Ja, und lassen Sie uns alle Abhängigkeiten installieren. Okay, gut. Wenn wir innerhalb von Funktionen schauen, wurden einige Dateien für uns erstellt. Ja, Lynn RC mit bereits vordefiniertem Konflikt. Lass es uns nicht bemorden. Dann haben wir Ignorieren Index Dodgy s und verpackt Jason bekommen, Also Index Punkt gs in Cloud-Funktionen ist ein Einstiegspunkt von Index-Togs. File RealAge, um separate Cloud-Funktionen zu exportieren, die separat bereitgestellt werden. Okay, drinnen Fahrrad. Es ist Jason. Hier finden wir ein paar Abhängigkeiten. Also ja, Lind und auch Firebase Admin und Funktionen. Diese beiden Pakete ermöglichen es uns, auf Fire Base vom Backend zugreifen und wir können auch ein paar Skripte finden . Definieren Sie hier, um tatsächlich Ron Funktionen Emulator in der lokalen Umgebung zu dienen, als wir etwas namens Shell haben und es ist Firebase Shell, um unsere Funktionen tatsächlich zu testen und auch dann haben wir Protokolle und andere Dinge wie Deploy und Start für Start-Skript . Da wir unsere Funktionen lokal testen werden, schlug ich vor, Ron statt Shell zu dienen. Also lassen Sie es dienen und speichern wir unsere Datei. Und auch, weil wir auf unsere Datenbank lokal und per Feuerbasis zugreifen werden. Es wird als nicht vertrauenswürdige Umgebung erkannt. Wir müssen eine Art von Authentifizierung oder Anmeldeinformationen zur Verfügung stellen, damit es funktioniert. Dafür müssen wir zurück zu unserem Dashboard navigieren. Dann müssen wir zu den Projekteinstellungen gehen und von hier zu Service-Konten gehen. Wir müssen den neuen privaten Schlüssel nicht senken. Also lasst uns eins erstellen. Es wird uns eine Jason-Akte geben. Öffnen wir es und lassen Sie uns den Inhalt kopieren. Gehen wir zurück zum Code. Und hier in Funktionen, lassen Sie uns neue Datei-Service-Konto erstellen, tut Jason und lassen Sie uns alles, was wir Koppett haben. nun sicher, Sienun sicher,dass Sie diese Datei hinzufügen, um ignoriert zu werden. Das ist sehr wichtig. Also hier fügen wir Service-Konto, dass Jason, so dass diese Datei muss nicht öffentlich verfügbar sein. Dies ist nur für uns, für die lokale Entwicklung. Okay, gut. Nun, wenn wir die Service-Konten hier wieder öffnen, können wir einen kleinen Codeausschnitt finden, also lassen Sie es uns kopieren und öffnen Sie den Index Punkt Js. Also hier haben wir Funktionen an der Spitze und Firebase-Funktionen. Lass es uns so platzieren. Und lasst uns auch den Admin fangen und VARS durch konstante Gut ersetzen. Jetzt müssen wir einen Service-Kontopfad angeben, der diese ist und dann setzen Sie es hinein, admin initialisieren bei, wenn wir Cloud-Funktionen verwenden. Bevor wir etwas tun können, müssen wir Firebase Admin als verfallen initialisieren und für die lokale Entwicklung müssen wir es so initialisieren, um auf die realen Daten zugreifen zu können, um auf riel Datenbank zuzugreifen . Das ist es im Grunde. jedoch Es gibtjedocheine wichtige Sache für Cloud-Funktionen. Wenn wir das Paket der Jason hier öffnen, haben wir Motoren eingesperrt. Knoten acht angeben. Die Sache ist, dass Firebase Cloud-Funktionen auf Lee zwei keine GS-Versionen unterstützt werden, entweder acht oder 10 und kürzlich haben sie die Unterstützung für Knoten Version acht vollständig gelöscht. Also jetzt Firebase Cloud-Funktionen sind grundsätzlich ohne GIS-Version verfügbar. Ted, das könnte gerade ein kleines Problem sein. Wir verwenden keine Js Version 12 und wir müssen unsere Cloud-Funktionen irgendwie mit Note Version 10 verwalten . Dafür müssen wir zwischen verschiedenen bekannten Jess-Versionen wechseln. Dafür müssen wir keine zusätzliche Software senken, die No Version Manager genannt wird. Dafür müssen wir keine zusätzliche Software senken, Diese Software ermöglicht es uns, zwischen verschiedenen Versionen auszuschalten. Keine GS in einem Befehl. In Ordnung, gehen wir zu Google. Und dann lassen Sie uns einfach tippen und VM, die Lassen Sie uns auf Versions-Manager auf dem Get Hop notieren gehen. Und dieses Repository ist auf Lee für Linux- und Mac OS-Benutzer. Bitte folgen Sie diesem Tutorial und installieren Sie und VM auf Ihrem Computer. Wenn Sie von Windows nach unten kommen, scrollen Sie nach unten zu zwei Fenstern Teil Und hier beschränken wir Neid M für Windows und klicken Sie dann auf Download. Jetzt werden Sie auf dieser Seite enden, dann klicken Sie auf N V M Richten Sie ZIP-Datei und installieren Sie dann Neid M. Okay, Nachdem Sie Neid M auf Ihrem Computer installiert haben, gehen Sie zu Ihrem Terminal und dann rufen Sie einfach Neid M Version oder Neid em. Strich-Version. Okay. Und VM-Version danach, um Nein zu installieren, nur Version 10. Lassen Sie mich meinen Befehl und die M-Liste ausführen. Es wird alle meine nicht lokal installierten GS-Versionen auflisten. Für Cloud-Funktionen benötigen wir also etwas von der 10. Version. Also nennen wir benvy M install und dann 10.20 Punkt eins. Nach dieser Notizversion wird Manager installieren und vor allem alles für Sie. Sie brauchen sich um nichts zu kümmern, um dann zwischen verschiedenen Versionen zu wechseln. Keine GS schwächen, einfach Typ und VM verwendet. Sagen wir 8 16 zu. Und jetzt verwende ich diese Version off note. Und wenn ich tippe und VM 10.20 Punkt eins verwende, benutze ich jetzt diese Version. Das ist es. So können wir verschiedene Versionen abschalten. Keine Gs, bitte stellen Sie sicher, dass Sie diese installiert haben, da sonst, wenn Sie keine Version 10 lokal installiert haben, wir Ihre Funktionen nicht lokal ausführen können. Alles klar, jetzt, um dieses Video zu beenden, lassen Sie uns unsere Änderungen übernehmen. Also lasst uns alles vergessen. Dann bekomme Commit und lass uns sagen, richte Cloud-Funktionen mit Neid ein. M perfekt. Wir sehen uns im nächsten 151. Meldungen Flow in: hallo In diesem Video möchte ich schnell den Ablauf für das Senden einer Benachrichtigung erklären. Zunächst einmal, in den Daten, bitte. Für jeden Raum gibt es ein weiteres Feld namens FC M-Benutzer. Es wird in Rafe User-Ideen sein, die Benachrichtigungen auf der Rückseite erhalten. Und wir werden eine Cloud-Funktion erstellen, die von unserer Chat-Anwendung als Admin zwei Definition aufrufen wird, zusammen mit Anfrage werden wir von mächtigen Namen und Benachrichtigungsnachricht senden. Dann mit Crew my D erhalten wir mit Crew my DBenutzer-IDs, die Benachrichtigungen mit ihren Ideen erhalten. Wir werden ihre Geräte-Token abfragen und dann eine Benachrichtigung mit den Token der Token senden, bevor wir beginnen. Ich möchte nur darauf hinweisen, dass es drei verschiedene Arten von Cloud-Funktionen gibt. Gullible auf Anfrage und Trigger auf Anfrage Funktionen haben einen eigenen Euro senden in einer Anfrage. Die Verwendung des Euro ist die einzige Möglichkeit, auf die Funktion zuzugreifen. Rufen Sie einen Darm Funktionen haben auch ihre eigenen neuralen, aber in Firebase-Client als Zerfall, die, die wir im Browser verwenden, gibt es eine spezielle Methode, um diese Art von Funktion nach ihrem Namen aufzurufen, nicht nach Euro und auch aufrufbar Funktionen analysieren und validieren Benutzer JWT-Token automatisch. Firebase verwendet JWT-Token, um Benutzer zu autorisieren, und wir beschäftigen uns nicht direkt mit ihnen. Trigger-Funktionen haben keine eigenen neuralen, und sie reagieren auf Lee zwei verschiedene Datenbank-Dokument-Ereignisse wie eigene erstellen bei Aktualisierung und Besitz Illit. Wir könnten angeben, dass jedes Mal, wenn ein Dokument auf diesem Pfad erstellt wird, diese Cloud-Funktion wird jemals ausgeführt haben. In unserem Fall brauchen wir nur eine Art von Funktionen leichtgläubig, leicht zugänglich und Benutzer aus seinem Protest für uns. Jetzt hast du eine bessere Vorstellung, was wir tun werden. Wir sehen uns in der nächsten. 152. FCM -Cloud-Funktion erstellen: Heiligtum. In diesem Video werden wir unsere eigene gepflügte Funktion erstellen, um Benachrichtigungsnachrichten zu senden. Lass uns gehen. Zunächst einmal öffnen wir diesen Code, als lassen Sie uns zu Funktionen gehen, Index-Togs und, lasst uns ungewöhnlich, diese De Fold Cloud-Funktion, die bereits ziemlich für uns finden. Speichern wir diese Datei. Dann lassen Sie uns Terminal öffnen und navigieren Sie zu Functions Ordner in Paketen und wir haben NPM Start-Skript ausführen . Also lasst uns es laufen und schauen wir uns mal an, was passieren wird? Zunächst einmal wird es nicht alle benötigten Emulatoren für verschiedene Dienste aus Kamin senken, wie AM ein Führer für Funktionen. Das ist in Ordnung. Danach werden Sie diese Art von Nachricht sehen, und es wird sagen, dass die erste HTTP-Funktion initialisiert ist und verfügbar auf diesen Ural und auch wir haben diesen lokalen Host für 1000 Funktionen. Also lasst uns das kopieren. Gehen wir zum Browser und lassen Sie uns dieses ländliche öffnen, um zu überprüfen, was passieren wird. Dies ist wie ein Dashboard, in dem wir steuern, welche Dienste wir vor Ort entwickelt haben. Also im Moment haben wir nur Funktionen. Bin ein Führer und es ist auf diesem Port verfügbar, und wenn wir zu Protokollen gehen, können wir das sehen. Jetzt haben wir eine http-Funktion initialisiert, so dass wir dieses Jahr kopieren können. L Und dann können wir auf diese Funktion zugreifen. Und aus der Antwort können wir Hallo von der Feuerbasis sehen. Das ist, was wir in dieser Funktion haben. Abtrotzig. Das ist es also. Das ist es, was unsere Cloud funktioniert. Aber jetzt lassen Sie uns den Emulator stoppen. Wir brauchen sie nicht. Und lassen Sie uns auch diese Art von Funktion löschen, weil dies eine zweifache eins ist und wir sie nicht brauchen. Aber bevor wir dies tun, möchte ich nur darauf hinweisen, dass jede Funktion, die aus indizierten oci ja exportiert wird, als Funktion behandelt wird. Also, was es innerhalb von Funktionen tun wird. Wir erstellen einen neuen Ordner namens Ser C Inside. Wir werden neue Datei FC M doggy s gießen Von hier werden wir unsere Funktion exportieren und dann werden wir sie von hier aus wieder exportieren. Okay, also lassen Sie es uns so behalten, wie es ist. Vielleicht werden wir diese Funktion im Voraus benennen. Sagen wir, schicken Sie FC M. Und im Moment, lasst uns es kommentieren. Ok. Gut. Jetzt in FC M. Lassen Sie uns Funktionen und Admin importieren. Und von hier aus werden wir unsere erste Funktion exportieren. Wird es benennen. Exporte exportiert Sand fc M. Also müssen wir Funktionen aufrufen. Dann müssen wir https gießen, und dann müssen wir auf Abruf stellen. Also diese Funktion, die standardmäßig kommt, war auf Anfrage Art der Funktion, die sie wollen, aber wir werden erstellen wird auf Abruf sein. Okay, also erhält diese Funktion bei kalter Funktion zwei Argumente. Also, wenn wir jedoch, wir können Daten und Kontakte sehen, Also Daten sind diese Daten, die wir zusammen mit Anfrage übergeben und wir können es innerhalb des Kontextes zugreifen enthält einige Kontextinformationen wie Benutzerinformationen und Benutzer JWT Token. Geh. Jetzt. Da wir diese Funktion aus FC M Dodgy s Datei exportieren, können wir innerhalb Index-Togs importiert werden. Also hier können wir Const eingeben. Lassen Sie mich f gleich eingeben, als wir den Quellordner referenzieren und dann f c M g s.. Also von Dysfunktion, wir exportieren und FC M Jetzt müssen wir es zerstören. Und dann von diesen Index-Togs werden wir es wieder so exportieren. So exportiert Sand FC M wird FC M Funktion gesendet werden, die wir von FC M Datei erhalten. In Ordnung. Und wir haben diese Warnung, die besagt, dass eine leere Zeile erwartet wird. Okay, lass es mich so sagen. Jetzt müssen wir unsere Funktion schreiben. Okay, also zuerst müssen wir überprüfen, ob unser Benutzer anwesend ist. Wenn die Person, die versucht, auf diese Funktion zuzugreifen, tatsächlich authentifiziert ist, haben wir bereits Benutzer durch diese Art von Funktion analysiert und validiert, was schuldhaft ist. Jetzt müssen wir nur überprüfen, ob der Benutzer tatsächlich geparst wird. Wenn der Benutzer also nicht analysiert wird, bedeutet dies, dass der Benutzer nicht anwesend ist. Okay, dafür können wir hier eine Hilfsfunktion erstellen, die wir check if off check nennen werden. Wenn es innerhalb dieser Funktion authentifiziert wird, werden wir den Kontext übergeben, und dann werden wir ihn von unserer Funktion so aufrufen. Überprüfen Sie, ob aus und dann passieren wir den Kontext. Und von diesem Scheck, wenn aus, werden wir das nächste tun. Wenn der Kontext-Punkt-Auth hat, hat er das Objekt im Inneren. Also, wenn ich Kontext gieße und dann Dar hier beschränkt. Also, wenn dieser Kontext nicht aus ist undefiniert. Wenn wir also kein Objekt haben, werden wir neue Funktionen werfen. Dar Https HTTP-Fehler Also das ist Paschall. Nehmen wir an, Syntax, die einen Fehler gibt, um unseren Grund abzulehnen, wird authentifiziert sein und die Nachricht wird sein. Sie müssen angemeldet sein. Okay, gut. Hier sind wir fertig. Unser nächster Schritt besteht darin, auf Daten zuzugreifen, die wir von der Anfrage erhalten. Sie steht unter diesem Datenobjekt zur Verfügung. Hier drüben. Es ist bereits für uns geparst. Also von diesem Objekt können wir die nächsten Werte zerstören, wir werden den Tschad schleifen. Ich d dann Titel aus dem Raum oder lässt den Titel der Nachricht. Und dann schicken wir auch eine Nachricht. Okay, gut. Jetzt müssen wir unsere Zimmerdaten mit diesem Stuhl abrufen. Ok, von hier aus werden wir einen Raumabblick haben. Ok, von hier aus werden Und jetzt müssen wir darauf zugreifen. Unsere Datenbankdatenbank kann von der Serverumgebung mit Firebase Admin als verfallen zugegriffen werden. Also hier an der Spitze, lassen Sie uns eine neue lebensfähige Datenbank, und dann rufen wir Admin-Datenbank an. Verwendung der Datenbank aus der Serverumgebung ist sehr ähnlich wie wir auf sie von abgelehnt zugreifen. Okay, jetzt können wir Datenbank anrufen, dann setzen wir rau, und jetzt müssen wir von Daten zugreifen. Also haben wir Zimmer als Schrägstrich Raum I D. Das wird Chat sein, i d. In unserem Fall gibt es das Versprechen zurück. Deshalb können wir hier drüben weglegen. Und lasst uns auch eine Spüle setzen, um es gültig zu machen. Also, nachdem wir Referenz haben, rufen wir einmal und dann wir schlechten Wert. Jetzt bekommen wir einen Raum-Snapshot, dann können wir die einfache Kontrolle machen, ob Raum Snap Shore existiert. Wenn es also nicht existiert, werden wir False zurückgeben. Ok. Von dieser Funktion sendet es nur eine falsche Anfrage zurück an den Client. Wenn wir diese Funktion aufrufen, dann müssen wir Raumdaten erhalten, um eine Benutzer-IDs zu erhalten. Also, lassen Sie uns Gerichtssaaldaten und dann werden wir vom Snapshot-Tür-Wert aufzeichnen. Jetzt müssen wir überprüfen, ob unser aktueller Benutzer ein Admin ist. So können wir tatsächlich die Nachricht senden, weil diese Funktion von einem Benutzer innerhalb des Tschad aufgerufen werden kann . Aber dieser Benutzer ist kein Administrator, und daher ist dieser Benutzer nicht in der Lage, die Nachricht zu senden. Okay dafür, wir müssen gegen Benutzer überprüfen zugibt so zuerst, Wie Sie sich erinnern, alle unsere ein Rennen in den Arbeiten gespeichert sind Objekte, also müssen wir sie in normale Javascript-Arrays für das Inside transformieren Helfer. Wir haben bereits Dysfunktion in Array umgewandelt. Kopiere es einfach von hier und lege es hier unten. Jetzt können wir eine Hilfsfunktion erstellen, um zu überprüfen, ob der Benutzer die Nachricht tatsächlich senden kann. Wir können eine neue Funktion unten wieder erstellen, und wir werden sie nennen. Überprüfen Sie, ob erlaubt. Und wieder wird es Kontext erhalten. Und auch es wird Chatzugibt erhalten. Ok. Und hier werden wir fast den gleichen Scheck machen. Also wenn nein, sagen wir, Chad, fügen Sie Mons Hund enthält Kontext aus, und dann Sie i d. Also, wenn Benutzer, der versucht, auf diese Cloud-Funktion zuzugreifen, ist in der Liste von Chad Adnan. Also, wenn das nicht der Fall ist, dann schicken wir wieder genau die gleiche Nachricht hierher. Und vielleicht sagen wir eingeschränkten Zugang. Alles klar, gut. Jetzt können wir diese Funktion hier drüben aufrufen. Überprüfen Sie, ob erlaubt, werden wir Kontext innerhalb übergeben, zusammen mit Transformation zu Array-Raumdaten zugibt. Okay, perfekt. Unser nächster Schritt besteht darin, tatsächliche Nutzerideen zu erhalten, die Benachrichtigungen erhalten. Dafür. Wir werden einen neuen wertvollen FC M-Benutzer setzen. Und wieder, wir werden Transform to Array aufrufen, und wir werden Raumdaten FC M-Benutzer setzen. Okay, jetzt werden wir alle Benutzer-Token bekommen. Dafür. Ich schlug vor, wieder eine Hilfsfunktion zu erstellen, die wir get user-Token nennen werden. Scrollen wir nach unten. Und hier werden wir eine neue Funktion erstellen, Benutzer-Token erhalten, damit es Benutzer I D und er wird alle Benutzer-Token bekommen. Also werden wir unsere Datenwege aufrufen, und wir erhalten Benutzer-Token. Momentaufnahme. Okay, also wird es unschuldige Funktion und Logik wird die nächste sein. Also werden wir Datenbank Ref nennen. Dann werden wir auf FC M-Tokens verweisen. Dann werden wir nach Wert bestellen, und wir werden gleich dem Benutzer I d setzen und dann alte Token zu bekommen, werden wir einmal Wert nennen. Okay, perfekt. Und vergessen Sie nicht, am Anfang zu warten. Jetzt haben wir Benutzer-Token Snap Shirt. Wenn wir also keine Benutzer-Token haben, hat Snap Short Kinder. Also hier überprüfen wir, ob tatsächlich dieser bestimmte Benutzer irgendwelche Token hat. Wenn dieser Benutzer keine Kinder hat, bedeutet dies, dass dieser Benutzer keine Token hat. Also können wir einfach eine leere zurückgeben, Eric. Also, wenn der Benutzer Token hat, dann rufen wir Objektpunktschlüssel und dann Benutzer-Token Snapshot-Punktwert auf. Weil wir, wie Sie sich erinnern, wie Sie sich erinnern,unsere A Raise in den Eisenbahnen als Objekte aufbewahren. Und indem wir dieses Objekt von Schlüsseln aufrufen, erhalten wir die tatsächlichen Benutzer-Token. Okay, gut. Jetzt können wir diese bekommen Benutzer-Token aus unserer Cloud-Funktion und für Papa aufrufen, weil wir Benutzer-Token für mehrere Benutzer erhalten müssen, die wir Promise verwenden müssen, um es so optimiert wie möglich zu machen. Okay dafür Hier werden wir einen neuen wertvollen Benutzer erstellen. Token, Versprechungen. Und was wir tun werden. Wir werden jeden FC M-Benutzer abbilden. Wir werden es kartieren. Also wird jeder Benutzer i d zugeordnet werden, um Benutzer-Token versprochen zu bekommen. Und in ihm wird dieser Benutzer I d. Okay, gut. Jetzt werden wir unser Ergebnis erhalten. Oder sagen wir, wir werden Benutzer-Token Ergebnis erhalten und wir werden anrufen, erwarten Versprechen. Nicht alle Benutzer-Token versprechen, aber die Sache ist, dass Versprechen, dass alle uns ein Array von Ergebnissen wie diese zurückgeben und unsere Benutzer-Token versprechen, so dass jedes get Benutzer-Token Versprechen uns ein Array von Benutzer-Token zurückgibt. Auf diese Weise werden wir mit einem verschachtelten Array wie das enden. Also für den ersten Benutzer werden wir diese Token haben. Also zum zweiten, können wir diese und so eins und so weiter bekommen. Um das zu vermeiden, müssen wir unseren Eric abflachen. Dafür können wir Dot Reduce-Methode aufrufen, die auf einem Rennen verfügbar ist und den Bereich abflachen. Ok. Dafür werden wir Benutzer-Token Ergebnis dann reduziert aufrufen, so dass es eine Callback-Funktion erhalten wird. Und das zweite Argument ist der Anfangswert. Also wird der anfängliche Brunnen ein leeres Array sein. Und diese Doktrin Verwendung zuerst ist der Akkumulatorwert , der wird, Sagen wir, angesammelt, Filkins. Und zweitens wird der aktuelle Wert sein, der Benutzer-Token ist. Diese Funktion wird also für jeden Benutzer-Token für jedes Element ausgeführt. OK, und hier werden wir einfach verschmelzen. Diese beiden löschen mit dem Spread-Operator. Also werden wir Akkumulator-Token und Benutzer-Token aufrufen . Auf diese Weise werden wir mit einem flachen und Array enden, wo jedes Token wie ein normaler Wert ist . Okay, geh es jetzt. Lassen Sie uns weiter, dann werden wir überprüfen, ob Token Punktlänge gleich Null ist, die von dieser Funktion zurückkehren wird , weil wir keine Token haben, um zwei zu senden. Und wie die Frage ist, dass wir Token haben, wie wir in der Lage sind, unsere Nachrichten zu senden, für die wir navigieren können, um durch seine Dokumentation zu schießen. Also das habe ich von früheren Videos. Aber wenn ich zur Serverumgebung auf der linken Seite gehe und dann gesendete Anfragen hier erstellt habe, können Sie mehrere Möglichkeiten finden. Wie kann ich eine Nachricht senden, um das Gerät anzugeben? Allerdings brauchen wir nur eine, die Nachrichten an mehrere Geräte gesendet wird, weil wir mehrere Token haben und wir eine Nachricht zu senden haben. Also lassen Sie mich einfach eine Nachricht kopieren , und ich werde sie hier setzen, und ich werde es F-C-M-Nachricht nennen. Also ich waren Daten werden nicht so aussehen, weil jede Nachricht auch eine andere Struktur haben kann . Es kann diese Art von Objekt mit Datenthema und Token haben jemals Dies ist Onley für benutzerdefinierte Benachrichtigungen. Wir brauchen nichts Brauch. Dafür brauchen wir eine normale Benachrichtigung. Wir müssen dieses Objekt leicht ändern. Anstelle von Daten werden wir ein schlechtes Benachrichtigungsobjekt im Inneren. Und dieses Benachrichtigungsobjekt hat zwei Schlüssel, die Titel und auch Körper sind, was die tatsächliche Benachrichtigungsnachricht ist. Also für Körper, werden wir eine beruhigende Nachricht sehen, die wir von Datenobjekt innerhalb dieser Cloud-Funktion erhalten. Also lasst uns eine Nachricht schreiben. Und für Titel, können wir unseren benutzerdefinierten Titel gießen, der wird betitelt werden, dass wir mit Anfragen und auch Raumnamen gesendet. Okay, also lasst uns schlechter Raumtitel. Also lassen Sie uns Titel und dann von Datentür Name setzen. Auf diese Weise werden wir Titel und vom Namen daneben haben. Aber lassen Sie uns vielleicht Raumnamen in Eltern erleichtern, so dass es ästhetischer aussieht. Ok, geh es. Werfen wir einen Blick darauf, wie wir das senden können. Wir können Admin Dot Messaging getan verwenden, sagte Multicast, und dann Nachricht. Okay, gut. Also müssen wir Admin Dot Messaging verwenden. Lassen Sie uns hier verfügbar erstellen, genannt Messaging auf. Rufen wir Admin-Messaging an. Ok. Perfekt. Jetzt können wir diesen Code tatsächlich kopieren. Lassen Sie mich nur die erste Zeile kopieren, weil wir die Versprechen in Texas nicht nutzen werden. Wir werden einen Think weg verwenden. Also lassen Sie mich const Admin-Messaging anrufen. Ich werde es durch Messaging ersetzen, dann senden Sie Multi Cast und wir werden FC M Nachricht senden, und wir werden es in eine wahre setzen, die Batch antwortet, und dann werden wir auf diesen Befehl warten. Okay, gut. Jetzt ist die Sache, dass Token ungültig sein können oder Token ablaufen können, da, wie Sie sich erinnern, auf Ablehnungs-Token aktualisiert werden können. Wenn das Token aktualisiert wird, ist das vorherige Token nicht mehr gültig. Dies ist also der Fall, wenn wir Token fehlgeschlagen sind. So können wir tatsächlich dieses Code-Snippet verwenden, um zu erkennen, welche Token fehlschlagen, und dann können wir sie aus der Datenbank liefern. Lassen Sie mich dieses Code-Snippet kopieren, und ich kann es so nennen, so dass wir viel Antworten haben und wir überprüfen, ob viel reagiert. Fehleranzahl ist größer als Null als bei allen butterigen Scones-Antworten. Wir schauen uns die Antworten an und prüfen, ob unsere Antworten erfolglos waren. Das ist also der Fall. Wir haben alle fehlgeschlagenen Token auf diese geschlagene Token-Rate geschoben. jedoch Wir wollenjedochetwas mit ihnen machen. Richtig? Wir wollen auch unsere Datenbank löschen. Dafür ziehen wir diese fehlgeschlagenen Token hier nach oben, und wir werden das nächste tun. Dafür ziehen wir diese fehlgeschlagenen Token hier nach oben, Also werden wir unsere fehlgeschlagenen Token aktualisieren. Mit diesem Druck im Inneren entfernen wir diese Konsul Sperre. Und jetzt, da wir alle gescheiterten Token haben, können wir unsere Datenwege tatsächlich aufrufen, bis es alle diese Token hier am Ende gibt, werden wir ein neues Array von Versprechungen erstellen, die wir mit Versprechen Punkt alle wieder ausführen werden , weil wir , bis es mehrere Token aus der Datenbank. Dafür können wir schaffen entfernen Versprechungen wertvoll. Und wir werden jedes gescheiterte Token zuordnen, um so gescheiterte Token-Punktkarte zu versprechen. Dann werden wir Token haben, und wir werden Datenbank Dot Draft nennen. Dann rufen wir FC M Jokinen an als Tokcan und dann die Tür entfernt. Okay, perfekt. So werden wir auf diese Weise am Ende mit einem Strahl aus, entfernen Versprechungen, und am Ende unserer Cloud-Funktion, können wir zurückkehren Versprechen denken alle nennen und wir werden ihn von Versprechungen gießen und dann für den Fall aus jedem Fehler können wir tatsächlich Punktfang Syntex hier anstelle eines Denkens erwarten. Weil dies unsere letzte Operation ist und in diesem Fall besser lesbar aussieht. Also im Falle eines anderen, werden wir Fehlerpunktnachricht zurückgeben. Okay, perfekt. Das ist es also. Das ist unsere Funktion, und so werden wir es verwalten. Ich schätze, das war's für dieses Video. Und im nächsten Video werden wir anfangen, unseren Kunden zu aktualisieren. Wir werden diese Funktion testen und was ich vorschlug zu tun. Wie Sie in Dateien sehen können. Hier, wir haben Sie, d. Bach. Lassen Sie uns diese Datei hinzufügen, um ignoriert zu werden. Sie ich oder vielleicht werden wir alle suchen Dateien zu ignorieren hinzufügen. Wir brauchen sie nicht. Okay, cool. Und wir haben diese Warnung besagt, dass erwartet, um Wert zurückzukehren. Okay, vielleicht können wir tatsächlich unsere Ja Fussel aktualisieren, damit wir eine konsistente, konsistente Rendite setzen würde Null sein. Ok. Und es scheint, als hätten wir hier schon einen irgendwo. Lassen Sie es uns auf Null setzen. Und lassen Sie es uns hier liefern, um diese Art von Warnung in unserer Datei zu vermeiden und auch für den Islam , Darcy, weil wir mehrere es ling Dateien in unserem Projekt haben. Einer im Stammordner und einer hier. Wir wollen auch sicherstellen, dass wir Option Route gleich zwei hinzufügen. Wahr. So wird es jetzt durch Decode erkannt. Okay, perfekt. Also für jetzt sind wir fertig. Lassen Sie uns unsere Änderungen begehen. Gehen wir also nie wieder zum Stammordner zurück. Dann rufen wir an, bekommen alles und dann bekomme Commit und sagen wir, bearbeiten Sie Cloud-Funktion, um FC M-Nachrichten zu senden . Perfekt. Wir sehen uns im nächsten. 153. Fehler Fix beseitigen: He, da. Im vorherigen Video, als wir schickte FC M Cloud-Funktion erstellt haben, habe ich ein paar Rechtschreibfehler gemacht, die ich in diesem Video beheben möchte. Der erste Fehler liegt in den Raumdaten zugrunde. Wir möchten Daten vom Raum-Snapshot-Punktwert erhalten, also lassen Sie es uns reparieren. Teoh Raum Snapshot Punktwert, dann ist der zweite Fehler innerhalb halb cm Benutzer. Wir wollen unsere Daten von DAR FC M-Benutzern anstelle von FC M-Benutzern transformieren. Dann, wenn wir scrollen nach unten zu FC ein Nachrichtenobjekt hier. Wir haben Registrierungstoken verwendet, und dieser Fehler kommt vom Kopiertempo aus der Firebase-Dokumentation. Also lasst uns es entfernen und lasst uns Token setzen und das gleiche Handy tun in fehlgeschlagene Token nicht schieben, weil wir sicherstellen wollen, dass wir Token von unseren Token erhalten, eine Vergewaltigung. Wenn wir dann nach unten scrollen, wird das allerletzte sein. Du musst eingeloggt sein und das war's. Alles andere sieht gut aus. Jetzt. Speichern wir die Datei und übernehmen Sie unsere Änderungen. Lassen Sie uns alles vergessen, dann bekomme Commit und lass uns sagen, korrigiere Rechtschreibfehler. Perfekter CEO im nächsten 154. Meldungen mit Cloud-Funktionen senden: Hey, da. In diesem Video arbeiten wir mit Kunden zusammen und erstellen ein Modellfenster, aus dem wir eine Anfrage an unsere Cloud-Funktion senden und dann eine Benachrichtigung an Absi senden. Uhm, Benutzer. Gehen wir, Gehen wir zurück zu B s Code. Und zuerst, lassen Sie uns Feuer Base Duchy s öffnen und lassen Sie uns Funktionen Paket importieren. Also oben werde ich Import-Firebase-Schrägstrichfunktionen einfüllen. Nun grüßen wir eine neue Instanz. So exportieren Sie const Funktionen App DAR-Funktionen. Und als er öffnete, sagt Parenti, dass Sie hier eine Region sehen können. Die Sache mit Cloud-Funktionen, dass sie standardmäßig in mehreren Regionen verfügbar sind. Sie sind in der Region U. S Ost verfügbar . Für europäische Nutzer ist das nicht großartig. Deshalb müssen wir die Region von unserer Funktion abwechseln. Dazu navigieren wir zu FC M Dodgy s an der Stelle, an der wir diese Funktion erstellen. Und innerhalb dieser Definition, lassen Sie uns eine weitere Kette aus einer Region hinzufügen und innerhalb Blase angegeben, dass diese Funktion auf Europa West drei Region ausgeführt wird . Sie können angeben, welche Region Sie möchten. OK, also Europa West drei Und jetzt, wenn wir diese Instanz initialisieren, müssen wir Europa West drei passieren, damit es funktioniert. Und auch wenn wir diese Funktionsinstanz in unserem Client verwenden, wird es versuchen, auf die rial Cloud-Funktion zuzugreifen, die bereits bereitgestellt ist. Aber für die lokale Entwicklung ist das nicht gut. Deshalb müssen wir hier unten überprüfen Wenn wir derzeit in der lokalen Entwicklung dann werden wir Funktionen verwenden. Amma später, dass wir mit MP Enron laufen, starten Sie innerhalb Functions Ordner. Also, hier, wenn wir gehen, um zu überprüfen, ob lokalen Host und ist lokalen Host zuvor in Videos Wir exportiert es von hier haben wir extrahiert Dies ist lokaler Host wertvoll aus Service Worker Datei erstellt von Creek React App und jetzt werden wir es verwenden. Okay, so ist der lokale Gastgeber. Lassen Sie es uns importieren. Also, wenn das der Fall ist, dann sagen wir Funktionen, benutzen Funktionen. EMLeader und wir müssen das Europa dafür angeben. Gehen wir zu Functions Ordner in unserem Terminal. Und hier werden wir jive und PM Ron beginnen und sehen uns die Ausgabe. In Ordnung. Wie Sie sehen können, läuft unser Funktions-Emulator auf dem lokalen Host 5001. Also müssen wir hier http als lokalen Host und 5001 angeben. In Ordnung, jetzt sind wir alle bereit, unsere verstorbenen. Jetzt lassen Sie uns das eigentliche Moto erstellen. Also gehen wir zum Chat-Fenster oben. Und in diesem Ordner werden wir jede Datei erstellen, die wir geschickt FC M Bt in Moto gs nennen . Und tatsächlich werden wir Code kopieren und einfügen von Lass uns navigieren, um Raum Beat und Moto zu schaffen , also werden wir all das nennen und es hier platzieren. Jetzt fangen wir an, Dinge zu ersetzen. Also zuerst werden wir es umbenennen, um FC M Bt und Modell zu senden, und lassen Sie uns diese Komponente tatsächlich innerhalb von Index-Togs innerhalb des oberen Ordners verwenden . Also hier, anstatt dies zu tun, werden wir fragen, ob unser Benutzer admin ist, dann zeigen Sie uns bitte. Senden FC M Bt und Moto. Alles klar, gut. Jetzt beginnen wir, Komponente zu ersetzen. Zuerst werden wir unser Motil für unser Formular überprüfen, damit wir keinen Namen und keine Beschreibung haben. Wir werden Titel und Nachricht haben, die wir an unsere Cloud-Funktion senden, so Titel und Nachricht und ist erforderlich. Wir sagen, Titel ist erforderlich und Nachrichtentext ist erforderlich. Okay, gut. Lassen Sie uns nun diesen Import löschen, als unsere ursprüngliche Form wird betitelt werden und Nachricht jetzt lasst uns importieren motile State wieder verwenden. In Ordnung, also haben wir Form. Der Wert ist für ihn geladen. Grob beim Einreichen. Okay, wir werden es etwas ändern. Also, eigentlich, löschen wir diesen Teil und behalten ihn so. Jetzt, hier, in Js sechs. Wir werden das entfernen, Steve komplett. Wir werden diesen Klassennamen entfernen, und wir werden ihn als Reaktionsfragment belassen. Also für die Schaltfläche, werden wir das Aussehen von primär angeben und die Größe wird extra klein sein, als es nicht eine Blockkomponente und Farbe sein wird. Lassen Sie uns die Standardfarbe behalten. Also, weil ich kann, werden wir angeben, dass ich eingehalten habe. Cast und wir werden sagen, Broadcast-Nachricht statt gesendet FC M. Lassen Sie uns ein wenig kreativer sein. Also für Model, das ist in Ordnung. Lassen Sie uns den Titel ändern, um Benachrichtigung Teoh Zimmer Benutzer als für dieses Formular zu senden. Es sieht gut aus für Formulargruppe. Wir werden es ändern. Teoh Titel Formular-Steuerelement Name wird Titel und Platzhalter werden geben Nachricht Titel als vier Beschreibung. Wir werden es wieder in Nachricht ändern. Es wird ein Textbereich-Komponente unseres Namens wird Nachricht sein. Dieser Name muss mit unserem Statusschlüssel übereinstimmen , der Titel und Nachricht ist. In Ordnung, also bitte, Inhaber muss so etwas wie und die Benachrichtigungsnachricht sein. Okay, gut. Und für diesen Knopf am unteren Rand. So Aussehen, primäre auf klicken Sie auf Block senden. Okay, es sieht gut aus. nun Lassen Sie unsnunnur den Text ändern, um eine Nachricht so zu veröffentlichen. Okay, gut. Werfen wir nun einen Blick auf die Spitze. Wir haben nicht benötigte Warnung und auch einen notwendigen Firebase-Import. Nehmen wir an, wir navigieren zurück zum Tschad. Und jetzt haben wir dieses moralische Fenster, also geben Sie einen Titel und eine Nachricht ein. Alles klar, jetzt definieren wir die Funktionalität. Was wird also bei Submit passieren? Wir müssen eine Anfrage an unsere Cloud-Funktion senden. Und wie Sie sich erinnern, ist unsere Cloud-Funktion eine aufrufbare Funktion, und wir verwenden Funktionen als verfallen. Deshalb wird es so einfach sein. Also lassen Sie uns Kitsch-Block hier drüben versuchen. Lassen Sie uns beiseite legen, wie folgt nach oben geladen wird, also innerhalb des banalen Kitsch-Blocks, wir werden das nächste tun, zuerst werden wir alle wertvollen gesendeten FC M erstellen und dann werden wir Funktionen als verfallen aufrufen , die wir von Firebase Dodgy S. Dann rufen wir https leichtgläubig an. Und hier müssen wir den Funktionsnamen angeben, den wir aufrufen möchten, also ist dies sehr wichtig. Also innerhalb Index-Togs exportieren wir senden FC M Cloud-Funktion. Das ist sein Name. Alles klar, also lassen Sie es uns kopieren. Und hier werden wir angeben, dass wir gesendete FC M Cloud-Funktion aufrufen werden. Diese Methode https leichtgläubig, gibt uns zurück und Sie Funktion, die wir aufrufen müssen, um tatsächlich eine Anfrage an Cloud-Funktion zu senden . Ordnung, das ist nicht die Anfrage selbst. Also jetzt müssen wir anrufen oder aufrufen ate Sand FC M mit Daten, die wir an Cloud-Funktion übergeben möchten . Und dann werden diese Daten hier unter diesen Daten verfügbar sein. Also, was wir tun werden, werden wir ein Gewicht nennen als FC M geschickt Und im Inneren werden wir vorbei Chat I d. Wie Sie sich erinnern, müssen wir Tschad I d Titel und Nachricht erhalten. Also, Chet Idee, wir müssen es zuerst bekommen. Also lasst uns hier und die Top-Char i D. Hughes Programme setzen. Okay, gut. Also haben wir überprüft, ich d und auch wir müssen Titel und Nachricht senden, was unser Formularwert ist. So können wir es einfach so in diesem Objekt verteilen, und jetzt wird es die Anfrage senden. Also am Ende werden wir gesagt haben, ist das Laden solcher Kleinigkeiten. Dann werden wir sat Formwert auf den Anfangswert nennen. Also anfänglich für und auch wir werden dieses Motorfenster schließen. Also, im Falle einer Warnung oder im Falle eines anderen, werden wir Alarm rufen, als an unserer und dann jemals Dock-Nachricht mit der Idee Nein. Sieben Sekunden. Und auch im Falle eines Erfolgs, werden wir Alert-Info angeben und wir sagen Benachrichtigung. Hat die Bohne gut geschickt? Sieht ziemlich genial aus. Sehen wir uns jetzt an, wie ich hier sehen kann, muss ich es nach oben verschieben. In Ordnung, lassen Sie uns navigieren. Gehen wir zur Broadcast-Nachricht. Lassen Sie uns etwas Super angeben und veröffentlichen. Nachricht und Benachrichtigung wurden gesendet. Jetzt schauen wir uns mal an. Wenn wir unser Terminal öffnen, können wir sehen, dass in unserem rechten Terminal, wo wir Cloud-Funktion laufen, wir können sehen, dass beginnende Ausführung beendet ist, so dass es tatsächlich funktioniert. Werfen wir einen Blick in unseren Rat. Wir sehen nichts. Und vielleicht wollen wir versuchen, es noch einmal zu schicken, um zu sehen, was passieren wird. Und lassen Sie uns Netzwerk-Tap öffnen. Also sagte ich die Nachricht. Dann können Sie sehen, dass die Anfrage an den lokalen Host Chat gesendet wird. Web up Europa war drei Sand FC um, habe ich jemals gesehen, dass das Ergebnis falsch ist. Und das liegt daran, wie Sie sich erinnern, in unserer Cloud-Funktion, überprüfen wir gegen Raumdaten FC M-Nutzer. Aber jetzt, in unserer Datenbank, wenn wir unsere Zimmer öffnen, haben wir noch keine FC M-Nutzer. Wir müssen es ändern. Also können navigieren, um Raum Bt und Moto zu erstellen und hören, was wir spezifizieren werden. Also für zugibt, werden wir auch aktuellen Benutzer Ihre i d verwenden. Aber auch, wir werden FC um Benutzer angeben. Der erste Admin. Der Ersteller aus diesem Raum erhält standardmäßig auch eine Benachrichtigung. Also lassen Sie es uns so kopieren. Nehmen wir an, wir sind und jetzt müssen wir die bestehende Gruppe ändern, aber das lassen Sie uns eigentlich zuerst unseren Benutzer i d. von hier kopieren . Dann lassen Sie uns auf dieses Pluszeichen klicken und sagen wir FC M-Benutzer. Dann wieder, Pluszeichen. Lassen Sie uns unseren eigenen Benutzer hinzufügen. Ich d Und dann für den Wert. Lasst uns für die Wahrheit. Dann fügen wir diesen Wert hinzu. , Lassen Sie uns versuchen,noch einmal eine Nachricht zu senden, also werde ich etwas Dummes sagen. Okay? Benachrichtigung wurde gesendet. Wenn ich meinen Konsul jetzt geöffnet habe, kann ich sehen, dass ich ein neues Konsul Log erhalte, das von Firebase Dodgy s stammt. Und wenn ich diese Datei öffne, kann ich sehen, dass es von dieser Nachricht auf Nachricht kommt. Also habe ich von der Benachrichtigung, Ich habe Körper und Titel. Nun, das einzige, was ich hier tun muss, ist, diese Benachrichtigung tatsächlich benutzerfreundlicher anzuzeigen . Warten Sie. Nun, das wird ziemlich einfach mit Toast oder Benachrichtigungskomponente zu tun sein, die von unserem Anzug kommt . Was wir tun werden, wir die Benachrichtigung als Toast aus unserem Anzug importieren. Warum? Ich benutze hier. Benachrichtigung hat Toast auf keine Benachrichtigung, da die Benachrichtigung auch als global wertvolles innerhalb des Fensters Objekt im Browser verfügbar ist. Es könnte also verwirrend sein und wir könnten einfach etwas machen. Nur um sicherzustellen, dass wir eine benutzerdefinierte Komponente verwenden, haben wir es dosiert genannt. Also hier drinnen auf Nachricht. Wir gießen so etwas wie, wie Sie sich erinnern, wir haben eine Benachrichtigung. Objekt innen, damit wir es von hier aus zerstören können. Benachrichtigung. Und dann rufen wir wieder an, wir werden Chur diesmal aus dem Titel und dem Körper der Benachrichtigung zerstören . Also, jetzt haben wir diese zwei Schlüssel und wir rufen Toasttür in vier. Dann werden wir Titelbeschreibung und Beschreibung gießen wird Körper und alt sein, so Dauer Null. Also, was es tun wird, wird es Gericht und Sie komponieren eine Benachrichtigungskomponente aus unserem mit diesem Titel mit diesem Körper, das ist die Beschreibung. Behalten Sie, dass wir diese Informationen durchlaufen müssen und dann die Dauer auf Null gesetzt ist, so dass sie nie von selbst geschlossen wird. Wir müssen diese Benachrichtigung manuell schließen. Alles klar, jetzt lassen Sie uns genießen und schauen wir uns mal an. Also, wenn ich so etwas wie ein Low und dann ist das Körper und veröffentlichte neue Nachricht Jetzt habe ich diese Benachrichtigung und das ist es. Allerdings gibt es noch eine coole Sache. Wenn ich auf etwas wie diese veröffentlichte Nachricht klicke und wenn ich auf diese Schaltfläche klicke und dann schnell zwischen Taps wechseln. Jetzt erhalte ich diese Benachrichtigung. Ziemlich cool, richtig? Das ist es also. Und so wird es funktionieren. Und alle Benutzer, die diese Broadcast-Nachrichten abonniert haben, erhalten sie auf ihren Geräten. Entweder ist es PC oder Mobilgerät oder was auch immer Gerät zu verwenden. Aber das ist, was wir im nächsten Video verwalten werden. Moment sind wir hier fertig. Lassen Sie uns unsere Änderungen begehen. Öffnen wir unser Terminal. Hier ist eine gute Sache. Es gibt uns Firebase Warnung sagen, dass mit einem nicht spezifizierten Index. Also lassen Sie uns tatsächlich hinzufügen, und Sie indizieren zu unseren Datenbankregeln. Also lasst es uns öffnen. Und, wie Sie sehen können, erwägen Sie, Index für den Wert bei FC M-Token hinzuzufügen. Gehen wir also zu FC M-Token. Dann werden wir Index hinzufügen. Also lassen Sie uns von irgendwo kopieren und es hier drüben setzen und Index auf wird Punktwert sein. OK, jetzt veröffentlichen wir diese Änderungen. Lassen Sie uns alle kopieren. Gehen wir zu Datenbankregeln, Jason, und lassen Sie uns sie so ersetzen. Okay, schau, erzielte. Jetzt lassen Sie uns unsere Änderungen übernehmen. Endlich. Also lass mich alles aufhalten, dann werde ich alles erledigen und dann begehen. Und dann werde ich sagen, verwalten FC M von Werk namens Cloud-Funktion und schickte FC M Perfect. Wir sehen uns im nächsten. 155. FCM verwalten: Hallo. In diesem Video erstellen wir ein neues Modellfenster. Immer werden Benutzer fragen, ob sie Benachrichtigungen erhalten möchten oder nicht. Lass uns gehen. Gehen wir zurück zum Code und unter Chat-Fenster Topordner. Lassen Sie uns eine neue Datei erstellen. Fragen FC M Bt und Modell. Lasst uns voll diese Komponente gehen. Es wird mit dem Akt Frackman abgedeckt. Und als Auslöser werden wir Aiken-Knopf für Aiken gießen. Wir werden angeben, ich kann Komponenten und für ich kann Komponente zitieren. Ich kann Podcast nennen. Diese ich kann Button auch blauen Kragen Größe wird klein sein und es wird auch ein Kreis sein. Lass es uns retten. Gehen wir zu Index Herzogtum Ja, im oberen Ordner Und lassen Sie uns diese Komponente in dieser Symbolleiste benutzen, direkt vor einem Detroit Beach und Robert. Lass uns schlecht fragen FC M Beach in Moto. Nehmen wir an, warten Sie und lassen Sie uns einen Blick jetzt, Wie Sie sehen können, habe ich diese gebrochene Markierung oben, und das ist, weil, wenn wir bearbeiten Zimmer Strand Intro Burr öffnen waren nach oben in dif Element. Lassen Sie uns es entfernen und lassen Sie uns Fragment reagieren. Nun, wenn wir einen Blick werfen. Alles ist gut ausgerichtet. Perfekt. Jetzt lassen Sie uns weiter bauen unsere fragen FC und geschlagen und Moto. Also lasst uns hier ein Motelfenster definieren. Im Inneren werden wir sterbliche Kopfzeile als Körper und Fußzeile haben. Lassen Sie mich alle angeben. Also in Heather, werden wir sterbliche Punkttitel haben und die Leute sagen nicht Tee Urlaub. Erlaubnis. Okay, gut. nun etwas im Körper anzuzeigen, Umnun etwas im Körper anzuzeigen,müssen wir wissen, ob unser derzeitiger Benutzer bereits FC M-Nachrichten empfängt. Dafür müssen wir einen anderen Wert in unseren Kontext gießen. Gehen wir zu Tschad Togs. Dies ist also Seite, wo wir einige Kontextdaten über unseren aktuellen Raum übergeben haben. Hier können wir unsere FC M Benutzer bekommen, Also lassen Sie uns schlechte FC M Benutzer wertvoll. Dann werden wir Transformation zu Array als aktuelle Raum FC M-Benutzer aufrufen. Jetzt müssen wir unseren Bullen holen. So werden wir erstellen wird FC M empfangen und wir werden fragen, ob FC missbräuchliche Array US aktuellen Benutzer enthält . Deine verdammte Vergangenheit. Dies empfängt FC und Bullen zu unserem aktuellen aus dem Kontext. Jetzt speichern wir es und im Inneren fragen FC M Between Moto, wir erhalten ist Empfang FC M von der Verwendung aktuellen Raumhaken. Ok, perfekt. Aber für Selektor, lassen Sie uns geben Wert wird FC M Good empfangen. Jetzt zum Modell brauchen wir den sterblichen Zustand. Also lassen Sie uns dieses Modell Zustandshook verwenden und Sie erhalten, wie immer, ist offen, nah und offen. Also für sterbliches Fenster, werden wir Show-Eigenschaft angeben, die auf Verstecken offen sein wird. Du wirst nah dran sein. Und auch werden wir eine andere Requisiten angeben, die wir vorher nicht verwendet haben, wie Größe. Lassen Sie uns extra klein angeben und auch Hintergrund wird statisch sein. Alles klar, jetzt lassen Sie uns unser bedingtes Rendering nach innen gießen, aber bevor Sie mich diese Angelegenheit schnell reparieren lassen und auch hier, und wir brauchen das nicht. Also in der Fußzeile, um diese rote Linie für einen köstlichen Put-Button mit Text hoch und innen Körper zu vermeiden , wird bedingte Rendering setzen. Also werden wir fragen, ob FC M empfangen wird dann werden wir ein Diff-Element mit Klassennamen aus dem Textcenter setzen. Und in diesem Dave, werden wir setzen Ich komme mit Klassennamen von Text grün und Rand unten drei, so kann ich nennen wird überprüfen Kreis und Größe wird fünfmal groß sein. Und neben diesem, Ich kann Wir liefern H sechs Titel mit Text. Sie sind abonniert Broadcast-Nachrichten, die von Anzeige Mons aus diesem Raum gesendet werden. Alles klar, gut. Nun, wenn wir keine Nachrichten abonnieren, dann werden wir wieder eine andere live mit Klassennamen aus dem Textcenter zeigen dieses Mal ein anderes Symbol mit Klasse. Nennen Sie Text Blau und Rand unten drei als auch. Also kann ich nennen, wird befragt werden. Kreis und Größe wieder fünfmal groß. Nun neben diesem Aiken wieder, h sechs Titel. Und möchten Sie meine Nachrichten abonnieren, die von Werbeanzeigen aus diesem Raum gesendet werden? Okay, gut. Neben diesem bedingten Rendering werden wir einen weiteren Text gießen. Also lasst uns p-Tag und Klasse setzen. Name wird Marge oben zwei sein, und wir werden sagen, um Benachrichtigungen zu erhalten, stellen Sie sicher, dass Sie nicht Urlaub in Ihrem Browser erlauben. Alles klar, gut. Lassen Sie uns genießen und werfen Sie einen Blick. Also, bevor wir das tun können, lassen Sie uns auf Klick-Handler für Aiken Schaltfläche gießen. Lassen Sie uns aufmachen und schauen wir uns mal an. Okay, wenn ich also auf diesen Button klicke, habe ich Benachrichtigungen. Erlaubnis? Sie sind abonniert, um Benachrichtigungen zu erhalten. Stellen Sie sicher, dass Sie Benachrichtigungen in Ihrem Browser zulassen. Außerdem wäre es schön, wenn wir eine Art Wert hätten, der angibt, ob wir die Berechtigung haben oder nicht. Denn wenn wir diese Seite Informationen hier öffnen, haben wir unterschiedliche Berechtigungen beschränkt, wie zum Beispiel für Standort, Mikrofon und Benachrichtigungen. Wenn dies also auf Blockierung gesetzt ist, können wir nichts empfangen. Deshalb ist es gut, hier anzuzeigen. Aber dass die Erlaubnis erteilt wird, waren nicht dafür. Setzen wir es neben diesem P-Tag-Berechtigungsindikator. Also werden wir Erlaubnis sagen. Dann lassen Sie uns an Bord Doppelpunkt und dann setzen bedingte Rendering. Also setzen wir Benachrichtigung und Benachrichtigung ist das globale Objekt im Fenster im Browser. Wenn ich jedoch sehen kann, dass dies Benachrichtigungen ap I ist Also, wenn die Benachrichtigungspunkt-Berechtigung zwei grunzt entspricht , dann werde ich ein gesponnenes Element anzeigen, das Grunzen sagt und uns einen Klassennamen absetzen Text grün Andernfalls, wenn wir nicht die Erlaubnis haben, werden wir Spanne mit Text de Nacht anzeigen und Klassenname wird Text gelesen werden. Perfekt. Aber jetzt kann ich es retten, weil es scheint, als hätte ich irgendwo besser. Alles klar, lasst uns diesen Pitak bis zum Ende so machen. Okay, sieht gut aus. Jetzt schauen wir uns mal an. Wenn ich dieses Fenster jetzt geöffnet habe, habe ich eine Berechtigungsfront. Es sieht aus, jetzt müssen wir unsere Funktionalität definieren. So innen Fußzeile. Lassen Sie uns zuerst einen Schließen-Knopf setzen. Also lassen Sie mich eine rekapitalisierte machen und auf Klick wird in der Nähe sein. Und direkt vor dieser Schaltfläche werden wir unsere Haupttasten für Funktionalität setzen. Also werden wir fragen, ob unser Benutzer FC M erhält dann werden wir Button mit Text setzen. Ich habe meine Meinung geändert, denn wie Sie sich erinnern, haben wir diese Frage. Möchten Sie Nachrichten für Farbe abonnieren? Wir werden grün angeben und für unclipped werden wir auf Abbrechen Funktion nur in einem Moment erstellen . Andernfalls werden wir, wenn wir keine Benachrichtigungen erhalten, eine andere Schaltfläche zitieren. Aber Text Ja, ich möchte abonnieren. In Ordnung. Zum Aufklappen werden wir außer und für eine Farbe gießen. Wir werden auch grün arbeiten. Alles klar, lassen Sie es uns retten. Und jetzt definieren wir zuerst unsere Funktionen. Lassen Sie uns aufgießen. Abbrechen am. Abbrechen und hier werden wir auf unsere Datenbank verweisen. Also lassen Sie uns Datenbank setzen, die wir aus Firebase-Datei als Referenz importieren. Und die Leute spezifizieren Zimmer, Schrägraum I D oder Chat I D, dass wir von Gebrauch Paramus Hook bekommen. Also chatten i d. Er wird von der Verwendung Dauerwellen erhalten. Lassen Sie uns diesen Import nach oben verschieben, als wir FC M-Benutzer referenzieren und für Kind, das ist aus dem aktuellen Benutzer. Lassen Sie uns wichtig aus aktuellen Benutzer Sie ich d nicht entfernen. Wir werden dieses Objekt einfach aus unserer Datenbank entfernen. Gut. Nun lassen Sie uns die zweite Funktion definieren, die außer ist und die andere Nationalität wird ziemlich ähnlich lästig sein. Kopieren Sie das, Nipper. Und anstatt dieses Kind zu entfernen, werden wir es auf die Wahrheit setzen. In Ordnung? Perfekt. Jetzt lassen Sie uns wirklich getestet. Also lasst uns unser Motil öffnen und hier klicken wir auf Ich habe meine Meinung geändert und jetzt können Sie sehen, dass Konditionalität eintritt funktioniert. Und wenn wir in die Datenbank schauen, gehen Sie in Zimmer Jetzt haben wir keine FC M-Benutzer. Wenn ich auf Ja klicke, tue ich. Jetzt haben wir FC M-Benutzer mit meinem Benutzer i d Einsicht, Aber um es ein wenig benutzerfreundlicher zu machen. Lassen Sie uns tatsächlich eine andere Farbe für unseren Aiken-Button definieren. So werden wir Aussehen sagen. Wenn unser Benutzer FC M erhält, dann werden wir Standard-Aussehen gießen. Sonst werden wir Geist setzen und werfen einen Blick, was passieren wird. Also, wenn ich sage, was jetzt habe ich diese Farbe blau hier drüben mit dem normalen Aussehen. Alles klar, wenn ich jetzt meine Meinung ändere, habe ich dieses Geisterbild ohne die Farbe im Boden. Okay, gut. Das ist es also. So sind wir in der Lage, unsere Benutzer zu verwalten, aber sie wollen abonnieren oder nicht. Wenn sie also nicht abonnieren, bedeutet dies, dass sie keine Benachrichtigung erhalten, die von dieser moralischen Form gesendet werden. In Ordnung, also schätze ich, das war's für dieses Video. Und dies ist die Zeit für uns, unsere Veränderungen zu begehen. Öffnen wir unser Terminal und dann gehen wir zu Dar und bekommen dann Commit. Lassen Sie uns ein Mann Alter FC M Benutzer mit dem fragen FC M vtm Moto perfekt, um diese Reise zu beenden. Lassen Sie uns Bush alles online, um aufzustehen. Holen Sie sich Bush Ursprung Muster, nachdem es fertig ist. Lassen Sie uns laufen, Firebase bereitstellen und genießen Sie unsere Chat-Anwendung online. Ich freue mich, sagen zu können, dass wir mit diesem Projekt fertig sind. Wir haben alles umgesetzt, was wir wollten. Die Echtzeit-Benachrichtigungen, Administratorrollen, Benutzerpräsenz. Wir haben alles an Ort und Stelle. Es wird noch ein paar weitere Videos über das React-Konzept geben, die wir in diesen drei Projekten nicht behandelt haben . Trotzdem hoffe ich, dass es für uns beide eine wertvolle Erfahrung war. Und ich hoffe, dieser Kurs gibt Ihnen, wofür Sie gekommen sind. Danke dafür. Zeit und Geduld. Wir sehen uns das nächste Mal. 156. Schlüsselfunktionen: Hey, in diesem Abschnitt werden wir Reaktionsfunktionen behandeln, die fast jede reguläre Produktionsanwendung hat . Aber wir hatten keine Chance, sie in unseren Projekten einzusetzen. Alles, was hier behandelt wird, wird auf unsere endgültige Projekt-Chat-Anwendung angewendet werden , um uns mit dem Code Doppelreferenz offizielle Reaktionsdokumentation zu helfen. Ich empfehle Ihnen, es selbst zu lesen, um besser zu verstehen, wie reagieren funktioniert. Wir sehen uns im nächsten Video. 157. React: Heiligkeiten. In unserem ersten Video geht es um React. Portale und Portale ist nur ein Weg Teoh. Rendern Sie etwas mit reagieren außerhalb def mit idealen Früchten. Was ich meine, wenn wir unsere Chat-Anwendung öffnen und wenn wir unsere Elemente inspizieren, wir wissen, dass alle unsere Elemente, alle unsere Komponenten, unsere App geht unter diesem dif mit Idee schrieb richtig, Jedoch, Werfen wir einen Blick, wenn wir ein Modellfenster öffnen, wo es gerendert wird. Also, wenn ich das durch acht neue Chaträume geöffnet habe, können Sie das hier unten sehen. Ich habe diesen Dialog, und wenn ich ihn öffne und wenn ich es inspiziere, können Sie sehen, dass mein neues Modell Chatham außerhalb dieser Route gerendert wird. Dafür werden Portale verwendet. Dies ist nützlich für so etwas wie Modellfenster oder Tooltips oder Hovers. Ich weiß nichts, was Mieter es außerhalb der Hauptkomponente behandeln muss. Dies ist sehr nützlich, wenn wir uns mit Z Index CSS-Eigenschaft beschäftigen. Lassen Sie uns also nie zurück zur Dokumentation und schauen wir uns hier Beispiele an, die Sie Wörter lesen können , die ich Ihnen gerade gesagt habe, indem Sie sich dieses Beispiel ansehen, es könnte zu kompliziert sein, zu verstehen, was los ist. Anstatt also das Klassenmotil aus der Dokumentation zu kopieren , ,zu ändern, öffnen wir unseren Code. Ich bereits Iran die Anwendung und andere Komponenten. Lassen Sie uns ein neues Dateimodell erstellen. Lassen Sie uns eine neue Komponente erstellen. Und hier, anstatt diesen Dave aus der Dokumentation zurückzugeben, können wir sehen, dass wir in der Lage sind, React zu verwenden, keine Portal-Methode zu erstellen. Also statt dieses def, lasst uns zurückkehren. Erstellen Sie Portal und es wird automatisch für uns importiert. Und wenn ich Parteien öffne, wie ich sehen kann, dass hier ich Kinder habe und dann Element Alles klar, Behälter. Also für Kinder werden wir Kinder stellen, die zu dieser sterblichen Komponente gehen werden. Also hier werde ich eure Kinder vernichten. Und dann werde ich es passieren, um Porto als unseren Container zu erstellen. Muss ein anderes div sein, das Probleme innerhalb des Index-html definieren. Also hier haben wir schon diese andere mit der Idee Satu Road. Lassen Sie uns nun einen weiteren Tag erstellen, wenn dies ein Container für unsere Modellfenster sein wird. In Ordnung, also hier werden wir Dave erstellen und ich d wird Modellroute sein. Speichern wir es und innerhalb von Modell-Togs. Wenn wir die Dokumentation öffnen, können wir es mit Dokument bekommen. Holen Sie sich Element von I. D. Also lassen Sie uns das kopieren. Lassen Sie uns es hier an der Spitze stellen und Portal als zweites Argument zu schaffen, werden wir moralischen Weg passieren. Ok, perfekt. Jetzt lass es uns retten. Und es sagt, dass reagieren wird erklärt. Nie benutzt. In Ordnung, also lassen Sie es uns vielleicht entfernen. Jetzt lass uns aufmachen. Vielleicht unterschreiben Seite. Und hier, lassen Sie uns dies willkommen zum Chat machen. Lassen Sie uns ihren Besuch ausführen, wenn in unserem Modellfenster. Also hier werden wir Modell aus unserer Datei importiert, die wir erstellt haben, nicht aus unserem Anzug. Also lassen Sie uns diesen Import entfernen, und ich möchte ihn aus unserer Datei importieren. In Ordnung. Scheint, als ob es aus unserem Anzug importiert. Lassen Sie uns es manuell aus dem Komponentenmodell importieren. Perfekt. Also in diesem Modell, werden wir unsere def mit Textmitte setzen. Nun, wenn wir nie wieder zu unserer App kommen Wenn wir uns jetzt abmelden, können Sie diese willkommen sehen. Chad befindet sich und der Boden Und wenn ich zu Elementen gehe und wenn ich meinen stummen Baum hier unten inspiziere , kann ich sterbliche Route sehen. Und innerhalb dieser Modellroute haben wir unser Willkommen auf dem Stuhl unter Textmitte beschränkt. Dies ist also ein Dies wird in Ihren Augenbibliotheken wie unsere CLR für Modellfenster und für Tool-Tipps verwendet. Zum Beispiel, wenn wir erstellen mussten, reagieren sie Anwendung ohne die Verwendung von Tear I-Bibliothek und wir mussten motile Fenster implementieren. Höchstwahrscheinlich würden wir React-Portale verwenden, weil sie außerhalb unserer wichtigsten selbstbewussten Leckerbissen gerendert werden. Sie können es praktischer Onley finden, wenn Sie in es auf einem realen Weltbeispiel zu bekommen. Das ist in Ordnung, wenn du es nicht ganz verstehst. Aber glauben Sie mir, das ist das Schlüsselkonzept, das Sie zumindest wissen müssen. Ok. Vielen Dank. Wir sehen uns in der nächsten. 158. Error: Hey, da. In diesem Video werden wir über ihre Brötchenbäume sprechen. Gehen wir zurück zum Gericht und lassen Sie uns hier anmelden. Was wird passieren, wenn wir sagen, einen Fehler in dieser Komponente werfen? Lassen Sie uns schlecht werfen neuen Fehler. Etwas Schlimmes passiert. Jetzt sagen wir was und schauen wir uns an. Wenn ich die Farbe auffrischen, können wir sehen, dass wir nie und etwas Schlimmes passiert haben. Und die Sache ist, dass diese eingeben ist auf gefangen. Es bedeutet, dass es durch reagieren aufgerufen wird, aber nicht von uns, und schließlich reagieren wird den gesamten kompetenten Baum, was wirklich schlecht ist, wenn wir eine Produktion bereit durch Anwendung, um zu verhindern, dass wir bessere Brötchen Bäume haben die Grenzen sind Komponenten, die alle diese Art von Buchstaben fangen und die Anzeige bei Fullback Sie I, zum Beispiel, eine Nachricht, dass diese ausgelagerten abgestürzt. Bitte aktualisieren Sie es. Wenn wir also die Dokumentation öffnen, haben wir ein offizielles Beispiel beschränkt, wie man eine einfache Antwort-Butt-Baum-Komponente erstellt. Und für die meisten Fälle ist das genug. Es sei denn, Sie haben eine wirklich ausgeklügelte Fehlerprotokollierung oder ich weiß nichts, was ich vorgeschlagen habe, möchte ich zu einer Live-Demo gehen? Dann möchte ich, dass Sie dieses Beispiel öffnen und von hier werde ich das kopieren. Geben Sie Bunge re Klasse. Lassen Sie mich das alles kopieren. Dann werde ich dekodieren öffnen und dann innerhalb von Komponenten, werde ich dir eine Datei erstellen, die jemals Bun gery ist. Und im Inneren werde ich diese klassenbasierte Komponente setzen. Und seien Sie nicht beängstigend über diese Komponente, dass sie klassenbasiert ist. Ich werde alles erklären, was hier stattfindet. Also lassen Sie mich importieren, reagieren von reagieren. Und auch wir haben viele Ja Länge Warnungen. Lassen Sie uns alle deaktivieren. Ich klicke einfach auf Quick Fix und deaktiviert für die gesamte Datei. Dasselbe werde ich auch hier tun. Jetzt lass es uns retten. Und was hier im Konstruktor vor sich geht, definieren wir in Ihrem Zustand , der ein Objekt mit immer und Fehlerinformationen ist, als eine kompetente Urkunde Catch, Lifecycle Hook oder Lifecycle Event zu verwenden . Wir fangen jeden Fehler auf, der in dieser Komponente passiert, okay? Oder zu seinen Kindern. Wenn wir einen Fehler haben, aktualisieren wir diesen Zustand, dann innerhalb der Rendermethode. Wenn wir irgendwelche Fehler in unserem Zustand, die gespielt wird die Fullback ey. Und ansonsten, wenn alles in Ordnung ist, rendern wir einfach alle seine Kinder. Okay, ziemlich einfach. Um diesen Editor zu verwenden,müssen wir unseren ganzen Baum in diesen Brief einwickeln. Um diesen Editor zu verwenden, Bunbury. Also lasst uns Abdel Gs öffnen. Und hier werde ich für immer Haufen wir Komponenten, die wir erstellt haben. Lass mich das alles retten. Dann navigiere ich zurück zu meiner App. Ich werde den Verstärker auffrischen und jetzt habe ich noch diese Reaktionswarnung. Das liegt daran, dass wir im Entwicklungsboot sind. jedoch Wenn ich esjedochjetzt schließe, anstatt Seite zu signieren, habe ich diese etwas eine falsche Nachricht mit den Details im Inneren. Und wenn ich meinen anderen Brötchenbaum öffne, kann ich sehen, dass im Falle eines Fehlers das genau das ist, was ich rendere und es kann angepasst werden Bias. So sind wir in der Lage, jede andere innerhalb des Y in jeder produktionsfertigen Anwendung zu fangen . Das ist ein Muss. Das coole Ding an unseren Grenzen, dass wir mehrere Komponenten erstellen können. Zum Beispiel haben wir jetzt den globalen Herman-Baum gesetzt. Wenn ein Fehler innerhalb des zuständigen Baums erzeugt wird, dann wird es durch diese Buchstabengrenze erfasst und stattdessen jede Komponente entfernt. Es wird diese Nachricht mit etwas angezeigt, wenn betrunken. Nehmen wir an, wir haben eine Menge von Komponenten und Knopf oder zerkleinert, wenn nicht bar abgestürzt. Wir wollen nicht alles entfernen, was für diese Situationen richtig ist. Wir können mehrere andere Grenzen setzen, zum Beispiel pro Komponente oder pro Seite. Also für das Signieren der Seite, kann ich seinen eigenen geben Brötchenbaum so ziehen. Dann kann ich für immer eine weitere Komponente mit einem anderen Markt erstellen. Und dann kann ich eine andere Seite an ihrem Brötchenbaum reiben. Also auf diese Weise, wenn Fehler innerhalb der Homepage erzeugt werden, wird es von diesen anderen Brötchen DRI gefangen werden und dann das U Y. Das ist in diesem Buchstaben Brötchenbaum aufgeführt wird angezeigt. Die Frage ist, warum? Und lief gut. Evers kann von allem produziert werden. Es kann ein Fehler innerhalb des Codes sein, den wir nicht kontrolliert haben, oder wir vermeiden es einfach. Oder vielleicht kann es ein Netzwerk sein, zum Beispiel, wenn etwas Online-Zugriff sein muss. Aber aus dem Nichts ging Internet herunter und die Komponente konnte nicht auf diese Weise rendern, wird es durch Eingabe Brötchenbaum in Käfig gekämmt werden und es ist sehr wichtig zu verstehen, dass diese Art von Fehlern nicht von jemals gefangen werden . Brötchen Bäume an ihren Brötchen Bäume fangen andere Onley verwandte Teoh Rendering. Nun schätze ich, wir brauchten das eine Art besseres Bunbury in unserer Chat-Anwendung. Also denke ich, das ist ein guter Zeitpunkt, um unsere Änderungen zu begehen. Also lassen Sie uns diesen Thron wegschütten. Sie Airline Inside Signing und lassen Sie uns eine globale jemals Brötchenbaum für unsere Chat-Anwendung setzen und lassen Sie uns unsere Änderungen begehen. Also werde ich eingießen. In Ordnung, lassen Sie mich das Terminal neu starten. Ich werde setzen, bekommen alles und dann begehen und dann besser Brötchenbaum hinzufügen. Perfekt. Ich hoffe, es war umfassend und nicht zu kompliziert. Wir sehen uns im nächsten. 159. Codeaufteilung: Hey dort in dieser Videoblase, sprechen Sie über Code-Splitting im Reakt-Modus, Splitting ist eng mit faul Laden in reagieren gekoppelt, getötet, Splitting bedeutet, um Komponenten zu laden, Abhängigkeiten oder vielleicht sogar CSS Dateien. Wenn wir die Dokumentation durchlesen, können wir diesen Bündelungsabschnitt sehen, wo es heißt, dass, wenn wir eine Anwendung erstellen, wir die endgültige JavaScript-Datei haben. Und in der Tat, wenn wir in unser Projekt schauen und wir gehen zu den neuesten erstellt statischen und eifersüchtigen Skript hier, beschränken wir ein paar Jobs, tolle Dateien. Und wie Sie sehen können, sind sie vergrößert und gleichzeitig ziemlich groß. Das ist also, wo unsere Logik hingeht. Aber mit Laserbeladung sind wir in der Lage, mehr Brocken aus unserer Anwendung zu erstellen. Und auf diese Weise können wir eine Last unserer JavaScript-Chunks auf Lee legen, wenn sie benötigt werden. Zum Beispiel, wenn Sie in unsere Anwendung schauen, brauchen wir im Grunde keine Anmeldeseite jetzt. Wir brauchen Onley, wenn wir nicht autorisiert sind, oder? Es wäre also sinnvoll, Lazy Load Sign und Seitenkomponente. Also, wenn wir zur Dokumentation gehen und wenn wir nach unten scrollen, um das eigentliche Beispiel mit reagieren, faul reagieren Lisi ist eine Technik im Inneren reagieren auf faule Lastkomponenten. Wir können dieses Beispiel verwenden, um unsere Anmeldeseite faul zu laden. Lassen Sie uns diese Codezeile kopieren, als ich zu Abla GS Place navigieren werde, wo wir die Signaturkomponente hier gerendert haben. Ich werde diese andere Komponente bezahlen, und ich werde sie durch Sinan ersetzen. Und dann werde ich den Pass kopieren, um sich in Seite zu melden. Und dann werde ich auch faul importieren, anstatt Tinte so zu verwenden. Und auch muss ich Verdächtige importieren, wie wir aus der Dokumentation sehen können, denn wenn wir faul, niedrig, dim Ojul, kann es einige Sekunden oder Millisekunden dauern, um dieses Modul zu laden. Und während es geladen wird, um Fleshing zu vermeiden, könnten wir etwas Fullback verwenden. Du ich so etwas wie das Laden. Deshalb müssen wir immer Spannung geben. Also lassen Sie es mich kopieren, und mein Prediger fehlt. Also lassen Sie mich es abbrechen und tatsächlich die App gestartet. Vielleicht wird es funktionieren. Okay, also werde ich Verdächtigen eingießen, dass ich mich anmelden würde und ich werde es so sagen, jetzt kann ich meine Bewerbung wieder essen und mich speichern lassen und jetzt müssen wir uns so mit Verdächtigen anmelden und lassen Sie uns den alten Import entfernen Anmeldeseite abmelden. Nun, wenn ich es speichere, muss ich auch Spannung importieren. Nun, wenn ich sage, wo und wenn ich zurück zum Gericht navigiere, wenn ich die App aktualisieren, wenn ich auf Inspect klicke und wenn ich den Netzwerk-Tap geöffnet habe, lassen Sie mich abmelden und achten. Welche Datei wird geladen? Also, wenn ich auf diesen Button klicke, sahen Sie dieses kleine Flackern mit Ladedef, das wir als voll zurück hier setzen, während dieses Rückfall Sie. Ich habe gezeigt, dass wir das Stück von unserem Mantel geladen haben. Und wenn wir es hier öffnen, haben wir unsere USA eingeschränkt oder sehen die Unterzeichnung von Seiten. Das ist also, was es bedeutet, unsere Anwendung zu teilen. Wenn Sie eine wirklich große Anwendung erstellen, wahrscheinlich, wenn jemand Ihre Website zum ersten Mal startet, werden die meisten Ihrer Komponenten wahrscheinlich nicht benötigt. Diese Technik ist wirklich wichtig zu verstehen. Und ein gutes Beispiel wäre, nur Twitter Rap-Seite zu öffnen und zu sehen, dass überall, wenn Sie nur die Website laden, können Sie Spinner sehen, die sie faul laden viel, so dass sie faul laden alle Komponenten laden, um die anfängliche Paketgröße zu reduzieren weil es wirklich wichtig ist. Wenn ich die App aktualisiere, können Sie sehen, dass viele Dateien hier geladen wurden, wie ein Chunk Haupt Chunk, und wir wollen Haupt Chunk so klein wie möglich halten, weil anfängliche Lord von der Website wichtig ist. Alles klar, also geht es hier um Laserbelastung? Ich hoffe, es war umfassend. Nun lassen Sie uns tatsächlich unsere Änderungen an der Chat-Anwendung übernehmen. Also lasst uns eingießen, Dar ansteigen und dann engagieren. Fügen Sie faul Floating perfekte CEO in der nächsten. 160. Schlussbemerkung: Hallo. Jetzt kennen Sie alle modernen Dinge, die benötigt werden, um eine große produktionsfertige Reaktionsanwendung zu erstellen. Geben Sie ihm ein wenig mehr Übung und Sie werden definitiv alles aufbringen, was wir abgedeckt haben . Hier ist eine Aufgabe für Sie. Gehen Sie durch die Reaktionsdokumentation und verlassen Sie sich auf Themen, die Sie während des Kurses noch nicht gehört . Es gibt viele subtile Details, die beim ersten Glas nicht zu sehen sind. Stellen Sie sicher, dass Sie verstehen, warum Sie diese Technik verwenden. jetzt betrifft, sind wir mit diesem Abschnitt fertig. Wir sehen uns im nächsten. 161. Zusammenfassung – Wissen, das du gewonnen hast.: Hallo, Sie haben es sehr gut gemacht. Sie bauen drei separate Reaktionsprojekte unterschiedlicher Komplexität auf. Sie können stolz sagen, dass Sie Erfahrung in der Reaktionsentwicklung haben. Lassen Sie uns nun zusammenfassen, was Sie in diesem Kurs gelernt haben. Ich werde alles in seinen eigenen Kontext aufteilen. Die Gerichte begannen mit allgemeineren Dingen, bei denen man sich verschiedene Arten von Website-Rendering anschaute . Können AP Augen gegeben die realen Welt Beispiele Ihre Ausrüstung, keine GS und moderne JavaScript-Crashkurse und dann vorbereitet sich auf die Arbeit mit reagieren auf unser erstes Projekt. Tick Tack, um Ihnen erste React Komponenten, Sonden, Stile, ST Dynamic, Sie I und Entwicklung von Flow kennen Sonden, Stile, ST Dynamic, ST Dynamic, zu lernen. Im Allgemeinen haben Sie ein einfaches React-Projekt erstellt, das starke Grundlagen demonstriert. Mit der Abendkasse haben Sie sich zu komplexeren React-App bewegt, indem Sie mit einem externen P I arbeiten und bekannte primitive Szenarien verwalten . Mit drei AC Köche, lernen Sie das Konzept der dynamischen Crowds und Remote-Daten holen Sie so, wie zu optimieren und analysieren reagieren Komponenten, sagt CIA in GS oder gestylt Komponenten sind von nun an keine Ausländer für Sie. Am Ende dieses Projekts, Sie haben typische Reakt-Anwendung, die umfassendere Wieder in der letzten Projekt Chat-App bestätigen erfordert . Man lernt Firebase in erster Linie kennen. Sie haben großartige Arbeit bei der Verwaltung des globalen Zustands mit Kontext geleistet. AP I Sie erleben verwirrende und nicht primitive Situationen, die ein fortgeschrittenes Verständnis von reagieren erfordern . Verwalten von Stilen selbst nicht immer wünschenswert. Deshalb verstehen Sie jetzt die Bedeutung von Y Komponenten, Bibliotheken, Bibliotheken Benutzer-, Status- und private Seiten sind normale Dinge für Sie jetzt. Und React Hooks ist Ihre Hauptwaffe. Mehrere s Absicherung von Kurs. Bezahlen Sie weniger mit minimalem Aufwand. Am Ende des Chats erstellen Sie eine produktionsfähige Webanwendung mit aktuellen Technologien. Es gab auch einen kleinen Raum aus Reaktionskonzepten, in dem wir sie getrennt betrachten und für unser endgültiges Projekt gelten . Nach all dem, sollten Sie sicher sein, mit reagieren und es ist Ökosystem. Es wird immer das Gefühl geben, dass Ihr Wissen nicht genug ist. Und das ist in Ordnung. Jeder Entwickler hat diesen Sinn. Der Perfektion sind keine Grenzen gesetzt. Das waren die Dinge, die Sie in diesem Kurs gelernt haben. Wir sehen uns das nächste Mal 162. Deine zukünftigen Bewegungen: - Hallo. Lassen Sie uns über Ihre nächsten Schritte nach dem Diskurs sprechen. Es gibt keine bestimmte Web-Entwickler-Roadmap, aber hier sind meine Vorschläge und Empfehlungen. Zuerst lernen Sie Typoskript. Es ist eine Sprache, die auf JavaScript aufgebaut ist. Es bringt Typsystem in das Projekt, und am Ende des Tages wird es die Codezuverlässigkeit erhöhen. Google vier React Typoskript Artikel und beginnen mit diesen in ein einfaches React-Projekt integriert , um zu verstehen, warum es erstaunlich ist. Dann werfen Sie einen Blick auf re Enten. Du kennst schon die Verwendung. Reducer Hook Read Acts ist eine globale Statusverwaltungsbibliothek, die den gleichen Ansatz wie der verwendete Reducer verwendet . Es hat eine Lernkurve, aber mit Reaktionshaken und Redox zu Kind, Redox ist umfassender geworden. Viele Tutorials und erzwungene Leichtigkeit Redox, aber die meiste Zeit brauchen Sie es nicht. Gleichzeitig wird es eine wirklich gute Praxis sein, Ihren Wert als Entwickler zu steigern. Google für jeden Artikel über moderne Reduktion mit drei Enten Toolkit. Wenn Sie als Reaktionsentwickler wachsen wollen, müssen Sie auf jeden Fall anfangen, auf die nächste GS und Gatsby zu schauen. Diese beiden sind Frameworks, die auf React aufbauen, und beide für das serverseitige Rendering gedacht sind. Erstaunliches Öko-System, gute Tutorials. Sie haben alles, um Ihnen so komfortable wie möglich Entwicklung zu geben und sich zu zwingen , ein A p I ohne GS zu bauen, kein Jess Wissen ist überall erforderlich, kein Jess Wissen ist überall erforderlich, egal ob es sich um ein JavaScript-Back-End oder nur um Hintergrund-Skript handelt. Finden Sie einen Artikel zur Einrichtung von Express GS und ohne GS. Tun Sie es selbst, dass dieses Wissen durch mehr Übung am Ende des Tages erhöht. Erfahren Sie mehr über das Testen, wenn Sie Änderungen vornehmen. Um zu entschlüsseln, ist es wichtig, nichts zu brechen. Deshalb gibt es Tests mit modernen Werkzeugen. Das Testen ist sehr vereinfacht und angenehm. Testen ist wichtig, aber noch wichtiger, ist es, Lee zu testen, was tatsächlich getestet werden muss. Google Für jeden Artikel im Zusammenhang mit Scherz oder Enzym-Reaktions-Tests. Lesen Sie mehr über Sicherheit Off-Web-Anwendung, vor allem über Jason Webb-Token, Cookies und lokalen Speicher. Der Schutz des Backends ist auch eine Sache, aber dafür beginnen, Togs zu senken, keine SQL-Datenbanken wie Mongo, DB oder Firebase sind einfach, aber sie mögen leistungsstarke Abfragen und Strukturen beim Erstellen. Und nein, sie hat zurück und hat sich mit Bedacht für die DB entschieden. Fragen Sie Ihre Datenbanken sind bevorzugter im großen Maßstab Pose Kleid. Fragen Sie, L und Mongo db sind heutzutage sehr beliebt. Mehr Aufmerksamkeit wird auch dem Transplantat ul gewidmet. Sobald Sie sich wohl fühlen ohne Schach und Ruhe AP Augen beginnen, über Transplantat nachzudenken. Sie werden Es ist flexibler, wenn es viele Anfragen mit dynamischer Datenform Warren Cloud Computing und Entwicklung von Wraps mit Cloud-Diensten gibt, wird es den zugrunde liegenden Entwicklungsstapel nicht ändern, zum Beispiel Reagieren Sie und beachten Sie GS, aber es gibt Ihnen Dienste, mit denen Sie die APP bereitstellen und verwalten können. Serverlose Bereitstellung oder Cloud-Speicher sind Beispiele für Cloud-Services. Werfen Sie einen Blick auf beliebte Cloud-Anbieter und wählen Sie einen. Machen Sie alles automatisiert mit kontinuierlicher Integration und setzt die Lieferung fort. Die Bereitstellung ermöglicht es, den Bereitstellungsprozess zu automatisieren. beispielsweise Wenn Siebeispielsweiseeine neue Änderung vornehmen und aufstehen, wird die APP automatisch weitergeleitet. Die Integration geht, bevor die Lieferung fortgesetzt wird. Es definiert im Grunde das Modell von neuem Code Push zum Hauptcode. Dieses Thema ist nicht so leicht zu verstehen. Also zögern Sie nicht, jeden Artikel zu lesen und haben eine Menge Fragen. Das sind meine Empfehlungen. Fühlen Sie sich frei, Ihre eigene Richtung zu wählen. Wir sehen uns das nächste Mal