>> [Muzika]
>> NEEL Mehta: Këtu ajo shkon.
>> E pra, të gjithë, të mirëpritur për web Apps të ardhmen me reagojnë.
Kjo është CS50.
Emri im është Neel.
Unë jam një AT për CS50 dhe një i paedukuar mjaft në Kolegjin dhe një shumë, shumë e Harvardit
zhvilluesi i pasionuar web.
Kështu që unë jam shumë emocionuese për të të jetë duke folur me ju sot,
nëse ju jeni këtu apo në shtëpi shikuar, për të reaguar, që është, përsëri
siç thashë, e ardhmja e aplikacioneve web.
>> Pra Reago është një kornizë web.
Dhe si unë kam qenë duke u thënë për disa njerëz këtu,
një kornizë është vetëm një grup i mjeteve ju mund të përdorni
për të strukturuar dhe për të ndërtuar app tuaj web.
Dhe Apps web janë, përsëri, faqet e internetit që janë interaktive si Facebook,
Twitter.com, Instagram.com, çfarëdo.
>> Pra Facebook është një kornizë web që është zhvilluar nga Facebook
nja dy vjet back-- reagojnë është.
Ajo është që përdoren në Facebook në aplikacionet e tyre celular
dhe web app, Instagram.
Khan Academy është një tjetër adoptues shquar në fillim të reagojnë.
>> Ka qenë me të vërtetë duke u jashtëzakonisht popullor.
Në qoftë se ju përdorni ndonjëherë gjëra të tilla si këndor apo Shtylla kurrizore, kjo është e të njëjtës familje,
por ajo ka që nga larg lë pas popullaritetin e tyre.
Kjo është gjëja e nxehtë të ri.
Është me të vërtetë, me të vërtetë i madh.
>> Dhe kështu Reago është e mirë jo vetëm si një Korniza web për ndërtimin interfaces.
Është e mirë për ndërtimin e web interfaces.
Ka edhe një gjë quajtur Reago Native që
ju lejon të ndërtuar ndërfaqet për Android dhe iOS
dhe platforma ndoshta të tjera në të ardhmen duke përdorur vetëm njëjtin kod në JavaScript.
Ju mund të përdorni të njëjtën gjë e saktë Kodi JavaScript që të merr faqet e internetit,
që të merr Apps Android dhe iOS Apps.
>> Është një kohë shumë, shumë emocionuese.
Kjo është një mundësi e vërtetë, me të vërtetë cool.
Është me të vërtetë një web universale mjet zhvillimi interface,
kështu që është një shumë, shumë Gjëja më e rëndësishme të dini.
Dhe, ndërsa unë u thënë njerëzve para, kjo, unë mendoj,
do të ndryshojë mënyrën se si ne të ndërtuar Apps web përgjithmonë.
Pra, kjo është ndoshta një hiperbolë pak, por unë mendoj se kjo është një gjë shumë e mirë për të dini.
>> OK, kështu që çfarë është reagojnë?
Reago është një kornizë që ju mund të përdorin për ndërtimin ndërfaqe.
Një interface është, përsëri, një faqe interneti, e drejtë?
Kështu që këtu është Instagram.com, përdor reagojnë.
>> Reagojnë është ndërtuar mbi Ideja e komponentëve.
Një komponent është një HTML element në steroid,
kështu një element HTML është si një buton.
Kjo është një paragraf.
Kjo është një kokë, e drejtë?
Dhe Instagram do të përdorë këto, por ajo do të përdorë komponentët e reagojnë.
>> Reago komponentët janë souped-up elemente HTML
që kanë sjelljen e tyre përmbante brenda tyre.
Pra, si një shembull, ne mund të kemi një element kohë, një komponent kohë,
e cila do të përmbajë si vula kohë, ju e dini,
një komponent Profili i cili do të përmbajë imazhin profilin
dhe emri i personit.
Ajo mund të ketë një kundër si, e cila mund të mbështeteni si numri i pëlqen,
dhe në qoftë se ju klikoni mbi atë, ajo do të rritur numrin e sërën.
Një komponent është vetëm një bandë e kodit HTML që
ka disa funksionalitetin përfundoi në brendësi të saj.
Pra, kjo është si një element HTML në steroid, siç kam thënë më parë.
Ju mund të merrni këto komponente, dhe ju mund të vënë ato së bashku
për të bërë komponente të reja, në ky rast, një komponent pas,
e cila përmban të gjitha stuff këtë.
Ajo do të përmbajë kohërave, Profile, LikeCounter, ndoshta komenti
dhe ndoshta imazhi vetë.
Dhe kështu Web Apps janë ndërtuar vetëm duke marrë komponentëve dhe vënien e tyre së bashku.
Një ushqim Instagram është asgjë më shumë se një bandë e postimeve njëri pas tjetrit,
çdo post përmban si koha, Profili, LikeCounter, dhe kështu me radhë.
Kjo është lloj i si ndërtimin e një shtëpi.
Ju nuk ndërtuar të shtëpi nga lart poshtë.
Ju merrni components-- ju marrë si banjo.
Ju merrni bedroom-- ju rrinë ato së bashku, dhe ju keni një komponentë të re.
Ju keni një pjesë të re të shtëpisë.
>> Kështu reagojnë është ndërtuar rreth kjo ide e komponentëve që
janë interaktive, që janë deklarative.
Ashtu si ju them vetëm atë që një Profili është, dhe ai e bën atë.
Ata janë composable.
Ju mund të marrë një kohë dhe një profil, vënë ata së bashku, të bëjë diçka më të mirë.
Dhe ata janë reusable, kështu që nëse ju kanë kodin burim për një post,
ju mund të embed atë kudo.
>> Ju mund të embed një Instagram gjë në faqen tuaj.
Ju mund të embed në Facebook, për shembull, për aq kohë sa ai përdor Reago si.
Pra, komponentët janë me të vërtetë, me të vërtetë, me të vërtetë blloqe të fuqishme të ndërtimit të web
që mund të përdoret kudo dhe vënë së bashku për të bërë blloqe të reja të ndërtimit.
Kjo është shumë, shumë pasqyrë të nivelit të lartë.
Pra, përsëri, në qoftë se ju keni ndonjë pyetje në çdo pikë
për filozofinë e reaktorit, të coding, për të ndaluar mua, dhe më lejoni të dinë.
>> OK, kështu që të reagojnë është e ftohtë për shkak të ka një mënyrë të ndryshme të kërkim
se si ju të ndërtuar Apps web.
Ju ndoshta keni dëgjuar të MVC, a Modeli ju kontroll në CS50 ose çfarëdo
tjetër klasa probing që ju përdorni.
Dhe kornizat shumica janë ndërtuar rreth idesë së MVC.
Reago nuk është.
Të reagojnë është ndërtuar rreth idesë e unidirectional rrjedhës së të dhënave
siç shihet nga kjo tabelë ose grafik këtu.
>> Në thelb, ju keni një burim të dhënave.
Dhe burimi i të dhënave do të vendosë si për të hedhur jashtë komponente të caktuara.
Dhe komponentët do të pastaj, kur ata të ndryshojnë,
ata do të tregojë burimi i të dhënave për të ndryshuar.
>> Për të përdorur Instagram shembull, ju mund të keni
një listë të objekteve të postës si në një bazë të dhënash apo diçka.
Se të dhënat.
Dhe pastaj komponentët tanë postare do të marrë që të dhënat,
dhe të përdorin që të dhënat që të merr një gjë në ekran.
Kjo është ajo që shigjeta nga të dhënat në komponent është,
dhe pastaj që të njëjtën të dhënave është përdorur që të merr një bandë e komponentëve.
>> Në Facebook Messenger, për shembull, e cila është reaguar,
ju mund të keni një listë të Mesazhet si burim tuaj të të dhënave.
Dhe kjo nuk do të bëjë vetëm lista e mesazheve
por edhe lista e miqve që ju keni.
Ju keni numërimin palexuar.
Ndoshta edhe bëjnë gjënë Facebook që është në pjesën e poshtme Facebook.com.
E njëjta dhënave është një burim i vetëm i së vërtetës
dhe kjo shkakton shumë komponentët që duhet dhënë.
Dhe kur një nga ato Komponentët është ndryshuar,
ajo shkon prapa dhe ndryshon burimin e të dhënave.
>> Ju të dërgoni një mesazh, apo jo?
Që ndryshon burimin e të dhënave.
Ju lexoni mesazhet, kështu keni vendosur të palexuara në 0.
Që ndryshon burimin e të dhënave.
Dhe vini re se të gjitha këto e një shigjetë duke shkuar prapa në të njëjtën dhënave
burim, kështu që ju e dini, jepet një grup të caktuar të dhënash,
ju e dini saktësisht se çfarë faqe do të duken si.
Është determinist.
Ju e dini, dhënë të dhëna të caktuara, çfarë faqja do të duken si.
Ju mund të parashikohet se si do të sillen dhe se si gjërat janë duke shkuar
për të punuar kur ata janë vënë së bashku.
>> Dhe në qoftë se kam pasur një milion komponentë këtu, kjo do të sillen njëjtë, e drejtë?
Ju nuk do të ketë asnjë ndërlidhjet pazakontë.
Një dhëna dhënë një milion komponentë.
Një milion komponentët mund të ktheheni mbrapsh dhe të redaktoni të dhënat.
Dhe kështu kjo është shumë e bukur.
Ne jemi duke ndërtuar composable, lehtësisht Apps shkallëzuar web.
>> Ju keni një burim të dhënave, burimi i së vërtetës.
Që tregon komponentët tuaj si për të hedhur jashtë faqe,
dhe komponentët do të trajtuar ndërveprim.
Dhe në qoftë se ata duan të ndryshojnë gjëra, thjesht shkoni mbrapa
dhe tregoni Burimi i të dhënave për të ndryshuar.
Ka kuptim?
Pra, Reago është e gjitha për të kuptuar si për të ndërtuar një komponent
dhe si për të bërë komponent tuaj ndërveprojnë me botën e jashtme.
>> Marrja bashkëveprojnë komponent me botën e jashtme
përdor një tjetër teknologji Flux quajtur, e cila
është një kornizë që është shtuar në krye të reagojnë.
Ne nuk do të flasim për këtë.
Ne jemi duke shkuar për të folur më shumë rreth, duke pasur parasysh të dhënave, si mund të bëjnë një komponent?
>> Dhe kështu Reago është me të vërtetë ftohtë, sepse ju mund të përdorni atë me ndonjë fund mbrapa ju dëshironi.
Nëse keni si një fund mbrapa Python, nëse Python juaj mund të nxjerr nga goja disa të dhëna,
Reago mund ta bëjnë atë.
Nëse ka rezultate JS e të dhënave, Reago bën atë.
Ruby binarët me të dhënave, Reago bën atë.
>> Pra Reago është në thelb një web view-- një fund para me komponentët
për çdo burim të të dhënave whatsoever.
Dhe kështu duke shkuar nga burim i të dhënave në reagojnë komponentë është shumë e lehtë.
Shkuarja në mënyrë tjetër është pak më e vështirë.
Që përdor Flux siç përmenda më parë.
Ne nuk do të marrë në atë.
Ne do të përqëndrohet më shumë në të dhënat e-to-komponent krah.
Në këtë mënyrë ju mund të bëni ftohtë, Apps web fun.
Kjo nuk do të ndikojë në botën e jashtme tani për tani, por kjo është një tjetër histori.
>> OK, kështu që në qoftë se keni qenë këtu për seminarin tim të fundit
ju do të dini se të gjithë e kodit për flasim e sotme do të jetë në këtë URL
këtu, keq, kjo URL këtu.
Dhe në thelb ne jemi duke shkuar për të shkuar nëpër katër hapa, ndoshta pesë,
ndoshta jo pesë.
Ne do të lëvizin nëpër katër hapa i ndërtimit të një mostër Reago app.
Dhe kështu që të gjitha kod burim për çdo hap të rrugës
do të jetë e drejtë këtu, kështu që nëse ju jeni pas së bashku në shtëpi,
të ndjehen të lirë për të lexoj këtë kod.
Nëse ju jeni në vijim së bashku këtu, ne do të tregon atë në ekran,
kështu që mos u bëni merak për këtë.
Por nëse ju jeni në shtëpi, të ndjehen të të lirë për të vizituar këtë faqe interneti.
Dhe, Yeah, ju duhet të jetë në gjendje për të marrë të gjithë kodin që ju do të duhet ndonjëherë këtu.
Pra, kjo është një mashtrojnë fletë mirë, si edhe për aventurat tuaja ardhshme me reagojnë.
I ftohtë, kështu që në qoftë se kushdo që është këtu, dhe madje edhe nëse ju jeni në shtëpi,
tërheq lart këtë faqe interneti, is.gd/cs50react, nuk ka kapital, nuk ka underscore, nuk ka asgjë.
>> Ju do të shihni një faqe që duket pak si kjo.
Kjo është një gjë e quajtur CodePen.
CodePen është një bashkëpunuese Mjedisi kodim
me të cilën unë mund të shkruani kodin këtu, dhe ajo do të dërgohet automatikisht tek ju.
Dhe në këtë mënyrë, unë mund të shkruani kodin.
Unë mund të kandidojë kodin këtu.
>> Për example-- dhe nëse ajo reloads-- shohin, Unë jam duke kodin e Java skriptet në faqe
të drejtë këtu, dhe kjo do të automatikisht bëjnë një web faqe
me këtë kod JavaScript.
Dhe kështu kjo është një mënyrë për ne që të provoni kodin
me të vërtetë të shpejtë pa pasur nevojë të përdorin ID tona ose përdorni makinën tonë lokale
apo çfarëdo.
Kjo është një mënyrë shumë të shpejtë për ju për mockup dhe testuar nga lloje të ndryshme të kodit.
>> Kështu që unë jam duke shkuar për të marrë shembull kodi, duke e vënë atë këtu.
Ne jemi duke shkuar për të punuar nëpërmjet saj.
Dhe nëse ju jeni në shtëpi, ju mund të tërheqë këtë deri si.
Dhe unë e kam instaluar tashmë Reago këtu, kështu që ju mund vetëm
shkruani kodin tuaj këtu, dhe provoni atë si vetë lojës tuaj.
>> Po, nëse të gjithë të të hapur këtë lidhje këtu.
Ju lutem jepni një bravo një herë ju keni atë të hapur.
Ftohtë, të ftohtë të ftohtë.
Nuk ka asgjë këtu tani për tani, por ne do të ndryshojë se shumë shpejt.
>> OK, kështu që Reago është një JavaScript bibliotekë, dhe si i tillë,
kërkon njohuri të JavaScript, që është gjuha e programimit web.
Dhe është duke u përdorur për gjëra të tjera tani shumë, por në radhë të parë web zhvilluar
gjuha, kështu që nëse ju jeni të panjohur me që, të lexoni një vend të quajtur JSforCats.com.
Është e mrekullueshme.
Ju mund të mësoni JavaScript në gjysmë ore.
Është e pabesueshme.
>> Pra, t'i jepte një të lexuar.
Ne gjithashtu është shumë i HTML këtu sepse ne jemi dizajnimin e web faqet e kursit.
Pra, nëse ju jeni të panjohur me HTML, shikoni HTMLdog.com.
Unë mendoj se të mësuarit është një Reago milion herë më e lehtë në qoftë se ju tashmë
di blloqe ndërtimi.
Nëse keni komponentët, është lehtë për të bërë një komponent të madh.
Kjo është Reago gjuhën për ju.
>> Pra shkoni përpara dhe të japin këto gjëra një lexuar.
Ndalo këtë video.
T'i jepte një të lexuar nëse ju jeni në shtëpi, në qoftë se ju nuk jeni
njohur me HTML ose JavaScript
OK, kështu që ajo që ne jemi duke shkuar për bëni është që ne jemi duke shkuar për të bërë
një app shumë bazë Flashcard përdorur reagojnë.
Ne do të kemi një Flashcard.
Ju mund të shfletoj kartën mbrapa dhe me radhë.
Dhe ne do të keni një listë të të gjitha kartat që ne kemi,
dhe në qoftë se ne jemi ndjenjë ambicioz, ne mund të jetë
në gjendje për të kaloni në mes të makina duke klikuar mbi ta.
>> Por kjo është, i zhveshur juaj kockat, një shumë e thjeshtë Reago app.
Dhe kështu kjo është në fakt jo i parëndësishëm për të zbatuar,
por ne jemi duke shkuar për të treguar se, në qoftë se ju bëni kjo, është shumë, shumë e lehtë për të zgjeruar atë
në qoftë se njerëzit e tjerë të ju ndihmojë me të.
Pra, ne jemi duke shkuar për të shkuar nëpër katër hapa duke filluar nga e para për të ndërtuar këtë.
>> OK, kështu katër hapa, ne do të nisem me hapin e parë.
Hapi i parë do të jetë ndërtimin komponent tuaj të parë.
Siç kam thënë më parë, një komponent në Reago është vetëm një element HTML në steroid.
Ajo përcakton HTML dhe disa sjellje, dhe kjo
do të përcaktojë se si njerëzit mund të ndërveprojnë me të se si
ajo do të ketë gjendjen e brendshme.
Si një buton do të dinë si sa herë ajo është klikuar për shembull,
dhe kjo do të dinë se si për të hedhur veten jashtë.
>> Pra, le të shkojnë përpara dhe për të ndërtuar tonë Komponenti i parë duke përdorur JavaScript.
Pra, nëse sintaksa duket i çuditshëm, kjo është për shkak se ajo lloj është.
Pra, përsëri, ne jemi duke shkuar për të bërë një ndryshore të quajtur
app duke përdorur fjalen le, që e bën një ndryshore,
le App barabartë React.createClass.
>> Reago është një bibliotekë dhe ka Krijo funksion të klasës.
Dhe ky funksion është një grimë e kodit që ju
mund të përdorni për të krijuar një të ri lloji i Reago komponent.
Dhe kështu React.createClass bën një komponent,
dhe ky komponent do të të jetë në gjendje të bëjë gjëra.
Gjëja kryesore që mund të bëjnë është të bëjnë diçka, bëjnë si një funksion.
>> Përsëri, në qoftë se ky indeks nuk është e qartë për ju, unë ju rekomandojmë që të shkoni në JS për macet
dhe check it out.
Është se zoomed në mjaft mirë?
Ftohtë.
>> Pra, çdo nevojat përbërëse që të ketë një funksion të merr.
Render Funksioni thotë: çfarë mund të shtypura në ekran?
Por komponenti është padobishme në qoftë se ajo nuk ka
E di se çfarë për të shtypur në ekran, kështu që ju duhet të keni një funksion të merr.
>> Pra, në gjënë e bëjnë, ju vetëm duhet të kthehen disa HTML.
Dhe çfarë është e ftohtë është se ka një gjë të quajtur
JSX, e cila është një zgjerim i JavaScript që është përdorur nga të reagojë.
Kjo le të ju shkruani HTML brenda i juaj JavaScript, e cila
tingëllon lloj të çuditshëm kur ju së pari mendoni rreth saj,
por kjo e bën shumë kuptim më pas.
Pra, ne mund të bëjmë këtë.
Nëse ju jeni të njohur me HTML, unë e di ne kemi një div me një qëllim të përgjithshëm
enë për gjëra.
Ne mund të kthehen një div, dhe brenda kjo div, ne mund të vënë sende.
>> Pra, le të thonë se ne duam që të merr vetëm një Flashcard drejt-up për tani.
Flashcard, do të thosha, do të ketë një pyetje dhe përgjigje.
Pra, brenda këtij div, le të shtypura nga një paragraf
që thotë se question-- Çfarë është përgjigje përfundimtare për jetën, universi?
Dhe atëherë përgjigja është do të jetë, natyrisht, 42.
>> Që nuk ka dalë mirë në të gjitha.
Yeah, kështu që në thelb ju mund të vërtetë të shkruani HTML brenda tuaj JavaScript.
Dhe kjo do të jetë shtypura jashtë në ekran.
Pra, le të try it out.
>> Pra, ne kemi komponent tonë.
Ne kemi nevojë për të të treguar reagojnë për të vënë komponenti në ekran
kështu React.render, prandaj vini re se ne trajtojnë app si çdo element tjetër.
Ne shkruani atë si ajo ishte një element HTML.
Ashtu si në vend të thënë si IMG për imazhin apo p për paragraf,
ju shkruani App, kështu App është trajtohet si një element HTML.
Siç kam thënë më parë, është një element në steroid.
>> Kështu që ju bëjnë App, dhe ju t'i jepte një vend për të vënë atë.
Dhe kjo është se si ju mund të them se ku për të vënë atë.
Unë kam krijuar një div të thjeshtë në faqe thirri me një ID i faqes,
dhe kjo është ajo ku element do të shkojë.
>> Dhe ne nuk jemi duke shkuar për të drejtuar me HTML.
Në thelb kjo do të marrë vënë brenda këtij elementi faqe
që ne kemi në ekran.
Pra, ajo shkon këtë kod, dhe ajo tërheq kjo gjë në ekran, kështu që këtu ne jemi.
Ne kemi bërë reagojmë komponentë tonë të parë.
>> Pra, ashtu si një radhitje, kemi bërë të butë një lloj i ri i komponentit, e drejtë?
Kjo është ajo që React.createClass.
Dhe në atë komponent, ne tregoi atë se çfarë duhet të bëjë.
Sa herë që ky komponent është që të të shtypen në ekran,
ajo do të shtypura nga div me dy paragrafët brendësi të saj.
>> Dhe çfarë kemi bërë, kemi bërë një app ri duke përdorur kllapa kënd app shënim.
Ne ia tregoi për ta vënë atë brenda elementin faqe.
Dhe kështu që ajo që kam bërë, ajo krijoi një aplikacion i ri nga ajo template.
Dhe atëherë unë thashë atë që të merr atë.
Pra, ajo ka thënë, OK, app, çfarë duhet të shtypura nga?
App thotë, të shkojë të shtypura nga një div me dy paragrafët brendësi të saj.
Dhe voila, nuk ka div jonë me dy paragrafë brendësi të saj.
Kuptim deri tani?
>> Pra, përsëri, e gjithë sfida të reagojnë është vetëm të dish se si për të bërë komponente.
Si për të bërë komponente të punojnë së bashku.
Tani që ne kemi bërë tonë të parë komponent, le të kthehemi
dhe të komponentëve të përshtatshëm.
Pra, ju e dini se si në HTML ju mund të japin butonat klasa tuaja?
Ju mund të jepni anchors tuaj href.
Ju mund të jepni inputet tuaja një lloj, e drejtë?
Ju mund të jap më shumë porosi pronat për të gjithë të elementeve tuaj
për ta bërë atë më interesante.
Dhe ne fakt mund të bëjmë saktë të njëjtën gjë.
>> Pra, le të thonë se ne duam tonë app për të shkuar bëjnë ndonjë kartë.
Tani për tani ne vetëm dhënë një kartë hardcoded.
Ne e dimë se ka vetëm një kartë ajo mund të bëjë, kështu që ne jemi
do të përpiqen dhe për të ndryshuar kjo tani kështu që ne mund vetëm t'i jepte një kartë.
Ajo do të shtypura nga kartën.
>> Ju duhet të përpiqet dhe të bëjë tuaj Komponentët një qëllim shumë të përgjithshme.
Pra, në këtë mënyrë unë mund të email ky është miku im dhe të jetë si,
çfarëdo Flashcard ju keni, vetëm ushqyer atë në këtu,
dhe ajo do të bëjë atë vetë.
Ju mund të vënë të tjera gjërat në app tuaj.
>> Por së pari, le të thyejnë këtë deri në dy komponentë,
por ne duam për të ndarë kartën shtypjen pjesa nga ana aktual app.
Pra, çfarë mund të bëjmë është që ne mund të ndryshojë këtë nga App
të CardView, vetëm një emri i ri për app,
dhe ne mund të bëjë një të ri komponent i quajtur App,
nuk duhet të ngatërrohet me App vjetër.
Ne kemi marrë të createClass, dhe si në HTML,
ju mund fole Reago komponentët brendësi të njëra-tjetrës.
>> Pra, në këtë funksion kthen, Funksioni CardView kthimi,
dhe kjo është e saktë të njëjtën gjë.
Shihni se pse kjo është e njëjta gjë?
Në vend të bërë vetëm app që ka div dhe pairing në brendësi të saj,
app bën të CardView, dhe CardView bën DIV dhe paragrafit.
Pra, ky është shembulli ynë i parë i Elementet fole brenda e njëri-tjetrit.
A ka kjo kuptim?
Pra, përsëri, ne kemi një element CardView.
Ne kemi elemente app se kjo është më e madhe se.
>> OK, kështu që ne duam tonë CardView-- nëse ju të japë një CardView mirë një kartë të caktuar,
ajo do të shtypura nga për ju, e drejtë?
Pra, së pari, ne kemi nevojë për të bërë një kartë, kështu që le të bëjë një objekt kartë.
Pra, le kartën time equal-- në qoftë se ju jeni të gjithë të njohur,
kjo është vetëm simbol-marrës i kundërshtojnë në JavaScript.
Kjo është lloj i si një struct në C, kështu që ne kemi bërë një kartë,
dhe kështu që tani ne mund të kalojë këtë kartë si një pronë apo si një atribut në HTML
Terminologjia për app tonë.
Pra, ne mund të bëjmë këtë, app kartë barabartë myCard.
>> Ti e di se si në të dhëna, ju bëni lloj input është e barabartë me tekst ose butonin
klasë është e barabartë btn për bootstrap ,?
Njëjtën ide, kartë App equals-- ju keni marrë për të vënë formatimin e teksteve here--
Kartë App barabartë myCard, kështu që kjo thotë se ne e kemi këtë kartë objekt.
Unë jam duke shkuar për të kaluar atë si një Prona me komponentin app.
Dhe ky komponent app do të të jetë në gjendje për të hyrë në atë dhe të bëjë
gjëra interesante me të.
>> Pra, app tonë do të jetë jepet një kartë, kështu që tani për tani,
le të ketë app vetëm të japë kartë të CardView
vetë sepse si app nuk është e do të dini se çfarë të bëjë me të,
kështu që ne vetëm do t'i jepte për të CardView.
Pra, ne do të kalojë atë të të njëjtën mënyrë, është e barabartë me kartë,
dhe kështu çdo komponent mund të hyni në gjëra që i është dhënë asaj.
Ata mund të kenë qasje në pronat që janë dhënë në të
duke përdorur këtë sintaksë, this.props.card.
>> Pra, çfarë ndodh këtu është ju keni objektin myCard.
Ju të kalojë atë në app përdorur kartën App barabartë myCard.
Se objekti kartë është dhënë për app tuaj.
Aplikacioni mund të përdorni atë si this.props.card.
Kjo është lloj i si një imazh e di se çfarë është burim është.
>> Kjo app e di se çfarë është kartë është, dhe ajo mund të bëjë gjëra me të.
Ajo mund të bëjë llogaritje.
Ajo mund të marrë vendime të bazuara off of it.
>> Tani për tani, unë ishte duke shkuar për të kaluar this.props.card mbi CardView.
Kuptim deri tani?
Ajo do të bëjë më shumë kuptim tani.
>> OK, kështu që tani ne jemi në CardView.
CardView tona, duke pasur parasysh kartën, duhet shtypura nga pyetja e saj dhe përgjigje.
Tani për tani ne vetëm të shtypura nga disa Pyetjet hardcoded dhe përgjigje.
Ne duhet të kuptoj out-- ne kemi nevojë për të kërkuar kartën që na dhanë
çfarë është pyetja dhe përgjigja, dhe pastaj printoni këtë jashtë në ekran.
>> Pra, ne mund të bëjmë këtë këtu.
Në bëjnë begin-- së pari të bëjë barabartë.
Pra, ajo që ne po bëjmë këtu është që ne e dimë se kartat na janë dhënë neve për një pronë,
e drejtë?
Është dhënë neve si një input.
Ashtu si kjo është pothuajse si argumente te një funksion.
Karta është një argument gati për këtë CardView.
>> Ne do të ekstrakt se, dhe të vënë ajo në pyetjen ndryshueshme.
Sigurohuni përgjigje shkoi në përgjigje të ndryshueshme.
Bën që kartë të përgjigjem.
Dhe tani që ne kemi këto, në vend të shtypjes në dukje se teksti,
ne jemi duke shkuar për të shtypur jashtë çdo gjë që ata na dhanë.
>> Pra, kjo stuff-- kështu që ne jemi duke shkuar për të vënë jashtë PYETJE PËRGJIGJE.
Le të shohim nëse kjo funksionon.
I ftohtë, kështu që le të hap nëpërmjet saj një herë më shumë vetëm të jetë i sigurt.
>> Pra, karta ime është kartë objekt, dhe ne janë duke i dhënë atë kartë në app.
Dhe app do të marrë më të kartë dhe të japë atë në CardView.
Dhe kjo CardView thotë, në qoftë se ju më jepni ndonjë objekt Flashcard,
Unë do të shtypura nga pyetja e saj dhe përgjigja e saj, e drejtë?
>> Pra, çfarë unë mund të bëj është që unë mund të të dërgoni këtë kod, i pari
si 10 rreshta të kodit tim, mikut tim.
Ai mund të embed atë në Aplikimi tij.
Dhe për aq kohë sa ai e bëri të njëjtën gjë, si kartë CardView barabartë me këtë,
për aq kohë sa ai krijoi CardView dhe ia dha informacionin e duhur,
ai mund të bëjë kartën e tij.
Dhe kështu në këtë mënyrë, kjo është një të vërtetë të mënyrë të ftohtë për ju për të ndërtuar
Komponentët që përdorin njëri-tjetrin, e drejtë?
Kjo kartë, unë mund të publikoj kjo CardView në internet,
dhe njerëzit do të jenë në gjendje të përdorin atë.
Pra, në thelb, është si një nga funksionet standarde në bibliotekë C.
>> Kjo është një funksion ku dikush ka shkruar atë.
Ju jepni një kontribut të caktuar.
Ajo do të prodhojë një prodhim të caktuar.
Ju nuk e kujdesit se si funksionon nga brenda.
Për sa kohë që ju të jepni të drejtën input, ajo do të bëjë të prodhimit të drejtë.
>> Dhe një komponent mund të jetë menduar të njëjtën mënyrë.
Kjo CardView është si një funksion bibliotekë.
Në qoftë se ju t'i jepte disa kartë si një pronë, ajo do të
shtypura nga përmbajtjen e këtë kartë.
Ashtu si në qoftë se unë të ndryshojë kartën time të në vend që të jetë si ajo që është 5 plus 37,
ajo do update në përputhje me rrethanat.
Pra, vetëm duke ndryshuar të dhëna, ajo merr një prodhim të caktuar.
Kështu që ju mund të mendoni komponentëve gati si funksionon në këtë mënyrë, e cila
ju mund të vënë së bashku.
Ju merrni të dhëna, si kjo CardView si input, ju merrni prodhimit.
Në këtë rast, prodhimi është HTML.
Kuptim deri tani?
I ftohtë, kështu që përsëri, pronat janë të si ju mund të kalojë informacion
në dhe jashtë e komponentëve.
>> OK, kështu që le të bëjnë këtë gjë interaktive.
Tani për tani kjo është lloj i mërzitshëm.
Çfarë është [e padëgjueshme]?
Ju mund të shtypura disa jashtë, por kjo është e gjitha ajo mund të bëjë.
>> Pra, le të kthehemi të Pyetja e vjetër vetëm tani për tani.
OK, kështu që tani këto komponente janë të mërzitshëm sepse të gjithë ata e bëjnë,
ata marrin të dhëna.
Ata bëjnë prodhimit, e drejtë?
Kjo është lloj i mërzitshëm.
Ne duam të kemi tonë komponentë të jetë në gjendje të ketë
një lloj i shtetit të brendshme, si mbani mend diçka.
>> Për një Flashcard, për shembull, se çfarë lloj i shtetit
mund të ju dëshironi të kujtohet për një Flashcard?
Çfarë statusi i përkohshëm mund të ju doni të mbani mend
për një Flashcard në një app Flashcard?
Audienca: Nëse ajo është kthyer?
NEEL Mehta: Po, e drejtë.
Kështu që ju mund të dëshironi të mbani udhë të jeni të përballet me lart, ose janë
ju të përballet me poshtë në kartë.
Në Facebook, për shembull, ju do të doni të mbani mend se ku në ushqim lajmeve
jeni ju ose si që është profili janë duke bërë ju të drejtë tani.
>> Më të Dërguarit, si ajo që teksti të shkruani në kutinë e input, e drejtë?
Nëse ju rifreskoni faqen, ajo shkon larg.
Por ju nuk e kujdesit të vërtetë.
Është vetëm e përkohshme.
Po?
>> Audienca: [padëgjueshme]
NEEL Mehta: Ashtu si një blic kartë, si ju mund të jeni duke parë
pala pyetje apo anën përgjigje?
>> Audienca: OK.
>> NEEL Mehta: Like a dy anë Flashcard, e drejtë?
Yeah, kështu që ju doni të kanë këtë ide tani
Unë kam pronave, e cila është si inputeve, por shteti, e cila është e përkohshme, uh,
ku ju jeni në faqe, e drejtë?
Përsëri, kam thënë në Facebook Messenger, unë kam si që personi
ju jeni duke e parë Facebook ose kush është profili, e drejtë?
>> Kjo është vetëm e përkohshme.
Është e rëndësishme për të treguar përdoruesit çfarë po ndodh, por rifreskoni faqen.
Kjo nuk ka rëndësi.
Pra, kjo është shtet i përkohshëm, kështu që ne të gjithë të shtetit atë.
>> Pra, përsëri, nuk ka shtet dhe props.
Props është input dhënë nga burim tuaj të të dhënave.
Shteti është vetëm si defaults.
Është vetëm si sende që bën gjë interaktive.
>> Pra, në tonë CardView-- le të kemi tonë CardView-- kështu që ishte e bukur.
Ajo që ne jemi duke shkuar për të bërë këtu, ne jemi duke shkuar për të prekur CardView dhe vetëm CardView.
Dhe kështu shoku im i cili mori këtë, ata nuk do të vini re ndonjë ndryshim.
Ata nuk do të duhet të ndryshojë ndonjë të kodit të tyre,
por ata do të shohin e tyre CardView u souped lart.
Kjo është një pjesë e bukur për komponentët.
>> OK, kështu që në CardView tonë, le të përpiqemi dhe ndiek nëse ne jemi fazën deri
ose të përballet me poshtë.
Në Reago bëjmë këtë duke e parë specifikuar gjendjen fillestare.
Ku fillon kartë?
>> Pra, të jetë një funksion të quajtur getInitialState funksionojë, dhe të kthehemi një objekt.
Ky objekt përmban disa shtet, dhe një shtet është vetëm një palë kyç vlerë.
Ashtu si në të udhëzojë, ju keni një çelës dhe një Vlera, ju keni si emri është një varg.
>> Në këtë rast, le të thonë se para është e vërtetë.
Kjo thotë se kemi një shtet.
Një komponent i shtetit është një atribut i quajtur front.
[Padëgjueshme], kështu by default, ne jemi në pjesën e përparme të kartës,
dhe ne mund të ndryshojmë këtë si ne rrokullisje kartën.
Ka kuptim?
>> OK, kështu që në bëjnë, tani për tani, ne jemi duke treguar pyetje dhe përgjigje.
Tani çfarë duhet të bëjmë po tregojnë pyetjen
në qoftë se ne jemi në pjesën e përparme të kartës kështu përgjigja është për pjesën e prapme të kartës.
Kjo është arsyeja pse ju të gjithë bëni kartë interaktive.
Pra, le të përpiqen dhe për këtë këtu.
E pra, së pari vetëm të bëjë një ndryshore.
Ne mund të kërkoni tani this.state.front.
Ne hyni deklarojnë të njëjtën gjë ne props qasje, kështu this.state.front.
>> Në qoftë se ne jemi para, atëherë teksti është this.props.card.question.
Në qoftë se ne jemi në frontin e kartë, ne jemi duke shkuar për të provoni dhe kap
pyetja nga karta.
Përndryshe, në qoftë se ne jemi në anën e pasme e kartës, çfarë bëjmë ne?
>> Audienca: Përgjigja?
>> NEEL Mehta: Po, kështu teksti barabartë this.props.card.answer.
Por në qoftë se ju të vini re, ne jemi duke përdorur që shteti të marrë një vendim
sepse tani komponentin do të duken të ndryshme
bazuar jashtë si këto ndërveprojnë me të.
Pra, në vend të shtypjes jashtë kësaj, ne vetëm do të shtypura nga teksti.
Ftohtë, kështu që tani, siç e shihni, ne shohim vetëm pyetje.
Dhe në qoftë se kam ndryshuar gjendjen këtu me dorë në front është i rremë marrim 42 mbrapa.
>> Pra, përsëri, ky komponent ka shtetin e vet.
Si një buton e di nëse ajo është shtypur apo jo,
kjo gjë e di se çfarë është në front ose në anën e pasme.
By default, kjo është në frontin.
Dhe pastaj në qoftë se ajo është në pjesën e përparme, ne do të shtypura nga pyetja.
Në qoftë se kjo është në anën e pasme, ne do të shtypura nga përgjigje.
Pra, përsëri, informacioni dhënë është e njëjtë.
Ajo vetëm duket ndryshe bazuar në atë se si ju programoni atë.
Kështu, për shembull, Facebook Messenger, edhe në qoftë se ju të merrni të njëjtën burimin e të dhënave,
ajo mund të duken të ndryshme sepse shteti është i ndryshëm.
Ju jeni duke kërkuar në një Mesazhi person tjetër së.
>> OK, kështu që kjo është e gjitha mirë dhe mirë, por tani ajo është në të vërtetë
na bëjnë të aftë për të ndryshuar, nëse kartë ynë është para apo prapa.
Ne mund ta bëjmë këtë duke shtuar një rrokullisje buton, një buton për kartë që
do të rrokullisje kartën qoftë se kjo është [e padëgjueshme].
Pra, le të shtoni një buton këtu, kjo button, dhe ky buton do të thonë rrokullisje.
>> Dhe kështu tani, atë nuk bëjnë asgjë.
Ajo vetëm duket bukur.
Ajo që ne mund të bëjmë është që ne mund të shtoni një klik mbajtës, onClick barabartë this.flip,
dhe ne do të përcaktojë rrokullisje më vonë.
Por në thelb, onClick është një funksion që
merr quhet kur përdoruesi klikimeve atë.
>> Pra butonin do të dinë kur ajo është klikuar.
Shkoi ajo është klikuar, ajo do të rrokullisje kartën.
Kjo është lloj i si tuaj djalë i dorëzimit pica.
Ju jeni si, të gjithë të drejtë, sa herë që dikush e quan mua, unë do të dorëzoj pica, e drejtë?
>> Ju të regjistroheni në këtë dëgjues.
Ju dëgjuar për një ngjarje.
Ju merrni quajtur, dhe kur Ngjarja ndodh, ju bëni diçka.
Ju merrni pica.
Në këtë rast, kur ju jeni klikuar, ju rrokullisje kartën.
>> Dhe kështu që ne kemi nevojë për të përcaktuar një Funksioni që do të rrokullisje kartën,
kështu që ne do të shkruaj atë të drejtë këtu, rrokullisje funksion.
Dhe kështu që çfarë mendoni rrokullisje do të bëni?
Përsëri kjo merr quhet kur ne kliko butonin rrokullisje.
Çfarë duhet të bëjë funksion rrokullisje?
>> Audienca: Ndryshimi this.state.front nga të vërtetë të rreme, rreme të vërtetë.
>> NEEL Mehta: Po, kështu që të marrë çfarëdo this.front is-- shteti para është.
Merrni shtetin para, në qoftë se është e vërtetë, e bëjnë të rreme.
Në qoftë se kjo është e rreme, e bëjnë atë të vërtetë, e drejtë?
Pra, le të përpiqemi që.
>> Ju nuk mund të ndryshoni gjendjen vetëm duke bërë this.state.
Ju nuk mund ta bëjë këtë.
Ju duhet të përdorni një funksion quajtur this.setState.
>> Kështu që ju mund të them this.setState front zorrës së trashë kjo ku, përsëri, thirrje
pikë do të thotë të kundërtën.
Them se nëse kjo. state.front është e vërtetë, ajo do të kthehet rreme.
Pra, ne do të vendosur shtetin nga të vërtetë të rreme.
Nëse është e rreme, ne do të vendosur atë rreme të vërtetë.
>> Vetëm të vini re se ne kemi vendosur dhe për të marrë pak ndryshe, dhe kështu që le të provoni këtë.
Bada Bing, shikoni në këtë.
Butoni rrokullisje do tani kaloni para për të mbështetur shtetin.
>> Dhe kështu që këtu është ajo ku ju shihni një pak e magjisë së reagojnë.
Si ne kurrë nuk tha se ajo për të ri-bëjnë.
Ne kurrë nuk tha se shlyen asgjë.
Nëse jeni duke bërë këtë pa Reago, ju do të
kanë to-- pëlqen kur butoni rrokullisje është klikuar,
ju do të duhet të them se për të dorë ri-bëjnë, apo jo?
>> Reago është me të vërtetë ftohtë në se nëse ju t'i jepte një shtet dhe pronat të caktuar,
ajo gjithmonë do të bëjë saktë të njëjtën gjë.
Dhe kështu kur ne ndonjëherë kemi të ndryshojë shteti dhe pronat,
reagojnë vetëm ri-bën të gjithë gjë.
Ai e di se ka një një-për-një korrespondencë
midis shtetit dhe parametri dhe HTML.
Pra, sa herë që ose të atyre Ndryshimet nga anë të një shteti të caktuar,
ajo do të ndryshojë mënyrën se si Paga është ri-dhënë.
Dhe kështu në thelb është si Reago duke pritur për ju për të ndryshuar.
>> Sa herë që ajo ndryshon diçka, ajo do të ri-bëjnë faqe të tërë.
Dhe nëse kjo tingëllon joefikase, kjo është për shkak se ajo do të jetë,
por reagojnë përdor një gjë të quajtur DOM Shadow.
Në vend të tërhequr faqe direkt, atë mban pemë virtuale HTML në kujtesë.
>> Ju e dini, HTML është si një pemë, si një strukturë të dhënave hierarkike.
Ajo mban një pemë të rreme në kujtesë, dhe sa herë që ju update faqen,
ajo do të nxjerrë një tjetër rreme pemë, dhe kjo do të llogaritur
Çfarë ndryshimi ka nevojë për të bërë faqe për të bërë të dy drurët e barabartë.
Pra, në thelb, ajo praktikisht ri-bën shumë.
Dhe atëherë ajo vetëm si ndryshon faqe në tweaks pak si të nevojshme,
kështu që është shumë, shumë, shumë efikase.
>> Pra, në thelb do të reagojnë sa herë që të ndryshojë diçka,
ajo do të ri-bëjnë faqen praktikisht.
Ajo do të kuptoj se çfarë kam nevojë për të ndryshojë për të bërë në faqen e vërtetë të reflektojë
faqja virtuale, dhe kjo do të bëjë që.
Kjo është DOM virtuale.
Kjo është një nga më të madh Karakteristika të reagojnë.
>> A ka kjo kuptim?
Ndonje pyetje?
Po?
>> Audienca: Si funksionon të krahasohet ende në MVC
që kemi biseduar rreth para se të burimeve si.
>> NEEL Mehta: Po, pyetja është si e bën atë të krahasohet me MVC?
Ju pyetur rreth burimeve.
E pra, le të flasim rreth asaj se si ajo funksionon.
>> Në MVC, ju do të rinovuar modelin.
Në këtë rast ne do të kemi një model kartë.
Pamja do të ketë button rrokullisje, dhe kontrolli
do të ketë funksionin rrokullisje.
Pra, mendimi do të them të kontrollues të rrokullisje rrokullisje.
Rrokullisje do të tregoni Modeli për të ndryshuar, e drejtë?
>> Dhe kështu që kur ju bëni një MVC, ju dëgjuar për modelin për të ndryshuar,
dhe ju ri-bëjnë pamjen në përputhje me rrethanat.
Ose ju vetëm duhet të pëlqen kanë kontrollues.
Prisni për modelin për të ndryshuar, dhe pastaj vini dhe të zgjedhin një pjesë të si një gjë
për të ndryshuar.
Këtu kemi një gjë, por në një app madhe,
ju duhet të mbani mend se çfarë pëlqen ndryshimi në çdo vend të vetëm,
kështu që është pak i bezdisshëm.
Dhe kështu Reago është e bukur sepse ajo ka një Dom Shadow.
Ajo mund të përballojë për të vetëm rishkruaj të gjithë gjë.
Ju nuk keni për të selektive si me mend se çfarë për të rinovuar.
>> Në Facebook në qoftë se ju pëlqen të merrni një mesazh të ri, në MVC,
ju do të duhet të mbani mend, OK, të ndryshuar gjërat
në majë e faqe, mesazhi ikonë.
Gjithashtu pop një dritare të re në fund.
Gjithashtu të bëjë një gjë të re në atë dritare.
Gjithashtu luajnë një tingull.
>> Kjo është një shumë të gjëra fiken në të njëjtën kohë.
Dhe kështu që nëse ju nuk e bëni kanë një Dom Shadow, ju do të
keni për të bërë atë me dorë për shkak se ju nuk mund të shpëtoj nga tërë faqen.
Ju nuk mund të përballojë për të, kështu që ju keni për të ndryshuar çdo gjë me dorë,
e cila është me të vërtetë i bezdisshëm në MVC.
>> Pra, në mënyrë që të jenë begatë, ata selektive
update faqe, i cili është efikas, por edhe i bezdisshëm.
Në Reago, për shkak të Shadow Dom, ju merrni dy gjëra për të lira.
Është efikas për shkak se i Shadow Dom.
Bela po përditësimin faqe.
Kjo nuk e bën pemën manipulimin.
Ju merrni efikasitetin.
Ju merrni edhe lehtësinë e përdorimit, sepse në qoftë se ju vetëm të rishkruaj faqe të tërë,
por ju vetëm e di, të gjithë të drejtë, gjërat do të jetë në faqen diku.
Ajo mund të jetë në një vend tjetër, por ajo do të jetë në faqe, e drejtë?
Kështu që ju sapo ri-dhënë të gjithë gjë praktikisht,
dhe ju mund të bëni një çift ndryshime në faqen e vetë.
>> Pra, përsëri, në MVC ju do të duhet të zgjedhin
midis lehtësinë e përdorimit dhe efikasitetit, dhe të reagojnë, që ju të merrni të dy.
Pra, është më mirë.
Ka kuptim?
Të ngurta.
>> OK, kështu që le të shohim le të flasim pak për hapin 4,
se si ne mund të embed komponente.
Pra, ne kemi këtë të drejtë tani.
Ne kemi butonin ftohtë tonë të vogël.
Ne mund të shfletoj atë përsëri dhe me radhë, dhe kjo është e gjitha ajo ka.
Le të thonë se ne duam të kanë një tjetër komponent.
Le të thonë se app tonë Flashcard duhet përmbajnë një listë të të gjitha kartat
që ju keni, në mënyrë që do të thotë ne duhet të ketë një tjetër komponent.
E pra, ndoshta e quajti atë një pamje listë.
Le të bëjë një pamje listë që bashkëjeton me CardView,
dhe kjo pikëpamje listë dhe CardView do të donte të punojnë së bashku.
Dhe ju mund të kombinohen ato për të bërë aplikacionin tonë për ju.
>> Pra, së pari, le të bëjë një çift ​​shumë Kartat e drejtë.
Le të themi, çfarë kartat?
Dhe vetëm kështu që unë nuk duhet të lindi ju me të shtypni atë në,
Unë jam vetëm duke shkuar për të kopje atë nga këtu.
Dhe kështu që unë jam duke shkuar për të mos t'i jepte vetëm një kartë.
Unë jam duke shkuar për të dhënë atë një rrjet të kartave.
Pra, para Apps duke shkuar për të thyer për tani.
Të gjithë të drejtë, kështu që ne jemi duke shkuar për të bërë kjo gjendje për të trajtuar karta të shumëfishta.
Pra, së pari, ne jemi duke shkuar për të dhënë atë, nuk vetëm një kartë, por një grup të kartave,
si një listë të kartave.
Dhe në këtë rast, ne kemi tre prej tyre.
>> Të gjithë të drejtë, kështu që kështu app është do të merrni një listë të kartave,
dhe ajo do të vendosë se cili një për të treguar në CardView.
CardView vetëm mund të bëjnë një kartë, por app
merr një listë të të gjitha kartat, e drejtë?
>> Pra, kur të kuptoj se një kartë për të dhënë për CardView,
si do të ju me mend ju mund të jetë në gjendje për të marrë një vendim për të cilën kartë
për të treguar?
Për të ju jap një aluzion, kjo është përkohësisht Ju do të shihni një kartë të caktuar.
Nëse ju rifreskoni faqen, ju do të thjesht shkoni përsëri në kartën e parë.
Kjo është në rregull, sepse kjo është e përkohshme.
Çfarë teknikë mund ta përdorim?
>> Audienca: Ju mund të bëni një variabël kështu që ashtu si keni pasur para.
A është kjo e vërtetë, ju mund të kanë kartën e tanishme është e barabartë me 1?
>> NEEL Mehta: Yeah, kështu që ne duan të kenë shtet, apo jo?
Ju do të përdorni shteti në komponent të kuptoj se
që kartë duam që të merrni.
Ashtu si ne kemi një listë të të gjitha kartat, ne do të
përdorin shtetin për të kuptoj se një nga kartën parë,
kartë të dytë, kartë të tretë, dhe kështu me radhë.
>> Pra, një app kështu një app do të merrni një kanë funksionin getInitialState,
Kthimi getInitialState funksion.
Dhe ne do të themi vetëm activeIndex 0.
Kështu që tani app jonë ka është shtetin e vet.
>> Dhe kështu që tani më bëjnë, të kuptoj se një kartë, le të vetëm të shkojnë në grup
dhe kap gjë në atë indeksin.
Zgjidh kartë this.props.cards barabarta this.state.activeIndex.
Pra, siç e shihni këtu, props dhe shteti të vërtetë punojnë së bashku.
Pra, tani që ne kemi activeCard tonë, ne do të thërrasë atë activeCard,
dhe le të shohim nëse kjo funksionon.
[Padëgjueshme]
>> Oh, kjo ishte një gabim tekst.
Ah.
>> Cool, yep, kështu që tani ne kemi qenë prapa ku kemi qenë më parë, apo jo?
Programi njëjtë të vjetër me përjashtim të tani ne mund të mbështesim
një listë të kartave, jo vetëm një kartë.
Dhe tani, përsëri, në qoftë se ne të ndryshojë activeIndex, ne mund të shkojnë nga 0 në 1,
dhe tani që kartë të dytë, dhe pastaj shkuam në 0.
Kështu që këtu është një i ri souped-up version të tonë.
>> OK, kështu që tani le të kemi një pamje listë që tregon të gjitha kartat në programin tuaj,
kështu që ne do të bëjë një të ri komponenti i quajtur ListView.
Le ListView barabartë react.createClass.
Pra, ne duam që të merr një të renditura listën me një zëri të listës për çdo kartë.
Dhe kështu që ne kemi një bandë e kartave.
Ne duam një zëri të listës për çdo kartë, e drejtë?
Ne mund të bëjmë një për lak ose diçka për të bërë një artikull të ri listës.
Por në mënyrë që ju të bëni atë në Reago, përdorni një gjë të quajtur hartë.
Harta është një mjet ose një funksion që ju përdorni që për çdo send, shkon disa funksion,
merr vlerë të kthimit, dhe ju jep atë prapa.
>> Pra, si një shembull, ne kemi array 1, 2, function-- 3.map dhe kjo
është stenografi për një function-- x shigjetë x x herë.
Ky thotë, për çdo numër në 1, 2, 3, të marrë atë.
Katror atë, dhe të japin atë.
Pra, çfarë mendoni 1, 2, 3.map x shkon në x kohë
x ju jep dhënë përsëri se ky funksion është
të kandidojë në çdo element të kësaj grup.
>> AUDIENCA: 1, 4 9?
>> NEEL MEHTA: Po, 1, 4, 9 për shkak se ju të bëni 1 herë 1.
Kjo ju jep një të tillë.
Ky është elementi i parë.
>> 2 herë 2 është 4.
Ky është një element i dytë.
3 herë 3 është 9.
Ky është një element i tretë.
Ka kuptim?
Pra, harta ka një teknikë që ju përdorim në programuesit funksionale,
Stili i ri i programimit për të bërë diçka
çdo element në listën tuaj.
Dhe kështu kjo tingëllon e njohur.
Ne kemi një listë të kartave.
Ne duam që të merrni një zëri të listës për çdo një, kështu që ne do të përdorim vetëm hartën këtu.
Ne do të themi, le të është e barabartë lista this.props, kartat, hartë.
>> Dhe kështu jepet një kartë, ne jemi duke shkuar për të gjeneruar një zëri të listës
me se kartën e përmbajtjeve anë të saj.
Le të them vetëm ne duam të japim jashtë kartat pyetje kështu card.question.
Pra, kjo listë përmban një grup i LI-së ose lista artikujt
ku ka një listë pika për çdo kartë,
dhe që përmban pyetje kartat.
Ka kuptim?
>> Ftohtë, kështu që tani le të në fakt të shtypura atë jashtë.
Pra, ne do të kthehemi një ul.
Brenda kësaj listën e parregullt, ne vetëm do të rrinë të gjithë listën
që ata na dhanë.
Ftohtë.
>> Të gjithë të drejtë, kështu që tani ky listën e parë punon vetëm gjeni.
Çdo pyetje në lidhje me listën e parë?
Ju keni një bandë e kartave.
Ju bëni një zëri të listës për çdo kartë.
Dhe ju vënë ato brenda një parenditur lista, dhe ju jepni atë.
Pra, tani le të veprojë kështu që ne embed kjo brenda app tonë,
kështu që ne mund të bëjmë këtë, pamje të listës.
Çfarë argumenti nuk kemi të kalojë tek lista pamje?
Çfarë pronat nuk kemi dhënë atë?
Mos harroni, nëse ju jepni ajo një bandë e kartave,
ajo do të bëjë listën të parë për këto karta.
Pra, çfarë do të kalojmë këtu si argument?
Audienca: Një listë e kartave?
NEEL Mehta: Yeah, kështu që karta barabartë this.props.cards, e drejtë?
Dhe kështu problemi i vetëm është se ju mund vetëm
kthyer një element të nivelit të lartë në bëjnë, kështu që ju keni marrë për të përfunduar atë në një div.
Është e pazakontë.
Pra, le të shohim nëse kjo.
A do të punojë?
>> Yep, ju shkoni atje.
Deri tani ne kemi një listë i kartave në fund,
dhe pastaj ne kemi tonë CardView vetë në krye,
dhe që do të rrokullisje në mes të dy anët e kartës.
Tani ka që e bëjnë kuptim se si unë e bëri atë?
Yeah, kështu që përsëri, ne kemi dy komponente.
Kopje Komponenti i parë jashtë çdo kartë në listë.
Kjo është pikëpamja lista.
Dhe komponenti i dytë printon vetëm atë kartë.
Në qoftë se ju t'i jepte një kartë të caktuar, ajo do të shtypura nga informacion në lidhje me këtë kartë
dhe le të ju rrokullisje prapa dhe me radhë.
>> Pra, nëse ne duam, ne mund të përpiqemi dhe të flasin për të shtuar disa karakteristika të reja për këtë.
Përndryshe ne mund të flasim pak më shumë për të shpejtësinë e reaktorit,
ose ne mund të përgjigjem pyetje ju mund të keni
sepse këto janë të gjitha pjesët kryesore të reagojnë që unë dua të flas për.
Ne mund të shkojnë përpara.
Ne mund të përgjigjem pyetjeve.
Cfaredo qe te duash.
>> Audienca: Mund të përdorni JSX në normale JavaScript?
Apo është kjo diçka që erdhi me [e padëgjueshme]?
>> NEEL Mehta: Pyetja është a mund ju përdorni JSX me normale JavaScript?
Përgjigja është po.
JSX është vetëm një mënyrë e saj merr tuaj JavaScript që ka HTML në brendësi të saj,
dhe ajo harton në JavaScript që nuk ka HTML në brendësi të saj.
Pra, vini re that-- kështu që vini re këtu.
Kjo duket sikur ju ta keni si div dhe ju keni gjëra në brendësi të saj.
>> Që përgatit për JavaScript që si gjeneron të njëjtën gjë.
I guess atë që unë jam duke thënë është se JSX është vetëm një sintaktik, si është
një preprocessor për JavaScript shumë si PHP është një preprocessor për HTML.
SH.A. është një preprocessor për JavaScript që ju lejon
ju vënë HTML brenda tuaj JavaScript.
Dhe kështu që nëse ju keni të drejtë transformatorit e cila është një gjë e quajtur [e padëgjueshme],
i cili do ta transformojë.
Preprocessor e drejta, ajo do të ju lejojnë të bëni këtë.
>> Audienca: [padëgjueshme]
NEEL Mehta: Zakonisht ju nuk keni nevojë për të vënë HTML brenda JavaScript
nëse tuaj duke bërë reagojnë.
Por ju mund ta bëjë atë anyway.
Yep?
>> Audienca: Unë mendoj se ju kishte përshkruar Reago
si një gjuhë funksionale programing.
Ne kemi qenë të mësuar C në CS50.
Është C gjithashtu një gjuhë funksional?
NEEL Mehta: Pra pyetja ka të bëjë me funksional
kundrejt një tjetër gjë të quajtur programimit domosdoshme apo procedurale.
Ka dy lloje të programeve të njohura.
Një quhet procedurale, të cilat është mbi të gjitha si komandave bërë,
dhe një është funksional, e cila është e gjitha në lidhje me të paturit e funksioneve dhe të kesh
input dhe output i atyre.
Reago është një paradigmë funksional.
C është një paradigmë shumë procedurale.
>> Dhe si një shembull, C për shembull, ju nuk e bëni këtë mënyrë deklarative
për të bërë programin, e drejtë?
Ju keni për të thënë, të shkruar këtë.
Ndryshojë këtë strukturë të dhënave.
Printo këtë.
Kjo është e gjitha në lidhje me komandat.
>> Në Reago, nuk ka që shumë komandat.
Kjo është e gjitha në lidhje me të paturit Komponentët ju vënë së bashku.
Ata janë si funksione.
Ju keni si një funksion quajtur CardView,
i cili është një funksion që ka të dhëna, prodhimit,
dhe kështu reagojnë është e gjitha në lidhje me këtë filozofi
na i having-- keni të dhëna.
Ju të kalojë atë nëpërmjet kësaj algorithm, dhe ajo do të
HTML output që ju vetëm shtypura faqe,
dhe kështu ju duhet të ndërtuar atë copë me copë.
>> Pra, për të nxjerrë një metaforë për atë që Kam thënë më parë, ju e dini se si
në Facebook në qoftë se ju merrni një mesazh, dhe ju zgjidhni atë që pjesë të rinovuar,
kjo është procedurale.
Është e domosdoshme, e drejtë?
OK, unë kam një mesazh.
Le të ndryshojë llogari atje.
>> Le të pop një dritare këtu.
Le të ndryshojë llogari atje.
Le të nxjerrë këtë këtu.
Kjo është një qasje procedurale.
>> Kjo është ajo që gjëra të tilla si këndor, Boost, Backbone, kornizat e përdorin.
Reago është funksional.
Kjo është një mënyrë shumë të ndryshme e të menduarit për gjërat.
Ajo merr këtë ide të le të kemi funksione ose algoritme që do të ju
t'i jepte të dhëna.
Ajo do të nxjerr nga goja atë çfarë duhet të jetë, dhe kompjuteri
do të kujdeset peshon jashtë.
Ju nuk merren vetë.
Bën që të bëjë pak kuptim?
Po?
>> Audienca: Në një gjuhë funksionale, çdo gjë ndodh në të njëjtën kohë?
>> NEEL Mehta: Jo, gjëra të ndodhë në rregull.
Si këtu ka ende të urdhërojë, por kjo nuk ka
të ndodhë në mënyrë të si përgëzojmë, komandë, komandën.
Kjo ndodh në mënyrë të funksion ju jep prodhim.
Vënë atë në një tjetër funksion.
Vënë atë në një tjetër Funksioni, një tjetër funksion.
>> Nëse ju bëni CS51, ju do të të mësojnë programe funksionale
një nga pak të fushëveprimit të kësaj.
Por në thelb, ajo që e bën Reago ftohtë nuk është vetëm
një mënyrë rrjedha e të dhënave dhe Dom virtuale,
por edhe kjo ide e programimit funksional.
Dhe programimit funksional është shumë e lehtë për të hartuar dhe të bëjë cool stuff nga,
dhe kjo është shumë e lehtë për të menduar rreth dhe arsye në lidhje me.
Pra, kjo është një tjetër barazim të mirë të reagojnë.
Çdo pyetje më shumë?
Po?
>> Audienca: Um, pse do të ju përdorin le në krahasim me var?
>> NEEL Mehta: Pra pyetja është pse ju përdorni në vend të le var?
Kjo është një gjë e quajtur ES6 ose ECMAScript 6.
Kjo është versioni i ri i JavaScript.
Ka një bandë e arsye teknike, Por le është një version më të mirë të var.
>> Kjo është se si ju të deklarojë variablave.
Ju mund të përdorni lë.
Ju mund të përdorni var.
Le ka një bandë e teknik reasons-- ju mund të shikoni ato
up later-- Pse është më mirë.
Në thelb, ES6 ka disa bukur Sintaksa e re, disa tipare të reja
në krye të JavaScript vjetër.
>> Pra, ne kemi si pesë minuta.
Unë vetëm të kërkuar të flas për një gjë shumë e vërtetë shpejt.
Nëse keni pasur ndonjë pyetje, le të flasim për këtë pas kësaj.
Por vetëm kështu që kjo merr kapur në kamera, unë vetëm
dua të flas pak për mënyrën se si në fakt përdorin Reagoni në Apps tuaj.
>> Nëse ju shkoni këtu, Facebook.GitHub.IO/react,
Kjo është faqja shtëpi për Reagoni, dhe ajo do të ju tregojnë se si ju përdorni në fakt
Reagojnë në faqet tuaja.
Në thelb, kjo është pak komplikuar duke u përpjekur për të instaluar reagojnë.
Kjo nuk është aq e lehtë sa ju vetëm drag dhe një rënie JavaScript në atje.
>> Ju duhet të keni transformator tuaj të ngritur, e cila do, ashtu siç bëri më parë,
kthehet JSX tuaj në JavaScript normal.
Ju duhet të gjë që do të hartojnë ju ES6 në normale.
Java ka një shumë të lëviz Pjesët ju duhet të bëni, kështu që nuk është një gjë e
quajtur Yeoman, Yeoman.io.
Dhe kjo është një linjë mjet komandë që do të të ju ndihmojë jashtë tribunë Reago tuaj
Projektet e lehtë.
>> Kështu që ju mund të lexoni në lidhje me këtë më vonë, por ka disa mjete
se Yeoman ofron.
Ata do të ju lejojnë të krijojë një Reago Aplikacioni me çdo gjë të ndërtuar në.
Si ajo do të kanë ndërtuar në, komponentët e ndërtuar në.
Ajo do të keni transformator tuaj ndërtuar në.
Ata kanë shumë të ftohtë sende ndërtuar në mënyrë automatike
duke përdorur këto gjëra quajtur gjeneratorë.
>> Pra, lexoni në lidhje me këtë në qoftë se ju pëlqen.
Vetëm të shkojnë në shërbëtor, Y-E-O-M-A-N, dhe ju mund të gjeni gjeneratorë si këto.
Dhe me gjeneratorë si këto, ju vetëm si një
është një Command Line çift komandat.
Ajo do tribunë nga një Gjithë Reago app për ju.
Ajo do të marrë të gjitha tubacionet e manual, dhe punën hungërimë bërë për ju,
dhe kjo është arsyeja pse ju vetëm të përqëndrohet për vetëm me shkrim në Reago.
>> Pra, në thelb ndërtimin e një Reago app është jo banale.
Është Wired të gjithë së bashku, por ka janë mjete që do të bëjë atë për ju.
Pra, nëse ju doni të bëni një reagojnë app, provoni duke bërë atë në këtë mënyrë.
Nëse ju vetëm duan të eksperimentojnë, ju mund të përpiquni të përdorni këtë CodePen
sepse kjo CodePen ka të gjithë reagojnë instalime elektrike.
Unë e kam bërë të gjithë punën për ju tashmë.
>> Pra, nëse ju doni të bëni si një prodhimi për lirimin reagojnë app,
provoni një nga këto gjeneratorëve.
Në qoftë se ju vetëm duan të luajnë rreth, kjo është shpesh vlen vetëm
si të përpiqet të luajë rreth me CodePen këtu.
Shëndoshë e mirë?
Ftohtë.
>> Pra, kjo është e gjitha unë kam.
Përsëri, të gjithë kodi dhe shembuj janë do të jetë në këtë website këtu.
Pra, përsëri, ne nuk flasim për shumë Sintaksa e Reago,
por për të gjetur të gjithë ata pak detajet sintaksore,
kjo është e gjitha do të jenë në dispozicion në këtë website këtu.
>> Kështu që unë do të rekomandojë si ndërmarrë hapin e parë.
Vënë atë në CodePen tuaj.
Provoni duke punuar në bërjen ajo në hapin e dytë.
Ka një hap i katërt, dhe vetëm të parë se ku ju merrni nga ajo.
>> Ndonjë pyetje më shumë, kontrolloni nga ajo faqe ose email mua.
Kjo është email tim.
Por unë do të të duan për t'ju ndihmuar me ndonjë pyetje ju mund të keni në lidhje me reagojnë.
Pra, yep, kjo është e gjitha unë kam.
Ju faleminderit shumë për shikuar apo për të marrë pjesë.
Dhe unë do të marrë ndonjë pyetje ju mund të keni pas kësaj tani.
Pra, ju falënderoj të gjithëve për të shikuar.