Proje: Profil kartı
- React kursu
- Başlangıç
- Ders 13/84
- 4 dk
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.
Başlangıç kodu
// Avatar bileşenini buraya yazÖrnek çözüm
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.
Başlangıç kodu
// Avatar bileşenini buraya yazÖrnek çözüm
function Avatar() {
return <div className="avatar"><p>Ayşe</p><p>Geliştirici</p><p>İstanbul</p></div>;
}
export default Avatar;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Profil kartı hangi parçalardan oluşur?
- Avatar, isim, bilgi listesi Doğru cevap
- Yalnızca isim
- Yalnızca avatar
- Yalnızca buton
Açıklama: Profil kartı avatar, isim ve bilgi listesinden oluşur.
2 Proje ilk adımı
İlk adımda ____ bileşenini yazacaksın.İlk adımda Avatar bileşenini yazacaksın.Açıklama: Header, Footer ve Card sonraki adımlardır.
3 Proje adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
Avatar |
İsim ve rol |
InfoList |
Bilgi listesi |
ProfileCard |
Birleşim |
export |
Dışa aktar |