Einführung in React, Teil 1

Wir haben in diesem Blog bereits über den neuen Entwicklungsstack von WordPress und die Revolution gesprochen, die damit einhergeht, sowohl für die Plattform selbst als auch für die Entwickler, die jetzt gezwungen sind, neue Dinge zu lernen. Vor nicht allzu langer Zeit habe ich zum Beispiel einen Beitrag veröffentlicht, in dem erklärt wird, wie man das @wordpress/scripts -Paket verwendet, um Gutenberg zu erweitern und seiner Benutzeroberfläche eine Schaltfläche hinzuzufügen. Als Autor liebe ich es, Tutorials zu schreiben, weil ich etwas teilen kann, das ich gut weiß, und ich das Gefühl habe, dass wir alle zusammen lernen können.

Ich denke leider, dass Tutorials ein großes Problem verbergen: Viele von euch folgen ihnen blind, ohne wirklich zu verstehen, was passiert, auch wenn ihr am Ende das richtige Ergebnis erhaltet. Aber den meisten Tutorials fehlt der „Aha-Moment“, der Moment der Einsicht und des Verständnisses, in dem alles in Ihrem Kopf klickt und Sie verstehen, warum die Dinge so sind, wie sie sind.

Deshalb möchte ich heute eine Reihe von Beiträgen mit einer Einführung in React beginnen, um ein wenig Licht ins Dunkel zu bringen. Ich möchte React entmystifizieren und Ihnen helfen, schnell besser darin zu werden. Ich möchte, dass Sie verstehen, warum React so ist, wie es ist, und warum die Dinge so sind, wie sie sind. Ich möchte, dass Sie die Prinzipien hinter React verstehen. Ich möchte, dass Sie besseren Code schreiben.

Funktionale Programmierung

Bevor wir über React sprechen, denke ich, dass es sich lohnt, ein paar Minuten über funktionale Programmierung zu sprechen, da viele der Frameworks, die wir heute verwenden, auf seinen Prinzipien beruhen. Und React (zusammen mit Redux) ist da keine Ausnahme.

Funktionale Programmierung ist ein Programmierparadigma, bei dem Programme durch Anwenden und Zusammensetzen von Funktionen erstellt werden. Sie denken vielleicht, dass es beim „Programmieren“ schon immer um das Erstellen und Ausführen von Funktionen ging, oder? Nicht genau. Tragen Sie mit mir.

Betrachten wir zum Beispiel die objektorientierte Programmierung. In OOP werden Programme erstellt, indem Objekte erstellt und zusammengesetzt werden, die Daten in Form von Attributen oder Feldern und Code in Form von Methoden oder Prozeduren enthalten können. Sehen? Keine Funktionen, sondern Objekte.

Was also macht die funktionale Programmierung so besonders? Nun, es gibt mehrere Aspekte, die funktionale Programmierung charakterisieren: reine Funktionen, referenzielle Transparenz, Unveränderlichkeit, Funktionen als Bürger erster Ordnung, Funktionen höherer Ordnung usw., und ich empfehle, dass Sie sie selbst studieren (oder, wenn Sie möchten, mich können wir in zukünftigen Beiträgen darüber sprechen). Aber um diesen Beitrag kurz zu halten, konzentrieren wir uns heute einfach auf eine Funktion …

Reine Funktionen

Eines der Dinge, die die funktionale Programmierung von anderen Programmierparadigmen unterscheidet, ist die Art und Weise, wie sie Funktionen definiert und mit ihnen arbeitet. In FP sind Funktionen rein, was bedeutet, dass sie die folgenden zwei Bedingungen erfüllen:

1. Es liefert immer das gleiche Ergebnis, wenn die gleichen Argumente gegeben werden
2. Es hat keine Nebenwirkungen

Dies ist beispielsweise keine reine Funktion:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

weil es mehrere nebenwirkungen hat. Es modifiziert nämlich eine globale Variable (Nebeneffekt 1) und gibt Text an die Konsole aus (Nebeneffekt 2).

Eine weitere unreine Funktion ist die folgende:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

denn wie Sie sehen können, führt es nicht immer zum gleichen Ergebnis. Jedes Mal, wenn man createElement mit einem bestimmten Namen aufruft, erhält man ein anderes Ergebnis. Schließlich wird das id -Attribut über Math.random generiert …

Reine Funktionen sind aus mehreren Gründen großartig: Sie sind einfach zu verstehen und enthalten keine Überraschungen. Sie geben ihnen einige Eingaben, sie geben Ihnen eine bestimmte Ausgabe zurück. Und das ist großartig, denn diese Art, die Funktionen zu definieren, bringt sie unserem mathematischen Verständnis dessen, was eine Funktion ist, näher: Sie bildet jede Eingabe auf eine genau definierte Ausgabe ab.

Komponenten in Reaktion

Was haben reine Funktionen und funktionale Programmierung zu tun? Mal sehen, ob wir ihre Beziehung herleiten können …

Wie Sie in der Dokumentation nachlesen können, ist React eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen durch kleine Codeteile namens „Komponenten“. Dies ist die erste Komponente, die Sie in ihrem Tutorial sehen werden:

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

Ganz einfach und sogar selbsterklärend, oder?

Aber warten Sie eine Sekunde! Das sieht überhaupt nicht nach einer „reinen Funktion“ aus. Tatsächlich ist dies eine Klasse, die mit objektorientierter Programmierung implementiert wird.

Ja, du hast vollkommen Recht. Das sieht nicht gut aus … haben wir unsere Zeit damit verschwendet, über funktionale Programmierung zu reden?

Sehen Sie sich die vorherige Komponente noch einmal an. Wie sieht es aus? Was tut es? Nun, es ist eine Klasse mit einer einzigen Methode ( render ), die etwas HTML generiert, um eine Einkaufsliste zu rendern. Diese Einkaufsliste ist immer gleich (duh, es ist ein einfaches Beispiel), aber sie hat einen variablen Teil: ihren Titel, wobei die Klasse eine interne Eigenschaft this.props.name zu verwenden scheint.

Wenn wir also noch nichts über React wissen und uns nur den Code ansehen und versuchen, daraus abzuleiten, was es tut, sehen wir Folgendes:

1. Die Komponente kann einen „Namen“ erhalten. Wir wissen nicht genau, wie es zu diesem Namen kommt, aber wir wissen, dass es so ist. Immerhin ist this.props.name ein ziemlich guter Hinweis.
2. Die render -Methode erzeugt etwas HTML, um eine (statische) Liste von „Einkaufselementen“ zu rendern: Instagram , WhatsApp und Oculus .
3. Das resultierende HTML ist nicht zu 100 % statisch; Es verwendet einen „Namen“, der je nach Wert einer Eigenschaft variieren kann.

Sehen Sie, wohin ich gehe?

Komponentenfunktionen in React

Wir haben gerade eine reine Funktion beschrieben! Wir haben eine Komponente, die einen Wert ( name ) annimmt und eine wohldefinierte Ausgabe (den HTML-Code) erzeugt. Bedeutet dies, dass wir uns von OOP entfernen und die vorherige Komponente als Funktion implementieren können?

Sicher! Die übermäßig komplizierte Klasse, die wir gerade gesehen haben, kann als einfachere und leichter verständliche reine Funktion umgeschrieben werden, die props empfängt und HTML zurückgibt:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

Das ist genau dasselbe, was wir hatten, aber viel, viel einfacher. Ich wage sogar zu sagen, dass es das Einfachste ist, was ich als Programmierer implementieren kann: Eine React-Komponente ist nichts anderes als eine Funktion, die einige Props aufnimmt und ein HTML-Out erzeugt .

Und genau das ist die erste Lektion, die Sie lernen müssen: Ihre React-Komponente ist eine reine Funktion : Requisiten rein, HTML raus. Eine Komponente darf keine asynchronen Funktionen zum Abrufen von Daten ausführen (da dies Nebeneffekte sind). Eine Komponente kann die Eigenschaften, die sie erhält, auch nicht ändern (Unveränderlichkeit).

Also noch einmal: Eine Komponente nimmt einfach einige Requisiten auf und erzeugt die HTML-Ausgabe. Zeitraum.

Aber warten Sie, wenn eine Komponente so einfach ist, wie können wir etwas Nützliches damit machen? Bleiben Sie dran, denn darüber sprechen wir im nächsten Beitrag!

Vorgestelltes Bild von Josiah Weiss auf Unsplash.