ReactJS und Redux - 4 Web-Apps erstellen [4/4] | David Katz | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

ReactJS und Redux - 4 Web-Apps erstellen [4/4]

teacher avatar David Katz, Software Engineer - Coding Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

18 Einheiten (1 Std. 29 Min.)
    • 1. Einführung des Kurses

      1:33
    • 2. Wireframing

      1:27
    • 3. Indexierung

      5:04
    • 4. Navigieren mit React-Router

      3:07
    • 5. Firebase zur Anwendung hinzufügen

      3:53
    • 6. Registrieren

      8:21
    • 7. Schreiben anmelden

      4:15
    • 8. Hinzufügen von Redux zu GoalCoach

      3:18
    • 9. Protokollieren des Benutzers mit Redux

      7:47
    • 10. Entwicklung der App

      8:57
    • 11. Erstellen einer GoalList

      4:59
    • 12. Ziele im Redux Store reduzieren

      3:41
    • 13. Kämmen unserer Reduzierer

      5:40
    • 14. Abbildung der Zielliste

      5:09
    • 15. Ziel vervollständigen

      6:32
    • 16. Ziel entfernen

      3:23
    • 17. Vervollständigung der Ziele in Redux

      6:24
    • 18. Abgeschlossene Ziele darstellen

      5:55
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

497

Teilnehmer:innen

--

Projekt

Über diesen Kurs

Werde ein anspruchsvoller Softwareentwickler, indem du dieses Tutorial zu React JS und Redux befolgen. Als eine der am meisten bezahlten Fähigkeiten für Webentwickler öffnet dir das React Türen und Arbeitsplätze für dich.

 

Dieser projektbasierte Kurs wird dich sofort programmieren. Vier durchdachte Beispielanwendungen in diesem Kurs aufbauen werden deine Fähigkeiten in der modernen Webentwicklung verschärfen.

 

Erlernen Sie zunächst die Prinzipien von React JS durch das Erstellen von zwei Anwendungen. Eins stellt ES6/Babel vor und die andere wie man HTTP in Reaktion mit einer API behandelt. Mit der dritten Anwendung lernen Sie, wie du Browser-Cookies manipulierst. Schließlich kannst du eine ganze App mit voller Authentifizierung und einer Echtzeitdatenbank erstellen, um sie zu beenden.

 

Außerdem lernst du das Engineering von Redux kennen. Du wirst feststellen, dass Redux auf drei einfache Schritte abläuft!

Keine Sorge, wenn du neu in der Web-Entwicklung bist. Einige JavaScript werden helfen, aber dieser Kurs stellt sicher, dass jedes neue Konzept genau erklärt wird.

 

Nimm den Tauchgang in React JS und Redux. Lass uns mit der Codierung beginnen!



Außerdem ist hier ein Link zum Online-Repository für diesen Kurs: https://github.com/15Dkatz/ReactJS_VideoGuides

Triff deine:n Kursleiter:in

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Kursleiter:in

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung des Kurses: willkommen zu einer ausgezeichneten Ressource, wie man Reaktion zu lernen. Ja und Redox. Herzlichen Glückwunsch. Learning React bringt Sie einen Schritt voraus, denn es ist eines der am meisten nachgefragten und bezahlten Fähigkeiten in der Softwareindustrie. Ich habe diesen Kurs mit einem übergeordneten Ziel entworfen, damit Sie in einem Redux auf Ihren Lebenslauf reagiert haben und sich darauf vorbereitet haben, Ihre eigenen Reaktionsprojekte von Grund auf neu zu erstellen. In diesem Kurs erstellen Sie vier Anwendungen. Man wird Sie mit den Prinzipien reagieren und JavaScript es sechs Syntax einführen . Die nächste wird mit einem P I und zeigen, dass Sie einen Deal mit Web-Anfragen hatten In reagieren. Drittens lernen Sie Redux. Es erstellt eine Anwendung, die auch Informationen lokal im Browser speichert. Und schließlich, das Beste von allem, werden wir eine Redox-App haben, die volle Ausbildung für die Anmeldung von Benutzern hat. Als eine Datenbank zurück kam, werde ich jedes neue Konzept genau überprüfen und messen jede neue Idee. Auf diese Weise haben Sie ein gründliches Verständnis des Mantels und der Technik. Außerdem lasse ich dich jetzt auf ein Geheimnis ein. Redux kann sich zunächst kompliziert anfühlen, aber Sie können es auf drei grundlegende Schritte aufkochen. Alles klar, wenn Sie endlich den Schlüssel zum Reagieren und Redux freischalten und sie zu Ihrem Skill Set hinzufügen möchten oder Sie einfach nur Ihre Web-Entwicklungskoteletts aufräumen möchten, dann ist dieser Kurs perfekt für Sie. Also, worauf wartest du? Lassen Sie uns anfangen zu codieren. 2. Wireframing: hallo. Willkommen bei der endgültigen Anwendung, die zusammen mit React und Redux erstellen wird. Go Coach mit dieser Anwendung wird von einer einzigen Seite APS zu reiben App, die mehrere Ansichten bietet . Es verfügt auch über eine Authentifizierung mit einem vollständigen Server, der von Fire Base gehostet wird. Wir haben diese Standard-Signaturseite sowie eine Anmeldung für. Natürlich, wenn Sie einige fehlerhafte Daten eingeben, wie zum Beispiel eine schlechte E-Mail, werde ich sagen, diese E-Mail-Adresse ist schlecht vor dem Ausbessern oder ein wirklich kurzes Passwort, uh, test dot com. Hier sehen wir, dass das Passwort mindestens sechs Zeichen sein sollte, aber sobald Sie in sind, finden Sie ein sehr gepflegtes Dashboard. Hier können Sie Golden mit allen anderen in Ihrem Team teilen, in der Anwendung für jemand anderes zu vervollständigen. Es zeigt, wer das Ziel eingereicht hat und, natürlich, wer später das Ziel abgeschlossen hat, sobald jemand im Team es beendet hat. Also lassen Sie uns voran und schließen Nehmen Sie den Ring zu Mörtel eingereicht durch Foto, und da gehen wir. Unser Aragorn hat das tatsächlich abgeschlossen, so dass wir noch mehr Prinzipien und Konzepte mit Reduktion dieses zu lernen, sowie wie man mehrere Seitenanwendungen mit reagieren behandelt. Ich kann es kaum erwarten, das hier mit euch zu bauen. Also, mit dem gesagt, lassen Sie uns mit der Beschichtung beginnen 3. Indexierung: Lassen Sie uns Tortrainer einrichten. Wieder einmal werden wir React bis nutzen, um unsere Anwendung zu initialisieren. Führen Sie den Befehl aus, erstellen Sie React Gold Coach. Jetzt gehen Sie vor und posten Video, bis Ihre abgeschlossen ist, weil ich springen Sie voran zum Ende meiner Installation. Toll, du bist oft sehr ähnlich zu diesem aussehen sollte. Vergessen Sie nun nicht, in Ihr neues Projektverzeichnis zu navigieren, indem Sie Seedy eingeben oder das Verzeichnis Golden ändern . Jetzt haben wir ein paar bekannte Module zu installieren. Lassen Sie uns laufen und installiert werden. Redux Reagieren Sie drei Enten, reagieren Router und Fire Base und speichern. Alle diese vier Pakete werden bei der Entwicklung unserer Anwendung in Anspruch nehmen. Also noch einmal, machen Sie weiter und pausieren Sie ein Video, bis Ihre Great Once abgeschlossen ist, gehen Sie vor und öffnen Sie das Projekt in Ihrem bevorzugten Code. Der Editor startete auch ein Projekt. Wenn Sie sehen möchten, dass es im Browser ausgeführt wird oder bereits gestartet wird, indem Sie NPM starten. zunächst Lassen Sie unszunächstzum Öffentlichen Ordner gehen und einen Blick auf den Index dot html. Wenn Sie die vorherigen Anwendungen gemacht haben, werden Sie feststellen, dass wir eine sehr hilfreiche CSS-Datei haben, Mrs. So gehen Sie vor und navigieren Sie zu einem neuen Browser-Fenster oder Tab in der Suche. Reagieren Sie Bootstrap. Gehen Sie zu den ersten Schritten und kopieren Sie das geänderte CSS-Stylesheet und fügen Sie es direkt über der Titelkomponente ein. Cool. Als nächstes wie üblich wird wie üblichder gesamte Quellordner gelöscht. Wie wir gelöscht haben, Sie bemerkt, dass die Standardanwendung verschwindet. Jetzt beschwert es sich, dass der Index Punkt gs nicht existiert, aber keine Sorge, denn wir werden unseren eigenen Quellordner erstellen. Also, jetzt im Quellordner, werde ich Indexpunkt Js innerhalb des Indexpunkts Js erstellen. Ich werde unseren Standard React CO zwei wichtige Reaktion von React erstellen. Wir müssen die Reaktion stumm von reagieren nach unten importieren, und dann verwenden wir eine Reaktion nach unten, um die Funktion zu rendern. Sie ist zurückgekehrt. Also ist JSX einfach für Nein. Dann werden wir das Element mit D anvisieren, das root ist, und dann wird es gerade noch nicht funktionieren. Wir müssen unseren Entwicklungsserver erneut starten, weil wir ihn abgestürzt haben und er auf lokalen Host wartet. Es wird neu geladen. Und da steht „ Großartig“. Als Nächstes drauf. Jetzt, da wir sehen, sind Brenda Ring. Wir können fortfahren, um tatsächlich die Einrichtung unserer drei Hauptseiten bereits für diese Anwendung So innerhalb der Quelle erstellen Komponenten-Ordner. Es wurde drei neue Fonds erklärt. Die 1. 1 wird auf der JSX sein. Der nächste wird ein Unterzeichnungspunkt Js x sein. Also Capital s Zeichen in Kamel gehüllt JSX und dasselbe mit Sonne oben JSX. Das S und das U werden also großgeschrieben. Also gebt mit mir hier, wir werden einen Standardcode für jeden schreiben. Also für App, mit Import reagieren und die Komponente von reagieren, werden sie eine Klasse deklarieren, von der eine Komponente erweitert, die einige JSX zurückgibt jsx, die besagt, Yeah, vergessen Sie nicht, es zu exportieren. Niemand benötigt den gleichen genauen Code im Grunde für die Anmeldung und Anmeldung. Normalerweise ist es also keine gute Idee, zu kopieren und einzufügen, aber im Interesse der Zeit gehen wir einfach voran und ändern beide, um sich anzumelden und anzumelden. Jetzt müssen wir Teoh jede dieser Komponenten importieren, so dass es beim Import von Komponenten Schrägstrich zur gleichen Sache mit dem Signieren von Schrägstrich ist und nicht zuletzt, sie sind so ziemlich alle gleich. So kann nicht wirklich sagen, war das Beste, dass die am wenigsten der schlimmsten der größten Großen. Wir haben eine Menge Einrichtungsarbeiten erledigt. Gehen wir also zum nächsten Abschnitt über, in dem wir anfangen, neue Logik hinzuzufügen und Code zu reagieren, den wir noch nicht einmal in den vorherigen Anwendungen verwendet haben. Wir sehen uns dort. 4. Navigieren mit React-Router: Lassen Sie uns diese einfache Anwendung drehen, bis Multi-Seiten-Anwendung jetzt. Um dies zu tun, werden wir die Vorteile der React Writer Paket, die wir beleidigen zuvor gehen in schlechte drei Dinge von reagieren Rough Was? Der Router, die Route sowie der Browserverlauf in Kleinbuchstaben reagieren durchgehend. React React Rather funktioniert ziemlich einfach. Es braucht Pads, die wir von Saiten setzen, und das sind 12 Komponenten, die wir als Requisiten übergeben. So haben wir bereits drei Komponenten erstellt, die wir als Routen zu unserer Anwendung abbilden können. Lassen Sie uns zuerst ein Ratter-Etikett anstelle seines Todes erklären. Und da dieses rotter-Tag normalerweise nur auf dem Host sitzt, wird ein Pfad von Slash vorerst funktionieren. Jetzt hat der Router selbst, anstatt eine Komponente zu haben, anstatt eine Komponente zu haben,einen speziellen Schlüssel, der als Historie bezeichnet wird. Und das Argument ist das, was wir vorhin wichtig. Browserverlauf Browsergeschichte in Historie in einem Runder ermöglicht es uns, zu verschiedenen Routen zu navigieren , die wir in verschiedenen Komponenten mit Methoden wie Push, Pop und Ersetzen angeben . Zum Beispiel fügt der Push eher dem Paar die Navigation von der laufenden Route zur nächsten hinzu und fügt diese Navigation zur Geschichte hinzu, so dass die Geschichte nützlich sein wird, da wir unseren Benutzer auf verschiedene Seiten umleiten , basierend darauf, ob oder nicht, sind sie authentifiziert oder signiert. Niemand sagte ein Par drei Runden Anmeldung, und unsere 1. 1 wird der Apparat sein, die mata Schrägstrich die Komponente, die wir angeben, wird nicht vergessen, den Raum hinzuzufügen unsere nächste Route wird angemeldet werden. Lassen Sie uns Schrägstrich in allen Toren tun. Die Komponente wird in Great in der letzten signiert werden, wie Sie erraten können, wird Schrägstrich Anmelden sein. Sie könnten sagen, es wird Seite sein, eine andere zu retten. Wir hatten diese Logik in ihrer Anwendung. Lassen Sie es uns testen. Also werde ich das bei neu laden, und dann werde ich die Route ändern, um mich anzumelden und es gibt ein Schild. Also lasst uns gehen, um sich anzumelden und dort anzumelden. Und nun, endlich, gehen wir zurück zur App. Cool. Wie wir gesehen haben, haben wir jeden neuen Weg im Euro getestet und wir können sehen, dass wir verschiedene Komponenten haben, die ausschließlich auf unserer Route basieren. Erstaunlich. Jetzt ist es bei Firebase zu dieser Anwendung, so dass wir den Benutzer dazu bringen können, die at-Seite nur zu sehen, wenn es wirklich authentifiziert 5. Firebase zur Anwendung hinzufügen: Lassen Sie uns einige Firebase-Authentifizierungslogik zu dieser Anwendung hinzufügen. Zuerst müssen wir ein Konto auf Feuer Basis dot google dot com erstellen Wenn Sie nicht bereits eine, so gehen Sie vor und navigieren Sie zu Fire basierend auf Google dot com. Jetzt gibt es einen Unterschied zwischen firebase dot com und Fire, basierend auf Google dot com. Firebase dot com ist der alte Konsul, aber wir wollen einen neuen verwenden, also stellen Sie sicher, dass firebase dot google dot com für Sie so aussieht. Sobald Sie diese Website aufgerufen haben, klicken Sie kostenlos auf „Erste Schritte“. Nein, sobald Sie in sind, sollte es so aussehen und in der Lage sein, ein neues Firebase-Projekt zu erstellen, damit es ein neues Projekt erstellt . Nennen Sie es Gold Coach. Schauen wir es uns mal an. Sobald Sie in Ihrem neuen Projekt sind, sollte es so aussehen. Sie können sich alle nützlichen Funktionen und Informationen ansehen, die firebase für Sie bereitstellt , aber im Moment sind wir an einem Link interessiert. Fügen Sie Ihrem Wetter Feuerbasis hinzu. Sie sollten eine Konfliktvariable Pop-up sehen. Siehst du es. Gehen Sie voran und kopieren Sie dieses JavaScript-Objekt. Nun deklarieren wir eine neue Datei neben Index-RGs namens Firebase Punkt Js ganz oben. Wir wollen alles von der Feuerbasis importieren. So importiert Stern als Feuerbasis aus Feuer Bits. Jetzt möchten Sie eine neue konfigurierbare deklarieren, die nur wie die aussieht, die wir kopieren. Also Kosten Config entspricht der, die wir husten von Feuerbasis ernähren. Großartig. Diese Info enthält RGB ikey, dass wir Zugriff Firebase verwenden, unseren Speicher-Bucket zum Speichern von Dateien und vor allem die Off-Domain, die alle unsere authentifizierten Benutzer hostet. Jetzt müssen wir noch tatsächlich initialisieren sind feuerbasierte Anwendung. Also lassen Sie uns ein anderes Konzert namens Firebase bei erklären war nur gleich Firebase Punkt initialisieren bei auf unserem College dicke Variable. Nun werden andere Dateien an dieser Konstante interessiert sein. Also lasst uns exportiert. Niemand sagte zurück zu Index zwielig. Ja, wir werden den Landwirt nicht mehr unbedingt brauchen. nicht Zumindestnicht im Moment. Und dann ganz oben. Lassen Sie uns diese Firebase-App-Variable importieren, die wir in unserer Feuerbasis fünf deklariert haben. Jetzt müssen wir ein wenig Logik für die Authentifizierung hinzufügen. Was wir tun werden, ist an einem Zuhörer, der uns sagt, ob ein Benutzer authentifiziert ist oder nicht. Jetzt erklären wir hier drüben auf unserer Feuerbasis, dass wir uns die Offsets ansehen wollen, und dann fügen wir einen Zuhörer auf Off State geändert hinzu. Es ist eine Wendungen und Versprechen, die wir mit einem Benutzer sehr und sehr einfach umgehen können , Im Moment werden wir überprüfen, ob es einen tatsächlichen Benutzer gibt. Wenn dies der Fall ist, ist das Konsul Log, das ein Benutzer angemeldet oder angemeldet hat. Das ist lange, was dieser Benutzer eigentlich für den Moment ist. Andernfalls werden wir einfach Council Dot Log für jetzt, aber der Benutzer hat sich abgemeldet. Wir müssen es jetzt noch unterschreiben. Dies wird nützlich sein, denn wenn der Benutzer sich in der Making-Rechnung Kopf angemeldet hat und sie zum Dashboard oder zur Anwendung navigiert , wer auch immer, wenn der Benutzer sich abgemeldet hat, wir können sie auf das Zeichen und die Komponente umleiten, wenn sie nicht signiert sind es genial. Jetzt ist all diese Logik großartig, aber wir müssen immer noch das eigentliche Vorzeichen der Komponente aufschreiben, die es einem Benutzer ermöglicht, diesen Listener auszulösen . Also lassen Sie uns richtig, dass die Komponente als nächstes 6. Registrieren: Lassen Sie uns die JSX für unsere Registrierkomponente einrichten. Also gehen Sie zurück, um die JSX anzumelden. Es wird einige Bouchat-Klassennamen nutzen, um den Designprozess unserer Anwendungen zu beschleunigen . Sie uns zunächst LassenSie uns zunächstinsgesamt ändern, def. Nennen Sie es Formular in Zeile für den Klassennamen oder in. Dann haben wir einen einfachen Header, um mit dem Titel Sina zu komponieren. Jetzt brauchen wir eine Formulargruppe, und das wird unser tatsächliches Formular sein, in dem sich der Benutzer anmeldet und alle Informationen eingibt , damit wir eine Eingabe haben. Wer Klassenname wird gebildet Kontrolle. Der Typ wird Text sein, und dann wird der Platzhalter E-Mail sein. Jetzt brauchen wir noch einen Eingang. Dieser Klassenname dient auch der Kontrolle. Bei diesem Typ handelt es sich um ein Passwort, das nützlich ist, um Zeichenschlüssel als Aufzählungszeichen zu verschleiern, um die Informationen des Benutzers zu schützen . Also lasst uns einen anderen Platzhalter haben und Passwort sagen. Sie haben einen einfachen Knopf. Diese Schaltfläche wird sagen, Registrieren Sie sich in der Klasse Tag für diese Schaltfläche wird Bootstrapping sein, das ist einfach BCN. Und dann hätten wir einen Knopf primären. Es wird eine schöne blaue Farbe haben. diesem Grund ist es ein Typ wird auch Button sein und lassen Sie uns speichern und überprüfen, wie das cool aussieht. Das ist also wirklich groß, weil ich gerade vergrößert bin. Aber bei 100% sieht es genau so toll aus. Und ich habe nur ein sicheres Passwort für den lokalen Host bereits, weshalb meins auftaucht. Aber Sie sollten so leer sein. Jetzt müssen wir einen Zustand für unsere Reakt-Klasse einrichten. Wir haben einen Konstruktor mit Requisiten. Erste Zeile wird Super-Requisiten sein, und dann, wie viele von Ihnen sich erinnern werden, ist dieser DOT-Zustand ein Objekt. Und dann haben wir eine E-Mail mit einer leeren Zeichenfolge, das Passwort mit einer leeren Stärke. Jetzt müssen wir unveränderte Funktionen für Eingaben. Also auf Änderung gleich anonyme Ära Funktion. Mit unserer Ereignisvariable gut, sagte der Zustand der E-Mail, zuerst auf das Ereignis, nicht Zielwert. Und dann, natürlich, unser Passwort wird auch Ereignis der Zielpunktwert sein. Schließlich lassen Sie uns eine Anmeldehilfermethode erstellen, die vorerst einfach konsul dot den Zustand protokolliert. Dieser Stott-Zustand beginnt am Tag, dann fügen wir seine Hilfsmethode an den Klick auf unsere Schaltfläche. Lassen Sie uns speichern, inspizieren Sie das Element und dann tippe ich versehentlich. Das ist falsch. Also auf Veränderung sollte auf Veränderung sein, nicht ändern. Und dann lassen Sie uns hier einige neue Informationen hinzufügen. Wie wär's mit Harry Potter Dot Com und dann Harry aufstellen cool. Wir sehen unser Staatsobjekt. Wir haben eine E-Mail von Harry Potter dot com, und ein Passwort ist nur Harry. Großartig. Lassen Sie uns nun die eigentliche Logik hinzufügen, die das Erstellen des Benutzers mit dieser E-Mail und Passwort von der Fire Base behandelt . Also die ganz oben müssen wir unsere Firebase App von Firebase importieren und macht Sie gehen zurück eine direkt, indem Sie den Punkt Punkt Punkt Schrägstrich Kopf, um Ihre Anmeldung Foshan. Und noch einmal wollen wir uns die Off-Domain ansehen. Lassen Sie uns einen Benutzer mit Bösem und Passwort erstellen und hat zwei Argumente, E-Mail und Passwort. Es ist also RG E-Mail und Passwort. Und bevor wir weitermachen, lassen Sie uns erklären, dass E-Mail und Passwort und das sind, dass er außergewöhnlich ist. Es ist in der Steuer auf diesen Punkt Zustand, und dann in hier. Das sollte ausreichen, um einen Benutzer zu schaffen, wer auch immer wir wollen, um Luft zu fangen, die während dieses Prozesses passieren könnte. Aber im Moment, lasst uns einfach Rat diese Haare nicht protokollieren. wir sicher, dass wir es richtig buchstabieren. Sparen Sie jetzt, das ist aufregend. Das sollte fast ausreichen, um sich anzumelden, aber es gibt noch einen Schritt, den wir hinzufügen müssen. Sie müssen jetzt zurück in den feuerbasierten Rat gehen. Gehen Sie weiter und ändern Sie die Größe dieses Kopfes zu Ihrer Authentifizierungsseite, und bevor es funktioniert, müssen wir zu unserer Signaturmethode gehen und E-Mail und Passwort aktivieren. Sinan. Lassen Sie uns das Speichern aktivieren. Jetzt sollten wir in der Lage sein, sich in Ihrem Benutzer anzumelden, damit ich das noch einmal verkleinern möchte. Versuchen wir Harry bei Potter dot com und Harry Potter. Großartig. Also jetzt haben wir einen Benutzer angemeldet hat. Zuhörer. Erinnerst du dich an den Hörer? Wir hatten Indexpunkt Js. Das ist derjenige, der tatsächlich protokolliert. Und wir sehen das auf der zustandsweisen Änderung. Wir haben tatsächlich einen Benutzer und wir haben eine E-Mail, die wir haben, ob ihre E-Mail verifiziert ist, was falsch ist. Sie zeigen Namen, das ist nichts für jetzt und eine Menge Feuerbasis Schulden. Cool. Also wissen Sie was, wenn wir tatsächlich habe ich keinen guten Benutzer anmelden. Was ist, wenn ihre Informationen eine Luft haben? Nun, wir müssen in der Lage sein, das zu behandeln und zeigen, dass für den Fall, dass ein schlechtes Format, dass E-Mail oder ihr Passwort nicht ausreicht, zum Beispiel, so dass es Luftobjekt in unserem Zustand mit einer Nachricht von einem leere Zeichenfolge. Und dann, wenn wir da reinkommen, lassen Sie uns einfach den Luftzustand in die Luft stellen. Cool. Und dann ganz unten, werde ich ein div haben, das einfach den Status der Fehlerpunktmeldung hat. Ich werde retten. Da gehen wir jetzt Sagen wir, zum Beispiel, dass wir uns mit einer unvollständigen E-Mail anmelden. Wie wär's mit Harry? Sehr töpferisch. Es besagt, dass die E-Mail-Adressen Valley formatiert sind. Was ist, wenn wir eine gültige E-Mail haben? Aber unser Passwort besteht aus nur zwei Zeichen. Das Passwort sollte mindestens sechs Zeichen lang sein. Aber was ist, wenn wir denselben Benutzer haben, der versucht, sich zweimal anzumelden? Großartig. Die E-Mail-Adresse wird bereits von einer anderen Zählung verwendet, so sieht so aus, als ob alles funktioniert. Lassen Sie uns einfach ein wenig Styling hinzufügen. Auf diese Weise berührt sich nicht alles, also können wir uns einfach einen Stil von Marge 5% geben und das sieht besser aus. Und für beide unserer Eingaben, lassen Sie uns ihm einen Stil der Marge rechts von 5% als welche Marge geben? Richtig? Fünf Pixel. Wenn Sie diese Größe ändern, wird es wirklich schön aussehen. Ehrfürchtig. Nun, da wir alles korrekt für unsere Seite der Komponente protokollieren, lassen Sie uns auch die Anmeldekomponente erstellen. 7. Schreiben anmelden: Jetzt schreiben wir unser Zeichen und unsere Komponente. Der eigentliche J-Sex wird 90% identisch mit dem aussehen, was wir gerade in Sign Up persönlich geschrieben Wenn ich ein Projekt entwickle, ziehe ich normalerweise vor, Dinge von Grund auf neu zu schreiben, weil es mir erlaubt, darüber nachzudenken, was ich schreibe und mein Gedächtnis für zukünftige Beschichtung. Aber damit spart das Kopieren und Einfügen viel Zeit, wenn es richtig gemacht wird und Zeit für dieses Video zu sparen. Und natürlich kopiere ich einfach die Komponente und füge sie ein. Aber wenn Sie sich selbst eine Herausforderung stellen möchten, schreiben Sie diese Datei von Grund auf neu und ändern Sie die notwendigen Dinge, um sie wie ein Zeichen und ein Formular aussehen zu lassen. Jetzt pausieren Sie hier, wenn Sie dies tun möchten, denn gleich danach wird einfach die Zeichen- und Hilfsfunktion ändern, um die richtige Firebase-Methode zu verwenden . Alles klar, gehen wir. Das ist kopieren und fügen Sie diese Seite der Komponente ein. Tempo es in einem Zeichen es cool. Jetzt müssen wir ändern ist notwendig Dinge von anmelden, um es zu unterzeichnen. Anstatt einen Klassennamen der Anmeldung, lassen Sie uns einen Klassennamen der Anmeldung haben und am unteren Rand macht Sie sich anmelden und sich nicht anmelden . Dann sagt unser texanischen Header zu Element nicht Anmelden, sondern melden Sie sich an und dann sollte unser Button auch sagen Anmelden und nicht anmelden. Jetzt haben wir einen Blick auf diese Hilfsmethode bekommen. Es ruft anmelden auf, aber wir wollten Signieren sagen, und sie mussten den Namen dieser Hilfsmethode in neben in ändern und sich nicht registrieren. Alles klar, das ist es nur für den Austausch. Aber wir müssen unsere Methode jetzt tatsächlich ändern. Und anstatt anzurufen, erstellen Sie Benutzer mit E-Mail und Passwort. Es gibt eine Methode von Firebase in der Off-Domain namens Anmelden mit E-Mail und Passwort. Ehrfürchtig. Wieder einmal werden wir alle Fehler fangen, die auf uns basieren wirft und sagte es als Zustand cool, Nehmen wir an und dann nicht zu bekommen sind in Komponente signiert. Melden wir uns mit Harry bei potter dot com an oder was auch immer Benutzer, den Sie für sich selbst erstellt haben. Überprüfen Sie das Omen Bevor wir Abstellgleis anrufen, melden wir uns an, und dann sagen wir, dass der Benutzer sich angemeldet hat oder sich angemeldet hat, und wir sehen, dass die E-Mail Harry bei Potter dot com ist. Großartig. So funktioniert jetzt alles mit unserem Schild und unserer Komponente. Es gibt also noch eine Sache, die wir jetzt zu beiden Komponenten hinzufügen können. Ein Link zu beiden Formularen, Links und reagieren Router einfach passiert, aber der Import Link von reagieren eher so ganz oben. Lassen Sie uns die Länge von wir handeln Route importieren. Und dann ist es einfach, ein div unter unserer Luftnachricht mit einer Lincoln Side zu unserer Anmeldeseite zu haben. Und dann sagen wir einfach: Melden Sie sich stattdessen an. Lassen Sie uns sparen, und hier haben wir unseren Link. Wenn Sie darauf klicken, dauert es bis zum Anmeldeformular. Sie können sogar rückwärts navigieren und für seine jetzt navigieren. Du könntest wahrscheinlich sagen, was an diesem fehlt. Wir wollen auch, dass der Link an der Spitze noch einmal wird Link von React Router und am unteren Rand importieren . Lassen Sie uns eine Debatte nach der Luftbotschaft führen, was auch ein Link sein wird . Melden Sie sich an. Dann wird dieser bereits ein Benutzerfragezeichen sagen. Wie wäre es, wenn wir es stattdessen zuweisen, aber speichern Sie die Signierung stattdessen und kühlen beide Links funktionieren. Süß, ja, einige Umleitung inter Anwendung. Also, jetzt müssen wir tatsächlich die Umleitung basierend auf Authentifizierung hinzufügen, und wir werden auch einige Redux-Logik als nächstes hinzufügen. Also lassen Sie uns das jetzt tun, da wir die Authentifizierung vollständig eingerichtet haben. 8. Hinzufügen von Redux zu GoalCoach: Lassen Sie uns den Benutzer zu unserer Anwendungskomponente nur basierend auf ihrem Authentifizierungsstatus umleiten . Nun, um die Umleitung zu handhaben, können wir die Vorteile der Browser-Verlauf-Komponente nutzen, die es uns ermöglicht, Routen auf die Navigation dieser Anwendung zu schieben. Also was, wir sind konsul Protokollierung, dass der Benutzer erstellt wurde oder in schwächen einfach auch Browserverlauf aufrufen . Drücken Sie nicht auf unsere APP-Komponente, um automatisch in diese bei Pidge zu navigieren, da wir speichern, die Anwendung Sie möglicherweise bereits auf die APP-Seite umleiten. Dies liegt daran, dass der Fire-Basiscode Logik zum Speichern von Informationen im Browser in ähnlicher Weise wie Cookies enthält . Auf diese Weise ist der Benutzer immer noch angemeldet, wenn er die Anwendung erneut besucht. Wenn sie sich noch nicht abgemeldet haben, so sind Sie auf Aus-Zustand ändern. Listener gibt über Benutzer zurück, weil Feuer Basis für Mitglieder, die Benutzer über diesen Browser. Großartig. Nun, da wir in der App sind, jedoch eine Möglichkeit, brauchen wir jedoch eine Möglichkeit,zum Authentifizierungsformular zurückzukehren und den Benutzer nicht authentifiziert zu werden. Aber zuerst, lassen Sie uns eine weitere Browser-Verlaufsmethode des Ersetzens hinzufügen, denn wenn der Benutzer , jemals auf authentifiziert, wird einfach ein Zeichen umleiten müssen, es kühlen Kopf zurück, um einen Sex zu entführen, und jetzt wird es auf Authentifizierung behandelt. Lassen Sie uns eine Sino-Schaltfläche hinzufügen. Es ist eine einfache wie das Hinzufügen einer Schaltfläche. Hier werden die Klassennamen B TN und BT Endanger sein, was ihm die gefährliche rote Farbe verleiht. Und dann auf dem Klick, werden wir eine Methode aufrufen, die einfach sagt, ein Sino der Button wird sagen Melden Sie sich cool. Keine Notwendigkeit, diese Abmelde-Hilfsmethode innerhalb ihrer Klasse zu deklarieren. Melden Sie sich ab, und dann müssen wir Code hinzufügen. Also importieren Sie Firebase aus Go Back ein Verzeichnis zu fünf Tagen und dann wieder, wir werden diese Feuerbasis bei der Automatisierung finden und dann wird dieses Mal einfach ein Abmelden aufrufen . Lassen Sie uns speichern und es gibt diese große Anmeldung und lassen Sie uns darauf klicken und da gehen wir. Wir sind wieder bei dir. R Sinus informieren müssen Bohnen, so dass der nächste Schritt ist, unsere Benutzerinformationen tatsächlich zugänglich innerhalb. Unsere Anwendung wäre hilfreich, um den Benutzer in Requisiten zur Verfügung zu haben, da die E-Mail, Informationen und andere Informationen über den Benutzer besonders nützlich sein wird, um dies zu erreichen, lassen Sie uns einige Redux-Logik zu dieser Anwendung hinzufügen, die eine -Komponente, um auf die Benutzerinformationen zuzugreifen, wann immer sie sie benötigt. Gehen wir also weiter zum endgültigen Hinzufügen von Redux zu dieser Anwendung. Wir sehen uns dort 9. Protokollieren des Benutzers mit Redux: Wir wollen die Möglichkeit, auf Benutzerinformationen von der Feuerbasis und von der Komponente, die wir erstellen, zuzugreifen . Denn wer weiß, wann die E-Mail-Informationen kommen und gehen? Um diese Funktionalität hinzuzufügen, können wir die Relax-Bibliothek und bei einem User Producer nutzen. Daran erinnern, dass mit dem Hinzufügen von Redux-Logik zu einer Anwendung. Wir denken darüber in drei Schritten nach, die in einer Konstante, einem tatsächlichen Schöpfer ist und fügen Sie den Reduzierer hinzu. Also zuerst, lassen Sie uns eine Konstantendatei direkt neben Index wie und Fire Base nicht hinzufügen, Ja, Ja, Konstanten dot Js Wir exportieren eine Konstante für jetzt namens Signiert in Jetzt müssen wir noch lesen X selbst in unserem Index einrichten. Verdammt, wir brauchen eine Provider-Komponente. Also lassen Sie uns Provider von React Redux importieren. Außerdem müssen wir importieren, die Store-Funktion von Redux selbst erstellt. wir sicher, dass ich es auch richtig geschrieben habe. Lassen Sie uns fortfahren und alles mit dieser Provider-Komponente umschließen. Wir wickeln das ein, ich nehme es an, lege es hier rein. Los geht's. Wenn ich spare, werden wir anfangen, einige Bereiche in ihrer Anwendung zu sehen. So speichert die Requisite sein Zeichen wie im Provider erforderlich. Also noch einmal müssen wir anrufen, erstellen, erstellen, speichern und unserem Anbieter eine Eigenschaft des Geschäfts geben. Also sagen wir, es ist Geschäft gleich zu speichern. Aber jetzt erwartet unser Geschäft einen Reduzierer. Lassen Sie uns also einen neuen Ordner innerhalb der Quelle erstellen, die Produzenten aufrufen und dann innerhalb von Reduzierungen. Lassen Sie uns eine Indexpunkt-JS-Datei deklarieren. Nun, bevor wir diesen Reduzierer erstellen, lassen Sie uns zuerst Untätigkeit Schöpfer definieren, den unser Produzent verarbeiten kann. So auch innerhalb der Quelle. Lassen Sie uns eine Aktionen kälter erklären, und diese Aktionen werden einen Index Sotschi s fallen haben und dass wir importieren müssen, dass in Konstanten signiert von sind Konstanten. Stellen Sie also sicher, dass Sie ein Verzeichnis mit dem Punkt nach oben gehen, Punkt Schrägstrich In unserer ersten Aktion wird eine Funktion namens Log User sein. Es wird eine E-Mail im Parameter für jetzt haben, und dieser Aktionsersteller erstellt eine Aktion, so dass wir ein einfaches JavaScript-Objekt haben, dessen Typ angemeldet wird und sich daran erinnern, dass jede Aktion innerhalb von Lesungen diese Typeigenschaft benötigt und vorerst wird einfach einen E-Mail-Schlüssel mit der E-Mail zurückgeben, die wir bei unserer langen Nutzung bestanden haben. Das sollte also für Taten ausreichen. Jetzt können wir tatsächlich die Ers reduzieren und diese Produzenten definieren, um diesen Aktionsersteller zu handhaben , also müssen wir auch Anmelden aus Konstanz importieren und eine Benutzervariable mit Let deklarieren , weil wir später mit eine keine E-Mail für jetzt. Dann werden wir standardmäßig anonyme Pfeilfunktion mit zwei Parametern exportieren, die erste 1 ist unser Zustand , der der Benutzer direkt hier sein würde. Aber wir haben automatisch initialisiert und dann ihre Aktion. Und erinnere dich an das Muster mit den Produzenten. Wir schalten diesen Aktionspunkt-Typ ein. Wir kümmern uns um den ersten Fall von eingeloggt. Gehen wir weiter und holen uns die E-Mail von ihrer Aktion. Dann werden wir sagen, dass unser Benutzer jetzt gleich der neuen E-Mail ist, die wir hier finden, wenn wir Musik Kurzschrift, Syntax verwenden Musik Kurzschrift, , und sie werden gehen und diesen neuen Benutzer zurückgeben. Denken Sie daran, mit switch-Anweisungen wir mit switch-Anweisungenimmer einen Standardfall wünschen, und unser Standardfall wird darin bestehen, den Zustand zurückzugeben , der diesem Benutzer direkt hier initialisiert wird. Großartig. Jetzt, da wir Reducer definiert haben, können wir es mit einem Index importieren. Also lassen Sie uns unseren Produzenten von unseren Produzenten Komponente importieren und dann argumentieren Reduzierer innerhalb erstellen Geschäft, die diese Luft loswerden sollte. Cool. Jetzt gibt es eine andere Sache, wenn wir unsere Anwendung schieben, wenn der Benutzer für die at-Seite mit Browserverlauf gültig ist , wir wollen auch den Benutzer mit dem Aktionsersteller sperren, den wir gerade definiert haben. Also lassen Sie uns wichtige Log-Benutzer von unseren Aktionen und dann diese Funktion aufrufen, haben wir nicht eine ganze Komponente wie üblich Matt Dispatcher Requisiten und binden unsere Aktion Creator. Daher können wir diese Stopp Requisiten nicht protokollieren Benutzer, weil, na ja, wir haben keine Klasse. jedoch das ursprüngliche Store-Objekt, Wir habenjedoch das ursprüngliche Store-Objekt,das innerhalb dieser Stelle zugänglich ist, so dass wir tatsächlich sogar einen besser machen können als die Stop-Requisiten genannt und stattdessen den Store Dot Dispatch-Log-Benutzer verwenden und unsere Aktion von ganz unten aus unserer Anwendung. Also denken Sie daran, wir müssen unsere E-Mail-Variable übergeben. Dann können wir diese E-Mail-Variable innerhalb unseres Benutzerobjekts finden. Diese Firebase gibt uns, was gespeichert scheint dann in oder Aktionen, die wir tatsächlich haben, um die Aktion zurückzugeben . Ihr habt das wahrscheinlich noch einmal erwischt, lasst uns zurück zum Index Sotschi s . Also Harry Potter Dot com. Wir haben ihn vorhin gemacht. Lassen Sie uns anmelden und es scheint, als ob alles funktioniert Also, was wir tatsächlich tun müssen, ist schnell den Kartenstatus an Requisiten zu dieser Komponente anzuschließen und mit einem Redox verbunden, um zu sehen, ob wir tatsächlich einen Benutzer in unserer Redux-Anwendung haben. Also lassen Sie uns verbinden von React Redux importieren. Lassen Sie uns schnell eine Karte definieren. State to Requisiten Funktion Zuordnung Zustand Requisiten übergeben das State-Argument. Lassen Sie uns Rat diesen Zustand jetzt nicht protokollieren, um zu sehen, ob wir tatsächlich einen Benutzer finden, der dort ein leeres Objekt auf diese Weise gedreht hat . Es wirft nicht erben Atis. Lass es uns verbinden. Wir werden unsere Karte Staat Requisiten haben, die keine Action-Schöpfer zuordnen, also könnten wir nur Mühle für ein zweites Argument haben. Schauen wir uns das Ganze an, Sagen wir, und wie wir es tun, bemerken wir, dass wir etwas in Zustand haben und es ist unser Objekt mit unserer E-Mail darin. Spektakulär. Wir haben gerade viel Zeit damit verbracht, Lesevorgänge für die Anwendung anzuschließen, und es funktioniert. Gehen wir also zum nächsten Video, wo wir anfangen, unsere eigentliche Anzeigenseite zu strukturieren 10. Entwicklung der App: lassen Sie uns diese Anwendungsstruktur entwickeln. Wir wollen einen Titel zu tun haben, vor allem mit einem Header. Drei-Element-Tag, das nur Ziele sagt. Lassen Sie uns diesen App-Partner hier herausnehmen. Sieben. Div. Lassen Sie uns einen Kopf von drei oma Tag, die nur sagt Ziele Cool. Nein, was ist Haltung lebt? Die 1. 1 wird sagen, ich würde gehen und die 2. 1 wird Torliste sagen. Lasst uns jetzt retten. Natürlich fehlte in diesen zwei Tagen schwer an Funktionalität, aber wir werden beide Daves als tatsächliche Komponenten einzeln erstellen. zunächst Lassen Sie unszunächstdie Erstellung einer Werbe-Gold-Komponente behandeln. Gehen Sie also in den Komponenten-Ordner und erstellen Sie eine neue Datei namens ad goal dot jsx at goal dot jsx. Nein, es ist der Import unseres Standard-Reaktionscodes, also müssen wir die Komponente importieren. Das wird eine Komponente von React sein. Lassen Sie uns erklären, dass sie Gold-Klasse hatten, die Komponente erweitert. Lassen Sie uns exportieren und gehen standardmäßig. Lassen Sie uns am Rendern arbeiten und einige J s ausgezeichnet zurückgeben. Also in ihrer Ad-Girl-Komponente, werden wir ein Gesamtdiv haben. Dann nutzen wir Bootstrap wieder und haben ein Formular in der Linie, in dem der Benutzer sein Ziel eingeben kann . Dass sie den Anfang wollen. Wir haben eine Formgruppe schon ein paar schöne Stiefel, Geschäfte, die für uns strukturieren. Lasst uns unser Eingabefeld haben. Sein Typ wird Text sein. Der Platzhalter wird ein Ziel hinzufügen. Der Klassenname wird Steuerung gebildet werden, die es einige schöne Styling geben wird. Dann, später, werden wir einen Knopf daneben haben. Also lassen Sie uns es etwas Styling bereits von Rand richtig geben? Fünf Pixel. So berühren sie sich nicht, wenn sie nebeneinander ausgerichtet sind. Und dies muss ein inneres Objekt hier sein, da die style-Eigenschaft für die Eingabe ein Objekt erfordert . Lassen Sie uns nun damit umgehen, diese Schaltfläche zu erstellen. Es ist Klasse. Namen werden tiene und Knöpfe Erfolg sein, was ich glaube, gibt es eine grüne Farbe. Es ist Typ wird Schaltfläche in einem Unterklassennamen sein. Es ist Klassenname. Jetzt geben wir ihm einen echten Titel, also sagen wir Summit. Und dann wollen wir einen Zustand innerhalb dieser Komponente haben. Lassen Sie uns Konstruktor definieren. Wer ist Requisiten wird das erste Argument Super-Requisiten sein. Also hatten wir diesen objektorientierten Stopp. Dann lassen Sie uns unser Zustandsobjekt für den Titel, der ein leerer Stream ist jetzt können wir hinzufügen, sind auf Änderungsfunktion für das Eingabefeld. Wir werden ziemlich gut darin. Lassen Sie uns also eine Ereignisvariable deklarieren. Nun, sagte der Zustand unseres Titels zu Event Punkt-Zielpunktwert Dieser Monat ist roter Speicher für euch Jungs an diesem Punkt, oder? Auf Klick? Wir werden anonyme Para-Funktion haben. Rufen Sie eine Hilfsmethode auf, um jetzt Angle genannt zu finden. Lassen Sie uns ein Mädchen hinzufügen und lassen Sie uns einfach Rat Punkt protokollieren den aktuellen Status, um zu überprüfen was der Benutzer als Titel eingegeben hat. Jetzt, wenn wir sparen, wird es nicht kalt. Holen Sie sich, weil wir es immer noch innerhalb unserer tatsächlichen importieren müssen. Also ist es Import am Ziel aus dem gleichen Verzeichnis, so Punkt Schrägstrich hinzufügen gehen. Lassen Sie uns dieses div ersetzen, das früher aufgerufen und Ziel mit dem tatsächlichen ad girl neu erstellt wurde, und es wird ein Selbst im schließenden Tag sein. Also vergiss nicht diesen zusätzlichen Platz. Setzen wir uns und es gibt eine Advil-Komponente. Also lassen Sie uns das Element inspizieren und sehen, was passiert, wenn ich auf diese Schaltfläche „Senden“ klicke. Sagen Sie, unser Ziel wird es sein, das Treffen zu skizzieren und da gehen wir. Wir haben unser staatliches Bloggen. Bevor wir also neue Funktionen hinzufügen, lassen Sie uns über Referenzen in der Feuerbasis nachdenken. Gehen Sie voran und navigieren Sie zu Ihrem Faserprojekt und lassen Sie uns auf Datenbank klicken. Also, um es zu finden, gehen Sie zur Seite als Sie und tun Sie einfach Datenbank. Es ist für jetzt leer, aber wir können beginnen, unsere Datenbank mit Daten zu füllen, indem wir eine Referenz-Star-Komponente mit beliebigen Namen verwenden, den wir mögen. Stellen Sie sich die Datenbank als ein riesiges JavaScript-Objekt oder ein Objekt vor. Im Allgemeinen wird es Schlüssel haben, die entweder zwei weitere Objekte oder nur Werte wie Strings oder Zahlen zuordnen. Jeder dieser Schlüssel hat einen zufälligen Namen waren Name, die wir angegeben. Lassen Sie uns also unseren ersten Verweis auf diese Datenbank angeben. Inzwischen geht es zu Firebase Punkt Js. Definieren wir eine neue Konstante namens goalref innerhalb unserer Feuerbasis. Gut gesagt, es entspricht der Feuerbasis, die wir ursprünglich definiert haben, aber das Datenbankmodul genannt haben. Und dann beginnen wir eine Referenz, indem wir Dot Atem aufrufen. Dann werden wir den Namen ihres tatsächlichen Schlüssels übergeben, was Ziele sein wird. Und natürlich, natürlich, wenn Sie diese ganze Sache exportieren möchten, so dass andere Dateien es jetzt in ihr at goal Komponente verwenden können , wollen wir diesen Torref von unserer Basis importieren. Also ist es wichtig, Goalref aus Let's Go Back One Verzeichnis zu Fire Base Now in ihrer Hilfsfunktion . Wir müssen einfach Goalref Doc Push aufrufen, und dann können wir jedes Objekt übergeben, das wir wollen, und es wird automatisch in unserer Datenbank aktualisiert. Also für jetzt, lassen Sie uns eine Test-E-Mail machen, also testen Sie, dass Test dot com. Dann wollen wir, dass unser Titel dieser Punktzustand-Punkt-Titel ist. Mal sehen, was passiert, wenn ich rette. Lassen Sie uns zurück zu ihrer Bewerbung und noch einmal,sagen wir, sagen wir, bereiten Sie das Treffen vor oder skizzierten die Besprechung einreichen. Und da gehen wir. Wir haben uns nicht angemeldet, also lassen Sie uns unsere Datenbank überprüfen. Und das ist, wir haben einen neuen Goldski mit unserem Objekt , der einen Zufallsnamen hat. Nein, aber mit unserer E-Mail und unserem Titel Cool Beans. Lassen Sie uns diesen Code effizienter machen. Wir werden unsere eigentliche E-Mail über Benutzer haben wollen. Und natürlich können wir den Essex-Trick verwenden, um unseren Titel daraus zu holen, nicht zu sagen. Wir müssen einfach den Titel streiten, und dann wollen wir dies mit unserem lesen Excellence Import connect von React Redux verbinden. Wir werden eine schnelle Karte erklären. State to crops Funktion, so Funktion, die Requisiten blieb. Staat. Lasst uns die E-Mail aus unserem Bundesstaat holen und die E-Mail zurückgeben. Und dann, wenn Sie tatsächlich brauchen, um diese Komponente zu verbinden Enten wieder, denken Sie daran, sind die Karte. State to Requisiten ist die erste Funktion, und dann haben wir keine Aktionsersteller, also wird nein unsere zweite Funktion sein. Wir sind so nah dran. Aber jetzt müssen wir unsere E-Mail von diesen Stopps Requisiten holen, weil wir die von Redux bekommen sollten . Und dann können wir die exakte Kurzschrift wieder verwenden und diese einfach drücken. Also lasst uns sparen. Und warum nicht all das statt nur diesen Out-Status protokollieren? Weil wir jetzt Requisiten manipulieren. Speichern Sie noch einmal zurück in die Anwendung und ich buchstabierte Connect falsch an der Unterseite, so dass es wieder gespeichert. Und da gehen wir. Wie wär's, bereiten Sie das Mittagessen vor? Aber reichen Sie das ein. Und während wir zu unserem Firebase Consul gehen, ist unsere E-Mail jetzt Harry bei Potter dot com. Großartig. Also, jetzt, da wir unsere Datenbank aktualisieren mit Zielen sind Anwendung braucht auch aktualisieren Sie die Ziele auf der Benutzeroberfläche. Also lasst uns das im nächsten Video angehen 11. Erstellen einer GoalList: Lassen Sie uns unsere Komponente für die Torlosen erstellen. Erstellen Sie nun eine neue Datei namens Goaless Dutch X innerhalb der Komponenten torlosen Punkt jsx Lassen Sie uns importieren reagieren Code so wichtig. Reaktionskomponente für Reagieren. Lassen Sie uns eine schöne torlose Klasse machen, die Komponente erweitert. Das ist standardmäßig Export. Unsere Zielliste. Lassen Sie uns etwas J-Sex für jetzt rendern und nur einen einfachen Dave zurückgeben, wie vorher das sagt: Go-Liste. Jetzt kommt ein neues, aufregendes Zeug. Lassen Sie uns importieren sind goalref von fünf Minuten. Gehen Sie zurück ein Verzeichnis und finden Sie die Firebase-Datei, die wir bei einer Komponente haben. Lifecycle-Haken an die Klasse der zulässigen Liste wurde nicht An dieser Stelle müssen wir die Ziele finden, die wir zu unserer Feuerbasis Zielreferenz in unserer Datenbank hinzugefügt haben. Also, nachdem unser Ziel ist Komponente, Renders wird einen Zuhörer zu unserem Torref von bar basierend, die alle Erwachsenen packt befestigen. Also lassen Sie uns das Ziel Refs auf Funktion nennen. Im ersten Argument von on können wir mehrere Ereignisse wie ein untergeordnetes Ereignis hören, ein untergeordnetes Ereignis entfernt, um ein Versprechen auszulösen. Immer wenn diese Dinge in unserem Zuhörer passieren, werden wir das Value-Ereignis verwenden, um Versprechen direkt auszulösen, wenn etwas innerhalb unserer Zielreferenz überhaupt passiert . Also lassen Sie uns dieses Versprechen mit einer Snap, variablen und anonymen Pharao-Funktion hören . Sehen Sie sich das Fangobjekt an. Wir verwenden Java-Skripte für jede Funktion, um jedes Ziel innerhalb dieses Netzes abzubilden. Aber lassen Sie uns ein Zielobjekt erklären, das dem Goldwert entspricht. Wir finden diesen Goldwert, indem wir Punkt unterwegs aufrufen. Gehen wir voran und protokollieren Sie das Objekt für jetzt, nur um zu sehen, ob unsere Feuerbasis Referenz funktioniert. Cool. Nehmen wir an und denken Sie daran, wir müssen es immer noch mit einem App Dot jsx importieren. Also lassen Sie uns Zielliste aus unserem neuen Ziellistenmodul importieren und dieses div durch go list ersetzen. Vergiss nicht den Raum, sagte. Lassen Sie uns das Element inspizieren und es überprüfen. Bitte lassen Sie einige Zielobjekte auftauchen, also haben wir unsere Test-E-Mail bei test dot com. Die Titel vorbereitet, was bedeutet, wir haben eine 2. 1 eingereicht von Harry Potter vorbereitet das Mittagessen hoffentlich laufen und ihre mächtigen sind eingeladen. immer, Sie werden feststellen, dass dies tatsächlich Echtzeit ist, auch, Also, wenn ich ein anderes Ziel hinzufügen, besuchen Quidditch Praxis, zum Beispiel, Praxis, einreichen und alle unsere Zielobjekte automatisch neu laden, weil Feuerbasis geschieht alles in Echtzeit, dank unserer Zuhörer Apostel. Also wollen wir in torlosen Dajae X zu tun ist unter Ray von Zielen vorbereiten. Also lasst uns Ziele zu einem leeren Array hier machen. Und dann gehen wir weiter und schieben all diese Goldobjekte, die von unseren Zuhörern jemals gepackt wurden . für jede Funktion Lassen Sie unsfür jede Funktioneinfach Council dot unsere neuen Ziele mit unseren Zielobjekten und wirklich mit unserem Goldobjekt für nur Interesse an der E-Mail und Titel. Moment, anstatt ein Goldobjekt zu deklarieren, lassen Sie uns einfach voran und greifen die E-Mail im Titel von Golden Bell. Lassen Sie uns weiter mit unseren SX-Tricks und Push-E-Mail und den Titel. Lasst uns retten, dass unser Rat neu laden sollte. Gehen wir weiter und fügen Sie einen neuen Schritt hinzu. Also jetzt haben wir unsere drei Ziele. Es ist in Quidditch Praxis für das Mittagessen während des Treffens. Nein, es ist auf ein neues Ziel. Fragen Sie ihren Bergbau, töten Sie die Rechnung und da gehen wir. Wir haben unsere vier Ziele züchten Rendering genial. Lassen Sie uns nun einige Leserlogik hinzufügen, damit wir diese Ziele als Requisiten in ihrer Anwendung für jede Komponente erkennen können , die sie verwenden möchte. Wir sehen uns im nächsten Video 12. Ziele im Redux Store reduzieren: Lassen Sie uns einige Redux-Logik zu dieser Anwendung hinzufügen, die unsere Ziele in Requisiten am gleichen Ort wie wir sie derzeit angemeldet. Die Konstante wird im Wesentlichen einen Aktionsersteller haben, der die Ziele global in unserem Geschäft setzt . Erinnern Sie sich, dass wir dies in drei Schritten angehen sollten. zuerst Lassen Sie unszuersteinen neuen konstanten Kopf zu Konstance Punkt Js hinzufügen. Lassen Sie uns eine festgelegte Ziele erklären. Konstante gesteckte Ziele gleich gesetzten Zielen. Lassen Sie uns nun einen Aktionsersteller innerhalb unserer Aktionen deklarieren. Index Dodgy. Ja, wir müssen neue Konstante importieren, natürlich Ziele setzen. Ich kann es schon sehen. Ich muss immer noch die Schrankdatei speichern, also stellen Sie sicher, dass sie sicher ist. Und lassen Sie uns eine neue Funktion exportieren, die heißt Ziele setzen. Sie werden ein Argument haben, die Ziele, die wir natürlich als Recht verabschiedet haben. Lass uns eine neue Aktion finden. Es ist Typ wird Ziele gesetzt werden, und dann sind es Daten. Wenig haben eine goldene Skikarte zu den Zielen, die wir als Parameter übergeben haben, und dann verwenden wir unsere Essex Kurzschrift, so dass wir nicht angeben müssen, dass die Ziele Gold weil der Schlüssel und Wert genau gleich sind. Also lassen Sie uns diese Aktion nicht zurückgeben. Großartig. Das war der zweite Schritt. Jetzt, Zeit für den dritten Schritt, Hinzufügen eines Produzenten. Nehmen wir uns einen Moment Zeit, um zu überlegen, wie wir diesen Reduzierstück hinzufügen werden. Wir könnten nur einen anderen Fall in unserem Standard-Produzenten haben, der die Ziele mit gesetzten Zielen setzt. jedoch bedeuten, Dies würdejedoch bedeuten,dass unsere anfängliche Zustandslogik vom Benutzer in etwas, das in Global extrahiert wird, geändert wird. Anstatt dies zu tun, lässt sich also für einen anderen Ansatz aussprechen. Teilen wir die Reduzierstücke in zwei Reduzierstücke auf. Einer wird Produzent User dot gs genannt und ein anderer Produzent Goals Duchy s. Also lassen Sie uns diesen Standard umbenennen, um Ihren Benutzer dot gs zu reduzieren. Da wir sehen können, dass wir unser Benutzerobjekt in diesem behandeln, lassen Sie es uns in Producer User dot Yes umbenennen. Dann haben wir eine neue Datei namens Producer Goals Dot Janice. Unsere Ziele des Reduzierers werden Abschnitte aus der Datei „Are Constants“ importieren. Vergiss nicht, zurück zu gehen. Ein Verzeichnis nach Konstanz. Jetzt müssen wir standardmäßig anonyme Ära Funktion exportieren. Also hier ist diese anonyme Ära Funktion. Es wird zwei Parameter haben. Zuerst wird ein Zustandsparameter auf anfängliches leeres Array gesetzt, weil unsere Ziele immer ein Array sein werden, wie wir sie in unserem feuerbasierten Listener in torlosen Punkt jsx machen, und dann haben wir eine Aktion wie üblich für einen Produzenten. Folgen Sie dem gleichen Muster und schalten Sie den Aktionspunkttyp ein. Dann kümmern wir uns um unseren ersten Fall , der Ziele gesetzt ist. Lassen Sie uns unsere Ziele von der Aktion abnehmen, und dann wenden wir diese Ziele als unseren Reduzierstaat für Schulen. Ich erinnere mich nicht. Switch-Anweisungen benötigen immer einen tiefen All-Fall, in dem unser Zustand zurückgegeben wird, der das leere Array ist. Lasst uns sparen und sieht toll aus, als hätten wir uns jetzt Ziele gesetzt. Es gibt ein Problem, obwohl Sie vielleicht bereits darauf hingewiesen haben. Jetzt haben wir keine Standard-Indexpunkt-Js-Datei, so dass unser Gesamtreduzierer fehlt. Lassen Sie uns dieses Problem im nächsten Video beheben. 13. Kämmen unserer Reduzierer: jetzt, dass wir Reduzierstücke in einem Reduzierstück trennen müssen, müssen sie irgendwie zu einem Gesamtproduzenten kombiniert. Zum Glück, Reduktion Apps mit einer kombinierten Reduzierfunktion, die uns erlaubt, genau das zu tun. Lassen Sie uns also unsere Indexpunkt-Js-Datei innerhalb der Produzenten in einem sehr Top erklären Lassen Sie uns kombinierte Reduzierungen von Redux importieren . Jetzt müssen wir einfach nur unseren Produzenten, Anwender und Produzenten Gulf importieren . Lassen Sie uns unseren Produzenten Benutzer von reduzieren ihren Benutzer anrufen. Und dann werden unsere Ziele Ziele von Erzeugerzielen sein. Nein, es ist einfach, einen Standard zu exportieren. Kombinierte Produzenten funktionieren jetzt, um unseren Nutzer und unsere Ziele innerhalb des kombinierten Reduzierers in einen Gesamtproduzenten zu überführen . Wir haben soeben ein Objekt erstellt. Wir werden eine Benutzerschlüsselkarte für unseren Produzenten Benutzer haben, und es geht, Keep map to our Producer Ziele uns. Lassen Sie uns das Element inspizieren. Und wie Sie sehen können, arbeitet unser Produzent gut, weil wir keine Erben bekommen. Cool. Nun, was wir vielleicht gebrochen haben, ist unsere Anzeige goldene JSX und in der Tat, wir geben keine E-Mail von ST mehr zurück, weil, wie Sie in unserem Zustandsobjekt sehen können, wir haben einen Goldproduzenten und einen Benutzerproduzenten jetzt nicht mehr die E-Mail. Also lassen Sie uns voran und Rat Dot Log-Zustand bei Gold Punkt jsx In ST. Schauen wir uns an, wie der Staat tatsächlich aussieht. So wie wir State sehen und Golden hinzufügen, JSX hat unser Benutzerobjekt und unsere Ziele Objekt als auch. Also müssen wir Benutzer anstelle von E-Mail greifen und unser Benutzerobjekt zurückgeben. Und dann, wenn Sie versuchen, ein Ziel hinzuzufügen, würde es nicht funktionieren. Wir konnten keine E-Mails von den Requisiten erhalten. Wir müssen es von diesem Stopp-Prop-Startbenutzer bekommen, denn das ist, was wir jetzt tatsächlich in unserem Kartenzustand zu Requisiten zurückkehren. Lasst uns voran gehen und sparen. Lasst uns weitermachen und dieses Council Dot Log loswerden. Es gibt eine Menge Dinge, die unseren Rat jetzt plagen, also lasst uns auch zu unserem Index gehen, der unser globaleristund diese beiden Konsul Logsherausnehmen oder einfach auskommentieren beiden Konsul Logs ist also lasst uns auch zu unserem Index gehen, der unser globaleristund diese beiden Konsul Logsherausnehmen oder einfach auskommentieren. sicher bei Golden JSX, und das sieht viel besser aus. Gehen wir auf die JSX. Entfernen Sie diesen Rat Zweifel log als auch, so gut und kommentiert es aus. Vielleicht brauchst du sie später. Wurden gelöscht, wenn Sie möchten. Cool. Es scheint also, als würde es funktionieren. Lassen Sie uns überprüfen, ob wir noch ein Ziel hinzufügen können. Denken Sie daran, dass das Harry Potter ist. Also wie wäre es mit Übung, wenn Wächter Leviosa es Levy Osa ist, nicht Livio sah diejenigen von Ihnen, die Harry Potter gesehen haben, werden diesen kleinen Witz bekommen. Wie Sie sehen können, fügen wir immer noch neue Ziele innerhalb unserer Ziele hinzu. Objekt. Also gehen wir zurück, um eine Aktie zu Ziel. JSX. Lassen Sie uns tatsächlich den Aktionsersteller nutzen, den wir früher als Zyklen definiert denn jetzt, wo wir diese Ziele haben, möchten wir tatsächlich in der Lage sein, auf sie innerhalb von propped zuzugreifen. Also zuerst müssen wir Set-Ziele aus Matches importieren, und dann müssen wir auch die Connect-Funktion vom Schauspieler Redux importieren, denn wir werden diese Komponente jetzt an unseren Redux Store anschließen. Also lassen Sie uns es vorerst über Nein und Nein verbinden, nur damit es verbunden ist. Und dann, anstatt die gesamte Kartenversand der Requisiten Funktion zu löschen, weiß ich, dass wir nur die Funktion für die gesetzten Ziele benötigen. Lassen Sie uns voran und fügen Sie das unseren Requisiten und dann buchstabieren setzen Ziele falsch. Ihr habt wahrscheinlich geschnappt, die nie gehen. Hier haben wir Segel und jetzt, anstatt nur Konsul Protokollierung Ziele. Wir werden die gesetzten Ziele von unseren Requisiten aus Gold nennen, sagen wir. Und dann ist eine Möglichkeit zu überprüfen, ob diese Satzzielfunktion tatsächlich funktioniert hat, einen Kartenzustand an Requisiten zu deklarieren , eine Funktion, die unseren Zustand nimmt und dann unsere Ziele vom Staat als Objekt zurückgibt. Lassen Sie uns Ziele zurückgeben und dann innerhalb einer Renderfunktion. Das wird wirklich eine Menge auf den Bildschirm bringen, aber es wird zeigen, was wir brauchen. Also lassen Sie uns das rendern, öffnet Ziele und sehen, ob wir es tatsächlich retten. Und dann müssen wir immer noch den Kartenzustand der Kulturen in unserer Connect-Funktion argumentieren. Vergessen Sie nicht, das zu tun, sagt, wir speichern es neu lädt. Und da gehen wir innerhalb von Requisiten Stock Ziele, die wir alle Objekte von Firebase sehen. Großartig. So können wir jetzt fortfahren, um diese Ziele endlich auf dem Bildschirm zu rendern. Wir sehen uns im nächsten Video 14. Abbildung der Zielliste: bevor wir einen Schritt weiter gehen, lassen Sie uns etwas Stil zu unserer gesamten App dot jsx Komponente hinzufügen. Auf diese Weise berührt es nicht mehr die linke Seite des Bildschirms. Denken Sie daran, mit Stil, müssen wir Leidenschaft in Ihrem Objekt. Geben wir ihm einen Rand von fünf Pixeln, und es muss innerhalb einer Stärke sein. Cool. Jetzt gehen wir zum torlosen James Sex. Um unsere Ziele auf der Benutzeroberfläche zu rendern, müssen wir einfach die Kartenfunktion über die Stop Rep Stock Ziele aufrufen. Jetzt müssen wir diese Logik in einen Diff in unserem JSX wickeln Sie Stick out dieses torlosen Tag, das einige geschweifte Klammern löschen würde, wo wir anfangen können, eine Logik zu verwenden. Also nennen wir diese Stopp-Requisiten, haben Ziele, nicht getroffen, und dann werden wir jedes Ziel eins nach dem anderen abbilden. Inferno. Lass uns einfach zurückkehren. Ich mache das einfach, sagt Goldpunkt-Titel. Moment, nehmen wir es auf. Wie Sie sagen, können wir alle Ziele sehen, die auf dem Bildschirm rendern. Lassen Sie uns das Element untersuchen, und Sie bemerken, dass reagieren beschwert, dass jedes Kind, ein Array, eine eindeutige Schlüsseleigenschaft haben muss. Jetzt gibt es einen Trick, den wir mit der Matte-Funktion verwenden können. Es gibt einen zweiten optionalen Parameter, den wir mit Goal namens Index umschließen können. Dann können wir den Schlüssel einfach als Index hier argumentieren. Und dann haben wir diese Nummer aus dem Index zugewiesen. Und dann verschwindet diese Warnung. Also brauchen wir viel mehr Informationen für jeden unserer Gold-Artikel. Anstatt eine Renderfunktion mit einem Haufen mehr JSX zu sprengen, um das Golden schön aussehen zu lassen. Lassen Sie uns eine ganz neue Zielelementkomponente deklarieren. Es wird in etwa so aussehen mit Zielelement genau hier. Es wird seinen Schlüssel des Indexes haben. Natürlich wollen sie ihm auch die Gold-Eigenschaft genau so geben. Also lassen Sie uns dieses Zielelement für jetzt erklären, direkt innerhalb von Komponenten, Das neue Dateiziel Element JSX nicht. Und dann lassen Sie uns dies zu einer Reaktionskomponente machen. Importieren Sie also reagieren Komponente von reagieren und Sie wissen, was als nächstes kommt. Wir müssen dies zu einer tatsächlichen Klasse machen, die das Komponenten-Feature erweitert, von noch einige J-Sex gerendert wurden . Für den Moment. Lass uns zurückkehren. Habe das sagt Goldstück. Lassen Sie uns standardmäßig exportieren. Ziel. Ich jetzt müssen wir Zielelement in unsere Zielliste importieren, so wichtig von glide von Es ist im gleichen Verzeichnis. Also tun, dass Punkt Schrägstrich, was ist kommentieren Dave hier und dann in unserem Ziel Artikel mit Kiev Index und unserem Ziel off Ziel kommentieren . Lassen Sie uns voran und entfernen Sie das zuerst tat aber sicher. Und wie Sie vielleicht erwarten konnten, wurden alle unsere vorherigen Ziele mit den Titeln durch Gold-Elemente ersetzt, die einfach sagen Go Also lasst uns voran und Rat übernehmen Log Was dieser Stopp Requisiten Gold aussieht, da wir es in übergeben. Jedes dieser Ziele speichern und lassen Sie uns das Element inspizieren. So hat jede dieser Requisiten ein Ziel mit einer E-Mail in einem Typ cool. Also ist es weiblich und eine Titelkonstante, die zu diesem Stop-Requisiten-Zyklus erklärt. Und nun lasst uns Struktur sind tatsächlich JSX für jedes dieser Gold-Gegenstände, damit sie wirklich schön aussehen . Also, insgesamt, Div, wird zuerst etwas Styling haben. Sein Rand wird auch fünf Pixel sein, genau wie die Komponente herausragen Tech School Element. Sie wollen kein starkes Element, das nur Text macht. Beide Männer werden unseren Titel damit umwickeln. Dann wollen wir Gerechtigkeit Spanne direkt neben unserem Titel, der sagt, eingereicht von wer auch immer die E-Mail ist, Lassen Sie uns voran und wickeln Sie die E-Mail innerhalb M-Tag. Auf diese Weise ist es kursiv, würde ich sagen und nett. Es sieht schon viel besser aus. Nun, da wir unsere Liste der Ziele von der Feuerbasis vollständig wiedergegeben haben. Mit unserer kombinierten Redux-Logik können wir Firebase und Redux weiter manipulieren, indem wir einige komplette Gold-Funktionalität hinzufügen . Auf diese Weise können andere Zauberer außer Harry diese Ziele, die Harry eingereicht hat, tatsächlich abschließen. Wir sehen uns im nächsten Video. 15. Ziel vervollständigen: bevor wir mit dem Erreichen der Ziele fortfahren. Lassen Sie uns einen weiteren Moment nehmen, um App Dot jsx für einen aufzuräumen. Lasst uns diesen Titel machen. Eigentlich, Gold Coat, jetzt, wo wir eine Liste von Zielen haben, wird ein weiteres Alter vier Tag erklären, das Ziele sagt. Auf diese Weise haben wir einen schönen Header für eine Liste. Lassen Sie uns nun einige Teiler inter-Komponente werfen, die wir mit einigen selbst umschließenden HR Steuer hinzufügen können. Wir haben einen nach der Anzeige und einen nach dem Torlosen. Schön. Das sieht viel besser aus. Lassen Sie uns nun die Funktionalität unserer Anwendung hinzufügen, die es Benutzern ermöglicht, Ziele tatsächlich zu vervollständigen . Ziele abschließen, entfernen Sie einfach das Klickelement aus der Zielliste und verschieben sie in eine neue Liste namens „Abgeschlossene Ziele“. Jedes abgeschlossene Zielelement zeigt an, wer es abgeschlossen hat, nicht wer es eingereicht oder geschrieben hat, sondern wer es als Sonne im Benutzer abgeschlossen hat. Also geh zu Gold Adam Dot Jsx und wir werden einen neuen Button hinzufügen. Es wird direkt neben unserem e-Mails-Fan sein. Die Klasse Fleck für diesen Knopf wird einige Bouchat Klasse steht Schönheit in Beauty und SM, die für Taste klein und Taste Primär steht. Der Text wird sagen „abgeschlossen“. Schauen wir es uns an. Sollte ein netter kleiner blauer Knopf süß sein und lassen Sie uns voran gehen und geben dieser Spannweite etwas Styling. Ein Rand rechts von fünf Pixeln. Auf diese Weise ist es nicht direkt daneben. Rand rechts, fünf Pixel kühl. Das sieht besser aus. Wenn wir darauf klicken, passiert noch nichts, weil wir noch eine vollständige Zielhelfer-Methode hinzufügen mussten. Also, in dem Klick auf diese Schaltfläche, nennen wir diese Aktie komplett Gold. Und nun denken wir darüber nach, was wir mit unserer kompletten Zielhelfer-Methode tatsächlich erreichen wollen . Zuerst brauchen wir ein paar Gewichte. Fügen Sie dieses Gold zu einer Liste der vollständigen Ziele in der Datenbank hinzu. Ich musste Ziele von den toten Api abschließen. Als Nächstes. Wir müssen dieses Ziel aus der Zielreferenz entfernen. Nein, lasst uns das erste Problem anpacken. Zunächst brauchen wir jetzt einen neuen Verweis auf unsere Datenbank. Lassen Sie uns eine neue Ref exportieren, die komplette Goalref genannt wird und genau wie zuvor, mit einer Referenz für Ziele, müssen Sie einfach Ref anrufen, Sind Sie ein Kind? Dies werden vollständige Ziele sein. Speichern wir die Messwerte. Importieren Sie diese komplette Goalref auf unsere Zielelementkomponenten aus einem Verzeichnis zu weit Bits zurück . Und nun lasst uns über die Daten nachdenken, die wir eigentlich wollen. Natürlich wollen wir den Titel unseres Ziels. Aber welche E-Mail wollen wir? Möchten Sie die gesendete E-Mail, die hier gerendert wird, oder möchten Sie die E-Mail des Benutzers, der gerade signiert ist? Nun, wir wollen den Benutzer, der es momentan signiert hat. Also, wie machen wir das? Wir tun das, indem wir uns mit einem Redox-Geschäft verbinden. Lassen Sie uns also eine Verbindung von React Redux importieren und diese Komponente mit unserem Redux Store verbinden. Also zuerst brauchen wir unsere Karte. State-zu-Requisiten Funktion hat ein Status-Argument übergeben. Wir finden unseren Benutzer in ST, dann geben Sie einfach unseren Benutzer zurück. Dann können wir diesen Staat für Requisiten im Inneren argumentieren, und sie waren keine Handlungen verbindlich. Also lasst uns einfach eine Mühle als das zweite Argument übergeben, um eine Verbindung herzustellen. Lassen Sie uns speichern Jetzt lassen Sie uns unsere E-Mail von diesem Stopp Requisiten Punkt Benutzer finden, und dann müssen wir unseren Titel von diesem Stopp Requisiten finden. Ich gehe in ähnlicher Weise, wie wir mit der Renderfunktion gemacht haben. Nehmen wir dieses Konsolenprotokoll für jetzt und dann lassen Sie uns voran gehen und Rat nicht protokollieren E-Mails sowie den Titel, um dies zu debuggen. So wie wir speichern, aber vermuten das Element, aber in der Konsole, und gerade jetzt ist es beschwert, dass abgeschlossen sind. Goalref wird immer noch nicht verwendet, aber keine Sorge, wir werden es noch nicht verwenden, sagte eine E-Mail zu vervollständigen Es ist Harry Potter, und der Titel wird um Geld auf den Ball gebeten. Lassen Sie uns abmelden und erstellen Sie einen ganz anderen Benutzer, damit wir sehen können, ob wir die richtige E-Mail erhalten , weil wir sie als Harry Potter signiert wurden. Also über Ron bei weaselly dot com, das Passwort wird leicht ausgeführt werden. - Was? Melden Sie sich an. Nein, es ist komplett. Vorbereitet das Treffen und es sagt Ron Weasley, wie Sie sehen können, dass, Also jetzt alles, was wir tun müssen, ist ein komplettes Goalref verwenden und diese Informationen zu unserem Feuer basierend aus seiner. Also werden wir die E-Mail sowie einen Titel schieben. Lasst uns retten. Nehmen wir an, dass der Iran ihr Geld zum Ball gebeten hat. Schauen wir uns jetzt unsere Firebase-Datenbank an. Dann haben wir eine neue Referenz der vollständigen Ziele mit einem neuen Objekt in. Die E-Mail läuft leicht, und der Titel wird ihr Geld zum Boot gefragt. Awesome! Jetzt, da wir eines von zwei Dingen haben, die mit unserer kompletten Goldmethode arbeiten, können wir auf die 2. 1 gehen, die das Ziel aus der Zielreferenz entfernen soll. Auf diese Weise müssen wir es nicht mehr als einmal mit mehr als einem Benutzer abschließen. Wir sehen uns im nächsten Video. 16. Ziel entfernen: Lassen Sie uns den zweiten Schritt in einer vollständigen Zielhelfer-Methode angehen. Wir müssen die notwendige Logik hinzufügen, um diese Elemente aus der Zielliste zu entfernen sobald jemand darauf klickt. Denn, natürlich, es könnte eine peinliche Szene machen, wenn Ron bereits das Ziel als Erinnerung an den Ball abgeschlossen. Aber jemand sagt, namens Viktor Krum dachte, dass sie noch verfügbar war. Um Objekte aus einer feuerbasierten Datenbank zu entfernen, müssen wir ihre Schlüsselwerte kennen. Allerdings können wir den genauen Wert dieser Ziele nicht kennen, indem wir nur auf den Mantel schauen. Wir müssen das Firebase-Konzept überprüfen. Beachten Sie, wie die Schlüssel für jedes dieser Ziele wie unsere zufällige Zeichenfolge aussehen. Das liegt daran, dass sie zufällige Strings sind. Wie bekommen wir die Schlüsselkomponente? Nun, wir müssen beginnen, indem wir jedem dieser Ziele mehr Informationen hinzufügen, also gehen Sie zurück zu torlosen Punkt jsx. Was ist in einem Konsul Dot Log dieser Ziele, die wir von unserem Snap für jede Funktion bekommen . Also nicht Gold da draußen, sondern das eigentliche Ziel. Was sparen Sie zurück zu Ihrer React-Anwendung und überprüfen Sie sie? Wir haben dieses seltsam aussehende Objekt mit all den Firebase-Informationen. Aber dann gibt es auch einen Schlüssel hier drin, und der Schlüssel ist die genaue zufällige Schrumpfung, die benötigt wird, um das Ziel zu entfernen. Also lassen Sie uns eine Serverschlüsselkonstante deklarieren und sagte, es ist ein Goldpunktschlüssel. Nehmen wir an, unser konstanter Servic e ist gleich Golden Keep. Jetzt alles, was wir tun müssen, ist Vergangenheit Serverschlüssel, zusammen mit E-Mail berechtigt, unsere Ziele Array mit jedem Goldobjekte, Lassen Sie uns sagen, großartig. Und jetzt sollte dieser Serverschlüssel innerhalb des Ziels zugänglich sein. Also lassen Sie uns eine Serverschlüsselkonstante direkt neben diesem Stopp deklarieren, dass das Ziel, sobald wir unseren Titel bekommen. Für den Moment, lassen Sie uns nur Rat Punkt protokollieren diese Serverschlüssel. Immer wenn ein Benutzer auf sie als Speichern klickt und es abgeschlossen ist, stellen Sie fest, dass jeder einen neuen Serverschlüssel hat. Jetzt ist die Entfernungsmethode eigentlich ziemlich einfach. Zuerst benötigen wir den Verweis auf unser Ziel Atem, und dann erstellen wir einen weiteren Verweis auf das eigentliche Zielelement, indem wir den Kind-Server-Schlüssel aufrufen . Dies wird ein Verweis auf ihre tatsächliche sein, und dann rufen wir einfach Feuerbasis entfernt wird. Lassen Sie uns diesen Rat viel sparen entfernen und lassen Sie uns das endlich entfernen. Fragen Sie ihren Bergbau an den Ball. Da geht es. Es ist verschwunden. Also lassen Sie uns in der Firebase-Konsole überprüfen. Jetzt. Wir haben nur vier Punkte und Ziele. Wir haben eine Menge an vollständigen Zielen. Oh, weil wir mehrmals darauf geklickt haben. Gehen wir also voran und bereinigen Sie diese Daten eines der Mal. Wir wollen nur einen. Sonst sieht es so aus, als ob Ron wirklich darauf bedacht war, ihr Geld zum Ball zu fragen. Und lasst uns voran gehen und diese entfernen, bereiten das Treffen vor und bereiten die Mittagspause vor. Sie sind nicht wirklich relevant für das ganze Thema, das wir hier vor sich haben, wie Sie wahrscheinlich zustimmen können. Wunderbar. Es funktioniert. Nun, da wir vollständige Ziele voll funktionsfähig sind, gehen wir auf die letzte Komponente dieser Anwendung, die die abgeschlossene Zielliste ist, die direkt nach den Zielen rendert. Wir sehen uns dort 17. Vervollständigung der Ziele in Redux: Nun kümmern wir uns darum, die abgeschlossenen Ziele aus unserer Datenbank zu greifen. Lassen Sie uns eine komplette torlose Punkt J-Sex-Komponente einrichten, also gehen Sie zu Komponenten. Neue Datei vollständige Zielliste, nicht JSX. Dies wird tatsächlich unsere letzte Komponente für diese Anwendung sein, also lassen Sie uns es zu einer Reaktionskomponente durch widmen Bericht machen. Reagieren Sie Komponente von reagieren. Dann lassen Sie uns Komponente von React erweitern, bevor wir etwas anderes tun. Denken Sie daran, es standardmäßig zu exportieren. Vollständige Zielliste. Lassen Sie uns jetzt etwas JSX rendern. Ich habe gerade ein div zurückgegeben, das „Vollständige Zielliste“ sagt. Aber jetzt gehen wir weiter und ändern unsere App dot jsx Komponente. Wir haben noch einen Abschnitt. Dieses Mal werde ich sagen, vollständige Ziele. Und dann, natürlich, Sie wollen importieren sind vollständige Zielliste. Vollständige Zielliste. Dann lassen Sie uns diese neue JSX in unsere Renderfunktionen einschließen. Beat Zielliste würde speichern und es wird neu geladen. Da gehen wir. Wir haben vollständige Ziele in einer vollständigen Zielliste. Cool. Lassen Sie uns nun zurück zu unserer kompletten torlosen Komponente. Ich glaube diesen anderen vorerst. Und denken Sie daran, wie wir Torlos genutzt haben, um unsere Ziele zu erreichen. Wir begannen mit dem Komponenten-ID Mount Lifecycle Hook. Fügen wir das richtig hinzu? Keine Klassenkomponente hat Graben gemacht. Und dann hören wir auf unsere Goalref. Denken Sie daran, dass wir einen kompletten Torreif in unserem Feuerbasis Fuchs erstellt haben. Also gehen Sie zurück ein Verzeichnis und finden Sie Firebase Pop. Dann verwenden wir den On-Listener jedes Wertereignisses, das die Feuerbasis auf den kompletten Torref wirft . Also denken Sie daran, deklariert ein Gold-Array, wir werden das gleiche mit einem vollständigen Ziele bereits tun und dann für jeden Wert in diesem Snap , Blick auf die Gold Wanted Zeit. In ähnlicher Weise werden wir uns das komplette Ziel nacheinander ansehen. Lassen Sie uns per E-Mail einen Titel auf das vollständige Ziel erklären. Sterben Sie und dann drücken wir einfach. Jeder von diesen sind nicht Sie richtig weibliche Titel. Schließlich verwenden wir einen Action-Ersteller, um unsere Ziele zu setzen. Wir verwenden das gleiche mit Satz abgeschlossen, aber jetzt lassen Sie uns einfach Rat Punkt diese Ziele protokollieren, um zu sehen, wie sie aussehen. Gehen Sie weiter und sparen Sie. Untersuchen Sie das Element. Wie Sie sehen können, haben wir jetzt vollständige Ziele und es ist eine Reihe von eins, das ist diejenige, wo Ron Weasley ihr Geld für das Buch gebeten hat. Cool. Jetzt müssen wir die notwendige Redux-Logik hinzufügen, um diese vollständigen Ziele innerhalb von Requisiten verfügbar zu machen. Lassen Sie uns also drei Schritte unternehmen, um dies zu tun. Zuerst definieren wir eine neue Konstante innerhalb von Konstanten. Berühren. Ja, genau wie Sickles. Lassen Sie uns ein Konzept exportieren, das besagt Set abgeschlossen, Set abgeschlossen. Der zweite Schritt besteht darin, zu unseren Aktionen zu gehen und einen neuen Aktionsersteller zu machen. Das ist Export. Der Funktionssatz wurde abgeschlossen. Wir werden unsere vollständigen Ziele erreichen. Es wird Zyklen sehr ähnlich aussehen. Das sind so ziemlich Brudermethoden. Also Kostenaktion entspricht Typ, der die zweite plädierte, bevor ich weiter gehe. Nun, bevor ich das hier tippe, gehen wir. Bevor ich weiter gehe, werde ich Satz aus unserem Konstanz fertiggestellt importieren. Und jetzt können wir tatsächlich unsere Daten zurückgeben, die vollständige Ziele sind, genau wie über einem Essex Shorthanded Wert wie unsere Ziele. Und dann wollen wir die Aktion zurückgeben, die sehr notwendig ist, um das zu haben. Vergessen Sie nicht, Konstanten zu speichern. Und jetzt müssen wir unseren Reduziersatz ändern. Also haben wir einen separaten Reduzierer für Ziele. Also brauchen wir auch einen separaten Reduzierer, um Ziele zu erreichen. Also lassen Sie uns einen Reducer konkurrierten Ziele haben, nicht Jazz, und dies wird 90% identisch mit unseren Zielen Reducer aussehen, aber es ist immer noch kurz genug, um schnell zu schreiben, ohne zu kopieren und einfügen. Also lassen Sie uns Satz abgeschlossen importieren, vor allem, von Konstanten. Aber auch wir lernen das Schreiben von Reduzierstücken zu üben, was immer hilft. Lassen Sie uns standardmäßig auf Pfeilfunktion exportieren, haben wir einen Zustandsparameter auf eine neue anfängliche leer oder rechts die Aktion als unseren zweiten Parameter gesetzt. Wie üblich schalten wir die Aktion fest ein. Ziemlich cool. das einschalte, werde ich unseren ersten Fall behandeln , der abgeschlossen ist. Wir werden unsere vollständigen Ziele aus der Aktion finden, und dann werden wir auch diese vollständigen Ziele zurückgeben, denn das ist das neue Array, das wir wollen . Dann standardmäßig den werden wir standardmäßig denZustand kühle Bohnen zurückgeben. Jetzt gibt es einen letzten Schritt, den wir brauchen, um Dot j Essman Reduzierstücke zu indexieren und komplette Ziele zu importieren . Von unserem neuen Produzenten, ich bin ziemlich sicher, bitte tit Ziele, um sicherzustellen, dass alles richtig Namen. Dann schließlich, lassen Sie uns in kombinierten Reduzierern komplette Ziele einschließen. Lass uns retten und genial. Wir haben gerade die Redux-Logik für vollständige Ziele eingerichtet. Also gehen wir zum nächsten Schritt und schließen unsere komplette Torlose an den Redick Store an, damit ich tatsächlich vollständige Ziele und Requisiten sehen und sie rendern kann 18. Abgeschlossene Ziele darstellen: haben wir alle unsere Leserlogik eingerichtet, um Ziele zu erreichen. Jetzt müssen wir es nur benutzen. Also lassen Sie uns die Connect-Funktion von React Redux importieren. Oben auf dieser vollständigen Zielliste Komponenten Import Connect von React Redux und darüber hinaus, lassen Sie uns importieren, dass Satz abgeschlossen Action Creator abgeschlossen von Let's Go Back One Directory to Actions abgeschlossen. Jetzt müssen wir diese Komponente einfach an unseren Redux Store anschließen. Fügen wir also die Verbindungsfunktion am unteren Rand hinzu. Dann haben wir kein für unser erstes Argument für jetzt, weil wir noch keinen Kartenstatus zu Requisiten Funktion haben. Aber wir haben in Aktion, das sind Sie in einem Objekt als unsere zweite Grundierung abgeschlossen. Jetzt müssen wir einfach diese Stopp-Requisite nennen, sagte Stutts. Abgeschlossen, wo wir derzeit protokollieren sind vollständige Ziele im Konzept. Also dieser Stopp Requisiten Satz von vollständigen Zielen abgeschlossen. Jetzt werden wir keine vollständigen Ziele als Requisiten erkennen, bis wir diesen Map-Status zu Requisiten Funktion erstellen . Also lasst es uns jetzt erklären. Funktion, die zu Requisiten Zustand nimmt als ersten Parameter, und dann werden wir greifen, sind vollständige Ziele aus dem Zustand und Rückkehr vollständige Ziele als unser Objekt jetzt, anstatt Rat Protokollierung, abgeschlossen -Ziele. Wenn wir in unserem Feuer basierten Listener erstellt, lassen Sie uns einfach konsul dot log Requisiten Punkt komplette Ziele in einer Renderfunktion zu sehen, ob unser Satz abgeschlossen Action Creator tatsächlich funktioniert. Nun, bevor wir weiter gehen, lässt Sie Map-Status zu Requisiten innerhalb Ihrer Connect-Funktion streiten. Während ich das Element speichern und inspizieren, sehen wir diese Stop Requisiten Punkt komplette Ziele als ein Array von einem Wert, das ist unsere E-Mail mit Ron Weasley fragt ihr Geld an den Ball. Großartig. Jetzt müssen wir einfach die JSX einrichten, um unsere vollständigen Ziele zu überlisten. Es funktioniert in ähnlicher Weise wie unsere Zielliste, also lassen Sie uns einige geschweifte Klammern für eine neue Logik hinzufügen. Wir werden komplette Ziele abbilden, jeweils ein vollständiges Ziel. Wir haben ein echtes Telefonschiff. Lassen Sie uns dieses Gemeindeprotokoll herausnehmen, das wir nicht mehr brauchen und denken Sie daran, mit der Zielliste haben wir den Index verwendet, so dass wieder Kunst im nächsten Jahr verwenden wird. Und mit dem Torlosen hatten wir Zielelemente für jeden Rendering, aber wir brauchen keine vollständige Zielelementkomponente notwendigerweise, da JSX so kurz ist , dass es keine eigene Komponente erfordert. Außerdem werden wir im Moment keine zusätzliche Funktionalität speziell zu diesen Artikeln selbst . Also lasst uns unseren Titel und E-Mail greifen, Zunächst einmal, von komplettem Ziel. Niemand will etwas Jazz X zurückgeben. Es wird ein einfaches div sein, dessen Schlüssel der Index sein wird, den wir von unseren vollständigen Zielen in dieser Funktion greifen , die einen starken Tag um unseren Titel wickeln wird. Wir werden sagen, dass es von dieser Person abgeschlossen wurde. Wird ein paar M-Tags für eine kursivierte E-Mail haben, sagen wir, und da ist Ron Weasley, die ihren Bergbau zum Ball in unserer vollständigen Torliste fragt. Nun, bevor wir diese Anwendung beenden, lassen Sie uns die Kirsche oben setzen und fügen Sie eine klare alle Schaltfläche zu dieser fertigen Liste ganz einfach auf einen Knopf. Nach diesen Zahnspangen, also haben Sie einen Knopf. Es ist Klasse. Name wird BT n und Taste primär sein. Wir werden einen blauen Knopf haben. Sagen wir klar, alles ist ein Text. Also, hier geht's. Löschen Sie alle und entführen Sie JSX. Lassen Sie uns gehen und fügen Sie H R. Tag, nachdem unsere komplette torlose gibt eine Trennung zwischen diesem Sign-Out-Button und der Clear All Button Vergewaltigung. Und dann lassen Sie uns eine Hilfsmethode nennen, die jetzt definiert wird Dieser Punkt klar abgeschlossen und dann müssen wir klar abgeschlossen definieren Lassen Sie uns dies genau hier tun. Und die Logik ist eigentlich sehr einfach und kurz. Wir müssen einfach das komplette Goalref aufrufen, die Feuerbasis verwenden, die Funktion einstellen und ein leeres Array übergeben. Diese Methode wird also funktionieren, indem Sie dieses leere Array übergeben, das die gesamte Referenz löschen wird, indem Sie es auf etwas Leeres zurücksetzen, sagen wir, und sobald es das Neuladen beendet hat, nehmen wir an, dass der Iran auch an Quidditch-Praxis teilnahm so dass wir ein weiteres vollständiges Ziel in unserer Liste haben. Und lasst uns alles klären. Boom, sie sind alle weg. Und wie ich neu lade, ja, alles ist immer noch gleich. Ausgezeichnete Arbeit erneute die letzte Anwendung Ziel Coach in diesem Kurs. Whoa, ich hoffe, Sie haben viel über React und Redux gelernt, während Sie diese Anwendung und die drei anderen erstellen . Wenn Sie planen, weiter an diesem zu arbeiten, obwohl, gibt es eine Zusammenfassung und Herausforderung Teil kommt als nächstes, aber ehrfürchtige Arbeit wieder. Wir lernten so viele neue Konzepte beim Aufbau dieser App wie Firebase-Routing, Authentifizierung und wie man mit der Datenbank umgeht. Und jetzt bin ich so aufgeregt zu sehen, welche Anwendungen Sie alle in der Zukunft machen. Gehen Sie voran und verwenden Sie diese Anwendungen als Beispiele für Vorlagen für Ihre Zukunft. Herzlichen Glückwunsch. Und behalten Sie Cody.