Kartı birleştir

Avatar ve bilgi listesini bir ProfileCard bileşeninde birleştirirsin.

Kartı birleştir

Son adımda Avatar ve InfoList bileşenlerini ProfileCard içinde birleştireceğin. Bu, projenin son adımı.

ProfileCard bir <article className="card"> içinde önce Avatar'ı, sonra InfoList'i çağırır. Böylece iki küçük bileşen tek bir kart oluşturur.

Bu yapı sayesinde Avatar veya InfoList'i bağımsız olarak değiştirebilirsin; ProfileCard'ı etkilemeden.

Birleşim sırası

ProfileCard iki bileşeni sırayla çağırır: önce Avatar, sonra InfoList. Bu sıra, kartın görsel düzenini belirler: üstte isim, altta bilgiler.

Bileşen çağırma sırasını değiştirmek, kartın görünümünü de değiştirir. Bilgiler önce gelirse farklı bir profil kartı oluşur.

Projede Avatar'ı üstte tutmak istediğimiz için önce onu çağırırız.

Uygulama ProfileCard birleşimi

Aşağıdaki iskeleti tamamla. ProfileCard adında bir bileşen yaz; <article className="card"> içinde <Avatar /> ve <InfoList /> çağırsın. Dışa aktarmayı unutma.

Örnek çözümü göster

function ProfileCard() {
  return <article className="card"><Avatar /><InfoList /></article>;
}

export default ProfileCard;

Kendini test et

ProfileCard neyi çağırır?
- Yalnızca p
- Yalnızca Header
- Yalnızca Footer
- Avatar ve InfoList
Cevabı göster

Avatar ve InfoList — ProfileCard Avatar ve InfoList'i çağırır.

Kart kapsayıcısı

ProfileCard ____ içinde tutulur.

Cevabı göster

ProfileCard article içinde tutulur.

Proje bütünü

Avatar

İsim ve rol
InfoList

Bilgi listesi
ProfileCard

Birleşim
article

Kapsayıcı

Sıradaki ders: Props nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler