Proje: Profil kartı

Profil kartı projesinin amacını ve adımlarını gözden geçirirsin.

Proje: Profil kartı

Bu projede bir profil kartı uygulaması yapacaksın. Kart bir avatar, bir isim ve birkaç bilgi öğesi içerecek. Amacımız bileşenleri iç içe çağırarak gerçek bir kart tasarlamak.

Adımlar şunlar: önce Avatar bileşenini yazıp isim ve rol göstereceksin; sonra bilgileri bir listede toplayan InfoList bileşenini ekleyeceksin; son olarak ikisini ProfileCard bileşeninde birleştireceksin.

Her ders bir code adımıyla bir parça ekler ve başlangıç, önceki dersin çözümünü taşır.

Uygulama Avatar iskeleti

Aşağıdaki iskeleti tamamla. Avatar adında bir bileşen yaz; <div className="avatar"> içinde <p>Ayşe</p> ve <p>Geliştirici</p> döndürsün. Dışa aktarmayı unutma.

Örnek çözümü göster

function Avatar() {
  return <div className="avatar"><p>Ayşe</p><p>Geliştirici</p></div>;
}

export default Avatar;

Uygulama Avatar'a ikinci satır ekle

Aşağıdaki iskeleti tamamla. Avatar adında bir bileşen yaz; <div className="avatar"> içinde üç <p> etiketi olsun: isim, rol ve şehir. Dışa aktarmayı unutma.

Örnek çözümü göster

function Avatar() {
  return <div className="avatar"><p>Ayşe</p><p>Geliştirici</p><p>İstanbul</p></div>;
}

export default Avatar;

Kendini test et

Profil kartı hangi parçalardan oluşur?
- Avatar, isim, bilgi listesi
- Yalnızca isim
- Yalnızca avatar
- Yalnızca buton
Cevabı göster

Avatar, isim, bilgi listesi — Profil kartı avatar, isim ve bilgi listesinden oluşur.

Proje ilk adımı

İlk adımda ____ bileşenini yazacaksın.

Cevabı göster

İlk adımda Avatar bileşenini yazacaksın.

Proje adımlarını eşleştir

Avatar

İsim ve rol
InfoList

Bilgi listesi
ProfileCard

Birleşim
export

Dışa aktar

Sıradaki ders: Avatar bileşeni

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler