PRDXNs React Best Practices

Facebook's React är ett deklarativt, effektivt och flexibelt JavaScript-bibliotek för att bygga användargränssnitt (UI).

När jag först började skriva kod i React minns jag att jag såg många olika tillvägagångssätt som varierade mycket från handledning till självstudie. Så mitt team på PRDXN och jag kom med en guide / lista över bästa praxis (BP) som skulle hjälpa oss alla att komma snabbare, snabbare.

Facebook's React är ett deklarativt, effektivt och flexibelt JavaScript-bibliotek för att bygga användargränssnitt (UI).

Följande är vår guide. Vi hoppas att detta hjälper dig att påskynda ditt antagande och användning av React; oavsett om du precis börjar / nybörjare eller erfaren utvecklare.

1. Underhålla en organiserad mappstruktur:

Som med alla programmerings- / kodningsprojekt är detta mycket viktigt! Om dina projektfiler inte är organiserade logiskt kan du och dina medarbetare bli förvirrade och slösa bort dyrbar tid på att leta efter filer eller redigera fel filer.

På PRDXN kom vi fram till följande mappstruktur för att göra saker enklare och mindre frustrerande för alla. Klicka på spela för att se.

2. Komponenter - bitar och träd. Hej, du är en Javascript timmerjacka!

Komponenter är hjärtat i en reaktion. En React-komponent är i princip någon del av ett UI.

Skapa logiska UI-bitar (grupperingar): Dela alltid dina komponenter i bitar (aka logiska grupperingar). Överväg alla applikationsgränssnitt och börja dela användargränssnittet i mindre logiska bitar. Var och en av dessa UI-bitar (grupper) är potentiella komponenter.

Träd, grenar och undergrenar: Den fullständiga / fullständiga bilden av UI (trädet eller stammen) är uppdelad i logiska bitar (aka grenar). Trädet blir startkomponenten (en layoutkomponent) och sedan kommer varje del i UI (aka gren) att bli en underkomponent som kan delas ytterligare in underkomponenter (aka undergrenar). Detta håller användargränssnittet organiserat och gör det också möjligt att data och tillståndsändringar logiskt flyter från trädet till grenarna och sedan undergrenarna.

Skapa logiska UI-grupperingar (bitar): Träd, grenar, undergrenar!

3. Komponenter - Funktionella och klassbaserade:

Det finns två typer av komponenter: funktionell och klassbaserad.

När ska jag gå med en funktionell komponent? Gå med en funktionell komponent om din komponent inte gör mycket mer än att ge rekvisita. Tänk på funktionella komponenter som rena funktioner: de kommer alltid att göra samma sätt och bete sig på samma sätt, med tanke på samma rekvisita. De bryr sig inte heller om livscykelmetoder; de är statslösa komponenter.

Funktionell komponent, exempel.

När ska jag gå med en klassbaserad komponent? Om din komponent behöver interna tillstånds- och komponentlivscykelmetoder, gå till en klassbaserad komponent. Kolla in detta för att hjälpa dig förstå mer om "internt tillstånd" och "livscykelmetoder".

Klassbaserad komponent, exempel.

4. Rekvisita! Rekvisita till dig! Rekvisita för mig! Men nej, vi talar React Props!

”Konceptuellt är komponenter som JavaScript-funktioner. De accepterar godtyckliga ingångar (kallas “rekvisita”) och returnerar React-element som beskriver vad som ska visas på skärmen. ”Klicka för källa.

Sätt i kamelerna! Nej, du kan lämna de kamelerna i efterrätten. Vi pratar camelCase här. Använd alltid camelCase för prop-namn. Props kan också ses som attribut, och konventionen som React är att använda camelCase för JSX-attribut.

Använd alltid camelCase för prop-namn.

Tro mig, det är sant, jag svär! Utelämna värdet på rekvisiten när det är uttryckligen sant. Även om vi inte tilldelar ett verkligt värde till en rekvisita betraktas det som ett verkligt värde, så det finns inget behov av att tilldela "true" som ett värde till rekvisiten.

Utelämna värdet på rekvisiten när det är uttryckligen sant.

Undvik att använda ett arrayindex som nyckelprop. använder ett unikt ID istället: Vi har sett för många utvecklare använda indexet för ett objekt som dess nyckel när de återger en lista, vilket inte är så bra! Det här är vad de fel skriver ...

DETTA ÄR ETT EXEMPEL PÅ DET DU BÖR *** INTE *** GÖRA!

En nyckel är det enda som React använder för att identifiera DOM-element. Så vad händer om du skjuter ett objekt till listan eller tar bort något från mitten? Om nyckeln är densamma som tidigare antar React att DOM-elementet representerar samma uppsättning komponenter (som tidigare). Men detta är inte fallet!

Det är därför du bör använda ett unikt ID. Varje objekt ska ha en permanent och unik egendom (ID). Och helst bör det (ID) tilldelas när objektet skapas. Så det har skrivits ut något liknande ...

Detta är ett exempel på vad du *** ska *** göra!

Definiera alltid uttryckliga defaultProps för alla rekvisita som inte krävs. Att tillhandahålla defaultProps innebär att läsaren av din kod inte behöver anta saker, eftersom de kommer att veta standardvärdet för rekvisiten bara genom att titta på defaultProps medan de återger komponenter.

Bad vs Bra exempel re: definiera defaultProps.

Som du ser finns det små men mycket viktiga saker som gör att din React-kod är relativt felfri under granskningsprocessen. Att spendera tiden på förhand för att lära dig de bästa metoderna och använda dem, innebär att du lägger mindre tid på att skriva om koden för att fixa dina misstag, vilket ger dig mer tid att göra saker du älskar. Och om du gör saker du älskar betyder att skriva kod, får du mer tid att skriva kod för ett annat projekt!

Mer av PRDXNs React-bästa metoder kan hittas här på Github: https://github.com/prdxn/React-JS-Checklist. Tveka inte att dela och bidra till denna lista. Och om du har några problem med att komma åt, slå oss upp i kommentarerna här.

Är du intresserad av att arbeta med PRDXN som klient eller som anställd? Slå oss sedan! Gå hit www.prdxn.com för mer information, inklusive kontaktinformation.