1 00:00:00,000 --> 00:00:02,910 >> [Musik spiller] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> NEEL MEHTA: Her går. 4 00:00:07,275 --> 00:00:11,070 >> Nå, alle, velkommen til web apps i fremtiden med at reagere. 5 00:00:11,070 --> 00:00:11,870 Det er CS50. 6 00:00:11,870 --> 00:00:12,930 Mit navn er Neel. 7 00:00:12,930 --> 00:00:17,689 Jeg er en TA for CS50 og en sophomore på Harvard College og en meget, meget 8 00:00:17,689 --> 00:00:18,730 passioneret webudvikler. 9 00:00:18,730 --> 00:00:20,730 Så jeg er meget spændende at tale med dig i dag, 10 00:00:20,730 --> 00:00:24,550 uanset om du er her eller i hjemmet ser, om at reagere, hvilket er igen 11 00:00:24,550 --> 00:00:27,270 som jeg sagde, fremtiden for web apps. 12 00:00:27,270 --> 00:00:29,055 >> Så reagere er et web rammer. 13 00:00:29,055 --> 00:00:30,930 Og som jeg har været at fortælle til nogle folk her, 14 00:00:30,930 --> 00:00:33,400 rammer er blot en sæt af værktøjer, du kan bruge 15 00:00:33,400 --> 00:00:35,770 at strukturere og opbygge din web-app. 16 00:00:35,770 --> 00:00:39,010 Og web apps er, igen, hjemmesider der er interaktive som Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, uanset hvad. 18 00:00:42,330 --> 00:00:45,590 >> Så Facebook er et web ramme der blev udviklet af Facebook 19 00:00:45,590 --> 00:00:48,060 et par år tilbage-- REACT er. 20 00:00:48,060 --> 00:00:50,830 Det er siden blevet anvendt i Facebook på deres 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 anden fremtrædende tidlig adoptant af React. 23 00:00:56,350 --> 00:00:58,630 >> Det er virkelig været at få meget populære. 24 00:00:58,630 --> 00:01:03,420 Hvis du nogensinde bruger ting som Vinkel eller Backbone, er af samme familie, 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 nye hot ting. 27 00:01:06,890 --> 00:01:09,590 Det er virkelig, virkelig enorme. 28 00:01:09,590 --> 00:01:13,470 >> Og så reagere er godt ikke blot som en web rammer for opbygning af grænseflader. 29 00:01:13,470 --> 00:01:16,020 Det er godt til at bygge web-grænseflader. 30 00:01:16,020 --> 00:01:18,350 Der er også en ting kaldet React Native som 31 00:01:18,350 --> 00:01:22,200 lader dig bygge interfaces til Android og iOS 32 00:01:22,200 --> 00:01:26,390 og måske andre platforme i fremtiden ved hjælp af blot den samme JavaScript-kode. 33 00:01:26,390 --> 00:01:31,130 Du kan bruge nøjagtig samme JavaScript-kode til at gøre hjemmesider, 34 00:01:31,130 --> 00:01:33,040 at gøre Android-apps og iOS apps. 35 00:01:33,040 --> 00:01:35,000 >> Det er en meget, meget spændende tid. 36 00:01:35,000 --> 00:01:37,070 Det er en virkelig, virkelig cool lejlighed. 37 00:01:37,070 --> 00:01:42,020 Det er virkelig en universel web grænseflade udviklingsværktøj, 38 00:01:42,020 --> 00:01:44,420 så det er en meget, meget vigtige ting at vide. 39 00:01:44,420 --> 00:01:46,949 Og som jeg fortalte folk før dette, tror jeg, 40 00:01:46,949 --> 00:01:48,990 kommer til at ændre, hvordan vi bygge web-apps evigt. 41 00:01:48,990 --> 00:01:55,820 Så det er måske en smule overdrivelse, men jeg synes det er en temmelig god ting at vide. 42 00:01:55,820 --> 00:01:57,580 >> OK, så hvad er reagere? 43 00:01:57,580 --> 00:02:01,020 Reager er en ramme, du kan bruge til opbygning grænseflader. 44 00:02:01,020 --> 00:02:03,240 En grænseflade er, igen, en webside, ikke? 45 00:02:03,240 --> 00:02:06,340 Så her er Instagram.com, anvendelser reagere. 46 00:02:06,340 --> 00:02:08,740 >> Reagere er bygget på idéen om 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 knap. 49 00:02:14,470 --> 00:02:15,250 Det er et afsnit. 50 00:02:15,250 --> 00:02:17,500 Det er en overskrift, ikke? 51 00:02:17,500 --> 00:02:22,740 Og Instagram vil bruge disse, men det vil også bruge komponenter for at reagere. 52 00:02:22,740 --> 00:02:25,740 >> React komponenter er tunet HTML-elementer 53 00:02:25,740 --> 00:02:28,100 der har deres egen adfærd indeholdt i dem. 54 00:02:28,100 --> 00:02:31,800 Så som et eksempel, kunne vi have gangen element, en tidskomponent, 55 00:02:31,800 --> 00:02:34,095 som vil indeholde ligesom tidsstemplet, du ved, 56 00:02:34,095 --> 00:02:37,170 en profil komponent, som vil indeholde profilbillede 57 00:02:37,170 --> 00:02:38,820 og navnet på den person. 58 00:02:38,820 --> 00:02:42,930 Det kan have en lignende tæller, som kan tælle som antallet af folk, 59 00:02:42,930 --> 00:02:45,610 og hvis du klikker på det, det vil øge antallet af folk. 60 00:02:45,610 --> 00:02:48,200 En komponent er blot en bundt af HTML-kode, 61 00:02:48,200 --> 00:02:50,520 har nogle funktioner pakket inde i den. 62 00:02:50,520 --> 00:02:53,770 Så det er ligesom en HTML-element på steroider, som jeg sagde før. 63 00:02:53,770 --> 00:02:56,270 Du kan tage disse komponenter, og du kan sætte dem sammen 64 00:02:56,270 --> 00:02:59,060 at få nye komponenter i dette tilfælde en post-komponent, 65 00:02:59,060 --> 00:03:00,505 som indeholder alle disse ting. 66 00:03:00,505 --> 00:03:04,050 Det ville indeholde tid, Profile, LikeCounter, måske kommentaren 67 00:03:04,050 --> 00:03:06,100 og måske selve billedet. 68 00:03:06,100 --> 00:03:10,810 Og så web apps er netop bygget ved at tage komponenter og sætte dem sammen. 69 00:03:10,810 --> 00:03:15,620 En Instagram-feed er intet mere end en flok af stillinger ene efter den anden, 70 00:03:15,620 --> 00:03:19,032 hvert indlæg indeholder ligesom Time, Profil, LikeCounter, og så videre. 71 00:03:19,032 --> 00:03:20,490 Det er lidt ligesom at bygge et hus. 72 00:03:20,490 --> 00:03:22,660 Du behøver ikke at bygge hus fra toppen og ned. 73 00:03:22,660 --> 00:03:24,960 Du tager components-- dig tage ligesom badeværelset. 74 00:03:24,960 --> 00:03:28,320 Du tager 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 af huset. 76 00:03:29,760 --> 00:03:32,860 >> Så REACT er alle bygget op omkring denne idé af komponenter, 77 00:03:32,860 --> 00:03:36,600 er interaktive, som er deklarativ. 78 00:03:36,600 --> 00:03:39,650 Ligesom du bare sige, hvad en profil er, og det gør det. 79 00:03:39,650 --> 00:03:40,600 De er kombinerbare. 80 00:03:40,600 --> 00:03:43,880 Du kan tage en tid og en profil, sætte dem sammen, lave noget bedre. 81 00:03:43,880 --> 00:03:47,770 Og de er genanvendelige, så hvis du have kildekoden til et indlæg, 82 00:03:47,770 --> 00:03:49,440 du kunne integrere det nogen steder. 83 00:03:49,440 --> 00:03:53,160 >> Du kan indlejre en Instagram ting på din egen hjemmeside. 84 00:03:53,160 --> 00:03:56,830 Du kan integrere i Facebook, for eksempel, så længe den anvender React så godt. 85 00:03:56,830 --> 00:04:00,360 Så komponenter er virkelig, virkelig, virkelig kraftfulde byggesten nettet 86 00:04:00,360 --> 00:04:04,180 der kan anvendes overalt og sat sammen for at gøre nye byggesten. 87 00:04:04,180 --> 00:04:07,159 Det er den meget, meget højt niveau overblik. 88 00:04:07,159 --> 00:04:09,200 Så igen, hvis du har eventuelle spørgsmål på ethvert punkt 89 00:04:09,200 --> 00:04:14,470 om filosofi reaktor, den kodning, for at stoppe mig, og lad mig vide. 90 00:04:14,470 --> 00:04:18,420 >> OK, så reagerer er cool, fordi det har en anden måde at se 91 00:04:18,420 --> 00:04:19,870 på, hvordan du bygge web apps. 92 00:04:19,870 --> 00:04:23,620 Du har sikkert hørt om MVC, en model, du styrer i CS50 eller hvad 93 00:04:23,620 --> 00:04:25,940 andre sondering klasser, du bruger. 94 00:04:25,940 --> 00:04:29,000 Og de fleste rammer er bygget op omkring ideen om MVC. 95 00:04:29,000 --> 00:04:30,410 Reagerer ikke. 96 00:04:30,410 --> 00:04:32,980 REACT er bygget op omkring ideen af ensrettet datastrøm 97 00:04:32,980 --> 00:04:36,510 som det fremgår af dette diagram eller grafik her. 98 00:04:36,510 --> 00:04:38,260 >> Dybest set, du har en datakilde. 99 00:04:38,260 --> 00:04:42,380 Og datakilden vil beslutte hvordan at lægge visse komponenter. 100 00:04:42,380 --> 00:04:45,452 Og komponenterne vil så, når de ændrer, 101 00:04:45,452 --> 00:04:47,160 de vil fortælle datakilde at ændre. 102 00:04:47,160 --> 00:04:49,350 >> Hvis du vil bruge Instagram eksempel kan du have 103 00:04:49,350 --> 00:04:52,050 en liste af post genstande som i en database eller noget. 104 00:04:52,050 --> 00:04:53,310 At de data. 105 00:04:53,310 --> 00:04:57,600 Og derefter vores post-komponenter vil tage, at data, 106 00:04:57,600 --> 00:05:01,830 og bruge disse data til at gengive en ting på skærmen. 107 00:05:01,830 --> 00:05:04,300 Det er, hvad pilen fra data til komponent er, 108 00:05:04,300 --> 00:05:07,930 og derefter den samme data bliver brugt at gøre en masse af 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 måske har en liste over meddelelser som din datakilde. 111 00:05:13,410 --> 00:05:15,927 Og det ville gøre ikke kun listen over beskeder 112 00:05:15,927 --> 00:05:17,510 men også en liste over de venner, du har. 113 00:05:17,510 --> 00:05:19,200 Du har ulæste. 114 00:05:19,200 --> 00:05:23,330 Måske også gøre Facebook-ting der er i bunden af ​​Facebook.com. 115 00:05:23,330 --> 00:05:25,610 De samme data er en enkelt kilde af sandhed 116 00:05:25,610 --> 00:05:28,290 og som forårsager en masse komponenter, der skal gengives. 117 00:05:28,290 --> 00:05:30,290 Og når en af ​​dem komponenter ændres, 118 00:05:30,290 --> 00:05:32,320 det går tilbage og ændrer datakilden. 119 00:05:32,320 --> 00:05:33,460 >> Du sender en besked, ikke? 120 00:05:33,460 --> 00:05:34,780 Der ændrer datakilden. 121 00:05:34,780 --> 00:05:39,490 Du læser dine beskeder, så du sætter ulæst til 0. 122 00:05:39,490 --> 00:05:41,136 Der ændrer datakilden. 123 00:05:41,136 --> 00:05:44,010 Og bemærk, at alle disse på en pil gå tilbage til de samme data 124 00:05:44,010 --> 00:05:47,662 kilde, så du ved, givet en vis datasæt, 125 00:05:47,662 --> 00:05:49,870 du ved præcis, hvad det side kommer til at se ud. 126 00:05:49,870 --> 00:05:50,700 Det er deterministisk. 127 00:05:50,700 --> 00:05:53,451 Du ved, givet visse oplysninger, hvad siden kommer til at se ud. 128 00:05:53,451 --> 00:05:56,158 Du kan forudsige, hvordan det kommer til at opfører sig og hvordan det går 129 00:05:56,158 --> 00:05:57,650 at arbejde, når de er sat sammen. 130 00:05:57,650 --> 00:06:00,410 >> Og hvis jeg havde en million komponenter her, ville det opfører sig på samme, ikke? 131 00:06:00,410 --> 00:06:02,290 Du ville ikke have nogen mærkelige sammenkoblinger. 132 00:06:02,290 --> 00:06:04,120 Et data gengives en million komponenter. 133 00:06:04,120 --> 00:06:06,879 En million komponenter kunne gå tilbage og redigere dataene. 134 00:06:06,879 --> 00:06:07,920 Og så dette er meget rart. 135 00:06:07,920 --> 00:06:10,870 Vi bygger kombinerbare, let skalerbare web apps. 136 00:06:10,870 --> 00:06:13,150 >> Du har en datakilde, kilden til sandheden. 137 00:06:13,150 --> 00:06:15,790 Det fortæller dine komponenter hvordan man lægge ud på siden, 138 00:06:15,790 --> 00:06:18,190 og komponenterne vil håndtere interaktion. 139 00:06:18,190 --> 00:06:20,150 Og hvis de ønsker at ændre ting, bare gå tilbage 140 00:06:20,150 --> 00:06:21,750 og fortælle datakilden til at ændre. 141 00:06:21,750 --> 00:06:22,850 Give mening? 142 00:06:22,850 --> 00:06:26,010 Så React handler om forståelse hvordan man opbygger en komponent 143 00:06:26,010 --> 00:06:29,540 og hvordan man kan gøre din komponent interagere med omverdenen. 144 00:06:29,540 --> 00:06:31,850 >> Gøre komponent interagerer med omverdenen 145 00:06:31,850 --> 00:06:34,490 anvender en anden teknologi kaldet Flux, som 146 00:06:34,490 --> 00:06:36,872 er en ramme, der er tilføjet på toppen af ​​reagere. 147 00:06:36,872 --> 00:06:38,330 Vi kommer ikke til at tale om det. 148 00:06:38,330 --> 00:06:42,990 Vi kommer til at tale mere om, givet data, hvordan kan du gengive en komponent? 149 00:06:42,990 --> 00:06:47,010 >> Og så reagere er virkelig cool, fordi du kan bruge det med enhver bagenden, du ønsker. 150 00:06:47,010 --> 00:06:50,480 Hvis du har ligesom en Python back ende, hvis din Python kan spytte ud nogle data, 151 00:06:50,480 --> 00:06:51,610 React kan gøre det. 152 00:06:51,610 --> 00:06:54,700 Hvis du ikke er JS udgange af data, React gør det. 153 00:06:54,700 --> 00:06:56,890 Ruby skinner op med data, React gør det. 154 00:06:56,890 --> 00:07:01,860 >> Så React er dybest set en web visning-- en forende med komponenter 155 00:07:01,860 --> 00:07:03,910 til hvilken som helst datakilde. 156 00:07:03,910 --> 00:07:07,145 Og så går fra datakilden til reagerer komponenter er temmelig let. 157 00:07:07,145 --> 00:07:08,770 Går den anden vej er lidt sværere. 158 00:07:08,770 --> 00:07:10,462 Der bruger Flux som jeg nævnte før. 159 00:07:10,462 --> 00:07:11,420 Vi vil ikke komme ind i denne. 160 00:07:11,420 --> 00:07:13,740 Vi vil fokusere mere på data-til-komponenten side. 161 00:07:13,740 --> 00:07:15,880 Denne måde kan du gøre cool, sjov web apps. 162 00:07:15,880 --> 00:07:19,870 Det vil ikke påvirke omverdenen for nu, men det er en anden historie. 163 00:07:19,870 --> 00:07:22,210 >> OK, så hvis du var her til min sidste seminar 164 00:07:22,210 --> 00:07:26,610 du ved, at alle koden for dagens snak kommer til at være på denne URL 165 00:07:26,610 --> 00:07:29,320 her, undskyld, denne URL her. 166 00:07:29,320 --> 00:07:32,730 Og dybest set er vi kommer til at gå gennem fire trin, måske fem, 167 00:07:32,730 --> 00:07:33,510 sandsynligvis ikke fem. 168 00:07:33,510 --> 00:07:37,300 Vi vil bevæge sig gennem fire trin opbygge en prøve React app. 169 00:07:37,300 --> 00:07:39,550 Og så alle kildekoden for hvert skridt på vejen 170 00:07:39,550 --> 00:07:42,216 kommer til at være lige her, så hvis du følger sammen derhjemme, 171 00:07:42,216 --> 00:07:43,991 velkommen til at granske denne kode. 172 00:07:43,991 --> 00:07:46,740 Hvis du følger sammen her, vi vil vise det på skærmen, 173 00:07:46,740 --> 00:07:47,739 så du skal ikke bekymre dig om det. 174 00:07:47,739 --> 00:07:50,930 Men hvis du er hjemme, føler velkommen til at besøge denne hjemmeside. 175 00:07:50,930 --> 00:07:56,400 Og Ja, skal du være i stand til at få al den kode, du nogensinde havde brug for her. 176 00:07:56,400 --> 00:08:01,380 Så det er en god bedrager ark samt til dine fremtidige eventyr med React. 177 00:08:01,380 --> 00:08:04,490 Cool, så hvis alle, der er her, og selv hvis du er hjemme, 178 00:08:04,490 --> 00:08:11,580 trække op denne hjemmeside, is.gd/cs50react, ingen kapital, ingen understregning, ingen ingenting. 179 00:08:11,580 --> 00:08:15,849 >> Du vil se en side, der ser lidt ligesom dette. 180 00:08:15,849 --> 00:08:17,140 Dette er en ting kaldet CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen er et samarbejdsprojekt kodning miljø 182 00:08:20,030 --> 00:08:23,364 som jeg kan skrive kode her, og det vil automatisk blive sendt til dig. 183 00:08:23,364 --> 00:08:24,780 Og til denne måde kan jeg skrive kode. 184 00:08:24,780 --> 00:08:26,920 Jeg kan køre kode. 185 00:08:26,920 --> 00:08:33,470 >> For example-- og hvis det reloads-- se, Jeg kører JavaScript-kode på siden 186 00:08:33,470 --> 00:08:36,390 lige her, og det vil automatisk gengive en webside 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åde for os at afprøve kode 189 00:08:40,039 --> 00:08:43,089 virkelig hurtig uden at skulle bruge vores id eller bruge vores lokale maskine 190 00:08:43,089 --> 00:08:44,290 eller hvad. 191 00:08:44,290 --> 00:08:47,670 Det er en meget hurtig måde for dig at mockup og afprøve forskellige former for kode. 192 00:08:47,670 --> 00:08:50,560 >> Så jeg har tænkt mig at tage eksempel kode, sætte det her. 193 00:08:50,560 --> 00:08:52,374 Vi kommer til at arbejde gennem det. 194 00:08:52,374 --> 00:08:54,540 Og hvis du er hjemme, du kan trække dette op så godt. 195 00:08:54,540 --> 00:08:57,530 Og jeg har allerede installeret Reagerer her, så du kan bare 196 00:08:57,530 --> 00:09:00,770 skrive din egen kode her, og Prøv det som din egen legeplads. 197 00:09:00,770 --> 00:09:04,940 >> Ja, hvis alle til åbne op dette link her. 198 00:09:04,940 --> 00:09:08,080 Giv mig en thumbs op når du har det åbent. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Fedt fedt fedt. 201 00:09:13,770 --> 00:09:16,914 Der er ikke noget her for nu, men Vi vil ændre det meget snart. 202 00:09:16,914 --> 00:09:21,250 >> OK, så reagere er en JavaScript bibliotek, og som sådan, 203 00:09:21,250 --> 00:09:24,480 kræver kendskab til JavaScript, som er programmeringssprog. 204 00:09:24,480 --> 00:09:27,660 Og det bliver brugt til andre ting nu også men først og fremmest på nettet udvikler 205 00:09:27,660 --> 00:09:32,040 sprog, så hvis du ikke er bekendt med at læse et websted kaldet JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 Det er vidunderligt. 207 00:09:32,700 --> 00:09:34,240 Du kan lære JavaScript om en halv time. 208 00:09:34,240 --> 00:09:34,990 Det er utroligt. 209 00:09:34,990 --> 00:09:36,420 >> Så giv det en læse. 210 00:09:36,420 --> 00:09:39,960 Vi har også en masse HTML her, fordi vi designe websider selvfølgelig. 211 00:09:39,960 --> 00:09:43,890 Så hvis du er bekendt med HTML, så tjek HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Jeg tror at lære Reager er en million gange lettere, hvis du allerede 213 00:09:46,520 --> 00:09:47,892 kende byggesten. 214 00:09:47,892 --> 00:09:50,600 Hvis du har de komponenter, er det let at gøre en større komponent. 215 00:09:50,600 --> 00:09:51,860 Det er React sprog for dig. 216 00:09:51,860 --> 00:09:54,270 >> Så gå videre og give disse ting læse. 217 00:09:54,270 --> 00:09:55,070 Pause denne video. 218 00:09:55,070 --> 00:09:57,440 Giv det en læser, hvis du er derhjemme, hvis du ikke er 219 00:09:57,440 --> 00:10:00,794 fortrolig med HTML eller JavaScript 220 00:10:00,794 --> 00:10:02,960 OK, så hvad vi vil gøre, er at vi kommer til at gøre 221 00:10:02,960 --> 00:10:06,470 en meget grundlæggende flashkort app hjælp reagere. 222 00:10:06,470 --> 00:10:08,210 Vi kommer til at have en flashkort. 223 00:10:08,210 --> 00:10:09,880 Du kan bladre kortet frem og tilbage. 224 00:10:09,880 --> 00:10:12,399 Og vi vil også have en liste over alle de kort, vi har, 225 00:10:12,399 --> 00:10:14,190 og hvis vi føler ambitiøs, kan vi være 226 00:10:14,190 --> 00:10:17,060 i stand til at skifte mellem biler ved at klikke på dem. 227 00:10:17,060 --> 00:10:20,360 >> Men dette er, af din nøgne knogler, en meget enkel React app. 228 00:10:20,360 --> 00:10:22,560 Og så det er faktisk ikke trivielt at gennemføre, 229 00:10:22,560 --> 00:10:26,030 men vi vil vise, at, hvis du gør dette, er det meget, meget nemt at udvide det 230 00:10:26,030 --> 00:10:27,680 hvis andre mennesker hjælpe dig med det. 231 00:10:27,680 --> 00:10:33,750 Så vi kommer til at gå igennem fire trin starter fra bunden at bygge denne. 232 00:10:33,750 --> 00:10:36,740 >> OK, så de fire trin, vi får starter med det første skridt. 233 00:10:36,740 --> 00:10:39,790 Det første skridt vil være opbygge din første komponent. 234 00:10:39,790 --> 00:10:44,830 Som jeg sagde før, en komponent i React er blot et HTML-element på steroider. 235 00:10:44,830 --> 00:10:49,660 Den angiver HTML og nogle adfærd, og det 236 00:10:49,660 --> 00:10:52,600 vil angive, hvordan folk kan interagere med det, hvordan 237 00:10:52,600 --> 00:10:54,270 det ville have interne tilstand. 238 00:10:54,270 --> 00:10:57,630 Ligesom en knap vil vide ligesom hvor mange gange det er blevet klikket f.eks 239 00:10:57,630 --> 00:11:01,010 og det vil vide, hvordan at lægge sig ud. 240 00:11:01,010 --> 00:11:04,430 >> Så lad os gå videre og opbygge vores første komponent ved hjælp af JavaScript. 241 00:11:04,430 --> 00:11:09,711 Så hvis syntaksen ser mærkeligt, det er fordi den slags er. 242 00:11:09,711 --> 00:11:11,710 Så igen, vi vil at foretage en variabel kaldet 243 00:11:11,710 --> 00:11:14,580 app at bruge søgeordet lad, hvilket gør en variabel, 244 00:11:14,580 --> 00:11:18,210 lad App lige React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> Reager er et bibliotek og har den skaber klassen funktionen. 246 00:11:22,609 --> 00:11:24,400 Og denne funktion er lidt af kode, som du 247 00:11:24,400 --> 00:11:29,090 kan bruge til at oprette en ny type React komponent. 248 00:11:29,090 --> 00:11:32,780 Og så React.createClass gør en komponent, 249 00:11:32,780 --> 00:11:35,270 og denne komponent vil være i stand til at gøre ting. 250 00:11:35,270 --> 00:11:40,460 Den vigtigste ting, det kan gøre, er gengive noget, gengivet som en funktion. 251 00:11:40,460 --> 00:11:44,500 >> Igen, hvis dette indeks ikke er indlysende for dig, jeg anbefale du går på JS til katte 252 00:11:44,500 --> 00:11:45,682 og tjekke det ud. 253 00:11:45,682 --> 00:11:47,710 Er det zoomet ind godt nok? 254 00:11:47,710 --> 00:11:48,490 Afkøle. 255 00:11:48,490 --> 00:11:50,670 >> Så hver komponent behov at have en render funktion. 256 00:11:50,670 --> 00:11:53,010 Den gør funktionen siger, hvad skal jeg udskrive på skærmen? 257 00:11:53,010 --> 00:11:54,760 Men komponenten ubrugelig, hvis den ikke gør det 258 00:11:54,760 --> 00:11:58,060 ved, hvad der skal udskrives på skærmen, så du skal have en render funktion. 259 00:11:58,060 --> 00:12:01,904 >> Så i gør ting, du bare nødt til at returnere nogle HTML. 260 00:12:01,904 --> 00:12:03,820 Og hvad er cool, er, at der er en ting kaldet 261 00:12:03,820 --> 00:12:08,660 JSX, som er en forlængelse af JavaScript, der bruges af reagere. 262 00:12:08,660 --> 00:12:11,845 Det lader dig skrive HTML inde af din JavaScript, som 263 00:12:11,845 --> 00:12:13,970 lyde lidt underligt, når du først tænker over det, 264 00:12:13,970 --> 00:12:15,553 men det gør en masse forstand bagefter. 265 00:12:15,553 --> 00:12:17,430 Så vi kan gøre dette. 266 00:12:17,430 --> 00:12:21,360 Hvis du er fortrolig med HTML, jeg kender vi har en div med en generel 267 00:12:21,360 --> 00:12:22,790 beholder til ting. 268 00:12:22,790 --> 00:12:26,380 Vi kan returnere en div, og inde denne div, kan vi sætte ting. 269 00:12:26,380 --> 00:12:32,390 >> Så lad os sige, vi ønsker at gøre bare en straight-up flashkort for nu. 270 00:12:32,390 --> 00:12:34,890 Den flashcard, vil jeg sige, vil have en spørgsmål og svar. 271 00:12:34,890 --> 00:12:37,530 Så inde i denne div, lad os udskrive et afsnit 272 00:12:37,530 --> 00:12:42,155 der siger question-- Hvad er den ultimative svar 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 vil være, selvfølgelig, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Det kom ikke op godt på alle. 277 00:12:59,730 --> 00:13:04,164 Ja, så dybest set kan du virkelig skrive HTML i din JavaScript. 278 00:13:04,164 --> 00:13:06,330 Og det vil være udskrives i skærmen. 279 00:13:06,330 --> 00:13:08,250 Så lad os prøve det. 280 00:13:08,250 --> 00:13:09,520 >> Så vi har vores komponent. 281 00:13:09,520 --> 00:13:12,210 Vi er nødt til at fortælle Reager at sætte komponenten på skærmen 282 00:13:12,210 --> 00:13:18,990 så React.render, så mærke til, at vi behandle app ligesom noget andet grundstof. 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 Ligesom stedet for at sige ligesom img til billede eller p for stykke, 285 00:13:25,100 --> 00:13:28,120 du skriver App, så App er behandlet som et HTML-element. 286 00:13:28,120 --> 00:13:30,380 Som jeg sagde før, er det et element på steroider. 287 00:13:30,380 --> 00:13:32,870 >> Så du gør App, og du give det et sted at sætte den. 288 00:13:32,870 --> 00:13:37,170 Og dette er, hvordan du kan fortælle det, hvor at sætte det. 289 00:13:37,170 --> 00:13:46,200 Jeg har lavet en simpel div på side kaldet med et ID på side, 290 00:13:46,200 --> 00:13:48,300 og det er, hvor element kommer til at gå. 291 00:13:48,300 --> 00:13:49,841 >> Og vi kommer ikke til at køre med HTML. 292 00:13:49,841 --> 00:13:53,145 Dybest set dette vil få sætte indersiden af ​​denne side element 293 00:13:53,145 --> 00:13:54,270 at vi har på skærmen. 294 00:13:54,270 --> 00:13:59,210 Så det kører denne kode, og det trækker det ting på skærmen, så her er vi. 295 00:13:59,210 --> 00:14:01,770 Vi har gjort vores første React komponent. 296 00:14:01,770 --> 00:14:08,000 >> Så lige som et resumé, vi forsigtigt gjort en ny type komponent, ikke? 297 00:14:08,000 --> 00:14:10,145 Det er, hvad det React.createClass. 298 00:14:10,145 --> 00:14:12,680 Og i komponenten, vi fortalte den, hvad den skal gøre. 299 00:14:12,680 --> 00:14:15,590 Når denne komponent er at udskrives på skærmen, 300 00:14:15,590 --> 00:14:19,300 det vil udskrive div med de to stykker inde i den. 301 00:14:19,300 --> 00:14:24,460 >> Og hvad vi gjorde, vi gjorde en ny app ved hjælp af vinkelbeslag app notation. 302 00:14:24,460 --> 00:14:27,160 Vi fortalte det til at sætte det inde i siden element. 303 00:14:27,160 --> 00:14:29,867 Og så hvad jeg gjorde, det skabte en ny app fra denne skabelon. 304 00:14:29,867 --> 00:14:31,200 Og så fortalte jeg det til at gengive den. 305 00:14:31,200 --> 00:14:33,680 Så det sagde, OK, app, hvad skal jeg udskrive? 306 00:14:33,680 --> 00:14:36,970 App siger, gå udskrive en div med to stykker inde i den. 307 00:14:36,970 --> 00:14:40,420 Og voila, der er vores div med to stykker inde i den. 308 00:14:40,420 --> 00:14:43,180 Mening indtil nu? 309 00:14:43,180 --> 00:14:46,690 >> Så igen, hele udfordring React er bare at vide, hvordan man laver komponenter. 310 00:14:46,690 --> 00:14:48,500 Hvordan laver komponenter arbejder sammen. 311 00:14:48,500 --> 00:14:51,780 Nu, hvor vi har lavet vores første komponent, lad os gå tilbage 312 00:14:51,780 --> 00:14:54,284 og gøre komponenter tilpasses. 313 00:14:54,284 --> 00:14:56,700 Så du ved, hvordan i HTML dig kan give dine knapper klasser? 314 00:14:56,700 --> 00:14:59,146 Du kan give dine ankre href. 315 00:14:59,146 --> 00:15:00,770 Du kan give dine input en type, ikke? 316 00:15:00,770 --> 00:15:04,740 Du kan give mere skik egenskaber til alle dine elementer 317 00:15:04,740 --> 00:15:06,490 at gøre det mere interessant. 318 00:15:06,490 --> 00:15:09,030 Og vi faktisk kan gøre præcis de samme ting. 319 00:15:09,030 --> 00:15:17,500 >> Så lad os sige, vi ønsker, at vores app til at gå gøre enhver kort. 320 00:15:17,500 --> 00:15:19,630 Lige nu er vi bare gjort et hardcodede kort. 321 00:15:19,630 --> 00:15:22,530 Vi ved, der er kun én kort det kan gøre, så vi er 322 00:15:22,530 --> 00:15:25,960 vil forsøge at ændre dette nu så at vi bare kan give det nogle kort. 323 00:15:25,960 --> 00:15:27,410 Det vil udskrive kortet. 324 00:15:27,410 --> 00:15:29,380 >> Du burde forsøge at gøre din komponenter en meget generel formål. 325 00:15:29,380 --> 00:15:31,654 Så denne måde, jeg kunne e-mail dette til min ven og være ligesom, 326 00:15:31,654 --> 00:15:33,820 uanset flashkort du har, bare fodre den ind her, 327 00:15:33,820 --> 00:15:35,290 og det vil gøre det af sig selv. 328 00:15:35,290 --> 00:15:37,650 Du kan sætte andre ting i din egen app. 329 00:15:37,650 --> 00:15:40,600 >> Men først, lad os bryde denne op i to dele, 330 00:15:40,600 --> 00:15:44,500 men vi ønsker at adskille kortet trykning del fra den faktiske app del. 331 00:15:44,500 --> 00:15:46,660 Så det, vi kan gøre, er vi kan ændre dette fra App 332 00:15:46,660 --> 00:15:51,300 til CardView, bare en nyt navn til den app, 333 00:15:51,300 --> 00:15:54,450 og vi kan lave en ny komponent kaldet App, 334 00:15:54,450 --> 00:15:56,336 ikke at forveksle med den gamle App. 335 00:15:56,336 --> 00:16:00,730 Vi har fået de createClass, og ligesom i HTML, 336 00:16:00,730 --> 00:16:03,590 du kan indlejre React komponenter indersiden af ​​hinanden. 337 00:16:03,590 --> 00:16:16,430 >> Så i det gøre funktionen, funktion retur CardView, 338 00:16:16,430 --> 00:16:18,234 og det er præcis 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 at gøre netop det app, har div og parring inde i det, 341 00:16:22,590 --> 00:16:26,194 app gør CardView, og CardView gør div og stk. 342 00:16:26,194 --> 00:16:29,110 Så det er vores første eksempel på nesting elementer inde i hinanden. 343 00:16:29,110 --> 00:16:32,177 Giver det mening? 344 00:16:32,177 --> 00:16:33,760 Så igen, har vi en CardView element. 345 00:16:33,760 --> 00:16:37,250 Vi har app elementer at det er større end. 346 00:16:37,250 --> 00:16:40,990 >> OK, så vi ønsker, at vores CardView-- hvis du give en god CardView en bestemt kort, 347 00:16:40,990 --> 00:16:43,370 det vil printe ud for dig, ikke? 348 00:16:43,370 --> 00:16:48,050 Så først skal vi lave et kort, så lad os gøre en kort objekt. 349 00:16:48,050 --> 00:17:02,930 Så lad mit kort equal-- hvis du er alle bekendt, 350 00:17:02,930 --> 00:17:05,260 dette er blot notationen for øje objekt i JavaScript. 351 00:17:05,260 --> 00:17:09,280 Det er lidt ligesom en struct i C, så vi lavede en kort, 352 00:17:09,280 --> 00:17:15,920 og så nu kan vi passerer dette kort som en ejendom eller som en attribut i HTML 353 00:17:15,920 --> 00:17:17,290 terminologi til vores app. 354 00:17:17,290 --> 00:17:20,210 Så vi kan gøre dette, App kort lig myCard. 355 00:17:20,210 --> 00:17:23,200 >> Du ved, hvordan i input, du gør input type lig tekst eller knap 356 00:17:23,200 --> 00:17:25,240 klasse lig BTN til bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Samme idé, App-kort equals-- du har fået til at sætte seler her-- 358 00:17:29,500 --> 00:17:33,830 App-kort er lig myCard, så dette siger, at vi har dette kort objekt. 359 00:17:33,830 --> 00:17:39,149 Jeg har tænkt mig at give det som en ejendom til den app komponent. 360 00:17:39,149 --> 00:17:41,440 Og denne app komponent vil kunne få adgang til det og gøre 361 00:17:41,440 --> 00:17:43,580 interessante ting med det. 362 00:17:43,580 --> 00:17:47,650 >> Så vores app vil være givet et kort, så for nu, 363 00:17:47,650 --> 00:17:49,980 lad os få den app bare give kortet til CardView 364 00:17:49,980 --> 00:17:53,110 sig selv, fordi ligesom app er ikke kommer til at vide, hvad de skal gøre med det, 365 00:17:53,110 --> 00:17:54,850 så vi vil bare give det til CardView. 366 00:17:54,850 --> 00:18:00,050 Så vi vil passere det samme måde, kort lig, 367 00:18:00,050 --> 00:18:05,426 og så hver komponent kan få adgang til ting, der er blevet givet til det. 368 00:18:05,426 --> 00:18:07,800 De kan få adgang til egenskaberne der er blevet givet til det 369 00:18:07,800 --> 00:18:09,470 bruger denne syntaks, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Så hvad sker der her er har du myCard objekt. 372 00:18:14,920 --> 00:18:18,250 Du passerer det ind i app hjælp App-kort er lig myCard. 373 00:18:18,250 --> 00:18:21,420 Det objekt-kort er givet til din app. 374 00:18:21,420 --> 00:18:24,400 Den app kan få adgang til det som this.props.card. 375 00:18:24,400 --> 00:18:28,780 Det er lidt ligesom et billede ved, hvad det kilde er. 376 00:18:28,780 --> 00:18:31,972 >> Denne app ved, hvad det er kort er, og det kan gøre ting med det. 377 00:18:31,972 --> 00:18:32,930 Det kan gøre beregninger. 378 00:18:32,930 --> 00:18:35,290 Det kan træffe beslutninger baseret ud af det. 379 00:18:35,290 --> 00:18:39,950 >> For nu skulle jeg til at passere this.props.card på CardView. 380 00:18:39,950 --> 00:18:43,420 Mening indtil nu? 381 00:18:43,420 --> 00:18:45,210 Det vil give mere mening nu. 382 00:18:45,210 --> 00:18:46,990 >> OK, så nu er vi på CardView. 383 00:18:46,990 --> 00:18:51,719 Vores CardView betragtning af kortet, bør udskrive sit spørgsmål og svar. 384 00:18:51,719 --> 00:18:54,510 Lige nu er vi bare udskrives nogle hardcodede spørgsmål og svar. 385 00:18:54,510 --> 00:18:57,720 Vi er nødt til at regne out-- vi har brug for at spørge det kort, de gav os 386 00:18:57,720 --> 00:19:01,360 hvad er spørgsmål og svar, og derefter udskrive dette ud i skærmen. 387 00:19:01,360 --> 00:19:02,470 >> Så vi kan gøre dette her. 388 00:19:02,470 --> 00:19:06,135 I gør begin-- først gøre lig. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Så det, vi laver her er vi ved, at kortene er givet os til en ejendom, 391 00:19:13,050 --> 00:19:13,580 højre? 392 00:19:13,580 --> 00:19:15,930 Det har givet os som et input. 393 00:19:15,930 --> 00:19:19,440 Ligesom det er næsten som argumenter til en funktion. 394 00:19:19,440 --> 00:19:22,810 Kortet er et argument næsten til denne CardView. 395 00:19:22,810 --> 00:19:25,239 >> Vi vil udtrække det, og sætte den i den variable spørgsmål. 396 00:19:25,239 --> 00:19:27,280 Sørg for, at svaret gik til den variable svar. 397 00:19:27,280 --> 00:19:31,130 Beder, at kort at besvare. 398 00:19:31,130 --> 00:19:35,072 Og nu hvor vi har disse, i stedet for at udskrive denne tekst, 399 00:19:35,072 --> 00:19:37,030 vi kommer til at udskrive uanset hvad de gav os. 400 00:19:37,030 --> 00:19:43,580 >> Så dette stuff-- så vi skal hen at sætte ud Spørgsmål Svar. 401 00:19:43,580 --> 00:19:46,380 Lad os se, om det virker. 402 00:19:46,380 --> 00:19:52,800 Cool, så lad os gå gennem det endnu en gang bare for at være sikker. 403 00:19:52,800 --> 00:20:00,470 >> Så mit kort er kort objekt, og vi giver det kort til den app. 404 00:20:00,470 --> 00:20:04,790 Og den app kommer til at tage den kortet og give det til CardView. 405 00:20:04,790 --> 00:20:09,190 Og denne CardView siger, hvis du give mig nogen flashkort objekt, 406 00:20:09,190 --> 00:20:11,920 Jeg vil udskrive sit spørgsmål og sit svar, ikke? 407 00:20:11,920 --> 00:20:14,590 >> Så hvad jeg kunne gøre, er jeg kan Send denne kode, den første 408 00:20:14,590 --> 00:20:16,580 ligesom 10 linjer af min kode, til min ven. 409 00:20:16,580 --> 00:20:18,820 Han kunne integrere den i sin egen applikation. 410 00:20:18,820 --> 00:20:27,200 Og så længe han gjorde det samme, ligesom CardView kort lig det, 411 00:20:27,200 --> 00:20:30,580 så længe han skabte CardView og gav det de rigtige oplysninger, 412 00:20:30,580 --> 00:20:31,987 han kunne gøre sit eget kort. 413 00:20:31,987 --> 00:20:34,320 Og så på denne måde, det er en rigtig cool måde for dig at opbygge 414 00:20:34,320 --> 00:20:35,906 komponenter, der bruger hinanden, ikke? 415 00:20:35,906 --> 00:20:38,280 Dette kort, jeg kunne udgive denne CardView på internettet, 416 00:20:38,280 --> 00:20:39,790 og folk ville være i stand til at bruge det. 417 00:20:39,790 --> 00:20:45,070 Så dybest set, det er ligesom en af ​​de standardfunktioner i C-biblioteket. 418 00:20:45,070 --> 00:20:47,280 >> Det er en funktion, hvor nogen har skrevet det. 419 00:20:47,280 --> 00:20:48,419 Du giver en vis input. 420 00:20:48,419 --> 00:20:49,710 Det vil producere en vis effekt. 421 00:20:49,710 --> 00:20:50,890 Du er ligeglad, hvordan det fungerer internt. 422 00:20:50,890 --> 00:20:53,790 Så længe du giver den det rigtige input, vil det gøre det rigtige udgang. 423 00:20:53,790 --> 00:20:57,850 >> Og en komponent kan være tænkte på samme måde. 424 00:20:57,850 --> 00:21:00,280 Denne CardView er ligesom et bibliotek funktion. 425 00:21:00,280 --> 00:21:03,400 Hvis du giver det nogle kort som en egenskab, det vil 426 00:21:03,400 --> 00:21:05,095 udskrive indholdet af kortet. 427 00:21:05,095 --> 00:21:16,820 Ligesom hvis jeg ændre mit kort til i stedet være ligesom det, der er 5 plus 37, 428 00:21:16,820 --> 00:21:19,210 det vil ajourfører. 429 00:21:19,210 --> 00:21:21,955 Så bare ved at ændre input, det får en vis output. 430 00:21:21,955 --> 00:21:24,830 Så du kan tænke på komponenter næsten som funktioner på denne måde, som 431 00:21:24,830 --> 00:21:25,920 du kan sætte sammen. 432 00:21:25,920 --> 00:21:29,440 Du får input, som denne CardView som input, får du output. 433 00:21:29,440 --> 00:21:31,900 I dette tilfælde output er HTML. 434 00:21:31,900 --> 00:21:34,404 Mening indtil nu? 435 00:21:34,404 --> 00:21:36,890 Cool, så igen, ejendomme er hvordan du kan videregive oplysninger 436 00:21:36,890 --> 00:21:40,900 ind og ud af komponenter. 437 00:21:40,900 --> 00:21:42,740 >> OK, så lad os gøre det ting interaktivt. 438 00:21:42,740 --> 00:21:44,450 Lige nu er det slags kedelige. 439 00:21:44,450 --> 00:21:45,520 Hvad er [uhørligt]? 440 00:21:45,520 --> 00:21:48,210 Du kan printe nogle ud, men det er alt det kan gøre. 441 00:21:48,210 --> 00:21:51,550 >> Så lad os gå tilbage til gamle spørgsmål bare for nu. 442 00:21:51,550 --> 00:21:54,405 OK, så lige nu disse komponenter er kedelige, fordi alt, hvad de gør, 443 00:21:54,405 --> 00:21:55,030 de får input. 444 00:21:55,030 --> 00:21:56,100 De gør output, ikke? 445 00:21:56,100 --> 00:21:57,049 Det er lidt kedeligt. 446 00:21:57,049 --> 00:21:59,090 Vi ønsker at have vores komponenter at være i stand til at have 447 00:21:59,090 --> 00:22:02,150 en slags indre tilstand, ligesom huske noget. 448 00:22:02,150 --> 00:22:05,320 >> For en kort-, for eksempel, hvad slags stat 449 00:22:05,320 --> 00:22:07,550 kan du huske i flashkort? 450 00:22:07,550 --> 00:22:09,740 Hvad midlertidige status kan du huske 451 00:22:09,740 --> 00:22:12,491 for et flashkort i et flashkort app? 452 00:22:12,491 --> 00:22:13,990 PUBLIKUM: Uanset om det er blevet vendt? 453 00:22:13,990 --> 00:22:14,990 NEEL MEHTA: Yeah, højre. 454 00:22:14,990 --> 00:22:17,665 Så du måske ønsker at holde styr på er du står op eller er 455 00:22:17,665 --> 00:22:19,100 du står ned på kortet. 456 00:22:19,100 --> 00:22:23,420 På Facebook, for eksempel, ville du ønsker at huske, hvor i nyhedsfeed 457 00:22:23,420 --> 00:22:25,870 Er du eller kan lide hvem profil laver du lige nu. 458 00:22:25,870 --> 00:22:30,127 >> På Messenger, ligesom hvilken tekst, du skrive i input boksen, ikke? 459 00:22:30,127 --> 00:22:31,710 Hvis du opdaterer siden, det går væk. 460 00:22:31,710 --> 00:22:32,793 Men du behøver ikke virkelig pleje. 461 00:22:32,793 --> 00:22:33,770 Det er bare midlertidigt. 462 00:22:33,770 --> 00:22:34,548 Ja? 463 00:22:34,548 --> 00:22:36,152 >> PUBLIKUM: [uhørligt] 464 00:22:36,152 --> 00:22:38,360 NEEL MEHTA: Ligesom en flash kort, ligesom du kan se 465 00:22:38,360 --> 00:22:40,290 Spørgsmå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: Ligesom en to-sidet flashkort, ikke? 468 00:22:43,270 --> 00:22:46,370 Ja, så du ønsker at har denne idé om nu 469 00:22:46,370 --> 00:22:50,370 Jeg har egenskaber, som er ligesom input, men staten, som er midlertidig, øh, 470 00:22:50,370 --> 00:22:51,839 hvor du er på siden, ikke? 471 00:22:51,839 --> 00:22:54,380 Igen, jeg sagde i Facebook Messenger, jeg har ligesom hvilken person 472 00:22:54,380 --> 00:22:56,550 du ser Facebook eller som er profil, ikke? 473 00:22:56,550 --> 00:22:58,030 >> Dette er kun midlertidig. 474 00:22:58,030 --> 00:23:01,200 Det er vigtigt at vise brugeren hvad der foregår, men opdatere siden. 475 00:23:01,200 --> 00:23:02,250 Det gør ikke rigtig noget. 476 00:23:02,250 --> 00:23:04,530 Så det er midlertidig tilstand, så vi alle det tilstand. 477 00:23:04,530 --> 00:23:06,250 >> Så igen, der er stat og rekvisitter. 478 00:23:06,250 --> 00:23:09,084 Redskaber er input gives fra din datakilde. 479 00:23:09,084 --> 00:23:10,250 Stat er ligesom defaults. 480 00:23:10,250 --> 00:23:13,700 Det er ligesom ting, gør ting interaktivt. 481 00:23:13,700 --> 00:23:17,720 >> Så i vores CardView-- lad os få vores CardView-- så det var rart. 482 00:23:17,720 --> 00:23:21,420 Hvad vi vil gøre her, vi kommer at røre CardView og kun CardView. 483 00:23:21,420 --> 00:23:25,105 Og så min ven, som fik det, de ville ikke mærke nogen forskel. 484 00:23:25,105 --> 00:23:27,230 De ville ikke have til at ændre nogen af ​​deres egen kode, 485 00:23:27,230 --> 00:23:29,410 men de ville se deres CardView fik tunet op. 486 00:23:29,410 --> 00:23:31,270 Det er en dejlig del om komponenter. 487 00:23:31,270 --> 00:23:35,290 >> OK, så i vores CardView, lad os prøve og holde styr på, om vi udfase op 488 00:23:35,290 --> 00:23:36,560 eller nedad. 489 00:23:36,560 --> 00:23:40,480 I React vi gøre dette ved først angivelse den oprindelige tilstand. 490 00:23:40,480 --> 00:23:42,070 Hvor kommer kortet begynde? 491 00:23:42,070 --> 00:23:48,480 >> Så være en funktion kaldet getInitialState fungere, og vi vender tilbage et objekt. 492 00:23:48,480 --> 00:23:53,310 Dette objekt indeholder nogle tilstand, og en stat er blot en nøgle-værdi par. 493 00:23:53,310 --> 00:23:56,950 Ligesom i instruere, har du en nøgle og en værdi, har du ligesom navn er en streng. 494 00:23:56,950 --> 00:24:01,410 >> I dette tilfælde, lad os sige front er sandt. 495 00:24:01,410 --> 00:24:03,760 Det siger, at vi har en stat. 496 00:24:03,760 --> 00:24:06,570 En komponent af staten er en attribut kaldet front. 497 00:24:06,570 --> 00:24:09,649 [Uhørligt], så som standard, vi er i den forreste del af kortet, 498 00:24:09,649 --> 00:24:11,440 og vi kan ændre dette som vi vende kortet. 499 00:24:11,440 --> 00:24:13,380 Give mening? 500 00:24:13,380 --> 00:24:18,190 >> OK, så i gengive, lige nu, er vi viser spørgsmålet og svaret. 501 00:24:18,190 --> 00:24:20,860 Nu, hvad vi skal gøre er at vise spørgsmålet 502 00:24:20,860 --> 00:24:24,370 hvis vi er på forsiden af ​​kortet, så svaret er for bagsiden af ​​kortet. 503 00:24:24,370 --> 00:24:26,850 Det er derfor du alle gøre kortet interaktive. 504 00:24:26,850 --> 00:24:28,100 Så lad os prøve og til dette her. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Nå, først bare lave en variabel. 507 00:24:33,620 --> 00:24:37,790 Vi kan spørge nu this.state.front. 508 00:24:37,790 --> 00:24:42,010 Vi adgang angive samme, vi adgang rekvisitter, så this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Hvis vi er foran, så tekst 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 af kort, vi vil forsøge at få fat 512 00:24:51,360 --> 00:24:52,485 spørgsmå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å bagsiden af kortet, hvad gø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: Jep, så tekst lig 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 bemærker, vi ved hjælp af staten til at træffe en beslutning 520 00:25:10,930 --> 00:25:14,420 fordi nu komponenten vil se anderledes 521 00:25:14,420 --> 00:25:16,710 baseret ud hvordan disse interagerer med det. 522 00:25:16,710 --> 00:25:20,355 Så i stedet for at udskrive det, vi bare udskrive teksten. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, så nu, som du ser, Vi ser kun spørgsmålet. 525 00:25:28,650 --> 00:25:37,720 Og hvis jeg ændre tilstanden her manuelt til forsiden er falsk får vi 42 tilbage. 526 00:25:37,720 --> 00:25:39,720 >> Så igen, denne komponent har sin egen stat. 527 00:25:39,720 --> 00:25:43,440 Som en knap ved, om det er blevet presset eller ej, 528 00:25:43,440 --> 00:25:46,080 denne ting ved, hvad der er på forsiden eller på bagsiden. 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 derefter, hvis det er på forsiden, vi vil udskrive spørgsmålet. 531 00:25:50,840 --> 00:25:53,106 Hvis det er på ryggen, vi får udskrive svaret. 532 00:25:53,106 --> 00:25:54,980 Så igen, de oplysninger, givet, er det samme. 533 00:25:54,980 --> 00:25:59,090 Det ser bare anderledes baseret på, hvordan du programmere den. 534 00:25:59,090 --> 00:26:02,670 Så for eksempel, Facebook Messenger, selv hvis du får den samme datakilde, 535 00:26:02,670 --> 00:26:05,170 det kan se anderledes fordi staten er anderledes. 536 00:26:05,170 --> 00:26:08,421 Du kigger på en anden person budskab. 537 00:26:08,421 --> 00:26:10,930 >> OK, så det er alt godt og godt, men hvad nu er faktisk 538 00:26:10,930 --> 00:26:15,940 gør os i stand til at ændre sig, uanset om vores kort er forsiden eller bagsiden. 539 00:26:15,940 --> 00:26:19,010 Vi kan gøre dette ved at tilføje en flip knap, en knap til kort, 540 00:26:19,010 --> 00:26:22,950 vil vende kortet, hvis det er [uhørligt]. 541 00:26:22,950 --> 00:26:31,770 Så lad os tilføje en knap her, det knappen, og denne knap sige flip. 542 00:26:31,770 --> 00:26:35,650 >> Og så lige nu, det ikke gør noget. 543 00:26:35,650 --> 00:26:37,075 Det ser bare dejligt. 544 00:26:37,075 --> 00:26:43,650 Det, vi kan gøre, er at vi kan tilføje et klik handleren, onClick lig 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 dybest set, onClick er en funktion, 547 00:26:47,120 --> 00:26:48,675 bliver kaldt, når brugeren klikker på den. 548 00:26:48,675 --> 00:26:52,330 >> Så på knappen vil vide når det er blevet klikket på. 549 00:26:52,330 --> 00:26:54,750 Gik det er blevet klikket, det vil vende kortet. 550 00:26:54,750 --> 00:26:58,382 Det er lidt ligesom din pizza levering fyr. 551 00:26:58,382 --> 00:27:01,590 Du er ligesom, okay, når nogen kalder mig, jeg vil levere pizza, ikke? 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 begivenhed. 554 00:27:04,530 --> 00:27:07,657 Du får kaldt, og når begivenhed sker, du gør noget. 555 00:27:07,657 --> 00:27:08,240 Du får pizza. 556 00:27:08,240 --> 00:27:11,480 I dette tilfælde, når du er klikket, du vender kortet. 557 00:27:11,480 --> 00:27:14,560 >> Og så er vi nødt til at definere et funktion, vil vende kortet, 558 00:27:14,560 --> 00:27:17,930 så vi vil skrive, at retten her, flip-funktion. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 Og så hvad tror du flip vil gøre? 561 00:27:23,680 --> 00:27:27,180 Igen bliver kaldt, når Vi klikker flip-knappen. 562 00:27:27,180 --> 00:27:29,406 Hvad skal funktionen flip gøre? 563 00:27:29,406 --> 00:27:34,136 >> PUBLIKUM: Skift this.state.front fra sand til falsk, falsk til sand. 564 00:27:34,136 --> 00:27:38,420 >> NEEL MEHTA: Jep, så træffe this.front is-- forsiden tilstand er. 565 00:27:38,420 --> 00:27:40,930 Tag den forreste tilstand, hvis det er sandt, gør det falske. 566 00:27:40,930 --> 00:27:42,530 Hvis det er falsk, gør det rigtigt, ikke? 567 00:27:42,530 --> 00:27:45,330 Så lad os prøve det. 568 00:27:45,330 --> 00:27:48,240 >> Du kan ikke ændre tilstand bare ved at gøre this.state. 569 00:27:48,240 --> 00:27:50,380 Du kan ikke gøre dette. 570 00:27:50,380 --> 00:27:52,030 Du kan ikke gøre det. 571 00:27:52,030 --> 00:27:55,810 Du er nødt til at bruge en funktion kaldet this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Så du kan sige this.setState forreste kolon denne hvor igen, udråbstegn 573 00:28:03,230 --> 00:28:04,330 punkt betyder det modsatte. 574 00:28:04,330 --> 00:28:07,420 Jeg gætte, hvis dette. state.front er sandt, vil det dreje falsk. 575 00:28:07,420 --> 00:28:09,170 Så vi vil sætte staten fra sand til falsk. 576 00:28:09,170 --> 00:28:11,430 Hvis det er falsk, vi får sæt den falsk til sand. 577 00:28:11,430 --> 00:28:17,210 >> Bare mærke til, at vi sætter og få lidt forskelligt, og så lad os 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 nu skifte til bag tilstand. 580 00:28:21,810 --> 00:28:24,990 >> Og så her er hvor du kan se en lille smule af magien i at reagere. 581 00:28:24,990 --> 00:28:28,420 Ligesom vi fortalte det aldrig det at re-render. 582 00:28:28,420 --> 00:28:30,910 Vi har aldrig fortalt det gentegne noget. 583 00:28:30,910 --> 00:28:32,630 Hvis du gør dette uden React, ville du 584 00:28:32,630 --> 00:28:34,588 har at-- lide, når det flip der klikkes på knappen, 585 00:28:34,588 --> 00:28:37,290 du er nødt til at fortælle det til manuelt re-gengive, ikke? 586 00:28:37,290 --> 00:28:43,050 >> Reagere er virkelig cool i, at hvis du give det en bestemt tilstand og egenskaber, 587 00:28:43,050 --> 00:28:45,760 Det vil altid gengive præcis de samme ting. 588 00:28:45,760 --> 00:28:48,690 Og så når vi nogensinde vi ændrer staten og ejendommene, 589 00:28:48,690 --> 00:28:50,819 reagere netop re-gør det hele. 590 00:28:50,819 --> 00:28:52,860 Den ved, at der er en en-til-en overensstemmelse 591 00:28:52,860 --> 00:28:57,270 mellem stat og parameter og HTML. 592 00:28:57,270 --> 00:29:00,110 Så når en af ​​disse ændringer ved gennem et sæt tilstand, 593 00:29:00,110 --> 00:29:03,750 det vil ændre, hvordan løn er re-gengives. 594 00:29:03,750 --> 00:29:06,650 Og så dybest set React er ligesom venter på dig at ændre. 595 00:29:06,650 --> 00:29:09,870 >> Når det ændrer noget det vil igen gøre hele siden. 596 00:29:09,870 --> 00:29:12,480 Og hvis det lyder ineffektiv, er det fordi det ville være, 597 00:29:12,480 --> 00:29:15,050 men reagerer anvender en ting kaldes en skygge DOM. 598 00:29:15,050 --> 00:29:19,950 I stedet for at trække den side direkte, det holder den virtuelle HTML træ i hukommelsen. 599 00:29:19,950 --> 00:29:23,620 >> Du ved, HTML er som et træ, som en hierarkisk datastruktur. 600 00:29:23,620 --> 00:29:28,990 Det holder en falsk træ i hukommelsen, og når du opdaterer siden, 601 00:29:28,990 --> 00:29:31,940 det vil tegne en anden falsk træet, og det vil beregne 602 00:29:31,940 --> 00:29:35,120 hvad ændre det er nødt til at side at gøre de to træer lige. 603 00:29:35,120 --> 00:29:38,540 Så dybest set er det næsten re-gør en masse. 604 00:29:38,540 --> 00:29:41,540 Og så er det kun godt lide ændrer side i lidt tweaks efter behov, 605 00:29:41,540 --> 00:29:44,240 så det er meget, meget, meget effektivt. 606 00:29:44,240 --> 00:29:46,970 >> Så dybest set React vil når du ændrer noget, 607 00:29:46,970 --> 00:29:49,010 det vil igen gøre siden virtuelt. 608 00:29:49,010 --> 00:29:52,830 Det vil regne ud, hvad skal jeg ændre for at gøre den virkelige side afspejler 609 00:29:52,830 --> 00:29:55,602 den virtuelle side, og det vil gø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 af ​​de største funktioner i React. 612 00:29:59,350 --> 00:30:00,880 >> Giver det mening? 613 00:30:00,880 --> 00:30:01,540 Nogen spørgsmål? 614 00:30:01,540 --> 00:30:02,040 Ja? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> PUBLIKUM: Hvordan sammenlign stadig MVC 617 00:30:08,969 --> 00:30:10,760 at vi talte om før lignende ressourcer. 618 00:30:10,760 --> 00:30:13,527 >> NEEL MEHTA: Ja, det spørgsmål er, hvordan fungerer det sammenlignet med MVC? 619 00:30:13,527 --> 00:30:14,610 Du spurgte om ressourcer. 620 00:30:14,610 --> 00:30:16,445 Nå, lad os tale om, hvordan det fungerer. 621 00:30:16,445 --> 00:30:18,190 >> I MVC, ville du opdatere modellen. 622 00:30:18,190 --> 00:30:20,560 I dette tilfælde ville vi have en kort model. 623 00:30:20,560 --> 00:30:24,540 Udsigten ville have den flip knap, og kontrollen 624 00:30:24,540 --> 00:30:26,310 ville have klappen funktion. 625 00:30:26,310 --> 00:30:28,450 Så udsigten ville fortælle controller til at vende flip. 626 00:30:28,450 --> 00:30:30,370 Flip ville fortælle model til at ændre, ikke? 627 00:30:30,370 --> 00:30:33,915 >> Og så når du gør en MVC, du lyt efter modellen for at ændre, 628 00:30:33,915 --> 00:30:37,150 og du re-gøre visningen i overensstemmelse hermed. 629 00:30:37,150 --> 00:30:39,210 Eller du bare nødt til at lide har styringen. 630 00:30:39,210 --> 00:30:42,418 Vent på, at modellen til at ændre, og derefter vælge og vrage en del af ligesom en ting 631 00:30:42,418 --> 00:30:44,032 at skifte. 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 du skal gerne huske, hvad ændringen i hvert enkelt sted, 634 00:30:48,510 --> 00:30:50,290 så det er lidt irriterende. 635 00:30:50,290 --> 00:30:53,670 Og så React er rart fordi det har en skygge Dom. 636 00:30:53,670 --> 00:30:56,040 Det har råd til lige omskrive hele ting. 637 00:30:56,040 --> 00:30:58,680 Du behøver ikke at selektivt ligesom gæt hvad at opdatere. 638 00:30:58,680 --> 00:31:02,186 >> På Facebook, hvis du kan lide får en ny besked, i MVC, 639 00:31:02,186 --> 00:31:04,060 du er nødt til at huske, OK, ændre de ting 640 00:31:04,060 --> 00:31:06,260 på toppen af side, ikonet meddelelse. 641 00:31:06,260 --> 00:31:08,290 Også pop et nyt vindue nederst. 642 00:31:08,290 --> 00:31:10,070 Også lave en ny ting i dette vindue. 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å ud samtidig. 645 00:31:13,150 --> 00:31:15,320 Og så hvis du ikke gør har en Shadow Dom, ville du 646 00:31:15,320 --> 00:31:18,740 nødt til at gøre det manuelt, fordi du kan ikke slippe af med hele siden. 647 00:31:18,740 --> 00:31:21,430 Du har ikke råd til, så du har at ændre hver ting manuelt, 648 00:31:21,430 --> 00:31:23,990 som er virkelig irriterende i MVC. 649 00:31:23,990 --> 00:31:27,640 >> Så for at være sparsommelige, de selektivt 650 00:31:27,640 --> 00:31:30,750 opdatere siden, som er effektiv, men også irriterende. 651 00:31:30,750 --> 00:31:34,002 I React, på grund af Shadow Dom, du få begge ting gratis. 652 00:31:34,002 --> 00:31:35,710 Det er effektiv, fordi af Shadow Dom. 653 00:31:35,710 --> 00:31:37,210 Flaskehalsen opdaterer siden. 654 00:31:37,210 --> 00:31:40,292 Det er ikke at gøre træet manipulation. 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å brugervenligheden, fordi hvis du bare omskrive hele siden, 657 00:31:45,420 --> 00:31:48,970 men du bare vide, okay, de ting vil være på siden eller andet sted. 658 00:31:48,970 --> 00:31:51,180 Det kan være et andet sted, men det kommer til at være på den side, ikke? 659 00:31:51,180 --> 00:31:52,860 Så du bare re-afsmeltet hele ting næsten, 660 00:31:52,860 --> 00:31:55,540 og du kan gøre et par ændringer af selve siden. 661 00:31:55,540 --> 00:31:57,850 >> Så igen, i MVC du skulle vælge 662 00:31:57,850 --> 00:32:01,840 mellem brugervenlighed og effektivitet, og reagere, får du begge dele. 663 00:32:01,840 --> 00:32:04,020 Så det er bedre. 664 00:32:04,020 --> 00:32:05,220 Give mening? 665 00:32:05,220 --> 00:32:06,676 Solid. 666 00:32:06,676 --> 00:32:12,080 >> OK, så lad os se lad os tale en lille smule om trin 4, 667 00:32:12,080 --> 00:32:14,740 hvordan vi kan integrere komponenter. 668 00:32:14,740 --> 00:32:16,260 Så vi har det lige nu. 669 00:32:16,260 --> 00:32:19,420 Vi har vores cool lille knap. 670 00:32:19,420 --> 00:32:23,157 Vi kan vende det tilbage og frem, og det er alt den gør. 671 00:32:23,157 --> 00:32:24,990 Lad os sige, at vi ønsker at har en anden komponent. 672 00:32:24,990 --> 00:32:28,730 Lad os sige vores flashkort app bør indeholde en liste over alle kortene 673 00:32:28,730 --> 00:32:31,520 at du har, så det betyder vi skal have en anden komponent. 674 00:32:31,520 --> 00:32:32,970 Tja, måske kalde det en listevisning. 675 00:32:32,970 --> 00:32:36,200 Lad os lave en liste opfattelse sameksisterer med CardView, 676 00:32:36,200 --> 00:32:39,680 og denne liste visning og CardView vil gerne arbejde sammen. 677 00:32:39,680 --> 00:32:43,190 Og du kan kombinere dem at gøre vores app til dig. 678 00:32:43,190 --> 00:32:45,160 >> Så først, lad os lave en par flere kort rigtigt. 679 00:32:45,160 --> 00:32:46,370 Lad os sige, hvilke kort? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 Og bare så jeg ikke behøver at kede dig med at skrive det i, 682 00:32:51,910 --> 00:32:53,410 Jeg skal bare kopiere det fra her. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 Og så jeg har tænkt mig at ikke giver det kun et kort. 685 00:33:03,580 --> 00:33:06,910 Jeg har tænkt mig at give det en vifte af kort. 686 00:33:06,910 --> 00:33:10,240 Så første apps kommer til at bryde for nu. 687 00:33:10,240 --> 00:33:14,717 Okay, så vi kommer til at gøre dette kunne håndtere flere kort. 688 00:33:14,717 --> 00:33:17,800 Så først, vi vil give det, ikke kun et kort, men en række af kort, 689 00:33:17,800 --> 00:33:18,700 som en liste over kort. 690 00:33:18,700 --> 00:33:20,980 Og i dette tilfælde har vi tre af dem. 691 00:33:20,980 --> 00:33:27,280 >> Okay, så så app er kommer til at få en liste kort, 692 00:33:27,280 --> 00:33:29,870 og det kommer til at afgøre, hvilke en til at vise til CardView. 693 00:33:29,870 --> 00:33:33,740 Den CardView kan kun gengive et kort, men den app 694 00:33:33,740 --> 00:33:37,610 får en liste over alle de kort, ikke? 695 00:33:37,610 --> 00:33:40,820 >> Så når du regne ud, en kort til at give til CardView, 696 00:33:40,820 --> 00:33:44,660 hvordan ville du gætte, du måske være i stand til at træffe en beslutning om, hvilket kort 697 00:33:44,660 --> 00:33:47,064 at vise? 698 00:33:47,064 --> 00:33:49,980 For at give dig et hint, det er midlertidigt Du vil blive ser en bestemt kort. 699 00:33:49,980 --> 00:33:53,260 Hvis du opdaterer siden, vil du bare gå tilbage til det første kort. 700 00:33:53,260 --> 00:33:55,464 Det er OK, fordi det er midlertidigt. 701 00:33:55,464 --> 00:33:56,630 Hvad teknik kan vi bruge? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> PUBLIKUM: Du kan gøre en variabel så ligesom du havde foran. 704 00:34:08,760 --> 00:34:11,989 Er det sandt, kunne du har nuværende kort er lig med 1? 705 00:34:11,989 --> 00:34:14,150 >> NEEL MEHTA: Ja, så vi ønsker at have staten, ikke? 706 00:34:14,150 --> 00:34:16,080 Du ville bruge stat i komponent til at regne ud 707 00:34:16,080 --> 00:34:17,288 hvilket kort ønsker vi at få. 708 00:34:17,288 --> 00:34:19,290 Ligesom vi har en liste over alle kortene, vi får 709 00:34:19,290 --> 00:34:21,630 bruge staten til at finde ud af en af ​​det første kort, 710 00:34:21,630 --> 00:34:23,710 andet kort, tredje kort, og så videre. 711 00:34:23,710 --> 00:34:28,760 >> Så en app, så en app vil få en har getInitialState funktion, 712 00:34:28,760 --> 00:34:35,020 getInitialState funktion tilbage. 713 00:34:35,020 --> 00:34:39,929 Og vi vil bare sige activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Så nu vores app har sin egen stat. 715 00:34:42,889 --> 00:34:47,179 >> Og så nu gør, at finde ud af et kort, lad os bare gå til array 716 00:34:47,179 --> 00:34:49,969 og få fat i de ting på det indeks. 717 00:34:49,969 --> 00:34:53,580 Vælg kort lige 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 rent faktisk arbejder sammen. 720 00:35:00,162 --> 00:35:08,990 Så nu, at vi har vores activeCard, vi vil kalde det activeCard, 721 00:35:08,990 --> 00:35:10,470 og lad os se om det virker. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [Uhørligt] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Åh, det var en tekst fejl. 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, jep, så nu var vi tilbage til hvor vi var før, ikke? 729 00:35:54,840 --> 00:35:57,100 Samme gamle program, undtagen nu vi kan støtte 730 00:35:57,100 --> 00:35:59,390 en liste over kort, ikke bare et kort. 731 00:35:59,390 --> 00:36:04,130 Og nu, igen, hvis vi ændrer activeIndex, kan vi gå fra 0 til 1, 732 00:36:04,130 --> 00:36:07,330 og nu, at andet kort, og derefter gik vi til 0. 733 00:36:07,330 --> 00:36:10,390 Så her er en ny tunet version af vores. 734 00:36:10,390 --> 00:36:16,000 >> OK, så lad os nu få en liste opfattelse viser alle kortene i dit program, 735 00:36:16,000 --> 00:36:19,980 så vi vil lave en ny komponent kaldet listevisning. 736 00:36:19,980 --> 00:36:22,155 Lad listevisning lig react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Så vi ønsker at gøre en uordnet listen med et element på listen for hvert kort. 739 00:36:38,800 --> 00:36:41,490 Og så vi har en masse kort. 740 00:36:41,490 --> 00:36:44,990 Vi vil have en listeelement for hvert kort, ikke? 741 00:36:44,990 --> 00:36:47,490 Vi kunne gøre en for-løkke eller noget til at lave en ny liste element. 742 00:36:47,490 --> 00:36:50,522 Men den måde du gør det i Reager, så brug en ting kaldet kort. 743 00:36:50,522 --> 00:36:57,150 Kort er et værktøj eller en funktion, du bruger at for hvert element, løber en funktion, 744 00:36:57,150 --> 00:36:59,510 tager returværdi, og giver dig det tilbage. 745 00:36:59,510 --> 00:37:06,310 >> Så som et eksempel, har vi array 1, 2, 3.map function-- og dette 746 00:37:06,310 --> 00:37:12,120 er forkortelse for et function-- x pil x gange x. 747 00:37:12,120 --> 00:37:16,110 Det siger, for hvert nummer i 1, 2, 3, tage det. 748 00:37:16,110 --> 00:37:17,800 Firkantet det, og give det tilbage. 749 00:37:17,800 --> 00:37:22,090 Så hvad tror du 1, 2, 3.map x går til x gange 750 00:37:22,090 --> 00:37:25,480 x giver dig tilbage givet at denne funktion 751 00:37:25,480 --> 00:37:27,680 køre på hvert enkelt element i den opstilling. 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: Jep, 1, 4, 9 fordi du gør 1 gange 1. 755 00:37:35,709 --> 00:37:36,500 Det giver dig en. 756 00:37:36,500 --> 00:37:37,690 Det er det første element. 757 00:37:37,690 --> 00:37:38,530 >> 2 gange 2 er 4. 758 00:37:38,530 --> 00:37:39,570 Det er et andet element. 759 00:37:39,570 --> 00:37:40,310 3 gange 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 Give mening? 762 00:37:42,640 --> 00:37:45,015 Så kort har en teknik, du brug i funktionelle programmører, 763 00:37:45,015 --> 00:37:48,090 den nye stil programmering til at gøre noget 764 00:37:48,090 --> 00:37:50,500 til hvert element på din liste. 765 00:37:50,500 --> 00:37:51,970 Og så dette lyder bekendt. 766 00:37:51,970 --> 00:37:53,370 Vi har en liste over kort. 767 00:37:53,370 --> 00:37:56,860 Vi ønsker at få et listeelement for hver en, så vi vil bare bruge kortet her. 768 00:37:56,860 --> 00:38:00,250 Vi vil sige, lad liste ligemænd this.props, kort, kort. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> Og så givet et kort, vi er kommer til at generere en liste element 771 00:38:15,070 --> 00:38:17,580 med kortet indhold side af det. 772 00:38:17,580 --> 00:38:20,660 Lad os bare sige, at vi ønsker at give ud kortene spørgsmålstegn så card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Så denne liste indeholder en vifte af LI 's eller listeelementer 775 00:38:30,649 --> 00:38:32,440 hvor der er en liste post for hvert kort, 776 00:38:32,440 --> 00:38:35,150 og som indeholder den kort spørgsmål. 777 00:38:35,150 --> 00:38:37,640 Give mening? 778 00:38:37,640 --> 00:38:39,450 >> Cool, så lad os nu faktisk printe det ud. 779 00:38:39,450 --> 00:38:46,521 Så vi vil vende tilbage en ul. 780 00:38:46,521 --> 00:38:49,020 Indeni, uordnet liste, vi vil bare holde hele listen 781 00:38:49,020 --> 00:38:49,890 at de gav os. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Afkøle. 784 00:38:53,350 --> 00:38:56,060 >> Okay, så nu dette listevisningen virker lige finde. 785 00:38:56,060 --> 00:38:59,842 Eventuelle spørgsmål om listevisningen? 786 00:38:59,842 --> 00:39:01,270 Du har en masse kort. 787 00:39:01,270 --> 00:39:02,800 Du laver et element på listen for hvert kort. 788 00:39:02,800 --> 00:39:05,466 Og du lægger dem inde i en uordnet liste, og du give det tilbage. 789 00:39:05,466 --> 00:39:09,410 Så lad os nu handle så vi indlejre denne indersiden af ​​vores app, 790 00:39:09,410 --> 00:39:14,310 så vi kan gøre dette, listevisning. 791 00:39:14,310 --> 00:39:17,070 Hvad argument skal vi passere til liste visning? 792 00:39:17,070 --> 00:39:18,320 Hvilke egenskaber skal vi give det? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Husk, hvis du giver det en flok af kort, 795 00:39:26,860 --> 00:39:29,590 det vil gøre listen se for disse kort. 796 00:39:29,590 --> 00:39:32,267 Så hvad ville vi passerer 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 lig this.props.cards, right? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 Og så det eneste problem er, at du kun kan 801 00:39:44,370 --> 00:39:48,600 viste en øverste niveau element i gøre, så du bliver nødt til at pakke det i en div. 802 00:39:48,600 --> 00:39:49,100 Det er underligt. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Så lad os se, om det. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Betyder det fungere? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Jep, der du går. 809 00:40:31,030 --> 00:40:33,700 Så nu har vi en liste kort i bunden, 810 00:40:33,700 --> 00:40:36,180 og så har vi vores CardView sig på toppen, 811 00:40:36,180 --> 00:40:40,486 og der vil skifte mellem de to sider af kortet. 812 00:40:40,486 --> 00:40:42,610 Nu gør det mening, hvordan jeg gjorde det? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Ja, så igen, vi har to komponenter. 815 00:40:46,790 --> 00:40:49,666 Den første komponent udskrifter ud hver kort i listen. 816 00:40:49,666 --> 00:40:50,540 Det er listevisningen. 817 00:40:50,540 --> 00:40:54,770 Og den anden komponent udskriver netop det kort. 818 00:40:54,770 --> 00:40:58,840 Hvis du giver det en vis kort, det vil udskrive oplysninger om dette kort 819 00:40:58,840 --> 00:41:01,870 og lade dig bladre frem og tilbage. 820 00:41:01,870 --> 00:41:05,850 >> Så hvis vi vil, kan vi forsøge og tale om at tilføje nogle nye funktioner til dette. 821 00:41:05,850 --> 00:41:09,482 Ellers kan vi tale lidt mere om af hastigheden af ​​reaktoren, 822 00:41:09,482 --> 00:41:11,190 eller vi kan besvare spørgsmål, du måtte have 823 00:41:11,190 --> 00:41:15,050 fordi disse er alle de centrale dele af reagerer, som jeg ønsker at tale 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 besvare spørgsmål. 826 00:41:17,590 --> 00:41:18,560 Uanset hvad du ønsker. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> PUBLIKUM: Kan du bruge JSX i normal JavaScript? 829 00:41:24,205 --> 00:41:27,150 Eller er det noget, som fulgte med [uhørligt]? 830 00:41:27,150 --> 00:41:30,760 >> NEEL MEHTA: Spørgsmålet er dåse du bruger 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åde at det tager din JavaScript, der har HTML inde i den, 833 00:41:41,070 --> 00:41:44,215 og det samler ind JavaScript, ikke har HTML inde i den. 834 00:41:44,215 --> 00:41:47,880 Så opdager at-- så mærke til her. 835 00:41:47,880 --> 00:41:50,820 Dette ser ud som du har ligesom div og du har kram inde i den. 836 00:41:50,820 --> 00:41:54,970 >> Det opgør til JavaScript, ligesom genererer det samme. 837 00:41:54,970 --> 00:41:59,590 Jeg gætte, hvad jeg siger, er, at JSX er bare en syntaktisk, ligesom det er 838 00:41:59,590 --> 00:42:03,530 en præprocessor for JavaScript meget som PHP er en præprocessor til HTML. 839 00:42:03,530 --> 00:42:05,490 JSC er en præprocessor for JavaScript, der lader 840 00:42:05,490 --> 00:42:12,970 du sætte HTML indersiden af ​​din JavaScript. 841 00:42:12,970 --> 00:42:16,425 Og så hvis du har den rigtige transformer hvilket er en ting kaldet [uhørligt], 842 00:42:16,425 --> 00:42:17,300 som vil transformere. 843 00:42:17,300 --> 00:42:19,360 Den rigtige præprocessor, det vil lade dig gøre det. 844 00:42:19,360 --> 00:42:20,235 >> PUBLIKUM: [uhørligt] 845 00:42:20,235 --> 00:42:23,026 NEEL MEHTA: Normalt behøver du ikke at sætte HTML indersiden af ​​JavaScript 846 00:42:23,026 --> 00:42:24,110 medmindre dine gør reagere. 847 00:42:24,110 --> 00:42:27,146 Men du kan gøre det alligevel. 848 00:42:27,146 --> 00:42:27,645 Yep? 849 00:42:27,645 --> 00:42:29,353 >> PUBLIKUM: Jeg tror, ​​du havde beskrevet React 850 00:42:29,353 --> 00:42:31,970 som en funktionel programmering sprog. 851 00:42:31,970 --> 00:42:35,646 Vi har været at lære C i CS50. 852 00:42:35,646 --> 00:42:38,032 Er C også et funktionelt sprog? 853 00:42:38,032 --> 00:42:39,990 NEEL MEHTA: Så spørgsmålet handler om funktionel 854 00:42:39,990 --> 00:42:43,010 versus en anden ting kaldet bydende nødvendigt eller proceduremæssig programmering. 855 00:42:43,010 --> 00:42:44,820 Der er to slags programmer populære. 856 00:42:44,820 --> 00:42:48,550 Man hedder proceduremæssige, som handler om ligesom gør kommandoer, 857 00:42:48,550 --> 00:42:51,510 og en er funktionel, som er alle om at have funktioner, og som har 858 00:42:51,510 --> 00:42:52,930 input og output af dem. 859 00:42:52,930 --> 00:42:55,930 React er en funktionel paradigme. 860 00:42:55,930 --> 00:42:58,010 C er en meget processuel paradigme. 861 00:42:58,010 --> 00:43:02,360 >> Og som et eksempel, C f.eks du ikke gør dette deklarativ måde 862 00:43:02,360 --> 00:43:04,390 for at gøre programmet, ikke? 863 00:43:04,390 --> 00:43:06,826 Du er nødt til at sige, udskrive dette. 864 00:43:06,826 --> 00:43:07,950 Ændre denne datastruktur. 865 00:43:07,950 --> 00:43:08,530 Udskriv 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, er der ikke at mange kommandoer. 868 00:43:12,640 --> 00:43:15,145 Det handler om at have komponenter, du sat sammen. 869 00:43:15,145 --> 00:43:16,300 De er ligesom funktioner. 870 00:43:16,300 --> 00:43:26,360 Du har ligesom en funktion kaldet CardView, 871 00:43:26,360 --> 00:43:28,680 som er en funktion der har input, output, 872 00:43:28,680 --> 00:43:30,660 og så React er alt om denne filosofi 873 00:43:30,660 --> 00:43:32,700 os af having-- du har data. 874 00:43:32,700 --> 00:43:34,910 Du passerer det gennem dette algoritme, og det vil 875 00:43:34,910 --> 00:43:36,800 output HTML, som du netop udskrevet siden, 876 00:43:36,800 --> 00:43:39,180 og så du er nødt til at bygge det stykke for stykke. 877 00:43:39,180 --> 00:43:42,800 >> Så for at tegne en metafor for, hvad Jeg sagde før, du ved, hvordan 878 00:43:42,800 --> 00:43:47,050 på Facebook, hvis du får en besked, og du vælger hvilke dele at opdatere, 879 00:43:47,050 --> 00:43:47,882 det er proceduremæssig. 880 00:43:47,882 --> 00:43:48,840 Det er bydende nødvendigt, ikke? 881 00:43:48,840 --> 00:43:49,806 OK, jeg fik en besked. 882 00:43:49,806 --> 00:43:50,930 Lad os ændre hensyn der. 883 00:43:50,930 --> 00:43:52,110 >> Lad os pop et vindue her. 884 00:43:52,110 --> 00:43:52,780 Lad os ændre hensyn der. 885 00:43:52,780 --> 00:43:53,700 Lad os trække dette her. 886 00:43:53,700 --> 00:43:55,220 Det er en processuel tilgang. 887 00:43:55,220 --> 00:44:00,240 >> Det er, hvad ting som Kantet, Boost, Backbone, andre rammer bruger. 888 00:44:00,240 --> 00:44:01,200 React er funktionel. 889 00:44:01,200 --> 00:44:03,324 Det er en meget anderledes måde at tænke over tingene. 890 00:44:03,324 --> 00:44:07,950 Det tager denne idé om lad os få funktioner eller algoritmer, der vil du 891 00:44:07,950 --> 00:44:08,800 give det data. 892 00:44:08,800 --> 00:44:11,820 Det vil spytte ud af, hvad det bør være, og computeren 893 00:44:11,820 --> 00:44:13,490 vil tage sig af afvejning ud. 894 00:44:13,490 --> 00:44:15,890 Du behøver ikke håndtere det selv. 895 00:44:15,890 --> 00:44:18,470 Gør det en lille smule mening? 896 00:44:18,470 --> 00:44:18,970 Ja? 897 00:44:18,970 --> 00:44:24,180 >> Målgruppe: I et funktionelt sprog, alting sker på én gang? 898 00:44:24,180 --> 00:44:26,800 >> NEEL MEHTA: Nej, ting sker i orden. 899 00:44:26,800 --> 00:44:29,320 Ligesom her er der stadig orden, men det gør ikke 900 00:44:29,320 --> 00:44:32,390 ske i rækkefølge som rose, kommando, kommando. 901 00:44:32,390 --> 00:44:36,459 Det sker i den rækkefølge, Funktionen giver dig output. 902 00:44:36,459 --> 00:44:37,750 Sætte det i en anden funktion. 903 00:44:37,750 --> 00:44:39,550 Sætte det ind i en anden funktion, en anden funktion. 904 00:44:39,550 --> 00:44:41,470 >> Hvis du gør CS51, vil du lære funktionelle programmer 905 00:44:41,470 --> 00:44:42,886 en lidt ud af omfanget af dette. 906 00:44:42,886 --> 00:44:45,090 Men dybest set, hvad der gør Reagerer køligt er ikke kun 907 00:44:45,090 --> 00:44:46,840 den ensrettede datastrøm og det virtuelle Dom, 908 00:44:46,840 --> 00:44:48,700 men også denne idé om funktionel programmering. 909 00:44:48,700 --> 00:44:51,720 Og funktionel programmering er meget let at komponere og lave seje ting ud af, 910 00:44:51,720 --> 00:44:53,844 og det er meget nemt at tænke om og grund om. 911 00:44:53,844 --> 00:44:55,450 Så det er en anden god lodtrækning for at reagere. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Flere spørgsmål? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Ja? 916 00:45:03,150 --> 00:45:06,840 >> PUBLIKUM: Øh, hvorfor skulle du bruge lad i modsætning til var? 917 00:45:06,840 --> 00:45:10,450 >> NEEL MEHTA: Så spørgsmålet er Hvorfor bruger du lader i stedet for var? 918 00:45:10,450 --> 00:45:13,220 Dette er en ting kaldet ES6 eller ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Det er den nye version af JavaScript. 920 00:45:15,820 --> 00:45:19,050 Der er en masse tekniske grunde men lad er en bedre version af var. 921 00:45:19,050 --> 00:45:20,724 >> Det er hvordan du erklærer variabler. 922 00:45:20,724 --> 00:45:21,390 Du kan bruge lade. 923 00:45:21,390 --> 00:45:22,140 Du kan bruge var. 924 00:45:22,140 --> 00:45:23,825 Lad har en masse teknisk reasons-- du kan se dem 925 00:45:23,825 --> 00:45:25,610 op later-- for, hvorfor det er bedre. 926 00:45:25,610 --> 00:45:28,780 Dybest set, ES6 har nogle dejlig ny syntaks, nogle nye funktioner 927 00:45:28,780 --> 00:45:30,720 oven på den gamle JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Så vi har ligesom fem minutter. 929 00:45:32,782 --> 00:45:34,990 Jeg ville bare tale om en ting mere virkelig hurtigt. 930 00:45:34,990 --> 00:45:36,450 Hvis du havde nogen spørgsmål, lad os tale om det efter dette. 931 00:45:36,450 --> 00:45:38,366 Men bare så dette får fanget på kamera, jeg bare 932 00:45:38,366 --> 00:45:41,550 ønsker at tale lidt om, hvordan du faktisk bruger Reagere 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 dig, hvordan du rent faktisk bruger 936 00:46:03,320 --> 00:46:05,320 Reagere på dine sider. 937 00:46:05,320 --> 00:46:08,845 Dybest set, det er lidt kompliceret at forsøge at installere reagere. 938 00:46:08,845 --> 00:46:12,300 Det er ikke så let, som du bare trække og slip en JavaScript derinde. 939 00:46:12,300 --> 00:46:15,890 >> Du skal have din transformator sat op, der så det gjorde før, 940 00:46:15,890 --> 00:46:18,120 slå din JSX ind den normale JavaScript. 941 00:46:18,120 --> 00:46:21,030 Du er nødt til ting, der vil kompilere du ES6 til normal. 942 00:46:21,030 --> 00:46:24,720 JavaScript er der en masse for at flytte dele, du skal gøre, så der er en ting 943 00:46:24,720 --> 00:46:27,200 kaldet Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 Og det er en kommandolinje værktøj, der vil hjælpe dig med stillads din React 945 00:46:31,110 --> 00:46:32,380 projekter nemt. 946 00:46:32,380 --> 00:46:38,660 >> Så du kan læse om dette senere, men der er nogle værktøjer 947 00:46:38,660 --> 00:46:40,160 at Yeoman tilbyder. 948 00:46:40,160 --> 00:46:43,280 De vil lade dig oprette en React app med alt indbygget. 949 00:46:43,280 --> 00:46:46,030 Ligesom det vil have bygget i, komponenter indbygget. 950 00:46:46,030 --> 00:46:47,880 Det vil have din transformator indbygget. 951 00:46:47,880 --> 00:46:50,699 De har en masse cool ting indbygget automatisk 952 00:46:50,699 --> 00:46:52,240 anvendelse af disse ting kaldes generatorer. 953 00:46:52,240 --> 00:46:54,620 >> Så læse om dette, hvis du kan lide. 954 00:46:54,620 --> 00:46:59,110 Bare gå på Yeoman, Y-E-O-M-A-N, og du kan finde generatorer som disse. 955 00:46:59,110 --> 00:47:01,263 Og med generatorer som disse, du bare gerne en 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 stillads ud en Hele React app til dig. 958 00:47:05,530 --> 00:47:10,470 Det vil få alle de manuelle rørføring, og tunge arbejde gjort for dig, 959 00:47:10,470 --> 00:47:13,010 og det er derfor, du blot fokusere på bare at skrive i reagere. 960 00:47:13,010 --> 00:47:16,739 >> Så dybest set at opbygge en Reagerer app er nontrivial. 961 00:47:16,739 --> 00:47:19,530 Det kablede alle sammen, men der er redskaber, der vil gøre det for dig. 962 00:47:19,530 --> 00:47:23,070 Så hvis du ønsker at lave en Reager app, prøve at gøre det på den måde. 963 00:47:23,070 --> 00:47:26,360 Hvis du blot ønsker at eksperimentere, du kan prøve at bruge denne CodePen 964 00:47:26,360 --> 00:47:28,550 fordi det har CodePen alle reagerer ledninger. 965 00:47:28,550 --> 00:47:30,240 Jeg har gjort alt arbejdet for dig allerede. 966 00:47:30,240 --> 00:47:34,610 >> Så hvis du ønsker at gøre som en produktion til at frigive Reager app, 967 00:47:34,610 --> 00:47:37,220 prøv en af ​​disse generatorer. 968 00:47:37,220 --> 00:47:40,240 Hvis du bare ønsker at spille rundt, er det ofte værd bare 969 00:47:40,240 --> 00:47:44,490 ligesom prøve at spille rundt på CodePen her. 970 00:47:44,490 --> 00:47:45,470 Lyder godt? 971 00:47:45,470 --> 00:47:45,970 Afkøle. 972 00:47:45,970 --> 00:47:47,890 >> Så det er alt, jeg har. 973 00:47:47,890 --> 00:47:52,470 Igen al koden og eksempler er kommer til at være på denne hjemmeside her. 974 00:47:52,470 --> 00:47:55,509 Så igen, vi ikke taler om meget syntaks i React, 975 00:47:55,509 --> 00:47:57,550 men at finde alle de små syntaktiske detaljer, 976 00:47:57,550 --> 00:48:00,320 det hele kommer til at være til rådighed på denne hjemmeside her. 977 00:48:00,320 --> 00:48:02,660 >> Så jeg vil anbefale som tage det første skridt. 978 00:48:02,660 --> 00:48:06,277 Sætte det ind i din CodePen. 979 00:48:06,277 --> 00:48:08,110 Prøve at arbejde på at gøre det andet trin. 980 00:48:08,110 --> 00:48:11,310 Der er en fjerde trin, og bare se, hvor du får fra det. 981 00:48:11,310 --> 00:48:14,840 >> Flere spørgsmål, tjek at side eller email mig. 982 00:48:14,840 --> 00:48:16,490 Det er min e-mail. 983 00:48:16,490 --> 00:48:19,885 Men jeg ville elske at hjælpe dig med ethvert spørgsmål, du måtte have om at reagere. 984 00:48:19,885 --> 00:48:21,010 Så jep, det er alt jeg har. 985 00:48:21,010 --> 00:48:23,410 Tak alle meget for ser eller for at deltage. 986 00:48:23,410 --> 00:48:26,820 Og jeg vil tage nogle spørgsmål du måtte have efter dette nu. 987 00:48:26,820 --> 00:48:29,140 Så tak til alle for at se. 988 00:48:29,140 --> 00:48:31,270