Avatar bileşeni

Avatar bileşenini yazıp isim ve rol gösterirsin.

Avatar bileşeni

Önceki derste Avatar iskeletini yazdın. Şimdi onu geliştirip isim ve rol birlikte göstereceksin. Kartın merkezinde avatar olacak.

Avatar, profil kartının en üstünde duran küçük bir bloktur: bir isim, bir rol ve varsa bir resim. Biz projede resmi atlayıp yalnızca metin kullanıyoruz.

İlerleyen derslerde bu Avatar'ı ProfileCard içine yerleştireceğiz.

Avatar stilleri

Avatar'a className="avatar" vermek CSS ile stil vermeye olanak tanır. Bu projede stil yazmıyoruz ama iskelet hazır olsun diye className ekliyoruz.

Bileşenin içindeki iki  etiketi isim ve rolü ayrı satırlarda gösterir. Bu basit yapıyı ilerleyen derslerde liste ile değiştireceğiz.

Şimdi kodu yazalım ve Avatar'ı dışa aktaralım.

Uygulama Avatar'ı tamamla

Aşağıdaki iskeleti tamamla. Avatar adında bir bileşen yaz; <div className="avatar"> içinde Ayşe ve Geliştirici 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;

Kendini test et

Avatar neyi gösterir?
- Yalnızca tarih
- İsim ve rol
- Yalnızca buton
- Yalnızca resim
Cevabı göster

İsim ve rol — Avatar isim ve rol gösterir.

Avatar iskeleti

Avatar bir ____ içinde durur.

Cevabı göster

Avatar bir div içinde durur.

Avatar parçalarını eşleştir

div

Kapsayıcı
className

Sınıf
p

Satır
export

Dışa aktar

Sıradaki ders: Bilgi listesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler