1 00:00:00,000 --> 00:00:02,910 >> [Predvaja glasba] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> Neel Mehta: Tukaj gre. 4 00:00:07,275 --> 00:00:11,070 >> No, vsi, dobrodošli na spletni Aplikacije v prihodnosti z React. 5 00:00:11,070 --> 00:00:11,870 To je CS50. 6 00:00:11,870 --> 00:00:12,930 Moje ime je Neel. 7 00:00:12,930 --> 00:00:17,689 Sem TA za CS50 in letniku na Harvardu in zelo, zelo 8 00:00:17,689 --> 00:00:18,730 strastno spletni razvijalec. 9 00:00:18,730 --> 00:00:20,730 Torej, jaz sem zelo razburljivo, da se pogovarjam s tabo danes 10 00:00:20,730 --> 00:00:24,550 ali ste tukaj ali doma gledal, o React, ki je, spet 11 00:00:24,550 --> 00:00:27,270 kot sem že dejal, je prihodnost spletnih aplikacij. 12 00:00:27,270 --> 00:00:29,055 >> Torej React je okvir web. 13 00:00:29,055 --> 00:00:30,930 In kot sem že povedal, za nekatere ljudi tu, 14 00:00:30,930 --> 00:00:33,400 okvir je le komplet orodij, ki jih lahko uporabite 15 00:00:33,400 --> 00:00:35,770 strukturirati in zgraditi vašo spletno aplikacijo. 16 00:00:35,770 --> 00:00:39,010 In spletne aplikacije so, spet, spletne strani da so interaktivne, kot so Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, karkoli. 18 00:00:42,330 --> 00:00:45,590 >> Torej, Facebook je okvir web ki jo je razvil Facebook 19 00:00:45,590 --> 00:00:48,060 par let back-- REACT je. 20 00:00:48,060 --> 00:00:50,830 To je bilo, saj se uporablja v Facebook na svojih mobilnih aplikacij 21 00:00:50,830 --> 00:00:52,460 in web app, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy je drugo vidno prvimi React. 23 00:00:56,350 --> 00:00:58,630 >> To je res bilo pridobivanje zelo priljubljena. 24 00:00:58,630 --> 00:01:03,420 Če ste že kdaj uporabili stvari, kot kotni ali Hrbtenico, to je iz iste družine, 25 00:01:03,420 --> 00:01:05,830 vendar pa je od daleč prekašala njihovo popularnost. 26 00:01:05,830 --> 00:01:06,890 To je nova vroča stvar. 27 00:01:06,890 --> 00:01:09,590 To je res, res ogromno. 28 00:01:09,590 --> 00:01:13,470 >> In tako React je dobro ne samo kot web okvir za gradnjo vmesnikov. 29 00:01:13,470 --> 00:01:16,020 To je dobro za gradnjo spletnih vmesnikov. 30 00:01:16,020 --> 00:01:18,350 Tam je tudi stvar imenovano React Native ki 31 00:01:18,350 --> 00:01:22,200 vam omogoča, da graditi vmesnike za Android in iOS 32 00:01:22,200 --> 00:01:26,390 in morda druge platforme v prihodnosti uporabo le isto kodo JavaScript. 33 00:01:26,390 --> 00:01:31,130 Lahko uporabite popolnoma enaka Koda JavaScript, da postane spletnih strani, 34 00:01:31,130 --> 00:01:33,040 nuditi aplikacij za Android in iOS. 35 00:01:33,040 --> 00:01:35,000 >> To je zelo, zelo razburljiv čas. 36 00:01:35,000 --> 00:01:37,070 To je res, res super priložnost. 37 00:01:37,070 --> 00:01:42,020 To je res univerzalen web vmesnik razvojno orodje, 38 00:01:42,020 --> 00:01:44,420 tako da je zelo, zelo Važno, da veš. 39 00:01:44,420 --> 00:01:46,949 In, kot sem povedal ljudem Prej je to, mislim, 40 00:01:46,949 --> 00:01:48,990 se bo spremenilo, kako smo izgradnjo spletnih aplikacij za vedno. 41 00:01:48,990 --> 00:01:55,820 Torej je mogoče malo pretiravanje, ampak jaz Mislim, da je zelo dobra stvar, da veš. 42 00:01:55,820 --> 00:01:57,580 >> OK, kaj je React? 43 00:01:57,580 --> 00:02:01,020 React je okvir lahko uporabljajo za gradnjo vmesnikov. 44 00:02:01,020 --> 00:02:03,240 Vmesnik je, še enkrat, spletna stran, kajne? 45 00:02:03,240 --> 00:02:06,340 Torej, tukaj je Instagram.com, uporabe React. 46 00:02:06,340 --> 00:02:08,740 >> React je zgrajena na Ideja komponent. 47 00:02:08,740 --> 00:02:11,900 Komponenta je HTML element na steroidih, 48 00:02:11,900 --> 00:02:14,470 tako HTML element je kot gumb. 49 00:02:14,470 --> 00:02:15,250 To je odstavek. 50 00:02:15,250 --> 00:02:17,500 To je v glavi, kajne? 51 00:02:17,500 --> 00:02:22,740 In Instagram bo uporabil ti, ampak bo uporabil tudi komponente React. 52 00:02:22,740 --> 00:02:25,740 >> React komponente souped-up HTML elementi 53 00:02:25,740 --> 00:02:28,100 da imajo svoje vedenje v njih. 54 00:02:28,100 --> 00:02:31,800 Tako, na primer, bi lahko imeli čas element, časovna komponenta, 55 00:02:31,800 --> 00:02:34,095 ki bo vsebovala podobno čas, žig, veste, 56 00:02:34,095 --> 00:02:37,170 komponenta profil, ki bo vsebovala sliko profila 57 00:02:37,170 --> 00:02:38,820 in ime osebe. 58 00:02:38,820 --> 00:02:42,930 Lahko ima kot števec, ki Lahko računate kot število všeč, 59 00:02:42,930 --> 00:02:45,610 in če boste kliknili na njej, se bo povečati število všeč. 60 00:02:45,610 --> 00:02:48,200 Komponenta je le kup HTML kode, ki 61 00:02:48,200 --> 00:02:50,520 ima nekaj funkcionalnosti zavit znotraj njega. 62 00:02:50,520 --> 00:02:53,770 Torej, to je kot element HTML na steroidih, kot sem rekel prej. 63 00:02:53,770 --> 00:02:56,270 Lahko te komponente, in jih lahko skupaj 64 00:02:56,270 --> 00:02:59,060 narediti nove komponente, v V tem primeru, post komponenta, 65 00:02:59,060 --> 00:03:00,505 ki vsebuje vse te stvari. 66 00:03:00,505 --> 00:03:04,050 To bi vsebovala čas, profil, LikeCounter, morda komentar 67 00:03:04,050 --> 00:03:06,100 in morda podoba sama. 68 00:03:06,100 --> 00:03:10,810 In so tako spletne aplikacije ob pravkar zgradil sestavnih delov in njihovo dajanje skupaj. 69 00:03:10,810 --> 00:03:15,620 Instagram feed ni nič več kot kup delovnih mest, ena za drugo, 70 00:03:15,620 --> 00:03:19,032 vsaka objava vsebuje kot Time, Profil, LikeCounter, in tako naprej. 71 00:03:19,032 --> 00:03:20,490 To je nekako tako kot gradnjo hiše. 72 00:03:20,490 --> 00:03:22,660 Vi ne graditi hiša od zgoraj navzdol. 73 00:03:22,660 --> 00:03:24,960 Vzameš vas components-- sprejme kot je kopalnica. 74 00:03:24,960 --> 00:03:28,320 Vzameš bedroom-- jih držijo skupaj, in imate novo komponento. 75 00:03:28,320 --> 00:03:29,760 Imate nov del hiše. 76 00:03:29,760 --> 00:03:32,860 >> Torej je reagirati vsi zgrajena okoli ta ideja o sestavnih delov, ki 77 00:03:32,860 --> 00:03:36,600 so interaktivni, ki so deklarativno. 78 00:03:36,600 --> 00:03:39,650 Tako kot si rekel, kaj je profil, in jo naredi. 79 00:03:39,650 --> 00:03:40,600 So sestavljive. 80 00:03:40,600 --> 00:03:43,880 Lahko vzamete čas in profil, dal jih skupaj, da kaj boljšega. 81 00:03:43,880 --> 00:03:47,770 In oni so za enkratno uporabo, tako da, če ste imajo izvorno kodo za delovno mesto, 82 00:03:47,770 --> 00:03:49,440 da bi lahko vgradili to kjerkoli. 83 00:03:49,440 --> 00:03:53,160 >> Lahko vlagati za Instagram stvar na svojo spletno stran. 84 00:03:53,160 --> 00:03:56,830 Lahko vlagati v Facebook, na primer, dokler jih uporablja React tudi. 85 00:03:56,830 --> 00:04:00,360 Torej, komponente so res, res, res zmogljivi gradniki spletu 86 00:04:00,360 --> 00:04:04,180 ki ga lahko uporabimo kjerkoli in čaka skupaj, da bi nove gradnike. 87 00:04:04,180 --> 00:04:07,159 To je zelo, zelo Pregled na visoki ravni. 88 00:04:07,159 --> 00:04:09,200 Torej, še enkrat, če imate vsa vprašanja, na katerikoli točki 89 00:04:09,200 --> 00:04:14,470 o filozofiji reaktorja, je kodiranje, da me ustavi in ​​mi sporočite. 90 00:04:14,470 --> 00:04:18,420 >> OK, tako reagira je kul, ker je ima drugačen način gledanja 91 00:04:18,420 --> 00:04:19,870 kako si zgraditi spletnih aplikacij. 92 00:04:19,870 --> 00:04:23,620 Verjetno ste že slišali za MVC, a Model lahko nadzorujete v CS50 ali karkoli 93 00:04:23,620 --> 00:04:25,940 drugo sondiranje razredi, ki jih uporabljate. 94 00:04:25,940 --> 00:04:29,000 In večina okviri so zgrajena okoli idejo MVC. 95 00:04:29,000 --> 00:04:30,410 React ni. 96 00:04:30,410 --> 00:04:32,980 REACT je zgrajena okoli ideje z enosmernim tokom podatkov 97 00:04:32,980 --> 00:04:36,510 kot je razvidno iz tega diagrama ali grafiko tukaj. 98 00:04:36,510 --> 00:04:38,260 >> V bistvu, imaš vir podatkov. 99 00:04:38,260 --> 00:04:42,380 In bo vir podatkov odloči, kako postaviti določene komponente. 100 00:04:42,380 --> 00:04:45,452 In komponente bodo potem, ko so spremenili, 101 00:04:45,452 --> 00:04:47,160 bodo povedal vir podatkov, da spremenite. 102 00:04:47,160 --> 00:04:49,350 >> Če želite uporabljati Instagram Na primer, boste morda morali 103 00:04:49,350 --> 00:04:52,050 seznam poštnih predmetov, kot so v podatkovni bazi ali kaj podobnega. 104 00:04:52,050 --> 00:04:53,310 Da podatkov. 105 00:04:53,310 --> 00:04:57,600 In potem so naši pošte komponente bo trajalo, da so podatki, 106 00:04:57,600 --> 00:05:01,830 in te podatke uporabi, da postane stvar na zaslonu. 107 00:05:01,830 --> 00:05:04,300 To je tisto, kar je puščica iz podatkov na komponenta, 108 00:05:04,300 --> 00:05:07,930 nato pa se uporablja isti podatki da postane kup komponent. 109 00:05:07,930 --> 00:05:10,290 >> V Facebook Messenger, za Primer, ki je React, 110 00:05:10,290 --> 00:05:13,410 boste morda morali seznam sporočila kot vir podatkov. 111 00:05:13,410 --> 00:05:15,927 In da bi postal ne Samo seznam sporočil 112 00:05:15,927 --> 00:05:17,510 pa tudi seznam prijateljev imate. 113 00:05:17,510 --> 00:05:19,200 Imate neprebrano štetje. 114 00:05:19,200 --> 00:05:23,330 Mogoče postane tudi Facebook stvar da je na dnu Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Isti podatek je edini vir resnice 116 00:05:25,610 --> 00:05:28,290 in da povzroča veliko komponente, ki se začnejo. 117 00:05:28,290 --> 00:05:30,290 In kadar eden od tistih komponente se spremeni, 118 00:05:30,290 --> 00:05:32,320 gre nazaj in spremeni vir podatkov. 119 00:05:32,320 --> 00:05:33,460 >> Pošljete sporočilo, kajne? 120 00:05:33,460 --> 00:05:34,780 Ki spreminja vir podatkov. 121 00:05:34,780 --> 00:05:39,490 Ko berete sporočila, tako nastavite neprebrano 0. 122 00:05:39,490 --> 00:05:41,136 Ki spreminja vir podatkov. 123 00:05:41,136 --> 00:05:44,010 In opazili, da se vse te ene arrow vrača na isto podatkov 124 00:05:44,010 --> 00:05:47,662 source, tako da boste vedeli, dati določen nabor podatkov, 125 00:05:47,662 --> 00:05:49,870 boste točno vedeli, kaj je Stran se bo izgledal. 126 00:05:49,870 --> 00:05:50,700 To je deterministična. 127 00:05:50,700 --> 00:05:53,451 Veš, glede nekaterih podatkov, kar stran se bo izgledal. 128 00:05:53,451 --> 00:05:56,158 Lahko napovedati, kako se dogaja, da obnašajo in kako stvari potekajo 129 00:05:56,158 --> 00:05:57,650 za delo, ko si jih dal skupaj. 130 00:05:57,650 --> 00:06:00,410 >> In če bi imel milijon komponente Tukaj bi se obnašajo enako, kajne? 131 00:06:00,410 --> 00:06:02,290 Saj ne bi imela vsaka čudne povezave. 132 00:06:02,290 --> 00:06:04,120 Eden podatki postali milijon komponent. 133 00:06:04,120 --> 00:06:06,879 Milijon komponente lahko pojdi nazaj in urejanje podatkov. 134 00:06:06,879 --> 00:06:07,920 In tako je to zelo lepo. 135 00:06:07,920 --> 00:06:10,870 Gradimo sestavljive, enostavno razširljive spletne aplikacije. 136 00:06:10,870 --> 00:06:13,150 >> Imate en vir podatkov, vir resnice. 137 00:06:13,150 --> 00:06:15,790 Da pove svoje komponente kako za postavitev strani, 138 00:06:15,790 --> 00:06:18,190 in komponente bodo ročaj interakcijo. 139 00:06:18,190 --> 00:06:20,150 In če želijo spremeniti Stvari, pojdite nazaj 140 00:06:20,150 --> 00:06:21,750 in povej vir podatkov, da spremenite. 141 00:06:21,750 --> 00:06:22,850 Ima smisel? 142 00:06:22,850 --> 00:06:26,010 Torej React je vse o razumevanju kako izdelati komponento 143 00:06:26,010 --> 00:06:29,540 in kako da bo vaše komponente interakcijo z zunanjim svetom. 144 00:06:29,540 --> 00:06:31,850 >> Izdelavo sestavnega INTERACT z zunanjim svetom 145 00:06:31,850 --> 00:06:34,490 uporablja drugo tehnologijo imenovana Flux, ki 146 00:06:34,490 --> 00:06:36,872 je okvir, ki je dodal na vrhu React. 147 00:06:36,872 --> 00:06:38,330 Ne bomo govorili o tem. 148 00:06:38,330 --> 00:06:42,990 Bomo več govorili, saj Podatki, kako lahko postane komponento? 149 00:06:42,990 --> 00:06:47,010 >> In tako React je res kul, ker vas Lahko jo uporabite s katerim koli zadnji konec, ki ga želite. 150 00:06:47,010 --> 00:06:50,480 Če imate kot Python zadnji konec, če je lahko vaš Python izpljune nekaj podatkov, 151 00:06:50,480 --> 00:06:51,610 React to lahko postane. 152 00:06:51,610 --> 00:06:54,700 Če ste brez JS izhodi podatkov, React to postane. 153 00:06:54,700 --> 00:06:56,890 Ruby ograje z Podatki, React to postane. 154 00:06:56,890 --> 00:07:01,860 >> Torej React je v bistvu web view-- prednji konec s komponentami 155 00:07:01,860 --> 00:07:03,910 za katerikoli vir podatkov whatsoever. 156 00:07:03,910 --> 00:07:07,145 In tako gredo iz vira podatkov za reagirajo komponent je zelo enostavno. 157 00:07:07,145 --> 00:07:08,770 Gredo v drugo smer, je malo težje. 158 00:07:08,770 --> 00:07:10,462 Ki uporablja Flux kot sem prej omenil. 159 00:07:10,462 --> 00:07:11,420 Ne bomo dobili v tem. 160 00:07:11,420 --> 00:07:13,740 Bomo bolj osredotočiti na Podatki do sestavnega strani. 161 00:07:13,740 --> 00:07:15,880 Na ta način si lahko kul, zabava spletne aplikacije. 162 00:07:15,880 --> 00:07:19,870 To ne bo vplivalo na zunanji svet za zdaj, ampak to je že druga zgodba. 163 00:07:19,870 --> 00:07:22,210 >> OK, tako da, če ste bili tu za moj zadnji seminar 164 00:07:22,210 --> 00:07:26,610 boste vedeli, da je vse kode za današnja Pogovor se bo na tem URL 165 00:07:26,610 --> 00:07:29,320 tukaj, žal, ta URL tukaj. 166 00:07:29,320 --> 00:07:32,730 In v bistvu smo šli skozi štiri korake, morda pet, 167 00:07:32,730 --> 00:07:33,510 Verjetno ne pet. 168 00:07:33,510 --> 00:07:37,300 Bomo premikate skozi štirih korakih izgradnje vzorec React aplikacijo. 169 00:07:37,300 --> 00:07:39,550 In tako vse source kodo Za vsak korak poti 170 00:07:39,550 --> 00:07:42,216 se bo prav tukaj, tako da, če ste po skupaj doma, 171 00:07:42,216 --> 00:07:43,991 vas prosimo, da se seznanijo z vsebino tega kodeksa. 172 00:07:43,991 --> 00:07:46,740 Če ste po skupaj tukaj, bomo ga prikazuje na zaslonu, 173 00:07:46,740 --> 00:07:47,739 tako da ne skrbi. 174 00:07:47,739 --> 00:07:50,930 Ampak, če ste doma, občutek prosimo, da obiščete to spletno stran. 175 00:07:50,930 --> 00:07:56,400 In, ja, bi morali imeti možnost, da bi dobili Vse kode boš kdaj potrebovali tukaj. 176 00:07:56,400 --> 00:08:01,380 Torej, to je dobra goljufija stanja kot tudi za prihodnje avanture z React. 177 00:08:01,380 --> 00:08:04,490 Kul, tako da, če vsak, ki je tukaj, in tudi če ste doma, 178 00:08:04,490 --> 00:08:11,580 dvigni te spletne strani, is.gd/cs50react, ni kapital, ne podčrtaj, ni nič. 179 00:08:11,580 --> 00:08:15,849 >> Videli boste stran, ki izgleda malo, kot je ta. 180 00:08:15,849 --> 00:08:17,140 To je stvar, ki se imenuje CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen je sodelovalno kodiranje okolje 182 00:08:20,030 --> 00:08:23,364 s katero sem lahko pišete kodo tukaj, in se bo samodejno poslan k tebi. 183 00:08:23,364 --> 00:08:24,780 In na ta način, ne morem napisati kodo. 184 00:08:24,780 --> 00:08:26,920 Ne morem zagnati kodo tukaj. 185 00:08:26,920 --> 00:08:33,470 >> Za example-- in če reloads-- glej, Tečem JavaScript kodo na strani 186 00:08:33,470 --> 00:08:36,390 tukaj, in ga bomo samodejno onemogočijo spletno stran 187 00:08:36,390 --> 00:08:37,980 s to kodo JavaScript. 188 00:08:37,980 --> 00:08:40,039 In tako je to način za nas, da preizkusite kodo 189 00:08:40,039 --> 00:08:43,089 res hitro brez uporabe naša ID ali uporabite naš lokalni stroj 190 00:08:43,089 --> 00:08:44,290 ali karkoli. 191 00:08:44,290 --> 00:08:47,670 To je zelo hiter način za vas, da ponarejen in preizkusiti različne kode. 192 00:08:47,670 --> 00:08:50,560 >> Tako da bom, da se ob primer kode, ki ga je dala tukaj. 193 00:08:50,560 --> 00:08:52,374 Bomo, da bodo delali z njim. 194 00:08:52,374 --> 00:08:54,540 In če ste doma, vam to lahko dvigni kot dobro. 195 00:08:54,540 --> 00:08:57,530 In sem že nameščen React tukaj, tako da si lahko samo 196 00:08:57,530 --> 00:09:00,770 napisati svojo kodo tukaj, in poskusite kot svojo lastno igrišče. 197 00:09:00,770 --> 00:09:04,940 >> Ja, če bi vsi na odpirajo to povezavo tukaj. 198 00:09:04,940 --> 00:09:08,080 Prosim, daj mi thumbs gor, ko imate odprto. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Cool, cool cool. 201 00:09:13,770 --> 00:09:16,914 Nič ni tukaj zdaj, ampak bomo spremenili, da zelo kmalu. 202 00:09:16,914 --> 00:09:21,250 >> OK, tako React je JavaScript knjižnica, in kot take, 203 00:09:21,250 --> 00:09:24,480 zahteva poznavanje JavaScript, ki je spletno programiranje jezik. 204 00:09:24,480 --> 00:09:27,660 In to je, ki se uporabljajo za druge stvari zdaj preveč, ampak predvsem web razvoj 205 00:09:27,660 --> 00:09:32,040 jezik, tako da, če ste seznanjeni z da, preberite spletno stran, imenovano JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 Čudovito je. 207 00:09:32,700 --> 00:09:34,240 Lahko se učijo JavaScript Čez pol ure. 208 00:09:34,240 --> 00:09:34,990 To je neverjetno. 209 00:09:34,990 --> 00:09:36,420 >> Tako da ga brati. 210 00:09:36,420 --> 00:09:39,960 Prav tako je veliko HTML tu zaradi smo oblikovanje spletnih strani, seveda. 211 00:09:39,960 --> 00:09:43,890 Torej, če ste seznanjeni z HTML, preverite HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Mislim, da je učenje React je milijon krat lažje, če že 213 00:09:46,520 --> 00:09:47,892 poznati gradnike. 214 00:09:47,892 --> 00:09:50,600 Če imate komponente, to je lahkoto doseže večjo komponento. 215 00:09:50,600 --> 00:09:51,860 To je React jezik za vas. 216 00:09:51,860 --> 00:09:54,270 >> Torej, pojdi naprej in da te stvari za branje. 217 00:09:54,270 --> 00:09:55,070 Premor ta video. 218 00:09:55,070 --> 00:09:57,440 Daj mu branje, če ste doma, če niste 219 00:09:57,440 --> 00:10:00,794 seznanjeni s HTML in JavaScript 220 00:10:00,794 --> 00:10:02,960 OK, kaj bomo storiti, se bomo, da bi 221 00:10:02,960 --> 00:10:06,470 zelo osnovna flashcard app uporabo React. 222 00:10:06,470 --> 00:10:08,210 Bomo imeli flashcard. 223 00:10:08,210 --> 00:10:09,880 Lahko flip kartico in nazaj. 224 00:10:09,880 --> 00:10:12,399 In bomo imeli tudi seznam vse karte, ki jih imamo, 225 00:10:12,399 --> 00:10:14,190 in če smo občutek ambiciozni, smo lahko 226 00:10:14,190 --> 00:10:17,060 sposoben preklapljati med avtomobili s klikom na njih. 227 00:10:17,060 --> 00:10:20,360 >> Ampak to je, vaše bare kosti, zelo preprost React aplikacijo. 228 00:10:20,360 --> 00:10:22,560 In zato je to dejansko ni nepomembno za izvajanje, 229 00:10:22,560 --> 00:10:26,030 ampak bomo pokazati, da, če vam to, da je zelo, zelo enostaven, da ga razširi 230 00:10:26,030 --> 00:10:27,680 če vas drugi ljudje pomagajo z njim. 231 00:10:27,680 --> 00:10:33,750 Tako smo šli skozi štiri korake Začenjamo iz nič zgraditi to. 232 00:10:33,750 --> 00:10:36,740 >> Ok, tako da štiri korake, da bomo začeli s prvim korakom. 233 00:10:36,740 --> 00:10:39,790 Prvi korak se bo gradi svojo prvo komponento. 234 00:10:39,790 --> 00:10:44,830 Kot sem že prej povedal, komponenta v React je samo HTML element na steroidih. 235 00:10:44,830 --> 00:10:49,660 Določa HTML in nekateri vedenje, in 236 00:10:49,660 --> 00:10:52,600 bo določal, kako ljudje lahko interakcijo s tem, kako 237 00:10:52,600 --> 00:10:54,270 da bi imela notranje stanje. 238 00:10:54,270 --> 00:10:57,630 Tako kot bo gumb vedeti, kot je, koliko krat pa je bil kliknili na primer, 239 00:10:57,630 --> 00:11:01,010 in bo vedel, kako se postaviti ven. 240 00:11:01,010 --> 00:11:04,430 >> Torej, gremo naprej in graditi naše Prva komponenta uporabo JavaScript. 241 00:11:04,430 --> 00:11:09,711 Torej, če je sintaksa videti čudno, to je zato, ker nekako je. 242 00:11:09,711 --> 00:11:11,710 Torej, še enkrat, gremo da bi spremenljivko 243 00:11:11,710 --> 00:11:14,580 app uporabo ključnih besed pustil, ki naredi spremenljivko, 244 00:11:14,580 --> 00:11:18,210 Naj App enako React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> React je knjižnica in ima create funkcijo razred. 246 00:11:22,609 --> 00:11:24,400 In ta funkcija malo kode, ki vam 247 00:11:24,400 --> 00:11:29,090 lahko uporabite za ustvarjanje nov vrsta React komponento. 248 00:11:29,090 --> 00:11:32,780 In tako React.createClass si komponento, 249 00:11:32,780 --> 00:11:35,270 in ta komponenta bo biti sposoben narediti stvari. 250 00:11:35,270 --> 00:11:40,460 Glavna stvar, ki jo lahko naredimo, je postala nekaj, naredi kot funkcijo. 251 00:11:40,460 --> 00:11:44,500 >> Še enkrat, če je ta indeks ni očitno, da vi, vam priporočam, da greš na JS za mačke 252 00:11:44,500 --> 00:11:45,682 in ga preverite. 253 00:11:45,682 --> 00:11:47,710 Je to Povečano dovolj dobro? 254 00:11:47,710 --> 00:11:48,490 Cool. 255 00:11:48,490 --> 00:11:50,670 >> Zato je vsak sestavni potrebe imeti upodabljanje funkcijo. 256 00:11:50,670 --> 00:11:53,010 Funkcija postane pravi, kaj tiskam na zaslonu? 257 00:11:53,010 --> 00:11:54,760 Toda komponenta neuporabna, če se to ne zgodi 258 00:11:54,760 --> 00:11:58,060 Vedeti, kaj natisniti na zaslonu, tako da morate imeti upodabljanje funkcijo. 259 00:11:58,060 --> 00:12:01,904 >> Torej, v ometa stvar, vi Samo je treba vrniti nekaj HTML. 260 00:12:01,904 --> 00:12:03,820 In kaj je kul je to tam je stvar imenovano 261 00:12:03,820 --> 00:12:08,660 JSX, ki je podaljšek JavaScript, ki se jih uporablja reagirati. 262 00:12:08,660 --> 00:12:11,845 To dovolimo, pišete HTML v notranjosti vaš JavaScript, ki 263 00:12:11,845 --> 00:12:13,970 Sliši se čudno, ko najprej pomislim, 264 00:12:13,970 --> 00:12:15,553 vendar naredi veliko smisla pozneje. 265 00:12:15,553 --> 00:12:17,430 Tako da bomo lahko to storili. 266 00:12:17,430 --> 00:12:21,360 Če ste seznanjeni s HTML, vem imamo div s splošnim namenom 267 00:12:21,360 --> 00:12:22,790 Posoda za stvari. 268 00:12:22,790 --> 00:12:26,380 Mi lahko vrnete div, in v notranjosti ta div, lahko postavimo stvari. 269 00:12:26,380 --> 00:12:32,390 >> Torej, recimo, da želimo samo render naravnost-up flashcard za zdaj. 270 00:12:32,390 --> 00:12:34,890 Flashcard, bi rekel, bo imel vprašanje in odgovor. 271 00:12:34,890 --> 00:12:37,530 Torej znotraj tega div, dajmo izpisal odstavek 272 00:12:37,530 --> 00:12:42,155 ki pravi question-- Kaj je Končni odgovor na življenje, vesolje? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 In potem je odgovor bo, seveda, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Da niso prišli do dobro sploh. 277 00:12:59,730 --> 00:13:04,164 Ja, tako da v bistvu lahko res pisati HTML v vašem JavaScript. 278 00:13:04,164 --> 00:13:06,330 In to se bo natisne v zaslon. 279 00:13:06,330 --> 00:13:08,250 Torej, dajmo ga preizkusite. 280 00:13:08,250 --> 00:13:09,520 >> Torej imamo komponento. 281 00:13:09,520 --> 00:13:12,210 Moramo povedati, React postaviti komponenta na zaslonu 282 00:13:12,210 --> 00:13:18,990 tako React.render, tako opazili, da smo zdravljenje aplikacijo kot kateri koli drug element. 283 00:13:18,990 --> 00:13:21,010 Smo ga napisali, kot je bilo HTML element. 284 00:13:21,010 --> 00:13:25,100 Like, namesto da bi rekel, kot img za sliko ali p za odstavkom, 285 00:13:25,100 --> 00:13:28,120 pišete aplikacijo, zato App je obravnavati kot element HTML. 286 00:13:28,120 --> 00:13:30,380 Kot sem že prej povedal, da je element na steroidih. 287 00:13:30,380 --> 00:13:32,870 >> Tako da postane App, in si izročiti to mesto, da ga proda. 288 00:13:32,870 --> 00:13:37,170 In to je, kako lahko je povedal, kje ga dal. 289 00:13:37,170 --> 00:13:46,200 Jaz sem ustvaril preprost div na Stran se imenuje z ID strani 290 00:13:46,200 --> 00:13:48,300 in da je, kjer je element bo šlo. 291 00:13:48,300 --> 00:13:49,841 >> In ne bomo teči s HTML. 292 00:13:49,841 --> 00:13:53,145 V bistvu to se dogaja, da bi dobili dal notri te strani elementa 293 00:13:53,145 --> 00:13:54,270 da imamo na zaslonu. 294 00:13:54,270 --> 00:13:59,210 Torej teče to kodo, in črpa ta stvar na zaslonu, tako da tukaj smo. 295 00:13:59,210 --> 00:14:01,770 Naredili smo našo prvo reagirajo komponento. 296 00:14:01,770 --> 00:14:08,000 >> Torej samo kot Rekapitulacija, nežno je nov tip sestavnega dela, kajne? 297 00:14:08,000 --> 00:14:10,145 To je tisto, kar React.createClass. 298 00:14:10,145 --> 00:14:12,680 In s tem, da komponenta, smo je povedal, kaj naj stori. 299 00:14:12,680 --> 00:14:15,590 Kadar se ta komponenta je biti natisnjeni na zaslonu, 300 00:14:15,590 --> 00:14:19,300 se bo izpisal div s dve točki znotraj nje. 301 00:14:19,300 --> 00:14:24,460 >> In kaj smo naredili, smo naredili novo aplikacijo uporabi kot nosilec app zapis. 302 00:14:24,460 --> 00:14:27,160 To smo povedali, da ga notranjosti stran elementa. 303 00:14:27,160 --> 00:14:29,867 In kaj sem storil, je ustvaril nova app iz te predloge. 304 00:14:29,867 --> 00:14:31,200 In potem sem rekel, da jo onemogočijo. 305 00:14:31,200 --> 00:14:33,680 Tako je rekel, OK, app, kaj moram natisniti? 306 00:14:33,680 --> 00:14:36,970 App pravi, pojdi natisnete div z dveh točkah znotraj nje. 307 00:14:36,970 --> 00:14:40,420 In voila, tam je naša div z dva odstavka znotraj nje. 308 00:14:40,420 --> 00:14:43,180 Smisla tako daleč? 309 00:14:43,180 --> 00:14:46,690 >> Torej, še enkrat, celoten izziv React je samo ne vedo, kako narediti komponent. 310 00:14:46,690 --> 00:14:48,500 Kako narediti komponente delujejo skupaj. 311 00:14:48,500 --> 00:14:51,780 Zdaj, ko smo naredili naš prvi komponenta, pojdimo nazaj 312 00:14:51,780 --> 00:14:54,284 in da komponente prilagodljiv. 313 00:14:54,284 --> 00:14:56,700 Tako da boste vedeli, kako v HTML vas lahko dajo svoje gumbe razrede? 314 00:14:56,700 --> 00:14:59,146 Lahko bi vaše sidra za href. 315 00:14:59,146 --> 00:15:00,770 Lahko bi vaši vložki tipa, kajne? 316 00:15:00,770 --> 00:15:04,740 Lahko bi več po meri lastnosti za vse vaše elemente 317 00:15:04,740 --> 00:15:06,490 da bi bilo bolj zanimivo. 318 00:15:06,490 --> 00:15:09,030 In bomo dejansko lahko storite točno isto stvar. 319 00:15:09,030 --> 00:15:17,500 >> Torej, recimo, da želimo, da naši app iti postanejo vse kartice. 320 00:15:17,500 --> 00:15:19,630 Zdaj smo samo izdalo hardcoded kartico. 321 00:15:19,630 --> 00:15:22,530 Vemo, da obstaja samo ena kartico je mogoče storiti, zato smo 322 00:15:22,530 --> 00:15:25,960 bo poskušal spremeniti to zdaj tako da lahko samo da ga neko kartico. 323 00:15:25,960 --> 00:15:27,410 To bo izpisal kartico. 324 00:15:27,410 --> 00:15:29,380 >> Ti bi morali poskusiti in narediti vaš komponente zelo splošno rabo. 325 00:15:29,380 --> 00:15:31,654 Torej, na ta način sem lahko po e-pošti to je moj prijatelj in biti všeč, 326 00:15:31,654 --> 00:15:33,820 karkoli flashcard imate, samo krma v tukaj, 327 00:15:33,820 --> 00:15:35,290 in to bom naredil sam. 328 00:15:35,290 --> 00:15:37,650 Vi lahko postavite drugo stvari v vašem app. 329 00:15:37,650 --> 00:15:40,600 >> Ampak najprej, kaj je prekinil to gor v dve komponenti, 330 00:15:40,600 --> 00:15:44,500 vendar želimo ločiti kartico tiskanje del od dejanskega app del. 331 00:15:44,500 --> 00:15:46,660 Torej, kaj lahko storimo, je, da smo To lahko spremenite iz App 332 00:15:46,660 --> 00:15:51,300 da CardView, samo Novo ime za aplikacijo, 333 00:15:51,300 --> 00:15:54,450 in lahko naredimo nov komponenta se imenuje App, 334 00:15:54,450 --> 00:15:56,336 ne sme zamenjevati s starim App. 335 00:15:56,336 --> 00:16:00,730 Imamo tudi createClass, in tako kot v HTML, 336 00:16:00,730 --> 00:16:03,590 lahko gnezdo React komponente Notranjost seboj. 337 00:16:03,590 --> 00:16:16,430 >> Torej, v tem opravljali funkcijo, Funkcija povratnega CardView, 338 00:16:16,430 --> 00:16:18,234 in to je točno isto stvar. 339 00:16:18,234 --> 00:16:19,400 Oglejte si, zakaj je to ista stvar? 340 00:16:19,400 --> 00:16:22,590 Namesto klavniških samo aplikacijo, ki ima div in seznanjanje znotraj njega, 341 00:16:22,590 --> 00:16:26,194 Aplikaciji povzroči, CardView in CardView povzroči, div in odstavek. 342 00:16:26,194 --> 00:16:29,110 Torej, to je naš prvi primer gnezdenje elementov znotraj drug od drugega. 343 00:16:29,110 --> 00:16:32,177 Ali to smiselno? 344 00:16:32,177 --> 00:16:33,760 Torej, še enkrat, imamo CardView element. 345 00:16:33,760 --> 00:16:37,250 Imamo app elemente da je večji od. 346 00:16:37,250 --> 00:16:40,990 >> OK, zato želimo naše CardView-- če vas Daj dobro CardView neko kartico, 347 00:16:40,990 --> 00:16:43,370 to bo izpisal zate, kajne? 348 00:16:43,370 --> 00:16:48,050 Torej, najprej moramo narediti kartico, tako da je narediti predmet kartice. 349 00:16:48,050 --> 00:17:02,930 Torej mojo vizitko equal-- če ste vsi seznanjeni, 350 00:17:02,930 --> 00:17:05,260 to je samo zapis-making ugovarja v JavaScript. 351 00:17:05,260 --> 00:17:09,280 To je nekako kot struct v C, zato smo naredili kartico, 352 00:17:09,280 --> 00:17:15,920 in zdaj smo lahko prenese to kartico kot lastnost ali atribut v HTML 353 00:17:15,920 --> 00:17:17,290 terminologija na naš app. 354 00:17:17,290 --> 00:17:20,210 Tako da lahko naredimo to, App kartica enaka myCard. 355 00:17:20,210 --> 00:17:23,200 >> Saj veš, kako je v vhod, vam Vrsta vhoda enaka besedilo ali gumb 356 00:17:23,200 --> 00:17:25,240 Razred je enaka BTN za bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Isto idejo, App kartica equals-- moraš dati naramnice here-- 358 00:17:29,500 --> 00:17:33,830 App kartica enaka myCard, tako da to pravi, da imamo ta predmet kartice. 359 00:17:33,830 --> 00:17:39,149 Jaz grem, da ga prenese kot nepremičnina na komponento aplikacije. 360 00:17:39,149 --> 00:17:41,440 In to app komponenta bo mogli dostopati do njega in ne 361 00:17:41,440 --> 00:17:43,580 zanimive stvari z njim. 362 00:17:43,580 --> 00:17:47,650 >> Torej naš app se bo dal kartico, tako da za zdaj, 363 00:17:47,650 --> 00:17:49,980 dajmo imate aplikacijo samo dati kartica na CardView 364 00:17:49,980 --> 00:17:53,110 sama po sebi, saj tako kot app ni dogaja, da vedo, kaj storiti z njim, 365 00:17:53,110 --> 00:17:54,850 tako da bomo samo dati CardView. 366 00:17:54,850 --> 00:18:00,050 Torej ga bomo na prehod enak način, kartica je enaka, 367 00:18:00,050 --> 00:18:05,426 in tako lahko vsaka komponenta dostop do stvari, ki je bila namenjena njej. 368 00:18:05,426 --> 00:18:07,800 Prav tako lahko dostopate do lastnosti da so dajali njim 369 00:18:07,800 --> 00:18:09,470 uporabo te sintakse, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Torej, kaj se zgodi, tukaj je imate myCard predmet. 372 00:18:14,920 --> 00:18:18,250 Vam preide v app uporabo App kartico enaka myCard. 373 00:18:18,250 --> 00:18:21,420 Ta predmet kartica je namenjena za vašo aplikacijo. 374 00:18:21,420 --> 00:18:24,400 Aplikacija je dostopna kot this.props.card. 375 00:18:24,400 --> 00:18:28,780 To je nekako tako kot na sliki ve, kaj je to vir. 376 00:18:28,780 --> 00:18:31,972 >> Ta aplikacija ne ve, kaj je to kartica je, in to lahko naredimo stvari z njim. 377 00:18:31,972 --> 00:18:32,930 To lahko storite izračune. 378 00:18:32,930 --> 00:18:35,290 To lahko sprejemajo odločitve, ki temeljijo off od tega. 379 00:18:35,290 --> 00:18:39,950 >> Za zdaj sem bil tekoč, da prenese this.props.card na CardView. 380 00:18:39,950 --> 00:18:43,420 Smisla tako daleč? 381 00:18:43,420 --> 00:18:45,210 To bo bolj smiselno zdaj. 382 00:18:45,210 --> 00:18:46,990 >> OK, zdaj smo na CardView. 383 00:18:46,990 --> 00:18:51,719 Naša CardView, dal kartico, bi morala izpisal njegovo vprašanje in odgovor. 384 00:18:51,719 --> 00:18:54,510 Zdaj smo samo izpisal nekaj hardcoded vprašanja in odgovori. 385 00:18:54,510 --> 00:18:57,720 Moramo ugotoviti out-- moramo vprašati kartice, ki so nam dali 386 00:18:57,720 --> 00:19:01,360 kaj je vprašanje in odgovor, ter nato natisnete to ven na zaslonu. 387 00:19:01,360 --> 00:19:02,470 >> Tako bomo lahko to storite tukaj. 388 00:19:02,470 --> 00:19:06,135 V render begin-- najprej narediti enako. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Torej, kaj delamo tukaj je, vemo, da kartice so nam dana za nepremičnino, 391 00:19:13,050 --> 00:19:13,580 prav? 392 00:19:13,580 --> 00:19:15,930 To nam je dal kot vložek. 393 00:19:15,930 --> 00:19:19,440 Kot da je skoraj kot argumenti funkcije. 394 00:19:19,440 --> 00:19:22,810 Kartica je argument skoraj do tega CardView. 395 00:19:22,810 --> 00:19:25,239 >> Bomo ekstrakt to, in dal je v spremenljivo vprašanje. 396 00:19:25,239 --> 00:19:27,280 Prepričajte se, da je odgovor šla spremenljivemu odgovor. 397 00:19:27,280 --> 00:19:31,130 Pozove, da kartica odgovoriti. 398 00:19:31,130 --> 00:19:35,072 In zdaj, ko imamo to, namesto tiskanje to besedilo, 399 00:19:35,072 --> 00:19:37,030 bomo, da natisnete kar so nam dali. 400 00:19:37,030 --> 00:19:43,580 >> Torej, to stuff-- zato bomo pogasiti odgovarjati. 401 00:19:43,580 --> 00:19:46,380 Poglejmo, če to deluje. 402 00:19:46,380 --> 00:19:52,800 Kul, tako da je korak skozi njo še enkrat, samo da se prepričajte. 403 00:19:52,800 --> 00:20:00,470 >> Torej, moja kartica je objekt kartice, in smo dajejo to kartico v app. 404 00:20:00,470 --> 00:20:04,790 In app se bo trajalo kartico in jo dal na CardView. 405 00:20:04,790 --> 00:20:09,190 In to CardView pravi, če vas dajte mi nobene flashcard predmet, 406 00:20:09,190 --> 00:20:11,920 Bom izpisal svoje vprašanje in njegov odgovor, kajne? 407 00:20:11,920 --> 00:20:14,590 >> Torej, kaj lahko storim je, da sem lahko pošiljanje to kodo, prvi 408 00:20:14,590 --> 00:20:16,580 kot 10 vrstic moje kode, do mojega prijatelja. 409 00:20:16,580 --> 00:20:18,820 On bi ga vgradili v svoje vloge. 410 00:20:18,820 --> 00:20:27,200 In tako dolgo, kot je to storil isto stvar, kot CardView kartica enaka tem, 411 00:20:27,200 --> 00:20:30,580 Dokler je ustvaril CardView in mu dali prave informacije, 412 00:20:30,580 --> 00:20:31,987 je lahko render svojo kartico. 413 00:20:31,987 --> 00:20:34,320 In tako na ta način, da je to res kul način za vas, da gradijo 414 00:20:34,320 --> 00:20:35,906 komponente, ki uporabljajo drug drugega, kajne? 415 00:20:35,906 --> 00:20:38,280 Ta kartica, lahko objavim to CardView na internetu, 416 00:20:38,280 --> 00:20:39,790 in ljudje bi mogli uporabljati. 417 00:20:39,790 --> 00:20:45,070 Torej v bistvu, je kot enega izmed standardne funkcije v knjižnici C. 418 00:20:45,070 --> 00:20:47,280 >> To je funkcija kjer kdo ga je napisal. 419 00:20:47,280 --> 00:20:48,419 Daš določen vhod. 420 00:20:48,419 --> 00:20:49,710 To bo proizvodnjo določene izhod. 421 00:20:49,710 --> 00:20:50,890 Vam ni mar, kako to deluje interno. 422 00:20:50,890 --> 00:20:53,790 Dokler boste izročiti to pravico vhod, bo to, da pravega rezultata. 423 00:20:53,790 --> 00:20:57,850 >> In komponento lahko pomislili na enak način. 424 00:20:57,850 --> 00:21:00,280 To CardView je všeč funkcija knjižnica. 425 00:21:00,280 --> 00:21:03,400 Če mu daš nekaj kartice kot nepremičnine, bo to 426 00:21:03,400 --> 00:21:05,095 izpisal vsebino te kartice. 427 00:21:05,095 --> 00:21:16,820 Like, če spremenim mojo kartico namesto da bi bilo všeč, kar je 5 plus 37, 428 00:21:16,820 --> 00:21:19,210 bo ustrezno posodobiti. 429 00:21:19,210 --> 00:21:21,955 Torej samo s spreminjanjem vhod, da dobi neko moč. 430 00:21:21,955 --> 00:21:24,830 Torej si lahko zamislite komponent skoraj kot funkcije na ta način, kar 431 00:21:24,830 --> 00:21:25,920 lahko skupaj. 432 00:21:25,920 --> 00:21:29,440 Dobiš vložek, kot je ta CardView kot vhod, dobiš izhod. 433 00:21:29,440 --> 00:21:31,900 V tem primeru, izhod je HTML. 434 00:21:31,900 --> 00:21:34,404 Smisla tako daleč? 435 00:21:34,404 --> 00:21:36,890 Kul, tako da še enkrat, lastnosti so kako lahko prenese podatke 436 00:21:36,890 --> 00:21:40,900 v in iz komponent. 437 00:21:40,900 --> 00:21:42,740 >> OK, tako da je, da je to stvar interaktivno. 438 00:21:42,740 --> 00:21:44,450 Zdaj je nekako dolgočasno. 439 00:21:44,450 --> 00:21:45,520 Kaj je [neslišno]? 440 00:21:45,520 --> 00:21:48,210 Lahko natisnete nekaj ven, ampak to je vse, kar lahko storite. 441 00:21:48,210 --> 00:21:51,550 >> Torej, vrnimo se k staro vprašanje samo za zdaj. 442 00:21:51,550 --> 00:21:54,405 OK, zdaj te komponente so dolgočasni, saj vse, kar so storili, 443 00:21:54,405 --> 00:21:55,030 dobijo vhod. 444 00:21:55,030 --> 00:21:56,100 Zaradi njih izhod, kajne? 445 00:21:56,100 --> 00:21:57,049 To je nekako dolgočasno. 446 00:21:57,049 --> 00:21:59,090 Želimo, da so naši komponente, da bi lahko imeli 447 00:21:59,090 --> 00:22:02,150 nekakšen notranjega stanja, kot kaj zapomniti. 448 00:22:02,150 --> 00:22:05,320 >> Za flashcard za Na primer, kakšno stanje 449 00:22:05,320 --> 00:22:07,550 Morda želite zapomnili za flashcard? 450 00:22:07,550 --> 00:22:09,740 Kaj začasnega statusa Morda boste želeli, da se spomnimo 451 00:22:09,740 --> 00:22:12,491 za flashcard v flashcard app? 452 00:22:12,491 --> 00:22:13,990 OBČINSTVO: Ali je bilo zrcaljeno? 453 00:22:13,990 --> 00:22:14,990 Neel Mehta: Ja, seveda. 454 00:22:14,990 --> 00:22:17,665 Tako boste morda želeli obdržati tir ste soočiti ali so 455 00:22:17,665 --> 00:22:19,100 vam obrnjena navzdol na kartici. 456 00:22:19,100 --> 00:22:23,420 Na Facebooku, na primer, bi si želi spomniti, kje na novice krme 457 00:22:23,420 --> 00:22:25,870 ste ali želi kdo je profil delaš prav zdaj. 458 00:22:25,870 --> 00:22:30,127 >> Na Messenger, kot tisto besedilo vas vnesete v vnosno polje, kajne? 459 00:22:30,127 --> 00:22:31,710 Če ste osvežite stran, da gre proč. 460 00:22:31,710 --> 00:22:32,793 Ampak ti res ne skrbi. 461 00:22:32,793 --> 00:22:33,770 To je samo začasno. 462 00:22:33,770 --> 00:22:34,548 Ja? 463 00:22:34,548 --> 00:22:36,152 >> OBČINSTVO: [neslišno] 464 00:22:36,152 --> 00:22:38,360 Neel Mehta: Kot bliskavico kartica, kot ste lahko videli 465 00:22:38,360 --> 00:22:40,290 Vprašanje stran ali stran, odgovor? 466 00:22:40,290 --> 00:22:41,070 >> OBČINSTVO: OK. 467 00:22:41,070 --> 00:22:43,270 >> Neel Mehta: Like Obojestranski flashcard, kajne? 468 00:22:43,270 --> 00:22:46,370 Ja, tako da boste želeli imajo to idejo zdaj 469 00:22:46,370 --> 00:22:50,370 Imam lastnosti, ki se je kot vložke, ampak stanje, ki je začasna, uh, 470 00:22:50,370 --> 00:22:51,839 kje ste na strani, kajne? 471 00:22:51,839 --> 00:22:54,380 Spet sem dejal v Facebook Messenger, imam podobno, kar oseba 472 00:22:54,380 --> 00:22:56,550 gledate Facebook ali kdo je profil, kajne? 473 00:22:56,550 --> 00:22:58,030 >> To je le začasno. 474 00:22:58,030 --> 00:23:01,200 Pomembno je, da se uporabniku prikaže kaj se dogaja, vendar se osvežite stran. 475 00:23:01,200 --> 00:23:02,250 To sploh ni pomembno. 476 00:23:02,250 --> 00:23:04,530 Torej, to je začasno stanje, tako da bomo vse, kar je stanje. 477 00:23:04,530 --> 00:23:06,250 >> Torej, še enkrat, tam je stanje in rekviziti. 478 00:23:06,250 --> 00:23:09,084 Props je podan vhod od svojega vira podatkov. 479 00:23:09,084 --> 00:23:10,250 Država je tako kot privzete. 480 00:23:10,250 --> 00:23:13,700 To je tako kot stvari, ki naredi stvar interaktivno. 481 00:23:13,700 --> 00:23:17,720 >> Torej v našem CardView-- Imejmo naše CardView-- tako da je bilo lepo. 482 00:23:17,720 --> 00:23:21,420 Kaj bomo storili tu, gremo na dotik CardView in samo CardView. 483 00:23:21,420 --> 00:23:25,105 In tako je moj prijatelj, ki je dobil to, so ne bi opazili nobene razlike. 484 00:23:25,105 --> 00:23:27,230 Ti ne bi bilo treba spremeniti koli od lastne oznake, 485 00:23:27,230 --> 00:23:29,410 vendar bi vidijo svoje CardView dobil souped up. 486 00:23:29,410 --> 00:23:31,270 To je lep del o komponentah. 487 00:23:31,270 --> 00:23:35,290 >> OK, tako da v našem CardView, poskusimo in spremljate, ali bomo postopoma navzgor 488 00:23:35,290 --> 00:23:36,560 ali navzdol. 489 00:23:36,560 --> 00:23:40,480 V React to storimo tako, da najprej določitvijo začetnega stanja. 490 00:23:40,480 --> 00:23:42,070 Kje se kartica začeti? 491 00:23:42,070 --> 00:23:48,480 >> Torej bo funkcijo imenovano getInitialState deluje, in se bomo vrnili predmet. 492 00:23:48,480 --> 00:23:53,310 Ta objekt vsebuje neko stanje, in država je samo par ključna vrednost. 493 00:23:53,310 --> 00:23:56,950 Kot v naroči, imate ključ in vrednost, imate kot ime je niz. 494 00:23:56,950 --> 00:24:01,410 >> V tem primeru, recimo, spredaj je res. 495 00:24:01,410 --> 00:24:03,760 Ta pravi, da imamo državo. 496 00:24:03,760 --> 00:24:06,570 Ena komponenta stanju je atribut imenovan spredaj. 497 00:24:06,570 --> 00:24:09,649 [Neslišno], tako da ga privzeto, smo na sprednji strani kartice, 498 00:24:09,649 --> 00:24:11,440 in bomo lahko to spremenili kot smo flip kartico. 499 00:24:11,440 --> 00:24:13,380 Ima smisel? 500 00:24:13,380 --> 00:24:18,190 >> OK, tako da v render, prav zdaj, smo prikazuje vprašanje in odgovor. 501 00:24:18,190 --> 00:24:20,860 Zdaj, kaj moramo storiti se kažejo na vprašanje 502 00:24:20,860 --> 00:24:24,370 če smo na sprednji strani kartice tako Odgovor je na hrbtni strani kartice. 503 00:24:24,370 --> 00:24:26,850 Zato si vsi delamo kartica interaktivno. 504 00:24:26,850 --> 00:24:28,100 Torej, kaj je poskusiti in to tukaj. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 No, najprej samo da spremenljivko. 507 00:24:33,620 --> 00:24:37,790 Mi lahko vprašam this.state.front. 508 00:24:37,790 --> 00:24:42,010 Mi dostop navajajo enako smo rekviziti za dostop, tako this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Če smo spredaj, nato pa besedilo je this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Če smo na sprednji strani card, bomo poskušali grab 512 00:24:51,360 --> 00:24:52,485 Vprašanje s kartice. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 V nasprotnem primeru, če smo na hrbtni strani kartice, kaj naj naredimo? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> OBČINSTVO: Odgovor? 517 00:25:02,750 --> 00:25:05,041 >> Neel Mehta: Ja, tako besedilo enaka this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Ampak, če ste opazili, smo s pomočjo država, da bi odločitev 520 00:25:10,930 --> 00:25:14,420 ker je postal sestavni del bo videti drugačna 521 00:25:14,420 --> 00:25:16,710 temelji off, kako to interakcijo z njim. 522 00:25:16,710 --> 00:25:20,355 Torej, namesto tiskanje tega, bomo samo izpisal besedilo. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, da zdaj, ko vidiš, vidimo samo vprašanje. 525 00:25:28,650 --> 00:25:37,720 In če spremenim stanje tukaj ročno za spredaj je napačen smo dobili 42 nazaj. 526 00:25:37,720 --> 00:25:39,720 >> Torej, še enkrat, ta komponenta ima svojo lastno državo. 527 00:25:39,720 --> 00:25:43,440 Like gumb ve, ali To je bilo stisnjene ali ne, 528 00:25:43,440 --> 00:25:46,080 ta stvar ne ve, kaj je na sprednji ali na hrbtni strani. 529 00:25:46,080 --> 00:25:48,320 Privzeto je, da je na sprednji strani. 530 00:25:48,320 --> 00:25:50,840 In potem, če je na sprednji strani, bomo natisnete vprašanje. 531 00:25:50,840 --> 00:25:53,106 Če je na hrbtni strani, bomo natisnete odgovor. 532 00:25:53,106 --> 00:25:54,980 Torej, še enkrat, informacije ker je enaka. 533 00:25:54,980 --> 00:25:59,090 To je samo videti drugače temelji na tem, kako ga programirati. 534 00:25:59,090 --> 00:26:02,670 Tako, na primer, Facebook Messenger, tudi če dobiš isti vir podatkov, 535 00:26:02,670 --> 00:26:05,170 je morda videti drugače ker je država je drugačna. 536 00:26:05,170 --> 00:26:08,421 Gledaš Sporočilo druga oseba je. 537 00:26:08,421 --> 00:26:10,930 >> OK, tako da je to vse lepo in dobro, zdaj pa, kaj je dejansko 538 00:26:10,930 --> 00:26:15,940 da nas boste mogli zamenjati, bodisi Naša kartica je spredaj ali zadaj. 539 00:26:15,940 --> 00:26:19,010 To lahko storimo z dodajanjem flip gumb, gumb za kartico, ki 540 00:26:19,010 --> 00:26:22,950 bo flip kartico, če je [neslišno]. 541 00:26:22,950 --> 00:26:31,770 Torej, kaj je dodati gumb tukaj, to gumb, in na ta gumb bo rekel flip. 542 00:26:31,770 --> 00:26:35,650 >> In tako zdaj, ga ne naredi ničesar. 543 00:26:35,650 --> 00:26:37,075 Samo izgleda lepo. 544 00:26:37,075 --> 00:26:43,650 Kaj lahko storimo, je, da smo lahko dodate klik trener, onclick enaka this.flip, 545 00:26:43,650 --> 00:26:44,820 in bomo opredeliti flip kasneje. 546 00:26:44,820 --> 00:26:47,120 Ampak v bistvu, onclick je funkcija, 547 00:26:47,120 --> 00:26:48,675 dobi se imenuje, ko jo uporabnik klikne. 548 00:26:48,675 --> 00:26:52,330 >> Torej bo gumb vedeti ko je bilo kliknili. 549 00:26:52,330 --> 00:26:54,750 Šel je bilo že kliknili, bo flip kartico. 550 00:26:54,750 --> 00:26:58,382 To je nekako tako kot vaši pizza dostava fant. 551 00:26:58,382 --> 00:27:01,590 Si podobno, vse v redu, vsakič, ko nekdo me kliče, bom dostaviti pico, kajne? 552 00:27:01,590 --> 00:27:03,420 >> Se registrirate to poslušalca. 553 00:27:03,420 --> 00:27:04,530 Poslušate za dogodek. 554 00:27:04,530 --> 00:27:07,657 Dobiš imenuje, in ko je dogodek zgodi, nekaj narediti. 555 00:27:07,657 --> 00:27:08,240 Dobite pico. 556 00:27:08,240 --> 00:27:11,480 V tem primeru, ko ste kliknili, ste flip kartico. 557 00:27:11,480 --> 00:27:14,560 >> In zato moramo določite Funkcija, ki bo flip kartico, 558 00:27:14,560 --> 00:27:17,930 tako da bomo napisali to pravico tukaj, flip funkcijo. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 In kaj misliš, da flip bo naredil? 561 00:27:23,680 --> 00:27:27,180 Spet dobi to imenuje, ko smo kliknite gumb flip. 562 00:27:27,180 --> 00:27:29,406 Kaj naj funkcija flip storiti? 563 00:27:29,406 --> 00:27:34,136 >> OBČINSTVO: Sprememba this.state.front od true na false, false na true. 564 00:27:34,136 --> 00:27:38,420 >> Neel Mehta: Ja, tako bi karkoli this.front is-- sprednji država je. 565 00:27:38,420 --> 00:27:40,930 Bodite sprednji stanje, če je res, da je lažna. 566 00:27:40,930 --> 00:27:42,530 Če je napačna, da bi bilo res, kajne? 567 00:27:42,530 --> 00:27:45,330 Torej, poskusimo to. 568 00:27:45,330 --> 00:27:48,240 >> Ne morete spremeniti stanje Samo s tem this.state. 569 00:27:48,240 --> 00:27:50,380 Vi tega ne more storiti. 570 00:27:50,380 --> 00:27:52,030 Ne, ne moreš narediti. 571 00:27:52,030 --> 00:27:55,810 Morate uporabiti funkcijo imenuje this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Torej lahko rečemo, this.setState spredaj debelo črevo tu, enkrat, klicaj 573 00:28:03,230 --> 00:28:04,330 točka pomeni ravno nasprotno. 574 00:28:04,330 --> 00:28:07,420 Mislim, če je to. state.front je res, da bomo nato false. 575 00:28:07,420 --> 00:28:09,170 Torej bomo nastavili stanje od true na false. 576 00:28:09,170 --> 00:28:11,430 Če je napačna, bomo nastavljen je false na true. 577 00:28:11,430 --> 00:28:17,210 >> Samo opazili, da smo vzpostavili in dobili nekoliko drugače, in tako poskusimo to. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, poglej tole. 579 00:28:18,675 --> 00:28:21,810 Gumb flip bo sedaj preklop spredaj varnostno stanje. 580 00:28:21,810 --> 00:28:24,990 >> In tako, tukaj je, kjer boste videli malo čarobno React. 581 00:28:24,990 --> 00:28:28,420 Všeč mi nikoli povedal, da ponovno postane. 582 00:28:28,420 --> 00:28:30,910 Nikoli nismo rekli, da ničesar izvlečete. 583 00:28:30,910 --> 00:28:32,630 Če to počnemo brez React, bi 584 00:28:32,630 --> 00:28:34,588 so to-- všeč, ko je flip gumb kliknili, 585 00:28:34,588 --> 00:28:37,290 boš moral povedati, da ročno ponovno render, kajne? 586 00:28:37,290 --> 00:28:43,050 >> React je res kul, da če vas izročiti to določeno stanje in lastnosti, 587 00:28:43,050 --> 00:28:45,760 bo vedno onemogočijo točno isto stvar. 588 00:28:45,760 --> 00:28:48,690 In tako, ko smo kdaj bomo spremenili stanje in lastnosti, 589 00:28:48,690 --> 00:28:50,819 reagirajo le ponovno naredi celotno stvar. 590 00:28:50,819 --> 00:28:52,860 Ve, da obstaja ena-na-ena korespondenco 591 00:28:52,860 --> 00:28:57,270 med državo in parametrom in HTML. 592 00:28:57,270 --> 00:29:00,110 Torej, kadar eno od teh Spremembe, ki jih po določenem stanju, 593 00:29:00,110 --> 00:29:03,750 se bo spremenila, kako plača se ponovno izdana,. 594 00:29:03,750 --> 00:29:06,650 In tako v bistvu React je všeč čaka, da spremenite. 595 00:29:06,650 --> 00:29:09,870 >> Kadarkoli se spreminja nekaj, da bomo ponovno postane celotno stran. 596 00:29:09,870 --> 00:29:12,480 In če se sliši neučinkovit, to je zato, ker ne bi bilo, 597 00:29:12,480 --> 00:29:15,050 ampak reagirajo uporablja stvar imenuje Shadow DOM. 598 00:29:15,050 --> 00:29:19,950 Namesto risanje strani neposredno, jo ohranja virtualni HTML drevo v spomin. 599 00:29:19,950 --> 00:29:23,620 >> Veš, HTML je kot drevo, kot hierarhično strukturo podatkov. 600 00:29:23,620 --> 00:29:28,990 To ohranja lažen drevo v spomin, in vsakič, ko posodobite stran, 601 00:29:28,990 --> 00:29:31,940 da bomo pripraviti en ponaredek drevo, in ga bomo izračunali 602 00:29:31,940 --> 00:29:35,120 kaj spremeniti je potrebno, da bi stran, da bi ti dve drevesi enaka. 603 00:29:35,120 --> 00:29:38,540 Torej v bistvu, je dejansko ponovno naredi veliko. 604 00:29:38,540 --> 00:29:41,540 In potem se je želel le na spremenjene stran v malo poteg, kot je potrebno, 605 00:29:41,540 --> 00:29:44,240 tako da je zelo, zelo, zelo učinkovita. 606 00:29:44,240 --> 00:29:46,970 >> Torej v bistvu React bo ko boste nekaj spremeniti, 607 00:29:46,970 --> 00:29:49,010 da bomo ponovno postanejo stran praktično. 608 00:29:49,010 --> 00:29:52,830 To bo ugotoviti, kaj moram spremeniti, da bo realna stran odražati 609 00:29:52,830 --> 00:29:55,602 virtualni stran, in to bo to. 610 00:29:55,602 --> 00:29:56,560 To je virtualni DOM. 611 00:29:56,560 --> 00:29:59,350 To je eden od največjih značilnosti React. 612 00:29:59,350 --> 00:30:00,880 >> Ali to smiselno? 613 00:30:00,880 --> 00:30:01,540 Kakšno vprašanje? 614 00:30:01,540 --> 00:30:02,040 Ja? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> OBČINSTVO: Kako primerjajo vedno na MVC 617 00:30:08,969 --> 00:30:10,760 da smo se pogovarjali o Prej kot virov. 618 00:30:10,760 --> 00:30:13,527 >> Neel Mehta: Ja, vprašanje je, kako se primerjajo s MVC? 619 00:30:13,527 --> 00:30:14,610 Vprašali ste o virih. 620 00:30:14,610 --> 00:30:16,445 No, kaj je govoril o tem, kako to deluje. 621 00:30:16,445 --> 00:30:18,190 >> V MVC, ki ste jo posodobili model. 622 00:30:18,190 --> 00:30:20,560 V tem primeru bi se imamo model kartice. 623 00:30:20,560 --> 00:30:24,540 Razgled bo imela flip gumb in nadzor 624 00:30:24,540 --> 00:30:26,310 bi imeli funkcijo flip. 625 00:30:26,310 --> 00:30:28,450 Torej bi pogled povej Krmilnik flip flip. 626 00:30:28,450 --> 00:30:30,370 Flip bi povedal Model spremeniti, kajne? 627 00:30:30,370 --> 00:30:33,915 >> In tako, ko vam je MVC, vam poslušajo model za spremembo, 628 00:30:33,915 --> 00:30:37,150 in si ponovno postane ustrezno stališče. 629 00:30:37,150 --> 00:30:39,210 Ali boste morali všeč še krmilnik. 630 00:30:39,210 --> 00:30:42,418 Počakajte, da se model spremeniti, in nato pa izberete del kot stvar 631 00:30:42,418 --> 00:30:44,032 spremeniti. 632 00:30:44,032 --> 00:30:45,740 Tukaj imamo eno stvar, vendar v velikem aplikacijo 633 00:30:45,740 --> 00:30:48,510 moraš imeti rad spomnim, kaj sprememba v vsakem posameznem mestu 634 00:30:48,510 --> 00:30:50,290 tako da je malo siten. 635 00:30:50,290 --> 00:30:53,670 In tako React je lepo saj ima Shadow Dom. 636 00:30:53,670 --> 00:30:56,040 To lahko privoščijo samo Reportaža celotno stvar. 637 00:30:56,040 --> 00:30:58,680 Nimate selektivno kot veš kaj posodobiti. 638 00:30:58,680 --> 00:31:02,186 >> Na Facebooku, če vam je všeč dobili novo sporočilo, v MVC, 639 00:31:02,186 --> 00:31:04,060 bi si morali zapomniti, OK, spremenite stvari 640 00:31:04,060 --> 00:31:06,260 Na vrhu Stran, ikona sporočilo. 641 00:31:06,260 --> 00:31:08,290 Pop tudi novo okno na dnu. 642 00:31:08,290 --> 00:31:10,070 Bo tudi novo stvar v tem oknu. 643 00:31:10,070 --> 00:31:11,060 Igrajo tudi zvok. 644 00:31:11,060 --> 00:31:13,150 >> To je veliko stvari greva ven ob istem času. 645 00:31:13,150 --> 00:31:15,320 In tako, če ne imajo Shadow Dom, boš 646 00:31:15,320 --> 00:31:18,740 morali storiti, da ročno, ker ne morete znebiti celo stran. 647 00:31:18,740 --> 00:31:21,430 Si ne more privoščiti, tako da boste imeli ročno spremeniti vsako stvar, 648 00:31:21,430 --> 00:31:23,990 ki je zelo nadležno v MVC. 649 00:31:23,990 --> 00:31:27,640 >> Zato, da bi bili varčni, so selektivno 650 00:31:27,640 --> 00:31:30,750 posodobiti stran, ki je učinkovit, vendar tudi moteč. 651 00:31:30,750 --> 00:31:34,002 V React, zaradi sence Dom, boste dobili obe stvari zastonj. 652 00:31:34,002 --> 00:31:35,710 To je učinkovita, saj sence doma. 653 00:31:35,710 --> 00:31:37,210 Ozko grlo je posodabljanje strani. 654 00:31:37,210 --> 00:31:40,292 To ne delaš drevo manipulacijo. 655 00:31:40,292 --> 00:31:41,250 Dobiš učinkovitost. 656 00:31:41,250 --> 00:31:45,420 Dobite tudi enostavnost uporabe, ker je če ste le reportaža celotno stran, 657 00:31:45,420 --> 00:31:48,970 ampak samo vem, vse v redu, se stvari se bodo na strani nekje. 658 00:31:48,970 --> 00:31:51,180 Morda bi bilo v drugem mestu, vendar to se dogaja, da se na strani, kajne? 659 00:31:51,180 --> 00:31:52,860 Torej ste pravkar ponovno izdane, celotna stvar praktično, 660 00:31:52,860 --> 00:31:55,540 in morda bo nekaj spremembe v sami strani. 661 00:31:55,540 --> 00:31:57,850 >> Torej, še enkrat, v MVC vas bi morali izbrati 662 00:31:57,850 --> 00:32:01,840 med enostavnost uporabe in učinkovitost, in React, dobiš oboje. 663 00:32:01,840 --> 00:32:04,020 Torej je bolje. 664 00:32:04,020 --> 00:32:05,220 Ima smisel? 665 00:32:05,220 --> 00:32:06,676 Trdna. 666 00:32:06,676 --> 00:32:12,080 >> OK, tako da vidimo, kaj je govoril malo o tem koraku 4, 667 00:32:12,080 --> 00:32:14,740 kako lahko vgradili komponente. 668 00:32:14,740 --> 00:32:16,260 Torej imamo to pravico zdaj. 669 00:32:16,260 --> 00:32:19,420 Mi imamo kul malo gumb. 670 00:32:19,420 --> 00:32:23,157 Lahko flip nazaj in naprej, in da je vse, kar počne. 671 00:32:23,157 --> 00:32:24,990 Recimo, da želimo še eno komponento. 672 00:32:24,990 --> 00:32:28,730 Recimo, da je naša flashcard app smeli vsebuje seznam vseh kart 673 00:32:28,730 --> 00:32:31,520 da imate, da to pomeni, da bi moral imeti še eno komponento. 674 00:32:31,520 --> 00:32:32,970 No, morda ga imenujejo pogled seznama. 675 00:32:32,970 --> 00:32:36,200 Naj bo pogled seznama, ki soobstaja z CardView, 676 00:32:36,200 --> 00:32:39,680 in ta pogled seznama in CardView bo všeč delo skupaj. 677 00:32:39,680 --> 00:32:43,190 In jih lahko kombinirate da bi naše app za vas. 678 00:32:43,190 --> 00:32:45,160 >> Torej, najprej, kaj je narediti Nekaj ​​več kartic desno. 679 00:32:45,160 --> 00:32:46,370 Recimo, kaj karte? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 In prav tako nimam za vam bore s to tipkanjem, 682 00:32:51,910 --> 00:32:53,410 Jaz sem šele tekoč, da ga kopirate od tukaj. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 In tako bom ne izročiti to samo eno kartico. 685 00:33:03,580 --> 00:33:06,910 Bom dal to vrsto kartic. 686 00:33:06,910 --> 00:33:10,240 Torej prva apps bo odmor za zdaj. 687 00:33:10,240 --> 00:33:14,717 Vse je v redu, tako da se bomo, da bi to sposobna izpeljati več kartic. 688 00:33:14,717 --> 00:33:17,800 Torej, najprej, mi bo dal, ne samo eno kartico, vendar niz kartic, 689 00:33:17,800 --> 00:33:18,700 kot seznam kartic. 690 00:33:18,700 --> 00:33:20,980 In v tem primeru imamo tri izmed njih. 691 00:33:20,980 --> 00:33:27,280 >> Vse je v redu, tako da app je dogaja, da dobite seznam kartic, 692 00:33:27,280 --> 00:33:29,870 in to se dogaja, da se odločijo, kateri eden pokazati na CardView. 693 00:33:29,870 --> 00:33:33,740 CardView lahko samo postala eno karto, ampak aplikacijo 694 00:33:33,740 --> 00:33:37,610 dobi seznam vseh kart, kajne? 695 00:33:37,610 --> 00:33:40,820 >> Torej, ko ugotovimo, eno Kartica dati CardView, 696 00:33:40,820 --> 00:33:44,660 kako bi si ugibati, boste morda lahko da bi odločitev o tem, katere kartice 697 00:33:44,660 --> 00:33:47,064 pokazati? 698 00:33:47,064 --> 00:33:49,980 Da bi vam namig, da je začasno Boste gledate določeno kartico. 699 00:33:49,980 --> 00:33:53,260 Če ste osvežite stran, boste Samo segajo v prvo kartico. 700 00:33:53,260 --> 00:33:55,464 To je v redu, ker je začasna. 701 00:33:55,464 --> 00:33:56,630 Kaj tehniko lahko uporabljamo? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> OBČINSTVO: Vi bi lahko spremenljivko tako kot si imel spredaj. 704 00:34:08,760 --> 00:34:11,989 Je to res, bi si imajo sedanji kartica enaka 1? 705 00:34:11,989 --> 00:34:14,150 >> Neel Mehta: Ja, zato smo želijo imeti državo, kajne? 706 00:34:14,150 --> 00:34:16,080 Uporabljala naj bi se stanje v komponenta, da ugotovimo, 707 00:34:16,080 --> 00:34:17,288 katero kartico si želimo, da bi dobili. 708 00:34:17,288 --> 00:34:19,290 Kot smo seznam vse karte, da bomo 709 00:34:19,290 --> 00:34:21,630 uporabite stanje, da ugotovimo, eden od prvega kartice 710 00:34:21,630 --> 00:34:23,710 Drugi karton, tretja karta, in tako naprej. 711 00:34:23,710 --> 00:34:28,760 >> Torej app, tako da bo app dobili imajo funkcijo getInitialState, 712 00:34:28,760 --> 00:34:35,020 getInitialState vrnitev funkcija. 713 00:34:35,020 --> 00:34:39,929 In bomo samo reči activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Torej, zdaj je naša app ima svojo državo. 715 00:34:42,889 --> 00:34:47,179 >> In tako zdaj na render, da ugotovimo, kartica, pa pojdite na paleto 716 00:34:47,179 --> 00:34:49,969 in zgrabi stvar v tem indeksu. 717 00:34:49,969 --> 00:34:53,580 Izberite kartic enake this.props.cards this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 Torej, kot lahko vidite tukaj, rekviziti in država dejansko delajo skupaj. 720 00:35:00,162 --> 00:35:08,990 Torej sedaj, da imamo activeCard, imenovali jo bomo activeCard, 721 00:35:08,990 --> 00:35:10,470 in da vidimo, če to deluje. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [Neslišno] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Oh, da je to napaka besedilo. 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 >> Kul, ja, zdaj smo nazaj tam, kjer smo bili prej, kajne? 729 00:35:54,840 --> 00:35:57,100 Enako stari program, razen Zdaj bomo lahko s podporo 730 00:35:57,100 --> 00:35:59,390 seznam kartic, ne samo eno kartico. 731 00:35:59,390 --> 00:36:04,130 In sedaj, še enkrat, če bomo spremenili activeIndex, lahko gremo od 0 do 1, 732 00:36:04,130 --> 00:36:07,330 in zdaj, druga karta, in potem smo šli na 0. 733 00:36:07,330 --> 00:36:10,390 Torej, tukaj je nov souped-up različico naše. 734 00:36:10,390 --> 00:36:16,000 >> OK, sedaj pa imajo pogled na seznam, ki prikazuje vse karte v svoj program, 735 00:36:16,000 --> 00:36:19,980 zato bomo narediti novo komponenta se imenuje ListView. 736 00:36:19,980 --> 00:36:22,155 Naj ListView enaka react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Zato želimo, da postane Neurejen seznam s postavko seznama za vsako kartico. 739 00:36:38,800 --> 00:36:41,490 In tako imamo kup kart. 740 00:36:41,490 --> 00:36:44,990 Želimo, da en element seznama za vsako kartico, kajne? 741 00:36:44,990 --> 00:36:47,490 Kar lahko storimo za zanke ali nekaj, da bi nov element seznama. 742 00:36:47,490 --> 00:36:50,522 Toda način, kako to storiti v React, uporabite stvar imenovano zemljevida. 743 00:36:50,522 --> 00:36:57,150 Karta je orodje ali funkcijo uporabljate da za vsako postavko, poganja neko funkcijo, 744 00:36:57,150 --> 00:36:59,510 traja povratni vrednosti, in vam daje to nazaj. 745 00:36:59,510 --> 00:37:06,310 >> Tako na primer, imamo niz 1, 2, 3.map function-- in to 746 00:37:06,310 --> 00:37:12,120 je okrajšava za function-- x arrow x krat x. 747 00:37:12,120 --> 00:37:16,110 Ta pravi, da za vsako številko v 1, 2, 3, vzeti. 748 00:37:16,110 --> 00:37:17,800 Ga trga, in jo dal nazaj. 749 00:37:17,800 --> 00:37:22,090 Torej, kaj misliš 1, 2, 3.map x gre za x krat 750 00:37:22,090 --> 00:37:25,480 x vam nazaj dana da je ta funkcija 751 00:37:25,480 --> 00:37:27,680 teče na vsakem elementu tega niza. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> OBČINSTVO: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> Neel Mehta: Ja, 1, 4, 9 ker vam 1 krat 1. 755 00:37:35,709 --> 00:37:36,500 To vam daje eno. 756 00:37:36,500 --> 00:37:37,690 To je prvi element. 757 00:37:37,690 --> 00:37:38,530 >> 2 krat 2 je 4. 758 00:37:38,530 --> 00:37:39,570 To je drugi element. 759 00:37:39,570 --> 00:37:40,310 3 krat 3 je 9. 760 00:37:40,310 --> 00:37:41,540 To je tretji element. 761 00:37:41,540 --> 00:37:42,640 Ima smisel? 762 00:37:42,640 --> 00:37:45,015 Torej map je tehnika, s katero uporabo v funkcionalnih programerjev, 763 00:37:45,015 --> 00:37:48,090 novi slog programiranje nekaj storiti 764 00:37:48,090 --> 00:37:50,500 za vsak element v seznamu. 765 00:37:50,500 --> 00:37:51,970 In tako se to sliši znano. 766 00:37:51,970 --> 00:37:53,370 Imamo seznam kartic. 767 00:37:53,370 --> 00:37:56,860 Želimo, da bi dobili postavke seznama za vsak ena, tako da bomo samo uporabo zemljevida tukaj. 768 00:37:56,860 --> 00:38:00,250 Bomo rekli, naj seznam enaka this.props, kartice, map. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> In tako dobi kartico, smo gre za ustvarjanje postavke seznama 771 00:38:15,070 --> 00:38:17,580 s to kartico je vsebina strani je. 772 00:38:17,580 --> 00:38:20,660 Recimo samo, da želimo dati ven kartice vprašanja tako card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Torej ta seznam vsebuje še array LI je ali seznama postavk 775 00:38:30,649 --> 00:38:32,440 kjer je en seznam postavka za vsako kartico, 776 00:38:32,440 --> 00:38:35,150 in ki vsebuje vprašanje kartic. 777 00:38:35,150 --> 00:38:37,640 Ima smisel? 778 00:38:37,640 --> 00:38:39,450 >> Kul, tako da zdaj pa si dejansko tiskanje, ki ven. 779 00:38:39,450 --> 00:38:46,521 Torej se bomo vrnili na ul. 780 00:38:46,521 --> 00:38:49,020 Znotraj tega neurejen seznam, bomo samo držijo celoten seznam 781 00:38:49,020 --> 00:38:49,890 da so nam dali. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Cool. 784 00:38:53,350 --> 00:38:56,060 >> Vse je v redu, tako da zdaj to Pogled na seznam dela le našli. 785 00:38:56,060 --> 00:38:59,842 Vsa vprašanja o pogledu seznama? 786 00:38:59,842 --> 00:39:01,270 Imate kup kart. 787 00:39:01,270 --> 00:39:02,800 Naredite postavke seznama za vsako kartico. 788 00:39:02,800 --> 00:39:05,466 In jih dal notri Neurejen seznam, in ga dal nazaj. 789 00:39:05,466 --> 00:39:09,410 Torej, zdaj pa deluje, zato smo vgradili ta znotraj našega app, 790 00:39:09,410 --> 00:39:14,310 tako da bomo lahko to storili, pogled seznama. 791 00:39:14,310 --> 00:39:17,070 Kaj argument ne peljemo na seznam pogled? 792 00:39:17,070 --> 00:39:18,320 Kakšne lastnosti pa smo ga dal? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Ne pozabite, če daš je kup kart, 795 00:39:26,860 --> 00:39:29,590 to bom naredil seznam pogled na teh kartic. 796 00:39:29,590 --> 00:39:32,267 Torej, kaj bi se peljemo tu kot argument? 797 00:39:32,267 --> 00:39:33,350 OBČINSTVO: seznam kartic? 798 00:39:33,350 --> 00:39:37,130 Neel Mehta: Ja, tako kartic enaka this.props.cards, kajne? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 In tako je edini problem je, da lahko le 801 00:39:44,370 --> 00:39:48,600 obrnil eno vrhnjo element v render, tako da moraš zaviti v div. 802 00:39:48,600 --> 00:39:49,100 To je čudno. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Torej, da vidimo, če je. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Ali to deluje? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Ja, tam greš. 809 00:40:31,030 --> 00:40:33,700 Torej, zdaj imamo seznam kartic na dnu, 810 00:40:33,700 --> 00:40:36,180 in potem imamo Sama CardView na vrhu, 811 00:40:36,180 --> 00:40:40,486 in da bo flip med obe strani kartice. 812 00:40:40,486 --> 00:40:42,610 Zdaj pa, da je smisel, kako sem to naredil? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Ja, spet, imamo dve komponenti. 815 00:40:46,790 --> 00:40:49,666 Sestavni natisne prva ven vsak kartica na seznamu. 816 00:40:49,666 --> 00:40:50,540 To je pogled na seznam. 817 00:40:50,540 --> 00:40:54,770 In druga komponenta natisne samo to kartico. 818 00:40:54,770 --> 00:40:58,840 Če daš to določeno kartico, bo izpisal podatke o tej kartici 819 00:40:58,840 --> 00:41:01,870 in vam flip nazaj in naprej. 820 00:41:01,870 --> 00:41:05,850 >> Torej, če želimo, lahko poskusite in pogovor približno dodal nekaj novih funkcij za to. 821 00:41:05,850 --> 00:41:09,482 V nasprotnem primeru se lahko pogovarjamo malo bolj glede na hitrost reaktorja, 822 00:41:09,482 --> 00:41:11,190 ali mi lahko odgovorite Vprašanja boste morda morali 823 00:41:11,190 --> 00:41:15,050 ker to so vse od osrednjih delov od reagirajo, da želim govoriti. 824 00:41:15,050 --> 00:41:16,540 Lahko gremo naprej. 825 00:41:16,540 --> 00:41:17,590 Mi lahko odgovarja na vprašanja. 826 00:41:17,590 --> 00:41:18,560 Karkoli hočeš. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> OBČINSTVO: Lahko uporabite JSX v normalnem JavaScript? 829 00:41:24,205 --> 00:41:27,150 Ali je to nekaj, kar prišel z [neslišno]? 830 00:41:27,150 --> 00:41:30,760 >> Neel Mehta: Vprašanje je pločevinka Uporabljate JSX z normalnim JavaScript? 831 00:41:30,760 --> 00:41:32,620 Odgovor je pritrdilen. 832 00:41:32,620 --> 00:41:41,070 JSX je samo način traja, da vaše JavaScript, da ima HTML znotraj njega, 833 00:41:41,070 --> 00:41:44,215 in se pripravlja v JavaScript, ki nima HTML znotraj njega. 834 00:41:44,215 --> 00:41:47,880 Tako obvestilo that-- tako obvestilo tukaj. 835 00:41:47,880 --> 00:41:50,820 To Izgleda imate kot div in imate stvari znotraj njega. 836 00:41:50,820 --> 00:41:54,970 >> Da pripravlja za JavaScript, ki kot ustvari isto stvar. 837 00:41:54,970 --> 00:41:59,590 Mislim, da tisto, kar sem rekel je, da je JSX je le skladenjski, kot da je 838 00:41:59,590 --> 00:42:03,530 Predprocesor za JavaScript veliko kot PHP je Predprocesor za HTML. 839 00:42:03,530 --> 00:42:05,490 JSC je Predprocesor za JavaScript, ki omogoča 840 00:42:05,490 --> 00:42:12,970 si dal HTML znotraj vašega JavaScript. 841 00:42:12,970 --> 00:42:16,425 In tako, če imate pravo transformator ki je stvar imenovano [neslišno] 842 00:42:16,425 --> 00:42:17,300 ki bo spremenila. 843 00:42:17,300 --> 00:42:19,360 Pravica Predprocesor, da boš lahko to naredil. 844 00:42:19,360 --> 00:42:20,235 >> OBČINSTVO: [neslišno] 845 00:42:20,235 --> 00:42:23,026 Neel Mehta: Običajno ne potrebujete postaviti HTML znotraj JavaScript 846 00:42:23,026 --> 00:42:24,110 razen če je vaše početje React. 847 00:42:24,110 --> 00:42:27,146 Vendar pa lahko to storite anyway. 848 00:42:27,146 --> 00:42:27,645 Ja? 849 00:42:27,645 --> 00:42:29,353 >> OBČINSTVO: ti misliš je opisano React 850 00:42:29,353 --> 00:42:31,970 kot funkcionalno strukturni jezik. 851 00:42:31,970 --> 00:42:35,646 Smo bili učenje C v CS50. 852 00:42:35,646 --> 00:42:38,032 Ci tudi funkcionalen jezik? 853 00:42:38,032 --> 00:42:39,990 Neel Mehta: Torej, vprašanje Gre za funkcionalno 854 00:42:39,990 --> 00:42:43,010 v primerjavi z drugo stvarjo, imenovano Nujno ali postopkovno programiranje. 855 00:42:43,010 --> 00:42:44,820 Obstaja dve vrsti programov priljubljenih. 856 00:42:44,820 --> 00:42:48,550 Ena se imenuje postopkovno, ki se vse vrti okoli kot delaš ukazov, 857 00:42:48,550 --> 00:42:51,510 in ena funkcionalna, kar je vse približno ob funkcije in ima 858 00:42:51,510 --> 00:42:52,930 vhod in izhod iz tega. 859 00:42:52,930 --> 00:42:55,930 React je funkcionalna paradigma. 860 00:42:55,930 --> 00:42:58,010 C je zelo procesna paradigma. 861 00:42:58,010 --> 00:43:02,360 >> In kot primer, C, na primer, ne boste storili to deklarativno pot 862 00:43:02,360 --> 00:43:04,390 za izdelavo programa, kajne? 863 00:43:04,390 --> 00:43:06,826 Imate za povedati, natisnite to. 864 00:43:06,826 --> 00:43:07,950 Spremenite to podatkovno strukturo. 865 00:43:07,950 --> 00:43:08,530 Natisni to. 866 00:43:08,530 --> 00:43:10,160 To je vse o ukazih. 867 00:43:10,160 --> 00:43:12,640 >> V React, tam ni da veliko ukazov. 868 00:43:12,640 --> 00:43:15,145 To je vse približno ob komponente, ki jih skupaj. 869 00:43:15,145 --> 00:43:16,300 Oni so kot funkcije. 870 00:43:16,300 --> 00:43:26,360 Imate kot funkcijo imenuje CardView, 871 00:43:26,360 --> 00:43:28,680 ki je funkcija ki ima vhod, izhod, 872 00:43:28,680 --> 00:43:30,660 in tako React je vse o tej filozofiji 873 00:43:30,660 --> 00:43:32,700 ZDA having-- imate podatke. 874 00:43:32,700 --> 00:43:34,910 Lahko ga skozi to algoritem, in ga bomo 875 00:43:34,910 --> 00:43:36,800 izhod HTML, ki vas Pravkar natisnjeno stran, 876 00:43:36,800 --> 00:43:39,180 in tako da boste morali zgradite kos za kosom. 877 00:43:39,180 --> 00:43:42,800 >> Torej, da pripravi metaforo za kaj Sem rekel prej, veste, kako 878 00:43:42,800 --> 00:43:47,050 na Facebooku, če dobiš sporočilo, in se odločite, kateri deli posodobiti, 879 00:43:47,050 --> 00:43:47,882 da je procesno. 880 00:43:47,882 --> 00:43:48,840 Nujno je, kajne? 881 00:43:48,840 --> 00:43:49,806 OK, sem dobil sporočilo. 882 00:43:49,806 --> 00:43:50,930 Oglejmo spremenite račun tam. 883 00:43:50,930 --> 00:43:52,110 >> Oglejmo pop okno tukaj. 884 00:43:52,110 --> 00:43:52,780 Oglejmo spremenite račun tam. 885 00:43:52,780 --> 00:43:53,700 Oglejmo pripraviti to tukaj. 886 00:43:53,700 --> 00:43:55,220 To je procesni pristop. 887 00:43:55,220 --> 00:44:00,240 >> To je tisto, stvari, kot kotni, Boost, Backbone, drugi okviri uporabo. 888 00:44:00,240 --> 00:44:01,200 React je funkcionalna. 889 00:44:01,200 --> 00:44:03,324 To je zelo drugačen način razmišljanja o stvareh. 890 00:44:03,324 --> 00:44:07,950 To traja to idejo pa imajo funkcije ali algoritmi, da ga boste 891 00:44:07,950 --> 00:44:08,800 izročiti to podatke. 892 00:44:08,800 --> 00:44:11,820 To bo izpljunil, kaj jo bi moralo biti, in računalnik 893 00:44:11,820 --> 00:44:13,490 bo poskrbel za tehtanje ven. 894 00:44:13,490 --> 00:44:15,890 Nimate ravnati sami. 895 00:44:15,890 --> 00:44:18,470 Ali da bi malo občutka? 896 00:44:18,470 --> 00:44:18,970 Ja? 897 00:44:18,970 --> 00:44:24,180 >> OBČINSTVO: V funkcionalnem jeziku Vse se zgodi naenkrat? 898 00:44:24,180 --> 00:44:26,800 >> Neel Mehta: No, stvari se dogajajo v redu. 899 00:44:26,800 --> 00:44:29,320 Tako kot pri nas je še vedno odredi, vendar pa ne 900 00:44:29,320 --> 00:44:32,390 zgodilo v vrstnem redu, kot so pohvaliti, ukaz, ukaz. 901 00:44:32,390 --> 00:44:36,459 To se zgodi v redu Funkcija vam daje moč. 902 00:44:36,459 --> 00:44:37,750 Daj, da v drugo funkcijo. 903 00:44:37,750 --> 00:44:39,550 Daj, da v drugo Funkcija, druga funkcija. 904 00:44:39,550 --> 00:44:41,470 >> Če boste to storili CS51, boste naučiti funkcionalne programe 905 00:44:41,470 --> 00:44:42,886 malo iz področja uporabe tega. 906 00:44:42,886 --> 00:44:45,090 Ampak v bistvu, kaj naredi React kul ni le 907 00:44:45,090 --> 00:44:46,840 pretok podatkov enosmerni in virtualni Dom, 908 00:44:46,840 --> 00:44:48,700 ampak tudi ta ideja funkcionalno programiranje. 909 00:44:48,700 --> 00:44:51,720 In funkcionalno programiranje je zelo enostaven sestaviti in narediti kul stvari iz, 910 00:44:51,720 --> 00:44:53,844 in to je zelo enostavno, da razmišljajo o in razlog okoli. 911 00:44:53,844 --> 00:44:55,450 Torej, to je še ena dobra žrebanje React. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Vsa več vprašanj? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Ja? 916 00:45:03,150 --> 00:45:06,840 >> OBČINSTVO: Hm, zakaj bi si Uporabljajte naj v nasprotju z var? 917 00:45:06,840 --> 00:45:10,450 >> Neel Mehta: Torej, vprašanje je, Zakaj uporabljate pustite namesto var? 918 00:45:10,450 --> 00:45:13,220 To je stvar, ki se imenuje ES6 ali ECMAscript 6. 919 00:45:13,220 --> 00:45:15,820 To je nova različica JavaScript. 920 00:45:15,820 --> 00:45:19,050 Tam je kup tehničnih razlogov, Ampak kaj je boljša različica var. 921 00:45:19,050 --> 00:45:20,724 >> To je, kako si razglasi spremenljivk. 922 00:45:20,724 --> 00:45:21,390 Lahko uporabite pustiti. 923 00:45:21,390 --> 00:45:22,140 Lahko uporabite var. 924 00:45:22,140 --> 00:45:23,825 Naj ima kup tehničnih reasons-- si jih lahko ogledate 925 00:45:23,825 --> 00:45:25,610 up later-- zakaj je bolje. 926 00:45:25,610 --> 00:45:28,780 V bistvu, ES6 ima nekaj lepo Nova skladnja, nekatere nove funkcije 927 00:45:28,780 --> 00:45:30,720 na vrhu starega JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Torej imamo kot pet minut. 929 00:45:32,782 --> 00:45:34,990 Želel sem govoriti o še ena stvar resnično hitro. 930 00:45:34,990 --> 00:45:36,450 Če boste imeli kakršnakoli vprašanja, kaj je govoril o tem, po tem. 931 00:45:36,450 --> 00:45:38,366 Ampak samo zato, da to postane ujeli na kamero, sem 932 00:45:38,366 --> 00:45:41,550 želim govoriti malo o tem, kako dejansko uporabo React v vaših aplikacijah. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Če greste tukaj, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 To je domača stran za React, in to vam bom pokazal, kako si dejansko uporabo 936 00:46:03,320 --> 00:46:05,320 Odzovejo na vaših straneh. 937 00:46:05,320 --> 00:46:08,845 V bistvu, to je malo zapleten poskuša namestiti React. 938 00:46:08,845 --> 00:46:12,300 To ni tako enostavno, kot si povlečete in spusti JavaScript tam. 939 00:46:12,300 --> 00:46:15,890 >> Moraš imeti svoj transformator ustanovi, ki bo, kot je to storila prej, 940 00:46:15,890 --> 00:46:18,120 vključite vaš JSX v normalno JavaScript. 941 00:46:18,120 --> 00:46:21,030 Moraš stvar, da bom pripravijo si ES6 v normalno stanje. 942 00:46:21,030 --> 00:46:24,720 JavaScript tam je veliko gibljejo deli, kar morate storiti, tako da je stvar 943 00:46:24,720 --> 00:46:27,200 imenuje Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 In to je vrstica orodje ukazne da bom vam oder iz vašega React 945 00:46:31,110 --> 00:46:32,380 projekti enostavno. 946 00:46:32,380 --> 00:46:38,660 >> Torej si lahko preberete več o tem kasneje, vendar pa obstaja nekaj orodja 947 00:46:38,660 --> 00:46:40,160 da Yeoman ponuja. 948 00:46:40,160 --> 00:46:43,280 Ti boš lahko ustvarite React app z vsem, zgrajena leta. 949 00:46:43,280 --> 00:46:46,030 Tako kot bo so bila zgrajena v, komponent, zgrajena leta. 950 00:46:46,030 --> 00:46:47,880 Da bomo imeli svoj transformator vgrajeno. 951 00:46:47,880 --> 00:46:50,699 Imajo veliko kul stuff vgrajeno samodejno 952 00:46:50,699 --> 00:46:52,240 uporabo te stvari, imenovane generatorji. 953 00:46:52,240 --> 00:46:54,620 >> Torej, preberite o tem, če ti je všeč. 954 00:46:54,620 --> 00:46:59,110 Pojdi na YEOMAN, Y-E-O-M-A-N ter najdete generatorje, kot ti. 955 00:46:59,110 --> 00:47:01,263 In z generatorji, kot so ti, ki ste jo pravkar želeli eno 956 00:47:01,263 --> 00:47:03,010 je ukazni vrstici nekaj ukazov. 957 00:47:03,010 --> 00:47:05,530 To bo oder ki daje Celotna React app za vas. 958 00:47:05,530 --> 00:47:10,470 To boste dobili vse ročno tesnost, in grunt delo za vas, 959 00:47:10,470 --> 00:47:13,010 in to je razlog, zakaj se osredotočite samo na samo pisanje v React. 960 00:47:13,010 --> 00:47:16,739 >> Torej v bistvu izgradnjo Reagirajo app ni enostavna. 961 00:47:16,739 --> 00:47:19,530 To je žično vse skupaj, vendar obstajajo so orodja, ki ga bom naredil za vas. 962 00:47:19,530 --> 00:47:23,070 Torej, če želite narediti React app, poskusite to počne na tak način. 963 00:47:23,070 --> 00:47:26,360 Če si želite eksperimentirati, lahko poskusite z uporabo te CodePen 964 00:47:26,360 --> 00:47:28,550 ker ima ta CodePen vsi reagirajo ožičenja. 965 00:47:28,550 --> 00:47:30,240 Sem naredil vse delo za vas že. 966 00:47:30,240 --> 00:47:34,610 >> Torej, če želite, da bi Like proizvodnja za javnost React aplikacijo, 967 00:47:34,610 --> 00:47:37,220 poskusite eno od teh generatorjev. 968 00:47:37,220 --> 00:47:40,240 Če si želite igrati okoli, je pogosto vredno samo 969 00:47:40,240 --> 00:47:44,490 kot poskusite igranje okrog na CodePen tukaj. 970 00:47:44,490 --> 00:47:45,470 Zvok dober? 971 00:47:45,470 --> 00:47:45,970 Cool. 972 00:47:45,970 --> 00:47:47,890 >> Torej, to je vse, kar imam. 973 00:47:47,890 --> 00:47:52,470 Še enkrat, vse kode in primeri bo na tej spletni strani tukaj. 974 00:47:52,470 --> 00:47:55,509 Torej, še enkrat, mi ni govoril približno toliko sintaksa React, 975 00:47:55,509 --> 00:47:57,550 ampak, da bi našli vse tiste, malo sintaktične podrobnosti, 976 00:47:57,550 --> 00:48:00,320 to je vse, bo na voljo na tej spletni strani tukaj. 977 00:48:00,320 --> 00:48:02,660 >> Zato vam priporočam, kot narediti prvi korak. 978 00:48:02,660 --> 00:48:06,277 Ga v vašem CodePen. 979 00:48:06,277 --> 00:48:08,110 Poskusite delati na izdelavo je v drugem koraku. 980 00:48:08,110 --> 00:48:11,310 Tam je Četrti korak, in samo glej, kjer boste dobili od tega. 981 00:48:11,310 --> 00:48:14,840 >> Vsa več vprašanj, preverite ven to stran ali email mi. 982 00:48:14,840 --> 00:48:16,490 To je moj email. 983 00:48:16,490 --> 00:48:19,885 Ampak rad bi vam pomagal z nobenim Vprašanja boste morda imate o React. 984 00:48:19,885 --> 00:48:21,010 Torej, ja, to je vse, kar imam. 985 00:48:21,010 --> 00:48:23,410 Lepa za Hvala vsem gledanje ali za udeležbo. 986 00:48:23,410 --> 00:48:26,820 In bom na vsa vprašanja boste morda morali po tem zdaj. 987 00:48:26,820 --> 00:48:29,140 Torej, hvala vsem za gledanje. 988 00:48:29,140 --> 00:48:31,270