Hanki päänsä reagoida näiden viiden tekijän kanssa

Oppiminen reagoi, JavaScript-kirjasto Facebookista ja Instagramin käyttöliittymien luomiseen näyttää pähkinöitä, kunnes annat sille mahdollisuuden. Asiat ovat paljon helpompaa, kun ymmärrät viisi keskeistä käsitystä. Soitan nämä viisi mielen siirtymää. Ne ovat: komponentit, jsx, tila, elinkaaren menetelmät ja yksisuuntainen datavirta.

01. Komponentit

Komponentit ovat koodin paloja, jotka voidaan yhdistää monimutkaisempien toimintojen tarjoamiseksi. Kun jaat sovelluksesi komponentteihin, se helpottaa päivityksen ja ylläpitämistä. Reagoiessa komponentit ovat vielä tärkeämpiä: et vain ohjelmoi niitä, suunnittelet sovelluksesi ajattelemalla, miten nämä komponentit sopivat yhteen.

Käytetään alla olevaa käyttöliittymää esimerkkinä. Näet, miten se voidaan jakaa kolmeen kappaleeseen: laatikko uuden tapaamisen varaamiseksi, listanäkymä, jonka avulla voit tarkastella olemassa olevia tapaamisia ja hakukenttään katsomaan niitä.

HTML: ssä saatat ajatella tätä sovellusta sarjana elementtejä, kuten tämä:

 & lt; div id = "Petopapointments" & gt;
  & lt; div luokka = "addoppoints" & gt; & lt; / div & gt;
  & lt; div luokka = "SearchPoints" & gt; & lt; / div & gt;
  & lt; div luokka = "Listapointments" & gt; & lt; / div & gt;
& lt; / div & gt; 

Ja se on myös se, mitä teet reagoimaan. Luot yhden tunnisteen (& lt; div id = "peppointments" & gt;), joka kutsuu peppointments-komponentin, joka sitten kutsuu muita osakomponentteja tarpeen mukaan. Voit siirtyä tällaiseen kokoonpanokohteeseen, käytät reagoivan esineen Creaclass-menetelmää.

 Var maininterface = reagoida.createclass ({
  Render: Toiminto () {
    Paluu (
      & lt; div classname = "liitäntä" & gt;
        & lt; addapointment / & gt;
        & lt; hakupointments / & gt;
        & lt; luksapointments / & gt;
      & lt; / div & gt;
    )
  } // Render
}); // Mainterface

Reachom.Render (
  & lt; Mainterface / & gt;
  document.gettelementbyid ("Petopappoints")
); // Render 

On kaksi renderointimenetelmää. Pääterface-luokassa julistamme selaimeen lähetettävät kohteet ja reaktoddom.Render-menetelmä korvaa & lt; div id = "Petopappoints" & gt; & lt; / div & gt; elementti HTML: ssä reagoivan koodin. Kirjoitamme sitten koodin, joka käsittelee kukin kolmesta osakomponentistamme.

Komponentit tekevät koodin helppo kirjoittaa ja ylläpitää. Kun opit ajattelemaan ja järjestämään sovelluksesi sarjana koostuvia komponentteja, rakennuskompleksiset sovellukset yksinkertaisempiksi.

02. JSX

Jsx on luultavasti yksi suurimmista mielen muutoksista ja yksi syistä, miksi kirjasto näyttää niin outoa. JSX on javascriptin laajennus, jonka avulla voit yhdistää XML-koodin JavaScriptille.

Tämä on sellainen, mitä tapahtuu malleja, kuten viikset, joiden avulla voit lisätä JavaScriptin HTML: n sisällä. Mutta JSX kääntyy (transpleed) JavaScriptiin. Joten et vain rakentaa mallia, vaan rakenne, joka muunnetaan JavaScript-lausekkeiksi. Toisin kuin malleja kielet, sitä ei tarvitse tulkita Runtime. Katsotaanpa esimerkkiä.

 & lt; li classname = "PET-ITEM MEDIA" -näppäin = {index} & gt;
  & lt; div classname = "PET-info Media-body" & gt;
    & lt; div classname = "Pet-Head" & GT;
      & lt; span classname = "lemmikkieläinten nimi" & gt; {this.state.data [indeksi] .Petname} & lt; / span & gt;
      & lt; span classname = "APT-DATE PULL-OIKEA" & GT; {this.state.Data [indeksi] .aptDate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; div classname = "Omistaja-nimi" & gt; & lt; span classname = "etiketti-kohta" & gt; omistaja: & lt; / span & gt;
    {this.state.data [indeksi] .OwnaName} & lt; / div & gt;
    & lt; div classname = "apt-totes" & gt; {this.state.data [indeksi] .aptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Voimme käyttää tätä koodia antamaan nimityksemme. Tämä tuntuu paljon, kuten säännöllisesti käyttämällä säännöllistä malleja, joten muuta muutamia vähäisiä idiosyncrasees of JSX, voit noutaa sen nopeasti.

Odotettu osa JSX: n käyttämisestä ei oppia itse kieltä; Se on päässyt siihen, että HTML: n asettaminen JavaScript-koodisi vain tuntuu ... No, väärä. Mutta on todella mukavaa saada kaikki koodi jokaiselle osalle, joka asuu yhdessä paikassa.

03. osavaltio

Kolmas mieli muutos oppia työskentelemään valtion kanssa reagoida. Valtio tallennetaan sovelluksen ylimmän komponenttiin ja hallitsee sitä, mitä sovelluksessa tapahtuu. Siellä on erityinen menetelmä, jota kutsutaan GETINITIALSTATE, jossa voit määrittää, mitä sovellus käynnistyy.

Näytteen sovelluksessani alkuvaltio perustetaan näin:

 Var maininterface = reagoida.createclass ({
  GetiniLstate: Toiminto () {
    palaa {
      AptbodyVisible: FALSE,
      Tilaus: "Petname",
      Orderdir: 'ASC',
      QueryText: ''
    } // paluu
  }, // GetiniLstate 

Näyttää siltä, ​​että muodostan maailmanlaajuisia muuttujia hakemukseeni, mutta näiden muuttujien muuttaminen todella hallitsee, miten komponentit tekevät. Jos jotain sovelluksessani muuttaa muuttujan arvoa, minun komponentit tekevät uudelleen. Jos tilauksen arvo muuttuu esimerkiksi nimitysluettelo uudelleen.

Kun kirjoitat komponentin, sovelluksen tilaa on helppo muokata. Kirjoituskomponentit ovat helpompaa, koska olet vain keskittynyt siihen, mitä komponentti tekee. Tässä on Sovellukseni lopullinen luettelokomponentti:

 var reagoi = vaatia ("reagoi");
var aptlist = reagoida.createclass ({

  Handledelete: Toiminto () {
    Tämä.Props.ondelete (this.props.whichitem)
  },

  Render: Toiminto () {
    palata(
      & lt; li classname = "Pet-Item Media" & GT;
        & lt; div classname = "Media-vasen" & gt;
          & lt; button classname = "PET-DELETE BTN BTN-XS BTN-VAARA" Onclick = {this.handledlete} & gt;
          & lt; span classname = "glyphicon glyphicon-poistetaan" & gt; & lt; / span & gt; & lt; / button & gt;
        & lt; / div & gt;
        & lt; div classname = "PET-info Media-body" & gt;
          & lt; div classname = "Pet-Head" & GT;
            & lt; span classname = "lemmikkieläinten nimi" & gt; {this.props.singleitem.Petname} & lt; / span & gt;
            & lt; span classname = "apt-Date Pull-Oikea" & GT; {this.props.singleitem.Aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div classname = "Omistaja-nimi" & gt; & lt; span classname = "etiketti-kohta" & gt; omistaja: & lt; / span & gt;
          {this.props.singleitem.ownername} & lt; / div & gt;
          & lt; div classname = "apt-totes" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // paluu
  } // Render
}); // apluettelo

moduuli.exports = aptlist; 

Komponentti koskee vain kahta asiaa. Ensinnäkin näyttämällä nimitysluettelon sovelluksen nykytilanteesta. Toinen, käsittely klikkauksen yhdestä punaisesta 'X: stä.

Napsauttamalla "X" painaa muutosta sovellustilaan, mikä aiheuttaa tämän komponentin uudelleen. En ole huolissani siitä, mitä tietoja tapahtuu, yksinkertaisesti, miten nykyiset tiedot näytetään.

Luettelokomponentti koskee vain listaus asioita. Sen ei tarvitse huolehtia siitä, mitä muualla tapahtuu. Se on loistava tapa rakentaa sovelluksia ja kun saat sen ripusta, näet, miksi se on erinomainen tapa koodata.

04. yksisuuntainen tietovirta

Seuraava mielen siirto on oppia rakastamaan yksisuuntaista tietovirtaa. Reagoi, sovelluksen tila sijaitsee ylimmässä komponentissa. Kun sinun on muutettava se osakomponentissa, luodaan viittaus ylimmän komponenttiin ja käsittele sitä siellä. Tämä on vähän vaikeaa tottua. Tässä on esimerkki:

 var reagoi = vaatia ("reagoi");
var aptlist = reagoida.createclass ({
  Handledelete: Toiminto () {
    Tämä.Props.ondelete (this.props.whichitem)
  },
  Render: Toiminto () {
    palata(
      & lt; li classname = "Pet-Item Media" & GT;
        & lt; div classname = "Media-vasen" & gt;
          & lt; button classname = "PET-DELETE BTN BTN-XS BTN-VAARA" Onclick = {this.handledlete} & gt;
          & lt; span classname = "glyphicon glyphicon-poistetaan" & gt; & lt; / span & gt; & lt; / button & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // paluu
  } // Render
}); // apluettelo

moduuli.exports = aptlist; 

Tämä on yksinkertaistettu versio moduulista, joka luo luettelon nimityksistä. Luettelossa on Poista-painike, jota hallitsemme tapahtumien käsittelijän kautta. Tämä on erityinen reagoi versio onclick. Tapahtuman käsittelijä kutsuu toiminnon käsikäyttöön, joka on paikallinen alamoduuli. Paikallinen tehtävämme luo yksinkertaisesti viittauksen toiseen toimintoon esineeseen, jota kutsutaan rekvisiittauksiksi. Rekvisiitta on, kuinka tärkeimmät moduulit kommunikoivat alihankin kanssa.

Päämoduulissa luot attribuutin tunnisteeseen, jota käytät moduulia. Se näyttää aivan kuin ohittaa attribuutin HTML-tunnisteeseen:

 & lt; aplist ondelete = {this.deletemessage} / & gt; 

Ja sitten luot oman menetelmän pääkomponentissa käsitelläksesi muutoksen sovelluksen tilaan. Pidä tila päämoduulissa auttaa tekemään alimoduulit tehokkaammaksi. On myös helpompi ylläpitää koodia, koska suurin osa toiminnasta tapahtuu yhdessä paikassa.

05. Lifecycle-menetelmät

Yksi parhaista asioista reagoiesta on tapa, jolla se hallitsee moduulien renderointia. Moduulit eivät tarvitse huolehtia DOM: n päivittämisestä, vain siitä, että reagoi sovelluksen tilaan. Kun valtion muutokset reagoivat uudelleen sovelluksen komponentit uudelleen. Se tekee tämän luomalla oman version DOM-nimeltä Virtual Dom.

Mutta joskus sinun täytyy tehdä asioita vastauksena hengenvetoon. Syötä elinkaaren menetelmiä. Nämä ovat tapoja pyytää reagoivaa käsittelemään tehtäviä eri pisteissä sovelluksen toteutuksessa.

Esimerkiksi Lifecyle-menetelmät, joiden avulla voit ladata ulkoisia tietoja AJAX-pyyntöjen kautta:

 ComponentDidMount: Toiminto () {
  tämä.Serverrequest = $ .get ('./ js / data.json', toiminto (tulos) {
    var tempapts = tulos;
    tämä.SetState ({
      MyAPPointments: Tempapts
    }); // seastate
  } .bind (tämä));
}, // ComponentDidmount 

Täällä ComponentDidmount avulla voit suorittaa jotain, kun alkuperäinen renderointi on valmis. Tämä on erinomainen paikka ladata AJAX-sisältö, perustaa ajastimet ja niin edelleen. On paljon muita elinkaareita, joiden avulla voit ansaita hakemuksen suorittamisen eri kohdissa. Ne ovat välttämättömiä reagoivan virtuaalisen dom, joka on erinomainen aika rakentaa sovelluksia.

Rethinking reagoi

Reacen reagointi edellyttää, miten voit työskennellä Web-sovellusten kanssa, mutta jos keskityt hallitsemaan näiden viiden mielen muutoksen edut, voit nopeasti oppia, miksi kirjasto on tullut niin uskomattoman suosittu ja on fantastinen tapa rakentaa rajapintoja.

Tämä artikkeli - RAY Villalobosin esittämä - julkaistiin alun perin julkaisussa 286 verkkoa, maailman myydyin aikakauslehti Web-suunnittelijoille ja kehittäjille. Tilaa Net .

Haluatko tarkentaa reagoivaa taitoa?

Jos olet kiinnostunut oppimaan lisää reagoiesta, varmista, että olet ottanut lipun Luo Lontoo 19.-21. Syyskuuta 2018 . On perustettu reagoida Akatemian opettamaan reagoimaan ympäri maailmaa ja käynnistettiin sizzy.co ja ok-google.io , Kristijan Ristovski tulee toimittaa ateljeessaan - Opi ajattelemaan Reagoi - jossa hän tutkii Reagoi parhaat käytännöt ja opit ratkaisuja todellisiin ongelmiin, joita saattaa esiintyä vuonna rakentamassa sovelluksen.

Luo Lontoo järjestetään 19.-21. Syyskuuta 2018. Hanki lippu nyt .

Aiheeseen liittyvät artikkelit:

• 10 Expert Reaktjs Vinkkejä, jotka sinun täytyy tietää tänään
• Luo kojelaudan sovellus reagoida
• Rakenna yksinkertainen musiikkisoitin reagoida