Ia-ți capul în jurul valorii de reacția cu acești cinci factori

Învățarea reacționează, biblioteca JavaScript pentru crearea interfețelor de utilizatori de pe Facebook și Instagram pare nuci până când îi dați o șansă. Lucrurile devin mult mai ușor atunci când înțelegeți cinci concepte cheie. Eu numesc aceste cinci schimburi de minte. Acestea sunt: ​​componente, JSX, stat, metode de viață și fluxul de date cu sens unic.

01. Componente

Componentele sunt bucăți de cod care pot fi combinate pentru a oferi funcționalități mai complexe. Când împărțiți aplicația în componente, aceasta facilitează actualizarea și menținerea. În reacție, componentele sunt și mai importante: nu le programați doar, proiectați aplicația dvs. gândindu-vă la modul în care aceste componente se potrivesc împreună.

Să folosim interfața de mai jos ca exemplu. Puteți vedea cum poate fi împărțită în trei bucăți: o cutie pentru rezervarea unei întâlniri noi, o vizualizare listă care vă permite să vizualizați întâlnirile existente și o casetă de căutare pentru a le privi prin ele.

În HTML, s-ar putea să vă gândiți la această aplicație ca o serie de elemente, astfel cum:

 și lt; div id = "petappouncții" & gt;
  & Lt; Div Clasa = "Addappoints" & gt; / Lt; / Div & gt;
  & Lt; Div Clasa = "Searchappoints" & GT; / Div & gt;
  & Lt; Div Clasa = "ListaPpointive" & GT; / Lt; / Div & gt;
& lt; / div & gt; 

Și asta e și ce ai face în reacție. Creați o singură etichetă (& Lt; Div id = "Pet-puncte" & gt;) care solicită o componentă de companie pepotiți, care apoi solicită celelalte sub-componente după cum este necesar. Pentru a trece de-a lungul unui obiect de configurare ca acesta, utilizați metoda CreateClass a obiectului reaction.

 varinterinterface = reaction.createclass ({{
  Render: Funcție () {
    întoarcere (
      & lt; div clasaname = "interfață" & gt;
        & lt; addappotiți / & gt;
        & lt; Searchappouncții / & Gt;
        & Lt; listappointys / & gt;
      & lt; / div & gt;
    )
  } // Render.
}); // principalainterface

Reactdom.Render (
  & lt; principalinterface / & gt;
  document.getelementbyid ("PetPoints")
); // Render 

Există două metode de renume. În clasa principală, declarăm elementele care vor fi trimise la browser și metoda Reactdom.Render înlocuiește "PetPoints" & GT; / gt; element în HTML dvs. cu codul reacției. Am scrie apoi codul care gestionează fiecare dintre cele trei sub-componente.

Componentele fac codul ușor de scris și menținut. Odată ce învățați să vă gândiți și să vă organizați aplicațiile ca o serie de componente compozabile, aplicațiile complexe de construcție devine mai simplă.

02. JSX.

JSX. Este probabil una dintre cele mai mari schimburi de minte și unul dintre motivele pentru care biblioteca pare atât de ciudată. JSX este o extensie la JavaScript care vă permite să combinați codul XML cu JavaScript.

Acesta este un fel de ceea ce se întâmplă cu limbile templative precum mustața, care vă permite să includeți JavaScript în HTML. Dar JSX devine tradus (transferat) în JavaScript. Deci, nu construiți doar un șablon, ci o structură care se transformă într-o serie de declarații JavaScript. Spre deosebire de limbile templative, nu trebuie interpretată în timpul rulării. Să ne uităm la un exemplu.

 & LIT CLASSNAME = "Pet-element Media" cheie = {index} & gt;
  & lt; div CLASSNAME = "PET-INFO MEDIA-BOMER" & 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-DREAPTA" & GT; {this.State.Data [index] .aptdate} & lt; / span & gt;
    & lt; / div & gt;
    & Lt; Div CLASSNAME = "Proprietar-name" & gt; & lt; span classname = "element de etichetă" & gt; proprietar: & lt; / span & gt;
    {acest.State.Data [index] .ownerName} & Lt; / Div & Gt;
    & Lt; Div CLASSNAME = "APT-NOTES" & GT; {this.sta.data [index] .aptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Putem folosi acest cod pentru a emite întâlnirile noastre. Acest lucru se simte foarte mult ca folosirea unui limbaj de templare regulat, altele decât învățarea câtorva idiosincraze minore despre JSX, îl puteți ridica repede.

Partea ciudată despre utilizarea JSX nu învață limba în sine; Se depășește faptul că punerea HTML în codul dvs. JavaScript se pare că ... bine, greșit. Dar este foarte frumos să aveți tot codul pentru fiecare componentă care trăiește într-un singur loc.

03. Statul.

A treia schimbare minte este învață să lucreze cu statul în reacție. Statul este stocat pe componenta de vârf a aplicației dvs. și gestionează ceea ce se întâmplă în aplicația dvs. Există o metodă specială numită getInitialState unde puteți configura ceea ce se întâmplă atunci când începe cererea dvs.

În aplicația mea de probă, starea inițială este stabilită astfel:

 varinterinterface = reaction.createclass ({{
  GetInitialState: Funcție () {
    întoarcere {
      aptbodyvisible: false,
      Ordonanța: "PETNAME",
      Ordrer: "ASC",
      QueryText: ''
    } //întoarcere
  }, // getInitialstate 

Se pare că am stabilit variabile globale pentru aplicația mea, dar modificând aceste variabile controlează de fapt modul în care componentele sunt redate. Dacă ceva din aplicația mea schimbă valoarea unei variabile, componentele mele vor relua. Dacă valoarea modificărilor de ordine, de exemplu, lista de întâlniri va reordona.

Când scrieți o componentă, este ușor să modificați starea aplicației. Componentele de scriere este mai ușoară, deoarece vă concentrați doar pe ceea ce face componenta. Aici este componenta listei finale a aplicației mele:

 var reacționează = necesită ("reaction");
var aptlist = reaction.createclass ({{

  HandleDelete: Funcție () {
    the.props.ondelete (this.props.whichitem)
  },

  Render: Funcție () {
    întoarcere(
      & lt; Li CLASSNAME = "MEDIA PET-PET" & GT;
        & lt; div CLASSNAME = "Media-stânga" & GT;
          & lt; butonul CLASSNAME = "PET-DELETE BTN-XS BTN-Pericol" onClick = {the.handledelete} & gt;
          "Glyphicon glificon-remove" & gt; / lt; / buton & gt;
        & lt; / div & gt;
        & lt; div CLASSNAME = "PET-INFO MEDIA-BOMER" & GT;
          & lt; div CLASSNAME = "PET-HEAD" & GT;
            & lt; span classname = "Pet-nume" & gt; {the.props.singleitem.petname} & span & gt;
            & Lt; Span ClassName = "Apt-Date Trage-dreapta" & GT; {the.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & Lt; Div CLASSNAME = "Proprietar-name" & gt; & lt; span classname = "element de etichetă" & gt; proprietar: & lt; / span & gt;
          {acest.props.singleitem.ownerName} & Lt; / Div & gt;
          & lt; div clasaname = "apt-note" & gt; {the.props.singleitem.aptnotes} & div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // întoarcere
  } // Render.
}); // aptlist.

modulul.exports = aptlist; 

Componenta este preocupată numai de două lucruri. În primul rând, prezentând lista de întâlniri pe baza stării actuale a aplicației. În al doilea rând, manipularea unui clic pe unul dintre X'S 'X's.

Dacă faceți clic pe "x", va apărea o modificare a statului de aplicare, provocând re-randarea acestei componente. Nu sunt îngrijorat de ceea ce se întâmplă cu datele, pur și simplu cu modul în care vor fi afișate datele curente.

Componenta listei este preocupată numai de listarea lucrurilor. Nu trebuie să vă faceți griji cu privire la ceea ce se întâmplă în altă parte. Este o modalitate strălucită de a construi aplicații și odată ce obțineți atârnă de ea, veți vedea de ce este un mod superior de cod.

04. Flux de date cu o singură direcție

Următoarea schimbare a minții este de a învăța să iubești un flux de date unic. În reacție, starea aplicației dvs. se află în componenta de vârf. Când trebuie să o schimbați într-o subcomponenta, creați o referire la componenta cea mai de sus și o gestionați acolo. Acest lucru este un pic cam greu de obișnuit. Iată un exemplu:

 var reacționează = necesită ("reaction");
var aptlist = reaction.createclass ({{
  HandleDelete: Funcție () {
    the.props.ondelete (this.props.whichitem)
  },
  Render: Funcție () {
    întoarcere(
      & lt; Li CLASSNAME = "MEDIA PET-PET" & GT;
        & lt; div CLASSNAME = "Media-stânga" & GT;
          & lt; butonul CLASSNAME = "PET-DELETE BTN-XS BTN-Pericol" onClick = {the.handledelete} & gt;
          "Glyphicon glificon-remove" & gt; / lt; / buton & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // întoarcere
  } // Render.
}); // aptlist.

modulul.exports = aptlist; 

Aceasta este o versiune simplificată a modulului care creează o listă de întâlniri. Lista noastră are un buton de ștergere, pe care îl gestionăm printr-un handler de evenimente. Aceasta este o versiune specială de reacție a OnClick. Manipulatorul nostru de evenimente solicită funcția Handledelete, care este locală la submodule. Funcția noastră locală creează pur și simplu o referire la o altă funcție într-un obiect numit recuzită. Props sunt modul în care modulele principale comunică cu submodule.

În modulul principal, ați crea un atribut la eticheta pe care o utilizați pentru a reprezenta modulul. Seamănă doar ca trecerea unui atribut unei etichete HTML:

 & lt; aptlist ondelete = {the.deletemesage} / & gt; 

Și apoi creați propria metodă în componenta principală pentru a gestiona modificarea stării aplicației. Menținerea stării în modulul principal vă ajută să faceți submodulele dvs. mai eficiente. De asemenea, este mai ușor să mențineți codul deoarece majoritatea acțiunii se întâmplă într-un singur loc.

05. Metode de ciclu de viață

Unul dintre cele mai bune lucruri despre reacție este modul în care gestionează redarea modulelor dvs. Modulele dvs. nu trebuie să vă faceți griji cu privire la actualizarea DOM, numai despre reacția la starea aplicației dvs. Când modificările statului, reacționează re-transformarea componentelor aplicației dvs. Aceasta face acest lucru prin crearea propriei versiuni a DOM numit Dom virtual.

Dar, uneori, trebuie să puteți face lucruri ca răspuns la ciclul de redare. Introduceți metodele de ciclu de viață. Acestea sunt modalități de a solicita reacția pentru a gestiona sarcinile la diferite puncte din execuția aplicației.

Există, de exemplu, metodele de viață care vă permit să încărcați date externe prin solicitările AJAX:

 ComponentDidmount: Funcție () {
  acest.serverrequest = $ .get ('./ js / Day.json', funcția (rezultatul) {
    var tencapte = rezultat;
    acest.setstate ({{
      MyApPoints: Tempaptes.
    }); // setstate.
  } banc (acest));
}, // componentdidmount 

Aici, ComponentDidmount vă permite să executați ceva după redarea inițială este completă. Acesta este un loc minunat pentru a încărca conținuturile AJAX, pentru a crea cronometre și așa mai departe. Există o mulțime de alte metode de viață care vă permit să prindeți execuția aplicației în diferite puncte. Ele sunt necesare din cauza Dom virtuale a reacției, care este un mare timp de timp când construiește aplicații.

Regândirea reacției

React necesită o regândire a modului în care lucrați cu aplicațiile web, dar dacă vă concentrați asupra mastering beneficiile acestor cinci schimbări de minte, veți afla rapid de ce biblioteca a devenit atât de incredibil de populară și este o modalitate fantastică de a construi interfețe.

Acest articol - ilustrat de Ray VillaLobos - a fost inițial publicat în numărul 286 de net, cea mai bună revistă din lume pentru designeri de web și dezvoltatori. Abonați-vă la Net. .

Doriți să vă perfecționați în continuare abilitățile de reacție?

Dacă sunteți interesat să aflați mai multe despre reacție, asigurați-vă că ați luat biletul pentru Generați Londra din 19-21 septembrie 2018 . După înființarea Academiei reacționate pentru a preda reacția în jurul lumii și a lansat Sizzy.co. și ok-google.io. , Kristijan Ristovski va livra atelierul său - Aflați cum să gândiți în reacție - în care va explora cele mai bune practici și vă va învăța soluții la probleme reale pe care le-ați putea întâlni în procesul de construire a unei aplicații.

Generarea Londrei are loc în perioada 19-21 septembrie 2018. Ia-ți biletul acum .

Articole similare:

• 10 experți Reactjs sfaturi pe care trebuie să știți astăzi
• Creați o aplicație de bord cu reacție
• Construiți un simplu player muzical cu reacție