Axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti “Individual loyiha” ishi

1.2 React Compnentlari haqida ma’lumot.
Komponent hosil qilishning eng oddiy yo’li bu JavaScript funksiyasini yozish:

Bu funksiya React komponent deb aytishga loyiq chunki u yagona “props” (kengaytmasi inglizcha “properties”) obyekt argumentini ma’lumotlari bilan birga qabul qiladi va React elementini qaytaradi. Biz bunday komponentlarni “funksiya komponentlari” deb ataymiz chunki shundoq ham JavaScript funksiya bo’lgani uchun.
Bundan tashqari siz ES6 klasslaridan foydalanib komponent hosil qilishingiz mumkin:

Yuqoridagi ikki komponentlar React nuqtai nazaridan bir biriga teng.
Keyingi bo’limlarda funksiya va klass komponentlarini o’ziga hos qo’shimcha xususiyatlari haqida muhokama qilamiz.
Bundan oldin biz faqat DOM teglariga ega bo’lgan React elementlarini ko’rib chiqgan edik:

Ammo, React elementlar dasturchi tomonidan yaratilgan komponentlarni ham o’z ichiga olishi mumkin

Qachonki React dasturchi yaratgan komponentni element ko’rinishida uchratsa, JSX attributlari va bolalarini shu komponentga bir dona obyekt sifatida uzatadi. Biz bu obyektni “props” deb ataymiz.
Masalan, Ushbu kod sahifada “Salom, Sara” deb chiziladi:

Komponentlarni Ajratish

Komponentlarni kichik komponentlarga ajratib olishdan qo’rqmang.
Masalan, quyidagi Comment komponentiga e’tibor bering:

Bu komponent o’ziga author (obyekt), text (string) va date (date) larni props sifatida oladi va ijtimoiy tarmoq veb-saytidagi kommentni tasvirlaydi.
Bu elementlar bir birini ichida joylashgani uchun komponentni o’zgartirish muammo bo’lishi mumkin, shu o’rinda bu komponentni alohida qismlarini ham qayta ishlatish muammo. Keling bundan bir nechta komponent ajratib olamiz.
Birinchi bo’lib, Avatarni ajratib olamiz:

Avatar komponenti Comment komponenti ichida chizilayotganini bilishi shart emas. Shuning uchun biz prop nomini author emas, balki user deb umumiy shaklda nomladik.
Biz komponent ishlatilayotgan joyi nuqtai nazaridan kelib chiqib proplarni nomlashdan ko’ra, prop nomlarini komponentning o’zini nuqtai nazaridan kelib chiqqan holda nomlashni maslahat beramiz.
Endi Comment ni ozgina soddalashtiramiz: