>> [Predvaja glasba]
>> Neel Mehta: Tukaj gre.
>> No, vsi, dobrodošli na spletni Aplikacije v prihodnosti z React.
To je CS50.
Moje ime je Neel.
Sem TA za CS50 in letniku na Harvardu in zelo, zelo
strastno spletni razvijalec.
Torej, jaz sem zelo razburljivo, da se pogovarjam s tabo danes
ali ste tukaj ali doma gledal, o React, ki je, spet
kot sem že dejal, je prihodnost spletnih aplikacij.
>> Torej React je okvir web.
In kot sem že povedal, za nekatere ljudi tu,
okvir je le komplet orodij, ki jih lahko uporabite
strukturirati in zgraditi vašo spletno aplikacijo.
In spletne aplikacije so, spet, spletne strani da so interaktivne, kot so Facebook,
Twitter.com, Instagram.com, karkoli.
>> Torej, Facebook je okvir web ki jo je razvil Facebook
par let back-- REACT je.
To je bilo, saj se uporablja v Facebook na svojih mobilnih aplikacij
in web app, Instagram.
Khan Academy je drugo vidno prvimi React.
>> To je res bilo pridobivanje zelo priljubljena.
Če ste že kdaj uporabili stvari, kot kotni ali Hrbtenico, to je iz iste družine,
vendar pa je od daleč prekašala njihovo popularnost.
To je nova vroča stvar.
To je res, res ogromno.
>> In tako React je dobro ne samo kot web okvir za gradnjo vmesnikov.
To je dobro za gradnjo spletnih vmesnikov.
Tam je tudi stvar imenovano React Native ki
vam omogoča, da graditi vmesnike za Android in iOS
in morda druge platforme v prihodnosti uporabo le isto kodo JavaScript.
Lahko uporabite popolnoma enaka Koda JavaScript, da postane spletnih strani,
nuditi aplikacij za Android in iOS.
>> To je zelo, zelo razburljiv čas.
To je res, res super priložnost.
To je res univerzalen web vmesnik razvojno orodje,
tako da je zelo, zelo Važno, da veš.
In, kot sem povedal ljudem Prej je to, mislim,
se bo spremenilo, kako smo izgradnjo spletnih aplikacij za vedno.
Torej je mogoče malo pretiravanje, ampak jaz Mislim, da je zelo dobra stvar, da veš.
>> OK, kaj je React?
React je okvir lahko uporabljajo za gradnjo vmesnikov.
Vmesnik je, še enkrat, spletna stran, kajne?
Torej, tukaj je Instagram.com, uporabe React.
>> React je zgrajena na Ideja komponent.
Komponenta je HTML element na steroidih,
tako HTML element je kot gumb.
To je odstavek.
To je v glavi, kajne?
In Instagram bo uporabil ti, ampak bo uporabil tudi komponente React.
>> React komponente souped-up HTML elementi
da imajo svoje vedenje v njih.
Tako, na primer, bi lahko imeli čas element, časovna komponenta,
ki bo vsebovala podobno čas, žig, veste,
komponenta profil, ki bo vsebovala sliko profila
in ime osebe.
Lahko ima kot števec, ki Lahko računate kot število všeč,
in če boste kliknili na njej, se bo povečati število všeč.
Komponenta je le kup HTML kode, ki
ima nekaj funkcionalnosti zavit znotraj njega.
Torej, to je kot element HTML na steroidih, kot sem rekel prej.
Lahko te komponente, in jih lahko skupaj
narediti nove komponente, v V tem primeru, post komponenta,
ki vsebuje vse te stvari.
To bi vsebovala čas, profil, LikeCounter, morda komentar
in morda podoba sama.
In so tako spletne aplikacije ob pravkar zgradil sestavnih delov in njihovo dajanje skupaj.
Instagram feed ni nič več kot kup delovnih mest, ena za drugo,
vsaka objava vsebuje kot Time, Profil, LikeCounter, in tako naprej.
To je nekako tako kot gradnjo hiše.
Vi ne graditi hiša od zgoraj navzdol.
Vzameš vas components-- sprejme kot je kopalnica.
Vzameš bedroom-- jih držijo skupaj, in imate novo komponento.
Imate nov del hiše.
>> Torej je reagirati vsi zgrajena okoli ta ideja o sestavnih delov, ki
so interaktivni, ki so deklarativno.
Tako kot si rekel, kaj je profil, in jo naredi.
So sestavljive.
Lahko vzamete čas in profil, dal jih skupaj, da kaj boljšega.
In oni so za enkratno uporabo, tako da, če ste imajo izvorno kodo za delovno mesto,
da bi lahko vgradili to kjerkoli.
>> Lahko vlagati za Instagram stvar na svojo spletno stran.
Lahko vlagati v Facebook, na primer, dokler jih uporablja React tudi.
Torej, komponente so res, res, res zmogljivi gradniki spletu
ki ga lahko uporabimo kjerkoli in čaka skupaj, da bi nove gradnike.
To je zelo, zelo Pregled na visoki ravni.
Torej, še enkrat, če imate vsa vprašanja, na katerikoli točki
o filozofiji reaktorja, je kodiranje, da me ustavi in ​​mi sporočite.
>> OK, tako reagira je kul, ker je ima drugačen način gledanja
kako si zgraditi spletnih aplikacij.
Verjetno ste že slišali za MVC, a Model lahko nadzorujete v CS50 ali karkoli
drugo sondiranje razredi, ki jih uporabljate.
In večina okviri so zgrajena okoli idejo MVC.
React ni.
REACT je zgrajena okoli ideje z enosmernim tokom podatkov
kot je razvidno iz tega diagrama ali grafiko tukaj.
>> V bistvu, imaš vir podatkov.
In bo vir podatkov odloči, kako postaviti določene komponente.
In komponente bodo potem, ko so spremenili,
bodo povedal vir podatkov, da spremenite.
>> Če želite uporabljati Instagram Na primer, boste morda morali
seznam poštnih predmetov, kot so v podatkovni bazi ali kaj podobnega.
Da podatkov.
In potem so naši pošte komponente bo trajalo, da so podatki,
in te podatke uporabi, da postane stvar na zaslonu.
To je tisto, kar je puščica iz podatkov na komponenta,
nato pa se uporablja isti podatki da postane kup komponent.
>> V Facebook Messenger, za Primer, ki je React,
boste morda morali seznam sporočila kot vir podatkov.
In da bi postal ne Samo seznam sporočil
pa tudi seznam prijateljev imate.
Imate neprebrano štetje.
Mogoče postane tudi Facebook stvar da je na dnu Facebook.com.
Isti podatek je edini vir resnice
in da povzroča veliko komponente, ki se začnejo.
In kadar eden od tistih komponente se spremeni,
gre nazaj in spremeni vir podatkov.
>> Pošljete sporočilo, kajne?
Ki spreminja vir podatkov.
Ko berete sporočila, tako nastavite neprebrano 0.
Ki spreminja vir podatkov.
In opazili, da se vse te ene arrow vrača na isto podatkov
source, tako da boste vedeli, dati določen nabor podatkov,
boste točno vedeli, kaj je Stran se bo izgledal.
To je deterministična.
Veš, glede nekaterih podatkov, kar stran se bo izgledal.
Lahko napovedati, kako se dogaja, da obnašajo in kako stvari potekajo
za delo, ko si jih dal skupaj.
>> In če bi imel milijon komponente Tukaj bi se obnašajo enako, kajne?
Saj ne bi imela vsaka čudne povezave.
Eden podatki postali milijon komponent.
Milijon komponente lahko pojdi nazaj in urejanje podatkov.
In tako je to zelo lepo.
Gradimo sestavljive, enostavno razširljive spletne aplikacije.
>> Imate en vir podatkov, vir resnice.
Da pove svoje komponente kako za postavitev strani,
in komponente bodo ročaj interakcijo.
In če želijo spremeniti Stvari, pojdite nazaj
in povej vir podatkov, da spremenite.
Ima smisel?
Torej React je vse o razumevanju kako izdelati komponento
in kako da bo vaše komponente interakcijo z zunanjim svetom.
>> Izdelavo sestavnega INTERACT z zunanjim svetom
uporablja drugo tehnologijo imenovana Flux, ki
je okvir, ki je dodal na vrhu React.
Ne bomo govorili o tem.
Bomo več govorili, saj Podatki, kako lahko postane komponento?
>> In tako React je res kul, ker vas Lahko jo uporabite s katerim koli zadnji konec, ki ga želite.
Če imate kot Python zadnji konec, če je lahko vaš Python izpljune nekaj podatkov,
React to lahko postane.
Če ste brez JS izhodi podatkov, React to postane.
Ruby ograje z Podatki, React to postane.
>> Torej React je v bistvu web view-- prednji konec s komponentami
za katerikoli vir podatkov whatsoever.
In tako gredo iz vira podatkov za reagirajo komponent je zelo enostavno.
Gredo v drugo smer, je malo težje.
Ki uporablja Flux kot sem prej omenil.
Ne bomo dobili v tem.
Bomo bolj osredotočiti na Podatki do sestavnega strani.
Na ta način si lahko kul, zabava spletne aplikacije.
To ne bo vplivalo na zunanji svet za zdaj, ampak to je že druga zgodba.
>> OK, tako da, če ste bili tu za moj zadnji seminar
boste vedeli, da je vse kode za današnja Pogovor se bo na tem URL
tukaj, žal, ta URL tukaj.
In v bistvu smo šli skozi štiri korake, morda pet,
Verjetno ne pet.
Bomo premikate skozi štirih korakih izgradnje vzorec React aplikacijo.
In tako vse source kodo Za vsak korak poti
se bo prav tukaj, tako da, če ste po skupaj doma,
vas prosimo, da se seznanijo z vsebino tega kodeksa.
Če ste po skupaj tukaj, bomo ga prikazuje na zaslonu,
tako da ne skrbi.
Ampak, če ste doma, občutek prosimo, da obiščete to spletno stran.
In, ja, bi morali imeti možnost, da bi dobili Vse kode boš kdaj potrebovali tukaj.
Torej, to je dobra goljufija stanja kot tudi za prihodnje avanture z React.
Kul, tako da, če vsak, ki je tukaj, in tudi če ste doma,
dvigni te spletne strani, is.gd/cs50react, ni kapital, ne podčrtaj, ni nič.
>> Videli boste stran, ki izgleda malo, kot je ta.
To je stvar, ki se imenuje CodePen.
CodePen je sodelovalno kodiranje okolje
s katero sem lahko pišete kodo tukaj, in se bo samodejno poslan k tebi.
In na ta način, ne morem napisati kodo.
Ne morem zagnati kodo tukaj.
>> Za example-- in če reloads-- glej, Tečem JavaScript kodo na strani
tukaj, in ga bomo samodejno onemogočijo spletno stran
s to kodo JavaScript.
In tako je to način za nas, da preizkusite kodo
res hitro brez uporabe naša ID ali uporabite naš lokalni stroj
ali karkoli.
To je zelo hiter način za vas, da ponarejen in preizkusiti različne kode.
>> Tako da bom, da se ob primer kode, ki ga je dala tukaj.
Bomo, da bodo delali z njim.
In če ste doma, vam to lahko dvigni kot dobro.
In sem že nameščen React tukaj, tako da si lahko samo
napisati svojo kodo tukaj, in poskusite kot svojo lastno igrišče.
>> Ja, če bi vsi na odpirajo to povezavo tukaj.
Prosim, daj mi thumbs gor, ko imate odprto.
Cool, cool cool.
Nič ni tukaj zdaj, ampak bomo spremenili, da zelo kmalu.
>> OK, tako React je JavaScript knjižnica, in kot take,
zahteva poznavanje JavaScript, ki je spletno programiranje jezik.
In to je, ki se uporabljajo za druge stvari zdaj preveč, ampak predvsem web razvoj
jezik, tako da, če ste seznanjeni z da, preberite spletno stran, imenovano JSforCats.com.
Čudovito je.
Lahko se učijo JavaScript Čez pol ure.
To je neverjetno.
>> Tako da ga brati.
Prav tako je veliko HTML tu zaradi smo oblikovanje spletnih strani, seveda.
Torej, če ste seznanjeni z HTML, preverite HTMLdog.com.
Mislim, da je učenje React je milijon krat lažje, če že
poznati gradnike.
Če imate komponente, to je lahkoto doseže večjo komponento.
To je React jezik za vas.
>> Torej, pojdi naprej in da te stvari za branje.
Premor ta video.
Daj mu branje, če ste doma, če niste
seznanjeni s HTML in JavaScript
OK, kaj bomo storiti, se bomo, da bi
zelo osnovna flashcard app uporabo React.
Bomo imeli flashcard.
Lahko flip kartico in nazaj.
In bomo imeli tudi seznam vse karte, ki jih imamo,
in če smo občutek ambiciozni, smo lahko
sposoben preklapljati med avtomobili s klikom na njih.
>> Ampak to je, vaše bare kosti, zelo preprost React aplikacijo.
In zato je to dejansko ni nepomembno za izvajanje,
ampak bomo pokazati, da, če vam to, da je zelo, zelo enostaven, da ga razširi
če vas drugi ljudje pomagajo z njim.
Tako smo šli skozi štiri korake Začenjamo iz nič zgraditi to.
>> Ok, tako da štiri korake, da bomo začeli s prvim korakom.
Prvi korak se bo gradi svojo prvo komponento.
Kot sem že prej povedal, komponenta v React je samo HTML element na steroidih.
Določa HTML in nekateri vedenje, in
bo določal, kako ljudje lahko interakcijo s tem, kako
da bi imela notranje stanje.
Tako kot bo gumb vedeti, kot je, koliko krat pa je bil kliknili na primer,
in bo vedel, kako se postaviti ven.
>> Torej, gremo naprej in graditi naše Prva komponenta uporabo JavaScript.
Torej, če je sintaksa videti čudno, to je zato, ker nekako je.
Torej, še enkrat, gremo da bi spremenljivko
app uporabo ključnih besed pustil, ki naredi spremenljivko,
Naj App enako React.createClass.
>> React je knjižnica in ima create funkcijo razred.
In ta funkcija malo kode, ki vam
lahko uporabite za ustvarjanje nov vrsta React komponento.
In tako React.createClass si komponento,
in ta komponenta bo biti sposoben narediti stvari.
Glavna stvar, ki jo lahko naredimo, je postala nekaj, naredi kot funkcijo.
>> Še enkrat, če je ta indeks ni očitno, da vi, vam priporočam, da greš na JS za mačke
in ga preverite.
Je to Povečano dovolj dobro?
Cool.
>> Zato je vsak sestavni potrebe imeti upodabljanje funkcijo.
Funkcija postane pravi, kaj tiskam na zaslonu?
Toda komponenta neuporabna, če se to ne zgodi
Vedeti, kaj natisniti na zaslonu, tako da morate imeti upodabljanje funkcijo.
>> Torej, v ometa stvar, vi Samo je treba vrniti nekaj HTML.
In kaj je kul je to tam je stvar imenovano
JSX, ki je podaljšek JavaScript, ki se jih uporablja reagirati.
To dovolimo, pišete HTML v notranjosti vaš JavaScript, ki
Sliši se čudno, ko najprej pomislim,
vendar naredi veliko smisla pozneje.
Tako da bomo lahko to storili.
Če ste seznanjeni s HTML, vem imamo div s splošnim namenom
Posoda za stvari.
Mi lahko vrnete div, in v notranjosti ta div, lahko postavimo stvari.
>> Torej, recimo, da želimo samo render naravnost-up flashcard za zdaj.
Flashcard, bi rekel, bo imel vprašanje in odgovor.
Torej znotraj tega div, dajmo izpisal odstavek
ki pravi question-- Kaj je Končni odgovor na življenje, vesolje?
In potem je odgovor bo, seveda, 42.
>> Da niso prišli do dobro sploh.
Ja, tako da v bistvu lahko res pisati HTML v vašem JavaScript.
In to se bo natisne v zaslon.
Torej, dajmo ga preizkusite.
>> Torej imamo komponento.
Moramo povedati, React postaviti komponenta na zaslonu
tako React.render, tako opazili, da smo zdravljenje aplikacijo kot kateri koli drug element.
Smo ga napisali, kot je bilo HTML element.
Like, namesto da bi rekel, kot img za sliko ali p za odstavkom,
pišete aplikacijo, zato App je obravnavati kot element HTML.
Kot sem že prej povedal, da je element na steroidih.
>> Tako da postane App, in si izročiti to mesto, da ga proda.
In to je, kako lahko je povedal, kje ga dal.
Jaz sem ustvaril preprost div na Stran se imenuje z ID strani
in da je, kjer je element bo šlo.
>> In ne bomo teči s HTML.
V bistvu to se dogaja, da bi dobili dal notri te strani elementa
da imamo na zaslonu.
Torej teče to kodo, in črpa ta stvar na zaslonu, tako da tukaj smo.
Naredili smo našo prvo reagirajo komponento.
>> Torej samo kot Rekapitulacija, nežno je nov tip sestavnega dela, kajne?
To je tisto, kar React.createClass.
In s tem, da komponenta, smo je povedal, kaj naj stori.
Kadar se ta komponenta je biti natisnjeni na zaslonu,
se bo izpisal div s dve točki znotraj nje.
>> In kaj smo naredili, smo naredili novo aplikacijo uporabi kot nosilec app zapis.
To smo povedali, da ga notranjosti stran elementa.
In kaj sem storil, je ustvaril nova app iz te predloge.
In potem sem rekel, da jo onemogočijo.
Tako je rekel, OK, app, kaj moram natisniti?
App pravi, pojdi natisnete div z dveh točkah znotraj nje.
In voila, tam je naša div z dva odstavka znotraj nje.
Smisla tako daleč?
>> Torej, še enkrat, celoten izziv React je samo ne vedo, kako narediti komponent.
Kako narediti komponente delujejo skupaj.
Zdaj, ko smo naredili naš prvi komponenta, pojdimo nazaj
in da komponente prilagodljiv.
Tako da boste vedeli, kako v HTML vas lahko dajo svoje gumbe razrede?
Lahko bi vaše sidra za href.
Lahko bi vaši vložki tipa, kajne?
Lahko bi več po meri lastnosti za vse vaše elemente
da bi bilo bolj zanimivo.
In bomo dejansko lahko storite točno isto stvar.
>> Torej, recimo, da želimo, da naši app iti postanejo vse kartice.
Zdaj smo samo izdalo hardcoded kartico.
Vemo, da obstaja samo ena kartico je mogoče storiti, zato smo
bo poskušal spremeniti to zdaj tako da lahko samo da ga neko kartico.
To bo izpisal kartico.
>> Ti bi morali poskusiti in narediti vaš komponente zelo splošno rabo.
Torej, na ta način sem lahko po e-pošti to je moj prijatelj in biti všeč,
karkoli flashcard imate, samo krma v tukaj,
in to bom naredil sam.
Vi lahko postavite drugo stvari v vašem app.
>> Ampak najprej, kaj je prekinil to gor v dve komponenti,
vendar želimo ločiti kartico tiskanje del od dejanskega app del.
Torej, kaj lahko storimo, je, da smo To lahko spremenite iz App
da CardView, samo Novo ime za aplikacijo,
in lahko naredimo nov komponenta se imenuje App,
ne sme zamenjevati s starim App.
Imamo tudi createClass, in tako kot v HTML,
lahko gnezdo React komponente Notranjost seboj.
>> Torej, v tem opravljali funkcijo, Funkcija povratnega CardView,
in to je točno isto stvar.
Oglejte si, zakaj je to ista stvar?
Namesto klavniških samo aplikacijo, ki ima div in seznanjanje znotraj njega,
Aplikaciji povzroči, CardView in CardView povzroči, div in odstavek.
Torej, to je naš prvi primer gnezdenje elementov znotraj drug od drugega.
Ali to smiselno?
Torej, še enkrat, imamo CardView element.
Imamo app elemente da je večji od.
>> OK, zato želimo naše CardView-- če vas Daj dobro CardView neko kartico,
to bo izpisal zate, kajne?
Torej, najprej moramo narediti kartico, tako da je narediti predmet kartice.
Torej mojo vizitko equal-- če ste vsi seznanjeni,
to je samo zapis-making ugovarja v JavaScript.
To je nekako kot struct v C, zato smo naredili kartico,
in zdaj smo lahko prenese to kartico kot lastnost ali atribut v HTML
terminologija na naš app.
Tako da lahko naredimo to, App kartica enaka myCard.
>> Saj veš, kako je v vhod, vam Vrsta vhoda enaka besedilo ali gumb
Razred je enaka BTN za bootstrap ,?
Isto idejo, App kartica equals-- moraš dati naramnice here--
App kartica enaka myCard, tako da to pravi, da imamo ta predmet kartice.
Jaz grem, da ga prenese kot nepremičnina na komponento aplikacije.
In to app komponenta bo mogli dostopati do njega in ne
zanimive stvari z njim.
>> Torej naš app se bo dal kartico, tako da za zdaj,
dajmo imate aplikacijo samo dati kartica na CardView
sama po sebi, saj tako kot app ni dogaja, da vedo, kaj storiti z njim,
tako da bomo samo dati CardView.
Torej ga bomo na prehod enak način, kartica je enaka,
in tako lahko vsaka komponenta dostop do stvari, ki je bila namenjena njej.
Prav tako lahko dostopate do lastnosti da so dajali njim
uporabo te sintakse, this.props.card.
>> Torej, kaj se zgodi, tukaj je imate myCard predmet.
Vam preide v app uporabo App kartico enaka myCard.
Ta predmet kartica je namenjena za vašo aplikacijo.
Aplikacija je dostopna kot this.props.card.
To je nekako tako kot na sliki ve, kaj je to vir.
>> Ta aplikacija ne ve, kaj je to kartica je, in to lahko naredimo stvari z njim.
To lahko storite izračune.
To lahko sprejemajo odločitve, ki temeljijo off od tega.
>> Za zdaj sem bil tekoč, da prenese this.props.card na CardView.
Smisla tako daleč?
To bo bolj smiselno zdaj.
>> OK, zdaj smo na CardView.
Naša CardView, dal kartico, bi morala izpisal njegovo vprašanje in odgovor.
Zdaj smo samo izpisal nekaj hardcoded vprašanja in odgovori.
Moramo ugotoviti out-- moramo vprašati kartice, ki so nam dali
kaj je vprašanje in odgovor, ter nato natisnete to ven na zaslonu.
>> Tako bomo lahko to storite tukaj.
V render begin-- najprej narediti enako.
Torej, kaj delamo tukaj je, vemo, da kartice so nam dana za nepremičnino,
prav?
To nam je dal kot vložek.
Kot da je skoraj kot argumenti funkcije.
Kartica je argument skoraj do tega CardView.
>> Bomo ekstrakt to, in dal je v spremenljivo vprašanje.
Prepričajte se, da je odgovor šla spremenljivemu odgovor.
Pozove, da kartica odgovoriti.
In zdaj, ko imamo to, namesto tiskanje to besedilo,
bomo, da natisnete kar so nam dali.
>> Torej, to stuff-- zato bomo pogasiti odgovarjati.
Poglejmo, če to deluje.
Kul, tako da je korak skozi njo še enkrat, samo da se prepričajte.
>> Torej, moja kartica je objekt kartice, in smo dajejo to kartico v app.
In app se bo trajalo kartico in jo dal na CardView.
In to CardView pravi, če vas dajte mi nobene flashcard predmet,
Bom izpisal svoje vprašanje in njegov odgovor, kajne?
>> Torej, kaj lahko storim je, da sem lahko pošiljanje to kodo, prvi
kot 10 vrstic moje kode, do mojega prijatelja.
On bi ga vgradili v svoje vloge.
In tako dolgo, kot je to storil isto stvar, kot CardView kartica enaka tem,
Dokler je ustvaril CardView in mu dali prave informacije,
je lahko render svojo kartico.
In tako na ta način, da je to res kul način za vas, da gradijo
komponente, ki uporabljajo drug drugega, kajne?
Ta kartica, lahko objavim to CardView na internetu,
in ljudje bi mogli uporabljati.
Torej v bistvu, je kot enega izmed standardne funkcije v knjižnici C.
>> To je funkcija kjer kdo ga je napisal.
Daš določen vhod.
To bo proizvodnjo določene izhod.
Vam ni mar, kako to deluje interno.
Dokler boste izročiti to pravico vhod, bo to, da pravega rezultata.
>> In komponento lahko pomislili na enak način.
To CardView je všeč funkcija knjižnica.
Če mu daš nekaj kartice kot nepremičnine, bo to
izpisal vsebino te kartice.
Like, če spremenim mojo kartico namesto da bi bilo všeč, kar je 5 plus 37,
bo ustrezno posodobiti.
Torej samo s spreminjanjem vhod, da dobi neko moč.
Torej si lahko zamislite komponent skoraj kot funkcije na ta način, kar
lahko skupaj.
Dobiš vložek, kot je ta CardView kot vhod, dobiš izhod.
V tem primeru, izhod je HTML.
Smisla tako daleč?
Kul, tako da še enkrat, lastnosti so kako lahko prenese podatke
v in iz komponent.
>> OK, tako da je, da je to stvar interaktivno.
Zdaj je nekako dolgočasno.
Kaj je [neslišno]?
Lahko natisnete nekaj ven, ampak to je vse, kar lahko storite.
>> Torej, vrnimo se k staro vprašanje samo za zdaj.
OK, zdaj te komponente so dolgočasni, saj vse, kar so storili,
dobijo vhod.
Zaradi njih izhod, kajne?
To je nekako dolgočasno.
Želimo, da so naši komponente, da bi lahko imeli
nekakšen notranjega stanja, kot kaj zapomniti.
>> Za flashcard za Na primer, kakšno stanje
Morda želite zapomnili za flashcard?
Kaj začasnega statusa Morda boste želeli, da se spomnimo
za flashcard v flashcard app?
OBČINSTVO: Ali je bilo zrcaljeno?
Neel Mehta: Ja, seveda.
Tako boste morda želeli obdržati tir ste soočiti ali so
vam obrnjena navzdol na kartici.
Na Facebooku, na primer, bi si želi spomniti, kje na novice krme
ste ali želi kdo je profil delaš prav zdaj.
>> Na Messenger, kot tisto besedilo vas vnesete v vnosno polje, kajne?
Če ste osvežite stran, da gre proč.
Ampak ti res ne skrbi.
To je samo začasno.
Ja?
>> OBČINSTVO: [neslišno]
Neel Mehta: Kot bliskavico kartica, kot ste lahko videli
Vprašanje stran ali stran, odgovor?
>> OBČINSTVO: OK.
>> Neel Mehta: Like Obojestranski flashcard, kajne?
Ja, tako da boste želeli imajo to idejo zdaj
Imam lastnosti, ki se je kot vložke, ampak stanje, ki je začasna, uh,
kje ste na strani, kajne?
Spet sem dejal v Facebook Messenger, imam podobno, kar oseba
gledate Facebook ali kdo je profil, kajne?
>> To je le začasno.
Pomembno je, da se uporabniku prikaže kaj se dogaja, vendar se osvežite stran.
To sploh ni pomembno.
Torej, to je začasno stanje, tako da bomo vse, kar je stanje.
>> Torej, še enkrat, tam je stanje in rekviziti.
Props je podan vhod od svojega vira podatkov.
Država je tako kot privzete.
To je tako kot stvari, ki naredi stvar interaktivno.
>> Torej v našem CardView-- Imejmo naše CardView-- tako da je bilo lepo.
Kaj bomo storili tu, gremo na dotik CardView in samo CardView.
In tako je moj prijatelj, ki je dobil to, so ne bi opazili nobene razlike.
Ti ne bi bilo treba spremeniti koli od lastne oznake,
vendar bi vidijo svoje CardView dobil souped up.
To je lep del o komponentah.
>> OK, tako da v našem CardView, poskusimo in spremljate, ali bomo postopoma navzgor
ali navzdol.
V React to storimo tako, da najprej določitvijo začetnega stanja.
Kje se kartica začeti?
>> Torej bo funkcijo imenovano getInitialState deluje, in se bomo vrnili predmet.
Ta objekt vsebuje neko stanje, in država je samo par ključna vrednost.
Kot v naroči, imate ključ in vrednost, imate kot ime je niz.
>> V tem primeru, recimo, spredaj je res.
Ta pravi, da imamo državo.
Ena komponenta stanju je atribut imenovan spredaj.
[Neslišno], tako da ga privzeto, smo na sprednji strani kartice,
in bomo lahko to spremenili kot smo flip kartico.
Ima smisel?
>> OK, tako da v render, prav zdaj, smo prikazuje vprašanje in odgovor.
Zdaj, kaj moramo storiti se kažejo na vprašanje
če smo na sprednji strani kartice tako Odgovor je na hrbtni strani kartice.
Zato si vsi delamo kartica interaktivno.
Torej, kaj je poskusiti in to tukaj.
No, najprej samo da spremenljivko.
Mi lahko vprašam this.state.front.
Mi dostop navajajo enako smo rekviziti za dostop, tako this.state.front.
>> Če smo spredaj, nato pa besedilo je this.props.card.question.
Če smo na sprednji strani card, bomo poskušali grab
Vprašanje s kartice.
V nasprotnem primeru, če smo na hrbtni strani kartice, kaj naj naredimo?
>> OBČINSTVO: Odgovor?
>> Neel Mehta: Ja, tako besedilo enaka this.props.card.answer.
Ampak, če ste opazili, smo s pomočjo država, da bi odločitev
ker je postal sestavni del bo videti drugačna
temelji off, kako to interakcijo z njim.
Torej, namesto tiskanje tega, bomo samo izpisal besedilo.
Cool, da zdaj, ko vidiš, vidimo samo vprašanje.
In če spremenim stanje tukaj ročno za spredaj je napačen smo dobili 42 nazaj.
>> Torej, še enkrat, ta komponenta ima svojo lastno državo.
Like gumb ve, ali To je bilo stisnjene ali ne,
ta stvar ne ve, kaj je na sprednji ali na hrbtni strani.
Privzeto je, da je na sprednji strani.
In potem, če je na sprednji strani, bomo natisnete vprašanje.
Če je na hrbtni strani, bomo natisnete odgovor.
Torej, še enkrat, informacije ker je enaka.
To je samo videti drugače temelji na tem, kako ga programirati.
Tako, na primer, Facebook Messenger, tudi če dobiš isti vir podatkov,
je morda videti drugače ker je država je drugačna.
Gledaš Sporočilo druga oseba je.
>> OK, tako da je to vse lepo in dobro, zdaj pa, kaj je dejansko
da nas boste mogli zamenjati, bodisi Naša kartica je spredaj ali zadaj.
To lahko storimo z dodajanjem flip gumb, gumb za kartico, ki
bo flip kartico, če je [neslišno].
Torej, kaj je dodati gumb tukaj, to gumb, in na ta gumb bo rekel flip.
>> In tako zdaj, ga ne naredi ničesar.
Samo izgleda lepo.
Kaj lahko storimo, je, da smo lahko dodate klik trener, onclick enaka this.flip,
in bomo opredeliti flip kasneje.
Ampak v bistvu, onclick je funkcija,
dobi se imenuje, ko jo uporabnik klikne.
>> Torej bo gumb vedeti ko je bilo kliknili.
Šel je bilo že kliknili, bo flip kartico.
To je nekako tako kot vaši pizza dostava fant.
Si podobno, vse v redu, vsakič, ko nekdo me kliče, bom dostaviti pico, kajne?
>> Se registrirate to poslušalca.
Poslušate za dogodek.
Dobiš imenuje, in ko je dogodek zgodi, nekaj narediti.
Dobite pico.
V tem primeru, ko ste kliknili, ste flip kartico.
>> In zato moramo določite Funkcija, ki bo flip kartico,
tako da bomo napisali to pravico tukaj, flip funkcijo.
In kaj misliš, da flip bo naredil?
Spet dobi to imenuje, ko smo kliknite gumb flip.
Kaj naj funkcija flip storiti?
>> OBČINSTVO: Sprememba this.state.front od true na false, false na true.
>> Neel Mehta: Ja, tako bi karkoli this.front is-- sprednji država je.
Bodite sprednji stanje, če je res, da je lažna.
Če je napačna, da bi bilo res, kajne?
Torej, poskusimo to.
>> Ne morete spremeniti stanje Samo s tem this.state.
Vi tega ne more storiti.
Ne, ne moreš narediti.
Morate uporabiti funkcijo imenuje this.setState.
>> Torej lahko rečemo, this.setState spredaj debelo črevo tu, enkrat, klicaj
točka pomeni ravno nasprotno.
Mislim, če je to. state.front je res, da bomo nato false.
Torej bomo nastavili stanje od true na false.
Če je napačna, bomo nastavljen je false na true.
>> Samo opazili, da smo vzpostavili in dobili nekoliko drugače, in tako poskusimo to.
Bada Bing, poglej tole.
Gumb flip bo sedaj preklop spredaj varnostno stanje.
>> In tako, tukaj je, kjer boste videli malo čarobno React.
Všeč mi nikoli povedal, da ponovno postane.
Nikoli nismo rekli, da ničesar izvlečete.
Če to počnemo brez React, bi
so to-- všeč, ko je flip gumb kliknili,
boš moral povedati, da ročno ponovno render, kajne?
>> React je res kul, da če vas izročiti to določeno stanje in lastnosti,
bo vedno onemogočijo točno isto stvar.
In tako, ko smo kdaj bomo spremenili stanje in lastnosti,
reagirajo le ponovno naredi celotno stvar.
Ve, da obstaja ena-na-ena korespondenco
med državo in parametrom in HTML.
Torej, kadar eno od teh Spremembe, ki jih po določenem stanju,
se bo spremenila, kako plača se ponovno izdana,.
In tako v bistvu React je všeč čaka, da spremenite.
>> Kadarkoli se spreminja nekaj, da bomo ponovno postane celotno stran.
In če se sliši neučinkovit, to je zato, ker ne bi bilo,
ampak reagirajo uporablja stvar imenuje Shadow DOM.
Namesto risanje strani neposredno, jo ohranja virtualni HTML drevo v spomin.
>> Veš, HTML je kot drevo, kot hierarhično strukturo podatkov.
To ohranja lažen drevo v spomin, in vsakič, ko posodobite stran,
da bomo pripraviti en ponaredek drevo, in ga bomo izračunali
kaj spremeniti je potrebno, da bi stran, da bi ti dve drevesi enaka.
Torej v bistvu, je dejansko ponovno naredi veliko.
In potem se je želel le na spremenjene stran v malo poteg, kot je potrebno,
tako da je zelo, zelo, zelo učinkovita.
>> Torej v bistvu React bo ko boste nekaj spremeniti,
da bomo ponovno postanejo stran praktično.
To bo ugotoviti, kaj moram spremeniti, da bo realna stran odražati
virtualni stran, in to bo to.
To je virtualni DOM.
To je eden od največjih značilnosti React.
>> Ali to smiselno?
Kakšno vprašanje?
Ja?
>> OBČINSTVO: Kako primerjajo vedno na MVC
da smo se pogovarjali o Prej kot virov.
>> Neel Mehta: Ja, vprašanje je, kako se primerjajo s MVC?
Vprašali ste o virih.
No, kaj je govoril o tem, kako to deluje.
>> V MVC, ki ste jo posodobili model.
V tem primeru bi se imamo model kartice.
Razgled bo imela flip gumb in nadzor
bi imeli funkcijo flip.
Torej bi pogled povej Krmilnik flip flip.
Flip bi povedal Model spremeniti, kajne?
>> In tako, ko vam je MVC, vam poslušajo model za spremembo,
in si ponovno postane ustrezno stališče.
Ali boste morali všeč še krmilnik.
Počakajte, da se model spremeniti, in nato pa izberete del kot stvar
spremeniti.
Tukaj imamo eno stvar, vendar v velikem aplikacijo
moraš imeti rad spomnim, kaj sprememba v vsakem posameznem mestu
tako da je malo siten.
In tako React je lepo saj ima Shadow Dom.
To lahko privoščijo samo Reportaža celotno stvar.
Nimate selektivno kot veš kaj posodobiti.
>> Na Facebooku, če vam je všeč dobili novo sporočilo, v MVC,
bi si morali zapomniti, OK, spremenite stvari
Na vrhu Stran, ikona sporočilo.
Pop tudi novo okno na dnu.
Bo tudi novo stvar v tem oknu.
Igrajo tudi zvok.
>> To je veliko stvari greva ven ob istem času.
In tako, če ne imajo Shadow Dom, boš
morali storiti, da ročno, ker ne morete znebiti celo stran.
Si ne more privoščiti, tako da boste imeli ročno spremeniti vsako stvar,
ki je zelo nadležno v MVC.
>> Zato, da bi bili varčni, so selektivno
posodobiti stran, ki je učinkovit, vendar tudi moteč.
V React, zaradi sence Dom, boste dobili obe stvari zastonj.
To je učinkovita, saj sence doma.
Ozko grlo je posodabljanje strani.
To ne delaš drevo manipulacijo.
Dobiš učinkovitost.
Dobite tudi enostavnost uporabe, ker je če ste le reportaža celotno stran,
ampak samo vem, vse v redu, se stvari se bodo na strani nekje.
Morda bi bilo v drugem mestu, vendar to se dogaja, da se na strani, kajne?
Torej ste pravkar ponovno izdane, celotna stvar praktično,
in morda bo nekaj spremembe v sami strani.
>> Torej, še enkrat, v MVC vas bi morali izbrati
med enostavnost uporabe in učinkovitost, in React, dobiš oboje.
Torej je bolje.
Ima smisel?
Trdna.
>> OK, tako da vidimo, kaj je govoril malo o tem koraku 4,
kako lahko vgradili komponente.
Torej imamo to pravico zdaj.
Mi imamo kul malo gumb.
Lahko flip nazaj in naprej, in da je vse, kar počne.
Recimo, da želimo še eno komponento.
Recimo, da je naša flashcard app smeli vsebuje seznam vseh kart
da imate, da to pomeni, da bi moral imeti še eno komponento.
No, morda ga imenujejo pogled seznama.
Naj bo pogled seznama, ki soobstaja z CardView,
in ta pogled seznama in CardView bo všeč delo skupaj.
In jih lahko kombinirate da bi naše app za vas.
>> Torej, najprej, kaj je narediti Nekaj ​​več kartic desno.
Recimo, kaj karte?
In prav tako nimam za vam bore s to tipkanjem,
Jaz sem šele tekoč, da ga kopirate od tukaj.
In tako bom ne izročiti to samo eno kartico.
Bom dal to vrsto kartic.
Torej prva apps bo odmor za zdaj.
Vse je v redu, tako da se bomo, da bi to sposobna izpeljati več kartic.
Torej, najprej, mi bo dal, ne samo eno kartico, vendar niz kartic,
kot seznam kartic.
In v tem primeru imamo tri izmed njih.
>> Vse je v redu, tako da app je dogaja, da dobite seznam kartic,
in to se dogaja, da se odločijo, kateri eden pokazati na CardView.
CardView lahko samo postala eno karto, ampak aplikacijo
dobi seznam vseh kart, kajne?
>> Torej, ko ugotovimo, eno Kartica dati CardView,
kako bi si ugibati, boste morda lahko da bi odločitev o tem, katere kartice
pokazati?
Da bi vam namig, da je začasno Boste gledate določeno kartico.
Če ste osvežite stran, boste Samo segajo v prvo kartico.
To je v redu, ker je začasna.
Kaj tehniko lahko uporabljamo?
>> OBČINSTVO: Vi bi lahko spremenljivko tako kot si imel spredaj.
Je to res, bi si imajo sedanji kartica enaka 1?
>> Neel Mehta: Ja, zato smo želijo imeti državo, kajne?
Uporabljala naj bi se stanje v komponenta, da ugotovimo,
katero kartico si želimo, da bi dobili.
Kot smo seznam vse karte, da bomo
uporabite stanje, da ugotovimo, eden od prvega kartice
Drugi karton, tretja karta, in tako naprej.
>> Torej app, tako da bo app dobili imajo funkcijo getInitialState,
getInitialState vrnitev funkcija.
In bomo samo reči activeIndex 0.
Torej, zdaj je naša app ima svojo državo.
>> In tako zdaj na render, da ugotovimo, kartica, pa pojdite na paleto
in zgrabi stvar v tem indeksu.
Izberite kartic enake this.props.cards this.state.activeIndex.
Torej, kot lahko vidite tukaj, rekviziti in država dejansko delajo skupaj.
Torej sedaj, da imamo activeCard, imenovali jo bomo activeCard,
in da vidimo, če to deluje.
[Neslišno]
>> Oh, da je to napaka besedilo.
Ah.
>> Kul, ja, zdaj smo nazaj tam, kjer smo bili prej, kajne?
Enako stari program, razen Zdaj bomo lahko s podporo
seznam kartic, ne samo eno kartico.
In sedaj, še enkrat, če bomo spremenili activeIndex, lahko gremo od 0 do 1,
in zdaj, druga karta, in potem smo šli na 0.
Torej, tukaj je nov souped-up različico naše.
>> OK, sedaj pa imajo pogled na seznam, ki prikazuje vse karte v svoj program,
zato bomo narediti novo komponenta se imenuje ListView.
Naj ListView enaka react.createClass.
Zato želimo, da postane Neurejen seznam s postavko seznama za vsako kartico.
In tako imamo kup kart.
Želimo, da en element seznama za vsako kartico, kajne?
Kar lahko storimo za zanke ali nekaj, da bi nov element seznama.
Toda način, kako to storiti v React, uporabite stvar imenovano zemljevida.
Karta je orodje ali funkcijo uporabljate da za vsako postavko, poganja neko funkcijo,
traja povratni vrednosti, in vam daje to nazaj.
>> Tako na primer, imamo niz 1, 2, 3.map function-- in to
je okrajšava za function-- x arrow x krat x.
Ta pravi, da za vsako številko v 1, 2, 3, vzeti.
Ga trga, in jo dal nazaj.
Torej, kaj misliš 1, 2, 3.map x gre za x krat
x vam nazaj dana da je ta funkcija
teče na vsakem elementu tega niza.
>> OBČINSTVO: 1, 4 9?
>> Neel Mehta: Ja, 1, 4, 9 ker vam 1 krat 1.
To vam daje eno.
To je prvi element.
>> 2 krat 2 je 4.
To je drugi element.
3 krat 3 je 9.
To je tretji element.
Ima smisel?
Torej map je tehnika, s katero uporabo v funkcionalnih programerjev,
novi slog programiranje nekaj storiti
za vsak element v seznamu.
In tako se to sliši znano.
Imamo seznam kartic.
Želimo, da bi dobili postavke seznama za vsak ena, tako da bomo samo uporabo zemljevida tukaj.
Bomo rekli, naj seznam enaka this.props, kartice, map.
>> In tako dobi kartico, smo gre za ustvarjanje postavke seznama
s to kartico je vsebina strani je.
Recimo samo, da želimo dati ven kartice vprašanja tako card.question.
Torej ta seznam vsebuje še array LI je ali seznama postavk
kjer je en seznam postavka za vsako kartico,
in ki vsebuje vprašanje kartic.
Ima smisel?
>> Kul, tako da zdaj pa si dejansko tiskanje, ki ven.
Torej se bomo vrnili na ul.
Znotraj tega neurejen seznam, bomo samo držijo celoten seznam
da so nam dali.
Cool.
>> Vse je v redu, tako da zdaj to Pogled na seznam dela le našli.
Vsa vprašanja o pogledu seznama?
Imate kup kart.
Naredite postavke seznama za vsako kartico.
In jih dal notri Neurejen seznam, in ga dal nazaj.
Torej, zdaj pa deluje, zato smo vgradili ta znotraj našega app,
tako da bomo lahko to storili, pogled seznama.
Kaj argument ne peljemo na seznam pogled?
Kakšne lastnosti pa smo ga dal?
Ne pozabite, če daš je kup kart,
to bom naredil seznam pogled na teh kartic.
Torej, kaj bi se peljemo tu kot argument?
OBČINSTVO: seznam kartic?
Neel Mehta: Ja, tako kartic enaka this.props.cards, kajne?
In tako je edini problem je, da lahko le
obrnil eno vrhnjo element v render, tako da moraš zaviti v div.
To je čudno.
Torej, da vidimo, če je.
Ali to deluje?
>> Ja, tam greš.
Torej, zdaj imamo seznam kartic na dnu,
in potem imamo Sama CardView na vrhu,
in da bo flip med obe strani kartice.
Zdaj pa, da je smisel, kako sem to naredil?
Ja, spet, imamo dve komponenti.
Sestavni natisne prva ven vsak kartica na seznamu.
To je pogled na seznam.
In druga komponenta natisne samo to kartico.
Če daš to določeno kartico, bo izpisal podatke o tej kartici
in vam flip nazaj in naprej.
>> Torej, če želimo, lahko poskusite in pogovor približno dodal nekaj novih funkcij za to.
V nasprotnem primeru se lahko pogovarjamo malo bolj glede na hitrost reaktorja,
ali mi lahko odgovorite Vprašanja boste morda morali
ker to so vse od osrednjih delov od reagirajo, da želim govoriti.
Lahko gremo naprej.
Mi lahko odgovarja na vprašanja.
Karkoli hočeš.
>> OBČINSTVO: Lahko uporabite JSX v normalnem JavaScript?
Ali je to nekaj, kar prišel z [neslišno]?
>> Neel Mehta: Vprašanje je pločevinka Uporabljate JSX z normalnim JavaScript?
Odgovor je pritrdilen.
JSX je samo način traja, da vaše JavaScript, da ima HTML znotraj njega,
in se pripravlja v JavaScript, ki nima HTML znotraj njega.
Tako obvestilo that-- tako obvestilo tukaj.
To Izgleda imate kot div in imate stvari znotraj njega.
>> Da pripravlja za JavaScript, ki kot ustvari isto stvar.
Mislim, da tisto, kar sem rekel je, da je JSX je le skladenjski, kot da je
Predprocesor za JavaScript veliko kot PHP je Predprocesor za HTML.
JSC je Predprocesor za JavaScript, ki omogoča
si dal HTML znotraj vašega JavaScript.
In tako, če imate pravo transformator ki je stvar imenovano [neslišno]
ki bo spremenila.
Pravica Predprocesor, da boš lahko to naredil.
>> OBČINSTVO: [neslišno]
Neel Mehta: Običajno ne potrebujete postaviti HTML znotraj JavaScript
razen če je vaše početje React.
Vendar pa lahko to storite anyway.
Ja?
>> OBČINSTVO: ti misliš je opisano React
kot funkcionalno strukturni jezik.
Smo bili učenje C v CS50.
Ci tudi funkcionalen jezik?
Neel Mehta: Torej, vprašanje Gre za funkcionalno
v primerjavi z drugo stvarjo, imenovano Nujno ali postopkovno programiranje.
Obstaja dve vrsti programov priljubljenih.
Ena se imenuje postopkovno, ki se vse vrti okoli kot delaš ukazov,
in ena funkcionalna, kar je vse približno ob funkcije in ima
vhod in izhod iz tega.
React je funkcionalna paradigma.
C je zelo procesna paradigma.
>> In kot primer, C, na primer, ne boste storili to deklarativno pot
za izdelavo programa, kajne?
Imate za povedati, natisnite to.
Spremenite to podatkovno strukturo.
Natisni to.
To je vse o ukazih.
>> V React, tam ni da veliko ukazov.
To je vse približno ob komponente, ki jih skupaj.
Oni so kot funkcije.
Imate kot funkcijo imenuje CardView,
ki je funkcija ki ima vhod, izhod,
in tako React je vse o tej filozofiji
ZDA having-- imate podatke.
Lahko ga skozi to algoritem, in ga bomo
izhod HTML, ki vas Pravkar natisnjeno stran,
in tako da boste morali zgradite kos za kosom.
>> Torej, da pripravi metaforo za kaj Sem rekel prej, veste, kako
na Facebooku, če dobiš sporočilo, in se odločite, kateri deli posodobiti,
da je procesno.
Nujno je, kajne?
OK, sem dobil sporočilo.
Oglejmo spremenite račun tam.
>> Oglejmo pop okno tukaj.
Oglejmo spremenite račun tam.
Oglejmo pripraviti to tukaj.
To je procesni pristop.
>> To je tisto, stvari, kot kotni, Boost, Backbone, drugi okviri uporabo.
React je funkcionalna.
To je zelo drugačen način razmišljanja o stvareh.
To traja to idejo pa imajo funkcije ali algoritmi, da ga boste
izročiti to podatke.
To bo izpljunil, kaj jo bi moralo biti, in računalnik
bo poskrbel za tehtanje ven.
Nimate ravnati sami.
Ali da bi malo občutka?
Ja?
>> OBČINSTVO: V funkcionalnem jeziku Vse se zgodi naenkrat?
>> Neel Mehta: No, stvari se dogajajo v redu.
Tako kot pri nas je še vedno odredi, vendar pa ne
zgodilo v vrstnem redu, kot so pohvaliti, ukaz, ukaz.
To se zgodi v redu Funkcija vam daje moč.
Daj, da v drugo funkcijo.
Daj, da v drugo Funkcija, druga funkcija.
>> Če boste to storili CS51, boste naučiti funkcionalne programe
malo iz področja uporabe tega.
Ampak v bistvu, kaj naredi React kul ni le
pretok podatkov enosmerni in virtualni Dom,
ampak tudi ta ideja funkcionalno programiranje.
In funkcionalno programiranje je zelo enostaven sestaviti in narediti kul stvari iz,
in to je zelo enostavno, da razmišljajo o in razlog okoli.
Torej, to je še ena dobra žrebanje React.
Vsa več vprašanj?
Ja?
>> OBČINSTVO: Hm, zakaj bi si Uporabljajte naj v nasprotju z var?
>> Neel Mehta: Torej, vprašanje je, Zakaj uporabljate pustite namesto var?
To je stvar, ki se imenuje ES6 ali ECMAscript 6.
To je nova različica JavaScript.
Tam je kup tehničnih razlogov, Ampak kaj je boljša različica var.
>> To je, kako si razglasi spremenljivk.
Lahko uporabite pustiti.
Lahko uporabite var.
Naj ima kup tehničnih reasons-- si jih lahko ogledate
up later-- zakaj je bolje.
V bistvu, ES6 ima nekaj lepo Nova skladnja, nekatere nove funkcije
na vrhu starega JavaScript.
>> Torej imamo kot pet minut.
Želel sem govoriti o še ena stvar resnično hitro.
Če boste imeli kakršnakoli vprašanja, kaj je govoril o tem, po tem.
Ampak samo zato, da to postane ujeli na kamero, sem
želim govoriti malo o tem, kako dejansko uporabo React v vaših aplikacijah.
>> Če greste tukaj, Facebook.GitHub.IO/react,
To je domača stran za React, in to vam bom pokazal, kako si dejansko uporabo
Odzovejo na vaših straneh.
V bistvu, to je malo zapleten poskuša namestiti React.
To ni tako enostavno, kot si povlečete in spusti JavaScript tam.
>> Moraš imeti svoj transformator ustanovi, ki bo, kot je to storila prej,
vključite vaš JSX v normalno JavaScript.
Moraš stvar, da bom pripravijo si ES6 v normalno stanje.
JavaScript tam je veliko gibljejo deli, kar morate storiti, tako da je stvar
imenuje Yeoman, Yeoman.io.
In to je vrstica orodje ukazne da bom vam oder iz vašega React
projekti enostavno.
>> Torej si lahko preberete več o tem kasneje, vendar pa obstaja nekaj orodja
da Yeoman ponuja.
Ti boš lahko ustvarite React app z vsem, zgrajena leta.
Tako kot bo so bila zgrajena v, komponent, zgrajena leta.
Da bomo imeli svoj transformator vgrajeno.
Imajo veliko kul stuff vgrajeno samodejno
uporabo te stvari, imenovane generatorji.
>> Torej, preberite o tem, če ti je všeč.
Pojdi na YEOMAN, Y-E-O-M-A-N ter najdete generatorje, kot ti.
In z generatorji, kot so ti, ki ste jo pravkar želeli eno
je ukazni vrstici nekaj ukazov.
To bo oder ki daje Celotna React app za vas.
To boste dobili vse ročno tesnost, in grunt delo za vas,
in to je razlog, zakaj se osredotočite samo na samo pisanje v React.
>> Torej v bistvu izgradnjo Reagirajo app ni enostavna.
To je žično vse skupaj, vendar obstajajo so orodja, ki ga bom naredil za vas.
Torej, če želite narediti React app, poskusite to počne na tak način.
Če si želite eksperimentirati, lahko poskusite z uporabo te CodePen
ker ima ta CodePen vsi reagirajo ožičenja.
Sem naredil vse delo za vas že.
>> Torej, če želite, da bi Like proizvodnja za javnost React aplikacijo,
poskusite eno od teh generatorjev.
Če si želite igrati okoli, je pogosto vredno samo
kot poskusite igranje okrog na CodePen tukaj.
Zvok dober?
Cool.
>> Torej, to je vse, kar imam.
Še enkrat, vse kode in primeri bo na tej spletni strani tukaj.
Torej, še enkrat, mi ni govoril približno toliko sintaksa React,
ampak, da bi našli vse tiste, malo sintaktične podrobnosti,
to je vse, bo na voljo na tej spletni strani tukaj.
>> Zato vam priporočam, kot narediti prvi korak.
Ga v vašem CodePen.
Poskusite delati na izdelavo je v drugem koraku.
Tam je Četrti korak, in samo glej, kjer boste dobili od tega.
>> Vsa več vprašanj, preverite ven to stran ali email mi.
To je moj email.
Ampak rad bi vam pomagal z nobenim Vprašanja boste morda imate o React.
Torej, ja, to je vse, kar imam.
Lepa za Hvala vsem gledanje ali za udeležbo.
In bom na vsa vprašanja boste morda morali po tem zdaj.
Torej, hvala vsem za gledanje.