React Nedir? Kapsamlı Başlangıç Rehberi

React Nedir? Kapsamlı Başlangıç Rehberi

Modern web geliştirme dünyasında React, kullanıcı arayüzleri oluşturmak için en popüler JavaScript kütüphanelerinden biri haline geldi. Facebook (Meta) tarafından geliştirilen ve açık kaynak olarak sunulan React, bileşen tabanlı mimarisiyle karmaşık arayüzleri yönetilebilir parçalara böler. Bu rehberde React'in ne olduğunu, neden bu kadar popüler olduğunu ve ilk React uygulamanızı nasıl oluşturacağınızı adım adım öğreneceksiniz.

React'in Tanımı ve Tarihçesi

React, Facebook mühendisi Jordan Walke tarafından 2011 yılında geliştirilmeye başlanmış ve 2013 yılında açık kaynak olarak yayınlanmıştır. Temel amacı, büyük ölçekli ve veri odaklı uygulamalarda kullanıcı arayüzlerini verimli bir şekilde oluşturmak ve yönetmektir.

React bir framework değil, bir kütüphanedir. Bu, yalnızca görünüm (view) katmanına odaklandığı anlamına gelir. Routing, state management gibi ek özellikler için topluluk tarafından geliştirilen kütüphaneler kullanılır.

React'in temel özellikleri şunlardır:

• Virtual DOM: Gerçek DOM yerine sanal bir DOM kullanarak performansı artırır
• Bileşen Tabanlı Mimari: UI'ı yeniden kullanılabilir bileşenlere böler
• Tek Yönlü Veri Akışı: Veri üstten alta doğru akar, bu da hata ayıklamayı kolaylaştırır
• JSX: JavaScript içinde HTML benzeri sözdizimi kullanmayı sağlar
• Deklaratif Yaklaşım: UI'ın nasıl görünmesi gerektiğini tanımlarsınız, React güncellemeleri yönetir

Virtual DOM Nasıl Çalışır?

React'in en güçlü özelliklerinden biri Virtual DOM (Sanal DOM) mekanizmasıdır. Geleneksel DOM manipülasyonu yavaştır çünkü her değişiklik tarayıcının sayfayı yeniden render etmesine neden olur. React bu sorunu şu şekilde çözer:

1. React, bellekte gerçek DOM'un hafif bir kopyasını (Virtual DOM) tutar
2. State değiştiğinde yeni bir Virtual DOM ağacı oluşturulur
3. Diffing algoritması ile eski ve yeni Virtual DOM karşılaştırılır
4. Yalnızca değişen kısımlar gerçek DOM'a uygulanır (reconciliation)

İlk React Projesini Oluşturma

React projesi oluşturmanın en modern yolu Vite kullanmaktır. Daha önce Create React App (CRA) popülerdi ancak artık resmi olarak önerilmemektedir.

# Vite ile yeni bir React projesi oluşturma
npm create vite@latest my-react-app -- --template react

# Proje dizinine geçiş
cd my-react-app

# Bağımlılıkları yükleme
npm install

# Geliştirme sunucusunu başlatma
npm run dev

Bu komutlar çalıştırıldığında tarayıcınızda http://localhost:5173 adresinde React uygulamanız çalışmaya başlar.

React'in Temel Yapı Taşları

1. Bileşenler (Components)

React'te her şey bileşenlerden oluşur. Bir bileşen, kendi mantığı ve görünümü olan bağımsız bir UI parçasıdır. Modern React'te fonksiyonel bileşenler standart olarak kullanılır:

// Basit bir fonksiyonel bileşen
function Welcome({ name }) {
  return (
    <div className="welcome-card">
      <h1>Merhaba, {name}!</h1>
      <p>React dünyasına hoş geldiniz.</p>
    </div>
  );
}

// Bileşeni kullanma
function App() {
  return (
    <div>
      <Welcome name="Tarik" />
      <Welcome name="Ayşe" />
      <Welcome name="Mehmet" />
    </div>
  );
}

2. JSX (JavaScript XML)

JSX, JavaScript içinde HTML benzeri sözdizimi kullanmamızı sağlar. Aslında JSX, React.createElement() çağrılarına dönüştürülür:

// JSX ile yazım
const element = <h1 className="title">Merhaba React!</h1>;

// Babel tarafından dönüştürülmüş hali
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Merhaba React!'
);

3. Props ve State

React'te veri yönetiminin iki temel kavramı vardır:

• Props: Üst bileşenden alt bileşene aktarılan salt okunur verilerdir
• State: Bileşenin kendi içinde yönettiği, değişebilir verilerdir

import { useState } from 'react';

function Counter() {
  // useState ile state tanımlama
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Artır
      </button>
      <button onClick={() => setCount(0)}>
        Sıfırla
      </button>
    </div>
  );
}

React Ekosistemi

React tek başına bir kütüphane olsa da, zengin bir ekosisteme sahiptir. İşte en çok kullanılan araçlar:

Kategori	Araç	Açıklama
Routing	React Router	Sayfa yönlendirme ve navigasyon
State Management	Redux, Zustand, Jotai	Global state yönetimi
Veri Çekme	TanStack Query, SWR	Sunucu state yönetimi ve caching
Stil	Tailwind CSS, styled-components	CSS çözümleri
Form	React Hook Form, Formik	Form yönetimi ve validasyon
Framework	Next.js, Remix	Full-stack React framework'leri

Neden React Tercih Edilmeli?

React'i diğer alternatiflerden ayıran birçok avantaj vardır:

1. Geniş Topluluk: Dünya genelinde milyonlarca geliştirici tarafından kullanılır. npm üzerinde binlerce React paketi mevcuttur
2. İş Piyasası: React bilgisi, frontend geliştirme pozisyonlarında en çok aranan becerilerden biridir
3. Öğrenme Eğrisi: JavaScript bilgisi olan geliştiriciler için nispeten kolay bir geçiş sağlar
4. Esneklik: Küçük widget'lardan büyük kurumsal uygulamalara kadar her ölçekte kullanılabilir
5. React Native: Aynı bilgiyle mobil uygulama geliştirme imkanı sunar

Basit Bir Uygulama Örneği: Yapılacaklar Listesi

React'in temel kavramlarını bir araya getiren basit bir yapılacaklar listesi uygulaması oluşturalım:

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim() === '') return;
    setTodos([...todos, { id: Date.now(), text: inputValue, done: false }]);
    setInputValue('');
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="todo-app">
      <h2>Yapılacaklar Listesi</h2>
      <div className="input-group">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && addTodo()}
          placeholder="Yeni görev ekle..."
        />
        <button onClick={addTodo}>Ekle</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
            <span onClick={() => toggleTodo(todo.id)}>{todo.text}</span>
            <button onClick={() => deleteTodo(todo.id)}>Sil</button>
          </li>
        ))}
      </ul>
      <p>Toplam: {todos.length} | Tamamlanan: {todos.filter(t => t.done).length}</p>
    </div>
  );
}

export default TodoApp;

Sonuç

React, modern web geliştirmenin temel taşlarından biridir. Bileşen tabanlı mimarisi, Virtual DOM performansı ve geniş ekosistemi sayesinde her ölçekteki proje için güçlü bir seçenektir. Bu rehberde React'in temellerini, nasıl çalıştığını ve ilk uygulamanızı nasıl oluşturacağınızı öğrendiniz. Bir sonraki adımda React bileşen yapısını daha derinlemesine incelemenizi ve hooks sistemini öğrenmenizi öneririm.

React yolculuğunuzda en önemli şey pratik yapmaktır. Küçük projeler oluşturarak başlayın, resmi dökümantasyonu takip edin ve topluluk kaynaklarından yararlanın.

Kaynaklar

• React Resmi Dökümantasyonu
• MDN - React Başlangıç Rehberi
• Vite Resmi Dökümantasyonu
• React Reconciliation Algoritması