JSX — nima, JavaScript dan farqi, qoidalar

~15 daq · React · Kirish va Asoslar

Muammo: JavaScript da UI yozish og'ir

Tasavvur qiling — foydalanuvchi kartochkasini ekranda ko'rsatmoqchisiz. Ism, yosh, email. Vanilla JavaScript da bu shunday yoziladi:

const card = document.createElement('div');
card.className = 'card';

const ism = document.createElement('h2');
ism.textContent = 'Ali Valiyev';

const yosh = document.createElement('p');
yosh.textContent = '25 yosh';

const email = document.createElement('p');
email.textContent = 'ali@gmail.com';

card.appendChild(ism);
card.appendChild(yosh);
card.appendChild(email);
document.body.appendChild(card);

Bu 12 qator kod — faqat 3 ta maydon uchun. Kodni o'qib, qanday ko'rinishini tasavvur qilish ham qiyin. Agar 10 ta maydon bo'lsa — 40 qator.

React dastlab bu muammoni React.createElement bilan hal qildi:

const card = React.createElement(
  'div',
  { className: 'card' },
  React.createElement('h2', null, 'Ali Valiyev'),
  React.createElement('p', null, '25 yosh'),
  React.createElement('p', null, 'ali@gmail.com')
);

Yaxshiroq, lekin hali ham o'qish qiyin. Shuning uchun JSX yaratildi.

JSX nima?

JSX — JavaScript ichida HTML ga o'xshash sintaksis yozish imkonini beradi. Yuqoridagi kod JSX da shunday ko'rinadi:

const card = (
  <div className="card">
    <h2>Ali Valiyev</h2>
    <p>25 yosh</p>
    <p>ali@gmail.com</p>
  </div>
);

Ancha o'qilishi oson. Qanday ko'rinishini darhol tasavvur qilish mumkin.

Lekin muhim narsa: brauzer JSX ni tushunmaydi. Vite bu kodni brauzerga yetib borishidan oldin React.createElement ga aylantiradi. Ya'ni siz JSX yozsangiz ham, oxirida brauzerda oddiy JavaScript ishlaydi.

JSX — yangi til emas. Bu JavaScript ning kengaytmasi, "sintaktik shakar" deyiladi. Yozish qulay, lekin ichida oddiy JavaScript.

JSX qoidalari

1. Bitta ildiz element bo'lishi shart

Funksiya bitta qiymat qaytaradi — xuddi shunday JSX ham bitta element qaytarishi kerak. Ikki element yonma-yon qaytarib bo'lmaydi.

// ❌ Xato — ikki element yonma-yon
function App() {
  return (
    <h1>Sarlavha</h1>
    <p>Paragraf</p>
  );
}

Xato xabari:

Adjacent JSX elements must be wrapped in an enclosing tag

Yechim — ularni bitta elementga o'rash:

// ✅ div ichiga o'rash
function App() {
  return (
    <div>
      <h1>Sarlavha</h1>
      <p>Paragraf</p>
    </div>
  );
}

Lekin bu yerda muammo bor — keraksiz div DOM ga qo'shiladi. Ba'zan bu CSS layout ni buzadi. Buning uchun Fragment bor:

// ✅ Fragment — DOM ga hech narsa qo'shmaydi
function App() {
  return (
    <>
      <h1>Sarlavha</h1>
      <p>Paragraf</p>
    </>
  );
}

<>...</> — bu <React.Fragment>...</React.Fragment> ning qisqa yozuvi. Brauzerda hech qanday element yaratmaydi, faqat React uchun "o'rov" vazifasini bajaradi.

2. class emas — className

HTML da elementga stil berish uchun class atributi ishlatiladi. Lekin JavaScript da class — kalit so'z (sinflar uchun). Shuning uchun JSX da className yoziladi.

// ❌ Xato
<div class="card">...</div>

// ✅ To'g'ri
<div className="card">...</div>

Agar class yozsangiz, React warning beradi va ishlaydi — lekin bu noto'g'ri. className yozing.

Xuddi shunday, for ham JavaScript da kalit so'z — htmlFor ishlatiladi:

// ❌ Xato
<label for="email">Email</label>

// ✅ To'g'ri
<label htmlFor="email">Email</label>

3. Barcha teglar yopilishi kerak

HTML da ba'zi teglar yopilmaydi — <br>, <img>, <input>. Brauzer ularni tushunadi. Lekin JSX da qat'iy qoida: barcha teglar yopilishi shart.

// ❌ Xato
<br>
<img src="rasm.jpg">
<input type="text">

// ✅ To'g'ri — self-closing
<br />
<img src="rasm.jpg" />
<input type="text" />

4. JavaScript ifodalar {} ichida yoziladi

JSX ichida JavaScript yozmoqchi bo'lsangiz — {} ichiga yozing. Bu "bu yerda JavaScript bor" degan signal.

const ism = 'Ali';
const yosh = 25;
const faol = true;

function App() {
  return (
    <div>
      <h2>{ism}</h2>
      <p>{yosh} yosh</p>
      <p>{ism.toUpperCase()}</p>
      <p>{2 + 2}</p>
      <p>{faol ? 'Faol' : 'Faol emas'}</p>
    </div>
  );
}

{} ichida ifoda (expression) yoziladi — qiymat qaytaradigan narsa. if, for, while kabi operatorlar yozib bo'lmaydi, chunki ular qiymat qaytarmaydi.

// ❌ Xato — if operator, qiymat qaytarmaydi
<p>{if (yosh > 18) { 'Katta' }}</p>

// ✅ To'g'ri — ternary operator, qiymat qaytaradi
<p>{yosh > 18 ? 'Katta' : 'Kichik'}</p>

5. Stil — ob'ekt sifatida

HTML da stil string sifatida yoziladi: style="color: red". JSX da esa stil — JavaScript ob'ekti.

// ❌ Xato — string sifatida
<div style="color: red; font-size: 16px">...</div>

// ✅ To'g'ri — ob'ekt sifatida
<div style={{ color: 'red', fontSize: '16px' }}>...</div>

Tashqi {} — "bu yerda JavaScript bor" degan signal. Ichki {} — ob'ekt.

CSS xususiyat nomlari camelCase da yoziladi, chunki JavaScript da - belgisi ayirish operatori:

font-size       → fontSize
background-color → backgroundColor
margin-top      → marginTop
border-radius   → borderRadius

Stillarni alohida o'zgaruvchiga chiqarish ham mumkin:

const cardStil = {
  backgroundColor: '#f5f5f5',
  padding: '20px',
  borderRadius: '8px',
};

<div style={cardStil}>...</div>

6. Izohlar

JSX ichida oddiy // yoki /* */ izoh ishlamaydi. {/* */} ishlatiladi:

function App() {
  return (
    <div>
      {/* Bu JSX izohi */}
      <h1>Salom</h1>
      {/* <p>Bu vaqtincha o'chirilgan</p> */}
    </div>
  );
}

Tez-tez uchraydigan xatolar

Ob'ektni to'g'ridan-to'g'ri render qilish:

Siz ma'lumotlar bazasidan ob'ekt oldingiz va uni ekranda ko'rsatmoqchisiz:

const user = { name: 'Ali', age: 25 };

// ❌ Xato
<p>{user}</p>

Xato xabari:

Objects are not valid as a React child

React ob'ektni qanday ko'rsatishni bilmaydi. Aniq maydonni ko'rsating:

// ✅ To'g'ri
<p>{user.name}</p>
<p>{user.age}</p>

undefined yoki null ko'rsatish:

const ism = undefined;
<p>{ism}</p>  // hech narsa ko'rsatmaydi — bu normal

undefined, null, false — JSX da hech narsa ko'rsatmaydi. Bu ba'zan foydali (conditional rendering uchun), ba'zan kutilmagan natija beradi. Agar "undefined" matni ko'rsatmoqchi bo'lsangiz — String(ism) yoki ism ?? 'Noma\'lum' ishlating.

Qavslarni unutish:

// ❌ Bu matn sifatida ko'rsatiladi: "yosh"
<p>yosh</p>

// ✅ Bu o'zgaruvchi qiymati ko'rsatiladi
<p>{yosh}</p>

Xulosa

JSX — JavaScript ichida HTML yozish imkonini beruvchi sintaksis. Brauzer uni tushunmaydi — Vite React.createElement ga aylantiradi.

Asosiy qoidalar:

  • Bitta ildiz element — yoki <>...</> Fragment
  • class → className, for → htmlFor
  • Barcha teglar yopiladi: <br />, <img />
  • JavaScript {} ichida yoziladi
  • Stil — ob'ekt sifatida, camelCase

Keyingi dars

4-dars: JSX — expression, conditional rendering, list rendering