Leren Gutenberg: Reageren 101

0
24

Hoewel Gutenberg is samen met Reageren, de code die we schrijven bent, om aangepaste blokken niet. Het is zeker lijkt op een Reageren onderdeel al, dus ik denk dat het nuttig is om een beetje spelen om bekend te raken met dit soort aanpak. Er is veel te lezen in deze reeks so far, so let ‘ s roll-up de mouwen en iets afkoelen.

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok
  4. De Moderne Syntaxis Van JavaScript
  5. Reageren 101 (Deze Post)
  6. Het opzetten van een Aangepaste webpack (Coming Soon!)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)

Laten we een “Over Mij” – component

We gaan om een enkel Reageren onderdeel dat de updates van de kleur van de achtergrond van een pagina en de intro tekst is gebaseerd op de gegevens die je invoert in een paar velden. “Ik dacht dat dit de bedoeling was om cool te zijn,” hoor ik je al mompelen. Ik geef toe, misschien heb ik oversold, maar we gaan om te leren van sommige kernbegrippen van state-JavaScript dat zal van pas komen als we graven in onze Gutenberg blok.

Voor de referentie, dit is wat we gaan eindigen met:

Aan de slag

Het eerste wat we gaan doen, is vuur CodePen. CodePen gratis gebruikt kan worden, zodat het hoofd en het creëren van een nieuwe Pen.

Volgende, we gaan trek in enkele JavaScript afhankelijkheden. Er zijn drie editor schermen—vind de JS scherm en klik op de instellingen cog. Dit opent een Pen Instellingen modale waar vindt u de sectie getiteld Toevoegen van Externe Scripts/Pennen. Recht op de bodem, er is een Quick-toevoegen selecteer menu. Ga je gang en open die.

Vanuit het menu, selecteert u Reageren. Als dat eenmaal is geselecteerd, opent u het menu en selecteert u ReactDOM. U zult zien dat dit is pre-gevuld sommige tekstvakken.

Ten slotte, hebben wij nodig om onze ES6 code, dus op het menu met de titel JavaScript Preprocessor, selecteer Babel.

Nu, ga je gang en klik op de grote Opslaan En Sluiten knop.

Wat we hebben gedaan is er trek de belangrijkste Reageren JS bibliotheek en ReactDOM bibliotheek. Deze zal ons in staat stellen om te duiken in en schrijven onze code, wat is onze volgende stap.

Setup onze CSS

Laten we het er cool uitziet. Eerst hoewel, laten we setup onze CSS-editor. Het eerste wat we gaan doen instellen voor het compileren van Sass voor ons. Net zoals we dat deden met de JS-editor, klik op de instellingen cog die zal leiden tot de Instellingen van de Pen modal-opnieuw—dit keer met de CSS-instellingen.

Op de top is er een CSS Preprocessor menu. Ga je gang en selecteer SCSS .

Als dat gedaan is, gaan tot het Toevoegen van Externe Stylesheets/Pennen en plak de volgende drie links in tekst-dozen:

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 drie in om ons een reset, een mooie lettertype en een aantal handige vorm stijlen.

Nu dat ze allemaal in te stellen, ga je gang en klik op de “Opslaan & Sluiten” – knop te drukken.

Het toevoegen van een beetje stijl

We zijn alle setup, dus deze stap zou het eenvoudig zijn. Plak de volgende Sass in de CSS-editor:

:root {
–tekst-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: “Werk Sans”, sans-serif;
font-weight: 300;
achtergrond: #f3f3f3;
color: #232323;
}

.over {
breedte: 100%;
height: 100%;
position: absolute;
top: 0;
links: 0;
kleur: var(–tekst-kleur);
overgang: alle 2000ms gemak-in-out;

&__innerlijke {
display: flex;
flex-richting: kolom;
height: 100%;
margin: 0 auto;
padding: 1.2 rem;
}

&__content {
display: flex;
flex-richting: kolom;
rechtvaardiging-inhoud: center;
lijn-items: center;
flex: 1 1 auto;
font-size: 3rem;
line-height: 1.2;

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

&__formulier {
display: flex;
flex-richting: kolom;
lijn-items: center;
padding: 2rem 0;
breedte: 100%;
max-width: 60rem;
margin: 0 auto;

@media(min-width: 32rem) {
flex-richting: rij;
rechtvaardiging-inhoud: in de ruimte tussen;
padding: 2rem;
}

> * {
breedte: 15rem;
}

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

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

label {
display: block;
}
}
}

// Boilerform overrides
.c-selecteer het veld {
en,
&__menu {
breedte: 100%;
}
}

.c-input-veld {
breedte: 100%;
}

.c-label {
kleur: var(–tekst-kleur);
}

Dat is een grote ol’ brok van CSS, en het zal lijken niets is echt gebeurd, maar het is allemaal goed—we gaan niet naar hoeft te maken over CSS voor de rest van deze sectie.

Graven in Reageren

Het eerste wat we gaan doen is Reageren iets te klink. Plak dit in de HTML-editor van uw Pen:

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

Dat is het voor HTML—kan u verder gaan met het maximaliseren van je JS-editor we hebben dus de volledige aandacht.

Laten we beginnen met onze component code, door het creëren van een nieuw exemplaar van een Reageren component door het schrijven van de volgende JavaScript:

klasse AboutMe breidt Reageren.Onderdeel {
}

Wat die code doet is het creëren van een nieuwe AboutMe component en de uitbreiding van Reageren is Onderdeel van de klasse, dat geeft ons een belasting van de code en gereedschappen voor gratis.

Rechts, dus we hebben nog een klasse, en nu moeten we om het te bouwen! Voeg de volgende code tussen haakjes:

constructor(rekwisieten) {
super(rekwisieten);

laten we zelf = deze;
};

We hebben een paar dingen te doen hier, dus ik zal het uitleggen:

constructor is de methode die wordt aangeroepen wanneer u het schrijven van nieuwe AboutMe(), of als u het schrijft <AboutMe /> in uw JSX. Dit bouwt het object. De rekwisieten parameter is iets wat je zult zien dat er veel op Reageren. Dit is de verzameling van eigenschappen die worden doorgegeven aan de component. Bijvoorbeeld: als u schreef <AboutMe name=”Andy” />, je zou in staat zijn om toegang te krijgen in de constructor met rekwisieten.de naam.

super hoe vertellen we het de klasse die we hebben uitgebreid tot bouwen met zijn eigen constructor. U zult zien we ook passeren van de rekwisieten tot het in het geval dat een ouder onderdelen nodig zijn om toegang te krijgen.

Tot slot laten we zelf = dit is een manier van het controleren van het toepassingsgebied van deze. Vergeet niet, want we gebruiken laat, zelf zal alleen beschikbaar zijn in de constructor-functie.

Snelle notitie voor die lezers niet-zo-zeker in JavaScript: ik vond een diepere kijk op de reikwijdte in JavaScript te resulteren in een veel “aha” momenten in mijn leerproces. Ik beveel Kyle Simpson ‘ s Je niet Weet JS boeken reeks (gratis beschikbaar op GitHub!). De Volumes van de opmerking: deze en Object Prototypes en Reikwijdte & Sluitingen. Goed spul, ik beloof het.

We hebben nu bedekt de constructor, laat meer code toevoegen. Na het laten self = deze; regel, plak de volgende code:

zelf.availableColors = [
{
“naam”: “Rood”,
“value”: “#ca3814”
},
{
“name”: “Blauwe”,
“value”: “#0086cc”
},
{
“naam”: “Groen”,
“value”: “#3aa22b”
}
];

Wat wij hebben is er een array van objecten definiëren van onze opties voor het kiezen van uw favoriete kleur. Ga je gang en voeg je eigen als het er al niet!

Uw definitie van de klasse en constructor moet er nu zo uitzien:

klasse AboutMe breidt Reageren.Onderdeel {

constructor(rekwisieten) {
super(rekwisieten);

laten we zelf = deze;

// Stel een lijst met beschikbare kleuren die worden weergegeven in het menu selecteren
zelf.availableColors = [
{
“naam”: “Rood”,
“value”: “#ca3814”
},
{
“name”: “Blauwe”,
“value”: “#0086cc”
},
{
“naam”: “Groen”,
“value”: “#3aa22b”
}
];
};
}

Vrij eenvoudig dus ver, toch? Laten we verder gaan en een aantal initiële waarden aan onze reactieve staat. Voeg het volgende toe na de sluiting van het zelf.availableColors:

// Onze eerste reactieve staat waarden
zelf.staat = {
naam: ‘Foo’,
kleur: jezelf.availableColors[0].waarde
};

Deze eerste instelling van state stelt onze component te maken zowel een naam en een kleur op te laden, waardoor het op zoek gebroken.

Vervolgens voegen we onze render functie. Dit is een pure functie, die niets anders doet dan het maken van de component, gebaseerd op de oorspronkelijke staat of een staat van wijzigingen tijdens het onderdeel in de levenscyclus. Mogelijk hebt u vermoedde het al, maar dit is waar het belangrijkste lichaam van onze JSX leven.

Wacht! Wat is een zuivere functie? Welkom bij functioneel programmeren, een hot topic in het Reageren wereld. Pure functies zijn functies waar, voor input X, de uitgang zal altijd Y. In een “onzuivere” functie, input X kan resulteren in verschillende uitgangen, afhankelijk van de andere onderdelen van het programma. Hier is een CodePen het vergelijken van zuivere en onzuivere functies. Check dit artikel ook uit, voor meer details.

Nu, want er is heel veel aantekeningen in dit één-component, we gaan het kopiëren van de hele partij in onze functie. Voeg het volgende onder uw constructor:

render() {
laten we zelf = deze;

return (
<className=”info” style={ { background: zelf.staat.kleur } }>
de sectie <sectie className=”ongeveer__innerlijke”>
<artikel className=”ongeveer__content”>
{ zelf.staat.naam ? <p>Hallo daar. Mijn naam is { self.staat.naam } en mijn favoriete kleur is { self.getActiveColorName() }</p> : null }
</article>
<form className=” [__formulier ] [ boilerform ]”>
<div>
<label className=”c-label” htmlFor=”name_field”>Jouw naam</label>
<input className=”c-input-veld” type=”text” id=”name_field” waarde={ self.staat.naam } onChange={ self.updateName.bind(zelf) } />
</div>
<div>
<label className=”c-label” htmlFor=”kleurenveld”>Uw favoriete kleur</label>
<div className=”c-selecteer het veld”>
<selecteer className=”c-selecteer het veld__menu” waarde={ self.staat.kleur } onChange={ self.updateColor.bind(zelf) } id=”kleurenveld”>
{ zelf.availableColors.kaart((kleur, index) => {
return (
<option key={ index } value={ color.waarde }>{ color.naam }</option>
);
})}
</select>
<span className=”c-selecteer het veld__decor” aria-hidden=”true” role=”presentatie”>▾</span>
</div>
</div>
</form>
</section>
</main>
);
};

Denkt u misschien iets als: “Heilige koe, is er veel gaande is hier.” Laten we ontleden, dus maak je geen zorgen over het kopiëren van code voor een beetje—ik laat het u weten waar wij naar toe gaan om dat weer te doen. Laten we gewoon focussen op een aantal belangrijke bits voor nu.

In JSX, moet u aan het retourneren van één element, die de onderliggende elementen. Omdat al onze code is verpakt in een <main> tag, we zijn allemaal goed. Op dat <main> tag, je ziet hebben we een expressie in een attribuut, zoals we beschreven in Deel 2. Deze uitdrukking stelt de achtergrond kleur als u de huidige actieve kleur die is ingesteld in onze staat. Deze update als magie, wanneer een gebruiker verandert hun kleur keuze, zonder dat het schrijven van een andere regel van de code voor het in deze render functie. Pretty cool, hè?

Binnen de <article class=”ongeveer__content”> – element, merk je het:

{ zelf.staat.naam ? <p>Hallo daar. Mijn naam is { self.staat.naam } en mijn favoriete kleur is { self.getActiveColorName() }</p> : null }

Deze ternaire operator controleert om te zien of er een naam stellen en maakt een zin met de naam of null. Terug null in JSX is hoe je het vertelt te renderen niets aan de opdrachtgever. Ook in verband met dit fragment: we waren in staat om deze ternaire operator binnen onze JSX omdat wij een uitdrukking door het openen van sommige beugels. Het is een echt nuttige manier van strooien kleine, eenvoudige stukjes display logica binnen uw render functie.

Next up, laten we eens kijken naar een gebeurtenis bindend:

<input className=”c-input-veld” type=”text” id=”name_field” waarde={ self.staat.naam } onChange={ self.updateName.bind(zelf) } />

Als je niet binden van een afspraak aan uw input veld, het zal alleen-lezen. Raak niet in paniek over het vergeten van wel. Reageren behulpzaam waarschuwt u in uw console.

Vergeet niet, zelf is gelijk aan dit, dus wat we doen is het bevestigen van de updateName functie aan de ingang van de onChange-gebeurtenis, maar we zijn ook bindend zelf, zodat wanneer we binnen de updateName functie, deze zal gelijk AboutMe, dat is onze component.

Het laatste wat we nu gaan kijken in de render functie is loops. Hier is het fragment dat maakt de kleur menu:

<selecteer className=”c-selecteer het veld__menu” waarde={ self.staat.kleur } onChange={ self.updateColor.bind(zelf) } id=”kleurenveld”>
{ zelf.availableColors.kaart((kleur, index) => {
return (
<option key={ index } value={ color.waarde }>{ color.naam }</option>
);
}) }
</select>

De waarde en het wijzigen van setup is hetzelfde als het boven de <input / > – element, dus we negeren ze en duiken recht in de loop. Wat we hebben gedaan is een uitdrukking waar we lopen een vrij standaard Array Kaart functie, maar, nog belangrijker, het geeft JSX in elke iteratie, waarbij elke optie te maken met de rest van de JSX.

Bedrading het allemaal

Nu we onze belangrijkste aspecten van de component actief is, moeten we de draad. U zult merken dat uw CodePen niet iets te doen op het moment. Dat komt door twee dingen:

  • We zijn nog niet aangesloten op de component naar de DOM nog niet
  • We hebben nog niet geschreven methoden om het interactief maken

Laten we beginnen met de eerste en voeg onze change event handlers. Voeg de volgende onder uw constructor-functie:

updateName(evt) {
laten we zelf = deze;

zelf.setState({
naam: evt.doel.waarde
})
};

updateColor(evt) {
laten we zelf = deze;

zelf.setState({
kleur: evt.doel.waarde
})
};

Deze twee functies van het verwerken van de onChange gebeurtenissen van de <select> en <input> en stel de waarden in staat met behulp van Reageren is setState functie. Nu dat de waarden zijn in staat, iets dat wordt ingeschreven, wordt de update automatisch. Dit betekent dat de ternaire verklaring, waardoor uw naam en de achtergrond kleur veranderen in real-time, terwijl u typt/selecteren. Geweldig. rechts?

Nu, het zou worden aanbevolen om de code beter DROOG door het combineren van deze twee als één gebeurtenis-handler voor het bijwerken van de desbetreffende staat. Voor deze serie al, laten we de dingen eenvoudig te houden en meer te begrijpen. 😀

Next up, nu nog de laatste methode om onze component. Voeg het volgende onder uw recent toegevoegde update methoden:

// Active naam van een kleur uit de beschikbare kleuren, gebaseerd op state-waarde
getActiveColorName() {
laten we zelf = deze;

retourneren zelf.availableColors.filter(color => kleur.waarde === self.staat.kleur)[0].naam;
};

Deze functie maakt gebruik van een van mijn favoriete JavaScript-array methoden: filter. Met de ES6, we kunnen cherry pick-array van items op basis van hun object waarde in een lijn, die is krachtig spul. Met die kracht, we halen het actieve availableColors item leesbare naam en het terug.

JavaScript array methoden zijn zeer cool en vaak gespot in het Reageren ecosysteem. Sarah Drasner een ernstig geweldige “Array Explorer”—check het hier!

Het bevestigen van de component aan de DOM

Het laatste wat we gaan doen is aansluiten ons onderdeel naar de DOM, met ReactDOM. Wat we doen is te zeggen, “Hey browser, haal mij de <div id=”root”> – element en maken deze Reageren component in.” ReactDOM is het doen van alle magie die maakt dat mogelijk.

ReactDOM is een echt slim pakket dat zich wijzigingen in uw dynamische Reageren onderdelen, berekent wat er moet worden veranderd in de DOM en geldt deze wijzigingen op de meest efficiënt mogelijke manier. Met ReactDOM de renderToString() methode kunt u ook maken van uw Reageren onderdelen van een statische reeks, die vervolgens kan ingevoegd worden op uw pagina met je server-side code. Wat is smart over dit is dat referenties worden toegevoegd zodat wanneer uw front-end pakt een aantal server-rendered Reageren, het zal bepalen welke onderdelen nodig zijn en de hele brok van statische markup dynamisch automatisch. Verdomd slim, hè?

Anyway, terug naar onze Pen. Voeg dit recht op de onderkant van de JS-editor:

// Bevestig ons onderdeel naar de <div id=”root”> – element
ReactDOM.render(<AboutMe / > document.getElementById(‘root’));

Nu, zult u merken dat uw voorbeeldvenster is plotseling tot leven komen! Gefeliciteerd — u schreef een Reageren onderdeel 🎉

Zie de Pen Over Mij Reageren Onderdeel van Andy Bell (@hankchizlja) op CodePen.

Inpakken

In dit deel, je hebt geleerd over reactieve component JavaScript door het schrijven van een Reageren component. Dit is relevant om te leren omdat aangepaste Gutenberg blokken volgen een gelijkaardige setup te Reageren op een onderdeel. Nu heb je een beter begrip van hoe een Reageren component werkt, moet u in staat zijn om te begrijpen hoe een aangepaste Gutenberg blok werkt ook.

Het kostte me een beetje te wikkelen mijn gedachten rond het feit dat, in termen van Gutenberg, Reageren is alleen relevant voor de bouwstenen binnen de admin. In Gutenberg, Reageren functies als een middel van de voorbereiding van de opmaak worden opgeslagen in de database in de post_content kolom. Met behulp van Reageren op de front-end van een WordPress-site om iets op te bouwen als deze zou worden los van wat we zullen doen in deze serie.

De volgende in deze serie gaan we bewerken onze WordPress thema, zodat we kunnen bouwen aan onze aangepaste Gutenberg blok.

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok
  4. De Moderne Syntaxis Van JavaScript
  5. Reageren 101 (Deze Post)
  6. Het opzetten van een Aangepaste webpack (Coming Soon!)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)