Sahifani komponentlarga bo'lish

Umumiy ko'rinish

Biror React yozishdan oldin, dizaynga qarab uni components'ga — kichik, nomlangan UI qurilish bloklariga — ajratish foydali. Yaxshi odat: maketni chop eting (yoki uni tasavvur qiling), so'ngra bo'laklar atrofiga qutilar chizing. Har bir quti nomzod component. Qutilar ichidagi qutilar component tree'ga (ota-bola ierarxiyasi) aylanadi, xuddi papkalar ichidagi papkalar kabi.

Karta ro'yxatida qutilar chizish

Mahsulot kartalari ro'yxatini ko'rsatadigan sahifani tasavvur qiling. Unga diqqat bilan qarasangiz, takrorlanadigan va ichma-ich joylashgan bo'laklarni ko'rasiz:

• Butun ekran → bitta katta quti.
• Sarlavha va kartalar to'ri → uning ichidagi ikkita quti.
• Har bir karta → o'z qutisi (ular hammasi bir xil ko'rinadi, shuning uchun bu ko'p marta ishlatiladigan bitta qayta ishlatiladigan component).
• Karta ichida → rasm, sarlavha, narx, tugma → kichikroq qutilar.

Qutilardan daraxtga

O'sha qutilarni tashqaridan ichkariga qarab ichma-ich joylashgan ro'yxatga aylantiring:

ProductPage
├─ PageHeading
└─ ProductList
   └─ ProductCard   (repeated for each product)
      ├─ ProductImage
      ├─ ProductTitle
      ├─ ProductPrice
      └─ AddToCartButton

Bu daraxt sizning JSX'ingizga deyarli bir-biriga mos keladi. ProductList ko'plab ProductCard'larni render qiladi; har bir ProductCard o'zining kichikroq qismlarini render qiladi.

Componentlarni nomlash

Componentlarga ular qanday ko'rinishiga emas, balki ular nima ekanligiga asoslanib nom bering. ProductCard BlueBox'dan yaxshiroq, chunki rang o'zgarishi mumkin, lekin ma'nosi o'zgarmaydi. PascalCase'dan foydalaning (har bir so'z katta harf bilan) — React <div> kabi kichik harfli taglarni oddiy HTML deb, <ProductCard> kabi katta harflilarni esa sizning componentlaringiz deb hisoblaydi.

Ularni qayta ishlatish

Katta yutuq — bu qayta ishlatish (reuse). Siz ProductCard'ni bir marta yozasiz, so'ngra ma'lumotingizdagi har bir element uchun uni render qilasiz. Farqlar (bu mahsulotning nomi, narxi, rasmi) props sifatida kiradi — otadan uzatilgan inputlar, xuddi function argumentlari kabi.

function ProductList({ products }) {
  return (
    <div>
      {products.map((p) => (
        <ProductCard key={p.id} name={p.name} price={p.price} />
      ))}
    </div>
  );
}

Foydali umumiy qoida: agar UI bo'lagi takrorlansa, yoki o'zining ishiga ega bo'lishi uchun yetarlicha katta bo'lsa, yoki uni alohida test qilishni xohlasangiz — uni component qiling. Lekin dastlab haddan tashqari bo'lmang; bir nechta oqilona qutilardan boshlang va component gavjum bo'lgandagina uni yanada ajrating.

Suhbat maslahatlari

• Jarayoningizni ovoz chiqarib bayon qiling: "Men maketda qutilar chizardim, so'ngra ularni component tree'ga aylantirardim."
• Componentlarni ma'no bo'yicha nomlang (ProductCard), PascalCase ishlating va takrorlanadigan UI props bilan oziqlantiriladigan bitta qayta ishlatiladigan component'ga aylanishini ta'kidlang.
• Erta haddan ortiq muhandislikdan (over-engineering) qochishingizni eslatib o'ting — soddadan boshlang va componentlarni faqat o'sganda ajrating.