Lärande Gutenberg: Reagera 101

0
27

Även om Gutenberg är ihop med Reagera, den kod vi skriver för att göra egna kvarter är det inte. Är det verkligen liknar en Reagera komponent om, så jag tror att det är bra att ha lite att spela för att bekanta sig med denna typ av tillvägagångssätt. Det har varit en hel del att läsa i den här serien så här långt, så låt oss kavla upp ärmarna och göra något coolt.

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå?
  3. En Primer med skapa-guten-block
  4. Modern JavaScript-Syntax
  5. Reagera 101 (Detta Inlägg)
  6. Att sätta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)

Låt oss göra en “Om Mig” – komponent

Vi kommer att göra en enda Reagera komponent som uppdaterar bakgrundsfärgen på en sida och intro text bygger på uppgifter som du matar in ett par områden. “Jag trodde det var tänkt för att vara cool,” jag hör att ni alla mutter. Jag ska erkänna, jag kan ha översålda det, men vi kommer att lära dig några centrala begrepp för statligt driven JavaScript som kommer att komma väl till pass när vi gräva i våra Gutenberg block.

För referens, detta är vad vi kommer att sluta med:

Komma igång

Det första vi ska göra är att skjuta upp CodePen. CodePen kan användas gratis, så gå chef över det och skapa en ny Penna.

Nästa, vi kommer att dra in lite JavaScript-beroenden. Det finns tre redaktör skärmar—hitta JS skärmen och klicka på inställningar cog. Detta kommer att öppna upp en Penna Inställningar modal där du hittar avsnittet Lägga till Externa Skript/Pennor. Längst ner, det finns en Quick-lägg till för att välja meny. Gå vidare och öppna upp.

Från menyn väljer du att Reagera. När det är markerat, kan du öppna menyn och välj ReactDOM. Du kommer att se att detta har pre-filled vissa textrutor.

Slutligen, måste vi aktivera våra ES6 kod, så på menyn titeln JavaScript Preprocessor, välj Babel.

Nu, gå vidare och klicka på den stora Spara & Stäng – knappen.

Vad vi har gjort det är att dra de viktigaste Reagera JS-bibliotek och ReactDOM bibliotek. Dessa kommer att göra det möjligt för oss att dyka i och skriva vår kod, som är vårt nästa steg.

Setup vår CSS

Låt oss få det att se coolt. Först upp men låt oss setup vår CSS-editor. Det första vi ska göra är att ställa upp för att sammanställa Sass för oss. Precis som vi gjorde med JS-editorn, klicka på inställningar cog som kommer att ta upp Pennan Inställningar modal igen—denna gång med CSS-inställningar.

På toppen, det finns en CSS Preprocessor – menyn. Gå vidare och välj SCSS från det.

När det är gjort, gå ner till Lägga till Externa Stilmallar/Pennor och klistra in följande tre länkar i separata text-boxar:

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

Dessa tre för att ge oss en reset, snygga typsnitt och några bra form stilar.

Nu när de är redo, gå vidare och klicka på “Spara & Stäng” – knappen igen.

Att lägga till lite stil

Vi är alla inställningar så är detta steg bör vara lätt. Klistra in följande Sass i CSS-redigeraren:

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

* {
box-sizing: border-box;
}

html {
höjd: 100%;
font-size: 16px;
}

body {
höjd: 100%;
position: relative;
font-size: 1rem;
line-height: 1.4;
font-family: “Sans”, sans-serif;
font-weight: 300;
bakgrund: #f3f3f3;
färg: #232323;
}

.om {
width: 100%;
höjd: 100%;
position: absolute;
top: 0;
left: 0;
färg: var(–text-färg);
övergång: alla 2000 ms ease-in-out;

&__inre {
display: flex;
flex-riktning: kolumnen.
höjd: 100%;
marginal: 0 auto;
stoppning: 1.2 rem;
}

&__innehåll {
display: flex;
flex-riktning: kolumnen.
motivera-innehåll: center;
align-objekt: center;
flex: 1 1 auto;
font-size: 3rem;
linje-höjd: 1,2;

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

&__form {
display: flex;
flex-riktning: kolumnen.
align-objekt: center;
stoppning: 2rem 0;
width: 100%;
max-width: 60rem;
marginal: 0 auto;

@media(min-width: 32rem) {
flex-riktning: rad;
motivera-innehåll: space-mellan;
stoppning: 2rem;
}

> * {
bredd: 15rem;
}

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

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

label {
display: block;
}
}
}

// Boilerform åsidosätter
.c-välja-fältet {
&,
&__meny {
width: 100%;
}
}

.c-input-fältet {
width: 100%;
}

.c-label {
färg: var(–text-färg);
}

Det är en stor ol’ bit av CSS, och det kommer att se ut som inget har egentligen hänt, men det är bra—vi ska inte oroa dig om CSS för resten av detta avsnitt.

Gräva i Reagera

Det första vi ska göra är att ge Reagera något att haka på. Klistra in den i HTML-editorn för din Penna:

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

Det är det för HTML—du kan gå vidare och maximera din JS editor så att vi har fullständig fokus.

Låt oss börja vår del kod, genom att skapa en ny instans av en Reagera komponent genom att skriva följande JavaScript:

klass AboutMe sträcker sig Reagera.Komponent {
}

Vad det koden gör är att skapa en ny AboutMe komponent och utvidga Reagerar samtliga klass, som ger oss en massa kod och verktyg för gratis.

Rätt, så vi har en klass, och nu måste vi bygga det! Lägg till följande kod inuti parentes:

konstruktör(rekvisita) {
super(rekvisita);

låt själv = detta;
};

Vi har några saker på gång här, så jag ska förklara vart och ett:

konstruktor är den metod som anropas när du skriver nya AboutMe(), eller om du skriver <AboutMe /> i din JSX. Detta skapar objektet. Rekvisita parameter är något du kommer se en hel del att Reagera. Detta är den samling av fastigheter som har gått in i komponenten. Till exempel: om du skrev <AboutMe namn=”Andy” />, skulle du kunna få tillgång till den i din konstruktor med rekvisita.namn.

super är hur vi berätta för klassen att vi har utvidgats till att konstruera med sin egen konstruktör. Du kommer att se att vi också passerar rekvisita upp till det i fall någon förälder komponenter som behövs för att få tillgång till dem.

Slutligen låt själv = detta är ett sätt att styra omfattningen av detta. Kom ihåg, eftersom vi använder låt, jag kommer bara att vara tillgängliga på konstruktören.

Snabb anteckning för de läsare som inte-så-säker i JavaScript: jag hittade en djupare titt på omfattningen i JavaScript för att resultera i en hel del “aha-ögonblick i mitt lärande. Jag rekommenderar Kyle Simpson Du inte Vet JS boken i serien (finns gratis på GitHub!). Volymer av obs: denna och Objekt Prototyper och Räckvidd Och Nedläggningar. Bra grejer, jag lovar.

Nu har vi täckt konstruktören, låt oss lägga lite mer kod till det. Efter den låt själv = detta; line, klistra in följande kod:

själv.availableColors = [
{
“name”: “Röd”,
“värde”: “#ca3814”
},
{
“name”: “Blå”,
“värde”: “#0086cc”
},
{
“name”: “Grön”,
“värde”: “#3aa22b”
}
];

Vad vi har är att det är en array av objekt som definierar våra alternativ för att välja din favoritfärg. Gå vidare och lägg till din egen om det inte redan är det!

Din klass definition och konstruktören bör nu se ut så här:

klass AboutMe sträcker sig Reagera.Komponent {

konstruktör(rekvisita) {
super(rekvisita);

låt själv = detta;

// Skapa en lista över tillgängliga färger som återges i den väljer du meny
själv.availableColors = [
{
“name”: “Röd”,
“värde”: “#ca3814”
},
{
“name”: “Blå”,
“värde”: “#0086cc”
},
{
“name”: “Grön”,
“värde”: “#3aa22b”
}
];
};
}

Ganska enkelt så långt, eller hur? Låt oss gå vidare och ställa vissa ursprungliga värden till våra reaktiva tillstånd. Lägg till följande efter att den stänger av sig själv.availableColors:

// Set vårt första reaktiva värden stat
själv.state = {
namn: ‘Foo’,
färg: self.availableColors[0].värde
};

Denna ursprungliga inställningen av tillstånd gör vår del för att göra både ett namn och en färg på lasten, vilket hindrar den från att titta bruten.

Nu ska vi lägga till vår göra-funktion. Detta är en ren funktion, som gör ingenting men gör den komponent som bygger på den ursprungliga staten eller statliga förändringar under komponentens livslängd. Du kanske har gissat redan, men det är där huvuddelen av våra JSX liv.

Vänta! Vad är en ren funktion? Välkommen till funktionell programmering, ett hett ämne i den Reagerar världen. Rena funktioner är funktioner där, för input X, produktionen kommer alltid att vara Y. I en “orena” – funktion, ingången X kan resultera i olika utgångar beroende av andra delar av programmet. Här är en CodePen att jämföra rena och orena funktioner. Kolla in den här artikeln för mer information.

Nu, eftersom det finns en hel del markeringar i denna enda komponent, vi kommer att kopiera hel del i vår funktion. Lägg till följande under din konstruktör:

render() {
låt själv = detta;

avkastning (
<viktigaste className=”om” style={ { background: self.stat.färg } }>
<avsnitt className=”om__inre”>
<artikeln className=”om__content”>
{ själv.stat.namn ? <p>Hallå där. Mitt namn är { själv.stat.namn }, och min favorit färg är { själv.getActiveColorName() }</p> : null }
</article>
<formen className=”[ ca__form ] [ boilerform ]”>
<div>
<etiketten className=”c-label” htmlFor=”name_field”>namn</label>
<ingång className=”c-input-fältet” type=”text” id=”name_field” värde={ själv.stat.namn } onChange={ själv.updateName.bind(self) } />
</div>
<div>
<etiketten className=”c-label” htmlFor=”color_field”>Din favorit färg</label>
<div className=”c-välja-field”>
<välja className=”c-välja-fältet__meny” värde={ själv.stat.färg } onChange={ själv.updateColor.bind(self) } id=”color_field”>
{ själv.availableColors.karta((färg, index) => {
avkastning (
<tangenten option={ index } värde={ color.värde }>{ color.name }</option>
);
})}
</select>
<span className=”c-välja-fältet__inredning” aria-hidden=”true” roll=”presentation”>▾</span>
</div>
</div>
</form>
</section>
</main>
);
};

Du kanske tänker något i stil med: “Helig ko, det är en hel del som händer här.” Låt oss dissekera den, så oroa dig inte för att kopiera koden för lite—jag ska låta dig veta vart vi är på väg att göra det igen. Låt oss bara fokusera på några viktiga bitar för nu.

I JSX, du behöver returnera en enda element, som kan ha underordnade element. Eftersom alla våra koden är insvept i en <main> – taggen, vi är alla bra det. På det <main> – taggen, du kommer att se att vi har ett uttryck i ett attribut, som vi berört i Del 2. Detta uttryck anger bakgrundsfärg som den nuvarande aktiva färg som har angetts i vår stat. Detta kommer att uppdatera som magi när en användare ändrar sin färg val utan att vi behöver skriva en rad kod för att det i detta rendera funktion. Ganska coolt, va?

Inuti <artikeln class=”om__innehåll”> – elementet, du kommer att märka detta:

{ själv.stat.namn ? <p>Hallå där. Mitt namn är { själv.stat.namn }, och min favorit färg är { själv.getActiveColorName() }</p> : null }

Detta ternär operator kontroller för att se om det är ett namn som och gör en mening som innehåller namn eller null. Returnerar null i JSX är hur du säger det för att göra ingenting till kunden. Också relaterad till detta utdrag: vi har kunnat köra det här ternär operator inom våra JSX, eftersom vi skapat ett uttryck genom att öppna vissa parentes. Det är ett riktigt bra sätt för att strö med små, enkla bitar av display logik i ditt återge funktion.

Nästa upp, låt oss titta på ett evenemang är bindande:

<ingång className=”c-input-fältet” type=”text” id=”name_field” värde={ själv.stat.namn } onChange={ själv.updateName.bind(self) } />

Om du inte binda en händelse i ditt inmatningsfält, det kommer att vara skrivskyddad. Få inte panik om man glömmer dock. Reagera hjälpsamt varnar dig i din konsol.

Kom ihåg, jaget är lika med detta, så vad vi gör är att fästa updateName funktion för ingången onChange-händelse, men vi är också bindande själv, så att när vi är i updateName funktion, detta kommer att vara lika AboutMe, som är vår del.

Det sista vi kommer att titta på i render-funktion är slingor. Här är utdrag som gör menyn färg:

<välja className=”c-välja-fältet__meny” värde={ själv.stat.färg } onChange={ själv.updateColor.bind(self) } id=”color_field”>
{ själv.availableColors.karta((färg, index) => {
avkastning (
<tangenten option={ index } värde={ color.värde }>{ color.name }</option>
);
}) }
</select>

Värdet och ändra inställningar är samma som ovan, <input / > – elementet, så vi kommer att ignorera dem och bara hoppa rakt in i slingan. Vad vi har gjort är att öppna upp ett uttryck där vi kör en ganska vanlig Array Karta funktion, men, viktigast av allt, den returnerar JSX i varje iteration, vilket gör att varje alternativ att göra med resten av JSX.

Ledningar upp allt

Nu när vi har fått våra grundläggande aspekter av komponenten körs, vi behöver koppla upp det. Du kommer att märka att dina CodePen inte gör något just nu. Det är på grund av två saker:

  • Vi har inte ansluten komponent DOM ännu
  • Vi har inte skrivit något sätt att göra den interaktiv

Låt oss börja med de tidigare och lägg till våra förändring event handlers. Lägg till följande under din konstruktören:

updateName(evt) {
låt själv = detta;

själv.setState({
namn: evt.- målet.värde
})
};

updateColor(evt) {
låt själv = detta;

själv.setState({
färg: evt.- målet.värde
})
};

Dessa två funktioner hantera onChange händelser av <välj> och <input> och ställ in sina värden i staten använder Reagera är setState funktion. Nu när de värden som finns i staten, något som är tecknade till dem kommer att uppdateras automatiskt. Detta innebär att de ternära uttalande som gör din namn och bakgrundsfärgen kommer att förändras i realtid när du skriver/välj. Häftigt. rätt?

Nu skulle det vara rekommenderat att göra din kod mer TORR genom att kombinera dessa två som en förändring händelsehanterare som uppdaterar den aktuella staten. För denna serie men låt oss hålla saker och ting enkla och mer begriplig. 😀

Nästa upp, låt oss lägga den sista metoden för vår del. Lägg till följande under din nyligen har lagt till uppdatering metoder:

// Returnerar aktiva färgen namn från tillgängliga färger, baserat på värde
getActiveColorName() {
låt själv = detta;

återgå själv.availableColors.filter(färg => färg.värde === self.stat.färgen)[0].namn;
};

Denna funktion använder en av mina favorit JavaScript-array metoder: filter. Med ES6, vi kan plocka russinen array-objekt baserat på deras objekt värde i en linje, som är kraftfulla grejer. Med den kraften kan vi ta den för närvarande aktiva availableColors objektet är läsbara namn och returnera det tillbaka.

JavaScript-array metoder är väldigt cool och ofta såg på Reagera ekosystem. Sarah Drasner gjort ett allvarligt fantastiska “System Explorer”—kolla här!

Montera en komponent till DOM

Det sista vi ska göra är att bifoga vår del till DOM, med hjälp av ReactDOM. Vad vi gör är att säga, “Hej webbläsare, hämta mig <div id=”root”> – elementet och göra detta Reagerar komponent i det.” ReactDOM gör allt det magiska som gör det möjligt.

ReactDOM är en riktigt smart paket som tar förändringar i din dynamiska Reagera komponenter, räknar ut vad som behöver ändras i DOM och tillämpar dessa ändringar i den enklaste och mest effektiva sätt. Med ReactDOM är renderToString () – metoden, du kan även göra din Reagera komponenter till en statisk sträng, som sedan kan läggas till din sida med din server-side-koden. Vad är det smarta med detta är att referenser är lagt så att om dina front-end plockar upp vissa server-renderade Reagera, det kommer att fungera ut vilka komponenter som behövs och göra hela bit av statisk markup dynamisk automatiskt. Jäkligt smart, va?

Hur som helst, tillbaka till vår Penna. Lägg till denna rätt på botten av JS-redaktör:

// Fästa våra komponent till <div id=”root”> – elementet
ReactDOM.render(<AboutMe / > handling.getElementById (“root”));

Nu, du kommer att märka att dina fönster för förhandsgranskning har plötsligt komma till liv! Grattis — du skrev bara en Reagera komponent 🎉

Se Pennan Om Mig Reagera Komponent av Andy Bell (@hankchizlja) på CodePen.

Att linda upp

I denna del, du har lärt dig om reaktiv komponent JavaScript genom att skriva en Reagera komponent. Detta är relevant för din inlärning eftersom anpassade Gutenberg block följer en mycket liknande inställning till en Reagera komponent. Nu när du har fått en bättre förståelse för hur en Reagerar komponent fungerar, bör du kunna för att förstå hur en anpassad Gutenberg block fungerar också.

Det tog mig lite för att slå mitt sinne runt det faktum att, i form av Gutenberg, Reagerar endast är relevant att byggstenarna inom admin. I Gutenberg, Reagera fungerar som ett medel för att förbereda den kod ska sparas till databasen i post_content kolumn. Hjälp Reagera på front-end av en WordPress-webbplats till att bygga upp något som detta skulle vara separat från vad vi kommer att göra i den här serien.

Nästa upp i denna serie, vi kommer att ändra vår WordPress-tema så att vi kan bygga upp vår egen Gutenberg block.

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå?
  3. En Primer med skapa-guten-block
  4. Modern JavaScript-Syntax
  5. Reagera 101 (Detta Inlägg)
  6. Att sätta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)