>> [Music kucheza]
>> NEEL Mehta: Hapa unaendelea.
>> Naam, kila mtu, kuwakaribisha kwa mtandao programu ya baadaye na kuguswa.
Hii ni CS50.
Jina langu ni Neel.
Mimi nina TA kwa CS50 na sophomore katika Harvard Chuo na sana, sana
shauku mtandao developer.
Kwa hiyo mimi nina kusisimua sana kwa kuwa kuzungumza na wewe leo,
kama wewe ni hapa au nyumbani kuangalia, kuhusu kuguswa, ambayo ni mara ya pili
kama nilivyosema, mustakabali wa programu mtandao.
>> Hivyo kuguswa ni mfumo mtandao.
Na kama nimekuwa kuwaambia kwa baadhi ya watu hapa,
mfumo ni seti ya zana unaweza kutumia
kuunda na kujenga mtandao programu yako.
Na programu mtandao ni, tena, tovuti ambazo ni shirikishi kama Facebook,
Twitter.com, Instagram.com, chochote.
>> Hivyo Facebook ni mfumo mtandao ambayo ilianzishwa na Picha
miaka michache back-- kuguswa ni.
Ni tangu zimetumika katika Picha juu ya programu zao za mkononi
na mtandao programu, Instagram.
Khan Academy ni mwingine maarufu adopter mapema ya kuguswa.
>> Ni kweli kuwa kupata maarufu sana.
Kama umewahi kutumia vitu kama Angular au Uti wa mgongo, hii ni wa familia moja,
lakini ina tangu mbali kushinda umaarufu wao.
Ni moto jambo jipya.
Ni kweli, kweli kubwa.
>> Na hivyo kuguswa ni nzuri sio tu kama mtandao mfumo wa jengo interfaces.
Ni vizuri kwa ajili ya kujenga mtandao interfaces.
Kuna pia jambo aitwaye kuguswa Native ambayo
inakuwezesha kujenga interfaces Android na iOS
na majukwaa labda wengine katika siku zijazo kutumia tu sawa na javascript kanuni.
Unaweza kutumia exact JavaScript kificho kwa kutoa tovuti,
atatoa programu Android na programu iOS.
>> Ni wakati sana, kusisimua sana.
Ni fursa kweli, kweli cool.
Ni kweli zima mtandao interface chombo cha maendeleo,
hivyo ni sana, sana Jambo muhimu kujua.
Na, kama mimi alikuwa akiwaambia watu kabla, hii, nadhani,
ni kwenda na mabadiliko jinsi sisi kujenga programu mtandao milele.
Hivyo ni labda kidogo hyperbole, lakini mimi nadhani ni jambo nzuri ya kujua.
>> OK, hivyo nini ni kuguswa?
Kuguswa ni mfumo unaweza kutumia kwa ajili ya kujenga interfaces.
Interface ni, tena, ukurasa wa mtandao, sawa?
Hivyo hapa ni Instagram.com, matumizi kuguswa.
>> Kuguswa ni kujengwa juu ya wazo la vipengele.
Sehemu ni HTML kipengele juu ya steroids,
hivyo HTML kipengele ni kama kifungo.
Ni aya.
Ni kichwa, sawa?
Na Instagram itatumia hizi, lakini pia kutumia vipengele vya kuguswa.
>> Kuguswa vipengele ni souped-up HTML mambo
ambazo zina tabia zao wenyewe zilizomo ndani yao.
Hivyo, kama mfano, tunaweza kuwa na kipengele muda, sehemu ya muda,
ambayo itakuwa na kama wakati muhuri, unajua,
sehemu wasifu ambayo vyenye sura wasifu
na jina la mtu.
Ni inaweza kuwa kukabiliana na kama, ambayo Unaweza kuhesabu kama idadi ya anapenda,
na kama wewe bonyeza juu yake, ni itabidi kuongeza idadi ya anapenda.
Sehemu tu rundo la HTML Code kuwa
ina baadhi ya utendaji amefungwa ndani yake.
Hivyo ni kama HTML kipengele juu ya steroids, kama nilivyosema hapo awali.
Unaweza kuchukua vipengele hivi, na unaweza kuziweka pamoja
kufanya vipengele mpya, katika kesi hiyo, sehemu ya posta,
ambayo ina mambo haya yote.
Itakuwa vyenye Muda, Profile, LikeCounter, labda maoni
na labda picha yenyewe.
Na hivyo programu mtandao ni kujengwa tu kwa kuchukua vipengele na kuweka pamoja.
Kulisha Instagram ni kitu zaidi kuliko rundo la posts mmoja baada ya mwingine,
kila baada inajumuisha kama Time, Profile, LikeCounter, na kadhalika.
Ni aina ya kama kujenga nyumba.
Huwezi kujenga nyumba kutoka juu kwenda chini.
Wewe kuchukua components-- wewe kuchukua kama bafu.
Wewe kuchukua bedroom-- wewe fimbo yao pamoja, na una sehemu mpya.
Una sehemu mpya ya nyumba.
>> Hivyo kuguswa ni wote kujengwa karibu wazo hili la vipengele ambavyo
ni shirikishi, ambazo ni declarative.
Kama wewe kusema tu kile a wasifu ni, na ni mithili hiyo.
Wao ni composable.
Unaweza kuchukua muda na hadhi, kuweka nao pamoja, kufanya kitu kizuri zaidi.
Na wao uko reusable, hivyo kama wewe na kanuni chanzo kwa wadhifa,
unaweza kupachika kwamba mahali popote.
>> Unaweza embed Instagram Jambo kwenye tovuti yako mwenyewe.
Unaweza embed katika Facebook, kwa mfano, muda mrefu kama anatumia kuguswa pia.
Hivyo vipengele ni kweli, kweli, kweli nguvu kuanza ujenzi wa mtandao
ambazo zinaweza kutumika mahali popote na kuweka pamoja na kufanya vitalu jengo jipya.
Hiyo ni sana, sana ngazi ya juu maelezo.
Hivyo, tena, kama una maswali yoyote wakati wowote hatua
kuhusu falsafa ya mtambo huo, coding, na kuacha yangu, na napenda kujua.
>> OK, hivyo kuguswa ni baridi kwa sababu ni ina njia mbalimbali za kuangalia
jinsi wewe kujenga programu mtandao.
Ve pengine habari ya MVC, a mfano wewe kudhibiti katika CS50 au chochote
wengine uchunguzi madarasa wewe kutumia.
Na mifumo wengi ni kujengwa karibu wazo la MVC.
Kuguswa si.
Kuguswa ni kujengwa kote wazo ya unidirectional data mtiririko
kama kuonekana kwa chati hii au mchoro hapa.
>> Kimsingi, una chanzo data.
Na data chanzo ataamua jinsi ya kuweka nje vipengele fulani.
Na vipengele mapenzi kisha, wakati wao kubadili,
nao watakuambia data chanzo kubadilika.
>> Kutumia Instagram mfano, unaweza kuwa
orodha ya goli vitu kama katika orodha ya au kitu.
Hiyo data.
Na kisha baada wetu vipengele itachukua data kwamba,
na kutumia data kwamba atatoa Jambo kwenye screen.
Hilo ndilo mshale kutoka kwa data sehemu ni,
na kisha kwamba data huo ni kutumika atatoa kundi la vipengele.
>> Katika Facebook Mtume, kwa mfano, ambayo ni kuguswa,
unaweza kuwa na orodha ya ujumbe kama chanzo yako data.
Na kwamba itakuwa kutoa si tu orodha ya ujumbe
lakini pia orodha ya marafiki una.
Una unread kuhesabu.
Labda pia atatoa kitu Picha hiyo ni chini ya Facebook.com.
Data huo ni chanzo kimoja cha ukweli
na kwamba husababisha mengi ya vipengele kuwa kulipwa.
Na wakati wowote mmoja wa wale vipengele ni iliyopita,
unaendelea nyuma na mabadiliko chanzo data.
>> Kutuma ujumbe, sawa?
Kuwa mabadiliko chanzo data.
Wewe kusoma ujumbe wako, hivyo kuweka unread kwa 0.
Kuwa mabadiliko chanzo data.
Na taarifa kwamba yote haya ya moja mshale kurejea data hicho
chanzo, hivyo unajua, kutokana na baadhi ya seti data,
kujua hasa ni nini ukurasa ni kwenda kuangalia kama.
Ni deterministic.
Unajua, kutokana na data fulani, nini ukurasa ni kwenda kuangalia kama.
Unaweza kutabiri jinsi itakavyo kuishi na jinsi mambo ni kwenda
kufanya kazi wakati wao ni kuweka pamoja.
>> Na kama ningekuwa na milioni vipengele hapa, ingekuwa kuishi sawa, sawa?
Wewe bila kuwa na yoyote weird kuunganishwa.
Data mmoja kulipwa milioni vipengele.
Milioni vipengele naweza kurudia na kuhariri data.
Na hivyo hii ni nzuri sana.
Sisi ni kujenga composable, urahisi scalable mtandao programu.
>> Una data chanzo kimoja, chanzo cha ukweli.
Kwamba anaelezea vipengele yako jinsi ya kuweka nje ukurasa,
na vipengele mapenzi kushughulikia mahusiano.
Na kama wanataka mabadiliko mambo, tu kwenda nyuma
na kuwaambia data chanzo kubadilika.
Mantiki?
Hivyo kuguswa ni wote kuhusu uelewa jinsi ya kujenga sehemu
na jinsi ya kufanya sehemu yako kuingiliana na dunia ya nje.
>> Maamuzi kuingiliana sehemu na ulimwengu wa nje
matumizi ya teknolojia nyingine aitwaye Flux, ambayo
ni mfumo kuwa ni aliongeza juu ya kuguswa.
Sisi siyo kwenda kuzungumza kuhusu hilo.
Sisi ni kwenda kuzungumza zaidi kuhusu, kutokana na data, jinsi gani unaweza kutoa sehemu?
>> Na hivyo kuguswa ni kweli baridi kwa sababu wewe Unaweza kutumia kwa mwisho wowote nyuma unataka.
Kama una kama chatu nyuma mwisho, kama chatu wako anaweza mate nje baadhi ya data,
Kuguswa unaweza kutoa yake.
Kama hakuna matokeo JS wa takwimu, kuguswa mithili hiyo.
Ruby reli na data, kuguswa mithili hiyo.
>> Hivyo kuguswa kimsingi ni mtandao view-- mwisho mbele na vipengele
kwa chanzo chochote data wowote.
Na hivyo kwenda kutoka chanzo data kwa kuguswa vipengele ni rahisi sana.
Kwenda njia nyingine ni vigumu kidogo.
Ambayo inatumia Flux kama nilivyoeleza hapo awali.
Sisi si kupata ndani ya kwamba.
Tutaweza kuzingatia zaidi juu ya data-to-sehemu upande.
Kwa njia hii unaweza kufanya baridi, na furaha programu mtandao.
Itakuwa si kuathiri dunia ya nje kwa sasa, lakini hiyo ni hadithi nyingine.
>> OK, hivyo kama ungekuwa hapa kwa ajili ya semina yangu ya mwisho
utasikia kujua kwamba wote wa kificho kwa Majadiliano ya leo ni kwenda kuwa katika URL hii
hapa, pole, URL hii hapa.
Na kimsingi tunakwenda kwenda kupitia hatua nne, labda tano,
pengine si mitano.
Tutaweza hoja kwa njia ya hatua nne la kujenga sampuli kuguswa programu.
Na hivyo kificho zote chanzo kwa kila hatua ya njia
ni kwenda kuwa haki hapa, hivyo kama wewe ni kufuatia pamoja nyumbani,
kujisikia huru peruse kanuni hii.
Kama wewe ni kufuatia pamoja hapa, tutaweza kuwa na kuonyesha ni juu ya screen,
hivyo msiwe na wasiwasi kuhusu hilo.
Lakini kama uko nyumbani, kujisikia huru kutembelea tovuti hii.
Na, Naam, unapaswa kuwa na uwezo wa kupata kanuni zote wewe d milele haja hapa.
Hivyo ni vizuri kudanganya karatasi pamoja kwa Adventures yako ya baadaye na kuguswa.
Baridi, hivyo kama kila mtu ambaye ni hapa, na hata kama uko nyumbani,
kuvuta up tovuti hii, is.gd/cs50react, hakuna mji mkuu, hakuna kusisitiza, hakuna kitu.
>> Utaona ukurasa kwamba inaonekana kidogo kama hii.
Hili ni jambo aitwaye CodePen.
CodePen ni shirikishi mazingira coding
na ambayo siwezi kuandika kanuni hapa, na kutakuwa na kuwa moja kwa moja alimtuma kwenu.
Na kwa njia hii, siwezi kuandika kanuni.
Siwezi kukimbia kificho hapa.
>> Kwa example-- na kama reloads-- kuona, Mimi mbio JavaScript kificho katika ukurasa
hapa hapa, na itabidi moja kwa moja atatoa ukurasa wa mtandao
na hii kanuni JavaScript.
Na hivyo hii ni njia kwa sisi kujaribu nje kificho
kweli haraka bila ya kuwa na kutumia ID wetu au kutumia mashine yetu ya ndani
au chochote.
Ni njia ya haraka sana kwa wewe mockup na mtihani nje aina mbalimbali za kificho.
>> Hivyo nina kwenda kuwa na kuchukua mfano kificho, kuweka hapa.
Tunakwenda kuwa kazi kwa njia hiyo.
Na kama wewe ni nyumbani, anaweza kuvuta hii up pia.
Na nimekuwa tayari imewekwa Kuguswa hapa, hivyo unaweza tu
kuandika kanuni yako mwenyewe hapa, na kujaribu kama uwanja wa michezo yako mwenyewe.
>> Naam, kama kila mtu kufungua kiungo huu hapa.
Tafadhali nipe Thumbs up mara moja kuwa ni wazi.
Baridi, baridi baridi.
Kuna kitu hapa kwa sasa, lakini sisi kubadili hali hiyo hivi karibuni.
>> OK, hivyo kuguswa ni JavaScript maktaba, na kama vile,
inahitaji elimu ya JavaScript, ambayo ni lugha ya programu ya mtandao.
Na ni kutumiwa kwa mambo mengine sasa pia lakini kimsingi mtandao kuendeleza
lugha, hivyo kama wewe ni unfamiliar na kwamba, kusoma tovuti inayoitwa JSforCats.com.
Ni ajabu.
Unaweza kujifunza JavaScript katika muda wa nusu saa.
Ni ajabu.
>> Ili kuwapa kusoma.
Sisi pia ni mengi ya HTML hapa kwa sababu sisi ni kubuni kurasa za mtandao bila shaka.
Hivyo kama wewe ni unfamiliar na HTML, angalia HTMLdog.com.
Nadhani kujifunza kuguswa ni rahisi mara milioni ikiwa tayari
kujua ujenzi wa vitalu.
Kama una vipengele, ni rahisi kufanya sehemu kubwa.
Hiyo ni kuguswa lugha kwa ajili yenu.
>> Hivyo kwenda mbele na kutoa mambo haya ya kusoma.
Pause video hii.
Kuwapa kusoma kama wewe ni nyumbani kama wewe si
ukoo na HTML au JavaScript
OK, hivyo nini tunakwenda kufanya ni tunakwenda kufanya
msingi sana flashcard programu kutumia kuguswa.
Tunakwenda kuwa na flashcard.
Unaweza flip kadi na kurudi.
Na tutaweza pia kuwa na orodha ya kadi zote kwamba tuna,
na kama sisi ni hisia kabambe, tuweze kuwa
uwezo wa kubadili kati magari kwa kubonyeza yao.
>> Lakini hii ni, bila wazi yako mifupa, rahisi sana kuguswa programu.
Na hivyo hii ni kweli si yasiyo na kutekeleza,
lakini tunakwenda zinaonyesha kuwa, kama wewe kufanya hii, ni sana, ni rahisi sana kupanua
kama watu wengine kukusaidia na hayo.
Hivyo sisi ni kwenda kupitia hatua nne kuanzia mwanzo wa kujenga hii.
>> OK, hivyo hatua nne, tutaweza kuanza mbali na hatua ya kwanza.
Hatua ya kwanza ni kwenda kuwa kujenga sehemu yako ya kwanza.
Kama nilivyosema hapo kabla, sehemu katika kuguswa ni tu HTML kipengele juu ya steroids.
Ni bayana HTML na baadhi ya tabia, na
bayana jinsi watu unaweza kuingiliana na hayo jinsi
ingekuwa hali ya ndani.
Kama kifungo watajua kama ni wangapi mara imekuwa clicked kwa mfano,
na itakuwa kujua jinsi ya kuweka yenyewe nje.
>> Basi hebu kwenda mbele na kujenga wetu Sehemu ya kwanza kwa kutumia JavaScript.
Hivyo kama syntax inaonekana weird, hiyo ni kwa sababu ni aina ya ni.
Hivyo, tena, tunakwenda kufanya kutofautiana kuitwa
programu kutumia keyword basi, ambayo inafanya kutofautiana,
basi App sawa React.createClass.
>> Kuguswa ni maktaba na ina the kujenga darasa kazi.
Na kazi hii ni kidogo ya kificho kwamba wewe
unaweza kutumia ili kujenga mpya aina ya kuguswa sehemu.
Na hivyo React.createClass hufanya sehemu,
na sehemu hii itakuwa kuwa na uwezo wa kufanya mambo ya ajabu.
Jambo kuu inaweza kufanya ni kutoa kitu, atatoa kama kazi.
>> Tena, kama ripoti hii si dhahiri kwa wewe, mimi kupendekeza wewe kwenda juu ya JS ajili ya paka
na kuangalia ni nje.
Ni kwamba zoomed katika vizuri?
Baridi.
>> Hivyo kila mahitaji sehemu kuwa atatoa kazi.
Atatoa kazi anasema, je, mimi magazeti juu ya screen?
Lakini sehemu ni haina maana kama hana
kujua nini magazeti juu ya screen, hivyo unahitaji kuwa na atatoa kazi.
>> Hivyo katika atatoa kitu, wewe tu haja ya kurudi baadhi HTML.
Na nini baridi ni kwamba kuna kitu inaitwa ni
JSX, ambayo ni upanuzi wa JavaScript ambayo hutumiwa na kuguswa.
Ni hebu wewe kuandika HTML ndani ya ya yako, JavaScript ambayo
sauti aina ya weird wakati wewe kwanza kufikiri juu yake,
lakini inafanya mengi ya akili baadaye.
Hivyo tunaweza kufanya hivyo.
Kama wewe ni ukoo na HTML, najua tuna div kwa madhumuni ya jumla
chombo kwa mambo ya ajabu.
Tunaweza kurudi div, na ndani ya div hii, tunaweza kuweka mambo ya ajabu.
>> Basi hebu kusema tunataka atatoa tu sawa-up flashcard kwa sasa.
Flashcard, napenda kusema, itakuwa na swali na jibu.
Hivyo ndani ya div hii, hebu magazeti nje aya
kwamba anasema question-- ni nini jibu la mwisho kwa maisha, ulimwengu?
Na kisha jibu ni kwenda kuwa, bila shaka, 42.
>> Kwamba hakuwa na kuja vizuri wakati wote.
Yeah, hivyo kimsingi unaweza kweli kuandika HTML ndani ya wako JavaScript.
Na hii ni kwenda kuwa kuchapishwa katika screen.
Basi hebu kujaribu nje.
>> Hivyo tuna sehemu yetu.
Tunahitaji kuwaambia kuguswa kuweka sehemu ya juu ya screen
hivyo React.render, hivyo taarifa kwamba sisi kutibu programu kama kipengele kingine chochote.
Sisi kuandika ni kama ilivyokuwa HTML kipengele.
Kama badala ya kusema kama img kwa picha au p kwa aya,
kuandika App, hivyo Programu ni kutibiwa kama HTML kipengele.
Kama nilivyosema hapo kabla, ni kipengele juu ya steroids.
>> Hivyo atatoa Programu, nawe kuwapa nafasi ya kuweka.
Na hii ni jinsi gani unaweza kuwaambia ni wapi kuweka hilo.
I have umba div rahisi juu ya ukurasa wito na kitambulisho cha ukurasa,
na hapo ndipo kipengele ni kwenda.
>> Na sisi siyo kwenda kukimbia kwa HTML.
Kimsingi hii ni kwenda kupata kuweka ndani ya kipengele hiki ukurasa
kwamba tuna juu ya screen.
Hivyo ni anaendesha kanuni hii, na huchota hii Jambo kwenye screen, hivyo hapa sisi ni.
Tumefanya kuguswa yetu ya kwanza sehemu.
>> Hivyo tu kama kurejea, sisi upole alifanya aina mpya ya sehemu, sawa?
Hiyo ni nini React.createClass.
Na katika sehemu ambayo, sisi habari, nini ni lazima kufanya.
Kila sehemu hii ni kwa kuchapishwa kwenye screen,
itakuwa magazeti nje div kwa aya mbili ndani yake.
>> Na nini sisi hivyo, tukiwa na programu mpya kutumia pembe mabano programu nukuu.
Tunaambiwa ni kuiweka ndani ya ukurasa kipengele.
Na hivyo nini mimi, ni umba programu mpya kutoka kwamba template.
Na kisha mimi aliiambia yake ya kutoa hiyo.
Hivyo ni kusema, sawa, programu, nifanye magazeti nje?
Programu anasema, kwenda magazeti nje div na aya mbili ndani yake.
Na voila, kuna div wetu na aya mbili ndani yake.
Mantiki hadi sasa?
>> Hivyo, tena, changamoto zima la kuguswa ni kujua tu jinsi ya kufanya vipengele.
Jinsi ya kufanya vipengele kazi pamoja.
Sasa kwa kuwa tumekuwa alifanya yetu ya kwanza sehemu, hebu kwenda nyuma
na kufanya vipengele customizable.
Hivyo unajua jinsi katika HTML wewe inaweza kutoa madarasa yako vifungo?
Unaweza kutoa nanga yako href.
Unaweza kutoa pembejeo yako aina, sawa?
Unaweza kutoa desturi zaidi mali kwa wote wa mambo yako
kwa kufanya hivyo kuvutia zaidi.
Na sisi kweli anaweza kufanya exact kitu.
>> Basi hebu kusema tunataka yetu programu ya kwenda kutoa kadi yoyote.
Hivi sasa sisi tu kulipwa kadi hardcoded.
Tunajua kuna moja tu kadi inaweza kufanya, hivyo sisi ni
kwenda kujaribu na kubadili hali hii sasa ili kwamba tunaweza tu kuwapa baadhi kadi.
Kutakuwa na magazeti nje kadi.
>> Wewe ni lazima kujaribu na kufanya yako vipengele madhumuni ya jumla sana.
Hivyo njia hii mimi naweza email hii rafiki yangu na kuwa kama,
chochote flashcard una, tu kulisha ndani hapa,
na kutakuwa na kufanya hivyo peke yake.
Unaweza kuweka wengine mambo katika programu yako mwenyewe.
>> Lakini kwanza, hebu kuvunja hii juu katika sehemu mbili,
lakini tunataka tofauti kadi uchapishaji sehemu kutoka halisi programu sehemu.
Hivyo nini tunaweza kufanya ni sisi Unaweza kubadilisha hii kutoka App
kwa CardView, tu jina jipya kwa programu,
na tunaweza kufanya mpya sehemu inayoitwa App,
si kwa kuchanganyikiwa na umri wa Programu.
Sisi tumepewa createClass, na kama katika HTML,
unaweza kiota kuguswa vipengele ndani ya kila mmoja.
>> Hivyo katika hili atatoa kazi, kazi ya kurudi CardView,
na hii ni halisi kitu kimoja.
Kuona kwa nini ni kitu kimoja?
Badala ya utoaji tu programu hiyo ina div na pairing ndani yake,
programu mithili CardView, na CardView mithili div na aya.
Hivyo hii ni mfano wetu wa kwanza wa mambo nesting ndani ya kila mmoja.
Je, hiyo mantiki?
Hivyo, tena, tuna CardView kipengele.
Tuna mambo programu kuwa ni kubwa kuliko.
>> OK, hivyo tunataka yetu CardView-- kama wewe kutoa CardView nzuri kadi fulani,
kutakuwa na magazeti nje kwa ajili yenu, haki?
Hivyo kwanza, tunahitaji kufanya kadi, hivyo hebu kufanya kadi kitu.
Hivyo basi kadi yangu equal-- kama wewe ni wote wa utambuzi,
hii ni maamuzi nukuu tu kitu katika JavaScript.
Ni aina ya kama struct katika C, hivyo sisi alifanya kadi,
na hivyo sasa tunaweza kupita kadi hii kama mali au kama sifa katika HTML
istilahi kwa programu yetu.
Ili tuweze kufanya hivyo, Programu kadi ni sawa na myCard.
>> Unajua jinsi katika pembejeo, unaweza kufanya pembejeo aina ni sawa na asilia au kifungo
tabaka la sawa na BTN kwa bootstrap ,?
Sawa wazo, Programu kadi equals-- nimepata kuweka braces here--
Programu kadi ni sawa na myCard, hivyo hii anasema tuna hii kitu kadi.
Mimi nina kwenda kwa kupita mali kwa sehemu ya programu.
Na hii sehemu programu mapenzi kuwa na uwezo wa kupata huduma hiyo na kufanya
kuvutia mambo nayo.
>> Hivyo programu yetu ni kwenda kuwa kutokana na kadi, hivyo kwa sasa,
hebu kuwa na programu kutoa tu kadi ya CardView
yenyewe kwa sababu kama programu si kwenda kujua nini cha kufanya na hayo,
hivyo tutaweza tu kuwapa CardView.
Hivyo tutaweza kupita njia ile ile, kadi sawa,
na hivyo kila sehemu wanaweza kupata mambo ambayo amepewa yake.
Wanaweza kupata mali ambayo yamekuwa aliyopewa ni
kutumia syntax hii, this.props.card.
>> Hivyo kile kinachotokea hapa ni una myCard kitu.
Wewe kupita katika programu kutumia App kadi ni sawa na myCard.
Hiyo kadi kitu ni kutolewa kwa programu yako.
Programu unaweza kupata ni kama this.props.card.
Ni aina ya kama picha anajua nini chanzo ni.
>> Programu hii anajua nini ni kadi ni, na inaweza kufanya mambo kwa hayo.
Inaweza kufanya computations.
Ni wanaweza kufanya maamuzi ya msingi mbali ya hiyo.
>> Kwa sasa, mimi alikuwa anaenda kupita this.props.card kwenye CardView.
Mantiki hadi sasa?
Ni itabidi kufanya maana zaidi sasa.
>> OK, hivyo sasa sisi ni saa CardView.
CardView yetu, kutokana na kadi, lazima magazeti nje swali lake na jibu.
Hivi sasa sisi tu kuchapishwa baadhi maswali hardcoded na majibu.
Tunahitaji kufikiri out-- tunahitaji kuuliza kadi kwamba alitupa
kile ni swali na jibu, na kisha magazeti hii nje katika screen.
>> Hivyo tunaweza kufanya hivyo hapa.
Katika kutoa begin-- kwanza kufanya sawa.
Hivyo nini sisi ni kufanya hapa ni tunajua kwamba kadi ni ametupa kwa mali,
sawa?
Ni tuliyopewa kama pembejeo.
Kama ni karibu kama hoja kwa kazi.
Kadi ni hoja karibu kwa CardView hii.
>> Tutaweza kutafuta kwamba, na kuweka ndani swali kutofautiana.
Kuhakikisha jibu alikwenda kwa jibu kutofautiana.
Papo kwamba kadi ya kujibu.
Na sasa kwamba tuna hizi, badala ya uchapishaji nje maandishi kwamba,
tunakwenda magazeti nje chochote alitupa.
>> Hivyo hii stuff-- hivyo tunakwenda kuizima Swali Jibu.
Hebu angalia kama hii kazi.
Baridi, hivyo hebu hatua kwa njia hiyo muda zaidi tu kuwa na uhakika.
>> Hivyo kadi yangu ni kadi kitu, na sisi ni kutoa kwamba kadi ya programu.
Na programu ni kwenda kuchukua kadi na kuwapa CardView.
Na CardView hii anasema, kama wewe nipe yoyote flashcard kitu,
Mimi itabidi magazeti nje swali lake na jibu lake, sawa?
>> Hivyo kitu ambacho ninaweza kufanya ni siwezi kutuma kanuni hii, kwanza
kama mistari 10 ya kificho wangu, kwa rafiki yangu.
Aliweza kuiweka katika maombi yake mwenyewe.
Na kitu kimoja kwa muda mrefu kama alifanya hivyo, kama CardView kadi ni sawa na hii,
muda mrefu kama yeye kuundwa CardView akampa taarifa sahihi,
aweze kutoa kadi yake mwenyewe.
Na hivyo kwa njia hii, ni kweli njia ya baridi kwa wewe kujenga
vipengele ambavyo kutumia kila mmoja, haki?
Kadi hii, mimi naweza kuchapisha CardView hii kwenye mtandao,
na watu bila kuwa na uwezo wa matumizi yake.
Hivyo kimsingi, ni kama moja ya kazi ya kiwango katika maktaba C.
>> Ni kazi ambapo mtu ameandika hilo.
Unaweza kutoa mchango fulani.
Ni itabidi kuzalisha pato fulani.
Huna huduma jinsi kazi ndani.
Muda mrefu kama wewe kuwapa haki pembejeo, kutakuwa na kufanya pato haki.
>> Na sehemu inaweza kuwa mawazo ya njia hiyo hiyo.
CardView Hii ni kama maktaba kazi.
Kama wewe kuwapa baadhi kadi kama mali, itabidi
magazeti nje maudhui ya kadi hiyo.
Kama kama mimi kubadili kadi yangu kwa badala kuwa kama yale ni 5 pamoja na 37,
itakuwa update ipasavyo.
Hivyo tu kwa kubadilisha pembejeo, anapata pato fulani.
Hivyo unaweza kufikiria vipengele karibu kama kazi kwa njia hii, ambayo
unaweza kuweka pamoja.
Kupata pembejeo, kama CardView hii kama pembejeo, unaweza kupata pato.
Katika kesi hiyo, pato ni HTML.
Mantiki hadi sasa?
Baridi, hivyo tena, mali ni jinsi gani unaweza kupita maelezo
ndani na nje ya vipengele.
>> Sawa, hivyo hebu kufanya hili Jambo shirikishi.
Sasa hivi ni aina ya boring.
Ni nini [inaudible]?
Unaweza magazeti baadhi nje, lakini hiyo yote inaweza kufanya.
>> Basi hebu kwenda nyuma ya umri wa swali tu kwa sasa.
OK, hivyo hivi sasa vipengele hivi ni boring kwa sababu wote kufanya,
wao kupata pembejeo.
Wao kufanya pato, sawa?
Hiyo ni aina ya boring.
Tunataka kuwa na yetu vipengele kuweza kuwa na
aina fulani ya hali ya ndani, kama kukumbuka kitu.
>> Kwa flashcard, kwa mfano, ni aina gani ya hali
Huenda unataka kumbuka kwa flashcard?
Hadhi muda gani Huenda unataka kukumbuka
kwa flashcard katika programu flashcard?
Watazamaji: Kama imekuwa ni flipped?
NEEL Mehta: Yeah, haki.
Hivyo unaweza kutaka kuweka wimbo wa watu wewe uso juu au ni
wewe uso chini kwenye kadi.
Kwenye Facebook, kwa mfano, wewe ungekuwa wanataka kukumbuka ambapo katika kulisha habari
ni wewe au kama nani ni wasifu unafanya hivi sasa.
>> On Mtume, kama yale maandishi aina katika sanduku pembejeo, sawa?
Kama mahitaji ukurasa, unaendelea mbali.
Lakini wewe si kweli huduma.
Ni tu muda.
Yeah?
>> Watazamaji: [inaudible]
NEEL Mehta: Kama flash kadi, kama unaweza kuwa na kuona
upande swali au upande jibu?
>> Watazamaji: Sawa.
>> NEEL Mehta: Kama mbili upande mmoja flashcard, sawa?
Yeah, hivyo unataka kuwa na wazo hili la sasa
Nina mali, ambayo ni kama pembejeo, lakini hali, ambayo ni ya muda mfupi, uh,
ambapo wewe ni juu ya ukurasa, haki?
Tena, mimi alisema katika Facebook Mjumbe, nina kama ambayo mtu
wewe ni kuangalia Picha au nani ni wasifu, sawa?
>> Hii ni muda tu.
Ni muhimu kuonyesha mtumiaji nini kinaendelea, lakini mahitaji ukurasa.
Ni kweli haina jambo.
Hivyo hali ya muda mfupi ni, hivyo sisi wote ni serikali.
>> Hivyo, tena, kuna hali na props.
Props ni pembejeo kutokana na kutoka chanzo yako data.
Hali ni kama defaults.
Ni kama tu mambo ambayo hufanya jambo shirikishi.
>> Hivyo katika yetu CardView-- hebu kuwa CardView-- hivyo wetu ilikuwa nzuri.
Nini tunakwenda kufanya hapa, tunakwenda kugusa CardView na tu CardView.
Na hivyo rafiki yangu ambaye alipata hivyo, wao bila taarifa tofauti yoyote.
Hawakutaka kuwa na mabadiliko yoyote ya maadili yao wenyewe,
lakini wao Ningependa kuona yao CardView got souped up.
Hiyo ni sehemu nzuri kuhusu vipengele.
>> OK, hivyo katika CardView yetu, hebu jaribu na kuweka wimbo wa kama sisi ni awamu up
au uso chini.
Katika kuguswa sisi kufanya hivyo kwa kwanza kubainisha hali ya awali.
Wapi kadi kuanza?
>> Hivyo kuwa kazi kuitwa getInitialState kazi, na sisi kurudi kitu.
Kitu hili lina baadhi ya serikali, na hali ni tu jozi ufunguo thamani.
Kama katika kuwafundisha, una muhimu na thamani, una kama jina ni kamba.
>> Katika kesi hiyo, hebu sema mbele ni kweli.
Hii inasema kwamba tuna serikali.
Sehemu moja ya hali ni sifa aitwaye mbele.
[Inaudible], kwa hiyo kwa msingi, tuko mbele ya kadi,
na tunaweza kubadili hali hii kama sisi flip kadi.
Mantiki?
>> OK, hivyo katika atatoa, sasa hivi, tuko kuonyesha swali na jibu.
Sasa nini tunapaswa kufanya ni kuonyesha swali
kama sisi ni juu ya mbele ya kadi ili Jibu ni kwa nyuma ya kadi.
Hiyo ni kwa nini wote kufanya kadi shirikishi.
Basi hebu jaribu na kwa hii hapa.
Naam, kwanza tu kufanya kutofautiana.
Tunaweza kuuliza sasa this.state.front.
Sisi kupata hali sisi huo upatikanaji props, hivyo this.state.front.
>> Kama tuko mbele, kisha Nakala ni this.props.card.question.
Kama tuko mbele ya kadi, sisi ni kwenda kujaribu na kunyakua
swali kutoka kadi.
Vinginevyo, kama sisi ni juu ya nyuma ya kadi, tunafanya nini?
>> Watazamaji: jibu?
>> NEEL Mehta: Yep, hivyo maandishi sawa this.props.card.answer.
Lakini kama taarifa, sisi ni kutumia hali ya kufanya uamuzi
kwa sababu sasa sehemu kuangalia tofauti
msingi mbali jinsi haya kuingiliana na hayo.
Hivyo badala ya uchapishaji nje hii, tutaweza tu magazeti nje maandishi.
Baridi, hivyo kwa sasa, kama unaweza kuona, tunaona tu swali.
Na kama mimi kubadili hali hapa manually mbele ni uongo tunapata 42 nyuma.
>> Hivyo, tena, sehemu hii ina hali yake mwenyewe.
Kama kifungo anajua kama imekuwa ni taabu au la,
jambo hili anayajua yaliyomo kwenye mbele au nyuma.
By default, ni juu ya mbele.
Na kisha kama ni juu ya mbele, tutaweza magazeti nje swali.
Kama ni juu ya nyuma, tutaweza magazeti nje jibu.
Hivyo, tena, habari kutokana na ni sawa.
Ni tu inaonekana tofauti kulingana na jinsi mpango hilo.
Hivyo, kwa mfano, Facebook Mtume, hata kama wewe kupata hiyo chanzo data,
inaweza kuangalia tofauti kwa sababu hali ni tofauti.
Wewe ni kuangalia ujumbe tofauti ya mtu.
>> OK, hivyo hii yote ni vizuri na nzuri, lakini sasa nini kweli
kutufanya uwezo wa kubadilisha, iwe kadi yetu ni mbele au nyuma.
Tunaweza kufanya hivyo kwa kuongeza flip kifungo, kifungo kadi ambayo
flip kadi ikiwa ni [inaudible].
Basi hebu kuongeza kifungo hapa, hii kifungo, na kifungo hii watasema flip.
>> Na hivyo sasa hivi, ni haina kufanya kitu chochote.
Ni tu inaonekana nzuri.
Nini tunaweza kufanya ni tunaweza kuongeza click handler, onClick sawa na this.flip,
na tutaweza kufafanua flip baadaye.
Lakini kimsingi, onClick ni kazi ambayo
anapata kuitwa wakati mtumiaji Clicks yake.
>> Hivyo kifungo watajua wakati imekuwa ni clicked.
Akaenda imekuwa clicked, itakuwa flip kadi.
Ni aina ya kama yako pizza utoaji guy.
Wewe ni kama, sawa, wakati wowote mtu wito mimi, itabidi kutoa pizza, sawa?
>> Kujiandikisha msikilizaji hii.
Wewe kusikiliza kwa tukio hilo.
Wewe kupata kuitwa, na wakati tukio kinachotokea, wewe kufanya kitu.
Kupata pizza.
Katika kesi hiyo, wakati uko clicked, flip kadi.
>> Na hivyo tunahitaji kufafanua kazi ambayo itakuwa flip kadi,
hivyo tutaweza kuandika kwamba haki hapa, flip kazi.
Na hivyo unafikiri nini flip atafanya?
Tena hii anapata kuitwa wakati sisi bonyeza flip kifungo.
Kile lazima kazi flip nini?
>> Watazamaji: kubadilika this.state.front kutoka kweli kwa uongo, uongo na kweli.
>> NEEL Mehta: Yep, hivyo kuchukua chochote this.front is-- hali mbele ni.
Kuchukua hali mbele, ikiwa ni kweli, kufanya hivyo uongo.
Kama ni uongo, iwe ya kweli, haki?
Basi hebu jaribu hilo.
>> Huwezi kubadili hali tu kwa kufanya this.state.
Huwezi kufanya hivyo.
Una kutumia kazi aitwaye this.setState.
>> Hivyo unaweza kusema this.setState mbele matumbo hii ambapo, tena, mshangao
hatua ina maana kinyume.
Mimi nadhani kama hii. state.front Ni kweli, kutakuwa na kugeuka uongo.
Hivyo tutaweza kuweka hali kutoka kweli kwa uongo.
Kama ni uongo, tutaweza kuliweka uongo kwa kweli.
>> Tu taarifa kwamba sisi kuweka na kupata kidogo tofauti, na hivyo hebu jaribu hii.
Bada bing, kuangalia hii.
Kifungo flip mapenzi sasa kubadili mbele na nyuma serikali.
>> Na hivyo hapa ni wapi unaweza kuona kidogo ya uchawi ya kuguswa.
Kama sisi kamwe aliiambia yake ni upya atatoa.
Sisi kamwe aliiambia yake redraw kitu chochote.
Kama wewe ni kufanya hii bila kuguswa, wewe d
kuwa to-- kama wakati flip kifungo ni clicked,
wewe d na kuwaambia ni manually re-atatoa, sawa?
>> Kuguswa ni kweli baridi katika kwamba kama wewe kuwapa hali fulani na mali,
itakuwa daima atatoa exact kitu.
Na hivyo wakati sisi milele sisi kubadili hali na mali,
kuguswa tu re-mithili jambo zima.
Ni anajua kwamba kuna mawasiliano ya moja kwa moja
kati ya serikali na vigezo na HTML.
Hivyo wakati wowote ama ya wale mabadiliko na kupitia hali ya kuweka,
itabadilisha jinsi kulipa ni re-kulipwa.
Na hivyo kimsingi kuguswa ni kama kusubiri kwa ajili yenu kubadilika.
>> Kila kitu ni mabadiliko, kutakuwa na re-atatoa ukurasa mzima.
Na kama ni sauti ufanisi, ni kwa sababu itakuwa,
lakini kuguswa anatumia jambo aitwaye Kivuli DOM.
Badala ya kuchora ukurasa moja kwa moja, anaendelea virtual HTML mti katika kumbukumbu.
>> Unajua, HTML ni kama mti, kama kihierarkia muundo data.
Ni anaendelea mti bandia katika kumbukumbu, na wakati wowote update ukurasa,
kutakuwa na kuteka bandia mwingine mti, na kutakuwa na mahesabu ya
nini mabadiliko hayo mahitaji ya kufanya ukurasa wa kufanya miti miwili sawa.
Hivyo kimsingi, ni karibu re-mithili mengi.
Na kisha tu kama mabadiliko ukurasa katika tweaks kidogo kama inahitajika,
hivyo ni sana, sana, ufanisi sana.
>> Hivyo kimsingi kuguswa mapenzi wakati wowote kubadili kitu,
kutakuwa na re-atatoa ukurasa karibu.
Ni itabidi kufikiri nini nahitaji mabadiliko ya kufanya ukurasa halisi kutafakari
ukurasa virtual, na kutakuwa na kufanya hivyo.
Hiyo ni DOM virtual.
Ni moja kubwa sifa za kuguswa.
>> Je, hiyo mantiki?
Maswali yoyote?
Yeah?
>> Watazamaji: Ni kwa jinsi gani kulinganisha bado kwa MVC
kwamba kuongelea kabla rasilimali kama.
>> NEEL Mehta: Yeah, swali ni jinsi gani kulinganisha na MVC?
Wewe aliuliza kuhusu rasilimali.
Naam, hebu majadiliano kuhusu jinsi inafanya kazi.
>> Katika MVC, utaweza kuboresha mfano wa kuigwa.
Katika kesi hiyo tunatarajia kuwa kadi mfano wa kuigwa.
Mtazamo ingekuwa flip kifungo, na udhibiti
ingekuwa flip kazi.
Hivyo mtazamo waliniambia mtawala flip flip.
Flip waliniambia mfano kubadilisha, sawa?
>> Na hivyo wakati wa kufanya MVC, wewe kusikiliza kwa mfano kubadilisha,
na re-atatoa maoni ipasavyo.
Au wewe tu na kama na mtawala.
Kusubiri kwa mfano kubadili, na kisha kuchukua na kuchagua sehemu ya jambo kama
kubadilika.
Hapa tuna jambo moja, lakini katika programu kubwa,
una kama kukumbuka yale mabadiliko katika kila mahali moja,
hivyo ni kidogo annoying.
Na hivyo kuguswa ni nzuri kwa sababu ina Kivuli Dom.
Ni inaweza kumudu tu kuandika upya jambo nzima.
Huwezi kuwa selectively kama nadhani nini update.
>> Katika Picha kama wewe kama kupata ujumbe mpya, katika MVC,
wewe d na kukumbuka, OK, kubadili mambo
juu ya ukurasa, ujumbe icon.
Pia pop dirisha jipya chini.
Pia kufanya jambo jipya katika dirisha hilo.
Pia kucheza sauti.
>> Hiyo ni mengi ya mambo kwenda nje kwa wakati mmoja.
Na hivyo kama huna na Kivuli Dom, wewe d
kuwa kufanya hivyo manually kwa sababu huwezi kujikwamua ukurasa mzima.
Huwezi kumudu, hivyo kuwa kubadili kila kitu kwa mikono,
ambayo ni kweli annoying katika MVC.
>> Hivyo ili kuwa na kabidhi, wao huchagua
update ukurasa, ambayo ni ufanisi, lakini pia annoying.
Katika kuguswa, kwa sababu ya kivuli Dom, kupata mambo yote kwa ajili ya bure.
Ni ufanisi kwa sababu ya kivuli Dom.
Bottleneck ni kuhuisha ukurasa.
Siyo kufanya mti kudanganywa.
Kupata ufanisi mkubwa.
Unaweza pia kupata urahisi wa kutumia kwa sababu kama wewe tu kuandika upya ukurasa mzima,
lakini wewe tu kujua, sawa, mambo ni kwenda kuwa juu ya ukurasa fulani.
Ni inaweza kuwa katika nafasi mbalimbali, lakini ni kwenda kuwa juu ya ukurasa, haki?
Hivyo wewe tu re-kulipwa jambo nzima karibu,
na unaweza kufanya michache mabadiliko ya ukurasa yenyewe.
>> Hivyo, tena, katika MVC wewe ingekuwa kuchagua
kati ya urahisi wa kutumia na ufanisi, na kuguswa, kupata zote mbili.
Hivyo ni bora zaidi.
Mantiki?
Imara.
>> Sawa, hivyo hebu angalia hebu majadiliano kidogo kuhusu hatua 4,
jinsi gani tunaweza kuiweka vipengele.
Hivyo tuna haki hii sasa.
Tuna baridi kidogo kifungo yetu.
Tunaweza flip nyuma na nje, na kwamba wote ni gani.
Hebu sema tunataka na sehemu nyingine.
Hebu sema flashcard programu yetu lazima vyenye orodha ya kadi zote
kwamba una, hivyo kwamba maana sisi wanapaswa kuwa na sehemu nyingine.
Naam, labda kuiita orodha mtazamo.
Hebu kutengeneza orodha mtazamo kwamba coexists na CardView,
na hii orodha mtazamo na CardView itakuwa kama kazi kwa pamoja.
Na unaweza kuchanganya yao kufanya programu yetu kwa ajili yenu.
>> Hivyo kwanza, wacha kufanya wanandoa kadi zaidi ya haki.
Hebu kusema, kadi nini?
Na hivyo tu sina kwa kuzaa kwa kuandika katika,
Mimi tu kwenda na nakala yake kutoka hapa.
Na hivyo mimi nina kwenda si kuwapa kadi moja tu.
Mimi nina kwenda kuwapa safu ya kadi.
Hivyo kwanza ya programu kwenda kuvunja kwa sasa.
Haki wote, hivyo sisi ni kwenda kufanya huu uwezo wa kushughulikia kadi nyingi.
Hivyo kwanza, tunakwenda kuwapa, si moja tu kadi lakini safu ya kadi,
kama orodha ya kadi.
Na katika kesi hii, tuna watatu kati yao.
>> Haki wote, hivyo hivyo programu ni kwenda kupata orodha kadi,
na ni kwenda na kuamua ni moja kuonyesha kwa CardView.
CardView Unaweza tu atatoa kadi moja, lakini programu
anapata orodha ya kadi zote, haki?
>> Hivyo wakati wewe kufikiri moja kadi ya kuwapa CardView,
jinsi gani unaweza nadhani unaweza kuwa na uwezo kufanya uamuzi kuhusu ambayo kadi
kuonyesha?
Kukupa ladha, ni kwa muda Wewe utakuwa kuangalia kadi fulani.
Kama mahitaji ukurasa, utasikia tu kwenda nyuma na kadi ya kwanza.
Hiyo ni sawa kwa sababu ni la muda.
Nini mbinu gani sisi kutumia?
>> Watazamaji: Unaweza kufanya kutofautiana hivyo kama wewe alikuwa mbele.
Je, hii ni kweli, wewe naweza kuwa na kadi ya sasa ni sawa na 1?
>> NEEL Mehta: Yeah, hivyo sisi wanataka kuwa na hali, sawa?
Ungependa kutumia hali katika sehemu kufikiri
ambayo kadi kufanya tunataka kupata.
Kama tuna orodha ya kadi zote, tutaweza
kutumia hali kufikiri moja ya kadi ya kwanza,
kadi ya pili, kadi tatu, na kadhalika.
>> Hivyo programu hivyo programu kupata kuwa na kazi getInitialState,
getInitialState kurudi kazi.
Na tutaweza kusema tu activeIndex 0.
Hivyo sasa programu yetu ina yake mwenyewe hali.
>> Na hivyo sasa juu ya kutoa, kufikiri kadi, hebu tu kwenda safu
na kunyakua kitu katika kuwa ripoti.
Teule kadi this.props.cards sawa this.state.activeIndex.
Hivyo kama unaweza kuona hapa, props na hali kwa kweli kazi pamoja.
Hivyo sasa kwamba tuna activeCard yetu, tutaweza simu yake activeCard,
na hebu angalia kama hii kazi.
[Inaudible]
>> Oh, kwamba ilikuwa kosa asilia.
Ah.
>> Baridi, yep, hivyo sasa tulikuwa nyuma ambapo tulikuwa kabla, haki?
Umri huo mpango isipokuwa sasa tunaweza kusaidia
orodha ya kadi, kadi si moja tu.
Na sasa, tena, kama sisi mabadiliko activeIndex, tunaweza kwenda kutoka 0 kwa 1,
na sasa kadi ambayo pili, na kisha tukaenda 0.
Hivyo hapa ni mpya souped-up toleo la yetu.
>> OK, hivyo sasa hebu kuwa na orodha mtazamo kwamba inaonyesha kadi zote katika mpango wako,
hivyo tutaweza kufanya mpya sehemu inayoitwa listview.
Hebu listview sawa na react.createClass.
Hivyo tunataka kutoa unordered orodha kwa orodha ya bidhaa kwa kila kadi.
Na hivyo sisi kuwa na rundo la kadi.
Tunataka moja orodha ya bidhaa kwa kila kadi, sawa?
Tunaweza kufanya kwa kitanzi au kitu cha kufanya mpya orodha ya bidhaa.
Lakini njia ya kufanya hivyo katika Kuguswa, kutumia kitu kinachoitwa ramani.
Ramani ni chombo au kazi unatumia kwamba kwa kila kitu, anaendesha baadhi ya kazi,
inachukua thamani ya kurudi, na anatoa nyuma.
>> Hivyo kama mfano, tuna safu 1, 2, 3.map function-- na hii
ni shorthand kwa function-- x mshale x mara x.
Hii inasema, kwa kila idadi katika 1, 2, 3, kuchukua hiyo.
Mraba, na kuwapa nyuma.
Hivyo unafikiri nini 1, 2, 3.map x inakwenda mara x
x anatoa wewe nyuma kutokana kuwa kazi hii ni
kukimbia kwenye kila kipengele cha safu hiyo.
>> Watazamaji: 1, 4 9?
>> NEEL Mehta: Yep, 1, 4, 9 kwa sababu wewe kufanya 1 mara 1.
Kwamba anatoa moja.
Hiyo ni kitu cha kwanza.
>> Mara 2 2 ni 4.
Hiyo ni kipengele cha pili.
Mara 3 3 ni 9.
Hiyo ni kipengele cha tatu.
Mantiki?
Hivyo ramani ina mbinu wewe kutumia katika programmers kazi,
style mpya ya programu ya kufanya kitu
kwa kila kipengele katika orodha yako.
Na hivyo hii inaonekana familiar.
Tuna orodha ya kadi.
Tunataka kupata orodha ya bidhaa kwa kila moja, hivyo tutaweza tu kutumia ramani hapa.
Tutaweza kusema, hebu orodha sawa this.props, kadi, ramani.
>> Na hivyo kutokana na kadi, tuko kwenda kuzalisha bidhaa orodha
na kwamba kadi ya yaliyomo upande wa hayo.
Hebu sema tu tunataka kutoa nje kadi kuhoji hivyo card.question.
Hivyo orodha hili lina safu ya li ya au Orodha Vitu
ambapo kuna orodha moja bidhaa kwa kila kadi,
na kwamba ina kadi swali.
Mantiki?
>> Baridi, hivyo sasa hebu kweli magazeti kwamba nje.
Hivyo sisi kurudi ul.
Ndani ya kwamba orodha unordered, tutaweza tu fimbo orodha nzima
kwamba wao alitupa.
Baridi.
>> Sawa, sasa hivyo hii orodha mtazamo matendo kupata tu.
Maswali yoyote kuhusu orodha mtazamo?
Wewe kuwa na rundo la kadi.
Kufanya orodha ya bidhaa kwa kila kadi.
Na wewe kuziweka ndani ya unordered orodha, na wewe kuwapa nyuma.
Hivyo sasa hebu kutenda hivyo sisi kupachika ndani ya hii ya programu yetu,
ili tuweze kufanya hivyo, mtazamo orodha.
Nini hoja gani sisi kupita kuorodhesha maoni?
Nini mali gani sisi kuwapa?
Kumbuka, kama wewe kutoa ni rundo ya kadi,
kutakuwa na kufanya orodha kuona kwa kadi hizo.
Hivyo gani sisi kupita hapa kama hoja?
Watazamaji: orodha ya kadi?
NEEL Mehta: Yeah, hivyo kadi sawa this.props.cards, sawa?
Na hivyo tatizo tu ni kwamba unaweza tu
akageuka moja juu cha kipengele katika atatoa, hivyo nimepata wrap katika div.
Ni weird.
Basi hebu angalia kama kwamba.
Je, hiyo kazi?
>> Yep, kuna kwenda.
Hivyo basi, tuna orodha ya kadi chini,
na kisha tuna yetu CardView yenyewe juu,
na kwamba itakuwa flip kati ya pande mbili za kadi.
Sasa je, hiyo mantiki jinsi mimi alifanya hivyo?
Yeah, hivyo tena, tuna sehemu mbili.
Kwanza sehemu prints nje kila kadi katika orodha.
Hiyo ni mtazamo orodha.
Na sehemu ya pili Prints nje tu kwamba kadi.
Kama wewe kuwapa kadi fulani, itabidi magazeti nje maelezo kuhusu kadi ambayo
na basi wewe flip na kurudi.
>> Hivyo kama tunataka, tunaweza kujaribu na majadiliano kuhusu kuongeza baadhi ya vipengele mpya kwa hili.
Vinginevyo tunaweza kuongea kidogo zaidi kuhusu wa kasi ya mtambo huo,
au tunaweza kujibu maswali unaweza kuwa
kwa sababu haya yote ni sehemu ya msingi ya ya kuguswa kwamba mimi nataka kuzungumzia.
Tunaweza kwenda mbele.
Tunaweza kujibu maswali.
Chochote unataka.
>> Watazamaji: Je, unaweza kutumia JSX katika kawaida na javascript?
Au ni kwamba kitu ambacho alikuja na [inaudible]?
>> NEEL Mehta: Swali ni can matumizi JSX kwa kawaida JavaScript?
Jibu ni ndiyo.
JSX ni njia tu ya inachukua yako JavaScript ambayo ina HTML ndani yake,
na inaandaa katika JavaScript kwamba hana HTML ndani yake.
Hivyo taarifa that-- hivyo taarifa hapa.
Hii inaonekana kama una kama div na una mambo ndani yake.
>> Hiyo inaandaa kwa JavaScript kwamba kama inazalisha kitu kimoja.
Nadhani nini mimi kusema ni kwamba JSX ni kisintaksia, kama ni
preprocessor kwa JavaScript kiasi kama PHP ni preprocessor kwa HTML.
JSC ni preprocessor kwa JavaScript ambayo inakuwezesha
kuweka HTML ndani ya wako JavaScript.
Na hivyo kama una transfoma haki ambayo ni jambo aitwaye [inaudible],
ambayo kubadilisha.
Preprocessor haki, kutakuwa na basi wewe kufanya hivyo.
>> Watazamaji: [inaudible]
NEEL Mehta: Kwa kawaida huhitaji kuweka HTML ndani ya JavaScript
isipokuwa kufanya yako kuguswa.
Lakini unaweza kufanya hivyo anyway.
Yep?
>> Watazamaji: Nadhani wewe alikuwa ilivyoelezwa kuguswa
kama kazi lugha Programing.
Tumekuwa kujifunza C katika CS50.
Ni C pia lugha ya kazi?
NEEL Mehta: Kwa hiyo swali ni kuhusu kazi
dhidi ya jambo lingine aitwaye muhimu au kiutaratibu programu.
Kuna aina mbili ya mipango maarufu.
Moja kuitwa kiutaratibu, ambayo Ni kuhusu kama kufanya amri,
na moja ni kazi, ambayo yote ni juu ya kuwa na kazi na kuwa na
pembejeo na mazao ya wale.
Kuguswa ni dhana kazi.
C ni dhana kiutaratibu sana.
>> Na kama mfano, C kwa mfano, huna kufanya njia hii declarative
ya kufanya mpango, haki?
Una kusema, magazeti hii.
Mabadiliko ya muundo huu data.
Magazeti hii.
Ni wote kuhusu amri.
>> Katika kuguswa, kuna si amri kwamba watu wengi.
Ni wote kuhusu kuwa vipengele wewe kuweka pamoja.
Wao ni kama kazi.
Una kama kazi aitwaye CardView,
ambayo ni kazi ambayo ina mchango, pato,
na hivyo kuguswa ni wote kuhusu falsafa hii
sisi wa having-- una data.
Wewe kupita kwa njia hii algorithm, na kutakuwa na
pato HTML kwamba tu kuchapishwa ukurasa,
na hivyo kuwa na kuujenga kipande kwa kipande.
>> Hivyo kuteka mfano kwa nini Nilivyosema hapo kabla, unajua jinsi
katika Picha kama wewe kupata ujumbe, na wewe kuchagua nini sehemu ya kuboresha,
hiyo ni kiutaratibu.
Ni muhimu, sawa?
OK, I got ujumbe.
Hebu mabadiliko ya akaunti huko.
>> Hebu pop window hapa.
Hebu mabadiliko ya akaunti huko.
Hebu kuteka hii hapa.
Hiyo ni mbinu kiutaratibu.
>> Hiyo ni nini mambo kama Angular, Kuongeza, uti wa mgongo, mifumo mingine kutumia.
Kuguswa ni kazi.
Ni njia tofauti sana ya kufikiria juu ya mambo.
Inachukua wazo hili la hebu kuwa kazi au algorithms kwamba je
kuwapa data.
Ni itabidi mate nje nini lazima, na kompyuta
itachukua huduma ya uzito wa nje.
Huwezi kushughulikia hilo wewe mwenyewe.
Je, hiyo kufanya kidogo ya akili?
Yeah?
>> Watazamaji: Katika lugha ya kazi, kila kitu kinachotokea kwa mara moja?
>> NEEL Mehta: Hapana, mambo kutokea kwa utaratibu.
Kama hapa bado kuna ili, lakini hana
kutokea katika utaratibu wa kama kuwapongeza, amri, amri.
Ni hutokea katika utaratibu wa kazi anatoa pato.
Kuweka kwamba katika kazi nyingine.
Kuweka kwamba katika mwingine kazi, kazi nyingine.
>> Kama wewe kufanya CS51, itabidi kujifunza mipango ya kazi
nje kidogo ya wigo wa hii.
Lakini kimsingi, nini hufanya Kuguswa baridi sio tu
njia moja data mtiririko na virtual Dom,
lakini pia hii wazo la kazi ya programu.
Na programu ya kazi ni rahisi sana kutunga na kufanya mambo ya baridi kutoka katika,
na ni rahisi sana kufikiri kuhusu na sababu juu.
Hivyo ni mwingine sare nzuri ya kuguswa.
Maswali yoyote zaidi?
Yeah?
>> Watazamaji: Um, kwa nini wewe kutumia basi kinyume na var?
>> NEEL Mehta: Hivyo swali ni mbona kutumia basi badala ya var?
Hili ni jambo aitwaye ES6 au ECMAScript 6.
Ni toleo jipya la JavaScript.
Kuna kundi la sababu za kiufundi ni, lakini hebu ni toleo bora ya var.
>> Ni jinsi gani kutangaza vigezo.
Unaweza kutumia basi.
Unaweza kutumia var.
Hebu ina rundo la kiufundi reasons-- unaweza kuangalia yao
up later-- kwa nini ni bora zaidi.
Kimsingi, ES6 ina baadhi nzuri syntax mpya, baadhi ya vipengele mpya
juu ya umri wa JavaScript.
>> Hivyo tuna kama dakika tano.
Mimi nilitaka kuzungumzia jambo moja zaidi halisi haraka.
Kama alikuwa na maswali yoyote, hebu majadiliano kuhusu hilo baada ya hii.
Lakini tu hivyo hii anapata hawakupata juu ya kamera, mimi tu
wanataka kuzungumza kidogo kuhusu jinsi kweli kutumia kuguswa katika programu yako.
>> Kama kwenda hapa, Facebook.GitHub.IO/react,
huu ni ukurasa wa nyumbani kwa kuguswa, na kutakuwa na kuonyesha kweli jinsi gani matumizi
Kuguswa katika kurasa yako.
Kimsingi, ni kidogo ngumu kujaribu kufunga kuguswa.
Ni si rahisi kama wewe tu Drag na kuacha JavaScript katika huko.
>> Unaweza kuwa na transfoma yako kuanzisha, ambayo itakuwa, kama ilivyokuwa kabla,
kugeuka JSX yako katika JavaScript kawaida.
Una kitu ambacho itabidi kukusanya wewe ES6 ya kawaida.
JavaScript kuna mengi ya kusonga sehemu una kufanya, hivyo kuna kitu ndiyo
aitwaye Yeoman, Yeoman.io.
Na hii ni mstari amri chombo kwamba itabidi kukusaidia jukwaa nje yako kuguswa
miradi kwa urahisi.
>> Hivyo unaweza kusoma kuhusu hili baadaye, lakini kuna baadhi ya zana
kwamba Yeoman inatoa.
Wao itabidi basi wewe kujenga kuguswa programu na kila kitu kujengwa katika.
Kama kutakuwa na wamejenga katika, vipengele kujengwa katika.
Ni itabidi transfoma yako kujengwa katika.
Wana mengi ya baridi mambo kujengwa moja kwa moja
kutumia mambo haya kuitwa jenereta.
>> Hivyo kusoma kuhusu hili kama wewe kama.
Tu kwenda juu ya Yeoman, Y-E-O-M-A-N, na unaweza kupata jenereta kama hizi.
Na kwa jenereta kama haya, wewe tu kama moja
ni wanandoa mstari amri amri.
Kutakuwa na jukwaa nje nzima kuguswa programu kwa ajili yenu.
Ni utapata kusambaza zote za mikono, na grunt kazi iliyofanywa kwa ajili yenu,
na hii ni kwa nini wewe tu kuzingatia juu ya kuandika tu katika kuguswa.
>> Hivyo kimsingi kujenga Kuguswa programu ni nontrivial.
Ni wired wote kwa pamoja, lakini kuna ni zana kwamba itabidi kufanya hivyo kwa ajili yenu.
Hivyo kama unataka kufanya kuguswa programu, jaribu kufanya hivyo kwa njia hiyo.
Kama unataka tu kufanya majaribio, unaweza kujaribu kutumia hii CodePen
kwa sababu hii ina CodePen wote kuguswa wiring.
Mimi tumefanya kazi yote kwa ajili yenu tayari.
>> Hivyo kama unataka kufanya kama uzalishaji na kutolewa kuguswa programu,
kujaribu moja ya jenereta hizi.
Kama unataka tu kucheza karibu, ni mara nyingi tu yenye thamani ya
kama kujaribu kucheza karibu juu ya CodePen hapa.
Sauti nzuri?
Baridi.
>> Hivyo hiyo ni yote ninayo.
Tena, kila kanuni na mifano ni kwenda kuwa kwenye tovuti hii hapa.
Hivyo, tena, hatukuwa kuzungumza kuhusu syntax sehemu kubwa ya kuguswa,
lakini kupata wale wote kidogo maelezo syntactical,
ni wote kwenda kuwa inapatikana katika tovuti hii hapa.
>> Hivyo Ningependa kupendekeza kama kuchukua hatua ya kwanza.
Kuiweka katika CodePen yako.
Jaribu kufanya kazi juu ya maamuzi kwa hatua ya pili.
Kuna hatua nne, na tu ona ambapo unaweza kupata kutoka kwamba.
>> Yoyote maswali zaidi, angalia nje ukurasa kwamba au barua pepe yangu.
Hiyo ni email yangu.
Lakini Ningependa upendo na kukusaidia na lolote maswali unaweza kuwa kuhusu kuguswa.
Hivyo, yep, hiyo ni yote ninayo.
Asante wote sana kwa kuangalia au kwa kuhudhuria.
Na mimi itabidi kuchukua maswali yoyote unaweza kuwa baada ya hili sasa.
Hivyo kuwashukuru wote kwa ajili ya kuangalia.