1 00:00:00,000 --> 00:00:02,910 >> [Zenelejátszási] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> NEEL MEHTA: itt indul. 4 00:00:07,275 --> 00:00:11,070 >> Nos, mindenki, szívesen web apps a jövőben reagálnak. 5 00:00:11,070 --> 00:00:11,870 Ez CS50. 6 00:00:11,870 --> 00:00:12,930 A nevem Neel. 7 00:00:12,930 --> 00:00:17,689 Én egy TA CS50 és másodéves a Harvard College és egy nagyon, nagyon 8 00:00:17,689 --> 00:00:18,730 szenvedélyes webfejlesztő. 9 00:00:18,730 --> 00:00:20,730 Úgyhogy nagyon izgalmas, hogy beszélgetni veled ma, 10 00:00:20,730 --> 00:00:24,550 hogy te itt vagy otthon figyeli, mintegy reagál, ami ismét 11 00:00:24,550 --> 00:00:27,270 mint mondtam, a jövőben a webes alkalmazások. 12 00:00:27,270 --> 00:00:29,055 >> Így reagál egy webes keretrendszer. 13 00:00:29,055 --> 00:00:30,930 És ahogy már mondtál hogy itt néhány ember, 14 00:00:30,930 --> 00:00:33,400 keretet csak egy készlet eszközök segítségével 15 00:00:33,400 --> 00:00:35,770 hogy rendszerezze és építeni az internetes alkalmazásokhoz. 16 00:00:35,770 --> 00:00:39,010 És internetes alkalmazások, megint honlapok hogy interaktívak, mint a Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, mindegy. 18 00:00:42,330 --> 00:00:45,590 >> Szóval Facebook egy webes keretrendszer által kifejlesztett Facebook 19 00:00:45,590 --> 00:00:48,060 Pár évvel back-- reagálnak az. 20 00:00:48,060 --> 00:00:50,830 Ez azóta használják Facebook a mobil alkalmazások 21 00:00:50,830 --> 00:00:52,460 és a web app, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy egy másik kiemelkedő korai alkalmazója reagálnak. 23 00:00:56,350 --> 00:00:58,630 >> Ez tényleg kezd rendkívül népszerű. 24 00:00:58,630 --> 00:01:03,420 Ha valaha is használni a dolgokat, mint szögletes vagy Gerincét, ez ugyanannak a családnak, 25 00:01:03,420 --> 00:01:05,830 de azóta sokkal felülmúlja a népszerűségük. 26 00:01:05,830 --> 00:01:06,890 Ez a forró új dolog. 27 00:01:06,890 --> 00:01:09,590 Ez nagyon, nagyon hatalmas. 28 00:01:09,590 --> 00:01:13,470 >> És így reagál jó nem csak mint egy web keretet épület felületek. 29 00:01:13,470 --> 00:01:16,020 Ez jó épület webes felületek. 30 00:01:16,020 --> 00:01:18,350 Van még egy dolog, nevű reagálnak Native amely 31 00:01:18,350 --> 00:01:22,200 segítségével épít interfészek Android és iOS 32 00:01:22,200 --> 00:01:26,390 és talán más platformokon a jövőben segítségével ugyanúgy JavaScript kódot. 33 00:01:26,390 --> 00:01:31,130 Lehet használni a pontosan ugyanolyan JavaScript kódot render honlapok, 34 00:01:31,130 --> 00:01:33,040 tétele Android alkalmazások és iOS alkalmazások. 35 00:01:33,040 --> 00:01:35,000 >> Ez egy nagyon, nagyon izgalmas időszak. 36 00:01:35,000 --> 00:01:37,070 Ez egy nagyon, nagyon klassz lehetőséget. 37 00:01:37,070 --> 00:01:42,020 Ez tényleg egy univerzális webes interfész fejlesztési eszköz, 38 00:01:42,020 --> 00:01:44,420 így ez egy nagyon, nagyon Fontos dolog tudni. 39 00:01:44,420 --> 00:01:46,949 És, mint én elmondani az embereknek előtt, ez, azt hiszem, 40 00:01:46,949 --> 00:01:48,990 meg fog változni, hogyan építeni webes alkalmazások örökre. 41 00:01:48,990 --> 00:01:55,820 Szóval ez talán kicsit túlzás, de én Szerintem ez egy nagyon jó dolog tudni. 42 00:01:55,820 --> 00:01:57,580 >> OK, akkor mi van reagálni? 43 00:01:57,580 --> 00:02:01,020 Reagálni egy keretrendszer segítségével Használja építési felületek. 44 00:02:01,020 --> 00:02:03,240 Az interfész, megint, egy weboldalt, ugye? 45 00:02:03,240 --> 00:02:06,340 Tehát itt Instagram.com, felhasználása reagálnak. 46 00:02:06,340 --> 00:02:08,740 >> Reagálnak épül ötlete az alkatrészek. 47 00:02:08,740 --> 00:02:11,900 A komponens egy HTML eleme a szteroidok, 48 00:02:11,900 --> 00:02:14,470 így egy HTML elem, mint egy gombot. 49 00:02:14,470 --> 00:02:15,250 Ez egy bekezdés. 50 00:02:15,250 --> 00:02:17,500 Ez egy fejléc, ugye? 51 00:02:17,500 --> 00:02:22,740 És Instagram fogja használni ezeket, de is használni fogja komponensei reagálnak. 52 00:02:22,740 --> 00:02:25,740 >> Reagálnak alkatrészek feltuningolt HTML elemek 53 00:02:25,740 --> 00:02:28,100 hogy saját viselkedését található bennük. 54 00:02:28,100 --> 00:02:31,800 Tehát, mint egy példát, mi volna Egy idő elem, egy idő összetevő, 55 00:02:31,800 --> 00:02:34,095 amely tartalmazza, mint a időbélyegző, tudod, 56 00:02:34,095 --> 00:02:37,170 profil komponenst tartalmazni fogja a profil kép 57 00:02:37,170 --> 00:02:38,820 és a személy nevét. 58 00:02:38,820 --> 00:02:42,930 Ez lehet egy hasonló számláló, amely számíthat, mint a több embernek tetszik, 59 00:02:42,930 --> 00:02:45,610 és ha rákattintunk, akkor az számának növelése szereti. 60 00:02:45,610 --> 00:02:48,200 A komponens csak egy csomó HTML kód, 61 00:02:48,200 --> 00:02:50,520 van néhány funkció csomagolva belsejébe. 62 00:02:50,520 --> 00:02:53,770 Tehát ez olyan, mint egy HTML elem a szteroidok, ahogy már mondtam. 63 00:02:53,770 --> 00:02:56,270 Tudod, hogy ezeket a komponenseket, és tudod őket össze 64 00:02:56,270 --> 00:02:59,060 új alkatrészek, a Ebben az esetben, egy post komponens, 65 00:02:59,060 --> 00:03:00,505 amely tartalmazza az összes ezt a cuccot. 66 00:03:00,505 --> 00:03:04,050 Ez tartalmazná idő, profil, LikeCounter, talán a megjegyzést 67 00:03:04,050 --> 00:03:06,100 és talán maga a kép. 68 00:03:06,100 --> 00:03:10,810 És így internetes alkalmazásokról most épül azáltal, hogy alkatrészek és fogalmazza meg őket. 69 00:03:10,810 --> 00:03:15,620 Az Instagram takarmány nem más, mint egy csomó hozzászólások egymás után, 70 00:03:15,620 --> 00:03:19,032 Minden hozzászólás nem tartalmaz, mint az idő, Profil, LikeCounter, és így tovább. 71 00:03:19,032 --> 00:03:20,490 Ez olyan, mint egy ház építése. 72 00:03:20,490 --> 00:03:22,660 Nem épít a ház fentről lefelé. 73 00:03:22,660 --> 00:03:24,960 Veszel elemek, így Önnek hogy mint a fürdőszoba. 74 00:03:24,960 --> 00:03:28,320 Te meg a bedroom-- kibír őket együtt, és van egy új alkatrész. 75 00:03:28,320 --> 00:03:29,760 Van egy új házrész. 76 00:03:29,760 --> 00:03:32,860 >> Így reagálnak az összes épül ez a gondolat a komponensek 77 00:03:32,860 --> 00:03:36,600 interaktív, amelyek deklaratív. 78 00:03:36,600 --> 00:03:39,650 Mint te csak azt, amit a profil, és ez teszi. 79 00:03:39,650 --> 00:03:40,600 Ezek alakítható. 80 00:03:40,600 --> 00:03:43,880 Tudod hogy egy időben és egy profilt, tedd őket, hogy valami jobb. 81 00:03:43,880 --> 00:03:47,770 És ők újrahasznosítható, így ha Van forráskódját egy post, 82 00:03:47,770 --> 00:03:49,440 akkor beágyazni, hogy sehol. 83 00:03:49,440 --> 00:03:53,160 >> Akkor beágyazása Instagram dolog a saját weboldalán. 84 00:03:53,160 --> 00:03:56,830 Tudod embed Facebook, például mindaddig, amíg ez használ React is. 85 00:03:56,830 --> 00:04:00,360 Tehát alkatrészek nagyon, nagyon, nagyon erős építőkövei a web 86 00:04:00,360 --> 00:04:04,180 hogy bárhol lehet használni, és tegye együtt, hogy új építőelemeket. 87 00:04:04,180 --> 00:04:07,159 Ez a nagyon-nagyon magas szintű áttekintést. 88 00:04:07,159 --> 00:04:09,200 Szóval, megint, ha van kérdései bármely pontján 89 00:04:09,200 --> 00:04:14,470 a filozófia a reaktor, a kódolás, megállítani, és tudassa velem. 90 00:04:14,470 --> 00:04:18,420 >> OK, így reagálnak jó, mert van egy másik látásmód 91 00:04:18,420 --> 00:04:19,870 meg, hogyan építsenek a webes alkalmazásokat. 92 00:04:19,870 --> 00:04:23,620 Ön valószínűleg hallott MVC, a modell lehet irányítani a CS50 vagy bármi 93 00:04:23,620 --> 00:04:25,940 Más szondázás osztályok használata. 94 00:04:25,940 --> 00:04:29,000 És a legtöbb keretek épül az elképzelést, MVC. 95 00:04:29,000 --> 00:04:30,410 Reagálni nem. 96 00:04:30,410 --> 00:04:32,980 Reagálnak épül az ötlet Az egyirányú adatforgalom 97 00:04:32,980 --> 00:04:36,510 ahogy azt az alábbi táblázatot, vagy grafikai itt. 98 00:04:36,510 --> 00:04:38,260 >> Alapvetően, van egy adatforrás. 99 00:04:38,260 --> 00:04:42,380 És az adatforrás dönti hogyan helyezkedjenek el bizonyos alkatrészeket. 100 00:04:42,380 --> 00:04:45,452 És a komponensek akkor, amikor lecserélik, 101 00:04:45,452 --> 00:04:47,160 azok el fogják mondani adatforrás változtatni. 102 00:04:47,160 --> 00:04:49,350 >> Ahhoz, hogy a Instagram Előfordulhat például, hogy van 103 00:04:49,350 --> 00:04:52,050 listáját utáni tárgyak, mint a egy adatbázisban, vagy valami. 104 00:04:52,050 --> 00:04:53,310 Hogy az adatokat. 105 00:04:53,310 --> 00:04:57,600 És akkor mi poszt alkatrészek lesz, hogy az adatok, 106 00:04:57,600 --> 00:05:01,830 és használja ezeket az adatokat render Egy dolog a képernyőn. 107 00:05:01,830 --> 00:05:04,300 Ez az, amit a nyíl adatokból a komponens, 108 00:05:04,300 --> 00:05:07,930 majd, hogy ugyanazokat az adatokat használják tétele egy csomó alkatrészeket. 109 00:05:07,930 --> 00:05:10,290 >> A Facebook Messenger, a például, amely reagál, 110 00:05:10,290 --> 00:05:13,410 lehet, hogy egy listát üzenetek az adatforrás. 111 00:05:13,410 --> 00:05:15,927 És ez nem tenné Csak az üzenetek listája 112 00:05:15,927 --> 00:05:17,510 hanem a barátlistádban van. 113 00:05:17,510 --> 00:05:19,200 Megvan a olvasatlan üzenetek száma. 114 00:05:19,200 --> 00:05:23,330 Talán azt is teszi a Facebook dolog ez alján Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Ugyanazokat az adatokat egy Egyetlen igazság forrása 116 00:05:25,610 --> 00:05:28,290 és hogy okoz sok komponensek tenni. 117 00:05:28,290 --> 00:05:30,290 És ha egy ilyen komponensek megváltozik, 118 00:05:30,290 --> 00:05:32,320 megy vissza, és megváltoztatja az adatforrás. 119 00:05:32,320 --> 00:05:33,460 >> Küld egy üzenetet, ugye? 120 00:05:33,460 --> 00:05:34,780 Amely megváltoztatja az adatforrás. 121 00:05:34,780 --> 00:05:39,490 Azt olvastam az üzeneteket, így beállított olvasatlan 0. 122 00:05:39,490 --> 00:05:41,136 Amely megváltoztatja az adatforrás. 123 00:05:41,136 --> 00:05:44,010 És észre, hogy mindezek egy nyíl megy vissza ugyanazt az adatot 124 00:05:44,010 --> 00:05:47,662 forrás, hogy tudd, adott adathalmazt, 125 00:05:47,662 --> 00:05:49,870 pontosan tudja, mi a oldal fog kinézni. 126 00:05:49,870 --> 00:05:50,700 Ez determinisztikus. 127 00:05:50,700 --> 00:05:53,451 Tudja, mivel bizonyos adatokat, hogy mi Az oldal fog kinézni. 128 00:05:53,451 --> 00:05:56,158 Ön tudja megjósolni, hogyan fog viselkednek és hogyan mennek a dolgok 129 00:05:56,158 --> 00:05:57,650 dolgozni, ha ők együttvéve. 130 00:05:57,650 --> 00:06:00,410 >> És ha lenne egy millió alkatrészek Itt lenne azonos módon viselkednek, ugye? 131 00:06:00,410 --> 00:06:02,290 Akkor nem lett volna furcsa összefüggéseket. 132 00:06:02,290 --> 00:06:04,120 Egy adat nyújtott egymillió alkatrészeket. 133 00:06:04,120 --> 00:06:06,879 Egymillió-összetevő menj vissza, és szerkessze meg az adatokat. 134 00:06:06,879 --> 00:06:07,920 És így ez nagyon szép. 135 00:06:07,920 --> 00:06:10,870 Építünk, alakítható, könnyen skálázható web alkalmazások. 136 00:06:10,870 --> 00:06:13,150 >> Van egy adatforrás, Az igazság forrása. 137 00:06:13,150 --> 00:06:15,790 Ez azt mondja az összetevők hogyan helyezkedjenek el a lap, 138 00:06:15,790 --> 00:06:18,190 és a komponensek kezelni interakció. 139 00:06:18,190 --> 00:06:20,150 És ha meg akarják változtatni dolgokat, csak menj vissza 140 00:06:20,150 --> 00:06:21,750 és mondd el az adatforrás változtatni. 141 00:06:21,750 --> 00:06:22,850 Van értelme? 142 00:06:22,850 --> 00:06:26,010 Így reagál szól megértése hogyan kell felépíteni egy komponens 143 00:06:26,010 --> 00:06:29,540 és hogyan lehet a komponens lépni a külvilággal. 144 00:06:29,540 --> 00:06:31,850 >> Így a komponens egymásra is a külvilággal 145 00:06:31,850 --> 00:06:34,490 használ egy másik technológia nevű Flux, amely 146 00:06:34,490 --> 00:06:36,872 egy keret, amely egészítik ki a reagálnak. 147 00:06:36,872 --> 00:06:38,330 Nem fogunk beszélni róla. 148 00:06:38,330 --> 00:06:42,990 Fogunk még beszélni, mivel adatok, hogyan tud tenni egy alkatrész? 149 00:06:42,990 --> 00:06:47,010 >> És így reagál nagyon klassz, mert Használhatja bármilyen hátsó akarsz. 150 00:06:47,010 --> 00:06:50,480 Ha van, mint egy Python hátsó, Ha a Python is kiköp néhány adatot, 151 00:06:50,480 --> 00:06:51,610 Reagálni teheti meg. 152 00:06:51,610 --> 00:06:54,700 Ha nincs JS kimenetek Az adatok reagálnak teszi. 153 00:06:54,700 --> 00:06:56,890 Ruby sínek fel adatok, válaszolnak teszi. 154 00:06:56,890 --> 00:07:01,860 >> Így reagál alapvetően egy web view-- egy front end komponensek 155 00:07:01,860 --> 00:07:03,910 bármilyen adatforrás nélkül. 156 00:07:03,910 --> 00:07:07,145 És így megy a adatforrást reagálnak alkatrészek nagyon egyszerű. 157 00:07:07,145 --> 00:07:08,770 Haladva egy kicsit nehezebb. 158 00:07:08,770 --> 00:07:10,462 Használó Flux mint már említettem. 159 00:07:10,462 --> 00:07:11,420 Mi nem fog bele. 160 00:07:11,420 --> 00:07:13,740 Majd inkább a data-to-komponens oldalán. 161 00:07:13,740 --> 00:07:15,880 Így lehet, hogy hűvös, szórakoztató internetes alkalmazásokat. 162 00:07:15,880 --> 00:07:19,870 Ez nem befolyásolja a külvilág most, de ez egy másik történet. 163 00:07:19,870 --> 00:07:22,210 >> OK, így ha itt lennél az én utolsó szeminárium 164 00:07:22,210 --> 00:07:26,610 tudni fogja, hogy az összes kódot mai vita lesz a következő URL- 165 00:07:26,610 --> 00:07:29,320 Itt, bocs, ez az URL itt. 166 00:07:29,320 --> 00:07:32,730 És alapvetően fogunk menni a négy lépést, talán öt, 167 00:07:32,730 --> 00:07:33,510 Valószínűleg nem öt. 168 00:07:33,510 --> 00:07:37,300 Majd mozoghat négy lépésben Az épület egy minta reagál app. 169 00:07:37,300 --> 00:07:39,550 És így a teljes forráskódot minden lépésénél 170 00:07:39,550 --> 00:07:42,216 lesz itt, így ha te követi végig otthon, 171 00:07:42,216 --> 00:07:43,991 nyugodtan elolvassa ezt a kódot. 172 00:07:43,991 --> 00:07:46,740 Ha követi végig itt, fogunk mutatja, hogy a képernyőn, 173 00:07:46,740 --> 00:07:47,739 úgyhogy ne aggódj miatta. 174 00:07:47,739 --> 00:07:50,930 De ha otthon, úgy érzi, szabadon látogasson el a honlapon. 175 00:07:50,930 --> 00:07:56,400 És igen, akkor képesnek kell lennie arra, hogy az összes kódot, amit valaha szüksége van. 176 00:07:56,400 --> 00:08:01,380 Szóval ez egy jó puskát is a jövő kalandjait reagálnak. 177 00:08:01,380 --> 00:08:04,490 Cool, így ha mindenki, aki itt van, és akkor is, ha otthon, 178 00:08:04,490 --> 00:08:11,580 húzza fel ezt a weboldalt, is.gd/cs50react, nincs tőke, nincs aláhúzás, se semmi. 179 00:08:11,580 --> 00:08:15,849 >> Akkor megjelenik egy oldal, amely úgy néz ki, egy kicsit, mint ez. 180 00:08:15,849 --> 00:08:17,140 Ez egy dolog, úgynevezett CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen egy együttműködési kódolási környezet 182 00:08:20,030 --> 00:08:23,364 amellyel tudok írni ide a kódot, és ez lesz automatikusan elküldjük Önnek. 183 00:08:23,364 --> 00:08:24,780 És így, tudok írni kódot. 184 00:08:24,780 --> 00:08:26,920 Tudok futni kódot itt. 185 00:08:26,920 --> 00:08:33,470 >> A example-- és ha reloads-- lásd Én futás JavaScript kódot az oldalon 186 00:08:33,470 --> 00:08:36,390 itt, és ez lesz jeleníti meg automatikusan egy weboldal 187 00:08:36,390 --> 00:08:37,980 ezzel a JavaScript kódot. 188 00:08:37,980 --> 00:08:40,039 És így ez egy módja számunkra, hogy próbálja ki kódja 189 00:08:40,039 --> 00:08:43,089 igazán gyors anélkül, hogy használja a személyi igazolvány vagy használja a helyi gépen 190 00:08:43,089 --> 00:08:44,290 vagy bármi. 191 00:08:44,290 --> 00:08:47,670 Ez egy nagyon gyors módja, hogy makett és kipróbálni különböző kódot. 192 00:08:47,670 --> 00:08:50,560 >> Így fogok eltart Például kódot, amivel itt. 193 00:08:50,560 --> 00:08:52,374 Fogunk dolgozni rajta. 194 00:08:52,374 --> 00:08:54,540 És ha otthon, akkor lehet húzni ezt fel is. 195 00:08:54,540 --> 00:08:57,530 És én már telepítve Reagálnak itt, így csak 196 00:08:57,530 --> 00:09:00,770 írhatunk ide a kódot, és próbálja azt a saját játszótér. 197 00:09:00,770 --> 00:09:04,940 >> Igen, ha mindenki megnyitni ezt a linket. 198 00:09:04,940 --> 00:09:08,080 Kérek egy remek egyszer van nyitva. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Cool, Cool. 201 00:09:13,770 --> 00:09:16,914 Nincs itt semmi most, de mi fog változni, hogy nagyon hamar. 202 00:09:16,914 --> 00:09:21,250 >> OK, így reagálni egy JavaScript könyvtár, és mint ilyen, 203 00:09:21,250 --> 00:09:24,480 ismereteket igényel JavaScript, amely a webes programozási nyelv. 204 00:09:24,480 --> 00:09:27,660 És ez is használhatók más dolog Most is, de elsősorban az interneten fejleszteni 205 00:09:27,660 --> 00:09:32,040 nyelvet, így ha nem ismeri hogy olvasni egy telek hívott JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 Ez csodálatos. 207 00:09:32,700 --> 00:09:34,240 Meg lehet tanulni JavaScript fél órán belül. 208 00:09:34,240 --> 00:09:34,990 Hihetetlen. 209 00:09:34,990 --> 00:09:36,420 >> Tehát, hogy ez egy olvasmány. 210 00:09:36,420 --> 00:09:39,960 Mi is van egy csomó HTML itt, mert mi tervezése weboldalak természetesen. 211 00:09:39,960 --> 00:09:43,890 Tehát, ha nem ismeri a HTML, nézd meg HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Azt hiszem, a tanulás reagálni egy millió alkalommal könnyebb, ha már 213 00:09:46,520 --> 00:09:47,892 tudom építőkövei. 214 00:09:47,892 --> 00:09:50,600 Ha az alkatrészek, hogy ez Könnyen, hogy egy nagyobb alkatrész. 215 00:09:50,600 --> 00:09:51,860 Ez reagálnak nyelv az Ön számára. 216 00:09:51,860 --> 00:09:54,270 >> Így megy előre, és adja ezeket a dolgokat olvasható. 217 00:09:54,270 --> 00:09:55,070 Szünet ezt a videót. 218 00:09:55,070 --> 00:09:57,440 Adj neki egy olvasási ha otthon, ha nem 219 00:09:57,440 --> 00:10:00,794 ismeri a HTML vagy JavaScript 220 00:10:00,794 --> 00:10:02,960 OK, akkor mi megyünk tennie, hogy megyünk, hogy 221 00:10:02,960 --> 00:10:06,470 egy nagyon alap tanulókártya app segítségével reagálnak. 222 00:10:06,470 --> 00:10:08,210 Fogunk egy tanulókártya. 223 00:10:08,210 --> 00:10:09,880 A flip a kártyát oda-vissza. 224 00:10:09,880 --> 00:10:12,399 És mi is van egy lista az összes kártyát, hogy van, 225 00:10:12,399 --> 00:10:14,190 és ha érzel magadban ambiciózus, talán 226 00:10:14,190 --> 00:10:17,060 válthassanak között autók rájuk kattintva. 227 00:10:17,060 --> 00:10:20,360 >> De ez, a csupasz csontok, egy nagyon egyszerű reagál app. 228 00:10:20,360 --> 00:10:22,560 És így ez valójában Nem triviális, hogy végre, 229 00:10:22,560 --> 00:10:26,030 de fogunk mutatni, hogy ha nem ez, ez nagyon, nagyon könnyen kiterjesztése 230 00:10:26,030 --> 00:10:27,680 ha mások segítenek vele. 231 00:10:27,680 --> 00:10:33,750 Így fogunk átmenni négy lépésben semmiből építeni ezt. 232 00:10:33,750 --> 00:10:36,740 >> OK, így a négy lépést, akkor elindul az első lépés. 233 00:10:36,740 --> 00:10:39,790 Az első lépés lesz épület az első komponens. 234 00:10:39,790 --> 00:10:44,830 Mint már mondtam, egy komponens reagál csak egy HTML elem a szteroidok. 235 00:10:44,830 --> 00:10:49,660 Ez meghatározza a HTML és néhány viselkedés, és ez 236 00:10:49,660 --> 00:10:52,600 meghatározza, hogy az emberek kölcsönhatásba léphet vele, hogy hogyan 237 00:10:52,600 --> 00:10:54,270 ez lenne a belső állapot. 238 00:10:54,270 --> 00:10:57,630 Mint egy gomb fogja tudni, mint hogy hány alkalommal ez már kattintott például 239 00:10:57,630 --> 00:11:01,010 és tudni fogja, hogyan feküdt ki magát. 240 00:11:01,010 --> 00:11:04,430 >> Szóval menjünk előre, és építjük első komponens JavaScript segítségével. 241 00:11:04,430 --> 00:11:09,711 Tehát, ha a szintaxis néz ki, fura, Azért, mert ez a fajta van. 242 00:11:09,711 --> 00:11:11,710 Szóval, megint megyünk hogy egy változó nevű 243 00:11:11,710 --> 00:11:14,580 app a kulcsszó hagyja, ami egy változó, 244 00:11:14,580 --> 00:11:18,210 hadd App egyenlő React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> Reagálni egy könyvtár és Az létre osztály működését. 246 00:11:22,609 --> 00:11:24,400 És ez a funkció egy kis kódot, amit 247 00:11:24,400 --> 00:11:29,090 hozhat létre egy új típusú reagálnak alkatrész. 248 00:11:29,090 --> 00:11:32,780 És így React.createClass teszi a komponens, 249 00:11:32,780 --> 00:11:35,270 és ez a komponens képes megtenni dolgokat. 250 00:11:35,270 --> 00:11:40,460 A legfontosabb dolog, amit tehet, render valamit, render függvényében. 251 00:11:40,460 --> 00:11:44,500 >> Ismét, ha ez az index nem nyilvánvaló, hogy te, én ajánlom, menjen a JS macskáknak 252 00:11:44,500 --> 00:11:45,682 és nézd meg. 253 00:11:45,682 --> 00:11:47,710 Az, hogy nagyított elég jól? 254 00:11:47,710 --> 00:11:48,490 Hűvös. 255 00:11:48,490 --> 00:11:50,670 >> Szóval minden komponens kell hogy egy render funkciót. 256 00:11:50,670 --> 00:11:53,010 A render függvény azt mondja, Minek nyomtatni a képernyőn? 257 00:11:53,010 --> 00:11:54,760 De a komponens haszontalan, ha nem 258 00:11:54,760 --> 00:11:58,060 tudom, mit nyomtatni a képernyőn, így akkor szükség van egy render funkciót. 259 00:11:58,060 --> 00:12:01,904 >> Tehát a render dolog, akkor Csak azt kell, hogy visszatérjen néhány HTML. 260 00:12:01,904 --> 00:12:03,820 És mi a jó az, hogy van egy dolog, úgynevezett 261 00:12:03,820 --> 00:12:08,660 JSX, amely egy kiterjesztése JavaScript által használt reagálni. 262 00:12:08,660 --> 00:12:11,845 Ez nézzük írsz HTML belülről Az a JavaScript, amely 263 00:12:11,845 --> 00:12:13,970 hangzik furcsán, amikor először gondolni rá, 264 00:12:13,970 --> 00:12:15,553 de ez teszi sok értelme utána. 265 00:12:15,553 --> 00:12:17,430 Így meg tudjuk csinálni. 266 00:12:17,430 --> 00:12:21,360 Ha még nem ismeri, HTML, tudom, van egy div egy általános célú 267 00:12:21,360 --> 00:12:22,790 konténer cucc. 268 00:12:22,790 --> 00:12:26,380 Mi lehet visszatérni a div, és belülről ez a div, tudjuk be a cuccot. 269 00:12:26,380 --> 00:12:32,390 >> Tehát mondjuk azt akarjuk, hogy tegyék csak egyenes-up tanulókártya most. 270 00:12:32,390 --> 00:12:34,890 A tanulókártya, azt mondanám, lesz egy kérdést és választ. 271 00:12:34,890 --> 00:12:37,530 Tehát ezen belül div, hadd nyomtassa ki a bekezdés 272 00:12:37,530 --> 00:12:42,155 hogy azt mondja question-- Mi a végső válasz az élet, a világmindenség? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 És akkor a válasz lesz, természetesen, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Hogy nem jött ki jól egyáltalán. 277 00:12:59,730 --> 00:13:04,164 Igen, így alapvetően akkor tényleg levelet HTML belsejében a JavaScript. 278 00:13:04,164 --> 00:13:06,330 És ez lesz kinyomtatható a képernyőn. 279 00:13:06,330 --> 00:13:08,250 Így próbáljuk ki. 280 00:13:08,250 --> 00:13:09,520 >> Szóval megvan a komponens. 281 00:13:09,520 --> 00:13:12,210 El kell mondanunk, hogy reagáljon Az alkatrész a képernyőn 282 00:13:12,210 --> 00:13:18,990 így React.render, így észre, hogy kezelésére app, mint bármely más elemet. 283 00:13:18,990 --> 00:13:21,010 Írunk, hiszen nem volt egy HTML elem. 284 00:13:21,010 --> 00:13:25,100 Mint ahelyett, hogy mint img A kép vagy p bekezdés, 285 00:13:25,100 --> 00:13:28,120 írsz App, így App kezelni, mint egy HTML elem. 286 00:13:28,120 --> 00:13:30,380 Mint már mondtam, ez egy elem a szteroidok. 287 00:13:30,380 --> 00:13:32,870 >> Szóval render App, és hogy ez a hely, hogy tegye azt. 288 00:13:32,870 --> 00:13:37,170 És ez hogyan tudsz mondd meg, hogy hova tegye azt. 289 00:13:37,170 --> 00:13:46,200 Létrehoztam egy egyszerű div a Oldal nevű azonosítóval rendelkező oldal, 290 00:13:46,200 --> 00:13:48,300 és ez az, ahol a elemet fog menni. 291 00:13:48,300 --> 00:13:49,841 >> És nem fogunk futni a HTML. 292 00:13:49,841 --> 00:13:53,145 Alapvetően ez fog kapni betenni ezt az oldalt elem 293 00:13:53,145 --> 00:13:54,270 hogy van a képernyőn. 294 00:13:54,270 --> 00:13:59,210 Szóval ez fut ezt a kódot, és hogy felhívja ezt dolog a képernyőn, szóval itt vagyunk. 295 00:13:59,210 --> 00:14:01,770 Tettünk első reagálnak alkatrész. 296 00:14:01,770 --> 00:14:08,000 >> Ahogyan tehát bedugni, akkor finoman tette egy új típusú komponens, ugye? 297 00:14:08,000 --> 00:14:10,145 Ez az, amit a React.createClass. 298 00:14:10,145 --> 00:14:12,680 És ez az összetevő, amit Mondtam, hogy mit kell tennie. 299 00:14:12,680 --> 00:14:15,590 Amikor ez a komponens a nyomtatható a képernyőre, 300 00:14:15,590 --> 00:14:19,300 kiírja a div A két bekezdés belsejébe. 301 00:14:19,300 --> 00:14:24,460 >> És mit tettünk, tettünk egy új alkalmazás használja a sarokvasra app jelöléssel. 302 00:14:24,460 --> 00:14:27,160 Mondtuk, hogy tedd belül az oldalra elem. 303 00:14:27,160 --> 00:14:29,867 És így is tettem, hogy létrehozta Egy új alkalmazás, amelyeket e sablon. 304 00:14:29,867 --> 00:14:31,200 És akkor azt mondtam, hogy tegye azt. 305 00:14:31,200 --> 00:14:33,680 Tehát azt mondta, OK, app, mit kell kinyomtatni? 306 00:14:33,680 --> 00:14:36,970 Alkalmazás azt mondja, menj ki kell nyomtatni egy div A két bekezdés belsejébe. 307 00:14:36,970 --> 00:14:40,420 És íme, ott a div két bekezdés belsejébe. 308 00:14:40,420 --> 00:14:43,180 Értelme eddig? 309 00:14:43,180 --> 00:14:46,690 >> Szóval, megint az egész kihívása reagálnak csak tudta, hogyan lehet alkatrészeket. 310 00:14:46,690 --> 00:14:48,500 Hogyan lehet a komponensek együtt. 311 00:14:48,500 --> 00:14:51,780 Most, hogy már készül az első alkatrész, menjünk vissza 312 00:14:51,780 --> 00:14:54,284 és hogy komponensek testre szabható. 313 00:14:54,284 --> 00:14:56,700 Szóval tudod, hogyan HTML Önnek adja meg a gombokat osztályok? 314 00:14:56,700 --> 00:14:59,146 Akkor adja meg a horgony a href. 315 00:14:59,146 --> 00:15:00,770 Akkor adja meg a bemenetek típusú, ugye? 316 00:15:00,770 --> 00:15:04,740 Tudod, hogy több egyéni tulajdonságokat az összes elem 317 00:15:04,740 --> 00:15:06,490 hogy érdekessé teszi. 318 00:15:06,490 --> 00:15:09,030 És mi még tehetünk pontosan ugyanaz a dolog. 319 00:15:09,030 --> 00:15:17,500 >> Tehát mondjuk azt akarjuk, app menni tenne bármely kártyát. 320 00:15:17,500 --> 00:15:19,630 Most már csak renderelt egy bedrótozott kártyát. 321 00:15:19,630 --> 00:15:22,530 Tudjuk, hogy csak egy kártya meg tudja csinálni, így vagyunk 322 00:15:22,530 --> 00:15:25,960 megpróbálom, és ezen változtatni, így most hogy mi csak kap némi kártyát. 323 00:15:25,960 --> 00:15:27,410 Ez lesz nyomtassa ki a kártyát. 324 00:15:27,410 --> 00:15:29,380 >> Meg kéne próbálni, és a alkatrészek egy nagyon általános célra. 325 00:15:29,380 --> 00:15:31,654 Szóval így tudtam feladni ez a barátom, és mint a 326 00:15:31,654 --> 00:15:33,820 amit tanulókártya van, Csak táplálja be ide, 327 00:15:33,820 --> 00:15:35,290 és akkor ezt egyedül is. 328 00:15:35,290 --> 00:15:37,650 Tudod, hogy más dolgokat a saját app. 329 00:15:37,650 --> 00:15:40,600 >> De először nézzük megtörni ezt legfeljebb két komponensre, 330 00:15:40,600 --> 00:15:44,500 de szeretnénk külön a kártyát utánnyomás a tényleges alkalmazás része. 331 00:15:44,500 --> 00:15:46,660 Szóval, mit tehetünk mi vagyunk Megváltoztathatja ezt App 332 00:15:46,660 --> 00:15:51,300 hogy CardView, csak egy új nevet a app, 333 00:15:51,300 --> 00:15:54,450 és tudjuk, hogy egy új komponens, az App, 334 00:15:54,450 --> 00:15:56,336 Nem tévesztendő össze a régi App. 335 00:15:56,336 --> 00:16:00,730 Megvan a createClass, és mint a HTML, 336 00:16:00,730 --> 00:16:03,590 akkor fészket reagál alkatrészek belsejében egymással. 337 00:16:03,590 --> 00:16:16,430 >> Tehát ebben render funkciót, függvény visszatérési CardView, 338 00:16:16,430 --> 00:16:18,234 és ez pontosan ugyanaz a dolog. 339 00:16:18,234 --> 00:16:19,400 Nézze meg, miért ez ugyanaz a dolog? 340 00:16:19,400 --> 00:16:22,590 Ahelyett, hogy csak az app, hogy az a div és párosítás belsejébe, 341 00:16:22,590 --> 00:16:26,194 Az alkalmazás teszi a CardView, és a CardView teszi a div és a bekezdésben. 342 00:16:26,194 --> 00:16:29,110 Tehát ez az első példa arra, fészkelő elemek belsejében egymást. 343 00:16:29,110 --> 00:16:32,177 Ennek van értelme? 344 00:16:32,177 --> 00:16:33,760 Szóval, megint van egy CardView elem. 345 00:16:33,760 --> 00:16:37,250 Van app elemek hogy ez nagyobb, mint. 346 00:16:37,250 --> 00:16:40,990 >> OK, így azt akarjuk, hogy CardView-- ha ad egy jó CardView egy bizonyos kártya, 347 00:16:40,990 --> 00:16:43,370 ez lesz nyomtassa ki az Ön számára, nem igaz? 348 00:16:43,370 --> 00:16:48,050 Tehát az első, meg kell, hogy egy kártyát, úgyhogy győződjön meg a kártya objektumot. 349 00:16:48,050 --> 00:17:02,930 Úgyhogy én kártyát equal-- ha minden ismerős, 350 00:17:02,930 --> 00:17:05,260 ez csak a jelölés-készítés objektum a JavaScript. 351 00:17:05,260 --> 00:17:09,280 Ez olyan, mint egy struct C, így tettünk egy kártyát, 352 00:17:09,280 --> 00:17:15,920 és így most már át ezt a kártyát egy tulajdonság vagy attribútum HTML 353 00:17:15,920 --> 00:17:17,290 terminológiát mi kb. 354 00:17:17,290 --> 00:17:20,210 Szóval ezt meg tudjuk tenni, App kártya megegyezik myCard. 355 00:17:20,210 --> 00:17:23,200 >> Tudja, hogy a bemenet, te input type egyenlő szöveg vagy gombot 356 00:17:23,200 --> 00:17:25,240 osztály tel egyenlõ BTN a bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Ugyanez a gondolat, App kártya equals-- megvan, hogy nadrágtartó here-- 358 00:17:29,500 --> 00:17:33,830 App kártya megegyezik myCard, így ez a azt mondja, hogy ezt a kártyát objektumot. 359 00:17:33,830 --> 00:17:39,149 Megyek át, mint egy ingatlan az alkalmazás összetevője. 360 00:17:39,149 --> 00:17:41,440 És ez az app komponens tudja elérni azt, és nem 361 00:17:41,440 --> 00:17:43,580 Érdekes dolgokat vele. 362 00:17:43,580 --> 00:17:47,650 >> Tehát mi app lesz kapnak egy kártyát, így most, 363 00:17:47,650 --> 00:17:49,980 vessünk az app csak ad A kártyát az CardView 364 00:17:49,980 --> 00:17:53,110 önmagában, hiszen mint az alkalmazás nem tudni fogja, mit kell csinálni vele, 365 00:17:53,110 --> 00:17:54,850 ezért most is csak add oda a CardView. 366 00:17:54,850 --> 00:18:00,050 Így fogunk átadni a Ugyanígy, kártya megegyezik, 367 00:18:00,050 --> 00:18:05,426 és így minden egyes alkatrész érheti el dolgok kapott rá. 368 00:18:05,426 --> 00:18:07,800 Ők elérheti az ingatlan hogy volna adni azt 369 00:18:07,800 --> 00:18:09,470 Ezzel a szintaxis, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Tehát mi történik itt megvan a myCard objektumot. 372 00:18:14,920 --> 00:18:18,250 Akkor adja át az app segítségével App kártya megegyezik myCard. 373 00:18:18,250 --> 00:18:21,420 Hogy a kártya objektumot kapjon a kb. 374 00:18:21,420 --> 00:18:24,400 Az alkalmazás hozzáférési mint this.props.card. 375 00:18:24,400 --> 00:18:28,780 Ez olyan, mint egy kép tudja, hogy mi a forrása. 376 00:18:28,780 --> 00:18:31,972 >> Ez az alkalmazás tudja, mi ez kártyát van, és meg tudja csinálni dolgokat vele. 377 00:18:31,972 --> 00:18:32,930 Meg lehet csinálni számításokat. 378 00:18:32,930 --> 00:18:35,290 Ez alapján döntenek le róla. 379 00:18:35,290 --> 00:18:39,950 >> Egyelőre azt akartam átadni this.props.card rá a CardView. 380 00:18:39,950 --> 00:18:43,420 Értelme eddig? 381 00:18:43,420 --> 00:18:45,210 Nem lesz több értelme most. 382 00:18:45,210 --> 00:18:46,990 >> OK, így most már itt tartunk CardView. 383 00:18:46,990 --> 00:18:51,719 A CardView, mivel a kártya, kell nyomtassa ki a kérdést és választ. 384 00:18:51,719 --> 00:18:54,510 Most már csak nyomtatott ki néhány bedrótozott kérdések és válaszok. 385 00:18:54,510 --> 00:18:57,720 Meg kell találnunk out-- van szükségünk kérni a kártyát, hogy adtak nekünk 386 00:18:57,720 --> 00:19:01,360 mi a kérdés és a válasz, és majd nyomtassa ki ezt a képernyőt. 387 00:19:01,360 --> 00:19:02,470 >> Így meg tudjuk csinálni itt. 388 00:19:02,470 --> 00:19:06,135 Ebben render begin-- először nem egyenlő. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Szóval mit csinálunk itt tudjuk, hogy a kártyák adott nekünk, hogy egy ingatlant, 391 00:19:13,050 --> 00:19:13,580 jobbra? 392 00:19:13,580 --> 00:19:15,930 Ez adott nekünk, mint egy bemeneti. 393 00:19:15,930 --> 00:19:19,440 Tetszik ez majdnem olyan, mint érvek arra a funkcióra. 394 00:19:19,440 --> 00:19:22,810 A kártya egy érv Szinte erre CardView. 395 00:19:22,810 --> 00:19:25,239 >> Majd kivonat, hogy, és tedd azt a változó kérdés. 396 00:19:25,239 --> 00:19:27,280 Ellenőrizze, hogy a válasz ment A változó választ. 397 00:19:27,280 --> 00:19:31,130 Figyelmeztet, hogy a kártya válaszolni. 398 00:19:31,130 --> 00:19:35,072 És most, hogy van ilyen, nyomtatás helyett, hogy a szöveget, 399 00:19:35,072 --> 00:19:37,030 fogunk kinyomtatni amit adtak nekünk. 400 00:19:37,030 --> 00:19:43,580 >> Tehát ez stuff-- így fogunk oltani Kérdés Válasz. 401 00:19:43,580 --> 00:19:46,380 Lássuk, ha ez működik. 402 00:19:46,380 --> 00:19:52,800 Cool, úgyhogy lépjen át rajta még egyszer, csak hogy biztos. 403 00:19:52,800 --> 00:20:00,470 >> Szóval a kártya kártya célja, és mi adnak, hogy a kártyát a app. 404 00:20:00,470 --> 00:20:04,790 És az app fog tartani a kártyát, és adja meg a CardView. 405 00:20:04,790 --> 00:20:09,190 És ez CardView mondja, ha ad nekem tanulókártya tárgy, 406 00:20:09,190 --> 00:20:11,920 Majd nyomtassa ki a kérdést és a válasz, igaz? 407 00:20:11,920 --> 00:20:14,590 >> Szóval, mit tehetnék, hogy én is Levél ezt a kódot, az első 408 00:20:14,590 --> 00:20:16,580 mint 10 sornyi programkódot, hogy a barátom. 409 00:20:16,580 --> 00:20:18,820 Nem tudta beágyazni a saját alkalmazás. 410 00:20:18,820 --> 00:20:27,200 És amíg ő nem ugyanaz a dolog, mint CardView kártya megegyezik ez, 411 00:20:27,200 --> 00:20:30,580 amíg ő hozta létre a CardView és odaadta a megfelelő információkat, 412 00:20:30,580 --> 00:20:31,987 tudta tenni saját lapját. 413 00:20:31,987 --> 00:20:34,320 És így ez is, ez egy igazán Hűvös módja, hogy építsenek 414 00:20:34,320 --> 00:20:35,906 alkatrészeket használó egymást, ugye? 415 00:20:35,906 --> 00:20:38,280 Ez a kártya, nem tudtam közzé ez CardView az interneten, 416 00:20:38,280 --> 00:20:39,790 és az emberek képesek lennének használni. 417 00:20:39,790 --> 00:20:45,070 Tehát alapvetően, ez olyan, mint az egyik alapfunkciók a C könyvtár. 418 00:20:45,070 --> 00:20:47,280 >> Ez egy olyan funkció, valaki megírta. 419 00:20:47,280 --> 00:20:48,419 Adsz egy bizonyos bemenet. 420 00:20:48,419 --> 00:20:49,710 Ez lesz előállítani egy bizonyos kimenetet. 421 00:20:49,710 --> 00:20:50,890 Téged nem érdekel, hogyan működik belsőleg. 422 00:20:50,890 --> 00:20:53,790 Amíg adsz meg a jobb bemenet, ez lesz a helyes kimenetet. 423 00:20:53,790 --> 00:20:57,850 >> És egy alkatrész lehet gondoltak azonos módon. 424 00:20:57,850 --> 00:21:00,280 Ez olyan, mint CardView a könyvtár működését. 425 00:21:00,280 --> 00:21:03,400 Ha kap némi kártya mint egy ingatlan, akkor az 426 00:21:03,400 --> 00:21:05,095 nyomtassa ki a tartalmát, hogy a kártyát. 427 00:21:05,095 --> 00:21:16,820 Mint ha tudom megváltoztatni a kártyát ahelyett, mintha mi 5 plusz 37, 428 00:21:16,820 --> 00:21:19,210 akkor megfelelően frissíti. 429 00:21:19,210 --> 00:21:21,955 Tehát csak a változó a bemeneti, kap egy bizonyos kimeneti. 430 00:21:21,955 --> 00:21:24,830 Szóval lehet gondolni alkatrészek szinte mint funkciók ilyen módon, ami 431 00:21:24,830 --> 00:21:25,920 akkor össze. 432 00:21:25,920 --> 00:21:29,440 Kapsz bemenet, mint ez CardView mint a bemeneti, kimeneti kapsz. 433 00:21:29,440 --> 00:21:31,900 Ebben az esetben a kimenet a HTML. 434 00:21:31,900 --> 00:21:34,404 Értelme eddig? 435 00:21:34,404 --> 00:21:36,890 Cool, így ismét tulajdonságok hogyan lehet átadni információkat 436 00:21:36,890 --> 00:21:40,900 be és ki a komponensek. 437 00:21:40,900 --> 00:21:42,740 >> OK, így csináljuk meg ezt dolog interaktív. 438 00:21:42,740 --> 00:21:44,450 Most ez milyen unalmas. 439 00:21:44,450 --> 00:21:45,520 Mi [hallhatatlan]? 440 00:21:45,520 --> 00:21:48,210 Lehet nyomtatni néhány ki, de ez minden meg tudja csinálni. 441 00:21:48,210 --> 00:21:51,550 >> Szóval menjünk vissza a Régi kérdés csak most. 442 00:21:51,550 --> 00:21:54,405 OK, így most ezeket a komponenseket unalmas, mert mindent csinálni, 443 00:21:54,405 --> 00:21:55,030 kapnak bemenetet. 444 00:21:55,030 --> 00:21:56,100 Teszik kimenet, ugye? 445 00:21:56,100 --> 00:21:57,049 Ez a fajta unalmas. 446 00:21:57,049 --> 00:21:59,090 Azt szeretnénk, hogy a komponensek kell tudnia, hogy 447 00:21:59,090 --> 00:22:02,150 valamilyen belső állapot, mint emlékszik valamire. 448 00:22:02,150 --> 00:22:05,320 >> Egy tanulókártya számára Például, hogy milyen állapotban 449 00:22:05,320 --> 00:22:07,550 Lehet, szeretne emlékezni tanulókártya? 450 00:22:07,550 --> 00:22:09,740 Milyen átmeneti állapot Lehet akarsz emlékezni 451 00:22:09,740 --> 00:22:12,491 Egy tanulókártya egy tanulókártya app? 452 00:22:12,491 --> 00:22:13,990 Közönség: Mindegy, hogy már tükrözött? 453 00:22:13,990 --> 00:22:14,990 NEEL MEHTA: Ja, persze. 454 00:22:14,990 --> 00:22:17,665 Szóval érdemes tartani követni a maga szembenézni, vagy 455 00:22:17,665 --> 00:22:19,100 Ön oldalával lefelé a kártyát. 456 00:22:19,100 --> 00:22:23,420 A Facebook-on, például, akkor akar emlékezni, ahol a hírcsatorna 457 00:22:23,420 --> 00:22:25,870 Te vagy tetszik, aki profil csinálsz most. 458 00:22:25,870 --> 00:22:30,127 >> A Messenger, mint amit szöveget írja a beviteli mezőbe, ugye? 459 00:22:30,127 --> 00:22:31,710 Ha frissítse az oldalt, hogy elmúlik. 460 00:22:31,710 --> 00:22:32,793 De nem igazán érdekel. 461 00:22:32,793 --> 00:22:33,770 Ez csak átmeneti. 462 00:22:33,770 --> 00:22:34,548 Igen? 463 00:22:34,548 --> 00:22:36,152 >> Közönség: [hallható] 464 00:22:36,152 --> 00:22:38,360 NEEL MEHTA: mint a villám kártya, mint te is látni 465 00:22:38,360 --> 00:22:40,290 A kérdés oldalán vagy a válasz oldalon? 466 00:22:40,290 --> 00:22:41,070 >> Közönség: OK. 467 00:22:41,070 --> 00:22:43,270 >> NEEL MEHTA: Mint egy kétoldali tanulókártya, ugye? 468 00:22:43,270 --> 00:22:46,370 Igen, ezért azt szeretné, Van ez a gondolat a most 469 00:22:46,370 --> 00:22:50,370 Van tulajdonságok, ami olyan, mint bemenet, de az állam, amely ideiglenes, uh, 470 00:22:50,370 --> 00:22:51,839 hol van az oldalon, ugye? 471 00:22:51,839 --> 00:22:54,380 Ismét azt mondta Facebook Messenger, én, mint amelyek fő 472 00:22:54,380 --> 00:22:56,550 Ön által megtekintett Facebook vagy aki profilját, ugye? 473 00:22:56,550 --> 00:22:58,030 >> Ez csak átmeneti. 474 00:22:58,030 --> 00:23:01,200 Fontos, hogy a felhasználó ne mi folyik itt, de frissíteni kell az oldalt. 475 00:23:01,200 --> 00:23:02,250 Ez nem igazán számít. 476 00:23:02,250 --> 00:23:04,530 Szóval ez átmeneti állapot, így mindannyian úgy állapotban. 477 00:23:04,530 --> 00:23:06,250 >> Szóval, megint ott van az állam és kellékek. 478 00:23:06,250 --> 00:23:09,084 Kellékeket bemeneti adott ettől az adatforrás. 479 00:23:09,084 --> 00:23:10,250 Állami olyan, mint alapértelmezett. 480 00:23:10,250 --> 00:23:13,700 Olyan ez, mint a cucc, hogy teszi a dolgot interaktív. 481 00:23:13,700 --> 00:23:17,720 >> Tehát a mi CardView-- vessünk mi CardView-- így volt szép. 482 00:23:17,720 --> 00:23:21,420 Mit fogunk csinálni itt, megyünk megérinteni CardView, és csak CardView. 483 00:23:21,420 --> 00:23:25,105 És így a barátom, aki kapott e, azt nem veszi észre a különbséget. 484 00:23:25,105 --> 00:23:27,230 Nem kellene változtatni minden a saját kódját, 485 00:23:27,230 --> 00:23:29,410 De nekik látják CardView kapott souped fel. 486 00:23:29,410 --> 00:23:31,270 Ez egy szép az egészben alkatrészeket. 487 00:23:31,270 --> 00:23:35,290 >> OK, így a mi CardView, próbáljuk meg nyomon követni, hogy mi fokozatosan fel 488 00:23:35,290 --> 00:23:36,560 vagy lefelé. 489 00:23:36,560 --> 00:23:40,480 Ebben reagál tesszük ezt, hogy először meghatározva az eredeti állapot. 490 00:23:40,480 --> 00:23:42,070 Amennyiben ez a kártya kezdődik? 491 00:23:42,070 --> 00:23:48,480 >> Tehát egy függvény nevű getInitialState működni, és visszatérünk egy tárgy. 492 00:23:48,480 --> 00:23:53,310 Ez az objektum tartalmaz néhány állam, és az állam csak egy kulcs-érték párt. 493 00:23:53,310 --> 00:23:56,950 Mint instruct, van egy kulcsot és egy értéket, akkor, mint név egy húr. 494 00:23:56,950 --> 00:24:01,410 >> Ebben az esetben, mondjuk előtt igaz. 495 00:24:01,410 --> 00:24:03,760 Ez azt mondja, hogy van egy állapot. 496 00:24:03,760 --> 00:24:06,570 Ennek egyik eleme az állam egy attribútum nevezett első. 497 00:24:06,570 --> 00:24:09,649 [Hallható], így alapesetben mi vagyunk az első a kártya, 498 00:24:09,649 --> 00:24:11,440 és meg tudjuk változtatni ezt ahogy flip a kártyát. 499 00:24:11,440 --> 00:24:13,380 Van értelme? 500 00:24:13,380 --> 00:24:18,190 >> OK, így tehetik, most vagyunk mutatja az a kérdés, és a válasz. 501 00:24:18,190 --> 00:24:20,860 Most mit kell tennünk A mutatják a kérdés 502 00:24:20,860 --> 00:24:24,370 ha mi vagyunk az első a kártyát, így A válasz az, hogy a kártya hátoldalán. 503 00:24:24,370 --> 00:24:26,850 Ezért van minden, hogy A kártya interaktív. 504 00:24:26,850 --> 00:24:28,100 Így próbáljuk meg ezt itt. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Nos, először csak, hogy egy változó. 507 00:24:33,620 --> 00:24:37,790 Kérhetünk most this.state.front. 508 00:24:37,790 --> 00:24:42,010 Mi hozzáférés ál- azonos vagyunk hozzáférést kellékeket, így this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Ha mi vagyunk elöl, majd a szöveget van this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Ha már itt tartunk az első a kártyát, megyünk próbálni, és megragad 512 00:24:51,360 --> 00:24:52,485 A kérdést a kártyáról. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 Ellenkező esetben, ha mi vagyunk a hátán A kártya, mit tegyünk? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> Közönség: A válasz? 517 00:25:02,750 --> 00:25:05,041 >> NEEL MEHTA: Igen, így szöveget egyenlő this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 De ha azt veszi észre, mi használ az állam, hogy a döntést 520 00:25:10,930 --> 00:25:14,420 mert most a komponens egy kicsit más 521 00:25:14,420 --> 00:25:16,710 alapján le, hogy ezek kölcsönhatásba vele. 522 00:25:16,710 --> 00:25:20,355 Tehát ahelyett, hogy kinyomtatja ezt, akkor csak nyomtassa ki a szöveget. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, így most, mint látod, látjuk csak az a kérdés. 525 00:25:28,650 --> 00:25:37,720 És ha én változtatni az állam itt manuálisan elöl hamis kapunk 42 vissza. 526 00:25:37,720 --> 00:25:39,720 >> Tehát, újra, ez a komponens saját állapotát. 527 00:25:39,720 --> 00:25:43,440 Mint egy gombot sem tudja, hogy ez nem nyomta-e vagy sem, 528 00:25:43,440 --> 00:25:46,080 ez a dolog, tudja, mi a az első vagy a hátsó. 529 00:25:46,080 --> 00:25:48,320 Alapértelmezésben ez az első. 530 00:25:48,320 --> 00:25:50,840 És akkor, ha ez az első, akkor nyomtassa ki a kérdést. 531 00:25:50,840 --> 00:25:53,106 Ha ez a hátsó, akkor nyomtassa ki a választ. 532 00:25:53,106 --> 00:25:54,980 Tehát, ismét, az információt adott ugyanaz. 533 00:25:54,980 --> 00:25:59,090 Csak úgy néz ki a különböző alapján, hogy hogyan programozni. 534 00:25:59,090 --> 00:26:02,670 Tehát, például a Facebook Messenger, akkor is, ha kap ugyanazt az adatforrást, 535 00:26:02,670 --> 00:26:05,170 ez eltérhet mert az állam más. 536 00:26:05,170 --> 00:26:08,421 Ön éppen egy más ember üzenetét. 537 00:26:08,421 --> 00:26:10,930 >> OK, így ez mind szép és jó, de most mi van valójában 538 00:26:10,930 --> 00:26:15,940 hogy képesek legyünk változtatni, hogy a kártya első vagy hátsó. 539 00:26:15,940 --> 00:26:19,010 Tudjuk ezt hozzáadásával egy flip gombot, egy gombot a kártyán 540 00:26:19,010 --> 00:26:22,950 majd fordítsa meg a kártyát, ha ez [hallhatatlan]. 541 00:26:22,950 --> 00:26:31,770 Tehát tegyük hozzá egy gombot itt, ebben a gombra, és ezt a gombot fogja mondani a flip. 542 00:26:31,770 --> 00:26:35,650 >> És most így, akkor nem csinál semmit. 543 00:26:35,650 --> 00:26:37,075 Csak úgy néz ki szép. 544 00:26:37,075 --> 00:26:43,650 Mit tehetünk, tudunk hozzá egy kattintással handler, onClick egyenlő this.flip, 545 00:26:43,650 --> 00:26:44,820 és mi határozza meg a flip később. 546 00:26:44,820 --> 00:26:47,120 De alapvetően, onClick egy olyan funkció 547 00:26:47,120 --> 00:26:48,675 meghívásra kerül, ha a felhasználó rákattint. 548 00:26:48,675 --> 00:26:52,330 >> Tehát a gomb tudni ha ez már kattintott. 549 00:26:52,330 --> 00:26:54,750 Ment ez már kattintott, akkor fordítsa meg a kártyát. 550 00:26:54,750 --> 00:26:58,382 Ez olyan, mint a pizza srác. 551 00:26:58,382 --> 00:27:01,590 Te, mint, rendben, ha valaki hív, én szállít pizzát, ugye? 552 00:27:01,590 --> 00:27:03,420 >> Regisztrálja ezt hallgatót. 553 00:27:03,420 --> 00:27:04,530 Te figyelj, egy esemény. 554 00:27:04,530 --> 00:27:07,657 Ön kap hívják, és amikor a esemény történik, akkor tennie kell valamit. 555 00:27:07,657 --> 00:27:08,240 Kapsz pizzát. 556 00:27:08,240 --> 00:27:11,480 Ebben az esetben, ha éppen kattintott, flip a kártyát. 557 00:27:11,480 --> 00:27:14,560 >> És ezért meg kell határozni a funkció, amely megfordítja a kártyát, 558 00:27:14,560 --> 00:27:17,930 így fogunk írni, hogy jobb Itt, flip funkció. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 És így mit gondolsz a flip fog csinálni? 561 00:27:23,680 --> 00:27:27,180 Ez megint csak meghívásra kerül, ha mi kattintson flip gombra. 562 00:27:27,180 --> 00:27:29,406 Mit tegyen a funkció a flip csinálni? 563 00:27:29,406 --> 00:27:34,136 >> Közönség: Változás this.state.front az igaz, hogy hamis, hamis, hogy igaz. 564 00:27:34,136 --> 00:27:38,420 >> NEEL MEHTA: Igen, így megtesz minden this.front is-- az első állam. 565 00:27:38,420 --> 00:27:40,930 Vegyük az első állam, ha igaz, hogy hamis. 566 00:27:40,930 --> 00:27:42,530 Ha ez hamis, hogy ez igaz, ugye? 567 00:27:42,530 --> 00:27:45,330 Úgyhogy próbáljuk ezt. 568 00:27:45,330 --> 00:27:48,240 >> Nem tudod megváltoztatni állam csak ennek révén this.state. 569 00:27:48,240 --> 00:27:50,380 Ezt nem teheti ezt. 570 00:27:50,380 --> 00:27:52,030 Ezt nem tehetem. 571 00:27:52,030 --> 00:27:55,810 Ki kell használni a funkciót nevű this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Szóval lehet mondani this.setState előtt vastagbél ezt is, amelyben szintén a felkiáltás: 573 00:28:03,230 --> 00:28:04,330 pont az ellenkezőjét. 574 00:28:04,330 --> 00:28:07,420 Azt hiszem, ha ez az. state.front Igaz, hogy akkor viszont hamis. 575 00:28:07,420 --> 00:28:09,170 Szóval megbeszélünk az állam true-ról false. 576 00:28:09,170 --> 00:28:11,430 Ha ez hamis, akkor állítsd false true. 577 00:28:11,430 --> 00:28:17,210 >> Csak észre, hogy mi meg és kap enyhén másképpen, és így próbáljuk meg. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, nézd meg ezt. 579 00:28:18,675 --> 00:28:21,810 A flip gomb ilyenkor kapcsolja a elölről hátrafelé állapotban. 580 00:28:21,810 --> 00:28:24,990 >> És így itt, ahol látsz egy kis varázsa reagálnak. 581 00:28:24,990 --> 00:28:28,420 Mint azt soha nem mondta azt, hogy újra tegyék. 582 00:28:28,420 --> 00:28:30,910 Mi soha nem mondtam, hogy dolgozza át semmit. 583 00:28:30,910 --> 00:28:32,630 Ha ezt nélkül reagál, jobb lenne, ha 584 00:28:32,630 --> 00:28:34,588 még az alábbiakra: szeretem, ha a Flip gombra kattint, 585 00:28:34,588 --> 00:28:37,290 azt kell mondanom, hogy manuálisan újra tehetik, igaz? 586 00:28:37,290 --> 00:28:43,050 >> Reagálnak nagyon klassz, hogy ha hogy ez egy bizonyos állami és tulajdonságai, 587 00:28:43,050 --> 00:28:45,760 akkor mindig render pontosan ugyanaz a dolog. 588 00:28:45,760 --> 00:28:48,690 És amikor azt valaha is változtatni az állam és a tulajdonságok, 589 00:28:48,690 --> 00:28:50,819 reagálnak csak újra teszi az egészet. 590 00:28:50,819 --> 00:28:52,860 Úgy tudja, hogy van egy Egy-egy levelezés 591 00:28:52,860 --> 00:28:57,270 az állam és a paraméter és a HTML. 592 00:28:57,270 --> 00:29:00,110 Tehát, ha bármelyik ezek változások révén egy sor állam, 593 00:29:00,110 --> 00:29:03,750 ez meg fog változni, hogy a díjazás újra renderelt. 594 00:29:03,750 --> 00:29:06,650 És így alapvetően reagálnak, mint vár, hogy változtatni. 595 00:29:06,650 --> 00:29:09,870 >> Amikor megváltozik valami, ez lesz újra tehetik az egész oldalt. 596 00:29:09,870 --> 00:29:12,480 És ha úgy hangzik, nem hatékony, azért, mert ez lenne, 597 00:29:12,480 --> 00:29:15,050 de reagálni használ semmit úgynevezett árnyék DOM. 598 00:29:15,050 --> 00:29:19,950 Ahelyett, rajz közvetlenül az oldalon, akkor tartja a virtuális HTML fa emlékére. 599 00:29:19,950 --> 00:29:23,620 >> Tudja, HTML, mint egy fa, mint egy hierarchikus adatszerkezet. 600 00:29:23,620 --> 00:29:28,990 Úgy tartja egy hamis fa memória, és amikor frissíti az oldalt, 601 00:29:28,990 --> 00:29:31,940 ez lesz felhívni egy másik hamis fa, és akkor számítani 602 00:29:31,940 --> 00:29:35,120 Milyen változásokra van szüksége ahhoz, hogy a oldalt, hogy a két fa egyenlő. 603 00:29:35,120 --> 00:29:38,540 Tehát alapvetően, hogy gyakorlatilag újbóli teszi sok. 604 00:29:38,540 --> 00:29:41,540 És akkor csak tetszik megváltoztatja a oldal kis csíp, ha szükséges, 605 00:29:41,540 --> 00:29:44,240 így nagyon, nagyon, nagyon hatékony. 606 00:29:44,240 --> 00:29:46,970 >> Tehát alapvetően reagáló amikor csak változtatni valamit, 607 00:29:46,970 --> 00:29:49,010 ez lesz újra feldolgozott oldalt virtuálisan. 608 00:29:49,010 --> 00:29:52,830 Ez lesz kitalálni, hogy mit kell tennem, hogy megváltoztatni, hogy az igazi oldal tükrözik 609 00:29:52,830 --> 00:29:55,602 A virtuális oldalt, és megteszem. 610 00:29:55,602 --> 00:29:56,560 Ez a virtuális DOM. 611 00:29:56,560 --> 00:29:59,350 Ez az egyik legnagyobb jellemzői reagálnak. 612 00:29:59,350 --> 00:30:00,880 >> Ennek van értelme? 613 00:30:00,880 --> 00:30:01,540 Bármi kérdés? 614 00:30:01,540 --> 00:30:02,040 Igen? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> Közönség: Hogyan működik hasonlítsa még az MVC 617 00:30:08,969 --> 00:30:10,760 hogy beszéltünk előtt, mint a források. 618 00:30:10,760 --> 00:30:13,527 >> NEEL MEHTA: Igen, a kérdés hogyan viszonyul MVC? 619 00:30:13,527 --> 00:30:14,610 Kérdezett források. 620 00:30:14,610 --> 00:30:16,445 Nos, beszéljünk arról, hogyan működik. 621 00:30:16,445 --> 00:30:18,190 >> Ebben MVC, azt frissíti a modellt. 622 00:30:18,190 --> 00:30:20,560 Ebben az esetben mi volna a minta. 623 00:30:20,560 --> 00:30:24,540 A kilátás lenne a flip-gombot, és a vezérlő 624 00:30:24,540 --> 00:30:26,310 lenne flip funkció. 625 00:30:26,310 --> 00:30:28,450 Így a néző azt mondja a vezérlő flip telefont. 626 00:30:28,450 --> 00:30:30,370 Flip azt mondja a modellt megváltoztatni, ugye? 627 00:30:30,370 --> 00:30:33,915 >> És így, ha nem egy MVC, akkor hallgatni a modell változtatni, 628 00:30:33,915 --> 00:30:37,150 és akkor újra tehetik a nézetet kell. 629 00:30:37,150 --> 00:30:39,210 Vagy csak meg kell tetszik a kontrollerrel. 630 00:30:39,210 --> 00:30:42,418 Várja meg, amíg a modell változtatni, majd válogathat egy részét, mint egy dolog, 631 00:30:42,418 --> 00:30:44,032 változtatni. 632 00:30:44,032 --> 00:30:45,740 Itt van egy dolog, de egy nagy app, 633 00:30:45,740 --> 00:30:48,510 szeretned kell emlékezni, mit A változás minden egyes helyen, 634 00:30:48,510 --> 00:30:50,290 így ez egy kicsit bosszantó. 635 00:30:50,290 --> 00:30:53,670 És így reagál szép mert van egy árnyék Dom. 636 00:30:53,670 --> 00:30:56,040 Ez engedheti meg magának, hogy csak átírni az egészet. 637 00:30:56,040 --> 00:30:58,680 Nem kell, hogy szelektíven mint tudod mit frissíteni. 638 00:30:58,680 --> 00:31:02,186 >> A Facebook-on, ha tetszik kap egy új üzenetet, az MVC, 639 00:31:02,186 --> 00:31:04,060 azt kell emlékezni, OK, változtassa meg a dolgokat 640 00:31:04,060 --> 00:31:06,260 a tetején a oldal, az üzenet ikon. 641 00:31:06,260 --> 00:31:08,290 Szintén pop egy új ablak alján. 642 00:31:08,290 --> 00:31:10,070 Is, hogy egy új dolog az ablakba. 643 00:31:10,070 --> 00:31:11,060 Is játszani egy hangot. 644 00:31:11,060 --> 00:31:13,150 >> Ez egy csomó dolgot kiment egyidejűleg. 645 00:31:13,150 --> 00:31:15,320 És így, ha nem Van egy árnyék Dom, jobb lenne, ha 646 00:31:15,320 --> 00:31:18,740 meg kell csinálni, hogy kézzel, mert nem tudsz megszabadulni a teljes oldalt. 647 00:31:18,740 --> 00:31:21,430 Nem engedheti meg magának, hogy, ezért van, megváltoztatni minden dolog kézzel, 648 00:31:21,430 --> 00:31:23,990 ami igazán bosszantó MVC. 649 00:31:23,990 --> 00:31:27,640 >> Tehát annak érdekében, hogy takarékos, ők szelektíven 650 00:31:27,640 --> 00:31:30,750 frissítse az oldalt, amely hatékony, hanem a zavaró. 651 00:31:30,750 --> 00:31:34,002 Ebben reagál, mert az Árnyék Dom, kapsz két dolgot ingyen. 652 00:31:34,002 --> 00:31:35,710 Ez a hatékony, mert Az Árnyék Dom. 653 00:31:35,710 --> 00:31:37,210 A szűk frissíti az oldalt. 654 00:31:37,210 --> 00:31:40,292 Ez nem csinál a fa manipuláció. 655 00:31:40,292 --> 00:31:41,250 Kapsz hatékonyságát. 656 00:31:41,250 --> 00:31:45,420 Ön is kap a könnyű használat miatt ha csak átírni az egész oldalt, 657 00:31:45,420 --> 00:31:48,970 de te csak tudom, minden rendben, a dolgok lesznek az oldalon valahol. 658 00:31:48,970 --> 00:31:51,180 Lehet, hogy egy másik helyen, de ez lesz az oldalon, ugye? 659 00:31:51,180 --> 00:31:52,860 Szóval csak újra renderelt Az egész dolog szinte, 660 00:31:52,860 --> 00:31:55,540 és lehet, hogy egy pár változtatásokat maga az oldal. 661 00:31:55,540 --> 00:31:57,850 >> Szóval, megint az MVC akkor kell választania 662 00:31:57,850 --> 00:32:01,840 a könnyű használat és a hatékonyság, és reagálnak, akkor kap mind. 663 00:32:01,840 --> 00:32:04,020 Tehát jobb. 664 00:32:04,020 --> 00:32:05,220 Van értelme? 665 00:32:05,220 --> 00:32:06,676 Szilárd. 666 00:32:06,676 --> 00:32:12,080 >> OK, tehát nézzük beszéljünk egy kicsit a 4. lépést, 667 00:32:12,080 --> 00:32:14,740 hogyan tudunk beágyazni alkatrészeket. 668 00:32:14,740 --> 00:32:16,260 Így van ez most. 669 00:32:16,260 --> 00:32:19,420 Megvan a jó kis gombot. 670 00:32:19,420 --> 00:32:23,157 Mi lehet fordítsa vissza és oda, és ez minden, hogy nem. 671 00:32:23,157 --> 00:32:24,990 Tegyük fel, hogy szeretnénk Van egy másik összetevője. 672 00:32:24,990 --> 00:32:28,730 Mondjuk mi tanulókártya app kell tartalmaznak egy listát az összes kártya 673 00:32:28,730 --> 00:32:31,520 hogy van, úgy, hogy azt jelenti, kell egy másik összetevő. 674 00:32:31,520 --> 00:32:32,970 Nos, talán ez egy lista nézet. 675 00:32:32,970 --> 00:32:36,200 Csináljunk egy listát véli, hogy egyeztethető össze a CardView, 676 00:32:36,200 --> 00:32:39,680 és ez a lista és CardView tetszeni fog együtt dolgozni. 677 00:32:39,680 --> 00:32:43,190 És akkor is össze őket, hogy a mi app az Ön számára. 678 00:32:43,190 --> 00:32:45,160 >> Tehát az első, kössünk pár kártya van. 679 00:32:45,160 --> 00:32:46,370 Mondjuk, hogy milyen lap? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 És csak azért, hogy ne kelljen untatni beírásával, 682 00:32:51,910 --> 00:32:53,410 Csak megyek másolni innen. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 És így fogok nem hogy ez csak egy kártyát. 685 00:33:03,580 --> 00:33:06,910 Megyek, hogy ez egy sor kártyákat. 686 00:33:06,910 --> 00:33:10,240 Tehát először a apps fog törni most. 687 00:33:10,240 --> 00:33:14,717 Rendben, akkor megyünk, hogy ez képes kezelni több kártyát. 688 00:33:14,717 --> 00:33:17,800 Tehát először megyünk, hogy ez nem Csak egy kártyát, de egy sor kártyák, 689 00:33:17,800 --> 00:33:18,700 mint egy listát a kártyákat. 690 00:33:18,700 --> 00:33:20,980 És ebben az esetben, már hárman. 691 00:33:20,980 --> 00:33:27,280 >> Rendben, így app lesz, hogy egy listát kártyák, 692 00:33:27,280 --> 00:33:29,870 és ez lesz eldönteni, melyik egy mutatni a CardView. 693 00:33:29,870 --> 00:33:33,740 A CardView csak render egy kártyát, de az alkalmazás 694 00:33:33,740 --> 00:33:37,610 kap egy listát az összes kártyát, ugye? 695 00:33:37,610 --> 00:33:40,820 >> Tehát amikor kitaláljuk, egy kártyát, hogy a CardView, 696 00:33:40,820 --> 00:33:44,660 hogyan tippelni lehet, hogy képes dönteni arról, hogy melyik kártyát 697 00:33:44,660 --> 00:33:47,064 megmutatni? 698 00:33:47,064 --> 00:33:49,980 Ahhoz, hogy te egy csipetnyi, hogy átmenetileg Nem lesz megtekintésére egy bizonyos kártyát. 699 00:33:49,980 --> 00:33:53,260 Ha frissítse az oldalt, akkor csak menj vissza az első kártyát. 700 00:33:53,260 --> 00:33:55,464 Ez rendben van, mert ez átmeneti. 701 00:33:55,464 --> 00:33:56,630 Milyen technikával lehet azt használni? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> Közönség: Lehet, hogy egy változó így, mint te kellett előtt. 704 00:34:08,760 --> 00:34:11,989 Igaz ez, amit lehetett Van jelenlegi kártya értéke 1? 705 00:34:11,989 --> 00:34:14,150 >> NEEL MEHTA: Igen, így szeretné, hogy az állami, ugye? 706 00:34:14,150 --> 00:34:16,080 Akkor használja állam a komponens, hogy kitaláljuk, 707 00:34:16,080 --> 00:34:17,288 melyik kártyát akarunk kapni. 708 00:34:17,288 --> 00:34:19,290 Mint van egy listája az összes kártyát, akkor 709 00:34:19,290 --> 00:34:21,630 felhasználható állami kitalálni az egyik az első kártya, 710 00:34:21,630 --> 00:34:23,710 második kártya, a harmadik kártya, és így tovább. 711 00:34:23,710 --> 00:34:28,760 >> Tehát egy app, így egy app kap egy van getInitialState funkciót, 712 00:34:28,760 --> 00:34:35,020 getInitialState függvény visszatérési. 713 00:34:35,020 --> 00:34:39,929 És mi csak annyit, activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Tehát most mi app megvan a saját állapotát. 715 00:34:42,889 --> 00:34:47,179 >> És így most vakolaton, hogy kitaláljuk, egy kártyát, nézzük csak megy a tömb 716 00:34:47,179 --> 00:34:49,969 és megragad a dolog, hogy az indexek. 717 00:34:49,969 --> 00:34:53,580 Válassza ki a kártyát egyenlő this.props.cards this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 Szóval, mint látod itt, a kellékeket és az állam valóban együtt dolgozni. 720 00:35:00,162 --> 00:35:08,990 Tehát most, hogy már a activeCard, fogjuk nevezni activeCard, 721 00:35:08,990 --> 00:35:10,470 és lássuk, hogy is működik ez. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [NEM HALLHATÓ] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Ó, ez egy szöveges hibát. 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, aha, így most voltunk vissza hogy hol voltunk korábban, igaz? 729 00:35:54,840 --> 00:35:57,100 Ugyanaz a régi programot, kivéve Most tudjuk támogatni 730 00:35:57,100 --> 00:35:59,390 a kártyák listáját, nem csak egy-egy kártyát. 731 00:35:59,390 --> 00:36:04,130 És most megint, ha megváltoztatjuk a activeIndex, mehetünk 0-1, 732 00:36:04,130 --> 00:36:07,330 és most, hogy a második kártya, és aztán mentünk 0. 733 00:36:07,330 --> 00:36:10,390 Tehát itt egy új feltuningolt változata a. 734 00:36:10,390 --> 00:36:16,000 >> OK, így most vessünk egy listát véli, hogy Kiállítások összes kártyát a programban, 735 00:36:16,000 --> 00:36:19,980 így fogunk tenni egy új komponens, az listview. 736 00:36:19,980 --> 00:36:22,155 Hadd listview egyenlő react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Így szeretnénk tenni egy rendezetlen listában egy lista elem minden kártya. 739 00:36:38,800 --> 00:36:41,490 És így van egy csomó kártyát. 740 00:36:41,490 --> 00:36:44,990 Szeretnénk egy lista elem minden kártya, igaz? 741 00:36:44,990 --> 00:36:47,490 Tudnánk csinálni egy for ciklus vagy valamit, hogy egy új lista elemet. 742 00:36:47,490 --> 00:36:50,522 De ahogy csinálod Reagálnak, használjon egy dolog, úgynevezett térképet. 743 00:36:50,522 --> 00:36:57,150 Térkép egy eszköz vagy egy funkció használatakor hogy minden elem, fut néhány funkciót, 744 00:36:57,150 --> 00:36:59,510 úgy visszatérési értéke, és ad, hogy vissza. 745 00:36:59,510 --> 00:37:06,310 >> Így példaként, mi van a tömbben 1, 2, 3.map function-- és ez a 746 00:37:06,310 --> 00:37:12,120 a rövidítés a function-- x nyíl x-szer x. 747 00:37:12,120 --> 00:37:16,110 Ez azt mondja, hogy minden szám 1, 2, 3, vedd el. 748 00:37:16,110 --> 00:37:17,800 Tér, és add vissza. 749 00:37:17,800 --> 00:37:22,090 Szóval mit gondolsz 1, 2, 3.map x megy x-szer 750 00:37:22,090 --> 00:37:25,480 x adja vissza a megadott Ez a funkció 751 00:37:25,480 --> 00:37:27,680 futtathatjuk minden eleme a tömb. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> KÖZÖNSÉG: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> NEEL MEHTA: Ja, 1, 4, 9 mert te 1 alkalommal 1. 755 00:37:35,709 --> 00:37:36,500 Hogy megadja neked egyet. 756 00:37:36,500 --> 00:37:37,690 Ez az első elemet. 757 00:37:37,690 --> 00:37:38,530 >> 2-szer 2 4. 758 00:37:38,530 --> 00:37:39,570 Ez egy másik elemet. 759 00:37:39,570 --> 00:37:40,310 3-szor 3 9. 760 00:37:40,310 --> 00:37:41,540 Ez egy harmadik elem. 761 00:37:41,540 --> 00:37:42,640 Van értelme? 762 00:37:42,640 --> 00:37:45,015 Tehát térképen van egy technika Használja a funkcionális programozók, 763 00:37:45,015 --> 00:37:48,090 Az új stílus programozási tenni valamit 764 00:37:48,090 --> 00:37:50,500 minden eleme a listán. 765 00:37:50,500 --> 00:37:51,970 És így ez ismerősen hangzik. 766 00:37:51,970 --> 00:37:53,370 Van egy lista a kártyákat. 767 00:37:53,370 --> 00:37:56,860 Azt szeretnénk, hogy egy lista elem minden Egy, ezért most is csak használni térkép itt. 768 00:37:56,860 --> 00:38:00,250 Majd azt mondjuk, hadd lista egyenlők this.props, kártyák, térkép. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> És így kapnak egy kártyát, mi vagyunk fog generálni Listaelemre 771 00:38:15,070 --> 00:38:17,580 azzal a kártya tartalmának oldalán is. 772 00:38:17,580 --> 00:38:20,660 Mondjuk úgy, hogy azt akarjuk, hogy ki A kártyák kérdéssel card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Szóval ez a lista tartalmazza tömb LI és listatételeket 775 00:38:30,649 --> 00:38:32,440 ahol van egy lista tétel minden kártya, 776 00:38:32,440 --> 00:38:35,150 és amely tartalmazza a kártyákat kérdés. 777 00:38:35,150 --> 00:38:37,640 Van értelme? 778 00:38:37,640 --> 00:38:39,450 >> Cool, így most nézzük ténylegesen nyomtatni, hogy ki. 779 00:38:39,450 --> 00:38:46,521 Szóval térjünk vissza a ul. 780 00:38:46,521 --> 00:38:49,020 Belül, hogy a rendezetlen lista, akkor csak kibír a teljes lista 781 00:38:49,020 --> 00:38:49,890 hogy adtak nekünk. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Hűvös. 784 00:38:53,350 --> 00:38:56,060 >> Rendben, így most ez a lista nézetben működik, csak találni. 785 00:38:56,060 --> 00:38:59,842 Bármilyen kérdésed van a lista nézetben? 786 00:38:59,842 --> 00:39:01,270 Van egy csomó kártyát. 787 00:39:01,270 --> 00:39:02,800 Azt, hogy egy lista elem minden kártya. 788 00:39:02,800 --> 00:39:05,466 És akkor tedd be őket egy rendezetlen listát, és adja vissza. 789 00:39:05,466 --> 00:39:09,410 Tehát most hadd járjon így beágyazni e bennfentes a mi app, 790 00:39:09,410 --> 00:39:14,310 így meg tudjuk csinálni, és listáját. 791 00:39:14,310 --> 00:39:17,070 Milyen érv Átadják a listára véleménye? 792 00:39:17,070 --> 00:39:18,320 Milyen tulajdonságokkal tudjuk, hogy ez? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Ne feledje, ha adsz ez egy csomó kártyát, 795 00:39:26,860 --> 00:39:29,590 ez lesz, hogy a listát megtekintheti azok számára kártyák. 796 00:39:29,590 --> 00:39:32,267 Tehát mi átadjuk itt az érv? 797 00:39:32,267 --> 00:39:33,350 Közönség: A listát a kártyák? 798 00:39:33,350 --> 00:39:37,130 NEEL MEHTA: Igen, így kártyák egyenlő this.props.cards, ugye? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 És így az egyetlen probléma van arra, hogy csak 801 00:39:44,370 --> 00:39:48,600 fordult egy felső szintű elem teszi, így megvan a csomagoljuk be egy div. 802 00:39:48,600 --> 00:39:49,100 Ez furcsa. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Tehát lássuk, hogy. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Működik ez? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Ja, tessék. 809 00:40:31,030 --> 00:40:33,700 Tehát most van egy lista kártyák az alján, 810 00:40:33,700 --> 00:40:36,180 és akkor mi van a CardView magát a tetején, 811 00:40:36,180 --> 00:40:40,486 és hogy a flip között a két oldalán a kártyát. 812 00:40:40,486 --> 00:40:42,610 Most ennek értelme, hogyan csinálta? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Igen, így ismét van két komponens. 815 00:40:46,790 --> 00:40:49,666 Az első komponens nyomatok ki minden kártyát a listán. 816 00:40:49,666 --> 00:40:50,540 Ez a lista nézet. 817 00:40:50,540 --> 00:40:54,770 És a második komponens kiírja, hogy csak kártyával. 818 00:40:54,770 --> 00:40:58,840 Ha adsz neki egy bizonyos kártyát, akkor az nyomtassa ki információt, hogy a kártya 819 00:40:58,840 --> 00:41:01,870 és hagyja, flip oda-vissza. 820 00:41:01,870 --> 00:41:05,850 >> Tehát ha azt akarjuk, megpróbálhatjuk beszélni szólnál hozzá néhány új funkciót, hogy ez az. 821 00:41:05,850 --> 00:41:09,482 Ellenkező esetben beszélhetünk egy kicsit mintegy a sebessége reaktor, 822 00:41:09,482 --> 00:41:11,190 vagy mi lehet válaszolni kérdése lehet, hogy 823 00:41:11,190 --> 00:41:15,050 mert ezek mind a mag részeinek A reagálni, hogy szeretnék beszélni. 824 00:41:15,050 --> 00:41:16,540 Mi lehet menni előre. 825 00:41:16,540 --> 00:41:17,590 Mi lehet válaszolni a kérdésekre. 826 00:41:17,590 --> 00:41:18,560 Amit csak akarsz. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> Közönség: Lehet használni JSX normál JavaScript? 829 00:41:24,205 --> 00:41:27,150 Vagy az, hogy valami, jött a [hallhatatlan]? 830 00:41:27,150 --> 00:41:30,760 >> NEEL MEHTA: A kérdés az, használja JSX normál JavaScript? 831 00:41:30,760 --> 00:41:32,620 A válasz: igen. 832 00:41:32,620 --> 00:41:41,070 JSX csak egy módja tart a JavaScript amely HTML belsejébe, 833 00:41:41,070 --> 00:41:44,215 és lefordítja a JavaScript Nincsenek HTML belsejébe. 834 00:41:44,215 --> 00:41:47,880 Tehát észre hogy-- így észre itt. 835 00:41:47,880 --> 00:41:50,820 Ez úgy néz ki, mint te, mint a div és van a cucc belsejében is. 836 00:41:50,820 --> 00:41:54,970 >> Hogy lefordítja a JavaScript mint generál ugyanezt. 837 00:41:54,970 --> 00:41:59,590 Azt hiszem, amit mondok, hogy JSX csak egy szintaktikai, mintha 838 00:41:59,590 --> 00:42:03,530 Egy elõfeldolgozót JavaScript sokat mint a PHP egy elõfeldolgozót HTML. 839 00:42:03,530 --> 00:42:05,490 JSC egy preprocesszor A JavaScript amely lehetővé teszi, 840 00:42:05,490 --> 00:42:12,970 teszel HTML belsejét a JavaScript. 841 00:42:12,970 --> 00:42:16,425 És így ha a megfelelő transzformátor ami egy dolog, úgynevezett [hallható], 842 00:42:16,425 --> 00:42:17,300 amelyek át fogják alakítani. 843 00:42:17,300 --> 00:42:19,360 A jobb preprocesszor, ez lesz engedhetem meg. 844 00:42:19,360 --> 00:42:20,235 >> Közönség: [hallható] 845 00:42:20,235 --> 00:42:23,026 NEEL MEHTA: Általában nincs szükség hogy HTML belsejében JavaScript 846 00:42:23,026 --> 00:42:24,110 hacsak te műved reagálnak. 847 00:42:24,110 --> 00:42:27,146 De tudod csinálni egyébként. 848 00:42:27,146 --> 00:42:27,645 Igen? 849 00:42:27,645 --> 00:42:29,353 >> Közönség: Azt hiszem, leírta Reagálnak 850 00:42:29,353 --> 00:42:31,970 mint funkcionális programozási nyelv. 851 00:42:31,970 --> 00:42:35,646 Már tanulás C CS50. 852 00:42:35,646 --> 00:42:38,032 C is egy funkcionális nyelv? 853 00:42:38,032 --> 00:42:39,990 NEEL MEHTA: Tehát a kérdés kb funkcionális 854 00:42:39,990 --> 00:42:43,010 versus egy másik dolog, úgynevezett Rendkívüli vagy eljárási programozás. 855 00:42:43,010 --> 00:42:44,820 Van kétféle programok népszerűek. 856 00:42:44,820 --> 00:42:48,550 Az egyik az úgynevezett eljárási, amely szól, mint csinál parancsokat, 857 00:42:48,550 --> 00:42:51,510 és egy funkcionális, amely minden, arról hogy funkcióit, és amelynek 858 00:42:51,510 --> 00:42:52,930 bemeneti és kimeneti e. 859 00:42:52,930 --> 00:42:55,930 React egy funkcionális paradigma. 860 00:42:55,930 --> 00:42:58,010 C egy nagyon eljárási paradigma. 861 00:42:58,010 --> 00:43:02,360 >> És mint például C például Ön ezt nem teszi meg deklaratív módon 862 00:43:02,360 --> 00:43:04,390 Az így a program, igaz? 863 00:43:04,390 --> 00:43:06,826 Meg kell, hogy mondjam, nyomtassa ki ezt. 864 00:43:06,826 --> 00:43:07,950 Ezeket az adatokat módosítani szerkezetet. 865 00:43:07,950 --> 00:43:08,530 Nyomtassa ki ezt. 866 00:43:08,530 --> 00:43:10,160 Ez mind a parancsokat. 867 00:43:10,160 --> 00:43:12,640 >> Ebben reagál, ott nem hogy sok parancsokat. 868 00:43:12,640 --> 00:43:15,145 Ez az egész arról szól, hogy összetevőket össze. 869 00:43:15,145 --> 00:43:16,300 Olyanok, mint a funkciók. 870 00:43:16,300 --> 00:43:26,360 Van, mint egy függvény nevű CardView, 871 00:43:26,360 --> 00:43:28,680 amely egy olyan funkció, hogy a bemeneti, kimeneti, 872 00:43:28,680 --> 00:43:30,660 és így reagálnak minden erről a filozófia 873 00:43:30,660 --> 00:43:32,700 minket having-- van adat. 874 00:43:32,700 --> 00:43:34,910 Ön vezessük át ezt a algoritmus, és ez lesz 875 00:43:34,910 --> 00:43:36,800 kimenet HTML hogy Csak a nyomtatott oldal, 876 00:43:36,800 --> 00:43:39,180 és ezért van, hogy építeni apránként. 877 00:43:39,180 --> 00:43:42,800 >> Tehát felhívni a metafora, hogy mi Azt mondtam, tudod, hogyan 878 00:43:42,800 --> 00:43:47,050 a Facebook-on, ha kap egy üzenetet, és úgy dönt, milyen alkatrészeket frissíteni, 879 00:43:47,050 --> 00:43:47,882 ez az eljárási. 880 00:43:47,882 --> 00:43:48,840 Ez rendkívül fontos, ugye? 881 00:43:48,840 --> 00:43:49,806 OK, kaptam egy üzenetet. 882 00:43:49,806 --> 00:43:50,930 Változtassunk számla van. 883 00:43:50,930 --> 00:43:52,110 >> Nézzük pop ablakban itt. 884 00:43:52,110 --> 00:43:52,780 Változtassunk számla van. 885 00:43:52,780 --> 00:43:53,700 Rajzoljunk ez itt. 886 00:43:53,700 --> 00:43:55,220 Ez egy procedurális megközelítést. 887 00:43:55,220 --> 00:44:00,240 >> Ez az, amit a dolgok, mint szögletes, Boost, Gerinchálózat, más keretek között használja. 888 00:44:00,240 --> 00:44:01,200 Reagálnak működőképes. 889 00:44:01,200 --> 00:44:03,324 Ez egy egészen más módon, A gondolkodás a dolgok. 890 00:44:03,324 --> 00:44:07,950 Tart ez az ötlet, vessünk funkciók vagy algoritmusok, hogy fogsz 891 00:44:07,950 --> 00:44:08,800 add adatokat. 892 00:44:08,800 --> 00:44:11,820 Ez lesz kiköp, amit kell lennie, és a számítógép 893 00:44:11,820 --> 00:44:13,490 vigyázni fog kimérése. 894 00:44:13,490 --> 00:44:15,890 Nem kezelni magad. 895 00:44:15,890 --> 00:44:18,470 Van ennek egy kis értelme? 896 00:44:18,470 --> 00:44:18,970 Igen? 897 00:44:18,970 --> 00:44:24,180 >> Közönség: Egy funkcionális nyelv, minden úgy történik egyszerre? 898 00:44:24,180 --> 00:44:26,800 >> NEEL MEHTA: Nem, a dolgok rendben. 899 00:44:26,800 --> 00:44:29,320 Például: itt van még rendelni, de ez nem 900 00:44:29,320 --> 00:44:32,390 történnek annak érdekében, mint ajánlom, parancs, parancs. 901 00:44:32,390 --> 00:44:36,459 Előfordul, hogy a funkciót ad kimenetet. 902 00:44:36,459 --> 00:44:37,750 Tedd, hogy egy másik funkció. 903 00:44:37,750 --> 00:44:39,550 Tedd, hogy egy másik funkciót, egy másik funkció. 904 00:44:39,550 --> 00:44:41,470 >> Ha igen CS51, akkor megtanulják a funkcionális programok 905 00:44:41,470 --> 00:44:42,886 Egy kicsit ki a hatálya alól. 906 00:44:42,886 --> 00:44:45,090 De alapvetően, mitől Reagálnak hűvös nemcsak 907 00:44:45,090 --> 00:44:46,840 az egyirányú adatáramlás és a virtuális Dom, 908 00:44:46,840 --> 00:44:48,700 hanem ez a gondolat a funkcionális programozás. 909 00:44:48,700 --> 00:44:51,720 És funkcionális programozás nagyon egyszerű komponálni, és klassz dolog ki, 910 00:44:51,720 --> 00:44:53,844 és ez nagyon könnyű azt gondolni, kb és az értelem kb. 911 00:44:53,844 --> 00:44:55,450 Szóval ez egy jó sorsolás a reagálnak. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Van még kérdés? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Igen? 916 00:45:03,150 --> 00:45:06,840 >> Közönség: Hm, miért használd szemben a var? 917 00:45:06,840 --> 00:45:10,450 >> NEEL MEHTA: Szóval a kérdés az, Miért használ hagyja helyett var? 918 00:45:10,450 --> 00:45:13,220 Ez egy dolog, úgynevezett ES6 vagy ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Ez az új verzió a JavaScript. 920 00:45:15,820 --> 00:45:19,050 Van egy csomó technikai okok miatt, De hadd van egy jobb változata var. 921 00:45:19,050 --> 00:45:20,724 >> Ez hogyan állapítsa változók. 922 00:45:20,724 --> 00:45:21,390 Használhatja hagyja. 923 00:45:21,390 --> 00:45:22,140 Használhatja var. 924 00:45:22,140 --> 00:45:23,825 Legyen egy csomó technikai reasons-- meg tudjátok nézni őket 925 00:45:23,825 --> 00:45:25,610 akár later-- számára miért jobb. 926 00:45:25,610 --> 00:45:28,780 Alapvetően ES6 pár szép Új szintaxis, néhány új funkciót 927 00:45:28,780 --> 00:45:30,720 az első helyen a régi JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Tehát van, mint öt perc alatt. 929 00:45:32,782 --> 00:45:34,990 Csak azt akartam beszélni még egy dolog igazi böjt. 930 00:45:34,990 --> 00:45:36,450 Ha bármilyen kérdése van, beszéljünk róla után. 931 00:45:36,450 --> 00:45:38,366 De csak, hogy ez lesz fogott a kamera, én csak 932 00:45:38,366 --> 00:45:41,550 szeretnék beszélni egy kicsit arról, hogyan ténylegesen használni reagálni az alkalmazások. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Ha megy itt, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 Ez a honlap az reagál, és megmutatom, hogyan tudod valójában használ 936 00:46:03,320 --> 00:46:05,320 Reagálni az oldalain. 937 00:46:05,320 --> 00:46:08,845 Alapvetően ez egy kicsit bonyolult próbál telepíteni reagálnak. 938 00:46:08,845 --> 00:46:12,300 Ez nem olyan egyszerű, mint csak húzza és vidd a JavaScript ott. 939 00:46:12,300 --> 00:46:15,890 >> Van, hogy a transzformátor létre, amely, mint korábban, 940 00:46:15,890 --> 00:46:18,120 viszont a JSX be A normál JavaScript. 941 00:46:18,120 --> 00:46:21,030 Meg kell dolog, hogy majd fordítanod ES6 a normális kerékvágásba. 942 00:46:21,030 --> 00:46:24,720 JavaScript van egy csomó mozgó részek annyit kell tennie, ezért van egy dolog, 943 00:46:24,720 --> 00:46:27,200 nevű Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 És ez egy parancssori eszköz, akkor segítsen Állvány ki a reagálnak 945 00:46:31,110 --> 00:46:32,380 projektek könnyen. 946 00:46:32,380 --> 00:46:38,660 >> Szóval lehet olvasni erről Később, de vannak eszközök 947 00:46:38,660 --> 00:46:40,160 hogy Yeoman kínál. 948 00:46:40,160 --> 00:46:43,280 Ők Hagyom, hogy hozzon létre egy reagálnak app mindent épült. 949 00:46:43,280 --> 00:46:46,030 Tetszik ez lesz építettünk a, alkatrészek épült. 950 00:46:46,030 --> 00:46:47,880 Ez lesz a transzformátor-ben épült. 951 00:46:47,880 --> 00:46:50,699 Nekik van egy csomó klassz cucc beépített automatikus 952 00:46:50,699 --> 00:46:52,240 segítségével ezek a dolgok úgynevezett generátorok. 953 00:46:52,240 --> 00:46:54,620 >> Szóval olvastam erről, ha úgy tetszik. 954 00:46:54,620 --> 00:46:59,110 Csak megy Yeoman, Y-E-O-M-A-N, és megtalálja generátorok, mint ezek. 955 00:46:59,110 --> 00:47:01,263 És a termelőkkel, mint Ezek csak szeretne egyet 956 00:47:01,263 --> 00:47:03,010 van egy pár parancssori parancsok. 957 00:47:03,010 --> 00:47:05,530 Ez lesz Állvány végre teljes reagál alkalmazás az Ön számára. 958 00:47:05,530 --> 00:47:10,470 Ez kapsz minden manuális csővezetékek, és röfögés munka az Ön számára, 959 00:47:10,470 --> 00:47:13,010 és ez miért csak összpontosítani az csak írásban reagálnak. 960 00:47:13,010 --> 00:47:16,739 >> Tehát alapvetően épít Reagálni az alkalmazás nem triviális. 961 00:47:16,739 --> 00:47:19,530 Ez a vezetékes mind együtt, de van olyan eszközök, megcsinálom neked. 962 00:47:19,530 --> 00:47:23,070 Tehát ha azt szeretnénk, hogy egy reagálnak app, próbáld meg így. 963 00:47:23,070 --> 00:47:26,360 Ha csak azt, hogy a kísérlet, akkor próbálja ki ezt a CodePen 964 00:47:26,360 --> 00:47:28,550 mert ez CodePen van minden reagálnak vezetékeket. 965 00:47:28,550 --> 00:47:30,240 Megtettem mindent elvégez Ön már. 966 00:47:30,240 --> 00:47:34,610 >> Tehát ha azt szeretnénk, hogy győződjön meg, mint egy termelést, hogy kiadja reagál app, 967 00:47:34,610 --> 00:47:37,220 próbáljuk ki ezt a generátorok. 968 00:47:37,220 --> 00:47:40,240 Ha csak akar játszani körül, ez gyakran érdemes csak 969 00:47:40,240 --> 00:47:44,490 mint megpróbálja játék körül CodePen itt. 970 00:47:44,490 --> 00:47:45,470 Jól hangzik? 971 00:47:45,470 --> 00:47:45,970 Hűvös. 972 00:47:45,970 --> 00:47:47,890 >> Szóval ez minden, amim van. 973 00:47:47,890 --> 00:47:52,470 Ismét, az összes kód és példák lesz ezen a honlapon van. 974 00:47:52,470 --> 00:47:55,509 Szóval, megint nem beszéltünk itt sokkal szintaxis reagál, 975 00:47:55,509 --> 00:47:57,550 hanem, hogy megtaláljuk azokat kis szintaktikai részleteket, 976 00:47:57,550 --> 00:48:00,320 ez mind elérhető lesz ezen a honlapon van. 977 00:48:00,320 --> 00:48:02,660 >> Szóval én azt javasolnám, mint megtenni az első lépést. 978 00:48:02,660 --> 00:48:06,277 Tedd be a CodePen. 979 00:48:06,277 --> 00:48:08,110 Próbálja azon dolgoznak, hogy azt, hogy a második lépésben. 980 00:48:08,110 --> 00:48:11,310 Van egy negyedik lépés, és csak hol kapsz belőle. 981 00:48:11,310 --> 00:48:14,840 >> Bármilyen további kérdése van, ellenőrizze arra, hogy az oldal, vagy írjon nekem. 982 00:48:14,840 --> 00:48:16,490 Ez az én e-mail. 983 00:48:16,490 --> 00:48:19,885 De én szeretnék segíteni Önnek bármilyen kérdése lehet, hogy körülbelül reagálnak. 984 00:48:19,885 --> 00:48:21,010 Szóval, igen, ez minden, amim van. 985 00:48:21,010 --> 00:48:23,410 Köszönöm minden szépen Figyelnek vagy látogatásáért. 986 00:48:23,410 --> 00:48:26,820 És én viszem bármilyen kérdése lehet, hogy ezek után már. 987 00:48:26,820 --> 00:48:29,140 Szóval köszönöm mindenkinek nézni. 988 00:48:29,140 --> 00:48:31,270