[Musikwiedergabe] 

NEEL MEHTA: Hier geht es. 

Nun, jeder, Willkommen auf dem Web Anwendungen der Zukunft mit React. Dies ist CS50. Mein Name ist Neel. Ich bin ein TA für CS50 und im zweiten Jahr am Harvard College und einen sehr, sehr leidenschaftliche Web-Entwickler. Ich bin also sehr aufregend, werden heute zu Ihnen zu sprechen, ob Sie hier oder zu Hause sind beobachten, zu reagieren, das ist, wieder wie gesagt, die Zukunft der Web-Anwendungen. 

So Reagieren ist ein Web-Framework. Und wie ich schon erzählt habe für einige Leute hier, ein Rahmen ist nur ein Set von Tools, die Sie verwenden können, zu strukturieren und Ihre Webanwendung zu bauen. Und Web-Anwendungen sind wiederum Websites dass sind interaktiv wie Facebook, Twitter.com, Instagram.com, was auch immer. 

So Facebook ist ein Web-Framework das wurde von Facebook entwickelt ein paar Jahre back-- reagieren. Es ist seit dem in verwendet Facebook auf ihre mobilen Apps und die Web-App, Instagram. Khan Academy ist eine weitere prominente Early Adopter von React. 

Es ist wirklich schon immer sehr beliebt. Wenn Sie schon einmal Dinge wie Angular oder verwenden Rückgrat haben, ist dies aus der gleichen Familie, aber es seit weit hat flügeln ihre Popularität. Es ist das neue heiße Ding. Es ist wirklich, wirklich riesig. 

Und so reagieren, ist gut nicht nur als Web-Framework für die Erstellung von Schnittstellen. Es ist gut für die Erstellung von Web-Schnittstellen. Es gibt auch eine Sache, Reagieren die genannte Mutter lässt Sie den Schnittstellen zu bauen für Android und iOS und vielleicht andere Plattformen in der Zukunft mit nur dieselbe JavaScript-Code. Sie könnten genau die gleiche verwenden JavaScript-Code, um Websites zu machen, um Android Apps und iOS-Apps zu machen. 

Es ist ein sehr, sehr aufregende Zeit. Es ist ein wirklich, wirklich cool Gelegenheit. Es ist wirklich eine universelle Web- Interface-Entwicklungswerkzeug, so ist es eine sehr, sehr wichtig zu wissen. Und, wie ich erzählen Menschen bevor diese, denke ich, wird sich, wie wir ändern bauen Web-Apps für immer. So ist es vielleicht ein bisschen übertrieben, aber ich denke, es ist eine ziemlich gute Sache zu wissen. 

OK, so was reagieren? Reagieren ist ein Framework können Sie Gebrauch für Bauarbeiten Schnittstellen. Eine Schnittstelle ist wiederum eine Web-Seite, oder? Also hier ist Instagram.com, Reaktion Nutzungen. 

Reagieren Sie auf dem integrierten Idee der Komponenten. Eine Komponente ist ein HTML Element auf Steroiden, so ein HTML-Element ist wie ein Knopf. Es ist ein Absatz. Es ist ein Header, nicht wahr? Und Instagram wird diese verwenden, aber es werden auch Komponenten der Reaktion zu verwenden. 

Reagieren Komponenten frisierten HTML-Elemente , die ihr eigenes Verhalten haben in ihnen enthalten ist. So, als ein Beispiel, wir hätten ein Zeitelement, eine Zeitkomponente, was wird dergleichen enthalten der Zeitstempel, wissen Sie, eine Profilkomponente, das Profil-Bild enthalten und den Namen der Person. Es kann eine wie Zähler, haben die kann wie die Anzahl von Leuten zu zählen, und wenn Sie darauf klicken, wird es Erhöhung der Zahl der Gleichen. Eine Komponente ist nur ein Bündel von HTML-Code, hat einige Funktionen, in der es eingewickelt. Also ist es wie ein HTML-Element auf Steroiden, wie ich schon sagte. Sie können diese Komponenten zu nehmen, und Sie können sie zusammen um neue Komponenten zu machen, in diesem Fall wird ein Beitrag Komponente, Welche enthält all dieses Zeug. Es wäre Zeit enthalten, Profil, LikeCounter, vielleicht Kommentar und vielleicht das Bild selbst. Und so Web-Anwendungen sind nur durch die Einnahme gebaut Komponenten und setzen sie zusammen. Instagram-Feed ist nichts anderes als ein Haufen Beiträge einer nach dem anderen, Jede Nachricht enthält, wie die Zeit, Profil, LikeCounter, und so weiter. Es ist ein bisschen wie ein Haus bauen. Sie müssen nicht beim Aufbau der Haus von oben nach unten. Sie nehmen Sie components-- nehmen wie das Bad. Sie nehmen die bedroom-- Sie sie Stick zusammen, und Sie haben eine neue Komponente. Sie haben einen neuen Teil des Hauses. 

So reagieren rundum gebaut diese Idee von Komponenten, sind interaktiv, das deklarative sind. Wie Sie gerade sagen, was ein Profil ist, und es es macht. Sie sind zusammensetzbare. Sie können eine Zeit und ein Profil zu nehmen, setzen sie zusammen, machen etwas besser. Und sie sind wiederverwendbar, so, wenn Sie den Quellcode für eine Stelle, Sie könnten die überall einbetten. 

Sie können einen Instagram einbetten was auf Ihrer eigenen Webseite. Sie können in Facebook einbinden, zum Beispiel, solange es verwendet Reagieren ebenso. So Komponenten sind wirklich, wirklich, wirklich leistungsfähige Bausteine ​​des Web- dass kann überall eingesetzt und legte sein zusammen, um neue Bausteine ​​zu machen. Das ist das sehr, sehr hohe Übersicht. Also, noch einmal, wenn Sie Fragen an jedem Punkt über die Philosophie der Reaktor, der Codierung, um mich zu stoppen, und lassen Sie mich wissen. 

OK, zu reagieren ist so cool, weil es hat eine andere Art der Betrachtung , wie Sie Web-Anwendungen zu bauen. Sie haben wahrscheinlich schon von MVC, ein hören Modell, das Sie steuern in CS50 oder was auch immer weitere Sondierung Klassen, die Sie verwenden. Und die meisten Frameworks sind um die Idee der MVC gebaut. Reagiert nicht. Reagieren auf der Idee aufgebaut von unidirektionalen Datenfluß wie von diesem Diagramm oder Grafik hier gesehen. 

Grundsätzlich haben Sie eine Datenquelle. Und die Datenquelle entscheidet wie man das Layout bestimmte Komponenten. Und die Komponenten dann, wenn sie sich ändern, sie werden Ihnen sagen die Datenquelle zu ändern. 

Um die Instagram verwenden Beispielsweise könnten Sie haben eine Liste der Post Objekte wie in einer Datenbank oder so etwas. Daß die Daten. Und dann unseren Beitrag Komponenten werden, dass die Daten zu nehmen, und verwenden Sie diese Daten zu machen etwas auf dem Bildschirm. Was der Pfeil Das ist, Aus Daten-Komponente, und dass dieselben Daten verwendet wird um eine Reihe von Komponenten zu machen. 

In Facebook Messenger für beispielsweise die Reaktion ist, Sie könnten eine Liste haben Meldungen als Datenquelle. Und das nicht machen würden nur die Liste der Nachrichten sondern auch die Liste der Freunde, die Sie haben. Sie haben die Anzahl ungelesener. Vielleicht auch machen das, was Facebook das ist an der Unterseite des Facebook.com. Die gleichen Daten ein Single Source of Truth und das verursacht eine Menge Komponenten gemacht werden. Und immer, wenn einer von denen, Komponenten geändert wird, es geht zurück und ändert sich die Datenquelle. 

Sie senden eine Nachricht, nicht wahr? Das ändert sich die Datenquelle. Sie lesen Ihre Nachrichten, so dass Sie setzen ungelesenen auf 0. Das ändert sich die Datenquelle. Und beachten Sie, dass alle diese von einem Pfeil zurück gehen, um die gleichen Daten Quelle, so dass Sie wissen, bei einer bestimmten Datenmenge, Sie wissen genau, was der Seite aussehen würde. Es ist deterministisch. Sie wissen, da bestimmte Daten, was wird die Seite aussehen würde. Sie können vorhersagen, wie es zu gehen sich verhalten und wie die Dinge laufen zu arbeiten, wenn sie zusammen. 

Und wenn ich eine Million Bauteile hatten Hier wäre es das gleiche verhalten, nicht wahr? Sie wollte keins haben, seltsame Zusammenhänge. Eine Daten gerendert eine Million Bauteile. Eine Million Komponenten könnten gehen Sie zurück und bearbeiten Sie die Daten. Und dies ist sehr schön. Wir bauen zusammensetzbare, einfach skalierbare Web-Anwendungen. 

Sie haben eine Datenquelle, die Quelle der Wahrheit. Das sagt Ihre Komponenten wie man das Layout der Seite, und die Komponenten hand Interaktion. Und wenn sie ändern möchten Dinge, gehen Sie einfach zurück und sagen Sie die Datenquelle zu ändern. Sinn ergeben? So reagieren dreht sich alles um Verständnis how, um eine Komponente zu bauen und wie Sie Ihre Komponente zu machen Interaktion mit der Außenwelt. 

Herstellung der Komponente interagieren mit der Außenwelt verwendet eine andere Technik genannt Fluss, der ist ein Framework, das ist auf der Oberseite des reagieren. Wir gehen nicht, darüber zu sprechen. Wir werden mehr darüber zu sprechen, da Daten, wie kann man ein Bauteil zu machen? 

Und so reagieren, ist wirklich cool, weil man kann es mit jedem Backend Sie wollen. Wenn Sie wie ein Python-Backend haben, wenn Ihre Python kann ausspucken einige Daten, Reagieren kann es machen. Wenn Sie keine JS Ausgänge von Daten, Reaktion macht es. Rubin Schienen mit Daten, Reaktion macht es. 

So ist im Grunde ein Reagieren Web --neueste ein vorderes Ende mit Komponenten für jede Datenquelle zu löschen. Und so geht aus der Datenquelle zu Komponenten reagieren ist recht einfach. In die andere Richtung ist etwas schwieriger. Das nutzt Flux wie ich bereits erwähnt. Wir werden nicht in das zu bekommen. Wir werden mehr auf das konzentrieren, Daten-zu-Komponentenseite. Auf diese Weise Sie machen können cool, spaß Web-Apps. Es wird nicht die Außenwelt beeinflussen für jetzt, aber das ist eine andere Geschichte. 

OK, also, wenn Sie hier waren für meine letzten Seminar Sie werden, dass der gesamte Code für die wissen, die heutige Diskussion wird sich unter dieser URL zu sein hier, sorry, diese URL hier. Und im Grunde werden wir zu gehen, durch vier Schritte, vielleicht fünf, wahrscheinlich nicht fünf. Wir werden durch vier Schritten zu bewegen des Aufbaus einer Probe zu reagieren App. Und so die ganze Quelltext für jeden Schritt des Weges wird zu Recht hier zu sein, so dass, wenn Sie zusammen zu Hause folgenden bist, fühlen sich frei, diesen Code durchgehen. Wenn Sie folgende entlang hier bist, Wir zeigen es auf dem Bildschirm, also nicht darum kümmern. Aber wenn Sie zu Hause sind, fühlen frei, diese Website zu besuchen. Und, Ja, Sie sollten in der Lage zu bekommen alle Code, den Sie jemals brauchen hier. So ist es eine gute Spickzettel sowie für Ihre Zukunft Abenteuer mit React. Cool, so dass, wenn jeder, der hier ist, und selbst wenn Sie zu Hause sind, Pull-up dieser Website erklären is.gd/cs50react, kein Kapital, keine Unterstrich, kein gar nichts. 

Hier finden Sie eine Seite, die aussieht ein bisschen wie dieses. Dies ist ein Ding namens CodePen. CodePen ist eine kollaborative Kodierungsumgebung mit dem ich Code hier zu schreiben, und es wird automatisch an Sie gesendet werden. Und auf diese Weise kann ich Code schreiben. Ich kann Code hier laufen. 

Für example-- und wenn es reloads-- sehen Ich bin mit JavaScript-Code auf der Seite genau hier, und es wird automatisch Rendern einer Web-Seite Mit dieser JavaScript-Code. Und so ist dies ein Weg, für uns zu versuchen, Code- wirklich schnell, ohne zu verwenden unsere ID oder nutzen Sie unsere lokalen Rechner oder Wasauchimmer. Es ist eine sehr schnelle Möglichkeit für Sie, Mockup und testen Sie verschiedene Arten von Code. 

Also werde ich zu nehmen Beispiel-Code, hier ausgedrückt. Wir werden durch sie zu arbeiten. Und wenn Sie zu Hause sind, können Sie Dies kann, so gut zu ziehen. Und ich bereits installiert haben Reagieren Sie hier, so können Sie einfach schreib Code hier, und Probieren Sie es als Ihre eigenen Spielplatz. 

Ja, wenn jeder an öffnen Sie diesen Link hier. Bitte geben Sie mir einen Daumen up, sobald Sie es geöffnet haben. Cool, cool cool. Hier ist nichts für jetzt, aber wir werden sehr bald ändern. 

OK, so Reagieren ist ein JavaScript- Bibliothek, und als solche, erfordert Kenntnisse über Javascript, das ist der Web-Programmiersprache. Und es ist für andere Dinge verwendet jetzt auch, aber vor allem die Web-Entwicklung Sprache, also, wenn Sie nicht vertraut sind daß, lesen Sie eine Website namens JSforCats.com. Es ist wunderbar. Sie können JavaScript lernen in einer halben Stunde. Es ist unglaublich. 

Versuch es zu lesen. Zudem ist eine Menge von HTML hier wegen wir die Gestaltung von Web-Seiten natürlich. Also, wenn Sie nicht mit sind HTML Besuche HTMLdog.com. Ich denke, dass das Lernen Reagieren ein Millionen Mal einfacher, wenn Sie bereits wissen die Bausteine. Wenn Sie die Komponenten haben, ist es einfach, eine größere Komponente zu machen. Das ist, reagieren die Sprache für Sie. 

Also zögern Sie nicht und geben Sie diese Dinge ein Lese. Pause dieses Video. Geben Sie ihm einen Lese wenn Sie zu Hause, wenn Sie nicht mit HTML oder JavaScript vertraut OK, also das, was wir zu gehen zu tun ist, wir werden machen ein sehr einfaches Flashcard App mit React. Wir werden eine Flashcard haben. Sie können die Karte vor und zurück blättern. Und wir haben auch eine Liste der alle Karten, die wir haben, und wenn wir etwas Zeit ehrgeizig, wir sein könnten in der Lage, um zwischen Autos anklicken. 

Aber das ist, von bloßen Knochen, ein sehr einfaches Reagieren App. Und so ist dies tatsächlich nicht trivial zu implementieren, aber wir werden, um zu zeigen, dass, wenn Sie tun, dies, ist es sehr, sehr einfach, sie zu verlängern wenn anderen Menschen zu helfen Sie mit ihm. So werden wir in vier Schritten zu gehen von Grund auf aufbauen. 

OK, so dass die vier Schritte, werden wir Beginnen Sie mit dem ersten Schritt. Der erste Schritt sein wird, Aufbau Ihrer ersten Komponente. Wie ich schon sagte, eine Komponente in Reagieren ist nur ein HTML-Element auf Steroiden. Es gibt die HTML- und einige Verhalten, und es wird, wie die Menschen angeben, kann mit ihr zu interagieren, wie es wäre internen Zustand zu haben. Wie eine Taste wie zB wie viele wissen, Mal ist es beispielsweise angeklickt wurde, und es wird, wie man sich selbst auslegen. 

Lassen Sie uns also gehen Sie voran und bauen unsere erste Komponente mit Hilfe von JavaScript. Also, wenn die Syntax sieht seltsam, das ist, weil es eine Art ist. Also, noch einmal, wir gehen um eine Variable mit dem Namen machen, App mit dem Schlüsselwort lassen, wodurch eine Variable, Lassen App gleich React.createClass. 

Reagieren ist eine Bibliothek und hat das erstellen Klassenfunktion. Und diese Funktion ein wenig Code, den Sie verwenden können, um ein neues Art der Komponente reagieren. Und so React.createClass macht eine Komponente, und diese Komponente in der Lage, Dinge zu tun. Die Hauptsache, es tun können, ist zu machen etwas, übertragen sie in Abhängigkeit. 

Wieder, wenn dieser Index nicht offensichtlich ist Sie, empfehle ich Ihnen auf JS für Katzen gehen und check it out. Ist, dass in gut genug gezoomt? Cool. 

So dass jeder Komponentenbedarf um eine Renderfunktion haben. Die Render-Funktion sagt: Was soll ich auf dem Bildschirm zu drucken? Aber die Komponente nutzlos, wenn dies nicht der Fall wissen, was auf dem Bildschirm zu drucken, so müssen Sie eine Renderfunktion haben. 

So in der Render-Sache, die Sie nur müssen einige HTML zurückzukehren. Und was cool ist, dass es gibt ein Ding namens JSX, die eine Verlängerung der ist JavaScript, die von verwendet wird, zu reagieren. Es lässt Sie HTML innen schreiben Ihrer JavaScript, die klingt irgendwie seltsam, wenn Sie zuerst darüber nachdenken, aber es macht sehr viel Sinn danach. So können wir das tun. Wenn Sie mit HTML vertraut sind, wissen, dass ich wir haben ein div mit einem Allzweck- Behälter für Sachen. Wir können ein div zurückkehren, und im Inneren Dieses div, können wir Sachen setzen. 

Also lassen Sie uns sagen, dass wir nur machen wollen a straight-up Flashcard für den Moment. Die Flashcard, würde ich sagen, wird eine Frage-und Antwort. Also in diesem div, lassen Sie uns drucken Sie eine Nummer das sagt question-- Was ist der ultimative Antwort auf das Leben, das Universum? Und dann ist die Antwort sein wird, natürlich, 42. 

Das kam nicht gut überhaupt. Ja, so dass im Grunde kann man wirklich HTML zu schreiben in Ihrem JavaScript. Und dies wird sein, hinaus auf dem Bildschirm ausgegeben. Lassen Sie uns also probieren Sie es aus. 

So haben wir unsere Komponenten. Wir müssen sagen, reagieren zu setzen das Bauteil auf dem Bildschirm so React.render, so bemerken, dass wir App behandeln wie jedes andere Element. Wir schreiben es, wie es ein HTML-Element war. Wie anstatt zu sagen, wie img für Bild oder p für Absatz, Sie schreiben, App, also App wie ein HTML-Element behandelt. Wie ich schon sagte, es ist ein Element auf Steroiden. 

So können Sie App zu machen, und Sie geben ihm einen Platz dafür. Und das ist, wie Sie sagen Sie ihm, wohin damit. Ich habe eine einfache div auf die erstellte Seite mit der ID-Seite aufgerufen, und das ist, wo die Element los zu gehen. 

Und wir werden nicht mit HTML laufen. Im Grunde ist dies, um loslegen Innere dieser Seite Element setzen dass wir auf dem Bildschirm. So läuft es diesen Code, und es zieht diese was auf dem Bildschirm, so sind wir hier. Wir haben unsere erste Reaktion Komponente. 

Also nur als Erinnerung, die wir leicht gemacht eine neue Art der Komponente, nicht wahr? Das ist, was die React.createClass. Und dass die Komponente, die wir sagte sie, was sie tun sollten. Immer wenn diese Komponente auf den Bildschirm gedruckt werden, es wird aus der div mit gedruckt die beiden Absätzen darin. 

Und was wir getan haben, eine neue App haben wir mit dem Winkel App Notation. Wir sagten ihm, es zu setzen im Inneren des Seitenelement. Und so, was ich tat, schuf sie eine neue App mit dieser Vorlage. Und dann sagte ich, um es zu machen. So sagte er, OK, App, was soll ich ausdrucken? App sagt, gehen Sie drucken Sie eine div mit zwei Absätzen darin. Und voila, gibt es unsere div mit beiden Absätzen darin. Sinn so weit? 

So wiederum die ganze Herausforderung Reagieren ist nur zu wissen, wie Komponenten zu machen. Wie man das machen Komponenten arbeiten zusammen. Jetzt, wo wir unser erstes gemacht Komponente, gehen wir zurück und stellen Komponenten anpassbar. So können Sie in HTML wissen, wie Sie Ihre Schaltflächen Klassen geben? Sie können Ihre Anker geben dem href. Sie können Ihre Eingaben geben ein Typ, nicht wahr? Sie können mehrere benutzerdefinierte geben Eigenschaften, um alle Ihre Elemente um es interessanter. Und wir wirklich tun können genau dasselbe. 

Also lassen Sie uns sagen, dass wir wollen, dass unsere App zu gehen macht jede Karte. Im Moment haben wir nur gerendert eine hartkodierte Karte. Wir wissen, es gibt nur einen Karte kann es tun, so sind wir werde versuchen, und ändern Sie das jetzt so dass wir nur geben es einige Karte. Es wird drucken Sie die Karte. 

Sie sollten versuchen, und machen Sie Ihren Komponenten eine sehr allgemeine Zwecke. Also diese Art, wie ich eine E-Mail konnte mein Freund und sein mögen, was Flashcard haben Sie, nur speisen ihn in hier, und es wird es selbst zu tun. Sie können andere setzen Dinge in Ihrem eigenen App. 

Aber zunächst wollen wir brechen diese in zwei Komponenten, aber wir, um die Karte zu trennen wollen, Druckteil von der eigentlichen App Teil. Also, was wir tun können, ist, dass wir Dies kann aus dem App ändern um Card, nur ein neuen Namen für die App, und wir können eine neue zu machen Komponente namens App, nicht mit dem alten App verwechselt werden. Wir haben die createClass bekam, und wie in HTML, Sie nisten Reagieren Komponenten nach innen von einander. 

Also in diesem Render-Funktion, Funktionsrückgabecard, und dies ist genau das gleiche. Sehen Sie, warum es ist die gleiche Sache? Statt nur die Rendering-Anwendung, die hat den div und Paarung in der es, die App macht die Card und die Card macht die div und Absatz. Also das ist unser erstes Beispiel Schachtelelemente innerhalb der jeweils anderen. Ist das sinnvoll? Also, noch einmal, wir haben ein Cardelement. Wir haben app Elemente dass es größer als. 

OK, so wollen wir unsere CardView-- wenn Sie geben einen guten Card eine bestimmte Karte, es wird für Sie drucken, richtig? Also zuerst, wir brauchen, um eine Karte zu machen, Lassen Sie uns also einen Kartenobjekt. Also lassen Sie meine Karte equal-- wenn Sie alle vertraut sind, das ist nur die Notation Herstellung Objekt in JavaScript. Es ist wie eine Art von Struktur in C, so haben wir eine Karte, und so jetzt können wir diese Karte als übergeben eine Eigenschaft oder als Attribut in HTML Terminologie, um unsere App. Also haben wir dieses, App tun können Karte gleich Mycard. 

Sie wissen, wie in der Eingangs, können Sie tun input type gleich Text oder Button Klasse ist gleich für Bootstrap-btn ,? Dieselbe Idee, App Karte equals-- du musst Klammern gesetzt hier-- App Karte gleich Mycard, so dass diese sagt, dass wir diese Karte zum Gegenstand haben. Ich werde es als einen Durchlauf Eigenschaft auf den App-Komponente. Und diese App Komponente in der Lage, darauf zuzugreifen und tun interessante Sachen mit ihm. 

Also unsere app wird sein, bei einer Karte, so dass für jetzt, lassen Sie uns die App nur geben die Karte mit dem Card selbst da, wie die app ist nicht gehen zu wissen, was damit zu tun hat, so dass wir nur geben Sie es an die Card. So werden wir es den Pass Ebenso entspricht Karte, und so kann jede Komponente Zugriff auf den Dinge, die es gegeben ist. Sie können die Eigenschaften zugreifen , die ihm gegeben worden sind mit dieser Syntax, this.props.card. 

Was passiert also, hier ist haben Sie die Mycard Objekt. Sie geben es in die App Verwendung App Karte gleich Mycard. Diese Karte Objekt, um Ihre Anwendung gegeben. Die App kann darauf zugreifen wie this.props.card. Es ist ein bisschen wie ein Bild weiß, was es ist Quelle. 

Diese App weiß, was es ist Karte ist, und es kann Dinge tun. Es können Berechnungen zu tun. Es können Entscheidungen auf der Basis weg von ihr zu machen. 

Denn jetzt, wollte ich weitergeben this.props.card auf den Card. Sinn so weit? Es wird mehr Sinn, jetzt zu machen. 

OK, so jetzt sind wir bei Card. Unsere Card, da die Karte, sollte drucken Sie ihre Frage und Antwort. Im Moment haben wir nur ausgedruckt einige hartkodierte Fragen und Antworten. Wir müssen heraus out-- wir brauchen um die Karte, die sie uns gegeben haben fragen was ist die Frage und Antwort, und dann drucken Sie diese aus in den Bildschirm. 

So können wir das hier tun. In machen begin-- zuerst tun ist gleich. Also, was wir hier tun, ist, dass wir wissen, die Karten werden uns auf eine Eigenschaft gegeben, Recht? Es ist für uns als Eingang angegeben. Wie es ist fast wie Argumente einer Funktion. Die Karte ist ein Argument, fast zu dieser Card. 

Wir extrahieren, dass, und legte sie in den Variable Frage. Stellen Sie sicher, die Antwort ging der Variablen antworten. Fordert, dass Karte zu beantworten. Und jetzt, da wir diesen, anstelle von Ausdrucken, die Text, wir gehen zum Ausdrucken Was auch immer sie uns gaben. 

Also das stuff-- also werden wir löschte Frage Antwort. Mal sehen, ob das funktioniert. Cool, so das durch sie treten lassen noch einmal, nur um sicher zu sein. 

Also meine Karte ist Kartenobjekt, und wir geben diese Karte auf die App. Und die App wird den nehmen Karte und geben Sie es an die Card. Und das Card sagt, wenn Sie geben mir jede Flashcard-Objekt, Ich werde seiner Frage ausdrucken und seine Antwort, nicht wahr? 

Also, was ich tun konnte, ist, ich kann senden Sie diesen Code ein, den ersten wie 10 Zeilen meines Codes, um mein Freund. Er konnte es in einbetten seine eigene Anwendung. Und solange er tat das Gleiche, wie Cardkarte entspricht dies, solange er die Card erstellt und gab ihm das Recht, Informationen, er seine eigene Karte machen könnte. Und so ist dies so, es ist ein wirklich coole Art für Sie zu bauen Komponenten, die sich gegenseitig benutzen, oder? Diese Karte, veröffentliche ich könnte Diese Card über das Internet, und Menschen, in der Lage wäre, es zu benutzen. Also im Grunde ist es wie eine der Standard-Funktionen in der C-Bibliothek. 

Es ist eine Funktion, bei der hat jemand geschrieben. Sie geben eine bestimmte Eingabe. Es wird eine bestimmte Ausgabe zu erzeugen. Sie mich nicht, wie es intern arbeitet. Solange Sie es das Recht geben, Eingang, wird es die richtige Ausgangs zu machen. 

Und eine Komponente kann dachte an die gleiche Art und Weise. Das Card ist wie eine Bibliotheksfunktion. Wenn Sie einige Karten geben als eine Eigenschaft, wird es Drucken Sie den Inhalt dieser Karte. Wie, wenn ich meine Karte ändern statt sein wie das, was ist 5 und 37, es wird entsprechend aktualisiert. Also einfach durch Ändern des Eingangs, es wird eine bestimmte Ausgangs. So dass Sie von Komponenten fast denken können als Funktionen auf diese Weise, die Sie zusammen zu stellen. Sie erhalten Eingang, wie dieser Card als Eingang, erhalten Sie Ausgabe. In diesem Fall ist die Ausgangs HTML. Sinn so weit? Cool,, Eigenschaften sind so wieder wie Sie Informationen weitergeben in den und aus Bauteilen. 

OK, so lassen Sie uns dies Sache interaktiv. Im Moment ist es ziemlich langweilig. Was ist [unverständlich]? Sie können einige ausdrucken, aber das ist alles es tun können. 

Also lassen Sie uns zurück zu den alte Frage nur für den Moment. OK, also jetzt diese Komponenten sind langweilig, weil alles, was sie tun, sie bekommen Eingang. Sie machen Ausgang, nicht wahr? Das ist irgendwie langweilig. Wir wollen unsere haben Komponenten in der Lage sein zu haben eine Art inneren Zustand, wie an etwas erinnern. 

Für eine Flashcard, beispiels Beispiel welche Art von Staat könnten Sie wollen merken für eine Flashkarte? Was temporären Status könnten Sie sich erinnern wollen für eine Flashcard in einer Flashcard-app? Publikum: Ob es sich umgedreht? NEEL MEHTA: Ja, richtig. So möchten Sie vielleicht zu halten Spur sind Sie konfrontiert sind oder Sie verdeckt auf der Karte. Auf Facebook zum Beispiel, würden Sie wollen in der News-Feed erinnern, wo Sie sind oder gerne die Profil werden Sie jetzt tun. 

Auf Messenger, wie welcher Text Geben Sie in das Eingabefeld ein, oder? Wenn Sie die Seite aktualisieren, es geht weg. Aber Sie nicht wirklich interessieren. Es ist nur vorübergehend. Ja? 

ZIELGRUPPE: [unverständlich] NEEL MEHTA: Wie ein Blitz Karte, wie Sie können sehen, die Frage, Seite oder die Antwort Seite? 

ZIELGRUPPE: OK. 

NEEL MEHTA: Like a zweiseitig Flashcard, oder? Ja, so du willst haben diese Idee jetzt Ich habe Eigenschaften, die wie Eingänge, aber Staates, die vorübergehende ist, äh, , wo Sie auf der Seite sind, oder? Auch in Facebook, sagte ich Messenger, ich habe wie dem Menschen Du betrachtest Facebook oder wer-Profile, nicht wahr? 

Das ist nur vorübergehend. Es ist wichtig, um dem Benutzer zu zeigen was los ist, aber aktualisieren Sie die Seite. Es spielt eigentlich keine Rolle. So ist es vorübergehender Zustand, so dass wir alle es Zustand. 

Also, noch einmal, es gibt staatliche und Requisiten. Props ist Eingang gegeben aus der Datenquelle. Staat ist wie Standardwerte. Es ist gerade wie Sachen, macht die Sache interaktiv. 

Also in unserem CardView-- lassen Sie uns unsere CardView-- so war es schön. Was wir hier zu tun, werden wir um Card und nur Card berühren. Und so mein Freund, die dies, sie haben würde keinen Unterschied bemerken. Sie würden nicht ändern müssen jeder ihren eigenen Code, aber sie würden sehen, ihre Card habe aufgemotzt. Das ist eine nette Teil über Komponenten. 

OK, also in unserem Card, lassen Sie uns versuchen, zu verfolgen, ob wir Phase bis oder nach unten. In Reagieren wir dies tun, indem zuerst Angabe der Ausgangszustand. Woher kommt der Karte zu beginnen? 

So eine Funktion namens getInitialState sein funktionieren, und wir ein Objekt zurück. Dieses Objekt enthält einige Zustand und ein Zustand, ist nur ein Schlüssel-Wert-Paar. Wie in anweisen, einen Schlüssel und einen müssen Sie Wert, müssen Sie wie Name ist ein String. 

In diesem Fall lassen Sie uns sagen vorne ist wahr. Dieses sagt, dass wir einen Staat. Eine Komponente des Staates ist ein Attribut namens Front. [Unverständlich], so standardmäßig, wir sind in der Vorderseite der Karte, und wir können das ändern wie wir drehen Sie die Karte. Sinn ergeben? 

OK, so dass in machen, gerade jetzt, wir sind , die die Frage und die Antwort. Nun, was wir tun sollten ist die Frage zu zeigen wenn man auf der Vorderseite der Karte befinden, so die Antwort für die Rückseite der Karte. Das ist, warum Sie alle machen die Karte interaktiv. Also lassen Sie uns versuchen, dies hier. Nun, zunächst einmal einfach eine Variable. Wir können jetzt this.state.front fragen. Wir Zugriffsstatus die gleiche wir Zugang Requisiten, so this.state.front. 

Wenn wir vorne, dann Text ist this.props.card.question. Wenn man auf der Vorderseite die bist Karte, werden wir versuchen, grab die Frage von der Karte. Andernfalls, wenn wir auf der Rückseite sind der Karte, was sollen wir tun? 

Publikum: Die Antwort? 

NEEL MEHTA: Yep, so Text gleich this.props.card.answer. Aber wenn Sie bemerken, verwenden wir der Staat eine Entscheidung treffen denn nun der Komponente wird anders aussehen basierte weg, wie diese mit ihm interagieren. So anstelle von Ausdrucken von diesem, wir müssen einfach drucken Sie den Text. Cool, so jetzt, wie Sie sehen, sehen wir nur die Frage. Und wenn ich manuell ändern den Zustand hier nach vorne ist falsch wir bekommen 42 zurück. 

Also, noch einmal, diese Komponente hat einen eigenen Staat. Wie ein Knopf weiß, ob es ist gedrückt worden ist oder nicht, diese Sache weiß, was auf die Vorder- oder auf der Rückseite. Standardmäßig ist es auf der Vorderseite. Und dann, wenn es auf der Vorderseite, wir drucken Sie die Frage. Wenn es auf dem Rücken, werden wir drucken Sie die Antwort. So wiederum die Information angegeben ist die gleiche. Es sieht nur anders je nachdem, wie man es zu programmieren. So zum Beispiel Facebook Messenger, auch wenn Sie dieselbe Datenquelle zu bekommen, könnte es anders aussehen weil der Zustand anders ist. Sie befinden sich auf einem Blick Botschaft anderer Mensch. 

OK, so ist dies alles schön und gut, aber jetzt, was ist eigentlich machen uns in der Lage, zu ändern, ob Unsere Karte ist vorne oder hinten. Wir können dies durch Hinzufügen eines Flip zu tun Taste, eine Taste, um die Karte, wird die Karte kippen, wenn es [unverständlich]. So fügen wir einen Knopf hier, diese Taste, und diese Taste wird sagen flip. 

Und so im Moment, es tut nichts. Es sieht einfach schön. Was wir tun können ist, können wir einen Klick hinzufügen Handler, gleich onClick this.flip, und wir werden Flip später definieren. Aber im Grunde onClick ist eine Funktion, wird aufgerufen, wenn der Benutzer darauf klickt. 

So wird der Button weiß wenn es angeklickt wurde. Ging es angeklickt, es wird die Karte zu kippen. Es ist eine Art, wie Sie Ihre Pizza Delivery Guy. Du bist wie, alles in Ordnung, wenn jemand ruft mich, ich werde Pizza liefern, nicht wahr? 

Sie registrieren diese Zuhörer. Sie hören für eine Veranstaltung. Sie erhalten genannt, und wenn die Ereignis eintritt, können Sie etwas tun. Sie erhalten Pizza. In diesem Fall, wenn Sie angeklickt, die Karte drehen Sie. 

Und so müssen wir eine Definition Funktion, die die Karte kippen wird, so werden wir von diesem Recht Gebrauch zu schreiben hier, Flip-Funktion. Und so was denken Sie, Flip tun? Auch dieses wird aufgerufen, wenn wir Sie auf den Flip-Taste. Was sollte die Funktion Flip zu tun? 

ZIELGRUPPE: Änderung this.state.front von true in false, false auf true. 

NEEL MEHTA: Yep, so ergreifen this.front ist-- der vordere Zustand ist. Nehmen Sie die Front Zustand, wenn es ist wahr, machen es falsch. Wenn es falsch ist, machen es wahr, oder? Also lassen Sie uns versuchen, dass. 

Sie können Zustand nicht ändern einfach, indem Sie this.state. Sie können das nicht tun. Sie können das nicht tun. Sie haben, um eine Funktion zu verwenden genannt this.setState. 

So kann man sagen, this.setState Front Doppelpunkt dieses, wo wiederum das Ausrufe Punkt bedeutet das Gegenteil. Ich schätze, wenn diese. state.front wahr ist, wird es drehen falsch. Also werden wir den Zustand gesetzt von true in false. Wenn es falsch ist, werden wir stellen Sie false auf true. 

Bitte beachte, dass wir gesetzt und erhalten leicht anders, und so wollen wir versuchen dies. Bada bing, sieh dir das an. Das Flip-Taste wird jetzt schalten Sie den vorderen in den Zustand zurück. 

Und so ist hier, wo Sie sehen, wenig von der Magie der React. Wie wir nie gesagt, dass es es wieder machen. Wir haben nie gesagt, dass es irgendetwas neu zu zeichnen. Wenn Sie dies tun ohne Reaktion, würden Sie haben zu-- gerne, wenn der Flip-Taste angeklickt wird, man müsste es zu sagen, manuell neu zu machen, oder? 

Reagieren ist wirklich cool, dass, wenn Sie geben Sie ihm einen bestimmten Zustand und Eigenschaften, es wird immer machen genau dasselbe. Und so, wenn wir immer wir ändern der Zustand und die Eigenschaften, reagieren einfach neu macht die ganze Sache. Es weiß, dass es eine Eins-zu-Eins-Entsprechung zwischen Staat und Parameter und HTML. Also, wenn eine der beiden Änderungen durch einen gesetzten Zustand, es wird sich ändern, wie die Pay ist neu gerendert. Und so im Grunde Reagieren ist wie warten auf Sie zu ändern. 

Immer, wenn es sich etwas ändert, es wird wieder machen die gesamte Seite. Und wenn es ineffizient klingt, es ist, weil es wäre, aber reagieren verwendet eine Sache, genannt Schatten DOM. Anstatt die Seite direkt zeichnen, es hält die virtuelle HTML-Baum im Speicher. 

Sie wissen, ist HTML wie ein Baum, wie eine hierarchische Datenstruktur. Es hält eine gefälschte Baum in Erinnerung, und wenn Sie die Seite zu aktualisieren, es wird eine weitere gefälschte zeichnen Baum, und es wird berechnet was ändern muss, das zu machen Seite, um die beiden Bäume gleich. Also im Grunde, es praktisch Wieder macht eine Menge. Und dann ist es nur gerne ändert sich die Seite in kleinen Tweaks wie nötig, so ist es sehr, sehr, sehr effizient. 

Also im Grunde reagieren wenn Sie etwas ändern, es wird wieder machen die Seite praktisch. Es wird herausfinden, was muss ich zu ändern, um die eigentliche Seite zu reflektieren die virtuelle Seite, und es wird das tun. Das ist das virtuelle DOM. Es ist eines der größten Merkmale React. 

Ist das sinnvoll? Irgendwelche Fragen? Ja? 

Publikum: Wie funktioniert noch mit dem MVC vergleichen dass wir darüber gesprochen vor wie Ressourcen. 

NEEL MEHTA: Ja, das ist die Frage So kommt es zu MVC zu vergleichen? Sie fragten nach Ressourcen. Nun, lasst uns darüber, wie es funktioniert zu sprechen. 

In MVC, würden Sie das Modell zu aktualisieren. In diesem Fall müssten wir ein Kartenmodell. Der Blick wäre das haben Flip-Taste, und die Steuerung müssten die Flip-Funktion. So dass die Aussicht würde sagen, die Controller Flip Flip. Flip würde sagen, die Modell zu ändern, oder? 

Und so, wenn Sie eine MVC, Sie tun hören Sie auf das Modell zu verändern, und Sie neu rendern die Ansicht entsprechend. Oder man muss nur Lust haben Sie den Controller. Warten Sie, bis das Modell zu verändern, und dann wählen, und wählen einen Teil wie ein Ding wechseln. Hier haben wir eine Sache, aber in einem großen app, Sie möchte daran erinnern, was haben die Änderung in jedem Ort, so ist es ein wenig ärgerlich. Und so Reagieren ist schön weil es einen Schatten Dom. Es kann nur leisten, schreiben die ganze Sache. Sie können wahlweise müssen wie erraten, was zu aktualisieren. 

Auf Facebook, wenn Sie mögen bekommen Sie eine neue Nachricht, in MVC, Sie müssten sich daran zu erinnern, OK, ändern die Dinge, an der Spitze der Seite, die Nachricht Symbol. Auch Pop ein neues Fenster an der Unterseite. Auch eine neue Sache in diesem Fenster. Auch einen Ton spielen. 

Das ist eine Menge Zeug Ausgehen gleichzeitig. Und so, wenn Sie nicht tun, haben einen Schatten Dom, würden Sie müssen dies manuell zu tun, weil man kann nicht loszuwerden, die ganze Seite. Sie können sich nicht leisten, so müssen um jede Sache, manuell zu ändern, Das ist in MVC wirklich ärgerlich. 

Also, um zu sein, sparsam, sie selektiv aktualisieren Sie die Seite, das ist, effizient, aber auch lästig. In Reaktion, weil der Schatten Dom, beides erhalten Sie kostenlos. Es ist effizienter, weil des Schatten Dom. Der Engpass ist die Aktualisierung der Seite. Es ist nicht, die Baum-Manipulation. Sie erhalten die Effizienz. Sie erhalten auch die Benutzerfreundlichkeit, da wenn Sie nur schreiben die gesamte Seite, aber Sie wissen nur, alles in Ordnung, die Dinge, gehen, um auf der Seite irgendwo sein. Es könnte an einem anderen Ort sein, aber es wird auf der Seite sein, oder? So dass Sie nur neu gerendert das Ganze praktisch, und Sie könnten ein paar machen Änderungen an der Seite selbst. 

Also, noch einmal, in MVC Sie müssten wählen zwischen Benutzerfreundlichkeit und Effizienz, und Reagieren, Sie beide zu bekommen. So ist es besser. Sinn ergeben? Feststoff. 

OK, also mal sehen, lass uns reden ein wenig über Schritt 4 wie können wir Komponenten einbetten. So haben wir jetzt dieses Recht. Wir haben unseren coolen kleinen Knopf. Wir können es drehen und zurück her, und das ist alles, es tut. Nehmen wir an, wir wollen haben eine andere Komponente. Nehmen wir an, unsere Flashcard App sollte enthalten eine Liste von allen Karten dass Sie haben, so dass bedeutet, dass wir sollte eine andere Komponente haben. Na ja, vielleicht nennen es eine Listenansicht. Lassen Sie uns machen Sie eine Liste Ansicht, dass koexistiert mit dem Card, und diese Liste Ansicht und Card zusammen mag Arbeit. Und Sie können sie zu kombinieren um unsere App für Sie. 

So zuerst, lassen Sie uns ein paar mehr Karten richtig. Lassen Sie uns sagen, was für Karten? Und nur damit ich nicht zu haben, Bohrung mit der Eingabe in, Ich werde einfach es von hier kopieren. Und so werde ich nicht geben ihm nur einer Karte. Ich werde es eine Reihe von Karten zu geben. Also zuerst die Apps werde für jetzt brechen. Alle Rechte, so werden wir machen Diese Lage, mehrere Karten zu behandeln. Also zuerst, wir gehen, um es zu geben, nicht nur einer Karte, sondern eine Reihe von Karten, wie eine Liste der Karten. Und in diesem Fall gibt es drei. 

In Ordnung, so so App gehen, um eine Liste mit Karten zu bekommen, und es wird zu entscheiden, welche ein bis zu dem Card zeigen. Der Card nur kann machen eine Karte, aber die App ruft eine Liste aller Karten, nicht wahr? 

Also, wenn Sie aus einer Figur Karte, um Card geben, wie würden Sie vermute, Sie könnten in der Lage sein, eine Entscheidung zu treffen, über die Karte zeigen? Um Ihnen einen Tipp geben, ist es zeitweise Sie werden sehen eine bestimmte Karte. Wenn Sie die Seite aktualisieren, werden Sie gerade zurück auf die erste Karte zu gehen. Das ist in Ordnung, weil es vorübergehend. Welche Technik könnten wir verwenden? 

Publikum: Sie könnten eine variabel zu machen so wie du gerade hatten vorne. Ist das wahr, könnten Sie haben aktuelle Karte entspricht 1? 

NEEL MEHTA: Ja, so haben wir wollen Staat haben, nicht wahr? Sie würden Zustand in der Verwendung Komponente, um herauszufinden, welche Karte wollen wir erhalten. Wie haben wir eine Liste der alle Karten, werden wir benutzen Zustand, um herauszufinden, einer der ersten Karte, zweite Karte dritte Karte, und so weiter. 

So eine App, so wird eine App erhalten ein haben die getInitialState Funktion, getInitialState Funktion Rückkehr. Und wir werden einfach sagen activeIndex 0. So, jetzt unsere App hat einen eigenen Staat. 

Und so nun an zu machen, um herauszufinden, eine Karte, lass uns einfach an das Array gehen und ergreifen Sie die Sache an diesem Index. Wählen Sie die Karte gleich this.props.cards this.state.activeIndex. So wie Sie hier sehen, die Requisiten und der Staat tatsächlich zusammenarbeiten. So, jetzt, da wir unsere Activecard, wir nennen es Activecard, und mal sehen, ob das funktioniert. [UNVERSTÄNDLICH] 

Oh, das war ein Textfehler. Ah. 

Cool, yep, jetzt waren wir wieder , wo wir vorher waren, nicht wahr? Same old-Programm mit Ausnahme Jetzt unterstützen wir können eine Liste der Karten, nicht nur eine Karte. Und jetzt wieder, wenn wir das ändern activeIndex, können wir 0-1 gehen, und jetzt, dass die zweite Karte, und dann gingen wir auf 0. Also hier ist eine neue aufgemotzte Version unserer. 

OK, so jetzt wir einen der Listenansicht lassen, dass zeigt alle Karten in Ihrem Programm, so dass wir eine neue zu machen Komponente namens listview. Lassen listview gleich react.createClass. So eine ungeordnete zu machen, wollen wir Liste mit einem Listenelement für jede Karte. Und so haben wir eine Reihe von Karten. Wir wollen ein Listenelement für jede Karte, oder? Wir könnten eine for-Schleife zu tun oder etwas, um ein neues Listenelement zu machen. Aber, wie Sie es in zu tun Reagieren, verwenden Sie ein Ding namens Karte. Karte ist ein Werkzeug oder eine Funktion, die Sie verwenden dass für jeden Artikel, läuft eine Funktion, nimmt Rückgabewert, und gibt Ihnen das zurück. 

So als Beispiel, haben wir das Array 1, 2, 3.map function-- und dies ist für eine Kurz function-- x Pfeil x mal x. Dieses sagt, für jede Zahl in 1, 2, 3, nehmen Sie es. Quadrat, und geben Sie es zurück. Also, was tun Sie denken, 1, 2 geht 3.map x zu x-mal x gibt Ihnen wieder gegeben dass diese Funktion laufen auf jedem Element des Arrays. 

ZIELGRUPPE: 1, 4 9? 

NEEL MEHTA: Yep, 1, 4, 9 weil Sie 1 mal 1. Das gibt Ihnen ein. Das ist das erste Element. 

2 mal 2 ist 4. Das ist ein zweites Element. 3 mal 3 ist 9. Das ist ein drittes Element. Sinn ergeben? So Karte verfügt über eine Technik, die Sie Verwendung in funktionellen Programmierer, den neuen Stil der Programmierung, etwas zu tun zu jedem Element in der Liste. Und so das klingt vertraut. Wir haben eine Liste von Karten. Wir wollen einen Listeneintrag für jeden zu bekommen ein, so dass wir nur Karte benutzen hier. Wir werden sagen, lassen Sie die Liste equals this.props, Karten, Karte. 

Und so bei einer Karte, wir sind gehen, um einen Listeneintrag zu erzeugen, mit dieser Karte Inhalt Seite davon. Sagen wir einfach, wir wollen, zu geben, die Karten in Frage zu stellen, so card.question. So enthält diese Liste ein Array von LI oder Listenelemente wo es eine Liste Artikel für jede Karte, und enthält die Karten Frage. Sinn ergeben? 

Cool, so jetzt lassen Sie uns tatsächlich zu drucken, dass aus. So werden wir einen ul zurückzukehren. Innerhalb dieses ungeordnete Liste, wir werden nur Stick die ganze Liste dass sie uns gegeben hat. Cool. 

In Ordnung, so dass nun diese Listenansicht funktioniert einfach zu finden. Haben Sie Fragen zu der Listenansicht? Sie haben eine Reihe von Karten. Sie machen einen Listeneintrag für jede Karte. Und man sie innerhalb einer ungeordneten Liste, und Sie geben es zurück. So, jetzt zu handeln, damit wir einbetten lassen diese innerhalb unserer App, so können wir dies tun, Listenansicht. Welche Argumente haben wir übergeben zur Listenansicht? Welche Eigenschaften haben wir es? Denken Sie daran, wenn Sie geben es ist ein Bündel Karten, es wird die Liste zu machen sehen für die Karten. Also, was würde passieren wir hier als Argument? Publikum: Eine Liste der Karten? NEEL MEHTA: Ja, so Karten gleich this.props.cards, nicht wahr? Und so das einzige Problem ist, dass man nur wandte sich ein Top-Level-Element zu machen, so mußt du es in einem div wickeln. Es ist komisch. Lassen Sie uns also, wenn das zu sehen. Funktioniert es? 

Yep, dort gehen Sie. So, jetzt haben wir eine Liste der Karten an der Unterseite, und dann haben wir unsere Card sich auf die Oberseite, und daß zwischen Flip die beiden Seiten der Karte. Jetzt macht das Sinn, wie ich das getan habe? Ja, so haben wir wieder zwei Komponenten. Die erste Komponente Drucke Sie jede Karte in der Liste. Das ist die Listenansicht. Und die zweite Komponente druckt nur die Karte. Wenn Sie es eine bestimmte Karte zu geben, wird es Drucken Sie Informationen zu dieser Karte und lassen Sie sich vor und zurück blättern. 

Wenn wir wollen, können wir versuchen, und sprechen über das Hinzufügen einige neue Features dazu. Sonst können wir ein bisschen mehr reden zu der Geschwindigkeit des Reaktors, oder wir antworten können Fragen gerne zur Verfügung denn diese sind alle Kernteile von reagieren, dass ich will, darüber zu sprechen. Wir können weiter gehen. Wir können Fragen zu beantworten. Irgendwas du willst. 

ZIELGRUPPE: Können Sie verwenden JSX in normalen JavaScript? Oder ist das etwas, kam mit dem [unverständlich]? 

NEEL MEHTA: Die Frage ist, kann Sie JSX mit normaler JavaScript verwenden? Die Antwort ist ja. JSX ist nur ein Weg, es dauert, Ihre JavaScript, die HTML-Innenseite hat, und es in JavaScript erstellt, dass keine HTML darin. So bemerken dass-- so bemerken Sie hier. Das sieht aus wie du div haben und Sie haben Sachen darin. 

Das stellt den JavaScript-Code, wie erzeugt die gleiche Sache. Ich denke, was ich sagen will ist, dass JSX ist nur eine syntaktische, wie es ist ein Präprozessor für JavaScript viel wie PHP ist ein Präprozessor für HTML. JSC ist ein Präprozessor für JavaScript, das können Sie setzen HTML Innenseite Ihres JavaScript. Und so, wenn Sie den richtigen Transformator Das ist ein Ding namens [unverständlich], das wird zu verwandeln. Das Recht Präprozessor, es lasse Sie das tun. 

ZIELGRUPPE: [unverständlich] NEEL MEHTA: In der Regel müssen Sie nicht HTML Innenseite JavaScript setzen es sei denn, dein Werk React. Aber Sie es trotzdem tun. Ja? 

Publikum: Ich glaube, Sie beschrieben hatte Reagieren als funktionale Programmiersprache. Wir haben gelernt, C in CS50. C auch eine funktionale Sprache? NEEL MEHTA: So ist die Frage ist etwa Funktions gegenüber einem anderen Ding namens Imperativ oder prozeduralen Programmierung. Es gibt zwei Arten von Programmen beliebt. Eigenen Verfahrens aufgerufen, die ist alles über wie das Tun Befehle, und man ist funktionell, der alle ist etwa mit Funktionen und mit Eingabe und Ausgabe von diesen. Reagiert ein Funktions Paradigma. C ist ein sehr verfahrens Paradigma. 

Und als ein Beispiel, C beispielsweise Sie nicht über dieses deklarative Weise zu tun machen Sie das Programm, nicht wahr? Man muss dazu sagen, drucken Sie diese. Ändern Sie diese Datenstruktur. Drucken Sie diese. Es ist alles über Befehle. 

In Reaktion, es gibt nicht dass viele Befehle. Es ist alles über das Komponenten, die Sie zusammen. Sie sind wie Funktionen. Sie haben wie eine Funktion genannt Card, die eine Funktion daß weist Eingabe-, Ausgabe- und so ist alles Reagieren zu dieser Philosophie uns von having-- Sie Daten haben. Sie führt es durch diese Algorithmus, und es wird Ausgabe von HTML, die Sie gerade gedruckten Seite, und so muss man bauen sie Stück für Stück. 

So, um eine Metapher zu zeichnen, was Ich schon sagte, wissen Sie, wie auf Facebook, wenn Sie eine Meldung erhalten, und Sie wählen, welche Teile zu aktualisieren, das ist verfahrens. Es ist zwingend notwendig, richtig? OK, ich habe eine Nachricht. Lassen Sie uns Konto ändern es. 

Lassen Sie uns ein Pop Fenster hier. Lassen Sie uns Konto ändern es. Ziehen wir das hier. Das ist eine Verfahrensweise. 

Das ist, was Dinge wie Angular, Boost, Backbone, benutzen Sie anderen Frameworks. Reagieren funktionsfähig ist. Es ist eine ganz andere Art über Dinge nachzudenken. Es nimmt diese Idee lassen Sie uns Funktionen oder Algorithmen, werden Sie geben Daten. Es werde ausspucken, was es sein sollte, und der Computer kümmert sich mit einem Gewicht nehmen. Sie können nicht damit umgehen selbst. Heißt das, ein wenig Sinn zu machen? Ja? 

Publikum: In einer funktionalen Sprache, alles auf einmal geschieht? 

NEEL MEHTA: Nein, passieren Dinge in Ordnung. Wie hier, es gibt immer noch bestellen, aber es funktioniert nicht geschieht in der Reihenfolge, wie Lob, Befehl, Befehl. Es geschieht in der Reihenfolge der Funktion gibt Ihnen die Ausgabe. Setzen Sie, dass in einer anderen Funktion. Setzen Sie, dass in eine andere Funktion, eine weitere Funktion. 

Wenn Sie CS51 tun, werden Sie lernen, funktionale Programme ein wenig außerhalb des Umfangs dieser. Aber im Grunde, was macht Reagieren cool ist nicht nur die Einweg Datenfluß und die virtuelle Dom, sondern auch diese Idee der funktionalen Programmierung. Und funktionalen Programmierung ist sehr einfach zu komponieren und machen coole Sachen aus, und es ist sehr einfach zu denken, zu und Vernunft zu. Also ist es eine weitere gute Auslosung der React. Haben Sie weitere Fragen? Ja? 

ZIELGRUPPE: Äh, warum sollte man verwenden wir im Gegensatz zu var? 

NEEL MEHTA: So ist die Frage warum Sie verwenden können, statt var? Dies ist ein Ding namens ES6 oder ECMAScript 6. Es ist die neue Version von JavaScript. Es gibt eine Reihe von technischen Gründen, Aber lassen Sie uns ist eine bessere Version von var. 

Es ist, wie Sie Variablen deklarieren. Sie können lassen. Sie können var verwenden. Let hat eine Reihe von technischen reasons-- Sie können sie aussehen up later-- dafür, warum es besser ist. Grundsätzlich hat ES6 einige schöne neue Syntax, einige neue Features auf der Oberseite des alten JavaScript. 

So haben wir, wie fünf Minuten. Ich wollte nur reden eine weitere Sache, wirklich schnell. Wenn Sie irgendwelche Fragen hatten, lassen Sie uns darüber sprechen, nachdem diese. Aber nur damit diese bekommt der Kamera erwischt, ich habe gerade möchte ein wenig über, wie Sie sprechen, tatsächlich nutzen Reagieren in Ihre Anwendungen. 

Wenn Sie hier gehen, Facebook.GitHub.IO/react, Dieses ist die Startseite für die Reaktion, und es wird Ihnen zeigen, wie Sie tatsächlich nutzen Reagieren Sie in Ihre Seiten. Im Grunde ist es ein wenig kompliziert zu installieren versuchen reagieren. Es ist nicht so einfach, wie Sie ziehen sie einfach und legen Sie einen JavaScript drin. 

Sie müssen Ihre Transformator einzurichten, das wird, wie zuvor, schalten Sie die JSX in der normale JavaScript. Sie müssen sich, was das wird kompilieren Sie normale ES6. JavaScript gibt es eine Menge von bewegten Teilen Sie zu tun haben, so gibt es eine Sache, genannt Yeoman, Yeoman.io. Und das ist ein Kommandozeilen-Tool Das wird hilft Ihnen, Ihre Gerüst Reagieren Projekte einfach. 

So können Sie darüber lesen später, aber es gibt einige Werkzeuge dass Yeoman bietet. Sie werden Ihnen ein Reagieren erstellen lassen App mit allem, was in gebaut. Wie sie gebaut haben werde in, Komponenten eingebaut. Es müssen Ihren Transformator eingebaut. Sie haben eine Menge coole Sachen in automatisch erstellt Verwendung dieser Dinge genannt Generatoren. 

Also darüber zu lesen, wenn Sie mögen. Einfach auf Yeoman, Y-E-O-M-A-N, und gehen Sie Generatoren wie diese zu finden. Und mit Generatoren wie Davon wollen Sie nur einen ist ein paar Kommandozeilenbefehle. Es wird aus einem Gerüst gesamten Reagieren App für Sie. Es wird alles das Handbuch Rohrleitungs zu bekommen, und Grunzen Arbeit für Sie erledigt, und das ist, warum Sie gerade zu konzentrieren auf nur schriftlich in React. 

Also im Grunde den Aufbau einer Reagieren App ist nicht trivialen. Es ist alles miteinander verdrahtet, aber es sind Werkzeuge, die es für Sie tun werde. Also, wenn Sie möchten ein Reagieren app, versuchen Sie es so. Wenn Sie nur wollen, zu experimentieren, können Sie versuchen, mit diesen CodePen denn dies hat CodePen alle reagieren Verdrahtung. Ich habe die ganze Arbeit für Sie bereits getan. 

Also, wenn Sie wie ein machen wollen Produktion freizugeben Reagieren App, versuchen Sie eine dieser Generatoren. Wenn Sie nur wollen, um zu spielen rund, ist es oft nur wert wie zu versuchen, das herum auf CodePen hier. Klingt gut? Cool. 

Also das ist alles was ich habe. Auch der gesamte Code und Beispiele sind gehen, um auf dieser Webseite hier zu sein. Also, noch einmal, wir haben nicht zu sprechen zu viel Syntax der Reaktion, aber alle, die zu finden kleinen syntaktischen Angaben, es ist alles werde zur Verfügung stehen auf dieser Seite hier. 

So möchte ich empfehlen, den ersten Schritt. Legen Sie es in Ihre CodePen. Versuchen Sie arbeiten daran, es zu dem zweiten Schritt. Es gibt einen vierten Schritt, und nur sehen, wo Sie aus, dass zu bekommen. 

Mehr Fragen, zu überprüfen hin, dass die Seite oder mailen Sie mir. Das ist meine E-Mail. Aber ich würde gerne, um Ihnen jede Hilfe Fragen, die Sie zu haben React. Also, ja, das ist alles, was ich habe. Ich danke Ihnen allen sehr herzlich für beobachten oder für die Teilnahme an. Und ich werde alle Fragen zu nehmen Sie, nachdem das jetzt haben könnte. Also danke euch allen für das Ansehen.