15 2020-də təqib etməli olduğunuz ən yaxşı təcrübəyə reaksiya verin

15 2020-də təqib etməli olduğunuz ən yaxşı təcrübəyə reaksiya verin

15 2020-də təqib etməli olduğunuz ən yaxşı təcrübəyə reaksiya verin
СОДЕРЖАНИЕ
02 июня 2020

Ən yaxşı təcrübələrə reaksiya verin


Yüksək interaktiv istifadəçi interfeysi qurmaqla məşğul olan bir ön tərəfin inkişaf etdiricisisinizsə, çox güman ki, alətlər dəstinizdə reaksiya göstərmisiniz. Reaksiya ilə yaradılan əsərlərinizi işləyərkən, React ən yaxşı təcrübələrinə uyğun işlərdə diqqətli olmalısınız. Bu, kodunuzu daha yaxşı təşkil etməyə kömək edəcəkdir.

Bildiyiniz kimi, React Facebook tərəfindən yaradılan bir kitabxanadır və bir çox maraqlı komponentlə inteqrasiya etməyə imkan verir. Əslində, hər hansı bir geliştirici öz komponentlərini yarada və onları cəmiyyət üçün əlçatan edə bilər.

Bu gün mövzu başlığını götürüb sizə göstəririk React ən yaxşı təcrübələrinin ən əsasları:

�� 1. Komponentləri kiçik və funksiyaya uyğun saxlayın

Bildiyimiz kimi, React ilə bir sıra vəzifələri yerinə yetirən nəhəng komponentlərə sahib olmaq mümkündür. Ancaq komponentləri dizayn etmək üçün daha yaxşı bir yol, kiçik bir hissə yaratmaqdır ki, bir komponent bir funksiyaya uyğun olsun. İdeal olaraq, tək bir komponent səhifənizin müəyyən bir hissəsini göstərməlidir və ya müəyyən bir davranışı dəyişdirməlidir. Bunun bir çox üstünlükləri var:

  • Funksiyaya xas olan komponentlər müstəqil ola bilər ki, bu da sınaq və təmir işini asanlaşdırır.
  • Hər kiçik komponent çox layihələr arasında təkrar istifadə edilə bilər.
  • Ümumi funksiyaları yerinə yetirən komponentlər cəmiyyətə təqdim edilə bilər.
  • Kiçik komponentlərlə performans optimallaşdırmalarını həyata keçirmək daha asandır.
  • Kiçik komponentləri yeniləmək daha asandır.
  • Daha böyük komponentlər daha çox yerinə yetirməlidirlər və saxlamaq çətin ola bilər.

Bir qısa komponent yaratmaq və çox funksiyaya xas olan komponent yaratmaq arasındakı tarazlıq təşkilatdan təşkilata qədər dəyişə bilər. Axı, istədiyiniz qədər çox sayda komponentə sahib ola bilərsiniz və eyni son nəticəni əldə etmək istədiyiniz hər hansı bir şəkildə yenidən topla bilərsiniz..

♻️ 2. Yenidən istifadə etmək vacibdir, buna görə tələb olunan minimuma qədər yeni komponentlər yaratmağa davam edin

Bir funksiyanın = bir komponentin qaydasına riayət etməklə komponentlərin təkrar istifadəsini yaxşılaşdıra bilərsiniz. Bunun mənası budur ki, bir funksiya üçün yeni bir komponent qurmağa çalışmısınız.

Layihənizdə və ya hər hansı bir layihədə komponentlərdən təkrar istifadə etməklə nəinki ardıcıllığa nail olacaqsınız, həm də cəmiyyətə öz töhfənizi verəcəksiniz.

Digər tərəfdən, hər hansı bir komponent böyük, yararsız hala düşsə və onu saxlamaq çətin olarsa, onu tələb olunan qədər kiçik komponentlərə bölmək daha yaxşıdır..

Məsələn, daha da irəli gedərək nişanlar işlədə bilən bir Button komponenti yarada bilərsiniz. Sonra hər dəfə bir düyməyə ehtiyacınız olanda istifadə ediləcək bir komponentiniz olacaq. Daha modul hala gətirmək bir çox işi eyni kod parçası ilə əhatə etməyə imkan verəcəkdir. Ortada bir yerə məqsəd qoymalısan. Komponentləriniz kifayət qədər mücərrəd olmalıdır, lakin çox mürəkkəb olmamalıdır.

sinif IconButton React.Component {genişləndirir
[…]
göstər () {
qayıt (

);
}
}

�� 3. Dublikat kodu birləşdirin – kodunuzu qurutun

Bütün kod üçün ümumi bir qayda, mümkün qədər qısa və qısa şəkildə saxlamaqdır.

Burada da heç bir fərq yoxdur, çünki React ən yaxşı təcrübələri kodunuzu qısa və dəqiq göstərməyinizi tapşırır. Bunun bir yolu təkrarlanmamaqdır – Özünüzü təkrarlamayın (quru).

Nümunə və oxşarlıq kodunu araşdıraraq buna nail ola bilərsiniz. Hər hansı biriniz varsa, kodu təkrarlamağınız mümkündür və təkrarlanmanı aradan qaldırmaq üçün imkanlarınız var. Çox güman ki, bir az yenidən yazmaq onu daha qısa edə bilər.

Bu, React-də təkrar istifadə prinsipinə çox güvənir. Nişanlar olan birdən çox düyməni əlavə etmək istədiyinizi söyləyək, hər düyməyə işarələmə əlavə etmək əvəzinə yuxarıda göstərdiyimiz IconButton komponentindən istifadə edə bilərsiniz. Hər şeyi bir sıra halına gətirərək daha da irəli gedə bilərsiniz.

const düymələri = [‘facebook’, ‘twitter’, ‘youtube’];

qayıt (

{
düymələr.map ((düymə) => {
qayıt (

);
})
}

);

�� 4. JavaScript-də CSS qoyun

Bir layihə üzərində işə başladıqda, bütün CSS üslublarını tək bir SCSS sənədində saxlamaq adi bir tətbiqdir. Qlobal bir prefiksin istifadəsi hər hansı bir potensial adın toqquşmasının qarşısını alır. Ancaq layihəniz genişləndikdə bu həll mümkün olmaya bilər.

JS-də CSS yazmağa imkan verən bir çox kitabxana var. EmosiyaJSZərif JS kitabxanalarında ən populyar iki CSS-dir.

Layihənizdə EmotionJS istifadə nümunəsi. EmotionJS istehsalınız üçün tam CSS faylları yarada bilər. Əvvəlcə npm istifadə edərək EmotionJS quraşdırın.

npm quraşdırma – @ emosiya / özək

Bundan sonra tətbiqinizdə EmotionJS-i idxal etməlisiniz.

‘@ emosiya / nüvədən’ {jsx} idxal edin

Aşağıdakı parçada göstərildiyi kimi bir elementin xüsusiyyətlərini təyin edə bilərsiniz:

icazə verin Komponent = rekvizit => {
qayıt (

)
}

Budur tam bağlantısı EmotionJS sənədləri.

�� 5. Yalnız lazım olduqda şərh verin

Şərhləri yalnız zəruri hallarda koda əlavə edin. Bu təkcə React ən yaxşı təcrübələrinə uyğun deyil, eyni zamanda iki məqsədə xidmət edir:

  • Bu kodu vizual olaraq ləkələmədən azad edir.
  • Zamanla biraz sonra kod dəyişdirmək olarsa, şərh və kod arasındakı potensial qarşıdurmadan qaçacaqsınız.

�� 6. Funksiyadan sonra komponenti adlandırın

Asanlıqla tanına biləcəyi şəkildə icra etdiyi funksiyanın ardından bir komponent adlandırmaq yaxşı bir fikirdir.

Məsələn, ProductTable – komponentin nə etdiyini dərhal çatdırır. Digər tərəfdən, kodun ehtiyacına əsaslanaraq komponenti adlandırsanız, gələcək zaman nöqtəsində sizi çaşdıra bilər.

Başqa bir nümunə, Avatarın hər yerdə – müəlliflər, istifadəçilər və ya şərhlərdə istifadə oluna bilməsi üçün adlandırılması daha məqsədəuyğundur. Bunun əvəzinə, komponentin istifadəsi kontekstində AuthorAvatar adlandırsaq, o komponentin istifadəsini məhdudlaşdırardıq..

Bundan əlavə, funksiyanın ardından bir komponentin adlandırılması cəmiyyət üçün daha faydalı olur, çünki aşkar olunma ehtimalı daha yüksəkdir.

�� 7. Komponent adları üçün başlıqlardan istifadə edin

Bir çox insanlar kimi, JSX (JavaScript uzadılması) istifadə edirsinizsə, yaratdığınız komponentlərin adlarını böyük hərflərlə başlamaq lazımdır. Məsələn, komponentlər adını seçmə düyməsinin əvəzinə SelectButton və ya menyu yerinə Menyu kimi adlandıracaqsınız. Bunu JSX standart HTML etiketlərindən fərqli olaraq təyin edə bilməsi üçün edirik.

Əvvəllər reaktiv versiyaları xüsusi adlardan fərqləndirmək üçün bütün quraşdırılmış adların siyahısını tərtib etmişdir. Lakin siyahının daim yenilənməsinə ehtiyac duyulduğundan, bu da silindi və başlıqlar norma halına gəldi.

JSX sizin seçdiyiniz dil deyilsə, kiçik hərflərdən istifadə edə bilərsiniz. Bununla birlikdə, bu, layihənizdən kənar komponentlərin təkrar istifadəsini azalda bilər.

�� 8. Digər adlandırma konvensiyalarını xatırlayın

React ilə işləyərkən ümumiyyətlə JSX (JavaScript Extension) fayllarından istifadə edirsiniz. Buna görə React üçün yaratdığınız hər hansı bir komponentə Paskal kassasında və ya üst dəvə qabında ad verilməlidir. Bu boşluq olmadan adlara və hər sözün ilk hərfini böyük hərflə tərcümə edir.

Bir forma təqdim edən bir funksiya yaratmaq istəyirsinizsə, onu təqdimForm, Submit_form və ya Submit_form deyil, üst dəvəli halda SubmitForm adlandırmalısınız. Yuxarı dəvə işi daha çox Paskal davası adlanır. Budur bir daha nümunələrin siyahısı Paskal vəziyyətindəki dəyişən və funksiya adları.

�� 9. Göstəriş verməkdən ayrı hallar

Reaktdakı komponentlər dövlətli və ya vətəndaşlığı olmayan ola bilər. Vəziyyətli komponentlər komponentin vəziyyəti haqqında məlumat saxlayır və lazımi konteksti təmin edir. Bundan fərqli olaraq, vətəndaşlığı olmayan komponentlərin yaddaşı yoxdur və UI-nin digər hissələrinə kontekst verə bilməz. Onlar yalnız əsas komponentdən rekvizitlər (girişlər) alır və sizə JSX elementlərini qaytarır. Onlar genişlənə bilən və təkrar istifadə edilə biləndir və JavaScript-də təmiz funksiyaya bənzəyir.

React ən yaxşı təcrübələrindən biri dövlət məlumat vermə məntiqinizi göstərilən vətəndaşlığı olmayan məntiqdən ayrı saxlamaqdır. Məlumatları yükləmək üçün bir şərtli bir komponentin olması və bu məlumatları göstərmək üçün başqa bir vətəndaşlığı olmayan bir komponentin olması daha yaxşıdır. Bu, komponentlərin mürəkkəbliyini azaldır.

Sonrakı React versiyaları v16.8 yeni bir xüsusiyyətə sahibdir – Dövlətlə əlaqəli komponentləri yazan React Hooks. Bu, nəticədə sinif əsaslı komponentlərə olan ehtiyacı aradan qaldıra bilər.

Məsələn, tətbiqiniz bəzi məlumatlar əldə edir. Etmək istədiyiniz əsas komponentdəki məlumatları idarə etmək və mürəkkəb göstərmə tapşırıqlarını rekvizit olaraq alt komponentə ötürməkdir.

‘./RenderTable’ dən RenderTable idxal edin;

sinif Cədvəl Komponentini genişləndirir {
vəziyyət = {yükləmə: həqiqi};

göstər () {
const {yükləmə, tableData} = this.state;
geri yükləmə? :;
}

komponentDidMount () {
fetchTableData (). sonra (tableData => {
this.setState ({yükləmə: yalan, tableData});
});
}
}

�� 10. Kod gözlənildiyi kimi yerinə yetirilməlidir və sınaqdan keçirilməlidir

Həqiqətən, bu qaydanın izaha ehtiyacı yoxdur. Yazdığınız kod gözlənildiyi kimi davranmalı və asanlıqla və tez sınaqdan keçirilməlidir. Test sənədlərinizi .test şəkilçisi ilə mənbə faylları ilə eyniləşdirmək yaxşı bir təcrübədir. Bundan sonra test sənədlərini tapmaq asan olacaq.

Reaksiya kodunuzu sınamaq üçün JEST istifadə edə bilərsiniz.

�� 11. Hər hansı bir komponentə aid bütün fayllar bir qovluqda olmalıdır

Hər hansı bir komponentə aid olan bütün sənədləri styling sənədləri daxil olmaqla tək bir qovluqda saxlayın.

Yalnız müəyyən bir komponent tərəfindən istifadə olunan hər hansı bir kiçik komponent varsa, bu kiçik komponentlərin hamısını həmin komponent qovluğunda saxlamaq məqsədəuyğundur. Bundan sonra iyerarxiyanı başa düşmək asan olacaq – böyük komponentlərin öz qovluqları var və bütün kiçik hissələri alt qovluqlara bölünür. Bu yolla, asanlıqla hər hansı digər layihəyə kod çıxara və ya istədiyiniz zaman kodu dəyişdirə bilərsiniz.

Məsələn, Form komponenti üçün CSS sənədləri, nişanlar, şəkillər, testlər və Forma aid hər hansı digər alt komponentlər kimi bütün hissələr eyni qovluqda yerləşməlidir. Faylları həssaslıqla adlandırsanız və əlaqəli sənədləri məntiqi bir yerdə saxlasanız, sonradan onları tapmaqda çətinlik çəkməyəcəksiniz.

�� 12. Bit kimi vasitələrdən istifadə edin

Bütün Reaksiya komponentlərinizi təşkil etməyə kömək edən ən yaxşı təcrübələrdən biri də bu kimi vasitələrin istifadəsidir Bit.

Bu vasitələr kodu qorumağa və yenidən istifadə etməyə kömək edir. Bundan əlavə, kodun aşkar olunmasına kömək edir və komponentlərin qurulmasında komanda əməkdaşlığını təşviq edir. Ayrıca, kod layihələr arasında sinxronlaşdırıla bilər.

�� 13. Parça kitabxanalarından istifadə edin

Kod parçaları ən yaxşı və ən yeni sintaksis ilə ayaqlaşmağa kömək edir. Bunlar kodunuzu nisbətən səhvsiz saxlamağa kömək edir, buna görə də qaçırmamalı olduğunuz ən yaxşı reaksiyalardan biridir.

Istifadə edə biləcəyiniz bir çox parça kitabxanası var, məsələn, ES7 React, Redux, JS parçaları və s..

✍️ 14. Bütün kodlar üçün testlər yazın

Hər hansı bir proqramlaşdırma dilində, adekvat test, layihənizə əlavə edilmiş hər hansı bir yeni kodun mövcud kodla yaxşı birləşməsini və mövcud funksionallığı pozmamasını təmin edir. Yaratdığınız hər hansı bir yeni komponent üçün testlər yazmaq yaxşı bir fikirdir. Yaxşı bir təcrübə olaraq, bütün müvafiq testləri keçirmək üçün komponent qovluğunuzda __Test__ qovluğu yaratmalısınız.

Reaksiya proqramındakı testləri iki yerə bölmək olar: React tətbiqindən istifadə edərək komponentlərin iş qabiliyyətini yoxlamaq və brauzerdə göstərildikdən sonra tam tətbiqetmənizdə testlər. Sonuncu kateqoriyadakı testlər üçün çapraz brauzer test alətlərindən istifadə edə bilərsiniz.

Əvvəlki üçün JavaScript testi istifadə edə bilərsiniz, Jest Reaksiya komponentlərini sınamaq üçün jsdom istifadə edərək HTML DOM-u təqlid etmək. Tamamilə dəqiq bir test yalnız bir real cihazdakı bir brauzerdə mümkün olsa da, Jest, layihənizin inkişaf mərhələsində real test mühitinin yaxşı bir yaxınlaşmasını təmin edir.

�� 15. Asma qaydalarına əməl edin, çox uzun olan xətləri qırın

Linting, potensial səhvlər üçün kodu təhlil edən bir proqram işlətdiyimiz bir müddətdir.

Əksəriyyəti, dil ilə əlaqəli məsələlərdə istifadə edirik. Ancaq bir çox digər problemləri, xüsusən kod tərzi avtomatik olaraq həll edə bilər. Reaktiv kodunuzda bir lenti istifadə edərək kodunuzu səhvsiz və səhvsiz saxlamağa kömək edir.

Ən yaxşı təcrübələrə reaksiya vermək üçün son sözlər

Ümid edirəm ki, ən yaxşı reaksiya verəcəyiniz bu siyahı, layihələrinizi düzgün yola qoymağınıza kömək edəcək və sonradan yolda ola biləcək problemlərdən qaçınacaqsınız.

Reaksiya ilə əlaqəli suallarınız varsa, onları aşağıdakı şərhlərdə çekinmeyin.

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

Andrei Băicuș tərəfindən kod nümunələri. Şaumik Daityari tərəfindən məzmun yeniləmələri

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector