Lernen Gutenberg: Reagieren 101

0
24

Obwohl Gutenberg ist zusammen mit Reagieren, der code, den wir schreiben um eigene Bausteine ist das nicht. Es ist sicherlich ähnelt einem Reagieren Komponente, obwohl, so dass ich denke, es ist nützlich, um ein wenig zu spielen, um vertraut mit dieser Art von Ansatz. Es gibt eine Menge zu Lesen, die in dieser Serie so weit, so let ‘ s roll-up-ärmel und machen Sie etwas kühl.

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block
  4. Moderne JavaScript-Syntax
  5. Reagieren 101 (Dieser Beitrag)
  6. Einrichten einer Benutzerdefinierten webpack (Kommt Bald!)
  7. Eine Eigene “Karte” Block (Kommt Bald!)

Wir machen eine “Über Mich” – Komponente

Wir machen eine einzelne Reagieren Komponente, die aktualisiert die Hintergrundfarbe einer Seite und dem intro-text basiert auf Daten, die Sie Eingabe in ein paar von Feldern. “Ich dachte, das war ja cool”, höre ich Sie alle Murmeln. Ich gebe zu, vielleicht habe ich überverkauft, aber wir gehen zu lernen, einige zentrale Konzepte von state-driven JavaScript , die in handliches kommen, wenn wir Graben in unserer Gutenberg-block.

Für Referenz, das ist, was wir am Ende mit:

Erste Schritte

Das erste, was wir tun sollten, ist, Feuer auf CodePen. CodePen kann kostenlos genutzt werden, so gehen Sie Kopf über es und erstellen Sie einen neuen Pen.

Nächste, wir ziehen in einigen JavaScript-Abhängigkeiten. Es gibt drei editor-Bildschirmen—finden Sie die JS-Bildschirm und klicken Sie auf die Einstellungen Rädchen. Es öffnet sich ein Stift-Einstellungen modal-dort finden Sie den Abschnitt Hinzufügen von Externen Scripts/Stifte. Rechts an der Unterseite, theres eine Schnell-hinzufügen – Menü auswählen. Gehen Sie voran und öffnen Sie diese.

Wählen Sie aus dem Menü Reagieren. Sobald dies ausgewählt ist, öffnen Sie das Menü und wählen Sie ReactDOM. Sie werden feststellen, dass diese bereits vor-gefüllt einige Textfelder.

Schließlich, die wir brauchen, damit unsere ES6-code, also in dem Menü mit dem Titel JavaScript-Präprozessor, wählen Sie Babel.

Nun, gehen Sie vor und klicken Sie auf den großen Speichern & Schließen – button.

Was wir getan haben, es ist, ziehen Sie das Haupt-Reagieren JS-Bibliothek und ReactDOM Bibliothek. Diese wird es uns ermöglichen, zu Tauchen und schreiben unseren code, was ist unser Nächster Schritt.

Setup unserem CSS

Wir machen es cool Aussehen. Zunächst aber lassen Sie die setup-unsere CSS-editor. Das erste, was wir tun sollten, ist, setzen Sie ihn bis zu kompilieren Sass für uns. Nur wie wir es mit der JS-editor, klicken Sie auf die Einstellungen Rädchen die das Stift-Einstellungen modal erneut—dieses mal mit den CSS-Einstellungen.

An der Spitze, es ist ein CSS-Präprozessor – Menü. Gehen Sie voran und wählen Sie SCSS von dort.

Wenn das erledigt ist, gehen, um das Hinzufügen von Externen Stylesheets/Stifte und fügen Sie die folgenden drei links in separate text-Boxen:

https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css
https://fonts.googleapis.com/css?family=Work+Sans:300
https://rawgit.com/hankchizljaw/boilerform/master/dist/css/boilerform.min.css

Die drei in Auftrag geben Sie uns eine reset -, eine ausgefallene schriftart und einige hilfreiche form-styles.

Jetzt, wo Sie bereit sind, gehen Sie vor und klicken Sie auf “Speichern & Schließen” – button wieder.

Hinzufügen ein bisschen Stil

Wir sind alle eingerichtet, so dass dieser Schritt sollte leicht sein. Fügen Sie den folgenden Sass in der CSS-editor:

:root {
–text-color: #f3f3f3;
}

* {
box-sizing: border-box;
}

html – {
height: 100%;
font-size: 16px;
}

body {
height: 100%;
position: relative;
font-size: 1rem;
line-height: 1.4;
font-family: “Arbeit Sans”, sans-serif;
font-weight: 300;
background: #f3f3f3;
color: #232323;
}

.über {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
Farbe: var(–text-Farbe);
übergang: alle 2000ms ease-in-out;

&__inner {
display: flex;
flex-direction: column;
height: 100%;
margin: 0 auto;
Polsterung: 1.2 rem;
}

&__Inhalt {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 1 auto;
font-size: 3rem;
line-height: 1.2;

> * {
max-width: 30ch;
}
}

&__form {
display: flex;
flex-direction: column;
align-items: center;
Polsterung: 2rem 0;
width: 100%;
max-width: 60rem;
margin: 0 auto;

@media(min-width: 32rem) {
flex-direction: row;
justify-content: space-between;
Polsterung: 2rem;
}

> * {
Breite: 15rem;
}

> * + * {
margin: 1rem 0 0 0;

@media(min-width: 32rem) {
margin: 0;
}
}

label {
display: block;
}
}
}

// Boilerform überschreibt
.c-select-Feld {
&,
&__Menü {
width: 100%;
}
}

.c-input-field {
width: 100%;
}

.c-label {
Farbe: var(–text-Farbe);
}

Das ist eine große ol’ Stück des CSS, und es wird Aussehen hat nichts wirklich passiert ist, aber es ist alles gut—wir gehen nicht sorgen zu machen über das CSS für den rest dieses Abschnitts.

Graben in Reagieren

Das erste, was wir tun, ist geben Sie Reagieren etwas zu Riegel. Fügen Sie diesen in den HTML-Code editor des Stiftes:

<div id=”root”></div>

Das ist es auch für HTML—Sie können gehen Sie vor und maximieren Sie Ihre JS-editor, also wir haben die komplette Fokus.

Beginnen wir mit der Komponente code, durch erstellen einer neuen Instanz von a Reagieren Komponente, indem Sie den folgenden JavaScript-Code:

Klasse AboutMe erstreckt Reagieren.Komponente {
}

Was dieser code macht, ist das erstellen einer neuen AboutMe-Komponente und die Erweiterung Reagieren, Component-Klasse, die gibt uns eine Last von code und Tools für die Kostenlose.

Richtig, wir haben also eine Klasse, und jetzt müssen wir bauen es! Fügen Sie den folgenden code innerhalb der Klammern:

Konstruktor(props) {
super(props);

lassen self = this;
};

Wir haben ein paar Dinge hier, also werde ich erklären:

der Konstruktor ist die Methode, die aufgerufen wird, wenn Sie schreiben neue AboutMe(), oder wenn Sie schreiben, <AboutMe /> in Ihrem JSX. Diese baut das Objekt. Die Requisiten parameter ist etwas, das Sie sehen, eine Menge in Reagieren. Dies ist die Auflistung von Eigenschaften, die übergeben werden in der Komponente. Zum Beispiel: wenn Sie schrieb <AboutMe name=”Andy” />, Sie würde in der Lage sein, um es in Ihrem Konstruktor mit Requisiten.name.

super ist, wie wir sagen, die Klasse, die wir haben, verlängert zu konstruieren, mit eigener Konstruktor. Du wirst sehen, wir sind auch die übergabe der Requisiten, um es im Falle eines übergeordneten Komponenten zugreifen müssen.

Schließlich lassen sich selbst = dies ist eine Möglichkeit der Steuerung der Geltungsbereich dieser. Denken Sie daran, denn wir arbeiten mit lassen, sich selbst erst in der Konstruktor-Funktion.

Kurzer Hinweis für jene Leser, die nicht so zuversichtlich in JavaScript: fand ich einen tieferen Einblick in die scope in JavaScript in der Folge eine Menge “aha” – Momente in meinem lernen. Ich empfehle Kyle Simpson Sie nicht Wissen, JS-Buch-Serie (frei verfügbar auf GitHub!). Volumen Anmerkung: dies-und Objekt-Prototypen und Scope & Closures. Gute Sachen, das verspreche ich.

Jetzt haben wir behandelt, der Konstruktor fügen wir etwas code, um es. Nach der let self = this; Zeile, fügen Sie den folgenden code:

selbst.availableColors = [
{
“name”: “Rot”,
“Wert”: “#ca3814”
},
{
“name”: “Blau”,
“Wert”: “#0086cc”
},
{
“name”: “Grün”,
“Wert”: “#3aa22b”
}
];

Was wir haben, es ist ein array von Objekten, die definieren, unsere Optionen für die Kommissionierung Ihre Lieblings-Farbe. Gehen Sie voran und fügen Sie Ihre eigenen, wenn es nicht bereits vorhanden ist!

Die Klassendefinition und der Konstruktor sollte nun wie folgt Aussehen:

Klasse AboutMe erstreckt Reagieren.Komponente {

Konstruktor(props) {
super(props);

lassen self = this;

// Eine Liste der verfügbaren Farben, machen Sie im select-Menü
selbst.availableColors = [
{
“name”: “Rot”,
“Wert”: “#ca3814”
},
{
“name”: “Blau”,
“Wert”: “#0086cc”
},
{
“name”: “Grün”,
“Wert”: “#3aa22b”
}
];
};
}

Ziemlich einfach so weit, richtig? Lassen Sie uns bewegen auf und setzen Sie zunächst einige Werte für unsere reaktiven Zustand. Fügen Sie den folgenden nach dem schließen von selbst.availableColors:

// Unsere anfänglichen reaktiven Zustand Werte
selbst.state = {
name: ‘Foo’,
Farbe: selbst.availableColors[0].Wert
};

Diese Initiale Einstellung der Staat ermöglicht, dass unsere Komponente für die Darstellung sowohl einen Namen und eine Farbe, die auf Last, die verhindert, dass es aus dem Blick gebrochen.

Als Nächstes fügen wir unsere render-Funktion. Dies ist eine Reine Funktion, die nichts tut, sondern machen die Komponente basiert auf dem ursprünglichen Staat, oder jeder Staat, der den Veränderungen in der Komponenten-Lebenszyklus. Sie haben vielleicht schon erraten, aber dies ist, wo der Hauptteil unserer JSX Leben.

Warten Sie, bis! Was ist eine Reine Funktion? Willkommen in die funktionale Programmierung, ein heißes Thema in der Welt Reagieren. Reine Funktionen sind Funktionen, bei denen für die Eingabe X, die Ausgabe wird immer Y. In einem “unreinen” Funktion Eingang X kann dazu führen, dass verschiedene Ausgänge, die je andere Teile des Programms. Hier ist ein CodePen Vergleich von reinen und unreinen Funktionen. Probiert diesen Artikel aus, zu, für mehr details.

Nun, da gibt es eine Menge von markup-Symbole in diesem einzigen Komponente, wir kopieren das ganze in unserer Funktion. Fügen Sie den folgenden Konstruktor:

render() {
lassen self = this;

return (
<main className=”about” style={ { hintergrund: selbst.Zustand.Farbe } }>
<section className=”über__inner”>
<Artikel className=”über__content”>
{ self.Zustand.name ? <p>Hallo. Mein name ist { self.Zustand.name }, und meine Lieblings-Farbe ist { self.getActiveColorName() }</p> : null }
</article>
<form className=”[ über die__ – form ] [ boilerform ]”>
<div>
<label className=”c-label” htmlFor=”name_field”>Ihr name</label>
<input className=”c-input-field” type=”text” id=”name_field” Wert={ self.Zustand.name } onChange={ self.updateName.bind(self) } />
</div>
<div>
<label className=”c-label” htmlFor=”color_field”>Ihre Lieblingsfarbe</label>
<div className=”c-select-field”>
<select className=”c-select-Feld__im Menü” value={ self.Zustand.color } onChange={ self.updateColor.bind(self) } id=”color_field”>
{ self.availableColors.Karte((Farbe, index) => {
return (
<option key={ index } Wert={ color.Wert }>{ Farbe.name }</option>
);
})}
</select>
<span className=”c-select-Feld__Dekor” aria-hidden=”true” role=”presentation”>▾</span>
</div>
</div>
</form>
</section>
</main>
);
};

Sie können sich denken, so etwas wie: “Heilige Kuh, es gibt eine Menge Los hier.” Let ‘ s sezieren, also Mach dir keine sorgen über das kopieren von code für ein bisschen—ich lasse Sie wissen, wohin wir gehen, das wieder zu tun. Lasst uns einfach konzentrieren Sie sich auf einige Schlüssel-bits für jetzt.

In JSX, müssen Sie ein einzelnes element zurückgeben, die Kind-Elemente. Weil alle unsere code ist verpackt in ein <main> – tag, wir sind alle gut dort. Auf das <main> – tag, du wirst sehen, wir haben einen Ausdruck in einem Attribut, wie wir in Teil 2. Dieser Ausdruck legt die Hintergrundfarbe als die aktuell aktive Farbe, die in unserem Staat. Dieses update erscheint wie Magie, wenn ein Benutzer ändert Ihre Farbe Wahl, ohne uns mit zu schreiben, eine andere Linie der code für die es in diesem render-Funktion. Ziemlich cool, nicht wahr?

Innerhalb des <article class=”über__content”> – element, das werden Sie feststellen:

{ self.Zustand.name ? <p>Hallo. Mein name ist { self.Zustand.name }, und meine Lieblings-Farbe ist { self.getActiveColorName() }</p> : null }

Dieser ternäre operator überprüft, um zu sehen, ob es einen Namen und macht entweder einen Satz mit den Namen, oder null. Null zurückgeben in JSX ist, wie Sie sagen, es zu Rendern nichts an den client. Auch im Zusammenhang mit diesem snippet: wir waren in der Lage, die zur Ausführung dieser ternäre operator in unserem JSX, weil wir erstellt einen Ausdruck ein, nach dem öffnen einige Klammern. Es ist wirklich hilfreich, Beregnung kleine, einfache bits der Anzeige-Logik in deine render-Funktion.

Als Nächstes schauen wir uns an ein Ereignis binden:

<input className=”c-input-field” type=”text” id=”name_field” Wert={ self.Zustand.name } onChange={ self.updateName.bind(self) } />

Wenn Sie nicht binden, ein Ereignis im input-Feld, es werden nur gelesen werden. Keine Panik, vergessen wenn. Reagieren hilfsbereit, warnt Sie in Ihre Konsole.

Denken Sie daran, sich selbst gleich ist, also das, was wir tun, ist die Befestigung der updateName-Funktion, um die Eingabe der onChange-Ereignis, aber wir sind auch dann verbindlich, selbst, damit, dass, wenn wir innerhalb der updateName Funktion, diese wird gleich AboutMe, die unsere Komponente.

Das Letzte, was wir jetzt betrachten werden, in der render-Funktion loops. Hier ist das snippet macht, dass das Menü Farbe:

<select className=”c-select-Feld__im Menü” value={ self.Zustand.color } onChange={ self.updateColor.bind(self) } id=”color_field”>
{ self.availableColors.Karte((Farbe, index) => {
return (
<option key={ index } Wert={ color.Wert }>{ Farbe.name }</option>
);
}) }
</select>

Der Wert und ändern Sie das setup ist das gleiche wie oben <input / > – element, also ignorieren wir Sie und Tauchen Sie direkt in die Schleife. Was wir getan haben ist, öffnen Sie einen Ausdruck, bei der wir eine ziemlich standard-Array-Map-Funktion, aber, was noch wichtiger ist, es gibt JSX in jeder iteration, die es ermöglicht jede option zum Rendern mit dem rest der JSX.

Verdrahtung es alle bis

Nun, wir haben unsere Kern-Aspekte der Komponente ausgeführt, die wir brauchen, es zu verdrahten. Sie werden bemerken, dass Ihre CodePen ist nicht etwas zu tun im moment. Das ist, weil zwei Dinge:

  • Wir haben noch nicht angebracht die Komponente der DOM noch
  • Wir haben nicht geschrieben alle Methoden, die machen es interaktive

Beginnen wir mit den ehemaligen und fügen Sie unsere change-Ereignis-Handler. Fügen Sie den folgenden unter Ihrem Konstruktor-Funktion:

updateName(evt) {
lassen self = this;

selbst.setState({
name: evt.Ziel.Wert
})
};

updateColor(evt) {
lassen self = this;

selbst.setState({
Farbe: evt.Ziel.Wert
})
};

Diese beiden Funktionen verarbeiten die onChange-Ereignisse von <select> und <input> und setzen Sie Ihre Werte in den Staat mit Reagieren die setState-Funktion. Nun, dass die Werte in Staat, alles, abonniert Sie automatisch aktualisieren. Dies bedeutet, dass die ternäre Aussage macht, dass Ihr name und die Hintergrundfarbe zu ändern, in Echtzeit, während Sie Sie eingeben/auswählen. Genial. richtig?

Nun, es würde empfohlen werden, um Ihren code mehr TROCKEN durch die Kombination dieser beiden als ein change-Ereignis-handler, der die updates des jeweiligen Staates. Für diese Serie, obwohl, wir halten die Dinge einfach und verständlich. 😀

Als Nächstes fügen wir die Letzte Methode, um unsere Komponente. Fügen Sie Folgendes unter Ihren zuletzt Hinzugefügt-update-Methoden:

// Return-aktive Farbe die Namen von verfügbaren Farben, basierend auf state-Wert
getActiveColorName() {
lassen self = this;

return self.availableColors.filter(Farbe = > “Farbe”.Wert === selbst.Zustand.Farbe)[0].name;
};

Diese Funktion verwendet eine meiner Lieblings-JavaScript-array Methoden: filter. Mit ES6, können wir cherry pick-array-Elemente basierend auf Ihrem Objekt value in eine Zeile, das ist mächtig Zeug. Mit dieser macht, können wir wählen die gerade aktive availableColors Element für Menschen lesbaren Namen und senden Sie es zurück.

JavaScript array-Methoden sind sehr cool und meist entdeckt im ökosystem Reagieren. Sarah Drasner machte ernst erstaunlich “Array Explorer”—check it out hier!

Die Befestigung der Komponente an der DOM –

Das Letzte, was wir tun sollten, ist, befestigen Sie unser Komponente, um den DOM, mit ReactDOM. Was wir machen, ist, zu sagen, “Hey browser, hol mir den <div id=”root”> – element und machen diese Reagieren Komponente.” ReactDOM tun all die Magie, die macht das möglich.

ReactDOM ist eine wirklich smart Paket, mit dem sich änderungen in Ihrer dynamischen Komponenten Reagieren, berechnet, was verändert werden muss in der DOM-und wendet diese änderungen in möglichst effizienter Art und Weise. Mit ReactDOM ist renderToString () – Methode, Sie können auch dazu führen, dass Ihre Komponenten Reagieren, um eine statische Zeichenfolge, die eingefügt werden, um Ihre Seite mit dem server-seitigen code. Was ist smart daran ist, dass Verweise sind Hinzugefügt, so dass wenn Ihre front-end-picks, einige server gerendert Reagieren, dann funktioniert es, welche Komponenten sind notwendig und machen das ganze Stück von statischen markup dynamisch automatisch. Verdammt schlau, nicht wahr?

Wie auch immer, zurück zu unserem Stift. Fügen Sie diese rechts unten auf dem JS-editor:

// Anfügen unser Komponente, um das <div id=”root”> – element
ReactDOM.render(<AboutMe />, document.getElementById(‘root’));

Jetzt, Sie feststellen, dass Ihre Vorschau-Fenster ist plötzlich lebendig werden! Herzlichen Glückwunsch — Sie schrieb gerade einen Reagieren Komponente 🎉

Finden Sie den Stift Über Mich Reagieren Komponente von Andy Bell (@hankchizlja) auf CodePen.

Zusammenfassung

In diesem Teil haben Sie gelernt, über reaktive, Komponente, JavaScript, schreiben einen Reagieren Komponente. Dies ist wichtig für Ihr lernen, da Brauch Gutenberg-Blöcke Folgen einem sehr ähnlichen setup auf einen Reagieren Komponente. Nun, du hast ein besseres Verständnis, wie eine Reagieren Komponente funktioniert, sollten Sie in der Lage sein zu verstehen, wie eine benutzerdefinierte Gutenberg-block funktioniert auch.

Es hat mich ein bisschen zu wickeln meiner Meinung um die Tatsache, dass, in Bezug auf die Gutenberg -, Reagieren, ist nur die relevanten Bausteine innerhalb des admin. In Gutenberg, zu Reagieren, Funktionen als Mittel zur Vorbereitung der markup-Code in der Datenbank gespeichert werden, die in der Spalte post_content. Mit Reagieren auf das front-end des WordPress-Website zu bauen, so etwas wie diese wäre getrennt von dem, was wir tun werden, in dieser Serie.

Als Nächstes in dieser Reihe, wir Bearbeiten unsere WordPress-theme so, dass wir bauen können, unsere benutzerdefinierte Gutenberg-block.

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block
  4. Moderne JavaScript-Syntax
  5. Reagieren 101 (Dieser Beitrag)
  6. Einrichten einer Benutzerdefinierten webpack (Kommt Bald!)
  7. Eine Eigene “Karte” Block (Kommt Bald!)