Komponentlar va JSX

Component nima

React'da component — bu qandaydir UI qaytaradigan function. Hammasi shu — vazifasi ekranning bir qismini tasvirlash bo'lgan function. Kelishuv bo'yicha uning nomi katta harf bilan boshlanadi.

function Welcome() {
  return <h1>Hello, world</h1>;
}

Welcome — bu component. React uni ishga tushirganda, sahifada <h1> hosil qiladi. Siz ilovani ko'plab kichik componentlarni birlashtirib quriladi — Header, Button, ProductCard — xuddi Lego g'ishtlari kabi.

JSX nima

Function ichidagi HTML'ga o'xshash qism — bu JSX. U markup'ni to'g'ridan-to'g'ri JavaScript ichida yozishga imkon beradi. Bu haqiqiy HTML emas va bu string ham emas — bu React elementlarga aylantiradigan maxsus sintaksis. Bir nechta qoida uni xursand qiladi.

1. Bitta root element qaytaring. Component bitta o'rab turuvchi elementni qaytarishi kerak. Bu xato:

return (
  <h1>Title</h1>
  <p>Text</p>   // Error: two elements side by side
);

Ularni bitta ota-element ichiga o'rang — <div> yoki sahifada qo'shimcha quti xohlamaganingizda bo'sh <>...</> ("Fragment" deb ataladi):

return (
  <>
    <h1>Title</h1>
    <p>Text</p>
  </>
);

2. class emas, className ishlating. class JavaScript'da band qilingan so'z bo'lgani uchun, JSX CSS classlar uchun className ishlatadi:

return <p className="intro">Hi</p>;

3. JavaScript'ni { } ichiga qo'ying. Jingalak qavslar sizga har qanday JavaScript ifodasini to'g'ridan-to'g'ri markup ichiga tushirishga imkon beradi:

function Greeting() {
  const name = "Ada";
  return <p>Hello, {name}!</p>; // shows: Hello, Ada!
}

Ichiga har qanday ifodani qo'yishingiz mumkin — o'zgaruvchi, {2 + 2} kabi hisob-kitob yoki function chaqiruvi. U yerga if kabi statement'larni qo'ya olmaysiz; buning o'rniga qiymat ishlating.

Component'ni render qilish

Component'ni ko'rsatish uchun uni burchak qavslar bilan tag kabi ishlatasiz. React katta harfni ko'radi va bu oddiy HTML tag emas, sizning component'ingiz ekanligini biladi:

function App() {
  return (
    <div>
      <Welcome />
      <Greeting />
    </div>
  );
}

O'zini yopadigan <Welcome />'ga e'tibor bering — bolalari (children) bo'lmagan component o'zini /> bilan yopadi. Endi App ikkala component'ni ham render qiladi. Bu ichma-ich joylashtirish — butun ilovalar shunday quriladi: kichik componentlar kattaroqlari ichida joylashtiriladi.

Suhbat maslahatlari

• Component'ni sodda ta'riflang: JSX qaytaradigan, katta harf bilan nomlangan function.
• JSX qoidalarini eslang — bitta root element, class o'rniga className va JavaScript uchun { }.
• Component'ni <Welcome /> kabi o'zini yopadigan tag sifatida yozib render qila olishingizni ko'rsating.