1 00:00:00,000 --> 00:00:02,910 >> [MUSIK SPELA] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> NEEL Mehta: Här går. 4 00:00:07,275 --> 00:00:11,070 >> Tja, alla, välkommen till webben appar av framtiden med React. 5 00:00:11,070 --> 00:00:11,870 Detta är CS50. 6 00:00:11,870 --> 00:00:12,930 Mitt namn är Neel. 7 00:00:12,930 --> 00:00:17,689 Jag är en TA för CS50 och en sophomore vid Harvard College och en mycket, mycket 8 00:00:17,689 --> 00:00:18,730 passionerad webbutvecklare. 9 00:00:18,730 --> 00:00:20,730 Så jag är väldigt spännande att tala till er i dag, 10 00:00:20,730 --> 00:00:24,550 oavsett om du är här eller hemma tittar på, om React, vilket är, återigen 11 00:00:24,550 --> 00:00:27,270 som sagt, framtiden för webbprogram. 12 00:00:27,270 --> 00:00:29,055 >> Så React är ett webbramverk. 13 00:00:29,055 --> 00:00:30,930 Och som jag har varit träffande för vissa människor här, 14 00:00:30,930 --> 00:00:33,400 en ram är bara en uppsättning verktyg som du kan använda 15 00:00:33,400 --> 00:00:35,770 att strukturera och bygga din webbapplikation. 16 00:00:35,770 --> 00:00:39,010 Och webbprogram är, återigen, hemsidor som är interaktiva som Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, vad som helst. 18 00:00:42,330 --> 00:00:45,590 >> Så Facebook är ett webbramverk som utvecklats av Facebook 19 00:00:45,590 --> 00:00:48,060 ett par år back-- REACT är. 20 00:00:48,060 --> 00:00:50,830 Det är sedan dess använts i Facebook på sina mobila appar 21 00:00:50,830 --> 00:00:52,460 och webbprogrammet, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy är en annan framträdande tidigt inför av React. 23 00:00:56,350 --> 00:00:58,630 >> Det är verkligen varit få mycket populär. 24 00:00:58,630 --> 00:01:03,420 Om du någonsin använder saker som Vinkel eller Ryggrad, är detta av samma familj, 25 00:01:03,420 --> 00:01:05,830 men det har sedan långt träffa deras popularitet. 26 00:01:05,830 --> 00:01:06,890 Det är den nya heta sak. 27 00:01:06,890 --> 00:01:09,590 Det är riktigt, riktigt stort. 28 00:01:09,590 --> 00:01:13,470 >> Och så React är bra inte bara som en webbramverk för gränssnitt bygg. 29 00:01:13,470 --> 00:01:16,020 Det är bra för att bygga webbgränssnitt. 30 00:01:16,020 --> 00:01:18,350 Det finns också en sak kallas React Native som 31 00:01:18,350 --> 00:01:22,200 låter dig bygga gränssnitt för Android och iOS 32 00:01:22,200 --> 00:01:26,390 och kanske andra plattformar i framtiden genom att använda precis samma JavaScript-kod. 33 00:01:26,390 --> 00:01:31,130 Du kan använda exakt samma JavaScript-kod för att göra hemsidor, 34 00:01:31,130 --> 00:01:33,040 att göra Android-appar och iOS-appar. 35 00:01:33,040 --> 00:01:35,000 >> Det är en mycket, mycket spännande tid. 36 00:01:35,000 --> 00:01:37,070 Det är en riktigt, riktigt cool möjlighet. 37 00:01:37,070 --> 00:01:42,020 Det är verkligen en universell bana interface utvecklingsverktyg, 38 00:01:42,020 --> 00:01:44,420 så det är en mycket, mycket viktig sak att veta. 39 00:01:44,420 --> 00:01:46,949 Och som jag berättade folk före detta, tror jag, 40 00:01:46,949 --> 00:01:48,990 kommer att förändra hur vi bygga webbprogram för evigt. 41 00:01:48,990 --> 00:01:55,820 Så det är kanske lite överdrift, men jag tycker det är en ganska bra sak att veta. 42 00:01:55,820 --> 00:01:57,580 >> OK, så vad är React? 43 00:01:57,580 --> 00:02:01,020 Reagera är ett ramverk som du kan använda för att bygga gränssnitt. 44 00:02:01,020 --> 00:02:03,240 Ett gränssnitt är, återigen, en webbsida, eller hur? 45 00:02:03,240 --> 00:02:06,340 Så här är Instagram.com, användningar reagerar. 46 00:02:06,340 --> 00:02:08,740 >> React bygger på idé av komponenter. 47 00:02:08,740 --> 00:02:11,900 En komponent är en HTML- element på steroider, 48 00:02:11,900 --> 00:02:14,470 så ett HTML-element är som en knapp. 49 00:02:14,470 --> 00:02:15,250 Det är ett stycke. 50 00:02:15,250 --> 00:02:17,500 Det är en rubrik, eller hur? 51 00:02:17,500 --> 00:02:22,740 Och Instagram kommer att använda dessa, men det kommer också att använda komponenter av React. 52 00:02:22,740 --> 00:02:25,740 >> React komponenter är trimmad upp HTML-element 53 00:02:25,740 --> 00:02:28,100 som har sitt eget beteende innesluten i dessa. 54 00:02:28,100 --> 00:02:31,800 Så, som ett exempel kan vi ha ett tidselement, en tidskomponent, 55 00:02:31,800 --> 00:02:34,095 som kommer att innehålla liknande tidsstämpel, du vet, 56 00:02:34,095 --> 00:02:37,170 en profilkomponent, som kommer att innehålla den profil bild 57 00:02:37,170 --> 00:02:38,820 och namnet på personen. 58 00:02:38,820 --> 00:02:42,930 Den kan ha en liknande räknare, som kan räkna som antalet gillar, 59 00:02:42,930 --> 00:02:45,610 och om du klickar på den, det ska öka antalet gillar. 60 00:02:45,610 --> 00:02:48,200 En komponent är bara en gäng HTML-kod som 61 00:02:48,200 --> 00:02:50,520 har vissa funktioner insvept i det. 62 00:02:50,520 --> 00:02:53,770 Så det är som en HTML-element på steroider, som jag sa tidigare. 63 00:02:53,770 --> 00:02:56,270 Du kan ta dessa komponenter, och du kan sätta ihop dem 64 00:02:56,270 --> 00:02:59,060 att göra nya komponenter i detta fall, en post komponent, 65 00:02:59,060 --> 00:03:00,505 som innehåller allt det här. 66 00:03:00,505 --> 00:03:04,050 Det skulle innehålla Time, Profile, LikeCounter, kanske kommentaren 67 00:03:04,050 --> 00:03:06,100 och kanske själva bilden. 68 00:03:06,100 --> 00:03:10,810 Och så web apps just byggt genom att ta komponenter och sätta ihop dem. 69 00:03:10,810 --> 00:03:15,620 En Instagram foder är inget mer än en massa stolpar en efter den andra, 70 00:03:15,620 --> 00:03:19,032 varje inlägg innehåller som Time, Profil, LikeCounter, och så vidare. 71 00:03:19,032 --> 00:03:20,490 Det är ungefär som att bygga ett hus. 72 00:03:20,490 --> 00:03:22,660 Du behöver inte bygga hus uppifrån och ned. 73 00:03:22,660 --> 00:03:24,960 Du tar components-- dig vidta motsvarande badrummet. 74 00:03:24,960 --> 00:03:28,320 Du tar bedroom-- du håller dem tillsammans, och 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å REACT är alla byggda runt denna idé av komponenter som 77 00:03:32,860 --> 00:03:36,600 är interaktiva, som är deklarativ. 78 00:03:36,600 --> 00:03:39,650 Som du bara säga vad en profilen är, och det gör det. 79 00:03:39,650 --> 00:03:40,600 De är sammansättnings. 80 00:03:40,600 --> 00:03:43,880 Du kan ta en tid och en profil, sätta dem tillsammans, göra något bättre. 81 00:03:43,880 --> 00:03:47,770 Och de är återanvändbara, så om du har källkoden för en post, 82 00:03:47,770 --> 00:03:49,440 du kan bädda in var som helst. 83 00:03:49,440 --> 00:03:53,160 >> Du kan bädda in en Instagram sak på din egen hemsida. 84 00:03:53,160 --> 00:03:56,830 Du kan bädda in i Facebook, till exempel, så länge som den använder React också. 85 00:03:56,830 --> 00:04:00,360 Så komponenter är verkligen, verkligen, verkligen kraftfulla byggstenar av banan 86 00:04:00,360 --> 00:04:04,180 som kan användas överallt och sätta tillsammans för att göra nya byggstenar. 87 00:04:04,180 --> 00:04:07,159 Det är mycket, mycket hög nivå översikt. 88 00:04:07,159 --> 00:04:09,200 Så, återigen, om du har några frågor när som helst 89 00:04:09,200 --> 00:04:14,470 om filosofi reaktorn, kodning, för att stoppa mig, och låt mig veta. 90 00:04:14,470 --> 00:04:18,420 >> OK, så reagerar är coolt eftersom det har ett annat sätt att se 91 00:04:18,420 --> 00:04:19,870 hur du bygger webbappar. 92 00:04:19,870 --> 00:04:23,620 Du har säkert hört talas om MVC, en modell du styra i CS50 eller vad 93 00:04:23,620 --> 00:04:25,940 andra prob klasser som du använder. 94 00:04:25,940 --> 00:04:29,000 Och de flesta ramar är uppbyggd kring idén om MVC. 95 00:04:29,000 --> 00:04:30,410 React inte. 96 00:04:30,410 --> 00:04:32,980 REACT är uppbyggd kring tanken av ensriktad dataflöde 97 00:04:32,980 --> 00:04:36,510 vilket framgår av detta diagram eller grafik här. 98 00:04:36,510 --> 00:04:38,260 >> I grund och botten har du en datakälla. 99 00:04:38,260 --> 00:04:42,380 Och datakällan avgör hur man lägga ut vissa komponenter. 100 00:04:42,380 --> 00:04:45,452 Och komponenterna kommer då, när de förändras, 101 00:04:45,452 --> 00:04:47,160 de kommer att berätta datakälla för att ändra. 102 00:04:47,160 --> 00:04:49,350 >> Om du vill använda Instagram Du kan exempelvis ha 103 00:04:49,350 --> 00:04:52,050 en lista av post föremål som i en databas eller något. 104 00:04:52,050 --> 00:04:53,310 Att uppgifterna. 105 00:04:53,310 --> 00:04:57,600 Och sedan vår post komponenter kommer att ta dessa uppgifter, 106 00:04:57,600 --> 00:05:01,830 och använder den för att göra en sak på skärmen. 107 00:05:01,830 --> 00:05:04,300 Det är vad pilen från data till komponent är, 108 00:05:04,300 --> 00:05:07,930 och sedan att samma data används att göra en massa komponenter. 109 00:05:07,930 --> 00:05:10,290 >> I Facebook Messenger, för exempel, som är React, 110 00:05:10,290 --> 00:05:13,410 du kanske har en lista över meddelanden som datakällan. 111 00:05:13,410 --> 00:05:15,927 Och det skulle göra inte endast meddelandelistan 112 00:05:15,927 --> 00:05:17,510 men också en lista över vänner som du har. 113 00:05:17,510 --> 00:05:19,200 Du har olästa. 114 00:05:19,200 --> 00:05:23,330 Kanske även göra Facebook sak det är längst ner på Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Samma data är en enda källa av sanning 116 00:05:25,610 --> 00:05:28,290 och det orsakar en hel del komponenter som skall återges. 117 00:05:28,290 --> 00:05:30,290 Och när en av dem komponenter ändras, 118 00:05:30,290 --> 00:05:32,320 Det går fram och ändrar datakällan. 119 00:05:32,320 --> 00:05:33,460 >> Du skickar ett meddelande, eller hur? 120 00:05:33,460 --> 00:05:34,780 Som ändrar datakällan. 121 00:05:34,780 --> 00:05:39,490 Du läser dina meddelanden, så du ställer oläst till 0. 122 00:05:39,490 --> 00:05:41,136 Som ändrar datakällan. 123 00:05:41,136 --> 00:05:44,010 Och lägg märke till att alla dessa av en pil gå tillbaka till samma data 124 00:05:44,010 --> 00:05:47,662 källa, så du vet, givet en viss datamängd, 125 00:05:47,662 --> 00:05:49,870 du vet exakt vad sida kommer att se ut. 126 00:05:49,870 --> 00:05:50,700 Det är deterministisk. 127 00:05:50,700 --> 00:05:53,451 Du vet, under vissa uppgifter, vad sidan kommer att se ut. 128 00:05:53,451 --> 00:05:56,158 Du kan förutsäga hur det kommer att beter sig och hur det går 129 00:05:56,158 --> 00:05:57,650 att arbeta när de är tillsammans. 130 00:05:57,650 --> 00:06:00,410 >> Och om jag hade en miljon komponenter Här skulle det beter sig på samma, eller hur? 131 00:06:00,410 --> 00:06:02,290 Du skulle inte ha någon konstiga sammankopplingar. 132 00:06:02,290 --> 00:06:04,120 En dataframförde en miljon komponenter. 133 00:06:04,120 --> 00:06:06,879 En miljon komponenter kunde gå tillbaka och redigera data. 134 00:06:06,879 --> 00:06:07,920 Och så detta är mycket trevligt. 135 00:06:07,920 --> 00:06:10,870 Vi håller på att bygga sammansättnings, skalbar webbprogram. 136 00:06:10,870 --> 00:06:13,150 >> Du har en datakälla, källan till sanningen. 137 00:06:13,150 --> 00:06:15,790 Det säger dina komponenter hur man lägga ut på sidan, 138 00:06:15,790 --> 00:06:18,190 och komponenterna kommer hantera interaktion. 139 00:06:18,190 --> 00:06:20,150 Och om de vill ändra saker, bara gå tillbaka 140 00:06:20,150 --> 00:06:21,750 och tala om för datakällan att ändras. 141 00:06:21,750 --> 00:06:22,850 Vettigt? 142 00:06:22,850 --> 00:06:26,010 Så React handlar om att förstå hur man bygger en komponent 143 00:06:26,010 --> 00:06:29,540 och hur man gör komponenten interagera med omvärlden. 144 00:06:29,540 --> 00:06:31,850 >> Making komponenten samverkar med omvärlden 145 00:06:31,850 --> 00:06:34,490 använder en annan teknik kallas Flux, som 146 00:06:34,490 --> 00:06:36,872 är ett ramverk som är läggas ovanpå React. 147 00:06:36,872 --> 00:06:38,330 Vi kommer inte att prata om det. 148 00:06:38,330 --> 00:06:42,990 Vi kommer att tala mer om, med tanke på uppgifter, hur kan du göra en komponent? 149 00:06:42,990 --> 00:06:47,010 >> Och så React är riktigt coolt eftersom du kan använda den med någon backend du vill. 150 00:06:47,010 --> 00:06:50,480 Om du har som en Python bakändan, Om din Python kan spotta ut några uppgifter, 151 00:06:50,480 --> 00:06:51,610 React kan göra det. 152 00:06:51,610 --> 00:06:54,700 Om du inte finns några JS utgångar av data, React gör det. 153 00:06:54,700 --> 00:06:56,890 Ruby skenor med uppgifter, React gör det. 154 00:06:56,890 --> 00:07:01,860 >> Så React är i grunden en webb view-- en främre ände med komponenter 155 00:07:01,860 --> 00:07:03,910 för alla data som helst källa. 156 00:07:03,910 --> 00:07:07,145 Och så går från datakällan till reagerar komponenter är ganska lätt. 157 00:07:07,145 --> 00:07:08,770 Går åt andra hållet är lite svårare. 158 00:07:08,770 --> 00:07:10,462 Som använder Flux som jag nämnde tidigare. 159 00:07:10,462 --> 00:07:11,420 Vi kommer inte att komma in i det. 160 00:07:11,420 --> 00:07:13,740 Vi kommer att fokusera mer på uppgifter-till-komponentsidan. 161 00:07:13,740 --> 00:07:15,880 Detta gör att du kan göra coola, roliga webbappar. 162 00:07:15,880 --> 00:07:19,870 Det kommer inte att påverka omvärlden för nu, men det är en annan historia. 163 00:07:19,870 --> 00:07:22,210 >> OK, så om du var här för min sista seminarium 164 00:07:22,210 --> 00:07:26,610 du vet att all kod för dagens tal kommer att vara på den här webbadressen 165 00:07:26,610 --> 00:07:29,320 här, ledsen, denna URL här. 166 00:07:29,320 --> 00:07:32,730 Och i princip ska vi gå genom fyra steg, kanske fem, 167 00:07:32,730 --> 00:07:33,510 förmodligen inte fem. 168 00:07:33,510 --> 00:07:37,300 Vi kommer att gå igenom fyra steg att bygga ett prov React app. 169 00:07:37,300 --> 00:07:39,550 Och så all källkod för varje steg på vägen 170 00:07:39,550 --> 00:07:42,216 kommer att vara just här, så om du följer längs hemma, 171 00:07:42,216 --> 00:07:43,991 gärna ta del av den här koden. 172 00:07:43,991 --> 00:07:46,740 Om du följer längs här, Vi kommer att visa den på skärmen, 173 00:07:46,740 --> 00:07:47,739 så du behöver inte oroa sig för det. 174 00:07:47,739 --> 00:07:50,930 Men om du är hemma, känner gratis att besöka denna webbplats. 175 00:07:50,930 --> 00:07:56,400 Och Ja, bör du kunna få all kod du någonsin skulle behöva här. 176 00:07:56,400 --> 00:08:01,380 Så det är en bra lathund samt för dina framtida äventyr med React. 177 00:08:01,380 --> 00:08:04,490 Cool, så om alla som är här, och även om du är hemma, 178 00:08:04,490 --> 00:08:11,580 dra upp denna webbplats, is.gd/cs50react, inget kapital, ingen streck, ingen ingenting. 179 00:08:11,580 --> 00:08:15,849 >> Du kommer att se en sida som ser lite såhär. 180 00:08:15,849 --> 00:08:17,140 Detta är en sak som kallas CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen är ett samarbete kodningsmiljö 182 00:08:20,030 --> 00:08:23,364 som jag kan skriva kod här, och Det kommer automatiskt att skickas till dig. 183 00:08:23,364 --> 00:08:24,780 Och det här sättet, kan jag skriva kod. 184 00:08:24,780 --> 00:08:26,920 Jag kan köra kod här. 185 00:08:26,920 --> 00:08:33,470 >> För example-- och om det reloads-- se, Jag kör JavaScript-kod på sidan 186 00:08:33,470 --> 00:08:36,390 just här, och det kommer automatiskt gör en webbsida 187 00:08:36,390 --> 00:08:37,980 med denna JavaScript-kod. 188 00:08:37,980 --> 00:08:40,039 Och så detta är ett sätt för oss att prova koden 189 00:08:40,039 --> 00:08:43,089 riktigt snabb utan att behöva använda vår ID eller använd vår lokala maskin 190 00:08:43,089 --> 00:08:44,290 eller vad som helst. 191 00:08:44,290 --> 00:08:47,670 Det är ett mycket snabbt sätt för dig att mockup och testa olika typer av kod. 192 00:08:47,670 --> 00:08:50,560 >> Så jag kommer att ta exempelkod, sätta upp den här. 193 00:08:50,560 --> 00:08:52,374 Vi kommer att arbeta igenom det. 194 00:08:52,374 --> 00:08:54,540 Och om du är hemma, du kan dra upp detta liksom. 195 00:08:54,540 --> 00:08:57,530 Och jag har redan installerat Reagera här, så att du kan bara 196 00:08:57,530 --> 00:09:00,770 skriva din egen kod här, och prova det som din egen lekplats. 197 00:09:00,770 --> 00:09:04,940 >> Ja, om alla att öppna denna länk här. 198 00:09:04,940 --> 00:09:08,080 Kan du ge mig en tummen upp när du har den öppen. 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 finns inget här just nu, men Vi kommer att ändra på det mycket snart. 202 00:09:16,914 --> 00:09:21,250 >> OK, så reagerar är en JavaScript bibliotek, och som sådan, 203 00:09:21,250 --> 00:09:24,480 kräver kunskap om JavaScript vilket är språket webbprogrammering. 204 00:09:24,480 --> 00:09:27,660 Och den används för andra saker nu också men framför allt på webben utvecklas 205 00:09:27,660 --> 00:09:32,040 språk, så om du inte är bekant med att läsa en plats som heter JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 Det är underbart. 207 00:09:32,700 --> 00:09:34,240 Du kan lära dig JavaScript om en halvtimme. 208 00:09:34,240 --> 00:09:34,990 Det är otroligt. 209 00:09:34,990 --> 00:09:36,420 >> Så ge det en läsning. 210 00:09:36,420 --> 00:09:39,960 Vi är också en hel del HTML här eftersom vi designa webbsidor naturligtvis. 211 00:09:39,960 --> 00:09:43,890 Så om du är obekant med HTML, ta HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Jag tror att lära React är en miljoner gånger lättare om du redan 213 00:09:46,520 --> 00:09:47,892 känna till byggstenar. 214 00:09:47,892 --> 00:09:50,600 Om du har komponenter, är det lätt att göra en större komponent. 215 00:09:50,600 --> 00:09:51,860 Det är React språk för dig. 216 00:09:51,860 --> 00:09:54,270 >> Så gå vidare och ge dessa saker lästa. 217 00:09:54,270 --> 00:09:55,070 Pausa den här videon. 218 00:09:55,070 --> 00:09:57,440 Ge det en läsa om du är hemma om du inte är 219 00:09:57,440 --> 00:10:00,794 förtrogen med HTML eller JavaScript 220 00:10:00,794 --> 00:10:02,960 OK, så vad vi ska göra är att vi kommer att göra 221 00:10:02,960 --> 00:10:06,470 en mycket grundläggande flashcard programmet med React. 222 00:10:06,470 --> 00:10:08,210 Vi kommer att ha en flashcard. 223 00:10:08,210 --> 00:10:09,880 Du kan bläddra fram och tillbaka kortet. 224 00:10:09,880 --> 00:10:12,399 Och vi kommer också att ha en lista över alla kort som vi har, 225 00:10:12,399 --> 00:10:14,190 och om vi känner ambitiös, kan vi vara 226 00:10:14,190 --> 00:10:17,060 kunna växla mellan bilar genom att klicka på dem. 227 00:10:17,060 --> 00:10:20,360 >> Men detta är, din nakna ben, en mycket enkel React app. 228 00:10:20,360 --> 00:10:22,560 Och så detta är faktiskt inte trivialt att genomföra, 229 00:10:22,560 --> 00:10:26,030 men vi kommer att visa att, om du gör detta är det väldigt, väldigt lätt att förlänga den 230 00:10:26,030 --> 00:10:27,680 om andra människor hjälper dig med det. 231 00:10:27,680 --> 00:10:33,750 Så vi kommer att gå igenom fyra steg börjar från noll för att bygga detta. 232 00:10:33,750 --> 00:10:36,740 >> OK, så de fyra stegen, vi ska börjar med det första steget. 233 00:10:36,740 --> 00:10:39,790 Det första steget kommer att vara bygga din första komponenten. 234 00:10:39,790 --> 00:10:44,830 Som jag sa tidigare, en komponent i React är bara ett HTML-element på steroider. 235 00:10:44,830 --> 00:10:49,660 Det anger HTML och vissa beteenden, och det 236 00:10:49,660 --> 00:10:52,600 kommer att specificera hur människor kan interagera med det hur 237 00:10:52,600 --> 00:10:54,270 det skulle ha inre tillstånd. 238 00:10:54,270 --> 00:10:57,630 Som en knapp vet precis hur många gånger det har klickat till exempel, 239 00:10:57,630 --> 00:11:01,010 och det kommer att veta hur man ska lägga sig ut. 240 00:11:01,010 --> 00:11:04,430 >> Så låt oss gå vidare och bygga upp vår första komponenten med hjälp av JavaScript. 241 00:11:04,430 --> 00:11:09,711 Så om syntaxen ser konstig, det beror på att det slags är. 242 00:11:09,711 --> 00:11:11,710 Så, återigen, vi kommer för att göra en variabel som heter 243 00:11:11,710 --> 00:11:14,580 Appen använder sökordet låt, vilket gör en variabel, 244 00:11:14,580 --> 00:11:18,210 låt App lika React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> React är ett bibliotek och har det skapar klassfunktion. 246 00:11:22,609 --> 00:11:24,400 Och denna funktion är en bit kod som du 247 00:11:24,400 --> 00:11:29,090 kan använda för att skapa en ny typ av React komponent. 248 00:11:29,090 --> 00:11:32,780 Och så React.createClass gör en komponent, 249 00:11:32,780 --> 00:11:35,270 och denna komponent kommer kunna göra saker. 250 00:11:35,270 --> 00:11:40,460 Det viktigaste man kan göra är göra något, framför som en funktion. 251 00:11:40,460 --> 00:11:44,500 >> Återigen, om detta index inte är uppenbart för dig, rekommenderar jag att du går på JS för katter 252 00:11:44,500 --> 00:11:45,682 och kolla upp det. 253 00:11:45,682 --> 00:11:47,710 Är det zoomat in tillräckligt bra? 254 00:11:47,710 --> 00:11:48,490 Häftigt. 255 00:11:48,490 --> 00:11:50,670 >> Så varje komponent behov att ha en rendera funktion. 256 00:11:50,670 --> 00:11:53,010 Det gör funktionen säger, Vad skriver jag ut på skärmen? 257 00:11:53,010 --> 00:11:54,760 Men komponenten är värdelös om den inte 258 00:11:54,760 --> 00:11:58,060 vet vad du ska skriva ut på skärmen, så du måste ha en rendera funktion. 259 00:11:58,060 --> 00:12:01,904 >> Så i render sak, du behöver bara att återvända någon HTML. 260 00:12:01,904 --> 00:12:03,820 Och vad är coolt är att det finns något som heter 261 00:12:03,820 --> 00:12:08,660 JSX, som är en förlängning av JavaScript som används av reagera. 262 00:12:08,660 --> 00:12:11,845 Det låter dig skriva HTML inne av JavaScript, som 263 00:12:11,845 --> 00:12:13,970 låter lite konstigt när du först tänker på det, 264 00:12:13,970 --> 00:12:15,553 men det gör mycket känsla efteråt. 265 00:12:15,553 --> 00:12:17,430 Så vi kan göra detta. 266 00:12:17,430 --> 00:12:21,360 Om du är bekant med HTML, jag vet vi har en div med ett generellt 267 00:12:21,360 --> 00:12:22,790 behållare för grejer. 268 00:12:22,790 --> 00:12:26,380 Vi kan återkomma en div och inne denna div, kan vi sätta saker. 269 00:12:26,380 --> 00:12:32,390 >> Så låt oss säga att vi vill göra bara en rak-up flash nu. 270 00:12:32,390 --> 00:12:34,890 Den flashcard, skulle jag säga, kommer att ha en fråga och svar. 271 00:12:34,890 --> 00:12:37,530 Så inuti denna div, låt oss skriva ut ett stycke 272 00:12:37,530 --> 00:12:42,155 som säger question-- Vad är ultimata svaret till liv, universum? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 Och då är svaret kommer att bli, naturligtvis, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Det kom inte upp bra alls. 277 00:12:59,730 --> 00:13:04,164 Ja, så i princip kan du verkligen skriva HTML inne JavaScript. 278 00:13:04,164 --> 00:13:06,330 Och detta kommer att bli skrivas ut in i skärmen. 279 00:13:06,330 --> 00:13:08,250 Så låt oss prova det. 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åste tala om Reagera att sätta komponenten på skärmen 282 00:13:12,210 --> 00:13:18,990 så React.render, så märker att vi behandla app som alla andra element. 283 00:13:18,990 --> 00:13:21,010 Vi skriver det som det var ett HTML-element. 284 00:13:21,010 --> 00:13:25,100 Liksom i stället för att säga som img för bild eller p för punkt, 285 00:13:25,100 --> 00:13:28,120 du skriver App, så App är behandlas som ett HTML-element. 286 00:13:28,120 --> 00:13:30,380 Som jag sa tidigare, det är ett element på steroider. 287 00:13:30,380 --> 00:13:32,870 >> Så du gör App, och du ge det en plats att uttrycka det. 288 00:13:32,870 --> 00:13:37,170 Och det är hur du kan tala om det var för att uttrycka det. 289 00:13:37,170 --> 00:13:46,200 Jag har skapat en enkel div på sida som kallas med ett ID på sidan, 290 00:13:46,200 --> 00:13:48,300 och det är där den elementet kommer att gå. 291 00:13:48,300 --> 00:13:49,841 >> Och vi kommer inte att köra med HTML. 292 00:13:49,841 --> 00:13:53,145 I grund och botten detta kommer att få sätta insidan av denna sida elementet 293 00:13:53,145 --> 00:13:54,270 att vi har på skärmen. 294 00:13:54,270 --> 00:13:59,210 Så det går denna kod, och det drar denna sak på skärmen, så här är vi. 295 00:13:59,210 --> 00:14:01,770 Vi har gjort vår första React komponent. 296 00:14:01,770 --> 00:14:08,000 >> Så precis som en resumé, vi försiktigt gjort en ny typ av komponent, eller hur? 297 00:14:08,000 --> 00:14:10,145 Det är vad React.createClass. 298 00:14:10,145 --> 00:14:12,680 Och i denna komponent, vi berättade för den vad den ska göra. 299 00:14:12,680 --> 00:14:15,590 När denna komponent är att tryckas på skärmen, 300 00:14:15,590 --> 00:14:19,300 det kommer att skriva ut div med de två stycken inne i det. 301 00:14:19,300 --> 00:14:24,460 >> Och vad vi gjorde, gjorde vi en ny app med hjälp av vinkeljärnet app notation. 302 00:14:24,460 --> 00:14:27,160 Vi berättade det för att uttrycka det inuti sidelementet. 303 00:14:27,160 --> 00:14:29,867 Och så vad jag gjorde, skapade det en ny app från den mallen. 304 00:14:29,867 --> 00:14:31,200 Och då jag berättade det för att göra det. 305 00:14:31,200 --> 00:14:33,680 Så det sade, OK, app, vad ska jag skriva ut? 306 00:14:33,680 --> 00:14:36,970 App säger, går skriva ut en div med två stycken inne i det. 307 00:14:36,970 --> 00:14:40,420 Och voila, där är vår div med två stycken inne i det. 308 00:14:40,420 --> 00:14:43,180 Vettigt hittills? 309 00:14:43,180 --> 00:14:46,690 >> Så, återigen, hela utmaningen React är bara att veta hur man gör komponenter. 310 00:14:46,690 --> 00:14:48,500 Hur man gör komponenter fungerar tillsammans. 311 00:14:48,500 --> 00:14:51,780 Nu när vi har gjort vår första komponent, låt oss gå tillbaka 312 00:14:51,780 --> 00:14:54,284 och göra komponenter customizable. 313 00:14:54,284 --> 00:14:56,700 Så du vet hur i HTML du kan ge dina knappar klasser? 314 00:14:56,700 --> 00:14:59,146 Du kan ge dina ankare href. 315 00:14:59,146 --> 00:15:00,770 Du kan ge dina ingångar en typ, eller hur? 316 00:15:00,770 --> 00:15:04,740 Du kan ge mer anpassade fastigheter till alla dina element 317 00:15:04,740 --> 00:15:06,490 att göra det mer intressant. 318 00:15:06,490 --> 00:15:09,030 Och vi faktiskt kan göra exakt samma sak. 319 00:15:09,030 --> 00:15:17,500 >> Så låt oss säga att vi vill att vår app för att gå göra något kort. 320 00:15:17,500 --> 00:15:19,630 Just nu vi bara återges en hårdkodad kort. 321 00:15:19,630 --> 00:15:22,530 Vi vet att det finns bara en kort kan det göra, så vi är 322 00:15:22,530 --> 00:15:25,960 kommer att försöka ändra på detta nu så att vi bara kan ge det lite kort. 323 00:15:25,960 --> 00:15:27,410 Det kommer att skriva ut kortet. 324 00:15:27,410 --> 00:15:29,380 >> Du borde försöka göra din komponenter ett mycket allmänt ändamål. 325 00:15:29,380 --> 00:15:31,654 Så här sättet kunde jag e-post detta är min vän och vara som, 326 00:15:31,654 --> 00:15:33,820 oavsett flashcard du har, bara mata den in på här, 327 00:15:33,820 --> 00:15:35,290 och det kommer att göra det själv. 328 00:15:35,290 --> 00:15:37,650 Du kan sätta andra saker i din egen app. 329 00:15:37,650 --> 00:15:40,600 >> Men först, låt oss bryta denna upp i två komponenter, 330 00:15:40,600 --> 00:15:44,500 men vi vill separera kortet utskrift del från den faktiska app delen. 331 00:15:44,500 --> 00:15:46,660 Så vad vi kan göra är vi kan ändra detta från App 332 00:15:46,660 --> 00:15:51,300 till CardView, bara en nytt namn för appen, 333 00:15:51,300 --> 00:15:54,450 och vi kan göra en ny komponent som kallas App, 334 00:15:54,450 --> 00:15:56,336 inte att förväxla med den gamla App. 335 00:15:56,336 --> 00:16:00,730 Vi har fått createClass, och som i HTML, 336 00:16:00,730 --> 00:16:03,590 du kan bo Reagera komponenter insidan av varje annan. 337 00:16:03,590 --> 00:16:16,430 >> Så i detta render funktion, funktionsretur CardView, 338 00:16:16,430 --> 00:16:18,234 och detta är exakt samma sak. 339 00:16:18,234 --> 00:16:19,400 Se varför det är samma sak? 340 00:16:19,400 --> 00:16:22,590 I stället för att göra just app som har div och kopplat inne i det, 341 00:16:22,590 --> 00:16:26,194 appen gör CardView, och CardView gör div och punkt. 342 00:16:26,194 --> 00:16:29,110 Så det här är vårt första exempel på häcknings element inuti varandra. 343 00:16:29,110 --> 00:16:32,177 Betyder det vettigt? 344 00:16:32,177 --> 00:16:33,760 Så, återigen, har vi en CardView element. 345 00:16:33,760 --> 00:16:37,250 Vi har app element att det är större än. 346 00:16:37,250 --> 00:16:40,990 >> OK, så vi vill att vår CardView-- om du ge en bra CardView ett visst kort, 347 00:16:40,990 --> 00:16:43,370 det ska skriva ut för dig, eller hur? 348 00:16:43,370 --> 00:16:48,050 Så först måste vi göra ett kort, så låt oss göra ett kortobjekt. 349 00:16:48,050 --> 00:17:02,930 Så låt mitt kort equal-- Om du är alla bekanta, 350 00:17:02,930 --> 00:17:05,260 detta är bara notation fattandet invändningar i JavaScript. 351 00:17:05,260 --> 00:17:09,280 Det är ungefär som en struct i C, så vi gjorde en kort, 352 00:17:09,280 --> 00:17:15,920 och så nu kan vi passerar detta kort som en fastighet eller som ett attribut i HTML 353 00:17:15,920 --> 00:17:17,290 terminologi till vår app. 354 00:17:17,290 --> 00:17:20,210 Så vi kan göra det här, App kortet är lika myCard. 355 00:17:20,210 --> 00:17:23,200 >> Du vet hur i ingången, du gör input type lika text eller knapp 356 00:17:23,200 --> 00:17:25,240 klass är lika BTN för bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Samma idé, App kort equals-- du har att sätta hängslen här-- 358 00:17:29,500 --> 00:17:33,830 App kort lika myCard, så detta säger att vi har denna kortobjekt. 359 00:17:33,830 --> 00:17:39,149 Jag kommer att skicka det som ett bostad i appen komponenten. 360 00:17:39,149 --> 00:17:41,440 Och den här appen komponent kommer kunna få tillgång till det och göra 361 00:17:41,440 --> 00:17:43,580 intressanta saker med det. 362 00:17:43,580 --> 00:17:47,650 >> Så vår app är kommer att bli med tanke på ett kort, så för nu, 363 00:17:47,650 --> 00:17:49,980 låt oss ta appen bara ge kortet till CardView 364 00:17:49,980 --> 00:17:53,110 själv eftersom som appen är inte kommer att veta vad man ska göra med det, 365 00:17:53,110 --> 00:17:54,850 så vi ska bara ge det till CardView. 366 00:17:54,850 --> 00:18:00,050 Så vi ska skicka det samma sätt, lika kort, 367 00:18:00,050 --> 00:18:05,426 och så att varje komponent kan komma åt saker som har getts till det. 368 00:18:05,426 --> 00:18:07,800 De kan komma åt egenskaper som har getts till det 369 00:18:07,800 --> 00:18:09,470 använda denna syntax, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Så vad händer här är du har myCard objektet. 372 00:18:14,920 --> 00:18:18,250 Du passerar den i appen med användning av App-kort är lika myCard. 373 00:18:18,250 --> 00:18:21,420 Denna kortobjektet ges till din app. 374 00:18:21,420 --> 00:18:24,400 Appen kan komma åt den som this.props.card. 375 00:18:24,400 --> 00:18:28,780 Det är ungefär som en bild vet vad det källa är. 376 00:18:28,780 --> 00:18:31,972 >> Denna app vet vad det är kort är, och det kan göra saker med det. 377 00:18:31,972 --> 00:18:32,930 Det kan göra beräkningar. 378 00:18:32,930 --> 00:18:35,290 Det kan fatta beslut baserat på det. 379 00:18:35,290 --> 00:18:39,950 >> För nu, jag kommer att passera this.props.card på CardView. 380 00:18:39,950 --> 00:18:43,420 Vettigt hittills? 381 00:18:43,420 --> 00:18:45,210 Det kommer mer meningsfullt nu. 382 00:18:45,210 --> 00:18:46,990 >> OK, så nu är vi på CardView. 383 00:18:46,990 --> 00:18:51,719 Vår CardView, med tanke på kortet, bör skriva ut sin fråga och svar. 384 00:18:51,719 --> 00:18:54,510 Just nu vi bara skrivas ut några hårdkodade frågor och svar. 385 00:18:54,510 --> 00:18:57,720 Vi måste ta reda out-- vi behöver att be kort som de gav oss 386 00:18:57,720 --> 00:19:01,360 Vad är frågor och svar, och sedan skriva ut det här i skärmen. 387 00:19:01,360 --> 00:19:02,470 >> Så vi kan göra det här. 388 00:19:02,470 --> 00:19:06,135 I framför begin-- först göra lika. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Så vad vi gör här är att vi vet att korten gett oss till en fastighet, 391 00:19:13,050 --> 00:19:13,580 höger? 392 00:19:13,580 --> 00:19:15,930 Det har gett oss som en ingång. 393 00:19:15,930 --> 00:19:19,440 Som det är nästan som argument till en funktion. 394 00:19:19,440 --> 00:19:22,810 Kortet är ett argument nästan till denna CardView. 395 00:19:22,810 --> 00:19:25,239 >> Vi kommer att extrahera det och sätta den i den variabla fråga. 396 00:19:25,239 --> 00:19:27,280 Se till att svaret gick till den variabla svaret. 397 00:19:27,280 --> 00:19:31,130 Uppmanas det kortet för att svara. 398 00:19:31,130 --> 00:19:35,072 Och nu när vi har dessa, stället för att skriva ut denna text, 399 00:19:35,072 --> 00:19:37,030 vi kommer att skriva ut vad de gav oss. 400 00:19:37,030 --> 00:19:43,580 >> Så detta stuff-- så vi tänker att släcka Fråga Svar. 401 00:19:43,580 --> 00:19:46,380 Låt oss se om det fungerar. 402 00:19:46,380 --> 00:19:52,800 Cool, så låt oss gå igenom det en gång bara för att vara säker. 403 00:19:52,800 --> 00:20:00,470 >> Så mitt kort är kortobjektet, och vi ger det kortet till appen. 404 00:20:00,470 --> 00:20:04,790 Och appen kommer att ta kort och ge det till CardView. 405 00:20:04,790 --> 00:20:09,190 Och detta CardView säger, om du ge mig någon flashcard objekt, 406 00:20:09,190 --> 00:20:11,920 Jag ska skriva ut sin fråga och svaret, eller hur? 407 00:20:11,920 --> 00:20:14,590 >> Så vad jag kan göra är att jag kan Skicka den här koden, den första 408 00:20:14,590 --> 00:20:16,580 som 10 rader min kod, till min vän. 409 00:20:16,580 --> 00:20:18,820 Han kunde bädda in den i hans egen ansökan. 410 00:20:18,820 --> 00:20:27,200 Och så länge som han gjorde samma sak, som CardView kortet motsvarar detta, 411 00:20:27,200 --> 00:20:30,580 så länge han skapade CardView och gav den rätt information, 412 00:20:30,580 --> 00:20:31,987 han kunde göra sitt eget kort. 413 00:20:31,987 --> 00:20:34,320 Och så det här sättet, det är en riktigt coolt sätt för dig att bygga 414 00:20:34,320 --> 00:20:35,906 komponenter som använder varandra, eller hur? 415 00:20:35,906 --> 00:20:38,280 Detta kort, jag kunde publicera detta CardView på internet, 416 00:20:38,280 --> 00:20:39,790 och människor skulle kunna använda den. 417 00:20:39,790 --> 00:20:45,070 Så i princip är det som en av de standardfunktioner i C-biblioteket. 418 00:20:45,070 --> 00:20:47,280 >> Den är en funktion där någon har skrivit den. 419 00:20:47,280 --> 00:20:48,419 Du ger en viss ingång. 420 00:20:48,419 --> 00:20:49,710 Det kommer att producera en viss utgång. 421 00:20:49,710 --> 00:20:50,890 Du behöver inte bryr sig om hur det fungerar internt. 422 00:20:50,890 --> 00:20:53,790 Så länge du ger den rätt input, kommer det att göra rätt utgång. 423 00:20:53,790 --> 00:20:57,850 >> Och en del kan vara tänkt på samma sätt. 424 00:20:57,850 --> 00:21:00,280 Denna CardView är som en biblioteksfunktion. 425 00:21:00,280 --> 00:21:03,400 Om du ge det lite kort som en egenskap, det ska 426 00:21:03,400 --> 00:21:05,095 skriva ut innehållet i det kortet. 427 00:21:05,095 --> 00:21:16,820 Som om jag ändrar mitt kort till i stället vara vad som är 5 plus 37, 428 00:21:16,820 --> 00:21:19,210 det kommer att uppdatera i enlighet därmed. 429 00:21:19,210 --> 00:21:21,955 Så bara genom att ändra ingång, det blir en viss utgång. 430 00:21:21,955 --> 00:21:24,830 Så du kan tänka på komponenter nästan som fungerar på detta sätt, vilket 431 00:21:24,830 --> 00:21:25,920 du kan sätta ihop. 432 00:21:25,920 --> 00:21:29,440 Du får input, som den här CardView som indata, får du utdata. 433 00:21:29,440 --> 00:21:31,900 I detta fall är utgångs HTML. 434 00:21:31,900 --> 00:21:34,404 Vettigt hittills? 435 00:21:34,404 --> 00:21:36,890 Cool, så igen, egenskaper hur du kan överföra information 436 00:21:36,890 --> 00:21:40,900 till och från komponenter. 437 00:21:40,900 --> 00:21:42,740 >> OK, så låt oss göra detta sak interaktiv. 438 00:21:42,740 --> 00:21:44,450 Just nu är det ganska tråkigt. 439 00:21:44,450 --> 00:21:45,520 Vad är [OHÖRBAR]? 440 00:21:45,520 --> 00:21:48,210 Du kan skriva några ut, men det är allt det kan göra. 441 00:21:48,210 --> 00:21:51,550 >> Så låt oss gå tillbaka till gamla frågan just nu. 442 00:21:51,550 --> 00:21:54,405 OK, så just nu dessa komponenter är tråkiga eftersom allt de gör, 443 00:21:54,405 --> 00:21:55,030 de får ingång. 444 00:21:55,030 --> 00:21:56,100 De gör utgång, eller hur? 445 00:21:56,100 --> 00:21:57,049 Det är typ av tråkiga. 446 00:21:57,049 --> 00:21:59,090 Vi vill ha vår komponenter för att kunna ha 447 00:21:59,090 --> 00:22:02,150 någon form av inre tillstånd, som minns något. 448 00:22:02,150 --> 00:22:05,320 >> För en Flashcard, för exempel vilken typ av tillstånd 449 00:22:05,320 --> 00:22:07,550 kanske du vill minnas för en flashcard? 450 00:22:07,550 --> 00:22:09,740 Vad tillfällig status kanske du vill komma ihåg 451 00:22:09,740 --> 00:22:12,491 för en flashcard i en flashcard app? 452 00:22:12,491 --> 00:22:13,990 PUBLIK: Oavsett om det är vänts? 453 00:22:13,990 --> 00:22:14,990 NEEL Mehta: Ja, just det. 454 00:22:14,990 --> 00:22:17,665 Så du kanske vill behålla koll på är du uppåt eller 455 00:22:17,665 --> 00:22:19,100 du framsidan nedåt på kortet. 456 00:22:19,100 --> 00:22:23,420 På Facebook, till exempel, skulle du vill minnas var i nyhetsflödet 457 00:22:23,420 --> 00:22:25,870 är du eller liknande som är profil gör du just nu. 458 00:22:25,870 --> 00:22:30,127 >> På Messenger, precis vad text du skriver i inmatningsrutan, eller hur? 459 00:22:30,127 --> 00:22:31,710 Om du uppdaterar sidan, går det undan. 460 00:22:31,710 --> 00:22:32,793 Men du bryr mig egentligen inte. 461 00:22:32,793 --> 00:22:33,770 Det är bara tillfälligt. 462 00:22:33,770 --> 00:22:34,548 Ja? 463 00:22:34,548 --> 00:22:36,152 >> PUBLIK: [OHÖRBAR] 464 00:22:36,152 --> 00:22:38,360 NEEL Mehta: Som en blixt kort, som du kan se 465 00:22:38,360 --> 00:22:40,290 Frågan sidan eller svaret sidan? 466 00:22:40,290 --> 00:22:41,070 >> PUBLIK: OK. 467 00:22:41,070 --> 00:22:43,270 >> NEEL Mehta: Like a dubbelsidig Flashcard, eller hur? 468 00:22:43,270 --> 00:22:46,370 Ja, så du vill har denna idé nu 469 00:22:46,370 --> 00:22:50,370 Jag har egenskaper, som är som insatsvaror, men staten, som är tillfällig, eh, 470 00:22:50,370 --> 00:22:51,839 var du befinner dig på sidan, eller hur? 471 00:22:51,839 --> 00:22:54,380 Återigen, sa jag i Facebook Messenger, jag har liksom vilken person 472 00:22:54,380 --> 00:22:56,550 du tittar på Facebook eller som är profilen, eller hur? 473 00:22:56,550 --> 00:22:58,030 >> Detta är bara tillfälligt. 474 00:22:58,030 --> 00:23:01,200 Det är viktigt att visa användaren vad som händer, men uppdatera sidan. 475 00:23:01,200 --> 00:23:02,250 Det spelar egentligen ingen roll. 476 00:23:02,250 --> 00:23:04,530 Så det är tillfälligt tillstånd, så vi alla det tillstånd. 477 00:23:04,530 --> 00:23:06,250 >> Så, återigen, det finns statliga och rekvisita. 478 00:23:06,250 --> 00:23:09,084 Rekvisita är ingång ges från datakällan. 479 00:23:09,084 --> 00:23:10,250 Staten är precis som standard. 480 00:23:10,250 --> 00:23:13,700 Det är precis som saker som gör saken interaktiv. 481 00:23:13,700 --> 00:23:17,720 >> Så i vår CardView-- låt oss ha vår CardView-- så det var trevligt. 482 00:23:17,720 --> 00:23:21,420 Vad vi ska göra här, vi kommer röra CardView och endast CardView. 483 00:23:21,420 --> 00:23:25,105 Och så min vän som fick detta, de skulle inte märka någon skillnad. 484 00:23:25,105 --> 00:23:27,230 De skulle inte behöva ändra någon av sin egen kod, 485 00:23:27,230 --> 00:23:29,410 men de skulle se sin CardView blev trimmad upp. 486 00:23:29,410 --> 00:23:31,270 Det är en trevlig del om komponenter. 487 00:23:31,270 --> 00:23:35,290 >> OK, så i vår CardView, låt oss försöka och hålla reda på om vi fasa upp 488 00:23:35,290 --> 00:23:36,560 eller nedåt. 489 00:23:36,560 --> 00:23:40,480 I React vi gör detta genom att först specificera initialtillståndet. 490 00:23:40,480 --> 00:23:42,070 Varifrån kommer kortet börja? 491 00:23:42,070 --> 00:23:48,480 >> Så var en funktion som kallas getInitialState fungera, och vi återvänder ett objekt. 492 00:23:48,480 --> 00:23:53,310 Detta objekt innehåller något tillstånd, och en stat är bara en nyckel-värde-par. 493 00:23:53,310 --> 00:23:56,950 Liksom i instruera, har du en nyckel och en värde, har du namn är en sträng. 494 00:23:56,950 --> 00:24:01,410 >> I det här fallet, låt oss säga front är sant. 495 00:24:01,410 --> 00:24:03,760 Detta säger att vi har en stat. 496 00:24:03,760 --> 00:24:06,570 En komponent av tillståndet är ett attribut som heter front. 497 00:24:06,570 --> 00:24:09,649 [OHÖRBAR], så som standard, vi är på framsidan av kortet, 498 00:24:09,649 --> 00:24:11,440 och vi kan ändra detta som vi vänder kortet. 499 00:24:11,440 --> 00:24:13,380 Vettigt? 500 00:24:13,380 --> 00:24:18,190 >> OK, så i render, just nu, vi är visar frågan och svaret. 501 00:24:18,190 --> 00:24:20,860 Nu vad vi ska göra är att visa frågan 502 00:24:20,860 --> 00:24:24,370 om vi är på framsidan av kortet så svaret är för baksidan av kortet. 503 00:24:24,370 --> 00:24:26,850 Det är därför du alla göra kortet interaktiv. 504 00:24:26,850 --> 00:24:28,100 Så låt oss försöka och det här. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Tja, först bara göra en variabel. 507 00:24:33,620 --> 00:24:37,790 Vi kan fråga nu this.state.front. 508 00:24:37,790 --> 00:24:42,010 Vi tillgång ange samma vi tillgång rekvisita, så this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Om vi ​​är framför, sedan text är this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Om vi ​​är på framsidan av kort, vi kommer att försöka greppa 512 00:24:51,360 --> 00:24:52,485 Frågan från kortet. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 Annars, om vi är på baksidan av kortet, vad gör vi? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> PUBLIK: Svaret? 517 00:25:02,750 --> 00:25:05,041 >> NEEL Mehta: Japp, så text lika this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Men om du märker, använder vi staten att fatta ett beslut 520 00:25:10,930 --> 00:25:14,420 för nu komponenten kommer att se annorlunda 521 00:25:14,420 --> 00:25:16,710 bygger upp hur dessa interagerar med den. 522 00:25:16,710 --> 00:25:20,355 Så i stället för att skriva ut detta, Vi ska bara skriva ut texten. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, så nu, som ni ser, vi ser bara frågan. 525 00:25:28,650 --> 00:25:37,720 Och om jag ändrar staten här manuellt framåt är falsk får vi 42 tillbaka. 526 00:25:37,720 --> 00:25:39,720 >> Så, återigen, denna komponent har sin egen stat. 527 00:25:39,720 --> 00:25:43,440 Som en knapp vet om det har varit pressad eller inte, 528 00:25:43,440 --> 00:25:46,080 denna sak vet vad som finns på framsidan eller på baksidan. 529 00:25:46,080 --> 00:25:48,320 Som standard är det på framsidan. 530 00:25:48,320 --> 00:25:50,840 Och sedan om det är på framsidan, vi ska skriva ut frågan. 531 00:25:50,840 --> 00:25:53,106 Om det är på baksidan, vi ska skriva ut svaret. 532 00:25:53,106 --> 00:25:54,980 Så, återigen, den information ges är densamma. 533 00:25:54,980 --> 00:25:59,090 Det ser bara annorlunda baserat på hur du programmerar den. 534 00:25:59,090 --> 00:26:02,670 Så, till exempel, Facebook Messenger, även om du får samma datakälla, 535 00:26:02,670 --> 00:26:05,170 det kan se annorlunda ut eftersom staten är annorlunda. 536 00:26:05,170 --> 00:26:08,421 Du tittar på en annan person budskap. 537 00:26:08,421 --> 00:26:10,930 >> OK, det är så gott och bra, men nu vad är egentligen 538 00:26:10,930 --> 00:26:15,940 gör att vi kan ändra, om våra kort är framsidan eller baksidan. 539 00:26:15,940 --> 00:26:19,010 Vi kan göra detta genom att lägga till en flip knapp, en knapp för att kortet som 540 00:26:19,010 --> 00:26:22,950 kommer vända kortet om det är [OHÖRBAR]. 541 00:26:22,950 --> 00:26:31,770 Så låt oss lägga till en knapp här, detta knappen, och knappen kommer att säga luckan. 542 00:26:31,770 --> 00:26:35,650 >> Och så just nu är det inte göra någonting. 543 00:26:35,650 --> 00:26:37,075 Det ser bara trevligt. 544 00:26:37,075 --> 00:26:43,650 Vad vi kan göra är att vi kan lägga till en klick handler, lika onClick this.flip, 545 00:26:43,650 --> 00:26:44,820 och vi kommer att definiera flip senare. 546 00:26:44,820 --> 00:26:47,120 Men i princip, onClick är en funktion som 547 00:26:47,120 --> 00:26:48,675 anropas när användaren klickar på den. 548 00:26:48,675 --> 00:26:52,330 >> Så knappen vet när det har klickat. 549 00:26:52,330 --> 00:26:54,750 Gick det har klickat, det kommer att vända kortet. 550 00:26:54,750 --> 00:26:58,382 Det är ungefär som din pizza leverans killen. 551 00:26:58,382 --> 00:27:01,590 Du är som, okej, när någon kallar mig, jag ska leverera pizza, eller hur? 552 00:27:01,590 --> 00:27:03,420 >> Du registrera lyssnaren. 553 00:27:03,420 --> 00:27:04,530 Du lyssnar på en händelse. 554 00:27:04,530 --> 00:27:07,657 Du får kallas, och när händelse inträffar, du gör något. 555 00:27:07,657 --> 00:27:08,240 Du får pizza. 556 00:27:08,240 --> 00:27:11,480 I det här fallet, när man är klickar du vänder kortet. 557 00:27:11,480 --> 00:27:14,560 >> Och så vi måste definiera en funktion som kommer att vända kortet, 558 00:27:14,560 --> 00:27:17,930 så vi skriver denna rätt här, flip funktion. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 Och så vad tror du flip kommer att göra? 561 00:27:23,680 --> 00:27:27,180 Även detta blir kallas när vi klickar luckan knappen. 562 00:27:27,180 --> 00:27:29,406 Vad ska funktionen flip göra? 563 00:27:29,406 --> 00:27:34,136 >> PUBLIK: Ändra this.state.front från sant till falskt, falskt true. 564 00:27:34,136 --> 00:27:38,420 >> NEEL Mehta: Japp, så vidta this.front är-- front tillståndet är. 565 00:27:38,420 --> 00:27:40,930 Ta front staten, om det är sant, gör det falskt. 566 00:27:40,930 --> 00:27:42,530 Om det är falskt, gör det sant, eller hur? 567 00:27:42,530 --> 00:27:45,330 Så låt oss prova det. 568 00:27:45,330 --> 00:27:48,240 >> Du kan inte ändra tillstånd bara genom att göra this.state. 569 00:27:48,240 --> 00:27:50,380 Du kan inte göra detta. 570 00:27:50,380 --> 00:27:52,030 Du kan inte göra det. 571 00:27:52,030 --> 00:27:55,810 Du måste använda en funktion kallas this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Så du kan säga this.setState front kolon det där igen, utropet 573 00:28:03,230 --> 00:28:04,330 punkt innebär motsatsen. 574 00:28:04,330 --> 00:28:07,420 Jag antar att om detta. state.front är sant, kommer den att falskt. 575 00:28:07,420 --> 00:28:09,170 Så vi ska ställa staten från sant till falskt. 576 00:28:09,170 --> 00:28:11,430 Om det är falskt, vi ska ställa in den false till true. 577 00:28:11,430 --> 00:28:17,210 >> Bara märker att vi sätter och få något annorlunda, och så låt oss försöka detta. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, titta på detta. 579 00:28:18,675 --> 00:28:21,810 Luckan knappen kommer nu växla fram och tillbaka tillståndet. 580 00:28:21,810 --> 00:28:24,990 >> Och så här är där du ser en lite av magin i React. 581 00:28:24,990 --> 00:28:28,420 Som vi aldrig veta det att åter göra. 582 00:28:28,420 --> 00:28:30,910 Vi berättade det aldrig rita något. 583 00:28:30,910 --> 00:28:32,630 Om du gör detta utan Reagera, skulle du 584 00:28:32,630 --> 00:28:34,588 har att-- gillar när flip klickar på knappen, 585 00:28:34,588 --> 00:28:37,290 du måste berätta det för manuellt åter göra, eller hur? 586 00:28:37,290 --> 00:28:43,050 >> React är verkligen svalna i att om du ge det en viss stat och egenskaper, 587 00:28:43,050 --> 00:28:45,760 det kommer alltid att rendera exakt samma sak. 588 00:28:45,760 --> 00:28:48,690 Och så när vi någonsin vi ändrar staten och egenskaper, 589 00:28:48,690 --> 00:28:50,819 reagerar bara re-gör det hela. 590 00:28:50,819 --> 00:28:52,860 Det vet att det finns en ett-till-ett korrespondens 591 00:28:52,860 --> 00:28:57,270 mellan staten och parameter och HTML. 592 00:28:57,270 --> 00:29:00,110 Så när någon av dem ändras med hjälp av en uppsättning tillstånd, 593 00:29:00,110 --> 00:29:03,750 det kommer att förändra hur lön på nytt återges. 594 00:29:03,750 --> 00:29:06,650 Och så i princip React är som väntar på dig att ändra. 595 00:29:06,650 --> 00:29:09,870 >> Närhelst det ändrar något, det ska åter återge hela sidan. 596 00:29:09,870 --> 00:29:12,480 Och om det låter ineffektivt, det beror på att det skulle vara, 597 00:29:12,480 --> 00:29:15,050 men reagerar använder en sak kallas Shadow DOM. 598 00:29:15,050 --> 00:29:19,950 I stället för att dra sidan direkt, det håller den virtuella HTML träd i minnet. 599 00:29:19,950 --> 00:29:23,620 >> Du vet, HTML är som ett träd, som en hierarkisk datastruktur. 600 00:29:23,620 --> 00:29:28,990 Det håller en falsk träd i minnet, och när du uppdaterar sidan, 601 00:29:28,990 --> 00:29:31,940 det ska rita en bluff träd, och det kommer att beräkna 602 00:29:31,940 --> 00:29:35,120 vad ändra den behöver för att göra den för att göra de två träden lika. 603 00:29:35,120 --> 00:29:38,540 Så i grund och botten, det praktiskt taget re-gör en hel del. 604 00:29:38,540 --> 00:29:41,540 Och då är det bara gillar ändrar webbplatsen på små justeringar som behövs, 605 00:29:41,540 --> 00:29:44,240 så det är mycket, mycket, mycket effektiv. 606 00:29:44,240 --> 00:29:46,970 >> Så i princip React kommer när du ändrar något, 607 00:29:46,970 --> 00:29:49,010 det ska åter rendera sidan virtuellt. 608 00:29:49,010 --> 00:29:52,830 Det kommer att räkna ut vad behöver jag ändras för att den verkliga sidan återspeglar 609 00:29:52,830 --> 00:29:55,602 den virtuella sida, och det kommer att göra det. 610 00:29:55,602 --> 00:29:56,560 Det är den virtuella DOM. 611 00:29:56,560 --> 00:29:59,350 Det är en av de största funktioner i React. 612 00:29:59,350 --> 00:30:00,880 >> Betyder det vettigt? 613 00:30:00,880 --> 00:30:01,540 Några frågor? 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 >> PUBLIK: Hur jämför fortfarande MVC 617 00:30:08,969 --> 00:30:10,760 att vi pratade om innan liknande resurser. 618 00:30:10,760 --> 00:30:13,527 >> NEEL Mehta: Ja, frågan är hur fungerar den jämfört med MVC? 619 00:30:13,527 --> 00:30:14,610 Du frågade om resurser. 620 00:30:14,610 --> 00:30:16,445 Nåväl, låt oss tala om hur det fungerar. 621 00:30:16,445 --> 00:30:18,190 >> I MVC, skulle du uppdatera modellen. 622 00:30:18,190 --> 00:30:20,560 I det här fallet skulle vi ha ett kort modell. 623 00:30:20,560 --> 00:30:24,540 Vyn skulle ha flip-knappen och kontroll 624 00:30:24,540 --> 00:30:26,310 skulle ha luckan funktionen. 625 00:30:26,310 --> 00:30:28,450 Så att vyn skulle berätta controller att vända luckan. 626 00:30:28,450 --> 00:30:30,370 Flip skulle berätta modell för att ändra, eller hur? 627 00:30:30,370 --> 00:30:33,915 >> Och så när du gör en MVC, du lyssna för modellen att ändras, 628 00:30:33,915 --> 00:30:37,150 och du åter göra vyn i enlighet därmed. 629 00:30:37,150 --> 00:30:39,210 Eller om du bara måste gilla har regulatorn. 630 00:30:39,210 --> 00:30:42,418 Vänta modellen att ändra, och därefter välja och vraka en del av som en sak 631 00:30:42,418 --> 00:30:44,032 att förändra. 632 00:30:44,032 --> 00:30:45,740 Här har vi en sak, men i en stor app, 633 00:30:45,740 --> 00:30:48,510 du måste vilja ihåg vad förändringen i varje enskild plats, 634 00:30:48,510 --> 00:30:50,290 så det är lite irriterande. 635 00:30:50,290 --> 00:30:53,670 Och så React är trevligt eftersom det har en skugga Dom. 636 00:30:53,670 --> 00:30:56,040 Det har råd att bara skriva om hela saken. 637 00:30:56,040 --> 00:30:58,680 Du behöver inte selektivt som gissa vad att uppdatera. 638 00:30:58,680 --> 00:31:02,186 >> På Facebook om du vill får ett nytt meddelande, i MVC, 639 00:31:02,186 --> 00:31:04,060 du måste komma ihåg, OK, ändra saker 640 00:31:04,060 --> 00:31:06,260 på toppen av den sida, meddelandeikonen. 641 00:31:06,260 --> 00:31:08,290 Också pop ett nytt fönster längst ner. 642 00:31:08,290 --> 00:31:10,070 Gör också en ny sak i det fönstret. 643 00:31:10,070 --> 00:31:11,060 Också spela ett ljud. 644 00:31:11,060 --> 00:31:13,150 >> Det är en massa saker gå ut samtidigt. 645 00:31:13,150 --> 00:31:15,320 Och så om du inte har en skugga Dom, skulle du 646 00:31:15,320 --> 00:31:18,740 måste göra det manuellt eftersom du kan inte bli av med hela sidan. 647 00:31:18,740 --> 00:31:21,430 Du har inte råd att, så att du har att ändra varje sak manuellt 648 00:31:21,430 --> 00:31:23,990 vilket är verkligen irriterande i MVC. 649 00:31:23,990 --> 00:31:27,640 >> Så för att vara sparsam, de selektivt 650 00:31:27,640 --> 00:31:30,750 uppdatera sidan, vilket är effektiv, men också irriterande. 651 00:31:30,750 --> 00:31:34,002 I React, på grund av Shadow Dom får du båda saker gratis. 652 00:31:34,002 --> 00:31:35,710 Det är effektivt eftersom av Shadow Dom. 653 00:31:35,710 --> 00:31:37,210 Flaskhalsen är att uppdatera sidan. 654 00:31:37,210 --> 00:31:40,292 Det gör inte trädet manipulation. 655 00:31:40,292 --> 00:31:41,250 Du får effektivitet. 656 00:31:41,250 --> 00:31:45,420 Du får också användarvänlighet eftersom Om du bara skriva om hela sidan, 657 00:31:45,420 --> 00:31:48,970 men du bara vet, okej, saker kommer att vara på sidan någonstans. 658 00:31:48,970 --> 00:31:51,180 Det kan vara på ett annat ställe, men det kommer att vara på sidan, eller hur? 659 00:31:51,180 --> 00:31:52,860 Så du bara re-renderade hela saken så gott, 660 00:31:52,860 --> 00:31:55,540 och du kan göra ett par ändringar i själva sidan. 661 00:31:55,540 --> 00:31:57,850 >> Så, återigen, i MVC du skulle behöva välja 662 00:31:57,850 --> 00:32:01,840 mellan användarvänlighet och effektivitet, och Reagera, får du både och. 663 00:32:01,840 --> 00:32:04,020 Så det är bättre. 664 00:32:04,020 --> 00:32:05,220 Vettigt? 665 00:32:05,220 --> 00:32:06,676 Fast. 666 00:32:06,676 --> 00:32:12,080 >> OK, så låt oss se låt oss tala lite om steg 4, 667 00:32:12,080 --> 00:32:14,740 hur vi kan bädda komponenter. 668 00:32:14,740 --> 00:32:16,260 Så vi har här just nu. 669 00:32:16,260 --> 00:32:19,420 Vi har vår cool liten knapp. 670 00:32:19,420 --> 00:32:23,157 Vi kan vända tillbaka och ut, och det är allt den gör. 671 00:32:23,157 --> 00:32:24,990 Låt oss säga att vi vill har en annan komponent. 672 00:32:24,990 --> 00:32:28,730 Låt oss säga vår Flashcard app bör innehålla en förteckning över alla korten 673 00:32:28,730 --> 00:32:31,520 som du har, så det innebär att vi bör ha en annan komponent. 674 00:32:31,520 --> 00:32:32,970 Tja, kanske kalla det en listvy. 675 00:32:32,970 --> 00:32:36,200 Låt oss göra en listvy som samexisterar med den CardView, 676 00:32:36,200 --> 00:32:39,680 och detta listvy och CardView kommer att gilla arbeta tillsammans. 677 00:32:39,680 --> 00:32:43,190 Och du kan kombinera dem att göra vår app för dig. 678 00:32:43,190 --> 00:32:45,160 >> Så först, låt oss göra en några fler kort rätt. 679 00:32:45,160 --> 00:32:46,370 Låt oss säga, vilka kort? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 Och bara så att jag inte behöver tråka ut er med att skriva in den, 682 00:32:51,910 --> 00:32:53,410 Jag kommer bara att kopiera den härifrån. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 Och så ska jag inte ge det bara ett kort. 685 00:33:03,580 --> 00:33:06,910 Jag ska ge det en rad av kort. 686 00:33:06,910 --> 00:33:10,240 Så först apps kommer att bryta för nu. 687 00:33:10,240 --> 00:33:14,717 Okej, så vi kommer att göra detta kunna hantera flera kort. 688 00:33:14,717 --> 00:33:17,800 Så först, vi kommer att ge det, inte bara ett kort utan en matris med kort, 689 00:33:17,800 --> 00:33:18,700 som en lista med kort. 690 00:33:18,700 --> 00:33:20,980 Och i detta fall, har vi tre av dem. 691 00:33:20,980 --> 00:33:27,280 >> Okej, så så app är kommer att få en lista kort, 692 00:33:27,280 --> 00:33:29,870 och det kommer att avgöra vilka en visa för CardView. 693 00:33:29,870 --> 00:33:33,740 Den CardView kan bara render ett kort, men appen 694 00:33:33,740 --> 00:33:37,610 får en lista över alla kort, eller hur? 695 00:33:37,610 --> 00:33:40,820 >> Så när du räkna ut ett kort som ska ges till CardView, 696 00:33:40,820 --> 00:33:44,660 hur skulle du antar att du skulle kunna att fatta beslut om vilket kort 697 00:33:44,660 --> 00:33:47,064 att visa? 698 00:33:47,064 --> 00:33:49,980 För att ge er en ledtråd, det är tillfälligt Du kommer att visa ett visst kort. 699 00:33:49,980 --> 00:33:53,260 Om du uppdaterar sidan, kommer du bara gå tillbaka till det första kortet. 700 00:33:53,260 --> 00:33:55,464 Det är OK eftersom det är tillfälligt. 701 00:33:55,464 --> 00:33:56,630 Vilken teknik kan vi använda? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> PUBLIK: Du kan göra en variabel så precis som du hade front. 704 00:34:08,760 --> 00:34:11,989 Är detta sant, du kan har nuvarande kort är lika med 1? 705 00:34:11,989 --> 00:34:14,150 >> NEEL Mehta: Ja, så vi vill ha tillstånd, eller hur? 706 00:34:14,150 --> 00:34:16,080 Du skulle använda tillstånd i komponent för att räkna ut 707 00:34:16,080 --> 00:34:17,288 vilket kort vill vi få. 708 00:34:17,288 --> 00:34:19,290 Som vi har en lista över alla kort, vi ska 709 00:34:19,290 --> 00:34:21,630 använda staten för att räkna ut en av de första kortet, 710 00:34:21,630 --> 00:34:23,710 andra kort, tredje kort, och så vidare. 711 00:34:23,710 --> 00:34:28,760 >> Så en app så en app kommer att få en ha getInitialState funktionen, 712 00:34:28,760 --> 00:34:35,020 getInitialState funktion avkastning. 713 00:34:35,020 --> 00:34:39,929 Och vi ska bara säga activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Så nu vår app har sin egen stat. 715 00:34:42,889 --> 00:34:47,179 >> Och så nu gör, räkna ut ett kort, låt oss bara gå till arrayen 716 00:34:47,179 --> 00:34:49,969 och ta tag i saken på detta index. 717 00:34:49,969 --> 00:34:53,580 Välj kort lika 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 här, rekvisita och staten faktiskt arbetar tillsammans. 720 00:35:00,162 --> 00:35:08,990 Så nu när vi har vår activeCard, vi kallar det activeCard, 721 00:35:08,990 --> 00:35:10,470 och låt oss se om det fungerar. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [OHÖRBAR] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Åh, det var en text fel. 726 00:35:44,900 --> 00:35:45,400 Ah. 727 00:35:45,400 --> 00:35:51,420 728 00:35:51,420 --> 00:35:54,840 >> Cool, yep, så nu var vi tillbaka där vi var förut, eller hur? 729 00:35:54,840 --> 00:35:57,100 Samma gamla program utom Nu kan vi stödja 730 00:35:57,100 --> 00:35:59,390 en lista med kort, inte bara ett kort. 731 00:35:59,390 --> 00:36:04,130 Och nu, återigen, om vi ändrar activeIndex, kan vi gå från 0 till 1, 732 00:36:04,130 --> 00:36:07,330 och nu när andra kort, och sedan gick vi till 0. 733 00:36:07,330 --> 00:36:10,390 Så här är en ny trimmad version av vår. 734 00:36:10,390 --> 00:36:16,000 >> OK, så nu ska vi ha en listvy som visar alla kort i ditt program, 735 00:36:16,000 --> 00:36:19,980 så vi kommer att göra en ny komponent som kallas listvy. 736 00:36:19,980 --> 00:36:22,155 Låt listview lika react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Så vi vill göra en oordnad lista med ett listobjekt för varje kort. 739 00:36:38,800 --> 00:36:41,490 Och så har vi en massa kort. 740 00:36:41,490 --> 00:36:44,990 Vi vill ha en listobjekt för varje kort, eller hur? 741 00:36:44,990 --> 00:36:47,490 Vi skulle kunna göra en for-loop eller något att göra en ny post i listan. 742 00:36:47,490 --> 00:36:50,522 Men det sätt som du gör det i React, använda något som heter karta. 743 00:36:50,522 --> 00:36:57,150 Map är ett verktyg eller en funktion du använder att för varje objekt, kör någon funktion, 744 00:36:57,150 --> 00:36:59,510 tar returvärde, och ger dig det tillbaka. 745 00:36:59,510 --> 00:37:06,310 >> Så som ett exempel, har vi arrayen 1, 2, 3.map function-- och detta 746 00:37:06,310 --> 00:37:12,120 är en förkortning för en function-- x arrow x gånger x. 747 00:37:12,120 --> 00:37:16,110 Det säger, för varje nummer i 1, 2, 3, ta den. 748 00:37:16,110 --> 00:37:17,800 Square den och ge den tillbaka. 749 00:37:17,800 --> 00:37:22,090 Så vad tror du 1 2, 3.map x går till x gånger 750 00:37:22,090 --> 00:37:25,480 x ger dig tillbaka med tanke på att denna funktion är 751 00:37:25,480 --> 00:37:27,680 köras på varje element i den arrayen. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> Publik: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> NEEL Mehta: Japp, 1, 4, 9 eftersom du gör 1 gånger 1. 755 00:37:35,709 --> 00:37:36,500 Det ger dig en. 756 00:37:36,500 --> 00:37:37,690 Det är det första elementet. 757 00:37:37,690 --> 00:37:38,530 >> 2 gånger 2 är 4. 758 00:37:38,530 --> 00:37:39,570 Det är ett andra element. 759 00:37:39,570 --> 00:37:40,310 3 gånger 3 är 9. 760 00:37:40,310 --> 00:37:41,540 Det är ett tredje element. 761 00:37:41,540 --> 00:37:42,640 Vettigt? 762 00:37:42,640 --> 00:37:45,015 Så karta har en teknik som användning i funktionella programmerare, 763 00:37:45,015 --> 00:37:48,090 ny stil av programmering att göra något 764 00:37:48,090 --> 00:37:50,500 till varje element i listan. 765 00:37:50,500 --> 00:37:51,970 Och så detta låter bekant. 766 00:37:51,970 --> 00:37:53,370 Vi har en lista med kort. 767 00:37:53,370 --> 00:37:56,860 Vi vill få en post i listan för varje en, så vi ska bara använda kartan här. 768 00:37:56,860 --> 00:38:00,250 Vi kommer att säga, låt listan jämlikar this.props, kort, karta. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> Och så med tanke på ett kort, vi är kommer att generera en post i listan 771 00:38:15,070 --> 00:38:17,580 med att kortets innehåll sida av den. 772 00:38:17,580 --> 00:38:20,660 Låt oss bara säga att vi vill ge ut korten ifråga så card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Så här listan innehåller ett uppsättning av LI: s eller listobjekt 775 00:38:30,649 --> 00:38:32,440 där det finns en lista objekt för varje kort, 776 00:38:32,440 --> 00:38:35,150 och som innehåller kort fråga. 777 00:38:35,150 --> 00:38:37,640 Vettigt? 778 00:38:37,640 --> 00:38:39,450 >> Cool, så nu ska vi faktiskt skriva ut det. 779 00:38:39,450 --> 00:38:46,521 Så vi kommer att återkomma en ul. 780 00:38:46,521 --> 00:38:49,020 Insidan som oordnad lista, Vi ska bara hålla hela listan 781 00:38:49,020 --> 00:38:49,890 att de gav oss. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Häftigt. 784 00:38:53,350 --> 00:38:56,060 >> Okej, så nu detta listvy fungerar bara hitta. 785 00:38:56,060 --> 00:38:59,842 Eventuella frågor om listvy? 786 00:38:59,842 --> 00:39:01,270 Du har en massa kort. 787 00:39:01,270 --> 00:39:02,800 Du gör ett listobjekt för varje kort. 788 00:39:02,800 --> 00:39:05,466 Och du lägger dem i en oordnad lista, och du ger det tillbaka. 789 00:39:05,466 --> 00:39:09,410 Så nu ska vi agera så vi bädda detta inne i vår app, 790 00:39:09,410 --> 00:39:14,310 så att vi kan göra det här, listvy. 791 00:39:14,310 --> 00:39:17,070 Vilka argument har vi övergå till listvy? 792 00:39:17,070 --> 00:39:18,320 Vilka egenskaper ger vi det? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Kom ihåg att om du ger det en massa kort, 795 00:39:26,860 --> 00:39:29,590 det ska göra listan visa för dessa kort. 796 00:39:29,590 --> 00:39:32,267 Så vad skulle vi passerar här som argument? 797 00:39:32,267 --> 00:39:33,350 PUBLIK: En lista med kort? 798 00:39:33,350 --> 00:39:37,130 NEEL Mehta: Ja, så kort lika this.props.cards, eller hur? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 Och så det enda problemet är att du bara kan 801 00:39:44,370 --> 00:39:48,600 vände en toppnivå inslag i render, så du har att linda in det i en div. 802 00:39:48,600 --> 00:39:49,100 Det är konstigt. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Så låt oss se om det. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Betyder det att fungera? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Japp, där du går. 809 00:40:31,030 --> 00:40:33,700 Så nu har vi en lista kort i botten, 810 00:40:33,700 --> 00:40:36,180 och sedan har vi vår CardView sig på toppen, 811 00:40:36,180 --> 00:40:40,486 och det kommer att växla mellan de två sidorna av kortet. 812 00:40:40,486 --> 00:40:42,610 Nu gör det vettigt hur jag 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 två komponenter. 815 00:40:46,790 --> 00:40:49,666 Den första komponenten tryck ut varje kort i listan. 816 00:40:49,666 --> 00:40:50,540 Det är listvyn. 817 00:40:50,540 --> 00:40:54,770 Och den andra komponenten skriver ut just detta kort. 818 00:40:54,770 --> 00:40:58,840 Om du ger det ett visst kort, det ska skriva ut information om kortet 819 00:40:58,840 --> 00:41:01,870 och låter dig bläddra fram och tillbaka. 820 00:41:01,870 --> 00:41:05,850 >> Så om vi vill, kan vi försöka prata om att lägga till några nya funktioner för detta. 821 00:41:05,850 --> 00:41:09,482 Annars kan vi prata lite mer om av hastigheten av reaktor, 822 00:41:09,482 --> 00:41:11,190 eller så kan vi svara frågor du kan ha 823 00:41:11,190 --> 00:41:15,050 eftersom dessa är alla av kärndelarna av reagerar som jag vill prata om. 824 00:41:15,050 --> 00:41:16,540 Vi kan gå vidare. 825 00:41:16,540 --> 00:41:17,590 Vi kan svara på frågor. 826 00:41:17,590 --> 00:41:18,560 Vad du än vill. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> PUBLIK: Kan man använda JSX i normalt JavaScript? 829 00:41:24,205 --> 00:41:27,150 Eller är det något som kom med [OHÖRBAR]? 830 00:41:27,150 --> 00:41:30,760 >> NEEL Mehta: Frågan är burk du använder JSX med normalt JavaScript? 831 00:41:30,760 --> 00:41:32,620 Svaret är ja. 832 00:41:32,620 --> 00:41:41,070 JSX är bara ett sätt att det tar din JavaScript som har HTML inne i det, 833 00:41:41,070 --> 00:41:44,215 och det sammanställer i JavaScript som inte har HTML inne i den. 834 00:41:44,215 --> 00:41:47,880 Så märker that-- så märker här. 835 00:41:47,880 --> 00:41:50,820 Det ser ut som du har som div och du har saker inne i den. 836 00:41:50,820 --> 00:41:54,970 >> Som sammanställer till JavaScript som som genererar samma sak. 837 00:41:54,970 --> 00:41:59,590 Jag antar att vad jag säger är att JSX är bara en syntaktisk, som det är 838 00:41:59,590 --> 00:42:03,530 en förprocessor för JavaScript mycket som PHP är en preprocessor för HTML. 839 00:42:03,530 --> 00:42:05,490 JSC är en preprocessor för JavaScript som låter 840 00:42:05,490 --> 00:42:12,970 du sätter HTML insidan av JavaScript. 841 00:42:12,970 --> 00:42:16,425 Och så om du har rätt transformator vilket är något som heter [OHÖRBAR] 842 00:42:16,425 --> 00:42:17,300 vilket kommer att förvandla. 843 00:42:17,300 --> 00:42:19,360 Rätt preprocessor, det kommer att låta dig göra det. 844 00:42:19,360 --> 00:42:20,235 >> PUBLIK: [OHÖRBAR] 845 00:42:20,235 --> 00:42:23,026 NEEL Mehta: Vanligtvis behöver du inte att sätta HTML inne JavaScript 846 00:42:23,026 --> 00:42:24,110 såvida inte din gör React. 847 00:42:24,110 --> 00:42:27,146 Men du kan göra det ändå. 848 00:42:27,146 --> 00:42:27,645 Japp? 849 00:42:27,645 --> 00:42:29,353 >> PUBLIK: Jag tror att du hade beskrivit React 850 00:42:29,353 --> 00:42:31,970 som en funktionell programmering språk. 851 00:42:31,970 --> 00:42:35,646 Vi har fått lära C i CS50. 852 00:42:35,646 --> 00:42:38,032 Är C också en funktionellt språk? 853 00:42:38,032 --> 00:42:39,990 NEEL Mehta: Så frågan handlar om funktionell 854 00:42:39,990 --> 00:42:43,010 kontra en annan sak som kallas imperativ eller processuella programmering. 855 00:42:43,010 --> 00:42:44,820 Det finns två typer av program populära. 856 00:42:44,820 --> 00:42:48,550 Man kallas procedur, som handlar om som gör kommandon 857 00:42:48,550 --> 00:42:51,510 och en är funktionell, vilket är allt om att ha funktioner och med 858 00:42:51,510 --> 00:42:52,930 inmatning och utmatning av dem. 859 00:42:52,930 --> 00:42:55,930 React är en funktionell paradigm. 860 00:42:55,930 --> 00:42:58,010 C är en mycket procedur paradigm. 861 00:42:58,010 --> 00:43:02,360 >> Och som ett exempel, C t.ex. du behöver inte göra det deklarativa sätt 862 00:43:02,360 --> 00:43:04,390 att göra programmet, eller hur? 863 00:43:04,390 --> 00:43:06,826 Du måste säga, skriva ut. 864 00:43:06,826 --> 00:43:07,950 Ändra denna datastruktur. 865 00:43:07,950 --> 00:43:08,530 Skriv ut. 866 00:43:08,530 --> 00:43:10,160 Det handlar om kommandon. 867 00:43:10,160 --> 00:43:12,640 >> I React, det finns inte att många kommandon. 868 00:43:12,640 --> 00:43:15,145 Det handlar om att ha komponenter du sätter ihop. 869 00:43:15,145 --> 00:43:16,300 De är liknande funktioner. 870 00:43:16,300 --> 00:43:26,360 Du har som en funktion kallas CardView, 871 00:43:26,360 --> 00:43:28,680 som är en funktion som har ingång, utgång, 872 00:43:28,680 --> 00:43:30,660 och så React är alla om denna filosofi 873 00:43:30,660 --> 00:43:32,700 oss having-- du har data. 874 00:43:32,700 --> 00:43:34,910 Du passerar det genom denna algoritm, och det kommer 875 00:43:34,910 --> 00:43:36,800 output HTML som du bara tryckt på sidan, 876 00:43:36,800 --> 00:43:39,180 och så du måste bygga det bit för bit. 877 00:43:39,180 --> 00:43:42,800 >> Så att dra en metafor för vad Jag sa förut, vet du hur 878 00:43:42,800 --> 00:43:47,050 på Facebook om du får ett meddelande, och du väljer vilka delar att uppdatera, 879 00:43:47,050 --> 00:43:47,882 det är processuella. 880 00:43:47,882 --> 00:43:48,840 Det är absolut nödvändigt, eller hur? 881 00:43:48,840 --> 00:43:49,806 OK, fick jag ett meddelande. 882 00:43:49,806 --> 00:43:50,930 Låt oss ändra konto där. 883 00:43:50,930 --> 00:43:52,110 >> Låt oss pop ett fönster här. 884 00:43:52,110 --> 00:43:52,780 Låt oss ändra konto där. 885 00:43:52,780 --> 00:43:53,700 Låt oss dra det här. 886 00:43:53,700 --> 00:43:55,220 Det är en processuell tillvägagångssätt. 887 00:43:55,220 --> 00:44:00,240 >> Det är vad saker som Vinkel, Boost, Backbone, andra ramar använder. 888 00:44:00,240 --> 00:44:01,200 React är funktionell. 889 00:44:01,200 --> 00:44:03,324 Det är ett väldigt annorlunda sätt att tänka på saker. 890 00:44:03,324 --> 00:44:07,950 Det tar denna idé om låt oss ha funktioner eller algoritmer som kommer du 891 00:44:07,950 --> 00:44:08,800 ge den data. 892 00:44:08,800 --> 00:44:11,820 Det kommer att spotta ut vad det bör vara, och datorn 893 00:44:11,820 --> 00:44:13,490 tar hand om att väga upp. 894 00:44:13,490 --> 00:44:15,890 Du behöver inte hantera det själv. 895 00:44:15,890 --> 00:44:18,470 Gör det lite vettigt? 896 00:44:18,470 --> 00:44:18,970 Ja? 897 00:44:18,970 --> 00:44:24,180 >> Publik: I ett funktionellt språk, allt händer på en gång? 898 00:44:24,180 --> 00:44:26,800 >> NEEL Mehta: Nej, det händer saker i ordning. 899 00:44:26,800 --> 00:44:29,320 Som här finns det fortfarande ordning, men det gör inte 900 00:44:29,320 --> 00:44:32,390 hända i ordning som berömma, kommando, kommando. 901 00:44:32,390 --> 00:44:36,459 Det händer i ordning funktionen ger dig utgång. 902 00:44:36,459 --> 00:44:37,750 Sätt in det i en annan funktion. 903 00:44:37,750 --> 00:44:39,550 Sätt in det i en annan funktion, en annan funktion. 904 00:44:39,550 --> 00:44:41,470 >> Om du gör CS51, kommer du lära funktionella program 905 00:44:41,470 --> 00:44:42,886 lite ur ramen för denna. 906 00:44:42,886 --> 00:44:45,090 Men i grund och botten, vad som gör Reagera cool är inte bara 907 00:44:45,090 --> 00:44:46,840 den enkelriktade dataflöde och den virtuella Dom, 908 00:44:46,840 --> 00:44:48,700 men också denna idé om funktionell programmering. 909 00:44:48,700 --> 00:44:51,720 Och funktionell programmering är mycket lätt att komponera och göra coola saker ur, 910 00:44:51,720 --> 00:44:53,844 och det är väldigt lätt att tänka om och resonera om. 911 00:44:53,844 --> 00:44:55,450 Så det är en annan bra drag av React. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Fler frågor? 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 >> Målgrupp: Um, varför skulle du använda låt i motsats till var? 917 00:45:06,840 --> 00:45:10,450 >> NEEL Mehta: Så frågan är Varför använder ni låter i stället för var? 918 00:45:10,450 --> 00:45:13,220 Detta är något som heter ES6 eller ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Det är den nya versionen av JavaScript. 920 00:45:15,820 --> 00:45:19,050 Det finns en massa tekniska skäl, men låt är en bättre version av var. 921 00:45:19,050 --> 00:45:20,724 >> Det är hur du deklarerar variabler. 922 00:45:20,724 --> 00:45:21,390 Du kan använda låta. 923 00:45:21,390 --> 00:45:22,140 Du kan använda var. 924 00:45:22,140 --> 00:45:23,825 Låt har ett gäng teknisk reasons-- du kan se dem 925 00:45:23,825 --> 00:45:25,610 upp later-- till varför det är bättre. 926 00:45:25,610 --> 00:45:28,780 I grund och botten, har några trevliga ES6 ny syntax, några nya funktioner 927 00:45:28,780 --> 00:45:30,720 ovanpå den gamla JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Så vi har som fem minuter. 929 00:45:32,782 --> 00:45:34,990 Jag ville bara tala om en sak riktigt snabbt. 930 00:45:34,990 --> 00:45:36,450 Om du hade några frågor, låt oss prata om det efter detta. 931 00:45:36,450 --> 00:45:38,366 Men bara så det blir fångad på bild, jag bara 932 00:45:38,366 --> 00:45:41,550 vill prata lite om hur du faktiskt använda Reagera i dina appar. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Om du går här, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 detta är hemsidan för Reagera, och Det ska visa dig hur du faktiskt använder 936 00:46:03,320 --> 00:46:05,320 Reagera på dina sidor. 937 00:46:05,320 --> 00:46:08,845 I grund och botten är det en lite komplicerade försöker installera React. 938 00:46:08,845 --> 00:46:12,300 Det är inte så lätt som du bara dra och släppa en JavaScript där. 939 00:46:12,300 --> 00:46:15,890 >> Du måste ha din transformator inrättas, vilket kommer som det gjorde tidigare, 940 00:46:15,890 --> 00:46:18,120 förvandla din JSX till den normala JavaScript. 941 00:46:18,120 --> 00:46:21,030 Du måste sak som kommer kompilera du ES6 till det normala. 942 00:46:21,030 --> 00:46:24,720 JavaScript finns det en hel del att flytta delar som du måste göra, så det finns en sak 943 00:46:24,720 --> 00:46:27,200 kallas Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 Och detta är en kommandorad verktyg som kommer hjälpa dig scaffold ut din React 945 00:46:31,110 --> 00:46:32,380 projekt lätt. 946 00:46:32,380 --> 00:46:38,660 >> Så du kan läsa om här senare, men det finns några verktyg 947 00:46:38,660 --> 00:46:40,160 att Yeoman erbjuder. 948 00:46:40,160 --> 00:46:43,280 De kommer att låta dig skapa en React app med allt inbyggt. 949 00:46:43,280 --> 00:46:46,030 Som det ska har byggt i komponenter inbyggd. 950 00:46:46,030 --> 00:46:47,880 Det kommer att ha din transformator inbyggd. 951 00:46:47,880 --> 00:46:50,699 De har en hel del kyla grejer inbyggd automatiskt 952 00:46:50,699 --> 00:46:52,240 med hjälp av dessa saker som kallas generatorer. 953 00:46:52,240 --> 00:46:54,620 >> Så läs om det här om du vill. 954 00:46:54,620 --> 00:46:59,110 Bara gå på Yeoman, Y-E-O-M-A-N, och du kan hitta generatorer som dessa. 955 00:46:59,110 --> 00:47:01,263 Och med generatorer som dessa, du vill bara en 956 00:47:01,263 --> 00:47:03,010 är ett par kommandorad kommandon. 957 00:47:03,010 --> 00:47:05,530 Det kommer scaffold ut ett Hela React app för dig. 958 00:47:05,530 --> 00:47:10,470 Det kommer att få all den manuella rörledningar, och tråkiga jobbet gjort för dig, 959 00:47:10,470 --> 00:47:13,010 och det är därför du bara fokusera på bara skriva in React. 960 00:47:13,010 --> 00:47:16,739 >> Så i princip bygga en Reagera app är nontrivial. 961 00:47:16,739 --> 00:47:19,530 Det är trådbundna tillsammans, men det är verktyg som kommer att göra det åt dig. 962 00:47:19,530 --> 00:47:23,070 Så om du vill göra en Reagera app, prova att göra det på det sättet. 963 00:47:23,070 --> 00:47:26,360 Om du bara vill experimentera, Du kan prova att använda denna CodePen 964 00:47:26,360 --> 00:47:28,550 eftersom denna CodePen har alla reagerar ledningar. 965 00:47:28,550 --> 00:47:30,240 Jag har gjort allt arbete för dig redan. 966 00:47:30,240 --> 00:47:34,610 >> Så om du vill göra som en produktion att frigöra React app, 967 00:47:34,610 --> 00:47:37,220 prova en av dessa generatorer. 968 00:47:37,220 --> 00:47:40,240 Om du bara vill spela runt, är det ofta värt att bara 969 00:47:40,240 --> 00:47:44,490 som prova att spela runt på CodePen här. 970 00:47:44,490 --> 00:47:45,470 Låter bra? 971 00:47:45,470 --> 00:47:45,970 Häftigt. 972 00:47:45,970 --> 00:47:47,890 >> Så det är allt jag har. 973 00:47:47,890 --> 00:47:52,470 Återigen, all kod och exempel är kommer att vara på denna webbplats här. 974 00:47:52,470 --> 00:47:55,509 Så, återigen, vi pratade inte om mycket syntax Reagera, 975 00:47:55,509 --> 00:47:57,550 men att hitta alla de små syntaktiska detaljer, 976 00:47:57,550 --> 00:48:00,320 det är alla kommer att vara tillgängliga på denna webbplats här. 977 00:48:00,320 --> 00:48:02,660 >> Så jag skulle rekommendera som ta det första steget. 978 00:48:02,660 --> 00:48:06,277 Sätt in den på din CodePen. 979 00:48:06,277 --> 00:48:08,110 Försöka arbeta på att göra den till det andra steget. 980 00:48:08,110 --> 00:48:11,310 Det finns ett fjärde steg, och bara se där du får från det. 981 00:48:11,310 --> 00:48:14,840 >> Några fler frågor, ta ut den sidan eller maila mig. 982 00:48:14,840 --> 00:48:16,490 Det är min e-post. 983 00:48:16,490 --> 00:48:19,885 Men jag vill gärna hjälpa dig med någon frågor du kan ha om React. 984 00:48:19,885 --> 00:48:21,010 Så, japp, det är allt jag har. 985 00:48:21,010 --> 00:48:23,410 Tack alla så mycket för titta på eller för att delta. 986 00:48:23,410 --> 00:48:26,820 Och jag tar några frågor du kanske har efter detta nu. 987 00:48:26,820 --> 00:48:29,140 Så tack alla för att titta på. 988 00:48:29,140 --> 00:48:31,270