Frontend proqramlaşdırma sahəsində uğurlu olmaq üçün müasir və effektiv alətlərdən istifadə etmək çox önəmlidir. React kimi populyar kitabxanalar frontend developer-lərə təkrar istifadə edilə bilən, modul və asan idarə olunan komponentlər yaratmağa imkan verir. React komponent yaratmaq, layihənin strukturunu yaxşı təşkil etmək və kodun keyfiyyətini artırmaq üçün əsas bacarıqlardan biridir. Bu məqalədə React komponentlərin import və export olunması, fayllara bölünməsi və təkrar istifadə edilməsini əhatə edən vacib nüansları öyrənəcəksiniz.
Komponentlərin Import və Export olunması
Frontend proqramlaşdırmada React komponent yaratmaq zamanı komponentləri fərqli fayllarda saxlamaq və onları import/export etmək kodun strukturlaşdırılması və təkrar istifadəsini asanlaşdırır. Komponentlərin möcüzəsi onların təkrar istifadə edilə bilməsindədir: sən başqa komponentlərdən ibarət olan komponentlər yarada bilərsən. Amma komponentləri nə qədər çox iç-içə yerləşdirsən, onları fərqli fayllara bölmək daha məntiqli olur. Bu, fayllarını daha asan yoxlamağa və komponentləri daha çox yerdə təkrar istifadə etməyə imkan verir.
React komponentlərinin import və exportolunması bloqunda öyrənəcəklərimiz:
- - Root component faylı nədir
- - Bir komponenti necə import və export etmək olar
- - default və named import/export nə zaman istifadə olunur
- - Bir fayldan bir neçə komponenti necə import/export etmək olar
- - Komponentləri necə bir neçə fayla bölmək olar
Root component faylı
React layihəsində root komponent əsas giriş nöqtəsidir və burada digər komponentlərdən istifadə edərək tətbiqin əsas quruluşu yaradılır. React Komponentləri - Veb Sayt Yaratmaq bloqunda sən Profile komponenti və onu göstərən Gallery komponenti yaratdın:
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
Hal-hazırda bunlar root komponent faylında yaşayır, bu nümunədə adı App.js-dir. Amma quraşdırmana görə, root komponent başqa bir faylda da ola bilər. Əgər sən Next.js kimi fayl əsaslı routing istifadə edən framework-dan istifadə edirsənsə, root komponent hər səhifə üçün fərqli olacaq.
React Komponentlərin Export və Import edilməsi
Gələcəkdə landing ekranını dəyişib ora elm kitablarının siyahısını qoymaq istəsən nə olar? Yaxud bütün profilləri başqa yerə yerləşdirmək istəsən? Gallery və Profile komponentlərini root komponent faylından çıxarmaq məntiqlidir. Bu, onları daha modul və digər fayllarda təkrar istifadə oluna bilən edəcək. Komponenti üç addımda köçürə bilərsən:
- 1. Yeni bir JS faylı yaradın və komponentləri ora yerləşdirin.
- 2. Funksiya komponentini həmin fayldan export edin (istər default, istərsə də named exports vasitəsilə).
- 3. Komponenti istifadə edəcəyiniz faylda import edin (və uyğun olaraq default və ya named imports texnikasından istifadə edin).
Burada həm Profile, həm də Gallery komponentləri artıq App.js faylından çıxarılıb və yeni yaradılmış Gallery.js faylına yerləşdirilib. İndi siz App.js-də Gallery komponentini Gallery.js-dən import edə bilərsiniz.
import Gallery from './Gallery.js';
export default function App() {
return (
<Gallery />
);
}
Gallery.js faylının içində:
function Profile() {
return (
<img
src="https://i.imgur.com/QIrZWGIs.jpg"
alt="Alan L. Hart"
/>
);
}export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
Bu nümunənin artıq iki komponent faylına bölündüyünə diqqət yetirin:
Gallery.js:
- Profile komponentini müəyyən edir. Bu komponent yalnız həmin fayl daxilində istifadə olunur və export edilmir.
- Gallery komponentini default export olaraq göndərir.
App.js:
- Gallery komponentini Gallery.js faylından default import kimi daxil edir.
- App (əsas) komponentini default export ilə ixrac edir.
Bəzən aşağıdakı kimi .js fayl uzantısının yazılmadığı import ifadələri ilə qarşılaşa bilərsiniz:
import Gallery from './Gallery';
React bu halda həm ./Gallery.js, həm də ./Gallery formasını qəbul edir və işləyir. Lakin .js uzantısının yazılması native ES Modules standartına daha yaxındır və daha aydın oxunuş təmin edir.
React komponentləri modul şəklində yaradılaraq, müxtəlif fayllarda saxlanılır və layihənin müxtəlif yerlərində təkrar istifadə olunur, bu da kodun təmizliyini və idarə olunmasını təmin edir.
Default və named exports fərqi
React komponentlərini default export və named export kimi ixrac etmək mümkündür və bu, import qaydasını təyin edir; default export-lar bir faylda tək olur, named export-lar isə bir neçə ola bilər. JavaScript-də dəyərləri eksport etməyin iki əsas yolu var: default exports və named exports. İndiyə qədərki nümunələrdə yalnız default export istifadə olunmuşdu. Lakin eyni faylda hər ikisindən də istifadə edə bilərsiniz.
Bir faylda yalnız bir default export ola bilər, amma istədiyiniz qədər named export ola bilər.
Sən komponentini necə export edirsənsə, onu necə import etməli olduğunu da müəyyən edir. Əgər default export-u named export kimi import etməyə çalışsan, səhv alacaqsan! Bu cədvəl sənə yadda saxlamaqda kömək edəcək:
Aşağıdakı cədvəl bunu daha yaxşı anlamağa kömək edəcək:
| Syntax | Export ifadəsi | Import ifadəsi |
|---|---|---|
| Default | export default function Button( ) { } | import Button from './Button.js'; |
| Named | export function Button() { } | import { Button } from './Button.js'; |
Default import yazanda, import-dan sonra istədiyin adı yaza bilərsən. Məsələn, import Banana from './Button.js' yazmaq olar və yenə də eyni default export-u alarsan. Amma named import-larda ad həm export, həm import tərəfində eyni olmalıdır. Buna görə onlara named imports deyilir!
React komponent yaratmaqda naming və debugging önəmi
Komponent funksiyalarına mənalı adlar vermək React komponent yaratmaq prosesində debugging və kodun oxunması üçün vacibdir.
Adətən, fayl yalnız bir komponent export edirsə, default exports istifadə olunur, əgər bir neçə komponent və dəyər export olunursa, named exports istifadə olunur. İstənilən kodlama tərzini seçsən də, komponent funksiyalarına və onları saxlayan fayllara mənalı adlar vermək vacibdir. Adı olmayan komponentlər, məsələn export default () => {}, tövsiyə olunmur, çünki bu, debugging-i çətinləşdirir.
Eyni fayldan bir neçə komponenti export və import etmək
Bir faylda bir neçə React komponenti named export ilə ixrac edilə və digər fayllarda müvafiq named import ilə istifadə oluna bilər, bu isə veb sayt sürətini artırır. Bəs qalereya əvəzinə yalnız bir Profile göstərmək istəsən nə olacaq? Profile komponentini də export edə bilərsən. Amma Gallery.js faylında artıq bir default export var və iki default export ola bilməz. Yeni bir fayl yaradaraq onu default export ilə ixrac edə bilərsən, ya da Profile üçün named export əlavə edə bilərsən. Bir faylda yalnız bir default export ola bilər, amma istədiyin qədər named export ola bilər!
Default və named export-lar arasında potensial çaşqınlığı azaltmaq üçün bəzi komandalar yalnız bir stilə (default və ya named) sadiq qalmağı və ya onları eyni faylda qarışdırmaqdan qaçmağı seçir. Sənə ən uyğun olanı et!
Əvvəlcə Gallery.js faylından Profile komponentini named export (yəni default açar sözü olmadan) ilə ixrac et:
export function Profile() {
// ...
}
Sonra Profile komponentini Gallery.js faylından App.js-ə named import (mötərizələrlə) vasitəsilə daxil et:
import { Profile } from './Gallery.js';
Nəhayət, <Profile />-i App komponentində render et:
export default function App() {
return <Profile />;
}
İndi Gallery.js faylında iki export var: biri default olan Gallery export-u, digəri isə named olan Profile export-u. App.js onların hər ikisini import edir. Bu nümunədə <Profile />-i <Gallery /> ilə əvəz etməyi və ya geri qaytarmağı yoxla:
// App.js
import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';export default function App() {
return (
<Profile />
);
}
// Gallery.js
export function Profile() {
return (
<img
src="https://i.imgur.com/QIrZWGIs.jpg"
alt="Alan L. Hart"
/>
);
}export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
İndi siz default və named export-ların qarışığını istifadə edirsiniz:
Gallery.js:
- Gallery.js faylında Profile komponenti named export kimi export edilir.
- Gallery komponenti isə default export kimi export edilir.
App.js:
- App.js faylında Profile Gallery.js-dən named import kimi import edilir.
- Gallery isə default import kimi import edilir.
- Root App komponenti default export kimi export edilir.
Nəticə
Frontend proqramlaşdırmada React komponentlərin düzgün import və export edilməsi kodun təkrar istifadəsini, modul idarəsini və layihənin daha təmiz qurulmasını təmin edir. Default və named export-ların fərqini bilməklə, daha səmərəli və oxunaqlı kod yazmaq mümkündür. Bu, debugging prosesini də asanlaşdırır və layihənizin uzunmüddətli inkişafına töhfə verir. Komponentləri fayllara bölmək və onları müxtəlif yerlərdə təkrar istifadə etmək frontend developer-lərin əsas bacarıqlarından biridir.
Frontend Müsahibə Sualları
React komponentlərini import və export etmək üçün hansı iki əsas üsul mövcuddur?
React komponentləri iki əsas üsulla ixrac edilə bilər — default export və named export. Default export bir faylda yalnız bir dəfə istifadə olunur və import edilərkən istənilən ad verilə bilər. Named export isə istənilən sayda ola bilər və import edilərkən orijinal adı mötərizə içində göstərmək lazımdır.
Bir faylda bir neçə komponent export etmək istəyiriksə hansı üsuldan istifadə etməliyik?
Bir faylda bir neçə komponent export etmək üçün named export istifadə olunur. Məsələn, export function Button() {} və sonra import { Button } from './File.js'. Default export faylda yalnız bir dəfə ola bilər, ona görə birdən çox komponent varsa named export-lar daha uyğundur.
React-də root komponent nədir və hansı funksiyanı yerinə yetirir?
Root komponent React tətbiqinin əsas giriş nöqtəsidir və digər komponentləri daxil edib təşkil edən əsas konteyner rolunu oynayır. O, ümumiyyətlə App.js kimi faylda yerləşir və tətbiqin əsas quruluşunu müəyyən edir.
