JSX

JSX Nima?

JSX JavaScript XML degan ma'noni anglatadi.

JSX bizga React-da HTML yozishga imkon beradi.

JSX HTML kodini React-da yozishni va qo‘shishni osonlashtiradi.

JSX Kodlash

JSX bizga HTML elementlarini JavaScript-da yozish va ularga createElement() yoki appendChild() metodlarisiz DOM-ga qo‘shish imkonini beradi.

JSX HTML teglarini React elementlariga aylantiradi.

JSX-dan foydalanish majburiy emas, lekin JSX React ilovalarini yozishni osonlashtiradi.

Mana ikki misol. Birinchi misolda JSX ishlatiladi, ikkinchisida esa ishlatilmaydi:

Misol 1

JSX:

const myElement = <h1>I Love JSX!</h1>;
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Misol 2

JSX-siz:

const myElement = React.createElement('h1', {}, 'I do not use JSX!');
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Ko‘rib turganingizdek, birinchi misolda JSX bizga HTML-ni JavaScript kodida to‘g‘ridan-to‘g‘ri yozishga imkon beradi.

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

JSX-da Ikkita Misol

Ikkita misolni ko‘rish:

Misol

5 + 5 ifodasini bajarish:

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

Katta HTML Bloklarini Qo‘shish

Bir nechta satrlarda HTML yozish uchun HTML-ni qavslar ichida joylashtiring:

Misol

Uchta ro‘yxat elementidan iborat ro‘yxat yaratish:

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

Bitta Yuqori Darajadagi Element

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

Agar ikki paragraf yozmoqchi bo‘lsangiz, ularni bir ota element ichiga joylashtirishingiz kerak, masalan, <div> elementiga.

Misol

Ikki paragrafni bitta DIV elementi ichiga o‘rash:

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

JSX HTML to‘g‘ri bo‘lmaganida yoki HTML ota elementni o‘tkazib yuborganida xatolik chiqaradi.

Alternativ tarzda, ko‘p satrlarni o‘rash uchun "fragment"dan foydalanishingiz mumkin. Bu qo‘shimcha tugunlarni DOM-ga kiritmaslikni ta'minlaydi.

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

Misol

Ikki paragrafni fragment ichida o‘rash:

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

Elementlar Yopilgan Bo‘lishi Kerak

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

Misol

Bo‘sh elementlarni /> bilan yopish:

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

JSX HTML to‘g‘ri yopilmaganida xatolik chiqaradi.

`class` = `className`

class atributi HTML-da juda ko‘p ishlatiladi, lekin JSX JavaScript sifatida render qilinadi va class kalit so‘zi JavaScript-da zaxira so‘z bo‘lgani uchun JSX-da ishlatilishi mumkin emas.

Buning o‘rniga className atributidan foydalaning.

JSX bu muammoni className atributidan foydalanish orqali hal qiladi. JSX render qilinganida, className atributlarini class atributlariga aylantiradi.

Misol

JSX-da class o‘rniga className atributidan foydalaning:

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

Shartlar - `if` Bayonotlari

React if bayonotlarini qo‘llab-quvvatlaydi, lekin JSX ichida emas.

JSX-da shartli bayonotlarni ishlatish uchun, if bayonotlarini JSX tashqarisida yozishingiz yoki ternary ifoda ishlatishingiz mumkin:

Variant 1:

JSX kodi tashqarisida if bayonotlarini yozing:

Misol

Agar x 10 dan kichik bo‘lsa, "Hello" yozing, aks holda "Goodbye":

const x = 5;
let text = 'Goodbye';
if (x < 10) {
  text = 'Hello';
}
 
const myElement = <h1>{text}</h1>;

Variant 2:

Ternary ifodalardan foydalaning:

Misol

Agar x 10 dan kichik bo‘lsa, "Hello" yozing, aks holda "Goodbye":

const x = 5;
 
const myElement = <h1>{x < 10 ? 'Hello' : 'Goodbye'}</h1>;

E'tibor bering, JavaScript ifodasini JSX ichida qo‘shish uchun, JavaScript qavslar ichida {} bo‘lishi kerak.

Ushbu sahifada