React Temel Kavramlar

React Nedir? Neden Kullanılır?

React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Özellikle tek sayfa uygulamaları (Single Page Applications - SPA) geliştirmek için popülerdir. React'in temel amacı, büyük ve karmaşık web uygulamalarında bile performansı yüksek ve yönetilebilir kullanıcı arayüzleri oluşturmaktır.

Neden React Kullanmalıyız?

• Bileşen Tabanlı Mimari: React, uygulamanızı küçük, bağımsız ve yeniden kullanılabilir bileşenlere ayırmanıza olanak tanır. Bu, kodun daha düzenli, anlaşılır ve bakımı kolay olmasını sağlar.
• Sanal DOM (Virtual DOM): React, gerçek DOM üzerinde doğrudan değişiklik yapmak yerine, önce sanal bir DOM üzerinde değişiklikleri yapar. Daha sonra bu sanal DOM'u gerçek DOM ile karşılaştırır ve sadece gerekli olan değişiklikleri gerçek DOM'a uygular. Bu sayede performans artışı sağlanır.
• Tek Yönlü Veri Akışı: React'te veri akışı tek yönlüdür (üst bileşenden alt bileşene). Bu, uygulamanın veri yönetimini daha öngörülebilir ve hata ayıklamasını daha kolay hale getirir.
• Geniş Topluluk ve Ekosistem: React, geniş bir geliştirici topluluğuna ve zengin bir ekosisteme sahiptir. Bu, sorunlarla karşılaştığınızda kolayca destek bulabileceğiniz ve birçok hazır kütüphane ve araçtan faydalanabileceğiniz anlamına gelir.

Tek Sayfa Uygulamaları (SPA) ve React

Tek Sayfa Uygulamaları (SPA), tüm uygulamanın tek bir HTML sayfasında yüklendiği ve kullanıcı etkileşimleriyle sayfanın tamamının yeniden yüklenmediği web uygulamalarıdır. Bunun yerine, sayfanın içeriği JavaScript aracılığıyla dinamik olarak güncellenir.

React, SPA geliştirmek için ideal bir kütüphanedir çünkü bileşen tabanlı yapısı ve sanal DOM kullanımı sayesinde sayfa geçişlerini ve içerik güncellemelerini hızlı ve sorunsuz bir şekilde gerçekleştirebilir.

Geliştirme Ortamı Kurulumu

React uygulaması geliştirmeye başlamadan önce bazı araçlara ihtiyacımız var:

1. Node.js ve npm/yarn: JavaScript çalışma zamanı ortamı olan Node.js ve paket yöneticileri npm (Node Package Manager) veya yarn, React projelerini oluşturmak ve bağımlılıkları yönetmek için gereklidir.

   • Node.js'i indirmek için: https://nodejs.org/
   • Kurulumdan sonra terminalde node -v ve npm -v (veya yarn -v) komutlarını çalıştırarak doğru şekilde kurulup kurulmadığını kontrol edebilirsiniz.

2. Create React App: React uygulamalarını hızlı bir şekilde başlatmak için Facebook tarafından sağlanan resmi bir araçtır. Gerekli tüm yapılandırmaları ve bağımlılıkları otomatik olarak ayarlar.

Temel React Projesi Oluşturma ve Çalıştırma

Create React App kullanarak yeni bir React projesi oluşturalım:

bash npx create-react-app my-first-react-app

cd my-first-react-app

npm start

Bu komutlar sırasıyla:

• npx create-react-app my-first-react-app: my-first-react-app adında yeni bir React projesi oluşturur.
• cd my-first-react-app: Oluşturulan projenin dizinine girer.
• npm start: Geliştirme sunucusunu başlatır ve uygulamanızı tarayıcınızda http://localhost:3000 adresinde açar.

Sanal DOM (Virtual DOM) Nedir? Nasıl Çalışır?

Sanal DOM, React'in performansını artıran önemli bir özelliktir. Gerçek DOM (Document Object Model), web sayfasının yapısını temsil eden bir ağaç yapısıdır. Gerçek DOM üzerinde yapılan her değişiklik maliyetlidir ve sayfanın yeniden çizilmesine neden olabilir.

React, bu maliyeti azaltmak için Sanal DOM'u kullanır. Sanal DOM, gerçek DOM'un hafif bir kopyasıdır. Bir bileşenin durumu değiştiğinde, React önce bu değişikliği Sanal DOM üzerinde yapar. Daha sonra, güncellenmiş Sanal DOM'u önceki Sanal DOM ile karşılaştırır (diffing algoritması).

Bu karşılaştırma sonucunda, sadece değişen kısımlar belirlenir ve bu değişiklikler gerçek DOM'a toplu bir şekilde uygulanır (reconciliation süreci). Bu sayede, gereksiz DOM manipülasyonlarından kaçınılır ve uygulama performansı artırılır.

Sanal DOM'un Çalışma Adımları:

1. Durum Değişikliği: Bir bileşenin durumu (state) değiştiğinde, React yeni bir Sanal DOM ağacı oluşturur.
2. Karşılaştırma (Diffing): Yeni Sanal DOM ağacı, önceki Sanal DOM ağacı ile karşılaştırılır. React, hangi bileşenlerin değiştiğini ve hangi değişikliklerin yapılması gerektiğini belirler.
3. Gerçek DOM Güncellemesi (Reconciliation): Belirlenen değişiklikler, en verimli şekilde gerçek DOM'a uygulanır. Bu, sadece değişen kısımların güncellenmesi anlamına gelir, tüm sayfanın yeniden çizilmesi değil.

Bu süreç, özellikle sık sık güncellenen ve karmaşık kullanıcı arayüzlerine sahip uygulamalarda büyük performans avantajları sağlar.