Holen Sie sich Ihren Kopf um diese fünf Faktoren umsetzen

Learning React, die JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen von Facebook und Instagram erscheint Nüsse, bis Sie es eine Chance geben. Die Dinge werden viel einfacher, wenn Sie fünf Schlüsselkonzepte verstehen. Ich nenne diese die fünf Gedankenverschiebungen. Sie sind: Komponenten, JSX, Status, Lebenszyklusmethoden und einseitiger Datenfluss.

01. Bauteile.

Komponenten sind Brocken des Codes, der kombiniert werden kann, um komplexere Funktionalität bereitzustellen. Wenn Sie Ihre Anwendung in Komponenten teilen, erleichtert es, zu aktualisieren und zu warten. In React sind Komponenten noch wichtiger: Sie programmieren sie nicht nur, Sie entwerfen Ihre App, indem Sie darüber nachdenken, wie diese Komponenten zusammenpassen.

Lassen Sie uns die Schnittstelle unten als Beispiel verwenden. Sie können sehen, wie es in drei Teile unterteilt werden kann: eine Box zum Buchen eines neuen Termins, einer Listenansicht, mit der Sie die vorhandenen Termine anzeigen können, und ein Suchfeld, um durch sie durchzusehen.

In HTML denken Sie an diese Anwendung als eine Reihe von Elementen, wie folgt:

 & lt; div id = "petapappetments" & gt;
  & lt; div class = "addaption" & gt; & lt; / div & gt;
  & lt; div class = "sucheappointments" & gt; & lt; / div & gt;
  & lt; div class = "listappetments" & gt; & lt; / div & gt;
& lt; / div & gt; 

Und das ist auch das, was Sie tun würden. Sie erstellen ein einzelnes Tag (& lt; div id = "petapappointments" & gt;), das eine Petapeter-Komponente aufgerufen, die dann die anderen Unterkomponenten nach Bedarf anruft. Um ein Konfigurationsobjekt so weiterzugeben, verwenden Sie das CreateClass-Verfahren des Reaktionsobjekts.

 VAR MainInterface = reag.createclass ({
  Render: Funktion () {
    Rückkehr (
      & lt; div classname = "Schnittstelle" & gt;
        & lt; addaptment / & gt;
        & lt; Suchappointments / & gt;
        & lt; Listappointments / & gt;
      & lt; / div & gt;
    )
  } // Render
}); //Haupt-Schnittstelle

Reagdom.render (
  & lt; MainInterface / & gt;
  document.getelementByID ('Petaplaptments')
); // Render 

Es gibt zwei Render-Methoden. In der MainInterface-Klasse erklären wir die Elemente, die an den Browser gesendet werden, und die Reactdom.Render-Methode ersetzt die & lt; div id = "petapetage" & gt; & lt; / div & gt; Element in Ihrem HTML mit dem Code von React. Wir würden dann den Code schreiben, der jeden unserer drei Unterkomponenten behandelt.

Komponenten machen Code einfach, um zu schreiben und zu warten. Wenn Sie gelernt haben, Ihre Apps als Reihe kompositiver Komponenten zu betrachten und zu organisieren, werden Gebäudekomplexanwendungen einfacher.

02. JSX.

JSX. Ist wahrscheinlich einer der größten Verwendungsverschiebungen und einer der Gründe, warum die Bibliothek so seltsam erscheint. JSX ist eine Erweiterung auf Javascript, mit der Sie den XML-Code mit JavaScript kombinieren können.

Dies ist eine Art von, was mit Vorlagen-Sprachen wie Schnurrbart geschieht, wodurch Sie Javascript in HTML enthalten können. Aber JSX wird übersetzt (transpilt) in Javascript. Sie bauen also nicht nur eine Vorlage, sondern eine Struktur, die in eine Reihe von JavaScript-Anweisungen umgewandelt wird. Im Gegensatz zu Templating-Sprachen muss es nicht zur Laufzeit interpretiert werden. Lass uns ein Beispiel ansehen.

 & 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; {the.state.data [index] .petname} & lt; / span & gt;
      & lt; span classname = "apt-datum pull-rechts" & gt; {this.state.data [index] .aptdate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; div classname = "Besitzer-Name" & GT; & lt; span classname = "label-item" & gt; Besitzer: & lt; / span & gt;
    {this.state.data [Index] .Wuttername} & lt; / div & gt;
    & lt; div classname = "Apt-Notes" & gt; {this.state.data [Index] .aptoten} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Wir können diesen Code verwenden, um unsere Termine auszugeben. Dies spürt viel wie eine regelmäßige Templatationssprache, so anders, als ein paar kleinere Idiosynkrassierungen über JSX zu lernen, können Sie es schnell aufheben.

Der ungerade Teil der Verwendung von JSX lernt nicht die Sprache selbst; Es ist über die Tatsache, dass HTML in Ihrem JavaScript-Code einfügt, scheint einfach ... Nun, falsch. Aber es ist wirklich schön, den ganzen Code für jede Komponente zu haben, die an einem einzigen Ort lebt.

03. Zustand

Der dritte Verhaltensverlagerung lernt lernt, mit dem Zustand in der Reaktion zu arbeiten. Der Zustand wird auf der obersten Komponente Ihrer Anwendung gespeichert und verwaltet, was in Ihrer App passiert. Es gibt eine spezielle Methode namens getinitialstate, an der Sie konfigurieren können, was passiert, wenn Ihre Anwendung beginnt.

In meiner Beispielanwendung wird der Anfangszustand so eingerichtet:

 VAR MainInterface = reag.createclass ({
  getinitialstate: Funktion () {
    Rückkehr {
      aptbodyvisible: false,
      Orderby: 'petname',
      Bestelldir: 'ASC',
      Querytext: ''
    } //Rückkehr
  }, // getinitialstate 

Es sieht so aus, als würde ich globale Variablen für meine Anwendung einrichten, aber die Änderung dieser Variablen steuert tatsächlich, wie Komponenten rendern. Wenn in meiner App etwas den Wert einer Variablen ändert, werden meine Komponenten erneut übertragen. Wenn der Wert des Bestellungswiederbys beispielsweise ändert, wird die Liste der Termine beispielsweise neu ordnet.

Wenn Sie eine Komponente schreiben, können Sie den Status der Anwendung einfach ändern. Die Schreibkomponenten ist einfacher, da Sie nur auf das, was die Komponente tut, ausgerichtet ist. Hier ist die endgültige Listenkomponente der App:

 var reagieren = erfordern ('reagieren');
var aptlist = reag.createclass ({

  handlewelete: function () {
    This.Props.Indelete (das.Props.whichitem)
  },

  Render: Funktion () {
    Rückkehr(
      & lt; li classname = "pet-item media" & gt;
        & lt; div classname = "media-link" & gt;
          & lt; Button classname = "PET-LELETE BTN BTN-XS BTN-DANGER" ontclick = {the.HandleLeLete} & gt;
          & lt; span classname = "Glyphicon Glyphicon-Remove" & GT; & lt; / span & gt; & lt; / taste & 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.singleieem.petname} & lt; / span & gt;
            & lt; span classname = "apt-datum pull-rechts" & gt; {this.props.singleier.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div classname = "Besitzer-Name" & GT; & lt; span classname = "label-item" & gt; Besitzer: & lt; / span & gt;
          {this.props.singSleitem.Ownname} & lt; / div & gt;
          & lt; div classname = "apt-notes" & gt; {this.props.singleierem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // Rückkehr
  } // Render
}); // Aptlist

Modul.exports = Aptlist; 

Die Komponente betrifft nur zwei Dinge. Zunächst wird die Liste der Termine anhand des aktuellen Status der Anwendung angezeigt. Zweitens, um einen Klick auf einen der roten "X's" zu handhaben.

Durch Klicken auf das 'X' wird eine Änderung in den Anwendungszustand gedrückt, wodurch diese Komponente erneut übertragen wird. Ich mache mir keine Sorgen, was mit den Daten passiert, einfach mit wie die aktuellen Daten angezeigt werden.

Die Listenkomponente betrifft nur die Auflistung von Dingen. Es muss sich keine Sorgen machen, was anderswo passiert. Es ist eine brillante Art, Anwendungen zu bauen, und sobald Sie den Hang bekommen, werden Sie sehen, warum es ein überlegener Weg zum Code ist.

04. Ein-Wege-Datenfluss

Die nächste Mind-Verschiebung besteht darin, einen Ein-Wege-Datenfluss zu lieben. In React lebt der Zustand Ihrer Anwendung in der obersten Komponente. Wenn Sie ihn in einer Unterkomponente ändern müssen, erstellen Sie einen Verweis auf die oberste Komponente und behandeln sie dort. Dies ist ein bisschen schwer, sich daran zu gewöhnen. Hier ist ein Beispiel:

 var reagieren = erfordern ('reagieren');
var aptlist = reag.createclass ({
  handlewelete: function () {
    This.Props.Indelete (das.Props.whichitem)
  },
  Render: Funktion () {
    Rückkehr(
      & lt; li classname = "pet-item media" & gt;
        & lt; div classname = "media-link" & gt;
          & lt; Button classname = "PET-LELETE BTN BTN-XS BTN-DANGER" ontclick = {the.HandleLeLete} & gt;
          & lt; span classname = "Glyphicon Glyphicon-Remove" & GT; & lt; / span & gt; & lt; / taste & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // Rückkehr
  } // Render
}); // Aptlist

Modul.exports = Aptlist; 

Dies ist eine vereinfachte Version des Moduls, die eine Liste von Terminen erstellt. Unsere Liste hat eine Löschknopf, die wir über einen Event-Handler verwalten. Dies ist eine spezielle Reaktionsversion von OnClick. Unser Ereignishandler ruft die Funktion Handledelete auf, die lokal dem Untermodul ist. Unsere lokale Funktion erstellt einfach einen Verweis auf eine andere Funktion in einem Objekt namens Requisiten. Requisiten sind, wie Hauptmodule mit Untermodulen kommunizieren.

Im Hauptmodul erstellen Sie ein Attribut an das Tag, das Sie verwenden, um das Modul darzustellen. Es sieht aus wie ein Attribut an ein HTML-Tag:

 & lt; Aptlist Ondelete = {this.deletemessage} / & gt; 

Und dann erstellen Sie Ihre eigene Methode in der Hauptkomponente, um die Änderung in den Anwendungszustand zu behandeln. Der Zustand des Hauptmoduls hilft, Ihre Untermodule effizienter zu gestalten. Es ist auch einfacher, Code aufrechtzuerhalten, da der größte Teil der Aktion an einem Ort geschieht.

05. Lebenszyklusmethoden.

Eines der besten Dinge über React ist die Art und Weise, wie es das Rendern Ihrer Module verwaltet. Ihre Module müssen sich nicht um die Aktualisierung des Doms kümmern, nur um den Zustand Ihrer Anwendung zu reagieren. Wenn die Statusänderungen ändert, reagieren Sie die Komponenten Ihres Antrags erneut. Dies tut dies, indem er eine eigene Version des Doms erstellt, das als virtuelles DOM bezeichnet wird.

Aber manchmal müssen Sie in der Lage sein, Dinge als Reaktion auf den Rendering-Lebenszylus tun zu können. Geben Sie Lebenszyklus-Methoden ein. Dies sind Wege zu fragen, um die Aufgaben an verschiedenen Punkten in der Ausführung der Anwendung zu handhaben.

Es gibt zum Beispiel LifeCyle-Methoden, mit denen Sie externe Daten über AJAX-Anforderungen laden können:

 componentdidmount: Funktion () {
  This.serverRequest = $ .get ('./ js / data.json', Funktion (Ergebnis) {
    VAR TEMPAPTS = Ergebnis;
    this.setState ({{
      Myappetment: Tempapts.
    }); // SetState.
  } .Bind (das));
}, // componentdidmount 

Hierbei handelt es sich hier, dass Sie hier etwas ausführen, nachdem das anfängliche Rendering abgeschlossen ist. Dies ist ein großartiger Ort, um Ajax-Inhalte zu laden, Timer einzubauen und so weiter. Es gibt viele andere Lifecycle-Methoden, mit denen Sie die Ausführung der Anwendung an verschiedenen Punkten einschließen können. Sie sind aufgrund des virtuellen Doms von React notwendig, was ist ein toller Zeitbaver, wenn Sie Apps bauen.

Umdenken reagieren

React Erfordert ein Umdenken der Art und Weise, wie Sie mit Webanwendungen zusammenarbeiten

Dieser Artikel - illustriert von Ray Villalobos - wurde ursprünglich in der Ausgabe 286 von Net, dem weltweit besten Verkaufsmagazin für Webdesigner und Entwickler, veröffentlicht. Net abonnieren .

Möchten Sie Ihre Reaktionsfähigkeiten weiter verfeinern?

Wenn Sie daran interessiert sind, mehr darüber zu reagieren, stellen Sie sicher, dass Sie Ihr Ticket abgeholt haben Generieren Sie London von 19. bis 21. September 2018 . Nachdem Sie die React Academy gegründet haben, um die Welt auf der ganzen Welt zu unterrichten und auf den Markt zu bringen Sizzy.co. und okgoogle.io. Kristijan Ristovski wird seinen Workshop liefern - erfahren Sie, wie Sie in React denken können

Generieren von London findet vom 19. bis 21. September 2018 statt. Holen Sie sich jetzt Ihr Ticket .

Zum Thema passende Artikel:

• 10 Experte Reactjs Tipps, die Sie heute kennen müssen
• Erstellen Sie eine Dashboard-App mit der Reaktion
• Bauen Sie einen einfachen Musik-Player mit Reaktion auf