1.1 React nedir ? Biz bu bloqda nələr öyrənəcəyik?

1.1 React nedir ? Biz bu bloqda nələr öyrənəcəyik?

Frontend proqramlaşdırma öyrənmək istəyən hər kəs üçün React kitabxanası ilə tanışlıq vacibdir. React, veb sayt yaratmaq prosesində dinamik istifadəçi interfeysləri hazırlamağa imkan verir. Facebook tərəfindən yaradılmış bu açıq mənbə kitabxana, veb sayt hazırlanması zamanı komponent əsaslı yanaşma təqdim edir. Müasir bir frontend developer olmaq istəyirsinizsə, React öyrənmək sizin üçün vacib addımlardan biridir.

Bu gündən etibarən react dərslərini react.dev saytından Azərbaycan dilinə tərcümə edib öz şəxsi saytımda blog şəklində paylaşmağa qərar verdim.

Niyə belə bir işə başladım?

  1. Daha əvvəl JavaScript sənədlərinin tərcüməsi ilə bu cür bir təşəbbüsə girişmişdim;
  2. Hal-hazırda Code Academy-də mentor olduğum PF202 adlı Frontend əsaslı Full Stack qrupum var və yaxın günlərdə React moduluna keçəcəyik;
  3. Yeni başlayanlara React-i öz dillərində, daha rahat şəkildə başa düşmələri üçün kömək etmək istəyirəm.

Həm tələbələrimə, həm də ümumiyyətlə React öyrənmək istəyən hər kəsə faydalı olması üçün bu tərcümələri bloq yazıları şəklində hissə-hissə paylaşacam.

Bu paylaşım da ilk hissədi — React sənədlərindəki “Quick Start” (Sürətli Başlanğıc) bölməsinin tərcüməsidir. Əgər ilk dəfə React öyrənməyə başlayırsansa, bu maraqlı və eyni zamanda məşəqqətli :) yolda uğurlar arzulayıram! 

Bu səhifə sizə hər gün istifadə edəcəyiniz React konseptlərinin 80%-ni təqdim edəcək.
 

Öyrənəcəklərimiz:

  1. Komponentləri necə yaratmaq və iç içə yerləşdirmək olar
  2. Markap (veb saytlarda mətn və digər elementləri strukturlu şəkildə qeyd etmək üçün istifadə olunan dil və ya kodlar) və üslubları (style) necə əlavə etmək
  3. Məlumatları (data) necə göstərmək olar
  4. Şərtlər və siyahıları (conditions and lists) necə göstərmək lazım
  5. Hadisələrə (events) cavab vermək və ekranda yeniləmə (update) etmək
  6. Komponentlər arasında məlumatı (data) necə paylaşmaq

Frontend Proqramlaşdırma və Komponent Əsaslı Yanaşma

Veb sayt yaratmaq üçün ilk öncə onu təşkil edən blokları – yəni komponentləri – başa düşmək vacibdir. React-də komponentlər sadə JavaScript funksiyaları vasitəsilə yaradılır və bu komponentlər veb səhifədə bir-birinin içərisinə yerləşdirilərək struktur formalaşdırılır. Bu yanaşma frontend proqramlaşdırma sahəsində kodun təkrar istifadəsini və idarə olunmasını asanlaşdırır. Müasir veb saytların qurulmasında bu yanaşma geniş tətbiq olunur.

React apps komponentlərdən ibarətdir. Komponent, özünün məntiqi və görünüşü olan istifadəçi interfeysinin bir hissəsidir. Komponent bir düymə qədər kiçik və ya tam bir səhifə qədər böyük ola bilər.

React komponentləri, markap qaytarmaq üçün JavaScript funksiyalarıdır:

function MyButton() {
 return (
   <button>I'm a button</button>
 );
}

İndi MyButton-ı başqa bir komponentin içərisinə yerləşdirə bilərsiniz:

export default function MyApp() {
 return (
   <div>
     <h1>Welcome to my app</h1>
     <MyButton />
   </div>
 );
}

<MyButton /> böyük hərflə başlayır. Bu, onun bir React komponenti olduğunu göstərir. React komponentlərinin adı həmişə böyük hərflə başlamalıdır, HTML tagləri isə kiçik hərflərlə olmalıdır.

export default açar sözləri fayldakı əsas komponenti müəyyən edir. JavaScript sintaksisindən bəzi hissələrlə tanış deyilsinizsə, MDN və javascript.info saytlarına giriş edərək daha çox məlumat əldə edə bilərsiniz.

JSX ilə Veb Sayt Yaratmaq

React istifadə edərək veb sayt yaratmaq istəyirsinizsə, JSX sintaksisi ilə tanış olmalısınız. JSX, HTML və JavaScript-in gücünü birləşdirərək daha effektiv və oxunaqlı kod yazmağa imkan verir. Bu üsul, frontend developer kimi çalışmaq istəyən şəxslərin işini asanlaşdırır və komponent əsaslı inkişafı sürətləndirir.

Yuxarıda gördüyünüz markap sintaksisi JSX adlanır. Bu, opsionaldır, amma çoxsaylı React layihələri JSX-dən asanlıqla istifadə edir. Lokal inkişaf üçün tövsiyə etdiyimiz bütün alətlər JSX-i dərhal dəstəkləyir.

JSX, HTML-dən daha sərtdir. Tag-ları məsələn, <br /> kimi bağlamaq lazımdır. Komponentlər eyni zamanda çoxlu JSX tag-larını qaytara bilməz. Onları ümumi bir valideynə, məsələn, <div>...</div> və ya boş bir <>...</> wrapper-ə yerləşdirməlisiniz:

function AboutPage() {
 return (
   <>
     <h1>About</h1>
     <p>Hello there.<br />How do you do?</p>
   </>
 );
}

React və CSS: Veb Sayt Dizaynını Fərdiləşdirmək

Veb sayt dizaynı saytın funksionallığı qədər vacibdir. React tətbiqlərində CSS stil kodlarını className vasitəsilə təyin edərək komponentlərə dizayn verə bilərsiniz. Bu proses frontend proqramlaşdırma daxilində vizual aspektlərin idarə olunması üçün geniş istifadə olunur. Müasir istifadəçilər üçün cəlbedici interfeys hazırlamaq istəyirsinizsə, bu bilik vacibdir.

React-da CSS sinfini className ilə müəyyən edirsiniz. Bu, HTML-dəki class atributu ilə eyni şəkildə işləyir:

<img className="avatar" />

Sonra onun üçün style kodlarını ayrıca CSS faylında yazırsınız:

/* In your CSS */
.avatar {
 border-radius: 50%;
}

React, CSS fayllarını necə əlavə edəcəyinizi təyin etmir. Ən sadə halda, HTML-yə <link> tag-i əlavə edəcəksiniz.

Məlumatları Göstərmək – Dinamik Vebsayt Yaratmaq üçün Əsas Addım

React-də veb saytlarda məlumatların göstərilməsi komponentlər vasitəsilə həyata keçirilir. JavaScript dəyişənləri JSX daxilində istifadə olunaraq real vaxt rejimində istifadəçiyə məlumat təqdim edilir. Bu imkan, vebsayt yaratmaq istəyənlər üçün dinamik və interaktiv səhifələr hazırlamağa şərait yaradır.

JSX, JavaScript-in içərisində markap yerləşdirməyə imkan verir. Figur( {} ) mötərizələr JavaScript-ə "geri qayıtmağa (javascript kodu yazmağa)" imkan verir ki, kodunuzdan bəzi dəyişənləri daxil edib istifadəçiyə göstərəsiniz. Məsələn, bu, user.name-ı göstərəcək:

return (
 <h1>
   {user.name}
 </h1>
);

JSX atributlarından da JavaScript-ə "geri qayıda" bilərsiniz, amma burada cüt mötərizələrdən istifadə etməlisiniz. Məsələn, className="avatar" CSS sinfini keçirir, amma src={user.imageUrl} JavaScript user.imageUrl dəyişəninin qiymətini oxuyur və sonra bu qiyməti src atributu olaraq verir:

return (
 <img
   className="avatar"
   src={user.imageUrl}
 />
);

Daha mürəkkəb ifadələri də JSX figur mötərizələrinə daxil edə bilərsiniz, məsələn, simvol birləşməsi:

const user = {
 name: 'Hedy Lamarr',
 imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
 imageSize: 90,
};

export default function Profile() {
 return (
   <>
     <h1>{user.name}</h1>
     <img
       className="avatar"
       src={user.imageUrl}
       alt={'Photo of ' + user.name}
       style={{
         width: user.imageSize,
         height: user.imageSize
       }}
     />
   </>
 );
}

Yuxarıdakı nümunədə, style={ {} } xüsusi bir sintaksis deyil, amma style={ } JSX figur mötərizələrində adi bir {} obyektidir. style atributunu istifadə edərkən, style-larınız JavaScript dəyişənlərindən asılı olduqda, onu istifadə edə bilərsiniz.

Şərti Render Etmə (Conditional Rendering)

Frontend proqramlaşdırma öyrənərkən şərti render etmə bacarığı vacibdir. React komponentlərində if, ? və && sintaksisi ilə müxtəlif istifadəçi vəziyyətlərinə uyğun məzmun göstərmək mümkündür. Bu metod, veb saytlarin hazirlanmasi zamanı istifadəçi təcrübəsini fərdiləşdirməyə imkan verir.

React-da şərt yazmaq üçün xüsusi sintaksis yoxdur. Bunun əvəzinə, adi JavaScript kodu yazarkən istifadə etdiyiniz eyni üsulları istifadə edəcəksiniz. Məsələn, şərti olaraq JSX daxil etmək üçün if-dən istifadə edə bilərsiniz:

let content;
if (isLoggedIn) {
 content = <AdminPanel />;
} else {
 content = <LoginForm />;
}
return (
 <div>
   {content}
 </div>
);

Daha qısa kod istəyirsinizsə, şərti ? operatorunu istifadə edə bilərsiniz. if-dən fərqli olaraq, bu, JSX içərisində işləyir:

<div>
 {isLoggedIn ? (
   <AdminPanel />
 ) : (
   <LoginForm />
 )}
</div>

Əgər else şərtini istifadə etməyə ehtiyac yoxdursa, daha qısa məntiqi && sintaksisindən də istifadə edə bilərsiniz:

<div>
 {isLoggedIn && <AdminPanel />}
</div>

Bütün bu yanaşmalar şərti atributları təyin etmək üçün də işləyir. Bu JavaScript sintaksisi ilə tanış deyilsinizsə, həmişə if...else istifadə etməklə başlaya bilərsiniz.

Siyahıları Render Etmə (Rendering Lists)

React istifadə edərək veb sayt yaratmaq istəyənlər üçün map() funksiyası ilə dinamik siyahılar qurmaq əvəzsiz bir bacarıqdır. Bu üsulla məhsullar, istifadəçilər və ya digər məlumatların siyahı şəklində göstərilməsi asanlaşdırılır. Bu, frontend developer kimi real layihələrdə işinizi daha məhsuldar edəcək.

Komponentlərin siyahılarını render etmək üçün for dövrü və array map() funksiyası kimi JavaScript xüsusiyyətlərindən istifadə edəcəksiniz.

Məsələn, məhsullardan ibarət bir array-ınız varsa:

const products = [
 { title: 'Cabbage', id: 1 },
 { title: 'Garlic', id: 2 },
 { title: 'Apple', id: 3 },
];

Komponentinizin içərisində, map() funksiyasını istifadə edərək məhsul array-ını <li> elementlərinə çevirə bilərsiniz:

const listItems = products.map(product =>
 <li key={product.id}>
   {product.title}
 </li>
);

return (
 <ul>{listItems}</ul>
);

<li>-nin key atributuna diqqət edin. Hər bir siyahı elementinin özünəxas bir identifikatoru olmalıdır ki, React gələcəkdə elementləri daxil etdikdə, sildikdə və ya sıraladıqda nə baş verdiyini bilsin.

Nəticə: React öyrənmək nə üçün vacibdir?

Əgər veb sayt yaratmaq və frontend proqramlaşdırma sahəsində inkişaf etmək istəyirsinizsə, React sizin üçün doğru başlanğıcdır. Komponent əsaslı yanaşma, dinamik məlumat idarəsi və istifadəçi yönümlü dizayn hazırlamaq kimi bacarıqları öyrənərək siz də peşəkar frontend developer ola bilərsiniz. Öz veb saytınızı qurmaq və internetdə öz yerinizi almaq üçün bu biliklər möhkəm təməl olacaq.

Frontend Proqramlaşdırma Müsahibə Sualları

React-də komponent nədir və hansı növ komponentlər mövcuddur?

React-də komponent, veb saytın yenidən istifadə edilə bilən blokudur. Komponentlər vasitəsilə istifadəçi interfeysi qurulur. İki əsas növ komponent mövcuddur:

Funksional komponentlər (Functional Components): JavaScript funksiyası kimi yazılır və useState, useEffect kimi hook-lardan istifadə edir.

Sinif komponentləri (Class Components): class açar sözü ilə yazılır və this.state, this.props ilə işləyir. Əvvəllər çox istifadə olunsa da, indi funksional komponentlər daha çox istifadə olunur.

JSX nədir və React-də hansı üstünlükləri var?

JSX — JavaScript XML deməkdir. Bu, JavaScript fayllarında HTML yazmağa imkan verən sintaksis genişləndirilməsidir.

  1. Komponentlərin strukturunu daha aydın göstərir.
  2. JavaScript funksiyaları ilə HTML elementlərini bir yerdə idarə etməyə imkan verir.
  3. Daha oxunaqlı və texniki baxımdan daha sadə kod yazmağa imkan verir.

const Welcome = () => {
 return <h1>Salam, istifadəçi!</h1>;
};

React-də useState nə üçün istifadə olunur və necə işləyir?

useState React hook-udur və komponentin daxili vəziyyətini (state) idarə etmək üçün istifadə olunur.

  1. Bir dəyişən və onu dəyişən funksiyanı yaradır.
  2. Komponent yenidən render olunarkən həmin dəyişən yeni dəyəri saxlayır.

import { useState } from "react";

const Counter = () => {
 const [count, setCount] = useState(0); // ilkin dəyər 0

 return (
   <div>
     <p>Say: {count}</p>
     <button onClick={() => setCount(count + 1)}>Artır</button>
   </div>
 );
};

Əvvəlki Bloqlar

Blog Page