>> [Muusika mängib]
>> Neel Mehta: Siin see läheb.
>> Noh, igaüks teretulnud web apps tulevikus reageerida.
See on CS50.
Minu nimi on Neel.
Ma olen LS CS50 ja üliõpilane Harvardi kolledž ja väga, väga
kirglik veebi arendaja.
Nii et ma olen väga põnev räägi teile täna,
kas sa oled siin või kodus vaadates umbes React, mis on jällegi
nagu ma ütlesin, tulevik web apps.
>> Nii reageerimisvõimalus web raamistikku.
Ja nagu ma olen öelnud, et mõned inimesed siin,
raamistik on vaid tööriistade komplekt, mida saab kasutada
struktureerida ja luua oma web app.
Ja veebirakendused, jälle, veebilehed mis on interaktiivne nagu Facebook,
Twitter.com, Instagram.com, mida iganes.
>> Nii Facebook on veebipõhine raames mis töötati välja Facebook
paar aastat back-- reageerimisvõimalus.
See on nüüdseks kasutatakse Facebook oma mobiiltelefoni apps
ja web app, Instagram.
Khan Academy on teine silmapaistev alguses kasutuselevõtja reageerida.
>> See on tõesti olnud saada väga populaarne.
Kui te olete kunagi kasutada asju nagu Nurga või Selgroog, see on ühe ja sama perekonna,
kuid pärast seda on palju viljelijäksi populaarsust.
See on kuum uus asi.
See on tõesti suur.
>> Ja nii Reageerima on hea mitte ainult kui web raamistik hoone liidesed.
See on hea hoone web liidesed.
Seal on ka asi nimetatakse Reageerima Native mis
võimaldab teil luua liidesed Android ja iOS
ja võibolla teistele platvormidele tulevikus kasutades ainult sama JavaScript koodi.
Sa võid kasutada täpselt sama JavaScript koodi muuta veebilehed,
muuta Android apps ja iOS rakendusi.
>> See on väga, väga põnev aeg.
See on tõesti väga lahe võimalus.
See on tõesti universaalne web liides arengu vahend,
nii et see on väga, väga Oluline teada.
Ja nagu ma ütlen inimestele Enne seda, ma arvan,
on muutu, kuidas me ehitada veebirakendusi igavesti.
Nii et see on võibolla natuke liialdus, aga ma arvan, et see on päris hea asi teada.
>> OK, siis millised on reageeriksid?
Reageerida on raamistik võite kasuta hoone liidesed.
Liides on jällegi veebileht, eks?
Nii et siin on Instagram.com, kasutab reageerida.
>> Reageerida on ehitatud Idee komponente.
Komponent on HTML element steroidid,
nii HTML element on nagu nupp.
See on punkt.
See on päis, eks?
Ja Instagram kasutab neid, kuid see Samuti kasutame komponente reageerida.
>> Reageerida komponendid souped-up HTML elemendid
et on oma käitumist milles need sisalduvad.
Nii, näiteks, me ei ole aeg element, aeg, komponent,
mis sisaldavad näiteks ajatempel, sa tead,
Profiili komponent, mis ei sisalda profiili pilti
ja isiku nimi.
See võib olla näiteks counter, mis võib loota, nagu mitmed muud sarnast,
ja kui sa vajutad seda, siis see arvu suurendada meeldib.
Komponent on lihtsalt kamp HTML koodi
on teatud funktsioone pakitud sees on.
Nii et see on nagu HTML element steroidid, nagu ma enne ütlesin.
Te võite võtta neid komponente, ja võite panna need kokku
teha uusi komponente, in Sel juhul postituse osa,
mis sisaldab kogu see kraam.
See võiks sisaldada aeg, Profiil, LikeCounter, võibolla kommentaar
ja võibolla pilt ise.
Ja nii veebirakendused lihtsalt ehitatud, võttes komponendid ja paneb need kokku.
Instagram feed on midagi enamat kui hunnik postitusi üksteise järel,
iga postitus sisaldab nagu aeg, Profiil, LikeCounter, ja nii edasi.
See on selline nagu maja ehitamine.
Sa ei ehitada maja ülevalt alla.
Võtad components-- sa võtta nagu vannituba.
Võtad bedroom-- sa kinni neid koos, ja sul on uus osa.
Sul on uus osa maja.
>> Nii reageerimisvõimalus kõik ehitatud Selle idee komponendid, mis
on interaktiivne, mis on deklaratiivse.
Nagu sa ütlesid, milline profiil on, ja see muudab selle.
Nad on komponeeritav.
Te võite võtta aega ja profiili, panna need kokku, et midagi paremat.
Ja nad on korduvkasutatavad, nii et kui sa on lähtekoodi post,
siis võiks kinnistada, et kuskil.
>> Võite embed Instagram asi oma kodulehel.
Võite kinnistada Facebook, näiteks nii kaua kui see kasutab React samuti.
Nii komponendid on tõesti, tõesti, tõesti võimas ehituskivid veebis
mida saab kasutada kõikjal ja panna koos teha uusi ehituskivid.
See on väga, väga põhjaliku ülevaate.
Niisiis, jälle, kui teil on Küsimuste üheski punktis
filosoofia kohta reaktori kodeerimine, et mind peatada, ja andke mulle teada.
>> OK, nii et reageerida on lahe, sest see on teistmoodi otsin
kuidas saab ehitada veebirakendusi.
Te olete ilmselt kuulnud MVC, et mudel sa kontrolli CS50 või mis iganes
teiste katsetamine klassid te kasutate.
Ja kõige raamistikud on ehitatud ideele MVC.
Reageerida ei ole.
Lasta on üles ehitatud ideele ühesuunalisi andmevoo
nagu näha selle diagrammi või graafilise siin.
>> Põhimõtteliselt sul on andmete allikas.
Ja andmeallika otsustab kuidas panema teatud komponente.
Ja komponendid siis, kui nad muutuvad,
nad ütlevad andmeallika muuta.
>> Kui soovid kasutada Instagram Näiteks võib teil olla
nimekirja post esemeid nagu andmebaasi või midagi.
See andmeid.
Ja siis meie post komponendid võtab, et andmed,
ja kasutada seda andmete muuta asi ekraanil.
Seda noole andmetelt komponent on
ja siis, et samu andmeid kasutatakse muuta kamp komponendid.
>> Facebook Messenger, et Näiteks, mis on React,
sa oleks võinud nimekirja Sõnumite oma andmete allikas.
Ja mis muudaks mitte ainult sõnumite loend
vaid ka nimekirja sõpru sul on.
Teil on lugemata arv.
Võib-olla ka muuta Facebook asi see on allosas Facebook.com.
Samad andmed on ühes allikas tõde
ning et põhjustab palju komponentide eest.
Ja alati, kui üks nendest komponentide vahetamisel
see läheb tagasi muudab andmete allikas.
>> Sa saatke sõnum, eks?
See muudab andmete allikas.
Sa loe oma sõnumeid nii seate lugemata 0.
See muudab andmete allikas.
Ja teate, et kõik need ühe nool läheb tagasi samal andmeid
allikas, et sa tead, arvestades teatud andmete kogum,
sa tead täpselt, mida lehele läheb nägema.
See on determineeritud.
Tead, kui teatavad andmed, mida lehe läheb nägema.
Sa ei saa ennustada, kuidas see läheb käituda ja kuidas asjad lähevad
töötada, kui nad kokku panna.
>> Ja kui mul oleks miljon komponendid Siin oleks käituda samamoodi, eks?
Sa ei ole mingit imelik ühendusi.
Üks andmeid sulatatud miljoni komponendid.
Miljon komponendid võiksid minna tagasi ja muuta andmeid.
Ja nii see on väga tore.
Me arendame komponeeritav, kergesti skaalautuvia veebirakendusi.
>> Teil on üks andmeallikas, allikas tõde.
See ütleb teie komponendid kuidas panema lehel
ja komponendid hakkama suhtlemist.
Ja kui nad tahavad muuta asju, minge tagasi
ja öelda andmeallika muuta.
On loogiline?
Nii Reageerima on kõike mõista kuidas ehitada osa
ja kuidas teha oma osa suhelda välismaailmaga.
>> Making osa üksteist mõjutavad, välismaailmaga
kasutab teise tehnoloogia nimetatakse Flux, mis
on raamistik, mis on lisada peal reageerida.
Me ei räägi sellest.
Me läheme lähemalt rääkida, kuna andmed, siis kuidas saab muuta komponent?
>> Ja nii Reageerima on väga lahe, sest sa saab seda kasutada mis tahes kolp soovite.
Kui teil on nagu Python kolp, kui teie Python võib välja sülitada mõned andmed,
Reageerida võivad selle muuta.
Kui te ei ole JS väljundid Andmete, React muudab selle.
Ruby rööpad üles andmed reageerivad muudab.
>> Nii Reageerima on põhimõtteliselt web view-- esiotsa koos komponendid
iga andmeallika üldse.
Ja nii läheb andmeallika reageerida komponendid on üsna lihtne.
Minnes teistpidi on natuke raskem.
See kasutab Flux nagu ma mainisin.
Me ei saa sinna.
Me keskendume rohkem data-to-komponendi poolel.
Sel moel saab teha lahe, lõbus web apps.
See ei mõjuta välismaailmaga nüüd, kuid see on teine ​​lugu.
>> OK, nii et kui sa olid siin minu viimane seminar
sa tead, et kõik koodi jaoks Tänapäeva rääkida saab olema sellelt aadressilt
siin, vabandust, see URL siin.
Ja põhimõtteliselt me ​​läheme läbi nelja etappi, võibolla viis,
Tõenäoliselt mitte viis.
Me liikuda neljast etapist hoone proovi Reageerima app.
Ja nii kõik lähtekoodi iga sammul
saab olema siin, nii et kui Te jälgite koos kodus,
julgelt tutvuma selle koodi.
Kui oled järgmised mööda siin, saadame selle näitamist ekraanil
nii ei muretse.
Aga kui sa oled kodus, tunnen tasuta külastada sellel veebilehel.
Ja, jah, siis peaks olema võimalik saada kõik koodi sa kunagi vaja siin.
Nii et see on hea petma lehte ka oma tulevikku seiklustest reageerida.
Cool, nii et kui igaüks, kes on siin, ja isegi kui sa oled kodus,
tõmba sellele leheküljele is.gd/cs50react, no kapitali, ei alakriips, ei midagi.
>> Näete lehele, mis näeb välja natuke niimoodi.
See on asi, mida nimetatakse CodePen.
CodePen on koostööprojekt kodeerimine keskkond
kellega ma võin kirjutada koodi siin, ja see saab automaatselt saadetakse teile.
Ja nii ma ei kirjuta koodi.
Ma saan käivitada koodi siin.
>> Sest example-- ja kui see reloads-- näha, Ma töötab JavaScript koodi lehel
siinsamas, ja siis see automaatselt muuta veebilehe
Selle JavaScript koodi.
Ja nii on see nii meil proovida koodi
tõesti kiire, ilma et peaksid kasutama meie ID või kasutada meie kohaliku masina
või mis iganes.
See on väga kiire viis, kuidas saate mockup ja katsetada erinevaid koodi.
>> Nii et ma lähen võttes Näiteks koodi, paneb ta siin.
Me läheme töötavad läbi.
Ja kui sa oled kodus, siis ei tõmba see üles ka.
Ja ma olen juba paigaldatud Reageerida siin, nii saad lihtsalt
kirjutada oma koodi siin, ja proovida, kui sinu oma mänguväljak.
>> Jah, kui igaühel avada see link siin.
Palun andke mulle thumbs up kui sul on see avatud.
Cool, külmas jahtuda.
Siin ei ole midagi nüüd, kuid muudame, et väga kiiresti.
>> OK, nii Reageerima on JavaScript raamatukogu ja sellisena
nõuab teadmisi JavaScript, mis on veebi programmeerimine keeles.
Ja see on kasutatud muid asju nüüd liiga, kuid peamiselt veebi arendada
keeles, nii et kui sa ei tunne et lugeda saidi nimega JSforCats.com.
See on imeline.
Sa võid õppida JavaScript poole tunni pärast.
See on uskumatu.
>> Nii et see on väga lugeda.
Samuti on palju HTML siin, sest me veebilehekülgede muidugi.
Nii et kui sa oled võõras HTML, tutvu HTMLdog.com.
Ma arvan, õppimine Reageerima on miljon korda lihtsam, kui sa juba
tean ehituskivid.
Kui teil on komponente, see on lihtne teha suurem osa.
See on Reageerima keele jaoks.
>> Nii et laske käia ja anda need asjad loetud.
Paus see video.
Anna lugeda, kui te olete kodus, kui te ei ole
tuttav HTML või JavaScripti
OK, nii et me läheme teha, on meil lähed tegema
väga lihtne sähvik app kasutades reageerida.
Me läheme on sähvikute.
Võite klapp kaardi edasi ja tagasi.
Ja me ka nimekiri kõik kaardid, mis meil on,
ja kui me ei tunne ambitsioonikas, me võiksime olla
võimalik vahetada autod neile klõpsates.
>> Aga see on oma paljaste luud, väga lihtne Reageerima app.
Ja nii see on tegelikult ei ole tühine rakendada,
kuid me kavatseme näidata, et kui sa see, et see on väga lihtne laiendada seda
kui teised inimesed sind aidata sellega.
Nii et me läheme läbi nelja etappi alustades nullist üles ehitada seda.
>> OK, nii et neli etappi, siis me alustad esimene samm.
Esimene samm saab olema hoone oma esimese osa.
Nagu ma enne ütlesin, on osaks Reageerima on lihtsalt HTML element steroidid.
See määrab HTML ja mõned käitumismallid ning see
täpsustatakse, kuidas inimesed saab suhelda ta kuidas
see oleks seesmist olekut.
Nagu nuppu teavad meeldib, kuidas paljud korda on see olnud klõpsanud näiteks
ja siis tead, kuidas panna ennast välja.
>> Nii lähme edasi ja ehitada meie Esimene osa kasutades JavaScript.
Nii et kui süntaks näeb imelik, Ongi, sest see selline on.
Niisiis, jälle, me ei kavatse teha muutuja nimega
app kasutades märksõna lasta, mis muudab muutuja,
lase App võrdne React.createClass.
>> Reageerida on raamatukogu ja on create klassi funktsioon.
Ja see funktsioon on natuke koodi, mis sa
saab kasutada, et luua uus tüüpi Reageerima komponent.
Ja nii React.createClass teeb komponendi
ja see komponent saaks teha asju.
Peaasi see saab teha, on muuta midagi, muuta funktsioonina.
>> Jällegi, kui see indeks ei ole selge, sa, ma soovitan teil minna JS kassidele
ja seda kontrollida.
Kas see suumitud piisavalt hästi?
Cool.
>> Nii et iga komponent vajadustele olema muudavad funktsiooni.
Renderda funktsioon ütleb, Mida ma printida ekraanil?
Kuid osa on kasutu, kui see ei ole
tea, mida printida ekraanil, nii sa pead olema muudavad funktsiooni.
>> Nii et muuta asi, siis lihtsalt vaja naasta mõned HTML.
Ja mis on lahe on see, et seal on asi, mida nimetatakse
JSX, mis on pikendamine JavaScript mida kasutab reageerida.
See olgem teil kirjutada HTML sees sinu JavaScript, mida
kõlab selline imelik, kui kõigepealt mõtle selle peale,
kuid see muudab palju mõistust hiljem.
Nii et me saame seda teha.
Kui te olete juba tuttav HTML, ma tean meil div üldotstarbelise
konteinerisse kraami.
Me ei tagasta div ja sees div, saame panna stuff.
>> Ütleme, et me tahame muuta ainult otse-up sähvik nüüd.
Sähvik, ma ütleksin, on küsimus ja vastus.
Nii sees div, olgem välja printida lõikes
mis ütleb question-- Mis on lõplik vastus elu, universumi?
Ja siis on vastus saab olema muidugi 42.
>> See ei tulnud ka üldse.
Jah, nii et põhimõtteliselt saab tõesti kirjutada HTML sees JavaScript.
Ja see saab olema trükitud viidud ekraani.
Nii saab seda proovida.
>> Nii et meil on meie osa.
Me peame rääkima Reageerida panna komponent ekraanile
nii React.render, et märgata, et meil raviks app nagu iga teine ​​element.
Me kirjutada nii, nagu ta oli HTML element.
Nagu asemel, et öelda, nagu img pildi või p lõikes,
Sa kirjutad App, et App on kohelda nagu HTML element.
Nagu ma enne ütlesin, et see on element steroidid.
>> Nii et sa muuta App, ja sa anna see asetada see.
Ja see, kuidas saad ütlen seda, kuhu panna see.
Olen loonud lihtsa div kohta leheküljel nimetatakse ID-lehel,
ja see on kui element läheb minema.
>> Ja me ei kavatse joosta HTML.
Põhimõtteliselt see ei hakka asetada selle lehekülje element
et meil on ekraanil.
Nii see töötab see kood, ja see juhib seda asi ekraanil, nii et siin me oleme.
Me oleme teinud meie esimene Reageerima komponent.
>> Nii nagu sulgege, me õrnalt tehtud uut tüüpi komponent, eks?
See on see, mida React.createClass.
Ja mis osa me ütles ta, mida ta peaks tegema.
Kui see komponent on trükitakse ekraanile,
see välja printida div koos kahe lõigu sees on.
>> Ja mida me tegime, tegime uue app abil nurksulu app märke.
Me rääkisime seda panna see sees lehel element.
Ja nii ma tegin, see loodud uus rakendus, mis malli.
Ja siis ma ütlesin seda, et muuta see.
Nii ta ütles, OK, app, Mida ma peaksin välja printida?
App ütleb, minna välja printida div Kahe punktid sees on.
Ja voila, seal on meie div koos kaks lõiku sees on.
Mõtet nii palju?
>> Niisiis, jälle kogu väljakutse React on lihtsalt teada, kuidas teha komponente.
Kuidas teha komponendid töötavad koos.
Nüüd, kui oleme teinud meie esimene komponent, lähme tagasi
ja teha komponente kohandatav.
Nii et sa tead, kuidas HTML teile saab anda oma nupud klassi?
Võite anda oma ankrud href.
Võite anda oma sisendid tüüp, eks?
Võite anda rohkem custom omadused kõik oma elemendid
et muuta see huvitav.
Ja me tegelikult saame teha täpselt sama asi.
>> Ütleme, et me tahame, et meie app minna, et mõni kaart.
Praegu me lihtsalt sulatatud hardcoded kaardi.
Me teame, et on ainult üks Kaardiga saab teha, nii et me oleme
kavatsen proovida ja muuta see nüüd nii et me ei anna talle mõned kaardi.
Seda saad välja printida kaardile.
>> Sa peaksid püüdma teha oma komponente väga üldine eesmärk.
Nii et see, kuidas ma saaksin posti see mu sõber ja olla nagu,
mida iganes sähvik pead, lihtsalt toita see siin,
ja see teen seda ise.
Võid panna teisi asju oma app.
>> Aga kõigepealt, olgem murda kuni kaheks komponendiks,
kuid me tahame, et eraldada kaart trükkimine osa tegelikust app osa.
Mida me saame teha, on meil võid seda App
to CardView, vaid uus nimi app,
ja me saame teha uus komponent nimega App,
ei tohi segi ajada vana App.
Me ju createClass, ja nagu HTML,
võite pesa Reageerima komponendid sees üksteist.
>> Nii et muuta funktsiooni, funktsiooni tagastamise CardView,
ja see on täpselt sama asi.
Vaata, miks see on sama asi?
Selle asemel, et muuta ainult app, mis on div sidumist sees on,
app muudab CardView ja CardView muudab div ja punkt.
Nii et see on meie esimene näide pesitsevate elemente sees üksteise peale.
Kas see on mõtet?
Niisiis, jälle on meil CardView element.
Meil on app elemendid et see on suurem kui.
>> OK, nii et me tahame, et meie CardView-- kui te annavad hea CardView teatud kaardi,
see saab välja printida teile, eks?
Nii et kõigepealt peame tegema kaart nii et vaatame teha kaardi objekti.
Nii et minu kaart equal-- kui sa oled kõik tuttavad,
see on lihtsalt märke tegemine vaidlustada JavaScript.
See on selline nagu struct C, nii et tegime kaardi,
ja nii nüüd saame taolist kaart vara või atribuudi HTML
terminoloogia meie app.
Nii et me saame seda teha, App kaardi võrdub myCard.
>> Sa tead, kuidas sisend, sa input type võrdub teksti või nuppu
klassi võrdub btn eest alglaadimise ,?
Sama mõte, App kaardi equals-- sul panna traksid siin--
App kaardi võrdub myCard, nii et see ütleb meil seda kaarti objekti.
Ma lähen edasi seda vara app komponent.
Ja see app komponent pääse ta ja teha
huvitav värk sellega.
>> Nii et meie app saab olema antud kaart, nii et praegu
olgem on app lihtsalt anda mälukaardilt CardView
ise, sest nagu app ei ole läheb tea, mida sellega teha,
nii me lihtsalt anna see CardView.
Nii me andke seda Samamoodi kaardi võrdne,
ja nii iga komponendi pääseb asju, mis on talle antud.
Nad pääsevad omadused mis on talle antud
kasutades seda süntaksit, this.props.card.
>> Mis juhtub siin sul on myCard objekti.
Jätate see app kasutades App kaardi võrdub myCard.
See kaart objekti manustatakse teie app.
Rakendus võib seda kasutada kui this.props.card.
See on selline nagu pildi teab, mida see allikas on.
>> See app teab, mis see on kaardi on, ja seda saab teha asju koos sellega.
Seda saab teha arvutusi.
Seda saab teha otsuseid, mis välja sellest.
>> Sest nüüd, ma läksin edasi this.props.card peale CardView.
Mõtet nii palju?
Seda saad mõttekam nüüd.
>> OK, nii et nüüd me oleme CardView.
Meie CardView, kuna kaardi, peaks välja printida oma küsimus ja vastus.
Praegu me lihtsalt välja printida mõned hardcoded küsimused ja vastused.
Me peame mõtlema out-- vajame küsida kaardi, et nad andsid meile
Mis on küsimus ja vastus, ja printige viidud ekraani.
>> Nii et me saame seda teha siin.
In muuta begin-- esmalt teha võrdne.
Mida me teeme siin me teame, et kaardid on andnud meile kinnistuga,
õige?
See on andnud meile sisendina.
Nagu see on peaaegu nagu argumente funktsioon.
Kaardil on argument Peaaegu sellele CardView.
>> Me ekstrakti, mis ja panna see muutuja küsimus.
Veenduge, et vastus läks muutuva vastus.
Küsib, et kaardi vastata.
Ja nüüd, et meil on neid, printimise asemel, et teksti
me läheme välja printida mida iganes nad andsid meile.
>> Nii et see stuff-- nii me läheme välja pandud Küsimus Vastus.
Vaatame, kas see toimib.
Cool, nii et vaatame samm läbi veel üks kord lihtsalt olla kindel.
>> Nii et minu kaart on kaart objekti, ja me on andnud sellele kaardi app.
Ja app läheb võtma kaardi ja annab selle CardView.
Ja see CardView ütleb, kui te anna mulle sähvik objekti,
Ma printida oma küsimus ja tema vastus, eks?
>> Mida ma võiksin teha, on mul võimalik Kirjuta selle koodi, esimene
nagu 10 rida minu kood, mu sõber.
Ta võiks kinnistada seda oma taotluse.
Ja nii kaua, kui ta tegi sama asja, nagu CardView kaardi võrdub see,
nii kaua, kui ta lõi CardView ja andis talle õiguse saamiseks
ta muudaks oma kaardi.
Ja nii see tee, see on tõesti lahe viis, kuidas saate luua
komponendid, mis kasutavad üksteisega, eks?
See kaart, ma võiks avaldada Selle CardView internetis,
ja inimesed saaks seda kasutada.
Ühesõnaga, see on nagu üks standard funktsioone C raamatukogu.
>> See on funktsioon, kus keegi on kirjutanud.
Sa annad teatavat sisendit.
Seda saad toota teatud toodangut.
Sa ei hooli, kuidas see toimib sisemiselt.
Niikaua kui sa annad talle õiguse sisend, siis teen õige väljund.
>> Ja osa võib olla mõelnud samamoodi.
See CardView on nagu raamatukogu funktsiooni.
Kui annad talle kaardi kui vara, siis see
välja printida sisu, et kaardi.
Nagu siis, kui ma muudan kaart asemel olla nagu see, mis on 5 pluss 37
ajakohastab vastavalt.
Nii lihtsalt muutes sisendi, see saab teatud toodangut.
Nii et sa ei mõtle komponendid peaaegu funktsioonidena sel viisil, mis
saab kokku panna.
Sa saad sisestada, nagu seda CardView kui sisend, saad toodangut.
Sel juhul väljund on HTML.
Mõtet nii palju?
Cool, et jälle omadused kuidas saab edastada teavet
ja sealt komponendid.
>> OK, nii et vaatame seda asi interaktiivne.
Praegu on selline igav.
Mis on [kuuldamatu]?
Saate printida mõned välja, kuid see on kõik ta saab teha.
>> Nii lähme tagasi vana küsimus just nüüd.
OK, nii et just nüüd on need komponendid on igav, sest kõik nad teevad,
nad saavad sisestada.
Nad teevad väljund, eks?
See on selline igav.
Me tahame oma komponentide saama
mingi sisemine riik nagu mäletan midagi.
>> Sest sähvikute jaoks Näiteks milline riik
Võib soovid mäletan sähvikute?
Mis ajutine seisund Võib mida tahate mäletada
jaoks sähvikute in sähvikute app?
Sihtrühm: Kas see on keerata?
Neel Mehta: Jah, muidugi.
Nii võiksite hoida peal on teil toime tulla või on
sa kummuli kaardi.
On Facebook, näiteks, siis oleks tahad meeles pidada, kus uudistevoo
sa oled või soovid, kes on profiili sa teed praegu.
>> On Messenger, nagu mida tekst, mida kirjuta sisend kasti, eks?
Kui te värskenda lehekülge, see läheb ära.
Aga sa tõesti ei hooli.
See on lihtsalt ajutine.
Jah?
>> Sihtrühm: [kuuldamatu]
Neel Mehta: Nagu välk kaart, nagu sa ei näe
küsimus poolel või vastuse poole?
>> Sihtrühm: OK.
>> Neel Mehta: Like a kahepoolne sähvik, eks?
Jah, nii soovid on see idee nüüd
Mul on omadused, mis on nagu sisendid, kuid riik, mis on ajutine, uh,
kus sa oled lehel, eks?
Jällegi, ma ütlesin Facebook Messenger, mul on nagu, kus isik
vaatate Facebook või kes on profiili, eks?
>> See on vaid ajutine.
Oluline on näidata kasutajale mis toimub, kuid värskenda lehekülge.
See ei ole tegelikult küsimus.
Nii et see on ajutine riigi, nii et me kõik seda riiki.
>> Niisiis, jälle, seal on riigi ja rekvisiidid.
Rekvisiidid on antud sisend Teie andmete allikas.
Riik on nagu vaikimisi.
See on nagu asjad, mis teeb asja interaktiivne.
>> Nii meie CardView-- et vaatame Meie CardView-- nii see oli tore.
Mida me teeme siin, me läheme puudutada CardView ja ainult CardView.
Ja nii mu sõber, kes sai selle, et nad ei märka mingit vahet.
Nad ei pea muutma ükskõik oma koodi,
kuid nad tahaks näha oma CardView sai souped üles.
See on kena asi komponendid.
>> OK, nii et meie CardView, proovime ja jälgida, kas me järk-up
või kummuli.
In Reageerima me teeme seda esimest täpsustades algse seisundi.
Kust kaardi hakata?
>> Nii on funktsioon nimega getInitialState toimida, ja me tagasi objekt.
See objekt sisaldab mingile riigile ja riik on lihtsalt võtmeväärtuste paari.
Nagu juhendada, siis on oluline ja väärtus, siis on nagu nimi on string.
>> Sel juhul oletame ees on tõsi.
See ütleb, et meil on riik.
Üks osa riigi on atribuut nimega ees.
[Kuuldamatu], et vaikimisi me ees kaardi,
ja me saame seda muuta kui me flip kaart.
On loogiline?
>> OK, nii muudab, just nüüd, me oleme näidates küsimus ja vastus.
Nüüd, mida me peaksime tegema on näidata küsimus
kui me esiküljel kaart nii Vastus on, et tagaküljele.
Sellepärast te kõik teha kaardi interaktiivne.
Nii proovime ja sellele siin.
Noh, esiteks lihtsalt muutuja.
Me ei küsi nüüd this.state.front.
Me riigisaladusele juurdepääsuks sama meil juurdepääsu rekvisiidid, nii this.state.front.
>> Kui me ees, siis teksti on this.props.card.question.
Kui me oleme ees kaardi, me ei kavatse proovida ja haarata
küsimus kaardist.
Vastasel juhul, kui me oleme taga kaardi, mida me teeme?
>> Sihtrühm: Vastus?
>> Neel Mehta: Yep, nii teksti võrdub this.props.card.answer.
Aga kui te märkate, me kasutame riik tegema otsuse
sest nüüd komponendi siis teistmoodi
põhineb off kuidas need suhelda ta.
Nii et selle asemel välja trükkida seda, me lihtsalt välja printida teksti.
Cool, nii et nüüd, kui sa näed, me näeme ainult küsimus.
Ja kui ma saan muuta riik siin käsitsi et ees on vale saame 42 tagasi.
>> Niisiis, jälle selle komponendi on oma riik.
Nagu nuppu teab, kas see on vajutatud või mitte,
see asi ei tea, mis on esi- või tagaküljel.
Vaikimisi on ees.
Ja siis, kui see on ees, me välja printida küsimus.
Kui see on tagaküljel, siis me välja printida vastus.
Niisiis, jälle teabe arvestades on sama.
See lihtsalt tundub teistsugune põhjal, kuidas sa programm seda.
Nii näiteks Facebook Messenger, isegi kui saad sama andmeallika
see võib erineda sest riik on erinev.
Sa vaadates teine ​​inimene sõnumit.
>> OK, nii et see on kõik hästi ja hea, kuid mis nüüd on tegelikult
teeb meid võimalik muuta, kas Meie kaart on ees või taga.
Me saame seda teha, lisades flip nuppu, nuppu, et kaart, mis
flip kaart, kui see on [kuuldamatu].
Lisame nupule siin, see nuppu, ja see ütleb nupp flip.
>> Ja nii kohe, see ei tee midagi.
See lihtsalt ilus.
Mida me saame teha, on meil võimalik lisada klõpsuga handler, onClick võrdub this.flip,
ja me määrata flip hiljem.
Aga põhimõtteliselt, onClick on funktsioon, mis
saab nimetada, kui kasutaja klõpsab ta.
>> Nii nuppu teavad kui see on klõpsatud.
Läks see on klõpsatud, see klapp kaardi.
See on selline nagu teie pizza tarne kutt.
Sa oled nagu kõik õige, kui keegi kutsub mind, ma pakkuda pizza, eks?
>> Sa registreerib kuulaja.
Kuula sündmuse.
Sa saad kutsutud ja kui Kui juhtub, kui midagi.
Sa saad pizza.
Sel juhul, kui sa oled klõpsatud, siis flip kaart.
>> Ja nii on meil vaja määratleda funktsioon, mis flip kaart
nii me kirjutada, et õigus siin, flip funktsiooni.
Ja mis sa arvad flip teeme?
Jälle see saab nimetada, kui me Klõpsuga nupule.
Mida peaks funktsiooni flip teha?
>> Sihtrühm: Change this.state.front alates true false, false true.
>> Neel Mehta: Yep, nii võtta mis tahes this.front on-- ees riik.
Võtke ees riik, kui see on tõsi, et see vale.
Kui see on vale, et see oleks tõene, eks?
Nii proovime seda.
>> Sa ei saa muuta riigi lihtsalt tehes this.state.
Sa ei saa seda teha.
Sa pead kasutama funktsiooni nimetatakse this.setState.
>> Nii saab öelda this.setState ees koolon seda, kus jällegi hüüatus
punkt tähendab vastupidist.
Ma arvan, et kui see. state.front On tõsi, siis see keerata vale.
Nii me määrata riigi alates true false.
Kui see on vale, siis me seadke see vale, et tõsi.
>> Just märgata, et me seame ja saada veidi erinevalt, ja nii proovime seda.
Bada Bing, vaata seda.
Klapp nupp nüüd lülitage taha riik.
>> Ja nii siin, kus sa näed Natuke maagiat reageerida.
Nagu me ei rääkinud ta seda uuesti muuta.
Me ei rääkinud ta tõmmata midagi.
Kui sa teed seda ilma Reageerima, soovid
on mina-- meeldib, kui flip nupule vajutamist,
sa pead seda rääkima käsitsi ümber muuta, eks?
>> Reageerida on väga lahe, et kui te annab see teatud riigi ja omadused,
see alati muuta täpselt sama asi.
Ja nii, kui me oskame ja muuta Riigi ja omadused,
reageerida lihtsalt uuesti muudab kogu asi.
Ta teab, et seal on üks-ühene vastavus
riigi ja parameetri ja HTML.
Nii et kui üks nendest muutub läbi olekusse,
see muutub, kuidas tasustamise ümber sulatatud.
Ja nii põhimõtteliselt reageerimisvõimalus nagu Teid ootab muuta.
>> Iga kord, kui muutub midagi, see saab uuesti muuta kogu lehel.
Ja kui see kõlab ebaefektiivne, sellepärast oleks,
aga reageerivad kasutab asi nimetatakse Shadow DOM.
Selle asemel, et joonistus lehel otse, hoiab virtuaalne HTML puu mälu.
>> Sa tead, HTML on nagu puu, nagu hierarhiline andmete struktuuri.
See hoiab võlts puu mälu ja kui sa uuendada lehel
see saab juhtida teise võlts puust ja see saab arvutada
mida muuta on vaja teha mis teeb kaks puud võrdsed.
Ühesõnaga, see praktiliselt re-muudab palju.
Ja siis ta ainult meeldi muutused lehekülje vähe tweaks kui vaja,
nii et see on väga, väga, väga tõhus.
>> Nii et põhimõtteliselt reaktsioonivõime kui sa midagi muuta,
see saab uuesti muuta lehekülje praktiliselt.
Seda saad aru saada, mida ma pean muuta enam reaalne lehel kajastada
virtuaalne lehele ja siis saad seda teha.
See on virtuaalne DOM.
See on üks suurimaid funktsioonid reageerida.
>> Kas see on mõtet?
Kas küsimusi on?
Jah?
>> Sihtrühm: Kuidas võrrelda veel MVC
et me rääkisime Enne nagu vahendeid.
>> Neel Mehta: Jah, küsimus kuidas see on võrreldes MVC?
Sa küsisid ressursse.
Noh, räägime, kuidas see toimib.
>> In MVC, soovid uuendada mudelit.
Sellisel juhul oleks meil kaardi mudel.
Vaade oleks flip nuppu ja kontrolli
oleks flip funktsiooni.
Nii arvates oleks öelda controller klapp klapp.
Flip oleks öelda mudel muuta, eks?
>> Ja nii, kui sa MVC, siis kuulata mudeli muutmiseks,
ja sa uuesti muuta seisukohta vastavalt.
Või sa lihtsalt meeldib on kontroller.
Oodake mudeli muutmiseks ja seejärel valida ja valida osa nagu asi
muutma.
Siin on meil üks asi, kuid suur app,
sa pead nagu mäletame, mis muutus iga koht,
nii et see on natuke tüütu.
Ja nii reageerimisvõimalus kena sest see on Shadow Dom.
Seda saab endale lubada vaid kirjutada kogu asi.
Sa ei pea valikuliselt nagu arvata, mida uuendada.
>> On Facebook kui soovid saada uus sõnum, MVC,
sa pead meeles pidama, OK, muuta asju
ülaosas on lehele, sõnumi ikooni.
Ka pop uues aknas allosas.
Samuti teeb uus asi, et aken.
Mängida ka heli.
>> See on palju asju läheb läbi samal ajal.
Ja kui sa seda ei tee on Shadow Dom, soovid
pead tegema, et käsitsi, sest sa ei saa lahti terve lehekülje.
Sa ei saa, nii et teil on muuta iga asi käsitsi
mis on tõesti tüütu MVC.
>> Nii et olla kokkuhoidlik, nad valikuliselt
lehekülge uuendada, mis on tõhus, vaid ka tüütu.
In reageerida, sest Shadow Dom, saad nii asju tasuta.
See on tõhus, sest Shadow Dom.
Pudelikael uuendab lehel.
See ei tee puu manipuleerimist.
Sa saad tõhusust.
Lisaks saate kasutusmugavus, sest kui sa lihtsalt kirjutada terve lehekülje,
aga sa lihtsalt tean, kõik õige, asjad saab olema leheküljel kuhugi.
See võib olla teises kohas, kuid see saab olema lehel, eks?
Nii et sa lihtsalt uuesti sulatatud Kogu asi peaaegu,
ja te võite teha paar muudatusi leht ise.
>> Niisiis, jällegi MVC te oleks valida
vahel kasutusmugavus ja efektiivsus, ja reaktsioonikiirust, saad mõlemad.
Nii et see on parem.
On loogiline?
Solid.
>> OK, nii et vaatame, räägime natuke samm 4,
kuidas me saame kinnistada komponendid.
Nii et meil on see praegu.
Meil on lahe väike nupp.
Saame flip ta tagasi ja edasi, ja see on kõik, mida ta teeb.
Oletame, et me tahame on teine ​​osa.
Oletame, et meie sähvik rakendust sisaldab loetelu kõigist kaardid
et teil on, et tähendab, et me peaks olema teine ​​komponent.
Noh, võib-olla nimetaks seda nimekirja vaadata.
Teeme nimekirja seisukohal, et eksisteerib koos CardView,
ja seda nimekirja vaadata ja CardView tahaks koos töötada.
Ja saate nende et meie app teile.
>> Nii esimene, olgem teha Paar rohkem kaarte paremale.
Oletame, mis kaardid?
Ja just nii ma ei pea kandis teile kirjutades seda,
Ma lihtsalt kopeerida siit.
Ja nii ma ei annab see vaid üks kaart.
Ma annan selle massiivi kaardid.
Nii esimese rakendused läheb katki nüüd.
Kõik õige, et me läheme tegema Selle võimelised lahendama mitu kaarti.
Nii et kõigepealt hakkame me anda talle mitte lihtsalt üks kaart, vaid hulga kaarte,
nagu nimekirja kaardid.
Ja sel juhul on meil kolm neist.
>> Olgu, nii et app on hakka nimekirja kaardid,
ja see läheb otsustada, milline ühe näidata, et CardView.
CardView võib ainult et ühe kaardi, kuid app
saab kuvada kõiki kaarte, eks?
>> Nii et kui sa aru saada, üks kaardi anda CardView,
kuidas te arvan, sa võiksid teha otsus selle kohta, milline kaart
näidata?
Et anda teile vihje, et see on ajutiselt Sul vaatamise teatud kaardi.
Kui te värskenda lehekülge, saate minge tagasi esimese kaardi.
See on OK, sest see on ajutine.
Mis tehnikat võiks me kasutada?
>> Sihtrühm: Sa võid teha muutuva nii nagu sa olid ees.
Kas see on tõsi, siis võiks on praeguse kaardi võrdub 1?
>> Neel Mehta: Jah, nii me tahad olla riik, õigus?
Sa kasutad olekus osa välja nuputada
mis kaart me tahame saada.
Nagu meil on nimekiri kõik kaardid, siis me
kasutada riigi nuputada üks esimesi kaardi,
teine ​​kaart, kolmas kaart, ja nii edasi.
>> Nii app nii app saavad on getInitialState funktsiooni,
getInitialState funktsiooni tagasi.
Ja me lihtsalt öelda activeIndex 0.
Nüüd meie app on ta enda riigi.
>> Ja nii nüüd muuta, et aru saada, kaardi, Lähme massiivi
ja haarata asi on, et indeks.
Vali kaardi võrdne this.props.cards this.state.activeIndex.
Nii nagu näete siin, rekvisiidid ja riik tegelikult töötavad koos.
Nüüd, et meil on activeCard, me nimetame seda activeCard,
ja vaatame kas see töötab.
[Kuuldamatu]
>> Oh, see oli teksti viga.
Ah.
>> Cool, yep, nii et nüüd olime tagasi kus olime enne, eks?
Sama vana programmi välja Nüüd saame toetada
nimekirja kaardid, mitte ainult ühe kaardi.
Ja nüüd jälle, kui me muudame activeIndex, saame minna 0-1,
ja nüüd, et teine ​​kaart, ja siis läksime 0.
Nii et siin on uus souped-up versioon meie.
>> OK, nii et nüüd lähme on nimekirjas et näitab kõiki kaarte oma programmi,
nii teeme uue komponent nimega Nimekirjavaade.
Lubage Nimekirjavaade võrdub react.createClass.
Nii et me tahame muudaks järjestamata nimekirja loendiüksusele iga kaart.
Ja nii on meil hunnik kaarte.
Me tahame üks loendiüksusele iga kaardi, eks?
Me võiks teha silmus või midagi teha uusi nimekirja objekt.
Aga kuidas sa seda Reageerida, kasutage asi nimega kaart.
Kaart on vahend või funktsiooni kasutada et iga objekt, jookseb mõne funktsiooni,
võtab tagastatav väärtus, ja annab teile, et tagasi.
>> Nii näiteks on meil hulgaliselt 1, 2, 3.map funktsioon-- ja see
on stenografisti jaoks funktsioon-- x nool x korda x.
See ütleb, et iga number 1, 2, 3, võtke see.
Ruut, ja anda see tagasi.
Mis sa arvad, 1, 2 3.map x läheb x korda
x annab teile tagasi anda et see funktsioon on
käivitada iga element, mis massiivi.
>> Sihtrühm: 1, 4 9?
>> Neel Mehta: Yep, 1, 4, 9 sest sa 1 korda 1.
See annab sulle ühe.
See on esimene element.
>> 2 korda 2 on 4.
See on teine ​​element.
3 korda 3 on 9.
See on kolmas element.
On loogiline?
Nii kaart on tehnikat sa kasuta funktsionaalse programmeerijad,
uus stiil programmeerimine midagi
iga element oma nimekirja.
Ja nii see tuttav.
Meil on nimekiri kaarte.
Tahame saada loendiüksusele iga üks, nii me lihtsalt kasutada kaart siin.
Me ütleme, lase nimekirja võrdsete this.props, kaardid, kaart.
>> Ja nii anti-kaardi, me oleme läheb tekitada loendiüksusele
omaga kaardi sisu pool seda.
Ütleme nii, et me tahame anda välja kaardid küsitleda nii card.question.
Nii et see nimekiri sisaldab massiivi Li või siis nimekiri
kus seal on üks nimekirja kirje iga kaardi,
ja mis sisaldab kaarte küsimus.
On loogiline?
>> Cool, nii et nüüd lähme tegelikult trükkida selle välja.
Nii me naaseb ul.
Toas et järjestamata nimekirja, me lihtsalt kinni kogu nimekirja
et nad andsid meile.
Cool.
>> Olgu, nii et nüüd see Nimekirja vaade töötab just leida.
Kõik küsimused loendivaates?
Sul on hunnik kaarte.
Sa teed loendiüksusele iga kaart.
Ja paned neid sees järjestamata nimekirja ja sa annad selle tagasi.
Vaatame nüüd tegutsema nii me kinnistada Selle sees on meie app,
nii et me saame seda teha, loendivaate.
Mis argument me läheb Nimekirja vaade?
Mis omadused me anname seda?
Pea meeles, et kui sa annad see kamp kaardid,
See teeb nimekirja Vaata neid kaarte.
Mis siis võtame siin argument?
Sihtrühm: nimekiri kaardid?
Neel Mehta: Jah, nii kaardid võrdub this.props.cards, eks?
Ja nii ainus probleem on see, et saad ainult
välja ühe tipptasemel element muuta, nii et sa pead murrab ta div.
See on imelik.
Vaatame, kui see.
Kas see toimib?
>> Yep, et te lähete.
Nüüd on meil nimekiri kaarte allosas,
ja siis on meil CardView ise peal,
ja mis klapp vahel kahel pool kaardile.
Nüüd teeb seda mõtet, kuidas ma seda tegin?
Jah, seda uuesti, meil on kaks komponenti.
Esimene komponent pildid läbi iga kaart nimekirjas.
See on loendivaate.
Ja teine ​​osa prindib välja just seda kaarti.
Kui annad talle teatud kaardi, siis see välja printida infot selle kaardi
ja saate flip edasi-tagasi.
>> Nii et kui me tahame, saame proovida ja rääkida umbes lisades mõned uued funktsioonid sellele.
Muidu saame rääkida natuke rohkem umbes liikumiskiiruse reaktori
või saame vastata Teie küsimustele
sest need on kõik tuumikosade ning reageerida, et ma tahan rääkida.
Me võime minna.
Me saame vastata küsimustele.
Mida iganes sa soovid.
>> Sihtrühm: Kas te kasutate JSX normaalse JavaScript?
Või on see midagi, mis kaasas [kuuldamatu]?
>> Neel Mehta: Küsimus on, kas te kasutate JSX normaalse JavaScript?
Vastus on jah.
JSX on lihtsalt viis ta võtab oma JavaScript et on HTML sees on,
ja see kogub sisse JavaScript, et ei pea HTML sees on.
Nii märkate selle-- nii märkate siin.
See näeb välja nagu teil on nagu div ja sul on asjad sees on.
>> See koostab et JavaScript, et nagu tekitab sama asi.
Ma arvan, mida ma tahan öelda, et JSX on lihtsalt süntaktiliste, nagu see on
eeltöötluseta JavaScripti palju nagu PHP on eeltöötluse HTML.
JSC on eeltöötluse JavaScripti, mis võimaldab
paned HTML sees oma JavaScript.
Ja kui sul on õigus trafo mis on asi, mida nimetatakse [kuuldamatu]
mis muudab.
Õigus preprotsessoris see lasen sul seda teha.
>> Sihtrühm: [kuuldamatu]
Neel Mehta: Tavaliselt ei ole vaja panna HTML sees JavaScript
kui ei ole teie teed reageerida.
Aga sa ei saa seda teha niikuinii.
Yep?
>> Sihtrühm: Ma arvan, et sa oli kirjeldatud Reageerima
funktsionaalse Planeerimise keeles.
Oleme olnud õppimise C CS50.
Kas C ka funktsionaalne keel?
Neel Mehta: Seega on küsimus on umbes funktsionaalne
versus teine ​​asi nimega hädavajalik või menetlusõiguse programmeerimine.
Seal on kahte liiki programme populaarne.
Üks nimetatakse menetluslikke, mis on kõike nagu teevad käske,
ja üks on funktsionaalne, mis on kõik umbes võttes funktsioone ja võttes
sisend ja väljund neile.
Reageerida on funktsionaalne paradigma.
C on väga menetlusõiguse paradigma.
>> Ja näitena, C näiteks sa ei saa seda teha deklaratiivne viis
tegemise programm, eks?
Sa pead ütlema, printida.
Muuda andmeid struktuuri.
Trüki.
See kõik on umbes juhtimine.
>> In reageerida seal ei ole et paljud käsud.
See kõik on umbes võttes komponendid, mida kokku panna.
Nad on nagu funktsioone.
Sul on nagu funktsioon nimetatakse CardView,
mis on funktsioon mis on sisend, väljund,
ja nii reageerimisvõimalus kõik selle filosoofia
meile having-- teil on andmeid.
Sa andke seda läbi selle algoritm, ja siis see
väljund HTML, et sa lihtsalt trükitud lehe,
ja nii sa pead ehitada see jaokaupa.
>> Nii juhtida metafoor, mida Ma ütlesin, sa tead, kuidas
Facebook kui saate teate, ja valida, millist osa uuendada,
et menetluskulud.
See on hädavajalik, eks?
OK, ma sain sõnumi.
Muudame konto olemas.
>> Olgem pop aknas siin.
Muudame konto olemas.
Joonistame selle siin.
See on menetlusest loobuma.
>> Just asjad Nurga, Boost, selgroog, teiste raamistike kasutada.
Reageerida on funktsionaalne.
See on väga teistmoodi mõelda asju.
See võtab selle idee et vaatame funktsioone või algoritme, et eks
annab ta andmeid.
Seda saad sülitama, mida ta peaksid olema ja arvuti
hoolitseb kaalumist.
Sa ei oska seda ise.
Kas see teeb natuke mõistust?
Jah?
>> Sihtrühm: In funktsionaalne keel, kõik juhtub korraga?
>> Neel Mehta: Ei, asjad juhtuvad järjekorras.
Nagu siin seal on veel tellida, kuid see ei ole
juhtuda, et sarnaste annan, käsk, käsk.
See juhtub, et on funktsioon annab teile väljund.
Pane see teise funktsiooni.
Pane see teise funktsiooni teise funktsiooni.
>> Kui sa CS51, saate õppida funktsionaalne programmid
natuke välja käesoleva.
Aga põhimõtteliselt see, mis teeb Reageerida lahe on mitte ainult
Ühesuunalise andmevoo ja virtuaalne Dom,
kuid ka see idee funktsionaalne programmeerimine.
Ja funktsionaalne programmeerimine on väga lihtne koostada ja teha cool stuff välja,
ja see on väga lihtne mõelda umbes ja põhjus kohta.
Nii et see on üks hea loositud reageerida.
Veel küsimusi?
Jah?
>> Sihtrühm: Um, miks sa Kasutage lase mitte var?
>> Neel Mehta: Seega on küsimus miks te kasutate lasta asemel var?
See on asi, mida nimetatakse ES6 või ECMAScript 6.
See on uus versioon JavaScript.
Seal on hunnik tehnilistel põhjustel, Kuid olgem on parem versioon var.
>> See, kuidas deklareerida muutujaid.
Võite kasutada lase.
Võite kasutada var.
Let on hunnik tehnilise reasons-- võite vaadata neid
kuni later-- miks see on parem.
Põhimõtteliselt ES6 on mõne kena uus süntaks, mõned uued funktsioonid
peal vana JavaScript.
>> Nii et meil on nagu viis minutit.
Ma tahtsin rääkida üks asi veel päris kiire.
Kui teil on olnud mingeid küsimusi, Räägime siis pärast seda.
Aga just nii see läheb püütud kaamera, ma lihtsalt
tahan rääkida natuke, kuidas sa tegelikult kasutada reageerida oma apps.
>> Kui te lähete siin Facebook.GitHub.IO/react,
see on avalehel reageerida ja see näitan teile, kuidas tegelikult kasutada
Reageerida lehekülgedele.
Põhimõtteliselt, see on natuke keeruline proovite installida reageerida.
See ei ole nii lihtne, nagu te tõmmake ja tilk JavaScript seal.
>> Sa pead oma trafo luua, mis, nagu enne,
muuta oma JSX sisse normaalne JavaScript.
Sul on asi, et tulen koostada sa ES6 normaalne.
JavaScript seal on palju liikuvaid osad, mida pead tegema, et seal on asi
nimetatakse Yeoman, Yeoman.io.
Ja see on käsurea tööriist, mis teen aitab tellingud välja oma Reageerima
projektide lihtsalt.
>> Nii saate lugeda seda hiljem, kuid on mõned tööriistad
et Yeoman pakub.
Nad annan sulle luua Reageerima app kõike ehitatud.
Nagu siis see on ehitatud aastal, komponendid ehitatud.
See on teil oma trafo ehitatud.
Neil on palju lahedaid stuff ehitatud automaatselt
kasutades neid asju nimetatakse generaatorid.
>> Nii lugesin seda, kui soovite.
Lihtsalt minna Yeoman, Y-E-O-M-A-N ja leiad generaatorid nagu need.
Ja generaatorid nagu Neist sa lihtsalt meeldib üks
on paar käsureakäsud.
Seda saad tellingud läbi Kogu Reageerima app teile.
Seda saad sa kõik käsitsi torustik, ja grunt töö sinu jaoks,
ja see on põhjus, miks teil keskenduda ainult just kirjalikult reageerida.
>> Nii et põhimõtteliselt hoone Reageerida app on nontrivial.
See on juhtmega kõik koos, kuid on vahendid, et teen seda sinu jaoks.
Nii et kui sa tahad teha Reageerima app, proovige teha seda nii.
Kui tahad lihtsalt proovida, võite proovida kasutada seda CodePen
sest see CodePen on kõik reageerivad juhtmestik.
Ma olen teinud kõik tööd teile juba.
>> Nii et kui sa tahad teha nagu tootmise vabastada Reageerima app,
proovida ühte neist generaatorid.
Kui tahad lihtsalt mängida ümber, on sageli väärt lihtsalt
nagu proovida mängides ringi CodePen siin.
Kõlab hästi?
Cool.
>> Nii et kõik, mis mul.
Jällegi, kõik koodi ja nende näideteks on saab olema sellel veebilehel siin.
Niisiis, jälle, me ei räägi umbes palju süntaks reageerida
kuid leiab üles kõik vähe süntaktiline üksikasjad,
see kõik saab olema saadaval Käesoleval veebilehel siin.
>> Nii et ma soovitan nagu tegema esimese sammu.
Pane see oma CodePen.
Proovige tööd tehes see teine ​​samm.
Seal on neljas etapp, ja lihtsalt vaata kus sa saad selle.
>> Veel küsimusi, vaadake välja, et lehel või kirjuta mulle.
See on minu e-posti.
Aga ma armastan sind aidata mis tahes Teie küsimustele umbes reageerida.
Niisiis, jah, see on kõik, mis mul on.
Tänan teid kõiki väga vaadates või käivad.
Ja ma võtan küsimusi sa oleks võinud pärast seda nüüd.
Nii aitäh kõigile vaatamiseks.