Reactda Propslar
Props - bu properties yani xossalar degan so'zning qisqartmasidir.
Reactda komponentlarga tashqaridan ma'lumot uzatish uchun props dan foydalaniladi.
Bu xuddi funksiyaga parametr uzatgandek ishlaydi.
function Greeting(props) {
return (
<h2>Hello {props.name}</h2>
)
}
function App() {
return (
<div>
<Greeting name="Davron" />;
<Greeting name="Ali" />;
</div>
)
}
name="Davron" orqali biz Greeting komponentiga props yuboryapmiz.
Shunda props.name degani "Davron" bo‘ladi.
Props — bu nima aslida?
Props — bu komponentga tashqaridan yuboriladigan ma'lumotlar.
React’dagi har bir komponent — bu funksiyaga o‘xshaydi. Props orqali siz bu funksiyaga parametrlar yuborasiz.
📌 Props qanday ishlaydi?
2. Komponentning funksiyasi ichida props obyektini olasiz:
function User(props) {
return <p>{props.name} {props.age} yoshda</p>;
}
function Welcome(props) {
return <h2>Assalomu alaykum, {props.name}!</h2>;
}
function App() {
return (
<div>
<Welcome name="Davron" />
<Welcome name="Aziz" />
</div>
);
}
function Welcome({ name }) {
return <h2>Assalomu alaykum, {name}!</h2>;
}
🎯 Qanday foydasi bor?
- Kodni dinamik qiladi.
- Bir xil komponentni har xil ma’lumot bilan qayta-qayta ishlatish mumkin.
- Ma’lumot oqimini boshqarish (parent → child) osonlashadi.
🛑 Eslatma:
- Props orqali farzand komponent ota komponentga hech narsa yubora olmaydi.
- Props read-only, ya'ni faqat o‘qiladi, o‘zgartirilmaydi.
🧠 Oddiy o‘xshatish (hayotiy misol):
Tasavvur qiling, siz boshqaruvchisiz (parent), va siz yordamchingizga (child) “Mana bu hujjatni olib bor” deb aytasiz. Hujjat — bu props bo‘ladi. Siz uzatyapsiz, yordamchingiz uni o‘qiydi, lekin o‘zgartirmaydi.