[Musiikkia] 

NEEL Mehta: Tässä se menee. 

No, jokainen, tervetuloa web apps tulevaisuudessa reagoida. Tämä on CS50. Nimeni on Neel. Olen TA CS50 ja toisen vuoden opiskelija Harvardin College ja hyvin, hyvin intohimoinen web-kehittäjä. Joten olen erittäin jännittävää puhumaan teille tänään, onko olet täällä tai kotona katsomassa, noin React, joka on, jälleen kuten sanoin, tulevaisuuden verkkosovelluksia. 

Joten React on web puitteet. Ja kuten olen kertonut joillekin ihmisille täällä, kehys on vain joukko työkaluja, joiden avulla jäsentää ja rakentaa web-sovellus. Ja web-sovellukset ovat, jälleen, sivustot jotka ovat vuorovaikutteisia, kuten Facebook, Twitter.com, Instagram.com riippumatta. 

Joten Facebook on web puitteet joka on kehitetty Facebook pari vuotta back-- React on. Sitä sittemmin käytetty Facebook heidän mobiilisovellukset ja Web App, Instagram. Khan Academy on toinen näkyvä varhaisten omaksujien ja reagoida. 

Se on todella ollut saada erittäin suosittu. Jos joskus käyttää asioita, kuten Kulmikas tai Selkäranka, tämä on saman perheen, mutta se on sittemmin pitkälle ylittää niiden suosio. Se on kuuma uusi asia. Se on todella, todella valtava. 

Ja niin React on hyvä ole yhtä Web puitteet rakentaa rajapintoja. Se on hyvä rakentaa web-käyttöliittymiä. Mukana on myös asia nimeltään React Native joka voit rakentaa rajapinnat Android ja iOS ja ehkä muiden alustojen tulevaisuudessa käyttäen vain samaa JavaScript-koodia. Voisit käyttää täsmälleen samaa JavaScript-koodin tehdä sivustot, tehdä Android-sovelluksia ja iOS sovelluksia. 

Se on erittäin, erittäin jännittävä aika. Se on todella, todella cool tilaisuus. Se on todella yleinen web käyttöliittymän kehittämiseen työkalu, joten se on hyvin, hyvin tärkeintä on tietää. Ja kun olin kertoa ihmisille ennen, tämä, luulen, tulee muuttumaan, miten me rakentaa verkkosovelluksia ikuisesti. Joten se on ehkä vähän liioittelua, mutta minä mielestäni se on ihan hyvä tietää. 

OK, niin mikä on reagoi? Reagoida on puitteet voit käyttää rakentaa rajapintoja. Käyttöliittymä on, jälleen, web-sivun, eikö? Joten tässä on Instagram.com, käyttötarkoitukset reagoida. 

Reagoivat on rakennettu Ajatus komponentteja. Komponentti on HTML elementti steroideja, joten HTML-elementti on kuin painiketta. Se on kohta. Se on otsikko, eikö? Ja Instagram käyttää näitä, mutta se käyttää myös komponenttien reagoida. 

React komponentit ovat souped-up HTML-elementtien että on oma käyttäytyminen joihin ne sisältyvät. Joten, kuten esimerkiksi meillä voisi olla aika elementti, aika komponentti, joka sisältää kuten aikaleima, tiedät, profiili komponentti, joka sisältää profiilikuva ja henkilön nimi. Se voi olla kuin laskuri, joka voi laskea kuten määrä tykkää, ja jos klikkaat sitä, se tulee lisätä määrää tykkää. Komponentti on vain nippu HTML-koodi että on joitakin toimintoja kääritty sen sisälle. Joten se on kuin HTML-elementti steroideja, kuten aiemmin sanoin. Voit ottaa näitä komponentteja, ja voit laittaa ne yhteen tehdä uusia komponentteja, vuonna Tässä tapauksessa viesti komponentti, joka sisältää kaikki tätä kamaa. Se sisältäisi aika, Profile, LikeCounter, ehkä kommentti ja ehkä itse kuvaa. Ja niin verkkosovellukset ovat juuri rakennettu ottamalla komponentit ja laittamalla ne yhteen. Instagram syöte ei ole mitään muuta kuin nippu virkoja yksi toisensa jälkeen, jokainen viesti sisältää kuten aika, Profiili, LikeCounter, ja niin edelleen. Se on tavallaan kuin talon rakentaminen. Et rakentaa talo ylhäältä alas. Otat components-- sinua ottaa kuten kylpyhuone. Otat bedroom-- olet kiinni niitä yhdessä, ja sinulla on uusi komponentti. Sinulla on uusi osa talon. 

Joten React on kaikki rakennettu tämä ajatus komponenttien ovat vuorovaikutteisia, jotka ovat declarative. Kuten sanoit mitä profiili on, ja se tekee sen. Ne ovat koottavat. Voit ottaa aikaa ja profiilin, laita ne yhdessä tekevät jotain parempaa. Ja ne ovat uudelleenkäytettäviä, joten jos on lähdekoodi virkaan, voit upottaa että missä tahansa. 

Voit upottaa Instagram asia omalla sivustolla. Voit upottaa Facebook, esimerkiksi, niin kauan kuin se käyttää React samoin. Joten osat ovat todella, todella, todella voimakas rakennuspalikoita web jota voidaan käyttää missä tahansa ja laittaa yhdessä tehdä uusia rakennuspalikoita. Se on hyvin, hyvin korkean tason yleiskatsaus. Joten, jälleen, jos sinulla on kysyttävää milloin tahansa filosofiasta reaktorin, koodaus, estää minua, ja haluaisin tietää. 

OK, joten reagoivat on siistiä, koska se on erilainen tapa nähdä miten rakentaa web-sovelluksia. Olet varmaan kuullut MVC, malli ohjaat sisään CS50 tai mitä tahansa muut hyvää luokat käytät. Ja useimmat kehykset ovat rakennettu ajatus MVC. React ei ole. Reagoivat rakentuu ajatus yksisuuntaisia ​​tietovirta kuten nähdään tämän kaavion tai graafisen täällä. 

Pohjimmiltaan, sinulla tietolähde. Ja tietolähteen päättää miten antaa ulos tiettyjä osia. Ja komponentit silloin, kun ne muuttuvat, he kertovat tietolähde muuttaa. 

Käyttää Instagram Esimerkiksi, saatat olla Luettelo post esineitä, kuten tietokantaan tai jotain. Että tiedot. Ja sitten meidän post komponentit ottaa että tiedot, ja käyttää näitä tietoja tehdä asia ruudulla. Sitähän nuoli Datasta komponentti on, ja sitten, että samoja tietoja käytetään tehdä joukko komponentteja. 

Facebook Messenger, sillä Esimerkiksi, joka on React, saatat olla lista viestit tietolähteeseen. Ja jotka tekisivät ei vain viestiluettelo mutta myös lista ystäviä sinulla on. Sinulla on lukematon määrä. Ehkä myös tehdä Facebook asia se alareunassa Facebook.com. Samat tiedot on yhdestä lähteestä totuuden ja joka aiheuttaa paljon komponenttien suoritettu. Ja kun yksi niistä komponentteja muutetaan, se menee takaisin ja muuttaa tietolähde. 

Voit lähettää viestin, eikö? Joka muuttaa tietolähde. Voit lukea viestejä, niin asetat lukematta 0. Joka muuttaa tietolähde. Ja huomaa, että kaikki nämä yhden nuoli menee takaisin samoihin tietoihin lähde, niin tiedät, annetaan tietyt tiedot joukko, tiedät mitä sivu on menossa näyttämään. Se on deterministinen. Tiedäthän, antanut tiettyjä tietoja, mitä sivun tulee näyttämään. Voit ennustaa, miten se tulee käyttäytyä ja miten asiat sujuvat töihin, kun he koonnut. 

Ja jos minulla olisi miljoona komponentit täällä, se käyttäytyisi samalla, eikö? Sinun ei olisi outo yhteyksiä. Yksi tietoihin, joiden miljoona komponentteja. Miljoonaa osat voivat palata muokkaamaan tietoja. Ja niin tämä on erittäin mukavaa. Me rakennamme koottavat, helposti skaalautuva verkkosovelluksia. 

Sinulla on yksi tietolähde, totuuden lähteenä. Joka kertoo komponentit miten antaa ulos sivun, ja komponentit kahva vuorovaikutus. Ja jos he haluavat muuttaa asiat, vain mennä takaisin ja kertoa tietolähteen muuttaa. Käydä järkeen? Joten React on kyse ymmärryksen miten rakentaa komponentti ja miten voit tehdä komponentti vuorovaikutuksessa ulkomaailmaan. 

Making komponentti vuorovaikutuksessa ulkomaailmaan käyttää toista tekniikkaa kutsutaan Flux, joka on kehys, joka on lisätään päälle reagoida. Emme aio puhua siitä. Aiomme puhua enemmän, kun otetaan huomioon tiedot, miten voit tehdä komponentti? 

Ja niin React on todella siistiä, koska et voi käyttää sitä minkä tahansa loppupäätä haluat. Jos sinulla on kuin Python loppupäätä, jos Python voi sylkäistä joitakin tietoja, Reagoida voi tehdä sitä. Jos et ole JS lähdöt Tietojen, React tekee sen. Ruby kiskot kanssa tiedot, React tekee sen. 

Joten React on periaatteessa web view-- etuosa komponentit tahansa tietolähteen lainkaan. Ja niin menee tietolähteen reagoivat komponentit on melko helppoa. Menossa toiseen suuntaan on hieman vaikeampaa. Joka käyttää Flux kuten aiemmin mainitsin. Emme päästä tuohon. Me keskittyä enemmän data-to-komponentin puolella. Näin voit tehdä viileä, hauska verkkosovelluksia. Se ei vaikuta ulkomaailmaan nyt, mutta se on toinen juttu. 

OK, joten jos olit täällä minun viimeinen seminaari tiedät, että kaikki koodi Nykypäivän talk tulee olemaan tässä URL täällä, anteeksi, tämä URL-osoite tähän. Ja pohjimmiltaan aiomme mennä läpi neljä vaihetta, ehkä viisi, luultavasti ei viisi. Me liikkua neljä vaihetta rakentaa näyte React app. Ja niin kaikki lähdekoodi joka askeleella tulee olemaan täällä, joten jos olet seuraava pitkin kotona, vapaasti tutkia tätä koodia. Jos seuraat pitkin täällä, me näytetään, sen näytölle, joten älä huoli siitä. Mutta jos olet kotona, tuntuu vapaasti vierailla tällä sivustolla. Ja Joo, sinun pitäisi pystyä saamaan kaikki koodi sinun koskaan tarvitse täällä. Joten se on hyvä lunttilappua sekä tulevaa seikkailuja reagoida. Viileä, joten jos jokainen, joka on täällä, ja vaikka olet kotona, vedä ylös tällä sivustolla, is.gd/cs50react, ei pääoman, ei alaviiva, ei mitään. 

Näet sivun, joka näyttää vähän kuin tämä. Tämä on asia, jota kutsutaan CodePen. CodePen on yhteisöllinen koodaus ympäristö jolla voin kirjoittaa koodia täällä, ja se tulee automaattisesti lähetetään sinulle. Ja tällä tavalla, en voi kirjoittaa koodia. Voin ajaa koodia tässä. 

Sillä example-- ja jos se reloads-- nähdä, Olen käynnissä JavaScript koodia sivulla täällä, ja se tulee automaattisesti tehdä web-sivun Tämän JavaScript-koodia. Ja niin tämä on tapa meille kokeilla koodi todella nopeasti ilman käyttää meidän tunnus tai käyttää paikallisen koneen tai mitä tahansa. Se on hyvin nopea tapa, jolla voit mockup ja kokeilla erilaisia ​​koodin. 

Joten aion olla ottaen Esimerkiksi koodi, laittoi pallon täällä. Aiomme työskennellä läpi. Ja jos olet kotona, te voi vetää tämän jopa niin hyvin. Ja olen jo asentanut Reagoida täällä, joten voit vain kirjoittaa oman koodin täällä, ja kokeile sitä kuin oma leikkipaikka. 

Joo, jos kaikkien avata linkki tänne. Antakaa minulle peukalot ylös kun olet sen auki. Viileä, viileä viileä. Täällä ei ole mitään nyt, mutta me korjaamme että hyvin pian. 

OK, joten React on JavaScript kirjasto, ja siten, vaatii tietoa JavaScriptin, joka on web ohjelmointikieli. Ja sitä käytetään muun muassa nyt liian mutta pääasiassa web kehittää kieli, joten jos et tunne että, lukea sivuston nimeltä JSforCats.com. Se on hienoa. Voit oppia JavaScriptin puolessa tunnissa. Se on uskomatonta. 

Joten antaa sille lukea. Meillä on myös paljon HTML täällä, koska olemme verkkosivujen suunnittelusta tietenkin. Joten jos et tunne HTML, tutustu HTMLdog.com. Mielestäni oppiminen React on miljoonaa kertaa helpompaa, jos jo tietää rakennuspalikoita. Jos sinulla on osia, se on helppo tehdä isompi osa. Se React kielen sinulle. 

Joten mene eteenpäin ja antaa nämä asiat lukea. Tauko video. Anna sille lukea, jos olet kotona, jos et ole perehtynyt HTML tai JavaScript OK, joten mitä aiomme do on aiomme tehdä hyvin yksinkertainen Kysymyskortin App käyttäen reagoida. Aiomme olla Kysymyskortin. Voit kääntää kortin edestakaisin. Ja me myös lista kaikki kortit, jotka meillä on, ja jos me et tunne kunnianhimoinen, saatamme olla pystyvät halutessaan vaihtamaan autojen klikkaamalla niitä. 

Mutta tämä on, on paljain luut, hyvin yksinkertainen React sovellus. Ja niin tämä on oikeastaan ei triviaali toteuttaa, mutta aiomme osoittaa, että jos teet Tämän, se on hyvin, hyvin helppo laajentaa sitä jos muut ihmiset auttavat sinua sen kanssa. Joten aiomme käydä läpi neljä vaihetta aloittaa tyhjästä rakentaa tämän. 

OK, joten neljä vaihetta, käymme alkajaisiksi ensimmäinen askel. Ensimmäinen askel tulee olemaan rakentaa ensimmäinen komponentti. Kuten aiemmin sanoin, osa React on vain HTML-elementti steroideja. Se määrittää HTML ja jotkut käyttäytyminen, ja se määritellään, kuinka ihmiset voi vuorovaikutuksessa sen kanssa, miten se olisi sisäinen tila. Kuten painike tietää, kuten kuinka monta kertaa se on ollut napsautti esimerkiksi, ja se osaa asettaa itsensä ulos. 

Joten mene eteenpäin ja rakentaa Ensimmäinen komponentti JavaScriptin avulla. Joten jos syntaksi näyttää oudolta, se johtuu se sellainen on. Joten, jälleen, me menemme tehdä muuttuja nimeltä app käyttämällä avainsanaa anna, mikä tekee muuttuja, anna App yhtä suuri React.createClass. 

Reagoida on kirjasto ja on luoda luokan toiminto. Ja tämä toiminto on vähän koodi, joka voit luoda uuden tyyppi React komponenttia. Ja niin React.createClass tekee komponentti, ja tämä komponentti pystyä tekemään juttuja. Tärkeintä se voi tehdä, on tehdä jotain, tehdä funktiona. 

Jälleen, jos tämä indeksi ei ole ilmeinen te, minä suosittelen sinua mennä JS kissoille ja tarkistaa sitä. Onko se zoomataan tarpeeksi hyvin? Viileä. 

Joten jokainen komponentti tarpeisiin on tehdä funktio. Render toiminto sanoo, mitä voin tulostaa ruudulla? Mutta osa on hyödytön, jos se ei Tiedä mitä tulostaa ruudulla, joten sinun täytyy olla tehdä funktio. 

Joten tehdä asia, te tarvitsee vain palata joitakin HTML. Ja mitä siistiä se on siellä on asia nimeltä JSX, joka on laajennus JavaScript, jota käytetään reagoimaan. Se nyt kirjoitat HTML sisällä on JavaScript, joka kuulostaa outo kun ensin ajatella sitä, mutta se tekee paljon järkeä jälkeenpäin. Joten voimme tehdä tämän. Jos olet perehtynyt HTML, tiedän meillä div yleiskäyttöisellä säiliö kamaa. Voimme palata div, ja sisälle Tämän div, voimme laittaa juttuja. 

Joten sanoa haluamme tehdä vain straight-up Kysymyskortti nyt. Kysymyskortti, sanoisin, on kysymys ja vastaus. Joten sisälle div, katsotaanpa tulostaa kohta joka sanoo question-- Mikä on lopullinen vastaus elämään, maailmankaikkeus? Ja niin vastaus on tulee tietenkin, 42. 

Tämä ei tullut lainkaan hyvin. Joo, joten periaatteessa voit todella kirjoittaa HTML sisällä JavaScript. Ja tämä tulee olemaan tulostaa osaksi näytön. Joten kokeilla sitä. 

Joten meillä on komponentti. Meidän on kerrottava Reagoi laittaa komponentti ruudulla niin React.render, niin huomaa, että me kohdella app kuten minkään muun aineen. Me kirjoittaa, koska se oli HTML-elementti. Kuten sijasta sanomalla kuten img kuvien tai p kohdassa, kirjoitat App, joten sovellus on kohdellaan kuin HTML-elementti. Kuten aiemmin sanoin, se on elementti steroideja. 

Joten voit tehdä App, ja sinä antoivat paikka laittaa se. Ja näin voit kerro se, mihin sitä. Olen luonut yksinkertaisen div sivu maksoi ID sivun, ja siitähän elementti tulee mennä. 

Ja emme aio juosta HTML. Pohjimmiltaan tämä on menossa laittaa sisälle Tämän sivun elementin että meillä on ruudulla. Joten se toimii tämän koodin, ja se tekee tämän asia ruudulla, joten tässä ollaan. Olemme tehneet ensimmäinen React komponentti. 

Aivan kuten kertaus, me varovasti tehty uudentyyppinen komponentti, eikö? Sitähän React.createClass. Ja että komponentti, me kertoi sen mitä sen pitäisi tehdä. Aina tämä komponentti on tulostetaan näytölle, se tulostaa div kanssa kaksi kohtaa sen sisälle. 

Ja mitä teimme, teimme uuden sovelluksen käyttämällä kulmaraudan App merkintää. Kerroimme se laittaa sen sisällä sivuelementin. Ja niin mitä tein, se loi Uusi sovellus kyseisestä mallista. Ja sitten sanoin sen tekemiseksi. Niin se sanoi, OK, sovellus, mitä minun pitäisi tulostaa? App sanoo, mennä tulostaa div jossa kaksi kohtaa sen sisälle. Ja voila, siellä on meidän div kanssa kaksi kohtaa sen sisälle. Järkeä tähän mennessä? 

Joten, jälleen, koko haaste React on vain osata valmistaa komponentteja. Miten tehdä komponentit toimivat yhdessä. Nyt kun olemme tehneet ensimmäinen komponentti, mennään takaisin ja valmistaa komponentteja muokattavissa. Joten tiedät miten HTML sinua voi antaa painikkeet luokat? Voit antaa ankkurit href. Voit antaa panoksia tyyppi, eikö? Voit antaa enemmän mukautetun ominaisuudet kaikki elementit jotta se olisi mielenkiintoinen. Ja me oikeastaan ​​voi tehdä täsmälleen sama asia. 

Joten sanoa haluamme app mennä johtuen jokin kortti. Juuri nyt me vain sulatettu kovakoodatun kortti. Tiedämme, että vain yksi kortti se voi tehdä, joten olemme menossa yrittää muuttaa tätä nyt niin että voimme vain antaa sille kortti. Se tulee tulostaa kortti. 

Sinun pitäisi yrittää ja tehdä komponentit hyvin yleiskäyttöinen. Joten tällä tavalla voisin sähköpostiin tämä ystäväni ja olla, mitä Kysymyskortti sinulla on, vain syöttää se täällä, ja se tekee sen itse. Voit laittaa muut asioita omassa App. 

Mutta ensin tauko tämä ylös kahteen komponenttiin, mutta haluamme erottaa kortti tulostus osittain todellinen App osa. Joten mitä voimme tehdä on meidän vaihtaa tämän App ja CardView, vain uusi nimi app, ja voimme tehdä uusia osatekijä nimeltä App, ei pidä sekoittaa vanha App. Meillä createClass, ja kuten HTML, voit pesä React komponentit sisällä toisistaan. 

Joten tässä tehdä toiminnon, toiminto paluu CardView, ja tämä on täsmälleen sama asia. Katso miksi se on sama asia? Sen sijaan, että tekee vain sovellus, joka on div ja pariksi sen sisällä, app tekee CardView, ja CardView tekee div ja kohta. Joten tämä on meidän ensimmäinen esimerkki pesintä Sisällä toisistaan. Onko siinä järkeä? Niin, jälleen, meillä on CardView elementti. Meillä on sovellus elementtejä että se on isompi kuin. 

OK, joten haluamme CardView-- jos antaa hyvän CardView tietty kortti, se tulee tulostaa sinulle, eikö? Joten ensimmäinen, meidän täytyy tehdä kortti, joten tehkäämme kortti esine. Joten anna minun kortti equal-- jos olet kaikki tuttuja, tämä on vain merkintätapa päätöksentekoon esine JavaScript. Se on ikään kuin struct C, joten teimme kortti, joten nyt voimme välittää tämän kortin omaisuutta tai määrite HTML terminologia meidän App. Joten voimme tehdä tämän, App kortti vastaa myCard. 

Te tiedätte, miten tuotantopanosten, et input type vastaa tekstiä tai -painiketta luokan equals BTN varten bootstrap ,? Sama ajatus, App kortti equals-- sinun täytyy laittaa olkaimet here-- App kortti vastaa myCard, joten tämä sanoo meillä on tämä kortti esine. Aion välittää sitä kohde sovelluksen komponentti. Ja tämä sovellus komponentti voi käyttää sitä ja tehdä mielenkiintoisia juttuja sen kanssa. 

Joten meidän App tulee olemaan annettu kortti, joten nyt, nyt on App vain antaa kortin CardView itse koska kuten sovellus ei ole menossa tiedä mitä tehdä sen kanssa, joten me vain antaa sen CardView. Niin me sitä tule Samalla tavalla, kortti vastaa, ja niin jokainen komponentti voi käyttää asioita, jotka on annettu sille. He voivat käyttää ominaisuuksia jotka on annettu sille käyttämällä tätä syntaksia, this.props.card. 

Joten mitä tapahtuu täällä on sinulla myCard objekti. Ohitat sen app käyttämällä App kortti vastaa myCard. Tämä kortti esine annetaan sovelluksen. App voi käyttää sitä kuten this.props.card. Se on tavallaan kuin kuva tietää, mitä se on lähde on. 

Tämä sovellus tietää, mitä se on kortti on, ja se voi tehdä juttuja sen kanssa. Se voi tehdä laskelmat. Se voi tehdä päätöksiä, jotka perustuvat pois siitä. 

Nyt olin menossa ohi this.props.card päälle CardView. Järkeä tähän mennessä? Se tulee järkevämpää nyt. 

OK, joten nyt me olemme CardView. Meidän CardView, koska kortti, olisi tulostaa sen kysymys ja vastaus. Juuri nyt me vain tulostaa joitakin kovakoodattuihin kysymyksiä ja vastauksia. Meidän täytyy selvittää out-- tarvitsemme kysyä kortin että he antoivat meille mikä on kysymys ja vastaus, ja tulosta sitten tämä ulos näytön. 

Joten voimme tehdä täällä. Vuonna tehdä begin-- ensin tehdä tasavertaisina. Joten mitä teemme tässä me tiedämme, että kortit antanut meille omaisuutta, oikea? Se annetaan meille tulona. Kuten se on melkein kuin argumentteja toiminto. Kortti on argumentti melkein tämän CardView. 

Me ote että, ja laita se muuttujaan kysymys. Varmista vastaus meni muuttujan vastaus. Kysyy että kortti vastata. Ja nyt, että meillä on nämä, sijasta tulostaa tekstin, aiomme tulostaa mitä he antoivat meille. 

Joten tämä stuff-- joten aiomme sammuttamaan Kysymys Vastaus. Katsotaanpa, jos tämä toimii. Viileä, joten katsotaanpa selata sen vielä kerran vain olla varma. 

Joten minun kortti on kortti esine, ja me antavat että kortin sovelluksen. Ja sovellus vie kortti ja anna se CardView. Ja tämä CardView sanoo, jos anna minulle mitään Kysymyskortin esine, Minä tulostaa sen kysymyksen ja sen vastaus, eikö? 

Joten mitä voisin tehdä on voin Lähetä tämä koodi, ensimmäinen kuten 10 riviä minun koodi, ystäväni. Hän voisi upottaa sen oman hakemuksen. Ja niin kauan kuin hän teki saman, kuten CardView kortti vastaa tätä, niin kauan kuin hän loi CardView ja antoi sille oikeuden tiedot, hän voisi tehdä oman kortin. Ja niin tällä tavalla, se on todella viileä tapa, jolla voit rakentaa komponentteja, jotka käyttävät toisiaan, eikö? Tämä kortti, voisin julkaista tämä CardView internetissä, ja ihmiset voisivat käyttää sitä. Joten periaatteessa, se on kuin yksi vakiotoimintoja C-kirjasto. 

Se on toiminto, jossa joku on kirjoittanut sen. Annat tietty tulo. Se tulee tuottaa tietty tuotos. Et välitä miten se toimii sisäisesti. Niin kauan kuin annat sille oikea tulo, se tulee tekemään oikean lähdön. 

Ja komponentti voi olla ajatellut samalla tavalla. Tämä CardView on kuin kirjaston funktion. Jos annat sille kortti kuten omaisuutta, se tulee tulostaa sisällön että kortti. Kuten jos muutan kortti sen sijaan olla kuin mikä on 5 plus 37, se päivittää vastaavasti. Joten vain muuttamalla tulo, se saa tietyn tuotantomäärän. Joten voit ajatella komponentteja lähes kuten toimii tällä tavalla, joka voit koota. Saat tulo, kuten tämä CardView kuten syöttö, saat tuotos. Tässä tapauksessa lähtö on HTML. Järkeä tähän mennessä? Viileä, joten taas, ominaisuudet ovat miten voit välittää tiedot ja sieltä pois osia. 

OK, joten tehkäämme tästä asia vuorovaikutteinen. Juuri nyt se on eräänlainen tylsää. Mikä on [äänetön]? Voit tulostaa joitakin pois, mutta siinä kaikki se voi tehdä. 

Joten mennään takaisin vanha kysymys juuri nyt. OK, joten nyt näiden komponenttien ovat tylsiä koska kaikki ne, he saavat tulo. He tekevät tuotos, eikö? Sellainen tylsää. Haluamme olla meidän komponentteja voi olla jonkinlainen sisäinen tila, kuten muistaa jotain. 

Saat Kysymyskortti varten Esimerkiksi millaisia ​​valtion ehkä haluat muistaa Kysymyskortin? Mitä väliaikainen tila ehkä haluat muistaa varten Kysymyskortti kaupungissa Kysymyskortin App? Yleisö: Olipa on selattava? NEEL Mehta: Niin varmaan. Joten kannattaa pitää kirjaa olet ylöspäin tai ovat kohtaat alas kortin. Facebookissa, esimerkiksi, sinulla olisi haluat muistaa missä uutissyöte olet tai haluat kuka profiili teet juuri nyt. 

Messenger, kuten mitä tekstin kirjoita syöttöruutuun, eikö? Jos päivitä sivu, se menee pois. Mutta et välitä. Se on vain väliaikainen. Joo? 

Yleisö: [äänetön] NEEL Mehta: Kuin salama kortti, kuten voit näkemään kysymys puolelta tai vastauksen puolella? 

Yleisö: OK. 

NEEL Mehta: Like kaksipuolinen Kysymyskortti, eikö? Joo, niin haluat on tämä ajatus nyt Minulla on ominaisuuksia, joka on kuin tulot, mutta valtio, joka on väliaikainen, öh, missä olet sivulla, eikö? Jälleen sanoin Facebookissa Messenger, minulla on kuten mikä henkilö katselet Facebook tai kuka profiilin, eikö? 

Tämä on vain väliaikaista. On tärkeää näyttää käyttäjälle mitä on tekeillä, mutta päivitä sivu. Se ei ole oikeastaan ​​väliä. Joten se on väliaikainen tila, joten me kaikki se valtio. 

Joten, jälleen, siellä on valtion ja tarpeistoa. Rekvisiitta on panoksesta teidän tietolähteen. Valtion on aivan kuin oletusarvot. Se on aivan kuin kamaa, että tekee asia vuorovaikutteinen. 

Joten meidän CardView-- katsotaanpa meidän CardView-- joten se oli mukavaa. Mitä aiomme tehdä täällä, me aiomme kosketa CardView ja vain CardView. Ja niin ystäväni, joka sai tämän, he huomaisi mitään eroa. He eivät tarvitse muuttaa tahansa niiden oman koodin, mutta he näkevät CardView sai souped. Se on mukava osa noin komponentteja. 

OK, joten meidän CardView, yritetään ja seurata, onko olemme vähitellen ylös tai alaspäin. Vuonna React teemme tämän ensin täsmennetään alkuperäiseen tilaan. Mistä kortti alkaa? 

Joten toiminto nimeltään getInitialState toimivat, ja palaamme objekti. Tämä tavoite sisältää joitakin valtion, ja tila on vain avainarvoparin. Kuten instruct, sinulla on avain ja arvo, olet kuin nimi on merkkijono. 

Tässä tapauksessa, sanokaamme edessä on totta. Tämä kertoo, että meillä on valtio. Yksi osa valtion on ominaisuus nimeltään edessä. [Äänetön], joten oletusarvoisesti, olemme edessä kortin, ja voimme muuttaa tätä kun me flip kortti. Käydä järkeen? 

OK, joten tehdä juuri nyt, olemme näytetään kysymys ja vastaus. Nyt, mitä meidän pitäisi tehdä on näyttää kysymys jos me olemme kortin etupuolella niin vastaus on kortin takapuolella. Siksi te kaikki tehdä kortti interaktiivinen. Joten yrittää tätä täällä. No, ensin vain tehdä muuttuja. Voimme kysyä nyt this.state.front. Me käyttö -tilasta samaa me pääsy rekvisiitta, niin this.state.front. 

Jos olemme edessä, niin teksti on this.props.card.question. Jos olemme edessä kortti, aiomme yrittää napata kysymykseen kortti. Muuten, jos olemme takana Kortin, mitä me teemme? 

Yleisö: Vastaus? 

NEEL Mehta: Jep, niin teksti vastaa this.props.card.answer. Mutta jos huomaat, käytämme valtion tehdä päätös koska nyt komponentti näyttää erilaiselta perustuu pois miten nämä vuorovaikutuksessa sen kanssa. Joten sen sijaan tulostamisen tämän, me vain tulostaa tekstin. Viileä, joten nyt, kuten näette, näemme vain kysymys. Ja jos muutan valtio tässä manuaalisesti Edessä on väärä saamme 42 takaisin. 

Joten, jälleen, tämä komponentti on oma valtio. Kuten painike tiedä, se on ollut painetaan tai ei, tämä asia tietää, mitä on etu- tai takana. Oletuksena se on päällä edessä. Ja sitten jos se on edessä, me tulostaa kysymys. Jos se on takana, käymme tulostaa vastaus. Niin, jälleen, tiedot annettu, on sama. Se vain näyttää erilaiselta perusteella, miten ohjelma se. Niinpä esimerkiksi, Facebook Messenger, vaikka saat saman tietolähteen, se saattaa näyttää erilaiselta koska valtio on erilainen. Etsit eri henkilö viesti. 

OK, joten tämä on kaikki hyvin ja hyvä, mutta nyt mitä oikeastaan tekee meistä voi muuttaa, onko meidän kortti on edessä tai takana. Voimme tehdä tämän lisäämällä läppä painiketta, painiketta kortti, läppä korttia, jos se on [kuultavissa]. Joten lisätä painikkeen täällä, tämä painiketta, ja tämä painike sanoo läppä. 

Ja niin juuri nyt, se ei tee mitään. Se vain näyttää hienolta. Mitä voimme tehdä, on voimme lisätä klikkauksella käsittelijä, onClick vastaa this.flip, ja me määritellä flip myöhemmin. Mutta pohjimmiltaan, onClick on toiminto, joka saa kutsutaan, kun käyttäjä napsauttaa sitä. 

Joten painike tietää kun se on ollut napsautetaan. Meni se on ollut napsautetaan, se kääntää kortti. Se on ikään kuin oman pizzalähetti. Olet kuin, okei, kun joku kutsuu minua, minä toimittaa pizzaa, eikö? 

Voit rekisteröidä kuuntelija. Voit kuunnella tapahtuman. Saat kutsutaan, ja kun tapahtuma tapahtuu, teet jotain. Saat pizzaa. Tässä tapauksessa, kun olet napsautetaan, voit kääntää kortin. 

Ja niin meidän on määriteltävä toiminto, joka kääntää kortti, niin me kirjoittaa, että oikeus täällä, käännä toiminto. Ja niin mitä luulet flip tekee? Tämäkään saa kutsutaan, kun me sitten läppä painiketta. Mitä toiminto läppä tehdä? 

Yleisö: Muuta this.state.front todesta epätodeksi, false true. 

NEEL Mehta: Jep, niin toteutettava kaikki this.front is-- edessä valtio on. Ota edessä valtio, jos se on totta, tehdä siitä vääriä. Jos se on väärä, tee se totta, eikö? Joten kokeilla. 

Et voi muuttaa valtion vain tekemällä this.state. Et voi tehdä tätä. Et voi tehdä sitä. Sinun täytyy käyttää toimintoa nimeltään this.setState. 

Joten voit sanoa this.setState edessä paksusuolen tämä jos taas huutomerkki kohta tarkoittaa päinvastaista. Oletan, jos tämä. state.front on totta, se tulee osoittautua vääriä. Joten me asettaa valtio todesta epätodeksi. Jos se on väärä, käymme aseta se false totta. 

Juuri huomaa että asetamme ja saada hieman eri tavalla, ja niin yritetään tätä. Bada Bing, katso tätä. Flip painike nyt vaihtaa edestä taakse tilaan. 

Ja niin täällä on, jos näet hieman taika reagoida. Kuten emme koskaan kertonut sitä se uudelleen tehdä. Emme koskaan kertonut sitä piirtää mitään. Jos teet tämän ilman React, olisit ovat to-- kuten silloin läppä painiketta napsautetaan, sinun täytyy kertoa se manuaalisesti uudelleen tehdä, eikö? 

Reagoida on todella siistiä, että jos antaa sille tietty tila ja ominaisuudet, se tulee aina tehdä täsmälleen sama asia. Ja niin kun me koskaan muutamme valtion ja ominaisuudet, reagoida juuri uudelleen tekee koko juttu. Se tietää, että on olemassa yksi-yhteen vastaavuus välillä valtion ja parametrien ja HTML. Joten jos jompikumpi näistä muutokset joukolla valtion, se muuttaa palkka on uudelleen sulatettu. Ja niin pohjimmiltaan React on kuin odottaa voit muuttaa. 

Aina se muuttuu jotain, se tulee uudelleen tehdä koko sivun. Ja jos se kuulostaa tehoton, se on koska se olisi, mutta reagoivat käyttää asia nimeltään Shadow DOM. Sen sijaan piirustus sivun suoraan, se pitää virtuaalinen HTML puu muistissa. 

Tiedäthän, HTML on kuin puu, kuten hierarkkinen tietorakenne. Se pitää väärennös puu muistissa, ja kun päivittää sivu, se tulee tehdä toinen väärennös puu, ja se tulee laskea mitä muuta se tarvitsee tehdä sivu, jotta kaksi puuta yhtä suuri. Joten periaatteessa, se käytännössä uudelleen tekee paljon. Ja sitten se vain kaltaisia ​​muutoksia sivu pikku hienosäädön tarpeen, joten se on hyvin, hyvin, hyvin tehokas. 

Joten periaatteessa reagoi mitenkään kun muutat jotain, se tulee uudelleen tehdä sivun käytännössä. Se tulee selvittää, mitä minun tarvitsee muuttaa, jotta todellinen sivu heijastavat virtuaalinen sivu, ja se tulee tehdä. Se virtuaalinen DOM. Se on yksi suurimmista piirteitä reagoida. 

Onko siinä järkeä? Kysymyksiä? Joo? 

Yleisö: Miten verrata vielä MVC että puhuimme ennen kuin resurssit. 

NEEL Mehta: Joo, kysymys on miten se verrata MVC? Voit kysyi resursseja. No, puhutaanpa miten se toimii. 

Vuonna MVC, sinun Mallin päivittämiseksi. Tässä tapauksessa meillä olisi korttimalli. Näkymä olisi flip-painike, ja valvonta olisi läppä toiminto. Niin näkymä kertoisi ohjain kääntää läppä. Flip kertoisi malli muuttaa, eikö? 

Ja niin kun teet MVC, sinun kuuntele malli muuttaa, ja te uudelleen tehdä näkymä vastaavasti. Tai et vain tarvitse kuin on ohjain. Odota malli muuttaa, ja sitten valita osan kuin asia muuttua. Täällä meillä on yksi asia, mutta iso app, sinun tarvitse kuin muistaa, mitä muutos jokaisessa paikassa, joten se on vähän ärsyttävää. Ja niin React on mukavaa koska sillä on varjo Dom. Se on varaa vain kirjoittaa koko juttu. Sinun ei tarvitse valikoivasti kuten arvata mitä päivittää. 

Facebookissa, jos haluat saat uuden viestin, vuonna MVC, sinun täytyy muistaa, OK, muuttaa asiat yläreunassa sivu, viesti -kuvaketta. Myös pop uuden ikkunan alareunassa. Myös uusi asia samassa ikkunassa. Myös toistaa äänen. 

Se on paljon tavaraa menossa ulos samaan aikaan. Joten jos et on Shadow Dom, olisit täytyy tehdä, että käsin koska et voi päästä eroon koko sivun. Voit ei ole varaa, niin sinulla on muuttaa kunkin asia manuaalisesti, joka on todella ärsyttävää MVC. 

Joten ollakseen säästäväinen, he valikoivasti päivittää sivu, joka on tehokas, mutta myös ärsyttävää. Vuonna React, koska Shadow Dom, saat molemmat asioita ilmaiseksi. Se on tehokas, koska Shadow Dom. Pullonkaula päivittää sivu. Se ei tee puu manipulointia. Saat tehokkuutta. Saat myös helppokäyttöisyys, koska jos vain kirjoittaa koko sivun, mutta vain tietää, okei, asiat tulevat olemaan sivulla jonnekin. Se voi olla eri paikassa, mutta se tulee olemaan sivulla, eikö? Joten sinun tarvitsee vain uudelleen sulatettu koko asia käytännössä, ja saatat tehdä pari muutoksia sivuun itse. 

Joten, jälleen, vuonna MVC sinua olisi valittava välillä helppokäyttöisyys ja tehokkuus, ja reagoida, saat molemmat. Joten on parempi. Käydä järkeen? Kiinteä. 

OK, joten katsotaanpa Puhutaan hieman noin vaihe 4, miten voimme upottaa komponentteja. Joten meillä on tämä oikeus nyt. Meillä on viileä pientä painiketta. Voimme kääntää sen takaisin ja esiin, ja siinä kaikki se. Sanotaan haluamme on toinen komponentti. Sanotaan meidän Kysymyskortin App pitäisi sisältää luettelon kaikki kortit että sinulla on, niin se tarkoittaa, että pitäisi olla toinen komponentti. No, ehkä kutsua sitä luettelonäkymässä. Tehdään lista mielestä rinnalla CardView, ja tämä lista katsella ja CardView toivomaa yhdessä. Ja voit yhdistellä niitä jotta meidän sovellus sinulle. 

Joten ensimmäinen, tehkäämme pari korttinsa oikein. Sanotaan, mitä kortteja? Ja juuri niin minulla ei tarvitse pitkästyttää teitä kirjoittamalla sen, Olen juuri menossa kopioida täältä. Ja niin aion ei antaa se vain yksi kortti. Aion antaa sille erilaisia ​​kortteja. Joten ensimmäinen apps menossa tauko nyt. Selvä, joten aiomme tehdä tämä pystyy käsittelemään useita kortteja. Joten ensimmäinen, me aiomme antaa sille, ei vain yksi kortti, vaan joukko kortteja, kuten luettelo kortteja. Ja tässä tapauksessa, meillä on kolme. 

Selvä, joten joten sovellus on menossa listan kortteja, ja se tulee päättää, mitkä yksi osoittaa, että CardView. CardView voi vain tehdä yhden kortin, mutta sovellus saa luettelon kaikki kortit, eikö? 

Joten kun selvittää yksi kortti antaa CardView, miten arvata saatat pystyä tehdä päätös, jolla kortti näyttää? Antaa sinulle vihjeen, se on tilapäisesti Sinulta katselu tietty kortti. Jos päivitä sivu, luultavasti vain mennä takaisin ensimmäiseen kortti. Se on OK, koska se on väliaikaista. Mikä tekniikka voisi käytämme? 

Yleisö: Voisit tehdä muuttuja joten aivan kuten sinulla oli edessä. Onko tämä totta, voisit on nykyinen kortti on 1? 

NEEL Mehta: Joo, niin me haluavat valtion, eikö? Voit käyttää valtion komponentti selvittää joka kortti haluamme saada. Kuin meillä on lista kaikki kortit, käymme käyttää valtion selvittää yksi ensimmäinen kortti, toinen kortti, kolmas kortti, ja niin edelleen. 

Joten sovellus joten sovellus saa on getInitialState toiminto, getInitialState toiminto paluu. Ja me vain sanoa activeIndex 0. Joten nyt meidän app on oma valtio. 

Ja niin nyt tehdä, selvittää kortti, mennään vain array ja napata asia tuohon indeksi. Valitse kortti yhtä suuri this.props.cards this.state.activeIndex. Joten kuten näette täällä, rekvisiitta ja valtio todella toimivat yhdessä. Joten nyt meillä on activeCard, me kutsumme sitä activeCard, ja katsotaan, jos tämä toimii. [KUULUMATON] 

Voi, että oli teksti virhe. Ah. 

Viileä, juu, joten nyt olimme takaisin missä olimme ennen, eikö? Sama vanha ohjelma paitsi Nyt voimme tukea Luettelo kortteja, ei vain yksi kortti. Ja nyt, taas, jos muutamme activeIndex, voimme mennä 0-1, ja nyt, että toinen kortti, ja sitten menimme 0. Joten tässä on uusi souped-up versio meidän. 

OK, joten Nyt on lista, että näyttää kaikki kortit ohjelmaa, joten teemme uusi osatekijä nimeltä ListView. Anna ListView vastaa react.createClass. Joten haluamme tehdä järjestämättömiä lista luettelokohteen jokaisen kortin. Ja niin meillä on nippu kortteja. Haluamme yksi luettelokohde jokaista kortti, eikö? Voisimme tehdä varten silmukka tai jotain tehdä uusi lista kohta. Mutta miten teet sen Reagoida käytä asia sanottu kartan. Kartta on työkalu tai toiminnon käytät että jokaisen kohteen, kulkee jonkin toiminnon, ottaa paluu arvo, ja antaa sinulle että takaisin. 

Jotta Meillä on esimerkiksi array 1, 2, 3.map function-- ja tämä on vain lyhenne function-- x nuoli X kertaa X. Tämä kertoo, jokaiselle numero 1, 2, 3, ota se. Neliö se, ja anna se takaisin. Mitä mieltä olet 1, 2, 3.map X menee X kertaa X antaa sinulle takaisin antanut että tämä toiminto on ajaa jokainen osa, joka array. 

Yleisö: 1, 4 9? 

NEEL Mehta: Jep, 1, 4, 9 koska teet 1 kertaa 1. Joka antaa sinulle yhden. Se on ensimmäinen elementti. 

2 kertaa 2 on 4. Se toinen elementti. 3 kertaa 3 on 9. Se kolmas elementti. Käydä järkeen? Joten kartta on tekniikan avulla käyttää toiminnallisia ohjelmoijat, uusi tyyli ohjelmointi tehdä jotain jokaiseen elementti luetteloon. Ja niin tämä kuulostaa tutulta. Meillä on lista kortteja. Haluamme saada luettelokohteen jokaiselle yksi, niin me vain käyttää karttaa täällä. Me sanoa, anna luettelo tasavertaisten this.props, kortteja, kartta. 

Ja niin annetaan kortti, olemme menossa tuottaa luettelokohteen kanssa, että kortin sisältö puoli. Sanotaan vain haluamme antaa ulos kortit kysymys niin card.question. Joten tämä lista sisältää joukko LI: n tai List kohteet missä on yksi lista Tuote jokaiselle kortti, ja joka sisältää kortteja kysymys. Käydä järkeen? 

Viileä, joten nyt katsotaanpa itse tulostaa että ulos. Joten palaamme ul. Inside että Järjestämätön lista, me vain kiinni koko lista että he antoivat meille. Viileä. 

Selvä, joten nyt tämä luettelonäkymä toimii vain löytää. Kysyttävää luettelonäkymästä? Sinulla on nippu kortteja. Teet luettelokohteen jokaisen kortin. Ja laitat ne sisällä järjestämättömiä lista, ja annat sen takaisin. Joten Nyt toimia niin me upottaa tämä sisällä app, jotta voimme tehdä tämän, luettelonäkymässä. Mitä väitettä me siirtää luettelonäkymään? Mitä ominaisuuksia annamme sen? Muista, jos annat se nippu kortteja, se tulee tehdä lista katsella niitä kortteja. Joten mitä jätämme täällä argumentti? Yleisö: luettelo kortteja? NEEL Mehta: Joo, niin kortit vastaa this.props.cards, eikö? Ja niin ainoa ongelma on, että voit vain kääntyi yksi huipputason osa renderöinti, joten sinun täytyy kääri se div. Se on outoa. Joten onko se. Se toimii? 

Jep, siellä voit mennä. Joten nyt meillä on lista kortteja alareunassa, ja sitten meillä on CardView itse päälle, ja että flip välillä kaksi puolta kortin. Nyt ei järkeä miten tein sen? Joo, niin taas, meillä on kaksi komponenttia. Ensimmäinen komponentti tulostaa välein kortti luettelosta. Se luettelonäkymässä. Ja toinen komponentti tulostaa vain että kortti. Jos annat sille tietty kortti, se tulee tulostaa tietoa että kortti ja voit kääntää edestakaisin. 

Joten jos haluamme, voimme yrittää ja puhua noin lisäämällä joitakin uusia ominaisuuksia tämän. Muuten voimme puhua hieman noin nopeuden reaktorin, tai voimme vastata kysymyksiä saatat olla koska nämä ovat kaikki keskeiset osat ja reagoivat, että haluan puhua. Voimme mennä eteenpäin. Voimme vastata kysymyksiin. Mitä ikinä haluatkaan. 

Yleisö: Sopiiko JSX normaalissa JavaScript? Vai onko se jotain, että mukana [äänetön]? 

NEEL Mehta: kysymys on CAN käytät JSX normaali JavaScript? Vastaus on kyllä. JSX on vain tapa se vie JavaScript että on HTML sen sisällä, ja se kokoaa osaksi JavaScriptiä ei ole HTML sen sisälle. Niin huomaa that-- niin huomaa täällä. Tämä näyttää olet kuin div ja sinulla on tavaraa sisällä siitä. 

Että se kerää JavaScriptiä kuten tuottaa sama asia. Luulen, mitä minä sanon, että JSX on vain syntaktinen, kuin se on esiprosessori JavaScript paljon kuten PHP on esikääntäjä HTML. JSC on esiprosessori JavaScript, jonka avulla laitat HTML sisällä JavaScript. Joten jos sinulla on oikeus muuntaja joka on asia, jota kutsutaan [kuulumaton], joka tulee muuttamaan. Oikeus esikäsittelijään, se tulee antaa sinun tehdä sitä. 

Yleisö: [äänetön] NEEL Mehta: Yleensä et tarvitse laittaa HTML sisälle JavaScript ellei teette reagoida. Mutta voit tehdä sen joka tapauksessa. Jep? 

Yleisö: mielestäni sinun oli kuvattu React funktionaalisena ohjelmointikielen. Olemme oppinut C CS50. On C myös funktionaalinen kieli? NEEL Mehta: Joten kysymys on noin toiminnallinen vs. toinen asia sanottu välttämätöntä tai menettelyyn ohjelmointi. On kahdenlaisia ​​ohjelmia suosittuja. Yksi kutsutaan menettelyyn, joka on kyse haluaisit tehdä komentoja, ja yksi on funktionaalinen, joka on kaikki noin ottaa tehtävät ja ottaa tulon ja lähdön näiden. Reagoida on toiminnallinen paradigma. C on hyvin menettelyyn paradigma. 

Ja kuten esimerkiksi C esimerkiksi, et tee tätä julistava tavalla tehdä ohjelman, eikö? Sinun on sanottava, tulosta tämä. Muuta tämä tietorakenne. Tulosta tämä. Kyse komennot. 

Vuonna React, siellä ei ole että monet komentoja. Kyse ottaa komponentit laitat yhteen. He ovat kuin toimintoja. Sinulla kuten toiminto nimeltään CardView, joka on funktio että on panos, tuotos, ja niin React on kaikki tästä filosofiasta meitä having-- sinulla on tietoja. Ohitat sen kautta algoritmi, ja se tulee lähtö HTML, että olet vain painettu sivu, ja niin sinun täytyy rakentaa sitä pala palalta. 

Joten tehdä metafora mitä Sanoin aiemmin, osaat Facebook jos saat viestin, ja voit valita, mitä osia päivittää, se menettelyyn. Se on välttämätöntä, eikö? OK, sain viestin. Vaihdetaan tili siellä. 

Katsotaanpa pop ikkuna täällä. Vaihdetaan tili siellä. Katsotaanpa piirtää täällä. Se menettelytapaa. 

Sitähän asioita, kuten Kulmikas, Boost, selkäranka, muissa puitteissa käyttää. React on toimiva. Se on hyvin eri tavalla ajatella asioita. Se ottaa tämän ajatuksen katsotaanpa toimintoja tai algoritmeja, jooko antaa sille tietoja. Se tulee sylkemään mitä se pitäisi olla, ja tietokone hoitaa punnitsemalla. Et käsitellä sitä itse. Joka tekee vähän järkeä? Joo? 

Yleisö: Toimivassa kieli, kaikki tapahtuu kerralla? 

NEEL Mehta: Ei, asiat tapahtuvat järjestyksessä. Kuten tässä siellä on vielä tilata, mutta se ei tapahtua järjestyksessä kuten Suosittelen, komento, komento. Se tapahtuu järjestyksessä toiminto antaa sinulle tuotos. Laita että toiseen toiminto. Laita että toiseen funktio, toisen toiminnon. 

Jos et CS51, luultavasti oppia toiminnallisia ohjelmia hieman ulos kuulu tämän. Mutta pohjimmiltaan, mitä tekee Reagoi viileä ei ole vain yksisuuntainen tietovirta ja virtuaalinen Dom, mutta myös tämä ajatus Functional Programming. Ja funktionaalinen ohjelmointi on erittäin helppoa säveltää ja tehdä cool stuff pois, ja se on erittäin helppo ajatella noin ja syy noin. Joten se on toinen hyvä arvotaan reagoida. Kysyttävää? Joo? 

Yleisö: Tuota, miksi te Käytä anna toisin kuin var? 

NEEL Mehta: Joten kysymys on Miksi käytät anna sijasta var? Tämä on asia, jota kutsutaan ES6 tai ECMAScript 6. Se on uusi versio JavaScript. On joukko teknisistä syistä, mutta let on parempi versio var. 

Se miten julistaa muuttujia. Voit käyttää antaa. Voit käyttää var. Anna on joukko teknisiä reasons-- voit katsoa niitä up later-- miksi se on parempi. Pohjimmiltaan, ES6 on muutamia kivoja uusi syntaksi, joitakin uusia ominaisuuksia päälle vanhan JavaScript. 

Meillä on siis kuin viisi minuuttia. Halusin vain puhua yksi asia todella nopeasti. Jos sinulla olisi kysyttävää, Puhutaanpa siitä jälkeen. Mutta vain niin tämä saa kiinni kamerassa, minä vain halua puhua vähän siitä, miten todella käyttää reagoivat apps. 

Jos menet täällä, Facebook.GitHub.IO/react, tämä on kotisivu reagoida ja se näytän sinulle, miten voit itse käyttää Reagoivat sivuillesi. Pohjimmiltaan se on vähän monimutkainen yrittää asentaa reagoida. Se ei ole niin helppoa kuin vain vetää ja pudota Javascriptin siellä. 

Sinulla on oltava oma muuntaja perustaa, joka, kuin ennen, käännä JSX osaksi normaali JavaScript. Sinun on asia, joka tulee koota sinun ES6 normaaliksi. JavaScript siellä on paljon liikkuvia osat sinun täytyy tehdä, joten ei asia nimeltään Yeoman, Yeoman.io. Ja tämä on komentorivi työkalu, joka tulee auttaa rakennustelineet ulos React hankkeet helposti. 

Joten voit lukea tästä myöhemmin, mutta on olemassa joitakin työkaluja että Yeoman tarjoaa. He avulla voit luoda React App kaiken rakennettu. Kuten se täytyy rakennettu vuonna, komponentteja rakennettu. Se täytyy sinun muuntaja rakennettu. Heillä on paljon hienoja juttuja rakennettu automaattisesti käyttämällä näitä asioita kutsutaan generaattorit. 

Joten lukea tästä, jos haluat. Mene vain Yeoman, Y-E-O-M--N, ja Löydät generaattorit kuten nämä. Ja generaattorit kuten Näiden, haluat vain yksi on pari komentorivikomentoja. Se tulee rakennustelineet ulos Koko React sovellus sinulle. Se tulee saada kaikki käsikirja putket, ja murisija työstä puolestasi, ja siksi juuri keskittyä juuri kirjallisesti reagoida. 

Joten periaatteessa rakentaa Reagoida sovellus on triviaali. Se langallinen kaikki yhdessä, mutta siellä ovat työkaluista, että saat tehdä sen sinulle. Joten jos haluat tehdä React app, kokeile niin. Jos haluat vain kokeilla, voit kokeilla tätä CodePen koska tämä CodePen on kaikki reagoivat johdot. Olen tehnyt kaiken työn puolestasi jo. 

Joten jos haluat tehdä kuin tuotanto vapauttamaan React app, kokeile yksi näistä generaattorit. Jos haluat vain pelata ympärillä, se on usein kannattaa vain kuten kokeile pelata ympäriinsä CodePen täällä. Kuulostaa hyvältä? Viileä. 

Niin, että kaikki minulla on. Jälleen kaikki koodi ja esimerkit ovat olemaan tällä sivustolla täällä. Joten, jälleen, emme puhu noin paljon syntaksi React, mutta löytää kaikki pikku syntaktisia tiedot, se kaikki tulee olemaan saatavilla tällä sivustolla täällä. 

Joten Suosittelen kuten ottaa ensimmäinen askel. Laita se omaan CodePen. Kokeile työskentelyä tehdäksemme sen toisessa vaiheessa. On Neljännessä vaiheessa, ja vain nähdä, missä saat siitä. 

Muuta kysyttävää, tarkista että sivu tai sähköpostitse minulle. Se on minun email. Mutta Mielelläni auttaa sinua kaikissa kysymyksiä sinulla voi olla noin reagoida. Niin juu, siinä kaikki mitä on. Kiitos kaikille erittäin paljon katsellen tai osallistumisesta. Ja otan kysyttävää saatat olla tämän jälkeen nyt. Joten kiitos kaikille katsomassa.