React Hızlı Başvuru Tablosu
React Hızlı Başvuru Tablosu, modern web uygulamaları geliştiren geliştiriciler için hazırlanmış kapsamlı ve pratik bir referans kaynağıdır. Bu tablo, React bileşenlerini, durum yönetimini (state), veri akışını ve yaşam döngüsü yönetimini hızlı bir şekilde anlamak ve uygulamak isteyen profesyoneller için kritik öneme sahiptir. React Hızlı Başvuru Tablosu, geliştiricilere, projelerinde sıkça karşılaşılan durumları çözmek için rehberlik eder ve en iyi uygulamaları bir araya getirir.
Bu tablo, Single Page Application (SPA) geliştirenler için özellikle faydalıdır; çünkü komponent tabanlı düşünme, performans optimizasyonu ve kodun yeniden kullanılabilirliğini sağlamak için temel bir araçtır. Kullanıcılar bu tablo sayesinde prop drilling gibi yaygın hatalardan kaçınmayı, gereksiz render’ları önlemeyi ve state mutasyonlarını yönetmeyi öğrenir. Ayrıca, tablo sayesinde React’in useState, useEffect, useReducer gibi hook’ları ve Context API gibi veri paylaşım yöntemleri hakkında pratik bilgiler edinirler.
React Hızlı Başvuru Tablosu, hem referans hem de eğitim kaynağı olarak işlev görür. Geliştiriciler, tabloyu kullanarak component mantığını, durum yönetimini ve yaşam döngüsü süreçlerini daha hızlı kavrayabilir, uygulamalarını optimize edebilir ve güvenli React kodu yazabilirler. Bu kaynak, React projelerinde verimliliği artırmak ve profesyonel standartlarda geliştirme yapmak isteyen herkes için vazgeçilmezdir.
Temel Örnek
jsximport React, { useState } from 'react';
function Sayaç() {
const [count, setCount] = useState(0);
const artır = () => setCount(prev => prev + 1);
const azalt = () => setCount(prev => prev - 1);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}> <h2>Basit Sayaç</h2> <p>Mevcut Değer: {count}</p> <button onClick={artır}>Artır</button> <button onClick={azalt}>Azalt</button> </div>
);
}
export default Sayaç;Yukarıdaki örnek, React’in temel bileşen mantığını ve state yönetimini göstermektedir. useState hook’u, komponentin yerel durumunu güvenli bir şekilde yönetir ve direkt mutasyonları önler. Artır ve azalt fonksiyonları, önceki state değerine dayalı olarak güncellemeler yapar, böylece doğru ve optimize edilmiş render sağlanır.
Bu yapı, UI ve mantığın ayrılmasını sağlar, bileşenin yeniden kullanılabilirliğini ve test edilebilirliğini artırır. React, state değiştiğinde DOM’u otomatik olarak günceller; bu da manuel DOM manipülasyonuna gerek kalmadan güvenilir ve performanslı bir yapı sunar. Bu örnek, daha karmaşık uygulamalarda bileşenlerin nasıl yapılandırılacağını anlamak için temel bir referans niteliğindedir.
Pratik Örnek
jsximport React, { useState, useEffect } from 'react';
function KullanıcıProfili({ userId }) {
const [kullanıcı, setKullanıcı] = useState(null);
const [yükleniyor, setYükleniyor] = useState(true);
useEffect(() => {
async function fetchKullanıcı() {
setYükleniyor(true);
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
const data = await response.json();
setKullanıcı(data);
} catch (error) {
console.error('Kullanıcı yüklenirken hata oluştu:', error);
} finally {
setYükleniyor(false);
}
}
fetchKullanıcı();
}, [userId]);
if (yükleniyor) return <p>Yükleniyor...</p>;
if (!kullanıcı) return <p>Kullanıcı bulunamadı</p>;
return ( <div> <h2>Kullanıcı Profili</h2> <p>Ad: {kullanıcı.name}</p> <p>Email: {kullanıcı.email}</p> </div>
);
}
export default KullanıcıProfili;Advanced React Implementation
jsximport React, { useState, useEffect, useCallback } from 'react';
function TodoUygulaması() {
const [todos, setTodos] = useState([]);
const [görev, setGörev] = useState('');
const ekle = useCallback(() => {
if (görev.trim() === '') return;
setTodos(prev => [...prev, { id: Date.now(), text: görev }]);
setGörev('');
}, [görev]);
const sil = useCallback((id) => {
setTodos(prev => prev.filter(todo => todo.id !== id));
}, []);
useEffect(() => {
console.log('Todos güncellendi:', todos);
}, [todos]);
return ( <div> <h2>Todo Uygulaması</h2>
<input
type="text"
value={görev}
onChange={(e) => setGörev(e.target.value)}
placeholder="Yeni görev ekle"
/> <button onClick={ekle}>Ekle</button> <ul>
{todos.map(todo => ( <li key={todo.id}>
{todo.text} <button onClick={() => sil(todo.id)}>Sil</button> </li>
))} </ul> </div>
);
}
export default TodoUygulaması;React’te en iyi uygulamalar arasında, modüler ve yeniden kullanılabilir bileşenler oluşturmak, state’i güvenli bir şekilde yönetmek ve tek yönlü veri akışını korumak yer alır. Yaygın hatalar arasında prop drilling, doğrudan state mutasyonları ve gereksiz render’lar bulunur.
Debugging için React DevTools kullanımı önerilir; bileşen hiyerarşisini, state ve performansı incelemeye yardımcı olur. performans optimizasyonu için React.memo, useMemo ve useCallback kullanılabilir. Güvenlik açısından, render öncesi veri doğrulama ve sanitize işlemleri uygulanmalıdır.
📊 Kapsamlı Referans
| React Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| Component | UI’nin temel bloğu | function MyComponent() {} | function MyComponent() { return <div>Merhaba</div>; } | Tüm uygulamalarda temel |
| useState | Yerel state | const [state, setState] = useState(initial); | const [count, setCount] = useState(0); | Prop drilling önler |
| useEffect | Yan etkiler | useEffect(() => {}, [deps]); | useEffect(() => { console.log(count); }, [count]); | Lifecycle kontrolü |
| useReducer | Karmaşık state | const [state, dispatch] = useReducer(reducer, initial); | const [state, dispatch] = useReducer(reducer, {}); | useState alternatifi |
| props | Veri iletimi | <Component propName={value} /> | <Selam name="Ali" /> | Salt okunur |
| context | Global veri | React.createContext() | const ThemeContext = React.createContext(); | Prop drilling önler |
| React.memo | Render optimizasyonu | export default React.memo(Component); | export default React.memo(MyComponent); | Gereksiz render’ı engeller |
| useCallback | Fonksiyon memoizasyonu | const memoFn = useCallback(fn, [deps]); | const add = useCallback(() => {}, []); | Fonksiyon yeniden oluşturmayı engeller |
| useMemo | Değer memoizasyonu | const memoValue = useMemo(() => compute(), [deps]); | const total = useMemo(() => calcTotal(), [items]); | Hesaplamaları optimize eder |
| key | Listeler için benzersiz id | <li key={id}>Item</li> | <li key={todo.id}>{todo.text}</li> | Liste render’ları için zorunlu |
| event handling | Etkinlik yönetimi | onClick, onChange | <button onClick={handleClick}>Tıkla</button> | Fonksiyonları ayrı tut |
| refs | DOM erişimi | const ref = useRef(); | const inputRef = useRef(); | Doğrudan erişim |
| lazy | Lazy loading | React.lazy(() => import('./Component')) | const LazyComp = React.lazy(() => import('./Comp')); | Bundle boyutunu azaltır |
| Suspense | Lazy fallback | <Suspense fallback={<Loading />}><LazyComp /></Suspense> | <Suspense fallback={<p>Yükleniyor...</p>}><LazyComp /></Suspense> | Lazy ile birlikte kullanılır |
| forwardRef | Ref iletim | React.forwardRef((props, ref) => {}) | const Input = React.forwardRef((props, ref) => <input ref={ref} />) | Dış ref erişimi sağlar |
| error boundaries | Hata yakalama | class ErrorBoundary extends React.Component {} | class ErrorBoundary extends React.Component { render() { return this.props.children; }} | Bileşen hatalarını yakalar |
📊 Complete React Properties Reference
| Property | Values | Default | Description | React Support |
|---|---|---|---|---|
| useState | any | null | Yerel state | v16.8+ |
| useEffect | function | null | Yan etkiler | v16.8+ |
| useReducer | function | null | Karmaşık state | v16.8+ |
| props | any | {} | Bileşene veri iletimi | v0.14+ |
| context | object | null | Global veri | v16.3+ |
| key | string/number | null | Benzersiz id | v0.14+ |
| ref | object | null | DOM veya bileşene erişim | v16.3+ |
| memo | HOC | null | Render optimizasyonu | v16.6+ |
| lazy | function | null | Lazy loading | v16.6+ |
| Suspense | component | null | Fallback component | v16.6+ |
| forwardRef | function | null | Ref iletimi | v16.3+ |
| ErrorBoundary | class | null | Hata yakalama | v16+ |
Özet ve sonraki adımlar:
React Hızlı Başvuru Tablosu, komponent tabanlı düşünme, state yönetimi, veri akışı ve yaşam döngüsü kontrolü konularında kapsamlı bir referans sunar. Bu tabloyu kullanarak geliştiriciler, performanslı ve sürdürülebilir React uygulamaları geliştirebilir.
Bir sonraki adım olarak, Redux veya Zustand ile global state yönetimi, React Profiler ile performans analizi ve React Router ile SPA yönetimi konularını çalışmak önerilir. Bu tabloyu gerçek projelerde uygulamak, React bilgilerini derinleştirir ve profesyonel uygulamalar geliştirmeyi kolaylaştırır.
🧠 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