Pune-ți capul în cap Reacționează cu acești cinci factori

Learning React, biblioteca JavaScript pentru crearea interfețelor de utilizator de pe Facebook și Instagram pare nebună până când îi oferi o șansă. Lucrurile devin mult mai ușoare atunci când înțelegeți cinci concepte cheie. Le numesc cele cinci schimbări de minte. Acestea sunt: ​​componente, JSX, stare, metode ale ciclului de viață și flux de date unidirecțional.

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, face mai ușor actualizarea și întreținerea. În React, componentele sunt și mai importante: nu doar le programați, ci vă proiectați aplicația gândindu-vă la modul în care aceste componente se potrivesc.

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



O imagine care arată cât de ușoară este structurarea unei aplicații în componente reutilizabile.

Puteți vedea cu ușurință cum să structurați această aplicație în componente reutilizabile

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

Și asta este și ceea ce ați face în React. Creați o singură etichetă () care apelează o componentă petAppointments, care apoi apelează 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 React.

var MainInterface = React.createClass({ render: function() { return ( ) } //render }); //MainInterface ReactDOM.render( , document.getElementById('petAppointments') ); //render

Există două metode de redare. În clasa MainInterface, declarăm articolele care vor fi trimise browserului, iar metoda ReactDOM.render înlocuiește elementul din HTML cu codul React. Apoi am scrie codul care tratează fiecare dintre cele trei componente secundare.

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

cum se desenează un desen izometric

02. JSX

JSX este probabil una dintre cele mai mari schimbări 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.

hp zbook studio g4 dreamcolor amazon

Acesta este un fel de ceea ce se întâmplă cu limbaje de modelare, cum ar fi Mustache, care vă permit să includeți JavaScript în HTML. Dar JSX este tradus (transpus) î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 de tip template, nu trebuie să fie interpretate în timpul rulării. Să vedem un exemplu.

  • {this.state.data[index].petName} {this.state.data[index].aptDate} Owner: {this.state.data[index].ownerName} {this.state.data[index].aptNotes}
  • Putem folosi acest cod pentru a ne transmite programările. Se simte mult ca și cum ai folosi un limbaj obișnuit de șablonare, deci în afară de a învăța câteva idiosincrazii minore despre JSX, îl poți prelua rapid.

    Partea ciudată a utilizării JSX nu este învățarea limbii în sine; trece peste faptul că introducerea codului HTML în codul dvs. JavaScript pare doar ... bine, greșit. Dar este foarte frumos să ai tot codul pentru fiecare componentă care locuiește într-un singur loc.

    03. Stat

    O imagine care afișează utilizatorul făcând clic pe un X roșu - care este capturat la nivelul componentei.

    Dând clic pe unul dintre X-urile roșii este capturat la nivelul componentei, dar face trimitere la o metodă din componenta principală prin recuzită

    A treia schimbare a minții este învățarea de a lucra cu starea în React. Starea este stocată pe cea mai înaltă componentă a aplicației și gestionează ceea ce se întâmplă în aplicația dvs. Există o metodă specială numită getInitialState în care puteți configura ce se întâmplă când pornește aplicația.

    În aplicația eșantion, starea inițială este configurată astfel:

    var MainInterface = React.createClass({ getInitialState: function() { return { aptBodyVisible: false, orderBy: 'petName', orderDir: 'asc', queryText: '' } //return }, //getInitialState

    Se pare că configurez variabile globale pentru aplicația mea, dar modificarea acestor variabile controlează efectiv modul de redare a componentelor. Dacă ceva din aplicația mea modifică valoarea unei variabile, componentele mele vor fi redate din nou. Dacă se modifică valoarea orderBy, de exemplu, lista programărilor se va reordona.

    Când scrieți o componentă, este ușor să modificați starea aplicației. Scrierea componentelor este mai ușoară, deoarece vă concentrați doar pe ceea ce face componenta. Iată lista finală a aplicației mele:

    var React = require('react'); var AptList = React.createClass({ handleDelete: function() { this.props.onDelete(this.props.whichItem) }, render: function() { return(
  • {this.props.singleItem.petName} {this.props.singleItem.aptDate} Owner: {this.props.singleItem.ownerName} {this.props.singleItem.aptNotes}
  • ) // return } // render }); //AptList module.exports=AptList;

    Componenta se referă doar la două lucruri. Mai întâi, afișarea listei de întâlniri pe baza stării curente a aplicației. În al doilea rând, gestionarea unui clic pe unul dintre „X-urile” roșii.

    Dacă faceți clic pe „X”, va apărea o modificare a stării aplicației, determinând redarea acestei componente. Nu mă îngrijorează ceea ce se întâmplă cu datele, pur și simplu cu modul în care vor fi afișate datele actuale.

    Componenta listei se referă doar la listarea lucrurilor. Nu trebuie să vă faceți griji cu privire la ceea ce se întâmplă în altă parte. Este o modalitate strălucitoare de a crea aplicații și, odată ce ați obținut, veți vedea de ce este o modalitate superioară de codificare.

    04. Flux de date unidirecțional

    O imagine care arată utilizatorului introducerea informațiilor într-o componentă de căutare, demonstrând modul în care React va reda date specifice din mers.

    Aici componenta de căutare se referă doar la modificarea stării datelor. Lista va fi redată din nou cu noile date din mers

    Următoarea schimbare a minții este să înveți să iubești un flux de date într-un singur sens. În React, starea aplicației dvs. se află în componenta de sus. Când trebuie să o schimbați într-o subcomponentă, creați o referință la cea mai de sus componentă și o gestionați acolo. Acest lucru este cam greu de obișnuit. Iată un exemplu:

    cum să faci o artă bună a fanilor
    var React = require('react'); var AptList = React.createClass({ handleDelete: function() { this.props.onDelete(this.props.whichItem) }, render: function() { return(
  • ... ) // return } // render }); //AptList module.exports=AptList;

    Aceasta este o versiune simplificată a modulului care creează o listă de întâlniri. Lista noastră are un buton Ștergere, pe care îl gestionăm printr-un gestionar de evenimente. Aceasta este o versiune specială React a onclick. Handler-ul nostru de evenimente apelează funcția handleDelete, care este locală pentru sub-modul. Funcția noastră locală creează pur și simplu o referință la o altă funcție într-un obiect numit recuzită. Obiectivele sunt modul în care modulele principale comunică cu sub-module.

    În modulul principal, ați crea un atribut pentru eticheta pe care o utilizați pentru a reprezenta modulul. Arată la fel ca trecerea unui atribut la o etichetă HTML:

    Și apoi vă creați propria metodă în componenta principală pentru a gestiona schimbarea la starea aplicației. Păstrarea stării în modulul principal ajută la eficientizarea submodulelor. De asemenea, este mai ușor să mențineți codul, deoarece cea mai mare parte a acțiunii se întâmplă într-un singur loc.

    05. Metode ale ciclului de viață

    Unul dintre cele mai bune lucruri despre React este modul în care gestionează redarea modulelor dvs. Modulele dvs. nu trebuie să vă faceți griji cu privire la actualizarea DOM, ci doar cu privire la reacția la starea aplicației dvs. Când starea se modifică, React redă componentele aplicației dvs. Face acest lucru creând propria sa versiune a DOM numită Virtual DOM.

    Dar, uneori, trebuie să puteți face lucruri ca răspuns la stilul de viață de redare. Introduceți metodele ciclului de viață. Acestea sunt modalități de a cere lui React să gestioneze sarcini în diferite momente ale execuției aplicației.

    Există, de exemplu, metode de stil de viață care vă permit să încărcați date externe prin cereri AJAX:

    componentDidMount: function() { this.serverRequest = $.get('./js/data.json', function(result) { var tempApts = result; this.setState({ myAppointments: tempApts }); //setState }.bind(this)); }, //componentDidMount

    Aici, componentDidMount vă permite să executați ceva după finalizarea redării inițiale. Acesta este un loc minunat pentru încărcarea conținutului AJAX, configurarea cronometrelor și așa mai departe. Există o mulțime de alte metode ale ciclului de viață care vă permit să prindeți execuția aplicației în diferite puncte. Acestea sunt necesare datorită DOM-ului virtual al React, care este un mare economisire a timpului la crearea aplicațiilor.

    cum să eliminați petele luminoase din Photoshop

    Reacționați din nou

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

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

    Doriți să vă perfecționați abilitățile React?

    Imagine cu detalii despre atelierul lui Kristijan Ristovski - Aflați cum să gândiți în reacție - la Generate London în perioada 19-21 septembrie 2018.

    Kristijan Ristovski susține atelierul său Învață cum să gândești în reacționează la Generate London în perioada 19-21 septembrie 2018

    Dacă sunteți interesat să aflați mai multe despre React, asigurați-vă că ați ridicat biletul pentru Generați Londra în perioada 19-21 septembrie 2018 . După ce a fondat Academia React pentru a preda React în întreaga lume și a lansat sizzy.co și ok-google.io , Kristijan Ristovski își va susține atelierul - Aflați cum să gândiți în reacționează - în care va explora cele mai bune practici React și vă va învăța soluții la problemele reale pe care le-ați putea întâlni în procesul de construire a unei aplicații.

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

    Articole similare: