15 Reagirajte najbolje prakse koje trebate slijediti u 2020. godini

Reagirajte najbolje prakse


Ako ste prednji programer koji se bavi izgradnjom vrlo interaktivnih korisničkih sučelja, najvjerovatnije ste dobili React u svom alatu. Dok radite na svojim kreacijama koje pokreću React, trebali biste biti oprezni da radite stvari usklađene s najboljim postupcima React-a. To će vam pomoći da svoj kôd bude bolje organiziran.

Kao što znate, React je knjižnica koju je stvorio Facebook i omogućava integraciju s mnogim zanimljivim komponentama. U stvari, svaki programer može stvoriti vlastite komponente i učiniti ih dostupnim zajednici.

Danas vodimo temu i pokazujemo vam najosnovnija od najboljih praksi tvrtke React:

�� 1. Komponente držite male i ovisne o funkciji

Kao što svi znamo, s Reactom je moguće imati ogromne komponente koje izvršavaju brojne zadatke. Ali bolji način dizajniranja komponenti je zadržati ih malim, tako da jedna komponenta odgovara jednoj funkciji. U idealnom slučaju, jedna komponenta trebala bi prikazati određeni dio vaše stranice ili izmijeniti određeno ponašanje. Ima mnogo prednosti za ovo:

  • Dijelovi specifični za funkciju mogu biti samostalni, što olakšava testiranje i održavanje.
  • Svaka mala komponenta može se ponovo upotrijebiti u više projekata.
  • Komponente koje izvršavaju opće funkcije mogu biti dostupne zajednici.
  • S manjim komponentama lakše je provoditi optimizacije performansi.
  • Lakše je ažurirati manje komponente.
  • Veće komponente moraju djelovati teže i možda ih je teško održavati.

Ravnoteža između stvaranja jedne koncizne komponente i stvaranja više komponenti specifičnih za funkciju može varirati od organizacije do organizacije. Uostalom, možete imati onoliko komponenti koliko želite i ponovo ih kombinirati na bilo koji način koji želite postići isti krajnji rezultat.

♻️ 2. Ponovna upotreba je važna, stoga zadržite stvaranje novih komponenti na minimumu koji je potreban

Pridržavajući se pravila jedne funkcije = jedna komponenta, možete poboljšati ponovnu upotrebu komponenata. To znači da biste trebali preskočiti pokušaj stvaranja nove komponente za funkciju ako već postoji komponenta za tu funkciju.

Ako ponovo upotrebljavate komponente u svom projektu ili u bilo kojem broju projekata, ne samo da ćete postići dosljednost, već ćete i pridonijeti zajednici.

S druge strane, ako bilo koja komponenta postane golema, neiskretna i teška za održavanje, bolje je razdvojiti je na toliko manjih komponenti koliko je potrebno.

Na primjer, možete čak ići dalje i stvoriti komponentu gumba koja može upravljati ikonama. Zatim, svaki put kada vam treba gumb, imat ćete komponentu koju trebate upotrijebiti. Ako to učinite modularnijim, omogućit ćete da pokrijete mnoge slučajeve istim dijelom koda. Morate ciljati negdje u sredini. Vaše bi komponente trebale biti dovoljno apstraktne, ali ne bi trebale biti pretjerano složene.

klasa IconButton proširuje React.Component {
[…]
render () {
povratak (

);
}
}

�� 3. Objedinite duplikat koda – SUŠITE svoj kod

Zajedničko pravilo za sav kod je da bude što kraći i sažetiji.

Ovdje nije ništa drugačije, jer najbolje prakse tvrtke React također vas upućuju da kôd budete kratki i precizni. Jedan od načina da to učinite je izbjegavanje dupliciranja – nemojte ponavljati sebe (DRY).

To možete postići ispitivanjem koda za uzorke i sličnosti. Ako nađete bilo koji, moguće je da ponavljate kôd, a postoji prostor da uklonite kopiranje. Najvjerojatnije, malo prepisivanja može ga učiniti sažetijim.

To se uvelike oslanja na princip ponovne upotrebe u React-u. Recimo da želite dodati više gumba koji sadrže ikone, umjesto dodavanja oznake za svaki gumb možete jednostavno upotrijebiti komponentu IconButton koju smo prikazali gore. Možete čak i dalje ako preslikavate sve u niz.

const gumbi = [‘facebook’, ‘twitter’, ‘youtube’];

povratak (

{
gumbi.map ((gumb) => {
povratak (

);
})
}

);

�� 4. Stavite CSS u JavaScript

Kada počnete raditi na projektu, uobičajena je praksa da se svi CSS stilovi zadrže u jednoj SCSS datoteci. Upotreba globalnog prefiksa sprječava eventualne sudare imena. Međutim, kada se poveća vaš projekt, ovo rješenje možda nije izvedivo.

Postoji mnogo knjižnica koje vam omogućuju pisanje CSS-a u JS-u. EmotionJS i čaroban dva su najpopularnija CSS-a u JS knjižnicama.

Evo primjera upotrebe EmotionJS-a u svom projektu. EmotionJS može generirati kompletne CSS datoteke za vašu proizvodnju. Prvo instalirajte EmotionJS koristeći npm.

npm install –save @ emotion / core

Zatim morate uvesti EmotionJS u svoju aplikaciju.

import {jsx} iz ‘@ emotion / core’

Možete postaviti svojstva elementa kao što je prikazano u isječku u nastavku:

neka je Component = rekvizit => {
povratak (

)
}

Evo poveznice do cjelovitog dokumentaciju EmotionJS.

�� 5. Komentirajte samo tamo gdje je to potrebno

Dodajte komentare za kodiranje samo tamo gdje je to potrebno. Ovo nije samo u skladu s React-ovom najboljom praksom, već istovremeno ima dvije svrhe:

  • Šifra će vizualno biti nesmetana.
  • Izbjeći ćete potencijalni sukob između komentara i koda ako dođe do promjene koda u nekom kasnijem razdoblju.

�� 6. Nazovite komponentu nakon funkcije

Bilo bi dobro imenovati komponentu prema funkciji koju izvršava tako da bude lako prepoznatljiva.

Na primjer, ProductTable – trenutno prenosi ono što čini komponenta. S druge strane, ako komponentu imenujete na temelju potrebe za kodom, to vas može zbuniti u budućem trenutku.

Drugi primjer, poželjno je da se komponenta imenuje Avatar kako bi se mogla koristiti bilo gdje – za autore, korisnike ili u komentarima. Umjesto toga, ako imenujemo komponentu AutorAvatar u kontekstu njezine upotrebe, ograničavali bismo korisnost te komponente.

Osim toga, imenovanje komponente nakon funkcije čini korisnijom zajednici jer je vjerojatnije da će je otkriti.

�� 7. Koristite velika slova za nazive komponenata

Ako, kao i većina ljudi, koristite JSX (JavaScript proširenje), imena komponenti koje stvorite trebaju početi s velikim slovima. Na primjer, sastojke ćete imenovati SelectButton umjesto SelectButton ili Menu umjesto izbornika. To radimo tako da ih JSX može prepoznati drugačije od zadanih HTML oznaka.

Ranije verzije Reacta održavale su popis svih ugrađenih imena kako bi ih razlikovale od prilagođenih imena. No kako je popis zahtijevao stalno ažuriranje, to je ukisano i glavni gradovi su postali norma.

U slučaju da JSX nije vaš odabrani jezik, možete upotrijebiti mala slova. Međutim, ovo može smanjiti ponovnu upotrebu komponenata nakon vašeg projekta.

�� 8. Imajte na umu ostale konvencije o imenovanju

Kad radite s Reactom, općenito koristite datoteke JSX (JavaScript Extension). Svaka komponenta koju stvorite za React stoga bi trebala biti imenovana u slučaju Pascal ili gornjem slučaju kamile. To znači imena bez razmaka i veliko slovo s velikim slovom.

Ako želite stvoriti funkciju koja predaje obrazac, trebate mu dati SubmitForm u gornjem slučaju kućice deve, a ne submitForm, submit_form ili submit_form. Slučaj gornje deve češće se naziva Pascal case. Evo dalje popis primjera imena varijabli i funkcija u slučaju Pascal.

�� 9. Izdvojite značajne aspekte od prikazivanja

Komponente u Reactu mogu biti državne ili apatridne. Sastavne komponente pohranjuju informacije o stanju komponente i pružaju potreban kontekst. Suprotno tome, komponente bez stanja nemaju memoriju i ne mogu dati kontekst drugim dijelovima korisničkog sučelja. Oni primaju samo rekvizite (ulaze) od nadređene komponente i vraćaju vam JSX elemente. Oni su skalabilni i za višekratnu upotrebu i slični su čistoj funkciji u JavaScript-u.

Jedna od najboljih praksi React-a je da držite svoju državnu logiku učitavanja odvojeno od logike besparice. Bolje je imati jednu komponentnu komponentu za učitavanje podataka i drugu komponentu bez stanja za prikaz tih podataka. Time se smanjuje složenost komponenata.

Kasnije verzije React-a v16.8 imaju novu značajku – React Hooks, u koju se pišu izvanredne komponente povezane sa funkcijama. To bi eventualno moglo eliminirati potrebu za komponentama temeljenim na razredima.

Na primjer, vaša aplikacija dohvaća neke podatke na verziji. Ono što želite učiniti je upravljati podacima u glavnoj komponenti i složen zadatak prikazivanja podkomponenti predati kao rekvizite.

uvoz RenderTable s ‘./RenderTable’;

Tabela klase proširuje komponentu {
stanje = {loading: true};

render () {
const {loading, tableData} = this.state;
povratno učitavanje? :;
}

komponentaDidMount () {
fetchTableData (). tada (tableData => {
this.setState ({učitavanje: lažno, tableData});
});
}
}

�� 10. Kôd se treba provoditi kako se očekuje i biti testiran

Zaista, ovo pravilo ne treba objašnjenje. Kôd koji napišete trebao bi se ponašati onako kako se očekuje i treba ga lako i brzo ispitati. Dobra je praksa da vaše testne datoteke identično izvornim datotekama imenujete sufiksom .test. Tada će biti lako pronaći testne datoteke.

Pomoću JEST-a možete testirati svoj React kôd.

�� 11. Sve datoteke povezane s bilo kojom komponentom trebaju biti u jednoj mapi

Sve datoteke koje se odnose na bilo koju komponentu držite u jednoj mapi, uključujući datoteke za oblikovanje.

Ako postoji bilo koja mala komponenta koju koristi samo određena komponenta, ima smisla te manje komponente sve zajedno nalaziti u mapi te komponente. Hijerarhiju će tada biti lako razumjeti – velike komponente imaju svoju mapu i svi su njihovi manji dijelovi podijeljeni u podmape. Na ovaj način možete jednostavno izvaditi kôd na bilo koji drugi projekt ili čak i izmijeniti kôd kad god želite.

Na primjer, za komponentu Obrazaca svi dijelovi kao što su CSS datoteke, ikone, slike, testovi i sve ostale podkomponente koje se odnose na Obrazac trebaju se nalaziti u istoj mapi. Ako datoteke imenujete razumno i povezujete povezane datoteke logično, nećete ih imati poteškoće kasnije.

�� 12. Koristite alate poput Bit

Jedna od najboljih praksi tvrtke React koja pomaže organizirati sve vaše komponente React je upotreba alata poput bit.

Ovi alati pomažu u održavanju i ponovnoj uporabi koda. Pored toga, on pomaže kodu da postane vidljiv i potiče suradnju tima u izradi komponenti. Također se kôd može sinkronizirati između projekata.

�� 13. Upotrijebite biblioteke isječaka

Isječci koda pomažu vam da budete u toku s najboljom i najnovijom sintaksom. Također pomažu u održavanju vašeg koda relativno bez grešaka, tako da je ovo jedna od najboljih React najboljih praksi koje ne smijete propustiti..

Postoje mnoge biblioteke isječaka koje možete koristiti kao ES7 React, Redux, JS Snippets itd..

✍️ 14. Napišite testove za sav kod

U bilo kojem programskom jeziku odgovarajuće testiranje osigurava da se svaki novi kôd dodan u vaš projekt dobro integrira s postojećim kodom i ne naruši postojeću funkcionalnost. Dobro je napisati testove za bilo koju novu komponentu koju stvorite. Kao dobra praksa, trebali biste stvoriti __Test__ direktorij u direktoriju svoje komponente da biste smjestili sve relevantne testove.

Testove React možete široko podijeliti u dva dijela: testiranje funkcionalnosti komponenata pomoću React aplikacije i testove na vašu kompletnu aplikaciju nakon što se ona pokrene u pregledniku. Za testove u potonjoj kategoriji možete koristiti alate za ispitivanje putem pretraživača.

Za prvo možete upotrijebiti JavaScript test runner, Jest oponašati HTML DOM pomoću jsdom za testiranje React komponenata. Iako je potpuno točan test moguć samo u pregledniku na stvarnom uređaju, Jest omogućuje dobro približavanje stvarnog okruženja testiranja tijekom razvojne faze vašeg projekta..

�� 15. Slijedite pravila vezanja, raščlanite predugo

Povezivanje je proces u kojem pokrećemo program koji analizira kod za potencijalne pogreške.

Uglavnom ga koristimo za jezička pitanja. Ali također može automatski riješiti i mnoge druge probleme, posebno stil koda. Upotreba lintera u vašem React kodu pomaže da vaš kôd ostane relativno pogrešan i bez grešaka.

Završne riječi o najboljim postupcima React-a

Nadam se da će vam ovaj popis najboljih praksi kompanije React pomoći da svoje projekte stavite na pravi put i izbjegnete moguće probleme kasnije na putu.

Ako imate bilo kakva pitanja u vezi s Reaktom, slobodno ih pošaljite u komentarima u nastavku.

Ne zaboravite se pridružiti našem tečaju o ubrzanju ubrzanja stranice WordPress. Pomoću nekih jednostavnih ispravki možete smanjiti vrijeme učitavanja za čak 50-80%:

Primjeri kod Andreja Băicușa. Ažuriranja sadržaja Shaumik Daityari

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map