React Rehberi: Modern Web ve API Geliştirme İçin Kapsamlı Kılavuz
Yazar: Burak Balkı | Kategori: API Development | Okuma Süresi: 10 dk
React.js ile modern web uygulaması geliştirme sürecini A'dan Z'ye ele alan kapsamlı teknik rehber. State yönetimi, Hooks, API entegrasyonu ve performans opti...
## React Nedir ve Neden Kullanılır?
**React**, kullanıcı arayüzleri (UI) oluşturmak için kullanılan, Meta (eski adıyla Facebook) tarafından geliştirilen ve açık kaynaklı bir JavaScript kütüphanesidir. Modern web geliştirme ekosisteminde React, deklaratif yapısı ve bileşen tabanlı (component-based) mimarisi ile öne çıkar.
React'in temel amacı, karmaşık kullanıcı arayüzlerini yönetilebilir, tekrar kullanılabilir ve performanslı parçalara bölmektir. Geleneksel DOM manipülasyonunun aksine, **Virtual DOM** (Sanal DOM) teknolojisini kullanarak sadece değişen kısımları günceller, bu da yüksek performans sağlar.
### React'in Temel Avantajları
- **Bileşen Tabanlı Yapı:** Kodun tekrar kullanılabilirliğini artırır.
- **Deklaratif UI:** Kodun nasıl çalışacağından ziyade, arayüzün hangi durumda nasıl görünmesi gerektiğini tanımlarsınız.
- **Geniş Ekosistem:** Kütüphane desteği, topluluk ve araç çeşitliliği çok fazladır.
- **Tek Yönlü Veri Akışı:** Veri yönetimini daha öngörülebilir hale getirir.
## React Temel Kavramları: Component, JSX ve Props
React öğrenirken anlaşılması gereken üç temel direk vardır: Bileşenler, JSX ve Props.
### JSX (JavaScript XML)
JSX, JavaScript içerisinde HTML benzeri bir yapı yazmanıza olanak tanıyan bir sözdizimi uzantısıdır. React, JSX kullanımını zorunlu kılmaz ancak okunabilirlik açısından standarttır.
```javascript
const Welcome = () => {
return (
);
};
```
### Props (Properties)
Props, bir bileşenden diğerine (genellikle üstten alta) veri aktarmak için kullanılan salt okunur (read-only) nesnelerdir.
```javascript
const UserProfile = (props) => {
return (
);
};
// Kullanım
);
}
```
## Form Yönetimi ve Validasyon Stratejileri
React'te formlar "controlled components" (kontrollü bileşenler) olarak yönetilir. Her inputun değeri bir state'e bağlıdır.
```javascript
const LoginForm = () => {
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log("Gönderilen email:", email);
};
return (
);
};
```
## React Performans Optimizasyonu Teknikleri
Uygulama büyüdükçe performans sorunları ortaya çıkabilir. Gereksiz render işlemlerini engellemek için şu araçlar kullanılır:
1. **React.memo:** Bileşenin props'ları değişmediği sürece yeniden render edilmesini engeller.
2. **useMemo:** Hesaplama yoğunluklu işlemlerin sonuçlarını önbelleğe alır.
3. **useCallback:** Fonksiyon referanslarını bellekte tutarak alt bileşenlerin gereksiz tetiklenmesini önler.
```javascript
import { useMemo, useCallback } from 'react';
const ExpensiveComponent = ({ list, onClick }) => {
const sortedList = useMemo(() => {
return list.sort((a, b) => a - b);
}, [list]);
const handleClick = useCallback(() => {
onClick(sortedList);
}, [onClick, sortedList]);
return ;
};
```
## React Best Practices ve Modern Yazım Standartları
Profesyonel bir React geliştiricisi için şu kurallar kritiktir:
- **Küçük Bileşenler:** Her bileşen tek bir iş yapmalıdır (Single Responsibility Principle).
- **Custom Hooks:** Tekrarlayan mantıkları (logic) kendi hook'larınızda toplayın.
- **Prop Types veya TypeScript:** Veri tiplerini mutlaka tanımlayın.
- **Folder Structure:** Özellik bazlı (feature-based) dosya yapısı kullanın.
### Custom Hook Örneği
```javascript
function useWindowSize() {
const [size, setSize] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setSize(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
```
## Sık Yapılan Hatalar ve Çözüm Yolları
1. **Key Kullanmamak:** Liste render ederken `key` prop'u verilmezse React hangi öğenin değiştiğini anlayamaz. Her zaman benzersiz bir `id` kullanın.
2. **State'i Doğrudan Değiştirmek:** `this.state.x = 5` veya `state.x = 5` hatadır. Her zaman `setState` veya hook fonksiyonlarını kullanın.
3. **Sonsuz Döngüler:** `useEffect` içinde bağımlılık dizisini yanlış yönetmek (örneğin güncellenen state'i bağımlılığa eklemek) sonsuz döngüye yol açabilir.
## Sık Sorulan Sorular (SSS)
**1. React bir framework müdür yoksa kütüphane mi?**
React teknik olarak bir kütüphanedir (library). Sadece UI katmanına odaklanır. Ancak Next.js gibi yapılarla birleştiğinde framework ekosistemine dönüşür.
**2. Redux hala gerekli mi?**
Küçük ve orta ölçekli projelerde React Context API yeterlidir. Ancak çok karmaşık state yönetimi gerektiren devasa projelerde Redux veya Zustand tercih edilebilir.
**3. Virtual DOM neden daha hızlıdır?**
Gerçek DOM üzerindeki her değişiklik tüm ağacın yeniden hesaplanmasına neden olabilir. Virtual DOM, önce bellekte değişiklikleri hesaplar ve sadece farkı (diffing) gerçek DOM'a uygular.
**4. Class Component mi yoksa Functional Component mi?**
Modern React dünyasında Functional Component'ler ve Hook'lar standarttır. Class bileşenleri artık yeni projelerde önerilmemektedir.
**5. React ile SEO uyumlu siteler yapılabilir mi?**
Evet. Standart React (Client-Side Rendering) SEO için zorlayıcı olabilir ancak Next.js kullanarak Server-Side Rendering (SSR) ile mükemmel SEO sonuçları elde edilir.
## Özet ve Sonuç
React, modern web geliştirme dünyasının en güçlü araçlarından biridir. Bu rehberde temel kavramlardan, API entegrasyonuna, performans optimizasyonundan best practice'lere kadar geniş bir yelpazeyi ele aldık. React öğrenmek, sadece bir kütüphane öğrenmek değil, aynı zamanda modern bir mühendislik yaklaşımı kazanmaktır. Projelerinizde temiz kod prensiplerine sadık kalarak, sürdürülebilir ve yüksek performanslı uygulamalar geliştirebilirsiniz.
Merhaba Dünya!
React ile modern web geliştirme süreci başlıyor.
Kullanıcı: {props.name}
Rol: {props.role}
Güncel Sayaç: {count}
Veri Yükleniyor...
;
}
```
## React ile API İstekleri ve Veri Yönetimi
API geliştirme sürecinde React, frontend katmanı olarak veriyi tüketir. `fetch` API veya `axios` kütüphanesi yaygın olarak kullanılır.
### Axios ile Veri Çekme Örneği
```javascript
import axios from 'axios';
import { useState, useEffect } from 'react';
const UserList = () => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await axios.get('https://api.example.com/users');
setUsers(response.data);
} catch (error) {
console.error("Hata oluştu:", error);
} finally {
setLoading(false);
}
};
fetchUsers();
}, []);
if (loading) return Yükleniyor...
; return (-
{users.map(user => (
- {user.name} ))}