[MUSIK SPELA] 

NEEL Mehta: Här går. 

Tja, alla, välkommen till webben appar av framtiden med React. Detta är CS50. Mitt namn är Neel. Jag är en TA för CS50 och en sophomore vid Harvard College och en mycket, mycket passionerad webbutvecklare. Så jag är väldigt spännande att tala till er i dag, oavsett om du är här eller hemma tittar på, om React, vilket är, återigen som sagt, framtiden för webbprogram. 

Så React är ett webbramverk. Och som jag har varit träffande för vissa människor här, en ram är bara en uppsättning verktyg som du kan använda att strukturera och bygga din webbapplikation. Och webbprogram är, återigen, hemsidor som är interaktiva som Facebook, Twitter.com, Instagram.com, vad som helst. 

Så Facebook är ett webbramverk som utvecklats av Facebook ett par år back-- REACT är. Det är sedan dess använts i Facebook på sina mobila appar och webbprogrammet, Instagram. Khan Academy är en annan framträdande tidigt inför av React. 

Det är verkligen varit få mycket populär. Om du någonsin använder saker som Vinkel eller Ryggrad, är detta av samma familj, men det har sedan långt träffa deras popularitet. Det är den nya heta sak. Det är riktigt, riktigt stort. 

Och så React är bra inte bara som en webbramverk för gränssnitt bygg. Det är bra för att bygga webbgränssnitt. Det finns också en sak kallas React Native som låter dig bygga gränssnitt för Android och iOS och kanske andra plattformar i framtiden genom att använda precis samma JavaScript-kod. Du kan använda exakt samma JavaScript-kod för att göra hemsidor, att göra Android-appar och iOS-appar. 

Det är en mycket, mycket spännande tid. Det är en riktigt, riktigt cool möjlighet. Det är verkligen en universell bana interface utvecklingsverktyg, så det är en mycket, mycket viktig sak att veta. Och som jag berättade folk före detta, tror jag, kommer att förändra hur vi bygga webbprogram för evigt. Så det är kanske lite överdrift, men jag tycker det är en ganska bra sak att veta. 

OK, så vad är React? Reagera är ett ramverk som du kan använda för att bygga gränssnitt. Ett gränssnitt är, återigen, en webbsida, eller hur? Så här är Instagram.com, användningar reagerar. 

React bygger på idé av komponenter. En komponent är en HTML- element på steroider, så ett HTML-element är som en knapp. Det är ett stycke. Det är en rubrik, eller hur? Och Instagram kommer att använda dessa, men det kommer också att använda komponenter av React. 

React komponenter är trimmad upp HTML-element som har sitt eget beteende innesluten i dessa. Så, som ett exempel kan vi ha ett tidselement, en tidskomponent, som kommer att innehålla liknande tidsstämpel, du vet, en profilkomponent, som kommer att innehålla den profil bild och namnet på personen. Den kan ha en liknande räknare, som kan räkna som antalet gillar, och om du klickar på den, det ska öka antalet gillar. En komponent är bara en gäng HTML-kod som har vissa funktioner insvept i det. Så det är som en HTML-element på steroider, som jag sa tidigare. Du kan ta dessa komponenter, och du kan sätta ihop dem att göra nya komponenter i detta fall, en post komponent, som innehåller allt det här. Det skulle innehålla Time, Profile, LikeCounter, kanske kommentaren och kanske själva bilden. Och så web apps just byggt genom att ta komponenter och sätta ihop dem. En Instagram foder är inget mer än en massa stolpar en efter den andra, varje inlägg innehåller som Time, Profil, LikeCounter, och så vidare. Det är ungefär som att bygga ett hus. Du behöver inte bygga hus uppifrån och ned. Du tar components-- dig vidta motsvarande badrummet. Du tar bedroom-- du håller dem tillsammans, och du har en ny komponent. Du har en ny del av huset. 

Så REACT är alla byggda runt denna idé av komponenter som är interaktiva, som är deklarativ. Som du bara säga vad en profilen är, och det gör det. De är sammansättnings. Du kan ta en tid och en profil, sätta dem tillsammans, göra något bättre. Och de är återanvändbara, så om du har källkoden för en post, du kan bädda in var som helst. 

Du kan bädda in en Instagram sak på din egen hemsida. Du kan bädda in i Facebook, till exempel, så länge som den använder React också. Så komponenter är verkligen, verkligen, verkligen kraftfulla byggstenar av banan som kan användas överallt och sätta tillsammans för att göra nya byggstenar. Det är mycket, mycket hög nivå översikt. Så, återigen, om du har några frågor när som helst om filosofi reaktorn, kodning, för att stoppa mig, och låt mig veta. 

OK, så reagerar är coolt eftersom det har ett annat sätt att se hur du bygger webbappar. Du har säkert hört talas om MVC, en modell du styra i CS50 eller vad andra prob klasser som du använder. Och de flesta ramar är uppbyggd kring idén om MVC. React inte. REACT är uppbyggd kring tanken av ensriktad dataflöde vilket framgår av detta diagram eller grafik här. 

I grund och botten har du en datakälla. Och datakällan avgör hur man lägga ut vissa komponenter. Och komponenterna kommer då, när de förändras, de kommer att berätta datakälla för att ändra. 

Om du vill använda Instagram Du kan exempelvis ha en lista av post föremål som i en databas eller något. Att uppgifterna. Och sedan vår post komponenter kommer att ta dessa uppgifter, och använder den för att göra en sak på skärmen. Det är vad pilen från data till komponent är, och sedan att samma data används att göra en massa komponenter. 

I Facebook Messenger, för exempel, som är React, du kanske har en lista över meddelanden som datakällan. Och det skulle göra inte endast meddelandelistan men också en lista över vänner som du har. Du har olästa. Kanske även göra Facebook sak det är längst ner på Facebook.com. Samma data är en enda källa av sanning och det orsakar en hel del komponenter som skall återges. Och när en av dem komponenter ändras, Det går fram och ändrar datakällan. 

Du skickar ett meddelande, eller hur? Som ändrar datakällan. Du läser dina meddelanden, så du ställer oläst till 0. Som ändrar datakällan. Och lägg märke till att alla dessa av en pil gå tillbaka till samma data källa, så du vet, givet en viss datamängd, du vet exakt vad sida kommer att se ut. Det är deterministisk. Du vet, under vissa uppgifter, vad sidan kommer att se ut. Du kan förutsäga hur det kommer att beter sig och hur det går att arbeta när de är tillsammans. 

Och om jag hade en miljon komponenter Här skulle det beter sig på samma, eller hur? Du skulle inte ha någon konstiga sammankopplingar. En dataframförde en miljon komponenter. En miljon komponenter kunde gå tillbaka och redigera data. Och så detta är mycket trevligt. Vi håller på att bygga sammansättnings, skalbar webbprogram. 

Du har en datakälla, källan till sanningen. Det säger dina komponenter hur man lägga ut på sidan, och komponenterna kommer hantera interaktion. Och om de vill ändra saker, bara gå tillbaka och tala om för datakällan att ändras. Vettigt? Så React handlar om att förstå hur man bygger en komponent och hur man gör komponenten interagera med omvärlden. 

Making komponenten samverkar med omvärlden använder en annan teknik kallas Flux, som är ett ramverk som är läggas ovanpå React. Vi kommer inte att prata om det. Vi kommer att tala mer om, med tanke på uppgifter, hur kan du göra en komponent? 

Och så React är riktigt coolt eftersom du kan använda den med någon backend du vill. Om du har som en Python bakändan, Om din Python kan spotta ut några uppgifter, React kan göra det. Om du inte finns några JS utgångar av data, React gör det. Ruby skenor med uppgifter, React gör det. 

Så React är i grunden en webb view-- en främre ände med komponenter för alla data som helst källa. Och så går från datakällan till reagerar komponenter är ganska lätt. Går åt andra hållet är lite svårare. Som använder Flux som jag nämnde tidigare. Vi kommer inte att komma in i det. Vi kommer att fokusera mer på uppgifter-till-komponentsidan. Detta gör att du kan göra coola, roliga webbappar. Det kommer inte att påverka omvärlden för nu, men det är en annan historia. 

OK, så om du var här för min sista seminarium du vet att all kod för dagens tal kommer att vara på den här webbadressen här, ledsen, denna URL här. Och i princip ska vi gå genom fyra steg, kanske fem, förmodligen inte fem. Vi kommer att gå igenom fyra steg att bygga ett prov React app. Och så all källkod för varje steg på vägen kommer att vara just här, så om du följer längs hemma, gärna ta del av den här koden. Om du följer längs här, Vi kommer att visa den på skärmen, så du behöver inte oroa sig för det. Men om du är hemma, känner gratis att besöka denna webbplats. Och Ja, bör du kunna få all kod du någonsin skulle behöva här. Så det är en bra lathund samt för dina framtida äventyr med React. Cool, så om alla som är här, och även om du är hemma, dra upp denna webbplats, is.gd/cs50react, inget kapital, ingen streck, ingen ingenting. 

Du kommer att se en sida som ser lite såhär. Detta är en sak som kallas CodePen. CodePen är ett samarbete kodningsmiljö som jag kan skriva kod här, och Det kommer automatiskt att skickas till dig. Och det här sättet, kan jag skriva kod. Jag kan köra kod här. 

För example-- och om det reloads-- se, Jag kör JavaScript-kod på sidan just här, och det kommer automatiskt gör en webbsida med denna JavaScript-kod. Och så detta är ett sätt för oss att prova koden riktigt snabb utan att behöva använda vår ID eller använd vår lokala maskin eller vad som helst. Det är ett mycket snabbt sätt för dig att mockup och testa olika typer av kod. 

Så jag kommer att ta exempelkod, sätta upp den här. Vi kommer att arbeta igenom det. Och om du är hemma, du kan dra upp detta liksom. Och jag har redan installerat Reagera här, så att du kan bara skriva din egen kod här, och prova det som din egen lekplats. 

Ja, om alla att öppna denna länk här. Kan du ge mig en tummen upp när du har den öppen. Cool, cool cool. Det finns inget här just nu, men Vi kommer att ändra på det mycket snart. 

OK, så reagerar är en JavaScript bibliotek, och som sådan, kräver kunskap om JavaScript vilket är språket webbprogrammering. Och den används för andra saker nu också men framför allt på webben utvecklas språk, så om du inte är bekant med att läsa en plats som heter JSforCats.com. Det är underbart. Du kan lära dig JavaScript om en halvtimme. Det är otroligt. 

Så ge det en läsning. Vi är också en hel del HTML här eftersom vi designa webbsidor naturligtvis. Så om du är obekant med HTML, ta HTMLdog.com. Jag tror att lära React är en miljoner gånger lättare om du redan känna till byggstenar. Om du har komponenter, är det lätt att göra en större komponent. Det är React språk för dig. 

Så gå vidare och ge dessa saker lästa. Pausa den här videon. Ge det en läsa om du är hemma om du inte är förtrogen med HTML eller JavaScript OK, så vad vi ska göra är att vi kommer att göra en mycket grundläggande flashcard programmet med React. Vi kommer att ha en flashcard. Du kan bläddra fram och tillbaka kortet. Och vi kommer också att ha en lista över alla kort som vi har, och om vi känner ambitiös, kan vi vara kunna växla mellan bilar genom att klicka på dem. 

Men detta är, din nakna ben, en mycket enkel React app. Och så detta är faktiskt inte trivialt att genomföra, men vi kommer att visa att, om du gör detta är det väldigt, väldigt lätt att förlänga den om andra människor hjälper dig med det. Så vi kommer att gå igenom fyra steg börjar från noll för att bygga detta. 

OK, så de fyra stegen, vi ska börjar med det första steget. Det första steget kommer att vara bygga din första komponenten. Som jag sa tidigare, en komponent i React är bara ett HTML-element på steroider. Det anger HTML och vissa beteenden, och det kommer att specificera hur människor kan interagera med det hur det skulle ha inre tillstånd. Som en knapp vet precis hur många gånger det har klickat till exempel, och det kommer att veta hur man ska lägga sig ut. 

Så låt oss gå vidare och bygga upp vår första komponenten med hjälp av JavaScript. Så om syntaxen ser konstig, det beror på att det slags är. Så, återigen, vi kommer för att göra en variabel som heter Appen använder sökordet låt, vilket gör en variabel, låt App lika React.createClass. 

React är ett bibliotek och har det skapar klassfunktion. Och denna funktion är en bit kod som du kan använda för att skapa en ny typ av React komponent. Och så React.createClass gör en komponent, och denna komponent kommer kunna göra saker. Det viktigaste man kan göra är göra något, framför som en funktion. 

Återigen, om detta index inte är uppenbart för dig, rekommenderar jag att du går på JS för katter och kolla upp det. Är det zoomat in tillräckligt bra? Häftigt. 

Så varje komponent behov att ha en rendera funktion. Det gör funktionen säger, Vad skriver jag ut på skärmen? Men komponenten är värdelös om den inte vet vad du ska skriva ut på skärmen, så du måste ha en rendera funktion. 

Så i render sak, du behöver bara att återvända någon HTML. Och vad är coolt är att det finns något som heter JSX, som är en förlängning av JavaScript som används av reagera. Det låter dig skriva HTML inne av JavaScript, som låter lite konstigt när du först tänker på det, men det gör mycket känsla efteråt. Så vi kan göra detta. Om du är bekant med HTML, jag vet vi har en div med ett generellt behållare för grejer. Vi kan återkomma en div och inne denna div, kan vi sätta saker. 

Så låt oss säga att vi vill göra bara en rak-up flash nu. Den flashcard, skulle jag säga, kommer att ha en fråga och svar. Så inuti denna div, låt oss skriva ut ett stycke som säger question-- Vad är ultimata svaret till liv, universum? Och då är svaret kommer att bli, naturligtvis, 42. 

Det kom inte upp bra alls. Ja, så i princip kan du verkligen skriva HTML inne JavaScript. Och detta kommer att bli skrivas ut in i skärmen. Så låt oss prova det. 

Så vi har vår komponent. Vi måste tala om Reagera att sätta komponenten på skärmen så React.render, så märker att vi behandla app som alla andra element. Vi skriver det som det var ett HTML-element. Liksom i stället för att säga som img för bild eller p för punkt, du skriver App, så App är behandlas som ett HTML-element. Som jag sa tidigare, det är ett element på steroider. 

Så du gör App, och du ge det en plats att uttrycka det. Och det är hur du kan tala om det var för att uttrycka det. Jag har skapat en enkel div på sida som kallas med ett ID på sidan, och det är där den elementet kommer att gå. 

Och vi kommer inte att köra med HTML. I grund och botten detta kommer att få sätta insidan av denna sida elementet att vi har på skärmen. Så det går denna kod, och det drar denna sak på skärmen, så här är vi. Vi har gjort vår första React komponent. 

Så precis som en resumé, vi försiktigt gjort en ny typ av komponent, eller hur? Det är vad React.createClass. Och i denna komponent, vi berättade för den vad den ska göra. När denna komponent är att tryckas på skärmen, det kommer att skriva ut div med de två stycken inne i det. 

Och vad vi gjorde, gjorde vi en ny app med hjälp av vinkeljärnet app notation. Vi berättade det för att uttrycka det inuti sidelementet. Och så vad jag gjorde, skapade det en ny app från den mallen. Och då jag berättade det för att göra det. Så det sade, OK, app, vad ska jag skriva ut? App säger, går skriva ut en div med två stycken inne i det. Och voila, där är vår div med två stycken inne i det. Vettigt hittills? 

Så, återigen, hela utmaningen React är bara att veta hur man gör komponenter. Hur man gör komponenter fungerar tillsammans. Nu när vi har gjort vår första komponent, låt oss gå tillbaka och göra komponenter customizable. Så du vet hur i HTML du kan ge dina knappar klasser? Du kan ge dina ankare href. Du kan ge dina ingångar en typ, eller hur? Du kan ge mer anpassade fastigheter till alla dina element att göra det mer intressant. Och vi faktiskt kan göra exakt samma sak. 

Så låt oss säga att vi vill att vår app för att gå göra något kort. Just nu vi bara återges en hårdkodad kort. Vi vet att det finns bara en kort kan det göra, så vi är kommer att försöka ändra på detta nu så att vi bara kan ge det lite kort. Det kommer att skriva ut kortet. 

Du borde försöka göra din komponenter ett mycket allmänt ändamål. Så här sättet kunde jag e-post detta är min vän och vara som, oavsett flashcard du har, bara mata den in på här, och det kommer att göra det själv. Du kan sätta andra saker i din egen app. 

Men först, låt oss bryta denna upp i två komponenter, men vi vill separera kortet utskrift del från den faktiska app delen. Så vad vi kan göra är vi kan ändra detta från App till CardView, bara en nytt namn för appen, och vi kan göra en ny komponent som kallas App, inte att förväxla med den gamla App. Vi har fått createClass, och som i HTML, du kan bo Reagera komponenter insidan av varje annan. 

Så i detta render funktion, funktionsretur CardView, och detta är exakt samma sak. Se varför det är samma sak? I stället för att göra just app som har div och kopplat inne i det, appen gör CardView, och CardView gör div och punkt. Så det här är vårt första exempel på häcknings element inuti varandra. Betyder det vettigt? Så, återigen, har vi en CardView element. Vi har app element att det är större än. 

OK, så vi vill att vår CardView-- om du ge en bra CardView ett visst kort, det ska skriva ut för dig, eller hur? Så först måste vi göra ett kort, så låt oss göra ett kortobjekt. Så låt mitt kort equal-- Om du är alla bekanta, detta är bara notation fattandet invändningar i JavaScript. Det är ungefär som en struct i C, så vi gjorde en kort, och så nu kan vi passerar detta kort som en fastighet eller som ett attribut i HTML terminologi till vår app. Så vi kan göra det här, App kortet är lika myCard. 

Du vet hur i ingången, du gör input type lika text eller knapp klass är lika BTN för bootstrap ,? Samma idé, App kort equals-- du har att sätta hängslen här-- App kort lika myCard, så detta säger att vi har denna kortobjekt. Jag kommer att skicka det som ett bostad i appen komponenten. Och den här appen komponent kommer kunna få tillgång till det och göra intressanta saker med det. 

Så vår app är kommer att bli med tanke på ett kort, så för nu, låt oss ta appen bara ge kortet till CardView själv eftersom som appen är inte kommer att veta vad man ska göra med det, så vi ska bara ge det till CardView. Så vi ska skicka det samma sätt, lika kort, och så att varje komponent kan komma åt saker som har getts till det. De kan komma åt egenskaper som har getts till det använda denna syntax, this.props.card. 

Så vad händer här är du har myCard objektet. Du passerar den i appen med användning av App-kort är lika myCard. Denna kortobjektet ges till din app. Appen kan komma åt den som this.props.card. Det är ungefär som en bild vet vad det källa är. 

Denna app vet vad det är kort är, och det kan göra saker med det. Det kan göra beräkningar. Det kan fatta beslut baserat på det. 

För nu, jag kommer att passera this.props.card på CardView. Vettigt hittills? Det kommer mer meningsfullt nu. 

OK, så nu är vi på CardView. Vår CardView, med tanke på kortet, bör skriva ut sin fråga och svar. Just nu vi bara skrivas ut några hårdkodade frågor och svar. Vi måste ta reda out-- vi behöver att be kort som de gav oss Vad är frågor och svar, och sedan skriva ut det här i skärmen. 

Så vi kan göra det här. I framför begin-- först göra lika. Så vad vi gör här är att vi vet att korten gett oss till en fastighet, höger? Det har gett oss som en ingång. Som det är nästan som argument till en funktion. Kortet är ett argument nästan till denna CardView. 

Vi kommer att extrahera det och sätta den i den variabla fråga. Se till att svaret gick till den variabla svaret. Uppmanas det kortet för att svara. Och nu när vi har dessa, stället för att skriva ut denna text, vi kommer att skriva ut vad de gav oss. 

Så detta stuff-- så vi tänker att släcka Fråga Svar. Låt oss se om det fungerar. Cool, så låt oss gå igenom det en gång bara för att vara säker. 

Så mitt kort är kortobjektet, och vi ger det kortet till appen. Och appen kommer att ta kort och ge det till CardView. Och detta CardView säger, om du ge mig någon flashcard objekt, Jag ska skriva ut sin fråga och svaret, eller hur? 

Så vad jag kan göra är att jag kan Skicka den här koden, den första som 10 rader min kod, till min vän. Han kunde bädda in den i hans egen ansökan. Och så länge som han gjorde samma sak, som CardView kortet motsvarar detta, så länge han skapade CardView och gav den rätt information, han kunde göra sitt eget kort. Och så det här sättet, det är en riktigt coolt sätt för dig att bygga komponenter som använder varandra, eller hur? Detta kort, jag kunde publicera detta CardView på internet, och människor skulle kunna använda den. Så i princip är det som en av de standardfunktioner i C-biblioteket. 

Den är en funktion där någon har skrivit den. Du ger en viss ingång. Det kommer att producera en viss utgång. Du behöver inte bryr sig om hur det fungerar internt. Så länge du ger den rätt input, kommer det att göra rätt utgång. 

Och en del kan vara tänkt på samma sätt. Denna CardView är som en biblioteksfunktion. Om du ge det lite kort som en egenskap, det ska skriva ut innehållet i det kortet. Som om jag ändrar mitt kort till i stället vara vad som är 5 plus 37, det kommer att uppdatera i enlighet därmed. Så bara genom att ändra ingång, det blir en viss utgång. Så du kan tänka på komponenter nästan som fungerar på detta sätt, vilket du kan sätta ihop. Du får input, som den här CardView som indata, får du utdata. I detta fall är utgångs HTML. Vettigt hittills? Cool, så igen, egenskaper hur du kan överföra information till och från komponenter. 

OK, så låt oss göra detta sak interaktiv. Just nu är det ganska tråkigt. Vad är [OHÖRBAR]? Du kan skriva några ut, men det är allt det kan göra. 

Så låt oss gå tillbaka till gamla frågan just nu. OK, så just nu dessa komponenter är tråkiga eftersom allt de gör, de får ingång. De gör utgång, eller hur? Det är typ av tråkiga. Vi vill ha vår komponenter för att kunna ha någon form av inre tillstånd, som minns något. 

För en Flashcard, för exempel vilken typ av tillstånd kanske du vill minnas för en flashcard? Vad tillfällig status kanske du vill komma ihåg för en flashcard i en flashcard app? PUBLIK: Oavsett om det är vänts? NEEL Mehta: Ja, just det. Så du kanske vill behålla koll på är du uppåt eller du framsidan nedåt på kortet. På Facebook, till exempel, skulle du vill minnas var i nyhetsflödet är du eller liknande som är profil gör du just nu. 

På Messenger, precis vad text du skriver i inmatningsrutan, eller hur? Om du uppdaterar sidan, går det undan. Men du bryr mig egentligen inte. Det är bara tillfälligt. Ja? 

PUBLIK: [OHÖRBAR] NEEL Mehta: Som en blixt kort, som du kan se Frågan sidan eller svaret sidan? 

PUBLIK: OK. 

NEEL Mehta: Like a dubbelsidig Flashcard, eller hur? Ja, så du vill har denna idé nu Jag har egenskaper, som är som insatsvaror, men staten, som är tillfällig, eh, var du befinner dig på sidan, eller hur? Återigen, sa jag i Facebook Messenger, jag har liksom vilken person du tittar på Facebook eller som är profilen, eller hur? 

Detta är bara tillfälligt. Det är viktigt att visa användaren vad som händer, men uppdatera sidan. Det spelar egentligen ingen roll. Så det är tillfälligt tillstånd, så vi alla det tillstånd. 

Så, återigen, det finns statliga och rekvisita. Rekvisita är ingång ges från datakällan. Staten är precis som standard. Det är precis som saker som gör saken interaktiv. 

Så i vår CardView-- låt oss ha vår CardView-- så det var trevligt. Vad vi ska göra här, vi kommer röra CardView och endast CardView. Och så min vän som fick detta, de skulle inte märka någon skillnad. De skulle inte behöva ändra någon av sin egen kod, men de skulle se sin CardView blev trimmad upp. Det är en trevlig del om komponenter. 

OK, så i vår CardView, låt oss försöka och hålla reda på om vi fasa upp eller nedåt. I React vi gör detta genom att först specificera initialtillståndet. Varifrån kommer kortet börja? 

Så var en funktion som kallas getInitialState fungera, och vi återvänder ett objekt. Detta objekt innehåller något tillstånd, och en stat är bara en nyckel-värde-par. Liksom i instruera, har du en nyckel och en värde, har du namn är en sträng. 

I det här fallet, låt oss säga front är sant. Detta säger att vi har en stat. En komponent av tillståndet är ett attribut som heter front. [OHÖRBAR], så som standard, vi är på framsidan av kortet, och vi kan ändra detta som vi vänder kortet. Vettigt? 

OK, så i render, just nu, vi är visar frågan och svaret. Nu vad vi ska göra är att visa frågan om vi är på framsidan av kortet så svaret är för baksidan av kortet. Det är därför du alla göra kortet interaktiv. Så låt oss försöka och det här. Tja, först bara göra en variabel. Vi kan fråga nu this.state.front. Vi tillgång ange samma vi tillgång rekvisita, så this.state.front. 

Om vi ​​är framför, sedan text är this.props.card.question. Om vi ​​är på framsidan av kort, vi kommer att försöka greppa Frågan från kortet. Annars, om vi är på baksidan av kortet, vad gör vi? 

PUBLIK: Svaret? 

NEEL Mehta: Japp, så text lika this.props.card.answer. Men om du märker, använder vi staten att fatta ett beslut för nu komponenten kommer att se annorlunda bygger upp hur dessa interagerar med den. Så i stället för att skriva ut detta, Vi ska bara skriva ut texten. Cool, så nu, som ni ser, vi ser bara frågan. Och om jag ändrar staten här manuellt framåt är falsk får vi 42 tillbaka. 

Så, återigen, denna komponent har sin egen stat. Som en knapp vet om det har varit pressad eller inte, denna sak vet vad som finns på framsidan eller på baksidan. Som standard är det på framsidan. Och sedan om det är på framsidan, vi ska skriva ut frågan. Om det är på baksidan, vi ska skriva ut svaret. Så, återigen, den information ges är densamma. Det ser bara annorlunda baserat på hur du programmerar den. Så, till exempel, Facebook Messenger, även om du får samma datakälla, det kan se annorlunda ut eftersom staten är annorlunda. Du tittar på en annan person budskap. 

OK, det är så gott och bra, men nu vad är egentligen gör att vi kan ändra, om våra kort är framsidan eller baksidan. Vi kan göra detta genom att lägga till en flip knapp, en knapp för att kortet som kommer vända kortet om det är [OHÖRBAR]. Så låt oss lägga till en knapp här, detta knappen, och knappen kommer att säga luckan. 

Och så just nu är det inte göra någonting. Det ser bara trevligt. Vad vi kan göra är att vi kan lägga till en klick handler, lika onClick this.flip, och vi kommer att definiera flip senare. Men i princip, onClick är en funktion som anropas när användaren klickar på den. 

Så knappen vet när det har klickat. Gick det har klickat, det kommer att vända kortet. Det är ungefär som din pizza leverans killen. Du är som, okej, när någon kallar mig, jag ska leverera pizza, eller hur? 

Du registrera lyssnaren. Du lyssnar på en händelse. Du får kallas, och när händelse inträffar, du gör något. Du får pizza. I det här fallet, när man är klickar du vänder kortet. 

Och så vi måste definiera en funktion som kommer att vända kortet, så vi skriver denna rätt här, flip funktion. Och så vad tror du flip kommer att göra? Även detta blir kallas när vi klickar luckan knappen. Vad ska funktionen flip göra? 

PUBLIK: Ändra this.state.front från sant till falskt, falskt true. 

NEEL Mehta: Japp, så vidta this.front är-- front tillståndet är. Ta front staten, om det är sant, gör det falskt. Om det är falskt, gör det sant, eller hur? Så låt oss prova det. 

Du kan inte ändra tillstånd bara genom att göra this.state. Du kan inte göra detta. Du kan inte göra det. Du måste använda en funktion kallas this.setState. 

Så du kan säga this.setState front kolon det där igen, utropet punkt innebär motsatsen. Jag antar att om detta. state.front är sant, kommer den att falskt. Så vi ska ställa staten från sant till falskt. Om det är falskt, vi ska ställa in den false till true. 

Bara märker att vi sätter och få något annorlunda, och så låt oss försöka detta. Bada Bing, titta på detta. Luckan knappen kommer nu växla fram och tillbaka tillståndet. 

Och så här är där du ser en lite av magin i React. Som vi aldrig veta det att åter göra. Vi berättade det aldrig rita något. Om du gör detta utan Reagera, skulle du har att-- gillar när flip klickar på knappen, du måste berätta det för manuellt åter göra, eller hur? 

React är verkligen svalna i att om du ge det en viss stat och egenskaper, det kommer alltid att rendera exakt samma sak. Och så när vi någonsin vi ändrar staten och egenskaper, reagerar bara re-gör det hela. Det vet att det finns en ett-till-ett korrespondens mellan staten och parameter och HTML. Så när någon av dem ändras med hjälp av en uppsättning tillstånd, det kommer att förändra hur lön på nytt återges. Och så i princip React är som väntar på dig att ändra. 

Närhelst det ändrar något, det ska åter återge hela sidan. Och om det låter ineffektivt, det beror på att det skulle vara, men reagerar använder en sak kallas Shadow DOM. I stället för att dra sidan direkt, det håller den virtuella HTML träd i minnet. 

Du vet, HTML är som ett träd, som en hierarkisk datastruktur. Det håller en falsk träd i minnet, och när du uppdaterar sidan, det ska rita en bluff träd, och det kommer att beräkna vad ändra den behöver för att göra den för att göra de två träden lika. Så i grund och botten, det praktiskt taget re-gör en hel del. Och då är det bara gillar ändrar webbplatsen på små justeringar som behövs, så det är mycket, mycket, mycket effektiv. 

Så i princip React kommer när du ändrar något, det ska åter rendera sidan virtuellt. Det kommer att räkna ut vad behöver jag ändras för att den verkliga sidan återspeglar den virtuella sida, och det kommer att göra det. Det är den virtuella DOM. Det är en av de största funktioner i React. 

Betyder det vettigt? Några frågor? Ja? 

PUBLIK: Hur jämför fortfarande MVC att vi pratade om innan liknande resurser. 

NEEL Mehta: Ja, frågan är hur fungerar den jämfört med MVC? Du frågade om resurser. Nåväl, låt oss tala om hur det fungerar. 

I MVC, skulle du uppdatera modellen. I det här fallet skulle vi ha ett kort modell. Vyn skulle ha flip-knappen och kontroll skulle ha luckan funktionen. Så att vyn skulle berätta controller att vända luckan. Flip skulle berätta modell för att ändra, eller hur? 

Och så när du gör en MVC, du lyssna för modellen att ändras, och du åter göra vyn i enlighet därmed. Eller om du bara måste gilla har regulatorn. Vänta modellen att ändra, och därefter välja och vraka en del av som en sak att förändra. Här har vi en sak, men i en stor app, du måste vilja ihåg vad förändringen i varje enskild plats, så det är lite irriterande. Och så React är trevligt eftersom det har en skugga Dom. Det har råd att bara skriva om hela saken. Du behöver inte selektivt som gissa vad att uppdatera. 

På Facebook om du vill får ett nytt meddelande, i MVC, du måste komma ihåg, OK, ändra saker på toppen av den sida, meddelandeikonen. Också pop ett nytt fönster längst ner. Gör också en ny sak i det fönstret. Också spela ett ljud. 

Det är en massa saker gå ut samtidigt. Och så om du inte har en skugga Dom, skulle du måste göra det manuellt eftersom du kan inte bli av med hela sidan. Du har inte råd att, så att du har att ändra varje sak manuellt vilket är verkligen irriterande i MVC. 

Så för att vara sparsam, de selektivt uppdatera sidan, vilket är effektiv, men också irriterande. I React, på grund av Shadow Dom får du båda saker gratis. Det är effektivt eftersom av Shadow Dom. Flaskhalsen är att uppdatera sidan. Det gör inte trädet manipulation. Du får effektivitet. Du får också användarvänlighet eftersom Om du bara skriva om hela sidan, men du bara vet, okej, saker kommer att vara på sidan någonstans. Det kan vara på ett annat ställe, men det kommer att vara på sidan, eller hur? Så du bara re-renderade hela saken så gott, och du kan göra ett par ändringar i själva sidan. 

Så, återigen, i MVC du skulle behöva välja mellan användarvänlighet och effektivitet, och Reagera, får du både och. Så det är bättre. Vettigt? Fast. 

OK, så låt oss se låt oss tala lite om steg 4, hur vi kan bädda komponenter. Så vi har här just nu. Vi har vår cool liten knapp. Vi kan vända tillbaka och ut, och det är allt den gör. Låt oss säga att vi vill har en annan komponent. Låt oss säga vår Flashcard app bör innehålla en förteckning över alla korten som du har, så det innebär att vi bör ha en annan komponent. Tja, kanske kalla det en listvy. Låt oss göra en listvy som samexisterar med den CardView, och detta listvy och CardView kommer att gilla arbeta tillsammans. Och du kan kombinera dem att göra vår app för dig. 

Så först, låt oss göra en några fler kort rätt. Låt oss säga, vilka kort? Och bara så att jag inte behöver tråka ut er med att skriva in den, Jag kommer bara att kopiera den härifrån. Och så ska jag inte ge det bara ett kort. Jag ska ge det en rad av kort. Så först apps kommer att bryta för nu. Okej, så vi kommer att göra detta kunna hantera flera kort. Så först, vi kommer att ge det, inte bara ett kort utan en matris med kort, som en lista med kort. Och i detta fall, har vi tre av dem. 

Okej, så så app är kommer att få en lista kort, och det kommer att avgöra vilka en visa för CardView. Den CardView kan bara render ett kort, men appen får en lista över alla kort, eller hur? 

Så när du räkna ut ett kort som ska ges till CardView, hur skulle du antar att du skulle kunna att fatta beslut om vilket kort att visa? För att ge er en ledtråd, det är tillfälligt Du kommer att visa ett visst kort. Om du uppdaterar sidan, kommer du bara gå tillbaka till det första kortet. Det är OK eftersom det är tillfälligt. Vilken teknik kan vi använda? 

PUBLIK: Du kan göra en variabel så precis som du hade front. Är detta sant, du kan har nuvarande kort är lika med 1? 

NEEL Mehta: Ja, så vi vill ha tillstånd, eller hur? Du skulle använda tillstånd i komponent för att räkna ut vilket kort vill vi få. Som vi har en lista över alla kort, vi ska använda staten för att räkna ut en av de första kortet, andra kort, tredje kort, och så vidare. 

Så en app så en app kommer att få en ha getInitialState funktionen, getInitialState funktion avkastning. Och vi ska bara säga activeIndex 0. Så nu vår app har sin egen stat. 

Och så nu gör, räkna ut ett kort, låt oss bara gå till arrayen och ta tag i saken på detta index. Välj kort lika this.props.cards this.state.activeIndex. Så som du ser här, rekvisita och staten faktiskt arbetar tillsammans. Så nu när vi har vår activeCard, vi kallar det activeCard, och låt oss se om det fungerar. [OHÖRBAR] 

Åh, det var en text fel. Ah. 

Cool, yep, så nu var vi tillbaka där vi var förut, eller hur? Samma gamla program utom Nu kan vi stödja en lista med kort, inte bara ett kort. Och nu, återigen, om vi ändrar activeIndex, kan vi gå från 0 till 1, och nu när andra kort, och sedan gick vi till 0. Så här är en ny trimmad version av vår. 

OK, så nu ska vi ha en listvy som visar alla kort i ditt program, så vi kommer att göra en ny komponent som kallas listvy. Låt listview lika react.createClass. Så vi vill göra en oordnad lista med ett listobjekt för varje kort. Och så har vi en massa kort. Vi vill ha en listobjekt för varje kort, eller hur? Vi skulle kunna göra en for-loop eller något att göra en ny post i listan. Men det sätt som du gör det i React, använda något som heter karta. Map är ett verktyg eller en funktion du använder att för varje objekt, kör någon funktion, tar returvärde, och ger dig det tillbaka. 

Så som ett exempel, har vi arrayen 1, 2, 3.map function-- och detta är en förkortning för en function-- x arrow x gånger x. Det säger, för varje nummer i 1, 2, 3, ta den. Square den och ge den tillbaka. Så vad tror du 1 2, 3.map x går till x gånger x ger dig tillbaka med tanke på att denna funktion är köras på varje element i den arrayen. 

Publik: 1, 4 9? 

NEEL Mehta: Japp, 1, 4, 9 eftersom du gör 1 gånger 1. Det ger dig en. Det är det första elementet. 

2 gånger 2 är 4. Det är ett andra element. 3 gånger 3 är 9. Det är ett tredje element. Vettigt? Så karta har en teknik som användning i funktionella programmerare, ny stil av programmering att göra något till varje element i listan. Och så detta låter bekant. Vi har en lista med kort. Vi vill få en post i listan för varje en, så vi ska bara använda kartan här. Vi kommer att säga, låt listan jämlikar this.props, kort, karta. 

Och så med tanke på ett kort, vi är kommer att generera en post i listan med att kortets innehåll sida av den. Låt oss bara säga att vi vill ge ut korten ifråga så card.question. Så här listan innehåller ett uppsättning av LI: s eller listobjekt där det finns en lista objekt för varje kort, och som innehåller kort fråga. Vettigt? 

Cool, så nu ska vi faktiskt skriva ut det. Så vi kommer att återkomma en ul. Insidan som oordnad lista, Vi ska bara hålla hela listan att de gav oss. Häftigt. 

Okej, så nu detta listvy fungerar bara hitta. Eventuella frågor om listvy? Du har en massa kort. Du gör ett listobjekt för varje kort. Och du lägger dem i en oordnad lista, och du ger det tillbaka. Så nu ska vi agera så vi bädda detta inne i vår app, så att vi kan göra det här, listvy. Vilka argument har vi övergå till listvy? Vilka egenskaper ger vi det? Kom ihåg att om du ger det en massa kort, det ska göra listan visa för dessa kort. Så vad skulle vi passerar här som argument? PUBLIK: En lista med kort? NEEL Mehta: Ja, så kort lika this.props.cards, eller hur? Och så det enda problemet är att du bara kan vände en toppnivå inslag i render, så du har att linda in det i en div. Det är konstigt. Så låt oss se om det. Betyder det att fungera? 

Japp, där du går. Så nu har vi en lista kort i botten, och sedan har vi vår CardView sig på toppen, och det kommer att växla mellan de två sidorna av kortet. Nu gör det vettigt hur jag gjorde det? Ja, så igen, vi har två komponenter. Den första komponenten tryck ut varje kort i listan. Det är listvyn. Och den andra komponenten skriver ut just detta kort. Om du ger det ett visst kort, det ska skriva ut information om kortet och låter dig bläddra fram och tillbaka. 

Så om vi vill, kan vi försöka prata om att lägga till några nya funktioner för detta. Annars kan vi prata lite mer om av hastigheten av reaktor, eller så kan vi svara frågor du kan ha eftersom dessa är alla av kärndelarna av reagerar som jag vill prata om. Vi kan gå vidare. Vi kan svara på frågor. Vad du än vill. 

PUBLIK: Kan man använda JSX i normalt JavaScript? Eller är det något som kom med [OHÖRBAR]? 

NEEL Mehta: Frågan är burk du använder JSX med normalt JavaScript? Svaret är ja. JSX är bara ett sätt att det tar din JavaScript som har HTML inne i det, och det sammanställer i JavaScript som inte har HTML inne i den. Så märker that-- så märker här. Det ser ut som du har som div och du har saker inne i den. 

Som sammanställer till JavaScript som som genererar samma sak. Jag antar att vad jag säger är att JSX är bara en syntaktisk, som det är en förprocessor för JavaScript mycket som PHP är en preprocessor för HTML. JSC är en preprocessor för JavaScript som låter du sätter HTML insidan av JavaScript. Och så om du har rätt transformator vilket är något som heter [OHÖRBAR] vilket kommer att förvandla. Rätt preprocessor, det kommer att låta dig göra det. 

PUBLIK: [OHÖRBAR] NEEL Mehta: Vanligtvis behöver du inte att sätta HTML inne JavaScript såvida inte din gör React. Men du kan göra det ändå. Japp? 

PUBLIK: Jag tror att du hade beskrivit React som en funktionell programmering språk. Vi har fått lära C i CS50. Är C också en funktionellt språk? NEEL Mehta: Så frågan handlar om funktionell kontra en annan sak som kallas imperativ eller processuella programmering. Det finns två typer av program populära. Man kallas procedur, som handlar om som gör kommandon och en är funktionell, vilket är allt om att ha funktioner och med inmatning och utmatning av dem. React är en funktionell paradigm. C är en mycket procedur paradigm. 

Och som ett exempel, C t.ex. du behöver inte göra det deklarativa sätt att göra programmet, eller hur? Du måste säga, skriva ut. Ändra denna datastruktur. Skriv ut. Det handlar om kommandon. 

I React, det finns inte att många kommandon. Det handlar om att ha komponenter du sätter ihop. De är liknande funktioner. Du har som en funktion kallas CardView, som är en funktion som har ingång, utgång, och så React är alla om denna filosofi oss having-- du har data. Du passerar det genom denna algoritm, och det kommer output HTML som du bara tryckt på sidan, och så du måste bygga det bit för bit. 

Så att dra en metafor för vad Jag sa förut, vet du hur på Facebook om du får ett meddelande, och du väljer vilka delar att uppdatera, det är processuella. Det är absolut nödvändigt, eller hur? OK, fick jag ett meddelande. Låt oss ändra konto där. 

Låt oss pop ett fönster här. Låt oss ändra konto där. Låt oss dra det här. Det är en processuell tillvägagångssätt. 

Det är vad saker som Vinkel, Boost, Backbone, andra ramar använder. React är funktionell. Det är ett väldigt annorlunda sätt att tänka på saker. Det tar denna idé om låt oss ha funktioner eller algoritmer som kommer du ge den data. Det kommer att spotta ut vad det bör vara, och datorn tar hand om att väga upp. Du behöver inte hantera det själv. Gör det lite vettigt? Ja? 

Publik: I ett funktionellt språk, allt händer på en gång? 

NEEL Mehta: Nej, det händer saker i ordning. Som här finns det fortfarande ordning, men det gör inte hända i ordning som berömma, kommando, kommando. Det händer i ordning funktionen ger dig utgång. Sätt in det i en annan funktion. Sätt in det i en annan funktion, en annan funktion. 

Om du gör CS51, kommer du lära funktionella program lite ur ramen för denna. Men i grund och botten, vad som gör Reagera cool är inte bara den enkelriktade dataflöde och den virtuella Dom, men också denna idé om funktionell programmering. Och funktionell programmering är mycket lätt att komponera och göra coola saker ur, och det är väldigt lätt att tänka om och resonera om. Så det är en annan bra drag av React. Fler frågor? Ja? 

Målgrupp: Um, varför skulle du använda låt i motsats till var? 

NEEL Mehta: Så frågan är Varför använder ni låter i stället för var? Detta är något som heter ES6 eller ECMAScript 6. Det är den nya versionen av JavaScript. Det finns en massa tekniska skäl, men låt är en bättre version av var. 

Det är hur du deklarerar variabler. Du kan använda låta. Du kan använda var. Låt har ett gäng teknisk reasons-- du kan se dem upp later-- till varför det är bättre. I grund och botten, har några trevliga ES6 ny syntax, några nya funktioner ovanpå den gamla JavaScript. 

Så vi har som fem minuter. Jag ville bara tala om en sak riktigt snabbt. Om du hade några frågor, låt oss prata om det efter detta. Men bara så det blir fångad på bild, jag bara vill prata lite om hur du faktiskt använda Reagera i dina appar. 

Om du går här, Facebook.GitHub.IO/react, detta är hemsidan för Reagera, och Det ska visa dig hur du faktiskt använder Reagera på dina sidor. I grund och botten är det en lite komplicerade försöker installera React. Det är inte så lätt som du bara dra och släppa en JavaScript där. 

Du måste ha din transformator inrättas, vilket kommer som det gjorde tidigare, förvandla din JSX till den normala JavaScript. Du måste sak som kommer kompilera du ES6 till det normala. JavaScript finns det en hel del att flytta delar som du måste göra, så det finns en sak kallas Yeoman, Yeoman.io. Och detta är en kommandorad verktyg som kommer hjälpa dig scaffold ut din React projekt lätt. 

Så du kan läsa om här senare, men det finns några verktyg att Yeoman erbjuder. De kommer att låta dig skapa en React app med allt inbyggt. Som det ska har byggt i komponenter inbyggd. Det kommer att ha din transformator inbyggd. De har en hel del kyla grejer inbyggd automatiskt med hjälp av dessa saker som kallas generatorer. 

Så läs om det här om du vill. Bara gå på Yeoman, Y-E-O-M-A-N, och du kan hitta generatorer som dessa. Och med generatorer som dessa, du vill bara en är ett par kommandorad kommandon. Det kommer scaffold ut ett Hela React app för dig. Det kommer att få all den manuella rörledningar, och tråkiga jobbet gjort för dig, och det är därför du bara fokusera på bara skriva in React. 

Så i princip bygga en Reagera app är nontrivial. Det är trådbundna tillsammans, men det är verktyg som kommer att göra det åt dig. Så om du vill göra en Reagera app, prova att göra det på det sättet. Om du bara vill experimentera, Du kan prova att använda denna CodePen eftersom denna CodePen har alla reagerar ledningar. Jag har gjort allt arbete för dig redan. 

Så om du vill göra som en produktion att frigöra React app, prova en av dessa generatorer. Om du bara vill spela runt, är det ofta värt att bara som prova att spela runt på CodePen här. Låter bra? Häftigt. 

Så det är allt jag har. Återigen, all kod och exempel är kommer att vara på denna webbplats här. Så, återigen, vi pratade inte om mycket syntax Reagera, men att hitta alla de små syntaktiska detaljer, det är alla kommer att vara tillgängliga på denna webbplats här. 

Så jag skulle rekommendera som ta det första steget. Sätt in den på din CodePen. Försöka arbeta på att göra den till det andra steget. Det finns ett fjärde steg, och bara se där du får från det. 

Några fler frågor, ta ut den sidan eller maila mig. Det är min e-post. Men jag vill gärna hjälpa dig med någon frågor du kan ha om React. Så, japp, det är allt jag har. Tack alla så mycket för titta på eller för att delta. Och jag tar några frågor du kanske har efter detta nu. Så tack alla för att titta på.