React API Referansı
React API Referansı, React ile geliştirme yapan yazılımcılar için kapsamlı bir kaynak olup, bileşenler, state yönetimi, veri akışı ve yaşam döngüsü metodlarını detaylı bir şekilde açıklar. Modern web uygulamaları ve SPA’larda React API Referansı, geliştiricilerin uygulamalarını daha verimli, ölçeklenebilir ve sürdürülebilir şekilde inşa etmelerini sağlar.
Bu referans, React’in temel kavramlarını anlamak ve doğru şekilde uygulamak için kritik öneme sahiptir. useState, useEffect, useReducer gibi hook’lar, state ve yan etkileri yönetmek için kullanılırken, Context API ve React.memo gibi araçlar performansı artırmak ve prop drilling’i önlemek için idealdir. React API Referansı, hem basit hem de karmaşık bileşenlerde en iyi uygulamaları gösterir ve geliştiricilerin performans optimizasyonu ve hata ayıklama stratejilerini öğrenmesine yardımcı olur.
Bu referansı inceleyen kullanıcılar, React bileşenlerini doğru şekilde oluşturmayı, state ve props yönetimini, veri akışını optimize etmeyi ve yaşam döngüsü metodlarını etkin biçimde kullanmayı öğreneceklerdir. Modern SPA’larda karşılaşılan problemleri çözmek ve gerçek dünya senaryolarında React API’yi en etkili biçimde kullanmak için bu referans vazgeçilmez bir rehber niteliğindedir.
Temel Örnek
jsximport React, { useState } from 'react';
function Sayac() {
const [count, setCount] = useState(0);
const arttir = () => setCount(prev => prev + 1);
const azalt = () => setCount(prev => prev - 1);
return ( <div> <h1>Sayaç: {count}</h1> <button onClick={arttir}>Arttır</button> <button onClick={azalt}>Azalt</button> </div>
);
}
export default Sayac;Yukarıdaki Sayac bileşeninde useState hook’u ile count adında bir state tanımlanmıştır. setCount fonksiyonu, önceki state değerine dayanarak güncelleme yapar, böylece doğrudan mutasyon yapılmaz. arttir ve azalt fonksiyonları, butonların onClick olaylarına bağlanarak kullanıcı etkileşimlerini yönetir.
Bu örnek, React’in declarative (bildirimsel) yaklaşımını ve state değişikliklerinde otomatik re-render mekanizmasını göstermektedir. Ayrıca prop drilling’in önlenmesi ve bileşenlerin yeniden kullanılabilir olması gibi iyi uygulama örnekleri sunar. Başlangıç seviyesindeki geliştiriciler için, DOM manipülasyonu yerine React’in state ve props yönetimi arasındaki farkı anlamak açısından faydalıdır.
Pratik Örnek
jsximport React, { useState, useEffect } from 'react';
function GorevListesi() {
const [gorevler, setGorevler] = useState([]);
const [input, setInput] = useState('');
const gorevEkle = () => {
if (input.trim() !== '') {
setGorevler(prev => [...prev, input]);
setInput('');
}
};
useEffect(() => {
console.log('Güncel Görevler:', gorevler);
}, [gorevler]);
return ( <div> <h2>Görev Listesi</h2>
<input
type="text"
value={input}
onChange={e => setInput(e.target.value)}
placeholder="Yeni görev ekle"
/> <button onClick={gorevEkle}>Ekle</button> <ul>
{gorevler.map((gorev, index) => ( <li key={index}>{gorev}</li>
))} </ul> </div>
);
}
export default GorevListesi;Advanced React Implementation
jsximport React, { useState, useEffect, useCallback } from 'react';
function OptimizeGorevListesi() {
const [gorevler, setGorevler] = useState([]);
const [input, setInput] = useState('');
const gorevEkle = useCallback(() => {
if (input.trim() !== '') {
setGorevler(prev => [...prev, input]);
setInput('');
}
}, [input]);
useEffect(() => {
console.log('Optimize edilmiş görev listesi:', gorevler);
}, [gorevler]);
return ( <div> <h2>Optimize Görev Listesi</h2>
<input
type="text"
value={input}
onChange={e => setInput(e.target.value)}
placeholder="Yeni görev ekle"
/> <button onClick={gorevEkle}>Ekle</button> <ul>
{gorevler.map((gorev, index) => ( <li key={index}>{gorev}</li>
))} </ul> </div>
);
}
export default OptimizeGorevListesi;OptimizeGorevListesi örneğinde useCallback hook’u kullanılarak gorevEkle fonksiyonu memoize edilmiştir, bu sayede gereksiz re-render’lar önlenir. useEffect, gorevler state’indeki değişiklikleri izleyerek yan etkilerin yönetilmesini sağlar. İyi uygulamalar arasında bileşenleri modüler ve yeniden kullanılabilir şekilde tasarlamak, hook’ları doğru kullanmak, Context API ile prop drilling’i önlemek ve performans optimizasyonları yapmak bulunur. Yaygın hatalar; state dizilerini doğrudan değiştirmek, gereksiz re-render’lar ve props yönetiminde hatalardır. Hata ayıklama için React DevTools, güvenlik için key kullanımı ve dangerouslySetInnerHTML’in sınırlı kullanımı önerilir.
📊 Kapsamlı Referans
| React Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| useState | Yerel state yönetimi | const [state, setState] = useState(initial) | const [count, setCount] = useState(0); | Basit stateler için |
| useEffect | Yan etkilerin yönetimi | useEffect(() => {}, [dependencies]); | useEffect(() => { console.log(count); }, [count]); | Render sonrası çalışır |
| useContext | Context kullanımı | const value = useContext(Context); | const theme = useContext(ThemeContext); | Prop drilling önler |
| useReducer | Karmaşık state yönetimi | const [state, dispatch] = useReducer(reducer, initial) | const [state, dispatch] = useReducer(todoReducer, []); | Karmaşık mantık için |
| React.memo | Render optimizasyonu | export default React.memo(Component); | export default React.memo(TaskItem); | Props değişirse render |
| useCallback | Fonksiyon memoizasyonu | const memoFn = useCallback(fn, [dependencies]); | const addTask = useCallback(() => {}, [tasks]); | Çocuklara fonksiyon aktarımı optimizasyonu |
| useRef | Referans oluşturma | const ref = useRef(initial); | const inputRef = useRef(); | DOM veya değiştirilebilir değer |
| useLayoutEffect | Render öncesi efekt | useLayoutEffect(() => {}, [dependencies]); | useLayoutEffect(() => {}, []); | DOM ile senkron |
| createContext | Context oluşturma | const Context = createContext(defaultValue); | const ThemeContext = createContext('light'); | Global state için |
| forwardRef | Ref geçirme | const Component = forwardRef((props, ref) => {}); | const Input = forwardRef((props, ref) => <input ref={ref} />); | Çocuk ref erişimi |
📊 Complete React Properties Reference
| Property | Values | Default | Description | React Support |
|---|---|---|---|---|
| className | string | '' | Component CSS sınıfları | Tüm sürümler |
| key | string | null | Liste öğeleri için benzersiz id | Tüm sürümler |
| ref | object | null | DOM veya component erişimi | 16.3+ |
| children | node | null | Component içeriği | Tüm sürümler |
| style | object | {} | Inline stil | Tüm sürümler |
| dangerouslySetInnerHTML | object | null | HTML ekleme | Tüm sürümler |
| defaultValue | string | '' | Input başlangıç değeri | Tüm sürümler |
| defaultChecked | boolean | false | Checkbox başlangıç durumu | Tüm sürümler |
| onClick | function | null | Click event | Tüm sürümler |
| onChange | function | null | Change event | Tüm sürümler |
React API Referansı’nı tamamlayarak geliştiriciler, state yönetimi, veri akışı ve bileşen yaşam döngüsü konularında derinlemesine bilgi sahibi olurlar. Hooks, Context API ve performans optimizasyonları hakkında bilgiler, SPA geliştirme süreçlerinde önemli avantajlar sağlar. Bir sonraki adım olarak custom hook’lar, Redux/Zustand gibi state yönetim kütüphaneleri ve ileri seviye performans teknikleri incelenebilir. React dokümantasyonu ve topluluk kaynakları ile sürekli öğrenme, gerçek dünya projelerinde verimli uygulamalar geliştirmek için gereklidir.
🧠 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