[Daqq tal-mużika] 

Neel Mehta: Hawnhekk tmur. 

Well, kulħadd, merħba lill web apps tal-ġejjieni ma 'React. Dan huwa CS50. Jisimni Neel. I'ma TA għat CS50 u sophomore fil-Harvard College u ħafna, ħafna web iżviluppatur passjonat. Hekk jien eċċitanti ħafna li jkun jitkellem lilek llum, jekk int hawn jew id-dar jaraw, dwar Ikkummenta, li huwa, għal darb'oħra kif għidt, il-futur ta 'apps web. 

Allura Jirreaġixxu huwa qafas web. U kif stajt ġiet javżak li xi nies hawn, qafas huwa biss sett ta 'għodod tista' tuża biex jistrutturaw u jibnu app web tiegħek. U apps web huma, għal darb'oħra, websajts li huma interattivi bħal Facebook, Twitter.com, Instagram.com, tkun xi tkun. 

Allura Facebook huwa qafas web li ġie żviluppat mill Facebook ftit snin back-- jirreaġixxu hu. Huwa dakinhar ġiet użata fil Facebook fuq apps mobbli tagħhom u l-web app, Instagram. Khan Akkademja hija ieħor jadottahom bikrija prominenti ta jirreaġixxu. 

Huwa verament kien jkollna popolari ħafna. Jekk inti qatt tuża affarijiet simili angolari jew Sinsla, dan huwa ta 'l-istess familja, iżda peress ħafna tiskorri popolarità tagħhom. Hu l-ħaġa ġdida sħun. Huwa tassew, tassew kbir. 

U għalhekk Jirreaġixxu hija tajba mhux biss bħala qafas web għall-interkonnessjonijiet tal-bini. Huwa tajjeb għall-bini interfaces web. Hemm ukoll xi ħaġa imsejħa Jirreaġixxu Native li ihallik tibni interfaces għall Android u IOS u pjattaformi forsi oħra fil-futur bl-użu biss l-istess kodiċi JavaScript. Inti tista 'tuża l-istess eżatt Kodiċi JavaScript biex tirrendi websajts, sabiex tirrendi apps Android u IOS apps. 

Huwa żmien ħafna, ferm eċċitanti. Hija opportunità tassew, tassew jibred. Huwa tassew web universali għodda ta 'żvilupp interface, hekk huwa ħafna, ħafna Ħaġa importanti li tkun taf. U, kif kien tinforma lin-nies qabel, dan, naħseb, se bidla kif aħna jibnu apps web dejjem. Allura huwa forsi daqsxejn hyperbole, imma I naħsibx li huwa ħaġa pjuttost tajba li tkun taf. 

OK, iva, liema huwa jirreaġixxu? Jirreaġixxu huwa qafas tista ' użu għall interfaces bini. Interface huwa, għal darb'oħra, web page, right? Allura hawnhekk Instagram.com, użi jirreaġixxu. 

Jirreaġixxu hija mibnija fuq il- idea ta 'komponenti. Komponent hija HTML element fuq sterojdi, hekk element HTML huwa bħal buttuna. Huwa paragrafu. Huwa header, id-dritt? U Instagram se jużaw dawn, iżda se tuża wkoll komponenti ta 'React. 

Jirreaġixxu komponenti huma Elementi souped-up HTML li għandhom imġieba tagħhom stess inkluża fihom. Għalhekk, bħala eżempju, jista 'jkollna element żmien, komponent żmien, li se jkun fiha bħal it-timbru ħin, tafu, komponent profil li se jkun fiha l-immaġni profil u l-isem tal-persuna. Huwa jista 'jkollhom counter simili, li jista 'joqgħod bħan-numru ta' jħobb, u jekk tikklikkja fuqha, dan ser jiżdied in-numru ta 'ħwejjeġ bħal dawn. Komponent hija biss mazz ta 'HTML code li għandha xi funzjonalità mgeżwra ġewwa ta 'dan. Allura huwa simili element HTML fuq sterojdi, kif għidt qabel. Tista 'tieħu dawn il-komponenti, u inti tista 'tpoġġihom flimkien li jagħmlu komponenti ġodda, b'mod F'dan il-każ, komponent post, li fih dan kollu Jittieħed. Ikun fiha Time, Profil, LikeCounter, forsi l-kumment u forsi l-immaġni innifsu. U hekk apps web huma biss mibnija billi jittieħed komponenti u jqiegħduhom flimkien. An għalf Instagram huwa xejn aktar minn mazz ta 'postijiet wieħed wara l-oħra, kull post fih bħall-Time, Profil, LikeCounter, u l-bqija. Huwa tip ta 'bħal bini ta' dar. Inti ma jibnu l house mill-top down. Għandek tieħu components-- inti jieħdu l-istess kamra tal-banju. Tieħu l-bedroom-- inti twaħħal minnhom flimkien, u inti għandek komponent ġdid. Għandek parti l-ġdida tad-dar. 

Allura jirreaġixxu hija kollha mibnija madwar din l-idea ta 'komponenti li huma interattivi, li huma ta 'dikjarazzjoni. Bħalek biss jgħidu dak profil huwa, u dan tagħmlu. Huma komponibbli. Inti tista 'tieħu żmien u profil, tpoġġi flimkien, jagħmlu xi ħaġa aħjar. U dawn qed jerġgħu jintużaw, hekk jekk inti għandhom il-kodiċi tas-sors għal post, inti tista ssodata li kullimkien. 

Inti tista ssodata Instagram ħaġa fuq il-websajt tiegħek stess. Tista 'ssodata fl Facebook, per eżempju, sakemm juża jirreaġixxu ukoll. Allura komponenti huma tassew, tassew, tassew blokki tal-bini qawwija ta 'l-internet li jistgħu jintużaw kullimkien u mqiegħda flimkien biex jagħmlu blokki tal-bini ġodda. Dik hija l-ħafna, ħafna ħarsa ġenerali ta 'livell għoli. Allura, għal darb'oħra, jekk għandek xi mistoqsijiet fi kwalunkwe punt dwar il-filosofija ta 'reattur, il- kodifikazzjoni, li tieqaf lili, u let me know. 

OK, so jirreaġixxu huwa jibred minħabba li għandu mod differenti ta 'tħares lejn kif inti tibni apps web. You ħadthom probabbilment jinstemgħu ta MVC, a mudell inti kontroll fil CS50 jew kwalunkwe klassijiet probing tuża ieħor. U ħafna oqfsa huma mibnija madwar l-idea ta 'MVC. Jirreaġixxu mhuwiex. Jirreaġixxu hija mibnija madwar l-idea tal-fluss data unidirezzjonali kif jidher minn din it-tabella jew grafika hawn. 

Bażikament, inti għandek sors ta 'data. U s-sors tad-data se tiddeċiedi kif jistabbilixxu ċerti komponenti. U l-komponenti se allura, meta dawn jinbidlu, dawn se jgħidulek l sors ta 'data għall-bidla. 

Biex tuża l-Instagram eżempju, inti jista 'jkollok lista ta 'oġġetti postali bħall f'database jew xi ħaġa. Li d-dejta. U mbagħad komponenti post tagħna se jieħdu dik id-data, u juża dak id-data li tirrendi ħaġa fuq l-iskrin. Dak hu l-vleġġa minn data li komponent huwa, u mbagħad hija użata l-istess data li tirrendi mazz ta 'komponenti. 

Fil Facebook Messenger, għal Eżempju, li huwa jirreaġixxu, inti jista 'jkollhom lista ta messaġġi bħal għajn ta 'data tiegħek. U li jirrendi mhux biss il-lista ta 'messaġġi iżda wkoll il-lista ta 'ħbieb għandek. Inti għandek l-għadd unread. Forsi tagħmlu wkoll ħaġa Facebook dak l fil-qiegħ tal Facebook.com. L-istess data hija sors wieħed ta 'verità u li tikkawża ħafna ta ' komponenti li għandhom jiġu mogħtija. U kull meta wieħed minn dawk komponenti jinbidel, din tmur lura u bidliet s-sors tad-data. 

Għandek tibgħat messaġġ, id-dritt? Li l-bidliet is-sors tad-data. Inti taqra messaġġi tiegħek, sabiex tissettja unread għal 0. Li l-bidliet is-sors tad-data. U tinnota li dawn kollha ta 'wieħed vleġġa tmur lura għall-istess data sors, sabiex inti tkun taf, minħabba ċertu sett ta 'data, inti taf eżattament dak li l- paġna se look like. Huwa deterministic. You know, ċerta data mogħtija, liema il-paġna se look like. Inti jista 'jbassar kif li għaddej biex iġibu ruħhom u kif l-affarijiet sejrin biex jaħdmu meta jkunu qed jitpoġġew flimkien. 

U jekk kelli miljun komponenti hawnhekk, ikun jaġixxi l-istess, id-dritt? Inti ma jkollha ebda interkonnessjonijiet stramb. Data Wieħed mogħtija miljun komponenti. A miljun komponenti jista mur lura u jeditjaw l-informazzjoni. U għalhekk dan huwa sabiħ ħafna. Aħna bini komponibbli, faċilment apps web skalabbli. 

Inti għandek sors ta 'data waħda, is-sors tal-verità. Li tg komponenti tiegħek kif jistabbilixxu l-paġna, u l-komponenti se manku interazzjoni. U jekk trid tibdel affarijiet, biss jmorru lura u għid s-sors tad-data għall-bidla. Jagħmel sens? Allura Jirreaġixxu hija dwar fehim kif tibni komponent u kif jagħmlu komponent tiegħek jinteraġixxu mal-dinja ta 'barra. 

Nagħmlu l-INTERACT komponent mad-dinja esterna juża teknoloġija oħra imsejħa Flux, li hija qafas li huwa miżjud fuq is jirreaġixxu. Aħna mhux qed tmur biex jitkellmu dwar dan. Aħna qed tmur biex jitkellmu aktar dwar, minħabba data, kif inti tista 'jirrendi komponent? 

U għalhekk Jirreaġixxu huwa verament jibred għaliex inti tista 'tuża ma' kwalunkwe tarf ta 'wara trid. Jekk għandek bħal back aħħar Python, jekk Python tiegħek jista bżiq out xi data, Jirreaġixxu jista 'jirrendi dan. Jekk inti l-ebda riżultati JS ta 'data, Jirreaġixxu tagħmlu. Ruby binarji bi data, Jirreaġixxu tagħmlu. 

Allura Jirreaġixxu hija bażikament web view-- a tarf ta 'quddiem ma' komponenti għal kwalunkwe sors ta 'data tkun xi tkun. U hekk jmorru minn sors ta 'data li jirreaġixxu komponenti hija pjuttost faċli. Going l-mod ieħor huwa ftit diffiċli. Li juża Flux kif semmejt qabel. Aħna mhux se jsibu rwieħhom li. Aħna ser tiffoka aktar fuq il- -data to komponent ġenb. Dan il-mod inti tista 'tagħmel jibred, web apps gost. Dan mhux se jaffettwa l-dinja ta 'barra għal issa, iżda li storja oħra. 

OK, hekk jekk inti kienu hawn għall-aħħar seminar tiegħi inti ser tkun taf li kollha ta 'l kodiċi għall talk lum se tkun fuq dan il-URL hawn, sorry, dan il-URL hawn. U bażikament aħna qed tmur biex tmur permezz ta 'erba passi, forsi ħames, probabbilment mhux ħamsa. Aħna ser jimxu permezz ta 'erba passi ta 'bini ta' kampjun jirreaġixxu app. U hekk l-kodiċi sors għal kull pass tal-mod se tkun dritt hawn, hekk jekk int wara tul fid-dar, tħossok liberu li jaqraw b'attenzjoni dan il-kodiċi. Jekk int wara flimkien hawnhekk, aħna ser tkun turi fuq l-iskrin, sabiex ma joqogħdu jinkwetaw dwar dan. Imma jekk int fid-dar, tħossok liberu li żur dan is-sit. U, Yeah, inti għandek tkun kapaċi tikseb l-kodiċi youd qatt bżonn hawn. Allura huwa iqarrqu folja tajba kif ukoll għall-avventuri fil-futur tiegħek ma jirreaġixxu. Kessaħ, hekk jekk kulħadd li hawnhekk, u anki jekk int fid-dar, pull up dan is-sit, is.gd/cs50react, ebda kapital, l-ebda jenfasizzaw, l-ebda xejn. 

Int ser ikollok tara paġna li jistenna ftit bħal dan. Din hija ħaġa imsejħa CodePen. CodePen huwa kollaborattiv ambjent kodifikazzjoni li magħhom Kapaċi nikteb kodiċi hawn, u dan ser jiġi awtomatikament mibgħuta lilek. U għal dan il-mod, Kapaċi nikteb kodiċi. I tista 'taħdem kodiċi hawn. 

Għal example-- u jekk reloads-- tara, Niġri kodiċi JavaScript fuq il-paġna dritt hawn, u inneħħu awtomatikament tirrendi paġna web ma dan il-kodiċi JavaScript. U għalhekk dan huwa mod għalina biex jippruvaw kodiċi tassew mgħaġġla mingħajr ma jkollu jintuża ID tagħna jew l-użu magna lokali tagħna jew ikun x'ikun. Huwa mod malajr ħafna għalik li mockup u ttestjata l tipi differenti ta 'kodiċi. 

Hekk jien ser tkun qed tieħu eżempju kodiċi, tqegħid hawnhekk. Aħna ser tkun qed taħdem permezz tiegħu. U jekk int fid-dar, inti jistgħu jiġbdu dan up ukoll. U stajt diġà installat Jirreaġixxu hawn, sabiex inti tista 'sempliċement jikteb il-kodiċi tiegħek stess hawn, u jippruvaw dan bħala bitħa tiegħek stess. 

Yeah, jekk kulħadd biex jiftħu din ir-rabta hawn. Jekk jogħġbok agħtini thumbs up ladarba ikollok miftuħa. Kessaħ, berred jibred. M'hemm xejn hawn għal issa, iżda aħna se bidla li malajr ħafna. 

OK, so Jirreaġixxu hija JavaScript librerija, u bħala tali, teħtieġ għarfien ta 'JavaScript, li hija l-lingwa ta 'programmar web. U huwa qed jintuża għal affarijiet oħra issa wisq imma primarjament il-web żviluppati lingwa, hekk jekk inti ma jkunux familjari ma ' li, aqra sit imsejħa JSforCats.com. Huwa wunderbare. Tista 'titgħallem JavaScript fi żmien nofs siegħa. Huwa inkredibbli. 

Allura tagħtiha jinqara. Aħna wkoll ħafna ta HTML hawnhekk għaliex aħna qed tfassil paġni tal-web tal-kors. Mela jekk int familjari ma ' HTML, check out HTMLdog.com. Naħseb tagħlim React huwa miljun darba aktar faċli jekk inti diġà jafu l-blokki tal-bini. Jekk inti għandek il-komponenti, huwa faċli biex jagħmlu komponent akbar. Li Jirreaġixxu lingwa għalik. 

Allura aqbad u jagħtu dawn l-affarijiet tinqara. Pause dan il-video. Agħti hija jaqra jekk inti fid-dar jekk m'intix familjari mal HTML jew JavaScript OK, so dak li aħna qed tmur biex tagħmel huwa aħna qed tmur biex tagħmel app flashcard bażika ħafna li jużaw jirreaġixxu. Aħna qed tmur biex ikollhom flashcard. Tista flip-biljett quddiem u lura. U aħna ser ikollhom ukoll lista ta ' l-karti li għandna, u jekk aħna qed tħossok ambizzjuż, nistgħu tkun jistgħu jaqilbu bejn karozzi billi tiklikkja fuqhom. 

Iżda dan huwa, bare tiegħek għadam, sempliċi ħafna React app. U għalhekk dan huwa effettivament mhux trivjali biex jimplimentaw, imma aħna qed tmur biex turi li, jekk inti tagħmel dan, huwa ħafna, faċli ħafna biex jestenduh jekk in-nies oħra jgħinek magħha. Allura aħna qed tmur biex jgħaddu erba 'passi tibda mill-bidu biex jinbena dan. 

Ok, sabiex l-erba 'passi, aħna ser tibda bl-ewwel pass. L-ewwel pass se jkun bini ewwel komponent tiegħek. Kif għidt qabel, komponent React huwa biss element HTML fuq sterojdi. Huwa jispeċifika l-HTML u xi mġieba, u jispeċifikaw kif in-nies jistgħu jinteraġixxu ma 'dan kif ikollha istat intern. Bħal buttuna se tkun taf bħal kemm drabi huwa kien għafast per eżempju, u se tkun taf kif jistabbilixxu innifsu barra. 

Mela ejja imorru quddiem u jibnu tagħna ewwel komponent bl-użu JavaScript. Allura jekk il-sintassi jistenna stramb, dan għaliex tip ta 'huwa. Allura, għal darb'oħra, aħna qed tmur li tagħmel varjabbli imsejjaħ app bl-użu keyword let, li tagħmel varjabbli, let App ugwali React.createClass. 

Jirreaġixxu hija librerija u għandha l joħolqu funzjoni klassi. U din il-funzjoni huwa daqsxejn ta 'kodiċi li int jistgħu jużaw biex joħolqu ġdid tip ta 'Jirreaġixxu komponent. U hekk React.createClass jagħmel komponent, u dan il-komponent se ikunu jistgħu jagħmlu Jittieħed. Il-ħaġa prinċipali hija tista 'tagħmel huwa tirrendi xi ħaġa, jirrendi bħala funzjoni. 

Għal darb'oħra, jekk dan l-indiċi ma jkunx ovvju li inti, I jirrakkomandaw inti tmur fuq JS għall-qtates u check out. Huwa li żżomjati fl tajjeb biżżejjed? Kessaħ. 

Allura kull bżonnijiet komponent li jkollhom tirrendi funzjoni. Il-funzjoni tirrendi jgħid, liema do I jistampaw fuq l-iskrin? Iżda l-komponent huwa inutli jekk ma jafu x'għandhom jistampaw fuq l-iskrin, hekk ikollok bżonn li jkollhom tirrendi funzjoni. 

Allura fil-ħaġa tirrendi, inti biss bżonn li jirritornaw xi HTML. U x'hemm jibred huwa li hemm xi ħaġa imsejjaħ JSX, li hija estensjoni ta ' JavaScript li jintuża mill jirreaġixxu. Hija ejja tikteb HTML ġewwa tal tiegħek JavaScript, li tip ta 'ħsejjes stramb meta inti l-ewwel taħseb dwarha, iżda jagħmel ħafna sens afterward. Allura nistgħu nagħmlu dan. Jekk int familjari ma HTML, I know għandna div bi skop ġenerali kontenitur għall-għalf. Nistgħu ritorn div, u ġewwa dan div, nistgħu npoġġu Jittieħed. 

Mela ejja ngħidu li rridu tirrendi biss a flashcard straight-up għal issa. Il flashcard, nixtieq ngħid, se jkollhom mistoqsija u tweġiba. Allura ġewwa dan div, ejja jistampa paragrafu li tgħid question-- X'inhu l- tweġiba aħħarija għall-ħajja, l-univers? U allura l-tweġiba hija se tkun, naturalment, 42. 

Li ma toħroġ ukoll fil-livelli kollha. Yeah, hekk bażikament inti tista 'verament jiktbu HTML ġewwa tiegħek JavaScript. U dan se jkun stampata fil-iskrin. Mela ejja jippruvaw it out. 

Allura aħna għandna komponent tagħna. Għandna bżonn li tgħid jirreaġixxu tpoġġi l-komponent fuq l-iskrin hekk React.render, hekk avviż li aħna jittratta app bħal kull element ieħor. Aħna tikteb kif kien element HTML. Bħal minflok ta 'tgħid bħal img għall-immaġni jew p minflok il-paragrafu, tikteb App, hekk App hija trattat bħal element HTML. Kif għidt qabel, huwa element fuq sterojdi. 

Allura inti tirrendi App, u inti tagħtiha post li tqiegħed lilha. U dan huwa kif inti tista ' għid fejn li tqiegħed lilha. I ħolqu div sempliċi fuq il- paġna imsejħa ma 'ID tal-paġna, u li fejn l- element għaddej biex tmur. 

U aħna mhux qed tmur biex jimxu ma HTML. Bażikament din hija se tikseb jitpoġġew ġo dan l-element paġna li għandna fuq l-iskrin. Allura din tmur dan il-kodiċi, u jiġbed dan ħaġa fuq l-iskrin, hekk aħna qegħdin hawn. Għamilna ewwel komponent jirreaġixxu tagħna. 

Hekk biss bħala terġa, aħna bil-mod li sar tip ġdid ta 'komponent, id-dritt? Dak hu l-React.createClass. U f'dak il-komponent, aħna told dak li għandhom jagħmlu. Kull meta dan il-komponent huwa li jiġu stampati fuq l-iskrin, se jistampa l-div bl iż-żewġ paragrafi ġewwa ta 'dan. 

U dak li għamilna, għamilna app ġdida bl-użu notazzjoni angolu app parentesi. Aħna qal li tqiegħed lilha ġewwa l-element paġna. U hekk dak li għamilt, ħolqot ġodda app minn dak template. U mbagħad I told li jirrenduh. Għalhekk qal, OK, app, x'għandi nagħmel jistampa? App jgħid, go jistampa div b'żewġ paragrafi ġewwa ta 'dan. U voila, hemm div tagħna ma żewġ paragrafi ġewwa ta 'dan. Jagħmel sens s'issa? 

Allura, għal darb'oħra, l-isfida kollu ta 'React huwa biss jafu kif jagħmlu komponenti. Kif tagħmel l- komponenti jaħdmu flimkien. Issa li aħna ħadna l-ewwel tagħna komponent, ejja mmorru lura u jagħmlu komponenti customizable. Allura inti taf kif fil HTML inti jistgħu jagħtu klassijiet buttuni tiegħek? Inti tista 'tagħti ankri tiegħek l href. Inti tista 'tagħti kontributi tiegħek tip, id-dritt? Inti tista 'tagħti aktar custom proprjetajiet għall-elementi kollha tiegħek biex jagħmluha aktar interessanti. U aħna fil-fatt tista 'tagħmel l-istess ħaġa eżatt. 

Mela ejja ngħidu li rridu tagħna app li jmorru tirrendi kull biljett. Dritt issa aħna biss mogħtija karta hardcoded. Nafu hemm biss wieħed karta tista 'tagħmel, hekk aħna qed ser jippruvaw u jbiddlu dan issa tant li nistgħu biss jagħtu xi biljett. Hija ser jistampa l-biljett. 

Inti suppost li tipprova u jagħmlu tiegħek komponenti skop ġenerali ħafna. Allura dan il-mod I jistgħu email dan il-ħabib tiegħi u jkunu simili, tkun xi flashcard għandek, biss għalf fis hawnhekk, u dan ser tagħmel dan minnu stess. Inti tista 'tpoġġi l-oħra affarijiet fil app tiegħek stess. 

Iżda l-ewwel, ejja jiksru dan up f'żewġ komponenti, imma irridu li tissepara l-karta istampar parti mill-parti attwali app. Allura dak li nistgħu nagħmlu huwa aħna jistgħu jbiddlu dan mill App li CardView, biss isem ġdid għall-app, u nistgħu nagħmlu ġdida komponent imsejħa App, ma għandhomx jiġu mfixkla ma 'l-App qodma. Imxejna ltqajna l-createClass, u bħal fil HTML, inti tista 'bejta jirreaġixxu komponenti ġewwa ta 'xulxin. 

Allura f'dan tirrendi funzjoni, CardView ritorn funzjoni, u dan huwa l-istess ħaġa eżatt. Tara għaliex huwa l-istess ħaġa? Minflok tirrendi biss l-app li għandu l-div u tqabbil ġewwa ta 'dan, l-app tirrendi l CardView, u l CardView jagħmel il-div u paragrafu. Allura dan huwa l-ewwel eżempju tagħna ta Elementi ibejtu ġewwa ta 'xulxin. Does li jagħmel sens? Allura, għal darb'oħra, aħna għandna element CardView. Għandna elementi app li huwa akbar minn. 

OK, hekk irridu tagħna CardView-- jekk inti tagħti CardView tajba karta ċerta, dan ser jistampa għalik, right? Allura l-ewwel, għandna bżonn li tagħmel karta, so ejja jagħmlu oġġett biljett. Mela ejja karta tiegħi equal-- jekk int kollha familjari, dan huwa biss il-teħid notazzjoni joġġezzjonaw fl JavaScript. Huwa tip ta 'bħal Struct fis-C, hekk għamilna karta, u hekk issa nistgħu tgħaddi din il-karta kif proprjetà jew bħala attribut fil HTML terminoloġija li app tagħna. Allura nistgħu nagħmlu dan, App karta ugwali Mycard. 

Inti taf kif fil input, inti tagħmel tip input huwa ugwali test jew buttuna klassi jegwalja BTN għall bootstrap ,? Istess idea, equals-- karta App inti stajt ltqajna biex tpoġġi ċineg here-- Karta App ugwali Mycard, għalhekk dan jgħid aħna għandna dan l-oġġett biljett. Jien ser tgħaddiha bħala proprjetà għall-komponent app. U dan il-komponent app se tkun tista 'aċċess għaliha u tagħmel Jittieħed interessanti magħha. 

Allura app tagħna se tkun jingħataw kard, hekk għal issa, ejja jkollhom l-app jagħtu biss il-karta tal-CardView nnifisha, għaliex bħall-app mhuwiex ser tkun taf x'għandek tagħmel magħha, hekk aħna ser biss jagħtu lill-CardView. Allura aħna ser tgħaddiha l istess mod, karta ugwali, u għalhekk kull komponent jistgħu jaċċedu għall- affarijiet li ġiet mogħtija lilu. Huma jistgħu jaċċessaw il-proprjetajiet li ngħataw lilha jużaw dan sintassi, this.props.card. 

Allura dak li jiġri hawn huwa inti għandek l-oġġett Mycard. Inti tgħaddiha fil-app jużaw karta App ugwali Mycard. Dak l-oġġett biljett tingħata lill app tiegħek. Il-app tista 'aċċess kif this.props.card. Huwa tip ta 'tixbah immaġni jaf liema huwa sors huwa. 

Dan app jaf liema huwa karta huwa, u tista 'tagħmel Jittieħed magħha. Hija tista 'tagħmel komputazzjonijiet. Hija tista 'tagħmel deċiżjonijiet ibbażati off ta' dan. 

Għal issa, I kienet se jgħaddu this.props.card fuq il-CardView. Jagħmel sens s'issa? Hija ser tagħmel aktar sens issa. 

OK, hekk issa aħna qed fil CardView. CardView tagħna, minħabba l-karta, jekk jistampa domanda tagħha u tweġiba. Dritt issa aħna biss stampat xi mistoqsijiet u tweġibiet. hardcoded Għandna bżonn biex insemmu out-- għandna bżonn li titlob lill-biljett li tawna x'inhi l-mistoqsija u tweġiba, u imbagħad jistampa dan out fil-iskrin. 

Allura nistgħu nagħmlu dan hawnhekk. Fl tirrendi begin-- ewwel tagħmel ugwali. Allura dak li aħna qed tagħmel hawnhekk huwa nafu li il-karti huma mogħtija lilna għal proprjetà, id-dritt? Huwa mogħti lilna bħala input. Simili huwa kważi simili argumenti funzjoni. Il-karta hija argument kważi għal dan CardView. 

Aħna ser estratt li, u mqiegħda hija fil-kwistjoni varjabbli. Kun żgur li l-tweġiba marru tar-risposta varjabbli. Iqajjem dik il-karta li jwieġbu. U issa li għandna dawn, minflok fl-istampar test, aħna qed tmur biex jistampa kull ma tana. 

Allura dan stuff-- hekk aħna qed tmur tqiegħed Tweġiba Mistoqsija. Ejja naraw jekk dan jaħdem. Kessaħ, so ejja pass permezz ta 'dan waħda aktar ħin biss biex tkun ċert. 

Allura card tiegħi huwa oġġett card, u aħna huma jagħtu dik il-karta għall-app. U l-app se tieħu l- karta u jagħtu lill-CardView. U dan CardView jgħid, jekk inti tagħti me xi oġġett flashcard, I ser jistampa domanda tagħha u tweġiba tagħha, id-dritt? 

Allura dak I tista 'tagħmel huwa I tista tibgħat dan il-kodiċi, l-ewwel bħal 10 linji ta 'kodiċi tiegħi, għall-ħabib tiegħi. Huwa jista ssodata fil applikazzjoni tiegħu stess. U sakemm huwa ma l-istess ħaġa, bħal karta CardView ugwali dan, sakemm hu maħluq l CardView u tatha l-informazzjoni korretta, huwa seta tirrendi karta tiegħu stess. U għalhekk b'dan il-mod, huwa verament mod jibred biex inti tibni komponenti li jużaw xulxin, id-dritt? Din il-karta, I tista 'tippubblika dan CardView fuq l-internet, u n-nies jkunu jistgħu jużawh. Allura bażikament, huwa simili wieħed mill- funzjonijiet standard fil-librerija C. 

Hija funzjoni fejn xi ħadd kiteb dan. Inti tagħti ċertu input. Hija ser jipproduċi output ċerti. Inti ma 'kura kif taħdem internament. Sakemm inti tagħti d-dritt input, hija ser tagħmel l-output dritt. 

U komponent jista 'jkun ħsieb ta 'l-istess mod. Dan CardView huwa simili funzjoni librerija. Jekk inti tagħti xi karta bħala proprjetà, dan ser jistampa l-kontenut ta 'dik il-karta. Bħal jekk nibdel karta tiegħi biex minflok jkun bħal dak li huwa 5 plus 37, din se taġġorna kif meħtieġ. Hekk biss billi jinbidlu l-input, jiġrilha output ċerti. Allura inti tista 'taħseb komponenti kważi funzjonijiet b'dan il-mod, li inti tista 'tpoġġi flimkien. Ikollok input, bħal dan CardView bħala l-input, ikollok output. F'dan il-każ, l-output huwa l-HTML. Jagħmel sens s'issa? Kessaħ, hekk darb'oħra, il-proprjetajiet huma kif inti tista 'tgħaddi informazzjoni ġo u barra mill-komponenti. 

OK, so ejja jagħmlu dan ħaġa interattivi. Dritt issa huwa tip ta 'boring. X'inhu [inaudible]? Tista 'tipprintja xi out, iżda li kollox li jistgħu jagħmlu. 

Mela ejja jmorru lura għall- kwistjoni antika biss għal issa. OK, hekk dritt issa dawn il-komponenti huma boring għaliex dawn kollha jagħmlu, huma jiksbu input. Huma jagħmlu output, id-dritt? C'est tip ta boring. Irridu li jkollna tagħna komponenti biex ikunu jistgħu jkollhom xi tip ta 'stat intern, bħal tiftakar xi ħaġa. 

Għal flashcard, għal eżempju, liema tip ta 'stat tista inti tixtieq li tiftakar għal flashcard? What istatus temporanju tista inti tixtieq li tiftakar għal flashcard fil-app flashcard? UDJENZA: Jekk huwa kien flipped? Neel Mehta: Yeah, id-dritt. Allura inti tista 'tixtieq li żżomm rekord ta 'huma inti jiffaċċjaw jew ikun hemm inti jiffaċċjaw isfel fuq il-karta. Fuq Facebook, per eżempju, inti trid tiftakar fejn fl-għalf aħbarijiet huma inti jew tixtieq li l-profil huma inti tagħmel dritt issa. 

Fuq Messenger, bħal dak li inti test tip fil-kaxxa input, id-dritt? Jekk inti jġedded il-paġna, din tmur bogħod. Imma int ma verament kura. Huwa biss temporanju. Yeah? 

UDJENZA: [inaudible] Neel Mehta: Bħal flash karta, bħal inti tista 'tkun qed tara il-ġenb kwistjoni jew il-ġenb risposta? 

UDJENZA: OK. 

Neel Mehta: Like a flashcard żewġ naħat, id-dritt? Yeah, sabiex inti tixtieq li jkollhom din l-idea ta 'issa I għandhom proprjetajiet, li huwa simili inputs, iżda l-istat, li hija temporanja, uh, fejn inti fuq il-paġna, right? Għal darb'oħra, I said fil Facebook Messenger, I jkollhom affarijiet simili li persuna qed tara Facebook jew li l-profil, id-dritt? 

Dan huwa biss temporanju. Huwa importanti li turi l-utent x'inhu għaddej, iżda jġedded il-paġna. Hija ma verament kwistjoni. Allura huwa stat temporanju, hekk aħna kollha istat dan. 

Allura, għal darb'oħra, hemm statali u props. Props huwa input jingħata minn sors data tiegħek. Stat huwa bħad nuqqasijiet. Huwa biss bħal għalf li jagħmel il-ħaġa interattiv. 

Allura fil tagħna CardView-- ejja jkollhom tagħna CardView-- allura kien sbieħ. Dak li aħna qed tmur biex tagħmel hawn, aħna qed tmur tmissx CardView u biss CardView. U hekk ħabib tiegħi li sibt dan, huma ma tinnota xi differenza. Dawn ma jkollhomx għall-bidla kwalunkwe mill-kodiċi tagħhom stess, iżda theyd tara tagħhom CardView ltqajna souped up. Li l-parti sbieħ dwar komponenti. 

OK, hekk CardView tagħna, ejja jippruvaw u iżżomm kont ta 'jekk aħna qed gradwalment up jew fl-wiċċ. Fl Jirreaġixxu nagħmlu dan billi l-ewwel li tispeċifika l-istat inizjali. Fejn ma l-karta tibda? 

Allura jkun funzjoni msejħa getInitialState funzjoni, u nerġgħu lura oġġett. Dan l-oġġett fih xi stat, u stat huwa biss par ta 'valur ċavetta. Bħal fil struzzjonijiet, għandek ewlenin u valur, għandek bħall-isem huwa string. 

F'dan il-każ, ejja ngħidu quddiem huwa veru. Dan jgħid li għandna stat. Komponent wieħed tal-istat hija attribut imsejħa front. [Inaudible], hekk awtomatikament, aħna qed fil-quddiem tal-karta, u nistgħu nbiddlu dan kif aħna flip-biljett. Jagħmel sens? 

OK, hekk jirrendu, id-dritt issa, aħna qed li turi l-mistoqsija u t-tweġiba. Issa dak li għandna nagħmlu huwa juri l-kwistjoni jekk aħna qed fuq quddiem tal-card hekk it-tweġiba hija għall-dahar tal-karta. C'est pourquoi inti kollha tagħmel il-karta interattiv. Mela ejja jippruvaw u għal dan hawn. Ukoll, l-ewwel biss tagħmel varjabbli. Nistgħu titlob issa this.state.front. Aħna aċċess jiddikjaraw l-istess aħna props aċċess, hekk this.state.front. 

Jekk aħna qed fuq quddiem, imbagħad test huwa this.props.card.question. Jekk aħna qed fuq quddiem tal- karta, aħna qed tmur biex jippruvaw u grab il-kwistjoni mill-biljett. Inkella, jekk aħna qed fuq id-dahar tal-karta, dak li nagħmlu? 

UDJENZA: It-tweġiba? 

Neel Mehta: Yep, so test ugwali this.props.card.answer. Imma jekk tinnota, aħna qed jużaw l-istat biex jagħmlu deċiżjoni minħabba li issa l-komponent se tfittex differenti ibbażata off kif dawn jinteraġixxu miegħu. Allura minflok ta 'stampar ta dan, aħna ser biss print out-test. Kessaħ, hekk issa, kif tara, naraw biss il-kwistjoni. U jekk nibdel l-istat hawn manwalment għal quddiem hija falza nikbru 42 lura. 

Allura, għal darb'oħra, dan il-komponent għandha istat tiegħu stess. Bħal buttuna jaf jekk huwa kien ippressat jew le, dan il-ħaġa jaf dak li huwa fuq quddiem jew fuq wara. Konvenzjonalment, huwa fuq il-front. U allura jekk huwa fuq quddiem, aħna ser jistampa l-kwistjoni. Jekk huwa fuq id-dahar, aħna ser jistampa l-risposta. Allura, għal darb'oħra, l-informazzjoni mogħtija hija l-istess. Hija biss jistenna differenti bbażata fuq kif inti program. Għalhekk, per eżempju, Facebook Messenger, anki jekk ikollok l-istess sors ta 'data, jista 'tfittex differenti minħabba l-istat huwa differenti. Inti qed tħares lejn Messaġġ persuna differenti ta. 

OK, għalhekk dan huwa kollu tajjeb u tajba, imma issa dak fil-fatt jagħmluna kapaċi li jibdlu, jekk karta tagħna huwa fuq quddiem jew lura. Nistgħu nagħmlu dan billi jżid flip buttuna, buttuna lill-biljett li se flip-biljett jekk huwa [inaudible]. Mela ejja żid buttuna hawn, dan buttuna, u din il-buttuna se ngħid flip. 

U hekk dritt issa, huwa ma tagħmel xejn. Hija biss jistenna sbieħ. Dak li nistgħu nagħmlu huwa nistgħu żid klikk handler, onclick ugwali this.flip, u aħna ser jiddefinixxu flip aktar tard. Imma bażikament, onclick hija funzjoni li gets imsejħa meta l-utent klikks dan. 

Allura l-buttuna se tkun taf meta huwa kien għafast. Marru huwa kien għafast, se flip-biljett. Huwa tip ta 'prodotti simili tiegħek Guy kunsinna pizza. Int simili, id-dritt, kull meta xi ħadd jitlob me, I ser jagħti pizza, id-dritt? 

Tirreġistra dan semmiegħ. Inti tisma għal avveniment. Ikollok imsejħa, u meta l- avveniment jiġri, inti tagħmel xi ħaġa. Ikollok pizza. F'dan il-każ, meta int għafast, inti flip-biljett. 

U għalhekk għandna bżonn li jiddefinixxu funzjoni li se flip-biljett, hekk aħna ser jiktbu dak id-dritt hawn, flip funzjoni. U għalhekk x'taħseb flip se tagħmel? Għal darb'oħra dan gets imsejħa meta aħna ikklikkja l-buttuna flip. X'għandu il-flip funzjoni do? 

UDJENZA: Bidla this.state.front mill-vera għall falza, foloz li veru. 

Neel Mehta: Yep, so tieħu kull this.front is-- l-istat ta 'quddiem hu. Ħu l-istat ta 'quddiem, jekk huwa veru, jagħmilha falza. Jekk huwa falz, jagħmilha vera, right? Mela ejja jippruvaw dan. 

Inti ma tistax tbiddel l-istat biss billi tagħmel this.state. Inti ma tistax tagħmel dan. Inti ma tistax tagħmel dan. Inti għandek tuża l-funzjoni imsejħa this.setState. 

Allura inti tista 'tgħid this.setState quddiem kolon dan fejn, għal darb'oħra, il exclamation punt ifisser l-oppost. I raden jekk dan. state.front huwa veru, dan ser idur falza. Allura aħna ser jistabbilixxu l-istat mill-vera għall falza. Jekk huwa falz, aħna ser sett huwa falz li veru. 

Just avviż li waqqafna u jiksbu ftit differenti, u għalhekk ejja tipprova dan. Bing Bada, ħarsa lejn din. Il-buttuna flip issa se jaqilbu l-quddiem għal wara istat. 

U hekk hawn fejn tara ftit tal-maġija ta jirreaġixxu. Simili aħna qatt told lill terġa 'jagħti. Aħna qatt ma qal dan tiġbed xejn. Jekk inti qed tagħmel dan mingħajr React, youd jkunu to-- simili meta l- buttuna flip huwa għafast, youd għandek għid li manwalment mill-ġdid tirrendi, id-dritt? 

Jirreaġixxu qed verament jibred fid li jekk inti tagħtiha stat u proprjetajiet ċerti, dejjem se tirrendi l-istess ħaġa eżatt. U hekk meta aħna qatt nagħmlu l-bidla l-istat u l-proprjetajiet, jirreaġixxu biss jerġa 'jagħmel il-ħaġa sħiħa. Hija jaf li hemm korrispondenza wieħed għal wieħed bejn l-istat u l-parametru u HTML. Allura kull meta waħda minn dawk bidliet minn permezz ta 'stat stabbiliti, se bidla kif l- pay jerġa 'mogħtija. U hekk bażikament React huwa simili għalikom għall-bidla. 

Kull meta tbiddel xi ħaġa, dan ser jerġa 'jagħti l-paġna kollha. U jekk ħsejjes ineffiċjenti, huwa peress li jkun, iżda jirreaġixxu juża ħaġa imsejħa DOM Shadow. Minflok tpinġija il-paġna direttament, jżomm il-siġra HTML virtwali fil-memorja. 

You know, HTML huwa bħal siġra, bħal struttura ġerarkika data. Hija żżomm siġra foloz fil-memorja, u kull meta inti aġġornament il-paġna, dan ser tiġbed foloz ieħor siġra, u dan ser jikkalkula dak jibdlu għandha bżonn biex tagħmel l- paġna li jagħmlu ż-żewġ siġar ugwali. Allura bażikament, huwa prattikament ri-tirrendi ħafna. U allura biss bħall-bidliet l- paġna fil-ftit tweaks kif meħtieġ, hekk huwa ħafna, ħafna, effiċjenti ħafna. 

Allura bażikament Jirreaġixxu se kull meta inti tbiddel xi ħaġa, dan ser jerġa 'jagħti l-paġna prattikament. Hija ser ċifra barra dak li għandi bżonn biex bidla li jagħmlu l-paġna reali jirriflettu il-paġna virtwali, u inneħħu tagħmel dan. Dik hija l-DOM virtwali. Huwa wieħed mill-akbar karatteristiċi ta 'Jirreaġixxu. 

Does li jagħmel sens? Kwalunkwe mistoqsijiet? Yeah? 

UDJENZA: Kif ma tqabbel xorta għall-MVC li tkellimna dwar qabel riżorsi bħal. 

Neel Mehta: Yeah, il-kwistjoni huwa kif ma tqabbel MVC? Inti mistoqsi dwar ir-riżorsi. Well, ejja nitkellmu dwar kif din taħdem. 

Fil MVC, youd taġġorna l-mudell. F'dan il-każ aħna'd jkollhom mudell biljett. Il-fehma se jkollu l- buttuna flip, u l-kontroll ikollu l-funzjoni flip. Allura l-opinjoni ser tgħid il- kontrollur li flip flip. Flip tell l mudell għall-bidla, id-dritt? 

U hekk meta inti tagħmel MVC, inti jisimgħu għall-mudell għall-bidla, u għandek terġa 'tirrendi l-opinjoni xieraq. Jew inti biss għandek simili għandhom il-kontrollur. Stenna għall-mudell għall-bidla, u mbagħad pick u jagħżlu parti ta qisha ħaġa għall-bidla. Hawnhekk għandna ħaġa waħda, iżda fil-app kbir, inti għandek tixtieq tiftakar dak il-bidla f'kull post wieħed, dan huwa ftit annoying. U għalhekk Jirreaġixxu huwa sabiħ minħabba li għandu Dom Shadow. Hija tista 'taffordja li biss jikteb il-ħaġa sħiħa. Inti ma għandekx selettiv bħal raden dak li taġġorna. 

Fuq Facebook jekk inti tixtieq jiksbu messaġġ ġdid, fil MVC, youd għandek tiftakar, OK, jibdlu l-affarijiet fil-quċċata tal- paġna, l-ikona messaġġ. Wkoll pop tieqa ġdida fil-qiegħ. Wkoll tagħmel xi ħaġa ġdida f'dak tieqa. Wkoll play ħoss. 

Li l-lott ta 'għalf ser jispiċċaw fl-istess ħin. U hekk jekk inti ma jkollhom Dom Shadow, youd għandek tagħmel dan manwalment minħabba inti ma tistax jeħles mill-paġna kollha. Inti ma tistax taffordja li, hekk ikollok għall-bidla kull ħaġa manwalment, li huwa verament annoying fil MVC. 

Dan sabiex tkun Thrifty, huma selettiv taġġorna l-paġna, li hija effiċjenti, iżda wkoll annoying. Fil React, minħabba l-Shadow Dom, ikollok kemm affarijiet b'xejn. Huwa effiċjenti minħabba tal-Dom Shadow. L-ostaklu Qed taġġorna l-paġna. Mhuwiex tagħmel l-manipulazzjoni tas-siġar. Ikollok l-effiċjenza. Tista 'wkoll tikseb l-faċilità ta' użu minħabba jekk inti biss jiktbu l-paġna kollha, imma inti biss taf, id-dritt, l-affarijiet ser ikunu fuq il-paġna x'imkien. Jista 'jkun f'post differenti, iżda li għaddej biex tkun fuq il-paġna, right? Allura inti biss terġa 'mogħtija il-ħaġa sħiħa prattikament, u inti tista 'tagħmel koppja bidliet fil-paġna innifsu. 

Allura, għal darb'oħra, fil MVC inti jkollhom jagħżlu bejn l-użu faċli u l-effiċjenza, u jirreaġixxu, ikollok tnejn. Allura huwa aħjar. Jagħmel sens? Solidu. 

OK, so ejja ara ejja nitkellmu ftit dwar pass 4, kif nistgħu ssodata komponenti. Allura aħna għandna dan id-dritt issa. Għandna jibred buttuna tagħna ftit. Nistgħu flip lura u raba, u li kollox ma. Ejja ngħidu li rridu jkollhom komponent ieħor. Ejja ngħidu app flashcard tagħna għandhom tinkludi lista ta 'l-karti li għandek, sabiex ifisser li aħna għandu jkollhom komponent ieħor. Well, forsi sejħa hija ta 'fehma lista. Ejja jagħmlu ħsieb lista li tikkoeżisti mal-CardView, u din il-fehma lista u CardView ser simili jaħdmu flimkien. U inti tista 'tgħaqqad lilhom biex tagħmel app tagħna għalik. 

Allura l-ewwel, ejja jagħmlu koppja aktar cards dritt. Ejja ngħidu, liema karti? U biss so I ma jkollhom bore inti ma ittajpjar fil, Jien biss ser jibagħtu kopja tagħha minn hawn. U hekk jien ser ma tagħtiha biss biljett wieħed. Jien ser tagħtiha l-firxa ta 'karti. Allura l-ewwel l-apps ser break għal issa. Kull dritt, hekk aħna qed tmur biex tagħmel dan jistgħu jimmaniġġjaw karti multipli. Allura l-ewwel, aħna qed tmur biex jagħtuh, mhux biss biljett wieħed iżda firxa ta 'karti, bħal lista ta 'karti. U f'dan il-każ, għandna tlieta minnhom. 

Kull dritt, hekk so app huwa se tikseb il-lista cards, u li għaddej biex jiddeċiedi liema wieħed biex turi li l-CardView. Il CardView jista 'biss tirrendi biljett wieħed, iżda l-app gets lista ta 'l-karti, id-dritt? 

Allura meta inti ċifra barra wieħed karta li tagħti lill CardView, kif tista raden inti tkun tista biex jagħmlu deċiżjoni dwar liema karta li juru? Biex jagħtuk ħjiel, huwa temporanjament Int ser tkun viewing karta ċerta. Jekk inti jġedded il-paġna, inti ser biss jmorru lura għall-ewwel karta. Dak OK għaliex dan huwa temporanju. Dak teknika tista nużaw? 

UDJENZA: Inti tista 'tagħmel varjabbli hekk bħad kellek quddiem. Huwa dan veru, inti tista jkollhom karta attwali ugwali 1? 

Neel Mehta: Yeah, hekk aħna tixtieq li jkollok istat, id-dritt? Inti tuża istat fil- komponent biex insemmu li card do aħna rridu nġibu. Bħal għandna lista ta l-karti, aħna ser użu istat biex insemmu wieħed mill-ewwel karta, tieni karta, karta terzi, u l-bqija. 

Allura app hekk app se tikseb għandhom il-funzjoni getInitialState, ritorn funzjoni getInitialState. U aħna ser biss jgħidu activeIndex 0. Allura issa app tagħna tkun hija stess Istat. 

U hekk issa 'l quddiem tirrendi, biex insemmu karta, ejja biss jmorru għall-firxa u grab l-ħaġa f'dak l-indiċi. This.props.cards indaqs karta Agħżel this.state.activeIndex. Allura kif tara hawn,-reffieda u l-istat attwalment jaħdmu flimkien. Allura issa li għandna activeCard tagħna, aħna ser sejħa hija activeCard, u ejja ara jekk dan jaħdem. [Inaudible] 

Oh, li kien żball test. Ah. 

Kessaħ, Yep, hekk issa konna lura fejn konna qabel, id-dritt? Programm istess qodma ħlief issa nistgħu nappoġġaw lista ta 'karti, mhux biss biljett wieħed. U issa, għal darb'oħra, jekk aħna jibdlu l- activeIndex, nistgħu mmorru 0-1, u issa li t-tieni karta, u mbagħad aħna marru għal 0. Allura hawnhekk ġdid souped-up verżjoni ta 'tagħna. 

OK, hekk issa ejja għandhom fehma lista li turi l-karti fil-programm tiegħek, hekk aħna ser tagħmel ġdid komponent imsejħa listView. Ħalli listView ugwali react.createClass. Allura irridu li jirrendi unordered lista bil-partita lista għal kull biljett. U hekk aħna mazz ta 'karti. Irridu partita lista waħda għal kull karta, right? Stajna nagħmlu a għal loop jew xi ħaġa li tagħmel oġġett lista ġdida. Iżda l-mod inti tagħmel dan fil Jirreaġixxu, uża ħaġa imsejħa mappa. Mappa hija għodda jew funzjoni tuża li għal kull partita, runs xi funzjoni, jieħu valur tar-ritorn, u jagħtik dak lura. 

Allura bħala eżempju, aħna għandna l-firxa 1, 2, function-- 3.map u dan huwa shorthand għal function-- x vleġġa x darbiet x. Dan jgħid, għal kull numru f'1, 2, 3, teħodha. Kwadru, u tagħtiha lura. Allura dak li taħseb 1, 2, 3.map x tmur x darbiet x jagħtik lura tingħata li din il-funzjoni huwa jimxu fuq kull element ta 'dak array. 

UDJENZA: 1, 4 9? 

Neel Mehta: Yep, 1, 4, 9 għaliex inti tagħmel 1 ħinijiet 1. Li jagħtik wieħed. Dik hija l-ewwel element. 

2 darbiet 2 hija 4. Li tieni element. 3 darbiet 3 huwa ta '9. Li l-element terzi. Jagħmel sens? Allura mappa għandha teknika inti użu fil programmaturi funzjonali, l-istil ġdid ta ' programmazzjoni li jagħmel xi ħaġa għal kull element fil-lista tiegħek. U hekk dan ħsejjes familjari. Għandna lista ta 'karti. Aħna rridu nġibu oġġett lista għal kull waħda, hekk aħna ser biss użu mappa hawn. Aħna ser jgħidu, let lista ugwali this.props, karti, mappa. 

U hekk jingħataw kard, aħna qed ser jiġġeneraw oġġett lista mal-kontenut ġenb dik il-karta ta 'dan. Ejja ngħidu biss li rridu li jagħtu il-karti kwistjoni hekk card.question. Allura din il-lista fih firxa ta 'l LI jew Items Lista fejn hemm lista waħda oġġett għal kull karta, u li fiha l-kwistjoni cards. Jagħmel sens? 

Kessaħ, hekk issa ejja attwalment print li l-. Allura aħna se terġa 'lura ul. Ġewwa dik il-lista unordered, aħna ser biss stick-lista sħiħa li tana. Kessaħ. 

Kull dritt, hekk issa dan lista ħsieb xogħlijiet biss issib. Kwalunkwe mistoqsijiet dwar l-opinjoni lista? Għandek mazz ta 'karti. Inti tagħmel oġġett lista għal kull biljett. U inti tpoġġihom ġewwa unordered lista, u inti tagħti lura. Allura issa ejja taġixxi hekk aħna ssodata dan ġewwa ta 'app tagħna, hekk nistgħu nagħmlu dan, lista ħsieb. What do argument aħna jgħaddu lista fehma? What proprjetajiet nagħtu dan? Ftakar, jekk inti tagħti dan mazz ta 'karti, dan ser tagħmel il-lista ħsieb għall dawk il-karti. Allura dak li aħna jgħaddu hawnhekk bħala l-argument? UDJENZA: Lista ta 'karti? Neel Mehta: Yeah, cards hekk ugwali this.props.cards, id-dritt? U għalhekk l-unika problema hija li inti tista 'biss daru waħda element ogħla livell fl tirrendi, sabiex inti ħadthom ltqajna biex wrap fil div. Huwa stramb. Mela ejja ara jekk dik. Does li jaħdmu? 

Yep, hemm inti tmur. Allura issa għandna lista ta 'karti fil-qiegħ, u mbagħad għandna tagħna CardView ruħha fuq, u li se flip bejn iż-żewġ naħat tal-card. Issa ma li jagħmel sens kif I ma li? Yeah, hekk darb'oħra, għandna żewġ komponenti. L-ewwel stampi tal-komponenti out kull biljett fil-lista. Dik hija l-fehma lista. U t-tieni komponent prints out biss dik il-karta. Jekk inti tagħti karta ċerta, dan ser jistampa l-informazzjoni dwar dik il-karta u ħalli inti flip quddiem u lura. 

Mela jekk irridu, nistgħu nippruvaw u jitkellmu dwar jżid xi karatteristiċi ġodda għal dan. Inkella nistgħu nitkellmu ftit aktar dwar tal-veloċità ta 'reattur, jew nistgħu twieġeb mistoqsijiet li inti jista 'jkollok minħabba li dawn huma kollha tal-partijiet ewlenin ta jirreaġixxu li nixtieq li nitkellmu dwar. Aħna tista 'tmur quddiem. Nistgħu twieġeb mistoqsijiet. Xi trid. 

UDJENZA: Tista 'tuża JSX fl normali JavaScript? Jew hija li xi ħaġa li daħal mal-[inaudible]? 

Neel Mehta: Il-kwistjoni hija tista tuża JSX ma normal JavaScript? It-tweġiba hija iva. JSX huwa biss mod ta 'tieħu tiegħek JavaScript li għandha HTML ġewwa ta 'dan, u jikkompila fis JavaScript li ma jkollux HTML ġewwa ta 'dan. Allura avviż that-- hekk avviż hawn. Dan qisu għandek simili div u inti għandek Jittieħed ġewwa ta 'dan. 

Li jikkompila għal JavaScript li bħall jiġġenera l-istess ħaġa. I raden dak li jien tgħid huwa li JSX huwa biss sintattika, simili huwa a Preprocessor għall JavaScript ħafna bħal PHP huwa Preprocessor għall HTML. JSC huwa Preprocessor għal JavaScript li tikri inti tpoġġi HTML ġewwa tal tiegħek JavaScript. U hekk jekk inti għandek l-transformer dritt li hija ħaġa imsejjaħ [inaudible], li se jittrasforma. Il Preprocessor dritt, dan ser tavżak tagħmel dan. 

UDJENZA: [inaudible] Neel Mehta: Normalment inti m'għandekx bżonn li jitqiegħdu HTML ġewwa tal JavaScript sakemm tiegħek tagħmel jirreaġixxu. Iżda int tista 'tagħmel dan xorta waħda. Yep? 

UDJENZA: Naħseb li inti kienu deskritti Jirreaġixxu bħala lingwa programing funzjonali. Imxejna qed jitgħallmu C fil CS50. Huwa C wkoll f'lingwa funzjonali? Neel Mehta: Għalhekk il-kwistjoni huwa dwar funzjonali versus ħaġa oħra msejħa programmazzjoni imperattiv jew proċedurali. Hemm żewġ tipi ta 'programmi popolari. Wieħed sejjaħ proċedurali, li hija dwar simili jikkmanda jagħmlu, u waħda hija funzjonali, li hija kollha dwar li jkollhom funzjonijiet u li input u output ta 'dawk. Jirreaġixxu hija paradigma funzjonali. C hija paradigma proċedurali ħafna. 

U bħala eżempju, C per eżempju, inti ma tagħmel dan il-mod ta 'dikjarazzjoni ta 'kif issir il-programm, id-dritt? Għandek tgħid, jistampa din. Bidla din l-istruttura tad-data. Stampa din. Dan kollu dwar jikkmanda. 

Fil jirreaġixxu, hemm Ma li jikkmanda ħafna. Dan kollu dwar li jkollhom komponenti inti tpoġġi flimkien. Huma qed simili funzjonijiet. Għandek bħal funzjoni imsejħa CardView, li huwa funzjoni li għandha input, output, u għalhekk Jirreaġixxu hija kollha dwar din il-filosofija us ta having-- ikollok data. Inti għaddiha dan algoritmu, u dan ser output HTML li inti kemm stampati-paġna, u hekk ikollok biex tinbena mill-biċċa biċċa. 

Allura biex tiġbed metafora għal dak I said qabel, inti taf kif fuq Facebook jekk ikollok messaġġ, u inti tagħżel liema partijiet biex taġġorna, li l-proċedura. Huwa imperattiv, id-dritt? OK, I ltqajna messaġġ. Ejja tbiddel kont hemmhekk. 

Ejja pop tieqa hawn. Ejja tbiddel kont hemmhekk. Ejja tiġbed dan hawn. Li l-għażla proċedurali magħmula. 

Dak hu affarijiet simili angolari, Boost, Sinsla, oqfsa oħra jużaw. Jirreaġixxu hija funzjonali. Huwa mod differenti ħafna ta 'ħsieb dwar affarijiet. Huwa jieħu din l-idea ta ejja jkollhom funzjonijiet jew algoritmi li ser ikollok tagħtiha data. Hija ser bżiq out dak li għandu jkun, u l-kompjuter se jieħdu ħsieb ta 'l-użin out. Inti ma jimmaniġġaw it yourself. Does li jagħmel ftit ta 'sens? Yeah? 

UDJENZA: Fi lingwa funzjonali, kollox jiġri f'daqqa? 

Neel Mehta: Le, l-affarijiet jiġri fl-ordni. Bħal hawn hemm għadu ordni, iżda ma jiġri fl-ordni ta like ifaħħru, kmand, kmand. Dan jiġri fl-ordni ta funzjoni jagħtik output. Poġġi dan in funzjoni oħra. Poġġi dan in ieħor funzjoni, funzjoni oħra. 

Jekk inti tagħmel CS51, inti ser jitgħallmu programmi funzjonali a out ftit mill-ambitu ta 'dan. Imma bażikament, dak li jagħmel Jirreaġixxu jibred mhux biss il-fluss tad-data one-way u l Dom virtwali, iżda wkoll din l-idea ta ' programmazzjoni funzjonali. U l-ipprogrammar funzjonali huwa faċli ħafna tikkomponi u jagħmlu Jittieħed jibred minn, u huwa faċli ħafna li wieħed jaħseb dwar u raġuni madwar. Allura huwa tiġbed oħra tajba ta jirreaġixxu. Kwalunkwe mistoqsijiet aktar? Yeah? 

UDJENZA: Um, għaliex kieku inti użu let kuntrarju var? 

Neel Mehta: Għalhekk il-kwistjoni hija għaliex tuza let minflok var? Din hija ħaġa imsejjaħ ES6 jew ECMAScript 6. Hu l-verżjoni l-ġdida ta 'JavaScript. Hemm mazz ta 'raġunijiet tekniċi, iżda let huwa verżjoni aħjar ta var. 

Huwa mod kif inti tiddikjara varjabbli. Tista 'tuża let. Tista 'tuża var. Let għandha mazz ta 'teknika reasons-- inti tista 'tfittex lilhom up later-- għal għaliex huwa aħjar. Bażikament, ES6 għandha xi sbieħ sintassi ġdida, xi karatteristiċi ġodda fuq nett tal-JavaScript qodma. 

Allura aħna għandna bħal ħames minuti. I biss riedu jitkellmu dwar ħaġ'oħra fast reali. Jekk kellek xi mistoqsijiet, ejja nitkellmu dwaru wara dan. Iżda biss sabiex dan gets maqbuda fuq camera, I biss trid titkellem ftit dwar kif inti attwalment jużaw jirreaġixxu apps tiegħek. 

Jekk inti tmur hawn, Facebook.GitHub.IO/react, dan huwa l-home page għall jirreaġixxu, u dan ser jurik kif tista 'attwalment jużaw Jirreaġixxu fil-paġni tiegħek. Bażikament, huwa ftit ikkumplikat tipprova jinstallaw jirreaġixxu. Mhuwiex faċli kif inti biss drag u qatra JavaScript fil hemmhekk. 

Inti trid li jkollha transformer tiegħek stabbilit, li, kif għamel qabel, dawran JSX tiegħek fis il JavaScript normali. Int għandek ħaġa li ser jikkompilaw inti ES6 għan-normal. JavaScript hemm ħafna ta 'ċaqliq partijiet ma għandek tagħmel, hekk hemm xi ħaġa imsejħa Yeoman, Yeoman.io. U dan huwa għodda linja ta 'kmand li ser jgħinuk scaffold out tiegħek jirreaġixxu proġetti faċilment. 

Allura inti tista 'taqra dwar dan aktar tard, imma hemm xi għodod li Yeoman joffri. Huma ser tavżak toħloq React app ma 'kollox mibnija. Bħal dan ser bnew in, komponenti mibnija fl. Hija ser ikollhom transformer tiegħek mibnija. Huma għandhom ħafna ta 'kessaħ Jittieħed mibnija awtomatikament jużaw dawn l-affarijiet imsejħa ġeneraturi. 

Allura taqra dwar dan jekk inti tixtieq. Just go fuq Yeoman, Y-E-O-M-A-N, u inti tista 'ssib ġeneraturi bħal dawn. U ma ġeneraturi simili dawn, inti biss tixtieq wieħed huwa kmand linja koppja jikkmanda. Hija ser scaffold out kollu Jirreaġixxu app għalik. Dan ser tingħata l-pajpijiet manwali, u x-xogħol Grunt isir għalik, u dan huwa għaliex inti biss jiffoka fuq biss bil-miktub jirreaġixxu. 

Allura bażikament bini ta ' Jirreaġixxu app huwa nontrivial. Huwa fili kollha flimkien, iżda hemm huma għodod li ser tagħmel dan għalik. Mela jekk inti tixtieq li tagħmel jirreaġixxu app, jippruvaw jagħmlu dan il-mod. Jekk inti biss tixtieq li esperiment, inti tista 'tipprova tuża dan CodePen għaliex dan CodePen għandha l-tirreaġixxi wajers. I ghamilt x-xogħol kollu għalik diġà. 

Mela jekk inti tixtieq li tagħmel bħal produzzjoni li jirrilaxxa jirreaġixxu app, ipprova waħda minn dawn ġeneraturi. Jekk inti biss tixtieq li jkollha madwar, huwa spiss tiswa ftit bħal ipprova playing madwar fuq CodePen hawn. Ħoss tajba? Kessaħ. 

Allura li kollox jien. Għal darb'oħra, l-kodiċi u eżempji huma se tkun fuq dan is-sit hawn. Allura, għal darb'oħra, aħna ma nitkellmu dwar sintassi ħafna ta jirreaġixxu, imma li tfittex dawk kollha ftit dettalji sintattiċi, dan kollu se tkun disponibbli fuq dan is-sit hawn. 

So I d jirrakkomandaw bħal jieħdu l-ewwel pass. Poġġi dan fil CodePen tiegħek. Ipprova taħdem fuq tagħmel lill-tieni pass. Hemm raba pass, u biss tara fejn ikollok minn dan. 

Kwalunkwe mistoqsijiet aktar, check out dik il-paġna jew email me. C'est email tiegħi. Imma I imħabba biex jgħinuk ma 'kwalunkwe mistoqsijiet li jista 'jkollok dwar jirreaġixxu. Allura, Yep, li kollox jien. Nirringrazzjakom ilkoll ħafna għall jaraw jew biex jattendi. U jien ser tieħu xi mistoqsijiet inti jista 'jkollok wara dan issa. Allura nirringrazzjakom ilkoll għall-ħars.