React İ Nasıl Yapılır?

Modern web geliştirme dünyasında dinamik, hızlı ve ölçeklenebilir kullanıcı arayüzleri oluşturmak söz konusu olduğunda akla ilk gelen kütüphane React olmaktadır. Peki, modern standartlara uygun bir React İ Nasıl Yapılır? Bu rehberde, sıfırdan başlayarak profesyonel düzeyde bir React uygulamasının nasıl kurulacağını, yapılandırılacağını ve geliştirileceğini adım adım inceleyeceğiz. İster yazılıma yeni başlıyor olun ister mevcut bilgilerinizi 2026 yılı standartlarına göre güncellemek isteyin, bu kapsamlı eğitim size yol gösterecektir.

React, bileşen tabanlı (component-based) yapısı sayesinde karmaşık arayüzleri yönetilebilir küçük parçalara bölerek geliştirmemizi sağlar. Bu eğitim boyunca, modern React geliştirme süreçlerinde kullanılan Vite derleyicisinden, kancalara (hooks), durum yönetiminden (state management) ve güvenlik önlemlerine kadar her detayı uygulamalı kod örnekleriyle ele alacağız. Hazırsanız, modern web geliştirmenin kalbine adım atalım ve projelerimizi hayata geçirelim.

Ön Hazırlık ve Gereksinimler

React ile modern uygulamalar geliştirmek için yerel bilgisayarınızda belirli bir çalışma ortamının kurulu olması gerekir. 2026 yılı standartlarında, eskiyen Create React App (CRA) yerine çok daha hızlı ve optimize olan Vite derleyicisi standart hale gelmiştir. Projemize başlamadan önce aşağıdaki araçların bilgisayarınızda kurulu olduğundan emin olmalısınız:

• Node.js: JavaScript kodlarını sunucu tarafında çalıştırmamızı ve paket yöneticilerini kullanmamızı sağlayan çalışma ortamıdır. En az Node.js v18 veya üzeri (LTS sürümü tavsiye edilir) kurulu olmalıdır.
• npm veya pnpm/yarn: Node.js ile birlikte gelen paket yöneticisidir. Harici kütüphaneleri projemize dahil etmek için kullanılır.
• IDE (Kod Editörü): Modern JavaScript ve TypeScript desteği sunan Visual Studio Code (VS Code) en popüler tercihtir.
• Terminal: Komut satırı araçlarını çalıştırmak için terminal veya komut istemi.

Node.js kurulumunu tamamladıktan sonra terminalinizde node -v ve npm -v komutlarını çalıştırarak kurulumların başarıyla tamamlandığını doğrulayabilirsiniz. Eğer sürümler doğru görünüyorsa, ilk React projemizi oluşturmaya hazırız demektir.

Adım Adım React Projesi Oluşturma

Modern bir React projesini başlatmak için en hızlı ve performanslı yöntem Vite aracını kullanmaktır. Vite, geliştirme aşamasında anında geri bildirim (Hot Module Replacement - HMR) sunarak kod değişikliklerinizi tarayıcıda milisaniyeler içinde görmenizi sağlar. Bu durum, geliştirici deneyimini (developer experience) üst seviyeye çıkarır.

Projenizi oluşturmak için terminalinizi açın ve projenizi konumlandırmak istediğiniz dizine gidin. Ardından aşağıdaki komutları sırasıyla çalıştırarak projenizi oluşturun ve ilk kez ayağa kaldırın:

# 1. Vite ile yeni bir React projesi şablonu oluşturun
npm create vite@latest react-rehberim -- --template react

# 2. Proje klasörünün içine girin
cd react-rehberim

# 3. Gerekli tüm bağımlılıkları (node_modules) yükleyin
npm install

# 4. Geliştirme sunucusunu (development server) başlatın
npm run dev

Yukarıdaki komutları çalıştırdıktan sonra terminalinizde size yerel bir adres (genellikle http://localhost:5173) verilecektir. Bu adresi tarayıcınızda açtığınızda, Vite ve React logolarının bulunduğu varsayılan hoş geldiniz sayfasını göreceksiniz. Bu, projenizin başarıyla kurulduğu ve çalışmaya hazır olduğu anlamına gelir.

Proje klasör yapısını incelediğinizde karşınıza şu temel dosyalar çıkacaktır:

• index.html: Uygulamanızın tek giriş noktası olan HTML dosyasıdır. İçinde React'in kendini bağladığı
  alanı bulunur.
• src/main.jsx: React uygulamasının başlatıldığı ve HTML'deki "root" elementine bağlandığı (render edildiği) ana JavaScript dosyasıdır.
• src/App.jsx: Uygulamanızın ana bileşenidir (root component). Yazacağımız diğer tüm alt bileşenler bu bileşenin altında birleşecektir.

React Bileşenleri (Components) Nasıl Yapılır?

React'in temel yapı taşı bileşenlerdir (components). Bir bileşen, kendi mantığına (logic) ve görünümüne (UI) sahip olan, yeniden kullanılabilir bir kullanıcı arayüzü parçasıdır. Modern React dünyasında sınıf tabanlı (class) bileşenler tamamen bırakılmış, yerini tamamen fonksiyonel bileşenlere (functional components) bırakmıştır.

Bileşenler dışarıdan veri almak için "props" (properties) adı verilen salt okunur (read-only) parametreleri kullanırlar. Props, bir üst bileşenden alt bileşene tek yönlü veri akışı (one-way data binding) sağlar. Şimdi, dinamik veriler kabul eden ve güvenli bir şekilde ekrana yazdıran bir kullanıcı kartı bileşeni oluşturalım.

Aşağıdaki kod örneğinde, UserCard.jsx adında yeni bir bileşen tanımlıyoruz. Bu bileşen, kullanıcı adı, rolü ve aktiflik durumunu prop olarak alıp şık bir kart tasarımı içinde sunmaktadır:

// src/components/UserCard.jsx
import React from 'react';

// Fonksiyonel bileşen tanımlıyoruz ve props nesnesini parçalayarak (destructuring) alıyoruz
function UserCard({ name, role, isActive }) {
  return (
    

      
{name}
      

        Rol: {role}
      
      
        {isActive ? 'Aktif Kullanıcı' : 'Pasif Kullanıcı'}
      
    
  );
}

export default UserCard;

Oluşturduğumuz bu bileşeni ana uygulamamız olan App.jsx içerisinde çağırarak kullanabiliriz. Bileşene gönderdiğimiz her farklı prop değeri, ekranda farklı bir kartın render edilmesini sağlayacaktır. Bu sayede kod tekrarından kaçınmış ve modüler bir yapı kurmuş oluruz.

State ve Effect Yönetimi Nasıl Yapılır?

Bir React uygulamasının dinamik olabilmesi, kullanıcı etkileşimlerine tepki vermesi ve verileri hafızasında tutması gerekir. Bunu sağlamak için React Hooks (Kancalar) kullanılır. En temel iki kanca useState ve useEffect'tir.

useState, bileşen içinde yerel bir durum (state) tanımlamamızı sağlar. State her değiştiğinde React, bileşeni otomatik olarak yeniden render eder. useEffect ise bileşenin yaşam döngüsündeki (lifecycle) yan etkileri (side effects) yönetmek için kullanılır; örneğin bir API'den veri çekmek, sayfa başlığını değiştirmek veya zamanlayıcıları (timer) yönetmek gibi.

Aşağıdaki örnekte, harici bir API'den (JSONPlaceholder) kullanıcı listesini güvenli bir şekilde çeken, yüklenme (loading) ve hata (error) durumlarını yöneten gelişmiş bir bileşen tasarlıyoruz:

// src/components/UserList.jsx
import React, { useState, useEffect } from 'react';
import UserCard from './UserCard';

function UserList() {
  // State tanımlamaları
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // API'den veri çekme fonksiyonu
    const fetchUsers = async () => {
      try {