Reaktista Universal Blog -sovelluksen rakentaminen: Fluxin toteutus Reaktista Universal Blog-sovelluksen rakentaminen: FluxRelated Semalt: jQueryReactNode.jsnpmAjaxMore ... Sponsorit
Reactin laadukkaan ja syvällisen käyttöönoton lisäksi et voi ohittaa kanadalaista täyspinoa kehittäjä Wes Bosia. Kokeile kurssia täällä ja käytä koodia SITEPOINT saadaksesi 25% pois ja avustamaan SitePointia.
Tämän minisarjojen ensimmäisessä osassa aloimme kaivaa Reactin maailmaan nähdäksemme, kuinka voisimme käyttää sitä yhdessä solmun kanssa. js, rakentaa React Universal Blog App.
Tässä toisessa ja viimeisessä osassa siirrämme blogimme seuraavalle tasolle oppimalla sisältöä lisäämällä ja muokkaamalla. Saat myös todellisen lihan React Universal Blog App: n helppokäyttöisyyksien avulla käyttäen React-organisaation käsitteitä ja Flux-mallia .
Break It Down minulle
Kun lisäämme lisää sivuja ja sisältöä blogiimme, reittejä. js
-tiedosto tulee nopeasti isoiksi. Koska se on yksi Reactin johtavista periaatteista hajottaa asioita pienemmiksi, hallittaviksi kappaleiksi, poista reitit eri tiedostoiksi.
Avaa reittiäsi. js
tiedosto ja muokkaa sitä niin, että sillä on seuraava koodi:
// reitit. jstuonti Reagoi "reagoi"tuoda {Reitti, IndexRoute} reititysreitittimestä// Säilytätuoda AppStorea ". / Kaupat / AppStore'// Pääkomponenttituoda App from '. / Komponentit / App'// Sivuttuoda Blogista '. / Komponentit / Pages / blogi'tuonti Oletuksena ". / Komponentit / Pages / Oletus'tuoda työtä ". / Komponentit / Pages / Work'tuota NoMatch from ". / Komponentit / Pages / NoMatch'viedä oletus ( Reitti> )
Olemme lisänneet muutamia sivuja blogiimme ja vähentäneet huomattavasti reittiemme kokoa. js
tiedostoa rikkoen sivut ylös erillisiin osiin. Huomaa lisäksi, että olemme lisänneet Storeen myös AppStore
, joka on erittäin tärkeä seuraaville vaiheille React-sovelluksen skaalaamiseksi.
Kauppa: totuuden yhdestä lähteestä
Kauppa on erittäin tärkeä kappale Flux-mallissa, koska se toimii yhtenäisen totuuden lähteenä tiedonhallinnassa. Tämä on ratkaiseva käsitys siitä, miten React-kehitys toimii, ja yksi Reactin myydyistä eduista. Tämän kurinalaisuuden kauneus on, että sovelluksen missä tahansa tilanteessa voimme tutustua AppStore
: n tietoihin ja tietää tarkalleen, mitä sen sisällä tapahtuu. Muistettava muutamia tärkeitä asioita, jos haluat rakentaa datapohjaisen React-sovelluksen:
- Emme koskaan manipuloisi DOM: ia suoraan.
- Meidän käyttöliittymätamme vastaavat tiedot ja tiedot elävät myymälässä
- Jos meidän on muutettava käyttöliittymäämme, voimme mennä kauppaan ja myymälä luo sovelluksemme uuden datatilan.
- Uusia tietoja syötetään korkeamman tason komponentteihin, ja ne kulkeutuvat sitten alempaan tason komponentteihin
rekisterin
avulla, joka muodostaa uuden UI: n uuden vastaanotetun datan perusteella.
Näillä neljällä kohdalla meillä on periaatteessa perusta yhdensuuntaiselle tietovirtaukselle . Tämä tarkoittaa myös sitä, että missä tahansa hakemuksessamme, voimme konsolista. log (AppStore. data)
, ja jos rakennamme sovelluksemme oikein, tiedämme tarkalleen, mitä voimme odottaa. Koet kuinka tehokas tämä on myös virheenkorjausta varten.
Luomme nyt myymäläkansio nimeltä myymälöitä
. Sisällä, luo tiedosto nimeltä AppStore. jstuoda {EventEmitter} tapahtumastatuonti _viedä oletusarvo _. laajenna ({}, EventEmitter prototyyppi, {// Alkuperäiset tiedottiedot: {valmis: väärä,globaalit: {},sivut: [],item_num: 5},// Emit muutos tapahtumaemitChange: toiminto {Tämä. päästävät ( 'muutos')},// Lisää muutos kuuntelijaaddChangeListener: toiminto (soittopyyntö) {Tämä. (muutos, soittopyyntö)},// Poista muutos kuuntelijaremoveChangeListener: toiminto (soittopyyntö) {Tämä. removeListener ('change', soittopyyntö)}})
Näet, että olemme liittäneet tapahtuman emitterin. Tämä antaa meille mahdollisuuden muokata myymälämme olevia tietoja ja lähettää sovelluksemme uudelleen AppStore-ohjelmalla. emitChange
. Tämä on tehokas työkalu, jota tulisi käyttää vain tietyissä sovellusalueissa. Muussa tapauksessa voi olla vaikea ymmärtää, mistä AppStore
-tietoa muutetaan, mikä johtaa meihin seuraavaan kohtaan .
Reagoi komponentit: korkeampi ja matalampi
Dan Semalt kirjoitti hienon viestin älykkäiden ja tyhmien osien käsitteestä. Ajatuksena on pitää tiedot muokkaavissa toimissa vain korkeamman tason (älykkäillä) komponentteilla, kun taas alemman tason (tyhmät) komponentit ottavat tiedot, joita heille annetaan rekrytoinneilla ja jotka antavat käyttöliittymän perustuen kyseisiin tietoihin. Aina kun alemman tason komponenttia suoritetaan, tapahtuma siirretään rekrytoinneilla korkeamman tason komponentteihin, jotta se voidaan käsitellä toiminnoksi. Sitten se jakaa tiedot uudelleen (yksisuuntainen tietovirta) takaisin sovelluksen kautta.
Sanoi, että aloittakaamme joitakin osia. Tee näin luomalla kansio nimeltä komponentit
. Sisällä, luo tiedosto nimeltä App. js
tämän sisällön kanssa:
// App. jstuonti Reagoi, {Komponentti} 'reagoi'// Lähettäjätuoda AppDispatcher käyttäjältä ". / Lähettäjä / AppDispatcher'// Säilytätuoda AppStorea ". / Kaupat / AppStore'// Komponentittuoda Nav from '. / Partials / Nav'tuonti-alatunniste aiheesta ". / Partials / alatunniste'tuonti lataa ". / Partials / Ladataanviedä oletusluokka App laajentaa komponentti {// Lisätä kuuntelijoita kuuntelijoihincomponentDidMount {Sovelluskauppa. addChangeListener (tämä. _onChange. sitova (tämä))}// Poista muutosten kuuntelijat liikkeistäcomponentWillUnmount {Sovelluskauppa. removeChangeListener (tämä. _onChange. sitova (tämä))}_onChange {Tämä. setState (AppStore)}getStore {AppDispatcher. lähettää({toiminta: "get-app-store"})}render {const data = AppStore. data// Näytä lataus selaimellejos (! data on valmis) {asiakirja. elin. className = ''Tämä. getStore anna tyyli = {marginTop: 120}palautus ( )}// Palvelin ensinconst Reitit = Reagoi. cloneElement (tämä rekisteri, lapset, {data: data})palautus ( {Reitit} )}}
Meidän App. js
-komponentti, olemme liittäneet tapahtumaliitännän AppStoreen
, joka palauttaa tilan uudelleen, kun AppStore
lähettää onChange
-tapahtumaan. Tämä uudelleensertifioitu tieto siirretään sitten rekisteriin lapsikomponenteille. Huomaa myös, että olemme lisänneet getStore
-menetelmän, joka lähettää get-app-store
-toiminnon tietojemme esittämiseen asiakkaan puolella. Kun tiedot on haettu Cosmic JS API, se käynnistää AppStore
muutos, joka sisältää AppStore. tiedot. valmis
asetettu true
, poista latausmerkki ja tee sisältö.
Sivukomponentit
Voit luoda blogimme ensimmäisen sivun luomalla Sivun
kansion. Sisällä se luo tiedoston nimeltä Blog. js
seuraavalla koodilla:
// Blogi. /. / Config'// Komponentittuoda otsikon ". / Partials / otsikko'tuoda blogikirjoitusta kohteesta '. / Partials / BlogList'tuoda BlogSingle from '. / Partials / BlogSingle'// Lähettäjätuoda AppDispatcher käyttäjältä ". /. / Lähettäjä / AppDispatcher'viedä oletusluokka Blog laajentaa komponentti {componentWillMount {Tämä. getPageData }componentDidMount {const data = tämä. rekvisiitta. dataasiakirja. title = config. sivusto. nimi + '| '+ tiedot. sivu. otsikko}getPageData {AppDispatcher. lähettää({toiminta: "get-page-data",page_slug: 'blog',post_slug: tämä. rekvisiitta. parametrien. etana})}getMoreArticles {AppDispatcher. lähettää({toiminta: "get-more-items"})}render {const data = tämä. rekvisiitta. dataconst globals = data. globalconst pages = tiedot. sivutanna main_contentjos (! this. rekvisiitta .params. slug) {main_content = & lt; BlogList getMoreArticles = {tämä. getMoreArticles} data = {data} / & gt;} else {const artikkelit = tiedot. artikkeleita// Hanki nykyinen sivulinkkiconst slug = tämä. rekvisiitta. parametrien. etanaconst articles_object = _. keyBy (artikkelit, 'slug')const artikkeli = artikkelitobjektiivi [luiska]main_content = & lt; BlogSingle artikkeli = {artikkeli} / & gt;}palautus ( {main_content} )}}
Tämä sivu toimii mallina blogilistosivulle (kotona) ja yksittäisille blogisivuillemme. Tässä olemme lisänneet menetelmän komponentille, joka saa sivutiedot ennen komponenttien asennusta käyttämällä React-elinkaari componentWillMount
-menetelmää. Sitten, kun komponentti on asennettu kohtaan componentDidMount
, lisätään sivun otsikko asiakirjan
tagiin.
Tämän korkeamman tason komponentin renderointilogiikan lisäksi olemme saaneet getMoreArticles
-menetelmän. Tämä on hyvä esimerkki toimintamuodosta, joka on tallennettu korkeamman tason komponenttiin ja joka on saatavana alempaan tason komponentteihin rekvisiittaisesti.
Tutustu nyt BlogList
-komponenttiin nähdäksesi, miten tämä toimii.
Luo uusi kansio nimeltä Partials
. Sitten sen sisällä luo tiedosto nimeltään BlogList. js
, jolla on seuraava sisältö:
// BlogList. jstuonti Reagoi, {Komponentti} 'reagoi'tuonti _tuoda {Link} reititysreitittimeltäviedä oletusluokka BlogList laajentaa komponentti {scrollTop {$ ('html, body'). animoida ({scrollTop: $ ("# main-content"). offset . ylin}, 500)}render {anna data = tämä. rekvisiitta. dataanna item_num = data. item_numanna artikkelit = tieto. artikkeleitaanna load_moreanna show_more_text = 'Näytä lisää artikkeleita'jos (data.loading) {show_more_text = 'Ladataan '}jos (artikkelit && item_num <= artikkelit, pituus) {load_more = ( )}artikkelit = _. ottaa (artikkelit, item_num)anna articles_html = artikkeleita. kartta ((artikkeli) => {anna date_obj = uusi päivämäärä (artikkeli luotu)anna luotu = (date_obj. getMonth + 1) + '/' + date_obj. getDate + '/' + date_obj. getFullYear palautus (
Paras tapa oppia reagoida aloittelijoille Wes Bos Vaiheittainen koulutus, jonka avulla voit rakentaa reaalimaailman React. Käytä kuponkikoodia 'SITEPOINT' kassalla saadaksesi 25% Source .