>> [MUSIC nagpe-play]
>> NEEL MEHTA: Narito ito napupunta.
>> Well, lahat ng tao, maligayang pagdating sa web apps ng hinaharap na may Reaksyon.
Ito ay CS50.
Ang pangalan ko ay Neel.
Ako TA para CS50 at isang sopomor sa Harvard College at ang isang tunay, tunay
passionate web developer.
Kaya ako tunay nakapupukaw na pakikipag-usap sa iyo ngayon,
kung nandito ka o sa bahay manood, tungkol Gumanti, na kung saan ay, muli
gaya ng sinabi ko, ang hinaharap ng web apps.
>> Kaya Gumanti ay isang web framework.
At bilang ako ay nagsasabi sa ilang mga tao dito,
isang framework ay lamang ng isang set ng mga kasangkapan na maaari mong gamitin
upang buuin at bumuo ng iyong web app.
At ang web apps, muli, mga website na interactive tulad ng Facebook,
Twitter.com, Instagram.com, ano man.
>> So Facebook ay isang web framework na ito ay binuo sa pamamagitan ng Facebook
isang taon ilang back-- Gumanti ay.
Ito ay dahil ito ay ginagamit sa Facebook sa kanilang mga mobile apps
at ang web app, Instagram.
Khan Academy ay isa pang kilalang maaagang gumamit ng Reaksyon.
>> Talagang Ito ay pagkuha lubhang popular.
Kung sakaling ikaw ay gumagamit ng mga bagay tulad ng anggular o Gulugod, ito ay ng parehong pamilya,
ngunit ito ay dahil sa ngayon madaig ang kanilang katanyagan.
Ito ay ang mainit na bagong bagay.
Ito ay talagang, talagang malaking.
>> At kaya Gumanti ay mabuti hindi lamang bilang isang web framework para sa mga interface ng gusali.
Ito ay mahusay para sa pagbuo ng web interface.
Mayroon din ng isang bagay tinatawag Gumanti Native na
hinahayaan kang bumuo ng mga interface para sa Android at iOS
at marahil iba pang mga platform sa hinaharap gamit lamang ang parehong JavaScript code.
Maaari mong gamitin ang eksaktong parehong JavaScript code upang mag-render ng mga website,
upang mabigyan ng Android apps at iOS apps.
>> Ito ay isang tunay, tunay nakapupukaw oras.
Ito ay isang tunay, tunay na cool na pagkakataon.
Ito ay talagang isang unibersal web tool sa pag-unlad interface,
kaya ito ay isang tunay, tunay mahalagang bagay na malaman.
At, bilang ay nagsasabi ako ng mga tao bago, ito, tingin ko,
ay pagpunta sa baguhin kung paano namin bumuo ng mga web apps magpakailanman.
Kaya ito ay marahil ng isang bit eksaherasyon, ngunit ako sa tingin ito ay isang magandang magandang bagay na malaman.
>> OK, kaya kung ano ay Gumanti?
Reaksyon ay isang framework na maaari mong gamitin ito para sa interface ng gusali.
Isang interface ay, muli, isang web page, i-right?
Kaya dito ang Instagram.com, gumagamit Reaksyon.
>> Reaksyon ay binuo sa ideya ng mga bahagi.
Bahagi ay isang HTML element sa steroid,
kaya isang elemento ng HTML ay tulad ng isang pindutan.
Ito ay isang talata.
Ito ay isang header, di ba?
At Instagram ay gamitin ang mga ito, ngunit ito Gagamitin din ng mga bahagi ng Reaksyon.
>> Gumanti sangkap ay souped-up elemento ng HTML
na mayroon ng kanilang sariling mga pag-uugali nilalaman sa loob ng mga ito.
Kaya, bilang isang halimbawa, maaari kaming magkaroon ng isang oras na sangkap, ang isang bahagi ng panahon,
na naglalaman ng tulad ng ang time stamp, alam mo,
isang bahagi profile na ay naglalaman ng mga larawan ng profile
at ang pangalan ng tao.
Maaari itong magkaroon ng isang tulad ng counter, na kung saan maaaring bilangin tulad ng bilang ng mga gusto,
at kung nag-click ka sa mga ito, makikita ito dagdagan ang bilang ng mga gusto.
Ang isang bahagi lamang ng isang grupo ng HTML code na
ay may ilang mga pag-andar nakabalot sa loob ng mga ito.
Kaya ito ay tulad ng isang elemento ng HTML sa steroid, tulad ng sinabi ko dati.
Maaari kang kumuha ng mga bahaging ito, at maaari mong ilagay ang mga ito nang sama-sama
upang gumawa ng mga bagong sangkap, sa kasong ito, ang isang bahagi ng post,
na naglalaman ng lahat ng mga bagay na ito.
Ito ay naglalaman ng Time, Profile, LikeCounter, siguro ang puna
at marahil ang imahe mismo.
At kaya web apps ay lamang na binuo sa pamamagitan ng pagkuha mga bahagi at inilagay ang mga ito nang magkakasama.
Isang Instagram feed ay walang iba kundi ng grupo ng mga posts isa-isa,
bawat post ay naglalaman ng tulad ng Time, Profile, LikeCounter, at iba pa.
Ito ay uri ng tulad ng pagbuo ng isang bahay.
Hindi mo na magtayo ng bahay mula sa itaas pababa.
Dadalhin ka components-- mo kumuha ng tulad ng mga banyo.
Maglaan ka ng bedroom-- dumikit mo ang mga ito sama-sama, at ikaw ay may isang bagong sangkap.
Mayroon kang isang bagong bahagi ng bahay.
>> Kaya gumanti ay lahat na binuo sa paligid ang ideya na ito ng mga sangkap na
mga interactive, na paturol.
Tulad ng sinasabi mo lamang kung ano ang isang profile ay, at ito ay nag-render ito.
Ang mga ito ay composable.
Maaari kang kumuha ng isang oras at isang profile, ilagay ang mga ito nang sama-sama, gumawa ng mas mahusay sa isang bagay.
At ang mga ito magagamit muli, kaya kung ikaw magkaroon ng source code para sa isang post,
maaari mong i-embed na kahit saan.
>> Maaari mong i-embed ng isang Instagram bagay sa iyong sariling website.
Maaari mong i-embed sa Facebook, halimbawa, hangga't ito ay gumagamit ng Gumanti rin.
Kaya sangkap ay tunay, tunay, tunay malakas na mga bloke ng gusali ng web
na maaaring gamitin kahit saan at ilagay magkasama upang gumawa ng bagong mga bloke ng gusali.
Iyan ang tunay, tunay mataas na antas ng pangkalahatang-ideya.
Kaya, muli, kung ikaw ay may anumang mga katanungan sa anumang punto
tungkol sa pilosopiya ng reactor, ang coding, na huminto sa akin, at ipaalam sa akin.
>> OK, kaya gumanti ay cool na dahil ito ay may iba't ibang paraan ng pagtingin
sa kung paano mo bumuo ng mga web apps.
Marahil narinig mo ng MVC, isang model sa iyo ng kontrol sa CS50 o ano man
iba pang mga pagsusuring klase mong gamitin.
At pinaka-frameworks ay binuo sa paligid ng ideya ng MVC.
Reaksyon ay hindi.
Gumanti ay binuo sa paligid ng ideya ng unidirectional daloy ng data
tulad ng nakikita sa pamamagitan ng tsart na ito o graphic dito.
>> Talaga, mayroon kang isang pinagmulan ng data.
At ang mga pinagmulan ng data ay magpasya kung paano i-lay out ang ilang mga bahagi.
At ang mga bahagi ay pagkatapos, kapag binago nila,
sila ay magsasabi sa pinagmulan ng data na baguhin.
>> Upang gamitin ang Instagram Halimbawa, maaaring mayroon ka
isang listahan ng mga post ng mga bagay tulad ng sa isang database o isang bagay.
Na ang mga data.
At pagkatapos ay ang aming mga bahagi post Dadalhin na data,
at gamitin ang data na iyon upang mag-render isang bagay sa screen.
Ano Iyan ang arrow mula sa data na bahagi ay,
at pagkatapos na parehong data ang ginagamit upang mailarawan ang isang grupo ng mga sangkap.
>> Sa Facebook Messenger, para Halimbawa, kung saan ay Gumanti,
maaari kang magkaroon ng isang listahan ng mga na mga mensahe bilang iyong source data.
At iyon ay render hindi lamang ang listahan ng mensahe
kundi pati na rin sa listahan ng mga kaibigan mo.
Mayroon kang count ang hindi pa nababasa.
Siguro din render ang Facebook bagay na ang dahilan sa ibaba ng Facebook.com.
Ang parehong data ay isang isang pinagkukunan ng katotohanan
at na nagiging sanhi ng maraming mga sangkap na nai-render.
At kapag ang isa sa mga sangkap ay nagbago,
nito ay babalik at ang mga pagbabago sa pinagmulan ng data.
>> Kang magpadala ng isang mensahe, i-right?
Na ang mga pagbabago sa mga pinagmulan ng data.
Basahin mo ang iyong mga mensahe, kaya mong itakda hindi pa nababasa sa 0.
Na ang mga pagbabago sa mga pinagmulan ng data.
At mapapansin na ang lahat ng mga ito ng isa palaso balik sa parehong data
source, sa gayon alam mo, bibigyan ng isang tiyak na hanay ng data,
alam mo kung ano ang page ay pagpunta sa hitsura.
Ito ay deterministic.
Alam mo, bibigyan ng ilang data, kung ano ang pahina ay pagpunta sa hitsura.
Maaari mong hulaan kung paano ito ng pagpunta sa kumilos at kung paano ang mga bagay ay pagpunta
sa trabaho kapag sila ay magkasama.
>> At kung ako ay isang milyong mga bahagi dito, ito ay kumilos sa parehong, karapatan?
Hindi mo nais na magkaroon ng anumang kakaiba interconnections.
Render One data sa isang milyong mga sangkap.
Isang milyong mga bahagi ng dati bumalik at i-edit ang data.
At kaya ito ay napakabuti.
Kami ay gusali composable, madaling scalable web apps.
>> Mayroon kang isang pinagmulan ng data, ang pinagmulan ng katotohanan.
Iyon ay nagsasabi sa iyong mga sangkap kung paano i-lay out ang pahina,
at ang mga sangkap ay hawakan interaction.
At kung gusto nilang baguhin mga bagay-bagay, pumunta lamang pabalik
at sabihin sa mga pinagmulan ng data na baguhin.
Magkaroon ng kahulugan?
Kaya Gumanti ay tungkol sa pag-unawa kung paano bumuo ng isang bahagi
at kung paano gumawa ng iyong component makipag-ugnayan sa labas ng mundo.
>> Ang pagsasagawa ng mga component interact sa labas ng mundo
gumagamit ng ibang technology tinatawag na pagkilos ng bagay, na
ay isang framework na idinagdag sa itaas ng Reaksyon.
Hindi namin pagpunta sa makipag-usap tungkol sa na.
Kami ay pagpunta sa makipag-usap higit pa tungkol sa, na ibinigay data, kung paano maaari mong i-render ang isang component?
>> At kaya Gumanti ay talagang cool na dahil ikaw Maaari itong gamitin sa anumang back end na gusto mo.
Kung mayroon kang tulad ng isang Python likod ng pagtatapos, kung ang iyong Python maaaring sabihin ang ilang mga data,
Gumanti maaari itong mag-render.
Kung ikaw ay walang JS output ng data, Gumanti ito nagpapakita.
Ruby rails up gamit data, Gumanti ito nagpapakita.
>> Kaya Gumanti ay karaniwang isang web view-- isang front end na may mga bahagi
para sa anumang mga mapagkukunan ng data ano pa man.
At kaya ng pagpunta mula sa pinagmulan ng data na gumanti sangkap ay medyo madali.
Pagpunta sa iba pang paraan ay isang maliit na mas mahirap.
Iyon ay gumagamit ng pagkilos ng bagay tulad ng nabanggit ko bago.
Hindi namin makuha sa na.
Susubukan naming mas pokus sa data-to-component side.
Sa ganitong paraan maaari kang gumawa ng cool, fun web apps.
Hindi nito maaapektuhan ang mundo sa labas para sa ngayon, ngunit iyan ay isa pang kuwento.
>> OK, kaya kung ikaw ay dito para sa aking huling seminar
malalaman mo na ang lahat ng mga code para sa mga talk ngayong araw ay magiging sa URL na ito
dito, paumanhin, ang URL na ito dito.
At talaga namin ang pagpunta upang pumunta sa pamamagitan ng apat na hakbang, siguro limang,
marahil ay hindi lima.
Susubukan naming ilipat sa pamamagitan ng apat na hakbang ng pagbuo ng isang sample Gumanti app.
At gayon ang lahat ng source code para sa bawat hakbang ng paraan
ay magiging dito mismo, kaya kung ikaw ay sumusunod na kasama sa bahay,
huwag mag-atubiling upang bumasang mabuti ang code na ito.
Kung ikaw ay sumusunod na kasama dito, makikita ay nagpapakita namin ito sa screen,
kaya huwag mag-alala tungkol dito.
Ngunit kung ikaw ay nasa bahay, huwag mag atubiling bisitahin ang website na ito.
At, oo, dapat ay maaari upang makakuha ng ang lahat ng mga code na gusto mo kailanman kailangan dito.
Kaya ito ay isang magandang cheat sheet pati na rin para sa iyong mga pakikipagsapalaran sa hinaharap na may Reaksyon.
Cool, kaya kung lahat ng tao kung sino ang dito, at kahit na kung ikaw ay nasa bahay,
hilahin pataas ang website na ito, is.gd/cs50react, walang capital, walang underscore, walang wala.
>> Makikita mo ang isang pahina na ganito isang maliit na piraso tulad nito.
Ito ay isang bagay na tinatawag na CodePen.
CodePen ay isang collaborative kapaligiran coding
na kung saan maaari kong isulat ang code dito, at makikita ito ay awtomatikong ipapadala sa iyo.
At sa ganitong paraan, maaari kong isulat code.
Maaari ko bang patakbuhin ang code dito.
>> Para example-- at kung reloads-- ito makita, Nauubusan na ako ng JavaScript code sa pahina
karapatan dito, at makikita ito Awtomatikong i-render ang isang web page
na may ganitong JavaScript code.
At kaya ito ay isang paraan para sa amin upang subukan ang code
talagang mabilis nang hindi na gumamit aming ID o gamitin ang aming mga lokal na makina
o kahit ano.
Ito ay isang mabilis na paraan para sa iyo upang mockup at subukan ang iba't ibang mga uri ng mga code.
>> Kaya ako pagpunta sa pagkuha ng Halimbawa code, paglalagay ng mga ito dito.
Kami ay pagpunta sa ay nagtatrabaho sa pamamagitan nito.
At kung ikaw ay sa bahay, sa iyo maaaring pull ito up pati na rin.
At mayroon akong naka-install Gumanti dito, kaya maaari mo lamang
isulat ang iyong sariling code dito, at subukan ito bilang iyong sariling playground.
>> Oo, kung lahat ng tao upang magbukas ang link na ito dito.
Pakibigyan ako ng isang thumbs up sandaling ikaw ay ito bukas.
Cool, cool cool.
May walang dito para sa ngayon, ngunit kami ay baguhin na sa lalong madaling panahon.
>> OK, kaya Gumanti ay isang JavaScript library, at dahil dito,
nangangailangan ng kaalaman ng JavaScript, kung saan ay ang web programming language.
At ito ay ginagamit para sa iba pang mga bagay ngayon masyadong ngunit lalo na ang mga web bumuo
wika, kaya kung hindi ka pamilyar sa na, basahin ang isang site na tinatawag na JSforCats.com.
Ito ay kahanga-hanga.
Maaari mong malaman ang JavaScript Sa kalahating oras.
Ito ay hindi kapani-paniwala.
>> Kaya bigyan ito ng isang basahin.
Kami rin ay may maraming mga HTML dito dahil ay pagdisenyo namin sa mga web page ng kurso.
Kaya't kung hindi ka pamilyar sa HTML, tingnan ang HTMLdog.com.
Sa tingin ko ang pag-aaral ng Gumanti ay isang milyong beses na mas madali kung mayroon ka nang
Alam bloke ng gusali.
Kung ikaw ay may mga bahagi, ito ay madaling gumawa ng isang mas malaking bahagi.
Iyan ay Gumanti wika para sa iyo.
>> Kaya't sige, at bigyan mga bagay na ito ng isang basahin.
I-pause ang video na ito.
Bigyan ito ng isang basahin kung ikaw ay sa bahay kung ikaw ay hindi
pamilyar sa HTML o JavaScript
OK, kaya kung ano ang kami ay pagpunta sa gawin ay kami ay pagpunta sa gawin
isang napaka-simpleng flashcard app gamit Reaksyon.
Kami ay pagpunta sa magkaroon ng isang flashcard.
Maaari mong i-flip ang card at pabalik.
At kami ay mayroon din ng isang listahan ng mga lahat ng mga card na mayroon kami,
at kung kami ay pakiramdam mapaghangad, upang tayo'y maging
magagawang lumipat sa pagitan kotse sa pamamagitan ng pag-click sa mga ito.
>> Ngunit ito ay, ang iyong mga hubad buto, isang napaka-simpleng Gumanti app.
At kaya ito ay talagang hindi mahalaga upang ipatupad,
ngunit kami ay pagpunta upang ipakita na, kung wala ka ito, ito ay tunay, tunay madali upang patagalin ito
kung ang ibang tao ay makakatulong sa iyo na may ito.
Kaya kami ay pagpunta upang pumunta sa pamamagitan ng apat na hakbang nagsisimula mula sa simula upang bumuo ito.
>> OK, kaya ang apat na hakbang, bibigyan namin ng magsimula sa unang hakbang.
Ang unang hakbang ay magiging gusali ng iyong unang component.
Tulad ng sinabi ko bago, isang sangkap sa Reaksyon ay lamang ng isang elemento ng HTML sa steroid.
Tinutukoy nito ang mga HTML at ang ilang mga pag-uugali, at ito
ay tukuyin kung paano ang mga tao maaaring makipag-ugnayan sa mga ito sa kung paano
ay ito ay may panloob na estado.
Tulad ng isang pindutan ay alam tulad ng kung paano maraming beses na ito ay nai-click, halimbawa,
at ito ay alam kung paano mag-ipon mismo out.
>> Kaya sabihin sige at bumuo ng aming unang bahagi ng paggamit ng JavaScript.
Kaya kung mukhang kakaiba ang syntax, iyan ay dahil ang uri ng ito ay.
Kaya, muli, kami ay pagpunta upang gumawa ng isang variable na tinatawag na
app gamit hayaan ang mga keyword, na gumagawa ng isang variable,
hayaan App pantay React.createClass.
>> Reaksyon ay isang library at may ang lumikha ng klase function.
At ang function na ito ay isang piraso ng code na kayo
ay maaaring gamitin upang lumikha ng isang bagong uri ng Gumanti component.
At kaya React.createClass gumagawa ng isang component,
at ang bahagi na ito ay magawa stuff.
Ang pangunahing bagay na maaaring gawin ito ay render ang isang bagay, i-render bilang isang function.
>> Muli, kung ito index ay hindi halata sa mo, inirerekomenda ko na pumunta ka sa JS para sa pusa
at suriin ito.
Ay na naka-zoom in na rin sapat?
Cool.
>> Kaya ang bawat component pangangailangan na magkaroon ng isang render function.
Sinasabi ng render function, ano ang gagawin ko i-print sa screen?
Ngunit ang mga bahagi ay walang silbi kung ito ay hindi
alam kung ano ang i-print sa screen, kaya kailangan mong magkaroon ng isang render function.
>> Kaya sa render bagay, ikaw kailangan lang upang ibalik ang ilang mga HTML.
At kung ano ang cool na mayroong isang bagay na tinatawag na
JSX, na kung saan ay isang extension ng JavaScript na ginagamit ng umepekto.
Ipaalam ito sumulat ka ng HTML sa loob ng iyong JavaScript, kung saan
tunog uri ng kakaiba kapag ka munang mag-isip tungkol sa mga ito,
ngunit ito ay gumagawa ng maraming kahulugan Pagkatapos.
Kaya maaari naming gawin ito.
Kung hindi ka pamilyar sa HTML, alam ko kami ay may isang div na may pangkalahatang layunin
lalagyan para sa mga bagay-bagay.
Maaari naming bumalik sa isang div, at sa loob ito div, maaari naming ilagay ang mga bagay-bagay.
>> Kaya sabihin nating gusto naming i-render lamang isang tuwid-up flashcard para sa ngayon.
Flashcard Ang, nais kong sabihin, ay magkakaroon ng tanong at sagot.
Kaya sa loob ng div, sabihin i-print out ng isang talata
na nagsasabing question-- Ano ang panghuli sagot sa buhay, ang daigdig?
At pagkatapos ay ang sagot ay magiging, siyempre, 42.
>> Iyon ay hindi makabuo ng mabuti sa lahat.
Oo, kaya talaga Maaari mo talagang magsulat ng HTML sa loob ng iyong JavaScript.
At ito ay magiging naka-print out sa screen.
Kaya sabihin subukan ito out.
>> Kaya't kami sa aming bahagi.
Kailangan nating sabihin sa Reaksyon upang ilagay ang mga bahagi sa screen
kaya React.render, kaya mapapansin na namin ituturing ng app tulad ng anumang iba pang mga elemento.
Isulat namin ito bilang ito ay isang HTML element.
Tulad ng sa halip na sabihing tulad ng img para sa mga imahe o p para talata,
isulat mo App, kaya App ay tratuhin tulad ng isang elemento ng HTML.
Tulad ng sinabi ko bago, ito ay isang elemento sa steroid.
>> Kaya mong i-render App, at ikaw bigyan ito ng isang lugar upang ilagay ito.
At ito ay kung paano mo magagawa sabihin dito kung saan sa ilagay ito.
Ako ay may ginawa ng isang simpleng div sa pahina na tinatawag na may isang ID ng pahina,
at na kung saan ang element ay pagpunta sa pumunta.
>> At hindi namin pagpunta upang tumakbo kasama ang HTML.
Karaniwang ito ay pagpunta upang makakuha ng ilagay sa loob ng mga ito sangkap ng pahina
na mayroon kami sa screen.
Kaya ito ay tumatakbo ang code na ito, at ito ay nakakakuha ito bagay sa screen, kaya dito tayo.
Ginawa namin ang aming mga unang Gumanti component.
>> Kaya lang bilang isang pagbabalik-tanaw, malumanay na ginawa namin isang bagong uri ng component, di ba?
Iyon ay kung ano ang React.createClass.
At sa bahagi na, kami ipinagbigay-alam ito sa kung ano ang dapat nitong gawin.
Sa tuwing ang bahagi na ito ay upang nakalimbag papunta sa screen,
ito ay i-print out ang div na may ang dalawang talata sa loob nito.
>> At kung ano ang ginawa namin, gumawa kami ng isang bagong app gamit ang notasyon angle bracket app.
Sinabi namin ito upang ilagay ito sa loob ng mga sangkap ng pahina.
At kaya kung ano ang ko, nilikha ito isang bagong app mula sa na template.
At pagkatapos ay sinabi ko ito sa render ito.
Kaya sinabi ito, OK, app, ano ang dapat kong i-print out?
App sabi, pumunta print out ang isang div may dalawang talata sa loob nito.
At voila, mayroong aming div na may dalawang talata sa loob nito.
Gumawa unawa sa ngayon?
>> Kaya, muli, ang buong hamon ng Reaksyon ay lamang ng pag-alam kung paano gumawa ng mga sangkap.
Paano gawin ang mga mga sangkap na sama.
Ngayon na iyong ginawa namin ang aming unang component, sabihin bumalik
at gumawa ng mga sangkap na napapasadyang.
Kaya alam mo kung paano sa HTML sa iyo ay maaaring magbigay sa iyong mga pindutan klase?
Maaari mong bigyan ang iyong mga anchor sa href.
Maaari mong bigyan ang iyong input ng isang uri, tama?
Maaari kang magbigay ng higit pang mga pasadyang properties sa lahat ng iyong mga elemento
upang gawin itong mas kawili-wili.
At kami ay maaaring talagang gawin ang eksaktong parehong bagay.
>> Kaya sabihin nating gusto namin ang aming app upang pumunta render ng anumang mga card.
Sa ngayon kami ay lamang render ng isang hardcoded card.
Alam namin na may isa lamang card ay maaaring gawin ito, kaya kami ay
pagpunta sa subukan at baguhin ito ngayon kaya na maaari lamang naming bigyan ito ng ilang card.
Makikita ito i-print out ang mga card.
>> Ala mong subukan at gawin ang iyong mga bahagi ng isang pangkalahatang layunin.
Kaya sa ganitong paraan ko maaaring i-email ito ang aking mga kaibigan at maging tulad ng,
kahit anong flashcard mayroon ka, feed lang ito sa dito,
at makikita ito gawin ito sa pamamagitan ng kanyang sarili.
Maaari mong ilagay ang iba pang mga mga bagay-bagay sa iyong sariling mga app.
>> Ngunit una, ni break na ito ipaalam up sa dalawang bahagi,
ngunit nais naming upang paghiwalayin ang mga card part-print mula sa aktwal na bahagi app.
Kaya kung ano ang maaari naming gawin ay namin maaaring baguhin ito mula sa App
upang CardView, lamang ng isang bagong pangalan para sa app,
at maaari naming gumawa ng isang bagong bahagi na tinatawag App,
huwag malito sa mga lumang App.
Mayroon din kaming mga createClass, at tulad sa HTML,
maaari mong nest Gumanti sangkap sa loob ng bawat isa.
>> Kaya sa render function, function bumalik CardView,
at ito ay ang eksaktong parehong bagay.
Tingnan kung bakit ito ay ang parehong bagay?
Sa halip ng pag-render lamang ang app na may div at pagpapares sa loob ng mga ito,
ang app nagpapagana ng CardView, at ang CardView nagpapagana ng div at talata.
Kaya ito ay ang aming unang halimbawa ng pugad ng mga elemento sa loob ng bawat isa.
Ba na magkaroon ng kahulugan?
Kaya, muli, kami ay may isang CardView element.
Mayroon kaming mga elemento app na ito ay mas malaki kaysa sa.
>> OK, kaya gusto namin ang aming CardView-- kung ikaw magbigay ng isang magandang CardView isang tiyak na card,
makikita ito i-print out para sa iyo, i-right?
Kaya una, kailangan naming gumawa ng isang card, kaya gumawa ng isang card object ipaalam.
Kaya ipaalam sa aking card equal-- kung ikaw ay ang lahat ng mga pamilyar na,
ito ay lamang ang notation-making tumutol sa JavaScript.
Ito ay uri ng tulad ng isang struct sa C, kaya gumawa kami ng isang card,
at kaya ngayon maaari naming ipasa ang card na ito bilang isang ari-arian o bilang isang katangian sa HTML
terminolohiya sa aming app.
Kaya maaari naming gawin ito, App ay katumbas ng card MyCard.
>> Alam mo kung paano sa input, mong gawin uri ng input ay katumbas ng text o pindutan
klase ay katumbas btn para bootstrap ,?
Parehong ideya, App card equals-- nakuha mo na ilagay ang braces here--
Katumbas App card MyCard, kaya ito sabi namin ang card na ito object.
Pupunta ako upang pumasa ito bilang ari-arian upang ang mga bahagi ng app.
At bahagi na ito app ay ma-access ang mga ito at gawin
kagiliw-giliw na mga bagay-bagay sa mga ito.
>> Kaya aming mga app ay magiging bibigyan ng isang card, kaya sa ngayon,
Mayroon ng mga app bigyan lamang ipaalam ang card sa CardView
sa sarili dahil tulad ng mga app na ito ay hindi pagpunta sa kung ano ang gagawin sa mga ito,
kaya kami na lang ibigay ito sa mga CardView.
Kaya makikita namin ipasa ito sa parehong paraan, card katumbas,
at sa gayon ang bawat bahagi ay maaaring ma-access ang mga bagay na ito ay ibinigay sa mga ito.
Maaari silang ma-access ang mga katangian na ibinigay sa mga ito
gamit ang syntax na ito, this.props.card.
>> Kaya kung ano ang mangyayari dito ay ikaw ay may MyCard object.
Pumasa ka ito sa app gamit App card ay katumbas MyCard.
Iyon card object ay ibinigay sa iyong app.
Maaari itong ma-access ang app bilang this.props.card.
Ito ay uri ng tulad ng isang imahe nakakaalam kung ano ang mga ito ay mga pinagmulan ay.
>> Alam ng app na ito kung ano ito ay card ay, at maaari itong gawin mga bagay-bagay sa mga ito.
Maaari itong gawin computations.
Ito ay maaaring gumawa ng mga pagpapasya batay off ng mga ito.
>> Para sa ngayon, ako ay pagpunta upang pumasa this.props.card papunta sa CardView.
Gumawa unawa sa ngayon?
Makikita ito maging mas makatuturan ngayon.
>> OK, kaya ngayon kami ay sa CardView.
Ang aming CardView, na ibinigay ng card, dapat i-print ang kanyang tanong at sagot.
Sa ngayon naka-print na lang namin ang ilang mga hardcoded tanong at sagot.
Kailangan namin upang malaman out-- kailangan namin upang hilingin ang card na ibinigay nila sa amin
ano ang tanong at sagot, at pagkatapos ay i-print ito out sa screen.
>> Kaya maaari naming gawin ito dito.
Sa render begin-- unang gawin ay katumbas.
Kaya kung ano ang ginagawa namin dito ay alam namin na ang mga card na ibinigay sa amin sa isang ari-arian,
right?
Ito ay ibinigay sa atin bilang isang input.
Tulad ng ito ay halos tulad ng argumento sa isang function.
Ang card ay isang argument halos sa CardView.
>> Susubukan naming kunin iyon, at ilagay ito sa tanong na variable.
Gumawa nagpunta bang ang sagot sa mga variable ng sagot.
Mga senyas na ang card upang sagutin.
At ngayon na kami ay may mga ito, sa halip ng pag-print out teksto na,
kami ay pagpunta upang i-print out kahit na ano sila ay nagbigay sa amin.
>> Kaya ito stuff-- kaya kami ay pagpunta upang ilabas Tanong Sagot.
Tingnan natin kung ito gumagana.
Cool, ni magbasa-basa sa mga ito upang ipaalam sa isa pang beses upang matiyak na.
>> Kaya ang aking card ay object card, at hindi na namin binibigyan na card sa app.
At ang app ay pagpunta sa gawin ang card at ibigay ito sa mga CardView.
At ito CardView sabi, kung ikaw bigyan ako ng anumang flashcard object,
Kukunin ko i-print ang tanong nito at ang sagot nito, di ba?
>> Kaya kung ano ang maaari kong gawin ay ako maaaring ipadala ang code na ito, ang unang
tulad ng 10 mga linya ng aking code, sa aking kaibigan.
Siya ay maaaring i-embed ang mga ito sa kanyang sariling application.
At habang kaniyang ginawa ang parehong bagay, tulad ng katumbas ito CardView card,
habang kaniyang nilikha ang CardView at ibinigay ang tamang impormasyon,
siya ay maaaring i-render ang kanyang sariling card.
At upang sa ganitong paraan, ito ay isang tunay na cool na paraan para sa iyo na bumuo ng
mga sangkap na ginagamit sa bawat isa, di ba?
Ang card na ito, maaari ko bang i-publish ito CardView sa internet,
at ang mga tao ay maaaring gamitin ito.
Kaya talaga, ito ay tulad ng isa sa mga karaniwang mga function sa C library.
>> Ito ay isang function na kung saan ang ang isang tao ay may nakasulat na ito.
Magbibigay sa iyo ng isang tiyak na input.
Makikita ito gumawa ng isang tiyak na output.
Hindi mo pag-aalaga kung paano ito gumagana sa loob.
Hangga't ikaw ay bigyan ito sa kanan input, ito ay gumawa ng tamang output.
>> At ang isang bahagi ay maaaring maging Akala ng parehong paraan.
CardView Ito ay tulad ng isang function library.
Kung ikaw ay bigyan ito ng ilang mga card bilang isang ari-arian, makikita ito
i-print out ang mga nilalaman ng card na iyon.
Tulad ng kung binago ko ang aking card sa sa halip ay magiging tulad ng kung ano ang 5 plus 37,
Ia-update ito nang naaayon.
Kaya sa pamamagitan lamang ng pagbabago ng mga input, ito ay makakakuha ng isang tiyak na output.
Kaya maaari mong isipin ng mga bahagi ng halos bilang mga function sa ganitong paraan, na kung saan
maaari mong ilagay ang sama-sama.
Makukuha mo ang input, tulad nito CardView bilang ang input, makakakuha ka ng output.
Sa kasong ito, output ay ang HTML.
Gumawa unawa sa ngayon?
Cool, kaya muli, ari-arian ay kung paano mo maaaring ipasa ang impormasyon
at sa labas ng mga bahagi.
>> OK, ni gumawa ito upang ipaalam sa bagay interactive.
Sa ngayon ito ay uri ng panganganak.
Ano ang [hindi marinig]?
Maaari mong i-print ang ilang mga out, ngunit na ang lahat ay maaaring gawin ito.
>> Kaya sabihin bumalik sa lumang tanong para lamang sa ngayon.
OK, kaya ngayon ang mga sangkap ay boring dahil ginagawa nila ang lahat,
sila makakuha ng input.
Sila ay gumawa ng output, di ba?
Iyon uri ng panganganak.
Gusto naming magkaroon ang aming mga sangkap upang ma-magkaroon
ang ilang mga uri ng mga panloob na estado, tandaan na tulad ng isang bagay.
>> Para sa isang flashcard, para sa Halimbawa, kung anong uri ng estado
baka gusto mong tandaan para sa isang flashcard?
Ano pansamantalang katayuan baka gusto mong tandaan
para sa isang flashcard sa isang flashcard app?
Madla: Kung ito ay tinanggal Binaligtad?
NEEL MEHTA: Oo, tama.
Kaya baka gusto mong panatilihin ang subaybayan ng mga mukha hanggang sa iyo o sa mga
mukha down ka sa card.
Sa Facebook, halimbawa, gusto mo nais na tandaan na kung saan sa mga feed ng balita
ikaw ay o nais sino ang profile ang ginagawa mo ngayon.
>> On Messenger, tulad ng kung ano ang text mo type sa input box, i-right?
Kung i-refresh mo ang pahina, ang layo na ito napupunta.
Ngunit hindi mo talagang pakialam.
Ito ay pansamantala lamang.
Oo?
>> Madla: [hindi marinig]
NEEL MEHTA: Tulad ng isang flash card, tulad ng maaari mo ang dapat makita
ang tanong side o ang sagot side?
>> Madla: OK.
>> NEEL MEHTA: Tulad ng isang magkabilaan flashcard, di ba?
Oo, kaya gusto mong Mayroon ito ideya ng ngayon
Mayroon akong mga katangian, na kung saan ay tulad ng input, ngunit estado, na kung saan ay pansamantalang, uh,
kung nasaan ka sa pahina, i-right?
Muli, sinabi ko sa Facebook Messenger, mayroon akong tulad ng kung saan ang tao
tinitingnan mo Facebook o kung sino ang profile, i-right?
>> Ito ay pansamantala lamang.
Ito ay mahalaga upang ipakita ang user kung ano ang nangyayari, ngunit i-refresh ang pahina.
Ito ay hindi talagang mahalaga.
Kaya ito ay pansamantalang estado, kaya namin ang lahat ng estado nito.
>> Kaya, muli, may estado at props.
Props ay ibinigay input mula sa iyong mga pinagmulan ng data.
Estado ay katulad lamang ng mga default.
Ito ay tulad ng mga bagay-bagay na gumagawa ng mga bagay na interactive.
>> Kaya sa aming CardView-- magkaroon ng ipaalam aming CardView-- kaya ito ay nice.
Ano kami ay pagpunta sa gawin dito, kami ay pagpunta upang hawakan CardView at tanging CardView.
At kaya na nakuha na ito, ang mga ito sa aking mga kaibigan hindi mapansin ang anumang pagkakaiba.
Sila ay hindi na kailangang baguhin anuman sa kanilang sariling mga code,
ngunit gusto nilang makita ang kanilang CardView Kaka souped up.
Iyan ay isang magandang bahagi tungkol sa mga bahagi.
>> OK, para sa ating CardView, sabihin subukan at subaybayan kung na phase up namin
o mukha pababa.
Sa Gumanti ginagawa namin ito sa pamamagitan ng unang na tumutukoy sa unang estado.
Saan magsisimula ang card?
>> Kaya maging isang function na tinatawag getInitialState gumana, at bumalik kami ng isang bagay.
Object na ito ay naglalaman ng ilang mga estado, at isang estado ay lamang ng isang pares ng key-value.
Tulad ng sa magturo, mayroon kang isang susi at isang halaga, mayroon kang tulad ng pangalan ay isang string.
>> Sa kasong ito, sabihin natin na front ay totoo.
Ito ay nagsasabi na kami ay may isang estado.
Isang bahagi ng estado ay isang katangian na tinatawag na front.
[Hindi marinig], kaya sa pamamagitan ng default, Ikinalulungkot namin sa harap ng card,
at maaari naming baguhin ito bilang i-flip namin ang card.
Magkaroon ng kahulugan?
>> OK, kaya sa render, sa ngayon, hindi namin Ipinapakita ang mga tanong at mga sagot.
Ngayon kung ano ang dapat naming gawin ay ipakita ang tanong
kung kami sa harap ng card kaya ang sagot ay para sa likod ng card.
Iyon ang dahilan kung bakit mo ang lahat ng gumawa ang card interactive.
Kaya sabihin subukan at upang ito dito.
Well, unang gumawa ng isang variable.
Maaari naming hilingin sa ngayon this.state.front.
Ma-access ang naming estado ang parehong namin access props, para this.state.front.
>> Kung hindi namin harap, at pagkatapos ng text ay this.props.card.question.
Kung hindi namin sa harap ng card, kami ay pagpunta sa subukan at grab
ang tanong mula sa card.
Kung hindi, kung hindi namin sa likod ng card, kung ano ang gagawin namin?
>> Madla: ang sagot?
>> NEEL MEHTA: Oo, kaya text katumbas this.props.card.answer.
Ngunit kung napansin mo, kami ay gumagamit ng estado upang gumawa ng desisyon
dahil ngayon ang component ang magiging hitsura ng iba't ibang
batay off kung paano ang mga nakikipag-ugnayan sa mga ito.
Kaya sa halip ng pag-print out ito, Makikita lamang i-print namin ang mga text.
Cool, kaya ngayon, tulad ng nakikita mo, makita lang namin ang tanong ng.
At kung babaguhin ko ang estado dito mano-mano sa harap ay false makuha namin 42 back.
>> Kaya, muli, ang bahagi na ito ay may sarili nitong estado.
Tulad ng isang pindutan nakakaalam kung ito ay pinindot o hindi,
alam ang bagay na ito kung ano ang sa sa harap o sa likod.
Sa pamamagitan ng default, ito ay sa harap.
At pagkatapos ay kung ito ay sa harap, Kukunin namin i-print out ang tanong.
Kung ito ay sa likod, bibigyan namin ng i-print out ang sagot.
Kaya, muli, ang mga impormasyon ibinigay ay pareho.
Mukhang lamang nito ang iba't ibang batay sa kung paano mo programa ito.
Kaya, halimbawa, Facebook Messenger, kahit na kung ikaw ay makakuha ng parehong pinagmulan ng data,
maaaring ito naiiba ang itsura dahil ang estado ay naiiba.
Ikaw ay naghahanap sa isang mensahe ng iba't ibang tao.
>> OK, kaya ito ay ang lahat ng mabuti at mabuti, ngunit ngayon kung ano ang tunay na
gawin tayong magagawang baguhin, kung aming card ay harap o likod.
Maaari naming gawin ito sa pamamagitan ng pagdaragdag ng isang flip button, ang isang pindutan upang ang card na
ay i-flip ang mga card na ito ay [hindi marinig].
Kaya sabihin magdagdag ng isang pindutan dito, ito button, at ang pindutan na ito ay sinasabi ng flip.
>> At kaya sa ngayon, ito ay hindi dapat gawin.
Ito lamang ang hitsura nice.
Ano ang maaari naming gawin ay maaari naming idagdag ang isang pag-click handler, onClick katumbas this.flip,
at kami ay tukuyin flip mamaya.
Pero talaga, onClick ay isang function na
makakakuha ng tinatawag na kapag nag-click ang mga ito.
>> Kaya ang button ay alam kapag ito ay na-click.
Napunta ito ay nai-click, ito ay i-flip ang card.
Ito ay uri ng tulad ng iyong pizza delivery guy.
Ikaw ay tulad ng, ang lahat ng mga karapatan, sa tuwing ang isang tao tawag sa akin, kukunin ko na maghatid ng pizza, di ba?
>> Irehistro ka tagapakinig na ito.
Makinig ka para sa isang kaganapan.
Ikaw makakuha ng tinatawag na, at kapag ang kaganapan ang mangyayari, gawin mo ng isang bagay.
Makakakuha ka ng pizza.
Sa kasong ito, kapag ikaw ay nag-click, i-flip ang card.
>> At kaya kailangan namin upang tukuyin ang isang function na ay i-flip ang card,
kaya makikita namin magsulat na karapatan dito, i-flip function.
At kaya kung ano ang tingin mo flip ay gawin?
Muli ito ay makakakuha ng tinatawag na kapag namin i-click ang pindutan ng flip.
Ano ang dapat gawin ang function flip?
>> Madla: Baguhin this.state.front mula sa tunay na hindi totoo, hindi totoo sa totoo.
>> NEEL MEHTA: Yep, para gumawa ng kahit anong this.front is-- harap estado ay.
Dumaan sa harap ng estado, kung ito ay totoo, gawin itong totoo.
Kung ito ay hindi totoo, ito totoo, di ba?
Kaya sabihin subukan iyon.
>> Hindi mo maaaring baguhin ang estado lamang sa pamamagitan ng paggawa this.state.
Hindi mo maaaring gawin ito.
Hindi mo maaaring gawin na.
Kailangan mong gamitin ang isang function tinatawag this.setState.
>> Kaya maaari mong sabihin this.setState front colon na ito kung saan, muli, ang exclamation
point ay nangangahulugan na ang kabaligtaran.
Hulaan ko kung ito. state.front ay totoo, ito ay maging totoo.
Kaya makikita namin-set ang estado mula sa tunay na false.
Kung ito ay hindi totoo, bibigyan namin ng itakda ito false sa totoo.
>> Paunawa lamang na itinakda namin at makakuha ng bahagyang sa ibang paraan, at sa gayon ay subukan ito ipaalam.
Bada bing, tingnan ang mga ito.
Ang pindutan ng flip ay ngayon lumipat ang harap sa likod ng estado.
>> At kaya narito ang kung saan nakikita mo ang isang maliit na piraso ng ang magic ng Reaksyon.
Tulad ng hindi namin ito sinabi sa mga ito upang muling i-render.
Kami ay hindi kailanman sinabi ito redraw kahit ano.
Kung ikaw ay gumagawa ito walang Reaksyon, gusto mo
may to-- gusto kapag ang button flip ay na-click,
gusto mo na kailangang sabihin mo ito sa manu-manong muling-render, di ba?
>> Reaksyon ay talagang cool sa na kung ikaw bigyan ito ng isang tiyak na kalagayan at mga katangian,
ito ay palaging i-render ang eksaktong parehong bagay.
At kaya kapag namin kailanman babaguhin namin ang estado at ang mga ari-arian,
gumanti lang muling nagpapagana ng buong bagay.
Ito alam na mayroong isang isa-sa-isang sulat
sa pagitan ng estado at mga parameter at HTML.
Kaya kapag alinman sa mga mga pagbabago sa pamamagitan ng sa pamamagitan ng isang hanay ng estado,
ito ay baguhin kung paano ang pay ay muling nai-render.
At kaya talaga Gumanti ay tulad ng naghihintay para sa iyo upang baguhin.
>> Tuwing ito ang mga pagbabago ng isang bagay, makikita ito muling i-render ang buong pahina.
At kung ito tunog walang kakayahan, ito ay dahil ito ay magiging,
ngunit gumanti ay gumagamit ng isang bagay tinatawag na isang Shadow DOM.
Sa halip ng pagguhit ng mga pahina nang direkta, ito mapigil ang mga virtual puno HTML sa memorya.
>> Alam mo, HTML ay tulad ng isang puno, tulad ng isang hierarchical istraktura ng data.
Ito ay para mapigil ang isang pekeng puno sa memory, at kahit kailan i-update mo ang pahina,
makikita ito gumuhit ng isa pang pekeng tree, at makikita ito makalkula
kung ano ang baguhin ang mga pangangailangan upang gawin ang mga page upang gawin ang dalawang puno pantay.
Kaya talaga, ito halos re-render ng isang pulutong.
At pagkatapos ay ito lamang ang gusto ang mga pagbabago sa pahina sa maliit na mga pag-aayos kung kinakailangan,
kaya ito ay tunay, tunay, tunay na mahusay.
>> Kaya talaga Gumanti habilin kapag binago mo ang isang bagay,
makikita ito muling i-render ang pahina virtually.
Makikita ito ng malaman kung ano ang kailangan kong baguhin upang gawin ang mga tunay na pahina sumalamin
ang virtual page, at makikita ito gawin iyon.
Iyan ang virtual DOM.
Ito ay isa sa mga pinakamalaking mga tampok ng Reaksyon.
>> Ba na magkaroon ng kahulugan?
May tanong?
Oo?
>> Madla: Paano gumagana ihambing pa rin sa MVC
na usapan natin ang tungkol sa bago tulad ng mga mapagkukunan.
>> NEEL MEHTA: Oo, ang tanong ay kung paano ito ihambing sa MVC?
Nagtanong ka tungkol sa mga mapagkukunan.
Well, makipag-usap tungkol sa kung paano ito function ipaalam.
>> Sa MVC, gusto mong i-update ang mga modelo.
Sa kasong ito gusto naming magkaroon ng isang modelo ng card.
Ang view ay magkakaroon ng button flip, at ang control
ay magkakaroon ng flip function.
Kaya tingnan ang mga nais sabihin ang controller upang i-flip flip.
Flip nais sabihin ang model na baguhin, di ba?
>> At kaya kapag gumawa ka ng isang MVC, ikaw makinig para sa mga modelo sa pagbabago,
at muling i-render mo ang view nang naaayon.
O ikaw na lang gusto may controller.
Maghintay para sa mga modelo na baguhin, at pagkatapos ay pumili at piliin ang isang bahagi ng tulad ng isang bagay
Baguhin.
Narito kami ay may isang bagay, ngunit sa isang malaking app,
ikaw ay may gusto matandaan kung ano ang pagbabago sa bawat isang lugar,
kaya ito ay isang maliit na nakakainis.
At kaya Gumanti ay nice dahil ito ay isang Shadow DOM.
Maaari itong bayaran sa makatarungan isulat na muli ang buong bagay.
Hindi mo na kailangang i-pili tulad ng hulaan kung ano ang i-update.
>> Sa Facebook kung gusto mo makakuha ng isang bagong mensahe, sa MVC,
gusto mo na kailangang tandaan, OK, baguhin ang mga bagay-bagay
sa tuktok ng pahina, ang icon ng mensahe.
Pop Din ng isang bagong window sa ibaba.
Ring gumawa ng bagong bagay sa na window.
Gayundin-play ng tunog.
>> Iyan ay isang pulutong ng mga bagay-bagay pagpunta sa labas at sa parehong oras.
At kaya kung hindi mo gusto magkaroon ng isang Shadow DOM, gusto mo
may gawin na mano-mano dahil hindi ka maaaring makakuha ng alisan ng mga buong pahina.
Hindi mo kayang, kaya wala kayong upang baguhin ang bawat bagay nang mano-mano,
na kung saan ay talagang nakakainis sa MVC.
>> Kaya upang maging mapag-impok, sila pili
i-update ang mga pahina, na kung saan ay mahusay, ngunit din nakakainis.
Sa Gumanti, dahil sa Shadow Dom, makakakuha ka ng parehong mga bagay-bagay para sa libreng.
Ito ay mahusay dahil ng Shadow DOM.
Bottleneck ay ina-update ang mga pahina.
Hindi ito ginagawa ng puno manipulasyon.
Makukuha mo ang mga kahusayan.
Mo ring makuha ang kadalian ng paggamit dahil kung muling isulat mo lamang ang buong pahina,
ngunit alam mo lang, ang lahat ng karapatan, ang mga bagay-bagay ay magiging isang lugar sa pahina.
Ito ay maaaring maging sa isang iba't ibang mga lugar, ngunit ito ay pagpunta sa maging sa pahina, i-right?
Kaya mo lamang muling-render ang buong bagay na halos,
at maaari kang gumawa ng isang pares mga pagbabago sa pahina ng kanyang sarili.
>> So, muli, sa MVC mo ay kailangang piliin ang
pagitan ng kadalian ng paggamit at kahusayan, at Gumanti, makakakuha ka ng parehong.
Kaya ito ay mas mahusay.
Magkaroon ng kahulugan?
Solid.
>> OK, ang makita ni makipag-usap ipaalam kaya hayaan nang kaunti tungkol sa 4 na hakbang,
kung paano namin maaaring i-embed na mga sangkap.
Kaya kami ay may ito sa ngayon.
Mayroon kaming aming cool na maliit na button.
Maaari naming i-flip ito sa likod at balik, at na ang lahat ng ginagawa nito.
Ipagpalagay natin na nais nating magkaroon ng isa pang component.
Ipagpalagay natin na ang ating flashcard app dapat naglalaman ng isang listahan ng lahat ng mga baraha
na mayroon ka, sa gayon ay nangangahulugan namin Dapat magkaroon ng isa pang component.
Well, tumawag siguro ito ng isang view ng listahan.
Gumawa ng isang view ng listahan Hayaan na coexists sa CardView,
at sa pagtingin na ito at CardView listahan ay gusto magtulungan.
At maaari mong pagsamahin ang mga ito upang gumawa ng aming app para sa iyo.
>> Kaya una, ni gumawa ng isang ipaalam ilang karagdagang card sa kanan.
Hayaan sabihin, kung anong mga cards?
At kaya lang hindi ko na kailangang magbutas sa iyo ng pag-type ito sa,
Lamang ako ng pagpunta sa kopyahin ito mula dito.
At kaya ako pagpunta sa hindi bigyan ito ng isa lamang card.
Pupunta ako upang bigyan ito ng isang hanay ng mga baraha.
Kaya una ang apps pagpunta sa break para sa ngayon.
Lahat ng karapatan, kaya kami ay pagpunta sa gumawa ito maaaring hawakan ng maramihang cards.
Kaya una, kami ay pagpunta upang bigyan ito, hindi lamang ng isang card ngunit isang hanay ng mga baraha,
tulad ng isang listahan ng mga baraha.
At sa kasong ito, kami ay may tatlo sa kanila.
>> Lahat ng karapatan, kaya kaya app ay pagpunta upang makakuha ng isang listahan ng baraha,
at ito ay pagpunta upang magpasya kung aling ang isa ay upang ipakita sa mga CardView.
Ang CardView maaari lamang render isa card, ngunit ang app
makakakuha ng isang listahan ng lahat ng mga baraha, di ba?
>> Kaya kapag figure out ka sa isa card na ibibigay sa CardView,
paano hulaan mo maaaring magawa upang gumawa ng desisyon tungkol sa kung aling card
Ipakita?
Upang bigyan ka ng isang pahiwatig, ito ay pansamantalang Ikaw ay tumitingin sa isang tiyak na card.
Kung i-refresh mo ang pahina, makikita mo pumunta lamang pabalik sa unang card.
Iyon ay OK dahil sa ito ay pansamantalang.
Ano ang pamamaraan na maaari naming gamitin?
>> Madla: Maaari kang gumawa ng isang variable kaya tulad ng nagkaroon ka ng harap.
Totoo ba ito, maaari mong Mayroon katumbas kasalukuyang card 1?
>> NEEL MEHTA: Oo, kaya kami ay nais na magkaroon ng estado, tama?
Gusto mong gamitin ang estado sa component upang malaman kung
na card ang gusto namin upang makakuha ng.
Tulad ng kami ay may isang listahan ng mga lahat ng mga card, bibigyan namin ng
gamitin ang estado upang malaman kung isa sa mga unang card,
pangalawang card, third card, at iba pa.
>> Kaya ang isang app sa gayon ang isang app ay makakakuha ng isang may getInitialState function,
getInitialState return function.
At kami lang sabihin activeIndex 0.
Kaya ngayon ang aming mga app na ito ay may sariling estado.
>> At kaya ngayon sa render, upang malaman kung isang card, sabihin pumunta lamang ni sa array
at grab ang mga bagay sa index iyon.
Pantay this.props.cards Pumili card this.state.activeIndex.
Kaya bilang makikita mo dito, ang mga props at ang estado ay aktwal na gumana nang magkasama.
Kaya ngayon na mayroon kami sa aming activeCard, kami ay tumawag ito activeCard,
at sabihin makita kung ito ay gumagana.
[Hindi marinig]
>> Oh, na noon ay isang error text.
Ah.
>> Cool, yep, kaya ngayon kami ay bumalik na kung saan kami ay bago, di ba?
Parehong lumang program maliban ngayon maaari naming suporta
isang listahan ng mga baraha, hindi lamang isa card.
At ngayon, muli, kung babaguhin namin ang activeIndex, maaari naming pumunta mula sa 0 hanggang 1,
at ngayon na second card, at pagkatapos ay nagpunta kami sa 0.
Kaya narito ang isang bagong souped-up na bersyon ng aming.
>> OK, sabihin magkaroon ng isang view ng listahan kaya ngayon hayaan na ay nagpapakita ng lahat ng mga card sa iyong programa,
kaya kami ay gumawa ng isang bagong tinatawag na component ListView.
Hayaan ListView katumbas react.createClass.
Kaya gusto namin na mag-render ng isang unordered ilista sa isang item sa listahan para sa bawat card.
At kaya kami ay may isang bungkos ng mga baraha.
Gusto naming ng isang item na listahan para sa bawat card, i-right?
Maaari naming gawin para sa isang loop o isang bagay upang gumawa ng isang bagong listahan ng item.
Ngunit ang paraan na gagawin mo ito sa Reaksyon, gumamit ng isang bagay na tinatawag na mapa.
Mapa ay isang kasangkapan o ng isang function na gamitin mo na para sa bawat item, ay tumatakbo ang ilang mga function,
tumatagal ng return halaga, at Binibigyan ka na bumalik.
>> Kaya bilang isang halimbawa, kami ay may mga array 1, 2, 3.map function-- at ito
ay takigrapya para sa isang function-- x arrow x beses x.
Ito sabi, para sa bawat number sa 1, 2, 3, dalhin ito.
Square ang mga ito, at bigyan ito pabalik.
Kaya kung ano ang tingin mo sa 1, 2, 3.map x papunta sa beses x
x likod ay nagbibigay sa iyo na ibinigay na ang function na ito ay
tumakbo sa bawat elemento ng array na.
>> Madla: 1, 4 9?
>> NEEL MEHTA: Oo, 1, 4, 9 dahil gawin mo 1 beses 1.
Iyon ay nagbibigay sa iyo ng isa.
Iyan ang unang elemento.
>> 2 beses 2 ay 4.
Iyan ay isang pangalawang elemento.
3 beses 3 ay 9.
Iyan ay isang ikatlong sangkap.
Magkaroon ng kahulugan?
Kaya mapa ay may isang pamamaraan mo gamitin sa functional programmers,
ang bagong estilo ng programming upang gawin ang isang bagay
sa bawat elemento sa iyong listahan.
At kaya ito tunog pamilyar.
Kami ay may isang listahan ng mga baraha.
Gusto naming upang makakuha ng isang item sa listahan para sa bawat isa, kaya kami na lang gamitin mapa dito.
Susubukan naming sabihin, hayaan list equals this.props, cards, mapa.
>> At kaya bibigyan ng isang card, hindi namin pagpunta sa bumuo ng isang item sa listahan
may mga nilalaman side na card ng mga ito.
Sabihin lang nais naming bigyan out tanong ang card upang card.question.
Kaya ang listahan na ito ay naglalaman ng isang array ng List Items li o
kung saan mayroong isang listahan item para sa bawat card,
at na naglalaman ng mga katanungan cards.
Magkaroon ng kahulugan?
>> Cool, kaya ngayon sabihin talagang i-print out na.
Kaya babalik kami ng isang ul.
Inside na unordered listahan, Makikita lamang stick namin ang buong listahan
na ibinigay sa amin.
Cool.
>> Lahat ng karapatan, kaya ngayon ito view ng listahan gumagana hanapin lamang.
Ang anumang mga katanungan tungkol sa mga view ng listahan?
Mayroon kang isang bungkos ng mga baraha.
Kikita ka ng isang item sa listahan para sa bawat card.
At ilagay ang mga ito sa loob ng isang unordered listahan, at magbibigay sa iyo ng mga ito pabalik.
Kaya ng kumilos upang i-embed naming ipaalam sa ngayon ito sa loob ng aming mga app,
upang maaari naming gawin ito, view ng listahan.
Ano argument na kami ay pumasa sa list view?
Ano properties bigyan namin ito?
Tandaan, kung ikaw ay bigyan ito ng grupo ng mga baraha,
ito ay gumawa ng sa listahan tingnan para sa mga cards.
Kaya kung ano ang gusto namin ipasa dito bilang ang argument?
Madla: Ang isang listahan ng mga baraha?
NEEL MEHTA: Oo, kaya cards katumbas this.props.cards, di ba?
At kaya lamang ang problema ay na maaari ka lamang
naka-isa top level na sangkap sa render, kaya nakuha mo na ibalot ito sa isang div.
Ito ay kakaiba.
Kaya sabihin makita kung na.
Na trabaho?
>> Oo, mayroong kang pumunta.
Kaya ngayon kami ay may isang listahan ng mga baraha sa ibaba,
at pagkatapos na namin ang aming CardView mismo sa itaas,
at na-flip sa pagitan ang dalawang panig ng card.
Ngayon ay na magkaroon ng kahulugan kung paano ginawa ko na?
Oo, kaya muli, kami ay may dalawang mga sangkap.
Ang unang bahagi ng mga kopya ang bawat card sa listahan.
Iyan ang view ng listahan.
At ang ikalawang bahagi mga kopya ng card na lang.
Kung ikaw ay bigyan ito ng isang tiyak na card, makikita ito i-print ang impormasyon tungkol sa card na
at hayaan mong i-flip nang pabalik-balik.
>> Kaya kung gusto namin, maaari naming subukan at makipag-usap tungkol sa pagdagdag ng ilang mga bagong tampok na ito.
Kung hindi, maaari naming makipag-usap ng kaunti pang tungkol sa mga bilis ng reactor,
o maaari naming sagutin mga katanungan na maaaring mayroon ka
dahil ito ay ang lahat ng mga pangunahing mga bahagi ng reaksyon na gusto kong makipag-usap tungkol sa.
Maaari naming sige.
Maaari naming sagutin ang mga katanungan.
Kahit anong gusto mo.
>> Madla: Maaari mong gamitin ang JSX sa normal JavaScript?
O ay na ang isang bagay na dumating na kasama ang [hindi marinig]?
>> NEEL MEHTA: Ang tanong ay maaari gamitin mo JSX sa normal JavaScript?
Ang sagot ay oo.
JSX ay lamang ng isang paraan ng ito ay tumatagal ng iyong JavaScript na may HTML sa loob ng mga ito,
at ito compiles sa JavaScript na ay walang HTML sa loob ng mga ito.
Kaya mapansin na- kaya mapapansin dito.
Ito ay mukhang mayroon ka tulad ng div at ikaw ay may mga bagay-bagay sa loob nito.
>> Iyon compiles sa JavaScript na tulad ng bumubuo ng parehong bagay.
Hulaan ko kung ano ako ay sinasabi na JSX ay lamang ng isang sintaktik, tulad ng ito ay
isang preprocessor para sa JavaScript marami tulad ng PHP ay isang preprocessor para sa HTML.
JSC ay isang preprocessor para sa JavaScript na hinahayaan
ilagay mo HTML sa loob ng iyong JavaScript.
At kaya kung ikaw ay may karapatan transformer kung saan ay isang bagay na tinatawag na [hindi marinig],
na kung saan ay ibahin ang anyo.
Ang karapatan preprocessor, Makikita ito sa inyo na gawin iyon.
>> Madla: [hindi marinig]
NEEL MEHTA: Karaniwan hindi mo na kailangan upang ilagay ang HTML sa loob ng JavaScript
maliban kung ang iyong ginagawa Reaksyon.
Ngunit maaari mo itong gawin pa rin.
Yep?
>> Madla: Sa tingin ko sa iyo ay inilarawan Reaksyon
bilang functional programing wika.
Ay pag-aaral Kami C sa CS50.
Ay C din ng isang functional na wika?
NEEL MEHTA: Kaya ang tanong ay tungkol sa functional
kumpara sa ibang bagay na tinatawag na mahalaga o pamamaraan programming.
Mayroong dalawang uri ng mga programa popular.
Isa ay tinatawag na pamamaraan, na kung saan ay tungkol sa lahat tulad ng paggawa ng mga utos,
at isa ay sa pagganap, na kung saan ay ang lahat ng tungkol sa pagkakaroon ng mga pag-andar at pagkakaroon
input at output ng mga iyon.
Reaksyon ay isang functional tularan.
C ay isang napaka pamamaraan tularan.
>> At bilang isang halimbawa, C halimbawa, hindi mo na gawin ito paturol paraan
ng paggawa ng mga programa, di ba?
Mayroon kang sabihin, i-print ito.
Baguhin ito istraktura ng data.
I-print ito.
Lahat ng ito ay tungkol sa mga utos.
>> Sa Gumanti, may hindi na ang maraming utos.
Lahat ng ito ay tungkol sa pagkakaroon ng bahagi kayo magkasama.
Sila ay tulad ng pag-andar.
Mayroon kang tulad ng isang function tinatawag CardView,
na kung saan ay isang function na may input, output,
at iba Gumanti ay ang lahat ng tungkol sa pilosopiya
amin ng having-- mayroon kang data.
Ipasa mo ito sa pamamagitan na ito algorithm, at ito makikita
HTML na output na kayo naka-print lamang ang mga pahina,
at kaya kailangan mong magtayo ito piraso ng piraso.
>> Kaya upang gumuhit ng isang talinghaga sa kung ano ang Sinabi ko bago, alam mo kung paano
sa Facebook kung ikaw ay makakuha ng mensahe, at piliin mo kung ano ang mga bahagi upang i-update,
na pamamaraan.
Ito ay mahalaga, di ba?
OK, Nakatanggap ako ng isang mensahe.
Baguhin ang account ni doon.
>> Pop ng isang window dito.
Baguhin ang account ni doon.
Gumuhit ito dito.
Iyan ay isang diskarte sa pamamaraan.
>> Iyan ang mga bagay tulad ng anggular, Boost, gulugod, iba pang mga Framework gamitin.
Reaksyon ay functional.
Ito ay isang iba't ibang mga paraan ng pag-iisip tungkol sa mga bagay.
Ito ay tumatagal ng mga ideya na ito ng may ni ipaalam function o mga algorithm na kayo
bigyan ito ng data.
Makikita ito ng sabihin ang lahat ng kung ano ito dapat, at ang computer
ay alagaan ng pagtimbang out.
Hindi mo na hawakan ito sa iyong sarili.
Ba na gumawa ng isang maliit na piraso ng kahulugan?
Oo?
>> Madla: Sa isang functional na wika, ang lahat ng bagay ang mangyayari nang sabay-sabay?
>> NEEL MEHTA: Hindi, mga bagay na mangyayari sa order.
Tulad dito mayroon pa rin order, ngunit ito ay hindi
mangyari sa order ng tulad ng purihin, command, command.
Ito ay nangyayari sa order ng function na nagbibigay sa iyo ng output.
Ilagay na sa isa pang function.
Ilagay na sa isa pang function, ang isa pang pag-andar.
>> Kung gagawin mo CS51, makikita mo matuto functional programa
isang maliit na sa labas ng saklaw ng mga ito.
Pero talaga, kung ano ang gumagawa Gumanti cool na ay hindi lamang
ang one-way na daloy ng data at ang mga virtual Dom,
kundi pati na rin ang ideya ng functional programming.
At functional programming ay tunay madali gumawa ng sulat at gumawa ng mga cool na bagay sa labas ng,
at ito ay tunay madali na mag-isip tungkol sa at dahilan tungkol sa.
Kaya ito ay isa pang mahusay na gumuhit ng mga Reaksyon.
Anumang higit pang mga tanong?
Oo?
>> Madla: Um, bakit gusto mo gamitin hayaan bilang laban sa var?
>> NEEL MEHTA: Kaya ang tanong ay bakit mo ginagamit ipaalam sa halip ng var?
Ito ay isang bagay na tinatawag na ES6 o ECMAScript 6.
Ito ay ang bagong bersyon ng JavaScript.
May isang grupo ng mga teknikal na dahilan, ngunit hayaan ay isang mas mahusay na bersyon ng var.
>> Ito ay kung paano ipinapahayag mo variable.
Maaari mong gamitin ang ipaalam.
Maaari mong gamitin ang var.
Hayaan ay may isang bungkos ng mga teknikal na reasons-- maaari mong tingnan ang mga ito
up later-- para sa kung bakit ito ay mas mahusay.
Karaniwang, ES6 ay may ilang magaling bagong syntax, ang ilang mga bagong tampok
sa itaas ng lumang JavaScript.
>> Kaya kami ay may tulad ng limang minuto.
Nais ko lamang na makipag-usap tungkol isa pang bagay real mabilis.
Kung nagkaroon ka ng anumang mga tanong, usapan natin ang tungkol sa mga ito pagkatapos na ito hayaan.
Subalit kaya lamang ang makakakuha ito nahuli sa camera, ako lamang
gustong makipag-usap ng kaunti tungkol sa kung paano mo talagang gamitin Kikilos sa iyong apps.
>> Kung pupunta ka dito, Facebook.GitHub.IO/react,
ito ay ang home page para sa Reaksyon, at na ito ay magpapakita sa iyo kung paano mo talagang gamitin
Kikilos sa iyong mga pahina.
Talaga, ito ay isang maliit na kumplikado sinusubukang i-install Reaksyon.
Ito ay hindi kasing-dali ng i-drag mo lang at drop ng isang JavaScript sa doon.
>> Mayroon kang magkaroon ng iyong mga transformer set up, na kung saan ay, tulad ng ito ay bago,
buksan ang iyong JSX sa ang normal JavaScript.
Ikaw ay may na bagay na makikita sumulat ng libro ES6 mong normal.
JavaScript may isang pulutong ng mga paglipat bahagi ng kailangan mong gawin, kaya may isang bagay
tinatawag Yeoman, Yeoman.io.
At ito ay isang kasangkapan na command line na idedetalye makatulong sa iyo na plantsa out ang iyong Reaksyon
proyekto madali.
>> Kaya maaari mong basahin ang tungkol sa mga ito sa ibang pagkakataon, ngunit may ilang mga tool
na Yeoman aalok.
Makikita nila hayaan kang lumikha ng isang Reaksyon app sa lahat ng bagay na binuo sa.
Tulad ng makikita ito ay binuo ng in, mga sangkap na binuo sa.
Makikita ito kung ang iyong mga transformer built in.
Sila ay may isang pulutong ng mga cool mga bagay-bagay na binuo sa awtomatikong
gamit ang mga bagay na tinatawag generators.
>> Kaya basahin ang tungkol sa kung gusto mo.
Pumunta lamang sa Yeoman, Y-E-O-M-A-N, at maaari mong mahanap generators tulad ng mga ito.
At sa pamamagitan ng generators tulad ng ng mga ito, gusto mo lamang ng isang
ay isang pares command line command.
Makikita ito ng plantsa sa labas ng isang buong Gumanti app para sa iyo.
Makikita ito makakuha ng lahat ng manual mga tubo, at igik trabaho tapos na para sa iyo,
at ito ang dahilan kung bakit ikaw lamang ang focus sa pagsusulat lamang ng sa Reaksyon.
>> Kaya karaniwang pagbuo ng isang Gumanti app ay nontrivial.
Ito ay naka-wire na ang lahat ng sama-sama, ngunit may mga kasangkapan na kailangan gawin ito para sa iyo.
Kaya kung nais mong gumawa ng isang Reaksyon app, subukan ang paggawa ng mga ito na paraan.
Kung gusto mo lamang na mag-eksperimento, maaari mong subukan ang paggamit ng ganitong CodePen
dahil ito CodePen ay lahat ng mga reaksyon ng mga kable.
Ginawa ko na ang lahat ng mga trabaho para sa iyo na.
>> Kaya kung nais mong gumawa ng tulad ng isang produksyon sa release Gumanti app,
subukan ang isa sa mga generators.
Kung gusto mo lamang upang i-play sa paligid, ito ay madalas na nagkakahalaga lamang
tulad subukang mag-play sa paligid sa CodePen dito.
Tunog mabuti?
Cool.
>> Kaya na ang lahat ng mayroon ako.
Muli, ang lahat ng mga code at mga halimbawa ay magiging sa website na ito dito.
Kaya, muli, hindi namin makipag-usap tungkol sa marami syntax ng Reaksyon,
ngunit upang mahanap ang lahat ng mga maliit syntactical detalye,
ang lahat ng ito ay magiging available sa website na ito dito.
>> Kaya gusto ko inirerekumenda tulad gawin ang unang hakbang.
Ilagay ito sa iyong CodePen.
Subukan ang nagtatrabaho sa paggawa ng ito sa ikalawang hakbang.
May isang ika-apat na hakbang, at lamang makita kung saan makakakuha ka ng mula sa na.
>> Anumang higit pang mga tanong, tingnan out na pahina o email sa akin.
Iyon ang aking email.
Ngunit Gusto kong tulungan ka sa anumang mga katanungan na maaaring mayroon ka tungkol sa Reaksyon.
Kaya, yep, na ang lahat ng mayroon ako.
Maraming salamat sa lahat napaka para sa nanonood o para sa mga nag-aaral.
At kukunin ko na gumawa ng anumang mga katanungan na maaaring mayroon ka, pagkatapos nito ngayon.
Kaya salamat sa iyo para sa lahat ng nanonood.