PRDXNs reaksjonspraksis

Facebook's React er et deklarativt, effektivt og fleksibelt JavaScript-bibliotek for å bygge brukergrensesnitt (UI).

Da jeg først begynte å skrive kode i React, husker jeg at jeg så mange forskjellige tilnærminger som varierte veldig fra tutorial til tutorial. Så teamet mitt på PRDXN og jeg kom med en guide / liste over beste praksis (BPs) som ville hjelpe oss alle å komme opp raskere, raskere.

Facebook's React er et deklarativt, effektivt og fleksibelt JavaScript-bibliotek for å bygge brukergrensesnitt (UI).

Følgende er vår guide. Vi håper dette hjelper deg med å fremskynde adopsjonen og bruken av React; enten du nettopp begynner / en nybegynner eller en erfaren utvikler.

1. Oppretthold en organisert mappestruktur:

Som med alle programmerings- / kodingsprosjekter er dette veldig viktig! Hvis prosjektfilene ikke er organisert logisk, kan du og dine samarbeidspartnere bli forvirrede og kaste bort dyrebar tid på å lete etter filer eller redigere feil filer.

Hos PRDXN fant vi ut følgende mappestruktur for å gjøre ting enklere og mindre frustrerende for alle. Klikk på play for å se.

2. Komponenter - biter og trær. Hei, du er en Javascript tømmerjakke!

Komponenter er hjertet i en reaksjon. En React-komponent er i utgangspunktet hvilken som helst del av et brukergrensesnitt.

Lag logiske brukergrensesnitt-biter (grupperinger): Del alltid komponentene dine i biter (også logiske grupperinger). Vurder ethvert applikasjonsgrensesnitt og begynn å dele brukergrensesnittet i mindre logiske biter. Hver av disse brukergrensesnittbunker (grupper) er potensielle komponenter.

Tre, grener og undergrener: Hele / full visning av brukergrensesnittet (treet eller bagasjerommet) er delt inn i logiske biter (aka grener). Treet blir startkomponenten (en layoutkomponent) og deretter vil hver del i brukergrensesnittet (aliasgren) bli en underkomponent som kan deles videre inn underkomponenter (aka undergrener). Dette holder UI organisert og lar også data og tilstandsendringer logisk flyte fra treet til grenene, og deretter undergrenene.

Lag logiske brukergrensesnitt (biter): Tre, grener, undergrener!

3. Komponenter - Funksjonell og klassebasert:

Det er to typer komponenter: funksjonell og klassebasert.

Når skal jeg gå med en funksjonell komponent? Gå med en funksjonell komponent hvis komponenten din ikke gjør mye mer enn å gi rekvisitter. Tenk på funksjonelle komponenter som rene funksjoner: de vil alltid gjengi på samme måte og oppføre seg på samme måte, gitt de samme rekvisittene. De bryr seg heller ikke om livssyklusmetoder; de er statsløse komponenter.

Funksjonell komponent, eksempel.

Når skal jeg gå med en klassebasert komponent? Hvis komponenten din trenger interne tilstands- og komponentlivssyklusmetoder, kan du gå for en klassebasert komponent. Sjekk dette for å hjelpe deg med å forstå mer om “intern tilstand” og “livssyklusmetoder”.

Klassebasert komponent, eksempel.

4. Rekvisitter! Rekvisita for deg! Rekvisita for meg! Men nei, vi snakker om React Props!

“Konseptuelt er komponenter som JavaScript-funksjoner. De godtar vilkårlige innganger (kalt “rekvisitter”) og returnerer React-elementer som beskriver hva som skal vises på skjermen. ”Klikk for kilde.

Ta inn kameler! Nei, du kan la kamellene ligge i desserten. Vi snakker camelCase her. Bruk alltid camelCase til rekvisittnavn. Rekvisitter kan også sees på som attributter, og konvensjonen satt av React er å bruke camelCase for JSX-attributter.

Bruk alltid camelCase til rekvisittnavn.

Tro meg, det er sant, jeg sverger! Utelat verdien av rekvisitten når det eksplisitt er sant. Selv om vi ikke tildeler en sann verdi til en rekvisitt, blir den ansett som en sann verdi, så det er ikke nødvendig å tilordne "sann" som en verdi til rekvisitten.

Utelat verdien av rekvisitten når det eksplisitt er sant.

Unngå å bruke en matriseindeks som nøkkelstøtte; bruk en unik ID i stedet: Vi har sett for mange utviklere bruke indeksen til et element som sin nøkkel når de gjengir en liste, noe som er SÅ ikke bra! Dette er hva de feil skriver ...

DETTE ER EKSEMPEL PÅ HVIL DU IKKE SKAL *** ***!

En nøkkel er det eneste React bruker for å identifisere DOM-elementer. Så hva skjer hvis du skyver et element til listen eller fjerner noe fra midten? Hvis nøkkelen er den samme som før, antar React at DOM-elementet representerer det samme settet med komponenter (som før). Men dette er ikke tilfelle!

Dette er grunnen til at du bør bruke en unik ID. Hver vare skal ha en permanent og unik eiendom (ID). Og ideelt sett bør den (ID-en) tilordnes når varen opprettes. Så det er skrevet ut noe som dette ...

DETTE ER EKSEMPEL PÅ HVA DU *** BØR *** gjøre!

Definer alltid eksplisitte defaultProps for alle ikke-påkrevde rekvisitter. Å tilby defaultProps betyr at leseren av koden din ikke trenger å anta ting, fordi de vil vite standardverdien for rekvisitten bare ved å se på defaultProps mens de gjengir komponenter.

Dårlig vs godt eksempel på nytt: definere defaultProps.

Som du ser er det små, men veldig viktige ting som gjør at React-koden din er relativt feilfri under gjennomgangsprosessen. Å bruke tiden på forhånd for å lære deg disse beste praksisene og bruke dem, betyr at du bruker mindre tid på å skrive kode igjen for å fikse feilene dine, og gi deg mer tid til å gjøre de tingene du elsker. Og hvis du gjør ting du elsker betyr å skrive kode, vil du få mer tid til å skrive kode for et annet prosjekt!

Mer av PRDXNs React beste praksis finner du her på Github: https://github.com/prdxn/React-JS-Checklist. Del gjerne og bidra til denne listen. Hvis du har noen problemer med å få tilgang, kan du slå oss opp i kommentarene her.

Er du interessert i å jobbe med PRDXN som klient eller som ansatt? Så slo oss opp! Gå hit www.prdxn.com for mer informasjon, inkludert kontaktinformasjon.