React JSX ifodalari

JSX ning eng kuchli xususiyatlaridan biri bu JavaScript ifodalarini to‘g‘ridan-to‘g‘ri belgilashingiz ichiga joylashtirish qobiliyatidir.

Ifodalar

JSX ichiga istalgan yaroqli JavaScript ifodasini jingalak qavslar ichiga { } o‘rash orqali kiritishingiz mumkin.

React ifodani baholaydi va natijani DOMda ko‘rsatadi.

function Car() {
  return (
    <>
      <h1>My car</h1>
      <p>It has {218 * 1.36} horsepower</p>
    </>
  );
}

O‘zgaruvchilar

O‘zgaruvchilar ham to‘g‘ri ifodalardir. JSX ga o‘zgaruvchilarni { } jingalak qavslarga o‘rash orqali kiriting.

function Car() {
  const hp = 218 * 1.36;
  return (
    <>
      <h1>My car</h1>
      <p>It has {hp} horsepower</p>
    </>
  );
}

Funksiya chaqiruvlari

Funksiya chaqiruvlari haqiqiy ifodalardir. JSX ga funksiya chaqiruvlarini jingalak qavslar ichiga { } o‘rash orqali kiriting.

function kwtohp(kw) {
  return kw * 1.36;
}

function Car() {
  return (
    <>
      <h1>My car</h1>
      <p>It has {kwtohp(218)} horsepower</p>
    </>
  );
}

Obyekt xususiyatlari

JSX ichidagi obyekt xususiyatlariga kirish:

function Car() {
  const myobj = {
    name: "Fiat",
    model: "500",
    color: "white"
  };
  return (
    <>
      <h1>My car is a {myobj.color} {myobj.name} {myobj.model}</h1>
    </>
  );
}