>> [Zenelejátszási]
>> NEEL MEHTA: itt indul.
>> Nos, mindenki, szívesen web apps a jövőben reagálnak.
Ez CS50.
A nevem Neel.
Én egy TA CS50 és másodéves a Harvard College és egy nagyon, nagyon
szenvedélyes webfejlesztő.
Úgyhogy nagyon izgalmas, hogy beszélgetni veled ma,
hogy te itt vagy otthon figyeli, mintegy reagál, ami ismét
mint mondtam, a jövőben a webes alkalmazások.
>> Így reagál egy webes keretrendszer.
És ahogy már mondtál hogy itt néhány ember,
keretet csak egy készlet eszközök segítségével
hogy rendszerezze és építeni az internetes alkalmazásokhoz.
És internetes alkalmazások, megint honlapok hogy interaktívak, mint a Facebook,
Twitter.com, Instagram.com, mindegy.
>> Szóval Facebook egy webes keretrendszer által kifejlesztett Facebook
Pár évvel back-- reagálnak az.
Ez azóta használják Facebook a mobil alkalmazások
és a web app, Instagram.
Khan Academy egy másik kiemelkedő korai alkalmazója reagálnak.
>> Ez tényleg kezd rendkívül népszerű.
Ha valaha is használni a dolgokat, mint szögletes vagy Gerincét, ez ugyanannak a családnak,
de azóta sokkal felülmúlja a népszerűségük.
Ez a forró új dolog.
Ez nagyon, nagyon hatalmas.
>> És így reagál jó nem csak mint egy web keretet épület felületek.
Ez jó épület webes felületek.
Van még egy dolog, nevű reagálnak Native amely
segítségével épít interfészek Android és iOS
és talán más platformokon a jövőben segítségével ugyanúgy JavaScript kódot.
Lehet használni a pontosan ugyanolyan JavaScript kódot render honlapok,
tétele Android alkalmazások és iOS alkalmazások.
>> Ez egy nagyon, nagyon izgalmas időszak.
Ez egy nagyon, nagyon klassz lehetőséget.
Ez tényleg egy univerzális webes interfész fejlesztési eszköz,
így ez egy nagyon, nagyon Fontos dolog tudni.
És, mint én elmondani az embereknek előtt, ez, azt hiszem,
meg fog változni, hogyan építeni webes alkalmazások örökre.
Szóval ez talán kicsit túlzás, de én Szerintem ez egy nagyon jó dolog tudni.
>> OK, akkor mi van reagálni?
Reagálni egy keretrendszer segítségével Használja építési felületek.
Az interfész, megint, egy weboldalt, ugye?
Tehát itt Instagram.com, felhasználása reagálnak.
>> Reagálnak épül ötlete az alkatrészek.
A komponens egy HTML eleme a szteroidok,
így egy HTML elem, mint egy gombot.
Ez egy bekezdés.
Ez egy fejléc, ugye?
És Instagram fogja használni ezeket, de is használni fogja komponensei reagálnak.
>> Reagálnak alkatrészek feltuningolt HTML elemek
hogy saját viselkedését található bennük.
Tehát, mint egy példát, mi volna Egy idő elem, egy idő összetevő,
amely tartalmazza, mint a időbélyegző, tudod,
profil komponenst tartalmazni fogja a profil kép
és a személy nevét.
Ez lehet egy hasonló számláló, amely számíthat, mint a több embernek tetszik,
és ha rákattintunk, akkor az számának növelése szereti.
A komponens csak egy csomó HTML kód,
van néhány funkció csomagolva belsejébe.
Tehát ez olyan, mint egy HTML elem a szteroidok, ahogy már mondtam.
Tudod, hogy ezeket a komponenseket, és tudod őket össze
új alkatrészek, a Ebben az esetben, egy post komponens,
amely tartalmazza az összes ezt a cuccot.
Ez tartalmazná idő, profil, LikeCounter, talán a megjegyzést
és talán maga a kép.
És így internetes alkalmazásokról most épül azáltal, hogy alkatrészek és fogalmazza meg őket.
Az Instagram takarmány nem más, mint egy csomó hozzászólások egymás után,
Minden hozzászólás nem tartalmaz, mint az idő, Profil, LikeCounter, és így tovább.
Ez olyan, mint egy ház építése.
Nem épít a ház fentről lefelé.
Veszel elemek, így Önnek hogy mint a fürdőszoba.
Te meg a bedroom-- kibír őket együtt, és van egy új alkatrész.
Van egy új házrész.
>> Így reagálnak az összes épül ez a gondolat a komponensek
interaktív, amelyek deklaratív.
Mint te csak azt, amit a profil, és ez teszi.
Ezek alakítható.
Tudod hogy egy időben és egy profilt, tedd őket, hogy valami jobb.
És ők újrahasznosítható, így ha Van forráskódját egy post,
akkor beágyazni, hogy sehol.
>> Akkor beágyazása Instagram dolog a saját weboldalán.
Tudod embed Facebook, például mindaddig, amíg ez használ React is.
Tehát alkatrészek nagyon, nagyon, nagyon erős építőkövei a web
hogy bárhol lehet használni, és tegye együtt, hogy új építőelemeket.
Ez a nagyon-nagyon magas szintű áttekintést.
Szóval, megint, ha van kérdései bármely pontján
a filozófia a reaktor, a kódolás, megállítani, és tudassa velem.
>> OK, így reagálnak jó, mert van egy másik látásmód
meg, hogyan építsenek a webes alkalmazásokat.
Ön valószínűleg hallott MVC, a modell lehet irányítani a CS50 vagy bármi
Más szondázás osztályok használata.
És a legtöbb keretek épül az elképzelést, MVC.
Reagálni nem.
Reagálnak épül az ötlet Az egyirányú adatforgalom
ahogy azt az alábbi táblázatot, vagy grafikai itt.
>> Alapvetően, van egy adatforrás.
És az adatforrás dönti hogyan helyezkedjenek el bizonyos alkatrészeket.
És a komponensek akkor, amikor lecserélik,
azok el fogják mondani adatforrás változtatni.
>> Ahhoz, hogy a Instagram Előfordulhat például, hogy van
listáját utáni tárgyak, mint a egy adatbázisban, vagy valami.
Hogy az adatokat.
És akkor mi poszt alkatrészek lesz, hogy az adatok,
és használja ezeket az adatokat render Egy dolog a képernyőn.
Ez az, amit a nyíl adatokból a komponens,
majd, hogy ugyanazokat az adatokat használják tétele egy csomó alkatrészeket.
>> A Facebook Messenger, a például, amely reagál,
lehet, hogy egy listát üzenetek az adatforrás.
És ez nem tenné Csak az üzenetek listája
hanem a barátlistádban van.
Megvan a olvasatlan üzenetek száma.
Talán azt is teszi a Facebook dolog ez alján Facebook.com.
Ugyanazokat az adatokat egy Egyetlen igazság forrása
és hogy okoz sok komponensek tenni.
És ha egy ilyen komponensek megváltozik,
megy vissza, és megváltoztatja az adatforrás.
>> Küld egy üzenetet, ugye?
Amely megváltoztatja az adatforrás.
Azt olvastam az üzeneteket, így beállított olvasatlan 0.
Amely megváltoztatja az adatforrás.
És észre, hogy mindezek egy nyíl megy vissza ugyanazt az adatot
forrás, hogy tudd, adott adathalmazt,
pontosan tudja, mi a oldal fog kinézni.
Ez determinisztikus.
Tudja, mivel bizonyos adatokat, hogy mi Az oldal fog kinézni.
Ön tudja megjósolni, hogyan fog viselkednek és hogyan mennek a dolgok
dolgozni, ha ők együttvéve.
>> És ha lenne egy millió alkatrészek Itt lenne azonos módon viselkednek, ugye?
Akkor nem lett volna furcsa összefüggéseket.
Egy adat nyújtott egymillió alkatrészeket.
Egymillió-összetevő menj vissza, és szerkessze meg az adatokat.
És így ez nagyon szép.
Építünk, alakítható, könnyen skálázható web alkalmazások.
>> Van egy adatforrás, Az igazság forrása.
Ez azt mondja az összetevők hogyan helyezkedjenek el a lap,
és a komponensek kezelni interakció.
És ha meg akarják változtatni dolgokat, csak menj vissza
és mondd el az adatforrás változtatni.
Van értelme?
Így reagál szól megértése hogyan kell felépíteni egy komponens
és hogyan lehet a komponens lépni a külvilággal.
>> Így a komponens egymásra is a külvilággal
használ egy másik technológia nevű Flux, amely
egy keret, amely egészítik ki a reagálnak.
Nem fogunk beszélni róla.
Fogunk még beszélni, mivel adatok, hogyan tud tenni egy alkatrész?
>> És így reagál nagyon klassz, mert Használhatja bármilyen hátsó akarsz.
Ha van, mint egy Python hátsó, Ha a Python is kiköp néhány adatot,
Reagálni teheti meg.
Ha nincs JS kimenetek Az adatok reagálnak teszi.
Ruby sínek fel adatok, válaszolnak teszi.
>> Így reagál alapvetően egy web view-- egy front end komponensek
bármilyen adatforrás nélkül.
És így megy a adatforrást reagálnak alkatrészek nagyon egyszerű.
Haladva egy kicsit nehezebb.
Használó Flux mint már említettem.
Mi nem fog bele.
Majd inkább a data-to-komponens oldalán.
Így lehet, hogy hűvös, szórakoztató internetes alkalmazásokat.
Ez nem befolyásolja a külvilág most, de ez egy másik történet.
>> OK, így ha itt lennél az én utolsó szeminárium
tudni fogja, hogy az összes kódot mai vita lesz a következő URL-
Itt, bocs, ez az URL itt.
És alapvetően fogunk menni a négy lépést, talán öt,
Valószínűleg nem öt.
Majd mozoghat négy lépésben Az épület egy minta reagál app.
És így a teljes forráskódot minden lépésénél
lesz itt, így ha te követi végig otthon,
nyugodtan elolvassa ezt a kódot.
Ha követi végig itt, fogunk mutatja, hogy a képernyőn,
úgyhogy ne aggódj miatta.
De ha otthon, úgy érzi, szabadon látogasson el a honlapon.
És igen, akkor képesnek kell lennie arra, hogy az összes kódot, amit valaha szüksége van.
Szóval ez egy jó puskát is a jövő kalandjait reagálnak.
Cool, így ha mindenki, aki itt van, és akkor is, ha otthon,
húzza fel ezt a weboldalt, is.gd/cs50react, nincs tőke, nincs aláhúzás, se semmi.
>> Akkor megjelenik egy oldal, amely úgy néz ki, egy kicsit, mint ez.
Ez egy dolog, úgynevezett CodePen.
CodePen egy együttműködési kódolási környezet
amellyel tudok írni ide a kódot, és ez lesz automatikusan elküldjük Önnek.
És így, tudok írni kódot.
Tudok futni kódot itt.
>> A example-- és ha reloads-- lásd Én futás JavaScript kódot az oldalon
itt, és ez lesz jeleníti meg automatikusan egy weboldal
ezzel a JavaScript kódot.
És így ez egy módja számunkra, hogy próbálja ki kódja
igazán gyors anélkül, hogy használja a személyi igazolvány vagy használja a helyi gépen
vagy bármi.
Ez egy nagyon gyors módja, hogy makett és kipróbálni különböző kódot.
>> Így fogok eltart Például kódot, amivel itt.
Fogunk dolgozni rajta.
És ha otthon, akkor lehet húzni ezt fel is.
És én már telepítve Reagálnak itt, így csak
írhatunk ide a kódot, és próbálja azt a saját játszótér.
>> Igen, ha mindenki megnyitni ezt a linket.
Kérek egy remek egyszer van nyitva.
Cool, Cool.
Nincs itt semmi most, de mi fog változni, hogy nagyon hamar.
>> OK, így reagálni egy JavaScript könyvtár, és mint ilyen,
ismereteket igényel JavaScript, amely a webes programozási nyelv.
És ez is használhatók más dolog Most is, de elsősorban az interneten fejleszteni
nyelvet, így ha nem ismeri hogy olvasni egy telek hívott JSforCats.com.
Ez csodálatos.
Meg lehet tanulni JavaScript fél órán belül.
Hihetetlen.
>> Tehát, hogy ez egy olvasmány.
Mi is van egy csomó HTML itt, mert mi tervezése weboldalak természetesen.
Tehát, ha nem ismeri a HTML, nézd meg HTMLdog.com.
Azt hiszem, a tanulás reagálni egy millió alkalommal könnyebb, ha már
tudom építőkövei.
Ha az alkatrészek, hogy ez Könnyen, hogy egy nagyobb alkatrész.
Ez reagálnak nyelv az Ön számára.
>> Így megy előre, és adja ezeket a dolgokat olvasható.
Szünet ezt a videót.
Adj neki egy olvasási ha otthon, ha nem
ismeri a HTML vagy JavaScript
OK, akkor mi megyünk tennie, hogy megyünk, hogy
egy nagyon alap tanulókártya app segítségével reagálnak.
Fogunk egy tanulókártya.
A flip a kártyát oda-vissza.
És mi is van egy lista az összes kártyát, hogy van,
és ha érzel magadban ambiciózus, talán
válthassanak között autók rájuk kattintva.
>> De ez, a csupasz csontok, egy nagyon egyszerű reagál app.
És így ez valójában Nem triviális, hogy végre,
de fogunk mutatni, hogy ha nem ez, ez nagyon, nagyon könnyen kiterjesztése
ha mások segítenek vele.
Így fogunk átmenni négy lépésben semmiből építeni ezt.
>> OK, így a négy lépést, akkor elindul az első lépés.
Az első lépés lesz épület az első komponens.
Mint már mondtam, egy komponens reagál csak egy HTML elem a szteroidok.
Ez meghatározza a HTML és néhány viselkedés, és ez
meghatározza, hogy az emberek kölcsönhatásba léphet vele, hogy hogyan
ez lenne a belső állapot.
Mint egy gomb fogja tudni, mint hogy hány alkalommal ez már kattintott például
és tudni fogja, hogyan feküdt ki magát.
>> Szóval menjünk előre, és építjük első komponens JavaScript segítségével.
Tehát, ha a szintaxis néz ki, fura, Azért, mert ez a fajta van.
Szóval, megint megyünk hogy egy változó nevű
app a kulcsszó hagyja, ami egy változó,
hadd App egyenlő React.createClass.
>> Reagálni egy könyvtár és Az létre osztály működését.
És ez a funkció egy kis kódot, amit
hozhat létre egy új típusú reagálnak alkatrész.
És így React.createClass teszi a komponens,
és ez a komponens képes megtenni dolgokat.
A legfontosabb dolog, amit tehet, render valamit, render függvényében.
>> Ismét, ha ez az index nem nyilvánvaló, hogy te, én ajánlom, menjen a JS macskáknak
és nézd meg.
Az, hogy nagyított elég jól?
Hűvös.
>> Szóval minden komponens kell hogy egy render funkciót.
A render függvény azt mondja, Minek nyomtatni a képernyőn?
De a komponens haszontalan, ha nem
tudom, mit nyomtatni a képernyőn, így akkor szükség van egy render funkciót.
>> Tehát a render dolog, akkor Csak azt kell, hogy visszatérjen néhány HTML.
És mi a jó az, hogy van egy dolog, úgynevezett
JSX, amely egy kiterjesztése JavaScript által használt reagálni.
Ez nézzük írsz HTML belülről Az a JavaScript, amely
hangzik furcsán, amikor először gondolni rá,
de ez teszi sok értelme utána.
Így meg tudjuk csinálni.
Ha még nem ismeri, HTML, tudom, van egy div egy általános célú
konténer cucc.
Mi lehet visszatérni a div, és belülről ez a div, tudjuk be a cuccot.
>> Tehát mondjuk azt akarjuk, hogy tegyék csak egyenes-up tanulókártya most.
A tanulókártya, azt mondanám, lesz egy kérdést és választ.
Tehát ezen belül div, hadd nyomtassa ki a bekezdés
hogy azt mondja question-- Mi a végső válasz az élet, a világmindenség?
És akkor a válasz lesz, természetesen, 42.
>> Hogy nem jött ki jól egyáltalán.
Igen, így alapvetően akkor tényleg levelet HTML belsejében a JavaScript.
És ez lesz kinyomtatható a képernyőn.
Így próbáljuk ki.
>> Szóval megvan a komponens.
El kell mondanunk, hogy reagáljon Az alkatrész a képernyőn
így React.render, így észre, hogy kezelésére app, mint bármely más elemet.
Írunk, hiszen nem volt egy HTML elem.
Mint ahelyett, hogy mint img A kép vagy p bekezdés,
írsz App, így App kezelni, mint egy HTML elem.
Mint már mondtam, ez egy elem a szteroidok.
>> Szóval render App, és hogy ez a hely, hogy tegye azt.
És ez hogyan tudsz mondd meg, hogy hova tegye azt.
Létrehoztam egy egyszerű div a Oldal nevű azonosítóval rendelkező oldal,
és ez az, ahol a elemet fog menni.
>> És nem fogunk futni a HTML.
Alapvetően ez fog kapni betenni ezt az oldalt elem
hogy van a képernyőn.
Szóval ez fut ezt a kódot, és hogy felhívja ezt dolog a képernyőn, szóval itt vagyunk.
Tettünk első reagálnak alkatrész.
>> Ahogyan tehát bedugni, akkor finoman tette egy új típusú komponens, ugye?
Ez az, amit a React.createClass.
És ez az összetevő, amit Mondtam, hogy mit kell tennie.
Amikor ez a komponens a nyomtatható a képernyőre,
kiírja a div A két bekezdés belsejébe.
>> És mit tettünk, tettünk egy új alkalmazás használja a sarokvasra app jelöléssel.
Mondtuk, hogy tedd belül az oldalra elem.
És így is tettem, hogy létrehozta Egy új alkalmazás, amelyeket e sablon.
És akkor azt mondtam, hogy tegye azt.
Tehát azt mondta, OK, app, mit kell kinyomtatni?
Alkalmazás azt mondja, menj ki kell nyomtatni egy div A két bekezdés belsejébe.
És íme, ott a div két bekezdés belsejébe.
Értelme eddig?
>> Szóval, megint az egész kihívása reagálnak csak tudta, hogyan lehet alkatrészeket.
Hogyan lehet a komponensek együtt.
Most, hogy már készül az első alkatrész, menjünk vissza
és hogy komponensek testre szabható.
Szóval tudod, hogyan HTML Önnek adja meg a gombokat osztályok?
Akkor adja meg a horgony a href.
Akkor adja meg a bemenetek típusú, ugye?
Tudod, hogy több egyéni tulajdonságokat az összes elem
hogy érdekessé teszi.
És mi még tehetünk pontosan ugyanaz a dolog.
>> Tehát mondjuk azt akarjuk, app menni tenne bármely kártyát.
Most már csak renderelt egy bedrótozott kártyát.
Tudjuk, hogy csak egy kártya meg tudja csinálni, így vagyunk
megpróbálom, és ezen változtatni, így most hogy mi csak kap némi kártyát.
Ez lesz nyomtassa ki a kártyát.
>> Meg kéne próbálni, és a alkatrészek egy nagyon általános célra.
Szóval így tudtam feladni ez a barátom, és mint a
amit tanulókártya van, Csak táplálja be ide,
és akkor ezt egyedül is.
Tudod, hogy más dolgokat a saját app.
>> De először nézzük megtörni ezt legfeljebb két komponensre,
de szeretnénk külön a kártyát utánnyomás a tényleges alkalmazás része.
Szóval, mit tehetünk mi vagyunk Megváltoztathatja ezt App
hogy CardView, csak egy új nevet a app,
és tudjuk, hogy egy új komponens, az App,
Nem tévesztendő össze a régi App.
Megvan a createClass, és mint a HTML,
akkor fészket reagál alkatrészek belsejében egymással.
>> Tehát ebben render funkciót, függvény visszatérési CardView,
és ez pontosan ugyanaz a dolog.
Nézze meg, miért ez ugyanaz a dolog?
Ahelyett, hogy csak az app, hogy az a div és párosítás belsejébe,
Az alkalmazás teszi a CardView, és a CardView teszi a div és a bekezdésben.
Tehát ez az első példa arra, fészkelő elemek belsejében egymást.
Ennek van értelme?
Szóval, megint van egy CardView elem.
Van app elemek hogy ez nagyobb, mint.
>> OK, így azt akarjuk, hogy CardView-- ha ad egy jó CardView egy bizonyos kártya,
ez lesz nyomtassa ki az Ön számára, nem igaz?
Tehát az első, meg kell, hogy egy kártyát, úgyhogy győződjön meg a kártya objektumot.
Úgyhogy én kártyát equal-- ha minden ismerős,
ez csak a jelölés-készítés objektum a JavaScript.
Ez olyan, mint egy struct C, így tettünk egy kártyát,
és így most már át ezt a kártyát egy tulajdonság vagy attribútum HTML
terminológiát mi kb.
Szóval ezt meg tudjuk tenni, App kártya megegyezik myCard.
>> Tudja, hogy a bemenet, te input type egyenlő szöveg vagy gombot
osztály tel egyenlõ BTN a bootstrap ,?
Ugyanez a gondolat, App kártya equals-- megvan, hogy nadrágtartó here--
App kártya megegyezik myCard, így ez a azt mondja, hogy ezt a kártyát objektumot.
Megyek át, mint egy ingatlan az alkalmazás összetevője.
És ez az app komponens tudja elérni azt, és nem
Érdekes dolgokat vele.
>> Tehát mi app lesz kapnak egy kártyát, így most,
vessünk az app csak ad A kártyát az CardView
önmagában, hiszen mint az alkalmazás nem tudni fogja, mit kell csinálni vele,
ezért most is csak add oda a CardView.
Így fogunk átadni a Ugyanígy, kártya megegyezik,
és így minden egyes alkatrész érheti el dolgok kapott rá.
Ők elérheti az ingatlan hogy volna adni azt
Ezzel a szintaxis, this.props.card.
>> Tehát mi történik itt megvan a myCard objektumot.
Akkor adja át az app segítségével App kártya megegyezik myCard.
Hogy a kártya objektumot kapjon a kb.
Az alkalmazás hozzáférési mint this.props.card.
Ez olyan, mint egy kép tudja, hogy mi a forrása.
>> Ez az alkalmazás tudja, mi ez kártyát van, és meg tudja csinálni dolgokat vele.
Meg lehet csinálni számításokat.
Ez alapján döntenek le róla.
>> Egyelőre azt akartam átadni this.props.card rá a CardView.
Értelme eddig?
Nem lesz több értelme most.
>> OK, így most már itt tartunk CardView.
A CardView, mivel a kártya, kell nyomtassa ki a kérdést és választ.
Most már csak nyomtatott ki néhány bedrótozott kérdések és válaszok.
Meg kell találnunk out-- van szükségünk kérni a kártyát, hogy adtak nekünk
mi a kérdés és a válasz, és majd nyomtassa ki ezt a képernyőt.
>> Így meg tudjuk csinálni itt.
Ebben render begin-- először nem egyenlő.
Szóval mit csinálunk itt tudjuk, hogy a kártyák adott nekünk, hogy egy ingatlant,
jobbra?
Ez adott nekünk, mint egy bemeneti.
Tetszik ez majdnem olyan, mint érvek arra a funkcióra.
A kártya egy érv Szinte erre CardView.
>> Majd kivonat, hogy, és tedd azt a változó kérdés.
Ellenőrizze, hogy a válasz ment A változó választ.
Figyelmeztet, hogy a kártya válaszolni.
És most, hogy van ilyen, nyomtatás helyett, hogy a szöveget,
fogunk kinyomtatni amit adtak nekünk.
>> Tehát ez stuff-- így fogunk oltani Kérdés Válasz.
Lássuk, ha ez működik.
Cool, úgyhogy lépjen át rajta még egyszer, csak hogy biztos.
>> Szóval a kártya kártya célja, és mi adnak, hogy a kártyát a app.
És az app fog tartani a kártyát, és adja meg a CardView.
És ez CardView mondja, ha ad nekem tanulókártya tárgy,
Majd nyomtassa ki a kérdést és a válasz, igaz?
>> Szóval, mit tehetnék, hogy én is Levél ezt a kódot, az első
mint 10 sornyi programkódot, hogy a barátom.
Nem tudta beágyazni a saját alkalmazás.
És amíg ő nem ugyanaz a dolog, mint CardView kártya megegyezik ez,
amíg ő hozta létre a CardView és odaadta a megfelelő információkat,
tudta tenni saját lapját.
És így ez is, ez egy igazán Hűvös módja, hogy építsenek
alkatrészeket használó egymást, ugye?
Ez a kártya, nem tudtam közzé ez CardView az interneten,
és az emberek képesek lennének használni.
Tehát alapvetően, ez olyan, mint az egyik alapfunkciók a C könyvtár.
>> Ez egy olyan funkció, valaki megírta.
Adsz egy bizonyos bemenet.
Ez lesz előállítani egy bizonyos kimenetet.
Téged nem érdekel, hogyan működik belsőleg.
Amíg adsz meg a jobb bemenet, ez lesz a helyes kimenetet.
>> És egy alkatrész lehet gondoltak azonos módon.
Ez olyan, mint CardView a könyvtár működését.
Ha kap némi kártya mint egy ingatlan, akkor az
nyomtassa ki a tartalmát, hogy a kártyát.
Mint ha tudom megváltoztatni a kártyát ahelyett, mintha mi 5 plusz 37,
akkor megfelelően frissíti.
Tehát csak a változó a bemeneti, kap egy bizonyos kimeneti.
Szóval lehet gondolni alkatrészek szinte mint funkciók ilyen módon, ami
akkor össze.
Kapsz bemenet, mint ez CardView mint a bemeneti, kimeneti kapsz.
Ebben az esetben a kimenet a HTML.
Értelme eddig?
Cool, így ismét tulajdonságok hogyan lehet átadni információkat
be és ki a komponensek.
>> OK, így csináljuk meg ezt dolog interaktív.
Most ez milyen unalmas.
Mi [hallhatatlan]?
Lehet nyomtatni néhány ki, de ez minden meg tudja csinálni.
>> Szóval menjünk vissza a Régi kérdés csak most.
OK, így most ezeket a komponenseket unalmas, mert mindent csinálni,
kapnak bemenetet.
Teszik kimenet, ugye?
Ez a fajta unalmas.
Azt szeretnénk, hogy a komponensek kell tudnia, hogy
valamilyen belső állapot, mint emlékszik valamire.
>> Egy tanulókártya számára Például, hogy milyen állapotban
Lehet, szeretne emlékezni tanulókártya?
Milyen átmeneti állapot Lehet akarsz emlékezni
Egy tanulókártya egy tanulókártya app?
Közönség: Mindegy, hogy már tükrözött?
NEEL MEHTA: Ja, persze.
Szóval érdemes tartani követni a maga szembenézni, vagy
Ön oldalával lefelé a kártyát.
A Facebook-on, például, akkor akar emlékezni, ahol a hírcsatorna
Te vagy tetszik, aki profil csinálsz most.
>> A Messenger, mint amit szöveget írja a beviteli mezőbe, ugye?
Ha frissítse az oldalt, hogy elmúlik.
De nem igazán érdekel.
Ez csak átmeneti.
Igen?
>> Közönség: [hallható]
NEEL MEHTA: mint a villám kártya, mint te is látni
A kérdés oldalán vagy a válasz oldalon?
>> Közönség: OK.
>> NEEL MEHTA: Mint egy kétoldali tanulókártya, ugye?
Igen, ezért azt szeretné, Van ez a gondolat a most
Van tulajdonságok, ami olyan, mint bemenet, de az állam, amely ideiglenes, uh,
hol van az oldalon, ugye?
Ismét azt mondta Facebook Messenger, én, mint amelyek fő
Ön által megtekintett Facebook vagy aki profilját, ugye?
>> Ez csak átmeneti.
Fontos, hogy a felhasználó ne mi folyik itt, de frissíteni kell az oldalt.
Ez nem igazán számít.
Szóval ez átmeneti állapot, így mindannyian úgy állapotban.
>> Szóval, megint ott van az állam és kellékek.
Kellékeket bemeneti adott ettől az adatforrás.
Állami olyan, mint alapértelmezett.
Olyan ez, mint a cucc, hogy teszi a dolgot interaktív.
>> Tehát a mi CardView-- vessünk mi CardView-- így volt szép.
Mit fogunk csinálni itt, megyünk megérinteni CardView, és csak CardView.
És így a barátom, aki kapott e, azt nem veszi észre a különbséget.
Nem kellene változtatni minden a saját kódját,
De nekik látják CardView kapott souped fel.
Ez egy szép az egészben alkatrészeket.
>> OK, így a mi CardView, próbáljuk meg nyomon követni, hogy mi fokozatosan fel
vagy lefelé.
Ebben reagál tesszük ezt, hogy először meghatározva az eredeti állapot.
Amennyiben ez a kártya kezdődik?
>> Tehát egy függvény nevű getInitialState működni, és visszatérünk egy tárgy.
Ez az objektum tartalmaz néhány állam, és az állam csak egy kulcs-érték párt.
Mint instruct, van egy kulcsot és egy értéket, akkor, mint név egy húr.
>> Ebben az esetben, mondjuk előtt igaz.
Ez azt mondja, hogy van egy állapot.
Ennek egyik eleme az állam egy attribútum nevezett első.
[Hallható], így alapesetben mi vagyunk az első a kártya,
és meg tudjuk változtatni ezt ahogy flip a kártyát.
Van értelme?
>> OK, így tehetik, most vagyunk mutatja az a kérdés, és a válasz.
Most mit kell tennünk A mutatják a kérdés
ha mi vagyunk az első a kártyát, így A válasz az, hogy a kártya hátoldalán.
Ezért van minden, hogy A kártya interaktív.
Így próbáljuk meg ezt itt.
Nos, először csak, hogy egy változó.
Kérhetünk most this.state.front.
Mi hozzáférés ál- azonos vagyunk hozzáférést kellékeket, így this.state.front.
>> Ha mi vagyunk elöl, majd a szöveget van this.props.card.question.
Ha már itt tartunk az első a kártyát, megyünk próbálni, és megragad
A kérdést a kártyáról.
Ellenkező esetben, ha mi vagyunk a hátán A kártya, mit tegyünk?
>> Közönség: A válasz?
>> NEEL MEHTA: Igen, így szöveget egyenlő this.props.card.answer.
De ha azt veszi észre, mi használ az állam, hogy a döntést
mert most a komponens egy kicsit más
alapján le, hogy ezek kölcsönhatásba vele.
Tehát ahelyett, hogy kinyomtatja ezt, akkor csak nyomtassa ki a szöveget.
Cool, így most, mint látod, látjuk csak az a kérdés.
És ha én változtatni az állam itt manuálisan elöl hamis kapunk 42 vissza.
>> Tehát, újra, ez a komponens saját állapotát.
Mint egy gombot sem tudja, hogy ez nem nyomta-e vagy sem,
ez a dolog, tudja, mi a az első vagy a hátsó.
Alapértelmezésben ez az első.
És akkor, ha ez az első, akkor nyomtassa ki a kérdést.
Ha ez a hátsó, akkor nyomtassa ki a választ.
Tehát, ismét, az információt adott ugyanaz.
Csak úgy néz ki a különböző alapján, hogy hogyan programozni.
Tehát, például a Facebook Messenger, akkor is, ha kap ugyanazt az adatforrást,
ez eltérhet mert az állam más.
Ön éppen egy más ember üzenetét.
>> OK, így ez mind szép és jó, de most mi van valójában
hogy képesek legyünk változtatni, hogy a kártya első vagy hátsó.
Tudjuk ezt hozzáadásával egy flip gombot, egy gombot a kártyán
majd fordítsa meg a kártyát, ha ez [hallhatatlan].
Tehát tegyük hozzá egy gombot itt, ebben a gombra, és ezt a gombot fogja mondani a flip.
>> És most így, akkor nem csinál semmit.
Csak úgy néz ki szép.
Mit tehetünk, tudunk hozzá egy kattintással handler, onClick egyenlő this.flip,
és mi határozza meg a flip később.
De alapvetően, onClick egy olyan funkció
meghívásra kerül, ha a felhasználó rákattint.
>> Tehát a gomb tudni ha ez már kattintott.
Ment ez már kattintott, akkor fordítsa meg a kártyát.
Ez olyan, mint a pizza srác.
Te, mint, rendben, ha valaki hív, én szállít pizzát, ugye?
>> Regisztrálja ezt hallgatót.
Te figyelj, egy esemény.
Ön kap hívják, és amikor a esemény történik, akkor tennie kell valamit.
Kapsz pizzát.
Ebben az esetben, ha éppen kattintott, flip a kártyát.
>> És ezért meg kell határozni a funkció, amely megfordítja a kártyát,
így fogunk írni, hogy jobb Itt, flip funkció.
És így mit gondolsz a flip fog csinálni?
Ez megint csak meghívásra kerül, ha mi kattintson flip gombra.
Mit tegyen a funkció a flip csinálni?
>> Közönség: Változás this.state.front az igaz, hogy hamis, hamis, hogy igaz.
>> NEEL MEHTA: Igen, így megtesz minden this.front is-- az első állam.
Vegyük az első állam, ha igaz, hogy hamis.
Ha ez hamis, hogy ez igaz, ugye?
Úgyhogy próbáljuk ezt.
>> Nem tudod megváltoztatni állam csak ennek révén this.state.
Ezt nem teheti ezt.
Ezt nem tehetem.
Ki kell használni a funkciót nevű this.setState.
>> Szóval lehet mondani this.setState előtt vastagbél ezt is, amelyben szintén a felkiáltás:
pont az ellenkezőjét.
Azt hiszem, ha ez az. state.front Igaz, hogy akkor viszont hamis.
Szóval megbeszélünk az állam true-ról false.
Ha ez hamis, akkor állítsd false true.
>> Csak észre, hogy mi meg és kap enyhén másképpen, és így próbáljuk meg.
Bada Bing, nézd meg ezt.
A flip gomb ilyenkor kapcsolja a elölről hátrafelé állapotban.
>> És így itt, ahol látsz egy kis varázsa reagálnak.
Mint azt soha nem mondta azt, hogy újra tegyék.
Mi soha nem mondtam, hogy dolgozza át semmit.
Ha ezt nélkül reagál, jobb lenne, ha
még az alábbiakra: szeretem, ha a Flip gombra kattint,
azt kell mondanom, hogy manuálisan újra tehetik, igaz?
>> Reagálnak nagyon klassz, hogy ha hogy ez egy bizonyos állami és tulajdonságai,
akkor mindig render pontosan ugyanaz a dolog.
És amikor azt valaha is változtatni az állam és a tulajdonságok,
reagálnak csak újra teszi az egészet.
Úgy tudja, hogy van egy Egy-egy levelezés
az állam és a paraméter és a HTML.
Tehát, ha bármelyik ezek változások révén egy sor állam,
ez meg fog változni, hogy a díjazás újra renderelt.
És így alapvetően reagálnak, mint vár, hogy változtatni.
>> Amikor megváltozik valami, ez lesz újra tehetik az egész oldalt.
És ha úgy hangzik, nem hatékony, azért, mert ez lenne,
de reagálni használ semmit úgynevezett árnyék DOM.
Ahelyett, rajz közvetlenül az oldalon, akkor tartja a virtuális HTML fa emlékére.
>> Tudja, HTML, mint egy fa, mint egy hierarchikus adatszerkezet.
Úgy tartja egy hamis fa memória, és amikor frissíti az oldalt,
ez lesz felhívni egy másik hamis fa, és akkor számítani
Milyen változásokra van szüksége ahhoz, hogy a oldalt, hogy a két fa egyenlő.
Tehát alapvetően, hogy gyakorlatilag újbóli teszi sok.
És akkor csak tetszik megváltoztatja a oldal kis csíp, ha szükséges,
így nagyon, nagyon, nagyon hatékony.
>> Tehát alapvetően reagáló amikor csak változtatni valamit,
ez lesz újra feldolgozott oldalt virtuálisan.
Ez lesz kitalálni, hogy mit kell tennem, hogy megváltoztatni, hogy az igazi oldal tükrözik
A virtuális oldalt, és megteszem.
Ez a virtuális DOM.
Ez az egyik legnagyobb jellemzői reagálnak.
>> Ennek van értelme?
Bármi kérdés?
Igen?
>> Közönség: Hogyan működik hasonlítsa még az MVC
hogy beszéltünk előtt, mint a források.
>> NEEL MEHTA: Igen, a kérdés hogyan viszonyul MVC?
Kérdezett források.
Nos, beszéljünk arról, hogyan működik.
>> Ebben MVC, azt frissíti a modellt.
Ebben az esetben mi volna a minta.
A kilátás lenne a flip-gombot, és a vezérlő
lenne flip funkció.
Így a néző azt mondja a vezérlő flip telefont.
Flip azt mondja a modellt megváltoztatni, ugye?
>> És így, ha nem egy MVC, akkor hallgatni a modell változtatni,
és akkor újra tehetik a nézetet kell.
Vagy csak meg kell tetszik a kontrollerrel.
Várja meg, amíg a modell változtatni, majd válogathat egy részét, mint egy dolog,
változtatni.
Itt van egy dolog, de egy nagy app,
szeretned kell emlékezni, mit A változás minden egyes helyen,
így ez egy kicsit bosszantó.
És így reagál szép mert van egy árnyék Dom.
Ez engedheti meg magának, hogy csak átírni az egészet.
Nem kell, hogy szelektíven mint tudod mit frissíteni.
>> A Facebook-on, ha tetszik kap egy új üzenetet, az MVC,
azt kell emlékezni, OK, változtassa meg a dolgokat
a tetején a oldal, az üzenet ikon.
Szintén pop egy új ablak alján.
Is, hogy egy új dolog az ablakba.
Is játszani egy hangot.
>> Ez egy csomó dolgot kiment egyidejűleg.
És így, ha nem Van egy árnyék Dom, jobb lenne, ha
meg kell csinálni, hogy kézzel, mert nem tudsz megszabadulni a teljes oldalt.
Nem engedheti meg magának, hogy, ezért van, megváltoztatni minden dolog kézzel,
ami igazán bosszantó MVC.
>> Tehát annak érdekében, hogy takarékos, ők szelektíven
frissítse az oldalt, amely hatékony, hanem a zavaró.
Ebben reagál, mert az Árnyék Dom, kapsz két dolgot ingyen.
Ez a hatékony, mert Az Árnyék Dom.
A szűk frissíti az oldalt.
Ez nem csinál a fa manipuláció.
Kapsz hatékonyságát.
Ön is kap a könnyű használat miatt ha csak átírni az egész oldalt,
de te csak tudom, minden rendben, a dolgok lesznek az oldalon valahol.
Lehet, hogy egy másik helyen, de ez lesz az oldalon, ugye?
Szóval csak újra renderelt Az egész dolog szinte,
és lehet, hogy egy pár változtatásokat maga az oldal.
>> Szóval, megint az MVC akkor kell választania
a könnyű használat és a hatékonyság, és reagálnak, akkor kap mind.
Tehát jobb.
Van értelme?
Szilárd.
>> OK, tehát nézzük beszéljünk egy kicsit a 4. lépést,
hogyan tudunk beágyazni alkatrészeket.
Így van ez most.
Megvan a jó kis gombot.
Mi lehet fordítsa vissza és oda, és ez minden, hogy nem.
Tegyük fel, hogy szeretnénk Van egy másik összetevője.
Mondjuk mi tanulókártya app kell tartalmaznak egy listát az összes kártya
hogy van, úgy, hogy azt jelenti, kell egy másik összetevő.
Nos, talán ez egy lista nézet.
Csináljunk egy listát véli, hogy egyeztethető össze a CardView,
és ez a lista és CardView tetszeni fog együtt dolgozni.
És akkor is össze őket, hogy a mi app az Ön számára.
>> Tehát az első, kössünk pár kártya van.
Mondjuk, hogy milyen lap?
És csak azért, hogy ne kelljen untatni beírásával,
Csak megyek másolni innen.
És így fogok nem hogy ez csak egy kártyát.
Megyek, hogy ez egy sor kártyákat.
Tehát először a apps fog törni most.
Rendben, akkor megyünk, hogy ez képes kezelni több kártyát.
Tehát először megyünk, hogy ez nem Csak egy kártyát, de egy sor kártyák,
mint egy listát a kártyákat.
És ebben az esetben, már hárman.
>> Rendben, így app lesz, hogy egy listát kártyák,
és ez lesz eldönteni, melyik egy mutatni a CardView.
A CardView csak render egy kártyát, de az alkalmazás
kap egy listát az összes kártyát, ugye?
>> Tehát amikor kitaláljuk, egy kártyát, hogy a CardView,
hogyan tippelni lehet, hogy képes dönteni arról, hogy melyik kártyát
megmutatni?
Ahhoz, hogy te egy csipetnyi, hogy átmenetileg Nem lesz megtekintésére egy bizonyos kártyát.
Ha frissítse az oldalt, akkor csak menj vissza az első kártyát.
Ez rendben van, mert ez átmeneti.
Milyen technikával lehet azt használni?
>> Közönség: Lehet, hogy egy változó így, mint te kellett előtt.
Igaz ez, amit lehetett Van jelenlegi kártya értéke 1?
>> NEEL MEHTA: Igen, így szeretné, hogy az állami, ugye?
Akkor használja állam a komponens, hogy kitaláljuk,
melyik kártyát akarunk kapni.
Mint van egy listája az összes kártyát, akkor
felhasználható állami kitalálni az egyik az első kártya,
második kártya, a harmadik kártya, és így tovább.
>> Tehát egy app, így egy app kap egy van getInitialState funkciót,
getInitialState függvény visszatérési.
És mi csak annyit, activeIndex 0.
Tehát most mi app megvan a saját állapotát.
>> És így most vakolaton, hogy kitaláljuk, egy kártyát, nézzük csak megy a tömb
és megragad a dolog, hogy az indexek.
Válassza ki a kártyát egyenlő this.props.cards this.state.activeIndex.
Szóval, mint látod itt, a kellékeket és az állam valóban együtt dolgozni.
Tehát most, hogy már a activeCard, fogjuk nevezni activeCard,
és lássuk, hogy is működik ez.
[NEM HALLHATÓ]
>> Ó, ez egy szöveges hibát.
Ah.
>> Cool, aha, így most voltunk vissza hogy hol voltunk korábban, igaz?
Ugyanaz a régi programot, kivéve Most tudjuk támogatni
a kártyák listáját, nem csak egy-egy kártyát.
És most megint, ha megváltoztatjuk a activeIndex, mehetünk 0-1,
és most, hogy a második kártya, és aztán mentünk 0.
Tehát itt egy új feltuningolt változata a.
>> OK, így most vessünk egy listát véli, hogy Kiállítások összes kártyát a programban,
így fogunk tenni egy új komponens, az listview.
Hadd listview egyenlő react.createClass.
Így szeretnénk tenni egy rendezetlen listában egy lista elem minden kártya.
És így van egy csomó kártyát.
Szeretnénk egy lista elem minden kártya, igaz?
Tudnánk csinálni egy for ciklus vagy valamit, hogy egy új lista elemet.
De ahogy csinálod Reagálnak, használjon egy dolog, úgynevezett térképet.
Térkép egy eszköz vagy egy funkció használatakor hogy minden elem, fut néhány funkciót,
úgy visszatérési értéke, és ad, hogy vissza.
>> Így példaként, mi van a tömbben 1, 2, 3.map function-- és ez a
a rövidítés a function-- x nyíl x-szer x.
Ez azt mondja, hogy minden szám 1, 2, 3, vedd el.
Tér, és add vissza.
Szóval mit gondolsz 1, 2, 3.map x megy x-szer
x adja vissza a megadott Ez a funkció
futtathatjuk minden eleme a tömb.
>> KÖZÖNSÉG: 1, 4 9?
>> NEEL MEHTA: Ja, 1, 4, 9 mert te 1 alkalommal 1.
Hogy megadja neked egyet.
Ez az első elemet.
>> 2-szer 2 4.
Ez egy másik elemet.
3-szor 3 9.
Ez egy harmadik elem.
Van értelme?
Tehát térképen van egy technika Használja a funkcionális programozók,
Az új stílus programozási tenni valamit
minden eleme a listán.
És így ez ismerősen hangzik.
Van egy lista a kártyákat.
Azt szeretnénk, hogy egy lista elem minden Egy, ezért most is csak használni térkép itt.
Majd azt mondjuk, hadd lista egyenlők this.props, kártyák, térkép.
>> És így kapnak egy kártyát, mi vagyunk fog generálni Listaelemre
azzal a kártya tartalmának oldalán is.
Mondjuk úgy, hogy azt akarjuk, hogy ki A kártyák kérdéssel card.question.
Szóval ez a lista tartalmazza tömb LI és listatételeket
ahol van egy lista tétel minden kártya,
és amely tartalmazza a kártyákat kérdés.
Van értelme?
>> Cool, így most nézzük ténylegesen nyomtatni, hogy ki.
Szóval térjünk vissza a ul.
Belül, hogy a rendezetlen lista, akkor csak kibír a teljes lista
hogy adtak nekünk.
Hűvös.
>> Rendben, így most ez a lista nézetben működik, csak találni.
Bármilyen kérdésed van a lista nézetben?
Van egy csomó kártyát.
Azt, hogy egy lista elem minden kártya.
És akkor tedd be őket egy rendezetlen listát, és adja vissza.
Tehát most hadd járjon így beágyazni e bennfentes a mi app,
így meg tudjuk csinálni, és listáját.
Milyen érv Átadják a listára véleménye?
Milyen tulajdonságokkal tudjuk, hogy ez?
Ne feledje, ha adsz ez egy csomó kártyát,
ez lesz, hogy a listát megtekintheti azok számára kártyák.
Tehát mi átadjuk itt az érv?
Közönség: A listát a kártyák?
NEEL MEHTA: Igen, így kártyák egyenlő this.props.cards, ugye?
És így az egyetlen probléma van arra, hogy csak
fordult egy felső szintű elem teszi, így megvan a csomagoljuk be egy div.
Ez furcsa.
Tehát lássuk, hogy.
Működik ez?
>> Ja, tessék.
Tehát most van egy lista kártyák az alján,
és akkor mi van a CardView magát a tetején,
és hogy a flip között a két oldalán a kártyát.
Most ennek értelme, hogyan csinálta?
Igen, így ismét van két komponens.
Az első komponens nyomatok ki minden kártyát a listán.
Ez a lista nézet.
És a második komponens kiírja, hogy csak kártyával.
Ha adsz neki egy bizonyos kártyát, akkor az nyomtassa ki információt, hogy a kártya
és hagyja, flip oda-vissza.
>> Tehát ha azt akarjuk, megpróbálhatjuk beszélni szólnál hozzá néhány új funkciót, hogy ez az.
Ellenkező esetben beszélhetünk egy kicsit mintegy a sebessége reaktor,
vagy mi lehet válaszolni kérdése lehet, hogy
mert ezek mind a mag részeinek A reagálni, hogy szeretnék beszélni.
Mi lehet menni előre.
Mi lehet válaszolni a kérdésekre.
Amit csak akarsz.
>> Közönség: Lehet használni JSX normál JavaScript?
Vagy az, hogy valami, jött a [hallhatatlan]?
>> NEEL MEHTA: A kérdés az, használja JSX normál JavaScript?
A válasz: igen.
JSX csak egy módja tart a JavaScript amely HTML belsejébe,
és lefordítja a JavaScript Nincsenek HTML belsejébe.
Tehát észre hogy-- így észre itt.
Ez úgy néz ki, mint te, mint a div és van a cucc belsejében is.
>> Hogy lefordítja a JavaScript mint generál ugyanezt.
Azt hiszem, amit mondok, hogy JSX csak egy szintaktikai, mintha
Egy elõfeldolgozót JavaScript sokat mint a PHP egy elõfeldolgozót HTML.
JSC egy preprocesszor A JavaScript amely lehetővé teszi,
teszel HTML belsejét a JavaScript.
És így ha a megfelelő transzformátor ami egy dolog, úgynevezett [hallható],
amelyek át fogják alakítani.
A jobb preprocesszor, ez lesz engedhetem meg.
>> Közönség: [hallható]
NEEL MEHTA: Általában nincs szükség hogy HTML belsejében JavaScript
hacsak te műved reagálnak.
De tudod csinálni egyébként.
Igen?
>> Közönség: Azt hiszem, leírta Reagálnak
mint funkcionális programozási nyelv.
Már tanulás C CS50.
C is egy funkcionális nyelv?
NEEL MEHTA: Tehát a kérdés kb funkcionális
versus egy másik dolog, úgynevezett Rendkívüli vagy eljárási programozás.
Van kétféle programok népszerűek.
Az egyik az úgynevezett eljárási, amely szól, mint csinál parancsokat,
és egy funkcionális, amely minden, arról hogy funkcióit, és amelynek
bemeneti és kimeneti e.
React egy funkcionális paradigma.
C egy nagyon eljárási paradigma.
>> És mint például C például Ön ezt nem teszi meg deklaratív módon
Az így a program, igaz?
Meg kell, hogy mondjam, nyomtassa ki ezt.
Ezeket az adatokat módosítani szerkezetet.
Nyomtassa ki ezt.
Ez mind a parancsokat.
>> Ebben reagál, ott nem hogy sok parancsokat.
Ez az egész arról szól, hogy összetevőket össze.
Olyanok, mint a funkciók.
Van, mint egy függvény nevű CardView,
amely egy olyan funkció, hogy a bemeneti, kimeneti,
és így reagálnak minden erről a filozófia
minket having-- van adat.
Ön vezessük át ezt a algoritmus, és ez lesz
kimenet HTML hogy Csak a nyomtatott oldal,
és ezért van, hogy építeni apránként.
>> Tehát felhívni a metafora, hogy mi Azt mondtam, tudod, hogyan
a Facebook-on, ha kap egy üzenetet, és úgy dönt, milyen alkatrészeket frissíteni,
ez az eljárási.
Ez rendkívül fontos, ugye?
OK, kaptam egy üzenetet.
Változtassunk számla van.
>> Nézzük pop ablakban itt.
Változtassunk számla van.
Rajzoljunk ez itt.
Ez egy procedurális megközelítést.
>> Ez az, amit a dolgok, mint szögletes, Boost, Gerinchálózat, más keretek között használja.
Reagálnak működőképes.
Ez egy egészen más módon, A gondolkodás a dolgok.
Tart ez az ötlet, vessünk funkciók vagy algoritmusok, hogy fogsz
add adatokat.
Ez lesz kiköp, amit kell lennie, és a számítógép
vigyázni fog kimérése.
Nem kezelni magad.
Van ennek egy kis értelme?
Igen?
>> Közönség: Egy funkcionális nyelv, minden úgy történik egyszerre?
>> NEEL MEHTA: Nem, a dolgok rendben.
Például: itt van még rendelni, de ez nem
történnek annak érdekében, mint ajánlom, parancs, parancs.
Előfordul, hogy a funkciót ad kimenetet.
Tedd, hogy egy másik funkció.
Tedd, hogy egy másik funkciót, egy másik funkció.
>> Ha igen CS51, akkor megtanulják a funkcionális programok
Egy kicsit ki a hatálya alól.
De alapvetően, mitől Reagálnak hűvös nemcsak
az egyirányú adatáramlás és a virtuális Dom,
hanem ez a gondolat a funkcionális programozás.
És funkcionális programozás nagyon egyszerű komponálni, és klassz dolog ki,
és ez nagyon könnyű azt gondolni, kb és az értelem kb.
Szóval ez egy jó sorsolás a reagálnak.
Van még kérdés?
Igen?
>> Közönség: Hm, miért használd szemben a var?
>> NEEL MEHTA: Szóval a kérdés az, Miért használ hagyja helyett var?
Ez egy dolog, úgynevezett ES6 vagy ECMAScript 6.
Ez az új verzió a JavaScript.
Van egy csomó technikai okok miatt, De hadd van egy jobb változata var.
>> Ez hogyan állapítsa változók.
Használhatja hagyja.
Használhatja var.
Legyen egy csomó technikai reasons-- meg tudjátok nézni őket
akár later-- számára miért jobb.
Alapvetően ES6 pár szép Új szintaxis, néhány új funkciót
az első helyen a régi JavaScript.
>> Tehát van, mint öt perc alatt.
Csak azt akartam beszélni még egy dolog igazi böjt.
Ha bármilyen kérdése van, beszéljünk róla után.
De csak, hogy ez lesz fogott a kamera, én csak
szeretnék beszélni egy kicsit arról, hogyan ténylegesen használni reagálni az alkalmazások.
>> Ha megy itt, Facebook.GitHub.IO/react,
Ez a honlap az reagál, és megmutatom, hogyan tudod valójában használ
Reagálni az oldalain.
Alapvetően ez egy kicsit bonyolult próbál telepíteni reagálnak.
Ez nem olyan egyszerű, mint csak húzza és vidd a JavaScript ott.
>> Van, hogy a transzformátor létre, amely, mint korábban,
viszont a JSX be A normál JavaScript.
Meg kell dolog, hogy majd fordítanod ES6 a normális kerékvágásba.
JavaScript van egy csomó mozgó részek annyit kell tennie, ezért van egy dolog,
nevű Yeoman, Yeoman.io.
És ez egy parancssori eszköz, akkor segítsen Állvány ki a reagálnak
projektek könnyen.
>> Szóval lehet olvasni erről Később, de vannak eszközök
hogy Yeoman kínál.
Ők Hagyom, hogy hozzon létre egy reagálnak app mindent épült.
Tetszik ez lesz építettünk a, alkatrészek épült.
Ez lesz a transzformátor-ben épült.
Nekik van egy csomó klassz cucc beépített automatikus
segítségével ezek a dolgok úgynevezett generátorok.
>> Szóval olvastam erről, ha úgy tetszik.
Csak megy Yeoman, Y-E-O-M-A-N, és megtalálja generátorok, mint ezek.
És a termelőkkel, mint Ezek csak szeretne egyet
van egy pár parancssori parancsok.
Ez lesz Állvány végre teljes reagál alkalmazás az Ön számára.
Ez kapsz minden manuális csővezetékek, és röfögés munka az Ön számára,
és ez miért csak összpontosítani az csak írásban reagálnak.
>> Tehát alapvetően épít Reagálni az alkalmazás nem triviális.
Ez a vezetékes mind együtt, de van olyan eszközök, megcsinálom neked.
Tehát ha azt szeretnénk, hogy egy reagálnak app, próbáld meg így.
Ha csak azt, hogy a kísérlet, akkor próbálja ki ezt a CodePen
mert ez CodePen van minden reagálnak vezetékeket.
Megtettem mindent elvégez Ön már.
>> Tehát ha azt szeretnénk, hogy győződjön meg, mint egy termelést, hogy kiadja reagál app,
próbáljuk ki ezt a generátorok.
Ha csak akar játszani körül, ez gyakran érdemes csak
mint megpróbálja játék körül CodePen itt.
Jól hangzik?
Hűvös.
>> Szóval ez minden, amim van.
Ismét, az összes kód és példák lesz ezen a honlapon van.
Szóval, megint nem beszéltünk itt sokkal szintaxis reagál,
hanem, hogy megtaláljuk azokat kis szintaktikai részleteket,
ez mind elérhető lesz ezen a honlapon van.
>> Szóval én azt javasolnám, mint megtenni az első lépést.
Tedd be a CodePen.
Próbálja azon dolgoznak, hogy azt, hogy a második lépésben.
Van egy negyedik lépés, és csak hol kapsz belőle.
>> Bármilyen további kérdése van, ellenőrizze arra, hogy az oldal, vagy írjon nekem.
Ez az én e-mail.
De én szeretnék segíteni Önnek bármilyen kérdése lehet, hogy körülbelül reagálnak.
Szóval, igen, ez minden, amim van.
Köszönöm minden szépen Figyelnek vagy látogatásáért.
És én viszem bármilyen kérdése lehet, hogy ezek után már.
Szóval köszönöm mindenkinek nézni.