React'ta Bileşen Props'ları

Önceki derste birkaç tane ürün örneği gösterdik:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Şu an için her ürün etiketi çağrısı ekrana aynı şeyi gösteriyor. Şimdi her ürünü benzersiz yapalım.

Örneğin, her ürünün bir adı ve fiyatı olmalı. Her ürün etiketi çağrısının, kendi adı ve fiyatı ile birlikte, bize uygun olarak biçimlendirilmiş bir ürünü göstermesini sağlayalım.

Bunun için birkaç adım atmamız gerekiyor.

Başlangıç olarak, ürün etiketini çağırırken bu etikete iki nitelik yazacağız: ürün adı için name niteliği ve fiyatı için cost niteliği, işte şöyle:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Bu niteliklerin isimleri ve değerleri, bileşenimiz Product'ın yapıcı fonksiyonunun ilk parametresine bir nesne olarak gelecek:

function Product(props) {
	console.log(props); // name ve cost anahtarlarına sahip nesne
	
	return <p>
		product
	</p>;
}

Parametrenin adı herhangi bir şey olabilir, ancak React'ta genellikle props olarak adlandırılır. Aslında bu sadece bir parametre adı değil, React'ın önemli bir kavramıdır.

Bu kavramın özü şudur: bir bileşen etiketi çağrılırken bu etikete veri içeren nitelikler yazılabilir. Bu veriler bileşenin props'larına (özelliklerine) gelecektir. Ardından bileşen bu verileri, örneğin gerekli biçimlendirmeyi oluşturmak için kullanabilir.

Bunu yapalım:

function Product(props) {
	return <p>
		name: <span>{props.name}</span>,
		cost: <span>{props.cost}</span>
	</p>;
}

Daha kullanışlı ve daha yaygın olan, props nesnesini kullanmak değil, doğrudan fonksiyon parametrelerinde props'ların yapısını çözmektir (destructuring):

function Product({ name, cost }) {
	return <p>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</p>;
}

Bir çalışanın verilerini ekranda gösteren Employee bileşenini yapın. Bu veriler soyadı, adı, baba adı ve maaşı olsun. Bu verileri size uygun bir biçimlendirme ile düzenleyin. App bileşeninde farklı verilere sahip üç çalışanı gösterin.