1 00:00:00,000 --> 00:00:02,910 >> [Musikwiedergabe] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> NEEL MEHTA: Hier geht es. 4 00:00:07,275 --> 00:00:11,070 >> Nun, jeder, Willkommen auf dem Web Anwendungen der Zukunft mit React. 5 00:00:11,070 --> 00:00:11,870 Dies ist CS50. 6 00:00:11,870 --> 00:00:12,930 Mein Name ist Neel. 7 00:00:12,930 --> 00:00:17,689 Ich bin ein TA für CS50 und im zweiten Jahr am Harvard College und einen sehr, sehr 8 00:00:17,689 --> 00:00:18,730 leidenschaftliche Web-Entwickler. 9 00:00:18,730 --> 00:00:20,730 Ich bin also sehr aufregend, werden heute zu Ihnen zu sprechen, 10 00:00:20,730 --> 00:00:24,550 ob Sie hier oder zu Hause sind beobachten, zu reagieren, das ist, wieder 11 00:00:24,550 --> 00:00:27,270 wie gesagt, die Zukunft der Web-Anwendungen. 12 00:00:27,270 --> 00:00:29,055 >> So Reagieren ist ein Web-Framework. 13 00:00:29,055 --> 00:00:30,930 Und wie ich schon erzählt habe für einige Leute hier, 14 00:00:30,930 --> 00:00:33,400 ein Rahmen ist nur ein Set von Tools, die Sie verwenden können, 15 00:00:33,400 --> 00:00:35,770 zu strukturieren und Ihre Webanwendung zu bauen. 16 00:00:35,770 --> 00:00:39,010 Und Web-Anwendungen sind wiederum Websites dass sind interaktiv wie Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, was auch immer. 18 00:00:42,330 --> 00:00:45,590 >> So Facebook ist ein Web-Framework das wurde von Facebook entwickelt 19 00:00:45,590 --> 00:00:48,060 ein paar Jahre back-- reagieren. 20 00:00:48,060 --> 00:00:50,830 Es ist seit dem in verwendet Facebook auf ihre mobilen Apps 21 00:00:50,830 --> 00:00:52,460 und die Web-App, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy ist eine weitere prominente Early Adopter von React. 23 00:00:56,350 --> 00:00:58,630 >> Es ist wirklich schon immer sehr beliebt. 24 00:00:58,630 --> 00:01:03,420 Wenn Sie schon einmal Dinge wie Angular oder verwenden Rückgrat haben, ist dies aus der gleichen Familie, 25 00:01:03,420 --> 00:01:05,830 aber es seit weit hat flügeln ihre Popularität. 26 00:01:05,830 --> 00:01:06,890 Es ist das neue heiße Ding. 27 00:01:06,890 --> 00:01:09,590 Es ist wirklich, wirklich riesig. 28 00:01:09,590 --> 00:01:13,470 >> Und so reagieren, ist gut nicht nur als Web-Framework für die Erstellung von Schnittstellen. 29 00:01:13,470 --> 00:01:16,020 Es ist gut für die Erstellung von Web-Schnittstellen. 30 00:01:16,020 --> 00:01:18,350 Es gibt auch eine Sache, Reagieren die genannte Mutter 31 00:01:18,350 --> 00:01:22,200 lässt Sie den Schnittstellen zu bauen für Android und iOS 32 00:01:22,200 --> 00:01:26,390 und vielleicht andere Plattformen in der Zukunft mit nur dieselbe JavaScript-Code. 33 00:01:26,390 --> 00:01:31,130 Sie könnten genau die gleiche verwenden JavaScript-Code, um Websites zu machen, 34 00:01:31,130 --> 00:01:33,040 um Android Apps und iOS-Apps zu machen. 35 00:01:33,040 --> 00:01:35,000 >> Es ist ein sehr, sehr aufregende Zeit. 36 00:01:35,000 --> 00:01:37,070 Es ist ein wirklich, wirklich cool Gelegenheit. 37 00:01:37,070 --> 00:01:42,020 Es ist wirklich eine universelle Web- Interface-Entwicklungswerkzeug, 38 00:01:42,020 --> 00:01:44,420 so ist es eine sehr, sehr wichtig zu wissen. 39 00:01:44,420 --> 00:01:46,949 Und, wie ich erzählen Menschen bevor diese, denke ich, 40 00:01:46,949 --> 00:01:48,990 wird sich, wie wir ändern bauen Web-Apps für immer. 41 00:01:48,990 --> 00:01:55,820 So ist es vielleicht ein bisschen übertrieben, aber ich denke, es ist eine ziemlich gute Sache zu wissen. 42 00:01:55,820 --> 00:01:57,580 >> OK, so was reagieren? 43 00:01:57,580 --> 00:02:01,020 Reagieren ist ein Framework können Sie Gebrauch für Bauarbeiten Schnittstellen. 44 00:02:01,020 --> 00:02:03,240 Eine Schnittstelle ist wiederum eine Web-Seite, oder? 45 00:02:03,240 --> 00:02:06,340 Also hier ist Instagram.com, Reaktion Nutzungen. 46 00:02:06,340 --> 00:02:08,740 >> Reagieren Sie auf dem integrierten Idee der Komponenten. 47 00:02:08,740 --> 00:02:11,900 Eine Komponente ist ein HTML Element auf Steroiden, 48 00:02:11,900 --> 00:02:14,470 so ein HTML-Element ist wie ein Knopf. 49 00:02:14,470 --> 00:02:15,250 Es ist ein Absatz. 50 00:02:15,250 --> 00:02:17,500 Es ist ein Header, nicht wahr? 51 00:02:17,500 --> 00:02:22,740 Und Instagram wird diese verwenden, aber es werden auch Komponenten der Reaktion zu verwenden. 52 00:02:22,740 --> 00:02:25,740 >> Reagieren Komponenten frisierten HTML-Elemente 53 00:02:25,740 --> 00:02:28,100 , die ihr eigenes Verhalten haben in ihnen enthalten ist. 54 00:02:28,100 --> 00:02:31,800 So, als ein Beispiel, wir hätten ein Zeitelement, eine Zeitkomponente, 55 00:02:31,800 --> 00:02:34,095 was wird dergleichen enthalten der Zeitstempel, wissen Sie, 56 00:02:34,095 --> 00:02:37,170 eine Profilkomponente, das Profil-Bild enthalten 57 00:02:37,170 --> 00:02:38,820 und den Namen der Person. 58 00:02:38,820 --> 00:02:42,930 Es kann eine wie Zähler, haben die kann wie die Anzahl von Leuten zu zählen, 59 00:02:42,930 --> 00:02:45,610 und wenn Sie darauf klicken, wird es Erhöhung der Zahl der Gleichen. 60 00:02:45,610 --> 00:02:48,200 Eine Komponente ist nur ein Bündel von HTML-Code, 61 00:02:48,200 --> 00:02:50,520 hat einige Funktionen, in der es eingewickelt. 62 00:02:50,520 --> 00:02:53,770 Also ist es wie ein HTML-Element auf Steroiden, wie ich schon sagte. 63 00:02:53,770 --> 00:02:56,270 Sie können diese Komponenten zu nehmen, und Sie können sie zusammen 64 00:02:56,270 --> 00:02:59,060 um neue Komponenten zu machen, in diesem Fall wird ein Beitrag Komponente, 65 00:02:59,060 --> 00:03:00,505 Welche enthält all dieses Zeug. 66 00:03:00,505 --> 00:03:04,050 Es wäre Zeit enthalten, Profil, LikeCounter, vielleicht Kommentar 67 00:03:04,050 --> 00:03:06,100 und vielleicht das Bild selbst. 68 00:03:06,100 --> 00:03:10,810 Und so Web-Anwendungen sind nur durch die Einnahme gebaut Komponenten und setzen sie zusammen. 69 00:03:10,810 --> 00:03:15,620 Instagram-Feed ist nichts anderes als ein Haufen Beiträge einer nach dem anderen, 70 00:03:15,620 --> 00:03:19,032 Jede Nachricht enthält, wie die Zeit, Profil, LikeCounter, und so weiter. 71 00:03:19,032 --> 00:03:20,490 Es ist ein bisschen wie ein Haus bauen. 72 00:03:20,490 --> 00:03:22,660 Sie müssen nicht beim Aufbau der Haus von oben nach unten. 73 00:03:22,660 --> 00:03:24,960 Sie nehmen Sie components-- nehmen wie das Bad. 74 00:03:24,960 --> 00:03:28,320 Sie nehmen die bedroom-- Sie sie Stick zusammen, und Sie haben eine neue Komponente. 75 00:03:28,320 --> 00:03:29,760 Sie haben einen neuen Teil des Hauses. 76 00:03:29,760 --> 00:03:32,860 >> So reagieren rundum gebaut diese Idee von Komponenten, 77 00:03:32,860 --> 00:03:36,600 sind interaktiv, das deklarative sind. 78 00:03:36,600 --> 00:03:39,650 Wie Sie gerade sagen, was ein Profil ist, und es es macht. 79 00:03:39,650 --> 00:03:40,600 Sie sind zusammensetzbare. 80 00:03:40,600 --> 00:03:43,880 Sie können eine Zeit und ein Profil zu nehmen, setzen sie zusammen, machen etwas besser. 81 00:03:43,880 --> 00:03:47,770 Und sie sind wiederverwendbar, so, wenn Sie den Quellcode für eine Stelle, 82 00:03:47,770 --> 00:03:49,440 Sie könnten die überall einbetten. 83 00:03:49,440 --> 00:03:53,160 >> Sie können einen Instagram einbetten was auf Ihrer eigenen Webseite. 84 00:03:53,160 --> 00:03:56,830 Sie können in Facebook einbinden, zum Beispiel, solange es verwendet Reagieren ebenso. 85 00:03:56,830 --> 00:04:00,360 So Komponenten sind wirklich, wirklich, wirklich leistungsfähige Bausteine ​​des Web- 86 00:04:00,360 --> 00:04:04,180 dass kann überall eingesetzt und legte sein zusammen, um neue Bausteine ​​zu machen. 87 00:04:04,180 --> 00:04:07,159 Das ist das sehr, sehr hohe Übersicht. 88 00:04:07,159 --> 00:04:09,200 Also, noch einmal, wenn Sie Fragen an jedem Punkt 89 00:04:09,200 --> 00:04:14,470 über die Philosophie der Reaktor, der Codierung, um mich zu stoppen, und lassen Sie mich wissen. 90 00:04:14,470 --> 00:04:18,420 >> OK, zu reagieren ist so cool, weil es hat eine andere Art der Betrachtung 91 00:04:18,420 --> 00:04:19,870 , wie Sie Web-Anwendungen zu bauen. 92 00:04:19,870 --> 00:04:23,620 Sie haben wahrscheinlich schon von MVC, ein hören Modell, das Sie steuern in CS50 oder was auch immer 93 00:04:23,620 --> 00:04:25,940 weitere Sondierung Klassen, die Sie verwenden. 94 00:04:25,940 --> 00:04:29,000 Und die meisten Frameworks sind um die Idee der MVC gebaut. 95 00:04:29,000 --> 00:04:30,410 Reagiert nicht. 96 00:04:30,410 --> 00:04:32,980 Reagieren auf der Idee aufgebaut von unidirektionalen Datenfluß 97 00:04:32,980 --> 00:04:36,510 wie von diesem Diagramm oder Grafik hier gesehen. 98 00:04:36,510 --> 00:04:38,260 >> Grundsätzlich haben Sie eine Datenquelle. 99 00:04:38,260 --> 00:04:42,380 Und die Datenquelle entscheidet wie man das Layout bestimmte Komponenten. 100 00:04:42,380 --> 00:04:45,452 Und die Komponenten dann, wenn sie sich ändern, 101 00:04:45,452 --> 00:04:47,160 sie werden Ihnen sagen die Datenquelle zu ändern. 102 00:04:47,160 --> 00:04:49,350 >> Um die Instagram verwenden Beispielsweise könnten Sie haben 103 00:04:49,350 --> 00:04:52,050 eine Liste der Post Objekte wie in einer Datenbank oder so etwas. 104 00:04:52,050 --> 00:04:53,310 Daß die Daten. 105 00:04:53,310 --> 00:04:57,600 Und dann unseren Beitrag Komponenten werden, dass die Daten zu nehmen, 106 00:04:57,600 --> 00:05:01,830 und verwenden Sie diese Daten zu machen etwas auf dem Bildschirm. 107 00:05:01,830 --> 00:05:04,300 Was der Pfeil Das ist, Aus Daten-Komponente, 108 00:05:04,300 --> 00:05:07,930 und dass dieselben Daten verwendet wird um eine Reihe von Komponenten zu machen. 109 00:05:07,930 --> 00:05:10,290 >> In Facebook Messenger für beispielsweise die Reaktion ist, 110 00:05:10,290 --> 00:05:13,410 Sie könnten eine Liste haben Meldungen als Datenquelle. 111 00:05:13,410 --> 00:05:15,927 Und das nicht machen würden nur die Liste der Nachrichten 112 00:05:15,927 --> 00:05:17,510 sondern auch die Liste der Freunde, die Sie haben. 113 00:05:17,510 --> 00:05:19,200 Sie haben die Anzahl ungelesener. 114 00:05:19,200 --> 00:05:23,330 Vielleicht auch machen das, was Facebook das ist an der Unterseite des Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Die gleichen Daten ein Single Source of Truth 116 00:05:25,610 --> 00:05:28,290 und das verursacht eine Menge Komponenten gemacht werden. 117 00:05:28,290 --> 00:05:30,290 Und immer, wenn einer von denen, Komponenten geändert wird, 118 00:05:30,290 --> 00:05:32,320 es geht zurück und ändert sich die Datenquelle. 119 00:05:32,320 --> 00:05:33,460 >> Sie senden eine Nachricht, nicht wahr? 120 00:05:33,460 --> 00:05:34,780 Das ändert sich die Datenquelle. 121 00:05:34,780 --> 00:05:39,490 Sie lesen Ihre Nachrichten, so dass Sie setzen ungelesenen auf 0. 122 00:05:39,490 --> 00:05:41,136 Das ändert sich die Datenquelle. 123 00:05:41,136 --> 00:05:44,010 Und beachten Sie, dass alle diese von einem Pfeil zurück gehen, um die gleichen Daten 124 00:05:44,010 --> 00:05:47,662 Quelle, so dass Sie wissen, bei einer bestimmten Datenmenge, 125 00:05:47,662 --> 00:05:49,870 Sie wissen genau, was der Seite aussehen würde. 126 00:05:49,870 --> 00:05:50,700 Es ist deterministisch. 127 00:05:50,700 --> 00:05:53,451 Sie wissen, da bestimmte Daten, was wird die Seite aussehen würde. 128 00:05:53,451 --> 00:05:56,158 Sie können vorhersagen, wie es zu gehen sich verhalten und wie die Dinge laufen 129 00:05:56,158 --> 00:05:57,650 zu arbeiten, wenn sie zusammen. 130 00:05:57,650 --> 00:06:00,410 >> Und wenn ich eine Million Bauteile hatten Hier wäre es das gleiche verhalten, nicht wahr? 131 00:06:00,410 --> 00:06:02,290 Sie wollte keins haben, seltsame Zusammenhänge. 132 00:06:02,290 --> 00:06:04,120 Eine Daten gerendert eine Million Bauteile. 133 00:06:04,120 --> 00:06:06,879 Eine Million Komponenten könnten gehen Sie zurück und bearbeiten Sie die Daten. 134 00:06:06,879 --> 00:06:07,920 Und dies ist sehr schön. 135 00:06:07,920 --> 00:06:10,870 Wir bauen zusammensetzbare, einfach skalierbare Web-Anwendungen. 136 00:06:10,870 --> 00:06:13,150 >> Sie haben eine Datenquelle, die Quelle der Wahrheit. 137 00:06:13,150 --> 00:06:15,790 Das sagt Ihre Komponenten wie man das Layout der Seite, 138 00:06:15,790 --> 00:06:18,190 und die Komponenten hand Interaktion. 139 00:06:18,190 --> 00:06:20,150 Und wenn sie ändern möchten Dinge, gehen Sie einfach zurück 140 00:06:20,150 --> 00:06:21,750 und sagen Sie die Datenquelle zu ändern. 141 00:06:21,750 --> 00:06:22,850 Sinn ergeben? 142 00:06:22,850 --> 00:06:26,010 So reagieren dreht sich alles um Verständnis how, um eine Komponente zu bauen 143 00:06:26,010 --> 00:06:29,540 und wie Sie Ihre Komponente zu machen Interaktion mit der Außenwelt. 144 00:06:29,540 --> 00:06:31,850 >> Herstellung der Komponente interagieren mit der Außenwelt 145 00:06:31,850 --> 00:06:34,490 verwendet eine andere Technik genannt Fluss, der 146 00:06:34,490 --> 00:06:36,872 ist ein Framework, das ist auf der Oberseite des reagieren. 147 00:06:36,872 --> 00:06:38,330 Wir gehen nicht, darüber zu sprechen. 148 00:06:38,330 --> 00:06:42,990 Wir werden mehr darüber zu sprechen, da Daten, wie kann man ein Bauteil zu machen? 149 00:06:42,990 --> 00:06:47,010 >> Und so reagieren, ist wirklich cool, weil man kann es mit jedem Backend Sie wollen. 150 00:06:47,010 --> 00:06:50,480 Wenn Sie wie ein Python-Backend haben, wenn Ihre Python kann ausspucken einige Daten, 151 00:06:50,480 --> 00:06:51,610 Reagieren kann es machen. 152 00:06:51,610 --> 00:06:54,700 Wenn Sie keine JS Ausgänge von Daten, Reaktion macht es. 153 00:06:54,700 --> 00:06:56,890 Rubin Schienen mit Daten, Reaktion macht es. 154 00:06:56,890 --> 00:07:01,860 >> So ist im Grunde ein Reagieren Web --neueste ein vorderes Ende mit Komponenten 155 00:07:01,860 --> 00:07:03,910 für jede Datenquelle zu löschen. 156 00:07:03,910 --> 00:07:07,145 Und so geht aus der Datenquelle zu Komponenten reagieren ist recht einfach. 157 00:07:07,145 --> 00:07:08,770 In die andere Richtung ist etwas schwieriger. 158 00:07:08,770 --> 00:07:10,462 Das nutzt Flux wie ich bereits erwähnt. 159 00:07:10,462 --> 00:07:11,420 Wir werden nicht in das zu bekommen. 160 00:07:11,420 --> 00:07:13,740 Wir werden mehr auf das konzentrieren, Daten-zu-Komponentenseite. 161 00:07:13,740 --> 00:07:15,880 Auf diese Weise Sie machen können cool, spaß Web-Apps. 162 00:07:15,880 --> 00:07:19,870 Es wird nicht die Außenwelt beeinflussen für jetzt, aber das ist eine andere Geschichte. 163 00:07:19,870 --> 00:07:22,210 >> OK, also, wenn Sie hier waren für meine letzten Seminar 164 00:07:22,210 --> 00:07:26,610 Sie werden, dass der gesamte Code für die wissen, die heutige Diskussion wird sich unter dieser URL zu sein 165 00:07:26,610 --> 00:07:29,320 hier, sorry, diese URL hier. 166 00:07:29,320 --> 00:07:32,730 Und im Grunde werden wir zu gehen, durch vier Schritte, vielleicht fünf, 167 00:07:32,730 --> 00:07:33,510 wahrscheinlich nicht fünf. 168 00:07:33,510 --> 00:07:37,300 Wir werden durch vier Schritten zu bewegen des Aufbaus einer Probe zu reagieren App. 169 00:07:37,300 --> 00:07:39,550 Und so die ganze Quelltext für jeden Schritt des Weges 170 00:07:39,550 --> 00:07:42,216 wird zu Recht hier zu sein, so dass, wenn Sie zusammen zu Hause folgenden bist, 171 00:07:42,216 --> 00:07:43,991 fühlen sich frei, diesen Code durchgehen. 172 00:07:43,991 --> 00:07:46,740 Wenn Sie folgende entlang hier bist, Wir zeigen es auf dem Bildschirm, 173 00:07:46,740 --> 00:07:47,739 also nicht darum kümmern. 174 00:07:47,739 --> 00:07:50,930 Aber wenn Sie zu Hause sind, fühlen frei, diese Website zu besuchen. 175 00:07:50,930 --> 00:07:56,400 Und, Ja, Sie sollten in der Lage zu bekommen alle Code, den Sie jemals brauchen hier. 176 00:07:56,400 --> 00:08:01,380 So ist es eine gute Spickzettel sowie für Ihre Zukunft Abenteuer mit React. 177 00:08:01,380 --> 00:08:04,490 Cool, so dass, wenn jeder, der hier ist, und selbst wenn Sie zu Hause sind, 178 00:08:04,490 --> 00:08:11,580 Pull-up dieser Website erklären is.gd/cs50react, kein Kapital, keine Unterstrich, kein gar nichts. 179 00:08:11,580 --> 00:08:15,849 >> Hier finden Sie eine Seite, die aussieht ein bisschen wie dieses. 180 00:08:15,849 --> 00:08:17,140 Dies ist ein Ding namens CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen ist eine kollaborative Kodierungsumgebung 182 00:08:20,030 --> 00:08:23,364 mit dem ich Code hier zu schreiben, und es wird automatisch an Sie gesendet werden. 183 00:08:23,364 --> 00:08:24,780 Und auf diese Weise kann ich Code schreiben. 184 00:08:24,780 --> 00:08:26,920 Ich kann Code hier laufen. 185 00:08:26,920 --> 00:08:33,470 >> Für example-- und wenn es reloads-- sehen Ich bin mit JavaScript-Code auf der Seite 186 00:08:33,470 --> 00:08:36,390 genau hier, und es wird automatisch Rendern einer Web-Seite 187 00:08:36,390 --> 00:08:37,980 Mit dieser JavaScript-Code. 188 00:08:37,980 --> 00:08:40,039 Und so ist dies ein Weg, für uns zu versuchen, Code- 189 00:08:40,039 --> 00:08:43,089 wirklich schnell, ohne zu verwenden unsere ID oder nutzen Sie unsere lokalen Rechner 190 00:08:43,089 --> 00:08:44,290 oder Wasauchimmer. 191 00:08:44,290 --> 00:08:47,670 Es ist eine sehr schnelle Möglichkeit für Sie, Mockup und testen Sie verschiedene Arten von Code. 192 00:08:47,670 --> 00:08:50,560 >> Also werde ich zu nehmen Beispiel-Code, hier ausgedrückt. 193 00:08:50,560 --> 00:08:52,374 Wir werden durch sie zu arbeiten. 194 00:08:52,374 --> 00:08:54,540 Und wenn Sie zu Hause sind, können Sie Dies kann, so gut zu ziehen. 195 00:08:54,540 --> 00:08:57,530 Und ich bereits installiert haben Reagieren Sie hier, so können Sie einfach 196 00:08:57,530 --> 00:09:00,770 schreib Code hier, und Probieren Sie es als Ihre eigenen Spielplatz. 197 00:09:00,770 --> 00:09:04,940 >> Ja, wenn jeder an öffnen Sie diesen Link hier. 198 00:09:04,940 --> 00:09:08,080 Bitte geben Sie mir einen Daumen up, sobald Sie es geöffnet haben. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Cool, cool cool. 201 00:09:13,770 --> 00:09:16,914 Hier ist nichts für jetzt, aber wir werden sehr bald ändern. 202 00:09:16,914 --> 00:09:21,250 >> OK, so Reagieren ist ein JavaScript- Bibliothek, und als solche, 203 00:09:21,250 --> 00:09:24,480 erfordert Kenntnisse über Javascript, das ist der Web-Programmiersprache. 204 00:09:24,480 --> 00:09:27,660 Und es ist für andere Dinge verwendet jetzt auch, aber vor allem die Web-Entwicklung 205 00:09:27,660 --> 00:09:32,040 Sprache, also, wenn Sie nicht vertraut sind daß, lesen Sie eine Website namens JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 Es ist wunderbar. 207 00:09:32,700 --> 00:09:34,240 Sie können JavaScript lernen in einer halben Stunde. 208 00:09:34,240 --> 00:09:34,990 Es ist unglaublich. 209 00:09:34,990 --> 00:09:36,420 >> Versuch es zu lesen. 210 00:09:36,420 --> 00:09:39,960 Zudem ist eine Menge von HTML hier wegen wir die Gestaltung von Web-Seiten natürlich. 211 00:09:39,960 --> 00:09:43,890 Also, wenn Sie nicht mit sind HTML Besuche HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Ich denke, dass das Lernen Reagieren ein Millionen Mal einfacher, wenn Sie bereits 213 00:09:46,520 --> 00:09:47,892 wissen die Bausteine. 214 00:09:47,892 --> 00:09:50,600 Wenn Sie die Komponenten haben, ist es einfach, eine größere Komponente zu machen. 215 00:09:50,600 --> 00:09:51,860 Das ist, reagieren die Sprache für Sie. 216 00:09:51,860 --> 00:09:54,270 >> Also zögern Sie nicht und geben Sie diese Dinge ein Lese. 217 00:09:54,270 --> 00:09:55,070 Pause dieses Video. 218 00:09:55,070 --> 00:09:57,440 Geben Sie ihm einen Lese wenn Sie zu Hause, wenn Sie nicht 219 00:09:57,440 --> 00:10:00,794 mit HTML oder JavaScript vertraut 220 00:10:00,794 --> 00:10:02,960 OK, also das, was wir zu gehen zu tun ist, wir werden machen 221 00:10:02,960 --> 00:10:06,470 ein sehr einfaches Flashcard App mit React. 222 00:10:06,470 --> 00:10:08,210 Wir werden eine Flashcard haben. 223 00:10:08,210 --> 00:10:09,880 Sie können die Karte vor und zurück blättern. 224 00:10:09,880 --> 00:10:12,399 Und wir haben auch eine Liste der alle Karten, die wir haben, 225 00:10:12,399 --> 00:10:14,190 und wenn wir etwas Zeit ehrgeizig, wir sein könnten 226 00:10:14,190 --> 00:10:17,060 in der Lage, um zwischen Autos anklicken. 227 00:10:17,060 --> 00:10:20,360 >> Aber das ist, von bloßen Knochen, ein sehr einfaches Reagieren App. 228 00:10:20,360 --> 00:10:22,560 Und so ist dies tatsächlich nicht trivial zu implementieren, 229 00:10:22,560 --> 00:10:26,030 aber wir werden, um zu zeigen, dass, wenn Sie tun, dies, ist es sehr, sehr einfach, sie zu verlängern 230 00:10:26,030 --> 00:10:27,680 wenn anderen Menschen zu helfen Sie mit ihm. 231 00:10:27,680 --> 00:10:33,750 So werden wir in vier Schritten zu gehen von Grund auf aufbauen. 232 00:10:33,750 --> 00:10:36,740 >> OK, so dass die vier Schritte, werden wir Beginnen Sie mit dem ersten Schritt. 233 00:10:36,740 --> 00:10:39,790 Der erste Schritt sein wird, Aufbau Ihrer ersten Komponente. 234 00:10:39,790 --> 00:10:44,830 Wie ich schon sagte, eine Komponente in Reagieren ist nur ein HTML-Element auf Steroiden. 235 00:10:44,830 --> 00:10:49,660 Es gibt die HTML- und einige Verhalten, und es 236 00:10:49,660 --> 00:10:52,600 wird, wie die Menschen angeben, kann mit ihr zu interagieren, wie 237 00:10:52,600 --> 00:10:54,270 es wäre internen Zustand zu haben. 238 00:10:54,270 --> 00:10:57,630 Wie eine Taste wie zB wie viele wissen, Mal ist es beispielsweise angeklickt wurde, 239 00:10:57,630 --> 00:11:01,010 und es wird, wie man sich selbst auslegen. 240 00:11:01,010 --> 00:11:04,430 >> Lassen Sie uns also gehen Sie voran und bauen unsere erste Komponente mit Hilfe von JavaScript. 241 00:11:04,430 --> 00:11:09,711 Also, wenn die Syntax sieht seltsam, das ist, weil es eine Art ist. 242 00:11:09,711 --> 00:11:11,710 Also, noch einmal, wir gehen um eine Variable mit dem Namen machen, 243 00:11:11,710 --> 00:11:14,580 App mit dem Schlüsselwort lassen, wodurch eine Variable, 244 00:11:14,580 --> 00:11:18,210 Lassen App gleich React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> Reagieren ist eine Bibliothek und hat das erstellen Klassenfunktion. 246 00:11:22,609 --> 00:11:24,400 Und diese Funktion ein wenig Code, den Sie 247 00:11:24,400 --> 00:11:29,090 verwenden können, um ein neues Art der Komponente reagieren. 248 00:11:29,090 --> 00:11:32,780 Und so React.createClass macht eine Komponente, 249 00:11:32,780 --> 00:11:35,270 und diese Komponente in der Lage, Dinge zu tun. 250 00:11:35,270 --> 00:11:40,460 Die Hauptsache, es tun können, ist zu machen etwas, übertragen sie in Abhängigkeit. 251 00:11:40,460 --> 00:11:44,500 >> Wieder, wenn dieser Index nicht offensichtlich ist Sie, empfehle ich Ihnen auf JS für Katzen gehen 252 00:11:44,500 --> 00:11:45,682 und check it out. 253 00:11:45,682 --> 00:11:47,710 Ist, dass in gut genug gezoomt? 254 00:11:47,710 --> 00:11:48,490 Cool. 255 00:11:48,490 --> 00:11:50,670 >> So dass jeder Komponentenbedarf um eine Renderfunktion haben. 256 00:11:50,670 --> 00:11:53,010 Die Render-Funktion sagt: Was soll ich auf dem Bildschirm zu drucken? 257 00:11:53,010 --> 00:11:54,760 Aber die Komponente nutzlos, wenn dies nicht der Fall 258 00:11:54,760 --> 00:11:58,060 wissen, was auf dem Bildschirm zu drucken, so müssen Sie eine Renderfunktion haben. 259 00:11:58,060 --> 00:12:01,904 >> So in der Render-Sache, die Sie nur müssen einige HTML zurückzukehren. 260 00:12:01,904 --> 00:12:03,820 Und was cool ist, dass es gibt ein Ding namens 261 00:12:03,820 --> 00:12:08,660 JSX, die eine Verlängerung der ist JavaScript, die von verwendet wird, zu reagieren. 262 00:12:08,660 --> 00:12:11,845 Es lässt Sie HTML innen schreiben Ihrer JavaScript, die 263 00:12:11,845 --> 00:12:13,970 klingt irgendwie seltsam, wenn Sie zuerst darüber nachdenken, 264 00:12:13,970 --> 00:12:15,553 aber es macht sehr viel Sinn danach. 265 00:12:15,553 --> 00:12:17,430 So können wir das tun. 266 00:12:17,430 --> 00:12:21,360 Wenn Sie mit HTML vertraut sind, wissen, dass ich wir haben ein div mit einem Allzweck- 267 00:12:21,360 --> 00:12:22,790 Behälter für Sachen. 268 00:12:22,790 --> 00:12:26,380 Wir können ein div zurückkehren, und im Inneren Dieses div, können wir Sachen setzen. 269 00:12:26,380 --> 00:12:32,390 >> Also lassen Sie uns sagen, dass wir nur machen wollen a straight-up Flashcard für den Moment. 270 00:12:32,390 --> 00:12:34,890 Die Flashcard, würde ich sagen, wird eine Frage-und Antwort. 271 00:12:34,890 --> 00:12:37,530 Also in diesem div, lassen Sie uns drucken Sie eine Nummer 272 00:12:37,530 --> 00:12:42,155 das sagt question-- Was ist der ultimative Antwort auf das Leben, das Universum? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 Und dann ist die Antwort sein wird, natürlich, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Das kam nicht gut überhaupt. 277 00:12:59,730 --> 00:13:04,164 Ja, so dass im Grunde kann man wirklich HTML zu schreiben in Ihrem JavaScript. 278 00:13:04,164 --> 00:13:06,330 Und dies wird sein, hinaus auf dem Bildschirm ausgegeben. 279 00:13:06,330 --> 00:13:08,250 Lassen Sie uns also probieren Sie es aus. 280 00:13:08,250 --> 00:13:09,520 >> So haben wir unsere Komponenten. 281 00:13:09,520 --> 00:13:12,210 Wir müssen sagen, reagieren zu setzen das Bauteil auf dem Bildschirm 282 00:13:12,210 --> 00:13:18,990 so React.render, so bemerken, dass wir App behandeln wie jedes andere Element. 283 00:13:18,990 --> 00:13:21,010 Wir schreiben es, wie es ein HTML-Element war. 284 00:13:21,010 --> 00:13:25,100 Wie anstatt zu sagen, wie img für Bild oder p für Absatz, 285 00:13:25,100 --> 00:13:28,120 Sie schreiben, App, also App wie ein HTML-Element behandelt. 286 00:13:28,120 --> 00:13:30,380 Wie ich schon sagte, es ist ein Element auf Steroiden. 287 00:13:30,380 --> 00:13:32,870 >> So können Sie App zu machen, und Sie geben ihm einen Platz dafür. 288 00:13:32,870 --> 00:13:37,170 Und das ist, wie Sie sagen Sie ihm, wohin damit. 289 00:13:37,170 --> 00:13:46,200 Ich habe eine einfache div auf die erstellte Seite mit der ID-Seite aufgerufen, 290 00:13:46,200 --> 00:13:48,300 und das ist, wo die Element los zu gehen. 291 00:13:48,300 --> 00:13:49,841 >> Und wir werden nicht mit HTML laufen. 292 00:13:49,841 --> 00:13:53,145 Im Grunde ist dies, um loslegen Innere dieser Seite Element setzen 293 00:13:53,145 --> 00:13:54,270 dass wir auf dem Bildschirm. 294 00:13:54,270 --> 00:13:59,210 So läuft es diesen Code, und es zieht diese was auf dem Bildschirm, so sind wir hier. 295 00:13:59,210 --> 00:14:01,770 Wir haben unsere erste Reaktion Komponente. 296 00:14:01,770 --> 00:14:08,000 >> Also nur als Erinnerung, die wir leicht gemacht eine neue Art der Komponente, nicht wahr? 297 00:14:08,000 --> 00:14:10,145 Das ist, was die React.createClass. 298 00:14:10,145 --> 00:14:12,680 Und dass die Komponente, die wir sagte sie, was sie tun sollten. 299 00:14:12,680 --> 00:14:15,590 Immer wenn diese Komponente auf den Bildschirm gedruckt werden, 300 00:14:15,590 --> 00:14:19,300 es wird aus der div mit gedruckt die beiden Absätzen darin. 301 00:14:19,300 --> 00:14:24,460 >> Und was wir getan haben, eine neue App haben wir mit dem Winkel App Notation. 302 00:14:24,460 --> 00:14:27,160 Wir sagten ihm, es zu setzen im Inneren des Seitenelement. 303 00:14:27,160 --> 00:14:29,867 Und so, was ich tat, schuf sie eine neue App mit dieser Vorlage. 304 00:14:29,867 --> 00:14:31,200 Und dann sagte ich, um es zu machen. 305 00:14:31,200 --> 00:14:33,680 So sagte er, OK, App, was soll ich ausdrucken? 306 00:14:33,680 --> 00:14:36,970 App sagt, gehen Sie drucken Sie eine div mit zwei Absätzen darin. 307 00:14:36,970 --> 00:14:40,420 Und voila, gibt es unsere div mit beiden Absätzen darin. 308 00:14:40,420 --> 00:14:43,180 Sinn so weit? 309 00:14:43,180 --> 00:14:46,690 >> So wiederum die ganze Herausforderung Reagieren ist nur zu wissen, wie Komponenten zu machen. 310 00:14:46,690 --> 00:14:48,500 Wie man das machen Komponenten arbeiten zusammen. 311 00:14:48,500 --> 00:14:51,780 Jetzt, wo wir unser erstes gemacht Komponente, gehen wir zurück 312 00:14:51,780 --> 00:14:54,284 und stellen Komponenten anpassbar. 313 00:14:54,284 --> 00:14:56,700 So können Sie in HTML wissen, wie Sie Ihre Schaltflächen Klassen geben? 314 00:14:56,700 --> 00:14:59,146 Sie können Ihre Anker geben dem href. 315 00:14:59,146 --> 00:15:00,770 Sie können Ihre Eingaben geben ein Typ, nicht wahr? 316 00:15:00,770 --> 00:15:04,740 Sie können mehrere benutzerdefinierte geben Eigenschaften, um alle Ihre Elemente 317 00:15:04,740 --> 00:15:06,490 um es interessanter. 318 00:15:06,490 --> 00:15:09,030 Und wir wirklich tun können genau dasselbe. 319 00:15:09,030 --> 00:15:17,500 >> Also lassen Sie uns sagen, dass wir wollen, dass unsere App zu gehen macht jede Karte. 320 00:15:17,500 --> 00:15:19,630 Im Moment haben wir nur gerendert eine hartkodierte Karte. 321 00:15:19,630 --> 00:15:22,530 Wir wissen, es gibt nur einen Karte kann es tun, so sind wir 322 00:15:22,530 --> 00:15:25,960 werde versuchen, und ändern Sie das jetzt so dass wir nur geben es einige Karte. 323 00:15:25,960 --> 00:15:27,410 Es wird drucken Sie die Karte. 324 00:15:27,410 --> 00:15:29,380 >> Sie sollten versuchen, und machen Sie Ihren Komponenten eine sehr allgemeine Zwecke. 325 00:15:29,380 --> 00:15:31,654 Also diese Art, wie ich eine E-Mail konnte mein Freund und sein mögen, 326 00:15:31,654 --> 00:15:33,820 was Flashcard haben Sie, nur speisen ihn in hier, 327 00:15:33,820 --> 00:15:35,290 und es wird es selbst zu tun. 328 00:15:35,290 --> 00:15:37,650 Sie können andere setzen Dinge in Ihrem eigenen App. 329 00:15:37,650 --> 00:15:40,600 >> Aber zunächst wollen wir brechen diese in zwei Komponenten, 330 00:15:40,600 --> 00:15:44,500 aber wir, um die Karte zu trennen wollen, Druckteil von der eigentlichen App Teil. 331 00:15:44,500 --> 00:15:46,660 Also, was wir tun können, ist, dass wir Dies kann aus dem App ändern 332 00:15:46,660 --> 00:15:51,300 um Card, nur ein neuen Namen für die App, 333 00:15:51,300 --> 00:15:54,450 und wir können eine neue zu machen Komponente namens App, 334 00:15:54,450 --> 00:15:56,336 nicht mit dem alten App verwechselt werden. 335 00:15:56,336 --> 00:16:00,730 Wir haben die createClass bekam, und wie in HTML, 336 00:16:00,730 --> 00:16:03,590 Sie nisten Reagieren Komponenten nach innen von einander. 337 00:16:03,590 --> 00:16:16,430 >> Also in diesem Render-Funktion, Funktionsrückgabecard, 338 00:16:16,430 --> 00:16:18,234 und dies ist genau das gleiche. 339 00:16:18,234 --> 00:16:19,400 Sehen Sie, warum es ist die gleiche Sache? 340 00:16:19,400 --> 00:16:22,590 Statt nur die Rendering-Anwendung, die hat den div und Paarung in der es, 341 00:16:22,590 --> 00:16:26,194 die App macht die Card und die Card macht die div und Absatz. 342 00:16:26,194 --> 00:16:29,110 Also das ist unser erstes Beispiel Schachtelelemente innerhalb der jeweils anderen. 343 00:16:29,110 --> 00:16:32,177 Ist das sinnvoll? 344 00:16:32,177 --> 00:16:33,760 Also, noch einmal, wir haben ein Cardelement. 345 00:16:33,760 --> 00:16:37,250 Wir haben app Elemente dass es größer als. 346 00:16:37,250 --> 00:16:40,990 >> OK, so wollen wir unsere CardView-- wenn Sie geben einen guten Card eine bestimmte Karte, 347 00:16:40,990 --> 00:16:43,370 es wird für Sie drucken, richtig? 348 00:16:43,370 --> 00:16:48,050 Also zuerst, wir brauchen, um eine Karte zu machen, Lassen Sie uns also einen Kartenobjekt. 349 00:16:48,050 --> 00:17:02,930 Also lassen Sie meine Karte equal-- wenn Sie alle vertraut sind, 350 00:17:02,930 --> 00:17:05,260 das ist nur die Notation Herstellung Objekt in JavaScript. 351 00:17:05,260 --> 00:17:09,280 Es ist wie eine Art von Struktur in C, so haben wir eine Karte, 352 00:17:09,280 --> 00:17:15,920 und so jetzt können wir diese Karte als übergeben eine Eigenschaft oder als Attribut in HTML 353 00:17:15,920 --> 00:17:17,290 Terminologie, um unsere App. 354 00:17:17,290 --> 00:17:20,210 Also haben wir dieses, App tun können Karte gleich Mycard. 355 00:17:20,210 --> 00:17:23,200 >> Sie wissen, wie in der Eingangs, können Sie tun input type gleich Text oder Button 356 00:17:23,200 --> 00:17:25,240 Klasse ist gleich für Bootstrap-btn ,? 357 00:17:25,240 --> 00:17:29,500 Dieselbe Idee, App Karte equals-- du musst Klammern gesetzt hier-- 358 00:17:29,500 --> 00:17:33,830 App Karte gleich Mycard, so dass diese sagt, dass wir diese Karte zum Gegenstand haben. 359 00:17:33,830 --> 00:17:39,149 Ich werde es als einen Durchlauf Eigenschaft auf den App-Komponente. 360 00:17:39,149 --> 00:17:41,440 Und diese App Komponente in der Lage, darauf zuzugreifen und tun 361 00:17:41,440 --> 00:17:43,580 interessante Sachen mit ihm. 362 00:17:43,580 --> 00:17:47,650 >> Also unsere app wird sein, bei einer Karte, so dass für jetzt, 363 00:17:47,650 --> 00:17:49,980 lassen Sie uns die App nur geben die Karte mit dem Card 364 00:17:49,980 --> 00:17:53,110 selbst da, wie die app ist nicht gehen zu wissen, was damit zu tun hat, 365 00:17:53,110 --> 00:17:54,850 so dass wir nur geben Sie es an die Card. 366 00:17:54,850 --> 00:18:00,050 So werden wir es den Pass Ebenso entspricht Karte, 367 00:18:00,050 --> 00:18:05,426 und so kann jede Komponente Zugriff auf den Dinge, die es gegeben ist. 368 00:18:05,426 --> 00:18:07,800 Sie können die Eigenschaften zugreifen , die ihm gegeben worden sind 369 00:18:07,800 --> 00:18:09,470 mit dieser Syntax, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Was passiert also, hier ist haben Sie die Mycard Objekt. 372 00:18:14,920 --> 00:18:18,250 Sie geben es in die App Verwendung App Karte gleich Mycard. 373 00:18:18,250 --> 00:18:21,420 Diese Karte Objekt, um Ihre Anwendung gegeben. 374 00:18:21,420 --> 00:18:24,400 Die App kann darauf zugreifen wie this.props.card. 375 00:18:24,400 --> 00:18:28,780 Es ist ein bisschen wie ein Bild weiß, was es ist Quelle. 376 00:18:28,780 --> 00:18:31,972 >> Diese App weiß, was es ist Karte ist, und es kann Dinge tun. 377 00:18:31,972 --> 00:18:32,930 Es können Berechnungen zu tun. 378 00:18:32,930 --> 00:18:35,290 Es können Entscheidungen auf der Basis weg von ihr zu machen. 379 00:18:35,290 --> 00:18:39,950 >> Denn jetzt, wollte ich weitergeben this.props.card auf den Card. 380 00:18:39,950 --> 00:18:43,420 Sinn so weit? 381 00:18:43,420 --> 00:18:45,210 Es wird mehr Sinn, jetzt zu machen. 382 00:18:45,210 --> 00:18:46,990 >> OK, so jetzt sind wir bei Card. 383 00:18:46,990 --> 00:18:51,719 Unsere Card, da die Karte, sollte drucken Sie ihre Frage und Antwort. 384 00:18:51,719 --> 00:18:54,510 Im Moment haben wir nur ausgedruckt einige hartkodierte Fragen und Antworten. 385 00:18:54,510 --> 00:18:57,720 Wir müssen heraus out-- wir brauchen um die Karte, die sie uns gegeben haben fragen 386 00:18:57,720 --> 00:19:01,360 was ist die Frage und Antwort, und dann drucken Sie diese aus in den Bildschirm. 387 00:19:01,360 --> 00:19:02,470 >> So können wir das hier tun. 388 00:19:02,470 --> 00:19:06,135 In machen begin-- zuerst tun ist gleich. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Also, was wir hier tun, ist, dass wir wissen, die Karten werden uns auf eine Eigenschaft gegeben, 391 00:19:13,050 --> 00:19:13,580 Recht? 392 00:19:13,580 --> 00:19:15,930 Es ist für uns als Eingang angegeben. 393 00:19:15,930 --> 00:19:19,440 Wie es ist fast wie Argumente einer Funktion. 394 00:19:19,440 --> 00:19:22,810 Die Karte ist ein Argument, fast zu dieser Card. 395 00:19:22,810 --> 00:19:25,239 >> Wir extrahieren, dass, und legte sie in den Variable Frage. 396 00:19:25,239 --> 00:19:27,280 Stellen Sie sicher, die Antwort ging der Variablen antworten. 397 00:19:27,280 --> 00:19:31,130 Fordert, dass Karte zu beantworten. 398 00:19:31,130 --> 00:19:35,072 Und jetzt, da wir diesen, anstelle von Ausdrucken, die Text, 399 00:19:35,072 --> 00:19:37,030 wir gehen zum Ausdrucken Was auch immer sie uns gaben. 400 00:19:37,030 --> 00:19:43,580 >> Also das stuff-- also werden wir löschte Frage Antwort. 401 00:19:43,580 --> 00:19:46,380 Mal sehen, ob das funktioniert. 402 00:19:46,380 --> 00:19:52,800 Cool, so das durch sie treten lassen noch einmal, nur um sicher zu sein. 403 00:19:52,800 --> 00:20:00,470 >> Also meine Karte ist Kartenobjekt, und wir geben diese Karte auf die App. 404 00:20:00,470 --> 00:20:04,790 Und die App wird den nehmen Karte und geben Sie es an die Card. 405 00:20:04,790 --> 00:20:09,190 Und das Card sagt, wenn Sie geben mir jede Flashcard-Objekt, 406 00:20:09,190 --> 00:20:11,920 Ich werde seiner Frage ausdrucken und seine Antwort, nicht wahr? 407 00:20:11,920 --> 00:20:14,590 >> Also, was ich tun konnte, ist, ich kann senden Sie diesen Code ein, den ersten 408 00:20:14,590 --> 00:20:16,580 wie 10 Zeilen meines Codes, um mein Freund. 409 00:20:16,580 --> 00:20:18,820 Er konnte es in einbetten seine eigene Anwendung. 410 00:20:18,820 --> 00:20:27,200 Und solange er tat das Gleiche, wie Cardkarte entspricht dies, 411 00:20:27,200 --> 00:20:30,580 solange er die Card erstellt und gab ihm das Recht, Informationen, 412 00:20:30,580 --> 00:20:31,987 er seine eigene Karte machen könnte. 413 00:20:31,987 --> 00:20:34,320 Und so ist dies so, es ist ein wirklich coole Art für Sie zu bauen 414 00:20:34,320 --> 00:20:35,906 Komponenten, die sich gegenseitig benutzen, oder? 415 00:20:35,906 --> 00:20:38,280 Diese Karte, veröffentliche ich könnte Diese Card über das Internet, 416 00:20:38,280 --> 00:20:39,790 und Menschen, in der Lage wäre, es zu benutzen. 417 00:20:39,790 --> 00:20:45,070 Also im Grunde ist es wie eine der Standard-Funktionen in der C-Bibliothek. 418 00:20:45,070 --> 00:20:47,280 >> Es ist eine Funktion, bei der hat jemand geschrieben. 419 00:20:47,280 --> 00:20:48,419 Sie geben eine bestimmte Eingabe. 420 00:20:48,419 --> 00:20:49,710 Es wird eine bestimmte Ausgabe zu erzeugen. 421 00:20:49,710 --> 00:20:50,890 Sie mich nicht, wie es intern arbeitet. 422 00:20:50,890 --> 00:20:53,790 Solange Sie es das Recht geben, Eingang, wird es die richtige Ausgangs zu machen. 423 00:20:53,790 --> 00:20:57,850 >> Und eine Komponente kann dachte an die gleiche Art und Weise. 424 00:20:57,850 --> 00:21:00,280 Das Card ist wie eine Bibliotheksfunktion. 425 00:21:00,280 --> 00:21:03,400 Wenn Sie einige Karten geben als eine Eigenschaft, wird es 426 00:21:03,400 --> 00:21:05,095 Drucken Sie den Inhalt dieser Karte. 427 00:21:05,095 --> 00:21:16,820 Wie, wenn ich meine Karte ändern statt sein wie das, was ist 5 und 37, 428 00:21:16,820 --> 00:21:19,210 es wird entsprechend aktualisiert. 429 00:21:19,210 --> 00:21:21,955 Also einfach durch Ändern des Eingangs, es wird eine bestimmte Ausgangs. 430 00:21:21,955 --> 00:21:24,830 So dass Sie von Komponenten fast denken können als Funktionen auf diese Weise, die 431 00:21:24,830 --> 00:21:25,920 Sie zusammen zu stellen. 432 00:21:25,920 --> 00:21:29,440 Sie erhalten Eingang, wie dieser Card als Eingang, erhalten Sie Ausgabe. 433 00:21:29,440 --> 00:21:31,900 In diesem Fall ist die Ausgangs HTML. 434 00:21:31,900 --> 00:21:34,404 Sinn so weit? 435 00:21:34,404 --> 00:21:36,890 Cool,, Eigenschaften sind so wieder wie Sie Informationen weitergeben 436 00:21:36,890 --> 00:21:40,900 in den und aus Bauteilen. 437 00:21:40,900 --> 00:21:42,740 >> OK, so lassen Sie uns dies Sache interaktiv. 438 00:21:42,740 --> 00:21:44,450 Im Moment ist es ziemlich langweilig. 439 00:21:44,450 --> 00:21:45,520 Was ist [unverständlich]? 440 00:21:45,520 --> 00:21:48,210 Sie können einige ausdrucken, aber das ist alles es tun können. 441 00:21:48,210 --> 00:21:51,550 >> Also lassen Sie uns zurück zu den alte Frage nur für den Moment. 442 00:21:51,550 --> 00:21:54,405 OK, also jetzt diese Komponenten sind langweilig, weil alles, was sie tun, 443 00:21:54,405 --> 00:21:55,030 sie bekommen Eingang. 444 00:21:55,030 --> 00:21:56,100 Sie machen Ausgang, nicht wahr? 445 00:21:56,100 --> 00:21:57,049 Das ist irgendwie langweilig. 446 00:21:57,049 --> 00:21:59,090 Wir wollen unsere haben Komponenten in der Lage sein zu haben 447 00:21:59,090 --> 00:22:02,150 eine Art inneren Zustand, wie an etwas erinnern. 448 00:22:02,150 --> 00:22:05,320 >> Für eine Flashcard, beispiels Beispiel welche Art von Staat 449 00:22:05,320 --> 00:22:07,550 könnten Sie wollen merken für eine Flashkarte? 450 00:22:07,550 --> 00:22:09,740 Was temporären Status könnten Sie sich erinnern wollen 451 00:22:09,740 --> 00:22:12,491 für eine Flashcard in einer Flashcard-app? 452 00:22:12,491 --> 00:22:13,990 Publikum: Ob es sich umgedreht? 453 00:22:13,990 --> 00:22:14,990 NEEL MEHTA: Ja, richtig. 454 00:22:14,990 --> 00:22:17,665 So möchten Sie vielleicht zu halten Spur sind Sie konfrontiert sind oder 455 00:22:17,665 --> 00:22:19,100 Sie verdeckt auf der Karte. 456 00:22:19,100 --> 00:22:23,420 Auf Facebook zum Beispiel, würden Sie wollen in der News-Feed erinnern, wo 457 00:22:23,420 --> 00:22:25,870 Sie sind oder gerne die Profil werden Sie jetzt tun. 458 00:22:25,870 --> 00:22:30,127 >> Auf Messenger, wie welcher Text Geben Sie in das Eingabefeld ein, oder? 459 00:22:30,127 --> 00:22:31,710 Wenn Sie die Seite aktualisieren, es geht weg. 460 00:22:31,710 --> 00:22:32,793 Aber Sie nicht wirklich interessieren. 461 00:22:32,793 --> 00:22:33,770 Es ist nur vorübergehend. 462 00:22:33,770 --> 00:22:34,548 Ja? 463 00:22:34,548 --> 00:22:36,152 >> ZIELGRUPPE: [unverständlich] 464 00:22:36,152 --> 00:22:38,360 NEEL MEHTA: Wie ein Blitz Karte, wie Sie können sehen, 465 00:22:38,360 --> 00:22:40,290 die Frage, Seite oder die Antwort Seite? 466 00:22:40,290 --> 00:22:41,070 >> ZIELGRUPPE: OK. 467 00:22:41,070 --> 00:22:43,270 >> NEEL MEHTA: Like a zweiseitig Flashcard, oder? 468 00:22:43,270 --> 00:22:46,370 Ja, so du willst haben diese Idee jetzt 469 00:22:46,370 --> 00:22:50,370 Ich habe Eigenschaften, die wie Eingänge, aber Staates, die vorübergehende ist, äh, 470 00:22:50,370 --> 00:22:51,839 , wo Sie auf der Seite sind, oder? 471 00:22:51,839 --> 00:22:54,380 Auch in Facebook, sagte ich Messenger, ich habe wie dem Menschen 472 00:22:54,380 --> 00:22:56,550 Du betrachtest Facebook oder wer-Profile, nicht wahr? 473 00:22:56,550 --> 00:22:58,030 >> Das ist nur vorübergehend. 474 00:22:58,030 --> 00:23:01,200 Es ist wichtig, um dem Benutzer zu zeigen was los ist, aber aktualisieren Sie die Seite. 475 00:23:01,200 --> 00:23:02,250 Es spielt eigentlich keine Rolle. 476 00:23:02,250 --> 00:23:04,530 So ist es vorübergehender Zustand, so dass wir alle es Zustand. 477 00:23:04,530 --> 00:23:06,250 >> Also, noch einmal, es gibt staatliche und Requisiten. 478 00:23:06,250 --> 00:23:09,084 Props ist Eingang gegeben aus der Datenquelle. 479 00:23:09,084 --> 00:23:10,250 Staat ist wie Standardwerte. 480 00:23:10,250 --> 00:23:13,700 Es ist gerade wie Sachen, macht die Sache interaktiv. 481 00:23:13,700 --> 00:23:17,720 >> Also in unserem CardView-- lassen Sie uns unsere CardView-- so war es schön. 482 00:23:17,720 --> 00:23:21,420 Was wir hier zu tun, werden wir um Card und nur Card berühren. 483 00:23:21,420 --> 00:23:25,105 Und so mein Freund, die dies, sie haben würde keinen Unterschied bemerken. 484 00:23:25,105 --> 00:23:27,230 Sie würden nicht ändern müssen jeder ihren eigenen Code, 485 00:23:27,230 --> 00:23:29,410 aber sie würden sehen, ihre Card habe aufgemotzt. 486 00:23:29,410 --> 00:23:31,270 Das ist eine nette Teil über Komponenten. 487 00:23:31,270 --> 00:23:35,290 >> OK, also in unserem Card, lassen Sie uns versuchen, zu verfolgen, ob wir Phase bis 488 00:23:35,290 --> 00:23:36,560 oder nach unten. 489 00:23:36,560 --> 00:23:40,480 In Reagieren wir dies tun, indem zuerst Angabe der Ausgangszustand. 490 00:23:40,480 --> 00:23:42,070 Woher kommt der Karte zu beginnen? 491 00:23:42,070 --> 00:23:48,480 >> So eine Funktion namens getInitialState sein funktionieren, und wir ein Objekt zurück. 492 00:23:48,480 --> 00:23:53,310 Dieses Objekt enthält einige Zustand und ein Zustand, ist nur ein Schlüssel-Wert-Paar. 493 00:23:53,310 --> 00:23:56,950 Wie in anweisen, einen Schlüssel und einen müssen Sie Wert, müssen Sie wie Name ist ein String. 494 00:23:56,950 --> 00:24:01,410 >> In diesem Fall lassen Sie uns sagen vorne ist wahr. 495 00:24:01,410 --> 00:24:03,760 Dieses sagt, dass wir einen Staat. 496 00:24:03,760 --> 00:24:06,570 Eine Komponente des Staates ist ein Attribut namens Front. 497 00:24:06,570 --> 00:24:09,649 [Unverständlich], so standardmäßig, wir sind in der Vorderseite der Karte, 498 00:24:09,649 --> 00:24:11,440 und wir können das ändern wie wir drehen Sie die Karte. 499 00:24:11,440 --> 00:24:13,380 Sinn ergeben? 500 00:24:13,380 --> 00:24:18,190 >> OK, so dass in machen, gerade jetzt, wir sind , die die Frage und die Antwort. 501 00:24:18,190 --> 00:24:20,860 Nun, was wir tun sollten ist die Frage zu zeigen 502 00:24:20,860 --> 00:24:24,370 wenn man auf der Vorderseite der Karte befinden, so die Antwort für die Rückseite der Karte. 503 00:24:24,370 --> 00:24:26,850 Das ist, warum Sie alle machen die Karte interaktiv. 504 00:24:26,850 --> 00:24:28,100 Also lassen Sie uns versuchen, dies hier. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Nun, zunächst einmal einfach eine Variable. 507 00:24:33,620 --> 00:24:37,790 Wir können jetzt this.state.front fragen. 508 00:24:37,790 --> 00:24:42,010 Wir Zugriffsstatus die gleiche wir Zugang Requisiten, so this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Wenn wir vorne, dann Text ist this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Wenn man auf der Vorderseite die bist Karte, werden wir versuchen, grab 512 00:24:51,360 --> 00:24:52,485 die Frage von der Karte. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 Andernfalls, wenn wir auf der Rückseite sind der Karte, was sollen wir tun? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> Publikum: Die Antwort? 517 00:25:02,750 --> 00:25:05,041 >> NEEL MEHTA: Yep, so Text gleich this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Aber wenn Sie bemerken, verwenden wir der Staat eine Entscheidung treffen 520 00:25:10,930 --> 00:25:14,420 denn nun der Komponente wird anders aussehen 521 00:25:14,420 --> 00:25:16,710 basierte weg, wie diese mit ihm interagieren. 522 00:25:16,710 --> 00:25:20,355 So anstelle von Ausdrucken von diesem, wir müssen einfach drucken Sie den Text. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, so jetzt, wie Sie sehen, sehen wir nur die Frage. 525 00:25:28,650 --> 00:25:37,720 Und wenn ich manuell ändern den Zustand hier nach vorne ist falsch wir bekommen 42 zurück. 526 00:25:37,720 --> 00:25:39,720 >> Also, noch einmal, diese Komponente hat einen eigenen Staat. 527 00:25:39,720 --> 00:25:43,440 Wie ein Knopf weiß, ob es ist gedrückt worden ist oder nicht, 528 00:25:43,440 --> 00:25:46,080 diese Sache weiß, was auf die Vorder- oder auf der Rückseite. 529 00:25:46,080 --> 00:25:48,320 Standardmäßig ist es auf der Vorderseite. 530 00:25:48,320 --> 00:25:50,840 Und dann, wenn es auf der Vorderseite, wir drucken Sie die Frage. 531 00:25:50,840 --> 00:25:53,106 Wenn es auf dem Rücken, werden wir drucken Sie die Antwort. 532 00:25:53,106 --> 00:25:54,980 So wiederum die Information angegeben ist die gleiche. 533 00:25:54,980 --> 00:25:59,090 Es sieht nur anders je nachdem, wie man es zu programmieren. 534 00:25:59,090 --> 00:26:02,670 So zum Beispiel Facebook Messenger, auch wenn Sie dieselbe Datenquelle zu bekommen, 535 00:26:02,670 --> 00:26:05,170 könnte es anders aussehen weil der Zustand anders ist. 536 00:26:05,170 --> 00:26:08,421 Sie befinden sich auf einem Blick Botschaft anderer Mensch. 537 00:26:08,421 --> 00:26:10,930 >> OK, so ist dies alles schön und gut, aber jetzt, was ist eigentlich 538 00:26:10,930 --> 00:26:15,940 machen uns in der Lage, zu ändern, ob Unsere Karte ist vorne oder hinten. 539 00:26:15,940 --> 00:26:19,010 Wir können dies durch Hinzufügen eines Flip zu tun Taste, eine Taste, um die Karte, 540 00:26:19,010 --> 00:26:22,950 wird die Karte kippen, wenn es [unverständlich]. 541 00:26:22,950 --> 00:26:31,770 So fügen wir einen Knopf hier, diese Taste, und diese Taste wird sagen flip. 542 00:26:31,770 --> 00:26:35,650 >> Und so im Moment, es tut nichts. 543 00:26:35,650 --> 00:26:37,075 Es sieht einfach schön. 544 00:26:37,075 --> 00:26:43,650 Was wir tun können ist, können wir einen Klick hinzufügen Handler, gleich onClick this.flip, 545 00:26:43,650 --> 00:26:44,820 und wir werden Flip später definieren. 546 00:26:44,820 --> 00:26:47,120 Aber im Grunde onClick ist eine Funktion, 547 00:26:47,120 --> 00:26:48,675 wird aufgerufen, wenn der Benutzer darauf klickt. 548 00:26:48,675 --> 00:26:52,330 >> So wird der Button weiß wenn es angeklickt wurde. 549 00:26:52,330 --> 00:26:54,750 Ging es angeklickt, es wird die Karte zu kippen. 550 00:26:54,750 --> 00:26:58,382 Es ist eine Art, wie Sie Ihre Pizza Delivery Guy. 551 00:26:58,382 --> 00:27:01,590 Du bist wie, alles in Ordnung, wenn jemand ruft mich, ich werde Pizza liefern, nicht wahr? 552 00:27:01,590 --> 00:27:03,420 >> Sie registrieren diese Zuhörer. 553 00:27:03,420 --> 00:27:04,530 Sie hören für eine Veranstaltung. 554 00:27:04,530 --> 00:27:07,657 Sie erhalten genannt, und wenn die Ereignis eintritt, können Sie etwas tun. 555 00:27:07,657 --> 00:27:08,240 Sie erhalten Pizza. 556 00:27:08,240 --> 00:27:11,480 In diesem Fall, wenn Sie angeklickt, die Karte drehen Sie. 557 00:27:11,480 --> 00:27:14,560 >> Und so müssen wir eine Definition Funktion, die die Karte kippen wird, 558 00:27:14,560 --> 00:27:17,930 so werden wir von diesem Recht Gebrauch zu schreiben hier, Flip-Funktion. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 Und so was denken Sie, Flip tun? 561 00:27:23,680 --> 00:27:27,180 Auch dieses wird aufgerufen, wenn wir Sie auf den Flip-Taste. 562 00:27:27,180 --> 00:27:29,406 Was sollte die Funktion Flip zu tun? 563 00:27:29,406 --> 00:27:34,136 >> ZIELGRUPPE: Änderung this.state.front von true in false, false auf true. 564 00:27:34,136 --> 00:27:38,420 >> NEEL MEHTA: Yep, so ergreifen this.front ist-- der vordere Zustand ist. 565 00:27:38,420 --> 00:27:40,930 Nehmen Sie die Front Zustand, wenn es ist wahr, machen es falsch. 566 00:27:40,930 --> 00:27:42,530 Wenn es falsch ist, machen es wahr, oder? 567 00:27:42,530 --> 00:27:45,330 Also lassen Sie uns versuchen, dass. 568 00:27:45,330 --> 00:27:48,240 >> Sie können Zustand nicht ändern einfach, indem Sie this.state. 569 00:27:48,240 --> 00:27:50,380 Sie können das nicht tun. 570 00:27:50,380 --> 00:27:52,030 Sie können das nicht tun. 571 00:27:52,030 --> 00:27:55,810 Sie haben, um eine Funktion zu verwenden genannt this.setState. 572 00:27:55,810 --> 00:28:03,230 >> So kann man sagen, this.setState Front Doppelpunkt dieses, wo wiederum das Ausrufe 573 00:28:03,230 --> 00:28:04,330 Punkt bedeutet das Gegenteil. 574 00:28:04,330 --> 00:28:07,420 Ich schätze, wenn diese. state.front wahr ist, wird es drehen falsch. 575 00:28:07,420 --> 00:28:09,170 Also werden wir den Zustand gesetzt von true in false. 576 00:28:09,170 --> 00:28:11,430 Wenn es falsch ist, werden wir stellen Sie false auf true. 577 00:28:11,430 --> 00:28:17,210 >> Bitte beachte, dass wir gesetzt und erhalten leicht anders, und so wollen wir versuchen dies. 578 00:28:17,210 --> 00:28:18,675 Bada bing, sieh dir das an. 579 00:28:18,675 --> 00:28:21,810 Das Flip-Taste wird jetzt schalten Sie den vorderen in den Zustand zurück. 580 00:28:21,810 --> 00:28:24,990 >> Und so ist hier, wo Sie sehen, wenig von der Magie der React. 581 00:28:24,990 --> 00:28:28,420 Wie wir nie gesagt, dass es es wieder machen. 582 00:28:28,420 --> 00:28:30,910 Wir haben nie gesagt, dass es irgendetwas neu zu zeichnen. 583 00:28:30,910 --> 00:28:32,630 Wenn Sie dies tun ohne Reaktion, würden Sie 584 00:28:32,630 --> 00:28:34,588 haben zu-- gerne, wenn der Flip-Taste angeklickt wird, 585 00:28:34,588 --> 00:28:37,290 man müsste es zu sagen, manuell neu zu machen, oder? 586 00:28:37,290 --> 00:28:43,050 >> Reagieren ist wirklich cool, dass, wenn Sie geben Sie ihm einen bestimmten Zustand und Eigenschaften, 587 00:28:43,050 --> 00:28:45,760 es wird immer machen genau dasselbe. 588 00:28:45,760 --> 00:28:48,690 Und so, wenn wir immer wir ändern der Zustand und die Eigenschaften, 589 00:28:48,690 --> 00:28:50,819 reagieren einfach neu macht die ganze Sache. 590 00:28:50,819 --> 00:28:52,860 Es weiß, dass es eine Eins-zu-Eins-Entsprechung 591 00:28:52,860 --> 00:28:57,270 zwischen Staat und Parameter und HTML. 592 00:28:57,270 --> 00:29:00,110 Also, wenn eine der beiden Änderungen durch einen gesetzten Zustand, 593 00:29:00,110 --> 00:29:03,750 es wird sich ändern, wie die Pay ist neu gerendert. 594 00:29:03,750 --> 00:29:06,650 Und so im Grunde Reagieren ist wie warten auf Sie zu ändern. 595 00:29:06,650 --> 00:29:09,870 >> Immer, wenn es sich etwas ändert, es wird wieder machen die gesamte Seite. 596 00:29:09,870 --> 00:29:12,480 Und wenn es ineffizient klingt, es ist, weil es wäre, 597 00:29:12,480 --> 00:29:15,050 aber reagieren verwendet eine Sache, genannt Schatten DOM. 598 00:29:15,050 --> 00:29:19,950 Anstatt die Seite direkt zeichnen, es hält die virtuelle HTML-Baum im Speicher. 599 00:29:19,950 --> 00:29:23,620 >> Sie wissen, ist HTML wie ein Baum, wie eine hierarchische Datenstruktur. 600 00:29:23,620 --> 00:29:28,990 Es hält eine gefälschte Baum in Erinnerung, und wenn Sie die Seite zu aktualisieren, 601 00:29:28,990 --> 00:29:31,940 es wird eine weitere gefälschte zeichnen Baum, und es wird berechnet 602 00:29:31,940 --> 00:29:35,120 was ändern muss, das zu machen Seite, um die beiden Bäume gleich. 603 00:29:35,120 --> 00:29:38,540 Also im Grunde, es praktisch Wieder macht eine Menge. 604 00:29:38,540 --> 00:29:41,540 Und dann ist es nur gerne ändert sich die Seite in kleinen Tweaks wie nötig, 605 00:29:41,540 --> 00:29:44,240 so ist es sehr, sehr, sehr effizient. 606 00:29:44,240 --> 00:29:46,970 >> Also im Grunde reagieren wenn Sie etwas ändern, 607 00:29:46,970 --> 00:29:49,010 es wird wieder machen die Seite praktisch. 608 00:29:49,010 --> 00:29:52,830 Es wird herausfinden, was muss ich zu ändern, um die eigentliche Seite zu reflektieren 609 00:29:52,830 --> 00:29:55,602 die virtuelle Seite, und es wird das tun. 610 00:29:55,602 --> 00:29:56,560 Das ist das virtuelle DOM. 611 00:29:56,560 --> 00:29:59,350 Es ist eines der größten Merkmale React. 612 00:29:59,350 --> 00:30:00,880 >> Ist das sinnvoll? 613 00:30:00,880 --> 00:30:01,540 Irgendwelche Fragen? 614 00:30:01,540 --> 00:30:02,040 Ja? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> Publikum: Wie funktioniert noch mit dem MVC vergleichen 617 00:30:08,969 --> 00:30:10,760 dass wir darüber gesprochen vor wie Ressourcen. 618 00:30:10,760 --> 00:30:13,527 >> NEEL MEHTA: Ja, das ist die Frage So kommt es zu MVC zu vergleichen? 619 00:30:13,527 --> 00:30:14,610 Sie fragten nach Ressourcen. 620 00:30:14,610 --> 00:30:16,445 Nun, lasst uns darüber, wie es funktioniert zu sprechen. 621 00:30:16,445 --> 00:30:18,190 >> In MVC, würden Sie das Modell zu aktualisieren. 622 00:30:18,190 --> 00:30:20,560 In diesem Fall müssten wir ein Kartenmodell. 623 00:30:20,560 --> 00:30:24,540 Der Blick wäre das haben Flip-Taste, und die Steuerung 624 00:30:24,540 --> 00:30:26,310 müssten die Flip-Funktion. 625 00:30:26,310 --> 00:30:28,450 So dass die Aussicht würde sagen, die Controller Flip Flip. 626 00:30:28,450 --> 00:30:30,370 Flip würde sagen, die Modell zu ändern, oder? 627 00:30:30,370 --> 00:30:33,915 >> Und so, wenn Sie eine MVC, Sie tun hören Sie auf das Modell zu verändern, 628 00:30:33,915 --> 00:30:37,150 und Sie neu rendern die Ansicht entsprechend. 629 00:30:37,150 --> 00:30:39,210 Oder man muss nur Lust haben Sie den Controller. 630 00:30:39,210 --> 00:30:42,418 Warten Sie, bis das Modell zu verändern, und dann wählen, und wählen einen Teil wie ein Ding 631 00:30:42,418 --> 00:30:44,032 wechseln. 632 00:30:44,032 --> 00:30:45,740 Hier haben wir eine Sache, aber in einem großen app, 633 00:30:45,740 --> 00:30:48,510 Sie möchte daran erinnern, was haben die Änderung in jedem Ort, 634 00:30:48,510 --> 00:30:50,290 so ist es ein wenig ärgerlich. 635 00:30:50,290 --> 00:30:53,670 Und so Reagieren ist schön weil es einen Schatten Dom. 636 00:30:53,670 --> 00:30:56,040 Es kann nur leisten, schreiben die ganze Sache. 637 00:30:56,040 --> 00:30:58,680 Sie können wahlweise müssen wie erraten, was zu aktualisieren. 638 00:30:58,680 --> 00:31:02,186 >> Auf Facebook, wenn Sie mögen bekommen Sie eine neue Nachricht, in MVC, 639 00:31:02,186 --> 00:31:04,060 Sie müssten sich daran zu erinnern, OK, ändern die Dinge, 640 00:31:04,060 --> 00:31:06,260 an der Spitze der Seite, die Nachricht Symbol. 641 00:31:06,260 --> 00:31:08,290 Auch Pop ein neues Fenster an der Unterseite. 642 00:31:08,290 --> 00:31:10,070 Auch eine neue Sache in diesem Fenster. 643 00:31:10,070 --> 00:31:11,060 Auch einen Ton spielen. 644 00:31:11,060 --> 00:31:13,150 >> Das ist eine Menge Zeug Ausgehen gleichzeitig. 645 00:31:13,150 --> 00:31:15,320 Und so, wenn Sie nicht tun, haben einen Schatten Dom, würden Sie 646 00:31:15,320 --> 00:31:18,740 müssen dies manuell zu tun, weil man kann nicht loszuwerden, die ganze Seite. 647 00:31:18,740 --> 00:31:21,430 Sie können sich nicht leisten, so müssen um jede Sache, manuell zu ändern, 648 00:31:21,430 --> 00:31:23,990 Das ist in MVC wirklich ärgerlich. 649 00:31:23,990 --> 00:31:27,640 >> Also, um zu sein, sparsam, sie selektiv 650 00:31:27,640 --> 00:31:30,750 aktualisieren Sie die Seite, das ist, effizient, aber auch lästig. 651 00:31:30,750 --> 00:31:34,002 In Reaktion, weil der Schatten Dom, beides erhalten Sie kostenlos. 652 00:31:34,002 --> 00:31:35,710 Es ist effizienter, weil des Schatten Dom. 653 00:31:35,710 --> 00:31:37,210 Der Engpass ist die Aktualisierung der Seite. 654 00:31:37,210 --> 00:31:40,292 Es ist nicht, die Baum-Manipulation. 655 00:31:40,292 --> 00:31:41,250 Sie erhalten die Effizienz. 656 00:31:41,250 --> 00:31:45,420 Sie erhalten auch die Benutzerfreundlichkeit, da wenn Sie nur schreiben die gesamte Seite, 657 00:31:45,420 --> 00:31:48,970 aber Sie wissen nur, alles in Ordnung, die Dinge, gehen, um auf der Seite irgendwo sein. 658 00:31:48,970 --> 00:31:51,180 Es könnte an einem anderen Ort sein, aber es wird auf der Seite sein, oder? 659 00:31:51,180 --> 00:31:52,860 So dass Sie nur neu gerendert das Ganze praktisch, 660 00:31:52,860 --> 00:31:55,540 und Sie könnten ein paar machen Änderungen an der Seite selbst. 661 00:31:55,540 --> 00:31:57,850 >> Also, noch einmal, in MVC Sie müssten wählen 662 00:31:57,850 --> 00:32:01,840 zwischen Benutzerfreundlichkeit und Effizienz, und Reagieren, Sie beide zu bekommen. 663 00:32:01,840 --> 00:32:04,020 So ist es besser. 664 00:32:04,020 --> 00:32:05,220 Sinn ergeben? 665 00:32:05,220 --> 00:32:06,676 Feststoff. 666 00:32:06,676 --> 00:32:12,080 >> OK, also mal sehen, lass uns reden ein wenig über Schritt 4 667 00:32:12,080 --> 00:32:14,740 wie können wir Komponenten einbetten. 668 00:32:14,740 --> 00:32:16,260 So haben wir jetzt dieses Recht. 669 00:32:16,260 --> 00:32:19,420 Wir haben unseren coolen kleinen Knopf. 670 00:32:19,420 --> 00:32:23,157 Wir können es drehen und zurück her, und das ist alles, es tut. 671 00:32:23,157 --> 00:32:24,990 Nehmen wir an, wir wollen haben eine andere Komponente. 672 00:32:24,990 --> 00:32:28,730 Nehmen wir an, unsere Flashcard App sollte enthalten eine Liste von allen Karten 673 00:32:28,730 --> 00:32:31,520 dass Sie haben, so dass bedeutet, dass wir sollte eine andere Komponente haben. 674 00:32:31,520 --> 00:32:32,970 Na ja, vielleicht nennen es eine Listenansicht. 675 00:32:32,970 --> 00:32:36,200 Lassen Sie uns machen Sie eine Liste Ansicht, dass koexistiert mit dem Card, 676 00:32:36,200 --> 00:32:39,680 und diese Liste Ansicht und Card zusammen mag Arbeit. 677 00:32:39,680 --> 00:32:43,190 Und Sie können sie zu kombinieren um unsere App für Sie. 678 00:32:43,190 --> 00:32:45,160 >> So zuerst, lassen Sie uns ein paar mehr Karten richtig. 679 00:32:45,160 --> 00:32:46,370 Lassen Sie uns sagen, was für Karten? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 Und nur damit ich nicht zu haben, Bohrung mit der Eingabe in, 682 00:32:51,910 --> 00:32:53,410 Ich werde einfach es von hier kopieren. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 Und so werde ich nicht geben ihm nur einer Karte. 685 00:33:03,580 --> 00:33:06,910 Ich werde es eine Reihe von Karten zu geben. 686 00:33:06,910 --> 00:33:10,240 Also zuerst die Apps werde für jetzt brechen. 687 00:33:10,240 --> 00:33:14,717 Alle Rechte, so werden wir machen Diese Lage, mehrere Karten zu behandeln. 688 00:33:14,717 --> 00:33:17,800 Also zuerst, wir gehen, um es zu geben, nicht nur einer Karte, sondern eine Reihe von Karten, 689 00:33:17,800 --> 00:33:18,700 wie eine Liste der Karten. 690 00:33:18,700 --> 00:33:20,980 Und in diesem Fall gibt es drei. 691 00:33:20,980 --> 00:33:27,280 >> In Ordnung, so so App gehen, um eine Liste mit Karten zu bekommen, 692 00:33:27,280 --> 00:33:29,870 und es wird zu entscheiden, welche ein bis zu dem Card zeigen. 693 00:33:29,870 --> 00:33:33,740 Der Card nur kann machen eine Karte, aber die App 694 00:33:33,740 --> 00:33:37,610 ruft eine Liste aller Karten, nicht wahr? 695 00:33:37,610 --> 00:33:40,820 >> Also, wenn Sie aus einer Figur Karte, um Card geben, 696 00:33:40,820 --> 00:33:44,660 wie würden Sie vermute, Sie könnten in der Lage sein, eine Entscheidung zu treffen, über die Karte 697 00:33:44,660 --> 00:33:47,064 zeigen? 698 00:33:47,064 --> 00:33:49,980 Um Ihnen einen Tipp geben, ist es zeitweise Sie werden sehen eine bestimmte Karte. 699 00:33:49,980 --> 00:33:53,260 Wenn Sie die Seite aktualisieren, werden Sie gerade zurück auf die erste Karte zu gehen. 700 00:33:53,260 --> 00:33:55,464 Das ist in Ordnung, weil es vorübergehend. 701 00:33:55,464 --> 00:33:56,630 Welche Technik könnten wir verwenden? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> Publikum: Sie könnten eine variabel zu machen so wie du gerade hatten vorne. 704 00:34:08,760 --> 00:34:11,989 Ist das wahr, könnten Sie haben aktuelle Karte entspricht 1? 705 00:34:11,989 --> 00:34:14,150 >> NEEL MEHTA: Ja, so haben wir wollen Staat haben, nicht wahr? 706 00:34:14,150 --> 00:34:16,080 Sie würden Zustand in der Verwendung Komponente, um herauszufinden, 707 00:34:16,080 --> 00:34:17,288 welche Karte wollen wir erhalten. 708 00:34:17,288 --> 00:34:19,290 Wie haben wir eine Liste der alle Karten, werden wir 709 00:34:19,290 --> 00:34:21,630 benutzen Zustand, um herauszufinden, einer der ersten Karte, 710 00:34:21,630 --> 00:34:23,710 zweite Karte dritte Karte, und so weiter. 711 00:34:23,710 --> 00:34:28,760 >> So eine App, so wird eine App erhalten ein haben die getInitialState Funktion, 712 00:34:28,760 --> 00:34:35,020 getInitialState Funktion Rückkehr. 713 00:34:35,020 --> 00:34:39,929 Und wir werden einfach sagen activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 So, jetzt unsere App hat einen eigenen Staat. 715 00:34:42,889 --> 00:34:47,179 >> Und so nun an zu machen, um herauszufinden, eine Karte, lass uns einfach an das Array gehen 716 00:34:47,179 --> 00:34:49,969 und ergreifen Sie die Sache an diesem Index. 717 00:34:49,969 --> 00:34:53,580 Wählen Sie die Karte gleich this.props.cards this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 So wie Sie hier sehen, die Requisiten und der Staat tatsächlich zusammenarbeiten. 720 00:35:00,162 --> 00:35:08,990 So, jetzt, da wir unsere Activecard, wir nennen es Activecard, 721 00:35:08,990 --> 00:35:10,470 und mal sehen, ob das funktioniert. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [UNVERSTÄNDLICH] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Oh, das war ein Textfehler. 726 00:35:44,900 --> 00:35:45,400 Ah. 727 00:35:45,400 --> 00:35:51,420 728 00:35:51,420 --> 00:35:54,840 >> Cool, yep, jetzt waren wir wieder , wo wir vorher waren, nicht wahr? 729 00:35:54,840 --> 00:35:57,100 Same old-Programm mit Ausnahme Jetzt unterstützen wir können 730 00:35:57,100 --> 00:35:59,390 eine Liste der Karten, nicht nur eine Karte. 731 00:35:59,390 --> 00:36:04,130 Und jetzt wieder, wenn wir das ändern activeIndex, können wir 0-1 gehen, 732 00:36:04,130 --> 00:36:07,330 und jetzt, dass die zweite Karte, und dann gingen wir auf 0. 733 00:36:07,330 --> 00:36:10,390 Also hier ist eine neue aufgemotzte Version unserer. 734 00:36:10,390 --> 00:36:16,000 >> OK, so jetzt wir einen der Listenansicht lassen, dass zeigt alle Karten in Ihrem Programm, 735 00:36:16,000 --> 00:36:19,980 so dass wir eine neue zu machen Komponente namens listview. 736 00:36:19,980 --> 00:36:22,155 Lassen listview gleich react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 So eine ungeordnete zu machen, wollen wir Liste mit einem Listenelement für jede Karte. 739 00:36:38,800 --> 00:36:41,490 Und so haben wir eine Reihe von Karten. 740 00:36:41,490 --> 00:36:44,990 Wir wollen ein Listenelement für jede Karte, oder? 741 00:36:44,990 --> 00:36:47,490 Wir könnten eine for-Schleife zu tun oder etwas, um ein neues Listenelement zu machen. 742 00:36:47,490 --> 00:36:50,522 Aber, wie Sie es in zu tun Reagieren, verwenden Sie ein Ding namens Karte. 743 00:36:50,522 --> 00:36:57,150 Karte ist ein Werkzeug oder eine Funktion, die Sie verwenden dass für jeden Artikel, läuft eine Funktion, 744 00:36:57,150 --> 00:36:59,510 nimmt Rückgabewert, und gibt Ihnen das zurück. 745 00:36:59,510 --> 00:37:06,310 >> So als Beispiel, haben wir das Array 1, 2, 3.map function-- und dies 746 00:37:06,310 --> 00:37:12,120 ist für eine Kurz function-- x Pfeil x mal x. 747 00:37:12,120 --> 00:37:16,110 Dieses sagt, für jede Zahl in 1, 2, 3, nehmen Sie es. 748 00:37:16,110 --> 00:37:17,800 Quadrat, und geben Sie es zurück. 749 00:37:17,800 --> 00:37:22,090 Also, was tun Sie denken, 1, 2 geht 3.map x zu x-mal 750 00:37:22,090 --> 00:37:25,480 x gibt Ihnen wieder gegeben dass diese Funktion 751 00:37:25,480 --> 00:37:27,680 laufen auf jedem Element des Arrays. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> ZIELGRUPPE: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> NEEL MEHTA: Yep, 1, 4, 9 weil Sie 1 mal 1. 755 00:37:35,709 --> 00:37:36,500 Das gibt Ihnen ein. 756 00:37:36,500 --> 00:37:37,690 Das ist das erste Element. 757 00:37:37,690 --> 00:37:38,530 >> 2 mal 2 ist 4. 758 00:37:38,530 --> 00:37:39,570 Das ist ein zweites Element. 759 00:37:39,570 --> 00:37:40,310 3 mal 3 ist 9. 760 00:37:40,310 --> 00:37:41,540 Das ist ein drittes Element. 761 00:37:41,540 --> 00:37:42,640 Sinn ergeben? 762 00:37:42,640 --> 00:37:45,015 So Karte verfügt über eine Technik, die Sie Verwendung in funktionellen Programmierer, 763 00:37:45,015 --> 00:37:48,090 den neuen Stil der Programmierung, etwas zu tun 764 00:37:48,090 --> 00:37:50,500 zu jedem Element in der Liste. 765 00:37:50,500 --> 00:37:51,970 Und so das klingt vertraut. 766 00:37:51,970 --> 00:37:53,370 Wir haben eine Liste von Karten. 767 00:37:53,370 --> 00:37:56,860 Wir wollen einen Listeneintrag für jeden zu bekommen ein, so dass wir nur Karte benutzen hier. 768 00:37:56,860 --> 00:38:00,250 Wir werden sagen, lassen Sie die Liste equals this.props, Karten, Karte. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> Und so bei einer Karte, wir sind gehen, um einen Listeneintrag zu erzeugen, 771 00:38:15,070 --> 00:38:17,580 mit dieser Karte Inhalt Seite davon. 772 00:38:17,580 --> 00:38:20,660 Sagen wir einfach, wir wollen, zu geben, die Karten in Frage zu stellen, so card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 So enthält diese Liste ein Array von LI oder Listenelemente 775 00:38:30,649 --> 00:38:32,440 wo es eine Liste Artikel für jede Karte, 776 00:38:32,440 --> 00:38:35,150 und enthält die Karten Frage. 777 00:38:35,150 --> 00:38:37,640 Sinn ergeben? 778 00:38:37,640 --> 00:38:39,450 >> Cool, so jetzt lassen Sie uns tatsächlich zu drucken, dass aus. 779 00:38:39,450 --> 00:38:46,521 So werden wir einen ul zurückzukehren. 780 00:38:46,521 --> 00:38:49,020 Innerhalb dieses ungeordnete Liste, wir werden nur Stick die ganze Liste 781 00:38:49,020 --> 00:38:49,890 dass sie uns gegeben hat. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Cool. 784 00:38:53,350 --> 00:38:56,060 >> In Ordnung, so dass nun diese Listenansicht funktioniert einfach zu finden. 785 00:38:56,060 --> 00:38:59,842 Haben Sie Fragen zu der Listenansicht? 786 00:38:59,842 --> 00:39:01,270 Sie haben eine Reihe von Karten. 787 00:39:01,270 --> 00:39:02,800 Sie machen einen Listeneintrag für jede Karte. 788 00:39:02,800 --> 00:39:05,466 Und man sie innerhalb einer ungeordneten Liste, und Sie geben es zurück. 789 00:39:05,466 --> 00:39:09,410 So, jetzt zu handeln, damit wir einbetten lassen diese innerhalb unserer App, 790 00:39:09,410 --> 00:39:14,310 so können wir dies tun, Listenansicht. 791 00:39:14,310 --> 00:39:17,070 Welche Argumente haben wir übergeben zur Listenansicht? 792 00:39:17,070 --> 00:39:18,320 Welche Eigenschaften haben wir es? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Denken Sie daran, wenn Sie geben es ist ein Bündel Karten, 795 00:39:26,860 --> 00:39:29,590 es wird die Liste zu machen sehen für die Karten. 796 00:39:29,590 --> 00:39:32,267 Also, was würde passieren wir hier als Argument? 797 00:39:32,267 --> 00:39:33,350 Publikum: Eine Liste der Karten? 798 00:39:33,350 --> 00:39:37,130 NEEL MEHTA: Ja, so Karten gleich this.props.cards, nicht wahr? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 Und so das einzige Problem ist, dass man nur 801 00:39:44,370 --> 00:39:48,600 wandte sich ein Top-Level-Element zu machen, so mußt du es in einem div wickeln. 802 00:39:48,600 --> 00:39:49,100 Es ist komisch. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Lassen Sie uns also, wenn das zu sehen. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Funktioniert es? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Yep, dort gehen Sie. 809 00:40:31,030 --> 00:40:33,700 So, jetzt haben wir eine Liste der Karten an der Unterseite, 810 00:40:33,700 --> 00:40:36,180 und dann haben wir unsere Card sich auf die Oberseite, 811 00:40:36,180 --> 00:40:40,486 und daß zwischen Flip die beiden Seiten der Karte. 812 00:40:40,486 --> 00:40:42,610 Jetzt macht das Sinn, wie ich das getan habe? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Ja, so haben wir wieder zwei Komponenten. 815 00:40:46,790 --> 00:40:49,666 Die erste Komponente Drucke Sie jede Karte in der Liste. 816 00:40:49,666 --> 00:40:50,540 Das ist die Listenansicht. 817 00:40:50,540 --> 00:40:54,770 Und die zweite Komponente druckt nur die Karte. 818 00:40:54,770 --> 00:40:58,840 Wenn Sie es eine bestimmte Karte zu geben, wird es Drucken Sie Informationen zu dieser Karte 819 00:40:58,840 --> 00:41:01,870 und lassen Sie sich vor und zurück blättern. 820 00:41:01,870 --> 00:41:05,850 >> Wenn wir wollen, können wir versuchen, und sprechen über das Hinzufügen einige neue Features dazu. 821 00:41:05,850 --> 00:41:09,482 Sonst können wir ein bisschen mehr reden zu der Geschwindigkeit des Reaktors, 822 00:41:09,482 --> 00:41:11,190 oder wir antworten können Fragen gerne zur Verfügung 823 00:41:11,190 --> 00:41:15,050 denn diese sind alle Kernteile von reagieren, dass ich will, darüber zu sprechen. 824 00:41:15,050 --> 00:41:16,540 Wir können weiter gehen. 825 00:41:16,540 --> 00:41:17,590 Wir können Fragen zu beantworten. 826 00:41:17,590 --> 00:41:18,560 Irgendwas du willst. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> ZIELGRUPPE: Können Sie verwenden JSX in normalen JavaScript? 829 00:41:24,205 --> 00:41:27,150 Oder ist das etwas, kam mit dem [unverständlich]? 830 00:41:27,150 --> 00:41:30,760 >> NEEL MEHTA: Die Frage ist, kann Sie JSX mit normaler JavaScript verwenden? 831 00:41:30,760 --> 00:41:32,620 Die Antwort ist ja. 832 00:41:32,620 --> 00:41:41,070 JSX ist nur ein Weg, es dauert, Ihre JavaScript, die HTML-Innenseite hat, 833 00:41:41,070 --> 00:41:44,215 und es in JavaScript erstellt, dass keine HTML darin. 834 00:41:44,215 --> 00:41:47,880 So bemerken dass-- so bemerken Sie hier. 835 00:41:47,880 --> 00:41:50,820 Das sieht aus wie du div haben und Sie haben Sachen darin. 836 00:41:50,820 --> 00:41:54,970 >> Das stellt den JavaScript-Code, wie erzeugt die gleiche Sache. 837 00:41:54,970 --> 00:41:59,590 Ich denke, was ich sagen will ist, dass JSX ist nur eine syntaktische, wie es ist 838 00:41:59,590 --> 00:42:03,530 ein Präprozessor für JavaScript viel wie PHP ist ein Präprozessor für HTML. 839 00:42:03,530 --> 00:42:05,490 JSC ist ein Präprozessor für JavaScript, das können 840 00:42:05,490 --> 00:42:12,970 Sie setzen HTML Innenseite Ihres JavaScript. 841 00:42:12,970 --> 00:42:16,425 Und so, wenn Sie den richtigen Transformator Das ist ein Ding namens [unverständlich], 842 00:42:16,425 --> 00:42:17,300 das wird zu verwandeln. 843 00:42:17,300 --> 00:42:19,360 Das Recht Präprozessor, es lasse Sie das tun. 844 00:42:19,360 --> 00:42:20,235 >> ZIELGRUPPE: [unverständlich] 845 00:42:20,235 --> 00:42:23,026 NEEL MEHTA: In der Regel müssen Sie nicht HTML Innenseite JavaScript setzen 846 00:42:23,026 --> 00:42:24,110 es sei denn, dein Werk React. 847 00:42:24,110 --> 00:42:27,146 Aber Sie es trotzdem tun. 848 00:42:27,146 --> 00:42:27,645 Ja? 849 00:42:27,645 --> 00:42:29,353 >> Publikum: Ich glaube, Sie beschrieben hatte Reagieren 850 00:42:29,353 --> 00:42:31,970 als funktionale Programmiersprache. 851 00:42:31,970 --> 00:42:35,646 Wir haben gelernt, C in CS50. 852 00:42:35,646 --> 00:42:38,032 C auch eine funktionale Sprache? 853 00:42:38,032 --> 00:42:39,990 NEEL MEHTA: So ist die Frage ist etwa Funktions 854 00:42:39,990 --> 00:42:43,010 gegenüber einem anderen Ding namens Imperativ oder prozeduralen Programmierung. 855 00:42:43,010 --> 00:42:44,820 Es gibt zwei Arten von Programmen beliebt. 856 00:42:44,820 --> 00:42:48,550 Eigenen Verfahrens aufgerufen, die ist alles über wie das Tun Befehle, 857 00:42:48,550 --> 00:42:51,510 und man ist funktionell, der alle ist etwa mit Funktionen und mit 858 00:42:51,510 --> 00:42:52,930 Eingabe und Ausgabe von diesen. 859 00:42:52,930 --> 00:42:55,930 Reagiert ein Funktions Paradigma. 860 00:42:55,930 --> 00:42:58,010 C ist ein sehr verfahrens Paradigma. 861 00:42:58,010 --> 00:43:02,360 >> Und als ein Beispiel, C beispielsweise Sie nicht über dieses deklarative Weise zu tun 862 00:43:02,360 --> 00:43:04,390 machen Sie das Programm, nicht wahr? 863 00:43:04,390 --> 00:43:06,826 Man muss dazu sagen, drucken Sie diese. 864 00:43:06,826 --> 00:43:07,950 Ändern Sie diese Datenstruktur. 865 00:43:07,950 --> 00:43:08,530 Drucken Sie diese. 866 00:43:08,530 --> 00:43:10,160 Es ist alles über Befehle. 867 00:43:10,160 --> 00:43:12,640 >> In Reaktion, es gibt nicht dass viele Befehle. 868 00:43:12,640 --> 00:43:15,145 Es ist alles über das Komponenten, die Sie zusammen. 869 00:43:15,145 --> 00:43:16,300 Sie sind wie Funktionen. 870 00:43:16,300 --> 00:43:26,360 Sie haben wie eine Funktion genannt Card, 871 00:43:26,360 --> 00:43:28,680 die eine Funktion daß weist Eingabe-, Ausgabe- 872 00:43:28,680 --> 00:43:30,660 und so ist alles Reagieren zu dieser Philosophie 873 00:43:30,660 --> 00:43:32,700 uns von having-- Sie Daten haben. 874 00:43:32,700 --> 00:43:34,910 Sie führt es durch diese Algorithmus, und es wird 875 00:43:34,910 --> 00:43:36,800 Ausgabe von HTML, die Sie gerade gedruckten Seite, 876 00:43:36,800 --> 00:43:39,180 und so muss man bauen sie Stück für Stück. 877 00:43:39,180 --> 00:43:42,800 >> So, um eine Metapher zu zeichnen, was Ich schon sagte, wissen Sie, wie 878 00:43:42,800 --> 00:43:47,050 auf Facebook, wenn Sie eine Meldung erhalten, und Sie wählen, welche Teile zu aktualisieren, 879 00:43:47,050 --> 00:43:47,882 das ist verfahrens. 880 00:43:47,882 --> 00:43:48,840 Es ist zwingend notwendig, richtig? 881 00:43:48,840 --> 00:43:49,806 OK, ich habe eine Nachricht. 882 00:43:49,806 --> 00:43:50,930 Lassen Sie uns Konto ändern es. 883 00:43:50,930 --> 00:43:52,110 >> Lassen Sie uns ein Pop Fenster hier. 884 00:43:52,110 --> 00:43:52,780 Lassen Sie uns Konto ändern es. 885 00:43:52,780 --> 00:43:53,700 Ziehen wir das hier. 886 00:43:53,700 --> 00:43:55,220 Das ist eine Verfahrensweise. 887 00:43:55,220 --> 00:44:00,240 >> Das ist, was Dinge wie Angular, Boost, Backbone, benutzen Sie anderen Frameworks. 888 00:44:00,240 --> 00:44:01,200 Reagieren funktionsfähig ist. 889 00:44:01,200 --> 00:44:03,324 Es ist eine ganz andere Art über Dinge nachzudenken. 890 00:44:03,324 --> 00:44:07,950 Es nimmt diese Idee lassen Sie uns Funktionen oder Algorithmen, werden Sie 891 00:44:07,950 --> 00:44:08,800 geben Daten. 892 00:44:08,800 --> 00:44:11,820 Es werde ausspucken, was es sein sollte, und der Computer 893 00:44:11,820 --> 00:44:13,490 kümmert sich mit einem Gewicht nehmen. 894 00:44:13,490 --> 00:44:15,890 Sie können nicht damit umgehen selbst. 895 00:44:15,890 --> 00:44:18,470 Heißt das, ein wenig Sinn zu machen? 896 00:44:18,470 --> 00:44:18,970 Ja? 897 00:44:18,970 --> 00:44:24,180 >> Publikum: In einer funktionalen Sprache, alles auf einmal geschieht? 898 00:44:24,180 --> 00:44:26,800 >> NEEL MEHTA: Nein, passieren Dinge in Ordnung. 899 00:44:26,800 --> 00:44:29,320 Wie hier, es gibt immer noch bestellen, aber es funktioniert nicht 900 00:44:29,320 --> 00:44:32,390 geschieht in der Reihenfolge, wie Lob, Befehl, Befehl. 901 00:44:32,390 --> 00:44:36,459 Es geschieht in der Reihenfolge der Funktion gibt Ihnen die Ausgabe. 902 00:44:36,459 --> 00:44:37,750 Setzen Sie, dass in einer anderen Funktion. 903 00:44:37,750 --> 00:44:39,550 Setzen Sie, dass in eine andere Funktion, eine weitere Funktion. 904 00:44:39,550 --> 00:44:41,470 >> Wenn Sie CS51 tun, werden Sie lernen, funktionale Programme 905 00:44:41,470 --> 00:44:42,886 ein wenig außerhalb des Umfangs dieser. 906 00:44:42,886 --> 00:44:45,090 Aber im Grunde, was macht Reagieren cool ist nicht nur 907 00:44:45,090 --> 00:44:46,840 die Einweg Datenfluß und die virtuelle Dom, 908 00:44:46,840 --> 00:44:48,700 sondern auch diese Idee der funktionalen Programmierung. 909 00:44:48,700 --> 00:44:51,720 Und funktionalen Programmierung ist sehr einfach zu komponieren und machen coole Sachen aus, 910 00:44:51,720 --> 00:44:53,844 und es ist sehr einfach zu denken, zu und Vernunft zu. 911 00:44:53,844 --> 00:44:55,450 Also ist es eine weitere gute Auslosung der React. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Haben Sie weitere Fragen? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Ja? 916 00:45:03,150 --> 00:45:06,840 >> ZIELGRUPPE: Äh, warum sollte man verwenden wir im Gegensatz zu var? 917 00:45:06,840 --> 00:45:10,450 >> NEEL MEHTA: So ist die Frage warum Sie verwenden können, statt var? 918 00:45:10,450 --> 00:45:13,220 Dies ist ein Ding namens ES6 oder ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Es ist die neue Version von JavaScript. 920 00:45:15,820 --> 00:45:19,050 Es gibt eine Reihe von technischen Gründen, Aber lassen Sie uns ist eine bessere Version von var. 921 00:45:19,050 --> 00:45:20,724 >> Es ist, wie Sie Variablen deklarieren. 922 00:45:20,724 --> 00:45:21,390 Sie können lassen. 923 00:45:21,390 --> 00:45:22,140 Sie können var verwenden. 924 00:45:22,140 --> 00:45:23,825 Let hat eine Reihe von technischen reasons-- Sie können sie aussehen 925 00:45:23,825 --> 00:45:25,610 up later-- dafür, warum es besser ist. 926 00:45:25,610 --> 00:45:28,780 Grundsätzlich hat ES6 einige schöne neue Syntax, einige neue Features 927 00:45:28,780 --> 00:45:30,720 auf der Oberseite des alten JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> So haben wir, wie fünf Minuten. 929 00:45:32,782 --> 00:45:34,990 Ich wollte nur reden eine weitere Sache, wirklich schnell. 930 00:45:34,990 --> 00:45:36,450 Wenn Sie irgendwelche Fragen hatten, lassen Sie uns darüber sprechen, nachdem diese. 931 00:45:36,450 --> 00:45:38,366 Aber nur damit diese bekommt der Kamera erwischt, ich habe gerade 932 00:45:38,366 --> 00:45:41,550 möchte ein wenig über, wie Sie sprechen, tatsächlich nutzen Reagieren in Ihre Anwendungen. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Wenn Sie hier gehen, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 Dieses ist die Startseite für die Reaktion, und es wird Ihnen zeigen, wie Sie tatsächlich nutzen 936 00:46:03,320 --> 00:46:05,320 Reagieren Sie in Ihre Seiten. 937 00:46:05,320 --> 00:46:08,845 Im Grunde ist es ein wenig kompliziert zu installieren versuchen reagieren. 938 00:46:08,845 --> 00:46:12,300 Es ist nicht so einfach, wie Sie ziehen sie einfach und legen Sie einen JavaScript drin. 939 00:46:12,300 --> 00:46:15,890 >> Sie müssen Ihre Transformator einzurichten, das wird, wie zuvor, 940 00:46:15,890 --> 00:46:18,120 schalten Sie die JSX in der normale JavaScript. 941 00:46:18,120 --> 00:46:21,030 Sie müssen sich, was das wird kompilieren Sie normale ES6. 942 00:46:21,030 --> 00:46:24,720 JavaScript gibt es eine Menge von bewegten Teilen Sie zu tun haben, so gibt es eine Sache, 943 00:46:24,720 --> 00:46:27,200 genannt Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 Und das ist ein Kommandozeilen-Tool Das wird hilft Ihnen, Ihre Gerüst Reagieren 945 00:46:31,110 --> 00:46:32,380 Projekte einfach. 946 00:46:32,380 --> 00:46:38,660 >> So können Sie darüber lesen später, aber es gibt einige Werkzeuge 947 00:46:38,660 --> 00:46:40,160 dass Yeoman bietet. 948 00:46:40,160 --> 00:46:43,280 Sie werden Ihnen ein Reagieren erstellen lassen App mit allem, was in gebaut. 949 00:46:43,280 --> 00:46:46,030 Wie sie gebaut haben werde in, Komponenten eingebaut. 950 00:46:46,030 --> 00:46:47,880 Es müssen Ihren Transformator eingebaut. 951 00:46:47,880 --> 00:46:50,699 Sie haben eine Menge coole Sachen in automatisch erstellt 952 00:46:50,699 --> 00:46:52,240 Verwendung dieser Dinge genannt Generatoren. 953 00:46:52,240 --> 00:46:54,620 >> Also darüber zu lesen, wenn Sie mögen. 954 00:46:54,620 --> 00:46:59,110 Einfach auf Yeoman, Y-E-O-M-A-N, und gehen Sie Generatoren wie diese zu finden. 955 00:46:59,110 --> 00:47:01,263 Und mit Generatoren wie Davon wollen Sie nur einen 956 00:47:01,263 --> 00:47:03,010 ist ein paar Kommandozeilenbefehle. 957 00:47:03,010 --> 00:47:05,530 Es wird aus einem Gerüst gesamten Reagieren App für Sie. 958 00:47:05,530 --> 00:47:10,470 Es wird alles das Handbuch Rohrleitungs zu bekommen, und Grunzen Arbeit für Sie erledigt, 959 00:47:10,470 --> 00:47:13,010 und das ist, warum Sie gerade zu konzentrieren auf nur schriftlich in React. 960 00:47:13,010 --> 00:47:16,739 >> Also im Grunde den Aufbau einer Reagieren App ist nicht trivialen. 961 00:47:16,739 --> 00:47:19,530 Es ist alles miteinander verdrahtet, aber es sind Werkzeuge, die es für Sie tun werde. 962 00:47:19,530 --> 00:47:23,070 Also, wenn Sie möchten ein Reagieren app, versuchen Sie es so. 963 00:47:23,070 --> 00:47:26,360 Wenn Sie nur wollen, zu experimentieren, können Sie versuchen, mit diesen CodePen 964 00:47:26,360 --> 00:47:28,550 denn dies hat CodePen alle reagieren Verdrahtung. 965 00:47:28,550 --> 00:47:30,240 Ich habe die ganze Arbeit für Sie bereits getan. 966 00:47:30,240 --> 00:47:34,610 >> Also, wenn Sie wie ein machen wollen Produktion freizugeben Reagieren App, 967 00:47:34,610 --> 00:47:37,220 versuchen Sie eine dieser Generatoren. 968 00:47:37,220 --> 00:47:40,240 Wenn Sie nur wollen, um zu spielen rund, ist es oft nur wert 969 00:47:40,240 --> 00:47:44,490 wie zu versuchen, das herum auf CodePen hier. 970 00:47:44,490 --> 00:47:45,470 Klingt gut? 971 00:47:45,470 --> 00:47:45,970 Cool. 972 00:47:45,970 --> 00:47:47,890 >> Also das ist alles was ich habe. 973 00:47:47,890 --> 00:47:52,470 Auch der gesamte Code und Beispiele sind gehen, um auf dieser Webseite hier zu sein. 974 00:47:52,470 --> 00:47:55,509 Also, noch einmal, wir haben nicht zu sprechen zu viel Syntax der Reaktion, 975 00:47:55,509 --> 00:47:57,550 aber alle, die zu finden kleinen syntaktischen Angaben, 976 00:47:57,550 --> 00:48:00,320 es ist alles werde zur Verfügung stehen auf dieser Seite hier. 977 00:48:00,320 --> 00:48:02,660 >> So möchte ich empfehlen, den ersten Schritt. 978 00:48:02,660 --> 00:48:06,277 Legen Sie es in Ihre CodePen. 979 00:48:06,277 --> 00:48:08,110 Versuchen Sie arbeiten daran, es zu dem zweiten Schritt. 980 00:48:08,110 --> 00:48:11,310 Es gibt einen vierten Schritt, und nur sehen, wo Sie aus, dass zu bekommen. 981 00:48:11,310 --> 00:48:14,840 >> Mehr Fragen, zu überprüfen hin, dass die Seite oder mailen Sie mir. 982 00:48:14,840 --> 00:48:16,490 Das ist meine E-Mail. 983 00:48:16,490 --> 00:48:19,885 Aber ich würde gerne, um Ihnen jede Hilfe Fragen, die Sie zu haben React. 984 00:48:19,885 --> 00:48:21,010 Also, ja, das ist alles, was ich habe. 985 00:48:21,010 --> 00:48:23,410 Ich danke Ihnen allen sehr herzlich für beobachten oder für die Teilnahme an. 986 00:48:23,410 --> 00:48:26,820 Und ich werde alle Fragen zu nehmen Sie, nachdem das jetzt haben könnte. 987 00:48:26,820 --> 00:48:29,140 Also danke euch allen für das Ansehen. 988 00:48:29,140 --> 00:48:31,270