Læring Gutenberg: Reagerer 101

0
29

Selv om Gutenberg er satt sammen med Reagere, den koden vi skriver for å lage tilpassede blokker som ikke er det. Det absolutt ligner en Reagerer komponent selv, så jeg tror det er nyttig å ha en liten lek til å bli kjent med denne form for tilnærming. Det er blitt mye lesing i denne serien så langt, så la oss brette opp ermene og gjøre noe kult.

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk
  4. Moderne JavaScript Syntaks
  5. Reagerer 101 (Dette Innlegget)
  6. Sette opp en Tilpasset webpack (Kommer Snart!)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)

La oss gjøre en “Om Meg” – komponenten

Vi kommer til å lage en enkel Reagere komponent som oppdateringer bakgrunnsfargen på en side og intro tekst basert på dataene du skriver inn et par felt. “Jeg trodde dette var ment å være kul,” jeg hører du alle mutter. Jeg skal innrømme, jeg har oversolgt det, men vi kommer til å lære noen sentrale begrepene av state-drevet JavaScript som vil komme godt med når vi grave i vår Gutenberg-blokk.

For referanse, og dette er hva vi kommer til å ende opp med:

Komme i gang

Det første vi skal gjøre er å fyre opp CodePen. CodePen kan brukes gratis, så gå head over det og opprette en ny Penn.

Neste, vi kommer til å trekke i noen JavaScript-avhengigheter. Det er tre redaktør skjermer—finn de JS-skjermen og klikker på innstillinger-cog. Dette vil åpne opp en Penn Innstillinger modal hvor du finner avsnittet Legge til Eksterne Skript/Penner. Helt på bunnen, det er en Quick-legge velg meny. Gå videre og åpne opp.

Fra menyen velger du Reagerer. Når det er valgt, åpne menyen og velg ReactDOM. Du vil se at dette har pre-fylt noen tekst i bokser.

Til slutt, vi må aktivere våre ES6 koden, så på menyen med tittelen JavaScript Preprosessor, velger Babel.

Nå, gå videre og klikk på den store Lagre & Lukk – knappen.

Hva vi har gjort, det er trekk de viktigste Reagere JS bibliotek og ReactDOM bibliotek. Disse vil gjøre oss i stand til å dykke i og skrive koden vår, som er vår neste trinn.

Oppsett våre CSS

La oss få det til å se kult. Først opp selv, la oss oppsett våre CSS editor. Det første vi skal gjøre er å sette den opp til å utarbeide Sass for oss. Akkurat som vi gjorde med JS-redaktør, klikk på innstillinger-cog som vil ta opp Pennen Innstillinger modal igjen—denne gangen med CSS-innstillinger.

På toppen, det er en CSS-Preprosessor – menyen. Gå videre og velg SCSS fra det.

Når det er gjort, kan du gå ned å Legge til Eksterne Stilark/Penner og lim den inn i følgende tre lenker i separate tekst-bokser:

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

De tre for å gi oss en reset, en fancy font og noen nyttige form stiler.

Nå som de er alle satt, gå videre og klikk på “Lagre Og Lukk” – knappen igjen.

Å legge til litt stil

Vi er alle oppsett slik dette trinnet bør være lett. Lim inn følgende Sass i CSS editor:

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

* {
safe-dimensjonering: border-box;
}

html {
høyde: 100%;
font-size: 16px;
}

body {
høyde: 100%;
position: relative;
font-size: 1rem;
line-height: 1.4;
font-family: “Arbeid Sans”, sans-serif;
font-vekt: 300;
bakgrunn: #f3f3f3;
color: #232323;
}

.om {
bredde: 100%;
høyde: 100%;
position: absolute;
øverst: 0;
venstre: 0;
farge: var(–tekst-farge);
overgang: alle 2000ms letthet-i-ut;

&__indre {
skjerm: flex;
flex-retning: kolonne;
høyde: 100%;
margin: 0 auto;
polstring: 1.2 rem;
}

&__innhold {
skjerm: flex;
flex-retning: kolonne;
rettferdiggjøre-innhold: center;
juster-elementer: center;
flex: 1 1 automatisk;
font-size: 3rem;
line-height: 1.2;

> * {
maks bredde: 30ch;
}
}

&__form {
skjerm: flex;
flex-retning: kolonne;
juster-elementer: center;
polstring: 2rem 0;
bredde: 100%;
maks bredde: 60rem;
margin: 0 auto;

@media(min-width: 32rem) {
flex-retning: rad;
rettferdiggjøre-innhold: plass-mellom;
polstring: 2rem;
}

> * {
bredde: 15rem;
}

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

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

label {
display: block;
}
}
}

// Boilerform overstyrer
.c-velg-feltet {
og,
&__- menyen {
bredde: 100%;
}
}

.c-input-feltet {
bredde: 100%;
}

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

Det er en stor ol’ klump av CSS, og det vil se ut som ingenting virkelig har skjedd, men det er alt bra—vi kommer ikke til å ha å bekymre deg for CSS for resten av dette avsnittet.

Graving til å Reagere

Det første vi skal gjøre er å gi Reagere noe å klinke til. Lim dette inn i HTML-redigeringsprogram for Penn:

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

Det er det for HTML—kan du gå videre og maksimere din JS editor, slik at vi har fått fullstendig fokus.

La oss starte vårt komponent-kode, ved å opprette en ny instans av et Reagere komponent ved å skrive følgende JavaScript:

klasse AboutMe strekker seg til å Reagere.Komponent {
}

Hva denne koden gjør er å opprette en ny AboutMe komponent og utvide Reagerer s Komponent klasse, noe som gir oss en last av kode, og verktøy for gratis.

Høyre, så vi har en klasse, og nå trenger vi for å lage den! Legg til følgende kode, inne i parentes:

constructor(props) {
super(props);

la self = denne;
};

Vi har et par ting her, så jeg skal forklare hver:

konstruktør er en metode som kalles det når du skriver nye AboutMe(), eller hvis du skriver <AboutMe /> i JSX. Dette konstruerer objektet. Den rekvisitter parameteren er noe du vil se en masse i å Reagere. Dette er samling av egenskaper som er gått over i komponenten. For eksempel: hvis du har skrevet <AboutMe name=”Andy” / > du vil være i stand til å få tilgang til den i din konstruktør med rekvisitter.navnet.

super er hvordan vi forteller klassen at vi har utvidet til å bygge ut med egen constructor. Vil du se vi er også passerer rekvisitter opp til det i tilfelle noen overordnede komponenter trenger for å få tilgang til dem.

Til slutt la self = dette er en måte å kontrollere omfanget av dette. Husk, fordi vi bruker la, selv bare vil være tilgjengelig i constructor funksjon.

Rask kommentar for de lesere som ikke er så trygg i JavaScript: jeg fant en dypere titt på omfanget i JavaScript for å resultere i en rekke “aha” opplevelser i min undervisning. Jeg anbefaler Kyle Simpson ‘ s Du ikke Vet JS reserve-serien (gratis tilgjengelig på GitHub!). Mengder merk: denne og Objekt Prototyper og Omfang Og Nedleggelser. Gode ting, jeg lover.

Nå har vi dekket konstruktør, la oss legge til litt mer koden til det. Etter det la self = denne; linje, og lim inn følgende kode:

selvet.availableColors = [
{
“name”: “Red”,
“value”: “#ca3814”
},
{
“name”: “Blå”,
“value”: “#0086cc”
},
{
“name”: “Grønn”,
“value”: “#3aa22b”
}
];

Hva har vi fått det finnes en rekke gjenstander som definerer våre alternativer for å velge din favoritt farge. Gå videre og legge inn dine egne hvis det ikke allerede er det!

Klassen din definisjon og constructor skal nå se slik ut:

klasse AboutMe strekker seg til å Reagere.Komponent {

constructor(props) {
super(props);

la self = denne;

// Setter opp en liste over tilgjengelige farger som kan gjengis i den velg meny
selvet.availableColors = [
{
“name”: “Red”,
“value”: “#ca3814”
},
{
“name”: “Blå”,
“value”: “#0086cc”
},
{
“name”: “Grønn”,
“value”: “#3aa22b”
}
];
};
}

Ganske grei, så langt, ikke sant? La oss gå videre og sette noen initielle verdier til våre reaktiv tilstand. Legg til følgende i etterkant av seg selv.availableColors:

// Sett vår første reaktiv tilstand verdier
selvet.tilstand = {
name: ‘Foo’,
farge: selvstendig.availableColors[0].verdi
};

Denne innledende innstilling av staten gjør våre komponent for å gjengi både et navn og en farge på belastning, noe som hindrer det fra å se brutt.

Neste, vil vi legge til vår gjengi funksjon. Dette er en ren funksjon, som gjør ingenting, men gjengi component basert på den første stat eller enhver stat kan endres i løpet av komponent livssyklus. Du har kanskje gjettet det allerede, men det er der hoveddelen av våre JSX liv.

Vente! Hva er en ren funksjon? Velkommen til funksjonell programmering, et hett tema i den Reagerer verden. Ren funksjoner der, for input X, produksjonen vil alltid være Y. I en “urene” – funksjonen, inngang X kan resultere i forskjellige utganger, og er avhengig av andre deler av programmet. Her er en CodePen å sammenligne ren og uren funksjoner. Sjekk ut denne artikkelen ut, også, for flere detaljer.

Nå, fordi det er ganske mye av markup i denne ene komponenten, vi kommer til å kopiere mye inn i vår funksjon. Legg til følgende under konstruktør:

render() {
la self = denne;

retur (
<viktigste className=”om” style={ { background: selvstendig.staten.farge } }>
<delen className=”om__indre”>
<artikkelen className=”om__innhold”>
{ self.staten.navn ? <p>Hei på deg. Mitt navn er { self.staten.navn }, og min favoritt farge er { self.getActiveColorName() }</p> : null }
</article>
<form className=”[ om__form ] [ boilerform ]”>
<div>
<label className=”c-label” htmlFor=”name_field”>navn</label>
<input className=”c-input-feltet” type=”text” id=”name_field” value={ self.staten.navn } onChange={ self.updateName.bind(selv) } />
</div>
<div>
<label className=”c-label” htmlFor=”color_field”>Dine favoritt farge</label>
<div className=”c-velg-feltet”>
<velg className=”c-velg-feltet__meny” value={ self.staten.farge } onChange={ self.updateColor.bind(selv) } id=”color_field”>
{ self.availableColors.kart((farge, index) => {
retur (
<option key={ indeks } value={ farge.value }>{ farge.name }</option>
);
})}
</>
<span className=”c-velg-feltet__decor” aria-skjult=”true” role=”presentasjon”>▾</span>
</div>
</div>
</form>
</avsnitt>
</main>
);
};

Kan du tenke noe sånt som: “Hellig ku, og det er mye som skjer her.” La oss dissekere det, så ikke bekymre deg for kopiering av kode for litt—skal jeg la deg få vite hvor vi kommer til å gjøre det igjen. La oss bare fokusere på noen viktige biter for nå.

I JSX, må du returnere en enkelt element, som kan ha barn elementer. Fordi alle våre koden er pakket inn i en <main> – tag, vi er alle godt det. På det <main> – tag, vil du se at vi har et uttrykk i en attributt, som vi dekket i Del 2. Dette uttrykket setter bakgrunnsfargen som den aktive fargen som er angitt i vår stat. Dette vil oppdateringen som magi når en bruker endrer farge valg uten oss å skrive en annen linje av koden for det i denne gjengi funksjon. Ganske kult, ikke sant?

Inni <artikkelen class=”om__innhold”> – element, vil du legge merke til dette:

{ self.staten.navn ? <p>Hei på deg. Mitt navn er { self.staten.navn }, og min favoritt farge er { self.getActiveColorName() }</p> : null }

Dette trefoldig operatør sjekker for å se om det er et navn som satt og gjør enten en setning som inneholder navn eller null. Returnerer null i JSX er hvordan du kan fortelle det til å gjengi ingenting til klienten. Også i tilknytning til denne utdrag: vi var i stand til å kjøre denne trefoldig aktør innen våre JSX fordi vi opprettet et uttrykk ved å åpne noen braketter. Det er en veldig nyttig måte å strø små, enkle biter av skjermen logikk innenfor gjengi funksjon.

Neste opp, la oss se på en hendelse binding:

<input className=”c-input-feltet” type=”text” id=”name_field” value={ self.staten.navn } onChange={ self.updateName.bind(selv) } />

Hvis du ikke binde en hendelse til input-feltet, vil det være skrivebeskyttet. Ikke få panikk om å glemme om. Reagerer hjelpsomt advarer deg i konsollen.

Husk, selv er lik denne, så det vi gjør er å feste updateName funksjonen til inngang er onChange-hendelsen, men vi er også bindende selv, slik at når vi er i updateName funksjon, dette vil tilsvare AboutMe, som er vår komponent.

Det siste vi kommer til å se på i gjengi funksjon er looper. Her er utdrag som gjengir fargen meny:

<velg className=”c-velg-feltet__meny” value={ self.staten.farge } onChange={ self.updateColor.bind(selv) } id=”color_field”>
{ self.availableColors.kart((farge, index) => {
retur (
<option key={ indeks } value={ farge.value }>{ farge.name }</option>
);
}) }
</>

Verdien og endre oppsettet er det samme som ovenfor <input / > – element, slik at vi overser dem og dykke rett inn til the loop. Hva vi har gjort, er å åpne opp et uttrykk hvor vi kjører en ganske standard Utvalg Kartet funksjon, men enda viktigere, det tilbake JSX i hver iterasjon, noe som gir hver enkelt mulighet til å gjengi med resten av JSX.

Kabling det hele opp

Nå som vi har fått vår viktigste aspektene av komponent som kjører vi trenger for å koble det opp. Du vil merke at din CodePen ikke gjør noe i øyeblikket. Det er på grunn av to ting:

  • Vi har ikke festet komponenten til DOM ennå
  • Vi har ikke skrevet noen metoder for å gjøre det interaktive

La oss starte med den tidligere og legge vår endre event-handlere. Legg til følgende under constructor funksjon:

updateName(evt) {
la self = denne;

selvet.setState({
navn: evt.målet.verdi
})
};

updateColor(evt) {
la self = denne;

selvet.setState({
farge: evt.målet.verdi
})
};

Disse to funksjonene håndtere onChange-hendelser på <velg> og <input> og sette sine verdier i staten bruker Reagere er setState funksjon. Nå at verdiene er i staten, noe som er påmeldt til dem vil oppdatere automatisk. Dette betyr at trefoldig uttalelse som gjør ditt navn og bakgrunnsfargen endres i sanntid mens du skriver/select. Fantastisk. høyre?

Nå, ville det være anbefalt å gjøre koden mer TØRKE ved å kombinere disse to som én endring hendelseshåndterer seg at oppdateringer som er den relevante tilstand. For denne serien selv, la oss holde ting enkelt og mer forståelig. 😀

Neste opp, la oss legge den siste metoden til vår komponent. Legg til følgende under nylig lagt til oppdatering metoder:

// Retur aktiv farge navn fra tilgjengelige farger, basert på state-verdi
getActiveColorName() {
la self = denne;

tilbake selv.availableColors.filteret(color => farge.value === selv.staten.farge)[0].navn;
};

Denne funksjonen bruker en av mine favoritt JavaScript utvalg metoder: filter. Med ES6, kan vi cherry pick array-elementer basert på deres objekt verdi i en linje, som er kraftige saker. Med den kraft vi kan plukke den aktive availableColors elementet er lesbare navn og returnere det tilbake.

JavaScript-array metoder er veldig kul og ofte sett i økosystemet Reagerer. Sarah Drasner laget en alvorlig fantastiske “Array Explorer”—sjekk det ut her!

Feste komponent til DOM

Det siste vi kommer til å gjøre, er å koble vår komponent til DOM, ved hjelp av ReactDOM. Hva vi gjør er å si: “Hei nettleser, hente meg <div id=”root”> – element, og gjengi dette Reagerer komponent i det.” ReactDOM er å gjøre all den magi som gjør at det er mulig.

ReactDOM er en virkelig smart pakke som tar endringene i den dynamiske Reagere komponenter, beregner hva som må endres i DOM og gjelder disse endringene i mest mulig effektiv måte. Med ReactDOM er renderToString () – metoden, du kan også gjøre din Reagerer komponenter til en statisk string, som deretter kan settes til side med server-side kode. Hva er smart om dette er at referanser er lagt til, slik at hvis din front-end plukker opp noen server-gjengitt Reagere, det vil fungere ut hvilke komponenter du trenger og gjøre hel del av statisk markup dynamisk automatisk. Ganske jævla smart, ikke sant?

Uansett, tilbake til vår Penn. Legg til denne retten på bunnen av JS redaktør:

// Fest vår komponent til <div id=”root”> – element
ReactDOM.render(<AboutMe />, – dokument.bürgerliches(‘root’));

Nå, du vil merke at din forhåndsvisning-vinduet har plutselig blir levende! Gratulerer — du bare skrev et Reagere komponent 🎉

Se Pen Om Meg Reagerer Komponent av Andy Bell (@hankchizlja) på CodePen.

Innpakning opp

I denne del, du har lært om reaktiv, komponent JavaScript ved å skrive en Reagerer komponent. Dette er relevant for din læring fordi egendefinerte Gutenberg blokker følge en veldig lignende oppsett til en Reagerer komponent. Nå som du har fått en bedre forståelse av hvordan en Reagerer komponent fungerer, bør du være i stand til å forstå hvordan en tilpasset Gutenberg blokkere fungerer også.

Det tok meg litt for å pakke hodet mitt rundt det faktum at, i form av Gutenberg, Reagerer er bare relevant for å bygge blokker i admin. I Gutenberg, Reagerer fungerer som et middel for å forberede markeringen for å bli lagret til databasen i post_content kolonne. Ved hjelp av Reagere på front-enden av en WordPress side til å bygge noe som dette vil være separat fra hva vi vil gjøre i denne serien.

Neste opp i denne serien, vi kommer til å redigere våre WordPress tema slik at vi kan bygge våre egne Gutenberg-blokk.

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk
  4. Moderne JavaScript Syntaks
  5. Reagerer 101 (Dette Innlegget)
  6. Sette opp en Tilpasset webpack (Kommer Snart!)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)