Bilgi listesi

Profil bilgilerini bir listede toplarsın.

Bilgi listesi

Şimdi InfoList bileşenini ekleyeceğiz. Bu bileşen profil kartının altında yer alacak ve birkaç bilgi öğesini liste halinde gösterecek: konum, web sitesi, takipçi sayısı gibi.

Liste için HTML'in <ul> ve <li> etiketlerini kullanırız. JSX'te bu etiketler HTML ile aynı yazılır.

InfoList'i ayrı bir bileşen yapmak, ileride liste içeriğini değiştirmeyi kolaylaştırır.

Liste öğeleri

Her bilgi bir <li> içine yazılır. Örneğin <li>İstanbul</li> şehir bilgisini gösterir. Birden fazla <li> yan yana yazılır.

Liste içeriği gerçek bir profilden gelir: konum, web sitesi, takipçi sayısı. Projede sabit değerler kullanıyoruz; ileride bunları props ile dinamik yapacağız.

Listeyi ayrı bileşende tutmak, ProfileCard'ın sade kalmasını sağlar.

Uygulama InfoList bileşeni

Aşağıdaki iskeleti tamamla. InfoList adında bir bileşen yaz; <ul className="info"> içinde üç <li> olsun: İstanbul, codeblanks.com, 1200. Dışa aktarmayı unutma.

Örnek çözümü göster

function InfoList() {
  return <ul className="info"><li>İstanbul</li><li>codeblanks.com</li><li>1200</li></ul>;
}

export default InfoList;

Kendini test et

Bilgi listesi hangi etiketleri kullanır?
- form ve input
- table ve tr
- ul ve li
- header ve footer
Cevabı göster

ul ve li — Liste için ul ve li kullanılır.

Liste kapsayıcısı

Bilgi listesi ____ ile başlar.

Cevabı göster

Bilgi listesi ul ile başlar.

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

ul

Kapsayıcı
li

Öğe
İstanbul

Değer
InfoList

Bileşen

Sıradaki ders: Kartı birleştir

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler