>> [MIZIK jwe]
>> NEEL Mehta: Isit la li ale.
>> Oke, tout moun, Byenveni nan sit apps nan tan kap vini la ak reyaji.
Sa a se CS50.
Non mwen se Neel.
Mwen se yon TA pou CS50 ak yon sophomore nan Harvard College ak yon trè, trè
pasyone sou sit pwomotè.
Se konsa, Mwen trè enteresan yo dwe pale ak ou jodi a,
si wi ou non w ap isit la oswa nan kay la l ap gade, sou Reyaji, ki se, ankò
jan mwen te di, tan kap vini an nan apps entènèt.
>> Se konsa, reyaji se yon fondasyon entènèt.
Ak jan mwen te di nan kèk moun isit la,
yon fondasyon se jis yon mete nan zouti ou ka itilize
yo estrikti ak bati app entènèt ou an.
Ak apps entènèt yo, ankò, sou sit entènèt ki entèaktif tankou Facebook,
Twitter.com, Instagram.com, kèlkeswa sa.
>> Se konsa, Facebook se yon fondasyon entènèt ki te devlope pa Facebook
yon ane koup back-- Reyaji se.
Li nan depi lè yo te itilize nan Facebook sou apps mobil yo
ak app wèb la, Instagram.
Khan Akademi se yon lòt enpòtan adoptant byen bonè nan Reyaji.
>> Li nan reyèlman te resevwa trè popilè.
Si ou janm sèvi ak bagay sa yo tankou angilè oswa Zo rèl do, sa a se nan fanmi an menm,
men li gen depi byen lwen depase popilarite yo.
Li nan bagay la cho nouvo.
Li nan reyèlman, reyèlman gwo.
>> Se konsa, reyaji se yon bon bagay pa sèlman kòm yon fondasyon entènèt pou interfaces bilding nan.
Li nan bon pou bati interfaces entènèt.
Genyen tou yon bagay rele Reyaji Alaska ki
pèmèt ou bati interfaces pou andwad ak yo
e petèt lòt tribin nan fiti lè l sèvi avèk jis menm bagay kòd la JavaScript.
Ou te kapab sèvi ak menm an egzak JavaScript Kòd rann sit entènèt,
rann android apps ak yo apps.
>> Li se yon tan trè, trè enteresan.
Li se yon opòtinite reyèlman, reyèlman fre.
Li nan reyèlman yon sit entènèt inivèsèl koòdone zouti devlopman,
se konsa li nan yon trè, trè bagay enpòtan yo konnen.
Epi, menm jan mwen te di moun ki anvan, sa a, mwen panse,
ki pral chanje ki jan nou bati apps entènèt pou tout tan.
Se konsa, li petèt yon ti jan ipèrbol, men mwen panse ke li nan yon trè bon bagay yo konnen.
>> OK, se konsa sa ki reyaji?
Reyaji se yon fondasyon ou ka itilize pou bati interfaces.
Yon koòdone se, ankò, yon paj wèb, dwa?
Se konsa, isit la nan Instagram.com, itilizasyon Reyaji.
>> Reyaji se bati sou la lide sou konpozan.
Yon eleman se yon HTML eleman sou estewoyid,
se konsa yon eleman HTML se tankou yon bouton.
Li se yon paragraf.
Li se yon header, dwa?
Ak Instagram pral sèvi ak sa yo, men li pral tou itilize eleman nan Reyaji.
>> Reyaji eleman yo souped-up eleman HTML
sa yo ki te konpòtman pwòp yo genyen nan yo.
Se konsa, kòm yon egzanp, nou te ka gen yon eleman tan, yon eleman tan,
ki pral gen tankou koupon pou achte nan tan, ou konnen,
yon eleman ki pwofil pral gen imaj la pwofil
ak non an nan moun nan.
Li ka gen yon vann san preskripsyon tankou, ki ka konte tankou ki kantite renmen,
epi si ou klike sou li, li pral ogmante kantite renmen.
Yon eleman se jis yon pakèt moun sou HTML kòd ki
gen kèk fonctionnalités vlope andedan nan li.
Se konsa, li la tankou yon eleman HTML sou estewoyid, jan mwen te di anvan.
Ou ka pran eleman sa yo, epi ou ka mete yo ansanm
fè nouvo eleman, nan ka sa a, yon eleman post,
ki gen tout bagay sa a.
Li ta gen Tan, Wofil, LikeCounter, petèt kòmantè a
e petèt imaj la tèt li.
Se konsa, apps entènèt yo se jis ki te konstwi pa pran konpozan ak mete yo ansanm.
Yon manje Instagram se pa gen anyen plis pase yon pakèt moun sou posts youn apre lòt,
chak pòs gen tankou Tan an, Pwofil, LikeCounter, ak sou sa.
Li nan kalite tankou bati yon kay.
Ou pa bati nan kay soti nan tèt la desann.
Ou pran konpozan ou pran tankou twalèt la.
Ou pran bedroom-- a ou bwa yo ansanm, epi ou gen yon eleman nouvo.
Ou gen yon pati nouvo nan kay la.
>> Se konsa, reyaji se tout bati toutotou ide sa a nan eleman ki
yo entèaktif, ki asèrtif.
Menm jan ak ou jis di sa ki yon pwofil se, epi li rann li.
Yo se Composable.
Ou ka pran yon tan ak yon pwofil, mete yo ansanm, fè yon bagay pi byen.
Apre sa, yo ap ki kapab itilize ankò, kidonk si w gen kòd la sous pou yon pòs,
ou te kapab Afiche ki nenpòt kote.
>> Ou ka Afiche yon Instagram bagay sou sit entènèt pwòp ou yo.
Ou ka Afiche nan Facebook, pou egzanp, osi lontan ke li sèvi ak reyaji kòm byen.
Se konsa, eleman yo se reyèlman, reyèlman, reyèlman blòk bilding gen anpil pouvwa, entènèt la
ki ka itilize nenpòt kote epi mete ansanm fè blòk bilding nouvo.
Sa a trè, trè a wo nivo BECA.
Se konsa, ankò, si ou gen nenpòt kesyon nan nenpòt ki pwen
sou filozofi a nan raktor a, kodaj, yo sispann m ', ak kite m' konnen.
>> OK, se konsa reyaji se fre paske li gen yon fason diferan pou kap
nan ki jan ou bati apps entènèt.
Ou te pwobableman tande pale de mv, se yon modèl ou kontwole nan CS50 oswa kèlkeswa sa
lòt sonde klas ou itilize.
Ak sa ki pi cadres yo bati alantou lide a nan mv.
Reyaji se pa vre.
Reyaji se bati alantou lide nan a uni koule done
jan yo wè pa tablo sa a oswa grafik isit la.
>> Fondamantalman, ou gen yon sous done.
Ak sous la done ap deside Ki jan yo mete deyò sèten konpozan.
Apre sa, eleman yo pral lè sa a, lè yo chanje,
yo pral di a sous done a chanje.
>> Pou itilize Instagram a egzanp, ou ta ka gen
yon lis nan pòs objè tankou nan yon baz done oswa yon bagay.
Sa done yo.
Lè sa a, eleman post nou an pral pran ke done,
epi sèvi ak ke done rann yon bagay sou ekran an.
Sa a ki sa flèch la soti nan done yo eleman se,
ak Lè sa a se ke done menm itilize rann yon pakèt moun sou konpozan.
>> Nan Facebook mesaje, pou egzanp, ki se reyaji,
ou ta ka gen yon lis mesaj kòm sous done ou.
Apre sa, ki ta rann pa sèlman lis la nan mesaj
men tou, lis la nan zanmi ou genyen.
Ou gen konte a lu.
Petèt tou rann bagay la Facebook sa a, se nan fon an nan Facebook.com.
Done a menm se yon sèl sous verite
ak ki lakòz yon anpil nan eleman yo dwe founi.
Chak fwa youn nan moun ki konpozan se chanje,
li ale retounen lakay yo epi chanje sous la done.
>> Ou voye yon mesaj, dwa?
Ki chanje sous la done.
Ou li mesaj ou a, se konsa ou mete lu nan 0.
Ki chanje sous la done.
Apre sa, remake ke tout moun sa yo nan yon sèl arrow pral tounen nan done la menm
sous, se konsa ou konnen, bay yon done sèten seri,
ou konnen ekzakteman ki sa a paj ki pral sanble.
Li nan detèrminist.
Ou konnen, yo bay done sèten, ki sa paj la ki pral sanble.
Ou ka predi ki jan li k ap pase yo konpòte ak ki jan bagay yo ap mache
nan travay lè yo ap mete tèt yo ansanm.
>> Men, si mwen te gen yon milyon dola eleman isit la, li ta konpòte menm bagay la tou, dwa?
Ou pa ta gen okenn konèksyon etranj.
Youn done rann yon milyon konpozan.
Yon milyon dola eleman t 'kapab tounen ladan l epi modifye done yo.
Se konsa, sa a se trè bèl.
Nou ap bati Composable, fasil évolutive apps entènèt.
>> Ou gen yon sèl sous done, sous la verite.
Ki di eleman ou Ki jan yo mete deyò paj la,
ak konpozan yo pral okipe entèraksyon.
Men, si yo vle chanje bagay sa yo, jis ale tounen
epi di sous la done a chanje.
Fè sans?
Se konsa, reyaji se tout sou konpreyansyon ki jan yo bati yon eleman
ak kouman yo fè eleman ou kominike avèk mond lan deyò.
>> Fè kominike nan eleman ak mond lan deyò
sèvi ak yon lòt teknoloji rele Flux, ki
se yon fondasyon ki te ajoute sou tèt Reyaji.
Nou pa ap ale nan pale sou sa.
Nou pwal pale plis toujou sou, yo bay done, ki jan ou ka rann yon eleman?
>> Se konsa, reyaji se vrèman fre paske ou ka sèvi ak li ak nenpòt ki fen tounen ou vle.
Si ou gen tankou yon fen tounen Piton, si Piton ou a ka krache soti kèk done,
Reyaji ka rann li.
Si ou pa gen okenn rezilta JS yo nan done, Reyaji rann li.
Ruby ray moute ak done, Reyaji rann li.
>> Se konsa, reyaji se fondamantalman yon sit entènèt view-- yon fen devan ak konpozan
pou nenpòt ki sous done tou.
Se konsa, pral soti nan sous done yo reyaji konpozan se trè fasil.
Ale nan lòt fason se yon ti kras pi rèd.
Ki sèvi ak Flux kòm mwen mansyone anvan.
Nou pa pral jwenn nan sa.
Nou pral konsantre plis sou a done-a-eleman bò.
Sa a jan ou ka fè fre, apps entènèt plezi.
Li pa pral afekte mond lan deyò pou kounye a, men sa a yon lòt istwa.
>> OK, se konsa si ou te isit la pou seminè dènye mwen
ou pral konnen ke tout nan kòd la pou pale jodi a ki pral yo dwe nan URL sa a
isit la, regrèt, sa a URL isit la.
Ak fondamantalman nou ap ale nan ale nan kat etap, petèt senk,
pwobableman pa senk.
Nou pral deplase atravè kat etap pou bati yon echantiyon Reyaji app.
Se konsa, tout kòd la sous pou chak etap nan wout la
a pwal dwa isit la, Se konsa, si w ap swiv ansanm nan kay la,
santi yo lib yo parkourir kòd sa a.
Si w ap swiv ansanm isit la, nou pral montre l 'sou ekran an,
Se konsa, pa enkyete sou li.
Men, si w ap nan kay la, santi lib yo ale sou sit wèb sa a.
Epi, Yeah, ou ta dwe kapab jwenn tout kòd la ou ta janm bezwen isit la.
Se konsa, li yon fèy twonpe bon osi byen pou avantur tan kap vini ou a ak reyaji.
Cool, kidonk si tout moun ki la isit la, e menm si w ap nan kay la,
rale moute sit entènèt sa a, is.gd/cs50react, pa gen okenn kapital, pa gen souliye, pa gen pa gen anyen.
>> Ou pral wè yon paj ki sanble yon ti jan tankou sa a.
Sa a se yon bagay yo rele CodePen.
CodePen se yon tèt ansanm kodaj anviwònman
ak ki mwen kapab ekri kòd isit la, ak li pral otomatikman voye ba ou.
Apre sa, nan fason sa a, mwen ka ekri kòd.
Mwen ka kouri Kòd isit la.
>> Pou example-- epi si li reloads-- wè, M 'ap kouri JavaScript Kòd nan paj la
dwa isit la, epi li pral otomatikman rann yon paj entènèt
ak sa a Kòd JavaScript.
Se konsa, sa a se yon fason pou nou eseye soti Kòd
vrèman rapid san yo pa gen yo sèvi ak ID nou an oswa sèvi ak machin lokal nou
oswa kèlkeswa sa.
Li se yon fason trè rapid pou ou pou w makèt ak tès soti diferan kalite kòd.
>> Se konsa, mwen pral yo dwe pran Kòd egzanp, mete l 'isit la.
Nou pwal yo dwe ap travay atravè li.
Epi si w ap nan kay la, ou ka rale sa a moute kòm byen.
Apre sa, mwen te deja enstale Reyaji isit la, kidonk, ou ka jis
ekri kòd pwòp ou a isit la, ak eseye li kòm lakou rekreyasyon pwòp ou yo.
>> Yeah, si tout moun louvri moute lyen sa a isit la.
Tanpri, ban m 'yon gwo pous moute yon fwa ou genyen li louvri.
Cool, fre fre.
Pa gen anyen la a pou kounye a, men nou pral chanje sa trè byento.
>> OK, se konsa reyaji se yon JavaScript bibliyotèk, ak jan sa yo,
mande pou konesans nan JavaScript, ki se lang nan pwogram entènèt.
Apre sa, li nan ke yo te itilize pou lòt bagay kounye a twò men prensipalman entènèt la devlope
lang, se konsa si ou se abitye avèk sa, li yon sit rele JSforCats.com.
Li nan bèl bagay.
Ou ka aprann JavaScript nan mwatye yon èdtan.
Li nan enkwayab.
>> Se konsa, bay li yon tèks.
Nou menm tou nou se yon anpil nan HTML isit la paske nou ap desine paj wèb nan kou.
Se konsa, si w ap abitye avèk HTML, tcheke deyò HTMLdog.com.
Mwen panse ke aprann Reyaji se yon milyon fwa pi fasil si ou deja
konnen blòk yo bilding nan.
Si ou gen eleman yo, li nan fasil fè yon eleman pi gwo.
Sa a Reyaji ak lang pou ou.
>> Se konsa, ale pi devan epi bay bagay sa yo yon tèks.
Pran yon ti pòz videyo sa a.
Ba li yon tèks si ou se nan kay si ou pa
abitye avèk HTML oswa JavaScript
OK, Se konsa, sa nou ap ale nan fè se nou ap ale nan fè
yon app trè debaz lè l sèvi avèk flashcard Reyaji.
Nou pral gen yon flashcard.
Ou ka baskile kat la retounen ak lide.
Epitou, n ap gen tou yon lis tout kat yo ke nou genyen,
epi si nou santi ou anbisye, nou ta kapab
kapab chanje ant machin pa klike sou yo.
>> Men, sa a se, nan fè ou zo, yon trè senp Reyaji app.
Se konsa, sa a se aktyèlman pa trivial aplike,
men nou ap ale nan montre ke, si ou fè sa a, li la trè, trè fasil pou yon ekstansyon pou li
si lòt moun ede w ak li.
Se konsa, nou ap ale nan ale nan kat etap kòmanse nan grate yo bati sa a.
>> OK, se konsa kat etap sa yo, nou pral kòmanse koupe ak premye etap la.
Premye etap la a pwal bati premye eleman ou yo.
Kòm mwen te di anvan, yon eleman nan Reyaji se jis yon eleman HTML sou estewoyid.
Li presize HTML a ak kèk konpòtman, epi li
pral presize ki jan moun ka kominike avèk li jan
li ta gen eta entèn yo.
Fè tankou yon bouton pral konnen ki jan anpil tankou fwa li a te klike pou egzanp,
epi li pral konnen ki jan yo mete tèt li deyò.
>> Se konsa nou ale pi devan epi bati nou an premye eleman lè l sèvi avèk JavaScript.
Se konsa, si sentaks la sanble etranj, sa a, se paske li kalite se.
Se konsa, ankò, nou ap ale fè yon varyab rele
app lè l sèvi avèk mo kle a se pou, sa ki fè yon varyab,
kite App egal React.createClass.
>> Reyaji se yon bibliyotèk epi li gen a kreye fonksyon klas la.
Ak fonksyon sa a se yon ti jan nan kòd ki ou
ka itilize yo kreye yon nouvo di ki kalite Reyaji eleman.
Se konsa, React.createClass fè yon eleman,
ak eleman sa a pral kapab fè bagay.
Bagay pwensipal lan li ka fè se rann yon bagay, rann kòm yon fonksyon.
>> Yon fwa ankò, si sa a endèks se pa evidan ak ou, mwen rekòmande ou ale sou JS pou chat
epi tcheke li soti.
Se ke agrandi nan byen ase?
Fre.
>> Se konsa, chak bezwen eleman gen yon fonksyon rann.
Fonksyon an rann di, ki sa mwen enprime sou ekran an?
Men, eleman an se initil si li fè sa pa
konnen sa yo dwe enprime sou ekran an, se konsa ou bezwen gen yon fonksyon rann.
>> Se konsa, nan rann nan bagay, ou jis bezwen retounen kèk HTML.
Ak sa ki nan fre se ke gen nan yon bagay yo rele
JSX, ki se yon ekstansyon pou JavaScript ki se itilize pa reyaji.
Li kite a ou ekri HTML andedan nan JavaScript ou a, ki
son kalite etranj lè ou premye panse sou li,
men li fè yon anpil nan sans apre sa.
Se konsa, nou ka fè sa.
Si w ap abitye ak HTML, mwen konnen nou gen yon div ak yon objektif jeneral
veso pou bagay.
Nou ka retounen yon div, ak andedan div sa a, nou ka mete bagay.
>> Se konsa nou di nou vle rann jis yon flashcard tou dwat-up pou kounye a.
Flashcard a, mwen ta ka di, pral gen yon kesyon ak repons.
Se konsa, andedan div sa a, se pou yo enprime soti yon paragraf
ki di question-- Ki sa ki se nan ultim repons nan lavi, linivè a?
Lè sa a, repons lan se pral fè, nan kou, 42.
>> Sa pa t 'vini byen nan tout.
Yeah, se konsa fondamantalman ou kapab reyèlman ekri HTML andedan JavaScript ou yo.
Lè sa a a pwal enprime deyò nan ekran an.
Se konsa, kite a eseye li soti.
>> Se konsa, nou gen eleman nou an.
Nou bezwen di Reyaji yo mete eleman nan sou ekran an
se konsa React.render, se konsa ke nou remake trete app tankou nenpòt ki lòt eleman.
Nou ekri li jan li te ye yon eleman HTML.
Fè tankou olye pou yo li di tankou img pou imaj oswa p pou paragraf,
ou ekri App, se konsa App se trete tankou yon eleman HTML.
Kòm mwen te di anvan, li nan yon eleman sou estewoyid.
>> Se konsa, ou rann App, epi ou bay li yon kote yo mete li.
Lè sa a se ki jan ou kapab di li ki kote yo mete li.
Mwen te kreye yon div senp sou la paj rele ak yon ID nan paj,
e ke sa a kote nan eleman k ap pase yo ale.
>> Epi nou pa ap ale nan kouri ak HTML.
Fondamantalman sa a ki pral yo ka resevwa mete andedan nan sa a eleman paj
ke nou gen sou ekran an.
Se konsa, li kouri Kòd sa a, epi li trase sa a bagay sou ekran an, se konsa isit la nou ye.
Nou gen tan fè premye nou an Reyaji eleman.
>> Se konsa, jis kòm yon rapèl, nou te fè dousman yon nouvo tip eleman, dwa?
Sa a ki sa React.createClass la.
Ak nan ki eleman, nou rakonte l 'ki sa li ta dwe fè.
Chak fwa eleman sa a se ap enprime sou ekran an,
li pral enprime soti div a ak de paragraf yo andedan nan li.
>> Ak sa ki nou te fè, nou te fè yon nouvo app lè l sèvi avèk notasyon a bracket ang app.
Nou rakonte l 'bay mete l' andedan eleman nan paj.
Se konsa, ki sa mwen te fè, li te kreye yon nouvo app soti nan ki modèl.
Lè sa a, mwen te di l 'bay rann li.
Se konsa, li te di, OK, app, sa ki ta mwen enprime soti?
App di, ale enprime soti yon div ak de paragraf andedan nan li.
Epi vwala, gen nan div nou ak de paragraf andedan nan li.
Fè sans byen lwen tèlman?
>> Se konsa, ankò, defi a tout antye nan Reyaji se jis konnen ki jan fè konpozan.
Ki jan yo fè nan eleman travay ansanm.
Kounye a ke nou te fè premye nou an eleman, se pou yo tounen
epi fè eleman customizable.
Se konsa, ou konnen ki jan nan HTML ou ka bay klas bouton ou a?
Ou ka bay lankr ou href la.
Ou ka bay entrain ou yon kalite, dwa?
Ou ka bay plis koutim pwopriyete nan tout nan eleman ou
fè li plis enteresan.
Apre sa, nou aktyèlman kapab fè egzak menm bagay la.
>> Se konsa nou di nou vle nou an app yo ale rann nenpòt ki kat.
Kounye a, nou jis rann yon kat dur.
Nou konnen gen nan sèlman yon sèl kat li ka fè, se konsa nou ap
ale nan eseye ak chanje sa a kounye a pou ke nou ka jis bay li kèk kat.
Li pral enprime soti kat la.
>> Ou dwe eseye, epi fè ou konpozan yon rezon trè jeneral.
Se konsa, fason sa a mwen te kapab voye yon imèl ba sa a zanmi m 'yo epi yo dwe tankou,
tou sa flashcard ou genyen, jis manje l 'nan isit la,
epi li pral fè l 'pou kont li.
Ou ka mete lòt bagay sa yo nan app pwòp ou yo.
>> Men, anvan, se pou yo kraze sa a moute nan de konpozan,
men nou vle separe kat la pati enprime soti nan pati a app vrè.
Se konsa, sa nou ka fè se nou ka chanje sa a soti nan App
CardView, jis yon nouvo non pou app a,
epi nou ka fè yon nouvo eleman rele App,
pa t 'dwe konfonn ak fin vye granmoun App a.
Nou te gen createClass yo, ak renmen an HTML,
ou ka fè nich Reyaji konpozan andedan nan youn ak lòt.
>> Se konsa, nan sa a fonksyon rann, fonksyon retounen CardView,
ak sa a se menm bagay la egzak.
Wè poukisa li a menm bagay la?
Olye pou yo rann jis app a ki gen div a ak appariement andedan nan li,
app a rann CardView la, ak nan CardView rann div a ak paragraf.
Se konsa, sa a se premye egzanp nou an nan eleman nidifikasyon andedan nan youn ak lòt.
Ki fè sans?
Se konsa, ankò, nou gen yon eleman CardView.
Nou gen eleman app ke li nan pi gwo pase.
>> OK, se konsa nou vle nou an CardView-- si ou bay yon bon CardView yon kat sèten,
li pral enprime soti pou ou, dwa?
Se konsa, premye, nou bezwen fè yon kat, kidonk kite a fè yon objè kat.
Se konsa, kite m 'equal-- kat si w ap tout yo konnen yo,
sa a se jis pou pran nan notasyon objè nan JavaScript.
Li nan kalite tankou yon struct nan C, se konsa nou te fè yon kat,
ak pou kounye a nou ka pase kat sa a kòm yon pwopriyete oswa kòm yon atribi nan HTML
tèminoloji nan app nou an.
Se konsa, nou ka fè sa, App kat egal myCard.
>> Ou konnen ki jan nan D ', ou fè kalite opinyon egal tèks oswa bouton
egal klas btn pou demaraj ,?
Menm lide, equals-- kat App ou te gen yo mete aparèy òtopedik isit lan--
Kat App egal myCard, kidonk sa a di nou gen sa a objè kat.
Mwen pral pase l kòm yon pwopriyete nan eleman nan app.
Lè sa a eleman app pral kapab jwenn aksè nan li epi li fè
enteresan bagay ak li.
>> Se konsa, app nou an a pwal bay yon kat, se konsa pou kounye a,
kite a gen app a jis bay kat la CardView nan
tèt li paske tankou app a se pa ale nan konnen ki sa fè ak li,
se konsa nou pral jis bay li nan CardView la.
Se konsa, nou pral pase l nan menm jan, kat egal,
ak pou chak eleman ka jwenn aksè nan ki te bay li bagay sa yo.
Yo kapab jwenn aksè pwopriyete yo sa yo ki te te bay nan li
lè l sèvi avèk sentaks sa a, this.props.card.
>> Se konsa, sa k ap pase isit la se ou gen objè a myCard.
Ou pase l 'nan app a lè l sèvi avèk kat App egal myCard.
Se ke objè kat bay app ou.
App a kapab jwenn aksè nan li kòm this.props.card.
Li nan kalite tankou yon imaj konnen sa ki li nan sous se.
>> App sa a ki konnen sa ki li nan kat se, ak li ka fè bagay ak li.
Li kapab fè kalkil.
Li ka pran desizyon ki baze sou nan li.
>> Pou kounye a, mwen te ale nan pase this.props.card sou CardView la.
Fè sans byen lwen tèlman?
Li pral fè plis sans kounye a.
>> OK, se konsa kounye a nou ap nan CardView.
CardView nou, yo bay kat la, yo ta dwe enprime soti kesyon li yo ak repons.
Kounye a, nou jis enprime soti kèk kesyon dur ak repons.
Nou bezwen konnen out-- nou bezwen mande kat la yo ke yo te ban nou
ki sa ki kesyon an ak repons, ak Lè sa a, enprime sa a soti nan ekran an.
>> Se konsa, nou ka fè sa isit la.
Nan rann begin-- premye fè egal.
Se konsa, sa n ap fè isit la se nou konnen ke kat yo yo ba nou nan yon pwopriyete,
dwa?
Li nan ban nou kòm yon opinyon.
Fè tankou li nan prèske tankou agiman nan yon fonksyon.
Kat la se yon agiman prèske nan CardView sa a.
>> Nou pral ekstrè sa,, li mete l 'nan kesyon an varyab.
Pou pi si repons lan te ale repons lan varyab.
Envit ke kat reponn kesyon an.
Epi, koulye a ke nou gen sa yo, olye pou yo enprime soti ke tèks,
nou ap ale nan enprime soti tou sa yo te ban nou.
>> Se konsa, sa stuff-- se konsa nou ap ale mete yo deyò Kesyon Repons.
Ann wè si sa a travay.
Cool, kidonk kite a etap atravè li yon lòt fwa ankò jis yo dwe asire w.
>> Se konsa, kat mwen an se kat objè, epi nou ap bay ke kat nan app a.
Ak app a se pral pran nan kat epi remèt li bay CardView la.
Apre sa, CardView sa a di, si ou ban m 'nenpòt objè flashcard,
Mwen pral enprime soti kesyon li yo ak repons li yo, dwa?
>> Se konsa, sa mwen te kapab fè se mwen kapab voye kòd sa a, premye a
tankou 10 liy nan kòd m 'yo, ak zanmi m' yo.
Li te kapab Afiche l 'nan aplikasyon pwòp tèt li.
Apre sa, osi lontan ke li te fè menm bagay la, tankou kat CardView egal sa a,
osi lontan ke li te kreye CardView nan e li te bay li enfòmasyon an dwa,
li te kapab rann kat pwòp tèt li.
Se konsa, fason sa a, li nan yon reyèlman fason fre pou ou bati
eleman ki itilize youn ak lòt, dwa?
Kat sa a, mwen te kapab pibliye CardView sa a sou entènèt la,
ak moun ki ta kapab sèvi ak li.
Se konsa, fondamantalman, li la tankou yonn nan nan fonksyon estanda nan bibliyotèk la C.
>> Li se yon fonksyon kote yon moun te ekri li.
Ou bay yon opinyon sèten.
Li pral pwodwi yon pwodiksyon sèten.
Ou pa pran swen ki jan li fonksyone intern.
Osi lontan ke ou bay li dwat la D ', li pral fè pwodiksyon an dwat.
>> Ak yon eleman ka te panse de menm jan an.
CardView sa a se tankou yon fonksyon bibliyotèk.
Si w bay li kèk kat kòm yon pwopriyete, li pral
enprime soti sa ki nan ki kat.
Fè tankou si mwen chanje kat mwen an olye pou nou fè tankou ki sa ki 5 plis 37,
li pral mete ajou kòmsadwa.
Se konsa, jis pa chanje D 'a, li vin yon pwodiksyon sèten.
Se konsa, ou ka panse a eleman prèske kòm fonksyon nan fason sa a, ki
ou ka mete ansanm.
Ou jwenn D ', tankou sa a CardView kòm D 'a, ou jwenn pwodiksyon.
Nan ka sa a, randman a se HTML a.
Fè sans byen lwen tèlman?
Cool, se konsa ankò, pwopriyete yo ki jan ou ka pase enfòmasyon
nan ak soti nan konpozan.
>> OK, se konsa kite a fè sa-a bagay entèaktif.
Dwa koulye a li nan kalite raz.
Ki sa ki se [fèbl]?
Ou kapab enprime kèk soti, men sa a tout li ka fè.
>> Se konsa nou tounen nan la fin vye granmoun kesyon jis pou kounye a.
OK, se konsa kounye a sa yo konpozan yo raz paske tout yo fè sa,
yo jwenn opinyon.
Yo fè pwodiksyon, dwa?
Sa a kalite raz.
Nou vle gen nou an konpozan pou kapab gen
kèk kalite nan eta entèn yo, tankou sonje yon bagay.
>> Pou yon flashcard, pou egzanp, ki kalite nan eta
ta ka ou vle sonje pou yon flashcard?
Ki sa Estati Tanporè ta ka ou vle sonje
pou yon flashcard nan yon app flashcard?
ODYANS: Si li a te ranvèrse?
NEEL Mehta: Yeah, dwa.
Se konsa, ou ta ka vle kenbe tras nan yo ou fè fas a monte oswa yo
ou fè fas a desann sou kat la.
Sou Facebook, pou egzanp, ou ta vle sonje ki kote nan manje a nouvèl
moun ou ye oswa renmen moun ki nan pwofil n'ap fè kounye a.
>> Sou Messenger, tankou sa tèks ou tape nan ti bwat la D ', dwa?
Si ou rafrechi paj la, li ale lwen.
Men, ou pa reyèlman sousye.
Se jis yon ti tan.
Yeah?
>> ODYANS: [fèbl]
NEEL Mehta: Tankou yon flash kat, tankou ou ka wè
bò kesyon oswa sou kote repons lan?
>> ODYANS: OK.
>> NEEL Mehta: Tankou yon de-sided flashcard, dwa?
Yeah, se konsa ou vle gen ide sa a nan kounye a
Mwen gen pwopriyete yo, ki se tankou entrain, men eta, ki se pou yon ti tan, en,
kote ou ye a sou paj la, dwa?
Yon fwa ankò, m 'te di nan Facebook Messenger, mwen gen tankou ki moun
w ap gade Facebook oswa moun ki nan pwofil, dwa?
>> Sa a se sèlman tanporè.
Li enpòtan yo montre itilizatè a sa k ap pase, men rafrechi paj la.
Li pa reyèlman gen pwoblèm.
Se konsa, li eta tanporè, se konsa nou tout li leta yo.
>> Se konsa, ankò, gen nan leta ak akseswar.
Akseswar yo bay opinyon soti nan sous done ou.
Eta a se jis tankou défaut.
Li nan jis tankou bagay ki fè bagay la entèaktif.
>> Se konsa, nan nou an CardView-- kite a gen CardView-- konsa nou an li te bèl.
Ki sa nou ap ale nan fè isit la, nou ap ale manyen CardView epi sèlman CardView.
Se konsa, zanmi m 'ki te resevwa sa a, yo pa ta remake nenpòt diferans.
Yo pa ta gen yo chanje nenpòt nan pwòp Kòd yo,
men yo ta wè yo CardView te souped leve.
Sa se yon pati bèl sou konpozan.
>> OK, se konsa nan CardView nou an, se pou yo eseye ak kenbe tras nan si wi ou non nou ap faz moute
oswa fè fas a desann.
Nan Reyaji nou fè sa pa premye espesifye eta inisyal la.
Ki kote kat la kòmanse?
>> Se konsa, gen yon fonksyon rele getInitialState fonksyone, epi nou retounen yon objè.
Objè sa a gen kèk eta, ak yon eta se jis yon pè kle-valè.
Tankou nan Esplike, ou gen yon kle ak yon valè, ou gen tankou y'ap nonmen non se yon fisèl.
>> Nan ka sa a, kite a di devan se verite.
Sa a di ke nou gen yon leta yo.
Youn eleman ki nan eta a ki se yon atribi rele devan.
[Fèbl], se konsa pa default, nou ap nan devan an nan kat la,
epi nou ka chanje sa a jan nou baskile kat la.
Fè sans?
>> OK, se konsa nan rann, kounye a, nou ap ki montre kesyon an ak repons lan.
Kounye a ki sa nou ta dwe fè se montre kesyon an
si nou ap sou devan an nan kat la pou repons lan se pou do a nan kat la.
Se poutèt sa ou tout fè kat la entèaktif.
Se konsa, kite a eseye ak sa a isit la.
Oke, premye jis fè yon varyab.
Nou ka mande kounye a this.state.front.
Nou gen aksè eta menm nou nan akseswar aksè, se konsa this.state.front.
>> Si nou ap devan, Lè sa a, tèks se this.props.card.question.
Si nou ap sou devan an nan la kat, nou ap ale nan eseye ak pwan
kesyon an ki soti nan kat la.
Sinon, si nou ap sou do a nan kat la, ki sa nou fè?
>> ODYANS: Repons lan?
>> NEEL Mehta: Oui, se konsa tèks egal this.props.card.answer.
Men, si w remake, nou ap sèvi ak eta a pran yon desizyon
paske kounye a eleman nan pral gade diferan
ki baze sou ki jan sa yo kominike avèk li.
Se konsa, olye pou yo enprime soti sa a, nou pral jis enprime soti tèks la.
Cool, se konsa kounye a, menm jan ou wè la a, nou wè sèlman kesyon an.
Men, si mwen chanje eta a isit la manyèlman yo kanpe devan se fo nou jwenn 42 tounen.
>> Se konsa, ankò, sa a eleman gen eta pwòp li yo.
Fè tankou yon bouton konnen si wi ou non li a te bourade oswa ou pa,
bagay sa a konnen ki sa ki sou devan an oswa sou do an.
Pa default, li la sou devan an.
Lè sa a, si li nan sou devan an, nou pral enprime soti kesyon an.
Si li nan sou do a, nou pral enprime soti repons lan.
Se konsa, ankò, enfòmasyon an bay se menm bagay la.
Li jis sanble diferan ki baze sou ki jan ou pwogram li.
Se konsa, pou egzanp, Facebook mesaje, menm si ou jwenn sous la done menm,
li ta ka gade diferan paske eta a se diferan.
W ap chèche nan yon mesaj diferan moun nan.
>> OK, se konsa sa a se tout byen epi yo bon, men kounye a sa ki nan aktyèlman
fè nou kapab chanje, si kat nou an, se devan oswa tounen.
Nou ka fè sa lè yo ajoute yon baskile bouton, yon bouton nan kat la ki
pral baskile kat la si li nan [fèbl].
Se konsa, kite a ajoute yon bouton isit la, sa a bouton, ak bouton sa-a pral di baskile.
>> Se konsa, kounye a, li pa fè anyen.
Li jis sanble bèl.
Ki sa nou ka fè se nou ka ajoute yon klike kap okipe, xonclick egal this.flip,
epi n ap defini baskile pita.
Men, fondamantalman, xonclick se yon fonksyon ki
vin rele lè itilizatè a klik li.
>> Se konsa, bouton an pral konnen lè li te konn mete klike.
Te ale li a te klike, li pral baskile kat la.
Li nan kalite tankou ou livrezon pitza nèg.
Ou se tankou, tout dwa, chak fwa yon moun rele m ', mwen pral delivre pitza, dwa?
>> Ou enskri koute sa a.
Ou koute pou yon evènman.
Ou jwenn yo rele, ak lè a evènman rive, ou fè yon bagay.
Ou jwenn pitza.
Nan ka sa a, lè w ap klike, ou baskile kat la.
>> Se konsa, nou bezwen defini yon fonksyon ki pral baskile kat la,
se konsa nou pral ekri ke dwa isit la, baskile fonksyon.
Se konsa, ki sa ou panse baskile pral fè?
Yon lòt fwa ankò sa a vin rele lè nou klike sou bouton an baskile.
Ki sa ki ta baskile nan fonksyon fè?
>> ODYANS: Chanjman this.state.front soti nan vre nan fo, fo vre.
>> NEEL Mehta: Oui, se konsa pran tou sa this.front is-- eta a devan se.
Pran eta a devan, si li la vre, fè li fo.
Si li nan fo, fè l 'vre, dwa?
Se konsa, kite a eseye sa.
>> Ou pa ka chanje eta jis pa fè this.state.
Ou pa ka fè sa.
Ou gen yo sèvi ak yon fonksyon rele this.setState.
>> Se konsa, ou ka di this.setState devan kolon kote sa a, ankò, esklamasyon nan
pwen vle di opoze an.
Mwen devine si sa a. state.front se vre, li pral vire fo.
Se konsa, nou pral mete eta a soti nan vre nan fo.
Si li nan fo, nou pral mete l 'fo vre.
>> Jis remake ke nou mete epi pou yo jwenn yon ti kras yon fason diferan, e konsa kite a eseye sa a.
Bada bing, gade nan sa a.
Bouton an baskile pral kounye a chanje devan la nan do leta.
>> Se konsa, isit la nan kote ou wè yon ti kras nan majik la nan Reyaji.
Fè tankou nou pa janm rakonte l 'li nan re-rann.
Nou pa janm rakonte l 'rdesine anyen.
Si w ap fè sa san yo pa reyaji, ou ta
te to-- renmen lè a bouton baskile se klike,
ou ta gen yo di l 'bay manyèlman re-rann, dwa?
>> Reyaji se reyèlman fre nan ke si ou bay li yon eta ak sèten pwopriyete yo,
li ap toujou rann egzak menm bagay la.
Se konsa, lè nou tout tan tout tan nou chanje eta a ak pwopriyete yo,
reyaji jis re-rann tout bagay la.
Li konnen ke gen nan yon yon sèl-a-youn korespondans
ant leta ak paramèt ak HTML.
Se konsa, chak fwa swa nan tout sa yo chanjman pa nan yon eta seri,
li pral chanje ki jan nan se peye re-founi.
Se konsa, fondamantalman, se tankou Reyaji ap tann pou ou a chanje.
>> Chak fwa li chanje yon bagay, li pral re-rann paj la tout antye.
Men, si li son rezèvwa, li a paske li ta dwe,
men reyaji sèvi ak yon bagay rele yon lonbraj Dom.
Olye pou yo fè desen paj la dirèkteman, li kenbe pye bwa a HTML vityèl nan memwa.
>> Ou konnen, HTML se tankou yon pye bwa, tankou yon estrikti done yerarchize.
Li kenbe yon pye bwa fo nan memwa, ak nenpòt lè ou mete ajou paj la,
li pral trase yon lòt fo pye bwa, epi li pral kalkile
sa chanje li bezwen fè nan paj fè de pie egal-ego.
Se konsa, fondamantalman, li nòmalman re-rann yon anpil.
Lè sa a, li sèlman renmen chanje a paj nan reglaj ti kòm sa nesesè,
se konsa li a trè, trè, trè efikas.
>> Se konsa, fondamantalman Reyaji pral nenpòt lè ou chanje yon bagay,
li pral re-rann paj la nòmalman.
Li pral konnen sa ki mwen bezwen chanje fè paj la reyèl reflete
paj la vityèl, epi li pral fè sa.
Sa a Dom lan vityèl.
Li nan youn nan pi gwo a karakteristik nan Reyaji.
>> Ki fè sans?
Nenpòt kesyon?
Yeah?
>> ODYANS: Ki jan konpare toujou yo mv a
ke nou te pale osijè de anvan tankou resous.
>> NEEL Mehta: Yeah, kesyon an se li montre kouman li konpare ak mv?
Ou mande sou resous yo.
Oke, kite la pale sou fason li fonksyon.
>> Nan mv, ou ta mete ajou modèl la.
Nan ka sa a nou ta gen yon modèl kat.
View nan ta gen nan bouton baskile, ak kontwòl nan
ta gen fonksyon an baskile.
Se konsa, gade nan ta di nan kontwolè yo baskile baskile.
Flip ta di nan modèl chanje, dwa?
>> Se konsa, lè ou fè yon mv, ou koute pou modèl la chanje,
epi ou re-rann gade nan kòmsadwa.
Ou, ou jis gen nan renmen gen kontwolè a.
Rete tann pou modèl la chanje, ak Lè sa a chwazi epi chwazi yon pati nan tankou yon bagay
a chanje.
Isit la nou gen yon sèl bagay, men nan yon gwo app,
ou gen renmen sonje sa chanjman ki fèt nan tout kote yon sèl,
se konsa li a yon ti kras anmèdan.
Se konsa, reyaji se bèl paske li gen yon lonbraj Dom.
Li kapab peye jis reyekri bagay la tout antye.
Ou pa oblije oaza tankou devine kisa mete ajou.
>> Sou Facebook si ou renmen jwenn yon mesaj nouvo, nan mv,
ou ta gen yo sonje, OK, chanje bagay sa yo
nan tèt yo nan la paj, mesaj icon nan.
Epitou pòp yon lòt fenèt nan pati anba nan.
Epitou fè yon bagay tou nèf nan ki fenèt.
Epitou jwe yon son.
>> Sa se yon anpil nan bagay pral soti nan menm tan an.
Se konsa, si ou pa fè sa gen yon lonbraj Dom, ou ta
gen fè sa manyèlman paske ou pa ka debarase m de paj la tout antye.
Ou pa kapab peye, se konsa ou gen chanje chak bagay manyèlman,
ki se reyèlman anmèdan nan mv.
>> Se konsa, nan lòd yo dwe ékonomik, yo oaza
aktyalizasyon paj la, ki se efikas, men tou, anmèdan.
Nan Reyaji, paske nan lonbraj la Dom, ou jwenn tou de bagay sa yo pou gratis.
Li nan paske efikas nan lonbraj Dom la.
Konstriksyon an se à paj la.
Li nan pa fè manipilasyon a pye bwa.
Ou jwenn efikasite nan.
Ou jwenn tou fasilite nan itilize paske si ou jis ekri paj la an antye,
men ou jis konnen, tout dwa, bagay sa yo yo pral yo dwe sou paj la yon kote.
Li ta ka nan yon kote ki diferan, men li pral yo dwe sou paj la, dwa?
Se konsa, ou jis re-rann bagay la tout antye nòmalman,
epi ou ta ka fè yon koup chanjman nan paj la tèt li.
>> Se konsa, ankò, nan mv ou ta gen yo chwazi
ant fasilite la itilize ak efikasite, ak reyaji, ou jwenn tou de.
Se konsa, li pi bon.
Fè sans?
Solid.
>> OK, se konsa kite a wè se pou yo pale yon ti kras sou etap 4,
ki jan nou ka Afiche konpozan.
Se konsa, nou gen dwa sa a kounye a.
Nou gen fre bouton ti kras nou an.
Nou ka baskile li retounen lakay yo epi soti, e ke sa a tout li fè sa.
Se pou nou di nou vle gen yon lòt eleman.
Se pou nou di app flashcard nou an ta dwe gen yon lis ki gen tout kat yo
ki di ou gen, se konsa ke vle di nou ta dwe gen yon lòt eleman.
Oke, petèt rele li yon lis vi.
Se pou yo fè yon lis View ki koègzist ak CardView a,
ak sa a lis vi e CardView pral renmen travay ansanm.
Epi ou ka konbine yo fè app nou an pou ou.
>> Se konsa, premye, se pou yo fè yon koup plis kat dwat.
Se pou nou di, ki sa kat?
Epi jis Se konsa, mwen pa bezwen te fè ou ak sezisman li nan,
Mwen jis ale nan kopi li soti isit la.
Se konsa, mwen pral pa bay li jis kat yon sèl.
Mwen pral bay li yon etalaj de kat.
Se konsa, premye apps yo ale nan kraze pou kounye a.
Tout dwa, se konsa nou pwal fè sa a kapab okipe kat miltip.
Se konsa, premye, nou ap ale nan bay li, pa sèlman yon sèl kat men yon etalaj de kat,
tankou yon lis ki gen kat.
Ak nan ka sa a, nou gen twa nan yo.
>> Tout dwa, se konsa se konsa app se pral jwenn yon lis kat,
epi li k ap pase yo deside ki youn nan montre nan CardView la.
CardView a kapab sèlman rann yon kat, men app a
vin yon lis tout kat yo, dwa?
>> Se konsa, lè ou konnen yon sèl kat pou m 'bay CardView,
ki jan ou ta devine ou ka kapab pran yon desizyon sou ki kat
yo montre?
Pou bay ou yon allusion, li la pou yon ti tan Ou pral gade yon kat sèten.
Si ou rafrechi paj la, ou pral jis ale tounen nan premye kat la.
Sa a OK paske li nan yon ti tan.
Ki sa ki teknik nou ta ka itilize?
>> ODYANS: Ou te kapab fè yon varyab Se konsa, jis tankou ou te gen devan.
Èske sa se vre, ou te kapab gen kat aktyèl egal 1?
>> NEEL Mehta: Yeah, se konsa nou vle gen eta, dwa?
Ou ta sèvi ak leta nan la eleman eseye figi konnen
ki kat fè nou vle jwenn.
Fè tankou nou gen yon lis ki gen tout kat yo, nou pral
itilize eta a figi konnen youn nan premye kat la,
dezyèm kat, twazyèm kat, ak sou sa.
>> Se konsa, yon app pou yon app pral jwenn yon gen fonksyon an getInitialState,
getInitialState fonksyon retou.
Epitou, n ap jis di activeIndex 0.
Se konsa, kounye app nou an ki gen li nan pwòp eta a.
>> Se konsa, koulye a rann, eseye figi konnen yon kat, se pou yo jis ale nan etalaj la
ak pwan bagay la nan ki endèks.
Chwazi kat this.props.cards egal this.state.activeIndex.
Se konsa, kòm ou wè isit la, akseswar yo ak eta a aktyèlman ap travay ansanm.
Se konsa, kounye a ke nou gen activeCard nou an, nou pral rele li activeCard,
e kite yo wè si sa a travay.
[Fèbl]
>> Oh, sa ki te yon erè tèks.
Ah.
>> Cool, YEP, se konsa kounye a nou te tounen nan kote nou te vini anvan, dwa?
Menm pwogram fin vye granmoun eksepte kounye a nou ka sipòte
yon lis ki gen kat, pa sèlman kat yon sèl.
Epi, koulye a, ankò, si nou chanje nan activeIndex, nou ka ale ki ant 0 a 1,
e kounye a, ke dezyèm kat, ak Lè sa a nou te ale nan 0.
Se konsa, isit la nan yon nouvo souped-up vèsyon an nou an.
>> OK, se konsa kounye a kite a gen yon lis View ki montre tout kat yo nan pwogram ou an,
se konsa nou pral fè yon nouvo eleman rele ListView.
Se pou ListView egal react.createClass.
Se konsa, nou vle rann yon unordered lis ak yon atik lis pou chak kat.
Se konsa, nou gen yon pakèt moun sou kat.
Nou vle yon sèl lis atik pou chak kat, dwa?
Nou te kapab fè yon pou riban oswa yon bagay yo fè yon lis nouvo atik.
Men, wout la ou fè l 'nan Reyaji, sèvi ak yon bagay yo rele kat jeyografik.
Map se yon zouti oswa yon fonksyon ou itilize ke pou chak atik, kouri kèk fonksyon,
pran valè retounen, ak ba ou ki tounen.
>> Se konsa, kòm yon egzanp, nou gen etalaj la 1, 2, fonksyon-3.map ak sa a
se steno pou yon fonksyon-x flèch x fwa x.
Sa a di, pou chak nimewo nan 1, 2, 3, pran li.
Kare l ', li bay li tounen.
Se konsa, ki sa ou panse 1, 2, 3.map x ale nan x fwa
x ba ou tounen bay ki fonksyon sa a se
kouri sou chak eleman nan ki etalaj.
>> ODYANS: 1, 4 9?
>> NEEL Mehta: Oui, 1, 4, 9 paske ou fè 1 fwa 1.
Ki ba ou yon sèl.
Sa a eleman an premye.
>> 2 fwa 2 se 4.
Sa se yon eleman dezyèm fwa.
3 fwa 3 se 9.
Sa se yon eleman twazyèm.
Fè sans?
Se konsa, kat jeyografik gen yon teknik ou itilize nan pwogramasyon fonksyonèl,
style nan nouvo nan pwogramasyon fè yon bagay
bay chak eleman nan lis ou a.
Se konsa, sa a son yo konnen yo.
Nou gen yon lis ki gen kat.
Nou vle yo ka resevwa yon atik lis pou chak yon sèl, se konsa nou pral jis itilize kat jeyografik isit la.
Nou pral di, se pou lis egal this.props, kat, kat jeyografik.
>> Se konsa, bay yon kat, nou ap ale nan jenere yon atik lis
ak sa kat la sa bò nan li.
Se pou nou jis di nou vle bay soti kat yo kesyon konsa card.question.
Se konsa, lis sa a gen yon etalaj de LI la oswa Lis Atik
kote ki gen nan yon sèl lis atik pou chak kat,
ak ki gen kesyon an kat.
Fè sans?
>> Cool, se konsa kounye a kite a aktyèlman enprime ki deyò.
Se konsa, nou pral retounen yon ul.
Anndan ke lis unordered, nou pral jis bwa lis la tout antye
yo ke yo te ban nou.
Fre.
>> Tout dwa, se konsa kounye a sa a lis View travay jis jwenn.
Nenpòt kesyon sou lis gade nan?
Ou gen yon pakèt moun sou kat.
Ou fè yon atik lis pou chak kat.
Epi ou mete yo andedan yon unordered lis, epi ou ba l 'tounen.
Se konsa, kounye a kite a aji konsa nou Afiche sa a andedan nan app nou an,
pou nou ka fè sa, lis vi.
Ki sa ki agiman nou pase nan lis View?
Ki sa ki pwopriyete nou bay li?
Sonje byen, si ou ba li yon pakèt moun sou kat,
li pral fè lis la wè pou kat sa yo.
Se konsa, sa ki ta nou pase isit la tankou agiman an?
ODYANS: Yon lis nan kat?
NEEL Mehta: Yeah, se konsa kat egal this.props.cards, dwa?
Se konsa, pwoblèm nan sèlman se ke ou ka sèlman
vire yon sèl tèt eleman nivo nan rann, se konsa ou te gen yo vlope l 'nan yon div.
Li nan etranj.
Se konsa, kite a wè si sa.
Ki travay?
>> Oui, gen ou ale.
Se konsa, kounye a nou gen yon lis nan kat la nan pati anba a,
ak Lè sa a nou gen nou an CardView tèt li sou tèt,
ak ki pral baskile ant de kote sa yo nan kat la.
Koulye a, fè sa fè sans ki jan m 'te fè sa?
Yeah, se konsa ankò, nou gen de konpozan.
Premye eleman simagri yo soti chak kat nan lis la.
Sa a lis gade nan.
Men dezyèm eleman nan simagri soti sèlman sa kat.
Si ou bay li yon kat sèten, li pral enprime soti enfòmasyon sou ke kat
epi kite ou baskile retounen ak lide.
>> Se konsa, si nou vle, nou ka eseye epi pale sou ajoute kèk karakteristik nouvo nan sa a.
Sinon nou ka pale yon ti jan plis sou a vitès la nan raktor,
oswa nou ka reponn kesyon ou ta ka genyen
paske sa yo, yo tout nan pati yo nwayo a reyaji ke mwen vle pale sou.
Nou ka ale pi devan.
Nou ka reponn kesyon yo.
Nenpot sa ou vle.
>> ODYANS: Èske ou ka sèvi ak JSX nan nòmal JavaScript?
Ou se ke yon bagay ki vin rive ak [fèbl a]?
>> NEEL Mehta: Kesyon an se ka ou itilize JSX ak nòmal JavaScript?
Repons lan se wi.
JSX se jis yon fason pou li pran ou JavaScript ki gen HTML andedan nan li,
epi li compiles nan JavaScript ki pa gen HTML andedan nan li.
Se konsa, remake that-- konsa remake isit la.
Sa a parèt tankou ou gen tankou div epi ou gen bagay andedan nan li.
>> Sa compiles JavaScript ki tankou jenere menm bagay la.
Mwen devine sa m ap di se ke JSX se jis yon Massachusetts Institute of Technology, tankou li nan
yon preproseseur pou JavaScript anpil tankou PHP se yon preproseseur pou HTML.
JSC se yon preproseseur pou JavaScript ki pèmèt
ou mete HTML andedan nan JavaScript ou yo.
Se konsa, si ou gen transfòmatè a dwa ki se yon bagay yo rele [fèbl],
ki pral transfòme.
Preproseseur an dwa, li pral kite ou fè sa.
>> ODYANS: [fèbl]
NEEL Mehta: Anjeneral ou pa bezwen yo mete HTML andedan nan JavaScript
sof si ou fezon Reyaji.
Men, ou ka fè l 'de tout fason.
Oui?
>> ODYANS: Mwen panse ke ou te dekri Reyaji
kòm yon lang pwogramasyon fonksyonèl.
Nou te ap aprann C nan CS50.
Èske C tou yon lang fonksyonèl?
NEEL Mehta: Se konsa, kesyon an se sou fonksyonèl
kont yon lòt bagay rele enperatif oswa pwosedi pwogram.
Genyen de kalite pwogram popilè.
Youn yo rele pwosedi, ki se tout sou tankou fè kòmandman,
ak se yon sèl fonksyonèl, ki se tout sou li te gen fonksyon epi ki gen
opinyon ak pwodiksyon nan sa yo.
Reyaji se yon paradigm fonksyonèl.
C se yon paradigm trè pwosedi.
>> Apre sa, kòm yon egzanp, C pou egzanp, ou pa fè fason sa a asèrtif
nan fè pwogram lan, dwa?
Ou gen vle di, enprime sa a.
Chanje estrikti sa a done.
Enprime sa a.
Se sou tout kòmandman.
>> Nan reyaji, gen nan pa ke anpil kòmandman.
Li nan tout sou li te gen konpozan ou mete ansanm.
Yo ap tankou fonksyon.
Ou gen tankou yon fonksyon rele CardView,
ki se yon fonksyon ki gen D ', pwodiksyon,
ak pou reyaji se tout sou filozofi sa a
nou nan having-- ou gen done.
Ou pase l nan sa a algorithm, epi li pral
HTML pwodiksyon ke ou jis enprime paj la,
ak se konsa ou gen bati l 'moso pa moso.
>> Se konsa, fè desen yon metafò nan sa Mwen te di anvan, ou konnen ki jan
sou Facebook si ou jwenn yon mesaj, epi ou chwazi sa pati nan aktyalizasyon,
sa a, se pwosedi.
Li nan enperatif, dwa?
OK, mwen te resevwa yon mesaj.
Se pou nou chanje kont la.
>> Se pou yo pòp yon fenèt isit la.
Se pou nou chanje kont la.
Se pou yo trase sa a isit la.
Sa se yon apwòch pwosedi.
>> Sa a ki sa bagay sa yo tankou angilè, Pouse, Zo rèl do, lòt cadres itilize.
Reyaji se fonksyonèl.
Li se yon fason trè diferan nan panse sou bagay sa yo.
Li pran ide sa a nan kite a gen fonksyon oswa algoritm ki pral ou
bay li done.
Li pral krache soti sa li ta dwe, ak òdinatè a
pral pran swen nan peze deyò.
Ou pa okipe li tèt ou.
Ki fè yon ti kras nan sans?
Yeah?
>> ODYANS: Nan yon lang fonksyonèl, tout bagay k ap pase nan yon fwa?
>> NEEL Mehta: Non, bagay sa yo rive nan lòd.
Fè tankou isit la gen nan toujou lòd, men li pa fè sa
rive nan lòd de tankou bat bravo, lòd, lòd.
Sa rive nan lòd de fonksyon ba ou pwodiksyon.
Mete sa nan yon lòt fonksyon.
Mete sa nan yon lòt fonksyon, yon lòt fonksyon.
>> Si ou fè sa CS51, ou pral aprann pwogram fonksyonèl
yon ti kras soti nan sijè ki abòde lan sa a.
Men, fondamantalman, sa ki fè Reyaji fre se pa sèlman
yon sèl-fason done koule nan ak Dom lan vityèl,
men tou, ide sa a nan fonksyonèl pwogram.
Ak pwogramasyon fonksyonèl se trè fasil yo konpoze, epi fè fre bagay soti nan,
ak li nan trè fasil yo panse sou ak rezon ki fè sou.
Se konsa, li nan yon lòt trase bon nan Reyaji.
Nenpòt ki plis kesyon?
Yeah?
>> ODYANS: Sou, poukisa ou ta itilize kite kòm opoze a var?
>> NEEL Mehta: Se konsa, kesyon an se poukisa ou itilize se pou olye pou yo var?
Sa a se yon bagay yo rele ES6 oswa ECMAScript 6.
Li nan vèsyon an nouvo nan JavaScript.
Genyen yon pakèt moun sou rezon teknik, Men, se pou se yon vèsyon pi bon nan var.
>> Li nan ki jan ou deklare varyab.
Ou kapab sèvi ak kite.
Ou kapab sèvi ak var.
Se pou gen yon pakèt moun sou teknik reasons-- ou ka gade yo
moute later-- pou poukisa li a pi byen.
Fondamantalman, gen kèk bèl ES6 nouvo sentaks, gen kèk karakteristik nouvo
sou tèt fin vye granmoun JavaScript nan.
>> Se konsa, nou gen tankou senk minit.
Mwen jis te vle pale sou yon sèl bagay pi reyèl vit.
Si ou te gen nenpòt kesyon, kite nan pale sou li apre sa a.
Men, jis pou sa a vin kenbe sou kamera, mwen jis
vle pale yon ti jan sou ki jan ou aktyèlman sèvi ak reyaji nan apps ou yo.
>> Si ou ale isit la, Facebook.GitHub.IO/react,
sa a se paj an kay pou reyaji, ak li pral montre w kouman ou aktyèlman sèvi ak
Reyaji nan paj ou a.
Fondamantalman, li nan yon ti kras konplike ap eseye enstale Reyaji.
Li pa kòm fasil tankou ou jis trennen ak gout yon JavaScript nan la.
>> Ou gen gen transfòmatè ou mete kanpe, ki pral, jan li te fè anvan,
vire JSX ou a nan nòmal JavaScript nan.
Ou gen bagay ki pral konpile ou ES6 nan nòmal.
JavaScript gen nan yon anpil nan k ap deplase pati sa ou dwe fè, se konsa gen nan yon bagay
rele Yeoman, Yeoman.io.
Lè sa a se yon zouti liy lòd ki pral ede w echafodaj soti ou Reyaji
pwojè fasil.
>> Se konsa, ou ka li sou sa a pita, men gen kèk zouti
ki Yeoman ofri.
Yo pral kite ou kreye yon Reyaji app ak tout bagay bati nan.
Fè tankou li pral gen bati an, eleman bati nan.
Li pral gen transfòmatè ou bati nan.
Yo gen yon anpil nan fre bagay bati nan otomatikman
lè l sèvi avèk bagay sa yo rele dèlko.
>> Se konsa, li sou sa a si ou renmen.
Jis ale sou Yeoman, Y-E-O-M-A-N, ak ou ka jwenn dèlko tankou sa yo.
Se avèk dèlko tankou sa yo, ou jis tankou yon sèl
se yon liy lòd koup kòmande.
Li pral soti yon echafodaj tout Reyaji app pou ou.
Li pral jwenn tout kanalizasyon nan manyèl, ak travay groyeur fè pou ou,
ak sa a se poukisa ou jis konsantre sou jis ekri nan Reyaji.
>> Se konsa, fondamantalman bati yon Reyaji app se nontrivial.
Li nan branche tout ansanm, men gen yo se zouti ki pral fè l 'pou ou.
Se konsa, si ou vle fè yon Reyaji app, eseye fè li fason sa a.
Si ou jis vle fè eksperyans, ou ka eseye lè l sèvi avèk sa a CodePen
paske sa a CodePen gen reyaji nan tout fil elektrik.
Mwen te fè tout travay la pou ou deja.
>> Se konsa, si ou vle fè tankou yon pwodiksyon yo pibliye Reyaji app,
eseye youn nan dèlko sa yo.
Si ou jis vle jwe alantou li, li souvan vo jis
tankou eseye jwe alantou sou CodePen isit la.
Son bon?
Fre.
>> Se konsa, ki nan tout m 'genyen.
Yon fwa ankò, tout kòd la ak egzanp yo pral fè sou sit entènèt sa a isit la.
Se konsa, ankò, nou pa t 'pale sou anpil sentaks a reyaji,
men yo jwenn tout moun sa yo ti kras detay sentaks,
li nan tout ale nan ap disponib sou sit entènèt sa isit la.
>> Se konsa, mwen ta rekòmande pou tankou pran premye etap la.
Mete l 'nan CodePen ou yo.
Eseye travay sou fè li nan dezyèm etap la.
Genyen yon katriyèm etap, ak jis wè ki kote ou jwenn nan sa.
>> Nenpòt kesyon plis, tcheke soti paj ki oswa voye yon imèl m '.
Sa a imel mwen.
Men, mwen ta renmen ede w ak nenpòt kesyon ou ta ka genyen sou Reyaji.
Se konsa, YEP, ki nan tout m 'genyen.
Mèsi poutèt ou tout anpil pou l ap gade oswa pou ale.
Apre sa, mwen pral pran nenpòt kesyon ou ta ka genyen apre sa a kounye a.
Se konsa, di ou mèsi tout pou gade.