1 00:00:00,000 --> 00:00:02,910 >> [Prehrávanie hudby] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> NEEL MEHTA: Tu to ide. 4 00:00:07,275 --> 00:00:11,070 >> No, všetci, vitajte na webe apps budúcnosti s Reagovať. 5 00:00:11,070 --> 00:00:11,870 To je CS50. 6 00:00:11,870 --> 00:00:12,930 Volám sa Neel. 7 00:00:12,930 --> 00:00:17,689 Som TA pre CS50 a druhákov na Harvard College a veľmi, veľmi 8 00:00:17,689 --> 00:00:18,730 vášnivý webový vývojár. 9 00:00:18,730 --> 00:00:20,730 Takže som veľmi vzrušujúce hovoriť s vami dnes, 10 00:00:20,730 --> 00:00:24,550 nech už ste tu, alebo doma sledovanie, o React, ktorá je, opäť 11 00:00:24,550 --> 00:00:27,270 ako som povedal, že budúcnosť webových aplikácií. 12 00:00:27,270 --> 00:00:29,055 >> Takže Reagovať je webový rámec. 13 00:00:29,055 --> 00:00:30,930 A ako som už hovoril Bol pre niektorých ľudí tu, 14 00:00:30,930 --> 00:00:33,400 rámec je len sada náradia, ktoré môžete použiť 15 00:00:33,400 --> 00:00:35,770 štruktúrovať a budovať svoje webové aplikácie. 16 00:00:35,770 --> 00:00:39,010 A webové aplikácie sú, opäť, webové stránky ktoré sú interaktívne, ako sú Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, čokoľvek. 18 00:00:42,330 --> 00:00:45,590 >> Tak Facebook je webová rámec ktorý bol vyvinutý spoločnosťou Facebook 19 00:00:45,590 --> 00:00:48,060 pár rokmi back-- reagovať je. 20 00:00:48,060 --> 00:00:50,830 To je pretože sa používa v Facebook na svojich mobilných aplikáciách 21 00:00:50,830 --> 00:00:52,460 a webová aplikácia, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy je ďalší prominentné inovátor Reagovať. 23 00:00:56,350 --> 00:00:58,630 >> Je to naozaj bolo dostať extrémne populárne. 24 00:00:58,630 --> 00:01:03,420 Ak ste niekedy použiť veci ako rohové alebo Backbone, to je z rovnakej rodiny, 25 00:01:03,420 --> 00:01:05,830 ale má od ďaleko predstihnúť ich popularitu. 26 00:01:05,830 --> 00:01:06,890 Je to horúca novinka. 27 00:01:06,890 --> 00:01:09,590 Je to naozaj, naozaj obrovská. 28 00:01:09,590 --> 00:01:13,470 >> A tak Reagovať je dobrá nielen ako web rámec pre stavebné rozhranie. 29 00:01:13,470 --> 00:01:16,020 Je to dobré pre vytváranie webových rozhraní. 30 00:01:16,020 --> 00:01:18,350 K dispozícii je tiež vec Reagovať volal Native, ktoré 31 00:01:18,350 --> 00:01:22,200 umožňuje vytvárať rozhranie pre Android a iOS 32 00:01:22,200 --> 00:01:26,390 a možno aj ďalšie platformy v budúcnosti iba pomocou rovnaký kód JavaScriptu. 33 00:01:26,390 --> 00:01:31,130 Dalo by sa použiť presne rovnaký Kód JavaScript k tomu, webové stránky, 34 00:01:31,130 --> 00:01:33,040 na to, aby aplikácie Android a iOS aplikácie. 35 00:01:33,040 --> 00:01:35,000 >> Je to veľmi, veľmi vzrušujúce doba. 36 00:01:35,000 --> 00:01:37,070 Je to naozaj, naozaj cool príležitosť. 37 00:01:37,070 --> 00:01:42,020 Je to naozaj univerzálny web interface vývojový nástroj, 38 00:01:42,020 --> 00:01:44,420 takže je to veľmi, veľmi dôležitá vec, vedieť. 39 00:01:44,420 --> 00:01:46,949 A ako som hovoril ľuďom predtým, to, myslím, 40 00:01:46,949 --> 00:01:48,990 sa chystá zmeniť spôsob, akým sme vytvárať webové aplikácie navždy. 41 00:01:48,990 --> 00:01:55,820 Takže je to možno trochu nadsázka, ale ja myslím, že je celkom dobrá vec, vedieť. 42 00:01:55,820 --> 00:01:57,580 >> OK, takže to, čo je Reagovať? 43 00:01:57,580 --> 00:02:01,020 Reagovať je rámec, môžete použiť pre budovanie rozhranie. 44 00:02:01,020 --> 00:02:03,240 Rozhranie je, opäť, webové stránky, nie? 45 00:02:03,240 --> 00:02:06,340 Tak tu je Instagram.com, použitie Reagovať. 46 00:02:06,340 --> 00:02:08,740 >> Reagovať je postavený na idea komponentov. 47 00:02:08,740 --> 00:02:11,900 Súčasťou je HTML prvok na steroidoch, 48 00:02:11,900 --> 00:02:14,470 takže HTML element je ako tlačidlá. 49 00:02:14,470 --> 00:02:15,250 Je to bod. 50 00:02:15,250 --> 00:02:17,500 Je to záhlavie, že jo? 51 00:02:17,500 --> 00:02:22,740 A Instagram bude používať tieto, ale to budú tiež používať komponenty Reagovať. 52 00:02:22,740 --> 00:02:25,740 >> Reagujú komponenty sú nadupaným-up HTML elementy 53 00:02:25,740 --> 00:02:28,100 ktoré majú svoje vlastné správanie v nich obsiahnuté. 54 00:02:28,100 --> 00:02:31,800 Tak, ako príklad, mohli by sme mať čas element, čas zložka, 55 00:02:31,800 --> 00:02:34,095 ktorá bude obsahovať ako časovú pečiatku, viete, 56 00:02:34,095 --> 00:02:37,170 komponenta profil, ktorý bude obsahovať obrázok profilu 57 00:02:37,170 --> 00:02:38,820 a meno osoby. 58 00:02:38,820 --> 00:02:42,930 To môže mať ako počítadlo, ktoré môže počítať ako je počet rád, 59 00:02:42,930 --> 00:02:45,610 a pokiaľ naň kliknete, bude to zvýšiť počet likes. 60 00:02:45,610 --> 00:02:48,200 Súčasťou je len banda HTML kódu, ktorý 61 00:02:48,200 --> 00:02:50,520 má niektoré funkcie zabalené vo vnútri nej. 62 00:02:50,520 --> 00:02:53,770 Takže je to ako prvku HTML na steroidoch, ako som už povedal skôr. 63 00:02:53,770 --> 00:02:56,270 Môžete si vziať tieto komponenty, a môžete dať dohromady 64 00:02:56,270 --> 00:02:59,060 aby nové komponenty, v tento prípad, súčasť pošta, 65 00:02:59,060 --> 00:03:00,505 ktorá obsahuje všetky tie veci. 66 00:03:00,505 --> 00:03:04,050 To by obsahovať dobu, profil, LikeCounter, možno komentár 67 00:03:04,050 --> 00:03:06,100 a možno samotný obrázok. 68 00:03:06,100 --> 00:03:10,810 A tak webové aplikácie sú len postavené tým, že komponenty a skladať ich. 69 00:03:10,810 --> 00:03:15,620 Krmivá pre Instagram nie je nič viac než banda príspevkov jeden po druhom, 70 00:03:15,620 --> 00:03:19,032 každý príspevok obsahuje ako čas, Profil, LikeCounter, a tak ďalej. 71 00:03:19,032 --> 00:03:20,490 Je to niečo ako stavať dom. 72 00:03:20,490 --> 00:03:22,660 Nemusíte budovať dom odhora nadol. 73 00:03:22,660 --> 00:03:24,960 Beriete components-- vás brať ako kúpeľne. 74 00:03:24,960 --> 00:03:28,320 Vezmete bedroom-- im držať dohromady, a máte nový komponent. 75 00:03:28,320 --> 00:03:29,760 Máte novú časť domu. 76 00:03:29,760 --> 00:03:32,860 >> Takže Reagovať všetko je postavené okolo Táto myšlienka komponentov 77 00:03:32,860 --> 00:03:36,600 sú interaktívne, ktoré sú deklaratívny. 78 00:03:36,600 --> 00:03:39,650 Rovnako ako si len povedať, čo je to profil je, a to robí to. 79 00:03:39,650 --> 00:03:40,600 Sú composable. 80 00:03:40,600 --> 00:03:43,880 Môžete si vziať čas a profil, dať ich dohromady, aby sa niečo lepšie. 81 00:03:43,880 --> 00:03:47,770 A sú znovu použiteľné, takže ak ste majú zdrojový kód pre poštu, 82 00:03:47,770 --> 00:03:49,440 môžete vložiť tento kdekoľvek. 83 00:03:49,440 --> 00:03:53,160 >> Môžete vložiť Instagram vec, na svojich webových stránkach. 84 00:03:53,160 --> 00:03:56,830 Môžete vložiť do Facebook, napríklad, tak dlho, ako to používa React rovnako. 85 00:03:56,830 --> 00:04:00,360 Takže komponenty sú naozaj, ale naozaj, naozaj silné stavebné bloky webe 86 00:04:00,360 --> 00:04:04,180 , Ktoré môžu byť použité kdekoľvek a dať dohromady, aby sa nové stavebné bloky. 87 00:04:04,180 --> 00:04:07,159 To je veľmi uzávierky, veľmi vysokej úrovni prehľad. 88 00:04:07,159 --> 00:04:09,200 Takže, ešte raz, ak máte akékoľvek otázky v žiadnom mieste 89 00:04:09,200 --> 00:04:14,470 o filozofiu reaktora, v kódovanie, aby ma zastaviť, a dajte mi vedieť. 90 00:04:14,470 --> 00:04:18,420 >> OK, takže reakcia je skvelé, pretože to má iný spôsob nahliadnutia 91 00:04:18,420 --> 00:04:19,870 na to, ako budete stavať webové aplikácie. 92 00:04:19,870 --> 00:04:23,620 Pravdepodobne ste počuli o MVC, A Model môžete ovládať v CS50 alebo čo 93 00:04:23,620 --> 00:04:25,940 ďalšie skúmavé tried, ktoré používate. 94 00:04:25,940 --> 00:04:29,000 A väčšina rámce sú postavený okolo myšlienky na MVC. 95 00:04:29,000 --> 00:04:30,410 Reagovať nie je. 96 00:04:30,410 --> 00:04:32,980 Reagovať je postavená na myšlienke, z jednosmerného dátového toku 97 00:04:32,980 --> 00:04:36,510 ako je vidieť podľa tejto tabuľky alebo grafiky tu. 98 00:04:36,510 --> 00:04:38,260 >> V podstate máte zdroj dát. 99 00:04:38,260 --> 00:04:42,380 A zdroj dát bude rozhodovať ako vyložiť určité komponenty. 100 00:04:42,380 --> 00:04:45,452 A komponenty budú potom, keď sa zmení, 101 00:04:45,452 --> 00:04:47,160 budú povedať, zdroj údajov zmeniť. 102 00:04:47,160 --> 00:04:49,350 >> Ak chcete použiť Instagram Napríklad môžete mať 103 00:04:49,350 --> 00:04:52,050 zoznam poštových objektov, ako sú v databáze, alebo tak niečo. 104 00:04:52,050 --> 00:04:53,310 Že dáta. 105 00:04:53,310 --> 00:04:57,600 A potom naše rozmiestniť komponenty bude trvať, že dáta, 106 00:04:57,600 --> 00:05:01,830 a používať tieto údaje na to, aby vec na obrazovke. 107 00:05:01,830 --> 00:05:04,300 To je to, čo sa šípkou z údajov do zložkou je, 108 00:05:04,300 --> 00:05:07,930 a použije sa, že rovnaké dáta k tomu, aby veľa komponentov. 109 00:05:07,930 --> 00:05:10,290 >> Facebook Messenger, pre Príkladom, ktorý je React, 110 00:05:10,290 --> 00:05:13,410 môžete mať zoznam Správy ako zdroj dát. 111 00:05:13,410 --> 00:05:15,927 A to by spôsobilo nie iba zoznam správ 112 00:05:15,927 --> 00:05:17,510 ale aj zoznam priateľov, máte. 113 00:05:17,510 --> 00:05:19,200 Máte počet neprečítaných. 114 00:05:19,200 --> 00:05:23,330 Možno, že tiež vykresliť vec Facebook to je v dolnej časti Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Rovnaké dáta sú jediný zdroj pravdy 116 00:05:25,610 --> 00:05:28,290 a ktorý spôsobuje, že veľa komponenty, ktoré majú byť vykreslený. 117 00:05:28,290 --> 00:05:30,290 A vždy, keď jeden z tých, zložky sa zmení, 118 00:05:30,290 --> 00:05:32,320 sa vráti späť a zmení zdroj údajov. 119 00:05:32,320 --> 00:05:33,460 >> Môžete poslať správu, že jo? 120 00:05:33,460 --> 00:05:34,780 To sa zmení zdroj údajov. 121 00:05:34,780 --> 00:05:39,490 Môžete čítať správy, takže môžete nastaviť neprečítané 0. 122 00:05:39,490 --> 00:05:41,136 To sa zmení zdroj údajov. 123 00:05:41,136 --> 00:05:44,010 Všimnite si, že všetky z nich z jednej šípka návrate do rovnakých údajov 124 00:05:44,010 --> 00:05:47,662 zdroj, takže viete, keďže, určitý súbor dát, 125 00:05:47,662 --> 00:05:49,870 viete presne, čo je Stránka bude vyzerať. 126 00:05:49,870 --> 00:05:50,700 Je to deterministický. 127 00:05:50,700 --> 00:05:53,451 Viete, uvedené niektoré údaje, čo stránka sa bude vyzerať. 128 00:05:53,451 --> 00:05:56,158 Môžete si predpovedať, ako to bude správať a ako sa veci idú 129 00:05:56,158 --> 00:05:57,650 do práce, keď sú dohromady. 130 00:05:57,650 --> 00:06:00,410 >> A keby som mal milión komponenty tu, to by sa správajú rovnako, nie? 131 00:06:00,410 --> 00:06:02,290 Tie by mať žiadny podivné prepojenie. 132 00:06:02,290 --> 00:06:04,120 Jeden údaje poskytnuté milión komponenty. 133 00:06:04,120 --> 00:06:06,879 Milión Components sa vrátiť a editovať dáta. 134 00:06:06,879 --> 00:06:07,920 A tak je to veľmi pekné. 135 00:06:07,920 --> 00:06:10,870 Staviame composable, ľahko škálovateľné webové aplikácie. 136 00:06:10,870 --> 00:06:13,150 >> Máte jeden zdroj dát, zdroj pravdy. 137 00:06:13,150 --> 00:06:15,790 To hovorí vaše komponenty ako položiť sa na stránku, 138 00:06:15,790 --> 00:06:18,190 a komponenty budú zvládnuť interakcie. 139 00:06:18,190 --> 00:06:20,150 A ak chcú zmeniť veci, jednoducho ísť späť 140 00:06:20,150 --> 00:06:21,750 a povedzte zdroj údajov zmeniť. 141 00:06:21,750 --> 00:06:22,850 Dáva zmysel? 142 00:06:22,850 --> 00:06:26,010 Takže Reagovať je o porozumení , Ako vytvoriť komponent 143 00:06:26,010 --> 00:06:29,540 a ako vytvoriť svoj komponenty komunikovať s vonkajším svetom. 144 00:06:29,540 --> 00:06:31,850 >> Tvorba komponentov sa ovplyvňovať s vonkajším svetom 145 00:06:31,850 --> 00:06:34,490 používa inú technológiu volal Flux, ktorý 146 00:06:34,490 --> 00:06:36,872 je rámec, ktorý je pridaný na hornej React. 147 00:06:36,872 --> 00:06:38,330 Nebudeme o tom hovoriť. 148 00:06:38,330 --> 00:06:42,990 Budeme hovoriť o vzhľadom na to, Dáta, ako môžete vykresliť komponent? 149 00:06:42,990 --> 00:06:47,010 >> A tak Reagovať je preto, že ste naozaj cool ho použiť s akýmkoľvek zadným konci chcete. 150 00:06:47,010 --> 00:06:50,480 Ak máte ako back-end Python, ak vaše Python môže vypľuť niektoré údaje, 151 00:06:50,480 --> 00:06:51,610 Reagovať môže spôsobiť to. 152 00:06:51,610 --> 00:06:54,700 Ak ste žiadne JS výstupy dát, React činí to. 153 00:06:54,700 --> 00:06:56,890 Ruby koľajnice s Údaje, Reagovať činí to. 154 00:06:56,890 --> 00:07:01,860 >> Takže React je v podstate web view-- predný koniec so zložkami 155 00:07:01,860 --> 00:07:03,910 pre všetky zdroje dát vôbec. 156 00:07:03,910 --> 00:07:07,145 A tak sa zo zdroja údajov reagovať komponentov je celkom jednoduché. 157 00:07:07,145 --> 00:07:08,770 Chystáte sa na druhú stranu je trochu ťažšie. 158 00:07:08,770 --> 00:07:10,462 To používa Flux ako som spomenul predtým. 159 00:07:10,462 --> 00:07:11,420 Budeme sa dostať do toho. 160 00:07:11,420 --> 00:07:13,740 Budeme sa viac zamerať na Dáta-to-komponentné stranu. 161 00:07:13,740 --> 00:07:15,880 Týmto spôsobom môžete urobiť pohodový, zábavné webové aplikácie. 162 00:07:15,880 --> 00:07:19,870 To nebude mať vplyv na okolitý svet teraz, ale to je iný príbeh. 163 00:07:19,870 --> 00:07:22,210 >> OK, takže ak si tu pre môj posledný seminár 164 00:07:22,210 --> 00:07:26,610 budete vedieť, že všetok kód pre dnešná diskusia bude na tejto adrese 165 00:07:26,610 --> 00:07:29,320 tu, sorry, toto URL tu. 166 00:07:29,320 --> 00:07:32,730 A v podstate budeme ísť cez štyri kroky, možno päť, 167 00:07:32,730 --> 00:07:33,510 pravdepodobne nie päť. 168 00:07:33,510 --> 00:07:37,300 Budeme sa pohybujú cez štyri kroky budovanie vzorka Reagovať aplikácie. 169 00:07:37,300 --> 00:07:39,550 A tak všetok zdrojový kód na každom kroku na ceste 170 00:07:39,550 --> 00:07:42,216 bude tu, takže ak ste po pozdĺž doma, 171 00:07:42,216 --> 00:07:43,991 neváhajte pozrieť tento kód. 172 00:07:43,991 --> 00:07:46,740 Ak ste po pozdĺž tu, budeme ukazovať na obrazovke, 173 00:07:46,740 --> 00:07:47,739 takže sa nemusíte starať o to. 174 00:07:47,739 --> 00:07:50,930 Ale ak ste doma, pocit zadarmo k návšteve tejto webovej stránky. 175 00:07:50,930 --> 00:07:56,400 A, áno, mali by ste byť schopní sa dostať celý kód by ste niekedy potrebovať tady. 176 00:07:56,400 --> 00:08:01,380 Takže je to dobrý ťahák rovnako za budúce dobrodružstvo s Reagovať. 177 00:08:01,380 --> 00:08:04,490 Cool, takže ak každý kto je tu, a to aj v prípade, že ste doma, 178 00:08:04,490 --> 00:08:11,580 vytiahnuť tento web, is.gd/cs50react, žiadny kapitál, nie podčiarkovník, proste nič. 179 00:08:11,580 --> 00:08:15,849 >> Uvidíte stránku, ktorá vyzerá trochu ako je tento. 180 00:08:15,849 --> 00:08:17,140 To je vec, s názvom CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen je kolaboratívne kódovanie prostredie 182 00:08:20,030 --> 00:08:23,364 s ktorými môžem písať kód tu, a to bude automaticky zaslané. 183 00:08:23,364 --> 00:08:24,780 A týmto spôsobom, môžem písať kód. 184 00:08:24,780 --> 00:08:26,920 Môžem spustiť kód tu. 185 00:08:26,920 --> 00:08:33,470 >> Pre example-- a ak je to reloads-- vidieť, Bežím kód JavaScript na stránke 186 00:08:33,470 --> 00:08:36,390 tu, a bude to automaticky vykreslenie webovej stránky 187 00:08:36,390 --> 00:08:37,980 s týmto kódom JavaScript. 188 00:08:37,980 --> 00:08:40,039 A tak je to spôsob pre nás vyskúšať kód 189 00:08:40,039 --> 00:08:43,089 naozaj rýchlo, bez toho aby museli použiť náš ID alebo použite náš lokálneho počítača 190 00:08:43,089 --> 00:08:44,290 alebo čokoľvek iného. 191 00:08:44,290 --> 00:08:47,670 Je to veľmi rýchly spôsob, ako môžete maketa a vyskúšať rôzne druhy kódu. 192 00:08:47,670 --> 00:08:50,560 >> Takže budem užívať príklad kódu, uvedenie tu. 193 00:08:50,560 --> 00:08:52,374 Budeme pracovať cez neho. 194 00:08:52,374 --> 00:08:54,540 A ak ste doma, budete môže vytiahnuť toto hore rovnako. 195 00:08:54,540 --> 00:08:57,530 A ja som už nainštalovaný Reagovať tu, takže stačí 196 00:08:57,530 --> 00:09:00,770 napísať svoj vlastný kód tu, a skúste si to ako svoje vlastné ihrisko. 197 00:09:00,770 --> 00:09:04,940 >> Jo, či všetci otvoriť tento odkaz tu. 198 00:09:04,940 --> 00:09:08,080 Prosím, dajte mi palce up, až budete mať to otvoriť. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Pohode, pohodový cool. 201 00:09:13,770 --> 00:09:16,914 Nie je tu nič, čo teraz, ale zmeníme, že veľmi skoro. 202 00:09:16,914 --> 00:09:21,250 >> OK, takže Reagovať je JavaScript knižnica, a ako taký, 203 00:09:21,250 --> 00:09:24,480 vyžaduje znalosť JavaScriptu, čo je web programovací jazyk. 204 00:09:24,480 --> 00:09:27,660 A je to byť použité na iné veci teraz taky, ale predovšetkým vytvoriť web 205 00:09:27,660 --> 00:09:32,040 jazyk, takže ak ste oboznámení s to, že čítal mieste zvanom JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 To je nádherné. 207 00:09:32,700 --> 00:09:34,240 Môžete sa naučiť JavaScript za pol hodiny. 208 00:09:34,240 --> 00:09:34,990 Je to neuveriteľné. 209 00:09:34,990 --> 00:09:36,420 >> Takže dať mu čítanie. 210 00:09:36,420 --> 00:09:39,960 Tiež sme ich veľa HTML tu, pretože sme navrhovanie webových stránok samozrejme. 211 00:09:39,960 --> 00:09:43,890 Takže ak ste oboznámení s HTML, pozrite sa na HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Myslím, že učenie je Reagovať miliónkrát jednoduchšie, ak už 213 00:09:46,520 --> 00:09:47,892 poznať základné stavebné kamene. 214 00:09:47,892 --> 00:09:50,600 Ak máte komponenty, je to jednoduché, aby sa väčšia zložku. 215 00:09:50,600 --> 00:09:51,860 To je Reagovať jazyk pre vás. 216 00:09:51,860 --> 00:09:54,270 >> Tak choďte do toho a dať tieto veci a Prečítajte si. 217 00:09:54,270 --> 00:09:55,070 Pozastaviť toto video. 218 00:09:55,070 --> 00:09:57,440 Dajte mu čítať, ak ste doma, ak si nie ste 219 00:09:57,440 --> 00:10:00,794 oboznámení s HTML alebo JavaScriptu 220 00:10:00,794 --> 00:10:02,960 OK, takže to, čo budeme urobiť, je, že budeme robiť 221 00:10:02,960 --> 00:10:06,470 veľmi základné Karta cca pomocou Reagovať. 222 00:10:06,470 --> 00:10:08,210 Budeme mať fleshky. 223 00:10:08,210 --> 00:10:09,880 Môžete prevrátiť kartu tam a späť. 224 00:10:09,880 --> 00:10:12,399 A budeme mať tiež zoznam všetky karty, ktoré máme, 225 00:10:12,399 --> 00:10:14,190 a ak sa cítime ambiciózny, môžeme byť 226 00:10:14,190 --> 00:10:17,060 schopný prepínať medzi autá kliknutím na ne. 227 00:10:17,060 --> 00:10:20,360 >> Ale to je, holými kosti, veľmi jednoduchý React aplikáciu. 228 00:10:20,360 --> 00:10:22,560 A tak je to vlastne nie je triviálne implementovať, 229 00:10:22,560 --> 00:10:26,030 ale ideme ukázať, že, ak to urobíte to, že je to veľmi, veľmi ľahké ho rozšíriť 230 00:10:26,030 --> 00:10:27,680 ak vám ostatní ľudia s tým pomôcť. 231 00:10:27,680 --> 00:10:33,750 Takže ideme prejsť štyri kroky začína od nuly stavať to. 232 00:10:33,750 --> 00:10:36,740 >> OK, takže štyri kroky, budeme začať s prvým krokom. 233 00:10:36,740 --> 00:10:39,790 Prvým krokom bude budovať svoj prvý zložku. 234 00:10:39,790 --> 00:10:44,830 Ako som už povedal skôr, komponenta v Reagovať je len HTML element na steroidoch. 235 00:10:44,830 --> 00:10:49,660 Určuje HTML a niektoré správanie, a to 236 00:10:49,660 --> 00:10:52,600 určí, ako ľudia môže komunikovať s ním ako 237 00:10:52,600 --> 00:10:54,270 to bude mať vnútorný stav. 238 00:10:54,270 --> 00:10:57,630 Rovnako ako tlačidlo sa poznajú ako koľko časy to bolo klikli napríklad, 239 00:10:57,630 --> 00:11:01,010 a bude vedieť, ako položiť samo. 240 00:11:01,010 --> 00:11:04,430 >> Tak poďme do toho a budovať naše Prvá zložka pomocou JavaScriptu. 241 00:11:04,430 --> 00:11:09,711 Takže ak syntaxe vyzerá divne, To preto, že druh je. 242 00:11:09,711 --> 00:11:11,710 Takže, ešte raz, ideme aby premennú s názvom 243 00:11:11,710 --> 00:11:14,580 app pomocou kľúčového slova rokov, čo premennú, 244 00:11:14,580 --> 00:11:18,210 nech App rovné React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> React je knižnica a má create funkcie triedy. 246 00:11:22,609 --> 00:11:24,400 A táto funkcia je trochu kódu, ktorý vám 247 00:11:24,400 --> 00:11:29,090 možno použiť na vytvorenie nového typ React zložku. 248 00:11:29,090 --> 00:11:32,780 A tak React.createClass robí komponentu, 249 00:11:32,780 --> 00:11:35,270 a táto zložka bude môcť robiť veci. 250 00:11:35,270 --> 00:11:40,460 Hlavná vec, ktorú môže urobiť, je poskytnúť niečo, činí v závislosti. 251 00:11:40,460 --> 00:11:44,500 >> Opäť platí, že ak je tento index nie je zrejmé vy, odporúčam vám ísť na JS pre mačky 252 00:11:44,500 --> 00:11:45,682 a pozrieť sa na to. 253 00:11:45,682 --> 00:11:47,710 Je to priblíženie dosť dobre? 254 00:11:47,710 --> 00:11:48,490 Super. 255 00:11:48,490 --> 00:11:50,670 >> Takže každý potrebuje súčasť mať vykreslenie funkciu. 256 00:11:50,670 --> 00:11:53,010 Omietky funkcie hovorí, Čo som tlačiť na obrazovke? 257 00:11:53,010 --> 00:11:54,760 Ale je komponenta k ničomu, pokiaľ to nie je 258 00:11:54,760 --> 00:11:58,060 Vedieť, čo pre tlač na obrazovke, a tak musíte mať vykreslenie funkciu. 259 00:11:58,060 --> 00:12:01,904 >> Takže v omietke vec, vy stačí sa vrátiť trochu HTML. 260 00:12:01,904 --> 00:12:03,820 A čo je v pohode, je, že tam je vec zvaná 261 00:12:03,820 --> 00:12:08,660 JSX, ktorý je predĺžením JavaScript, ktorá je používaná reagovať. 262 00:12:08,660 --> 00:12:11,845 To vám umožní písať HTML vnútri Vášho JavaScriptu, ktorý 263 00:12:11,845 --> 00:12:13,970 Znie to divne, keď najprv premýšľať o tom, 264 00:12:13,970 --> 00:12:15,553 ale to robí veľa zmysel neskôr. 265 00:12:15,553 --> 00:12:17,430 Takže môžeme urobiť. 266 00:12:17,430 --> 00:12:21,360 Ak ste oboznámení s HTML, ja viem, máme div sa všeobecný účel 267 00:12:21,360 --> 00:12:22,790 nádoba na veci. 268 00:12:22,790 --> 00:12:26,380 Môžeme sa vrátiť div, a vnútri tento div, môžeme dať veci. 269 00:12:26,380 --> 00:12:32,390 >> Takže povedzme, že chceme na to, aby práve rovný-up Karta teraz. 270 00:12:32,390 --> 00:12:34,890 Fleshky, povedal by som, bude mať otázku a odpoveď. 271 00:12:34,890 --> 00:12:37,530 Takže vnútri tohto div, poďme vytlačiť odsek 272 00:12:37,530 --> 00:12:42,155 ktorý hovorí, že question-- Čo je konečná odpoveď na život, vesmír? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 A potom je odpoveď bude, samozrejme, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> To neprišiel dobre. 277 00:12:59,730 --> 00:13:04,164 Jo, takže v podstate môžete naozaj písať HTML vnútri vášho JavaScript. 278 00:13:04,164 --> 00:13:06,330 A to bude vytlačený na obrazovku. 279 00:13:06,330 --> 00:13:08,250 Tak poďme to vyskúšať. 280 00:13:08,250 --> 00:13:09,520 >> Takže máme zložku. 281 00:13:09,520 --> 00:13:12,210 Musíme povedať Reagovať dať zložka, na obrazovke 282 00:13:12,210 --> 00:13:18,990 tak React.render, tak zistíte, že sme zaobchádzať aplikácie ako každý iný prvok. 283 00:13:18,990 --> 00:13:21,010 Píšeme to, ako to bolo element HTML. 284 00:13:21,010 --> 00:13:25,100 Ako miesto toho hovorí, ako IMG pre obraz alebo p pre odsek, 285 00:13:25,100 --> 00:13:28,120 budete písať aplikácie, takže aplikácie je zaobchádzané ako prvku HTML. 286 00:13:28,120 --> 00:13:30,380 Ako som už povedal, je to element na steroidoch. 287 00:13:30,380 --> 00:13:32,870 >> Takže si vykresliť App, a vy že to naozaj nie je miesto, kam ho. 288 00:13:32,870 --> 00:13:37,170 A to je to, ako môžete povedať to, kam dať. 289 00:13:37,170 --> 00:13:46,200 Vytvoril som jednoduchý div na strane strana volal s ID stránky, 290 00:13:46,200 --> 00:13:48,300 a to je miesto, kde element pôjde. 291 00:13:48,300 --> 00:13:49,841 >> A nebudeme bežať s HTML. 292 00:13:49,841 --> 00:13:53,145 V podstate to bude dostať dať dovnútra tejto stránky prvku 293 00:13:53,145 --> 00:13:54,270 že máme na obrazovke. 294 00:13:54,270 --> 00:13:59,210 Takže to beží tento kód, a to priťahuje tento čo sa na obrazovke, a tak sme tu. 295 00:13:59,210 --> 00:14:01,770 Urobili sme naše prvé reagovať zložku. 296 00:14:01,770 --> 00:14:08,000 >> Tak práve ako rekapituláciu, sme jemne vyrobený nový typ komponenty, nie? 297 00:14:08,000 --> 00:14:10,145 To je to, čo React.createClass. 298 00:14:10,145 --> 00:14:12,680 A tým, že komponenta, sme Povedal to, čo by mal robiť. 299 00:14:12,680 --> 00:14:15,590 Vždy, keď je táto zložka na vytlačený na obrazovku, 300 00:14:15,590 --> 00:14:19,300 to vytlačí div sa dva odseky vnútri nej. 301 00:14:19,300 --> 00:14:24,460 >> A to, čo sme urobili, sme urobili novú aplikáciu pomocou uholník app notácie. 302 00:14:24,460 --> 00:14:27,160 Povedali sme ho, aby ju Vnútri elementu stránky. 303 00:14:27,160 --> 00:14:29,867 A tak to, čo som urobil, že vytvoril novú aplikáciu z tejto šablóny. 304 00:14:29,867 --> 00:14:31,200 A potom som povedal, je to urobiť. 305 00:14:31,200 --> 00:14:33,680 Tak to povedal, OK, app, čo by som mal vytlačiť? 306 00:14:33,680 --> 00:14:36,970 App hovorí, ísť vytlačiť div s dvoma bodmi vo vnútri nej. 307 00:14:36,970 --> 00:14:40,420 A voila, je tu naša div sa dva body vo vnútri nej. 308 00:14:40,420 --> 00:14:43,180 Urobiť tak ďaleko zmysel? 309 00:14:43,180 --> 00:14:46,690 >> Takže, opäť celá výzva React je len vedieť, ako sa robí komponenty. 310 00:14:46,690 --> 00:14:48,500 Ako, aby sa komponenty spolupracujú. 311 00:14:48,500 --> 00:14:51,780 Teraz, keď sme urobili naše prvé komponenty, vráťme sa 312 00:14:51,780 --> 00:14:54,284 a aby komponenty prispôsobiteľné. 313 00:14:54,284 --> 00:14:56,700 Tak viete, ako v HTML vám môže dať svoje tlačidla tried? 314 00:14:56,700 --> 00:14:59,146 Môžete si dať svojim kotvy href. 315 00:14:59,146 --> 00:15:00,770 Môžete si dať svojim vstupy typ, že jo? 316 00:15:00,770 --> 00:15:04,740 Môžete dať viac na zákazku vlastnosti na všetky vaše prvky 317 00:15:04,740 --> 00:15:06,490 aby sa to viac zaujímavejšie. 318 00:15:06,490 --> 00:15:09,030 A my vlastne môžeme urobiť presne to isté. 319 00:15:09,030 --> 00:15:17,500 >> Takže povedzme, že chceme, aby naši app ísť vykresliť akúkoľvek kartu. 320 00:15:17,500 --> 00:15:19,630 Práve teraz sme jednoducho tavené hardcoded kartu. 321 00:15:19,630 --> 00:15:22,530 Vieme, že je tu len jedna karta to môže urobiť, tak sme 322 00:15:22,530 --> 00:15:25,960 sa snažiť a zmeniť to teraz tak že môžeme len dať mu nejaký kartu. 323 00:15:25,960 --> 00:15:27,410 To bude tlačiť kartu. 324 00:15:27,410 --> 00:15:29,380 >> Mali by ste sa snažiť a robiť vaše komponenty veľmi všeobecný účel. 325 00:15:29,380 --> 00:15:31,654 Takže to spôsob, ako by som mohol email to môj priateľ a byť ako, 326 00:15:31,654 --> 00:15:33,820 Karta čo máte, Len kŕmiť do tu, 327 00:15:33,820 --> 00:15:35,290 a bude to robiť sama. 328 00:15:35,290 --> 00:15:37,650 Môžete dať ďalšie veci vo vašej vlastnej aplikácie. 329 00:15:37,650 --> 00:15:40,600 >> Ale najprv, poďme rozčleniť tento up do dvoch zložiek, 330 00:15:40,600 --> 00:15:44,500 ale chceme oddeliť karty tlač časť od vlastného app časti. 331 00:15:44,500 --> 00:15:46,660 Takže to, čo môžeme urobiť, je, že sme môže zmeniť z App 332 00:15:46,660 --> 00:15:51,300 na CardView, len nový názov pre aplikáciu, 333 00:15:51,300 --> 00:15:54,450 a my môžeme vytvoriť nový zložka s názvom App, 334 00:15:54,450 --> 00:15:56,336 nesmie zamieňať so starým App. 335 00:15:56,336 --> 00:16:00,730 Máme sa createClass, a rovnako ako v HTML, 336 00:16:00,730 --> 00:16:03,590 môžete vnoriť Reagovať komponenty Vnútri na sebe. 337 00:16:03,590 --> 00:16:16,430 >> Takže v tomto vykreslenie funkcie, Funkcie Návrat CardView, 338 00:16:16,430 --> 00:16:18,234 a to je presne to isté. 339 00:16:18,234 --> 00:16:19,400 Pozrite sa, prečo je to to isté? 340 00:16:19,400 --> 00:16:22,590 Namiesto toho, činí len aplikácie, ktorá má div a párovanie vnútri nej, 341 00:16:22,590 --> 00:16:26,194 aplikácia vykreslí CardView, a CardView činí div a odseku. 342 00:16:26,194 --> 00:16:29,110 Tak toto je náš prvý príklad hniezdnu prvky vnútri seba. 343 00:16:29,110 --> 00:16:32,177 Dáva to zmysel_ 344 00:16:32,177 --> 00:16:33,760 Takže, opäť, máme CardView prvok. 345 00:16:33,760 --> 00:16:37,250 Máme app prvky , Že je väčší ako. 346 00:16:37,250 --> 00:16:40,990 >> OK, takže chceme, aby naše CardView-- ak vás dávajú dobrú CardView určitú kartu, 347 00:16:40,990 --> 00:16:43,370 to bude vytlačiť pre vás, nie? 348 00:16:43,370 --> 00:16:48,050 Takže najprv musíme urobiť kartu, tak sa poďme urobiť objekt karty. 349 00:16:48,050 --> 00:17:02,930 Tak nech mi kartu equal-- ak ste všetci oboznámení, 350 00:17:02,930 --> 00:17:05,260 to je len zápis tvorba objekt v JavaScriptu. 351 00:17:05,260 --> 00:17:09,280 Je to niečo ako struct v C, takže sme urobili kartu, 352 00:17:09,280 --> 00:17:15,920 a tak teraz môžeme prejsť túto kartu ako vlastnosť alebo ako atribút v HTML 353 00:17:15,920 --> 00:17:17,290 terminológie našej aplikácii. 354 00:17:17,290 --> 00:17:20,210 Takže môžeme urobiť, App karta rovná myCard. 355 00:17:20,210 --> 00:17:23,200 >> Viete, ako na vstupe, robíte Typ vstupu rovná textu alebo tlačidla 356 00:17:23,200 --> 00:17:25,240 trieda rovná BTN pre bootstrap,? 357 00:17:25,240 --> 00:17:29,500 Rovnaký nápad, App karta equals-- musíš dať rovnátka here-- 358 00:17:29,500 --> 00:17:33,830 App karta rovná myCard, tak to hovorí, že máme tento objekt karty. 359 00:17:33,830 --> 00:17:39,149 Chystám sa to prejsť ako vlastnosť komponenty app. 360 00:17:39,149 --> 00:17:41,440 A táto aplikácia zložka bude bolo možné sa k nim dostať a robiť 361 00:17:41,440 --> 00:17:43,580 zaujímavé veci s ním. 362 00:17:43,580 --> 00:17:47,650 >> Takže naše aplikácie bude vzhľadom k tomu, karty, takže pre túto chvíľu, 363 00:17:47,650 --> 00:17:49,980 poďme aplikáciu daj karta k CardView 364 00:17:49,980 --> 00:17:53,110 sám, pretože rovnako ako aplikácia nie je bude vedieť, čo s tým robiť, 365 00:17:53,110 --> 00:17:54,850 takže budeme proste dať to do CardView. 366 00:17:54,850 --> 00:18:00,050 Takže budeme odovzdať na Rovnako tak, karta rovná, 367 00:18:00,050 --> 00:18:05,426 a tak každá zložka môžu mať prístup ku veci, ktoré bola daná k nemu. 368 00:18:05,426 --> 00:18:07,800 Môžu prístup k vlastnostiam , Ktoré boli uvedené na neho 369 00:18:07,800 --> 00:18:09,470 pomocou tejto syntaxe, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Takže čo sa stane, je tu máte myCard objekt. 372 00:18:14,920 --> 00:18:18,250 Môžete odovzdať ju do aplikácie pomocou App karty rovná myCard. 373 00:18:18,250 --> 00:18:21,420 Ten objekt karta je kladený na vašej aplikácii. 374 00:18:21,420 --> 00:18:24,400 Aplikácia môže pristupovať as this.props.card. 375 00:18:24,400 --> 00:18:28,780 Je to niečo ako obraz vie, čo to je zdroj. 376 00:18:28,780 --> 00:18:31,972 >> Táto aplikácia vie, čo to je karta je, a to môže robiť veci s ním. 377 00:18:31,972 --> 00:18:32,930 To môže robiť výpočty. 378 00:18:32,930 --> 00:18:35,290 To môže urobiť rozhodnutie založená mimo neho. 379 00:18:35,290 --> 00:18:39,950 >> Pre túto chvíľu som išiel prejsť this.props.card na CardView. 380 00:18:39,950 --> 00:18:43,420 Urobiť tak ďaleko zmysel? 381 00:18:43,420 --> 00:18:45,210 Bude to teraz väčší zmysel. 382 00:18:45,210 --> 00:18:46,990 >> OK, tak teraz sme na CardView. 383 00:18:46,990 --> 00:18:51,719 Naše CardView, dostane kartu, mal vytlačiť svoju otázku a odpoveď. 384 00:18:51,719 --> 00:18:54,510 Práve teraz sme jednoducho vytlačí niektoré napevno otázky a odpovede. 385 00:18:54,510 --> 00:18:57,720 Musíme prísť na out-- potrebujeme požiadať kartu, ktorá nám dali 386 00:18:57,720 --> 00:19:01,360 aká je otázka a odpoveď, a vytlačiť túto von do obrazovky. 387 00:19:01,360 --> 00:19:02,470 >> Takže môžeme to urobiť tu. 388 00:19:02,470 --> 00:19:06,135 V činí begin-- najprv urobiť rovná. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Takže to, čo tu robíme, je, že vieme, karty sú nám daná k nehnuteľnosti, 391 00:19:13,050 --> 00:19:13,580 doprava? 392 00:19:13,580 --> 00:19:15,930 Je nám daná ako vstup. 393 00:19:15,930 --> 00:19:19,440 Rovnako ako je to skoro ako argumenty funkcie. 394 00:19:19,440 --> 00:19:22,810 Karta je argument takmer k tomuto CardView. 395 00:19:22,810 --> 00:19:25,239 >> Budeme extrahovať, že, a dal to do premennej pochybnosť. 396 00:19:25,239 --> 00:19:27,280 Uistite sa, že odpoveď šla na premennú odpoveď. 397 00:19:27,280 --> 00:19:31,130 Výzvy, ktoré karta odpovedať. 398 00:19:31,130 --> 00:19:35,072 A teraz, že máme tieto, miesto tlače sa tento text, 399 00:19:35,072 --> 00:19:37,030 ideme na vytlačenie všetko, čo nám dali. 400 00:19:37,030 --> 00:19:43,580 >> Takže to stuff-- tak ideme uhasiť Otázka Odpoveď. 401 00:19:43,580 --> 00:19:46,380 Uvidíme, či to funguje. 402 00:19:46,380 --> 00:19:52,800 Cool, tak sa poďme ho krok po kroku ešte raz len pre istotu. 403 00:19:52,800 --> 00:20:00,470 >> Takže moja karta je objekt karta, a my dávajú túto kartu do aplikácie. 404 00:20:00,470 --> 00:20:04,790 A aplikácie bude vziať kartu a dať ju do CardView. 405 00:20:04,790 --> 00:20:09,190 A to CardView hovorí, ak ste daj mi akúkoľvek Flashcard objekt 406 00:20:09,190 --> 00:20:11,920 Budem vytlačiť svoju otázku a jeho odpoveď, že jo? 407 00:20:11,920 --> 00:20:14,590 >> Takže to, čo som mohol urobiť, je, že som si zaslať tento kód, prvý 408 00:20:14,590 --> 00:20:16,580 ako 10 riadkov mojom kódu, až môj priateľ. 409 00:20:16,580 --> 00:20:18,820 Mohol vložiť ho do jeho vlastnú žiadosť. 410 00:20:18,820 --> 00:20:27,200 A tak dlho, ako urobil to isté, ako CardView karta rovná sa to, 411 00:20:27,200 --> 00:20:30,580 tak dlho, ako on vytvoril CardView a dal tomu správne informácie, 412 00:20:30,580 --> 00:20:31,987 mohol urobiť svoju vlastnú kartu. 413 00:20:31,987 --> 00:20:34,320 A tak sa týmto spôsobom, je to naozaj pohode spôsob, ako vybudovať 414 00:20:34,320 --> 00:20:35,906 komponenty, ktoré používajú sebe, že jo? 415 00:20:35,906 --> 00:20:38,280 Táto karta, mohol by som publikovať tento CardView na internete, 416 00:20:38,280 --> 00:20:39,790 a ľudia budú môcť používať. 417 00:20:39,790 --> 00:20:45,070 Takže v podstate, je to ako jeden z Štandardné funkcie v knižnici C. 418 00:20:45,070 --> 00:20:47,280 >> Jedná sa o funkciu, kde niekto napísal. 419 00:20:47,280 --> 00:20:48,419 Dáte určitý vstup. 420 00:20:48,419 --> 00:20:49,710 Bude vyrábať určitý výstup. 421 00:20:49,710 --> 00:20:50,890 Nezaujíma vás, ako to funguje interne. 422 00:20:50,890 --> 00:20:53,790 Tak dlho, ako ste jej dávajú právo vstup, bude to robiť ten správny výstup. 423 00:20:53,790 --> 00:20:57,850 >> A zložku môže byť myslel rovnakým spôsobom. 424 00:20:57,850 --> 00:21:00,280 To je ako CardView funkciu knižnice. 425 00:21:00,280 --> 00:21:03,400 Pokiaľ ho dať nejaké karty ako vlastnosť, bude to 426 00:21:03,400 --> 00:21:05,095 vytlačiť obsah danej karty. 427 00:21:05,095 --> 00:21:16,820 Rovnako ako keď zmením kartu namiesto toho ako to, čo je 5 a 37, 428 00:21:16,820 --> 00:21:19,210 to bude aktualizovať podľa toho. 429 00:21:19,210 --> 00:21:21,955 Takže stačí zmenou vstup, sa dostane určitý výkon. 430 00:21:21,955 --> 00:21:24,830 Takže si môžete myslieť komponentov takmer ako funkcia týmto spôsobom, ktorý 431 00:21:24,830 --> 00:21:25,920 si môžete dať dohromady. 432 00:21:25,920 --> 00:21:29,440 Získate vstup, ako je tento CardView ako vstup, dostanete výstup. 433 00:21:29,440 --> 00:21:31,900 V tomto prípade je výstup je HTML. 434 00:21:31,900 --> 00:21:34,404 Urobiť tak ďaleko zmysel? 435 00:21:34,404 --> 00:21:36,890 Cool, tak znova, vlastnosti sú ako môžete odovzdať informácie 436 00:21:36,890 --> 00:21:40,900 do a zo zložiek. 437 00:21:40,900 --> 00:21:42,740 >> OK, takže poďme aby to vec interaktívne. 438 00:21:42,740 --> 00:21:44,450 Práve teraz je to trochu nuda. 439 00:21:44,450 --> 00:21:45,520 Čo je to [nepočuteľných]? 440 00:21:45,520 --> 00:21:48,210 Môžete vytlačiť nejaké von, ale to je všetko, čo sa dá robiť. 441 00:21:48,210 --> 00:21:51,550 >> Takže poďme späť k stará otázka práve teraz. 442 00:21:51,550 --> 00:21:54,405 OK, takže práve teraz tieto komponenty sú nudné, pretože všetko, čo robia, 443 00:21:54,405 --> 00:21:55,030 sa dostanú vstup. 444 00:21:55,030 --> 00:21:56,100 Robia výstup, je to tak? 445 00:21:56,100 --> 00:21:57,049 To je trochu nuda. 446 00:21:57,049 --> 00:21:59,090 Chceme mať otázky komponenty, aby bolo možné mať 447 00:21:59,090 --> 00:22:02,150 nejaký vnútorný stav, ako niečo zapamätať. 448 00:22:02,150 --> 00:22:05,320 >> Pre FlashCard, pre Príklad, aký druh štátu 449 00:22:05,320 --> 00:22:07,550 Možno budete chcieť pamätať FlashCard? 450 00:22:07,550 --> 00:22:09,740 Čo dočasný stav Možno budete chcieť mať na pamäti, 451 00:22:09,740 --> 00:22:12,491 pre FlashCard v Flashcard aplikácie? 452 00:22:12,491 --> 00:22:13,990 Divákov: Či už to bolo normálne? 453 00:22:13,990 --> 00:22:14,990 NEEL MEHTA: Áno, jasné. 454 00:22:14,990 --> 00:22:17,665 Takže možno budete chcieť, aby Trať ste lícom nahor, alebo sú 455 00:22:17,665 --> 00:22:19,100 budete čeliť nadol na karte. 456 00:22:19,100 --> 00:22:23,420 Na Facebook, napríklad, že nie Chcete si spomenúť, kde v noviniek 457 00:22:23,420 --> 00:22:25,870 Si ty, alebo chceli kto je profil sú práve teraz robíte. 458 00:22:25,870 --> 00:22:30,127 >> Na Messenger, rovnako ako to, čo text, zadajte do poľa, že jo? 459 00:22:30,127 --> 00:22:31,710 Ak aktualizovať stránku, to ide preč. 460 00:22:31,710 --> 00:22:32,793 Ale nemáte naozaj jedno. 461 00:22:32,793 --> 00:22:33,770 Je to len dočasné. 462 00:22:33,770 --> 00:22:34,548 Jo? 463 00:22:34,548 --> 00:22:36,152 >> Divákov: [Nepočuteľné] 464 00:22:36,152 --> 00:22:38,360 NEEL MEHTA: Ako blesk karta, rovnako ako si môžete byť vidieť 465 00:22:38,360 --> 00:22:40,290 otázka strana alebo odpoveď strana? 466 00:22:40,290 --> 00:22:41,070 >> Divákov: OK. 467 00:22:41,070 --> 00:22:43,270 >> NEEL MEHTA: Rovnako ako obojstranné fleshky, že jo? 468 00:22:43,270 --> 00:22:46,370 Jo, takže chcete majú túto myšlienku teraz 469 00:22:46,370 --> 00:22:50,370 Mám vlastnosti, čo je ako vstupy, ale stav, ktorý je dočasný, uh, 470 00:22:50,370 --> 00:22:51,839 kde ste na stránke, nie? 471 00:22:51,839 --> 00:22:54,380 Opäť som povedal v Facebook Messenger, mám podobne, ktoré človek 472 00:22:54,380 --> 00:22:56,550 máte zobrazenú Facebook alebo kto je profil, nie? 473 00:22:56,550 --> 00:22:58,030 >> To je len dočasné. 474 00:22:58,030 --> 00:23:01,200 Je dôležité ukázať užívateľovi čo sa deje, ale aktualizujte stránku. 475 00:23:01,200 --> 00:23:02,250 Je to naozaj nezáleží. 476 00:23:02,250 --> 00:23:04,530 Takže je to dočasný stav, tak sme všetci to stáť. 477 00:23:04,530 --> 00:23:06,250 >> Takže, ešte raz, je tu stáť a rekvizity. 478 00:23:06,250 --> 00:23:09,084 Podpery je uvedený vstup zo zdroja údajov. 479 00:23:09,084 --> 00:23:10,250 Štát je ako predvolené. 480 00:23:10,250 --> 00:23:13,700 Je to rovnaké ako veci, ktoré robí vec interaktívne. 481 00:23:13,700 --> 00:23:17,720 >> Takže v našom CardView-- poďme sa náš CardView-- tak to bolo fajn. 482 00:23:17,720 --> 00:23:21,420 Čo budeme robiť tu, ideme na dotyk CardView a iba CardView. 483 00:23:21,420 --> 00:23:25,105 A tak môj priateľ, ktorý dostal to, že nevšimne žiadny rozdiel. 484 00:23:25,105 --> 00:23:27,230 Nebudú musieť zmeniť niektoré z ich vlastný kód, 485 00:23:27,230 --> 00:23:29,410 ale že by som vidieť ich CardView dostal nadupaným hore. 486 00:23:29,410 --> 00:23:31,270 To je pekný časť o komponenty. 487 00:23:31,270 --> 00:23:35,290 >> OK, takže v našej CardView, skúsme a sledovať, či budeme postupne nahor 488 00:23:35,290 --> 00:23:36,560 alebo stranou nadol. 489 00:23:36,560 --> 00:23:40,480 V Reagovať robíme to tým, že najprv určujúci počiatočný stav. 490 00:23:40,480 --> 00:23:42,070 Kde karta začať? 491 00:23:42,070 --> 00:23:48,480 >> Takže buďte funkciu nazvanú getInitialState fungovať, a vraciame sa objekt. 492 00:23:48,480 --> 00:23:53,310 Tento objekt obsahuje nejaký stať, a štát je len pár kľúč-hodnota. 493 00:23:53,310 --> 00:23:56,950 Rovnako ako v pokyn, máte kľúč a hodnota, máte ako názov je reťazec. 494 00:23:56,950 --> 00:24:01,410 >> V tomto prípade, povedzme, že predná strana je pravda. 495 00:24:01,410 --> 00:24:03,760 To hovorí, že máme stáť. 496 00:24:03,760 --> 00:24:06,570 Jednou zložkou štátu je atribút s názvom predné. 497 00:24:06,570 --> 00:24:09,649 [Nepočuteľný], tak tým, že v predvolenom nastavení, sme v prednej strane karty, 498 00:24:09,649 --> 00:24:11,440 a môžeme to zmeniť ako sme flip kartu. 499 00:24:11,440 --> 00:24:13,380 Dáva zmysel? 500 00:24:13,380 --> 00:24:18,190 >> OK, takže robí, práve teraz, my sme ukazujúci na otázku a odpoveď. 501 00:24:18,190 --> 00:24:20,860 Teraz, čo by sme mali robiť je ukázať na otázku 502 00:24:20,860 --> 00:24:24,370 ak sme na prednej strane karty, takže je odpoveď na zadnej strane karty. 503 00:24:24,370 --> 00:24:26,850 To je dôvod, prečo ste všetci robia karta interaktívne. 504 00:24:26,850 --> 00:24:28,100 Takže poďme sa pokúsiť, aby to tu. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 No, najprv len aby premennú. 507 00:24:33,620 --> 00:24:37,790 Môžeme sa opýtať teraz this.state.front. 508 00:24:37,790 --> 00:24:42,010 Máme prístup konštatovať rovnaký my prístupové rekvizity, tak this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Ak sme predné, potom textu je this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Ak sme na prednej časti karta, budeme sa snažiť a urvat 512 00:24:51,360 --> 00:24:52,485 otázka z karty. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 V opačnom prípade, keď sme na zadnej strane karty, čo budeme robiť? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> Divákov: Odpoveď? 517 00:25:02,750 --> 00:25:05,041 >> NEEL MEHTA: Jo, tak textu rovná this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Ale ak si všimnete, sme pomocou štát urobiť rozhodnutie 520 00:25:10,930 --> 00:25:14,420 Pretože teraz zložky bude vyzerať inak 521 00:25:14,420 --> 00:25:16,710 umiestnený preč, ako tieto komunikovať s ním. 522 00:25:16,710 --> 00:25:20,355 Takže namiesto toho, vytlačenie to, my len vytlačiť text. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, tak teraz, ako vidíte, vidíme len na otázku. 525 00:25:28,650 --> 00:25:37,720 A keď zmením stav tu ručne front je nepravdivé dostaneme 42 späť. 526 00:25:37,720 --> 00:25:39,720 >> Takže, opäť, táto súčasť má svoj vlastný štát. 527 00:25:39,720 --> 00:25:43,440 Rovnako ako tlačidlo vie, či to bolo stlačené, alebo nie, 528 00:25:43,440 --> 00:25:46,080 tohle vie, čo je na prednej alebo na zadnej strane. 529 00:25:46,080 --> 00:25:48,320 V predvolenom nastavení je to na prednej strane. 530 00:25:48,320 --> 00:25:50,840 A potom, ak je to na prednej strane, budeme vytlačiť na otázku. 531 00:25:50,840 --> 00:25:53,106 Ak je to na zadnej strane, budeme vytlačiť odpoveď. 532 00:25:53,106 --> 00:25:54,980 Takže, znovu, informácie vzhľadom k tomu, je rovnaký. 533 00:25:54,980 --> 00:25:59,090 Proste to vyzerá inak založené na tom, ako ho naprogramovať. 534 00:25:59,090 --> 00:26:02,670 Tak, napríklad Facebook Messenger, aj keď sa dostanete na rovnaký zdroj údajov, 535 00:26:02,670 --> 00:26:05,170 to by mohlo vyzerať inak pretože štát je iný. 536 00:26:05,170 --> 00:26:08,421 Pozeráte sa v a Správa rôzne osoby. 537 00:26:08,421 --> 00:26:10,930 >> OK, takže to je všetko v poriadku a dobrý, ale teraz to, čo je vlastne 538 00:26:10,930 --> 00:26:15,940 aby nás mohli zmeniť, či už Naše karta je predná alebo zadná. 539 00:26:15,940 --> 00:26:19,010 Môžeme to urobiť tým, že pridá flip Tlačidlo, tlačidlo na kartu, ktorá 540 00:26:19,010 --> 00:26:22,950 vyletí pamäťovú kartu, ak je to [nepočuteľný]. 541 00:26:22,950 --> 00:26:31,770 Takže poďme sa tu pridať tlačidlo, toto tlačidlo, a toto tlačidlo bude hovoriť klávesnice. 542 00:26:31,770 --> 00:26:35,650 >> A tak práve teraz, to nerobí nič. 543 00:26:35,650 --> 00:26:37,075 Je to proste vyzerá pekne. 544 00:26:37,075 --> 00:26:43,650 Čo môžeme urobiť, je, že môžeme pridať cvaknutie psovod, onClick rovná this.flip, 545 00:26:43,650 --> 00:26:44,820 a my budeme definovať flipe neskôr. 546 00:26:44,820 --> 00:26:47,120 Ale v podstate, onClick je funkcia, ktorá 547 00:26:47,120 --> 00:26:48,675 sa zavolá keď používateľ klikne. 548 00:26:48,675 --> 00:26:52,330 >> Preto je toto tlačidlo bude vedieť keď to bolo klikli. 549 00:26:52,330 --> 00:26:54,750 Went to bolo klikli, to bude hodiť kartu. 550 00:26:54,750 --> 00:26:58,382 Je to niečo ako tvoj rozvoz pizze chlap. 551 00:26:58,382 --> 00:27:01,590 Si ako, v poriadku, vždy, keď niekto zavolá mi, budem doručiť pizzu, že jo? 552 00:27:01,590 --> 00:27:03,420 >> Vy registrovať poslucháča. 553 00:27:03,420 --> 00:27:04,530 Môžete počúvať pre udalosť. 554 00:27:04,530 --> 00:27:07,657 Získate zavolal, a keď sa udalosť stane, niečo urobiť. 555 00:27:07,657 --> 00:27:08,240 Dostanete pizzu. 556 00:27:08,240 --> 00:27:11,480 V tomto prípade, keď ste stlačili, flip karty. 557 00:27:11,480 --> 00:27:14,560 >> A preto je treba definovať funkcia, ktorá bude flip karty, 558 00:27:14,560 --> 00:27:17,930 takže budeme písať toto právo tu, flip funkciu. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 A tak to, čo si myslíte, že fanúšik bude robiť? 561 00:27:23,680 --> 00:27:27,180 Opäť sa zavolá, keď klikneme na tlačidlo otočiť. 562 00:27:27,180 --> 00:27:29,406 Čo by mala funkciu Flip robiť? 563 00:27:29,406 --> 00:27:34,136 >> Publikum: Zmena this.state.front z true na false, false na hodnotu true. 564 00:27:34,136 --> 00:27:38,420 >> NEEL MEHTA: Jo, tak sa bez ohľadu this.front je-- predné stav. 565 00:27:38,420 --> 00:27:40,930 Vezmite predné stať, ak je to pravda, aby bolo nepravdivé. 566 00:27:40,930 --> 00:27:42,530 Ak je to nepravdivé, aby to pravda, nie? 567 00:27:42,530 --> 00:27:45,330 Takže poďme to skúsiť. 568 00:27:45,330 --> 00:27:48,240 >> Nemôžete zmeniť stav len tým, že robí this.state. 569 00:27:48,240 --> 00:27:50,380 Môžete to urobiť. 570 00:27:50,380 --> 00:27:52,030 Môžete to urobiť. 571 00:27:52,030 --> 00:27:55,810 Musíte použiť funkciu volal this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Takže môžete povedať this.setState front hrubého čreva to kde, znovu, zvolanie 573 00:28:03,230 --> 00:28:04,330 bod znamená opak. 574 00:28:04,330 --> 00:28:07,420 Myslím, že či to. state.front je pravda, bude to otočiť false. 575 00:28:07,420 --> 00:28:09,170 Takže budeme nastaviť stav z true na false. 576 00:28:09,170 --> 00:28:11,430 Ak je to falošné, budeme nastaviť tak, false na hodnotu true. 577 00:28:11,430 --> 00:28:17,210 >> Len si všimnite, že sme si stanovili a ľahko dostať inak, a tak sa poďme skúsiť. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, pozri sa na to. 579 00:28:18,675 --> 00:28:21,810 Tlačidlo Flip bude teraz prepnúť spredu dozadu stave. 580 00:28:21,810 --> 00:28:24,990 >> A tak tu je miesto, kde vidíte Trochu mágie Reagovať. 581 00:28:24,990 --> 00:28:28,420 Rovnako ako sme sa nikdy povedal, že to, aby znovu spracovala. 582 00:28:28,420 --> 00:28:30,910 Nikdy sme povedali, že prekresliť čokoľvek. 583 00:28:30,910 --> 00:28:32,630 Ak robíte to bez Reagovať, mali by ste 584 00:28:32,630 --> 00:28:34,588 majú radi, keď je to-- Tlačidlo fanda kliknutie, 585 00:28:34,588 --> 00:28:37,290 budete musieť povedať, že na ručne re-render, že jo? 586 00:28:37,290 --> 00:28:43,050 >> Reagovať je naozaj cool v tom, že ak vás dať určitý stav a vlastnosti, 587 00:28:43,050 --> 00:28:45,760 bude vždy vykreslenie presne to isté. 588 00:28:45,760 --> 00:28:48,690 A tak, keď sa niekedy zmeníme stav a vlastnosti, 589 00:28:48,690 --> 00:28:50,819 reagovať len znovu činí celú vec. 590 00:28:50,819 --> 00:28:52,860 To vie, že je tu one-to-one korešpondencie 591 00:28:52,860 --> 00:28:57,270 medzi štátom a parametrov a HTML. 592 00:28:57,270 --> 00:29:00,110 Takže kedykoľvek jeden z tých, zmeny vykonané prostredníctvom súboru stave, 593 00:29:00,110 --> 00:29:03,750 to sa zmení, ako sa pay je znovu vykreslený. 594 00:29:03,750 --> 00:29:06,650 A tak v podstate je ako Reagovať čaká na vás zmeniť. 595 00:29:06,650 --> 00:29:09,870 >> Kedykoľvek sa zmení niečo, to bude znovu spracovala celú stranu. 596 00:29:09,870 --> 00:29:12,480 A keď to znie neefektívne, je to preto, že by bolo, 597 00:29:12,480 --> 00:29:15,050 ale reagujú využíva vec volal Tieň DOM. 598 00:29:15,050 --> 00:29:19,950 Namiesto toho, aby čerpanie stránku priamo, ho udržuje virtuálne HTML strom v pamäti. 599 00:29:19,950 --> 00:29:23,620 >> Viete, HTML je ako strom, ako hierarchickej štruktúre dát. 600 00:29:23,620 --> 00:29:28,990 Udržuje falošný strom v pamäti, a pri každej aktualizácii stránky, 601 00:29:28,990 --> 00:29:31,940 to bude čerpať ďalší falošný strom, a bude to vypočítať 602 00:29:31,940 --> 00:29:35,120 čo treba zmeniť, aby sa strana, aby sa tieto dva stromy rovnaké. 603 00:29:35,120 --> 00:29:38,540 Takže v podstate, je prakticky re-vykreslí veľa. 604 00:29:38,540 --> 00:29:41,540 A potom je to len rád mení stránky v malých vylepšení podľa potreby, 605 00:29:41,540 --> 00:29:44,240 takže je to veľmi, veľmi, veľmi efektívne. 606 00:29:44,240 --> 00:29:46,970 >> Takže v podstate Reagovať bude kedykoľvek niečo zmeniť, 607 00:29:46,970 --> 00:29:49,010 to bude znovu vykresliť stránku virtuálne. 608 00:29:49,010 --> 00:29:52,830 Bude to prísť na to, čo potrebujem zmeniť, aby sa skutočné stránky odrážajú 609 00:29:52,830 --> 00:29:55,602 virtuálne stránky, a to urobím. 610 00:29:55,602 --> 00:29:56,560 To je virtuálna DOM. 611 00:29:56,560 --> 00:29:59,350 Je to jeden z najväčších rysy Reagovať. 612 00:29:59,350 --> 00:30:00,880 >> Dáva to zmysel_ 613 00:30:00,880 --> 00:30:01,540 Nejaké otázky? 614 00:30:01,540 --> 00:30:02,040 Jo? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> Publikum: Ako porovnať ešte MVC 617 00:30:08,969 --> 00:30:10,760 že sme hovorili o Pred ako zdrojov. 618 00:30:10,760 --> 00:30:13,527 >> NEEL MEHTA: Jo, otázka je to, ako to v porovnaní s MVC? 619 00:30:13,527 --> 00:30:14,610 Pýtali ste sa o zdrojoch. 620 00:30:14,610 --> 00:30:16,445 Dobre, poďme hovoriť o tom, ako to funguje. 621 00:30:16,445 --> 00:30:18,190 >> V MVC by ste aktualizovať model. 622 00:30:18,190 --> 00:30:20,560 V tomto prípade budeme mať model karty. 623 00:30:20,560 --> 00:30:24,540 Pohľad bude mať fanda tlačidlá a ovládací prvok 624 00:30:24,540 --> 00:30:26,310 bude mať funkciu Flip. 625 00:30:26,310 --> 00:30:28,450 Takže názor by povedať, Regulátor flip klávesnice. 626 00:30:28,450 --> 00:30:30,370 Flip by povedať, model zmeniť, nie? 627 00:30:30,370 --> 00:30:33,915 >> A tak keď si urobiť MVC, ty počúvajte model zmeniť, 628 00:30:33,915 --> 00:30:37,150 a znovu vykresliť názor podľa toho. 629 00:30:37,150 --> 00:30:39,210 Alebo stačí páčiť majú radič. 630 00:30:39,210 --> 00:30:42,418 Počkajte model zmeniť, a potom si vybrať časť, ako vec 631 00:30:42,418 --> 00:30:44,032 zmeniť. 632 00:30:44,032 --> 00:30:45,740 Tu máme jednu vec, ale vo veľkom app, 633 00:30:45,740 --> 00:30:48,510 Máte rád si spomenúť, čo zmena v každom mieste, 634 00:30:48,510 --> 00:30:50,290 takže je to trochu nepríjemné. 635 00:30:50,290 --> 00:30:53,670 A tak Reagovať je pekné pretože má tieň Dom. 636 00:30:53,670 --> 00:30:56,040 To si môže dovoliť len prepísať celú vec. 637 00:30:56,040 --> 00:30:58,680 Nemusíte selektívne ako je hádať, čo aktualizovať. 638 00:30:58,680 --> 00:31:02,186 >> Na Facebooku ak sa vám páči dostanete novú správu, v MVC, 639 00:31:02,186 --> 00:31:04,060 by ste mať na pamäti, OK, meniť veci 640 00:31:04,060 --> 00:31:06,260 v hornej časti strana, ikona správy. 641 00:31:06,260 --> 00:31:08,290 Tiež pop nové okno v dolnej časti. 642 00:31:08,290 --> 00:31:10,070 Tiež sa niečo nové v tomto okne. 643 00:31:10,070 --> 00:31:11,060 Tiež hrať zvuk. 644 00:31:11,060 --> 00:31:13,150 >> To je veľa vecí chodiť v rovnakom čase. 645 00:31:13,150 --> 00:31:15,320 A tak, ak nemáte majú tieň Dom, mali by ste 646 00:31:15,320 --> 00:31:18,740 musieť urobiť ručne, pretože nemôžete zbaviť celú stránku. 647 00:31:18,740 --> 00:31:21,430 Nemôžete si dovoliť, takže máte zmeniť každú vec ručne, 648 00:31:21,430 --> 00:31:23,990 čo je naozaj otravné v MVC. 649 00:31:23,990 --> 00:31:27,640 >> Takže, aby boli sporivý, oni selektívne 650 00:31:27,640 --> 00:31:30,750 aktualizovať stránku, ktorá je účinný, ale aj nepríjemné. 651 00:31:30,750 --> 00:31:34,002 V React, kvôli tieni Dom, dostanete oboje zadarmo. 652 00:31:34,002 --> 00:31:35,710 Je to efektívne, pretože Tieňovej Dom. 653 00:31:35,710 --> 00:31:37,210 Zúženie aktualizuje stránku. 654 00:31:37,210 --> 00:31:40,292 Nie je to robí manipuláciu strom. 655 00:31:40,292 --> 00:31:41,250 Získate účinnosť. 656 00:31:41,250 --> 00:31:45,420 Môžete tiež získať jednoduchosť použitia, pretože ak ste práve prepísať celú stránku, 657 00:31:45,420 --> 00:31:48,970 ale jednoducho viete, v poriadku, veci, sa bude na stránke niekam. 658 00:31:48,970 --> 00:31:51,180 To by mohlo byť na inom mieste, ale že to bude na stránke, nie? 659 00:31:51,180 --> 00:31:52,860 Takže ste práve re-tavené celá vec v podstate, 660 00:31:52,860 --> 00:31:55,540 a vy by ste mohli urobiť pár Zmeny samotnej stránky. 661 00:31:55,540 --> 00:31:57,850 >> Takže, opäť v MVC vás bude musieť vybrať 662 00:31:57,850 --> 00:32:01,840 medzi jednoduchosť použitia a efektivitu, a reagovať, dostanete obaja. 663 00:32:01,840 --> 00:32:04,020 Takže je to lepšie. 664 00:32:04,020 --> 00:32:05,220 Dáva zmysel? 665 00:32:05,220 --> 00:32:06,676 Solid. 666 00:32:06,676 --> 00:32:12,080 >> OK, takže uvidíme, poďme hovoriť niečo málo o kroku 4, 667 00:32:12,080 --> 00:32:14,740 ako môžeme vložiť komponenty. 668 00:32:14,740 --> 00:32:16,260 Takže máme práve teraz. 669 00:32:16,260 --> 00:32:19,420 Máme chladné malé tlačidlo. 670 00:32:19,420 --> 00:32:23,157 Môžeme sa otočiť späť a tam, a to je všetko, čo robí. 671 00:32:23,157 --> 00:32:24,990 Povedzme, že chceme, aby majú ďalšie komponenty. 672 00:32:24,990 --> 00:32:28,730 Povedzme, že náš flashcard aplikácie by obsahujú zoznam všetkých kariet 673 00:32:28,730 --> 00:32:31,520 že máte, tak to znamená, že by mali mať ďalší krok. 674 00:32:31,520 --> 00:32:32,970 No, možno sa to nazvať zobrazenie zoznamu. 675 00:32:32,970 --> 00:32:36,200 Poďme urobiť zobrazenie zoznamu, ktorý koexistuje s CardView, 676 00:32:36,200 --> 00:32:39,680 a tento zoznam zobrazenie a CardView bude páčiť pracovať spoločne. 677 00:32:39,680 --> 00:32:43,190 A vy ich môžete kombinovať aby sa naša aplikácia pre vás. 678 00:32:43,190 --> 00:32:45,160 >> Takže najprv, poďme urobiť pár viac kariet v poriadku. 679 00:32:45,160 --> 00:32:46,370 Povedzme, aké karty? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 A len tak nemám na nudiť písanie ju, 682 00:32:51,910 --> 00:32:53,410 Ja som jednoducho ísť skopírovať odtiaľto. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 A tak ja idem na to dať mu len jednu kartu. 685 00:33:03,580 --> 00:33:06,910 Chystám sa dať rad kariet. 686 00:33:06,910 --> 00:33:10,240 Takže najprv, že aplikácia chystá rozbiť teraz. 687 00:33:10,240 --> 00:33:14,717 Dobre, takže budeme robiť tento schopní zvládnuť viac kariet. 688 00:33:14,717 --> 00:33:17,800 Takže najprv, budeme dávať to, nie len jednu kartu, ale rad kariet, 689 00:33:17,800 --> 00:33:18,700 ako zoznam kariet. 690 00:33:18,700 --> 00:33:20,980 A v tomto prípade, máme tri z nich. 691 00:33:20,980 --> 00:33:27,280 >> Dobre, takže takže aplikácie je bude získať zoznam kariet, 692 00:33:27,280 --> 00:33:29,870 a bude to sa rozhodnúť, ktoré kto ukázať na CardView. 693 00:33:29,870 --> 00:33:33,740 CardView môže iba činí jednu kartu, ale aplikácia 694 00:33:33,740 --> 00:33:37,610 dostane zoznam všetkých kariet, že jo? 695 00:33:37,610 --> 00:33:40,820 >> Takže, keď ste zistili, kto Karta dať CardView, 696 00:33:40,820 --> 00:33:44,660 ako by ste, že by ste mali byť schopní urobiť rozhodnutie o tom, ktoré karty 697 00:33:44,660 --> 00:33:47,064 ukázať? 698 00:33:47,064 --> 00:33:49,980 Ak chcete vám náznak, že je dočasne Budete prezeráte určitú kartu. 699 00:33:49,980 --> 00:33:53,260 Ak aktualizovať stránku, budete stačí ísť späť na prvú kartu. 700 00:33:53,260 --> 00:33:55,464 To je v poriadku, pretože je to dočasné. 701 00:33:55,464 --> 00:33:56,630 Akou technikou môžeme používať? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> Divákov: Dalo by sa urobiť premennou takže rovnako ako vy mali dopredu. 704 00:34:08,760 --> 00:34:11,989 Je to pravda, mohol by ste mať aktuálne karta rovná 1? 705 00:34:11,989 --> 00:34:14,150 >> NEEL MEHTA: Jo, tak sme Chcete mať stať, že jo? 706 00:34:14,150 --> 00:34:16,080 Použili by ste stáť v Komponenta prísť na to, 707 00:34:16,080 --> 00:34:17,288 ktorá karta chceme dostať. 708 00:34:17,288 --> 00:34:19,290 Rovnako ako máme zoznam všetky karty, budeme 709 00:34:19,290 --> 00:34:21,630 používať stať, aby zistili, jeden z prvej karty, 710 00:34:21,630 --> 00:34:23,710 druhá karta, tretia karta, a tak ďalej. 711 00:34:23,710 --> 00:34:28,760 >> Takže aplikácie, takže aplikácie, dostanú majú funkciu getInitialState, 712 00:34:28,760 --> 00:34:35,020 getInitialState funkcie návrat. 713 00:34:35,020 --> 00:34:39,929 A budeme len povedať activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Takže teraz naša aplikácia má vlastný štát. 715 00:34:42,889 --> 00:34:47,179 >> A tak teraz na omietky, prísť na to, karta, nech to jednoducho ísť do poľa 716 00:34:47,179 --> 00:34:49,969 a chytiť vec v tomto indexe. 717 00:34:49,969 --> 00:34:53,580 Zvoľte karty rovnakej this.props.cards this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 Takže ako vidíte tu, rekvizity a Stať skutočne pracujú spoločne. 720 00:35:00,162 --> 00:35:08,990 Takže teraz, že máme AktivCard, budeme nazývať AktivCard, 721 00:35:08,990 --> 00:35:10,470 a uvidíme, či to funguje. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [Nepočuteľných] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Oh, že bol text chybe. 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, jo, takže teraz sme boli späť tam, kde sme boli predtým, nie? 729 00:35:54,840 --> 00:35:57,100 Rovnaký starý program, s výnimkou Teraz môžeme podporiť 730 00:35:57,100 --> 00:35:59,390 zoznam kariet, nie len jedna karta. 731 00:35:59,390 --> 00:36:04,130 A teraz, opäť, keď sme zmeniť activeIndex, môžeme ísť od 0 do 1, 732 00:36:04,130 --> 00:36:07,330 a teraz, keď už druhá karta, a potom sme šli do 0 ° C. 733 00:36:07,330 --> 00:36:10,390 Tak tu je nový nadupaným-up verzia nášho. 734 00:36:10,390 --> 00:36:16,000 >> OK, tak teraz poďme sa zobrazenie zoznamu, ktorý ukazuje všetky karty v programe, 735 00:36:16,000 --> 00:36:19,980 takže budeme robiť nový súčasť tzv ListView. 736 00:36:19,980 --> 00:36:22,155 Nech ListView rovná react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Takže chceme vykresliť neusporiadaný zoznam s zoznamu položku pre každú kartu. 739 00:36:38,800 --> 00:36:41,490 A tak máme veľa kariet. 740 00:36:41,490 --> 00:36:44,990 Chceme jednu položku zoznamu pre každú kartu, nie? 741 00:36:44,990 --> 00:36:47,490 Mohli by sme urobiť pre slučku, alebo niečo urobiť novú položku zoznamu. 742 00:36:47,490 --> 00:36:50,522 Ale spôsob, akým ste to v Reagovať použiť vec zvanú mapa. 743 00:36:50,522 --> 00:36:57,150 Mapa je nástroj alebo funkcie, ktorú používate že pre každú položku, beží nejakú funkciu, 744 00:36:57,150 --> 00:36:59,510 vezme návratovú hodnotu, a dáva vám to späť. 745 00:36:59,510 --> 00:37:06,310 >> Tak ako príklad, máme pole 1, 2, a to 3.map function-- 746 00:37:06,310 --> 00:37:12,120 je skratkou pre function-- x šípkami x krát x. 747 00:37:12,120 --> 00:37:16,110 To hovorí, že pre každé číslo v 1, 2, 3, vezmite si ju. 748 00:37:16,110 --> 00:37:17,800 Námestie, a to vrátiť. 749 00:37:17,800 --> 00:37:22,090 Tak čo si myslíš, že 1, 2, 3.map x ide do x krát 750 00:37:22,090 --> 00:37:25,480 x vám dáva späť vzhľadom k tomu, že táto funkcia je 751 00:37:25,480 --> 00:37:27,680 beží na každý prvok tejto matice. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> Publikum: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> NEEL MEHTA: Jo, 1, 4, 9 preto, že robíte 1 krát 1. 755 00:37:35,709 --> 00:37:36,500 To vám dáva jeden. 756 00:37:36,500 --> 00:37:37,690 To je prvý prvok. 757 00:37:37,690 --> 00:37:38,530 >> 2 krát 2 je 4. 758 00:37:38,530 --> 00:37:39,570 To je druhý prvok. 759 00:37:39,570 --> 00:37:40,310 3 krát 3 je 9. 760 00:37:40,310 --> 00:37:41,540 To je tretí prvok. 761 00:37:41,540 --> 00:37:42,640 Dáva zmysel? 762 00:37:42,640 --> 00:37:45,015 Mapa Takže má techniku, ktorú použitie vo funkčných programátorov, 763 00:37:45,015 --> 00:37:48,090 Nový štýl programovanie robiť niečo 764 00:37:48,090 --> 00:37:50,500 na každý prvok v zozname. 765 00:37:50,500 --> 00:37:51,970 A tak to znie povedome. 766 00:37:51,970 --> 00:37:53,370 Máme zoznam kariet. 767 00:37:53,370 --> 00:37:56,860 Chceme získať položku zoznamu pre každý človek, takže budeme jednoducho použiť mapu tu. 768 00:37:56,860 --> 00:38:00,250 Povieme, nech zoznam rovná this.props, karty, mapu. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> A tak dostal kartu, my sme bude generovať položky zoznamu 771 00:38:15,070 --> 00:38:17,580 S tým karty obsahu strane. 772 00:38:17,580 --> 00:38:20,660 Povedzme, že chceme dať von Karty o ne card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Takže tento zoznam obsahuje poľa LI je alebo položky zoznamu 775 00:38:30,649 --> 00:38:32,440 tam, kde je jeden zoznam položka pre každú kartu, 776 00:38:32,440 --> 00:38:35,150 a ktorý obsahuje karty otázku. 777 00:38:35,150 --> 00:38:37,640 Dáva zmysel? 778 00:38:37,640 --> 00:38:39,450 >> Cool, takže teraz poďme vytlačia, že von. 779 00:38:39,450 --> 00:38:46,521 Tak sme sa vrátiť ul. 780 00:38:46,521 --> 00:38:49,020 Vnútri tohto zoznamu, jednoducho budeme držať celý zoznam 781 00:38:49,020 --> 00:38:49,890 že nám dali. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Super. 784 00:38:53,350 --> 00:38:56,060 >> Dobre, tak teraz to Zoznam pohľad práce len nájsť. 785 00:38:56,060 --> 00:38:59,842 Máte otázky k zobrazenie zoznamu? 786 00:38:59,842 --> 00:39:01,270 Máte veľa kariet. 787 00:39:01,270 --> 00:39:02,800 Urobíte položku zoznamu pre každú kartu. 788 00:39:02,800 --> 00:39:05,466 A vy ste dal je vnútri neusporiadaný zoznam, a dáte ho späť. 789 00:39:05,466 --> 00:39:09,410 Takže teraz poďme konať, aby sme vložiť tento vnútri našej aplikácii, 790 00:39:09,410 --> 00:39:14,310 takže môžeme urobiť, zobrazenie zoznamu. 791 00:39:14,310 --> 00:39:17,070 To, čo argument, môžeme prejsť k zobrazenie zoznamu? 792 00:39:17,070 --> 00:39:18,320 Aké vlastnosti sa dáme to? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Pamätajte si, že ak dáte je to banda kariet, 795 00:39:26,860 --> 00:39:29,590 to bude robiť zoznam zobraziť u týchto kariet. 796 00:39:29,590 --> 00:39:32,267 Takže to, čo by sme prejsť tu ako argument? 797 00:39:32,267 --> 00:39:33,350 Divákov: Zoznam kariet? 798 00:39:33,350 --> 00:39:37,130 NEEL MEHTA: Jo, tak karty rovná this.props.cards, že jo? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 A tak jediný problém je, že môžete len 801 00:39:44,370 --> 00:39:48,600 obrátil jeden prvok najvyššej úrovne v render, takže máte zabaliť ho do div. 802 00:39:48,600 --> 00:39:49,100 Je to divne. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Tak uvidíme, či to. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Znamená to, že funguje? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Jo, tam idete. 809 00:40:31,030 --> 00:40:33,700 Takže teraz máme zoznam kariet na dne, 810 00:40:33,700 --> 00:40:36,180 a potom Máme CardView sám na vrchole, 811 00:40:36,180 --> 00:40:40,486 a že medzi vyletí obe strany karty. 812 00:40:40,486 --> 00:40:42,610 Teraz robí to zmysel, ako som to urobil? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Jo, tak znova, máme dve zložky. 815 00:40:46,790 --> 00:40:49,666 Súčasť sa tlačia ako prvé out každá karta v zozname. 816 00:40:49,666 --> 00:40:50,540 To je zobrazenie zoznamu. 817 00:40:50,540 --> 00:40:54,770 A druhá zložka vytlačí len, že kartu. 818 00:40:54,770 --> 00:40:58,840 Pokiaľ ho dať určitú kartu, bude to vytlačiť informácie o túto kartu 819 00:40:58,840 --> 00:41:01,870 a umožňujú otočiť tam a späť. 820 00:41:01,870 --> 00:41:05,850 >> Takže ak chceme, môžeme skúsiť a hovoriť o pridanie niektoré nové funkcie v tejto oblasti. 821 00:41:05,850 --> 00:41:09,482 V opačnom prípade môžeme hovoriť o niečo viac o o rýchlosti reaktora, 822 00:41:09,482 --> 00:41:11,190 alebo môžeme odpovedať otázky, ktoré môžu mať 823 00:41:11,190 --> 00:41:15,050 pretože tieto sú všetky z hlavných dielov o reakciu, že chcem hovoriť. 824 00:41:15,050 --> 00:41:16,540 Môžeme pokračovať. 825 00:41:16,540 --> 00:41:17,590 Môžeme odpovedať na otázky. 826 00:41:17,590 --> 00:41:18,560 Čokoľvek chceš. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> Divákov: Môžete použiť JSX v normálnom JavaScriptu? 829 00:41:24,205 --> 00:41:27,150 Alebo je to niečo, prišiel s [nepočuteľných]? 830 00:41:27,150 --> 00:41:30,760 >> NEEL MEHTA: Otázkou je, či si Používate JSX s normálnym JavaScriptu? 831 00:41:30,760 --> 00:41:32,620 Odpoveď je áno. 832 00:41:32,620 --> 00:41:41,070 JSX je len spôsob, ako to berie vaše JavaScript, ktorý má HTML vnútri nej, 833 00:41:41,070 --> 00:41:44,215 a zostavuje do JavaScriptu, že nemá HTML vnútri nej. 834 00:41:44,215 --> 00:41:47,880 Takže si všimnúť that-- tak všimnúť tu. 835 00:41:47,880 --> 00:41:50,820 To vyzerá, ako by si mal ako div a máte veci vnútri nej. 836 00:41:50,820 --> 00:41:54,970 >> , Ktorý prekladá do JavaScriptu, že ako generuje rovnakú vec. 837 00:41:54,970 --> 00:41:59,590 Myslím, že to, čo hovorím, je, že JSX je len syntaktické, ako by to 838 00:41:59,590 --> 00:42:03,530 preprocesor pre JavaScript moc ako PHP je preprocesor pre HTML. 839 00:42:03,530 --> 00:42:05,490 JSC je preprocesor pre JavaScript, ktorý umožňuje 840 00:42:05,490 --> 00:42:12,970 vložíte HTML vnútri vášho JavaScript. 841 00:42:12,970 --> 00:42:16,425 A tak ak máte správny transformátor čo je vec, s názvom [nepočuteľných], 842 00:42:16,425 --> 00:42:17,300 ktorý bude transformovať. 843 00:42:17,300 --> 00:42:19,360 Správne preprocesor, to bude vám umožní urobiť. 844 00:42:19,360 --> 00:42:20,235 >> Divákov: [Nepočuteľné] 845 00:42:20,235 --> 00:42:23,026 NEEL MEHTA: Zvyčajne nepotrebujete dať HTML vnútri JavaScriptu 846 00:42:23,026 --> 00:42:24,110 ak robíte Reagovať. 847 00:42:24,110 --> 00:42:27,146 Ale môžete to urobiť tak ako tak. 848 00:42:27,146 --> 00:42:27,645 Jo? 849 00:42:27,645 --> 00:42:29,353 >> Divákov: Myslím si, že vás opísal Reagovať 850 00:42:29,353 --> 00:42:31,970 ako funkčné programovacieho jazyka. 851 00:42:31,970 --> 00:42:35,646 Učíme sa C v CS50. 852 00:42:35,646 --> 00:42:38,032 Je C aj funkčná jazyk? 853 00:42:38,032 --> 00:42:39,990 NEEL MEHTA: Takže otázka je o funkčné 854 00:42:39,990 --> 00:42:43,010 oproti iným, čomu sa hovorí imperatívne alebo procedurálne programovanie. 855 00:42:43,010 --> 00:42:44,820 Sú dva druhy programov populárne. 856 00:42:44,820 --> 00:42:48,550 Jedna sa volá procesné, čo je o ako robiť príkazov, 857 00:42:48,550 --> 00:42:51,510 a jeden je funkčné, čo je všetko o ktoré majú funkcie a majúci 858 00:42:51,510 --> 00:42:52,930 Vstup a výstup z nich. 859 00:42:52,930 --> 00:42:55,930 Reagovať je funkčná paradigma. 860 00:42:55,930 --> 00:42:58,010 C je veľmi procedurálne paradigma. 861 00:42:58,010 --> 00:43:02,360 >> A ako príklad, napríklad C, nechcete robiť túto deklaratívny spôsobom 862 00:43:02,360 --> 00:43:04,390 tvorby programu, nie? 863 00:43:04,390 --> 00:43:06,826 Musíte povedať, tlačiť. 864 00:43:06,826 --> 00:43:07,950 Zmeniť túto štruktúru dát. 865 00:43:07,950 --> 00:43:08,530 Vytlačiť toto. 866 00:43:08,530 --> 00:43:10,160 Je to všetko o príkazy. 867 00:43:10,160 --> 00:43:12,640 >> V Reagovať, že to nie je že veľa príkazov. 868 00:43:12,640 --> 00:43:15,145 Je to všetko o tom mať komponenty, ktoré dohromady. 869 00:43:15,145 --> 00:43:16,300 Sú ako funkcia. 870 00:43:16,300 --> 00:43:26,360 Máte podobne ako funkcia volal CardView, 871 00:43:26,360 --> 00:43:28,680 ktoré je funkciou ktorý má vstup, výstup 872 00:43:28,680 --> 00:43:30,660 a tak React je všetko o tejto filozofie 873 00:43:30,660 --> 00:43:32,700 Americké ministerstvo having-- máte dáta. 874 00:43:32,700 --> 00:43:34,910 Môžete prechádzať cez to algoritmus, a to bude 875 00:43:34,910 --> 00:43:36,800 HTML výstup, ktorý vás len vytlačiť stránku, 876 00:43:36,800 --> 00:43:39,180 a tak budete musieť stavať to kúsok po kúsku. 877 00:43:39,180 --> 00:43:42,800 >> Takže k tomu metaforu na to, čo Povedal som predtým, viete, ako 878 00:43:42,800 --> 00:43:47,050 na Facebooku, ak sa dostanete správu, a môžete si vybrať, ktoré časti k aktualizácii, 879 00:43:47,050 --> 00:43:47,882 to je procesný. 880 00:43:47,882 --> 00:43:48,840 To je absolútne nevyhnutné, nie? 881 00:43:48,840 --> 00:43:49,806 OK, som dostal správu. 882 00:43:49,806 --> 00:43:50,930 Zmeňme účet tam. 883 00:43:50,930 --> 00:43:52,110 >> Poďme pop okná tu. 884 00:43:52,110 --> 00:43:52,780 Zmeňme účet tam. 885 00:43:52,780 --> 00:43:53,700 Poďme nakresliť to tu. 886 00:43:53,700 --> 00:43:55,220 To je procesný prístup. 887 00:43:55,220 --> 00:44:00,240 >> To je to, čo veci, ako Uhlová, Boost, Chrbticová ďalšie rámca použitie. 888 00:44:00,240 --> 00:44:01,200 Reagovať je funkčná. 889 00:44:01,200 --> 00:44:03,324 Je to veľmi odlišný spôsob, premýšľanie o veciach. 890 00:44:03,324 --> 00:44:07,950 To berie túto myšlienku poďme sa funkcií alebo algoritmy, ktoré budete 891 00:44:07,950 --> 00:44:08,800 dať mu dát. 892 00:44:08,800 --> 00:44:11,820 Bude vypľuť čo to by mal byť, a počítač 893 00:44:11,820 --> 00:44:13,490 sa bude starať o vážení von. 894 00:44:13,490 --> 00:44:15,890 Nemusíte zvládnuť sami. 895 00:44:15,890 --> 00:44:18,470 Znamená to, že trochu zmysel? 896 00:44:18,470 --> 00:44:18,970 Jo? 897 00:44:18,970 --> 00:44:24,180 >> Publikum: Vo funkčnej jazyk, všetko, čo sa deje naraz? 898 00:44:24,180 --> 00:44:26,800 >> NEEL MEHTA: Nie, čo sa stalo v poriadku. 899 00:44:26,800 --> 00:44:29,320 Rovnako ako tu je tu stále objednať, ale to nie je 900 00:44:29,320 --> 00:44:32,390 sa stalo v poradí, ako Chválim, príkaz, príkaz. 901 00:44:32,390 --> 00:44:36,459 Stáva sa to v poradí Funkcia vám dáva výstup. 902 00:44:36,459 --> 00:44:37,750 Daj to do inej funkcie. 903 00:44:37,750 --> 00:44:39,550 Daj to do ďalšej Funkcie, iné funkcie. 904 00:44:39,550 --> 00:44:41,470 >> Ak tak urobíte CS51, budete učiť funkčné programy 905 00:44:41,470 --> 00:44:42,886 trochu z rozsahu tejto. 906 00:44:42,886 --> 00:44:45,090 Ale v podstate, to, čo robí Reagovať cool je nielen 907 00:44:45,090 --> 00:44:46,840 jednocestný dátový tok a virtuálne Dom, 908 00:44:46,840 --> 00:44:48,700 ale aj táto myšlienka funkcionálne programovanie. 909 00:44:48,700 --> 00:44:51,720 A funkčné programovanie je veľmi jednoduché skladať a robiť super veci z, 910 00:44:51,720 --> 00:44:53,844 a je to veľmi jednoduché si myslieť, asi aj dôvod, prečo asi. 911 00:44:53,844 --> 00:44:55,450 Takže to je ďalší dobrý remíza Reagovať. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Nejaké ďalšie otázky? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Jo? 916 00:45:03,150 --> 00:45:06,840 >> Publikum: Um, prečo by ste Používajte nechal na rozdiel od var? 917 00:45:06,840 --> 00:45:10,450 >> NEEL MEHTA: Takže otázka znie Prečo používate nechať namiesto var? 918 00:45:10,450 --> 00:45:13,220 To je vec zvaná ES6 alebo ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Je to nová verzia JavaScript. 920 00:45:15,820 --> 00:45:19,050 Je tu veľa technických dôvodov, ale nech je lepšia verzia var. 921 00:45:19,050 --> 00:45:20,724 >> Je to, ako ste deklarovať premenné. 922 00:45:20,724 --> 00:45:21,390 Môžete použiť nechať. 923 00:45:21,390 --> 00:45:22,140 Môžete použiť var. 924 00:45:22,140 --> 00:45:23,825 Rokov má veľa technických reasons-- si môžete prezrieť ich 925 00:45:23,825 --> 00:45:25,610 up later--, prečo je to lepšie. 926 00:45:25,610 --> 00:45:28,780 V podstate, ES6 má niektoré pekné Nová syntaxe, niektoré nové funkcie 927 00:45:28,780 --> 00:45:30,720 v hornej časti starého JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Takže máme asi päť minút. 929 00:45:32,782 --> 00:45:34,990 Len som chcel hovoriť o ešte jedna vec naozaj rýchlo. 930 00:45:34,990 --> 00:45:36,450 Ak by ste mali nejaké otázky, poďme hovoriť o tom po tomto. 931 00:45:36,450 --> 00:45:38,366 Ale len tak sa to dostane zachytil na kameru, len som 932 00:45:38,366 --> 00:45:41,550 chcem hovoriť trochu o tom, ako skutočne používať Reagovať na vašich aplikácií. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Ak sa vydáte tu, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 toto je domáca stránka pre React, a to vám ukážem, ako budete skutočne používať 936 00:46:03,320 --> 00:46:05,320 Reagovať na svoje stránky. 937 00:46:05,320 --> 00:46:08,845 V podstate je to trochu komplikované pokuse o inštaláciu Reagovať. 938 00:46:08,845 --> 00:46:12,300 Nie je to tak jednoduché, ako si len pretiahnuť and drop JavaScript tam. 939 00:46:12,300 --> 00:46:15,890 >> Musíte mať transformátor nastavenie, ktoré bude, ako to bolo predtým, 940 00:46:15,890 --> 00:46:18,120 sa váš JSX do normálne JavaScript. 941 00:46:18,120 --> 00:46:21,030 Musíte sa vec, ktorá bude kompilácie vám ES6 do normálu. 942 00:46:21,030 --> 00:46:24,720 JavaScript je tu veľa pohybu súčasti, čo musíte urobiť, takže je tu vec, 943 00:46:24,720 --> 00:46:27,200 volal Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 A to je nástroj pre príkazový riadok, ktorý bude pomôže lešenia z vášho Reagovať 945 00:46:31,110 --> 00:46:32,380 projekty ľahko. 946 00:46:32,380 --> 00:46:38,660 >> Takže si môžete prečítať o tom neskôr, ale tam sú niektoré nástroje 947 00:46:38,660 --> 00:46:40,160 že Yeoman ponúka. 948 00:46:40,160 --> 00:46:43,280 Budú vám umožní vytvoriť Reagovať Aplikácia so všetkým postavená v roku. 949 00:46:43,280 --> 00:46:46,030 Rovnako ako to bude mať postavené in, súčasti postavená v roku. 950 00:46:46,030 --> 00:46:47,880 To bude mať váš transformátor postavená v roku. 951 00:46:47,880 --> 00:46:50,699 Majú veľa v pohode veci postavený automaticky 952 00:46:50,699 --> 00:46:52,240 použitím týchto vecí zvaných generátory. 953 00:46:52,240 --> 00:46:54,620 >> Tak si prečítajte o tom, či chcete. 954 00:46:54,620 --> 00:46:59,110 Stačí ísť na Yeoman, Y-E-O-M-A-N, a nájdete generátory, ako sú tieto. 955 00:46:59,110 --> 00:47:01,263 A s generátory, ako je tieto, ste práve ako jeden 956 00:47:01,263 --> 00:47:03,010 je pár príkazov príkazového riadku. 957 00:47:03,010 --> 00:47:05,530 Bude to lešenie hodnotenia vplyvu na Celý Reagovať app pre vás. 958 00:47:05,530 --> 00:47:10,470 Bude to získať všetky manuálne potrubia sa, a grunt prácu za vás, 959 00:47:10,470 --> 00:47:13,010 a to je dôvod, prečo si len sústrediť Na práve písanie v Reagovat. 960 00:47:13,010 --> 00:47:16,739 >> Takže v podstate budovaní Reagovať aplikácie je netriviálne. 961 00:47:16,739 --> 00:47:19,530 Je to pevné dohromady, ale tam sú nástroje, ktoré Urobíme to za vás. 962 00:47:19,530 --> 00:47:23,070 Takže ak chcete, aby sa Reagovať app, skúste robiť to tak. 963 00:47:23,070 --> 00:47:26,360 Ak si len chcete experimentovať, môžete skúsiť pomocou tohto CodePen 964 00:47:26,360 --> 00:47:28,550 pretože tento má CodePen všetky reagovať zapojenia. 965 00:47:28,550 --> 00:47:30,240 Urobil som všetku prácu za vás už. 966 00:47:30,240 --> 00:47:34,610 >> Takže ak chcete, aby sa ako výroba uvoľniť Reagovať app, 967 00:47:34,610 --> 00:47:37,220 skúste niektorý z týchto generátorov. 968 00:47:37,220 --> 00:47:40,240 Ak si len chcete hrať okolo, je to často stojí len 969 00:47:40,240 --> 00:47:44,490 ako vyskúšať, hral na CodePen tu. 970 00:47:44,490 --> 00:47:45,470 Znie to dobre? 971 00:47:45,470 --> 00:47:45,970 Super. 972 00:47:45,970 --> 00:47:47,890 >> Tak to je všetko, čo mám. 973 00:47:47,890 --> 00:47:52,470 Opäť platí, že celý kód a príklady sú Bude na týchto stránkach tu. 974 00:47:52,470 --> 00:47:55,509 Takže, ešte raz, sme nehovorili asi veľa syntaxe Reagovať, 975 00:47:55,509 --> 00:47:57,550 ale nájsť všetky tie, málo syntaktické detaily, 976 00:47:57,550 --> 00:48:00,320 to všetko bude k dispozícii Na týchto webových stránkach tu. 977 00:48:00,320 --> 00:48:02,660 >> Takže by som rád odporučiť prvý krok. 978 00:48:02,660 --> 00:48:06,277 Dajte ju do vášho CodePen. 979 00:48:06,277 --> 00:48:08,110 Skúste pracujeme na tom, že do druhého kroku. 980 00:48:08,110 --> 00:48:11,310 Je tu štvrtý krok, a len uvidíte, kam sa dostanete z toho. 981 00:48:11,310 --> 00:48:14,840 >> Nejaké ďalšie otázky, pozrite sa na to, že stránky alebo e-mail mi. 982 00:48:14,840 --> 00:48:16,490 To je môj e-mail. 983 00:48:16,490 --> 00:48:19,885 Ale ja by som rád, aby vám pomohol s akýmkoľvek otázky môžete mať o Reagovať. 984 00:48:19,885 --> 00:48:21,010 Takže, áno, to je všetko, čo mám. 985 00:48:21,010 --> 00:48:23,410 Ďakujem vám všetkým moc za sledovanie alebo za účasť. 986 00:48:23,410 --> 00:48:26,820 A ja si vezmem nejaké otázky môžete mať po tomto teraz. 987 00:48:26,820 --> 00:48:29,140 Takže ďakujem vám všetkým za sledovanie. 988 00:48:29,140 --> 00:48:31,270