React

React-i Meta-da (əvvəl Facebook) işləyənlər 2013-cü ildə açıblar. Səhifə bir böyük fayl olmur. Hər komponent öz məlumatını və görünüşünü saxlayır. JSX HTML-ə bənzəyir, amma JavaScript-in içindədir. Brauzer JSX-i özü oxumur. Quruluş aləti onu adi JavaScript-ə çevirir.

React dəyişən ekran üçündür: siyahı artır, düymə vəziyyəti dəyişir, eyni kart çox yerdə işlənir.

• Eyni düyməni bir neçə yerdə işlətmək
• Siyahını məlumatdan çıxarmaq
• Formanın xətasını ekranda göstərmək
• Next.js kimi çərçivənin içində səhifə

React ilə kart, menyu və axtarış qutusu yazırsan. Vəziyyət dəyişəndə React yalnız dəyişən hissəni yeniləməyə çalışır. O, verilənlər bazası deyil və serveri özü qurmur. React Native ayrı kitabxanadır: telefon tətbiqi üçündür, eyni şey deyil.

İlk komponent asandır. Çətinlik vəziətin harada saxlanmasındadır. Hər düymə öz içində sayırsa, səhifə sonra dağınıq olur. Effekt və siyahı açarı səhv olanda ekran artıq yenilənir və ya köhnə qiymət qalır.

Üstünlük: eyni hissə təkrar yazılmır, böyük interfeys hissələrə bölünür. Məhdudiyyət: JSX və quruluş aləti əlavə addımdır. Kiçik sabit səhifə üçün tək HTML daha düz yoldur. React hər layihənin şərti deyil.

Komponent funksiyadır. Props ona xaricdən gələn qiymətdir. State onun öz içində dəyişən qiymətdir.

• JSX görünüşü JavaScript-in içinə yazır
• Props komponenti dəyişmir, gələn məlumatdır
• State dəyişəndə həmin hissə yenilənir
• Açar siyahıda hansı sətrin hansı olduğunu saxlayır

Bu funksiya bir başlıq qaytarır. Brauzerdə görmək üçün onu səhifəyə bağlamaq və JSX-i çevirmək lazımdır.

function Hello() {
  return <h1>Salam</h1>;
}

Yuxarıdakı funksiya yalnız başlıq qaytarır. Bu dördü həqiqətən işlənən fikirləri göstərir: xaricdən gələn qiymət, dəyişən ədəd, siyahı və bala görə dəyişən cümlə. Brauzer JSX-i yazıldığı kimi işlətmir. Quruluş aləti onu JavaScript-ə çevirir. useState React-dən gəlir, ona görə faylda layihənin artıq göstərdiyi import olmalıdır.

Ad alan cümlə

Greeting komponentdir. Mötərizədəki name prop-dur: onu komponenti işlədən verir. Komponent adı özü uydurmur. {name} həmin qiyməti cümlənin içinə qoyur. Üst hissə Aysel verirsə, ekran Salam, Aysel deyir. Prop dəyişəndə cümlə dəyişir. Funksiyanın özü eyni qalır.

function Greeting({ name }) {
  return <p>Salam, {name}</p>;
}

Bir komponent çox ad üçün işlənə bilər. Hər adam üçün abzası kopyalamırsan.

Sayan düymə

count state-dir. 0-dan başlayır. Ona yeni ədəd verməyin yolu setCount-dur. Düymə həmin anki ədədi göstərir. onClick adam basanda işləyir. count + 1 count-u özü dəyişmir. setCount React-ə yeni qiyməti deyir və React düyməni yenidən çəkir. count = count + 1 yazmaq React-i keçir, ekran köhnə ədəddə qalır.

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

Hər basış növbəti ədədi göstərir: 0, sonra 1, sonra 2. Səhifə yenilənmir.

Siyahıdan massiv

names adi məlumatdır. map hər adı gəzir və bir li qaytarır. React key istəyir ki, siyahı sonra dəyişəndə hansı sətrin hansı olduğunu bilsin. Burada adın özü açardır və bu yalnız iki ad fərqli olduğu üçün uyğundur. Boş massiv sətir çəkmir. Massivə Nigar əlavə etsən, üçüncü sətir yeni HTML sətri olmadan gəlir.

const names = ["Aysel", "Murad"];

function NameList() {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

Ekranda iki bənd görünür: Aysel və Murad. ul siyahıdır. Məlumat teqlərin içinə bir-bir yazılmayıb.

Bala görə dəyişən cümlə

score yuxarıdakı ad kimi prop kimi gəlir. Sual işarəsi iki sözdən birini seçir. Bal 50 və ya çoxdursa, abzas Keçdi deyir. Yoxsa Qaldı deyir. 50-nin özü keçir, çünki şərt böyük və ya bərabərdir. Bu hələ bir komponentdir. Qərar JavaScript ifadəsinin içindədir, ayrı HTML faylında deyil.

function Score({ score }) {
  return <p>{score >= 50 ? "Keçdi" : "Qaldı"}</p>;
}

85 Keçdi göstərir. 40 Qaldı göstərir. Komponent balı saxlamır. Çağıran saxlayır.

• React və JavaScript eynidir? Xeyr. React kitabxanadır. Onu JavaScript yazır.
• React çərçivədir? Özünü kitabxana sayır. Səhifə yolu və server üçün adətən başqa alət əlavə olunur.
• React HTML-i əvəz edir? Xeyr. Nəticədə brauzer yenə element görür.