1 00:00:00,000 --> 00:00:02,910 >> [Přehrávání hudby] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> NEEL MEHTA: Tady to jde. 4 00:00:07,275 --> 00:00:11,070 >> No, všichni, vítejte na webu apps budoucnosti s Reagovat. 5 00:00:11,070 --> 00:00:11,870 To je CS50. 6 00:00:11,870 --> 00:00:12,930 Jmenuji se Neel. 7 00:00:12,930 --> 00:00:17,689 Jsem TA pro CS50 a druhák na Harvard College a velmi, velmi 8 00:00:17,689 --> 00:00:18,730 vášnivý webový vývojář. 9 00:00:18,730 --> 00:00:20,730 Takže jsem velmi vzrušující mluvit s vámi dnes, 10 00:00:20,730 --> 00:00:24,550 ať už jste tady, nebo doma sledování, o React, která je, opět 11 00:00:24,550 --> 00:00:27,270 jak jsem řekl, že budoucnost webových aplikací. 12 00:00:27,270 --> 00:00:29,055 >> Takže Reagovat je webový rámec. 13 00:00:29,055 --> 00:00:30,930 A jak už jsem říkal Byl pro některé lidi tady, 14 00:00:30,930 --> 00:00:33,400 rámec je jen sada nářadí, které můžete použít 15 00:00:33,400 --> 00:00:35,770 strukturovat a budovat své webové aplikace. 16 00:00:35,770 --> 00:00:39,010 A webové aplikace jsou, opět, webové stránky které jsou interaktivní, jako jsou Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, cokoliv. 18 00:00:42,330 --> 00:00:45,590 >> Tak Facebook je webová rámec který byl vyvinut společností Facebook 19 00:00:45,590 --> 00:00:48,060 pár lety back-- reagovat je. 20 00:00:48,060 --> 00:00:50,830 To je protože se používá v Facebook na svých mobilních aplikacích 21 00:00:50,830 --> 00:00:52,460 a webová aplikace, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy je další prominentní inovátor Reagovat. 23 00:00:56,350 --> 00:00:58,630 >> Je to opravdu bylo dostat extrémně populární. 24 00:00:58,630 --> 00:01:03,420 Pokud jste někdy použít věci jako rohové nebo Backbone, to je ze stejné rodiny, 25 00:01:03,420 --> 00:01:05,830 ale má od daleko předstihnout jejich popularitu. 26 00:01:05,830 --> 00:01:06,890 Je to horká novinka. 27 00:01:06,890 --> 00:01:09,590 Je to opravdu, opravdu obrovská. 28 00:01:09,590 --> 00:01:13,470 >> A tak Reagovat je dobrá nejen jako web rámec pro stavební rozhraní. 29 00:01:13,470 --> 00:01:16,020 Je to dobré pro vytváření webových rozhraní. 30 00:01:16,020 --> 00:01:18,350 K dispozici je také věc Reagovat volal Native, které 31 00:01:18,350 --> 00:01:22,200 umožňuje vytvářet rozhraní pro Android a iOS 32 00:01:22,200 --> 00:01:26,390 a možná i další platformy v budoucnu pouze pomocí stejný kód JavaScriptu. 33 00:01:26,390 --> 00:01:31,130 Dalo by se použít přesně stejný Kód JavaScript k tomu, webové stránky, 34 00:01:31,130 --> 00:01:33,040 k tomu, aby aplikace Android a iOS aplikace. 35 00:01:33,040 --> 00:01:35,000 >> Je to velmi, velmi vzrušující doba. 36 00:01:35,000 --> 00:01:37,070 Je to opravdu, opravdu cool příležitost. 37 00:01:37,070 --> 00:01:42,020 Je to opravdu univerzální web interface vývojový nástroj, 38 00:01:42,020 --> 00:01:44,420 takže je to velmi, velmi důležitá věc, vědět. 39 00:01:44,420 --> 00:01:46,949 A jak jsem říkal lidem předtím, to, myslím, 40 00:01:46,949 --> 00:01:48,990 se chystá změnit způsob, jakým jsme vytvářet webové aplikace navždy. 41 00:01:48,990 --> 00:01:55,820 Takže je to možná trochu nadsázka, ale já myslím, že je docela dobrá věc, vědět. 42 00:01:55,820 --> 00:01:57,580 >> OK, takže to, co je Reagovat? 43 00:01:57,580 --> 00:02:01,020 Reagovat je rámec, můžete použít pro budování rozhraní. 44 00:02:01,020 --> 00:02:03,240 Rozhraní je, opět, webové stránky, ne? 45 00:02:03,240 --> 00:02:06,340 Tak tady je Instagram.com, použití Reagovat. 46 00:02:06,340 --> 00:02:08,740 >> Reagovat je postaven na idea komponent. 47 00:02:08,740 --> 00:02:11,900 Součástí je HTML prvek na steroidech, 48 00:02:11,900 --> 00:02:14,470 takže HTML element je jako tlačítka. 49 00:02:14,470 --> 00:02:15,250 Je to bod. 50 00:02:15,250 --> 00:02:17,500 Je to záhlaví, že jo? 51 00:02:17,500 --> 00:02:22,740 A Instagram bude používat tyto, ale to budou také používat komponenty Reagovat. 52 00:02:22,740 --> 00:02:25,740 >> Reagují komponenty jsou nadupaným-up HTML elementy 53 00:02:25,740 --> 00:02:28,100 které mají své vlastní chování v nich obsažené. 54 00:02:28,100 --> 00:02:31,800 Tak, jako příklad, mohli bychom mít čas element, čas složka, 55 00:02:31,800 --> 00:02:34,095 která bude obsahovat jako časové razítko, víte, 56 00:02:34,095 --> 00:02:37,170 komponenta profil, který bude obsahovat obrázek profilu 57 00:02:37,170 --> 00:02:38,820 a jméno osoby. 58 00:02:38,820 --> 00:02:42,930 To může mít jako počítadlo, které může počítat jako je počet rád, 59 00:02:42,930 --> 00:02:45,610 a pokud na něj kliknete, bude to zvýšit počet likes. 60 00:02:45,610 --> 00:02:48,200 Součástí je jen banda HTML kódu, který 61 00:02:48,200 --> 00:02:50,520 má některé funkce zabalené uvnitř ní. 62 00:02:50,520 --> 00:02:53,770 Takže je to jako prvku HTML na steroidech, jak jsem již řekl dříve. 63 00:02:53,770 --> 00:02:56,270 Můžete si vzít tyto komponenty, a můžete dát dohromady 64 00:02:56,270 --> 00:02:59,060 aby nové komponenty, v tento případ, součást pošta, 65 00:02:59,060 --> 00:03:00,505 která obsahuje všechny ty věci. 66 00:03:00,505 --> 00:03:04,050 To by obsahovat dobu, profil, LikeCounter, možná komentář 67 00:03:04,050 --> 00:03:06,100 a možná samotný obrázek. 68 00:03:06,100 --> 00:03:10,810 A tak webové aplikace jsou jen postaveny tím, že komponenty a skládat je. 69 00:03:10,810 --> 00:03:15,620 Krmiva pro Instagram není nic víc než banda příspěvků jeden po druhém, 70 00:03:15,620 --> 00:03:19,032 každý příspěvek obsahuje jako čas, Profil, LikeCounter, a tak dále. 71 00:03:19,032 --> 00:03:20,490 Je to něco jako stavět dům. 72 00:03:20,490 --> 00:03:22,660 Nemusíte budovat dům odshora dolů. 73 00:03:22,660 --> 00:03:24,960 Berete components-- vás brát jako koupelny. 74 00:03:24,960 --> 00:03:28,320 Vezmete bedroom-- jim držet dohromady, a máte novou komponentu. 75 00:03:28,320 --> 00:03:29,760 Máte novou část domu. 76 00:03:29,760 --> 00:03:32,860 >> Takže Reagovat vše je postaveno kolem Tato myšlenka komponent 77 00:03:32,860 --> 00:03:36,600 jsou interaktivní, které jsou deklarativní. 78 00:03:36,600 --> 00:03:39,650 Stejně jako si jen říct, co je to profil je, a to činí to. 79 00:03:39,650 --> 00:03:40,600 Jsou composable. 80 00:03:40,600 --> 00:03:43,880 Můžete si vzít čas a profil, dát je dohromady, aby se něco lépe. 81 00:03:43,880 --> 00:03:47,770 A jsou znovu použitelné, takže pokud jste mají zdrojový kód pro poštu, 82 00:03:47,770 --> 00:03:49,440 můžete vložit tento kdekoliv. 83 00:03:49,440 --> 00:03:53,160 >> Můžete vložit Instagram věc, na svých webových stránkách. 84 00:03:53,160 --> 00:03:56,830 Můžete vložit do Facebook, například, tak dlouho, jak to používá React stejně. 85 00:03:56,830 --> 00:04:00,360 Takže komponenty jsou opravdu, ale opravdu, opravdu silné stavební bloky webu 86 00:04:00,360 --> 00:04:04,180 , které mohou být použity kdekoliv a dát dohromady, aby se nové stavební bloky. 87 00:04:04,180 --> 00:04:07,159 To je velice závěrky, velmi vysoké úrovni přehled. 88 00:04:07,159 --> 00:04:09,200 Takže, ještě jednou, pokud máte jakékoli otázky v žádném místě 89 00:04:09,200 --> 00:04:14,470 o filozofii reaktoru, v kódování, aby mě zastavit, a dejte mi vědět. 90 00:04:14,470 --> 00:04:18,420 >> OK, takže reakce je skvělé, protože to má jiný způsob nahlížení 91 00:04:18,420 --> 00:04:19,870 na to, jak budete stavět webové aplikace. 92 00:04:19,870 --> 00:04:23,620 Pravděpodobně jste slyšeli o MVC, A Model můžete ovládat v CS50 nebo co 93 00:04:23,620 --> 00:04:25,940 další zkoumavé tříd, které používáte. 94 00:04:25,940 --> 00:04:29,000 A většina rámce jsou postavený kolem myšlenky na MVC. 95 00:04:29,000 --> 00:04:30,410 Reagovat není. 96 00:04:30,410 --> 00:04:32,980 Reagovat je postavena na myšlence, z jednosměrného datového toku 97 00:04:32,980 --> 00:04:36,510 jak je vidět podle této tabulky nebo grafiky zde. 98 00:04:36,510 --> 00:04:38,260 >> V podstatě máte zdroj dat. 99 00:04:38,260 --> 00:04:42,380 A zdroj dat bude rozhodovat jak vyložit určité komponenty. 100 00:04:42,380 --> 00:04:45,452 A komponenty budou pak, když se změní, 101 00:04:45,452 --> 00:04:47,160 budou říct, zdroj dat změnit. 102 00:04:47,160 --> 00:04:49,350 >> Chcete-li použít Instagram Například můžete mít 103 00:04:49,350 --> 00:04:52,050 seznam poštovních objektů, jako jsou v databázi, nebo tak něco. 104 00:04:52,050 --> 00:04:53,310 Že data. 105 00:04:53,310 --> 00:04:57,600 A pak naše rozmístit komponenty bude trvat, že data, 106 00:04:57,600 --> 00:05:01,830 a používat tyto údaje k tomu, aby věc na obrazovce. 107 00:05:01,830 --> 00:05:04,300 To je to, co se šipkou z údajů do složkou je, 108 00:05:04,300 --> 00:05:07,930 a použije se, že stejná data k tomu, aby spoustu komponentů. 109 00:05:07,930 --> 00:05:10,290 >> Facebook Messenger, pro Příkladem, který je React, 110 00:05:10,290 --> 00:05:13,410 můžete mít seznam Zprávy jako zdroj dat. 111 00:05:13,410 --> 00:05:15,927 A to by způsobilo ne pouze seznam zpráv 112 00:05:15,927 --> 00:05:17,510 ale také seznam přátel, máte. 113 00:05:17,510 --> 00:05:19,200 Máte počet nepřečtených. 114 00:05:19,200 --> 00:05:23,330 Možná, že také vykreslit věc Facebook to je v dolní části Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Stejná data jsou jediný zdroj pravdy 116 00:05:25,610 --> 00:05:28,290 a který způsobuje, že mnoho komponenty, které mají být vykreslen. 117 00:05:28,290 --> 00:05:30,290 A vždy, když jeden z těch, složky se změní, 118 00:05:30,290 --> 00:05:32,320 se vrátí zpět a změní zdroj dat. 119 00:05:32,320 --> 00:05:33,460 >> Můžete poslat zprávu, že jo? 120 00:05:33,460 --> 00:05:34,780 To se změní zdroj dat. 121 00:05:34,780 --> 00:05:39,490 Můžete číst zprávy, takže můžete nastavit nepřečtené 0. 122 00:05:39,490 --> 00:05:41,136 To se změní zdroj dat. 123 00:05:41,136 --> 00:05:44,010 Všimněte si, že všechny z nich z jedné šipka návratu do stejných údajů 124 00:05:44,010 --> 00:05:47,662 zdroj, takže víte, vzhledem k tomu, určitý soubor dat, 125 00:05:47,662 --> 00:05:49,870 víte přesně, co je Stránka bude vypadat. 126 00:05:49,870 --> 00:05:50,700 Je to deterministický. 127 00:05:50,700 --> 00:05:53,451 Víte, uvedené některé údaje, co stránka se bude vypadat. 128 00:05:53,451 --> 00:05:56,158 Můžete si předpovědět, jak to bude chovat a jak se věci jdou 129 00:05:56,158 --> 00:05:57,650 do práce, když jsou dohromady. 130 00:05:57,650 --> 00:06:00,410 >> A kdybych měl milion komponenty tady, to by se chovají stejně, ne? 131 00:06:00,410 --> 00:06:02,290 Ty by mít žádný podivné propojení. 132 00:06:02,290 --> 00:06:04,120 Jeden údaje poskytnuté milion komponenty. 133 00:06:04,120 --> 00:06:06,879 Milion Components se vrátit a editovat data. 134 00:06:06,879 --> 00:06:07,920 A tak je to velmi pěkné. 135 00:06:07,920 --> 00:06:10,870 Stavíme composable, snadno škálovatelné webové aplikace. 136 00:06:10,870 --> 00:06:13,150 >> Máte jeden zdroj dat, zdroj pravdy. 137 00:06:13,150 --> 00:06:15,790 To říká vaše komponenty jak položit se na stránku, 138 00:06:15,790 --> 00:06:18,190 a komponenty budou zvládnout interakce. 139 00:06:18,190 --> 00:06:20,150 A pokud chtějí změnit věci, prostě jít zpátky 140 00:06:20,150 --> 00:06:21,750 a řekněte zdroj dat změnit. 141 00:06:21,750 --> 00:06:22,850 Dávat smysl? 142 00:06:22,850 --> 00:06:26,010 Takže Reagovat je o porozumění , jak vytvořit komponentu 143 00:06:26,010 --> 00:06:29,540 a jak vytvořit svůj komponenty komunikovat s vnějším světem. 144 00:06:29,540 --> 00:06:31,850 >> Tvorba komponent se ovlivňovat s vnějším světem 145 00:06:31,850 --> 00:06:34,490 používá jinou technologii volal Flux, který 146 00:06:34,490 --> 00:06:36,872 je rámec, který je přidán na horní React. 147 00:06:36,872 --> 00:06:38,330 Nebudeme o tom mluvit. 148 00:06:38,330 --> 00:06:42,990 Budeme hovořit o vzhledem k tomu, Data, jak můžete vykreslit komponentu? 149 00:06:42,990 --> 00:06:47,010 >> A tak Reagovat je proto, že jste opravdu cool jej použít s jakýmkoliv zadním konci chcete. 150 00:06:47,010 --> 00:06:50,480 Máte-li jako back-end Python, pokud vaše Python může vyplivnout některé údaje, 151 00:06:50,480 --> 00:06:51,610 Reagovat může způsobit to. 152 00:06:51,610 --> 00:06:54,700 Jste-li žádné JS výstupy dat, React činí to. 153 00:06:54,700 --> 00:06:56,890 Ruby kolejnice s Údaje, Reagovat činí to. 154 00:06:56,890 --> 00:07:01,860 >> Takže React je v podstatě web view-- přední konec se složkami 155 00:07:01,860 --> 00:07:03,910 pro všechny zdroje dat vůbec. 156 00:07:03,910 --> 00:07:07,145 A tak se ze zdroje dat reagovat komponent je docela snadné. 157 00:07:07,145 --> 00:07:08,770 Chystáte se na druhou stranu je trochu těžší. 158 00:07:08,770 --> 00:07:10,462 To používá Flux jak jsem zmínil dříve. 159 00:07:10,462 --> 00:07:11,420 Budeme se dostat do toho. 160 00:07:11,420 --> 00:07:13,740 Budeme se více zaměřit na Data-to-komponentní stranu. 161 00:07:13,740 --> 00:07:15,880 Tímto způsobem můžete udělat pohodový, zábavné webové aplikace. 162 00:07:15,880 --> 00:07:19,870 To nebude mít vliv na okolní svět teď, ale to je jiný příběh. 163 00:07:19,870 --> 00:07:22,210 >> OK, takže pokud jsi tady pro můj poslední seminář 164 00:07:22,210 --> 00:07:26,610 budete vědět, že veškerý kód pro dnešní diskuse bude na této adrese 165 00:07:26,610 --> 00:07:29,320 tady, sorry, toto URL zde. 166 00:07:29,320 --> 00:07:32,730 A v podstatě budeme jít přes čtyři kroky, možná pět, 167 00:07:32,730 --> 00:07:33,510 pravděpodobně ne pět. 168 00:07:33,510 --> 00:07:37,300 Budeme se pohybují přes čtyři kroky budování vzorek Reagovat aplikace. 169 00:07:37,300 --> 00:07:39,550 A tak veškerý zdrojový kód na každém kroku na cestě 170 00:07:39,550 --> 00:07:42,216 bude tady, takže pokud jste po podél doma, 171 00:07:42,216 --> 00:07:43,991 neváhejte prohlédnout tento kód. 172 00:07:43,991 --> 00:07:46,740 Pokud jste po podél tady, budeme ukazovat na obrazovce, 173 00:07:46,740 --> 00:07:47,739 takže se nemusíte starat o to. 174 00:07:47,739 --> 00:07:50,930 Ale pokud jste doma, pocit zdarma k návštěvě této webové stránky. 175 00:07:50,930 --> 00:07:56,400 A, Ano, měli byste být schopni se dostat celý kód byste někdy potřebovat tady. 176 00:07:56,400 --> 00:08:01,380 Takže je to dobrý tahák stejně za budoucí dobrodružství s Reagovat. 177 00:08:01,380 --> 00:08:04,490 Cool, takže pokud každý, kdo je tady, a to iv případě, že jste doma, 178 00:08:04,490 --> 00:08:11,580 vytáhnout tento web, is.gd/cs50react, žádný kapitál, ne podtržítko, prostě nic. 179 00:08:11,580 --> 00:08:15,849 >> Uvidíte stránku, která vypadá trochu jako je tento. 180 00:08:15,849 --> 00:08:17,140 To je věc, s názvem CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen je kolaborativní kódování prostředí 182 00:08:20,030 --> 00:08:23,364 s nimiž mohu psát kód zde, a to bude automaticky zasláno. 183 00:08:23,364 --> 00:08:24,780 A tímto způsobem, mohu psát kód. 184 00:08:24,780 --> 00:08:26,920 Mohu spustit kód zde. 185 00:08:26,920 --> 00:08:33,470 >> Pro example-- a je-li to reloads-- vidět, Běžím kód JavaScript na stránce 186 00:08:33,470 --> 00:08:36,390 tady, a bude to automaticky vykreslení webové stránky 187 00:08:36,390 --> 00:08:37,980 s tímto kódem JavaScript. 188 00:08:37,980 --> 00:08:40,039 A tak je to způsob pro nás vyzkoušet kód 189 00:08:40,039 --> 00:08:43,089 opravdu rychle, aniž by museli použít náš ID nebo použijte náš místního počítače 190 00:08:43,089 --> 00:08:44,290 nebo cokoliv jiného. 191 00:08:44,290 --> 00:08:47,670 Je to velmi rychlý způsob, jak můžete maketa a vyzkoušet různé druhy kódu. 192 00:08:47,670 --> 00:08:50,560 >> Takže budu užívat příklad kódu, uvedení zde. 193 00:08:50,560 --> 00:08:52,374 Budeme pracovat přes něj. 194 00:08:52,374 --> 00:08:54,540 A pokud jste doma, budete může vytáhnout toto nahoru stejně. 195 00:08:54,540 --> 00:08:57,530 A já jsem již nainstalován Reagovat tady, takže stačí 196 00:08:57,530 --> 00:09:00,770 napsat svůj vlastní kód zde, a zkuste si to jako své vlastní hřiště. 197 00:09:00,770 --> 00:09:04,940 >> Jo, jestli všichni otevřít tento odkaz zde. 198 00:09:04,940 --> 00:09:08,080 Prosím, dejte mi palce up, až budete mít to otevřít. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Pohodě, pohodový cool. 201 00:09:13,770 --> 00:09:16,914 Není tu nic, co teď, ale změníme, že velmi brzy. 202 00:09:16,914 --> 00:09:21,250 >> OK, takže Reagovat je JavaScript knihovna, a jako takový, 203 00:09:21,250 --> 00:09:24,480 vyžaduje znalost JavaScriptu, což je web programovací jazyk. 204 00:09:24,480 --> 00:09:27,660 A je to být použity pro jiné věci teď taky, ale především vytvořit web 205 00:09:27,660 --> 00:09:32,040 jazyk, takže pokud jste obeznámeni s to, že četl místě zvaném 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 se naučit JavaScript za půl hodiny. 208 00:09:34,240 --> 00:09:34,990 Je to neuvěřitelné. 209 00:09:34,990 --> 00:09:36,420 >> Takže dát mu čtení. 210 00:09:36,420 --> 00:09:39,960 Také jsme je hodně HTML tady, protože jsme navrhování webových stránek samozřejmě. 211 00:09:39,960 --> 00:09:43,890 Takže pokud jste obeznámeni s HTML, podívejte se na HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Myslím, že učení je Reagovat milionkrát jednodušší, pokud již 213 00:09:46,520 --> 00:09:47,892 znát základní stavební kameny. 214 00:09:47,892 --> 00:09:50,600 Máte-li komponenty, je to snadné, aby se větší složku. 215 00:09:50,600 --> 00:09:51,860 To je Reagovat jazyk pro vás. 216 00:09:51,860 --> 00:09:54,270 >> Tak jděte do toho a dát tyto věci a Přečtěte si. 217 00:09:54,270 --> 00:09:55,070 Pozastavit toto video. 218 00:09:55,070 --> 00:09:57,440 Dejte mu číst, pokud jste doma, pokud si nejste 219 00:09:57,440 --> 00:10:00,794 obeznámeni s HTML nebo JavaScriptu 220 00:10:00,794 --> 00:10:02,960 OK, takže to, co budeme udělat, je, že budeme dělat 221 00:10:02,960 --> 00:10:06,470 velmi základní Karta cca pomocí Reagovat. 222 00:10:06,470 --> 00:10:08,210 Budeme mít flešku. 223 00:10:08,210 --> 00:10:09,880 Můžete převrátit kartu tam a zpět. 224 00:10:09,880 --> 00:10:12,399 A budeme mít také seznam všechny karty, které máme, 225 00:10:12,399 --> 00:10:14,190 a pokud se cítíme ambiciózní, můžeme být 226 00:10:14,190 --> 00:10:17,060 schopný přepínat mezi auta kliknutím na ně. 227 00:10:17,060 --> 00:10:20,360 >> Ale to je, holýma kosti, velmi jednoduchý React aplikaci. 228 00:10:20,360 --> 00:10:22,560 A tak je to vlastně není triviální implementovat, 229 00:10:22,560 --> 00:10:26,030 ale jdeme ukázat, že, pokud to uděláte to, že je to velmi, velmi snadné jej rozšířit 230 00:10:26,030 --> 00:10:27,680 pokud vám ostatní lidé s tím pomoci. 231 00:10:27,680 --> 00:10:33,750 Takže jdeme projít čtyři kroky začíná od nuly stavět to. 232 00:10:33,750 --> 00:10:36,740 >> OK, takže čtyři kroky, budeme začít s prvním krokem. 233 00:10:36,740 --> 00:10:39,790 Prvním krokem bude budovat svůj první složku. 234 00:10:39,790 --> 00:10:44,830 Jak jsem již řekl dříve, komponenta v Reagovat je jen HTML element na steroidech. 235 00:10:44,830 --> 00:10:49,660 Určuje HTML a některé chování, a to 236 00:10:49,660 --> 00:10:52,600 určí, jak lidé může komunikovat s ním jak 237 00:10:52,600 --> 00:10:54,270 to bude mít vnitřní stav. 238 00:10:54,270 --> 00:10:57,630 Stejně jako tlačítko se znají jako kolik časy to bylo klikli například, 239 00:10:57,630 --> 00:11:01,010 a bude vědět, jak položit samo. 240 00:11:01,010 --> 00:11:04,430 >> Tak pojďme do toho a budovat naše První složka pomocí JavaScriptu. 241 00:11:04,430 --> 00:11:09,711 Takže pokud syntaxe vypadá divně, To proto, že druh je. 242 00:11:09,711 --> 00:11:11,710 Takže, ještě jednou, jdeme aby proměnnou s názvem 243 00:11:11,710 --> 00:11:14,580 app pomocí klíčového slova let, což proměnnou, 244 00:11:14,580 --> 00:11:18,210 ať App rovné React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> React je knihovna a má create funkce třídy. 246 00:11:22,609 --> 00:11:24,400 A tato funkce je trochu kódu, který vám 247 00:11:24,400 --> 00:11:29,090 lze použít k vytvoření nového typ React složku. 248 00:11:29,090 --> 00:11:32,780 A tak React.createClass dělá komponentu, 249 00:11:32,780 --> 00:11:35,270 a tato složka bude moci dělat věci. 250 00:11:35,270 --> 00:11:40,460 Hlavní věc, kterou může udělat, je poskytnout něco, činí v závislosti. 251 00:11:40,460 --> 00:11:44,500 >> Opět platí, že pokud je tento index není zřejmé vy, doporučuji vám jít na JS pro kočky 252 00:11:44,500 --> 00:11:45,682 a podívat se na to. 253 00:11:45,682 --> 00:11:47,710 Je to přiblížení dost dobře? 254 00:11:47,710 --> 00:11:48,490 Bezva. 255 00:11:48,490 --> 00:11:50,670 >> Takže každý potřebuje součást mít vykreslení funkci. 256 00:11:50,670 --> 00:11:53,010 Omítky funkce říká, Co jsem tisknout na obrazovce? 257 00:11:53,010 --> 00:11:54,760 Ale je komponenta k ničemu, pokud to není 258 00:11:54,760 --> 00:11:58,060 Vědět, co pro tisk na obrazovce, a tak musíte mít vykreslení funkci. 259 00:11:58,060 --> 00:12:01,904 >> Takže v omítce věc, vy stačí se vrátit trochu HTML. 260 00:12:01,904 --> 00:12:03,820 A co je v pohodě, je, že tam je věc zvaná 261 00:12:03,820 --> 00:12:08,660 JSX, který je prodloužením JavaScript, která je používána reagovat. 262 00:12:08,660 --> 00:12:11,845 To vám umožní psát HTML uvnitř Vašeho JavaScriptu, který 263 00:12:11,845 --> 00:12:13,970 Zní to divně, když nejprve přemýšlet o tom, 264 00:12:13,970 --> 00:12:15,553 ale to dělá hodně smysl později. 265 00:12:15,553 --> 00:12:17,430 Takže můžeme udělat. 266 00:12:17,430 --> 00:12:21,360 Pokud jste obeznámeni s HTML, já vím, máme div se obecný účel 267 00:12:21,360 --> 00:12:22,790 nádoba na věci. 268 00:12:22,790 --> 00:12:26,380 Můžeme se vrátit div, a uvnitř tento div, můžeme dát věci. 269 00:12:26,380 --> 00:12:32,390 >> Takže řekněme, že chceme k tomu, aby právě rovný-up Karta teď. 270 00:12:32,390 --> 00:12:34,890 Flešku, řekl bych, bude mít otázku a odpověď. 271 00:12:34,890 --> 00:12:37,530 Takže uvnitř tohoto div, pojďme vytisknout odstavec 272 00:12:37,530 --> 00:12:42,155 který říká, že question-- Co je konečná odpověď na život, vesmír? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 A pak je odpověď bude, samozřejmě, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> To nepřišel dobře. 277 00:12:59,730 --> 00:13:04,164 Jo, takže v podstatě můžete opravdu psát HTML uvnitř vašeho JavaScript. 278 00:13:04,164 --> 00:13:06,330 A to bude vytištěn na obrazovku. 279 00:13:06,330 --> 00:13:08,250 Tak pojďme to vyzkoušet. 280 00:13:08,250 --> 00:13:09,520 >> Takže máme složku. 281 00:13:09,520 --> 00:13:12,210 Musíme říci Reagovat dát složka, na obrazovce 282 00:13:12,210 --> 00:13:18,990 tak React.render, tak zjistíte, že jsme zacházet aplikace jako každý jiný prvek. 283 00:13:18,990 --> 00:13:21,010 Píšeme to, jak to bylo element HTML. 284 00:13:21,010 --> 00:13:25,100 Jako místo toho říká, jako IMG pro obraz nebo p pro odstavec, 285 00:13:25,100 --> 00:13:28,120 budete psát aplikace, takže aplikace je zacházeno jako prvku HTML. 286 00:13:28,120 --> 00:13:30,380 Jak jsem již řekl, je to element na steroidech. 287 00:13:30,380 --> 00:13:32,870 >> Takže si vykreslit App, a vy že to opravdu není místo, kam ho. 288 00:13:32,870 --> 00:13:37,170 A to je to, jak můžete říct to, kam dát. 289 00:13:37,170 --> 00:13:46,200 Vytvořil jsem jednoduchý div na straně strana volal s ID stránky, 290 00:13:46,200 --> 00:13:48,300 a to je místo, kde element půjde. 291 00:13:48,300 --> 00:13:49,841 >> A nebudeme běžet s HTML. 292 00:13:49,841 --> 00:13:53,145 V podstatě to bude dostat dát dovnitř této stránky prvku 293 00:13:53,145 --> 00:13:54,270 že máme na obrazovce. 294 00:13:54,270 --> 00:13:59,210 Takže to běží tento kód, a to přitahuje tento co se na obrazovce, a tak jsme tady. 295 00:13:59,210 --> 00:14:01,770 Udělali jsme naše první reagovat složku. 296 00:14:01,770 --> 00:14:08,000 >> Tak právě jako rekapitulaci, jsme jemně vyrobený nový typ komponenty, ne? 297 00:14:08,000 --> 00:14:10,145 To je to, co React.createClass. 298 00:14:10,145 --> 00:14:12,680 A tím, že komponenta, jsme Řekl to, co by měl dělat. 299 00:14:12,680 --> 00:14:15,590 Vždy, když je tato složka na vytištěn na obrazovku, 300 00:14:15,590 --> 00:14:19,300 to vytiskne div se dva odstavce uvnitř ní. 301 00:14:19,300 --> 00:14:24,460 >> A to, co jsme udělali, jsme udělali novou aplikaci pomocí úhelník app notace. 302 00:14:24,460 --> 00:14:27,160 Řekli jsme ho, aby ji Uvnitř elementu stránky. 303 00:14:27,160 --> 00:14:29,867 A tak to, co jsem udělal, že vytvořil novou aplikaci z této šablony. 304 00:14:29,867 --> 00:14:31,200 A pak jsem řekl, je to učinit. 305 00:14:31,200 --> 00:14:33,680 Tak to řekl, OK, app, co bych měl vytisknout? 306 00:14:33,680 --> 00:14:36,970 App říká, jít vytisknout div s dvěma body uvnitř ní. 307 00:14:36,970 --> 00:14:40,420 A voila, je tu naše div se dva body uvnitř ní. 308 00:14:40,420 --> 00:14:43,180 Udělat tak daleko smysl? 309 00:14:43,180 --> 00:14:46,690 >> Takže, opět celá výzva React je jen vědět, jak se dělá komponenty. 310 00:14:46,690 --> 00:14:48,500 Jak, aby se komponenty spolupracují. 311 00:14:48,500 --> 00:14:51,780 Teď, když jsme udělali naše první komponenty, vraťme se 312 00:14:51,780 --> 00:14:54,284 a aby komponenty přizpůsobitelné. 313 00:14:54,284 --> 00:14:56,700 Tak víte, jak v HTML vám může dát své tlačítka tříd? 314 00:14:56,700 --> 00:14:59,146 Můžete si dát svým kotvy href. 315 00:14:59,146 --> 00:15:00,770 Můžete si dát svým vstupy typ, že jo? 316 00:15:00,770 --> 00:15:04,740 Můžete dát více na zakázku vlastnosti na všechny vaše prvky 317 00:15:04,740 --> 00:15:06,490 aby se to více zajímavější. 318 00:15:06,490 --> 00:15:09,030 A my vlastně můžeme udělat přesně to samé. 319 00:15:09,030 --> 00:15:17,500 >> Takže řekněme, že chceme, aby naši app jít vykreslit jakoukoliv kartu. 320 00:15:17,500 --> 00:15:19,630 Právě teď jsme prostě tavené hardcoded kartu. 321 00:15:19,630 --> 00:15:22,530 Víme, že je tu jen jedna karta to může udělat, tak jsme 322 00:15:22,530 --> 00:15:25,960 se snažit a změnit to teď tak že můžeme jen dát mu nějaký kartu. 323 00:15:25,960 --> 00:15:27,410 To bude tisknout kartu. 324 00:15:27,410 --> 00:15:29,380 >> Měli byste se snažit a dělat vaše komponenty velmi obecný účel. 325 00:15:29,380 --> 00:15:31,654 Takže to způsob, jak bych mohl email to můj přítel a být jako, 326 00:15:31,654 --> 00:15:33,820 Karta co máte, Jen krmit do tady, 327 00:15:33,820 --> 00:15:35,290 a bude to dělat sama. 328 00:15:35,290 --> 00:15:37,650 Můžete dát další věci ve vaší vlastní aplikace. 329 00:15:37,650 --> 00:15:40,600 >> Ale nejprve, pojďme rozčlenit tento up do dvou složek, 330 00:15:40,600 --> 00:15:44,500 ale chceme oddělit karty tisk část od vlastního app části. 331 00:15:44,500 --> 00:15:46,660 Takže to, co můžeme udělat, je, že jsme může změnit z App 332 00:15:46,660 --> 00:15:51,300 na CardView, jen nový název pro aplikaci, 333 00:15:51,300 --> 00:15:54,450 a my můžeme vytvořit nový složka s názvem App, 334 00:15:54,450 --> 00:15:56,336 nesmí být zaměňována se starým App. 335 00:15:56,336 --> 00:16:00,730 Máme se createClass, a stejně jako v HTML, 336 00:16:00,730 --> 00:16:03,590 můžete vnořit Reagovat komponenty Uvnitř na sobě. 337 00:16:03,590 --> 00:16:16,430 >> Takže v tomto vykreslení funkce, Funkce Návrat CardView, 338 00:16:16,430 --> 00:16:18,234 a to je přesně to samé. 339 00:16:18,234 --> 00:16:19,400 Podívejte se, proč je to totéž? 340 00:16:19,400 --> 00:16:22,590 Místo toho, činí jen aplikace, která má div a párování uvnitř ní, 341 00:16:22,590 --> 00:16:26,194 aplikace vykreslí CardView, a CardView činí div a odstavce. 342 00:16:26,194 --> 00:16:29,110 Tak tohle je náš první příklad hnízdní prvky uvnitř sebe. 343 00:16:29,110 --> 00:16:32,177 Dává to smysl? 344 00:16:32,177 --> 00:16:33,760 Takže, opět, máme CardView prvek. 345 00:16:33,760 --> 00:16:37,250 Máme app prvky , že je větší než. 346 00:16:37,250 --> 00:16:40,990 >> OK, takže chceme, aby naše CardView-- pokud vás dávají dobrou CardView určitou kartu, 347 00:16:40,990 --> 00:16:43,370 to bude vytisknout pro vás, ne? 348 00:16:43,370 --> 00:16:48,050 Takže nejprve musíme udělat kartu, tak se pojďme udělat objekt karty. 349 00:16:48,050 --> 00:17:02,930 Tak ať mi kartu equal-- pokud jste všichni obeznámeni, 350 00:17:02,930 --> 00:17:05,260 to je jen zápis tvorba objekt v JavaScriptu. 351 00:17:05,260 --> 00:17:09,280 Je to něco jako struct v C, takže jsme udělali kartu, 352 00:17:09,280 --> 00:17:15,920 a tak nyní můžeme projít tuto kartu jako vlastnost nebo jako atribut v HTML 353 00:17:15,920 --> 00:17:17,290 terminologie naší aplikaci. 354 00:17:17,290 --> 00:17:20,210 Takže můžeme udělat, App karta rovná myCard. 355 00:17:20,210 --> 00:17:23,200 >> Víte, jak na vstupu, děláte Typ vstupu rovná textu nebo tlačítka 356 00:17:23,200 --> 00:17:25,240 třída rovná BTN pro bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Stejný nápad, App karta equals-- musíš dát rovnátka here-- 358 00:17:29,500 --> 00:17:33,830 App karta rovná myCard, tak to říká, že máme tento objekt karty. 359 00:17:33,830 --> 00:17:39,149 Chystám se to projít jako vlastnost komponenty app. 360 00:17:39,149 --> 00:17:41,440 A tato aplikace složka bude bylo možné se k nim dostat a dělat 361 00:17:41,440 --> 00:17:43,580 zajímavé věci s ním. 362 00:17:43,580 --> 00:17:47,650 >> Takže naše aplikace bude vzhledem k tomu, karty, takže pro tuto chvíli, 363 00:17:47,650 --> 00:17:49,980 pojďme aplikaci dej karta k CardView 364 00:17:49,980 --> 00:17:53,110 sám, protože stejně jako aplikace není bude vědět, co s tím dělat, 365 00:17:53,110 --> 00:17:54,850 takže budeme prostě dát to do CardView. 366 00:17:54,850 --> 00:18:00,050 Takže budeme předat na Stejně tak, karta rovná, 367 00:18:00,050 --> 00:18:05,426 a tak každá složka mohou mít přístup ke věci, které byla dána k němu. 368 00:18:05,426 --> 00:18:07,800 Mohou přístup k vlastnostem , které byly uvedeny na něj 369 00:18:07,800 --> 00:18:09,470 pomocí této syntaxe, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Takže co se stane, je zde máte myCard objekt. 372 00:18:14,920 --> 00:18:18,250 Můžete předat ji do aplikace pomocí App karty rovná myCard. 373 00:18:18,250 --> 00:18:21,420 Ten objekt karta je kladen na vaší aplikaci. 374 00:18:21,420 --> 00:18:24,400 Aplikace může přistupovat as this.props.card. 375 00:18:24,400 --> 00:18:28,780 Je to něco jako obraz ví, co to je zdroj. 376 00:18:28,780 --> 00:18:31,972 >> Tato aplikace ví, co to je karta je, a to může dělat věci s ním. 377 00:18:31,972 --> 00:18:32,930 To může dělat výpočty. 378 00:18:32,930 --> 00:18:35,290 To může učinit rozhodnutí založená mimo něj. 379 00:18:35,290 --> 00:18:39,950 >> Pro tuto chvíli jsem šel projít this.props.card na CardView. 380 00:18:39,950 --> 00:18:43,420 Udělat tak daleko smysl? 381 00:18:43,420 --> 00:18:45,210 Bude to teď větší smysl. 382 00:18:45,210 --> 00:18:46,990 >> OK, tak teď jsme na CardView. 383 00:18:46,990 --> 00:18:51,719 Naše CardView, dostane kartu, měl vytisknout svou otázku a odpověď. 384 00:18:51,719 --> 00:18:54,510 Právě teď jsme prostě vytištěno některé napevno otázky a odpovědi. 385 00:18:54,510 --> 00:18:57,720 Musíme přijít na out-- potřebujeme požádat kartu, která nám dali 386 00:18:57,720 --> 00:19:01,360 jaká je otázka a odpověď, a vytisknout tuto ven do obrazovky. 387 00:19:01,360 --> 00:19:02,470 >> Takže můžeme to udělat zde. 388 00:19:02,470 --> 00:19:06,135 V činí begin-- nejprve udělat rovná. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Takže to, co tady děláme, je, že víme, karty jsou nám dána k nemovitosti, 391 00:19:13,050 --> 00:19:13,580 právo? 392 00:19:13,580 --> 00:19:15,930 Je nám dána jako vstup. 393 00:19:15,930 --> 00:19:19,440 Stejně jako je to skoro jako argumenty funkce. 394 00:19:19,440 --> 00:19:22,810 Karta je argument téměř k tomuto CardView. 395 00:19:22,810 --> 00:19:25,239 >> Budeme extrahovat, že, a dal to do proměnné pochybnost. 396 00:19:25,239 --> 00:19:27,280 Ujistěte se, že odpověď šla na proměnnou odpověď. 397 00:19:27,280 --> 00:19:31,130 Výzvy, které karta odpovědět. 398 00:19:31,130 --> 00:19:35,072 A teď, že máme tyto, místo tisku se tento text, 399 00:19:35,072 --> 00:19:37,030 jdeme k vytištění všechno, co nám dali. 400 00:19:37,030 --> 00:19:43,580 >> Takže to stuff-- tak jedeme uhasit Otázka Odpověď. 401 00:19:43,580 --> 00:19:46,380 Uvidíme, jestli to funguje. 402 00:19:46,380 --> 00:19:52,800 Cool, tak se pojďme jej krok po kroku ještě jednou jen pro jistotu. 403 00:19:52,800 --> 00:20:00,470 >> Takže moje karta je objekt karta, a my dávají tuto kartu do aplikace. 404 00:20:00,470 --> 00:20:04,790 A aplikace bude vzít kartu a dát ji do CardView. 405 00:20:04,790 --> 00:20:09,190 A to CardView říká, pokud jste dej mi jakoukoliv Flashcard objekt 406 00:20:09,190 --> 00:20:11,920 Budu vytisknout svou otázku a jeho odpověď, že jo? 407 00:20:11,920 --> 00:20:14,590 >> Takže to, co jsem mohl udělat, je, že jsem si zaslat tento kód, první 408 00:20:14,590 --> 00:20:16,580 jako 10 řádků mém kódu, až můj přítel. 409 00:20:16,580 --> 00:20:18,820 Mohl vložit jej do jeho vlastní žádost. 410 00:20:18,820 --> 00:20:27,200 A tak dlouho, jak udělal to samé, jako CardView karta rovná se to, 411 00:20:27,200 --> 00:20:30,580 tak dlouho, jak on vytvořil CardView a dal tomu správné informace, 412 00:20:30,580 --> 00:20:31,987 mohl učinit svou vlastní kartu. 413 00:20:31,987 --> 00:20:34,320 A tak se tímto způsobem, je to opravdu pohodě způsob, jak vybudovat 414 00:20:34,320 --> 00:20:35,906 komponenty, které používají sobě, že jo? 415 00:20:35,906 --> 00:20:38,280 Tato karta, mohl bych publikovat tento CardView na internetu, 416 00:20:38,280 --> 00:20:39,790 a lidé budou moci používat. 417 00:20:39,790 --> 00:20:45,070 Takže v podstatě, je to jako jeden z Standardní funkce v knihovně C. 418 00:20:45,070 --> 00:20:47,280 >> Jedná se o funkci, kde někdo napsal. 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ábět určitý výstup. 421 00:20:49,710 --> 00:20:50,890 Nezajímá vás, jak to funguje interně. 422 00:20:50,890 --> 00:20:53,790 Tak dlouho, jak jste jí dávají právo vstup, bude to dělat ten správný výstup. 423 00:20:53,790 --> 00:20:57,850 >> A složku může být myslel stejným způsobem. 424 00:20:57,850 --> 00:21:00,280 To je jako CardView funkci knihovny. 425 00:21:00,280 --> 00:21:03,400 Pokud jej dát nějaké karty jako vlastnost, bude to 426 00:21:03,400 --> 00:21:05,095 vytisknout obsah dané karty. 427 00:21:05,095 --> 00:21:16,820 Stejně jako když změním kartu místo toho jako to, co je 5 a 37, 428 00:21:16,820 --> 00:21:19,210 to bude aktualizovat podle toho. 429 00:21:19,210 --> 00:21:21,955 Takže stačí změnou vstup, se dostane určitý výkon. 430 00:21:21,955 --> 00:21:24,830 Takže si můžete myslet komponent téměř jako funkce tímto způsobem, který 431 00:21:24,830 --> 00:21:25,920 si můžete dát dohromady. 432 00:21:25,920 --> 00:21:29,440 Získáte vstup, jako je tento CardView jako vstup, dostanete výstup. 433 00:21:29,440 --> 00:21:31,900 V tomto případě je výstup je HTML. 434 00:21:31,900 --> 00:21:34,404 Udělat tak daleko smysl? 435 00:21:34,404 --> 00:21:36,890 Cool, tak znovu, vlastnosti jsou jak můžete předat informace 436 00:21:36,890 --> 00:21:40,900 do a ze složek. 437 00:21:40,900 --> 00:21:42,740 >> OK, takže pojďme aby to věc interaktivní. 438 00:21:42,740 --> 00:21:44,450 Právě teď je to trochu nuda. 439 00:21:44,450 --> 00:21:45,520 Co je to [neslyšitelných]? 440 00:21:45,520 --> 00:21:48,210 Můžete vytisknout nějaké ven, ale to je vše, co se dá dělat. 441 00:21:48,210 --> 00:21:51,550 >> Takže pojďme zpět k stará otázka právě teď. 442 00:21:51,550 --> 00:21:54,405 OK, takže právě teď tyto komponenty jsou nudné, protože všechno, co dělají, 443 00:21:54,405 --> 00:21:55,030 se dostanou vstup. 444 00:21:55,030 --> 00:21:56,100 Dělají 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 mít dotazy komponenty, aby bylo možné mít 447 00:21:59,090 --> 00:22:02,150 nějaký vnitřní stav, jako něco zapamatovat. 448 00:22:02,150 --> 00:22:05,320 >> Pro FlashCard, pro Příklad, jaký druh státu 449 00:22:05,320 --> 00:22:07,550 Možná budete chtít pamatovat FlashCard? 450 00:22:07,550 --> 00:22:09,740 Co dočasný stav Možná budete chtít mít na paměti, 451 00:22:09,740 --> 00:22:12,491 pro FlashCard v Flashcard aplikace? 452 00:22:12,491 --> 00:22:13,990 Diváků: Ať už to bylo normální? 453 00:22:13,990 --> 00:22:14,990 NEEL MEHTA: Jo, jasně. 454 00:22:14,990 --> 00:22:17,665 Takže možná budete chtít, aby Trať jste lícem nahoru, nebo jsou 455 00:22:17,665 --> 00:22:19,100 budete čelit dolů na kartě. 456 00:22:19,100 --> 00:22:23,420 Na Facebook, například, že ne Chcete si vzpomenout, kde v novinek 457 00:22:23,420 --> 00:22:25,870 Jsi ty, nebo chtěli kdo je profil jsou právě teď děláte. 458 00:22:25,870 --> 00:22:30,127 >> Na Messenger, stejně jako to, co text, zadejte do pole, že jo? 459 00:22:30,127 --> 00:22:31,710 Pokud aktualizovat stránku, to jde pryč. 460 00:22:31,710 --> 00:22:32,793 Ale nemáte opravdu jedno. 461 00:22:32,793 --> 00:22:33,770 Je to jen dočasné. 462 00:22:33,770 --> 00:22:34,548 To jo? 463 00:22:34,548 --> 00:22:36,152 >> Diváků: [Neslyšitelné] 464 00:22:36,152 --> 00:22:38,360 NEEL MEHTA: Jako blesk karta, stejně jako si můžete být vidět 465 00:22:38,360 --> 00:22:40,290 otázka strana nebo odpověď strana? 466 00:22:40,290 --> 00:22:41,070 >> Diváků: OK. 467 00:22:41,070 --> 00:22:43,270 >> NEEL MEHTA: Stejně jako oboustranné flešku, že jo? 468 00:22:43,270 --> 00:22:46,370 Jo, takže chcete mají tuto myšlenku nyní 469 00:22:46,370 --> 00:22:50,370 Mám vlastnosti, což je jako vstupy, ale stav, který je dočasný, uh, 470 00:22:50,370 --> 00:22:51,839 kde jste na stránce, ne? 471 00:22:51,839 --> 00:22:54,380 Opět jsem řekl v Facebook Messenger, mám podobně, které člověk 472 00:22:54,380 --> 00:22:56,550 máte zobrazenou Facebook nebo kdo je profil, ne? 473 00:22:56,550 --> 00:22:58,030 >> To je jen dočasné. 474 00:22:58,030 --> 00:23:01,200 Je důležité ukázat uživateli co se děje, ale aktualizujte stránku. 475 00:23:01,200 --> 00:23:02,250 Je to opravdu nezáleží. 476 00:23:02,250 --> 00:23:04,530 Takže je to dočasný stav, tak jsme všichni to stát. 477 00:23:04,530 --> 00:23:06,250 >> Takže, ještě jednou, je tu stát a rekvizity. 478 00:23:06,250 --> 00:23:09,084 Podpěry je uveden vstup ze zdroje dat. 479 00:23:09,084 --> 00:23:10,250 Stát je jako výchozí. 480 00:23:10,250 --> 00:23:13,700 Je to stejné jako věci, které dělá věc interaktivní. 481 00:23:13,700 --> 00:23:17,720 >> Takže v našem CardView-- pojďme se náš CardView-- tak to bylo fajn. 482 00:23:17,720 --> 00:23:21,420 Co budeme dělat tady, jedeme na dotek CardView a pouze CardView. 483 00:23:21,420 --> 00:23:25,105 A tak můj přítel, který dostal to, že nevšimne žádný rozdíl. 484 00:23:25,105 --> 00:23:27,230 Nebudou muset změnit některé z jejich vlastní kód, 485 00:23:27,230 --> 00:23:29,410 ale že bych vidět jejich CardView dostal nadupaným nahoru. 486 00:23:29,410 --> 00:23:31,270 To je hezký část o komponenty. 487 00:23:31,270 --> 00:23:35,290 >> OK, takže v naší CardView, zkusme a sledovat, zda budeme postupně nahoru 488 00:23:35,290 --> 00:23:36,560 nebo lícem dolů. 489 00:23:36,560 --> 00:23:40,480 V Reagovat děláme to tím, že nejprve určující počáteční stav. 490 00:23:40,480 --> 00:23:42,070 Kde karta začít? 491 00:23:42,070 --> 00:23:48,480 >> Takže buďte funkci nazvanou getInitialState fungovat, a vracíme se objekt. 492 00:23:48,480 --> 00:23:53,310 Tento objekt obsahuje nějaký stát, a stát je jen pár klíč-hodnota. 493 00:23:53,310 --> 00:23:56,950 Stejně jako v pokyn, máte klíč a hodnota, máte jako název je řetězec. 494 00:23:56,950 --> 00:24:01,410 >> V tomto případě, řekněme, že přední strana je pravda. 495 00:24:01,410 --> 00:24:03,760 To říká, že máme stát. 496 00:24:03,760 --> 00:24:06,570 Jednou složkou státu je atribut s názvem přední. 497 00:24:06,570 --> 00:24:09,649 [Neslyšitelný], tak tím, že ve výchozím nastavení, jsme v přední straně karty, 498 00:24:09,649 --> 00:24:11,440 a můžeme to změnit jak jsme flip kartu. 499 00:24:11,440 --> 00:24:13,380 Dávat smysl? 500 00:24:13,380 --> 00:24:18,190 >> OK, takže činí, právě teď, my jsme ukazující na otázku a odpověď. 501 00:24:18,190 --> 00:24:20,860 Teď, co bychom měli dělat je ukázat na otázku 502 00:24:20,860 --> 00:24:24,370 pokud jsme na přední straně karty, takže je odpověď na zadní straně karty. 503 00:24:24,370 --> 00:24:26,850 To je důvod, proč jste všichni dělají karta interaktivní. 504 00:24:26,850 --> 00:24:28,100 Takže pojďme se pokusit, aby to tady. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 No, nejprve jen aby proměnnou. 507 00:24:33,620 --> 00:24:37,790 Můžeme se zeptat teď this.state.front. 508 00:24:37,790 --> 00:24:42,010 Máme přístup konstatovat stejný my přístupové rekvizity, tak this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Jsme-li přední, pak textu je this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Pokud jsme na přední části karta, budeme se snažit 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čném případě, když jsme na zadní straně karty, co budeme dělat? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> Diváků: Odpověď? 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 pokud si všimnete, jsme pomocí stát učinit rozhodnutí 520 00:25:10,930 --> 00:25:14,420 Protože teď složky bude vypadat jinak 521 00:25:14,420 --> 00:25:16,710 umístěný pryč, jak tyto komunikovat s ním. 522 00:25:16,710 --> 00:25:20,355 Takže místo toho, vytištění to, my jen vytisknout text. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, tak teď, jak vidíte, vidíme pouze na otázku. 525 00:25:28,650 --> 00:25:37,720 A když změním stav zde ručně front je nepravdivé dostaneme 42 zpět. 526 00:25:37,720 --> 00:25:39,720 >> Takže, opět, tato součást má svůj vlastní stát. 527 00:25:39,720 --> 00:25:43,440 Stejně jako tlačítko ví, zda to bylo stisknuto, nebo ne, 528 00:25:43,440 --> 00:25:46,080 tohle ví, co je na přední nebo na zadní straně. 529 00:25:46,080 --> 00:25:48,320 Ve výchozím nastavení je to na přední straně. 530 00:25:48,320 --> 00:25:50,840 A pak, pokud je to na přední straně, budeme vytisknout na otázku. 531 00:25:50,840 --> 00:25:53,106 Pokud je to na zadní straně, budeme vytisknout odpověď. 532 00:25:53,106 --> 00:25:54,980 Takže, znovu, informace vzhledem k tomu, je stejný. 533 00:25:54,980 --> 00:25:59,090 Prostě to vypadá jinak založené na tom, jak jej naprogramovat. 534 00:25:59,090 --> 00:26:02,670 Tak, například Facebook Messenger, i když se dostanete na stejný zdroj dat, 535 00:26:02,670 --> 00:26:05,170 to by mohlo vypadat jinak protože stát je jiný. 536 00:26:05,170 --> 00:26:08,421 Díváte se v a Zpráva různé osoby. 537 00:26:08,421 --> 00:26:10,930 >> OK, takže to je vše v pořádku a dobrý, ale teď to, co je vlastně 538 00:26:10,930 --> 00:26:15,940 aby nás mohli změnit, ať už Naše karta je přední nebo zadní. 539 00:26:15,940 --> 00:26:19,010 Můžeme to udělat tím, že přidá flip Tlačítko, tlačítko na kartu, která 540 00:26:19,010 --> 00:26:22,950 vyletí paměťovou kartu, pokud je to [neslyšitelný]. 541 00:26:22,950 --> 00:26:31,770 Takže pojďme se zde přidat tlačítko, toto tlačítko, a toto tlačítko bude říkat klávesnice. 542 00:26:31,770 --> 00:26:35,650 >> A tak právě teď, to nedělá nic. 543 00:26:35,650 --> 00:26:37,075 Je to prostě vypadá hezky. 544 00:26:37,075 --> 00:26:43,650 Co můžeme udělat, je, že můžeme přidat cvaknutí psovod, onClick rovná this.flip, 545 00:26:43,650 --> 00:26:44,820 a my budeme definovat flipu později. 546 00:26:44,820 --> 00:26:47,120 Ale v podstatě, onClick je funkce, která 547 00:26:47,120 --> 00:26:48,675 se zavolá když uživatel klepne. 548 00:26:48,675 --> 00:26:52,330 >> Proto je toto tlačítko bude vědět když to bylo klikli. 549 00:26:52,330 --> 00:26:54,750 Went to bylo klikli, to bude hodit kartu. 550 00:26:54,750 --> 00:26:58,382 Je to něco jako tvůj rozvoz pizzy chlap. 551 00:26:58,382 --> 00:27:01,590 Jsi jako, v pořádku, vždy, když někdo zavolá mi, budu doručit pizzu, že jo? 552 00:27:01,590 --> 00:27:03,420 >> Vy registrovat posluchače. 553 00:27:03,420 --> 00:27:04,530 Můžete poslouchat pro událost. 554 00:27:04,530 --> 00:27:07,657 Získáte zavolal, a když se událost stane, něco udělat. 555 00:27:07,657 --> 00:27:08,240 Dostanete pizzu. 556 00:27:08,240 --> 00:27:11,480 V tomto případě, když jste klepli, flip karty. 557 00:27:11,480 --> 00:27:14,560 >> A proto je třeba definovat funkce, která bude flip karty, 558 00:27:14,560 --> 00:27:17,930 takže budeme psát toto právo tady, flip funkci. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 A tak to, co si myslíte, že fanda bude dělat? 561 00:27:23,680 --> 00:27:27,180 Opět se zavolá, když klikneme na tlačítko otočit. 562 00:27:27,180 --> 00:27:29,406 Co by měla funkci Flip dělat? 563 00:27:29,406 --> 00:27:34,136 >> Publikum: Změna this.state.front z true na false, false na hodnotu true. 564 00:27:34,136 --> 00:27:38,420 >> NEEL MEHTA: Jo, tak se bez ohledu this.front je-- přední stav. 565 00:27:38,420 --> 00:27:40,930 Vezměte přední stát, pokud je to pravda, aby bylo nepravdivé. 566 00:27:40,930 --> 00:27:42,530 Pokud je to nepravdivé, aby to pravda, ne? 567 00:27:42,530 --> 00:27:45,330 Takže pojďme to zkusit. 568 00:27:45,330 --> 00:27:48,240 >> Nemůžete změnit stav jen tím, že dělá this.state. 569 00:27:48,240 --> 00:27:50,380 Můžete to udělat. 570 00:27:50,380 --> 00:27:52,030 Můžete to udělat. 571 00:27:52,030 --> 00:27:55,810 Musíte použít funkci volal this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Takže můžete říct this.setState front tlustého střeva to kde, znovu, zvolání 573 00:28:03,230 --> 00:28:04,330 bod znamená opak. 574 00:28:04,330 --> 00:28:07,420 Myslím, že jestli to. state.front je pravda, bude to otočit false. 575 00:28:07,420 --> 00:28:09,170 Takže budeme nastavit stav z true na false. 576 00:28:09,170 --> 00:28:11,430 Pokud je to falešné, budeme nastavit tak, false na hodnotu true. 577 00:28:11,430 --> 00:28:17,210 >> Jen si všimněte, že jsme si stanovili a lehce dostat jinak, a tak se pojďme zkusit. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, podívej se na to. 579 00:28:18,675 --> 00:28:21,810 Tlačítko Flip bude nyní přepnout zepředu dozadu stavu. 580 00:28:21,810 --> 00:28:24,990 >> A tak tady je místo, kde vidíte Trochu magie Reagovat. 581 00:28:24,990 --> 00:28:28,420 Stejně jako jsme se nikdy řekl, že to, aby znovu zpracovala. 582 00:28:28,420 --> 00:28:30,910 Nikdy jsme řekli, že překreslit cokoliv. 583 00:28:30,910 --> 00:28:32,630 Pokud děláte to bez Reagovat, měli byste 584 00:28:32,630 --> 00:28:34,588 mají rádi, když je to-- Tlačítko fanda kliknutí, 585 00:28:34,588 --> 00:28:37,290 budete muset říct, že na ručně re-render, že jo? 586 00:28:37,290 --> 00:28:43,050 >> Reagovat je opravdu cool v tom, že pokud vás dát určitý stav a vlastnosti, 587 00:28:43,050 --> 00:28:45,760 bude vždy vykreslení přesně to samé. 588 00:28:45,760 --> 00:28:48,690 A tak, když se někdy změníme stav a vlastnosti, 589 00:28:48,690 --> 00:28:50,819 reagovat jen znovu činí celou věc. 590 00:28:50,819 --> 00:28:52,860 To ví, že je tu one-to-one korespondence 591 00:28:52,860 --> 00:28:57,270 mezi státem a parametrů a HTML. 592 00:28:57,270 --> 00:29:00,110 Takže kdykoliv jeden z těch, změny provedené prostřednictvím souboru stavu, 593 00:29:00,110 --> 00:29:03,750 to se změní, jak se pay je znovu vykreslen. 594 00:29:03,750 --> 00:29:06,650 A tak v podstatě je jako Reagovat čeká na vás změnit. 595 00:29:06,650 --> 00:29:09,870 >> Kdykoli se změní něco, to bude znovu zpracovala celou stránku. 596 00:29:09,870 --> 00:29:12,480 A když to zní neefektivní, je to proto, že by bylo, 597 00:29:12,480 --> 00:29:15,050 ale reagují využívá věc volal Stín DOM. 598 00:29:15,050 --> 00:29:19,950 Místo toho, aby čerpání stránku přímo, jej udržuje virtuální HTML strom v paměti. 599 00:29:19,950 --> 00:29:23,620 >> Víte, HTML je jako strom, jako hierarchické struktuře dat. 600 00:29:23,620 --> 00:29:28,990 Udržuje falešný strom v paměti, a při každé aktualizaci stránky, 601 00:29:28,990 --> 00:29:31,940 to bude čerpat další falešný strom, a bude to vypočítat 602 00:29:31,940 --> 00:29:35,120 co je třeba změnit, aby se strana, aby se tyto dva stromy stejné. 603 00:29:35,120 --> 00:29:38,540 Takže v podstatě, je prakticky re-vykreslí hodně. 604 00:29:38,540 --> 00:29:41,540 A pak je to jen rád mění stránky v malých vylepšení podle potřeby, 605 00:29:41,540 --> 00:29:44,240 takže je to velmi, velmi, velmi efektivní. 606 00:29:44,240 --> 00:29:46,970 >> Takže v podstatě Reagovat bude kdykoli něco změnit, 607 00:29:46,970 --> 00:29:49,010 to bude znovu vykreslit stránku virtuálně. 608 00:29:49,010 --> 00:29:52,830 Bude to přijít na to, co potřebuji změnit, aby se skutečné stránky odrážejí 609 00:29:52,830 --> 00:29:55,602 virtuální stránky, a to udělám. 610 00:29:55,602 --> 00:29:56,560 To je virtuální DOM. 611 00:29:56,560 --> 00:29:59,350 Je to jeden z největších rysy Reagovat. 612 00:29:59,350 --> 00:30:00,880 >> Dává to smysl? 613 00:30:00,880 --> 00:30:01,540 Nějaké otázky? 614 00:30:01,540 --> 00:30:02,040 To jo? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> Publikum: Jak porovnat ještě MVC 617 00:30:08,969 --> 00:30:10,760 že jsme mluvili o Před jako zdrojů. 618 00:30:10,760 --> 00:30:13,527 >> NEEL MEHTA: Jo, otázka je to, jak to v porovnání s MVC? 619 00:30:13,527 --> 00:30:14,610 Ptal jste se o zdrojích. 620 00:30:14,610 --> 00:30:16,445 Dobře, pojďme mluvit o tom, jak to funguje. 621 00:30:16,445 --> 00:30:18,190 >> V MVC byste aktualizovat model. 622 00:30:18,190 --> 00:30:20,560 V tomto případě budeme mít model karty. 623 00:30:20,560 --> 00:30:24,540 Pohled bude mít fanda tlačítka a ovládací prvek 624 00:30:24,540 --> 00:30:26,310 bude mít funkci Flip. 625 00:30:26,310 --> 00:30:28,450 Takže názor by říct, Regulátor flip klávesnice. 626 00:30:28,450 --> 00:30:30,370 Flip by říct, model změnit, ne? 627 00:30:30,370 --> 00:30:33,915 >> A tak když si udělat MVC, ty poslouchejte model změnit, 628 00:30:33,915 --> 00:30:37,150 a znovu vykreslit názor podle toho. 629 00:30:37,150 --> 00:30:39,210 Nebo stačí líbit mají řadič. 630 00:30:39,210 --> 00:30:42,418 Počkejte model změnit, a poté si vybrat část, jako věc 631 00:30:42,418 --> 00:30:44,032 změnit. 632 00:30:44,032 --> 00:30:45,740 Zde máme jednu věc, ale ve velkém app, 633 00:30:45,740 --> 00:30:48,510 Máte rád si vzpomenout, co změna v každém místě, 634 00:30:48,510 --> 00:30:50,290 takže je to trochu nepříjemné. 635 00:30:50,290 --> 00:30:53,670 A tak Reagovat je hezké protože má stín Dom. 636 00:30:53,670 --> 00:30:56,040 To si může dovolit jen přepsat celou věc. 637 00:30:56,040 --> 00:30:58,680 Nemusíte selektivně jako je hádat, co aktualizovat. 638 00:30:58,680 --> 00:31:02,186 >> Na Facebooku pokud se vám líbí dostanete novou zprávu, v MVC, 639 00:31:02,186 --> 00:31:04,060 byste mít na paměti, OK, měnit věci 640 00:31:04,060 --> 00:31:06,260 v horní části strana, ikona zprávy. 641 00:31:06,260 --> 00:31:08,290 Také pop nové okno v dolní části. 642 00:31:08,290 --> 00:31:10,070 Také se něco nového v tomto okně. 643 00:31:10,070 --> 00:31:11,060 Také hrát zvuk. 644 00:31:11,060 --> 00:31:13,150 >> To je hodně věcí chodit ve stejnou dobu. 645 00:31:13,150 --> 00:31:15,320 A tak, pokud nemáte mají stín Dom, měli byste 646 00:31:15,320 --> 00:31:18,740 muset udělat ručně, protože nemůžete zbavit celou stránku. 647 00:31:18,740 --> 00:31:21,430 Nemůžete si dovolit, takže máte změnit každou věc ručně, 648 00:31:21,430 --> 00:31:23,990 což je opravdu otravné v MVC. 649 00:31:23,990 --> 00:31:27,640 >> Takže, aby byly spořivý, oni selektivně 650 00:31:27,640 --> 00:31:30,750 aktualizovat stránku, která je účinný, ale také nepříjemné. 651 00:31:30,750 --> 00:31:34,002 V React, kvůli stínu Dom, dostanete obojí zdarma. 652 00:31:34,002 --> 00:31:35,710 Je to efektivní, protože Stínové Dom. 653 00:31:35,710 --> 00:31:37,210 Zúžení aktualizuje stránku. 654 00:31:37,210 --> 00:31:40,292 Není to dělá manipulaci strom. 655 00:31:40,292 --> 00:31:41,250 Získáte účinnost. 656 00:31:41,250 --> 00:31:45,420 Můžete také získat snadnost použití, protože pokud jste právě přepsat celou stránku, 657 00:31:45,420 --> 00:31:48,970 ale prostě víte, v pořádku, věci, se bude na stránce někam. 658 00:31:48,970 --> 00:31:51,180 To by mohlo být na jiném místě, ale že to bude na stránce, ne? 659 00:31:51,180 --> 00:31:52,860 Takže jste právě re-tavené celá věc v podstatě, 660 00:31:52,860 --> 00:31:55,540 a vy byste mohli udělat pár Změny samotné stránky. 661 00:31:55,540 --> 00:31:57,850 >> Takže, opět v MVC vás bude muset vybrat 662 00:31:57,850 --> 00:32:01,840 mezi snadnost použití a efektivitu, a reagovat, dostanete oba. 663 00:32:01,840 --> 00:32:04,020 Takže je to lepší. 664 00:32:04,020 --> 00:32:05,220 Dávat smysl? 665 00:32:05,220 --> 00:32:06,676 Pevný. 666 00:32:06,676 --> 00:32:12,080 >> OK, takže uvidíme, pojďme mluvit něco málo o kroku 4, 667 00:32:12,080 --> 00:32:14,740 jak můžeme vložit komponenty. 668 00:32:14,740 --> 00:32:16,260 Takže máme právě teď. 669 00:32:16,260 --> 00:32:19,420 Máme chladné malé tlačítko. 670 00:32:19,420 --> 00:32:23,157 Můžeme se otočit zpět a tam, a to je vše, co dělá. 671 00:32:23,157 --> 00:32:24,990 Řekněme, že chceme, aby mají další komponenty. 672 00:32:24,990 --> 00:32:28,730 Řekněme, že náš flashcard aplikace by obsahují seznam všech karet 673 00:32:28,730 --> 00:32:31,520 že máte, tak to znamená, že by měli mít další krok. 674 00:32:31,520 --> 00:32:32,970 No, možná se to nazvat zobrazení seznamu. 675 00:32:32,970 --> 00:32:36,200 Pojďme udělat zobrazení seznamu, který koexistuje s CardView, 676 00:32:36,200 --> 00:32:39,680 a tento seznam zobrazení a CardView bude líbit pracovat společně. 677 00:32:39,680 --> 00:32:43,190 A vy je můžete kombinovat aby se naše aplikace pro vás. 678 00:32:43,190 --> 00:32:45,160 >> Takže nejprve, pojďme udělat pár více karet v pořádku. 679 00:32:45,160 --> 00:32:46,370 Řekněme, jaké karty? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 A jen tak nemám na nudit psaní ji, 682 00:32:51,910 --> 00:32:53,410 Já jsem prostě jít zkopírovat odsud. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 A tak já jdu na to dát mu jen jednu kartu. 685 00:33:03,580 --> 00:33:06,910 Chystám se dát řadu karet. 686 00:33:06,910 --> 00:33:10,240 Takže nejprve, že aplikace chystá rozbít nyní. 687 00:33:10,240 --> 00:33:14,717 Dobře, takže budeme dělat tento schopni zvládnout více karet. 688 00:33:14,717 --> 00:33:17,800 Takže nejprve, budeme dávat to, ne jen jednu kartu, ale řada karet, 689 00:33:17,800 --> 00:33:18,700 jako seznam karet. 690 00:33:18,700 --> 00:33:20,980 A v tomto případě, máme tři z nich. 691 00:33:20,980 --> 00:33:27,280 >> Dobře, takže takže aplikace je bude získat seznam karet, 692 00:33:27,280 --> 00:33:29,870 a bude to se rozhodnout, které kdo ukázat na CardView. 693 00:33:29,870 --> 00:33:33,740 CardView může pouze činí jednu kartu, ale aplikace 694 00:33:33,740 --> 00:33:37,610 dostane seznam všech karet, že jo? 695 00:33:37,610 --> 00:33:40,820 >> Takže, když jste zjistili, kdo Karta dát CardView, 696 00:33:40,820 --> 00:33:44,660 jak byste, že byste měli být schopni učinit rozhodnutí o tom, které karty 697 00:33:44,660 --> 00:33:47,064 ukázat? 698 00:33:47,064 --> 00:33:49,980 Chcete-li vám náznak, že je dočasně Budete prohlížíte určitou kartu. 699 00:33:49,980 --> 00:33:53,260 Pokud aktualizovat stránku, budete stačí jít zpět na první kartu. 700 00:33:53,260 --> 00:33:55,464 To je v pořádku, protože je to dočasné. 701 00:33:55,464 --> 00:33:56,630 Jakou technikou můžeme používat? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> Diváků: Dalo by se udělat proměnnou takže stejně jako vy měli dopředu. 704 00:34:08,760 --> 00:34:11,989 Je to pravda, mohl byste mít aktuální karta rovná 1? 705 00:34:11,989 --> 00:34:14,150 >> NEEL MEHTA: Jo, tak jsme Chcete mít stát, že jo? 706 00:34:14,150 --> 00:34:16,080 Použili byste stát v Komponenta přijít na to, 707 00:34:16,080 --> 00:34:17,288 která karta chceme dostat. 708 00:34:17,288 --> 00:34:19,290 Stejně jako máme seznam všechny karty, budeme 709 00:34:19,290 --> 00:34:21,630 používat stát, aby zjistili, jeden z první karty, 710 00:34:21,630 --> 00:34:23,710 druhá karta, třetí karta, a tak dále. 711 00:34:23,710 --> 00:34:28,760 >> Takže aplikace, takže aplikace, dostanou mají funkci getInitialState, 712 00:34:28,760 --> 00:34:35,020 getInitialState funkce návrat. 713 00:34:35,020 --> 00:34:39,929 A budeme jen říct activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Takže teď naše aplikace má vlastní stát. 715 00:34:42,889 --> 00:34:47,179 >> A tak teď na omítky, přijít na to, karta, ať to prostě jít do pole 716 00:34:47,179 --> 00:34:49,969 a chytit věc v tomto indexu. 717 00:34:49,969 --> 00:34:53,580 Zvolte karty stejné 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 jak vidíte tady, rekvizity a Stát skutečně pracují společně. 720 00:35:00,162 --> 00:35:08,990 Takže teď, že máme AktivCard, budeme nazývat AktivCard, 721 00:35:08,990 --> 00:35:10,470 a uvidíme, jestli to funguje. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [NESLYŠITELNÝ] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Oh, že byl text chybě. 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 teď jsme byli zpátky tam, kde jsme byli předtím, ne? 729 00:35:54,840 --> 00:35:57,100 Stejný starý program, s výjimkou Nyní můžeme podpořit 730 00:35:57,100 --> 00:35:59,390 seznam karet, ne jen jedna karta. 731 00:35:59,390 --> 00:36:04,130 A nyní, opět, když jsme změnit activeIndex, můžeme jít od 0 do 1, 732 00:36:04,130 --> 00:36:07,330 a teď, když už druhá karta, a pak jsme šli do 0 ° C. 733 00:36:07,330 --> 00:36:10,390 Tak tady je nový nadupaným-up verze našeho. 734 00:36:10,390 --> 00:36:16,000 >> OK, tak teď pojďme se zobrazení seznamu, který ukazuje všechny karty v programu, 735 00:36:16,000 --> 00:36:19,980 takže budeme dělat nový součást tzv ListView. 736 00:36:19,980 --> 00:36:22,155 Ať 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 vykreslit neuspořádaný seznam s seznamu položku pro každou kartu. 739 00:36:38,800 --> 00:36:41,490 A tak máme spoustu karet. 740 00:36:41,490 --> 00:36:44,990 Chceme jednu položku seznamu pro každou kartu, ne? 741 00:36:44,990 --> 00:36:47,490 Mohli bychom udělat pro smyčku, nebo něco udělat novou položku seznamu. 742 00:36:47,490 --> 00:36:50,522 Ale způsob, jakým jste to v Reagovat použít věc zvanou mapa. 743 00:36:50,522 --> 00:36:57,150 Mapa je nástroj nebo funkce, kterou používáte že pro každou položku, běží nějakou funkci, 744 00:36:57,150 --> 00:36:59,510 vezme návratovou hodnotu, a dává vám to zpátky. 745 00:36:59,510 --> 00:37:06,310 >> Tak jako příklad, máme pole 1, 2, a to 3.map function-- 746 00:37:06,310 --> 00:37:12,120 je zkratkou pro function-- x šipkami x krát x. 747 00:37:12,120 --> 00:37:16,110 To říká, že pro každé číslo v 1, 2, 3, vezměte si ji. 748 00:37:16,110 --> 00:37:17,800 Náměstí, a to vrátit. 749 00:37:17,800 --> 00:37:22,090 Tak co si myslíš, že 1, 2, 3.map x jde do x krát 750 00:37:22,090 --> 00:37:25,480 x vám dává zpět vzhledem k tomu, že tato funkce je 751 00:37:25,480 --> 00:37:27,680 běží na každý prvek této 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 proto, že děláte 1 krát 1. 755 00:37:35,709 --> 00:37:36,500 To vám dává jeden. 756 00:37:36,500 --> 00:37:37,690 To je první prvek. 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ý prvek. 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 třetí prvek. 761 00:37:41,540 --> 00:37:42,640 Dávat smysl? 762 00:37:42,640 --> 00:37:45,015 Mapa Takže má techniku, kterou použití ve funkčních programátory, 763 00:37:45,015 --> 00:37:48,090 Nový styl programování dělat něco 764 00:37:48,090 --> 00:37:50,500 na každý prvek v seznamu. 765 00:37:50,500 --> 00:37:51,970 A tak to zní povědomě. 766 00:37:51,970 --> 00:37:53,370 Máme seznam karet. 767 00:37:53,370 --> 00:37:56,860 Chceme získat položku seznamu pro každý člověk, takže budeme prostě použít mapu zde. 768 00:37:56,860 --> 00:38:00,250 Řekneme, ať seznam 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 jsme bude generovat položky seznamu 771 00:38:15,070 --> 00:38:17,580 S tím karty obsahu straně. 772 00:38:17,580 --> 00:38:20,660 Řekněme, že chceme dát ven Karty o ně card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Takže tento seznam obsahuje pole LI je nebo položky seznamu 775 00:38:30,649 --> 00:38:32,440 tam, kde je jeden seznam položka pro každou kartu, 776 00:38:32,440 --> 00:38:35,150 a který obsahuje karty otázku. 777 00:38:35,150 --> 00:38:37,640 Dávat smysl? 778 00:38:37,640 --> 00:38:39,450 >> Cool, takže teď pojďme vytisknou, že ven. 779 00:38:39,450 --> 00:38:46,521 Tak jsme se vrátit ul. 780 00:38:46,521 --> 00:38:49,020 Uvnitř tohoto výčtu, prostě budeme držet celý seznam 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 Bezva. 784 00:38:53,350 --> 00:38:56,060 >> Dobře, tak teď to Seznam pohled práce jen najít. 785 00:38:56,060 --> 00:38:59,842 Máte otázky k zobrazení seznamu? 786 00:38:59,842 --> 00:39:01,270 Máte spoustu karet. 787 00:39:01,270 --> 00:39:02,800 Uděláte položku seznamu pro každou kartu. 788 00:39:02,800 --> 00:39:05,466 A vy jste dal je uvnitř neuspořádaný seznam, a dáte ho zpátky. 789 00:39:05,466 --> 00:39:09,410 Takže teď pojďme jednat, abychom vložit tento uvnitř naší aplikaci, 790 00:39:09,410 --> 00:39:14,310 takže můžeme udělat, zobrazení seznamu. 791 00:39:14,310 --> 00:39:17,070 To, co argument, můžeme přejít k zobrazení seznamu? 792 00:39:17,070 --> 00:39:18,320 Jaké vlastnosti se dáme to? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Pamatujte si, že pokud dáte je to banda karet, 795 00:39:26,860 --> 00:39:29,590 to bude dělat seznam zobrazit u těchto karet. 796 00:39:29,590 --> 00:39:32,267 Takže to, co bychom projít zde jako argument? 797 00:39:32,267 --> 00:39:33,350 Diváků: Seznam karet? 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 jen 801 00:39:44,370 --> 00:39:48,600 obrátil jeden prvek nejvyšší úrovně v render, takže máte zabalit ho do div. 802 00:39:48,600 --> 00:39:49,100 Je to divný. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Tak uvidíme, jestli 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 jdete. 809 00:40:31,030 --> 00:40:33,700 Takže teď máme seznam karet na dně, 810 00:40:33,700 --> 00:40:36,180 a pak Máme CardView sám na vrcholu, 811 00:40:36,180 --> 00:40:40,486 a že mezi vyletí obě strany karty. 812 00:40:40,486 --> 00:40:42,610 Teď dělá to smysl, jak jsem to udělal? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Jo, tak znovu, máme dvě složky. 815 00:40:46,790 --> 00:40:49,666 Součást se tisknou jako první out každá karta v seznamu. 816 00:40:49,666 --> 00:40:50,540 To je zobrazení seznamu. 817 00:40:50,540 --> 00:40:54,770 A druhá složka vytiskne jen, že kartu. 818 00:40:54,770 --> 00:40:58,840 Pokud jej dát určitou kartu, bude to vytisknout informace o tuto kartu 819 00:40:58,840 --> 00:41:01,870 a umožňují otočit tam a zpět. 820 00:41:01,870 --> 00:41:05,850 >> Takže pokud chceme, můžeme zkusit a mluvit o přidání některé nové funkce v této oblasti. 821 00:41:05,850 --> 00:41:09,482 V opačném případě můžeme mluvit o něco více o o rychlosti reaktoru, 822 00:41:09,482 --> 00:41:11,190 nebo můžeme odpovědět otázky, které mohou mít 823 00:41:11,190 --> 00:41:15,050 protože tyto jsou všechny z hlavních dílů o reakci, že chci mluvit. 824 00:41:15,050 --> 00:41:16,540 Můžeme pokračovat. 825 00:41:16,540 --> 00:41:17,590 Můžeme odpovědět na otázky. 826 00:41:17,590 --> 00:41:18,560 Cokoliv chceš. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> Diváků: Můžete použít JSX v normálním JavaScriptu? 829 00:41:24,205 --> 00:41:27,150 Nebo je to něco, přišel s [neslyšitelných]? 830 00:41:27,150 --> 00:41:30,760 >> NEEL MEHTA: Otázkou je, zda si Používáte JSX s normálním JavaScriptu? 831 00:41:30,760 --> 00:41:32,620 Odpověď je ano. 832 00:41:32,620 --> 00:41:41,070 JSX je jen způsob, jak to bere vaše JavaScript, který má HTML uvnitř ní, 833 00:41:41,070 --> 00:41:44,215 a sestavuje do JavaScriptu, že nemá HTML uvnitř ní. 834 00:41:44,215 --> 00:41:47,880 Takže si všimnout that-- tak všimnout zde. 835 00:41:47,880 --> 00:41:50,820 To vypadá, jako bys měl jako div a máte věci uvnitř ní. 836 00:41:50,820 --> 00:41:54,970 >> , Který překládá do JavaScriptu, že jako generuje stejnou věc. 837 00:41:54,970 --> 00:41:59,590 Myslím, že to, co říkám, je, že JSX je jen syntaktická, jako by to 838 00:41:59,590 --> 00:42:03,530 preprocesor pro JavaScript moc jako PHP je preprocesor pro HTML. 839 00:42:03,530 --> 00:42:05,490 JSC je preprocesor pro JavaScript, který umožňuje 840 00:42:05,490 --> 00:42:12,970 vložíte HTML uvnitř vašeho JavaScript. 841 00:42:12,970 --> 00:42:16,425 A tak pokud máte správný transformátor což je věc, s názvem [neslyšitelných], 842 00:42:16,425 --> 00:42:17,300 který bude transformovat. 843 00:42:17,300 --> 00:42:19,360 Správné preprocesor, to bude vám umožní udělat. 844 00:42:19,360 --> 00:42:20,235 >> Diváků: [Neslyšitelné] 845 00:42:20,235 --> 00:42:23,026 NEEL MEHTA: Obvykle nepotřebujete dát HTML uvnitř JavaScriptu 846 00:42:23,026 --> 00:42:24,110 pokud děláte Reagovat. 847 00:42:24,110 --> 00:42:27,146 Ale můžete to udělat tak jako tak. 848 00:42:27,146 --> 00:42:27,645 Ano? 849 00:42:27,645 --> 00:42:29,353 >> Diváků: Myslím si, že vás popsal Reagovat 850 00:42:29,353 --> 00:42:31,970 jako funkční programovacího jazyka. 851 00:42:31,970 --> 00:42:35,646 Učíme se C v CS50. 852 00:42:35,646 --> 00:42:38,032 Je C také 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 jiným, čemu se říká imperativní nebo procedurální programování. 855 00:42:43,010 --> 00:42:44,820 Jsou dva druhy programů populární. 856 00:42:44,820 --> 00:42:48,550 Jedna se jmenuje procesní, což je o jako dělat příkazů, 857 00:42:48,550 --> 00:42:51,510 a jeden je funkční, což je vše o které mají funkce a mající 858 00:42:51,510 --> 00:42:52,930 Vstup a výstup z nich. 859 00:42:52,930 --> 00:42:55,930 Reagovat je funkční paradigma. 860 00:42:55,930 --> 00:42:58,010 C je velmi procedurální paradigma. 861 00:42:58,010 --> 00:43:02,360 >> A jako příklad, například C, nechcete dělat tuto deklarativní způsobem 862 00:43:02,360 --> 00:43:04,390 tvorby programu, ne? 863 00:43:04,390 --> 00:43:06,826 Musíte říci, tisknout. 864 00:43:06,826 --> 00:43:07,950 Změnit tuto strukturu dat. 865 00:43:07,950 --> 00:43:08,530 Vytisknout toto. 866 00:43:08,530 --> 00:43:10,160 Je to všechno o příkazy. 867 00:43:10,160 --> 00:43:12,640 >> V Reagovat, že to není že mnoho příkazů. 868 00:43:12,640 --> 00:43:15,145 Je to všechno o tom mít komponenty, které dohromady. 869 00:43:15,145 --> 00:43:16,300 Jsou jako funkce. 870 00:43:16,300 --> 00:43:26,360 Máte podobně jako funkce volal CardView, 871 00:43:26,360 --> 00:43:28,680 které je funkcí který má vstup, výstup 872 00:43:28,680 --> 00:43:30,660 a tak React je vše o této filosofie 873 00:43:30,660 --> 00:43:32,700 Americké ministerstvo having-- máte data. 874 00:43:32,700 --> 00:43:34,910 Můžete procházet přes to algoritmus, a to bude 875 00:43:34,910 --> 00:43:36,800 HTML výstup, který vás jen vytisknout stránku, 876 00:43:36,800 --> 00:43:39,180 a tak budete muset stavět to kousek po kousku. 877 00:43:39,180 --> 00:43:42,800 >> Takže k tomu metaforu na to, co Řekl jsem předtím, víte, jak 878 00:43:42,800 --> 00:43:47,050 na Facebooku, pokud se dostanete zprávu, a můžete si vybrat, které části k aktualizaci, 879 00:43:47,050 --> 00:43:47,882 to je procesní. 880 00:43:47,882 --> 00:43:48,840 To je naprosto nezbytné, ne? 881 00:43:48,840 --> 00:43:49,806 OK, jsem dostal zprávu. 882 00:43:49,806 --> 00:43:50,930 Změňme účet tam. 883 00:43:50,930 --> 00:43:52,110 >> Pojďme pop okna zde. 884 00:43:52,110 --> 00:43:52,780 Změňme účet tam. 885 00:43:52,780 --> 00:43:53,700 Pojďme nakreslit to tady. 886 00:43:53,700 --> 00:43:55,220 To je procesní přístup. 887 00:43:55,220 --> 00:44:00,240 >> To je to, co věci, jako Úhlová, Boost, Páteřní další rámce použití. 888 00:44:00,240 --> 00:44:01,200 Reagovat je funkční. 889 00:44:01,200 --> 00:44:03,324 Je to velmi odlišný způsob, přemýšlení o věcech. 890 00:44:03,324 --> 00:44:07,950 To bere tuto myšlenku pojďme se funkcí nebo algoritmy, které budete 891 00:44:07,950 --> 00:44:08,800 dát mu dat. 892 00:44:08,800 --> 00:44:11,820 Bude vyplivnout co to by měl být, a počítač 893 00:44:11,820 --> 00:44:13,490 se bude starat o vážení ven. 894 00:44:13,490 --> 00:44:15,890 Nemusíte zvládnout sami. 895 00:44:15,890 --> 00:44:18,470 Znamená to, že trochu smysl? 896 00:44:18,470 --> 00:44:18,970 To jo? 897 00:44:18,970 --> 00:44:24,180 >> Publikum: Ve funkční jazyk, všechno, co se děje najednou? 898 00:44:24,180 --> 00:44:26,800 >> NEEL MEHTA: Ne, co se stalo v pořádku. 899 00:44:26,800 --> 00:44:29,320 Stejně jako tady je tu stále objednat, ale to není 900 00:44:29,320 --> 00:44:32,390 se stalo v pořadí, jako Chválím, příkaz, příkaz. 901 00:44:32,390 --> 00:44:36,459 Stává se to v pořadí Funkce vám dává výstup. 902 00:44:36,459 --> 00:44:37,750 Dej to do jiné funkce. 903 00:44:37,750 --> 00:44:39,550 Dej to do další Funkce, jiné funkce. 904 00:44:39,550 --> 00:44:41,470 >> Pokud tak učiníte CS51, budete učit funkční programy 905 00:44:41,470 --> 00:44:42,886 trochu z oblasti působnosti této. 906 00:44:42,886 --> 00:44:45,090 Ale v podstatě, to, co dělá Reagovat cool je nejenom 907 00:44:45,090 --> 00:44:46,840 jednocestný datový tok a virtuální Dom, 908 00:44:46,840 --> 00:44:48,700 ale i tato myšlenka funkcionální programování. 909 00:44:48,700 --> 00:44:51,720 A funkční programování je velmi snadné skládat a dělat super věci z, 910 00:44:51,720 --> 00:44:53,844 a je to velmi snadné si myslet, asi i důvod, proč asi. 911 00:44:53,844 --> 00:44:55,450 Takže to je další dobrý remíza Reagovat. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Nějaké další otázky? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 To jo? 916 00:45:03,150 --> 00:45:06,840 >> Publikum: Um, proč byste Používejte nechal na rozdíl od var? 917 00:45:06,840 --> 00:45:10,450 >> NEEL MEHTA: Takže otázka zní Proč používáte nechat namísto var? 918 00:45:10,450 --> 00:45:13,220 To je věc zvaná ES6 nebo ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Je to nová verze JavaScript. 920 00:45:15,820 --> 00:45:19,050 Je tu spoustu technických důvodů, ale ať je lepší verze var. 921 00:45:19,050 --> 00:45:20,724 >> Je to, jak jste deklarovat proměnné. 922 00:45:20,724 --> 00:45:21,390 Můžete použít nechat. 923 00:45:21,390 --> 00:45:22,140 Můžete použít var. 924 00:45:22,140 --> 00:45:23,825 Let má spoustu technických reasons-- si můžete prohlédnout jejich 925 00:45:23,825 --> 00:45:25,610 up later--, proč je to lepší. 926 00:45:25,610 --> 00:45:28,780 V podstatě, ES6 má některé pěkné Nová syntaxe, některé nové funkce 927 00:45:28,780 --> 00:45:30,720 v horní části starého JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Takže máme asi pět minut. 929 00:45:32,782 --> 00:45:34,990 Jen jsem chtěl mluvit o ještě jedna věc opravdu rychle. 930 00:45:34,990 --> 00:45:36,450 Pokud byste měli nějaké otázky, pojďme mluvit o tom po tomto. 931 00:45:36,450 --> 00:45:38,366 Ale jen tak se to dostane zachytil na kameru, jen jsem 932 00:45:38,366 --> 00:45:41,550 chci mluvit trochu o tom, jak skutečně používat Reagovat na vašich aplikací. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Vydáte-li se zde, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 toto je domácí stránka pro React, a to vám ukážu, jak budete skutečně používat 936 00:46:03,320 --> 00:46:05,320 Reagovat na své stránky. 937 00:46:05,320 --> 00:46:08,845 V podstatě je to trochu komplikované pokusu o instalaci Reagovat. 938 00:46:08,845 --> 00:46:12,300 Není to tak jednoduché, jak si jen přetáhnout and drop JavaScript tam. 939 00:46:12,300 --> 00:46:15,890 >> Musíte mít transformátor nastavení, které bude, jak to bylo dříve, 940 00:46:15,890 --> 00:46:18,120 se váš JSX do normální JavaScript. 941 00:46:18,120 --> 00:46:21,030 Musíte se věc, která bude kompilace vám ES6 do normálu. 942 00:46:21,030 --> 00:46:24,720 JavaScript je tu spousta pohybu součásti, co musíte udělat, takže je tu věc, 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 pro příkazovou řádku, který bude pomůže lešení z vašeho Reagovat 945 00:46:31,110 --> 00:46:32,380 projekty snadno. 946 00:46:32,380 --> 00:46:38,660 >> Takže si můžete přečíst o tom později, ale tam jsou některé nástroje 947 00:46:38,660 --> 00:46:40,160 že Yeoman nabízí. 948 00:46:40,160 --> 00:46:43,280 Budou vám umožní vytvořit Reagovat Aplikace se vším postavena v roce. 949 00:46:43,280 --> 00:46:46,030 Stejně jako to bude mít postaveny in, součásti postavena v roce. 950 00:46:46,030 --> 00:46:47,880 To bude mít váš transformátor postavena v roce. 951 00:46:47,880 --> 00:46:50,699 Mají hodně v pohodě věci postavený automaticky 952 00:46:50,699 --> 00:46:52,240 použitím těchto věcí zvaných generátory. 953 00:46:52,240 --> 00:46:54,620 >> Tak si přečtěte o tom, jestli chcete. 954 00:46:54,620 --> 00:46:59,110 Stačí jít na Yeoman, Y-E-O-M-A-N, a najdete generátory, jako jsou tyto. 955 00:46:59,110 --> 00:47:01,263 A s generátory, jako je tyto, jste právě jako jeden 956 00:47:01,263 --> 00:47:03,010 je pár příkazů příkazového řádku. 957 00:47:03,010 --> 00:47:05,530 Bude to lešení posouzení dopadu na Celý Reagovat app pro vás. 958 00:47:05,530 --> 00:47:10,470 Bude to získat všechny manuální potrubí se, a grunt práci za vás, 959 00:47:10,470 --> 00:47:13,010 a to je důvod, proč si jen soustředit Na právě psaní v Reagovat. 960 00:47:13,010 --> 00:47:16,739 >> Takže v podstatě budování Reagovat aplikace je netriviální. 961 00:47:16,739 --> 00:47:19,530 Je to pevné dohromady, ale tam jsou nástroje, které Uděláme to za vás. 962 00:47:19,530 --> 00:47:23,070 Takže pokud chcete, aby se Reagovat app, zkuste dělat to tak. 963 00:47:23,070 --> 00:47:26,360 Pokud si jen chcete experimentovat, můžete zkusit pomocí tohoto CodePen 964 00:47:26,360 --> 00:47:28,550 protože tento má CodePen všechny reagovat zapojení. 965 00:47:28,550 --> 00:47:30,240 Udělal jsem všechnu práci za vás již. 966 00:47:30,240 --> 00:47:34,610 >> Takže pokud chcete, aby se jako výroba uvolnit Reagovat app, 967 00:47:34,610 --> 00:47:37,220 zkuste některý z těchto generátorů. 968 00:47:37,220 --> 00:47:40,240 Pokud si jen chcete hrát kolem, je to často stojí jen 969 00:47:40,240 --> 00:47:44,490 jako vyzkoušet, hrál na CodePen tady. 970 00:47:44,490 --> 00:47:45,470 Zní to dobře? 971 00:47:45,470 --> 00:47:45,970 Bezva. 972 00:47:45,970 --> 00:47:47,890 >> Tak to je všechno, co mám. 973 00:47:47,890 --> 00:47:52,470 Opět platí, že celý kód a příklady jsou Bude na těchto stránkách zde. 974 00:47:52,470 --> 00:47:55,509 Takže, ještě jednou, jsme nemluvili asi hodně syntaxe Reagovat, 975 00:47:55,509 --> 00:47:57,550 ale najít všechny ty, málo syntaktické detaily, 976 00:47:57,550 --> 00:48:00,320 to všechno bude k dispozici Na těchto webových stránkách zde. 977 00:48:00,320 --> 00:48:02,660 >> Takže bych rád doporučit první krok. 978 00:48:02,660 --> 00:48:06,277 Dejte ji do vašeho CodePen. 979 00:48:06,277 --> 00:48:08,110 Zkuste pracujeme na tom, že do druhého kroku. 980 00:48:08,110 --> 00:48:11,310 Je tu čtvrtý krok, a jen uvidíte, kam se dostanete z toho. 981 00:48:11,310 --> 00:48:14,840 >> Nějaké další otázky, podívejte se na to, že stránky nebo 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 já bych rád, aby vám pomohl s jakýmkoliv dotazy můžete mít o Reagovat. 984 00:48:19,885 --> 00:48:21,010 Takže, ano, to je všechno, co mám. 985 00:48:21,010 --> 00:48:23,410 Děkuji vám všem moc za sledování nebo za účast. 986 00:48:23,410 --> 00:48:26,820 A já si vezmu nějaké otázky můžete mít po tomto teď. 987 00:48:26,820 --> 00:48:29,140 Takže děkuji vám všem za sledování. 988 00:48:29,140 --> 00:48:31,270