[TÓNLIST spila] 

NEEL MEHTA: Hér fer það. 

Jæja, allir, velkomin á vefnum forrit í framtíðinni með React. Þetta er CS50. Mitt nafn er Neel. Ég er TA fyrir CS50 og sophomore við Harvard College og mjög, mjög ástríðufullur vefur verktaki. Svo ég er mjög spennandi að að tala við þig í dag, hvort sem þú ert hér eða heima horfa, um að bregðast við, sem er, aftur eins og ég sagði, að framtíð apps vefnum. 

Svo bregðast er vefur ramma. Og eins og ég hef verið að segja að sumt fólk hér, rammi er bara setja af verkfæraskúr þú getur notað að skipuleggja og byggja vefur app. Og vefforrit eru, aftur, vefsíður sem eru gagnvirk eins og Facebook, Twitter.com, Instagram.com, hvað sem er. 

Svo er Facebook vefur ramma sem var þróað af Facebook a par ár back-- bregðast er. Það er síðan verið notuð í Facebook á farsíma apps þeirra og vefur app, Instagram. Khan Academy er annar áberandi snemma ættleiða af React. 

Það er í raun verið að fá mjög vinsæll. Ef þú notar alltaf hluti eins Stækkun eða Burðarás, þetta er í sömu fjölskyldu, en það hefur síðan langt umfram vinsældir þeirra. Það er heitt nýr hlutur. Það er virkilega, virkilega mikið. 

Og svo bregðast er gott ekki bara sem vefur ramma til að byggja tengi. Það er gott til uppbyggingar vefur tengi. Það er líka hlutur heitir React Native sem gerir þér kleift að byggja tengi fyrir Android og IOS og kannski öðrum vettvangi í framtíðinni nota bara sömu JavaScript kóða. Þú getur notað nákvæmlega sama JavaScript kóða til að gera vefsíður, að veita Android apps og IOS apps. 

Það er mjög, mjög spennandi tími. Það er mjög, mjög flott tækifæri. Það er í raun alhliða vefur tengi þróun tól, svo það er mjög, mjög mikilvægt að vita. Og, eins og ég var að segja fólki áður, þetta, ég held, er að fara að breyta því hvernig við byggja apps vefur eilífu. Svo það er kannski svolítið hyperbole, en ég held að það sé nokkuð gott að vita. 

OK, svo er það við? Bregðast er rammi sem þú getur nota til að byggja tengi. An tengi er, aftur, a vefur blaðsíða, ekki satt? Svo hér er Instagram.com, React notar. 

Bregðast er byggt á Hugmyndin um hluti. A hluti er HTML þáttur á sterum, svo HTML þáttur er eins og hnappur. Það er lið. Það er haus, ekki satt? Og Instagram mun nota þetta, en það mun einnig nota hluti af React. 

Bregðast þættir eru souped upp HTML þættir sem hafa eigin hegðun sem innan þeirra. Svo sem dæmi, gætum við hafa tími þáttur, tími hluti, sem mun innihalda eins og tíminn stimpill, þú veist, með prófíl hluti sem mun innihalda myndina og nafn þess aðila. Það getur haft eins og Counter sem getur treyst eins og fjölda líkar, og ef þú smellir á það, verður það fjölga eins. A hluti er bara fullt af HTML kóða sem hefur einhverja virkni vafinn inni af því. Svo það er eins og HTML frumefni á sterum, eins og ég sagði áður. Hægt er að taka þessa hluti, og þú getur sett þá saman til að gera nýja hluti, í þetta mál, staða hluti, sem inniheldur allt þetta dót. Það myndi innihalda Alltaf, Profile, LikeCounter, kannski athugasemd og kannski myndin sjálf. Og svo vefur apps eru bara byggð með því að taka íhluti og setja þau saman. An Instagram fæða er ekkert annað en fullt af staða hvert á eftir öðru, hver færsla inniheldur eins Time, Prófíll, LikeCounter, og svo framvegis. Það er góður af eins og að byggja sér hús. Þú byggja ekki hús frá toppi og niður. Þú tekur components-- þig taka eins og baðherbergi. Þú tekur bedroom-- þú halda þeim saman, og þú hafa a nýr hluti. Þú ert með nýja hluti hússins. 

Svo bregðast er allt byggt í kringum þessi hugmynd um hluti sem eru gagnvirk, sem eru declarative. Eins og þú segir bara hvað uppsetningu er, og það gerir það. Þeir eru composable. Þú getur tekið tíma og uppsetningu, setja þá saman, gera eitthvað betra. Og þeir eru einnota, þannig að ef þú hefur fengið kóðann fyrir færslu, þú gætir embed að einhvers staðar. 

Þú getur embed Instagram hlutur á þínu eigin vefsvæði. Þú getur embed í Facebook, til dæmis, svo lengi sem það notar bregðast við eins og vel. Svo þættir eru virkilega, virkilega, virkilega öflugur byggingareiningar vefnum sem hægt er að nota hvar sem er og setja saman til að gera nýja kubbar. Það er mjög, mjög yfirsýn. Svo aftur, ef þú ert með einhverjar spurningar á hverjum stað um heimspeki reactor, að erfðaskrá, að stoppa mig, og láta mig vita. 

OK, svo bregðast er kaldur því það hefur mismunandi leið til að horfa á hvernig þú byggir vefur apps. Þú hefur sennilega heyrt af MVC, a líkan sem þú stjórna í CS50 eða hvað önnur leit flokkar þú notar. Og flestir ramma eru byggt í kringum þá hugmynd að MVC. Hvarfast er ekki. Bregðast er byggt í kringum þá hugmynd af einstefnu gagnaflæði eins og sést af þessari töflu eða grafískur hér. 

Í grundvallaratriðum, þú hafa a gögn uppspretta. Og gögn uppspretta ákveður hvernig á að leggja fram tiltekin atriði. Íhlutar mun þá, þegar þeir breyta, munu þeir segja að gögn uppspretta til að breyta. 

Til að nota Instagram dæmi, þú gætir hafa listi yfir færslu hlutum eins í gagnagrunn eða eitthvað. Það gögnum. Og þá hluti staða okkar mun taka þessi gögn, og nota þessi gögn til að veita hlutur á skjánum. Það er það sem arrow frá gögnum til hluti er, og þá að sama gögn eru notuð að veita fullt af hlutum. 

Í Facebook Messenger, fyrir dæmi, sem er að bregðast við, þú gætir hafa a listi af skilaboð sem gögn uppspretta. Og það myndi því ekki aðeins listi yfir skilaboð en einnig listi yfir vini sem þú hefur. Þú hefur fjöldaólesinnaíþræði. Kannski einnig verða Facebook hlutur það er neðst á Facebook.com. Sömu gögn er ein uppspretta sannleikans og sem veldur miklum hluti til að vera innt af hendi. Og þegar einn af þeim hluti er breytt, það fer aftur og breytir gögn uppspretta. 

Þú sendir skilaboð, ekki satt? Það breytir gögn uppspretta. Þú lesa skilaboð, svo þú stillt ólesin 0. Það breytir gögn uppspretta. Og eftir að allir þessir einn arrow fara aftur í sama gögnum uppspretta, svo þú veist, gefa ákveðna gögnum, þú veist nákvæmlega hvað síðu er að fara að líta út. Það er deterministic. Þú veist, gefið tiltekin gögn, hvað síðan er að fara að líta út. Þú getur spáð fyrir hvernig það er að fara að haga sér og hvernig hlutirnir eru að fara að vinna þegar þeir eru að setja saman. 

Og ef ég hefði milljón hluti Hér væri að hegða sér eins, ekki satt? Þú myndir ekki hafa allir undarlegt samtengingar. Einn gögn veitt milljón hluti. Milljón hluti gat fara til baka og breyta gögnum. Og svo er þetta mjög gott. Við erum að byggja composable, auðveldlega stigstærð vefur apps. 

Þú ert einn gögn uppspretta, uppspretta sannleikans. Sem segir hluti þinn hvernig á að leggja út á síðunni, og hluti mun höndla samskipti. Og ef þeir vilja til að breyta hlutir, bara fara aftur og segja gögn uppspretta til að breyta. Meikar sens? Svo bregðast er allt um skilning hvernig á að byggja upp hluti og hvernig á að gera hluti þinn samskipti við umheiminn. 

Gerð hluti samskipti við umheiminn notar annan tækni heitir Flux, sem er rammi sem er bætt ofan á React. Við erum ekki að fara að tala um það. Við erum að fara að tala meira um, í ljósi gögn, hvernig er hægt að inna af hendi hluti? 

Og svo bregðast er virkilega flott vegna þess að þú getur notað það með hvaða bak endir sem þú vilt. Ef þú ert eins og Python bak endir, ef Python getur spýta út nokkrar upplýsingar, Bregðast geta gera það. Ef þú ert ekki JS framleiðsla gagna, bregðast gerir það. Ruby teinn upp með gögn, bregðast gerir það. 

Svo bregðast er í grundvallaratriðum a vefur view-- framan enda með íhlutum fyrir hvaða gögn uppspretta af neinu tagi. Og svo fara frá gögn uppspretta til bregðast hluti er nokkuð auðvelt. Fara í hina áttina er svolítið erfiðara. Sem notar Flux eins og ég nefndi áður. Við munum ekki fá inn í það. Við munum leggja áherslu meira á gögn til hluti hlið. This vegur þú geta gera kaldur, gaman vefur apps. Það mun ekki hafa áhrif á umheiminn fyrir nú, en það er önnur saga. 

OK, þannig að ef þú værir hér fyrir síðasta námskeið minn þú munt vita að öllum kóða fyrir tala í dag er að fara að vera á þessari vefslóð hér, því miður, þetta URL hér. Og grundvallaratriðum við erum að fara að fara í gegnum fjögur skref, kannski fimm, sennilega ekki fimm. Við munum fara í gegnum fjögur skref að byggja upp sýnishorn React app. Og svo allt kóðinn fyrir hvert skref á leiðinni er að fara að vera hérna, þannig að ef þú ert að elta eftir heima, ekki hika við að lesa þessa kóða. Ef þú ert að elta eftir hér, við munum vera að sýna það á skjánum, svo ekki hafa áhyggjur óður í það. En ef þú ert heima, finnst frjáls til að heimsækja þessa vefsíðu. Og já, þú ættir að vera fær um að fá allur kóðinn þú vilt alltaf þörf hér. Svo það er gott svindlari lak sem fyrir framtíð ævintýrum með React. Cool, þannig að ef allir sem er hér, og jafnvel ef þú ert heima, draga upp þessa vefsíðu, is.gd/cs50react, engin höfuðborg, ekki undirstrik, ekki neitt. 

Þú munt sjá síðu sem lítur svolítið eins og þetta. Þetta er hlutur sem kallast CodePen. CodePen er samstarfsverkefni erfðaskrá umhverfi sem ég get skrifað kóðann hér, og það verður sjálfkrafa send til þín. Og að með þessum hætti, ég get skrifa kóðann. Ég get keyrt kóðann hér. 

Fyrir example-- og ef það reloads-- sjá, Ég er að keyra JavaScript kóðann á síðunni hérna, og það verður sjálfkrafa gera vefsíðu þennan JavaScript kóða. Og svo er þetta leið fyrir okkur að prófa kóðann rosa vel án þess að þurfa að nota ID okkar eða nota staðbundin vél okkar eða hvað sem er. Það er mjög fljótleg leið fyrir þig til að mockup og prófa mismunandi tegundir af kóða. 

Þannig að ég ætla að fara að taka dæmi númer, setja það hér. Við erum að fara að vinna í gegnum það. Og ef þú ert heima, þú getur rífa þetta upp eins og heilbrigður. Og ég hef nú þegar sett upp Bregðast hér, svo þú getur bara skrifa eigin kóðann þinn hér og reyna það eins og eigin leikvöllur þinn. 

Já, ef allir opna þennan tengil hér. Vinsamlegast gefið mér thumbs upp þegar þú hefur það opið. Cool, flott flott. Það er ekkert hér í bili, en munum við breyta því mjög fljótlega. 

OK, svo bregðast er JavaScript bókasafn, og sem slík, krefst þekkingar á JavaScript, sem er vefur forritunarmál. Og það er verið að nota til annars nú líka en fyrst og fremst vefur þróa tungumál, þannig að ef þú ert ókunnur með að lesa síðuna sem heitir JSforCats.com. Það er dásamlegt. Þú getur lært JavaScript í hálfa klukkustund. Það er ótrúlegt. 

Svo gefa það a lesa. Við er einnig mikið af HTML hér því við erum að hanna vefsíður auðvitað. Svo ef þú ert ókunnur með HTML, kíkja HTMLdog.com. Ég held að læra React er milljón sinnum auðveldara ef þú nú þegar veit byggingareiningar. Ef þú ert hluti, það er auðvelt að gera stærri hluti. Það er Bregðast tungumál fyrir þig. 

Svo fara á undan og gefa þetta a lesa. Gera hlé á þetta vídeó. Gefa það a lesa ef þú ert heima ef þú ert ekki þekki HTML eða JavaScript OK, þannig að það sem við erum að fara að gera er að við erum að fara að gera mjög einfalt flashcard app með React. Við erum að fara að hafa Flashcard. Þú getur selbiti kortið fram og til baka. Og við munum einnig hafa a listi af öll spilin sem við höfum, og ef við erum tilfinning metnaðarfull, við gætum verið fær um að skipta á milli bíla með því að smella á þá. 

En þetta er að Bare bein, mjög einfalt React app. Og svo er þetta í raun ekki léttvæg til að framkvæma, en við erum að fara að sýna að ef þú gerir þetta, það er mjög, mjög auðvelt að lengja það ef annað fólk að hjálpa þér með það. Þannig að við erum að fara að fara í gegnum fjögur skref byrja frá grunni til að byggja þetta. 

OK, svo fjögur skref, munum við byrjar með fyrsta skrefið. Fyrsta skrefið er að fara að vera byggja fyrsta hluta þinn. Eins og ég sagði áður, sem er hluti í React er bara HTML þátturinn á sterum. Það skilgreinir HTML og sumir hegðun, og það verður að tilgreina hvernig fólk geta samskipti við það hvernig það myndi hafa innra ástand. Eins og hnappur vilja vita eins hversu margir sinnum það er verið smellti til dæmis, og það mun vita hvernig á að leggja sig fram. 

Svo skulum við fara á undan og byggja okkar Fyrsti þátturinn nota JavaScript. Þannig að ef setningafræði lítur skrítið, það er vegna þess að það er góður af. Svo aftur, við erum að fara að gera breytu sem heitir app nota leitarorðið láta, sem gerir breytu, láta App jafn React.createClass. 

Bregðast er bókasafn og hefur sem búa bekknum virka. Og þessi aðgerð er hluti af kóða sem þú Hægt er að nota til að búa til nýja tegund af React hluti. Og svo React.createClass gerir hluti, og þessi hluti mun vera fær um að gera efni. The aðalæð hlutur sem það getur gert er bakið eitthvað, láta sem fall. 

Aftur, ef vísitalan er ekki augljóst að þú, ég mæli með að þú fara á JS fyrir ketti og stöðva það út. Er að aðdregna í nógu vel? Cool. 

Svo í hvert hluti þarf að hafa bakið virka. The bakið virka segir, hvað á ég að prenta á skjánum? En þátturinn er gagnslaus ef það virkar ekki hvað ég á að prenta á skjánum, svo þú þarft að hafa bakið virka. 

Svo í bakið hlutur, þú þarf bara að fara aftur sumir HTML. Og hvað er kaldur er þessi það er hlutur sem kallast JSX, sem er framhald af JavaScript sem er notað af bregðast við. Það skulum þú skrifar HTML inni af þinni JavaScript, sem hljómar skrýtin tilfinning þegar þú hugsa fyrst um það, en það gerir mikið af skilningi síðar. Þannig að við getum gert þetta. Ef þú ert kunnuglegur með HTML, ég veit við höfum div með almennra nota gámur fyrir efni. Við getum aftur div og inni þetta div, getum við setja dótið. 

Svo skulum segja að við viljum gera bara beint upp flashcard fyrir nú. The flashcard, myndi ég segja, mun hafa spurningu og svar. Svo í þessari div, við skulum prenta út málsgrein sem segir question-- Hvað er endanlega svar við lífinu, alheimurinn? Og þá er svarið að fara að vera, að sjálfsögðu, 42. 

Sem ekki koma upp vel á öllum. Já, svo í rauninni þú getur raunverulega skrifa HTML Inni JavaScript. Og þetta er að fara að vera prentuð út í skjá. Svo skulum reyna það út. 

Þannig að við höfum hluti okkar. Við þurfum að segja bregðast við setja þátturinn á skjánum svo React.render, svo eftir því að við meðhöndla app eins og allir aðrir frumefni. Við skrifa það eins og það var HTML frumefni. Eins í stað þess að segja eins img fyrir ímynd eða P fyrir lið, þú skrifar App, svo App er meðhöndla eins og HTML frumefni. Eins og ég sagði áður, það er þáttur á sterum. 

Svo þú gera App, og þú gefa það a staður til að setja það. Og þetta er hvernig þú getur segja það hvar á að setja það. Ég hef búið til einfalda div á síðu sem heitir með ID á síðu, og það er þar sem þáttur er að fara að fara. 

Og við erum ekki að fara að hlaupa með HTML. Í grundvallaratriðum er þetta að fara að fá setja inni þessa síðu frumefni sem við höfum á skjánum. Svo það rennur þennan kóða, og það dregur þetta hlutur á skjánum, svo hér erum við. Við höfum gert okkar fyrstu bregðast hluti. 

Svo bara eins og ágrip, gerði við varlega ný tegund af hluti, ekki satt? Það er það sem React.createClass. Og í því hluti, við sagði það hvað það ætti að gera. Alltaf þegar þessi hluti er að að prenta á skjánum, það mun prenta út ágóðahlut með tvær málsgreinar inni af því. 

Og það sem við gerðum, við gert nýja app nota oddklofi app tákn. Við sögðum það að setja það inni á síðunni frumefni. Og svo það sem ég gerði, það skapaði nýtt app frá því sniðmáti. Og þá sagði ég það til að láta það. Svo hún sagði, OK, app, hvað ætti ég að prenta út? App segir, fara prenta út div með tveimur liðum inni af því. Og voila, það er div okkar með tvær málsgreinar inni af því. Skynsamleg svo langt? 

Svo aftur, allt áskorun React er bara að vita hvernig á að gera hluti. Hvernig á að gera þættir vinna saman. Nú þegar við höfum gert okkar fyrstur hluti, við skulum fara aftur og gera hluti sérhannaðar. Svo þú veist hvernig á HTML þú getur gefið hnappar bekkjum þinn? Þú getur gefið akkeri þín á href. Þú getur gefið inntak þitt á tegund, ekki satt? Þú getur gefið meira sérsniðin Fasteignir til allra þátta þínum til að gera það áhugavert meira. Og við í raun hægt að gera nákvæmlega það sama. 

Svo skulum segja að við viljum okkar app til að fara gera hvaða kort. Núna erum bara innt af hendi hardcoded kort. Við vitum að það er bara ein kort það getur gert, þannig að við erum ætla að reyna að breyta þessu nú svo að við getum bara gefa honum kort. Það verður að prenta út kortið. 

Þú ættir að reyna að gera þinn hluti mjög almenn notkun. Þannig að þetta leiðin sem ég gæti sent Þessi vinur minn og vera eins, hvað flashcard þú hefur, bara fæða það inn hér, og það mun gera það af sjálfu sér. Þú getur sett annað hlutir í eigin forritinu þínu. 

En fyrst skulum við brjóta þetta upp í tvo þætti, en við viljum skilja kortið prentun hluti af raunverulegu app hluta. Svo það sem við getum gert er við Hægt er að breyta þessu frá App að CardView, bara nýtt nafn á app, og við getum gert nýtt hluti heitir App, ekki að rugla saman við gamla App. Við höfum fengið createClass, og eins og í HTML, þú getur hreiður React hluti inni af hvort öðru. 

Þannig að í þessu geldur virka, virka aftur CardView, og þetta er nákvæmlega sama. Sjá hvers vegna það er það sama? Í stað þess að flutningur bara app sem hefur div og pörun inni af því, app gerir að CardView og CardView gerir div og lið. Þannig að þetta er fyrsta dæmið okkar hreiður þætti innan um hvert annað. Er að skynsamleg? Svo aftur, höfum við CardView frumefni. Við höfum app þætti að það er stærri en. 

OK, þannig að við viljum okkar CardView-- ef þú gefa góða CardView ákveðna kort, það mun prenta út fyrir þig, ekki satt? Svo fyrst þurfum við að gera kort, þannig að við skulum gera kort hlut. Svo skulum kortið mitt equal-- ef þú ert öll kunnugur, þetta er bara tákn-gerð mótmæla í JavaScript. Það er góður af eins og a strúktúr í C, svo við gert kort, og svo nú getum við framhjá þessu korti og eign eða sem eiginleiki í HTML hugtök til heimshornum. Þannig að við getum gert þetta, App kort jafngildir myCard. 

Þú veist hvernig á inntak, þú gerir input type jafngildir texta eða hnappinn flokki jafngildir BTN fyrir ræsingu ,? Sama hugmynd, App kort equals-- þú hefur fengið að setja axlabönd here-- App kort jafngildir myCard, þannig að þetta segir að við höfum þetta kort hlut. Ég ætla að gefa það sem Eign í app hluti. Og þetta app hluti mun vera fær um að nálgast það og gera áhugavert efni með það. 

Svo app okkar er að fara að vera gefið kort, svo að nú, skulum hafa app bara gefa kortið til CardView sjálft vegna þess að eins að app er ekki að fara að vita hvað ég á að gera við það, þannig að við verðum bara að gefa það til CardView. Þannig að við munum gefa það á sama hátt, kort jafngildir, og svo hver hluti er hægt að fá aðgang að það sem hefur verið gefið það. Þeir geta nálgast eignir sem hafa verið lögð á það nota þessa setningafræði, this.props.card. 

Svo hvað gerist hér er þú hefur myCard hlut. Þú gefa það inn í app nota App kortið jafngildir myCard. Að kortið hlutur er gefið app. The app er hægt að nálgast það eins this.props.card. Það er góður af eins og mynd veit hvað það er uppspretta er. 

Þetta app veit hvað það er kort er, og það getur gert hlutina með það. Það getur gert útreikninga. Það getur tekið ákvarðanir byggðar á því. 

Fyrir nú, ég var að fara að fara this.props.card inn á CardView. Skynsamleg svo langt? Það mun gera meira vit núna. 

OK, svo nú erum við á CardView. CardView okkar, miðað við kortið, ætti prenta út spurningu hennar og svar. Núna erum prentað bara út nokkrar hardcoded spurningar og svör. Við þurfum að reikna out-- við þurfum að spyrja kortið sem þeir gáfu okkur hvað er spurningin og svarið, og þá prenta þetta út í skjá. 

Þannig að við getum gert þetta hér. Í bakið begin-- fyrst að gera jafngildir. Svo það sem við erum að gera hér er að við vitum að spilin eru gefin okkur til eign, ekki satt? Það er okkur gefin sem inntak. Eins og það er nánast eins og rök að aðgerðinni. Kortið er rök næstum þessari CardView. 

Við munum draga það, og setja það inn í breytunni spurningu. Gakktu úr skugga um að svarið fór til breytu svar. Hvetja sem kortið til að svara. Og nú að við höfum þetta, stað þess að prenta út þessi texti, við erum að fara að prenta út hvað sem þeir gáfu okkur. 

Þannig að þetta stuff-- þannig að við erum að fara að setja út Spurning Svar. Við skulum sjá hvort þetta virkar. Cool, þannig að við skulum stíga í gegnum það einu sinni bara til að vera viss. 

Svo er kortið mitt kort hlut, og við eru að gefa þessi kort til app. Og app er að fara að taka kort og gefa það til CardView. Og þetta CardView segir, ef þú gefa mér einhverjar flashcard hlut, Ég prenta út spurningu sína og svarið hennar, ekki satt? 

Svo það sem ég gæti gert er að ég get senda þennan kóða, fyrsta eins og 10 línur af kóða mitt, að vinur minn. Hann gæti embed in það í eigin umsókn hans. Og svo lengi sem hann gerði það sama, eins CardView kort jafngildir þetta, svo lengi sem hann skapaði CardView og gaf það réttur upplýsingar, hann gæti láta eigin kortið sitt. Og svo með þessum hætti, það er mjög flott leið fyrir þig til að byggja þættir sem nota hvert annað, ekki satt? Þetta kort, gæti ég birta þetta CardView á internetinu, og fólk myndi vera fær um að nota það. Svo í rauninni, það er eins og einn af staðlaðar aðgerðir í C ​​bókasafn. 

Það er fall þar einhver hefur skrifað það. Þú gefur ákveðna inntak. Það verður að framleiða ákveðna framleiðsla. Þú hefur ekki sama hvernig það virkar innbyrðis. Svo lengi sem þú gefur henni rétt inntak, verður það að gera rétt framleiðsla. 

Og hluti getur verið hugsun af á sama hátt. Þetta CardView er eins bókasafn virka. Ef þú gefa honum spjald sem eign, verður það prenta út innihald það kort. Eins og ef ég breyti kortið mitt til í staðinn að vera eins og það er 5 plús 37, það mun uppfæra í samræmi við. Svo bara með því að breyta inntak, það fær ákveðna framleiðsla. Svo er hægt að hugsa um hluti nánast sem virka á þennan hátt, sem þú getur sett saman. Þú færð inntak, eins og þetta CardView sem inntak, þú færð framleiðsla. Í þessu tilfelli, framleiðsla er HTML. Skynsamleg svo langt? Cool, svo aftur, eru eiginleikar hvernig er hægt að fara upplýsingar inn og út af hlutum. 

OK, þannig að við skulum gera þetta hlutur gagnvirkt. Núna er það voða leiðinlegt. Hvað er [inaudible]? Hægt er að prenta sumir út, en það er allt sem það getur gert. 

Svo við skulum fara aftur til gamall spurningu bara fyrir núna. OK, svo núna þessir þættir eru leiðinlegur vegna þess að allt sem þeir gera, þeir fá inntak. Þeir gera framleiðsla, ekki satt? Það er voða leiðinlegt. Við viljum hafa okkar hluti til að vera fær um að hafa einhvers konar innra ástand, eins muna eitthvað. 

Fyrir flashcard, fyrir dæmi, hvers konar ástand þú might vilja til að muna að flashcard? Hvað tímabundið staða gætir þú vilt að muna fyrir flashcard í Flashcard app? Áhorfendur: Hvort sem það er verið hreifi? NEEL MEHTA: Já, rétt. Svo þú might vilja til að halda utan um ertu að horfast í augu eða eru þú hvolfi á kortinu. Á Facebook, til dæmis, þú myndir vilja til að muna hvar í fréttastraumi Ert þú eða eins og hver er uppsetningu ert þú að gera núna. 

Á Messenger, eins og það sem texti þig tegund í innsláttarreitinn, ekki satt? Ef þú uppfærir síðuna, fer það í burtu. En þú í raun ekki sama. Það er bara tímabundið. Já? 

Áhorfendur: [inaudible] NEEL MEHTA: Like a glampi kort, eins og þú getur að sjá spurningin hlið eða svarið hlið? 

Áhorfendur: OK. 

NEEL MEHTA: eins og tvíhliða flashcard, ekki satt? Já, svo þú vilt hafa þessa hugmynd um núna Ég hef eiginleika, sem er eins og aðföngum, en ríkið, sem er tímabundin, uh, þar sem þú ert á síðunni, ekki satt? Aftur, ég sagði í Facebook Messenger, ég hef eins sem maður þú ert að skoða Facebook eða sem er sniðið, ekki satt? 

Þetta er aðeins tímabundið. Það er mikilvægt að sýna notandanum hvað er að gerast, en uppfæra síðuna. Það skiptir ekki máli. Svo það er tímabundið ástand, þannig að við það ástand. 

Svo, aftur, það er ríkis og leikmunir. Props er inntak gefið frá gagnagrunni okkar. Ríkið er bara eins og vanskila. Það er bara eins og efni sem gerir málið gagnvirkt. 

Svo í okkar CardView-- skulum hafa okkar CardView-- svo það var gaman. Það sem við erum að fara að gera hér, við erum að fara að snerta CardView og aðeins CardView. Og svo vinur minn sem fékk þetta, þeir myndi ekki vart. Þeir myndu ekki þurfa að breyta eitthvað af eigin númer þeirra, en þeir myndu sjá sitt CardView fékk souped upp. Það er a ágætur hluti um hluti. 

OK, svo í CardView okkar, við skulum reyna að halda utan um hvort við erum í áföngum upp eða á grúfu. Í bregðast við gerum þetta með fyrst skilgreina upphaflegu ástandi. Hvar er kortið byrja? 

Svo vera fall sem kallast getInitialState virka, og við aftur hlut. Þessi hlutur inniheldur nokkur ríki, og ástand er bara lykill-gildi par. Eins og í kenna, hefur þú a lykill og gildi, hefur þú eins nafn er strengur. 

Í þessu tilviki, við skulum segja að framan er satt. Þetta segir að við höfum ástand. Einn hluti þess ríkis er eiginleiki sem heitir framan. [Inaudible], svo sjálfgefið, við erum í the andlit af the kort, og við getum breytt þessu eins og við Flip kortið. Meikar sens? 

OK, svo í bakið, núna erum við sýnir spurningu og svar. Nú hvað við ættum að gera er sýna spurninguna ef við erum á framhliðinni svo svarið er fyrir aftan á kortinu. Þess vegna allt að kortið gagnvirkt. Svo skulum reyna og þetta hér. Jæja, fyrst bara að gera breytu. Við getum spurt nú this.state.front. Við aðgang tilgreina sama við Aðgangur leikmunir, svo this.state.front. 

Ef við erum að framan, þá texta er this.props.card.question. Ef við erum á the andlit af the kort, við erum að fara að reyna að grípa spurningin af kortinu. Annars, ef við erum á bak kortsins, hvað gerum við? 

Áhorfendur: Svarið? 

NEEL MEHTA: Já, svo texti jafngildir this.props.card.answer. En ef þú tekur eftir, við erum með ríkið að taka ákvörðun því nú hluti mun líta öðruvísi byggt á hvernig þessir samskipti við það. Svo í stað þess að prenta út þetta, við verðum bara að prenta út texta. Cool, svo nú, eins og þú sérð, Við sjáum aðeins spurningunni. Og ef ég breyta stöðu hér handvirkt að framan er ósatt við fáum 42 aftur. 

Svo aftur, þessi hluti hefur eigin stöðu sína. Eins og hnappur veit hvort það er verið ýtt eða ekki, Þessi hlutur, veit hver er framan eða að aftan. Sjálfgefið er það að framan. Og þá ef það er á framhlið, við munum prenta út spurninguna. Ef það er á bak, við munum prenta út svarið. Svo aftur, upplýsingar gefið er sama. Það lítur bara öðruvísi byggt á hvernig þú program það. Svo, til dæmis, Facebook Messenger, jafnvel ef þú færð sömu gögn uppspretta, það gæti litið öðruvísi vegna þess að ríkið er öðruvísi. Þú ert að horfa á a Skilaboð mismunandi einstaklingsins. 

OK, þannig að þetta er allt vel og gott, en nú er það í raun og veru gera okkur kleift að breyta, hvort kort okkar er að framan eða bak. Við getum gert þetta með því að bæta a Flip hnappinn, hnappinn á kortið sem snýst kortið ef það er [inaudible]. Svo skulum bæta hnappinn hér, þetta hnappinn, og þessi hnappur mun segja flip. 

Og svo núna, það gerir ekki neitt. Það lítur bara ágætur. Það sem við getum gert er að við getum bætt smell stjórnandinn, onClick jafngildir this.flip, og við munum skilgreina Flip síðar. En í grundvallaratriðum, onClick er fall sem fær kallað þegar notandi smellir á hana. 

Svo á hnappinn vilja vita þegar það er verið smellt. Fór það hefur verið smellt það snýst kortið. Það er góður af eins og þinn pizza sending strákur. Þú ert eins og, allt í lagi, þegar einhver kallar mig, ég skila pizzu, ekki satt? 

Þú skráir þig á þessa hlustandi. Þú hlusta fyrir atburð. Þú kallaður, og þegar atburður gerist, þú gerir eitthvað. Þú færð pizzu. Í þessu tilfelli, þegar þú ert smellt þú flettir kortið. 

Og svo þurfum við að skilgreina fall sem snýst kortið, þannig að við munum skrifa það rétt hér, Flip virka. Og svo hvað finnst þér Flip mun gera? Aftur þetta fær kallað þegar smelltu við selbiti hnappinn. Hvað ætti að virka Flip gera? 

Áhorfendur: Breyta this.state.front sanni að rangar, rangar satt. 

NEEL MEHTA: Já, svo taka hvað sem this.front is-- framan ríkið er. Taktu framan ástand, ef það er satt, að það ósatt. Ef það er rangt, að gera það satt, ekki satt? Svo skulum reyna það. 

Þú getur ekki breytt stöðu bara með því að gera this.state. Þú getur ekki gert þetta. Þú getur ekki gert það. Þú þarft að nota virka kallað this.setState. 

Svo þú getur sagt this.setState framan ristill þetta þar, aftur, upphrópun lið þýðir hið gagnstæða. Ég held að ef þetta. state.front er satt, það mun snúa rangar. Þannig að við munum stilla stöðu sanni að rangar. Ef það er rangt, við munum setja það ósatt í satt. 

Bara eftir að við setjum og fá örlítið öðruvísi, og svo skulum reyna þetta. Bada Bing, líta á þetta. The Flip hnappur mun nú skipta framan til baka ástand. 

Og svo er hér þar sem þú sérð smá töfra React. Eins og við aldrei sagt það að það að koma aftur bakið. Við sögðum aldrei það uppkast neitt. Ef þú ert að gera þetta án Bregðast, að þú vilt hafa to-- eins og þegar Flip hnappur er smellt þú þyrftir að segja það að handvirkt aftur bakið, ekki satt? 

Bregðast er mjög flott þannig að ef þú gefa það ákveðna stöðu og eignir, það verður alltaf að láta nákvæmlega það sama. Og svo þegar við alltaf við breyta ríki og eignir, bregðast bara aftur gerir heild hlutur. Það veit að það er einn-á-einn bréfaskipti milli ríkis og breytu og HTML. Svo þegar annað hvort þeirra breytingar frá í gegnum safn ríkisins, það mun breyta því hvernig borga er aftur veitt. Og svo í rauninni React er eins að bíða eftir þér til að breyta. 

Alltaf þegar það breytist eitthvað, það verður aftur láta alla síðuna. Og ef það hljómar óhagkvæmt, það er vegna þess að það væri, en bregðast notar neitt kallað Shadow DOM. Í stað þess að teikna á síðunni beint, það heldur raunverulegur HTML tré í minni. 

Þú veist, HTML er eins og tré, eins hierarchic gögn uppbygging. Það heldur falsa tré í minni, og þegar þú uppfærir síðuna, það mun draga aðra falsa tré, og það mun reikna hvað breytist það þarf að gera síðu að gera tvö tré jafnir. Svo í rauninni, nánast það aftur gerir mikið. Og þá aðeins það eins breytir síðu í litlu klip sem þörf krefur, svo það er mjög, mjög, mjög duglegur. 

Svo í rauninni viðbragðsflýtir þegar þú breyta einhverju, það verður aftur gera síðuna nánast. Það verður að reikna út hvað ég þarf að breyta til að gera alvöru síðu endurspegla raunverulegur síðu, og það mun gera það. Það er raunverulegur DOM. Það er eitt af stærstu aðgerðir bregðast. 

Er að skynsamleg? Einhverjar spurningar? Já? 

Áhorfendur: Hvernig virkar bera saman enn á MVC sem við ræddum um áður eins og auðlindir. 

NEEL MEHTA: Já, spurningin er hvernig er það bera saman við MVC? Þú baðst um auðlindir. Jæja, við skulum tala um hvernig það virkar. 

Í MVC, þú vilt uppfæra líkanið. Í þessu tilfelli erum við myndum hafa kort líkan. Útsýnið myndi hafa Flip hnappur og stjórn hefði selbiti virka. Svo útsýnið myndi segja að stjórnandi að Flip Flip. Flip myndi segja að líkan til að breyta, ekki satt? 

Og svo þegar þú gerir að MVC, þér hlusta eftir fyrirmynd til að breyta, og þú aftur láta þá skoðun í samræmi við. Eða þú ert bara að eins hafa stjórnandi. Bíða eftir fyrirmynd til að breyta, og þá velja og velja hluti af eins og hlutur breyta. Hér höfum við eitt, en í stórum app, þú þarft að eins muna hvað breyting á hverjum einasta stað, svo það er svolítið pirrandi. Og svo bregðast er gott vegna þess að það hefur Shadow Dom. Það hefur efni á að bara umrita allt hlutur. Þú þarft ekki að vali eins giska á hvað á að uppfæra. 

Á Facebook ef þú vilt fá ný skilaboð, í MVC, þú vilt að muna, OK, breyta því sem efst á síðu, táknið skilaboð. Einnig skjóta nýjum glugga neðst. Einnig gera nýja hlutur í þeim glugga. Einnig spila hljóð. 

Það er mikið af efni að fara út á sama tíma. Og svo ef þú ert ekki hafa Shadow Dom, að þú vilt þarft að gera það handvirkt því þú getur ekki fá losa af alla síðuna. Þú getur ekki efni á að, svo þú þarft að breyta hver hlutur handvirkt, sem er mjög pirrandi í MVC. 

Svo í því skyni að vera thrifty, þeir vali uppfæra síðuna, sem er duglegur, en einnig pirrandi. Í bregðast, vegna skuggans Dom, þú færð bæði hluti fyrir frjáls. Það er skilvirk vegna í skugga Dom. Flöskuháls er að uppfæra síðuna. Það er ekki að gera tré meðferð. Þú færð skilvirkni. Þú færð einnig vellíðan af nota vegna ef þú umrita bara alla síðuna, en þú veist bara, allt í lagi, það eru að fara að vera á síðunni einhvers staðar. Það gæti verið í öðru sæti, en það er að fara að vera á síðunni, ekki satt? Svo þú bara aftur veitt allt hlutur nánast, og þú gætir gert nokkrar breytingar á síðunni sjálfri. 

Svo, aftur, í MVC þig þyrfti að velja milli vellíðan af nota og skilvirkni, og bregðast, þú færð bæði. Svo það er betra. Meikar sens? Solid. 

OK, þannig að við skulum sjá skulum tala svolítið um skref 4, hvernig við getum embed hluti. Þannig að við höfum þetta rétt núna. Við höfum okkar kaldur litla hnappinn. Við getum Flip það aftur og fram, og það er allt það er. Segjum að við viljum hafa annað hluti. Skulum segja flashcard app okkar ætti finna lista yfir öll spilin sem þú hefur, svo það þýðir að við ætti að hafa aðra hluti. Jæja, kannski kalla það listi útsýni. Við skulum gera lista skoðun að coexists með CardView, og þessi listi skoða og CardView verður eins vinna saman. Og þú getur sameinað þá að gera app okkar fyrir þig. 

Svo fyrst, við skulum gera par fleiri spil rétt. Við skulum segja, hvaða spil? Og bara svo ég þarf ekki að ól þig með því að slá það inn, Ég ætla bara að fara að afrita það hér. Og svo ég ætla að ekki gefa það bara eitt spil. Ég ætla að gefa það upp á fjölbreytta spil. Svo fyrstu apps að fara að brjóta nú. Allt í lagi, þannig að við erum að fara að gera þetta fær til handleika margfeldi spil. Svo fyrst, við erum að fara að gefa það, ekki bara eitt kort heldur array af kortum, eins lista af kortum. Og í þessu tilfelli höfum við þrjú af þeim. 

Allt í lagi, svo svo app er fara að fá lista spil, og það er að fara að ákveða hvaða eitt til að sýna að CardView. The CardView getur aðeins láta eitt kort, en app fær lista yfir öll spilin, ekki satt? 

Svo þegar þú reikna út einn kort til að gefa CardView, hvernig myndir þú giska á að þú might vera fær að taka ákvörðun um hvaða kort til að sýna? Til að gefa þér vísbendingu, það er tímabundið Þú verður að lesa ákveðna kort. Ef þú uppfærir síðuna, þú munt bara fara aftur til fyrsta kortið. Það er allt í lagi vegna þess að það er tímabundið. Hvað tækni gætum við nota? 

Áhorfendur: Þú gætir gert breytu svo bara eins og þú hefðir framan. Er það satt, þú gætir hafa núverandi kort er 1? 

NEEL MEHTA: Já, svo við vilt hafa stöðu, ekki satt? Þú myndir nota ríkið í hluti til að reikna út sem kortið viljum við fá. Eins og við hafa a listi af öll spilin, við munum nota stöðu til að reikna út einn af fyrsta kortið, annað kort, Þriðja kortið, og svo framvegis. 

Svo app svo app vilja fá a hafa getInitialState virka, getInitialState virka aftur. Og við verðum bara að segja activeIndex 0. Svo nú hefur app okkar það eigin ríki. 

Og svo nú á bakið, til að reikna út kort, við skulum fara bara til fylkisins og grípa málið á vísitölu. Veldu kort jafnt this.props.cards this.state.activeIndex. Svo eins og þú sérð hér, leikmunir og ríkið í raun vinna saman. Svo nú er að við höfum activeCard okkar, við munum kalla það activeCard, og við skulum sjá hvort þetta virkar. [Inaudible] 

Ó, það var texti villa. Ah. 

Cool, jebb, svo nú við vorum aftur að þar sem við vorum áður, ekki satt? Sama gamla program nema nú getum við styðjum listi af kortum, ekki bara eitt kort. Og nú, aftur, ef við breyta activeIndex, getum við farið frá 0 til 1, og nú að annað kortið, og þá fórum við 0. Svo er hér ný souped upp útgáfa af okkar. 

OK, svo nú skulum við hafa a listi skjáinn sem sýnir öll spilin í forritinu, þannig að við munum gera nýtt hluti heitir ListView. Láta ListView jafngildir react.createClass. Þannig að við viljum láta óraðaðan skrá með atriði á listanum fyrir hvert kort. Og svo við höfum fullt af kortum. Við viljum einn lista atriði fyrir hvert kort, ekki satt? Við gætum gert fyrir lykkju eða eitthvað til að gera nýja lista atriði. En eins og þú gerir það í Bregðast við, nota neitt sem heitir kort. Kortið er tól eða fall sem þú notar að fyrir hvert lið, rekur sumir virka, tekur aftur gildi, og gefur þér að baka. 

Svo sem dæmi, höfum við fjölda 1, 2, 3.map function-- og þetta er styttingin fyrir a function-- x arrow x sinnum x. Þetta segir, fyrir hvert númer í 1, 2, 3, taka það. Ferningur það, og gefa það til baka. Svo hvað finnst þér 1, 2, 3.map x fer x sinnum x gefur þú aftur gefið að þessi aðgerð er keyra á hvert þáttur þessi fylking. 

Áhorfendur: 1, 4 9? 

NEEL MEHTA: Já, 1, 4, 9 vegna þess að þú gerir 1 sinnum 1. Sem gefur þér einn. Það er fyrsti þátturinn. 

2 sinnum 2 er 4. Það er annað þáttur. 3 sinnum 3 er 9. Það er þriðja þáttur. Meikar sens? Svo Kortið er tækni sem þú nota í hagnýtur forritari, nýja stíl forritun til að gera eitthvað að hvert frumefni í listanum þínum. Og svo hljómar þetta kunnuglega. Við erum með lista yfir kort. Við viljum fá lista atriði fyrir hvert einn, þannig að við munum bara nota kortið hér. Við munum segja, láta lista jafn this.props, spil, kort. 

Og svo gefið kort, við erum að fara að búa til lista atriði með að kortið er innihaldi megin við það. Við skulum bara segja að við viljum gefa út spilin spurningu svo card.question. Svo inniheldur þessi listi er array af LI eða listaeigindi þar sem það er einn lista atriði fyrir hvert kort, og sem inniheldur spil spurningu. Meikar sens? 

Cool, svo nú skulum í raun prenta það út. Þannig að við munum skila ul. Inni að óraðaðan lista, við verðum bara að standa allan listann sem þeir gáfu okkur. Cool. 

Allt í lagi, svo nú þetta Listaglugginn virkar bara finna. Einhverjar spurningar um nafnalista? Þú ert með fullt af kortum. Þú gera lista atriði fyrir hvert kort. Og þú setur þá inn óraðaðan lista, og þú gefur það aftur. Svo nú skulum bregðast svo við embed þetta inni heimshornum, svo við getum gert þetta, listi skjáinn. Hvað rök ekki við framhjá að skrá útsýni? Hvað eiginleika eigum við að gefa það? Mundu að ef þú gefur það fullt af kortum, það mun gera lista sjá fyrir þeim kortum. Svo hvað myndum við fara hér sem rök? Áhorfendur: Listi af kortum? NEEL MEHTA: Já, svo spil jafngildir this.props.cards, ekki satt? Og svo eina vandamálið er að þú getur aðeins þá á einn í efsta þrepi þáttur í bakið, svo þú hefur fengið að vefja það í div. Þetta er skrýtið. Svo skulum sjá hvort það. Er að vinna? 

Já, þar sem þú ferð. Svo nú höfum við lista spil neðst, og þá höfum við okkar CardView sig á toppinn, og það mun selbiti milli tvær hliðar á kortinu. Nú er að skynsamleg hvernig ég gerði það? Já, svo aftur, höfum við tvo hluti. Fyrsti þátturinn prentar út á hverjum kortið í listanum. Það er listi. Og seinni hluti prentar út bara þessi kort. Ef þú gefur það ákveðna kort, það verður prenta út upplýsingar um það kort og láta þú flettir fram og til baka. 

Svo ef við viljum, við getum reynt og tala um að bæta við nokkrum nýjum möguleikum að þessu. Annars getum við talað aðeins meira um af rennslishraða reactor, eða við getum svarað spurningar sem þú gætir hafa vegna þess að þetta eru allar helstu hlutum af bregðast að ég vil tala um. Við getum farið á undan. Við getum svarað spurningum. Hvað sem þú vilt. 

Áhorfendur: Er hægt að nota JSX í venjulegum JavaScript? Eða er það eitthvað sem kom með [inaudible]? 

NEEL MEHTA: Spurningin er dós þú notar JSX með eðlilega JavaScript? Svarið er já. JSX er bara leið til að Hún tekur JavaScript sem hefur HTML inni af því, og það safnar í JavaScript sem er ekki með HTML inni af því. Svo eftir that-- svo eftir hér. Þetta lítur út eins og þú ert eins og div og þú hefur efni inni af því. 

Sem safnar JavaScript að eins býr það sama. Ég giska á hvað ég er að segja er að JSX er bara nokkur dæmi um setningarleg, eins og það er a Preprocessor fyrir JavaScript mikið eins og PHP er Preprocessor fyrir HTML. JSC er Preprocessor fyrir JavaScript sem leyfir þú setur HTML inni þinn JavaScript. Og svo ef þú hefur rétt spenni sem er hlutur sem kallast [inaudible] sem mun breyta. Rétturinn Preprocessor, það mun láta þig gera það. 

Áhorfendur: [inaudible] NEEL MEHTA: Yfirleitt þú þarft ekki að setja HTML inni JavaScript nema gera þinn React. En þú getur gert það engu að síður. Yep? 

Áhorfendur: Ég held að þú hafði lýst React sem hagnýtur forritun tungumál. Við höfum verið að læra C í CS50. Er C einnig hagnýtur tungumál? NEEL MEHTA: Svo spurningin er um hagnýtur móti annar hlutur sem kallast mikilvægt eða málsmeðferð forritun. Það er tvær tegundir af forritum vinsælustu. Einn heitir málsmeðferð, sem er allur óður í eins og að gera skipanir, og einn er hagnýtur, sem er allt um að hafa aðgerðir og hafa inntak og framleiðsla þeirra. Bregðast er hagnýtur fyrirmynd. C er mjög málsmeðferð fyrirmynd. 

Og sem dæmi, C til dæmis, þú gerir það ekki þetta declarative hátt að gera áætlun, ekki satt? Þú þarft að segja, prenta þetta. Breyta þessu gögn uppbygging. Prenta þessa. Það er allt um skipanir. 

Í bregðast, það er ekki sem margir skipanir. Það er allt um að hafa þættir sem þú setur saman. Þeir eru eins og aðgerðir. Þú ert eins og fall heitir CardView, sem er fall sem hefur inntak, úttak, og svo bregðast er allt um þessa hugmyndafræði okkur af having-- þú hefur gögn. Þú gefa það í gegnum þetta reiknirit, og það mun framleiðsla HTML sem þú bara prentað á síðunni, og svo þú verður að byggja það stykki af stykki. 

Svo til að draga samlíking að það Ég sagði áður, þú veist hvernig á Facebook ef þú færð skilaboð, og þú velur hvaða hlutar að uppfæra, það er málsmeðferð. Það er mikilvægt, ekki satt? OK, ég fékk skilaboð. Skulum breyta reikning þar. 

Við skulum skjóta glugga hér. Skulum breyta reikning þar. Við skulum draga þetta hér. Það er málsmeðferð nálgun. 

Það er það, sem eins Angular, Boost, burðarás, nota önnur umgjörð. Bregðast er hagnýtur. Það er mjög mismunandi hátt hugsa um hlutina. Það tekur þessa hugmynd við skulum hafa aðgerðir eða reiknirit sem mun þú gefa það gögn. Það verður spýta út hvað það ætti að vera, og tölvan mun sjá um vigtun út. Þú höndla það ekki sjálfur. Er að gera smá hluti af skilningi? Já? 

Áhorfendur: Í hagnýtur tungumáli, allt gerist í einu? 

NEEL MEHTA: Nei, það gerist í röð. Eins og hér það er enn panta, en það er ekki gerast í röð eins og hrósa, stjórn, stjórn. Það gerist í röð virka gefur þér framleiðsla. Setja það inn annan valkost. Setja það inn annað virka, annað virka. 

Ef þú gerir CS51, þú munt læra hagnýtur forrit lítið út á umfangi þessa. En í grundvallaratriðum, það sem gerir Bregðast kaldur er ekki aðeins The einn-vegur gögn flæði og raunverulegur Dom, en einnig þessi hugmynd um hagnýtur forritun. Og hagnýtur forritun er mjög auðvelt að semja og gera flott dót út af, og það er mjög auðvelt að hugsa um og ástæða um. Svo það er annar góður draga af React. Einhverjar fleiri spurningar? Já? 

Áhorfendur: Um, hvers vegna vildi þú nota láta öfugt við Var? 

NEEL MEHTA: Svo er spurningin hvers vegna heldur þú að nota láta í staðinn Var? Þetta er hlutur sem kallast ES6 eða EcmaScript 6. Það er ný útgáfa af JavaScript. Það er fullt af tæknilegum ástæðum, En láttu er betri útgáfa af var. 

Það er hvernig þú lýsa breytum. Þú getur notað látið. Þú getur notað var. Let hefur fullt af tæknilegum reasons-- þú getur litið þá upp later-- fyrir hvers vegna það er betra. Í grundvallaratriðum, ES6 hefur sumir ágætur Ný setningafræði, sumir nýr lögun ofan á gamla JavaScript. 

Þannig að við höfum eins og fimm mínútur. Ég vildi bara að tala um eitt í viðbót alvöru hratt. Ef þú hefðir einhverjar spurningar, við skulum tala um það eftir þetta. En bara svo fær þetta lent á myndavélinni, ég bara langar að tala svolítið um hvernig þú reyndar nota bregðast apps. 

Ef þú ferð hér, Facebook.GitHub.IO/react, þetta er heimasíða fyrir React, og hann mun sýna þér hvernig þú notar í raun Bregðast á síðum þínum. Í grundvallaratriðum, það er lítið flókið að reyna að setja upp bregðast. Það er ekki eins auðvelt og þú dregur bara og sleppa Javascript í það. 

Þú þarft að hafa spenni þitt sett upp, sem mun, eins og það gerði áður, snúa JSX inn í eðlilegt JavaScript. Þú þarft að hlutur sem mun safna saman þú ES6 í eðlilegt horf. JavaScript það er mikið af áhrifamikill hlutum sem þú þarft að gera, þannig að það er hlutur kallað Yeoman, Yeoman.io. Og þetta er a stjórn lína tól sem munum hjálpa þér scaffold út þinn React verkefni auðveldlega. 

Svo er hægt að lesa um þetta síðar, en það eru nokkur tæki sem Yeoman býður. Þeir láta þig búa til React app með allt byggt á. Eins og það mun hafa byggt í, hluti byggt á. Það verður spennir þinn byggð í. Þeir hafa a einhver fjöldi af kaldur efni byggt á sjálfkrafa nota þetta kallast rafala. 

Svo las um þetta ef þú vilt. Bara fara á Yeoman, Y-E-O-M-A-N og þú getur fundið rafala eins og þessir. Og með rafala eins þetta, eins og þú bara einn er a par stjórn lína stjórn. Það verður scaffold út Allt Bregðast app fyrir þig. Það verður að fá allar handbók lagnir, og grunt vinnu fyrir þig, og þetta er hvers vegna þú einblína bara á bara að skrifa í React. 

Svo í rauninni að byggja upp Bregðast app er nontrivial. Það er hefðbundin allt saman, en það eru verkfæri sem mun gera það fyrir þig. Þannig að ef þú vilt gera a bregðast app, reyna að gera það þannig. Ef þú vilt bara að gera tilraunir, þú getur prófað að nota þessa CodePen vegna þess að þetta CodePen hefur allt bregðast raflögn. Ég hef gert allt verkið fyrir þig nú þegar. 

Þannig að ef þú vilt gera eins og framleiðslu til að losa bregðast app, reyna einn af þessum rafala. Ef þú vilt bara að spila um, það er oft þess virði bara eins reyna að leika í kring á CodePen hér. Hljóð góður? Cool. 

Svo er það allt sem ég þarf. Aftur, allt fyrir og dæmi eru að fara að vera á þessum vef hér. Svo aftur, við ekki tala um mikið setningafræði React, en að finna alla þá litla syntactical upplýsingar, það er allt að fara að vera í boði á þessari vefsíðu hér. 

Svo ég myndi mæla með eins og að taka fyrsta skrefið. Setja það inn í CodePen þinn. Reyna að vinna að því að gera það til seinni skref. Það er fjórða skrefið, og bara sjá hvar þú færð frá þeim. 

Einhverjar fleiri spurningar, athuga út að síðunni eða sendu mér tölvupóst. Það er netfangið mitt. En ég myndi elska að hjálpa þér með eitthvað spurningar sem þú gætir hafa um React. Svo, Já, það er allt sem ég hef. Þakka ykkur öllum kærlega fyrir horfa eða til að sækja. Og ég tek einhverjar spurningar þú gætir hafa eftir þetta núna. Svo þakka ykkur öllum fyrir að horfa á.