Machen Sie sich ein Bild Reagieren Sie mit diesen fünf Faktoren

Learning React, die JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen aus Facebook und Instagram, scheint verrückt zu sein, bis Sie ihr eine Chance geben. Wenn Sie fünf Schlüsselkonzepte verstehen, wird es viel einfacher. Ich nenne das die fünf Gedankenverschiebungen. Dies sind: Komponenten, JSX, Status, Lebenszyklusmethoden und Einwegdatenfluss.

01. Komponenten

Komponenten sind Codestücke, die kombiniert werden können, um komplexere Funktionen bereitzustellen. Wenn Sie Ihre Anwendung in Komponenten aufteilen, wird die Aktualisierung und Wartung vereinfacht. In React sind Komponenten noch wichtiger: Sie programmieren sie nicht nur, Sie entwerfen Ihre App, indem Sie darüber nachdenken, wie diese Komponenten zusammenpassen.

Verwenden wir die folgende Oberfläche als Beispiel. Sie können sehen, wie es in drei Teile unterteilt werden kann: ein Feld zum Buchen eines neuen Termins, eine Listenansicht, in der Sie die vorhandenen Termine anzeigen können, und ein Suchfeld zum Durchsuchen dieser Termine.



Ein Bild, das zeigt, wie einfach es ist, eine App in wiederverwendbare Komponenten zu strukturieren.

wie man mit weichen Pastellen zeichnet
Sie können leicht sehen, wie diese App in wiederverwendbare Komponenten strukturiert wird

In HTML können Sie sich diese Anwendung als eine Reihe von Elementen vorstellen, wie folgt:

Und genau das würden Sie auch in React tun. Sie erstellen ein einzelnes Tag (), das eine petAppointments-Komponente aufruft, die dann die anderen Unterkomponenten nach Bedarf aufruft. Um ein solches Konfigurationsobjekt weiterzugeben, verwenden Sie die createClass-Methode des React-Objekts.

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

Es gibt zwei Rendermethoden. In der MainInterface-Klasse deklarieren wir die Elemente, die an den Browser gesendet werden, und die ReactDOM.render-Methode ersetzt das Element in Ihrem HTML-Code durch den React-Code. Wir würden dann den Code schreiben, der jede unserer drei Unterkomponenten behandelt.

Komponenten erleichtern das Schreiben und Verwalten von Code. Sobald Sie lernen, Ihre Apps als eine Reihe zusammensetzbarer Komponenten zu betrachten und zu organisieren, wird das Erstellen komplexer Anwendungen einfacher.

02. JSX

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

Dies geschieht in etwa mit Vorlagensprachen wie Moustache, mit denen Sie JavaScript in HTML einbinden können. JSX wird jedoch in JavaScript übersetzt (transpiliert). Sie erstellen also nicht nur eine Vorlage, sondern eine Struktur, die in eine Reihe von JavaScript-Anweisungen konvertiert wird. Im Gegensatz zu Vorlagensprachen muss es zur Laufzeit nicht interpretiert werden. Schauen wir uns ein Beispiel an.

  • {this.state.data[index].petName} {this.state.data[index].aptDate} Owner: {this.state.data[index].ownerName} {this.state.data[index].aptNotes}
  • Wir können diesen Code verwenden, um unsere Termine auszugeben. Dies fühlt sich sehr nach der Verwendung einer normalen Vorlagensprache an. Abgesehen davon, dass Sie ein paar kleinere Besonderheiten in Bezug auf JSX kennen, können Sie diese schnell erlernen.

    Der seltsame Teil bei der Verwendung von JSX ist nicht das Erlernen der Sprache selbst. Es kommt über die Tatsache hinweg, dass das Einfügen von HTML in Ihren JavaScript-Code einfach ... nun, falsch scheint. Aber es ist wirklich schön, den gesamten Code für jede Komponente an einem einzigen Ort zu haben.

    03. Staat

    Ein Bild, in dem der Benutzer auf ein rotes X klickt, das auf Komponentenebene erfasst wird.

    wie man Landschaft in Aquarell malt
    Das Klicken auf eines der roten X wird auf Komponentenebene erfasst, verweist jedoch über Requisiten auf eine Methode in der Hauptkomponente

    Der dritte Gedankenwandel ist das Lernen, mit dem Zustand in React zu arbeiten. Der Status wird in der obersten Komponente Ihrer Anwendung gespeichert und verwaltet, was in Ihrer App geschieht. Es gibt eine spezielle Methode namens getInitialState, mit der Sie konfigurieren können, was beim Start Ihrer Anwendung passiert.

    In meiner Beispielanwendung wird der Ausgangszustand wie folgt eingerichtet:

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

    Es sieht so aus, als würde ich globale Variablen für meine Anwendung einrichten, aber das Ändern dieser Variablen steuert tatsächlich, wie Komponenten gerendert werden. Wenn etwas in meiner App den Wert einer Variablen ändert, werden meine Komponenten neu gerendert. Wenn sich beispielsweise der Wert von orderBy ändert, wird die Liste der Termine neu angeordnet.

    Wenn Sie eine Komponente schreiben, können Sie den Status der Anwendung leicht ändern. Das Schreiben von Komponenten ist einfacher, da Sie sich nur auf die Funktionen der Komponente konzentrieren. Hier ist die letzte Listenkomponente meiner App:

    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;

    Die Komponente befasst sich nur mit zwei Dingen. Zunächst wird die Liste der Termine basierend auf dem aktuellen Status der Anwendung angezeigt. Zweitens: Klicken Sie auf eines der roten 'X'.

    wie man beim Figurenzeichnen besser wird

    Wenn Sie auf das 'X' klicken, wird der Anwendungsstatus geändert, und diese Komponente wird erneut gerendert. Ich mache mir keine Sorgen darüber, was mit den Daten passiert, sondern nur darüber, wie die aktuellen Daten angezeigt werden.

    Die Listenkomponente befasst sich nur mit dem Auflisten von Dingen. Es muss sich keine Sorgen machen, was anderswo passiert. Es ist eine hervorragende Möglichkeit, Anwendungen zu erstellen. Sobald Sie den Dreh raus haben, werden Sie sehen, warum es eine überlegene Methode zum Codieren ist.

    04. Einwegdatenfluss

    Ein Bild, das den Benutzer zeigt, der Informationen in eine Suchkomponente eingibt, und zeigt, wie React bestimmte Daten unterwegs erneut rendert.

    Hier geht es bei der Suchkomponente nur darum, den Status der Daten zu ändern. Die Liste wird mit den neuen Daten im laufenden Betrieb neu gerendert

    Die nächste Änderung des Denkvermögens besteht darin, zu lernen, einen einseitigen Datenfluss zu lieben. In React befindet sich der Status Ihrer Anwendung in der obersten Komponente. Wenn Sie es in einer Unterkomponente ändern müssen, erstellen Sie einen Verweis auf die oberste Komponente und behandeln ihn dort. Das ist etwas gewöhnungsbedürftig. Hier ein Beispiel:

    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;

    Dies ist eine vereinfachte Version des Moduls, mit der eine Liste von Terminen erstellt wird. Unsere Liste enthält eine Schaltfläche zum Löschen, die wir über einen Ereignishandler verwalten. Dies ist eine spezielle React-Version von onclick. Unser Event-Handler ruft die Funktion handleDelete auf, die lokal für das Submodul 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 für das Tag, das Sie zur Darstellung des Moduls verwenden. Es sieht so aus, als würde ein Attribut an ein HTML-Tag übergeben:

    Anschließend erstellen Sie in der Hauptkomponente eine eigene Methode, um die Änderung des Anwendungsstatus zu verarbeiten. Wenn Sie den Status im Hauptmodul beibehalten, werden Ihre Untermodule effizienter. Es ist auch einfacher, Code zu verwalten, da der größte Teil der Aktion an einem Ort stattfindet.

    Warum sind Hände schwer zu zeichnen?

    05. Lebenszyklusmethoden

    Eines der besten Dinge an React ist die Art und Weise, wie das Rendern Ihrer Module verwaltet wird. Ihre Module müssen sich nicht um die Aktualisierung des DOM kümmern, sondern nur um die Reaktion auf den Status Ihrer Anwendung. Wenn sich der Status ändert, rendert React die Komponenten Ihrer Anwendung neu. Dazu wird eine eigene Version des DOM erstellt, die als virtuelles DOM bezeichnet wird.

    Aber manchmal müssen Sie in der Lage sein, Dinge als Reaktion auf den Rendering-Lebensstil zu tun. Geben Sie Lebenszyklusmethoden ein. Auf diese Weise können Sie React bitten, Aufgaben an verschiedenen Punkten in der Ausführung der Anwendung zu erledigen.

    Es gibt beispielsweise Lebenszyklusmethoden, mit denen Sie externe Daten über AJAX-Anforderungen laden können:

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

    Hier können Sie mit componentDidMount etwas ausführen, nachdem das erste Rendern abgeschlossen ist. Dies ist ein großartiger Ort, um AJAX-Inhalte zu laden, Timer einzurichten und so weiter. Es gibt viele andere Lebenszyklusmethoden, mit denen Sie die Ausführung der Anwendung an verschiedenen Punkten abfangen können. Sie sind aufgrund des virtuellen DOM von React erforderlich, das beim Erstellen von Apps viel Zeit spart.

    Umdenken reagieren

    Das Reagieren erfordert ein Überdenken der Art und Weise, wie Sie mit Webanwendungen arbeiten. Wenn Sie sich jedoch darauf konzentrieren, die Vorteile dieser fünf Gedankenänderungen zu beherrschen, werden Sie schnell feststellen, warum die Bibliothek so unglaublich beliebt geworden ist und eine fantastische Möglichkeit zum Erstellen von Schnittstellen darstellt.

    Dieser Artikel - illustriert von Ray Villalobos - wurde ursprünglich in Ausgabe 286 von net veröffentlicht, dem weltweit meistverkauften Magazin für Webdesigner und Entwickler. Abonnieren Sie net .

    Möchten Sie Ihre Reaktionsfähigkeiten weiter verfeinern?

    Bild mit den Details zu Kristijan Ristovskis Workshop - Lernen, wie man in Reaktion denkt - auf der Generate London vom 19. bis 21. September 2018.

    Kristijan Ristovski gibt vom 19. bis 21. September 2018 auf der Generate London seinen Workshop „Lernen, wie man reagiert“

    Wenn Sie mehr über React erfahren möchten, stellen Sie sicher, dass Sie Ihr Ticket für abgeholt haben Generieren Sie London vom 19. bis 21. September 2018 . Gründung der React Academy, um React auf der ganzen Welt zu unterrichten, und Gründung sizzy.co und ok-google.io Kristijan Ristovski wird seinen Workshop 'Lernen, wie man in React denkt' halten, in dem er die Best Practices von React untersucht und Ihnen Lösungen für echte Probleme beibringt, die beim Erstellen einer App auftreten können.

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

    Zum Thema passende Artikel: