PRDXN's reaģēšanas paraugprakse

Facebook’s React ir deklaratīva, efektīva un elastīga JavaScript bibliotēka lietotāja saskarņu (UI) veidošanai.

Kad es pirmo reizi sāku rakstīt kodu React, es atceros, ka redzēju daudz dažādu pieeju, kas ievērojami atšķīrās no apmācības līdz apmācībai. Tāpēc mana komanda PRDXN un es nāca klajā ar ceļvedi / paraugprakses sarakstu (BP), kas mums visiem palīdzētu ātrāk un ātrāk.

Facebook’s React ir deklaratīva, efektīva un elastīga JavaScript bibliotēka lietotāja saskarņu (UI) veidošanai.

Šis ir mūsu ceļvedis. Mēs ceram, ka tas palīdzēs jums paātrināt React pieņemšanu un izmantošanu; neatkarīgi no tā, vai esat tikko uzsācis / iesācējs vai pieredzējis izstrādātājs.

1. Uzturiet organizētu mapju struktūru:

Tāpat kā jebkura programmēšanas / kodēšanas projekta gadījumā, tas ir ļoti svarīgi! Ja jūsu projekta faili nav sakārtoti loģiski, jūs un jūsu līdzstrādnieki var sajaukt un tērēt dārgo laiku, meklējot failus vai rediģējot nepareizus failus.

Uzņēmumā PRDXN mēs nāca klajā ar šādu mapju struktūru, lai padarītu visu vieglāku un mazāk satraucošu visiem. Lai skatītos, noklikšķiniet uz Atskaņot.

2. Sastāvdaļas - gabali un koki. Sveiki, jūs esat Javascript kokvedējs!

Komponenti ir reaģēšanas sirds. React komponents būtībā ir jebkura lietotāja saskarnes sastāvdaļa.

Izveidojiet loģiskus lietotāja saskarnes gabalus (grupas): vienmēr sadaliet komponentus gabalos (pazīstami arī kā loģiski grupējumi). Apsveriet jebkuru lietojumprogrammu saskarni un sāciet sadalīt lietotāja saskarni mazākos loģiskos gabalos. Katrs no šiem UI gabaliem (grupām) ir potenciālie komponenti.

Koks, zari un apakšnozari: pilnīgs / pilns UI skats (koks vai stumbrs) ir sadalīts loģiskos gabalos (aka filiāles). Koks kļūst par sākumkomponentu (izkārtojuma sastāvdaļu), un pēc tam katrs lietotāja saskarnes rieciens (aka filiāle) kļūs par apakškomponentu, ko var sīkāk sadalīt apakškomponentos (aka apakšnozarēs). Tas uztur UI sakārtotu un ļauj arī datu un stāvokļa izmaiņām loģiski plūst no koka uz filiālēm un pēc tam apakšnozarēm.

Izveidojiet loģiskas UI grupas (gabalus): koks, zari, apakšnozari!

3. Sastāvdaļas - funkcionālās un klases:

Ir divu veidu komponenti: funkcionālie un klases.

Kad man jāiet pie funkcionālā komponenta? Dodieties ar funkcionālu komponentu, ja jūsu komponents nedara daudz vairāk kā tikai rekvizītu atveidošanu. Domājiet par funkcionāliem komponentiem kā par tīru funkciju: tie vienmēr darbosies vienādi un izturēsies vienādi, ņemot vērā tos pašus rekvizītus. Viņiem nerūp arī dzīves cikla metodes; tie ir bezvalstnieki komponenti.

Funkcionālās sastāvdaļas piemērs.

Kad man jāiet ar klases sastāvdaļu? Ja jūsu komponentam ir nepieciešami iekšējie stāvokļi un komponenta dzīves cikla metodes, pārejiet uz klasi balstītu komponentu. Pārbaudiet šo, lai palīdzētu jums saprast vairāk par “iekšējo stāvokli” un “dzīves cikla metodēm”.

Klases komponents, piemērs.

4. Butaforijas! Balsti jums! Balsti man! Bet nē, mēs runājam React Props!

“Konceptuāli komponenti ir kā JavaScript funkcijas. Viņi pieņem patvaļīgas ievades (sauktas par “butaforijām”) un atgriežas reaģējošos elementus, kas apraksta to, kam vajadzētu parādīties ekrānā. ”Noklikšķiniet, lai iegūtu avotu.

Ienāc kamieļos! Nē, jūs varat atstāt šos kamieļus desertā. Mēs šeit runājam camelCase. Vienmēr izmantojiet camelCase rekvizītu nosaukumiem. Butaforijas var uzskatīt arī par atribūtiem, un React noteiktais princips ir izmantot camelCase JSX atribūtiem.

Vienmēr izmantojiet camelCase rekvizītu nosaukumiem.

Ticiet man, tā ir taisnība, es zvēru! Neizmantojiet rekvizīta vērtību, ja tā ir nepārprotami patiesa. Pat ja mēs nepiešķiram rekvizītam patiesu vērtību, tas tiek uzskatīts par patiesu vērtību, tāpēc nav jāpiešķir kā patiess vērtība rekvizītam.

Neizmantojiet rekvizīta vērtību, ja tā ir nepārprotami patiesa.

Neizmantojiet masīva indeksu kā galveno rekvizītu; tā vietā izmantojiet unikālu ID: Esam redzējuši, ka pārāk daudz izstrādātāju, veidojot sarakstu, kā atslēgu izmanto elementa indeksu, kas ir tik slikti! To viņi nepareizi raksta ...

Šis ir piemērs tam, ko jums vajadzētu darīt *** ne *** darīt!

Atslēga ir vienīgais, ko React izmanto, lai identificētu DOM elementus. Tātad, kas notiek, ja kādu vienumu iestumj sarakstā vai kaut ko noņem no tā vidus? Ja atslēga ir tāda pati kā iepriekš, React pieņem, ka DOM elements apzīmē to pašu komponentu komplektu (kā iepriekš). Bet tas tā nav!

Tāpēc jums vajadzētu izmantot unikālu ID. Katram vienumam jābūt pastāvīgam un unikālam īpašumam (ID). Ideālā gadījumā tas (ID) būtu jāpiešķir, kad vienums tiek izveidots. Tātad ir izrakstīts kaut kas līdzīgs šim ...

Šis ir piemērs tam, ko jums vajadzētu darīt *** darīt!

Vienmēr definējiet skaidrus noklusējuma procentus visiem rekvizītiem, kas nav nepieciešami. Nodrošinot noklusējumaProps, tas nozīmē, ka jūsu koda lasītājam nav jāuzņemas lietas, jo viņš zina rekvizīta noklusējuma vērtību, vienkārši atveidojot komponentus, apskatot noklusējuma vērtībasProps.

Slikts vs labs piemērs: noklusējumaProps definēšana.

Kā redzat, ir mazas, bet ļoti svarīgas lietas, kuru dēļ React kods pārskatīšanas procesā kļūst relatīvi bez kļūdām. Pavadot laiku iepriekš, lai apgūtu šo paraugpraksi un izmantotu to, tas nozīmē, ka mazāk laika jāpavada koda pārrakstīšanai, lai labotu savas kļūdas, dodot vairāk laika darīt iecienītās lietas. Un, ja tas, kas jums patīk, nozīmē koda rakstīšanu, jūs iegūsit vairāk laika koda rakstīšanai citam projektam!

Vairāk par PRDXN React labāko praksi var atrast šeit Github: https://github.com/prdxn/React-JS-Checklist. Lūdzu, jūtieties brīvi dalīties un dot ieguldījumu šajā sarakstā. Un, ja jums ir kādas problēmas ar piekļuvi, uzrakstiet šeit komentārus.

Vai vēlaties strādāt ar PRDXN kā klientu vai darbinieku? Tad sit mūs augšā! Dodieties šeit www.prdxn.com, lai iegūtu sīkāku informāciju, ieskaitot kontaktinformāciju.