React Animasyonları
React animasyonları, modern web uygulamalarında kullanıcı deneyimini geliştirmek için kritik bir rol oynar. Bu animasyonlar, kullanıcı arayüzündeki bileşenler arasında geçişler, geri bildirimler ve etkileşimler sırasında akıcı görsellik sağlar. React tabanlı SPAlarda (Single Page Application), animasyonlar sayfalar arası geçişleri yumuşatır, kullanıcı etkileşimlerini vurgular ve uygulamanın daha duyarlı ve profesyonel görünmesini sağlar.
React animasyonları, bileşen tabanlı mimariyle uyumlu olacak şekilde uygulanmalıdır. useState ve useReducer gibi state yönetim yöntemleri, props aracılığıyla veri akışı, bileşen yaşam döngüsü ve yeniden kullanılabilir bileşen yapıları, animasyonların kontrolünde temel kavramlardır. Framer Motion ve React Spring gibi kütüphaneler, animasyonları deklaratif bir şekilde tanımlamayı, keyframes ve easing kontrolünü kolaylaştırır.
Bu eğitimde, React animasyonlarını en iyi uygulamalarla geliştirmeyi, prop drilling ve gereksiz yeniden renderlerden kaçınmayı, yeniden kullanılabilir ve performanslı bileşenler oluşturmayı öğreneceksiniz. Ayrıca animasyonlu listeler, modal pencereler ve etkileşimli UI öğeleri gibi gerçek dünya senaryoları ile pratik yapma fırsatı bulacaksınız. Bu bilgiler, projelerinizi hem kullanıcı deneyimi hem de performans açısından optimize etmenize yardımcı olacaktır.
Temel Örnek
jsximport React, { useState } from 'react';
import { motion } from 'framer-motion';
function AnimasyonluKutu() {
const [goster, setGoster] = useState(false);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<button onClick={() => setGoster(!goster)}>
{goster ? 'Gizle' : 'Göster'} </button>
{goster && (
<motion.div
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0 }}
transition={{ duration: 0.5 }}
style={{
width: '100px',
height: '100px',
backgroundColor: '#4CAF50',
margin: '20px auto',
borderRadius: '10px'
}}
/>
)} </div>
);
}
export default AnimasyonluKutu;Bu örnekte AnimasyonluKutu bileşeni, useState ile kutunun görünürlüğünü kontrol eder. Framer Motion, motion.div kullanılarak initial, animate ve exit durumlarıyla animasyonu yönetir. transition özelliği ile animasyon süresi belirlenir.
Bu yaklaşım, React’in ileri düzey kavramlarını gösterir: lokal state yönetimi, bileşen tabanlı mimari ve veri akışının öngörülebilirliği. Bileşenlerin ayrıştırılması ve key kullanımı, prop drilling ve gereksiz renderlerin önüne geçer. Benzer yöntem, modallar, tooltips ve interaktif butonlar gibi farklı bileşenlerde de rahatlıkla uygulanabilir.
Pratik Örnek
jsximport React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
function GorevListesi() {
const [gorevler, setGorevler] = useState([]);
const [input, setInput] = useState('');
const gorevEkle = () => {
if (input.trim() !== '') {
setGorevler([...gorevler, { id: Date.now(), metin: input }]);
setInput('');
}
};
const gorevSil = (id) => {
setGorevler(gorevler.filter(g => g.id !== id));
};
return (
<div style={{ width: '300px', margin: '50px auto', textAlign: 'center' }}>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Yeni görev"
style={{ padding: '8px', width: '70%' }}
/>
<button onClick={gorevEkle} style={{ padding: '8px' }}>Ekle</button> <AnimatePresence>
{gorevler.map((gorev) => (
<motion.div
key={gorev.id}
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 50 }}
transition={{ duration: 0.3 }}
style={{
margin: '10px 0',
padding: '10px',
backgroundColor: '#f0f0f0',
borderRadius: '5px',
display: 'flex',
justifyContent: 'space-between'
}}
> <span>{gorev.metin}</span>
<button onClick={() => gorevSil(gorev.id)}>Sil</button>
</motion.div>
))} </AnimatePresence> </div>
);
}
export default GorevListesi;GorevListesi bileşeni, AnimatePresence kullanarak liste elemanlarının giriş ve çıkış animasyonlarını kontrol eder. useState ile liste ve input kontrolü sağlanır, array’lerde doğrudan değişiklik yapılmaz. Her öğeye unique key atanması, React’in render optimizasyonunu destekler.
Bu yapı, dinamik listeler, modal pencereler ve interaktif bileşenler için idealdir. AnimatePresence ve motion.div kombinasyonu, animasyonların senkronize ve akıcı olmasını sağlar.
React animasyonları için en iyi uygulamalar: bileşenleri yeniden kullanılabilir kılmak, state yönetimini net tutmak ve veri akışını öngörülebilir yapmak. Prop drilling, gereksiz renderler ve state mutasyonlarından kaçınılmalıdır. Framer Motion ve React Spring, bileşen yaşam döngüsüne uyumlu optimize animasyonlar sağlar.
Yaygın hatalar: key atamamak, state’i doğrudan değiştirmek, fazla render. Memo, lazy loading ve code splitting ile performans artırılabilir. Güvenlik açısından, animasyonlu içeriklerde doğrulanmamış verilerin render edilmemesi gerekir. Bu uygulamalar, güvenli, performanslı ve sürdürülebilir animasyonlar sağlar.
📊 Referans Tablosu
| React Element/Concept | Description | Usage Example |
|---|---|---|
| motion.div | Framer Motion ile div animasyonu | <motion.div animate={{ x: 100 }} /> |
| AnimatePresence | Bileşenlerin giriş/çıkış animasyonlarını yönetir | <AnimatePresence>{items.map(item => <motion.div key={item.id} />)}</AnimatePresence> |
| initial/animate/exit | Başlangıç, animasyon ve çıkış durumları | <motion.div initial={{ opacity:0 }} animate={{ opacity:1 }} exit={{ opacity:0 }} /> |
| transition | Animasyon süresi ve easing kontrolü | <motion.div transition={{ duration:0.5 }} /> |
| useState | Bileşen lokal state yönetimi | const [state, setState] = useState(initialValue) |
| key | Liste render optimizasyonu için benzersiz ID | {items.map(item => <motion.div key={item.id} />)} |
React animasyonları, kullanıcı deneyimini artıran ve uygulamaları daha duyarlı kılan temel araçlardır. Bu rehberde state yönetimi, lifecycle uyumu, yeniden kullanılabilir bileşen tasarımı ve performans optimizasyonu ele alınmıştır.
İleri adımlar: React Spring kullanımı, useMemo ile optimizasyon, lazy loading ve kompleks bileşen yapılarıyla çalışma. Pratik yaparak ve performansı izleyerek, profesyonel animasyonlar oluşturabilirsiniz. Kaynaklar: Framer Motion dokümantasyonu, ileri seviye React rehberleri, React toplulukları.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek