Reagera Kod Style Guide

0
51

Jag har varit med tiden av mitt liv med att Reagera på sistone. Men på min resa, jag har haft svårt att hitta bra kod stil riktlinjer att hålla blandning av JSX och JS rena och läsbara. Jag har kommit upp med min egen stil guider som jag skulle älska att dela. Kanske dessa kommer att vara användbart för dig, och naturligtvis, tveka inte att dela med liknande riktlinjer i kommentaren tråden nedan.

Regel #1: Destructure din rekvisita

En av mina favorit ES6 funktioner är omstrukturering av valutan. Det gör att tilldela objekt till variabler känner mycket mindre av en börda. Låt oss ta en titt på ett exempel.

Säga att vi har en hund som vi vill visa som en div med en klass som heter efter sin ras. Inuti div-är en mening som noterar hundens färg och berättar om det är en bra hund eller dålig hund.

klass Hunden sträcker Komponent {
render () {
återgå <div className={detta.rekvisita.rasen}>{detta.rekvisita.färg} hund är {detta.rekvisita.isGoodBoy ? “bra” som “dåliga”}</div>;
}
}

Som tekniskt sett gör allt vi vill, men det verkar bara som ganska stora block av kod för vad är egentligen endast tre variabler och en HTML-tagg.

Vi kan bryta ut det genom att tilldela alla egenskaper av rekvisita till lokala variabler.

låt rasen = detta.rekvisita.rasen;
låt color = detta.rekvisita.färg;
låt isGoodBoy = detta.rekvisita.isGoodBoy;

Med hjälp av ES6, vi kan sätta in den i en ren uttalande som detta:

låt { ras, färg, isGoodBoy } = i detta.rekvisita;

För att hålla allt rent, sätter vi våra ternär operator (mer om det senare) i en egen variabel, och viola.

klass Hunden sträcker Komponent {
render () {
låt { ras, färg, isGoodBoy } = i detta.rekvisita;
låt identifier = isGoodBoy ? “goda” : “dålig”;
återgå <div className={rasen}>{color} hund är {identifierare}</div>;
}
}

Mycket lättare att läsa.

Regel #2: En tag, en linje

Nu har vi alla haft det ögonblick då vi vill ta hela vår funktion och göra det till en mash av operatörer och små parameternamn att göra några uglified, supersnabb, oläslig nyttofunktion. Men när du gör en statslös Komponent i Reagera, kan du ganska lätt göra samma sak samtidigt som den rengör.

klass Hunden sträcker Komponent {
render () {
låt { ras, färg, goodOrBad } = i detta.rekvisita;
återgå <div className={rasen}>{color} hund är {goodOrBad}</div>;
}
}

vs

låt Hunden = (ras, färg, goodOrBad) => <div className={rasen}>{color} hund är {goodOrBad}</div>;

Om allt du gör är att göra en grundläggande element och placera egenskaper i en HTML-tagg, så oroa dig inte om att göra en så stor affär av alla funktioner och omslag för att få en helt annan klass kommer. En rad kod kommer att göra.

Du kan även få kreativa med några ES6 sprida funktioner om du passerar ett objekt för dina fastigheter. Med hjälp av detta.rekvisita.innehållet kommer att automatiskt sätta snöre mellan öppna och stänga tag.

låt propertiesList = {
className: “min-favorit-komponent”,
id: “myFav”,
innehåll: “Hej världen!”
};
låt SimpleDiv = rekvisita => <div {… rekvisita} />;

låt jsxVersion = <SimpleDiv rekvisita={propertiesList} />;

När du ska använda sprida funktion:

  • Ingen ternära operatörer som krävs
  • Endast passerar HTML-taggen attribut och innehåll
  • Kan användas flera gånger

När du inte vill använda sprida funktion:

  • Dynamiska egenskaper
  • Array eller objekt egenskaper som är obligatoriska
  • En render som skulle kräva nästlade taggar

Regel #3: regel 3: s

Om du har tre eller flera fastigheter, och sedan sätta dem på deras egen linje, både i förekomst och i render-funktion.

Detta skulle vara bra att ha bara en rad egenskaper:

klass GalleryImage sträcker Komponent {
render () {
låt { imgSrc, rubrik och tryck på } = i detta.rekvisita;
avkastning (
<bild>
<img src={imgSrc} alt={title} />
<figcaption>
<p>Title: {title}</p>
</figcaption>
</bild>
);
}
}

Men tänk på detta:

klass GalleryImage sträcker Komponent {
render () {
låt { imgSrc, titel, artist, clas, miniatyr, brytpunkt } = i detta.rekvisita;
avkastning (
<figur className={clas}>
<bild>
<source media={`(min-width: ${brytpunkt})`} srcset={imgSrc} />
<img src={miniatyr} alt={title} />
</bild>
<figcaption>
<p>Title: {title}</p>
<p>Konstnär: {artist}</p>
</figcaption>
</bild>
);
}
}

Eller återge:

<GalleryImage imgSrc=”./src/img/vangogh2.jpg” title=”Starry Night” artist=”Van Gogh” clas=”porträtt” miniatyr -=”./src/img/thumb/vangogh2.gif” brytpunkten={320} />

Det kan bli för mycket av en codeblock att läsa. Släpp varje fastighet till nästa rad för en ren, lättläst utseende:

låt { imgSrc,
titel
konstnär,
clas,
miniatyr,
brytpunkten } = i detta.rekvisita;

och:

<GalleryImage
imgSrc=”./src/img/vangogh2.jpg”
title=”Starry Night”
konstnären=”Van Gogh”
clas=”landskap”
miniatyr=”./src/img/thumb/vangogh2.gif”
brytpunkten={320} />

Regel #4: För många egenskaper?

Fastighetsförvaltning är knepigt på någon nivå, men med ES6 omstrukturering av valutan och Reagera state-baserade strategi, det finns en hel del sätt att rensa upp utseendet på en hel del egenskaper.

Låt oss säga att vi gör en kartläggning av de ansökningar som har en lista över sparade adresser och GPS-koordinater för din aktuella plats.

Den aktuella användaren information om position och närhet till favorit-adress som ska vara i den överordnade delen av App som denna:

klass App förlänger Komponent {
konstruktör (rekvisita) {
super(rekvisita);
detta.state = {
userLat: 0,
userLon: 0,
isNearFavoriteAddress: falskt
};
}
}

Så, när vi gör en adress och vi vill att det ska notera hur nära du är till den adress vi passerar minst två egenskaper från Appen.

I App render ():

<Adress
… // Information om adress
currentLat={detta.stat.userLat}
currentLong={detta.stat.userLon} />

I render-funktion för Adress Komponent:

render () {
låt { houseNumber,
streetName,
streetDirection,
stad,
staten,
zip,
lat,
lon,
currentLat,
currentLon } = i detta.rekvisita;
tillbaka ( … );
}

Redan kan man se hur detta blir otymplig. Om vi tar två uppsättningar av information, och dela upp dem i deras egna objekt, blir det mycket mer hanterbart.

I vår App konstruktör ():

detta.state = {
userPos: {
lat: 0,
lon: 0
},
isNearFavoriteAddress: falskt
};

Vid någon punkt innan App render ():

låt addressList = [];
addressList.push({
houseNumber: “1234”,
streetName: “Street Rd”,
streetDirection: “N”,
stad: “City”,
staten: “ST”,
zip: “12345”,
lat: “019782309834”,
lon: “023845075757”
});

I App render ():

<Adressen addressInfo={addressList[0]} userPos={detta.stat.userPos} />

I render-funktion för Adress Komponent

render () {
låt { addressInfo, userPos } = i detta.rekvisita;
låt { houseNumber,
streetName,
streetDirection,
stad,
staten,
zip,
lat,
lon } = addressInfo;
tillbaka ( … );
}

Mycket, mycket renare. Reagerar också har några bra sätt att se till att objekt existerar och är av en viss typ med PropTypes att vi normalt inte har i JavaScript, vilket bara är en stor OOP sak ändå.

Regel #5: Dynamisk gör – en Kartläggning av matriser

Ganska ofta i HTML, vi skriver samma grundläggande bitar av kod om och om igen, bara med ett par viktiga distinktioner. Detta är varför Reagerar skapades i första hand. Du gör ett objekt med egenskaper som returnerar en komplex, dynamisk HTML-block, utan att behöva skriva varje del av det flera gånger.

JavaScript har redan ett bra sätt att göra listor som information: arrayer!

Reagera använder .karta () – funktion för att lägga in matriser i ordning, med hjälp av en parameter från matriser som en nyckel.

render () {
låt pokemon = [ “Pikachu”, “Squirtle”, “Bulbasaur”, “Charizard” ];
avkastning (
<ul>
{pokemon.karta(namn => <li key={name}>{name}</li>)}
</ul>
);
}

Du kan även använda vår handy-dandy funktioner spridning för att kasta en hel lista av parametrar i av ett objekt med Objekt.nycklar() (med tanke på att vi fortfarande behöver en nyckel).

render () {
låt pokemon = {
“Pikachu”: {
typ: “Electric”,
nivå: 10
},
“Squirtle”: {
typ: “Vatten”,
nivå: 10
},
“Bulbasaur”: {
typ: “Gräs”,
nivå: 10
},
“Charizard”: {
typ: “Eld”,
nivå: 10
}
};
avkastning (
<ul>
{Objekt.nycklar(pokemon).karta(namn => <Pokemon key={name} är {… pokemon[namn]} />)}
</ul>
);
}

Regel #6: Dynamisk gör Reagera ternära operatörer

I Reagera, du kan använda operatorer för att göra en villkorlig göra precis som en variabel förklaring. I Regel #1, vi tittade på detta för att fastställa om vår hund var bra eller dåligt. Det är inte helt nödvändigt att skapa en hel rad av kod för att bestämma ett ord skillnad i en mening, men när det blir stora block av kod, så det är svårt att hitta de där små ?’s och : s.

klass SearchResult sträcker Komponent {
render () {
låt { resultat } = i detta.rekvisita;
avkastning (
<avsnitt className=”search-results”>
{resultat.längd > 0 &&
resultat.karta(index => <Följd key={index} {… resultat[index] -/>)
}
{resultat.längd === 0 &&
<div className=”inga resultat”>Inga resultat</div>
}
</section>
);
}
}

Eller, i sann ternära mode

klass SearchResult sträcker Komponent {
render () {
låt { resultat } = i detta.rekvisita;
avkastning (
<avsnitt className=”search-results”>
{resultat.längd > 0
? resultat.karta(index => <Följd key={index} {… resultat[index] -/>)
: <div className=”inga resultat”>Inga resultat</div>
}
</section>
);
}
}

Även med våra snygga resultat kartläggning, kan du se hur parentes är redan häckande ganska tätt. Nu, tänk om våra återge hade mer än bara en linje. Det kan ganska snabbt få oläslig. Överväga ett alternativ:

klass SearchResult sträcker Komponent {
render () {
låt { resultat } = i detta.rekvisita;
låt outputJSX;
if (resultat.längd > 0) {
outputJSX = (
<Fragment>
{resultat.karta(index => <Följd key={index} {… resultat[index] -/>)}
</Fragment>
);
} else {
outputJSX = <div className=”inga resultat”>Inga resultat</div>;
}
återgå <avsnitt className=”search-results”>{utgång}</section>;
}
}

I slutändan, koden längden är ungefär den samma, men det finns en viktig skillnad: i det första exemplet, vi är snabbt växla fram och tillbaka mellan två olika syntaxer, göra visuell tolkning påfrestande och svårt, medan den andra är helt enkelt vanlig JavaScript med värde uppdrag i ett, enhetligt språk och en-line funktionen tillbaka i en annan.

Den tumregel i denna situation är som om JavaScript du lägger in i din JSX objektet är fler än två ord (t ex objekt.egendom), det ska vara gjort innan den tillbaka samtalet.

Wrap up

Kombinationen av syntax kan bli rörigt, och dessa är de mest självklara situationer där jag såg min kod som går av rälsen. Här är de grundläggande begrepp som alla dessa kommer från och kan appliceras på alla situationer som inte täcks här:

  • Använd ES6 funktioner. På allvar. Det finns en hel del fantastiska funktioner som kan göra ditt jobb lättare, snabbare och mycket mindre manuellt.
  • Bara skriva JSX på höger sida av = eller avkastning.
  • Ibland du behöver JavaScript i din JSX. Om JavaScript inte passar in på en linje (som en .karta () – funktionen eller ternär operator), så bör det göras i förväg.
  • Om din kod börjar se ut som (<{`${()}`} />), då har du förmodligen gått för långt. Ta den lägsta nivån utanför det aktuella uttrycket och gör det innan detta.