React. js Academy für Anfänger mit Firebase

1. Willkommen zum Kurs: Willkommen in der React Academy für Einsteiger. In diesem Kurs lernen Sie alles, was Sie wissen müssen, um reagieren Benutzeroberflächen zu erstellen. All unsere Builds in einem echten Projekt, setzen Sie Ihre neuen Fähigkeiten in die Praxis. Während dieses Kurses werden Sie acht Kollegen inspirierte Anwendung erstellen, die Ihnen wirklich zeigt, was Sie mit reagieren tun können. Wir bauen Stürze zusammen, um Ihre Ideen zu gruppieren und sie mit Listen und Karten zu organisieren, machen gleichzeitig Nachrichten über Reaktionskomponenten. Diese sind auch editierbar, Sie können auf sie klicken, um die Namen zu ändern und auch die Autos haben ein Pop-up-Modell, wo wir den Inhalt ändern und auch alle Etiketten hinzufügen oder entfernen können. Diese App gibt uns die Möglichkeit, Reaktionskonzepte wie das Übergeben von Daten mit Requisiten,das Arbeiten mit Status, Formularen, Routing, Komponententypen und Lebenszyklen, benutzerdefinierte Methoden und vieles mehr zu verstehen Reaktionskonzepte wie das Übergeben von Daten mit Requisiten, Arbeiten mit Status, Formularen, Routing, Komponententypen und Lebenszyklen, . Dieser Kurs ist anfängerfreundlich Wenn Sie also neu reagieren, werden wir uns mit allen Grundlagen befassen, die Sie benötigen, um loszulegen, und dann die Dinge während des Kurses weiterentwickeln , um Ihnen ein tieferes Verständnis von React zu geben . Obwohl wir bereits eine Vertrautheit mit HTML, CSS und grundlegendem JavaScript haben sollten , um das Beste aus diesem Kurs herauszuholen, werden wir nicht nur das Front-End der Anwendung erstellen. Wir werden auch Firebase nutzen, um ein Back-End für unser Projekt zu erstellen. Dies gibt uns eine Echtzeit-Datenbank, um alle unsere Daten zu speichern. Es bleibt bestehen, nachdem ein Benutzer zurückkehrt und auch alle Änderungen, die wir vornehmen, wie Add-In, Entfernen oder Aktualisieren. Wir werden unsere Anwendung in Echtzeit aktualisieren, was bedeutet, dass Änderungen sofort wirksam werden, ohne die Seite neu laden zu müssen. Wir ermöglichen es Benutzern auch, sich anzumelden und sich in unserem Diagramm anzumelden. Auf diese Weise können Benutzer ihre eigenen persönlichen Pinnwände haben, die nur sie sehen oder bearbeiten können. Zusammen mit dem Lernen über Dinge wie bedingtes Rendern, Dokumente, Snapshots, Authentifizierung, Salzen und Filtern, hören auf Änderungen und auch die React-Kontakte-API. Wir runden den Kurs ab, indem wir lernen, wie Sie Ihre App für die Produktion erstellen und schließlich für den Rest der Welt bereitstellen um zu sehen, wenn Sie also daran interessiert waren, React zu lernen und auf dem Weg ein Ausländerprojekt zu bauen, melden Sie sich in den Kurs, und ich werde Sie in der Klasse sehen. 2. Was wir bauen werden.: Dieser Kurs ist komplett projektbasiert, was bedeutet, dass wir diese von Trello inspirierte Anwendung vom Beginn des Kurses bis zum Ende erstellen werden . Wir werden diesen Schritt für Schritt hinzufügen, da wir während des Kurses mehr über React und Firebase erfahren. Wir werden es in die Praxis umsetzen, alles, was wir über React lernen direkt in dieses Projekt, damit Sie es in der Praxis sehen können. Das Projekt, das während des gesamten Kurses aufbaut, wird von Trello inspiriert werden. Wenn Sie Trello noch nicht verwendet haben, ist es im Grunde eine Anwendung, die es uns ermöglicht, Dinge zu organisieren, indem Sie Boards erstellen, die ein Brett für ein bestimmtes Thema ist, wo wir Listen und Karten hinzufügen können, können wir Ideen auflisten, wir können Etiketten erstellen, und vieles mehr. In dieser Anwendung werden wir auf dem Startbildschirm beginnen, indem es Benutzern ermöglicht, sich mit einer E-Mail und einem Passwort anzumelden. Die Authentifizierung wird auf dem Back-End mit Firebase behandelt. Dies gibt uns eine sichere Anmelde- und Anmeldefunktion, wo sich Benutzer dann registrieren können. Sie können dann Boards erstellen. Zum Beispiel können wir unsere Ideen für den Sommer aufstellen. Wir können dieses Board erstellen, wir können ihm eine andere Hintergrundfarbe geben , lassen Sie uns für Grün gehen. Wir können diese Tafel erstellen. Diese wird nun in der Back-End-Datenbank gespeichert, die von Firebase bereitgestellt wird. Wir können dann in unsere Tafel gehen, wir können neue Listen erstellen, um unsere Inhalte zu teilen. Zum Beispiel können wir sagen, Orte zu besuchen und auch eine neue Liste zu erstellen, Dinge zu tun. Jede dieser Listen kann einzelne Karten haben, und wir können so viele dieser Karten hinzufügen, wie wir möchten. Nehmen wir an, wir haben Paris besucht. Wir können dann auf diese Bearbeitungen klicken. Wir können den Text bearbeiten, wir können Etiketten hinzufügen, wir können sie entfernen, indem wir noch einmal darauf klicken, wir können dann unsere Änderungen speichern und diese werden dann in jeder Karte angezeigt. Wir können Cast über Liste, wie Farbe Haus hinzufügen . Dies kann auch angeklickt und bearbeitet werden. Wir können verschiedene Labels hinzufügen, unsere Änderungen speichern, und all diese Änderungen werden sofort auf Firebase übertragen und dann in Echtzeit in unserer Anwendung aktualisiert. Dies bedeutet, dass wir unsere Anwendung nicht aktualisieren müssen , um dann die Daten aus unserem Back-End zurück zu bekommen. Dies ist alles sofort aktualisiert, wie Sie hier sehen. Wir können auch unsere Karten, unsere Listen und auch unsere Pinnwände löschen , und diese alle miteinander verlinken. Wenn wir beispielsweise ein neues Board, eine Liste oder eine neue Karte erstellen , werden diese alle von einem bestimmten Benutzer erstellt. Die Benutzer-ID wird in jedem gespeichert, d.h. wenn wir zum Beispiel in eines dieser Boards gehen und diese dann löschen, werden auch die entsprechenden Listen und Karten gelöscht, die mit jedem Board verknüpft sind. Wir können uns auch mit mehreren Benutzern anmelden, und jeder Benutzer hat nur Zugriff auf seine eigenen Boards, die Sie erstellt haben, und Sie können dies sehen, wenn wir uns abmelden und dann als ein anderer Benutzer anmelden. Klicken Sie auf den Login-Button. Dann werden wir zur Ansicht unseres Boards weitergeleitet, wo wir eine andere Reihe von Boards haben, die von diesem Benutzer erstellt wurden. Lassen Sie uns hier einige Beispielliste hinzufügen, und auch Boards. Diese sind völlig unabhängig von diesem Benutzer. Dies wird die Anwendung sein, die wir während dieses Kurses erstellen werden. Dieses Projekt ermöglicht es uns, alles zu demonstrieren, was Sie über React zum Erstellen von Anwendungen wissenmüssen , was Sie über React zum Erstellen von Anwendungen wissen Wir werden auch viel über Firebase lernen, einschließlich der Echtzeit-Datenbank, Authentifizierung, Updates in in Echtzeit, und schließlich, am Ende des Kurses, werden wir unsere Website live machen, wo wir diese in die Produktion für den Rest der Welt zu bewegen, um zu sehen. Ich hoffe, Sie sind genauso aufgeregt wie ich, um mit diesem Kurs zu beginnen. Im nächsten Video werden wir einige Dinge durchlaufen, die für diesen Kurs benötigt werden, bevor wir dann in den nächsten Abschnitt springen, in dem wir mit der Arbeit an diesem Projekt beginnen. 3. Was du für diesen Kurs brauchst: Um zu gehen, gibt es nur ein paar Dinge, die Sie brauchen und die Tatsache, dass Sie einen Tech-Kurs nehmen, bedeutet wahrscheinlich, dass Sie sowieso schon einige davon haben. Zunächst einmal werde ich Chrome als meinen Web-Browser verwenden , aber Sie sind frei, alle zu verwenden, die Sie bevorzugen. Ich würde jedoch entweder Chrome oder Firefox empfehlen, da die React Entwicklertools, die wir verwenden werden, derzeit nur für diese beiden Browser verfügbar sind. Um die Entwickler-Tools zu erhalten, machen Sie eine Suche nach reaktiven Tools und wie Sie hier sehen können, haben wir die Optionen für Hinzufügen in Chrome oder auch um Firefox hinzuzufügen, die Sie von diesem Link finden können hier. Ich empfehle Ihnen, gehen Sie voran und laden Sie diese entweder für Chrome oder Firefox, und es wird wirklich während dieses Kurses helfen. Als nächstes haben wir den Knoten JS-Download, der von nodejs.org zur Verfügung steht. Wir werden Knoten nicht als Back-End oder Webserver verwenden, aber es wird für einen Großteil des Tools benötigt, in dem wir bei der lokalen Entwicklung verwenden. Gehen Sie weiter und laden Sie die neueste Chrome-Konvertierung für Ihr Betriebssystem herunter und klicken Sie dann auf „Weiter“ durch die Installation. Wir brauchen auch ein Texteditor-Tool, und ich werde Visual Studio Code verwenden , den Sie von Code.VisualStudio.com herunterladen können. Sie können andere verwenden, wenn Sie es vorziehen. Aber das ist eine, die ich wirklich mag und ich werde während des Kurses verwenden. Es hat auch ein eingebautes Terminal, das gut funktioniert und wir werden dies nutzen, wenn wir unsere Projekte bauen. Auch hier ist jedes Terminal auch in Ordnung zu verwenden, wenn Sie etwas anderes verwenden möchten. Aber für diesen Kurs verwende ich den, der in den S-Code integriert ist. Wenn Sie dies verwenden möchten, empfehle ich Ihnen, herunterzuladen und dann den üblichen Installationsprozess für Ihren Computer zu durchlaufen den üblichen Installationsprozess für , und dann ist dies ziemlich alles, was wir brauchen, um los zu gehen. Alles andere, was wir brauchen, um wie alle Pakete von MPM zu verwenden, werden wir herunterladen, wenn wir durch den Kurs gehen. Lassen Sie uns nun alles über React im nächsten Abschnitt lernen. 4. React erstellen: In React früheren Tagen Erstellen eines neuen Projekts eine Menge Setup-Arbeit erforderlich. Wir mussten Tools wie Bubble und Webb Park installieren und konfigurieren und die Einrichtungszeit konnte viele Anfänger verzögern. Jetzt haben wir ein großartiges Tool namens Create React App, das eine wirklich schnelle und einfache Möglichkeit ist, mit reagieren zu beginnen, ohne sich in all der anfänglichen Einrichtung und Konfiguration eingeholt zu werden und es wird auch offiziell unterstützt. Wir verwenden Create React App vom Terminal, aber es sind nur ein paar Befehle, also keine Sorge, wenn Sie kein normaler Terminalbenutzer sind. In der Tat können wir sogar die in Visual Studio Code bereitgestellte verwenden. Lassen Sie uns Visual Studio Code öffnen. Wenn wir zum Terminal und zum neuen Terminal gehen, wenn Sie auch ein separates Terminal haben, das Sie auch verwenden möchten, ist das völlig in Ordnung und es ist kein Problem dabei. Standardmäßig wird es im Home-Verzeichnis geöffnet. Wir können den CD-Befehl verwenden, nur um sicherzustellen,, so geben Sie CD dann Enter, dann werden wir es zu Ihrem Roots-Benutzerverzeichnis zu nehmen. Wir können dann LS eingeben. Dies gibt uns dann eine Liste von Dateien und Ordnern für den Benutzer. Beachten Sie den Desktop hier und hier werde ich meine Projekte hinzufügen. Ich gehe auf CD in den Desktop und drücke Enter. Sie können dieses Projekt überall auf Ihrer Maschine erstellen, was Sie bevorzugen. Ich möchte dies auf dem Desktop für einfachen Zugriff behalten. Dann wollen wir den Befehl NPX ausführen, React App erstellen, durch Bindestriche getrennt. Dann reagiert der Name unseres Projekts, das ich nennen werde, Trello und drücken Sie dann Enter. Dies kann eine Weile dauern, bis sie ausgeführt wird, da sie alle diese Skripte, Abhängigkeiten und Module einziehen muss , damit sie ausgeführt werden können. Beachten Sie den NPX-Befehl am Anfang und nicht den NPM-Befehl. NPX ist ein Tool, das zur einfachen Installation und Verwaltung von CLI-Paketen entwickelt wurde. Es erlaubt uns im Grunde, Create React App zu verwenden, nur dieses einmal, ohne es auf unserem System installieren zu müssen. Geben Sie uns ein paar Minuten, um fertig zu werden, und dann pausieren Sie das Video und ich sehe Sie, wenn das fertig ist. Okay, sobald das alles installiert ist, müssen wir in unser Projektverzeichnis wechseln. Wir können dies tun, indem wir entweder in CD reagieren Trello eingeben, wie es im Terminal steht, oder wir können über das Projekt von unserem Desktop ziehen. Schnappen Sie sich den Projektordner, ziehen Sie ihn über und öffnen Sie ihn dann nach oben, um ihn in Visual Studio-Code zu ziehen. Sie werden sehen, dass das Terminal automatisch in unseren Projektstandort öffnet. Sie können jetzt den Entwicklungsserver starten. Wir tun dies mit einem Befehl namens NMP Sterne. Geben Sie dies ein und drücken Sie „Enter“. Dies wird dann den Entwicklungsserver auf localhost 3000 einrichten. Dies wird entweder automatisch im Browser geöffnet oder kann zu localhost 3000 navigieren, genau so, drücken Sie „Enter“ und haben jetzt eine grundlegende React-App im Browser. diesem Grund müssen wir unser Projekt in Zukunft betrachten. Es sei denn, Sie laufen auf einem anderen Port. Wenn Sie Änderungen vornehmen möchten, müssen Sie nur in den Texteditor gehen, dann in das Quellverzeichnis und die app.js. im Moment keine Sorgen um diesen ganzen Code, lass uns einfach hier in die p-Elemente gehen und sagen: „Ich lerne reagieren“, speichere das. Sie diese Datei speichern, wird der Browser automatisch WennSie diese Datei speichern, wird der Browser automatischneu geladen und mit unseren Änderungen aktualisiert, die wir soeben hinzugefügt haben. Wir brauchen uns keine Gedanken über die Aktualisierung des Browsers nach jeder Änderung zu machen. Das ist es jetzt für unser Projektsetup. Als nächstes gehen wir über, was alle diese Dateien und Ordner sind, die für uns mit Create React App erstellt wurden. 5. Projektdateien und files: Kurz bevor wir weiter gehen, möchte ich Ihnen einen schnellen Überblick darüber geben, was Online-Dateien und Ordner in unserem Projekt sind, da sie für uns mit Create React App generiert wurden. Ich will nicht einfach davon ausgehen, dass wir wissen, was hier vor sich geht, ohne weiter zu gehen. Zunächst einmal haben wir ganz oben den Knoten Modulordner. Hier werden alle unsere Projekte, Module oder Pakete gespeichert. Dieses Verzeichnis ist nichts Spezifisches, um zu reagieren. Dies ist typisch für alle Knotenprojekte. Das erfordert viel hier, wenn wir es öffnen, und an diesem Ort wird auch eines der Pakete, die wir installieren, gespeichert. Später im Kurs werden wir Pakete wie Firebase und React Router mit NPM herunterladen. Wir werden die hier drin gerettet sehen. Hier wird auch unser tatsächliches Reages-Paket gespeichert. Wenn wir nach unten scrollen, gibt es eine ganze Menge, die wir brauchen, um zu reagieren, Dom zu reagieren, und auch die React-Skripte, die wir in einem Moment betrachten werden, wenn wir zum Paket JSON kommen. Als nächstes haben wir den öffentlichen Ordner. Der öffentliche Ordner enthält unsere statischen Dateien, wie z. B. alle Bilder, die wir verwenden möchten, und auch alle HTML-Dateien. React hat diese Datei index.html. Wenn Sie es öffnen, scrollen Sie nach unten, das ist nicht viel Inhalt hier drin. Wenn wir zu unserem Projekt innerhalb des Browsers gehen, und dann gehen, um Seite Quelle anzuzeigen. Dies ist die Seite, die Sie hier sehen. Es zeigt hier keinen tatsächlichen HTML-Inhalt an. Auch wenn wir etwas im Browser sehen. Dies liegt an dem Skript-Tag unten ganz unten, das hier ist. Denken Sie daran, früher sagten wir, dass Create React App, nimmt die Konfigurationsfotos, so können wir uns auf die Erstellung unserer React App konzentrieren. Nun, das ist eines der Dinge, die es tut. Es wird Web Pack verwenden, um alle Dateien und Assets, die wir in unseren Projekten haben, zu bündeln . Erstellen Sie dann eine Paketdatei als Ausgabe. Diese Datei wird dann mithilfe des Skripts unten in die Projekte eingefügt. Es injiziert sie in jedes DOM-Element, das wir wählen. Derzeit wird es knapp über dem div mit der ID der root ausgegeben. Das hier ist eine. Wir können auf diesen Bundle-Link klicken , der der letzte Link gerade hier ist, und öffnen Sie diesen in eine neue Registerkarte. Dies ist der gesamte Inhalt unseres Bündels. Mach dir keine Sorgen um alles, was im Moment hier drin ist, es ist alles nur generierter Code für die Entwicklung. Wenn wir eine Suche machen, so suchen Sie nach Befehl oder Steuerung F, können wir nach dem Text suchen, den wir hinzugefügt haben, und wir suchen, „Ich lerne reagiert“. Wir sehen, dass dieser Text hier unten ist. Diese HTML-Datei kann auch verwendet werden, um Skripte oder Telefone hinzuzufügen. Dies kann aber auch oft als Knotenmodule hinzugefügt werden. Der nächste Ordner, den wir haben, ist die Quelle und hier werden wir die meiste Zeit in diesem Kurs verbringen. Dort fügen wir unseren Rohcode hinzu, alle unsere JavaScript-Dateien auf Komponenten. All diese werden in unser Bundle aufgenommen, das wir uns gerade angesehen haben. So schaffen sie es in unsere finale App. Es gibt keine strenge Struktur darüber, wie wir das tun können. Wir sind ziemlich frei, alle Dateien und Ordner zu organisieren, wie wir wollen. Obwohl es üblich ist, einen Komponentenordner in das Quellverzeichnis aufzunehmen , werden wir dies in Kürze tun. Wir werden viel Übung beim Schreiben von Komponenten zu bekommen. Eine Komponente ist im Grunde ein Codeblock , den wir sehr bald genauer betrachten werden. Als nächstes haben wir die app.css. Dies ist eine Haupt-CSS-Datei, die einige Standard-Styling enthält. In React ist es ziemlich üblich, eine Struktur wie diese zu sehen, wo wir eine CSS-Datei pro Komponenten haben, und im Fall ist hier die app.js. Diese app.js ist eine, wo wir unsere Änderungen im letzten Video vorgenommen haben. Wieder React ist ziemlich flexibel mit Dingen. Aber dies wird oft als Hauptkomponente der obersten Ebene oder als Wrapper für den Rest unseres Projekts verwendet , wir werden diese Datei verwenden, um unseren Header anzuzeigen , da dies auf allen Seiten sein wird und dann unten wo wir einen Router verwenden Wechseln Sie zwischen verschiedenen Komponenten, abhängig von der Seite, die wir gerade betrachten. Danach haben wir die app.test.js. Dies ist eine Datei, wenn Sie unser React-Projekt testen möchten, obwohl wir die Tests in diesem Kurs nicht abdecken werden. Als nächstes haben wir die index.css. Dies ist eine zweite CSS-Datei, die diese Stile enthält, die sie auf unsere index.js beziehen. Auch hier ist dies nur für Trennung und Organisation. Ich werde diese Datei löschen, um alle Stile in einer Datei gut zusammenzuhalten. Es ist eine Tube, ich werde das entfernen und dann die index.js öffnen, weil wir diese Datei gelöscht haben, müssen wir auch diesen Import aus der index.css entfernen und diese Datei speichern. Dies ist eine Haupt-JavaScript-Datei, die für das Rendern unserer App, den Browser, verantwortlich sein wird . Oben importieren wir sowohl React als auch ReactDom aus unserem Knotenmodulordner. In React frühen Tagen, früher in einem großen React-Paket. Aber da es jetzt verwendet werden kann, um mobile Apps mit React nativen oder sogar VR-Apps zu erstellen. Alle Kernfunktionen sind jetzt in diesem React-Modul gespeichert und alle Funktionen im Zusammenhang mit Web-Apps, ist jetzt in seinem separaten Import namens ReactDom. ReactDom hat eine zufällige Methode, die wir gerade hier sagen, die für das Rendern des Inhalts in das DOM verantwortlich ist. Diese zufällige Methode nimmt zwei Dinge. Zunächst haben wir die Inhalte, die Sie anzeigen möchten, aktuell unsere wichtigsten App-Komponenten. Dies sind die wichtigsten Routenkomponenten, wie wir bereits erwähnt. Es wird oft als Projekt-Wrapper verwendet. Wenn Sie dies in einer Datei verwenden, müssen wir es auch über den oberen Rand importieren, genau wie wir hier sehen. Dann zweitens, der Ort, an dem wir wollen, dass diese App zwei mounten. Ich sah dies auf einer neuen Zeile, die derzeit auf ein Element mit der ID der Wurzeln gesetzt ist. Was wir zuvor in der Hauptdatei index.html, der öffentlichen index.html, angeschaut haben. Dies ist das div mit der ID root, die wir zuvor im Browser gesehen haben. Das heißt also im Grunde: „Nehmen Sie meine React-App und platzieren Sie sie hier, wo wir auf der Indexseite angeben.“ Der Grund dafür ist, dass wir React nicht immer für unsere vollständige Anwendung verwenden. Möglicherweise haben wir bereits ein bestehendes Projekt, bei dem wir React nur in einem bestimmten Teil verwenden wollen. In diesem Fall kann unsere HTML-Seite viele vorhandene Inhalte haben und wir können einfach ein neues Element hinzufügen, auf das eingehängt werden soll. Sie können dies ändern, um alles zu sein, was Sie wollen. Wir können einige js X-Code hinzufügen. Lässt eine Überschrift der Ebene zwei hinzufügen, einen Titel React Treble. Dann schließen Sie das ab. Wir werden uns diesen js X-Code in Kürze genauer ansehen. Aber es ist im Grunde eine Syntax, die wir normalerweise in React verwenden, um sowohl HTML als auch JavaScript miteinander zu mischen. Wenn wir diese Datei speichern und dann zum Browser gehen, sehen wir jetzt, dass unsere Level 2 Überschrift an das DOM gemountet wurde. Wenn wir die View-Quelle neu laden, sehen wir immer noch, dass wir den Inhalt nicht haben. Alles, was wir wieder haben, ist dieses div mit dem ID-Root, in dem unsere React-App gemountet wurde. Lassen Sie uns das einfach wieder ändern, um unsere App-Komponenten. Als nächstes haben wir die logo.svg, die für die Daten der Create React App zur Verfügung gestellt wird, und dann auch eine Service-Worker-Datei. Dies ist eine optionale Datei zum Registrieren eines Service-Worker. Wir werden die Service-Mitarbeiter in diesem Kurs nicht abdecken, aber sie haben verwendet, um Ihre App offline zu arbeiten, oft, um Dinge wie Push-Benachrichtigungen zu aktivieren. Wenn GitHub verwendet wird, haben wir auch eine dot-gitignore-Datei bereits eingerichtet. Dies wird verwendet, um Dateien auszuschließen, die Sie nicht auf GitHub übertragen möchten, wie z. B. vertrauliche Informationen, die Passwörter enthalten, oder große oder unnötige Dateien wie die Knotenmodule. Darunter haben wir auch die package.json. Diese Datei ist erneut nicht spezifisch für React. Es ist etwas, das Sie auf einem regelmäßigen keine Projekte sehen werden. Es enthält Informationen über unsere App, wie den Namen der App, den Autor, zusammen mit allen Abhängigkeiten, die wir für die Projekte benötigen. Innerhalb der Abhängigkeiten haben wir das React-dom aufgelistet, wir haben reagiert und wir haben auch die React-Skripte. REACT-Skripte ist eine Bibliothek, die von Create React App verwendet wird, und enthält alle Skripte und Konfiguration, die wir ausführen müssen reagieren im Browser. Es konvertiert die Abhängigkeiten, die wir brauchen, Dinge in Zufall, Blase und Webpark hinter den Kulissen, und dann bündelt sie alle in einer Bibliothek. Dies macht auch die Wartung all dieser Pakete viel einfacher, da wir nur eine Bibliothek haben, um die wir uns kümmern müssen, wenn Sie ihn aktualisieren. Diese Abhängigkeiten in einem No-Projekt würden zu unserem Knoten Modulordner hinzugefügt werden, nachdem ein MPM Installationsbefehle ausgeführt wurde. All dies ist auch Schrank für uns, wenn wir das Projekt einrichten, unter unseren Abhängigkeiten, haben wir auch einige Skripte. Wir verwenden bereits das Start-Skript mit MPM start Kick-off unser Projekt am Anfang. Es gibt auch einen Befehl, um unsere Projekte für die Produktion zu bauen, eines zum Testen. Dann können wir auch aus React-Skripten auswerfen. Wir haben bisher ein bisschen darüber gesprochen, wie viel Konfiguration hinter den Kulissen beeinflusst werden soll. Allerdings können wir diese Auswurfskripte verwenden, um über all diese versteckten Magie zu gehen und dann Kopien unserer Konfiguration und Abhängigkeiten, wie Web Pack und Bubble, platzieren und sie dann direkt in unser Projekt zu platzieren, damit wir diese bearbeiten können uns selbst. Es gibt auch einige weitere Informationen darüber in der Readme-Datei, schließlich haben Sie eine yarn.lock-Datei, wir müssen uns nicht zu sehr darum kümmern, da a automatisch generiert wird, und enthält eine Liste unserer Abhängigkeiten und exakte Version Zahlen, die wir verwenden. Dies ist für unsere Datei- und Ordnerstruktur. Wir werden uns damit viel besser vertraut machen, wenn wir unsere React App erstellen. Als nächstes werfen wir einen genaueren Blick auf die Verwendung von Komponenten. 6. Einen genaueren Betrachtung von Komponenten: Im letzten Video haben wir das Wort Komponente einige Male erwähnt. Wenn Sie sich immer noch nicht sicher sind, was eine Komponente ist, werden wir jetzt einen besseren Blick darauf werfen, was sie sind. Eine Komponente ist ein typischer kleiner Teil Ihrer Website , den Sie gruppieren und in eine eigene Datei einfügen können. Es kann auch wiederverwendbar sein. Wenn wir einen Blog, zum Beispiel, Komponente könnte ein Blog-Beitrag sein. Dieser Blogbeitrag Komponenten würde dann für jeden Beitrag, den wir haben, wiederverwendet werden. Auch wenn sie wiederverwendbar sind, können wir dennoch Daten in sie einspeisen, um sie dynamisch zu machen. Wir könnten in Blog-Komponenten, einen Blog-Titel, einen Blog-Text und auch ein Bild einspeisen einen Blog-Titel, einen Blog-Text . Um ein Beispiel aus der realen Welt zu sehen, ist dies das Projekt, das Sie in diesem Kurs erstellen werden. etwas wie statisches HTML verwenden, werden wir mit einer Menge doppelten Code enden. Jede Liste, die die freien Abschnitte von Garten, Schlafzimmer und Küche ist, und auch jede einzelne der einzelnen Karten auf der Liste würde sein eigenes HTML-Markup benötigen. Dies würde eine Menge doppelter HTML-Code bedeuten. Der React-Weg besteht jedoch darin, Dinge in kleinere Teile zu zerlegen, die als Komponenten bezeichnet werden. Oben ist ein Header eine Komponente, und wir werden dies in einer Header dot js-Datei speichern. Diese Komponenten können auch auf jeder Seite gerendert werden, Koordinaten in jeder Seite vermieden werden, wie wir es mit normalem HTML tun würden. Unter dem Header für diese Seite haben wir auch Board-Komponenten in einer Datei namens gekauft Board dot js. Ein Benutzer kann mehrere Platinen haben, so dass diese Komponenten auch wiederverwendet werden können. Es wird in Daten übergeben, die als Requisiten bezeichnet werden, damit Dinge wie der Boardtitel für jede Ansicht geändert werden können. In diesem Fall ist der Titel Haus. Verschachtelt innerhalb dieser Platine, haben wir eine Liste Komponenten. Auch hier haben wir für jede Liste in unserer Datenbank eine Komponente gerendert. Dies ist eine weitere gute Verwendung für eine Komponente, da wir sie wieder verwenden können und dann Daten oder Requisiten an jedes übergeben können, wie den Titel und die Funktionalität, um eine neue Karte hinzuzufügen. Als nächstes, wie Sie erraten haben, ist jede Karte auch eine Komponente empfängt Requisiten wie den Text und auch die Etiketten. Jedes Mal, wenn eine neue Liste oder Karte hinzugefügt wird, wird die Komponente wieder verwendet. Alles, was wir hier sehen, ist ein Kind der wichtigsten App dot js-Komponenten, die wir uns früher angesehen haben. Auf diese Weise werden Komponenten in React verwendet. Es gibt keine harte und schnelle Regel, wenn einige Dinge zu Komponenten gemacht werden sollten. Es ist etwas, das Sie in der Regel selbst herausfinden müssen, wenn Sie ein Projekt erstellen. Als eine sehr allgemeine Anleitung sollten wir Komponenten verwenden, wenn etwas wiederverwendet wird oder um zusammengehörige Funktionen zu gruppieren. Es gibt auch Gelegenheiten, wenn eine Datei zu groß wird. Dies kann auch ein Fall sein, um Dinge in kleinere Komponenten zu zerlegen. Jetzt haben wir einen Überblick darüber, wie unsere Komponenten aussehen werden. Lassen Sie uns daran arbeiten, sie in unseren Projekten zu erstellen. 7. Komponenten in Aktion: Zurück zu unserem Projekt, werde ich einen Komponentenordner im Quellverzeichnis erstellen. Lassen Sie uns in der Seitenleiste einen neuen Ordner namens Komponenten erstellen. Dieser Ordner dient ausschließlich der Organisation und ist bei der Verwendung von React nicht erforderlich. Wir können dies auch in Unterordner zwei aufteilen, und wir werden dies später im Kurs tun. Beispielsweise könnten Sie einen Header-Ordner im Inneren haben , der alle Header-Komponenten enthält usw. Wenn wir wollten, nur um unsere Akten besser organisiert zu halten. Als nächstes sind unsere drei Komponenten, die wir von den Folien aufgeschaut haben, Board, Karte und Liste. Erstellen Sie im Komponentenverzeichnis eine neue Datei. Die erste wird Board.js sein, Großbuchstaben B. Wieder im Komponentenordner, die Card.js mit Großbuchstaben C. Die dritte ist für List.js mit einem Großbuchstaben L. Es ist eine gängige Namenskonvention, um eine React-Komponente zu beginnen mit einem Großbuchstaben. Lassen Sie uns zunächst zur Board.js gehen. Für jede Komponente, bei der wir reagieren, müssen wir zuerst das React-Paket aus dem Ordner Node Modules importieren. Wir können dies mit dem Import React von React tun. Reagieren Sie hier als Name des Knotenmoduls. Dann ist dieser ein Alias, den wir in dieser Datei verwenden werden. Obwohl wir React jede Datei benötigen, die wir verwenden, ist sie nur einmal im endgültigen Build enthalten. Wir brauchen uns keine Sorgen um mehrere Kopien in unserem Projekt zu machen. Wenn wir nur den Modulnamen hinzufügen, genau wie reagieren, anstatt einen Dateipfad zu verwenden, wird davon ausgegangen, dass dieser im Ordner Node Modules gespeichert ist. Als nächstes müssen wir eine Klasse erstellen, die so aussieht. Der Klassenname von Board erweitert React dot Components. Dann öffne die geschweiften Klammern. Dies ist eine typische React klassenbasierte Komponenten. Später werden wir uns auch eine andere Art von Komponente ansehen. Aber für jetzt werden wir eine klassenbasierte Komponente verwenden , da sie ein paar zusätzliche Funktionen hat, in die wir einsteigen werden. Dann unten nach diesen geschweiften Klammern, exportieren Standard, ein anderer Name unserer Klasse, die Board ist, Export in diese Komponenten dann erlaubt es, importiert und in anderen Dateien wiederverwendet werden. Oben erweitern oder erben wir alle Eigenschaften von React Punkt Components. React dot Components gibt uns Zugriff auf verschiedene optionale Methoden, wie zum Beispiel Lebenszyklusmethoden, die wir in Kürze eintreffen werden. Aber derjenige, der benötigt wird, ist die Rendermethode. Die Rendermethode, wie es klingt, ist eine, die wir brauchen, um einige JSX für den Browser zu rendern. Lassen Sie uns die zufällige Methode hier hinzufügen, die einige Daten zurückgeben wird. Die Daten, die wir zurückgeben werden, werden ein einfacher JSX-Code sein. Lassen Sie uns einige HTMLP-Elemente mit dem Text der Board-Komponenten hinzufügen. Wenn wir diese Datei speichern und dann zum Browser gehen, und wir sehen keine der Board-Komponenten auf dem Bildschirm. Um dies sehen zu können, müssen wir React sagen, wo wir das platzieren wollen. Lassen Sie uns für die app.js des Elternteils gehen, da wir diese Board-Komponenten ganz unten exportiert haben, können wir sie jetzt in die Datei importieren, wo wir sie verwenden möchten. Wir werden dies in der app.js tun, müssen unsere Board-Komponenten importieren. Da dies kein Knotenmodul ist, müssen wir auch den Dateipfad angeben. Dies befindet sich innerhalb des Komponentenordners und der Name war Board. Wir brauchen die dot js-Erweiterung nicht, da dies angenommen wird. Wir können diese Platinenkomponenten dann genau dort platzieren, wo sie angezeigt werden soll. Lassen Sie uns gehen und Platz des Textes, den wir früher hinzugefügt haben. Schrägstrich entfernen Sie diese und dann den Namen unserer Komponente, die Board war. Dies ist ein selbstschließendes Element. Das bedeutet, fügen Sie den Schrägstrich am Ende hinzu. So können wir eine Komponente mit React in unseren Code einfügen. Es sieht einfach wie ein selbstschließendes HTML-Tag aus, z. B. ein Bild. Als kurze Randnotiz haben Sie möglicherweise bemerkt, dass diese Datei app.js keine Rendermethode hat. Dies liegt daran, dass es eine funktionale basierte Komponente genannt wird, und wir werden später einen Blick auf diese werfen. Speichern wir diese Datei und gehen Sie zurück zum Browser. Wir können nun sehen, dass unsere Board-Komponente anstelle unseres Textes spielt. Sie können jetzt auch das Gleiche für die Listenkomponente tun. Zurück zur Seitenleiste, gehen Sie zur List.js. Genau wie zuvor müssen wir zuerst React von React importieren. Dies wird auch eine klassenbasierte Komponenten sein, die List genannt werden wird. Dadurch werden auch React-Punkt-Komponenten erweitert. Wir können dann alle Methoden verwenden, die von React zur Verfügung gestellt wird. Im Inneren hier werden wir auch die Rendermethode hinzufügen, um unsere JSX auf dem Bildschirm anzuzeigen. Wir werden dann einige JSX hier drinnen zurückgeben. Genau wie zuvor wird einige einfache Text tun, um nur Komponente aufzulisten. Dann direkt am Ende müssen wir auch Standard exportieren, den Namen unserer Komponente, die List sein wird. Diese wird innerhalb der Platinenkomponenten verschachtelt. Sie können es innerhalb der Board.js importieren, speichern Sie diese Datei und gehen Sie zum Board. Ganz oben werden wir auch einen Import für unsere Liste hinzufügen. Da sich dies nicht im Ordner „Node Modules“ befindet, müssen wir auch den Dateipfad hinzufügen. Diese Listenkomponente befindet sich neben dem Board, also fügen wir einfach einen Schrägstrich und dann den Namen der Liste hinzu. Der letzte Schritt, damit dies angezeigt wird, besteht darin, in unsere Rendermethode zu gehen, und dann können wir es als selbstschließendes Element hinzufügen. Liste, wie wir bereits wissen, sind Komponenten wiederverwendbar, was bedeutet, dass wir dies so oft hinzufügen können, wie Sie möchten. Lassen Sie uns das duplizieren und speichern Sie uns das und gehen Sie zum Browser. Ich sehe einen Fehler innerhalb des Browsers. Im Allgemeinen, was Fehlermeldungen betrifft, ist React ziemlich gut darin, uns wissen zu lassen, wo das Problem liegt, und gibt uns einen Hinweis, wie man Dinge repariert. Die Fehlermeldung besagt: „Angrenzende JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden. Wollten Sie ein JSX-Fragment?“ Wir werden uns dieses JSX-Fragment bald ansehen. Dieser Fehler wird jedoch im Grunde durch eine Komponente verursacht, die keinen Wrapper in der Board.js hat. In unserer Rendermethode geben wir drei verschiedene Elemente zurück. Alle diese drei Elemente sind effektiv nebeneinander. Wenn React jedoch verwendet wird, muss eine Komponente ein übergeordnetes Element als Wrapper haben. Es kann jedes Element sein, das wir wählen, aber ein div hier wäre in Ordnung. Lassen Sie uns ein div hinzufügen, öffnende Tag an der Spitze. Wir können das schließende Tag nach unten verschieben und dann innerhalb unserer drei Elemente verschachteln. Wenn wir das jetzt speichern und zum Browser zurückkehren, sehen wir einen Fehler. Dies sollte mit einem S am Ende verlängert werden. Also auf unsere Liste. Da gehen wir. Speichern Sie diese und dann in den Browser. Jetzt werden wir unsere Board-Komponenten sehen und dann innerhalb verschachtelt haben wir unsere zwei Listen-Komponenten, da wir dies zweimal in unsere Render-Methode hinzugefügt. Wir können nun zu den Kartenkomponenten übergehen, die auch einem ähnlichen Muster wie das Board und die Liste folgen. Wir importieren React zuerst oben aus dem Ordner „Node Modules“. Dann können wir eine klassenbasierte Komponente erstellen. Class Card erweitert React Punkt Component, wir geschweifte Klammern, und dann können wir unsere erforderliche Rendermethode hinzufügen, die einige JSX zurückgeben wird. Genau wie zuvor fügen wir auch die p-Elemente hinzu, indem wir einfach die Kartenkomponenten ausgeben. Dann vergessen Sie nicht, unten unten, wir müssen diese Datei exportieren, damit wir sie in anderen Komponenten verwenden können. Export-Standard, der Name unserer Klasse, die Karte ist. Diese Karten sind innerhalb der Listenkomponente verschachtelt also lassen Sie es über in die List.js importieren. Wir können das importieren. Jetzt oben in der Datei. Dies ist auch neben der Liste, so brauchen wir nur den Punkt Schrägstrich und dann den Namen der Datei, die Karte ist. Jetzt unten in der Rendermethode setzen wir das p-Element ein, das das gerade ausgeschnitten hat, und dann können wir ein umgebendes div hinzufügen, damit wir keine Fehlermeldungen in der Konsole erhalten. Wir können dies wieder einfügen und dann innerhalb so viele Kartenkomponenten hinzufügen, wie wir möchten. Ich werde das in drei Mal kopieren und einfügen, dann in den Browser. Jetzt sehen wir einmal unsere Board-Komponenten-Ausgabe. Wir haben dann unsere beiden Listen Komponenten, das ist diese und auch diese eine, weil wir die Liste zweimal hier ausgegeben haben. Jede Listenkomponente hat dann drei Karten im Inneren verschachtelt, weshalb wir so viele Komponenten auf dem Bildschirm sehen. Wenn wir zu den Entwicklertools gehen, würden wir mit der rechten Maustaste klicken und dann überprüfen. Innerhalb der Registerkarte Elemente, wenn wir uns die HTML-Struktur ansehen, haben wir ein umgebendes div mit einer Board-Komponente, die innen verschachtelt ist. Dann haben wir ein vollständiges div, das für unsere Liste ist, das die drei Kartenkomponenten enthält. Danach haben wir ein zweites div, das für unsere zweite Liste Komponenten ist. Auch hier hat dies unsere drei Kartenkomponenten im Inneren. Auch in der Konsole werden wir sehen, dass wir einige Fehlermeldungen haben. Wenn wir nach oben gehen, sehen wir ein p Elemente können nicht als Nachkomme von p erscheinen . Dies liegt an der Art und Weise, wie wir unsere Komponenten strukturiert. Wenn wir zum Haupt-Wrapper gehen, der app.js ist, haben wir die äußeren Board-Komponenten innerhalb dieser p-Elemente verschachtelt. Wir können das einfach nach draußen schieben. Speichern Sie diese Datei, so dass sie neben den Elementen erscheint und jetzt haben wir keine weiteren Bereiche innerhalb der Konsole. Jetzt werfen wir einen ersten Blick auf die Funktionsweise von Komponenten. Jetzt werden wir die Dinge im nächsten Abschnitt erweitern, wo wir beginnen, mit Daten zu arbeiten und sie auch an Komponenten zu übergeben. 8. Erster Zustand und JSX: React ist eine Front-End-View-Bibliothek, daher benötigen wir einige Daten, mit denen wir arbeiten können. Später konzentrieren wir uns darauf, Firebase als Backend zu verwenden, um nicht abgerufene Daten zu speichern. Beide im Moment werde ich einige Beispieldaten verwenden, um mit denen zu arbeiten. Ich habe einige Beispieldaten zur Verfügung gestellt, die Sie für diesen Kurs herunterladen und verwenden können, die ich hier im Dashboard gespeichert habe. Beginnen wir mit der Erstellung einer neuen Datei in unserem Projekt. Installieren Sie diese Beispieldaten, wir möchten dies in der Quelle hinzufügen. Erstellen Sie eine neue Datei. Ich möchte das nicht die sampledata.js nennen. Wenn wir diese Beispieldaten öffnen, können wir dann den Inhalt kopieren, indem wir alle auswählen. Kopieren Sie diese dann und fügen Sie sie in unsere Beispieldatendatei ein. Dies sind einfach einige Daten, so dass wir mit Komponenten arbeiten können. Wir haben ein Board Array, das einfach drei verschiedene Boards ist, die Sie durchleben können. Darunter haben wir auch einige Listen. Diese werden durch die Board-ID mit dem Board verknüpft. Sie haben auch eine ID und einen Titel, und dann wird es innerhalb verschachtelt einige individuelle Zählungen haben. Dies gibt uns nun einige grundlegende Daten, mit denen wir in unseren Komponenten arbeiten können. Bei der Verwendung von React werden die aktuellen Daten, die keine Komponenten haben als Zustand bezeichnet. Status ist ein Objekt auf einer Komponente, die Daten enthält, die sich ändern können. Zum Beispiel wird der Status in der Listenkomponente verwendet , um alle Koran-Autos in dieser Liste zu speichern. Staat ist Unabhängigkeit jeder Komponente zwei. Wir hatten eine kostenlose Liste, genau wie wir hier haben. Der Zustand wird für jeden anders sein. Da alle Fahrzeugdaten unterschiedlich sind, wäre der Zustand der Gartenliste eine Reihe von Karten genannt neue Tabelle unfixierte Lüfter. Die Listenkomponenten für Schlafzimmer 1 hätten ein Zustands-Array von neuen Möbeln, malen Wänden usw. Ein weiterer nützlicher Teil des Staates ist, dass es dynamisch ist. Wenn sich der Status ändert, z. B. wenn ein Benutzer eine Karte löscht, werden alle Komponenten aktualisiert, die Daten verwenden. Status kann auch alles sein, z. B. wenn die Verwendung derzeit angemeldet ist, wenn ein Popup-Modal derzeit geöffnet ist oder die Anzahl der Likes, die ein Beitrag hat. Um einen ersten Blick auf den Staat zu werfen. Lassen Sie uns zur app.js gehen und wir werden wieder kommen, um unsere Zustandsobjekte hinzuzufügen. Kurz nach der Zeile der Funktion nach oben. Wir können unser Zustandsobjekt erstellen. Dann innen hier können wir jeden Zustand hinzufügen, den wir wollen. Lassen Sie uns beginnen, indem Sie einen fett formatierten Titel hinzufügen und dies auf eine Reihe von Hausideen setzen. Dieser Zustand kann beliebige Namen und Werte der Daten enthalten, die wir wollen. Aber denken Sie daran, dies sind nur die Anfangszustände und es kann jederzeit geändert oder aktualisiert werden. Wenn wir diese Datei speichern und zurück zum Browser gehen, zurück in unser Projekt. Wir sehen in der Fehlermeldung des Zustands ist nicht definiert. Dies geschieht, weil Zustände nur für eine Klassenkomponente verwendet werden können. Denken Sie daran, bevor wir das Board mit Autokomponenten erstellt haben, haben wir dies als eine Klasse erstellt. Während, wenn wir auf die app.js gehen, die automatisch für uns generiert wird, haben wir eine Funktion Basiskomponenten. Diese Funktionskomponente eignet sich hervorragend für eine einfache Funktion, die nur alle Daten als Requisite aufnimmt. Wir schauen uns die Requisiten sehr bald an. Dann rendert es einige Inhalte für den Browser. Erlauben Sie es, Sie noch mehr mit der React-Version 16.8 zu verwechseln, sie haben etwas namens Hooke's eingeführt, was uns erlaubt, mehr mit Funktionskomponenten zu tun, was wir bisher nicht tun konnten. Aber das ist noch nicht etwas, worüber wir uns Sorgen machen müssen. Um einen Zustand hinzuzufügen, müssen wir dies in eine klassenbasierte Komponenten konvertieren. Dies ist nur ein paar einfache Schritte. Das erste, was ich tun werde, ist, diese Return-Anweisung zu bereinigen und den ganzen unnötigen Code zu entfernen. Nehmen wir den Header und auch den Klassennamen der App heraus. Geben Sie uns ein Speichern, jetzt haben wir nur ein leeres div innerhalb unserer Return-Anweisung. Jetzt müssen wir diese erste Zeile der Funktion App durch eine Klasse ersetzen , genau wie wir es in der Tafel getan haben. Also müssen wir die Reaktionskomponenten erweitern. Entfernen Sie diese. Dies ist eine klassenbasierte Komponenten, die App aufrufen. Dies wird in erstreckt sich, reagieren alle Komponenten und stellen sicher, dass wir immer noch die geschweiften Klammern haben, die all diesen Code umgeben. Dann, wie wir bereits erwähnt haben, muss eine Klassenkomponente eine zufällige Methode haben. Wir müssen die Return-Anweisung damit umgeben. Wenn wir nur Anweisung zurückgeben könnten, können wir dann die zufällige Methode innerhalb der geschweiften Klammern hinzufügen , die in der return-Anweisung platziert sind, speichern Sie als Datei, jetzt sollte keine Fehler im Browser sehen. Zurück zu unserem Zustand in der app.js. Wir können auf unseren Zustand zugreifen, indem wir die geschweiften Klammern innerhalb des div verwenden. Lassen Sie uns IP-Elemente hinzufügen, um unsere Zustände auszugeben. Die geschweiften Klammern. Wir können mit diesem Punktstatus auf den Zustand zugreifen. Dann der Name unseres Staates genannt alle Titel, gibt uns ein Speichern, und dann über den Browser. Nun, wie der Vorstandstitel der Hausideen. Zuallererst wird dies JSX-Code genannt, es uns ermöglicht , JavaScript in unsere HTML-Elemente zu mischen. Diese geschweiften Klammern, die die Zustände umgeben , werden verwendet, wenn wir in JavaScript springen wollen, und dann den Code innerhalb ausführen. Wir können jedes beliebige JavaScript in diese geschweiften Klammern hinzufügen. So können wir einige einfache JavaScript wie 5 plus 10. Dann sehen wir den Wert von 15. Alles, was wir tun können, ist etwas wie ein Konsolenprotokoll. Lassen Sie uns einfach eine Reihe von Hallo hinzufügen. Speichern Sie dies, und dann sehen wir den Wert von hallo in der Konsole. Lassen Sie uns nun unser Konsolenprotokoll und die 5 plus 10. Jetzt werden wir unseren Zustand mit dem Wert unserer Beispieldaten aktualisieren. Nun, wie würden wir über die Aktualisierung oder Einstellung des Staates gehen? Nun, wir können dies mit einer Methode namens set-Status tun. Lassen Sie uns zunächst unsere Beispieldaten importieren. Wir können dies in der Datei verwenden. Importieren Sie Daten aus einem Zeichenfolgenwert des Punktschrägstrichs und dann Beispieldaten. Dann können wir unseren anfänglichen Board-Zustand als leeres Array einrichten. Ändern wir den Board-Titel in BoardT. Speichern Sie dies ein leeres Array sein. Wir können dies mit einer benutzerdefinierten Methode außerhalb der Renderfunktion erhalten. Aber rendern, können wir eine benutzerdefinierte Methode namens Update-Status erstellen. Wir rufen das in nur einem Moment von einem Knopf aus an. Aber dies wird eine ES6-Pfeilfunktion sein, bei der wir den Zustand mit der Set-Statusmethode aktualisieren werden. Wir können dies mit diesem Punkt-Set-Status tun. Dies verweist auf unsere aktuelle Komponenteninstanz. Der Zustand, der auf dem Zustand dieser Komponente lebt, ist ein Objekt, wenn es die geschweiften Klammern übergibt. Der Zustand, den wir aktualisieren möchten, ist diese Tafeln hier. Bei Brettern, und ich werde dies gleich Daten setzen. Obwohl Boards, data.boards sind unsere Beispieldaten, die wichtig waren. Der nächste Schritt besteht darin, jetzt eine Schaltfläche in unserer zufälligen Methode zu erstellen, um dann die Zustände festzulegen. Also in Verwandten. Lassen Sie uns eine Schaltfläche erstellen. Im Inneren können wir einen Klick-Listener hinzufügen. Wir würden auf Klick und setzen dies gleich diesem Punkt-Aktualisierungsstatus , der der Name unserer Methode ist. On-Click ist eine Möglichkeit, das Ereignis sehr ähnlich zu einem regulären JavaScript-Ereignishandler zu behandeln . Einfach auf Klick, On-Change oder On-Mouseover. Bei normalem JavaScript handelt es sich um Kleinbuchstaben. Wenn ich jedoch JSX verwende, muss ich Kamelfall sein, genau so. Jedes Wort nach dem ersten beginnt mit einem Kapital. Wenn auf diese Schaltfläche geklickt wird, rufen wir dann unsere benutzerdefinierte Update-Zustandsmethode in den geschweiften Klammern auf, die wir fortfahren und den Code im Inneren ausführen. Danach können wir dann ein Konsolenprotokoll durchführen, um zu überprüfen der Wert des Status aktualisiert wurde. Dies ist JavaScript. Dies geht zwischen den geschweiften Klammern und in der Tat werden wir einen Konsolentisch machen. Es ist durch eine formatierte. Wir können dann diesen Punktzustand, Punktbretter, ausgeben. Jetzt schauen wir uns das im Browser an. Wir haben einen Fehler beim Aktualisieren von Status muss ein Doppelpunkt sein. Anstatt gleich zu erfüllen Doppelpunkt. Dann laden Sie neu, klicken Sie auf unsere Schaltfläche, und sehen Sie jetzt eine Tabelle mit allen drei Informationen aus unseren Beispieldaten. Wir haben die kostenlosen Kurstitel, haben den Hintergrund, die ID und die Indexnummer. So können wir unser Zustandsobjekt mit den eingestellten Zuständen aktualisieren. Wir sollten jedoch nicht versucht sein, es auf andere Weise zu setzen, wie diesen.. Zustand, .boards ist gleich einem Wert. Wir haben diese Set-Zustands-Methode aus verschiedenen Gründen verwendet. Wenn Sie this.state, .boards genau so einstellen, wird keine Komponente von Datumsangaben auslösen, wenn sich der Status ändert. Es kann auch weniger leistungsfähig sein. Da mehrere Set-Status-Aufrufe in einem einzigen Update zusammengefasst werden können. Schrägstrich, entfernen Sie das. Wir werden viel mehr Übung beim Aktualisieren des Status während dieses Kurses erhalten. Als nächstes werden wir uns ansehen, wie wir diese Daten durchlaufen können und wie der Anfangszustand festgelegt wird, wenn eine Komponente zum ersten Mal geladen wird. 9. Component und Looping: Einen Knopf zu haben, wie wir hier haben, um unseren Ausgangszustand zu laden , ist nicht etwas, was sehr praktisch für diesen Gebrauch ist. Wir brauchen eine Möglichkeit, den Zustand zu setzen, sobald die Komponente geladen wird, und wir können dies mit einer Lebenszyklusmethode namens ComponentDidMount tun. Als wir unsere Klassenkomponenten erstellt haben, sagten wir, die einzige erforderliche Methode, die wir brauchen, ist die zufällige Methode. Es gibt auch einige optionale Methoden, und eine, die wir jetzt betrachten werden, heißt ComponentDidMount. Wie der Name schon sagt, wird jeder Code ausgeführt, den wir hinzufügen, nachdem die Komponente an das DOM gemountet wurde. Ein gutes Beispiel dafür, dass wir dies verwenden können, wird es sein, die Beispieldaten in unseren Zustand zu laden. Wir werden dieses in der app.js direkt unter unseren Zustandsobjekten hinzufügen. Lassen Sie uns die ComponentDidMount hinzufügen. Dies ist eine Methode, also fügen Sie die Klammern und die geschweiften Klammern hinzu. Ich füge oft meinen Status oben hinzu, gefolgt von allen Lebenszyklusmethoden wie dieser, dann allen benutzerdefinierten Methoden und dann vom Rendern gefolgt. Dies ist völlig optional und es liegt an Ihnen, wie Sie diese auslegen möchten. Aber das ist nur etwas, das ich in Gewohnheiten gemacht habe. ComponentDidMount muss den Zustand aktualisieren, also lassen Sie uns diese Zeile von vorher kopieren, fügen Sie unsere Set-Statusmethode hier ein. Wir können auch diese Update-Zustandsmethode entfernen, speichern Sie diese Datei. Wenn wir jetzt zum Browser gehen und aktualisieren, sehen wir jetzt, dass unser Zustand mit der console.table ohne Klick auf eine Schaltfläche aktualisiert wurde. Es sind auch andere Lebenszyklusmethoden verfügbar, z. B. ComponentDiduPdates, die Code ausführen, nachdem eine Änderung die Komponente zum Aktualisieren veranlasst hat , z. B. Wir haben auch Komponenten werden belaufen, um alle Aktionen auszuführen , die wir tun müssen, nachdem eine Komponente aus dem DOM gemountet wurde. Diese lassen uns nun mit den drei Boards aus unseren Beispieldaten. Legen Sie die Zustände fest und normalerweise, was wir jetzt tun möchten, ist es, diese zu durchlaufen und dann die Daten im Browser anzuzeigen. Da unsere Daten in einem Array-Format vorliegen, können wir die JavaScript-Array-Methode namens Map verwenden. Dies ist nur normales JavaScript und nichts Spezifisches zu reagieren. Wenn wir auf die app.js gehen, können wir auf die zufällige Methode gehen und wir werden alle Inhalte durch unsere Karte ersetzen. Entfernen Sie die drei Elemente in unserem div Wrapper. Dann im Inneren von hier, da wir JavaScript verwenden, können wir die geschweiften Klammern verwenden. Wir können auf den Zustand zugreifen, genau wie zuvor, mit dem Beginn des Staates. Denken Sie daran, dies zeigt auf unsere Komponenteninstanz. So können wir auf den Zustand mit diesem Punktzustand und dann den Namen der Boards zugreifen, aber ich habe die Punkte-Mock-Methode nicht aufgerufen. Im Inneren können wir einen variablen Namen der Platine für jedes Element übergeben, das es im Array findet, dann erstellen Sie eine Pfeilfunktion. Dies wird für die Anzeige in jedem unserer Boards verantwortlich sein, also fügen wir ein div hinzu, das jedes der freien Boards in unseren Beispieldaten umgeben wird. Dann werden wir drei Elemente ausgeben. Eine für die ID, eine für den Titel und dann eine für den Hintergrund. Lassen Sie uns zunächst ein Spannelement erstellen, das die Board-ID anzeigen wird. Wir können auf jedes Board mit dieser Board-Variable zugreifen, dann übergeben Sie die ID. Nächster Halt, eine Ebene drei Überschrift, die geht, um den Boardtitel wieder in den geschweiften Klammern anzuzeigen . Dann drittens und schließlich können wir ein p-Element hinzufügen, das die Board-Hintergründe anzeigen wird. Jetzt können wir das sehen und dann im Browser zu unserem Projekt gehen. Wenn wir aktualisieren, sehen wir unsere kostenlosen Boards auf dem Bildschirm. Wir haben die Garten-Ideen, wir haben die Hausideen, und auch die Kursideen an der Spitze mit unserem Board-Titel, unserer ID und der Hintergrundfarbe. Jedoch innerhalb des Browsers sehen wir die Konsole hat eine Fehlermeldung von jedem Kind in einer Liste sollte eine eindeutige Schlüsselstütze haben. Beim Rendern einer Liste von Elementen genau wie diese, müssen wir auch einen eindeutigen Schlüssel für jedes Element hinzufügen. Auf diese Weise kann React erkennen, welche Elemente hinzugefügt, aktualisiert oder entfernt wurden. Jetzt können wir die Board-ID als Schlüssel verwenden, aber später verwenden wir die eindeutige Firebase-ID für unsere Artikel. Zurück zu der app.js können wir zum Wrapper gehen, der dieses div ist. Wir können dann einen Schlüssel hinzufügen, der gleich der Board.ID sein wird. Dann wieder zum Browser, ich werde jetzt sehen, dass unsere Fehlermeldung jetzt verschwunden ist. Diese Tasten müssen eindeutig sein. Wenn wir also mehr als eine Platine mit demselben Schlüssel hatten, wird dies zu einem Fehler in der Konsole führen. Im nächsten Video werden wir diese gerenderten Out-Elemente durch eine tatsächliche Komponente ersetzen und entdecken, wie wir Daten mit Requisiten übergeben können. 10. Daten als Requisiten übertragen: Im letzten Video haben wir jedes Board-Element angezeigt, indem durch springen und ich werde in die HTML-Elemente einfügen. Jetzt werden wir diese drei Elemente ersetzen, das war die Board-ID, das Board [unhörbar] und die Hintergrundfarbe mit einer Platine Komponenten. Wenn wir auf die app.js gehen, haben wir bereits die Board-Komponenten an der Spitze der Datei importiert. So können wir dies jetzt in Seite der Kartenmethode anstelle des gesamten vorhandenen Codes verwenden. Anstatt dieses Surround-DIV können wir dies ersetzen. Dann innerhalb der Kartenmethode werden wir einfach das Board ausgeben. Wenn ich das jetzt speichere und zum Browser gehe, ist hier ziemlich viel los. So können wir die Platinenkomponenten bereinigen, um die Dinge zu vereinfachen. Also gehen wir zur board.js, derzeit werde ich in den Titel setzen. Dann sind zwei Listenkomponenten an Ihrer Stelle nur mit dem Titel der Platinenkomponenten. Wenn wir das speichern, werden die Dinge viel klarer, da wir jetzt in unseren drei Boards ausgegeben werden. Eine für jeden Artikel in unseren Beispieldaten. In der app.js, nur weil wir diese Board-Komponenten verschachtelt haben, bedeutet dies nicht, dass alle Daten erbt, die es benötigt. Wir müssen alle Daten an die Platine mit Requisiten übergeben, Requisiten ist eine Möglichkeit, Daten an untergeordnete Komponenten zu übergeben, dh Requisiten werden immer den Komponentenbaum weitergegeben. Dies ist eine der goldenen Regeln der Reaktion. Wir haben Daten als Requisite weitergegeben, mit dem Zustand heben wir sie immer hoch, was bedeutet, wenn wir einen Zustand hatten, der von zwei Komponenten gemeinsam genutzt wird, heben wir den Zustand immer auf eine übergeordnete Komponente auf. So können beide Komponenten dann Zugriff darauf haben. Wir haben Requisiten wie ein HTML-Attribute weitergegeben und geben ihm dann einen Namen und einen Wert. So wollen wir zum Beispiel unsere Requisiten von diesen Board-Informationen an diese Board-Komponenten weitergeben . Wir können die Attribute hinzufügen und wir werden diesen Requisitennamen auf die Tafel setzen. Die Daten, die wir übergeben wollen, werden in den geschweiften Klammern sein und dass dies die Board-Daten aus unserer Karte sein werden. Lassen Sie uns Brett hier hinzufügen, geben Sie dies ein Sparen. Wir können dann auf die Boardstütze innerhalb der Boardkomponenten zugreifen. Also geh rüber zur board.js. Die Art und Weise, wie wir darauf zugreifen, ist sehr ähnlich zu dem, was wir mit Zuständen gemacht haben , anstatt [unhörbaren] Zustand innerhalb der geschweiften Klammern, wir greifen mit diesen Top-Requisiten auf die Requisiten zu. Der Name der Requisite, die Sie weitergeben, war das Brett. Also diese Top-Requisiten an Bord. Dann haben wir Zugriff auf den Boardtitel, genau wie wir es vorher im letzten Video getan haben. Mit dem Browser sehen wir nun unsere drei Bretttitel, natürlich Haus- und Garten-Ideen. Wir können Requisiten auch nach unten mehr als eine Komponente Ebene 2 übergeben. Wir werden das sehr bald abdecken. Jetzt möchte ich dies in die Praxis umsetzen, indem ich die Homepage anstelle, die eine Board-Vorschau Komponenten anzeigen wird. Werfen Sie einen Blick auf das endgültige Projekt. Das ist es, was wir schaffen werden. Es wird eine Board-Vorschau Komponenten für jede der Boards auf dem Bildschirm sein. Wenn wir dann darauf klicken, wird es zur Vollpension gebracht. Lassen Sie uns dies innerhalb eines neuen Komponentenordners erstellen, öffnen Sie die Seitenleiste. Wir können die Komponenten organisieren, indem wir hier einen Pages Ordner erstellen. Wie in diesem Pages Ordner hat keinen Unterschied zu unseren Komponenten. Die einzige Änderung, die wir vornehmen müssen, ist der Dateipfad beim Importieren. Innerhalb dieses Seitenordners werde ich unsere Datei, die Ansicht [unhörbar] Szene erstellen und diese home.js aufrufen. Startseite ist auch eine Komponente, aber da dies eine Seitenansicht sein wird, habe ich dies dem Ordner Seiten hinzugefügt, um die Dinge besser organisiert zu halten. Jetzt können wir weitermachen und unsere Komponenten erstellen, indem wir reagieren von „react“ importieren. Dies wird auch eine Klassenkomponenten sein, die React.Components erweitern wird. Die geschweiften Klammern, dies benötigt die Rendermethode, die Summe JSX zurückgeben wird. Alles, was ich jetzt hinzufügen werde, ist eine Level-1-Überschrift mit einem Titel von Zuhause. Das letzte, was unten am Ende der Datei zu tun ist, ist, dies auch mit den Exportvorgaben zu exportieren. Der Name unserer Klasse, die Heimat ist. Dieses Haus Komponenten. Wenn wir einen Blick auf die Zielansicht nehmen, wird Wrapper für alle diese Board Previews sein. Es wird dann die Requisiten für den Boardtitel und auch die Hintergrundfarbe übergeben. Also müssen wir zuerst die Board-Vorschaukomponenten erstellen, die für jedes dieser Elemente verwendet werden. Lassen Sie uns eine neue Datei in der Seitenleiste erstellen. Dies ist nicht auf den Seiten, dies ist nur direkt in die Komponenten. Jetzt wird dies die BoardPreview.js sein. Dies ist auch eine klassenbasierte Komponenten. Also lassen Sie uns Reacts von „reagieren“ importieren, schafft unsere Klasse. Dieser wird als BoardPreview bezeichnet. So erweitert React.Components, übergeben Sie die Render-Methode. Dann geben Sie unseren GIS X-Code zurück , der vorerst eine einfache P-Elemente der Board-Vorschau sein wird. Dann am unteren Rand, vergessen wir nicht, den Standard zu exportieren, unsere Klassenname der Board-Vorschau. Dann, wenn Sie fertig sind, geben Sie dieser Datei einen Safe. Also haben wir jetzt eine Situation, in der wir unsere Requisiten auf zwei Ebenen abgeben müssen. Unser Zustand wird in der app.js gespeichert. Wir werden dann Daten an die Home-Komponenten weiterleiten, die dieser Wrapper ist. Dann von der Home-Komponente bis zu jeder dieser Ballvorschau. Zum Glück ist das nicht allzu schwer zu tun. Der erste Schritt besteht darin, die Home-Komponenten tatsächlich anzuzeigen. Wenn Sie auf die app.js gehen, können wir zuerst die Home-Komponente importieren, die wir aus unserem Dateipfad erstellt haben , was ist. /Komponenten. Denken Sie daran, dass dies auch im Ordner Seiten und der Name der Startseite unten im Rückgabe-Abschnitt unserer Rendermethode ist. All dies können wir auch durch die Home-Komponenten ersetzen. Wie wir überprüfen, wird dies in unseren Projekten angezeigt. Also, jetzt sehen wir die Home-Komponenten. Der nächste Schritt ist der Pass diese Home-Komponenten, diese Zustand der Boards, so können wir dies über Requisiten tun. Das Board wird gleich this.state.boards sein. Also, das ist unsere Requisiten jetzt eine Ebene übergeben. Gehen wir über die home.js, wo wir jetzt auf diese Requisiten zugreifen können. Die nächste Stufe ist die Weitergabe von seinen Home-Komponenten zur Board-Vorschau. Das erste, was wir tun müssen, ist, tatsächlich die Board-Vorschau zu importieren. Dies befindet sich nur innerhalb des Komponentenordners. Wir können dies mit Punkt Punkt Punkt Schrägstrich und dann Ball Vorschau zugreifen. In der zufälligen Anstrengung könnten wir einfach die Board-Vorschau ausgeben. Aber denken Sie daran, dass wir mehrere Bretter haben. In unserem Fall haben wir drei Sterne in Staaten. Daher müssen wir diese Daten abbilden und dann eine Ballvorschaukomponente für jede ausgeben. Genau wie zuvor verwenden wir diese Top-Requisiten, die Bretter. Da es drei von ihnen gibt, werden wir die JavaScript-Map-Methode aufrufen. Für jeden bekommen wir einen Schlüssel, den wir in nur einem Moment verwenden. Aber zuerst lassen Sie uns die Board-Vorschau ausgeben. Jeder Artikel ist innerhalb dieser Tastenvariablen gespeichert, die wir nun als Schlüssel verwenden können und jedes einzelne Brett als Requisite betrügen können. Wie wir von vorher wissen, müssen wir diesen Schlüssel auch als Attribut übergeben und dies gleich unserer Variablen des Schlüssels setzen. Dann müssen wir die individuelle Bindung an diese Board-Vorschau weitergeben , die an diesem in einer separaten Zeile ist, damit es besser lesbar ist. Wir können das einzelne Brett weitergeben und wir können Zugang ist mit diesem Punkt Requisiten, Dot Boards. Dies ist Zugriff auf alle Bretter, die wir über Requisiten erhalten haben. Wir können dann einen Schlüssel übergeben, um das einzelne Board aus dem Board-Array zu bekommen. Denken Sie daran, dass dieser Schlüssel jedes einzelne Element ist. Das erste Mal, wenn wir durch die Boards gelebt haben, wird es dann eine Board-Komponenten oder eine Board-Vorschau ausgeben und dann das einzelne Board übergeben. Es wird dann durch die zweite leben, gibt auch eine zweite Board-Vorschau aus und dann auch das zweite Board als Requisite übergeben. Es wird dies für jeden Artikel in unserem Array eingeben. Nun, wenn wir das sagen, können wir jetzt zur Board-Vorschau gehen und diese Board-Requisite nutzen. Die [unhörbar] innen, lassen Sie uns Anweisungen zurückgeben. Wir können die hartcodierte Board-Vorschau entfernen. Wir können dann auf diese Punkt-Requisiten zugreifen, die Board-Requisite und dann können wir auf den Bretttitel zugreifen. Lassen Sie uns dies speichern und aktualisieren, bevor wir weiter gehen und wir werden in der Konsole sehen, dass wir einen Fehler haben. Wir haben kein unerwartetes Token im Home-Dot js. Zurück rüber zum Haus. Dies liegt daran, dass wir in unserem Retourenbereich zwei benachbarte Komponenten einfügen. Leicht entfernen Sie dies und umgeben von einem div. Aber denken Sie daran, dass Reaktionen nur einen übergeordneten Gegenstand als Rapper haben. Am Ende des Ergebnisabschnitts können wir dies schließen, neu laden. Dies gibt uns jetzt eine Fehlermeldung „Kann nicht lesen Eigenschaft Titel von undefined.“ Warum können wir den Titel innerhalb unserer Komponenten nicht lesen? Die Board-Vorschau. Dies ist diese Codezeile gerade hier. Nun, der Grund, warum dies geschieht, ist, weil obwohl alle Boards in diesen Beispieldaten als Array gespeichert sind, jede einzelne Platine als Objekt gespeichert wird, so dass wir ein Array von Objekten im Zustand haben. Wenn wir zu den Home-Komponenten im Inneren gehen wir hier verwenden.map Methode. Map ist eine Array-Methode. Was wir versuchen, es hier auf einem Brett zu verwenden, Objekte. Um diese zu beheben, können wir das umwickeln. props.boards, die ein Objekt in der object.keys-Methode ist. Lassen Sie uns diese.props, .boards schneiden und dann können wir objects.keys verwenden. Dann innerhalb der Klammern können wir das wieder einfügen. Object.keys ist eine Objektmethode, die alle Eigenschaftsnamen des Objekts herauszieht und dann ein Array zurückgibt. Hier sind wir im Grunde konvertieren diese Objektdaten in Array. Daher können wir die.map-Methode und alles, was Sie jetzt wie vorgesehen arbeiten sollten, verwenden. Diese object.keys ist eine reguläre JavaScript-Methode. Wieder nichts Spezifisches zu reagieren. Jetzt, wenn wir diese Datei speichern und zurück zum Browser gehen, geht dieser Fehler jetzt weg, gut und Dinge und funktionieren korrekt. Wir haben den Board Zustand nach unten zwei Ebenen übergeben und dann werde ich den Titel in die Board-Vorschau setzen. Wir fragen jetzt eine Phase, in der wir verschachtelte Komponenten haben. Gelegentlich ist alles, was wir sehen können, Klartext im Browser. Ohne einen Router an Ort und Stelle, ein Wechsel zwischen unseren Seiten oder Komponenten. Es kann schwierig werden, genau zu visualisieren, was mit unseren Komponenten vor sich geht. Um dabei zu helfen, können wir die React Developer Tools verwenden, die für Chrome und Firefox verfügbar sind. Wenn Sie sie früh im Kurs installiert haben, wenn die Dinge einrichten, großartig. Wenn nicht, gehen Sie weiter und suchen den reaktiven Tools und fügen Sie die Erweiterung für Chrome oder Firefox hinzu. Sobald dies erledigt ist, können Sie mit der rechten Maustaste klicken und dann überprüfen und jetzt sollten wir die React Developer Tools zur Auswahl sehen, also klicken Sie auf diese. Die React Entwickler-Tools sind etwas, das wir sehr viel für diesen Kurs verwenden werden. Wir kriegen noch viel mehr Übung. Wir können derzeit im Komponentenbaum sehen, wir haben den Haupt-App-Wrapper. Wir können das öffnen und dann im Inneren haben wir ein umgebendes div, das unsere Home-Komponenten enthält. Das ist genau das, was wir in der app.js sehen. Wir haben unsere Komponenten, wir haben unser div und dann haben wir unsere Home-Komponente im Inneren verschachtelt, die die Bretter als Requisiten weitergibt. Wir können auch die Requisiten in den Entwickler-Tools sehen. Wenn wir auf die Home-Komponenten klicken, sehen wir, dass wir die Boards als Requisiten weitergeben, was ein Array mit drei Elementen ist. Wir können dies überprüfen und alle Informationen für jeden Artikel sehen. Wir sehen, dass eine Menge, diese Boards sind ein Array. Diese einzelnen Elemente sind ein Objekt, weshalb wir jedes Element mit object.keys konvertieren mussten. Wenn wir den Home-Wrapper öffnen, sehen wir dann in jeder der Board-Vorschau. Sie haben auch den Schlüssel, um zu reagieren, um jedes Listenelement korrekt zu aktualisieren. Wir können diese auswählen und wir sehen auch die Requisiten, die weitergegeben werden. Dies ist ein Objekt mit der einzelnen Tafel, wo wir auf den Hintergrund, die ID und den Titel zugreifen können . Es sagt Titel, den wir verwendet haben, um den Browser auszugeben, sowie Requisiten. Wenn Sie zu den Haupt-App-Komponenten gehen, sehen wir auch den Zustand, der Komponente hält, und dies sind die Informationen , die Sie aus den Beispieldaten ziehen und dann über Requisiten weitergeben. Diese Entwickler-Tools sind wirklich nützlich und wir werden diese nutzen, während wir den Kurs durchlaufen. Als Nächstes werden wir bei den subjektiven Requisiten bleiben und einen Blick darauf werfen, wie wir Methoden zwischen Komponenten weitergeben können. 11. Vorstellung: Es sind nicht nur Daten, die wir an Komponenten weitergeben können. Wir können auch eine Methode zwei übergeben. Die Methode, die wir in Kürze hinzufügen werden, besteht darin, eine neue Platine zu erstellen, die den Status des Boards in der app.js erhalten wird. Jetzt, da wir den Zustand aktualisieren, der in app.js gespeichert ist, fügen wir auch hinzu. erstellen wir auch hier eine neue Board-Methode. Lassen Sie uns gehen und erstellen ist jetzt in der app.js, ich werde zu dieser Datei gehen. Dann wird es direkt unter unserer Komponente montieren. Wir können eine benutzerdefinierte Methode namens „CreateNewboard“ erstellen, dies wird eine ES6-Pfeilfunktion sein, die in einem Brett aufnehmen wird, das bald an sie übergeben wird. Also hier werden wir den Zustand ein wenig anders aktualisieren. Werfen wir einen Blick darauf, wie wir diesen Punkt-Set-Status verwenden werden. Hier drinnen werden wir immer noch ein Objekt übergeben und unsere Boards aktualisieren. Aber dieses Mal werden wir ein Array erstellen. Wenn wir also den Zustand aktualisieren, wollen wir bei der Verwendung von React den Zustand normalerweise nicht direkt mutieren. Es ist am besten, zuerst eine Kopie des vorhandenen Status zu nehmen. Wir können dies mit dem Spread-Operator tun , der ein drei Punkte ist. Wir können eine Kopie der bestehenden Zustände nehmen, indem wir „this.state.boards“ verwenden. Danach durch ein Komma getrennt, können wir unsere neuen Daten zusammenführen, die diese Board-Variable sein wird, die Sie durch unsere Methode übergeben. Also, wenn wir dies nennen, wird die Daten über das neue Board übergeben, wird dann den Zustand aktualisieren, wird dann eine Kopie der bestehenden Zustände greifen und dann in es ist unser neues Board zusammenführen. Wenn wir uns die fertige Version gerade hier ansehen, sind dies die Home-Komponenten. Drinnen hier ist, wo wir „Erstellen Sie ein neues Board“. Aus diesem Grund wird diese Methode ausgelöst. Diese Methode muss von den Home-Komponenten ausgelöst werden, was bedeutet, wenn sie einen Verweis auf diese Methode übergeben und wie werden Daten an untergeordnete Komponenten weitergegeben? Wir tun dies über Requisiten. Also gehen wir in app.js dahin, wo wir unsere Home-Komponenten rendern. Wir können dann einen Verweis auf unsere Methode übergeben. Also, „Neues Brett erstellen“. In der Tat können wir dies auf Schalter online hinzufügen. Dann können wir das gleich setzen. Dann unser Methodenname namens „createnewboard“. Oben in den Home-Komponenten, die die home.js ist, können wir eine Schaltfläche erstellen, um unsere neue Platine zu erstellen. Also innerhalb unseres „div“, Lassen Sie uns das jetzt erstellen. Innerhalb eines hier können wir einen Klick-Handler erstellen. Also „onClick“, werden wir dann eine neue Methode namens „this.Newboard“ und seine Handlungen von Newboard im Inneren hier erstellen. Also hat diese neue Board-Methode, die wir hier aufrufen, die wir hier aufrufen,nichts mit der zu tun, die wir von Staaten weitergegeben haben. Wir rufen das in einem Moment an. Lassen Sie uns gehen und erstellen Sie dies jetzt außerhalb der zufälligen Methode, können wir jetzt erstellen diese.Also lassen Sie uns unsere „NewBoard“. Setup, eine ES6-Pfeilfunktion. Also hier drinnen wollen wir zwei Dinge tun. Zunächst einmal möchten wir alle Platinendaten aus unserem Formular abrufen und dann werden wir die Create new board Methode aufrufen, die von app.js weitergegeben werden. Im Moment haben wir dieses Formular nicht, um seine Daten zu erfassen. Also werde ich nur einige Daten für jetzt codieren müssen. Lassen Sie uns unsere Board-Objekte erstellen. so wird „const board“ gleich einem neuen Objekt sein. Dies braucht einen Titel namens dies alles, was Sie wollen. Ich möchte sagen: „Reisen in diesem Jahr“, getrennt durch ein Komma. Wir brauchen auch einen Hintergrund für dieses Board. Ich werde seinen „Hintergrund“ als Zeichenfolgenwert festlegen,“ 80ffaa“. Als nächstes werde ich die Eigenschaft „CreateDat“ hinzufügen. Dies wird ein „neues Datum“ sein. Also ein neues Skript datiert. Wir werden im Datum für das neue Board und auch die neue Liste und neue Karten gespeichert werden. Dies ermöglicht es uns später, alle diese Informationen zurück in der Reihenfolge, ab dem sie erstellt wurden, zurückzugeben. Das ist also unser neues Board jetzt hartcodiert. Wir können dann die Create new board Methode aufrufen, die über Requisiten weitergegeben und diese neue Anleihe als Argument abgeschickt wird. Also kurz nach unseren Objekten „this.props.CreateNewboard“. Befestigung dieses Brett, das illustriert. Also jetzt diesen Teil werden wir mit der CreateNewBoard-Methode übergeben. Es wird es in der app.js aufrufen. Diese Methode erhält dann das Board und verschmelzen es dann in Zustände. Also lasst uns das speichern und dann zu unserem Projekt gehen. Wir können das ausprobieren. Gehen wir zu unserer App. Wir haben den neuen Kugelknopf. Lassen Sie uns darauf klicken. Dann erhalten wir ein Zwischenfall-Update der Reisen, die in diesem Jahr stattfinden werden. Das Beste bedeutet, dass wir jetzt diesen neuen Modus in einem Zustand haben. Dies ist, was wir bereits erwähnt haben, als wir sagten, dass React jedes Mal, wenn der Zustand aktualisiert wird , dann alle Komponenten aktualisieren wird, die diese bestimmte Information benötigen. Wir können auch in der app.js sehen, wenn wir in den Zustand gehen, haben wir jetzt unser zusätzliches Board hier hinzugefügt. Dies ist eine, die hartcodiert erzeugt und dann als Argumente mit dieser Methode übergeben. Wenn wir jedoch aktualisieren, wird dieser Artikel verschwinden, da wir noch keine permanente Datenbank haben. Aber das ist etwas, das später im Kurs hinzugefügt wird. Nun gehen wir zur Liste über. Wenn wir uns diese letzte Board-Ansicht ansehen und dann auf eine der Ballvorschauen in ihm klicken, nahm es zu den Board-Komponenten. Diese Board-Komponente benötigt Zugriff auf alle aktuell geladenen Listen. In unserem Fall haben wir diese einfach kostenlos. Ich müsste auch unten eine neue Listeneingabe hinzufügen. Derzeit in unserer Ausgabe nicht sehen diese Kugelansicht. Wenn wir über alles heimlich geladen gehen, ist die Home-Komponenten und dann weiter in unserem Board Previews. Wir können beginnen, mit diesem Board Komponenten zu arbeiten. Wir können auf die app.js gehen und die temporär hinzufügen. Dies wird sein, bis wir das Routing in einem späteren Abschnitt einführen. Also zuerst, in der app.js macht Sie immer noch die Board-Info von vorher. Dann scrollen Sie nach unten zu unserer zufälligen Methode. Wir können auch die Platinenkomponenten innerhalb unserer Wrapper hinzufügen. Also werde ich das jetzt schließen und zu dieser board.js gehen. Wir können die Listen im Zustand hinzufügen. So kann jede einzelne Komponente auch ihre eigenen lokalen Zustände haben. Lassen Sie uns unsere Zustandsobjekte erstellen. Ich möchte die aktuelle Liste laden und dies auf einen Anfangswert eines leeren Arrays setzen. Ich habe diesen Zustand aufgerufen, die aktuellen Listen, weil wir später auch die Listen filtern, um nur die für ein bestimmtes Board anzuzeigen. Wir können dann unsere Listen aus den Beispieldaten entnehmen. Zunächst einmal, indem Sie oben in der Datei importieren. Ich werde unsere Daten aus dem Dateipfad importieren, der Punktpunkt-Slash-Beispieldaten ist. Aber dann noch einmal können wir ComponentDidMount verwenden, um diese in den Zustand zu laden. Dies ist eine Methode, die wir diesen Punkt SetState nennen sollten. Wir setzen unsere Objekte, die die aktuellen Listen greifen und setzen dies gleich unseren Beispieldaten, die Datenpunktlisten sind. Daten sind eine Variable, die wir aus unseren Beispieldaten haben, und dann ist die Liste die Listendaten, die Sie gerade hier haben. Jetzt haben wir diese aktuellen Listen. Was wollen wir mit ihnen machen? Nun, wir wollen eine Listenkomponente für jede rendern, genau wie die freie, die Sie hier sehen. Wir tun dies genau wie früher, wenn wir durch die Daten leben, und jetzt eine Listenkomponente für jede. Lassen Sie uns in der board.js beginnen. Gehen wir zu unserer zufälligen Methode und wir können anfangen, hier drinnen zu arbeiten. Zunächst einmal fügen wir im umgebenden div einen Klassennamen hinzu, der gleich list-wrapper sein wird. Dies ist für CSS. Beachten Sie hier, wie wir den Klassennamen anstatt nur die Klasse verwenden, wie es in normalem HTML tun würde. Nun, wenn Sie reagieren, ist das Klassenwort ein reserviertes Schlüsselwort. Daher müssen wir beim Hinzufügen von CSS-Klassen diese Klassennamen-Attribute an seiner Stelle verwenden. Hier drinnen könnten wir unseren Titel von vier verschieben. Dann innerhalb der geschweiften Klammern, werden wir durch die aktuellen Listen kartieren. So wie zuvor werden wir this.state.current Listen verwenden. Genau wie zuvor ist this.state.current Listen ein Objekt und nicht ein Array. Um dies zu lösen, werde ich das ausschneiden und wieder objects.keys verwenden, und dann in die Klammern können wir das wieder einfügen. Genau wie früher wird dies dies in ein Array konvertieren, so dass wir die Punkt-Map-Methode verwenden können. Wir werden auch in der Taste übergeben, setzte die Pfeilfunktion. Für jede Liste in Zuständen werden wir dann die Listenkomponenten nach unten laufen. Diese Liste muss auch einen Schlüssel aufnehmen. Dieser Schlüssel wird gleich this.state.current Listen sein. Wir werden nicht in der einzelnen Liste mit diesem Schlüssel übergeben, und dann greifen Sie die ID. Stellen Sie sicher, dass die Listenkomponenten immer noch oben in der Datei importiert wurden. Geben Sie dieser Datei ein Speichern. Dann können wir zum Browser gehen und das überprüfen. Jetzt sehen wir unsere Komponenten auf dem Bildschirm gerendert. Hier ist ziemlich viel los. Lassen Sie uns die Listenkomponenten bereinigen. Lassen Sie uns in die list.js gehen. Anstatt unsere Gratis-Karten auszugeben, werden wir das entfernen. Es sollte jetzt viel klarer aussehen, wenn wir das aktualisieren. Das sind unsere kostenlosen Listen-Komponenten. Es ist wahrscheinlich ein wenig schwierig zu sehen, was hier passiert, also lassen Sie uns die React entwickelten Werkzeuge öffnen. Werfen Sie einen genaueren Blick. Ausgehend von der obersten Ebene haben wir die app.js mit unseren Boards, die in Zustand sind. Im Inneren von hier haben wir ein umgebendes div, das dann die Home-Komponenten ausgibt und die Ursache, Haus- und Garten-Ideen anzeigt. Danach haben wir vorübergehend die Platinenkomponente hinzugefügt. Wir konnten das sehen und die Board-Komponenten rendern freie Listenelemente aus. Jedes Listenelement ist, dass Sie einfach den Text der Listenkomponente, die gerade hier ist. Wir werden auch bald einen Listentitel und auch die Zählungen ausgeben. diese Listen nun auf der Tafel angezeigt werden, können wir eine ähnliche Sache zu früh in diesem Video tun und auch eine neue Liste hinzufügen. Drüben in der board.js. Wir können dies tun, indem wir eine neue Methode erstellen. Unmittelbar unter der Komponente in der Halterung. Lassen Sie uns eine neue Methode erstellen neue Liste genannt erstellen. Sie dienen als Pfeilfunktion. Hier drinnen werden wir unsere neue Liste aufbauen. Dies wird nur Daten für den Moment gesampelt werden. Wir müssen zuerst eine ID zu dieser Liste hinzufügen. Später werden wir Firebase verwenden, um diese ID zu erfassen. Aber jetzt können wir math.dot random verwenden, um eine neue ID mit JavaScript zu generieren. Der Titel, nennen wir das meine erstaunliche Liste. Dies muss auch mit einer Platine verknüpft werden. Wir können eine ID wählen. Gehen wir für 300. Wir können auch die Eigenschaft CreateDat hinzufügen und setzen Sie dies ein neues Datum mit JavaScripts sein. Jetzt haben wir unsere neue Liste erstellt. Das nächste, was zu tun ist, ist jetzt, dies in unseren gegenwärtigen Zustand zu schieben. Jetzt können wir dies mit this.state tun. Fügen Sie unsere Objekte hinzu. Der Zustand, den wir erhalten wollen, sind die aktuellen Listen. Genau wie zuvor ist die aktuelle Liste ein Array, so dass wir dies übergeben können. Wir werden zunächst in den aktuellen Listen mit den drei Punkten zusammenführen . This.State.Current Listen durch ein Komma getrennt. Wir gehen dann zu unserem aktuellen Zustand zu verschmelzen. Die Liste, die gerade oben erstellt wurde. Dies ist alles, was wir jetzt für diese Methode tun müssen, der nächste Schritt ist es, eine Schaltfläche zu erstellen, um diese Methode auszulösen folgt. Wir tun dies in der zufälligen Methode nach unten. Gehen wir einfach unter den Listen-Wrapper. Lassen Sie uns eine Schaltfläche erstellen. Wir können eine On-Click-Ereignishandler hinzufügen, die unsere Methode auslösen wird, die this.create neue Listen genannt wird. Dann ein Name der neuen Liste für unsere Schaltfläche. Sobald dies getan ist, geben Sie diese Datei speichern und wir können zum Browser gehen. Lassen Sie uns versuchen, auf unseren neuen Listen-Button zu klicken. Dann erhalten wir eine neue Listenkomponente als grün gerendert. Wenn wir in unsere App gehen und dann in unser Board. Hier drinnen können wir den aktuellen Zustand für alle Bretter überprüfen. Wir haben jetzt unsere vier Listenelemente. Wenn wir zu unserer letzten gehen, die Sie gerade hinzugefügt haben, sehen wir den Titel meiner erstaunlichen Liste. Zuerst wieder, genau wie zuvor, wenn wir den Browser neu laden, wird dies verschwinden. Da Sie derzeit keinen permanenten Speicher haben. Um die Dinge abzurunden, anstatt den Text von Listenkomponenten auszugeben, können wir stattdessen auf die Eingabeaufforderungen zugreifen. Zunächst einmal in der board.js. Wir können diese Requisiten an jede Liste weitergeben. Wir haben bereits den Schlüssel. Das ist in Ordnung. Dann können wir danach auch unsere Liste übergeben. Wir können die Daten mit this.state erfassen. Unsere aktuellen Listen, Übergabe in den Schlüssel, speichern Sie diese Datei, und dann können wir unsere Listenkomponenten ändern, so dass ich den Titel der list.js setzen. Zunächst fügen wir dem Wrapper einen Klassennamen hinzu. Der Klassenname wird gleich der Liste oder unserem CSS sein. Dieser Titel wird auch in einem umgebenden div sein, das einen Klassennamen des Listenheaders haben wird. Dann schließen Sie das ab. Wir können nun unsere p-Elemente innerhalb dieses Kopfzeilenabschnitts verschieben und den Text der kleinsten Komponenten durch unsere Requisiten ersetzen. Innerhalb der geschweiften Klammern, diese top props.list, und dann können wir die Liste Titel zugreifen. Wenn alles gut funktioniert, sollten wir jetzt zum Browser gehen und nun den Titel unserer kostenlosen Listen sehen. Wir können auch auf neue Liste klicken, und wir werden den Titel für diesen zu sehen. Gut. Wenn jetzt alles für dich funktioniert, gehen wir jetzt zum nächsten Video über. Wir werden Requisitentyp-Validierung nachschlagen. 12. Prop von type: Wenn Daten zwischen Komponenten übergeben werden, ist es eine gute Idee, eine gewisse Validierung bereitzustellen. Jacquet-Komponente erhält genau die Daten, die sie benötigt. beispielsweise Wenn eine Komponentebeispielsweiseein Objekt erwartet, aber ein Array erhält, könnte es unsere aufbrechen. Und das ist genau das, was wir vorher gesehen haben, als wir ein Objekt mit Objekt-Darkies konvertieren mussten. Dies wird die Verwendung von richtigen Typen, die eine Bibliothek von Facebook zur Verfügung gestellt, um diese Prüfungen durchzuführen. Es ist einfach, offene Laufwörter mit Fehlern während der Entwicklung improvisiert zu bekommen. Die Besitzer. Wenn unser Prototyp ausfällt, lassen Sie uns das im Terminal installieren. Wir können schließen oder Terminal mit Befehl oder Kontrolle, sehen kein Geld, um dies von MPM mit dem MP M I zu installieren, und dann den Paketnamen, die Prop-Typen ist. Es ist Antwort und geben Sie uns ein paar Momente, um innerhalb Ihres Projekts zu installieren und dann wieder zu kommen sobald dies erledigt ist. Okay, willkommen zurück. Sobald dies installiert ist, müssen wir es in jede Datei importieren, die die Requisiten empfängt. Beginnen wir an der Spitze des Baumes, der die bis zu Js ist. Dies ist die oberste Ebene, so dass es keine Eingabeaufforderungen von Komponenten erhalten. Stattdessen übergibt er Requisiten nach Hause und später auch an die Bretter. Im Verlauf erhält die Home-Komponenten die Boards auf der Art der Boards ist in Ray und auch neue Board erstellen ist eine Funktion. Also lasst uns in dieser Home-Komponente von vorn beginnen. Wie könnte ein Arbeitsproblem beginnen? Validierung. Zunächst am Anfang der Datei die können wir am Anfang der Datei diePaketprototypen importieren. Komfortabel P Tante könnte dies aus dem richtigen Zeitmodul vermitteln. Okay, als nächstes werde ich diese Requisitentypen direkt aus dem Boden einrichten. Die Akte. Ich möchte das direkt über unseren Exportvorgaben tun. Wir können dies mit dem Namen aller Komponenten tun, die Heimat ist. Nie verschwunden. Legen Sie die richtigen Typen fest. So wenig Fall P. In diesem Fall, auf Einwanderer, das ist gleich einem Objekt, das den Prototyp für jeden Eigenen enthalten wird , der weitergegeben wird. Die 1. 1 ist für die Boards. Dann können wir auf die richtigen Typen setzen, die Kapital P anti ist, die wir an der Spitze importiert haben. Und dann nach diesem Konzert, welche Art von Daten wir erwarten zu erhalten, wenn wir Zeit dachte. Wir können einige dieser Vorschläge im Inneren sehen, wenn wir wollen. In diesem Fall ist ein Array. Sie können dies auch als Pflichtfeld festlegen, das durch ein Komma getrennt ist. Wir können das gleiche auch für unsere zweite Requisite tun, die neue Tafel zu schaffen. Große neue Kugel Dieses Mal ist eine Funktion und wir können erklären, dass wir eine Art von Funktion mit Etagenbett wollen . Dies ist auch erforderlich. So ändert sich auch bis zum Ende. Das nächste, was zu tun ist, ist, unseren Server mit MPM-Stars neu zu starten. Sobald dies getan ist Ausschau Hoden, Gänge über im Browser, wir sehen keine Probleme im Moment. Aber wenn wir einen der richtigen Typen ändern, sagen wir von Array, um eine Art von Objekt zu sein. Sagen wir das. Ich meine, ich werde einen fehlgeschlagenen Requisitentyp sehen, der so genannt wird, und ändert sich wieder ein Array zu sein , dann speichern Sie dieses Finale. Gehen wir in die Seitenleiste. Der nächste nach unten ist der Board-Punkt Js Board dot Js erhält derzeit nicht eine Requisiten hat nach unten in die Ball-Vorschau verschoben. Wir werden später im Kurs wieder auf dieses Board zurückkommen, genau wie zuvor. Das erste, was zu tun ist, ist, die richtigen Typen zu importieren und dann, nach dieser Woche wieder, gehen Sie direkt nach unten, direkt über unserem Exportstandard, dem Komponentennamen, Offboard-Vorschau und setzen Sie dann die richtige Zeit mit einem Kleinbuchstaben, sei es, dass es bis zu Objekt gleich ist. Die einzige richtige, dass die Ballvorschau ist kann, ist von zu Hause. Und wenn wir nach oben gehen, wenn wir intern Board Preview schickte die Board-Requisite. Dies ist ein Objekttyp. Lassen Sie uns die Requisitentypen Capital P und A Capital T einrichten. Dies ist eine Art von Objekten darauf. Dies ist auch erforderlich, um die nächsten Komponenten nach unten in der Seitenleiste wird die Karte sein. Lassen Sie uns darauf klicken. Darauf werden wir bald zurückkommen, da wir diese Kartenkomponenten noch nicht in unserem Projekt verwenden. Also haben wir endlich die Liste der Komponenten des Arztes. Dies nimmt eine Liste auf und benötigt daher auch einen richtigen Typ. Lassen Sie uns unsere Importe über die Spitze in vollen Prototypen von Requisitentypen nach unten scrollen. Wir können diese unten mit weniger Türstützen Typen einrichten, also werde ich den einzelnen Requisitentyp widersprechen. Welcher Empfang ist die Liste, auf der der Prototyp ein Objekt ist. Dies ist auch erforderlich, um Wir werden, natürlich, auf der heutigen. Da wir mehr Requisiten weitergegeben haben, schaffen Sie auch mehr Komponenten, sie können nicht Ärzte. Komponente, für die wir erwähnt haben, wird derzeit nicht verwendet, aber wir werden diese jetzt nutzen, indem wir sie für jede Karte in unsere Beispieldaten aufnehmen. Wie wir hier sehen, ist die Kartenkomponente innerhalb jeder Liste verschachtelt, was bedeutet, wenn es auf dieser oben in der Liste steht. Doktor, als Komponenten, gehen wir auf die Liste. Dr. A s Arm. Wir können das jetzt tun. Also hier drinnen geht es den Seitenkugel runter. Wir werden ein Auto Komponenten für jede Karte in einer Liste mieten. Merken Sie sich die Beispieldaten als Karten-Array auf einer Karte, eine Rate pro Liste. Also lassen Sie uns durch die Liste gehen und wir können das jetzt durch meine Pin durch alle Requisiten unter dem Titel tun. Klicken Sie unter der Liste auf. Härter. Lassen Sie uns öffnen die geschweiften Klammern dieses Mal ist ein Objekt. Also müssen wir auch Objekt-Jockeys ausführen, um unsere Requisiten in ein Array zu verwandeln. Die Requisiten verwandeln sich einmal. Ist das nicht Requisiten? Die Liste Notizkarten. Was? Ich werde die Ergebnisse durchwischen. Jedes Element wird diesen Schlüsselvariablennamen geben. Und dann innerhalb dieser Raketen können wir nicht eine Karte pro gefundenem Gegenstand in die Schleife legen. Und stellen Sie sicher, dass dies zu schließen und Raketen, und dann innen hier, können wir alle über Kartenkomponenten setzen, machen Sie dies immer noch über die Spitze der Datei importiert wird, was ist, dass wir keinen Schlüssel, aber Sie werden gleich alle Schlüssel sein. Wertvoll. Wir können die Daten als Requisiten übergeben. Das wird das sein. Keine Requisiten. Listet dot com nicht auf und dann würden innerhalb der eckigen Klammern den Schlüssel übergeben. Schließen Sie dies mit einem Schrägstrich auf die Faktoren auf diesem auf seine Online. Da gehen wir. Okay, jetzt rendern wir eine Karte aus, wenn wir die Requisiten übergeben. Gehen wir rüber zur Karte, Doktor. Ja, Wir können alle diese Daten verarbeiten, die an sie übergeben wurden. Im Moment haben wir nur ein div, das den Text vermietet. Also zuerst konnten wir zuerst an die Spitze gehen, um unsere Prototypen und aus dem richtigen Zeitpaket zu importieren . Dann an diesen rechts ganz unten über unserem Exportstandard. Der Komponentenname der Karten. Keine Prob-Zeiten richten ein Objekt ein. Der richtige Name ist Daten auf dem Requisitentyp ist ein Objekt, das ebenfalls erforderlich ist. Also, bevor wir noch weiter gehen, lassen Sie uns sagen, diese Karte Komponenten und dann gehen über den Browser und wir haben eine nie in der Liste Zeile 15. Gehen wir jetzt dorthin, Zeile 15. Wir haben die Daten. Diese Top-Prop-Startliste. Andi sollte Karten innerhalb s am Ende sein. Versuchen wir es jetzt. Gut. Also nun sehen wir einen Listentitel und auch die Karten, die jedem zugeordnet sind. Es ist ein wenig schwierig zu sehen, was los ist. Nein, weil das Styling fehlt, wissen Sie, Komponenten. Also haben wir Bohne, fügen hinzu, es ist, ähm, Klassen, während wir weitergehen. Wie die Liste hatte eine auf auch diese Liste, und sie haben auch einige CSS zur Verfügung gestellt, um mit seinem Kurs zu gehen, um ein bisschen besser aussehen. Sie können diese CSS-Datei beim Download mit dem Kurs finden. Also gehen Sie vor und greifen Sie die CSS als Downlord. Und dann, wenn Sie es nicht wissen, können wir dies innerhalb der App Punkt CSS einfügen. Also werde ich alle vorhandenen Stile entfernen und dann alle Stile einfügen, die bereitgestellt wurden . Also, jetzt, wenn wir geben diese endgültige speichern und gehen Sie zum Browser So jetzt können wir klarer unsere kostenlose Liste in den Beispieldaten zu sehen , haben wir unsere Listentitel und dann haben wir zwei Karten innerhalb jeder Liste. So gibt es noch ein bisschen Arbeit zu tun, kann aber jetzt die Liste in Autos klarer sehen. Also das ist es jetzt für unsere Requisitentypen. Ich beantworte das alles, während wir für den Rest des Kurses gehen. 13. Kontrollierte Komponenten: Wenn wir über zwei URL-Nummern wie 1,2,3 und dann Schrägstrich Bretter. Diese Ansicht wird von den Basiskomponenten gerendert. Diese enthält eine neue Board-Schaltfläche. Wenn wir klicken, wird dies dann einige hartcodierte Daten zu unseren Board-Zuständen hinzufügen. Diese neue Board-Schaltfläche ist weit oben in der home.js. Dies ist eine Schaltfläche und es wird eine Methode namens Newboard auslösen. Alle diese Platinendaten sind derzeit hartcodiert, aber wir möchten, dass der Benutzer den Boardnamen hinzufügt und auch die Farbe auswählt. Genau wie bei jeder der Websites können wir dies mit einem Formular tun. Lass uns das in der Seitenleiste haben. Wir gehen in die Komponenten und erstellen dann eine neue Datei für diese namens CreateBoardForm. Mit der dot js Erweiterung am Ende und stellen Sie sicher, dass Sie einfach richtig buchstabieren. Da gehen wir. Das erste, was wir tun wollen, ist React von „reagieren“ zu importieren, so wie wir es immer tun. Dann wird es eine klassenbasierte Komponenten sein. Möchten Sie dies wie die Datei aufrufen, bei der es sich um CreateBoardForm handelt. Dies wird React-Komponenten erweitert. Im Inneren fügen wir unsere erforderliche zufällige Methode hinzu, die dann einfach einige js x als unsere AP-Elemente zurückgibt. Mit den Texten von hi. Wir werden in einem Augenblick darauf zurückkommen und unsere Reform realisieren. Lassen Sie uns zuerst Standard exportieren. CreateBoardForm. Speichern Sie diese Datei und dann können wir diese Datei darin in unsere Home-Komponenten importieren. Scrollen Sie nach oben unter unseren Requisitentypen. Wir können CreateBoardForm importieren. Der Dateipfad, den wir brauchen, wird Punktpunktschrägstrich sein. Dann heißt es CreateBoardForm. zu unserer zufälligen Anstrengung scrollen, brauchen wir diesen Knopf nicht mehr, der hier haben wird, da wir dies durch ein Formular ersetzen werden. An der Stelle hier können wir unsere CreateBoardForm Komponenten hinzufügen. Schließt ab, während wir hier sind, bis wir einen Board-Preview-Wrapper hinzufügen können , der ein umgebender Tauchgang sein wird. Dies wird nur den Stil hinzufügen, in dem wir CSS benötigen. Wir können unseren Klassennamen hinzufügen. Dieser wird gleich Board-Preview-Wrapper sein. Dann schnappen Sie sich den schließenden Tauchgang und fügen Sie diesen kurz nach der schließenden geschweiften Klammer hinzu. Dieser Board-Preview-Wrapper gibt uns das CSS-Rasterlayout für alle unsere Board-Previews. Speichern Sie diese Datei und gehen Sie dann zum Browser und jetzt sehen wir den Text von hi, was bedeutet, dass unsere Komponente jetzt gerendert wird. Auch unsere kostenlosen Board-Previews und werden im Rasterformat und nicht in einer Liste angezeigt. Zurück zu den CreateBoardForm-Komponenten. Wir können unser Formular Markup erstellen. Lass uns rüber gehen. Anstelle dieses hohen Textes können wir diesen entfernen. Wir können hier ein Formular hinzufügen. Dieses Formular wird auch einen ClassName haben, der zu oder erstellen-Board-Wrapper wird. Zuallererst brauchen wir eine Eingabe mit der Art des Textes. Was für unseren Vorstandsnamen sein wird. Schließen Sie dies ab und in einer separaten Zeile werde ich den Typ hinzufügen , der dem Text gleich sein wird. Es braucht auch den Namen , der gleich dem Namen sein wird. Dann schließlich ein Platzhalterwert , der Board Name sein wird. Die zweite Eingabe, die gebildet wird, wird benötigt wird, wird eine Auswahlbox sein. So kann der Benutzer die Hintergrundfarbe für dieses Board auswählen. Erstellt ein Auswahlfeld. Öffnen und schließen wir das. Diese nicht gemocht braucht auch einen Namen Attribute, die gleich dem Hintergrund sein wird. Im Inneren werden dann unsere Optionen aufgelistet, die für den Benutzer zur Verfügung stehen. Ich werde sechs verschiedene Farben hinzufügen. Sie können einen beliebigen Farbwert hinzufügen, den Sie mögen, oder Sie können bei denen bleiben, die ich wählen möchte. Der erste wird ein blauer Wert sein. Wir können das gleiche mit den Wert-Attributen hinzufügen. Der x-Wert von 80ccff. Möchten Sie diese in fünf weiteren Malen kopieren und einfügen. Wir geben uns sechs Optionswerte. Ist eine gemeinsame wird für eine grüne Farbe sein. Der x-Wert wird 80ffaa sein. Der dritte wird rot sein, was ein Wert von f94a1e ist. Der vierte ist für eine rosa Farbe. Der x-Wert ist diesmal ffb3ff. Dann haben wir eine purpurpurne, die bf00ff ist. Endlich haben wir die orange Farbe. Das ist ffad, doppelt drei, und da sind unsere sechs Farben. Der letzte Punkt, den wir hinzufügen müssen, ist für einen Submit-Button mit den Texten der Erstellung neuer Tafel. Es braucht auch einen Typ, der eingereicht werden wird. Das ist alles, was wir für unsere Form tun müssen. Speichern Sie diese Datei und gehen Sie dann zum Browser und öffnen Sie den oberen Bereich. Wir sehen jetzt unsere Eingaben von Board Name. Wir haben unser Dropdown mit diesen milchfarbigen Farben und unserem Submit-Button. Dies ist unser Formular jetzt im Browser angezeigt. Aber jetzt brauchen wir eine Möglichkeit, die Dateneingabe durch den Benutzer zu erhalten. Es gibt ein paar Möglichkeiten, dies zu tun, wenn Sie React verwenden. Erstens ist, was wir jetzt als kontrollierte Komponenten betrachten werden. Dies bedeutet im Allgemeinen, dass React die Kontrolle über die Daten übernimmt, die wir eingeben und dann in Zuständen speichert. HTML-Formulareingaben wie diese Eingabe und wählen wir haben in der Regel ihren eigenen Zustand beibehalten, was bedeutet, dass die nicht bewusst, was der Benutzer eingegeben. Möglicherweise haben Sie vorher die event.target.value verwendet, um darauf zuzugreifen. Wir können dann auf diesen Wert zugreifen und ihn in den Zustand versetzen. Sobald es dann in Zustand ist, können wir es verwenden, um unser neues Board zu erstellen. Wir können damit beginnen, unseren Standardzustand zu erstellen. Gehen wir zu CreateBoardForm. Unmittelbar unter unserem Klassentitel. Lassen Sie uns unsere Zustandsobjekte hinzufügen. Zunächst können wir den Titel hinzufügen und einen Anfangswert einer leeren Zeichenfolge erfüllen. Wir können auch einen standardmäßigen Hintergrund-basierten String-Wert von 80ccff festlegen, was nur unser erster blauer Wert ist. Dies wird unsere Standard-Hintergrundfarbe sein, wenn keine über ausgewählt ist. Blättern Sie nach unten in ein Formular. Innerhalb dieser Eingaben können wir einen Inline-Ereignishandler erstellen, den Zustand festlegen, wenn ein Benutzer in die Eingaben eingibt. Wir können dies direkt unter dem Platzhalter tun. Wir können die On Change Ereignishandler hinzufügen und eine Inline-Funktion erfüllen, die in den Ereignisdaten als e nimmt. Dies wird eine Funktion ausführen, die Zustände ausführen wird. Wir können dies als Objekt übergeben und der Zustand, den wir ändern möchten , ist der Titel, den Sie auf e.targets setzen möchten. Der Wert e.target. -Wert sind die Ereignisdaten, die vom Benutzer eingegeben werden. Dann können wir das auch für den Hintergrund tun. Scrollen Sie nach unten zu unserer Auswahl direkt nach dem Hintergrund innerhalb des öffnenden select-Tags. Wir können auch einen On Change Ereignishandler hinzufügen. Hierbei erstellen Sie in der Linienübergabe die Ereignisdaten unsere Pfeilfunktion, die auch den Zustand mit diesem Punkt-Set-Status setzen wird , persönliche Objekte. Aber dieses Mal wollen wir den Hintergrund innerhalb der Zustände setzen. Dies ist auch e für Ziel des Wertes. Jedes Mal, wenn der Benutzer etwas in das Formular eingibt oder die ausgewählten Eingaben ändert, wird es dann diese Funktion ausführen und unseren Zustand aktualisieren. Als nächstes können wir dies testen, indem wir dem Formular eine On Submit-Methode hinzufügen. Gehen Sie auf unsere Schaltfläche und in der Tat werden wir dies zu den tatsächlichen Formularelementen hinzufügen und diese auf das Online. Dieses Mal ist der Ereignishandler beim Senden. Sobald das Formular gesendet wurde, möchten wir dann eine benutzerdefinierte Methode ausführen, die diese ein Handle senden genannt wird. Dies führt dazu, dass die Handle Submit-Methode jedes Mal ausgeführt wird, wenn das Formular gesendet wurde. Wir können dies oben mit einem einfachen Konsolenprotokoll testen. Außerhalb unserer zufälligen Methode können wir unsere benutzerdefinierte Methode der Handle-Übermittlungen in den Ereignisdaten erstellen. Das erste, was zu tun ist, ist, e auszuführen oder Default zu verhindern. Dies verhindert das Standardverhalten, sobald das Formular gesendet wurde, was dann darin besteht, den Browser neu zu laden, und wir möchten dies nicht tun, da man reagiert, um die Kontrolle darüber zu haben, wann die Seite neu geladen und aktualisiert wird . Wir können dann ein einfaches Konsolenprotokoll an den Browser , der diesen Punktzustand ausgeben wird. Dieser Punktstatus zeigt uns dann den Titel und den Hintergrund , den der Benutzer eingegeben hat, sobald dieses Formular eingereicht wurde. Sagen wir das und gehen Sie dann zum Browser. In die Registerkarte „Konsole“. Geben wir hier alles ein. Ändern Sie den Wert und erstellen Sie eine neue Platine. Sieht so aus, als hätten wir hier einen Gipfel gehabt, schauen wir nach, was los ist. Es ist ein Rechtschreibfehler, also behandeln, einreichen und versuchen wir es noch einmal. Reload und wir können unseren Test hinzufügen. Versuchen wir es mit der Standardfarbe. Ich werde einen Titel und einen Hintergrund haben. Lassen Sie uns die Farbe und auch den Titel ändern und da gehen wir. Nun wurde der Status mit dem vom Benutzer eingegebenen Wert aktualisiert. Jetzt können wir unsere Methode beenden, indem wir unser Board erstellen. Installieren Sie dies als Objekt. Lassen Sie uns das Konsolenprotokoll entfernen. Erstellen Sie eine Konstante für Platine. Dies wird ein Objekt sein, das in den Titel nehmen wird, die wir von Zuständen mit diesem Punktstatus Punkttitel greifen können, getrennt durch Komma. Dies muss auch den Hintergrund greifen. Das ist auch leicht. Dies ist der Startzustand, der Hintergrund. Dann können wir den Wert von erstellt bei hinzufügen, der genau wie wir uns früher angesehen haben, wird gleich dem neuen Punktdatum sein. Daher können wir dies in der Zeitreihenfolge aus der Datenbank holen. Wir haben noch keine Benutzerdaten, so dass wir eine einfache Zeichenfolge hinzufügen können. Lassen Sie uns für a, b, c 1, 2 ,3 gehen und uns die Platinendaten geben, die wir an die Datenbank senden müssen. Wenn wir auf die app.js gehen, haben wir immer noch eine Methode namens Create new board. Dies nimmt auch in den Brettern, aber wir haben dies jetzt, was wir mit der Methode übergeben können. Wir müssen diese Methode als Requisite weiterleiten und wir werden in einem Augenblick darauf kommen. Aber zuerst wollen wir eine if-Anweisung hinzufügen, um zuerst zu überprüfen, ob der Board-Punkttitel existiert. Wir wollen überprüfen, ob dieser Board-Punkttitel vorhanden ist, denn wenn nicht, bedeutet dies, dass der Benutzer versucht, ein Board ohne Namen einzureichen. Wir wollen auch überprüfen, ob der Board-Punkt-Hintergrund auch existiert, was er sollte, weil wir diesen in Zustand gespeichert haben. Wir können dann unsere Create neue Board Methode mit diesem Punkt Requisite ausführen, Punkt erstellen Sie ein neues Board. Übergabe unserer neuen Board-Objekte. Nun ist der nächste Schritt, um sicherzustellen, dass diese Requisiten von diesem Formular empfangen werden. Öffnen Sie die app.js, wir haben unsere neue Board-Methode erstellen, die in den Zuständen gesetzt ist. Wir setzen das derzeit in die Home-Komponenten ein. Lassen Sie uns zum Heimpunkt js gehen, dieser Heimpunkt js, dann muss er dies weiterleiten, um Board-Form zu erstellen. Wir können das jetzt tun, so erstellt neues Board. Dies ist gleich unseren Requisiten, so dass dieser Punkt Requisiten Punkt neue Tafel erstellen. Dies sollte nun in unserem Formular verfügbar sein. Nur eine Sache zu tun, bevor wir voran gehen und überprüfen Sie dies ist, dass wir immer noch diese neue breite Methode direkt oben in unseren Hauskomponenten haben. Wir können das jetzt entfernen, da dies nicht mehr benötigt wird. Speichern Sie diese und stellen Sie sicher, dass alle unsere Dateien gespeichert sind und gehen Sie zum Browser. Wir können das jetzt testen. Lassen Sie uns ein neues Brett hinzufügen. Ich gehe voran zu tun, was eine rote Farbe sein wird und dann ein neues Board erstellen wird. Neues Board erstellen ist keine Funktion. Das ist hier drüben. Kleinbuchstaben w, lasst uns noch eins versuchen. Das ist in einer Farbe von Rot. Erstellen Sie neue Pinnwände und jetzt werden wir sehen, dass unser Board in die Zustände geschoben und dann im Browser gerendert wurde. Um dieses Video abzurunden, übergeben wir Requisiten, also brauchen wir einige Eigenschaftenvalidierung innerhalb aller Form. Beginnen wir zunächst in der Create Board Form, indem wir unsere Requisitentypen aus unserem Requisitentypen Paket importieren. Dann wie immer, können wir dies unten an der Unterseite unserer Komponenten hinzufügen, knapp über unserem Export. Erstellt Platinenform Punkt Requisitentypen, Kleinbuchstaben p, Satz aller Objekte. Die einzelne Requisite, die wir für diese Komponente erhalten, ist neue Platine erstellen. Dieses neue Board wird den Requisitentyp der Funktion haben, der mit dot func hinzugefügt wird. Dies ist auch erforderlich, da wir immer in der Lage sein wollen, ein neues Board hinzuzufügen. Lassen Sie uns das speichern und zum Browser gehen und überprüfen, dass es keine Probleme gibt, und alles sieht gut aus. Im nächsten Thema werden wir weiterhin Formulare betrachten, indem einen Blick auf Steuerungskomponenten werfen und auch Refs verwenden. 14. Unkontrollierte Komponenten und Erren: Die kontrollierte Methode, die wir im letzten Video betrachteten, ist die generell bevorzugte Methode, Formulare zu handhaben. Da React ist in voller Kontrolle und kann auch alle Updates behandeln. Jetzt werden wir eine alternative Möglichkeit entdecken, ein Formular in reagieren zu erstellen, und dies wird als unkontrollierte Komponente bezeichnet. Auf diese Weise werden die Formulardaten vom DOM verarbeitet und es kann eine nützliche Alternative sein, um das Schreiben von Ereignishandlern für jede Formulareingabe zu vermeiden. Für dieses Beispiel werden wir die Formulare und eine neue Liste einbauen. Wir tun dies über in den board.js Komponenten, und auf dieser Folie hier sind dies die neuen Listeneingaben, die wir unten links sehen, also schauen Sie sich dies am unteren Rand der Bowl-Komponenten nach dem Listen-Wrapper div an. Lassen Sie uns jetzt in unser Projekt in Visual Studio Code gehen. Lassen Sie uns die board.js öffnen, und dann, wenn wir zum schließenden div für diesen Listen-Wrapper gehen, der hier ist. Wir können dann unser Formular erstellen. Innerhalb dieses Formulars werden wir einen Submit-Ereignishandler hinzufügen. Bei Submit wird keine benutzerdefinierte Methode ausgelöst, die als Stern bezeichnet wird, erstellt eine neue Liste. Wenn wir bis zum Anfang dieser Komponenten scrollen, haben wir bereits neue Listen innerhalb unserer Methoden erstellt, so dass wir diese sehr bald nutzen können. Danach können wir auch einen Klassennamen für unser Styling hinzufügen und diesen auf einen neuen List Wrapper setzen. Nachdem das erstere nun in einer Formulareingabe verschachtelt wurde, wird die Eingabe den Text haben, den sie selbst schließt. der neuen Zeile können wir die Art des Textes hinzufügen. Da alles, was wir vom Benutzer erhalten, die Texteingaben für eine neue Liste sind, benötigen wir auch einen Namen. Wir können einfach seinen Namen aufrufen, und dann einen Platzhalterwert, um den Benutzer genau wissen zu lassen, was eingibt und fügen Sie ein Plus-Symbol und dann den Text aus der neuen Liste. Hier haben wir derzeit unser umgebenes div, gefolgt von einem Formularelement kurz danach. Wie wir bereits wissen, wird React uns dies nicht tun lassen, weil es die Elemente eines Elternteils benötigt. Das ist ein div als Wrapper hinzufügen. Lassen Sie uns das schließende Tag und die Orte kurz nach unserem Formular ausstreichen. Speichern wir das und dann zum Browser. Innerhalb des Browsers haben wir unsere neue Liste auf Eingaben, und auch diese Schaltfläche, die wir von früher haben, die die gleiche Methode auslöst. Lassen Sie uns in unsere zufällige Methode gehen. Wir können diese Schaltfläche von früher entfernen, da wir jetzt unsere Formulareingabe haben. Scrollen Sie dann nach oben zu unserer Create new list Methode, die den Status setzt. Da wir in dieser Version keinen Zustand verwenden, um die Formulareingaben zu verwalten, benötigen wir eine Möglichkeit, auf die DOM-Elemente zuzugreifen und sie dann auf dieses Listenobjekt zu setzen, dh wir müssen die Eingabe erfassen, die der Benutzer eingegeben hat, und dies auf unser Listenobjekt setzen, und reagieren gibt uns eine Möglichkeit, dies mit Refs zu tun. Refs sind Möglichkeiten, auf das DOM zuzugreifen und sie geben uns alle Informationen, die wir brauchen, einschließlich des Wertes, der in eine Formulareingabe eingegeben wurde. Wir können eine neue Ref mit der Create ref Methode erstellen. Lassen Sie uns dies tun oben erstellen neue Listen. Wir geben unseren Ref-Namen, ich möchte meine Addboardinputs nennen. Um den beschreibenden Namen zu behalten, kann eine Referenz mit react.create ref gesetzt werden, und die Klammern danach verwendet. Wir können es dann an unsere Eingaben als Ref-Attribute übergeben. Lassen Sie uns Onboard-Eingaben aufrufen, gehen Sie zu den Elementen, von denen Sie die Informationen möchten. Ich werde das irgendwo als Attribut hinzufügen. Wir können die Referenz gleich diesen Punkten hinzufügen Board Eingabe setzen. Dies wird diesen Verweis auf diese HTML-Eingabe anhängen, und wir können es oben in unserer Methode zugreifen, um die Eigenschaften zu löschen , die wir brauchen, erstellt eine neue Liste. Wir können nun auch die Ereignisinfo mit der Variablen e übergeben, dann können wir darauf zugreifen, um das Standardverhalten zu verhindern. Dies wird grundsätzlich verhindern, dass die Seite neu geladen wird, wenn wir das Formular absenden. Um dies zu testen, werde ich den Code auskommentieren und dann die Referenz der Konsole protokollieren. Lassen Sie uns die Set-Zustände und auch unsere Liste entfernen, und nehmen Sie ein Konsolenprotokoll mit dem Wert unserer ref, das ist dies, .addBoardInputs. Wir brauchen das Semikolon nicht, also gehen wir zum Browser. Wir haben einen Pfeil innerhalb des Bretts, also haben wir die brandneue Liste bekommen, diese schließende Klammer auskommentieren und los geht's. Jetzt innerhalb unserer neuen Liste, ohne irgendetwas drin, gehen Sie zur Konsole, und dann erhalten wir den Wert unserer Referenz , der auf unsere aktuelle Eingabe verweist. Jetzt ist eine Menge Informationen über die Eingabe gerade hier. Aber der, an dem wir besonders interessiert sind, ist der aktuelle Wert, also oben in unserem Konsolenprotokoll können wir jetzt zu.current.value freigeben. Dies gibt uns den vom Benutzer eingegebenen Wert, lassen Sie uns alles in diese Eingabe eingeben. Wir erhalten nun den Text, der vom Benutzer eingegeben wurde. Zurück zu unserem Ball, können wir jetzt diesen Code auskommentieren. Das ist wie alle Zeilen, wenn sie auskommentiert werden, was die Liste ist, den ganzen Weg nach unten, um den Status zu setzen. Wir können auch das Konsolenprotokoll entfernen, und jetzt können wir den Ref-Wert innerhalb unseres Titels anstelle dieses hartcodierten Wertes verwenden. Wir können dies tun, indem wir die Zeichenfolge entfernen, und dann können wir stattdessen auf this.AddBoardInputs zeigen, und dann, wie wir zuvor im Konsolenprotokoll gesehen haben, können wir den aktuellen Wert greifen. Speichern Sie das jetzt und gehen wir zum Browser. Lassen Sie uns alles versuchen, hier drin, neue Liste zwei, und jetzt wieder Fehler. Der Grund dafür ist in den Listenkomponenten vorbei. Hier drinnen durchlaufen wir alle verfügbaren Karten in unserer Liste. Aber innerhalb dieser Ballkomponenten, wenn wir eine neue Liste erstellen, haben wir keine Karte Setup innerhalb dieses Objekts. Daher kann reagieren keine Werte finden und verursacht einen Fehler. Später, wenn ich diese Autos von den Listen trennen, so als eine vorübergehende Maßnahme, werde ich einige einfache Karten hinzufügen, wenn eine neue Liste zu erstellen. Kurz nach neuen Tagen werden wir vorübergehend einige Karten hinzufügen , die eine Reihe von Objekten sein wird. Fügen wir ID 1, etwas Text hinzu und sagen Karte 1. Getrennt durch gemeinsame, können wir ein zweites Objekt mit einer ID von 2 und auch etwas Text von Karte 2 hinzufügen, und auch das Komma direkt nach dem Erstellen bei hinzufügen. Gehen wir zum Browser, und jetzt, wenn wir eine neue Liste hinzufügen, antwortet sie. Die neue Liste wird nun im Browser hinzugefügt. Kurz bevor wir das abschließen, gibt es ein paar kleine Probleme zu beheben. Zunächst einmal, wenn wir den Inhalt aus unseren Formulareingaben löschen und Enter drücken, sehen wir, dass wir jetzt eine leere Liste hinzufügen können, und auch Nummer 2 wird die Eingabe nicht gelöscht, nachdem wir eine neue Liste hinzugefügt haben. Drücken Sie die Eingabetaste, und wir möchten, dass dieser Wert dann für die nächste Liste gelöscht wird. Das sind ziemlich einfache Dinge zu beheben. Zuerst können wir eine if-Anweisung hinzufügen, um zu überprüfen, ob der Titel vorhanden ist, bevor wir einen Zustand setzen. Wir können dies in Seite der board.js tun. Lassen Sie uns nach unserem Set gefälschten Anruf suchen, der gerade hier ist. In der obigen Zeile können wir eine if-Anweisung erstellen, um zu überprüfen, ob die list.title vorhanden ist. Wenn this.set-Zustand und verschieben Sie diese dann nach innen, wird dies eingeben, stoppen Sie eine leere Liste hinzugefügt. Wir können das testen. Wenn wir in dieser neuen Liste eingeben drücken, sehen wir, dass keine neue Liste hinzugefügt wurde. Als nächstes ist die Eingabe klar, nachdem wir eine neue Liste eingereicht haben, können wir dies innerhalb der Platine tun, .js. Kurz nach dieser Phase können wir den Wert unserer Ref aktualisieren oder zurücksetzen, so dass diese Punkte Board-Eingang sind. Wir können den Spaltenwert, genau wie wir zuvor verwendet haben, um gleich einer leeren Zeichenfolge zu sein. Testen Sie das aus. Irgendetwas hier drin. Und jetzt sind unsere neuen Listeneingaben leer. Jetzt funktioniert das, wir können ein wenig mehr Übung im nächsten Video bekommen , indem wir das neue Kartenformular erstellen. 15. Neues card erstellen: Die ausgebildete neue Karte wird ähnlich wie das letzte Video sein, so dass wir ein wenig mehr Übung mit Graphen bekommen und auch schieben auf alle Zustände Objekt. Dies werden die neuen Karteneingänge, die wir am Ende jeder dieser drei Listen sehen, mindestens in den kleinsten Komponenten auf dieser Karte verbunden. Gehen wir rüber zur list.js. Innerhalb der Listenkomponenten und unter unserem aktuellen Abschnitt können wir auch ein neues Formular hinzufügen, so dass wir direkt unter unserer Schleife und auch immer noch innerhalb dieses umgebenden div ein Formular hinzufügen können. Das Formular wird eine On Submit-Methode haben, die gleich dem Wert von this.CreateNewcard sein wird. Wir können auch einen Klassennamen hinzufügen und dies auf new-card-wrapper setzen. Fügen Sie dies auch zum Online hinzu, damit es klarer ist. Jetzt innerhalb dieses Formulars können wir fortfahren und unsere Eingabe hinzufügen, genau wie wir es getan haben, wenn wir eine neue Liste hinzufügen. Die Eingabe wird den Typ des Textes haben. Lassen Sie uns das schließen, und in einer neuen Zeile können wir den Typ hinzufügen. Danach wird dies auch den Namen haben, und dies ist gleich dem Namen, und dann schließlich ein Platzhalter, genau wie das letzte Video wird ein Plus-Symbol sein, und dann der Text der neuen Karte. Das ist alles, was wir für unsere Form tun müssen. Dies wird auch eine Referenz benötigen, so dass wir dies an der Spitze unserer Klasse erstellen können. Kurz über unserer zufälligen Anstrengung können wir unseren NameInput hinzufügen, beantworten Sie dies, um React.createRef. Wir müssen dann diesen NameInput greifen und diesen zu unserem Formular hinzufügen. Innerhalb der Eingabe als Attribut können wir die Ref hinzufügen, genau wie wir zuvor verwendet haben, und so ist es auf den Wert von this.NameInput, der den Wert dieser Eingabe mit unserem ref verknüpft. Im Moment der Einfachheit sind unsere Karten in den Listen in den Beispieldaten enthalten. Bald werden alle Bretter, Listen und auch die Karten auch Unabhängigkeit sein, und dann verknüpfen wir diese über IDs. Wir können diesen Prozess beginnen, indem wir die aktuellen Kartenzustände innerhalb der E2 hinzufügen. Oben an der Spitze dieser Komponenten können wir unser Zustandsobjekt erstellen, und dieser Zustand wird für die Speicherung der aktuellen Karten verantwortlich sein. Im Moment ist dies jedoch der Anfangszustand, der auf ein leeres Array gesetzt wird, und der Prozess der Erstellung einer neuen Karte ist dem letzten Video sehr ähnlich, als wir eine neue Liste hinzugefügt haben. Alles, was wir tun müssen, ist unter unsere Ref außerhalb unserer zufälligen Anstrengung zu gehen und dann können wir eine neue Karte erstellen, und denken Sie daran, dass dieser Name die meisten Verbindung mit der Methode, die wir bei der Einreichung hinzugefügt werden, so dass „neue Karte erstellen“ wird eine Funktion sein, die wird die Event-Info aufnehmen. Wir richten unsere Pfeilfunktion genau so ein. Wir können dann verhindern, dass das Standardverhalten, um den Browser vom Neuladen zu stoppen, und erstellt dann unsere Karte. Wir können diese Karte innerhalb einer Konstante speichern und diese in einem Objekt speichern. Das Kartenobjekt wird den Text, die Listenkennung, mit der verknüpft ist, ein Array von Beschriftungen und auch das Datum, an dem es erstellt wurde, haben. Zunächst einmal, der Text, der für diese Karte ist, können wir von unseren Refs greifen. Dies wird innerhalb von NameInput gespeichert, und noch einmal können wir den Wert mit.currrent.value greifen. Getrennt durch das Komma, können wir diese auch mit einer Liste verknüpfen, indem wir eine ListID hinzufügen. Später in diesem Kurs wird diese ListID automatisch in folgt platziert, aber jetzt können wir hier jeden Wert hinzufügen. Neben oben wird eine Karte auch ein Array von Labels benötigt, also lassen Sie uns dies auf ein anfängliches leeres Array setzen, und auch das CreateDat, das einem neuen JavaScript-Datum entspricht. Unterhalb dieses Objekts können wir auch die Zustände festlegen, aber kurz bevor wir dies tun, werden wir überprüfen, ob die card.text vorhanden ist, was verhindert, dass alle Formulareingaben übermittelt werden, die keinen Wert hat. Wir können dann this.setState aufrufen, wie in unseren Objekten. Diese Zustände, die wir setzen wollen, sind die farbigen Karten, also werden wir tun, was wir zuvor getan haben. Innerhalb dieses Zustandsobjekts werden wir die CurrentCards setzen , indem wir uns den CurrentState mit dem Spread-Operator vorstellen, also this.State.CurrentCards, dann durch Komma getrennt, wird auch unsere neue Karte hinzufügen. Das nächste, was danach zu tun ist, ist auch unsere Formulareingabe zurückzusetzen Fügen wir dies einfach in eine neue Zeile hinzu, damit es klarer ist. Dann unterhalb dieser geschweiften Klammer für die if-Anweisungen können wir dann das Texteingabefeld zurücksetzen , indem wir auf die ref mit NameInput zugreifen, und dann die current.value auf eine leere Zeichenfolge setzen. Um zu überprüfen, ob dies funktioniert, können wir ein schnelles Konsolenprotokoll direkt danach mit der Zeichenfolge der neuen Karte machen , und wir können am Ende den card.text oder zum Browser hinzufügen. Wir haben jetzt unsere neuen Kartenformulareingaben am Ende jeder Liste, also lassen Sie uns hier alles hinzufügen. Lassen Sie mich eine neue Karte hinzufügen und dann Text. Versuchen wir es, und jetzt funktionieren diese alle gut. Ich werde die Karten so belassen, wie sie für jetzt sind, da wir die echten Kartendaten von [unhörbar] Basis in einem späteren Abschnitt beginnen und dann diese Karten mit jeder Liste verknüpfen. 16. React Router einrichten: Im Moment in unserem Projekt haben wir sowohl die Haus- als auch die Platinenkomponenten gezeigt. Wir können dies sehen, wenn wir zu den React Entwickler-Tools innerhalb unserer App gehen, wir haben diesen Home-Abschnitt, schauen Sie oben hier und dann unten wir die Board-Komponenten rendern. Dies liegt daran, dass wir derzeit keine Möglichkeit haben, zwischen diesen umzuschalten. Idealerweise aber, was wir nach dem Login wollen, ist zu diesem Hause Komponenten gebracht werden, wo wir dann eine dieser Boards auswählen können, können wir darauf klicken und dann zu dieser Tafelansicht weitergeleitet werden. Grundsätzlich muss das auf verschiedenen Seiten sein. Um dies zu erreichen, können wir einen Router installieren, der es uns erlaubt , bestimmte Komponenten auf bestimmten URLs anzuzeigen. Zum Beispiel wird die URL der Schrägschrägbretter diese Board-Komponenten rendern. Ich werde auch eine URL für zu Hause haben. Leider hat dieses React kein offizielles Router-Paket, aber wahrscheinlich das am häufigsten verwendete ist das react-router-dom-Paket, das die Webversion des Routers ist. Dies ist ein ausgereiftes Paket, das aktiv gepflegt wird und wir können dies mit NPM installieren. zu unserem Projekt Lassen Sie unszu unserem Projektein neues Terminal öffnen und dann drinnen werden wir NPM laufen. Ich react-router-dom, getrennt durch Bindestriche, lassen Sie dies ausschalten. Es gibt verschiedene Ansätze, die wir ergreifen können, um unseren Router im Projekt einzurichten, z. B. den Router zu einer separaten Datei hinzuzufügen und ihn dann in unsere Haupt-App zu importieren. Wir können es auch zu unserer index.js hinzufügen. Aber da wir nur ein paar Seiten haben, zwischen denen wir wechseln können, werde ich dies in unserer app.js einrichten. Gehen wir hin und wieder oben an der Spitze, das erste, was wir tun müssen, ist, die Pakete zu importieren, die wir vom Browser-Router benötigen. Diese heißen „export“, also fügen wir diese innerhalb der geschweiften Klammern hinzu. Die erste, die wir brauchen, ist der BrowserRouter, Großbuchstabe B, und dann Großbuchstabe R durch ein Komma getrennt. Wir müssen auch das Routenpaket importieren. Dann drittens und schließlich wird der Switch aus dem Router-Paket importiert, das react-router-dom ist. Zuallererst haben wir diesen BrowserRouter. Dies ist unsere eigentliche Router-Implementierung. Wir werden es als Wrapper für alle unsere Routen verwenden und die HTML5-Historien-API verwenden. Danach haben wir die Routen, dies wird verwendet, um eine Komponente für eine gegebene URL zu rendern. Schließlich haben wir Schalter, dies ist ein Wrapper für mehrere Routen. Ich werde immer nur die erste Route rendern, die übereinstimmt. Lassen Sie uns dies ausprobieren und fügen Sie dies der zufälligen Methode hinzu , indem Sie die Komponenten mit dem Router umwickeln. Bis zu unserer zufälligen Methode, bei der ich unser Haus an Bord bringen werde diese beiden Komponenten innerhalb des div umgibt. Dann möchte ich den BrowserRouter verwenden, denwir gerade importiert haben, wir gerade importiert haben, also das öffnende Tag, und fügen Sie dann das schließende Tag direkt nach dem Board hinzu. Wir können dann kommen und unser Board und unsere Hauskomponenten finden und dann den Router nutzen, um dies zu kontrollieren. Ich werde mit der Vorstandsroute beginnen. Die Heimroute führt die Requisiten, so dass wir sehr bald darauf zurückkommen werden. Nutzen wir unseren Routing-Teil mit einem Großbuchstaben R, das ist selbstschließend. Dann im Inneren übergeben wir den Pfad, der gleich sein wird, um Schrägstrich Board, so jedes Mal, wenn der Benutzer diese Routen von Schrägstrich Board besucht, aber dann wollen, um eine Komponente zu rendern, können wir die Komponenten hinzufügen, und dieses wird die Board-Komponenten sein, und das benötigt ein großes B, um die Komponenten zu entsprechen , die wir oben in dieser Datei importiert haben. Zurück auf unseren Router, eine weitere Route, die wir brauchen, ist ein PageNotFound, um alle Ihre Route zu fangen, die wir hier nicht hinzufügen. Direkt unter unserem Brett, lassen Sie uns eine zweite Route hinzufügen. Wir müssen diesmal keinen Pfad hinzufügen, da dies alle Pfade aufnimmt , die oben nicht deklariert sind. Stattdessen müssen wir nur eine Komponente rendern. Ich werde eine Komponente namens Seite Not Found hinzufügen, dann schließen Sie dies ab. Diese Komponente wurde noch nicht erstellt, so können wir fortfahren und dies jetzt innerhalb von Komponenten und Rampages tun, lassen Sie uns eine neue Datei hinzufügen. Dies ist die PageNotFound.js. Es ist Funktion wird ziemlich einfach sein. Ich werde React von hier importieren und dies dann als funktionsbasierte Komponente namens PageNotFound wegen der Funktion einrichten , dann fügen wir hier ein div hinzu. Dieses div wird einfach eine Überschrift der Ebene drei mit dem Text von PageNotFound rendern . Jetzt müssen wir diese Funktion ganz unten mit einem Exportstandard exportieren, dem Komponentennamen von PageNotFound. Dies ermöglicht es uns nun, dies in die app.js zu importieren, so oben oben, können wir PageNotFound aus dem Dateipfad importieren, Punktschrägkomponenten ist. Dies befindet sich auch im Ordner Pages und dann der Name PageNotFound. Lassen Sie uns das jetzt speichern und zum Browser gehen, ich habe einen Fehler, BrowserRouter, also unten auf Zeile 23, fügen Sie einfach eine R darin hinzu. Dann ändern Sie den Browser, so derzeit sind wir auf den Routen von 123 Schrägstrich vorwärts. Jetzt erhalten wir den PageNotFound, da dies mit keiner der Routen hier übereinstimmt. Wenn wir nun versuchen, Schrägstrich Board, wir sollten jetzt sehen, diese Board-Komponente gerendert um unsere URL zu ändern, um Schrägstrich Board. Jetzt sehe ich das Brett im Browser gerendert, gut. Kurz bevor wir dieses Video abschließen, möchte ich Ihnen etwas zeigen, das Sie bei der ersten Verwendung des Browser-Routers auffangen kann. Wenn wir zurück zu der app.js gehen. Zunächst einmal, wenn wir den PageNotFound auskommentieren, und dann fügen wir eine weitere Route direkt oben hier hinzu. Diese aus, und dann können wir einen Pfad hinzufügen, der für die gesamte Route des Schrägstrichs sein wird, so dass Sie im Inneren hier jede Komponente rendern können. Lassen Sie uns einfach für den PageNotFound gehen. Wenn wir diese Datei jetzt speichern und zum Browser gehen und dann zum Schrägstrich Board navigieren, sehen wir sowohl die Boards gerendert wird und auch die PageNotFound-Komponenten, obwohl wir eine URL von Schrägstrich Board übereinstimmen. Dies kann ein wenig seltsam aussehen, weil wir derzeit auf den Schrägboard-Routen, werden wir nicht wollen, um die Komponenten der Platine zu rendern. Der Grund, warum dies geschieht, ist, weil technisch gesehen, der Heim-Vorwärtsschrägstrich auch hier eine Übereinstimmung ist. Wenn wir uns vorwärts Schrägstrich Board ansehen, beginnt dies auch mit einem Schrägstrich, so dass wir eine teilweise Übereinstimmung am Anfang der URL haben. Dies ist genug, um die Home-Komponente zwei zu rendern , und wenn wir diese Art von Verhalten nicht wollen, können wir auch exakt zur Route hinzufügen, was dies vermeidet. Innerhalb unserer Route können wir exakt hinzufügen. Speichern Sie dies, und jetzt auf Vorwärtsslash-Board, sehen wir nur die Board-Komponente, da die Verwendung von exact keine Teilübereinstimmungen erlaubt, also werde ich nur unsere App wieder einsetzen, ich kommentiere auf PageNotFound. Aber das ist etwas, auf das man achten muss, wenn man den Router benutzt. Als Nächstes werden wir uns ansehen, wie wir die Home-Komponenten wieder einführen können und wie wir Requisiten über den Router weitergeben können. 17. Requisiten zu einer router überspringen: Diese app.js Datei wurde verwendet, um unsere Home-Komponente und auch die Platine zu rendern. Im letzten Video, als wir zum Router gewechselt haben, haben wir nur die Board-Komponente gerendert diese Home-Komponente bis zu diesem Video belassen. Dies liegt daran, dass diese Hauskomponente auch Requisiten verwendet, wir übergeben die Bretter und auch die neue Board-Methode erstellen. Wenn Sie Requisiten mit dem Router übergeben, wäre der erste Instinkt vielleicht, so etwas zu tun. Wenn wir unsere Heimwege hätten, könnten wir in einer Komponente von zu Hause passieren. Wir könnten dann auch die Requisiten weitergeben, genau wie wir unten kommentiert haben, wie die Bretter. Lassen Sie uns hinzufügen, dies ist vorbei und erstellen Sie auch ein neues Board. Lassen Sie keine Komponente zu spiegeln, was wir zuvor hatten. Wenn wir dies jedoch speichern und dann zu unserer App gehen, müssen wir zum Schrägstrich übergehen, der die Home-Komponente ist. Wir sehen jetzt, dass wir eine Fehlermeldung in der Konsole und auch im Browser erhalten. Wir erhalten diese Fehler, weil die Home-Komponente nicht die Requisiten erhält, die sie benötigt. Daher empfängt React diesen undefinierten oder NULL-Wert. Wenn wir den React-Router verwenden, können wir Requisiten nicht auf traditionelle Weise weitergeben. Die Lösung besteht darin, eine Renderstütze an der Stelle unserer Komponente zu übergeben. Beginnen wir damit, unsere Requisiten und auch diese Hauskomponente zu entfernen. Dann an Ort und Stelle können wir in einem Render-Requisite hinzufügen. Drinnen nimmt dies eine Funktion ein. Also übergeben Sie eine Pfeilfunktion, genau wie diese. Hier können wir dann unsere Home-Komponente mit unseren Requisiten hinzufügen. So wie wir es früher getan haben, hier unten haben wir die Home-Komponente, die eine aus unseren beiden Boards ist. Wir können in der Tat, kopieren Sie diesen Abschnitt und fügen Sie ihn dann innerhalb dieser Funktion. In der Tat brauchen wir nur ein Zuhause und nicht dieses Board, also lasst uns das entfernen. Also zuerst, speichern wir diese Datei und überprüfen Sie diese. Wir sehen nun, dass die Home-Komponente die Board-Vorschau rendert, so dass jetzt unser Fehler beseitigt wird. Wir sehen auch diese Seite nicht gefunden Komponente. Da es keinen Pfad hat, wird es immer mit unserem aktuellen Router-Layout gerendert. Um dies zu beheben, können wir unsere Routen mit einer switch-Anweisung umgeben. Also innerhalb des Browser-Routers können wir dieses Switch-Paket verwenden , das wir früher importiert haben. Kurz nach dem Browse Router, können wir dies in übergeben. Es hat eine Öffnung und ein schließendes Tag, das direkt innerhalb unseres Browser-Routers sitzt. Was Switch tun wird, ist, unsere Komponenten zu betrachten und dann nur die erste zu rendern, die übereinstimmt. Wenn also ein Schrägstrich oder ein Schrägstrich gefunden wird, wird die entsprechende Komponente gerendert genau wie bei normalen JavaScript-Schaltanweisungen. Wenn keine übereinstimmen, werden wir dann mit der Seite links unten nicht gefunden. Speichern wir dies und überprüfen Sie, dass die Seite nicht gefundene Komponente entfernt wird. Jetzt haben wir nur die Home-Komponenten wie erwartet. Dies lässt uns jetzt mit dem Verhalten, das wir erwarten würden und so können wir Requisiten mit dem React-Router weitergeben. Als nächstes werden wir uns diesen Router anschauen und wie wir Parameter über die URL übergeben können. 18. URL-Parameter: Mit React Router können wir auch Parameter über die URL an über Seiten übergeben. Parameter sind ein Abschnitt der URL, der sich ändern kann. Zum Beispiel, wenn wir einen Benutzer hatten, der angemeldet ist und entweder ID wie Benutzer 1 verwenden, könnten wir dann „/boards“ hinzufügen. Würde alle Pinnwände für Benutzer eins anzeigen. Dieser Benutzer ist ein Abschnitt dynamisch, dh es ändert sich je nachdem, welcher Benutzer angemeldet ist. Auch das gleiche, wenn wir verschiedene Bretter haben. Wir könnten auch ein Brett haben. Dann Schrägstrich mit der Board-ID auf nur 100, was bedeutet, dass der 100-Abschnitt dynamisch wäre, in einer Variablen gespeichert und dann für die Verwendung mit React Router verfügbar wäre. Lassen Sie uns zu unserer App.js gehen und sehen, wie wir dies implementieren können. Im Moment haben wir den Schrägstrich, der unsere „Home“ -Komponenten rendert. Später in diesem Kurs wird diese Schrägstrich Route verwendet, um eine Login-Komponente zu rendern. Ein Benutzer muss sich anmelden, bevor er seine eigenen Boards sieht. Daher bedeutet dies jetzt, dass diese Home-Komponente, die die Boards des Benutzers anzeigt, auf einer Route wie dieser sein muss, also Benutzer eins. Dann können wir die verfügbaren Boards für den angemeldeten Benutzer sehen. Jetzt ist es nicht praktisch, für jeden Benutzer, der auf unserer Website eingeloggt ist, eine andere Route mit einem anderen Pfad hinzuzufügen . Stattdessen können wir einen Doppelpunkt hinzufügen, um einen dynamischen Abschnitt hinzuzufügen, gefolgt von einem Namen, den wir dieser Variablen hinzufügen möchten. Nennen wir es die Benutzer-ID. Nun, wenn wir zum Browser gehen und wir sind „123/Boards“ haben. Dies würde nun an die Home-Komponente weiterleiten und dann den Wert 123 innerhalb dieser Benutzer-ID speichern . Da dieser Abschnitt dynamisch ist, werden diese „Home“ -Komponenten immer noch rendert , unabhängig davon, welcher Wert hier platziert wird. Wenn wir die „React Developer Tools“ öffnen. Klicken wir auf diese Registerkarte und suchen Sie dann nach den „Home-Komponenten“, die wir gerade sehen. Wird nur die Requisiten über auf der rechten Seite mit den „Boards“ und auch die „Create New Board“ -Funktion sehen. Es gibt derzeit keinen Verweis auf diese Benutzer-ID. Um dies zu sagen, müssen wir die Daten des Routers als Requisite zwei weitergeben. Wir könnten das in der „Render-Requisite“ tun. Hier drinnen werden wir die Requisiten als Variable an die Funktion übergeben. Dann innerhalb unserer „Home Components“, wie diese waren eine separate Linie. Wir können uns auch in den „Requisiten“ verbreiten. Dadurch werden die Daten des Routers mit den restlichen Requisiten zusammengeführt, die Sie an die „Home-Komponenten“ übergeben. Zurück zu den „Entwickler-Tools“ Lassen Sie uns „Reload“ gehen Sie in „React“ und suchen Sie nach den „Home-Komponenten“. Wählen Sie diese Option aus. Jetzt haben wir neben den „Boards“ und „Neues Board erstellen“ drei neue Requisiten. Dies ist die Requisiten „History, Location and Match“, die alle vom React-Router übergeben werden. Wir werden diese näher betrachten, während wir den Rest des Kurses durchlaufen. Aber jetzt können wir die Parameter oder diese URL-Parameter finden, innerhalb der Requisiten auf der „Match“ Und dann bis zu „Params“ Wir haben daher diese Benutzer-ID-Variable mit dem Wert von 4-5-6, die hier aus diesem Abschnitt genommen wird. Später werden wir diese Benutzer-ID verwenden, um die Boards für den aktuell angemeldeten Benutzer abzurufen. Aber jetzt können wir den Benutzer einfach in der Datei „Home.js“ ausgeben. Gehen wir rüber zum „Zuhause“. und direkt über unserem „Create Board Form“, werde ich eine „Spanne“ ausgeben. Und um die Benutzer-ID anzuzeigen, tun wir dies genau wie bei anderen Requisiten. Wir können auf diese „topprops.match“ zugreifen, die diese Requisiten, die Sie gerade hier haben. Wir brauchen „match.paramas“ und dann die Benutzer-ID. Lassen Sie uns dies speichern und gehen Sie dann zum Browser. Wir haben jetzt die Variable von 4-5-6. Lassen Sie uns hier einen anderen Wert ausprobieren, also Benutzer eins. Jetzt werden diese Parameter im Browser angezeigt. Wir können dies auch für unsere Boards tun. Wenn wir gehen zurück zu unserer „App.js“ und dann scrollen Sie nach unten zu unseren „Board-Komponenten“ Wir können jetzt in der Board-ID hinzufügen. Vorwärts Schrägstrich, dies ist eine dynamische Abschnitte, so brauchen wir z Doppelpunkt, die Board-ID. Dies ermöglicht es uns nun, in die URL zu gehen. Dann am „Board“, und dann „/BoardID“ genau als eins. wo dynamische Daten, die wir für die Board-ID übergeben , laufen diese Board-Komponenten immer noch aus. Dann wird die Board-ID innerhalb dieser Variablen gespeichert. Da wir auch die Requisiten des Routers in seinem Komponentenwerkzeug übergeben müssen, können wir die Komponente durch die Renderfunktion ersetzen. Lassen Sie uns diese auf das Online hinzufügen. Wir können die „Komponenten“ entfernen und diese dann durch das „rendern“ ersetzen. Dies nimmt eine Funktion an, die wir in den Requisiten des Routers übergeben werden. Hier drinnen reißen wir dann unsere „Board-Komponenten“ auf einer separaten Linie aus, können sich aber auch in den „Requisiten“, die vom Router zur Verfügung gestellt werden,ausbreiten die vom Router zur Verfügung gestellt werden, und dann unsere Board-Komponenten abschließen. Lassen Sie uns testen, dass dies im Browser funktioniert. Um einen Schrägstrich zu haben. Versuchen wir es mit 5.000. Für jede Nummer, die Sie übergeben, sehen wir immer noch die „Board-Komponente“ auf dem Bildschirm gerendert. Lassen Sie uns innerhalb der „Dev-Tools“ nach dem Board suchen. Wir haben noch die Requisiten von „Geschichte, Lage“ und „Marsch“ wir greifen die „paramas“ hier drinnen. Damit haben wir nun einen weiteren Schritt in Richtung Struktur gemacht , die wir für das endgültige Projekt brauchen. Konnte nicht, obwohl wir nur diese URLs eingeben. Aber im nächsten Video werden wir uns ansehen, wie wir zu diesen Routen navigieren können. Wenn ein Benutzer auf eine „Board“ -Vorschau klickt. Und auch, wie wir auf die React-Router-Funktionen zugreifen können , wenn es nicht möglich ist, Requisiten weiterzugeben. 19. withRouter und and verwenden: Anstatt unsere dynamischen URLs einzugeben, die wir im letzten Video gemacht haben, brauchen wir stattdessen eine Möglichkeit, sie über unsere App zu pushen. Wenn wir zu unserem Projekt in lokalen Host gehen und dann nach 1, 2, 3 suchen , beide Flash-Bonds. Wir haben unsere kostenlosen Anleihen hier aus den Stichprobendaten. Es wäre gut, auf eines dieser klicken zu können und dann mit der Board-ID als Teil der URL zu den Board-Komponenten weitergeleitet zu werden . Um dies zu tun, können wir den React-Router verwenden, um zu einer bestimmten URL zu navigieren und wir können dies mit der Push-Methode tun. Während wir auf dieser Seite sind, können wir zu den reaktiven Werkzeugen gehen und das Verlaufsobjekt innerhalb der Home-Komponenten öffnen . Gehen wir auf die Geschichte in den Requisiten. Wenn wir das aufmachen. Im Inneren befindet sich diese Push-Methode. Diese Push-Methode wird einen neuen Eintrag auf den Browser-Verlaufsbestand hinzufügen , was bedeutet, dass Sie den Browser hin und her verwenden können, Watson, und dann wird seine Seite in der Geschichte gespeichert werden. Diese freien Bindungen, natürlich, Haus und Garten Ideen befinden sich innerhalb der Board Vorschaukomponenten. Dies wird uns mit einem kleinen Problem belassen. Wenn wir zu den DevTools gehen und nach der Board-Vorschau suchen. Wenn wir eine dieser Boardvorschauen auswählen, die einzige Requisite, die Sie haben, das eigentliche Board. Wir haben keinen Zugriff auf das Verlaufsobjekt, in dem sich Push befindet. Vielleicht denken Sie hier, wir können einfach die Requisiten weitergeben, wie wir es mit den anderen Komponenten getan haben, und die Antwort ist nein oder nicht direkt. Diese Board-Vorschau ist ein untergeordnetes Element der Home-Komponenten. Daher wird es nicht direkt vom Router gerendert. Innerhalb der app.js sind die einzigen Komponenten, die untergeordneten Komponenten eines Routers sind diese Home-Komponenten und auch die Platine. Der Weg, um dies zu umgehen, besteht darin, ein Paket namens Router zu verwenden. Der Router ist eine höhere Ordnung Komponenten, die unsere Board Vorschau wickeln wird. Daher übergeben die gleiche viel Ort und Geschichte Requisiten, und der Router ist auch in diesem gleichen React Router-Paket, das Sie bereits installiert haben. Lassen Sie uns zur Board-Vorschau gehen und wir können dies oben in der Datei importieren. Dies ist ein benannter Export. Sony, um die geschweiften Klammern zu verwenden. Wir haben einen Router. Dies ist aus dem gleichen Paket, das react-router dom ist. Dann können wir den Inhalt innerhalb der zufälligen Anstrengung ersetzen. Anstatt nur Ausgaben in this.props.board.title. Aber ich werde eine ungeordnete Liste anzeigen, und dann wird jedes Element hier ein Listenelement sein. Jedes Element ist das Board, daher können wir dann this.prompts.board.title ausgeben. Lassen Sie uns das speichern und werfen Sie einen Blick auf die Home-Komponenten. Wir haben immer noch unsere kostenlose Kugeln hier drin. Lassen Sie uns ein wenig Styling in unserer ungeordneten Liste hinzufügen. Zuallererst können wir einen Klassennamen hinzufügen, um das CSS auszulösen. Dies ist Board-Vorschau-Element. der nächsten Zeile fügen wir einen onclick Ereignishandler hinzu , der eine Methode namens GoToBoard auslöst. Als nächstes werden wir einen Inline-Stil hinzufügen, der die Hintergrundfarbe von jedem ist Board-Vorschau einstellen wird. Dies spiegelt die Hintergrundfarbe wider, die wir festlegen, wenn wir ein neues Board erstellen. Wir können dies mit einer Inline-CSS-Eigenschaft namens background-color tun. Da dies JavaScript ist, müssen wir die Farbe Groß-/Kleinschreibung Hintergrundfarbe verwenden, anstatt die Strich- und Kleinbuchstaben Werte wie bei einem regulären CSS zu verwenden . Wir werden seine Hintergrundfarbe gleich this.props.board.background setzen. Jetzt darüber können wir unsere GoToBoard-Methode außerhalb der zufälligen Methode erstellen. Lassen Sie sich kurz nach unserer Board-Vorschauklasse gehen, können wir GoToBoard erstellen, unsere Funktion einrichten. Zunächst einmal werden wir uns die Board-ID holen, die wir derzeit Insider-Requisiten haben. Wenn wir zur Ballvorschau gehen. Innerhalb der DevTools, in den Requisiten, haben Sie alle Board-Informationen, die wir brauchen. Erste Iets Scrab kaufte wahrscheinlich ID installiert dies in seitlicher Konstante. Board-ID wird gleich this.props.board.id sein. Der zweite Durchlauf heute ist dann verwenden Sie die React Router Push-Methode zu zentrieren auf eine andere URL. Was zu tun ist, klicken Sie auf einen dieser Links. Dann möchten wir zu einer neuen URL weitergeleitet werden. Also Board, und dann vorwärts/theboardid, die wir innerhalb dieser Variablen gespeichert haben. Lasst uns das jetzt machen. Diese.Props.History. Zugriff auf die Push-Methode. Dies wird in einem Objekt zu nehmen, wo wir den Pfadnamen angeben können. Seit diesem Pfadnamen werden wir diese Board-ID-Variable verwenden. Wir müssen die hinteren Zecken verwenden, um das zu konstruieren. Zunächst können wir navigieren, um Slashboard vorwärts und dann Schrägstrich vorwärts. Wir können die Template-Syntax des Italo-Symbols geschweifte Klammern verwenden, und dann in der Board-ID übergeben. Wenn wir jetzt sagen, diese Datei und dann gehen über zu unseren Home-Komponenten. Wir haben jetzt die kostenlosen Listenelemente für unsere Boards, die auch die Hintergrundfarbe von this.props.board.background erhalten. Lassen Sie uns nun auf einen dieser klicken und sehen, ob die Push-Methode funktioniert. Wir sehen jetzt, dass Ihre Nachricht aus kann nicht die Eigenschaft Push von undefined lesen. Dies funktioniert nicht, weil, wie bereits erwähnt, das Paket, das wir oben in der Datei, die Router genannt wird, jetzt ein Rapper für diese Komponenten sein muss. Wir können dies ziemlich einfach tun, wenn wir zu unserem Export gehen, und dann können wir unsere Board Preview-Komponenten mit Router umwickeln, und dann können wir in unserer Board-Vorschau übergeben, speichern Sie diese Datei, und dann schauen wir uns dies über in der -Browser. Wir können auf jede dieser Boards klicken und dann nehmen wir es zu den Board-Komponenten. Das ist die Vorstandsnummer 2.000. Gehen wir zurück und versuchen, Ideen zu verursachen. Das ist jetzt Board Nummer 1.000. Auch das gleiche für die Garten-Ideen. Später im Kurs, wenn wir in Firebase verwenden, werden wir diese Board-ID verwenden, um die eindeutigen Balldaten zu erhalten , anstatt bei dieser Ladungsumleitung, die Sie hier sehen. Aber für jetzt ist dies ein Schritt in die richtige Richtung, und als nächstes werden wir einen Blick darauf werfen, wie wir Zustand mit React Router passieren können. 20. Zustand über Router durchlaufen: Wir wissen bereits, wie man Downstate beim Rendern von Komponenten mit dem Router weitergibt, genau wie wir es mit diesen Home-Komponenten getan haben. Wir werden an den Boards vorbei und auch neue Board-Funktion erstellen. Auch in der Board-Vorschau haben wir mit der Push-Methode zu einer anderen Route navigiert. Mit dieser Push-Methode haben wir manchmal auch die Notwendigkeit, den Status an unsere neue URL oder an die Komponente, die rendert, weiterzugeben . Wenn wir zum Browser gehen und dann zurück zu unserem Home-Bereich gehen, wenn wir auf eine Platine klicken, die Sie sehen möchten, wäre es eine gute Idee, die Daten auch an die Ballkomponenten zu übergeben, wie zum Beispiel den Ball Titel und auch den Hintergrund- -Farbe. Oben in der Board-Vorschau, können wir Status hinzufügen oder Daten direkt nach dem Pfadnamen hinzufügen. Wir können auch ein Zustandsobjekt einrichten und hier drinnen können wir unsere Vorstandsinformationen weitergeben. Zuallererst werde ich den Titel übergeben. Diese Ballvorschau hat Zugriff auf alle Board-Informationen , die von den Home-Komponenten übergeben werden. Werfen wir einen Blick. Diese Board-Vorschau erhält dann das Board als Requisite. Daher können wir mit diesem Top-Requisiten, dem Brett, darauf zugreifen. Wir können auf den Titel zugreifen. Wir können den Hintergrund auch genau auf die gleiche Weise weitergeben. Dies wird diese Top-Requisiten sein, der Vorstand, der Hintergrund. Wir können dies im Browser ausprobieren, speichern Sie diese Datei, und dann gehen Sie zurück zu unserem Board Previews, klicken Sie auf eine dieser, dann können wir eine React Entwickler-Tools verwenden. Wir können nach der Platine suchen, die die aktuellen Komponenten ist. Wählen Sie diese und jetzt innerhalb der Requisiten, können wir auch diese Standortstütze verwenden, die über den Router weitergegeben wird. Wenn wir das öffnen, haben wir jetzt ein Staatsobjekt, das hier drin lebt. Lassen Sie uns das unten fallen und haben nun den Hintergrund und auch den Titel für dieses Board zur Verfügung. Der Titel ist Board war natürlich Ideen. Also lassen Sie uns zurück und überprüfen Sie auch die Ideen des Hauses. Überprüfen Sie die Tafel, Lage , Staaten, und jetzt haben die Ideen des Hauses sind Titel und auch die Hintergrundfarbe. Jetzt wissen wir, wo sich unsere Daten in diesen Komponenten befinden. Wir können es jetzt im Vorstand verwenden. Lassen Sie uns zu den board.js Komponenten gehen. Zuerst können wir die Hintergrundfarbe des Boards einstellen. Wir können dies dem öffnenden div innerhalb unserer zufälligen Anstrengung hinzufügen. Also lassen Sie uns dies zu einer neuen Zeile hinzufügen. Wir können zuerst einen Klassennamen hinzufügen und diesen mit dem CSS verknüpfen, es wird Board-Wrapper sein. Dann ist es genau wie bei der Board-Vorschau, können wir auch unsere Stile einrichten, die die Hintergrundfarbe mit Kamel-Fall einstellen wird, die wir von diesen Top-Requisiten, den Ort, den Zustand, die -Hintergrund. Stellen Sie sicher, dass es richtig geschrieben ist. Bevor wir noch weiter gehen und den Titel hinzufügen, können wir jetzt sehen, dass das Blau im Browser erschienen ist. Wir können zurückgehen und uns die Ideen des gelben Kurses ansehen. Das gleiche tun wir auch für die Gartenideen. Übergeben der Hintergrundfarbe an unsere Tafel. darunter können wir auch einen Boardtitel hinzufügen und auch einen Button löschen, den Sie später verwenden können. Unter unserem div für den Board-Wrapper haben wir das div mit dem Klassennamen von Listen Wrapper. Lasst uns darüber hinausgehen. Wir können ein neues div einrichten, das für den Board-Header sein wird. Fügen Sie also unseren Klassennamen oder Bindestrich Header hinzu. Hier drinnen fügen wir eine Überschrift der Ebene drei hinzu, die für den Titel sein wird. Wir können den Titel des Brettes mit Liste der Requisiten greifen,. -Speicherort, .states und dann den Titel. Kurz danach fügen wir auch eine Schaltfläche hinzu, die später im Kurs verwendet wird, um das Board zu löschen. Wir werden hier noch keine Click-Handler hinzufügen. Stattdessen beginnen wir einfach mit dem Text des Löschplatzes. Jetzt können wir dies speichern und zum Browser gehen. Wir haben unseren Löschbrett Button in der Ecke und auch unseren Board-Titel. A [unhörbar] wir haben Kursideen und auch die Ideen des Hauses zu. Nun wurde unsere Hintergrundfarbe und auch unser Boardtitel über das State-Objekt über den React-Router an diese Board-Komponenten weitergegeben . Dies ist auf unserer Arbeit in, also werde ich Sie jetzt im nächsten Abschnitt sehen, wo wir mit Firebase arbeiten werden. 21. Firebase einrichten: Für dieses Projekt werden wir Firebase als Back-End verwenden. Auf diese Weise können wir eine Datenbank hinzufügen, um alle unsere Pinnwände, Listen und Karten zu speichern. Außerdem können wir nur die Karten, die Liste und die Karten zurückbekommen, die wir für den aktuell angemeldeten Benutzer benötigen. Wir können sie nach dem Erstellungsdatum sortieren. Es wird uns Echtzeit-Updates geben, wenn sich Daten ändern, und vieles mehr. Außerdem können wir Firebase für die Benutzerauthentifizierung, Anmeldung und Anmeldung verwenden. Eine weitere große Funktion von Firebase ist, dass es nicht nur für Webprojekte, sondern auch für iOS und Android verwendet werden kann , so dass wir die gleichen Daten über mehrere Apps teilen können. Wir können auf firebase.google.com loslegen. Sie müssen sich mit einem Google-Konto registrieren, wenn Sie dies noch nicht verwendet haben. Wenn Sie fortfahren und sich jetzt anmelden müssen. Ich bin momentan angemeldet, also klicke ich einfach auf „Gehe zur Konsole“. Bevor wir jedoch weiter gehen, scheint Firebase sein Website-Layout und Design ziemlich regelmäßig zu ändern, aber die Schritte sind normalerweise ähnlich. Wenn es ein wenig anders aussieht, wenn Sie besuchen, sollten Sie trotzdem in der Lage sein, Dinge zu erarbeiten, da es nur ein paar Schritte zu unternehmen gibt. Das erste, was wir tun müssen, ist ein Projekt zu erstellen, indem Sie auf „Projekt hinzufügen“ klicken. Ich habe bereits ein Projekt namens React Trello, also werde ich stattdessen dieses React Trello 2 nennen. Wir müssen auch die Allgemeinen Geschäftsbedingungen akzeptieren, bevor wir unser Projekt erstellen können. Dann geben Sie uns ein paar Momente zu schaffen. Wir werden die neueste Firebase-Datenbank verwenden, die Cloud Firestore genannt wird, die uns unsere Echtzeit-Funktionalität bietet. Echtzeit bedeutet, dass unsere App mit Änderungen aktualisiert werden kann, sobald sie geschehen, und unsere Daten können auf verschiedenen Geräten synchron gehalten werden, anstatt nach jeder Änderung eine neue Anfrage zu stellen. Sobald dies erledigt ist, können wir auf „Weiter“ klicken und dann werden wir auf die Homepage für unser Projekt weitergeleitet. Wir müssen jetzt auf die Cloud Firestore klicken, die wir erhalten können, wenn Sie auf diesen Cloud Firestore Abschnitt nur hier klicken. Oder wir können auf die „Datenbank“ aus dem Menü klicken. Senden Sie die Dinge ist ziemlich einfach, wir klicken Sie einfach auf „Erstellen Sie eine Datenbank“. Wir werden im Testmodus starten, nur für den Moment, was bedeutet, und das ist alles, was Benutzer lesen und in unsere Datenbank schreiben können. Aber wir werden später Sicherheitsregeln hinzufügen. Klicken Sie auf „Weiter“. Wir können dann unsere Region auswählen, die uns am nächsten ist. Wählen Sie eine dieser Optionen aus und klicken Sie dann auf „Fertig“. Dies ist unsere Datenbank-Homepage, und hier werden unsere Daten angezeigt, sobald wir sie auf Firebase übertragen. Wir können auch manuell Sammlungen hinzufügen, um diesen Link verwenden Sie hier. Eine Sammlung ist eine Gruppe von Daten, die unsere Tafeln, unsere Listen und unsere Karten sein werden . Dann fügen Sie diese Datenbank zu unserem Projekt hinzu. Wir müssen zuerst unsere Firebase-Einstellungen abrufen. Wir können dies in der Seitenleiste tun und dann auf „Projektübersicht“ klicken. Wir werden die Web-Version verwenden, also klicken Sie auf diese. Wir müssen unserer Bewerbung einen Spitznamen geben. Ich möchte das auch „React Trello 2“ nennen. Dann registrieren Sie unsere App. Dies gibt uns Zugriff auf unsere Konfigurationseinstellungen, die wir brauchen, um sie zu unserem Projekt hinzuzufügen. Wir müssen alle Einstellungen aus dem Konfigurationsobjekt kopieren. Grundsätzlich alles in diesen geschweiften Klammern. Kopieren Sie alle diese Codezeilen. Dann können wir diese auf Visual Studio-Code übernehmen. Lassen Sie uns eine neue Datei erstellen. Öffnen Sie die Seitenleiste innerhalb der Quelldatei, neue Datei. Dies wird Firebase.js genannt. Der nächste Schritt besteht darin, Firebase von NPM zu installieren. Gehen Sie zum Terminal, drücken Sie Befehl oder Control C, wenn Sie den Server schließen müssen, dann können Sie einen Befehl namens NPM ausführen, ich für die Installation, und dann wird das Paket einfach Firebase genannt. Wenn wir nun in unsere Datei Firebase.js zurückgehen, können wir nun einen Import durchführen, unser Firebase-Paket einziehen und es in einer Variablen speichern. Importieren Sie diese aus den Knotenmodulen. Dieses Paket wird als Firebase bezeichnet. Dann werden wir einen Schrägstrich nach oben machen. Vorwärtsschrägstrich oben ist der Kern-Firebase-Client , der bei Verwendung von Firebase erforderlich ist. Der nächste Schritt besteht darin, auch das firestore-Paket zu importieren. Wir müssen dies nicht in einer Variablen speichern, also können wir einfach einen Import durchführen, ohne dies nach Namen zu installieren, so dass wir das Firebase-Paket importieren können, dann einen Schrägstrich Firestore. Dadurch wird die firestore Funktionalität in unseren Projekten zur Verfügung gestellt. Wir werden als nächstes eine Konstante namens config erstellen. Config wird alle Optionen enthalten, die wir gerade von Firebase kopiert haben. Wir können die hier hineinkleben. Schließen wir die Seitenleiste, damit wir etwas mehr Platz haben. Es sieht so aus, als hätte ich das Ende von Trello verpasst, aber es spielt keine Rolle. Lassen Sie uns nach unten gehen und jetzt unsere App initialisieren. Wir können dies tun, indem wir unsere Firebase-Variable auswählen, die wir oben importiert haben. Dann können wir eine Methode namens initialize App tun, dann werden wir unser Konfigurationsobjekt ohne Einstellungen von Firebase übergeben. Mit dieser Konfiguration jetzt erledigt, werde ich jetzt drei Konstanten einrichten, auf unsere Datenbanksammlungen verweisen die Boards, Listen und Karten sein werden. Dies ist nur im Grunde eine Verknüpfung, die wir während unseres gesamten Projekts verwenden werden, anstatt eine Menge anstatt eine Mengesich wiederholenden Code zu haben, der auf den Speicherort in unserer Datenbank verweist. Zuallererst werden wir eine Konstante namens db erstellen. Es wird gleich Firebase.FiRestore sein. Auch dies ist eine Abkürzung. Dies ist ein Zeiger auf unsere Firebase-Datenbank, und jetzt können wir einfach db anstelle von Firebase.FiRestore eingeben. Darunter werden wir jetzt einen Verweis auf jede Sammlung erstellen, die wir brauchen, dies ermöglicht es uns, auf diese neuen Projekt zugreifen, um Daten zu speichern und abzurufen, nur mit dem Variablennamen. Zunächst werden wir eine BoardsRef erstellen, und dies wird gleich unserer Datenbank sein, die DB ist, und ich werde auf eine Sammlung zugreifen, die wir noch nicht haben, aber dies wird den Namen von Boards haben. Ich werde das kopieren und in mehr Zeiten einfügen. Der zweite wird ein Verweis auf unsere Listen sein. Der Sammlungsname wird Listen sein. Dann wird der dritte ein Zeiger auf unsere Karten sein. All dies bedeutet jetzt in unserem Projekt, wenn wir ein Board zu Firebase schieben oder ein Board von Firebase abrufen wollen , müssen wir nur das Wort BoardsRef eingeben, anstatt Firebase.Firestore.Collection.Boards eingeben zu müssen. Jetzt können wir diese Referenzen exportieren, so dass wir auf sie in den Dateien zugreifen können. Sie können dies tun, mit einem benannten Export innerhalb der geschweiften Klammern. Wir können unsere BoardsRef, unseren Listenentwurf, und auch die Karten ref zu exportieren . Wir können jetzt diese Datei speichern und testen, dass sie in der app.js funktioniert. Wir können mit unserem BoardsRef beginnen, indem wir dies oben in der Datei importieren. Direkt unter der Klasse können wir einen Import erstellen, wir werden zuerst unsere BoardsRef importieren. Dies ist aus unserer Firebase-Datei, die ein stringoff./ und dann Firebase ist. Dies war ein benannter Export, so dass wir jeden innerhalb dieser geschweiften Klammern importieren können. Wir können dann einen Schnelltest in der ComponentDidMount hinzufügen, um zu überprüfen, dass dies funktioniert. unter unseren festgelegten Zuständen können wir nun auf diese BoardsRef-Variable zugreifen. Wir können dann eine Methode namens dot add aufrufen, die eine Firebase-Methode ist, um neue Daten zu dieser Sammlung hinzuzufügen. Wir werden einfach ein Objekt mit einem Namen und einem Wert von hallo erstellen. Lasst uns das retten. Nun, wenn wir auf unser Projekt gehen und dann neu laden, haben wir einen Fehler von BoardsRef. Schauen wir uns das an. Wir haben den Import, der richtig aussieht, gehen Sie zu Firebase, und das braucht ein S. Zurück zum Projekt. Neu laden, und dies führt jetzt dazu, dass die Komponente in Mountain ausgeführt wird. Wenn wir zu Firebase gehen, und wir können dies schließen, gehen Sie zur Konsole, und in unsere Datenbank. Wir sehen jetzt, dass wir eine Tafelsammlung mit einem einzigen Dokument haben. Dies ist die ID des Dokuments, dann haben wir den Namen Hallo. Einer der Vorteile der Verwendung von Firebase ist, dass wir unsere Kollektionen nicht vorher definieren müssen. Wir können einfach ein neues Objekt oder ein neues Element an Firebase schieben, und es wird auch die notwendigen Sammlungen und Dokumente erstellen. Dies ist nur ein Test, also werde ich das jetzt löschen. Gehen wir in unsere Bretter, löschen Sie die Sammlung. Wir müssen auch den Namen der Tafel eingeben. Wir können dies entfernen, und entfernen Sie dann den Code aus ComponentDidMount innerhalb der app.js. Entfernen Sie diese Codezeile, speichern Sie diese Datei. Das lässt uns jetzt mit Firebase auf unserem Setup. Wir sind gut, jetzt zum nächsten Video zu gehen. 22. Daten in Firebase löschen: Wir haben jetzt fünf Buchten eingerichtet und wir wissen, dass unsere Verbindung jetzt funktioniert. Wir können auf die Erstellung unserer Methoden in reagieren, um dann Daten an Firebase zu übertragen, beginnend in dieser app.js. Hier haben wir bereits eine Methode eingerichtet, um ein neues Board zu erstellen. So können wir nun die Firebase Add-Methode verwenden, um unsere neuen Board-Daten in unsere Datenbank zu übertragen. Beginnen wir innerhalb dieser Methode kurz vor dem Festlegen des Zustands. Wir schaffen eine neue Konstante, die das neue Board genannt wird. Wir wollen dies gleich unserem Board-Graph setzen , den wir oben in der Datei im letzten Video importiert haben, was auf unsere Sammlung von Boards verweist. Wir werden dann die Add-Methode verwenden, um dann ein Objekt zu schieben, das unser Board sein wird, das an diese Methode als Parameter übergeben wird. Firebase-Datensatz erhält automatisch eine ID generiert. Bevor wir unsere neuen Board-Zustände speichern, können wir neue Objekte konstruieren, in denen wir diese ID aufgewachsen sind und sie dann dem Rest des Boards hinzufügen. Lassen Sie uns das tun, knapp über unserem Set-Statusaufruf. Wir können eine Konstante erstellen, die das Board-Objekt genannt wird. Hier möchte ich nur die vorhandenen Board-Daten erfassen und auch eine ID zusammenführen. Also zuerst sagen wir eine ID-Eigenschaft, die unseren neuen Board-Konstanten entspricht, dann ID. Denken Sie daran, dass sich das neue Board auf die Daten bezieht , die von Firebase zurückkehren, wenn wir dieses neue Board hinzufügen. Daher wird es auch die Firebase-ID-Eigenschaft haben. Wir können auch ein Komma hinzufügen und dann diesen Spread-Operator verwenden , um in den Rest der Platine hinzuzufügen. Nun, wenn wir in den Zuständen setzen, wollen wir stattdessen diese neuen Board-Objekte hinzufügen. Als nächstes können wir einige Fehlerbehandlung zu dieser Methode mit async await hinzufügen. Async await ermöglicht es uns, zu warten, bis das Board zuerst in Firebase gespeichert wird , bevor wir mit der nächsten Codezeile fortfahren. Wir möchten sicherstellen, dass das Board zuerst gespeichert wird, da wir auf diese generierte ID zugreifen müssen , bevor wir sie speichern können. Zuallererst können wir diese Funktion so einstellen, dass sie asynchron ist, indem Sie das asynchrone Schlüsselwort hinzufügen. Dies wird uns dann erlauben, warten in unsere Methode hinzuzufügen. Die Daten, die wir wecken und zurückkommen wollen, sind dieses neue Board von Firebase. Wir können dann einige Fehlerbehandlung mit try and catch hinzufügen. Lassen Sie uns zunächst diesen Code innerhalb eines try-Blocks ausführen. Öffne die geschweiften Klammern. Wenn ich das abschließen werde, kurz nachdem wir den Staat festgelegt haben. Fügen Sie am Ende eine zusätzliche geschweifte Klammer hinzu. Wenn Sie es nicht gewohnt sind, zu versuchen, vor dem Try Abschnitt zu fangen , ist der Code, den wir zuerst versuchen müssen, auszuführen. Wenn der Code, der ausgeführt wird, erfolgreich ist, ist alles gut. Wenn beim Ausführen dieses Codes im try-Block ein Fehler auftritt, können wir diesen Fehler dann mit einem catch-Block abfangen. Kurz nach dieser geschweiften Klammer können wir auch einen catch-Block hinzufügen , der den Fehler als Variable annehmen wird. Öffnen und schließen Sie die geschweiften Klammern. Wir können dann einen Konsolenfehler machen , den Sie eine Reihe von Fehlern beim Erstellen neuer Platine und eines Doppelpunkts ausgeben werden. Danach können wir auch ein Komma hinzufügen. Dann können wir auch diesen Fehler anzeigen, der übergeben wird, um zu fangen, dies zu speichern. Dann können wir zu unseren Brettern gehen und das können wir ausprobieren. Ab zum Browser in unsere Projekte. Wir haben hier noch einen Balkendiagramm. Gehen wir in die Bretter. Es ist jetzt vorbei zu einem Hause Komponenten. Nun, wir müssen einen Benutzer hinzufügen, lassen Sie uns für 1, 2, 3 gehen und dann Schrägstrich vorwärts. Lassen Sie uns dies ausprobieren, indem Sie ein neues Element in Firebase schieben. Lassen Sie uns für ein Testboard eine Farbe grün gehen, dann ein neues Board erstellen. Dieses Board wird dann sofort hinzugefügt, da es es es zum Zustand gebracht hat. Wie wir bereits wissen, wird state eine Aktualisierung in allen Komponenten auslösen, die Daten verwenden. Wenn wir dies jetzt aktualisieren, die Daten verloren, da wir diese Karten von Staaten und nicht von Firebase erhalten. Nun, wir können zur Firebase-Konsole gehen und überprüfen, dass dies gespeichert wurde. Laden Sie die Konsole neu. Unser Testboard ist jetzt hier drin gespeichert. Wie bereits erwähnt, fügt Firebase eine eindeutige ID hinzu. Gehen wir zu den Entwicklertools. Wir können auch überprüfen, ob dies zu unserem Staat hinzugefügt wird. Das ist unser Test zwei. Erstellen Sie eine neue Platine. Sie können jetzt sehen, wie Status aktualisiert wurde, um vier Elemente in das Array aufzunehmen. Klicken Sie darauf, wenn wir auf die letzte klicken, sehen wir jetzt diese eindeutige ID wurde zu unserem Objekt hinzugefügt. Dies sollte die gleiche ID sein, die in der Firebase bereitgestellt wird, wenn neu geladen wird. Klicken Sie dann darauf. Dies ist unser Test zwei mit der gleichen ID, die wir jetzt im Zustand haben. Lassen Sie uns jetzt dasselbe über in der board.js machen. Wir können unsere neuen Listen auf Firebase 2 übertragen. Gehen Sie zu unseren Ballkomponenten. Dann müssen wir nach einer Methode suchen, die neue Liste erstellen genannt wird. Das ist es, was wir gerade hier brauchen. Das erste, was ich tun werde, ist, diese Funktion als Waschbecken zu markieren, damit wir eine Wartezeit verwenden können. Dann können wir einige Fehlerbehandlung hinzufügen, indem wir einen try-Block hinzufügen. Öffnen und schließen Sie die geschweiften Klammern. Wir können dann diese geschweifte Klammer entfernen und sie dann am Ende hinzufügen. Kurz nachdem wir unsere Ref auf eine leere Zeichenfolge zurückgesetzt haben, können Sie dies in hinzufügen. Fügen Sie einen catch-Block hinzu, der einen Fehler übergibt. Öffnen und schließen Sie die geschweiften Klammern. Dann können wir einen Konsolenfehler mit der Zeichenfolge übergeben, was Fehler beim Erstellen einer neuen Liste sein wird. Übergeben des Fehlers. diese Fehlerbehandlung nun erledigt ist, müssen wir nun einige Änderungen an unserem Listenziel vornehmen. Scrollen wir nach oben. Hier haben wir ein Listenobjekt, das wir zuvor erstellt haben. Der erste Schritt besteht darin, diese ID jetzt zu entfernen. Da werden wir dies über Firebase hinzufügen. Wir können auch diese Karten Array entfernen, da Sie diese Daten nicht mehr benötigen. Lassen Sie uns das entfernen. Wir werden Identitätskarten als separate Sammlung innerhalb einer Firebase und sie dann über die IDs miteinander verknüpfen. Jetzt sollten wir einfach mit dem Titel, dem Brett und auch der geschaffenen Kunst bleiben . Diese Liste muss auch mit der Farbtafel verknüpft werden, so dass wir die Board-Eigenschaft ändern können, um dies zu tun, anstatt einen hartcodierten Wert zu haben. Wir können jetzt dies zu diesem Punkt Requisiten dot match dot params dot boardID sein. Wenn wir zu unserem Board gehen, denken Sie daran, dies sind die Daten, die wir vom React-Router weitergegeben werden. Wir können dies in den Entwicklertools sehen. Wenn wir auf eines dieser klicken, wählen Sie das Brett, dann haben wir die Requisiten über den Router übergeben, in einem Spiel Punkt params. Wir haben diese BoardID. Daher werden Sie die Karte, die mit dem aktuellen Board erstellt wurde verknüpfen . Dies ermöglicht es uns später im Kurs, dann alle Listen von Firebase für das aktuelle Board, das wir gerade betrachten, einzuziehen . Darunter haben wir eine Aussage. Wir können auch sicherstellen, dass die BoardID auch vorhanden ist, bevor wir diese in Firebase speichern. Sie können auch eine Liste hinzufügen, ein Teil, weil wir keine Liste speichern möchten, die keine Beziehung zu einer Platine hat. Jetzt, anstatt diese Liste in Zuständen zu speichern, werden wir diese jetzt auf Firebase übertragen. Da wir uns jetzt mit den Listen beschäftigen, anstatt Boards, müssen wir die Listenreferenz aus der o5-basierten Datei importieren. Wir können dies tun, indem wir die Listen ref importieren, aus unserer Firebase-Datei, die in Punkt-Punkt Schrägstrich dann den Dateinamen von Firebase befindet. Dann können wir unsere neue Liste zu Firebase hinzufügen, anstatt die gesetzten Zustände zu verwenden, dass Sie diese Zeile verschieben. Stattdessen können wir eine Gewichtung in Mark Dysfunktion als asynchron hinzufügen. Wir können auf unsere Listen Entwurf zugreifen. Wir können dann die Add-Methode verwenden, um ein neues Objekt hinzuzufügen. Dieses neue Objekt ist die Liste mit oben zurückgezogen. Jetzt speichern wir das und wir können dies im Browser testen, stellen Sie sicher, dass Sie innerhalb eines der Boards. Dann können wir jetzt gehen und eine neue Liste erstellen. Klicken Sie auf diese, also Kursliste 1 und fügen Sie auch Kursliste 2 über die Firebase-Konsole. Nach dem Neuladen, sehen Sie jetzt unsere Listen Objekte oder unsere Listensammlung wurde jetzt erstellt. Wir haben unsere beiden Listen. Die erste ist mit Bord 1.000 verbunden, ebenso wie die zweite. Wir können innerhalb unserer Projekte in der URL sehen, dass dies die BoardID ist. Lassen Sie uns einfach gehen zu Haus Ideen und andere eine neue Liste 2. Hausliste 1, wir werden das in der Konsole überprüfen. Stellen Sie sicher, dass dies die ID 2.000 hat. Da gehst du. Das letzte, was wir in diesem Video tun müssen, ist, eine neue Karte zu erstellen. Neue Karten werden in den Komponenten der übergeordneten Liste erstellt. Dies folgt einem ähnlichen Muster wie das, was wir gerade getan haben. Es sollte keine Überraschungen geben. Über zu den Listenpunkt-Layern. Wir können zuerst die Create new card Methode async zu sein. Sie können dann unseren Code in den try-Block einbinden. Nehmen Sie die schließende Klammer ab, und dann können wir das unten hinzufügen. Ihre Sachen über das Konsolenprotokoll, fügen Sie auch im catch-Abschnitt hinzu , den Sie in allen erstellten Fehlern nehmen werden. Es erzeugt einen Konsolenpunkt-Fehler mit der Zeichenfolge Fehler beim Erstellen neuer Karte, am Doppelpunkt und dann in unserem Fehler übergeben. Die einzige Änderung an unserer Karte ist die Einstellung der Listennummer. Wir können dies aus den Listenaufforderungen greifen, die weitergegeben werden, anstatt einen hartcodierten Wert von abc 1,2,3 zu haben, greifen wir diese von unseren Requisiten, die Sie über die Listenpunkt-ID gesetzt haben. Hier erstellen wir eine neue Karte. Außerdem erstellen wir einen Verweis auf die Liste, zu der sie gehört. Wenn wir zu den Listenkomponenten in unseren Projekten und den reaktiven Werkzeugen gehen, suchen Sie nach einer beliebigen Liste. Wir können dann diese Liste sehen, die als Requisiten übergeben wird. Hier greifen wir die Listen-ID, die 100 in diesem Fall ist, die zweite hat eine Listen-ID von 300 und so weiter. Der nächste Schritt ist, unsere Karten ref, aus unserer Firebase-Datei zu importieren . Innerhalb der geschweiften Klammern. Schnappen Sie sich das Diagramm der Karte. Der Dateipfad ist auch Punkt-Punkt-Schrägstrich Firebase. Genau wie wir es mit der Liste vorher getan haben, können wir auch zu den if-Anweisungen gehen, bevor Sie dies zum Zustand bringen. Dann können wir auch am Ende eine zweite Spur hinzufügen, die auch überprüfen wird, ob die Karte Punkt-Listen-ID vorhanden ist. Da dies vor dem Speichern in Status oder in Firebase erforderlich ist. Der nächste Schritt besteht darin, auch diese Set-Status-Methode zu entfernen. Stattdessen werden wir warten Karten ref dot hinzufügen. Wir fügen dies zu Firebase hinzu, das Objekt, das wir hinzufügen möchten, ist diese Karte, die wir gerade oben konstruiert haben. Parsing einer Karte, speichern Sie diese Datei und dann können wir dies im Browser testen. Wir können dies testen, indem wir eine neue Karte in mehrere Listen hinzufügen. Sagen wir Hauskarte eins, Hauskarte zwei. Dies ist für die Reise-Ideen. Reisekarte eins. Dies ist Karte eins, leiten Sie an Firebase weiter und aktualisieren Sie dann die Konsole. Das sind die Karten. Dieser erste ist mit der Liste 200 verbunden. Die zweite ist 100s und auch 300s. Alles funktioniert gut. Wir haben auch den richtigen Text für jeden. Wir haben ein erstelltes Update, das mit JavaScript generiert wurde. Wir haben noch keine Etiketten, aber wir werden später im Kurs darauf zurückkommen. Jetzt haben Sie die Firebase-Daten, mit denen Sie arbeiten können. Im nächsten Video werden wir die Beispieldaten aus unseren Projekten entfernen und stattdessen die Daten aus Firebase lesen. 23. Daten von Firebase lesen: Die Beispieldaten, die wir früher importiert haben, werden in unserem Projekt nicht mehr benötigt. So können wir jetzt beginnen, es zu entfernen und aus unserer Datenbank zu arbeiten. Wir können dies über in der app.js tun. Zuallererst können wir den Import entfernen, also Daten importieren, lassen Sie uns diese Zeile entfernen und dann unten unten, haben wir eine Komponente mountet, die den Zustand mit diesen Beispieldaten setzt. Lassen Sie uns auch diese Zeile entfernen. Anstelle dessen werde ich eine Methode erstellen, die unsere Boards von Firebase bekommen wird , aber nur, wenn wir sie tatsächlich brauchen. Direkt unter dieser Komponente montiert wurde, wollen wir eine neue Methode namens get boards erstellen. Dies wird eine asynchrone Funktion sein, die die Benutzer-ID aufnehmen wird, die an sie übergeben wird. Anstelle unserer Pfeilfunktion, erstellen Sie einen Try Abschnitt und auch einen Haken , der den Fehler annimmt, dass Sie immer noch ein Konsolenprotokoll mit der Fehlermeldung sind, dass der Bereich Boards bekommt und auch die Fehlermeldung nur danach. Das erste, was wir tun wollen, wenn wir auf die neuen Boards von Firebase zu bekommen, ist, den Zustand so zu setzen, dass er leer ist. Also innerhalb des try-Blocks können wir mit this.set-Status tun und dann im Inneren können wir unsere Zustandsobjekte hinzufügen, die die Boards auf ein leeres Array setzen. Dadurch wird nur sichergestellt, dass alle vorherigen Boards und Zustände entfernt werden, bevor Sie einen neuen Aufruf an Firebase tätigen. Oben oben haben wir bereits unsere Board-Referenz aus Firebase importiert. So können wir dies jetzt verwenden, um den Inhalt der Board-Sammlung zu erhalten , und wir können dies tun, indem wir die get-Methode aufrufen. Also direkt unter dem festgelegten Zustand, können wir beginnen, Konstanten mit dem Namen der Boards zu gehorchen und dann können wir unsere Daten zurückwarten , indem wir unsere Board-Referenz greifen und dann die.get-Methode aufrufen. Dadurch erhalten Sie den Inhalt unserer Board-Sammlung nur einmal. Es wird nicht auf Änderungen hören, aber wir werden uns später im Kurs ansehen, wie dies zu tun ist. Die Konstanten des Boards, die wir gerade hier haben, halten alle unsere Boards, was bedeutet, dass Sie sie dann durchlaufen können, jede bekommen und diese dann in unserem Zustand speichern können. Firebase ermöglicht es uns, dies zu tun, indem wir für jede Methode ein verwenden , und wir können dies direkt unter dieser Zeile tun. Wir können unsere Board-Konstanten auswählen, wir können für jeden durchlaufen. Hier drinnen werden wir jedes Element innerhalb unserer Boards in eine Variable namens Board speichern . Innerhalb dieses Funktionskörpers können wir mit einem Konsolenprotokoll beginnen und dann den Wert unseres Boards laden. Bevor wir diesen Zustand speichern, wir ein Konsolenprotokoll erstellen, da es ein wenig verwirrend sein kann, ohne zu sehen, was von Firebase zurückkommt. Um dies auszuführen, können wir diese Methode vorübergehend hinzufügen oben, wenn die Komponente mountet. Also hier drinnen können wir es mit this.get Boards nennen. Okay. Sobald dies getan ist, können wir das Terminal öffnen, stellen Sie sicher, dass der Server mit einem NPM-Start gestartet hat. Lasst uns das loslegen. Wir können dann zum Projekt gehen und dann, wenn wir mit der rechten Maustaste klicken und dann inspizieren, öffnen Sie dies in der Konsole und lassen Sie uns eine Aktualisierung machen. In der Konsole sehen wir einen Abfragedokument-Snapshot , der eine Momentaufnahme des Dokuments ist, das wir aus Firebase zu diesem bestimmten Zeitpunkt lesen. Wenn wir das öffnen, enthält es die Board-ID, die Sie hier sehen können. Wir müssen das greifen, aber wenn wir nur die tatsächlichen Dokumentdaten wollen, anstatt all diese Metadaten, anstatt all diese Metadaten, die wir hier zusammen mit den Firebase-Referenzen sehen, können wir unser Konsolenprotokoll ändern, um die Datenmethode aufzurufen, , die alle Felder als Objekt extrahiert. Also unten in unserem Konsolenprotokoll können wir auch die.data Methode an den Enden hinzufügen. Fügen Sie auch die Klammern hinzu, um dies als Methode aufzurufen. Wir sehen jetzt unsere vier Board-Objekte. Wir können das aufmachen. Wir können das Board öffnen und jetzt sehen wir die Eigenschaften von Hintergrund erstellt Titel und auch der Benutzer. Diese wird in einem Board-Objekt gespeichert, das Sie gerade hier mit den Kalibraten sehen können. So können wir einen Drilldown durchführen, indem wir am Ende unseres Konsolenprotokolls hinzufügen.board hinzufügen. Lassen Sie uns hin und wieder am Ende der Daten gehen, können wir hinzufügen.board, um auf die einzelnen Objekte zuzugreifen, neu zu laden und dann nehmen wir sie direkt in unser Objekt. Das sind die genauen Daten, die wir brauchen. Das einzige fehlende Feld ist die ID, die wir bereits erwähnt haben, aber wir können diese direkt vom Board greifen. Jetzt können wir diese Daten innerhalb einer Konstante von in der app.js speichern. Also, anstatt dieses Konsolenprotokoll, können wir jetzt entfernen, wir können gehorchen Konstante genannt Daten, die gleich board.data.board sein wird, was wir im Konsolenprotokoll gesehen haben, und dann können wir ein neues Board erstellen -Objekt. Nehmen wir diese Platinendaten und mischen sie dann mit der fehlenden ID. In der nächsten Zeile erstellen wir eine zweite Konstante, die für die Board-Objekte gilt. Richten Sie unsere Objekte ein. Zuallererst können wir die ID einmischen. Wir können das direkt von Board.id greifen, dann können wir uns mit den drei Punkten verbreiten. Die Daten, die diese Konstante von knapp oben ist. Kurz nach diesem Objekt können wir nun den Zustand mit this.set-Status setzen. Hier drinnen werden wir das Board-Objekt anvisieren. Wir werden dies auf ein Array setzen, also werden wir eine Kopie des bestehenden Status nehmen, mit this.state, .boards, getrennt durch ein Komma, können wir dann in unser neues Board-Objekt hinzufügen, speichern Sie diese Datei und dann können wir testen dies über im Browser. Das ist ein guter Anfang. Wir sehen, dass das Brett von der Feuerbasis abgezogen wird. Fügen wir ein neues Objekt oder ein neues Board-Objekt hinzu. Gehen wir zu den React Developer Tools, suchen Sie nach unserer Home-Komponente. Wir haben unsere Boards als Requisiten, werden das Array mit unseren vier neuen Boards sehen. Lassen Sie uns versuchen, einen weiteren hinzuzufügen. Lassen Sie uns vorwärts gehen, um die Farbe von Orange zu machen, neue Boards zu erstellen und jetzt habe ich ein zusätzliches Objekt in unseren Zustand geschoben , und das ist auf die gleiche Weise wie der ganze Rest aufgebaut. Wir haben die ID mit allen restlichen Daten des Boards gemischt. Also derzeit haben wir diesen Aufruf hinzugefügt, um unser Board von Firebase innerhalb der Komponente zu bekommen hat mountet. Wir wollen diese Boards nur dann greifen, wenn die Home-Komponente geladen wird, anstatt die eigentliche App, da sie hier angezeigt werden. Alles, was wir dafür tun müssen, ist, die Komponente eingehängt Code auf die Home-Komponenten zu verschieben . Lassen Sie uns schneiden die Komponente montiert Abschnitt. Wir brauchen das nicht mehr und dann können wir zu unseren Home-Komponenten gehen und dann können wir das direkt oben einfügen, direkt über unserer zufälligen Methode. Da wir nun auf diese get board Methode zugreifen, die in der app.js ist, müssen wir dies nun als Requisite übergeben. Scrollen wir nach unten zu unserem Router und dann innerhalb des Home-Link , der gerade hier ist, können wir auch eine Requisite namens get boards hinzufügen, die gleich unserer Methode dieser.get Boards sein wird, speichern Sie diese Datei und jetzt über unsere Komponente in unserer home.js gemountet hat, müssen wir nun über Requisiten darauf zugreifen. Das ist also this.props.board und dann fügen Sie dies zu unserer Requisite Validierung unten unten hinzu. Get Boards wird unsere Requisitentypen sein und dies ist eine Funktion, die auch erforderlich ist, um entweder am Ende zu kommen. Dann können wir das jetzt speichern und zum Browser gehen. Im Inneren werden die Boards immer noch im Browser angezeigt, aber sie werden jetzt nur geladen, wenn wir diese ganzen Komponenten betrachten. Wenn wir fortfahren und auf eines dieser klicken, sehen wir immer noch unsere Beispieldaten im Inneren, und wir werden dies im nächsten Video beheben. Als wir zuvor den Link zu diesem Board erstellt haben, haben wir diese Board-ID auch über die URL-Parameter übergeben. Wir können nun diese Board-ID verwenden, um die aktuell geladenen Balkendetails aus Firebase zu holen, anstatt aus unseren Beispieldaten. Dies wird in lokalen Zustand gespeichert, dh innerhalb dieser Komponenten, und wird verwendet, um den Ball Titel und auch die Hintergrundfarbe angezeigt werden, anstatt die Beispieldaten, die wir jetzt sehen. Lassen Sie uns dies jetzt tun, ist dies die Board-Komponenten gehen über die board.layers. Oben an der Spitze wurden in der Liste Ref importiert. Also müssen wir auch den Verweis auf die Kammer 2 erden. Wir werden das aktuelle Board laden, damit wir diesen Zustand auch hinzufügen können. Das ist also das aktuelle Board. Wir können dies zunächst als leeres Objekt einrichten. Dann jetzt unten können wir auch eine benutzerdefinierte Methode direkt unter Komponente eingebaut wurde, die unser aktuelles Board von Firebase erhalten wird. Rufen Sie diese Methode auf. Das get Board wird eine Synchronisierung sein, und es wird auch in die Board-ID nehmen. Also bekommen wir diese Einzelplatine nur von Firebase. Wir können unsere Methode in einem Testabschnitt einrichten. Auch ein Fangabschnitt, unter dem der Fehler aufgenommen wird. Dies wird ein Konsolenprotokoll mit der Fehlermeldung senden, Boards erhalten und auch den Fehler übergeben. Also das erste, was in der versuchen Abschnitt hier oben zu tun ist, eine Konstante zu schaffen, die unser einzelnes Board speichern wird. Wir können diese Informationen von Firebase abwarten. Dies ist in den Brettern Ref. Wir wollen die Dokumentreferenz verwenden, die die Single-Board-ID sein wird, die übergeben wird, wenn wir es nennen. Wir übergeben das hier. Dann können wir die.get-Methode aufrufen, um alle Inhalte von unserem Board zu holen. Sobald wir unseren Vorstand haben, können wir jetzt sagen, dass dies Staat ist. Mit diesem eingestellten Zustand ist der Zustand, den Sie aktualisieren möchten, dieses aktuelle Board, das Sie gerade hier haben. Set ist gleich dem Wert unserer Konstanten, und es muss auch Board Ref sein. Also machen Sie diese Änderung. Also wollen wir den Zustand nicht so einstellen. Ich werde sicherstellen, dass das Bretter zu knapp über der Spitze sind. Also, momentan setzen wir in diesem Board-Objekt in den Zustand, aber wir wollen es nicht tun, wie wir hier sehen. Denken Sie daran, früher, als wir alle Bretter in der app.js haben. Wenn wir auf die Gap Boards Methode gehen, wenn wir ein Konsolenprotokoll hinzugefügt haben, sehen wir, dass wir einen Abfrage-Snapshot erhalten haben. Dies ist das gleiche hier, so dass es auf die Board-Objekte zugreifen kann, in genau der gleichen Weise wie dies durch Doppelpunkt benötigen Punktdatenmethode und dann auf das Board-Objekt zugreifen kann. Also lasst uns das jetzt machen. Wir haben bereits dieses Board können wir aufrufen.data und dann auf das Board-Objekt einfach so zugreifen. Diese Boarddaten müssen sofort verfügbar sein. So können wir es von Komponente nennen hat mountet die aktuelle Board-ID übergeben. Lassen Sie uns innerhalb der Komponente scrollen hat mountet. Wir können jetzt Get Board hier anrufen, indem wir this.get Board verwenden. Dann müssen wir die ID übergeben, die innerhalb dieser Methode empfangen wird. Um also die aktuelle ID zu erfassen, wissen wir, dass dies innerhalb der URL-Parameter gespeichert ist. Was Sie hier oben sehen können, und wir wissen bereits, wie man auf die Router-Parameter zugreift. Wir können dies mit this.props tun, der Requisite Name der Übereinstimmung, die vom Router stammt. Wir werden auf die Parameter zugreifen, und dann auf den Parameternamen, in diesem Fall die Board-ID genannt wird. Speichern Sie diese Datei und jetzt auf die Tafel innerhalb des Browsers. Sobald diese Platinenkomponente geladen wird, gehen wir zu den reaktiven Werkzeugen und prüfen, ob wir die Daten haben, die wir brauchen. Lassen Sie uns eine Suche nach den Board-Komponenten machen. Wählen Sie dies in dem Zustand, den wir das aktuelle Board haben. Öffnen wir das und jetzt sehen wir alle Daten , die wir brauchen, wie die Hintergrundfarbe und den Titel. So können wir dies jetzt in unserer zufälligen Methode innerhalb des Boards verwenden , um den Titel und auch den Hintergrund zu setzen. Scrollen wir nach unten zur zufälligen Methode. Dann ist das erste, was zu tun ist, die Hintergrundfarbe festzulegen. Anstatt die Router-Requisiten zu verwenden, lassen Sie uns dies entfernen, und dann können wir stattdessen die Daten verwenden, die im Zustand gespeichert ist. Also this.state, .current board. Wir können auf die Hintergrundeigenschaft zugreifen. Direkt unterhalb der Ebene drei Überschrift, können wir this.state dot.current Board zugreifen und dann greifen Sie den Titel. Überprüfen Sie, ob dies im Browser noch funktioniert. Laden Sie an den Board-Komponenten, und wir sehen immer noch den Titel und die Hintergrundfarbe. Wenn wir in jedes dieser Bretter gehen. Damit jetzt funktioniert, können wir zu den Board-Vorschaukomponenten gehen und auch den Zustand entfernen, der vom Router weitergegeben wird. Das wird also nicht mehr benötigt. So können diese Zustandsobjekte entfernen und nur den Pfadnamen für die Umleitung verlassen. Sie sollten immer noch nicht in Ordnung im Browser funktionieren. So haben Sie vielleicht bemerkt, dass dies alles völlig gut funktionierte bevor wir die Hintergrundfarbe und den Titel vom Router übergeben hatten. Sie können sich also fragen, warum sich überhaupt ändert. Der Grund ist für die Aktualisierung der Komponenten. Bevor wir die ID und den Hintergrund an die Platinenkomponente übergeben haben. Dies bedeutete, dass wir, sobald das Board geladen wurde , diese genauen Daten dabei bleiben. Wenn Sie jedoch die Board-Daten von Firebase abrufen und in diesem Zustand speichern, bedeutet dies, dass später, wenn wir die Platine wie den Titel aktualisieren, alle Änderungen dann dynamisch sind und auch die Komponente zwei aktualisieren. So ist es jetzt an Ort und Stelle, lasst uns jetzt zum nächsten Video übergehen. 24. Die Ortschaft und Ordnung Von Methoden: Mit dem, was wir im letzten Video gelernt haben, können wir das jetzt wieder anwenden, um die Listen und Karten von Firebase abzurufen. Wir werden auch einen Blick auf zwei neue Firebase-Methoden werfen. Einer wird OrderBy genannt und es wird unsere Daten sortieren, die wir zurück bekommen werden. Dann erlaubt uns die Where Methode, nur eine Liste oder eine Karte zu erhalten, wenn die BoardID mit dem aktuellen Board übereinstimmt, das wir gerade sehen. Beginnen wir mit den Board-Komponenten von vorn. Die Board.js, können wir an der Spitze starten, indem Sie die SampleData entfernen, wir brauchen diesen Import nicht mehr. Daher können wir auch den SetState-Aufruf entfernen, der dies auf den Zustand anwendet. Wenn wir nun zum Browser gehen, auf der Tafelansicht, ist es keine Überraschung, dass wir keine Listen oder Karten in diesen Komponenten sehen. Lassen Sie uns also unsere SampleData durch eine Methode namens GetLists von in den Board-Komponenten ersetzen. Dies wird unsere Listen von Firebase erhalten, genau wie die GetBoard-Methode unten. Dieser wird GetLists genannt, und dies wird gleich der asynchronen Funktion sein , die auch die BoardID übernehmen wird. Richten Sie die Pfeilfunktion ein, dann können wir hier unseren Versuch und auch unseren catch-Block erstellen. Catch-Block nimmt einen Fehler wie immer, und dann können wir ein Konsolenprotokoll mit der Zeichenfolge Fehlerabruf Listen tun. Dann werde ich danach ein Komma hinzufügen, und dann werde ich auch den Fehler setzen. Also direkt über diesem Abschnitt versuchen, können wir zuerst unsere Konstante erstellen, die unsere Listen halten wird. Wo wir auf unsere Liste warten, die wir aus der ListRef greifen können. Wir könnten jetzt an die Ende.get-Methode anketten, die wir zuvor verwendet haben, aber das würde voran gehen und alle Listen in unserer Datenbank greifen. Stattdessen müssen wir nur die Liste für diese Säulenplatte erhalten. Oben in Firebase, wenn wir zurück zum Browser und dann zur Konsole gehen. Denken Sie daran, als wir eine neue Liste und eine neue Karte erstellt haben, haben wir auch eine ID hinzugefügt. Diese Liste hat zum Beispiel eine BoardID von 1.000 und dann wird diese auf eine einzelne Platine verlinken, auf der sie erstellt wurde. Firebase ermöglicht es uns, dies mit der Where-Methode zu tun. Werfen wir einen Blick darauf, wie wir das tun können. Kurz nach unserer ListRef können wir am Ende die Where Methode verketten. Dann hier drinnen nimmt dies drei Parameter ein. Der erste Parameter, den wir hinzufügen, ist der Feldname. Der Feldname wird gleich der Liste der Pinnwand sein, da wir uns die Listenobjekte anschauen und dann die Board-Eigenschaft auswählen möchten. Drinnen hier als String, können wir in list.board übergeben. Der zweite Parameter ist der Vergleich, hier können wir weniger als, größer als oder gleich verwenden , genau wie wir es mit JavaScript können. Trennen Sie es durch ein Komma. Als String können wir die Double Equals hinzufügen, um diese Board-Referenz mit der BoardID zu vergleichen , die an unsere Funktion als Parameter übergeben wird. Nun wird dies nur unsere Listen aus unserer Sammlung, wo das Boardfeld mit dem aktuell geladenen BoardID übereinstimmt. Diese Liste hat auch ein CreateDat -Feld. Wenn wir einen Blick in die Konsole werfen. Dies ist das Feld CreateDat gerade hier, und dies kann verwendet werden, um unsere Daten nach dem Datum zu bestellen, an dem sie erstellt wurden. Ich habe hier einen Rechtschreibfehler, aber das ist kein Problem, da wir diese löschen und später eine neue Liste erstellen können. Werfen wir einen Blick darauf, wie wir CreateDat innerhalb von hier verwenden können. Alles, was wir tun müssen, ist nur zu wo, das können wir auch bis zum Ende die OrderBy Methode verketten, dann können wir hier als String in unserem Listenobjekt und dann den Feldnamen von CreateDat übergeben. Dadurch wird unsere Liste in aufsteigender Reihenfolge mit dem Feld CreateDat sortiert. Sie können hier auch jedes andere Feld verwenden. Wenn Sie möchten, dass die Reihenfolge umgekehrt wird, können Sie auch ein zweites Argument absteigend hinzufügen, das zu D-E-S-C verkürzt wurde. Aber ich möchte das entfernen und es als Standard behalten. Wir haben Fehler im Terminal, also muss dies BoardID sein, genau wie wir Daten in unsere Funktion gedrückt haben. Dann müssen wir schließlich die.get-Methode aufrufen, um diese Daten endlich zu erhalten. Der Rest sollte ziemlich geradlinig sein, wie es ähnlich ist, was wir bereits verwendet haben. Kurz nach der Get-Methode werden wir unser Listenobjekt aufrufen, genannt.forEach-Methode , so dass wir durch jedes Element im Inneren bewegen können. Wir werden dann jedes Element in der Listenvariablen speichern, und dann führt dies eine Funktion für jeden aus. Zunächst einmal greifen wir unsere Daten, mit const-Daten und ich werde festlegen, ist gleich die Datenmethode aufzulisten , die wir im letzten Video angesehen haben, und wählen Sie dann das Listenobjekt aus. Kurz danach werden wir unsere eigentliche Liste aufbauen, die wir dann zur Feststellung drängen können. Denken Sie daran, als wir dies zu den Boards von in der App.js getan haben, haben wir die Daten in einer Variablen gespeichert, wir haben dann ein Board-Objekt erstellt, wo wir die Daten hatten. Wir mussten auch die ID zusammenführen, die von dieser Datenmethode nicht verfügbar war. Wir machen das gleiche über in der Tafel, wir können unsere Listenobjekte erstellen. Dies wird gleich unserer ID sein, die Sie von list.id abrufen können. Dann verwenden wir den Spread-Operator, um in den Rest der Daten zusammenzuführen. Darunter können wir dann die Zustände mit this.setState setzen. Der Zustand, den wir hinzufügen möchten, ist die CurrentLists. Wir haben dies bereits als leeres Array eingerichtet. Lassen Sie uns das hier drinnen setzen. Wir suchen nach den CurrentLists, sie werden gleich einem Objekt sein, in dem wir uns im aktuellen Zustand mit this.state.CurrentLists durch ein Komma getrennt verteilen . Wir verschmelzen dann in unserem Listenobjekt, das wir gerade erstellt haben. Jetzt greift diese Methode unsere CurrentLists und filtert sie in die Spaltenboard-Ansicht. Der nächste Schritt besteht darin, diese Methode tatsächlich aufzurufen, wenn die Komponente eingehängt wird. Lassen Sie uns dies mit, this.GetLists tun. Denken Sie daran, GetLists wird auch eine BoardID benötigen, die Sie als Argument mit this.props.match übergeben können , um dies aus dem Browser zu erhalten. Wir wollen die Parameter und dann auch die BoardID auswählen. Speichern Sie diese Datei und gehen Sie zum Browser und gehen Sie dann zu unseren Projekten. Wenn wir die Konsole öffnen, sehen wir eine seltsame Warnung. Es sagt uns, dass die Abfrage einen Index erfordert, und dann können wir diesem Link folgen, um dies zu erstellen. Wir können auf diesen Link klicken, die es bietet, und dann wird es gehen über auf die Firebase-Konsole, wo wir einen neuen Index erstellen können. Wir können hier sehen, dass Firebase wird einen Index für diejenigen auf dieser Listensammlung erstellen . Wir können auch sehen, dass die Methoden, die wir soeben hinzugefügt haben, auch auf diese Felder wirksam werden. Wir greifen in der Liste der Boards in aufsteigender Reihenfolge und auch die CreateDat Eigenschaft in aufsteigender Reihenfolge an. Wir können fortfahren und unseren Index erstellen, indem Sie auf diese Schaltfläche klicken. Dies ist erforderlich, da wir jetzt eine komplexere Abfrage durchführen. Denken Sie daran, dass wir die Where-Methode verwenden, um Dokumente nach dem BoardID herauszufiltern , und wir haben sie dann nach den Erstellungsdaten gesucht. Ein Index ist eine Möglichkeit, unsere Daten so zu strukturieren, Firebase eine Schleife erstellt wird, um unsere Daten effizienter zu finden. Dies führt dazu, dass unsere Abfrage viel schneller ausgeführt wird, wird Firebase im Grunde darauf aufmerksam machen, dass wir irgendwann in der Zukunft eine komplexere Abfrage bilden werden, damit Firebase für sie bereit sein kann. Das kann eine Weile dauern, bis es fertig ist. Pausieren Sie das Video und kommen Sie zurück, wenn alles fertig ist. Willkommen zurück. Sobald dieser Index erstellt wurde, jetzt ein guter Zeitpunkt, um alle Listen und Karten, die wir derzeit in der Datenbank haben, zu löschen . Gehen wir rüber, und wir fangen mit den Listen an. Ich werde auf dieses Symbol klicken und die Sammlung löschen. Geben Sie auch den Namen der Listen ein, um dies zu bestätigen, und auch die Karten können wir das gleiche tun. [ Unhörbar] Entfernen Sie das. Dies liegt daran, dass sie mit den BoardIDs aus den Beispieldaten verknüpft sind. Ich verwende die Beispieldaten nicht mehr, deshalb brauchen wir das nicht. Nun, wenn wir zurück zu unserer Anwendung gehen, lassen Sie uns neu laden, und dann können wir einige neue Listen erstellen. Fügen wir Liste 1, List2 hinzu und aktualisieren Sie dann. Wir sehen jetzt einen Fehler, der besagt, dass nicht identifiziertes oder nulliertes Objekt nicht konvertieren kann. Der Grund, warum wir diesen Fehler sehen, der mit this.props.lists.title in den Listenkomponentenzusammenhängt this.props.lists.title in den Listenkomponenten ist, weil wir immer noch versuchen, Karten durchzulaufen, die wir noch nicht haben. Denken Sie daran, früher, als wir unsere Beispieldaten hatten, hatten wir einige Karten als Array innerhalb jeder Liste Objekte hinzugefügt. Wir haben diese Werte nicht mehr, daher können wir diese jetzt aus der List.js entfernen. Alles, was wir tun müssen, ist unsere Schleife auszukommentieren, die hier dieser Abschnitt ist , der eine Kartenkomponente rendert. Über zum Browser und jetzt können wir die beiden Listen sehen, die wir gerade erstellt haben. Lassen Sie uns auch einige Karten erstellen, Karte 1, Karte 2 Wir können diese Liste zwei als auch hinzufügen, so Karte für Liste zwei. Wir werden diese Karten noch nicht sehen, weil wir gerade die Kartenkomponenten kommentiert haben, aber wenn wir zu Firebase gehen und dann die Konsole aktualisieren, schauen wir uns zuerst die Listen an. Wenn wir auf diese klicken, sind diese nun mit einem bestimmten Board verknüpft. Das gleiche mit unserem zweiten, und wenn wir zu unseren Karten gehen, können wir auch sehen, dass diese mit einer Listen-ID mit der dritten verbunden sind, und dies ist eine andere ID als die ersten beiden. Um dieses Video zu beenden, können wir nun die Karten aus der Datenbank lesen, die einem ähnlichen Muster wie unsere Listen folgen wird. Oben in unserer Liste haben wir JS-Komponenten bekommen, wir können zuerst die Methode aus dem Inneren der Komponente aufrufen, die eingehängt wurde. Direkt unter unserem Zustandsobjekt können wir ComponentsDidMounts hinzufügen, unsere Klammern und unsere geschweiften Klammern einrichten. Innerhalb von hier können wir diese.fetch-Karten nennen, was die Methode ist, die wir in nur einem Moment erstellen werden, die in der Listen-ID mit diesem Top-Requisiten fault.list übergeben wird. Dann können wir unsere benutzerdefinierte Methode direkt unter diesem einrichten, so dass dies geholt Karten wird eine Sync-Funktion sein, die Sie in dieser Listen-ID nehmen werden, die an sie übergeben wurde, richten Sie unsere Pfeilfunktion. Dann versuche ich und einen Fang-Block. Übergeben des Fehlers, kein console.error mit dem Text des Fehlers, Abrufen von Karten. Fügen Sie ein Komma hinzu und gibt dann unseren Fehler aus, so dass wir jetzt Dinge einrichten können, um unsere Karten aus der Datenbank zu bekommen, die mit dieser Listen-ID übereinstimmt, die übergeben wird. Wir können dies innerhalb des try-Blocks tun. Wir werden zuerst eine Konstante erstellen, um unsere Karten zu speichern, wo wir auf die Daten von unseren Karten Ref warten werden. Nach Tagen können wir Zug auf das Ende D gelehrt wo Methode hinzufügen. Denken Sie daran, dies nimmt drei Argumente. Der erste ist der Wert, mit dem Sie vergleichen möchten. Diese wird innerhalb der Karten gespeichert. Wenn wir einen Blick auf die Konsole, wir wollen die Liste ID auswählen, so wählen card.list ID. Der zweite Wert ist der Vergleich, der gleich ist. Wir wollen überprüfen, ob dies gleich der Listen-ID ist. Gleich danach können wir auch die Bestellung nach Methode bis zum Ende verketten. Wir wollen diesen Aufstieg durch die card.created up Eigenschaft bestellen, und dann schließlich, um diese Daten zu erhalten, rufen wir die.get-Methode. Danach können wir dann unsere Karten auswählen und dann jede mit dem.for durchlaufen. Für jeden wird dann jeden Wert in eine Variable namens Karte zu speichern. Dies wird eine Funktion ausführen, die unsere Kartenobjekte konstruieren wird. Zunächst einmal können wir unsere Daten erfassen, was genau so ist, wie wir es mit den Listen auf den Tafeln gemacht haben. Wir können unsere Kartenobjekte schnappen. Wir können die Datenmethode ausführen, um alle Eigenschaften von der Karte zu greifen und dann die Kartenobjekte auszuwählen. Als nächstes werden wir dann unsere Kartenobjekte erstellen, die diejenige sein werden, die den Zustand schieben wird. Wir müssen die ID auswählen, die von der Karte Object.id verfügbar ist, durch ein Komma getrennt. Wir können dann die Daten zusammenführen, genau wie wir es mit den Listen auf den Tafeln getan haben. Lassen Sie uns testen, dass dies mit einem Konsolenprotokoll nach unserem Objekt funktioniert. Wir wollen den Wert unserer Kartenobjekte protokollieren. Speichern Sie dies und gehen Sie dann zum Browser in unser Projekt, wir können jetzt neu laden, und dann sehen wir, dass diese Abfrage erfordert auch einen Index zwei, so klicken Sie auf Link über die Konsole, und wir können jetzt unseren Index für die Karten auch. Lassen Sie uns dies mit dieser Schaltfläche erstellen. Pause Video und geben Sie uns ein paar Momente, um unseren Index zu erstellen, und ich werde Sie in ein paar Minuten sehen. Mit unserem Index ist jetzt erstellt, können wir zurück zu der App gehen und dann neu laden, und jetzt werden wir sehen, alle drei Karten wurden in die Konsole gelegt. Versuchen Sie, eine neue Karte zu erstellen, testen Sie. Nummer eins, senden Sie das aus, laden Sie den Browser neu, und jetzt haben wir unsere vierte Karte gerade mit dem Text von Test eins hinzugefügt. Wir können auch sehen, dass dies mit dieser Listen-ID verknüpft ist. Lassen Sie uns versuchen, ein neues hinzuzufügen, also testen Sie zwei neu laden, und dann können wir sehen, dass Test zwei eine andere Listen-ID als Nummer eins hat. Das nächste, was wir jetzt tun müssen, wissen wir, dass wir die richtigen Daten haben, ist , unser Konsolenprotokoll durch einen festgelegten Zustand zu ersetzen. Dies setzt jetzt Zustände. Hier drinnen werden wir die aktuellen Karten setzen, die wir bereits in den Staaten haben, erstellen unsere Objekte. Dann können wir uns in unsere Staaten verschmelzen. Unsere aktuellen Karten, auch die Weitergabe in unserem neuen Kartenobjekt. Mit diesem nun gehen wir zurück zum Browser, und dann, wenn wir innerhalb der React Entwickler-Tools suchen, können wir für eine Liste Komponenten suchen, wählen Sie eine von diesen, und dann unten auf der Unterseite können wir sehen, unsere Zustand der aktuellen Karten. Dies hat einen Strahl mit zwei verschiedenen Karten hier drin. Sie können nach unserem zweiten suchen. Deinstallieren Sie die drei aktuellen Karten in Bezug auf diese Liste, so dass das letzte, was Sie in diesem Video tun müssen, ist es, diese Karten in jeder Liste anzuzeigen. Wenn wir zurück zu allen Listenkomponenten gehen und wir können diese Schleife zählen, die die aus den Karten laufen wird. Wir können dann den Stil Eingabeaufforderungen ändern, um diesen Top-Zustand zu sein. Da speichern wir nun in den aktuellen Karten in Zustände. Genau das gleiche vorher wie unsere Daten. Dies wird this.state, .current Karten sein, auch den Schlüssel übergeben, über an den Browser, und jetzt werden wir die Listen sehen. Jetzt haben die Karten in jeder Karte angezeigt. Dies lässt uns jetzt mit jeder Karte auf der richtigen Liste, und als nächstes werden wir sehen, wie wir Daten löschen können. 25. Karten und Listen von Firebase löschen: Jetzt fügen wir die Funktionalität hinzu, um unsere Elemente aus der Datenbank zu entfernen. Das Entfernen eines Elements aus Firebase ist ziemlich einfach. Alles, was wir tun müssen, ist das Element in der Datenbank zu finden und dann eine Löschmethode aufzurufen. Das ist, was wir für die Karten tun können. Das erste, was wir tun müssen, ist, eine einfache Entfernen-Taste für jede Karte hinzuzufügen, die ich als einfache Kreuzung zu den Card.js Komponenten innerhalb unseres div hinzufügen und einfach den Kontext sprengen werde. Wir können HTML-Span-Elemente hinzufügen. Im Inneren können wir einen OnClick-Ereignishandler hinzufügen , der eine Methode namens This.DeleteCard auslöst. Innerhalb der öffnenden und schließenden Span-Tags können wir HTML-Entität hinzufügen, die das kaufmännische Und-Zeiten und dann das Semikolon ist. Auch der Browser. Dies wird ein Kreuz ausgeben, dem wir diese Methode auslösen können. Jetzt haben wir es mit den Karten zu tun, die in Firebase gespeichert sind. Wir müssen die Kartenreferenz importieren. Oben oben können wir unsere CardsRef importieren. Dies ist von der Zeichenfolge, die.. /Firebase. Dann können wir unsere deleteCard-Methode erstellen, die durch Klicken auf dieses Kreuz aufgerufen wird. Unmittelbar über unserer zufälligen Anstrengung. Wir können DeleteCard hinzufügen wird eine Spüle sein. Wir erhalten die Informationen zur Veranstaltung. Wenn es aufgerufen wird, setzt die Pfeilfunktion. Ich werde Abschnitt und auch den Fang versuchen, der den Fehler übergibt. Wir können jetzt eine console.error mit der Zeichenfolge Fehler Löschen Karte setzen. Die ersten Schritte im Abschnitt try werden diese Ereignisinformationen verwenden , um das Standardverhalten zu verhindern. Muss dann die CardID von Requisiten greifen. Wir können das in einer Konstante namens CardID speichern. Lösen Sie dies auch diese.props.data.id. Denken Sie daran, dass jede Karte die Requisiten erhält, die Daten genannt werden. Also gehen wir in die Entwickler-Tools in React. Wenn Sie nach einer Karte suchen, erhält diese alle Daten für jede Karte innerhalb dieser Daten Requisiten. Hier greifen wir auf diese ID zu. Jetzt können wir diese verwenden, um auf eine bestimmte Karte innerhalb einer Firebase mit dieser ID zuzugreifen. Unter dieser verrückten neuen Konstante, die für unsere Karte sein wird. Hier warten wir auf den CardsRef Punkt auf unsere Sammlung. Wir können dann ein bestimmtes Dokument durch die ID auswählen. Wir haben diese CardID bereits oben gespeichert. Der letzte Schritt besteht darin, dann die Löschmethode auf dieser bestimmten Karte aufzurufen. Also card.delete, die von Firebase zur Verfügung gestellt wird. Speichern wir das und gehen Sie zum Browser. Klicken wir auf „Testen Sie eins.“ Wir müssen immer noch aktualisieren, da wir noch keine Echtzeit-Funktionalität haben. Aber jetzt sehen wir, dass der Test entfernt wurde. Wenn wir auf die Konsole gehen und diese dann neu laden, können wir jede unserer Karten auf Test-eins überprüfen. Dies wird nun auch aus unserer Datenbank entfernt. Als nächstes müssen wir auch die Listen entfernen. Dies ist ein wenig komplexer, da wir auch jede Karte finden und entfernen müssen, die auch mit dieser Liste verbunden ist. Lassen Sie uns dies in der Listenkomponente tun, die list.js ist. Auch dies benötigt eine Schaltfläche oder über, um die Liste zu entfernen. Wir werden dies tun, kurz nachdem wir den Listentitel ausgegeben haben. Diese Codezeile nur hier in der Spanne. Der Inhalt wird die HTML-Entität von kaufmännischen Und-Zeiten und das Semikolon sein. Dies benötigt auch einen OnClick-Ereignishandler , der oben this.DeleteList-Schleife sein wird. Wir können auch unsere ListsRef aus Firebase importieren. Dann erstellt diese DeleteList-Methode. Dies wird asynchron sein und dann eine Pfeilfunktion, einen Try-Abschnitt, übergeben. Wir können alle Fehler bei einem Konsolenfehler mit dem Text der Fehlerlöschliste abfangen. Die ersten Schritte im try-Block wird sein, die ListID zu greifen. Wir können dies in einer Konstante namens ListID speichern. Diese ListID ist auf den Requisiten erhältlich. Also this.props der Name der Requisiten ist Liste. Dann können wir die ID greifen. Schlag ist eine zweite Konstante für unsere Karten, wo wir auf unsere CardsRef warten werden. Dafür wollen wir nicht nur die.getmethod aufrufen. Da dies alle unsere Karten in der Datenbank zu greifen. Wir wollen nur die einzelnen Karten entfernen, die mit dieser Liste verbunden ist , die entfernt wird. Lasst uns das notieren. Wir können auf das Ende Kette, die Punkte wo Methode. Denken Sie daran, dies nimmt drei Argumente. Der erste wird die Karte.listid sein. Der zweite wird der Vergleich sein. Würde ich überprüfen möchten, ob jede Listen-ID-Eigenschaft auf jeder Karte dieser ListID von Requisiten gleich ist. Fügen Sie beim Komma die ListID hinzu. Dann können wir endlich auf die get-Methode umklettern, um diese Karten einzuziehen. Nächster Schritt, was Sie mit diesen Karten machen wollen, sobald wir sie zurückbekommen. Nun, für jede Karte, die wir zurückbekommen, wollen wir die Löschmethode aufrufen. Aber kurz bevor wir dies tun, werden wir eine schnelle if-Anweisungen hinzufügen, die zuerst überprüfen, ob irgendwelche Karten zurückgekommen sind. Wenn cards.docs.length nicht gleich ist, ist nicht gleich 0. Wir fügen dann die Kartenspangen hinzu. Dies ist im Grunde zu prüfen, ob die Länge der zurückgegebenen Dokumente größer als Null ist. Dies bedeutet, dass wir einige Übereinstimmungen für unsere Listen-ID haben. Wir können dann alle Cards.forEach durchlaufen. Dann rufen wir für jede Karte die.deletemethod an. Wir können ihn nicht mit card.ref.delete machen. Diese sollten darauf achten, alle Karten zu entfernen, die mit dieser Liste verknüpft sind. Der nächste Schritt besteht darin, die Liste tatsächlich zu entfernen. Nur jeder Kartenabschnitt wird ein wenig einfacher. Alles, was wir tun müssen, ist eine Konstante zu erstellen, die Sie unsere Liste aus der ListsRef greifen werden. Das Dokument, das Sie erfassen möchten, ist das das dieser ListID entspricht. Lassen Sie uns das hineinreichen. Wir können dann diese Liste verwenden und die Firebase.Delete-Methode aufrufen, die die Liste auch verschieben wird. Jetzt können wir das speichern und wir können dies im Browser testen, über Chrome und in das Projekt. Gehen wir für Liste 1. Dies sollte Card1, Card2 entfernen und zwei testen. Klicken Sie darauf. Wir sehen keine Fehler in der Konsole, also ist das gut. Lassen Sie uns auffrischen. Jetzt wurde das entfernt. Rüber zur Konsole. Lassen Sie uns zuerst unsere Listen überprüfen. Wir haben jetzt nur List 2 hier drin. Die Liste wird entfernt. Wir können die Karten überprüfen. Jetzt haben wir nur diese einzelne Karte, die von dieser Liste hier ist. Das ist jetzt alles in Arbeit. Wir können auf eine Liste klicken, um zu entfernen. Es wird auch alle Karten entfernen, die mit der ID verknüpft worden sind. Als nächstes werden wir wieder auf das Löschen von Elementen kommen, indem auch die Boards aus unserer App und auch von Firebase entfernt werden. 26. Töne löschen: Das Löschen der Platine ist ein wenig mehr involviert als das letzte Video. Lasst uns nicht das Gefühl haben, dass wir uns noch nicht angesehen haben. Das liegt daran, dass wir die Tafel selbst finden müssen. Dann alle zugehörigen Listen und Karten, die zum Brett gehören. Vor dem Löschen in allen drei dieser Sammlungen. Wenn wir in die Board-Ansicht gehen, haben wir bereits eine Schaltfläche Löschen Board oben oben. Alle, Board bezogenen Methoden und auch der Ballzustand werden dann in der app.js gehalten. Jemand hat hier auch eine Methode zum Löschen von Tafeln hinzugefügt. Wer dann geht, gibt es als Requisiten an die Ballkomponenten weiter. so dass es ausgelöst werden kann, wenn auf die Schaltfläche geklickt wird. Der erste Schritt besteht darin, die Delete Board Methode zu erstellen, die ihm die Board-ID übergeben wird. Lassen Sie uns knapp über der zufälligen Methode nach unten gehen. Wir können unser Delete Board erstellen. Dies wird asynchron sein. Wir werden die Board-ID übergeben, wenn wir dies aufrufen und dann unsere Pfeilfunktion einrichten. Zuallererst können wir die Try-and-Catch-Abschnitte erstellen. Übergeben des Fehlers wie immer. Dann könnten wir einen console.error mit dem Text des Fehlers machen, das Board, einen Doppelpunkt löscht , und dann den Fehler übergeben. Da wir diese Methode von der Schaltfläche in den Board-Komponenten aufrufen, müssen wir sie als Requisiten weiterleiten. Scrollen wir nach unten zu unserem Router. Wir müssen die Platinenkomponenten finden. Was gerade hier ist, kurz nach dem Router-Problem, können wir in löschen Bord übergeben, die gleich unserer Methode der Geschäfte löschen Bord sein wird. Wenn wir zur board.js gehen, bevor wir vergessen, fügen wir die richtige Validierung hinzu. Wir müssen dies importieren, da wir es noch nicht verwendet haben, importieren Sie die Requisitentypen. Dann unten unten, können wir unsere Requisitentypen direkt über, wo wir diese Datei exportieren, so fett B, Requisitentypen, Setup über Objekte erstellen . Die einzige Requisite, die wir in der Minute bekommen, wird das Löschbrett sein. Das Delete Board ist der Requisitentyp der Funktion, also verwenden.func. Dies wird auch erforderlich sein. Innerhalb der zufälligen Methode haben wir bereits eine Schaltfläche zum Hinzufügen auf „Listener To“. Lassen Sie uns nach oben scrollen und werfen Sie einen Blick auf unsere Schaltfläche und die ist dieser gerade hier. Wir können dann auf klicken Sie hier hinzufügen. Dies wird eine Methode auslösen, also lassen Sie uns this.Delete Board erstellen. Dieses völlig Board ist nicht die Methode, die weitergegeben wird, weil wir einen Zugriff auf diese über Requisiten haben. Jetzt können wir voran gehen und Delete Board direkt über der zufälligen Methode erstellen. Löschen Sie die Board-Methode, die wir jetzt hinzufügen werden, wird für die Erfassung der ID dieses aktuellen Board verantwortlich sein. Dann rufen Sie in Notwendigkeit Delete Board Methode, die als Requisiten übergeben wird, so lassen Sie uns diese Delete Board hinzufügen. Dies ist eine asynchrone. Dann drinnen das erste, was zu tun ist, die aktuelle Board-ID zu greifen und diese innerhalb einer Konstante zu installieren. Board-ID wird von Requisiten erhältlich sein. Diese Spitze props.match.params.BoardID. Denken Sie daran, match.params, ist die Router-Requisiten, und die Parameter werden diese Board-ID sein, die Sie von hier aus greifen können. Wir speichern dies in einer Variablen, daher können wir dies jetzt übergeben, wenn wir unsere Delete Board-Methode aufrufen, die wir gerade in app.js erstellt haben. Diese Top-Requisiten, total Board, wie in der Board-ID. Bevor wir weiter gehen, lassen Sie uns testen, das funktioniert alles. Oben in der app.js haben wir keinen Inhalt innerhalb dieses Try-Abschnitts. Lassen Sie uns eine einfache Warnung mit dem Variablennamen der Board-ID machen, die gerade übergeben wird. Speichern Sie das in unseren Projekten. Lassen Sie uns versuchen, das Brett zu löschen. Großartig. Jetzt erhalten wir die Warnung mit der gleichen Board-ID, die in der URL ist, wenn die gesamte Methode jetzt aufgerufen wird. Wir können nun die ID verwenden, um alle Boards von Firebase zu greifen, den Zustand zu aktualisieren und dann schließlich das Board zu löschen. Schritt eins, wir werden die Warnung verschieben, und dann können wir das aktuelle Board in eine Konstante speichern. Wir können dies tun, indem wir auf unsere Bretter Ref. Schnappen Sie sich das Dokument, und das Dokument, das Sie erfassen möchten, ist nach der ID. Die ID wird innerhalb der Board-ID-Variable gespeichert. Der nächste Schritt besteht darin, den Status mit this.set-Status zu aktualisieren. Drinnen hier können Sie in unserem Zustandsobjekt übergeben, wo wir die Boards innerhalb des Staates aktualisieren werden, wird dies als Array einrichten. Die erste Sache ist, den Spread-Operator zu verwenden, um den aktuellen Zustand dieser State-Boards zu erfassen . Dies wird eine Kopie aller derzeit in Staaten befindlichen Boards nehmen, aber wenn wir eine bestimmte Tafel entfernen wollen, wie können wir das tun? Nun, wir können eine JavaScript-Filtermethode verwenden, die jedes bestimmte Board aus Staaten herausfiltert. Hier drinnen werden wir jedes Board innerhalb dieser Variablen speichern und dann eine Funktion für jede ausführen. Diese Funktion wird dafür verantwortlich sein, nur irgendwelche Boards aus Staaten zurückzugeben , die nicht mit dieser Board-ID übereinstimmen. Lassen Sie uns unsere Rücksendeerklärung hinzufügen. Wir möchten alle Boards zurückgeben, bei denen die ID nicht gleich dieser Board-ID ist, die wir gerade gelöscht haben. Schritt Nummer drei, direkt außerhalb dieses Schnittabschnitts, werden wir Board.Delete anrufen, um dies von Firebase zu entfernen. Wir wollen das nur noch nicht testen, denn wir wollen auch die Listen und Karten für dieses Board gleichzeitig entfernen. Beginnen wir mit den Listen, also oben in unserem Versuch Abschnitt. Wir können mit der Erstellung einer Konstante namens Lists beginnen. Hier drinnen warten wir auf unsere Listendiagramm, die unsere Listensammlung ist. Innerhalb dieser Listen-Konstante wollen wir alle Listen, die mit dieser Board-ID zusammenhängen, nach unten filtern. Wir können dies mit der Web-Methode tun. Es nimmt drei Parameter. Der erste wird das list.board sein. Die zweite ist gleich als Zeichenfolge, und dann ist der dritte Wert die Board-ID. Dies wird alle unsere Listen herausfiltern, in denen die Board-Eigenschaft gleich dem Board ist, das übergeben wurde, dann können wir die greifen alle diese gewichteten, they.get Methode finden. Da wir jetzt diesen Listenentwurf verwenden, können wir nun ganz oben in dieser Datei gehen, wo wir den Import hinzugefügt haben und auch hier, dann zurück zu unserer Methode. Mit diesen Listendaten, die wir jetzt zurückgehen, müssen wir jetzt zwei Dinge tun. Zunächst einmal müssen wir eine if-Anweisung hinzufügen, um tatsächlich zu überprüfen, ob es irgendwelche Listen dieses aktuelle Board gespeichert sind, bevor wir fortfahren und sie löschen. Nummer 2, wenn die Liste verfügbar ist, müssen wir sie durchschauen und dann löschen. Direkt unter Get können wir eine if-Anweisung hinzufügen. Wir können überprüfen, ob Listen, docs dot length ist nicht gleich Null, dann wird der Code innerhalb dieser if-Anweisung nur ausgeführt, wenn es mehr als eine Liste gibt. Wenn diese Listen, können wir dann für Sie mit der für jede Methode verlassen. Für jeden werden wir jedes Element innerhalb dieser Listenvariablen speichern, richtet eine Funktion für jeden ein. Das lässt uns jetzt in einer ähnlichen Position wie das letzte Video. Wir haben Listen, die wir löschen müssen, und wir müssen auch die Karten für jede Liste finden und dann gehen Sie vor und löschen Sie sie. Das bedeutet, dass wir jetzt einige gemeinsame Funktionen haben. Wenn wir auf die Liste app.js gehen und dann einen Blick für die Löschlisten-Methode werfen. Wir haben diese Methode im letzten Video erstellt, um dies zu tun. Anstatt es zu duplizieren, können wir dies auf die app.js heben und dann wird die Verwendung dieser Funktion. Beginnen wir mit dem Ausschneiden der vollständigen Methode. Wird geschweifte Klammer bis zur Deletelist gehosteten app.js schließen. Fügen wir dies in und direkt über der Zwischenablage ein. Diese Methode verwendet die Firebase-Karten href, die Sie sehen können, wenn wir scrollen nur ein hier. Wir müssen dies ganz oben importieren und dann zurück zu dieser Deletelist-Methode. Hoffe ganz oben hier haben wir eine Konstante namens ListID. Diese Zeile erhält die Daten von Requisiten, aber wir haben diese Liste nicht richtig verfügbar jetzt in dieser app.js, so dass wir diese Zeile entfernen. und dann, wenn wir aufrufen, wird diese Methode in dieser ListID übergeben. Das in den Klammern. Da wir diese Deletelist aus den Listenkomponenten entfernt haben, müssen wir sie nun über Requisiten zurückgeben. Gehen wir runter zu unserem Vorstand. Innerhalb des Routers. Sie können dies dann als Requisite hinzufügen. Dies ist die Deletelist und dies wird gleich dieser, dot deletelist sein. Dann gehen Sie auf die Tafel app.js. Wir können diese als Requisitentyp hinzufügen. Lassen Sie uns das duplizieren und das war Deletelist. Link-Liste war innerhalb der Listenkomponente unten. Jetzt können wir dies als Requisite innerhalb dieser Liste Komponenten übergeben. Kurz nach einer Liste können wir auch unsere Deletelist Requisiten hinzufügen, die von dieser Top-Requisiten, Punkte Deletelist verfügbar sein wird. Jetzt haben wir wieder diese Deletelist-Funktionalität in der Liste zur Verfügung. Dies wird jetzt als Requisiten erhalten. Wir können es in die Requisitenzeiten unten hinzufügen. Das sind die Deletelists. Der Prop-Typ ist eine Art von Funktion, die auch erforderlich ist, fügen Sie ein Koma dazwischen. Innerhalb der zufälligen Methode für diese Liste haben wir ein span Element, das unsere Löschlisten-Methode aufruft. Wir können dies oben neu erstellen, um die Methode aufzurufen, die Sie als Requisiten übergeben. Außerhalb rendern, können wir unsere neue Methode namens list deletelist erstellen, unsere Funktion einrichten und dann innerhalb dieser Funktion wollen wir zwei Dinge tun. Zuallererst wollen wir uns die ListID schnappen. Da erinnern Sie sich von vorher in der app.js, Wenn wir über diese Deletelist-Methode bewegt. Scrollen wir zurück nach oben. Wir geben dies auch als ListID ein. Diese ListID ist innerhalb dieser Listenkomponente über Requisiten verfügbar. Diese Spitze fordert dot list dot id id. Dann können wir endlich voran und rufen unsere deletelist Methode mit diesem Punkt Eingabeaufforderungen. Dot Deletelist, die in der ListID übergeben wird. Speichern Sie diese Datei und bevor wir weiter gehen, können wir testen, dass diese Liste entfernt wird und Probleme will lists-ref und die app.js sein. Fügen wir hier ein s und auch 63 und 67. Das ist am Ende. Auch hier. Gut. Es funktioniert jetzt. Lassen Sie uns versuchen, eine Liste zu entfernen. Fügen wir hier eine Liste hinzu. Aktualisieren, klicken Sie auf Weiter. Wenn wir das neu laden, wurde das jetzt entfernt. Lassen Sie uns auch eine dieser Komponenten in verschiedene Komponenten ausprobieren. Dieser neue Klick auf Weiter. Jetzt können wir auch das entfernen. Jetzt war das ein wenig zusätzliche Arbeit, um dies in verschiedene Komponenten zu bekommen. Aber es bedeutet, dass wir jetzt zu unserer app.js zurückgehen können, wo wir ursprünglich begonnen haben, und dann können wir diese Deletelist-Methode für jede Liste verwenden, die wir haben. Jetzt durchlaufen wir jede der Listen oder wenn es jetzt tun ist, rufen Sie diese Deletelist-Methode auf, die wir jetzt in dieser Komponente zur Verfügung haben. Diese Punkt-Löschliste. Deletelist muss auch in einer ID und Firebase-Speicherung dieses innerhalb eines Objekts namens ref übergeben werden. Wir können dies mit list dot ref, dot id zugreifen. Jetzt müssen wir nur einen Test geben und in der Tat reagiert dies auf unsere Liste Konstante anstatt unsere Liste ref. Es gibt uns eine Rettung. Wenn wir nun in eines dieser Boards gehen, gehen wir für unseren Test 2. In einem hier haben wir eine Liste von eins, zwei und drei und auch die Ursache für a, b und c. Nun, wenn wir versuchen, unser Board zu löschen, lassen Sie uns aktualisieren. Ich werde jetzt sehen, dass alle Daten entfernt wurden. Wir können das in der Firebase-Konsole überprüfen. Lassen Sie uns überprüfen, unsere Liste auf unseren Karten wurden auch entfernt. Beginnen wir zuerst mit unseren Listen. Wir haben hier nur die einzige Liste statt die Nummer 1, 2 und 3 in unseren Karten. Sie haben immer noch die einzelne Karte 2 und wir sehen nicht a, b und c. Dies sind jetzt alle Löschmethoden, die wir für dieses Projekt benötigen und im nächsten Abschnitt werden wir uns ansehen wie wir unsere Daten innerhalb einer Firebase aktualisieren können. 27. Daten in Firebase aktualisieren: In diesem Abschnitt konzentrieren wir uns auf die Aktualisierung unserer Pinnwände, Listen und Karten. Dies ist wichtig, da ein Benutzer Dinge wie einen Boardtitel oder ein Etikett auf einer Karte gehorchen möchte . Diese Etiketten sind etwas, das wir in Zoom bekommen. In diesem Video werden wir machen die Tafel und Listen Titel sowohl editierbar, nachdem wir auf sie geklickt haben. Dann können wir alle Änderungen vornehmen und sie an Firebase schieben. Beginnen wir von vorne in der board.js, dann können wir mit unserem Board Titel arbeiten. Hier werden wir den aktuellen Board-Titel mit HTML-Eingabeelement ersetzen , so dass der Benutzer dann eingeben kann. Lassen Sie uns beginnen, indem Sie unsere Ebene drei Überschrift entfernen, also lassen Sie uns entfernen, oder kommentieren Sie diese Zeile beide. Dann können wir hier eine HTML-Eingabe erstellen. Dann werde ich in der nächsten Zeile den Typ hinzufügen, der dem Text gleich sein wird. Auch ein Name, der wird der Board-Titel auf Änderung sein, die eine Methode auslösen wird, die Update-Board genannt werden wird. Das letzte Attribut wird der Standardwert sein und der Standardwert wird gleich this.state.currentBoard.Title sein. Dies wird den Titel zu greifen, genau wie es oben in unserer Level-3-Überschrift getan hat. Verwenden Sie den Standardwert anstelle des Wert-Attributs, geben wir den Anfangswert an. Wir werden dann nachfolgende Aktualisierungen auf gesteuert lassen, so dass wir dieses Feld bearbeiten können. Ich werde diese Datei speichern und dann zum Browser gehen, in unsere Projekte. Wir müssen zurück, wählen Sie das Brett aus. Wir können nun auf den Titel klicken und ihn bearbeiten. Natürlich wird dies im Moment nicht in Firebase gespeichert, weil wir diese Update-Board-Methode nicht erstellt haben , die wir hier ein Inside nennen. Lassen Sie uns dies außerhalb der Rendermethode tun. Wir können Update-Board erstellen, Übergabe der Ereignisinformationen und setzt dann über Funktion. Dieses aktuelle Board-Update öffnet die app.js zusammen mit allen Overboard-Auktionen. Beginnen wir eine Bigamie im Brett Id und speichern sie in einer Konstante. Die Board-ID ist verfügbar bei this.props.match.params.BoardID. Dies ist eine Board-ID, die über die URL-Parameter verfügbar ist. Wir speichern es innerhalb dieser Variablen. Lassen Sie uns nun eine neue Konstante erstellen, die neuer Titel genannt wird. Dadurch wird der Wert gespeichert, den der Benutzer eingegeben hat. Wir können dies von e.currentTarget.Value abrufen. Als nächstes öffnen Sie Noten und wenn Aussagen, wo wir überprüfen können, ob die Board-ID vorhanden ist und wir wollen auch überprüfen, ob es einen neuen Titel gibt. Wenn beide vorhanden sind, möchten wir eine Methode namens Update-Board aufrufen, die wir in nur einem Moment eine app.js erstellen werden. Dies wird als Requisiten weitergegeben, so dass wir mit this.props.updateBoard zugreifen können. Dann werden wir an diese Methode senden, die Board-ID und auch den neuen Text, der in neuen Titel gespeichert wird. Lassen Sie uns nun auf die app.js gehen und wir können diese Update-Board-Methode erstellen, die für das Speichern dieser in Firebase verantwortlich sein wird. Also außerhalb des Renders wird das Update-Board asynchron sein. Wir werden nochmals die Board-ID und auch den neuen Titel sagen. Wir können uns zurücksetzen versuchen Abschnitt dann den Fang kurz danach. Übergeben des Fehlers, wo wir einen Konsolenfehler mit dem Text der Fehleraktualisierung Board tun können , auch in den Fehler übergeben. Gut. Nun, das erste, was zu tun ist, ist, das Board von Firebase mit dieser Board-ID zu greifen. Installieren Sie die Semi-Konstanten, die als Board bezeichnet werden. Wir haben unsere Boards ref, was auf unsere Sammlung verweist. Wir wollen ein bestimmtes Dokument ausrichten und dieses Dokument wird gleich der Board-ID sein. Das nächste, was wir tun können, ist eine Firebase-Methode namens update aufrufen. Dann werden wir hier drinnen ein Objekt übergeben. Das Feld, das wir aktualisieren möchten, ist ein Titel und dies ist mit board.title verfügbar. Ich werde dies auf den neuen Titel setzen, der übergeben wird. Jetzt haben wir das erschaffen. Das müssen wir nun auch an die Board-Komponenten weitergeben. Da wir Nische aus der board.js aufrufen, lassen Sie uns dies als Requisiten übergeben. Dies ist Update-Board, so dass sie immer noch Board über die boards.js aktualisieren. Sie können dies auch von Requisitentypen unten ganz unten hinzufügen. Dies ist Update-Board. Die Requisitentypen, dies ist auch eine Funktion, die auch erforderlich ist , um diese Datei jetzt über den Browser zu speichern. Lassen Sie uns das verkleinern. Ich möchte das nicht mit der Firebase-Konsole nebeneinander stellen, damit wir diese Aktualisierung in Echtzeit sehen können. Die Konsole, lassen Sie uns unser To-Do-Board auswählen, das genau hier ist. Klicken Sie auf unseren Titel. Lassen Sie uns versuchen, hier einige verschiedene Texte hinzuzufügen. Ich werde diese Updates sofort sehen. Wir können das entfernen. Lassen Sie uns versuchen, zu aktualisieren. Wenn wir nun den Browser neu laden, sehen wir, dass diese Daten nach einem Neuladen bestehen bleiben. Das Ändern des Listentitels ist auch sehr ähnlich, wenn nicht sogar einfacher, da ich den gesamten Code in die Listenkomponente hinzufügen werde , so dass es keine Notwendigkeit gibt, ihn Requisiten weiterzugeben. Wenn wir auf die list.js gehen, können wir unsere p-Elemente durch eine Eingabe ersetzen. Scrollen Sie nach unten zum Rendern Anstelle unserer p-Elemente können wir diese und HTML-Eingaben entfernen. Der Typ wird gleich Text sein. Wir werden auch einen Namen hinzufügen, der der Listentitel sein wird. Bei der Änderung löst dies eine neue Methode aus, die Aktualisierungsliste und schließlich der Standardwert sein wird . Dieser Standardwert wird gleich this.props.list.title sein, so dass wir diese von oben greifen, dann können wir die Update-Liste außerhalb der Render-Methode konstruieren. Dies wird eine Synchronisierung sein, die die Ereignisinformationen enthält. Zuallererst, wie immer, fügen wir unseren try Abschnitt hinzu und ich werde für jede Fehlerbehandlung fangen. Der Konsolenfehler wird eine Zeichenfolge der Fehleraktualisierungsliste sein, die auch den Fehler kurz danach übergibt. Update-Liste benötigt auch Zugriff auf diese Listen-ID , also lassen Sie uns diese Konstante von knapp oben beschneiden. Wir können dies dann hinzufügen. Eine zweite Konstante des neuen Titels, die in dem Wert gespeichert wird, den der Benutzer eingegeben hat. Wir können dies von e.currentTarget greifen und dann den Wert, den der Benutzer eingegeben hat. Als nächstes greifen wir unsere Liste von Firebase und speichern sie in einer konstanten aufgerufenen Liste. Warten wir auf die Listen ref. Wir können ein Dokument nach der ID greifen, und die ID wird nur beide in der Listen-ID gespeichert. Der letzte Schritt besteht darin, die Update-Methode mit list.update aufzurufen. Drinnen hier als Objekt, werden wir das Titelfeld aktualisieren, das wir von list.title greifen können und setzen dies gleich unserem neuen Titel. Lasst uns das mal ausprobieren. Wir müssen zum Browser gehen und ein Brett finden, das eine Liste hat. Gehen wir zurück Liste zwei, lassen Sie uns darauf klicken und ändern Sie es in Liste 200 sein. Wir können auch nebeneinander überprüfen. Liste 200amerikanische Städte wurde hier aktualisiert. Wenn wir aktualisieren, bleibt dies jetzt im Browser persistent was bedeutet, dass dies jetzt in einer Firebase gespeichert wurde und wir jetzt in unseren Listenkomponenten abrufen. Das ist genug, um das Board und die Liste zu aktualisieren. Das Kartenupdate, wir werden noch ein bisschen mehr dazu haben. Wir beginnen dies im nächsten Video, indem wir ein Pop-up-Modal erstellen, um unsere Änderungen vorzunehmen. 28. Modal bearbeiten: Auf die fertige Version des Projekts, das ich hier geöffnet habe, wenn wir auf eine dieser Karten klicken, führt es uns zu einem richtigen Modal. Dieses Modal ermöglicht es uns, den Text auf den Karten zu bearbeiten und auch Etiketten hinzuzufügen und zu entfernen. Etiketten sind etwas, das Trello als Tagging-System verwendet. Wenn Sie beispielsweise alle unsere Karten, die wir abgeschlossen haben, sichtbar sehen möchten, möchten wir vielleicht ein grünes Etikett hinzufügen, um dies zu zeigen. Dieses Modal wird eine neue Komponente sein, um all dies zu handhaben, und das ist, was wir jetzt machen und schaffen werden. Das Styling für das Modal wurde bereits in den CSS-Stilen bereitgestellt, die Sie früher heruntergeladen haben sollten. Gerade einige grundlegende Positionierung und Styling hinzugefügt, so dass wir uns auf die HTML und JavaScript innerhalb unserer Komponente konzentrieren können. Beginnen wir damit, dies im Komponentenordner zu erstellen. Lassen Sie uns eine neue Datei namens EditCardModal.js Erweiterung erstellen. Diese Komponente befasst sich mit Requisiten, aber im Moment werde ich nur das grundlegende Markup erstellen, und dann werden wir zurückkommen und das bald bearbeiten. Beginnen wir mit dem Importieren von React. Dann können wir unsere Klasse Basiskomponente erstellen, die EditCardModal genannt wird. Wie immer wird dies React.Component erweitert. Hier können wir unseren Anfangszustand festlegen, also ist es ein Bubble-Objekt, und dann ist das erste Stück von Zuständen, die ich hinzufügen werde, für die verfügbaren Labels. Dies wird ein Array sein, das sechs verschiedene Werte enthalten wird, für die Farben, die zur Auswahl stehen. Der erste ist ein Hex-Wert von 80ccff durch ein Komma getrennt, ich werde dann kopieren und dann fügen Sie dies in fünf weiteren Malen, um uns sechs verschiedene Werte zu geben. Diese zweite, das wird den Wert von 80ffaa haben. Der dritte, das wird f94a1e sein. Der dritte wird ffb3ff sein. Nummer fünf wird bf00ff sein. Der letzte ist ffad33, getrennt durch ein Komma. Wir können auch ein leeres Array hinzufügen, das für die SelectedLabels ist. SelectedLabels hält jeden dieser Werte, sobald ein Benutzer darauf klickt. Unterhalb dieser nach unseren Zuständen können wir hier die Rendermethode hinzufügen, und wir können unsere jsx zurückgeben. Zuallererst wird dies in einem Wrapper umgeben sein , der in einem div enthalten sein wird. Der Klassenname wird gleich modal-wrapper sein. Schließ das ab. Hier können wir in einem zweiten div verschachteln, das den Klassennamen modal-body haben wird. Dieser Modal-Körper wird einen Formularabschnitt haben. Werfen wir einen Blick auf die fertige Version, klicken Sie auf eine dieser. Dieses Modal wird eine Schließen-Schaltfläche oben rechts haben, die, wenn wir darauf klicken, uns zurück zur Board-Ansicht. Wir werden einen Titel hinzufügen, dann werden wir durch diese verfügbaren Labels Schleife, die Sie nur den Status festgelegt, und dann zeigen Sie diese. Danach haben wir einen Bearbeitungsbereich, in dem der Benutzer den Text für die Karten bearbeiten kann, gefolgt von den ausgewählten Etiketten, die das zweite Element in unserem Zustand war, und dann eine Schaltfläche zum Senden, um diese Änderungen zu speichern. Lassen Sie uns voran und konstruieren dies jetzt innerhalb dieses div. Zunächst einmal innen hier können wir ein Formular hinzufügen, das innen verschachtelt ist. Wir werden ein div hinzufügen und dies wird ein div für den ersten Abschnitt sein , der für die verfügbaren Labels ist. Der obere Teil dieses modalen Abschnitts hatte ein Kreuz, das ein Benutzer darauf klicken konnte, um das Modal zu schließen. Wir können dies mit einer HTML-Entität hinzufügen, die × ist. Dies wird auch einen ClassName haben, um das CSS von modal-close zur Verfügung zu stellen. Schließen Sie einfach die Seitenleiste, um uns etwas mehr Platz zu geben, und dann kurz nach dieser Spanne, ein p-Element, das für den Text von add/remove Labels sein wird. Dies hat auch einen ClassName, der für Label-Titel ist. Kurz nach diesem Titel werden wir dann jedes dieser Elemente im Array durchlaufen . Da es jetzt JavaScript ist, um die geschweiften Klammern zu öffnen, können wir mit this.state.availableLabels auf die verfügbaren Labels in Zuständen zugreifen . Wir gehen dann zu einer Karte durch jeden dieser sechs Werte, die auf jedem Element innerhalb dieser Label-Variable gespeichert sind. Im Inneren hier können wir eine HTML-Span-Elemente für jedes verfügbare Label zurückgeben. Schließ das ab. Die Spanne wird einen ClassName haben, der gleich dem Label sein wird. Die wichtigsten Teile dieses Span-Elements wird eine Stil-Eigenschaft sein. Die Stil-Eigenschaft wird dem Label die Hintergrundfarbe geben , die wir in Zustand gesetzt haben. Unten kurz nach unserem Label können wir den Stil einstellen, die doppelten geschweiften Klammern öffnen und dies in der Tat auf seine eigene Zeile hinzufügen, so dass es besser lesbar ist. Innerhalb der geschweiften Klammern können wir den Hintergrund so einstellen, dass er gleich der Beschriftung ist. Dann, um diesen div-Abschnitt mit einer horizontalen Linie zu beenden, so dass die hr-Elemente knapp unter diesem div. Wir werden dann ein zweites div hinzufügen, das für unseren zweiten Abschnitt sein wird. Der zweite Abschnitt, wenn wir auf eines dieser klicken, wird es dieser Bearbeitungsbereich sein. Wir werden eine HTML-Entität haben, die dieser kleine Bleistift sein wird, und dann werden wir auch die Eingabe haben, wo der Benutzer den Kartentext ändern kann. Lassen Sie uns das jetzt hinzufügen. Dieses div wird einen ClassName des Edit-Bereichs haben. Dann wird das erste, was eine Spanne für unsere HTML-Entität sein. Der Klassenname, der Bearbeitung-Symbol ist. Die HTML-Entität für den Bleistift ist die ✎. Nach der Spanne können wir dann die Eingabe hinzufügen, die für den Text ist. Die Eingabe hat auch einen ClassName, der gleich textbox-edit sein wird. Das ist alles, was wir jetzt für diesen Abschnitt brauchen. Nach diesem Textbereich div werden wir auch einen dritten div Abschnitt erstellen. Dies gilt für unsere Etiketten, die der Benutzer ausgewählt hat. Beginnen wir mit einem p-Element, das den Titel der Beschriftungen haben wird , gefolgt von einem Doppelpunkt. P-Elemente hat einen ClassName , der gleich label-title sein wird. Dann werden wir etwas JavaScript hinzufügen, das alle Labels durchlaufen wird, und dann zeigen Sie sie auf dem Bildschirm. Moment werde ich nur einen TODO-Abschnitt hinzufügen, und dann sagen wir Display-Labels, kommentieren Sie diesen Abschnitt aus und dann werden wir in einem späteren Video darauf zurückkommen. Die letzte Sache für dieses Formular ist, eine Schaltfläche hinzuzufügen. Diese Schaltfläche in wird das Formular senden, so dass es die Art des Absendens, den Text von Speichern Änderungen benötigt . Dann schließlich für diese Komponente müssen wir standardmäßig den Namen EditCardModal exportieren. Lassen Sie uns dieser Datei ein Speichern geben und dann können wir auf die Komponente card.js gehen, wo wir diese neue Datei importieren können. Oben ganz oben lassen Sie dies hinzufügen, das war die EditCardModal von. /EditcardModal. Beim Scrollen nach unten in unsere zufällige Methode können wir diese nun in den Browser ausgeben. Lasst uns das ganz am Ende richtig machen. Dies wird EditCardModal genannt, schließen Sie dies ab. Nun, da wir zwei Elemente nebeneinander haben, müssen wir dies auch in einem Fragment hinzufügen, also React.Fragment. Wir können dann das schließende Tag nehmen und dies bis zum Ende hinzufügen. Wenn alles gut geht, sollten wir das jetzt im Browser sehen. Wenn wir zu unserem Projekt gehen, und dann müssen wir eine Karte hinzufügen, lassen Sie uns schnell einige Listen hinzufügen, so abc, aktualisieren und lassen Sie uns eine Karte hinzufügen, 1, 2 und dann 3. Wir haben jetzt einige Inhalte auf dem Bildschirm haben wir alle Etiketten, wir haben den Textbereich und auch den Label-Abschnitt am unteren Rand. Wir haben das Kreuz, um es zu schließen und auch die Schaltfläche, um die Änderungen zu speichern. Offensichtlich wird nichts davon gerade funktionieren, und wir wollen dies auch nur zeigen, wenn die Karte angeklickt wird. [ unhörbar] wir können einen booleschen Wert zu unserem lokalen Zustand über in der card.js hinzufügen. Ganz oben können wir einen Zustand hinzufügen, so dass es ein Bubble-Objekt ist, und dann können wir den Anfangszustand von ModalOpen auf false setzen. Dann unten können wir eine neue Methode erstellen, die dies zwischen true und false umschalten wird. Lassen Sie uns diese ToggleModal aufrufen, also ist es eine Blasenfunktion, und dann können wir den Zustand mit this.setState umschalten. Innerhalb unseres Objekts ist der Zustand, den wir umschalten möchten, ModalOpen. Wir werden dies auf den Wert this.state.modalOpen setzen. Wir können dann das Ausrufezeichen kurz davor hinzufügen, was das Gegenteil von dem tut, was derzeit in Zustand gesetzt ist. Jedes Mal, wenn dies angeklickt wird, wird es dauern, was momentan da ist, und dann das Gegenteil tun. Wir möchten, dass diese ToggleModal Methode jedes Mal ausgelöst wird, wenn der Kartentext geklickt wurde, so dass wir einen Klick-Handler auf den Text unten hinzufügen können. In unsere zufällige Methode, das p-Element. Wir können dann einen Click-Handler innerhalb der öffnenden Klammer hinzufügen und dies gleich this.toggle.Modal setzen. Denken Sie daran, im Inneren dieser Karte ist, wo wir unsere Modal rendern werden. Dieses Modal muss sich dieser Toggle-Zustand bewusst sein, so dass wir es als Requisite übergeben können, also ModalOpen. Wir setzen dies auf this.state.modalOpen, speichern Sie diese Datei und dann können wir über zu unserer modalen Komponente gehen. Jetzt kann diese Requisite verwendet werden, um den Anzeigetyp mit einem JavaScript-Operator [unhörbar] einzustellen. Lassen Sie uns zu unserem modalen Wrapper scrollen, der dieses div gerade hier ist, und dann können wir den Stil einstellen, lassen Sie dies auf eine neue Zeile hinzufügen. Wir können die CSS-Stil Eigenschaft mit den doppelten Klammern setzen. Wir können den Anzeigetyp dieses modal auf this.props.ModalOpen setzen. Wenn dieser boolesche Wert wahr ist, werden wir dann diesen Anzeigetyp so einstellen, dass er gleich Block ist. Oder wenn dies auf false gesetzt ist, setzen wir den Anzeigetyp auf none, wodurch diese modale Komponente ausgeblendet wird. Jetzt speichern wir das und testen Sie es dann im Browser in unser Projekt. Wir sehen sofort, dass wir unsere Karten und Liste haben, aber wir haben nicht die modale Komponente angezeigt. Lassen Sie uns versuchen, auf den Text zu klicken , der jetzt diese Methode auslöst und das Modal öffnet. Wenn wir jedoch auf dieses x in der Ecke klicken, um zu entfernen, funktioniert es im Moment nicht. Dazu müssen wir auch diese ToggleModal-Methode übergeben, also gehen wir zurück zur card.js. Wir haben diesen ToggleModal, der gerade hier ist. Wir können dies auch an unsere EditCardModal als Requisite weitergeben. Auf einer neuen Zeile können wir ToggleModal hinzufügen, das unserer Methode entspricht. Zurück zu den modalen Komponenten können wir nun diese Methode auslösen, wenn auf das x geklickt wurde. Dies ist die Spanne, die die x hat. Wir können einen Click-Handler hinzufügen, genau wie wir es vorher getan haben, die diese Requisite ausführen wird, so auf Klick. Wir können dies auf this.props.toggleModal setzen. Zurück zum Browser können wir das jetzt mal ausprobieren. Lassen Sie uns auf das Modal klicken, das dies auftauchen sollte. Klicken Sie dann auf das x in der Ecke, die jetzt die ToggleModal-Methode ausführt und dann den Zustand auf das Gegenteil setzt, was falsch ist. Dies hat jetzt ein wenig Tippen benötigt, um dieses Modal zum Laufen zu bringen. Alles, was wir jetzt tun müssen, ist, es mit einigen Methoden zu verbinden, um die Karte zu bearbeiten, und das wird unsere Aufgabe im nächsten Video sein. 29. den Kartentext aktualisieren: Innerhalb unseres Projekts, wenn wir zu den React Developer Tools gehen und dann nach den Kartenkomponenten suchen. Wenn wir eine dieser Karten auswählen, können wir auf der rechten Seite sehen, haben wir diese Datenstütze, die für jede verfügbar ist. Diese enthält alle Informationen über die aktuelle Karte, wie das erstellte Datum, die ID und alle Labels, die in der Firebase gespeichert sind. Da das Modal für die Änderung oder Aktualisierung all dieser Daten verantwortlich sein wird, müssen wir diese Daten an die modalen Komponenten weitergeben. Lassen Sie uns dies tun, indem Sie zuerst zur card.js gehen. Dann innerhalb der Edit-Karte modal, können wir dann eine dritte Requisite hinzufügen, die die Kartendaten genannt werden wird. Dann können wir diese Daten als Requisiten weiterleiten. Diese. props.data, dann gehen wir auf die Edit-Karte modal. Denken Sie daran, wenn wir diese Komponente in Zuständen erstellt haben, haben wir auch ein ausgewähltes Label-Array erstellt, das wir als leer festlegen. Jetzt haben wir die Daten von Firebase zur Verfügung, die alle bereits ausgewählten Labels enthält. Wir können dieses Array nun aktualisieren, um alle Karten einzuschließen, die Sie gerade gespeichert haben. Wir können dies verwenden, sobald die Komponente montiert wird. Wir haben Komponente montiert und dann drinnen hier, wir werden einfach den Zustand damit einstellen. Status festlegen. Unser Objekt wird die ausgewählten Etiketten mit Wert aus unseren Requisiten aktualisieren, die in Kartendaten gespeichert ist und die Kartendaten wollen ist das Etikettenfeld. Jetzt speichern wir das und öffnen Sie das Modal und sehen, was wir tun müssen. Gehen Sie zum Projekt, klicken Sie auf den Text. Das erste, was zu tun ist, ist, den Kartentext innerhalb dieses Textbereichs hinzuzufügen. Der Benutzer kann es ändern, wenn er möchte. Das zweite, was zu tun ist, ist, durch unsere ausgewählten Labels zu schleifen und sie dann direkt unter hier anzuzeigen. Beginnen wir mit dem Hinzufügen des Kartentitels in den Textbereich. Zurück offen für VS Code, können wir auf die zufällige Anstrengung gehen und einen Blick auf die Eingabe werfen, die gerade hier unten ist, da unsere Daten auf dem Online sind. Wir müssen den Standardwert hinzufügen, der den Wert des Textes anzeigen wird. Wir können das von Requisiten setzen. Also das. Props. Kartendaten. Text. Das zweite, was zu tun ist, war, alle verfügbaren Labels im Status zu durchlaufen und sie dann unter diesem Label-Titel anzuzeigen. Wir haben bereits einen Platzhalter Kommentare, wo wir wollen, dass dies erscheinen. Aber jetzt möchte ich dies durch Mapping durch unsere ausgewählten Labels ersetzen. Innerhalb der geschweiften Klammern können wir unsere Zustände, die ausgewählten Beschriftungen, auswählen. Ich werde die Map-Methode verwenden, um jede Schleife zu durchlaufen, jeden Wert innerhalb einer Beschriftung zu speichern. Wir können dann unsere Funktion für jeden einrichten. Hier drinnen alles, was wir tun werden, ist ein HTML-Span-Element zurückzugeben. Dieses Span-Element wird eine Hintergrundfarbe haben, die die gleiche wie die Beschriftungsfarbe ist. Innerhalb des öffnenden Tags können wir einen Klassennamen des Labels erstellen. Aber auch wollen wir den Stil-Wert mit einem doppelten geschweiften Klammern setzen. Legen Sie die CSS-Hintergrundeigenschaft so fest, dass sie gleich der Beschriftung ist. Diese Hintergrundfarbe des Labels wird gleich dem Hex-Wert sein , den wir innerhalb des Staates haben. Diese ausgewählten Beschriftungen enthalten einen dieser Sechseckwerte. Dann scrollen wir nach unten, können wir diese auf die Hintergrundfarbe für unsere Spanne setzen. Da wir uns durchschleifen, müssen wir auch jedem dieser Span-Elemente einen eindeutigen Schlüssel hinzufügen. Kurz nach dem Hintergrund können wir auch den Schlüssel hinzufügen , der unserem Label entspricht. Dies wird in Ordnung sein, da jede der sechs Farben einzigartig ist, was bedeutet, dass wir keine Duplikate haben werden. Also speichern Sie das, und dann über zum Browser. Lassen Sie uns nun in eines dieser Modals gehen, indem Sie auf den Text klicken. Wir sehen den Text hier mit dem Wert eins. Versuchen wir es mit Nummer drei. Wir haben immer noch keine Etiketten zur Verfügung, damit diese Karten angezeigt werden, aber wir sehen, dass der Wert von drei jetzt in einer Texteingabe ist. Damit wir diese Karte jetzt bearbeiten können, können wir dem Formular beim Absenden eine neue Methode hinzufügen. Gehen wir zurück zu unserem modal und scrollen Sie dann nach oben zum Formular. Innerhalb des Eröffnungstags können wir ein On Submit hinzufügen, das gleich this.update-Karte sein wird. Kurz bevor wir voran gehen und diese Update-Karten-Methode erstellen, werde ich eine Referenz zur Texteingabe hinzufügen, um zuerst den Wert zu greifen. Scrollen Sie zurück zur Eingabe mit der Klasse der Lehrbücher Bearbeitungen, die gerade hier ist, direkt nach dem Standardwert. Wir können auch eine Referenz mit diesem hinzufügen. Texteingaben. Jetzt oben müssen wir diese Referenz und auch die Update-Karten-Methode erstellen. Direkt unter der Komponente wurde montiert. Wir können unsere Referenz erstellen, die Texteingaben war und das ist gleich react.create ref. Danach müssen wir unsere Update-Karten-Methode erstellen. Im Moment wird sich diese Methode auf die Aktualisierung des Textes konzentrieren. Wir werden sehr bald auf die Etiketten zurückkommen. Beginnen wir damit, diese asynchrone Funktion zu machen, die die Ereignisinformationen wie die Pfeilfunktion übernimmt , wo wir den Testabschnitt hinzufügen, den Schnitt Abschnitt direkt darunter, den wir in dem Fehler übergeben und dann ein Konsolenfehler, der alle Fehler beim Aktualisieren der Karte erkennt. Fügen Sie einen Doppelpunkt hinzu, und übergeben Sie den Fehler. Innerhalb unseres Testabschnitts werden wir zuerst verhindern Standard für die Ereignisse aufrufen. Um das Standardverhalten des Browsers zu stoppen, laden Sie in. Als nächstes öffnen wir drei Konstanten erstellen. Wir müssen die ID der Karte greifen, wir müssen den neuen Text greifen, der in das Eingabefeld hinzugefügt wurde , und dann müssen wir die aktuelle Karte von Firebase greifen. Beginnen wir mit der Karten-ID, die in den Requisiten zur Verfügung haben wird. Kartendata.id. Die nächste ist für den neuen Text, den Sie in dieser Referenz gespeichert haben. So const neuen Text. Dies wird gleich unserem Ref-Wert von this.text-Eingaben sein. Wir können den Wert mit Punktströmen Punktwert zu greifen. Wenn diese Konstante, die wir brauchen, für die aktuelle Karte von Firebase ist, werden wir ihre Informationen warten, um zurück zu kommen, die von unseren Karten ref.doc ist und dann können wir in unserer Karten-ID übergeben. Jetzt haben wir die Karte von Firebase, wir können die Update-Methode aufrufen. Hier drinnen richten wir unsere Objekte ein. Für den Moment ist das einzige Feld, das wir aktualisieren werden, der Text. Ich werde das von card.text greifen, sagen ist gleich unseren neuen Texten Konstante. Kurz nach unseren Updates können wir dann unser Modal schließen, indem wir die Modalmethode umschalten, die von Requisiten zur Verfügung steht. Also this.props.toggle modal. Sobald die Karte aktualisiert wird und das Formular eingereicht wird, schließen wir dann das Modal und kehren zur Platinenansicht zurück. Kurz bevor wir fortfahren, stellen Sie sicher, dass die Cards ref oben in dieser Datei importiert wird und stellen Sie auch sicher, dass dies ID ist. Lassen Sie uns dies ein Speichern geben und gehen Sie zum Projekt. Wählen Sie eine dieser Karten aus. Nehmen Sie das Modal, und ändern Sie den Wert innerhalb der Texteingaben. Es speichert nun die Änderungen und schaltet nun das zu schließende Modal um. Wenn wir zur Konsole gehen, laden Sie diese in die Kartensammlung neu. Jetzt können wir überprüfen, dass unsere Karte Nummer eins auf 100 geändert wurde. Innerhalb unseres Projekts müssen wir immer noch aktualisieren, um die Änderungen zu sehen , bis wir später unsere Echtzeit-Funktionalität hinzufügen. Dies alles geht jetzt in, da der Kontext aktualisiert wird. Im nächsten Video werden wir uns auf die Aktualisierung der Etiketten konzentrieren. 30. Aufstellung der Etiketten: Aktualisierungen in den Etiketten innerhalb unserer Kartenkomponenten werden ein wenig mehr Arbeit beinhalten als im letzten Video, in dem wir den Text aktualisiert haben. Dies liegt daran, dass wir die Beschriftungen ein- und ausschalten werden. Wenn ein Label angeklickt wird, müssen wir zuerst prüfen, ob das Label hinzugefügt oder entfernt werden muss. Um dies zu tun, werde ich einen Inline-Klick-Handler innerhalb unseres Modells hinzufügen. Wenn die Bearbeitungskarte Modell, in diesem Abschnitt haben wir im letzten Video erstellt , wo wir durch alle verfügbaren Etiketten Schleife. Wir können auch einen On-Click-Ereignishandler hinzufügen. Dies wird eine Inline-Pfeilfunktion sein, die eine Methode namens dieses Punktset Lebel aufrufen wird. Außerdem wird der aktuelle Beschriftungswert übergeben. Sobald der Benutzer auf eines dieser Etiketten klickt, wird es n diese Set-Label-Methode auslösen, die wir jetzt außerhalb unserer zufälligen Methode erstellen können. Setzen Sie also Label, das das Label aufnimmt, das an ihn übergeben wird, richtet unsere Pfeilfunktion ein. Der erste Schritt darin besteht darin, eine Konstante zu erstellen, die Beschriftungen genannt werden soll. Dies wird als Array alle aktuell ausgewählten Beschriftungen speichern, die in den Zuständen gespeichert sind. Wir werden diese in mit diesem Punktzustand verbreiten, punktausgewählte Labels. Der nächste Schritt besteht darin, zu überprüfen, ob dieses übergebene Label derzeit innerhalb dieses Arrays gespeichert ist. Lassen Sie uns dies tun, indem Sie eine if - Anweisung erstellen. Wir können überprüfen, ob Labels, Punkte enthält, die eine JavaScript-Methode in der aktuellen Beschriftung genommen ist, öffnen Sie den Code Eraces. Wenn dieses übergebene Label innerhalb unseres Labels Arrays mit M12 gespeichert wird , rufen Sie die Filtermethode auf, um es zu entfernen. Wir können dies innerhalb eines neuen Arrays namens neue Labels speichern. Wir können unser aktuelles Array namens Labels greifen, die JavaScript-Filtermethode genannt. Dann können wir jeden Wert im Inneren hier in eine Variable namens Elemente speichern. Das geht um die Funktion, es ist ein Lauf für jeden , der alle Elemente zurückgibt, die unserem Label nicht entsprechen. Wir können dann unseren Zustand mit diesem Punkt Set-Status aktualisieren, wo wir die ausgewählten Labels erhalten werden, um gleich unserem neuen Array zu sein. Dies ist, was passiert, wenn das Label im Array enthalten ist. Wenn dies nicht der Fall ist, fügen wir dann einen L-Abschnitt hinzu, das neue Label in den Zustand versetzt. Also haben wir die Etiketten. Wir können dann die JavaScript-Push-Methode aufrufen, die das neue Label in unser Array schieben wird. Wir können dann den Zustand aktualisieren. Erneut, Aktualisierung der ausgewählten Etiketten mit dem Wert unserer Etiketten, Array. Also, nur um zusammenzufassen, was wir hier tun, haben wir die ausgewählten Etiketten in Zuständen gespeichert, die dann eine Kopie von genommen und gespeichert würden, die dieser Konstante bekannt sind. Wir prüfen dann und ob das Label, auf das der Benutzer geklickt hat, in diesem Array gespeichert ist. Wenn ja, werden wir diesen Codeabschnitt ausführen, der dafür verantwortlich ist, das aktuelle Label herauszufiltern, und auf den Rest der Werte in diesem neuen Label-Array zu installieren. Wir werden diese dann endlich in den Zustand drücken, sobald das Etikett entfernt wurde. Wenn das Label, auf das geklickt wird, nicht in den Zuständen gespeichert wird, führen wir dann diesen l Abschnitt aus, der direkt darunter ist. Stattdessen wird dies unser neues Label in unser Array schieben und dann diesen Zustand speichern. Jetzt können wir zu unserer Update-Karten-Methode zurückkehren, die gerade oben ist. Wir können dies aktualisieren, um unsere Etiketten hinzuzufügen. Kurz nach dem neuen Text können wir eine konstante Aufrufbeschriftungen erstellen und diese gleich dem Wert im Zustand gespeichert. Dieser Punktstatus Punkt ausgewählte Beschriftungen. Wir können dies auch innerhalb unserer Update-Methode auf Firebase übertragen. Wir können auch wählen Sie die Karte Punkte, Etiketten Felder, und setzen Sie dies gleich o Etiketten. Also speichern Sie das und gehen wir zum Modal. Klicken Sie auf eine dieser Optionen, und wählen Sie dann die Beschriftung aus. Wir haben diese Interstate derzeit nicht. Also wurde es hinzugefügt. Wenn wir erneut darauf klicken, wird es diese dann aus den Zuständen entfernen, indem wir die Filtermethode aufrufen. Mal sehen, ob eine dieser sind hier oben in Ihrer Firebase, wir können auf diese klicken, um die Änderungen zu speichern. Dann laden wir unsere Karten. Diese Karte 100 wird jetzt mit unseren zwei Farben aktualisiert. Bevor wir weiter gehen, erhält diese modale Komponente auch Requisiten. So können wir einige Requisite Validierung hinzufügen. So wie immer können wir die Prop-Typen aus unserem Modul importieren, das Prop-Typen genannt wird. Diese Karte Modal erhält also drei verschiedene Requisiten. Wenn wir Blick in die Karte nehmen, die ein Ja fallen gelassen. Wir haben das Modal offen, wir haben Toggle Modal und auch die Kartendaten. Also zurück bis zum unteren Ende des Modals. Wir können unsere Requisiten-Validierung einrichten. So bearbeiten Karten-Modell. Die Requisitentypen, Kleinbuchstaben b, richten unsere Objekte ein. Der erste wird modal offen sein, was den Requisitentypen gleich sein wird. Dies ist ein boolescher Wert, so dass wir w auswählen können, dies ist auch erforderlich. Die zweite ist modal umschalten. Dieser Requisitentyp ist eine Funktion, also fügen wir diesen Func hinzu. Dies ist auch erforderlich. Ein drittes und endgültiges sind unsere Kartendaten. Der Prop-Typ ist ein Objekt, das auch benötigt wird, sobald wir die Prop-Typen gesetzt haben. Das letzte Stück dieses Videos wird sein, innerhalb unserer Anwendung die ausgewählten Etiketten direkt über dem Kontext anzuzeigen . Dazu müssen wir eine Schleife innerhalb der card.js erstellen. Denken Sie daran, innerhalb dieser Kartenkomponenten, wenn wir die React Developer Tools öffnen, wenn wir nach der Karte suchen hier speichern wir alle unsere aktuellen Daten innerhalb dieses Dataproc. Hier drinnen haben wir die Etiketten, die wir für jede Karte durchlaufen werden. Also oben in unserem Rendering, direkt unter der Klasse der Karte, wir ein neues div erstellen, das ein neuer Abschnitt sein wird, der all diese Etiketten enthält. Der Klassenname wird gleich Kartenbeschriftungen sein. Öffnen Sie die Karte ausradiert. Wir können auf unsere Requisiten und die Datenpunktbeschriftungen zugreifen. Um genehmigt zu werden und wir können die Karten-Methode verwenden, die in der Beschriftung nimmt. Also ist es oberhalb der Pfeilfunktion. Dann wird es eine Span-Elemente für jedes zurückgeben. Wir können in unserem Schlüssel übergeben, der einfach der Wert jedes Labels sein kann, der Stil. So haben wir den Farbwert, wir können die Hintergrundfarbe auch gleich unserem Label sein. Dann können wir schließlich einen Klassennamen dazu fragen, der Label sein wird. Gut. Jetzt gebe ich dieser Datei ein Speichern und gehe dann zum Browser. Wir können sofort sehen, dass die beiden Farben, die hinzugefügt wurden , als in den Kartenkomponenten aktualisiert. Lassen Sie uns versuchen, in der blauen Farbe zu bewegen und fügen Sie in einem Grün und speichern Sie die Änderungen, aktualisieren. Dies wird nun innerhalb der Kartenkomponenten reflektiert. So sind alle Aktualisierungsfunktionen jetzt abgeschlossen. Ich werde Sie als nächstes sehen, wo wir auf dieser Karte verbessern , indem Sie mehrere Textzeilen zulassen. 31. Textbereich auto Größe: Wenn wir auf eine unserer Karten klicken und das Bearbeitungsmodal öffnen, ist dies derzeit eine Texteingabe, die es uns erlaubt, Texte in einer einzigen Zeile hinzuzufügen. Es wird besser sein, wenn unsere Karten mehrzeiligen Text haben könnten, und die Karte würde erweitern, um jede Zeile passen. Um dies zu tun, werde ich ein Paket namens react-autosize-textarea hinzufügen, das uns erlaubt, diese zu Projekt hinzuzufügen. Dies gibt uns einen Textbereich, auch die Höhe der Karte entsprechend der Anzahl der Textzeilen skaliert . Gehen wir zu VS-Code und fügen Sie dies unserem Projekt hinzu. Unten unten. Ich werde den Server mit Control C schließen, und dann können wir laufen und npm i react- autosize- textarea. Dann lasst uns das laufen... 32. Erster Blick auf Snapshot: Jedes Mal, wenn wir Updates hinzufügen oder etwas aus unseren Projekten entfernen, müssen wir eine Aktualisierung durchführen, um die neuen Daten zu erhalten. Nun, das gilt für die meisten Dinge, wenn wir voran gehen und fügen Sie ein neues Board, sagen wir, Kurse zu nehmen, fügen Sie die Farbe hinzu und erstellen Sie dann ein neues Board, Sie werden sehen, dass dies ohne eine Aktualisierung erscheint. Ich wollte Ihnen zwei verschiedene Möglichkeiten zeigen, wie wir die Aktualisierung dieser Anwendung angehen können. Die erste ist, wie wir hier mit den neuen Boards haben, jedes Mal, wenn wir ein Brett hinzufügen oder entfernen, setzen wir die Boards in den Zustand. Wie wir bereits wissen, ist einer der Vorteile davon, dass es alle Komponenten aktualisieren wird, die wir als Zustand verwenden werden. Es wird auch in der Regel schneller sein, als auf die Datenbank zu warten, um die Daten zurück zu senden, aber das bedeutet auch, dass wir zwei Quellen der gleichen Daten haben. Wir haben das Brett im Zustand und auch in Firebase gespeichert. Wenn bei der Aktualisierung eines dieser Fehler ein Fehler auftritt, kann dies dazu führen, dass unsere Anwendung nicht synchron ist. Ein weiterer Ansatz, den wir jetzt unsere Listen und Karten verwenden werden, ist die Nutzung der Firebase-Echtzeit-Funktionalität, um uns zu sagen, wann sich etwas geändert hat. Anstatt uns nach den Daten zu fragen, sendet Firebase sie uns jedes Mal, wenn eine Änderung vorliegt. Beginnen wir mit der Methode „get list“ in den Board-Komponenten. Gehen Sie zur board.js und scrollen Sie nach oben, um Listen zu erhalten. Dies ist hier genau der Anfang dieser Datei. Get lists verwendet diese get-Methode, um zu erhalten, was zum aktuellen Zeitpunkt als Snapshot unserer Daten bezeichnet wird . Um Echtzeit-Updates zu erhalten, können wir dies durch eine Methode ersetzen, die auf Snapshots aufgerufen wird. Bei Snapshots berührt es einen Listener, der uns benachrichtigt, wenn eine Änderung vorgenommen wurde. Um dies zu tun, werde ich unsere vorhandenen Daten auskommentieren. Also alles direkt über unserem Catch-Block, bis hin zur Get-Methode. Jetzt können wir damit beginnen, dies durch unsere eigene Snapshot-Methode zu ersetzen. Dieselben Prinzipien gelten auch. Wir möchten unsere Datenschleife durch sie bekommen, ein Listenobjekt erstellen und es dann in den Zustand speichern. Zuerst rufen wir einen Snapshot auf , der eine Funktion annimmt. Nur im Auto durch können wir dann Snapshots aufrufen die Snapshots für jede Funktion übergeben. Für jede Daten, Snapshots, die ein Objekt mit Details über Abfrage ist, möchten wir dann eine Methode namens doc Änderungen aufrufen, so dass snapshots.doc ändert. Doc-Änderungen geben ein Array zurück, das die Änderungen seit unseren letzten Snapshots enthält. Was müssen wir dann tun, wenn wir ein Array von Daten haben? Nun, wir müssen es durchleben, damit wir mit jedem einzelnen Gegenstand arbeiten können. Kurz danach können wir dann für jeden aufrufen undeine Callback-Funktion übergeben, eine Callback-Funktion übergeben, also für jede Änderung. Aber ich werde den Code in diesen Klammern ausführen. Bevor wir jedoch weiter gehen, lassen Sie uns ein Konsolenprotokoll machen und wir können den Wert der Änderung protokollieren. Speichern Sie diese Datei. Gehen Sie zum Browser, öffnen Sie die Konsole, klicken Sie auf eine dieser Boards und lassen Sie uns eine neue Liste hinzufügen. Nehmen wir an, um Liste eins zu tun, drücken Sie die Eingabetaste, und wir erhalten ein Konsolenprotokoll. Eine Sache, die wir hier beachten müssen, ist diese Art von hinzugefügt. Bedenken Sie dies, denn wir werden sehr bald darauf zurückkommen müssen, aber die Hauptsache, die wir hier brauchen, ist dieses Dokument. Dies ist eine Momentaufnahme der Dokumente, die alle Daten enthalten, die wir benötigen. Wir können sehen, dass es die ID hat. Wenn wir darauf klicken und wir das mit doc.id packen können. Etwas, was nicht so offensichtlich ist, wenn wir dieses Dokument betrachten , ist, wie wir den Rest unserer Listendaten erhalten. Wie wir tatsächlich erhalten können, ist, indem wir eine Datenmethode aufrufen. Gehen wir rüber zu unserem Konsolenprotokoll. Wir können auf unser Dokument zugreifen, das wir gerade in der Konsole gesehen haben und dann die Datenmethode, speichern Sie dies. Wir sehen jetzt innen hier, wir haben unser Listenobjekt, das die Board-ID, die am Datum erstellt, und auch den Titel enthält die am Datum erstellt, . Dies kombiniert mit der ID, für die wir scheinen, wird uns jetzt alle Informationen geben, die wir benötigen, um unsere neue Liste zu erstellen. Gehen wir zurück, wir können unser Konsolenprotokoll entfernen. Dann innerhalb unserer vier jeder, können wir eine Konstante namens doc erstellen. Dies wird den Wert von change.doc speichern uns einen Verweis auf unsere Dokumente geben. Der nächste Schritt besteht darin, unsere Liste zu erstellen, die ein Objekt sein wird. Wir müssen zuerst die ID greifen, die von Doc.id verfügbar ist, was genau das ist, was wir zuvor gesehen haben, so doc ist gleich Change.doc.id. Wir müssen dann den Titel greifen, von doc zur Verfügung steht, die Datenmethode, die wir gerade angesehen haben. Schnappen Sie sich unsere Listenobjekte, und greifen Sie dann den Titel außerhalb unseres Listenobjekts. Wir können dann den Zustand setzen, so this.setstates die Objekte übergeben. Der Zustand, den wir aktualisieren möchten, ist die aktuelle Liste. Als Array werden wir in der aktuellen Liste zusammenführen, so this.date.currentlists dann durch ein Komma getrennt, können wir in unserer neuen Liste hinzufügen. Speichern Sie nun diese Datei, und wir können im Browser zu unserem Projekt zurückgehen. Wir können versuchen, eine neue Liste hinzuzufügen, und dies sollte automatisch hinzugefügt werden. Nehmen wir an, Liste zwei zu tun, drücken Sie die Eingabetaste. Jetzt wird dies aktualisiert, ohne den Browser aktualisieren zu müssen. Wenn wir jedoch jetzt auf eine dieser Listen klicken und löschen, sehen wir nun einen Fehler in der Konsole und auch unsere Liste wurde als drittes Element hinzugefügt. Die Fehlermeldung unten in der Konsole besagt, dass zwei untergeordnete Elemente mit demselben Schlüssel aufgetreten sind. Dies liegt an der Art und Weise, wie wir mit unseren Dokumentänderungen umgehen , und das ist, was wir im kommenden Video betrachten werden. 33. Working: Im letzten Video, das wir besprochen haben, war eine Ära, in der wir einen unserer Aufzüge entfernt haben. Wir haben die Nachricht, die ich an Kinder mit dem gleichen Schlüssel getroffen habe , und dann haben wir eine zusätzliche Liste in unserem Projekt gesehen. Dies liegt daran, wie wir Dinge im Moment in unserer eigenen Snapshot-Methode haben. Wenn wir auf die Tafel dot.js gehen, wo wir an unserem letzten Video gearbeitet haben und dann in die get list Methode. Wir konstruieren immer ein neues Listenelement und setzen dann den Zustand, der in diesem Abschnitt gerade hier ist. Selbst wenn das Element entfernt wurde, erhalten wir immer noch die Änderungsdaten aus der Liste, die wir dann zu unserem Objekt hinzufügen. Setzen Sie es dann auf Status, dies führt zu der Gruppe von Elementen, die Sie hier sehen. Deshalb begegnen darin zwei Kinder mit dem gleichen Schlüssel zu Pixeln. Wenn Sie sich aus dem letzten Video erinnern, sagten wir im Auge zu behalten, wenn wir das Konsolenprotokoll gemacht haben, gab es eine Art von hinzugefügt. Wir können dies verwenden, um entweder den Zustand zu setzen oder das Element aus dem Zustand zu entfernen, je nachdem, ob die Liste hinzugefügt oder entfernt wurde, und wir können dies mit einer if-Anweisung tun. Gehen wir zurück zu unserer board.js. Dann es gerade oben, wo wir unsere Dokumente konstruieren. Wir können eine if-Anweisung hinzufügen, um zu überprüfen, ob die change.type ist es gleich der Zeichenfolge von added. Wenn es so war, können wir die geschweiften Klammern öffnen und schließen. Wir können dann alle unsere Daten aus bestimmten Zuständen, unserer Liste und unseren Dokumenten abrufen. Dann fügen Sie diese innerhalb unserer if-Anweisung hinzu. Jetzt wird unser Zustand nur gesetzt, wenn der Artikel hinzugefügt wurde. Wenn jedoch das Element entfernt wurde, machen Sie einfach unsere if-Anweisung rückgängig, wir können dann eine zweite if-Anweisung hinzufügen, Klammer die change.type. Diese Zeit ist gleich zu entfernen. Wenn es so ist, können wir dann die geschweiften Klammern öffnen und dann können wir den Zustand wieder einstellen, unsere Zustandsobjekte einrichten. Der Zustand, den wir erhalten möchten, sind die aktuellen Listen. Sets unseres Arrays und jetzt, da wir ein Element aus dem Zustand entfernen, können wir die JavaScript-Filtermethode verwenden. Wir können dies tun, indem wir eine Kopie der aktuellen Listen in unserem Array zusammenführen. Fügen Sie diese mit den drei Punkten, .state, .current Listen zusammen. Wir können dann die Filtermethode aufrufen. Innerhalb dieser Filtermethode werden wir eine Funktion für jedes Element in unserer Liste ausführen. Wir möchten nur die Listen zurückgeben, in denen die list.id nicht gleich ist Dot Dot Doc, Dot ID ändern. Nur um zusammenzufassen, was wir hier tun, greifen wir alle unsere Listen aus Staaten und dann werden wir nur unsere Listen zurückgeben , wo die ID für jede bestimmte Liste nicht mit der, die entfernt wurde übereinstimmt. Dies ist von change.doc.id verfügbar. Jetzt bleibt alles, was noch zu tun ist, um dies zu speichern und zum Browser zu gehen. Innerhalb unserer Tafel können wir eine neue Liste hinzufügen. Sagen wir, To-Do-Liste drei fügen Sie dies hinzu. Wir werden alle von diesen verschieben und jetzt werden diese hinzugefügt und entfernt, ohne Fehler zu verursachen. Schließlich haben wir vom letzten Video noch den auskommentierten Abschnitt, in dem wir die Gute-Methode verwenden. Wir können das jetzt sicher entfernen, da wir diesen Code nicht mehr benötigen. Dies ist unsere Liste, die jetzt mit Firebase-Echtzeitdaten arbeitet. Als nächstes werden wir dies auch auf unsere Karten anwenden. 34. Echtzeitkarten mit Updates: Wir können dies auch auf Snapshot-Listener Gesamtkarten hinzufügen. Das heißt, wenn wir Aktualisierungen verursachen, wenn wir Karten hinzufügen oder löschen, werden diese Änderungen sofort in der App widergespiegelt. Lassen Sie uns dies in the.js tun, die für das Abrufen der Karten mit der Methode fetch cards verantwortlich ist. Scrollen wir nach unten, um Karten zu holen. Genau wie bei der Liste werden wir alles auskommentieren, vom einstellbaren Fang bis zur Get-Methode. Dann können wir das jetzt durch unsere Momentaufnahme ersetzen. müssen nur bestellen, indem wir auf Snapshot hinzufügen , die dann in einem Snapshots von jeder Änderung nimmt. Es geht also um die Funktion, und dann werden wir hier drinnen jede der Dokumentänderungen durchleben. Wir können dies mit snapshot.docChanges tun. Für jede Dokumentänderung werden wir die ForEach-Methode ausführen, die in der Änderung übergeben wird. Wir werden unsere Karte so konstruieren, wie wir es mit der Liste getan haben. Erstellen Sie zunächst eine Konstante namens doc, die gleich change.doc sein wird. Wir erstellen dann unseren Kartensatz aller Kartenobjekte. Die ID, erinnern Sie sich an die doc.id, die durch ein Komma getrennt ist. Wir haben auch den Text, der in unserer doc Variable verfügbar ist. Wir haben die Datenmethode, um alle Daten zu erfassen. Die Daten, die wir wollen, stammen aus dem Kartenobjekt und dem Textfeld. Dieser hat auch die Etiketten. Genau wie die obige Zeile nennen wir Daten zugänglich Kartenobjekt, und dann das Feld namens Beschriftungen. Dann, genau wie im letzten Video, müssen wir den Änderungstyp verfolgen. Legen Sie dann den Status fest, je nachdem, ob er hinzugefügt, entfernt oder auch geändert wurde . Lasst uns das machen. Kurz nach unseren Kartenobjekten können wir eine if-Anweisung hinzufügen, um zu überprüfen, ob die change.type zuerst gleich dem hinzugefügten Hinzufügen der geschweiften Klammern ist. Dann können wir den Zustand einstellen, so this.setState. Da dies ein Zusatz ist, werden wir in den aktuellen Karten als Array für den Spread-Operator zusammenführen , greifen this.state. This.states.CurrentCards durch ein Komma getrennt werden wir dann in unseren Kartenobjekten zusammenführen. Unter diesem ersten if-Abschnitt können wir einen zweiten hinzufügen, um zu überprüfen, ob der Änderungstyp, diesmal gleich entfernt sein wird. Wenn dies entfernt wird, werden wir eine sehr ähnliche Sache zu den Listen tun , in denen wir nach der ID filtern werden. Wir werden zuerst this.setStates setzen, unsere Objekte übergeben, wählen Sie die CurrentCards. Wir werden dann this.state.currentCards verbreiten , wo wir die Filtermethode aufrufen werden. Jeder Gegenstand wird innerhalb dieser Kartenvariablen gespeichert, wir werden dann nur die Karten zurückgeben bei denen die ID nicht mit der ID übereinstimmt, die entfernt wurde. Die card.id, die nicht gleich change.doc.id ist,. Nach diesem Abschnitt entfernt, wir dann auch einen geänderten Abschnitt hinzufügen. Dieses Mal, wenn die change.type gleich der Zeichenfolge von modifiziert ist, führen wir diesen Code innerhalb der geschweiften Klammern aus. Das erste, was wir tun müssen, ist die Indexnummer des Elements zu greifen , das in den Zuständen gespeichert ist. Wir können dies innerhalb einer Konstante namens Index beginnen. Dies ist gleich this.state.currentCards. Wir werden dann die find index Methode verwenden. Innerhalb von hier wird jedes Element, das durchläuft, es wird in dieser Item-Variable gespeichert werden. Daher können wir nur das Element zurückgeben, bei dem die item.id gleich change.doc.id ist. Dies wird ein einzelnes Element von unseren CurrentCards zurückgeben. Das Element, bei dem die Element-ID gleich dem Element ist, das geändert wird. Wir brauchen diese Indexnummer, all diese Position unseres Artikels in diesem Zustand, damit wir genau wissen, welches Element aktualisiert werden soll. Der nächste Schritt besteht darin, eine Konstante namens Karten zu erstellen , die allen Karten in unserem aktuellen Zustand gleich sein wird. Wir werden diese mit dem Spread-Operator zu greifen, so this.State.CurrentCards. Wir haben jetzt alles, was wir brauchen, um unseren Staat zu aktualisieren. Wir haben die CurrentCards, die modifiziert wurden. Wir haben die Indexnummer, die die Position ist, die in Zuständen gespeichert ist. Wir haben alle unsere Rechte von Staaten, also können wir jetzt weitermachen und das aktualisieren. Zuerst wählen wir alle unsere Karten in Bundesstaaten aus. Wir wählen anhand der Indexnummer die einzelne Karte aus, die wir aktualisieren möchten. Zum Beispiel wäre dies Karten Null, Karten fünf, Karten 10, alle, welche Zahl dies in unserem Staat ist. Wir werden dies dann durch unser Kartenobjekt von oben ersetzen. Dann setzen Sie dies auf den Zustand mit this.setState Pass in unseren Objekten, so dass die aktuellen Karten jetzt gleich diesem Kartenarray sein werden. Wir können jetzt nach unten scrollen, und entfernen Sie den ursprünglichen Code, also mit der get-Methode, und auch die für jeden. Auch wenn wir wieder nach oben scrollen, können wir jetzt sehen, dass wir diese aktuelle Konstante nicht mehr verwenden. Wir können dies auch entfernen und wartet einfach nur auf unsere CardsRef. Wir werden diese Datei speichern und jetzt gehen wir zum Browser und testen das aus, gehen rüber zum Brett. Ich muss einige Listen hinzufügen, die als ABC hinzugefügt werden. Ich kann auch etwas mehr in unsere verschiedenen Listen aufnehmen. Wir können Karten hinzufügen und dies in Echtzeit aktualisiert. Lassen Sie uns versuchen, in Nummer zwei zu bewegen, die gut ist, und Nummer vier, wenn neu geladen, werden diese immer noch angezeigt. Lassen Sie uns jetzt versuchen, dies zu ändern. Lasst uns eins zu hundert ändern. Speichern Sie unsere Änderungen und diese Änderungen werden jetzt in Echtzeit widergespiegelt. Dies lässt uns jetzt mit unserem Board Listing Karten, alle jetzt aktualisiert werden, ohne den Browser aktualisieren zu müssen. 35. Context: Da ab groß und komplexer werden, brauchen wir oft einen besseren Weg, um unsere Staaten zu verwalten. Übergeben von Requisiten nach unten viele Ebenen, die oft als Requisitenbohrungen bezeichnet wird , kann eine Schicht von Komplexität hinzufügen. Dies ist, wo staatliche Management-Bibliotheken wie Redux eine Rolle gespielt haben, um dies zu verwalten. Redux ist in Ordnung, aber es bedeutet auch, neue Dinge zu lernen, fügen Sie in die Gesamtgröße unseres Abs hinzu, und es kann auch Komplexität hinzufügen, wenn wir es nur verwenden, um den Zustand zu übergeben. Eine Lösung für die Verwendung der React Context API. Kontext wurde erstellt, um Daten zu teilen, die wir in mehreren Teilen unserer App benötigen. In diesem Abschnitt werden wir Firebase verwenden, um Benutzerauthentifizierung bereitzustellen. Benutzer können sich anmelden und sich anmelden und dann nur die Boards sehen, die sie erstellt haben. Dies wäre ein guter Anwendungsfall für die Context-API, da der angemeldete Status auf mehreren Seiten benötigt wird. Bei der Verwendung von Context müssen wir keine Daten mehr weitergeben, in unserem Fall die angemeldeten Zustände von der übergeordneten Komponente über die untergeordneten Komponenten. Stattdessen haben wir im Grunde eine Komponente mit globalem Zustand, die wir direkt in andere Komponenten importieren können, so dass wir auf die Daten zugreifen können. Das erste, was Sie vielleicht denken, ist : „Warum ziehen Sie nicht einfach alle unsere Staaten in diesen Kontext?“ Das ist eine gute Frage. Während dies sicherlich möglich ist, entmutigen die Schöpfer von React dies, da es Komponenten weniger wiederverwendbar machen kann, und die Weitergabe von Requisiten nur ein paar Ebenen, kann eine viel einfachere Lösung sein. Oben im Komponenten-Verzeichnis, lassen Sie uns eine neue Datei für unseren Kontext erstellen. In der Components, New Datei, werde ich dies die AuthContext.js nennen. Dieser Dateiname liegt an uns, aber ich habe den Namen dies der AuthContext, da er die Benutzerauthentifizierung behandelt. Oben oben in der Datei, das erste, was wir tun, ist React aus React zu importieren. Dieses React-Paket ermöglicht es uns, auf die Create-Context-Methode zuzugreifen, die wir jetzt in einer Konstante namens AuthContext speichern können, so dass dies gleich react.createContext mit den Klammern gleich danach ist. Also jetzt haben wir dieses Kontextobjekt. Wir können zwei Dinge erschaffen. Wir brauchen sowohl eine Anbieterkomponente als auch einen Verbraucher. Da diese beiden klingen, wird der Anbieter die Daten an andere Komponenten zur Verfügung stellen, und der Verbraucher erhält die Daten und auch alle Änderungen abonniert werden. Zunächst können wir die Provider-Komponente erstellen, wie wir es bei normalen React-Komponenten tun würden. Wir können eine Klasse namens AuthProvider erstellen, die React.Components erweitert. Da dieser Anbieter für die Bereitstellung von Daten verantwortlich ist, können wir auch in jedem Zustand hinzufügen. Also lassen Sie uns unser Zustandsobjekt einrichten, wo wir den anfänglichen Benutzer auf ein leeres Objekt setzen werden. Wir müssen auch eine zufällige Methode übergeben, genau wie wir es normalerweise tun würden. Hier drinnen werden wir einige JSX-Daten zwischen den Klammern zurückgeben. Dies wird jedoch nicht JSX rendern, wie wir es zuvor getan haben. Stattdessen werden wir eine Context-Provider-Komponente zurückgeben, die so aussieht. So können wir den AuthContext greifen, AuthContext ist die Variable, die wir gerade oben setzen, dann müssen wir auf den Provider mit einem großen P zugreifen, schließen Sie dies ab. Diese Komponente ermöglicht es anderen Komponenten, alle Datenänderungen zu abonnieren. Innerhalb des öffnenden Tags nimmt es einen Wert ein, und dieser Wert kann alles sein, was nicht über Komponenten übergeben wird. Ich werde es verwenden, um den Benutzer von Staaten zu übergeben, die wir gerade vorher festgelegt haben. Innerhalb dieses öffnenden Tags können wir den Wert innerhalb der doppelten geschweiften Klammern setzen. Der Wert-Name des Benutzers, der gleich this.state.user sein wird. Unten unten haben wir alles, was wir in unseren Komponenten verwenden können, wir müssen auch diesen Provider exportieren. Innerhalb der geschweiften Klammern können wir unseren AuthProvider exportieren. Also habe ich dies als benannter Export innerhalb dieser geschweiften Klammern hinzugefügt , da wir auch sehr bald einen Verbraucher exportieren werden. So können wir jetzt diesen Anbieter und auch die Daten, die der Benutzer sind, nehmen und es dem Rest unserer Anwendung über in der app.js zur Verfügung stellen . Drinnen können wir diesen Provider zuerst ganz oben importieren. Importieren Sie innerhalb der geschweiften Klammern, unser AuthProvider. Der Dateipfad wird gleich sein.slash sein, dies befindet sich im Komponentenordner und der Name von AuthContext. Die Art und Weise, wie wir diese Daten für alle Komponenten zur Verfügung stellen , besteht darin, diese als Wrapper-Komponente zu verwenden. Gehen wir zu unserem Browser-Router, und dann können wir das hier hinzufügen. Also oben oben, der Browser-Router. Wir können dies wie eine normale Komponente hinzufügen. Dies ist der Name des Anbieters. Dies hat ein öffnendes und schließendes Tag, so dass wir das schließende Tag nehmen und den gesamten Inhalt innerhalb dieses Anbieters umschließen können. Um dies zu beheben, direkt über dem Browser-Router an diesem Ende, und speichern Sie es dann. Wenn wir jetzt zu unserer Anwendung gehen, und wenn wir eine Aktualisierung durchführen, sehen wir keine Inhalte auf dem Bildschirm. Dies liegt daran, da wir diesen AuthProvider nun als Wrapper verwendet haben, sind alle Komponenten, die sich jetzt darin befinden, nun ein Kind dieser Komponenten. Lassen Sie uns also einen Blick darauf werfen, was im AuthContext vor sich geht. Im Inneren haben wir diesen AuthContext.Provider , der jeden Wert für alle untergeordneten Komponenten zur Verfügung stellt. Diese Komponente hat keinen Inhalt zwischen den öffnenden und schließenden Tags, und deshalb sehen wir keine Inhalte auf dem Bildschirm. Also, wie sagen wir React, dass diese Komponente auch alle Komponenten rendern sollte , die in der app.js verschachtelt sind? Nun, wir können dies mit diesem.props.children tun, die wir innerhalb der geschweiften Klammern hinzufügen können. Geben Sie dieser Datei nun ein Speichern und dann zum Browser. Wir können jetzt sehen, dass alle Komponenten wie erwartet funktionieren. Dies lässt uns nun den Inhalt für andere Komponenten bereitstellen. So können wir jetzt den Verbraucher einrichten, der voran gehen und diese Daten verwenden wird. Im AuthContext ist, wo wir dies einrichten werden. Lasst uns das unten machen, kurz nach unserer Klasse. Das erste, was zu tun ist, ist, eine Konstante namens AuthConsumer zu erstellen. Wir werden wieder den AuthContext verwenden , den wir hier oben eingerichtet haben, aber dieses Mal werden wir Verbraucher anstatt Provider greifen , den wir vorher verwendet haben. Also AuthContext.Consumer, und dann das zweite, was zu tun ist, ist, diesen AuthConsumer zu unserem Export hinzuzufügen , damit er in anderen Dateien verwendet werden kann. Also, kurz bevor wir gehen und testen, dass dies in anderen Komponenten funktioniert, lassen Sie uns einige anfängliche Daten hinzufügen, mit denen wir arbeiten können. Im Moment haben wir ein leeres Benutzerobjekt. Lassen Sie uns einfach einen Namen hinzufügen hier, so können wir testen, dass die Daten die Komponenten erreichen. Also, jetzt speichern Sie das. In der app.js werden wir nun in diesen Daten für alle unsere untergeordneten Komponenten bereitstellen, die diesen Provider verwenden. So können wir jetzt in jede dieser Komponenten innerhalb verschachtelt gehen und dann den Verbraucher nutzen, den wir erstellt haben, um auf diese Informationen zuzugreifen. Lassen Sie uns diese Auth in der Board-Komponente machen. Das erste, was wir oben tun müssen, ist, unseren AuthConsumer aus unserem Dateinamen zu importieren , der ist. /AuthContext, scrollen Sie nach unten zum Rendering. Wir verwenden diesen AuthConsumer dann als Wrapper für alle unsere Inhalte. Also direkt im Gegenzug, können wir in unserem AuthConsumer hinzufügen. Schließ das ab. Lassen Sie uns das greifen, schneiden Sie das fehl am Platz und fügen Sie es ganz unten in unserem Inhalt hinzu. dieser AuthConsumer-Komponente können wir alle Änderungen innerhalb des Kontexts abonnieren. Wenn also ein Benutzer in unserer AuthContext-Datei aktualisiert wurde, würde dies dann an diesen Verbraucher weitergegeben werden. Jedes Mal, wenn es eine Änderung gibt, übernimmt dieser AuthConsumer eine Funktion als Kind. Lassen Sie uns also beginnen, indem Sie alle Daten innerhalb des AuthConsumer ausschneiden. Schneiden Sie das fehl am Platz, ich werde das hier in nur einem Moment hinzufügen. Dann können wir eine Funktion innerhalb der geschweiften Klammern übergeben. Öffnen Sie also die Klammern, richten Sie die Pfeilfunktion ein. Diese Funktion nimmt einen beliebigen Wert, der aus dem Kontext übergeben wird. Also, momentan innerhalb des Anbieters, übergeben wir nur den Benutzerwert, also zurück hier im Verbraucher, können wir den Benutzer innerhalb der geschweiften Klammern übergeben, und dann innerhalb dieses Funktionskörpers können wir nun den Inhalt einfügen, den wir vorher hatten. Fügen Sie dies also hinzu, und jetzt sollten alle Werte, die Sie an die Funktion übergeben haben , jetzt in diesem Code verfügbar sein. Wir können testen, dass dies funktioniert, indem wir diesen Benutzer irgendwo im Inneren hier ausgeben. Lassen Sie uns dies direkt über dem Board-Header tun, innerhalb der geschweiften Klammern, können wir den Benutzer ausgeben und dann auf den Namen von unserem Objekt zugreifen, speichern Sie diese Datei, über den Browser, und jetzt sehen wir den Namen, der von unserem Staat zur Verfügung gestellt. Also werden wir diese Daten innerhalb dieses Verbrauchers in nur einer Weile nutzen, aber jetzt werde ich diesen Namen entfernen, da dies alles jetzt funktioniert. So wie eine kurze Zusammenfassung, erstellen wir eine Kontextdatei, die unseren Benutzer in Zuständen speichern wird. Wir werden diesen Benutzer bald von Firebase greifen, aber für den Moment haben wir hart codiert in einem Wert knapp darunter. Wir haben dann unseren AuthContext eingerichtet, der dann einen Provider und einen Verbraucher hat. Der Anbieter ist für die Weitergabe von Daten an untergeordnete Komponenten verantwortlich. Derzeit ist der einzige Wert, den wir übergeben, dieses Benutzerobjekt, wir erstellen dann einen Verbraucher, der dann die Daten innerhalb einer Komponente nimmt , die sie benötigt, dann in der app.js importiert haben, haben wir die Provider und dann unsere gesamte Anwendung damit eingewickelt. Alle untergeordneten Komponenten haben also Zugriff auf diese Daten in der board.js. Wir verwenden dann den Verbraucher, den wir erstellt haben , der dann ein Kind als Funktion hat, und geben diesen Benutzer dann in unseren Code weiter, damit er überall verwendet werden kann, wo wir möchten. Wie Sie sehen können, ist mit Context ein kleines Setup erforderlich. Deshalb ist es empfehlenswert, vielleicht nur, wenn Requisiten weitergegeben werden, mehrere Ebenen zu verwenden . Aber sobald diese Einrichtung abgeschlossen ist, können wir nun auf diese Daten zugreifen, indem wir einfach einen Verbraucher zu allen Komponenten hinzufügen , die sie benötigen. Als Nächstes werden wir uns mit der Firebase-Authentifizierung beschäftigen, damit sich Benutzer anmelden und sich anmelden können. Wir werden diese angemeldeten Zustände verwenden und sie dann an alle Komponenten weitergeben , die es über Context benötigen. 36. Firebase und Einrichtung: Wir werden diese Kontext-API verwenden, die wir im letzten Video angeschaut haben, plus den derzeit angemeldeten Benutzer zu verschiedenen Komponenten. Wir werden dies mit dem Firebase-Authentifizierungspaket tun, das Benutzern die Möglichkeit hat, sich anzumelden und sich anzumelden, und es wird auch auf Änderungen hören und dann unseren Status aktualisieren. Wenn sich beispielsweise ein Benutzer abmeldet, wird der Status dann aktualisiert und dies wird uns dann alle Informationen verstecken, die er nicht sehen sollte. Ein weiterer Vorteil eines angemeldeten Benutzers ist, dass wir auch die eindeutige ID des Benutzers verwenden können , wenn Sie ein neues Listenboard Konto erstellen. Dies bedeutet, dass wir dann die Daten filtern können, die wir von Firebase erhalten , um nur die Elemente anzuzeigen, die vom angemeldeten Benutzer erstellt wurden. Auch die Firebase-Konsole, wir haben derzeit diesen Datenbank-Link verwendet, aber wir können die Authentifizierung nur für beide einrichten. Gehen Sie zur Anmeldemethode, die diese Schaltfläche ist nur hier. Firebase bietet uns viele verschiedene Möglichkeiten, wie wir Benutzer anmelden können. Wir haben Optionen, soziale Medien wie Facebook oder Twitter zu verwenden , aber die, die ich hinzufügen werde, ist eine E-Mail- und Passwort-Kombination. Lassen Sie uns oben zu diesem gehen, klicken Sie hier, aktivieren Sie dies, und dann können wir mit dieser Schaltfläche hier speichern. Das nächste, was zu tun ist, ist, zu unserer Firebase Config innerhalb unserer Projekte zu gehen, das ist die Firebase.js, und dann können wir hier auch das Auth Paket importieren , genau wie wir es oben mit firestore getan haben, also importieren Sie von Firebase, das Authentifizierungspaket. Dann werde ich unter der Konfiguration eine Verknüpfung zur off -Methode hinzufügen und sie dann innerhalb einer Konstante speichern. Unter der Datenbank werde ich diese Konstante, die FireBaseAuth, aufrufen und dies auf Firebase und dann auf die Auth-Methode setzen. Wir können dann diese Referenz in jede Datei importieren, die sie benötigt, und dann auf die Authentifizierungsmethoden zugreifen, die von Firebase bereitgestellt werden. Um dies zu tun, müssen wir dies auch exportieren, gehen Sie unten nach unten, wie ich Exporte genannt, können wir FireBaseAuth hinzufügen. Um einen neuen Benutzer zu erstellen, benötigen wir auch ein Formular, so dass wir eine neue Komponente für diese innerhalb des Ordners Komponenten erstellen. Lassen Sie uns eine neue Datei namens UserForm.js erstellen. Schließen Sie die Seitenleiste. Wir können dann React aus Reaktionen importieren, innerhalb einer klassenbasierten Komponenten namens UserForm, die React.Component erweitert. Ich werde zwei verschiedene Methoden einrichten, die für die E-Mail und das Passwort sein werden, damit wir die Daten, die der Benutzer eingegeben hat, löschen können. Der erste ist Verweis auf unsere E-Mail-Eingabe, und dann können wir unsere Referenz erstellen, genau wie wir es in früheren Videos getan haben. Wir möchten dies duplizieren und dann ändern, um das Passwort zu sein, und erstellen Sie unsere Rendermethode, die wir gehen, um unser Formular zurückzugeben. Wir können dies mit einem React Fragments umgeben. Dann können wir unser div hinzufügen, das einen Klassennamen für unser CSS namens sign-up-wrapper haben wird. Oben, wir werden eine Ebene zwei Überschrift hinzufügen, die wird der Text der Anmeldung sein oder Konto erstellen. Dann unsere Form, die die beiden Eingänge hat. Denken Sie daran Von hier aus verwenden wir in der E-Mail- und Passwort-Kombination, also müssen wir diese zu unserem Formular hinzufügen. Lassen Sie uns ein Formular mit einem Klassennamen des Anmeldeformulars erstellen. Wir können ein div hinzufügen, das jede Eingabe umgeben wird. Die erste Eingabe wird für unsere E-Mail sein und wir können unsere Referenz anhängen, die wir gerade oben erstellt haben, was gleich dieser Punkt-E-Mail-Eingabe ist. In der nächsten Zeile. Dies hat eine Art von E-Mail. Auch ein Name, der gleich E-Mail sein wird, und dann auch ein Platzhalter von E-Mail. Dann unser zweites div direkt unten. Lassen Sie uns diesen Abschnitt hier greifen, kopieren Sie dies in, und wir können dies ändern, um das Passwort zu sein, so dass die Eingabe wird eine Referenz der Passworteingabe, die Art des Passworts, den Namen des Passworts und auch die -Platzhalter auch. Kurz nach diesem div können wir auch eine Schaltfläche hinzufügen. Lassen Sie uns ein Wrapper div erstellen, dann eine Schaltfläche. Dann drinnen hier der Text der Anmeldung. Schließlich unten unten, vergessen wir nicht, dies mit einem Exportstandard mit dem Namen UserForm auszunutzen. Das Anmeldeformular ist die ersten Komponenten, die ein Benutzer sehen wird, wenn er zum ersten Mal unsere Anwendung besucht. Wir können es innerhalb des Routers auf der Heimroute oder in der app.js hinzufügen. Lassen Sie uns zuerst diese Komponenten ganz oben importieren. Dies wird UserForm genannt, die von verfügbar ist. /Components, und verwenden Sie dann ein Formular. Wir können dies unten in unserem Router hinzufügen. Wenn wir momentan durch alle unsere Routen scrollen, haben wir keinen Schrägstrich für das Zuhause, so dass wir diese ganz oben hinzufügen können. Wir können eine neue Route erstellen. Wir können dies genau mit dem Dateipfad von der Home-Route oder dem Schrägstrich zu sein . Dann sind die Komponenten, die wir rendern wollen, diese UserForm. Auch der Browser, können wir jetzt testen dies aus, wenn Sie zu unserem Projekt gehen und dann zum Schrägstrich gehen, sehen wir jetzt die UserForm-Komponenten. Wir haben jetzt dieses Benutzerformular im Wurzel unserer Projekte. Im nächsten Video werden wir dieses Formular nutzen, um es uns zu ermöglichen, einen neuen Benutzer auf Firebase zu übertragen. 37. Benutzer-Anmeldung: Ich werde ein Formular verwenden, das jetzt bereit ist, auf eine Methode verdrahtet werden, um einen neuen Benutzer zu Firebase zu schieben. Da wir die Kontext-API verwenden, um alle unsere Benutzerdaten zu speichern, werde ich dies dort einrichten. Lassen Sie uns zu allen Kontexten Punkt JS gehen. Dann ganz oben müssen wir zuerst unseren Verweis auf das FireBaseAut-Paket anstoßen. Dies ist ein benannter Export, wir tun dies innerhalb der geschweiften Klammern. Die FirebaseAuth von Firebase-Paket, das ist Punkt-Punkt-Schrägstrich und dann Firebase, dann können wir eine Anmeldemethode erstellen, die Verwendung der E-Mail und Passwort, die in das Formular bald eingegeben werden. Jetzt unten in unserer Klasse, direkt unter den Objekten unseres Staates, können wir eine Anmeldung erstellen, die eine Synchronisierung in der E-Mail und auch das Passwort und dann schließlich die Ereignisinformationen gemacht wird . Drinnen können wir einen Try Abschnitt erstellen und wir können auch Fehler fangen. Anstatt ein Konsolenprotokoll auszugeben, werden wir nicht sehr bald darauf zurückkommen. Bald fügen wir eine Handlinse hinzu. Kurz über dem ersten, was wir tun werden, ist, die erfinderische Mission zu ergreifen und dann das Standardverhalten zu verhindern. Wir können dann dieses FireBaseAuth Paket verwenden, das zu [unhörbaren] beidem führt. Wir werden warten, FirebaseAuth und dann können wir eine Firebase-Methode aufrufen, die CREATE_USER mit E-Mail und Passwort genannt wird . Innerhalb der Klammern nimmt dies die E-Mail und das Passwort ein, das an unsere Methode übergeben wird und das ist alles, was wir jetzt für die Anmeldemethode tun müssen. Das nächste, was jetzt in dieser Datei verfügbar ist, ist, dass diese beiden Provider als Wert sind. Gleich unter dem Benutzer, ebenso wie diese auf eine eigene Linie. Fügen Sie ein Komma hinzu, jetzt können wir auch unsere Anmeldemethode übergeben, die gleich dieser Punkt-Anmeldung ist, genau wie wir es tun würden, wenn Sie Eingabeaufforderungen übergeben. Auf die Anmeldemethode kann nun über die Kontext-API zugegriffen werden. Lassen Sie uns zu einem Benutzerformular Punkt JS gehen. Ich arbeite jetzt diesen Authconsumer an der Spitze importieren. Innerhalb der geschweiften Klammern haben Sie Authconsumer aus unserem Paketnamen, der sich am Dateipfad des Punktschrägstrichs und dann dem AuthContext befindet. Genau wie wir es mit den mutigen Komponenten getan haben, müssen wir alle unsere Inhalte in diesem Verbraucher umgeben , also lassen Sie uns gehen und alles aus diesem Rückgabe-Abschnitt greifen. Wir können das ausschneiden und brauchen den Verbraucher. Erinnern Sie sich an das letzte Video, das wir gesagt haben, dass der Verbraucher eine Funktion als Kind haben muss. Wir können dies nur innerhalb der geschweiften Klammern anstelle einer Funktion hinzufügen und dann innerhalb von hier werden wir die Anmeldemethode innerhalb der geschweiften Klammern übergeben. Dann können wir in diesem Funktionskörper alle Inhalte einfügen, die wir gerade entfernt haben. Mit diesem jetzt als Wrapper alle diese Inhalte nun Zugriff auf die Anmeldemethode. Dies kann in der Schaltfläche als On-Click-Handler platziert werden. Innerhalb des öffnenden Tags, können wir hinzufügen, auf Klick erstellt eine in-line-Funktion, die in der Ereignisinformationen nimmt. Dies wird unsere Anmeldemethode ruinieren und sich daran erinnern, dass dies die E-Mail und das Passwort einnimmt. Die E-Mail ist von dieser Punkte-E-Mail-Eingabe verfügbar, die unser REF Punkt aktuellen Punktwert ist. Getrennt durch Komma, können wir das gleiche für das Passwort tun. Die REF wurde als Passworteingaben bezeichnet und dann den aktuellen Wert abrufen. Denken Sie auch daran, wenn wir dies im Kontext einrichten, wenn wir nach oben scrollen, nimmt dies auch die Ereignisinformationen ein. Wir können das als drittes Argument übergeben. Speichern wir nun diese Datei und testen Sie dies im Browser. Lassen Sie uns hier eine E-Mail erstellen. Dann müssen wir auch ein Passwort hinzufügen, das aus mindestens sechs Zeichen besteht. Klicken Sie auf „Anmelden“. Heim von Firebase. Klicken Sie auf die Registerkarte des Benutzers und jetzt sehen wir unseren einzigen Benutzer, den wir gerade erstellt haben. Wenn Sie keine Benutzer sehen, die sich innerhalb von hier bewerben, gehen Sie zurück und überprüfen Sie den Code und stellen Sie außerdem sicher, dass das Passwort mindestens sechs Zeichen lang ist. Andernfalls wird in der Konsole ein Fehler angezeigt. Wenn Sie Benutzer in diesem Firebase-Konsolengesetz sehen, können Sie jetzt mit dem nächsten Video fortfahren, in dem wir sehen, wie ein registrierter Benutzer sich ein- und abmelden kann. 38. Anlaufzeit: Sobald sich ein Benutzer angemeldet hat, muss er sich auch ein- und abmelden. Wir werden dies auch im Off-Kontext als benutzerdefinierte Methoden tun, beginnend mit der Anmeldung. Lassen Sie uns es auf die off context.js Datei. Dann im Inneren hier unter der Anmeldung, erstellen wir eine neue Methode, es wird Login genannt werden, es wird eine Synchronisierung sein, auch in der E-Mail und Passwort, zusammen mit den Ereignisinformationen, was wir passieren werden, wenn wir dies aufrufen, wie im Abschnitt try, und dann genau wie im obigen Anmeldebereich, wir irgendwelche Fehler übergeben, aber wir werden uns sehr bald mit diesem Abschnitt befassen. Innerhalb des try-Abschnitts werden wir zuerst diese Ereignisinformationen verwenden, um das Standardverhalten zu verhindern, und dann werden wir warten, unsere Firebase aus und dann können wir die Firebase-Authentifizierungsmethode namens Anmelden mit E-Mail und Passwort, alle camel-case. Melden Sie sich mit E-Mail und Passwort an, und dann drinnen, genau wie bei der Anmeldung, erfolgt dies in einer E-Mail, sowie das Passwort und das Anmeldeformular. darunter können wir einen Test durchführen, um zu überprüfen, ob dies mit einem Konsolenprotokoll funktioniert, mit dem Text der eingeloggten, und wir werden diese in einem Moment testen. Logout, wir werden die Abmeldemethode, geeignete Funktion, den Try Abschnitt, den Schnitt Abschnitt kurz danach hinzufügen , als ein Fehler, werden wir bald darauf zurückkommen. Alles, was wir im Abschnitt try tun müssen, ist, auf die Firebase aus zuzugreifen und dann eine Methode namens Abmelden aufzurufen. Sobald dies getan ist, können wir dann den Zustand mit diesem Punkt SetState aktualisieren, [unhörbar] von Objekten, und der Zustand, den wir erhalten möchten, ist der Benutzer. Ich werde das auf ein leeres Objekt zurücksetzen. Wieder zum Testen können wir ein Konsolenprotokoll hinzufügen, das eine Zeichenfolge der Abmeldung ausgibt, bis zum Anbieter. Wir müssen auch diese beiden Methoden zur Verfügung stellen, so dass auf diese innerhalb anderer Komponenten zugegriffen werden kann, so dass wir als Wert Login haben , der gleich diesem Punkt-Login ist, und dann auch durch ein Komma getrennt, wir haben sich ausloggen, über in der Verwendung von Formularkomponenten, können wir dann in der Login-Methode an den Verbraucher drücken. Nur müssen Sie sich registrieren, wir können auch Login hinzufügen, wir können auch in den Benutzer hinzufügen, und jetzt bedeutet dies, dass wir jetzt diese Login-Methode innerhalb dieser Komponenten auslösen können, und wir werden dies tun, indem wir in einer Schaltfläche direkt über der Anmeldung hinzufügen. Lassen Sie uns zum Anmelde-Button scrollen, und dann direkt darüber können wir auch eine neue Schaltfläche hinzufügen, die für die Anmeldung sein wird. Genau wie die Anmeldung unten wird dies in einem onclick-Ereignishandler übergeben , der eine Methode auslösen wird. Wir werden bei unseren Veranstaltungen vorbeikommen. Ich bezeichne eine Inline-Pfeilfunktion mit dem Methodennamen Login. Der Login benötigt Zugriff auf die E-Mail-Eingabe und auch die Passwort-Eingabe, genau wie wir unten haben, zusammen mit den Ereignisinformationen. Ich werde diese drei Zeilen kopieren, diese einfügen, und zwischen den Schaltflächen-Tags werden wir den Text des Logins hinzufügen. Speichern Sie dies, und gehen Sie dann zum Browser, in unsere Projekte, wir sehen jetzt einen Login-Button. Öffnen wir die Konsole. Wir können nun dann unsere E-Mail- und Passwort-Kombination, und dann registrieren wir uns mit. Bevor wir auf Login klicken, lassen Sie uns dies ändern, um eine falsche E-Mail zu sein. Klicken Sie auf Login. Wir sehen eine Fehlermeldung unten in der Konsole. Versuchen wir ein anderes Passwort, loggen Sie sich ein. Wir erhalten auch einen zweiten Fehler. Jetzt können wir die richtigen Anmeldeinformationen beantworten, klicken Sie auf Login, und dann haben wir unser Konsolenprotokoll eingeloggt bekommen. Wir werden sehr bald auf diese Fehlermeldungen zurückkommen. Um dem Benutzer klarer zu sein, was schief gelaufen ist. Das nächste, was ich tun werde, ist eine Header-Komponente zu erstellen, die den aktuell angemeldeten Benutzer anzeigen wird, und dies wird auch sein, wo wir einen Abmelde-Button hinzufügen können. Lassen Sie uns die Header-Komponente jetzt erstellen. Innerhalb der Sidebar, unter Komponenten, können wir unsere header.js erstellen. Wie immer importieren wir reagieren von Reaktionen. Wir werden auch den Off-Consumer benutzen, also werde ich das importieren. Dadurch erhalten wir Zugang zu den Login-Informationen des Benutzers, die wir aus einem Gesetz des Kontexts zugreifen können. Wir müssen keine klassenbasierten Komponenten erstellen, da dies einfach einige Informationen aufnehmen und dann auf dem Bildschirm rendern wird. Lassen Sie uns eine funktionsbasierte Komponenten einrichten. Wir können hier die HTML-Header-Elemente als Wrapper, den authconsumer-Pass im Kind anzeigen , der eine Funktion innerhalb der geschweiften Klammern sein wird, dies nimmt den Benutzer und auch die Abmeldemethode, richten Sie unsere Pfeilfunktion ein. Die Klammern, als Wrapper können wir die Reaktionsfragmente übergeben. Beginnen wir oben links in unserer Anwendung. Wir werden einen Home-Button hinzufügen , der ein Home-Emoji sein wird, wo der Benutzer klicken und auf unsere Homepage weitergeleitet werden kann. Lassen Sie uns ein Element haben, da dies ein Link sein wird, wird der href gleich dem Schrägstrich sein. Dann innerhalb der Span-Elemente werden wir eine HTML-Entität haben, die das kaufmännische Und-Zeichen ist. Der Hash, dann der Wert von 127968, das Semikolon. Reagieren kann auch eine Rolle haben, die dem Bild entspricht, und dann können Sie für die Barrierefreiheit ein Label hinzufügen, das gleich dem Haus Emoji ist. Daneben können wir eine Überschrift der Ebene 1 hinzufügen, die für den Projektnamen von [unhörbar] sein wird. Jetzt auf der rechten Seite dieser Kopfzeile, werden wir einen Abschnitt hinzufügen, der für den Benutzerbereich ist. Wir werden den Kontext verwenden, um die E-Mail des Benutzers anzuzeigen, wenn Sie angemeldet sind. Eine Schaltfläche zum Abmelden, und auch der Text von bitte anmelden, die wir bedingt rendern, wenn der Benutzer nicht eingeloggt ist. Beginnen wir mit den kleinen Elementen. Wir werden den Benutzer anzeigen, und dann werden wir die Benutzer-Punkt-E-Mail ausgeben, die wir gehen, um es aus dem Kontext zu greifen. Danach wird eine Schaltfläche, die einen onclick-Event-Handler haben wird, und dies wird in den Ereignisinformationen nehmen, und dann unsere Abmeldefunktion ausführen, und dann innerhalb von hier können wir in e übergeben, in Leichtigkeit dank, können wir auch den Text der Abmeldung hinzufügen, und dann das dritte, was wir hier hinzufügen werden, zwischen den kleinen Elementen, wird der Text von bitte anmelden. Sehr ähnliche Gruppen zusammen, die Schaltfläche und der Benutzer, und diese werden nur angezeigt, wenn der Benutzer angemeldet ist. Wenn der Benutzer abgemeldet ist, werden diese beide entfernt, und dann wird nur den Text von Bitte melden Sie sich an. Speichern Sie diese Datei, und jetzt können wir diese in unsere app.js importieren. Ganz oben, beim Importieren unserer Header aus dem Dateipfad, Punkt Schrägstrich Komponenten ist, und dann der Header. Diese Komponente wird immer auf unserer Anwendung angezeigt, daher müssen wir dies außerhalb der Router Switch-Komponenten hinzufügen, so gehen Sie einfach Schalter fügen Sie einen beliebigen Header hinzu, schließt aus, speichern Sie dies und laden Sie jetzt den Browser neu. Ich muss möglicherweise auch Standard innerhalb des Headers exportieren. Lassen Sie uns dorthin gehen, direkt am unteren Rand, also exportieren Standard, und den Namen der Header. Versuchen wir es noch einmal. Jetzt haben wir den Header, der in der Anwendung angezeigt wird. Wir können jetzt versuchen, sich mit den richtigen Informationen anzumelden . Wir erhalten die Nachricht von eingeloggt. Lassen Sie uns den Abmelde-Button versuchen, und ich werde die Nachricht von abgemeldet bekommen. Im nächsten Video verwenden wir eine andere Firebase-Methode, um zu hören, wenn sich ein Benutzer an- oder abmeldet, und dann den Status mit dem aktuellen Benutzer zu erhalten. 39. Zuhören von Austauschen: Wenn sich ein Benutzer in unserer Anwendung an- und abmeldet, benötigen wir eine Möglichkeit, dies zu verfolgen und den Status zu aktualisieren. Firebase stellt uns eine Methode dafür namens OnAuthStateChanged zur Verfügung. Dies wird alle Änderungen an unseren Verwendungen des Status hören, und dann können wir unseren eigenen Zustand aktualisieren. Dies ermöglicht es uns, bestimmte Ansichten in unserer App zu schützen, z. B. die Ansicht der Tafel, wenn sich der Benutzer abmeldet. Wir können diesen Listener nicht anhängen, sobald die Komponenten im Authentifizierungskontext eingehängt werden. Lassen Sie uns den Kopf über die Datei von context.js, und dann können wir dies in einer Lebenszyklusmethode namens Komponente hinzufügen wird mounten. Im Inneren hier werden wir auf eine Methode zugreifen , die onAuthStateChanged aufgerufen wird. Im Inneren hier werden wir eine Funktion einrichten, die in den Benutzer nimmt. Wenn der AuthStateChanged dazu führt, dass sich der Benutzer anmeldet, wird der Benutzerwert innerhalb dieser Variablen gespeichert. Wir werden zuerst überprüfen, ob der Benutzer anwesend ist, dh, wenn er sich angemeldet hat. Wir werden dann den Zustand mit dem aktuellen Benutzerwert aktualisieren, mit this.set.state. Weitergabe in unseren Zustandsobjekten, wo wir den Benutzer aktualisieren werden. Unser Benutzerobjekt wird eine ID enthalten, die gleich der user.id sein wird. Wir müssen auch die E-Mail, die von der user.email stammt, greifen . Dieser Code wird ausgelöst, wenn der Benutzer sich auf die else-Benutzerinformationen angemeldet hat , wenn nicht, wir werden einen anderen Abschnitt hinzufügen , der auch den Status zu einem leeren Objekt aktualisieren wird. Dann setzen wir den Benutzer so ein, dass er unser leeres Objekt ist, und wir haben hier unten eine Fehlermeldung, also FireBaseAuth genau so, und wir können auch unseren Zustand oben ändern, um ein leeres Objekt zu sein. Da wir jetzt Firebase erlauben, dies zu kontrollieren. Darunter stellen wir diese Benutzerdaten bereits über Komponenten nach unten als Wert zur Verfügung. Ich scrolle nach unten, wir haben den Benutzer, und auch in den Header-Komponenten. Wenn wir hier einen Blick werfen, haben wir auch diesen Benutzer nur hier importiert, und dann greifen Sie die E-Mail des Benutzers direkt unten. Jetzt gehen wir zu unseren Projekten und wir können das testen. Versuchen wir, uns abzumelden. Wir sehen die Nachricht von abgemeldet. Versuchen wir, uns anzumelden. Gut, dass wir nicht nur die angemeldete Nachricht in der Konsole erhalten, wir sehen auch, dass der Benutzer jetzt in den Header eingegeben wurde. Versuchen wir, uns abzumelden. Auf der Kopfzeile wird auch aktualisiert. Gut, das funktioniert jetzt alles, aber jetzt müssen wir das nur auf die rechte Seite verschieben. Um dies zu tun, gehen wir zur header.js. Wir können alle Benutzerinformationen ausschneiden. Wir können ein div als Rapper erstellen, [unhörbar] zurück in, und dann einen Klassennamen hinzufügen. Aktivieren Sie das CSS, das gleich dem Benutzerbereich sein wird. Speichern Sie dies, und das schiebt nun unseren Benutzerbereich auf die rechte Seite. Gut, so dass wir jetzt feststellen, dass der Benutzer angemeldet ist, und im nächsten Video können wir dies für bedingtes Rendern verwenden. 40. Conditional: Jetzt, wo unsere App ist, wo der Benutzer eingeloggt ist, können wir diese Informationen verwenden, um bestimmte Dinge zu tun. Einer von ihnen ist es, bedingtes Rendering hinzuzufügen, was es uns ermöglicht, Dinge zu tun, wie nur eine Platine anzuzeigen , wenn sie vom aktuell angemeldeten Benutzer erstellt wurde. Nur um hier innerhalb der Ballansicht zu beginnen, geben wir in einem Anmeldekomponenten aus. Dies liegt daran, dass wir in der app.js einen Fehler gerade hier haben, also werde ich das speichern, kurz bevor wir weiter gehen. Jetzt ist das an Ort und Stelle. Wir können auf die board.js gehen, und wir können einige bedingte Rendering für die Board-Komponenten hinzufügen. Um zu beginnen, werde ich eine neue Eigenschaft zum Status hinzufügen, die zunächst eine leere Nachricht sein wird, und dann können wir diese Nachricht aktualisieren, wenn wir keine Tafel finden oder die Tafel entfernt wurde. Lassen Sie uns zu unserer get board Methode gehen, die direkt darunter ist. Hier drinnen versuchen wir, eine Tafel nach der ID zu finden. Wenn kein Board gefunden werden kann, anstatt das Konsolenprotokoll, können wir unsere Nachricht im Zustand aktualisieren. This.setState innerhalb von Objekten, die Eigenschaft, die wir aktualisieren möchten, ist die Nachricht, die einfach eine Reihe von Board nicht gefunden wird. Wir können auch den Abschnitt „Set-Status“ kopieren, und wir können dieses Tableau auch hinzufügen, wenn wir auch das Board löschen. Wenn wir diese Datei speichern und jetzt zu einem unserer Boards gehen, wie diese Board-Komponenten hier, wenn ein Board entfernt wurde oder nicht gefunden werden kann, müssen wir den Board-Titel, die Lösch-Button und auch die neue -Liste unten. Wir können dies in den Board-Komponenten tun, indem einen ternären Operator basierend auf hinzufügen, wenn wir eine Nachricht in einem Zustand haben. Gehen wir zu den Ballkomponenten, scrollen Sie nach unten zu unserem Rendern, und dann direkt über unserem Board-Header können wir unseren ternären Operator innerhalb der geschweiften Klammern hinzufügen. Wir können this.state überprüfen. Diese Nachricht ist gleich einer leeren Zeichenfolge, wir können dann unseren ternären Operator einrichten, so aussieht und das ist nur normales JavaScript. Wenn das wahr ist und wir nur eine leere Zeichenfolge innerhalb der Zustände haben, können wir dann den Header in diesem ersten Satz von Klammern ausleihen. Lassen Sie uns dies tun, indem Sie die schließende Klammer bis zum Ende ausschneiden, scrollen Sie nach unten zu kurz nach dem Board-Header, was dieser Abschnitt hier ist. Wir können das dann innerhalb einfügen, was bedeutet, dass unser Board-Header mit der Schaltfläche Löschen Board ist, und auch, der Text ist jetzt in diesem ersten Satz von Klammern, wenn das falsch ist und wir haben eine Board „Not_found“ Nachricht, wir kann diese Nachricht dann innerhalb des zweiten Satzes von Klammern innerhalb einer Hedge an Elemente ausgeben. Die Nachricht ist mit this.state.message verfügbar. Nun offensichtlich der Browser, lassen Sie uns dies einen Test geben. Wir sehen jetzt unseren Board-Header Abschnitt oben oben. Wenn wir versuchen, dieses Board zu löschen, entfernt dies jetzt den Titel und auch die Schaltfläche, so dass wir mit der Nachricht des Board nicht gefunden. Wir haben immer noch diese neue Listenschaltfläche am unteren Rand, und wir können dies ausblenden, indem wir den Eingabetyp so einstellen, dass er ausgeblendet wird , wenn sich eine Nachricht innerhalb des Status befindet. Gehen wir zurück zu den Ballkomponenten, um unsere neue Liste Eingaben erstellen. Anstatt den Typ zu setzen, um Text zu sein, können wir auch einen ternären JavaScript-Operator innerhalb der geschweiften Klammern hinzufügen, können wir das gleiche wie oben tun. Wir können überprüfen, ob die Nachricht innerhalb des Status gleich einer leeren Zeichenfolge ist. Wenn dies der Fall ist, werden wir den Eingabetyp als Text festlegen. Wenn nicht, werden wir den Eingabetyp so einstellen, dass er ausgeblendet wird. Jetzt speichern wir dies, für dieses aktuelle Board, das wir gerade entfernt haben. Dies wird nun der Eingabetyp entfernt. Lassen Sie uns auf eine andere Platine gehen, alles ist in Ordnung, und die neue Liste Eingänge ist immer noch da jetzt diese komplette Board-Komponente. Außerdem muss alles angezeigt werden, wenn der angemeldete Benutzer es tatsächlich besitzt. Wenn wir in Firebase zurück zu unserer Konsole und in die Datenbank gehen, innerhalb unserer Boards, haben wir unten eine Benutzer-ID hinzugefügt. Diese Verwendung von ABC123 ist derzeit hartcodiert, wenn wir ein neues Board erstellen. Dies muss jetzt viel der angemeldete Benutzer geändert werden, und wir können dies alles in der Create Board Formular tun. Gehen wir rüber dorthin, innerhalb unserer Komponenten, innen hier, müssen wir auf den aktuell angemeldeten Benutzer zugreifen, und auf die Liste können wir unsere Komponenten in den Off-Consumer einwickeln. Lassen Sie uns nach oben gehen, und dann können wir diese importieren, den off Verbraucher, aus dem Dateipfad von verfügbar sein wird.. /components-Ordner und dann den Off-Kontext bis zum Rückgabe-Abschnitt. Wir können das jetzt in den Off-Consumer einwickeln, lassen Sie uns die Komponenten hinzufügen. Denken Sie daran, wie ein Kind, müssen wir die Funktion übergeben, die in den Benutzer nehmen wird, die alle Informationen des angemeldeten Benutzers über die automatische Funktion eingestellt hat. Dann können wir im Inneren von hier den ganzen Rest des Inhalts ausschneiden. Ergreift das Formular bis zum schließenden Formular-Tag, und dann können wir dies innerhalb unserer Funktion einfügen. Jetzt haben wir diesen Benutzer in diesen Komponenten zur Verfügung, wir müssen es an unsere Handle Submit-Methode übergeben, damit wir es zu den Board-Objekten hinzufügen können. Lassen Sie uns zu unserer eigenen Submit-Methode gehen. Wir müssen this.handleSubmit entfernen, und dann kann so Argumente mit diesem übergeben, können wir eine Inline-Funktion verwenden. Richten Sie eine Pfeilfunktion ein, die Sie this.handleSubmit aufrufen können. wir dies in der Zeile haben, können wir nun die Argumente in den Klammern übergeben, also brauchen wir die Ereignisinformationen, und wir müssen auch die User.ID greifen, also wird es aussehen, um Einreichungen zu behandeln. Das ist ein Argument, das wir jetzt auch die UserID analysieren müssen. Diese UserID kann nun innerhalb unseres Board-Objekts verwendet werden, anstatt dieser hartcodierte Wert von ABC123. Dieser Benutzer kann auch zu der if-Anweisung unten hinzugefügt werden, wo wir überprüfen, ob das Board oder Titel und auch der Hintergrund existiert. Wir können auch eine dritte Bedingung hinzufügen, um zu überprüfen, ob das Board oder der Benutzer verfügbar ist, bevor Sie diese in Firebase speichern. Jetzt speichern wir das und gehen zum Browser. Dies muss eingeloggt sein, damit wir unsere eindeutige Benutzer-ID abrufen können. Fügen wir die E-Mail und das Passwort hinzu, mit dem wir uns zuvor angemeldet haben. Sobald wir am Ende mit unserer E-Mail über die Spitze angemeldet sind, müssen wir jetzt auf die URL gehen. Wenn wir zu unseren Benutzern innerhalb einer Firebase gehen, können wir unsere eindeutige Benutzer-ID erfassen. Wir können dann diese offene URL mit Schrägstrich einfügen dies in, gefolgt von einem Schrägstrich Boards. Wir werden dann zu dem Abschnitt weitergeleitet, in dem wir ein neues Board erstellen können, und wir sind jetzt als aktueller Benutzer angemeldet. Lassen Sie uns nun einen Board-Namen erstellen. Lassen Sie uns für unseren Test gehen, ändern Sie die Farbe, erstellen Sie neue Boards. Wir werden sehen, wenn wir versuchen, dieses neue Board zu machen, dass nichts zu passieren scheint. Wenn wir in die Datenbank gehen und hier hineinschauen, werden wir sehen, dass unser Board hier auch nicht hinzugefügt wird. Dies liegt an der Art und Weise, wie unsere Benutzer-ID in der Firebase gespeichert wird. Derzeit, wenn Sie überprüfen, ob der Boardtitel, Hintergrund und der Benutzer da ist, bevor wir diese speichern. Nun, in der Tat wird der Board-Punkt-Benutzer nicht erkannt. Dies liegt daran, wenn wir zu unserem Kontext im Inneren gehen, wenn der Zustand geändert wird, wird dann in unseren Benutzerobjekten aktualisiert, um die ID und E-Mail zu haben. Im Moment setzen wir die ID auf die Benutzer-Punkt-ID, aber wenn wir zu Firebase gehen und in die Authentifizierung, wird die Benutzer-ID tatsächlich in einem Feld namens UID gespeichert. Wir müssen dies jetzt innerhalb des Kontextes aktualisieren. Auf meine Firebase. Speichern Sie dies in unserer App. Versuchen wir noch einmal zu testen, ändern Sie die Farbe, erstellen Sie neue Boards. Jetzt wurde das hinzugefügt. Lassen Sie uns einfach überprüfen, dass der Benutzer innerhalb unserer Datenbank erkannt wurde, in unserem Testboard, anstatt den hartcodierten Wert. Jetzt haben wir unsere Benutzer-ID. Wir können nun diese Benutzer-ID-Eigenschaft auf der Platine nutzen und überprüfen, ob sie mit dem aktuell angemeldeten Benutzer übereinstimmt, bevor wir alle Board-Komponenten rendern. Zurück zu unserem Board dot js. Hier drinnen werden wir einen ternären Operator hinzufügen. Lassen Sie uns dies direkt über unserem Board Wrapper hinzufügen. Innerhalb der geschweiften Klammern. Wir können überprüfen, ob der Benutzer Punkt-ID gleich diesem Punkt-Zustand Punkt aktuellen Boards Punkt-Benutzer ist , sagt über zwei Sätze von Klammern. Wir können dann den Endabschnitt schneiden, so dass wir unsere Board-Komponenten einwickeln können und dann können wir das direkt am Ende hinzufügen. Kurz nach unserem Board-Wrapper , der hier ist, können wir das einfügen. Innerhalb des L-Abschnitts werden wir nur eine leere Spanne hinzufügen , da wir keinen Inhalt rendern müssen. Auch um glücklich zu reagieren, können wir dies auch innerhalb eines Fragments wickeln. Nur innerhalb des Benutzers, können wir eine Reaktion Punkt Fragmente hinzufügen. Öffnen Sie das Tag, greifen Sie das schließende Tag. Dann können wir das unten unten hinzufügen. Kurz nach dieser geschweiften Klammer. Nun lasst uns dies ein Speichern geben und zum Browser gehen, in unsere Board-Ansicht. Denken Sie daran, dass nur Tests mit diesem aktuell angemeldeten Benutzer erstellt wurden. Der Rest hatte alle einen hartcodierten Boardwert. Wenn wir nun auf Testen klicken, sollten sie jetzt funktionieren. Wir versuchen alle Abgänger. Wir sehen jetzt, dass wir nur die leere Spanne ohne Inhalt auf dem Bildschirm gerendert bekommen . Als Extra-Test. Ich werde dies auch in einem anderen Browser mit einem anderen Login-Benutzer testen. Gehen wir nun zu unserer Home-Komponente und registrieren Sie einen zweiten Benutzer. Melden wir uns mit einer zweiten E-Mail an. Dafür werde ich Firefox öffnen oder jeder andere zweite Browser ist in Ordnung. Wir können unseren lokalen Host 3000 in Firefox kopieren. Ich werde mich jetzt als zweiter Benutzer anmelden. Das ist eine, die wir gerade erschaffen haben. Klicken Sie auf Anmelden. Jetzt als eine zweite erneute Überprüfung innerhalb des ursprünglichen Browsers, werde ich mich als der ursprüngliche Benutzer anmelden. Gehen Sie zu unserem Testboard, lassen Sie uns dies öffnen, also jetzt, wenn wir die URL kopieren, die mit diesem Benutzer des Firefox erstellt wurde, können wir nun diese einfügen, drücken Sie Enter. Wir sehen jetzt einen leeren Bildschirm, weil der Benutzer, der eingeloggt ist , nicht viel das Benutzerfeld innerhalb unseres gesamten Boards. Das funktioniert alles gut. Etwas anderes, für das wir ein bedingtes Rendering benötigen, ist diese Header-Komponenten. Wir möchten den Benutzer von E-Mail und Abmelde-Button gruppieren und diese nur anzeigen, wenn eingeloggt. Sobald Sie sich abgemeldet haben, möchten wir diese entfernen und nur den Text von bitte einloggen. Dies wird einfach sein, da die Header dot js-Komponente bereits Zugriff auf den Benutzer aus dem Kontext hat. Lassen Sie uns zu unseren Header-Komponenten gehen. Im Inneren haben wir Zugriff auf unseren Benutzer innerhalb des Verbrauchers, so dass wir nach unten zu unserer Benutzer-E-Mail und auch die Schaltfläche scrollen können. Wir können diese in einem Fragment umschließen. Schließen Sie dies aus, nehmen Sie das schließende Tag und fügen Sie es direkt nach der Schaltfläche hinzu. Wir können dann einen ternären Operator hinzufügen, um zu überprüfen, ob die Benutzer-Punkt-ID vorhanden ist. Wenn ja, werden wir den Code innerhalb dieser ersten Reihe von Klammern ausführen. Wenn nicht, wird der Code innerhalb des zweiten Satzes ausgeführt. Schnappen Sie sich die schließenden Klammern, bis zu den Enden schneiden Sie diese aus, fügen Sie diese kurz nach dem Ende unserer Fragmente ein. Dann können wir den kleinen Abschnitt von Bitte melden Sie sich an und fügen Sie dies in den anderen Abschnitt. Speichern Sie dies und wir können dies im Browser testen. Wir sind derzeit eingeloggt und sehen den Abmelde-Button und die Benutzer-E-Mail. Wenn wir auf Abmelden klicken, wird dies jetzt entfernt und wir erhalten den Text von bitte anmelden. Wir werden auch die gesamte Sicherheit bald sichern, wenn wir einige Berechtigungen auf dem Server hinzufügen. Als nächstes bleiben wir beim bedingten Rendering indem wir nur die Pinnwände für den aktuellen Benutzer anzeigen. 41. Rendering basierend auf Benutzerkonto: In der Ansicht dieses Boards sind wir derzeit als dieser Benutzer angemeldet, der in n1 endet. Von jeder Firebase-Konsole, wenn Sie einen Blick auf die Board-Sammlung werfen, Micron angemeldeter Benutzer , hat Micron angemeldeter Benutzer ,der in n1 endet, dieses Board erstellt. Wenn Sie auf die zweite gehen, wird dies von abc123 erstellt, ebenso wie das dritte und vierte Board. Innerhalb unserer Anwendung sollten wir nur das Board sehen, das der aktuell angemeldete Benutzer erstellt hat. Dies verursachte natürlich ein Problem, weil ein Benutzer nur die Boards sehen sollte , die er erstellt hat, anstatt auch andere Leute. Diese Benutzer-ID wurde bereits als URL-Parameter übergeben. Oben in den home.js Komponenten, lassen Sie uns dies in der Seitenleiste öffnen, wir können diesen Parameter übergeben, wenn wir die get board Methode aufrufen. Innerhalb der Komponente hat mountet, können wir auf diese Punkt-Requisiten Punkt-Übereinstimmung, Punkt-Parameter, und dann die Benutzer-ID über in der app.js zugreifen . Wenn wir diese Datei speichern, gehen Sie zur App, diese Methode ist immer innerhalb dieser Komponenten, wo wir diese Requisiten als Argument erhalten können. Lassen Sie uns also einen Blick auf die Methode werfen, die wir get boards nennen, die gerade hier ist. Wir haben bereits diese Benutzer-ID, die wir früher hinzugefügt haben, aber unsere Gegenwart, sie wurde nicht verwendet. Das erste, was nach der Referenz des Boards zu tun ist, ist, die get-Methode zu entfernen. Dann anstelle dessen, was ich die Where-Methode verwenden werde, die wir früher angesehen haben, die es uns erlaubt, nur die Boards zu erhalten, wo das Board-Benutzerfeld mit der aktuellen Benutzer-ID übereinstimmt. Als erster Parameter ist dies der Board-Feldname, der Board.User ist, durch ein Komma getrennt. Dies ist der Vergleichsoperator , der gleich dem dritten ist. Wir wollen dies mit der Benutzer-ID überprüfen, die von den Parametern übergeben wird. So können wir diese Variable hier innen hinzufügen. Dann können wir auch am Ende die Reihenfolge nach Methode verketten, die die Bretter in der Reihenfolge zurückgeben wird, wann sie erstellt wurden. Wir können dies tun, indem wir auf die board.created @field zugreifen. Dann können wir endlich get aufrufen, um alle unsere Board-Daten in den Browser zu ziehen und jetzt sehen wir keine Boards innerhalb von hier, aber wenn wir mit der rechten Maustaste klicken und inspizieren und dann in die Konsole gehen, sehen wir jetzt die Nachricht der Abfrage erfordert einen Index. Genau wie früher liegt dies daran, dass wir jetzt eine komplexere Abfrage verwenden. So können wir nun auf diesen Link klicken, um dies in Firebase zu erstellen, und dann, wie wir es zuvor getan haben, können wir voran gehen und unseren Index erstellen und dann gibt es ein paar Momente zu erstellen. Sobald dies erledigt ist, gehen wir jetzt zu der Datenbank. Klicken Sie also auf die Registerkarte „Daten“ und dann werden wir alle diese Pinnwände entfernen. Ich habe auch einen Rechtschreibfehler hier, wo dies erstellt werden sollte. So behebt es auch in nur einem Augenblick. Lassen Sie uns die Sammlung verlassen, geben Sie den Namen der Boards ein, da einige leicht von einem hartcodierten Benutzer von abc123 erstellt werden. Nun gehen wir auf die Create Board Form und in der Platine Objekt gerade hier, können wir jetzt gerade hier erstellen. Service-Dateien und jetzt werden die neuen Boards die richtigen Daten haben. Innerhalb von app.js. Wir haben alles, was wir jetzt brauchen, hier drin. Also lasst uns zu den Projekten gehen, lasst uns ein neues Board erstellen. Lassen Sie uns das die Kursideen nennen und es wird blau sein, erstellen Sie auf Ihrem Brett und das scheint gut. Sagen wir „Todo“ für den nächsten. Wählen Sie eine andere Farbe aus. Diese werden also für unseren aktuell angemeldeten Benutzer erstellt. Versuchen wir, uns abzumelden. Wir haben noch keine Umleitung oder Fehlermeldungen eingerichtet, aber wir werden dies im nächsten Video behandeln. Nun gehen wir weiter und melden Sie sich mit einem separaten Benutzer so dass wir diese Boards überprüfen können und nicht für ein anderes Konto angezeigt werden. Fügen Sie die E-Mail und das Passwort hinzu und melden Sie sich dann an. Wir müssen auch die ID für den zweiten Benutzer erfassen. Also von der Authentifizierung, lasst uns die Benutzer-ID greifen, jetzt können wir zu unserem Projekt gehen. Schrägstrich fügen Sie dies in und dann Schrägschrägbretter und jetzt sehen wir nicht die Boards, die von unserem vorherigen Benutzer erstellt wurden, da diese durch unsere Benutzer-ID nach unten gefiltert werden. Lassen Sie uns versuchen, ein neues Board für dieses zu erstellen. Also testen Sie in erstellen Sie ein neues Board, gut. Nun werden alle neuen Pinnwände, die wir hinzufügen, nur für den Benutzer angezeigt, der sie erstellt hat. Später in diesem Abschnitt werden wir auch einige Sicherheitsregeln auf dem Server einführen, um diese beiden zu verhindern. Als Nächstes werden wir jedoch die Anmelde- und Anmeldeerfahrung des Benutzers verbessern , indem wir Weiterleitungen und Fehlermeldungen bereitstellen. 42. Reden und Fehler, Nachrichten: Lassen Sie mich einloggen und auch abmelden. Wir wissen durch die Kopfzeile oben, dass sich so ein Benutzerstatus ändert, aber wir wollen auch umgeleitet werden. Nachdem wir uns eingeloggt haben, sollten wir auf die Board-Seite weitergeleitet werden und ich melde mich ab, sollte uns zurück zu dieser Login-Seite. Wir werden auch einige Fehlermeldungen hinzufügen, wenn Sie sich anmelden und auch anmelden, so lassen Sie den Benutzer wissen, ob seine E-Mail-Adresse und Passwort falsch waren oder ob die E-Mail des Benutzers derzeit bei der Registrierung aufgenommen wird. Alle in der Off-Kontextdatei, die der Off-Kontext-Punkt js ist. Wir haben alle unsere benutzerbezogenen Methoden hier drin. Es wird hier drin sein, wo wir die Weiterleitungen fragen. Um Redirect zu verwenden, müssen wir auf den React Router zugreifen. Scrollen wir nach oben und wir können das aus unserem Routenpaket ziehen. Der Paketname, den wir importieren möchten, ist, dass wir Router haben , den wir früher verwendet haben, und wir importieren diesen aus dem reagierenden Router dom. Dann, wie wir schon früh wissen, müssen wir diese Komponente auch beim Exportieren umwickeln. Scrollen wir nach unten. Ich werde unseren Auth Provider ausschalten , den wir hier exportieren den Verbraucher zurücklassen. Dann sind sie exportieren Standard oben. Wir können dann unsere Komponenten mit Router, Person in der Auth Provider wickeln . Speichern Sie diese Datei und dann über in der App dot js, innerhalb dieser Datei über die Spitze, wir müssen auch den Import ändern, da es jetzt ein Standard-Export ist , indem Sie Bedürfnisse umgebenden geschweiften Klammern entfernen. dies jetzt vorhanden ist, können wir zu unserem Off-Kontext zurückkehren und dann müssen wir zuerst eine Off-Nachricht in Zustände einrichten. Gehen wir zu den Objekten unseres Staates. Dann direkt nach dem Benutzer, können wir eine Off-Nachricht hinzufügen. Was wir zunächst auf eine leere Zeichenfolge setzen werden, gehen Sie zu unserer Anmeldemethode. Sobald ein Benutzer angemeldet ist, können wir dann auf die Board-URL umleiten, die aus der Benutzer-ID besteht. Nachdem wir uns mit der E-Mail und dem Passwort anmelden, können wir auf diese zugreifen, dot requps, dot history, dot push, um auf die Push-Daten des Routers zuzugreifen. Dann innerhalb der hinteren Ticks, werden wir die URL einfügen, die Schrägstrich ist. Dann können wir als Variable auch unsere Benutzer-ID einfügen, die von diesem verfügbar ist, Punkt-Zustand, Punkt-Benutzer, Punkt-ID. Danach müssen wir auch nach vorne Schrägbretter gehen, wird dann der Schnitt Abschnitt unten sein, der Fehlermeldungen empfängt und wir können die Nachricht verwenden, um den Zustand zu setzen. Im Inneren können wir die Kommentare entfernen. Dann können wir die Zustände einstellen und dieser Zustand wird gleich unserer Fehlermeldung sein. Wir können die Off-Nachricht auf Fehlerpunktnachricht gleich setzen. Darunter wird die Protokollierungskomponente genau die gleiche sein. Das erste, was wir tun müssen, ist eine Umleitung zu den Boards des Benutzers zu verursachen. Wir können die Codezeile aus dem Anmeldebereich holen. Wir können diese dann einfügen, nachdem wir uns mit unserer E-Mail und Passwort anmelden. Wir können auch Fehlermeldungen abfangen und dies auch auf Status setzen. Mit diesem Punkt-Set-Status. Wir können die off Nachricht übergeben, die wieder gleich der Fehlermeldung sein wird. Unten in der Abmeldemethode, die darunter liegt, sollte ein Abmelden dazu führen, dass der Benutzer zur Home-Route umleitet, die die Login-Komponenten anzeigt. Nachdem wir uns abgemeldet und den Zustand festgelegt haben, können wir auch mit den Push-Methoden umleiten. Alles, was wir hier drinnen tun möchten, ist, zum Schrägstrich umzuleiten , aber zumindest dort, wo wir irgendwelche Fehler fangen. Wir können auch den Zustand festlegen, der unsere Off-Nachricht aktualisieren wird. Im nächsten Schritt, um unsere Off-Nachricht vom Status an den Provider hinzuzufügen , so dass sie innerhalb von anderen Komponenten verwendet werden kann. Nach dem Abmelden können wir auch die Off-Nachricht hinzufügen, die gleich dieser, Punkt-Zustand, Punkt-Off-Nachricht sein wird. Jetzt habe ich all das an Ort und Stelle. Die Komponente, die wir verwenden möchten, ist in der Benutzerform dot js vorbei. Wir finden das in der Seitenleiste, unten in unserem Off-Consumer. Wir können auch diese Nachricht ausgeben. Es gibt einen ausgeschalteten Nachrichtenübergang von Zuständen. Es kann direkt über dem Formular angezeigt werden. Scrollen wir nach unten zu unserem Formular mit der Klasse des Anmeldeformulars. Wir können dann einen ternären Operator innerhalb der geschweiften Klammern hinzufügen, wo wir überprüfen, ob es eine Off-Nachricht ist, wenn es gibt werden wir eine Span-Elemente ausgeben, die unsere off Nachricht innerhalb der geschweiften Klammern ausgeben wird . Wenn off message false ist, bedeutet dies, dass keine Nachricht den Zustand gesetzt wurde, so dass nach dem Doppelpunkt, können wir einfach setzen dies eine leere Zeichenfolge. Nun lassen Sie uns dies speichern, auf den Browser und integrales Zeichen der Komponenten. Wir können dies zuerst mit einer falschen E-Mail und einem falschen Passwort testen , um zu überprüfen, dass unsere Nachricht an diese Komponenten weitergegeben wird. Lassen Sie uns Fehler innerhalb der E-Mail mit dem richtigen Passwort finden. Ich werde die Konsole plotten. Versuchen wir uns anzumelden. Wir erhalten den Fehler in der Konsole und auch die Fehlermeldung auf dem Bildschirm. Lassen Sie mich verwenden und wissen, dass kein Benutzerdatensatz gefunden wurde. Lassen Sie uns versuchen, die E-Mail falsch hinzuzufügen oder eine Ziffer aus dem Passwort zu entfernen, loggen Sie sich ein. Wir sehen wieder einen Fehler in der Konsole und dann die aktualisierte Nachricht auf dem Bildschirm. Lassen Sie uns dies korrigieren und sich korrekt einloggen, was uns dann zur Ansicht des Boards weiterleitet. Auch die Benutzer-ID übergeben, was bedeutet, dass wir diese nicht jedes Mal eingeben müssen, wenn wir uns anmelden. Lassen Sie uns auch diese Benutzer-ID aus dem Bildschirm entfernen, da dies nicht mehr benötigt wird. Dies wurde in den Home-Komponenten hinzugefügt. Wir gehen zum Home-Punkt js. Werfen wir einen Blick auf die Spannelemente, die hier ganz oben sind. Wir können das entfernen. Ein weiterer Fall, den wir behandeln können, ist ein angemeldeter Benutzer, der wieder zur Home-Route zurückkehrt, ist jetzt, wer sich angemeldet hat und dann auf das Home-Icon klicken, wird dann zur Anmeldeseite weitergeleitet. Wenn wir auf dieser Seite und wir auch eingeloggt sind, müssen wir uns nicht mehr anmelden oder ein Konto erstellen. Stattdessen müssen wir eine Schaltfläche hinzufügen, die den Benutzer zurück in die Ansicht der Tafel umleiten wird. Wir können wieder den ternären Operator verwenden, um das Formular nur anzuzeigen, wenn kein Benutzer angemeldet ist. Lassen Sie uns dies in Visual Studio Code tun. Lets gehen zum Benutzerformular und dann zum div mit der Klasse eines Sign-up-Wrapper. Darüber hinaus werden wir wieder den ternären Operator verwenden , um das Formular auszublenden oder anzumelden, wenn der Benutzer angemeldet ist. Die erste, die wir tun werden, ist zu überprüfen, ob die Benutzer-ID nicht vorhanden ist. Wir können dies mit dem Ausrufezeichen verwenden, um zu überprüfen, ob die Benutzer-Punkt-ID derzeit nicht gesetzt ist. Nach dem Fragezeichen können wir dann unsere Klammern öffnen. Wir können dann den Rest unseres Anmelde-Wrapper einwickeln, indem wir diese beiden nehmen und in Klammern ihn an Ort und Stelle schließen. Scrollen Sie dann nach unten zum schließenden div, bis ganz unten. Nach unserem schließenden Wrapper div können wir dies einfügen. Wir können dann die zweite Bedingung nach dem Doppelpunkt fragen, öffnen Sie die Klammern. Dann ist dies der Fall, wenn der Benutzer angemeldet ist. Wir gehen dann eine Schaltfläche ausgeben, die den Benutzer zurück auf die Platine umleitet. Lassen Sie uns hier eine H mehr Taste hinzufügen. Ein onclick-Ereignishandler , der eine Inline-Funktion auslösen wird. Lassen Sie uns hier eine Fehlerfunktion einrichten, die wir in einem Moment namens Weiterleitungen erstellen werden. Umleiten nimmt die Benutzer-Punkt-ID, und dann dauert es zwischen den öffnenden und schließenden Elementen. Ich bin zu meinen Brettern gegangen. Dieser ternäre Operator verbirgt das Formular, wenn der Benutzer nicht angemeldet ist. Wenn der Benutzer angemeldet ist, werden wir dann eine Schaltfläche rendern, die, wenn sie angeklickt wird, wird den Benutzer auf die Ansicht der Tafel umleiten. Um dies zu tun, müssen wir diese Umleitungsmethode außerhalb unseres Renders erstellen . Scrollen wir nach oben. Erstellen Sie unsere Weiterleitungen, die die Benutzer-ID einnimmt, richten Sie unsere Funktion ein und das einzige, was ist Weiterleitungsmethode tun wird, ist, auf eine neue URL zu pushen. Wir können darauf zugreifen, Dot Requisiten, Dot History. Zugriff auf die Push-Methode. Innerhalb der hinteren Zecken. Wir können zwei Schrägstriche umleiten, unsere Variable hinzufügen, die Benutzer-ID sein wird, und dann Schrägstrich Boards weiterleiten. Speichern wir das und gehen Sie zu unserem Projekt im Browser. Da wir jetzt eingeloggt sind, können wir nun auf diesen Button klicken, ich gehe zu meinen Pinnwänden. Dies leitet uns dann zu unserer Benutzer-ID, gefolgt von den Boards. Als letzte Weiterleitung für dieses Video können wir auch mit dem Home-Emoji oben in der Kopfzeile arbeiten. Dies verweist immer auf die Home-Route, aber wenn ein Benutzer angemeldet ist, wäre es besser, einen Link zu den Boards des Benutzers zu erstellen. Lassen Sie uns zu unserem Header Punkt js gehen. Scrollen wir nach oben zu unserem Link , der Ausgaben in unserem Emoji ist. Wie ich href, anstelle dieses Schrägstrichs, werde ich dies entfernen, fügen Sie die geschweiften Klammern hinzu. Wir können das dynamisch machen. Dann können wir hier auch den ternären Operator verwenden , um zu überprüfen, ob die Benutzer-Punkt-ID vorhanden ist. Wenn sich innerhalb der hinteren Ticks befindet, wollen wir dann wieder auf die Bretter umleiten, die Schrägstrich ist, wir übergeben dann die Benutzer-Punkt-ID, gefolgt von Schrägstrich Boards. Danach können wir auch die else-Bedingung hinzufügen und dann auf die Schrägstrich Route umleiten , wenn der Benutzer nicht eingeloggt ist. Probieren wir das aus. Wenn wir jetzt speichern, ändern Sie die Projekte, wir haben uns jetzt angemeldet, lassen Sie uns auf das Emoji klicken. Wir haben zu unseren Boards weitergeleitet. Wenn wir uns jetzt ausloggen würde dann in das Anmeldeformular nehmen. Dieses Emoji wird uns immer noch auf diese Home-Routen umleiten. Dieser Benutzer leitet ein etwas weiter, das dem Benutzer bei der Navigation in unserer App zugute kommt. 43. Rollen und Berechtigungen: Jetzt ist es an der Zeit, einige Sicherheitsregeln zu unserer Datenbank hinzuzufügen. Ein- und Ausblenden von Dingen am Frontend, wenn ein Benutzer angemeldet ist, ist in Ordnung, um die Benutzeroberfläche so aussehen zu lassen, wie es sollte. Aber wir müssen auch unsere Backend-Sicherheit einrichten, nur für den Fall, dass jemand diese umgeht, indem er eine gefälschte oder modifizierte Anfrage erstellt. Das bedeutet, dass die Datenbank Daten nur sendet, wenn der Benutzer eingeloggt ist und nur die Karten, Listenboards, wenn sie mit dem aktuellen Benutzer übereinstimmen. Ich habe die Listen und Karten aus unserer Datenbank entfernt , um uns einen sauberen Start für dieses Video zu geben, da wir ein neues Feld hinzufügen werden. Das neue Feld, das wir hinzufügen werden, wird genau wie die Boards sein, auf denen wir eine Benutzer-ID hinzugefügt haben. Wir werden von vorne in den boards.js Komponenten beginnen, wo wir eine neue Liste erstellen. Im Inneren hier, wenn wir eine neue Liste erstellen, können wir diesen Benutzer verwenden, der über den Kontext übergeben wird. Um dies zu tun, lassen Sie uns zu unserem Formular scrollen und auf der onSubmit-Methode rufen wir derzeit die createNewList-Methode auf. Ich werde das ausschneiden und dann eine Inline-Funktion hinzufügen, die die Ereignisinformationen aufnehmen wird. Das Hinzufügen dieses Inline ermöglicht es uns, die Benutzer-ID beim Aufruf dieser Methode zu übergeben. Wir können wieder in unsere createNewList-Methode hinzufügen, indem wir die Ereignisinformationen und auch die user.id übergeben. Jetzt können wir mit diesem können wir bis zu CreateNewList außerhalb des Renders gehen , der gerade innerhalb von hier ist. Wir erhalten derzeit die Ereignisinformationen, wir müssen auch die Benutzer-ID als zweiten Parameter direkt nach unseren Veranstaltungen erhalten. Wenn wir dann eine neue Liste erstellen, möchten wir das Benutzerfeld hinzufügen, das dieser Benutzer-ID entspricht, und das gleiche für das Hinzufügen einer neuen Karte. Lassen Sie uns zu den list.js Komponenten gehen. Drinnen hier verwenden wir derzeit keinen Kontext. Beginnen wir mit dem Import des Off-Consumer oben in dieser Datei. Gehen wir ganz nach oben. Wir können Authconsumer aus dem Dateipfad importieren, der ist. /authContext. Scrollen Sie nach unten und wir können jetzt diese AuthConsumer-Komponente verwenden, um unseren Code innerhalb der zufälligen Methode zu wickeln. Müssen Sie nur zurückkehren, erstellen Sie unseren AuthConsumer , der ein öffnendes und schließendes Tag hat. Dann können wir unsere Funktion erstellen, die das Kind sein wird, das den Benutzer innerhalb der geschweiften Klammern eingibt. Richten Sie den Rest unserer Funktion ein. Dann können wir den Rest unseres Codes von diesem div mit der Klasse der Liste holen. Lassen Sie uns all das greifen, bis zum schließenden div. Wir können das rausschneiden. Dann fügen Sie dies in unsere Funktion ein. Jetzt haben Sie Zugriff auf den Benutzer über unseren Kontext. Wenn wir nun nach unten scrollen, wo wir eine neue Karte erstellen, können wir genau das tun, was wir im letzten Video gemacht haben. Wir haben unsere aktuelle Methode aus dem onSubmit herausgebracht. Wir können dann eine Inline-Funktion in die Ereignisinformationen übernehmen übergeben, CreateNewcard aufrufen und dann die Ereignisinformationen übergeben. Dann auch die user.id, die aus dem Kontext übergeben wurde. Bei CreateNewcard wird diese BenutzerID jetzt erhalten. Wir können dies als zweites Argument übergeben. Dann direkt nach CreateDat können wir auch unser Benutzerfeld hinzufügen, das gleich der UserID ist. Es ist jetzt an Ort und Stelle. Wir können dies im Browser ausprobieren. Lassen Sie uns zu unseren Projekten gehen und wir können ein neues Board erstellen. Lassen Sie uns einfach ein, b gehen und sich auch abmelden. Wir können uns jetzt mit einem anderen Benutzer anmelden. Wir haben nun umgeleitet, das ist bei c und auch d. Nun wird dies uns mit verschiedenen Boards für verschiedene Benutzer verlassen. Wir können auch einige Listen und Karten hinzufügen, um dies zu testen. In der Tat wollen wir zu einer der Boards gehen, die erstellt wurde. Lassen Sie uns für c gehen, also 1, 2 und 3 und fügen Sie einige Karten hier alle auf die Konsole. Lassen Sie uns jetzt aktualisieren und werfen Sie einen Blick auf unsere neuen Abstiegskarten. Lassen Sie uns zunächst alle Karten durchgehen und wir haben nun die Benutzer-ID in diesen verknüpft. Lassen Sie uns einfach überprüfen, dass die Liste auch funktioniert. Die funktionieren alle gut. Jetzt haben wir diese Benutzerfelder. Wir können unsere Berechtigungen hinzufügen. Lassen Sie uns auf die Registerkarte Regeln klicken und wir können diese innerhalb der Datenbank setzen. Klicken Sie darauf. Diese Standardregeln ermöglichen es jedem, unsere Datenbank zu lesen und zu schreiben, unabhängig davon, ob sie registriert sind oder nicht. Meine Installation ermöglicht es uns, Dokumente oder Sammlungen zuzuordnen und auch Regeln für jedes beim Lesen, Erstellen, Aktualisieren oder Löschen von Daten einzurichten . Wir haben zuerst diese umgebende äußere Übereinstimmung, die auf unsere Datenbankdokumente verweist. Sie können sich dies als Dateipfad zu unserer Datenbank vorstellen. Diese geschweiften Klammern, die wir im Inneren von hier haben, sind im Grunde Variablen, die sich ändern können, wie die Dokument-ID. Dann innerhalb verschachtelt, können wir bestimmte Dokumente oder Sammlungen angeben , die Sie sichern möchten. Dieses Beispiel zeigt auf alle Dokumente in unserer Datenbank. Es ist eine ziemlich allgemeine Regel. Dann hier drinnen erlauben wir jedem, unsere Datenbank zu lesen und zu schreiben , und das ist natürlich nicht sehr sicher. Ich habe mit diesem Kurs eine Reihe von Regeln zur Verfügung gestellt, die Sie verwenden können, um diese zu ersetzen, und ich habe diese auf meinem Desktop verfügbar. Ich werde die aufmachen. Dies ist eine Textdatei. Wenn Sie dies noch nicht getan haben, gehen Sie voran und laden Sie diese aus dem Kurs herunter, und ich werde all diese kopieren. Gehen Sie zurück zu unserer Datenbank und fügen Sie diese dann an Ort und Stelle ein. Wir können dann auf Veröffentlichen klicken, um diese auf unsere Datenbank anzuwenden. Diese Regeln sind in drei Abschnitte unterteilt, einen für jede unserer Sammlungen. Wir haben die Match-Sektion, die hier ist, wo wir alle Dokumente in unserer Board-Sammlung zusammenpassen. Wir haben auch das gleiche für unsere Listen und auch für unsere Karten. Im Inneren von hier verschachtelt haben wir verschiedene Regeln, wenn wir Daten lesen, erstellen oder aktualisieren möchten , und auch alles aus unserer Datenbank löschen möchten. Zwei Dinge, die Sie hier beachten müssen, wenn Sie diese Firebase-Regeln verwenden , haben wir sowohl eine Anfrage die wir hier sehen, als auch ein Ressourcenobjekt, das wir ziemlich viel innerhalb dieser Regeln verwenden. Dieses Ressourcenobjekt enthält Daten, die derzeit in unserer Datenbank leben, wie hier, wo wir an der Tafel und dann das Benutzerfeld greifen. Wir haben dann das Anforderungsobjekt, das gerade hier ist. Dieses Anforderungsobjekt enthält ein aus Objekt verschachtelt , in dem Informationen über den aktuell angemeldeten Benutzer enthält. Diese Codezeile überprüft, ob der aktuell angemeldete Benutzer mit der Benutzer-ID übereinstimmt, die mit der Platine verknüpft ist. Wenn dies der Fall ist, wird es dem Benutzer erlauben, aus der Datenbank zu lesen. Wenn keine Übereinstimmung vorhanden ist, die Anforderung fehl und der Benutzer kann die Informationen, die er anfordert, nicht lesen. Als nächstes haben wir einige Regeln zum Erstellen oder Aktualisieren der Platine. Sie können auch getrennt gehalten werden, aber in unserem Fall wird es die gleichen Regeln enthalten. Ich habe sie zusammengefasst. Wir haben vorher gesagt, dass dieses Anforderungsobjekt die eingehenden Daten enthält. Request hat auch ein Ressourcenobjekt, das wir hier verwenden, und dies enthält die Daten, die wir beim Erstellen oder Aktualisieren unserer Boards senden. Der Zugriff auf diese ermöglicht es uns, einige Validierungen zur Verfügung zu stellen , um zu überprüfen, ob die Daten korrekt formatiert sind, bevor Sie speichern. Hier überprüfen wir, ob der Boardtitel eine Zeichenfolge ist, wir prüfen, ob der Hintergrund eine Zeichenfolge ist, das erstellte At-Feld ein Zeitstempel ist, und prüfen auch, ob der Benutzer, den wir dem Board-Objekt hinzugefügt haben , ebenfalls gleich ist an den Benutzer, der eingeloggt ist. Dann erlauben wir Benutzern nur, ein Brett tatsächlich zu löschen wenn der Ball vom aktuell angemeldeten Benutzer erstellt wurde. Alles andere unten ist ziemlich ähnlich. Wir setzen ähnliche Regeln für unsere Karten und auch für unsere Listen ein , um diese beiden auch zu sichern. Die Einrichtung unserer Regeln ist nicht allzu schlimm. Sobald wir verstehen, passen wir oft an, was wir in unserer Datenbank haben, indem wir das Ressourcenobjekt mit den Daten vergleichen , die in kommen, und dies ist von den Anforderungsobjekten verfügbar. Nun, wenn wir dies veröffentlichen und zu unserem Projekt gehen, klicken Sie auf das Home-Icon. Ich bin mit einem Benutzer eingeloggt und wir können immer noch die Boards sehen, die wir erstellt haben. Lassen Sie uns einen zweiten Browser mit einem anderen Benutzer öffnen. Wenn wir aktualisieren, sehen wir, dass die Firebase uns noch erlaubt, die Kugeln von jedem Benutzer erstellt zugreifen. Wir können auch in jede von ihnen eingehen. Lassen Sie uns versuchen, nach unserer Liste in Karten zu suchen. Lassen Sie uns versuchen, Informationen zu löschen, und das funktioniert alles. Wir können auch testen, dass, wenn wir einen Link von einem angemeldeten Benutzer kopieren und diesen in einen anderen Browser einfügen, dass wir die Board-Informationen nicht anzeigen dürfen. Dies wird nun einige Backend-Sicherheit zu unserer Anwendung hinzugefügt, zusammen mit einigen Front-End-Prüfungen, um die Benutzeroberfläche in Einklang zu halten. Sie können Firebase natürlich komplexere Regeln hinzufügen, aber diese sind ein guter Ausgangspunkt, um nur angemeldete Benutzer und auch die Board-Ersteller ihre eigenen Daten anzeigen zu lassen. 44. Gebäude für Produktion: Sobald wir mit unserer Anwendung zufrieden sind, ist es an der Zeit, einen Build für die Produktion zu erstellen. Beginnen wir damit, zu package.json in der Seitenleiste zu gehen. Öffne das auf. Wenn wir scrollen nach unten zu dem Skript Abschnitt, die wir gerade hier haben. Wir haben bisher das Startup-Skript für die Entwicklung verwendet und es gibt auch ein Build-Skript, das wir gerade unten haben werden, um unsere App für die Produktion zu erstellen. Also lasst uns das innerhalb des Terminals machen. Ich werde eine neue Registerkarte im Terminal öffnen. Sobald wir darauf sind, können wir npm ausführen, build ausführen und dann das ausschalten. Geben Sie uns ein paar Momente, um voranzugehen und für die Produktion zu bauen , und ich sehe Sie in einem Moment, in dem alles fertig ist. Sobald dies erledigt ist, wenn wir nun die Seitenleiste öffnen, werden Sie in unserem Projekt feststellen, dass wir jetzt einen Build-Ordner haben. Dies enthält, was wir brauchen, um unsere App für die Produktion bereitzustellen. Es entfernt alles, was wir nicht brauchen, wie Entwicklung, Fehlermeldungen und Abhängigkeiten. Wir haben unsere Anwendung mit vielen JavaScript-Dateien für Seiten und Komponenten erstellt. Innerhalb dieses Build-Ordners wird es zusammen gebündelt. Wir müssen also nicht für jede Datei eine separate Anfrage stellen. Es wird auch dasselbe tun, wenn wir mehrere CSS-Dateien haben. Wir können dies sehen, wenn Sie die statische Datei hier öffnen, wir haben ein CSS und auch einen JavaScript-Ordner, und es ist hier, wo unsere Dateien zusammen gebündelt sind. Hier gibt es zum Beispiel für unsere JavaScript-Anleihe einige Bundles, die aufgeteilt sind und Zahlen in den Dateinamen für Einzahlungszwecke haben. Der Dateiname, den wir darin gemacht hatten, der gerade hier ist, ist unser Anwendungscode, den wir geschrieben haben. Wenn wir dies öffnen, können Sie bestimmte Teile unserer Anwendung sehen, die wir erkennen. Also zum Beispiel, wenn wir hier setzen Zustände hinzufügen, haben wir unseren Set-Status Aufruf, wo wir die ausgewählten Labels setzen. Wenn wir weiter durch unseren Code gehen, haben wir einen für geöffnet das Modal. Wir werden also Verweise auf unseren Code sehen, aber dies ist komprimiert und für die Produktion formatiert. Innerhalb der Sidebar haben wir auch Dateien, die mit einer Zahl beginnen, wie diese gerade hier, und dies ist oft ein Drittanbieter-Code, wie alle Knotenmodule, die wir enthalten haben, und diese werden getrennt für die Leistung zwischengespeichert. Dann werden die Laufzeit-Dateinamen, die unten haben werden. Dies sind einige Web Pack-Code, um unsere Anwendung zu laden und auszuführen. Wir haben immer noch unsere Hauptdatei index.html, die jetzt auf unsere Haupt-JavaScript-Datei innerhalb des Build verweist. Gehen wir zu unseren Skripten. Dies verweist nun auf unsere JavaScript-Datei, die sich innerhalb unseres Pakets befindet und dies ist die Hauptdatei, die wir zuvor nachgeschaut haben. Also jetzt haben wir diesen Build-Ordner in unserer Anwendung. Wir sind jetzt bereit, mit dem nächsten Video fortzufahren und unsere App für die Produktion bereitzustellen. 45. Netlify: Es gibt viele Hosting und Provider da draußen. Aber ein wirklich beliebter und einfacher zu gehen ist Netlify. Sie haben auch eine kostenlose Option, um zu verwenden. Wir können unsere Website schnell online mit der Netlify CLI, die uns eine Reihe von Befehlen gibt, um unsere Anwendung in die Produktion zu bringen. Wir können dies im Terminal mit npm tun. Lassen Sie uns zu unserem Terminal gehen und Unicode npm installieren netlify -cli, dann -g, um dies global zu installieren. Wenn dabei ein Fehler angezeigt wird, müssen Sie möglicherweise auch das Pseudo-Schlüsselwort hinzufügen, um als Administrator zu installieren. Sobald diese CLI für Sie installiert ist, können wir dann einen der Befehle ausführen, die netlify deploy genannt wird. Dies öffnet sich im Browser, in dem wir ein Konto erstellen müssen , wenn Sie noch kein Konto haben. Nun, wir haben einige Möglichkeiten, was wir als Nächstes tun möchten. Wir müssen eine neue Website erstellen und konfigurieren , indem Sie die Auf- und Abwärtstasten verwenden und dann „Enter“ drücken. Ich werde durch diesen Teamnamen eingeben. Das ist völlig in Ordnung. Wir können dann einen eindeutigen Website-Namen wählen oder wir können es leer lassen , um einen zufällig generierten Namen zu erhalten, was ich tun werde. Ich habe die Netlify CLI einige Male zuvor verwendet. Wenn Sie es in der Vergangenheit nicht verwendet haben, müssen Sie möglicherweise in den Browser nehmen, um sich anzumelden oder auch die Anwendung autorisieren. Das nächste, was wir tun müssen, ist Netlify mitzuteilen, wo unser Build-Ordner in unserem Projekt befindet. Dies ist einfach der Build-Ordner. Sie sind die gleichen. Bevor wir dies für die Welt zur Verfügung stellen, wird Netlify uns einen Entwurf URL geben, die im Grunde eine Testseite für uns ist, um zu sehen, ob alles zuerst funktioniert. Lassen Sie uns zunächst mit dem Kopieren dieses Entwurfs URL beginnen. Wir können dies kopieren, alle Befehle und klicken, um in den Browser zu nehmen. Hier können wir überprüfen, ob alles in Ordnung ist. Melden wir uns an. Geben Sie dem einen Test. Wir nehmen in unsere Bretter. Lassen Sie uns ein paar davon versuchen. Wir haben auch unsere Liste und unsere Karten erscheinen. Das scheint alles gut zu funktionieren. Wenn wir jedoch nun auf dieses „Home“ -Symbol in der Ecke klicken, erhalten wir dann eine Fehlermeldung der Seite nicht gefunden. Dies liegt daran, wenn wir auf dieser Homepage Link in der Ecke klicken, versuchen wir dann, eine URL zu verlinken, die in/unsere Benutzer-ID und dann /boards endet. Diese Route oder dieses Link-Setup haben wir jedoch nicht in unserer App. All dies wird am Front-End mit dem Router gehandhabt. Die Lösung hierfür bei der Verwendung einer einseitigen Anwendung besteht darin, dem Server mitzuteilen immer nur die Homepage zurückgibt, und dann werden wir jedes Routing am Frontend bearbeiten. Dies zu tun ist ziemlich einfach, wenn wir zurück zu unserem Texteditor gehen, müssen wir einfach eine _redirect-Datei zu unserem Build-Verzeichnisstamm hinzufügen. Öffnen Sie den Build Ordner, erstellen Sie hier eine neue Datei, die _redirect sein wird. Alles, was wir hier hinzufügen müssen, ist/star /index.html 200, speichern Sie diese Datei. Dadurch wird der Server angewiesen, immer die Seite index.html und auch einen Statuscode von 200 zurückzusenden . Jetzt, wenn wir zu unserem Terminal gehen, können wir wieder netlify deploy ausführen, senden Sie dies ab. Es wird uns auch nach dem Deploy-Pfad noch ein fragen , der einfach erstellt wird. Dieser baut jetzt unsere Anwendung und gibt uns eine Live-Test-URL. Wir können darauf klicken und versuchen, sich anzumelden. Das ist in Ordnung. Klicken Sie auf das „Home“ -Symbol. Sobald wir froh sind, dass alles wie erwartet funktioniert, können wir das jetzt in die Produktion bringen. Wir können dies mit einem weiteren Befehl in einem Terminal tun. Dies ist netlify deploy, dann -prod, die kurz für die Produktion ist. Außerdem müssen wir den Build-Pfad übergeben. Dies gibt uns nun eine Live-URL, auf die wir klicken können, öffnet sich im Browser. Jetzt haben wir noch einen Live-Link für unser Projekt im Web , den Sie jetzt mit anderen teilen können. 46. Vielen Dank: Herzlichen Glückwunsch, Sie haben das Ende dieser Klasse erreicht. Vielen Dank für Ihre Anmeldung und ich hoffe, dass Sie Spaß hatten, alles darüber zu erfahren, was React ist und wie wir es verwenden können, um Anwendungen mit JavaScript zu erstellen. Beim Erstellen unserer App haben wir ziemlich viel Boden geklickt, beginnend am Anfang, wo wir uns die Grundlagen wie die Einstellung unserer App, Komponenten, Lebenszyklen, Methoden und Eingabeaufforderungen, haben wir ziemlich viel Boden geklickt, beginnend am Anfang, wo wir uns die Grundlagen wie die Einstellung unserer App, Komponenten, Lebenszyklen, Methoden und Eingabeaufforderungen, mit Status- und Prompt-Validierung. Wir gingen weiter auf Formulare und Eingaben und wie React sowohl kontrollierte als auch unkontrollierte Komponenten für unterschiedliche Situationen verwendet. Unsere Nutzer brauchen auch eine Möglichkeit, durch unsere Seiten zu navigieren. Wir gingen dann zu der Lösung dieses mit einem Front-End-Routing. Zusammen mit anderen Lösungen, die der Router zur Verfügung gestellt hat, wie Router-Eingabeaufforderungen und Status, Push-Methoden und URL-Parameter. React deckt jedoch nur das Frontend unseres Projekts ab, daher brauchen wir oft auch einen Back-End-Service. Zumindest haben wir Firebase angeschlossen, um uns eine Echtzeit-Datenbank zu geben , um alle Pinnwände, Listen und Karten zu starten. Zusammen mit dem Lernen alles über das Erstellen, Lesen, Aktualisieren und Löschen von Daten, zusammen mit verschiedenen Firebase-Methoden und Benutzerauthentifizierungsdiensten. Schließlich haben wir unsere App für die Produktion entwickelt und für den Rest der Welt bereitgestellt, um zu sehen. Ich hoffe, Sie haben diesen Kurs genossen und ich freue mich darauf, Sie in einer zukünftigen Klasse wiederzusehen.