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