React ile Başlangıç: Modern Web Uygulamaları Geliştirmeye Adım Adım Giriş
React, modern web geliştirme dünyasında en popüler ve güçlü JavaScript kütüphanelerinden biridir. Facebook tarafından geliştirilen ve açık kaynak olarak sunulan React, özellikle büyük ve karmaşık kullanıcı arayüzleri (UI) oluşturmak için tasarlanmıştır. Geliştiricilere bildirimsel, bileşen tabanlı bir yaklaşım sunarak, etkileşimli ve dinamik web uygulamaları geliştirmeyi kolaylaştırır. Bu kapsamlı makale, React’e yeni başlayanlar için temel kavramlardan ileri düzey konulara kadar adım adım bir rehber sunmayı amaçlamaktadır. React’in ne olduğunu, neden bu kadar popüler olduğunu, geliştirme ortamınızı nasıl kuracağınızı, temel bileşenleri, durumu (state), özellikleri (props) ve Hook’ları nasıl kullanacağınızı, ayrıca pratik geliştirme ipuçlarını ve ekosistemdeki bir sonraki adımları detaylı bir şekilde inceleyeceğiz.
React öğrenmek, günümüz web geliştirme pazarında kendinizi konumlandırmak için önemli bir yetkinliktir. İster kariyerine yeni başlayan bir geliştirici olun ister mevcut becerilerinizi genişletmek isteyen deneyimli bir profesyonel, React’in sunduğu olanaklar modern ve performanslı uygulamalar yaratmanız için size kapılar açacaktır. Bu rehberin sonunda, kendi React uygulamanızı geliştirmeye başlayacak ve bu heyecan verici kütüphanenin temel prensiplerini kavramış olacaksınız.
React Nedir ve Neden Önemlidir?
React, kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir. Bir “framework” değil, daha çok bir “kütüphane” olarak adlandırılır çünkü genellikle sadece UI katmanına odaklanır ve routing, state yönetimi gibi diğer işlevler için ek kütüphanelerle birlikte kullanılır. Ancak, geniş ekosistemi ve yaygın kullanımı nedeniyle çoğu zaman bir framework gibi algılanır.
React’in temel özellikleri ve avantajları şunlardır:
Bildirimsel (Declarative) Yaklaşım
React, kullanıcı arayüzlerini bildirimsel bir şekilde tanımlamanıza olanak tanır. Bu, uygulamanızın belirli bir anda nasıl görünmesi gerektiğini belirtmeniz anlamına gelir, React ise DOM’u bu duruma getirmek için gerekli tüm güncellemeleri otomatik olarak halleder. Geleneksel imperatif yaklaşımlarda olduğu gibi adım adım DOM manipülasyonu yapmak yerine, uygulamanızın durumunu tanımlarsınız ve React bu durumu UI’a yansıtır. Bu, kodunuzu daha öngörülebilir ve hata ayıklamayı daha kolay hale getirir.
Bileşen Tabanlı (Component-Based) Mimari
React’in kalbinde bileşenler (components) bulunur. Her React uygulaması, küçük, bağımsız ve yeniden kullanılabilir bileşenlerden oluşur. Bu bileşenler, kendi mantıklarını ve görünümlerini kapsüller. Örneğin, bir Button bileşeni, bir Navbar bileşeni veya bir ProductCard bileşeni oluşturabilirsiniz. Bu modüler yapı, kodun yeniden kullanılabilirliğini artırır, bakımı kolaylaştırır ve büyük projelerde geliştirme sürecini hızlandırır. Bileşenler bir araya gelerek daha karmaşık UI’lar oluşturur.
Sanal DOM (Virtual DOM)
Performans, modern web uygulamaları için kritik öneme sahiptir. React, bu sorunu Sanal DOM (Virtual DOM) adı verilen bir mekanizma ile çözer. Sanal DOM, gerçek DOM’un hafif bir kopyasıdır ve bellekte tutulur. Bir bileşenin durumu değiştiğinde, React önce Sanal DOM’u günceller. Ardından, güncellenmiş Sanal DOM’u önceki haliyle karşılaştırır ve yalnızca gerçek DOM’da değişen kısımları minimum düzeyde ve en verimli şekilde günceller. Bu “diffing” ve “reconciliation” süreci, doğrudan DOM manipülasyonundan çok daha hızlıdır ve uygulama performansını önemli ölçüde artırır.
Tek Yönlü Veri Akışı
React’te veri akışı genellikle tek yönlüdür (“top-down”). Ebeveyn bileşenler, alt bileşenlere “props” (özellikler) aracılığıyla veri iletir. Bu, verilerin nasıl değiştiğini ve uygulamanızda nerede kullanıldığını takip etmeyi kolaylaştırır, böylece hataları bulmak ve gidermek daha basit hale gelir. Durum güncellemeleri genellikle bir bileşenin kendi içinde veya bir üst bileşen tarafından tetiklenir ve bu güncellemeler alt bileşenlere yayılır.
Geniş Ekosistem ve Topluluk Desteği
React, dünyanın en büyük ve en aktif geliştirici topluluklarından birine sahiptir. Bu, bol miktarda dokümantasyon, öğretici, üçüncü taraf kütüphane ve araç olduğu anlamına gelir. Bir sorunla karşılaştığınızda, büyük olasılıkla çözümü zaten internette bulabilirsiniz. Ayrıca, React Router (routing için), Redux (state yönetimi için), Next.js (sunucu tarafı renderlama için) gibi birçok tamamlayıcı kütüphane ve araç, React’in yeteneklerini genişletir ve geliştiricilere kapsamlı bir çözüm sunar.
Bu nedenlerden dolayı React, Facebook, Instagram, Netflix, Airbnb gibi birçok büyük şirketin tercih ettiği bir teknolojidir ve modern web geliştirme dünyasında vazgeçilmez bir araç haline gelmiştir.
React Geliştirme Ortamını Kurma
React ile çalışmaya başlamadan önce, gerekli araçları bilgisayarınıza kurmanız ve bir geliştirme ortamı oluşturmanız gerekir. Bu süreç, genellikle oldukça basittir.
Önkoşullar
React uygulamaları geliştirmek için birkaç temel araca ihtiyacınız olacak:
* Node.js ve npm/yarn: React uygulamaları JavaScript ile yazılır ve Node.js çalışma zamanı ortamını gerektirir. Node.js’i yüklediğinizde, npm (Node Package Manager) de otomatik olarak kurulur. Alternatif olarak, yarn paket yöneticisini de kullanabilirsiniz, ki bu bazen daha hızlı olabilir. Node.js’i resmi web sitesinden (nodejs.org) indirip kurabilirsiniz. Kurulumdan sonra terminalinizde node -v ve npm -v (veya yarn -v) komutlarını çalıştırarak doğru şekilde kurulup kurulmadığını kontrol edebilirsiniz.
* Metin Düzenleyici/IDE: Kod yazmak için bir metin düzenleyiciye ihtiyacınız olacak. Visual Studio Code (VS Code), React geliştiricileri arasında en popüler seçeneklerden biridir. Geniş eklenti desteği, akıllı kod tamamlama, hata ayıklama özellikleri ve entegre terminali ile harika bir geliştirme deneyimi sunar. Diğer popüler seçenekler arasında WebStorm ve Sublime Text bulunur.
* Modern Web Tarayıcısı: Uygulamanızı çalıştırmak ve hata ayıklamak için Chrome, Firefox veya Edge gibi modern bir web tarayıcısına ihtiyacınız olacak. Bu tarayıcıların geliştirici araçları (Developer Tools) React uygulamalarını incelemek ve hata ayıklamak için vazgeçilmezdir.
Proje Oluşturma Yöntemleri
React projesi oluşturmanın birkaç yolu vardır. Yeni başlayanlar için en uygun olan create-react-app veya Vite‘dir.
Create React App (CRA)
create-react-app, React ekibi tarafından desteklenen ve tek bir komutla tam yapılandırılmış bir React geliştirme ortamı oluşturan resmi bir araçtır. Webpack, Babel gibi araçları sizin için yapılandırır, böylece hemen kod yazmaya başlayabilirsiniz.
Kurulum ve İlk Çalıştırma:
Terminalinizi açın ve aşağıdaki komutu çalıştırın:
npx create-react-app my-react-app
cd my-react-app
npm start* npx create-react-app my-react-app: Bu komut, my-react-app adında yeni bir React projesi oluşturur. npx, npm ile birlikte gelen bir araçtır ve paketleri yerel olarak yüklemeden çalıştırmanıza olanak tanır.
* cd my-react-app: Proje dizinine geçiş yapar.
* npm start: Geliştirme sunucusunu başlatır. Bu komutu çalıştırdığınızda, uygulamanız genellikle http://localhost:3000 adresinde otomatik olarak tarayıcınızda açılacaktır. Kodunuzda yaptığınız değişiklikler kaydedildiğinde, tarayıcı sayfa yenilemeye gerek kalmadan otomatik olarak güncellenecektir (hot reloading).
Proje Yapısı:
create-react-app ile oluşturulan tipik bir React projesi şu dizin yapısına sahiptir:
* node_modules/: Projenizin bağımlılıklarını içeren klasör. Bu klasörü manuel olarak değiştirmemelisiniz.
* public/: Statik dosyaları (HTML, resimler, manifest dosyası vb.) içerir. index.html ana HTML dosyanızdır ve React uygulamanız buraya enjekte edilir.
* src/: React uygulamanızın ana kodunu içeren klasör. Tüm bileşenleriniz, stil dosyalarınız ve JavaScript mantığınız burada bulunur.
* index.js: Uygulamanızın başlangıç noktasıdır. React uygulamanızı DOM’a bağlar.
* App.js: Ana uygulama bileşeninizdir. Uygulamanızın iskeletini oluşturur.
* App.css, index.css: Stil dosyaları.
* logo.svg: Varsayılan logo.
* package.json: Projenizin meta verilerini (adı, sürümü), bağımlılıklarını ve komut dosyalarını (scripts) tanımlar.
* README.md: Projeniz hakkında bilgi içeren dosya.
Vite (Alternatif)
Son zamanlarda create-react-app‘e hızlı bir alternatif olarak Vite (Fransızca “hızlı” anlamına gelir) popülerlik kazanmıştır. Geliştirme sunucusunu ve üretim derlemelerini çok daha hızlı başlatmasıyla bilinir. Büyük projelerde veya daha modern bir derleme deneyimi arayanlar için harika bir seçenektir.
Kurulum ve İlk Çalıştırma:
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run devVite de benzer bir proje yapısı sunar ancak daha minimalisttir ve index.html dosyasını public yerine doğrudan proje kökünde tutar.
Yeni başlayanlar için create-react-app genellikle yeterlidir, ancak hız ve modern araçlara aşinalık kazanmak isterseniz Vite’yi de deneyebilirsiniz.
React’in Temel Kavramları
React’in gücünü anlamak için, temel yapı taşlarını ve çalışma prensiplerini iyi kavramak önemlidir.
Bileşenler (Components)
Daha önce de belirtildiği gibi, bileşenler React uygulamalarının temel yapı taşlarıdır. Bir bileşen, kendi başına bir UI parçasını temsil eden ve kendi mantığına, durumuna (state) ve görünümüne sahip olan bağımsız, yeniden kullanılabilir bir kod bloğudur. React’te iki tür bileşen vardır:
* Fonksiyonel Bileşenler (Functional Components): Modern React’in odak noktasıdır ve genellikle tercih edilirler. Bunlar, JavaScript fonksiyonlarıdır ve React Hook’ları sayesinde durum (state) ve yaşam döngüsü özellikleri gibi yeteneklere sahip olabilirler. Bir fonksiyonel bileşen, kendisine gelen props‘ları alır ve bir JSX (JavaScript XML) döndürür.
import React from 'react';
function Selamlama(props) {
return ;
}
// Kullanımı
// * Sınıf Bileşenleri (Class Components): Daha eski React versiyonlarında yaygın olarak kullanılırlardı. React.Component sınıfından miras alırlar ve render() metodu içinde JSX döndürürler. Durum (state) ve yaşam döngüsü metotlarına sahiptirler. React Hook’larının ortaya çıkmasıyla birlikte, sınıf bileşenleri yeni projelerde daha az tercih edilmektedir.
import React, { Component } from 'react';
class SelamlamaSinif extends Component {
render() {
return ;
}
}
// Kullanımı
// Bu makalede, modern React geliştirme pratiğine uygun olarak çoğunlukla fonksiyonel bileşenlere odaklanacağız.
JSX Nedir?
JSX (JavaScript XML), React ile kullanıcı arayüzlerini tanımlamak için kullanılan bir sözdizimi uzantısıdır. JavaScript kodu içinde HTML benzeri etiketler yazmanıza olanak tanır. JSX, tarayıcılar tarafından doğrudan anlaşılamaz; Babel gibi bir derleyici tarafından standart JavaScript’e dönüştürülür.
Neden JSX?
* Okunabilirlik: HTML’e benzer yapısı sayesinde, UI’ın nasıl görüneceğini anlamak daha kolaydır.
* Tanıdık Yapı: Web geliştiricileri için HTML’e benzerliği sayesinde öğrenmesi kolaydır.
* Güçlü JavaScript Entegrasyonu: JavaScript ifadelerini {} süslü parantezler içinde doğrudan JSX içine gömebilirsiniz. Bu, dinamik içerik oluşturmayı ve koşullu renderlama gibi işlemleri kolaylaştırır.
JSX Kuralları:
* Tek Kök Element: Her JSX ifadesi, tek bir kök element döndürmelidir. Birden fazla element döndürmeniz gerekiyorsa, bunları bir div veya React’in Fragment‘ı (<>...>) içine almalısınız.
// Hatalı
// return (
//
// Paragraf
// );
// Doğru
return (
Paragraf
);
// Veya Fragment ile
return (
<>
Paragraf
>
);* camelCase Özellikler: HTML’deki class veya for gibi bazı özellikler JavaScript’te özel anlamlara sahip olduğu için JSX’te className ve htmlFor gibi camelCase isimlerle kullanılır. Stil özelliklerini de JavaScript nesneleri olarak camelCase ile yazarsınız:
.
* JavaScript İfadeleri: JSX içinde JavaScript ifadelerini kullanmak için süslü parantezler ({}) kullanın.
const ad = "Alice";
const sayi = 5;
function topla(a, b) {
return a + b;
}
return (
Merhaba, {ad}!
5 + 3 = {topla(5, 3)}
Sayı {sayi % 2 === 0 ? "çift" : "tek"}.
);Props (Properties)
Props, React bileşenleri arasında veri aktarımı yapmak için kullanılan mekanizmadır. “Properties” kelimesinin kısaltmasıdır ve ebeveyn bileşenlerden alt bileşenlere veri iletmek için kullanılır. Props’lar, bir bileşene dışarıdan gelen ve bileşen tarafından değiştirilemeyen (immutable) verilerdir. Bu, React’in tek yönlü veri akışı prensibinin temelini oluşturur.
import React from 'react';
function KullaniciKarti(props) {
return (
{props.isim}
Yaş: {props.yas}
Meslek: {props.meslek}
);
}
function Uygulama() {
return (
);
}
export default Uygulama;Yukarıdaki örnekte, Uygulama bileşeni KullaniciKarti bileşenine isim, yas ve meslek prop’larını iletiyor. KullaniciKarti bileşeni bu prop’ları kendi içinde kullanarak içeriğini oluşturuyor.
Destructuring ile Props Kullanımı:
Fonksiyonel bileşenlerde props’ları doğrudan fonksiyon parametresi olarak destructuring (yapı bozma) ile almak yaygın ve daha okunaklı bir yöntemdir:
function KullaniciKarti({ isim, yas, meslek }) { // props yerine doğrudan isim, yas, meslek
return (
{isim}
Yaş: {yas}
Meslek: {meslek}
);
}children prop’u:
Bazı durumlarda, bir bileşenin açılış ve kapanış etiketleri arasına içerik yerleştirmek isteyebilirsiniz. Bu içerik, bileşenin children prop’u olarak otomatik olarak iletilir.
function Kutu({ children }) {
return (
{children}
);
}
function Uygulama() {
return (
Bu kutunun içindeki bir paragraf.
);
}State (Durum)
State (durum), bir bileşenin zamanla değişebilen ve bileşenin kendi içinde yönettiği verilerdir. Kullanıcı etkileşimleri (tıklamalar, form girişleri), ağ istekleri veya zamanlayıcılar gibi olaylar sonucunda durum değişebilir. Durum değiştiğinde, React bileşeni yeniden render eder ve UI’ı günceller.
Fonksiyonel bileşenlerde durumu yönetmek için useState Hook’u kullanılır.
useState Hook’u:
useState Hook’u, fonksiyonel bileşenlere durum eklemenin yoludur. İki elemanlı bir dizi döndürür: mevcut durum değeri ve bu durumu güncelleyen bir fonksiyon.
import React, { useState } from 'react';
function Sayac() {
// sayac mevcut durum değeri, setSayac durumu güncelleyen fonksiyon
// Başlangıç değeri 0
const [sayac, setSayac] = useState(0);
const artir = () => {
setSayac(sayac + 1); // Durumu güncelle
};
const azalt = () => {
setSayac(sayac - 1);
};
return (
Mevcut Sayı: {sayac}
);
}
export default Sayac;Yukarıdaki örnekte, Sayac bileşeni kendi sayac durumunu yönetir. artir veya azalt butonlarına tıklandığında, setSayac fonksiyonu çağrılarak durum güncellenir. React, durum değiştiğinde Sayac bileşenini otomatik olarak yeniden render eder ve ekranda güncel sayıyı gösterir.
Durum Güncelleme Kuralları:
* Asenkron Güncellemeler: setSayac gibi durum güncelleme fonksiyonları asenkron çalışabilir. Yani, setSayac‘ı çağırdıktan hemen sonra sayac değerinin güncellenmiş halini görmeyebilirsiniz. Eğer bir sonraki durumu önceki duruma dayanarak hesaplıyorsanız, bir fonksiyon geçirmek en güvenli yoldur: setSayac(prevSayac => prevSayac + 1);
* Doğrudan Değiştirmeyin (Immutable State): Durum nesnelerini veya dizilerini doğrudan değiştirmek yerine, her zaman yeni bir nesne veya dizi oluşturarak güncelleme yapmalısınız.
// Hatalı: Doğrudan değiştirme
// const [kullanici, setKullanici] = useState({ ad: 'Ali', yas: 25 });
// kullanici.yas = 26;
// setKullanici(kullanici);
// Doğru: Yeni bir nesne oluşturma (spread operatörü ile)
const [kullanici, setKullanici] = useState({ ad: 'Ali', yas: 25 });
setKullanici({ ...kullanici, yas: 26 });Olay Yönetimi (Event Handling)
React, HTML’deki olayları (tıklamalar, form gönderimleri, klavye girişleri vb.) yönetmek için sentetik olaylar (Synthetic Events) sistemi kullanır. Bu sistem, tarayıcılar arası uyumluluk sağlar ve olayları daha tutarlı bir şekilde ele almanıza olanak tanır.
import React, { useState } from 'react';
function FormOrnegi() {
const [deger, setDeger] = useState('');
const handleChange = (event) => {
setDeger(event.target.value); // Input değerini state'e kaydet
};
const handleSubmit = (event) => {
event.preventDefault(); // Sayfanın yeniden yüklenmesini engeller
alert('Girilen değer: ' + deger);
setDeger(''); // Formu sıfırla
};
return (
);
}
export default FormOrnegi;Yukarıdaki örnekte:
* onChange olayı, input alanının değeri her değiştiğinde handleChange fonksiyonunu tetikler. event.target.value ile input’un güncel değerine erişilir ve setDeger ile durum güncellenir.
* onSubmit olayı, form gönderildiğinde handleSubmit fonksiyonunu tetikler. event.preventDefault() çağrısı, tarayıcının varsayılan form gönderme davranışını (sayfayı yeniden yükleme) engeller.
React Hook’ları ile Daha Güçlü Bileşenler
React Hook’ları, React 16.8 ile tanıtılan ve fonksiyonel bileşenlere durum ve diğer React özelliklerini (yaşam döngüsü metotları gibi) “bağlamanın” bir yolunu sunan fonksiyonlardır. Hook’lar sayesinde, sınıf bileşenlerine ihtiyaç duymadan fonksiyonel bileşenlerle tüm özellikleri kullanabiliriz.
useState (Tekrar Vurgu)
Daha önce de bahsettiğimiz gibi, useState Hook’u fonksiyonel bileşenlere yerel durum eklemek için kullanılır.
import React, { useState } from 'react';
function ToggleButton() {
const [acikMi, setAcikMi] = useState(false); // Başlangıçta kapalı
const handleClick = () => {
setAcikMi(!acikMi); // Durumu tersine çevir
};
return (
);
}useEffect
useEffect Hook’u, fonksiyonel bileşenlerde yan etkileri (side effects) yönetmek için kullanılır. Yan etkiler, bir bileşenin render edilmesinin ardından gerçekleşen ve React’in kontrolü dışındaki işlemlerdir. Örnekler arasında:
* Veri çekme (API istekleri)
* DOM’u manuel olarak manipüle etme
* Zamanlayıcılar ayarlama (setTimeout, setInterval)
* Olay dinleyicileri ekleme/kaldırma
* Subscription (abonelik) oluşturma/iptal etme
useEffect Hook’u, bileşenin render edilmesinin ardından çalışır. Bağımlılık dizisi (dependency array) ile ne zaman çalışacağını kontrol edebilirsiniz.
import React, { useState, useEffect } from 'react';
function VeriCekme() {
const [veri, setVeri] = useState(null);
const [yukleniyor, setYukleniyor] = useState(true);
const [hata, setHata] = useState(null);
// useEffect, bileşen render edildikten sonra çalışır
useEffect(() => {
// Yan etki: Veri çekme işlemi
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error(HTTP hata! Durum: ${response.status});
}
const result = await response.json();
setVeri(result);
} catch (error) {
setHata(error);
} finally {
setYukleniyor(false);
}
};
fetchData();
// Temizleme fonksiyonu (cleanup function)
// Bileşen DOM'dan kaldırıldığında veya bağımlılıklar değiştiğinde çalışır
return () => {
// Örneğin, bir aboneliği iptal etme
console.log('Bileşen temizleniyor veya veri çekme işlemi iptal ediliyor.');
};
}, []); // Boş bağımlılık dizisi: Sadece bileşen mount edildiğinde bir kez çalışır
if (yukleniyor) return Veriler yükleniyor...
;
if (hata) return Hata: {hata.message}
;
return (
API'den Gelen Veri:
Başlık: {veri.title}
İçerik: {veri.body}
);
}
export default VeriCekme;Bağımlılık Dizisi (Dependency Array):
useEffect‘in ikinci argümanı olan bağımlılık dizisi, Hook’un ne zaman yeniden çalışacağını belirler:
* Boş dizi []: Efekt sadece bileşen ilk kez render edildiğinde (mount edildiğinde) bir kez çalışır ve bir daha çalışmaz. Genellikle veri çekme işlemleri için kullanılır.
* Dizi boş değil [prop1, state2]: Efekt, dizideki herhangi bir değer değiştiğinde yeniden çalışır.
* Dizi yok (argüman atlanırsa): Efekt, bileşenin her render edilmesinden sonra çalışır. Bu genellikle istenmeyen bir durumdur ve performans sorunlarına yol açabilir.
Temizleme Fonksiyonu (Cleanup Function):
useEffect Hook’u, bir fonksiyon döndürebilir. Bu döndürülen fonksiyon, bileşen DOM’dan kaldırılmadan (unmount edilmeden) önce veya bağımlılıklar değişmeden önce çalıştırılır. Bu, bellek sızıntılarını önlemek için olay dinleyicilerini kaldırmak, zamanlayıcıları temizlemek veya abonelikleri iptal etmek gibi temizleme işlemleri için idealdir.
Diğer Sık Kullanılan Hook’lar
React, useState ve useEffect dışında birçok başka yerleşik Hook sunar:
* useContext: React Context API’ını kullanarak bileşen ağacında derinlere veri geçirmeyi kolaylaştırır. Prop drilling (prop’ları birden çok alt bileşene aktarma) sorununu çözer.
* useReducer: Daha karmaşık durum mantığına sahip bileşenler için useState‘e bir alternatiftir. Redux‘taki reducer kavramına benzer şekilde çalışır.
* useRef: DOM elementlerine doğrudan erişmek veya bileşen render’ları arasında kalıcı bir değeri saklamak için kullanılır.
* useCallback, useMemo: Performans optimizasyonları için kullanılır. Fonksiyonların veya pahalı hesaplamaların gereksiz yere yeniden oluşturulmasını veya çalıştırılmasını engeller.
* Custom Hooks: Kendi özel Hook’larınızı oluşturarak tekrar eden mantığı bileşenler arasında paylaşabilirsiniz. use ile başlayan herhangi bir JavaScript fonksiyonu bir Hook olarak kabul edilir.
Hook’lar, fonksiyonel bileşenleri daha güçlü hale getirerek kodun daha düzenli, okunabilir ve test edilebilir olmasını sağlar.
Uygulama Geliştirme Pratikleri ve İpuçları
React ile uygulama geliştirirken, kodunuzu daha sürdürülebilir, performanslı ve okunabilir hale getirmek için bazı en iyi pratikleri ve ipuçlarını takip etmek önemlidir.
Bileşen Hiyerarşisi ve Yapısı
Bileşenlerinizi iyi organize etmek, büyük projelerde yönetilebilirliği artırır.
* Akıllı (Container) ve Sunum (Presentational) Bileşenler: Bu ayrım, bileşenleri sorumluluklarına göre ayırmanıza yardımcı olur.
* Akıllı/Kapsayıcı Bileşenler: Veri çekme, durum yönetimi, mantık yürütme gibi işleri yaparlar. Genellikle daha az görseldirler ve alt bileşenlere prop’lar aracılığıyla veri ve fonksiyonlar iletirler. Örnek: UserListContainer (kullanıcı verilerini çeker ve UserList‘e iletir).
* Sunum/Görsel Bileşenler: Sadece prop’lardan gelen verileri alıp UI’ı render ederler. Kendi durumları veya karmaşık mantıkları yoktur. Yeniden kullanılabilirlikleri yüksektir. Örnek: Button, UserCard.
* Klasör Yapısı Önerileri: Projenizin src klasörünü organize etmek için yaygın yaklaşımlar vardır:
* components/: Tüm yeniden kullanılabilir UI bileşenlerinizi içerir (örn. Button.js, Modal.js).
* pages/ veya views/: Uygulamanızın farklı sayfalarını veya ana görünümlerini temsil eden bileşenleri içerir (örn. HomePage.js, AboutPage.js). Bu bileşenler genellikle akıllı bileşenlerdir.
* utils/: Yardımcı fonksiyonlar, sabitler, API servisleri gibi genel amaçlı kodları içerir.
* hooks/: Özel Hook’larınızı içerir.
* assets/: Resimler, fontlar gibi statik dosyaları içerir.
Veri Akışı Yönetimi
React’te veri akışı genellikle tek yönlüdür (ebeveynden çocuğa). Ancak, derin iç içe geçmiş bileşenlerde prop’ları birçok katmandan geçirmek (prop drilling) bir sorun haline gelebilir.
* Prop Drilling: Bir verinin, onu kullanacak olan alt bileşene ulaşana kadar aradaki birçok bileşenden prop olarak geçirilmesi durumudur. Bu, kodu daha az okunabilir ve bakımı zor hale getirebilir.
* Çözümler:
* Context API: React’in yerleşik bir özelliğidir ve bileşen ağacında derinlere veri geçirmek için kullanılır. Belirli bir bağlam (context) oluşturursunuz ve bu bağlamı sağlayan bir Provider bileşeni ile veriyi ağaçta aşağıya doğru iletirsiniz. Alt bileşenler useContext Hook’u ile bu verilere erişebilir. Özellikle tema ayarları, kullanıcı kimlik doğrulama bilgileri gibi global durumlar için idealdir.
* Durum Yönetimi Kütüphaneleri: Redux, Zustand, Jotai gibi kütüphaneler, uygulamanızın global durumunu merkezi bir yerde yönetmenizi sağlar. Büyük ve karmaşık uygulamalarda prop drilling sorununu tamamen ortadan kaldırabilirler.
Koşullu Renderlama (Conditional Rendering)
React’te, belirli bir koşula bağlı olarak farklı elementleri veya bileşenleri render edebilirsiniz.
* if/else Deyimleri: JSX dışında normal JavaScript if/else kullanarak koşullu renderlama yapabilirsiniz.
function KullaniciGirisDurumu({ isLoggedIn }) {
if (isLoggedIn) {
return Hoş geldiniz!
;
} else {
return Lütfen giriş yapın.
;
}
}* Ternary Operatör (koşul ? doğru : yanlış): JSX içinde koşullu renderlama için çok kullanışlıdır.
function KullaniciGirisDurumu({ isLoggedIn }) {
return (
{isLoggedIn ? 'Hoş geldiniz!' : 'Lütfen giriş yapın.'}
);
}* Mantıksal && Operatörü: Bir koşul doğruysa bir element render etmek, yanlışsa hiçbir şey render etmemek için kullanılır.
function UyariMesaji({ uyari }) {
return (
{uyari && {uyari}
}
);
}
// -> Dikkat!
// -> Hiçbir şey render edilmezListe Renderlama (List Rendering)
Bir dizi veriyi render etmek için map() metodunu kullanmak React’te yaygın bir yöntemdir.
* map() Metodu: JavaScript’in map() dizisi metodu, bir dizideki her öğe için bir bileşen veya element döndürmek için idealdir.
function UrunListesi({ urunler }) {
return (
{urunler.map(urun => (
- {/ Her liste öğesi için benzersiz bir 'key' prop'u gereklidir /}
{urun.ad} - {urun.fiyat} TL
))}
);
}
const urunlerData = [
{ id: 1, ad: 'Klavye', fiyat: 250 },
{ id: 2, ad: 'Fare', fiyat: 100 },
{ id: 3, ad: 'Monitör', fiyat: 1500 },
];
// * key Prop’unun Önemi: Liste öğelerini render ederken, React her öğeye benzersiz bir key prop’u atamanızı bekler. key‘ler, React’in liste öğelerini verimli bir şekilde güncelleyebilmesi için her öğeyi tanımlamasına yardımcı olur. key olarak genellikle veritabanından gelen benzersiz bir ID kullanılır. Eğer benzersiz bir ID yoksa, dizin (index) kullanılabilir ancak bu, liste öğelerinin sırası değiştiğinde veya yeni öğeler eklendiğinde sorunlara yol açabilir, bu yüzden mümkünse benzersiz ID’ler tercih edilmelidir.
Form Yönetimi
React’te formlarla çalışmak, genellikle “kontrollü bileşenler” (controlled components) kavramını içerir.
* Kontrollü Bileşenler: Bir HTML form elementi (input, textarea, select) değerini React state’i tarafından kontrol edildiğinde “kontrollü” hale gelir. Bu, form verilerinin her zaman React state’inde saklandığı ve güncellendiği anlamına gelir.
import React, { useState } from 'react';
function KayitFormu() {
const [email, setEmail] = useState('');
const [sifre, setSifre] = useState('');
const handleEmailChange = (e) => {
setEmail(e.target.value);
};
const handleSifreChange = (e) => {
setSifre(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
alert(E-posta: ${email}, Şifre: ${sifre});
// Formu sıfırla
setEmail('');
setSifre('');
};
return (
);
}
export default KayitFormu; Bu yaklaşımda, her input elemanının value prop’u bir state değişkenine bağlıdır ve onChange olayı, input değeri her değiştiğinde bu state değişkenini günceller. Bu, form verilerini kolayca erişilebilir ve yönetilebilir hale getirir.
Bir Sonraki Adımlar ve React Ekosistemi
React’in temelini öğrendikten sonra, daha karmaşık ve gerçek dünya uygulamaları geliştirmek için ek araçlara ve kütüphanelere ihtiyacınız olacaktır. React’in geniş ekosistemi, bu ihtiyaçları karşılamak için birçok seçenek sunar.
Routing (Yönlendirme)
Tek sayfalık uygulamalarda (SPA), farklı URL’ler için farklı bileşenleri göstermek (sayfalar arası geçiş yapmak) için bir yönlendirme kütüphanesine ihtiyacınız vardır.
* React Router DOM: React uygulamaları için en popüler yönlendirme çözümüdür. BrowserRouter, Routes, Route, Link gibi bileşenler sağlayarak deklaratif bir yönlendirme deneyimi sunar.
Durum Yönetimi (Global State)
Uygulamanız büyüdükçe, bileşenler arasında paylaşılan global durumu yönetmek karmaşık hale gelebilir.
* Context API: React’in yerleşik bir özelliği olup, prop drilling sorununu azaltmak için bileşen ağacında derinlere veri geçirmeyi sağlar. Küçük ve orta ölçekli uygulamalar için yeterli olabilir.
* Redux (ve Redux Toolkit): Büyük ve karmaşık uygulamalar için en popüler durum yönetim kütüphanesidir. Merkezi bir “store” (depo) kullanarak tüm uygulamanın durumunu yönetir. Redux Toolkit, Redux’ı daha kolay ve hızlı kullanmak için önerilen modern bir yaklaşımdır.
* Zustand, Jotai, Recoil: Daha hafif ve modern alternatifler olup, Redux’tan daha az boilerplate (tekrar eden kod) ile global durum yönetimi sunarlar.
Stil Yönetimi
React bileşenlerinizi stilize etmek için birçok farklı yaklaşım vardır:
* CSS Modülleri: CSS dosyalarınızı bileşenlere özel hale getirerek isim çakışmalarını önler.
* Styled Components / Emotion: CSS kodunu JavaScript içinde yazmanıza olanak tanıyan “CSS-in-JS” kütüphaneleridir. Bileşen tabanlı bir stil yaklaşımı sunarlar.
* Tailwind CSS: Utility-first bir CSS framework’üdür. Önceden tanımlanmış küçük CSS sınıflarını kullanarak doğrudan JSX içinde stiller uygulamanıza olanak tanır.
* Sass/Less: CSS preprocessor’ları olup, daha güçlü ve modüler CSS yazmanızı sağlarlar.
API Entegrasyonu
Uygulamanızın genellikle harici API’lerden veri çekmesi veya API’ye veri göndermesi gerekir.
* fetch API: Modern tarayıcılarda yerleşik olarak bulunan, Promise tabanlı bir API istek mekanizmasıdır.
* Axios: Popüler bir üçüncü taraf HTTP istemcisi olup, fetch‘e göre daha fazla özellik (istek/yanıt interceptor’ları, otomatik JSON dönüşümü vb.) sunar.
Test
Uygulamanızın doğru çalıştığından emin olmak için test yazmak önemlidir.
* Jest: Facebook tarafından geliştirilen popüler bir JavaScript test framework’üdür.
* React Testing Library: Bileşenlerinizi kullanıcıların etkileşim şekline en yakın şekilde test etmeye odaklanan bir kütüphanedir.
Sunucu Tarafında Renderlama (SSR) ve Statik Site Üretimi (SSG)
SEO, performans ve ilk yükleme hızı gibi nedenlerle, React uygulamalarını sunucu tarafında render etmek veya statik siteler olarak oluşturmak isteyebilirsiniz.
* Next.js: React için popüler bir framework’tür. SSR, SSG, API rotaları ve daha birçok özellikle tam teşekküllü bir üretim ortamı sunar. Büyük ölçekli ve performans odaklı uygulamalar için sıklıkla tercih edilir.
* Gatsby: Statik site üretimi için optimize edilmiş bir framework’tür. GraphQL ile veri çekme yetenekleri sunar.
Mobil Geliştirme
React bilginizi kullanarak mobil uygulamalar geliştirebilirsiniz.
* React Native: Tek bir JavaScript kod tabanından hem iOS hem de Android için yerel mobil uygulamalar geliştirmenizi sağlayan bir framework’tür.
Topluluk ve Kaynaklar
React öğrenme yolculuğunuzda size yardımcı olacak birçok kaynak bulunmaktadır:
* React Resmi Dokümantasyonu: En güncel ve doğru bilgi kaynağıdır. Çok iyi yazılmış ve kapsamlıdır.
* Çevrimiçi Kurslar: Udemy, Coursera, freeCodeCamp, egghead.io gibi platformlarda birçok kaliteli React kursu bulunmaktadır.
* Bloglar ve Forumlar: Medium, dev.to gibi platformlardaki blog yazıları ve Stack Overflow gibi forumlar, karşılaştığınız sorunlara çözümler bulmanızda ve yeni şeyler öğrenmenizde yardımcı olur.
* GitHub: Açık kaynaklı React projelerini incelemek ve katkıda bulunmak, öğrenmenin harika bir yoludur.
Sonuç
React, modern web uygulamaları geliştirmek için inanılmaz derecede güçlü ve esnek bir JavaScript kütüphanesidir. Bildirimsel yaklaşımı, bileşen tabanlı mimarisi ve Sanal DOM gibi özellikleriyle geliştiricilere performanslı, bakımı kolay ve ölçeklenebilir uygulamalar oluşturma imkanı sunar. Bu makalede, React’e başlangıç için gerekli geliştirme ortamı kurulumundan, bileşenler, props, state, JSX ve Hook’lar gibi temel kavramlara kadar geniş bir yelpazeyi ele aldık. Ayrıca, uygulama geliştirme pratikleri ve React ekosistemindeki bir sonraki adımlar hakkında da bilgi verdik.
React öğrenmek, başlangıçta bazı yeni kavramlarla karşılaşmak anlamına gelse de, düzenli pratik ve sabırla üstesinden gelinebilecek bir süreçtir. Unutmayın ki, yazılım geliştirme sürekli bir öğrenme sürecidir. Temelleri sağlam bir şekilde kavradıktan sonra, React Router, Redux, Next.js gibi ek kütüphaneleri ve framework’leri keşfederek becerilerinizi daha da ileri taşıyabilirsiniz.
Bu rehberin, React dünyasına adım atmanız için sağlam bir temel oluşturduğunu ve modern web uygulamaları geliştirmeye olan tutkunuzu artırdığını umuyoruz. Şimdi sıra sizde: Kendi React projelerinizi oluşturmaya başlayın, pratik yapın ve bu heyecan verici teknolojinin sunduğu sınırsız olanakları keşfedin!