[MUZIKO Ludante] 

Neel Mehta: tie iras. 

Nu, ĉiuj, bonvena retejo apps de la estonteco kun React. Jen CS50. Mia nomo estas Neel. Mi estas TA por CS50 kaj duajarulino ĉe Harvard College kaj tre, tre pasia ttt desarrollador. Do mi estas tre ekscita parolos al vi hodiaŭ, ĉu vi estas ĉi tie aŭ ĉe hejmo rigardante, pri React, kiu estas, denove kiel mi diris, la estonteco de retejo apps. 

Do React estas retejo kadro. Kaj kiel mi estis rakontanta al kelkaj homoj ĉi tie, kadron estas nur aro de iloj vi povas uzi strukturi kaj konstrui vian ttt app. Kaj retejo apps estas, denove, retejoj ke estas interagaj kiel Facebook, Twitter.com, Instagram.com, ajn. 

Do Facebook estas retejo kadro kiu estis disvolvita de Facebook paron jaroj back-- React estas. Ĝi poste estis uzita en Facebook sur ilia movebla apps kaj la retejo app, Instagram. Khan Akademio estas alia elstara frua adopter de React. 

Ĝi estas vere estis akiranta ekstreme populara. Se vi iam uzi aĵojn kiel Angular aŭ Backbone, tiu estas de la sama familio, sed ĝi havas ekde nun superos ilia populareco. Ĝi estas la varma nova afero. Estas vere, vere grandega. 

Kaj tiel React estas bona ne nur kiel ttt enkadrigi konstruaĵo interfacoj. Bonas por konstruado ttt interfacoj. Ekzistas ankaŭ afero nomata React Indijena kiu ebligas konstrui interfacojn por Android kaj iOS kaj eble aliaj platformoj en la estonteco uzante nur la sama kodo JavaScript. Vi povus uzi la samajn JavaScript kodo repagi retejoj, repagi Android apps kaj iOS apps. 

Ĝi estas tre, tre ekscita tempo. Estas vere, vere malvarmeta ŝancon. Estas vere universala retejo interfaco programilo, Do ĝi estas tre, tre grava afero scii. Kaj, kiel mi estis rakontanta personoj antaŭe, tio, mi opinias, tuj ŝanĝos kiel ni konstrui retejo apps ĉiam. Do estas eble iom hiperbolo, sed mi kredas ke estas sufiĉe bona afero scii. 

Bone, do kion estas React? React estas kadro vi povas uzi por konstruado interfacoj. Interfaco estas, denove, retpaĝo, ĉu ne? Do jen Instagram.com, uzoj React. 

React estas konstruita sur la ideo de komponantoj. Komponanto estas HTML elemento en esteroides, tial HTML elemento estas kiel butono. Ĝi estas alineo. Estas kaploko, dekstra? Kaj Instagram uzos tiujn, sed ankaŭ uzos komponantojn de React. 

React komponantoj souped funkciadon HTML elementoj kiuj havas sian propran konduton enhavis ene de ili. Do, kiel ekzemplo, ni povus havi tempo elemento, tempo komponanton, kiu enhavos kiel la tempo poŝtmarko, sciu, profilan komponanto kiu enhavos la profilon bildo kaj la nomo de la persono. Ĝi povas havi kiel vendotablo, kiu povas kalkuli kiel la nombro de homo, kaj se vi alklakas ĝin, ĝi devos pliigi la nombron da gustoj. Komponanto estas nur faskon de HTML kodo ke havas iuj funcionalidad envolvita ene de ĝi. Do estas kiel HTML elemento en esteroides, kiel mi diris antaŭe. Vi povas preni ĉi tiuj komponantoj, kaj vi povas meti ilin kune fari novajn komponantojn, en tiu kazo, post ero, kiu enhavas ĉiuj ĉi aĵoj. Ĝi enhavus Tempo, Profilo, LikeCounter, eble la komenton kaj eble la bildo mem. Kaj tial retejo apps jxus konstruita per prenante komponantojn kaj metante ilin kune. Instagram feed estas nenio pli ol faskon de artikoloj unu post alia, kolono enhavas kiel la Tempo, Profilo, LikeCounter, kaj tiel plu. Estas ia kiel konstruante domon. Vi ne konstruu la domo de la supro malsupren. Vi prenu components-- vi preni kiel la banĉambro. Vi prenu la bedroom-- vi batas ilin kune, kaj vi havas novan komponanton. Vi havas novan parton de la domo. 

Do reagi estas ĉiuj konstruitaj ĉirkaŭ tiu ideo de komponantoj kiuj estas interagaj, kiuj estas enunciativo. Kiel vi nur diri kion oni profilo estas, kaj ĝi faras ĝin. Ili estas composable. Vi povas preni tempon kaj profilo, metis ili kune, fari ion bonan. Kaj ili estas reuzebla, do se vi havi la fontkodon por fosto, vi povus enkorpigi ke ie. 

Oni povas enigi Instagram afero en via propra retejo. Vi povas enkorpigi en Facebook, ekzemple, kiel longe kiel ĝi uzas React tiel. Do komponantoj estas vere, vere, vere potenca konstruelementoj de la retejo kiu povas esti uzita anywhere kaj metis kune fari novajn konstruelementoj. Tio estas la tre, tre alta nivelo superrigardon. Do, denove, se vi havas demandojn je ajna punkto pri la filozofio de reaktoro, la kodigo, halti min, kaj lasu min scii. 

Bone, do reagi estas malvarmeta ĉar havas malsaman manieron de rigardado ĉe kiel vi konstruos retejo apps. Vi verŝajne aŭdis de MVC, a modelo kontrolas en CS50 aŭ kio ajn aliaj sondado klasoj uzas. Kaj plej kadroj konstruita ĉirkaŭ la ideo de MVC. React ne. React estas konstruita ĉirkaŭ la ideo de unudirekta datumoj fluo kiel vidita de tiu abako aŭ grafika tie. 

Esence, Vi havas datumfonto. Kaj la datumfonto decidos kiamaniere meti iujn komponantojn. Kaj la komponantoj tiam, kiam ili ŝanĝas, ili diros al la datumfonto ŝanĝi. 

Uzi la Instagram Ekzemple, vi eble devas listo de post celoj kiel en datumbazo aŭ io. Ke la datumoj. Kaj tiam nia post komponantoj prenos tion datumojn, kaj uzi tiun datumon por repagi ion sur la ekrano. Tion la sagon de datumoj al komponanto estas, kaj tiam ke sama datumo estas uzata repagi faskon de komponantoj. 

En Facebook Messenger, Ekzemple, kiu estas React, vi eble havas liston de mesaĝojn kiel via datumfonto. Kaj kiu redonu ne nur la listo de mesaĝoj sed ankaŭ la lerta de amikoj vi havas. Vi havas la nelegita grafo. Eble ankaŭ repagi la Facebook afero jen funde de Facebook.com. La sama datumoj estas ununura fonto de vero kaj kiu kaŭzas multajn komponantoj esti pruntitaj. Kaj kiam ajn unu el tiuj komponantoj estas ŝanĝita, ĝi superas kaj ŝanĝas la datumfonto. 

Vi sendu mesaĝon, ĉu ne? Kiu ŝanĝas la datumfonto. Vi legas viajn mesaĝojn, tiel vi starigis nelegita al 0. Kiu ŝanĝas la datumfonto. Kaj rimarki ke ĉiuj tiuj de unu arrow revenanta al la samaj datumoj fonto, tiel vi scias, donita certa datumoj aro, Vi scias ĝuste kion la Paĝa tuj aspekti. Ĝi estas determinisma. Vi scias, donitaj iuj datumoj, kio la paĝo tuj aspekti. Vi povas antaŭdiri kiom ĝi tuj kondutas kaj kiel aferoj estas irantaj labori kiam ili estas kunmetitaj. 

Kaj se mi havus milionon komponantoj tie, ĝi kondutus la sama, ĉu ne? Vi ne havus ajnan weird interconexiones. Unu datumoj sendadis miliono komponantoj. Miliono komponantoj povis reiri kaj redakti la datumojn. Kaj tiel tio estas tre bela. Ni konstruas composable, facile skalebla retejo apps. 

Vi havas unu datumfonto, la fonto de vero. Kiu rakontas vian komponantoj Kiel meti ekstere la paĝo, kaj la komponantoj manipuli interago. Kaj se ili volas ŝanĝi aferojn, nur iri reen kaj diri al la datumfonto ŝanĝi. Sencon? Do React estas ĉiuj pri kompreno kiel konstrui komponanto kaj kiel fari vian komponanto interagi kun la ekstera mondo. 

Farante la komponanto Interact kun la ekstera mondo uzas alian teknologio nomata Flux, kiu estas kadro kiu estas aldonita aldone reagi. Ni ne tuj paroli pri tio. Ni tuj parolos pli pri, donita datumoj, kiel vi povas repagi komponanto? 

Kaj tiel React estas vere malvarmeta ĉar vi povas uzi ĝin kun ajna malantauxo vi volas. Se vi havas kiel Python malantauxo, se via Python povas kraĉi iuj datumoj, React povas repagi ĝin. Se vi estas jam JS eligoj de datumoj, React bildigas ĝin. Ruby rails kun datumoj, React bildigas ĝin. 

Do React estas esence retejo view-- fasado kun komponantoj por ajna datumfonto whatsoever. Kaj tiel iranta de datumfonto al reagi komponantoj estas sufiĉe facila. Irus inverse estas iom pli malfacila. Kiu uzas Flux kiel mi menciis antaŭe. Ni ne eniros en tiu. Ni enfokusigi pli sur la datumoj-al-komponanto flanko. Tiel vi povas fari malvarmeta, amuza retejo apps. Ĝi ne tuŝas la eksteran mondon por nun, sed tio estas alia rakonto. 

Bone, do se vi estus ĉi tie por mia lasta seminario vi scios ke la kodon por hodiaŭa babilado tuj estos ĉe tiu URL tie, bedaŭras, ĉi URL tie. Kaj esence ni tuj iru tra kvar paŝoj, eble kvin, probable ne kvin. Ni moviĝas tra kvar paŝoj konstrui specimeno React app. Kaj tial ĉiuj fontkodo por ĉiu paŝo de la vojo tuj estos ĉi tie, do se vi sekvajn kune hejme, bonvolu peruse tiu kodo. Se vi sekvante kune tie, ni montros tion sur la ekrano, do ne zorgu pri tio. Sed se vi estas ĉe hejmo, senti libera viziti ĉi tiun retejon. Kaj, jes, vi devus povi akiri tuta kodo oni kredus iam bezonos tie. Do ĝi estas bona cheat folio tiel por via estonteco aventuroj kun React. Cool, do se ĉiuj kiuj estas ĉi tie, kaj eĉ se vi estas hejme, elsxiros tiun retejon, is.gd/cs50react, neniu kapitalo, neniu substreko, neniu nenio. 

Vi vidos paĝo kiu aspektas iomete kiel ĉi. Jen afero nomata CodePen. CodePen estas kunlabora kodigo medio kun kiu mi povas skribi kodon tie, kaj ĝi estos aŭtomate sendita al vi. Kaj al tiu vojo, mi povas skribi kodon. Mi povas kuri kodo tie. 

Por example-- kaj se reloads-- vidi, Mi kuras JavaScript kodo en la paĝo tie ĉi, kaj ĝi malebligos aŭtomate redonu retpaĝo kun tiu kodo JavaScript. Kaj tiel tio estas vojo por ni provi kodo vere rapida sen devi uzi niaj ID aŭ uzi niajn loka maŝino aŭ kio ajn. Ĝi estas tre rapida maniero por vi mockup kaj provi malsamajn specojn de kodo. 

Do mi tuj devas preni Ekzemple kodo, metante ŝin tie. Ni tuj laboros per ĝi. Kaj se vi estas ĉe hejmo, Vi povas tiri ĉi supre ankaŭ. Kaj mi jam instalita Reagi ĉi tie, tiel ke oni nur skribi vian propran kodon tie, kaj provu ĝin kiel via propra ludejo. 

Jes, se ĉiuj malfermu tiun ligilon ĉi tie. Bonvolu doni al mi dikfingroj supren unufoje vi havas ĝin malferma. Cool, malvarmeta malvarmeta. Nenio ĉi tie nuntempe, sed ni ŝanĝos ke tre baldaŭ. 

Bone, do React estas JavaScript biblioteko, kaj kiel tia, postulas konon de Ĝavoskripto, kiu estas la ttt programlingvo. Kaj ĝi estas uzata por aliaj aferoj nun tro sed unuavice la ttt disvolvi lingvo, do se vi ne kutimas ke, legis retejon nomitan JSforCats.com. Ĝi estas mirinda. Vi povas lerni Ĝavoskripto en duonhoro. Ĝi estas nekredebla. 

Do donu ĝin legita. Ni ankaŭ trovas multajn HTML tie ĉar ni desegni retpaĝojn kompreneble. Do se vi estas nekonata kun HTML, kontrolu HTMLdog.com. Mi pensas lerni React estas milionoble pli facila se vi jam scias la konstruelementoj. Se vi havas la komponantoj, estas facile fari pli grandan komponanton. Tio React lingvo por vi. 

Do iru antaŭen kaj doni tion legita. Paŭzi tiu video. Donu ĝin legita se vi estas hejme, se vi ne familiara kun HTML aŭ Javascript Bone, do kion ni tuj fari estas ni tuj faros tre baza flashcard app uzanta React. Ni tuj havos flashcard. Vi povas klaki la karton reen. Kaj ni ankaŭ havas liston de ĉiuj kartoj kiujn ni havas, kaj se ni sentas ambiciaj, eble ni povis ŝanĝi inter aŭtoj alklakante ilin. 

Sed tio estas, de via nuda ostoj, tre simpla React app. Kaj tiel tio estas vere ne banalaj implementar, sed ni tuj montras, ke se vi faros tiu, ĝi estas tre, tre facila de etendi ŝin se aliaj personoj helpi vin kun ĝi. Do ni tuj iru tra kvar paŝoj ekde nulo konstrui ĉi. 

Bone, do la kvar ŝtupoj, ni dividi kun la unua paŝo. La unua paŝo estas tuj estos konstruante via unua komponanto. Kiel mi diris antaŭe, komponanto en React estas nur HTML elemento en esteroides. Ĝi specifas la HTML kaj iu konduto, kaj ĝi specifos kiel homoj povas interagi kun ĝi kiel ĝi havus internan staton. Kiel butono scios kiel kiom tempoj ĝi estas klakita ekzemple, kaj ĝi scias kiel meti sin el. 

Do ni iru antaŭen kaj konstrui nian unua komponanto uzante JavaScript. Do se la sintakso aspektas stranga, tio estas ĉar ĝi ia estas. Do, denove, ni tuj fari variablo nomis app uzante la ŝlosilvorto lasu, kion faras variablon, lasu App egalaj React.createClass. 

React estas biblioteko kaj havas la krei klason funkcio. Kaj ĉi tiu funkcio estas iom de kodo kiun vi povas uzi por krei novan tipo de React komponanto. Kaj tiel React.createClass faras komponanton, kaj tiu komponanto povos fari aĵojn. La ĉefa afero povas fari estas render io, redonu kiel funkcio. 

Denove, se tiu indekso ne estas evidentaj al vi, mi rekomendas al vi iri sur JS por katoj kaj kontrolu ĝin. Estas ke zomis en sufiĉe bone? Malvarmeta. 

Do ĉiu kompono bezonoj havi redonu funkcio. La render funkcio diras, kion mi presi sur la ekrano? Sed la komponanto estas senutila se ne sciis kion presi sur la ekrano, tiel vi bezonas havi redonu funkcio. 

Do en la redonu afero, vi nur bezonas reveni iuj HTML. Kaj kio estas malvarmeta estas ke ekzistas io nomata JSX, kiu estas pligrandigo de JavaScript kiu estas uzita de reagi. Ĝi ni vin skribas HTML ene de via JavaScript, kiu sonas iomete bizara kiam vi unue pensas pri ĝi, sed ĝi faras multan senton poste. Do ni povas fari tion. Se vi estas familiara kun HTML, mi scias ni havos div kun ĝenerala celo ujo por vazaro. Ni povas reveni div, kaj interne ĉi div, ni povas meti aĵojn. 

Do diru ni volas repagi nur leviĝas rekte flashcard nun. La flashcard, mi dirus, havos demandon kaj respondon. Do ene ĉi div, ni elprinti paragrafo kiu diras question-- Kio estas la finfina respondo al vivo, la universo? Kaj tiam la respondo estas tuj estos, kompreneble, 42. 

Ke ne venis bone entute. Jes, do esence vi povas vere skribi HTML ene via Javascript. Kaj tiu tuj estos presita sur la ekrano. Do ni provu ĝin. 

Do ni havas nian komponanto. Ni bezonas diri React meti la komponanto sur la ekrano tiel React.render, tiel rimarki ke ni trakti app kiel ajna alia elemento. Ni skribas ĝin kiel estis HTML elemento. Kiel anstataŭ diri kiel img por bildo aŭ p por alineo, vi skribas App, do App estas traktata kiel HTML elemento. Kiel mi diris antaŭe, estas elementon en esteroides. 

Do vi redonu App, kaj vi doni al ĝi lokon por meti ĝin. Kaj jen kiel vi povas sciigi kie meti ĝin. Mi kreis simplan div sur la paĝo nomita kun ID de paĝo, kaj estas kie la elemento tuj iras. 

Kaj ni ne tuj kuri kun HTML. Esence ĉi tiu tuj akiri metis ene de ĉi paĝon elemento ke ni havas sur la ekrano. Do ĝi kuras tiun kodon, kaj ĝi desegnas ĉi afero sur la ekrano, do jen ni estas. Ni faris nian unuan React komponanto. 

Do ĝuste kiel recap, ni milde faris nova tipo de komponanto, ĝuste? Tion la React.createClass. Kaj en tiu komponanto, ni rakontis kion ĝi devus fari. Kiam ajn tiu komponanto estas presi sur la ekranon, ĝi estos presi la div kun la du paragrafoj ene de ĝi. 

Kaj kion ni faris, ni faris novan app uzante la angulo krampo app skribmaniero. Ni rakontis meti ĝin ene la paĝo elemento. Kaj do kion mi faris, ĝi kreis nova app de tiu ŝablono. Kaj poste mi rakontis al redonu ĝin. Do ĝi diris, OK, app, kion mi devus elprinti? App diras, iru elprinti div kun du alineoj ene de ĝi. Kaj voila, tie estas nia div kun du paragrafoj ene de ĝi. Sencon ĝis nun? 

Do, denove, la tuta defio de React Estas simple scianta kiel fari komponantojn. Kiel fari la komponantoj labori kune. Nun ke ni faris nian unuan komponanto, ni revenu kaj fari komponantoj personalizable. Do vi scipovas en HTML vin povas doni vian butonoj klasoj? Vi povas doni viajn ankrojn la href. Vi povas doni vian enigoj tipo, dekstra? Vi povas doni pli kutimo propraĵoj al ĉiuj viaj elementoj fari ĝin pli interesa. Kaj ni fakte povas fari la ĝusta sama afero. 

Do diru ni volas nian app iri repagi ajnan karton. Ĝuste nun ni nur kapitulacigis hardcoded karto. Ni scias, ke estas nur unu karton povas fari, tial ni estas tuj provi kaj ŝanĝi ĉi nun tiel ke ni povas simple doni ĝin iuj karto. Ĝi devos presi la karto. 

Vi devus provi kaj fari via komponantoj tre ĝenerala celo. Do tiu vojo mi povus retmesaĝi cxi tiu mia amiko kaj esti kiel, ajn flashcard vi havas, nur nutri ĝin tie, kaj tion faros per sin. Vi povas meti aliajn aferoj en via propra app. 

Sed unue, ni rompos ĉi supren en du komponantoj, sed ni volas disigi la karto preso parto de la fakta app parto. Do kion ni povas fari estas ni povas ŝanĝi ĉi de App al CardView, nur nova nomo por la app, kaj ni povas fari novan komponanto nomita App, Ne konfuzi kun la malnova App. Ni havas la createClass, kaj kiel en HTML, vi povas nesto React komponantoj ene de ĉiu alia. 

Do en tiu render funkcio, funkcio reveno CardView, kaj tiu estas la ĝusta sama afero. Vidu por tio estas la sama afero? Anstataŭ faranta ĝuste la app ke havas la div kaj parigo internon, la app faras la CardView, kaj la CardView bildigas la div kaj alineo. Do tiu estas nia unua ekzemplo de nestumado elementoj ene de unu la alian. Ĉu tio havas sencon? Do, denove, ni havas CardView elemento. Ni havas app elementoj ke ĝi estas pli granda ol. 

Bone, do ni volas nian CardView-- se vi doni bonan CardView certa karto, ĝi devos presi ekstere por vi, dekstra? Do unue ni devas fari karto, tial ni ebriigu karton objekto. Tiel mia karto equal-- se vi ĉiuj konas, tiu estas nur la notacio-farado kontesti en JavaScript. Estas ia kiel struct en C, do ni faris karto, kaj do nun ni povas pasi tiun karton kiel propraĵo aŭ kiel atributo en HTML terminologio nian programon. Do ni povas fari tion, App karto egalas myCard. 

Vi scias kiamaniere en enigo, vi faras input type egalas teksto aŭ butono klaso egalas BTN por startigi ,? Sama ideo, App karto equals-- vi devas meti krampoj here-- App karto egalas myCard, do ĉi diras ni havi ĉi karto objekto. Mi tuj pasos ĝin kiel posedaĵo al la app komponanto. Kaj tiu app komponanto povos aliri ĝin kaj fari interesajn aferojn kun ĝi. 

Do nia app estas iranta esti donita karton, tiel por nun, ni havas la app nur donu la karto al la CardView mem ĉar kiel la app ne tuj scios kion fari kun ĝi, tial ni simple doni ĝin al la CardView. Do ni fordoni la sammaniere, karto egalas, kaj tiel ĉiu komponento povas aliri la aferoj kiu estis donita al ĝi. Ili povas aliri la propraĵoj kiuj estas donitaj al ĝi uzante tiu sintakso, this.props.card. 

Do kio okazas ĉi tie estas vi havas la myCard objekto. Vi pasas ĝin en la app uzante App karto egalas myCard. Ke karto objekto estas donita al via app. La programo povas aliri ĝin kiel this.props.card. Estas ia kiel bildo scias kion ĝia fonto estas. 

Tiu ĉi programo scias kio ĝi estas karto estas, kaj ĝi povas fari aferojn kun ĝi. Ĝi povas fari kalkulojn. Ĝi povas fari decidojn surbaze de tio. 

Nuntempe, mi tuj pasos this.props.card sur la CardView. Sencon ĝis nun? Ĝi faros pli sentita nun. 

Bone, do nun ni estas en CardView. Nia CardView, donita la karto, devus elprinti lia demando kaj respondo. Ĝuste nun ni ĵus presita ekster iuj hardcoded demandoj kaj respondoj. Ni devas kalkuli fjordon ni bezonas demandi la karto ke ili donis nin kio estas la demando kaj respondo, kaj tiam printi sur la ekrano. 

Do ni povas fari ĉi tie. En redonu begin-- unua fari egaluloj. Do kion ni faras ĉi tie estas ni scias ke la kartoj estas donitaj nin al propraĵo, dekstra? Ĝi estas donita al ni kiel enigaĵoj. Kiel ĝi estas preskaŭ kiel argumentoj al funkcio. La karto estas argumento preskaŭ al ĉi CardView. 

Ni ĉerpi ke, kaj metis ĝin en la variablo demando. Certiĝu la respondo venis al la variablo respondo. Instigas ke karto respondi. Kaj nun ke ni havas tiujn, anstataŭ presi el tiu teksto, ni tuj presi kion ili donis al ni. 

Do tiu stuff-- do ni tuj estingi Demando Respondo. Ni vidu se tio funkcias. Cool, do ni tretas tra ĝi unu pli tempon ĝuste por certi. 

Do mia karto estas karto objekto, kaj ni donas tiu karto al la app. Kaj la app tuj prenos la karton kaj doni ĝin al la CardView. Kaj ĉi CardView diras, se vi donas min ajna flashcard objekto, Mi presi lian demandon kaj lia respondo, ĉu ne? 

Do kion mi povus fari estas mi povas sendu tiun kodon, la unua kiel 10 linioj de mia kodo, al mia amiko. Li povis enkorpigi ĝin en lia propra apliko. Kaj tiel longe, kiel li faris la samon, kiel CardView karto egalas tio, tiel longe kiel li kreis la CardView kaj donis al ĝi la rajton informoj, li povus repagi sian propran karton. Do tiu vojo, ĝi estas vere malvarmeta maniero por vi konstrui komponantoj kiuj uzas reciproke, ĉu ne? Tiu karto, mi povis eldoni ĉi CardView sur la Interreto, kaj homoj povos uzi ĝin. Do resume, estas kiel unu el la normo funkciojn en la C biblioteko. 

Ĝi estas funkcio kie iu skribis ĝin. Vi donas certan enigo. Ĝi devos produkti certan eligo. Vi ne zorgas kiel ĝi funkcias interne. Tiel longe kiel vi donos ĝin dekstren enigo, ĝi faros la dekstran eligo. 

Kaj komponanto povas esti pensis sammaniere. Ĉi CardView similas biblioteko funkcio. Se vi donos al ĝi iun karton kiel proprieto, ĝi devos presi la enhavon de tiu karto. Kiel se mi ŝanĝas mian karton anstataŭ esti kiel kio estas 5 plus 37, ĝi ĝisdatigos laŭe. Do simple ŝanĝante la enigo, ĝi ricevas certan eligo. Do vi povas pensi de komponantoj preskaŭ kiel funkcioj en ĉi tiu vojo, kiun vi povas kunmeti. Vi ricevas enigo, kiel ĉi CardView kiel la enigo, vi ricevas eligo. En tiu kazo, eligo estas la HTML. Sencon ĝis nun? Cool, do denove, posedaĵoj estas kiel vi povas pasi informon en kaj el komponantoj. 

Bone, do ni faru ĉi afero interagaj. Ĝuste nun ĝi estas speco de enuiga. Kio estas [inaudible]? Vi povas presi iun ekstere, sed jen ĉio povas fari. 

Do ni revenu al la malnovan demandon ĝuste nun. Bone, do nun estas tiuj komponantoj estas enuigaj ĉar ĉiuj ili fari, ili ricevas enigo. Ili faras eligo, dekstra? Tio estas speco de enuiga. Ni volas havi nian komponantoj por povi havi ia interna stato, kiel memori ion. 

Por flashcard, por ekzemple, kia stato eble vi volas memoras por flashcard? Kio provizora statuso eble vi volas memori por flashcard en flashcard app? Spektantaro: Ĉu ĝi estas spegulita? Neel Mehta: Yeah, dekstre. Do eble vi volas teni aŭtoveturejo de vi alfrontas supren aŭ estas vi surventre sur la karto. En Facebook, ekzemple, vi farus volas memori kie en la datumstrion ĉu vi aŭ ŝatus kiuj PROFILO vi faras nun. 

Sur Messenger, kiel kion tekston vin tajpu en la enigo skatolo, dekstra? Se vi refreŝigi la paĝon, ĝi iras. Sed vi ne vere gravas. Estas nur provizora. Yeah? 

Spektantaro: [inaudible] Neel Mehta: Fulme karto, kiel vi povas vidi la demando flanko aŭ la respondo flanko? 

Publiko: OK. 

Neel Mehta: Kiel duflanka flashcard, dekstra? Jes, do vi volas havas tiun ideon de nun Mi havas proprietojn, kiu estas kiel enigoj, sed staton, kiu estas portempa, uh, kie vi estas sur la paĝo, ĉu ne? Denove, mi diris en Facebook Mesaĝisto, mi havas kiel kiu persono vi visualizar Facebook aŭ kiu PROFILO, dekstra? 

Tiu estas nur portempa. Ĝi estas grava por montri al la uzanto kio okazas, sed refreŝigi la paĝon. Fakte ne gravas. Do estas provizora stato, do ni ĉiuj ĝi stato. 

Do, denove, estas stato kaj apogiloj. Props estas enigo donita de via datumfonto. Ŝtato estas ĝuste kiel defaŭltoj. Estas nur kiel aĵon ke faras tion interagaj. 

Do en nia CardView-- ni havas nia CardView-- tiel estis bela. Kion ni faros ĉi tie, ni tuj tuŝi CardView kaj nur CardView. Kaj tial mia amiko kiu ricevis tion, ne rimarkas ajnan diferencon. Ili ne devus ŝanĝi ajna samnacia kodo, sed ili deziras vidi iliajn CardView got souped supren. Jen bela parto pri komponantoj. 

Bone, do en nia CardView, ni provu kaj sekvigi ĉu ni face up aŭ surventre. En React ni faras tion per la unua preciziganta la komenca stato. Kien la karto komenci? 

Do esti funkcio nomita getInitialState funkcii, kaj ni revenu objekto. Tiu objekto enhavas iun staton, kaj stato estas nur ŝlosila valoro paro. Kiel en instrui, vi havas klavon kaj valoron, Vi havas kiel nomo estas ĉeno. 

En tiu kazo, ni diru antaŭ veras. Tiu diras, ke ni havas staton. Unu komponanto de la stato estas atributo nomata fronto. [Inaudible], tiel defaŭlte, ni estas en la fronto de la karto, kaj ni povas ŝanĝi ĉi kiel ni klaki la karto. Sencon? 

Bone, do en redonu, nun, ni estas montrante la demando kaj la respondo. Nun kion ni faru estas montri la demando se ni estos en la fronto de la karto tiel la respondo apartenas al la dorso de la karto. Tial vi ĉiuj faras la karto interagaj. Do ni provu kaj ĉi tie. Nu, unue simple fari variablo. Ni povas demandi nun this.state.front. Ni aliri konstati la samajn ni aliro props, do this.state.front. 

Se ni estas antauxe, teksto estas this.props.card.question. Se ni estas sur la fronto de la karto, ni tuj provos kaj kroĉi la demando de la karto. Alie, se ni estos sur la dorso de la karto, kion ni faru? 

Publiko: La respondo? 

Neel Mehta: Yep, do tekston egalas this.props.card.answer. Sed se vi rimarkos, ni uzas la ŝtata fari decidon ĉar nun la komponanto aspektos malsamaj bazita sur kiom tiuj interagas kun ĝi. Do anstataŭ presi el tiu, ni simple printi la tekston. Cool, do nun, kiel vi vidas, ni vidas nur la demandon. Kaj se mi ŝanĝos la staton tie permane al fronto estas falsaj ni atingos 42 reen. 

Do, denove, ĉi komponanto havas sian propran ŝtaton. Kiel butono scias ĉu ĝi estas premita aŭ ne, tion scias, kio estas sur la fronto aŭ sur la dorso. Defaŭlte, ĝi estas sur la fronto. Kaj tiam se ĝi estas sur la fronto, ni presi la demando. Se ĝi estas sur la dorson, ni presi la respondo. Do, denove, la informo donita estas la sama. Ĝi simple aspektas malsamaj bazita sur kiel vi planas ĝin. Do, ekzemple, Facebook Messenger, eĉ se vi akiras la samajn datumojn fonto, ĝi povus aspekti malsamaj ĉar la stato estas malsamaj. Vi rigardas malsama persono mesaĝo. 

Bone, do ĉi estas ĉiuj puto kaj bona, sed nun kio efektive faru al ni povos ŝanĝi, ĉu nia karto estas antaŭe aŭ malantaŭe. Ni povas fari ĉi aldonante flip Butono, butono por la karton kiu estos flip la karton se ĝi estas [inaudible]. Do ni aldonas butonon tie, ĉi butonon, kaj la butono diri klaki. 

Kaj tial nun, ĝi ne fari ion. Ĝi nur aspektas bela. Kion ni povas fari estas ni povas aldoni klako traktilo, onClick egalas this.flip, kaj ni difini flip poste. Sed esence, onClick estas funkcio kiu gets vokis, kiam la uzanto alklakas ĝin. 

Do la butono scios kiam ĝi estas klakita. Iris ĝi estas klakita, ĝi flip la karto. Estas ia kiel via pico transdono ulo. Vi estas kiel, bone, kiam ajn iu vokas min, mi transdonos picon, ĉu ne? 

Vi registriĝi ĉi aŭskultanto. Vi aŭskultos por evento. Vi get nomita, kaj kiam la okazaĵo okazas, Vi faru ion. Vi ricevas picon. En tiu kazo, kiam vi estas klakis, vi flip la karto. 

Kaj tial ni devas difini funkcio kiu flip la karto, do ni skribos ke rajto tie, klaki funkcio. Kaj tiel kion vi opinias flip faros? Denove ĉi gets nomis kiam Ni alklaku la flip butonon. Kion la funkcio flip fari? 

Publiko: Ŝanĝo this.state.front el vera falsa, malvera al vera. 

Neel Mehta: Yep, do prenu ajn this.front is-- la fronto stato estas. Prenu la fronto stato, se ĝi estas vera, fari ĝin malvera. Se ĝi estas falsa, igi ĝin vera, ĉu ne? Do ni provu tion. 

Vi ne povas ŝanĝi stato nur tajpante this.state. Vi ne povas fari tion. Vi ne povas fari tion. Vi devas uzi funkcio nomata this.setState. 

Do vi povas diri this.setState antaŭa dupunkto ĉi kie, denove, la ekkrion punkto signifas la malon. Mi supozas se ĉi. state.front estas vera, gxi devos turni falsaj. Do ni starigis la stato el vera al malvera. Se ĝi estas falsa, ni starigis ĝin perfidos vera. 

Nur atentu ke ni starigis kaj akiri iomete malsame, kaj tiel ni provu tion. Bada Bing, rigardu tiun. La flip butono nun ŝanĝi la malantaŭ al stato. 

Kaj do tie estas kie vi vidas iomete de la magio de React. Kiel ni neniam rakontis ĝin al re-repagi. Ni neniam rakontis ĝin redesegni nenion. Se vi faras tiun sen React, oni kredus esti to-- ŝatas kiam la flip butono estas klakita, vi devus sciigi al permane re-redonu, dekstra? 

React vere malvarmigi en ke se vi doni iu stato kaj propraĵoj, ĝi ĉiam redonu la ĝusta sama afero. Kaj tial kiam ni iam ni ŝanĝi la ŝtata kaj la bienojn, reagi nur re-laude la tuta afero. Ĝi scias, ke tie estas unu-al-unu korespondadon inter stato kaj parametro kaj HTML. Do kiam ajn iu el tiuj ŝanĝoj de tra aro stato, ĝi ŝanĝos kiel la salajro estas re-pruntitaj. Kaj tial esence React similas atendas vin ŝanĝi. 

Krom se ĝi ŝanĝas ion, gxi devos re-repagi la tutan paĝon. Kaj se sonas ineficiente, ĝi estas ĉar ĝi estus, sed reagi uzas afero nomita Shadow DOM. Anstataŭ desegnante la paĝo rekte, ĝi tenas la virtuala HTML arbon en memoro. 

Vi scias, HTML estas kiel arbo, kiel hierarkia datumstrukturo. Gardas falsa arbon en memoro, kaj kiam vi ĝisdatigas la paĝo, gxi devos desegni alia falsa arbo, kaj gxi devos kalkuli kion ŝanĝi ĝin bezonas por fari la paĝo por fari la du arboj egalaj. Do esence, ĝi praktike re-laude multe. Kaj tiam ĝi nur ŝatas ŝanĝas la paĝo en malgranda tweaks drajvo, Do ĝi estas tre, tre, tre efika. 

Do esence React volo kiam ajn vi ŝanĝas ion, gxi devos re-repagi la paĝo virtuale. Ĝi devos diveni kion mi bezonas ŝanĝi fari la realan paĝon reflekti la virtuala paĝo, kaj ĝi faros tion. Tio estas la virtuala DOM. Ĝi estas unu el la plej grandaj trajtoj de React. 

Ĉu tio havas sencon? Demandojn? Yeah? 

Publiko: Kiel funkcias kompari ankoraŭ al la MVC ke ni parolis pri antaŭe kiel rimedojn. 

Neel Mehta: Jes, la demando estas kiel ĝi komparas al MVC? Vi demandis pri resursoj. Nu, ni parolu pri kiel ĝi funkcias. 

En MVC, oni kredus ĝisdatigi la modelo. Tiukaze ni havus karton modelo. La vido havus la flip-butonon, kaj la kontrolo havus la flip funkcio. Do la vido dirus al la regilo por klaki klaki. Flip rakontus la modelo ŝanĝi, ĉu ne? 

Kaj do kiam vi faras MVC, vi aŭskulti por la modelo ŝanĝi, kaj vi re-repagi la vido laŭe. Aŭ vi nur devas ŝati havas la regilo. Atendu la modelo ŝanĝi, kaj tiam elekti kaj elekti parton de kiel aĵo ŝanĝi. Ĉi tie ni havas unu aferon, sed en granda app, vi devas ŝati memori kion la ŝanĝi en ĉiu ununura loko, tiel ĝi estas iom ĝena. Kaj tiel React belas ĉar ĝi havas Shadow Dom. Ĝi povas havigi nur reverki la tutan aferon. Vi ne devas selekteme kiel diveni kion ĝisdatigi. 

En Facebook se vi ŝatas ricevas novan mesaĝon, en MVC, vi devus memori, OK, ŝanĝu la aferojn ĉe la supro de la paĝon, la mesaĝo ikono. Ankaŭ pop nova fenestro en la fundo. Ankaŭ fari ion novan en tiu fenestro. Ankaŭ ludi sonon. 

Tio estas multe da taskoj elirante en la sama tempo. Kaj do se vi faras ne havas Shadow Dom, oni kredus devas fari tion permane ĉar Vi ne povas forigi la tutan paĝon. Vi ne povas havigi, do vi havas ŝanĝi ĉiun aferon permane, kiu estas vere ĝena en MVC. 

Do, por esti Thrifty, ili selekte ĝisdatigi la paĝon, kiu estas efika, sed ankaŭ ĝena. En React, pro la Ombro Dom, vi ricevas ambaŭ aĵoj senpage. Ĝi estas efika ĉar de la Ombro Dom. La botelkolo estas ĝisdatigi la paĝon. Oni ne faras la arbo manipulado. Vi ricevas la efikeco. Vi ankaŭ preni la facilan uzadon ĉar se vi nur reverki la tutan paĝon, sed vi ĝuste scias, bone, tion tuj estos sur la paĝo ie. Povus esti en malsama loko, sed ĝi estas iranta esti sur la paĝo, ĉu ne? Do vi simple re-pruntitaj la tuta afero virtuale, kaj vi povus fari paron ŝanĝoj al la paĝo mem. 

Do, denove, en MVC vi devus elekti inter facileco de uzo kaj efikeco, kaj reagi, vi ricevas ambaŭ. Do estas pli bone. Sencon? Solid. 

Bone, do ni vidu ni parolu iomete pri paŝo 4, kiamaniere ni povas enigi komponantoj. Do ni havas tiun rajton nun. Ni havas niajn malvarmeta malmulte butonon. Ni povas klaki ĝin reen kaj eliru, kaj jen ĉio faras. Supozu ke ni volas havas alian komponanton. Diru nia flashcard app devus enhavas liston de ĉiuj kartoj kiun vi havas, por ke signifas nin devus havi alian komponanton. Nu, eble nomas ĝin lerta vido. Ni faras lerta vido ke kunvivas kun la CardView, kaj tiu lerta vido kaj CardView ŝatos laboron kune. Kaj vi povas kombini ilin fari nian app por vi. 

Do unue, ni faru Paro pli kartojn dekstre. Diru, kion kartoj? Kaj ĝuste tial mi ne devas naskis vin per tajpado en, Mi simple tuj kopii ĝin de tie. Kaj tiel mi tuj ne donu ĝin nur unu karto. Mi tuj donos ĝin tabelo de kartoj. Do unue la apps tuj rompos nun. Bone, do ni tuj faros tiu povis manipuli plurajn kartojn. Do unue, ni tuj doni ĝin, ne nur unu karto sed tabelo de kartoj, kiel listo de kartoj. Kaj en ĉi tiu kazo, ni havas tri el ili. 

Bone, do tial app estas tuj ricevi liston kartojn, kaj ĝi tuj decidi kion unu montri al la CardView. La CardView povas nur repagi unu karto, sed la app ricevas liston de ĉiuj la kartoj, dekstra? 

Do kiam vi diveni unu karton doni al CardView, Kiel volus vin konjektas vin povus esti kapabla fari decidon pri kiu karto Montri? Doni al vi aludo: ĝi estas provizore Vi estos vidanta certa karto. Se vi refreŝigi la paĝon, vi nur iri reen al la unua karto. Tio estas bone ĉar ĝi estas portempa. Kio tekniko povus ni uzu? 

Spektantaro: Vi povus fari variablon tiel kiel vi havis fronto. Ĉu vere, vi povis havas aktualan karto egalas 1? 

Neel Mehta: Jes, do ni volas havi stato, ĉu ne? Vi uzus stato en la komponanto elkompreni kiun karton ĉu ni volas akiri. Kiel ni havas liston de ĉiuj kartoj, Ni uzi stato elkompreni unu el la unua karto, dua karto, tria karto, kaj tiel plu. 

Do app tiel app ricevos havas la getInitialState funkcio, getInitialState funkcio reveno. Kaj ni nur diros activeIndex 0. Do nun nia app havas ĝia propra stato. 

Kaj tial nun redonu, elŝeligi karton, ni nur iras al la tabelo kaj ekpreni la aferon en tiu indekso. Elektu karton egalaj this.props.cards this.state.activeIndex. Do kiel vi vidas tie, la teatrorekvizitoj kaj la stato reale labori kune. Do nun ni havas niajn activeCard, ni nomas ĝin activeCard, kaj vidu se tio funkcias. [Inaudible] 

Ho, tio estis eraro tekston. Ah. 

Cool, Yep, do nun ni estis reen kie ni estis antaŭe, ĉu ne? Sama malnova programo krom nun ni povas elporti listo de kartoj, ne nur unu karto. Kaj nun, denove, se ni ŝanĝas la activeIndex, ni povas iri de 0 al 1, kaj nun ke dua karto, kaj poste ni iris al 0. Do jen nova souped-supren versio de nia. 

Bone, do nun ni havas liston vidon ke montras ĉiujn kartojn en via programo, do ni faru novan komponanto nomita listview. Lasu listview egalas react.createClass. Do ni volas repagi neordigitan listo kun listeron por ĉiu karto. Kaj do ni havas faskon da kartoj. Ni deziras unu listeron por ĉiu karto, dekstra? Ni povus fari por buklo aŭ ion fari novan listeron. Sed kiel vi faros en React, uzu afero nomata mapo. Mapo estas ilo aŭ funkcio vi uzas ke por ĉiu elemento, kuras iu funkcio, prenas reveno valoro, kaj donas tiun dorso. 

Do kiel ekzemplo, ni havas la tabelo 1, 2, 3.map function-- kaj ĉi estas stenografio por function-- x sago x foje x. Ĉi tio diras, ĉar ĉiu nombro en 1, 2, 3, prenu ĝin. Akordas ĝin, kaj doni ĝin reen. Do kion vi pensas 1, 2, 3.map x iras al x fojojn x donas vin reen donita ke tiu funkcio estas kuri sur ĉiu ero de tiu tabelo. 

Publiko: 1, 4 9? 

Neel Mehta: Yep, 1, 4, 9 ĉar vi faras 1 fojojn 1. Kiu donas al vi unu. Jen la unua ero. 

2 fojoj 2 estas 4. Jen dua elemento. 3 foje 3 estas 9. Jen tria elemento. Sencon? Do mapo havas teknikon vin uzi en funkcia programistoj la nova stilo de Programado fari ion por ĉiu ero en via listo. Kaj tiel tio sonas familiara. Ni havas liston de kartoj. Ni volas ricevi listeron por ĉiu unu, do ni simple uzu mapo ĉi tie. Ni diru, lasu listo egaluloj this.props, kartoj, mapo. 

Kaj tiel donita karton, ni estas tuj generos listeron kun tiu karto enhavon flanko. Ni nur diras ni volas sonigas la kartoj pridubi tiel card.question. Do tiu listo enhavas tabelo de LI La aŭ Listo Items kie ekzistas unu listo eron por ĉiu karto, kaj kiu enhavas la kartojn demando. Sencon? 

Cool, do nun ni reale presi ke eksteren. Do ni revenos ul. Ene ol ordigita listo, ni simple algluita la tutan liston ke ili donis nin. Malvarmeta. 

Ĉiuj Bone, do nun ĉi lerta vido funkcias ĝuste trovi. Demandojn pri la lerta vido? Vi havas faskon da kartoj. Vi faru listeron por ĉiu karto. Kaj vi metos ilin en neordigitan listo, kaj vi redonu ĝin. Do nun ni agu ni enkorpigi ĉi ene de nia app, do ni povas fari tion, listo vido. Kio argumento ni pasas al listo vido? Kio propraĵoj ni donu gxin? Memoru, se vi donas ĝi faskon de kartoj, ĝi faros la lerta rigardi por tiuj kartoj. Do kion ni pasas tie kiel la argumento? Publiko: Listo de kartoj? Neel Mehta: Jes, do kartoj egalas this.props.cards, dekstra? Kaj do la sola problemo estas ke vi povas nur turnis unu pinta nivelo elemento en redonu, tiel vi devas volvi ŝin en div. Ĝi estas stranga. Do ni vidu se tiu. Ĉu tio funkcias? 

Yep, tie vi iras. Do nun ni havas liston de kartoj ĉe la fundo, kaj tiam ni havas niajn CardView mem sur, kaj tio flip inter la du flankoj de la karto. Nun tio faras sencon, kiel mi faris tion? Jes, do denove, ni havas du komponantojn. La unua komponento presaĵoj ĉiun karton en la listo. Jen la listo vido. Kaj la dua komponanto presas nur tiun karton. Se vi donas lin certa karto, ĝi devos elprinti informo pri tiu slipo kaj lasos vin flip-reen. 

Do se ni volas, ni povas provi kaj diskuto pri aldonante iuj novaj karakterizaĵoj por tiu. Alie ni povas paroli iom pli pri la rapido de reaktoro, aŭ ni povas respondi demandojn vi povus havi ĉar tiuj estas ĉiuj de la kerno partoj de reagi ke mi volas paroli. Ni povas iri antaŭen. Ni povas respondi demandojn. Kion ajn vi volas. 

Publiko: Cxu vi povas uzi JSX en normala JavaScript? Aŭ estas kiu iu kiu venis kun la [inaudible]? 

Neel Mehta: La demando estas tedaĵo vi uzas JSX kun normala JavaScript? La respondo estas jes. JSX estas nur maniero de ĝi prenas vian JavaScript kiu havas HTML ene de ĝi, kaj kompilas en JavaScript kiu Ne havas HTML ene de ĝi. Do rimarki that-- tiel rimarki tie. Tiu similas vin havas kiel div kaj vi havas materialon ene de ĝi. 

Kiu kompilas al JavaScript kiu kiel generas la sama afero. Mi konjektas kion mi estas diranta estas ke JSX estas nur sintaksa, kiel ĝi estas antaŭtraktilo por JavaScript multe kiel PHP estas antaŭtraktilo por HTML. JSC estas antaŭtraktilo por JavaScript kiu permesas vi metis HTML ene de via Javascript. Kaj do se vi havas la rajton transformilo kiu estas aĵo nomita [inaudible], kiu transformos. La dekstra antaŭtraktilo, ĝi lasos vin fari tion. 

Spektantaro: [inaudible] Neel Mehta: Kutime vi ne bezonas meti HTML ene de JavaScript se via kulpo React. Sed vi povas fari ĝin ĉiuokaze. Yep? 

Publiko: mi kredas ke vi estis priskribita React kiel funkcia programado lingvo. Ni lernis C en CS50. Estas C ankaŭ funkcia lingvo? Neel Mehta: Do la demando estas pri funkcia kontre alia afero nomata imperativo aŭ proceduraj programado. Ekzistas du specoj de programoj populara. Unu nomiĝas proceduraj, kiu estas ĉiuj pri kiel fari ordonojn, kaj unu estas funkcia, kiu tute pri havantaj funkcioj kaj havante enigo kaj eligo de tiuj. React estas funkcia paradigmo. C estas tre proceduraj paradigmo. 

Kaj kiel ekzemplo, C ekzemple, vi ne faras ĉi enunciativo vojo de farante la programo, ĉu ne? Vi devas diri, presi tiun. Ŝanĝi ĉi datumstrukturo. Printu tiun. Temas pri ordonoj. 

En React, tie ne ke multaj komandoj. Temas pri havanta komponantoj vi kunmetis. Ili estas kiel funkcioj. Vi havas kiel funkcio nomata CardView, kiu estas funkcio kiu havas enigo, eligo, kaj tiel React estas ĉiuj pri tiu filozofio nin el having-- vi havas datumojn. Vi pasas ĝin tra ĉi algoritmo, kaj ĝi malebligos eligo HTML kiu vi nur presita la paĝo, kaj tial vi devas konstrui ĝin pecon post peco. 

Do desegni metaforo al kio Mi diris antaŭe, vi scias kiel en Facebook se vi ricevas mesaĝon, kaj vi elekti kion partoj ĝisdatigi, jen proceduraj. Ĝi estas imperativa, dekstra? OK, Mi ricevis mesaĝon. Ni ŝanĝu konton tie. 

Ni pop fenestro tie. Ni ŝanĝu konton tie. Ni desegni ĉi tie. Tio estas proceduraj alproksimiĝo. 

Tion aĵojn kiel Angula, Boost, Backbone, aliaj kadroj uzi. React estas funkcia. Ĝi estas tre malsama maniero pensi pri aferoj. Ĝi prenas tiun ideon ni havas funkcioj aŭ algoritmoj kiuj volas vin donu ĝin datumoj. Ĝi devos kraĉi kio devus esti, kaj la komputilo prizorgos pezas el. Vi ne manipuli ĝin mem. Ĉu tio fari iom de senso? Yeah? 

Publiko: En funkcia lingvo, ĉiu okazas samtempe? 

Neel Mehta: Ne, okazas en ordo. Kiel ĉi tie estas ankoraŭ ordigi, sed ne okazi en ordo de kiel rekomendantaj, komando, komando. Okazas en ordo de funkcio donas eligo. Metu tion en alia funkcio. Enkalkulu en alian funkcio, alia funkcio. 

Se vi fari CS51, vi havos lernu funkciaj programoj iom el la medio de ĉi tiu. Sed esence, kio faras React malvarmeta estas ne nur la unudirektaj datumoj fluo kaj la virtuala Dom, sed ankaŭ ĉi tiu ideo de funkcia programado. Kaj funkcia programado estas tre facila formi kaj fari cool stuff ekster, kaj ĝi estas tre facile pensi pri kaj racio pri. Do estas alia bona remizo de React. Demandon? Yeah? 

Publiko: Um, kial vi uzi lasu kontraste al var? 

Neel Mehta: Do la demando estas kial vi uzas lasu anstataŭ var? Jen afero nomata ES6 aŭ ECMAScript 6. Ĝi estas la nova versio de Ĝavoskripto. Tie estas aro da teknikaj kialoj, Sed lasu estas bona versio de var. 

Estas kiel vi rakontos variabloj. Vi povas uzi lasu. Vi povas uzi var. Let havas faskon de teknika reasons-- vi povas rigardi ilin supren later-- por kial ĝi estas pli bona. Esence, ES6 havas kelkajn belajn nova sintakso, iuj novaj karakterizaĵoj pinte de la malnova Javascript. 

Do ni havas kiel kvin minutoj. Mi nur volis paroli pri unu alia aĵo reala rapida. Se vi havis demandojn, ni parolu pri tio poste. Sed ĝuste tial tiu akiras kaptita sur fotilo, mi ĵus deziras paroli iom pri kiel vi fakte uzi React en via apps. 

Se vi iros tien, Facebook.GitHub.IO/react, tiu estas la hejmpaĝo por reagi, kaj ĝi montros al vi kiom vi vere uzas Reagi en viaj paĝoj. Esence, ĝi estas iom komplika provas instali React. Ĝi ne estas tiel facila kiel vi nur treni kaj faligi JavaScript en tie. 

Vi devas havi vian transformilo starigita, kiu estos, kiel ĝi faris antaŭe, turni vian JSX en la normala Javascript. Vi devas afero tio certigos kompili vi ES6 al normalaj. Ĝavoskripto ekzistas multe de movanta partoj vi devas fari, do estas io nomata Yeoman, Yeoman.io. Kaj tiu estas komandlinio ilo tio certigos helpi vin Eŝafodo vian React projektoj facile. 

Do vi povas legi pri tio poste, sed estas iuj iloj ke Yeoman proponas. Ili sciigos vin krei React app kun ĉio enkonstruita. Kiel gxi devos esti konstruita en, komponantoj enkonstruita. Ĝi havos vian transformilo konstruita. Ili havas multan malvarmeta havajxoj enkonstruita aŭtomate uzante tion nomis generatoroj. 

Do legu pri tio se vi ŝatas. Nur iru sur Yeoman, Y-Kaj-Aŭ-M-A-N, kaj vi povas trovi generatoroj kiel tiuj. Kaj kun generatoroj kiel tiuj, vi simple ŝatas unu Estas paro komandlinio ordonas. Ĝi devos Eŝafodo ekstere tuta React app por vi. Ĝi ricevos la tutan manlibron muzikis, kaj Grunt laboro farita por vi, jen, kial vi simple enfokusigi sur simple skribi en reagi. 

Do esence konstrui React app estas netriviala. Ĝi estas telegramis ĉiuj kune, sed Estas iloj ke tion faros por vi. Do se vi volas fari React app, provu fari ĝin ke vojo. Se vi nur volas sperti, vi povas provi uzi tiun CodePen ĉar ĉi CodePen havas ĉiuj reagas cableado. Mi jam faris la tutan aferon por vin jam. 

Do se vi volas fari kiel produktado liberigi React app, provu unu el tiuj generatoroj. Se vi nur volas ludi ĉirkaŭe, ĝi estas ofte valoras nur kiel provi ludi proksimume sur CodePen tie. Sonas bone? Malvarmeta. 

Do jen kion mi havas. Denove, la tuta kodo kaj ekzemploj tuj estos sur ĉi tiu retejo ĉi tie. Do, denove, ni ne parolu pri multe sintakso de React, sed trovi ciujn tiujn iom sintaksaj detaloj, ĝi estas ĉiuj iranta esti havebla sur ĉi tiu retejo ĉi tie. 

Do mi rekomendas kiel preni la unuan paŝon. Metu ĝin en vian CodePen. Provu laboras sur farante ĝin al la dua paŝo. Ekzistas kvara paŝo, kaj nur vidi kie vi ricevas el tio. 

Demandon, kontroli ke paĝo aŭ retpoŝtu min. Jen mia retpoŝto. Sed mi ŝatus helpi vin kun ajna demandojn vi povus havi pri React. Do, Yep, jen ĉio mi havas. Dankon ĉiuj tre multe por rigardante aŭ por ĉeesti. Kaj Mi prenos demandojn vi povus havi post tio nun. Do dankon pro rigardante.