React JSX bilan tanishuv

JSX nima?

JSX JavaScript XML degan ma’noni anglatadi.

JSX bizga React-da HTML yozish imkonini beradi.

JSX React-da HTML yozish va qo‘shishni osonlashtiradi.

JSX kodlash

JSX bizga HTML elementlarini JavaScript-da yozish va ularni hech qanday createElement() va/yoki appendChild() metodlarisiz DOM-ga joylashtirish imkonini beradi.

JSX HTML teglarini React elementlariga aylantiradi.

Mana ikkita misol. Birinchisi JSX dan foydalanadi, ikkinchisi esa:

const myElement = <h1>I Love JSX!</h1>;

createRoot(document.getElementById('root')).render(
  myElement
);

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

createRoot(document.getElementById('root')).render(
  myElement
);

Birinchi misolda ko‘rib turganingizdek, JSX bizga HTMLni to‘g‘ridan-to‘g‘ri JavaScript kodida yozish imkonini beradi.

JSX ES6 asosidagi JavaScript tilining kengaytmasi bo‘lib, ish vaqtida oddiy JavaScript-ga tarjima qilinadi.

JSXdagi ifodalar

JSX yordamida siz jingalak qavslar ichida ifodalarni yozishingiz mumkin { }.

Ifoda React o‘zgaruvchisi yoki xossasi yoki boshqa har qanday haqiqiy JavaScript ifodasi bo‘lishi mumkin. JSX ifodani bajaradi va natijani qaytaradi:

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

Katta HTML blokini kiritish

HTMLni bir nechta satrga yozish uchun HTMLni qavslar ichiga qo‘ying:

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Yuqori darajadagi bitta element

HTML kodi BIR yuqori darajadagi elementga o‘ralgan bo‘lishi kerak.

Shunday qilib, agar siz ikkita paragraf yozishni xohlasangiz, ularni div elementi kabi asosiy element ichiga qo‘yishingiz kerak.

const myElement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Shu bilan bir qatorda, bir nechta qatorlarni o‘rash uchun "fragment" dan foydalanishingiz mumkin. Bu DOM-ga keraksiz qo‘shimcha tugunlarni qo‘shishning oldini oladi.

Fragment bo‘sh HTML tegiga o‘xshaydi: <></> .

const myElement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

Elementlar yopiq bo‘lishi kerak

JSX XML qoidalariga amal qiladi, shuning uchun HTML elementlari to‘g‘ri yopilishi kerak.

const myElement = <input type="text" />;

class atributi = className

Class atributi HTMLda juda ko‘p qo‘llaniladigan atributdir, lekin JSX JavaScript sifatida ko‘rsatilgan va class kalit so‘zi JavaScript-da zahiralangan so‘z bo‘lgani uchun uni JSX da ishlatishga ruxsat berilmagan.

JSX buni o‘rniga className yordamida hal qildi. JSX ko‘rsatilganda, u className atributlarini class atributlariga aylantiradi.

const myElement = <h1 className="myclass">Hello World</h1>;

JSXdagi sharhlar

JSXdagi sharhlar {/* */} bilan yoziladi

const myElement = <h1>Hello {/* Wonderful */} World </h1>;

React componentlarida JSX

React UI yaratish uchun componentlardan foydalanadi. Componentlar mustaqil va qayta ishlatiladigan kod bitlaridir.

React componentlari JavaScript funksiyalariga o‘xshaydi va HTMLni qaytaradi.

JSX React componentlarida mukammal ishlaydi

function Car() {
  return (
    <>
      <h2>My Car</h2>
      <p>It is a Ford Mustang.</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Car />
)

Componentlar ichida siz HTMLni qaytarishdan oldin boshqa amallarni bajarishingiz mumkin:

function Car() {
  const brand = "Ford";
  const model = "Mustang";
  return (
    <>
      <h2>My Car</h2>
      <p>It is a {brand} {model}.</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Car />
)