[Musik spiller] 

NEEL MEHTA: Her går. 

Nå, alle, velkommen til web apps i fremtiden med at reagere. Det er CS50. Mit navn er Neel. Jeg er en TA for CS50 og en sophomore på Harvard College og en meget, meget passioneret webudvikler. Så jeg er meget spændende at tale med dig i dag, uanset om du er her eller i hjemmet ser, om at reagere, hvilket er igen som jeg sagde, fremtiden for web apps. 

Så reagere er et web rammer. Og som jeg har været at fortælle til nogle folk her, rammer er blot en sæt af værktøjer, du kan bruge at strukturere og opbygge din web-app. Og web apps er, igen, hjemmesider der er interaktive som Facebook, Twitter.com, Instagram.com, uanset hvad. 

Så Facebook er et web ramme der blev udviklet af Facebook et par år tilbage-- REACT er. Det er siden blevet anvendt i Facebook på deres mobile apps og web-app, Instagram. Khan Academy er en anden fremtrædende tidlig adoptant af React. 

Det er virkelig været at få meget populære. Hvis du nogensinde bruger ting som Vinkel eller Backbone, er af samme familie, men det har siden langt overgå deres popularitet. Det er den nye hot ting. Det er virkelig, virkelig enorme. 

Og så reagere er godt ikke blot som en web rammer for opbygning af grænseflader. Det er godt til at bygge web-grænseflader. Der er også en ting kaldet React Native som lader dig bygge interfaces til Android og iOS og måske andre platforme i fremtiden ved hjælp af blot den samme JavaScript-kode. Du kan bruge nøjagtig samme JavaScript-kode til at gøre hjemmesider, at gøre Android-apps og iOS apps. 

Det er en meget, meget spændende tid. Det er en virkelig, virkelig cool lejlighed. Det er virkelig en universel web grænseflade udviklingsværktøj, så det er en meget, meget vigtige ting at vide. Og som jeg fortalte folk før dette, tror jeg, kommer til at ændre, hvordan vi bygge web-apps evigt. Så det er måske en smule overdrivelse, men jeg synes det er en temmelig god ting at vide. 

OK, så hvad er reagere? Reager er en ramme, du kan bruge til opbygning grænseflader. En grænseflade er, igen, en webside, ikke? Så her er Instagram.com, anvendelser reagere. 

Reagere er bygget på idéen om komponenter. En komponent er en HTML element på steroider, så et HTML-element er som en knap. Det er et afsnit. Det er en overskrift, ikke? Og Instagram vil bruge disse, men det vil også bruge komponenter for at reagere. 

React komponenter er tunet HTML-elementer der har deres egen adfærd indeholdt i dem. Så som et eksempel, kunne vi have gangen element, en tidskomponent, som vil indeholde ligesom tidsstemplet, du ved, en profil komponent, som vil indeholde profilbillede og navnet på den person. Det kan have en lignende tæller, som kan tælle som antallet af folk, og hvis du klikker på det, det vil øge antallet af folk. En komponent er blot en bundt af HTML-kode, har nogle funktioner pakket inde i den. Så det er ligesom en HTML-element på steroider, som jeg sagde før. Du kan tage disse komponenter, og du kan sætte dem sammen at få nye komponenter i dette tilfælde en post-komponent, som indeholder alle disse ting. Det ville indeholde tid, Profile, LikeCounter, måske kommentaren og måske selve billedet. Og så web apps er netop bygget ved at tage komponenter og sætte dem sammen. En Instagram-feed er intet mere end en flok af stillinger ene efter den anden, hvert indlæg indeholder ligesom Time, Profil, LikeCounter, og så videre. Det er lidt ligesom at bygge et hus. Du behøver ikke at bygge hus fra toppen og ned. Du tager components-- dig tage ligesom badeværelset. Du tager bedroom-- du holder dem sammen, og du har en ny komponent. Du har en ny del af huset. 

Så REACT er alle bygget op omkring denne idé af komponenter, er interaktive, som er deklarativ. Ligesom du bare sige, hvad en profil er, og det gør det. De er kombinerbare. Du kan tage en tid og en profil, sætte dem sammen, lave noget bedre. Og de er genanvendelige, så hvis du have kildekoden til et indlæg, du kunne integrere det nogen steder. 

Du kan indlejre en Instagram ting på din egen hjemmeside. Du kan integrere i Facebook, for eksempel, så længe den anvender React så godt. Så komponenter er virkelig, virkelig, virkelig kraftfulde byggesten nettet der kan anvendes overalt og sat sammen for at gøre nye byggesten. Det er den meget, meget højt niveau overblik. Så igen, hvis du har eventuelle spørgsmål på ethvert punkt om filosofi reaktor, den kodning, for at stoppe mig, og lad mig vide. 

OK, så reagerer er cool, fordi det har en anden måde at se på, hvordan du bygge web apps. Du har sikkert hørt om MVC, en model, du styrer i CS50 eller hvad andre sondering klasser, du bruger. Og de fleste rammer er bygget op omkring ideen om MVC. Reagerer ikke. REACT er bygget op omkring ideen af ensrettet datastrøm som det fremgår af dette diagram eller grafik her. 

Dybest set, du har en datakilde. Og datakilden vil beslutte hvordan at lægge visse komponenter. Og komponenterne vil så, når de ændrer, de vil fortælle datakilde at ændre. 

Hvis du vil bruge Instagram eksempel kan du have en liste af post genstande som i en database eller noget. At de data. Og derefter vores post-komponenter vil tage, at data, og bruge disse data til at gengive en ting på skærmen. Det er, hvad pilen fra data til komponent er, og derefter den samme data bliver brugt at gøre en masse af komponenter. 

I Facebook Messenger, for eksempel, som er React, du måske har en liste over meddelelser som din datakilde. Og det ville gøre ikke kun listen over beskeder men også en liste over de venner, du har. Du har ulæste. Måske også gøre Facebook-ting der er i bunden af ​​Facebook.com. De samme data er en enkelt kilde af sandhed og som forårsager en masse komponenter, der skal gengives. Og når en af ​​dem komponenter ændres, det går tilbage og ændrer datakilden. 

Du sender en besked, ikke? Der ændrer datakilden. Du læser dine beskeder, så du sætter ulæst til 0. Der ændrer datakilden. Og bemærk, at alle disse på en pil gå tilbage til de samme data kilde, så du ved, givet en vis datasæt, du ved præcis, hvad det side kommer til at se ud. Det er deterministisk. Du ved, givet visse oplysninger, hvad siden kommer til at se ud. Du kan forudsige, hvordan det kommer til at opfører sig og hvordan det går at arbejde, når de er sat sammen. 

Og hvis jeg havde en million komponenter her, ville det opfører sig på samme, ikke? Du ville ikke have nogen mærkelige sammenkoblinger. Et data gengives en million komponenter. En million komponenter kunne gå tilbage og redigere dataene. Og så dette er meget rart. Vi bygger kombinerbare, let skalerbare web apps. 

Du har en datakilde, kilden til sandheden. Det fortæller dine komponenter hvordan man lægge ud på siden, og komponenterne vil håndtere interaktion. Og hvis de ønsker at ændre ting, bare gå tilbage og fortælle datakilden til at ændre. Give mening? Så React handler om forståelse hvordan man opbygger en komponent og hvordan man kan gøre din komponent interagere med omverdenen. 

Gøre komponent interagerer med omverdenen anvender en anden teknologi kaldet Flux, som er en ramme, der er tilføjet på toppen af ​​reagere. Vi kommer ikke til at tale om det. Vi kommer til at tale mere om, givet data, hvordan kan du gengive en komponent? 

Og så reagere er virkelig cool, fordi du kan bruge det med enhver bagenden, du ønsker. Hvis du har ligesom en Python back ende, hvis din Python kan spytte ud nogle data, React kan gøre det. Hvis du ikke er JS udgange af data, React gør det. Ruby skinner op med data, React gør det. 

Så React er dybest set en web visning-- en forende med komponenter til hvilken som helst datakilde. Og så går fra datakilden til reagerer komponenter er temmelig let. Går den anden vej er lidt sværere. Der bruger Flux som jeg nævnte før. Vi vil ikke komme ind i denne. Vi vil fokusere mere på data-til-komponenten side. Denne måde kan du gøre cool, sjov web apps. Det vil ikke påvirke omverdenen for nu, men det er en anden historie. 

OK, så hvis du var her til min sidste seminar du ved, at alle koden for dagens snak kommer til at være på denne URL her, undskyld, denne URL her. Og dybest set er vi kommer til at gå gennem fire trin, måske fem, sandsynligvis ikke fem. Vi vil bevæge sig gennem fire trin opbygge en prøve React app. Og så alle kildekoden for hvert skridt på vejen kommer til at være lige her, så hvis du følger sammen derhjemme, velkommen til at granske denne kode. Hvis du følger sammen her, vi vil vise det på skærmen, så du skal ikke bekymre dig om det. Men hvis du er hjemme, føler velkommen til at besøge denne hjemmeside. Og Ja, skal du være i stand til at få al den kode, du nogensinde havde brug for her. Så det er en god bedrager ark samt til dine fremtidige eventyr med React. Cool, så hvis alle, der er her, og selv hvis du er hjemme, trække op denne hjemmeside, is.gd/cs50react, ingen kapital, ingen understregning, ingen ingenting. 

Du vil se en side, der ser lidt ligesom dette. Dette er en ting kaldet CodePen. CodePen er et samarbejdsprojekt kodning miljø som jeg kan skrive kode her, og det vil automatisk blive sendt til dig. Og til denne måde kan jeg skrive kode. Jeg kan køre kode. 

For example-- og hvis det reloads-- se, Jeg kører JavaScript-kode på siden lige her, og det vil automatisk gengive en webside med denne JavaScript-kode. Og så dette er en måde for os at afprøve kode virkelig hurtig uden at skulle bruge vores id eller bruge vores lokale maskine eller hvad. Det er en meget hurtig måde for dig at mockup og afprøve forskellige former for kode. 

Så jeg har tænkt mig at tage eksempel kode, sætte det her. Vi kommer til at arbejde gennem det. Og hvis du er hjemme, du kan trække dette op så godt. Og jeg har allerede installeret Reagerer her, så du kan bare skrive din egen kode her, og Prøv det som din egen legeplads. 

Ja, hvis alle til åbne op dette link her. Giv mig en thumbs op når du har det åbent. Fedt fedt fedt. Der er ikke noget her for nu, men Vi vil ændre det meget snart. 

OK, så reagere er en JavaScript bibliotek, og som sådan, kræver kendskab til JavaScript, som er programmeringssprog. Og det bliver brugt til andre ting nu også men først og fremmest på nettet udvikler sprog, så hvis du ikke er bekendt med at læse et websted kaldet JSforCats.com. Det er vidunderligt. Du kan lære JavaScript om en halv time. Det er utroligt. 

Så giv det en læse. Vi har også en masse HTML her, fordi vi designe websider selvfølgelig. Så hvis du er bekendt med HTML, så tjek HTMLdog.com. Jeg tror at lære Reager er en million gange lettere, hvis du allerede kende byggesten. Hvis du har de komponenter, er det let at gøre en større komponent. Det er React sprog for dig. 

Så gå videre og give disse ting læse. Pause denne video. Giv det en læser, hvis du er derhjemme, hvis du ikke er fortrolig med HTML eller JavaScript OK, så hvad vi vil gøre, er at vi kommer til at gøre en meget grundlæggende flashkort app hjælp reagere. Vi kommer til at have en flashkort. Du kan bladre kortet frem og tilbage. Og vi vil også have en liste over alle de kort, vi har, og hvis vi føler ambitiøs, kan vi være i stand til at skifte mellem biler ved at klikke på dem. 

Men dette er, af din nøgne knogler, en meget enkel React app. Og så det er faktisk ikke trivielt at gennemføre, men vi vil vise, at, hvis du gør dette, er det meget, meget nemt at udvide det hvis andre mennesker hjælpe dig med det. Så vi kommer til at gå igennem fire trin starter fra bunden at bygge denne. 

OK, så de fire trin, vi får starter med det første skridt. Det første skridt vil være opbygge din første komponent. Som jeg sagde før, en komponent i React er blot et HTML-element på steroider. Den angiver HTML og nogle adfærd, og det vil angive, hvordan folk kan interagere med det, hvordan det ville have interne tilstand. Ligesom en knap vil vide ligesom hvor mange gange det er blevet klikket f.eks og det vil vide, hvordan at lægge sig ud. 

Så lad os gå videre og opbygge vores første komponent ved hjælp af JavaScript. Så hvis syntaksen ser mærkeligt, det er fordi den slags er. Så igen, vi vil at foretage en variabel kaldet app at bruge søgeordet lad, hvilket gør en variabel, lad App lige React.createClass. 

Reager er et bibliotek og har den skaber klassen funktionen. Og denne funktion er lidt af kode, som du kan bruge til at oprette en ny type React komponent. Og så React.createClass gør en komponent, og denne komponent vil være i stand til at gøre ting. Den vigtigste ting, det kan gøre, er gengive noget, gengivet som en funktion. 

Igen, hvis dette indeks ikke er indlysende for dig, jeg anbefale du går på JS til katte og tjekke det ud. Er det zoomet ind godt nok? Afkøle. 

Så hver komponent behov at have en render funktion. Den gør funktionen siger, hvad skal jeg udskrive på skærmen? Men komponenten ubrugelig, hvis den ikke gør det ved, hvad der skal udskrives på skærmen, så du skal have en render funktion. 

Så i gør ting, du bare nødt til at returnere nogle HTML. Og hvad er cool, er, at der er en ting kaldet JSX, som er en forlængelse af JavaScript, der bruges af reagere. Det lader dig skrive HTML inde af din JavaScript, som lyde lidt underligt, når du først tænker over det, men det gør en masse forstand bagefter. Så vi kan gøre dette. Hvis du er fortrolig med HTML, jeg kender vi har en div med en generel beholder til ting. Vi kan returnere en div, og inde denne div, kan vi sætte ting. 

Så lad os sige, vi ønsker at gøre bare en straight-up flashkort for nu. Den flashcard, vil jeg sige, vil have en spørgsmål og svar. Så inde i denne div, lad os udskrive et afsnit der siger question-- Hvad er den ultimative svar på livet, universet? Og så er svaret vil være, selvfølgelig, 42. 

Det kom ikke op godt på alle. Ja, så dybest set kan du virkelig skrive HTML i din JavaScript. Og det vil være udskrives i skærmen. Så lad os prøve det. 

Så vi har vores komponent. Vi er nødt til at fortælle Reager at sætte komponenten på skærmen så React.render, så mærke til, at vi behandle app ligesom noget andet grundstof. Vi skriver det som det var et HTML-element. Ligesom stedet for at sige ligesom img til billede eller p for stykke, du skriver App, så App er behandlet som et HTML-element. Som jeg sagde før, er det et element på steroider. 

Så du gør App, og du give det et sted at sætte den. Og dette er, hvordan du kan fortælle det, hvor at sætte det. Jeg har lavet en simpel div på side kaldet med et ID på side, og det er, hvor element kommer til at gå. 

Og vi kommer ikke til at køre med HTML. Dybest set dette vil få sætte indersiden af ​​denne side element at vi har på skærmen. Så det kører denne kode, og det trækker det ting på skærmen, så her er vi. Vi har gjort vores første React komponent. 

Så lige som et resumé, vi forsigtigt gjort en ny type komponent, ikke? Det er, hvad det React.createClass. Og i komponenten, vi fortalte den, hvad den skal gøre. Når denne komponent er at udskrives på skærmen, det vil udskrive div med de to stykker inde i den. 

Og hvad vi gjorde, vi gjorde en ny app ved hjælp af vinkelbeslag app notation. Vi fortalte det til at sætte det inde i siden element. Og så hvad jeg gjorde, det skabte en ny app fra denne skabelon. Og så fortalte jeg det til at gengive den. Så det sagde, OK, app, hvad skal jeg udskrive? App siger, gå udskrive en div med to stykker inde i den. Og voila, der er vores div med to stykker inde i den. Mening indtil nu? 

Så igen, hele udfordring React er bare at vide, hvordan man laver komponenter. Hvordan laver komponenter arbejder sammen. Nu, hvor vi har lavet vores første komponent, lad os gå tilbage og gøre komponenter tilpasses. Så du ved, hvordan i HTML dig kan give dine knapper klasser? Du kan give dine ankre href. Du kan give dine input en type, ikke? Du kan give mere skik egenskaber til alle dine elementer at gøre det mere interessant. Og vi faktisk kan gøre præcis de samme ting. 

Så lad os sige, vi ønsker, at vores app til at gå gøre enhver kort. Lige nu er vi bare gjort et hardcodede kort. Vi ved, der er kun én kort det kan gøre, så vi er vil forsøge at ændre dette nu så at vi bare kan give det nogle kort. Det vil udskrive kortet. 

Du burde forsøge at gøre din komponenter en meget generel formål. Så denne måde, jeg kunne e-mail dette til min ven og være ligesom, uanset flashkort du har, bare fodre den ind her, og det vil gøre det af sig selv. Du kan sætte andre ting i din egen app. 

Men først, lad os bryde denne op i to dele, men vi ønsker at adskille kortet trykning del fra den faktiske app del. Så det, vi kan gøre, er vi kan ændre dette fra App til CardView, bare en nyt navn til den app, og vi kan lave en ny komponent kaldet App, ikke at forveksle med den gamle App. Vi har fået de createClass, og ligesom i HTML, du kan indlejre React komponenter indersiden af ​​hinanden. 

Så i det gøre funktionen, funktion retur CardView, og det er præcis det samme. Se hvorfor det er det samme? I stedet for at gøre netop det app, har div og parring inde i det, app gør CardView, og CardView gør div og stk. Så det er vores første eksempel på nesting elementer inde i hinanden. Giver det mening? Så igen, har vi en CardView element. Vi har app elementer at det er større end. 

OK, så vi ønsker, at vores CardView-- hvis du give en god CardView en bestemt kort, det vil printe ud for dig, ikke? Så først skal vi lave et kort, så lad os gøre en kort objekt. Så lad mit kort equal-- hvis du er alle bekendt, dette er blot notationen for øje objekt i JavaScript. Det er lidt ligesom en struct i C, så vi lavede en kort, og så nu kan vi passerer dette kort som en ejendom eller som en attribut i HTML terminologi til vores app. Så vi kan gøre dette, App kort lig myCard. 

Du ved, hvordan i input, du gør input type lig tekst eller knap klasse lig BTN til bootstrap ,? Samme idé, App-kort equals-- du har fået til at sætte seler her-- App-kort er lig myCard, så dette siger, at vi har dette kort objekt. Jeg har tænkt mig at give det som en ejendom til den app komponent. Og denne app komponent vil kunne få adgang til det og gøre interessante ting med det. 

Så vores app vil være givet et kort, så for nu, lad os få den app bare give kortet til CardView sig selv, fordi ligesom app er ikke kommer til at vide, hvad de skal gøre med det, så vi vil bare give det til CardView. Så vi vil passere det samme måde, kort lig, og så hver komponent kan få adgang til ting, der er blevet givet til det. De kan få adgang til egenskaberne der er blevet givet til det bruger denne syntaks, this.props.card. 

Så hvad sker der her er har du myCard objekt. Du passerer det ind i app hjælp App-kort er lig myCard. Det objekt-kort er givet til din app. Den app kan få adgang til det som this.props.card. Det er lidt ligesom et billede ved, hvad det kilde er. 

Denne app ved, hvad det er kort er, og det kan gøre ting med det. Det kan gøre beregninger. Det kan træffe beslutninger baseret ud af det. 

For nu skulle jeg til at passere this.props.card på CardView. Mening indtil nu? Det vil give mere mening nu. 

OK, så nu er vi på CardView. Vores CardView betragtning af kortet, bør udskrive sit spørgsmål og svar. Lige nu er vi bare udskrives nogle hardcodede spørgsmål og svar. Vi er nødt til at regne out-- vi har brug for at spørge det kort, de gav os hvad er spørgsmål og svar, og derefter udskrive dette ud i skærmen. 

Så vi kan gøre dette her. I gør begin-- først gøre lig. Så det, vi laver her er vi ved, at kortene er givet os til en ejendom, højre? Det har givet os som et input. Ligesom det er næsten som argumenter til en funktion. Kortet er et argument næsten til denne CardView. 

Vi vil udtrække det, og sætte den i den variable spørgsmål. Sørg for, at svaret gik til den variable svar. Beder, at kort at besvare. Og nu hvor vi har disse, i stedet for at udskrive denne tekst, vi kommer til at udskrive uanset hvad de gav os. 

Så dette stuff-- så vi skal hen at sætte ud Spørgsmål Svar. Lad os se, om det virker. Cool, så lad os gå gennem det endnu en gang bare for at være sikker. 

Så mit kort er kort objekt, og vi giver det kort til den app. Og den app kommer til at tage den kortet og give det til CardView. Og denne CardView siger, hvis du give mig nogen flashkort objekt, Jeg vil udskrive sit spørgsmål og sit svar, ikke? 

Så hvad jeg kunne gøre, er jeg kan Send denne kode, den første ligesom 10 linjer af min kode, til min ven. Han kunne integrere den i sin egen applikation. Og så længe han gjorde det samme, ligesom CardView kort lig det, så længe han skabte CardView og gav det de rigtige oplysninger, han kunne gøre sit eget kort. Og så på denne måde, det er en rigtig cool måde for dig at opbygge komponenter, der bruger hinanden, ikke? Dette kort, jeg kunne udgive denne CardView på internettet, og folk ville være i stand til at bruge det. Så dybest set, det er ligesom en af ​​de standardfunktioner i C-biblioteket. 

Det er en funktion, hvor nogen har skrevet det. Du giver en vis input. Det vil producere en vis effekt. Du er ligeglad, hvordan det fungerer internt. Så længe du giver den det rigtige input, vil det gøre det rigtige udgang. 

Og en komponent kan være tænkte på samme måde. Denne CardView er ligesom et bibliotek funktion. Hvis du giver det nogle kort som en egenskab, det vil udskrive indholdet af kortet. Ligesom hvis jeg ændre mit kort til i stedet være ligesom det, der er 5 plus 37, det vil ajourfører. Så bare ved at ændre input, det får en vis output. Så du kan tænke på komponenter næsten som funktioner på denne måde, som du kan sætte sammen. Du får input, som denne CardView som input, får du output. I dette tilfælde output er HTML. Mening indtil nu? Cool, så igen, ejendomme er hvordan du kan videregive oplysninger ind og ud af komponenter. 

OK, så lad os gøre det ting interaktivt. Lige nu er det slags kedelige. Hvad er [uhørligt]? Du kan printe nogle ud, men det er alt det kan gøre. 

Så lad os gå tilbage til gamle spørgsmål bare for nu. OK, så lige nu disse komponenter er kedelige, fordi alt, hvad de gør, de får input. De gør output, ikke? Det er lidt kedeligt. Vi ønsker at have vores komponenter at være i stand til at have en slags indre tilstand, ligesom huske noget. 

For en kort-, for eksempel, hvad slags stat kan du huske i flashkort? Hvad midlertidige status kan du huske for et flashkort i et flashkort app? PUBLIKUM: Uanset om det er blevet vendt? NEEL MEHTA: Yeah, højre. Så du måske ønsker at holde styr på er du står op eller er du står ned på kortet. På Facebook, for eksempel, ville du ønsker at huske, hvor i nyhedsfeed Er du eller kan lide hvem profil laver du lige nu. 

På Messenger, ligesom hvilken tekst, du skrive i input boksen, ikke? Hvis du opdaterer siden, det går væk. Men du behøver ikke virkelig pleje. Det er bare midlertidigt. Ja? 

PUBLIKUM: [uhørligt] NEEL MEHTA: Ligesom en flash kort, ligesom du kan se Spørgsmålet side eller svaret side? 

PUBLIKUM: OK. 

NEEL MEHTA: Ligesom en to-sidet flashkort, ikke? Ja, så du ønsker at har denne idé om nu Jeg har egenskaber, som er ligesom input, men staten, som er midlertidig, øh, hvor du er på siden, ikke? Igen, jeg sagde i Facebook Messenger, jeg har ligesom hvilken person du ser Facebook eller som er profil, ikke? 

Dette er kun midlertidig. Det er vigtigt at vise brugeren hvad der foregår, men opdatere siden. Det gør ikke rigtig noget. Så det er midlertidig tilstand, så vi alle det tilstand. 

Så igen, der er stat og rekvisitter. Redskaber er input gives fra din datakilde. Stat er ligesom defaults. Det er ligesom ting, gør ting interaktivt. 

Så i vores CardView-- lad os få vores CardView-- så det var rart. Hvad vi vil gøre her, vi kommer at røre CardView og kun CardView. Og så min ven, som fik det, de ville ikke mærke nogen forskel. De ville ikke have til at ændre nogen af ​​deres egen kode, men de ville se deres CardView fik tunet op. Det er en dejlig del om komponenter. 

OK, så i vores CardView, lad os prøve og holde styr på, om vi udfase op eller nedad. I React vi gøre dette ved først angivelse den oprindelige tilstand. Hvor kommer kortet begynde? 

Så være en funktion kaldet getInitialState fungere, og vi vender tilbage et objekt. Dette objekt indeholder nogle tilstand, og en stat er blot en nøgle-værdi par. Ligesom i instruere, har du en nøgle og en værdi, har du ligesom navn er en streng. 

I dette tilfælde, lad os sige front er sandt. Det siger, at vi har en stat. En komponent af staten er en attribut kaldet front. [Uhørligt], så som standard, vi er i den forreste del af kortet, og vi kan ændre dette som vi vende kortet. Give mening? 

OK, så i gengive, lige nu, er vi viser spørgsmålet og svaret. Nu, hvad vi skal gøre er at vise spørgsmålet hvis vi er på forsiden af ​​kortet, så svaret er for bagsiden af ​​kortet. Det er derfor du alle gøre kortet interaktive. Så lad os prøve og til dette her. Nå, først bare lave en variabel. Vi kan spørge nu this.state.front. Vi adgang angive samme, vi adgang rekvisitter, så this.state.front. 

Hvis vi er foran, så tekst er this.props.card.question. Hvis vi er på forsiden af kort, vi vil forsøge at få fat spørgsmålet fra kortet. Ellers, hvis vi er på bagsiden af kortet, hvad gør vi? 

PUBLIKUM: Svaret? 

NEEL MEHTA: Jep, så tekst lig this.props.card.answer. Men hvis du bemærker, vi ved hjælp af staten til at træffe en beslutning fordi nu komponenten vil se anderledes baseret ud hvordan disse interagerer med det. Så i stedet for at udskrive det, vi bare udskrive teksten. Cool, så nu, som du ser, Vi ser kun spørgsmålet. Og hvis jeg ændre tilstanden her manuelt til forsiden er falsk får vi 42 tilbage. 

Så igen, denne komponent har sin egen stat. Som en knap ved, om det er blevet presset eller ej, denne ting ved, hvad der er på forsiden eller på bagsiden. Som standard er det på forsiden. Og derefter, hvis det er på forsiden, vi vil udskrive spørgsmålet. Hvis det er på ryggen, vi får udskrive svaret. Så igen, de oplysninger, givet, er det samme. Det ser bare anderledes baseret på, hvordan du programmere den. Så for eksempel, Facebook Messenger, selv hvis du får den samme datakilde, det kan se anderledes fordi staten er anderledes. Du kigger på en anden person budskab. 

OK, så det er alt godt og godt, men hvad nu er faktisk gør os i stand til at ændre sig, uanset om vores kort er forsiden eller bagsiden. Vi kan gøre dette ved at tilføje en flip knap, en knap til kort, vil vende kortet, hvis det er [uhørligt]. Så lad os tilføje en knap her, det knappen, og denne knap sige flip. 

Og så lige nu, det ikke gør noget. Det ser bare dejligt. Det, vi kan gøre, er at vi kan tilføje et klik handleren, onClick lig this.flip, og vi vil definere flip senere. Men dybest set, onClick er en funktion, bliver kaldt, når brugeren klikker på den. 

Så på knappen vil vide når det er blevet klikket på. Gik det er blevet klikket, det vil vende kortet. Det er lidt ligesom din pizza levering fyr. Du er ligesom, okay, når nogen kalder mig, jeg vil levere pizza, ikke? 

Du registrere denne lytteren. Du lytter til en begivenhed. Du får kaldt, og når begivenhed sker, du gør noget. Du får pizza. I dette tilfælde, når du er klikket, du vender kortet. 

Og så er vi nødt til at definere et funktion, vil vende kortet, så vi vil skrive, at retten her, flip-funktion. Og så hvad tror du flip vil gøre? Igen bliver kaldt, når Vi klikker flip-knappen. Hvad skal funktionen flip gøre? 

PUBLIKUM: Skift this.state.front fra sand til falsk, falsk til sand. 

NEEL MEHTA: Jep, så træffe this.front is-- forsiden tilstand er. Tag den forreste tilstand, hvis det er sandt, gør det falske. Hvis det er falsk, gør det rigtigt, ikke? Så lad os prøve det. 

Du kan ikke ændre tilstand bare ved at gøre this.state. Du kan ikke gøre dette. Du kan ikke gøre det. Du er nødt til at bruge en funktion kaldet this.setState. 

Så du kan sige this.setState forreste kolon denne hvor igen, udråbstegn punkt betyder det modsatte. Jeg gætte, hvis dette. state.front er sandt, vil det dreje falsk. Så vi vil sætte staten fra sand til falsk. Hvis det er falsk, vi får sæt den falsk til sand. 

Bare mærke til, at vi sætter og få lidt forskelligt, og så lad os prøve dette. Bada bing, se på dette. Flip-knappen vil nu skifte til bag tilstand. 

Og så her er hvor du kan se en lille smule af magien i at reagere. Ligesom vi fortalte det aldrig det at re-render. Vi har aldrig fortalt det gentegne noget. Hvis du gør dette uden React, ville du har at-- lide, når det flip der klikkes på knappen, du er nødt til at fortælle det til manuelt re-gengive, ikke? 

Reagere er virkelig cool i, at hvis du give det en bestemt tilstand og egenskaber, Det vil altid gengive præcis de samme ting. Og så når vi nogensinde vi ændrer staten og ejendommene, reagere netop re-gør det hele. Den ved, at der er en en-til-en overensstemmelse mellem stat og parameter og HTML. Så når en af ​​disse ændringer ved gennem et sæt tilstand, det vil ændre, hvordan løn er re-gengives. Og så dybest set React er ligesom venter på dig at ændre. 

Når det ændrer noget det vil igen gøre hele siden. Og hvis det lyder ineffektiv, er det fordi det ville være, men reagerer anvender en ting kaldes en skygge DOM. I stedet for at trække den side direkte, det holder den virtuelle HTML træ i hukommelsen. 

Du ved, HTML er som et træ, som en hierarkisk datastruktur. Det holder en falsk træ i hukommelsen, og når du opdaterer siden, det vil tegne en anden falsk træet, og det vil beregne hvad ændre det er nødt til at side at gøre de to træer lige. Så dybest set er det næsten re-gør en masse. Og så er det kun godt lide ændrer side i lidt tweaks efter behov, så det er meget, meget, meget effektivt. 

Så dybest set React vil når du ændrer noget, det vil igen gøre siden virtuelt. Det vil regne ud, hvad skal jeg ændre for at gøre den virkelige side afspejler den virtuelle side, og det vil gøre det. Det er den virtuelle DOM. Det er en af ​​de største funktioner i React. 

Giver det mening? Nogen spørgsmål? Ja? 

PUBLIKUM: Hvordan sammenlign stadig MVC at vi talte om før lignende ressourcer. 

NEEL MEHTA: Ja, det spørgsmål er, hvordan fungerer det sammenlignet med MVC? Du spurgte om ressourcer. Nå, lad os tale om, hvordan det fungerer. 

I MVC, ville du opdatere modellen. I dette tilfælde ville vi have en kort model. Udsigten ville have den flip knap, og kontrollen ville have klappen funktion. Så udsigten ville fortælle controller til at vende flip. Flip ville fortælle model til at ændre, ikke? 

Og så når du gør en MVC, du lyt efter modellen for at ændre, og du re-gøre visningen i overensstemmelse hermed. Eller du bare nødt til at lide har styringen. Vent på, at modellen til at ændre, og derefter vælge og vrage en del af ligesom en ting at skifte. Her har vi en ting, men i en stor app, du skal gerne huske, hvad ændringen i hvert enkelt sted, så det er lidt irriterende. Og så React er rart fordi det har en skygge Dom. Det har råd til lige omskrive hele ting. Du behøver ikke at selektivt ligesom gæt hvad at opdatere. 

På Facebook, hvis du kan lide får en ny besked, i MVC, du er nødt til at huske, OK, ændre de ting på toppen af side, ikonet meddelelse. Også pop et nyt vindue nederst. Også lave en ny ting i dette vindue. Også spille en lyd. 

Det er en masse ting gå ud samtidig. Og så hvis du ikke gør har en Shadow Dom, ville du nødt til at gøre det manuelt, fordi du kan ikke slippe af med hele siden. Du har ikke råd til, så du har at ændre hver ting manuelt, som er virkelig irriterende i MVC. 

Så for at være sparsommelige, de selektivt opdatere siden, som er effektiv, men også irriterende. I React, på grund af Shadow Dom, du få begge ting gratis. Det er effektiv, fordi af Shadow Dom. Flaskehalsen opdaterer siden. Det er ikke at gøre træet manipulation. Du får effektiviteten. Du får også brugervenligheden, fordi hvis du bare omskrive hele siden, men du bare vide, okay, de ting vil være på siden eller andet sted. Det kan være et andet sted, men det kommer til at være på den side, ikke? Så du bare re-afsmeltet hele ting næsten, og du kan gøre et par ændringer af selve siden. 

Så igen, i MVC du skulle vælge mellem brugervenlighed og effektivitet, og reagere, får du begge dele. Så det er bedre. Give mening? Solid. 

OK, så lad os se lad os tale en lille smule om trin 4, hvordan vi kan integrere komponenter. Så vi har det lige nu. Vi har vores cool lille knap. Vi kan vende det tilbage og frem, og det er alt den gør. Lad os sige, at vi ønsker at har en anden komponent. Lad os sige vores flashkort app bør indeholde en liste over alle kortene at du har, så det betyder vi skal have en anden komponent. Tja, måske kalde det en listevisning. Lad os lave en liste opfattelse sameksisterer med CardView, og denne liste visning og CardView vil gerne arbejde sammen. Og du kan kombinere dem at gøre vores app til dig. 

Så først, lad os lave en par flere kort rigtigt. Lad os sige, hvilke kort? Og bare så jeg ikke behøver at kede dig med at skrive det i, Jeg skal bare kopiere det fra her. Og så jeg har tænkt mig at ikke giver det kun et kort. Jeg har tænkt mig at give det en vifte af kort. Så første apps kommer til at bryde for nu. Okay, så vi kommer til at gøre dette kunne håndtere flere kort. Så først, vi vil give det, ikke kun et kort, men en række af kort, som en liste over kort. Og i dette tilfælde har vi tre af dem. 

Okay, så så app er kommer til at få en liste kort, og det kommer til at afgøre, hvilke en til at vise til CardView. Den CardView kan kun gengive et kort, men den app får en liste over alle de kort, ikke? 

Så når du regne ud, en kort til at give til CardView, hvordan ville du gætte, du måske være i stand til at træffe en beslutning om, hvilket kort at vise? For at give dig et hint, det er midlertidigt Du vil blive ser en bestemt kort. Hvis du opdaterer siden, vil du bare gå tilbage til det første kort. Det er OK, fordi det er midlertidigt. Hvad teknik kan vi bruge? 

PUBLIKUM: Du kan gøre en variabel så ligesom du havde foran. Er det sandt, kunne du har nuværende kort er lig med 1? 

NEEL MEHTA: Ja, så vi ønsker at have staten, ikke? Du ville bruge stat i komponent til at regne ud hvilket kort ønsker vi at få. Ligesom vi har en liste over alle kortene, vi får bruge staten til at finde ud af en af ​​det første kort, andet kort, tredje kort, og så videre. 

Så en app, så en app vil få en har getInitialState funktion, getInitialState funktion tilbage. Og vi vil bare sige activeIndex 0. Så nu vores app har sin egen stat. 

Og så nu gør, at finde ud af et kort, lad os bare gå til array og få fat i de ting på det indeks. Vælg kort lige this.props.cards this.state.activeIndex. Så som du ser her, rekvisitter og staten rent faktisk arbejder sammen. Så nu, at vi har vores activeCard, vi vil kalde det activeCard, og lad os se om det virker. [Uhørligt] 

Åh, det var en tekst fejl. Ah. 

Cool, jep, så nu var vi tilbage til hvor vi var før, ikke? Samme gamle program, undtagen nu vi kan støtte en liste over kort, ikke bare et kort. Og nu, igen, hvis vi ændrer activeIndex, kan vi gå fra 0 til 1, og nu, at andet kort, og derefter gik vi til 0. Så her er en ny tunet version af vores. 

OK, så lad os nu få en liste opfattelse viser alle kortene i dit program, så vi vil lave en ny komponent kaldet listevisning. Lad listevisning lig react.createClass. Så vi ønsker at gøre en uordnet listen med et element på listen for hvert kort. Og så vi har en masse kort. Vi vil have en listeelement for hvert kort, ikke? Vi kunne gøre en for-løkke eller noget til at lave en ny liste element. Men den måde du gør det i Reager, så brug en ting kaldet kort. Kort er et værktøj eller en funktion, du bruger at for hvert element, løber en funktion, tager returværdi, og giver dig det tilbage. 

Så som et eksempel, har vi array 1, 2, 3.map function-- og dette er forkortelse for et function-- x pil x gange x. Det siger, for hvert nummer i 1, 2, 3, tage det. Firkantet det, og give det tilbage. Så hvad tror du 1, 2, 3.map x går til x gange x giver dig tilbage givet at denne funktion køre på hvert enkelt element i den opstilling. 

PUBLIKUM: 1, 4 9? 

NEEL MEHTA: Jep, 1, 4, 9 fordi du gør 1 gange 1. Det giver dig en. Det er det første element. 

2 gange 2 er 4. Det er et andet element. 3 gange 3 er 9. Det er et tredje element. Give mening? Så kort har en teknik, du brug i funktionelle programmører, den nye stil programmering til at gøre noget til hvert element på din liste. Og så dette lyder bekendt. Vi har en liste over kort. Vi ønsker at få et listeelement for hver en, så vi vil bare bruge kortet her. Vi vil sige, lad liste ligemænd this.props, kort, kort. 

Og så givet et kort, vi er kommer til at generere en liste element med kortet indhold side af det. Lad os bare sige, at vi ønsker at give ud kortene spørgsmålstegn så card.question. Så denne liste indeholder en vifte af LI 's eller listeelementer hvor der er en liste post for hvert kort, og som indeholder den kort spørgsmål. Give mening? 

Cool, så lad os nu faktisk printe det ud. Så vi vil vende tilbage en ul. Indeni, uordnet liste, vi vil bare holde hele listen at de gav os. Afkøle. 

Okay, så nu dette listevisningen virker lige finde. Eventuelle spørgsmål om listevisningen? Du har en masse kort. Du laver et element på listen for hvert kort. Og du lægger dem inde i en uordnet liste, og du give det tilbage. Så lad os nu handle så vi indlejre denne indersiden af ​​vores app, så vi kan gøre dette, listevisning. Hvad argument skal vi passere til liste visning? Hvilke egenskaber skal vi give det? Husk, hvis du giver det en flok af kort, det vil gøre listen se for disse kort. Så hvad ville vi passerer her som argument? PUBLIKUM: En liste over kort? NEEL MEHTA: Ja, så kort lig this.props.cards, right? Og så det eneste problem er, at du kun kan viste en øverste niveau element i gøre, så du bliver nødt til at pakke det i en div. Det er underligt. Så lad os se, om det. Betyder det fungere? 

Jep, der du går. Så nu har vi en liste kort i bunden, og så har vi vores CardView sig på toppen, og der vil skifte mellem de to sider af kortet. Nu gør det mening, hvordan jeg gjorde det? Ja, så igen, vi har to komponenter. Den første komponent udskrifter ud hver kort i listen. Det er listevisningen. Og den anden komponent udskriver netop det kort. Hvis du giver det en vis kort, det vil udskrive oplysninger om dette kort og lade dig bladre frem og tilbage. 

Så hvis vi vil, kan vi forsøge og tale om at tilføje nogle nye funktioner til dette. Ellers kan vi tale lidt mere om af hastigheden af ​​reaktoren, eller vi kan besvare spørgsmål, du måtte have fordi disse er alle de centrale dele af reagerer, som jeg ønsker at tale om. Vi kan gå videre. Vi kan besvare spørgsmål. Uanset hvad du ønsker. 

PUBLIKUM: Kan du bruge JSX i normal JavaScript? Eller er det noget, som fulgte med [uhørligt]? 

NEEL MEHTA: Spørgsmålet er dåse du bruger JSX med normal JavaScript? Svaret er ja. JSX er bare en måde at det tager din JavaScript, der har HTML inde i den, og det samler ind JavaScript, ikke har HTML inde i den. Så opdager at-- så mærke til her. Dette ser ud som du har ligesom div og du har kram inde i den. 

Det opgør til JavaScript, ligesom genererer det samme. Jeg gætte, hvad jeg siger, er, at JSX er bare en syntaktisk, ligesom det er en præprocessor for JavaScript meget som PHP er en præprocessor til HTML. JSC er en præprocessor for JavaScript, der lader du sætte HTML indersiden af ​​din JavaScript. Og så hvis du har den rigtige transformer hvilket er en ting kaldet [uhørligt], som vil transformere. Den rigtige præprocessor, det vil lade dig gøre det. 

PUBLIKUM: [uhørligt] NEEL MEHTA: Normalt behøver du ikke at sætte HTML indersiden af ​​JavaScript medmindre dine gør reagere. Men du kan gøre det alligevel. Yep? 

PUBLIKUM: Jeg tror, ​​du havde beskrevet React som en funktionel programmering sprog. Vi har været at lære C i CS50. Er C også et funktionelt sprog? NEEL MEHTA: Så spørgsmålet handler om funktionel versus en anden ting kaldet bydende nødvendigt eller proceduremæssig programmering. Der er to slags programmer populære. Man hedder proceduremæssige, som handler om ligesom gør kommandoer, og en er funktionel, som er alle om at have funktioner, og som har input og output af dem. React er en funktionel paradigme. C er en meget processuel paradigme. 

Og som et eksempel, C f.eks du ikke gør dette deklarativ måde for at gøre programmet, ikke? Du er nødt til at sige, udskrive dette. Ændre denne datastruktur. Udskriv dette. Det handler om kommandoer. 

I React, er der ikke at mange kommandoer. Det handler om at have komponenter, du sat sammen. De er ligesom funktioner. Du har ligesom en funktion kaldet CardView, som er en funktion der har input, output, og så React er alt om denne filosofi os af having-- du har data. Du passerer det gennem dette algoritme, og det vil output HTML, som du netop udskrevet siden, og så du er nødt til at bygge det stykke for stykke. 

Så for at tegne en metafor for, hvad Jeg sagde før, du ved, hvordan på Facebook, hvis du får en besked, og du vælger hvilke dele at opdatere, det er proceduremæssig. Det er bydende nødvendigt, ikke? OK, jeg fik en besked. Lad os ændre hensyn der. 

Lad os pop et vindue her. Lad os ændre hensyn der. Lad os trække dette her. Det er en processuel tilgang. 

Det er, hvad ting som Kantet, Boost, Backbone, andre rammer bruger. React er funktionel. Det er en meget anderledes måde at tænke over tingene. Det tager denne idé om lad os få funktioner eller algoritmer, der vil du give det data. Det vil spytte ud af, hvad det bør være, og computeren vil tage sig af afvejning ud. Du behøver ikke håndtere det selv. Gør det en lille smule mening? Ja? 

Målgruppe: I et funktionelt sprog, alting sker på én gang? 

NEEL MEHTA: Nej, ting sker i orden. Ligesom her er der stadig orden, men det gør ikke ske i rækkefølge som rose, kommando, kommando. Det sker i den rækkefølge, Funktionen giver dig output. Sætte det i en anden funktion. Sætte det ind i en anden funktion, en anden funktion. 

Hvis du gør CS51, vil du lære funktionelle programmer en lidt ud af omfanget af dette. Men dybest set, hvad der gør Reagerer køligt er ikke kun den ensrettede datastrøm og det virtuelle Dom, men også denne idé om funktionel programmering. Og funktionel programmering er meget let at komponere og lave seje ting ud af, og det er meget nemt at tænke om og grund om. Så det er en anden god lodtrækning for at reagere. Flere spørgsmål? Ja? 

PUBLIKUM: Øh, hvorfor skulle du bruge lad i modsætning til var? 

NEEL MEHTA: Så spørgsmålet er Hvorfor bruger du lader i stedet for var? Dette er en ting kaldet ES6 eller ECMAScript 6. Det er den nye version af JavaScript. Der er en masse tekniske grunde men lad er en bedre version af var. 

Det er hvordan du erklærer variabler. Du kan bruge lade. Du kan bruge var. Lad har en masse teknisk reasons-- du kan se dem op later-- for, hvorfor det er bedre. Dybest set, ES6 har nogle dejlig ny syntaks, nogle nye funktioner oven på den gamle JavaScript. 

Så vi har ligesom fem minutter. Jeg ville bare tale om en ting mere virkelig hurtigt. Hvis du havde nogen spørgsmål, lad os tale om det efter dette. Men bare så dette får fanget på kamera, jeg bare ønsker at tale lidt om, hvordan du faktisk bruger Reagere i dine apps. 

Hvis du går her, Facebook.GitHub.IO/react, dette er hjemmesiden for React, og det vil vise dig, hvordan du rent faktisk bruger Reagere på dine sider. Dybest set, det er lidt kompliceret at forsøge at installere reagere. Det er ikke så let, som du bare trække og slip en JavaScript derinde. 

Du skal have din transformator sat op, der så det gjorde før, slå din JSX ind den normale JavaScript. Du er nødt til ting, der vil kompilere du ES6 til normal. JavaScript er der en masse for at flytte dele, du skal gøre, så der er en ting kaldet Yeoman, Yeoman.io. Og det er en kommandolinje værktøj, der vil hjælpe dig med stillads din React projekter nemt. 

Så du kan læse om dette senere, men der er nogle værktøjer at Yeoman tilbyder. De vil lade dig oprette en React app med alt indbygget. Ligesom det vil have bygget i, komponenter indbygget. Det vil have din transformator indbygget. De har en masse cool ting indbygget automatisk anvendelse af disse ting kaldes generatorer. 

Så læse om dette, hvis du kan lide. Bare gå på Yeoman, Y-E-O-M-A-N, og du kan finde generatorer som disse. Og med generatorer som disse, du bare gerne en er et par kommandolinje-kommandoer. Det vil stillads ud en Hele React app til dig. Det vil få alle de manuelle rørføring, og tunge arbejde gjort for dig, og det er derfor, du blot fokusere på bare at skrive i reagere. 

Så dybest set at opbygge en Reagerer app er nontrivial. Det kablede alle sammen, men der er redskaber, der vil gøre det for dig. Så hvis du ønsker at lave en Reager app, prøve at gøre det på den måde. Hvis du blot ønsker at eksperimentere, du kan prøve at bruge denne CodePen fordi det har CodePen alle reagerer ledninger. Jeg har gjort alt arbejdet for dig allerede. 

Så hvis du ønsker at gøre som en produktion til at frigive Reager app, prøv en af ​​disse generatorer. Hvis du bare ønsker at spille rundt, er det ofte værd bare ligesom prøve at spille rundt på CodePen her. Lyder godt? Afkøle. 

Så det er alt, jeg har. Igen al koden og eksempler er kommer til at være på denne hjemmeside her. Så igen, vi ikke taler om meget syntaks i React, men at finde alle de små syntaktiske detaljer, det hele kommer til at være til rådighed på denne hjemmeside her. 

Så jeg vil anbefale som tage det første skridt. Sætte det ind i din CodePen. Prøve at arbejde på at gøre det andet trin. Der er en fjerde trin, og bare se, hvor du får fra det. 

Flere spørgsmål, tjek at side eller email mig. Det er min e-mail. Men jeg ville elske at hjælpe dig med ethvert spørgsmål, du måtte have om at reagere. Så jep, det er alt jeg har. Tak alle meget for ser eller for at deltage. Og jeg vil tage nogle spørgsmål du måtte have efter dette nu. Så tak til alle for at se.