1 00:00:00,000 --> 00:00:02,910 >> [MUSIC SPILLE] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> NEEL Mehta: Her går det. 4 00:00:07,275 --> 00:00:11,070 >> Vel, alle sammen, velkommen til web apps i fremtiden med React. 5 00:00:11,070 --> 00:00:11,870 Dette er CS50. 6 00:00:11,870 --> 00:00:12,930 Mitt navn er Neel. 7 00:00:12,930 --> 00:00:17,689 Jeg er en TA for CS50 og en sophomore ved Harvard College og en veldig, veldig 8 00:00:17,689 --> 00:00:18,730 lidenskapelig webutvikler. 9 00:00:18,730 --> 00:00:20,730 Så jeg er veldig spennende å være å snakke med deg i dag, 10 00:00:20,730 --> 00:00:24,550 enten du er her eller hjemme ser på, om React, som er, igjen 11 00:00:24,550 --> 00:00:27,270 som jeg sa, fremtiden for web apps. 12 00:00:27,270 --> 00:00:29,055 >> Så React er en web-rammeverk. 13 00:00:29,055 --> 00:00:30,930 Og som jeg har vært å fortelle til noen mennesker her, 14 00:00:30,930 --> 00:00:33,400 et rammeverk er bare en sett med verktøy du kan bruke 15 00:00:33,400 --> 00:00:35,770 å strukturere og bygge din web app. 16 00:00:35,770 --> 00:00:39,010 Og web apps er, igjen, nettsteder som er interaktive, som Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, uansett. 18 00:00:42,330 --> 00:00:45,590 >> Så Facebook er en web-rammeverk som ble utviklet av Facebook 19 00:00:45,590 --> 00:00:48,060 et par år back-- reagere er. 20 00:00:48,060 --> 00:00:50,830 Det har siden blitt brukt i Facebook på sine mobile apps 21 00:00:50,830 --> 00:00:52,460 og web app, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy er en annen fremtredende tidlig adopter av React. 23 00:00:56,350 --> 00:00:58,630 >> Det har virkelig vært å få ekstremt populære. 24 00:00:58,630 --> 00:01:03,420 Hvis du noen gang bruke ting som Vinkel eller Ryggrad, er dette av den samme familien, 25 00:01:03,420 --> 00:01:05,830 men det har siden langt overgå deres popularitet. 26 00:01:05,830 --> 00:01:06,890 Det er den varme nye ting. 27 00:01:06,890 --> 00:01:09,590 Det er veldig, veldig stort. 28 00:01:09,590 --> 00:01:13,470 >> Og så React er bra ikke bare som en web rammeverk for å bygge grensesnitt. 29 00:01:13,470 --> 00:01:16,020 Det er bra for å bygge web-grensesnitt. 30 00:01:16,020 --> 00:01:18,350 Det er også en ting kalt React Native som 31 00:01:18,350 --> 00:01:22,200 lar deg bygge grensesnitt for Android og iOS 32 00:01:22,200 --> 00:01:26,390 og kanskje andre plattformer i fremtiden bruker akkurat det samme Javascript-kode. 33 00:01:26,390 --> 00:01:31,130 Du kan bruke nøyaktig samme Javascript-kode for å gjengi nettsider, 34 00:01:31,130 --> 00:01:33,040 å gjengi Android-apper og iOS apps. 35 00:01:33,040 --> 00:01:35,000 >> Det er en veldig, veldig spennende tid. 36 00:01:35,000 --> 00:01:37,070 Det er en veldig, veldig kul mulighet. 37 00:01:37,070 --> 00:01:42,020 Det er virkelig en universell web grensesnitt utviklingsverktøy, 38 00:01:42,020 --> 00:01:44,420 så det er en veldig, veldig viktig ting å vite. 39 00:01:44,420 --> 00:01:46,949 Og, som jeg var å fortelle folk før dette, tror jeg, 40 00:01:46,949 --> 00:01:48,990 kommer til å endre hvordan vi bygge web apps for alltid. 41 00:01:48,990 --> 00:01:55,820 Så det er kanskje litt overdrivelse, men jeg tror det er en ganske god ting å vite. 42 00:01:55,820 --> 00:01:57,580 >> OK, så hva er React? 43 00:01:57,580 --> 00:02:01,020 Reagere er et rammeverk du kan bruke for å bygge grensesnitt. 44 00:02:01,020 --> 00:02:03,240 Et grensesnitt er, igjen, en web-side, ikke sant? 45 00:02:03,240 --> 00:02:06,340 Så her er Instagram.com, bruk React. 46 00:02:06,340 --> 00:02:08,740 >> Reagere er bygget på ide av komponenter. 47 00:02:08,740 --> 00:02:11,900 En komponent er en HTML element på steroider, 48 00:02:11,900 --> 00:02:14,470 så et HTML-element er som en knapp. 49 00:02:14,470 --> 00:02:15,250 Det er et avsnitt. 50 00:02:15,250 --> 00:02:17,500 Det er en overskrift, ikke sant? 51 00:02:17,500 --> 00:02:22,740 Og Instagram vil bruke disse, men det vil også bruke komponentene av React. 52 00:02:22,740 --> 00:02:25,740 >> Reagere komponentene er souped-up HTML-elementer 53 00:02:25,740 --> 00:02:28,100 som har sin egen oppførsel finnes i dem. 54 00:02:28,100 --> 00:02:31,800 Derfor, som et eksempel, kunne vi et tidselement, en tidskomponent, 55 00:02:31,800 --> 00:02:34,095 som vil inneholde like tidsangivelsen, vet du, 56 00:02:34,095 --> 00:02:37,170 en profil komponent som vil inneholde profilbilde 57 00:02:37,170 --> 00:02:38,820 og navnet på personen. 58 00:02:38,820 --> 00:02:42,930 Det kan ha en slik teller, hvilken kan telle som antall liker, 59 00:02:42,930 --> 00:02:45,610 og hvis du klikker på den, det vil øke antall liker. 60 00:02:45,610 --> 00:02:48,200 En komponent er bare haug med HTML-kode som 61 00:02:48,200 --> 00:02:50,520 har noe av funksjonaliteten pakket inne i den. 62 00:02:50,520 --> 00:02:53,770 Så det er som en HTML-elementet på steroider, som jeg sa før. 63 00:02:53,770 --> 00:02:56,270 Du kan ta disse komponentene, og du kan sette dem sammen 64 00:02:56,270 --> 00:02:59,060 å lage nye komponenter, i dette tilfelle, en post komponent, 65 00:02:59,060 --> 00:03:00,505 som inneholder alt dette. 66 00:03:00,505 --> 00:03:04,050 Det ville inneholde Time, Profile, LikeCounter, kanskje kommentaren 67 00:03:04,050 --> 00:03:06,100 og kanskje selve bildet. 68 00:03:06,100 --> 00:03:10,810 Og så web apps er bare bygget ved å ta komponenter og sette dem sammen. 69 00:03:10,810 --> 00:03:15,620 En Instagram feed er noe mer enn en haug med innlegg etter hverandre, 70 00:03:15,620 --> 00:03:19,032 hvert innlegg inneholder som Time, Profil, LikeCounter, og så videre. 71 00:03:19,032 --> 00:03:20,490 Det er litt som å bygge et hus. 72 00:03:20,490 --> 00:03:22,660 Du trenger ikke bygge huset fra toppen og ned. 73 00:03:22,660 --> 00:03:24,960 Du tar components-- deg ta som badet. 74 00:03:24,960 --> 00:03:28,320 Du tar bedroom-- du holder dem sammen, og du har en ny komponent. 75 00:03:28,320 --> 00:03:29,760 Du har en ny del av huset. 76 00:03:29,760 --> 00:03:32,860 >> Så reagerer er alle bygget rundt denne ideen om komponenter som 77 00:03:32,860 --> 00:03:36,600 er interaktive, som er deklarative. 78 00:03:36,600 --> 00:03:39,650 Som du bare si hva en Profilen er, og det gjør det. 79 00:03:39,650 --> 00:03:40,600 De er composable. 80 00:03:40,600 --> 00:03:43,880 Du kan ta en tid og en profil, sette dem sammen, gjøre noe bedre. 81 00:03:43,880 --> 00:03:47,770 Og de er gjenbrukbare, så hvis du har kildekoden for en post, 82 00:03:47,770 --> 00:03:49,440 du kan legge det hvor som helst. 83 00:03:49,440 --> 00:03:53,160 >> Du kan legge inn en Instagram ting på din egen hjemmeside. 84 00:03:53,160 --> 00:03:56,830 Du kan legge inn i Facebook, for eksempel, så lenge som den bruker React også. 85 00:03:56,830 --> 00:04:00,360 Så komponenter er virkelig, virkelig, virkelig kraftige byggeklossene i nettet 86 00:04:00,360 --> 00:04:04,180 som kan brukes hvor som helst og sette sammen for å lage nye byggeklosser. 87 00:04:04,180 --> 00:04:07,159 Det er veldig, veldig høyt oversikt nivå. 88 00:04:07,159 --> 00:04:09,200 Så, igjen, hvis du har noen spørsmål i ethvert punkt 89 00:04:09,200 --> 00:04:14,470 om filosofien av reaktoren koding, for å stoppe meg, og gi meg beskjed. 90 00:04:14,470 --> 00:04:18,420 >> OK, så reagerer er kult fordi det har en annen måte å se 91 00:04:18,420 --> 00:04:19,870 på hvordan du bygger web apps. 92 00:04:19,870 --> 00:04:23,620 Du har sikkert hørt om MVC, en modellen du kontrollere i CS50 eller hva 93 00:04:23,620 --> 00:04:25,940 andre sondering klasser du bruker. 94 00:04:25,940 --> 00:04:29,000 Og de fleste rammer er bygget rundt ideen om MVC. 95 00:04:29,000 --> 00:04:30,410 Reagerer ikke. 96 00:04:30,410 --> 00:04:32,980 Reager er bygget rundt ideen av ensrettet dataflyt 97 00:04:32,980 --> 00:04:36,510 sett fra denne oversikten eller grafikk her. 98 00:04:36,510 --> 00:04:38,260 >> I utgangspunktet har du en datakilde. 99 00:04:38,260 --> 00:04:42,380 Og datakilden vil avgjøre hvordan å legge ut enkelte komponenter. 100 00:04:42,380 --> 00:04:45,452 Og komponentene vil så, når de endrer, 101 00:04:45,452 --> 00:04:47,160 de vil fortelle datakilde for å endre. 102 00:04:47,160 --> 00:04:49,350 >> For å bruke Instagram eksempel, kan du ha 103 00:04:49,350 --> 00:04:52,050 en liste over legg gjenstander som i en database eller noe. 104 00:04:52,050 --> 00:04:53,310 At dataene. 105 00:04:53,310 --> 00:04:57,600 Og da er vår legg komponenter vil ta disse dataene 106 00:04:57,600 --> 00:05:01,830 og bruke disse dataene til å gjengi en ting på skjermen. 107 00:05:01,830 --> 00:05:04,300 Det er hva pilen fra data til komponenten er, 108 00:05:04,300 --> 00:05:07,930 og deretter den samme informasjonen blir brukt å gjengi en haug med komponenter. 109 00:05:07,930 --> 00:05:10,290 >> I Facebook Messenger, for eksempel, som er React, 110 00:05:10,290 --> 00:05:13,410 du kan ha en liste over meldinger som datakilden. 111 00:05:13,410 --> 00:05:15,927 Og det ville gjengi ikke bare listen over meldinger 112 00:05:15,927 --> 00:05:17,510 men også en liste over venner du har. 113 00:05:17,510 --> 00:05:19,200 Du har uleste. 114 00:05:19,200 --> 00:05:23,330 Kanskje også gjengi Facebook tingen som er nederst på Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Det samme data er en enkelt kilde av sannhet 116 00:05:25,610 --> 00:05:28,290 og som fører til en rekke komponenter som skal gjengis. 117 00:05:28,290 --> 00:05:30,290 Og når en av dem komponentene endres, 118 00:05:30,290 --> 00:05:32,320 det går tilbake og endrer datakilden. 119 00:05:32,320 --> 00:05:33,460 >> Du sender en melding, ikke sant? 120 00:05:33,460 --> 00:05:34,780 Som endrer datakilden. 121 00:05:34,780 --> 00:05:39,490 Lese meldingene dine, så du setter ulest til 0. 122 00:05:39,490 --> 00:05:41,136 Som endrer datakilden. 123 00:05:41,136 --> 00:05:44,010 Og legg merke til at alle disse på ett arrow kommer tilbake til samme data 124 00:05:44,010 --> 00:05:47,662 kilde, så du vet, gitt en bestemt datasett, 125 00:05:47,662 --> 00:05:49,870 du vet nøyaktig hva siden kommer til å se ut. 126 00:05:49,870 --> 00:05:50,700 Det er deterministisk. 127 00:05:50,700 --> 00:05:53,451 Du vet, gitt visse data, hva siden kommer til å se ut. 128 00:05:53,451 --> 00:05:56,158 Du kan forutsi hvordan det kommer til å oppføre seg og hvordan det går 129 00:05:56,158 --> 00:05:57,650 å jobbe når de er satt sammen. 130 00:05:57,650 --> 00:06:00,410 >> Og hvis jeg hadde en million komponenter her, ville det virke på samme måte, ikke sant? 131 00:06:00,410 --> 00:06:02,290 Du ville ikke ha noen rare sammenhenger. 132 00:06:02,290 --> 00:06:04,120 En data gjengitt en million komponenter. 133 00:06:04,120 --> 00:06:06,879 En million komponenter kunne gå tilbake og redigere dataene. 134 00:06:06,879 --> 00:06:07,920 Og så dette er veldig hyggelig. 135 00:06:07,920 --> 00:06:10,870 Vi bygger composable, lett skalerbare web apps. 136 00:06:10,870 --> 00:06:13,150 >> Du har en datakilde, kilden til sannhet. 137 00:06:13,150 --> 00:06:15,790 Som forteller komponentene hvordan å legge ut på siden, 138 00:06:15,790 --> 00:06:18,190 og komponentene vil håndtere samspill. 139 00:06:18,190 --> 00:06:20,150 Og hvis de ønsker å endre ting, bare gå tilbake 140 00:06:20,150 --> 00:06:21,750 og fortelle datakilden for å endre. 141 00:06:21,750 --> 00:06:22,850 Gir mening? 142 00:06:22,850 --> 00:06:26,010 Så React handler om forståelse hvordan å bygge en komponent 143 00:06:26,010 --> 00:06:29,540 og hvordan du lager din komponent samhandle med omverdenen. 144 00:06:29,540 --> 00:06:31,850 >> Making komponenten samhandler med omverdenen 145 00:06:31,850 --> 00:06:34,490 bruker en annen teknologi kalt Flux, som 146 00:06:34,490 --> 00:06:36,872 er et rammeverk som er lagt på toppen av React. 147 00:06:36,872 --> 00:06:38,330 Vi kommer ikke til å snakke om det. 148 00:06:38,330 --> 00:06:42,990 Vi kommer til å snakke mer om, gitt data, hvordan kan du gjengi en komponent? 149 00:06:42,990 --> 00:06:47,010 >> Og så React er virkelig kult fordi du kan bruke den med noen bakenden du vil. 150 00:06:47,010 --> 00:06:50,480 Hvis du har som en Python bakenden, hvis Python kan spytte ut noen data, 151 00:06:50,480 --> 00:06:51,610 Reagere kan gjengi det. 152 00:06:51,610 --> 00:06:54,700 Hvis du ikke er noen JS utganger av data, reagere gjør det. 153 00:06:54,700 --> 00:06:56,890 Ruby skinner opp med data, React gjør det. 154 00:06:56,890 --> 00:07:01,860 >> Så React er i utgangspunktet en web view-- et grensesnitt med komponenter 155 00:07:01,860 --> 00:07:03,910 for alle datakilder hodet. 156 00:07:03,910 --> 00:07:07,145 Og så kommer fra datakilden til reagere komponenter er ganske enkelt. 157 00:07:07,145 --> 00:07:08,770 Går den andre veien er litt vanskeligere. 158 00:07:08,770 --> 00:07:10,462 Som bruker Flux som jeg nevnte tidligere. 159 00:07:10,462 --> 00:07:11,420 Vi vil ikke gå inn på det. 160 00:07:11,420 --> 00:07:13,740 Vi vil fokusere mer på data-til-komponent side. 161 00:07:13,740 --> 00:07:15,880 Denne måten du kan gjøre kule, morsomme web apps. 162 00:07:15,880 --> 00:07:19,870 Det vil ikke påvirke omverdenen for nå, men det er en annen historie. 163 00:07:19,870 --> 00:07:22,210 >> OK, så hvis du var her for min siste seminar 164 00:07:22,210 --> 00:07:26,610 du vet at all koden for dagens diskusjon kommer til å være på denne nettadressen 165 00:07:26,610 --> 00:07:29,320 her, beklager, denne nettadressen her. 166 00:07:29,320 --> 00:07:32,730 Og i utgangspunktet skal vi gå gjennom fire trinn, kanskje fem, 167 00:07:32,730 --> 00:07:33,510 sannsynligvis ikke fem. 168 00:07:33,510 --> 00:07:37,300 Vi vil gå gjennom fire trinn å bygge en prøve React app. 169 00:07:37,300 --> 00:07:39,550 Og så all kildekoden for hvert steg på veien 170 00:07:39,550 --> 00:07:42,216 kommer til å være akkurat her, så hvis du følger med hjemme, 171 00:07:42,216 --> 00:07:43,991 gjerne lese denne koden. 172 00:07:43,991 --> 00:07:46,740 Hvis du følger med her, Vi skal vise det på skjermen, 173 00:07:46,740 --> 00:07:47,739 så ikke bekymre deg for det. 174 00:07:47,739 --> 00:07:50,930 Men hvis du er hjemme, føler fri til å besøke dette nettstedet. 175 00:07:50,930 --> 00:07:56,400 Og, ja, bør du kunne få all koden du noen gang trenger her. 176 00:07:56,400 --> 00:08:01,380 Så det er en god jukselapp i tillegg for fremtidige opplevelser med React. 177 00:08:01,380 --> 00:08:04,490 Kult, så hvis alle som er her, og selv om du er hjemme, 178 00:08:04,490 --> 00:08:11,580 trekke opp dette nettstedet, is.gd/cs50react, ingen kapital, ingen strek, ikke noe. 179 00:08:11,580 --> 00:08:15,849 >> Du vil se en side som ser litt som dette. 180 00:08:15,849 --> 00:08:17,140 Dette er en ting som heter CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen er et samarbeids kodemiljø 182 00:08:20,030 --> 00:08:23,364 som jeg kan skrive kode her, og det vil automatisk bli sendt til deg. 183 00:08:23,364 --> 00:08:24,780 Og på denne måten kan jeg skrive kode. 184 00:08:24,780 --> 00:08:26,920 Jeg kan kjøre kode her. 185 00:08:26,920 --> 00:08:33,470 >> For example-- og hvis det reloads-- se, Jeg kjører Javascript-kode på siden 186 00:08:33,470 --> 00:08:36,390 akkurat her, og det vil automatisk gjengi en nettside 187 00:08:36,390 --> 00:08:37,980 med denne Javascript-kode. 188 00:08:37,980 --> 00:08:40,039 Og så dette er en måte for oss å prøve ut kode 189 00:08:40,039 --> 00:08:43,089 veldig rask uten å måtte bruke vår ID eller bruk vår lokale maskinen 190 00:08:43,089 --> 00:08:44,290 eller hva. 191 00:08:44,290 --> 00:08:47,670 Det er en veldig rask måte for deg å mockup og teste ut forskjellige typer kode. 192 00:08:47,670 --> 00:08:50,560 >> Så jeg kommer til å ta eksempelkode, setter den her. 193 00:08:50,560 --> 00:08:52,374 Vi kommer til å jobbe gjennom det. 194 00:08:52,374 --> 00:08:54,540 Og hvis du er hjemme, du kan trekke opp dette også. 195 00:08:54,540 --> 00:08:57,530 Og jeg har allerede installert Reagere her, så du kan bare 196 00:08:57,530 --> 00:09:00,770 skrive din egen kode her, og prøve det som din egen lekeplass. 197 00:09:00,770 --> 00:09:04,940 >> Ja, hvis alle skal åpne opp denne linken her. 198 00:09:04,940 --> 00:09:08,080 Vennligst gi meg en tommel opp når du har den åpen. 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 Det er ingenting her for nå, men vi vil endre det veldig snart. 202 00:09:16,914 --> 00:09:21,250 >> OK, så React er en Javascript bibliotek, og som sådan, 203 00:09:21,250 --> 00:09:24,480 krever kunnskap om Javascript, som er web-programmeringsspråk. 204 00:09:24,480 --> 00:09:27,660 Og det blir brukt til andre ting nå også, men først og fremst på nettet utvikler 205 00:09:27,660 --> 00:09:32,040 språk, så hvis du er ukjent med det, lese en side som heter JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 Det er fantastisk. 207 00:09:32,700 --> 00:09:34,240 Du kan lære Javascript om en halvtime. 208 00:09:34,240 --> 00:09:34,990 Det er utrolig. 209 00:09:34,990 --> 00:09:36,420 >> Så gi det en lese. 210 00:09:36,420 --> 00:09:39,960 Vi er også mye av HTML her fordi Vi designer websider selvfølgelig. 211 00:09:39,960 --> 00:09:43,890 Så hvis du ikke er kjent med HTML, sjekk ut HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Jeg tror læring React er en million ganger lettere hvis du allerede 213 00:09:46,520 --> 00:09:47,892 vet byggesteinene. 214 00:09:47,892 --> 00:09:50,600 Hvis du har komponentene, er det lett å gjøre en større komponent. 215 00:09:50,600 --> 00:09:51,860 Det er React språket for deg. 216 00:09:51,860 --> 00:09:54,270 >> Så gå videre og gi disse tingene en lese. 217 00:09:54,270 --> 00:09:55,070 Pause denne videoen. 218 00:09:55,070 --> 00:09:57,440 Gi den en lese hvis du er hjemme hvis du ikke er 219 00:09:57,440 --> 00:10:00,794 kjent med HTML eller Javascript 220 00:10:00,794 --> 00:10:02,960 OK, så hva vi kommer til å gjøre er vi kommer til å gjøre 221 00:10:02,960 --> 00:10:06,470 en helt enkel spørje app ved hjelp av React. 222 00:10:06,470 --> 00:10:08,210 Vi kommer til å ha en spørrekort. 223 00:10:08,210 --> 00:10:09,880 Du kan snu kortet frem og tilbake. 224 00:10:09,880 --> 00:10:12,399 Og vi vil også ha en liste over alle kortene som vi har, 225 00:10:12,399 --> 00:10:14,190 og hvis vi føler ambisiøs, kan vi være 226 00:10:14,190 --> 00:10:17,060 i stand til å veksle mellom biler ved å klikke på dem. 227 00:10:17,060 --> 00:10:20,360 >> Men dette er, din nakne bein, en veldig enkel React app. 228 00:10:20,360 --> 00:10:22,560 Og så dette er faktisk ikke trivielt å implementere, 229 00:10:22,560 --> 00:10:26,030 men vi kommer til å vise at hvis du gjør dette, er det veldig, veldig lett å utvide den 230 00:10:26,030 --> 00:10:27,680 hvis andre mennesker hjelpe deg med det. 231 00:10:27,680 --> 00:10:33,750 Så vi kommer til å gå gjennom fire trinn starter fra scratch for å bygge dette. 232 00:10:33,750 --> 00:10:36,740 >> Ok, så de fire trinnene, vil vi starter med det første skrittet. 233 00:10:36,740 --> 00:10:39,790 Det første trinnet skal være bygge din første komponenten. 234 00:10:39,790 --> 00:10:44,830 Som jeg sa tidligere, en komponent i React er bare et HTML-element på steroider. 235 00:10:44,830 --> 00:10:49,660 Den angir HTML og noen atferd, og det 236 00:10:49,660 --> 00:10:52,600 vil angi hvordan folk kan samhandle med det hvordan 237 00:10:52,600 --> 00:10:54,270 det ville ha intern tilstand. 238 00:10:54,270 --> 00:10:57,630 Som en knapp vil vite som hvor mange ganger det er blitt klikket for eksempel 239 00:10:57,630 --> 00:11:01,010 og det vil vite hvordan du skal legge seg ut. 240 00:11:01,010 --> 00:11:04,430 >> Så la oss gå videre og bygge vår første komponenten ved hjelp av Javascript. 241 00:11:04,430 --> 00:11:09,711 Så hvis syntaksen ser rart, det er fordi den slags er. 242 00:11:09,711 --> 00:11:11,710 Så, igjen, vi skal for å lage en variabel kalt 243 00:11:11,710 --> 00:11:14,580 app bruke søkeordet la, som gjør en variabel, 244 00:11:14,580 --> 00:11:18,210 la App lik React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> Reagere er et bibliotek og har Opprett klassen funksjon. 246 00:11:22,609 --> 00:11:24,400 Og denne funksjonen er en bit av koden som du 247 00:11:24,400 --> 00:11:29,090 kan bruke til å opprette en ny type React komponent. 248 00:11:29,090 --> 00:11:32,780 Og så React.createClass gjør en komponent, 249 00:11:32,780 --> 00:11:35,270 og denne komponenten vil kunne gjøre ting. 250 00:11:35,270 --> 00:11:40,460 Det viktigste den kan gjøre er å gjengi noe, render som en funksjon. 251 00:11:40,460 --> 00:11:44,500 >> Igjen, hvis denne indeksen er ikke opplagt for deg, anbefaler jeg at du går på JS for katter 252 00:11:44,500 --> 00:11:45,682 og sjekke det ut. 253 00:11:45,682 --> 00:11:47,710 Er det zoomet inn godt nok? 254 00:11:47,710 --> 00:11:48,490 Kjølig. 255 00:11:48,490 --> 00:11:50,670 >> Så hver komponent behov å ha en gjengi funksjon. 256 00:11:50,670 --> 00:11:53,010 Gjengi funksjon sier, hva skriver jeg ut på skjermen? 257 00:11:53,010 --> 00:11:54,760 Men komponenten ubrukelig hvis den ikke gjør det 258 00:11:54,760 --> 00:11:58,060 vet hva du skal skrive ut på skjermen, slik at du må ha en render funksjon. 259 00:11:58,060 --> 00:12:01,904 >> Så i gjengi ting, du trenger bare å gå tilbake litt HTML. 260 00:12:01,904 --> 00:12:03,820 Og hva som er kult er at det er en ting som heter 261 00:12:03,820 --> 00:12:08,660 JSX, som er en forlengelse av Javascript som brukes av reagerer. 262 00:12:08,660 --> 00:12:11,845 Det lar deg skrive HTML inne av Javascript, noe som 263 00:12:11,845 --> 00:12:13,970 høres litt rart når du først tenker på det, 264 00:12:13,970 --> 00:12:15,553 men det gjør mye fornuftig etterpå. 265 00:12:15,553 --> 00:12:17,430 Så vi kan gjøre dette. 266 00:12:17,430 --> 00:12:21,360 Hvis du er kjent med HTML, jeg vet vi har en div med en generell 267 00:12:21,360 --> 00:12:22,790 beholder for ting. 268 00:12:22,790 --> 00:12:26,380 Vi kan returnere en div, og inne Dette div, kan vi sette ting. 269 00:12:26,380 --> 00:12:32,390 >> Så la oss si at vi ønsker å gjengi bare en straight-up spørje for nå. 270 00:12:32,390 --> 00:12:34,890 Den spørje, vil jeg si, vil ha en spørsmål og svar. 271 00:12:34,890 --> 00:12:37,530 Så inne i denne div, la oss skrive ut et avsnitt 272 00:12:37,530 --> 00:12:42,155 som sier question-- Hva er den ultimate svaret på livet, universet? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 Og så er svaret kommer til å være, selvfølgelig, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Som ikke kom seg godt i det hele tatt. 277 00:12:59,730 --> 00:13:04,164 Ja, så i utgangspunktet kan du virkelig skrive HTML inne Javascript. 278 00:13:04,164 --> 00:13:06,330 Og dette kommer til å være skrives ut i skjermen. 279 00:13:06,330 --> 00:13:08,250 Så la oss prøve det ut. 280 00:13:08,250 --> 00:13:09,520 >> Så vi har vår komponent. 281 00:13:09,520 --> 00:13:12,210 Vi må fortelle React å sette komponenten på skjermen 282 00:13:12,210 --> 00:13:18,990 så React.render, så merker at vi behandle app som alle andre element. 283 00:13:18,990 --> 00:13:21,010 Vi skriver det som det var et HTML-element. 284 00:13:21,010 --> 00:13:25,100 Som i stedet for å si som img for bilde eller p for ledd, 285 00:13:25,100 --> 00:13:28,120 du skriver App, så App er behandlet som en HTML-element. 286 00:13:28,120 --> 00:13:30,380 Som jeg sa tidligere, er det et element på steroider. 287 00:13:30,380 --> 00:13:32,870 >> Så du gjengi App, og du gi den et sted å sette den. 288 00:13:32,870 --> 00:13:37,170 Og dette er hvordan du kan forteller det hvor du skal plassere den. 289 00:13:37,170 --> 00:13:46,200 Jeg har laget en enkel div på side kalt med en ID på siden, 290 00:13:46,200 --> 00:13:48,300 og det er der element kommer til å gå. 291 00:13:48,300 --> 00:13:49,841 >> Og vi kommer til å kjøre med HTML. 292 00:13:49,841 --> 00:13:53,145 I utgangspunktet er dette kommer til å få sette innsiden av denne siden element 293 00:13:53,145 --> 00:13:54,270 at vi har på skjermen. 294 00:13:54,270 --> 00:13:59,210 Så det går denne koden, og det trekker dette ting på skjermen, så her er vi. 295 00:13:59,210 --> 00:14:01,770 Vi har gjort vår første React komponent. 296 00:14:01,770 --> 00:14:08,000 >> Så akkurat som en oppsummering, vi forsiktig gjort en ny type komponent, til høyre? 297 00:14:08,000 --> 00:14:10,145 Det er hva React.createClass. 298 00:14:10,145 --> 00:14:12,680 Og ved at komponent, vi fortalte det hva den skal gjøre. 299 00:14:12,680 --> 00:14:15,590 Når denne komponenten er å skrives inn på skjermen, 300 00:14:15,590 --> 00:14:19,300 det vil skrive ut div med de to avsnittene innsiden av det. 301 00:14:19,300 --> 00:14:24,460 >> Og hva vi gjorde, gjorde vi en ny app hjelp av vinkeljern app notasjon. 302 00:14:24,460 --> 00:14:27,160 Vi fortalte det for å si det inne på siden element. 303 00:14:27,160 --> 00:14:29,867 Og så det jeg gjorde, det skapte en ny app fra denne malen. 304 00:14:29,867 --> 00:14:31,200 Og da jeg fortalte det til å gjengi det. 305 00:14:31,200 --> 00:14:33,680 Så det er sagt, OK, app, hva skal jeg skrive ut? 306 00:14:33,680 --> 00:14:36,970 App sier, gå skrive ut en div med to avsnittene innsiden av det. 307 00:14:36,970 --> 00:14:40,420 Og voila, det er vår div med to avsnittene innsiden av det. 308 00:14:40,420 --> 00:14:43,180 Fornuftig så langt? 309 00:14:43,180 --> 00:14:46,690 >> Så, igjen, hele utfordringen med React er bare å vite hvordan å lage komponenter. 310 00:14:46,690 --> 00:14:48,500 Hvordan lage den komponentene fungerer sammen. 311 00:14:48,500 --> 00:14:51,780 Nå som vi har gjort vår første komponent, la oss gå tilbake 312 00:14:51,780 --> 00:14:54,284 og lage komponenter tilpasses. 313 00:14:54,284 --> 00:14:56,700 Så du vet hvordan i HTML deg kan gi dine knapper klasser? 314 00:14:56,700 --> 00:14:59,146 Du kan gi dine ankere href. 315 00:14:59,146 --> 00:15:00,770 Du kan gi dine innspill en type, ikke sant? 316 00:15:00,770 --> 00:15:04,740 Du kan gi mer tilpasset egenskaper til alle dine elementer 317 00:15:04,740 --> 00:15:06,490 for å gjøre det mer interessant. 318 00:15:06,490 --> 00:15:09,030 Og vi faktisk kan gjøre akkurat det samme. 319 00:15:09,030 --> 00:15:17,500 >> Så la oss si at vi ønsker vår app for å gå gjengi noen kort. 320 00:15:17,500 --> 00:15:19,630 Akkurat nå er vi bare gjengitt en hardkodet kort. 321 00:15:19,630 --> 00:15:22,530 Vi vet at det er bare én kort den kan gjøre, så vi er 322 00:15:22,530 --> 00:15:25,960 skal prøve og endre dette nå så at vi kan bare gi det litt kort. 323 00:15:25,960 --> 00:15:27,410 Det vil skrive ut kortet. 324 00:15:27,410 --> 00:15:29,380 >> Du burde prøve og gjøre komponenter et veldig generelt. 325 00:15:29,380 --> 00:15:31,654 Så denne måten jeg kunne email dette er min venn og bli som, 326 00:15:31,654 --> 00:15:33,820 hva spørje du har, bare mate den inn her, 327 00:15:33,820 --> 00:15:35,290 og det vil gjøre det av seg selv. 328 00:15:35,290 --> 00:15:37,650 Du kan sette andre ting i din egen app. 329 00:15:37,650 --> 00:15:40,600 >> Men først, la oss bryte dette opp i to komponenter, 330 00:15:40,600 --> 00:15:44,500 men vi ønsker å skille ut kortet utskrift del fra selve appen delen. 331 00:15:44,500 --> 00:15:46,660 Så det vi kan gjøre er vi kan endre dette fra App 332 00:15:46,660 --> 00:15:51,300 til CardView, bare en nytt navn for app, 333 00:15:51,300 --> 00:15:54,450 og vi kan lage en ny komponent kalt App, 334 00:15:54,450 --> 00:15:56,336 må ikke forveksles med den gamle App. 335 00:15:56,336 --> 00:16:00,730 Vi har de createClass, og som i HTML, 336 00:16:00,730 --> 00:16:03,590 du kan reir React komponenter Innsiden av hverandre. 337 00:16:03,590 --> 00:16:16,430 >> Så i denne gjengi funksjon, funksjon retur CardView, 338 00:16:16,430 --> 00:16:18,234 og dette er akkurat det samme. 339 00:16:18,234 --> 00:16:19,400 Se hvorfor det er det samme? 340 00:16:19,400 --> 00:16:22,590 I stedet for å gjengi bare app som har div og sammenkobling innsiden av det, 341 00:16:22,590 --> 00:16:26,194 app gjengir CardView, og CardView gjengir div og ledd. 342 00:16:26,194 --> 00:16:29,110 Så dette er vår første eksempelet på nesting elementer inne i hverandre. 343 00:16:29,110 --> 00:16:32,177 Gir det mening? 344 00:16:32,177 --> 00:16:33,760 Så, igjen, har vi en CardView element. 345 00:16:33,760 --> 00:16:37,250 Vi har app elementer at det er større enn. 346 00:16:37,250 --> 00:16:40,990 >> OK, så vi ønsker at våre CardView-- hvis du gi en god CardView et bestemt kort, 347 00:16:40,990 --> 00:16:43,370 det vil skrive ut for deg, ikke sant? 348 00:16:43,370 --> 00:16:48,050 Så først må vi lage et kort, så la oss lage et kort objekt. 349 00:16:48,050 --> 00:17:02,930 Så la kortet mitt equal-- hvis du er alle kjent, 350 00:17:02,930 --> 00:17:05,260 dette er bare notasjon-making objekt i Javascript. 351 00:17:05,260 --> 00:17:09,280 Det er litt som en struct i C, så vi gjorde et kort, 352 00:17:09,280 --> 00:17:15,920 og så nå kan vi passere dette kortet som en eiendom eller som et attributt i HTML 353 00:17:15,920 --> 00:17:17,290 terminologi til vår app. 354 00:17:17,290 --> 00:17:20,210 Så vi kan gjøre dette, App kortet tilsvarer myCard. 355 00:17:20,210 --> 00:17:23,200 >> Du vet hvordan i input, gjør du input type lik tekst eller knappen 356 00:17:23,200 --> 00:17:25,240 klasse tilsvarer btn for bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Samme ideen, App kort equals-- du er nødt til å sette tannregulering her-- 358 00:17:29,500 --> 00:17:33,830 App-kortet er lik myCard, så dette sier at vi har dette kortet objektet. 359 00:17:33,830 --> 00:17:39,149 Jeg kommer til å gi det som en eiendom til app-komponenten. 360 00:17:39,149 --> 00:17:41,440 Og dette programmet komponent vil kunne få tilgang til det og gjøre 361 00:17:41,440 --> 00:17:43,580 interessant ting med den. 362 00:17:43,580 --> 00:17:47,650 >> Så vår app kommer til å være gitt et kort, så for nå, 363 00:17:47,650 --> 00:17:49,980 la oss ha app bare gi kortet til CardView 364 00:17:49,980 --> 00:17:53,110 selv fordi som app er ikke kommer til å vite hva de skal gjøre med det, 365 00:17:53,110 --> 00:17:54,850 så vi får bare gi den til CardView. 366 00:17:54,850 --> 00:18:00,050 Så vi vil passere det samme måte, er lik kort, 367 00:18:00,050 --> 00:18:05,426 og slik at hver komponent kan åpne ting som har blitt gitt til det. 368 00:18:05,426 --> 00:18:07,800 De kan få tilgang til egenskapene som har blitt gitt til det 369 00:18:07,800 --> 00:18:09,470 bruker denne syntaksen, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Så hva skjer her er du har myCard objektet. 372 00:18:14,920 --> 00:18:18,250 Du passerer den inn i app ved hjelp av App-kortet tilsvarer myCard. 373 00:18:18,250 --> 00:18:21,420 Dette kortet objekt er gitt til programmet ditt. 374 00:18:21,420 --> 00:18:24,400 Appen har tilgang til den som this.props.card. 375 00:18:24,400 --> 00:18:28,780 Det er litt som et bilde vet hva det er kilden er. 376 00:18:28,780 --> 00:18:31,972 >> Denne appen vet hva det er kort er, og det kan gjøre ting med det. 377 00:18:31,972 --> 00:18:32,930 Det kan gjøre beregninger. 378 00:18:32,930 --> 00:18:35,290 Det kan ta avgjørelser basert ut av det. 379 00:18:35,290 --> 00:18:39,950 >> For nå, jeg skulle til å passere this.props.card på CardView. 380 00:18:39,950 --> 00:18:43,420 Fornuftig så langt? 381 00:18:43,420 --> 00:18:45,210 Det vil være mer fornuftig nå. 382 00:18:45,210 --> 00:18:46,990 >> OK, så nå er vi på CardView. 383 00:18:46,990 --> 00:18:51,719 Vår CardView, gitt kortet, bør skrive ut sin spørsmål og svar. 384 00:18:51,719 --> 00:18:54,510 Akkurat nå er vi bare skrives ut noen hardkodede spørsmål og svar. 385 00:18:54,510 --> 00:18:57,720 Vi må finne out-- vi trenger å spørre kortet som de ga oss 386 00:18:57,720 --> 00:19:01,360 hva er spørsmålet og svaret, og deretter skrive ut dette inn i skjermen. 387 00:19:01,360 --> 00:19:02,470 >> Så vi kan gjøre dette her. 388 00:19:02,470 --> 00:19:06,135 I gjengi begin-- først gjøre lik. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Så det vi gjør her er at vi vet at kortene er gitt oss til en eiendom, 391 00:19:13,050 --> 00:19:13,580 høyre? 392 00:19:13,580 --> 00:19:15,930 Det har gitt oss som en inngang. 393 00:19:15,930 --> 00:19:19,440 Som det er nesten som argumenter til en funksjon. 394 00:19:19,440 --> 00:19:22,810 Kortet er et argument nesten til dette CardView. 395 00:19:22,810 --> 00:19:25,239 >> Vi vil trekke ut det, og sette den i den variable spørsmålet. 396 00:19:25,239 --> 00:19:27,280 Pass på at svaret gikk til variabelen svaret. 397 00:19:27,280 --> 00:19:31,130 Ber dette kortet til å svare. 398 00:19:31,130 --> 00:19:35,072 Og nå som vi har disse, i stedet for å skrive ut som tekst, 399 00:19:35,072 --> 00:19:37,030 vi kommer til å skrive ut hva de ga oss. 400 00:19:37,030 --> 00:19:43,580 >> Så dette stuff-- så vi kommer å sette ut Spørsmål Svar. 401 00:19:43,580 --> 00:19:46,380 La oss se om dette fungerer. 402 00:19:46,380 --> 00:19:52,800 Kult, så la oss gå gjennom det en gang til bare for å være sikker. 403 00:19:52,800 --> 00:20:00,470 >> Så kortet mitt er kort objekt, og vi gir dette kortet til app. 404 00:20:00,470 --> 00:20:04,790 Og app kommer til å ta den kort og gi det til CardView. 405 00:20:04,790 --> 00:20:09,190 Og dette CardView sier, hvis du gi meg noen spørje objekt, 406 00:20:09,190 --> 00:20:11,920 Jeg skal skrive ut sitt spørsmål og svaret, ikke sant? 407 00:20:11,920 --> 00:20:14,590 >> Så det jeg kan gjøre er at jeg kan sende denne kode, den første 408 00:20:14,590 --> 00:20:16,580 som 10 linjer med koden min, til min venn. 409 00:20:16,580 --> 00:20:18,820 Han kunne legge det i sin egen søknad. 410 00:20:18,820 --> 00:20:27,200 Og så lenge han gjorde det samme, som CardView kortet er lik denne, 411 00:20:27,200 --> 00:20:30,580 så lenge han skapte CardView og ga det riktig informasjon, 412 00:20:30,580 --> 00:20:31,987 han kunne gjengi hans eget kort. 413 00:20:31,987 --> 00:20:34,320 Og så denne måten, er det en virkelig kul måte for deg å bygge 414 00:20:34,320 --> 00:20:35,906 komponenter som bruker hverandre, ikke sant? 415 00:20:35,906 --> 00:20:38,280 Dette kortet, jeg kunne publisere dette CardView på internett, 416 00:20:38,280 --> 00:20:39,790 og folk ville være i stand til å bruke den. 417 00:20:39,790 --> 00:20:45,070 Så i utgangspunktet, er det som en av de standard funksjoner i C-bibliotek. 418 00:20:45,070 --> 00:20:47,280 >> Det er en funksjon der noen har skrevet det. 419 00:20:47,280 --> 00:20:48,419 Du gir en viss innspill. 420 00:20:48,419 --> 00:20:49,710 Det vil gi en viss effekt. 421 00:20:49,710 --> 00:20:50,890 Du bryr deg ikke hvordan det fungerer internt. 422 00:20:50,890 --> 00:20:53,790 Så lenge du gir den riktig innspill, vil det gjøre det riktige utgang. 423 00:20:53,790 --> 00:20:57,850 >> Og en komponent kan være tenkt på samme måte. 424 00:20:57,850 --> 00:21:00,280 Dette CardView er som en bibliotekfunksjon. 425 00:21:00,280 --> 00:21:03,400 Hvis du gir det litt kort som en eiendom, det vil 426 00:21:03,400 --> 00:21:05,095 skrive ut innholdet av dette kortet. 427 00:21:05,095 --> 00:21:16,820 Som hvis jeg endre kortet mitt til i stedet være som det er 5 pluss 37, 428 00:21:16,820 --> 00:21:19,210 det vil oppdatere tilsvarende. 429 00:21:19,210 --> 00:21:21,955 Så bare ved å endre input, det blir en viss effekt. 430 00:21:21,955 --> 00:21:24,830 Så du kan tenke på komponenter nesten som funksjoner på denne måten, som 431 00:21:24,830 --> 00:21:25,920 du kan sette sammen. 432 00:21:25,920 --> 00:21:29,440 Du får input, som dette CardView som input, får du utgang. 433 00:21:29,440 --> 00:21:31,900 I dette tilfelle er utgang HTML. 434 00:21:31,900 --> 00:21:34,404 Fornuftig så langt? 435 00:21:34,404 --> 00:21:36,890 Kult, så igjen, egenskaper er hvordan du kan passere informasjon 436 00:21:36,890 --> 00:21:40,900 inn i og ut av komponenter. 437 00:21:40,900 --> 00:21:42,740 >> OK, så la oss gjøre dette ting interaktiv. 438 00:21:42,740 --> 00:21:44,450 Akkurat nå er det litt kjedelig. 439 00:21:44,450 --> 00:21:45,520 Hva er [uhørbart]? 440 00:21:45,520 --> 00:21:48,210 Du kan skrive ut noen ut, men det er alt den kan gjøre. 441 00:21:48,210 --> 00:21:51,550 >> Så la oss gå tilbake til den gamle spørsmålet bare for nå. 442 00:21:51,550 --> 00:21:54,405 OK, så akkurat nå disse komponentene er kjedelig fordi alt de gjør, 443 00:21:54,405 --> 00:21:55,030 de får innspill. 444 00:21:55,030 --> 00:21:56,100 De gjør utgang, ikke sant? 445 00:21:56,100 --> 00:21:57,049 Det er litt kjedelig. 446 00:21:57,049 --> 00:21:59,090 Vi ønsker å ha vår komponenter for å være i stand til å ha 447 00:21:59,090 --> 00:22:02,150 en slags indre tilstand, som husker noe. 448 00:22:02,150 --> 00:22:05,320 >> For en spørje, for eksempel, hva slags tilstand 449 00:22:05,320 --> 00:22:07,550 vil du kanskje huske i spørje? 450 00:22:07,550 --> 00:22:09,740 Hva midlertidig status kan det være lurt å huske 451 00:22:09,740 --> 00:22:12,491 for en spørje i spørje app? 452 00:22:12,491 --> 00:22:13,990 PUBLIKUM: Enten det er blitt snudd? 453 00:22:13,990 --> 00:22:14,990 NEEL Mehta: Ja, ikke sant. 454 00:22:14,990 --> 00:22:17,665 Så kan det være lurt å holde styr på er du møte opp eller er 455 00:22:17,665 --> 00:22:19,100 du ansiktet ned på kortet. 456 00:22:19,100 --> 00:22:23,420 På Facebook, for eksempel, ville du ønsker å huske hvor i news feed 457 00:22:23,420 --> 00:22:25,870 er du eller liker som er profil er det du gjør akkurat nå. 458 00:22:25,870 --> 00:22:30,127 >> På Messenger, som hva teksten du skriv i boksen, ikke sant? 459 00:22:30,127 --> 00:22:31,710 Hvis du oppdaterer siden, går det unna. 460 00:22:31,710 --> 00:22:32,793 Men du egentlig ikke bryr deg. 461 00:22:32,793 --> 00:22:33,770 Det er bare midlertidig. 462 00:22:33,770 --> 00:22:34,548 Yeah? 463 00:22:34,548 --> 00:22:36,152 >> PUBLIKUM: [uhørbart] 464 00:22:36,152 --> 00:22:38,360 NEEL Mehta: Som en flash kortet, som du kan se 465 00:22:38,360 --> 00:22:40,290 spørsmålet side eller svaret side? 466 00:22:40,290 --> 00:22:41,070 >> PUBLIKUM: OK. 467 00:22:41,070 --> 00:22:43,270 >> NEEL Mehta: Like a tosidige spørje, ikke sant? 468 00:22:43,270 --> 00:22:46,370 Ja, så du vil har denne ideen om å nå 469 00:22:46,370 --> 00:22:50,370 Jeg har egenskaper, som er som innganger, men staten, som er midlertidig, eh, 470 00:22:50,370 --> 00:22:51,839 hvor du er på siden, ikke sant? 471 00:22:51,839 --> 00:22:54,380 Igjen, jeg sa i Facebook Messenger, jeg har like som person 472 00:22:54,380 --> 00:22:56,550 du viser Facebook eller hvem som er profil, ikke sant? 473 00:22:56,550 --> 00:22:58,030 >> Dette er bare midlertidig. 474 00:22:58,030 --> 00:23:01,200 Det er viktig å vise brukeren hva som skjer, men oppdatere siden. 475 00:23:01,200 --> 00:23:02,250 Det spiller egentlig ingen rolle. 476 00:23:02,250 --> 00:23:04,530 Så det er midlertidig tilstand, slik at vi alle det staten. 477 00:23:04,530 --> 00:23:06,250 >> Så, igjen, er det staten og rekvisitter. 478 00:23:06,250 --> 00:23:09,084 Props er innspill gitt fra datakilden. 479 00:23:09,084 --> 00:23:10,250 Staten er akkurat som mislighold. 480 00:23:10,250 --> 00:23:13,700 Det er akkurat som ting som gjør ting interaktiv. 481 00:23:13,700 --> 00:23:17,720 >> Så i vårt CardView-- la oss ha vår CardView-- så det var hyggelig. 482 00:23:17,720 --> 00:23:21,420 Hva vi skal gjøre her, vi skal å berøre CardView og bare CardView. 483 00:23:21,420 --> 00:23:25,105 Og så min venn som fikk dette, de vil ikke merke noen forskjell. 484 00:23:25,105 --> 00:23:27,230 De ville ikke endre hvilken som helst av sin egen kode, 485 00:23:27,230 --> 00:23:29,410 men de ville se sin CardView fikk souped opp. 486 00:23:29,410 --> 00:23:31,270 Det er en fin del om komponenter. 487 00:23:31,270 --> 00:23:35,290 >> OK, så i vår CardView, la oss prøve og holde styr på om vi avvikle opp 488 00:23:35,290 --> 00:23:36,560 eller ned. 489 00:23:36,560 --> 00:23:40,480 I React gjør vi dette ved først å spesifisere den opprinnelige tilstanden. 490 00:23:40,480 --> 00:23:42,070 Hvor kommer kortet begynne? 491 00:23:42,070 --> 00:23:48,480 >> Så vær en funksjon kalt getInitialState funksjon, og vi kommer tilbake en gjenstand. 492 00:23:48,480 --> 00:23:53,310 Dette objektet inneholder noen stat, og en stat er bare en nøkkel-verdi-par. 493 00:23:53,310 --> 00:23:56,950 Som i instruere, har du en nøkkel og en verdien, må du som navnet er en streng. 494 00:23:56,950 --> 00:24:01,410 >> I dette tilfellet, la oss si at fronten er sant. 495 00:24:01,410 --> 00:24:03,760 Dette forteller at vi har en stat. 496 00:24:03,760 --> 00:24:06,570 En del av staten er en egenskap kalt front. 497 00:24:06,570 --> 00:24:09,649 [Uhørbart], så som standard, vi er på forsiden av kortet, 498 00:24:09,649 --> 00:24:11,440 og vi kan endre dette som vi snu kortet. 499 00:24:11,440 --> 00:24:13,380 Gir mening? 500 00:24:13,380 --> 00:24:18,190 >> OK, så i render, akkurat nå er vi viser spørsmålet og svaret. 501 00:24:18,190 --> 00:24:20,860 Nå hva vi skal gjøre er viser spørsmålet 502 00:24:20,860 --> 00:24:24,370 hvis vi er på forsiden av kortet så svaret er for baksiden av kortet. 503 00:24:24,370 --> 00:24:26,850 Det er derfor du gjør alle kortet interaktiv. 504 00:24:26,850 --> 00:24:28,100 Så la oss prøve og til dette her. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Vel, først bare lage en variabel. 507 00:24:33,620 --> 00:24:37,790 Vi kan spørre nå this.state.front. 508 00:24:37,790 --> 00:24:42,010 Vi tilgang oppgir det samme vi tilgangs rekvisitter, så this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Hvis vi er foran, deretter teksten er this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Hvis vi er på forsiden av kort, vi kommer til å prøve og grip 512 00:24:51,360 --> 00:24:52,485 spørsmålet fra kortet. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 Ellers, hvis vi er på baksiden av kortet, hva gjør vi? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> PUBLIKUM: Svaret? 517 00:25:02,750 --> 00:25:05,041 >> NEEL Mehta: Jepp, så tekst lik this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Men hvis du legger merke til, bruker vi staten til å ta en beslutning 520 00:25:10,930 --> 00:25:14,420 fordi nå komponenten vil se annerledes ut 521 00:25:14,420 --> 00:25:16,710 basert av hvordan disse påvirker den. 522 00:25:16,710 --> 00:25:20,355 Så i stedet for å skrive ut denne, vi vil bare skrive ut teksten. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Kult, så nå, som du ser, vi ser bare på spørsmålet. 525 00:25:28,650 --> 00:25:37,720 Og hvis jeg endrer staten her manuelt til fronten er falsk vi får 42 tilbake. 526 00:25:37,720 --> 00:25:39,720 >> Så, på nytt, denne komponenten har sin egen stat. 527 00:25:39,720 --> 00:25:43,440 Som en knapp vet om det er blitt presset eller ikke, 528 00:25:43,440 --> 00:25:46,080 denne tingen vet hva som er på forsiden eller på baksiden. 529 00:25:46,080 --> 00:25:48,320 Som standard er det på forsiden. 530 00:25:48,320 --> 00:25:50,840 Og så hvis det er på forsiden, vi vil skrive ut spørsmålet. 531 00:25:50,840 --> 00:25:53,106 Hvis det er på baksiden, vil vi skrive ut svaret. 532 00:25:53,106 --> 00:25:54,980 Så, igjen, er informasjonen gitt er den samme. 533 00:25:54,980 --> 00:25:59,090 Det ser bare annerledes basert på hvordan du programmere den. 534 00:25:59,090 --> 00:26:02,670 Så, for eksempel Facebook Messenger, selv om du får det samme datakilde, 535 00:26:02,670 --> 00:26:05,170 det kan se annerledes fordi staten er annerledes. 536 00:26:05,170 --> 00:26:08,421 Du ser på en annen person budskap. 537 00:26:08,421 --> 00:26:10,930 >> OK, så dette er vel og bra, men nå er det som faktisk 538 00:26:10,930 --> 00:26:15,940 gjør oss i stand til å forandre seg, om våre kort er foran eller bak. 539 00:26:15,940 --> 00:26:19,010 Vi kan gjøre dette ved å legge til en flip knapp, en knapp til kortet som 540 00:26:19,010 --> 00:26:22,950 vil snu kortet hvis det er [uhørbart]. 541 00:26:22,950 --> 00:26:31,770 Så la oss legge til en knapp her, dette knappen, og denne knappen vil si flip. 542 00:26:31,770 --> 00:26:35,650 >> Og så akkurat nå, det gjør ikke noe. 543 00:26:35,650 --> 00:26:37,075 Det ser bare fint. 544 00:26:37,075 --> 00:26:43,650 Det vi kan gjøre er at vi kan legge til et klikk handler, lik onClick this.flip, 545 00:26:43,650 --> 00:26:44,820 og vi vil definere flip senere. 546 00:26:44,820 --> 00:26:47,120 Men innerst inne, onClick er en funksjon som 547 00:26:47,120 --> 00:26:48,675 blir kalt når brukeren klikker det. 548 00:26:48,675 --> 00:26:52,330 >> Så knappen vil vite når det er blitt klikket på. 549 00:26:52,330 --> 00:26:54,750 Gikk det er blitt klikket, det vil snu kortet. 550 00:26:54,750 --> 00:26:58,382 Det er litt som din pizzabud. 551 00:26:58,382 --> 00:27:01,590 Du er som, all right, når noen kaller meg, jeg skal levere pizza, ikke sant? 552 00:27:01,590 --> 00:27:03,420 >> Du registrere denne lytteren. 553 00:27:03,420 --> 00:27:04,530 Du lytter til en hendelse. 554 00:27:04,530 --> 00:27:07,657 Du blir kalt, og når hendelse skjer, du gjør noe. 555 00:27:07,657 --> 00:27:08,240 Du får pizza. 556 00:27:08,240 --> 00:27:11,480 I dette tilfellet, når du klikket, snur du kortet. 557 00:27:11,480 --> 00:27:14,560 >> Og så må vi definere en funksjon som vil snu kortet, 558 00:27:14,560 --> 00:27:17,930 så vi skal skrive det riktig her, flip-funksjon. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 Og så hva tror du flip vil gjøre? 561 00:27:23,680 --> 00:27:27,180 Igjen dette blir kalt når vi klikker på flip-knappen. 562 00:27:27,180 --> 00:27:29,406 Hva bør funksjonen flip gjøre? 563 00:27:29,406 --> 00:27:34,136 >> PUBLIKUM: Endre this.state.front fra true til false, false til true. 564 00:27:34,136 --> 00:27:38,420 >> NEEL Mehta: Jepp, så ta uansett this.front er-- fronten staten er. 565 00:27:38,420 --> 00:27:40,930 Ta front staten, hvis det er sant, gjør det falske. 566 00:27:40,930 --> 00:27:42,530 Hvis det er falsk, gjør det sant, ikke sant? 567 00:27:42,530 --> 00:27:45,330 Så la oss prøve det. 568 00:27:45,330 --> 00:27:48,240 >> Du kan ikke endre tilstand bare ved å gjøre this.state. 569 00:27:48,240 --> 00:27:50,380 Du kan ikke gjøre dette. 570 00:27:50,380 --> 00:27:52,030 Du kan ikke gjøre det. 571 00:27:52,030 --> 00:27:55,810 Du må bruke en funksjon kalt this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Så du kan si this.setState forsiden kolon dette der, igjen, utrops 573 00:28:03,230 --> 00:28:04,330 punkt betyr det motsatte. 574 00:28:04,330 --> 00:28:07,420 Jeg antar at hvis dette. state.front er sant, vil det slå falsk. 575 00:28:07,420 --> 00:28:09,170 Så vi vil sette staten fra true til false. 576 00:28:09,170 --> 00:28:11,430 Hvis det er falsk, vil vi sette den false til true. 577 00:28:11,430 --> 00:28:17,210 >> Bare legge merke til at vi satt og få litt annerledes, og så la oss prøve dette. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, se på dette. 579 00:28:18,675 --> 00:28:21,810 Flip-knappen vil nå bytte foran til bak staten. 580 00:28:21,810 --> 00:28:24,990 >> Og så her er der du ser en litt av magien i React. 581 00:28:24,990 --> 00:28:28,420 Som vi aldri fortalt det det å re-gjengi. 582 00:28:28,420 --> 00:28:30,910 Vi har aldri fortalt det tegne noe. 583 00:28:30,910 --> 00:28:32,630 Hvis du gjør dette uten React, ville du 584 00:28:32,630 --> 00:28:34,588 har to-- liker når flip knappen klikkes, 585 00:28:34,588 --> 00:28:37,290 du må fortelle det til manuelt re-render, ikke sant? 586 00:28:37,290 --> 00:28:43,050 >> Reagere er kult i at hvis du gi det en viss tilstand og egenskaper, 587 00:28:43,050 --> 00:28:45,760 det alltid vil gjengi akkurat det samme. 588 00:28:45,760 --> 00:28:48,690 Og så når vi gang vi endrer staten og egenskaper, 589 00:28:48,690 --> 00:28:50,819 reagerer bare re-gjør hele greia. 590 00:28:50,819 --> 00:28:52,860 Den vet at det er en en-til-en korrespondanse 591 00:28:52,860 --> 00:28:57,270 mellom stat og parameter og HTML. 592 00:28:57,270 --> 00:29:00,110 Så når noen av disse endringene ved gjennom et sett stat, 593 00:29:00,110 --> 00:29:03,750 det vil endre hvordan pay er re-rendret. 594 00:29:03,750 --> 00:29:06,650 Og så i utgangspunktet React er som venter på å endre. 595 00:29:06,650 --> 00:29:09,870 >> Når det endrer noe, det vil re-gjengi hele siden. 596 00:29:09,870 --> 00:29:12,480 Og hvis det høres ineffektiv, det er fordi det ville være, 597 00:29:12,480 --> 00:29:15,050 men reagerer bruker en ting kalles en Shadow DOM. 598 00:29:15,050 --> 00:29:19,950 I stedet for å trekke siden direkte, det holder den virtuelle HTML data i minnet. 599 00:29:19,950 --> 00:29:23,620 >> Du vet, er HTML som et tre, som en hierarkisk datastruktur. 600 00:29:23,620 --> 00:29:28,990 Det holder en falsk treet i minnet, og når du oppdaterer siden, 601 00:29:28,990 --> 00:29:31,940 det vil trekke et falsk treet, og det vil beregne 602 00:29:31,940 --> 00:29:35,120 hva endre det behov for å gjøre det for å gjøre de to trærne like. 603 00:29:35,120 --> 00:29:38,540 Så i utgangspunktet, er det nesten re-gjengir mye. 604 00:29:38,540 --> 00:29:41,540 Og da er det bare liker endringer side i små justeringer som trengs, 605 00:29:41,540 --> 00:29:44,240 så det er veldig, veldig, veldig effektiv. 606 00:29:44,240 --> 00:29:46,970 >> Så i utgangspunktet React vil når du endrer noe, 607 00:29:46,970 --> 00:29:49,010 det vil re-gjengi siden nesten. 608 00:29:49,010 --> 00:29:52,830 Det vil finne ut hva trenger jeg å endres for å gjøre den virkelige siden reflektere 609 00:29:52,830 --> 00:29:55,602 den virtuelle side, og det vil gjøre det. 610 00:29:55,602 --> 00:29:56,560 Det er den virtuelle DOM. 611 00:29:56,560 --> 00:29:59,350 Det er en av de største funksjonene i React. 612 00:29:59,350 --> 00:30:00,880 >> Gir det mening? 613 00:30:00,880 --> 00:30:01,540 Noen spørsmål? 614 00:30:01,540 --> 00:30:02,040 Yeah? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> PUBLIKUM: Hvordan virker sammenligne fortsatt til MVC 617 00:30:08,969 --> 00:30:10,760 som vi snakket om før som ressurser. 618 00:30:10,760 --> 00:30:13,527 >> NEEL Mehta: Ja, spørsmålet Slik er det sammenlignet MVC? 619 00:30:13,527 --> 00:30:14,610 Du spurte om ressurser. 620 00:30:14,610 --> 00:30:16,445 Vel, la oss snakke om hvordan den fungerer. 621 00:30:16,445 --> 00:30:18,190 >> I MVC, ville du oppdatere modellen. 622 00:30:18,190 --> 00:30:20,560 I dette tilfellet vil vi ha en kort modell. 623 00:30:20,560 --> 00:30:24,540 Utsikten ville ha flip-knappen, og kontrollen 624 00:30:24,540 --> 00:30:26,310 ville ha den klaffen funksjon. 625 00:30:26,310 --> 00:30:28,450 Så utsikten ville fortelle kontrolleren til å snu flip. 626 00:30:28,450 --> 00:30:30,370 Flip ville fortelle modellen til å endre, ikke sant? 627 00:30:30,370 --> 00:30:33,915 >> Og så når du gjør en MVC, du lytte for modellen å endre, 628 00:30:33,915 --> 00:30:37,150 og du re-gjengi utsikten deretter. 629 00:30:37,150 --> 00:30:39,210 Eller du bare nødt til å like har kontrolleren. 630 00:30:39,210 --> 00:30:42,418 Vent til modell for å endre, og deretter velge en del av som en ting 631 00:30:42,418 --> 00:30:44,032 å endre. 632 00:30:44,032 --> 00:30:45,740 Her har vi en ting, men i en stor app, 633 00:30:45,740 --> 00:30:48,510 må du gjerne huske hva endringen i hvert enkelt sted, 634 00:30:48,510 --> 00:30:50,290 så det er litt irriterende. 635 00:30:50,290 --> 00:30:53,670 Og så React er fint fordi den har en Shadow Dom. 636 00:30:53,670 --> 00:30:56,040 Det kan ha råd til å bare omskrive hele greia. 637 00:30:56,040 --> 00:30:58,680 Du trenger ikke å selektivt som gjett hva som skal oppdateres. 638 00:30:58,680 --> 00:31:02,186 >> På Facebook hvis du liker får en ny melding, i MVC, 639 00:31:02,186 --> 00:31:04,060 du må huske, OK, endre ting 640 00:31:04,060 --> 00:31:06,260 på toppen av side, meldingsikonet. 641 00:31:06,260 --> 00:31:08,290 Også pop nytt vindu nederst. 642 00:31:08,290 --> 00:31:10,070 Også gjøre en ny ting i dette vinduet. 643 00:31:10,070 --> 00:31:11,060 Også spille en lyd. 644 00:31:11,060 --> 00:31:13,150 >> Det er en masse ting går ut på samme tid. 645 00:31:13,150 --> 00:31:15,320 Og så hvis du ikke gjør det har en Shadow Dom, ville du 646 00:31:15,320 --> 00:31:18,740 må gjøre det manuelt fordi du kan ikke bli kvitt hele siden. 647 00:31:18,740 --> 00:31:21,430 Du har ikke råd til, så du har å endre hver ting manuelt, 648 00:31:21,430 --> 00:31:23,990 noe som er veldig irriterende i MVC. 649 00:31:23,990 --> 00:31:27,640 >> Så for å være sparsommelig, de selektivt 650 00:31:27,640 --> 00:31:30,750 oppdatere siden som er effektiv, men også irriterende. 651 00:31:30,750 --> 00:31:34,002 I React, på grunn av Shadow Dom, du får både ting gratis. 652 00:31:34,002 --> 00:31:35,710 Den er effektiv fordi av Shadow Dom. 653 00:31:35,710 --> 00:31:37,210 Flaskehalsen er å oppdatere siden. 654 00:31:37,210 --> 00:31:40,292 Det er ikke å gjøre treet manipulasjon. 655 00:31:40,292 --> 00:31:41,250 Du får effektiviteten. 656 00:31:41,250 --> 00:31:45,420 Du får også brukervennlighet fordi hvis du bare skrive om hele siden, 657 00:31:45,420 --> 00:31:48,970 men du bare vet, all right, de tingene kommer til å være på siden et sted. 658 00:31:48,970 --> 00:31:51,180 Det kan være på et annet sted, men det kommer til å være på siden, ikke sant? 659 00:31:51,180 --> 00:31:52,860 Så du bare re-rendret hele greia nesten, 660 00:31:52,860 --> 00:31:55,540 og du kan gjøre et par endringer i selve siden. 661 00:31:55,540 --> 00:31:57,850 >> Så, igjen, i MVC du måtte velge 662 00:31:57,850 --> 00:32:01,840 mellom brukervennlighet og effektivitet, og React, får du begge deler. 663 00:32:01,840 --> 00:32:04,020 Så det er bedre. 664 00:32:04,020 --> 00:32:05,220 Gir mening? 665 00:32:05,220 --> 00:32:06,676 Fast. 666 00:32:06,676 --> 00:32:12,080 >> OK, så la oss se la oss snakke litt om trinn 4, 667 00:32:12,080 --> 00:32:14,740 hvordan vi kan bygge komponenter. 668 00:32:14,740 --> 00:32:16,260 Så vi har denne akkurat nå. 669 00:32:16,260 --> 00:32:19,420 Vi har vår kul liten knapp. 670 00:32:19,420 --> 00:32:23,157 Vi kan snu det tilbake og frem, og det er alt den gjør. 671 00:32:23,157 --> 00:32:24,990 La oss si at vi ønsker å har en annen komponent. 672 00:32:24,990 --> 00:32:28,730 La oss si at vår spørje app bør inneholder en liste over alle kortene 673 00:32:28,730 --> 00:32:31,520 som du har, så det betyr at vi skal ha en annen komponent. 674 00:32:31,520 --> 00:32:32,970 Vel, kanskje kalle det en listevisning. 675 00:32:32,970 --> 00:32:36,200 La oss lage en listevisning som eksisterer med CardView, 676 00:32:36,200 --> 00:32:39,680 og dette listevisning og CardView vil gjerne arbeide sammen. 677 00:32:39,680 --> 00:32:43,190 Og du kan kombinere dem å gjøre vår app for deg. 678 00:32:43,190 --> 00:32:45,160 >> Så først, la oss gjøre en par flere kort riktig. 679 00:32:45,160 --> 00:32:46,370 La oss si, hvilke kort? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 Og bare så jeg slipper å kjede deg med å skrive det inn, 682 00:32:51,910 --> 00:32:53,410 Jeg skal bare kopiere den herfra. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 Og så kommer jeg til å ikke gi det bare ett kort. 685 00:33:03,580 --> 00:33:06,910 Jeg kommer til å gi det en rekke kort. 686 00:33:06,910 --> 00:33:10,240 Så første apps kommer til å bryte for nå. 687 00:33:10,240 --> 00:33:14,717 Greit, så vi kommer til å gjøre dette i stand til å håndtere flere kort. 688 00:33:14,717 --> 00:33:17,800 Så først, skal vi gi det, ikke bare ett kort, men en rekke kort, 689 00:33:17,800 --> 00:33:18,700 som en liste over kortene. 690 00:33:18,700 --> 00:33:20,980 Og i dette tilfellet, har vi tre av dem. 691 00:33:20,980 --> 00:33:27,280 >> All right, så slik app er kommer til å få en liste kort, 692 00:33:27,280 --> 00:33:29,870 og det kommer til å bestemme hvilke en å vise til CardView. 693 00:33:29,870 --> 00:33:33,740 Den CardView kan bare gjengi ett kort, men app 694 00:33:33,740 --> 00:33:37,610 får en liste over alle kortene, ikke sant? 695 00:33:37,610 --> 00:33:40,820 >> Så når du regne ut en kort for å gi til CardView, 696 00:33:40,820 --> 00:33:44,660 hvordan ville du antar at du kan være i stand å ta en beslutning om hvilket kort 697 00:33:44,660 --> 00:33:47,064 å vise? 698 00:33:47,064 --> 00:33:49,980 For å gi deg et hint, er det midlertidig Du vil bli visning av en bestemt kort. 699 00:33:49,980 --> 00:33:53,260 Hvis du oppdaterer siden, vil du bare gå tilbake til det første kortet. 700 00:33:53,260 --> 00:33:55,464 Det er OK fordi det er midlertidig. 701 00:33:55,464 --> 00:33:56,630 Hva teknikk kan vi bruke? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> PUBLIKUM: Du kan lage en variabel så akkurat som du hadde foran. 704 00:34:08,760 --> 00:34:11,989 Er dette sant, kunne du har nåværende kort er lik 1? 705 00:34:11,989 --> 00:34:14,150 >> NEEL Mehta: Ja, så vi vil ha staten, ikke sant? 706 00:34:14,150 --> 00:34:16,080 Du vil bruke staten i komponent for å finne ut 707 00:34:16,080 --> 00:34:17,288 hvilket kort vi ønsker å få. 708 00:34:17,288 --> 00:34:19,290 Som har vi en liste over alle kortene, vil vi 709 00:34:19,290 --> 00:34:21,630 bruke staten til å finne ut en av det første kortet, 710 00:34:21,630 --> 00:34:23,710 andre kort, tredje kort, og så videre. 711 00:34:23,710 --> 00:34:28,760 >> Så et program så en app vil få en har getInitialState funksjon, 712 00:34:28,760 --> 00:34:35,020 getInitialState funksjon retur. 713 00:34:35,020 --> 00:34:39,929 Og vi vil bare si activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Så nå vår app har sin egen stat. 715 00:34:42,889 --> 00:34:47,179 >> Og så nå gjengi, for å finne ut et kort, la oss bare gå til matrisen 716 00:34:47,179 --> 00:34:49,969 og ta tak i ting på at indeksen. 717 00:34:49,969 --> 00:34:53,580 Velg kort like this.props.cards this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 Så som du ser her, rekvisitter og staten faktisk fungerer sammen. 720 00:35:00,162 --> 00:35:08,990 Så nå som vi har vår activeCard, vi kaller det activeCard, 721 00:35:08,990 --> 00:35:10,470 og la oss se om dette fungerer. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [Uhørbart] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Å, det var en tekst feil. 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, Jepp, så nå var vi tilbake til der vi var før, ikke sant? 729 00:35:54,840 --> 00:35:57,100 Samme gamle program unntatt Nå kan vi støtte 730 00:35:57,100 --> 00:35:59,390 en liste over kort, ikke bare ett kort. 731 00:35:59,390 --> 00:36:04,130 Og nå, igjen, hvis vi endrer activeIndex, kan vi gå fra 0 til 1, 732 00:36:04,130 --> 00:36:07,330 og nå som andre kort, og deretter gikk vi til 0. 733 00:36:07,330 --> 00:36:10,390 Så her er en ny trimmet versjon av vår. 734 00:36:10,390 --> 00:36:16,000 >> OK, så nå la oss ta en listevisning som viser alle kortene i programmet, 735 00:36:16,000 --> 00:36:19,980 så vi vil lage en ny komponent kalt Listview. 736 00:36:19,980 --> 00:36:22,155 La Listview tilsvarer react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Så vi ønsker å gjengi en uordnet liste med et listeelement for hvert kort. 739 00:36:38,800 --> 00:36:41,490 Og så har vi en haug med kort. 740 00:36:41,490 --> 00:36:44,990 Vi vil ha en listeelement for hvert kort, ikke sant? 741 00:36:44,990 --> 00:36:47,490 Vi kan gjøre en for løkke eller noe å lage en ny liste element. 742 00:36:47,490 --> 00:36:50,522 Men måten du gjør det på Reagere, bruker noe som heter kart. 743 00:36:50,522 --> 00:36:57,150 Kart er et verktøy eller en funksjon du bruker at for hvert element, går noen funksjon, 744 00:36:57,150 --> 00:36:59,510 tar returverdi, og gir du det tilbake. 745 00:36:59,510 --> 00:37:06,310 >> Så som et eksempel, har vi matrisen 1, 2, 3.map function-- og denne 746 00:37:06,310 --> 00:37:12,120 er forkortelse for en function-- x pil x ganger x. 747 00:37:12,120 --> 00:37:16,110 Dette sier, for hvert tall i 1, 2, 3, ta den. 748 00:37:16,110 --> 00:37:17,800 Kvadrat det, og gi den tilbake. 749 00:37:17,800 --> 00:37:22,090 Så hva tror du en, 2, 3.map x går til x ganger 750 00:37:22,090 --> 00:37:25,480 x gir deg tilbake gitt at denne funksjonen er 751 00:37:25,480 --> 00:37:27,680 kjøres på hvert element i den oppstillingen. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> PUBLIKUM: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> NEEL Mehta: Jepp, 1, 4, 9 fordi du gjør 1 ganger 1. 755 00:37:35,709 --> 00:37:36,500 Det gir deg en. 756 00:37:36,500 --> 00:37:37,690 Det er det første elementet. 757 00:37:37,690 --> 00:37:38,530 >> 2 ganger 2 er 4. 758 00:37:38,530 --> 00:37:39,570 Det er et andre element. 759 00:37:39,570 --> 00:37:40,310 3 ganger 3 er 9. 760 00:37:40,310 --> 00:37:41,540 Det er et tredje element. 761 00:37:41,540 --> 00:37:42,640 Gir mening? 762 00:37:42,640 --> 00:37:45,015 Så Kartet har en teknikk du bruker i funksjonelle programmerere, 763 00:37:45,015 --> 00:37:48,090 den nye stilen programmering til å gjøre noe 764 00:37:48,090 --> 00:37:50,500 til hvert element i listen. 765 00:37:50,500 --> 00:37:51,970 Og så dette høres kjent ut. 766 00:37:51,970 --> 00:37:53,370 Vi har en liste over kortene. 767 00:37:53,370 --> 00:37:56,860 Vi ønsker å få et listeelement for hver en, så vi får bare bruke kartet her. 768 00:37:56,860 --> 00:38:00,250 Vi vil si, la liste equals this.props, kort, kart. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> Og så fikk et kort, vi er kommer til å generere et listeelement 771 00:38:15,070 --> 00:38:17,580 med at kortets innholdet side av det. 772 00:38:17,580 --> 00:38:20,660 La oss bare si at vi ønsker å gi ut kortene spørsmålet så card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Så denne listen inneholder en utvalg av LI-eller listeelementer 775 00:38:30,649 --> 00:38:32,440 hvor det er en liste element for hvert kort, 776 00:38:32,440 --> 00:38:35,150 og som inneholder kortene spørsmålet. 777 00:38:35,150 --> 00:38:37,640 Gir mening? 778 00:38:37,640 --> 00:38:39,450 >> Kult, så la oss nå faktisk skrive det ut. 779 00:38:39,450 --> 00:38:46,521 Så kommer vi tilbake en ul. 780 00:38:46,521 --> 00:38:49,020 Innsiden som sorterte liste, vi vil bare holde fast hele listen 781 00:38:49,020 --> 00:38:49,890 at de ga oss. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Kjølig. 784 00:38:53,350 --> 00:38:56,060 >> Ok, så nå dette listevisning fungerer bare finne. 785 00:38:56,060 --> 00:38:59,842 Eventuelle spørsmål om listevisning? 786 00:38:59,842 --> 00:39:01,270 Du har en haug med kort. 787 00:39:01,270 --> 00:39:02,800 Du gjør et listeelement for hvert kort. 788 00:39:02,800 --> 00:39:05,466 Og du putter dem i en uordnet liste, og du gir den tilbake. 789 00:39:05,466 --> 00:39:09,410 Så nå la oss handle slik vi legge ned dette inne på vår app, 790 00:39:09,410 --> 00:39:14,310 slik at vi kan gjøre dette, listevisning. 791 00:39:14,310 --> 00:39:17,070 Hva argument passerer vi trenger til listevisning? 792 00:39:17,070 --> 00:39:18,320 Hvilke egenskaper gir vi det? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Husk at hvis du gir det en haug med kort, 795 00:39:26,860 --> 00:39:29,590 det vil gjøre listen se for disse kortene. 796 00:39:29,590 --> 00:39:32,267 Så hva ville vi passere her som argument? 797 00:39:32,267 --> 00:39:33,350 PUBLIKUM: En liste over kort? 798 00:39:33,350 --> 00:39:37,130 NEEL Mehta: Ja, så kort lik this.props.cards, ikke sant? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 Og så det eneste problemet er at du kan bare 801 00:39:44,370 --> 00:39:48,600 slått et toppnivåelement i gjengi, så du er nødt til å pakke det inn i en div. 802 00:39:48,600 --> 00:39:49,100 Det er rart. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Så la oss se om det. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Betyr det fungere? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Jepp, der du går. 809 00:40:31,030 --> 00:40:33,700 Så nå har vi en liste av kortene i bunnen, 810 00:40:33,700 --> 00:40:36,180 og da har vi vår CardView seg selv på toppen, 811 00:40:36,180 --> 00:40:40,486 og som vil snu mellom de to sidene av kortet. 812 00:40:40,486 --> 00:40:42,610 Nå gjør det fornuftig hvordan jeg gjorde det? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Ja, så igjen, vi har to komponenter. 815 00:40:46,790 --> 00:40:49,666 Den første komponenten utskrifter ut hver kortet i listen. 816 00:40:49,666 --> 00:40:50,540 Det er listevisning. 817 00:40:50,540 --> 00:40:54,770 Og den andre komponenten skriver ut akkurat dette kortet. 818 00:40:54,770 --> 00:40:58,840 Hvis du gir den en viss kort, det vil skrive ut informasjon om dette kortet 819 00:40:58,840 --> 00:41:01,870 og la deg bla frem og tilbake. 820 00:41:01,870 --> 00:41:05,850 >> Så hvis vi vil, kan vi prøve og snakke om å legge til noen nye funksjoner til dette. 821 00:41:05,850 --> 00:41:09,482 Ellers kan vi snakke litt mer av om hastigheten av reaktoren, 822 00:41:09,482 --> 00:41:11,190 eller vi kan svare spørsmål du måtte ha 823 00:41:11,190 --> 00:41:15,050 fordi disse er alle kjernedeler for å reagere på at jeg ønsker å snakke om. 824 00:41:15,050 --> 00:41:16,540 Vi kan gå videre. 825 00:41:16,540 --> 00:41:17,590 Vi kan svare på spørsmål. 826 00:41:17,590 --> 00:41:18,560 Hva en du vill. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> PUBLIKUM: Kan du bruke JSX i normal Javascript? 829 00:41:24,205 --> 00:41:27,150 Eller er det noe som kom med [uhørbart]? 830 00:41:27,150 --> 00:41:30,760 >> NEEL Mehta: Spørsmålet er boks du bruker JSX med normal Javascript? 831 00:41:30,760 --> 00:41:32,620 Svaret er ja. 832 00:41:32,620 --> 00:41:41,070 JSX er bare en måte det tar Javascript som har HTML innsiden av den, 833 00:41:41,070 --> 00:41:44,215 og det kompilerer til Javascript som har ikke HTML innsiden av det. 834 00:41:44,215 --> 00:41:47,880 Så oppdager at-- så merke til her. 835 00:41:47,880 --> 00:41:50,820 Dette ser ut som du har som div og du har ting inne i den. 836 00:41:50,820 --> 00:41:54,970 >> Som kompilerer til Javascript som som genererer det samme. 837 00:41:54,970 --> 00:41:59,590 Jeg antar det jeg sier er at JSX er bare en syntaktisk, som det er 838 00:41:59,590 --> 00:42:03,530 en preprosessor for Javascript mye som PHP er en preprosessor for HTML. 839 00:42:03,530 --> 00:42:05,490 JSC er en preprosessor for Javascript som lar 840 00:42:05,490 --> 00:42:12,970 du putter HTML innsiden av Javascript. 841 00:42:12,970 --> 00:42:16,425 Og så hvis du har rett til transformatoren som er en ting som heter [uhørbart], 842 00:42:16,425 --> 00:42:17,300 som vil forandre. 843 00:42:17,300 --> 00:42:19,360 Høyre preprosessor, det vil la deg gjøre det. 844 00:42:19,360 --> 00:42:20,235 >> PUBLIKUM: [uhørbart] 845 00:42:20,235 --> 00:42:23,026 NEEL Mehta: Vanligvis trenger du ikke å sette HTML innsiden av Javascript 846 00:42:23,026 --> 00:42:24,110 med mindre du gjør React. 847 00:42:24,110 --> 00:42:27,146 Men du kan gjøre det likevel. 848 00:42:27,146 --> 00:42:27,645 Jepp? 849 00:42:27,645 --> 00:42:29,353 >> PUBLIKUM: Jeg tror du hadde beskrevet React 850 00:42:29,353 --> 00:42:31,970 som en funksjonell programmering språk. 851 00:42:31,970 --> 00:42:35,646 Vi har vært å lære C i CS50. 852 00:42:35,646 --> 00:42:38,032 Er C også et funksjonelt språk? 853 00:42:38,032 --> 00:42:39,990 NEEL Mehta: Så spørsmålet handler om funksjonell 854 00:42:39,990 --> 00:42:43,010 versus en annen ting som heter maktpåliggende eller prosedyreorientert programmering. 855 00:42:43,010 --> 00:42:44,820 Det finnes to typer programmer populære. 856 00:42:44,820 --> 00:42:48,550 En kalles prosessuell, som handler om som gjør kommandoer, 857 00:42:48,550 --> 00:42:51,510 og en er funksjonell, som er alt om å ha funksjoner og ha 858 00:42:51,510 --> 00:42:52,930 inngang og utgang av disse. 859 00:42:52,930 --> 00:42:55,930 React er en funksjonell paradigme. 860 00:42:55,930 --> 00:42:58,010 C er en meget prosedyre paradigme. 861 00:42:58,010 --> 00:43:02,360 >> Og som et eksempel, C f.eks du ikke gjør dette deklarative måte 862 00:43:02,360 --> 00:43:04,390 med å lage programmet, ikke sant? 863 00:43:04,390 --> 00:43:06,826 Du har å si, skrive dette. 864 00:43:06,826 --> 00:43:07,950 Endre dette datastruktur. 865 00:43:07,950 --> 00:43:08,530 Skriv ut dette. 866 00:43:08,530 --> 00:43:10,160 Det handler om kommandoer. 867 00:43:10,160 --> 00:43:12,640 >> I React, det er ikke at mange kommandoer. 868 00:43:12,640 --> 00:43:15,145 Det handler om å ha komponentene du satt sammen. 869 00:43:15,145 --> 00:43:16,300 De er som funksjoner. 870 00:43:16,300 --> 00:43:26,360 Du har som en funksjon kalt CardView, 871 00:43:26,360 --> 00:43:28,680 som er en funksjon som har inngang, utgang, 872 00:43:28,680 --> 00:43:30,660 og så React er alt om denne filosofien 873 00:43:30,660 --> 00:43:32,700 oss av having-- du har data. 874 00:43:32,700 --> 00:43:34,910 Du passerer det gjennom denne algoritme, og det vil 875 00:43:34,910 --> 00:43:36,800 utgang HTML som du bare trykt på siden, 876 00:43:36,800 --> 00:43:39,180 og så må du bygge det bit for bit. 877 00:43:39,180 --> 00:43:42,800 >> Så for å trekke en metafor for hva Jeg sa før, vet du hvordan 878 00:43:42,800 --> 00:43:47,050 på Facebook hvis du får en melding, og du kan velge hvilke deler å oppdatere, 879 00:43:47,050 --> 00:43:47,882 det er prosessuelle. 880 00:43:47,882 --> 00:43:48,840 Det er viktig, ikke sant? 881 00:43:48,840 --> 00:43:49,806 OK, jeg fikk en melding. 882 00:43:49,806 --> 00:43:50,930 La oss endre konto der. 883 00:43:50,930 --> 00:43:52,110 >> La oss komme et vindu her. 884 00:43:52,110 --> 00:43:52,780 La oss endre konto der. 885 00:43:52,780 --> 00:43:53,700 La oss trekke dette her. 886 00:43:53,700 --> 00:43:55,220 Det er en prosessuell tilnærming. 887 00:43:55,220 --> 00:44:00,240 >> Det er det ting som Hjørne, Boost, Backbone, andre rammer bruke. 888 00:44:00,240 --> 00:44:01,200 React er funksjonell. 889 00:44:01,200 --> 00:44:03,324 Det er en helt annen måte for å tenke på ting. 890 00:44:03,324 --> 00:44:07,950 Det tar denne ideen om å la oss ha funksjoner eller algoritmer som vil deg 891 00:44:07,950 --> 00:44:08,800 gi det data. 892 00:44:08,800 --> 00:44:11,820 Det vil spytte ut hva det bør være, og datamaskinen 893 00:44:11,820 --> 00:44:13,490 vil ta seg av veier ut. 894 00:44:13,490 --> 00:44:15,890 Du trenger ikke å håndtere det selv. 895 00:44:15,890 --> 00:44:18,470 Gjør det litt fornuft? 896 00:44:18,470 --> 00:44:18,970 Yeah? 897 00:44:18,970 --> 00:44:24,180 >> PUBLIKUM: I et funksjonelt språk, alt skjer på en gang? 898 00:44:24,180 --> 00:44:26,800 >> NEEL Mehta: Nei, ting skjer i rekkefølge. 899 00:44:26,800 --> 00:44:29,320 Som her er det fortsatt rekkefølge, men det gjør ikke 900 00:44:29,320 --> 00:44:32,390 skje i rekkefølge av like rose, kommando, kommando. 901 00:44:32,390 --> 00:44:36,459 Det skjer i rekkefølge funksjonen gir deg utgang. 902 00:44:36,459 --> 00:44:37,750 Sette det inn i en annen funksjon. 903 00:44:37,750 --> 00:44:39,550 Sette det inn i en annen funksjon, en annen funksjon. 904 00:44:39,550 --> 00:44:41,470 >> Hvis du gjør CS51, vil du lære funksjonelle programmer 905 00:44:41,470 --> 00:44:42,886 litt ut av omfanget av denne. 906 00:44:42,886 --> 00:44:45,090 Men innerst inne, hva gjør Reagere kult er ikke bare 907 00:44:45,090 --> 00:44:46,840 den enveis datastrøm og den virtuelle Dom, 908 00:44:46,840 --> 00:44:48,700 men også denne ideen om funksjonell programmering. 909 00:44:48,700 --> 00:44:51,720 Og funksjonell programmering er veldig lett å komponere og gjøre kule ting ut av, 910 00:44:51,720 --> 00:44:53,844 og det er veldig lett å tenke om og grunn om. 911 00:44:53,844 --> 00:44:55,450 Så det er en annen god trekning av React. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Flere spørsmål? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Yeah? 916 00:45:03,150 --> 00:45:06,840 >> PUBLIKUM: Um, hvorfor skulle du bruker la i motsetning til Var? 917 00:45:06,840 --> 00:45:10,450 >> NEEL Mehta: Så spørsmålet er hvorfor du bruker la istedenfor Var? 918 00:45:10,450 --> 00:45:13,220 Dette er noe som heter ES6 eller ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Det er den nye versjonen av Javascript. 920 00:45:15,820 --> 00:45:19,050 Det er en haug av tekniske årsaker, Men la er en bedre versjon av var. 921 00:45:19,050 --> 00:45:20,724 >> Det er hvordan du deklarere variabler. 922 00:45:20,724 --> 00:45:21,390 Du kan bruke utleid. 923 00:45:21,390 --> 00:45:22,140 Du kan bruke var. 924 00:45:22,140 --> 00:45:23,825 Let har en haug med teknisk reasons-- du kan se dem 925 00:45:23,825 --> 00:45:25,610 opp later-- for hvorfor det er bedre. 926 00:45:25,610 --> 00:45:28,780 I utgangspunktet har ES6 noe hyggelig ny syntaks, noen nye funksjoner 927 00:45:28,780 --> 00:45:30,720 på toppen av den gamle Javascript. 928 00:45:30,720 --> 00:45:32,782 >> Så vi har som fem minutter. 929 00:45:32,782 --> 00:45:34,990 Jeg ville bare snakke om en ting virkelig fort. 930 00:45:34,990 --> 00:45:36,450 Hvis du har spørsmål, la oss snakke om det etter dette. 931 00:45:36,450 --> 00:45:38,366 Men bare så dette blir fanget på kamera, jeg bare 932 00:45:38,366 --> 00:45:41,550 ønsker å snakke litt om hvordan du faktisk bruke React i dine apps. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Hvis du går her, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 dette er hjemmesiden for React, og det vil vise deg hvordan du faktisk bruker 936 00:46:03,320 --> 00:46:05,320 Reagere på sidene dine. 937 00:46:05,320 --> 00:46:08,845 I utgangspunktet er det en liten komplisert prøver å installere reagere. 938 00:46:08,845 --> 00:46:12,300 Det er ikke så lett som du bare dra og slippe en Javascript der. 939 00:46:12,300 --> 00:46:15,890 >> Du må ha din transformator satt opp, som vil, som det gjorde før, 940 00:46:15,890 --> 00:46:18,120 slå JSX inn normal Javascript. 941 00:46:18,120 --> 00:46:21,030 Du må tingen som vil kompilere du ES6 til det normale. 942 00:46:21,030 --> 00:46:24,720 Java det er mye i bevegelse delene du trenger å gjøre, så det er en ting 943 00:46:24,720 --> 00:46:27,200 kalt Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 Og dette er et kommandolinjeverktøy som vil hjelpe deg stillas ut React 945 00:46:31,110 --> 00:46:32,380 prosjekter lett. 946 00:46:32,380 --> 00:46:38,660 >> Så du kan lese om dette senere, men det er noen verktøy 947 00:46:38,660 --> 00:46:40,160 at Yeoman tilbyr. 948 00:46:40,160 --> 00:46:43,280 De vil la deg lage en React app med alt innebygd. 949 00:46:43,280 --> 00:46:46,030 Som det vil ha bygget i, komponenter bygget i. 950 00:46:46,030 --> 00:46:47,880 Det vil ha din transformator bygget i. 951 00:46:47,880 --> 00:46:50,699 De har mange kule ting bygget i automatisk 952 00:46:50,699 --> 00:46:52,240 ved hjelp av disse tingene kalles generatorer. 953 00:46:52,240 --> 00:46:54,620 >> Så les om dette hvis du vil. 954 00:46:54,620 --> 00:46:59,110 Bare gå på Yeoman, Y-E-O-M-A-N, og du kan finne generatorer som disse. 955 00:46:59,110 --> 00:47:01,263 Og med generatorer som disse, du bare liker én 956 00:47:01,263 --> 00:47:03,010 er et par kommandolinje-kommandoer. 957 00:47:03,010 --> 00:47:05,530 Det vil stillas ut en Hele React app for deg. 958 00:47:05,530 --> 00:47:10,470 Det vil få all den manuelle rør, og grovarbeidet gjort for deg, 959 00:47:10,470 --> 00:47:13,010 og dette er grunnen til at du bare fokusere på bare å skrive i React. 960 00:47:13,010 --> 00:47:16,739 >> Så i utgangspunktet bygge en Reagere app er triviell. 961 00:47:16,739 --> 00:47:19,530 Det er kablet alle sammen, men det er verktøy som vil gjøre det for deg. 962 00:47:19,530 --> 00:47:23,070 Så hvis du ønsker å gjøre en React app, prøv å gjøre det på den måten. 963 00:47:23,070 --> 00:47:26,360 Hvis du bare ønsker å eksperimentere, du kan prøve å bruke dette CodePen 964 00:47:26,360 --> 00:47:28,550 fordi dette CodePen har alle reagerer ledninger. 965 00:47:28,550 --> 00:47:30,240 Jeg har gjort alt arbeidet for deg allerede. 966 00:47:30,240 --> 00:47:34,610 >> Så hvis du ønsker å gjøre som en produksjon for å frigjøre React app, 967 00:47:34,610 --> 00:47:37,220 prøve en av disse generatorer. 968 00:47:37,220 --> 00:47:40,240 Hvis du bare vil spille rundt, er det ofte verdt bare 969 00:47:40,240 --> 00:47:44,490 som prøver å spille rundt på CodePen her. 970 00:47:44,490 --> 00:47:45,470 Høres bra? 971 00:47:45,470 --> 00:47:45,970 Kjølig. 972 00:47:45,970 --> 00:47:47,890 >> Så det er alt jeg har. 973 00:47:47,890 --> 00:47:52,470 Igjen, all kode og eksempler er kommer til å være på denne nettsiden her. 974 00:47:52,470 --> 00:47:55,509 Så, igjen, vi snakket ikke om mye syntaks av React, 975 00:47:55,509 --> 00:47:57,550 men for å finne alle de små syntaktiske detaljer, 976 00:47:57,550 --> 00:48:00,320 det er alle kommer til å være tilgjengelig på denne nettsiden her. 977 00:48:00,320 --> 00:48:02,660 >> Så jeg vil anbefale som ta det første skrittet. 978 00:48:02,660 --> 00:48:06,277 Sett det inn i din CodePen. 979 00:48:06,277 --> 00:48:08,110 Prøv arbeider med å gjøre det til det andre trinnet. 980 00:48:08,110 --> 00:48:11,310 Det er et fjerde trinn, og bare se hvor du får fra det. 981 00:48:11,310 --> 00:48:14,840 >> Flere spørsmål, sjekk ut at siden eller send meg. 982 00:48:14,840 --> 00:48:16,490 Det er min e-post. 983 00:48:16,490 --> 00:48:19,885 Men jeg vil gjerne hjelpe deg med noen spørsmål du måtte ha om React. 984 00:48:19,885 --> 00:48:21,010 Så, ja, det er alt jeg har. 985 00:48:21,010 --> 00:48:23,410 Takk så mye for ser eller for å delta. 986 00:48:23,410 --> 00:48:26,820 Og jeg skal ta noen spørsmål du kan ha etter dette nå. 987 00:48:26,820 --> 00:48:29,140 Så takk alle for å se på. 988 00:48:29,140 --> 00:48:31,270