React JSX sintaksisi

Oldingi darsda App.jsx ichida HTML’ga o’xshash kod yozdingiz. U HTML emas — JSX. Tashqi ko’rinishi bir xil, lekin qoidalari boshqa. Bu darsda o’sha qoidalarni ko’ramiz, chunki farqlarni bilmaslik birinchi kunlardagi xatolarning asosiy sababi.

JSX nima

Siz shunday yozasiz:

const title = <h1 className="page-title">Salom</h1>;

Vite buni taxminan shunga o’giradi:

const title = jsx("h1", { className: "page-title", children: "Salom" });

Ya’ni JSX — JavaScript ifodasi. Shuning uchun uni o’zgaruvchiga saqlash, funksiyadan qaytarish, massivga solish mumkin:

const greeting = <p>Xush kelibsiz</p>;

function getFooter() {
  return <footer>2026</footer>;
}

const parts = [<span key="a">bir</span>, <span key="b">ikki</span>];

Bu tushuncha keyingi darslarning yarmini osonlashtiradi: JSX oddiy qiymat bo’lgani uchun map bilan yasash, shartga qarab tanlash — hammasi JavaScript’ning odatiy amallari.

class emas, className

JSX’dagi atributlar HTML atributlari emas, JavaScript obyektining kalitlari. class esa JavaScript’da band so’z. Shuning uchun React boshqa nom ishlatadi:

// ❌ Noto'g'ri
<div class="card">Matn</div>

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

Xuddi shu sabab bilan for ham o’zgargan:

<label htmlFor="email">Email</label>
<input id="email" type="email" />

Asosiy farqlar jadvali:

HTML	JSX
class	className
for	htmlFor
tabindex	tabIndex
onclick	onClick
maxlength	maxLength
readonly	readOnly

Qoida sodda: bir nechta so’zdan iborat atribut JSX’da camelCase yoziladi. id, src, alt, href, type kabi bitta so’zli atributlar o’zgarmaydi.

Jingalak qavs — JavaScript’ga qaytish eshigi

JSX ichida {} yozsangiz, ichidagi JavaScript ifodasi hisoblanadi va natijasi joyiga qo’yiladi:

const user = { name: "Aziz", age: 20 };

function Profile() {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Yosh: {user.age}</p>
      <p>Keyingi yil: {user.age + 1}</p>
      <p>{user.name.toUpperCase()}</p>
    </div>
  );
}

Ekranda:

Aziz
Yosh: 20
Keyingi yil: 21
AZIZ

Atribut qiymatini ham {} ichida berish mumkin. Bunda tirnoq yozilmaydi:

const imageUrl = "/images/logo.png";
const width = 120;

// ✅ To'g'ri
<img src={imageUrl} width={width} alt="Logotip" />

// ❌ Noto'g'ri — "imageUrl" degan matn manzil sifatida ishlatiladi
<img src="{imageUrl}" alt="Logotip" />

Qavs ichiga nima yozib bo’lmaydi

{} ichida faqat ifoda turadi — qiymat qaytaradigan kod. if, for, switch — bular ifoda emas, buyruq. Ular qiymat qaytarmaydi, demak joyiga qo’yish uchun hech nima yo’q:

// ❌ Ishlamaydi
<p>{if (user.age >= 18) { "Katta" }}</p>

// ✅ Ternar operator — ifoda, qiymat qaytaradi
<p>{user.age >= 18 ? "Katta" : "Kichik"}</p>

Shartni tekshirish kerak bo’lsa ikki yo’l bor. Ternar operator — yuqoridagidek. Yoki shartni JSX’dan tashqarida hisoblash:

function Profile() {
  let status;
  if (user.age >= 18) {
    status = "Katta";
  } else {
    status = "Kichik";
  }

  return <p>{status}</p>;
}

Ikkinchi yo’l shart murakkab bo’lganda o’qishga qulayroq. Shartli ko’rinishning boshqa usullarini shartli ko’rinish darsida ko’rasiz.

Qavs ichidagi qiymatlar qanday chiziladi

Har tur o’zicha ishlanadi — bu keyinchalik chalkashlik tug’diradi:

Qiymat	Ekranda
{"matn"}	matn
{42}	42
{true}	hech nima
{false}	hech nima
{null}	hech nima
{undefined}	hech nima
{[1, 2, 3]}	123
{{ a: 1 }}	xato

Oxirgi ikki qator muhim. Massiv elementlari ketma-ket chiziladi — shu tufayli ro’yxat chizish ishlaydi. Obyektni esa to’g’ridan-to’g’ri chizib bo’lmaydi:

Objects are not valid as a React child

Bu xatoni ko’rsangiz, obyektning maydonini oling: {user} emas, {user.name}.

Bitta ildiz element

Komponent bitta elementni qaytaradi. Ikkitasini yonma-yon qo’yish xato beradi:

// ❌ Xato: JSX expressions must have one parent element
function Header() {
  return (
    <h1>Sarlavha</h1>
    <p>Tavsif</p>
  );
}

Sabab — funksiya bitta qiymat qaytaradi, ikkitasini emas. Yechim: o’rab qo’yish.

// ✅ div bilan
function Header() {
  return (
    <div>
      <h1>Sarlavha</h1>
      <p>Tavsif</p>
    </div>
  );
}

Lekin ortiqcha <div> DOM’da qoladi va uslubni buzishi mumkin. Shuning uchun React fragment beradi:

// ✅ Fragment — DOM'da iz qoldirmaydi
function Header() {
  return (
    <>
      <h1>Sarlavha</h1>
      <p>Tavsif</p>
    </>
  );
}

<div> yoki <>? Agar o’ramga className yoki uslub kerak bo’lsa — <div>. Kerak bo’lmasa — fragment. Jadval qatorlari (<tr>) va ro’yxat (<li>) bilan ishlaganda fragment majburiy bo’lib qoladi, chunki oraliq <div> HTML tuzilmasini buzadi.

Har teg yopilishi shart

HTML’da <br> va <img src="..."> yopilmaydi. JSX’da bunday yozuv xato beradi:

// ❌ Xato
<br>
<img src="/logo.png" alt="Logotip">
<input type="text">

// ✅ To'g'ri
<br />
<img src="/logo.png" alt="Logotip" />
<input type="text" />

Yopilmagan teg Unterminated JSX contents xatosini beradi va sahifa umuman chizilmaydi.

Izoh yozish

JSX ichida <!-- --> ishlamaydi. Izoh {} ichida JavaScript izohi sifatida yoziladi:

function App() {
  // Bu oddiy JavaScript izohi — JSX'dan tashqarida
  return (
    <div>
      {/* Bu JSX ichidagi izoh */}
      <h1>Salom</h1>
    </div>
  );
}

Uslub berish

style atributi matn emas, obyekt qabul qiladi. Shuning uchun ikki juft qavs: tashqisi JSX uchun, ichkisi obyekt uchun.

<p style={{ color: "red", fontSize: "14px" }}>Ogohlantirish</p>

CSS xossalari camelCase yoziladi: font-size emas, fontSize; background-color emas, backgroundColor.

Amaliy mashq

Loyihangizdagi src/App.jsx da ishlang:

1. App ichida user nomli obyekt yarating (name, city maydonlari bilan) va ikkalasini ham ekranda chiqaring.
2. Sarlavha va xatboshini fragment (<>) ichiga joylang — ortiqcha <div> siz.
3. <img> qo’shing, src ni o’zgaruvchidan {} orqali bering va alt ni to’ldiring.
4. <label htmlFor="name"> va <input id="name" /> juftligini yozing — label bosilganda kursor maydonga tushishini tekshiring.
5. Ataylab className o’rniga class yozing, brauzer konsolini oching va ogohlantirishni o’qing. Keyin tuzating.
6. {user} deb butun obyektni chizib ko’ring, xatoni o’qing va {user.name} ga almashtiring.

5-va 6-qadamlar eng foydalisi: xatoni ataylab chiqarib, uning matnini o’qish — keyinchalik tasodifan chiqqanda darrov tanishga imkon beradi.

Qisqacha xulosa

• JSX — HTML emas, JavaScript ifodasi: o’zgaruvchiga saqlash va funksiyadan qaytarish mumkin.
• class → className, for → htmlFor; ko’p so’zli atributlar camelCase.
• {} ichida faqat ifoda turadi — if va for yozib bo’lmaydi, ternar operator yoki tashqarida hisoblash ishlatiladi.
• null, undefined, false ekranda hech nima chizmaydi; obyekt esa xato beradi.
• Komponent bitta ildiz element qaytaradi; ortiqcha <div> kerak bo’lmasa fragment <>...</> ishlatiladi.
• <br />, <img />, <input /> — har teg yopilishi shart.
• style obyekt qabul qiladi va CSS xossalari camelCase yoziladi.

Keyingi darsda komponentlar — JSX qaytaradigan funksiyalarni alohida fayllarga bo’lish.