[Speel van musiek] 

Neel Mehta: Hier gaan dit. 

Wel, almal, welkom om web programme van die toekoms met reageer. Dit is CS50. My naam is Neel. Ek is 'n TA vir CS50 en 'n stage by Harvard Kollege en 'n baie, baie passievolle web-ontwikkelaar. So ek is baie opwindend om vandag met jou praat, of jy hier of by die huis is kyk, ongeveer Reageer, wat weer soos ek gesê het, die toekoms van die web apps. 

So Reageer is 'n web raamwerk. En as ek het al vertel sommige mense hier, 'n raamwerk is net 'n stel gereedskap wat jy kan gebruik om die struktuur en die bou van jou web app. En web programme is, weer, webwerwe wat interaktiewe soos Facebook, Twitter.com, Instagram.com, wat ook al. 

So Facebook is 'n web raamwerk wat ontwikkel is deur Facebook 'n paar jaar back-- Reageer is. Dit is sedertdien in Facebook op hul mobiele apps en die web app, Instagram. Khan Akademie is 'n ander prominente vroeë adopter van reageer. 

Dit is regtig nie om uiters gewild. As jy al ooit dinge soos Hoekige of gebruik Ruggraat, dit is van dieselfde familie, maar dit het sedertdien ver oorskry hul gewildheid. Dit is die warm nuwe ding. Dit is baie, baie groot. 

En so Reageer goed nie net as 'n web raamwerk vir die bou van koppelvlakke. Dit is goed vir die bou van web koppelvlakke. Daar is ook 'n ding genoem Reageer Native wat Kom jy koppelvlakke te bou vir Android en IOS en miskien ander platforms in die toekoms die gebruik van net dieselfde JavaScript-kode. Jy kan presies dieselfde gebruik JavaScript-kode webtuistes lewer, om Android apps en IOS apps lewer. 

Dit is 'n baie, baie opwindende tyd. Dit is 'n baie, baie cool geleentheid. Dit is regtig 'n universele web koppelvlak instrument vir ontwikkeling, so dit is 'n baie, baie belangrikste ding om te weet. En, soos ek vertel mense voor, dit, dink ek, gaan hoe ons verander bou web programme vir ewig. So dit is dalk 'n bietjie oordrewe, maar ek dink dit is 'n goeie ding om te weet. 

OK, so wat is reageer? Reageer is 'n raamwerk wat jy kan gebruik vir die bou van koppelvlakke. 'N koppelvlak is, weer, 'n webblad, reg? So hier is Instagram.com, gebruike reageer. 

Reageer is gebou op die idee van komponente. A is 'n HTML komponent element op steroïede, so 'n HTML element is soos 'n knoppie. Dit is 'n paragraaf. Dit is 'n kop, reg? En Instagram sal hierdie, maar dit sal ook komponente van Reageer gebruik. 

Reageer komponente is opgewarmde HTML elemente wat hul eie gedrag vervat in hulle. So, as 'n voorbeeld, kan ons ' 'n tyd element, 'n tyd komponent, wat sal soos bevat die tyd stempel, jy weet, 'n komponent wat profile sal die beeld van die profiel bevat en die naam van die persoon. Dit kan 'n soortgelyke toonbank, het wat kan tel soos die aantal likes, en as jy op dit, sal dit verhoging van die aantal mense soos. A komponent is net 'n n klomp van die HTML kode wat het 'n paar funksies toegedraai binnekant van dit. So dit is soos 'n HTML element op steroïede, soos ek gesê het. Jy kan hierdie komponente te neem, en jy kan hulle saam om nuwe komponente te maak, hierdie geval, 'n pos komponent, wat bevat al hierdie dinge. Dit sou Tyd bevat, profiel, LikeCounter, miskien is die kommentaar en miskien die beeld self. En so web apps is net gebou deur komponente en sit hulle saam. 'N Instagram feed is niks meer as 'n klomp van poste een na die ander, elke pos bevat soos die Time, Profiel, LikeCounter, en so aan. Dit is soort van soos die bou van 'n huis. Jy hoef nie die bou van die huis van bo af. Jy neem components-- jy neem soos die badkamer. Jy neem die bedroom-- jy hulle vashou saam, en jy het 'n nuwe komponent. Jy het 'n nuwe deel van die huis. 

So reageer is rondom gebou hierdie idee van komponente wat is interaktief, wat verklarende is. Soos jy nou net sê wat 'n profiel is, en dit maak dit. Hulle is composable. Jy kan 'n tyd en 'n profiel te neem, sit hulle saam, maak iets beter. En hulle is herbruikbare, so as jy het die bron-kode vir 'n pos, jy kan wat oral insluit. 

Jy kan insluit 'n Instagram ding op jou eie webwerf. Jy kan insluit in Facebook, byvoorbeeld, so lank as wat dit gebruik Reageer as well. So komponente is regtig, regtig, regtig kragtige boustene van die web wat kan enige plek gebruik word en sit saam om nuwe boustene te maak. Dit is die baie, baie hoë vlak oorsig. So, weer, as jy ' enige vrae by enige punt oor die filosofie van reaktor, die kodering, om my te stop, en laat my weet. 

OK, so reageer is cool, want dit het 'n ander manier van kyk hoe jy bou web apps. Jy het waarskynlik gehoor van MVC, 'n model wat jy beheer in CS50 of wat ook al ander indringende klasse wat jy gebruik. En die meeste raamwerke gebou rondom die idee van MVC. Reageer nie. Reageer is gebou rondom die idee van eenrigting data vloei soos gesien deur hierdie grafiek of grafiese hier. 

Basies, jy het 'n data bron. En die data bron sal besluit hoe om uit te lê sekere komponente. En die komponente sal dan, wanneer dit verander, Hulle vertel die databron om te verander. 

Om die Instagram gebruik Byvoorbeeld, kan jy ' 'n lys van die post voorwerpe soos in 'n databasis of iets. Dat die data. En dan is ons post komponente sal daardie data te neem, en die gebruik dat data te lewer 'n ding op die skerm. Dit is wat die pyl van data te komponent is, en dan dat dieselfde data gebruik om 'n klomp van die komponente te lewer. 

In Facebook Messenger vir Byvoorbeeld, wat is reageer jy dalk 'n lys van het boodskappe as jou data bron. En dit sou nie lewer slegs die lys van boodskappe maar ook die lys van vriende wat jy het. Jy het die ongelees telling. Miskien lewer ook die Facebook ding dit is aan die onderkant van Facebook.com. Dieselfde data is 'n enkele bron van die waarheid en dat 'n baie veroorsaak komponente gelewer moet word. En wanneer een van daardie komponente verander word, dit gaan terug en verander die data bron. 

Jy 'n boodskap te stuur, reg? Dit verander die data bron. Jy lees jou boodskappe, sodat jy ongelees tot 0 te stel. Dit verander die data bron. En agterkom dat al hierdie een arrow terug te gaan na dieselfde data bron, so jy weet, kry 'n sekere stel data, jy weet presies wat die page gaan lyk. Dit is deterministiese. Jy weet, gegewe sekere data, wat die bladsy gaan lyk. Jy kan voorspel hoe dit gaan gedra en hoe dinge gaan om te werk wanneer hulle saam is sit. 

En as ek 'n miljoen komponente hier, sou dit dieselfde optree, reg? Jy sal nie enige het weird verbindings. Een data gelewer miljoen komponente. 'N miljoen komponente kon terug te gaan en die data te wysig. En so is dit baie lekker. Ons bou composable, maklik skaalbare web apps. 

Jy het een databron, die bron van die waarheid. Dit vertel jou komponente hoe om uit te lê die bladsy en die komponente sal hanteer interaksie. En as hulle wil verander dinge, net terug te gaan en vertel die data bron om te verander. Maak sin? So Reageer is al oor die begrip hoe om 'n komponent bou en hoe om jou komponent maak interaksie met die buitewêreld. 

Die maak van die komponent Interact met die buitewêreld gebruik 'n ander tegnologie genoem Flux, wat is 'n raamwerk wat bygevoeg op die top van reageer. Ons gaan nie om te praat oor dit. Ons gaan meer oor praat, gegewe data, hoe kan jy 'n komponent lewer? 

En so Reageer is regtig cool omdat jy kan dit gebruik met enige agterkant wat jy wil. As jy soos 'n Python agterkant, as jou Python kan spoeg uit sommige data, Reageer kan lewer. As jy nie JS uitsette van data, Reageer maak dit. Ruby relings met data, Reageer maak dit. 

So Reageer is basies 'n web view-- n front-end met komponente vir enige data bron hoegenaamd nie. En so gaan van data bron reageer komponente is redelik maklik. Gaan die ander kant is 'n bietjie harder. Wat gebruik maak van Flux soos ek voorheen genoem. Ons sal nie in daardie. Ons sal meer oor die fokus data-tot-komponent kant. Hierdie manier waarop jy kan maak koel, pret web apps. Dit sal geen invloed op die res van die wêreld vir nou, maar dis 'n ander storie. 

OK, so as jy was hier vir my laaste seminaar jy weet dat al die kode vir talk vandag se gaan wees op hierdie URL hier, jammer, hierdie URL hier. En basies ons gaan om te gaan deur vier stappe, miskien vyf, waarskynlik nie vyf. Ons sal deur vier stappe beweeg van die bou van 'n monster Reageer app. En so al die bronkode vir elke stap van die pad gaan hier wees, so as jy die volgende saam by die huis, voel vry om hierdie kode kyk. As jy volgende hier saam, ons sal wys dit op die skerm, so moenie bekommerd wees oor dit. Maar as jy by die huis, voel vry om hierdie webwerf te besoek. En, Ja, moet jy in staat wees om te kry al die kode wat jy ooit hier nodig. So dit is 'n goeie cheat sheet sowel vir jou toekoms avonture met reageer. Cool, so as almal wat hier is, en selfs al is jy by die huis, trek hierdie webwerf, is.gd/cs50react, geen kapitaal, geen underscore, geen niks. 

Jy sal 'n bladsy wat lyk te sien 'n bietjie soos hierdie. Dit is 'n ding genaamd CodePen. CodePen is 'n gesamentlike kodering omgewing waarmee kan ek code hier skryf, en dit sal outomaties aan jou gestuur word. En op hierdie manier, kan ek die kode te skryf. Ek kan hier kode hardloop. 

Vir example-- en as dit reloads-- sien, Ek hardloop JavaScript-kode op die bladsy reg hier, en dit sal outomaties lewer 'n webblad met hierdie JavaScript-kode. En so is dit 'n manier vir ons om te probeer kode regtig vinnig om te gebruik sonder om ons ID of gebruik ons ​​plaaslike masjien of wat ook al. Dit is 'n baie vinnige manier vir jou om mockup en uit te toets verskillende soorte van die kode. 

So ek gaan neem Byvoorbeeld kode, om dit hier. Ons gaan om te werk deur dit. En as jy by die huis, jy kan dit trek as well. En ek het reeds geïnstalleer Reageer hier, so jy kan net skryf jou eie kode hier, en probeer om dit as jou eie speelgrond. 

Ja, as almal om oopmaak hierdie skakel hier. Gee asseblief vir my 'n duime up wanneer jy dit oop te maak. Cool, cool cool. Daar is niks hier vir nou, maar ons sal verander dat baie binnekort. 

OK, so is 'n JavaScript Reageer biblioteek, en as sodanig, vereis kennis van JavaScript, wat is die web-programmeertaal. En dit is wat gebruik word vir ander dinge nou ook, maar hoofsaaklik die web te ontwikkel taal, so as jy nie vertroud is nie dat, lees 'n webwerf genaamd JSforCats.com. Dis wonderlik. Jy kan leer JavaScript in 'n halfuur. Dit is ongelooflik. 

So gee dit 'n lees. Ons is ook 'n baie HTML hier omdat ons ontwerp web bladsye van die kursus. So as jy nie vertroud met is HTML, check HTMLdog.com. Ek dink leer Reageer is 'n miljoen keer makliker as jy reeds weet wat die boustene. As jy die komponente, dit is maklik om 'n groter komponent maak. Dit is Reageer taal vir jou. 

So gaan voort en gee hierdie dinge 'n lees. Stop hierdie video. Gee dit 'n lees as jy by die huis as jy nie vertroud is met HTML of JavaScript OK, so wat ons gaan doen is ons gaan maak 'n baie basiese flitskaart app met behulp reageer. Ons gaan 'n flitskaart het. Jy kan die kaart heen en weer draai. En ons sal ook 'n lys van al die kaarte wat ons het, en as ons voel ambisieuse, kan ons wees staat om te wissel tussen motors deur te kliek op hulle. 

Maar dit is van jou kaal bene, 'n baie eenvoudige Reageer app. En so dit is eintlik nie triviaal om te implementeer, maar ons gaan om te wys dat, as jy nie hierdie, is dit baie, baie maklik om dit te verleng As ander mense jou help met dit. So ons gaan om te gaan deur vier stappe begin van nuuts af om hierdie te bou. 

OK, so die vier stappe, sal ons begin met die eerste stap. Die eerste stap gaan wees die bou van jou eerste komponent. Soos ek gesê het, 'n komponent in Reageer is net 'n HTML element op steroïede. Dit spesifiseer die HTML en 'n paar gedrag, en dit sal hoe mense spesifiseer kan kommunikeer met dit hoe dit sou interne toestand het. Soos 'n knoppie sal weet soos hoeveel keer dit is gebruik byvoorbeeld en dit sal weet hoe om homself uit te lê. 

So laat ons gaan voort en bou ons eerste komponent met behulp van JavaScript. So as die sintaksis lyk vreemd, dit is omdat dit soort is. So, weer, ons gaan om 'n veranderlike genaamd maak app gebruik van die term laat, wat maak 'n veranderlike, laat App gelyk React.createClass. 

Reageer is 'n biblioteek en het die skep klas funksie. En dit funksie is 'n bietjie van die kode wat u kan gebruik om 'n nuwe te skep tipe Reageer komponent. En so React.createClass maak 'n komponent, en sal hierdie komponent in staat wees om goed te doen. Die belangrikste ding wat dit kan doen, is lewer iets lewer as 'n funksie. 

Weereens, as hierdie indeks is nie voor die hand liggend te julle, ek beveel aan jy gaan op JS vir katte en check dit uit. Is dit ingezoomd goed genoeg? Koel. 

So elke komponent behoeftes om 'n lewer funksie. Die lewer funksie sê, wat moet ek druk op die skerm? Maar die komponent is nutteloos as dit nie weet wat om te druk op die skerm, so wat jy nodig het om 'n lewer funksie. 

So in die lewer ding, jy net nodig om 'n paar HTML terugkeer. En wat is cool is dit daar is 'n ding genaamd JSX, wat is 'n uitbreiding van JavaScript wat gebruik word deur te reageer. Dit laat jou skryf HTML binnekant jou JavaScript, wat klink nogal vreemd wanneer jy eers daaroor dink, maar dit maak 'n baie sin daarna. So kan ons dit doen. As jy vertroud is met HTML is, weet ek ons het 'n div met 'n algemene doel houer vir dinge. Ons kan nie 'n div terugkeer, en binne-in hierdie div, kan ons dinge sit. 

So kom ons sê ons wil net lewer 'n reguit-up kaarte vir nou. Die kaarte, sou ek sê, sal 'n vraag-en-antwoord het. So binne hierdie div, laat druk 'n paragraaf wat sê question-- Wat is die uiteindelike antwoord op die lewe, die heelal? En dan is die antwoord is gaan wees, natuurlik, 42. 

Dit het nie goed kom nie. Ja, so basies kan jy regtig skryf HTML in jou JavaScript. En dit gaan wees uitgedruk in die skerm. So kom ons probeer dit uit. 

So het ons ons deel. Ons moet vertel Reageer op sit die komponent op die skerm so React.render, so opmerk dat ons behandel app soos enige ander element. Ons skryf dit soos dit was 'n HTML element. Soos in plaas van sê soos img vir die beeld of p paragraaf, jy skryf App, so App is behandel soos 'n HTML element. Soos ek gesê het, dit is 'n element op steroïede. 

So jy maak App, en jy gee dit 'n plek om dit te sit. En dit is hoe jy kan sê dit waar om dit te sit. Ek het 'n eenvoudige div op die geskape bladsy genoem met 'n ID van bladsy en dit is waar die element gaan om te gaan. 

En ons gaan nie om te hardloop met HTML. In beginsel is dit die gang te kry sit binnekant van hierdie bladsy element dat ons op die skerm. So dit loop hierdie kode, en dit trek hierdie ding op die skerm, so hier is ons. Ons het ons eerste Reageer komponent gemaak. 

So, net soos 'n herhaling, ons liggies gemaak 'n nuwe soort komponent, reg? Dit is wat die React.createClass. En in dié komponent, ons vertel dat dit wat dit moet doen. Wanneer hierdie komponent is om op die skerm gedruk word, dit sal die div met druk die twee paragrawe binnekant van dit. 

En wat ons gedoen het, ons het 'n nuwe app die gebruik van die hoek bracket app notasie. Ons het om dit te sit binne-in die bladsy element. En so wat ek gedoen het, is dit geskep 'n nuwe app uit daardie sjabloon. En dan het ek dit te lewer. So het dit gesê, OK, jeug, wat moet ek druk? App sê, gaan druk 'n div met twee paragrawe binnekant van dit. En voila, daar is ons div met twee paragrawe binnekant van dit. Sin maak so ver? 

So, weer, die hele uitdaging Reageer is net te weet hoe om komponente te maak. Hoe om die maak komponente werk saam. Nou dat ons het ons eerste gemaak komponent, laat ons gaan terug en maak komponente aanpas. Sodat jy weet hoe om in HTML jy kan jou knoppies klasse te gee? Jy kan jou ankers gee die href. Jy kan jou insette 'n tipe, reg? Jy kan meer persoonlike gee eienskappe om al jou elemente om dit meer interessant te maak. En ons eintlik kan doen presies dieselfde ding. 

So kom ons sê ons wil ons app om te gaan lewer enige kaart. Nou net ons gelewer n hardcoded kaart. Ons weet daar is net een card dit kan doen, so ons is gaan probeer verander dit nou so dat ons net kan gee dit 'n kaart. Dit sal die druk van die kaart. 

Jy behoort te probeer en maak jou komponente 'n baie algemene doel. So hierdie manier kon ek e-pos dit is my vriend en wees soos, watter kaarte wat jy het, net voer dit in hier, en dit sal dit doen deur die self. Jy kan ander sit dinge in jou eie app. 

Maar eers, laat se breek hierdie in twee komponente, maar ons wil die kaart te skei druk deel van die werklike app deel. So, wat ons kan doen is ons kan dit verander van App om CardView, net 'n nuwe naam vir die jeug, en ons kan 'n nuwe maak komponent genoem App, nie verwar word met die ou App. Ons het die createClass, en soos in HTML, jy kan nes Reageer komponente binnekant van mekaar. 

So in hierdie lewer funksie, funksie terugkeer CardView, en dit is presies dieselfde ding. Sien waarom dit is dieselfde ding? In plaas van die lewering van net die artikels wat het die div en paring binnekant van dit, die app lewer die CardView en die CardView maak die div en paragraaf. So dit is ons eerste voorbeeld van nes elemente binnekant van mekaar. Maak wat sin maak? So, weer, het ons 'n CardView element. Ons het inligting elemente dat dit groter as. 

OK, so ons wil ons CardView-- as jy gee 'n goeie CardView 'n sekere kaart, dit sal uit te druk vir jou, reg? So die eerste, moet ons 'n kaart te maak, so laat ons 'n kaart voorwerp. So laat my kaart equal-- as jy al bekend is, dit is net die notasie-up beswaar in JavaScript. Dit is soort van soos 'n struct in C, so ons het 'n kaart, en so nou kan ons hierdie kaart as slaag 'n eiendom of as 'n kenmerk in HTML terminologie om ons app. So kan ons dit doen, App card gelyk MyCard. 

Jy weet hoe om in insette, jy doen tipe insette gelyk teks of knoppie klas gelyk BTN vir bootstrap ,? Dieselfde idee, App card equals-- jy het om te sit draadjies here-- App card gelyk MyCard, so dit sê ons het hierdie kaart voorwerp. Ek is van plan om dit te slaag as 'n eiendom aan die jeug komponent. En hierdie inligting komponent in staat wees om dit te doen en toegang interessante dinge met dit. 

So ons jeug gaan wees kry 'n kaart, so vir nou, laat ons die app net gee die kaart aan die CardView self want soos die jeug is nie gaan om te weet wat om te doen met dit, so ons sal net gee dit aan die CardView. So sal ons dit die slaag dieselfde manier, kaart gelykes, en so elke komponent kan toegang tot die dinge wat gegee is om dit te. Hulle kan toegang tot die eienskappe wat gegee is om dit te die gebruik van hierdie sintaksis, this.props.card. 

So wat hier gebeur is jy het die MyCard voorwerp. Jy slaag dit in die app met behulp van App card gelyk MyCard. Dat die kaart voorwerp gegee om jou app. Die app kan toegang as this.props.card. Dit is soort van soos 'n beeld weet wat dit se bron is. 

Hierdie app weet wat dit is card is, en dit kan dinge doen met dit. Dit kan berekeninge te doen. Dit kan besluite wat gebaseer is af van dit te maak. 

Vir nou, het ek gaan om te slaag this.props.card op die CardView. Sin maak so ver? Dit sal meer sin maak nou. 

OK, so nou is ons op CardView. Ons CardView, gegewe die kaart, indien druk sy vraag en antwoord. Nou het ons net 'n paar gedrukte hardcoded vrae en antwoorde. Ons moet uitvind out-- ons nodig om die kaart dat hulle ons gegee het vra wat is die vraag en antwoord, en dan druk dit uit in die skerm. 

So kan ons dit hier doen. In lewer begin-- eers gelyk. So wat ons hier doen, is ons weet dat die kaarte aan ons gegee tot 'n eiendom, reg? Dit is aan ons gegee as 'n inset. Soos dit is amper soos argumente om 'n funksie. Die kaart is 'n argument byna om hierdie CardView. 

Ons sal onttrek nie, en sit dit in die veranderlike vraag. Maak seker die antwoord het die veranderlike antwoord. Vra dat die kaart om te beantwoord. En nou dat ons hierdie, in plaas van die druk daarop dat die teks, ons gaan uit te druk wat hulle aan ons gegee het. 

So hierdie spul so ons gaan Vraag Antwoord te blus. Kom ons kyk of dit werk. Cool, so laat ons stap vir stap deur dit een keer net om seker te wees. 

So my kaart is card voorwerp, en ons gee dat die kaart om die jeug. En die app gaan na die neem kaart en gee dit aan die CardView. En dit CardView sê, as jy gee my enige flitskaart voorwerp, Ek sal sy vraag uit te druk en sy antwoord, reg? 

So, wat ek kan doen is wat ek kan stuur hierdie kode, die eerste soos 10 lyne van my kode, my vriend. Hy kon dit insluit in sy eie aansoek. En so lank as wat hy het dieselfde ding, soos CardView card gelyk hiervan, so lank as wat hy geskep het die CardView en gee dit die regte inligting, hy kon lewer sy eie kaart. En so hierdie manier, dit is 'n baie koel manier vir jou om te bou komponente wat mekaar gebruik, reg? Hierdie kaart, kon ek publiseer hierdie CardView op die internet, en die mense sal in staat wees om dit te gebruik. So basies, dit is soos een van die standaard funksies in die C-biblioteek. 

Dit is 'n funksie waar iemand dit geskryf is. Jy gee 'n sekere insette. Dit sal 'n sekere uitset te produseer. Jy hoef nie om hoe dit werk intern. Solank as wat jy gee dit die regte insette, sal dit op die regte uitset te maak. 

En 'n komponent kan wees gedink het van die dieselfde manier. Dit is soos 'CardView 'n biblioteek funksie. As jy dit gee 'n paar card as 'n eiendom, sal dit druk die inhoud van die kaart. Soos as ek my kaart te verander na plaas soos wat 5 plus 37, dit sal dienooreenkomstig te werk. Dus net deur die verandering van die insette, dit raak 'n sekere uitset. So jy kan amper dink komponente as funksies op hierdie manier, wat jy kan saam te stel. Jy kry insette, soos hierdie CardView as die insette, kry jy uitset. In hierdie geval, is die uitset HTML. Sin maak so ver? Cool, dit weer, eienskappe is hoe jy kan slaag inligting in en uit komponente. 

OK, so laat ons hierdie ding interaktief. Nou dit is soort van saai. Wat is [onhoorbaar]? Jy kan 'n paar uit te druk, maar dit is al wat dit kan doen. 

So laat ons gaan terug na die oue vraag net vir nou. OK, so nou hierdie komponente is vervelig, want alles wat hulle doen, hulle kry insette. Hulle maak uitset, reg? Dit is soort van saai. Ons wil ons hê komponente in staat wees om 'n soort van interne staat, soos onthou iets. 

Vir 'n flitskaart, vir Byvoorbeeld, watter soort van die staat wil jy dalk onthou vir 'n flitskaart? Wat tydelike status wil jy dalk om te onthou vir 'n flitskaart in 'n flitskaart app? GEHOOR: Of dit nou is omgekeer? Neel Mehta: Ja, reg. So kan jy dalk te hou spoor van jou gesig is up of jou gesig op die kaart. Op Facebook, byvoorbeeld, sou jy wil om te onthou waar in die nuus voer is jy of hou wie se profiel is jy nou doen. 

Op boodskapper soos wat teks wat jy tik in die boks insette, reg? As jy die bladsy te verfris, dit gaan weg. Maar jy het nie regtig omgee. Dis net tydelik. Ja? 

GEHOOR: [onhoorbaar] Neel Mehta: Soos 'n flits kaart, soos jy kan sien Die vraag kant of die antwoord kant? 

GEHOOR: OK. 

Neel Mehta: Soos 'n twee kante flitskaart, reg? Ja, so jy wil het hierdie idee van nou Ek het eienskappe, wat soos insette, maar staat, wat is 'n tydelike, uh, waar jy is op die bladsy, reg? Weereens, ek het in Facebook Boodskapper, ek het soos wat mens jy lees Facebook of wie se profiel, reg? 

Dit is net tydelik. Dit is belangrik om die gebruiker te wys wat gaan aan, maar die bladsy te verfris. Dit maak nie regtig saak nie. So dit is tydelike staat, sodat ons almal dit staat. 

So, weer, daar is die staat en rekwisiete. Stutte is insette gegee van jou data bron. Staat is net soos standaard. Dit is net soos die dinge wat maak die ding interaktief. 

So in ons CardView-- laat ons ons CardView-- so dit was lekker. Wat ons gaan doen, gaan ons om CardView en slegs CardView raak. En so my vriend wat hierdie, het hulle sou geen verskil. Hulle wil nie hê om te verander enige van hul eie kode, maar hulle wil sien hul CardView het opgevoerde. Dit is 'n mooi deel oor komponente. 

OK, so in ons CardView, laat ons probeer hou van of ons faseer up of gesig af. In Reageer ons dit doen deur die eerste spesifiseer die aanvanklike toestand. Waar kom die kaart begin? 

'N funksie genoem getInitialState so wees funksioneer, en ons 'n voorwerp terugkeer. Dit bevat 'n paar voorwerp staat, en 'n toestand is net 'n sleutel-waarde paar. Soos in onderrig, het jy 'n sleutel en 'n waarde, jy het soos naam is 'n string. 

In hierdie geval, kom ons sê front is waar. Dit sê dat ons 'n staat. Een komponent van die staat is 'n kenmerk genaamd front. [Onhoorbaar], so by verstek, ons is in die voorkant van die kaart, en ons kan dit verander soos ons draai die kaart. Maak sin? 

OK, so in te lewer, nou, ons is wat die vraag en die antwoord. Nou wat ons moet doen is wys op die vraag As ons op die voorkant van die kaart so die antwoord is vir die rug van die kaart. Dit is hoekom jy maak almal die kaart interaktief. So kom ons probeer en om dit hier. Wel, die eerste net 'n veranderlike. Ons kan nou vra this.state.front. Ons toegang meld dieselfde ons toegang stutte, so this.state.front. 

As ons voor, dan text is this.props.card.question. As ons op die voorblad van die card, ons gaan om te probeer en gryp Die vraag van die kaart. Andersins, as ons op die rug van die kaart, wat doen ons? 

GEHOOR: Die antwoord? 

Neel Mehta: Yep, so teks gelyk this.props.card.answer. Maar as jy sien, ons gebruik die staat om 'n besluit te neem want nou die komponent sal anders lyk gebaseer af hoe hierdie interaksie met dit. So in plaas van die druk van hierdie, ons sal net die druk van die teks. Cool, so nou, soos jy sien, sien ons net die vraag. En as ek die hand te verander die staat hier om voor vals kry ons 42 terug. 

So, weer, hierdie komponent het sy eie staat. Soos 'n knoppie weet of dit is of gedruk nie, hierdie ding weet wat is op die voorkant of op die rug. By verstek, is dit op die voorblad. En dan is dit op die voorblad, ons sal druk op die vraag. As dit op die rug, sal ons druk die antwoord. So, weer, die inligting gegee is dieselfde. Dit lyk net anders gebaseer op hoe jy dit programmeer. So, byvoorbeeld, Facebook Messenger, selfs as jy dieselfde data bron te kry, dit anders kan lyk omdat die staat is anders. Jy is op soek na 'n boodskap ander persoon se. 

OK, so dit is alles goed en goed, maar nou wat is eintlik maak ons ​​in staat is om te verander, of ons kaart is voor of agter. Ons kan dit doen deur die toevoeging van 'n flip knoppie, 'n knoppie om die kaart wat sal die kaart te draai as dit [onhoorbaar]. So laat hier by te voeg 'n knoppie, hierdie knoppie, en hierdie knoppie sal flip sê. 

En so nou is, is dit nie iets te doen. Dit lyk net mooi. Wat ons kan doen, is ons 'n kliek te voeg hanteerder, onClick gelyk this.flip, en ons sal flip later definieer. Maar basies, onClick is 'n funksie wat kry genoem word wanneer die gebruiker nie. 

So op die knoppie sal weet wanneer dit is gebruik. Het dit is gebruik, dit sal die kaart te draai. Dit is soort van soos jou pizza lewering man. Jy is soos, alles reg, wanneer iemand roep my, ek sal lewer pizza, reg? 

Jy registreer hierdie luisteraar. Jy luister na 'n gebeurtenis. Jy genoem word, en wanneer die gebeurtenis, jy iets doen. Jy kry pizza. In hierdie geval, wanneer jy gekliek, jy die kaart te draai. 

En so het ons nodig het om 'definieer funksie wat die kaart sal flip, so ons sal dit reg skryf hier, flip funksie. En so wat dink jy flip sal doen? Weereens is dit kry genoem wanneer ons op die flip knoppie. Wat moet die funksie flip doen? 

GEHOOR: Verandering this.state.front van ware vals, vals waar. 

Neel Mehta: Yep, so doen wat this.front is-- die voorkant staat is. Neem die voorkant staat, as dit is waar, maak dit vals is. As dit is vals, maak dit waar is, reg? So kom ons probeer dit. 

Jy kan nie verander die staat net deur te doen this.state. Jy kan dit nie doen nie. Jy kan dit nie doen nie. Jy moet 'n funksie te gebruik genoem this.setState. 

Sodat jy kan sê this.setState front kolon hierdie waar, weer, die uitroep punt beteken die teenoorgestelde. Ek dink as dit. state.front waar is, sal dit draai onwaar. So sal ons die staat stel van ware vals. As dit is onwaar, sal ons stel dit vals waar. 

Net sien dat ons 'n bietjie en kry anders, en so kom ons probeer hierdie. Bada Bing, kyk na hierdie. Die flip knoppie sal nou skakel die voorkant staat om terug te. 

En so hier is waar jy sien 'n bietjie van die magie van reageer. Soos ons nooit vertel hy dit weer te lewer. Ons het nooit gesê dat dit niks te teken. As jy hierdie doen sonder Reageer, sou jy het aan- hou wanneer die flip knoppie is gekliek het, jy wil hê om dit te vertel hand weer lewer, reg? 

Reageer is regtig cool in dat as jy gee dit 'n sekere status en eienskappe, dit sal altyd lewer presies dieselfde ding. En so wanneer ons ooit verander ons die staat en die eienskappe, reageer net weer maak die hele ding. Dit weet dat daar is 'n een-tot-een korrespondensie tussen die staat en parameter en HTML. So wanneer een van dié veranderinge deur middel van 'n stel staat, dit sal verander hoe die pay is weer terug. En so basies Reageer is soos wag vir jou om te verander. 

Wanneer dit iets verander, dit sal weer lewer die hele bladsy. En as dit klink ondoeltreffende, dit is omdat dit sou wees, maar reageer gebruik 'n ding bekend as 'n Shadow DOM. In plaas van die bladsy direk teken, is dit hou die virtuele HTML boom in die geheue. 

Jy weet, HTML is soos 'n boom, soos 'n hiërargiese struktuur data. Dit hou 'n valse boom in die geheue, en wanneer jy die bladsy te werk, dit sal nog 'n valse teken boom, en dit sal bereken wat verander moet dit na die maak bladsy om die twee bome gelyk te maak. So basies, is dit feitlik re-lewer 'n baie. En dan is dit soos net verander die bladsy in klein tweaked as dit nodig is, so dit is baie, baie, baie doeltreffend nie. 

So basies Reageer sal wanneer jy iets te verander, dit sal weer lewer die bladsy feitlik. Dit sal uit te vind wat ek nodig het om te verander om die werklike bladsy weerspieël die virtuele bladsy en dit sal doen nie. Dit is die virtuele DOM. Dit is een van die grootste kenmerke van reageer. 

Maak wat sin maak? Enige vrae? Ja? 

GEHOOR: Hoe steeds te vergelyk met die MVC dat ons gepraat oor voor soos hulpbronne. 

Neel Mehta: Ja, is die vraag is hoe vergelyk dit met MVC? Jy het gevra oor die hulpbronne. Wel, laat ons praat oor hoe dit funksioneer. 

In MVC, sou jy die model te werk. In hierdie geval wil ons 'n kaart model het. Die uitsig sou die het flip knoppie en die beheer sou die flip funksie. So die oog sal vertel die kontroleerder flip flip. Flip sal vertel die model te verander, reg? 

En so wanneer jy dit doen 'n MVC, jy luister vir die model te verander, en jy weer lewer die oog dienooreenkomstig. Of jy moet net graag het die beheerder. Wag vir die model te verander, en dan kies en 'n deel van 'n ding soos ' om te verander. Hier het ons een ding, maar in 'n groot app, jy het om te hou onthou wat die verandering in elke enkele plek, so dit is 'n bietjie irriterend. En so is lekker Reageer omdat dit 'n Shadow Dom. Dit kan bekostig om net herskryf die hele ding. Jy hoef nie selektief te soos raai wat om te werk. 

Op Facebook as jy wil kry 'n nuwe boodskap in MVC, jy wil hê om te onthou, OK, verander die dinge aan die bokant van die bladsy, die ikoon boodskap. Pop ook 'n nuwe venster aan die onderkant. Maak ook 'n nuwe ding in die venster. Speel ook 'n geluid. 

Dit is 'n baie dinge gaan uit op dieselfde tyd. En so as jy dit nie doen nie 'n Shadow Dom, sou jy het dat die hand, omdat doen jy kan nie ontslae raak van die hele bladsy. Jy kan nie bekostig om, sodat jy aan elke ding die hand te verander, Dit is regtig irriterende in MVC. 

So in staat te wees voorspoedig, hulle selektief werk die bladsy, wat doeltreffende, maar ook irriterende. In reageer as gevolg van die Shadow Dom, beide dinge wat jy gratis. Dit is omdat doeltreffende van die Shadow Dom. Die bottelnek is die opdatering van die bladsy. Dit is nie te doen die boom manipulasie. Jy kry die doeltreffendheid. Jy kry ook die gemak van gebruik, omdat as jy net die hele bladsy te herskryf, maar jy weet net, alles reg, die dinge gaan wees op die bladsy iewers. Dit kan wees in 'n ander plek, maar dit gaan wees op die bladsy, reg? Sodat jy net weer gelewer die hele ding feitlik, en jy kan 'n paar te maak veranderinge aan die bladsy self. 

So, weer, in MVC jy sal moet kies tussen die gemak van gebruik en doeltreffendheid, en te reageer, julle albei kry. So dit is beter. Maak sin? Soliede. 

OK, so laat ons sien laat ons praat 'n bietjie oor stap 4, hoe ons kan komponente insluit. So het ons nou hierdie reg. Ons het ons koel bietjie knoppie. Ons kan dit flip terug en uit, en dit is al wat dit doen. Kom ons sê ons wil het 'n ander komponent. Kom ons sê die flitskaart app moet bevat 'n lys van al die kaarte dat jy, so dit beteken dat ons moet 'n ander komponent het. Wel, miskien is dit 'n lys te bel view. Kom ons maak 'n lys siening dat coexists met die CardView, en die lys oog en CardView saam wil werk. En jy kan kombineer hulle om ons app vir jou. 

So die eerste, laat ons 'n paar meer kaarte reg. Kom ons sê, wat kaarte? En net so het ek nie om gebaar jy met tik in, Ek is net gaan om dit te kopieer van hier. En so gaan ek nie gee dit net 'n kaart. Ek gaan om te gee dit 'n verskeidenheid van kaarte. So die eerste keer die apps gaan om te breek vir nou. Alle reg, so ons gaan maak hierdie staat wees om verskeie kaarte te hanteer. So die eerste, ons gaan om dit te gee, nie net een kaart, maar 'n verskeidenheid van kaarte, soos 'n lys van kaarte. En in hierdie geval, ons het drie van hulle. 

Alle reg, so so inligting is gaan om 'n lys kaarte, en dit gaan om te besluit watter een om te wys na die CardView. Die CardView kan slegs lewer 'n kaart, maar die app kry 'n lys van al die kaarte, reg? 

So wanneer jy uitvind een kaart te gee aan CardView, hoe sou jy dink jy dalk in staat wees om 'n besluit te neem oor watter kaart om te wys? Om jou 'n wenk te gee, is dit tydelik Jy sal lees van 'n sekere kaart. As jy die bladsy te verfris, sal jy net terug na die eerste kaart gaan. Dit is OK, want dit is tydelik. Watter tegniek kan ons gebruik? 

GEHOOR: Jy kan 'n veranderlike sodat net soos jy het voor. Is dit waar is, kan jy het die huidige kaart gelyk 1? 

Neel Mehta: Ja, so ons wil staat het, reg? Jy sal die staat te gebruik in die komponent om uit te vind wat card wil ons kry. Soos ons het 'n lys van al die kaarte, sal ons gebruik die staat om uit te vind een van die eerste kaart, tweede kaart, derde kaart, en so aan. 

So 'n app so 'n app sal 'n te kry het die getInitialState funksie, getInitialState funksie terugkeer. En ons sal net sê activeIndex 0. So nou is ons jeug het sy eie staat. 

En so nou lewer, om uit te vind 'n kaart, laat ons gaan net na die skikking en gryp die ding op die indeks. Kies card gelyk this.props.cards this.state.activeIndex. So as jy hier sien, die stutte en die staat werklik saam te werk. So nou dat ons het ons activeCard, ons sal dit noem activeCard, en laat ons sien of dit werk. [Onhoorbaar] 

Ag, dit was 'n teks fout. Ag. 

Cool, yep, so nou terug was ons waar ons voorheen was, reg? Dieselfde ou program, behalwe nou kan ons ondersteun 'n lys van kaarte, nie net een kaart. En nou, weer, as ons verander die activeIndex, kan ons gaan 0-1, en nou dat die tweede kaart, en dan het ons na 0. So hier is 'n nuwe opgewarmde weergawe van ons. 

OK, so nou laat ons 'n lys siening dat toon al die kaarte in jou program, so ons sal 'n nuwe maak komponent genoem script lys. Laat script lys gelyk react.createClass. So wil ons 'n geordende lewer lys met 'n lys item vir elke kaart. En so het ons het 'n klomp van die kaarte. Ons wil 'n lys-item vir elke kaart, reg? Ons kan 'n lus te doen vir of iets om 'n nuwe lys item maak. Maar die manier waarop jy dit doen in Reageer, gebruik 'n ding genaamd kaart. Kaart is 'n instrument of 'n funksie wat jy gebruik dat vir elke item, loop 'n funksie, neem terugkeer waarde en gee jou dit terug. 

So as 'n voorbeeld, ons het die skikking 1, 2, 3.map function-- en dit is snelskrif vir 'n function-- x pyl x keer x. Dit sê vir elke nommer in 1, 2, 3, neem dit. Vierkante, en gee dit terug. So wat dink jy 1, 2, 3.map x gaan x keer x gee jou terug gegee dat hierdie funksie is loop op elke element van daardie skikking. 

GEHOOR: 1, 4 9? 

Neel Mehta: Yep, 1, 4, 9 want jy doen 1 keer 1. Dit gee jou 'n. Dit is die eerste element. 

2 keer 2 is 4. Dit is 'n tweede element. 3 keer 3 is 9. Dit is 'n derde element. Maak sin? So het 'n tegniek kaart wat jy gebruik in funksionele programmeerders, die nuwe styl van programmering om iets te doen elke element in jou lys. En so dit bekend klink. Ons het 'n lys van kaarte. Ons wil 'n lys item vir elke te kry een, so sal ons net gebruik kaart hier. Ons sal sê, laat lys gelykes this.props, kaarte, kaart. 

En so kry 'n kaart, ons is gaan om 'n lys item te genereer met daardie kaart inhoud kant is. Laat ons net sê ons wil uit te gee die kaarte te bevraagteken so card.question. Hierdie lys bevat So 'n verskeidenheid van LI of Lys Items waar daar is een lys item vir elke kaart, en dat bevat die kaarte vraag. Maak sin? 

Cool, so nou kom ons eintlik druk dat uit. So sal ons 'n ul terugkeer. Binne-in dat On-geordende lys, ons sal net die hele lys vashou dat hulle aan ons gegee het. Koel. 

Alle reg, sodat dit nou list view werk net te vind. Enige vrae oor die lys vertoon? Jy het 'n klomp van die kaarte. Jy maak 'n lys item vir elke kaart. En jy sit dit in 'n geordende lys, en jy gee dit terug. So nou, laat ons optree sodat ons embed hierdie binnekant van ons jeug, sodat ons kan dit doen, die lys vertoon. Wat doen ons argument slaag om 'n lys oog? Watter eienskappe gee ons dit? Onthou, as jy gee dit 'n klomp van kaarte, dit sal die lys te maak sien vir diegene kaarte. So, wat sou ons slaag hier as die argument? GEHOOR: 'n lys van kaarte? Neel Mehta: Ja, so kaarte gelyk this.props.cards, reg? En so het die enigste probleem is dat jy kan net draai 'n top vlak element in te lewer, sodat jy het om dit te draai in 'n div. Dit is vreemd. So laat ons sien of nie. Werk dit? 

Yep, daar gaan jy. So nou het ons 'n lys kaarte aan die onderkant, en dan het ons ons CardView homself bo-op, en dit sal tussen flip die twee kante van die kaart. Nou doen dit sin maak hoe ek dit gedoen het? Ja, dit weer, het ons twee komponente. Die eerste komponent afdrukke uit elke kaart in die lys. Dit is die lys vertoon. En die tweede komponent druk uit net dat card. As jy dit gee 'n sekere kaart, sal dit druk inligting oor die kaart en laat jy heen en weer draai. 

So as ons wil, kan ons probeer en praat oor die byvoeging van 'n paar nuwe funksies om hierdie. Anders kan ons 'n bietjie meer praat oor van die snelheid van reaktor, of ons kan antwoord vrae wat jy mag hê want dit is al die kern dele van reageer wat ek wil om te praat oor. Ons kan voortgaan. Ons kan vrae te beantwoord. Watookal jy wil hê. 

GEHOOR: Kan jy gebruik JSX in normale JavaScript? Of is dit iets wat het gekom met die [onhoorbaar]? 

Neel Mehta: Die vraag is kan jy JSX gebruik met normale JavaScript? Die antwoord is ja. JSX is net 'n manier van dit neem jou JavaScript dat HTML het binnekant van dit, en dit stel in JavaScript dat nie HTML nie binnekant van dit. So sien that-- so sien hier. Dit lyk soos jy het soos div en jy het dinge binnekant van dit. 

Dit stel om JavaScript dat soos genereer dieselfde ding. Ek dink wat ek sê, is dat JSX is net 'n sintaktiese, soos dit is 'n voorverwerker vir JavaScript veel soos PHP is 'n voorverwerker vir HTML. JSC is 'n voorverwerker vir JavaScript waarmee jy HTML binnekant van jou JavaScript. En so as jy het die reg transformator wat is 'n ding genaamd [onhoorbaar], wat sal transformeer. Die reg voorverwerker, dit sal jou laat jy dit doen. 

GEHOOR: [onhoorbaar] Neel Mehta: Gewoonlik hoef jy nie HTML binnekant van JavaScript sit tensy jou toedoen reageer. Maar jy kan dit in elk geval doen. Yep? 

GEHOOR: Ek dink jy beskryf het Reageer as 'n funksionele programing taal. Ons het geleer C in CS50. Is ook 'n funksionele C taal? Neel Mehta: Dus die vraag is oor die funksionele versus ander ding genoem noodsaaklik of prosedurele programmering. Daar is twee soorte programme gewild. 'N Mens se prosedurele genoem, wat is al oor die wil doen bevele, en een is funksioneel, wat al oor wat funksies en met toevoer en afvoer van daardie. Reageer is 'n funksionele paradigma. C is 'n baie prosedurele paradigma. 

En as 'n voorbeeld, C byvoorbeeld jy nie hierdie verklarende manier te doen van die maak van die program, reg? Jy het om te sê, druk hierdie. Verander hierdie data struktuur. Druk hierdie. Dit gaan alles oor opdragte. 

In Reageer, daar is nie dat baie opdragte. Dit gaan alles oor wat komponente saam te stel. Hulle is soos funksies. Jy het soos 'n funksie genoem CardView, wat is 'n funksie wat invoer, uitvoer, en so is al wat Reageer oor hierdie filosofie ons van having-- jy data het. Jy gee dit deur middel van hierdie algoritme, en dit sal uitset HTML dat jy net gedruk die bladsy en so moet jy bou stuk vir stuk. 

So 'n metafoor om te teken wat Ek gesê het, jy weet hoe op Facebook as jy 'n boodskap kry, en jy kies wat dele te werk, dit is die proses. Dit is noodsaaklik, reg? OK, ek het 'n boodskap. Kom ons verander daar rekening. 

Kom ons pop 'n venster hier. Kom ons verander daar rekening. Kom ons teken hierdie hier. Dit is 'n proses benadering. 

Dit is wat dinge soos Hoekige, Hupstoot, Backbone, ander raamwerke te gebruik. Reageer is funksioneel. Dit is 'n heel ander manier van dink oor dinge. Dit neem die idee van kom ons funksies of algoritmes wat sal jy gee dit data. Dit sal spoeg uit wat dit behoort te wees, en die rekenaar sal sorg uitweeg. Jy hoef nie te hanteer dit self. Maak dit 'n bietjie van sin? Ja? 

GEHOOR: In 'n funksionele taal, alles gebeur in 'n keer? 

Neel Mehta: Nee, dinge gebeur in orde is. Soos hier daar is nog bestel, maar dit beteken nie gebeur in volgorde van soos beveel, opdrag, opdrag. Dit gebeur in volgorde van funksie gee jou uitset. Sit dit in 'n ander funksie. Sit dit in 'n ander funksie, 'n ander funksie. 

As jy dit doen CS51, sal jy leer funksionele programme 'n bietjie uit die bestek van hierdie. Maar basies, wat maak Reageer cool is nie net die eenrigting-data vloei en die virtuele Dom, maar ook die idee van funksionele programmering. En funksionele programmering is baie maklik om te komponeer en maak cool stuff uit, en dit is baie maklik om te dink oor en oor rede. So dit is nog 'n goeie teken van reageer. Meer vrae? Ja? 

GEHOOR: Um, hoekom sou jy gebruik laat eerder as om var? 

Neel Mehta: So die vraag is Hoekom gebruik jy laat in plaas van var? Dit is 'n ding genaamd ES6 of ECMAScript 6. Dit is die nuwe weergawe van JavaScript. Daar is 'n klomp van die tegniese redes Maar laat 'n beter weergawe van var. 

Dit is hoe jy verklaar veranderlikes. Jy kan gebruik laat. Jy kan gebruik var. Laat 'n klomp van die tegniese reasons-- jy hulle kan kyk up later-- waarom dit beter is. Basies, ES6 het 'n paar mooi nuwe sintaksis, 'n paar nuwe funksies op die top van die ou JavaScript. 

So het ons soos vyf minute. Ek wou net om te praat oor een ding baie vinnig. Indien u enige vrae het, laat ons praat oor dit daarna. Maar net so hierdie kry gevang op kamera, ek het net wil 'n bietjie oor hoe jy praat eintlik gebruik Reageer in jou apps. 

As jy hier gaan, Facebook.GitHub.IO/react, dit is die tuisblad vir reageer en dit sal jou wys hoe jy eintlik gebruik Reageer in jou bladsye. Kortom, dit is 'n bietjie ingewikkeld probeer om te installeer reageer. Dit is nie so maklik soos jy net sleep en gooi 'n JavaScript daar. 

Jy moet jou transformator opgestel, wat sal, soos dit voor gedoen het, draai jou JSX in die normale JavaScript. Jy het om te ding wat sal stel jy ES6 na normaal. JavaScript is daar is 'n baie van die beweging dele wat jy hoef te doen, so daar is 'n ding genoem Yeoman, Yeoman.io. En dit is 'n command line instrument wat sal help te ondersteun jou Reageer projekte maklik. 

Sodat jy kan lees oor hierdie later, maar daar is 'n paar tools dat Yeoman bied. Hulle sal laat jy skep 'n Reageer app met alles gebou in. Soos dit sal gebou het in, komponente gebou in. Dit sal jou transformator gebou in. Hulle het 'n baie koel dinge gebou in outomaties die gebruik van hierdie dinge genoem kragopwekkers. 

So lees oor hierdie as jy wil. Net gaan op Yeoman, Y-E-O-M-A-N, en jy kan kragopwekkers soos hierdie te vind. En met kragopwekkers soos hierdie, jy moet net graag een is 'n paar command line beveel. Dit sal te ondersteun uit 'n hele Reageer app vir jou. Dit sal al die handleiding pype te kry, en harde werk vir jou gedoen, en dit is die rede waarom jy moet net fokus op die net skryf in reageer. 

So basies bou van 'n Reageer app is triviaal. Dit is almal saam bedraad, maar daar is gereedskap wat dit vir jou sal doen. So as jy wil 'n Reageer app, probeer om dit te doen op die manier. As jy net wil om te eksperimenteer, kan jy probeer om met behulp van hierdie CodePen want dit het CodePen al die reageer bedrading. Ek het al die werk gedoen vir jou reeds. 

So as jy wil om te maak soos 'n produksie vry Reageer app, Probeer een van hierdie kragopwekkers. As jy net wil om te speel rond, is dit dikwels die moeite werd net soos Probeer speel rond op CodePen hier. Klink goed? Koel. 

So dit is al wat ek het. Weereens, al die kode en voorbeelde is gaan wees op hierdie webwerf hier. So, weer, het ons nie praat oor veel sintaksis van reageer maar aan almal te vind bietjie sintaktiese besonderhede, dit is alles beskikbaar gaan wees op hierdie webwerf hier. 

So ek sou aanbeveel soos neem die eerste stap. Sit dit in jou CodePen. Probeer werk op die maak dit aan die tweede stap. Daar is 'n vierde stap, en net sien waar jy kry van dit. 

Enige verdere vrae, kyk dat page of e-pos my. Dit is my e-pos. Maar ek wil graag om jou te help met enige vrae wat jy mag hê oor reageer. So, yep, dit is al wat ek het. Baie dankie aan almal baie dankie vir kyk of vir die bywoning. En ek sal enige vrae te neem jy dalk nou na hierdie te hê. So dankie almal vir jou kyk.