Ek Kaynaklar
Ek Kaynaklar, React geliştirme sürecinde uygulamaları daha ölçeklenebilir, verimli ve sürdürülebilir hâle getirmek için kullanılan ek araçlar, teknikler ve tasarım kalıplarını ifade eder. Bu kaynaklar, bileşenlerin durum yönetimini optimize etmek, veri akışını kontrol etmek, gereksiz render işlemlerini azaltmak ve bileşenlerin yaşam döngüsünü yönetmek için kritik öneme sahiptir. Modern tek sayfa uygulamalarında (SPA) bu kaynakların kullanımı, kullanıcı deneyimini iyileştirirken aynı zamanda uygulamanın performansını da artırır.
React geliştirme sırasında Ek Kaynaklar, kompleks durum yönetiminde (useState, useReducer), global state yönetiminde (Context API, Redux) ve yan etkileri kontrol etmede (useEffect) kullanılır. React.memo, useCallback ve lazy loading gibi teknikler, uygulamanın render maliyetlerini düşürerek performansı artırır. Bu kaynakları doğru şekilde kullanmak, prop drilling sorununu önler, bileşenlerin yeniden kullanılabilirliğini artırır ve kodun bakımını kolaylaştırır.
Bu doküman, okuyucuya React bileşenlerini daha etkili bir şekilde yönetmeyi, veri akışını optimize etmeyi ve performansı artırmayı öğretecek. Ayrıca, modern web uygulamalarında Ek Kaynaklar kullanılarak oluşturulabilecek uygulama örnekleri sunulacak ve ileri seviye React geliştirme teknikleri aktarılacaktır.
Temel Örnek
jsximport React, { useState } from 'react';
function Sayaç() {
const [sayi, setSayi] = useState(0);
const artır = () => setSayi(prev => prev + 1);
const azalt = () => setSayi(prev => prev - 1);
return (
<div style={{ textAlign: 'center', padding: '20px' }}> <h2>Basit Sayaç</h2> <p>Mevcut Değer: {sayi}</p> <button onClick={artır}>Artır</button> <button onClick={azalt}>Azalt</button> </div>
);
}
export default Sayaç;Bu örnek, useState hook’unu kullanarak bileşenin yerel durumunu yönetmektedir. setSayi fonksiyonu, önceki durumu referans alarak güncelleme yapar (prev => prev + 1) ve durumun doğrudan değiştirilmesini engeller. Bu yöntem, gereksiz render işlemlerinin önüne geçer. JSX yapısı, bileşenin görünümünü deklaratif olarak tanımlar ve okunabilirliği artırır. Temel örnek, Ek Kaynaklar kullanımıyla basit, fonksiyonel ve yeniden kullanılabilir bir bileşen oluşturmayı gösterir.
Pratik Örnek
jsximport React, { useState, useEffect } from 'react';
function VeriGetir({ apiUrl }) {
const [veri, setVeri] = useState([]);
const [yükleniyor, setYükleniyor] = useState(true);
const [hata, setHata] = useState(null);
useEffect(() => {
async function veriAl() {
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error('Veri alınamadı');
const result = await response.json();
setVeri(result);
} catch (err) {
setHata(err.message);
} finally {
setYükleniyor(false);
}
}
veriAl();
}, [apiUrl]);
if (yükleniyor) return <p>Yükleniyor...</p>;
if (hata) return <p>Hata: {hata}</p>;
return ( <ul>
{veri.map(item => ( <li key={item.id}>{item.name}</li>
))} </ul>
);
}
export default VeriGetir;Advanced React Implementation
jsximport React, { useState, useEffect, memo, useCallback } from 'react';
const ListeElemani = memo(({ item }) => {
console.log('Render ListeElemani:', item.id);
return <li>{item.name}</li>;
});
function OptimizasyonluVeri({ apiUrl }) {
const [veri, setVeri] = useState([]);
const [yükleniyor, setYükleniyor] = useState(true);
const [hata, setHata] = useState(null);
const veriCek = useCallback(async () => {
setYükleniyor(true);
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error('Veri alınamadı');
const result = await response.json();
setVeri(result);
} catch (err) {
setHata(err.message);
} finally {
setYükleniyor(false);
}
}, [apiUrl]);
useEffect(() => {
veriCek();
}, [veriCek]);
if (yükleniyor) return <p>Yükleniyor...</p>;
if (hata) return <p>Hata: {hata}</p>;
return ( <ul>
{veri.map(item => ( <ListeElemani key={item.id} item={item} />
))} </ul>
);
}
export default OptimizasyonluVeri;İleri seviye örnek, React.memo ve useCallback kombinasyonunu kullanarak performans optimizasyonunu gösterir. ListeElemani bileşeni yalnızca props değiştiğinde render edilir. veriCek fonksiyonu memoize edildiği için her renderda yeniden oluşturulmaz. Bu, durumu yönetme, veri akışı kontrolü ve bileşen yaşam döngüsü yönetimi gibi ileri seviye Ek Kaynaklar kullanımını göstermektedir. Ayrıca hata yönetimi ve yükleme durumu kontrolü, profesyonel React uygulamaları için önemli bir pratik sunar.
📊 Kapsamlı Referans
| React Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| useState | Bileşen durumunu yönetir | const [state, setState] = useState(initial) | const [sayi, setSayi] = useState(0); | Yerel durum yönetimi |
| useEffect | Yan etkileri yönetir | useEffect(() => {}, [deps]); | useEffect(() => { veriCek(); }, []); | Veri çekme, abonelikler |
| useContext | Context verisine erişim | const value = useContext(MyContext); | const tema = useContext(ThemeContext); | Prop drilling önler |
| useReducer | Karmaşık durum yönetimi | const [state, dispatch] = useReducer(reducer, initialState); | const [state, dispatch] = useReducer(reducer, {}); | Birden fazla durum |
| React.memo | Gereksiz renderleri önler | export default memo(Component); | export default memo(ListeElemani); | Props değişirse render |
| useCallback | Fonksiyonları memoize eder | const memoizedFn = useCallback(fn, [deps]); | const veriCek = useCallback(() => {...}, [apiUrl]); | Performans optimizasyonu |
| useRef | DOM veya değer erişimi | const ref = useRef(initial); | const inputRef = useRef(null); | Renderlar arası değer korur |
| lazy | Bileşenleri gecikmeli yükler | const Component = React.lazy(() => import('./Component')); | const LazyComp = React.lazy(() => import('./LazyComp')); | İlk yüklemeyi optimize eder |
| Suspense | Asenkron yükleme fallback | <Suspense fallback={<Loader/>}><LazyComp/></Suspense> | <Suspense fallback={<p>Yükleniyor...</p>}><LazyComp/></Suspense> | lazy ile kullanılır |
| PropTypes | Props doğrulama | Component.propTypes = { prop: PropTypes.string } | Sayaç.propTypes = { sayi: PropTypes.number } | Debug ve dokümantasyon |
📊 Complete React Properties Reference
| Property | Values | Default | Description | React Support |
|---|---|---|---|---|
| sayi | number | 0 | Sayaç değeri | Tüm sürümler |
| yükleniyor | boolean | true | Yükleme durumu | Tüm sürümler |
| hata | string | null | Hata mesajı | Tüm sürümler |
| veri | array | [] | Alınan veri | Tüm sürümler |
| onClick | function | null | Click handler | Tüm sürümler |
| children | node | null | Bileşen içeriği | Tüm sürümler |
| style | object | {} | Inline stil | Tüm sürümler |
| apiUrl | string | '' | Veri kaynağı URL | Tüm sürümler |
| fallback | node | null | Lazy loading fallback | 16.6+ |
| key | string | '' | Liste elemanı anahtarı | Tüm sürümler |
Ek Kaynaklar, React uygulamalarında bileşen yönetimi, veri akışı ve performans optimizasyonunu etkin şekilde sağlar. Bu kaynakları kullanmak, kodun yeniden kullanılabilirliğini artırır, gereksiz renderleri önler ve SPA’ların verimli çalışmasını garanti eder. İleri seviye çalışmalarda Redux, Zustand, Suspense, Lazy Loading ve TDD konuları takip edilebilir. Pratik uygulamalar ve sürekli öğrenme, üretim kalitesinde React projeleri geliştirmenizi sağlar.
🧠 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