React Geliştirme İçin Ön Hazırlık ve Gereksinimler
React ile uygulama geliştirmeye başlamadan önce bilgisayarınızda doğru araçların kurulu olduğundan emin olmanız gerekir. Modern React ekosistemi, geliştirme sürecini hızlandırmak ve kod kalitesini artırmak için çeşitli yardımcı araçlara ihtiyaç duyar. 2026 yılı itibarıyla, eskiyen ve yavaş kalan "Create React App" (CRA) yerine çok daha hızlı ve optimize bir araç olan Vite kullanılmaktadır.
React projeleri geliştirmek için sisteminizde bulunması gereken temel bileşenler şunlardır:
- Node.js: JavaScript kodlarının sunucu tarafında ve terminalde çalışmasını sağlayan çalışma ortamıdır. En az v20 LTS sürümünün kurulu olması önerilir.
- npm veya pnpm: Node.js ile birlikte gelen paket yöneticileridir. Projemize harici kütüphaneler eklemek için kullanılır.
- Kod Editörü: Geliştirme yaparken işinizi kolaylaştıracak VS Code gibi modern bir metin editörü tercih edilmelidir.
Önemli Güvenlik Uyarısı: Node.js ve npm paketlerinizi her zaman resmi web sitelerinden indirin. Üçüncü taraf veya güvenilmeyen kaynaklardan indirilen paket yöneticileri, sisteminize kötü amaçlı yazılımların sızmasına neden olabilir.
Adım 1: Vite ile Adım Adım React Projesi Oluşturma
Projemizin temelini atmak için terminalimizi (komut satırını) açıyoruz. Vite aracı sayesinde saniyeler içinde optimize edilmiş bir React şablonu oluşturabiliriz. Bu adımda terminal komutlarını kullanarak projemizi kuracak ve ilk kez ayağa kaldıracağız.
Aşağıdaki komut bloğu, bilgisayarınızda yeni bir React projesi başlatmak, ilgili klasöre gitmek ve gerekli tüm bağımlılıkları yüklemek için kullanılır. Bu komutları sırasıyla terminalinizde çalıştırın:
# Yeni bir Vite projesi oluşturun (React şablonu ile)
npm create vite@latest modern-react-app -- --template react
# Proje klasörünün içine girin
cd modern-react-app
# Gerekli tüm npm paketlerini yükleyin
npm install
# Yerel geliştirme sunucusunu başlatın
npm run dev
Yukarıdaki komutları çalıştırdıktan sonra terminalinizde yerel bir adres (genellikle http://localhost:5173) göreceksiniz. Bu adresi tarayıcınızda açtığınızda, Vite ve React logolarının yer aldığı ilk çalışan uygulamanızı görebilirsiniz. Projeniz başarıyla oluşturulmuştur ve kodlamaya hazırdır.
Adım 2: React Bileşenleri (Components) Nasıl Yapılır?
React'in en temel yapı taşı bileşenlerdir (components). Bileşenler, web sayfanızdaki bağımsız, yeniden kullanılabilir ve kendi mantığına sahip olan arayüz parçalarıdır. Örneğin bir buton, bir menü veya bir kullanıcı kartı birer bileşendir. React'te bileşenler JavaScript fonksiyonları olarak yazılır ve JSX (JavaScript XML) adı verilen, HTML benzeri bir sözdizimi döndürür.
Aşağıdaki kod örneğinde, projenizin başlık kısmını temsil eden basit ve yeniden kullanılabilir bir fonksiyonel bileşen oluşturuyoruz. Bu dosyayı projenizin src klasörü altında Header.jsx adıyla kaydedebilirsiniz:
// src/Header.jsx
function Header() {
const sirketAdi = "Modern Yazılım Akademisi";
const bugununTarihi = new Date().toLocaleDateString("tr-TR");
return (
{sirketAdi}
Hoş geldiniz! Bugünün Tarihi: {bugununTarihi}
);
}
export default Header;
Bu kod bloğunda, standart bir JavaScript fonksiyonu tanımladık. Fonksiyonun içinde dinamik değişkenler (sirketAdi ve bugununTarihi) oluşturduk ve bunları JSX içinde süslü parantezler {} kullanarak ekrana yazdırdık. Son satırda yer alan export default Header ifadesi, bu bileşeni diğer dosyalarda içe aktarıp (import) kullanmamıza olanak tanır.
Adım 3: Props Kullanarak Bileşenler Arası Veri Aktarımı
Bileşenlerin gerçek gücü, dışarıdan veri alıp bu verilere göre şekillenebilmelerinden gelir. React'te bir üst bileşenden alt bileşene veri aktarmak için "Props" (Properties - Özellikler) yapısını kullanırız. Props, salt okunurdur (read-only); yani bir alt bileşen kendisine gelen props verisini doğrudan değiştiremez, sadece ekrana basar veya kullanır.
Aşağıdaki örnekte, bir e-ticaret sitesindeki ürün kartını temsil eden dinamik bir bileşen oluşturuyoruz. Bu bileşen, üst bileşenden ürün adı, fiyatı ve stok durumunu props olarak alacaktır:
// src/ProductCard.jsx
function ProductCard(props) {
const { urunAdi, fiyat, stoktaVar } = props;
return (
{urunAdi}
Fiyat: {fiyat} TL
{stoktaVar ? "Stokta Var" : "Tükendi"}
);
}
export default ProductCard;
Bu kod örneğinde, fonksiyon parametresi olarak gelen props nesnesini JavaScript'in "destructuring" (parçalama) yöntemiyle değişkenlere ayırdık. Ardından, stoktaVar boolean (doğru/yanlış) değerine göre kullanıcıya koşullu render (conditional rendering) yöntemiyle farklı renklerde metinler gösterdik.
Şimdi bu ürün kartını ana uygulama dosyamız olan App.jsx içinde nasıl çağıracağımızı ve verileri nasıl göndereceğimizi görelim:
// src/App.jsx
import Header from "./Header";
import ProductCard from "./ProductCard";
function App() {
return (
Öne Çıkan Ürünlerimiz
);
}
export default App;
Yukarıdaki App.jsx dosyasında, daha önce yazdığımız Header ve ProductCard bileşenlerini içe aktardık. Ürün kartlarımıza farklı özellikler (props) göndererek tek bir bileşenden üç farklı arayüz çıktısı elde etmiş olduk. Bu, React'in kod tekrarını önleyen en önemli özelliklerinden biridir.
Adım 4: useState Hook'u ile Durum (State) Yönetimi Nasıl Yapılır?
Statik bileşenler harikadır ancak gerçek uygulamalar kullanıcı etkileşimine yanıt vermelidir. Kullanıcının bir butona tıklaması, form doldurması veya veri araması gibi durumlarda arayüzün güncellenmesi gerekir. React'te bu dinamik verileri yönetmek için "State" (Durum) kavramını ve useState adındaki özel fonksiyonu (Hook) kullanırız.
Aşağıdaki örnek kodda, kullanıcının sepetine ürün ekleyebileceği ve sepet miktarını dinamik olarak artırıp azaltabileceği güvenli bir sayaç bileşeni oluşturuyoruz:
// src/Counter.jsx
import { useState } from "react";
function Counter() {
const [adet, setAdet] = useState(0);
const arttir = () => {
if (adet < 10) {
setAdet(adet + 1);
} else {
alert("En fazla 10 adet sipariş verebilirsiniz.");
}
};
const azalt = () => {
if (adet > 0) {
setAdet(adet - 1);
}
};
return (
Alışveriş Sepetim
Seçilen Ürün Adedi: {adet}
-
+
);
}
export default Counter;
Bu kodda, React kütüphanesinden useState fonksiyonunu içe aktardık. useState(0) ifadesiyle başlangıç değeri sıfır olan bir durum tanımladık. Bu fonksiyon bize iki değer döner: güncel durum değeri (adet) ve bu değeri güncellemeye yarayan fonksiyon (setAdet). Butonlara tıklanıldığında çalışan fonksiyonlarda, sınır kontrolleri (0 ile 10 arası) yaparak uygulamanın mantıksal hatalara düşmesini engelledik.
Adım 5: useEffect Hook'u ile API'den Veri Çekme ve Yan Etki Yönetimi
Gerçek dünyadaki React uygulamaları genellikle bir sunucudan veya harici bir API'den veri çeker. Bileşen yüklendiğinde (mount edildiğinde) veya belirli bir veri değiştiğinde arka planda işlem yapmak için useEffect Hook'unu kullanırız. Bu işlemler React dünyasında "yan etki" (side effect) olarak adlandırılır.
Aşağıdaki örnekte, sahte bir API servisinden (JSONPlaceholder) kullanıcı listesini güvenli bir şekilde çeken ve ekrana listeleyen bir bileşen tasarlıyoruz. Bellek sızıntılarını (memory leak) önlemek için modern temizleme (cleanup) yöntemini de uyguluyoruz:
// src/UserList.jsx
import { useState, useEffect } from "react";
function UserList() {
const [kullanicilar, setKullanicilar] = useState([]);
const [yukleniyor, setYukleniyor] = useState(true);
const [hata, setHata] = useState(null);
useEffect(() => {
const controller = new AbortController(); // İstek iptal kontrolörü
async function veriGetir() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users", {
signal: controller.signal
});
if (!response.ok) {
throw new Error("Veri çekme işlemi başarısız oldu.");
}
const data = await response.json();
setKullanicilar(data);
setYukleniyor(false);
} catch (err) {
if (err.name !== "AbortError") {
setHata(err.message);
setYukleniyor(false);
}
}
}
veriGetir();
// Cleanup: Bileşen ekrandan kalkarsa API isteğini iptal et
return () => {
controller.abort();
};
}, []); // Boş dizi: Sadece bileşen ilk yüklendiğinde çalışır
if (yukleniyor) return Veriler yükleniyor, lütfen bekleyin...
;
if (hata) return Hata oluştu: {hata}
;
return (
Sistem Kullanıcı Listesi
{kullanicilar.map((kullanici) => (
-
{kullanici.name} - {kullanici.email}
))}
);
}
export default UserList;
Bu gelişmiş örnekte, useEffect içinde asenkron (async/await) bir veri çekme işlemi gerçekleştirdik. AbortController kullanarak, eğer kullanıcı veriler henüz yüklenmeden sayfadan ayrılırsa API isteğinin tarayıcı tarafından iptal edilmesini sağladık. Bu yöntem, özellikle büyük ölçekli uygulamalarda sunucu trafiğini ve tarayıcı belleğini korumak için hayati önem taşır. Ayrıca, gelen verileri listelerken her elemana benzersiz bir key prop'u (kullanici.id) atayarak React'in listeyi hızlıca güncellemesine yardımcı olduk.
Adım 6: React Form Yönetimi ve XSS Saldırılarına Karşı Güvenlik
Kullanıcılardan veri alırken form elemanlarını kontrol altında tutmak çok önemlidir. React'te form girdilerini doğrudan state ile ilişkilendirerek "Kontrollü Bileşenler" (Controlled Components) oluştururuz. Bu yöntem, kullanıcının yazdığı her karakteri anlık olarak denetlememizi ve zararlı kod girişlerini (XSS - Cross Site Scripting) engellememizi sağlar.
Aşağıdaki kod örneğinde, güvenli bir kullanıcı kayıt formu oluşturuyoruz. Kullanıcı girdilerini temizleyerek ve doğrulayarak güvenli bir şekilde işliyoruz:
// src/RegisterForm.jsx
import { useState } from "react";
function RegisterForm() {
const [formData, setFormData] = useState({
kullaniciAdi: "",
eposta: ""
});
const [mesaj, setMesaj] = useState("");
const girdiDegisti = (e) => {
const { name, value } = e.target;
// Basit XSS koruması: HTML etiket karakterlerini temizle
const temizDeger = value.replace(/ 
Yorumlar (0)
Yorum Yaz