[MUSIC SPILLE] 

NEEL Mehta: Her går det. 

Vel, alle sammen, velkommen til web apps i fremtiden med React. Dette er CS50. Mitt navn er Neel. Jeg er en TA for CS50 og en sophomore ved Harvard College og en veldig, veldig lidenskapelig webutvikler. Så jeg er veldig spennende å være å snakke med deg i dag, enten du er her eller hjemme ser på, om React, som er, igjen som jeg sa, fremtiden for web apps. 

Så React er en web-rammeverk. Og som jeg har vært å fortelle til noen mennesker her, et rammeverk er bare en sett med verktøy du kan bruke å strukturere og bygge din web app. Og web apps er, igjen, nettsteder som er interaktive, som Facebook, Twitter.com, Instagram.com, uansett. 

Så Facebook er en web-rammeverk som ble utviklet av Facebook et par år back-- reagere er. Det har siden blitt brukt i Facebook på sine mobile apps og web app, Instagram. Khan Academy er en annen fremtredende tidlig adopter av React. 

Det har virkelig vært å få ekstremt populære. Hvis du noen gang bruke ting som Vinkel eller Ryggrad, er dette av den samme familien, men det har siden langt overgå deres popularitet. Det er den varme nye ting. Det er veldig, veldig stort. 

Og så React er bra ikke bare som en web rammeverk for å bygge grensesnitt. Det er bra for å bygge web-grensesnitt. Det er også en ting kalt React Native som lar deg bygge grensesnitt for Android og iOS og kanskje andre plattformer i fremtiden bruker akkurat det samme Javascript-kode. Du kan bruke nøyaktig samme Javascript-kode for å gjengi nettsider, å gjengi Android-apper og iOS apps. 

Det er en veldig, veldig spennende tid. Det er en veldig, veldig kul mulighet. Det er virkelig en universell web grensesnitt utviklingsverktøy, så det er en veldig, veldig viktig ting å vite. Og, som jeg var å fortelle folk før dette, tror jeg, kommer til å endre hvordan vi bygge web apps for alltid. Så det er kanskje litt overdrivelse, men jeg tror det er en ganske god ting å vite. 

OK, så hva er React? Reagere er et rammeverk du kan bruke for å bygge grensesnitt. Et grensesnitt er, igjen, en web-side, ikke sant? Så her er Instagram.com, bruk React. 

Reagere er bygget på ide av komponenter. En komponent er en HTML element på steroider, så et HTML-element er som en knapp. Det er et avsnitt. Det er en overskrift, ikke sant? Og Instagram vil bruke disse, men det vil også bruke komponentene av React. 

Reagere komponentene er souped-up HTML-elementer som har sin egen oppførsel finnes i dem. Derfor, som et eksempel, kunne vi et tidselement, en tidskomponent, som vil inneholde like tidsangivelsen, vet du, en profil komponent som vil inneholde profilbilde og navnet på personen. Det kan ha en slik teller, hvilken kan telle som antall liker, og hvis du klikker på den, det vil øke antall liker. En komponent er bare haug med HTML-kode som har noe av funksjonaliteten pakket inne i den. Så det er som en HTML-elementet på steroider, som jeg sa før. Du kan ta disse komponentene, og du kan sette dem sammen å lage nye komponenter, i dette tilfelle, en post komponent, som inneholder alt dette. Det ville inneholde Time, Profile, LikeCounter, kanskje kommentaren og kanskje selve bildet. Og så web apps er bare bygget ved å ta komponenter og sette dem sammen. En Instagram feed er noe mer enn en haug med innlegg etter hverandre, hvert innlegg inneholder som Time, Profil, LikeCounter, og så videre. Det er litt som å bygge et hus. Du trenger ikke bygge huset fra toppen og ned. Du tar components-- deg ta som badet. Du tar bedroom-- du holder dem sammen, og du har en ny komponent. Du har en ny del av huset. 

Så reagerer er alle bygget rundt denne ideen om komponenter som er interaktive, som er deklarative. Som du bare si hva en Profilen er, og det gjør det. De er composable. Du kan ta en tid og en profil, sette dem sammen, gjøre noe bedre. Og de er gjenbrukbare, så hvis du har kildekoden for en post, du kan legge det hvor som helst. 

Du kan legge inn en Instagram ting på din egen hjemmeside. Du kan legge inn i Facebook, for eksempel, så lenge som den bruker React også. Så komponenter er virkelig, virkelig, virkelig kraftige byggeklossene i nettet som kan brukes hvor som helst og sette sammen for å lage nye byggeklosser. Det er veldig, veldig høyt oversikt nivå. Så, igjen, hvis du har noen spørsmål i ethvert punkt om filosofien av reaktoren koding, for å stoppe meg, og gi meg beskjed. 

OK, så reagerer er kult fordi det har en annen måte å se på hvordan du bygger web apps. Du har sikkert hørt om MVC, en modellen du kontrollere i CS50 eller hva andre sondering klasser du bruker. Og de fleste rammer er bygget rundt ideen om MVC. Reagerer ikke. Reager er bygget rundt ideen av ensrettet dataflyt sett fra denne oversikten eller grafikk her. 

I utgangspunktet har du en datakilde. Og datakilden vil avgjøre hvordan å legge ut enkelte komponenter. Og komponentene vil så, når de endrer, de vil fortelle datakilde for å endre. 

For å bruke Instagram eksempel, kan du ha en liste over legg gjenstander som i en database eller noe. At dataene. Og da er vår legg komponenter vil ta disse dataene og bruke disse dataene til å gjengi en ting på skjermen. Det er hva pilen fra data til komponenten er, og deretter den samme informasjonen blir brukt å gjengi en haug med komponenter. 

I Facebook Messenger, for eksempel, som er React, du kan ha en liste over meldinger som datakilden. Og det ville gjengi ikke bare listen over meldinger men også en liste over venner du har. Du har uleste. Kanskje også gjengi Facebook tingen som er nederst på Facebook.com. Det samme data er en enkelt kilde av sannhet og som fører til en rekke komponenter som skal gjengis. Og når en av dem komponentene endres, det går tilbake og endrer datakilden. 

Du sender en melding, ikke sant? Som endrer datakilden. Lese meldingene dine, så du setter ulest til 0. Som endrer datakilden. Og legg merke til at alle disse på ett arrow kommer tilbake til samme data kilde, så du vet, gitt en bestemt datasett, du vet nøyaktig hva siden kommer til å se ut. Det er deterministisk. Du vet, gitt visse data, hva siden kommer til å se ut. Du kan forutsi hvordan det kommer til å oppføre seg og hvordan det går å jobbe når de er satt sammen. 

Og hvis jeg hadde en million komponenter her, ville det virke på samme måte, ikke sant? Du ville ikke ha noen rare sammenhenger. En data gjengitt en million komponenter. En million komponenter kunne gå tilbake og redigere dataene. Og så dette er veldig hyggelig. Vi bygger composable, lett skalerbare web apps. 

Du har en datakilde, kilden til sannhet. Som forteller komponentene hvordan å legge ut på siden, og komponentene vil håndtere samspill. Og hvis de ønsker å endre ting, bare gå tilbake og fortelle datakilden for å endre. Gir mening? Så React handler om forståelse hvordan å bygge en komponent og hvordan du lager din komponent samhandle med omverdenen. 

Making komponenten samhandler med omverdenen bruker en annen teknologi kalt Flux, som er et rammeverk som er lagt på toppen av React. Vi kommer ikke til å snakke om det. Vi kommer til å snakke mer om, gitt data, hvordan kan du gjengi en komponent? 

Og så React er virkelig kult fordi du kan bruke den med noen bakenden du vil. Hvis du har som en Python bakenden, hvis Python kan spytte ut noen data, Reagere kan gjengi det. Hvis du ikke er noen JS utganger av data, reagere gjør det. Ruby skinner opp med data, React gjør det. 

Så React er i utgangspunktet en web view-- et grensesnitt med komponenter for alle datakilder hodet. Og så kommer fra datakilden til reagere komponenter er ganske enkelt. Går den andre veien er litt vanskeligere. Som bruker Flux som jeg nevnte tidligere. Vi vil ikke gå inn på det. Vi vil fokusere mer på data-til-komponent side. Denne måten du kan gjøre kule, morsomme web apps. Det vil ikke påvirke omverdenen for nå, men det er en annen historie. 

OK, så hvis du var her for min siste seminar du vet at all koden for dagens diskusjon kommer til å være på denne nettadressen her, beklager, denne nettadressen her. Og i utgangspunktet skal vi gå gjennom fire trinn, kanskje fem, sannsynligvis ikke fem. Vi vil gå gjennom fire trinn å bygge en prøve React app. Og så all kildekoden for hvert steg på veien kommer til å være akkurat her, så hvis du følger med hjemme, gjerne lese denne koden. Hvis du følger med her, Vi skal vise det på skjermen, så ikke bekymre deg for det. Men hvis du er hjemme, føler fri til å besøke dette nettstedet. Og, ja, bør du kunne få all koden du noen gang trenger her. Så det er en god jukselapp i tillegg for fremtidige opplevelser med React. Kult, så hvis alle som er her, og selv om du er hjemme, trekke opp dette nettstedet, is.gd/cs50react, ingen kapital, ingen strek, ikke noe. 

Du vil se en side som ser litt som dette. Dette er en ting som heter CodePen. CodePen er et samarbeids kodemiljø som jeg kan skrive kode her, og det vil automatisk bli sendt til deg. Og på denne måten kan jeg skrive kode. Jeg kan kjøre kode her. 

For example-- og hvis det reloads-- se, Jeg kjører Javascript-kode på siden akkurat her, og det vil automatisk gjengi en nettside med denne Javascript-kode. Og så dette er en måte for oss å prøve ut kode veldig rask uten å måtte bruke vår ID eller bruk vår lokale maskinen eller hva. Det er en veldig rask måte for deg å mockup og teste ut forskjellige typer kode. 

Så jeg kommer til å ta eksempelkode, setter den her. Vi kommer til å jobbe gjennom det. Og hvis du er hjemme, du kan trekke opp dette også. Og jeg har allerede installert Reagere her, så du kan bare skrive din egen kode her, og prøve det som din egen lekeplass. 

Ja, hvis alle skal åpne opp denne linken her. Vennligst gi meg en tommel opp når du har den åpen. Cool, cool cool. Det er ingenting her for nå, men vi vil endre det veldig snart. 

OK, så React er en Javascript bibliotek, og som sådan, krever kunnskap om Javascript, som er web-programmeringsspråk. Og det blir brukt til andre ting nå også, men først og fremst på nettet utvikler språk, så hvis du er ukjent med det, lese en side som heter JSforCats.com. Det er fantastisk. Du kan lære Javascript om en halvtime. Det er utrolig. 

Så gi det en lese. Vi er også mye av HTML her fordi Vi designer websider selvfølgelig. Så hvis du ikke er kjent med HTML, sjekk ut HTMLdog.com. Jeg tror læring React er en million ganger lettere hvis du allerede vet byggesteinene. Hvis du har komponentene, er det lett å gjøre en større komponent. Det er React språket for deg. 

Så gå videre og gi disse tingene en lese. Pause denne videoen. Gi den en lese hvis du er hjemme hvis du ikke er kjent med HTML eller Javascript OK, så hva vi kommer til å gjøre er vi kommer til å gjøre en helt enkel spørje app ved hjelp av React. Vi kommer til å ha en spørrekort. Du kan snu kortet frem og tilbake. Og vi vil også ha en liste over alle kortene som vi har, og hvis vi føler ambisiøs, kan vi være i stand til å veksle mellom biler ved å klikke på dem. 

Men dette er, din nakne bein, en veldig enkel React app. Og så dette er faktisk ikke trivielt å implementere, men vi kommer til å vise at hvis du gjør dette, er det veldig, veldig lett å utvide den hvis andre mennesker hjelpe deg med det. Så vi kommer til å gå gjennom fire trinn starter fra scratch for å bygge dette. 

Ok, så de fire trinnene, vil vi starter med det første skrittet. Det første trinnet skal være bygge din første komponenten. Som jeg sa tidligere, en komponent i React er bare et HTML-element på steroider. Den angir HTML og noen atferd, og det vil angi hvordan folk kan samhandle med det hvordan det ville ha intern tilstand. Som en knapp vil vite som hvor mange ganger det er blitt klikket for eksempel og det vil vite hvordan du skal legge seg ut. 

Så la oss gå videre og bygge vår første komponenten ved hjelp av Javascript. Så hvis syntaksen ser rart, det er fordi den slags er. Så, igjen, vi skal for å lage en variabel kalt app bruke søkeordet la, som gjør en variabel, la App lik React.createClass. 

Reagere er et bibliotek og har Opprett klassen funksjon. Og denne funksjonen er en bit av koden som du kan bruke til å opprette en ny type React komponent. Og så React.createClass gjør en komponent, og denne komponenten vil kunne gjøre ting. Det viktigste den kan gjøre er å gjengi noe, render som en funksjon. 

Igjen, hvis denne indeksen er ikke opplagt for deg, anbefaler jeg at du går på JS for katter og sjekke det ut. Er det zoomet inn godt nok? Kjølig. 

Så hver komponent behov å ha en gjengi funksjon. Gjengi funksjon sier, hva skriver jeg ut på skjermen? Men komponenten ubrukelig hvis den ikke gjør det vet hva du skal skrive ut på skjermen, slik at du må ha en render funksjon. 

Så i gjengi ting, du trenger bare å gå tilbake litt HTML. Og hva som er kult er at det er en ting som heter JSX, som er en forlengelse av Javascript som brukes av reagerer. Det lar deg skrive HTML inne av Javascript, noe som høres litt rart når du først tenker på det, men det gjør mye fornuftig etterpå. Så vi kan gjøre dette. Hvis du er kjent med HTML, jeg vet vi har en div med en generell beholder for ting. Vi kan returnere en div, og inne Dette div, kan vi sette ting. 

Så la oss si at vi ønsker å gjengi bare en straight-up spørje for nå. Den spørje, vil jeg si, vil ha en spørsmål og svar. Så inne i denne div, la oss skrive ut et avsnitt som sier question-- Hva er den ultimate svaret på livet, universet? Og så er svaret kommer til å være, selvfølgelig, 42. 

Som ikke kom seg godt i det hele tatt. Ja, så i utgangspunktet kan du virkelig skrive HTML inne Javascript. Og dette kommer til å være skrives ut i skjermen. Så la oss prøve det ut. 

Så vi har vår komponent. Vi må fortelle React å sette komponenten på skjermen så React.render, så merker at vi behandle app som alle andre element. Vi skriver det som det var et HTML-element. Som i stedet for å si som img for bilde eller p for ledd, du skriver App, så App er behandlet som en HTML-element. Som jeg sa tidligere, er det et element på steroider. 

Så du gjengi App, og du gi den et sted å sette den. Og dette er hvordan du kan forteller det hvor du skal plassere den. Jeg har laget en enkel div på side kalt med en ID på siden, og det er der element kommer til å gå. 

Og vi kommer til å kjøre med HTML. I utgangspunktet er dette kommer til å få sette innsiden av denne siden element at vi har på skjermen. Så det går denne koden, og det trekker dette ting på skjermen, så her er vi. Vi har gjort vår første React komponent. 

Så akkurat som en oppsummering, vi forsiktig gjort en ny type komponent, til høyre? Det er hva React.createClass. Og ved at komponent, vi fortalte det hva den skal gjøre. Når denne komponenten er å skrives inn på skjermen, det vil skrive ut div med de to avsnittene innsiden av det. 

Og hva vi gjorde, gjorde vi en ny app hjelp av vinkeljern app notasjon. Vi fortalte det for å si det inne på siden element. Og så det jeg gjorde, det skapte en ny app fra denne malen. Og da jeg fortalte det til å gjengi det. Så det er sagt, OK, app, hva skal jeg skrive ut? App sier, gå skrive ut en div med to avsnittene innsiden av det. Og voila, det er vår div med to avsnittene innsiden av det. Fornuftig så langt? 

Så, igjen, hele utfordringen med React er bare å vite hvordan å lage komponenter. Hvordan lage den komponentene fungerer sammen. Nå som vi har gjort vår første komponent, la oss gå tilbake og lage komponenter tilpasses. Så du vet hvordan i HTML deg kan gi dine knapper klasser? Du kan gi dine ankere href. Du kan gi dine innspill en type, ikke sant? Du kan gi mer tilpasset egenskaper til alle dine elementer for å gjøre det mer interessant. Og vi faktisk kan gjøre akkurat det samme. 

Så la oss si at vi ønsker vår app for å gå gjengi noen kort. Akkurat nå er vi bare gjengitt en hardkodet kort. Vi vet at det er bare én kort den kan gjøre, så vi er skal prøve og endre dette nå så at vi kan bare gi det litt kort. Det vil skrive ut kortet. 

Du burde prøve og gjøre komponenter et veldig generelt. Så denne måten jeg kunne email dette er min venn og bli som, hva spørje du har, bare mate den inn her, og det vil gjøre det av seg selv. Du kan sette andre ting i din egen app. 

Men først, la oss bryte dette opp i to komponenter, men vi ønsker å skille ut kortet utskrift del fra selve appen delen. Så det vi kan gjøre er vi kan endre dette fra App til CardView, bare en nytt navn for app, og vi kan lage en ny komponent kalt App, må ikke forveksles med den gamle App. Vi har de createClass, og som i HTML, du kan reir React komponenter Innsiden av hverandre. 

Så i denne gjengi funksjon, funksjon retur CardView, og dette er akkurat det samme. Se hvorfor det er det samme? I stedet for å gjengi bare app som har div og sammenkobling innsiden av det, app gjengir CardView, og CardView gjengir div og ledd. Så dette er vår første eksempelet på nesting elementer inne i hverandre. Gir det mening? Så, igjen, har vi en CardView element. Vi har app elementer at det er større enn. 

OK, så vi ønsker at våre CardView-- hvis du gi en god CardView et bestemt kort, det vil skrive ut for deg, ikke sant? Så først må vi lage et kort, så la oss lage et kort objekt. Så la kortet mitt equal-- hvis du er alle kjent, dette er bare notasjon-making objekt i Javascript. Det er litt som en struct i C, så vi gjorde et kort, og så nå kan vi passere dette kortet som en eiendom eller som et attributt i HTML terminologi til vår app. Så vi kan gjøre dette, App kortet tilsvarer myCard. 

Du vet hvordan i input, gjør du input type lik tekst eller knappen klasse tilsvarer btn for bootstrap ,? Samme ideen, App kort equals-- du er nødt til å sette tannregulering her-- App-kortet er lik myCard, så dette sier at vi har dette kortet objektet. Jeg kommer til å gi det som en eiendom til app-komponenten. Og dette programmet komponent vil kunne få tilgang til det og gjøre interessant ting med den. 

Så vår app kommer til å være gitt et kort, så for nå, la oss ha app bare gi kortet til CardView selv fordi som app er ikke kommer til å vite hva de skal gjøre med det, så vi får bare gi den til CardView. Så vi vil passere det samme måte, er lik kort, og slik at hver komponent kan åpne ting som har blitt gitt til det. De kan få tilgang til egenskapene som har blitt gitt til det bruker denne syntaksen, this.props.card. 

Så hva skjer her er du har myCard objektet. Du passerer den inn i app ved hjelp av App-kortet tilsvarer myCard. Dette kortet objekt er gitt til programmet ditt. Appen har tilgang til den som this.props.card. Det er litt som et bilde vet hva det er kilden er. 

Denne appen vet hva det er kort er, og det kan gjøre ting med det. Det kan gjøre beregninger. Det kan ta avgjørelser basert ut av det. 

For nå, jeg skulle til å passere this.props.card på CardView. Fornuftig så langt? Det vil være mer fornuftig nå. 

OK, så nå er vi på CardView. Vår CardView, gitt kortet, bør skrive ut sin spørsmål og svar. Akkurat nå er vi bare skrives ut noen hardkodede spørsmål og svar. Vi må finne out-- vi trenger å spørre kortet som de ga oss hva er spørsmålet og svaret, og deretter skrive ut dette inn i skjermen. 

Så vi kan gjøre dette her. I gjengi begin-- først gjøre lik. Så det vi gjør her er at vi vet at kortene er gitt oss til en eiendom, høyre? Det har gitt oss som en inngang. Som det er nesten som argumenter til en funksjon. Kortet er et argument nesten til dette CardView. 

Vi vil trekke ut det, og sette den i den variable spørsmålet. Pass på at svaret gikk til variabelen svaret. Ber dette kortet til å svare. Og nå som vi har disse, i stedet for å skrive ut som tekst, vi kommer til å skrive ut hva de ga oss. 

Så dette stuff-- så vi kommer å sette ut Spørsmål Svar. La oss se om dette fungerer. Kult, så la oss gå gjennom det en gang til bare for å være sikker. 

Så kortet mitt er kort objekt, og vi gir dette kortet til app. Og app kommer til å ta den kort og gi det til CardView. Og dette CardView sier, hvis du gi meg noen spørje objekt, Jeg skal skrive ut sitt spørsmål og svaret, ikke sant? 

Så det jeg kan gjøre er at jeg kan sende denne kode, den første som 10 linjer med koden min, til min venn. Han kunne legge det i sin egen søknad. Og så lenge han gjorde det samme, som CardView kortet er lik denne, så lenge han skapte CardView og ga det riktig informasjon, han kunne gjengi hans eget kort. Og så denne måten, er det en virkelig kul måte for deg å bygge komponenter som bruker hverandre, ikke sant? Dette kortet, jeg kunne publisere dette CardView på internett, og folk ville være i stand til å bruke den. Så i utgangspunktet, er det som en av de standard funksjoner i C-bibliotek. 

Det er en funksjon der noen har skrevet det. Du gir en viss innspill. Det vil gi en viss effekt. Du bryr deg ikke hvordan det fungerer internt. Så lenge du gir den riktig innspill, vil det gjøre det riktige utgang. 

Og en komponent kan være tenkt på samme måte. Dette CardView er som en bibliotekfunksjon. Hvis du gir det litt kort som en eiendom, det vil skrive ut innholdet av dette kortet. Som hvis jeg endre kortet mitt til i stedet være som det er 5 pluss 37, det vil oppdatere tilsvarende. Så bare ved å endre input, det blir en viss effekt. Så du kan tenke på komponenter nesten som funksjoner på denne måten, som du kan sette sammen. Du får input, som dette CardView som input, får du utgang. I dette tilfelle er utgang HTML. Fornuftig så langt? Kult, så igjen, egenskaper er hvordan du kan passere informasjon inn i og ut av komponenter. 

OK, så la oss gjøre dette ting interaktiv. Akkurat nå er det litt kjedelig. Hva er [uhørbart]? Du kan skrive ut noen ut, men det er alt den kan gjøre. 

Så la oss gå tilbake til den gamle spørsmålet bare for nå. OK, så akkurat nå disse komponentene er kjedelig fordi alt de gjør, de får innspill. De gjør utgang, ikke sant? Det er litt kjedelig. Vi ønsker å ha vår komponenter for å være i stand til å ha en slags indre tilstand, som husker noe. 

For en spørje, for eksempel, hva slags tilstand vil du kanskje huske i spørje? Hva midlertidig status kan det være lurt å huske for en spørje i spørje app? PUBLIKUM: Enten det er blitt snudd? NEEL Mehta: Ja, ikke sant. Så kan det være lurt å holde styr på er du møte opp eller er du ansiktet ned på kortet. På Facebook, for eksempel, ville du ønsker å huske hvor i news feed er du eller liker som er profil er det du gjør akkurat nå. 

På Messenger, som hva teksten du skriv i boksen, ikke sant? Hvis du oppdaterer siden, går det unna. Men du egentlig ikke bryr deg. Det er bare midlertidig. Yeah? 

PUBLIKUM: [uhørbart] NEEL Mehta: Som en flash kortet, som du kan se spørsmålet side eller svaret side? 

PUBLIKUM: OK. 

NEEL Mehta: Like a tosidige spørje, ikke sant? Ja, så du vil har denne ideen om å nå Jeg har egenskaper, som er som innganger, men staten, som er midlertidig, eh, hvor du er på siden, ikke sant? Igjen, jeg sa i Facebook Messenger, jeg har like som person du viser Facebook eller hvem som er profil, ikke sant? 

Dette er bare midlertidig. Det er viktig å vise brukeren hva som skjer, men oppdatere siden. Det spiller egentlig ingen rolle. Så det er midlertidig tilstand, slik at vi alle det staten. 

Så, igjen, er det staten og rekvisitter. Props er innspill gitt fra datakilden. Staten er akkurat som mislighold. Det er akkurat som ting som gjør ting interaktiv. 

Så i vårt CardView-- la oss ha vår CardView-- så det var hyggelig. Hva vi skal gjøre her, vi skal å berøre CardView og bare CardView. Og så min venn som fikk dette, de vil ikke merke noen forskjell. De ville ikke endre hvilken som helst av sin egen kode, men de ville se sin CardView fikk souped opp. Det er en fin del om komponenter. 

OK, så i vår CardView, la oss prøve og holde styr på om vi avvikle opp eller ned. I React gjør vi dette ved først å spesifisere den opprinnelige tilstanden. Hvor kommer kortet begynne? 

Så vær en funksjon kalt getInitialState funksjon, og vi kommer tilbake en gjenstand. Dette objektet inneholder noen stat, og en stat er bare en nøkkel-verdi-par. Som i instruere, har du en nøkkel og en verdien, må du som navnet er en streng. 

I dette tilfellet, la oss si at fronten er sant. Dette forteller at vi har en stat. En del av staten er en egenskap kalt front. [Uhørbart], så som standard, vi er på forsiden av kortet, og vi kan endre dette som vi snu kortet. Gir mening? 

OK, så i render, akkurat nå er vi viser spørsmålet og svaret. Nå hva vi skal gjøre er viser spørsmålet hvis vi er på forsiden av kortet så svaret er for baksiden av kortet. Det er derfor du gjør alle kortet interaktiv. Så la oss prøve og til dette her. Vel, først bare lage en variabel. Vi kan spørre nå this.state.front. Vi tilgang oppgir det samme vi tilgangs rekvisitter, så this.state.front. 

Hvis vi er foran, deretter teksten er this.props.card.question. Hvis vi er på forsiden av kort, vi kommer til å prøve og grip spørsmålet fra kortet. Ellers, hvis vi er på baksiden av kortet, hva gjør vi? 

PUBLIKUM: Svaret? 

NEEL Mehta: Jepp, så tekst lik this.props.card.answer. Men hvis du legger merke til, bruker vi staten til å ta en beslutning fordi nå komponenten vil se annerledes ut basert av hvordan disse påvirker den. Så i stedet for å skrive ut denne, vi vil bare skrive ut teksten. Kult, så nå, som du ser, vi ser bare på spørsmålet. Og hvis jeg endrer staten her manuelt til fronten er falsk vi får 42 tilbake. 

Så, på nytt, denne komponenten har sin egen stat. Som en knapp vet om det er blitt presset eller ikke, denne tingen vet hva som er på forsiden eller på baksiden. Som standard er det på forsiden. Og så hvis det er på forsiden, vi vil skrive ut spørsmålet. Hvis det er på baksiden, vil vi skrive ut svaret. Så, igjen, er informasjonen gitt er den samme. Det ser bare annerledes basert på hvordan du programmere den. Så, for eksempel Facebook Messenger, selv om du får det samme datakilde, det kan se annerledes fordi staten er annerledes. Du ser på en annen person budskap. 

OK, så dette er vel og bra, men nå er det som faktisk gjør oss i stand til å forandre seg, om våre kort er foran eller bak. Vi kan gjøre dette ved å legge til en flip knapp, en knapp til kortet som vil snu kortet hvis det er [uhørbart]. Så la oss legge til en knapp her, dette knappen, og denne knappen vil si flip. 

Og så akkurat nå, det gjør ikke noe. Det ser bare fint. Det vi kan gjøre er at vi kan legge til et klikk handler, lik onClick this.flip, og vi vil definere flip senere. Men innerst inne, onClick er en funksjon som blir kalt når brukeren klikker det. 

Så knappen vil vite når det er blitt klikket på. Gikk det er blitt klikket, det vil snu kortet. Det er litt som din pizzabud. Du er som, all right, når noen kaller meg, jeg skal levere pizza, ikke sant? 

Du registrere denne lytteren. Du lytter til en hendelse. Du blir kalt, og når hendelse skjer, du gjør noe. Du får pizza. I dette tilfellet, når du klikket, snur du kortet. 

Og så må vi definere en funksjon som vil snu kortet, så vi skal skrive det riktig her, flip-funksjon. Og så hva tror du flip vil gjøre? Igjen dette blir kalt når vi klikker på flip-knappen. Hva bør funksjonen flip gjøre? 

PUBLIKUM: Endre this.state.front fra true til false, false til true. 

NEEL Mehta: Jepp, så ta uansett this.front er-- fronten staten er. Ta front staten, hvis det er sant, gjør det falske. Hvis det er falsk, gjør det sant, ikke sant? Så la oss prøve det. 

Du kan ikke endre tilstand bare ved å gjøre this.state. Du kan ikke gjøre dette. Du kan ikke gjøre det. Du må bruke en funksjon kalt this.setState. 

Så du kan si this.setState forsiden kolon dette der, igjen, utrops punkt betyr det motsatte. Jeg antar at hvis dette. state.front er sant, vil det slå falsk. Så vi vil sette staten fra true til false. Hvis det er falsk, vil vi sette den false til true. 

Bare legge merke til at vi satt og få litt annerledes, og så la oss prøve dette. Bada Bing, se på dette. Flip-knappen vil nå bytte foran til bak staten. 

Og så her er der du ser en litt av magien i React. Som vi aldri fortalt det det å re-gjengi. Vi har aldri fortalt det tegne noe. Hvis du gjør dette uten React, ville du har to-- liker når flip knappen klikkes, du må fortelle det til manuelt re-render, ikke sant? 

Reagere er kult i at hvis du gi det en viss tilstand og egenskaper, det alltid vil gjengi akkurat det samme. Og så når vi gang vi endrer staten og egenskaper, reagerer bare re-gjør hele greia. Den vet at det er en en-til-en korrespondanse mellom stat og parameter og HTML. Så når noen av disse endringene ved gjennom et sett stat, det vil endre hvordan pay er re-rendret. Og så i utgangspunktet React er som venter på å endre. 

Når det endrer noe, det vil re-gjengi hele siden. Og hvis det høres ineffektiv, det er fordi det ville være, men reagerer bruker en ting kalles en Shadow DOM. I stedet for å trekke siden direkte, det holder den virtuelle HTML data i minnet. 

Du vet, er HTML som et tre, som en hierarkisk datastruktur. Det holder en falsk treet i minnet, og når du oppdaterer siden, det vil trekke et falsk treet, og det vil beregne hva endre det behov for å gjøre det for å gjøre de to trærne like. Så i utgangspunktet, er det nesten re-gjengir mye. Og da er det bare liker endringer side i små justeringer som trengs, så det er veldig, veldig, veldig effektiv. 

Så i utgangspunktet React vil når du endrer noe, det vil re-gjengi siden nesten. Det vil finne ut hva trenger jeg å endres for å gjøre den virkelige siden reflektere den virtuelle side, og det vil gjøre det. Det er den virtuelle DOM. Det er en av de største funksjonene i React. 

Gir det mening? Noen spørsmål? Yeah? 

PUBLIKUM: Hvordan virker sammenligne fortsatt til MVC som vi snakket om før som ressurser. 

NEEL Mehta: Ja, spørsmålet Slik er det sammenlignet MVC? Du spurte om ressurser. Vel, la oss snakke om hvordan den fungerer. 

I MVC, ville du oppdatere modellen. I dette tilfellet vil vi ha en kort modell. Utsikten ville ha flip-knappen, og kontrollen ville ha den klaffen funksjon. Så utsikten ville fortelle kontrolleren til å snu flip. Flip ville fortelle modellen til å endre, ikke sant? 

Og så når du gjør en MVC, du lytte for modellen å endre, og du re-gjengi utsikten deretter. Eller du bare nødt til å like har kontrolleren. Vent til modell for å endre, og deretter velge en del av som en ting å endre. Her har vi en ting, men i en stor app, må du gjerne huske hva endringen i hvert enkelt sted, så det er litt irriterende. Og så React er fint fordi den har en Shadow Dom. Det kan ha råd til å bare omskrive hele greia. Du trenger ikke å selektivt som gjett hva som skal oppdateres. 

På Facebook hvis du liker får en ny melding, i MVC, du må huske, OK, endre ting på toppen av side, meldingsikonet. Også pop nytt vindu nederst. Også gjøre en ny ting i dette vinduet. Også spille en lyd. 

Det er en masse ting går ut på samme tid. Og så hvis du ikke gjør det har en Shadow Dom, ville du må gjøre det manuelt fordi du kan ikke bli kvitt hele siden. Du har ikke råd til, så du har å endre hver ting manuelt, noe som er veldig irriterende i MVC. 

Så for å være sparsommelig, de selektivt oppdatere siden som er effektiv, men også irriterende. I React, på grunn av Shadow Dom, du får både ting gratis. Den er effektiv fordi av Shadow Dom. Flaskehalsen er å oppdatere siden. Det er ikke å gjøre treet manipulasjon. Du får effektiviteten. Du får også brukervennlighet fordi hvis du bare skrive om hele siden, men du bare vet, all right, de tingene kommer til å være på siden et sted. Det kan være på et annet sted, men det kommer til å være på siden, ikke sant? Så du bare re-rendret hele greia nesten, og du kan gjøre et par endringer i selve siden. 

Så, igjen, i MVC du måtte velge mellom brukervennlighet og effektivitet, og React, får du begge deler. Så det er bedre. Gir mening? Fast. 

OK, så la oss se la oss snakke litt om trinn 4, hvordan vi kan bygge komponenter. Så vi har denne akkurat nå. Vi har vår kul liten knapp. Vi kan snu det tilbake og frem, og det er alt den gjør. La oss si at vi ønsker å har en annen komponent. La oss si at vår spørje app bør inneholder en liste over alle kortene som du har, så det betyr at vi skal ha en annen komponent. Vel, kanskje kalle det en listevisning. La oss lage en listevisning som eksisterer med CardView, og dette listevisning og CardView vil gjerne arbeide sammen. Og du kan kombinere dem å gjøre vår app for deg. 

Så først, la oss gjøre en par flere kort riktig. La oss si, hvilke kort? Og bare så jeg slipper å kjede deg med å skrive det inn, Jeg skal bare kopiere den herfra. Og så kommer jeg til å ikke gi det bare ett kort. Jeg kommer til å gi det en rekke kort. Så første apps kommer til å bryte for nå. Greit, så vi kommer til å gjøre dette i stand til å håndtere flere kort. Så først, skal vi gi det, ikke bare ett kort, men en rekke kort, som en liste over kortene. Og i dette tilfellet, har vi tre av dem. 

All right, så slik app er kommer til å få en liste kort, og det kommer til å bestemme hvilke en å vise til CardView. Den CardView kan bare gjengi ett kort, men app får en liste over alle kortene, ikke sant? 

Så når du regne ut en kort for å gi til CardView, hvordan ville du antar at du kan være i stand å ta en beslutning om hvilket kort å vise? For å gi deg et hint, er det midlertidig Du vil bli visning av en bestemt kort. Hvis du oppdaterer siden, vil du bare gå tilbake til det første kortet. Det er OK fordi det er midlertidig. Hva teknikk kan vi bruke? 

PUBLIKUM: Du kan lage en variabel så akkurat som du hadde foran. Er dette sant, kunne du har nåværende kort er lik 1? 

NEEL Mehta: Ja, så vi vil ha staten, ikke sant? Du vil bruke staten i komponent for å finne ut hvilket kort vi ønsker å få. Som har vi en liste over alle kortene, vil vi bruke staten til å finne ut en av det første kortet, andre kort, tredje kort, og så videre. 

Så et program så en app vil få en har getInitialState funksjon, getInitialState funksjon retur. Og vi vil bare si activeIndex 0. Så nå vår app har sin egen stat. 

Og så nå gjengi, for å finne ut et kort, la oss bare gå til matrisen og ta tak i ting på at indeksen. Velg kort like this.props.cards this.state.activeIndex. Så som du ser her, rekvisitter og staten faktisk fungerer sammen. Så nå som vi har vår activeCard, vi kaller det activeCard, og la oss se om dette fungerer. [Uhørbart] 

Å, det var en tekst feil. Ah. 

Cool, Jepp, så nå var vi tilbake til der vi var før, ikke sant? Samme gamle program unntatt Nå kan vi støtte en liste over kort, ikke bare ett kort. Og nå, igjen, hvis vi endrer activeIndex, kan vi gå fra 0 til 1, og nå som andre kort, og deretter gikk vi til 0. Så her er en ny trimmet versjon av vår. 

OK, så nå la oss ta en listevisning som viser alle kortene i programmet, så vi vil lage en ny komponent kalt Listview. La Listview tilsvarer react.createClass. Så vi ønsker å gjengi en uordnet liste med et listeelement for hvert kort. Og så har vi en haug med kort. Vi vil ha en listeelement for hvert kort, ikke sant? Vi kan gjøre en for løkke eller noe å lage en ny liste element. Men måten du gjør det på Reagere, bruker noe som heter kart. Kart er et verktøy eller en funksjon du bruker at for hvert element, går noen funksjon, tar returverdi, og gir du det tilbake. 

Så som et eksempel, har vi matrisen 1, 2, 3.map function-- og denne er forkortelse for en function-- x pil x ganger x. Dette sier, for hvert tall i 1, 2, 3, ta den. Kvadrat det, og gi den tilbake. Så hva tror du en, 2, 3.map x går til x ganger x gir deg tilbake gitt at denne funksjonen er kjøres på hvert element i den oppstillingen. 

PUBLIKUM: 1, 4 9? 

NEEL Mehta: Jepp, 1, 4, 9 fordi du gjør 1 ganger 1. Det gir deg en. Det er det første elementet. 

2 ganger 2 er 4. Det er et andre element. 3 ganger 3 er 9. Det er et tredje element. Gir mening? Så Kartet har en teknikk du bruker i funksjonelle programmerere, den nye stilen programmering til å gjøre noe til hvert element i listen. Og så dette høres kjent ut. Vi har en liste over kortene. Vi ønsker å få et listeelement for hver en, så vi får bare bruke kartet her. Vi vil si, la liste equals this.props, kort, kart. 

Og så fikk et kort, vi er kommer til å generere et listeelement med at kortets innholdet side av det. La oss bare si at vi ønsker å gi ut kortene spørsmålet så card.question. Så denne listen inneholder en utvalg av LI-eller listeelementer hvor det er en liste element for hvert kort, og som inneholder kortene spørsmålet. Gir mening? 

Kult, så la oss nå faktisk skrive det ut. Så kommer vi tilbake en ul. Innsiden som sorterte liste, vi vil bare holde fast hele listen at de ga oss. Kjølig. 

Ok, så nå dette listevisning fungerer bare finne. Eventuelle spørsmål om listevisning? Du har en haug med kort. Du gjør et listeelement for hvert kort. Og du putter dem i en uordnet liste, og du gir den tilbake. Så nå la oss handle slik vi legge ned dette inne på vår app, slik at vi kan gjøre dette, listevisning. Hva argument passerer vi trenger til listevisning? Hvilke egenskaper gir vi det? Husk at hvis du gir det en haug med kort, det vil gjøre listen se for disse kortene. Så hva ville vi passere her som argument? PUBLIKUM: En liste over kort? NEEL Mehta: Ja, så kort lik this.props.cards, ikke sant? Og så det eneste problemet er at du kan bare slått et toppnivåelement i gjengi, så du er nødt til å pakke det inn i en div. Det er rart. Så la oss se om det. Betyr det fungere? 

Jepp, der du går. Så nå har vi en liste av kortene i bunnen, og da har vi vår CardView seg selv på toppen, og som vil snu mellom de to sidene av kortet. Nå gjør det fornuftig hvordan jeg gjorde det? Ja, så igjen, vi har to komponenter. Den første komponenten utskrifter ut hver kortet i listen. Det er listevisning. Og den andre komponenten skriver ut akkurat dette kortet. Hvis du gir den en viss kort, det vil skrive ut informasjon om dette kortet og la deg bla frem og tilbake. 

Så hvis vi vil, kan vi prøve og snakke om å legge til noen nye funksjoner til dette. Ellers kan vi snakke litt mer av om hastigheten av reaktoren, eller vi kan svare spørsmål du måtte ha fordi disse er alle kjernedeler for å reagere på at jeg ønsker å snakke om. Vi kan gå videre. Vi kan svare på spørsmål. Hva en du vill. 

PUBLIKUM: Kan du bruke JSX i normal Javascript? Eller er det noe som kom med [uhørbart]? 

NEEL Mehta: Spørsmålet er boks du bruker JSX med normal Javascript? Svaret er ja. JSX er bare en måte det tar Javascript som har HTML innsiden av den, og det kompilerer til Javascript som har ikke HTML innsiden av det. Så oppdager at-- så merke til her. Dette ser ut som du har som div og du har ting inne i den. 

Som kompilerer til Javascript som som genererer det samme. Jeg antar det jeg sier er at JSX er bare en syntaktisk, som det er en preprosessor for Javascript mye som PHP er en preprosessor for HTML. JSC er en preprosessor for Javascript som lar du putter HTML innsiden av Javascript. Og så hvis du har rett til transformatoren som er en ting som heter [uhørbart], som vil forandre. Høyre preprosessor, det vil la deg gjøre det. 

PUBLIKUM: [uhørbart] NEEL Mehta: Vanligvis trenger du ikke å sette HTML innsiden av Javascript med mindre du gjør React. Men du kan gjøre det likevel. Jepp? 

PUBLIKUM: Jeg tror du hadde beskrevet React som en funksjonell programmering språk. Vi har vært å lære C i CS50. Er C også et funksjonelt språk? NEEL Mehta: Så spørsmålet handler om funksjonell versus en annen ting som heter maktpåliggende eller prosedyreorientert programmering. Det finnes to typer programmer populære. En kalles prosessuell, som handler om som gjør kommandoer, og en er funksjonell, som er alt om å ha funksjoner og ha inngang og utgang av disse. React er en funksjonell paradigme. C er en meget prosedyre paradigme. 

Og som et eksempel, C f.eks du ikke gjør dette deklarative måte med å lage programmet, ikke sant? Du har å si, skrive dette. Endre dette datastruktur. Skriv ut dette. Det handler om kommandoer. 

I React, det er ikke at mange kommandoer. Det handler om å ha komponentene du satt sammen. De er som funksjoner. Du har som en funksjon kalt CardView, som er en funksjon som har inngang, utgang, og så React er alt om denne filosofien oss av having-- du har data. Du passerer det gjennom denne algoritme, og det vil utgang HTML som du bare trykt på siden, og så må du bygge det bit for bit. 

Så for å trekke en metafor for hva Jeg sa før, vet du hvordan på Facebook hvis du får en melding, og du kan velge hvilke deler å oppdatere, det er prosessuelle. Det er viktig, ikke sant? OK, jeg fikk en melding. La oss endre konto der. 

La oss komme et vindu her. La oss endre konto der. La oss trekke dette her. Det er en prosessuell tilnærming. 

Det er det ting som Hjørne, Boost, Backbone, andre rammer bruke. React er funksjonell. Det er en helt annen måte for å tenke på ting. Det tar denne ideen om å la oss ha funksjoner eller algoritmer som vil deg gi det data. Det vil spytte ut hva det bør være, og datamaskinen vil ta seg av veier ut. Du trenger ikke å håndtere det selv. Gjør det litt fornuft? Yeah? 

PUBLIKUM: I et funksjonelt språk, alt skjer på en gang? 

NEEL Mehta: Nei, ting skjer i rekkefølge. Som her er det fortsatt rekkefølge, men det gjør ikke skje i rekkefølge av like rose, kommando, kommando. Det skjer i rekkefølge funksjonen gir deg utgang. Sette det inn i en annen funksjon. Sette det inn i en annen funksjon, en annen funksjon. 

Hvis du gjør CS51, vil du lære funksjonelle programmer litt ut av omfanget av denne. Men innerst inne, hva gjør Reagere kult er ikke bare den enveis datastrøm og den virtuelle Dom, men også denne ideen om funksjonell programmering. Og funksjonell programmering er veldig lett å komponere og gjøre kule ting ut av, og det er veldig lett å tenke om og grunn om. Så det er en annen god trekning av React. Flere spørsmål? Yeah? 

PUBLIKUM: Um, hvorfor skulle du bruker la i motsetning til Var? 

NEEL Mehta: Så spørsmålet er hvorfor du bruker la istedenfor Var? Dette er noe som heter ES6 eller ECMAScript 6. Det er den nye versjonen av Javascript. Det er en haug av tekniske årsaker, Men la er en bedre versjon av var. 

Det er hvordan du deklarere variabler. Du kan bruke utleid. Du kan bruke var. Let har en haug med teknisk reasons-- du kan se dem opp later-- for hvorfor det er bedre. I utgangspunktet har ES6 noe hyggelig ny syntaks, noen nye funksjoner på toppen av den gamle Javascript. 

Så vi har som fem minutter. Jeg ville bare snakke om en ting virkelig fort. Hvis du har spørsmål, la oss snakke om det etter dette. Men bare så dette blir fanget på kamera, jeg bare ønsker å snakke litt om hvordan du faktisk bruke React i dine apps. 

Hvis du går her, Facebook.GitHub.IO/react, dette er hjemmesiden for React, og det vil vise deg hvordan du faktisk bruker Reagere på sidene dine. I utgangspunktet er det en liten komplisert prøver å installere reagere. Det er ikke så lett som du bare dra og slippe en Javascript der. 

Du må ha din transformator satt opp, som vil, som det gjorde før, slå JSX inn normal Javascript. Du må tingen som vil kompilere du ES6 til det normale. Java det er mye i bevegelse delene du trenger å gjøre, så det er en ting kalt Yeoman, Yeoman.io. Og dette er et kommandolinjeverktøy som vil hjelpe deg stillas ut React prosjekter lett. 

Så du kan lese om dette senere, men det er noen verktøy at Yeoman tilbyr. De vil la deg lage en React app med alt innebygd. Som det vil ha bygget i, komponenter bygget i. Det vil ha din transformator bygget i. De har mange kule ting bygget i automatisk ved hjelp av disse tingene kalles generatorer. 

Så les om dette hvis du vil. Bare gå på Yeoman, Y-E-O-M-A-N, og du kan finne generatorer som disse. Og med generatorer som disse, du bare liker én er et par kommandolinje-kommandoer. Det vil stillas ut en Hele React app for deg. Det vil få all den manuelle rør, og grovarbeidet gjort for deg, og dette er grunnen til at du bare fokusere på bare å skrive i React. 

Så i utgangspunktet bygge en Reagere app er triviell. Det er kablet alle sammen, men det er verktøy som vil gjøre det for deg. Så hvis du ønsker å gjøre en React app, prøv å gjøre det på den måten. Hvis du bare ønsker å eksperimentere, du kan prøve å bruke dette CodePen fordi dette CodePen har alle reagerer ledninger. Jeg har gjort alt arbeidet for deg allerede. 

Så hvis du ønsker å gjøre som en produksjon for å frigjøre React app, prøve en av disse generatorer. Hvis du bare vil spille rundt, er det ofte verdt bare som prøver å spille rundt på CodePen her. Høres bra? Kjølig. 

Så det er alt jeg har. Igjen, all kode og eksempler er kommer til å være på denne nettsiden her. Så, igjen, vi snakket ikke om mye syntaks av React, men for å finne alle de små syntaktiske detaljer, det er alle kommer til å være tilgjengelig på denne nettsiden her. 

Så jeg vil anbefale som ta det første skrittet. Sett det inn i din CodePen. Prøv arbeider med å gjøre det til det andre trinnet. Det er et fjerde trinn, og bare se hvor du får fra det. 

Flere spørsmål, sjekk ut at siden eller send meg. Det er min e-post. Men jeg vil gjerne hjelpe deg med noen spørsmål du måtte ha om React. Så, ja, det er alt jeg har. Takk så mye for ser eller for å delta. Og jeg skal ta noen spørsmål du kan ha etter dette nå. Så takk alle for å se på.