Listeler, Anahtarlar ve Koşullu Oluşturma
.map() ile öğe dizileri oluşturun, kararlı key props sağlayın ve && ile üçlü operatörü kullanarak öğeleri koşullu biçimde oluşturun.
Listeler, Anahtarlar ve Koşullu Oluşturma, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Listeleri .map() ile Oluşturma
Bir dizide .map() çağırıp her öğe için JSX döndürerek dinamik bir liste oluşturun. React, öğelerden oluşan bir diziyi tek bir öğe gibi oluşturur.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);Anahtar Özelliği — Neden Önemli
key, bir listedeki hangi öğelerin değiştiğini, eklendiğini veya kaldırıldığını belirlemesine yardımcı olan özel bir React özelliğidir. Anahtarlar olmadan (veya indisler gibi kararlı olmayan anahtarlarla) React hatalı güncellemeler üretebilir.
İyi ve Kötü Anahtarlar
İyi anahtarlar: verilerinizdeki benzersiz ve kararlı kimlikler (örneğin, item.id). Kötü anahtarlar: dizi indisleri (öğeler yeniden sıralanabilir) veya rastgele değerlerdir (her oluşturmada değişir).
// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}
// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}Nesneleri Oluşturma
Nesnelerden oluşan bir diziyi bileşenlere eşleyin ve nesneyi özelliklere ayırarak aktarın.
interface Todo { id: number; text: string; done: boolean; }
const todos: Todo[] = [...];
return (
<ul>
{todos.map(({ id, text, done }) => (
<TodoItem key={id} text={text} done={done} />
))}
</ul>
);&& ile Koşullu Oluşturma
JSX'i koşullu olarak eklemek için && kısa devre işleci kullanın. Sol taraf yanlış kabul edilen bir değerse hiçbir şey oluşturulmaz. Yanlış kabul edilen sayılara dikkat edin; 0, '0' olarak oluşturulur.
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Üçlü İfadeyle Koşullu Oluşturma
Bir koşula göre iki öğeden birini oluşturmak için üçlü işleci kullanın.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}if Deyimiyle Koşullu Oluşturma
Karmaşık koşullar için return'den önce bir if deyimi kullanın. Yükleme veya hata durumlarında erken değer döndürün.
function UserProfile({ user }: { user: User | null }) {
if (!user) return <p>Loading...</p>;
if (user.banned) return <p>Account suspended.</p>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}Eşlemeden Önce Filtreleme
Yalnızca eşleşen öğeleri oluşturmak için eşlemeden önce diziyi filtreleyin. Bu yaklaşım temiz ve okunabilirdir.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Boş Durum
Boş dizi durumunu her zaman ele alın. Boş bir listeyi sessizce oluşturmak kafa karıştırıcıdır; bunun yerine yararlı bir boş durum iletisi gösterin.
return (
<div>
{todos.length === 0
? <p className="empty-state">No tasks yet. Add one above!</p>
: <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
}
</div>
);Listeler için portal oluşturma
Farklı bir DOM düğümünde (açılır menü gibi) görünmesi gereken uzun listelerde ReactDOM.createPortal kullanılabilir. Ancak liste oluşturmanın çoğu ağaç içinde basittir.
Performans için sanallaştırılmış listeler
Çok uzun listeler (1.000'den fazla öğe) için react-window veya @tanstack/react-virtual gibi bir sanallaştırma kütüphanesi kullanın. Bu kütüphaneler yalnızca görünür satırları oluşturur ve DOM performansı sorunlarını önler.
Kısa kontrol
React listelerinde dizi indeksini key olarak kullanmak ne zaman kabul edilebilir?
Özet: Listeler ve koşullu oluşturma
Listeleri .map() ile oluşturun. Her zaman kararlı ve benzersiz key özellikleri ekleyin. İsteğe bağlı öğeler için && kullanın (0 değerine dikkat edin). İki seçenekten biri için üçlü ifadeyi kullanın. Yüklenme/hata durumları için erken dönüşler kullanın. Koşullu listeler için eşlemeden önce filtreleyin. Boş diziler için boş durum mesajı gösterin. Çok uzun listeleri sanallaştırın.
Sıkça Sorulan Sorular
“Listeler, Anahtarlar ve Koşullu Oluşturma” dersi ücretsiz mi?
Evet — “Listeler, Anahtarlar ve Koşullu Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Listeler, Anahtarlar ve Koşullu Oluşturma” dersinde ne öğreneceğim?
.map() ile öğe dizileri oluşturun, kararlı key props sağlayın ve && ile üçlü operatörü kullanarak öğeleri koşullu biçimde oluşturun. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Listeler, Anahtarlar ve Koşullu Oluşturma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- JSX: Söz Dizimi ve Dönüştürme
- İşlevsel Bileşenler ve Props
- useState Hook'u: Durum ve Yeniden Oluşturmalar
- Listeler, Anahtarlar ve Koşullu Oluşturma