JSX — expression, conditional rendering, list rendering

~20 daq · React · Kirish va Asoslar

Expression — JSX ichida JavaScript yozish

JSX ichida {} qo'ysangiz — ichiga istalgan JavaScript ifodasi yozish mumkin. Ifoda degani — qiymat qaytaradigan narsa: o'zgaruvchi, hisoblash, metod chaqiruvi, ternary.

const ism = 'Jasur';
const yosh = 25;
const narx = 15000;

function App() {
  return (
    <div>
      <p>{ism}</p>                          {/* Jasur */}
      <p>{yosh * 2}</p>                     {/* 50 */}
      <p>{ism.toUpperCase()}</p>            {/* JASUR */}
      <p>{narx.toLocaleString()} so'm</p>  {/* 15 000 so'm */}
      <p>{new Date().getFullYear()}</p>     {/* 2026 */}
    </div>
  );
}

if, for, while — bular ifoda emas, operator. Qiymat qaytarmaydi, shuning uchun {} ichida ishlamaydi. Buning o'rniga ternary yoki boshqa usullar ishlatiladi.

Conditional Rendering — shartga qarab ko'rsatish

Foydalanuvchi login qilganmi? Mahsulot stokda bormi? Ma'lumot yuklanayaptimi? — bularni shartga qarab ko'rsatish kerak bo'ladi.

Ternary — ikki holat

function Profil({ loginQilgan }) {
  return (
    <div>
      {loginQilgan
        ? <h2>Xush kelibsiz!</h2>
        : <p>Iltimos, tizimga kiring</p>
      }
    </div>
  );
}

loginQilgan true bo'lsa birinchisi, false bo'lsa ikkinchisi ko'rsatiladi.

&& — faqat bitta holat

Faqat biror shart to'g'ri bo'lganda ko'rsatish kerak bo'lsa:

function Sahifa({ xatoBormi, xatoMatni }) {
  return (
    <div>
      <h1>Sahifa</h1>
      {xatoBormi && <p className="xato">{xatoMatni}</p>}
    </div>
  );
}

xatoBormi false bo'lsa — <p> umuman ko'rsatilmaydi.

⚠️ Keng tarqalgan tuzoq: && bilan 0 sonini ishlatmang.

// ❌ Xato — ekranda "0" chiqadi!
{users.length && <UserList />}

// ✅ To'g'ri
{users.length > 0 && <UserList />}

Nima uchun? 0 && <UserList /> — JavaScript 0 ni qaytaradi. React false ni ko'rsatmaydi, lekin 0 ni ko'rsatadi. Bu ko'pchilik duch keladigan xato.

Murakkab shartlar — o'zgaruvchiga chiqarish

Shart murakkab bo'lsa, JSX ichida yozish o'qilmay qoladi. O'zgaruvchiga chiqaring:

function Tugma({ holat }) {
  let kontent;

  if (holat === 'yuklanmoqda') {
    kontent = <span>Yuklanmoqda...</span>;
  } else if (holat === 'xato') {
    kontent = <span className="xato">Xato yuz berdi</span>;
  } else {
    kontent = <span>Tayyor</span>;
  }

  return <div className="tugma">{kontent}</div>;
}

JSX ichida if ishlamaydi, lekin JSX dan oldin istalgan JavaScript yozish mumkin.

List Rendering — ro'yxat ko'rsatish

Massivdagi ma'lumotlarni ekranda ko'rsatish uchun .map() ishlatiladi.

const mevalar = ['Olma', 'Nok', 'Uzum', 'Shaftoli'];

function App() {
  return (
    <ul>
      {mevalar.map(meva => (
        <li key={meva}>{meva}</li>
      ))}
    </ul>
  );
}

key — nima uchun kerak?

key bo'lmasa konsolda warning chiqadi:

Warning: Each child in a list should have a unique "key" prop.

Nima uchun kerak? React ro'yxatni qayta chizayotganda qaysi element o'zgarganini, qaysi yangi qo'shilganini, qaysi o'chirilganini bilishi kerak. key — React uchun har bir elementning "pasporti".

const users = [
  { id: 1, ism: 'Ali' },
  { id: 2, ism: 'Vali' },
  { id: 3, ism: 'Soli' },
];

function App() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.ism}</li>
      ))}
    </ul>
  );
}

key — massivdagi har bir element uchun unikal va barqaror bo'lishi kerak. Ma'lumotlar bazasidan kelgan id — eng yaxshi tanlov.

key sifatida index ishlatmang

// ❌ Yomon
{users.map((user, index) => (
  <li key={index}>{user.ism}</li>
))}

Nima uchun yomon? Ro'yxat o'rtasidan element o'chirilsa — indexlar siljiydi. Masalan, 3 ta elementdan 2-sini o'chirsangiz:

O'chirishdan oldin:    O'chirishdan keyin:
key=0 → Ali           key=0 → Ali
key=1 → Vali    →     key=1 → Soli   ← React "Vali o'zgardi" deb o'ylaydi
key=2 → Soli          (Soli yo'q)    ← React "Soli o'chirildi" deb o'ylaydi

React noto'g'ri elementni yangilaydi. Input ichidagi matn, animatsiya holati — bular noto'g'ri joyga "ko'chib" qolishi mumkin.

Agar ro'yxat hech qachon o'zgarmasa (statik) — index ishlatish mumkin. Lekin dinamik ro'yxatlarda har doim unikal id ishlating.

Hammasi birgalikda

const vazifalar = [
  { id: 1, matn: "React o'rganish", bajarildi: true },
  { id: 2, matn: 'Loyiha yozish', bajarildi: false },
  { id: 3, matn: 'Deploy qilish', bajarildi: false },
];

function VazifaRoyxati({ faqatQolganlar }) {
  const korsatiladigan = faqatQolganlar
    ? vazifalar.filter(v => !v.bajarildi)
    : vazifalar;

  return (
    <div>
      <h2>Vazifalar ({korsatiladigan.length} ta)</h2>

      {korsatiladigan.length === 0 && (
        <p>Hamma vazifa bajarildi! 🎉</p>
      )}

      <ul>
        {korsatiladigan.map(vazifa => (
          <li
            key={vazifa.id}
            style={{ textDecoration: vazifa.bajarildi ? 'line-through' : 'none' }}
          >
            {vazifa.matn}
            {vazifa.bajarildi && <span> ✓</span>}
          </li>
        ))}
      </ul>
    </div>
  );
}

Xulosa

• {} ichida istalgan JavaScript ifodasi yoziladi — operator emas
• Shartli ko'rsatish: ternary (? :), &&, yoki o'zgaruvchiga chiqarish
• && bilan 0 ishlatmang — ekranda 0 chiqadi
• Ro'yxat uchun .map(), har bir elementga key berish shart
• key sifatida index emas — unikal id ishlating

Keyingi dars

5-dars: Component — nima, Function Component, nima uchun kichik bo'laklarga bo'lamiz