CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

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 <p> 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 <p>Ayşe</p> ve <p>Geliştirici</p> döndürsün. Dışa aktarmayı unutma.

Başlangıç kodu

App.jsx
// Avatar bileşenini buraya yaz

Örnek çözüm

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

export default Avatar;

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Avatar neyi gösterir?

  • Yalnızca tarih
  • İsim ve rol Doğru cevap
  • Yalnızca buton
  • Yalnızca resim

Açıklama: Avatar isim ve rol gösterir.

2 Avatar iskeleti

Soru 
Avatar bir ____ içinde durur.
Cevap 
Avatar bir div içinde durur.

Açıklama: Avatar div içine yerleşir.

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

Kavram Anlamı
div Kapsayıcı
className Sınıf
p Satır
export Dışa aktar

Başlangıç bölümündeki tüm dersler

1 React girişi

  1. React nedir?
  2. Kurulum ve Vite
  3. İlk bileşen
  4. Özet - React girişi

2 JSX temelleri

  1. JSX nedir?
  2. İfadeler ve süslü parantez
  3. Öznitelikler ve className
  4. Özet - JSX temelleri

3 Bileşenler

  1. Bileşen mantığı
  2. Bileşen ağacı
  3. İsimlendirme kuralları
  4. Özet - Bileşenler

4 Profil kartı

  1. Proje: Profil kartı
  2. Avatar bileşeni
  3. Bilgi listesi
  4. Kartı birleştir

5 Props

  1. Props nedir?
  2. Props okuma
  3. Children prop
  4. Varsayılan props
  5. Özet - Props

6 Koşullu render

  1. Koşullu render nedir?
  2. Ternary operatör
  3. Mantıksal AND (&&)
  4. Erken return
  5. Özet - Koşullu render

7 Liste render

  1. Liste render nedir?
  2. key özniteliği
  3. Diziden bileşen
  4. Filtreleme ve sıralama
  5. Özet - Liste render

8 Alışveriş listesi

  1. Proje: Alışveriş listesi
  2. Öğe bileşeni
  3. Liste gövdesi
  4. Boş durum

9 Olaylar

  1. Olaylar (events)
  2. Olay nesnesi
  3. Form olayları
  4. Özet - Olaylar

10 useState

  1. State nedir?
  2. useState çağrısı
  3. State güncelleme
  4. Birden fazla state
  5. Özet - useState

11 Sayaç uygulaması

  1. Proje: Sayaç uygulaması
  2. Sayı ve buton
  3. Azaltma ve sıfırlama
  4. Sınır kontrolü

12 Formlar

  1. Kontrollü input
  2. Form gönderimi
  3. Birden çok alan
  4. Özet - Formlar

13 Stil

  1. CSS ile stil
  2. CSS Modules
  3. Inline stiller
  4. Özet - Stil

14 styled-components

  1. styled-components nedir?
  2. Props ile stil
  3. Tema kullanımı
  4. Özet - styled-components

15 useReducer

  1. useReducer nedir?
  2. Aksiyon ve state
  3. useState vs useReducer
  4. Özet - useReducer

16 useEffect

  1. useEffect nedir?
  2. Bağımlılık dizisi
  3. Temizlik fonksiyonu
  4. Özet - useEffect

17 Context

  1. Context nedir?
  2. createContext
  3. Provider ve useContext
  4. Özet - Context

18 useRef

  1. useRef nedir?
  2. DOM erişimi
  3. Zamanlayıcı örneği
  4. Özet - useRef

19 Todo uygulaması

  1. Proje: Todo uygulaması
  2. Todo giriş formu
  3. Todo listesi
  4. Filtre ve özet

20 Başlangıç finali

  1. Meydan okuma: Hava durumu kartı
  2. Meydan okuma: Sepet özeti
  3. Meydan okuma: Sayaç ve sıfırlama
  4. Meydan okuma: Açılır menü