„PRDXN“ geriausios praktikos pavyzdžiai

„Facebook“ „React“ yra deklaratyvi, efektyvi ir lanksti „JavaScript“ biblioteka, skirta kurti vartotojo sąsajas (UI).

Kai pirmą kartą pradėjau rašyti kodą „React“, atsimenu, kad mačiau daugybę skirtingų metodų, labai skirtų nuo mokymo programos iki vadovėlio. Taigi mano ir PRDXN komanda sugalvojo vadovą ir (arba) geriausios praktikos sąrašą, kuris mums visiems padėtų greičiau ir greičiau.

„Facebook“ „React“ yra deklaratyvi, efektyvi ir lanksti „JavaScript“ biblioteka, skirta kurti vartotojo sąsajas (UI).

Tai yra mūsų vadovas. Tikimės, kad tai padės pagreitinti „React“ priėmimą ir naudojimą; ar jūs tik pradedate veiklą, ar pradedantysis, ar patyręs kūrėjas.

1. Išsaugokite organizuoto aplanko struktūrą:

Kaip ir bet kuriame programavimo / kodavimo projekte, tai yra labai svarbu! Jei jūsų projekto failai nėra organizuojami logiškai, jūs ir jūsų bendradarbiai galite susipainioti ir eikvoti brangų laiką ieškodami failų ar redaguodami neteisingus failus.

„PRDXN“ sugalvojome tokią aplanko struktūrą, kad viskas būtų lengviau ir mažiau varginanti. Jei norite žiūrėti, spustelėkite žaisti.

2. Komponentai - gabalėliai ir medžiai. Ei, jūs esate „Javascript Lumberjack“!

Komponentai yra reagavimo širdis. „React“ komponentas iš esmės yra bet kuri vartotojo sąsajos dalis.

Kurti loginius UI fragmentus (grupes): Visada padalinkite savo komponentus į gabalus (dar vadinamus loginėmis grupėmis). Apsvarstykite bet kokią programos sąsają ir pradėkite dalyti vartotojo sąsają į mažesnes logines dalis. Kiekvienas iš šių UI gabalų (grupių) yra potencialūs komponentai.

Medis, šakos ir poskyriai: visas / visas vartotojo sąsajos vaizdas (medis arba kamienas) yra padalintas į loginius gabalus (dar žinomus kaip šakos). Medis tampa pradiniu komponentu (išdėstymo komponentu), o tada kiekvienas UI gabalas (dar žinomas kaip šaka) taps subkomponentu, kurį galima dar suskirstyti į subkomponentus (dar žinomus kaip poskyrius). Tai neleidžia sutvarkyti vartotojo sąsajos ir taip pat leidžia duomenų ir būsenos pokyčiams logiškai pereiti iš medžio į filialus, o paskui į poskyrius.

Sukurkite logines vartotojo sąsajos grupes (gabaliukus): medis, šakos, poskyriai!

3. Komponentai - funkciniai ir klasiniai:

Yra du komponentų tipai: funkcinis ir klasės.

Kada turėčiau eiti su funkciniu komponentu? Eikite su funkciniu komponentu, jei jūsų komponentas daro ne ką daugiau, nei pateikia rekvizitus. Galvokite apie funkcinius komponentus kaip apie grynąsias funkcijas: jie visada veiks vienodai ir elgsis vienodai, turėdami tas pačias atramas. Be to, jiems nerūpi būvio ciklo metodai; jie yra komponentai be pilietybės.

Funkcinis komponentas, pavyzdys.

Kada turėčiau eiti su klasės komponentu? Jei jūsų komponentui reikia vidinės būsenos ir komponento būvio ciklo metodų, tada rinkitės klasę pagrįstą komponentą. Patikrinkite tai, kad suprastumėte daugiau apie „vidinę būseną“ ir „gyvenimo ciklo metodus“.

Klasės komponentas, pavyzdys.

4. Rekvizitai! Rekvizitai jums! Rekvizitai man! Bet ne, mes kalbame apie „React Props“!

„Konceptualiai komponentai yra tarsi„ JavaScript “funkcijos. Jie priima savavališkus įėjimus (vadinamus „rekvizitus“) ir grąžina „React“ elementus, apibūdinančius tai, kas turėtų būti rodomi ekrane. “Spustelėkite norėdami gauti šaltinį.

Atnešk kupranugarius! Na, tu gali palikti tuos kupranugarius desertui. Mes čia kalbame apie „camelCase“. Visada naudokite „camelCase“ patarimų pavadinimams. Į rekvizitus taip pat galima žiūrėti kaip į atributus, o „React“ nustatyta praktika yra naudoti „camelCase“ JSX atributams.

Visada naudokite „camelCase“ patarimų pavadinimams.

Patikėkite, tiesa, prisiekiu! Neatmeskite rekvizito vertės, kai jis yra aiškiai tikras. Net jei mes nepriskiriame tikrosios vertės rekvizitui, ji laikoma tikra verte, todėl nereikia reikšmės „tikrosios“ priskirti vertei.

Neatmeskite rekvizito vertės, kai jis yra aiškiai tikras.

Venkite masyvo rodyklės kaip pagrindinio atramos; vietoj to naudokite unikalų ID: matėme, kad per daug kūrėjų pateikia elemento rodyklę kaip raktą pateikdami sąrašą, o tai nėra gerai! Tai jie neteisingai rašo ...

Tai yra pavyzdys, ko turėtumėt *** nedaryti *** nedaryti!

Raktas yra vienintelis dalykas, kurį „React“ naudoja DOM elementams nustatyti. Taigi, kas nutinka, jei stumiate elementą į sąrašą arba pašalinate ką nors iš vidurio? Jei raktas yra tas pats kaip ir anksčiau, „React“ daro prielaidą, kad DOM elementas reiškia tą patį komponentų rinkinį (kaip ir anksčiau). Bet taip nėra!

Štai kodėl turėtumėte naudoti unikalų ID. Kiekvienas elementas turėtų turėti nuolatinę ir unikalią savybę (ID). Idealiu atveju jis (ID) turėtų būti priskirtas kuriant elementą. Taigi parašyta kažkas tokio:

Tai yra pavyzdys, ką turėtumėte atlikti ***!

Visada apibrėžkite aiškius „defaultProps“ elementus, kurių nereikia visiems rekvizitams. „DefaultProps“ teikimas reiškia, kad jūsų kodo skaitytojui nereikia prisiimti dalykų, nes jie žinos numatytąją rekvizito vertę tiesiog žiūrėdami „defaultProps“, o perteikdami komponentus.

Blogas ir geras pavyzdys: „defaultProps“ apibrėžimas.

Kaip matote, yra keletas nedidelių, tačiau labai svarbių dalykų, dėl kurių „React“ kodas peržiūros procese tampa gana be klaidų. Jei praleidžiate laiką iš anksto, kad išmoktumėte šios geriausios praktikos, ir ja pasinaudotumėte, reiškia, kad mažiau laiko praleidžiate perrašydami kodą, kad ištaisytumėte savo klaidas, suteikdami daugiau laiko atlikti tai, kas jums patinka. Ir jei tai, kas jums patinka, reiškia kodo rašymą, gausite daugiau laiko kodo rašymui kitam projektui!

Daugiau „PRDXN“ „React“ geriausios praktikos pavyzdžių galite rasti čia, „Github“: https://github.com/prdxn/React-JS-Checklist. Nedvejodami pasidalykite ir prisidėkite prie šio sąrašo sudarymo. Ir jei turite kokių nors prieigos problemų, spauskite mus čia esančiuose komentaruose.

Norite dirbti su PRDXN kaip klientas ar darbuotojas? Tada paspauskite mus! Norėdami gauti daugiau informacijos, įskaitant kontaktinę informaciją, eikite čia www.prdxn.com.