prendi la testa in giro reagire con questi cinque fattori

L'apprendimento reagire, la libreria JavaScript per la creazione di interfacce utente da Facebook e Instagram sembra da mangiare finché non ne danno una possibilità. Le cose diventano molto più semplici quando capisci cinque concetti chiave. Io chiamo questi tre turni di mente. Sono: componenti, jsx, stato, metodi di ciclo di vita e flusso di dati a senso unico.

01. Componenti

I componenti sono pezzi di codice che possono essere combinati per fornire funzionalità più complesse. Quando dividi la tua applicazione in componenti, facilita l'aggiornamento e la manutenzione. Nel reagire, i componenti sono ancora più importanti: non li fai solo programmarli, progetti la tua app pensando a come questi componenti si adattano.

Usiamo l'interfaccia sottostante come esempio. Puoi vedere come può essere diviso in tre pezzi: una scatola per prenotare un nuovo appuntamento, una vista elenco che consente di visualizzare gli appuntamenti esistenti e una casella di ricerca per guardarli.

In HTML, potresti pensare a questa applicazione come una serie di elementi, in questo modo:

 & lt; div id = "petarappointments" & 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; 

E questo è anche quello che faresti in reagire. Si crea un singolo tag (& lt; div id = "petarappointments" & gt;) che chiama un componente Petappointments, che quindi chiama gli altri sotto-componenti secondo necessità. Per passare lungo un oggetto di configurazione come questo, si utilizza il metodo CreateClass dell'oggetto reagito.

 VAR MainInterface = react.createClass ({
  Rendering: Function () {
    ritorno (
      & lt; div classname = "interfaccia" e gt;
        & lt; addappointment / & gt;
        & lt; SearchApperointments / & GT;
        & lt; listaPointments / & GT;
      & lt; / div & gt;
    )
  } // rendering.
});); // Maininterface.

Reactdom.Render (
  & lt; maininterface / & gt;
  Document.getElementbyID ('Petappointments')
); // render 

Ci sono due metodi di rendering. Nella classe principale dell'interfaccia, dichiareriamo gli elementi che verranno inviati al browser e il metodo reactdom.Render sostituisce il & lt; div id = "petarappointments" & gt; & lt; / div & gt; Elemento nel tuo HTML con il codice React. Scriveremmo quindi il codice che gestisce ciascuno dei nostri tre sotto-componenti.

I componenti rendono il codice facile da scrivere e mantenere. Una volta che impari a pensare e organizzare le tue app come una serie di componenti componenti, la costruzione di applicazioni complesse diventa più semplice.

02. JSX.

Jsx. è probabilmente uno dei più grandi turni della mente e uno dei motivi per cui la biblioteca sembra così strana. JSX è un'estensione per JavaScript che ti consente di combinare il codice XML con JavaScript.

Questo è un po 'ciò che accade con le lingue modelli come i baffi, che consentono di includere JavaScript all'interno di HTML. Ma JSX viene tradotto (traspirato) in JavaScript. Quindi non stai solo costruendo un modello ma una struttura che viene convertita in una serie di dichiarazioni JavaScript. A differenza delle lingue di templation, non deve essere interpretata in fase di esecuzione. Diamo un'occhiata ad un esempio.

 & lt; li classname = "pet-element 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 [indice] .epetaname} & lt; / span & gt;
      & lt; span classname = "apt-data pull-right" & gt; {this.state.data [indice] .aptdate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; div classname = "proprietario-name" & gt; & lt; span classname = "label-elemento" e gt; proprietario: & lt; / span & gt;
    {this.state.data [indice] .ownewname} & lt; / div & gt;
    & lt; div classname = "apt-notes" & gt; {this.state.data [indice] ..ptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Possiamo utilizzare questo codice per emettere i nostri appuntamenti. Questo è molto simile all'utilizzo di un linguaggio di formazione regolare, così diverso dall'apprendimento di alcune minori idiosincrasie su JSX, puoi prenderlo rapidamente.

La parte strana sull'utilizzo di JSX non sta imparando la lingua stessa; Sta ottenendo il fatto che mettendo HTML all'interno del tuo codice JavaScript sembra semplicemente ... Bene, sbagliato. Ma è davvero bello avere tutto il codice per ogni componente che vive in un unico posto.

03. Stato

Il terzo spostamento della mente sta imparando a lavorare con lo stato in reagire. Lo stato è memorizzato sulla componente più in alto della tua applicazione e gestisce cosa sta succedendo nella tua app. C'è un metodo speciale chiamato GetinitialState dove è possibile configurare cosa succede quando l'applicazione inizia.

Nella mia applicazione di esempio, lo stato iniziale è impostato in questo modo:

 VAR MainInterface = react.createClass ({
  GETTITITIALSTATE: funzione () {
    ritorno {
      Aptbodyvisible: falso,
      Orderyby: 'petname',
      OrderDir: 'ASC',
      Querytext: '' '
    } //ritorno
  }, // getinitialstate 

Sembra che sto creando variabili globali per la mia applicazione, ma la modifica di queste variabili controlla effettivamente come rendono i componenti. Se qualcosa nella mia app cambia il valore di una variabile, i miei componenti ri-rendono. Se il valore di ordinato cambia, ad esempio, l'elenco degli appuntamenti riordinerà.

Quando si scrive un componente, è facile modificare lo stato dell'applicazione. La scrittura dei componenti è più facile dal momento che ti concentri solo su ciò che il componente fa. Ecco il componente della lista finale della mia app:

 VAR react = richiede ("reagire");
var aptlist = react.createclass ({

  HandleDelete: funzione () {
    This.Props.ONDELETE (This.Props.HhichItem)
  },

  Rendering: Function () {
    ritorno(
      & lt; li classname = "pet-item media" & gt;
        & lt; div classname = "media-sinistra" e gt;
          & lt; button classname = "pet-delete btn btn-xs btn-perblight" onclick = {this.handletelete} & gt;
          & lt; span classname = "Glyphicon Glyphicon-Rimuovi" & 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 = "pet-name" & gt; {this.props.singletem.epename} & lt; / span & gt;
            & lt; span classname = "apt-data pull-right" & gt; {this.props.singletem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div classname = "proprietario-name" & gt; & lt; span classname = "label-elemento" e gt; proprietario: & lt; / span & gt;
          {this.props.singletem.ownName} & lt; / div & gt;
          & lt; div classname = "apt-notes" & gt; {this.props.singletem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // ritorno
  } // rendering.
});); // Aptlist.

module.Exports = Aptlist; 

Il componente è preoccupato solo di due cose. In primo luogo, mostrando l'elenco degli appuntamenti in base allo stato attuale dell'applicazione. In secondo luogo, gestendo un clic su uno dei rossi 'x's.

Facendo clic su "X" spingerà una modifica nello stato di applicazione, causando ri-rendering di questo componente. Non sono preoccupato per quello che sta accadendo con i dati, semplicemente con il modo in cui verranno visualizzati i dati correnti.

Il componente dell'elenco è preoccupato solo di elencare le cose. Non deve preoccuparsi di cosa sta succedendo altrove. È un modo brillante per costruire applicazioni e una volta ottenuto l'appendere, vedrai perché è un modo superiore per il codice.

04. Flusso di dati a senso unico

Il prossimo spostamento della mente è imparare ad amare un flusso di dati a senso unico. Nel reagire, lo stato della tua applicazione risiede nel componente più alto. Quando è necessario modificarlo in un sottocomponente, si crea un riferimento al componente più alto e gestirlo lì. Questo è un po 'difficile da usare. Ecco un esempio:

 VAR react = richiede ("reagire");
var aptlist = react.createclass ({
  HandleDelete: funzione () {
    This.Props.ONDELETE (This.Props.HhichItem)
  },
  Rendering: Function () {
    ritorno(
      & lt; li classname = "pet-item media" & gt;
        & lt; div classname = "media-sinistra" e gt;
          & lt; button classname = "pet-delete btn btn-xs btn-perblight" onclick = {this.handletelete} & gt;
          & lt; span classname = "Glyphicon Glyphicon-Rimuovi" & GT; & lt; / span & gt; & lt; / button & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // ritorno
  } // rendering.
});); // Aptlist.

module.Exports = Aptlist; 

Questa è una versione semplificata del modulo che crea un elenco di appuntamenti. La nostra lista ha un pulsante Elimina, che gestiamo tramite un gestore di eventi. Questa è una versione speciale reagire di onclick. Il nostro gestore di eventi chiama la funzione HealtleteLete, che è locale al sotto-module. La nostra funzione locale crea semplicemente un riferimento a un'altra funzione in un oggetto chiamato oggetti di scena. I puntelli sono il modo in cui i moduli principali comunicano con i sotto-moduli.

Nel modulo principale creeresti un attributo al tag che stai usando per rappresentare il modulo. Sembra semplicemente passare un attributo a un tag HTML:

 & lt; Aptlist onDelete = {this.Delememessage} / & gt; 

E quindi si crea il proprio metodo nel componente principale per gestire la modifica allo stato dell'applicazione. Mantenere stato nel modulo principale aiuta a rendere i sotto-moduli più efficienti. È anche più facile mantenere il codice perché la maggior parte dell'azione avviene in un unico posto.

05. Metodi di ciclo di vita

Una delle cose migliori del reazione è il modo in cui gestisce il rendering dei tuoi moduli. I tuoi moduli non devono preoccuparsi di aggiornare il DOM, solo sul reagire allo stato della tua applicazione. Quando i cambiamenti di stato, reagire reagire i componenti della propria applicazione. Lo fa creando la propria versione del DOM chiamato un DOM Virtuale.

Ma a volte devi essere in grado di fare le cose in risposta al bilanciamento del rendering. Inserisci i metodi di vita del ciclo di vita. Questi sono modi per chiedere reagire per gestire le attività in diversi punti nell'esecuzione dell'applicazione.

Esistono, ad esempio, i metodi di LifeCyle che consentono di caricare i dati esterni tramite richieste AJAX:

 ComponentDidmount: funzione () {
  questo.serverrequest = $ .get ('./ js / data.json', funzione (risultato) {
    var tempapts = Risultato;
    questo.SetState ({
      MyAppointments: TemPapts.
    });); // setstate.
  } .bind (questo));
}, // componentDidmount 

Qui, ComponentDidmount consente di eseguire qualcosa dopo il completamento del rendering iniziale. Questo è un ottimo posto per caricare contenuti Ajax, impostare i timer e così via. Ci sono molti altri metodi di ciclo di vita che consentono di intrappolare l'esecuzione dell'applicazione in punti diversi. Sono necessari a causa del React's Virtual Dom, che è un ottimo servizio durante la costruzione di app.

Ripensare reagire.

React richiede un ripensamento del modo in cui lavori con le applicazioni web, ma se ti concentri sul padroneggio dei benefici di questi cinque turni di mente, imparerai rapidamente perché la biblioteca è diventata così incredibilmente popolare ed è un modo fantastico per costruire interfacce.

Questo articolo - illustrato da Ray Villalobos - è stato originariamente pubblicato in questione 286 di NET, la rivista best-seller del mondo per web designer e sviluppatori. Iscriviti a Rete. .

Vuoi raffinare ulteriormente le tue capacità reagire?

Se sei interessato a saperne di più sul reagire, assicurati di aver scelto il tuo biglietto per Genera Londra dal 19 al 21 settembre 2018 . Avendo fondato React Academy per insegnare reagire in tutto il mondo e lanciato sizzy.co. e ok-google.io. , Kristijan Ristovski consegnerà il suo laboratorio - Impara a pensare a reagire - in cui esplorerà reagire le migliori pratiche e ti insegnerà soluzioni a problemi reali che potresti incontrare nel processo di costruzione di un'app.

Genera Londra ha luogo dal 19 al 21 settembre 2018. Ottieni il tuo biglietto ora .

Articoli Correlati:

• 10 Consigli per reactjs esperti che devi sapere oggi
• Creare un'app dashboard con reagire
• Costruisci un semplice lettore musicale con reagire