Props
React yapısı itibariyle verileri parent(ebeveynden) children(çocuk) iletir. Küçük parçaların bu noktada kullanacağı verileri, fonksiyonları vb. props vasıtasıyla sağlar.
- Comment birleşenini inceleyelim yalın halde bu çekilde classlar ve diğer birleşenlerle bu şekilde görünür şimdi comment birleşenini props lar ve component lere ayırarak props ve aynı zamanda component nasıl oluşturulur bakalım.
Comment.js
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img
className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">{props.author.name}</div>
</div>
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">{formatDate(props.date)}</div>
</div>
);
}- İlk önce Image Avatar react birleşenni olarak dışarıya aktaralım.
function Avatar(props) {
return (
<img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} />
);
}author yerine user genel ismini verdik. Üst birleşenlerin alt birleşenleri bilmesine gerek yok.
- CommentArtık biraz basitleştirebiliriz :
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">{props.author.name}</div>
</div>
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">{formatDate(props.date)}</div>
</div>
);
}Daha sonra, UserInfo kullanıcının adının yanında bir simge oluşturan bir bileşeni çıkaracağız Avatar
UserInfo.js
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">{props.user.name}</div>
</div>
);
}- Comment Bu, daha da basitleştirmemize olanak tanır :
Comment.js
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">{formatDate(props.date)}</div>
</div>
);
}Proplar Salt Okunurdur
Bir bileşeni ister işlev olarak ister sınıf olarak bildirin , bileşen hiçbir zaman kendi özelliklerini değiştirmemelidir. Bu sum işlevi göz önünde bulundurun:
function sum(a, b) {
return a + b;
}Bu tür işlevlere "pure(saf)" adı verilir çünkü girdilerini değiştirmeye çalışmazlar ve aynı girdiler için her zaman aynı sonucu döndürürler.
- Buna karşılık, bu işlev kendi girdisini değiştirdiği için saf değildir:
function withdraw(account, amount) {
account.total -= amount;
}Tüm React bileşenleri, destekleri açısından saf işlevler gibi hareket etmelidir.
React Devtools
- Chrome extension olarak indire bildiğimiz. Bir eklentidir. Bu eklenti sayesinde componentleri, hoohsları ve propslar gibi react birleşenlerin yapsısını takip edebilir manipüle ederek uygulamanızın nasıl çalıştığını takip edebilirsiniz..
React Prop Type
- React proplar yardımıyla veri yönetimini yukarı aşağıya doğru akar. Componentlere veri gönderirken bir prop u veri tipine bakmadan göndereceğimiz gibi, Veri tipi, zorunluluk durumu gibi kritekerde göz önünde bulundurularak gönderilebilir.
Prop Types: isRequired
- Zorunlu alan gönderilmesi istenen.
name: PropTypes.string.isRequired,Prop Types: oneOfType
- Birden fazla veri tipinin gönderilmesine olanak tanır.
address: PropTypes.shape({
title: PropTypes.string,
zip: PropTypes.number,
}),Prop Types: shape
age: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,Default Props
User.defaultProps = {
name: "isimsiz",
isLoggedIn: false,
};- Herhangi bir şey tanımlanmamıi propa da herhangi bir değer atayabiliriz.
- Object veri tipinin değerlerinin belirlenmesini sağlar.
user.js
import PropTypes from "prop-types";
function User({ name, surname, isLoggedIn, age, friends, friends2 }) {
return (
<>
<h1>{isLoggedIn ? `${name} ${surname} (${age})` : "Giriş yapmadınız"}</h1>
{friends.map((friend, index) => (
<div key={index}>
{index}-{friend}
</div>
))}
{friends2.map((friend, index) => (
<div key={index}>
{index}-{friend.name}
</div>
))}
</>
);
}
User.propTypes = {
name: PropTypes.string.isRequired,
surname: PropTypes.string.isRequired,
isLoggedIn: PropTypes.bool.isRequired,
age: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
friends: PropTypes.array,
friends2: PropTypes.array,
address: PropTypes.shape({
title: PropTypes.string,
zip: PropTypes.number,
}),
};
User.defaultProps = {
name: "isimsiz",
isLoggedIn: false,
};
export default User;App.js
function App() {
return (
<>
<User
name="sefa"
surname="demirtas"
isLoggedIn={true}
age={29}
friends={["Ahmet", "Mehmet", "Yusuf"]}
friends2={friends2}
address={{
title: "Bayraklı/Izmir",
zip: 24755,
}}
/>
</>
);
}