Grundlagen von React.js – Erstelle einen Rechner

1. Hallo und willkommen zu React.js Grundlagen: Jeder. Mein Name ist Luke faddish und auf dem professionellen Softwareentwickler schrieb ich 1997 meinen ersten HD-Männchen , der so aussieht. Nicht wirklich. Aber heute bin ich hier, um mit Ihnen über React J zu sprechen, wenn Sie noch nichts davon gehört haben. React ist eine Job-Skriptbibliothek, die zum Erstellen von Front-End-Web-Schnittstellen verwendet Und das Tolle an React ist, dass es viel von der Komplexität entfernt, mit der wir normalerweise konfrontiert sind, wenn wir eine Webanwendung erstellen, ich werde später während des Kurses mehr darauf eingehen. Aber in welchen Minuten weiß man, dass Reaktoren so populär werden, dass wir jetzt Desktop- und mobile Anwendungen in Reaktoren erstellen können ? Nun, deshalb bin ich super aufgeregt, diese Klasse zu unterrichten, die React Fundamentals Vordergrund und Entwickler während dieser Klasse ist, und wir werden diesen Rechner als Out-Projekt erstellen. Es mag ziemlich einfach erscheinen, aber das Tolle daran ist, dass es alles abdeckt, was wir wissen müssen, um Erstellen von React-Webanwendungen beginnen zu können. Ich bin super aufgeregt, um loszulegen, und ich kann es kaum erwarten, dich in der Klasse zu sehen 2. Lass uns aufbauen: Jeder wird es. Willkommen zurück in dieser Vorlesung, wir werden sicherstellen, dass Sie in der Lage sind, eine React-Anwendung in Ihrem Browser auszuführen. Nun, Sie haben React-Anwendungen bereits in Ihrem Browser ausgeführt? Fast sicher. Denn wenn Sie Facebook laufen, dann haben Sie zweifellos eine Reaktoranwendung ausgeführt, bevor Facebook erfunden Reaktor, und sie verwenden es überall. Aber wir werden reagieren ein wenig anders auf diese Jungs während unserer Entwicklungs- und Übungsübungen. So ist es bitte aus den Ressourcen herunterladen erzählen komplette Ärzte es hier. Ich habe es schon hier in meinem kleinen Fonderfenster sitzen. Geben Sie dem einen Doppelklick, um es zu öffnen. Sie können sehen, dass auf komprimiert in diese Recount Komplettes Foto. Öffnen Sie das oben und drinnen. Wir haben wieder Calcutta dot html. Jetzt, in Ihrem Browser, können Sie gehen und öffnen Sie diese Datei wie auf Recount, dass HD und schleuderte wie öffnen . Übrigens können Sie den Befehl o auf einem Mac verwenden oder auf einem PC steuern, um weit entfernt von Ihrem Bruder zu öffnen . Und hier haben wir unseren kleinen Taschenrechner. Und wenn wir etwas knifflige Mathematik machen, neun geteilt durch drei. Hey, Todenhofer hat irgendetwas getan oder nicht, denn die Antwort ist sowieso drei. Das war's. Es ist da. Es funktioniert so ziemlich, wie wir es erwarten, wenn es nicht funktioniert. Was wir erwarten, ist das zu sehen. Rick raus. Warte mal, Deal Hüte, alle. Es ist der React-Rechner und dann eine große fette Nichts Leerheit daneben, die höchstwahrscheinlich sein wird , weil Sie nicht mit dem Internet verbunden sind. Alles, was mit Ihrer Internetverbindung nicht stimmt. Ich bin gerade vorbeigekommen und demonstriere das oft. Das liegt daran, dass wir einige externe Bibliotheken einziehen, um ohne Reakt-Anwendung zu verwenden. Wenn Sie das Internet nicht sehen können, können Sie die Anwendung nicht verwenden, und Sie können den Rest nicht abschließen. Natürlich, ähm, der andere wahrscheinlichste Grund ist, dass Sie einen ziemlich alten Browser verwenden würden, wenn Sie immer noch kein Glück haben. Du hast das Internet eingeschaltet. Hast du einen neuen Browser? Oh, ja, natürlich. Stellen Sie sicher, dass auch JavaScript aktiviert ist, und Sie haben Javascript aktiviert, und Sie bekommen immer noch nichts. Hey, mir Bescheid und wir werden herausfinden, was los ist und dich zum Laufen bringen. Aber das ist alles vorerst. Ich hoffe, Sie sahen eine schöne dort wurden in Ihrem Browser berechnet, und ich freue mich darauf, Sie in der nächsten Vorlesung zu sehen, wenn wir anfangen, es zu bauen. 3. Den Rechner erstellen: Hallo, alle. heutige Vortrag ist, wo der Gummi auf die Straße trifft und wir beginnen, an unserem Recount Rechner zu arbeiten . Also werden wir wie dieser Rechner beginnen und ihn implementieren. Und ich möchte nur wirklich sagen, dass das heutige Ziel ist, zu sehen, wie Reaktion aussieht. Gib ihm einen Griff drauf. Thompson React Code in einen Texteditor. Spielen Sie mit ihm ein wenig herum. Es geht nicht darum, Theorie zu lernen. Alles, was wir heute hier tun, werden wir abdecken oder später in den Gerichten. Also werden wir andere Vorträge haben, die gewidmet sind, wie welche Komponenten aus, wie wir sie umsetzen sollen, was sie mit Daten machen, die sie von anderen Komponenten erhalten haben, all diese Arten von Dingen. Also werden wir uns das ansehen. Ah, noch viel mehr. Was wir tun müssen, um loszulegen, ist eine ZIP-Datei herunterzuladen, die eine Skelett-HTML-Datei enthält , in der wir unsere Codierung durchführen werden. Wie Sie sehen können, wird diese Datei eine Recount von Scratch Doctor genannt, die Sie herunterladen können, und ich werde nur doppelklicken, dass, und Sie können sehen, dass erstellt einen Ordner in demselben Verzeichnis in diesem Ordner ist ein Recount dot HTM L Also lassen Sie uns das mit einem meiner vielen Tausende von Text öffnen. Editoren verwenden heute Visual Studio-Code. Wie Sie sehen können, haben wir hier ein HTML-Dokument, hat einen Kopf und ein wenig Inhalt. Dann verknüpft es Ressourcen. Hey, wir haben einige vordefinierte Stile, nur um uns zu retten. Sie ärgern sich, mit CSS herumzuspielen, worüber wir lernen, reagieren. Und hier haben wir einige extern verknüpfte Dateien, die wir benötigen, um Sie jetzt Browser ausführen zu können. Jetzt ist dies eine pädagogische Übung, so dass wir wirklich direkt mit diesen Dateien im Browser verknüpfen, aber in einer normalen Entwicklungssituation würden wir das nicht mögen. Denken Sie also daran, wenn ich das in einer Produktionsumgebung nicht tun kann . Ah würde all diese Art von Sachen auf der Kommandozeile machen und eine Bundle-Datei produzieren die, Sie wissen schon, Quelle enthält Sie wissen schon, . Aber das ist ein wenig außerhalb des Bereichs, was wir in diesem speziellen Kurs betrachten, weil wir hier sind, um mehr über die Grundlagen zu erfahren, Schnittstellen zu erstellen, reagieren zu verwenden, und das ist, was wir beginnen werden jetzt tun, sagte Sie haben Reaktor-Code beginnt hier und Sie können sehen, was ein Skript-Tag-Typ gleich ist. Textreisen ist, wie wir zeigen, dass etwas eingegeben wurden, das nicht ganz richtig JavaScript sein wird . Und, äh, diese Datei plappern mindo Js Er ist dafür verantwortlich, sich jetzt um sie zu kümmern, reagieren auf Gesichter, die mit Komponenten zusammengesetzt sind. Und so beginnen wir besser mit der Definition unserer allerersten Komponente, und es wird ein, wenn ich aufgehört habe, meine Art von eine kleine Funktion in einem lokalen Rechner , und in diesem Fall zu tun , und in diesem Fallmuss eine Funktion nicht wirklich etwas tun anders als etwas zurückzugeben. Und in diesem Fall wird es J sechs zurückgeben. Nun, am Ende dieser speziellen Vorlesung, wird JSX in mehr Ditto betrachten. Ähm, es sieht schrecklich aus wie HTM Nr. Ah A Z kann sehen, es gibt ein paar Unterschiede wie dieser Kamel Fall Klassenname Andi. Wir geben unsere, wie wenig Komponenten Klasse, Name aus, berechnen oder wild mit oben war heute hier und von innen nach außen berechnen werde ich eine große fette Null haben , und so ist das eine Funktion, um eine reagierende Komponente zu rendern. Und das ist ungefähr so einfach, wie eine reaktive Komponente jemals bekommen wird. Wie gesagt, wir geben einige JSX zurück. Wir werden in einem Moment über J sechs reden, aber das ist nicht genug, um tatsächlich etwas,wissen Sie, Browser zu bekommen wissen Sie, . Denn wenn Sie jetzt auf den Krabben-Browser kommen, machen Sie einen Neuladen dieser Datei. Sie können sehen, dass es nichts gibt, und eines der Dinge, die wir tun müssen, um eine Komponente im Browser in React anzuzeigen, wird verwendet. Reagieren Sie, Dongle, sagte Render. Hier können Sie sehen, dass wir reagieren, Dom, Dom, und das ist die Datei, die dafür verantwortlich ist, unsere Reaktion in einem Browser zu rendern. Denn natürlich React mussnatürlichnicht in einem Browser erscheinen. Wir könnten auch Service-Seite generieren. Es gibt eine Menge Gerede jetzt über reagierende Faser, die mehrere Renderer für reagieren unterstützen wird, aber viele, um wirklich stumm zu verwenden, um wie Komponente im Browser zu rendern. So können wir verweisen, wie Komponente wie diese. Wie Sie sehen können, sieht es so aus, als hätten wir gerade einen benutzerdefinierten HD ohne Ted genannt Taschenrechner gemacht , der zufällig selbst schließt und so reagiert. Dorm dot Rendern erfordert eine Komponente auf. Es muss auch wissen, wo es diese Komponente rendern soll. Also werden wir es setzen und wir werden es hier reinlegen. Also haben wir diesen Deal mit einem I-D-Container, und hier wird all unser Reaktionscode in unserem HTML-Dokument gerendert. Also habe ich Dokument bekommen Nana von I d Container, und das sollte genug sein, um uns in Gang zu bringen. Und es gibt einen großen fetten Null. Wie aufregend. Also wirklich, wir wollen etwas etwas Interessanteres tun. Und so sollten wir eine Taschenrechner-Anzeige haben und so wird er so ziemlich genau auf die gleiche Weise machen . Ich mache nur Kaffee von diesem Kerl, weil es sehr ähnlich sein wird, und wir nennen es Cal Display. Ich werde noch einmal die verbleibende Konvention durchmachen, und wir werden immer noch eine Null haben, wissen Sie, nur um die Dinge interessant zu halten. Aber jetzt, in unserem war das Sauger. Und übrigens, ähm, ähm, aber jetzt von innen nach außen berechnete Komponente, frei, Couch Display-Komponente zu referenzieren. Und was das tun wird, ist, wenn wir den Rechner rendern , wird dieser Rechner hierher kommen und er wird zurückkehren. Es ist J. ist X und in diesem Gefängnis könnte die Geschlechter Cal zeigen und sagen: Nun, Nun, wir brauchen diese Zählanzeige. Also hier, das wird wiederum dazu geführt, dass diese Charakter-Spionagefunktion ausgeführt wird. Und es ist JSX wird Dad und ihn gerendert werden. Mal sehen, wie wir jetzt aussehen. Und ich habe eine Null und Sie können sehen, dass Al Zero das Aussehen geändert hat, weil noch einmal , denken Sie daran, wir haben einige hübsche und CSS und das sehen, es sagt, definiert Stile für etwas mit der Klasse neun carat angezeigt, damit Sie sehen können, wie wir beginnen, eine Schnittstelle aufzubauen, indem Sie reaktive Komponenten kombinieren. Das nächste, was aus berechnen wird, ist eine Schaltfläche. Also will ich Knopf. Wir machen eine Funktion. Nun, für den Moment, Requisiten Geschäft. Wir werden sehen, sehen, wie das in einem Moment funktioniert, tatsächlich, tatsächlich, wie jetzt, weil wir es benutzen müssen, um einen Couchknopf machen zu hören. Okay, wir werden wieder ein Reh zurückgeben. Ähm, sehr lebendig. Die HTML-Tags, die von J six unterstützt werden, übrigens. So haben Sie Spannweiten und Erbsen, und so könnten sie Spannweiten und P-Tags und die alle Artikel knaves alles haben, aber bleiben . Teoh gibt sofort. Und natürlich wird das einen Klassennamen nach Hause haben. Sprechen und Tippen ist nicht meine Stärke. Okay, Dave, wie das alles gesagt hat. Das, wie wir in diesem Vortrag machen, wird später noch viel detaillierter betrachten. Äh, gehen Sie vorerst einfach über die Dinge. Hier drinnen. Nun, wir werden viele Böden oder einen Taschenrechner haben, also ergibt es keinen Sinn für harte Codewerte. Ich meine, es ergibt keinen Sinn. Die hart codierten Werte in unseren Charakteren spielen entweder, aber es wird vorerst tun. Aber in einem Cath Barton wollen wir, dass die Dinge etwas interessanter werden. Also werde ich auf etwas verweisen, das diesen Gedanken Krups Wert genannt wird. Und diese Kelly Preise einen Hinweis Teoh, wie, äh, doppeltes Paket oder Blase, Bibliothek, dass wir einen Ausdruck in einem j sechs verwenden und dass dieser Ausdruck ausgewertet werden sollte . Und in diesem Fall verweisen wir auf eine Datenstruktur, die dazu gehört, und es wird etwas namens Wert haben. Und wovon kommt dieser Wert? Nun, Wert ist leicht, Namen zu finden, wie wir es Elephant Popsicle nennen könnten oder was immer wir wollen. Ähm, aber natürlich, Wert. Und damit wir einen Schlag bekommen und einfach eine Kuh wie eine Kuh reinhauen können. Aber es ist ein Wert gleich und sagen Warum. Ja, also mal sehen, wie das aussieht. Er jetzt Browser neu laden und nichts. Warum ist das, dann liegt es daran, dass die Bezugnahme auf diese Zeug Requisiten ein dummer Fehler war, weil es eindeutig Requisiten hier oben erhielt. Wir müssen nicht darauf verweisen, was aus der Gewohnheit kommt, Klassen zu verwenden, anstatt Funktionen beim Benötigen Teoh beziehen sich auf eine aktuelle Instanz. Uh, wir werden später Klassen verwenden, wir werden später Klassen verwenden, um Reaktionskomponenten zu definieren. Moment die Verwendung von Funktionen und Funktionen ziemlich gut, aber wir aber die Klassen geben uns ein bisschen mehr Funktionalität, die wir benötigen. Aber der springende Punkt ist, dass ich mich nicht auf diesen Schreibtisch beziehen musste. Sie müssen Requisiten verwenden und, uh, lassen Sie mich angeben und Wert wie diese Attribute ist, was wir es in HTML nennen würden. Ah, und reagieren. Es ist eine Eigenschaft von der Couchknopf-Komponente und, äh, reagieren, aber es macht den Couchknopf, den er passiert. Was auch immer es hier in einer Datenstruktur namens Requisiten in die Funktion findet, können wir sie auf ihren richtigen Aktienwert verweisen. Okay, also habe ich diesen Spuk gerettet. Du wirst nicht wieder alleine laden. Das Ganze Hier ist eins seine Null groß. Aber es sieht noch nicht wie berechnet aus, Wirklich. Also Ah, ich werde einfach weitermachen, was sie in einem anderen separaten sehen, Liebes? In Ordnung, ähm, weit, weit sechs. Okay, das stellt also eine Reihe von Schaltflächen in einem Taschenrechner dar. Und Sie können jetzt sehen, dass gut, und Sie können sehen, wie wir, äh, Kläger Teoh eine Schnittstelle komponieren können äh, , um reagieren. Denn sobald Sie eine definiert haben und es so funktioniert, wie wir es wollten, dann sind wir in ziemlich guter Form, um diese Komponente überall und wie wir wollen zu verwenden . Und das soll keine Subtraktionen sein. Erste kreative Vision. Wie Sie sehen können, bin ich einfach ganz nah dran. Teoh hat hier Maßstäbe berechnet. Hey, wie Reihenfolge der Betreiber und das wird diese Attraktion auf sein. Wir brauchen mehr von diesen Typen, oder? Weg benötigt. Wie? Uh, wir haben C für klar und wir brauchen eine Null durchgehend, Rechner auf gleich und schließlich Ausgabe. Okay, also speichern Sie das. Nun, da ist es. Aber das sieht ein bisschen wackelig aus, Antipoden zu gehen. Etwas anderes, ich bin sicher. Ähm, zähle Bottoms. Ok. Ah, er ist der Täter. Berechnen oder das fickt, während ich rede, bis er eine Menge davon sehen kann. Ich entschuldige mich. Ich kann nicht sagen, dass wir ein bisschen besser aussehen. Und wie hier ist unser Taschenrechner. Wie ich bereits sagte, haben wir einige vordefinierte Stile. Ähm, welche sind was? Ausmachen, was Knöpfe ausmacht. Wie ich nicht schwebe und was nicht. Uh, aber Sie können sehen, wie wir einige Reaktionskomponenten finden müssen, die Funktionen verwenden, wie diese Komponenten enthalten. Nun, ich definiert von j sechs und wie wir diese Komponenten zusammen kombiniert haben, das heißt, mit ihnen komponiert eine Web-Schnittstelle, indem wir diese Komponenten kombinieren, die wir dann Renda mit React Dom verwenden. Also, jetzt werden wir zurück zur Präsentation springen, um einem Kettensex ein wenig näher zu schauen, Sir, Sir, in unserer kleinen Codierungsübung gerade jetzt haben wir eine Menge von J S X gesehen. Ist das Zeug, das sieht aus wie HTML? Das ist wirklich kein HTML. Was ist JSX? Es ist JavaScript, Syntaxerweiterung. Zumindest ist das der Name, den Facebook ihm vor einer Weile gegeben hat. Ähm, sie scheinen jetzt ein wenig davon abgesichert zu haben, haben nicht gesagt, dass es das seit einer Weile genannt hat oder sich auf seine JavaScript-Syntaxerweiterung verwiesen hat. Uh, aber Sie können es nicht als HTML vorstellen, das Sie anpassen können, wenn das hilft auf oben. Ich denke, es kann sein, dass wir im Auge behalten müssen ist, dass J sechs Tags entsprechen reagieren Komponenten, also ist es ein glückliches Doggy. Warum ist er glücklich? Immer glücklich, denn Jazz X gibt uns eine ziemlich tolle Dinge. Es ist intuitiv. Wenn Sie HTML kennen, können Sie sich JSX ansehen und eine ziemlich gute Vorstellung davon haben, was los ist. Es ist prägnant. Ah, diese Tags nehmen viel weniger Platz ein und erfordern viel Schreibvorgänge als die Eingabe in das Job-Skript . Sie müssten eintippen, anstatt ein riesiges Sex-Tag zu reiten. Denn jedes Mal, wenn Sie ein JSX-Tag sehen, was wirklich passiert, ist, dass wir eine Reaktorkomponenten erstellen und eine Reihe von Eigenschaften weitergeben, und all dies ergibt sich aus Eigenschaften weitergeben, gut lesbarem Code. Das ist fantastisch. Dies macht die Dinge viel offensichtlicher und reduziert einfach unsere Möglichkeiten, Fehler zu machen . Aber er ist ein Esel. Warum ist dieses Hündchen so gesagt? Nun, JSX ist ein perfekter. Leider erfordert es mehr Werkzeuge. Wir haben Teoh die Babel Library benutzt, um unsere JSX zu interpretieren und Trans in ein normales JavaScript zu stapeln . Äh, es macht seine Semantik eingeschlossen, was genau wie einige Leute verrückt ist. Sie hassen das, Ähm , denn natürlich es sieht natürlichsehr wie HTML und HD Bösewichte aus, alles über das Erstellen semantischer Strukturen auf der Webseite persönlich stört mich nicht. Und nun, einmal waren Seiten, die mit Javascript gerendert wurden, eine Art unsichtbarer Zehe Web Crawler wie Google. Aber das stimmt nicht mehr. Es ist eine aktuelle Tests, sagen wir vor kurzem, nicht wetten vor kurzem, wie 2015 einige Leute getestet ihre J s ex generierte Webseite. Uh, nur er half wurde von einer Reihe von Web-Anrufern und Suchmaschinen indiziert, und es wurde gründlich von allen indiziert. Außer, ich denke, Baidu aus China, weil diese Suchmaschinen jetzt das JavaScript ausführen , ihre Rendering die Seite, bevor sie versuchen, es zu crawlen. Wenn du also jemanden siehst, der sagt, naja, Jazz-Exit-Reaktor, okay, aber sie werden unsichtbar für Suchmaschinen sein, die nicht mehr wahr sind. Das nächste, was wir brauchen Teoh gehen über sind einige kleine Änderungen, die in der Art und Weise aufgetreten sind , dass wir einem Browser auf diese Weise sagen, mit J s ex jetzt normalerweise in der üblichen Art der Entwicklung eingerichtet. Wir müssen dem Browser dies nicht sagen, da wir nicht direkt eine JSX in die HTML Falls einbinden . Aber um des Lernens willen reagieren. Wie sollen wir das machen? Und wir müssen dem Browser sagen, dass wir JSX-Code verwenden und nicht einige Maki wirklich formatierte HTML mit JavaScript vermischt. Also, was ist der Punkt in der Zeit? Wir haben dies getan, um am Anfang unserer J sechs einen Kommentar zu setzen. JSX wurde in der Morgendämmerung zerstört, so dass der Browser wissen würde, was es bekam. wir nicht mehr. Jetzt machen wir dies in unserem Skript-Tag. Wir geben ihm eine Art Text Schrägschrägschrägung, die dem Browser sagt Hey, Babble muss sich um dieses Zeug kümmern, das gegeben wird, um zu plappern. Und dann werden unser J Six und der Rest unseres Codes schnell und erfolgreich ausgeführt. Und der Grund, warum ich auf all das eingehen werde, ist, weil Sie immer noch den alten Weg finden, auf den in einigen alten Artikeln verwiesen wird . Wenn Sie um Formular oder Informationen über J s ex googeln, wie es funktioniert. Also, das ist ein Vorsprung für dich. Also nur eine kurze Zusammenfassung von all dem. Das ist eine ganze Menge, die man in einer Natur abdecken kann. Aber denken Sie daran, JSX-Tags sind äquivalent zu reagieren Komponenten und auch schließlich daran, dass die Renderfunktion definiert das Aussehen alle eine reagierende Komponente. 4. Komponenten mit Kursen erstellen: Hey, alle willkommen in dieser Vorlesung werden über das Definieren von Reaktionskomponenten mit Klassen sprechen . Sie können sehen, dass wir eine insgesamt berechnete Komponente definiert haben und füllt sie mit einem Siri Off-Komponenten gefüllt , um eine Taschenrechneranzeige und Schaltflächen zu definieren. Im Moment, diese Luftordnung mit reinen Funktionen auf das gefeuert ist genial. Wann immer wir reine Funktionen verwenden können, um eine Komponente zu definieren, sollten wir. Das macht Code viel einfacher zu pflegen und zu verstehen, wenn wir versuchen herauszufinden , warum die Dinge nicht auf ihre Weise funktionieren, sollten sie. jedoch Klassen geben unsjedochmehr Funktionalität, mit denen wir mehr ohne Komponenten auskommen können, und deshalb werden sie sie heute auschecken. Was ist das Ziel der heutigen Natur? Nun, zuerst wollen wir einige Komponenten mit Klassen machen, und zweitens wird kurz abdecken. Warum sollte eine Klasse überhaupt nicht verwenden wollen? Also warum sollten wir es benutzen wollen? - Klasse? Schauen wir es uns an. Wie wir sagen können, haben wir diese kleinen Funktionen, die Komponenten definieren und sogar unsere Rechenkomponente , die ein bisschen größer ist. Es ist bemerkt, die Funktion, aber es gibt einige Dinge, die wir einfach nicht mit Funktionen tun können. diesen Dingen gehört die Aufrechterhaltung von Status wie Tracking-Werten von, ah, einer Benutzerinteraktion zum nächsten Definieren von Standardwerten. Wir schauen kurz auf die Übergabe von Wert in eine Komponente wie Prop Startwert hier. Was, wenn wir wollen, dass Teoh einen Standardwert gibt? Aber wenn wir es validieren wollten, können wir das nicht wirklich in einer Funktion tun. Das sind die Arten von Dingen, die , die uns Klassen geben. OK, also werden wir unsere reine Funktion in eine Klasse konvertieren, und das erste, was wir tun müssen, ist eine Klassendefinition zu erstellen, war eine Klassenscout-Taste und sie erstreckt sich. Nun, reagieren Sie. Komm schon. Okay, also erweitert es die reaktive Komponente. Und die eine Funktion, die eine reagierende Komponentenklasse haben muss, ist Orender rendern drei Funktionen, die für die Definition verantwortlich ist, wie Komponente im Browser erscheint. Onda Renderfunktionen Werden genau das Gleiche tun, was unsere reine Funktion zuvor getan hat . Wir müssen den Wert des Prop-Stoffs in diesen dunklen Pop-Stop-Wert ändern, da wir jetzt Eigenschaften von einer Klasseninstanz erhalten und sie nicht an eine reine Funktion übergeben werden. Nein, die Reaktoren haben sich um all das gekümmert. Hinter den Kulissen rufen wir nur Zählanzeige an. Wir rufen Cath Button an, aber ich muss mir Sorgen machen, wie Immobilien dort hineinkommen. Aber wir haben jetzt Konto-Button in eine Klasse umgewandelt, also lassen Sie uns einfach gehen und sehen, wie das im Browser aussieht. Geben Sie dem einen Nachladen und da ist es. Sie können sehen, dass wir ohne Schaltflächen genau so angezeigt werden, wie wir es zuvor getan haben. Und wir mussten nicht die Art und Weise ändern, wie wir Talk-Button nach unten und hier und die Rechenkomponente verwendet haben. Es passierte alles hier oben, und die Veränderungen gingen nahtlos durch, also ist das großartig. Also als winzige kleine Kleidung Übung, Ich lade Sie jetzt ein, um die Cal Display-Komponente zu konvertieren, und der Rechner Komponente aus reinen Funktionen in zwei Zusammenbrüchen sagte, Bitte halten Sie den Vortrag und gehen. Tu das und komm dann zurück zum Vortrag und ich werde das auch schnell durcharbeiten. Okay, hier haben wir wieder im Essen und ich bin dran, diese Dinge von Funktionen in Klassen zu konvertieren , sagen Klassen-Cap-Display. Ich brauche keine Aufschlüsse, die erweitert, erweitert, reagiert Komponente. Wir haben unsere Renderfunktion, die dasselbe zurückgibt. Ihre Funktion hat es vorher getan und wird in ähnlicher Weise einsteigen. Er Es geht um Taschenrechner. Es ist ein Klassenrechner und reagieren ihren Namen und machen das bitte. Bryant wird 44. Es war, dass das ungefähr 20 ist. Mm, so gut. Richtig. Ich bin glücklich, weil ich meine Einkerbungen richtig gezählt habe. Okay, also werden wir das retten. Wir haben eine Klassendefinition auf unsere Komponenten implementiert rendern angewendet. Das wird sehen, ob das alles funktioniert. Und dann haben wir es raus. Kleine Rechner jetzt mit Komponenten zu finden, die bei Klassen und nicht reinen Funktionen. Kehren wir zurück zu unserem Vortrag, damit wir darüber reden können, was wir nicht tun sollten, wenn wir unsere Komponenten als Klassen definieren . Was ist mit einer Zeit wie ah, sechs Monaten? Dies ist, wie wir eine rote Klasse definieren würde React dot Create Klasse verwenden. Das ist nicht mehr der Weg. Wie Sie gesehen haben, verwenden wir jetzt Klasse, was auch immer die React-Punkt-Komponente erweitert, und seien Sie sich bewusst, dass Sie die alte Version wieder sehen werden , wenn Sie googeln und auf Reaktionsmaterial lesen. Sie werden den vorherigen Weg sehen, dies zu tun, indem Sie unsere React Dot Create-Klasse verwenden. Tu das nicht mehr. Erweitern Sie stattdessen die Reaktionskomponente Denken Sie also daran, Klassen geben uns mehr Funktionalität wie Konstruktoren, Standardwerte, Validierungsereignisbehandlung, viele aufregende Dinge. Um, sie werden durch die Erweiterung React erstellt, dr Component und nicht reagieren Punkt Create Klasse. Ich hoffe, das hat dir gefallen. Und ich freue mich darauf, Sie in der nächsten Vorlesung zu sehen, wenn wir mehr über die Eigenschaften von Reaktionskomponenten sprechen . 5. Komponenteneigenschaften: Hey, alle, willkommen zurück. Heute werden wir über reagieren Eigenschaften sprechen. Wie Sie vielleicht gehört haben, haben Lesekomponenten zwei Arten von Daten. Diese beiden Arten von Daten aus Eigenschaften und Zustand. Heute werden wir die Immobilien überprüfen. Also, was sind die farbigen Aufenthalte? Vortrag? Nun, es ist zu lernen, Komponente von Eigenschaften in reagieren zu verwenden und wird auch helfen, Standard-Eigenschaftswerte zu definieren , die Eigenschaften sind einem Elternteil zu einem Kind einfach so zugewiesen, und sie werden über die dieses Punkt-Requisiten Konstrukt. Also sieh es dir an. Das haben wir bereits in unserer kleinen Pre-Implementierung gesehen. Runter vom Taschenrechner. Wir haben unseren Wehe Be-Klausel Rechner hier und ah, es verwendet diese Cack-Button-Komponenten und Sie können sehen, dass es den Wert von, in diesem Fall, eins zu etwas namens Wert zuweist in diesem Fall, . Also Eigenschaften, sie sehen sehr viel wie Attribute in HTML aus, aber sie sind Eigenschaften für in einer Reaktorkomponente. Und wenn wir also unseren Schwanz Knopf nur etwas zu unserer Eigenschaft namens Wert dort signieren, hier oben in der Couchknopf-Definition, können wir dann voran gehen und darauf verweisen, dass Probleme Startwert. Und wir mussten hier nicht den Namenswert verwenden, oder? Es ist Ah, Name, der schwächt. Weisen Sie uns zu. Es könnte Meerrettich oder Dingbat sein oder was immer wir wollen. Aber dieser Punkt ist, dass wir im Elternteil ihm einen Wert im Kind geben. Wir greifen auf sie über diesen Stopp Requisiten, Gedankenwert. Und ich denke, eines der Dinge, die im Moment am wichtigsten sind, um Eigenschaften zu realisieren , ist, dass sie unveränderlich sind. Also, wenn ich gehen würde, eigentlich, werfen wir einen Blick auf das zuerst im Browser. Und hier ist es, sein raus. Ein kleiner Taschenrechner macht noch nichts, wenn wir unsere Kontrolle überprüfen. Und hier haben wir unsere Standard-Warnungen über die Installation der reaktiven Tools, was ich in Chrome nicht gestört habe. Huh? Hatte uns auch gesagt, dass wir es irgendwie im Entwicklungsmodus verwenden. Dies ist keine Produktionskonfiguration, und in der Tat sind sie so richtig. Aber wir werden uns jetzt keine Sorgen darüber machen, ähm, das ist eine Lernübung. Wie wir sehen können, müssen wir uns jetzt im Konzertsaal um nichts anderes sorgen. Aber wenn wir hier durchgehen und ich sehr nördlich Kalb-Taste modifizieren oder unsere Renderfunktion ändern . Richtig? Ich würde das in die Return-Anweisung setzen und sagen, dass Sie Requisiten starten. Der Wert ist gleich, sag er, äh okay. Entschuldigen Sie mich. Verloren die Kontrolle. Editieren Sie es. Okay, er ist Ah, ja, ja, ich wollte es tun, war ein ähnliches Gemeinsames auf das Individuum setzen. Also ist er wie? Ja, hah! Und wenn ich zum Browser zurückgehe und neu lade, , dann schau dir das an. Kann nicht zum Lesen des Eigenschaftswerts des Objekt-Hashobjekts mit Schrägstrich zugewiesen werden. Ähm, und dann ein paar andere, ähm, ähm, potenziell hilfreiche Informationen darüber, wo das ist. Es könnte Sie sehen, ähm, aber nicht zurückhalten. Also sagen sie, dass sie Requisiten sind in der Tat unveränderlich. Wurden nicht erlaubt, sie in der Klasse zu ändern. Das sind sie wirklich. Angst diese Stop Requisite Aktienwert. Ah, die Art von Daten, die wir ändern können, ist Cold State. Und wir werden uns das in einem Paar ansehen, das sie erledigt hat. Also werde ich das jetzt einfach loswerden. Lassen Sie uns also einen kleinen Blick darauf werfen, wie Eigenschaften funktionieren. OK, also sagen wir einfach, dass wir ein Web-Interface haben und aus dieser rosa Marshmallow neu aussehende Wolke hier, die unsere Daten repräsentiert, die irgendwo aus einem Netzwerk kommen. Wir haben einen Like-Wert und Likes ist auf 12 gesetzt und er haben wir eine Elternkomponente. Gut. Die scheinbare Komponente erhält also diesen Wert von 12. Aber weißt du, es weiß nicht wirklich, wie man das anzeigt. Es ist verantwortlich für Marshalling-Informationen. Das ist, Ah, Ah, Associate ID, die wir zeigen Likes. Aber wenn es um die eigentliche Anzeige geht, geht, ist es, ah, es ist ein bisschen verloren, aber das ist OK, weil es eine andere Komponente hat, die es passieren kann. Dies mag Wert als Eigenschaft für eine untergeordnete Komponente. Großartig. Also ist er geradezu. Und so übergibt es seinen Bauch an das Kind. Und dann weiß das Kind genau, was damit zu tun ist, undda , und große Daumen hoch und 12 daneben. Also haben wir ich mag auf diese Weise gerendert. Und obwohl React alles ist, was die Ansicht, wenn es um Benutzeroberflächen geht, müssen wir immer noch eine Art Trennung von Bedenken zwischen verschiedenen Komponenten und der Verwaltung von ihren Funktionen aufrechterhalten . In diesem Fall weiß der Elternteil, wie man Daten aus der Cloud erhält, und er weiß wahrscheinlich, wie er sie auf eine Weise organisiert, die auf der Webseite sinnvoll ist. Und dann haben wir noch eine Schicht. Das Kind, das wahrscheinlich nichts darüber weiß, woher die Daten stammen, kümmert sich nicht darum, wie es organisiert ist. Alles, was es weiß, ist, dass es einfach nur 12 Likes auf der Seite spielen muss. Dies ist ein ziemlich häufiges Muster in reagieren. Also jetzt ist es Zeit, etwas zu codieren, und was wir tun werden, ist beginnen, Eigenschaften auf unserer Komponenten-Cal-Anzeige zu verwenden, die derzeit keine Eigenschaften verwendet. Es zeigt nur einen festen Wert von Null an. Sehen wir uns das jetzt an. Okay, also ist das noch nicht viel Nutzen für uns. Ich habe diese Taschenrechner-Anzeige. Es zeigt den Wert Null an. Ähm, aber, weißt du, er wollte wahrscheinlich andere Dinge zeigen. Wahrscheinlich Werte, die wir hineingehen. Also gehen wir runter, wo es benutzt wird. Und, äh, geben wir ihm eine Eigenschaft, und wir können anrufen. Oh, das. Äh, ja, ich denke, wir nennen das Display eine Nummer und sehr, äh, äh, gerade sagte Reno, dass wir hier eine Änderung vorgenommen haben, wird es in 99 setzen. Nun, das ist wirklich nicht viel nützlicher, als nur diese Null hier anzuzeigen. Aber das ist, was wir für jetzt und andere tun können, um geschweifte Klammern hier zu verwenden. Also in JSX waren frei, Tags zu verwenden und camel cased Eigenschaften, von denen einige ziemlich finden, wie Nachname. Um, aber wenn wir einen Ausdruck verwenden wollen, müssen wir ihn in diesen mädchenhaften Rassen machen. Also, jetzt wollen wir einen Ausdruck. Wir möchten dieses Zeug für Upstart Displaynummer referenzieren. Ja, okay, ich werde das retten. Und jetzt, wenn wir zu unserem Rechner gehen und ein schnelles Nachladen durchführen, können Sie sehen, dass ich anzeigen 99. Das ist also nicht super, ähm, überraschend. Wirklich? Weil Sie schon gesehen haben, wie das funktioniert. Phillips Kopf zurück zu unserem Code und gut gesagt, dass zurück auf Null für jetzt, Kürze, werden wir den Rechner aktualisieren, so dass die Anzeige des Rechners tatsächlich ändert wenn wir eine Taste drücken. Ähm, das ist in etwa zwei Wahlzeiten. Aber zuerst gibt es etwas, das wir untersuchen müssen, und das ist der Begriff von Standardwerten für Eigenschaften und eins der guten Dinge über Verwendung von Klassen ist, dass wir einige zusätzliche Funktionalität haben. Wie ich bereits erwähnt habe, von denen eine von denen eine diese statischen Funktionen sind. Und das werden wir als Fehler bezeichnen. Vielleicht ist Standard-Requisiten Teil von der Reaktionskomponentenschnittstelle für ein P I. Und seine Aufgabe besteht darin, ein JavaScript-Objekt zurückzugeben. Und dieses Job-Skriptobjekt hat ein Schlüsselwertpaar oder Schlüsselwertpaare darin, die Werte für die Eigenschaften dieser Komponente fallen sollen. In diesem Fall benötigen wir einen Standardwert für die Anzeigenummer. Etwas ist eine Displaynummer und wird dort sitzen, von hinten in 19 9 Okay, also lasst uns hier runter gehen. Und nun, wenn wir diese Aiken heiß durch in unserem Browser speichern, tun Sie es verlassen, Sie können sehen, es geht zurück auf Null. Und das ist, weil wir Null zuweisen, um die Zahl hier anzuzeigen. Aber wollten wir aus irgendeinem Grund Displays zählen? Ja. Ähm, was sonst? Ähm, berechnet, dass sie und das erste Mal haben, wie kein Wert, der der Anzeigenummer zugewiesen wird , der das tun soll, und in ein Nachladen, hier ist zu Taschenrechner-Displays. Also ist er der 1. 1 ohne Wert zugewiesen, um die Zahl anzuzeigen. Ernie kann sehen, dass es der Vater auf 99 ist und die 2. 1, die ihm einen Standardwert zugewiesen hat, wurde auf Null gesetzt. Und so, nur um abzuschließen, denken Sie daran, dass Komponenten während ich reagiere, zwei Arten von Daten haben. Heute haben wir uns Eigenschaften ah, Eigenschaften Luftzugang über diese Punkt-Requisiten Punkt, was auch immer der Eigenschaftsname ist, und sie werden offenbar einer untergeordneten Komponente zugewiesen. Und schließlich haben sie Standardwerte, die von den Standard-Requisiten der ästhetischen Getter-Funktion festgelegt werden. 6. One-way – warum es großartig ist!: Hey, alle, willkommen zurück. Das ist nur ich wirklich schnell kleine Art von Bewertung. Oder wenn, aber eine Rezension nur ich, äh, andere Möglichkeit, zusammenzufassen, worüber wir gerade mit Reaktionskomponenteneigenschaften gesprochen haben , und um auch diese etwas breiteren Implikationen zu untersuchen, die ich sagte, wir sind werden darüber reden, sind ein Weg Punkt für in reagieren. Nun, das ist eine Art große Sache in Reagieren, weil es wirklich eine Jagd nach einem grundlegend anderen Weg war , Dinge für die meisten Javascript-Anwendungen zu tun. Wir werden überprüfen, was? Meine Tochter seit Jahren und, ähm, einige der Vorteile, die es uns als Reaktionsentwickler gibt. Wenn wir Einweg-Datenfluss bevorzugen. Denn wie wir sehen werden, ist es nicht super praktisch, dass alle Ihre Daten ohnehin in eine Richtung gehen. So viele JavaScript-Anwendungen sehen so aus. Wenn wir also sagen, dass diese blauen Punkte Knoten im Hilfe-Browser Dom darstellen und ein Ereignis in einem dieser blauen Punkte auftritt, könnte dazu führen, dass sich jeder der anderen blauen Punkte ändert. Und ich denke, wir haben das richtig gesehen, weil, wissen Sie, Sie müssen einen Knopf summieren, keinen Klick auf etwas oder einen Text eingeben Ian irgendwo Und wollen Sie eine Validierungsnachricht auf Ihrer Seite ändern ? Oder Sie möchten, dass ein Status seine Darstellung durch Farbe ändert. Sehen Sie ändern Farbe auf diese Dinge kann enden. Hören Sie, alle haben die Seite. Und, ähm, es kann schwierig sein, herauszufinden, was sich ändert. Was genau das, wenn wir reagieren, sieht es ein bisschen mehr so aus. Und Sie denken vielleicht, dass ich den Fall ein wenig hier verkaufe, indem Sie ein typisches JavaScript-Wesen mit all diesen verrückten Linien präsentieren , die überall hingehen und es reagiert eins mit diesen, wie nett, ordentlich wenig einfach Linien, die nach unten gehen. Wirklich, das ist so viel wie möglich, wie wir möchten, dass unsere Anwendungen funktionieren. Aber es erfordert eine Art grundlegender Verschiebung in der Art und Weise, wie Sie denken, wie Sie Ihre Anwendung entwickeln. Denn wenn wir das haben, ist es wirklich super einfach, nur zu denken Nun, ich muss gehen und sitzen einige andere Styling auf diesem Element den ganzen Weg da drüben. Nun, die Art und Weise, wie sie , innerhalb einer Klasse reden, tun Sie es oder modifizieren Sie es direkt, Ähm, dass wir in diesem Fall super sorgfältig darüber abfinden müssen, wo unsere Tochter kommt aus und wie Interaktionen funktionieren. Aber wie auch immer, du bist nicht typisch. JavaScript. Wenn Sie diese Situation haben, wo ist Orange? Der Typ hat sich irgendwie verändert. Und wenn das unerwartetes Verhalten war, haben wir eine ziemlich große Aufgabe vor uns, herauszufinden, warum, wo? Äh, es wurde geändert. Aber als wir reagieren, wissen wir, dass es wirklich nur einen anderen Knoten gibt, der jetzt übergeordnete Komponente, die diese Note beeinflussen kann . Oder wir hoffen es. Also unser Job aus dem Debugging, wird nichts plötzlich viel einfacher oder wir haben zumindest eine Listenfrage zu beantworten, die ist, welcher Knoten die Änderung verursacht hat Jetzt, was bemerkt hat, begann die Herausforderung könnte ein völlig andere Frage, aber es hat wirklich das Leben viel einfacher gemacht, ausgehend von dort. Aber wenn wir zu unserem vorherigen Beispiel von unserer ähnlichen Schnittstelle zurückkehren, ähm, ähm, aber wir haben Daten, die aus der Cloud kommen, und das geht an Eltern, die offensichtlich positiv für ein Kind sind. Untergeordnetes Element rendert es auf der Webseite. Weißt du was, wenn jemand auf Licht klickt? Nun, die Daten müssen offensichtlich in die andere Richtung zurückkehren. Wir können einfach nicht ewig auf 12 sitzen, oder? Huh? Offensichtlich müssen Daten in die andere Richtung zurückkehren, und dafür ist der Zustand. So hängen Sie herum für die nächste Vorlesung, wo wir untersuchen Fluss starten einen Fluss in reagieren. 7. Reverse – warum wir es brauchen!: Hey, alle, Willkommen in dieser Klasse, wir werden über einen umgekehrten dunkleren Fluss sprechen, das heißt, wir werden überprüfen, wie eine untergeordnete Komponente Informationen an scheinbare Komponente, und dann werden wir sehen, was eine übergeordnete Komponente normalerweise unter diesen Umständen tun würde. Was sind unsere Ziele heute? Wir werden es verstehen. Reverse Datenfluss in reagieren, und wir werden sogar Zwerg zu. Also lasst uns knacken. Werfen Sie einen Blick auf das. Sieht aus wie Ärger, nicht wahr? Wir müssen aus der fremden Reaktion umgekehrt haben, weil übergeordnete Komponenten wissen müssen, was ihre untergeordneten Komponenten durchstehen. Also hier haben wir unseren kleinen Mini-Dom. Das ist also ein sehr gutes Es ist einfach. Es ist verständlich, macht einen Code einfach zu debuggen. Aber wenn wir uns unseren kleinen Geschmack ansehen, Ihr Gerät, muss ich gut fragen, wie angeklickt wird. Was passiert? Es muss aktualisiert werden. Und so führt uns das zu der Idee, dass wir Funktionen sowohl als Eigenschaften als auch Daten weitergeben können. Nun, natürlich, Funktionen sind wie diese. Sie tauschten seine erstklassigen Mitglieder in Javascript, damit wir sie mit seiner Tochter behandeln können. Und so wird es überflüssig zu sagen, dass wir Daten und Funktionen weitergeben können. Aber der Punkt, den Kim irgendwie verloren geht, denn wenn wir eine Funktion in eine reagierende untergeordnete Komponente übergeben, wird es zu einer Callback-Funktion. Und natürlich, natürlich, JavaScript-Programmierer in der Regel kein Loch über Callback-Funktionen. Und was wir ohne Callback-Funktion tun können, ist, wenn unser kleines blaues Dunkel unten unten hier Klicks ist, kann es die Funktion aufrufen, die als Eigenschaft übergeben wurde. Diese Funktion wird ausgeführt, die eine unabhängige Komponente auftritt, in der Regel das Kind eine Art von Daten in diese Funktion kompiliert und die übergeordnete Komponente darüber informiert, was los ist. Und so gibt uns das ein klares Verständnis noch nicht. Woher kommen Werte? Denn wenn wir jetzt Elternkomponente sind, der grüne Kerl hier und wir wollen es gut wissen, wie hat es den Wert bekommen, den es in dem Moment hat, in dem es zu seinem Job geht ? Nun, das Tal wird typischerweise innerhalb der übergeordneten Komponente sitzen das Tal wird typischerweise innerhalb der übergeordneten Komponente sitzenund nur innerhalb der übergeordneten Komponente. Und wir wissen, dass dieser Wert als Nebeneffekt von einer Callback-Funktion geändert werden kann, die jetzt ausgeführt wird , ein kleines Wort der Warnung kürzlich veraltete ID oder etwas, das als Verknüpfter Zustand bezeichnet wird. Mischen Sie ein und Sie werden immer noch sehen, dass in den Google-Suchergebnissen hier und da angezeigt wird. Das war ein Impfstoff. Sie können sich auf Ihre reagierenden Komponentenklassen anwenden, mit denen Sie den Status mit Eingabefeldern verknüpfen können und so dass der Status automatisch aktualisiert wird, wenn Sie etwas in eine Art Eingabefeld eingegeben haben . Baseball hat das aufgegeben, und der Link State Mixon ist nicht mehr. Baseball hat das aufgegeben, Wenn Sie also so etwas in einem Google-Suchergebnis sehen, weiß ich, dass Sie sich veraltete Informationen ansehen. Es gibt eine Möglichkeit für eine untergeordnete Komponente, Daten in einer übergeordneten Komponente zu aktualisieren. Und das verwendet Callback-Funktionen. Nein, klar, es ist Zeit, dass wir mit der Umsetzung beginnen. Ah, ein umgekehrter Datenfluss in unserem Rechner, also hängen Sie fest. Wir gehen und tun das jetzt im Code. Also bitte öffne dein Herz beginnt in deinem Lieblingstexteditor und Code zusammen mit mir zu gehen . Okay, alle, willkommen zurück zu unserem Cud. Also gehe ich zurück zum Stöbern, um darüber zu reden, was wir jetzt tun werden. Was wir also tun wollen, ist eine Art von umgekehrtem Datenfluss in unseren Rechner zu implementieren. Und, äh, wir werden das tun, indem wir sicherstellen, dass, wenn dieser Knopf geklickt wird, die berechnete Komponente weiß, dass es eine Rechnerkomponente wie die ganze Sache mit allen Tasten ist. Trotz seiner scheinbaren Komponente und all den Tasten, die Jungs, sie sind Kinder von dieser Elternkomponente. Was wir also tun möchten, ist sicherzustellen, dass wir auf eine Schaltfläche klicken und ein Elternteil davon weiß und etwas Nützliches mit dem Wert der untergeordneten Komponenten tun kann. Also hier sind wir in einem Code. Hier ist heraus Schwanz Button Komponente, die die Böden auf dem Rechner implementiert, und genau hier hatten wir Rechner Komponente auf. Sie können sehen, wer er sehen kann, dass trifft mit Kalkutta-Tasten, um diese Rechnerschnittstelle zu implementieren . Was wir also wollen, ist, eine Funktion vom Elternteil in die untergeordnete Komponente zu übergeben und dann die untergeordnete Komponente diese Funktion verwendet, wenn sie angeklickt wird. Also zuerst, was wir besser tun sollten, ist sicherzustellen, dass wir eine Funktion haben, die wir in Seher übergeben können. Nehmen wir an, wir haben einen Knopf, keinen Knopf, einen Funktionscode, der heute hoch ist, weil letztendlich das ist, was es tun wird. Es wird aktualisiert. Ähm, ich habe die Anzeigenummer berechnet, was auf einem Rechner geschehen würde, wenn auf die Schaltfläche geklickt wird, richtig? Ich sehe Wert da drin, und wir werden nichts schreckliches Aufregendes machen, ohne einen Moment. Aufträge setzen einen Wert richtig. Und so ist er bei der Funktion sehr gut. Und jetzt wollen wir das als Eigenschaft an die Cal-Knopfkomponente übergeben. Und wir müssen das in Cal-Knopf-Komponente als Eigenschaft übergeben. Ich werde es auf unseren lächerlich langen Namen geben. Nur für den Kampf der Klarheit. Wirklich mehr als alles andere, das ist keine Nummer Carrie Bereich. Also, wenn sie übergeben, uh, diese Funktion in jetzt untergeordnete Komponente und unser Kind komportiert besser etwas damit tun , sagte, dass es idiomatisch in Reaktion den Moment hatte, keine Funktionen oder Callback-Funktionen auszuführen direkt von einer Veranstaltung aus. Es ist idiomatischer für dich. Machen Sie sich eine kleine lokale Funktion für die Behandlung von Ereignissen und führen Sie dann von dieser Funktion aus Ihre Colback-Funktion aus. Und so werden wir Griff haben, klicken Sie. Und so, wenn unsere Cap-Taste geklickt wird. Wir wollen Handle Click so gut ausgeführt werden, setzen Sie auf Klick gleich Beachten Sie den Kamelfall. Meine Freunde diesen Start klicken und wieder können Sie sehen, dass wir, uh, diese geschweiften Klammern verwenden uh, , weil dies ein Ausdruck Verweis auf eine Funktion ist ein Ausdruck ist und das Zeug Requisiten Punkt einen Knopfdruck melden. Los geht's. Und, ähm, offensichtlich, haben wir einen Wert erhalten. Wir werden diesen Wert zurückgeben. Offenbar Komponente, so dass wir wissen. Aber Nummer eins wurde in dieser Schaltfläche geklickt Nummer zwei, aber Nummer drei oder die Divisionsschaltfläche, so dass sie vielleicht dunkler Wert stoppen. Okay, also haben wir uns auf Klick-Handler gesetzt. Und jetzt, auf Flick Handling Funktion, führen wir jetzt Callback-Funktion. Also sagen wir, dass wir zu unserem Browser gehen können, wieder schändlich und klicken Sie auf Nummer eins auf, und nichts passiert. Schauen wir uns das an, Inspektor. Hol dir einen Konsul und oh, lieblich. Sieh dir das an. Eigenschaftenstützen können nicht ausgelesen werden. Nein, Liebes. Jetzt haben wir zu einem charmanten durch Falten in der Reaktorentwicklung laufen. Also hier sind wir, in Capital Button und Ausführung Handle. Klicken Sie jetzt und wir haben ein bisschen ein Problem Das ist, weil behandelt wie nicht weiß, was dies in diesem Fall ist. Leider, wenn wir Funktionen für die Ereignisbehandlung wie diese verwenden, die aktuelle Instanz aus unserer Cap-Taste nicht automatisch an diese Funktion gebunden. Also weiß er nicht, was das ist. Was ist das? Wir wissen es nicht so traurig, wir müssen uns selbst im Konstruktor jetzt tun, obwohl diese Komponente nicht eine Klasse sein musste, als wir sie früher in eine Klasse verwandelten Uh, das ist der Grund, warum Wir müssen es tun. Ich bekomme Konstruktoren Bandrequisiten und Testaufgaben namens Super Wenn unsere Requisiten sagten, dass die übergeordnete Klasse unsere Eigenschaften haben kann und etwas Nützliches mit ihnen tun kann. Und dann müssen wir sagen, Herr Händel, klicken Sie gleich diesem Handle. Finden Sie das und gehorchen Nun, wir werden das speichern und auf magische Weise behindern Hausa wird eine anzeigen, weil das ist, was wir unsere Update-Funktion im Moment zu tun haben und nicht in der JavaScript-Konsole murren. Fantastisch. Und natürlich klicken wir auf drei. Alles andere funktioniert noch nicht, weil wir nur zugewiesen und ein Taschenrechner Report Taste drücken Teoh, Hilfe-Taste Nummer eins. Okay, also werde ich das auch tun . Ruhen Sie sich aus. Wie, Aber hones Senior, Bau Tippfehler Vielen Dank , wissen Sie, nur gehen und setzen Sie die durch den Rest der getan. Ok. Ich sollte wirklich ein Leerzeichen zwischen, aber und Curly Brace haben. Und wie wäre es mit einem geschlossenen Tag, das schnell machen würde. Bär mit mir. Also nimm keinen Zeitbeweis. Das ist besser. Meine Güte, jetzt sagten wir Taschenrechner nachladen auf einem. Sehr gut. Und ich war, als es begann, sich über all diese Dialoge zu beschweren, damit Sie sehen können, dass sie komprimiert sind . Diese Knöpfe und Wesen funktionieren. Ja, irgendwie. Okay, aber das ist okay. Wirklich. Was wir tun wollen, ist zumindest unsere Taschenrechner Anzeige Eine Zahl, nur eine Zahl statt Null. Also lass es uns versuchen, das jetzt zu tun, und das ist wirklich eine Einführung in den Staat. Wir werden in der nächsten Vorlesung mehr über den Zustand sprechen, aber wir werden uns jetzt einen kleinen Blick darauf werfen. Also sie Konstruktor. Es braucht Requisiten, natürlich. Und ich mache das aus zwei Gründen. Einer liegt daran, dass diese Zahl aber abgeschossen werden muss. Ordnung, Äh, diese Nummer nicht, weil, weißt du, ich finde, das zu tun. Die andere Sache, die wir tun müssen, ist, einen Zustand zu sitzen, und so können wir einen Standardzustand entwerfen, was eine ziemlich gute Idee ist. Also sage ich nur, dass er feststeckt. Zustand und Zustand ist wieder ein kleines JavaScript-Objekt. Ich werde sagen, Anzeigenummer ist Null. Eines Tages werden wir etwas anderes als Null zeigen. Aber wie auch immer, wir können hier nicht gut sagen, dass Statt Null so zu übergeben, werden Sie Dinge sagen, die ST Punkt Anzeige Nummer suchen. Also haben wir gesagt, jemand sollte anfangen, sagte er. Das wäre eine Straße Medscape-Industrie. In Ordnung, Sue, wir gehen, dass Gov er ein Nachladen macht und glücklich am Rechner spielt immer noch, zeigt Null an. Also wissen wir, dass unsere Standardzustandszuweisung glücklich funktioniert und hier in Update-Nummer Update-Nummer können wir unseren A-Look beseitigen, Geschäft anzeigen und stattdessen sagen, es ist dieser Zustand. Nein, nicht so. Nein. Sehen Sie, der Konstruktor ist der einzige Ort, an dem wir einen Zustand wie diesen zuweisen können und ihn tatsächlich kleben lassen können. Andernfalls müssen wir eine spezielle Funktion verwenden, die Sie starten, sitzen Bühne, sitzen Bühne, und dann übergeben wir ein Javascript-Objekt in die Set-Statusfunktion. Und das wird tatsächlich übergeblieben sein, wenn wir einfach zu Ende gegangen sind ihm direkt einen Wert zugewiesen haben. Ohne den set-Status zu verwenden, würden wir diesen Wert verlieren. Ähm, es ist eine echte zu sagen, äh, Anzeigenummer ist gleich dem Wert. Das ist okay, seitdem sie konfrontiert. Okay, also sagen wir das und schlagen zu einem Browser wirklich unanständig. Und es ist eine Eins, all das und das Display Updates. Und das sind keine Tage. Aber es ist, ah, eine große Verbesserung bei dem, was wir zuvor hatten. Das ist also hübsch. Ich bin damit zufrieden. Aber es gibt eine Liebe, eine kleine Sache, die wir tun können, kurz bevor wir fertig herumtäuschen ohne Staat und das ist ah Rechner, um eine Zahl größer als eine Ziffer zu erstellen, ich denke, wir werden gut sagen, um eine neue Wert, den wir Kohle. Ähm, ich sage, dass ich die Freiheit sagen werde. Ja, Preis, schätze ich. Okay, Sie zeigen Zahl gleich verzerrt Datennummer. Oh, eigentlich wollen sie Nein, das ist richtig. Ja. Entschuldigen Sie mich. Online wurde geboren. Trinken Sie den ersten Wert. Ok. Also, was machen wir hier? Wir nehmen eine Gräfin. Meine Nummer und wir sind Konnte nicht Katyn ating während der Ausgabe Katyn Aging Wert auf das Ende davon , weil wir mit Strings hier zu tun haben. So können wir es jetzt. Also gehen Sie vor und sagen, es ist, dass setzt, dass Sie Anzahl und gut anzeigen, was auch immer. Als, ah, ein Date zu machen. Danke. Sie haben eine Gottheit drei, 46 und so weiter gewonnen . Und also, wenn du allerlei Unsinn da drin hast, viel Unsinn, okay. Aber jetzt kommen wir tatsächlich irgendwo hin. Wir kommen ein bisschen weiter. Wirklich? Ohne Taschenrechner-Anzeige. Ah, das schließt es für diese Codiersitzung ein. Wir werden einen viel genaueren Blick auf den Zustand und die Folgen Ausgleichszustand in der nächsten stellen sicher. Und ich freue mich darauf, Sie dort zu sehen, wenn wir tatsächlich anfangen, etwas Addition und Subtraktion und solche Dinge ohne Rechner zu tun . 8. Zustand und was es macht!: Okay, willkommen das, alle. Heute werden wir über Zustand in Reaktion sprechen. Also hatten wir einen kleinen Blick auf ST in der vorherigen Vorlesung, wo wir einen berechneten Änderungszustand mit kalten AC-Funktionen gemacht haben , um die Anzeige im Rechner zu aktualisieren. Und wie Sie sehen können, haben wir ein wenig Raum für Verbesserungen. Wir werden das in der heutigen Vorlesung tun, aber zuerst reden wir darüber, was wir behandeln werden. Unser Ziel ist es heute, Zustand zu verstehen und zu verwenden. Obwohl wir das schon ein bisschen getan haben und die Konsequenzen einer Änderung des Staates kennen , gibt es Konsequenzen. Schauen wir sie uns jetzt an. Nehmen wir an, wir haben eine gekoppelte Komponente und es führt Rendah und ah aus, wenn eine übergeordnete Komponente eine untergeordnete Komponente verwendet, dann wird diese untergeordnete Komponentenrenderfunktion ebenfalls ausgeführt werden. Also könnten wir uns das vorstellen, wie jetzt berechnete Komponente, die grüne auf der linken Seite hier, und dann die blaue hier drüben könnte eine der Taschenrechner-Tasten sein. Und so, wenn die übergeordneten Komponenten, Orender oder Rechner rendern Funktion hat die untergeordneten Komponenten ausgeführt, Übergabe wird auch ausgeführt und gut wir könnten eine unserer Schaltflächen klicken. Also, wenn die untergeordnete Komponente geklickt wird und es hat, wie, eine Art Handle-Click-Funktion und ah, Handle-Click-Funktion kam, dann gehen Sie und führen Sie einen kühlen zurück. Der Rückruf wurde unserem Kind vom Elternteil gegeben. Und, ah, wenn dieser Rückruf zurückgeht und den Set-Zustand innerhalb des Elternteils ausführt, ist das die Sache, die wir vorher nicht wirklich abgedeckt haben. Wann etwa hier? Das ist richtig. Jedes Mal, dass wir Set-Status innerhalb einer Komponente ausführen, wird es dazu führen, dass diese Komponente Rendah wieder. Und wenn diese Komponente rendert, dann werden all ihre kleinen untergeordneten Komponenten einen Schwung machen und ihre Kinder und ihre Kinder und so weiter. So können Sie sehen, dass die Einstellung Zustand in reagieren ist, wo Interaktivität in unserem Web kommt, in Geräten, die mit React implementiert sind. Es gibt also nichts Besseres als ein bisschen Übung, um das wirklich in den Griff zu bekommen. Also lasst uns in den Code gehen und State etwas mawr verwenden. Hey, alle, hier sind wir schon in unserem Code, aber bevor wir hier etwas tun, ist es einfach heiß zurück zum Rechner. Also in unserem umgekehrten aus Florida Vortrag Weise aktualisiert den Rechner. Um, so dass diese untergeordneten Komponenten, diese Bottoms würden sie Daten zurück an die übergeordnete Komponente übergeben, die dazu führen würde , dass sie die Zahl aktualisiert, die oben in der hier berechneten angezeigt wird. Aber wie wir sehen können, tut es noch nicht wirklich, was wir wollen. Das ist irgendwie verrückt. Ähm, also gehe ich zu Dad. Das erste, was ich denke, es gibt ein paar Dinge zu beheben. Also denke ich, und die Sache, die wir jetzt tun wollen, ist, dass es tatsächlich etwas berechnet. Aber das erste, was ich denke, wir wollen ändern, ist, diese führende Null im Stil der Zahl loszuwerden . Das gefällt mir nicht. Also, äh, lasst uns in den Putsch einspringen. Wer Sie in unserem Rechner Komponente. Und das haben wir letztes Mal gemacht. Sie können hier sehen, dass wir nur auf den nächsten Wert zu unserer trotz einer Zahl. Und dann erinnerte ich mich an diesen Anfang, sagte Zustand, um eine Anzeigenummer zwei um Sie herum zu setzen , Ähm, was heißt, ich sagte: Nun, das war okay. Es hat uns vorher gut gedient, aber jetzt denke ich, dass wir etwas anderes tun wollen. Ich denke, was wir tun werden, ist zu schauen, ich denke, wir werden mit der Art von naiver ah, Lösung beginnen , die wie das erste, was ich mir einfallen würde, als ich mich gesetzt habe, um diese zu tun. Ähm, ich bin kein großer Fan von Jude oder Code Alongs oder was auch immer diese Show. Die endgültige Antwort zuerst, als ob dies die allererste Lösung wäre, auf die die Programmierung gestoßen ist. Ich denke, das ist wirklich der Fall von Mr Done It, wie das gleiche genaue Programm 10.000 Mal nie so für mich herauskommt. Wenn es für dich tut, bin ich eifersüchtig. Aber jedenfalls, also ohne neue Displaynummer, denke ich, was wir tun werden, ist, dass wir den Wert testen werden. Also, wenn Wert gleich Null ist, dann werden wir sagen, ähm, Sie werden sagen, dass Nun, Sie spielen nur Zahl ist gleich Wahrheit, die Sie übel. Wir werden unsere üblichen Sie Nummer anzeigen tun, weil dann beginnt, dass duh Anzeigenummer plus Wert. Okay, und dann setzen wir den Zustand auf unserer Displaynummer. Hoffentlich wird alles gut. Das ist neu laden Sie einen Rechner und zeigt Null Rechtsklick auf einen und macht keine verdammte Sache . Ausgezeichnet. Das liegt daran, dass ich den falschen Test gemacht habe. Lustige Displaynummer. Alles, was sie sagen, alles richtig zu machen. Zuerst drauf. Meine Güte, ähm , offensichtlich habe ich das noch nicht wie 10.000 Mal gemacht. Also, was wir wirklich wollten überprüfen, ist, ob unsere aktuelle Statusanzeigenummer gleich Null ist, und dann, wenn es Buddhist ist, ersetzen Sie sie durch unseren neuen Wert. Andernfalls starten wir eine ausstehende, so dass gespeichert haben, dass neu geladen. Und ich klicke auf eins und ist bei 153 multipliziert. Nun, das ist nicht das, was wir wollen. Aber das ist die nächste Buchbewegung, die lösen wird. Lass uns reinspringen. Und so Zwölf ist keine Seele. Es ist eine Implementierung Addition. Also wird es sich diese Kerle ansehen. Also haben wir, wie, wie, wir werden Addition implementieren, was bedeutet, sich wie zwei Tasten zu ändern. Wir müssen den Plusknopf ausmachen, was anderes machen. Ich muss unseren Gleichheitsknopf etwas anderes machen. Also wird unser Plus-Button ein paar Dinge tun müssen. Es wird die Tatsache aufzeichnen müssen, dass wir etwas hinzufügen wollen, und wir müssen auch und wir müssen auchunsere aktuelle Displaynummer als erste Operandi speichern. Also ich denke, ich werde diese Funktion Separates Konto aufrufen? Ja. Für immer und zählen. Und es dauert etwa zwei. Aber ich sollte diese Operation nennen, weil dies die Operation wäre, die wir tatsächlich durchführen wollen, obwohl wir sie noch nicht durchführen. Wir haben Leistung, weil wir diese zweite Nummer nicht haben, wenn jemand drückt. Außerdem bekam es nur eine Nummer. Ah, und wo, ähm und wir unser Leben nicht umsetzen. Post-Fix-Berechnung. Ah, in diesem musste Ah, lustig, wie, einfach nicht interessant sein lustig, wie, . Jedenfalls, nach Hause. Also, was wir tun wollen, ist einen Zustand speichern. Sie starten City, Staat und ein kleines JavaScript-Objekt dort und wir werden alles sagen. Zusammenarbeit und wir werden es in Betrieb nehmen. Und wir wollen die Anzeigenummer als unsere erste Operandi speichern. Also werden wir Angebot und eins haben, und das wird auf diese Gedankenzustands-Anzeigenummer gesetzt. Okay, cool. Und dann, was passiert, um die Zahl s anzuzeigen. Also hier kommt unsere anfängliche von naiver Lösung zurück, um uns ein wenig zu beißen. Wir können die Displaynummer nicht so sitzen, dass wir sie nicht einfach so lassen können, wie sie ist. Sonst fangen wir an, eine große neue Zahl zu erstellen, also werden wir sie vorerst auf Null setzen. Ah, ja. Null. Okay, also gehen wir. Und was wir tun können, ist, dass wir zu Julie Little Plus-Taste gehen können, und wenn es ausgeführt wird, war sagen, Hey, Hey, führen Sie Prep aus, Cal. Ähm, es ist eine Sache, die ich hier vergesse. Charakter macht viele Referenzen. Teoh veers, und es ist eine Callback-Funktion. Also, natürlich müssen wir es hier hinzufügen. Brett zählen. Danke einer Zählung. Sehr gut. Sagte, das ist unser Hinzufügeknopf, der sich abnimmt Was ist mit, wie gleich Taste out Führen Sie die Berechnungsschaltfläche. Also, aber das wird tun wollen, ist wieder einen Zustand zu setzen, um, und mache eine Berechnung, so dass ich sie anzeige, aber zeigt das Ergebnis aus, was in Anzeigenummer und unserem ersten Angebot und der Operation, die wir gespeichert haben. Also nenne ich diese neue Funktion Duke Colak, Cal, bei allem, was einen Streit machen muss, und weil ich wie der Weltmeister bin das vergessen habe, werde ich geradeaus gehen und das in eine Konstruktor an die aktuelle Instanz gebunden ist, weil es mich nur ärgern wird, wenn ich vergesse, das richtig zu machen. Okay, was werden wir jetzt tun? Nun, wir werden zuerst, ich denke, wir müssen wissen, was wir tun wollen. Also fangen Sie an, blieb in Betrieb, und ich denke, die Hälfte 1. 1 wird Ausgabe sein. Wirklich? Richtig. Und wir haben Stimmrecht machen eine Pause nach der Schuld. Weil, natürlich, in Job überspringen Standard kann überall in der case-Anweisung erscheinen. Und so schätze ich, was wir tun wollen, ist ein Zustand. Das ist Staat. Und was wollen wir es tun? Fragen Sie das Datum. Nun, ich denke, wir sind ohne Operationen fertig. Dadurch wird die Operation auf undefined gesetzt. Und wir setzen die Anzeigennummer auf Aziz Flöte. Nun, wie ich schon sagte, ich bin nicht wirklich darin, zuerst die endgültige Lösung zu präsentieren. Aber ich werde dich retten. Dass der Schmerz von mir, durch die verschiedenen Probleme arbeiten nicht im Grunde tun, weil wir mit Strings arbeiten. Ah, wenn er sie in Zahlen verlässt, um etwas mit ihnen zu tun. Natürlich, wenn wir gerade gesagt Pass Float, ist dieser Staat Marke eins Plus, dass diese Anzeige-Nummer, dann, natürlich, unsere kleinen sprudelnden Plus-Symbol könnte Karen acht Diese Tipps Getränke und geben uns lächerliches Ergebnis. Also jedenfalls, ähm, und schließlich denke ich, wir wollen loswerden. Nun, Reset betrieben einen für jenseits des Fund. Okay, sagen wir das. Und schließlich müssen wir runtergehen, und wir unser Katzenknopf, äh, entspricht Teoh Do Count. Okay, also was glauben wir, wird passieren? Wird das funktionieren? Lass es uns herausfinden. Tun Sie es. Verlassen. Ich möchte sagen, eins plus Teoh, weil 30 meine Güte, es implementiert Addition. Super aufregend. Und jetzt, natürlich, wenn ich 333 0 gosh tippe. Eso Siehst du, unsere Initialisierung der Displaynummer funktioniert nicht wirklich für uns. Und wir haben noch einige andere Knöpfe, die sich noch nicht vernünftig verhalten. Also als Ganzes, einschließlich Übung. Ich ermutige Sie ziemlich, weiter zu gehen und Divisionsmultiplikation und Subtraktion als nächstes in Ihrer eigenen Zeit zu implementieren . Ähm, das Datum begann, genau wie, total nachlässig. Ich mache das nicht selbst, denn in einer kleinen Art Interimscode, zusammen zwischen den Vorträgen, werde ich weitermachen diese selbst umsetzen. Also freue ich mich darauf, Sie in der nächsten Vorlesung zu sehen. 9. Lass unseren Rechner kalkulieren: Ok, alle. Nun, wie ich in der vorherigen Vorlesung sagte, das wird ein schneller Durchlauf durch die Implementierung der verbleibenden Operationen in unserem Rechner sein , also Divisionsmultiplikation und Subtraktion. Werfen wir einen Blick auf unseren Code. Wenn Sie sich erinnern, haben wir diese Funktion namens Duke ALC, die im Moment nur Addition implementiert. Und außerdem gehen wir durch und Fahrzeugsets, die , den wir pflegten, um den Zustand aktualisieren, den wir pflegten, umden Überblick zu behalten. Wir waren bis in ihren Betrieb und haben uns schließlich gut ausgewechselt. also eindeutig dieser Ort, Dies istalso eindeutig dieser Ort,an dem wir die anderen Operationen umsetzen wollen. Aber ich werde ein wenig anders machen. Ich glaube, so. Was wir tun werden, ist, dass wir diesen Kerl rauskriegen. Wie Fall Aussage. Er hat einen Rufzustand und setzt diese Abschürfungen und das obere Ende immer wieder ein. Also, was wir stattdessen tun werden, ist, diese kleine Variable zu erstellen. Sagen Sie, lassen Sie Nummer initialisieren bei 20 Ich denke, wie es auf und, Sie wissen, Fall off Addition. Nun, wir sind nur neu, trotz Nummer und wir werden es einstellen. Teoh. Ja, komm schon, das macht es zu einer Aussage. Sehr gut. Und dann hier unten, bin ich sicher, dass Sie sehen können, was passieren wird. Du bist nur sehr zahlreich. Das kann ich sagen. Lassen Sie uns einfach einen schnellen Test und eine zugehörige Berechnung geben. Ich stelle sicher, dass die Addition immer noch funktioniert. Sprengen Sie fünf 10. Ausgezeichnet. , Was wir jetzt brauchen,sind drei weitere Fallaussagen, die unsere anderen Operationen umsetzen. Sobel dio Subtraktion auf Division und Multiple. Okay, Okay, also wo sind wir? Gut und hat sich ziemlich unkompliziert. Wissen Sie, wenn wir 1000 dieser Operationen zu tun hätten wenn wir 1000 dieser Operationen zu tun hätten,machen wir das etwas anders. , Würde es Funktion übergeben, anstatt eine case-Anweisung zu haben. Äh, aber ich denke, das wird für unseren kleinen Taschenrechner tun. Und ich werde nur dafür sorgen, dass wir alle Operationen am richtigen Ort haben. Ja, ich glaube, das tun wir. Wie immer? Tja, tun wir besser. Im Falle der Division, ich schaue dir zu sagen, was das herauskommt, ist keine Nummer, und wir lassen es los. Ich habe gerade von dem Fall „Dividieren durch Null“ gehört, und ich denke, wir werden dieses Leben für den Moment treffen. Krankenhaus, gipfelt zu besserem Schicksal. Richtig? Aber das wird noch nicht klar funktionieren, weil unsere verschiedenen Tasten und nicht mit unserer neuen Funktion. Also lasst uns gehen und die Musik zu einer neuen Funktion machen. Äh, Entschuldigung, darf ich bezweifeln? Dasselbe drinnen. Richtig? Laden Sie den Rechner neu und wir geben es einen Test. Also würde ich sagen, sechs multipliziert mit drei Gleichen Erreichen. Subtrahieren. Sechs Egos 12. Geteilt durch zwei. Sechs. schließlich sicher, dass die Addition immer noch funktioniert. Sieben heute. Ok, großartig. Also, das war ein schneller Durchlauf durch die Implementierung der Rest der Operationen sind unser Rechner. Ich freue mich darauf, Sie in der nächsten Vorlesung zu sehen. 10. Der React: Okay, Jeder sagte, jetzt ist es Zeit, einen Blick auf die Reaktorkomponente des Lebenszyklus zu werfen, und zuerst, was wir heute tun werden, ist herauszufinden, was den Lebenszyklus der Reaktorkomponente verwendet hatte , und dann werden wir sehen, wie wir es verwenden können. Also, was ist es? Nun, es ist ein Siri aus Funktionen in einer Write-Komponente, die eine Erkältung in verschiedenen Phasen seines Lebenszyklus. Vielleicht ist das etwas selbsterklärend, aber jedenfalls sind sie das. Wir haben den Konstruktor, der gesehen haben, ob Komponente Wilm aus haben, haben wir Komponente. Habe montiert. Wir haben eine Komponente. Wird Requisiten erhalten sollte Komponenten-Update Render-Komponente aktualisiert und Komponente wird Matt. Nun, das ist eine Menge Zeug. Ah, es ist leicht, sich an sie zu denken. Ah, in Bezug auf Off-Montage und Montage. Diese vier Funktionen, die derzeit hervorgehoben sind, um mit der Montage auf und um zu tun, Schmelzen, also konstruieren Sie eine Komponente montieren und Komponente wird verrottet sein, wenn sie zum ersten Mal in den Browser geladen wird, oder entfernt aus dem Browser und dann diese in der Mitte hier hatten sie mit dem Rendern so physisch jedes Mal zu tun, dass die Komponente wieder rendert. Die meisten von ihnen werden nicht auf dem ursprünglichen Orender neben der eigentlichen Renderfunktion aufgerufen. Äh, aber das hat noch viel damit zu tun. Das sind also diejenigen, die ich am meisten in der Praxis gesehen habe. Jetzt haben wir gesehen, dass die Konstruktorfunktion bereits verwendet wird. Wir haben gesehen, dass Rendern verwendet wird, und das lässt diese anderen drei Jungs Komponente montieren. Sollte Komponenten-Update und Komponente wird betragen, so dass die Komponente eingehängt wurde. Dies ist ein guter Ort, um Dinge wie, ah, asynchrone Netzwerkanfragen einzurichten ah, . Ähm, stoppen Sie alle Timer, dass die Komponente solche Dinge braucht. Dies sind nur Dinge, die an Ort und Stelle sein müssen oder loslegen, bevor es tatsächlich auf die Seite kommt . Sollte sich das Komponenten-Update anschauen sollten, wissen Sie, Code. Aber kurz gesagt, es ist ein Weg, um zu überprüfen, ob Reaktor tatsächlich in die Schwierigkeiten gehen sollte, unsere Komponente im Dom zu rendern. Denn obwohl Reagieren beim Rendern berühmt effizient ist, wenn wir es vermeiden könnten, ist das ziemlich gut auf Endlich, Komponente wird sich belaufen. Dies ist ein Ort, um unvollständige Netzwerkverbindungen aufzuräumen, Timer abzubrechen, so etwas. Aber wir werden gehen und implementieren Soll Component Update OK, also hier sind wir in unserem Code, sitzen knapp über der Renderfunktion für die Rechnerkomponente. Da ist es. Taschenrechner. Es fällt mir auf, dass ich das etwas größer für dich machen sollte. Da kriegen wir. Okay, er ist also raus, überprüfe nach einer Komponente und es ist eine andere Funktion, und er ist Renda, und wir werden das Komponenten-Update hier setzen. Und es braucht zwei Parameter als nächstes, vielleicht, und nächsten Zustand. Zu diesem Zeitpunkt wird das Komponenten-Update aufgerufen. Wir haben immer noch unsere alten Requisiten in unserem alten Zustand zur Verfügung, damit wir auf die Lagerabfälle hinweisen können . Das ist nicht der Zustand. Und dies ist eine großartige Gelegenheit, um zu überprüfen, ob sich etwas Wichtiges geändert hat. Und wenn es sich nicht geändert hat, dann wird der Fuß nicht ernannt. Rendern alles auf Dumm. Wir geben an, Orender sollte oder sollte nicht durch Rückgabe true oder false auftreten. Also, jetzt, wo wir diese Funktion hier haben, wir wie Rückgabefälle nie rendern. Das sagen wir genau hier. Und hier sind wir in einem Haus, ohne ein wenig folgen nachladen und ich kann klicken. Ich klicke weg auf diese Dinge und nichts ändert sich, wissen Sie, Rechner, Rechner, denn sollte Komponenten-Update falsch zurückgeben. Und wenn wir gehen kehrt wahr, neu laden. Und da sind wir, arbeiten wie gewohnt. Okay, aber das wollen wir nicht tun. Was uns wirklich wichtig ist, ist unsere Displaynummer, denn das ist alles, was wer wirklich anzeigt, ob wir neu rendern müssen oder nicht. Es gibt nichts anderes, was sich auf der Seite ändert. Also könnten wir sagen, wenn diese Gedanken, die Anzeigenummer gleich der nächsten ST Punkt Anzeigenummer ist, dann auftauchen, dass Jane Fells sonst Trick. Okay, also sagen wir, dass das alles sehr gut ist, aber wir können nicht den Unterschied zwischen, äh der Browser aktualisiert und nicht aktualisiert, wenn genau der gleiche Wert in unserem Taschenrechner angezeigt wird . Also gehen wir besser und setzen in die lästige Warnung hier und sagen, nicht zu aktualisieren. Furrow ist so. Sag dir „Gut“. Gehen wir zurück. Jeden hier, machen Sie einen Nachladen. Okay, also wenn Sie sagen, eins Nun, äh, gleich zu sagen, um vier plus Null. Und dann haben wir diese kleine Warnung, die besagt, dass wir den Browser nicht aktualisieren. Da war schon mal eine Null. Das ist Null. Da. , Wir werden keine Arbeit machen,außer das lästige ein wenig zu zeigen, das ich nicht begleichen kann . Und so ist das eine sehr einfache Implementierung oder Nahrungsmittelkomponenten-Update, um zu sehen, ob ah, wir könnten wir auf die Mühe gehen, den Browser zu aktualisieren oder nicht. Und, äh, es gibt ein paar wichtige Punkte über sollte Komponenten-Update eins ist, dass sich die Verwendung von solle-Komponenten-Update in der Zukunft ändern wird. Facebook hat gesagt, dass es in Zukunft als Vorschlag behandelt werden wird. Ich habe gerade ein Gericht mit meinen Finger Vorschlag so reaktiv meine er entscheiden, dass es besser weiß als Sie darüber, ob etwas aktualisieren sollte oder nicht. Äh, meistens, wie sich das in der Zukunft schwenkt. Habe ich nicht. andere wichtige Sache zu erinnern ist, dass dies eine Quelle von Fehlern sein könnte, weil es nichts anderes gibt, was eine Quelle von Fehlern in unserem Code sein könnte. Aber das kann vor allem sein, weil es nur Requisiten im Zustand überprüfen wird. Und wenn Sie Ihr Rendering auf etwas anderes als Requisiten im Zustand stützen, wird diese Funktion Ihnen nichts nützen, denn wenn Sie Daten in Ihrem Rendering von außen abrufen reagieren Sie ein P I, um , reagieren Sie ein P I, umdie Ergebnisse von kleinen Netzwerkanfragen oder einer globalen Dieter oder so etwas , dann können Sie nicht wirklich verwenden sollte darauf hinweisen, dass zu sagen, ob Sie rendern müssen oder nicht. Also werden Sie entweder alles auf Requisiten in ST im Rendern basieren oder Sie werden diese Funktion nicht verwenden. 11. React Nummer 1: Ich denke, alle. Ja, es ist Zeit für ein paar Übungen. Luftzeit insbesondere für Codierungsübungen. Dafür brauchst du keinen Rex Anzug. Es sind also wirklich zwei herausragende Dinge, die wir tun müssen. Einer von ihnen ist Teoh. Fix dieses Geschäft, wo wir Multiplikation tun, sagen wir, und wir klicken. Die Anzeige der Multiplikationsschaltflächen wird auf Null zurückgesetzt. Ein normaler Taschenrechner würde das nicht tun. Es würde einfach die Acht da oben lassen, und dann haben wir die Nummer oben. Wir bekommen immer noch das Ergebnis dieses Gipfels tut. Es kann erwartet werden, aber es ist irgendwie eklig, dass wir dort Null haben, bevor wir etwas anderes tun. Also, als Übung für Sie, lade ich Sie ein, eine Lösung für dieses besondere kleine Problem zu implementieren. Also pausieren Sie die Vorlesung. Sie DenkenSiedarüber nach und machen Sie eine Gala. Das und, äh, ich zeige dir, was ich gefunden habe, sobald du später neu startest. Okay, also hier sind wir und Ah ha. - Was? Er hat ein wenig „Wer „gesehen? Die Seite in ihrem Code. Ähm, mein Code. Ich könnte Sie kaum darum bitten, die Verantwortung für das zu übernehmen, was ich hier bin. Aber jetzt ist die Anfangszustandseinstellung irgendwie die Tatsache zu ignorieren, dass wir einen anderen Zustand haben, der neben der Anzeigenummer aufpassen muss. Und so denke ich, dass wir das tun werden, ist vorbei und es ist undefiniert. Und ich wollte eine in Betrieb anbieten, die ich nicht noch einmal tun kann, weil diese Art von Führung in das führt, was wir jetzt tun müssen. Wie auch immer, wer ist unsere Update-Nummer? Hier ist es. Also es hat Ah, ich schaue mir an, ich kann die Nummer nicht anzeigen und sehen, ob sie Null ist und wenn es es durch den neuen Wert ersetzt , Andernfalls beginnt es einen ausstehenden Wert, um die Nummer nicht anzeigen zu können, was heißt, Sie wissen, es war irgendwie OK, das Problem ein wenig für uns zu lösen, aber wir könnten es besser machen, ich denke, ist angemessen, Diebeswert trotz Nummer zwei zu verwenden. Entscheiden Sie, ob es ersetzt oder angehängt werden muss, denn das ist wirklich eine Frage der Art und Weise. Wir sind bis zu Ihren Berechnungen. Also denke ich, wir werden eine kleine Fahne haben und ich nenne es Sie wie Okay, das könnte gleich falsch sein. Aber tatsächlich wäre das wahr, wenn wir tatsächlich, wenn der Rechner erstellt wurde, wenn der Konstruktor hier auf wir raus sind und Sie eine Flagge gesagt haben, dass es wahr ist. Und so, wenn wir gehen, um die Zahl zu aktualisieren, anstatt zu testen, um zu sehen, ob Spanien Zahl Null ist , werde ich sagen, diese ST Punkt Sie von der Flagge. Und wenn wir anfangen und du nummernst, ja,dann ja, machen wir die Ersetzung. Wenn nicht, werden wir davon abhängen. Und natürlich natürlich will wissentlich eine Flagge einführen. Wir gehen alle Staaten, um sich überall zu kümmern. Macht nichts aus. Okay, was sagst du? Die Bewegung ist jetzt falsch. Ein anderer Ort, an dem wir Teoh etwas mit neuer Nummer tun müssen. Flag ist in prep Kout, weil dies ist, wo wir unsere auf Display Nummer zurücksetzen. Und so sagen wir, dass der Flug jetzt falsch ist. Aberwissen Sie, wissen Sie, wir werden nicht nach Nummer zurücksetzen. Jetzt lassen wir es weiterhin anzeigen, was es zuvor anzeigte. Ja, und in diesem Fall wird Flug jetzt sein, ich sollte wahr sein. Nicht für uns. Uh, und so hier oben kommen wir hier runter. War mit einer weiteren Bewegung ist wahr. Und wir werden dich ersetzen. Nur eine einfache Nummer. Selbst wenn es angezeigt wird, sag mir, es ist nicht Do it. Also lassen Sie uns das sagen und sehen, wie wir den Rechner neu laden müssen. Und wenn er ein zwei mit zwei multipliziert ist, ist gleich für ausgezeichnete und dann war ein Plus. Drei sagten, dass das unser kleines Problem behoben ist, dass die Null wieder auftaucht, nachdem wir einen Operationstaste gedrückt haben. 12. React #2: Okay, jetzt ist es Zeit für Übung Nummer zwei. Und in diesem Fall haben wir diesen C-Button hier unten, der immer noch irgendwie nichts Nützliches tut und die Macht hat, Taschenrechner zu sagen, wenn ich es war, weil das ziemlich lustig ist, eigentlich. Aber wirklich, wir wollten nur unseren Rechner als neue Schneidübung zurücksetzen. Bitte gehen Sie voran und implementieren Sie den Seeknopf vom Kurs. Ja, ich werde das jetzt tun, also bitte pausieren Sie die spätere und, äh implementieren Sie sagen. Aber du kannst vergleichen, was du mit dem gemacht hast, was ich im Begriff bin zu dio. Okay, sieh mal, Knopfzeit. Hier ist es in unserem Taschenrechner. Kaum sehen Bericht-Button drückt immer noch gleich der Update-Nummer. Was ich denke, wir werden stattdessen tun, ist, dass wir es tun werden. Ähm ja. Schau, ich denke, wir werden eine Standardzustands-Funktion haben ich denke, wir werden eine Standardzustands-Funktion haben, denn das ist wirklich, was wir tun. , Wir setzen alles wieder auf, wie wir es erwarten würden, wenn der Rechner zum ersten Mal inst enshi ated wird . Ich denke, ich werde einfach , total unerlaubnis darüber machen,wo ich diese Funktion einsetzen sollte, äh, Spaß. Und ich habe es hier geschrieben, und wir schaffen es die ganze Nacht. Wirklich? Weil dies das ist, hat nichts mit Ah zu tun, der aktuellen Instanz des Rechners. Eso sollte eine ekstatische Funktion sein. Holen Sie sich gut sagen Standardzustände, die früher eine Standardzustandsfunktion waren. Jetzt ist es weg. Und was wir tun werden, ist, dass wir etwas zurückgeben, das genau so aussieht. Habt ihr so viel, oder? Eso was wir hier tun können, jetzt ist dies Sie können sehen, das praktisch für uns ist, dass wir hier reinkommen und Jack sagen können , Sie Taschenrechner Hilfe. Du hast ihr das hingelegt? Ah, Leute Staat. Ok. Und, äh, und dann, natürlich. Nun, Mann ist außer Kontrolle gerückt. Endlich wartete, Könnte schwächen kam hier nach Prep Kuh und reden, wir können sagen, wie, um KLIA zu tun und wir können diese Sachen sagen. Das ist dieser Zustand. Äh, es ist das für den Staat. Also, weil wir wissen, dass es keine Standardeinstellung gibt. State ist ein Javascript-Objekt. Wir könnten es einfach passieren, um den Zustand auf diese Weise zu setzen, und dann endlich, ohne C-Taste, schwächen Say, sehe ich es? Oh, aber natürlich, vergessen wir es nicht. Kehrst du? Es muss eingeschlossen werden, und er hat gebaut, Habe das daran gebunden. Das werden wir uns verlassen geben. Dann sagen wir fünf multipliziert mit sechs Speck. Stetig und klar, nicht wahr? Dann lassen Sie uns einen Blick auf das, was klar ist, Kuh que Tour zu tun. In Ordnung, Ähm, ich lordy calle que spät oder okay. Also dieses Kind von bösen Rat 555 und klar und ging zurück zu 06 Fuß breit um neun. Ah, habe ich geklickt? Multiplizieren Sie Sisi ni mit neun multipliziert, weil das junge für uns, richtig? Wie auch immer, also haben wir es da. Wir haben implementiert, wie klar Taste. Das ist es für die Codierungsübungen für heute. Und ich freue mich darauf, Sie im nächsten Bild zu sehen. 13. Ich vermisse dich!: Nun, das ist es für die Klasse. Jedermann. Ich hoffe wirklich, Sie haben es genossen und lernen einige nützliche Informationen. Ich habe es sehr genossen, es zu unterrichten und ich kann es kaum erwarten, dein Klassenprojekt zu sehen. Also, bitte erinnere dich daran. Posten Sie sie in die Projekt-Galerie. Wenn Sie während des Unterrichts Probleme haben, lassen Sie es mich im Diskussionsbereich wissen und ich werde einsteigen und Ihnen so schnell wie möglich helfen. Bis dahin freue ich mich darauf, Sie nächstes Mal zu sehen.