React Nedir? Ne Zaman Kullanılır? Yeni Başlayanlar İçin

React Dünyasına Giriş

JavaScript temellerini attıktan sonra modern web geliştirme dünyasında adını en çok duyduğun araçların başında React gelir. Kullanıcı arayüzleri inşa etmek için tasarlanan bu kütüphane, web uygulaması geliştirme alışkanlıklarını kökten değiştirir. JavaScript bilmek React öğrenmek için yeterli bir başlangıç noktasıdır ancak bu kütüphanenin felsefesini kavramak zaman ve pratik gerektirir.

React Nedir?

React, kullanıcı arayüzleri oluşturmaya yarayan açık kaynaklı bir JavaScript kütüphanesidir. Meta (eski adıyla Facebook) tarafından geliştirilen bu yapı, tüm web sitesini tek bir hamlede yeniden yüklemek yerine sayfayı küçük, bağımsız parçalara böler. Bu parçalar sayesinde veri değiştikçe sadece değişen kısım güncellenir.

Geleneksel web geliştirme yöntemlerinde DOM (Document Object Model) manipülasyonu maliyetli ve yavaştır. React ise Virtual DOM adı verilen hafif bir sanal kopya kullanır. Değişiklikler önce bu sanal yapıda hesaplanır, gerçek DOM ile karşılaştırılır ve yalnızca gerekli minimum güncelleme sayfaya yansıtılır.

Ne Zaman Kullanılır?

Her proje için React kullanmak zorunda değilsin. Statik bir blog sitesi veya birkaç sayfadan oluşan basit bir kurumsal site için saf JavaScript veya HTML/CSS ikilisi fazlasıyla yeterlidir. Ancak şu senaryolarda React kullanmak büyük avantaj sağlar:

• Kullanıcı etkileşiminin çok yoğun olduğu dinamik arayüzler
• Sayfa yenilenmeden güncellenmesi gereken veri akışları
• Tek sayfa uygulamaları (SPA)
• Yeniden kullanılabilir arayüz elemanlarına ihtiyaç duyulan büyük projeler

Temel Kavramlar

React öğrenirken zihnini oturtman gereken üç temel kavram vardır: Bileşenler (Components), Props ve State. Bu üçlüyü anladığında kütüphanenin mantığını büyük ölçüde çözmüş olursun.

Bileşenler (Components)

React uygulamaları bir araya getirilmiş bileşenlerden oluşur. Bir buton, bir menü çubuğu veya bütün bir form birer bileşendir. Bileşenler kendi stillerini ve mantıklarını kendi içlerinde barındırır. Böylece yazdığın kodu başka sayfalarda tekrar tekrar kullanabilirsin.

Props (Properties)

Props, üst bileşenden alt bileşene veri aktarmak için kullanılan mekanizmadır. Adeta bir fonksiyona gönderilen argümanlar gibidir. Props, salt okunurdur; yani bir bileşen kendisine gelen props değerini doğrudan değiştiremez.

State (Durum)

State, bir bileşenin kendi içinde tuttuğu ve zamanla değişebilen verilerdir. Örneğin bir butona tıklandığında sayacın artması veya bir form alanına yazı yazılması state değişimiyle gerçekleşir. State değiştiğinde React o bileşeni otomatik olarak yeniden render eder.

Küçük Bir Bileşen Örneği

React bileşenleri genellikle JavaScript fonksiyonları olarak yazılır ve JSX adı verilen, HTML'e benzeyen bir sözdizimi kullanır. İşte basit bir karşılama bileşeni örneği:

function KullaniciKarsilama(props) {
  return (
    <div className="karsilama-kutusu">
      <h2>Hoş geldin, {props.isim}!</h2>
      <p>Bugün kod yazmaya hazır mısın?</p>
    </div>
  );
}

Bu bileşeni başka bir yerde şu şekilde kullanabilirsin:

function Uygulama() {
  return (
    <div>
      <KullaniciKarsilama isim="Ayşe" />
      <KullaniciKarsilama isim="Mehmet" />
    </div>
  );
}

Ne Zaman Gereksizdir?

Her popüler araç gibi React de her derde deva değildir. Yanlış yerde kullanımı projeyi gereksiz yere karmaşıklaştırır.

• Çok küçük ve nadiren güncellenen web sitelerinde
• SEO optimizasyonunun kritik olduğu ve sunucu tarafı render (SSR) yapılandırmasının zor olduğu durumlarda (ekstra araçlar gerektirir)
• Sadece birkaç satır JavaScript işlevi için devasa kütüphane bağımlılıkları eklemek istemediğinde

Yeni Başlayanlar İçin Dürüst Bir Değerlendirme

React öğrenmeye karar verdiğinde JSX sözdizimi ilk başta garip gelebilir çünkü JavaScript içine HTML yazıyormuş gibi hissedersin. Bu normal bir süreçtir. Önemli olan JavaScript temellerini sağlam tutmaktır. Dizi metodları, nesneler, fonksiyonlar ve özellikle ES6 özellikleri konusunda kendine güveniyorsan React geçişi senin için çok daha akıcı olacaktır. Acele etmeden küçük projeler üreterek ilerlemek en sağlam yoldur.

Görüşmek üzere.