React ilə veb sayt yaratmaq üçün ilk addım funksional komponentlər yaratmaqdır. Bu komponentlər, həm görünüş, həm də məntiqi hissəni bir yerdə saxlayaraq veb saytın hazırlanmasını asanlaşdırır. Məsələn, bir "Əlaqə formu" və ya "Xəbərlər bölməsi" üçün ayrıca komponent yaradaraq, kodu təkrar-təkrar yazmadan saytını daha sürətli yaza bilərsən.
İlk Komponentimizi Yaradırıq
Komponentlər React-in əsas anlayışlarından biridir. Onlar istifadəçi interfeysləri (UI) qurmaq üçün təməl olan elementlərdir, bu da onları React yolçuluğunuza başlamaq üçün mükəmməl edir!
Bu Bloqda Öyrənəcəyik:
- - Komponent nədir
- - Komponentlərin React tətbiqində hansı rolu var
- - İlk React komponentinizi necə yaratmaq olar
- - Komponentlər: UI qurma blokları
Veb saytda HTML, <h1> və <li> kimi daxili taglarla zəngin strukturlaşdırılmış sənədlər yaratmağa imkan verir:
<article>
<h1>İlk Komponentim</h1>
<ol>
<li>Komponentlər: UI Qurma Blokları</li>
<li>Komponent Tərifi</li>
<li>Komponentdən İstifadə</li>
</ol>
</article>
Bu markup, məqaləni <article>, başlığı <h1>, və (qısaldılmış) məzmun cədvəlini <ol> olaraq təmsil edir. CSS ilə style, JavaScript ilə isə funksionallıq əlavə edilən markup, Vebdə gördüyünüz hər bir yan menyu, avatar, modal, dropdown kimi UI elementlərinin əsasını təşkil edir.
Frontend proqramlaşdırmada React, markup, CSS və JavaScript-i xüsusi “komponentlər”ə birləşdirərək, tətbiqiniz üçün təkrar istifadə oluna bilən UI elementləri yaradır. Yuxarıda gördüyünüz məzmun cədvəlini hər səhifədə istifadə edə biləcəyiniz <TableOfContents /> komponentinə çevirə bilərsiniz. Daxildə hələ də eyni HTML taglarından istifadə olunur: <article>, <h1> və s.
HTML tagları kimi, komponentləri sıralaya, birləşdirə və iç-içə qoyaraq tam səhifələr dizayn edə bilərsiniz.
<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">Dokumentasiya</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>
Layihəniz böyüdükcə, artıq yazdığınız komponentləri təkrarlayaraq bir çox dizaynı yaratdığınızı görəcəksiniz və bu, irəliləmə sürətinizi artıracaq. Yuxarıdakı məzmun cədvəlini hər ekran üçün <TableOfContents /> ilə əlavə edə bilərsiniz! Hətta React açıq mənbə icması tərəfindən paylaşılan minlərlə komponentdən istifadə edərək layihənizi sürətlə başlada bilərsiniz, məsələn, Chakra UI və ya Material UI.
React Komponent Tərifi
Ənənəvi olaraq veb saytları hazırlayarkən, frontend developer-lər əvvəlcə səhifənin məzmununu HTML ilə yazır və sonra funksionallıq əlavə etmək üçün JavaScript istifadə edirdilər. Bu yanaşma, veb saytda funksionallığın əlavə bir xüsusiyyət olduğu dövrlərdə yaxşı işləyirdi. Lakin indi bir çox saytlarda və bütün tətbiqlərdə funksionallıq gözlənilir. React isə funksionallığı ön planda tutaraq, hələ də eyni texnologiyadan istifadə edir: React komponenti, işarələmə (markup) əlavə edə biləcəyiniz bir JavaScript funksiyasıdır. Aşağıda bunun necə göründüyünü görə bilərsiniz (aşağıdakı nümunəni redaktə edə bilərsiniz):
App.js
export default function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Katherine Johnson"
/>
)
}
React Komponentin Yaradılması
Addım 1: Komponenti export (ixrac) et
export default prefiksi standart JavaScript sintaksisidir (React-ə xas deyil). Bu, bir fayldakı əsas funksiyanı "ixrac etmək" üçün istifadə olunur, beləliklə sonradan başqa fayllardan onu export edib istifadə edə bilərsiniz. (Komponentləri export etməklə bağlı daha çox məlumatı React.js dokumentasiyasından Komponentləri İmport və Export Etmək bölməsində əldə edə bilərsiniz!)
Addım 2: Funksiyanı Təyin Et
function Profile() { } ilə Profile adında bir JavaScript funksiyası təyin edirsiniz.
Diqqət edilməli olan nüans - React komponentləri adi JavaScript funksiyalarıdır, amma adlarının böyük hərflə başlamalıdır, yoxsa işləməz!
Addım 3: Markup əlavə et
Komponent, src və alt atributları ilə bir <img /> tagı qaytarır. <img /> HTML kimi yazılır, amma əslində JavaScript-dir! Bu sintaksis JSX adlanır və markup-u JavaScript daxilində yerləşdirməyə imkan verir.
Return ifadələri bir sətirdə yazıla bilər, bu komponentdə olduğu kimi:
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
Ancaq əgər işarələməniz return açar sözündən sonra eyni bir sətirdə deyilsə, onu mötərizələrə əhatələməlisiniz:
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);
Xətalı vəziyyət - Mötərizələr olmadan, return açar sözündən sonra yazılan hər hansı kod göz ardı ediləcək!
Komponentdən İstifadə
Komponentləri bir-birinin içində istifadə etmək veb sayt yaratmaq prosesini daha modullu və idarəolunan edir. Məsələn, "Başlıq", "Əsas Mətn" və s. komponentlərini bir əsas App komponentində birləşdirməklə, daha aydın və səliqəli bir sayt strukturu qurmaq mümkündür. Bu da böyük layihələrdə kodun saxlanmasını və inkişaf etdirilməsini asanlaşdırır.
İndi Profile komponentini tərtib etdikdən sonra, onu digər komponentlərdə daxil edə bilərsiniz. Məsələn, bir neçə Profile komponenti istifadə edən bir Gallery komponenti export edə bilərsiniz:
App.js
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}export default function Gallery() {
return (
<section>
<h1>Əla alimlər</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
Brauzerin gördüyü
Kiçik hərflərlə yazılmış <section> tagı React-ə bunun HTML tagı olduğunu bildirir.
<Profile /> isə böyük hərflə başladığı üçün, React bunun Profile adında bir komponent olduğunu başa düşür.
Və Profile komponenti daha çox HTML ehtiva edir: <img />. Nəticədə, brauzer bu cür görəcək:
<section>
<h1>Amazing scientists</h1>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>
Bu, brauzerin render etdiyi HTML strukturu olacaq. React komponentləri isə JSX ilə yazılır, amma nəticədə brauzerə yalnız HTML kodu göndərilir.
Komponentləri Nestinq və Təyin Etmək
React komponentləri adi JavaScript funksiyalarıdır, ona görə də bir neçə komponenti eyni faylda saxlaya bilərsiniz. Bu, komponentlər nisbətən kiçik və ya bir-birinə sıx bağlı olduqda rahatdır. Əgər bu fayl çox dolarsa, Profile komponentini ayrı bir fayla köçürə bilərsiniz. Bunu necə edəcəyinizi tezliklə export haqqında olan bloqda öyrənəcəksiniz.
Çünki Profile komponentləri Gallery komponenti daxilində render olunur—hətta bir neçə dəfə!—biz deyə bilərik ki, Gallery komponenti parent komponenti olaraq hər bir Profile komponentini “child” olaraq render edir. Bu, React-in sehrlərindən biridir: bir komponenti bir dəfə təyin edə və daha sonra onu istədiyiniz qədər və istədiyiniz yerdə istifadə edə bilərsiniz.
Diqqət etməli olduğumuz məsələ - Komponentlər digər komponentləri render edə bilər, amma onların təriflərini iç-içə qoymaq heç vaxt yaxşı deyil:
export default function Gallery() {
// Heç vaxt komponenti başqa bir komponentin içində təyin etməyin!
function Profile() {
// ...
}
// ...
}
Veb sayt hazırlayarkən performans vacib amildir. Əgər bir komponentin içində başqa bir komponentin tərifini versən, bu saytın yavaşlamasına səbəb ola bilər. React-də düzgün yanaşma, hər komponenti ayrıca tərif edib onu lazım olan komponentdə çağırmaqdır. Bu, kodun daha optimallaşdırılmış və oxunaqlı olmasını təmin edir.
export default function Gallery() {
// ...
}// Komponentləri yuxarı səviyyədə təyin edin
function Profile() {
// ...
}
Bir child komponenti, parent komponentindən bəzi məlumatları almalı olduqda, bu məlumatları props vasitəsilə göndərin.
Nəticə
React komponentləri veb tətbiqlərində interfeysi daha səmərəli, strukturlaşdırılmış və təkrar istifadə oluna bilən şəkildə qurmağımıza imkan verir. Bu yazıda öyrəndik ki:
- - Komponentlər sadə JavaScript funksiyalarıdır və JSX sintaksisi ilə işarələmə (markup) qaytarırlar.
- - Hər bir komponent tək bir məqsədə xidmət etməli və lazım olduqda başqa komponentlərdən istifadə etməlidir.
- - Markup-u JavaScript daxilində yazaraq dinamik və funksional UI-lər yarada bilərik.
Komponentləri bir-birinin içində istifadə etmək mümkündür, məsələn, bir səhifədə menyu, axtarış sahəsi və məzmunu təşkil edən komponentləri bir yerdə istifadə edə bilərsən. Bu normal və çox yayılmış praktikadır. Məsələn:
function Page() {
return (
<Layout>
<Header />
<Content />
<Footer />
</Layout>
);
}
Burada Layout, Header, Content və Footer — hamısı ayrı-ayrı komponentlərdir, amma bir komponent daxilində birləşdirilərək istifadə olunur.
React-in əsas güclü tərəfi onun modulluq və təkrar istifadə imkanıdır. Bu o deməkdir ki, sən bir dəfə yaratdığın bir komponenti (məsələn, <Button />) onlarla və ya yüzlərlə fərqli yerdə istifadə edə bilərsən. Bu həm kodu daha səliqəli saxlayır, həm də dəyişiklik etdikdə bütün yerlərdə avtomatik tətbiq olunur.
Məsələn, Profile adlı bir komponentin içində bir şəkil göstərirsənsə və sən bu komponenti 10 yerdə istifadə etmisənsə — gələcəkdə şəkli dəyişmək istədikdə sadəcə bir yerdə, Profile komponentinin içində dəyişiklik etməyin kifayətdir.
Frontend Müsahibə Sualları
React-də komponent nədir və necə yaradılır?
React komponenti, istifadəçi interfeysinin (UI) bir hissəsini təmsil edən sadə bir JavaScript funksiyasıdır. Komponentlər böyük hərflə başlamalı və return vasitəsilə JSX (HTML-ə bənzər sintaksis) qaytarmalıdır. Komponentləri export edərək digər fayllarda da istifadə edə bilərik. Bu modulluq və kodun təkrar istifadəsini asanlaşdırır.
React-də komponentləri bir-birinin içində necə istifadə edirik və hansı hallarda bu vacibdir?
Bir komponenti digər komponentin içində istifadə etmək üçün JSX-də onu <KomponentAdı /> formasında çağırırıq. Məsələn:
function Gallery() {
return (
<section>
<h1>Əla alimlər</h1>
<Profile />
<Profile />
</section>
);
}
React-də komponent içində başqa komponent təyin etmək düzgündürmü?
Xeyr, bir komponentin daxilində başqa bir komponentin təyin etmək düzgün deyil. Bu, performans problemlərinə səbəb ola bilər, çünki komponent hər render zamanı yenidən yaradılır. Düzgün yanaşma – bütün komponentləri yuxarı səviyyədə və ya ayrı fayllarda təyin etməkdir:
Doğru:
function Profile() {
// ...
}function Gallery() {
return <Profile />;
}
Yanlış:
function Gallery() {
function Profile() {
// ...
}
return <Profile />;
}
Bu, React performansı və kodun təmizliyi üçün vacibdir.
