CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Kartı birleştir

Avatar ve bilgi listesini bir ProfileCard bileşeninde birleştirirsin.

Kartı birleştir

Son adımda Avatar ve InfoList bileşenlerini ProfileCard içinde birleştireceğin. Bu, projenin son adımı.

ProfileCard bir <article className="card"> içinde önce Avatar'ı, sonra InfoList'i çağırır. Böylece iki küçük bileşen tek bir kart oluşturur.

Bu yapı sayesinde Avatar veya InfoList'i bağımsız olarak değiştirebilirsin; ProfileCard'ı etkilemeden.

Birleşim sırası

ProfileCard iki bileşeni sırayla çağırır: önce Avatar, sonra InfoList. Bu sıra, kartın görsel düzenini belirler: üstte isim, altta bilgiler.

Bileşen çağırma sırasını değiştirmek, kartın görünümünü de değiştirir. Bilgiler önce gelirse farklı bir profil kartı oluşur.

Projede Avatar'ı üstte tutmak istediğimiz için önce onu çağırırız.

Uygulama ProfileCard birleşimi

Aşağıdaki iskeleti tamamla. ProfileCard adında bir bileşen yaz; <article className="card"> içinde <Avatar /> ve <InfoList /> çağırsın. Dışa aktarmayı unutma.

Başlangıç kodu

App.jsx
// ProfileCard bileşenini buraya yaz
// Avatar ve InfoList zaten tanımlı

Örnek çözüm

App.jsx
function ProfileCard() {
  return <article className="card"><Avatar /><InfoList /></article>;
}

export default ProfileCard;

Soru ve cevaplar

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

1 ProfileCard neyi çağırır?

  • Yalnızca p
  • Yalnızca Header
  • Yalnızca Footer
  • Avatar ve InfoList Doğru cevap

Açıklama: ProfileCard Avatar ve InfoList'i çağırır.

2 Kart kapsayıcısı

Soru 
ProfileCard ____ içinde tutulur.
Cevap 
ProfileCard article içinde tutulur.

Açıklama: article bağımsız içerik için uygundur.

3 Proje bütünü

Kavram Anlamı
Avatar İsim ve rol
InfoList Bilgi listesi
ProfileCard Birleşim
article Kapsayıcı

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ü