React qo'llanma 1-qism

Quyida siz bilishingiz kerak bo'lgan Reactning muhim mavzularini qisqa va aniq tushuntirishga harakat qilaman.

Ko'rib chiqiladigan mavzular:

• React elementlari
• React element atributlari
• React element stillari
• Fragment haqida
• Componentlar
• Props nima?
• Children props haqida
• Reactda conditionallar
• Ro'yxatlar(lists) haqida

React elementlar haqida:

React elementlar odatiy HTML elementlari kabi yoziladi.

Ularni yozishda biz foydalanadigan xususiyat esa JSX deb ataladi. JSX bu JavaScript fuksiya hisoblanib, HTML dan biroz o'zgacha sintaksis bilan farq qiladi. Masalan HTML da single-tag elementlar /(slash)siz yozilsa, JSX da / bilan tugashi kerak.

React element atributlari haqida:

Va yana JSX atributlar uchun ham biroz boshqacha sintaksis ishlatadi. JSX JavaScript fuksiya bo'lgani uchun va JavaScript "camelcase nomlash" usulidan foydalangani uchun, HTML dan ko'ra farqli ravishda yoziladi. Bunga oddiy misol HTMl dagi class atributi JSX da className ko'rinishida yoziladi.

React elementlariga stil berish:

Biz react elementlariga inline stil berish uchun ""(qo'shtirnoq)lardan emas balki {}(jingalak qovus)lardan foydalanamiz.

React Fragment haqida:

Reactda fragment nomli element mavjud. Reactda componentlar faqat bitta elementni qaytara oladi.

Shu sabab siz hamma elementlaringizni bitta ona elementga masalan <div>ga o'rashingiz kerak. Lekin ba'zida bizga hech qanday ona elementga o'ralmagan elementlar qaytarilishi zarur. Aynan shu hollarda bizga fragment kerak bo'ladi.

Biz fragmentni <></> bunday ko'rinishda yoki <React.Fragment></React.Fragment> ko'rinishida yozishimiz mumkin.

Componentlar:

Reactda biz elementlar guruhini bitta component qilib olishimiz mumkin. Oddiy funksianal componentlar huddi JavaScript funksiyalari kabi yoziladi ammo 2 ta farq bilan:

• JavaScript ga o'xshamagan holda funksiya katta harf bilan boshlanishi kerak.(Header)
• Funksianal Componentlar JSX return qilishi kerak.

Props nima?

React componentlar ularga yuborilgan props nomli axborotdan foydalana oladi. Props bu ona componentdan bola componentga yuborilgan axborotdir. Bu yerda biz name nomli propni ona Component App dan bola component User ga berib yuboryappiz.

Props object bo'lgani uchun biz name ni property sifatida chaqiramiz.

Eslatma: Dinamik qiymatlarni JSX ni ichida ishlatishimiz uchun biz {}(jingalak qovs)dan foydalanamiz.

Props object bo'lgani uchun biz uning propertylarini object destructing orqali olishimiz ham mumkin.

Istalgan JavaScript qiymatlar props sifatida jo'natilishi mumkin.

Children Props:

Props lar Component taglarining ochilish va yopilishi orasiga joylash orqali ham yuborilishi mumkin. Ular props objectining children propertysiga saqlanadi.

Reactda conditionallar:

Reactda element va componentlar shartli ravishda ko'rsatilishi mumkin.

if shartli operatoridan foydalanib componentni ko'rsatish:

if shartli operatoridan faqatgina returnning tashqarisida foydalanishimiz mumkin, ammo siz returnni ichida shartli operadorlardan foydalanmoqchi bo'lsangiz ternary operatori dan foydalansangiz bo'ladi.

Ro'yxat/List lar haqida:

React componentlar ro'yxatini .map() funksiyasi orqali chiqarishimiz mumkin. .map() funksiyasi bizga arraydagi ma'lumotlarni JSX ga o'tkizishimizga yordam beradi.

Quyida biz davlatlar ro'yxatini Davlat komponenti orqali chiqarmoqdamiz:

Qachonki biz ma'lumotlar ro'yxatini chiqarayotganimizda(looping) , element/component ga key prop ini berishimiz kerak va key prop ning qiymati takrorlanmas bo'lishi zarur.

Davomi bor...