>> [Musika jotzen]
>> NEEL Mehta: Hemen doa.
>> Beno, denek, den web ongietorria dituzten etorkizuneko aplikazioak erreakzionatu.
Hau CS50 da.
Nire izena Neel da.
TA naiz CS50 eta sophomore bat Harvard College eta oso, oso at
sutsua web garatzaileak.
Beraz, oso zirraragarria naiz gaur zaituzte,
Oraindik hemen edo etxean duzun ala ez behaketa, buruz erreakzionatzen, hau da, berriro
esan nuen, web aplikazioak etorkizuna gisa.
>> Beraz erreakzionatu web esparru bat da.
Eta ez dut izan den bezala kontatzea pertsona batzuk hemen,
esparru bat besterik ez da tresnak erabili ahal izango dituzu ezarri
egituratzeko eta zure web app eraikitzeko.
Eta web aplikazioak dira, berriro, webguneak direla Facebook bezalako interaktiboa,
Twitter.com, Instagram.com, edozein dela ere.
>> Beraz, Facebook web esparrua da Hori Facebook garatu zen
Pare bat urte back-- erreakzionatu da.
Honez geroztik erabili izan da Facebook beraien aplikazioak mugikorrean
eta web aplikazio, Instagram.
Khan Academy beste bat destacados goiz erreakzionatu adopter.
>> Orain, benetan lortzean oso ezaguna.
Inoiz Angeluen edo gauzak bezala erabiltzen baduzu Backbone, hau familia berekoa da,
baina urrun geroztik ditu Bere ospea ditik.
Beroa gauza berria da.
Benetan, benetan izugarria da.
>> Eta horrela erreakzionatu da ona, ez besterik gisa Web eraikin interfazeak egiteko esparru.
It web interfazeak eraikitzeko ona da.
Ez da, gainera, gauza bat izeneko erreakzionatu Native bertan
lets interfazeak eraikitzeko duzu Android eta iOS
eta etorkizunean, agian, beste plataforma besterik JavaScript kodea bera erabiliz.
Zehatza bera erabili ahal izango duzu JavaScript kodea webguneak errenderizatzeko,
Android aplikazioak eta iOS aplikazioak erakustea.
>> Denbora oso, oso zirraragarria da.
Benetan, oso cool aukera bat da.
Benetan web unibertsal bat interface garapen tresna,
beraz, oso, oso Garrantzitsuena da jakitea.
Eta, I pertsona kontatzea zen bezala aurretik, hau da, uste dut,
nola ez dugu aldatuko web aplikazioak eraikitzeko betiko.
Beraz, agian, pixka hiperbole bat, baina ez dut Nik uste gauza nahiko ona da jakitea da.
>> Ados, beraz, zer da erreakzionatzen?
Erreakzionatu esparru bat da izango duzu interfazeak eraikitzeko erabili.
Interfaze bat da, berriz ere, Web orri bat da, ezta?
Hortaz, hona hemen Instagram.com, erabilerak erreakzionatu.
>> Erreakzionatu gainean eraikitako osagaiak ideia.
Osagaia da HTML da elementu esteroideak,
beraz HTML elementu bat botoi bat bezalakoa da.
Paragrafo bat da.
Goiburu bat da, ezta?
Eta Instagram horiek erabili ahal izango da, baina halaber erreakzionatu osagaiak erabiliko du.
>> Erreakzionatu osagaiak dira souped-up HTML elementu
Hori norberaren jokabidea dute bertan jasotako.
Beraz, adibide gisa, izan dugu denbora elementu bat, denbora osagai bat,
bertan egingo bezalako eduki , denbora zigilua, badakizu
Profil osagairik, Profil irudia edukiko du
eta pertsona baten izena.
A bezalako kontraerasoan, izan daiteke bertan gustatu zaie gehienen antzera zenbatu daitezke,
eta gainean klik egiten baduzu, hura egingo gustatu zaie kopurua handitzeko.
Osagai bat besterik ez da HTML kode sorta hori
funtzionalitate batzuk horren barruan bilduta.
Beraz, HTML elementu bat bezala esteroideak, lehen esan dudan bezala.
Osagai hauek hartu ahal izango duzu, eta haiekin batera jarri ahal izango duzu
osagai berriak egiteko, in Kasu honetan, post-osagai bat,
bertan guzti hau dauka.
Time edukiko luke, profila, LikeCounter, agian iruzkina
eta, agian, irudi bera.
Eta beraz, web aplikazioak dira besterik hartuz eraiki osagaiak eta horiek jarriz batera.
Instagram iturria baino ez da mezu mordo bat bata bestearen atzetik,
Mezu bakoitza Time bezalako dauka, Profila, LikeCounter, eta abar.
Mota etxe bat eraikitzea bezala da.
Zuk ez duzu eraikitzeko goitik behera etxe.
Hartu duzu osagaiak duzu Komunera bezala hartu.
Bedroom-- horiek makila hartu duzu elkarrekin, eta osagai berri bat behar duzu.
Etxearen zati berri bat behar duzu.
>> Beraz erreakzionatu guztien inguruan eraikitako osagaien ideia hori
elkarreragileak dira, hori deklaratiboa dira.
Zer bat esatea besterik ez duzu Like Profil da, eta errendatzen du.
Composable dira.
Denbora bat eta profil bat hartu ahal izango duzu, jarri Haiekin batera, egin zerbait hobea.
Eta berrerabilgarriak ari dira, beraz baduzu jatorrizko kodean izan post bat egiteko,
edonon txertatzeko asmoz.
>> Instagram bat kapsula dezakezu Gauza zeure web orrian.
Facebook-en ditzakezu txertatzeko, adibidez, betiere, berak darabilen bezala erreakzionatu baita.
Beraz osagaiak dira benetan, benetan, benetan Eraikin web bloke indartsua
edonon erabili ahal izango dira, eta jarri elkarrekin eraikin bloke berria egiteko.
Hori da, oso, oso Maila handiko ikuspegi orokorra.
Beraz, berriro ere, baldin baduzu edozein unetan edozein zalantza argitzeko
erreaktore, filosofia buruz kodifikazioa, me gelditzeko, eta utzi naute.
>> Ados, beraz, erreakzionatu delako cool ezberdinak begiratzeko modu bat du
Web aplikazioak nola eraiki duzu.
Seguruenik duzu MVC, entzun kontrolatzeko duzu eredu CS50 edo dena delakoa
beste kraterrak klaseak erabili behar dituzu.
Eta esparru gehienetan daude MVC ideiaren inguruan eraiki.
Erreakzionatu ez da.
Erreakzionatu da ideiaren inguruan eraikitako norabide bakarreko datuen fluxua
ikusi taula honetan edo hemen grafiko gisa.
>> Funtsean, Datu-iturri bat behar duzu.
Eta datu-iturburua erabakiko du nola atera osagai jakin batzuk finkatzeko.
Eta osagaiak izango gero, aldatu egiten dutenean,
esango dute Datu-iturri aldatu.
>> Instagram erabili ahal izateko Adibidez, baliteke duzu
bezalako post objektuen zerrenda base bat edo zerbait.
Datu hori.
Eta gero, gure post osagaiak Datu hori hartuko du,
eta erabili datu hori errendatu pantailaren alde batetik gauza bat.
Hori zer Gezia Datu tik osagaia da,
eta, ondoren, datu hori bera erabiltzen da osagai mordo bat emateko.
>> Facebook Messenger, for Adibidez, hau da, erreakzionatu,
zerrenda bat izan dezakezu mezuak zure datuak iturri gisa.
Eta hori ez lekarkiokeena bakarrik mezuen zerrendan
baina, aldi berean lagun zerrendatik duzu.
Irakurri gabeko zenbatu behar duzu.
Agian, halaber, Facebook gauza errendatu Hori Facebook.com behealdeko da.
Datu bera da bat egiaren iturri bakar
eta hori asko eragiten osagaiak dira errendatzeko.
Eta, betiere, horietako bat osagai da aldatu,
atzera egingo du eta Datu-iturri aldatzen.
>> Mezu bat bidaltzen duzunean, ezta?
Datu-iturburu aldatzen.
Zure mezuak irakurri, beraz, 0 unread ezarri duzu.
Datu-iturburu aldatzen.
Eta konturatu bateko horien guztien gezi atzera egingo datuak berera
iturria, beraz, badakizu, Datu multzo jakin bat,
zehazki zer ezagutzen duzu Orri da itxura.
It determinista da.
Badakizu, emandako datu batzuk, zer Orri hau itxura.
Jakin dezakezu nola da joan jokatu eta gauzak nola joan
denean elkarrekin jartzen ari dira lanera.
>> Eta milioi bat osagai bat banu Hemen, portaera litzateke, ezta?
Ez litzateke duzu edozein interkonexioak bitxi.
Datu bat errendatzen milioi bat osagaiak.
Milioi bat osagai Could atzera egin eta datuak editatzeko.
Eta, beraz, hau da, oso polita.
Composable eraikitzen ari gara, erraz eskalatu web aplikazioak.
>> Datu-iturri bat behar duzu, egiaren iturburua.
Hori da zure osagaiak kontatzen nola arautuko den orrialdean,
eta osagaiak izango elkarrekintza kudeatzeko.
Eta aldatu nahi badute Gauzak, besterik gabe atzera
eta esango datuak iturburua aldatzeko.
Zentzurik?
Beraz erreakzionatu guztiak ulertzeko buruz da nola osagai bat eraikitzeko
eta nola zure osagai egiteko kanpoko munduarekin elkarreragin.
>> Osagai elkarreragin egitea kanpoko munduarekin
teknologiaren beste erabiltzen du Flux izenekoa,
esparru bat dela da Erreakzio gainean gehitu.
Ez dugu horri buruz hitz egingo da.
Ari gara emandako buruz gehiago hitz egin dugu, datuak, nola dezakezu osagai bat errendatu duzu?
>> Eta horrela erreakzionatu da benetan cool duzulako Erabili ahal duen back end nahi zurekin.
A Python back end bezala badaukazu, Zure Python datu batzuk txu bada,
Erreakzionatu errendatu daiteke.
Ez zara JS irteerak bada Datuen erreakzionatzeko errendatzen.
Ruby errailen sortu datuak, erreakzionatu bihurtzen.
>> Beraz erreakzionatu da, funtsean, web bat osagaiekin frontend bat ikuspegian
daturik iturritik ezgaitasunaren.
Eta beraz, datuen iturritik joan erreakzionatu osagaiak nahiko erraza da.
Beste era joan apur bat zailagoa da.
Hori erabiltzen Flux lehenago aipatu dudan bezala.
Ez diogu hori hartzea.
Gehiago zentratu dugu Datu-to-osagaia alboko.
Bide hau egin dezakezu cool, fun web aplikazioak.
Ezin izango da kanpoko mundua eraginik oraingoz, baina hori beste istorio bat da.
>> Ados, beraz, bada hemen bazina Nire azken mintegia
Ezagutzen dituzu kodea guztiek Gaur egungo eztabaida da URL hau izango doa
Hemen, barkatu, URL hau hemen.
Eta, batez ere, ari gara joango Lau urrats, agian bost bitartez,
Seguru asko ez bost.
Egingo lau urratsetan aurrera egin lagin bat eraikitzeko erreakzionatu aplikazioa.
Eta beraz, jatorrizko kodean guztiak modu pauso bakoitzean
hau da, hementxe izango da, hala badagokio, you zehar jarraitzen du etxean ari,
free kode hau peruse sentitzen.
Honako batera bazabiltza hemen, goazen erakutsiz egingo pantailan,
beraz, ez kezkatu.
Baina etxean zaudela bada, sentitzen Free web hau bisitatu.
Eta, bai, iristeko gai izan behar duzu kode guztiek inoiz litzaidake hemen behar.
Beraz Cheat xafla ona da baita Zure etorkizuna abenturak erreakzionatu.
Denek nor dagoen hemen Cool, hala bada, eta zu etxean, nahiz eta,
tira webgune honetan, is.gd/cs50react, capital ez, azpimarra ez, ezer ez.
>> Itxura orri bat ikusiko duzu Hau atsegin pixka bat.
Hau CodePen izeneko gauza bat da.
CodePen hartze bat da kodeketa ingurumena
zeinarekin dut hemen kodea idatzi ahal izango dira, eta bertan egingo automatikoki bidaliko.
Eta era honetara, kodea idatzi ahal izango dut.
Hemen I kodea exekutatu.
>> Esate baterako, eta reloads-- ikusten badu, Exekutatzen ari naiz JavaScript kodea orrialdean
hementxe, eta bertan egingo automatikoki errendatu web orri batean
JavaScript kodea honekin.
Eta, beraz, hau modu bat da Gurekin probatzeko kodea
Benetan azkarra da erabiltzeko beharrik gabe Gure NAN edo gure tokiko makina erabili
edo dena delakoa.
To Mockup zuretzat modu oso polita egin da eta kode mota ezberdinak probatzeko.
>> Beraz noa hartu beharreko Adibidez kodea, hemen jarriz.
Bidez beharreko lanean ari gara.
Eta etxean zaudela bada, zuk Honen tira ahal baita.
Eta nik dagoeneko instalatu Erreakzionatu hemen, beraz, besterik gabe, ahal duzun
idatzi zure kodea hemen, eta saiatu zeure jolastoki gisa.
>> Bai, denek nahi izanez gero ireki, link honetan hemen.
Mesedez eman dit koadro bat behin irekita dituzunean eman.
Cool, cool cool.
Ez dago ezer hemen oraingoz, baina aldatu egingo dugu oso laster.
>> Ados, beraz, erreakzionatu Javascript da liburutegia, eta, esate baterako,
Javascript ezagutzea eskatzen du, bertan web programazio hizkuntza da.
Eta hori beste gauza batzuk egiteko erabiltzen ari orain ere, baina batik bat web garatzea
hizkuntza, zara Ohituta bada orain adierazten du, irakurtzeko JSforCats.com izeneko gune bat.
Zoragarria da.
Javascript ikas dezakezu Ordu erdi batean.
Sinestezina da.
>> Beraz, ematen irakurtzeko.
Halaber HTML asko dago irudirik delako Web noski orrietan diseinatzen ari gara.
Beraz, Ohituta bada HTML, begiratu HTMLdog.com.
Erreakzionatu dut ikasteko uste bat milioi aldiz errazagoa Dagoeneko baduzu
eraikin bloke jakin.
Osagaiak badaukazu, da Osagai handiago bat egiteko.
Hori da hizkuntza erreakzionatu duzu.
>> Anima zaitez eta eman Gauza horiek irakurtzeko.
Pausatu bideo honetan.
Eman irakurri bazaude Etxean ez bazaude
HTML edo Javascript ezagutzen
Ados, beraz, zer ari gara joan ez da ari gara egiten joan
Oso oinarrizko flashcard aplikazio bat erreakzionatu erabiliz.
Flashcard bat izan behar gara.
Txartela irauli dezakezu atzera eta aurrera.
Eta, gainera, dugu zerrendarik Karta guztiak dugula,
eta guk sentitzen bada asmo handiko, agian izan dugu
den artean aldatzeko gai bere gainean klik eginez autoak.
>> Baina hau da, zure biluzi hezurrak, oso erraza da erreakzionatu aplikazioa.
Eta, beraz, hau da benetan Ez trivial ezartzea,
baina ari gara hori erakusteko, ez baduzu joan hau da, oso, oso erraza da hori luzatzea
jendeari lagundu baduzu berarekin.
Beraz, lau urrats joan igaro hutsetik hasita hau eraikitzeko.
>> Ados, beraz, lau urratsak, dizkizugu hasteko off lehen urratsa izan da.
Lehen urratsa izango da Zure lehen osagaia eraikitzen.
Lehen esan dudan bezala, osagai bat erreakzionatu besterik HTML esteroideak elementu bat da.
HTML zehazten du eta portaera batzuk, eta hura
zenbat jende zehaztu dira da nola elkarreragin dezake
Barne-egoera izango litzateke.
Like botoi bat zenbat atsegin jakin aldiz izan da bertan klik adibidez,
eta nola bera finkatzeko out jakin beharko da.
>> Beraz, goazen aurrera eta eraikitzeko gure Lehen osagaia Javascript-a erabiliz.
Beraz, sintaxia itxura bitxi bada, hori da, mota horretako dagoelako.
Beraz, berriro ere, goazen izeneko aldagai bat egiteko
Aplikazio hitzarekin utzi erabiliz, aldagai bat egiten du,
utzi aplikazioa React.createClass berdinak.
>> Erreakzionatu liburutegia bat da eta duela klase funtzioa sortzea.
Eta funtzio hori kodea pixka bat duzula
berri bat sortzeko erabili ahal Erreakzio osagai mota.
Eta beraz React.createClass osagai bat egiten du,
eta osagai hori izango izan gauza egiteko gai.
Gauza nagusia egin ahal izango da errendatu zerbait, funtzio gisa errendatu.
>> Berriz ere, indize hori ez da begi-bistakoa bada duzu, JS bazoaz katuak gomendatzen dut
eta begiratu bat.
Handituta dagoela nahiko ondo?
Cool.
>> Beraz, osagai beharrak guztietan errendatu funtzio bat izan.
Errendatu funtzioa dio, zer ez inprima pantailaren alde?
Baina osagaia da Ezertarako ez bada
badakizu zer den pantailan inprimatu, beraz, errendatu funtzio bat eduki behar duzu.
>> Beraz in the errendatu gauza, zuk HTML batzuk itzuli behar.
Eta zer da cool da izeneko gauza bat da
JSX, bertan luzapen bat da Duten moduan erabiltzen da JavaScript erreakzionatu.
Dezagun barruan HTML idatzi duzun Zure JavaScript, zein
bitxi denean moduko soinuak Horri buruz lehen uste duzu,
baina zentzu asko egiten du ondoren.
Beraz, hori egin ahal izango dugu.
Oraindik HTML ezagutzen baduzu, badakit Helburu orokor batekin div dugu
stuff for edukiontzi.
Div bat itzultzeko aukera izango dugu, eta barruan div honetan, gauzak jarri ahal izango dugu.
>> Beraz, esan dezagun besterik errendatu nahi dugu oraingoz flashcard zuzen-up bat.
Flashcard, esango nuke, galdera eta erantzun beharko dute.
Beraz div honen barruan, dezagun paragrafo bat inprimatu
Hori question-- Zer da dio Bizitza erantzun ultimate, unibertsoa?
Eta gero erantzuna da izan, noski, 42 joan.
>> Hori ez etorri eta guztietan.
Bai, beraz, funtsean, benetan dezakezu idatzi zure Javascript barruan HTML.
Eta hau izango da Pantailako inprimatutako sartu.
Hargatik saiatu.
>> Beraz, gure osagai behar dugu.
Erreakzionatu jarri kontatu behar dugu pantailan agertzen osagaia
beraz React.render, beraz, nabarituko dugu Aplikazio tratatzeko beste edozein elementu bezala.
Bertan idatzi dugu HTML elementu bat izan zen bezala.
Ordez img bezala esaten Like Irudi edo p paragrafoan egiteko,
aplikazioa idatzi duzu, beraz, aplikazioa da HTML elementu bat bezala tratatu.
Lehen esan dudan bezala, ez da esteroideak elementu bat.
>> Beraz aplikazioa errendatu duzu, eta zuk leku bat da jarri emango da.
Eta hau da, nola egin ahal izango dituzu Esango non jarri behar.
On div sinple bat sortu dut Orri ID bat izeneko orria,
eta hori da, non elementua da joan doaz.
>> Eta ez gabiltza HTML batera exekutatu.
Funtsean hau da iritsi Orri elementu horren barruan jarri
pantailaren alde dugula.
Beraz, kode hau exekutatzen da, eta honek marrazten da Gauza pantailan, beraz, hemen gaude.
Gure erreakzionatu lehen osagaia egin ditugu.
>> Beraz, besterik laburpena gisa, poliki-poliki egin genuen Osagai-mota berri bat da, ezta?
Hori zer React.createClass du.
Eta osagai hori ere, ez dugu esan du zer egin behar da.
Betiere osagai hau da den pantailaren gainean inprimatutako,
egingo dituzten div inprima ezazu horren barruan bi atalei.
>> Eta zer egin genuen, aplikazio berri bat egin dugu xebroi aplikazioa idazkera erabiliz.
Eta kontatu ditugu bertan jarri Orri elementua barruan.
Eta orain zer egin nuen, hura sortu template duten aplikazio berri bat.
Eta gero, errendatu egin esan nion.
Beraz, esan ohi da OK, aplikazioa, zer behar inprimatu dut?
Aplikazioa dio, joan div bat inprimatu horren barruan bi paragrafo batekin.
Eta voila, ez gure batera div da horren barruan bi paragrafo.
Zentzurik orain arte?
>> Beraz, berriro ere, erronkari osoan erreakzionatu da besterik osagaiak nola egin jakitea.
Nola egin du osagaiak elkarrekin lan.
Orain egin dugun gure lehenengo osagaia, goazen atzera
eta egiteko osagaiak pertsonalizagarria.
Beraz HTML badakizu nola duzu Zure botoiak klaseak eman ahal?
Zure anchors eman dezakezu href du.
Zure sarrera eman dezakezu mota bat da, ezta?
Custom gehiago eman ahal izango duzu zure elementu guztiak propietate
interesgarri izan dadin.
Eta egia esan, ezin dugu gauza bera zehatza.
>> Beraz, esan dezagun nahi dugu gure Aplikazio duen txartela errendatu joan.
Oraintxe besterik ez dugu hardcoded txartel bat errendatzen.
Badakigu ez duen bakarra da txartela egin daiteke, beraz, ez gara
saiatu eta beraz, aldaketa hau orain joan besterik ezin dugu eman, txartel batzuk.
Out inprimatu izango da txartela.
>> Saiatu eta saiatu zara zure osagaiak helburua oso orokorra da.
Beraz, modu honetan, e-posta nezakeen hau nire lagun eta antzekoak izan,
edozein dela flashcard duzu, besterik elikatu da hemen sartu,
eta gauza bera egin beharko da, berez.
Beste jarri dezakezu Zeure aplikazioa ere gauzak.
>> Baina lehen, dezagun apurtu honetan bi osagai sartu arte,
baina txartela banandu nahi dugu inprimatzeko parte benetako aplikazioa lekutatik.
Beraz, zer egin dezakegu dugu aplikazioa aldatu dezakezu hau
CardView nahi, besterik bat Aplikazioa izen berria,
eta berri bat egin ahal izango dugu Osagai aplikazioa deitzen,
ez zaharra aplikazioa nahastu behar.
Lortu dugu createClass du, eta HTML bezala,
ahal habia erreakzionatu osagaiak bata bestearen barruan.
>> Errendatu funtzio honetan beraz, funtzio bueltan CardView,
eta honen zehatza gauza bera da.
Ikusi zergatik gauza bera da?
Horren ordez, besterik gabe aplikazioa ematearen dagoela div eta uztartzea ere barruan ditu,
Aplikazio pintatzen CardView du, eta CardView div eta paragrafo bihurtzen duena.
Beraz, hau da gure lehen adibidea da bata bestearen barruan habia egiteko elementu.
Ez duela zentzurik?
Beraz, berriro ere, CardView elementu bat behar dugu.
Aplikazio elementu daukagu baino handiagoa dela.
>> Ados, beraz, nahi dugu gure CardView-- baduzu Epaileak txartel jakin bat emango CardView ona,
inprimatu egingo out zuretzat, ezta?
Beraz, lehenik eta behin, txartel bat egin behar dugu, Hargatik egin txartela objektu bat.
Hargatik nire txartela berdinak Oraindik guztiak ezagutzen bada,
hau besterik idazkera-hartzea da Ikusteko Javascript-oposiziorako.
Mota da egitura bat bezala C, beraz, txartel bat egin genuen,
eta beraz, orain txartel hau gainditu ahal izango dugu Jabetza edo HTML atributu bat bezala
Gure aplikazioa terminologia.
Beraz, egin ahal izango dugu hau, aplikazioa txartela berdinen myCard.
>> Nola sarrerako ere, ez duzu ezagutzen duzu Sarrera-mota testu edo botoi berdinen
klase berdinen bootstrap for btn ,?
Ideia bera, aplikazioa txartela berdin Ohizko duzu giltza jarri hemen
Aplikazioa txartela berdinen myCard, beraz hau dioen txartela objektu hau dugu.
Hura bezala pasatzen noa Aplikazio osagaia den eraikina.
Eta aplikazioa osagai hau izango izan da sartzeko gai eta egin
egiten dituzten gauza interesgarri.
>> Beraz, gure aplikazioa izango da txartel bat ematen, beraz, oraingoz,
ditzagun aplikazioa besterik eman CardView txarteleko
bera bezalako aplikazioa ez dagoelako berarekin zer egin jakin nahi du,
beraz, besterik ez dugu eman CardView izateko.
Beraz, egin dugu pasatzen dugu Modu berean, txartela berdin,
eta, beraz, osagai bakoitzaren sar daitezke hori izan da emandako gauzak.
Propietate sartu ahal izango dute izan duen eman
sintaxia hau erabiliz, this.props.card.
>> Beraz, zer gertatzen da hemen da myCard objektuaren duzu.
Handik igaro aplikazioa sartu zara aplikazioa txartela erabiliz berdinen myCard.
Txartela objektu hori zure aplikazioa emandako.
Aplikazio sar daitezke this.props.card bezala.
Mota da irudi bat bezala da iturburu-dena daki.
>> Aplikazio honek badaki zer txartela da da, eta gauzak egin ahal izango da berarekin.
Konputurako egin ahal izango da.
Oinarritutako off da erabakiak hartu ahal izango ditu.
>> Oraingoz, pasatzeko nindoan CardView kalera this.props.card.
Zentzurik orain arte?
Egingo du zentzu gehiago orain.
>> Ados, beraz, orain ari CardView begiratzen dugu.
Egun Gure CardView, txartela eman beharko lukete inprimatu bere galdera eta erantzuna.
Oraintxe besterik inprimatutako dugu batzuk hardcoded galdera eta erantzunak.
Out-- irudikatu behar dugu behar dugu Epaileak txartel gaituen eman diren galdetzera
zer galdera eta erantzuna da, eta ondoren, inprimatu honek egindako pantailan sartu.
>> Beraz, hemen hau egin ahal izango dugu.
In errendatu begin-- lehen egin berdin.
Beraz, hemen zer egiten ari gara ezagutzen dugun hori txartelak dira digute etxebizitza bat izateko,
ezta?
Sarrera gisa Jar Honez eman.
Da ia bezala Like funtzio bat argumentuak.
Txartelak gehienez argumentu bat da Ia CardView honetarako.
>> Ateratzeko ikusiko dugu, eta jarri Galdera aldagai sartu da.
Ziurtatu erantzuna joan erantzun aldakorra da.
Galderen erantzun nahi ez duten txartela.
Eta orain, horiek ditugula, ordez inprimatzeko testu hori,
inprimatu goaz edozein dela ere eman dute.
>> Beraz, hau stuff-- beraz goazen kanpo jarri galderari erantzun.
Ea, bada lan egiten utzi.
Cool, beraz dezagun pausoz bidez denbora gehiago besterik ez izan.
>> Beraz, nire Txartel objektu da, eta guk daude aplikazioa txarteleko hori emanez.
Eta Aplikazioa hartu du txartela eta eman CardView izateko.
Eta CardView hau dio, baduzu ematen dit edozein flashcard objektu,
Inprimatu dut bere galderari eta haren erantzuna, ezta?
>> Beraz, zer egin izan dut, ezin dut Kode hau bidali, lehena
10 Nire kode lerro, nire laguna den bezala.
Bertan txertatzeko ahal izan zuen ere bere aplikazio izena.
Eta gauza bera egin du, betiere zuen bezala, atsegin CardView txartela berdin hau,
betiere, CardView sortu zuen eta informazio zuzena eman zion,
bere txartela emango lizkioke zuen.
Eta beraz, modu honetan, benetan bat da eraikitzeko zuretzat modu cool
bata bestearen erabili duten, eskuineko osagaiak?
Txartel hau, argitaratzen nezakeen CardView hau Interneten,
eta jendeak erabiltzeko gai izango litzateke.
Beraz, funtsean, da bat bezalakoa da C liburutegi funtzioen estandarra.
>> Funtzio bat, non da Norbaitek idatzi zuen.
Sarrerako jakin bat emango dizu.
Irteera jakin bat ekoizteko izango da.
Axola nola dabil barrutik.
Betiere eskubidea eman duzun bezala sarrera, eskuineko irteera egingo da.
>> Eta osagai bat izan daiteke Modu berean pentsatu.
CardView hau bezalakoa da liburutegi funtzio bat.
Txartel batzuk eman behar baduzu Jabetza gisa, dela egingo
Epaileak txartel horren edukia inprimatu.
Nire txartela aldatu nahi izanez Like ordez zer da 5 plus 37 bezalakoa izan,
horren arabera eguneratu ahal izango da.
Beraz, besterik gabe, sarrerako aldatuz, irteera jakin bat daukala.
Beraz, ia osagai pentsa dezakezu modu horretan, funtzioak, zein
bildu dezakezu.
Sarrera lortuko duzu, CardView honen antzeko sarrera gisa, irteera lortuko duzu.
Kasu honetan, irteera HTML da.
Zentzurik orain arte?
Cool, beraz, berriro ere, propietate dira Informazio nola gainditu ahal izango duzu
sartu eta osagaiak.
>> Ados, beraz, egin dezagun hau Gauza interaktiboa.
Oraintxe aspergarria mota da.
Zer da [INAUDIBLE]?
Zenbait inprimatu ahal izango duzu, baina hori guztia egin ahal izango da.
>> Beraz, goazen atzealdera Galdera zaharra besterik oraingoz.
Ados, beraz, oraintxe osagai horiek dira guztiak ere ez aspergarria,
sarrera lortuko dute.
Irteera, eskuinera egiten dute?
Hori da, aspergarria mota.
Gure izatea nahi dugu osagaiak izan ahal izateko
Barne-egoera mota batzuk, bezala gogoratzen zerbait.
>> Flashcard egin du, Adibidez, zer egoera-mota
baliteke duzu nahi flashcard bat gogoratzen?
Zer da aldi baterako status Baliteke gogoratu nahi duzun
flashcard aplikazio batean flashcard bat?
Ikusleak: nik iraulita diren edo ez?
NEEL Mehta: Bai, eskubidea.
Beraz, agian gorde nahi duzun jarraipena dira eman duzu aurpegia edo dira
Ahuspez duzu txartela.
Facebook-en, adibidez, zenituzkeen gogoratzen non albiste jarioa nahi
Zara edo gustuko duten soslaia ari zaren oraintxe.
>> Messenger, On zer testu gusta Sarrera-koadroan idatzi, ezta?
Orria eguneratu baduzu, urruntzen doan da.
Baina, ez zaintzeko duzu.
Besterik ez da behin-behinekoa da.
Bai?
>> Ikusleak: [INAUDIBLE]
NEEL Mehta: flash bat Like txartela, egon ikustea nahi duzu
the question alboko edo erantzun aldean?
>> Ikusleak: OK.
>> NEEL Mehta: a Like bi aldeko flashcard, ezta?
Bai, beraz, nahi duzun orain ideia hau izan
Propietate izan dut, eta horrek Sarrerek bezalakoa da, baina egoera, hau da, aldi baterako, uh,
non zauden orrian, ezta?
Berriz ere, Facebook nioen Messenger, eta pertsona bezala daukat
Facebook ikusten ari zarenean edo nor profila, ezta?
>> Hau da, behin-behinekoa.
Garrantzitsua da erakusteko erabiltzailea zer gertatzen den, baina orrialde freskatzeko.
Ez da benetan axola.
Beraz, aldi baterako egoera da, beraz, dugun guztia da egoera.
>> Beraz, berriro ere, ez egoera eta atrezzoa da.
Atrezzo da sarrera eman Zure datuen iturritik.
Estatuko besterik lehenetsiak bezalakoa da.
Besterik ez da gauza bezalakoa da hori egiten gauza interaktiboa.
>> Beraz, gure CardView-- ditzagun Gure CardView-- hain polita izan zen.
Zer ari gara hemen egin behar dugu, goazen CardView eta bakarrik CardView ukitzeko.
Eta beraz, nire lagun batek lortu honetan, dute ez luke ezberdintasunik sumatu.
Ez zutela izango den aldatu beren kodea edozein,
baina ikusi litzaidake dute beren CardView got souped.
Hori osagaiak buruz zati polita da.
>> Ados, gure CardView beraz, dezagun saiatu eta dugu fasea eman ala ez ari pista gorde
edo ahoz behera.
Erreakzio hori egiten dugu lehenengo arabera hasierako egoera zehaztuz.
Non hasten da txartela?
>> Beraz getInitialState izeneko funtzio bat izan funtzionatu, eta objektu bat itzuliko gara.
Objektu hau estatu batzuk ditu, eta egoera bat besterik gako-balio bikote bat da.
Arauak bezala, gako bat eta bat duzu balio, izan duzun bezala izen katea da.
>> Kasu honetan, demagun aurrean egia da.
Hau dio egoera bat dugula.
Egoera osagai batek aurrean izeneko atributu bat da.
[INAUDIBLE], lehenetsita beraz, Oraindik, txartelaren aurrean dugu,
eta hau aldatzeko aukera izango dugu txartela irauli dugu.
Zentzurik?
>> Ados, beraz, errendatu, oraintxe, ari gara Galdera eta erantzuna erakutsiz.
Orain zer egin behar dugu galderari agertuko da
Oraindik ez dugu txartelaren aurrealdean bada orain Erantzuna txartelaren atzealdean dago.
Hori da, zergatik egiten duzun guztia txartelari interaktiboa.
Hargatik saiatu eta hemen honetarako.
Beno, lehenik eta besterik ez egiteko aldagai bat.
Orain galdetu diogu this.state.front.
Estatuak dugu bera sartzeko dugu sarbide atrezzoa, beraz this.state.front.
>> Aurrean bagaude, orduan testua this.props.card.question da.
Oraindik dugu aurreko aldean bada txartela, ari gara eta saiatu grab joan
txarteletik galderari.
Bestela, ez gara atzeko aldean bada Txartelaren, zer egiten dugu?
>> Ikusleak: Erantzuna?
>> NEEL Mehta: Bai, beraz, testua berdinen this.props.card.answer.
Baina konturatu baduzu, erabiltzen ari gara egoera erabaki bat egiteko
orain osagaia delako itxura ezberdina
oinarritutako off horiek nola elkarreragin.
Beraz inprimatzeko honen ordez, besterik ez dugu inprimatu testua.
Cool, orain, beraz, ikusten duzun bezala, Galdera bakarra ikusiko dugu.
Eta egoera eskuz aldatzen badut hemen aurrealdean faltsua da 42 bueltan.
>> Beraz, berriro ere, osagai hau bere egoera propioa du.
Like botoi bat daki Honez sakatu da edo ez,
Gauza hau badaki zein den, aurrealdean edo atzealdean.
Besterik adierazi ezean, aurrealdean da.
Eta gero, ez da aurreko aldean bada, dugu, inprimatu egingo galderari.
Da, atzeko aldean bada, dugu inprimatu erantzuna.
Beraz, berriro ere, informazioa Emandako bera da.
Itxura besterik ez da desberdina oinarritutako nola programatu duzun.
Beraz, adibidez, Facebook Messenger, Datu-iturri beraren lortu baduzu ere,
beste itxura zitekeen egoera ezberdina da delako.
You bat ikusten ari zara hainbat pertsona mezua.
>> Ados, beraz, hau da, guztiak ondo eta ona da, baina, gaur egun, zer da benetan
ahal digu, aldatu behar den ala ez dadin Gure txartela aurrean edo atzean dagoen.
Hau egin ahal izango dugu irauli gehituz botoia, txartelera botoi bat
txartela irauli egingo da, bada [INAUDIBLE].
Hargatik gehitu botoi bat hemen, hau botoia, eta botoi hau irauli esango du.
>> Eta beraz, oraintxe, hura ez du ezer egin.
Itxura besterik ez da polita.
Zer egin dezakegu klik bat gehitu ahal izango dugu kudeatzailea, OnClick berdinen this.flip,
eta zehaztu egingo dugu irauli geroago.
Baina, batez ere, OnClick funtzio bat dela
lortzen izeneko erabiltzaileak klik egiten duenean.
>> Beraz botoia jakin denean, bertan klik egin dira.
Joan zen, bertan klik egin da, txartela irauli egingo da.
Mota da It zure like pizza entrega lasaia.
Bezala ari zara, eskubidea, betiere, norbait deitzen dit, pizza entregatu dut, ezta?
>> Entzulearen hori erregistratu.
Gertaera baten entzungo duzu.
Izeneko lortuko duzu, eta, orduan, Gertaera gertatzen, zerbait egin behar dituzu.
Pizza lortu ahal izango dituzu.
Kasu honetan, ez zara klik, txartela irauli duzu.
>> Eta beraz bat zehaztu behar dugu Funtzio hori txartela irauli egingo,
beraz, eskubide hori idatzi dugu Hemen, irauli funtzioa.
Eta beraz, zer uste duzu irauli egingo duzue?
Berriz ere, hori lortzen denean izeneko klik dugu irauli botoia.
Zer funtzio irauli egin behar duzu?
>> Ikusleak: Aldatu this.state.front Egia from faltsuak, faltsua egia dira.
>> NEEL Mehta: Bai, beraz, edozein dela ere hartu this.front is-- aurrealdeko egoera da.
Hartu aurrean egoera, bada egia da, berau faltsuak egiteko.
Faltsua bada, beraz, eta egia da, ezta?
Hargatik saiatu direla.
>> Ezin duzu egoera aldatu besterik this.state eginez.
Ezin duzu hori egin.
Ezin duzu hori egiten.
Funtzio bat erabili behar duzu this.setState deitzen.
>> Beraz aurrean this.setState esan dezakezu colon non honek, berriz ere, harridura
Puntu kontrakoa esan.
Asmatzen honetan badut. state.front Egia da, faltsu txanda izango da.
Beraz, egoera ezarri beharko dugu Egia from faltsua da.
Faltsua bada, zaitugu ezarri faltsua egia da.
>> Just nabarituko ezarri eta zertxobait dugun ezberdinean, eta beraz, saia gaitezen honekin.
Bada Bing, hau begiratu.
Flip botoia orain Aurrealdean egoera itzultzeko.
>> Eta beraz, hemen non a ikusiko duzu Erreakzio magia pixka.
Like dugu inoiz esan egiten da berriro errendatzeko.
Inoiz esan dugu ezer marraztu da.
Duzu hau egiten ari bada gabe erreakzionatu, dituzu
izan zaie gustatzen denean flip botoia sakatzen,
kontatzeko behar duzuna eskuz berriro errendatu, ezta?
>> Erreakzionatu benetan freskoa ere bazara egoera eta propietate jakin bat ematen diote,
Beti errendatuko da gauza bera zehatza.
Eta beraz, inoiz aldatuko dugu dugu egoera eta propietate,
gauza osoa erreakzionatu besterik berriro bihurtzen duena.
Daki da, ez dagoela bat korrespondentzia bat-bateko
egoera eta parametro eta HTML artean.
Beraz, betiere horiek bai Multzo egoera baten bidez aldaketak,
aldatu egingo da nola egin soldata da berriro errendatuko dira.
Eta, beraz, funtsean, erreakzionatu bezalakoa da aldatu zain.
>> Bakoitzean zerbait aldatzen da, da izango berriro errendatu orri osoa.
Eta eraginkorra soinuak badu, da delako litzateke,
baina erreakzionatzeko gauza erabiltzen Itzala DOM bat deitzen.
Horren ordez orrialde zuzenean marrazketa, hura HTML birtual zuhaitz mantentzen oroimenez.
>> Ba al dakizu, HTML zuhaitz bat bezalakoa da, Datuen egitura hierarkiko bat bezala.
Zuhaitz faltsu bat gordetzen du, memoria, eta, betiere orria eguneratu,
Mitxel beste marrazteko egingo da zuhaitz eta kalkulatu ahal izango da
zer aldatu egin behar da Orri bi zuhaitzen berdina egiteko.
Beraz, funtsean, ia asko re-errendatzen.
Eta gero, bakarrik nahi aldatzen du Tweaks txikian orria behar bezala,
beraz, oso, oso, oso eraginkorra da.
>> Beraz, funtsean erreakzionatu betiere, zerbait aldatuz gero,
Egingo berriro errendatu orritik ia.
Irudikatu beharko da zer egin behar dut aldatzeko benetako orria islatu egiteko
orrialdearen birtualean, eta hori egingo da.
Hori DOM birtual da.
Da handienetako bat ezaugarriak erreakzionatu.
>> Ez duela zentzurik?
Galderarenbat?
Bai?
>> Ikusleak: Nola egiten du alderatu oraindik MVC izateko
buruz hitz egiten dugun bezalako baliabideen aurretik.
>> NEEL Mehta: Bai, galdera da, nola ez konparatu MVC da?
Galdetu al baliabideak buruz.
Beno, hitz egin, nola funtzionatzen duen inguru utzi.
>> MVC, eredua eguneratu litzaidake.
Kasu honetan litzaidake txartela eredu bat behar dugu.
Ikuspegiak izango luke flip botoia, eta kontrola
irauli funtzioa izango luke.
Beraz ikuspegia esango luke controller irauli irauli.
Flip esango luke eredua aldatzea, ezta?
>> Eta beraz, MVC bat, zuk ez duzu entzun eredua aldatzea,
eta berriro errendatu ikuspegi horren arabera duzu.
Edo, besterik ez duzu nahi kontroladorea dute.
Itxaron eredua aldatzea, eta, ondoren, jaso eta gauza bat bezalakoa zati bat aukeratu
aldatu.
Hemen gauza bat egin behar dugu, baina aplikazioa handi batean,
Gustatzen gogoratu zer egin behar duzu leku bakarra behin-aldaketa,
beraz, apur bat gogaikarriak.
Eta horrela erreakzionatu da polita Itzala Dom bat duelako da.
Besterik ez da ordaindu ahal berridatzi gauza osoa.
Ez daukazu selektibo bezala asmatzen zer den egunera.
>> Facebook, nahi baduzu Mezu berri bat lortzeko, MVC ere,
Gogoratu behar duzuna, Ados, gauzak aldatzeko
du goialdean orrialdea, mezuaren ikonoa.
Leiho berri bat irekiko Era behealdean.
Honetaz gain, leiho hori beste gauza bat.
Era berean, soinu bat.
>> Hori gauza handia da Kanpora joan, aldi berean.
Eta ez hain baduzu Itzala Dom bat dute, dituzu
Eskuz delako egin dute ezin duzu orri osoa kentzeko.
Ezin duzu DESOREKATU, beraz, behar duzu Gauza bakoitza eskuz aldatu,
hau da, benetan MVC gogaikarriak.
>> Beraz izateko izan gastatu dute, selektibo
orria eguneratu, hau da, eraginkorra da, baina, era berean, gogaikarriak.
Erreakzionatu, baita Itzala Dom, bi gauza lortuko duzu doan.
Da eraginkorragoa delako Itzala Dom du.
Botila orrialde eguneratzen ari da.
Ez da zuhaitz manipulazioa egiten.
Eraginkortasuna lortu ahal izango dituzu.
Halaber, erabilera erraza delako lortuko duzu duzu orri osoa berridatzi bada besterik,
baina badakizu, eskubidea, gauzak dira nonbait orriko izango da.
Beste leku bat izan zitekeen, baina Honez orrian izango, ezta?
Beraz, zuk besterik berriro errendatuko ia osoa gauza,
eta pare bat egin dezakezu Orri beraren aldaketak.
>> Beraz, berriro ere, MVC duzu aukeratu behar luke
erabilera eta eraginkortasuna erraztasuna artean, eta erreakzionatu, biak lortzeko duzu.
Beraz, hobe da.
Zentzurik?
Solidoa.
>> Ados, beraz, ikus dezagun Hitz egin dezagun 4 urrats buruz pixka bat,
nola osagaiak txertatzeko aukera izango dugu.
Beraz, eskubide hori orain dugu.
Gure cool apur botoia daukagu.
Irauli ahal izango dugu atzera eta dagozkio, eta hori da dena egiten du.
Demagun nahi dugu beste osagai bat dute.
Demagun gure flashcard aplikazioa egin beharko lukete Karta guztiak zerrenda bat eduki
, dituzula beraz, horrek esan dugu beste osagai bat izan beharko luke.
Beno, agian zerrendan ikuspegi bat deitu du.
Egin dezagun zerrendan ikuspegi hori CardView elkarrekin bizi dira,
eta zerrendan ikuspegi hau eta CardView lana izango elkarrekin.
Eta horiek konbinatu dezakezu Gure aplikazioa egin dezakezu.
>> Beraz, lehenik eta behin, dezagun bat Bikote gehiago txartelak eskubidea.
Demagun, zer txartelak?
Eta besterik ez, beraz, ez dut izan aspertzeko idazten hasi zen,
Besterik ez dut kopiatu, hemendik joan.
Eta orain noa ez Epaileak txartel bakar bat emango da.
Emateko karta sorta batekin noa.
Beraz, lehenengo aplikazioak oraingoz hautsi egingo da.
Ondo da, beraz ari gara egiten joan gai honi anitz txartelak kudeatzeko.
Beraz, lehenik eta behin, ez gabiltza eman nahi ez joan, besterik karta bat baina karta-sorta bat,
txartelen zerrenda bat bezala.
Eta, kasu honetan, horietako hiru behar dugu.
>> Ondo da, beraz, aplikazioa da, beraz, Zerrenda txartelak bat iritsi da,
eta nik erabakitzen joan eta bertan bata CardView erakusteko.
CardView baino ezin Epaileak txartel bat, baina aplikazioa errendatu
Karta guztiak zerrenda bat lortzen da, ezta?
>> Beraz, noiz irudikatu bat txartelari CardView emateko,
nola litzateke gai izatea asmatzen duzu erabaki bat hartu behar duen txartela
erakutsi?
Iradokizun bat emateko, aldi baterako da Zaizu txartela jakin bat ikustean.
Orria eguneratu baduzu, ikusiko duzu Joan besterik lehen txartela itzuli.
Hori da, OK aldi baterako delako.
Zer teknika erabil dezake?
>> Ikusleak: aldagai bat egin dezakezu beraz aurrean izan duzun bezala.
Hau da egia, ezin izan duzu dute egungo txartela berdinen 1?
>> NEEL Mehta: Bai, dugu, beraz, Nahi egoera izan da, ezta?
Egoera hau erabili beharko duzu ere Osagai irudikatu nahi
bertan txartela egin nahi dugu.
Like zerrenda bat dugu Karta guztiak, dizkizugu
egoera erabili irudikatu nahi lehen txartela bat,
bigarren txartela, hirugarren txartela, eta abar.
>> Beraz, aplikazio bat beraz, aplikazio bat iritsiko zaizu getInitialState funtzioa dute,
Funtzio getInitialState bueltan.
Eta besterik ez dugu esango activeIndex 0.
Beraz, gaur egun, gure aplikazioa da egungo egoera propioa du.
>> Eta beraz, orain errendatuko, irudikatu txartel bat, goazen besterik array
eta har indize hartan gauza.
Aukeratu txartela this.props.cards berdina this.state.activeIndex.
Beraz, hemen ikusten duzun bezala, atrezzo eta egoera benetan elkarrekin lan.
Beraz, orain gure activeCard dugula, bertan egingo dugu activeCard deitu,
eta ikus dezagun lan egiten bada.
[INAUDIBLE]
>> Oh, hori testu akats bat egon da.
Ah.
>> Cool, bai, beraz, orain itzuli ginen non zeuden dugu, eskuinera?
Same zahar programa ezik orain onartzen dugu
txartelen zerrenda bat, ez-txartel bakarrarekin.
Eta orain, berriz ere, aldatzen baldin badugu activeIndex, 0tik dezakegu 1 joateko,
eta orain bigarren txartel hori, eta, ondoren, joan 0 dugu.
Beraz, hemen da berri bat souped-up gure bertsio.
>> Ados, beraz, gaur egun utzi dute zerrendan ikuspegi hori programan karta guztiak erakusten ditu,
beraz berri bat egin beharko dugu Osagai Zerrenda-ikuspegia deitzen.
Let Zerrenda-ikuspegia berdinen react.createClass.
Beraz desordenatuak ematera nahi dugu zerrendako elementu bat txartela bakoitzean dagoen zerrendara.
Eta beraz, karta-sorta bat dugu.
Zerrendako elementu bat nahi dugu Epaileak txartel bakoitzeko, ezta?
Bat egin izan dugu begizta edo Zerbait zerrendako elementu berri bat egin behar izan du.
Baina bidea egiten duzu Erreakzionatu, erabili mapa izeneko gauza bat.
Mapa tresna bat edo erabiltzen duzun funtzioa da duten elementu bakoitzerako, funtzio batzuk lantzen ditu,
bueltan balioa hartzen du, eta Atzera hori ematen dizu.
>> Beraz, adibide gisa, array daukagu 1, 2, 3.map funtzio eta honek
da bat takigrafia funtzioa x gezi x aldiz x.
Hau dio, zenbaki bakoitzean 1, 2, 3, hartu.
Plazan bertan, eta eman atzera.
Beraz, zer uste duzu 1, 2, 3.map x x aldiz doa
x espalda eman duzu Funtzio hau da,
array duten elementu guztietan exekutatu.
>> Ikusleak: 1, 4 eta 9?
>> NEEL Mehta: Yep, 1, 4, 9 1 aldiz 1 egiten duzulako.
Hori bat ematen dizu.
Hori lehen elementua da.
>> 2 aldiz 2 4 da.
Hori bigarren elementu bat da.
3 aldiz 3 9 da.
Hori hirugarren elementu bat da.
Zentzurik?
Beraz mapa teknika bat hartzen duzun bitartean programatzaileak funtzionalean erabiltzea,
estilo berri zerbait egin behar programazio
Zure zerrendan elementu bat behin.
Eta, beraz, hau soinuak ezagutzen.
Txartelen zerrenda bat daukagu.
Zerrendako elementu bakoitzean lortu nahi dugu bat, beraz, besterik ez dugu mapa erabili hemen.
Esango dugu, zerrenda berdinen utzi this.props, txartelak, mapa.
>> Eta, beraz, emandako txartel bat, ez gara zerrendako elementu bat sortzen joan
txartela duten edukiak albo batera.
Dezagun esan out eman nahi dugu Txartelak, beraz card.question zalantzan.
Beraz, zerrenda honetan daukan LI edo Zerrenda elementuak sorta
eta han zerrenda bat da Epaileak txartel bakoitzean dagoen elementua,
eta hori txartelak auzia dauka.
Zentzurik?
>> Cool, beraz, orain dezagun benetan inprimatu dela.
Beraz ul a itzultzeko aukera izango dugu.
Orden gabeko zerrenda horren barruan, besterik ez dugu makila zerrenda osoa
eman dute hori.
Cool.
>> Ondo da, beraz, gaur egun hau zerrenda ikuspegian lan besterik aurkitu.
Zerrendan ikuspegi buruzko edozein galdera?
Karta-sorta bat duzu.
Zerrendako elementu bat egiten duzun txartela egilea da.
Eta horiek orden gabeko baten barruan jarri zerrenda, eta emango dizu atzera.
Beraz, gaur egun utzi jarduteko beraz txertatzen dugun Gure app barruan honetan,
beraz, hau egin ahal izango dugu, zerrenda ikuspegian.
Zer argudioa ez ikuspegi zerrendara igaroko dugu?
Zer propietate ez da gehiago?
Gogoratu, ematen bada da karta-sorta bat,
zerrenda egin beharko da txartelak dituztenentzat ikusteko.
Beraz, zer egingo pasatzen dugu Hemen argumentu bezala?
Ikusleak: txartelen zerrenda A?
NEEL Mehta: Bai, txartelen orain this.props.cards berdin, ezta?
Eta, beraz, arazo bakarra da soilik duzula
goi mailako elementu bat aktibatuta errendatu ere, beraz, lortu duzun hura biltzeko div batean.
Arraroa da.
Hargatik ikusten badu horrek.
Duten lan?
>> Bai, ez duzu joan.
Beraz, orain zerrenda bat dugu behealdean txartelak,
eta, ondoren, gure daukagu CardView bera gainean,
eta haren arteko irauli egingo Bi txartel aldeetan.
Orain ez du zentzurik hori nola egin nuen?
Bai, beraz, berriro, bi osagai behar dugu.
Lehenengo osagaia grabatuak egindako zerrendako txartel bakoitzean.
Hori zerrenda ikuspegian da.
Eta bigarren osagai inprimatzen txartela besterik ez dela.
Epaileak txartel jakin bat ematen baduzu, bertan egingo Epaileak txartel horri buruzko informazio inprimatu
eta utzi atzera eta aurrera irauli duzu.
>> Beraz, nahi badugu, saiatu eta eztabaida dezakegu ezaugarri berri batzuk gehituz horri buruz.
Bestela, pixka bat gehiago hitz egin ahal izango dugu erreaktore abiaduraren buruz,
edo erantzun ahal izango dugu galdera izan ditzakezu
dira horiek delako core zati guztiak ren erreakzionatu buruz hitz egin nahi dut.
Aurrera joan ahal izango dugu.
Galderei erantzun ahal izango dugu.
Nahi duzuna.
>> Publikoa: Ezin duzu erabili JSX Javascript normal batean?
Edo horrelako zerbait dela [INAUDIBLE] etorri zen?
>> NEEL Mehta: Galdera can da JSX erabili duzu Javascript normal batekin?
Erantzuna da bai.
JSX besterik ez da modu bat, zure hartzen Ikusteko Javascript-a duela HTML horren barruan,
eta biltzen du JavaScript sartu da ez du HTML dute, horren barruan.
Beraz, konturatu -bere orain konturatu hemen.
Badirudi div atsegin dute gusta eta, horren barruan stuff duzu.
>> Hori JavaScript to biltzen bezalako gauza bera sortzen.
Esaten dudana da asmatzen dut JSX da besterik sintaktiko bat, hura bezala
Javascript aurreprozesadorearen bat askoz PHP bezalako HTML aurreprozesadorearen bat da.
JSC aurreprozesadorearen da Ikusteko Javascript-a egiteko aukera ematen dizu
HTML jarri duzu zure Javascript-barrutik.
Eta beraz, eskuineko transformatua baldin baduzu bertan [INAUDIBLE] izeneko gauza bat da,
bertan egingo eraldatzeko.
Eskuineko aurreprozesadorearen, hori egiten utzi egingo da.
>> Ikusleak: [INAUDIBLE]
NEEL Mehta: Normalean ez duzu HTML jarri Javascript-barrutik
Erreakzio zure kulpa ezean.
Baina hala ere egin dezakezu.
Bai?
>> Ikusleak: duzula uste dut deskribatu zuen erreakzionatu
programing hizkuntza funtzional gisa.
Izan ikasteko ditugu C CS50.
Da, halaber, C lengoaia funtzional bat?
NEEL Mehta: Beraz, galdera funtzionala ingurukoa da
izeneko beste gauza versus inperatibo edo prozedura-programazioa.
Bi programa herrikoi mota dago.
One izeneko prozedura-, bertan guztiak commands egiten bezalakoa da, gutxi gorabehera,
eta inork dabil, eta hori guztia funtzio izatea eta beharrik buruz
sarrera eta horien irteera.
Erreakzionatu paradigma funtzionala da.
C oso prozedura-paradigma bat da.
>> Eta adibide gisa, C adibidez, ez baduzu, egin bide deklaratiboa honetan
programan egiten, ezta?
Esan behar duzu, inprimatu honetan.
Datu egitura aldatu.
Inprimatu honetan.
Dena da komandoei buruz.
>> Erreakzionatu, ez dago ez komando asko.
Guztiak izatea osagaiak elkarrekin jartzen.
Funtzio bezala ari dira.
Funtzio bat bezala duzu CardView deitzen,
bertan funtzioa da sarrera, irteera ditu,
eta beraz, erreakzionatu guztiak filosofia honi buruz
gurekin having-- datuak duzu.
Da hau pasatzen duzu bildu, eta bertan egingo
irteera HTML duzula besterik orrialde inprimatuta,
eta beraz, zuk eraiki pieza pieza.
>> Beraz, metafora bat marraztu zer Lehen esan dudan, badakizu nola
Facebook bada mezu bat lortuko duzu, eta zer zati eguneratu aukeratu duzu,
duten prozedurazko da.
Da inperatibo da, ezta?
Ados, mezu bat jaso nuen.
Alda dezagun kontu han.
>> Dezagun pop leiho bat hemen.
Alda dezagun kontu han.
Marraztu dezagun hau hemen.
Hori prozedurazko hurbilketa bat da.
>> Hau da, zer gauza Angeluen bezala, Altza, Backbone, beste esparruak erabiltzea.
Erreakzionatu funtzionala da.
Oso bestelako modu bat da ren gauzak pentsatzen.
Ditzagun ideia hau hartzen du funtzio algoritmorikerabiltzen izango duzula
datuak ematen ditu.
Txu egiten duzue zer da izan behar du, eta ordenagailua
arduratuko da egindako pisatzen.
Zuk ez duzu kudeatzeko it yourself.
Ez duela zentzurik pixka bat?
Bai?
>> Ikusleak: hizkuntza funtzional batean, dena aldi berean gertatzen da?
>> NEEL Mehta: Ez, gauzak ordenan gertatuko.
Hemen bezala, ez da oraindik aginduko, baina ez du
ordenaren arabera gertatuko bezalako Gommendatzen, komando, komandoa.
Gertatzen diren ordenan It funtzio irteera ematen dizu.
Jarri duten funtzio beste.
Jarri duten beste sartu funtzioa, funtzio beste.
>> Egin duzu CS51 bada, ikusiko duzu programak funtzionala ikasi
honen esparrutik kanpo apur bat.
Baina, batez ere, zer egiten du Erreakzionatu cool da bakarra
Bat-modu datuen fluxua eta Dom birtualean,
baina, aldi berean, ideia hau programazio funtzionala.
Eta programazio funtzionala oso erraza da konposatzen eta cool stuff egiteko daudelarik,
eta oso erraza da pentsatzea buruz arrazoirik buruz eta.
Beraz, beste erreakzionatu zozketa ona da.
Edozein zalantza gehiago?
Bai?
>> Ikusleak: Um, zergatik egiten duzun erabiltzea var ez bezala?
>> NEEL Mehta: Beraz, galdera da zergatik ez var ordez utzi erabili duzu?
Hau izeneko gauza bat da ES6 edo ECMAScript 6.
Ikusteko Javascript-a bertsio berri da.
Ez dago arrazoi teknikorik sorta bat da, Baina gatozen var bertsio hobea da.
>> It aldagaiak deklaratzeko duzu.
Utzi erabil dezakezu.
Var erabili ahal izango duzu.
Let tekniko mordo bat du reasons-- horiek begiratu dezakezu
geroago sortu zergatik hobe da.
Funtsean, ES6 ditu polit batzuk sintaxia, ezaugarri berri batzuk
zaharra Javascript gainean.
>> Beraz, bost minutu atsegin dugu.
Nahi nuen buruz hitz egiteko Gauza bat gehiago benetako azkar.
Edozein zalantza izan ezkero, horretaz hitz egin, honen ondoren utzi.
Baina besterik ez, beraz, hau lortzen kamera harrapatu, besterik ez dut
nola buruz pixka bat hitz egin nahi benetan erabili zure aplikazioak erreakzionatu.
>> Hemen joanez gero, Facebook.GitHub.IO/react,
honen etxeko erreakzionatu orria da, eta benetan nola erabiltzen diren erakutsiko da
Zure orrietan erreakzionatu.
Funtsean, pixka bat da konplikatua instalatzeko erreakzionatu nahian.
Ez da erraza arrastatu bezala besterik ez duzu eta askatu Javascript bat han ere.
>> Zure transformatua izan behar duzu sortu, hau da, aurretik egin bezala,
Buelta zure JSX sartu Javascript normala.
Dute gauza izango duzula konpilatu ES6 normaltasunera duzu.
Javascript han mugitzen asko da zati egin behar duzu, beraz, ez dago gauza bat da
Yeoman, Yeoman.io deitzen.
Eta honek komando lerroko tresna bat da, hori izango taulatu duzu zure erreakzionatu laguntzeko
proiektuen erraz.
>> Beraz, honi buruz irakurri dezakezu geroago, baina badaude tresna batzuk
Yeoman hori eskaintzen.
A erreakzionatu sortzen duzunean utzi egingo dute eraikitako guztia aplikazioa.
Eraiki egingo dute Like ere, osagaiak eraikia.
Ahal izango da zure transformatua eraikia.
Cool asko izan dute stuff eraiki automatikoki
Gauza horiek generadoreak, esate baterako.
>> Beraz honi buruz irakurri nahi izanez gero.
Just Yeoman, Y-E-O-M-A-N, eta joan Horrelako generadoreak aurkitu dezakezu.
Eta atsegin sorgailuak horiek, nahi besterik ez duzu bat
pare komando lerroa komandoak.
Taulatu egindako egingo da bat osoa aplikazioa erreakzionatu duzu.
Eskuzko hoditeria guztiak jasoko ditu, eta zuretzat Grunt lan egin,
eta hau dela eta, arreta jarri besterik ez duzu besterik idazten erreakzionatzen.
>> Beraz, funtsean eraikitzeko a Erreakzionatu aplikazioa nontrivial da.
Honez kable guztiak elkarrekin, baina ez dago Hori da guk egingo dituzu tresnak dira.
Beraz, egin nahi izanez gero bat erreakzionatu Aplikazio, saiatu da bide hori egiten.
Esperimentu besterik nahi ez badu, CodePen hau erabili ahal izango duzu
CodePen honetako duelako guztiek erreakzionatu kableatuaren.
Egin dut lan guztia zuretzat dagoeneko.
>> Beraz, nahi bat bezala egin nahi baduzu ekoizpen erreakzionatu aplikazioa askatzeko,
saiatu generadoreak horietako bat.
Jolastu besterik nahi ez baduzu inguruan, askotan merezi besterik ez da
atsegin saiatu inguruan jolasten hemen CodePen orrian.
Soinu ona?
Cool.
>> Beraz, hori da dena daukat.
Berriz ere, kode eta adibide guztiak dira Web orri honetan izango da hemen.
Beraz, berriro ere, ez genuen hitz egin buruz erreakzionatu sintaxia askoz,
baina horiek guztiak aurkitu Xehetasun sintaktiko gutxi,
hori guztia, eskuragarri izango da Webgune hau hemen.
>> Beraz, nahi nuke gomendatuko lehen urratsa.
Jarri da zure CodePen sartu.
Saiatu dadin lanean Bigarren urratsa da.
Ez dago laugarren urrats bat da, eta besterik ez Begira non horretatik lortuko duzu.
>> Galdera gehiago, check Orri horretan egindako edo bidali mezu bat.
Hori da nire posta elektronikoa da.
Baina lagundu nahi duen batera Maite nuen baliteke buruzko galdera erreakzionatu.
Beraz, bai, hori da dena daukat.
Eskerrik asko guztioi asko egiteko behaketa edo parte hartzeko.
Eta edozein zalantza hartuko dut honen ondoren baliteke daukate jada.
Beraz, eskerrik asko guztia ikusten da.