>> [Glazbom]
>> Neel Mehta: Ovdje to ide.
>> Pa, svatko, dobrodošli na web aplikacije u budućnosti s reagirati.
Ovo je CS50.
Moje ime je Neel.
Ja sam TA za CS50 i sophomore na Harvard College i vrlo, vrlo
strastveni web developer.
Dakle, ja sam vrlo uzbudljivo razgovarati s vama i danas,
da li si ti ovdje ili kod kuće gledajući oko reagirati, što je, opet
kao što sam rekao, budućnost web aplikacija.
>> Dakle Reagirati je web okvir.
I kao što sam već rekao da neki ljudi ovdje,
okvir je samo skup alata koje možete koristiti
strukturirati i graditi svoju web aplikaciju.
I web aplikacije su, opet, web stranice da su interaktivni kao što su Facebook,
Twitter.com, Instagram.com, što god.
>> Dakle, Facebook je web okvir koji je razvijen od strane Facebook
par godina back-- reagirati je.
Od tada se koristi u Facebook na svojim mobilnim aplikacijama
i web aplikacija, Instagram.
Khan Akademija je još Istaknuti rano usvojitelj reagirati.
>> To je stvarno bio dobivanje iznimno popularan.
Ako ste ikada koristiti stvari poput kutni ili Kralježnica, to je od iste obitelji,
ali od tada do sada preteći svoju popularnost.
To je vruće nova stvar.
To je jako, jako velika.
>> I tako reagiraju dobro ne samo kao Web okvir za izgradnju sučelja.
To je dobro za izgradnju web sučelja.
Tu je i stvar zove reagiraju Izvorni koji
omogućuje izgradnju sučelja za Android i iOS
i možda ostale platforme u budućnosti koristeći samo isti JavaScript kôd.
Ti bi mogao koristiti isti JavaScript kôd pružiti web stranice,
pružiti Android aplikacije i iOS aplikacije.
>> To je vrlo, vrlo uzbudljivo vrijeme.
To je stvarno, stvarno cool prilika.
To je stvarno univerzalna web sučelje razvojni alat,
tako da je vrlo, vrlo Važno je znati.
I, kao što sam govorio ljudima prije, ovaj, mislim,
će se promijeniti kako smo izgraditi web aplikacije zauvijek.
Tako da je možda malo pretjerivanje, ali ja mislim da je to prilično dobra stvar znati.
>> U redu, tako što je reagovati?
Reagirati je okvir možete koristiti za izgradnju sučelja.
Sučelje je, opet, web-stranica, zar ne?
Dakle ovdje je Instagram.com, koristi reagirati.
>> Reagirati je izgrađen na Ideja komponenti.
Komponenta je HTML Element na steroidima,
tako da HTML element kao gumb.
To je stav.
To je zaglavlje, zar ne?
I Instagram će koristiti te, ali to Također će koristiti komponente reagirati.
>> Reagirati komponente souped up HTML elementi
koji imaju svoje ponašanje sadržane u njima.
Dakle, kao primjer, možemo imati vrijeme je element, vrijeme komponenta,
koji će sadržavati poput vrijeme pečat, znate,
komponenta profil koji će sadržavati sliku profila
i ime osobe.
To može imati kao brojač koji može računati kao broja voli,
a ako kliknete na njega, to će povećati broj poput.
Komponenta je samo hrpa HTML koda koji
ima funkcionalnost omotan unutar nje.
Dakle, to je kao HTML element na steroidima, kao što sam rekao prije.
Možete uzeti ove komponente, a možete ih staviti zajedno
kako bi nove komponente u ovaj slučaj, post komponenta,
koji sadrži sve ove stvari.
To bi sadržavati vrijeme, Profil, LikeCounter, možda komentar
a možda sama slika.
I tako web-aplikacije samo su izgradili uzimanjem dijelovi i stavljajući ih zajedno.
Hrani Instagram nije ništa više od hrpa postova jedan za drugim,
svaki post sadrži poput vremena, Profil, LikeCounter, i tako dalje.
To je vrsta kao što gradi kuću.
Vi ne graditi Kuća od vrha prema dolje.
Možete uzeti vas components-- uzeti kao kupaonici.
Možete uzeti bedroom-- ih držati zajedno, i imate novu komponentu.
Imate novi dio kuće.
>> Tako reagiraju sve je izgrađen oko ova ideja komponenti koje
su interaktivne, koji su deklarativno.
Kao što samo reći ono što Profil je, i to ga čini.
Oni su composable.
Možete uzeti vremena i profil, stavi ih zajedno, napraviti nešto bolje.
I oni su za višekratnu upotrebu, pa ako ima izvorni kod za post,
možete ugraditi tu gdje.
>> Možete ugraditi Instagram stvar na svoju web stranicu.
Možete ugraditi u Facebook, na primjer, sve dok ga koristi reagirati kao dobro.
Dakle, dijelovi su stvarno, stvarno, stvarno moćna građevni blokovi webu
koja se može koristiti bilo stavi zajedno napraviti nove izgrađeni.
To je vrlo, vrlo visoka Pregled razini.
Dakle, opet, ako imate bilo kakvih pitanja u bilo kojem trenutku
o filozofiji reaktora, u kodiranje, da me zaustavi, i pustiti mene znati.
>> U redu, tako reagirati, jer to je cool ima drugačiji način gledanja
kako ste izgraditi web aplikacije.
Vjerojatno ste čuli za MVC, a Model možete kontrolirati u CS50 ili što god
Drugi sondiranje klase koje koristite.
I većina okviri izgrađen oko ideje MVC.
Reagirati nije.
Reagirati je izgrađen oko ideje od jednosmjerni protok podataka
kao što se vidi po ovim grafikon ili grafiku ovdje.
>> Uglavnom, imate izvor podataka.
A izvor podataka će odlučiti kako nokautirati određene komponente.
I komponente će onda, kad se mijenjaju,
oni će reći izvor podataka za promjenu.
>> Za korištenje Instagram primjer, možda ćete morati
popis poštanskih objekata kao što su u bazi podataka ili nešto.
To podacima.
I onda naš post komponente će se da su podaci,
i koristiti te podatke za prikaz stvar na zaslonu.
To je ono što je strelica Iz podataka se komponenta,
a onda taj isti podaci koriste da donese hrpu komponenti.
>> U Facebook Messenger, za Primjer koji se reagiraju,
možete imati popis Poruke kao izvor podataka.
I to ne bi donijeti samo popis poruka
ali i popis prijatelja imate.
Imate Broj nepročitanih.
Možda također pružiti Facebook stvar To je na dnu Facebook.com.
Isti podaci se jedan izvor istine
i da uzrokuje puno dijelovi za biti donesena.
I kad god jedan od onih Komponente se mijenja,
to ide natrag i mijenja izvor podataka.
>> Možete poslati poruku, zar ne?
To mijenja izvor podataka.
Možete čitati poruke, tako da postavite nepročitana 0.
To mijenja izvor podataka.
I primijetiti da sve to jednog strelica ide natrag u istom podataka
izvor, tako da znate, dati određeni skup podataka,
znate točno ono što je Stranica će izgledati.
To je deterministički.
Znaš, dao određene podatke, što stranica će izgledati.
Možete predvidjeti kako će to ponašaju i kako stvari idu
raditi kada su zajedno.
>> I kad bih imao milijun komponente ovdje, to će se ponašati isto, zar ne?
Ne bi bilo čudne povezivanje.
Jedan podaci donio milijun komponente.
Milijun komponente mogli vratiti i uređivati ​​podatke.
I tako je to jako lijepo.
Gradimo composable, lako prilagodljiv web aplikacije.
>> Imate jedan izvor podataka, izvor istine.
To govori vaše komponente kako nokautirati stranicu,
a dijelovi će nositi interakciju.
A ako žele promijeniti stvari, samo se vratiti
i reći izvor podataka za promjenu.
Ima smisla?
Dakle Reagirati je sve o razumijevanju kako izgraditi komponentu
i kako bi vaš komponente komunicirati s vanjskim svijetom.
>> Izrada komponente usobno djeluju s vanjskim svijetom
koristi drugu tehnologiju naziva Flux, koji
je okvir koji se doda se na vrhu React.
Nećemo govoriti o tome.
Idemo razgovarati više o, s obzirom podataka, kako možeš donijeti komponentu?
>> I tako reagirati stvarno cool, jer vas možete ga koristiti s bilo stražnjem kraju želite.
Ako imate kao Python leđa kraj, ako vaš Python može ispljunuti neke podatke,
Reagirati mogu uzvratiti.
Ako nema JS izlazi podataka, reagirati čini.
Ruby šina s Podaci, reagirati čini.
>> Dakle Reagirati je u osnovi web view-- prednji kraj s komponentama
za bilo koji izvor podataka god.
I tako ide od izvora podataka na reagiraju komponente je prilično jednostavan.
Idete na drugi način je malo teže.
Koji koristi Flux kao što sam spomenuo prije.
Nećemo ući u to.
Mi ćemo se više usredotočiti na Podaci za komponente stranu.
Na taj način možete napraviti cool, zabavne web aplikacije.
To neće utjecati na vanjski svijet za sada, ali to je druga priča.
>> U redu, tako da ako ste bili ovdje za moj posljednji seminar
znat ćete da je sve koda za današnji razgovor će se na adresi
ovdje, ispričavam se, ovaj URL ovdje.
A zapravo ćemo ići kroz četiri koraka, možda pet,
vjerojatno ne pet.
Mi ćemo se kretati kroz četiri koraka izgradnje uzorak reagirati aplikaciju.
I tako svi izvorni kod za svaki korak na putu
će biti ovdje, pa ako ste sljedeće zajedno kod kuće,
slobodno prostudirati ovaj kod.
Ako ste nakon zajedno ovdje, ćemo ga prikazuje na zaslonu,
tako da ne brinite o tome.
Ali, ako ste kod kuće, osjećam slobodno posjetite ovu web stranicu.
I, da, trebali biste biti u mogućnosti da biste dobili sve kod ćete ikada trebati ovdje.
Dakle, to je dobra mangupirati se plahta kao i za svoje buduće avanture s reagirati.
Cool, tako da ako svatko tko je ovdje, pa čak i ako ste kod kuće,
podići ove web stranice, is.gd/cs50react, nema kapitala, nema podcrtavanja, nema ništa.
>> Vidjet ćete stranicu koja izgleda malo ovako.
To je stvar koja se zove CodePen.
CodePen je kolaborativni kodiranje okruženje
s kojima mogu pisati kod ovdje, i to će automatski biti poslan na vas.
I na ovaj način, ja mogu pisati kod.
Ja mogu izvoditi kod ovdje.
>> Za example-- a ako reloads-- vidjeti, Ja sam trčanje JavaScript kôd na stranici
upravo ovdje, a to će automatski donijeti web stranicu
s ovim JavaScript kôd.
I tako je to način za nas isprobati kod
stvarno brzo bez korištenja naša ID ili koristite naš lokalni stroj
ili što god.
To je vrlo brz način za vas da mockup i isprobati različite vrste koda.
>> Tako ću biti uzimajući primjer koda, stavljajući ga ovdje.
Ćemo raditi kroz njega.
A ako ste kod kuće, može povući to kao dobro.
A ja već instalirali Reagirati ovdje, tako da možete jednostavno
napisati vlastiti kod ovdje, i pokušajte ga kao svoj vlastiti igralište.
>> Da, ako se svi otvoriti ovaj link ovdje.
Molim Vas, dajte mi palac se nakon što su ga otvoriti.
Cool, super cool.
Nema ništa ovdje sada, ali mi ćemo to promijeniti vrlo brzo.
>> U redu, tako da Reagirati je JavaScript biblioteka, i kao takva,
zahtijeva poznavanje JavaScripta, što je web programski jezik.
I to se koristi za druge stvari sada previše, ali prije svega je web razvoj
jezik, pa ako niste upoznati s da, pročitali site zove JSforCats.com.
Predivno je.
Možete naučiti JavaScript za pola sata.
To je nevjerojatno.
>> Dakle, dati ga čitati.
Također smo puno HTML ovdje jer mi smo izraditi web stranice, naravno.
Dakle, ako ste upoznati s HTML, provjerite HTMLdog.com.
Mislim učenje Reagirati je milijun puta lakše ako već
znam blokova.
Ako imate komponente, to je lako napraviti veću komponentu.
To je Reagirati jezik za vas.
>> Pa ići naprijed i dati te stvari čitanje.
Stanka ovaj video.
Dajte ga pročitati ako ste kod kuće ako niste
upoznati s HTML ili JavaScript
OK, pa što ćemo učiniti je da ćemo napraviti
vrlo osnovni flashcard app koristi reagirati.
Ćemo imati Flashcard.
Možete flip karticu natrag i naprijed.
A mi ćemo također imati popis sve karte koje imamo,
a ako smo osjećaj ambiciozna, što bi mogao biti
mogućnosti za prebacivanje između automobili klikom na njih.
>> No, to je, vaš goli kosti, vrlo jednostavno reagirati aplikaciju.
I tako to je zapravo ne trivijalan za provedbu,
ali ćemo pokazati da, ako ništa to, to je vrlo, vrlo lako ga proširiti
ako drugi ljudi vam pomoći s njom.
Tako ćemo proći kroz četiri koraka počevši od nule graditi ovo.
>> OK, četiri koraka, mi ćemo krenuti s prvim korakom.
Prvi korak će biti izgradnju svoje prve komponente.
Kao što sam rekao prije, komponenta reagiraju je samo HTML element na steroidima.
On navodi HTML i neki ponašanja, te
će odrediti kako su ljudi mogu komunicirati s njim koliko
to bi unutarnje stanje.
Kao gumb će znati kao koliko puta to je bio kliknuli na primjer,
i to će znati kako da se stavi van.
>> Tako ćemo ići naprijed i graditi naše Prva komponenta pomoću JavaScript.
Dakle, ako je sintaksa izgleda čudno, to je zato što je vrsta.
Dakle, opet, idemo napraviti varijablu nazvanu
Aplikacija pomoću ključne riječi neka, što čini varijablu,
neka aplikacija jednak React.createClass.
>> Reagirati je knjižnica i ima Napravi klase funkciju.
I ovo je funkcija malo koda koji vas
može koristiti za stvaranje nove Vrsta reagirati komponentu.
I tako React.createClass čini komponentu,
a to će komponenta biti u mogućnosti to učiniti stvari.
Glavna stvar može učiniti je donijeti nešto donijeti u funkciji.
>> Opet, ako se ovaj indeks nije očito ti, preporučujem vam ići na JS za mačke
i to provjeriti.
Je li to zumira dovoljno dobro?
Cool.
>> Tako da svaki sastavni potrebe imati pružanje funkciju.
Render funkcija kaže: Što sam ispisati na ekranu?
No komponenta beskorisno ako to ne
Znati što se ispisati na ekranu, tako da morate imati pružanje funkciju.
>> Tako je u žbuke stvar, samo trebate se vratiti neke HTML.
A što je cool jest da postoji stvar koja se zove
JSX, koji je produžetak JavaScript koja se koristi reagirati.
To vam pisati HTML unutar vaše JavaScript koja
zvuči vrsta čudno kad prvi put razmišljam o tome,
ali to čini puno smisla poslije.
Dakle, možemo to učiniti.
Ako ste upoznati s HTML, ja znam imamo div sa opće namjene
Spremnik za stvari.
Možemo se vratiti div, a unutar ovaj div, možemo staviti stvari.
>> Dakle, recimo da želimo pružiti samo ravno-up flashcard za sada.
Flashcard, rekao bih, će imati pitanje i odgovor.
Dakle, u ovom div, neka je ispisati stavak
koji kaže question-- Što je konačan odgovor na život, svemir?
A onda je odgovor će biti, naravno, 42.
>> To nije došao i na sve.
Da, tako da u osnovi možete stvarno pisanje HTML unutar vašeg JavaScript.
A to će biti ispisati na ekranu.
Tako ćemo ga isprobati.
>> Dakle, mi imamo komponentu.
Moramo reći reagirati staviti je komponenta na zaslonu
tako React.render, pa primijetiti da smo liječenje aplikaciju kao bilo koji drugi element.
Mi ga pisati kao što je to HTML element.
Kao i umjesto da govori kao IMG za sliku ili p za stavku,
pišete App, pa App tretira kao HTML elementa.
Kao što sam rekao prije, to je element na steroidima.
>> Tako da donese App, a vi dati mu mjesto da ga stavite.
A to je, kako možete reci to gdje da ga stavi.
Ja sam stvorio jednostavan div na stranica zove s ID stranice,
i to je gdje je Element će ići.
>> A mi ne ide na trčanje sa HTML.
Uglavnom ovo je idući u dobiti staviti unutar ove stranice elementa
da imamo na zaslonu.
Tako to radi ovaj kod, a to privlači ova stvar na zaslonu, tako da smo ovdje.
Mi smo napravili naš prvi reagiraju komponentu.
>> Dakle, baš kao rekapitulacija, mi nježno napravili novi tip komponente, zar ne?
To je ono što React.createClass.
I u toj komponenti, mi to je rekao ono što je trebao učiniti.
Kad god ova komponenta je ispisati na ekranu,
to će ispisati div s dva stavci unutar nje.
>> A što smo učinili, napravili smo novu aplikaciju pomoću kuta nosača app zapis.
To rekli smo da ga unutar elementa stranice.
I tako ono što sam učinio, on je stvorio nova aplikacija iz tog predloška.
A onda sam ga rekao da to čine.
Tako je rekao, u redu, aplikacija, što bih trebao isprintati?
Asi kaže, ići ispisati div sa dva odlomka unutar nje.
I voila, tu je naš div s dvije točke unutar nje.
Smisla sada?
>> Dakle, opet, cijeli izazov reagirati je samo znati kako napraviti komponente.
Kako napraviti dijelovi rade zajedno.
Sad kad smo napravili naš prvi komponenta, idemo natrag
i čine sastavni prilagodljiv.
Pa znate kako je u HTML si mogu dati svoje gumbe klase?
Možete dati svoje sidra na href.
Možete dati svoje Ulazi tip, zar ne?
Možete dati više običaj svojstva sve svoje elemente
da bi ga više zanimljiv.
A mi zapravo može učiniti točno istu stvar.
>> Dakle, recimo da želimo da naša Aplikacija ići donijeti nikakvu karticu.
Sada smo upravo donio kodirano karticu.
Mi znamo da postoji samo jedan Kartica se može učiniti, tako da smo
će pokušati i promijeniti to sada tako da mi samo možemo dati neki karticu.
To će ispisati karticu.
>> Trebao bi probati i napraviti svoje Komponente vrlo opće namjene.
Dakle, ovaj put sam mogao e-mail ovo je moj prijatelj i biti poput,
god flashcard imate, samo ga hraniti u ovdje,
i to ću to učiniti sama.
Možete staviti druge stvari u svoje vlastite aplikacije.
>> Ali prvo, neka je razbiti ovaj u dvije komponente,
ali želimo odvojiti karticu ispisivanje dio od stvarne aplikacije dijelu.
Dakle, ono što možemo učiniti je da može promijeniti ovu iz App
da CardView, samo novo ime za aplikaciju,
i možemo napraviti novi komponenta naziva App,
ne treba brkati sa starim App.
Moramo se createClass, i kao u HTML,
možete gnijezdo reagiraju komponente u jedan od drugoga.
>> Tako je u ovom uzvratiti funkciji, Funkcija povratka CardView,
i to je točno istu stvar.
Pogledajte zašto je to ista stvar?
Umjesto renderiranje samo app koji ima div i uparivanje unutar nje,
app čini se CardView, a CardView čini div i stav.
Dakle, ovo je naš prvi primjer gnijezde elementi unutar svake druge.
Ima li to smisla?
Dakle, opet, imamo CardView element.
Imamo aplikacija elemenata da je veći od.
>> U redu, pa želimo da naši CardView-- ako vas dati dobar CardView određenu karticu,
to će ispisati za vas, zar ne?
Prvo, moramo napraviti karticu, pa neka je napraviti objekt kartice.
Pa neka mi karticu equal-- Ako ste svi upoznati,
to je samo zapis odluka objekt u JavaScript.
To je vrsta kao STRUCT u C, pa smo napravili karticu,
pa sada možemo proći ovu karticu kao svojstvo ili kao atribut u HTML
terminologija u našu aplikaciju.
Dakle, možemo to učiniti, App kartice jednaka myCard.
>> Znate kako je u ulazu, radite Vrsta ulaza jednaka tekst ili gumb
klasa jednaka BTN za bootstrap ,?
Ista ideja, App kartice equals-- moraš staviti aparatić here--
App kartice jednaka myCard, tako da to kaže da su ove kartice objekt.
Idem ga prođe kao Objekt se app komponentu.
I ovaj app će komponenta moći pristupiti i raditi
Zanimljivo stvari s njim.
>> Dakle, naša aplikacija će biti dati kartica, tako da za sada,
neka je imati aplikaciju samo dati kartica na CardView
sama jer kao app nije će znati što učiniti s njom,
pa smo samo ćete ga dati na CardView.
Tako ćemo ga u sredinu Isto tako, kartice jednaka,
pa svaka komponenta može pristupiti stvari koje je dao za njega.
Oni mogu pristupiti svojstva koje su dali za njega
koristite ovu sintaksu, this.props.card.
>> Dakle, ono što se događa ovdje imate myCard objekt.
Možete ga prođe u aplikaciji pomoću aplikacije kartice jednaka myCard.
Taj objekt kartica daje svoj app.
Aplikacija se može pristupiti kao this.props.card.
To je vrsta kao slike zna što je izvor.
>> Ovaj app zna što je kartica je, a to može učiniti stvari s njim.
To možete učiniti računanja.
To može donositi odluke na temelju izvan nje.
>> Za sada, bio sam idući u proći this.props.card na CardView.
Smisla sada?
To će učiniti više smisla sada.
>> U redu, tako da sada smo na CardView.
Naš CardView, s obzirom na kartice, trebali ispisati svoje pitanje i odgovor.
Sada mi samo isprintati neke kodirano pitanja i odgovori.
Moramo shvatiti out-- trebamo pitati karticu koja su nam dali
što je pitanje i odgovor, a zatim ispisati ovo na zaslonu.
>> Dakle, možemo to učiniti ovdje.
U donijeti begin-- prvo učiniti jednako.
Dakle, ono što mi radimo ovdje znamo da je kartice su nam dani na imovinu,
pravo?
To daje nam kao ulaz.
Kao što je gotovo kao Argumenti u funkciji.
Kartica je argument gotovo ovom CardView.
>> Mi ćemo izdvojiti da je, i stavi je u varijablu pitanje.
Provjerite je li odgovor otišao u varijablu odgovor.
Traži da se kartica odgovoriti.
I sada kada imamo to, umjesto da ispišete taj tekst,
idemo ispisati sve što nam je dao.
>> Dakle, ovo stuff-- pa idemo ugasiti pitanje odgovor.
Idemo vidjeti ako to radi.
Cool, pa neka je korak kroz njega još jednom za svaki slučaj.
>> Pa moja kartica je kartica objekt, a mi daju tu karticu app.
A aplikacija će uzeti kartice i dati ga na CardView.
A to CardView kaže, ako vas dajte mi bilo flashcard objekt,
Ja ću ispisati svoje pitanje i njegov odgovor, zar ne?
>> Dakle, ono što sam mogao učiniti je da mogu pošalji ovaj kod, prvi
kao 10 linija koda, moj moj prijatelj.
Mogao ga ugraditi u njegova primjena.
I koliko god je učinio istu stvar, kao CardView kartice jednaka je ovaj,
dok god je on stvorio CardView i dao mu prave informacije,
mogao donijeti svoju karticu.
I tako na taj način, to je stvarno cool način za vas da izgrade
komponente koje koriste jedni druge, zar ne?
Ova kartica, mogao sam objaviti ovo CardView na internetu,
a ljudi će biti u mogućnosti koristiti ga.
Tako je u osnovi, to je kao jedna od standardne funkcije u C knjižnici.
>> To je funkcija gdje netko ga je napisao.
Možete dati određeni doprinos.
To će proizvesti određeni izlaz.
Ne zanima me koliko to radi interno.
Kao čeznuti kao te dati pravo ulaz, to će napraviti pravi izlaz.
>> I komponenta može biti pomisli na isti način.
To je kao CardView funkcija knjižnice.
Ako ste dati neki karticu kao nekretnine, to će
ispisati sadržaj tu karticu.
Kao ako promijenim karticu za umjesto da bude kao što je 5 plus 37,
to će se ažurirati u skladu s tim.
Tako je samo promjenom ulaz, dobiva određeni izlaz.
Tako se možete sjetiti komponenti gotovo kao funkcije na taj način, što
možete staviti zajedno.
Možete dobiti ulaz, kao što je ovaj CardView kao ulaz, te dobiti izlaz.
U tom slučaju, izlaz je HTML.
Smisla sada?
Cool, pa opet, svojstva Kako možete proći podatke
ui iz komponenti.
>> OK, neka je učiniti ovo stvar interaktivni.
Sada je to vrsta dosadno.
Što je [nečujan]?
Možete ispisati neke od njih, ali to je sve što mogu učiniti.
>> Dakle, vratimo se na staro pitanje samo za sada.
OK, upravo sada ti dijelovi su dosadno jer sve što im je činiti,
su dobili ulaz.
Oni čine izlaz, zar ne?
To je vrsta dosadno.
Želimo da se naš komponente da bi mogli imati
neka vrsta unutarnjeg stanja, kao što se sjetiti nešto.
>> Za flashcard za primjer, kakvu državu
možda želite zapamtite za flashcard?
Što privremeni status možda želite zapamtiti
za flashcard u flashcard app?
PUBLIKA: Bilo je to bio zrcaljeno?
Neel Mehta: Da, u pravu.
Tako možda želite zadržati zapis ste suočiti se ili su
ste licem prema dolje na kartici.
Na Facebooku, na primjer, što bi želim sjetiti gdje u news feed
si ti ili tko je želio profil radiš upravo sada.
>> Na Messenger, kao što je tekst koji unesite u okvir za unos, zar ne?
Ako osvježite stranicu, to ide dalje.
Ali ti stvarno ne briga.
To je samo privremeno.
Da?
>> PUBLIKA: [nečujan]
Neel Mehta: Kao trenu kartica, kao što se može viđenje
strana pitanje ili bočni odgovor?
>> PUBLIKA: U redu.
>> Neel Mehta: Poput dvostrano Flashcard, zar ne?
Da, tako želite ima tu ideju sada
Imam svojstva, koja je poput ulaza, ali država koja je privremeno, uh,
gdje ste na stranici, zar ne?
Opet, rekao sam u Facebook Poslanik, imam kao što osoba
pregledavate Facebook ili tko je profil, zar ne?
>> To je samo privremeno.
Važno je pokazati korisniku što se događa, ali osvježite stranicu.
To zapravo ne smeta.
Dakle, to je privremeno stanje, tako da sve što je država.
>> Dakle, opet, tu je država i rekvizite.
Rekviziti je ulaz dao iz izvora podataka.
Država je kao zadane.
To je baš kao i stvari koje čini stvar interaktivni.
>> Dakle, u našem CardView-- ćemo imati naše CardView-- tako da je lijepo.
Ono što ćemo učiniti ovdje, idemo dotaknuti CardView i samo CardView.
I tako je moj prijatelj koji je dobio ovo, oni ne bi primijetio nikakvu razliku.
Oni ne bi morao mijenjati bilo koji od vlastitog koda,
ali bih vidjeti svoje CardView dobio souped up.
To je lijepo dio o komponentama.
>> U redu, tako da u našem CardView, pokušajmo i pratiti hoće li se ukinuti do
ili licem prema dolje.
U Reagirati smo to prvo navodeći početno stanje.
Gdje kartica početi?
>> Tako će funkciju pod nazivom getInitialState raditi, a mi se vratiti objekt.
Ovaj objekt sadrži neke države, i država je samo ključ-vrijednost par.
Kao u uputiti, imate ključ i vrijednost, imate kao što ime je niz.
>> U tom slučaju, recimo prednji je istina.
To govori da imamo državu.
Jedan dio države je atribut zove prednji.
[Nečujan], tako da po defaultu, mi smo u prednjoj strani kartice,
a možemo promijeniti ovu kao što smo flip kartice.
Ima smisla?
>> U redu, tako da u uzvratiti, upravo sada, mi smo pokazujući na pitanje i odgovor.
Sada ono što smo trebali učiniti se prikazuju na pitanje
ako smo na prednjoj strani kartice tako odgovor je u poleđini kartice.
Zato što sve napraviti kartica interaktivni.
Dakle, pokušajmo i ovo ovdje.
Pa, prije samo napraviti varijablu.
Možemo pitati sada this.state.front.
Mi pristup navode isti smo pristup rekvizite, pa this.state.front.
>> Ako smo ispred, a zatim tekst je this.props.card.question.
Ako smo na prednjoj strani kartice, idemo pokušati zgrabiti
pitanje s kartice.
Inače, ako smo na leđima kartice, što nam je činiti?
>> PUBLIKA: Odgovor?
>> Neel Mehta: Aha, pa tekst jednako this.props.card.answer.
Ali ako primijetite, mi smo pomoću država donijeti odluku
Jer sada komponente će izgledati drugačije
temelji off kako se oni u interakciji s njim.
Dakle, umjesto da ispišete ove, samo mi ćemo ispisati tekst.
Cool, pa sada, kao što vidite, vidimo samo pitanje.
I ako sam promijeniti stanje ovdje ručno na prednje je lažna smo dobili 42 leđa.
>> Dakle, opet, ova komponenta ima vlastitu državu.
Kao gumb zna hoće li to je bio pritisnut ili ne,
ova stvar ne zna što je na prednje ili na leđima.
Po defaultu, to je na prednjoj strani.
A onda, ako je na prednjoj strani, ćemo ispisati na pitanje.
Ako je na stražnjoj strani, mi ćemo ispisati odgovor.
Dakle, opet, informacije dao je isti.
To jednostavno izgleda drugačije ovisno o tome kako ste ga programirati.
Tako, primjerice, Facebook Messenger, čak i ako ste dobili isti izvor podataka,
to može izgledati drugačije jer država je različita.
Vi ste u potrazi na Poruka druge osobe.
>> U redu, tako da je ovo sve dobro i dobro, ali sada što je zapravo
nas moći promijeniti, bilo naša kartica naprijed ili natrag.
Možemo to učiniti dodavanjem flip gumb, gumb na karticu koja
će flip karticu ako je [nečujan].
Tako ćemo dodati gumb ovdje, ovaj gumb, a ovaj gumb će reći poklopac.
>> I tako sada, to ne učiniti ništa.
To samo izgleda lijepo.
Ono što možemo učiniti je da možemo dodati klikom rukovatelj, onclick jednak this.flip,
a mi ćemo definirati poklopac kasnije.
Ali u osnovi, onclick je funkcija koja
dobiva se zove kada korisnik ne klikne.
>> Tako gumb će znati kada je bio kliknuli.
Otišao je to bio kliknuli, to će flip kartice.
To je vrsta kao što je vaša momak pizza dostava.
Ti si kao, u redu, svaki put kad netko zove me, ja ću izbaviti pizzu, zar ne?
>> Što se registrirate ovu slušatelja.
Možete slušati događaj.
Vi se zove, a kad je Događaj dogodi, radite nešto.
Možete dobiti pizzu.
U ovom slučaju, kad ste kliknuli, što flip karticu.
>> I tako moramo definirati funkcija koja će flip kartice,
pa ćemo napisati to pravo Ovdje, flip funkciju.
I što misliš, Flip će učiniti?
Opet to dobiva zove kada mi kliknite gumb Flip.
Što bi funkcija Flip učiniti?
>> PUBLIKA: Promjena this.state.front iz vjeran lažna, lažna na true.
>> Neel Mehta: Aha, tako da sve što this.front is-- prednji država.
Uzmite prednji stanje, ako to je istina, čine ga lažno.
Ako je lažni, bi li to istina, zar ne?
Dakle, pokušajmo to.
>> Ne možete promijeniti stanje samo radi this.state.
Ne možeš to učiniti.
Ne mogu to učiniti.
Morate koristiti funkciju zove this.setState.
>> Tako da mogu reći this.setState prednji debelog ovo gdje, opet, usklik
Točka znači suprotno.
Mislim da ako ovo. state.front Istina je, da će okrenuti lažna.
Tako ćemo postaviti stanje iz vjeran lažna.
Ako je lažno, mi ćemo postavljen je netočno da se istina.
>> Samo obavijest da smo postavili i dobiti nešto drugačije, pa pokušajmo to.
Bada Bing, pogledajte ovo.
Gumb Flip će sada prebacivanje naprijed-nazad stanje.
>> I tako ovdje gdje vidite malo čarolije reagirati.
Kao mi nikada to rekao da se ponovno pružiti.
Mi nikada rekao da ponovno iscrtavanje ništa.
Ako ste to bez reagirati, što bih
su to-- vole kada Flip se klikne gumb,
ne bi se reći da Ručno ponovno donijeti, zar ne?
>> Reagirati je stvarno cool, da ako vas Daju određeno stanje i osobine,
uvijek će donijeti točno istu stvar.
I tako kad smo ikad mijenjamo država i svojstva,
reagiraju samo ponovno čini cijelu stvar.
Ona zna da postoji jedan-na-jedan korespondenciju
između države i parametar i HTML.
Dakle, kad god je bilo onih Promjene po kroz određeno stanje,
to će promijeniti način na koji Plaća je ponovno donio.
I tako zapravo reagiraju poput čekajući promjenu.
>> Kad god se mijenja nešto, to će ponovno donijeti cijelu stranicu.
A ako to zvuči neučinkovit, to je zato što bi to bilo,
ali reagiraju koristi stvar naziva Shadow DOM.
Umjesto izravno crtanje stranicu, to drži virtualni HTML stabla u memoriji.
>> Znate, HTML je poput stabla, kao hijerarhijske strukture podataka.
Ona čuva lažni stabla u memoriji, i kad god ažurirati stranicu,
to će privući još jedan lažni stabla, i to će izračunati
što promijeniti to treba učiniti stranica da bi dva stabla jednaka.
Tako je u osnovi, to je gotovo ponovno čini puno.
A onda je samo želio mijenja Stranica u malim ugađanje prema potrebi,
tako da je vrlo, vrlo, vrlo učinkovita.
>> Tako je u osnovi reagiraju će kad god nešto promijeniti,
to će ponovno prikazati stranicu gotovo.
To će shvatiti što trebam promijeniti kako bi pravi stranica odražavaju
virtualni stranica, a to će učiniti.
To je virtualni DOM.
To je jedan od najvećih značajke reagirati.
>> Ima li to smisla?
Ima li pitanja?
Da?
>> PUBLIKA: Kako usporediti i dalje na MVC
da smo razgovarali o Prije kao resursa.
>> Neel Mehta: Da, pitanje je kako se to usporediti s MVC?
Pitali ste o resursima.
Pa, pričajmo o tome kako funkcionira.
>> U MVC, ti bi osvježili model.
U tom slučaju imali bismo model kartice.
Pogled će imati Flip gumb, a kontrola
bi flip funkciju.
Dakle, pogled će reći Regulator za okretanje poklopac.
Flip će reći Model mijenjati, zar ne?
>> I tako kada napraviti MVC, ti slušati model za promjenu,
i ponovno pružiti pogled u skladu s tim.
Ili samo trebate sviđa imaju kontroler.
Pričekajte model za promjenu, a zatim izabrati jedan dio kao stvar
promijeniti.
Ovdje imamo jednu stvar, ali u velikom app,
morate željeli zapamtiti što promjena u svakom pojedinom mjestu,
tako da je malo neugodno.
I tako reagiraju lijepo jer ima Shadow Dom.
To može priuštiti samo prepisati cijelu stvar.
Ne morate se selektivno kao što pogodite što ažurirati.
>> Na Facebooku ako vam se sviđa dobili novu poruku, u MVC,
ne bi se sjećam, OK, promijeniti stvari
na vrhu stranica, ikona poruka.
Također pop novi prozor na dnu.
Također provjerite novu stvar u tom prozoru.
Također igrati zvuk.
>> To je puno stvari izlazak istovremeno.
I tako, ako ne imaju Sjena Dom, ti bi
morate učiniti ručno, jer ne možete dobiti osloboditi od cijele stranice.
Ne možete si priuštiti, tako da imate ručno promijeniti svaku stvar,
što je stvarno neugodno u MVC.
>> Dakle, kako bi se štedljiv, oni selektivno
ažurirati stranicu, što je učinkovit, ali i neugodno.
U reagirati, zbog sjene Dom, dobivate obje stvari besplatno.
To je učinkovit, jer sjene Dom.
Usko grlo je ažuriranje stranicu.
Ne radi manipulacije stablo.
Dobivate učinkovitost.
Također dobiti jednostavnost korištenja, jer ako se samo prepisati cijelu stranicu,
ali samo znam, u redu, stvari će biti na stranici negdje.
To bi moglo biti na drugom mjestu, ali to će biti na stranici, zar ne?
Tako da samo ponovno donio cijela stvar praktički,
i možda napraviti par promjene na samoj stranici.
>> Dakle, opet, u MVC vas će morati izabrati
između jednostavnost uporabe i učinkovitosti, i reagirati, dobiti oboje.
Dakle, to je bolje.
Ima smisla?
Čvrsta.
>> OK, da vidimo pričajmo malo o koraku 4,
kako možemo ugraditi komponente.
Dakle, imamo to pravo sada.
Mi imamo super mali gumb.
Možemo ga okrenuti leđa i naprijed, i to je sve što radi.
Recimo da želimo imaju drugu komponentu.
Recimo da je naš flashcard app trebao sadržavati popis svih kartica
da imate, tako da mi znači treba imati drugu komponentu.
Pa, možda ga zovu prikaz popisa.
Učinimo prikaz popisa koji koegzistira s CardView,
i ovaj prikaz popisa i CardView će vam se svidjeti raditi zajedno.
A možete ih kombinirati kako bi naš app za vas.
>> Prvo, neka je napraviti par više karata u pravu.
Recimo, ono što kartica?
I samo tako da ne morate bore vam ga upišete u,
Samo ću ga kopirati ovdje.
I tako ću se ne Daju samo jednu karticu.
Idem dati niz karata.
Dakle, prvi su aplikacije će razbiti za sada.
U redu, tako da ćemo napraviti to moći nositi više kartica.
Prvo, ćemo ga dati, ne samo jedna kartica, ali niz karata,
poput popisa kartica.
I u ovom slučaju, imamo troje.
>> U redu, tako da je aplikacija će dobiti popis kartice,
i to će odlučiti koje jedna pokazati na CardView.
CardView može samo donijeti jednu karticu, ali app
dobiva popis svih kartica, zar ne?
>> Dakle, kada ste shvatiti jedno kartice dati CardView,
kako bi ti valjda da biste mogli donijeti odluku o tome koja kartica
pokazati?
Da bi vam dati savjet, to je privremeno Vi ćete biti gledanje određenu karticu.
Ako osvježite stranicu, vi ćete Samo se vratiti na prvi karticu.
To je u redu, jer je to privremeno.
Što je tehnika možda koristimo?
>> PUBLIKA: Možete napraviti varijablu pa baš kao što je imao ispred.
Je li to istina, što bi ima struju kartice jednaka 1?
>> Neel Mehta: Da, tako mi Želite imati državu, zar ne?
Ti bi koristili stanje u komponenta shvatiti
koja kartica želimo dobiti.
Kao imamo popis sve karte, mi ćemo
koristiti stanju shvatiti jedna od prve kartice,
Druga kartica, treći kartica, i tako dalje.
>> Dakle app, tako aplikacija će dobiti imaju funkciju getInitialState,
getInitialState povratak funkcija.
A mi ćemo samo reći activeIndex 0.
Tako sada naša app ima svoju državu.
>> I tako sada čine, shvatiti kartica, neka je samo ići u nizu
i iskoristite stvar u tom indeksu.
Odaberite kartice jednake this.props.cards this.state.activeIndex.
Dakle, kao što vidite ovdje, podupirači i država zapravo rade zajedno.
Tako da sada imamo activeCard, ćemo ga nazvati activeCard,
i neka je vidjeti ako to radi.
[NEČUJAN]
>> Oh, to je greška tekst.
Ah.
>> Cool, yep, pa sada smo natrag gdje smo bili prije, zar ne?
Isti stari program, osim Sada možemo podržati
popis karata, a ne samo jedna kartica.
A sada, opet, ako smo promijenili activeIndex, možemo ići od 0 do 1,
a sad da druga kartica, a onda smo otišli na 0.
Dakle ovdje je novi souped up verzija našeg.
>> U redu, tako da sada neka je imaju pogled na popis koji pokazuje sve karte u svom programu,
pa ćemo napraviti novi komponenta naziva listview.
Neka listview jednak react.createClass.
Dakle, želimo polagati neuređen popis sa stavke na popisu za svaku karticu.
I tako imamo hrpu karata.
Želimo jednu stavku s popisa za svaku karticu, zar ne?
Mogli bismo učiniti za petlju ili nešto napraviti novu stavku popisa.
No, način na koji ste to učiniti u Reagirati, koristite stvar zove karta.
Karta je alat ili funkcija koristite da za svaki predmet, radi neke funkcije,
Potrebno povratnu vrijednost, i daje vam to natrag.
>> Dakle, kao primjer, imamo niz 1, 2, i to 3.map function--
je skraćenica za function-- x strelicama x puta x.
To, kaže, za svaki broj u 1, 2, 3, uzmi ga.
Trgu, i dati ga natrag.
Dakle, što misliš 1, 2, 3.map x ide x puta
x daje vam dati natrag da je ova funkcija
izvoditi na svakom elementu tog polja.
>> PUBLIKA: 1, 4 9?
>> Neel Mehta: Aha, 1, 4, 9 jer ti 1 puta 1.
To vam daje jedan.
To je prvi element.
>> 2 puta 2 je 4.
To je drugi element.
3 puta 3 je 9.
To je treći element.
Ima smisla?
Dakle, karta ima vas tehniku koristiti u funkcionalnim programera,
novi stil programiranje učiniti nešto
za svaki element na popisu.
I tako to zvuči poznato.
Imamo popis kartica.
Želimo dobiti stavku popisa za svaku jedan, tako da ćemo koristiti samo kartu ovdje.
Mi ćemo reći, dopustite popis equals this.props, kartice, karta.
>> I tako dao posjetnicu smo će generirati stavku popisa
Uz to kartice sadržaj strane.
Recimo samo želimo dati kartice pitanje tako card.question.
Dakle, ovaj popis sadrži Niz LI-a ili popis stavki
gdje postoji jedan popis predmet za svaku karticu,
i da sadrži kartice pitanje.
Ima smisla?
>> Cool, pa sada neka je zapravo ispisati da van.
Tako ćemo se vratiti u ul.
Unutar tog neuređen popis, samo mi ćemo držati cijeli popis
koji su nam dali.
Cool.
>> U redu, tako da sada ovo Pogled Lista radova jednostavno pronaći.
Bilo kakva pitanja o prikazu popisa?
Imate hrpu karata.
Možete napraviti stavku popisa za svaku karticu.
A ti ih stavi unutar neuređen Lista, a ti ga vratiti.
Dakle, sada ćemo djelovati tako da smo ugradili to unutar naše aplikacije,
tako da možemo to učiniti, pogled popisa.
Ono što je argument mi prođe na prikaz popisa?
Koje osobine mi ga dati?
Zapamtite, ako vam dati to hrpa karata,
to će napraviti popis vidjeti za one kartice.
Pa što će nam donijeti ovdje kao argument?
PUBLIKA: Popis kartica?
Neel Mehta: Da, tako karticama jednako this.props.cards, zar ne?
I tako jedini problem je da možete samo
okrenuo jedan top level element uzvratiti, pa moraš ga zamotajte u div.
To je čudno.
Tako ćemo vidjeti je li to.
Da li to raditi?
>> Da, tamo idete.
Tako sada imamo popis kartica na dnu,
a onda mi imamo Sama CardView na vrhu,
i da će se okrenuti između dvije strane kartice.
Sada se taj smisla kako sam to učinio?
Da, pa opet imamo dvije komponente.
Prva komponenta ispisuje iz svake kartice na popisu.
To je pogled na popis.
I druga komponenta ispisuje samo tu karticu.
Ako vam dati određeni karticu, to će ispisati informacije o toj kartici
i neka vam okrenuti leđa i naprijed.
>> Dakle, ako želimo, možemo pokušati razgovarati o dodavanju neke nove mogućnosti za to.
Inače možemo govoriti malo više o brzini od reaktora,
ili možemo odgovoriti pitanja koja možete imati
jer su sve osnovne dijelove od reagiraju da želim razgovarati o tome.
Možemo ići naprijed.
Možemo odgovoriti na pitanja.
Što god želiš.
>> PUBLIKA: Mogu li koristiti JSX u normalnom JavaScript?
Ili je to nešto što došao s [nečujan]?
>> Neel Mehta: Pitanje je može koristite JSX s normalnom JavaScript?
Odgovor je da.
JSX je samo način je potrebno vašem JavaScript koji je HTML unutar nje,
a sastavlja u JavaScriptu koji nema HTML unutar nje.
Dakle, primijetite that-- tako primijetiti ovdje.
Ovo izgleda kao da imate kao div i imate stvari unutar nje.
>> Koji prikuplja JavaScript da kao što stvara istu stvar.
Mislim ono što sam rekao je da je JSX je samo sintaktička, kao da je
Preprocessoru za JavaScript mnogo kao što su PHP je Preprocessoru za HTML.
JSC je Preprocessoru za JavaScript koji omogućuje
staviti HTML unutar vašeg JavaScript.
I tako, ako imate pravo transformatora što je stvar koja se zove [nečujan]
koji će preobraziti.
Pravo preprocesor, to će vam to učiniti.
>> PUBLIKA: [nečujan]
Neel Mehta: Obično ne morate staviti HTML unutar JavaScript
osim ako radiš reagirati.
Ali to možete učiniti u svakom slučaju.
Da?
>> PUBLIKA: Mislim da ti opisao Reagirati
kao funkcionalni programiranja jeziku.
Mi smo učenje C u CS50.
Je C također funkcionalna jezik?
Neel Mehta: Dakle pitanje je oko funkcionalni
u odnosu na drugu stvar zove Imperativ ili proceduralnog programiranja.
Postoje dvije vrste programa popularne.
Jedan se zove proceduralne, koji je sve o kao što rade naredbi,
i jedna je funkcionalno, što je sve o ima funkcije i vlasništvo
ulaz i izlaz od njih.
Reagirati je funkcionalna paradigma.
C je vrlo proceduralna paradigma.
>> Kao primjer, na primjer C, ne činite to deklarativno način
izrade programa, zar ne?
Morate reći, to ispisati.
Promijenite ovu strukturu podataka.
Isprintaj.
To je sve o naredbi.
>> U reagirati, ne postoji da mnoge naredbe.
To je sve o vlasništvo Komponente ste stavili zajedno.
Oni su poput funkcije.
Imate poput funkcije zove CardView,
koja je funkcija koja ima ulaz, izlaz,
i tako reagiraju sve o ovom filozofije
nas od having-- imate podatke.
Možete proći kroz to algoritam, a to će
Izlaz HTML koja vas Samo tiskani stranicu,
i tako da ćete morati izgraditi ga dio po dio.
>> Dakle crtati metaforu za ono što Rekao sam prije, znate kako
na Facebooku ako ste dobili poruku, a vi odlučite što dijelovima ažurirati,
to je proceduralna.
To je imperativ, zar ne?
OK, dobio sam poruku.
Idemo promijeniti račun postoji.
>> Idemo pop prozor ovdje.
Idemo promijeniti račun postoji.
Idemo nacrtati ovo ovdje.
To je proceduralni pristup.
>> To je ono što stvari kao što su kutni, Poticaj, Backbone, ostali okviri koristiti.
Reagirati je funkcionalan.
To je vrlo drugačiji način razmišljanja o stvarima.
Potrebno je tu ideju neka je imaju funkcije ili algoritmi koji će vam
Daju podatke.
To će ispljunuti što ga bi trebao biti, a računalo
će se pobrinuti za vaganje van.
Vi ne ga nositi sami.
Znači li to da bi malo smisla?
Da?
>> PUBLIKA: U funkcionalnom jeziku, sve događa odjednom?
>> Neel Mehta: Ne, stvari se događaju u redu.
Kao ovdje postoji još narediti, ali to ne
dogoditi u redoslijedu kao pohvaliti, naredba, zapovijed.
To se događa u redoslijedu funkcija vam daje izlaz.
Stavite to u drugu funkciju.
Stavite da se u drugi funkcija, još jedna funkcija.
>> Ako to ne učinite CS51, vi ćete saznajte funkcionalne programe
malo izvan opsega ove.
Ali zapravo, ono što čini Reagirati svjež je ne samo
jednosmjernog toka podataka i virtualni Dom,
ali i ova ideja funkcionalni programiranje.
I funkcionalna programiranje je vrlo jednostavno za sastavljanje i napraviti super stvari iz,
i to je vrlo lako misliti oko i razum o tome.
Dakle, to je još jedan dobar ždrijeb reagirati.
Još pitanja?
Da?
>> PUBLIKA: Hm, zašto bi koristiti neka nasuprot var?
>> Neel Mehta: Dakle, pitanje je zašto koristite neka umjesto var?
To je stvar koja se zove ES6 ili ECMAScript 6.
To je nova verzija JavaScript.
Postoji hrpa tehničkih razloga, ali neka je bolja verzija var.
>> To je kako se proglasi varijabli.
Možete koristiti pustiti.
Možete koristiti var.
Neka ima hrpa tehničkih reasons-- možete ih pogledati
do later-- zašto je to bolje.
Uglavnom, ES6 ima neke lijepe Novi sintaksa, neke nove značajke
na vrhu stare JavaScript.
>> Tako smo kao pet minuta.
Samo sam željela razgovarati o još jedna stvar jako brzo.
Ako ste imali bilo kakvih pitanja, pričajmo o tome poslije.
Ali samo tako to dobiva uhvaćen na kameru, samo sam
želite razgovarati malo o tome kako zapravo koristiti reagirati na svoje aplikacije.
>> Ako idete ovdje, Facebook.GitHub.IO/react,
ovo je početna stranica za reagiranje, to će vam pokazati kako zapravo koristiti
Reagirati na svojim stranicama.
U osnovi, to je malo komplicirano pokušavate instalirati reagirati.
To nije tako lako kao što samo povucite i ispustite JavaScript u tamo.
>> Morate imati svoj transformator postaviti, koja će, kao što je učinio i prije,
pretvoriti vaše JSX u normalno JavaScript.
Morate stvar koja će sastaviti li ES6 u normalu.
JavaScript postoji puno kretanja Dijelovi morate učiniti, tako da je stvar
zove maloposjednik, Yeoman.io.
I ovo je alat naredbenog retka koji će vam pomoći skela svoj Reagirati
Projekti lako.
>> Dakle, možete pročitati o tome kasnije, ali postoje neke alate
da maloposjednik nudi.
Oni će vam stvoriti Reagirati Aplikacija sa svime izgrađen.
Kao što ćete izgradili u, komponenti izgrađen u.
To će imati svoj transformator izgrađen u.
Oni imaju puno kul stvari izgrađen u automatski
pomoću tih stvari zove generatori.
>> Pa pročitajte o tome, ako vam se sviđa.
Dovoljno je otići na maloposjednik, Y-E-O-M-A-N, i možete pronaći generatori poput ovih.
A s generatorima kao tih, baš kao i onaj
je par naredbenog retka naredbe.
To će skela iz jednog Cijeli Reagirati aplikaciju za vas.
To će dobiti sve ručno cijevi, i roktati rad za vas,
i to je razlog zašto ste upravo se usredotočite na samo pisanje u reagirati.
>> Tako je u osnovi izgradnji Reagirati app je svaki bitan.
To je žičani svi zajedno, ali postoji su alati koji će to učiniti za vas.
Dakle, ako želite napraviti Reagirati Aplikacija, pokušajte raditi na taj način.
Ako samo želite eksperimentirati, možete isprobati koristeći ovaj CodePen
jer ovo CodePen ima svi reagiraju ožičenje.
Ja sam učinio sve rade za vas već.
>> Dakle, ako želite napraviti poput proizvodnja za oslobađanje reagiraju aplikaciju,
probati jedan od tih generatora.
Ako želite samo igrati okolo, to je često vrijedi samo
kao i isprobati igranje okolo na CodePen ovdje.
Zvuči dobro?
Cool.
>> Tako da je sve što imam.
Opet, sve kod i primjeri će biti na ovim stranicama ovdje.
Dakle, opet, nismo razgovarati o koliko sintaksa reagirati,
ali da se naći sve one malo sintaktičke pojedinosti,
sve će biti dostupan na ovim stranicama ovdje.
>> Dakle, ja bih preporučiti kao poduzeti prvi korak.
Stavite ga u svoj CodePen.
Pokušajte raditi na tome da drugi korak.
Postoji Četvrti korak, i samo vidjeti gdje ste dobili od toga.
>> Još pitanja, provjerite kako tu stranicu ili email me.
To je moj e-mail.
Ali volio bih vam pomoći s bilo kojim pitanja koja možda imate o reagirati.
Dakle, yep, to je sve što imam.
Vrlo mnogo za sve vas Hvala gledate ili za sudjelovanje.
A ja ću na sva pitanja možda ste se nakon ovog sada.
Zato vam svima zahvaliti za gledanje.