>> [Přehrávání hudby]
>> NEEL MEHTA: Tady to jde.
>> No, všichni, vítejte na webu apps budoucnosti s Reagovat.
To je CS50.
Jmenuji se Neel.
Jsem TA pro CS50 a druhák na Harvard College a velmi, velmi
vášnivý webový vývojář.
Takže jsem velmi vzrušující mluvit s vámi dnes,
ať už jste tady, nebo doma sledování, o React, která je, opět
jak jsem řekl, že budoucnost webových aplikací.
>> Takže Reagovat je webový rámec.
A jak už jsem říkal Byl pro některé lidi tady,
rámec je jen sada nářadí, které můžete použít
strukturovat a budovat své webové aplikace.
A webové aplikace jsou, opět, webové stránky které jsou interaktivní, jako jsou Facebook,
Twitter.com, Instagram.com, cokoliv.
>> Tak Facebook je webová rámec který byl vyvinut společností Facebook
pár lety back-- reagovat je.
To je protože se používá v Facebook na svých mobilních aplikacích
a webová aplikace, Instagram.
Khan Academy je další prominentní inovátor Reagovat.
>> Je to opravdu bylo dostat extrémně populární.
Pokud jste někdy použít věci jako rohové nebo Backbone, to je ze stejné rodiny,
ale má od daleko předstihnout jejich popularitu.
Je to horká novinka.
Je to opravdu, opravdu obrovská.
>> A tak Reagovat je dobrá nejen jako web rámec pro stavební rozhraní.
Je to dobré pro vytváření webových rozhraní.
K dispozici je také věc Reagovat volal Native, které
umožňuje vytvářet rozhraní pro Android a iOS
a možná i další platformy v budoucnu pouze pomocí stejný kód JavaScriptu.
Dalo by se použít přesně stejný Kód JavaScript k tomu, webové stránky,
k tomu, aby aplikace Android a iOS aplikace.
>> Je to velmi, velmi vzrušující doba.
Je to opravdu, opravdu cool příležitost.
Je to opravdu univerzální web interface vývojový nástroj,
takže je to velmi, velmi důležitá věc, vědět.
A jak jsem říkal lidem předtím, to, myslím,
se chystá změnit způsob, jakým jsme vytvářet webové aplikace navždy.
Takže je to možná trochu nadsázka, ale já myslím, že je docela dobrá věc, vědět.
>> OK, takže to, co je Reagovat?
Reagovat je rámec, můžete použít pro budování rozhraní.
Rozhraní je, opět, webové stránky, ne?
Tak tady je Instagram.com, použití Reagovat.
>> Reagovat je postaven na idea komponent.
Součástí je HTML prvek na steroidech,
takže HTML element je jako tlačítka.
Je to bod.
Je to záhlaví, že jo?
A Instagram bude používat tyto, ale to budou také používat komponenty Reagovat.
>> Reagují komponenty jsou nadupaným-up HTML elementy
které mají své vlastní chování v nich obsažené.
Tak, jako příklad, mohli bychom mít čas element, čas složka,
která bude obsahovat jako časové razítko, víte,
komponenta profil, který bude obsahovat obrázek profilu
a jméno osoby.
To může mít jako počítadlo, které může počítat jako je počet rád,
a pokud na něj kliknete, bude to zvýšit počet likes.
Součástí je jen banda HTML kódu, který
má některé funkce zabalené uvnitř ní.
Takže je to jako prvku HTML na steroidech, jak jsem již řekl dříve.
Můžete si vzít tyto komponenty, a můžete dát dohromady
aby nové komponenty, v tento případ, součást pošta,
která obsahuje všechny ty věci.
To by obsahovat dobu, profil, LikeCounter, možná komentář
a možná samotný obrázek.
A tak webové aplikace jsou jen postaveny tím, že komponenty a skládat je.
Krmiva pro Instagram není nic víc než banda příspěvků jeden po druhém,
každý příspěvek obsahuje jako čas, Profil, LikeCounter, a tak dále.
Je to něco jako stavět dům.
Nemusíte budovat dům odshora dolů.
Berete components-- vás brát jako koupelny.
Vezmete bedroom-- jim držet dohromady, a máte novou komponentu.
Máte novou část domu.
>> Takže Reagovat vše je postaveno kolem Tato myšlenka komponent
jsou interaktivní, které jsou deklarativní.
Stejně jako si jen říct, co je to profil je, a to činí to.
Jsou composable.
Můžete si vzít čas a profil, dát je dohromady, aby se něco lépe.
A jsou znovu použitelné, takže pokud jste mají zdrojový kód pro poštu,
můžete vložit tento kdekoliv.
>> Můžete vložit Instagram věc, na svých webových stránkách.
Můžete vložit do Facebook, například, tak dlouho, jak to používá React stejně.
Takže komponenty jsou opravdu, ale opravdu, opravdu silné stavební bloky webu
, které mohou být použity kdekoliv a dát dohromady, aby se nové stavební bloky.
To je velice závěrky, velmi vysoké úrovni přehled.
Takže, ještě jednou, pokud máte jakékoli otázky v žádném místě
o filozofii reaktoru, v kódování, aby mě zastavit, a dejte mi vědět.
>> OK, takže reakce je skvělé, protože to má jiný způsob nahlížení
na to, jak budete stavět webové aplikace.
Pravděpodobně jste slyšeli o MVC, A Model můžete ovládat v CS50 nebo co
další zkoumavé tříd, které používáte.
A většina rámce jsou postavený kolem myšlenky na MVC.
Reagovat není.
Reagovat je postavena na myšlence, z jednosměrného datového toku
jak je vidět podle této tabulky nebo grafiky zde.
>> V podstatě máte zdroj dat.
A zdroj dat bude rozhodovat jak vyložit určité komponenty.
A komponenty budou pak, když se změní,
budou říct, zdroj dat změnit.
>> Chcete-li použít Instagram Například můžete mít
seznam poštovních objektů, jako jsou v databázi, nebo tak něco.
Že data.
A pak naše rozmístit komponenty bude trvat, že data,
a používat tyto údaje k tomu, aby věc na obrazovce.
To je to, co se šipkou z údajů do složkou je,
a použije se, že stejná data k tomu, aby spoustu komponentů.
>> Facebook Messenger, pro Příkladem, který je React,
můžete mít seznam Zprávy jako zdroj dat.
A to by způsobilo ne pouze seznam zpráv
ale také seznam přátel, máte.
Máte počet nepřečtených.
Možná, že také vykreslit věc Facebook to je v dolní části Facebook.com.
Stejná data jsou jediný zdroj pravdy
a který způsobuje, že mnoho komponenty, které mají být vykreslen.
A vždy, když jeden z těch, složky se změní,
se vrátí zpět a změní zdroj dat.
>> Můžete poslat zprávu, že jo?
To se změní zdroj dat.
Můžete číst zprávy, takže můžete nastavit nepřečtené 0.
To se změní zdroj dat.
Všimněte si, že všechny z nich z jedné šipka návratu do stejných údajů
zdroj, takže víte, vzhledem k tomu, určitý soubor dat,
víte přesně, co je Stránka bude vypadat.
Je to deterministický.
Víte, uvedené některé údaje, co stránka se bude vypadat.
Můžete si předpovědět, jak to bude chovat a jak se věci jdou
do práce, když jsou dohromady.
>> A kdybych měl milion komponenty tady, to by se chovají stejně, ne?
Ty by mít žádný podivné propojení.
Jeden údaje poskytnuté milion komponenty.
Milion Components se vrátit a editovat data.
A tak je to velmi pěkné.
Stavíme composable, snadno škálovatelné webové aplikace.
>> Máte jeden zdroj dat, zdroj pravdy.
To říká vaše komponenty jak položit se na stránku,
a komponenty budou zvládnout interakce.
A pokud chtějí změnit věci, prostě jít zpátky
a řekněte zdroj dat změnit.
Dávat smysl?
Takže Reagovat je o porozumění , jak vytvořit komponentu
a jak vytvořit svůj komponenty komunikovat s vnějším světem.
>> Tvorba komponent se ovlivňovat s vnějším světem
používá jinou technologii volal Flux, který
je rámec, který je přidán na horní React.
Nebudeme o tom mluvit.
Budeme hovořit o vzhledem k tomu, Data, jak můžete vykreslit komponentu?
>> A tak Reagovat je proto, že jste opravdu cool jej použít s jakýmkoliv zadním konci chcete.
Máte-li jako back-end Python, pokud vaše Python může vyplivnout některé údaje,
Reagovat může způsobit to.
Jste-li žádné JS výstupy dat, React činí to.
Ruby kolejnice s Údaje, Reagovat činí to.
>> Takže React je v podstatě web view-- přední konec se složkami
pro všechny zdroje dat vůbec.
A tak se ze zdroje dat reagovat komponent je docela snadné.
Chystáte se na druhou stranu je trochu těžší.
To používá Flux jak jsem zmínil dříve.
Budeme se dostat do toho.
Budeme se více zaměřit na Data-to-komponentní stranu.
Tímto způsobem můžete udělat pohodový, zábavné webové aplikace.
To nebude mít vliv na okolní svět teď, ale to je jiný příběh.
>> OK, takže pokud jsi tady pro můj poslední seminář
budete vědět, že veškerý kód pro dnešní diskuse bude na této adrese
tady, sorry, toto URL zde.
A v podstatě budeme jít přes čtyři kroky, možná pět,
pravděpodobně ne pět.
Budeme se pohybují přes čtyři kroky budování vzorek Reagovat aplikace.
A tak veškerý zdrojový kód na každém kroku na cestě
bude tady, takže pokud jste po podél doma,
neváhejte prohlédnout tento kód.
Pokud jste po podél tady, budeme ukazovat na obrazovce,
takže se nemusíte starat o to.
Ale pokud jste doma, pocit zdarma k návštěvě této webové stránky.
A, Ano, měli byste být schopni se dostat celý kód byste někdy potřebovat tady.
Takže je to dobrý tahák stejně za budoucí dobrodružství s Reagovat.
Cool, takže pokud každý, kdo je tady, a to iv případě, že jste doma,
vytáhnout tento web, is.gd/cs50react, žádný kapitál, ne podtržítko, prostě nic.
>> Uvidíte stránku, která vypadá trochu jako je tento.
To je věc, s názvem CodePen.
CodePen je kolaborativní kódování prostředí
s nimiž mohu psát kód zde, a to bude automaticky zasláno.
A tímto způsobem, mohu psát kód.
Mohu spustit kód zde.
>> Pro example-- a je-li to reloads-- vidět, Běžím kód JavaScript na stránce
tady, a bude to automaticky vykreslení webové stránky
s tímto kódem JavaScript.
A tak je to způsob pro nás vyzkoušet kód
opravdu rychle, aniž by museli použít náš ID nebo použijte náš místního počítače
nebo cokoliv jiného.
Je to velmi rychlý způsob, jak můžete maketa a vyzkoušet různé druhy kódu.
>> Takže budu užívat příklad kódu, uvedení zde.
Budeme pracovat přes něj.
A pokud jste doma, budete může vytáhnout toto nahoru stejně.
A já jsem již nainstalován Reagovat tady, takže stačí
napsat svůj vlastní kód zde, a zkuste si to jako své vlastní hřiště.
>> Jo, jestli všichni otevřít tento odkaz zde.
Prosím, dejte mi palce up, až budete mít to otevřít.
Pohodě, pohodový cool.
Není tu nic, co teď, ale změníme, že velmi brzy.
>> OK, takže Reagovat je JavaScript knihovna, a jako takový,
vyžaduje znalost JavaScriptu, což je web programovací jazyk.
A je to být použity pro jiné věci teď taky, ale především vytvořit web
jazyk, takže pokud jste obeznámeni s to, že četl místě zvaném JSforCats.com.
To je nádherné.
Můžete se naučit JavaScript za půl hodiny.
Je to neuvěřitelné.
>> Takže dát mu čtení.
Také jsme je hodně HTML tady, protože jsme navrhování webových stránek samozřejmě.
Takže pokud jste obeznámeni s HTML, podívejte se na HTMLdog.com.
Myslím, že učení je Reagovat milionkrát jednodušší, pokud již
znát základní stavební kameny.
Máte-li komponenty, je to snadné, aby se větší složku.
To je Reagovat jazyk pro vás.
>> Tak jděte do toho a dát tyto věci a Přečtěte si.
Pozastavit toto video.
Dejte mu číst, pokud jste doma, pokud si nejste
obeznámeni s HTML nebo JavaScriptu
OK, takže to, co budeme udělat, je, že budeme dělat
velmi základní Karta cca pomocí Reagovat.
Budeme mít flešku.
Můžete převrátit kartu tam a zpět.
A budeme mít také seznam všechny karty, které máme,
a pokud se cítíme ambiciózní, můžeme být
schopný přepínat mezi auta kliknutím na ně.
>> Ale to je, holýma kosti, velmi jednoduchý React aplikaci.
A tak je to vlastně není triviální implementovat,
ale jdeme ukázat, že, pokud to uděláte to, že je to velmi, velmi snadné jej rozšířit
pokud vám ostatní lidé s tím pomoci.
Takže jdeme projít čtyři kroky začíná od nuly stavět to.
>> OK, takže čtyři kroky, budeme začít s prvním krokem.
Prvním krokem bude budovat svůj první složku.
Jak jsem již řekl dříve, komponenta v Reagovat je jen HTML element na steroidech.
Určuje HTML a některé chování, a to
určí, jak lidé může komunikovat s ním jak
to bude mít vnitřní stav.
Stejně jako tlačítko se znají jako kolik časy to bylo klikli například,
a bude vědět, jak položit samo.
>> Tak pojďme do toho a budovat naše První složka pomocí JavaScriptu.
Takže pokud syntaxe vypadá divně, To proto, že druh je.
Takže, ještě jednou, jdeme aby proměnnou s názvem
app pomocí klíčového slova let, což proměnnou,
ať App rovné React.createClass.
>> React je knihovna a má create funkce třídy.
A tato funkce je trochu kódu, který vám
lze použít k vytvoření nového typ React složku.
A tak React.createClass dělá komponentu,
a tato složka bude moci dělat věci.
Hlavní věc, kterou může udělat, je poskytnout něco, činí v závislosti.
>> Opět platí, že pokud je tento index není zřejmé vy, doporučuji vám jít na JS pro kočky
a podívat se na to.
Je to přiblížení dost dobře?
Bezva.
>> Takže každý potřebuje součást mít vykreslení funkci.
Omítky funkce říká, Co jsem tisknout na obrazovce?
Ale je komponenta k ničemu, pokud to není
Vědět, co pro tisk na obrazovce, a tak musíte mít vykreslení funkci.
>> Takže v omítce věc, vy stačí se vrátit trochu HTML.
A co je v pohodě, je, že tam je věc zvaná
JSX, který je prodloužením JavaScript, která je používána reagovat.
To vám umožní psát HTML uvnitř Vašeho JavaScriptu, který
Zní to divně, když nejprve přemýšlet o tom,
ale to dělá hodně smysl později.
Takže můžeme udělat.
Pokud jste obeznámeni s HTML, já vím, máme div se obecný účel
nádoba na věci.
Můžeme se vrátit div, a uvnitř tento div, můžeme dát věci.
>> Takže řekněme, že chceme k tomu, aby právě rovný-up Karta teď.
Flešku, řekl bych, bude mít otázku a odpověď.
Takže uvnitř tohoto div, pojďme vytisknout odstavec
který říká, že question-- Co je konečná odpověď na život, vesmír?
A pak je odpověď bude, samozřejmě, 42.
>> To nepřišel dobře.
Jo, takže v podstatě můžete opravdu psát HTML uvnitř vašeho JavaScript.
A to bude vytištěn na obrazovku.
Tak pojďme to vyzkoušet.
>> Takže máme složku.
Musíme říci Reagovat dát složka, na obrazovce
tak React.render, tak zjistíte, že jsme zacházet aplikace jako každý jiný prvek.
Píšeme to, jak to bylo element HTML.
Jako místo toho říká, jako IMG pro obraz nebo p pro odstavec,
budete psát aplikace, takže aplikace je zacházeno jako prvku HTML.
Jak jsem již řekl, je to element na steroidech.
>> Takže si vykreslit App, a vy že to opravdu není místo, kam ho.
A to je to, jak můžete říct to, kam dát.
Vytvořil jsem jednoduchý div na straně strana volal s ID stránky,
a to je místo, kde element půjde.
>> A nebudeme běžet s HTML.
V podstatě to bude dostat dát dovnitř této stránky prvku
že máme na obrazovce.
Takže to běží tento kód, a to přitahuje tento co se na obrazovce, a tak jsme tady.
Udělali jsme naše první reagovat složku.
>> Tak právě jako rekapitulaci, jsme jemně vyrobený nový typ komponenty, ne?
To je to, co React.createClass.
A tím, že komponenta, jsme Řekl to, co by měl dělat.
Vždy, když je tato složka na vytištěn na obrazovku,
to vytiskne div se dva odstavce uvnitř ní.
>> A to, co jsme udělali, jsme udělali novou aplikaci pomocí úhelník app notace.
Řekli jsme ho, aby ji Uvnitř elementu stránky.
A tak to, co jsem udělal, že vytvořil novou aplikaci z této šablony.
A pak jsem řekl, je to učinit.
Tak to řekl, OK, app, co bych měl vytisknout?
App říká, jít vytisknout div s dvěma body uvnitř ní.
A voila, je tu naše div se dva body uvnitř ní.
Udělat tak daleko smysl?
>> Takže, opět celá výzva React je jen vědět, jak se dělá komponenty.
Jak, aby se komponenty spolupracují.
Teď, když jsme udělali naše první komponenty, vraťme se
a aby komponenty přizpůsobitelné.
Tak víte, jak v HTML vám může dát své tlačítka tříd?
Můžete si dát svým kotvy href.
Můžete si dát svým vstupy typ, že jo?
Můžete dát více na zakázku vlastnosti na všechny vaše prvky
aby se to více zajímavější.
A my vlastně můžeme udělat přesně to samé.
>> Takže řekněme, že chceme, aby naši app jít vykreslit jakoukoliv kartu.
Právě teď jsme prostě tavené hardcoded kartu.
Víme, že je tu jen jedna karta to může udělat, tak jsme
se snažit a změnit to teď tak že můžeme jen dát mu nějaký kartu.
To bude tisknout kartu.
>> Měli byste se snažit a dělat vaše komponenty velmi obecný účel.
Takže to způsob, jak bych mohl email to můj přítel a být jako,
Karta co máte, Jen krmit do tady,
a bude to dělat sama.
Můžete dát další věci ve vaší vlastní aplikace.
>> Ale nejprve, pojďme rozčlenit tento up do dvou složek,
ale chceme oddělit karty tisk část od vlastního app části.
Takže to, co můžeme udělat, je, že jsme může změnit z App
na CardView, jen nový název pro aplikaci,
a my můžeme vytvořit nový složka s názvem App,
nesmí být zaměňována se starým App.
Máme se createClass, a stejně jako v HTML,
můžete vnořit Reagovat komponenty Uvnitř na sobě.
>> Takže v tomto vykreslení funkce, Funkce Návrat CardView,
a to je přesně to samé.
Podívejte se, proč je to totéž?
Místo toho, činí jen aplikace, která má div a párování uvnitř ní,
aplikace vykreslí CardView, a CardView činí div a odstavce.
Tak tohle je náš první příklad hnízdní prvky uvnitř sebe.
Dává to smysl?
Takže, opět, máme CardView prvek.
Máme app prvky , že je větší než.
>> OK, takže chceme, aby naše CardView-- pokud vás dávají dobrou CardView určitou kartu,
to bude vytisknout pro vás, ne?
Takže nejprve musíme udělat kartu, tak se pojďme udělat objekt karty.
Tak ať mi kartu equal-- pokud jste všichni obeznámeni,
to je jen zápis tvorba objekt v JavaScriptu.
Je to něco jako struct v C, takže jsme udělali kartu,
a tak nyní můžeme projít tuto kartu jako vlastnost nebo jako atribut v HTML
terminologie naší aplikaci.
Takže můžeme udělat, App karta rovná myCard.
>> Víte, jak na vstupu, děláte Typ vstupu rovná textu nebo tlačítka
třída rovná BTN pro bootstrap ,?
Stejný nápad, App karta equals-- musíš dát rovnátka here--
App karta rovná myCard, tak to říká, že máme tento objekt karty.
Chystám se to projít jako vlastnost komponenty app.
A tato aplikace složka bude bylo možné se k nim dostat a dělat
zajímavé věci s ním.
>> Takže naše aplikace bude vzhledem k tomu, karty, takže pro tuto chvíli,
pojďme aplikaci dej karta k CardView
sám, protože stejně jako aplikace není bude vědět, co s tím dělat,
takže budeme prostě dát to do CardView.
Takže budeme předat na Stejně tak, karta rovná,
a tak každá složka mohou mít přístup ke věci, které byla dána k němu.
Mohou přístup k vlastnostem , které byly uvedeny na něj
pomocí této syntaxe, this.props.card.
>> Takže co se stane, je zde máte myCard objekt.
Můžete předat ji do aplikace pomocí App karty rovná myCard.
Ten objekt karta je kladen na vaší aplikaci.
Aplikace může přistupovat as this.props.card.
Je to něco jako obraz ví, co to je zdroj.
>> Tato aplikace ví, co to je karta je, a to může dělat věci s ním.
To může dělat výpočty.
To může učinit rozhodnutí založená mimo něj.
>> Pro tuto chvíli jsem šel projít this.props.card na CardView.
Udělat tak daleko smysl?
Bude to teď větší smysl.
>> OK, tak teď jsme na CardView.
Naše CardView, dostane kartu, měl vytisknout svou otázku a odpověď.
Právě teď jsme prostě vytištěno některé napevno otázky a odpovědi.
Musíme přijít na out-- potřebujeme požádat kartu, která nám dali
jaká je otázka a odpověď, a vytisknout tuto ven do obrazovky.
>> Takže můžeme to udělat zde.
V činí begin-- nejprve udělat rovná.
Takže to, co tady děláme, je, že víme, karty jsou nám dána k nemovitosti,
právo?
Je nám dána jako vstup.
Stejně jako je to skoro jako argumenty funkce.
Karta je argument téměř k tomuto CardView.
>> Budeme extrahovat, že, a dal to do proměnné pochybnost.
Ujistěte se, že odpověď šla na proměnnou odpověď.
Výzvy, které karta odpovědět.
A teď, že máme tyto, místo tisku se tento text,
jdeme k vytištění všechno, co nám dali.
>> Takže to stuff-- tak jedeme uhasit Otázka Odpověď.
Uvidíme, jestli to funguje.
Cool, tak se pojďme jej krok po kroku ještě jednou jen pro jistotu.
>> Takže moje karta je objekt karta, a my dávají tuto kartu do aplikace.
A aplikace bude vzít kartu a dát ji do CardView.
A to CardView říká, pokud jste dej mi jakoukoliv Flashcard objekt
Budu vytisknout svou otázku a jeho odpověď, že jo?
>> Takže to, co jsem mohl udělat, je, že jsem si zaslat tento kód, první
jako 10 řádků mém kódu, až můj přítel.
Mohl vložit jej do jeho vlastní žádost.
A tak dlouho, jak udělal to samé, jako CardView karta rovná se to,
tak dlouho, jak on vytvořil CardView a dal tomu správné informace,
mohl učinit svou vlastní kartu.
A tak se tímto způsobem, je to opravdu pohodě způsob, jak vybudovat
komponenty, které používají sobě, že jo?
Tato karta, mohl bych publikovat tento CardView na internetu,
a lidé budou moci používat.
Takže v podstatě, je to jako jeden z Standardní funkce v knihovně C.
>> Jedná se o funkci, kde někdo napsal.
Dáte určitý vstup.
Bude vyrábět určitý výstup.
Nezajímá vás, jak to funguje interně.
Tak dlouho, jak jste jí dávají právo vstup, bude to dělat ten správný výstup.
>> A složku může být myslel stejným způsobem.
To je jako CardView funkci knihovny.
Pokud jej dát nějaké karty jako vlastnost, bude to
vytisknout obsah dané karty.
Stejně jako když změním kartu místo toho jako to, co je 5 a 37,
to bude aktualizovat podle toho.
Takže stačí změnou vstup, se dostane určitý výkon.
Takže si můžete myslet komponent téměř jako funkce tímto způsobem, který
si můžete dát dohromady.
Získáte vstup, jako je tento CardView jako vstup, dostanete výstup.
V tomto případě je výstup je HTML.
Udělat tak daleko smysl?
Cool, tak znovu, vlastnosti jsou jak můžete předat informace
do a ze složek.
>> OK, takže pojďme aby to věc interaktivní.
Právě teď je to trochu nuda.
Co je to [neslyšitelných]?
Můžete vytisknout nějaké ven, ale to je vše, co se dá dělat.
>> Takže pojďme zpět k stará otázka právě teď.
OK, takže právě teď tyto komponenty jsou nudné, protože všechno, co dělají,
se dostanou vstup.
Dělají výstup, je to tak?
To je trochu nuda.
Chceme mít dotazy komponenty, aby bylo možné mít
nějaký vnitřní stav, jako něco zapamatovat.
>> Pro FlashCard, pro Příklad, jaký druh státu
Možná budete chtít pamatovat FlashCard?
Co dočasný stav Možná budete chtít mít na paměti,
pro FlashCard v Flashcard aplikace?
Diváků: Ať už to bylo normální?
NEEL MEHTA: Jo, jasně.
Takže možná budete chtít, aby Trať jste lícem nahoru, nebo jsou
budete čelit dolů na kartě.
Na Facebook, například, že ne Chcete si vzpomenout, kde v novinek
Jsi ty, nebo chtěli kdo je profil jsou právě teď děláte.
>> Na Messenger, stejně jako to, co text, zadejte do pole, že jo?
Pokud aktualizovat stránku, to jde pryč.
Ale nemáte opravdu jedno.
Je to jen dočasné.
To jo?
>> Diváků: [Neslyšitelné]
NEEL MEHTA: Jako blesk karta, stejně jako si můžete být vidět
otázka strana nebo odpověď strana?
>> Diváků: OK.
>> NEEL MEHTA: Stejně jako oboustranné flešku, že jo?
Jo, takže chcete mají tuto myšlenku nyní
Mám vlastnosti, což je jako vstupy, ale stav, který je dočasný, uh,
kde jste na stránce, ne?
Opět jsem řekl v Facebook Messenger, mám podobně, které člověk
máte zobrazenou Facebook nebo kdo je profil, ne?
>> To je jen dočasné.
Je důležité ukázat uživateli co se děje, ale aktualizujte stránku.
Je to opravdu nezáleží.
Takže je to dočasný stav, tak jsme všichni to stát.
>> Takže, ještě jednou, je tu stát a rekvizity.
Podpěry je uveden vstup ze zdroje dat.
Stát je jako výchozí.
Je to stejné jako věci, které dělá věc interaktivní.
>> Takže v našem CardView-- pojďme se náš CardView-- tak to bylo fajn.
Co budeme dělat tady, jedeme na dotek CardView a pouze CardView.
A tak můj přítel, který dostal to, že nevšimne žádný rozdíl.
Nebudou muset změnit některé z jejich vlastní kód,
ale že bych vidět jejich CardView dostal nadupaným nahoru.
To je hezký část o komponenty.
>> OK, takže v naší CardView, zkusme a sledovat, zda budeme postupně nahoru
nebo lícem dolů.
V Reagovat děláme to tím, že nejprve určující počáteční stav.
Kde karta začít?
>> Takže buďte funkci nazvanou getInitialState fungovat, a vracíme se objekt.
Tento objekt obsahuje nějaký stát, a stát je jen pár klíč-hodnota.
Stejně jako v pokyn, máte klíč a hodnota, máte jako název je řetězec.
>> V tomto případě, řekněme, že přední strana je pravda.
To říká, že máme stát.
Jednou složkou státu je atribut s názvem přední.
[Neslyšitelný], tak tím, že ve výchozím nastavení, jsme v přední straně karty,
a můžeme to změnit jak jsme flip kartu.
Dávat smysl?
>> OK, takže činí, právě teď, my jsme ukazující na otázku a odpověď.
Teď, co bychom měli dělat je ukázat na otázku
pokud jsme na přední straně karty, takže je odpověď na zadní straně karty.
To je důvod, proč jste všichni dělají karta interaktivní.
Takže pojďme se pokusit, aby to tady.
No, nejprve jen aby proměnnou.
Můžeme se zeptat teď this.state.front.
Máme přístup konstatovat stejný my přístupové rekvizity, tak this.state.front.
>> Jsme-li přední, pak textu je this.props.card.question.
Pokud jsme na přední části karta, budeme se snažit a urvat
otázka z karty.
V opačném případě, když jsme na zadní straně karty, co budeme dělat?
>> Diváků: Odpověď?
>> NEEL MEHTA: Jo, tak textu rovná this.props.card.answer.
Ale pokud si všimnete, jsme pomocí stát učinit rozhodnutí
Protože teď složky bude vypadat jinak
umístěný pryč, jak tyto komunikovat s ním.
Takže místo toho, vytištění to, my jen vytisknout text.
Cool, tak teď, jak vidíte, vidíme pouze na otázku.
A když změním stav zde ručně front je nepravdivé dostaneme 42 zpět.
>> Takže, opět, tato součást má svůj vlastní stát.
Stejně jako tlačítko ví, zda to bylo stisknuto, nebo ne,
tohle ví, co je na přední nebo na zadní straně.
Ve výchozím nastavení je to na přední straně.
A pak, pokud je to na přední straně, budeme vytisknout na otázku.
Pokud je to na zadní straně, budeme vytisknout odpověď.
Takže, znovu, informace vzhledem k tomu, je stejný.
Prostě to vypadá jinak založené na tom, jak jej naprogramovat.
Tak, například Facebook Messenger, i když se dostanete na stejný zdroj dat,
to by mohlo vypadat jinak protože stát je jiný.
Díváte se v a Zpráva různé osoby.
>> OK, takže to je vše v pořádku a dobrý, ale teď to, co je vlastně
aby nás mohli změnit, ať už Naše karta je přední nebo zadní.
Můžeme to udělat tím, že přidá flip Tlačítko, tlačítko na kartu, která
vyletí paměťovou kartu, pokud je to [neslyšitelný].
Takže pojďme se zde přidat tlačítko, toto tlačítko, a toto tlačítko bude říkat klávesnice.
>> A tak právě teď, to nedělá nic.
Je to prostě vypadá hezky.
Co můžeme udělat, je, že můžeme přidat cvaknutí psovod, onClick rovná this.flip,
a my budeme definovat flipu později.
Ale v podstatě, onClick je funkce, která
se zavolá když uživatel klepne.
>> Proto je toto tlačítko bude vědět když to bylo klikli.
Went to bylo klikli, to bude hodit kartu.
Je to něco jako tvůj rozvoz pizzy chlap.
Jsi jako, v pořádku, vždy, když někdo zavolá mi, budu doručit pizzu, že jo?
>> Vy registrovat posluchače.
Můžete poslouchat pro událost.
Získáte zavolal, a když se událost stane, něco udělat.
Dostanete pizzu.
V tomto případě, když jste klepli, flip karty.
>> A proto je třeba definovat funkce, která bude flip karty,
takže budeme psát toto právo tady, flip funkci.
A tak to, co si myslíte, že fanda bude dělat?
Opět se zavolá, když klikneme na tlačítko otočit.
Co by měla funkci Flip dělat?
>> Publikum: Změna this.state.front z true na false, false na hodnotu true.
>> NEEL MEHTA: Jo, tak se bez ohledu this.front je-- přední stav.
Vezměte přední stát, pokud je to pravda, aby bylo nepravdivé.
Pokud je to nepravdivé, aby to pravda, ne?
Takže pojďme to zkusit.
>> Nemůžete změnit stav jen tím, že dělá this.state.
Můžete to udělat.
Musíte použít funkci volal this.setState.
>> Takže můžete říct this.setState front tlustého střeva to kde, znovu, zvolání
bod znamená opak.
Myslím, že jestli to. state.front je pravda, bude to otočit false.
Takže budeme nastavit stav z true na false.
Pokud je to falešné, budeme nastavit tak, false na hodnotu true.
>> Jen si všimněte, že jsme si stanovili a lehce dostat jinak, a tak se pojďme zkusit.
Bada Bing, podívej se na to.
Tlačítko Flip bude nyní přepnout zepředu dozadu stavu.
>> A tak tady je místo, kde vidíte Trochu magie Reagovat.
Stejně jako jsme se nikdy řekl, že to, aby znovu zpracovala.
Nikdy jsme řekli, že překreslit cokoliv.
Pokud děláte to bez Reagovat, měli byste
mají rádi, když je to-- Tlačítko fanda kliknutí,
budete muset říct, že na ručně re-render, že jo?
>> Reagovat je opravdu cool v tom, že pokud vás dát určitý stav a vlastnosti,
bude vždy vykreslení přesně to samé.
A tak, když se někdy změníme stav a vlastnosti,
reagovat jen znovu činí celou věc.
To ví, že je tu one-to-one korespondence
mezi státem a parametrů a HTML.
Takže kdykoliv jeden z těch, změny provedené prostřednictvím souboru stavu,
to se změní, jak se pay je znovu vykreslen.
A tak v podstatě je jako Reagovat čeká na vás změnit.
>> Kdykoli se změní něco, to bude znovu zpracovala celou stránku.
A když to zní neefektivní, je to proto, že by bylo,
ale reagují využívá věc volal Stín DOM.
Místo toho, aby čerpání stránku přímo, jej udržuje virtuální HTML strom v paměti.
>> Víte, HTML je jako strom, jako hierarchické struktuře dat.
Udržuje falešný strom v paměti, a při každé aktualizaci stránky,
to bude čerpat další falešný strom, a bude to vypočítat
co je třeba změnit, aby se strana, aby se tyto dva stromy stejné.
Takže v podstatě, je prakticky re-vykreslí hodně.
A pak je to jen rád mění stránky v malých vylepšení podle potřeby,
takže je to velmi, velmi, velmi efektivní.
>> Takže v podstatě Reagovat bude kdykoli něco změnit,
to bude znovu vykreslit stránku virtuálně.
Bude to přijít na to, co potřebuji změnit, aby se skutečné stránky odrážejí
virtuální stránky, a to udělám.
To je virtuální DOM.
Je to jeden z největších rysy Reagovat.
>> Dává to smysl?
Nějaké otázky?
To jo?
>> Publikum: Jak porovnat ještě MVC
že jsme mluvili o Před jako zdrojů.
>> NEEL MEHTA: Jo, otázka je to, jak to v porovnání s MVC?
Ptal jste se o zdrojích.
Dobře, pojďme mluvit o tom, jak to funguje.
>> V MVC byste aktualizovat model.
V tomto případě budeme mít model karty.
Pohled bude mít fanda tlačítka a ovládací prvek
bude mít funkci Flip.
Takže názor by říct, Regulátor flip klávesnice.
Flip by říct, model změnit, ne?
>> A tak když si udělat MVC, ty poslouchejte model změnit,
a znovu vykreslit názor podle toho.
Nebo stačí líbit mají řadič.
Počkejte model změnit, a poté si vybrat část, jako věc
změnit.
Zde máme jednu věc, ale ve velkém app,
Máte rád si vzpomenout, co změna v každém místě,
takže je to trochu nepříjemné.
A tak Reagovat je hezké protože má stín Dom.
To si může dovolit jen přepsat celou věc.
Nemusíte selektivně jako je hádat, co aktualizovat.
>> Na Facebooku pokud se vám líbí dostanete novou zprávu, v MVC,
byste mít na paměti, OK, měnit věci
v horní části strana, ikona zprávy.
Také pop nové okno v dolní části.
Také se něco nového v tomto okně.
Také hrát zvuk.
>> To je hodně věcí chodit ve stejnou dobu.
A tak, pokud nemáte mají stín Dom, měli byste
muset udělat ručně, protože nemůžete zbavit celou stránku.
Nemůžete si dovolit, takže máte změnit každou věc ručně,
což je opravdu otravné v MVC.
>> Takže, aby byly spořivý, oni selektivně
aktualizovat stránku, která je účinný, ale také nepříjemné.
V React, kvůli stínu Dom, dostanete obojí zdarma.
Je to efektivní, protože Stínové Dom.
Zúžení aktualizuje stránku.
Není to dělá manipulaci strom.
Získáte účinnost.
Můžete také získat snadnost použití, protože pokud jste právě přepsat celou stránku,
ale prostě víte, v pořádku, věci, se bude na stránce někam.
To by mohlo být na jiném místě, ale že to bude na stránce, ne?
Takže jste právě re-tavené celá věc v podstatě,
a vy byste mohli udělat pár Změny samotné stránky.
>> Takže, opět v MVC vás bude muset vybrat
mezi snadnost použití a efektivitu, a reagovat, dostanete oba.
Takže je to lepší.
Dávat smysl?
Pevný.
>> OK, takže uvidíme, pojďme mluvit něco málo o kroku 4,
jak můžeme vložit komponenty.
Takže máme právě teď.
Máme chladné malé tlačítko.
Můžeme se otočit zpět a tam, a to je vše, co dělá.
Řekněme, že chceme, aby mají další komponenty.
Řekněme, že náš flashcard aplikace by obsahují seznam všech karet
že máte, tak to znamená, že by měli mít další krok.
No, možná se to nazvat zobrazení seznamu.
Pojďme udělat zobrazení seznamu, který koexistuje s CardView,
a tento seznam zobrazení a CardView bude líbit pracovat společně.
A vy je můžete kombinovat aby se naše aplikace pro vás.
>> Takže nejprve, pojďme udělat pár více karet v pořádku.
Řekněme, jaké karty?
A jen tak nemám na nudit psaní ji,
Já jsem prostě jít zkopírovat odsud.
A tak já jdu na to dát mu jen jednu kartu.
Chystám se dát řadu karet.
Takže nejprve, že aplikace chystá rozbít nyní.
Dobře, takže budeme dělat tento schopni zvládnout více karet.
Takže nejprve, budeme dávat to, ne jen jednu kartu, ale řada karet,
jako seznam karet.
A v tomto případě, máme tři z nich.
>> Dobře, takže takže aplikace je bude získat seznam karet,
a bude to se rozhodnout, které kdo ukázat na CardView.
CardView může pouze činí jednu kartu, ale aplikace
dostane seznam všech karet, že jo?
>> Takže, když jste zjistili, kdo Karta dát CardView,
jak byste, že byste měli být schopni učinit rozhodnutí o tom, které karty
ukázat?
Chcete-li vám náznak, že je dočasně Budete prohlížíte určitou kartu.
Pokud aktualizovat stránku, budete stačí jít zpět na první kartu.
To je v pořádku, protože je to dočasné.
Jakou technikou můžeme používat?
>> Diváků: Dalo by se udělat proměnnou takže stejně jako vy měli dopředu.
Je to pravda, mohl byste mít aktuální karta rovná 1?
>> NEEL MEHTA: Jo, tak jsme Chcete mít stát, že jo?
Použili byste stát v Komponenta přijít na to,
která karta chceme dostat.
Stejně jako máme seznam všechny karty, budeme
používat stát, aby zjistili, jeden z první karty,
druhá karta, třetí karta, a tak dále.
>> Takže aplikace, takže aplikace, dostanou mají funkci getInitialState,
getInitialState funkce návrat.
A budeme jen říct activeIndex 0.
Takže teď naše aplikace má vlastní stát.
>> A tak teď na omítky, přijít na to, karta, ať to prostě jít do pole
a chytit věc v tomto indexu.
Zvolte karty stejné this.props.cards this.state.activeIndex.
Takže jak vidíte tady, rekvizity a Stát skutečně pracují společně.
Takže teď, že máme AktivCard, budeme nazývat AktivCard,
a uvidíme, jestli to funguje.
[NESLYŠITELNÝ]
>> Oh, že byl text chybě.
Ah.
>> Cool, jo, takže teď jsme byli zpátky tam, kde jsme byli předtím, ne?
Stejný starý program, s výjimkou Nyní můžeme podpořit
seznam karet, ne jen jedna karta.
A nyní, opět, když jsme změnit activeIndex, můžeme jít od 0 do 1,
a teď, když už druhá karta, a pak jsme šli do 0 ° C.
Tak tady je nový nadupaným-up verze našeho.
>> OK, tak teď pojďme se zobrazení seznamu, který ukazuje všechny karty v programu,
takže budeme dělat nový součást tzv ListView.
Ať ListView rovná react.createClass.
Takže chceme vykreslit neuspořádaný seznam s seznamu položku pro každou kartu.
A tak máme spoustu karet.
Chceme jednu položku seznamu pro každou kartu, ne?
Mohli bychom udělat pro smyčku, nebo něco udělat novou položku seznamu.
Ale způsob, jakým jste to v Reagovat použít věc zvanou mapa.
Mapa je nástroj nebo funkce, kterou používáte že pro každou položku, běží nějakou funkci,
vezme návratovou hodnotu, a dává vám to zpátky.
>> Tak jako příklad, máme pole 1, 2, a to 3.map function--
je zkratkou pro function-- x šipkami x krát x.
To říká, že pro každé číslo v 1, 2, 3, vezměte si ji.
Náměstí, a to vrátit.
Tak co si myslíš, že 1, 2, 3.map x jde do x krát
x vám dává zpět vzhledem k tomu, že tato funkce je
běží na každý prvek této matice.
>> Publikum: 1, 4 9?
>> NEEL MEHTA: Jo, 1, 4, 9 proto, že děláte 1 krát 1.
To vám dává jeden.
To je první prvek.
>> 2 krát 2 je 4.
To je druhý prvek.
3 krát 3 je 9.
To je třetí prvek.
Dávat smysl?
Mapa Takže má techniku, kterou použití ve funkčních programátory,
Nový styl programování dělat něco
na každý prvek v seznamu.
A tak to zní povědomě.
Máme seznam karet.
Chceme získat položku seznamu pro každý člověk, takže budeme prostě použít mapu zde.
Řekneme, ať seznam rovná this.props, karty, mapu.
>> A tak dostal kartu, my jsme bude generovat položky seznamu
S tím karty obsahu straně.
Řekněme, že chceme dát ven Karty o ně card.question.
Takže tento seznam obsahuje pole LI je nebo položky seznamu
tam, kde je jeden seznam položka pro každou kartu,
a který obsahuje karty otázku.
Dávat smysl?
>> Cool, takže teď pojďme vytisknou, že ven.
Tak jsme se vrátit ul.
Uvnitř tohoto výčtu, prostě budeme držet celý seznam
že nám dali.
Bezva.
>> Dobře, tak teď to Seznam pohled práce jen najít.
Máte otázky k zobrazení seznamu?
Máte spoustu karet.
Uděláte položku seznamu pro každou kartu.
A vy jste dal je uvnitř neuspořádaný seznam, a dáte ho zpátky.
Takže teď pojďme jednat, abychom vložit tento uvnitř naší aplikaci,
takže můžeme udělat, zobrazení seznamu.
To, co argument, můžeme přejít k zobrazení seznamu?
Jaké vlastnosti se dáme to?
Pamatujte si, že pokud dáte je to banda karet,
to bude dělat seznam zobrazit u těchto karet.
Takže to, co bychom projít zde jako argument?
Diváků: Seznam karet?
NEEL MEHTA: Jo, tak karty rovná this.props.cards, že jo?
A tak jediný problém je, že můžete jen
obrátil jeden prvek nejvyšší úrovně v render, takže máte zabalit ho do div.
Je to divný.
Tak uvidíme, jestli to.
Znamená to, že funguje?
>> Jo, tam jdete.
Takže teď máme seznam karet na dně,
a pak Máme CardView sám na vrcholu,
a že mezi vyletí obě strany karty.
Teď dělá to smysl, jak jsem to udělal?
Jo, tak znovu, máme dvě složky.
Součást se tisknou jako první out každá karta v seznamu.
To je zobrazení seznamu.
A druhá složka vytiskne jen, že kartu.
Pokud jej dát určitou kartu, bude to vytisknout informace o tuto kartu
a umožňují otočit tam a zpět.
>> Takže pokud chceme, můžeme zkusit a mluvit o přidání některé nové funkce v této oblasti.
V opačném případě můžeme mluvit o něco více o o rychlosti reaktoru,
nebo můžeme odpovědět otázky, které mohou mít
protože tyto jsou všechny z hlavních dílů o reakci, že chci mluvit.
Můžeme pokračovat.
Můžeme odpovědět na otázky.
Cokoliv chceš.
>> Diváků: Můžete použít JSX v normálním JavaScriptu?
Nebo je to něco, přišel s [neslyšitelných]?
>> NEEL MEHTA: Otázkou je, zda si Používáte JSX s normálním JavaScriptu?
Odpověď je ano.
JSX je jen způsob, jak to bere vaše JavaScript, který má HTML uvnitř ní,
a sestavuje do JavaScriptu, že nemá HTML uvnitř ní.
Takže si všimnout that-- tak všimnout zde.
To vypadá, jako bys měl jako div a máte věci uvnitř ní.
>> , Který překládá do JavaScriptu, že jako generuje stejnou věc.
Myslím, že to, co říkám, je, že JSX je jen syntaktická, jako by to
preprocesor pro JavaScript moc jako PHP je preprocesor pro HTML.
JSC je preprocesor pro JavaScript, který umožňuje
vložíte HTML uvnitř vašeho JavaScript.
A tak pokud máte správný transformátor což je věc, s názvem [neslyšitelných],
který bude transformovat.
Správné preprocesor, to bude vám umožní udělat.
>> Diváků: [Neslyšitelné]
NEEL MEHTA: Obvykle nepotřebujete dát HTML uvnitř JavaScriptu
pokud děláte Reagovat.
Ale můžete to udělat tak jako tak.
Ano?
>> Diváků: Myslím si, že vás popsal Reagovat
jako funkční programovacího jazyka.
Učíme se C v CS50.
Je C také funkční jazyk?
NEEL MEHTA: Takže otázka je o funkční
oproti jiným, čemu se říká imperativní nebo procedurální programování.
Jsou dva druhy programů populární.
Jedna se jmenuje procesní, což je o jako dělat příkazů,
a jeden je funkční, což je vše o které mají funkce a mající
Vstup a výstup z nich.
Reagovat je funkční paradigma.
C je velmi procedurální paradigma.
>> A jako příklad, například C, nechcete dělat tuto deklarativní způsobem
tvorby programu, ne?
Musíte říci, tisknout.
Změnit tuto strukturu dat.
Vytisknout toto.
Je to všechno o příkazy.
>> V Reagovat, že to není že mnoho příkazů.
Je to všechno o tom mít komponenty, které dohromady.
Jsou jako funkce.
Máte podobně jako funkce volal CardView,
které je funkcí který má vstup, výstup
a tak React je vše o této filosofie
Americké ministerstvo having-- máte data.
Můžete procházet přes to algoritmus, a to bude
HTML výstup, který vás jen vytisknout stránku,
a tak budete muset stavět to kousek po kousku.
>> Takže k tomu metaforu na to, co Řekl jsem předtím, víte, jak
na Facebooku, pokud se dostanete zprávu, a můžete si vybrat, které části k aktualizaci,
to je procesní.
To je naprosto nezbytné, ne?
OK, jsem dostal zprávu.
Změňme účet tam.
>> Pojďme pop okna zde.
Změňme účet tam.
Pojďme nakreslit to tady.
To je procesní přístup.
>> To je to, co věci, jako Úhlová, Boost, Páteřní další rámce použití.
Reagovat je funkční.
Je to velmi odlišný způsob, přemýšlení o věcech.
To bere tuto myšlenku pojďme se funkcí nebo algoritmy, které budete
dát mu dat.
Bude vyplivnout co to by měl být, a počítač
se bude starat o vážení ven.
Nemusíte zvládnout sami.
Znamená to, že trochu smysl?
To jo?
>> Publikum: Ve funkční jazyk, všechno, co se děje najednou?
>> NEEL MEHTA: Ne, co se stalo v pořádku.
Stejně jako tady je tu stále objednat, ale to není
se stalo v pořadí, jako Chválím, příkaz, příkaz.
Stává se to v pořadí Funkce vám dává výstup.
Dej to do jiné funkce.
Dej to do další Funkce, jiné funkce.
>> Pokud tak učiníte CS51, budete učit funkční programy
trochu z oblasti působnosti této.
Ale v podstatě, to, co dělá Reagovat cool je nejenom
jednocestný datový tok a virtuální Dom,
ale i tato myšlenka funkcionální programování.
A funkční programování je velmi snadné skládat a dělat super věci z,
a je to velmi snadné si myslet, asi i důvod, proč asi.
Takže to je další dobrý remíza Reagovat.
Nějaké další otázky?
To jo?
>> Publikum: Um, proč byste Používejte nechal na rozdíl od var?
>> NEEL MEHTA: Takže otázka zní Proč používáte nechat namísto var?
To je věc zvaná ES6 nebo ECMAScript 6.
Je to nová verze JavaScript.
Je tu spoustu technických důvodů, ale ať je lepší verze var.
>> Je to, jak jste deklarovat proměnné.
Můžete použít nechat.
Můžete použít var.
Let má spoustu technických reasons-- si můžete prohlédnout jejich
up later--, proč je to lepší.
V podstatě, ES6 má některé pěkné Nová syntaxe, některé nové funkce
v horní části starého JavaScript.
>> Takže máme asi pět minut.
Jen jsem chtěl mluvit o ještě jedna věc opravdu rychle.
Pokud byste měli nějaké otázky, pojďme mluvit o tom po tomto.
Ale jen tak se to dostane zachytil na kameru, jen jsem
chci mluvit trochu o tom, jak skutečně používat Reagovat na vašich aplikací.
>> Vydáte-li se zde, Facebook.GitHub.IO/react,
toto je domácí stránka pro React, a to vám ukážu, jak budete skutečně používat
Reagovat na své stránky.
V podstatě je to trochu komplikované pokusu o instalaci Reagovat.
Není to tak jednoduché, jak si jen přetáhnout and drop JavaScript tam.
>> Musíte mít transformátor nastavení, které bude, jak to bylo dříve,
se váš JSX do normální JavaScript.
Musíte se věc, která bude kompilace vám ES6 do normálu.
JavaScript je tu spousta pohybu součásti, co musíte udělat, takže je tu věc,
volal Yeoman, Yeoman.io.
A to je nástroj pro příkazovou řádku, který bude pomůže lešení z vašeho Reagovat
projekty snadno.
>> Takže si můžete přečíst o tom později, ale tam jsou některé nástroje
že Yeoman nabízí.
Budou vám umožní vytvořit Reagovat Aplikace se vším postavena v roce.
Stejně jako to bude mít postaveny in, součásti postavena v roce.
To bude mít váš transformátor postavena v roce.
Mají hodně v pohodě věci postavený automaticky
použitím těchto věcí zvaných generátory.
>> Tak si přečtěte o tom, jestli chcete.
Stačí jít na Yeoman, Y-E-O-M-A-N, a najdete generátory, jako jsou tyto.
A s generátory, jako je tyto, jste právě jako jeden
je pár příkazů příkazového řádku.
Bude to lešení posouzení dopadu na Celý Reagovat app pro vás.
Bude to získat všechny manuální potrubí se, a grunt práci za vás,
a to je důvod, proč si jen soustředit Na právě psaní v Reagovat.
>> Takže v podstatě budování Reagovat aplikace je netriviální.
Je to pevné dohromady, ale tam jsou nástroje, které Uděláme to za vás.
Takže pokud chcete, aby se Reagovat app, zkuste dělat to tak.
Pokud si jen chcete experimentovat, můžete zkusit pomocí tohoto CodePen
protože tento má CodePen všechny reagovat zapojení.
Udělal jsem všechnu práci za vás již.
>> Takže pokud chcete, aby se jako výroba uvolnit Reagovat app,
zkuste některý z těchto generátorů.
Pokud si jen chcete hrát kolem, je to často stojí jen
jako vyzkoušet, hrál na CodePen tady.
Zní to dobře?
Bezva.
>> Tak to je všechno, co mám.
Opět platí, že celý kód a příklady jsou Bude na těchto stránkách zde.
Takže, ještě jednou, jsme nemluvili asi hodně syntaxe Reagovat,
ale najít všechny ty, málo syntaktické detaily,
to všechno bude k dispozici Na těchto webových stránkách zde.
>> Takže bych rád doporučit první krok.
Dejte ji do vašeho CodePen.
Zkuste pracujeme na tom, že do druhého kroku.
Je tu čtvrtý krok, a jen uvidíte, kam se dostanete z toho.
>> Nějaké další otázky, podívejte se na to, že stránky nebo e-mail mi.
To je můj e-mail.
Ale já bych rád, aby vám pomohl s jakýmkoliv dotazy můžete mít o Reagovat.
Takže, ano, to je všechno, co mám.
Děkuji vám všem moc za sledování nebo za účast.
A já si vezmu nějaké otázky můžete mít po tomto teď.
Takže děkuji vám všem za sledování.