Få dit hoved til at reagere med disse fem faktorer

Læringsreaktion, JavaScript-biblioteket til oprettelse af brugergrænseflader fra Facebook og Instagram virker nødder, indtil du giver det en chance. Ting bliver meget lettere, når du forstår fem nøglekoncepter. Jeg kalder disse de fem sindskifte. De er: komponenter, JSX, statslige, livscyklusmetoder og envejs datastrøm.

01. Komponenter

Komponenter er klumper af kode, der kan kombineres for at give mere kompleks funktionalitet. Når du deler din ansøgning til komponenter, gør det det nemmere at opdatere og vedligeholde. I relementer er komponenter endnu vigtigere: Du programmerer ikke bare dem, du designer din app ved at tænke på, hvordan disse komponenter passer sammen.

Lad os bruge grænsefladen nedenfor som et eksempel. Du kan se, hvordan det kan opdeles i tre stykker: En boks til booking af en ny aftale, en listevisning, der lader dig se de eksisterende aftaler og en søgefelt til at kigge igennem dem.

I HTML kan du måske tænke på denne ansøgning som en række elementer, som denne:

 & lt; div id = "petappointments" & gt;
  & lt; div class = "addappointments" & gt; & lt; / div & gt;
  & lt; div class = "SearchAppointments" & gt; & lt; / div & gt;
  & lt; div class = "listappointments" & gt; & lt; / div & gt;
& lt; / div & gt; 

Og det er også hvad du ville gøre i reagerer. Du opretter et enkelt mærke (& lt; div id = "petappointments" & gt;), der kalder en Petappointments-komponent, som derefter kalder de andre underkomponenter efter behov. For at passere et konfigurationsobjekt som dette bruger du CreateClass-metoden til reaktionsobjektet.

 Var Maininterface = React.createClass ({
  Render: Funktion () {
    Vend tilbage (
      & lt; div classname = "interface" & gt;
        & lt; addappointment / & gt;
        & lt; SearchAppointments / & GT;
        & lt; listappointments / & gt;
      & lt; / div & gt;
    )
  } // render.
}); // MAININTERFACE.

Reactom.Render (
  & lt; Mainftreface / & GT;,
  Document.GetelementById ('PetAppointments')
); // Render 

Der er to render metoder. I hovedinterface-klassen erklærer vi de varer, der vil blive sendt til browseren, og Reactom.Render-metoden erstatter & LT; DIV ID = "PetAppointments" & GT; & lt; / div & gt; element i din HTML med React's Code. Vi vil så skrive koden, der håndterer hver af vores tre underkomponenter.

Komponenter gør kode nemt at skrive og vedligeholde. Når du først lærer at tænke på og organisere dine apps som en række komponible komponenter, bliver bygningskomplekse applikationer enklere.

02. JSX.

JSX. er nok et af de største sindskift og en af ​​grundene til, at biblioteket virker så underligt. JSX er en udvidelse til JavaScript, der giver dig mulighed for at kombinere XML-kode med JavaScript.

Dette er slags, hvad der sker med templateringssprog som overskæg, som giver dig mulighed for at medtage JavaScript inden for HTML. Men JSX bliver oversat (Transpiled) i JavaScript. Så du bygger ikke bare en skabelon, men en struktur, der bliver konverteret til en række JavaScript-sætninger. I modsætning til templateringssprog behøver det ikke at blive fortolket på runtime. Lad os se på et eksempel.

 & lt; li classname = "Pet-item Media" Key = {index} & gt;
  & lt; div classname = "Pet-info Media-Body" & GT;
    & lt; div classname = "pet-head" & gt;
      & lt; span classname = "Pet-name" & gt; {this.state.Data [Index] .Petname} & lt; / span & gt;
      & lt; span classname = "apt-date pull-right" & gt; {this.state.Data [Index] .aptdate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; div classname = "ejer-navn" & gt; & lt; span classname = "label-item" & gt; ejer: & lt; / span & gt;
    {this.state.Data [Index] .Ownername} & lt; / div & gt;
    & lt; div classname = "APT-Notes" & GT; {This.State.Data [Index] .aptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Vi kan bruge denne kode til at udsende vores aftaler. Dette føles meget som at bruge et regelmæssigt templateringssprog, så andet end at lære et par mindre idiosyncrasier om JSX, kan du hurtigt hente det hurtigt.

Den ulige del om at bruge JSX ikke lærer sproget selv; Det kommer over, at putting HTML i din JavaScript-kode bare virker ... godt, forkert. Men det er virkelig rart at have hele koden for hver komponent, der bor på et enkelt sted.

03. Stat

Det tredje sindskifte lærer at arbejde med staten i reagere. Status er gemt på den øverste del af din ansøgning og styrer, hvad der sker i din app. Der er en særlig metode kaldet getinitialstate, hvor du kan konfigurere, hvad der sker, når din ansøgning starter.

I min prøveapplikation er den oprindelige tilstand oprettet som denne:

 Var Maininterface = React.createClass ({
  GetInitialState: Funktion () {
    Vend tilbage {
      Apt BodyVisible: False,
      Orderby: 'Petname',
      OrderDir: 'ASC',
      QueryText: ''
    } //Vend tilbage
  }, // Getinitialstate 

Det ser ud til, at jeg opretter globale variabler til min ansøgning, men ændrer disse variabler, der faktisk kontrollerer, hvordan komponenter gør. Hvis noget i min app ændrer værdien af ​​en variabel, gengiver mine komponenter. Hvis værdien af ​​Orderby ændres, vil listen over aftaler ombestilles.

Når du skriver en komponent, er det nemt at ændre programmets tilstand. Skrive komponenter er nemmere, da du kun er fokuseret på, hvad komponenten gør. Her er min apps endelige liste komponent:

 Var React = Kræv ('React');
Var Aptist = React.createClass ({

  HANDLEDELETE: FUNKTION () {
    this.props.ondelete (this.props.whichitem)
  },

  Render: Funktion () {
    Vend tilbage(
      & lt; li classname = "Pet-item Media" & GT;
        & lt; div classname = "Media-Left" & GT;
          & lt; knap classname = "PET-Slet BTN BTN-XS BTN-FARE" ONCLICK = {This.Handledelete} & GT;
          & lt; span classname = "Glyphicon Glyphicon-Fjern" & 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 = "kæledyrsnavn" & gt; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; span classname = "apt-date pull-højre" & gt; {this.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div classname = "ejer-navn" & gt; & lt; span classname = "label-item" & gt; ejer: & lt; / span & gt;
          {this.props.singleitem.ownernavn} & lt; / div & gt;
          & lt; div classname = "apt-noter" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // Vend tilbage
  } // render.
}); // aptlist

module.Exports = aptlist; 

Komponenten er kun bekymret for to ting. For det første viser listen over udnævnelser baseret på den nuværende tilstand af ansøgningen. For det andet, håndterer et klik på en af ​​de røde 'X'er.

Hvis du klikker på 'X', skubber du en ændring i applikationstilstanden, hvilket forårsager, at denne komponent gengives. Jeg er ikke bekymret for, hvad der sker med dataene, blot med, hvordan de aktuelle data vil blive vist.

Listkomponenten er kun bekymret for at notere ting. Det behøver ikke at bekymre sig om, hvad der sker andetsteds. Det er en strålende måde at opbygge applikationer, og når du får fat i det, vil du se, hvorfor det er en overlegen måde at kode på.

04. Envejs datastrøm

Det næste sindskifte er at lære at elske en envejs datastrøm. I reaktion er tilstanden af ​​din ansøgning i den øverste komponent. Når du skal ændre det i en underkomponent, opretter du en henvisning til den øverste komponent og håndterer den der. Dette er lidt svært at vænne sig til. Her er et eksempel:

 Var React = Kræv ('React');
Var Aptist = React.createClass ({
  HANDLEDELETE: FUNKTION () {
    this.props.ondelete (this.props.whichitem)
  },
  Render: Funktion () {
    Vend tilbage(
      & lt; li classname = "Pet-item Media" & GT;
        & lt; div classname = "Media-Left" & GT;
          & lt; knap classname = "PET-Slet BTN BTN-XS BTN-FARE" ONCLICK = {This.Handledelete} & GT;
          & lt; span classname = "Glyphicon Glyphicon-Fjern" & GT; / LT; ​​/ Span & GT; & LT; / Button & GT;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // Vend tilbage
  } // render.
}); // aptlist.

module.Exports = aptlist; 

Dette er en forenklet version af modulet, der opretter en liste over aftaler. Vores liste har en sletningsknap, som vi klarer gennem en hændelseshåndterer. Dette er en speciel reaktionsversion af onclick. Vores arrangementshandler kalder funktionen Handledelete, som er lokal til undermodulet. Vores lokale funktion skaber simpelthen en henvisning til en anden funktion i et objekt kaldet rekvisitter. Rekvisitter er, hvordan hovedmoduler kommunikerer med undermoduler.

I hovedmodulet ville du oprette en attribut til det mærke, du bruger til at repræsentere modulet. Det ligner bare at sende en attribut til en HTML-tag:

 & LT; APTLIST ONDELETE = {this.DeleteMessage} / & gt; 

Og så opretter du din egen metode i hovedkomponenten for at håndtere ændringen til applikationens tilstand. Holde tilstand i hovedmodulet hjælper med at gøre dine undermoduler mere effektive. Det er også lettere at opretholde kode, fordi de fleste af handlingen sker på ét sted.

05. Livscyklusmetoder

En af de bedste ting om reagerer er den måde, den styrer gengivelsen af ​​dine moduler. Dine moduler behøver ikke at bekymre sig om at opdatere DOM, kun om at reagere på tilstanden af ​​din ansøgning. Når staten ændres, reagerer re-reder dine applikations komponenter. Det gør det ved at oprette sin egen version af Dom kaldet en virtuel dom.

Men nogle gange skal du være i stand til at gøre ting som svar på gengivelseslivet. Indtast livscyklusmetoder. Disse er måder at spørge reagere på at håndtere opgaver på forskellige punkter i applikationens udførelse.

Der er for eksempel LifeCyle-metoder, der giver dig mulighed for at indlæse eksterne data via AJAX-anmodninger:

 Componentdidmount: Funktion () {
  this.serverrequest = $ .get ('./ js / data.json', funktion (resultat) {
    VAR TEMPAPTS = resultat;
    dette.setstate ({
      myappointments: Tempapir
    }); // Setstate.
  } .bind (dette));
}, // komponentdidmount 

Her giver CompentrDidMount dig mulighed for at udføre noget, efter at den første rendering er færdig. Dette er et godt sted at indlæse AJAX-indhold, oprette timere og så videre. Der er masser af andre livscyklusmetoder, der giver dig mulighed for at fælde udførelsen af ​​applikationen på forskellige punkter. De er nødvendige på grund af reagererens virtuelle dom, som er en stor timesaver, når de bygger apps.

Omtanke reagerer

Reages kræver en omtanke af den måde, du arbejder med webapplikationer, men hvis du fokuserer på at mestre fordelene ved disse fem sindskift, vil du hurtigt lære, hvorfor biblioteket er blevet så utroligt populært og er en fantastisk måde at opbygge grænseflader på.

Denne artikel - illustreret af Ray Villalobos - blev oprindeligt offentliggjort i udstedelse 286 af netto, verdens bedst sælgende magasin for webdesignere og udviklere. Abonner på Net. .

Vil du yderligere forfine dine reaktionsfærdigheder?

Hvis du er interesseret i at lære mere om reagere, skal du sørge for at du har hentet din billet til Generer London fra 19-21 september 2018 . Efter at have grundlagt React Academy for at undervise reagere rundt om i verden og lancerede sizzy.co. og ok-google.io , Kristijan Ristovski vil levere sit værksted - lære at tænke i reagere - hvor han vil undersøge reagere bedste praksis og lære dig løsninger på reelle problemer, som du måske støder på i processen med at opbygge en app.

Generer London finder sted fra 19-21 september 2018. Få din billet nu .

Relaterede artikler:

• 10 ekspertreaktejer tips, som du har brug for at vide i dag
• Opret en dashboard app med reagere
• Byg en simpel musikafspiller med reagere