>> [Mūzikas atskaņošanai]
>> Neel MEHTA: Šeit tā iet.
>> Nu, visi, laipni aicināti tīmeklī progr nākotnē ar reaģēt.
Tas ir CS50.
Mans vārds ir Neel.
Es esmu TA CS50 un otrā kursa students Hārvarda koledžā un ļoti, ļoti
kaislīgi web izstrādātājs.
Tāpēc es esmu ļoti aizraujoši būt šodien runā ar jums,
vai jūs esat šeit, vai mājās skatoties, par to atbildēt, kas ir, atkal
kā jau teicu, nākotne tīmekļa progr.
>> Tātad React ir web sistēmu.
Un kā es esmu stāsta dažiem cilvēkiem šeit,
sistēma ir tikai rīku komplekts, jūs varat izmantot
strukturēt un veidot savu tīmekļa lietotni.
Un tīmekļa lietotnes ir, atkal, mājas lapas kas ir interaktīvs, piemēram, Facebook,
Twitter.com, Instagram.com, neatkarīgi.
>> Tātad Facebook ir web sistēmu kas tika izstrādāta ar Facebook
pāris gadus back-- REACT ir.
Tas jo ir izmantoti Facebook uz savu mobilo progr
un web app, Instagram.
Khan Academy ir vēl viens ievērojama agri pielietotājam reaģēt.
>> Tas tiešām bija iegūt ļoti populāri.
Ja jūs kādreiz izmantot lietas, piemēram Stūra vai Pamats, tas ir no tās pašas saimes,
bet tā ir, jo šim pārspēj savu popularitāti.
Tas ir karsts jauna lieta.
Tas ir ļoti, ļoti liels.
>> Un tā React ir laba, ne tikai kā web regulējums ēku saskarnes.
Tas ir labi, lai izveidotu tīmekļa saskarnes.
Pastāv arī lieta sauc React Native kas
ļauj jums veidot saskarnes Android un iOS
un varbūt citas platformas nākotnē izmantojot tikai vienu un to pašu JavaScript kodu.
Jūs varētu izmantot tieši tādu pašu JavaScript kodu, lai padarītu mājas lapas,
padarīt Android lietotnes un iOS progr.
>> Tas ir ļoti, ļoti aizraujošs laiks.
Tas ir ļoti, ļoti foršs iespēja.
Tas ir patiešām universāls web interfeiss attīstības instrumentu,
tāpēc tas ir ļoti, ļoti Svarīgi zināt.
Un, jo man bija spēcīgi cilvēki pirms, tas, es domāju,
gatavojas mainīt to, kā mēs veidot tīmekļa lietotnes uz visiem laikiem.
Tātad, tas ir varbūt mazliet hiperbola, bet es domāju, ka tas ir diezgan laba lieta zināt.
>> Labi, lai to, kas ir reaģēt?
Reaģēt ir pamats jūs varat izmantot ēku saskarnes.
Saskarne ir, atkal, mājas lapa, vai ne?
Tātad, šeit ir Instagram.com, lietojumi reaģēt.
>> Reaģēt ir veidota uz Ideja par sastāvdaļām.
Komponents ir HTML elements par steroīdi,
tāpēc HTML elements ir kā pogas.
Tas ir punkts.
Tas ir header, vai ne?
Un Instagram izmantos šos, bet tas izmantos arī komponentus reaģēt.
>> React sastāvdaļas ir souped-up HTML elementi
ka ir savas uzvedības kuros iekļauta.
Tātad, kā, piemēram, mēs varētu būt laika elements, laiks komponents,
kas satur, piemēram, laika zīmogs, jūs zināt,
profils komponents, kas saturēs profila attēlu
un personas vārds.
Tas var būt, piemēram, counter, kas var rēķināties tāpat skaita patīk,
un, ja jūs noklikšķiniet uz to, tas būs skaita pieaugumu patīk.
Komponents ir tikai ķekars HTML kodu, kas
ir dažas funkcionalitāti ietin iekšpusē no tā.
Tātad, tas ir tāpat kā HTML elements par steroīdi, kā es teicu iepriekš.
Jūs varat lietot šos komponentus, un jūs varat nodot tos kopā
veikt jaunus komponentus, it Šajā gadījumā, pēc sastāvdaļa,
kas satur visu šo stuff.
Tas satur laiks, profils, LikeCounter, varbūt komentārs
un varbūt attēla pati.
Un tā tīmekļa lietotnes ir tikko uzcelta, ņemot detaļas un liekot tos kopā.
Instagram barība ir nekas vairāk kā ķekars amata viens pēc otra,
katrā post satur, piemēram, Time, Profils, LikeCounter, un tā tālāk.
Tas ir veids, kā ēka māju.
Jums nav būvēt māja no augšas uz leju.
Tu ņem components-- tevi veikt, piemēram, vannas istabā.
Tu ņem bedroom-- jūs stick tos kopā, un jums ir jauna sastāvdaļa.
Jums ir jauna daļa no mājas.
>> Tātad reaģēt ir visi pamatā Šī ideja par sastāvdaļām, kas
ir interaktīva, ka ir deklaratīvi.
Tāpat kā jūs vienkārši pateikt to, ko profils ir, un tas padara to.
Tie ir saliktas.
Jūs varat veikt laiku un profilu, ielieciet viņiem kopā, lai kaut ko labāku.
Un viņi atkārtoti, tādēļ, ja jūs ir pirmkods amatu,
jūs varētu iegult šo jebkur.
>> Jūs varat iegult Instagram lieta, par jūsu pašu mājas lapā.
Jūs varat iegult Facebook, piemēram, tik ilgi, kamēr tā izmanto React kā labi.
Tātad sastāvdaļas ir tiešām, tiešām, tiešām spēcīgi celtniecības bloki tīmeklī
kas var tikt izmantoti jebkurā vietā un salikt kopā, lai padarītu jaunus celtniecības blokus.
Tas ir ļoti, ļoti augsta līmeņa pārskats.
Tātad, atkal, ja jums ir kādi jautājumi jebkurā vietā
par filozofiju reaktora, ka kodēšana, lai apturētu mani, un ļaujiet man zināt.
>> Labi, tā reaģēt ir forši, jo tā ir cits veids, kā meklēt
pie kā jūs veidot tīmekļa lietotnes.
Jūs droši vien esat dzirdējuši par MVC A modelis jums kontrolēt ar CS50 vai kāds
cits zondēšana nodarbības jūs izmantojat.
Un lielākā daļa sistēmas ir uzcelta ap ideju MVC.
Reaģē nav.
Reaģēt ir veidota ap ideja no vienvirziena datu plūsmas
kā redzams šajā diagrammā vai grafiku šeit.
>> Būtībā, jums ir datu avotu.
Un datu avots izlems Kā nolikt dažus komponentus.
Un komponenti tad, kad tie mainās,
viņi pateiks datu avots, lai mainītu.
>> Lai izmantotu Instagram Piemēram, jūs varētu būt
sarakstu post objektus, piemēram, datubāzē vai kaut ko.
Ka datiem.
Un tad mūsu post sastāvdaļas prasīs, ka dati,
un izmantot šo informāciju, lai padarītu lieta uz ekrāna.
Tas ir tas, ko arrow no datu komponents ir,
un tad, ka paši dati tiek izmantoti padarīt ķekars sastāvdaļu.
>> Facebook Messenger, lai Piemēram, kas ir reaģēt,
Jums varētu būt sarakstu ziņojumus kā datu avota.
Un kas varētu apgrūtināt tikai saraksts ziņu
bet arī saraksts draugu jums ir.
Jums ir nelasītas skaitu.
Varbūt arī padarīt Facebook lieta kas ir apakšā Facebook.com.
Tas pats dati ir vienots avots patiesības
un kas rada daudz sastāvdaļas, kas padarīts.
Un kad viens no tiem, sastāvdaļas tiek mainīts,
tas iet atpakaļ un izmaiņas datu avotu.
>> Jūs nosūtīt īsziņu, vai ne?
Kas maina datu avotu.
Tu lasīt savas ziņas, tāpēc jums noteikti nelasītu līdz 0.
Kas maina datu avotu.
Un paziņojums, ka visi šie viens arrow iet atpakaļ uz to pašu datiem
avotu, lai jūs zināt, dota noteiktu datu kopu,
jūs zināt, tieši to, ko lapa ir gatavojas izskatās.
Tas ir determinēti.
Jūs zināt, ņemot vērā konkrētus datus, ko lapa ir gatavojas izskatās.
Jūs varat paredzēt, kā tas notiek, lai uzvesties un kā lietas notiek
strādāt, kad viņi kopā.
>> Un, ja man būtu miljons sastāvdaļas šeit, tas uzvedas pats, vai ne?
Jums nebūtu kāds dīvaini starpsavienojumi.
Viens dati padarīti miljons komponentus.
Miljons sastāvdaļas varētu doties atpakaļ un rediģēt datus.
Un tāpēc tas ir ļoti jauki.
Mēs esam celtniecības saliktas, viegli mērogojams tīmekļa lietotnes.
>> Jums ir viena datu avota, avots patiesības.
Tas stāsta savus komponentus Kā nolikt lapu,
un komponenti rokturis mijiedarbību.
Un, ja viņi vēlas, lai mainītu lietas, dodieties atpakaļ
un pateikt datu avots mainīt.
Jēga?
Tātad React ir visu par sapratni kā veidot sastāvdaļu
un to, kā padarīt savu komponents mijiedarboties ar ārpasauli.
>> Making detaļas INTERACT ar ārpasauli
izmanto citu tehnoloģiju sauc Flux, kas
ir sistēma, kas ir pievieno uz React.
Mēs nebrauksim, lai runātu par to.
Mēs ejam runāt vairāk par, ņemot vērā, dati, kā jūs varat padarīt sastāvdaļa?
>> Un tā reaģēt, ir tiešām foršs, jo jums var izmantot ar jebkuru atpakaļ beigās vēlaties.
Ja jums ir, piemēram, Python atpakaļ beigām, Ja jūsu Python var izspļaut dažus datus,
Reaģēt var padarīt to.
Ja Jums nav JS rezultāti Datu, React padara to.
Ruby sliedes līdzi dati, React padara to.
>> Tātad React pamatā ir web view-- priekšgala ar komponentiem
jebkura datu avota whatsoever.
Un tā iet no datu avota līdz reaģēt sastāvdaļas ir diezgan viegli.
Iet citu ceļu, ir nedaudz grūtāk.
Kas izmanto plūsmu, kā jau minēju iepriekš.
Mēs nav iekļuvuši, ka.
Mēs vairāk koncentrēties uz datu, lai komponenta pusē.
Tādā veidā jūs varat veikt atdzist, jautri tīmekļa lietotnes.
Tas neietekmēs ārpasauli tagad, bet tas ir cits stāsts.
>> Labi, tāpēc, ja jūs bijāt šeit mana pēdējā seminārā
jūs zināt, ka visas kodu Šodienas diskusija būs par šo URL
šeit, sorry, šis URL šeit.
Un būtībā mēs ejam, lai iet caur četriem soļiem, varbūt pieci,
iespējams, ne pieci.
Mēs pārvietoties pa četriem soļiem ēkas paraugu React app.
Un tā visu pirmkodu par katru solis ceļu
būs tieši šeit, tāpēc, ja jūs pēc kopā mājās,
justies brīvi iepazīties šo kodu.
Ja jūs pēc kopā šeit, mēs būsim parādot to uz ekrāna,
tāpēc nav jāuztraucas par to.
Bet, ja jūs esat mājās, justies brīvi apmeklēt šo tīmekļa vietni.
Un, jā, jums vajadzētu būt iespējai iegūt viss kods jūs kādreiz nepieciešams šeit.
Tātad tā ir laba apkrāptu lapas, kā arī Jūsu nākotnes piedzīvojumiem ar reaģēt.
Atdzesē, tāpēc, ja visi, kas ir šeit, un pat tad, ja esat mājās,
uzvilkt šo tīmekļa vietni, is.gd/cs50react, nē kapitāls, ne pasvītrojums, nav nekas.
>> Jūs redzēsiet lapu, kas izskatās mazliet kā šis.
Šī ir lieta, ko sauc CodePen.
CodePen ir sadarbības kodēšanas vide
ar kuru es varu rakstīt kodu šeit, un tas būs automātiski nosūtīts uz jums.
Un, lai šādā veidā, es varētu rakstīt kodu.
Es varu palaist kodu šeit.
>> Par example-- un ja tas reloads-- redzēt, Es skrienu JavaScript kodu lapā
tieši šeit, un tas būs automātiski padarīt mājas lapu
ar šo JavaScript kodu.
Un tā tas ir veids, lai mēs varētu izmēģināt kodu
tiešām ātri, neizmantojot Mūsu ID vai izmantot mūsu vietējo mašīna
vai neatkarīgi.
Tas ir ļoti ātrs veids, lai jūs varētu maketu un izmēģināt dažāda veida kodu.
>> Tāpēc es esmu gatavojas veikt piemērs kods, liekot to šeit.
Mēs ejam, lai tiktu strādāt caur to.
Un, ja jūs esat mājās, jūs var pull šo augšu, kā labi.
Un es esmu jau uzstādītas Reaģēt šeit, lai jūs varētu vienkārši
rakstīt savu kodu šeit, un mēģināt to kā savu rotaļlaukums.
>> Jā, ja ikvienam atvērt šo saiti šeit.
Lūdzu, iedodiet man thumbs up, kad esat to atvērtu.
Cool, cool cool.
Nav nekas šeit tagad, bet mēs mainīsies, ka ļoti drīz.
>> Labi, tāpēc React ir JavaScript bibliotēka, un kā tāds,
prasa zināšanas par JavaScript, kas ir web programmēšanas valoda.
Un tas tiek izmantots citām lietām Tagad pārāk, bet galvenokārt web attīstīt
valoda, tādēļ, ja jums ir svešs ar ka, lasot vietu sauc JSforCats.com.
Tas ir brīnišķīgi.
Jūs varat uzzināt JavaScript pusstundas.
Tas ir neticami.
>> Tātad to lasīt.
Mēs arī ir daudz HTML šeit, jo mēs esam projektēšana interneta lapas, protams.
Tātad, ja jums nav pazīstami ar HTML, izbraukšana HTMLdog.com.
Es domāju, ka mācīšanās React ir miljons reižu vieglāk, ja jums jau ir
zināt celtniecības blokus.
Ja jums ir sastāvdaļas, tas ir viegli izdarīt lielāku sastāvdaļa.
Tas ir React valodu jums.
>> Tik iet uz priekšu un dot šīs lietas, lasīt.
Apturēt šo video.
Dodiet tai lasīt, ja esat mājās, ja jūs neesat
pazīstami ar HTML vai JavaScript
Labi, lai to, ko mēs gatavojamies darīt, ir, mēs ejam, lai padarītu
ļoti vienkāršas flashcard app izmantojot reaģēt.
Mēs ejam, lai būtu flashcard.
Jūs varat uzsist karti uz priekšu un atpakaļ.
Un mēs arī sarakstu visas kārtis, kas mums ir,
un, ja mēs esam sajūta ambiciozs, mēs varētu būt
iespēja pārslēgties starp automašīnas, klikšķinot uz tām.
>> Bet tas ir, no jūsu tukša kauli, ļoti vienkāršs React lietotni.
Un tā tas ir patiesībā nav triviāla īstenot,
bet mēs ejam, lai pierādītu, ka, ja jūs Tas, tas ir ļoti, ļoti viegli to pagarināt
ja citi cilvēki jums palīdzēt ar to.
Tātad mēs ejam, lai iet caur četriem soļiem sākot no nulles, lai izveidotu šo.
>> Labi, tā četri soļi, mēs sākt ar pirmo soli.
Pirmais solis būs veidojot savu pirmo komponentu.
Kā jau teicu iepriekš, komponents React ir tikai HTML elements par steroīdi.
Tas precizē HTML un daži uzvedību, un tas
norādīs, kā cilvēki var mijiedarboties ar to how
tas būtu iekšējo stāvokli.
Tāpat poga zinās, piemēram, cik daudz reizes tas ir bijis noklikšķinājis piemēram,
un tas zinās, kā likt sevi out.
>> So iesim uz priekšu un veidot mūsu Pirmais komponents izmantojot JavaScript.
Tātad, ja sintakse izskatās dīvaini, tas ir tāpēc, ka tā veida ir.
Tātad, atkal, mēs ejam veikt mainīgo sauc
app izmantojot atslēgvārdu pieņemsim, kas padara mainīgo,
ļaujiet App vienlīdzīgu React.createClass.
>> Reaģēt ir bibliotēka un ir Izveidot klases funkciju.
Un šī funkcija ir mazliet kodu, kas jums
var izmantot, lai izveidotu jaunu no React komponentu veids.
Un tā React.createClass padara komponentu,
un šis komponents varētu darīt lietas.
Galvenais, to var darīt, ir padarīt kaut kas, padarīt kā funkcija.
>> Atkal, ja šis rādītājs nav skaidrs jums, es ieteiktu jums iet uz JS kaķiem
un to pārbaudīt out.
Vai tas pietuvināto pietiekami labi?
Cool.
>> Tātad katrs komponents vajadzībām lai būtu padarīt funkciju.
Apmetums funkcija saka, Ko es varu izdrukāt uz ekrāna?
Bet komponents ir bezjēdzīgi, ja tas nav
Zināt, ko drukāt uz ekrāna, lai Jums ir nepieciešams, lai būtu padarīt funkciju.
>> Tātad apmetumu lieta, jums vienkārši nepieciešams, lai atgrieztos kādu HTML.
Un, kas ir foršs ir tas, ka tur ir lieta, ko sauc
JSX, kas ir no paplašinājums JavaScript, kas tiek izmantots ar reaģēt.
Tā pieņemsim jūs rakstīt HTML iekšā Jūsu JavaScript, kas
izklausās veida dīvaini, kad Jums vispirms domā par to,
bet tas padara daudz nozīmē pēc tam.
Tātad, mēs varam izdarīt.
Ja Jūs esat iepazinušies ar HTML, es zinu mums ir div ar vispārējo mērķi
konteineris sīkumi.
Mēs varam atgriezties div, un iekšā tas div, mēs varam nodot sīkumi.
>> Tātad pieņemsim, ka mēs gribam padarīt tikai taisni-up flashcard tagad.
Flashcard, es teiktu, būs jautājumu un atbilžu.
Tātad iekšā šo div, pieņemsim izdrukāt punkts
ka saka question-- Kas ir galīgā atbilde uz dzīvi, Visumu?
Un tad atbilde ir būs, protams, 42.
>> Tas nenāca klajā labi vispār.
Jā, tā būtībā jūs varat patiešām rakstīt HTML iekšpusē JavaScript.
Un tas būs izdrukāt uz ekrāna.
Tātad, pieņemsim to izmēģinātu.
>> Tāpēc mums ir mūsu sastāvdaļa.
Mums ir nepieciešams, lai pastāstītu reaģēt likt komponents uz ekrāna
tik React.render, tāpēc paziņojums, ka mēs ārstēt lietotni kā jebkuru citu elementu.
Mēs rakstīt tā, kā tas bija HTML elements.
Tāpat tā vietā, lai sakot, piemēram, img par attēlu vai P punktu,
jūs rakstīt App, tāpēc App ir rīkojas tāpat kā HTML elements.
Kā jau teicu iepriekš, tas ir elements par steroīdi.
>> Tātad jūs padarīt app, un jūs to vietu, lai to.
Un tas ir, kā jūs varat pateikt to, kur likt to.
Man ir izveidojuši vienkāršu div Gluži lapa sauc ar ID lapas,
un tas ir, ja elements ir gatavojas iet.
>> Un mēs nebrauksim, lai palaistu ar HTML.
Būtībā tas ir gatavojas iegūt likt iekšā Šīs lapas elementa
ka mums ir uz ekrāna.
Tātad tas darbojas šo kodu, un tā vērš šo lieta uz ekrāna, tāpēc šeit mēs esam.
Mēs esam panākuši savu pirmo reaģēt sastāvdaļa.
>> Tik vienkārši kā Atgādinājums, mēs maigi izgatavoti jauna veida sastāvdaļu, vai ne?
Tas ir tas, ko React.createClass.
Un to, ka komponents, mēs stāstīja to, kas tas būtu jādara.
Ikreiz, kad šī sastāvdaļa ir uzdrukā uz ekrāna,
tas būs izdrukāt div ar divi punkti iekšpusē no tā.
>> Un ko mēs darījām, mēs, jaunu lietotni izmantojot leņķa kronšteins app notācija.
Mums teica, tā, lai to iekšpusē lapas elementu.
Un tā, ko es darīju, tas radīja jaunu app no ​​šīs veidnes.
Un tad es teicu, lai padarītu to.
Tātad tā teica, OK, app, ko man vajadzētu izdrukāt?
App saka, iet izdrukāt div ar diviem punktiem iekšpusē no tā.
Un voila, tur ir mūsu div ar divi punkti iekšpusē no tā.
Jēga tik tālu?
>> Tātad, atkal, viss izaicinājums reaģēt ir tikai zinot, kā padarīt komponentus.
Kā padarīt sastāvdaļas strādāt kopā.
Tagad, kad mēs esam padarījuši mūsu pirmā komponents, iesim atpakaļ
un padarīt sastāvdaļas pielāgojama.
Tātad, jūs zināt, kā HTML jums var sniegt jūsu pogas nodarbības?
Jūs varat dot savu enkuri href.
Jūs varat dot savu ieejas tipu, vai ne?
Jūs varat dot lielāku pasūtījuma īpašības uz visiem jūsu elementiem
lai padarītu to interesantāku.
Un mēs tiešām varam darīt tieši tas pats.
>> Tātad pieņemsim, ka mēs vēlamies, lai mūsu app iet padarīt jebkuru karti.
Tieši tagad mēs vienkārši sniegusi hardcoded karti.
Mēs zinām, tur ir tikai viens karti tā var darīt, tāpēc mēs esam
gatavojas izmēģināt un mainīt šo tagad tik ka mēs varam Dāvini kādu karti.
Tas būs izdrukāt karti.
>> Jums vajadzētu mēģināt un darīt savu sastāvdaļas ļoti standarta.
Tātad šādā veidā es varētu e-pastu šis mans draugs, un būt, piemēram,
kāds flashcard jums ir, tikai pabarotu to šeit,
un tas būs darīt to pats.
Jums var likt otrai lietas savā app.
>> Bet vispirms, pieņemsim lauzt šo augšup diviem komponentiem,
bet mēs gribam, lai atdalītu karti drukāšanas daļa no faktiskās app daļu.
Tātad, ko mēs varam darīt, ir mums var mainīt no App
līdz CardView, tikai jauns nosaukums app,
un mēs varam veikt jaunu komponents sauc App,
nedrīkst jaukt ar veco App.
Mēs esam ieguvuši createClass, un tāpat kā HTML,
Jūs varat nest React sastāvdaļas iekšpusē viens no otra.
>> Tātad šajā padarīt funkciju, funkcija atgriešanās CardView,
un tas ir tieši tas pats.
Redzēt, kāpēc tas ir viens un tas pats?
Tā vietā, padarot tikai app, kas ir div un pārī iekšpusē no tā,
app padara CardView, un CardView padara div un punktu.
Tātad šis ir mūsu pirmais piemērs ligzdošanas elementi iekšpusē viens otru.
Vai tas ir jēga?
Tātad, atkal, mums ir CardView elements.
Mums ir app elementi ka tas ir lielāks nekā.
>> Labi, tāpēc mēs vēlamies, lai mūsu CardView-- ja jums dot labu CardView noteiktu karti,
tas būs izdrukāt jums, vai ne?
Tātad, pirmkārt, mums ir nepieciešams, lai padarītu karti, tāpēc pieņemsim veikt karšu objektu.
So let manu karti equal-- ja jūs visi pazīstami,
tas ir tikai apzīmējums pieņemšana iebilst JavaScript.
Tas ir veids, kā struct C, lai mēs, karti,
un tāpēc tagad mēs varam nodot šo karti kā īpašumā vai kā atribūtu HTML
terminoloģija uz mūsu app.
Tātad, mēs varam darīt, App card vienāds myCard.
>> Jūs zināt, kā ieeju, jums ievades veids ir vienāds ar tekstu vai pogu
klase vienāds BTN par bootstrap ,?
Pati ideja, App karte equals-- tev likt breketes here--
App karte vienāds myCard, tāpēc šis saka mums ir šī karte objektu.
Es esmu gatavojas nodot to kā īpašums pie app sastāvdaļu.
Un šī app komponents jābūt iespējai piekļūt un darīt
interesanti sīkumi ar to.
>> Tātad mūsu app būs dota karte, tāpēc tagad,
pieņemsim ir app tikai dot karte ar CardView
sevi, jo, piemēram, app nav gatavojas zināt, ko darīt ar to,
tāpēc mēs vienkārši dot to CardView.
Tātad mēs nodot to uz tāpat, karte ir vienāds,
un tāpēc katrs komponents var piekļūt lietas, kas ir dota, lai to.
Viņi var piekļūt īpašības kas ir dota, lai to
izmantojot šo sintaksi, this.props.card.
>> Tātad, kas notiek šeit Jums ir myCard objektu.
Jūs nodot to app izmantojot App karti vienāds myCard.
Šo karti objekts tiek dota jūsu app.
App var piekļūt kā this.props.card.
Tas ir veids kā attēlu zina, kas tas ir avots ir.
>> Šī app zina, kas tas ir karte ir, un to var darīt lietas ar to.
To var izdarīt aprēķinus.
Tā var pieņemt lēmumus, pamatojoties off no tā.
>> Tagad, es biju gatavojas pāriet this.props.card uz CardView.
Jēga tik tālu?
Tas būs daudz lietderīgāk tagad.
>> Labi, tāpēc tagad mēs esam pie CardView.
Mūsu CardView, ņemot karti, būtu izdrukāt savu jautājumu un atbildi.
Tieši tagad mēs vienkārši izdrukāt dažas Hardcoded jautājumi un atbildes.
Mums ir nepieciešams, lai noskaidrotu out-- mums vajag lūgt karti, ka viņi deva mums
kāda ir jautājumu un atbilžu, un tad izdrukāt šo ārā no ekrāna.
>> Tātad, mēs varam izdarīt šeit.
In padarīt begin-- vispirms darīt vienāds.
Tātad, ko mēs darām šeit ir, mēs zinām, ka kartes ir dota mums uz īpašumu,
labi?
Tas ir dots mums kā izejvielu.
Tāpat kā tas ir gandrīz kā argumenti uz funkciju.
Šī karte ir arguments gandrīz līdz šim CardView.
>> Mēs ekstrakts, ka, un nodot tas uz mainīgo jautājumu.
Pārliecinieties, ka atbilde gāja uz mainīgas atbildi.
Liek ka karte atbildēt.
Un tagad, ka mēs esam tie, tā vietā, izdrukāt šo tekstu,
mēs ejam, lai izdrukātu neatkarīgi viņi deva mums.
>> Tātad šis stuff-- tāpēc mēs ejam izbāzt jautājumu.
Let 's redzēt, ja tas darbojas.
Atdzesē, tāpēc pieņemsim soli caur to vēl vienu reizi tikai, lai pārliecinātos.
>> Tātad mana karte ir karte objekts, un mēs dodam šo karti app.
Un app ir gatavojas veikt karti un dot to uz CardView.
Un tas CardView saka, ja jums iedodiet man jebkuru flashcard objektu,
Es izdrukāt savu jautājumu un tā atbilde, vai ne?
>> Tātad, ko es varētu darīt, ir varu nosūtīt šo kodu, pirmais
piemēram, 10 rindiņas manu kodu, lai mans draugs.
Viņš varētu iegult to savu pieteikumu.
Un tik ilgi, kamēr viņš bija tas pats, tāpat CardView karte vienāds tas,
tik ilgi, kamēr viņš radīja CardView un deva to pareizo informāciju,
viņš varētu padarīt savu karti.
Un tā šādā veidā, tas ir patiešām foršs veids, lai jūs varētu veidot
sastāvdaļas, kas izmanto viens otru, vai ne?
Šī karte, es varētu publicēt šis CardView internetā,
un cilvēki varētu to izmantot.
Vārdu sakot, tas ir tāpat kā viens no standarta funkcijas C bibliotēkā.
>> Tā ir funkcija, kur kāds ir uzrakstījis to.
Tu dod zināmu ieguldījumu.
Tas būs ražot noteiktu produkciju.
Jums nav vienalga, kā tā darbojas iekšēji.
Tik ilgi, kamēr jūs to tiesības ievadi, tas būs izdarīt pareizo izeju.
>> Un komponents var būt doma no tādā pašā veidā.
Tas CardView ir līdzīgs bibliotēka funkcija.
Ja jūs tā kādu karti kā īpašuma, tā būs
izdrukāt saturu šīs kartes.
Tāpat kā, ja es varu mainīt savu karti nevis būt, piemēram, to, kas ir 5 plus 37,
tā tiks atjaunināta atbilstoši.
Tik vienkārši mainot ievadi, tas saņem noteiktu produkciju.
Tātad jūs varat iedomāties komponentu gandrīz kā funkcijas šādā veidā, kas
jums var likt kopā.
Jūs saņemsiet ievadi, piemēram, šo CardView kā ieejas, jūs saņemsiet produkciju.
Šajā gadījumā, produkcija ir HTML.
Jēga tik tālu?
Atdzesē, tāpēc atkal, īpašības ir kā jūs varat nodot informāciju
uz un no komponentiem.
>> Labi, tāpēc pieņemsim padarīt šo lieta interaktīvs.
Tieši tagad tas ir sava veida garlaicīgi.
Kas ir [dzirdams]?
Jūs varat izdrukāt dažas out, bet tas ir viss, tā var darīt.
>> So iesim atpakaļ uz vecais jautājums tikai tagad.
Labi, tā jau tagad šie komponenti ir garlaicīgi, jo visi tie,
viņiem ievadi.
Tās padara produkciju, vai ne?
Tas ir sava veida garlaicīgi.
Mēs vēlamies, lai mūsu komponenti, lai varētu būt
sava veida iekšējā stāvokļa, tāpat atcerēties kaut ko.
>> Par flashcard, lai Piemēram, kāda veida valsts
jūs varētu vēlēties, lai atcerēties par flashcard?
Kas pagaidu statusu jūs varētu vēlēties, lai atcerēties
par flashcard kādā flashcard app?
Mērķauditorija: Vai tas ir bijis Pagriezts?
Neel MEHTA: Jā, taisnība.
Tātad jūs varētu vēlēties, lai saglabātu līdzi ir jums stāties pretī vai ir
jūs sejas uz leju uz kartes.
Par Facebook, piemēram, jūs vēlas atcerēties, kur ziņu barībā
tu esi vai gribētu kurš profilu jūs darāt tieši tagad.
>> Par Messenger, patīk tas, ko jūs teksts ierakstiet ievades lodziņā, vai ne?
Ja jūs atsvaidzināt lapu, tas iet prom.
Bet jums nav īsti aprūpi.
Tas ir tikai īslaicīgs.
Yeah?
>> Mērķauditorija: [dzirdams]
Neel MEHTA: Like zibspuldzi karti, kā jūs varat redzēt
jautājums pusē vai atbilde pusē?
>> Mērķauditorija: OK.
>> Neel MEHTA: Like divpusējas flashcard, vai ne?
Jā, lai jūs vēlaties ir šī ideja par šobrīd
Man ir īpašības, kas ir kā izejvielas, bet valsts, kas ir īslaicīgs, uh,
kur jums ir uz lapas, vai ne?
Atkal, es teicu Facebook Messenger, man patīk, kurā persona
skatāt Facebook vai kas ir profils, vai ne?
>> Tas ir tikai īslaicīgs.
Tas ir svarīgi, lai parādītu lietotājam kas notiek, bet atsvaidzināt lapu.
Tas nav īsti jautājums.
Tātad, tas ir pagaidu stāvoklis, lai mēs visi tā stāvoklis.
>> Tātad, atkal, tur ir valsts un butaforijas.
Balsti tiek dots ieguldījums no datu avota.
Valsts ir tāpat kā nepildīšanu.
Tas ir tāpat kā sīkumi, kas padara lieta interaktīvs.
>> Tātad mūsu CardView-- pieņemsim ir Mūsu CardView-- tāpēc tas bija jauki.
Ko mēs darīsim šeit, mēs ejam pieskarties CardView un tikai CardView.
Un tāpēc mans draugs, kurš dabūja šo, viņi nebūtu nepamanīs atšķirību.
Viņiem nebūtu jāmaina kāds no viņu pašu kodu,
bet viņi gribētu redzēt viņu CardView got souped up.
Tas ir jauki daļa par sastāvdaļām.
>> Labi, tāpēc mūsu CardView, pamēģināsim un sekot līdzi, vai mēs esam pakāpeniski up
vai seju uz leju.
In React mēs to izdarītu, vispirms norādot sākotnējo stāvokli.
Kur karte sākt?
>> Tāpēc esiet funkciju sauc getInitialState darboties, un mēs atgriežamies objektu.
Šis objekts ir daži stāvokli, un valsts ir tikai atslēgas vērtību pāri.
Tāpat kā uzdot, jums ir svarīgs un vērtība, jums patīk vārds ir virkne.
>> Šajā gadījumā, teiksim priekšā ir taisnība.
Tas saka, ka mums ir valsts.
Viens komponents valsts ir atribūts sauc priekšā.
[Dzirdams], tā pēc noklusējuma, mēs esi kartes priekšpusē,
un mēs varam mainīt kā mēs uzsist karti.
Jēga?
>> Labi, tāpēc padarīt, tieši tagad, mēs esam parādot jautājumu un atbildi.
Tagad to, ko mums vajadzētu darīt ir parādīt jautājumu
ja mēs esam uz kartes priekšpusē, lai atbilde ir par kartes aizmugurē.
Tas ir iemesls, kāpēc jūs visi padarīt karte interaktīvs.
Tātad pamēģināsim un tas šeit.
Nu, vispirms tikai veikt mainīgo.
Mēs varam jautāt tagad this.state.front.
Mēs piekļūt norādīt to pašu mēs piekļuves aksesuārus, tāpēc this.state.front.
>> Ja mēs esam priekšā, tad teksts ir this.props.card.question.
Ja mēs esam par priekšā card, mēs esam gatavojas izmēģināt un paķert
jautājums no kartes.
Pretējā gadījumā, ja mēs esam uz muguras karti, ko mēs darām?
>> Mērķauditorija: Atbilde?
>> Neel MEHTA: Yep, tā teksts vienāds this.props.card.answer.
Bet, ja jūs pamanāt, mēs izmantojam valstij pieņemt lēmumu
jo tagad komponenta izskatīsies atšķirīgs
pamatojoties off, kā tie mijiedarbojas ar to.
Tā vietā, izdrukāt to, mēs vienkārši izdrukāt tekstu.
Atdzesē, tāpēc tagad, kā jūs redzat, mēs redzam tikai šo jautājumu.
Un, ja es mainītu valsts šeit manuāli uz priekšējā ir nepatiesa mēs iegūstam 42 atpakaļ.
>> Tātad, atkal, šis komponents ir sava valsts.
Tāpat poga zina, vai tas ir bijis nospiests, vai ne,
šī lieta zina, kas ir par priekšā vai aizmugurē.
Pēc noklusējuma tas ir uz priekšu.
Un tad, ja tas ir uz priekšu, mēs izdrukāt šo jautājumu.
Ja tas ir uz muguras, mēs izdrukāt atbildi.
Tātad, atkal, informācija ņemot vērā, ir tas pats.
Tā tikai izskatās citādi pamatojoties uz to, kā jūs programma to.
Tā, piemēram, Facebook Messenger, pat tad, ja jūs saņemsiet to pašu datu avotu,
tas varētu izskatīties dažādi jo valsts ir atšķirīgs.
Jūs esat meklē dažādas personas vēstījums.
>> Labi, tāpēc tas viss ir labi un labs, bet tagad to, kas patiesībā
padara mūs spēj mainīties, vai Mūsu karte ir priekšā vai aizmugurē.
Mēs varam izdarīt, pievienojot uzsist poga, poga ar karti, kas
uzsist karti, ja tas ir [nedzirdama].
Tātad pieņemsim pievienotu pogu šeit, tas pogu, un šī poga teiks uzsist.
>> Un tāpēc tagad, to nedara neko.
Tā tikai izskatās jauki.
Ko mēs varam darīt, ir, mēs varam pievienot klikšķi apdarinātājs, onClick vienāds this.flip,
un mēs vēlāk definēt uzsist.
Bet būtībā, onClick ir funkcija, kas
izpaužas izsaukta, kad lietotājs noklikšķina uz tās.
>> Tātad poga zinās kad tas ir bijis uzklikšķināt.
Gāja tas ir bijis noklikšķinājis, tas tiks flip karti.
Tas ir veids, kā jūsu picu piegāde puisis.
Jūs, piemēram, labi, kad kāds aicina mani, es ņemšu piegādāt picu, vai ne?
>> Jūs reģistrē šo klausītājs.
Jūs klausīties notikumu.
Tu call, un tad, kad Pasākums notiek, tu kaut ko darīt.
Jūs saņemsiet picu.
Šajā gadījumā, kad tu esi uzklikšķināt, jūs uzsist karti.
>> Un tāpēc mums ir nepieciešams, lai noteiktu funkcija, kas uzsist karti,
tāpēc mēs rakstīt, ka tiesības šeit, uzsist funkciju.
Un tā, ko jūs domājat flip darīs?
Atkal tas izpaužas sauc, kad mēs noklikšķiniet uz pogas Flip.
Kas ir funkcija flip darīt?
>> Mērķauditorija: Mainīt this.state.front no uzticīgi viltus, viltus taisnība.
>> Neel MEHTA: Yep, tā veic visus this.front is-- priekšējā valsts ir.
Veikt priekšējo stāvokli, ja tā ir taisnība, padarīt to nepatiesa.
Ja tas ir viltus, padara tā ir taisnība, vai ne?
Tātad pamēģināsim to.
>> Jūs nevarat mainīt stāvokli vienkārši darot this.state.
Jūs nevarat izdarīt.
Jūs nevarat darīt.
Jums ir izmantot funkciju sauc this.setState.
>> Tātad jūs varat teikt this.setState priekšējais Kols šī kur, atkal, izsaukuma
punkts nozīmē pretējo.
Es domāju, ja šis. state.front ir taisnība, tas būs savukārt nepatiesa.
Tāpēc mēs noteikti valsti no taisnība nepatiess.
Ja tas ir viltus, mēs noteikt to viltus patiess.
>> Tikai paziņojums, ka mēs noteikti un saņemt nedaudz atšķirīgi, un tāpēc pamēģināsim šo.
Bada Bing, apskatīt šo.
Flip poga tagad pārslēgt priekšas uz aizmuguri stāvoklī.
>> Un tāpēc šeit ir, ja jūs redzat Mazliet burvju reaģēt.
Tāpat mēs nekad teicis to, ka tā ir jauna padarīt.
Mums nekad nav teicis, ka ievilktu neko.
Ja jūs darāt šo bez reaģēt, jūs
ir kuri paredzēti, piemēram, kad uzsist poga ir noklikšķinājuši,
jūs ir pateikt to manuāli atkārtoti apmetuma, vai ne?
>> Reaģēt ir patiešām atdzist, ka, ja jums to zināmu stāvokli un īpašības,
tas vienmēr padara tieši tas pats.
Un tad, kad mēs kādreiz mēs mainīt valsts un īpašībām,
reaģēt tikko atkal padara visu lieta.
Tā zina, ka tur ir viens pret vienu atbilstība
starp valsti un parametru un HTML.
Tātad, ja kāds no tiem mainās par caur noteiktu valsti,
tas mainīsies, kā pay atkārtoti padarīti.
Un tā būtībā React ir kā gaida, lai jūs varētu mainīt.
>> Ikreiz, kad tā mainās kaut, tas būs atkal padarīt visu lapu.
Un, ja tas izklausās neefektīvi, tas ir tāpēc, ka tas būtu,
bet reaģēt izmanto lieta sauc Shadow DOM.
Tā vietā, lai zīmēšanas lapas tieši, to uztur virtuālo HTML koku atmiņā.
>> Ziniet, HTML ir kā koks, kā hierarhisku datu struktūru.
Tas tur viltus koku atmiņā, un, kad jūs atjaunināt lapu,
tas būs izdarīt vēl vienu viltus koks, un tas būs aprēķināt
ko mainīt tai nepieciešams, lai padarītu lapu, lai padarītu divi koki vienāds.
Vārdu sakot, tas praktiski atkārtoti padara daudz.
Un tad tas tikai patīk maina lapa maz tweaks, kā nepieciešams,
tāpēc tas ir ļoti, ļoti, ļoti efektīva.
>> Tātad būtībā React būs kad jūs kaut ko mainīt,
tas būs atkal padarīt lapu virtuāli.
Tas būs izdomāt, ko man vajag mainīt, lai reālā lapa atspoguļo
virtuālā lapa, un tas būs darīt.
Tas ir virtuāls DOM.
Tā ir viena no lielākajām iezīmes reaģēt.
>> Vai tas ir jēga?
Kādi jautājumi?
Yeah?
>> Mērķauditorija: Kā salīdzināt vēl MVC
ka mēs runājām par Pirms piemēram resursiem.
>> Neel MEHTA: Jā, jautājums ir, kā tas salīdzināt ar MVC?
Jūs jautājāt par resursiem.
Nu, parunāsim par to, kā tā darbojas.
>> In MVC, jūs atjaunināt modeli.
Šajā gadījumā mēs gribētu būt kartes paraugs.
Skats veidotājiem būs flip pogu, un kontroles
būtu Flip funkciju.
Tātad skats varētu pateikt kontrolieris uzsist uzsist.
Flip varētu pateikt modelis, lai mainītu, vai ne?
>> Un tad, kad jūs darīt MVC, jums klausīties modeli mainīt,
un tu atkal padarīt viedokli atbilstoši.
Vai jums vienkārši ir, piemēram, ir kontrolieris.
Sagaidiet modeli mainīt, un pēc tam arī izvēlēties daļu no kā lieta
Mainīt.
Šeit mums ir viena lieta, bet liels app,
Jums patīk atcerēties to, kas izmaiņas katrā atsevišķā vietā,
tāpēc tas ir mazliet kaitinošas.
Un tā React ir jauki jo tā ir ēna Dom.
To var atļauties tikai pārrakstīt visa lieta.
Jums nav, lai selektīvi patīk uzminēt, ko atjaunināt.
>> Facebook, ja jums patīk iegūt jaunu ziņu, kas MVC,
jūs ir jāatceras, OK, mainīt lietas
pie augšpusē lapa, ziņu ikona.
Arī pop jaunu logu apakšā.
Arī veikt jaunu lieta šajā logā.
Arī atskaņot skaņu.
>> Tas ir daudz sīkumi iet vienā un tajā pašā laikā.
Un tāpēc, ja jums nav ir Shadow Dom, jūs
ir to darīt manuāli, jo jūs nevarat atbrīvoties no visu lapu.
Jūs nevarat atļauties, tāpēc jums ir mainīt katru lieta manuāli,
kas ir tiešām kaitinošas, jo MVC.
>> Tā, lai tā būtu taupīgs, tie selektīvi
atjaunināt lapu, kas ir efektīva, bet arī kaitinošas.
In reaģēt, jo ēna Dom, jūs saņemsiet abas lietas par brīvu.
Tas ir efektīvs, jo no Ēnu Dom.
Sašaurinājums atjaunina lapu.
Tas nedara koku manipulācijas.
Jūs saņemsiet efektivitāti.
Jūs arī saņemsiet lietošanas ērtumu, jo ja jūs vienkārši pārrakstīt visu lapu,
bet jūs tikai zināt, viss ir labi, lietas gribam būt lapā kaut kur.
Tas var būt citā vietā, bet tas būs lapā, vai ne?
Tātad jūs tikko atkal padarīts visa lieta praktiski,
un jūs varētu veikt pāris izmaiņas pašas lapas.
>> Tātad, atkal, MVC jums būtu jāizvēlas
starp lietošanas ērtumu un efektivitāti, un reaģēt, jums abiem.
Tātad, tas ir labāk.
Jēga?
Solid.
>> Labi, tāpēc pieņemsim redzēt parunāsim mazliet par 4 soli,
Kā mēs varam iestrādāt komponentus.
Tāpēc mums ir šīs tiesības tagad.
Mums ir mūsu atdzist maz pogu.
Mēs varam uzsist to atpakaļ un tālāk, un tas ir viss, tā dara.
Teiksim, mēs vēlamies, lai ir cits komponents.
Teiksim mūsu flashcard app vajadzētu satur sarakstu ar visiem kartes
ka jums ir tā, ka nozīmē, ka mēs būtu cits komponents.
Nu, varbūt to sauc par saraksta skata.
Veidosim saraksta skatu, ka sadzīvo ar CardView,
un šis saraksts skats un CardView patiks strādāt kopā.
Un jūs varat apvienot tos lai padarītu mūsu app jums.
>> Tātad, pirmkārt, pieņemsim veikt pāris vairāk kartes taisnība.
Teiksim, ko kārtis?
Un tieši tāpēc man nav nesa jūs ar ierakstot to,
Es esmu tikai gatavojas kopēt to no šeit.
Un tāpēc es esmu gatavojas ne to tikai vienu karti.
Es esmu gatavojas sniegt tai masīvu kartes.
Tātad vispirms progr gatavojas lauzt tagad.
Labi, tāpēc mēs ejam, lai padarītu Tas spēj apstrādāt vairākas kartes.
Tātad, pirmkārt, mēs ejam uz to, kas nav tikai vienu karti, bet masīvs kartēm,
kā sarakstu kartēm.
Un šajā gadījumā, mums ir trīs no tiem.
>> Labi, tik tik app ir gatavojas saņemt sarakstu kārtis,
un tas notiek, lai izlemtu, kura viens parādīt uz CardView.
CardView var tikai padarīt vienu karti, bet app
saņem sarakstu ar visām kartēm, vai ne?
>> Tātad, kad jūs izrēķināt vienu card dot CardView,
kā tu domāju, jūs varētu būt iespēja pieņemt lēmumu par to, kura karte
Parādīt?
Lai dotu jums mājienu, tas ir uz laiku Jums tiks skatāties noteiktu karti.
Ja jūs atsvaidzināt lapu, jūs vienkārši doties atpakaļ uz pirmo karti.
Tas ir OK, jo tas ir īslaicīgs.
Ko paņēmiens varētu mēs izmantojam?
>> Mērķauditorija: Jūs varētu veikt mainīgo tāpēc tāpat kā jums bija priekšā.
Vai tas ir taisnība, jūs varētu ir pašreizējais card ir vienāds ar 1?
>> Neel MEHTA: Jā, tāpēc mēs vēlas, lai būtu valsts, vai ne?
Jūs varētu izmantot stāvoklī, komponents, lai noskaidrotu
kura karte mēs vēlamies iegūt.
Tāpat mums ir saraksts visas kārtis, mēs
izmantot valsts, lai noskaidrotu viens no pirmās kartes,
otrkārt karte, trešais karte, un tā tālāk.
>> Tātad app tik lietotne saņems ir getInitialState funkciju,
getInitialState funkcija atgriešanās.
Un mēs tikai teikt activeIndex 0.
Tātad tagad mūsu app ir tā paša valsti.
>> Un tāpēc tagad uz apmetuma, lai noskaidrotu karte, pieņemsim tikai iet uz masīva
un paķert lieta pie šī indeksa.
Select karšu vienādas this.props.cards this.state.activeIndex.
Tātad, kā jūs redzēt šeit, tad aksesuārus un Valsts faktiski strādā kopā.
Tāpēc tagad, ka mums ir mūsu activeCard, mēs to saucam activeCard,
un pieņemsim redzēt, ja tas darbojas.
[Dzirdams]
>> Ak, tas bija teksts kļūda.
Ah.
>> Atdzesē, Yep, tāpēc tagad mēs bijām atpakaļ lai kur mēs bijām pirms, vai ne?
Pats vecais programma izņemot Tagad mēs varam atbalstīt
saraksts kartēm, ne tikai vienu karti.
Un tagad, atkal, ja mēs mainīt activeIndex, mēs var iet no 0 līdz 1,
un tagad, otrkārt karte, un tad mēs devāmies uz 0.
Tātad, šeit ir jauns souped-up versija mūsu.
>> Labi, tāpēc tagad pieņemsim ir saraksta skatu, ka parāda visas kārtis savu programmu,
tāpēc mēs veiksim jauna sastāvdaļa sauc ListView.
Ļaujiet ListView vienāds react.createClass.
Tāpēc mēs vēlamies, lai tas padara Nekārtots sarakstu ar objekta sarakstā par katru karti.
Un tāpēc mums ir ķekars kartes.
Mēs vēlamies vienu saraksta elementu par katru karti, labi?
Mēs varētu darīt, lai cilpu vai kaut lai izveidotu jaunu saraksta elementu.
Bet kā jūs darīt to Reaģēt, izmantojiet lieta, ko sauc karte.
Karte ir rīks vai funkcija lietojat ka par katru posteni, darbojas dažas funkcijas,
notiek atgriešanās vērtību, un dod jums, ka atpakaļ.
>> Tā kā, piemēram, mums ir masīvs 1, 2, 3.map function-- un šī
ir saīsinājums priekšlikums function-- x arrow x reizes x.
Tas stāsta par katru numuru 1., 2., 3., ņemt to.
Kvadrātveida, un dot to atpakaļ.
Tātad, ko jūs domājat 1, 2, 3.map x iet uz x reizes
x dod jums atpakaļ dota ka šī funkcija ir
palaist uz katru šī masīva elementa.
>> Mērķauditorija: 1, 4 9?
>> Neel Mehta: Yep, 1, 4, 9 jo jums 1 reizes 1.
Tas dod jums vienu.
Tas ir pirmais elements.
>> 2 reizes 2 ir 4.
Tas ir otrs elements.
3 reizes 3 ir 9.
Tas ir trešais elements.
Jēga?
Tātad karte ir Tehnika jums izmantot funkcionālās programmētājiem,
jaunais stils programmēšana kaut ko darīt
katram elementam savā sarakstā.
Un tā tas izklausās pazīstami.
Mums ir karšu sarakstu.
Mēs vēlamies, lai iegūtu sarakstu postenis ik viens, tāpēc mēs tikai izmantot karti šeit.
Mēs sakām, ļaujiet saraksts vienāds this.props, kartes, karte.
>> Un tāpēc, karti, mēs esam gatavojas radīt saraksta elementu
ar šīs kartes saturu pusi no tā.
Pieņemsim tikai teikt, ka mēs vēlamies dot no kārtis jautājums, tāpēc card.question.
Tātad šis saraksts ir kopējais masīvs LI ir vai saraksta elementus
ja tur ir viens saraksts postenis katrai kartei,
un kas satur kartēm jautājumu.
Jēga?
>> Atdzesē, tāpēc tagad pieņemsim faktiski drukāt ka out.
Tātad mums atgriezīs ul.
Inside šo Nekārtots sarakstā, mēs tikai stick visu sarakstu
ka viņi deva mums.
Cool.
>> Labi, tāpēc tagad šis saraksts skats strādā tikai atrast.
Visus jautājumus par saraksta skatā?
Jums ir ķekars kartes.
Jūs veicat saraksta elementu par katru karti.
Un jūs viņus iekšā Nekārtots sarakstu, un jūs arī tā atpakaļ.
Tāpēc tagad pieņemsim lēmumu, lai mēs embed šis iekšpusē mūsu app,
tāpēc mēs varam darīt, saraksta skatu.
Ko arguments mēs pāriet uz sarakstu viedokli?
Ko īpašības mēs arī tā?
Atcerieties, ja jūs piešķirat tas ķekars kartēm,
tas būs padarīt sarakstu skatītos uz šīm kārtīm.
Tātad, kas būtu mums iet šeit kā argumentu?
Mērķauditorija: saraksts kartēm?
Neel MEHTA: Jā, tā kartēm vienāds this.props.cards, vai ne?
Un tāpēc vienīgais problēma ir tas, ka jūs varat tikai
Izrādījās vienu augstākā līmeņa elements padarīt, tāpēc tev ietiniet to div.
Tas ir dīvaini.
Tātad, pieņemsim redzēt, ja kas.
Vai tas darbojas?
>> Yep, tur jums iet.
Tāpēc tagad mums ir saraksts kartīšu apakšā,
un tad mums ir mūsu CardView sevi uz augšu,
un kas būs uzsist starp abas puses uz kartes.
Tagad tas, ka jēga, kā es to izdarīju?
Jā, tā atkal, mums ir divi komponenti.
Pirmais komponents izdrukas ārā katru karti sarakstā.
Tas ir saraksts skats.
Un otrais komponents izdrukā tikai šo karti.
Ja jūs to zināmu karti, tas būs izdrukāt informāciju par šo karti
un ļauj uzsist uz priekšu un atpakaļ.
>> Tātad, ja mēs gribam, mēs varam mēģināt runāt par pievienojot dažas jaunas funkcijas, lai šo.
Pretējā gadījumā mēs varam runāt mazliet vairāk aptuveni no ātruma reaktora,
vai arī mēs varam atbildēt jautājumi jums varētu būt
jo tie visi ir no galvenajām daļām no reaģēt, ka es gribu runāt.
Mēs varam iet uz priekšu.
Mēs varam atbildēt uz jautājumiem.
Ko vien tu vēlies.
>> Mērķauditorija: Vai jūs izmantojat JSX normālā JavaScript?
Vai ir tā, ka kaut kas nāca ar [dzirdams]?
>> Neel MEHTA: Jautājums ir CAN Jūs lietojat JSX ar normālu JavaScript?
Atbilde ir jā.
JSX ir tikai veids, kā to ņem savu JavaScript ka ir HTML iekšpusē no tā,
un tas apkopo vērā JavaScript ka nav HTML iekšpusē no tā.
Tātad paziņojums that-- tik pamanīt šeit.
Tas izskatās, ka jums ir, piemēram, div un jums ir sīkumi iekšpusē no tā.
>> Tas apkopo JavaScript ka tāpat rada to pašu.
Es domāju, ko es saku, ka JSX ir tikai sintaktisko, kā tas ir
apstrādātāju JavaScript daudz piemēram, PHP ir apstrādātāju HTML.
AS ir apstrādātāju JavaScript, kas ļauj
jūs nodot HTML iekšpusē JavaScript.
Un tādēļ, ja jums ir tiesības transformators kas ir lieta, ko sauc [nedzirdama]
kas būs pārveidot.
Tiesības apstrādātāju, tas būs jums darīt.
>> Mērķauditorija: [dzirdams]
Neel MEHTA: Parasti nav nepieciešams likt HTML iekšpusē JavaScript
ja vien jūsu dara reaģēt.
Bet jūs varat darīt to anyway.
Yep?
>> Mērķauditorija: Es domāju, ka jūs bija aprakstīts React
kā funkcionāla programing valodā.
Mēs esam mācīšanās C in CS50.
Vai C arī funkcionāla valoda?
Neel MEHTA: Tātad jautājums ir par funkcionāls
versus cita lieta, ko sauc par obligāti vai procesuālo programmēšana.
Ir divu veidu programmas tautas.
Viens sauc procesuālais, kas ir visu par, piemēram, dara komandas,
un viens ir funkcionāla, kas ir visi par kuru funkcijas un kam
ieejas un izejas no tiem.
Reaģēt ir funkcionāla paradigma.
C ir ļoti procesuāls paradigma.
>> Un kā piemēru, C piemēram, jums nav darīt šo deklaratīvs ceļu
padarīt programmu, vai ne?
Jums ir ko teikt, izdrukāt to.
Mainīt šo datu struktūra.
Izdrukāt šo.
Tas viss ir par komandas.
>> In React, tur nav ka daudzas komandas.
Tas ir visu par ņemot sastāvdaļas jūs likts kopā.
Viņi, piemēram, funkciju.
Jums ir, piemēram, funkciju sauc CardView,
kas ir funkcija kas ir ieejas, izejas,
un tā React ir visi par šo filozofiju
mums no having-- jums ir dati.
Jums iet caur šo algoritms, un tas būs
izejas HTML, ka jums tikko iespiests lapu,
un tāpēc jums ir veidot to gabalu pa gabalu.
>> Tātad, lai pievērstu metaforu tam, kas Es teicu, jūs zināt, cik
Facebook, ja jums ir ziņa, un jūs izvēlēties, ko daļas atjaunināt,
tas ir procesuāla.
Tas ir svarīgi, vai ne?
Labi, es saņēmu ziņu.
Pieņemsim mainīt kontu tur.
>> Pieņemsim pop logs šeit.
Pieņemsim mainīt kontu tur.
Pieņemsim izdarīt šo šeit.
Tas ir procesuāls pieeja.
>> Tas ir kādas lietas, piemēram, leņķa, Boost, Backbone, citas sistēmas izmantot.
Reaģēt ir funkcionāls.
Tas ir ļoti atšķirīgs veids domājot par lietām.
Tas aizņem šo ideju par pieņemsim ir funkcijas vai algoritmi, kas jums
arī tā datus.
Tas būs izspļaut ko tas vajadzētu būt, un dators
parūpēsies par svēršanas out.
Jums nav galā pats.
Vai, kas padara mazliet sajūtu?
Yeah?
>> Mērķauditorija: In funkcionālā valodā, viss notiek uzreiz?
>> Neel MEHTA: Nē, lietas notiek kārtībā.
Tāpat šeit tur ir vēl pasūtīt, bet tas nav
jānotiek, lai līdzīgu lielīt, komanda, komandu.
Tas notiek secībā funkcija dod jums produkciju.
Put, ka uz citu funkciju.
Put, ka uz citu funkcija, cita funkcija.
>> Ja jūs CS51, jums mācīties funkcionālās programmas
nedaudz no darbības jomas šis.
Bet būtībā, kas padara Reaģē cool ir ne tikai
vienvirziena datu plūsmas un virtuālā Dom,
bet arī šī ideja funkcionālā programmēšana.
Un funkcionālā programmēšana ir ļoti viegli sacerēt un padarīt cool stuff no,
un tas ir ļoti viegli domāt par un iemesls apmēram.
Tātad, tas ir vēl viens labs izloze reaģēt.
Kādi jautājumi?
Yeah?
>> Mērķauditorija: Um, kāpēc jūs izmantot ļaujiet pretstatā Var?
>> Neel MEHTA: Tātad jautājums ir kāpēc jūs izmantojat dariet nevis Var?
Šī ir lieta, ko sauc ES6 vai ECMAScript 6.
Tā ir jaunā versija JavaScript.
Tur ir ķekars tehnisku iemeslu dēļ, bet pieņemsim, ir labāks variants var.
>> Tas ir, kā jūs deklarēt mainīgos.
Jūs varat izmantot ļaut.
Jūs varat izmantot var.
Ļaut ir ķekars tehnisko reasons-- jūs varat meklēt tos
up later-- kāpēc tas ir labāk.
Būtībā, ES6 ir daži jauki Jaunais sintakse, dažas jaunas funkcijas
virsū veco JavaScript.
>> Tāpēc mums ir līdzīgi piecas minūtes.
Es tikai gribēju runāt par vēl viena lieta reālā ātri.
Ja jums bija kādi jautājumi, parunāsim par to pēc tam.
Bet tikai tāpēc tas izpaužas nozvejotas kameras, es tikko
gribu runāt mazliet par to, kā jūs faktiski izmantot reaģēt jūsu progr.
>> Ja jūs iet šeit, Facebook.GitHub.IO/react,
tas ir mājas lapa reaģēt, un tas jums parādīs, kā jūs faktiski izmantot
Reaģēt jūsu lapas.
Būtībā, tas ir nedaudz sarežģīts mēģinot instalēt reaģēt.
Tas nav tik vienkārši, kā jūs vienkārši velciet un piliens JavaScript tur.
>> Jums ir jābūt jūsu transformators izveidots, kas, kā tas bija agrāk,
savukārt jūsu JSX vērā normālā JavaScript.
Jums ir lieta, kas būs sastādīt jūs ES6 normāli.
JavaScript tur ir daudz kustīgu daļas, kas Jums jādara, tāpēc tur ir lieta
sauc Yeoman, Yeoman.io.
Un tas ir komandrindas rīks, kas būs palīdzēs jums Sastatņu savu React
projekti viegli.
>> Tātad jūs varat lasīt par šo vēlāk, bet ir daži instrumenti
ka Yeoman piedāvā.
Tie būs jums izveidot React app ar visu uzcelta.
Tāpat tas būs esam izveidojuši in, sastāvdaļām celta.
Tas būs jūsu transformators uzcelta.
Viņiem ir daudz atdzist sīkumi uzcelta automātiski
izmantojot šīs lietas sauc ģeneratori.
>> Tātad, lasīt par to, ja vēlaties.
Tikai iet uz sīkmuižnieks, Y-E-O-M-A-N, un Jūs varat atrast ģeneratoriem, piemēram, šo.
Un ar ģeneratoriem, piemēram, šiem, jūs vienkārši patīk viens
ir pāris komandrindas komandas.
Tas būs Sastatņu veic kādu Visa React app jums.
Tā saņemsiet visu manuālo cauruļvadus, un grunt darbs jums,
un tas ir iemesls, kāpēc jūs tikai koncentrēties par tikai rakstiski reaģēt.
>> Tātad būtībā ēka Reaģēt app ir netriviāls.
Tas vadu viss kopā, bet tur ir instrumenti, kas būs darīt to you.
Tātad, ja jūs vēlaties, lai padarītu React app, mēģiniet darīt to, ka veidā.
Ja jūs vienkārši vēlaties eksperimentēt, Jūs varat mēģināt izmantot šo CodePen
jo tas ir CodePen visi reaģē vadu.
Es esmu darījusi visu darbu jums jau.
>> Tātad, ja jūs vēlaties, lai Like ražošana atbrīvot React app,
izmēģināt vienu no šiem ģeneratoriem.
Ja jūs vienkārši vēlaties spēlēt apkārt, tas bieži vien ir vērts tikai
tāpat kā mēģināt spēlēšanās uz CodePen šeit.
Skaņa laba?
Cool.
>> Tātad tas ir viss, kas man ir.
Atkal visi kodu un piemēri ir būs šajā tīmekļa vietnē šeit.
Tātad, atkal, mēs nerunāja par daudz sintaksi React,
bet, lai atrastu visiem tiem maz sintaktiskās detaļas,
tas viss būs pieejams šajā mājas lapā šeit.
>> Tāpēc es gribētu ieteikt, piemēram, spert pirmo soli.
Ielieciet to savā CodePen.
Mēģiniet strādā, lai padarītu tā uz otro soli.
Tur ir Ceturtais solis, un tikai redzēt, kur jūs saņemsiet no tā.
>> Kādi jautājumi, pārbaudiet out šajā lapā vai e-pastu man.
Tas ir mans e-pasts.
Bet es labprāt palīdzētu jums ar jebkuru jautājumi jums varētu būt par reaģēt.
Tātad, Yep, tas ir viss, kas man ir.
Paldies jums visiem ir ļoti daudz skatoties vai apmeklēšanai.
Un es ņemšu kādi jautājumi Jums varētu būt pēc šo tagad.
Tātad paldies visiem, skatoties.