[Prehrávanie hudby] 

NEEL MEHTA: Tu to ide. 

No, všetci, vitajte na webe apps budúcnosti s Reagovať. To je CS50. Volám sa Neel. Som TA pre CS50 a druhákov na Harvard College a veľmi, veľmi vášnivý webový vývojár. Takže som veľmi vzrušujúce hovoriť s vami dnes, nech už ste tu, alebo doma sledovanie, o React, ktorá je, opäť ako som povedal, že budúcnosť webových aplikácií. 

Takže Reagovať je webový rámec. A ako som už hovoril Bol pre niektorých ľudí tu, rámec je len sada náradia, ktoré môžete použiť štruktúrovať a budovať svoje webové aplikácie. A webové aplikácie sú, opäť, webové stránky ktoré sú interaktívne, ako sú Facebook, Twitter.com, Instagram.com, čokoľvek. 

Tak Facebook je webová rámec ktorý bol vyvinutý spoločnosťou Facebook pár rokmi back-- reagovať je. To je pretože sa používa v Facebook na svojich mobilných aplikáciách a webová aplikácia, Instagram. Khan Academy je ďalší prominentné inovátor Reagovať. 

Je to naozaj bolo dostať extrémne populárne. Ak ste niekedy použiť veci ako rohové alebo Backbone, to je z rovnakej rodiny, ale má od ďaleko predstihnúť ich popularitu. Je to horúca novinka. Je to naozaj, naozaj obrovská. 

A tak Reagovať je dobrá nielen ako web rámec pre stavebné rozhranie. Je to dobré pre vytváranie webových rozhraní. K dispozícii je tiež vec Reagovať volal Native, ktoré umožňuje vytvárať rozhranie pre Android a iOS a možno aj ďalšie platformy v budúcnosti iba pomocou rovnaký kód JavaScriptu. Dalo by sa použiť presne rovnaký Kód JavaScript k tomu, webové stránky, na to, aby aplikácie Android a iOS aplikácie. 

Je to veľmi, veľmi vzrušujúce doba. Je to naozaj, naozaj cool príležitosť. Je to naozaj univerzálny web interface vývojový nástroj, takže je to veľmi, veľmi dôležitá vec, vedieť. A ako som hovoril ľuďom predtým, to, myslím, sa chystá zmeniť spôsob, akým sme vytvárať webové aplikácie navždy. Takže je to možno trochu nadsázka, ale ja myslím, že je celkom dobrá vec, vedieť. 

OK, takže to, čo je Reagovať? Reagovať je rámec, môžete použiť pre budovanie rozhranie. Rozhranie je, opäť, webové stránky, nie? Tak tu je Instagram.com, použitie Reagovať. 

Reagovať je postavený na idea komponentov. Súčasťou je HTML prvok na steroidoch, takže HTML element je ako tlačidlá. Je to bod. Je to záhlavie, že jo? A Instagram bude používať tieto, ale to budú tiež používať komponenty Reagovať. 

Reagujú komponenty sú nadupaným-up HTML elementy ktoré majú svoje vlastné správanie v nich obsiahnuté. Tak, ako príklad, mohli by sme mať čas element, čas zložka, ktorá bude obsahovať ako časovú pečiatku, viete, komponenta profil, ktorý bude obsahovať obrázok profilu a meno osoby. To môže mať ako počítadlo, ktoré môže počítať ako je počet rád, a pokiaľ naň kliknete, bude to zvýšiť počet likes. Súčasťou je len banda HTML kódu, ktorý má niektoré funkcie zabalené vo vnútri nej. Takže je to ako prvku HTML na steroidoch, ako som už povedal skôr. Môžete si vziať tieto komponenty, a môžete dať dohromady aby nové komponenty, v tento prípad, súčasť pošta, ktorá obsahuje všetky tie veci. To by obsahovať dobu, profil, LikeCounter, možno komentár a možno samotný obrázok. A tak webové aplikácie sú len postavené tým, že komponenty a skladať ich. Krmivá pre Instagram nie je nič viac než banda príspevkov jeden po druhom, každý príspevok obsahuje ako čas, Profil, LikeCounter, a tak ďalej. Je to niečo ako stavať dom. Nemusíte budovať dom odhora nadol. Beriete components-- vás brať ako kúpeľne. Vezmete bedroom-- im držať dohromady, a máte nový komponent. Máte novú časť domu. 

Takže Reagovať všetko je postavené okolo Táto myšlienka komponentov sú interaktívne, ktoré sú deklaratívny. Rovnako ako si len povedať, čo je to profil je, a to robí to. Sú composable. Môžete si vziať čas a profil, dať ich dohromady, aby sa niečo lepšie. A sú znovu použiteľné, takže ak ste majú zdrojový kód pre poštu, môžete vložiť tento kdekoľvek. 

Môžete vložiť Instagram vec, na svojich webových stránkach. Môžete vložiť do Facebook, napríklad, tak dlho, ako to používa React rovnako. Takže komponenty sú naozaj, ale naozaj, naozaj silné stavebné bloky webe , Ktoré môžu byť použité kdekoľvek a dať dohromady, aby sa nové stavebné bloky. To je veľmi uzávierky, veľmi vysokej úrovni prehľad. Takže, ešte raz, ak máte akékoľvek otázky v žiadnom mieste o filozofiu reaktora, v kódovanie, aby ma zastaviť, a dajte mi vedieť. 

OK, takže reakcia je skvelé, pretože to má iný spôsob nahliadnutia na to, ako budete stavať webové aplikácie. Pravdepodobne ste počuli o MVC, A Model môžete ovládať v CS50 alebo čo ďalšie skúmavé tried, ktoré používate. A väčšina rámce sú postavený okolo myšlienky na MVC. Reagovať nie je. Reagovať je postavená na myšlienke, z jednosmerného dátového toku ako je vidieť podľa tejto tabuľky alebo grafiky tu. 

V podstate máte zdroj dát. A zdroj dát bude rozhodovať ako vyložiť určité komponenty. A komponenty budú potom, keď sa zmení, budú povedať, zdroj údajov zmeniť. 

Ak chcete použiť Instagram Napríklad môžete mať zoznam poštových objektov, ako sú v databáze, alebo tak niečo. Že dáta. A potom naše rozmiestniť komponenty bude trvať, že dáta, a používať tieto údaje na to, aby vec na obrazovke. To je to, čo sa šípkou z údajov do zložkou je, a použije sa, že rovnaké dáta k tomu, aby veľa komponentov. 

Facebook Messenger, pre Príkladom, ktorý je React, môžete mať zoznam Správy ako zdroj dát. A to by spôsobilo nie iba zoznam správ ale aj zoznam priateľov, máte. Máte počet neprečítaných. Možno, že tiež vykresliť vec Facebook to je v dolnej časti Facebook.com. Rovnaké dáta sú jediný zdroj pravdy a ktorý spôsobuje, že veľa komponenty, ktoré majú byť vykreslený. A vždy, keď jeden z tých, zložky sa zmení, sa vráti späť a zmení zdroj údajov. 

Môžete poslať správu, že jo? To sa zmení zdroj údajov. Môžete čítať správy, takže môžete nastaviť neprečítané 0. To sa zmení zdroj údajov. Všimnite si, že všetky z nich z jednej šípka návrate do rovnakých údajov zdroj, takže viete, keďže, určitý súbor dát, viete presne, čo je Stránka bude vyzerať. Je to deterministický. Viete, uvedené niektoré údaje, čo stránka sa bude vyzerať. Môžete si predpovedať, ako to bude správať a ako sa veci idú do práce, keď sú dohromady. 

A keby som mal milión komponenty tu, to by sa správajú rovnako, nie? Tie by mať žiadny podivné prepojenie. Jeden údaje poskytnuté milión komponenty. Milión Components sa vrátiť a editovať dáta. A tak je to veľmi pekné. Staviame composable, ľahko škálovateľné webové aplikácie. 

Máte jeden zdroj dát, zdroj pravdy. To hovorí vaše komponenty ako položiť sa na stránku, a komponenty budú zvládnuť interakcie. A ak chcú zmeniť veci, jednoducho ísť späť a povedzte zdroj údajov zmeniť. Dáva zmysel? Takže Reagovať je o porozumení , Ako vytvoriť komponent a ako vytvoriť svoj komponenty komunikovať s vonkajším svetom. 

Tvorba komponentov sa ovplyvňovať s vonkajším svetom používa inú technológiu volal Flux, ktorý je rámec, ktorý je pridaný na hornej React. Nebudeme o tom hovoriť. Budeme hovoriť o vzhľadom na to, Dáta, ako môžete vykresliť komponent? 

A tak Reagovať je preto, že ste naozaj cool ho použiť s akýmkoľvek zadným konci chcete. Ak máte ako back-end Python, ak vaše Python môže vypľuť niektoré údaje, Reagovať môže spôsobiť to. Ak ste žiadne JS výstupy dát, React činí to. Ruby koľajnice s Údaje, Reagovať činí to. 

Takže React je v podstate web view-- predný koniec so zložkami pre všetky zdroje dát vôbec. A tak sa zo zdroja údajov reagovať komponentov je celkom jednoduché. Chystáte sa na druhú stranu je trochu ťažšie. To používa Flux ako som spomenul predtým. Budeme sa dostať do toho. Budeme sa viac zamerať na Dáta-to-komponentné stranu. Týmto spôsobom môžete urobiť pohodový, zábavné webové aplikácie. To nebude mať vplyv na okolitý svet teraz, ale to je iný príbeh. 

OK, takže ak si tu pre môj posledný seminár budete vedieť, že všetok kód pre dnešná diskusia bude na tejto adrese tu, sorry, toto URL tu. A v podstate budeme ísť cez štyri kroky, možno päť, pravdepodobne nie päť. Budeme sa pohybujú cez štyri kroky budovanie vzorka Reagovať aplikácie. A tak všetok zdrojový kód na každom kroku na ceste bude tu, takže ak ste po pozdĺž doma, neváhajte pozrieť tento kód. Ak ste po pozdĺž tu, budeme ukazovať na obrazovke, takže sa nemusíte starať o to. Ale ak ste doma, pocit zadarmo k návšteve tejto webovej stránky. A, áno, mali by ste byť schopní sa dostať celý kód by ste niekedy potrebovať tady. Takže je to dobrý ťahák rovnako za budúce dobrodružstvo s Reagovať. Cool, takže ak každý kto je tu, a to aj v prípade, že ste doma, vytiahnuť tento web, is.gd/cs50react, žiadny kapitál, nie podčiarkovník, proste nič. 

Uvidíte stránku, ktorá vyzerá trochu ako je tento. To je vec, s názvom CodePen. CodePen je kolaboratívne kódovanie prostredie s ktorými môžem písať kód tu, a to bude automaticky zaslané. A týmto spôsobom, môžem písať kód. Môžem spustiť kód tu. 

Pre example-- a ak je to reloads-- vidieť, Bežím kód JavaScript na stránke tu, a bude to automaticky vykreslenie webovej stránky s týmto kódom JavaScript. A tak je to spôsob pre nás vyskúšať kód naozaj rýchlo, bez toho aby museli použiť náš ID alebo použite náš lokálneho počítača alebo čokoľvek iného. Je to veľmi rýchly spôsob, ako môžete maketa a vyskúšať rôzne druhy kódu. 

Takže budem užívať príklad kódu, uvedenie tu. Budeme pracovať cez neho. A ak ste doma, budete môže vytiahnuť toto hore rovnako. A ja som už nainštalovaný Reagovať tu, takže stačí napísať svoj vlastný kód tu, a skúste si to ako svoje vlastné ihrisko. 

Jo, či všetci otvoriť tento odkaz tu. Prosím, dajte mi palce up, až budete mať to otvoriť. Pohode, pohodový cool. Nie je tu nič, čo teraz, ale zmeníme, že veľmi skoro. 

OK, takže Reagovať je JavaScript knižnica, a ako taký, vyžaduje znalosť JavaScriptu, čo je web programovací jazyk. A je to byť použité na iné veci teraz taky, ale predovšetkým vytvoriť web jazyk, takže ak ste oboznámení s to, že čítal mieste zvanom JSforCats.com. To je nádherné. Môžete sa naučiť JavaScript za pol hodiny. Je to neuveriteľné. 

Takže dať mu čítanie. Tiež sme ich veľa HTML tu, pretože sme navrhovanie webových stránok samozrejme. Takže ak ste oboznámení s HTML, pozrite sa na HTMLdog.com. Myslím, že učenie je Reagovať miliónkrát jednoduchšie, ak už poznať základné stavebné kamene. Ak máte komponenty, je to jednoduché, aby sa väčšia zložku. To je Reagovať jazyk pre vás. 

Tak choďte do toho a dať tieto veci a Prečítajte si. Pozastaviť toto video. Dajte mu čítať, ak ste doma, ak si nie ste oboznámení s HTML alebo JavaScriptu OK, takže to, čo budeme urobiť, je, že budeme robiť veľmi základné Karta cca pomocou Reagovať. Budeme mať fleshky. Môžete prevrátiť kartu tam a späť. A budeme mať tiež zoznam všetky karty, ktoré máme, a ak sa cítime ambiciózny, môžeme byť schopný prepínať medzi autá kliknutím na ne. 

Ale to je, holými kosti, veľmi jednoduchý React aplikáciu. A tak je to vlastne nie je triviálne implementovať, ale ideme ukázať, že, ak to urobíte to, že je to veľmi, veľmi ľahké ho rozšíriť ak vám ostatní ľudia s tým pomôcť. Takže ideme prejsť štyri kroky začína od nuly stavať to. 

OK, takže štyri kroky, budeme začať s prvým krokom. Prvým krokom bude budovať svoj prvý zložku. Ako som už povedal skôr, komponenta v Reagovať je len HTML element na steroidoch. Určuje HTML a niektoré správanie, a to určí, ako ľudia môže komunikovať s ním ako to bude mať vnútorný stav. Rovnako ako tlačidlo sa poznajú ako koľko časy to bolo klikli napríklad, a bude vedieť, ako položiť samo. 

Tak poďme do toho a budovať naše Prvá zložka pomocou JavaScriptu. Takže ak syntaxe vyzerá divne, To preto, že druh je. Takže, ešte raz, ideme aby premennú s názvom app pomocou kľúčového slova rokov, čo premennú, nech App rovné React.createClass. 

React je knižnica a má create funkcie triedy. A táto funkcia je trochu kódu, ktorý vám možno použiť na vytvorenie nového typ React zložku. A tak React.createClass robí komponentu, a táto zložka bude môcť robiť veci. Hlavná vec, ktorú môže urobiť, je poskytnúť niečo, činí v závislosti. 

Opäť platí, že ak je tento index nie je zrejmé vy, odporúčam vám ísť na JS pre mačky a pozrieť sa na to. Je to priblíženie dosť dobre? Super. 

Takže každý potrebuje súčasť mať vykreslenie funkciu. Omietky funkcie hovorí, Čo som tlačiť na obrazovke? Ale je komponenta k ničomu, pokiaľ to nie je Vedieť, čo pre tlač na obrazovke, a tak musíte mať vykreslenie funkciu. 

Takže v omietke vec, vy stačí sa vrátiť trochu HTML. A čo je v pohode, je, že tam je vec zvaná JSX, ktorý je predĺžením JavaScript, ktorá je používaná reagovať. To vám umožní písať HTML vnútri Vášho JavaScriptu, ktorý Znie to divne, keď najprv premýšľať o tom, ale to robí veľa zmysel neskôr. Takže môžeme urobiť. Ak ste oboznámení s HTML, ja viem, máme div sa všeobecný účel nádoba na veci. Môžeme sa vrátiť div, a vnútri tento div, môžeme dať veci. 

Takže povedzme, že chceme na to, aby práve rovný-up Karta teraz. Fleshky, povedal by som, bude mať otázku a odpoveď. Takže vnútri tohto div, poďme vytlačiť odsek ktorý hovorí, že question-- Čo je konečná odpoveď na život, vesmír? A potom je odpoveď bude, samozrejme, 42. 

To neprišiel dobre. Jo, takže v podstate môžete naozaj písať HTML vnútri vášho JavaScript. A to bude vytlačený na obrazovku. Tak poďme to vyskúšať. 

Takže máme zložku. Musíme povedať Reagovať dať zložka, na obrazovke tak React.render, tak zistíte, že sme zaobchádzať aplikácie ako každý iný prvok. Píšeme to, ako to bolo element HTML. Ako miesto toho hovorí, ako IMG pre obraz alebo p pre odsek, budete písať aplikácie, takže aplikácie je zaobchádzané ako prvku HTML. Ako som už povedal, je to element na steroidoch. 

Takže si vykresliť App, a vy že to naozaj nie je miesto, kam ho. A to je to, ako môžete povedať to, kam dať. Vytvoril som jednoduchý div na strane strana volal s ID stránky, a to je miesto, kde element pôjde. 

A nebudeme bežať s HTML. V podstate to bude dostať dať dovnútra tejto stránky prvku že máme na obrazovke. Takže to beží tento kód, a to priťahuje tento čo sa na obrazovke, a tak sme tu. Urobili sme naše prvé reagovať zložku. 

Tak práve ako rekapituláciu, sme jemne vyrobený nový typ komponenty, nie? To je to, čo React.createClass. A tým, že komponenta, sme Povedal to, čo by mal robiť. Vždy, keď je táto zložka na vytlačený na obrazovku, to vytlačí div sa dva odseky vnútri nej. 

A to, čo sme urobili, sme urobili novú aplikáciu pomocou uholník app notácie. Povedali sme ho, aby ju Vnútri elementu stránky. A tak to, čo som urobil, že vytvoril novú aplikáciu z tejto šablóny. A potom som povedal, je to urobiť. Tak to povedal, OK, app, čo by som mal vytlačiť? App hovorí, ísť vytlačiť div s dvoma bodmi vo vnútri nej. A voila, je tu naša div sa dva body vo vnútri nej. Urobiť tak ďaleko zmysel? 

Takže, opäť celá výzva React je len vedieť, ako sa robí komponenty. Ako, aby sa komponenty spolupracujú. Teraz, keď sme urobili naše prvé komponenty, vráťme sa a aby komponenty prispôsobiteľné. Tak viete, ako v HTML vám môže dať svoje tlačidla tried? Môžete si dať svojim kotvy href. Môžete si dať svojim vstupy typ, že jo? Môžete dať viac na zákazku vlastnosti na všetky vaše prvky aby sa to viac zaujímavejšie. A my vlastne môžeme urobiť presne to isté. 

Takže povedzme, že chceme, aby naši app ísť vykresliť akúkoľvek kartu. Práve teraz sme jednoducho tavené hardcoded kartu. Vieme, že je tu len jedna karta to môže urobiť, tak sme sa snažiť a zmeniť to teraz tak že môžeme len dať mu nejaký kartu. To bude tlačiť kartu. 

Mali by ste sa snažiť a robiť vaše komponenty veľmi všeobecný účel. Takže to spôsob, ako by som mohol email to môj priateľ a byť ako, Karta čo máte, Len kŕmiť do tu, a bude to robiť sama. Môžete dať ďalšie veci vo vašej vlastnej aplikácie. 

Ale najprv, poďme rozčleniť tento up do dvoch zložiek, ale chceme oddeliť karty tlač časť od vlastného app časti. Takže to, čo môžeme urobiť, je, že sme môže zmeniť z App na CardView, len nový názov pre aplikáciu, a my môžeme vytvoriť nový zložka s názvom App, nesmie zamieňať so starým App. Máme sa createClass, a rovnako ako v HTML, môžete vnoriť Reagovať komponenty Vnútri na sebe. 

Takže v tomto vykreslenie funkcie, Funkcie Návrat CardView, a to je presne to isté. Pozrite sa, prečo je to to isté? Namiesto toho, činí len aplikácie, ktorá má div a párovanie vnútri nej, aplikácia vykreslí CardView, a CardView činí div a odseku. Tak toto je náš prvý príklad hniezdnu prvky vnútri seba. Dáva to zmysel_ Takže, opäť, máme CardView prvok. Máme app prvky , Že je väčší ako. 

OK, takže chceme, aby naše CardView-- ak vás dávajú dobrú CardView určitú kartu, to bude vytlačiť pre vás, nie? Takže najprv musíme urobiť kartu, tak sa poďme urobiť objekt karty. Tak nech mi kartu equal-- ak ste všetci oboznámení, to je len zápis tvorba objekt v JavaScriptu. Je to niečo ako struct v C, takže sme urobili kartu, a tak teraz môžeme prejsť túto kartu ako vlastnosť alebo ako atribút v HTML terminológie našej aplikácii. Takže môžeme urobiť, App karta rovná myCard. 

Viete, ako na vstupe, robíte Typ vstupu rovná textu alebo tlačidla trieda rovná BTN pre bootstrap,? Rovnaký nápad, App karta equals-- musíš dať rovnátka here-- App karta rovná myCard, tak to hovorí, že máme tento objekt karty. Chystám sa to prejsť ako vlastnosť komponenty app. A táto aplikácia zložka bude bolo možné sa k nim dostať a robiť zaujímavé veci s ním. 

Takže naše aplikácie bude vzhľadom k tomu, karty, takže pre túto chvíľu, poďme aplikáciu daj karta k CardView sám, pretože rovnako ako aplikácia nie je bude vedieť, čo s tým robiť, takže budeme proste dať to do CardView. Takže budeme odovzdať na Rovnako tak, karta rovná, a tak každá zložka môžu mať prístup ku veci, ktoré bola daná k nemu. Môžu prístup k vlastnostiam , Ktoré boli uvedené na neho pomocou tejto syntaxe, this.props.card. 

Takže čo sa stane, je tu máte myCard objekt. Môžete odovzdať ju do aplikácie pomocou App karty rovná myCard. Ten objekt karta je kladený na vašej aplikácii. Aplikácia môže pristupovať as this.props.card. Je to niečo ako obraz vie, čo to je zdroj. 

Táto aplikácia vie, čo to je karta je, a to môže robiť veci s ním. To môže robiť výpočty. To môže urobiť rozhodnutie založená mimo neho. 

Pre túto chvíľu som išiel prejsť this.props.card na CardView. Urobiť tak ďaleko zmysel? Bude to teraz väčší zmysel. 

OK, tak teraz sme na CardView. Naše CardView, dostane kartu, mal vytlačiť svoju otázku a odpoveď. Práve teraz sme jednoducho vytlačí niektoré napevno otázky a odpovede. Musíme prísť na out-- potrebujeme požiadať kartu, ktorá nám dali aká je otázka a odpoveď, a vytlačiť túto von do obrazovky. 

Takže môžeme to urobiť tu. V činí begin-- najprv urobiť rovná. Takže to, čo tu robíme, je, že vieme, karty sú nám daná k nehnuteľnosti, doprava? Je nám daná ako vstup. Rovnako ako je to skoro ako argumenty funkcie. Karta je argument takmer k tomuto CardView. 

Budeme extrahovať, že, a dal to do premennej pochybnosť. Uistite sa, že odpoveď šla na premennú odpoveď. Výzvy, ktoré karta odpovedať. A teraz, že máme tieto, miesto tlače sa tento text, ideme na vytlačenie všetko, čo nám dali. 

Takže to stuff-- tak ideme uhasiť Otázka Odpoveď. Uvidíme, či to funguje. Cool, tak sa poďme ho krok po kroku ešte raz len pre istotu. 

Takže moja karta je objekt karta, a my dávajú túto kartu do aplikácie. A aplikácie bude vziať kartu a dať ju do CardView. A to CardView hovorí, ak ste daj mi akúkoľvek Flashcard objekt Budem vytlačiť svoju otázku a jeho odpoveď, že jo? 

Takže to, čo som mohol urobiť, je, že som si zaslať tento kód, prvý ako 10 riadkov mojom kódu, až môj priateľ. Mohol vložiť ho do jeho vlastnú žiadosť. A tak dlho, ako urobil to isté, ako CardView karta rovná sa to, tak dlho, ako on vytvoril CardView a dal tomu správne informácie, mohol urobiť svoju vlastnú kartu. A tak sa týmto spôsobom, je to naozaj pohode spôsob, ako vybudovať komponenty, ktoré používajú sebe, že jo? Táto karta, mohol by som publikovať tento CardView na internete, a ľudia budú môcť používať. Takže v podstate, je to ako jeden z Štandardné funkcie v knižnici C. 

Jedná sa o funkciu, kde niekto napísal. Dáte určitý vstup. Bude vyrábať určitý výstup. Nezaujíma vás, ako to funguje interne. Tak dlho, ako ste jej dávajú právo vstup, bude to robiť ten správny výstup. 

A zložku môže byť myslel rovnakým spôsobom. To je ako CardView funkciu knižnice. Pokiaľ ho dať nejaké karty ako vlastnosť, bude to vytlačiť obsah danej karty. Rovnako ako keď zmením kartu namiesto toho ako to, čo je 5 a 37, to bude aktualizovať podľa toho. Takže stačí zmenou vstup, sa dostane určitý výkon. Takže si môžete myslieť komponentov takmer ako funkcia týmto spôsobom, ktorý si môžete dať dohromady. Získate vstup, ako je tento CardView ako vstup, dostanete výstup. V tomto prípade je výstup je HTML. Urobiť tak ďaleko zmysel? Cool, tak znova, vlastnosti sú ako môžete odovzdať informácie do a zo zložiek. 

OK, takže poďme aby to vec interaktívne. Práve teraz je to trochu nuda. Čo je to [nepočuteľných]? Môžete vytlačiť nejaké von, ale to je všetko, čo sa dá robiť. 

Takže poďme späť k stará otázka práve teraz. OK, takže práve teraz tieto komponenty sú nudné, pretože všetko, čo robia, sa dostanú vstup. Robia výstup, je to tak? To je trochu nuda. Chceme mať otázky komponenty, aby bolo možné mať nejaký vnútorný stav, ako niečo zapamätať. 

Pre FlashCard, pre Príklad, aký druh štátu Možno budete chcieť pamätať FlashCard? Čo dočasný stav Možno budete chcieť mať na pamäti, pre FlashCard v Flashcard aplikácie? Divákov: Či už to bolo normálne? NEEL MEHTA: Áno, jasné. Takže možno budete chcieť, aby Trať ste lícom nahor, alebo sú budete čeliť nadol na karte. Na Facebook, napríklad, že nie Chcete si spomenúť, kde v noviniek Si ty, alebo chceli kto je profil sú práve teraz robíte. 

Na Messenger, rovnako ako to, čo text, zadajte do poľa, že jo? Ak aktualizovať stránku, to ide preč. Ale nemáte naozaj jedno. Je to len dočasné. Jo? 

Divákov: [Nepočuteľné] NEEL MEHTA: Ako blesk karta, rovnako ako si môžete byť vidieť otázka strana alebo odpoveď strana? 

Divákov: OK. 

NEEL MEHTA: Rovnako ako obojstranné fleshky, že jo? Jo, takže chcete majú túto myšlienku teraz Mám vlastnosti, čo je ako vstupy, ale stav, ktorý je dočasný, uh, kde ste na stránke, nie? Opäť som povedal v Facebook Messenger, mám podobne, ktoré človek máte zobrazenú Facebook alebo kto je profil, nie? 

To je len dočasné. Je dôležité ukázať užívateľovi čo sa deje, ale aktualizujte stránku. Je to naozaj nezáleží. Takže je to dočasný stav, tak sme všetci to stáť. 

Takže, ešte raz, je tu stáť a rekvizity. Podpery je uvedený vstup zo zdroja údajov. Štát je ako predvolené. Je to rovnaké ako veci, ktoré robí vec interaktívne. 

Takže v našom CardView-- poďme sa náš CardView-- tak to bolo fajn. Čo budeme robiť tu, ideme na dotyk CardView a iba CardView. A tak môj priateľ, ktorý dostal to, že nevšimne žiadny rozdiel. Nebudú musieť zmeniť niektoré z ich vlastný kód, ale že by som vidieť ich CardView dostal nadupaným hore. To je pekný časť o komponenty. 

OK, takže v našej CardView, skúsme a sledovať, či budeme postupne nahor alebo stranou nadol. V Reagovať robíme to tým, že najprv určujúci počiatočný stav. Kde karta začať? 

Takže buďte funkciu nazvanú getInitialState fungovať, a vraciame sa objekt. Tento objekt obsahuje nejaký stať, a štát je len pár kľúč-hodnota. Rovnako ako v pokyn, máte kľúč a hodnota, máte ako názov je reťazec. 

V tomto prípade, povedzme, že predná strana je pravda. To hovorí, že máme stáť. Jednou zložkou štátu je atribút s názvom predné. [Nepočuteľný], tak tým, že v predvolenom nastavení, sme v prednej strane karty, a môžeme to zmeniť ako sme flip kartu. Dáva zmysel? 

OK, takže robí, práve teraz, my sme ukazujúci na otázku a odpoveď. Teraz, čo by sme mali robiť je ukázať na otázku ak sme na prednej strane karty, takže je odpoveď na zadnej strane karty. To je dôvod, prečo ste všetci robia karta interaktívne. Takže poďme sa pokúsiť, aby to tu. No, najprv len aby premennú. Môžeme sa opýtať teraz this.state.front. Máme prístup konštatovať rovnaký my prístupové rekvizity, tak this.state.front. 

Ak sme predné, potom textu je this.props.card.question. Ak sme na prednej časti karta, budeme sa snažiť a urvat otázka z karty. V opačnom prípade, keď sme na zadnej strane karty, čo budeme robiť? 

Divákov: Odpoveď? 

NEEL MEHTA: Jo, tak textu rovná this.props.card.answer. Ale ak si všimnete, sme pomocou štát urobiť rozhodnutie Pretože teraz zložky bude vyzerať inak umiestnený preč, ako tieto komunikovať s ním. Takže namiesto toho, vytlačenie to, my len vytlačiť text. Cool, tak teraz, ako vidíte, vidíme len na otázku. A keď zmením stav tu ručne front je nepravdivé dostaneme 42 späť. 

Takže, opäť, táto súčasť má svoj vlastný štát. Rovnako ako tlačidlo vie, či to bolo stlačené, alebo nie, tohle vie, čo je na prednej alebo na zadnej strane. V predvolenom nastavení je to na prednej strane. A potom, ak je to na prednej strane, budeme vytlačiť na otázku. Ak je to na zadnej strane, budeme vytlačiť odpoveď. Takže, znovu, informácie vzhľadom k tomu, je rovnaký. Proste to vyzerá inak založené na tom, ako ho naprogramovať. Tak, napríklad Facebook Messenger, aj keď sa dostanete na rovnaký zdroj údajov, to by mohlo vyzerať inak pretože štát je iný. Pozeráte sa v a Správa rôzne osoby. 

OK, takže to je všetko v poriadku a dobrý, ale teraz to, čo je vlastne aby nás mohli zmeniť, či už Naše karta je predná alebo zadná. Môžeme to urobiť tým, že pridá flip Tlačidlo, tlačidlo na kartu, ktorá vyletí pamäťovú kartu, ak je to [nepočuteľný]. Takže poďme sa tu pridať tlačidlo, toto tlačidlo, a toto tlačidlo bude hovoriť klávesnice. 

A tak práve teraz, to nerobí nič. Je to proste vyzerá pekne. Čo môžeme urobiť, je, že môžeme pridať cvaknutie psovod, onClick rovná this.flip, a my budeme definovať flipe neskôr. Ale v podstate, onClick je funkcia, ktorá sa zavolá keď používateľ klikne. 

Preto je toto tlačidlo bude vedieť keď to bolo klikli. Went to bolo klikli, to bude hodiť kartu. Je to niečo ako tvoj rozvoz pizze chlap. Si ako, v poriadku, vždy, keď niekto zavolá mi, budem doručiť pizzu, že jo? 

Vy registrovať poslucháča. Môžete počúvať pre udalosť. Získate zavolal, a keď sa udalosť stane, niečo urobiť. Dostanete pizzu. V tomto prípade, keď ste stlačili, flip karty. 

A preto je treba definovať funkcia, ktorá bude flip karty, takže budeme písať toto právo tu, flip funkciu. A tak to, čo si myslíte, že fanúšik bude robiť? Opäť sa zavolá, keď klikneme na tlačidlo otočiť. Čo by mala funkciu Flip robiť? 

Publikum: Zmena this.state.front z true na false, false na hodnotu true. 

NEEL MEHTA: Jo, tak sa bez ohľadu this.front je-- predné stav. Vezmite predné stať, ak je to pravda, aby bolo nepravdivé. Ak je to nepravdivé, aby to pravda, nie? Takže poďme to skúsiť. 

Nemôžete zmeniť stav len tým, že robí this.state. Môžete to urobiť. Môžete to urobiť. Musíte použiť funkciu volal this.setState. 

Takže môžete povedať this.setState front hrubého čreva to kde, znovu, zvolanie bod znamená opak. Myslím, že či to. state.front je pravda, bude to otočiť false. Takže budeme nastaviť stav z true na false. Ak je to falošné, budeme nastaviť tak, false na hodnotu true. 

Len si všimnite, že sme si stanovili a ľahko dostať inak, a tak sa poďme skúsiť. Bada Bing, pozri sa na to. Tlačidlo Flip bude teraz prepnúť spredu dozadu stave. 

A tak tu je miesto, kde vidíte Trochu mágie Reagovať. Rovnako ako sme sa nikdy povedal, že to, aby znovu spracovala. Nikdy sme povedali, že prekresliť čokoľvek. Ak robíte to bez Reagovať, mali by ste majú radi, keď je to-- Tlačidlo fanda kliknutie, budete musieť povedať, že na ručne re-render, že jo? 

Reagovať je naozaj cool v tom, že ak vás dať určitý stav a vlastnosti, bude vždy vykreslenie presne to isté. A tak, keď sa niekedy zmeníme stav a vlastnosti, reagovať len znovu činí celú vec. To vie, že je tu one-to-one korešpondencie medzi štátom a parametrov a HTML. Takže kedykoľvek jeden z tých, zmeny vykonané prostredníctvom súboru stave, to sa zmení, ako sa pay je znovu vykreslený. A tak v podstate je ako Reagovať čaká na vás zmeniť. 

Kedykoľvek sa zmení niečo, to bude znovu spracovala celú stranu. A keď to znie neefektívne, je to preto, že by bolo, ale reagujú využíva vec volal Tieň DOM. Namiesto toho, aby čerpanie stránku priamo, ho udržuje virtuálne HTML strom v pamäti. 

Viete, HTML je ako strom, ako hierarchickej štruktúre dát. Udržuje falošný strom v pamäti, a pri každej aktualizácii stránky, to bude čerpať ďalší falošný strom, a bude to vypočítať čo treba zmeniť, aby sa strana, aby sa tieto dva stromy rovnaké. Takže v podstate, je prakticky re-vykreslí veľa. A potom je to len rád mení stránky v malých vylepšení podľa potreby, takže je to veľmi, veľmi, veľmi efektívne. 

Takže v podstate Reagovať bude kedykoľvek niečo zmeniť, to bude znovu vykresliť stránku virtuálne. Bude to prísť na to, čo potrebujem zmeniť, aby sa skutočné stránky odrážajú virtuálne stránky, a to urobím. To je virtuálna DOM. Je to jeden z najväčších rysy Reagovať. 

Dáva to zmysel_ Nejaké otázky? Jo? 

Publikum: Ako porovnať ešte MVC že sme hovorili o Pred ako zdrojov. 

NEEL MEHTA: Jo, otázka je to, ako to v porovnaní s MVC? Pýtali ste sa o zdrojoch. Dobre, poďme hovoriť o tom, ako to funguje. 

V MVC by ste aktualizovať model. V tomto prípade budeme mať model karty. Pohľad bude mať fanda tlačidlá a ovládací prvok bude mať funkciu Flip. Takže názor by povedať, Regulátor flip klávesnice. Flip by povedať, model zmeniť, nie? 

A tak keď si urobiť MVC, ty počúvajte model zmeniť, a znovu vykresliť názor podľa toho. Alebo stačí páčiť majú radič. Počkajte model zmeniť, a potom si vybrať časť, ako vec zmeniť. Tu máme jednu vec, ale vo veľkom app, Máte rád si spomenúť, čo zmena v každom mieste, takže je to trochu nepríjemné. A tak Reagovať je pekné pretože má tieň Dom. To si môže dovoliť len prepísať celú vec. Nemusíte selektívne ako je hádať, čo aktualizovať. 

Na Facebooku ak sa vám páči dostanete novú správu, v MVC, by ste mať na pamäti, OK, meniť veci v hornej časti strana, ikona správy. Tiež pop nové okno v dolnej časti. Tiež sa niečo nové v tomto okne. Tiež hrať zvuk. 

To je veľa vecí chodiť v rovnakom čase. A tak, ak nemáte majú tieň Dom, mali by ste musieť urobiť ručne, pretože nemôžete zbaviť celú stránku. Nemôžete si dovoliť, takže máte zmeniť každú vec ručne, čo je naozaj otravné v MVC. 

Takže, aby boli sporivý, oni selektívne aktualizovať stránku, ktorá je účinný, ale aj nepríjemné. V React, kvôli tieni Dom, dostanete oboje zadarmo. Je to efektívne, pretože Tieňovej Dom. Zúženie aktualizuje stránku. Nie je to robí manipuláciu strom. Získate účinnosť. Môžete tiež získať jednoduchosť použitia, pretože ak ste práve prepísať celú stránku, ale jednoducho viete, v poriadku, veci, sa bude na stránke niekam. To by mohlo byť na inom mieste, ale že to bude na stránke, nie? Takže ste práve re-tavené celá vec v podstate, a vy by ste mohli urobiť pár Zmeny samotnej stránky. 

Takže, opäť v MVC vás bude musieť vybrať medzi jednoduchosť použitia a efektivitu, a reagovať, dostanete obaja. Takže je to lepšie. Dáva zmysel? Solid. 

OK, takže uvidíme, poďme hovoriť niečo málo o kroku 4, ako môžeme vložiť komponenty. Takže máme práve teraz. Máme chladné malé tlačidlo. Môžeme sa otočiť späť a tam, a to je všetko, čo robí. Povedzme, že chceme, aby majú ďalšie komponenty. Povedzme, že náš flashcard aplikácie by obsahujú zoznam všetkých kariet že máte, tak to znamená, že by mali mať ďalší krok. No, možno sa to nazvať zobrazenie zoznamu. Poďme urobiť zobrazenie zoznamu, ktorý koexistuje s CardView, a tento zoznam zobrazenie a CardView bude páčiť pracovať spoločne. A vy ich môžete kombinovať aby sa naša aplikácia pre vás. 

Takže najprv, poďme urobiť pár viac kariet v poriadku. Povedzme, aké karty? A len tak nemám na nudiť písanie ju, Ja som jednoducho ísť skopírovať odtiaľto. A tak ja idem na to dať mu len jednu kartu. Chystám sa dať rad kariet. Takže najprv, že aplikácia chystá rozbiť teraz. Dobre, takže budeme robiť tento schopní zvládnuť viac kariet. Takže najprv, budeme dávať to, nie len jednu kartu, ale rad kariet, ako zoznam kariet. A v tomto prípade, máme tri z nich. 

Dobre, takže takže aplikácie je bude získať zoznam kariet, a bude to sa rozhodnúť, ktoré kto ukázať na CardView. CardView môže iba činí jednu kartu, ale aplikácia dostane zoznam všetkých kariet, že jo? 

Takže, keď ste zistili, kto Karta dať CardView, ako by ste, že by ste mali byť schopní urobiť rozhodnutie o tom, ktoré karty ukázať? Ak chcete vám náznak, že je dočasne Budete prezeráte určitú kartu. Ak aktualizovať stránku, budete stačí ísť späť na prvú kartu. To je v poriadku, pretože je to dočasné. Akou technikou môžeme používať? 

Divákov: Dalo by sa urobiť premennou takže rovnako ako vy mali dopredu. Je to pravda, mohol by ste mať aktuálne karta rovná 1? 

NEEL MEHTA: Jo, tak sme Chcete mať stať, že jo? Použili by ste stáť v Komponenta prísť na to, ktorá karta chceme dostať. Rovnako ako máme zoznam všetky karty, budeme používať stať, aby zistili, jeden z prvej karty, druhá karta, tretia karta, a tak ďalej. 

Takže aplikácie, takže aplikácie, dostanú majú funkciu getInitialState, getInitialState funkcie návrat. A budeme len povedať activeIndex 0. Takže teraz naša aplikácia má vlastný štát. 

A tak teraz na omietky, prísť na to, karta, nech to jednoducho ísť do poľa a chytiť vec v tomto indexe. Zvoľte karty rovnakej this.props.cards this.state.activeIndex. Takže ako vidíte tu, rekvizity a Stať skutočne pracujú spoločne. Takže teraz, že máme AktivCard, budeme nazývať AktivCard, a uvidíme, či to funguje. [Nepočuteľných] 

Oh, že bol text chybe. Ah. 

Cool, jo, takže teraz sme boli späť tam, kde sme boli predtým, nie? Rovnaký starý program, s výnimkou Teraz môžeme podporiť zoznam kariet, nie len jedna karta. A teraz, opäť, keď sme zmeniť activeIndex, môžeme ísť od 0 do 1, a teraz, keď už druhá karta, a potom sme šli do 0 ° C. Tak tu je nový nadupaným-up verzia nášho. 

OK, tak teraz poďme sa zobrazenie zoznamu, ktorý ukazuje všetky karty v programe, takže budeme robiť nový súčasť tzv ListView. Nech ListView rovná react.createClass. Takže chceme vykresliť neusporiadaný zoznam s zoznamu položku pre každú kartu. A tak máme veľa kariet. Chceme jednu položku zoznamu pre každú kartu, nie? Mohli by sme urobiť pre slučku, alebo niečo urobiť novú položku zoznamu. Ale spôsob, akým ste to v Reagovať použiť vec zvanú mapa. Mapa je nástroj alebo funkcie, ktorú používate že pre každú položku, beží nejakú funkciu, vezme návratovú hodnotu, a dáva vám to späť. 

Tak ako príklad, máme pole 1, 2, a to 3.map function-- je skratkou pre function-- x šípkami x krát x. To hovorí, že pre každé číslo v 1, 2, 3, vezmite si ju. Námestie, a to vrátiť. Tak čo si myslíš, že 1, 2, 3.map x ide do x krát x vám dáva späť vzhľadom k tomu, že táto funkcia je beží na každý prvok tejto matice. 

Publikum: 1, 4 9? 

NEEL MEHTA: Jo, 1, 4, 9 preto, že robíte 1 krát 1. To vám dáva jeden. To je prvý prvok. 

2 krát 2 je 4. To je druhý prvok. 3 krát 3 je 9. To je tretí prvok. Dáva zmysel? Mapa Takže má techniku, ktorú použitie vo funkčných programátorov, Nový štýl programovanie robiť niečo na každý prvok v zozname. A tak to znie povedome. Máme zoznam kariet. Chceme získať položku zoznamu pre každý človek, takže budeme jednoducho použiť mapu tu. Povieme, nech zoznam rovná this.props, karty, mapu. 

A tak dostal kartu, my sme bude generovať položky zoznamu S tým karty obsahu strane. Povedzme, že chceme dať von Karty o ne card.question. Takže tento zoznam obsahuje poľa LI je alebo položky zoznamu tam, kde je jeden zoznam položka pre každú kartu, a ktorý obsahuje karty otázku. Dáva zmysel? 

Cool, takže teraz poďme vytlačia, že von. Tak sme sa vrátiť ul. Vnútri tohto zoznamu, jednoducho budeme držať celý zoznam že nám dali. Super. 

Dobre, tak teraz to Zoznam pohľad práce len nájsť. Máte otázky k zobrazenie zoznamu? Máte veľa kariet. Urobíte položku zoznamu pre každú kartu. A vy ste dal je vnútri neusporiadaný zoznam, a dáte ho späť. Takže teraz poďme konať, aby sme vložiť tento vnútri našej aplikácii, takže môžeme urobiť, zobrazenie zoznamu. To, čo argument, môžeme prejsť k zobrazenie zoznamu? Aké vlastnosti sa dáme to? Pamätajte si, že ak dáte je to banda kariet, to bude robiť zoznam zobraziť u týchto kariet. Takže to, čo by sme prejsť tu ako argument? Divákov: Zoznam kariet? NEEL MEHTA: Jo, tak karty rovná this.props.cards, že jo? A tak jediný problém je, že môžete len obrátil jeden prvok najvyššej úrovne v render, takže máte zabaliť ho do div. Je to divne. Tak uvidíme, či to. Znamená to, že funguje? 

Jo, tam idete. Takže teraz máme zoznam kariet na dne, a potom Máme CardView sám na vrchole, a že medzi vyletí obe strany karty. Teraz robí to zmysel, ako som to urobil? Jo, tak znova, máme dve zložky. Súčasť sa tlačia ako prvé out každá karta v zozname. To je zobrazenie zoznamu. A druhá zložka vytlačí len, že kartu. Pokiaľ ho dať určitú kartu, bude to vytlačiť informácie o túto kartu a umožňujú otočiť tam a späť. 

Takže ak chceme, môžeme skúsiť a hovoriť o pridanie niektoré nové funkcie v tejto oblasti. V opačnom prípade môžeme hovoriť o niečo viac o o rýchlosti reaktora, alebo môžeme odpovedať otázky, ktoré môžu mať pretože tieto sú všetky z hlavných dielov o reakciu, že chcem hovoriť. Môžeme pokračovať. Môžeme odpovedať na otázky. Čokoľvek chceš. 

Divákov: Môžete použiť JSX v normálnom JavaScriptu? Alebo je to niečo, prišiel s [nepočuteľných]? 

NEEL MEHTA: Otázkou je, či si Používate JSX s normálnym JavaScriptu? Odpoveď je áno. JSX je len spôsob, ako to berie vaše JavaScript, ktorý má HTML vnútri nej, a zostavuje do JavaScriptu, že nemá HTML vnútri nej. Takže si všimnúť that-- tak všimnúť tu. To vyzerá, ako by si mal ako div a máte veci vnútri nej. 

, Ktorý prekladá do JavaScriptu, že ako generuje rovnakú vec. Myslím, že to, čo hovorím, je, že JSX je len syntaktické, ako by to preprocesor pre JavaScript moc ako PHP je preprocesor pre HTML. JSC je preprocesor pre JavaScript, ktorý umožňuje vložíte HTML vnútri vášho JavaScript. A tak ak máte správny transformátor čo je vec, s názvom [nepočuteľných], ktorý bude transformovať. Správne preprocesor, to bude vám umožní urobiť. 

Divákov: [Nepočuteľné] NEEL MEHTA: Zvyčajne nepotrebujete dať HTML vnútri JavaScriptu ak robíte Reagovať. Ale môžete to urobiť tak ako tak. Jo? 

Divákov: Myslím si, že vás opísal Reagovať ako funkčné programovacieho jazyka. Učíme sa C v CS50. Je C aj funkčná jazyk? NEEL MEHTA: Takže otázka je o funkčné oproti iným, čomu sa hovorí imperatívne alebo procedurálne programovanie. Sú dva druhy programov populárne. Jedna sa volá procesné, čo je o ako robiť príkazov, a jeden je funkčné, čo je všetko o ktoré majú funkcie a majúci Vstup a výstup z nich. Reagovať je funkčná paradigma. C je veľmi procedurálne paradigma. 

A ako príklad, napríklad C, nechcete robiť túto deklaratívny spôsobom tvorby programu, nie? Musíte povedať, tlačiť. Zmeniť túto štruktúru dát. Vytlačiť toto. Je to všetko o príkazy. 

V Reagovať, že to nie je že veľa príkazov. Je to všetko o tom mať komponenty, ktoré dohromady. Sú ako funkcia. Máte podobne ako funkcia volal CardView, ktoré je funkciou ktorý má vstup, výstup a tak React je všetko o tejto filozofie Americké ministerstvo having-- máte dáta. Môžete prechádzať cez to algoritmus, a to bude HTML výstup, ktorý vás len vytlačiť stránku, a tak budete musieť stavať to kúsok po kúsku. 

Takže k tomu metaforu na to, čo Povedal som predtým, viete, ako na Facebooku, ak sa dostanete správu, a môžete si vybrať, ktoré časti k aktualizácii, to je procesný. To je absolútne nevyhnutné, nie? OK, som dostal správu. Zmeňme účet tam. 

Poďme pop okná tu. Zmeňme účet tam. Poďme nakresliť to tu. To je procesný prístup. 

To je to, čo veci, ako Uhlová, Boost, Chrbticová ďalšie rámca použitie. Reagovať je funkčná. Je to veľmi odlišný spôsob, premýšľanie o veciach. To berie túto myšlienku poďme sa funkcií alebo algoritmy, ktoré budete dať mu dát. Bude vypľuť čo to by mal byť, a počítač sa bude starať o vážení von. Nemusíte zvládnuť sami. Znamená to, že trochu zmysel? Jo? 

Publikum: Vo funkčnej jazyk, všetko, čo sa deje naraz? 

NEEL MEHTA: Nie, čo sa stalo v poriadku. Rovnako ako tu je tu stále objednať, ale to nie je sa stalo v poradí, ako Chválim, príkaz, príkaz. Stáva sa to v poradí Funkcia vám dáva výstup. Daj to do inej funkcie. Daj to do ďalšej Funkcie, iné funkcie. 

Ak tak urobíte CS51, budete učiť funkčné programy trochu z rozsahu tejto. Ale v podstate, to, čo robí Reagovať cool je nielen jednocestný dátový tok a virtuálne Dom, ale aj táto myšlienka funkcionálne programovanie. A funkčné programovanie je veľmi jednoduché skladať a robiť super veci z, a je to veľmi jednoduché si myslieť, asi aj dôvod, prečo asi. Takže to je ďalší dobrý remíza Reagovať. Nejaké ďalšie otázky? Jo? 

Publikum: Um, prečo by ste Používajte nechal na rozdiel od var? 

NEEL MEHTA: Takže otázka znie Prečo používate nechať namiesto var? To je vec zvaná ES6 alebo ECMAScript 6. Je to nová verzia JavaScript. Je tu veľa technických dôvodov, ale nech je lepšia verzia var. 

Je to, ako ste deklarovať premenné. Môžete použiť nechať. Môžete použiť var. Rokov má veľa technických reasons-- si môžete prezrieť ich up later--, prečo je to lepšie. V podstate, ES6 má niektoré pekné Nová syntaxe, niektoré nové funkcie v hornej časti starého JavaScript. 

Takže máme asi päť minút. Len som chcel hovoriť o ešte jedna vec naozaj rýchlo. Ak by ste mali nejaké otázky, poďme hovoriť o tom po tomto. Ale len tak sa to dostane zachytil na kameru, len som chcem hovoriť trochu o tom, ako skutočne používať Reagovať na vašich aplikácií. 

Ak sa vydáte tu, Facebook.GitHub.IO/react, toto je domáca stránka pre React, a to vám ukážem, ako budete skutočne používať Reagovať na svoje stránky. V podstate je to trochu komplikované pokuse o inštaláciu Reagovať. Nie je to tak jednoduché, ako si len pretiahnuť and drop JavaScript tam. 

Musíte mať transformátor nastavenie, ktoré bude, ako to bolo predtým, sa váš JSX do normálne JavaScript. Musíte sa vec, ktorá bude kompilácie vám ES6 do normálu. JavaScript je tu veľa pohybu súčasti, čo musíte urobiť, takže je tu vec, volal Yeoman, Yeoman.io. A to je nástroj pre príkazový riadok, ktorý bude pomôže lešenia z vášho Reagovať projekty ľahko. 

Takže si môžete prečítať o tom neskôr, ale tam sú niektoré nástroje že Yeoman ponúka. Budú vám umožní vytvoriť Reagovať Aplikácia so všetkým postavená v roku. Rovnako ako to bude mať postavené in, súčasti postavená v roku. To bude mať váš transformátor postavená v roku. Majú veľa v pohode veci postavený automaticky použitím týchto vecí zvaných generátory. 

Tak si prečítajte o tom, či chcete. Stačí ísť na Yeoman, Y-E-O-M-A-N, a nájdete generátory, ako sú tieto. A s generátory, ako je tieto, ste práve ako jeden je pár príkazov príkazového riadku. Bude to lešenie hodnotenia vplyvu na Celý Reagovať app pre vás. Bude to získať všetky manuálne potrubia sa, a grunt prácu za vás, a to je dôvod, prečo si len sústrediť Na práve písanie v Reagovat. 

Takže v podstate budovaní Reagovať aplikácie je netriviálne. Je to pevné dohromady, ale tam sú nástroje, ktoré Urobíme to za vás. Takže ak chcete, aby sa Reagovať app, skúste robiť to tak. Ak si len chcete experimentovať, môžete skúsiť pomocou tohto CodePen pretože tento má CodePen všetky reagovať zapojenia. Urobil som všetku prácu za vás už. 

Takže ak chcete, aby sa ako výroba uvoľniť Reagovať app, skúste niektorý z týchto generátorov. Ak si len chcete hrať okolo, je to často stojí len ako vyskúšať, hral na CodePen tu. Znie to dobre? Super. 

Tak to je všetko, čo mám. Opäť platí, že celý kód a príklady sú Bude na týchto stránkach tu. Takže, ešte raz, sme nehovorili asi veľa syntaxe Reagovať, ale nájsť všetky tie, málo syntaktické detaily, to všetko bude k dispozícii Na týchto webových stránkach tu. 

Takže by som rád odporučiť prvý krok. Dajte ju do vášho CodePen. Skúste pracujeme na tom, že do druhého kroku. Je tu štvrtý krok, a len uvidíte, kam sa dostanete z toho. 

Nejaké ďalšie otázky, pozrite sa na to, že stránky alebo e-mail mi. To je môj e-mail. Ale ja by som rád, aby vám pomohol s akýmkoľvek otázky môžete mať o Reagovať. Takže, áno, to je všetko, čo mám. Ďakujem vám všetkým moc za sledovanie alebo za účasť. A ja si vezmem nejaké otázky môžete mať po tomto teraz. Takže ďakujem vám všetkým za sledovanie.