1 00:00:00,000 --> 00:00:02,910 >> [Glazbom] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> Neel Mehta: Ovdje to ide. 4 00:00:07,275 --> 00:00:11,070 >> Pa, svatko, dobrodošli na web aplikacije u budućnosti s reagirati. 5 00:00:11,070 --> 00:00:11,870 Ovo je CS50. 6 00:00:11,870 --> 00:00:12,930 Moje ime je Neel. 7 00:00:12,930 --> 00:00:17,689 Ja sam TA za CS50 i sophomore na Harvard College i vrlo, vrlo 8 00:00:17,689 --> 00:00:18,730 strastveni web developer. 9 00:00:18,730 --> 00:00:20,730 Dakle, ja sam vrlo uzbudljivo razgovarati s vama i danas, 10 00:00:20,730 --> 00:00:24,550 da li si ti ovdje ili kod kuće gledajući oko reagirati, što je, opet 11 00:00:24,550 --> 00:00:27,270 kao što sam rekao, budućnost web aplikacija. 12 00:00:27,270 --> 00:00:29,055 >> Dakle Reagirati je web okvir. 13 00:00:29,055 --> 00:00:30,930 I kao što sam već rekao da neki ljudi ovdje, 14 00:00:30,930 --> 00:00:33,400 okvir je samo skup alata koje možete koristiti 15 00:00:33,400 --> 00:00:35,770 strukturirati i graditi svoju web aplikaciju. 16 00:00:35,770 --> 00:00:39,010 I web aplikacije su, opet, web stranice da su interaktivni kao što su Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, što god. 18 00:00:42,330 --> 00:00:45,590 >> Dakle, Facebook je web okvir koji je razvijen od strane Facebook 19 00:00:45,590 --> 00:00:48,060 par godina back-- reagirati je. 20 00:00:48,060 --> 00:00:50,830 Od tada se koristi u Facebook na svojim mobilnim aplikacijama 21 00:00:50,830 --> 00:00:52,460 i web aplikacija, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Akademija je još Istaknuti rano usvojitelj reagirati. 23 00:00:56,350 --> 00:00:58,630 >> To je stvarno bio dobivanje iznimno popularan. 24 00:00:58,630 --> 00:01:03,420 Ako ste ikada koristiti stvari poput kutni ili Kralježnica, to je od iste obitelji, 25 00:01:03,420 --> 00:01:05,830 ali od tada do sada preteći svoju popularnost. 26 00:01:05,830 --> 00:01:06,890 To je vruće nova stvar. 27 00:01:06,890 --> 00:01:09,590 To je jako, jako velika. 28 00:01:09,590 --> 00:01:13,470 >> I tako reagiraju dobro ne samo kao Web okvir za izgradnju sučelja. 29 00:01:13,470 --> 00:01:16,020 To je dobro za izgradnju web sučelja. 30 00:01:16,020 --> 00:01:18,350 Tu je i stvar zove reagiraju Izvorni koji 31 00:01:18,350 --> 00:01:22,200 omogućuje izgradnju sučelja za Android i iOS 32 00:01:22,200 --> 00:01:26,390 i možda ostale platforme u budućnosti koristeći samo isti JavaScript kôd. 33 00:01:26,390 --> 00:01:31,130 Ti bi mogao koristiti isti JavaScript kôd pružiti web stranice, 34 00:01:31,130 --> 00:01:33,040 pružiti Android aplikacije i iOS aplikacije. 35 00:01:33,040 --> 00:01:35,000 >> To je vrlo, vrlo uzbudljivo vrijeme. 36 00:01:35,000 --> 00:01:37,070 To je stvarno, stvarno cool prilika. 37 00:01:37,070 --> 00:01:42,020 To je stvarno univerzalna web sučelje razvojni alat, 38 00:01:42,020 --> 00:01:44,420 tako da je vrlo, vrlo Važno je znati. 39 00:01:44,420 --> 00:01:46,949 I, kao što sam govorio ljudima prije, ovaj, mislim, 40 00:01:46,949 --> 00:01:48,990 će se promijeniti kako smo izgraditi web aplikacije zauvijek. 41 00:01:48,990 --> 00:01:55,820 Tako da je možda malo pretjerivanje, ali ja mislim da je to prilično dobra stvar znati. 42 00:01:55,820 --> 00:01:57,580 >> U redu, tako što je reagovati? 43 00:01:57,580 --> 00:02:01,020 Reagirati je okvir možete koristiti za izgradnju sučelja. 44 00:02:01,020 --> 00:02:03,240 Sučelje je, opet, web-stranica, zar ne? 45 00:02:03,240 --> 00:02:06,340 Dakle ovdje je Instagram.com, koristi reagirati. 46 00:02:06,340 --> 00:02:08,740 >> Reagirati je izgrađen na Ideja komponenti. 47 00:02:08,740 --> 00:02:11,900 Komponenta je HTML Element na steroidima, 48 00:02:11,900 --> 00:02:14,470 tako da HTML element kao gumb. 49 00:02:14,470 --> 00:02:15,250 To je stav. 50 00:02:15,250 --> 00:02:17,500 To je zaglavlje, zar ne? 51 00:02:17,500 --> 00:02:22,740 I Instagram će koristiti te, ali to Također će koristiti komponente reagirati. 52 00:02:22,740 --> 00:02:25,740 >> Reagirati komponente souped up HTML elementi 53 00:02:25,740 --> 00:02:28,100 koji imaju svoje ponašanje sadržane u njima. 54 00:02:28,100 --> 00:02:31,800 Dakle, kao primjer, možemo imati vrijeme je element, vrijeme komponenta, 55 00:02:31,800 --> 00:02:34,095 koji će sadržavati poput vrijeme pečat, znate, 56 00:02:34,095 --> 00:02:37,170 komponenta profil koji će sadržavati sliku profila 57 00:02:37,170 --> 00:02:38,820 i ime osobe. 58 00:02:38,820 --> 00:02:42,930 To može imati kao brojač koji može računati kao broja voli, 59 00:02:42,930 --> 00:02:45,610 a ako kliknete na njega, to će povećati broj poput. 60 00:02:45,610 --> 00:02:48,200 Komponenta je samo hrpa HTML koda koji 61 00:02:48,200 --> 00:02:50,520 ima funkcionalnost omotan unutar nje. 62 00:02:50,520 --> 00:02:53,770 Dakle, to je kao HTML element na steroidima, kao što sam rekao prije. 63 00:02:53,770 --> 00:02:56,270 Možete uzeti ove komponente, a možete ih staviti zajedno 64 00:02:56,270 --> 00:02:59,060 kako bi nove komponente u ovaj slučaj, post komponenta, 65 00:02:59,060 --> 00:03:00,505 koji sadrži sve ove stvari. 66 00:03:00,505 --> 00:03:04,050 To bi sadržavati vrijeme, Profil, LikeCounter, možda komentar 67 00:03:04,050 --> 00:03:06,100 a možda sama slika. 68 00:03:06,100 --> 00:03:10,810 I tako web-aplikacije samo su izgradili uzimanjem dijelovi i stavljajući ih zajedno. 69 00:03:10,810 --> 00:03:15,620 Hrani Instagram nije ništa više od hrpa postova jedan za drugim, 70 00:03:15,620 --> 00:03:19,032 svaki post sadrži poput vremena, Profil, LikeCounter, i tako dalje. 71 00:03:19,032 --> 00:03:20,490 To je vrsta kao što gradi kuću. 72 00:03:20,490 --> 00:03:22,660 Vi ne graditi Kuća od vrha prema dolje. 73 00:03:22,660 --> 00:03:24,960 Možete uzeti vas components-- uzeti kao kupaonici. 74 00:03:24,960 --> 00:03:28,320 Možete uzeti bedroom-- ih držati zajedno, i imate novu komponentu. 75 00:03:28,320 --> 00:03:29,760 Imate novi dio kuće. 76 00:03:29,760 --> 00:03:32,860 >> Tako reagiraju sve je izgrađen oko ova ideja komponenti koje 77 00:03:32,860 --> 00:03:36,600 su interaktivne, koji su deklarativno. 78 00:03:36,600 --> 00:03:39,650 Kao što samo reći ono što Profil je, i to ga čini. 79 00:03:39,650 --> 00:03:40,600 Oni su composable. 80 00:03:40,600 --> 00:03:43,880 Možete uzeti vremena i profil, stavi ih zajedno, napraviti nešto bolje. 81 00:03:43,880 --> 00:03:47,770 I oni su za višekratnu upotrebu, pa ako ima izvorni kod za post, 82 00:03:47,770 --> 00:03:49,440 možete ugraditi tu gdje. 83 00:03:49,440 --> 00:03:53,160 >> Možete ugraditi Instagram stvar na svoju web stranicu. 84 00:03:53,160 --> 00:03:56,830 Možete ugraditi u Facebook, na primjer, sve dok ga koristi reagirati kao dobro. 85 00:03:56,830 --> 00:04:00,360 Dakle, dijelovi su stvarno, stvarno, stvarno moćna građevni blokovi webu 86 00:04:00,360 --> 00:04:04,180 koja se može koristiti bilo stavi zajedno napraviti nove izgrađeni. 87 00:04:04,180 --> 00:04:07,159 To je vrlo, vrlo visoka Pregled razini. 88 00:04:07,159 --> 00:04:09,200 Dakle, opet, ako imate bilo kakvih pitanja u bilo kojem trenutku 89 00:04:09,200 --> 00:04:14,470 o filozofiji reaktora, u kodiranje, da me zaustavi, i pustiti mene znati. 90 00:04:14,470 --> 00:04:18,420 >> U redu, tako reagirati, jer to je cool ima drugačiji način gledanja 91 00:04:18,420 --> 00:04:19,870 kako ste izgraditi web aplikacije. 92 00:04:19,870 --> 00:04:23,620 Vjerojatno ste čuli za MVC, a Model možete kontrolirati u CS50 ili što god 93 00:04:23,620 --> 00:04:25,940 Drugi sondiranje klase koje koristite. 94 00:04:25,940 --> 00:04:29,000 I većina okviri izgrađen oko ideje MVC. 95 00:04:29,000 --> 00:04:30,410 Reagirati nije. 96 00:04:30,410 --> 00:04:32,980 Reagirati je izgrađen oko ideje od jednosmjerni protok podataka 97 00:04:32,980 --> 00:04:36,510 kao što se vidi po ovim grafikon ili grafiku ovdje. 98 00:04:36,510 --> 00:04:38,260 >> Uglavnom, imate izvor podataka. 99 00:04:38,260 --> 00:04:42,380 A izvor podataka će odlučiti kako nokautirati određene komponente. 100 00:04:42,380 --> 00:04:45,452 I komponente će onda, kad se mijenjaju, 101 00:04:45,452 --> 00:04:47,160 oni će reći izvor podataka za promjenu. 102 00:04:47,160 --> 00:04:49,350 >> Za korištenje Instagram primjer, možda ćete morati 103 00:04:49,350 --> 00:04:52,050 popis poštanskih objekata kao što su u bazi podataka ili nešto. 104 00:04:52,050 --> 00:04:53,310 To podacima. 105 00:04:53,310 --> 00:04:57,600 I onda naš post komponente će se da su podaci, 106 00:04:57,600 --> 00:05:01,830 i koristiti te podatke za prikaz stvar na zaslonu. 107 00:05:01,830 --> 00:05:04,300 To je ono što je strelica Iz podataka se komponenta, 108 00:05:04,300 --> 00:05:07,930 a onda taj isti podaci koriste da donese hrpu komponenti. 109 00:05:07,930 --> 00:05:10,290 >> U Facebook Messenger, za Primjer koji se reagiraju, 110 00:05:10,290 --> 00:05:13,410 možete imati popis Poruke kao izvor podataka. 111 00:05:13,410 --> 00:05:15,927 I to ne bi donijeti samo popis poruka 112 00:05:15,927 --> 00:05:17,510 ali i popis prijatelja imate. 113 00:05:17,510 --> 00:05:19,200 Imate Broj nepročitanih. 114 00:05:19,200 --> 00:05:23,330 Možda također pružiti Facebook stvar To je na dnu Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Isti podaci se jedan izvor istine 116 00:05:25,610 --> 00:05:28,290 i da uzrokuje puno dijelovi za biti donesena. 117 00:05:28,290 --> 00:05:30,290 I kad god jedan od onih Komponente se mijenja, 118 00:05:30,290 --> 00:05:32,320 to ide natrag i mijenja izvor podataka. 119 00:05:32,320 --> 00:05:33,460 >> Možete poslati poruku, zar ne? 120 00:05:33,460 --> 00:05:34,780 To mijenja izvor podataka. 121 00:05:34,780 --> 00:05:39,490 Možete čitati poruke, tako da postavite nepročitana 0. 122 00:05:39,490 --> 00:05:41,136 To mijenja izvor podataka. 123 00:05:41,136 --> 00:05:44,010 I primijetiti da sve to jednog strelica ide natrag u istom podataka 124 00:05:44,010 --> 00:05:47,662 izvor, tako da znate, dati određeni skup podataka, 125 00:05:47,662 --> 00:05:49,870 znate točno ono što je Stranica će izgledati. 126 00:05:49,870 --> 00:05:50,700 To je deterministički. 127 00:05:50,700 --> 00:05:53,451 Znaš, dao određene podatke, što stranica će izgledati. 128 00:05:53,451 --> 00:05:56,158 Možete predvidjeti kako će to ponašaju i kako stvari idu 129 00:05:56,158 --> 00:05:57,650 raditi kada su zajedno. 130 00:05:57,650 --> 00:06:00,410 >> I kad bih imao milijun komponente ovdje, to će se ponašati isto, zar ne? 131 00:06:00,410 --> 00:06:02,290 Ne bi bilo čudne povezivanje. 132 00:06:02,290 --> 00:06:04,120 Jedan podaci donio milijun komponente. 133 00:06:04,120 --> 00:06:06,879 Milijun komponente mogli vratiti i uređivati ​​podatke. 134 00:06:06,879 --> 00:06:07,920 I tako je to jako lijepo. 135 00:06:07,920 --> 00:06:10,870 Gradimo composable, lako prilagodljiv web aplikacije. 136 00:06:10,870 --> 00:06:13,150 >> Imate jedan izvor podataka, izvor istine. 137 00:06:13,150 --> 00:06:15,790 To govori vaše komponente kako nokautirati stranicu, 138 00:06:15,790 --> 00:06:18,190 a dijelovi će nositi interakciju. 139 00:06:18,190 --> 00:06:20,150 A ako žele promijeniti stvari, samo se vratiti 140 00:06:20,150 --> 00:06:21,750 i reći izvor podataka za promjenu. 141 00:06:21,750 --> 00:06:22,850 Ima smisla? 142 00:06:22,850 --> 00:06:26,010 Dakle Reagirati je sve o razumijevanju kako izgraditi komponentu 143 00:06:26,010 --> 00:06:29,540 i kako bi vaš komponente komunicirati s vanjskim svijetom. 144 00:06:29,540 --> 00:06:31,850 >> Izrada komponente usobno djeluju s vanjskim svijetom 145 00:06:31,850 --> 00:06:34,490 koristi drugu tehnologiju naziva Flux, koji 146 00:06:34,490 --> 00:06:36,872 je okvir koji se doda se na vrhu React. 147 00:06:36,872 --> 00:06:38,330 Nećemo govoriti o tome. 148 00:06:38,330 --> 00:06:42,990 Idemo razgovarati više o, s obzirom podataka, kako možeš donijeti komponentu? 149 00:06:42,990 --> 00:06:47,010 >> I tako reagirati stvarno cool, jer vas možete ga koristiti s bilo stražnjem kraju želite. 150 00:06:47,010 --> 00:06:50,480 Ako imate kao Python leđa kraj, ako vaš Python može ispljunuti neke podatke, 151 00:06:50,480 --> 00:06:51,610 Reagirati mogu uzvratiti. 152 00:06:51,610 --> 00:06:54,700 Ako nema JS izlazi podataka, reagirati čini. 153 00:06:54,700 --> 00:06:56,890 Ruby šina s Podaci, reagirati čini. 154 00:06:56,890 --> 00:07:01,860 >> Dakle Reagirati je u osnovi web view-- prednji kraj s komponentama 155 00:07:01,860 --> 00:07:03,910 za bilo koji izvor podataka god. 156 00:07:03,910 --> 00:07:07,145 I tako ide od izvora podataka na reagiraju komponente je prilično jednostavan. 157 00:07:07,145 --> 00:07:08,770 Idete na drugi način je malo teže. 158 00:07:08,770 --> 00:07:10,462 Koji koristi Flux kao što sam spomenuo prije. 159 00:07:10,462 --> 00:07:11,420 Nećemo ući u to. 160 00:07:11,420 --> 00:07:13,740 Mi ćemo se više usredotočiti na Podaci za komponente stranu. 161 00:07:13,740 --> 00:07:15,880 Na taj način možete napraviti cool, zabavne web aplikacije. 162 00:07:15,880 --> 00:07:19,870 To neće utjecati na vanjski svijet za sada, ali to je druga priča. 163 00:07:19,870 --> 00:07:22,210 >> U redu, tako da ako ste bili ovdje za moj posljednji seminar 164 00:07:22,210 --> 00:07:26,610 znat ćete da je sve koda za današnji razgovor će se na adresi 165 00:07:26,610 --> 00:07:29,320 ovdje, ispričavam se, ovaj URL ovdje. 166 00:07:29,320 --> 00:07:32,730 A zapravo ćemo ići kroz četiri koraka, možda pet, 167 00:07:32,730 --> 00:07:33,510 vjerojatno ne pet. 168 00:07:33,510 --> 00:07:37,300 Mi ćemo se kretati kroz četiri koraka izgradnje uzorak reagirati aplikaciju. 169 00:07:37,300 --> 00:07:39,550 I tako svi izvorni kod za svaki korak na putu 170 00:07:39,550 --> 00:07:42,216 će biti ovdje, pa ako ste sljedeće zajedno kod kuće, 171 00:07:42,216 --> 00:07:43,991 slobodno prostudirati ovaj kod. 172 00:07:43,991 --> 00:07:46,740 Ako ste nakon zajedno ovdje, ćemo ga prikazuje na zaslonu, 173 00:07:46,740 --> 00:07:47,739 tako da ne brinite o tome. 174 00:07:47,739 --> 00:07:50,930 Ali, ako ste kod kuće, osjećam slobodno posjetite ovu web stranicu. 175 00:07:50,930 --> 00:07:56,400 I, da, trebali biste biti u mogućnosti da biste dobili sve kod ćete ikada trebati ovdje. 176 00:07:56,400 --> 00:08:01,380 Dakle, to je dobra mangupirati se plahta kao i za svoje buduće avanture s reagirati. 177 00:08:01,380 --> 00:08:04,490 Cool, tako da ako svatko tko je ovdje, pa čak i ako ste kod kuće, 178 00:08:04,490 --> 00:08:11,580 podići ove web stranice, is.gd/cs50react, nema kapitala, nema podcrtavanja, nema ništa. 179 00:08:11,580 --> 00:08:15,849 >> Vidjet ćete stranicu koja izgleda malo ovako. 180 00:08:15,849 --> 00:08:17,140 To je stvar koja se zove CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen je kolaborativni kodiranje okruženje 182 00:08:20,030 --> 00:08:23,364 s kojima mogu pisati kod ovdje, i to će automatski biti poslan na vas. 183 00:08:23,364 --> 00:08:24,780 I na ovaj način, ja mogu pisati kod. 184 00:08:24,780 --> 00:08:26,920 Ja mogu izvoditi kod ovdje. 185 00:08:26,920 --> 00:08:33,470 >> Za example-- a ako reloads-- vidjeti, Ja sam trčanje JavaScript kôd na stranici 186 00:08:33,470 --> 00:08:36,390 upravo ovdje, a to će automatski donijeti web stranicu 187 00:08:36,390 --> 00:08:37,980 s ovim JavaScript kôd. 188 00:08:37,980 --> 00:08:40,039 I tako je to način za nas isprobati kod 189 00:08:40,039 --> 00:08:43,089 stvarno brzo bez korištenja naša ID ili koristite naš lokalni stroj 190 00:08:43,089 --> 00:08:44,290 ili što god. 191 00:08:44,290 --> 00:08:47,670 To je vrlo brz način za vas da mockup i isprobati različite vrste koda. 192 00:08:47,670 --> 00:08:50,560 >> Tako ću biti uzimajući primjer koda, stavljajući ga ovdje. 193 00:08:50,560 --> 00:08:52,374 Ćemo raditi kroz njega. 194 00:08:52,374 --> 00:08:54,540 A ako ste kod kuće, može povući to kao dobro. 195 00:08:54,540 --> 00:08:57,530 A ja već instalirali Reagirati ovdje, tako da možete jednostavno 196 00:08:57,530 --> 00:09:00,770 napisati vlastiti kod ovdje, i pokušajte ga kao svoj vlastiti igralište. 197 00:09:00,770 --> 00:09:04,940 >> Da, ako se svi otvoriti ovaj link ovdje. 198 00:09:04,940 --> 00:09:08,080 Molim Vas, dajte mi palac se nakon što su ga otvoriti. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Cool, super cool. 201 00:09:13,770 --> 00:09:16,914 Nema ništa ovdje sada, ali mi ćemo to promijeniti vrlo brzo. 202 00:09:16,914 --> 00:09:21,250 >> U redu, tako da Reagirati je JavaScript biblioteka, i kao takva, 203 00:09:21,250 --> 00:09:24,480 zahtijeva poznavanje JavaScripta, što je web programski jezik. 204 00:09:24,480 --> 00:09:27,660 I to se koristi za druge stvari sada previše, ali prije svega je web razvoj 205 00:09:27,660 --> 00:09:32,040 jezik, pa ako niste upoznati s da, pročitali site zove JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 Predivno je. 207 00:09:32,700 --> 00:09:34,240 Možete naučiti JavaScript za pola sata. 208 00:09:34,240 --> 00:09:34,990 To je nevjerojatno. 209 00:09:34,990 --> 00:09:36,420 >> Dakle, dati ga čitati. 210 00:09:36,420 --> 00:09:39,960 Također smo puno HTML ovdje jer mi smo izraditi web stranice, naravno. 211 00:09:39,960 --> 00:09:43,890 Dakle, ako ste upoznati s HTML, provjerite HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Mislim učenje Reagirati je milijun puta lakše ako već 213 00:09:46,520 --> 00:09:47,892 znam blokova. 214 00:09:47,892 --> 00:09:50,600 Ako imate komponente, to je lako napraviti veću komponentu. 215 00:09:50,600 --> 00:09:51,860 To je Reagirati jezik za vas. 216 00:09:51,860 --> 00:09:54,270 >> Pa ići naprijed i dati te stvari čitanje. 217 00:09:54,270 --> 00:09:55,070 Stanka ovaj video. 218 00:09:55,070 --> 00:09:57,440 Dajte ga pročitati ako ste kod kuće ako niste 219 00:09:57,440 --> 00:10:00,794 upoznati s HTML ili JavaScript 220 00:10:00,794 --> 00:10:02,960 OK, pa što ćemo učiniti je da ćemo napraviti 221 00:10:02,960 --> 00:10:06,470 vrlo osnovni flashcard app koristi reagirati. 222 00:10:06,470 --> 00:10:08,210 Ćemo imati Flashcard. 223 00:10:08,210 --> 00:10:09,880 Možete flip karticu natrag i naprijed. 224 00:10:09,880 --> 00:10:12,399 A mi ćemo također imati popis sve karte koje imamo, 225 00:10:12,399 --> 00:10:14,190 a ako smo osjećaj ambiciozna, što bi mogao biti 226 00:10:14,190 --> 00:10:17,060 mogućnosti za prebacivanje između automobili klikom na njih. 227 00:10:17,060 --> 00:10:20,360 >> No, to je, vaš goli kosti, vrlo jednostavno reagirati aplikaciju. 228 00:10:20,360 --> 00:10:22,560 I tako to je zapravo ne trivijalan za provedbu, 229 00:10:22,560 --> 00:10:26,030 ali ćemo pokazati da, ako ništa to, to je vrlo, vrlo lako ga proširiti 230 00:10:26,030 --> 00:10:27,680 ako drugi ljudi vam pomoći s njom. 231 00:10:27,680 --> 00:10:33,750 Tako ćemo proći kroz četiri koraka počevši od nule graditi ovo. 232 00:10:33,750 --> 00:10:36,740 >> OK, četiri koraka, mi ćemo krenuti s prvim korakom. 233 00:10:36,740 --> 00:10:39,790 Prvi korak će biti izgradnju svoje prve komponente. 234 00:10:39,790 --> 00:10:44,830 Kao što sam rekao prije, komponenta reagiraju je samo HTML element na steroidima. 235 00:10:44,830 --> 00:10:49,660 On navodi HTML i neki ponašanja, te 236 00:10:49,660 --> 00:10:52,600 će odrediti kako su ljudi mogu komunicirati s njim koliko 237 00:10:52,600 --> 00:10:54,270 to bi unutarnje stanje. 238 00:10:54,270 --> 00:10:57,630 Kao gumb će znati kao koliko puta to je bio kliknuli na primjer, 239 00:10:57,630 --> 00:11:01,010 i to će znati kako da se stavi van. 240 00:11:01,010 --> 00:11:04,430 >> Tako ćemo ići naprijed i graditi naše Prva komponenta pomoću JavaScript. 241 00:11:04,430 --> 00:11:09,711 Dakle, ako je sintaksa izgleda čudno, to je zato što je vrsta. 242 00:11:09,711 --> 00:11:11,710 Dakle, opet, idemo napraviti varijablu nazvanu 243 00:11:11,710 --> 00:11:14,580 Aplikacija pomoću ključne riječi neka, što čini varijablu, 244 00:11:14,580 --> 00:11:18,210 neka aplikacija jednak React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> Reagirati je knjižnica i ima Napravi klase funkciju. 246 00:11:22,609 --> 00:11:24,400 I ovo je funkcija malo koda koji vas 247 00:11:24,400 --> 00:11:29,090 može koristiti za stvaranje nove Vrsta reagirati komponentu. 248 00:11:29,090 --> 00:11:32,780 I tako React.createClass čini komponentu, 249 00:11:32,780 --> 00:11:35,270 a to će komponenta biti u mogućnosti to učiniti stvari. 250 00:11:35,270 --> 00:11:40,460 Glavna stvar može učiniti je donijeti nešto donijeti u funkciji. 251 00:11:40,460 --> 00:11:44,500 >> Opet, ako se ovaj indeks nije očito ti, preporučujem vam ići na JS za mačke 252 00:11:44,500 --> 00:11:45,682 i to provjeriti. 253 00:11:45,682 --> 00:11:47,710 Je li to zumira dovoljno dobro? 254 00:11:47,710 --> 00:11:48,490 Cool. 255 00:11:48,490 --> 00:11:50,670 >> Tako da svaki sastavni potrebe imati pružanje funkciju. 256 00:11:50,670 --> 00:11:53,010 Render funkcija kaže: Što sam ispisati na ekranu? 257 00:11:53,010 --> 00:11:54,760 No komponenta beskorisno ako to ne 258 00:11:54,760 --> 00:11:58,060 Znati što se ispisati na ekranu, tako da morate imati pružanje funkciju. 259 00:11:58,060 --> 00:12:01,904 >> Tako je u žbuke stvar, samo trebate se vratiti neke HTML. 260 00:12:01,904 --> 00:12:03,820 A što je cool jest da postoji stvar koja se zove 261 00:12:03,820 --> 00:12:08,660 JSX, koji je produžetak JavaScript koja se koristi reagirati. 262 00:12:08,660 --> 00:12:11,845 To vam pisati HTML unutar vaše JavaScript koja 263 00:12:11,845 --> 00:12:13,970 zvuči vrsta čudno kad prvi put razmišljam o tome, 264 00:12:13,970 --> 00:12:15,553 ali to čini puno smisla poslije. 265 00:12:15,553 --> 00:12:17,430 Dakle, možemo to učiniti. 266 00:12:17,430 --> 00:12:21,360 Ako ste upoznati s HTML, ja znam imamo div sa opće namjene 267 00:12:21,360 --> 00:12:22,790 Spremnik za stvari. 268 00:12:22,790 --> 00:12:26,380 Možemo se vratiti div, a unutar ovaj div, možemo staviti stvari. 269 00:12:26,380 --> 00:12:32,390 >> Dakle, recimo da želimo pružiti samo ravno-up flashcard za sada. 270 00:12:32,390 --> 00:12:34,890 Flashcard, rekao bih, će imati pitanje i odgovor. 271 00:12:34,890 --> 00:12:37,530 Dakle, u ovom div, neka je ispisati stavak 272 00:12:37,530 --> 00:12:42,155 koji kaže question-- Što je konačan odgovor na život, svemir? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 A onda je odgovor će biti, naravno, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> To nije došao i na sve. 277 00:12:59,730 --> 00:13:04,164 Da, tako da u osnovi možete stvarno pisanje HTML unutar vašeg JavaScript. 278 00:13:04,164 --> 00:13:06,330 A to će biti ispisati na ekranu. 279 00:13:06,330 --> 00:13:08,250 Tako ćemo ga isprobati. 280 00:13:08,250 --> 00:13:09,520 >> Dakle, mi imamo komponentu. 281 00:13:09,520 --> 00:13:12,210 Moramo reći reagirati staviti je komponenta na zaslonu 282 00:13:12,210 --> 00:13:18,990 tako React.render, pa primijetiti da smo liječenje aplikaciju kao bilo koji drugi element. 283 00:13:18,990 --> 00:13:21,010 Mi ga pisati kao što je to HTML element. 284 00:13:21,010 --> 00:13:25,100 Kao i umjesto da govori kao IMG za sliku ili p za stavku, 285 00:13:25,100 --> 00:13:28,120 pišete App, pa App tretira kao HTML elementa. 286 00:13:28,120 --> 00:13:30,380 Kao što sam rekao prije, to je element na steroidima. 287 00:13:30,380 --> 00:13:32,870 >> Tako da donese App, a vi dati mu mjesto da ga stavite. 288 00:13:32,870 --> 00:13:37,170 A to je, kako možete reci to gdje da ga stavi. 289 00:13:37,170 --> 00:13:46,200 Ja sam stvorio jednostavan div na stranica zove s ID stranice, 290 00:13:46,200 --> 00:13:48,300 i to je gdje je Element će ići. 291 00:13:48,300 --> 00:13:49,841 >> A mi ne ide na trčanje sa HTML. 292 00:13:49,841 --> 00:13:53,145 Uglavnom ovo je idući u dobiti staviti unutar ove stranice elementa 293 00:13:53,145 --> 00:13:54,270 da imamo na zaslonu. 294 00:13:54,270 --> 00:13:59,210 Tako to radi ovaj kod, a to privlači ova stvar na zaslonu, tako da smo ovdje. 295 00:13:59,210 --> 00:14:01,770 Mi smo napravili naš prvi reagiraju komponentu. 296 00:14:01,770 --> 00:14:08,000 >> Dakle, baš kao rekapitulacija, mi nježno napravili novi tip komponente, zar ne? 297 00:14:08,000 --> 00:14:10,145 To je ono što React.createClass. 298 00:14:10,145 --> 00:14:12,680 I u toj komponenti, mi to je rekao ono što je trebao učiniti. 299 00:14:12,680 --> 00:14:15,590 Kad god ova komponenta je ispisati na ekranu, 300 00:14:15,590 --> 00:14:19,300 to će ispisati div s dva stavci unutar nje. 301 00:14:19,300 --> 00:14:24,460 >> A što smo učinili, napravili smo novu aplikaciju pomoću kuta nosača app zapis. 302 00:14:24,460 --> 00:14:27,160 To rekli smo da ga unutar elementa stranice. 303 00:14:27,160 --> 00:14:29,867 I tako ono što sam učinio, on je stvorio nova aplikacija iz tog predloška. 304 00:14:29,867 --> 00:14:31,200 A onda sam ga rekao da to čine. 305 00:14:31,200 --> 00:14:33,680 Tako je rekao, u redu, aplikacija, što bih trebao isprintati? 306 00:14:33,680 --> 00:14:36,970 Asi kaže, ići ispisati div sa dva odlomka unutar nje. 307 00:14:36,970 --> 00:14:40,420 I voila, tu je naš div s dvije točke unutar nje. 308 00:14:40,420 --> 00:14:43,180 Smisla sada? 309 00:14:43,180 --> 00:14:46,690 >> Dakle, opet, cijeli izazov reagirati je samo znati kako napraviti komponente. 310 00:14:46,690 --> 00:14:48,500 Kako napraviti dijelovi rade zajedno. 311 00:14:48,500 --> 00:14:51,780 Sad kad smo napravili naš prvi komponenta, idemo natrag 312 00:14:51,780 --> 00:14:54,284 i čine sastavni prilagodljiv. 313 00:14:54,284 --> 00:14:56,700 Pa znate kako je u HTML si mogu dati svoje gumbe klase? 314 00:14:56,700 --> 00:14:59,146 Možete dati svoje sidra na href. 315 00:14:59,146 --> 00:15:00,770 Možete dati svoje Ulazi tip, zar ne? 316 00:15:00,770 --> 00:15:04,740 Možete dati više običaj svojstva sve svoje elemente 317 00:15:04,740 --> 00:15:06,490 da bi ga više zanimljiv. 318 00:15:06,490 --> 00:15:09,030 A mi zapravo može učiniti točno istu stvar. 319 00:15:09,030 --> 00:15:17,500 >> Dakle, recimo da želimo da naša Aplikacija ići donijeti nikakvu karticu. 320 00:15:17,500 --> 00:15:19,630 Sada smo upravo donio kodirano karticu. 321 00:15:19,630 --> 00:15:22,530 Mi znamo da postoji samo jedan Kartica se može učiniti, tako da smo 322 00:15:22,530 --> 00:15:25,960 će pokušati i promijeniti to sada tako da mi samo možemo dati neki karticu. 323 00:15:25,960 --> 00:15:27,410 To će ispisati karticu. 324 00:15:27,410 --> 00:15:29,380 >> Trebao bi probati i napraviti svoje Komponente vrlo opće namjene. 325 00:15:29,380 --> 00:15:31,654 Dakle, ovaj put sam mogao e-mail ovo je moj prijatelj i biti poput, 326 00:15:31,654 --> 00:15:33,820 god flashcard imate, samo ga hraniti u ovdje, 327 00:15:33,820 --> 00:15:35,290 i to ću to učiniti sama. 328 00:15:35,290 --> 00:15:37,650 Možete staviti druge stvari u svoje vlastite aplikacije. 329 00:15:37,650 --> 00:15:40,600 >> Ali prvo, neka je razbiti ovaj u dvije komponente, 330 00:15:40,600 --> 00:15:44,500 ali želimo odvojiti karticu ispisivanje dio od stvarne aplikacije dijelu. 331 00:15:44,500 --> 00:15:46,660 Dakle, ono što možemo učiniti je da može promijeniti ovu iz App 332 00:15:46,660 --> 00:15:51,300 da CardView, samo novo ime za aplikaciju, 333 00:15:51,300 --> 00:15:54,450 i možemo napraviti novi komponenta naziva App, 334 00:15:54,450 --> 00:15:56,336 ne treba brkati sa starim App. 335 00:15:56,336 --> 00:16:00,730 Moramo se createClass, i kao u HTML, 336 00:16:00,730 --> 00:16:03,590 možete gnijezdo reagiraju komponente u jedan od drugoga. 337 00:16:03,590 --> 00:16:16,430 >> Tako je u ovom uzvratiti funkciji, Funkcija povratka CardView, 338 00:16:16,430 --> 00:16:18,234 i to je točno istu stvar. 339 00:16:18,234 --> 00:16:19,400 Pogledajte zašto je to ista stvar? 340 00:16:19,400 --> 00:16:22,590 Umjesto renderiranje samo app koji ima div i uparivanje unutar nje, 341 00:16:22,590 --> 00:16:26,194 app čini se CardView, a CardView čini div i stav. 342 00:16:26,194 --> 00:16:29,110 Dakle, ovo je naš prvi primjer gnijezde elementi unutar svake druge. 343 00:16:29,110 --> 00:16:32,177 Ima li to smisla? 344 00:16:32,177 --> 00:16:33,760 Dakle, opet, imamo CardView element. 345 00:16:33,760 --> 00:16:37,250 Imamo aplikacija elemenata da je veći od. 346 00:16:37,250 --> 00:16:40,990 >> U redu, pa želimo da naši CardView-- ako vas dati dobar CardView određenu karticu, 347 00:16:40,990 --> 00:16:43,370 to će ispisati za vas, zar ne? 348 00:16:43,370 --> 00:16:48,050 Prvo, moramo napraviti karticu, pa neka je napraviti objekt kartice. 349 00:16:48,050 --> 00:17:02,930 Pa neka mi karticu equal-- Ako ste svi upoznati, 350 00:17:02,930 --> 00:17:05,260 to je samo zapis odluka objekt u JavaScript. 351 00:17:05,260 --> 00:17:09,280 To je vrsta kao STRUCT u C, pa smo napravili karticu, 352 00:17:09,280 --> 00:17:15,920 pa sada možemo proći ovu karticu kao svojstvo ili kao atribut u HTML 353 00:17:15,920 --> 00:17:17,290 terminologija u našu aplikaciju. 354 00:17:17,290 --> 00:17:20,210 Dakle, možemo to učiniti, App kartice jednaka myCard. 355 00:17:20,210 --> 00:17:23,200 >> Znate kako je u ulazu, radite Vrsta ulaza jednaka tekst ili gumb 356 00:17:23,200 --> 00:17:25,240 klasa jednaka BTN za bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Ista ideja, App kartice equals-- moraš staviti aparatić here-- 358 00:17:29,500 --> 00:17:33,830 App kartice jednaka myCard, tako da to kaže da su ove kartice objekt. 359 00:17:33,830 --> 00:17:39,149 Idem ga prođe kao Objekt se app komponentu. 360 00:17:39,149 --> 00:17:41,440 I ovaj app će komponenta moći pristupiti i raditi 361 00:17:41,440 --> 00:17:43,580 Zanimljivo stvari s njim. 362 00:17:43,580 --> 00:17:47,650 >> Dakle, naša aplikacija će biti dati kartica, tako da za sada, 363 00:17:47,650 --> 00:17:49,980 neka je imati aplikaciju samo dati kartica na CardView 364 00:17:49,980 --> 00:17:53,110 sama jer kao app nije će znati što učiniti s njom, 365 00:17:53,110 --> 00:17:54,850 pa smo samo ćete ga dati na CardView. 366 00:17:54,850 --> 00:18:00,050 Tako ćemo ga u sredinu Isto tako, kartice jednaka, 367 00:18:00,050 --> 00:18:05,426 pa svaka komponenta može pristupiti stvari koje je dao za njega. 368 00:18:05,426 --> 00:18:07,800 Oni mogu pristupiti svojstva koje su dali za njega 369 00:18:07,800 --> 00:18:09,470 koristite ovu sintaksu, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Dakle, ono što se događa ovdje imate myCard objekt. 372 00:18:14,920 --> 00:18:18,250 Možete ga prođe u aplikaciji pomoću aplikacije kartice jednaka myCard. 373 00:18:18,250 --> 00:18:21,420 Taj objekt kartica daje svoj app. 374 00:18:21,420 --> 00:18:24,400 Aplikacija se može pristupiti kao this.props.card. 375 00:18:24,400 --> 00:18:28,780 To je vrsta kao slike zna što je izvor. 376 00:18:28,780 --> 00:18:31,972 >> Ovaj app zna što je kartica je, a to može učiniti stvari s njim. 377 00:18:31,972 --> 00:18:32,930 To možete učiniti računanja. 378 00:18:32,930 --> 00:18:35,290 To može donositi odluke na temelju izvan nje. 379 00:18:35,290 --> 00:18:39,950 >> Za sada, bio sam idući u proći this.props.card na CardView. 380 00:18:39,950 --> 00:18:43,420 Smisla sada? 381 00:18:43,420 --> 00:18:45,210 To će učiniti više smisla sada. 382 00:18:45,210 --> 00:18:46,990 >> U redu, tako da sada smo na CardView. 383 00:18:46,990 --> 00:18:51,719 Naš CardView, s obzirom na kartice, trebali ispisati svoje pitanje i odgovor. 384 00:18:51,719 --> 00:18:54,510 Sada mi samo isprintati neke kodirano pitanja i odgovori. 385 00:18:54,510 --> 00:18:57,720 Moramo shvatiti out-- trebamo pitati karticu koja su nam dali 386 00:18:57,720 --> 00:19:01,360 što je pitanje i odgovor, a zatim ispisati ovo na zaslonu. 387 00:19:01,360 --> 00:19:02,470 >> Dakle, možemo to učiniti ovdje. 388 00:19:02,470 --> 00:19:06,135 U donijeti begin-- prvo učiniti jednako. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Dakle, ono što mi radimo ovdje znamo da je kartice su nam dani na imovinu, 391 00:19:13,050 --> 00:19:13,580 pravo? 392 00:19:13,580 --> 00:19:15,930 To daje nam kao ulaz. 393 00:19:15,930 --> 00:19:19,440 Kao što je gotovo kao Argumenti u funkciji. 394 00:19:19,440 --> 00:19:22,810 Kartica je argument gotovo ovom CardView. 395 00:19:22,810 --> 00:19:25,239 >> Mi ćemo izdvojiti da je, i stavi je u varijablu pitanje. 396 00:19:25,239 --> 00:19:27,280 Provjerite je li odgovor otišao u varijablu odgovor. 397 00:19:27,280 --> 00:19:31,130 Traži da se kartica odgovoriti. 398 00:19:31,130 --> 00:19:35,072 I sada kada imamo to, umjesto da ispišete taj tekst, 399 00:19:35,072 --> 00:19:37,030 idemo ispisati sve što nam je dao. 400 00:19:37,030 --> 00:19:43,580 >> Dakle, ovo stuff-- pa idemo ugasiti pitanje odgovor. 401 00:19:43,580 --> 00:19:46,380 Idemo vidjeti ako to radi. 402 00:19:46,380 --> 00:19:52,800 Cool, pa neka je korak kroz njega još jednom za svaki slučaj. 403 00:19:52,800 --> 00:20:00,470 >> Pa moja kartica je kartica objekt, a mi daju tu karticu app. 404 00:20:00,470 --> 00:20:04,790 A aplikacija će uzeti kartice i dati ga na CardView. 405 00:20:04,790 --> 00:20:09,190 A to CardView kaže, ako vas dajte mi bilo flashcard objekt, 406 00:20:09,190 --> 00:20:11,920 Ja ću ispisati svoje pitanje i njegov odgovor, zar ne? 407 00:20:11,920 --> 00:20:14,590 >> Dakle, ono što sam mogao učiniti je da mogu pošalji ovaj kod, prvi 408 00:20:14,590 --> 00:20:16,580 kao 10 linija koda, moj moj prijatelj. 409 00:20:16,580 --> 00:20:18,820 Mogao ga ugraditi u njegova primjena. 410 00:20:18,820 --> 00:20:27,200 I koliko god je učinio istu stvar, kao CardView kartice jednaka je ovaj, 411 00:20:27,200 --> 00:20:30,580 dok god je on stvorio CardView i dao mu prave informacije, 412 00:20:30,580 --> 00:20:31,987 mogao donijeti svoju karticu. 413 00:20:31,987 --> 00:20:34,320 I tako na taj način, to je stvarno cool način za vas da izgrade 414 00:20:34,320 --> 00:20:35,906 komponente koje koriste jedni druge, zar ne? 415 00:20:35,906 --> 00:20:38,280 Ova kartica, mogao sam objaviti ovo CardView na internetu, 416 00:20:38,280 --> 00:20:39,790 a ljudi će biti u mogućnosti koristiti ga. 417 00:20:39,790 --> 00:20:45,070 Tako je u osnovi, to je kao jedna od standardne funkcije u C knjižnici. 418 00:20:45,070 --> 00:20:47,280 >> To je funkcija gdje netko ga je napisao. 419 00:20:47,280 --> 00:20:48,419 Možete dati određeni doprinos. 420 00:20:48,419 --> 00:20:49,710 To će proizvesti određeni izlaz. 421 00:20:49,710 --> 00:20:50,890 Ne zanima me koliko to radi interno. 422 00:20:50,890 --> 00:20:53,790 Kao čeznuti kao te dati pravo ulaz, to će napraviti pravi izlaz. 423 00:20:53,790 --> 00:20:57,850 >> I komponenta može biti pomisli na isti način. 424 00:20:57,850 --> 00:21:00,280 To je kao CardView funkcija knjižnice. 425 00:21:00,280 --> 00:21:03,400 Ako ste dati neki karticu kao nekretnine, to će 426 00:21:03,400 --> 00:21:05,095 ispisati sadržaj tu karticu. 427 00:21:05,095 --> 00:21:16,820 Kao ako promijenim karticu za umjesto da bude kao što je 5 plus 37, 428 00:21:16,820 --> 00:21:19,210 to će se ažurirati u skladu s tim. 429 00:21:19,210 --> 00:21:21,955 Tako je samo promjenom ulaz, dobiva određeni izlaz. 430 00:21:21,955 --> 00:21:24,830 Tako se možete sjetiti komponenti gotovo kao funkcije na taj način, što 431 00:21:24,830 --> 00:21:25,920 možete staviti zajedno. 432 00:21:25,920 --> 00:21:29,440 Možete dobiti ulaz, kao što je ovaj CardView kao ulaz, te dobiti izlaz. 433 00:21:29,440 --> 00:21:31,900 U tom slučaju, izlaz je HTML. 434 00:21:31,900 --> 00:21:34,404 Smisla sada? 435 00:21:34,404 --> 00:21:36,890 Cool, pa opet, svojstva Kako možete proći podatke 436 00:21:36,890 --> 00:21:40,900 ui iz komponenti. 437 00:21:40,900 --> 00:21:42,740 >> OK, neka je učiniti ovo stvar interaktivni. 438 00:21:42,740 --> 00:21:44,450 Sada je to vrsta dosadno. 439 00:21:44,450 --> 00:21:45,520 Što je [nečujan]? 440 00:21:45,520 --> 00:21:48,210 Možete ispisati neke od njih, ali to je sve što mogu učiniti. 441 00:21:48,210 --> 00:21:51,550 >> Dakle, vratimo se na staro pitanje samo za sada. 442 00:21:51,550 --> 00:21:54,405 OK, upravo sada ti dijelovi su dosadno jer sve što im je činiti, 443 00:21:54,405 --> 00:21:55,030 su dobili ulaz. 444 00:21:55,030 --> 00:21:56,100 Oni čine izlaz, zar ne? 445 00:21:56,100 --> 00:21:57,049 To je vrsta dosadno. 446 00:21:57,049 --> 00:21:59,090 Želimo da se naš komponente da bi mogli imati 447 00:21:59,090 --> 00:22:02,150 neka vrsta unutarnjeg stanja, kao što se sjetiti nešto. 448 00:22:02,150 --> 00:22:05,320 >> Za flashcard za primjer, kakvu državu 449 00:22:05,320 --> 00:22:07,550 možda želite zapamtite za flashcard? 450 00:22:07,550 --> 00:22:09,740 Što privremeni status možda želite zapamtiti 451 00:22:09,740 --> 00:22:12,491 za flashcard u flashcard app? 452 00:22:12,491 --> 00:22:13,990 PUBLIKA: Bilo je to bio zrcaljeno? 453 00:22:13,990 --> 00:22:14,990 Neel Mehta: Da, u pravu. 454 00:22:14,990 --> 00:22:17,665 Tako možda želite zadržati zapis ste suočiti se ili su 455 00:22:17,665 --> 00:22:19,100 ste licem prema dolje na kartici. 456 00:22:19,100 --> 00:22:23,420 Na Facebooku, na primjer, što bi želim sjetiti gdje u news feed 457 00:22:23,420 --> 00:22:25,870 si ti ili tko je želio profil radiš upravo sada. 458 00:22:25,870 --> 00:22:30,127 >> Na Messenger, kao što je tekst koji unesite u okvir za unos, zar ne? 459 00:22:30,127 --> 00:22:31,710 Ako osvježite stranicu, to ide dalje. 460 00:22:31,710 --> 00:22:32,793 Ali ti stvarno ne briga. 461 00:22:32,793 --> 00:22:33,770 To je samo privremeno. 462 00:22:33,770 --> 00:22:34,548 Da? 463 00:22:34,548 --> 00:22:36,152 >> PUBLIKA: [nečujan] 464 00:22:36,152 --> 00:22:38,360 Neel Mehta: Kao trenu kartica, kao što se može viđenje 465 00:22:38,360 --> 00:22:40,290 strana pitanje ili bočni odgovor? 466 00:22:40,290 --> 00:22:41,070 >> PUBLIKA: U redu. 467 00:22:41,070 --> 00:22:43,270 >> Neel Mehta: Poput dvostrano Flashcard, zar ne? 468 00:22:43,270 --> 00:22:46,370 Da, tako želite ima tu ideju sada 469 00:22:46,370 --> 00:22:50,370 Imam svojstva, koja je poput ulaza, ali država koja je privremeno, uh, 470 00:22:50,370 --> 00:22:51,839 gdje ste na stranici, zar ne? 471 00:22:51,839 --> 00:22:54,380 Opet, rekao sam u Facebook Poslanik, imam kao što osoba 472 00:22:54,380 --> 00:22:56,550 pregledavate Facebook ili tko je profil, zar ne? 473 00:22:56,550 --> 00:22:58,030 >> To je samo privremeno. 474 00:22:58,030 --> 00:23:01,200 Važno je pokazati korisniku što se događa, ali osvježite stranicu. 475 00:23:01,200 --> 00:23:02,250 To zapravo ne smeta. 476 00:23:02,250 --> 00:23:04,530 Dakle, to je privremeno stanje, tako da sve što je država. 477 00:23:04,530 --> 00:23:06,250 >> Dakle, opet, tu je država i rekvizite. 478 00:23:06,250 --> 00:23:09,084 Rekviziti je ulaz dao iz izvora podataka. 479 00:23:09,084 --> 00:23:10,250 Država je kao zadane. 480 00:23:10,250 --> 00:23:13,700 To je baš kao i stvari koje čini stvar interaktivni. 481 00:23:13,700 --> 00:23:17,720 >> Dakle, u našem CardView-- ćemo imati naše CardView-- tako da je lijepo. 482 00:23:17,720 --> 00:23:21,420 Ono što ćemo učiniti ovdje, idemo dotaknuti CardView i samo CardView. 483 00:23:21,420 --> 00:23:25,105 I tako je moj prijatelj koji je dobio ovo, oni ne bi primijetio nikakvu razliku. 484 00:23:25,105 --> 00:23:27,230 Oni ne bi morao mijenjati bilo koji od vlastitog koda, 485 00:23:27,230 --> 00:23:29,410 ali bih vidjeti svoje CardView dobio souped up. 486 00:23:29,410 --> 00:23:31,270 To je lijepo dio o komponentama. 487 00:23:31,270 --> 00:23:35,290 >> U redu, tako da u našem CardView, pokušajmo i pratiti hoće li se ukinuti do 488 00:23:35,290 --> 00:23:36,560 ili licem prema dolje. 489 00:23:36,560 --> 00:23:40,480 U Reagirati smo to prvo navodeći početno stanje. 490 00:23:40,480 --> 00:23:42,070 Gdje kartica početi? 491 00:23:42,070 --> 00:23:48,480 >> Tako će funkciju pod nazivom getInitialState raditi, a mi se vratiti objekt. 492 00:23:48,480 --> 00:23:53,310 Ovaj objekt sadrži neke države, i država je samo ključ-vrijednost par. 493 00:23:53,310 --> 00:23:56,950 Kao u uputiti, imate ključ i vrijednost, imate kao što ime je niz. 494 00:23:56,950 --> 00:24:01,410 >> U tom slučaju, recimo prednji je istina. 495 00:24:01,410 --> 00:24:03,760 To govori da imamo državu. 496 00:24:03,760 --> 00:24:06,570 Jedan dio države je atribut zove prednji. 497 00:24:06,570 --> 00:24:09,649 [Nečujan], tako da po defaultu, mi smo u prednjoj strani kartice, 498 00:24:09,649 --> 00:24:11,440 a možemo promijeniti ovu kao što smo flip kartice. 499 00:24:11,440 --> 00:24:13,380 Ima smisla? 500 00:24:13,380 --> 00:24:18,190 >> U redu, tako da u uzvratiti, upravo sada, mi smo pokazujući na pitanje i odgovor. 501 00:24:18,190 --> 00:24:20,860 Sada ono što smo trebali učiniti se prikazuju na pitanje 502 00:24:20,860 --> 00:24:24,370 ako smo na prednjoj strani kartice tako odgovor je u poleđini kartice. 503 00:24:24,370 --> 00:24:26,850 Zato što sve napraviti kartica interaktivni. 504 00:24:26,850 --> 00:24:28,100 Dakle, pokušajmo i ovo ovdje. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Pa, prije samo napraviti varijablu. 507 00:24:33,620 --> 00:24:37,790 Možemo pitati sada this.state.front. 508 00:24:37,790 --> 00:24:42,010 Mi pristup navode isti smo pristup rekvizite, pa this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Ako smo ispred, a zatim tekst je this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Ako smo na prednjoj strani kartice, idemo pokušati zgrabiti 512 00:24:51,360 --> 00:24:52,485 pitanje s kartice. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 Inače, ako smo na leđima kartice, što nam je činiti? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> PUBLIKA: Odgovor? 517 00:25:02,750 --> 00:25:05,041 >> Neel Mehta: Aha, pa tekst jednako this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Ali ako primijetite, mi smo pomoću država donijeti odluku 520 00:25:10,930 --> 00:25:14,420 Jer sada komponente će izgledati drugačije 521 00:25:14,420 --> 00:25:16,710 temelji off kako se oni u interakciji s njim. 522 00:25:16,710 --> 00:25:20,355 Dakle, umjesto da ispišete ove, samo mi ćemo ispisati tekst. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, pa sada, kao što vidite, vidimo samo pitanje. 525 00:25:28,650 --> 00:25:37,720 I ako sam promijeniti stanje ovdje ručno na prednje je lažna smo dobili 42 leđa. 526 00:25:37,720 --> 00:25:39,720 >> Dakle, opet, ova komponenta ima vlastitu državu. 527 00:25:39,720 --> 00:25:43,440 Kao gumb zna hoće li to je bio pritisnut ili ne, 528 00:25:43,440 --> 00:25:46,080 ova stvar ne zna što je na prednje ili na leđima. 529 00:25:46,080 --> 00:25:48,320 Po defaultu, to je na prednjoj strani. 530 00:25:48,320 --> 00:25:50,840 A onda, ako je na prednjoj strani, ćemo ispisati na pitanje. 531 00:25:50,840 --> 00:25:53,106 Ako je na stražnjoj strani, mi ćemo ispisati odgovor. 532 00:25:53,106 --> 00:25:54,980 Dakle, opet, informacije dao je isti. 533 00:25:54,980 --> 00:25:59,090 To jednostavno izgleda drugačije ovisno o tome kako ste ga programirati. 534 00:25:59,090 --> 00:26:02,670 Tako, primjerice, Facebook Messenger, čak i ako ste dobili isti izvor podataka, 535 00:26:02,670 --> 00:26:05,170 to može izgledati drugačije jer država je različita. 536 00:26:05,170 --> 00:26:08,421 Vi ste u potrazi na Poruka druge osobe. 537 00:26:08,421 --> 00:26:10,930 >> U redu, tako da je ovo sve dobro i dobro, ali sada što je zapravo 538 00:26:10,930 --> 00:26:15,940 nas moći promijeniti, bilo naša kartica naprijed ili natrag. 539 00:26:15,940 --> 00:26:19,010 Možemo to učiniti dodavanjem flip gumb, gumb na karticu koja 540 00:26:19,010 --> 00:26:22,950 će flip karticu ako je [nečujan]. 541 00:26:22,950 --> 00:26:31,770 Tako ćemo dodati gumb ovdje, ovaj gumb, a ovaj gumb će reći poklopac. 542 00:26:31,770 --> 00:26:35,650 >> I tako sada, to ne učiniti ništa. 543 00:26:35,650 --> 00:26:37,075 To samo izgleda lijepo. 544 00:26:37,075 --> 00:26:43,650 Ono što možemo učiniti je da možemo dodati klikom rukovatelj, onclick jednak this.flip, 545 00:26:43,650 --> 00:26:44,820 a mi ćemo definirati poklopac kasnije. 546 00:26:44,820 --> 00:26:47,120 Ali u osnovi, onclick je funkcija koja 547 00:26:47,120 --> 00:26:48,675 dobiva se zove kada korisnik ne klikne. 548 00:26:48,675 --> 00:26:52,330 >> Tako gumb će znati kada je bio kliknuli. 549 00:26:52,330 --> 00:26:54,750 Otišao je to bio kliknuli, to će flip kartice. 550 00:26:54,750 --> 00:26:58,382 To je vrsta kao što je vaša momak pizza dostava. 551 00:26:58,382 --> 00:27:01,590 Ti si kao, u redu, svaki put kad netko zove me, ja ću izbaviti pizzu, zar ne? 552 00:27:01,590 --> 00:27:03,420 >> Što se registrirate ovu slušatelja. 553 00:27:03,420 --> 00:27:04,530 Možete slušati događaj. 554 00:27:04,530 --> 00:27:07,657 Vi se zove, a kad je Događaj dogodi, radite nešto. 555 00:27:07,657 --> 00:27:08,240 Možete dobiti pizzu. 556 00:27:08,240 --> 00:27:11,480 U ovom slučaju, kad ste kliknuli, što flip karticu. 557 00:27:11,480 --> 00:27:14,560 >> I tako moramo definirati funkcija koja će flip kartice, 558 00:27:14,560 --> 00:27:17,930 pa ćemo napisati to pravo Ovdje, flip funkciju. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 I što misliš, Flip će učiniti? 561 00:27:23,680 --> 00:27:27,180 Opet to dobiva zove kada mi kliknite gumb Flip. 562 00:27:27,180 --> 00:27:29,406 Što bi funkcija Flip učiniti? 563 00:27:29,406 --> 00:27:34,136 >> PUBLIKA: Promjena this.state.front iz vjeran lažna, lažna na true. 564 00:27:34,136 --> 00:27:38,420 >> Neel Mehta: Aha, tako da sve što this.front is-- prednji država. 565 00:27:38,420 --> 00:27:40,930 Uzmite prednji stanje, ako to je istina, čine ga lažno. 566 00:27:40,930 --> 00:27:42,530 Ako je lažni, bi li to istina, zar ne? 567 00:27:42,530 --> 00:27:45,330 Dakle, pokušajmo to. 568 00:27:45,330 --> 00:27:48,240 >> Ne možete promijeniti stanje samo radi this.state. 569 00:27:48,240 --> 00:27:50,380 Ne možeš to učiniti. 570 00:27:50,380 --> 00:27:52,030 Ne mogu to učiniti. 571 00:27:52,030 --> 00:27:55,810 Morate koristiti funkciju zove this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Tako da mogu reći this.setState prednji debelog ovo gdje, opet, usklik 573 00:28:03,230 --> 00:28:04,330 Točka znači suprotno. 574 00:28:04,330 --> 00:28:07,420 Mislim da ako ovo. state.front Istina je, da će okrenuti lažna. 575 00:28:07,420 --> 00:28:09,170 Tako ćemo postaviti stanje iz vjeran lažna. 576 00:28:09,170 --> 00:28:11,430 Ako je lažno, mi ćemo postavljen je netočno da se istina. 577 00:28:11,430 --> 00:28:17,210 >> Samo obavijest da smo postavili i dobiti nešto drugačije, pa pokušajmo to. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, pogledajte ovo. 579 00:28:18,675 --> 00:28:21,810 Gumb Flip će sada prebacivanje naprijed-nazad stanje. 580 00:28:21,810 --> 00:28:24,990 >> I tako ovdje gdje vidite malo čarolije reagirati. 581 00:28:24,990 --> 00:28:28,420 Kao mi nikada to rekao da se ponovno pružiti. 582 00:28:28,420 --> 00:28:30,910 Mi nikada rekao da ponovno iscrtavanje ništa. 583 00:28:30,910 --> 00:28:32,630 Ako ste to bez reagirati, što bih 584 00:28:32,630 --> 00:28:34,588 su to-- vole kada Flip se klikne gumb, 585 00:28:34,588 --> 00:28:37,290 ne bi se reći da Ručno ponovno donijeti, zar ne? 586 00:28:37,290 --> 00:28:43,050 >> Reagirati je stvarno cool, da ako vas Daju određeno stanje i osobine, 587 00:28:43,050 --> 00:28:45,760 uvijek će donijeti točno istu stvar. 588 00:28:45,760 --> 00:28:48,690 I tako kad smo ikad mijenjamo država i svojstva, 589 00:28:48,690 --> 00:28:50,819 reagiraju samo ponovno čini cijelu stvar. 590 00:28:50,819 --> 00:28:52,860 Ona zna da postoji jedan-na-jedan korespondenciju 591 00:28:52,860 --> 00:28:57,270 između države i parametar i HTML. 592 00:28:57,270 --> 00:29:00,110 Dakle, kad god je bilo onih Promjene po kroz određeno stanje, 593 00:29:00,110 --> 00:29:03,750 to će promijeniti način na koji Plaća je ponovno donio. 594 00:29:03,750 --> 00:29:06,650 I tako zapravo reagiraju poput čekajući promjenu. 595 00:29:06,650 --> 00:29:09,870 >> Kad god se mijenja nešto, to će ponovno donijeti cijelu stranicu. 596 00:29:09,870 --> 00:29:12,480 A ako to zvuči neučinkovit, to je zato što bi to bilo, 597 00:29:12,480 --> 00:29:15,050 ali reagiraju koristi stvar naziva Shadow DOM. 598 00:29:15,050 --> 00:29:19,950 Umjesto izravno crtanje stranicu, to drži virtualni HTML stabla u memoriji. 599 00:29:19,950 --> 00:29:23,620 >> Znate, HTML je poput stabla, kao hijerarhijske strukture podataka. 600 00:29:23,620 --> 00:29:28,990 Ona čuva lažni stabla u memoriji, i kad god ažurirati stranicu, 601 00:29:28,990 --> 00:29:31,940 to će privući još jedan lažni stabla, i to će izračunati 602 00:29:31,940 --> 00:29:35,120 što promijeniti to treba učiniti stranica da bi dva stabla jednaka. 603 00:29:35,120 --> 00:29:38,540 Tako je u osnovi, to je gotovo ponovno čini puno. 604 00:29:38,540 --> 00:29:41,540 A onda je samo želio mijenja Stranica u malim ugađanje prema potrebi, 605 00:29:41,540 --> 00:29:44,240 tako da je vrlo, vrlo, vrlo učinkovita. 606 00:29:44,240 --> 00:29:46,970 >> Tako je u osnovi reagiraju će kad god nešto promijeniti, 607 00:29:46,970 --> 00:29:49,010 to će ponovno prikazati stranicu gotovo. 608 00:29:49,010 --> 00:29:52,830 To će shvatiti što trebam promijeniti kako bi pravi stranica odražavaju 609 00:29:52,830 --> 00:29:55,602 virtualni stranica, a to će učiniti. 610 00:29:55,602 --> 00:29:56,560 To je virtualni DOM. 611 00:29:56,560 --> 00:29:59,350 To je jedan od najvećih značajke reagirati. 612 00:29:59,350 --> 00:30:00,880 >> Ima li to smisla? 613 00:30:00,880 --> 00:30:01,540 Ima li pitanja? 614 00:30:01,540 --> 00:30:02,040 Da? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> PUBLIKA: Kako usporediti i dalje na MVC 617 00:30:08,969 --> 00:30:10,760 da smo razgovarali o Prije kao resursa. 618 00:30:10,760 --> 00:30:13,527 >> Neel Mehta: Da, pitanje je kako se to usporediti s MVC? 619 00:30:13,527 --> 00:30:14,610 Pitali ste o resursima. 620 00:30:14,610 --> 00:30:16,445 Pa, pričajmo o tome kako funkcionira. 621 00:30:16,445 --> 00:30:18,190 >> U MVC, ti bi osvježili model. 622 00:30:18,190 --> 00:30:20,560 U tom slučaju imali bismo model kartice. 623 00:30:20,560 --> 00:30:24,540 Pogled će imati Flip gumb, a kontrola 624 00:30:24,540 --> 00:30:26,310 bi flip funkciju. 625 00:30:26,310 --> 00:30:28,450 Dakle, pogled će reći Regulator za okretanje poklopac. 626 00:30:28,450 --> 00:30:30,370 Flip će reći Model mijenjati, zar ne? 627 00:30:30,370 --> 00:30:33,915 >> I tako kada napraviti MVC, ti slušati model za promjenu, 628 00:30:33,915 --> 00:30:37,150 i ponovno pružiti pogled u skladu s tim. 629 00:30:37,150 --> 00:30:39,210 Ili samo trebate sviđa imaju kontroler. 630 00:30:39,210 --> 00:30:42,418 Pričekajte model za promjenu, a zatim izabrati jedan dio kao stvar 631 00:30:42,418 --> 00:30:44,032 promijeniti. 632 00:30:44,032 --> 00:30:45,740 Ovdje imamo jednu stvar, ali u velikom app, 633 00:30:45,740 --> 00:30:48,510 morate željeli zapamtiti što promjena u svakom pojedinom mjestu, 634 00:30:48,510 --> 00:30:50,290 tako da je malo neugodno. 635 00:30:50,290 --> 00:30:53,670 I tako reagiraju lijepo jer ima Shadow Dom. 636 00:30:53,670 --> 00:30:56,040 To može priuštiti samo prepisati cijelu stvar. 637 00:30:56,040 --> 00:30:58,680 Ne morate se selektivno kao što pogodite što ažurirati. 638 00:30:58,680 --> 00:31:02,186 >> Na Facebooku ako vam se sviđa dobili novu poruku, u MVC, 639 00:31:02,186 --> 00:31:04,060 ne bi se sjećam, OK, promijeniti stvari 640 00:31:04,060 --> 00:31:06,260 na vrhu stranica, ikona poruka. 641 00:31:06,260 --> 00:31:08,290 Također pop novi prozor na dnu. 642 00:31:08,290 --> 00:31:10,070 Također provjerite novu stvar u tom prozoru. 643 00:31:10,070 --> 00:31:11,060 Također igrati zvuk. 644 00:31:11,060 --> 00:31:13,150 >> To je puno stvari izlazak istovremeno. 645 00:31:13,150 --> 00:31:15,320 I tako, ako ne imaju Sjena Dom, ti bi 646 00:31:15,320 --> 00:31:18,740 morate učiniti ručno, jer ne možete dobiti osloboditi od cijele stranice. 647 00:31:18,740 --> 00:31:21,430 Ne možete si priuštiti, tako da imate ručno promijeniti svaku stvar, 648 00:31:21,430 --> 00:31:23,990 što je stvarno neugodno u MVC. 649 00:31:23,990 --> 00:31:27,640 >> Dakle, kako bi se štedljiv, oni selektivno 650 00:31:27,640 --> 00:31:30,750 ažurirati stranicu, što je učinkovit, ali i neugodno. 651 00:31:30,750 --> 00:31:34,002 U reagirati, zbog sjene Dom, dobivate obje stvari besplatno. 652 00:31:34,002 --> 00:31:35,710 To je učinkovit, jer sjene Dom. 653 00:31:35,710 --> 00:31:37,210 Usko grlo je ažuriranje stranicu. 654 00:31:37,210 --> 00:31:40,292 Ne radi manipulacije stablo. 655 00:31:40,292 --> 00:31:41,250 Dobivate učinkovitost. 656 00:31:41,250 --> 00:31:45,420 Također dobiti jednostavnost korištenja, jer ako se samo prepisati cijelu stranicu, 657 00:31:45,420 --> 00:31:48,970 ali samo znam, u redu, stvari će biti na stranici negdje. 658 00:31:48,970 --> 00:31:51,180 To bi moglo biti na drugom mjestu, ali to će biti na stranici, zar ne? 659 00:31:51,180 --> 00:31:52,860 Tako da samo ponovno donio cijela stvar praktički, 660 00:31:52,860 --> 00:31:55,540 i možda napraviti par promjene na samoj stranici. 661 00:31:55,540 --> 00:31:57,850 >> Dakle, opet, u MVC vas će morati izabrati 662 00:31:57,850 --> 00:32:01,840 između jednostavnost uporabe i učinkovitosti, i reagirati, dobiti oboje. 663 00:32:01,840 --> 00:32:04,020 Dakle, to je bolje. 664 00:32:04,020 --> 00:32:05,220 Ima smisla? 665 00:32:05,220 --> 00:32:06,676 Čvrsta. 666 00:32:06,676 --> 00:32:12,080 >> OK, da vidimo pričajmo malo o koraku 4, 667 00:32:12,080 --> 00:32:14,740 kako možemo ugraditi komponente. 668 00:32:14,740 --> 00:32:16,260 Dakle, imamo to pravo sada. 669 00:32:16,260 --> 00:32:19,420 Mi imamo super mali gumb. 670 00:32:19,420 --> 00:32:23,157 Možemo ga okrenuti leđa i naprijed, i to je sve što radi. 671 00:32:23,157 --> 00:32:24,990 Recimo da želimo imaju drugu komponentu. 672 00:32:24,990 --> 00:32:28,730 Recimo da je naš flashcard app trebao sadržavati popis svih kartica 673 00:32:28,730 --> 00:32:31,520 da imate, tako da mi znači treba imati drugu komponentu. 674 00:32:31,520 --> 00:32:32,970 Pa, možda ga zovu prikaz popisa. 675 00:32:32,970 --> 00:32:36,200 Učinimo prikaz popisa koji koegzistira s CardView, 676 00:32:36,200 --> 00:32:39,680 i ovaj prikaz popisa i CardView će vam se svidjeti raditi zajedno. 677 00:32:39,680 --> 00:32:43,190 A možete ih kombinirati kako bi naš app za vas. 678 00:32:43,190 --> 00:32:45,160 >> Prvo, neka je napraviti par više karata u pravu. 679 00:32:45,160 --> 00:32:46,370 Recimo, ono što kartica? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 I samo tako da ne morate bore vam ga upišete u, 682 00:32:51,910 --> 00:32:53,410 Samo ću ga kopirati ovdje. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 I tako ću se ne Daju samo jednu karticu. 685 00:33:03,580 --> 00:33:06,910 Idem dati niz karata. 686 00:33:06,910 --> 00:33:10,240 Dakle, prvi su aplikacije će razbiti za sada. 687 00:33:10,240 --> 00:33:14,717 U redu, tako da ćemo napraviti to moći nositi više kartica. 688 00:33:14,717 --> 00:33:17,800 Prvo, ćemo ga dati, ne samo jedna kartica, ali niz karata, 689 00:33:17,800 --> 00:33:18,700 poput popisa kartica. 690 00:33:18,700 --> 00:33:20,980 I u ovom slučaju, imamo troje. 691 00:33:20,980 --> 00:33:27,280 >> U redu, tako da je aplikacija će dobiti popis kartice, 692 00:33:27,280 --> 00:33:29,870 i to će odlučiti koje jedna pokazati na CardView. 693 00:33:29,870 --> 00:33:33,740 CardView može samo donijeti jednu karticu, ali app 694 00:33:33,740 --> 00:33:37,610 dobiva popis svih kartica, zar ne? 695 00:33:37,610 --> 00:33:40,820 >> Dakle, kada ste shvatiti jedno kartice dati CardView, 696 00:33:40,820 --> 00:33:44,660 kako bi ti valjda da biste mogli donijeti odluku o tome koja kartica 697 00:33:44,660 --> 00:33:47,064 pokazati? 698 00:33:47,064 --> 00:33:49,980 Da bi vam dati savjet, to je privremeno Vi ćete biti gledanje određenu karticu. 699 00:33:49,980 --> 00:33:53,260 Ako osvježite stranicu, vi ćete Samo se vratiti na prvi karticu. 700 00:33:53,260 --> 00:33:55,464 To je u redu, jer je to privremeno. 701 00:33:55,464 --> 00:33:56,630 Što je tehnika možda koristimo? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> PUBLIKA: Možete napraviti varijablu pa baš kao što je imao ispred. 704 00:34:08,760 --> 00:34:11,989 Je li to istina, što bi ima struju kartice jednaka 1? 705 00:34:11,989 --> 00:34:14,150 >> Neel Mehta: Da, tako mi Želite imati državu, zar ne? 706 00:34:14,150 --> 00:34:16,080 Ti bi koristili stanje u komponenta shvatiti 707 00:34:16,080 --> 00:34:17,288 koja kartica želimo dobiti. 708 00:34:17,288 --> 00:34:19,290 Kao imamo popis sve karte, mi ćemo 709 00:34:19,290 --> 00:34:21,630 koristiti stanju shvatiti jedna od prve kartice, 710 00:34:21,630 --> 00:34:23,710 Druga kartica, treći kartica, i tako dalje. 711 00:34:23,710 --> 00:34:28,760 >> Dakle app, tako aplikacija će dobiti imaju funkciju getInitialState, 712 00:34:28,760 --> 00:34:35,020 getInitialState povratak funkcija. 713 00:34:35,020 --> 00:34:39,929 A mi ćemo samo reći activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Tako sada naša app ima svoju državu. 715 00:34:42,889 --> 00:34:47,179 >> I tako sada čine, shvatiti kartica, neka je samo ići u nizu 716 00:34:47,179 --> 00:34:49,969 i iskoristite stvar u tom indeksu. 717 00:34:49,969 --> 00:34:53,580 Odaberite kartice jednake this.props.cards this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 Dakle, kao što vidite ovdje, podupirači i država zapravo rade zajedno. 720 00:35:00,162 --> 00:35:08,990 Tako da sada imamo activeCard, ćemo ga nazvati activeCard, 721 00:35:08,990 --> 00:35:10,470 i neka je vidjeti ako to radi. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [NEČUJAN] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Oh, to je greška tekst. 726 00:35:44,900 --> 00:35:45,400 Ah. 727 00:35:45,400 --> 00:35:51,420 728 00:35:51,420 --> 00:35:54,840 >> Cool, yep, pa sada smo natrag gdje smo bili prije, zar ne? 729 00:35:54,840 --> 00:35:57,100 Isti stari program, osim Sada možemo podržati 730 00:35:57,100 --> 00:35:59,390 popis karata, a ne samo jedna kartica. 731 00:35:59,390 --> 00:36:04,130 A sada, opet, ako smo promijenili activeIndex, možemo ići od 0 do 1, 732 00:36:04,130 --> 00:36:07,330 a sad da druga kartica, a onda smo otišli na 0. 733 00:36:07,330 --> 00:36:10,390 Dakle ovdje je novi souped up verzija našeg. 734 00:36:10,390 --> 00:36:16,000 >> U redu, tako da sada neka je imaju pogled na popis koji pokazuje sve karte u svom programu, 735 00:36:16,000 --> 00:36:19,980 pa ćemo napraviti novi komponenta naziva listview. 736 00:36:19,980 --> 00:36:22,155 Neka listview jednak react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Dakle, želimo polagati neuređen popis sa stavke na popisu za svaku karticu. 739 00:36:38,800 --> 00:36:41,490 I tako imamo hrpu karata. 740 00:36:41,490 --> 00:36:44,990 Želimo jednu stavku s popisa za svaku karticu, zar ne? 741 00:36:44,990 --> 00:36:47,490 Mogli bismo učiniti za petlju ili nešto napraviti novu stavku popisa. 742 00:36:47,490 --> 00:36:50,522 No, način na koji ste to učiniti u Reagirati, koristite stvar zove karta. 743 00:36:50,522 --> 00:36:57,150 Karta je alat ili funkcija koristite da za svaki predmet, radi neke funkcije, 744 00:36:57,150 --> 00:36:59,510 Potrebno povratnu vrijednost, i daje vam to natrag. 745 00:36:59,510 --> 00:37:06,310 >> Dakle, kao primjer, imamo niz 1, 2, i to 3.map function-- 746 00:37:06,310 --> 00:37:12,120 je skraćenica za function-- x strelicama x puta x. 747 00:37:12,120 --> 00:37:16,110 To, kaže, za svaki broj u 1, 2, 3, uzmi ga. 748 00:37:16,110 --> 00:37:17,800 Trgu, i dati ga natrag. 749 00:37:17,800 --> 00:37:22,090 Dakle, što misliš 1, 2, 3.map x ide x puta 750 00:37:22,090 --> 00:37:25,480 x daje vam dati natrag da je ova funkcija 751 00:37:25,480 --> 00:37:27,680 izvoditi na svakom elementu tog polja. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> PUBLIKA: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> Neel Mehta: Aha, 1, 4, 9 jer ti 1 puta 1. 755 00:37:35,709 --> 00:37:36,500 To vam daje jedan. 756 00:37:36,500 --> 00:37:37,690 To je prvi element. 757 00:37:37,690 --> 00:37:38,530 >> 2 puta 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 puta 3 je 9. 760 00:37:40,310 --> 00:37:41,540 To je treći element. 761 00:37:41,540 --> 00:37:42,640 Ima smisla? 762 00:37:42,640 --> 00:37:45,015 Dakle, karta ima vas tehniku koristiti u funkcionalnim programera, 763 00:37:45,015 --> 00:37:48,090 novi stil programiranje učiniti nešto 764 00:37:48,090 --> 00:37:50,500 za svaki element na popisu. 765 00:37:50,500 --> 00:37:51,970 I tako to zvuči poznato. 766 00:37:51,970 --> 00:37:53,370 Imamo popis kartica. 767 00:37:53,370 --> 00:37:56,860 Želimo dobiti stavku popisa za svaku jedan, tako da ćemo koristiti samo kartu ovdje. 768 00:37:56,860 --> 00:38:00,250 Mi ćemo reći, dopustite popis equals this.props, kartice, karta. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> I tako dao posjetnicu smo će generirati stavku popisa 771 00:38:15,070 --> 00:38:17,580 Uz to kartice sadržaj strane. 772 00:38:17,580 --> 00:38:20,660 Recimo samo želimo dati kartice pitanje tako card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Dakle, ovaj popis sadrži Niz LI-a ili popis stavki 775 00:38:30,649 --> 00:38:32,440 gdje postoji jedan popis predmet za svaku karticu, 776 00:38:32,440 --> 00:38:35,150 i da sadrži kartice pitanje. 777 00:38:35,150 --> 00:38:37,640 Ima smisla? 778 00:38:37,640 --> 00:38:39,450 >> Cool, pa sada neka je zapravo ispisati da van. 779 00:38:39,450 --> 00:38:46,521 Tako ćemo se vratiti u ul. 780 00:38:46,521 --> 00:38:49,020 Unutar tog neuređen popis, samo mi ćemo držati cijeli popis 781 00:38:49,020 --> 00:38:49,890 koji su 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 >> U redu, tako da sada ovo Pogled Lista radova jednostavno pronaći. 785 00:38:56,060 --> 00:38:59,842 Bilo kakva pitanja o prikazu popisa? 786 00:38:59,842 --> 00:39:01,270 Imate hrpu karata. 787 00:39:01,270 --> 00:39:02,800 Možete napraviti stavku popisa za svaku karticu. 788 00:39:02,800 --> 00:39:05,466 A ti ih stavi unutar neuređen Lista, a ti ga vratiti. 789 00:39:05,466 --> 00:39:09,410 Dakle, sada ćemo djelovati tako da smo ugradili to unutar naše aplikacije, 790 00:39:09,410 --> 00:39:14,310 tako da možemo to učiniti, pogled popisa. 791 00:39:14,310 --> 00:39:17,070 Ono što je argument mi prođe na prikaz popisa? 792 00:39:17,070 --> 00:39:18,320 Koje osobine mi ga dati? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Zapamtite, ako vam dati to hrpa karata, 795 00:39:26,860 --> 00:39:29,590 to će napraviti popis vidjeti za one kartice. 796 00:39:29,590 --> 00:39:32,267 Pa što će nam donijeti ovdje kao argument? 797 00:39:32,267 --> 00:39:33,350 PUBLIKA: Popis kartica? 798 00:39:33,350 --> 00:39:37,130 Neel Mehta: Da, tako karticama jednako this.props.cards, zar ne? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 I tako jedini problem je da možete samo 801 00:39:44,370 --> 00:39:48,600 okrenuo jedan top level element uzvratiti, pa moraš ga zamotajte u 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 Tako ćemo vidjeti je li to. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Da li to raditi? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Da, tamo idete. 809 00:40:31,030 --> 00:40:33,700 Tako sada imamo popis kartica na dnu, 810 00:40:33,700 --> 00:40:36,180 a onda mi imamo Sama CardView na vrhu, 811 00:40:36,180 --> 00:40:40,486 i da će se okrenuti između dvije strane kartice. 812 00:40:40,486 --> 00:40:42,610 Sada se taj smisla kako sam to učinio? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Da, pa opet imamo dvije komponente. 815 00:40:46,790 --> 00:40:49,666 Prva komponenta ispisuje iz svake kartice na popisu. 816 00:40:49,666 --> 00:40:50,540 To je pogled na popis. 817 00:40:50,540 --> 00:40:54,770 I druga komponenta ispisuje samo tu karticu. 818 00:40:54,770 --> 00:40:58,840 Ako vam dati određeni karticu, to će ispisati informacije o toj kartici 819 00:40:58,840 --> 00:41:01,870 i neka vam okrenuti leđa i naprijed. 820 00:41:01,870 --> 00:41:05,850 >> Dakle, ako želimo, možemo pokušati razgovarati o dodavanju neke nove mogućnosti za to. 821 00:41:05,850 --> 00:41:09,482 Inače možemo govoriti malo više o brzini od reaktora, 822 00:41:09,482 --> 00:41:11,190 ili možemo odgovoriti pitanja koja možete imati 823 00:41:11,190 --> 00:41:15,050 jer su sve osnovne dijelove od reagiraju da želim razgovarati o tome. 824 00:41:15,050 --> 00:41:16,540 Možemo ići naprijed. 825 00:41:16,540 --> 00:41:17,590 Možemo odgovoriti na pitanja. 826 00:41:17,590 --> 00:41:18,560 Što god želiš. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> PUBLIKA: Mogu li koristiti JSX u normalnom JavaScript? 829 00:41:24,205 --> 00:41:27,150 Ili je to nešto što došao s [nečujan]? 830 00:41:27,150 --> 00:41:30,760 >> Neel Mehta: Pitanje je može koristite JSX s normalnom JavaScript? 831 00:41:30,760 --> 00:41:32,620 Odgovor je da. 832 00:41:32,620 --> 00:41:41,070 JSX je samo način je potrebno vašem JavaScript koji je HTML unutar nje, 833 00:41:41,070 --> 00:41:44,215 a sastavlja u JavaScriptu koji nema HTML unutar nje. 834 00:41:44,215 --> 00:41:47,880 Dakle, primijetite that-- tako primijetiti ovdje. 835 00:41:47,880 --> 00:41:50,820 Ovo izgleda kao da imate kao div i imate stvari unutar nje. 836 00:41:50,820 --> 00:41:54,970 >> Koji prikuplja JavaScript da kao što stvara istu stvar. 837 00:41:54,970 --> 00:41:59,590 Mislim ono što sam rekao je da je JSX je samo sintaktička, kao da je 838 00:41:59,590 --> 00:42:03,530 Preprocessoru za JavaScript mnogo kao što su PHP je Preprocessoru za HTML. 839 00:42:03,530 --> 00:42:05,490 JSC je Preprocessoru za JavaScript koji omogućuje 840 00:42:05,490 --> 00:42:12,970 staviti HTML unutar vašeg JavaScript. 841 00:42:12,970 --> 00:42:16,425 I tako, ako imate pravo transformatora što je stvar koja se zove [nečujan] 842 00:42:16,425 --> 00:42:17,300 koji će preobraziti. 843 00:42:17,300 --> 00:42:19,360 Pravo preprocesor, to će vam to učiniti. 844 00:42:19,360 --> 00:42:20,235 >> PUBLIKA: [nečujan] 845 00:42:20,235 --> 00:42:23,026 Neel Mehta: Obično ne morate staviti HTML unutar JavaScript 846 00:42:23,026 --> 00:42:24,110 osim ako radiš reagirati. 847 00:42:24,110 --> 00:42:27,146 Ali to možete učiniti u svakom slučaju. 848 00:42:27,146 --> 00:42:27,645 Da? 849 00:42:27,645 --> 00:42:29,353 >> PUBLIKA: Mislim da ti opisao Reagirati 850 00:42:29,353 --> 00:42:31,970 kao funkcionalni programiranja jeziku. 851 00:42:31,970 --> 00:42:35,646 Mi smo učenje C u CS50. 852 00:42:35,646 --> 00:42:38,032 Je C također funkcionalna jezik? 853 00:42:38,032 --> 00:42:39,990 Neel Mehta: Dakle pitanje je oko funkcionalni 854 00:42:39,990 --> 00:42:43,010 u odnosu na drugu stvar zove Imperativ ili proceduralnog programiranja. 855 00:42:43,010 --> 00:42:44,820 Postoje dvije vrste programa popularne. 856 00:42:44,820 --> 00:42:48,550 Jedan se zove proceduralne, koji je sve o kao što rade naredbi, 857 00:42:48,550 --> 00:42:51,510 i jedna je funkcionalno, što je sve o ima funkcije i vlasništvo 858 00:42:51,510 --> 00:42:52,930 ulaz i izlaz od njih. 859 00:42:52,930 --> 00:42:55,930 Reagirati je funkcionalna paradigma. 860 00:42:55,930 --> 00:42:58,010 C je vrlo proceduralna paradigma. 861 00:42:58,010 --> 00:43:02,360 >> Kao primjer, na primjer C, ne činite to deklarativno način 862 00:43:02,360 --> 00:43:04,390 izrade programa, zar ne? 863 00:43:04,390 --> 00:43:06,826 Morate reći, to ispisati. 864 00:43:06,826 --> 00:43:07,950 Promijenite ovu strukturu podataka. 865 00:43:07,950 --> 00:43:08,530 Isprintaj. 866 00:43:08,530 --> 00:43:10,160 To je sve o naredbi. 867 00:43:10,160 --> 00:43:12,640 >> U reagirati, ne postoji da mnoge naredbe. 868 00:43:12,640 --> 00:43:15,145 To je sve o vlasništvo Komponente ste stavili zajedno. 869 00:43:15,145 --> 00:43:16,300 Oni su poput funkcije. 870 00:43:16,300 --> 00:43:26,360 Imate poput funkcije zove CardView, 871 00:43:26,360 --> 00:43:28,680 koja je funkcija koja ima ulaz, izlaz, 872 00:43:28,680 --> 00:43:30,660 i tako reagiraju sve o ovom filozofije 873 00:43:30,660 --> 00:43:32,700 nas od having-- imate podatke. 874 00:43:32,700 --> 00:43:34,910 Možete proći kroz to algoritam, a to će 875 00:43:34,910 --> 00:43:36,800 Izlaz HTML koja vas Samo tiskani stranicu, 876 00:43:36,800 --> 00:43:39,180 i tako da ćete morati izgraditi ga dio po dio. 877 00:43:39,180 --> 00:43:42,800 >> Dakle crtati metaforu za ono što Rekao sam prije, znate kako 878 00:43:42,800 --> 00:43:47,050 na Facebooku ako ste dobili poruku, a vi odlučite što dijelovima ažurirati, 879 00:43:47,050 --> 00:43:47,882 to je proceduralna. 880 00:43:47,882 --> 00:43:48,840 To je imperativ, zar ne? 881 00:43:48,840 --> 00:43:49,806 OK, dobio sam poruku. 882 00:43:49,806 --> 00:43:50,930 Idemo promijeniti račun postoji. 883 00:43:50,930 --> 00:43:52,110 >> Idemo pop prozor ovdje. 884 00:43:52,110 --> 00:43:52,780 Idemo promijeniti račun postoji. 885 00:43:52,780 --> 00:43:53,700 Idemo nacrtati ovo ovdje. 886 00:43:53,700 --> 00:43:55,220 To je proceduralni pristup. 887 00:43:55,220 --> 00:44:00,240 >> To je ono što stvari kao što su kutni, Poticaj, Backbone, ostali okviri koristiti. 888 00:44:00,240 --> 00:44:01,200 Reagirati je funkcionalan. 889 00:44:01,200 --> 00:44:03,324 To je vrlo drugačiji način razmišljanja o stvarima. 890 00:44:03,324 --> 00:44:07,950 Potrebno je tu ideju neka je imaju funkcije ili algoritmi koji će vam 891 00:44:07,950 --> 00:44:08,800 Daju podatke. 892 00:44:08,800 --> 00:44:11,820 To će ispljunuti što ga bi trebao biti, a računalo 893 00:44:11,820 --> 00:44:13,490 će se pobrinuti za vaganje van. 894 00:44:13,490 --> 00:44:15,890 Vi ne ga nositi sami. 895 00:44:15,890 --> 00:44:18,470 Znači li to da bi malo smisla? 896 00:44:18,470 --> 00:44:18,970 Da? 897 00:44:18,970 --> 00:44:24,180 >> PUBLIKA: U funkcionalnom jeziku, sve događa odjednom? 898 00:44:24,180 --> 00:44:26,800 >> Neel Mehta: Ne, stvari se događaju u redu. 899 00:44:26,800 --> 00:44:29,320 Kao ovdje postoji još narediti, ali to ne 900 00:44:29,320 --> 00:44:32,390 dogoditi u redoslijedu kao pohvaliti, naredba, zapovijed. 901 00:44:32,390 --> 00:44:36,459 To se događa u redoslijedu funkcija vam daje izlaz. 902 00:44:36,459 --> 00:44:37,750 Stavite to u drugu funkciju. 903 00:44:37,750 --> 00:44:39,550 Stavite da se u drugi funkcija, još jedna funkcija. 904 00:44:39,550 --> 00:44:41,470 >> Ako to ne učinite CS51, vi ćete saznajte funkcionalne programe 905 00:44:41,470 --> 00:44:42,886 malo izvan opsega ove. 906 00:44:42,886 --> 00:44:45,090 Ali zapravo, ono što čini Reagirati svjež je ne samo 907 00:44:45,090 --> 00:44:46,840 jednosmjernog toka podataka i virtualni Dom, 908 00:44:46,840 --> 00:44:48,700 ali i ova ideja funkcionalni programiranje. 909 00:44:48,700 --> 00:44:51,720 I funkcionalna programiranje je vrlo jednostavno za sastavljanje i napraviti super stvari iz, 910 00:44:51,720 --> 00:44:53,844 i to je vrlo lako misliti oko i razum o tome. 911 00:44:53,844 --> 00:44:55,450 Dakle, to je još jedan dobar ždrijeb reagirati. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Još pitanja? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Da? 916 00:45:03,150 --> 00:45:06,840 >> PUBLIKA: Hm, zašto bi koristiti neka nasuprot var? 917 00:45:06,840 --> 00:45:10,450 >> Neel Mehta: Dakle, pitanje je zašto koristite neka umjesto var? 918 00:45:10,450 --> 00:45:13,220 To je stvar koja se zove ES6 ili ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 To je nova verzija JavaScript. 920 00:45:15,820 --> 00:45:19,050 Postoji hrpa tehničkih razloga, ali neka je bolja verzija var. 921 00:45:19,050 --> 00:45:20,724 >> To je kako se proglasi varijabli. 922 00:45:20,724 --> 00:45:21,390 Možete koristiti pustiti. 923 00:45:21,390 --> 00:45:22,140 Možete koristiti var. 924 00:45:22,140 --> 00:45:23,825 Neka ima hrpa tehničkih reasons-- možete ih pogledati 925 00:45:23,825 --> 00:45:25,610 do later-- zašto je to bolje. 926 00:45:25,610 --> 00:45:28,780 Uglavnom, ES6 ima neke lijepe Novi sintaksa, neke nove značajke 927 00:45:28,780 --> 00:45:30,720 na vrhu stare JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Tako smo kao pet minuta. 929 00:45:32,782 --> 00:45:34,990 Samo sam željela razgovarati o još jedna stvar jako brzo. 930 00:45:34,990 --> 00:45:36,450 Ako ste imali bilo kakvih pitanja, pričajmo o tome poslije. 931 00:45:36,450 --> 00:45:38,366 Ali samo tako to dobiva uhvaćen na kameru, samo sam 932 00:45:38,366 --> 00:45:41,550 želite razgovarati malo o tome kako zapravo koristiti reagirati na svoje aplikacije. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Ako idete ovdje, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 ovo je početna stranica za reagiranje, to će vam pokazati kako zapravo koristiti 936 00:46:03,320 --> 00:46:05,320 Reagirati na svojim stranicama. 937 00:46:05,320 --> 00:46:08,845 U osnovi, to je malo komplicirano pokušavate instalirati reagirati. 938 00:46:08,845 --> 00:46:12,300 To nije tako lako kao što samo povucite i ispustite JavaScript u tamo. 939 00:46:12,300 --> 00:46:15,890 >> Morate imati svoj transformator postaviti, koja će, kao što je učinio i prije, 940 00:46:15,890 --> 00:46:18,120 pretvoriti vaše JSX u normalno JavaScript. 941 00:46:18,120 --> 00:46:21,030 Morate stvar koja će sastaviti li ES6 u normalu. 942 00:46:21,030 --> 00:46:24,720 JavaScript postoji puno kretanja Dijelovi morate učiniti, tako da je stvar 943 00:46:24,720 --> 00:46:27,200 zove maloposjednik, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 I ovo je alat naredbenog retka koji će vam pomoći skela svoj Reagirati 945 00:46:31,110 --> 00:46:32,380 Projekti lako. 946 00:46:32,380 --> 00:46:38,660 >> Dakle, možete pročitati o tome kasnije, ali postoje neke alate 947 00:46:38,660 --> 00:46:40,160 da maloposjednik nudi. 948 00:46:40,160 --> 00:46:43,280 Oni će vam stvoriti Reagirati Aplikacija sa svime izgrađen. 949 00:46:43,280 --> 00:46:46,030 Kao što ćete izgradili u, komponenti izgrađen u. 950 00:46:46,030 --> 00:46:47,880 To će imati svoj transformator izgrađen u. 951 00:46:47,880 --> 00:46:50,699 Oni imaju puno kul stvari izgrađen u automatski 952 00:46:50,699 --> 00:46:52,240 pomoću tih stvari zove generatori. 953 00:46:52,240 --> 00:46:54,620 >> Pa pročitajte o tome, ako vam se sviđa. 954 00:46:54,620 --> 00:46:59,110 Dovoljno je otići na maloposjednik, Y-E-O-M-A-N, i možete pronaći generatori poput ovih. 955 00:46:59,110 --> 00:47:01,263 A s generatorima kao tih, baš kao i onaj 956 00:47:01,263 --> 00:47:03,010 je par naredbenog retka naredbe. 957 00:47:03,010 --> 00:47:05,530 To će skela iz jednog Cijeli Reagirati aplikaciju za vas. 958 00:47:05,530 --> 00:47:10,470 To će dobiti sve ručno cijevi, i roktati rad za vas, 959 00:47:10,470 --> 00:47:13,010 i to je razlog zašto ste upravo se usredotočite na samo pisanje u reagirati. 960 00:47:13,010 --> 00:47:16,739 >> Tako je u osnovi izgradnji Reagirati app je svaki bitan. 961 00:47:16,739 --> 00:47:19,530 To je žičani svi zajedno, ali postoji su alati koji će to učiniti za vas. 962 00:47:19,530 --> 00:47:23,070 Dakle, ako želite napraviti Reagirati Aplikacija, pokušajte raditi na taj način. 963 00:47:23,070 --> 00:47:26,360 Ako samo želite eksperimentirati, možete isprobati koristeći ovaj CodePen 964 00:47:26,360 --> 00:47:28,550 jer ovo CodePen ima svi reagiraju ožičenje. 965 00:47:28,550 --> 00:47:30,240 Ja sam učinio sve rade za vas već. 966 00:47:30,240 --> 00:47:34,610 >> Dakle, ako želite napraviti poput proizvodnja za oslobađanje reagiraju aplikaciju, 967 00:47:34,610 --> 00:47:37,220 probati jedan od tih generatora. 968 00:47:37,220 --> 00:47:40,240 Ako želite samo igrati okolo, to je često vrijedi samo 969 00:47:40,240 --> 00:47:44,490 kao i isprobati igranje okolo na CodePen ovdje. 970 00:47:44,490 --> 00:47:45,470 Zvuči dobro? 971 00:47:45,470 --> 00:47:45,970 Cool. 972 00:47:45,970 --> 00:47:47,890 >> Tako da je sve što imam. 973 00:47:47,890 --> 00:47:52,470 Opet, sve kod i primjeri će biti na ovim stranicama ovdje. 974 00:47:52,470 --> 00:47:55,509 Dakle, opet, nismo razgovarati o koliko sintaksa reagirati, 975 00:47:55,509 --> 00:47:57,550 ali da se naći sve one malo sintaktičke pojedinosti, 976 00:47:57,550 --> 00:48:00,320 sve će biti dostupan na ovim stranicama ovdje. 977 00:48:00,320 --> 00:48:02,660 >> Dakle, ja bih preporučiti kao poduzeti prvi korak. 978 00:48:02,660 --> 00:48:06,277 Stavite ga u svoj CodePen. 979 00:48:06,277 --> 00:48:08,110 Pokušajte raditi na tome da drugi korak. 980 00:48:08,110 --> 00:48:11,310 Postoji Četvrti korak, i samo vidjeti gdje ste dobili od toga. 981 00:48:11,310 --> 00:48:14,840 >> Još pitanja, provjerite kako tu stranicu ili email me. 982 00:48:14,840 --> 00:48:16,490 To je moj e-mail. 983 00:48:16,490 --> 00:48:19,885 Ali volio bih vam pomoći s bilo kojim pitanja koja možda imate o reagirati. 984 00:48:19,885 --> 00:48:21,010 Dakle, yep, to je sve što imam. 985 00:48:21,010 --> 00:48:23,410 Vrlo mnogo za sve vas Hvala gledate ili za sudjelovanje. 986 00:48:23,410 --> 00:48:26,820 A ja ću na sva pitanja možda ste se nakon ovog sada. 987 00:48:26,820 --> 00:48:29,140 Zato vam svima zahvaliti za gledanje. 988 00:48:29,140 --> 00:48:31,270