Reacta Başlayırıq.

yeni başlayanlar üçün.

Məqaləni daha yaxşı başa düşmək üçün JavaScript biliyiniz olmalıdır.

Əsasları

İstifadə edəcəyimiz versiya: React 17.

Giriş

JavaScript biliklərinin olmağını deyərkən, əsas kimi nəzərdə tutulan biliklər bunlardır:

• Dəyişkənləri və Data Types (Data növləri)
• Obyektlər və çoxluqlar
• Funksiyalar və siniflər
• Dövr və şərt əməliyyatları

Konseptləri

1. Komponentlər — funksiya kimi qəbul edə bilərik. Funksiyaları dəfələrlə istifadə etmək olur, eynən komponentləri də. Funksiyanın qəbul etdiyi arqumentlər olur və ixrac etdiyi bir nəticə, komponentin isə props və state qəbul edərək, Uİ ixrac edir. Funksiya yenidən istifadə edilə bildiyi kimi digər funksiyalara da əlavə edilə bilir, eynən komponentlər də. Komponent html tag kimi istifadə edilə bilir. Private vəziyyətdə ola bilir. Funksiya və Sinif komponenləri olur. Bu məqalədə daha çox üstünlüyü Funksiya komponentlərinə verəcəyik, amma hər ikisini də bilmək məsləhətdir.

2. Reaktiv yenilənmələr — dəyişikliklərə avtomatik reaksiya verərək brauzerdə dəyişiklikləri əks etdirir.

3. Yaddaşda virtual views (görünüş) — JavaScript vasitəsi ilə HTML generasiya edilir, ona görə də HTML nümunələrinə ehtiyac olmur və şərtlər istifadə edərək HTML-ı dəyişmək lazım deyil. Tree Reconciliation alqoritması ilə çalışır.

Sadə bir app.

Sadə bir proqram təminatı hazırlayaq, kodu JSX istifadə edərək yazacam. Bir dənə düyməmiz (button) olacaq və hər dəfə üzərinə basanda, düymənin üstündəki rəqəm artacaq.

İlk öncə bir Button komponenti yaradırıq.

function Button(){
  return <button> Salamlar! </button>;
}

Həmin komponentin üzərinə basılmasına reaksiya verməsi üçün state yaradırıq, ona görə də useState() istifadə edəcəyik. useState bizə “state object (getter)” və “updater object (setter)” çoxluğunu qaytaracaq. Komponentimizi dəyişək useState əlavə eləməklə.

function Button(){
  const [count,setCount] = useState(0);
  return <button onClick={() => setCount(count+1)}> {count} </button>;
}

Kodumuzu daha oxunan etmək üçün eyni kodu fərqli yazaq.

function Button(){
  const [count,setCount] = useState(0);
  const handleClick = () => setCount(count+1);
  return (
    <button onClick={handleClick}> {count} </button>
  );
}

Kodu ReactDOM.render vasitəsi ilə HTML kimi generasiya edirik.

ReactDOM.render(
  <Button />, 
  document.getElementById('htmlElementinIDsi'),
);

One-Way Flow Data nümunə üzərindən.

Komponentlərdə valideyin(parent) olan komponentlər öz uşaqlarına (child) data və davranış (behavior) ötürə bilirlər. Yəni alt komponentlərə dəyər və funksiya ötürə bilərik. Bunun üçün yaratdığımız proqram təminatını biraz dəyişib, düymənin üzərinə +1 yazısını qoyaq və nəticəni ayrı bir div elementində görsədək. div elementini ikinci komponent olaraq Display komponentini yaradaq. Lakin render edəcəyimiz halda bu iki komponenti yan yana yazmaq üçün ya çoxluq kimi render etməliyik, ya da ikisi üçün əlavə bir komponent düzəltməliyik. Nəticədə belə bir kod olacaq:

function Button(props) {
 return (
   <button onClick={props.onClickFunction}>
      +1
    </button>
  );
}

function Display(props) {
 return (
   <div>{props.message}</div>
  );
}

function App() {
 const [count, setCount] = useState(0);
 const incrementCount = () => setCount(count+1);
 return (
    <div>
      <Button onClickFunction={incrementCount} />
      <Display message={count}/>
    </div>  
  );
}

ReactDOM.render(
  <App />, 
  document.getElementById('htmlElementinIDsi'),
);

Bu kodda biz App komponenti parent olaraq yaratmışıq. Onun useState funksiyası var haraya biz ilkin dəyər olaraq 0 ötürürük. O bizə getter və setteri çoxluq kimi qaytardığına görə biz çoxluqdan getteri “count” kimi və setteri “setCount” kimi əldə edirik. Eynən əvvəlki kodda ki kimi burada da “incrementCount” dəyişkəninə dəyərin hər dəfə bir dənə artmasını təyin edirik. Sonra həmin bu funksiyanı (incrementCount) ötürük Button komponentinə: <Button onClickFunction={incrementCount} />. “onClickFunction” avtomatik əlavə olunur props obyektinə. Eyni qaydada Display komponentinə də biz funksiya əvəzinə dəyəri özündə saxlayan “message” dəyişkənin göndəririk.

Button komponentində “props” obyekt atribut olaraq qəbul edirik və onClick daxilində “props.onClickFunction” istifadə edirik. Deməli Button komponentinin heç xəbəri də yoxdur onClick metoduna ötüryümüz “props.onClickFunction” funksiyası necə işləyir və nə edir. Bu məsuliyyət düşür (parent) App komponentinin üzərinə, buna da “shared responsibility” deyirlər. Eyni proses Display komponenti üçün olur, sadəcə funksiya əvəzinə özündə dəyər saxlayan dəyişkən ötürürük.

Reusability — Dəfərlərlə istifadə imkanı

Gəlin kodumuzu biraz da dəyişək və bir neçə dənə düymə (button) əlavə edərək, birinci düymənin üstündə “+1”, ikinci düymənin — “+5”, üçüncü düymənin — “+ 10” yazılmasını düzəldək və uyğun olaraq dəyər artırmasını təmin edək. Yuxarıda qeyd olunan koda azacıq dəyişiklik edərək, eyni buttondan bir neçə dəfə istifadə edərək nəticəni əldə edə bilərik.

İlk öncə Button komponentində olan “+1” dinamik olaraq dəyişməsi üçün dəyişkən ilə əvəz olunmalıdır. Bunun üçün yenə “props” istifadə edəcəyik. Bu dəfə gərək “props”a “increment” dəyişkənin ötürək. Həmin dəyişkəni ötürmək üçün biz App komponentinə gedirik:

...
const incrementCount = (incrementValue) => setCount(count+incrementValue);
...
<Button onClickFunction={incrementCount} increment={1} />
...

və Button komponentini də dəyişirk:

function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment);
 return (
   <button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

Beləliklə biz Button komponentini dəfərlərlə istifadə edərək, hər dəfə istədiyimiz dəyəri ötürüb, fərqli düymələr ekrana çıxara bilirik. Son alınan kod:

function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment);
 return (
   <button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

function Display(props) {
 return (
   <div>{props.message}</div>
  );
}

function App() {
 const [count, setCount] = useState(0);
 const incrementCount = (incrementValue) => setCount(count+incrementValue);
 return (
    <div>
      <Button onClickFunction={incrementCount} increment={1} />
      <Button onClickFunction={incrementCount} increment={5} />
      <Button onClickFunction={incrementCount} increment={10} />
      <Display message={count}/>
    </div>  
  );
}

ReactDOM.render(
  <App />, 
  document.getElementById('htmlElementinIDsi'),
);

Yuvarlayaq

Komponentlər

• Automatic yenilənmə,
• Dəfələrlə istifadə
• Funksiya komponentləri ( Function Components )
• Class Components (başqa məqalədə bu haqda ətraflı danışarıq)

Props və State

• (props) => {}
• [val, setVal] = useState(ilkinDəyər)
• Immutable props, Mutable state

ReactDOM.render

• <Component />
• DOM node

React events

• onClick
• onSubmit
• …

Müsahibə sualları ola biləcək sual:

Reactı niyə bəyənirsiniz?

Cavabı şərh olaraq bizim üçün də yaza bilərsiniz. Öz sözlərinizlə yazın ki, hamı da eyni cavab olmasın.

Bizə dəstək olmaq üçün, kofeyə qonaq edə bilərsiniz. Youtube kanalımız və saytımızı nəzərdən keçirin. Manual QA udemy kursumuza endirim üçün əlaqə saxlayın zəhmət olmasa.