[Muzikos grojimo] 

Neel Mehta: Štai jis eina. 

Na, visi, kviečiame internete programos ateities su reaguoti. Tai CS50. Mano vardas Neel. Aš TA už CS50 ir antrakursis Harvardo koledže ir labai, labai aistringa kūrėjas. Taigi, aš labai įdomu kalbėti su jumis šiandien ar esate čia arba namuose žiūrėti, apie React, kuris yra, vėl kaip sakiau, web apps ateityje. 

Taigi Pareikšk yra interneto sistema. Ir kaip aš jau sakau kad kai kurie žmonės čia pagrindų yra tik rinkinys įrankių, galite naudoti susisteminti ir sukurti savo Web App ". Ir žiniatinklio programos yra, vėlgi, svetainės kad yra interaktyvus, kaip "Facebook", Twitter.com, Instagram.com, nesvarbu. 

Taigi "Facebook" yra interneto sistema kuris buvo sukurtas "Facebook" pora metų back-- reaguoti yra. Tai nuo to laiko buvo naudojama "Facebook" savo mobiliajame apps ir Web App ", Instagram. Khano akademija yra dar vienas garsių anksti taikantysis reaguoti. 

Tai tikrai buvo gauti labai populiarus. Jei jūs kada nors naudoti tokius dalykus kaip kampinius arba Pagrindas, tai yra iš tos pačios šeimos, tačiau ji turi, nes kiek viršys jų populiarumą. Tai karšta naujas dalykas. Tai tikrai, tikrai didžiulis. 

Ir taip reaguoti yra gera ne tik kaip Web sistema statybinių sąsajos. Tai geras pastato interneto sąsajos. Taip pat dalykas vadinamas reaguoti Gimtoji kuris leidžia jums sukurti sąsajas "Android" ir "iOS" o gal kitos platformos ateityje naudojant tik tą patį JavaScript kodą. Jūs galite naudoti tą patį JavaScript kodą teikti interneto svetaines, teikti Android Apps ir IOS programas. 

Tai labai, labai puikus laikas. Tai tikrai, tikrai cool galimybė. Tai tikrai universalus interneto sąsaja kūrimo įrankis, todėl tai yra labai, labai Svarbu žinoti. Ir, kaip man buvo informuoti žmones Prieš tai, manau, ketina keisti kaip mes kurti interneto programas amžinai. Taigi, tai gal šiek tiek Hiperbolė, bet aš manau, kad tai gana geras dalykas žinoti. 

Gerai, kad tai, kas reaguoja? Reaguoti yra pagrindas galite naudoti statybos sąsajas. Sąsaja yra, vėlgi, interneto puslapis, tiesa? Taigi čia Instagram.com, naudojimas reaguoti. 

Reaguoti yra pastatytas ant idėja komponentų. Komponentas yra HTML elementas ant steroidų, taip HTML elementas yra tarsi mygtuką. Tai dalis. Tai galva, tiesa? Ir Instagram bus naudotis, tačiau ji taip pat naudoti komponentus reaguoti. 

Pareikšk komponentai Souped up HTML elementai kad turi savo elgesį pateikta per juos. Taigi, kaip, pavyzdžiui, galėtume turėti laikas elementas, laikas komponentas, kuri bus pateikta kaip laikas antspaudas, žinote, profilis, komponentas, kuris bus pateikta aprašymą vaizdas ir asmens pavadinimą. Jis gali turėti kaip skaitiklį, kuris gali tikėtis kaip ir mėgsta skaičius, ir jei paspausite ant jos, jis bus padidinti mėgsta, skaičių. Komponentas yra tik krūva HTML kodas, kad turi funkcionalumą suvynioti viduje ji. Taigi, tai, kaip HTML elementas ant steroidų, kaip sakiau anksčiau. Galite imtis šių komponentų, ir jūs galite įdėti juos kartu užmegzti naujus komponentus, kad Šiuo atveju, po komponentą, kuriame yra visa tai stuff. Tai būtų tokia Laikas, profilis, LikeCounter, gal komentaras o gal pati vaizdą. Ir taip žiniatinklio programos yra tiesiog pastatytas atsižvelgiant dalys ir jų išleidimą kartu. Instagram pašaras yra nieko daugiau, nei etatų vienas po kito krūva, kiekvienos žinutės yra kaip laikas, Profilio, LikeCounter ir pan. Tai tipo kaip statyti namą. Jūs neturite statyti namas iš viršaus į apačią,. Jūs imtis components-- jus imtis, pavyzdžiui vonios kambaryje. Jūs imtis bedroom-- jums laikytis jų kartu, ir jūs turite naują komponentą. Turite naują dalį namo. 

Taigi reaguoti yra viskas pastatyta aplink Šis komponentų idėja, kad yra interaktyvus, kad yra deklaratyvi. Kaip jums tiesiog pasakyti, ką profilis yra, ir ji perduoda jį. Jie komponentų surenkama. Galite imtis laiko ir aprašymą, įdėti juos kartu, kad kažkas geriau. Ir jie daugkartinio naudojimo, todėl, jei jūs turi kodą eiti pareigas, galite įdėti, kad bet kur. 

Jūs galite įdėti savo Instagram dalykas, dėl savo svetainę. Jūs galite įdėti į "Facebook", pavyzdžiui, tol, kol ji naudoja React, taip pat. Taigi sudedamosios dalys yra tikrai, tikrai, tikrai galingi blokai internete , kuris gali būti naudojamas bet kur ir įdėti kartu, kad naujas pastatas blokai. Štai labai, labai aukšto lygio apžvalga. Taigi, dar kartą, jei turite bet bet kuriuo momentu klausimai apie reaktoriaus, filosofija kodavimas, sustabdyti mane, ir leiskite man žinoti. 

Gerai, kad reaguos yra kietas, nes juo turi skirtingą būdą ieško tuo, kaip jums sukurti interneto programas. Jūs tikriausiai girdėjote apie MVC A modelis jums kontroliuoti į CS50 ar kas kita zondavimo klasių galite naudoti. Ir dauguma sistemos yra pastatytas aplink MVC idėja. Reaguoja yra ne. Reaguoti yra pastatytas aplink idėja iš ištisinių duomenų srauto kaip matyti šioje schemoje ar grafinį čia. 

Iš esmės, jūs turite duomenų šaltinį. Ir duomenų šaltinį spręs Kaip išdėstyti tam tikrus komponentus. Ir komponentai tada, kai jie pakeisti, jie pasakys duomenų šaltinis keistis. 

Norėdami naudoti Instagram Pavyzdžiui, jums gali tekti aukštesnįjį objektų, tokių kaip sąrašą į duomenų bazę ar kažką. Kad duomenų. Ir tada mūsų post komponentai imsis, kad duomenys, ir naudoti tuos duomenis teikia ant ekrano dalykas. Štai ką rodyklė iš duomenų, kad komponentas yra, ir tada, kad tie patys duomenys yra naudojamas teikti keletą sudėtinių dalių krūva. 

Facebook Messenger ", už pavyzdys, kuris yra React, jums gali turėti sąrašą pranešimus kaip savo duomenų šaltinį. Ir tai taptų ne tik žinučių sąrašas bet taip pat draugų sąrašą turite. Turite neskaitytų skaičius. Gal taip pat teikia "Facebook dalyką tai ne iš Facebook.com apačioje. Tie patys duomenys yra vieno šaltinio tiesos ir kad sukelia daug komponentai suteiktos. Ir kiekvieną kartą, kai viena iš tų, komponentai yra pakeistas, jis eina atgal ir keičia duomenų šaltinį. 

Jūs išsiųsti žinutę, tiesa? Tai keičia duomenų šaltinį. Jūs skaityti pranešimus, todėl jūs nustatyti neskaitytą 0. Tai keičia duomenų šaltinį. Ir pastebėti, kad visi šie vienas arrow grįžta į tą pačią duomenų šaltinis, todėl žinote, suteiktas tam tikras duomenų rinkinys, jūs tiksliai žinote, ką puslapis atrodys. Tai deterministinis. Jūs žinote, nes tam tikrus duomenis, kas puslapis ketina atrodyti. Jūs galite prognozuoti, kaip jis ketina elgtis ir kaip viskas vyksta dirbti, kai jie kartu sudėjus. 

Ir jei aš turėjo milijoną komponentai čia jis elgtųsi tas pats, tiesa? Jūs neturės jokių keistam jungtys. Vienas duomenys lydyti milijoną komponentus. A mln komponentai galėtų grįžti ir redaguoti duomenis. Ir todėl tai yra labai gražus. Mes statome komponentų surenkama, lengvai keičiamo dydžio Web Apps. 

Jūs turite vieną duomenų šaltinį, tiesos šaltinis. Tai pasako savo komponentus Kaip išdėstyti puslapį, ir komponentai tvarkyti sąveiką. Ir jei jie nori pakeisti dalykų, tiesiog grįžti ir pasakykite duomenų šaltinis keistis. Logiška? Taigi Pareikšk yra visa informacija apie supratimą kaip sukurti komponentas ir kaip padaryti jūsų komponentą bendrauti su išoriniu pasauliu. 

Padaryti sudėtinės jaunuolystė su išoriniu pasaulyje naudoja kitą technologiją vadinamas Fliusas, kuris yra sistema, kuri yra pridėta ant React. Mes neketiname kalbėti apie tai. Mes ketiname kalbėti daugiau apie, atsižvelgiant duomenys, kaip jūs galite padaryti komponentas? 

Ir taip reaguoti yra tikrai cool, nes jus galite naudoti ją su bet nugaros pabaigoje norite. Jei turite kaip Python nugaros pabaigoje, Jei jūsų Python gali išspjauti kai kuriuos duomenis, Pareikšk gali ją suteikti. Jei nėra JS išėjimai Duomenų, reaguoti jis tampa. Ruby bėgiai su duomenys, reaguoti jis tampa. 

Taigi reaguoti iš esmės yra interneto view-- priekis su komponentais bet kokio duomenų šaltinio kokia. Ir taip vyksta nuo duomenų šaltinio, reaguoti komponentai yra gana lengva. Ėjimas į kitą pusę yra šiek tiek sunkiau. Tai naudoja Flux, kaip jau minėjau anksčiau. Mes ne gauti į tai. Mes daugiau dėmesio skiriama duomenų-to-komponento pusėje. Šiuo būdu jūs galite padaryti cool, įdomus Web Apps. Tai neturės įtakos išorinį pasaulį dabar, bet tai jau kita istorija. 

Gerai, kad jei buvo čia mano paskutinio seminaro jūs žinosite, kad visi už kodas šiandien aptarimas bus šiuo adresu čia, atsiprašau, tai URL čia. Ir iš esmės mes ketiname eiti per keturis žingsnius, gal penki, tikriausiai ne penki. Mes perkelti per keturis žingsnius pastato mėginys reaguoja programą. Ir taip visą kodą kiekvienam žingsnyje bus čia, todėl, jei jūs taip kartu namuose, nedvejodami žiūrinėti šį kodą. Jei taip palei čia mes bus parodyti jį ekrane, todėl nereikia nerimauti apie tai. Bet jei jūs esate namie, jaučiasi nemokamai aplankyti šią svetainę. Ir, taip, jums turėtų būti suteikta galimybė gauti visi kodą, kurį kada nors reikia čia. Taigi tai gera Cheat sheet, taip pat už savo ateitį nuotykius su reaguoti. Cool, todėl, jei visi, kas čia ir net jei esate namuose, atsigriebti šią svetainę, is.gd/cs50react, ne kapitalo, nėra pabraukimas, nėra nieko. 

Pamatysite puslapį, kuris atrodo šiek tiek panašus į šį. Tai yra dalykas, vadinamas CodePen. CodePen yra bendradarbiavimo kodavimo aplinka su kuriais galiu rašyti kodą čia, ir jis bus automatiškai išsiųstas jums. Ir šiuo būdu, galiu rašyti kodą. Galiu paleisti kodą čia. 

Dėl example-- ir jei jis reloads-- pamatyti, Bėgu JavaScript puslapyje čia, ir jis bus automatiškai tampa tinklalapį su šiuo JavaScript. Ir taip, tai yra būdas mums išbandyti kodą tikrai greitai nenaudodami Mūsų ID arba pasinaudokite mūsų vietinio kompiuterio ar kas. Tai labai greitas būdas jums maketą ir išbandyti įvairius kodą. 

Taigi, aš ruošiuosi būti atsižvelgiant pavyzdys kodas, išleisti jį čia. Mes ketiname dirbti per ją. Ir jei esate namuose, jūs gali traukti tai taip pat. Ir aš jau įdiegta Pareikšk čia, todėl galite tiesiog parašyti savo kodą čia, ir pabandykite jį kaip savo žaidimų aikštelėje. 

Taip, jei kiekvienas atverti šią nuorodą čia. Prašau duoti man nykščius vieną kartą jūs turite jį atidaryti. Cool, vėsioje gerai. Nėra nieko čia dabar, bet mes pakeisime, kad labai greitai. 

Gerai, kad Pareikšk yra Javaskriptą biblioteka, ir kaip toks, reikia išmanyti JavaScript, kuri yra žiniatinklio programavimo kalba. Ir tai naudojama kitų dalykų dabar taip pat, bet pirmiausia interneto plėtoti kalba, todėl, jei esate susipažinę su , kad perskaičiau svetainę vadinamas JSforCats.com. Nuostabu. Galite sužinoti JavaScript pusvalandį. Tai neįtikėtina. 

Taigi suteikti jai skaityti. Mes taip pat yra HTML daug, nes čia mes projektuojant tinklalapius žinoma. Taigi, jei esate susipažinę su HTML, patikrinkite HTMLdog.com. Manau, mokymosi Pareikšk yra milijoną kartų lengviau, jei jau žinoti blokai. Jei turite komponentus, tai lengva padaryti didesnę komponentą. Štai reaguoti kalbą jums. 

Taigi pirmyn ir suteikti šie dalykai perskaitymo. Pauzė šį vaizdo įrašą. Give it a skaityti, jei esate namuose, jei nesate susipažinę su HTML arba JavaScript Gerai, kad tai, ką mes ketiname padaryti, tai mes ketiname padaryti labai paprastas iliustracijų app naudojant reaguoti. Mes ketiname turėti iliustracijų. Jūs galite apversti kortelės ir atgal. Ir mes taip pat turėsite iš sąrašo visos kortos, kad mes, ir jei mes jaučiatės ambicingas, mes galime būti galėtų perjungti automobiliai pagal paspaudę ant jų. 

Bet tai yra, savo plikomis kaulai, labai paprastas reaguoti programą. Ir taip iš tikrųjų tai yra nėra trivialus įgyvendinti, bet mes ketiname parodyti, kad jei jūs darote tai, tai labai, labai lengva jį pratęsti jei kiti žmonės padės jums su juo. Taigi mes ketiname eiti per keturių žingsnių pradedant nuo nulio statyti tai. 

Gerai, kad keturi žingsniai, mes pradėti nuo pirmojo žingsnio. Pirmasis žingsnis bus kurti savo pirmąjį komponentą. Kaip minėjau anksčiau, komponentas Pareikšk yra tik HTML elementas ant steroidų. Jame taip pat nurodoma HTML ir kai elgesį, ir ji bus nurodyti kaip žmonės gali sąveikauti su juo how ji turės vidaus būklę. Kaip mygtuką žinosite, pavyzdžiui, kaip daugelis kartų jis buvo paspaudėte pavyzdžiui, ir jis žinos, kaip nustatyti save. 

Taigi eikime į priekį ir kurti savo Pirmasis komponentas, naudojant "JavaScript". Taigi, jei sintaksė atrodo keistai, tai todėl, kad jis rūšies yra. Taigi, dar kartą, mes einame padaryti kintamasis vadinamas App naudojant raktažodį tegul, kuris daro kintamąjį, tegul App vienodą React.createClass. 

Reaguoja yra biblioteka, ir turi Sukurti klasės funkciją. Ir ši funkcija yra kodo tiek, kad jus galite naudoti norėdami sukurti naują tipo reaguoti komponentą. Ir taip React.createClass pademonstravo komponentą, ir tai komponentas sugebėti daryti stuff. Svarbiausia tai galite padaryti, tai padaryti kažkas, padaryti kaip funkcija. 

Vėlgi, jei šis rodiklis nėra akivaizdu, kad tu, aš rekomenduoju jums eiti JS katėms ir check it out. Ar tai Mastelis pakankamai gerai? Saunus. 

Taigi kiekvienas komponentas poreikiai turėti įpareigoti funkciją. Užkrauta funkcija sako, ką man spausdinti ekrane? Bet komponentas yra nenaudingas, jei jis nėra Žinokite, ką spausdinti ant ekrano, todėl Jums reikia turėti įpareigoti funkciją. 

Taigi tinko dalykas, jums tiesiog reikia grįžti šiek tiek HTML. Ir kas cool kad ten dalykas, vadinamas JSX, kuri yra pratęsimas Javaskriptą, kad yra naudojamas reaguoti. Tai tegul rašote HTML viduje Jūsų JavaScript, kurie skamba keistai, kai rūšies Pirmą kartą apie tai galvoti, bet ji daro daug prasmės vėliau. Taigi, mes galime tai padaryti. Jei esate susipažinę su HTML, aš žinau, turime div su bendros paskirties konteineris stuff. Mes galime grįžti div, o viduje DIV, mes galime įdėti stuff. 

Taigi tarkime, mes norime suteikti tik tiesi-up iliustracijų dabar. Iliustracijų, sakyčiau, turės klausimą ir atsakymą. Taigi viduje DIV, tegul atsispausdinti punktą kad sako question-- Kas yra Galutinis atsakymas į gyvenimą, Visata? Ir tada atsakymas yra bus, žinoma, 42. 

Tai neateina pat ne visi. Taip, kad iš esmės galima tikrai rašyti HTML viduje savo JavaScript. Ir tai bus atspausdinti į ekraną. Taigi pabandykime jį. 

Taigi, mes turime komponentą. Turime pasakyti reaguoti įdėti ant ekrano komponentas taip React.render, todėl pastebėti, kad mes gydyti programą kaip ir bet kurio kito elemento. Mes rašome tai, kaip ji buvo HTML elementas. Kaip vietoj sakydamas kaip img už įvaizdį arba p už dalį, rašote App, todėl App traktuojami kaip HTML elementas. Kaip minėjau anksčiau, tai on steroidų elementas. 

Taigi jūs padaryti App, ir jūs suteikti jai vietą įdėti ją. Ir tai, kaip galite pasakyti, kur įdėti. Aš sukūriau paprastą div ant puslapis vadinama su puslapio ID, ir tai, kur elementas ketina eiti. 

Ir mes neketiname paleisti su HTML. Iš esmės tai yra ketina gauti įdėti viduje šio puslapio elementą kad turime ekrane. Taigi ji veikia šį kodą, o ji atkreipia tai dalykas ekrane, todėl čia mes esame. Mes padarėme mūsų pirmasis reaguoti komponentą. 

Taigi tik kaip Priminti mes švelniai padarė naujo tipo komponento, tiesa? Štai ką React.createClass. Ir tuo, kad komponentas, mes papasakojo, ką ji turėtų daryti. Kai šis komponentas yra būti spausdinami ant ekrano, ji bus išspausdinti div su viduje ji du punktai. 

Ir ką mes padarėme, mes padarėme naują programą naudojant kampas laikiklis app notacijos. Mes tai pasakė, kad jį viduje puslapio elementas. Ir taip, ką aš padariau, ji sukūrė nauja programa iš šio šablono. Ir tada aš pasakiau, kad padaryti ją. Taigi sakė, gerai, programa, ką turėčiau atsispausdinti? "App sako, eikite spausdinti div su dviem pastraipomis viduje ji. Ir voila, ten mūsų div su viduje ji dvi pastraipas. Prasmės iki šiol? 

Taigi, dar kartą, visa iššūkis Pareikšk yra tik žinant, kaip padaryti komponentus. Kaip padaryti, kad komponentai dirbti kartu. Dabar, kad mes padarėme mūsų pirmasis komponentas, grįžkime ir padaryti komponentai pritaikoma. Taigi jūs žinote, kaip HTML jums gali duoti savo mygtukus klases? Jūs galite suteikti savo inkarai href. Jūs galite suteikti savo įėjimai tipo, tiesa? Jūs galite suteikti daugiau užsakymą savybes, visi jūsų elementai kad jis taptų įdomus. Ir mes iš tikrųjų galime padaryti lygiai toks pats dalykas. 

Taigi tarkime, mes norime, kad mūsų App eiti padaryti bet kortelę. Dabar mes tiesiog lydyti labai kieta kortelę. Mes žinome, yra tik vienas Anketa ji gali padaryti, todėl mes ketina išbandyti ir pakeisti dabar taip kad mes galime tik suteikti jai tam tikrą kortelę. Tai bus išspausdinti kortelę. 

Turėtum pabandyti ir padaryti savo komponentai labai bendrosios paskirties. Taigi, aš tokiu būdu gali rašyti tai mano draugas ir bus kaip, kokia iliustracijų turite, tik pamaitinti jį į čia ir jis tai padarys pats. Jūs galite įdėti kitą dalykų savo app. 

Bet pirmiausia, tegul padalyti į dvi sudedamąsias dalis, bet mes nori atskirti kortelę spausdinimas dalis nuo faktinės app dalis. Taigi, ką mes galime padaryti, tai mes galite tai pakeisti iš App į CardView, tik naujas vardas app, ir mes galime padaryti nauja komponentas vadinamas App, neturi būti painiojama su senuoju App. Mes turime createClass, ir kaip HTML, galite lizdą reaguoti komponentai viduje viena nuo kitos. 

Taigi šiuo atlygina funkcija, funkcija grąža CardView, ir tai yra lygiai toks pats dalykas. Sužinokite, kodėl tai tas pats? Vietoj utilizavimo tik app, kad turi div ir prijungimas viduje ji, app paverčia CardView ir CardView teikia div ir punktą. Taigi tai yra mūsų pirmasis pavyzdys lizdavietes elementai viduje tarpusavyje. Ar tai prasminga? Taigi, dar kartą, mes turime CardView elementas. Mes turime app elementus kad tai daugiau nei. 

Gerai, kad mes norime, kad mūsų CardView-- jei jus duoti gerą CardView tam tikrą kortelę, jis bus išspausdinti už jus, tiesa? Taigi, pirmiausia, turime padaryti kortelę, taip padarykime kortelės objektą. Taigi leiskite savo kortelę equal-- jei esate visi susipažinę, tai tik žymėjimas priėmimas paprieštarauti JavaScript. Tai tipo kaip struct C, todėl mes padarė kortelę, ir taip dabar mes galime perduoti šią kortelę savybė arba kaip HTML atributas terminija, mūsų app. Taigi, mes galime tai padaryti, App Anketa yra lygus myCard. 

Jūs žinote, kaip į įvestį, jūs įvesties lygus tekstą arba mygtuką klasė lygus BTN už bootstrap ,? Tą pačią idėją, App skyriaus equals-- jūs turite įdėti petnešos here-- "App skyriaus lygus myCard, todėl šis sako, kad mes turime šią kortelę objektą. Aš ruošiuosi perduoti jį kaip nuosavybės į App komponentas. Ir ši programa komponentas galės ja naudotis ir daryti įdomių dalykų su juo. 

Taigi, mūsų programa bus suteikta kortelė, todėl dabar, tegul turi app tiesiog duoti atsakymas į CardView skyriaus pati, nes kaip app yra ne ketina nežino, ką daryti su juo, todėl mes tiesiog suteikti jį CardView. Taigi mes perduoti jį į pačiu būdu, kortelės lygus, ir todėl kiekvienas komponentas gali prieiti prie dalykų, kurie buvo pateikti į jį. Jie gali naudotis savybes , kurie buvo duota naudojant šią sintaksę, this.props.card. 

Taigi, kas atsitinka čia Jūs turite myCard objektą. Jūs perduoti jį į app naudojant App kortelę lygus myCard. Tai skyriaus objektas yra skiriamas jūsų app. App gali jį pasiekti kaip this.props.card. Tai tipo kaip paveikslėlį žino, ką tai šaltinis yra. 

Ši programa žino, ką tai skyriaus yra, ir ji gali padaryti medžiagą su juo. Tai galite padaryti skaičiavimus. Tai gali padaryti sprendimus, pagrįstus ne apie tai. 

Nes dabar, aš buvau ketinate perduoti this.props.card ant CardView. Prasmės iki šiol? Tai bus padaryti daugiau prasmės dabar. 

Gerai, kad dabar mes ne CardView. Mūsų CardView, atsižvelgiant į kortelę, turėtų spausdinti savo klausimą ir atsakymą. Dabar mes tiesiog atspausdinti kai kieta klausimus ir atsakymus. Turime išsiaiškinti out-- turime paklausti kortelę, kad jie davė mums kas yra klausimas ir atsakymas, ir tada atspausdinti šį išėję į ekraną. 

Taigi, mes galime tai padaryti čia. Be padaryti begin-- pirmasis daryti lygus. Taigi, ką mes darome čia mes žinome, kad kortelės yra davęs mums su nekilnojamuoju turtu, tiesa? Tai mums duota kaip indėlį. Kaip tai beveik kaip argumentai funkciją. Kortelė yra argumentas beveik į šį CardView. 

Mes ekstraktas, kad ir įdėti jį į kintamąjį klausimą. Įsitikinkite, kad atsakymas nuėjo kintamojo atsakymą. Paragina, kad skyriaus atsakyti. Ir dabar, kad mes turime tai, vietoj spausdinimo, kad tekstą mes ketiname spausdinti ką jie mums davė. 

Taigi tai stuff-- todėl mes ketiname irtis atsakyti į pirmojo klausimo. Leiskite pamatyti, jei tai veikia. Cool, tad dėti per jį dar kartą tiesiog būti tikri. 

Taigi, mano kortelė yra skyriaus objektą, ir mes yra duoti, kad kortelę app. Ir app ketina imtis kortelę ir suteikti jai į CardView. Ir tai CardView sako, jei jūs man jokio iliustracijų objektą, Aš atsispausdinti savo klausimą ir jos atsakymas, tiesa? 

Taigi, ką aš galėčiau padaryti, tai galiu siųsti šį kodą, pirmasis kaip 10 eilučių mano kodas, mano draugas. Jis galėjo įdėti jį į jo pareiškimui. Ir tol, kol jis padarė tą patį, kaip CardView skyriaus lygi tai, tol, kol jis sukūrė CardView ir davė jai reikiamą informaciją, jis galėtų teikti savo kortelę. Ir todėl šis būdas, tai tikrai kietas būdas jums sukurti komponentai, kurie naudoja tarpusavyje, tiesa? Ši kortelė, galėčiau paskelbti tai CardView internete, ir žmonės galėtų jį naudoti. Taigi, iš esmės, tai kaip viena iš standartinės funkcijos, C biblioteką. 

Tai funkcija, kur kažkas parašė ją. Jūs suteikti tam tikrą įvestį. Tai bus pagaminti tam tikrą produkciją. Jūs nerūpi, kaip ji veikia iš vidaus. Tol, kol jūs suteikiate jai teisę įėjimo, jis bus padaryti teisingą išėjimą. 

Ir komponentas gali būti manoma, kad tuo pačiu būdu. Tai CardView yra tarsi biblioteka funkcija. Jei mano, kad tai šiek tiek kortelė kaip turto, jis bus spausdinti tos kortelės turinį. Pavyzdžiui, jei aš galiu pasikeisti savo kortelę o bus kaip kas 5 plius 37, ji atitinkamai atnaujinti. Taigi tik keičiant įvesties, jis gauna tam tikrą gamybos apimtį. Taigi jūs galite galvoti apie komponentus beveik kaip funkcijos šiuo būdu, kuris galite sudėti. Jūs gaunate įvesties, kaip šis CardView kaip indėlį, gausite rezultatus. Šiuo atveju, išėjimas yra HTML. Prasmės iki šiol? Cool, todėl vėl savybės kaip galima perduoti informaciją į ir iš komponentų. 

Gerai, kad padarykime tai dalykas interaktyvus. Dabar tai tipo nuobodu. Kas yra [nesigirdi]? Jūs galite išspausdinti kai iš, bet tai visa tai gali padaryti. 

Taigi grįžkime į senas klausimas tik dabar. Gerai, kad dabar šie komponentai yra nuobodu, nes visi jie, jie gauna įvestį. Jie produkcija, tiesa? Tai tipo nuobodu. Mes norime, kad mūsų komponentai, kad būtų galima turėti kai valstybės vidaus natūra, kaip prisiminti kažką. 

Dėl iliustracijų, nes Pavyzdžiui, kokios valstybės gali norite prisiminti už iliustracijų? Kas laikina būsena gali norite prisiminti už A iliustracijų app iliustracijų? Auditorija: Nesvarbu, ar tai buvo apversta? Neel Mehta: Taip, tiesa. Taigi jūs galbūt norėsite laikyti trasa esate susiduria arba yra Jūs veidu žemyn ant kortelės. "Facebook", pavyzdžiui, galėtumėte norite prisiminti, kur į naujienų tu ar like kas profilis tu darai dabar. 

Apie Messenger, patinka tai, ką tekstą įveskite įvesties langelį, tiesa? Jei atnaujinkite puslapį, ji nueina. Bet jūs neturite iš tikrųjų rūpi. Tai tiesiog laikinas. Taip? 

Auditorija: [nesigirdi] Neel Mehta: Kaip blykste skyriaus, kaip jūs galite matome klausimas pusė arba atsakymas pusė? 

Auditorija: Gerai. 

Neel Mehta: Like A dvipusiam iliustracijų, tiesa? Taip, taip, jūs norite turi šią idėją dabar Turiu NT, kuris yra tarsi įėjimai, bet valstybė, kuri yra laikina, uh, kur esate puslapyje, tiesa? Vėlgi, aš pasakiau "Facebook" Messenger ", aš turiu kaip kuris asmuo jūs Facebook peržiūrėti arba kurie profilio, tiesa? 

Tai tik laikinas. Svarbu parodyti naudotojui kas vyksta, tačiau atnaujinti puslapį. Jis tikrai ne klausimas. Taigi, tai laikina būsena, kad mes visi tai valstybė. 

Taigi, dar kartą, ten valstybės ir rekvizitas. Lanksčiojo yra įėjimas suteikta iš savo duomenų šaltinį. Valstybė yra kaip numatytuosius. Tai kaip stuff, kad daro dalykas interaktyvus. 

Taigi mūsų CardView-- tegul turi Mūsų CardView-- todėl buvo gražus. Ką mes ketiname padaryti čia, mes ketiname paliesti CardView ir tik CardView. Ir todėl mano draugas, kuris gavo tai, jie nepastebės jokio skirtumo. Jie neturės keisti bet kurį iš jų pačių kodu, bet jie nori pamatyti savo CardView gavo Souped iki. Štai gražus dalis apie komponentus. 

Gerai, kad mūsų CardView, pabandykime ir sekti, ar mes palaipsniui iki arba veidu žemyn. Be reaguoti mes tai darome pirmiausia nurodant pradinę būseną. Kur kortelė pradėti? 

Taigi būkite funkcija vadinama getInitialState veikti, ir mes grąžinti daiktą. Šis objektas yra keletas būklę ir valstybė yra tik raktas-reikšmė pora. Kaip ir pavesti, turite pagrindinis ir vertė, jūs turite kaip vardas yra eilutė. 

Šiuo atveju, tarkim priekyje yra tiesa. Tai sako, kad mes turime valstybę. Vienas komponentas valstybės yra atributas vadinamas priekyje. [Nesigirdi], todėl pagal nutylėjimą, mes į kortelės priekyje, ir mes galime tai pakeisti kaip mes apversti kortelę. Logiška? 

Gerai, kad į padaryti, dabar, mes rodo į klausimą ir atsakymą. Dabar, ką turėtume daryti yra parodyti klausimą jei mes ant kortelės priekyje taip atsakymas yra už kortelės pusėje. Štai kodėl jūs visi padaryti kortelė interaktyvus. Taigi pabandykime ir tai čia. Na, visų pirma tiesiog padaryti kintamąjį. Mes galime paklausti dabar this.state.front. Mes prieiti teigti tą patį mes prieigos rekvizitas, todėl this.state.front. 

Jei mes priekyje, tada tekstas yra this.props.card.question. Jei mes ant priekinio skyriaus, mes ketiname bandyti ir patraukti klausimas iš kortelės. Priešingu atveju, jei mes ant nugaros kortelę, ką mes galime padaryti? 

Auditorija: Atsakymas? 

Neel Mehta: Yep, todėl tekstas lygus this.props.card.answer. Bet jei pastebėjote, mes naudojame Valstybinė priimti sprendimą nes dabar komponento atrodys kitaip pagrįsta ne, kaip jie sąveikauja su juo. Taigi vietoj to išspausdinimas tai, mes tiesiog atsispausdinti tekstą. Šaunu, taip ir dabar, kaip matote, matome tik klausimą. Ir jei aš čia pakeisti būseną rankiniu būdu į priekinio yra klaidinga mes gauname 42 atgal. 

Taigi, dar kartą, šis komponentas, turi savo būseną. Kaip mygtuką nežino, ar jis buvo paspaustas, ar ne, šis dalykas žino, kas yra priekinis arba ant nugaros. Pagal nutylėjimą, tai ant priekinio. Ir tada, jei ji priekyje, mes atsispausdinti šį klausimą. Jei tai ant nugaros, mes spausdinti atsakymą. Taigi, dar kartą, informacija suteiktas yra ta pati. Jis tiesiog atrodo kitaip remiantis tuo, kaip jums programuoti ją. Taigi, pavyzdžiui, "Facebook" Messenger Net jei jūs gaunate tą patį duomenų šaltinį, tai gali atrodyti kitaip nes būsena yra skirtingi. Jūs ieškote ne Skirtingi asmens pranešimas. 

Gerai, kad tai yra viskas gerai ir gerai, bet dabar kas iš tikrųjų kad mums gali pakeisti, ar Mūsų kortelė pirmyn ar atgal. Mes galime tai padaryti, pridedant pasukt mygtuką, mygtuką į kortelę, kad bus apversti kortelę, jei ji [nesigirdi]. Taigi leiskite pridėti mygtuką čia tai mygtuką, šis mygtukas bus pasakyti apversti. 

Ir taip dabar, tai nieko nedaro. Jis tiesiog atrodo gražiai. Ką mes galime padaryti, tai mes galime pridėti spragtelėjimą prižiūrėtojas, onclick lygus this.flip, ir mes apibrėžti pasukt vėliau. Bet iš esmės, onclick yra funkcija, kuri iškviečiamas, kai vartotojas paspaudžia ją. 

Taigi mygtuką žinos kai jis buvo paspaudėte. Nuėjo jis buvo paspaudėte, ji apversti kortelę. Tai lyg savo picos pristatymo vaikinas. Jūs esate kaip, viskas gerai, kai kas nors ragina mane, aš pristatyti picą, tiesa? 

Jūs užsiregistruoti šį klausytoją. Jūs klausytis įvykį. Gauni vadinamas, ir kai Renginys atsitiks, jūs kažką daryti. Jūs gaunate pica. Tokiu atveju, kai esate paspaudėte, galite apversti kortelę. 

Ir todėl mes turime apibrėžti funkcija, kuri bus apversti kortelę, todėl mes rašyti šią teisę čia apversti funkciją. Ir taip, ką jūs manote Flip darys? Vėlgi tai iškviečiamas, kai mes spustelėkite Flip "mygtuką. Ką reikėtų funkcija atvirkštinė daryti? 

Auditorija: Pakeisti this.state.front nuo ištikimi klaidinga, klaidinga tiesa. 

Neel Mehta: Yep, todėl imtis visų this.front is-- priekinis valstybė. Paimkite priekinį valstybėje, jei tai tiesa, kad ji klaidinga. Jei tai klaidinga, kad tai tiesa, tiesa? Taigi pabandykime tai. 

Jūs negalite keisti būseną tiesiog daro this.state. Jūs galite tai padaryti. Jūs negalite padaryti. Jūs turite naudoti funkciją vadinamas this.setState. 

Taigi galima sakyti, this.setState priekyje dvitaškis tai kur vėl, šauktukas taškas reiškia priešingai. Manau, jei tai. state.front Tiesa, jis bus paversti klaidinga. Taigi mes nustatyti valstybę nuo ištikimi klaidinga. Jei tai klaidinga, mes nustatyti, kad jis klaidinga tiesa. 

Tiesiog pastebėti, kad mes sukurti ir gauti šiek tiek skirtingai, todėl pabandykime tai. Bada Bing, pažvelgti į tai. Atvirkštinė mygtukas dabar perjungti priekio į galą būklę. 

Ir taip čia, kur matote Šiek tiek apie reaguoti magija. Kaip mes niekada jis pasakė, kad ji vėl taptų. Mes niekada sakė jis perbraižyti nieko. Jei darai tai be reaguoti, norite jau to-- patinka, kai Flip mygtuku, jūs turite pasakyti jį rankiniu būdu iš naujo teikti, tiesa? 

Reaguoti yra tikrai cool, kad jei jūs suteikti jai tam tikrą būklę ir savybes, ji visada suteiks lygiai toks pats dalykas. Ir todėl, kai mes kada nors mes pakeisime Valstybės ir savybės, reaguoja tik vėl tampa visa tai. Ji žino, kad yra vienas su viena korespondencija tarp valstybės ir parametru ir HTML. Taigi, kai kuris nors iš jų pasikeičia per nustatytą valstybės, jis pasikeis, kaip mokėti iš naujo suteiktos. Ir todėl iš esmės reaguoti yra tarsi laukia jums pakeisti. 

Kai jis keičia kažką, jis bus iš naujo suteikti visą puslapį. Ir jei tai skamba neefektyvus, tai todėl, kad jis būtų, bet reaguoti naudoja dalyką vadinamas šešėlis DOM. Vietoj piešimo puslapį tiesiogiai, ji išlaiko virtualų HTML medį atmintyje. 

Žinote, HTML kaip medis, kaip hierarchinė duomenų struktūra. Jis saugo netikrą medį atmintyje, ir kai jūs atnaujinsite puslapį, jis bus atkreipti vienas suklastotas medis, ir jis bus apskaičiuoti ką pakeisti reikia padaryti puslapis padaryti du medžiai lygūs. Taigi, iš esmės, tai beveik Re-teikia daug. Ir tada jis tik patinka keičia puslapis mažai tweaks, kiek reikia, todėl labai, labai, labai veiksminga. 

Taigi, iš esmės reaguoti bus kai jūs ką nors pakeisti, jis bus pakartotinai teikti puslapį praktiškai. Tai bus išsiaiškinti ką man reikia pakeisti, kad tikrasis puslapis atspindi virtualus puslapis, ir jis bus tai padaryti. Štai virtualus DOM. Tai vienas iš didžiausių savybės reaguoti. 

Ar tai prasminga? Turite klausimų? Taip? 

Auditorija: Kaip veikia palyginti dar MVC kad mes kalbėjome apie prieš kaip išteklius. 

Neel Mehta: Taip, klausimas kaip tai palyginti su MVC? Jūs klausėte apie išteklius. Na, pakalbėkime apie tai, kaip ji veikia. 

Be MVC, norite atnaujinti modelį. Šiuo atveju mes norime turėti kortelė. Vaizdas būtų turėti Flip mygtuką ir valdymo būtų pasukt funkciją. Taigi vaizdas būtų papasakoti valdiklis apversti apversti. Apversti būtų papasakoti Modelis pakeisti, tiesa? 

Ir todėl, kai jūs darote tai MVC, jums klausytis modelis pakeisti, ir jūs vėl teikti nuomonę pakeisti. Arba jūs tiesiog turite patinka turėti valdiklį. Palaukite modelis keisti, o tada rinktis iš kaip daikto dalis pakeisti. Čia mes turime vieną dalyką, bet didelis app, jūs turite prisiminti, kas patinka Į kiekvieną vietos pakeitimas, todėl šiek tiek erzina. Ir taip reaguoti yra gražus nes ji turi šešėlį Dom. Jis gali sau leisti tik perrašyti visą dalykas. Jūs neturite selektyviai kaip atspėti, ką atnaujinti. 

"Facebook", jei norite gauti naują žinutę, kad MVC, jūs turite prisiminti, Gerai, pakeisti dalykus ne iš viršaus puslapis žinutės piktograma. Taip pat pop naują langą apačioje. Taip pat padarys naują dalyką į tą langą. Taip pat atkurti garsą. 

Štai daug daiktų išeinant tuo pačiu metu. Ir taip, jei jūs neturite turi šešėlį Dom, norite turite padaryti, kad rankiniu būdu, nes Jūs negalite atsikratyti visą puslapį. Jūs negalite sau leisti, todėl jūs turite keisti kiekvieną daiktą rankiniu būdu, kuri yra tikrai erzina MVC. 

Taigi, siekiant, kad būtų ekonomiškas, jie selektyviai atnaujinti puslapyje, kuris yra efektyvus, bet ir erzina. Be reaguoti, nes šešėlis Namas, gausite abu dalykus nemokamai. Tai efektyvus, nes šešėlis Dom. Silpnoji atnaujina puslapį. Tai ne daro medis manipuliacijos. Jūs gaunate efektyvumą. Jūs taip pat gausite naudojimo paprastumas, nes jei jūs tiesiog perrašyti visą puslapį, bet jūs tiesiog žinau, viskas gerai, ką ketinate būti puslapyje kažkur. Tai gali būti kitoje vietoje, bet tai bus ant puslapio, tiesa? Taigi jūs tiesiog iš naujo suteiktos visa, ką praktiškai, ir tu gali padaryti pora pokyčiai paties puslapio. 

Taigi, dar kartą, MVC jums turėtų pasirinkti tarp naudojimo paprastumas ir efektyvumas, ir reaguoti, gausite tiek. Taigi, tai geriau. Logiška? Kieta medžiaga. 

Gerai, kad pažiūrėkime pakalbėkime šiek tiek apie 4 žingsnyje, kaip mes galime įdėti komponentus. Taigi, mes turime šią teisę dabar. Mes turime atvėsti mažai mygtuką. Mes galime apversti jį atgal ir pirmyn, ir kad visa tai daro. Tarkime, mes norime turi kitą komponentą. Tarkime, mūsų iliustracijų app turėtų jose visų kortelių sąrašą kad jūs turite, kad reiškia, kad mes turėtų turėti kitą komponentą. Na, gal ją vadina sąrašo rodinį. Pakelkime sąrašo rodinį, kad koegzistuoja su CardView, ir šis sąrašas peržiūrėti ir CardView patiks dirbti kartu. Ir jūs galite juos sujungti kad mūsų app už jus. 

Taigi, pirmiausia, tegul padaryti pora daugiau kortų į dešinę. Tarkime, ką kortos? Ir tik todėl aš neturiu pagimdė jums rašyti jį, Aš tik ketina nukopijuokite jį iš čia. Ir todėl aš ruošiuosi ne suteikti jai tik vieną kortelę. Aš ruošiuosi suteikti jai kortelių masyvo. Taigi pirmieji Apps ketina nutraukti dabar. Gerai, kad mes ketiname padaryti Tai sugeba kelias korteles. Taigi, pirmiausia, mes ketiname duoti, o ne tik vieną kortelę tačiau kortelių masyvas, kaip kortų sąrašą. Ir šiuo atveju, turime tris iš jų. 

Gerai, taip taip app yra ketinate gauti sąrašą korteles, ir jis ketina nuspręsti, kuris vienas parodyti į CardView. CardView gali tik padaryti vieną kortelę, tačiau programą gauna visų kortelių sąrašą, tiesa? 

Taigi, kai jūs išsiaiškinti vieną skyriaus duoti CardView, kaip jūs atspėti jums gali būti suteikta priimti sprendimą, apie kurį skyriaus parodyti? Norėdami suteikti jums užuominą, kad tai laikinai Būsite peržiūrėti tam tikrą kortelę. Jei atnaujinkite puslapį, jums tiesiog grįžti į pirmą kortelę. Tai gerai, nes tai laikina. Kas technika gali mes naudojame? 

Auditorija: Jūs galite padaryti kintamąjį taip kaip jūs turėjo priekyje. Ar tai tiesa, galite turi dabartinis skyriaus lygus 1? 

Neel Mehta: Taip, kad mes nori turėti valstybę, tiesa? Galima būtų naudoti narė, kurios komponentas išsiaiškinti kurią kortelę mes norime gauti. Kaip mes turime sąrašą visos kortos, mes naudoti valstybės išsiaiškinti vienas iš pirmųjų kortele, antroji plokštė, trečioji kortelė, ir taip toliau. 

Taigi app taip app bus gauti turi getInitialState funkciją, getInitialState funkcija grąža. Ir mes tiesiog pasakyti activeIndex 0. Taigi dabar mūsų app turi savo valstybę. 

Ir taip dabar padaryti, išsiaiškinti kortelė, tegul tiesiog eiti į masyvą ir patraukti į šio indekso dalykas. Pasirinkite kortelių lygios this.props.cards this.state.activeIndex. Taigi, kaip matote čia, rekvizitai ir valstybė iš tikrųjų dirbti kartu. Taigi dabar, kad mes turime activeCard, mes jį vadiname activeCard, ir pažiūrėkime, jei tai veikia. [Nesigirdi] 

O, kad buvo tekstas klaida. Ak. 

Cool, yep, todėl dabar mes buvome atgal kur buvome anksčiau, tiesa? Sena programa, išskyrus dabar mes galime padėti kortų sąrašas ne tik vieną kortelę. Ir dabar, vėlgi, jei mes pakeisti activeIndex, mes galime pereiti nuo 0 iki 1, ir dabar, kad antra korta, ir tada mes nuėjome į 0. Taigi čia nauja Souped up versija mūsų. 

Gerai, kad dabar galime turėti sąrašo rodinį, kad rodo visus į savo programą korteles, todėl mes padaryti nauja komponentas vadinamas ListView. Tegul ListView lygus react.createClass. Taigi, mes norime suteikti tikriausias nerūšiuotas Sąrašas su sąrašo elemento už kiekvieną kortelę. Ir todėl mes turime kortų krūva. Norime vieną elementą už kiekvieną kortelę, tiesa? Mes galime padaryti už kilpa arba ką padaryti naują sąrašo elementą. Bet kaip jums tai padaryti Pareikšk, naudokite dalykas vadinamas žemėlapis. Žemėlapis yra įrankis, ar funkcija galite naudotis kad už kiekvieną elementą, veikia šiek funkciją, trunka grąžos vertę, ir suteikia jums tą atgal. 

Taigi, kaip, pavyzdžiui, turime masyvą 1, 2, 3.map function--, ir šis yra sutrumpinta dėl function-- x rodyklių x kartų x. Tai sako, už kiekvieną numerį 1, 2, 3, jį priimti. Square ją ir duoti atgal. Taigi, ką jūs manote 1, 2, 3.map x eina x kartų x suteikia jums atgal suteikta kad ši funkcija yra paleisti ant kiekvieno minėto masyvo elementas. 

Auditorija: 1, 4 9? 

Neel Mehta: Taip, 1, 4, 9 nes jūs darote 1 kartus 1 d. Tai suteikia jums vieną. Štai pirmasis elementas. 

2 kartus 2 yra 4. Štai antrasis elementas. 3 kartus 3 yra 9. Štai trečiasis elementas. Logiška? Taigi žemėlapis turi metodas, kurį naudoti funkcines programuotojų, naujas stilius programavimo kažką daryti kiekvienam savo sąrašą elementas. Ir taip, tai skamba pažįstamas. Mes turime kortelės. Mes norime gauti sąrašo elementą už kiekvieną vienas, todėl mes tiesiog naudoti žemėlapį čia. Mes pasakyti, tegul sąrašas dydžiu neprilygstami this.props, atvirukai, žemėlapis. 

Ir taip suteikiama kortelė, mes ketina sukurti sąrašo elementą su to kortelės turinį pusėje jį. Leiskite tik pasakyti, mes norime duoti kortelės apklausti Taigi card.question. Taigi šis sąrašas Sudėtyje yra masyvas Li arba sąrašo elementus ten, kur vienas sąrašas Prekė už kiekvieną kortelę, ir kad yra CARDS klausimą. Logiška? 

Cool, todėl dabar tegul iš tikrųjų spausdinti, kad iš. Taigi, mes grįš ul. Viduje, kad netvarkingai sąrašą mes tiesiog klijuoti visą sąrašą kad jie davė mums. Saunus. 

Gerai, kad dabar ši Sąrašas Peržiūrėti veikia tik rasti. Bet apie sąrašo rodinyje klausimų? Jūs turite kortų krūva. Jūs darote sąrašo elementą už kiekvieną kortelę. Ir jūs įdėti juos viduje netvarkingai sąrašas ir galite duoti jį atgal. Taigi dabar galime veikti taip, mes įdėti Tai mūsų app viduje, todėl mes galime tai padaryti, sąrašo rodinį. Kas argumentas mes pereiti į sąrašą požiūrį? Kas savybės mes duoti? Atminkite, jei galite duoti jis kortų krūva, jis bus padaryti sąrašą peržiūrėti šių kortelių. Taigi, kas būtų mes pereiname čia kaip argumentas? Auditorija: kortų sąrašas? Neel Mehta: Taip, taip, kortelės lygus this.props.cards, tiesa? Ir taip tik problema yra tai, kad jūs galite tik Paaiškėjo vieną aukščiausio lygio elementas teikia, todėl jūs turite wrap jį div. Tai keista. Taigi pažiūrėkime, jei tai. Ar tai veikia? 

Taip, ten jūs einate. Taigi dabar mes turime sąrašą kortelių apačioje, ir tada mes turime CardView save ant viršaus, ir kad bus apversti tarp dviejų pusių kortelę. Dabar Ar tai prasminga, kaip aš padariau, kad? Taip, taip, ir vėl, mes turime dvi sudedamąsias dalis. Pirmasis komponentas atspaudai atliekamas kas sąraše skyriaus. Štai sąrašas vaizdas. Ir antrasis komponentas spausdina tik tą kortelę. Jei suteikti jai tam tikrą kortelę, jis bus spausdinti informaciją apie tą kortelę ir jums apversti pirmyn ir atgal. 

Taigi, jei norime, mes galime pabandyti ir aptarimas apie pridedant keletą naujų funkcijų tai. Priešingu atveju galime kalbėti šiek tiek daugiau apie iš reaktoriaus greičio, ar mes galime atsakyti Jums iškilusius klausimus nes jie visi yra iš pagrindinių dalių iš reaguoti, kad aš noriu kalbėti apie. Mes galime eiti į priekį. Mes galime atsakyti į klausimus. Ką gi, jūs norite. 

Auditorija: Ar galima naudoti JSX normaliai JavaScript? Arba tai, kad kažkas, kad atėjo su [nesigirdi]? 

Neel Mehta: Kyla klausimas, ar naudoti JSX su normaliu JavaScript? Atsakymas yra taip. JSX yra tik tai būdas trunka jūsų JavaScript, kad turi HTML viduje ji, ir kaupia į JavaScript, kad neturi HTML viduje ji. Taigi pastebėti that-- todėl pastebėsite čia. Tai atrodo kaip jūs turite kaip div ir jūs turite stuff viduje ji. 

Tai kaupia į JavaScript, kad kaip generuoja tą patį. Manau, tai, ką aš noriu pasakyti yra tai, kad JSX yra tik sintaksinė, kaip tai už JavaScript Preprocesorius daug kaip PHP yra HTML Preprocesorius. UAB yra preprocesoriaus už JavaScript, kad leidžia jūs įtraukėte HTML viduje jūsų "JavaScript". Ir todėl, jei turite tinkamą transformatorius kuris yra dalykas, vadinamas [nesigirdi], kuris pakeis. Teisė Preprocesorius, jis bus jums tai padaryti. 

Auditorija: [nesigirdi] Neel Mehta: Paprastai nereikia įdėti HTML viduje JavaScript nebent jūs darote reaguoti. Bet jūs galite tai padaryti bet kuriuo atveju. Yep? 

Auditorija: Manau, kad jūs aprašė Pareikšk kaip funkcinis programavimas kalba. Mes jau mokytis C į CS50. Ar taip pat C funkcinis kalbos? Neel Mehta: Taigi klausimas apie funkcinis palyginti su kitu dalykas vadinamas būtina arba procedūrinių programavimo. Yra dviejų rūšių programas populiarus. Vienas vadinamas procesinis, kuris yra visa informacija apie, kaip daro komandas, ir vienas yra funkcinis, kuris yra visa apie atsižvelgdamas funkcijas ir turintys įvesties ir išvesties iš tų. Reaguoti yra funkcinė paradigma. C yra labai procesinis paradigma. 

Ir, kaip pavyzdžiui, C, pavyzdžiui, jūs neturite padaryti deklaratyvi būdas padaryti programą, tiesa? Jūs turite pasakyti, atspausdinti. Pakeiskite šiuos duomenis struktūrą. Spausdinti tai. Tai viskas apie komandas. 

Be reaguoti, ten nėra kad daugelis komandos. Tai viskas apie atsižvelgdamas komponentai jums kartu sudėjus. Jie kaip funkcijų. Jūs turite kaip funkcija vadinamas CardView, kuris yra funkcija kad turi įvesties, išvesties, ir taip reaguoti yra viskas apie šios filosofijos mums having-- turite duomenis. Jūs perduoti jį per šį algoritmas, ir jis bus išvesties HTML kad jus tiesiog atspausdinti puslapį, ir todėl jūs turite statyti Kuskas. 

Taigi, norint atkreipti į tai, kas metafora Minėjau anksčiau, jūs žinote, kaip "Facebook", jei jūs gaunate pranešimą, ir pasirinkti, ką dalys atnaujinti, tai procesinis. Tai būtina, tiesa? Gerai, aš žinutę. Leiskite pakeisti sąskaitą ten. 

Leiskite pop langą čia. Leiskite pakeisti sąskaitą ten. Leiskite atkreipti tai čia. Štai procesinis požiūris. 

Štai ką, pavyzdžiui Kampinis, Boost, stuburą, kitus sistemas naudoti. Reaguoti yra funkcionalus. Tai labai skiriasi būdas mąstymo apie dalykus. Tai užtrunka šį tegul turi idėją funkcijas arba algoritmai, kad bus jums suteikti jai duomenis. Tai bus išspjauti, kas tai turėtų būti, o kompiuteris rūpinsis svėrimą. Jūs neturite tvarkyti patys. Ar tai padaryti šiek tiek prasme? Taip? 

Auditorija: funkciniu kalba viskas vyksta vienu metu? 

Neel Mehta: Ne, viskas atsitiks tvarka. Kaip čia dar yra užsisakyti, tačiau tai nėra atsitikti tvarka kaip pagirti, komandą, komandą. Taip atsitinka tvarka funkcija suteikia jums rezultatus. Įdėk kad į kitas pareigas. Įdėk kad į kitą funkcija, kita funkcija. 

Jei CS51, jums sužinoti funkcinių programas šiek tiek iš taikoma ši. Bet iš esmės, ką daro Pareikšk kietas ne tik į vieną pusę duomenų srautų ir virtualus Namas, bet tai idėja Funkcinis programavimas. Ir funkcinio programavimo yra labai lengva komponuoti ir padaryti cool stuff iš, ir tai labai lengva galvoti apie ir priežastis, apie tai. Taigi, tai dar vienas geras traukimui reaguoti. Bet daugiau klausimų? Taip? 

Auditorija: Hm, kodėl gi jūs naudoti tegul, o ne var? 

Neel Mehta: Taigi klausimas yra kodėl jūs naudojate tegul vietoj var? Tai yra dalykas, vadinamas ES6 arba ECMAScript 6. Tai nauja versija JavaScript. Yra daug techninių priežasčių krūva, Bet tegul tai geriau versija var. 

Tai, kaip jūs deklaruoti kintamuosius. Galite naudoti tegul. Galite naudoti var. Tegul turi techninių krūva reasons-- jūs galite ieškoti juos iki later-- kodėl tai geriau. Iš esmės, ES6 yra keletas gražus nauja sintaksė, keletą naujų funkcijų ant senojo JavaScript. 

Taigi, mes turime kaip penkias minutes. Aš tik norėjau kalbėti apie dar vienas dalykas labai greitai. Jei jūs turėjote kokių nors klausimų, pakalbėkime apie tai po to. Bet tik todėl šis gauna sugauti kamera, aš tiesiog noriu kalbėti šiek tiek apie tai, kaip iš tikrųjų naudoti Pareikšk savo apps. 

Jeigu jūs einate čia Facebook.GitHub.IO/react, tai puslapis skirtas reaguoti ir jis bus parodyti jums, kaip jūs iš tikrųjų naudoti Pareikšk savo puslapiuose. Iš esmės, tai šiek tiek sudėtinga bandote įdiegti reaguoti. Tai nėra taip paprasta, kaip jūs tiesiog vilkite ir upuść JavaScript ten. 

Jūs turite savo transformatorius įsteigti, kuri, kaip ji tai padarė anksčiau, paversti savo JSX į normalus "JavaScript". Turite dalykas, kad bus kaupia jums ES6 normalus. JavaScript ten juda daug dalys turite daryti, kad ten dalykas vadinamas Yeoman, Yeoman.io. Ir tai yra komandų eilutės įrankis, kad mes padėti Jums pastoliai iš jūsų Pareikšk projektai lengvai. 

Taigi jūs galite skaityti apie tai vėliau, tačiau yra keletas įrankiai kad Yeoman siūlo. Jie leidžia jums sukurti reaguoti APP su viskuo pastatytas. Kaip jis bus sukūrėme į, jų komponentai pastatytas. Tai bus turėti savo transformatorius pastatytas. Jie turi daug kietas Daiktai pastatytas automatiškai naudojant šiuos dalykus, vadinamus generatoriai. 

Taigi skaitykite apie tai, jei jums patinka. Tiesiog eikite į Yeoman, Y-E-O-M-A-N ir Jūs rasite generatoriai, kaip šie. Ir generatoriai, pavyzdžiui, tai, jums tiesiog patinka vienas yra pora komandų eilutės komandas. Tai bus pastoliai patikrinimą Visa reaguoti app už jus. Tai bus gauti visą vadovą vamzdynai, ir grunt darbą už jus, ir tai, kodėl jūs tiesiog sutelkti nuo tiesiog raštu reaguoti. 

Taigi, iš esmės, statome Pareikšk app yra nontrivial. Tai laidinio visi kartu, tačiau yra įrankiai, kad bus padaryti tai už jus. Taigi, jei norite padaryti Pareikšk App, pabandykite daryti, kad taip. Jei tiesiog norite eksperimentuoti, galite pabandyti naudoti šį CodePen nes tai CodePen turi visi reaguoja laidus. Aš padariau visą darbą už jus jau. 

Taigi, jei norite, kad tarsi gamyba išleisti reaguoti programą, pabandyti vieną iš šių generatorių. Jei tiesiog norite žaisti aplink, tai dažnai verta tik kaip pabandykite žaisti aplink CodePen čia. Garsas geras? Saunus. 

Taigi, kad viskas, ką turiu. Vėlgi, visa kodas ir pavyzdžiai bus šiame tinklalapyje čia. Taigi, dar kartą, mes ne kalbėti apie daug sintaksės reaguoti, bet rasti visus tuos mažai sintaksiniai detalės, visa tai bus prieinama Šioje svetainėje čia. 

Taigi aš rekomenduoju kaip imtis pirmąjį žingsnį. Įdėkite jį į savo CodePen. Pabandykite dirbti priėmimo ji į antrąjį etapą. Yra Ketvirtasis žingsnis, ir tik pamatyti, kur jūs gaunate iš to. 

Bet daugiau klausimų, patikrinkite iš to puslapio, arba rašykite man. Štai mano elektroninio pašto. Bet aš norėčiau, kad padėtų jums su bet Jums iškilusius klausimus apie reaguoti. Taigi, yep, tai viskas, ką turiu. Ačiū visiems labai už žiūrėti arba dalyvauti. Ir aš paimsiu visus klausimus jums gali tekti po to dabar. Taigi ačiū visiems už žiūrėti.