ReactJS und Redux – Build 4 Web-Apps [1/4] | David Katz | Skillshare

Playback-Geschwindigkeit


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

ReactJS und Redux – Build 4 Web-Apps [1/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.)
    • 1. Die Kurs einführen

      1:33
    • 2. Rezension einführen

      1:41
    • 3. Reaktion und Tools installieren

      3:45
    • 4. Einen Code-Editor erhalten

      3:23
    • 5. Wireframing CountdownChamp – deine erste CountdownChamp

      0:50
    • 6. Deine erste Anwendung erstellen

      2:25
    • 7. Bearbeiten der Anwendung

      2:09
    • 8. Deine erste Komponente erstellen

      3:58
    • 9. Strukturierung der Anwendung

      8:01
    • 10. Zustand einführen

      2:33
    • 11. Zustand aktualisieren

      3:27
    • 12. Daten mit dem Eingabefeld ändern

      4:18
    • 13. Erstellen einer a

      3:54
    • 14. Requisiten präsentieren

      1:58
    • 15. Zeit berechnen

      6:08
    • 16. Hooking LifeCycle

      4:16
    • 17. Hinzufügen von Hilfsmethoden mit Ausdrucksformen mit den Ternary Ausdrücken

      2:16
    • 18. Styling mit React Bootstrap

      3:57
  • --
  • 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.

4.562

Teilnehmer:innen

10

Projekte

Über diesen Kurs

Werde ein stark gefragte Software-Ingenieur durch Folge diesem Tutorial zu React JS und Redux Als eine der highly-paid Fähigkeiten für Webentwickler, wird dir das React die Türen und Jobs eröffnen.

 

Dieser Projektkurs wird dich sofort programmieren. Der Aufbau vier sorgfältig durchdachter Beispielanwendungen in diesem Kurs wird deine Fähigkeiten in der modernen Webentwicklung schärfen.

 

Lerne zunächst die Prinzipien der ReactJS durch das Erstellen zweifaches Anwendungen. Eine stellt ES6/Babel vor, die man mit einer API umgeht. Lerne mit der dritten Anwendung die Browser-Cookies zu manipulieren. Zum Schluss erstellst du eine ganze App mit vollständiger Authentifizierung und eine Echtzeit-Datenbank, die du in die Hand setzen kannst.

 

Lerne auch die Technik von Redux. Du wirst finden, dass Redux auf drei Schritte eingeht!

Keine Sorge, wenn du neu in der Entwicklung in der Webentwicklung bist. Einige JavaScript werden dir helfen, aber in diesem Kurs wirst du jedes neue Konzept gründlich erklären.

 

So machst du die Eintauchen in React JS und Redux. Los geht's!

Hier findest du auch einen Link zu der 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. Die Kurs einführen: 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. Rezension einführen: Nehmen wir uns einen Moment Zeit, um uns vorzustellen. Reagieren Sie ES sechs und Redux. Wenn Sie es so weit gemacht haben, haben Sie wahrscheinlich ein Gefühl, dass reagieren ist eine der beliebtesten und gefragtesten Software-Engineering-Fähigkeiten von heute. In der Tat ist React das fünftgrößte Startprojekt aller Zeiten auf Get Hub, und es wird nur weiter in Popular wachsen. Entwickelt von Facebook und unterstützt von Instagram und anderen Entwicklern, erscheint diese JavaScript-Bibliothek auf so vielen Plattformen. Dazu gehören Netflix, Airbnb, Wal Mart Website und noch mehr. Jetzt reagieren läuft auf JavaScript. Aber die meisten der Reaktionscode finden Sie ein E ein sechs, die sechs Version von JavaScript, die kam im Juni 2015. Jetzt sehen einige von diesem Code Concil neu für Leute aus, die sogar Erfahrung im Job-Skript haben. Also mach dir keine Sorgen. Wenn jede neue ES six Syntax oder Konzept auftaucht, stelle ich sicher, genau zu erklären, was in diesem Kurs vor sich geht. Jetzt nehmen wir uns einen Moment Zeit, darüber zu reden. Redox Reacts ermöglicht es uns, Anwendungen zu entwickeln, die skaliert werden. Es verfügt über eine Möglichkeit, Daten zu verwalten, um sicherzustellen, dass sich unser Engineering konsistent verhält und auf eine Weise, die wir jetzt problemlos testen können. Lernen von Redux kann das Gefühl haben, eine Menge neuer Konzepte auf einmal zu absorbieren, ist eine ganze Menge neuer Terminologie. Aber das Wesentliche kann bis zu drei einfachen Schritten aufkochen, und ich werde mit Ihnen teilen, wie wir Anwendungen in diesem Kurs erstellen, insgesamt reagieren sechs und entspannen, eine großartige Kombination machen und eine Software-Ingenieure zu genial Web machen -Anwendungen. React hat eine so vielversprechende Zukunft, und es gibt keine bessere Zeit als jetzt zu lernen. Reagieren Sie. Wir in der Entwickler-Community können es kaum erwarten zu sehen, wie weit diese JavaScript-Bibliothek geht. 3. Reaktion und Tools installieren: verwenden wir eine kleine Anzahl von Tools, um uns bei der Reaktionsentwicklung zu unterstützen. Zuerst müssen Sie sicherstellen, dass Sie keine Js auf Ihre Systeme heruntergeladen haben. Für Mac-Benutzer, gehen Sie einfach zu wissen Jazz Dot Org's und finden Sie die HomeLink zu Hause Download Note Version 6.9 Punkt vier, die für die meisten Benutzer empfohlen oder den empfohlenen Download, der derzeit ist. Keine Js. Nun, wenn Sie nicht verwenden eine Maxime von nicht zu Sorgen, musste Downloads und finden Sie den Link relevant für Ihre Plattform. Ob Sie das Windows-Installationsprogramm oder die Limits Installer Notiz benötigen, hat es für Sie. Sobald ein Paket heruntergeladen wurde, öffnen Sie es. Sie sollten eine Reihe von Schritten finden, für die Nein vollständig auf Ihrem Computer installiert ist. Fahren Sie mit der Einführung fort, um die Lizenz. Gehen Sie voran und akzeptieren Sie alles, dann gehen Sie weiter und geben Sie Ihr Passwort ein. Sobald Sie fertig sind, sollten Sie sehen, dass an einem bestimmten Ort auf Ihrem Computer kein GS installiert wurde. Normalerweise ist es der lokale Schrägstrich VIN , der globale in der PATH-Umgebung ist, hat gerade das Terminal geöffnet und eine einfache Möglichkeit, das Terminal auf einem Mac-System zu öffnen, es ist Druckbefehl Raum , der ein Scheinwerfer öffnet Zukunft und gehen Sie und drücken Sie TRM. Und dann, sobald Sie das Terminal-Symbol Pop-up drücken, eingeben und boom sehen , startet das Terminal. Für diejenigen von Ihnen, die am Terminal neu sind, könnten Sie es im Grunde als eine Typversion des Finders oder den Ordner erkunden auf Ihrem System vorstellen . Wir können durch Ordner oder Verzeichnisse navigieren, indem wir CD eingeben, die für Change Directory steht, also werde ich mein Codierungsverzeichnis ändern. Jetzt werde ich zu einem anderen Verzeichnis navigieren, eines namens Test Directory. Dann werde ich L s eingeben, was für eine Liste steht, und dann können Sie alle Inhalte sehen, die derzeit dort sind, genau wie Sie es mit dem Finder tun würden. Sie konnten auch Dateien und andere Ordner sehen. Also gehen Sie voran und drücken Sie auf „Löschen“, um alle diese Inhalte Typ CD heute Abend zu löschen, um wieder zum Home-Verzeichnis zu gelangen . mal klar. Und jetzt wollen wir überprüfen, ob die Notiz tatsächlich richtig installiert ist. Geben Sie note dash V mit einem Leerzeichen dazwischen ein und dann sollten Sie Ihre Versionsnummer sehen, die für mich 6,9 Punkt vier ist. Die aktuelle Version und geben Sie dann auch NP Neid. Sie sollten eine Version höher als drei sehen. Ein NPM verschiebt automatisch ohne NPM, in erster Linie installiert Modelle sind Pakete in Note. Wir verwenden eine Menge NPM in diesem Kurs, so dass Sie weiterhin alles über das nächste erfahren. Lassen Sie uns unser erstes Werkzeug innerhalb von PN beleidigen. Gehen Sie zurück zu Ihrem Browser, gehen Sie zu Google und suchen Sie. Reaktor erzeugen. Gehen Sie weiter und finden Sie den ersten Get-Hub-Link, der auftaucht und Sie sollten ein Projekt finden, das genau so aussieht. Create React App ist perfekt für Studenten, die nur mit reagieren beginnen, weil es uns erlaubt, einfach auf den Reaktionscode zu konzentrieren, Führen Sie unsere Projekte sofort und sehen Sie Fehler. Remake reflektiert automatisch in unseren laufenden Anwendungen, während wir in den Prozess bauen. Scrollen Sie nach unten und wir finden die Installationsanweisungen hier drüben. Sie bemerken, dass, um zu installieren, erstellen Sie reagieren, können wir einfach NPM verwenden, so NPM installieren g erstellen reagieren Sie auf Kopf zurück zu Ihrem Terminal und wir werden diesen Befehl ausführen. Oder jetzt lassen Sie uns NPM installieren G, was für globales erstellen steht. Reagieren Sie bei genial. Ihre Ausgabe sollte im Terminal so aussehen. Also, bevor wir tatsächlich unsere erste Anwendung erstellen müssen, um einen Code-Editor zu beleidigen, und wenn Sie bereits einen haben, können Sie das nächste Video überspringen. Aber wenn Sie ein neues installieren möchten oder Sie Ihre 1. 1 wie Adam installieren müssen, zum Beispiel oder erhaben, könnte das nächste Video Ihre Zeit wert sein. 4. Einen Code-Editor erhalten: Das endgültige Werkzeug für die React Development ist ein Code-Editor. Das Web hat eine Tonne von Code-Editoren da draußen für Sie zu finden, aber einige der beliebtesten und zwei meiner persönlichen Favoriten sind Adam, die Hilfe erhalten, offen unterstützt und erhaben, die viele andere Entwickler jetzt verwenden. Ich benutze beide Redakteure aus verschiedenen Gründen, aber ich habe in erster Linie entwickelt, damit zu reagieren. Jetzt können Sie es in jedem Editor hinzufügen, den Sie mögen. Sie können sogar Text, Editieren oder Ex-Code verwenden . Aber ich empfehle entweder Adam oder erhabene wegen ihrer Formatierung, was hilft, das Leben als Software-Ingenieure viel einfacher zu machen. Doch das Herunterladen von Adam kommt mit einer sehr gepflegten Funktion. Es erstellt automatisch die Montage auf Ihrem System, wodurch Sie Anwendungen vom Terminal aus öffnen können, sodass das Öffnen von Projekten so schnell wie das Tippen erfolgt. Adam dot innerhalb eines aktuellen direkt oder Adam Test-Verzeichnisses, zum Beispiel, ging aus einem heraus, um zu öffnen. Jetzt können wir einfach das Projekt im Code-Editor öffnen, indem Sie die Dateien oder Ordner-Symbole auf das Editor-Symbol ziehen. Genau wie so. Aber ein Projekt in einem Editor mit dem Terminal zu starten, fühlt sich an wie technische Magie, also nur für den Fall, dass Sie dies mit Adam tun möchten, und es funktioniert noch nicht oder erhaben. Lassen Sie mich Ihnen sogar zeigen, wie Sie Ihre Terminaleinstellungen einhaken, um nur selbst zu tun. So. Wie ich schon sagte, Adam sollte dieses Geschwister automatisch für dich erschaffen. Lassen Sie es uns testen. Wenn wir Adam zuerst mit Terminal öffnen könnten, gehen Sie in Ihren Anwendungsordner, finden Sie die Adam App, gehen Sie zu ihrem Inhalt. Es ist Ressource ist, den APP-Ordner und dann adam dot shh zu finden. Gehen Sie dann weiter und öffnen Sie das aktuelle Verzeichnis, das Sie möchten. Nun, wie Sie sehen können, startet Adam für uns. Was wir also tun werden, ist ein symbolisches Honor-Terminal zu erstellen, mit dem wir diesen Befehl mit einem sehr verkürzten Befehl ausführen können, wann immer Sie öffnen möchten. Und du könntest das tun, indem du jedes Mal dieses sehr lange Ding tippst. Aber das Ähnliche verkürzt diesen Befehl erheblich für uns. Also tippen Sie Ellen und s und schreiben Sie dann das ganze Kommando aus. Geben Sie dann Schrägstrich Benutzer Schrägstrich lokalen Schrägstrich Been ein , der Ihre Pfadvariable sein sollte. Geben Sie dann Schrägstrich Adam ein. Also der letzte nach dem Schrägstrich ist der Befehl, den Sie dann wollen? Verstand sagt, eine Datei existiert, weil ich diesen Semling bereits eingerichtet habe. jedoch Wenn wirjedochAdam dot danach ausführen, sobald Sie Ihre tun, bemerken Sie das gleiche Verhalten, bei dem Ihr Code-Editor vom Terminal aus gestartet wird. Wir könnten dasselbe mit der Unterzeile tun, damit wir erhabene verknüpfen können. Und so haben Sie erhabene jetzt für erhabene installiert. Sie müssen auch zu Anwendungen gehen. Sie finden die erhabene Text-App, gehen Sie zum Inhalt, teilen Sie die Unterstützung, Sie finden den bin und dann ist der Startbefehl s ubl in hier und finden Sie dann noch einmal Ihre lokale Pfad-Umgebungsvariable und tun Sie dann erhaben oder SPL, was auch immer Sie wollen. Und meine Datei existiert, weil ich bereits Assembly habe. Also jetzt kann ich erhabenen Punkt verwenden und wir sehen das gleiche Verhalten, aber mit erhabenem. Nun, da wir diese Engineering-Magie an unser Terminal angeschlossen haben und wir alles vorbereitet haben , um React-Projekte zu entwickeln, lassen Sie uns fortfahren, um tatsächlich eine 5. Wireframing CountdownChamp – deine erste CountdownChamp: Hallo. Lassen Sie uns die erste Anwendung vorstellen, die wir zusammen mit dem Namen Countdown Champ erstellen werden. In dieser App werden wir ein Tool haben, mit dem wir wissen können, wie viel Zeit es brauchen wird, um ein Datum von Bedeutung zu erreichen . Also lassen Sie uns auf Weihnachten zählen, 25. Dezember 2017. Nein, der AB, den Sie sehen, hat bereits einen Zähler und einfach jede Sekunde wird der Zähler aktualisiert, um anzuzeigen, wie viel Zeit bis zum Datum bleibt. Vielleicht möchten Sie aber zu einem anderen Date zählen . Nehmen wir an, Sie müssen wissen, wie viele Tage Sie noch haben, um Geschenk zum Valentinstag zu kaufen. Lassen Sie uns also 14. Februar 2017 setzen. Und da gehen Sie, die Updates mit dem neuen Datum an der Spitze und dort haben wir einen Zähler gehen zu dem Tag, an dem wir es eingeben. Also lasst uns anfangen, es zusammen zu bauen 6. Deine erste Anwendung erstellen: Lassen Sie uns unsere erste Anwendung mit React erstellen. Um zu beginnen, öffnen wir ein neues Terminal-Fenster auf einem mag. Sie können das Terminal in der Regel finden, indem Sie das Kommandofeld und die Eingabe in Terminal. Und sobald Sie sehen, dass das Symbol erscheint, einfach die Eingabetaste. Also hier haben wir ein neues Terminal-Fenster. Ich bin im Home-Verzeichnis. Ich werde in mein Codierungsverzeichnis navigieren und dann in den React-Ordner navigieren. Wenn Sie nicht bereits einen bestimmten Ordner oder direkt zum Beschichten haben,ermutige ich Sie, einen zu machen. Wenn Sie nicht bereits einen bestimmten Ordner oder direkt zum Beschichten haben, Jetzt hilft es nur, Ihre Projekte und Dateien organisiert zu halten. Jetzt, in diesem React-Ordner, werde ich ein Projekt initialisieren, um sich seinen Namen zu merken. Countdown Chip, um ein Projekt zu bauen, wird ein Paket verwenden wir früher installiert, erstellen reagieren bei Let's run, erstellen reagieren und dann das zweite Argument. Nach dem Leerzeichen geben wir den Namen ihrer Anwendung an. Also zählen Sie jetzt Chip herunter, abhängig von Ihrer Verbindung, sollte es ein paar Sekunden oder so dauern, aber sobald es fertig ist, wird es anfangen, die Dateien anzuschauen und sie in zu öffnen. Sobald es fertig ist, sollte Ihre Ausgabe so aussehen. Es gibt Ihnen einige Anweisungen, wie Sie den Entwicklungsserver starten, wie Sie ein Paket erstellen, wie Sie es testen und wie Sie es vollständig zerstören. Das erste, was wir tun werden, ist, der ersten Richtung CD Countdown Champion zu folgen. Aber bevor wir es ausführen, gehen wir weiter und erkunden Sie die AB in unserem Editor. Adam Dunn auch. Hörst du es? ISS-Countdown-Chip. Von links können Sie den Verzeichnisbaum sehen, wo wir alle Dateien und Ordner hier haben Wir haben bekannte Modulordner, aber wir haben alle Reaktionscode. Es ist sehr dicht. Wenn Sie also kein Facebook-Ingenieur sind, müssen Sie sich keine Sorgen machen, sich diese Ordner mit dem öffentlichen Ordner anzusehen. Wir werden den Indexpunkt HTML erst später bearbeiten, nur ein bisschen. Und dann der Quellordner, in dem wir den gesamten Reaktionscode hosten und das ist, woran wir hauptsächlich interessiert sein werden. Also lassen Sie uns den zweiten Schritt machen, den wir früher Terminal hatten. Und jetzt lassen Sie uns in PM starten hier startet es ein neues lokales Host-Fenster. Hier steht „Willkommen“, um zu reagieren. Es hat ihr Logo dreht sich. Es sagt, an seiner Quelle beginnen Abdi s und gespeichert, um alles in Ordnung zu schauen. Cool. Wir haben ihre Anwendung läuft, und jetzt, da wir dies tun, lassen Sie es uns anpassen, indem wir unsere allererste Komponente erstellen. 7. Bearbeiten der Anwendung: Beginnen wir mit der Bearbeitung der Anwendung, um zu beginnen. Wir werden etwas Verrücktes machen. Wir werden diesen gesamten Quellordner führen und all seinen Inhalt loswerden. Also mach los, lösche es. Nein, das sollte nicht alle Inhalte im Quellordner leeren. Jetzt mögen wir immer noch die Namensquelle. Also werden wir weitermachen und das behalten, aber wir werden unsere eigene Indexpunkt-JS-Datei erstellen. Es ist ein neuer Dateiindex Punktjets. In diesem Herbst werden wir anfangen, unseren Reaktionskoch zu kreieren. Unsere erste Zeile ist Import reagieren von für noch jetzt dies ermöglicht es uns, reagieren alle seine Komponenten die gesamte Bibliothek zu verwenden , um ihre Anwendung zu erstellen. Der nächste ist wichtig reagieren Dunk von reagieren tut Jetzt ist dieses Paket ein völlig separates von reagieren, die Steuerelemente werfen tatsächlich den Reaktionscode auf den Browser für uns. Lassen Sie uns unsere eigenen persönlichen Koch Stabilität schreiben Reagieren, Dump, Stopp, rendern Lassen Sie uns gehen ednitem Abstand. Und das erste, was wir wollen, ist ein def, das in der Web-Entwicklung einfach einen Abschnitt der Seite darstellt. Und in diesem div wird Countdown-Chip schreiben und dann müssen wir zielen, wo im HTML wir dieses Element jetzt rendern werden. Zum Glück, wenn wir uns den Index dot html anschauen, haben wir bereits eine Komponente mit der Idee der Route. Dies wird es ermöglichen, dies ich d mit unserem Reaktionselement zu zielen, um voran zu gehen und unsere zu erstellen, so dass wir einfach das Element bekommen, indem ich d Frucht genannt. Nun, das, wenn wir speichern, sollte Countdown-Champion auf dem Bildschirm rendern. Und da gehen wir. Unser persönlicher Text von Countdown Champ ist jetzt auf der Bewerbung. Als nächstes werden wir endlich unsere erste Komponente mit React erstellen, also geh weiter und gehe zum nächsten Video. 8. Deine erste Komponente erstellen: An dieser Stelle können wir unsere erste Reaktionskomponente erstellen. Inter React-Komponenten umfasste Benutzeroberfläche und sie haben in der Regel einige wiederverwendbare und unabhängige Qualität über für unsere erste Komponente wird es nennen F. Und wenn wir reakt-Komponenten erstellen wurden mit dot Js Ex-Erweiterung anstatt der Punkt Js -Erweiterung. Also, das ist richtig. Abduct J s ex. Nun, diejenigen von Ihnen mit etwas Web-Entwicklungserfahrung könnten JSX sehr vertraut finden. Es sieht genauso aus wie HTML. Aber in Wirklichkeit ist zwielichtige SX nicht. Hmm. Oh, es ist Javascript mit dem Aussehen einer Template-Sprache wie XML, aber wir verwenden es, um Komponenten und Elemente innerhalb reagieren zu erstellen. Also lassen Sie uns diese Reaktionskomponente erstellen. Jetzt müssen wir wie gewohnt von reagieren importieren reagieren. Aber jetzt fehlt uns ein Schritt. Wir möchten auch das Komponenten-Feature von React importieren. Lasst uns weitermachen und er hatte die Komponente. Das ist alles, was wir jetzt importieren müssen. Wir brauchen die Reaktion nicht mehr. Da die Indexpunkt-Js-Datei bereits das abdeckt, um mit dem Schreiben zu beginnen, wird unsere Komponente Eat a six class deklarieren Jetzt diejenigen von Ihnen mit einem Informatik-Hintergrund gut, wie ja, sechs Klassen, die sie eingeführt haben Atma Script 2015 und ermöglichen es uns, Java-Skript in einem objektorientierten Modell zu schreiben. Dies ist besonders nützlich bei der Erstellung unserer benutzerdefinierten Komponente, weil wir einfach erweitern können reagiert Komponente mit unserer Klasse, erben alle ihre Standardmethoden, die wir später diskutieren, wenn sie relevant für unsere Anwendungen werden . Aber die 1. 1 und die am häufigsten verwendete ist eine Rendermethode. Die Render-Methode ermöglicht es uns, jede GSX zurückzugeben, die wir möchten. Also lassen Sie uns ein neues div zurückgeben, das Countdown-Kette bei Komponente Cool sagt. Jetzt haben Sie bereits diskutiert Import, wenn wir importieren reagieren und sie reagieren von den Modulen nach unten . Aber nicht diese Komponente ist unser eigenes Modul, das wir in andere Klassen exportieren können, die später wichtig werden . Lassen Sie uns es jetzt exportieren und als Standardkomponente deklarieren. Schließlich brauchen wir die Anwendung, um diese Komponente als Standardkomponente zu erkennen, die zu verwenden ist. Gehen wir zu Index Thaci s und ersetzt Div durch unsere APP-Komponente. Nun, einige von Ihnen fragen sich vielleicht, warum wir die App-Komponente verwenden können, ohne sie zuerst zu importieren . Nun, ihr würdet genau Recht haben. Wir müssen aus dem aktuellen Verzeichnis importieren und Punkt bezieht sich immer auf das aktuelle Verzeichnis Schrägstrich. Und wenn wir speichern, sollten wir sehen, wie ihr Dave auf dem Bildschirm aktualisiert wird. Aber oben gibt es nichts Rendering auf der Seite. Warum ist das so? Nun, ein häufiger Fehler innerhalb der Rendermethode besteht darin, zu vergessen, den Rückgabezustand zu verwenden. Sie müssen immer die JSX zurückgeben. Du kannst es nicht einfach aufschreiben. Das ist etwas, was viele Leute mit React beginnen. Vergiss, etwas zu tun, mit dem ich selbst etwas zu tun hatte. Als ich lernte, wollte ich sagen, dass ich nie zurückgab und nie gehe. Countdown-Champion bei der Komponente. Bevor wir weitermachen, schauen wir uns kurz die drei Themen an, die wir gerade besprochen haben. Eine Komponente React ist ein unabhängiges und wiederverwendbares Stück von Ihnen. Ich nächstes JSX sieht genauso aus wie HTML oder XML, ist aber tatsächlich JavaScript und ermöglicht es uns, Reaktionskomponenten zu erstellen . Und schließlich ermöglicht uns das Importieren und Exportieren, Code zwischen Modulen und Dateien zu teilen. Lassen Sie uns zum nächsten Video übergehen 9. Strukturierung der Anwendung: diejenigen von Ihnen mit Erfahrung in welcher Entwicklung sich daran erinnern könnte, dass mit HTML dibs Elemente ohne innere Kinder sich in der Nähe befinden können. Die gleiche Regel gilt für JSX, was in ihrer Indexpunkt-Js-Datei bedeutet. Wir können dieses App-Element von zwei Tags zu einem ändern, also lassen Sie uns voran gehen und tun, dass bei und ein selbstumschließendes Tag. Als nächstes konzentrieren wir uns auf die Strukturierung dieser Anwendung. Zuerst wird etwas Temple JSX zu der App hinzufügen, von der wir später abarbeiten können. Dann fügen wir etwas Styling zum Frieden hinzu, fügen aber eine CSS-Datei hinzu. Gehen wir und fügen Sie die Struktur hinzu. Beginnen wir mit dem Hinzufügen eines Titels Div zu unserer Hauptkomponente. Also lassen Sie uns diesen Text jetzt löschen und fügen Sie ein getan für den Titel hinzu. Und würden Sie sagen, Countdown bis 25. Dezember 20. 70 Weihnachten. Jetzt werden wir etwas Struktur für die Countdown-Uhr hinzufügen. Liebe gewonnen aus Div und vier vorstellen Wann wird für die Tage sein. Sagen wir also 14 Tage und natürlich machen wir uns das vorerst erst wieder aus. Ich sage 30 Stunden. Wir brauchen auch eine für die Minuten. 15 Minuten und dann 20 Sekunden und ich würde die Tage Kleinbuchstaben machen, da es die ganze andere Zeit Kleinbuchstaben gemacht hat und sie reagieren Updates automatisch, sobald die spart dank zu erstellen reagieren. Als nächstes haben wir ein Eingabefeld, in dem die Benutzer ein neues Datum eingeben können, ebenso wie eine Schaltfläche, auf der sie dieses neue Datum einreichen können. Also, was ist ein Eingangskraftstoff? Wieder einmal werden wir ein selbstumschließendes Tag haben. Es wird einen Platzhalter für jetzt haben , der nur Neues Datum sagt und dann werden wir eine Schaltfläche direkt darunter haben. Das heißt, es ist unterwerfen. Lassen Sie uns voran und wickeln Sie dies in ein div selbst, nur damit sie zusammen im gleichen Abschnitt platziert werden, und da gehen wir. Wir haben einige Vorlage ing für App, aber im Moment sieht es wirklich hässlich aus, um ehrlich zu sein. Also lassen Sie uns etwas CSS hinzufügen, um dies nur ein wenig zu machen. einfach Lassen Sie unseinfacheine neue Datei namens app dot CSS zum Quellordner hinzufügen, wenn das aufhört. zunächst Lassen Sie unszunächsteine globale App-Klasse erstellen. Dann sagen wir, wir werden den ganzen Text in die Mitte bringen. Wir machen das ganze Geld um 35 Pixel, damit wir es sehen können und sie uns einen Spielraum geben würden. Ich will nicht, dass es die Spitze berührt, also werde ich 20% sagen, weil das eine schöne, anpassungsfähige Zahl ist . Wann immer Sie den Bildschirm mit Now ändern, wissen diejenigen von Ihnen, die mit CSS vertraut sind, vielleicht bereits, wie es funktioniert. Grundsätzlich fügen Sie jedem Ihrer Dibs Klassen hinzu, um bestimmte Stylings wie Texas-Schriftgröße oder Ränder anzuwenden , um das Erscheinungsbild Ihrer Anwendung zu ändern. Also lassen Sie uns gehen und fügen Sie diese App Schränke. Du bist Komponente. Nun, bevor wir irgendein Styling hinzufügen, ist das erste, was wir tun müssen, tatsächlich das CSS in unsere Komponente aufzunehmen. Also importieren Sie bei Punkt CSS. Es ist wirklich so einfach. Wir können bereits voran gehen und beginnen, das CSS innerhalb unserer Anwendung zu verwenden. Jetzt fühle ich mich intuitiv, hier nur Klasse gleich zu schreiben, weil wir es bereits innerhalb unseres CSS-Fuck benannt haben. jedoch Wenn wir diesjedochsagen, werden wir feststellen, dass keines der Stylings ohnmächtig wird. Das liegt daran, Klasse ist bereits reserviertes Schlüsselwort innerhalb des Job-Skripts, So GSX verwendet ein anderes Schlüsselwort, um Klassennamen in ihren Vorlagen zu benennen. Ich kann erraten, was es ist. Ich sagte es früher Klassenname. Und da gehen wir. Es gibt unser neues Styling bereits gelten. , Ich möchte,dass der Titel deutlicher wird. Also werden wir eine Titelkomponente hinzufügen und um Sie deutlicher zu machen, werde ich die Schriftgröße vergrößern. Dann natürlich müssen wir natürlichdie AB-Titelklasse hinzufügen. Name ist gleich Titel. Und da gehen wir. Es ist viel größer, aber ich werde voran gehen und re Größe ist nur, damit wir die volle Wirkung haben können. Schön. Dann wird jeder dieser Dibs einen separaten Klassennamen haben. Die 1. 1 wird Uhrtage sein. Die nächste wird Uhr Stunden sein. Der nächste wird eine Uhr Minuten sein. Die letzte wird Uhr zweite sein, Lassen Sie uns ein Styling hinzufügen. Nein. Und die Argumentation hinter diesem Styling ist, dass ich möchte, dass alle diese in Einklang stehen. Ich mag es nicht, wie es eine neue Linie zwischen allen gibt, also werden wir das jetzt ändern. Also für meine Uhrzeiten, werde ich sagen, das Display ist in der Schlange. Und dann für meine Uhrentage werde ich auch sagen, aber die Anzeige ist im Leben und da gehen wir. Wir sehen sie sehr viel. Und dann natürlich müssen wir das natürlichsowohl für die Minuten als auch für die Sekunden tun. Alles klar, Cool. Allerdings sind wir irgendwie ein wenig ineffizient mit unserem CSS. Wir könnten dies tatsächlich deutlich verkürzen, indem wir einen CSS-Trick verwenden. Es ist bestimmte Klassen sollten die gleiche Eigenschaft. Wir können es tatsächlich verkürzen. Wir können einfach ein Komma verwenden und sehen, dass Uhr Stunden auch die Anzeige in Zeile erbt, wie Sie speichern. Wir sehen, dass das gleiche Styling immer noch gilt. Zylinder ist das Gleiche für die Uhr Minuten sowie für die Uhr. Zweitens, um unseren Code so viel effizienter zu machen. Und dann, natürlich, sehen Sie, sie berühren sich ziemlich viel. Ich kann nicht wirklich unterscheiden, dass diese Luft getrennte Wörter. Geben wir ihnen allen einen Rand von 10 Pixeln, und da gehen wir. Das ist genug Styling für jetzt. Keine Sorge. Wir werden später einen Trick in unserem Ärmel haben, um das gesamte Styling und Aussehen dieser Anwendung wirklich zu binden . Also gehen wir weiter und gehen Sie zum nächsten Video 10. Zustand einführen: Lassen Sie uns die Idee des Zustands in reagierenden Komponenten einführen. An dieser Stelle haben wir nur Jazz-Sex Vorlage hinzugefügt, um ihre Anwendung mit einigen Standardtext, um die Benutzeroberfläche zu aktualisieren . Allerdings möchten wir Reaktivität hinzufügen und weg, damit der Benutzer mit ihm interagieren kann. Hier kommt der Zustand rein. Sie können sich den Zustand als die Daten vorstellen, die für die Anwendung relevant sind. Jede Komponente hat ihren eigenen lokalen Status in Bezug auf den globalen Status der gesamten App, genau wie in einer Schule. Zum Beispiel hat es einen Zustand der Anzahl der Lehrer, der Anzahl der Schüler und der Anzahl der Klassenzimmer, usw. Aber jeder Student hat auch seinen eigenen Zustand, eine Reihe von Lehrbüchern, Notizbüchern und Stiften. Lassen Sie uns voran und fügen Sie unseren Komponenten Zustand hinzu. Wir müssen der Klasse einen Konstruktor hinzufügen. Dies ermöglicht es uns, einen lokalen Zustand innerhalb unserer Klasse zu haben. Jetzt müssen wir ein Requisiten-Argument übergeben, und per Konvention rufen Sie diese Requisiten auf, obwohl Sie dies alles benennen könnten, was Sie mögen, aber für Requisiten bezieht sich auf geerbte Daten von jeder übergeordneten Komponente Dies ist etwas, das von objektorientiert geerbt wird. Die Programmierung wird später deutlich, wenn wir unsere Anwendung erweitern. Nein Das nächste, was wir deklarieren müssen, ist der tatsächliche Zustand unserer Komponenten. Und im Reagieren. Status ist immer ein Objekt in einem Objekt. Eigenschaftenschlüssel, Matt zu Werten. Und diese Werte können ein beliebiger gültiger JavaScript-Typ sein, z. B. eine Zeichenfolge, eine Zahl oder ein anderes Objekt. Jetzt wird das erste, was erklären, ist unsere Deadline. Hier ist unser Schlüssel in unserem Wert wird natürlich sein, natürlich sein, 25. Dezember 2017. Da jeder Weihnachten liebt, richtig, lasst uns voran gehen und diesen Titel leichter zu sehen machen. Wir werden den 25. Dezember hier zu unserem Staat ersetzen und reagieren. Wenn wir auf eine Variable in unserem Text verwiesen, können wir diese Klammernotation verwenden, um dies zu tun. Das heißt also, dass diese Frist festlegt. Und wenn wir speichern, sollten wir ein Update in ihrer Anwendung sehen. Und da gehen wir hin. Wir sparen. Es ist immer noch die gleiche Frist, nur um zu zeigen, dass es funktioniert. Lassen Sie uns gehen und Änderungen in November, oder Sie können es zu jedem Tag ändern, den Sie möchten und nett. Es steht jetzt November. So gehen Sie Rache und Zustand und einige Daten zu unserer Anwendung und unserer Klasse bei Component. Gehen wir und gehen zum nächsten Video. Wir werden tatsächlich den Zustand dynamisch aktualisieren 11. Zustand aktualisieren: lassen Sie uns irgendwie den Zustand unserer Komponente dynamisch aktualisieren. Um dies zu tun, können wir die Vorteile einer bestimmten Methode innerhalb reagieren genannt set-Status. Wir müssen diesen Punkt-Set-Status einfach über Code aufrufen, um unsere lokalen Klassendaten zu aktualisieren . Zunächst einmal, Lassen Sie uns Aquarium Methode innerhalb dieser Klasse aber aktualisiert den Zustand. Mal sehen, wir haben eine Änderungsfrist Methode, die einen Zustand aktualisiert. Dann natürlich müssen wir natürlichdiesen Punktsatz nennen, der innerhalb dieser Methode geblieben ist. Jetzt gibt es eine sehr wichtige Regel zu befolgen. Wenn Sie den Status aktualisieren, dürfen Sie niemals den Status direkt mutieren oder ändern. Denken Sie daran, das wiederholen Sie noch einmal. Sie dürfen niemals den Status direkt mutieren oder ändern, was bedeutet, dass die Komponente Ender nicht hinterlässt. Wenn zum Beispiel wir zum Beispieldiesen Gedanken ST-Punkt-Frist gleich 25. November 2017 genannt haben. Dies ist ein Beispiel für die direkte Mutierung des Zustands. So ist das auch. Zum Beispiel, wenn wir hier einen Zähler hätten und wir ihn Null nennen, zunächst nicht in der Lage sein, würden wir zunächst nicht in der Lage sein,diesen Gedankenzustand zu sagen, der Zähler plus gleich eins ist. Das würde nicht funktionieren. Stattdessen haben wir diese Gedankensatz-Zustandsmethode verwendet. Es hat ein völlig neues Objekt mit dem Schlüsselwert-Paar übergeben, das wir aktualisieren möchten. Nehmen wir also an, die neue Frist wird der 25. November 2017 sein. direkte Mutierung des Staates würde natürlich zu Fehlern und Bereichen innerhalb der Anwendung führen. jedoch Wenn Siejedochein neues Objekt so deklarieren, wie Sie es in diesem Gedanken-Set-Status tun, können die Daten pier und fehlerfrei bleiben. Lassen Sie uns diese Methode an ihre Schaltfläche nach oben gut anhängen, indem Sie auf Klick-Listener auf die Schaltfläche hinzufügen. Nun, sagen Sie auf Klick gleich und dann fügen wir eine Essex Anonymous Funktion hinzu, um diese nicht ändern Frist. Nun fragen Sie sich vielleicht, warum wir anonyme Funktion brauchen Wenn zum Beispiel wir zum Beispieleinfach diese nicht ändern Frist aufrufen. Handler ohne eine anonyme Funktion genau wie diese benötigen Grüße in Ihrer App, was dazu führen könnte, dass sie abstürzt. Stattdessen nutzen wir die anonyme Funktion E six. Um dies nicht geändert aufzurufen, wird die Deadline-Methode in der Lage sein, einfach zu sagen, dass dies nicht die Frist ändern, da die Essex Anonymous Funktion uns erlaubt, nur einmal aufrufen, ohne dass die Schleife Ihre Anwendung zum Absturz bringt. Wie wir weiterhin codieren, Will Seymour anonyme Funktionen und sogar nicht-anonyme Funktionen in Aktion, um unsere Anwendungen zu aktualisieren. Also lasst uns sparen. Und schließlich, lassen Sie uns auf die Schaltfläche „Senden“ klicken, um zu sehen, ob es funktioniert. Und da gehen wir hin. Während ich auf „Senden“ klicke. Sie sehen diese Änderung vom 2. Dezember 25 2017. Gehen wir zum nächsten Video über. 12. Daten mit dem Eingabefeld ändern: bisher haben wir nur eine Möglichkeit für den Benutzer, die Frist zu aktualisieren. Und natürlich natürlich ändert es sich nur zu einer einzigen Frist, unabhängig davon, was der Benutzer eingibt. Nun, das ist ein kranker Vorteil dieses Eingabefeldes. Um die Anwendung wirklich zu aktualisieren, fügen wir dem Status einen neuen Schlüssel hinzu. Dieser Schlüssel wird New Deadline genannt und lassen Sie uns Camel Fall es. Dann haben Sie zwei Worte. Aber du kombinierst sie zusammen, und das zweite Wort, das du jetzt kapitalisierst, wird einfach die neue Frist zu einem leeren streng gesagt . Als Nächstes müssen wir diese neue Frist aktualisieren. Nun, Adam, auf Änderungsfunktion in das Eingabefeld. Lasst uns weitermachen und formatieren. Es ist ein bisschen. Und in der On-Change-Funktion werden wir eine Ereignisvariable und ähnlich einer anonymen Funktion hinzufügen. Wir werden diese gleiche Pfeil-Syntax haben. Für den Moment. Lassen Sie uns einfach konsul dot protokollieren Sie diese Ereignisvariable, um zu sehen, was los ist. Nehmen wir an, jetzt gehen wir und inspizieren das Element der App, so dass Sie auf den Rat zugreifen können . Mal sehen, was passiert, wenn wir November tippen, und da gehen wir. Es gibt eine Menge Daten, und der Grund, warum es so sehr aussieht. Es liegt daran, dass es wirklich so viele Daten gibt. Aber wirklich, was wir interessiert sind, ist genau das, was der Benutzer eingibt und wir können darauf zugreifen, was der Benutzer eingibt, aber das Hinzufügen der Zielpunkt-Wert-Eigenschaften, Lassen Sie uns voran und speichern. Versuchen wir es noch einmal. Und wie Sie sehen können, wird es jedes Mal aktualisiert, wenn der Benutzer das Eingabefeld ändert und wir haben die letzte Änderung, die November ist, die kurz für November ist. Schließlich, da wir die Daten bereits in unserem Konsul eingeloggt sehen können, können wir voran gehen und ändern ist konstante Protokollfunktion mit dieser Punkt-Set-Statusfunktion die Aktualisierungen und neuen Deadline zu diesem Ereignis Punkt Zielwert. Lasst uns das ändern. Es wird das sagen. Das heißt, Staat, unsere neue Frist. Denken Sie daran, es muss ein heiliges Objekt sein. Ist das Ereignis, das Dr Value anvisiert. Wir werden voran gehen und sparen. Das nächste, was wir tun müssen, ist die tatsächliche Änderungsfrist ein wenig zu ändern, um die Frist wirklich auf unsere neue zu aktualisieren. Für jetzt, auf der Methode, die hier den besten Anfangszustand sucht, einfach den aktuellen Status, protokolliert Consul einfach den aktuellen Status,um zu sehen, wie die Anwendung aussieht Bisher. Lassen Sie uns sparen und dann sagen wir, unsere neue Deadline ist November 25 2017. Lass uns reingehen. Drücken Sie jetzt diese Funktion zum Ändern des Termins. So ist unsere Objektfrist derzeit der 25. Dezember 2017. Aber hier haben wir einen neuen Deadline , der 25. November 2017 ist. Damit wir gehen, haben wir keine Aktualisierung der Zustandskomponente. Jetzt müssen wir einfach die neue Frist für die ursprüngliche Frist auf diese neue Frist oder besser gesagt, die neue Frist innerhalb des Staates setzen oder besser gesagt, . Wir gehen weiter und löschen das. Für den Moment. Mal sehen, ob die gesamte Anwendung funktioniert. Erinnerst du dich an 25? 2017 wird in der Presse einreichen und dort gehen wir. Es ändert sich. Wir könnten den 20. November machen, wenn du es wolltest. Wir können sogar das Jahr zu etwas Verrücktem wie 30 17 Mann ändern. Wenn wir nur noch am Leben sein könnten , um zu sehen, wie Technologie aussieht. Vielleicht programmieren wir mit unseren Köpfen. In jedem Fall sieht die Dimensionierung im Moment ziemlich unattraktiv aus, aber später werden wir etwas Styling sowie einen ordentlichen Reaktions-Trick hinzufügen. Um diese ganze Befürwortung sieht glatt aus. Lasst uns weitermachen 13. Erstellen einer a: Moment haben wir eine große Komponente für jedoch, an dieser Stelle müssen wir viel Logik auf die Uhr Funktion ihrer Anwendung hinzufügen. In dieser Sammlung von vier dibs hier sieht so miteinander verwandt aus, aber wir könnten genauso gut, schaffen völlig neue Komponente dafür. Aber das Hinzufügen der Uhrpunkt-JSX-Datei mit unserem Quellordner. Neue Datei Clark Don't JSX Wir folgen dem gleichen Code wie zuvor, also importieren reagieren sowie eine Komponente von reagieren, und wir werden auch unsere CSS importieren. Gott sieht uns. Wir werden die CLA-Klasse deklarieren und die Komponente erweitern. schließlich Lassen Sie unsschließlichdie Uhr exportieren. Nein, nein. Nun, natürlich, müssen Sie lesen oder so. So wie zuvor wird offensichtlich tiv machen. Das ist unsere Uhr. Gehen wir weiter und greifen die JSX, die wir geschrieben haben, bevor Sie es hier einfügen, um etwas Zeit zu sparen . Also kopieren Sie das. Platzieren Sie es hier drinnen. Dies wird die Struktur unserer JSX sein. Nein, lassen Sie uns voran und hatten einen Konstruktorspeicher. Wir müssen Ihr Argument Requisiten sowie eine Super-Requisiten für den objektorientierten geerbten Programmierstil von US sechs JavaScript übergeben. Sie uns schließlich LassenSie uns schließlicheinen Anfangszustand erklären. Wir müssen einen Zustand für die Tage haben. Variable Stunden variabel die Minutenvariable für die Sekundenvariable. Sagen wir Tage für Analysen. Null Stunden auch Null in den Minuten als Null. Und natürlich, die Sekunden als Null als auch. Und es wird all diese Zahlen ändern, um diesen Zustand zu sein, den wir wollen, dass sie sein werden. Also dieser wird der Service an ST Dot Tagen sein. Unserer wird dies nicht Staatsstunden sein. Minuten. Du vermutest, dass dieser Gedanke ST Dot Sekunden nicht nur ein Scherz. Minuten. Und dann hat dieser nicht Zustand Sekunden bekommen. Cool. Nehmen wir an, das ist wichtig innerhalb der App und die Ersetzung unserer JSX durch oclock Komponente. Also lassen Sie uns unsere Uhr in den aktuellen Ordner-Look importieren und dann die gesamte Uhr ersetzen , wo das gesamte tat eher mit unserer Uhrkomponente des Selbst im schließenden Tag. Gehen Sie voran und sparen Sie. Es ist wirklich niedrig. Lassen Sie uns voran gehen und das Element untersuchen. Wir haben etwas falsch und hier gehen wir ein gültiges Reaktionselement oder nein muss zurückgegeben werden. Erinnern Sie sich, wie ich gesagt habe, bevor diese Orender-Methode immer zurückgegeben wurde? Die JSX, anstatt es einfach auszuschreiben. Nun, los geht's. Viele von Ihnen haben das wahrscheinlich erwischt, aber lassen Sie uns das jetzt hinzufügen. Und ihr habt wahrscheinlich auf den Bildschirm geschrien. David, du vermisst etwas. Ich werde das sagen und dann gehen wir. Null Tage, Null Stunden, Null Minuten, Null Sekunden. Jetzt, wo wir unsere Uhrkomponente haben, können wir weitermachen und weitermachen. 14. Requisiten präsentieren: Sieht hübsch aus. Sq, wenn die APP ein Countdown-Datum vom 25. Dezember 2017 hat, aber die Zeit, die es braucht, um dorthin zu gelangen sitzt bei null Tag, null Stunden, Minuten und Sekunden. Es ist Weihnachten. Sein Spaß ist, es scheint, die Zeitreise dieser Apfel nur zeigen, die wahre Zeit braucht, um diesen fantastischen Tag zu erreichen oder was auch immer Sie möchten, dies zu tun. Wir benötigen eine Möglichkeit für die Uhrkomponente, um das in der Anwendung festgelegte Datum zu erkennen. Die übergeordnete Komponente. Wir könnten etwas Ähnliches wie staatliche Requisiten nutzen, um dies zu tun. Sommer zwei State Requisiten bezieht sich auf einige Daten innerhalb der Anwendung jedoch Mit Requisiten übergeben Sie jedochDaten oder Status an untergeordnete Komponenten von übergeordneten Komponenten, was bedeutet, dass ich innerhalb dieser Uhr einen Termin angeben kann, gleich der aktueller Stand der Frist. Also übergibt wir die Frist vom übergeordneten Anwendungsstatus an die Uhr, die jetzt in der Lage sein wird, diesen Termin als Requisiten zu erkennen. Um dies zu beweisen, lassen Sie uns fortfahren und diese Stopp-Requisiten in ihrem Konstruktor protokollieren, um zu sehen, was los ist . Wenn ich das Element inspiziere, werden wir sehen, dass diese Stopp-Requisiten jetzt ein Objekt ist, und es gibt eine Frist mit unserem Schrumpfen vom 25. Dezember 2017. Requisiten werden besonders nützlich, da beim Aktualisieren des Status unserer übergeordneten Komponente jeder Status Requisiten an untergeordnete Komponenten übergibt, automatisch aktualisiert und gelesen wird jeder Status Requisiten an untergeordnete Komponenten übergibt, . Rendern dank React Engineering und Softwareprinzipien. Ziemlich erstaunlich hier erhielt die Frist. Als Kind der Aktienrequisiten können wir voran gehen und das verwenden, um die Zeit zu berechnen, die es bis zum letzten Datum dauert. Lassen Sie uns diese Methode im nächsten Video hinzufügen, um diese Zahlen direkt hier zu aktualisieren. 15. Zeit berechnen: Lassen Sie uns eine Methode hinzufügen, die eine Zeit berechnet, die von der letzten Frist bis zur aktuellen Zeit verbleibt. Glücklicherweise kommt JavaScript bereits mit einem Datumsobjekt mit einer ganzen Menge Funktionalität, die wir nutzen können . Also lasst uns das schreiben. Holen Sie sich Zeit. So Methode. Jetzt, Holen Sie sich Zeit, bis wir eine Argument-Frist innerhalb der Methode haben. Lassen Sie uns eine Variable namens Zeit jetzt deklarieren. In Essex verzichten wir darauf, das Schlüsselwort var zu verwenden, das in den vorherigen Versionen des Job-Skripts verwendet wurde. Keine Verwendung Let oder const. Meistens wollen wir Nachteile für Variablen verwenden, die nie aktualisiert werden müssen, und lassen Sie für Variablen , die benötigen. Aktualisieren im Rahmen dieser Funktion müssen jedoch nur einmal diese Zeitvariable berechnet werden, so dass wir das Schlüsselwort const verwenden. Jetzt werden wir einige Methoden innerhalb des Job-Skript-Datumsobjekts verwenden, um uns zu helfen. Wir setzen es gleich einem Datum, nicht Parse Methode außerhalb der Frist, und sie müssen eine andere die Zahl subtrahieren, indem sie die aktuelle Zeit jetzt parsen. Und der Grund, warum ich einfach Neues Datum sagen kann, ist, weil standardmäßig, wenn wir ein neues Datumsobjekt in JavaScript deklarieren, es einfach die aktuelle Zeit erfasst. Es sagt, dass die Zeit, wie es Zeit ist. Die Subtraktionsberechnung subtrahiert also die aktuelle Zeit zwischen dem Stichtag und dem aktuellen Datum. Innerhalb dieser Zeit werden wir in der Lage sein, unsere aufgetretenen relevanten Sekunden, Minuten, Stunden und Tage zu finden Minuten, , die wir auf unseren Zähler werfen müssen, um die Anwendung zu aktualisieren. Um dies zu veranschaulichen, lassen Sie uns einfach die Zeit protokollieren, so dass wir dies in Aktion sehen können. Und je mehr einen Aufruf in unserer Rendermethode für jetzt hinzufügen, zu Testzwecken, nur eine c r Funktion funktioniert und wie diese Zahl tatsächlich aussieht. Also lassen Sie uns das sagen. So ist die Zeit so etwas wie drei Milliarden 118 Zahlen viel zu lang, um wirklich zu erkennen und natürlich nicht auf dem Bildschirm zu zeigen. Jetzt, da wir diese Zahl sehen, müssen wir wirklich die Sekunden, Minuten, Stunden und Tage von dieser langen 10-stelligen Längennummer unterscheiden Minuten, . Also lassen Sie uns etwas Mathematik und Informatik zu dieser Funktion hinzufügen, und wir werden die Vorteile der Aufteilung im Modelo nutzen, um relevante Zahlen zu greifen . So ähnlich werden wir eine const Sekunden deklarieren und sagen, dass gleich der mathematischen Punkt-Floor-Funktion. Teilen Sie diese Zeit durch 1000 und Modul. Oh, die ganze Sache um 60. Und das Modul. Es sieht aus wie das Prozentzeichen. Also die ganze Berechnung um sechs genau so und diejenigen von Ihnen, die mit dem Modul nicht vertraut sind . Oh, aber Modul Oh, tut es im Wesentlichen gibt den Rest einer Funktion aus. Also, wenn ich 10 Modul Oh, frei. Die Ausgabe wäre ein, aber sechs modulare drei gal setzen mit der Null, weil sechs durch drei geteilt . Der Rest ist Null, aber 10 geteilt durch drei. Der Rest ist einer, der sich weiterbewegt. Um unsere Minuten zu bekommen, sehen sie sehr ähnlich aus. Allerdings müssen wir eine zusätzliche Aufteilung der Zeit von 60 zu tun, um greifen relevant Minuten, Stunden, ähnlich aussehen. Mathe Boden wieder und tragen Sie mit mir. Hören Sie, dass diese Funktionen ein wenig Zeit brauchen, um zu berechnen. Los geht's. Wir werden die Zeit selbst teilen, aber 1000 mal 16 mal 60 wieder in dieser Zeit für Stunden, wir werden modularen um 24. Da es nur 24 Stunden am Tag gibt, lassen Sie uns voran und fügen Sie einige Abstände hinzu, so dass es einfacher ist zu lesen. Und keine Sorge, ich berechne diese Zahlen nicht von meinem Kopf. Ich bin kein mathematisches Genie. Ich habe sie vorher oder vielleicht aufgeschrieben, und ein mathematisches Genie. Und ich will nur nicht, dass ihr es wisst. Also nochmal, ich werde mich auf die Tage konzentrieren und dann durch 1000 mal 60 mal 60 mal 24 teilen. Und lassen Sie uns diese Variablen ausgeben, um zu sehen, ob sie relevante Minuten erscheinen, und dann machen wir unser Protokoll. Ich will sehen, wie die Stunden aussehen. Unseren. Und schließlich, was sind die Tage seit zwei Tagen? Wir gehen voran und sicher, weil es neu geladen wird. Sieht aus, als hätten wir 347 Tage, acht Stunden, 35 Minuten und eine Sekunde bis Weihnachten. So nah, was? Und es sieht so aus, als würde alles aktualisiert werden. Großartig. Das letzte, was wir tun müssen, ist einfach den Zustand zu aktualisieren. Also lasst uns zuerst den Zustand unserer Daten aktualisieren. Wir könnten sagen, dass Tage gleich dem Datum sind, wird dies sagen und schauen Sie sich das an. Wir haben eine Vorfallsschleife. Also haben wir hier etwas sehr Fehlerhaftes vor sich. Wir können nicht anrufen, Tom bis innerhalb unserer Rendermethode erhalten und diese Punkt-Set-Statusfunktion übergeben. Andernfalls werden wir in der aktuellen Endlosschleife innerhalb unserer Funktion. Im nächsten Video erfahren wir also mehr über Lebenszyklusmethoden, um dieses Problem zu beheben. 16. Hooking LifeCycle: in reagieren, wenn die Komponente auf dem Bildschirm gerendert oder vom Bildschirm kommt. Wir bezeichnen diese Ereignisse entweder als Auf- oder Ankündigung aus der Anwendung. React bietet spezielle Methoden für jede Komponente basierend auf diesen Ereignissen, um es uns zu ermöglichen, Code für Anwendungen auszuführen und Anrufe zu reagieren. Ähm, Lifecycle-Haken. Die erste Hook oder Methode verwendet wird, ist eine Komponente Will Mount Hook. Es wird ausgeführt, bevor die Komponente vollständig in der Anwendung gerendert wird. Wir verwenden diese, weil Sie die letzten Requisiten, Daten und die aktuellen Tage, Stunden,Minuten und Sekunden berechnen möchten Daten und die aktuellen Tage, Stunden, , die wir benötigen, bevor wir unsere Daten auf dem Bildschirm rendern. Also, sobald wir unsere Daten haben, aktualisiert den Zustand über Anwendung sagte, dass das richtige Zeug gerendert wird. Lassen Sie uns hinzufügen, dass die Komponente Funktion direkt unter den Requisiten bemerken wird, und dann werden wir diesen Gedanken berechnen. Holen Sie sich Fliesen, bis unsere Requisiten nicht. Bevor ich rette. Lassen Sie uns fortfahren und entfernen Sie dies aus der Rendermethode, um sicherzustellen, dass wir nicht den gleichen Fehler wie zuvor erhalten . Wir werden retten und da gehen wir. Dies ist unerwartetes Verhalten, weil ich nicht wirklich Komponente geschrieben habe. Nun, ich schrieb, Comme Ponette wird noch einen dieser Bereiche kennen, die Sie wahrscheinlich erkennen. Und dort gehen wir erhalten die aktualisierenden Tage wer? Aber wir aktualisieren auch Stunden auf die Stunden. Whoa, es funktioniert jetzt. Ein cooles Ja. Sechs Trick, den wir verwenden können, um unseren Code einfacher zu machen, ist die Verwendung der Schlüsselwert-Kurzschrift. Syntax. Beachten Sie, wie der Schlüssel und der Wert genau gleich aussehen. , Anstatt zu sagen,dass Tage Tage sind Tage. Ich kann einfach Tage als ein Schlüsselwort angeben, wissen Sie, automatisch erkannt, dass Tage der Schlüssel sein sollten, und Tag sollte auch der Wert sein. Wenn ich also speichere und neu lade, werden Sie feststellen, dass es immer noch funktioniert. Das gleiche gilt für Stunden, und jetzt kann ich diese Linie deutlich verkürzen. Aber nur sagen Minuten und Sekunden, wie ich die ganze Sache Updates speichere, Lassen Sie uns gehen und loswerden diese Konsolenprotokolle, die wir nicht mehr brauchen. Sagen Sie es noch einmal, und jetzt nutzen wir einen anderen Lebenszyklus. Hook namens Component hat mountet Dieser wird ausgeführt, nachdem die Komponente vollständig auf die Anwendung innerhalb unserer Komponente gerendert wurde, hat Mount Hook die Zeit bis zu jeder Sekunde aufrufen wird . Um unser Time-Job-Skript weiter zu aktualisieren, wird mit einer speziellen Setintervall-Funktion geliefert , mit der Sie Code in einem bestimmten Intervall ausführen können. Es läuft in Millisekunden, also werde ich unsere Funktion als erstes Argument und 1000 Millisekunden angeben, was einer Sekunde als zweites Argument entspricht. Also ist es richtig, dass jetzt Intervall gesetzt, und wir müssen eine Pfeilfunktion angeben, die anonym ist. Es wird diesen Gedanke nennen. Bringen Sie Tomnatürlich zu unserem Requisiten-Deadline, natürlich zu unserem Requisiten-Deadline, und wir sagen, es läuft alle 1000 Millisekunden. Lass uns das speichern und das ansehen. Wir haben bereits Zeit für die Aktualisierung. Sehr cool. Wir haben jetzt einen funktionierenden Antrag, weil wir das Datum sogar ändern können. Sieh es dir an. Nehmen wir an, ich will November 25 2017 und schauen. Etwa 30 Tage wurden subtrahiert. Das ist so genial. Es gibt nur ein paar Dinge zu beheben, aber für einen Hinweis, dass es ein Problem mit Zahlen weniger als 10 gibt, vermasseln sie den Abstand der Anwendung, weil ihnen eine zusätzliche Ziffer fehlt. Sie benötigen ein führendes Null-Präfix. Um uns zu beheben, werden wir dieses Problem lösen Im nächsten Video fügen wir eine führende Null-Hilfsmethode 17. Hinzufügen von Hilfsmethoden mit Ausdrucksformen mit den Ternary Ausdrücken: Lassen Sie uns eine führende Null-Hilfsmethode hinzufügen, um sicherzustellen, dass unser Abstand für unseren Timer immer schön aussieht. Diese Methode wird sauber und einfach sein. Für jetzt, deklarieren Sie eine führende Nullfunktion. Es dauert nur eine Zahl oder Zahl kurz als Argument, wenn der taub seine Lektion. 10. Ich werde Nullzeichenfolge plus die Noten zurückgeben . Wenn nicht, geben wir die Nummer selbst zurück. Nun, lassen Sie uns testen, ob das für die Tage, die Stunden und die Minuten funktioniert . Also nennen Sie diesen Punkt führenden Null um jede unserer Variablen. Ja, da drinnen. Lassen Sie uns voran gehen und speichern und sehen, ob diese Funktion funktioniert. So wie Sie unsere Stundenfunktion sehen können, da es weniger als 10 als führender Sirup war. Und wenn wir 10 Sekunden warten, werden Sie sehen, dass die Sekunden auch eine führende Null für eine beliebige Zahl haben. Lektion 10. Also lassen Sie es uns überprüfen. Perfekt. Jetzt gibt es eine Sache, die wir tun können, um diese führende Null-Funktion zu machen, auch dass wir diese Funktion verkürzen können, indem wir ein Job-Skript nutzen, gewöhnlichen Ausdruck anstatt so lange zu haben. Wenn Aussage, können wir es um eine Zeile kürzen. Wir werden die Nummer von selbst zurückgeben. Aber wir werden überprüfen, ob es weniger als 10 ist. Und wenn es eine Frage ist, funktioniert. Was würde die Nullzeichenfolge plus die Zahl drehen, die ansonsten anruft, wer die Nummer selbst zurückgab? Lasst uns freeload retten. Und wie Sie mit seinem Turner-Ausdruck sehen können, ist es immer noch funktional. Drehausdrücke sind ideal, um Code verständlich, prägnant und Unordnung zu halten. Lis. Lassen Sie uns auf die endgültige Beschichtung Teil dieser App gehen, wo wir kümmern uns um einige mehr Styling ein Aussehen, indem wir einen Front-End-Reaktions-Trick aus der Tasche ziehen . 18. Styling mit React Bootstrap: jetzt für unseren letzten Trick wird React bootstrapped ihre Anwendung hinzufügen, um diese ganze Sache hübsch aussehen zu lassen. Jetzt haben wir ein paar Schritte zu unternehmen, wenn Sie reagieren Bootstrap auf Ihre Wohnung installieren. zunächst Navigieren Siezunächstzu einer neuen Browserregisterkarte und suchen Sie nach oben. Reagieren Sie. Bouchra. Sie sollten einen Link sehen, der so aussieht und schließlich zu dieser Website gelangen. Da. Sie sollten ein paar Schritte sehen, die Sie ausführen müssen, nachdem Sie zu den ersten Schritten navigieren. Zum einen müssen wir beleidigen reagieren Bootstrap durch und PM, so dass nicht zum Terminal zu gelangen. Die Männer rufen NPM Install an. Reagieren Sie. Bootstrap sicher, da steht. Als Nächstes. Wir müssen die neueste in Unified CIA SAS Datei Link in unserem HTML-Dokument kompiliert einfügen gehen kopieren und einfügen nur die erste 1 Wir wollen nicht die optionale eine für jetzt und gehen Sie zu Index html und an der Spitze. Lassen Sie uns einen Link direkt vor dem Titel einschließen, das modifizierte CSS Fuck ist. Gehen Sie und speichern Sie in Ihrer Anwendung. Wenn Sie neu laden, hat sich ein Teil des Textes bereits für uns geändert. Lassen Sie uns reingehen und überprüfen, ob Sie fertig heruntergeladen haben und da gehen wir. Wir haben reagieren bouchat vollständig heruntergeladen auf einen Knoten Monate jetzt, wir können die Vorteile einiger dieser Komponenten zu nehmen. Geh nie zurück, um JSX zu entführen. Und wir werden ein paar Dinge importieren. Wir werden das Formular, die Komponente, das Formular, das Steuerelement,die Komponente, wie immer,die Tastenkomponente aus React Boots importieren Komponente , Steuerelement,die Komponente, wie immer, wie immer, . Als nächstes ändern wir unsere Eingabefelder ein wenig. Auf diese Weise können wir die Reaktions-Boot-Shop-Stylings haben, die wir wollen. Was ändert das äußere div in eine Formularkomponente? Und diese Form wird einen Schlüssel haben, der auf die Wahrheit gesetzt ist. Allerdingsreagieren, reagieren, wenn wir jemals einen Schlüssel haben, der einfach auf wahr gesetzt Abkürzung es schwächen, indem wir nur den Schlüssel sagen , der im Landesinneren ist. Schließlich werden wir Eingabe oder als nächstes ändern, eher nicht schließlich ändert Eingang zu Reform-Steuerkomponente. Und schließlich wird dieser Knopf in Ordnung sein. Aber wir werden retten und echt Uh, und dann gehen wir. Die Dinge sehen ein bisschen besser aus. Als nächstes fügen wir einen Klassennamen zu den vier Steuerelementen bei der Stichworteingabe hinzu. Auf diese Weise können wir die Schriftgröße dieses Eingabefeldes steuern. Gehen wir zurück zu unserem CSS Herbst. Wir werden einen Deadline-Eingang haben, werde ich sagen. Aber die Spaßgröße beträgt 25 Pixel und hat dort einen Rand von fünf Pixeln. Wir haben das Styling aktualisiert, und das ist drei Größen, um zu sehen, wie es aussieht. Und dort können wir sehen, dass es hier in der Schlange steht. Lassen Sie uns Änderungen am 14. November 15 2017 und es sieht wirklich gut aus. Alles klar, es sieht toll aus. Und wir haben eine komplette Countdown-Anwendung. Hervorragende Arbeit. Sie können das Standarddatum in einen beliebigen Feiertag für Ihren Geburtstag oder besonderen Tag ändern, den Sie möchten . Viel Spaß damit. Es gibt eine Herausforderung Teil und Zusammenfassung im nächsten Teil, und im nächsten Abschnitt werden wir eine völlig neue Anwendung starten, die Web-Anfrage behandelt, um Daten zu erhalten und weiter über die große Front und Framework von reagieren . Wir sehen uns, dass