React VS React Native

React nedir?

React, Facebook'un 2013 yılında yayınladığı bir JavaScript kütüphanesidir. Arayüz bileşenleri oluşturmak için kullanılır. Web sayfalarındaki dinamik ekranları bileşen mantığıyla yönetir. Kod tekrarını azaltır, bakımı kolaylaştırır.

Kütüphane, JSX adlı bir sözdizimi kullanır. JSX, HTML benzeri kod yazmayı sağlar. Tarayıcı bu kodu doğrudan çalıştırmaz; Babel gibi araçlar önce JavaScript'e çevirir. Sonuçta ortaya tarayıcıda çalışan normal bir web sayfası çıkar.

React tek başına bir uygulama iskeleti sunmaz. Yönlendirme, veri çekme, form yönetimi gibi işler için ek kütüphanelerle birlikte kullanılır. Bu yüzden ekipler React'i genelde Next.js veya Vite gibi araçlarla birleştirir.

React Native nedir?

React Native, Facebook'un 2015 yılında duyurduğu bir mobil geliştirme çerçevesidir. React'in bileşen mantığını mobil uygulamalara taşır. Tek bir kod tabanıyla hem iOS hem Android için uygulama üretilir. Arayüz, web'deki div veya span yerine View ve Text gibi bileşenlerle kurulur.

Yazılan bileşenler, çalışma anında platformun kendi native bileşenlerine dönüştürülür. Ekranda görülen buton, iOS'ta UIButton, Android'de ise native bir View karşılığına sahiptir. Bu dönüşüm mekanizması, uygulamanın native bir his vermesini sağlar.

Çerçeve, JavaScript motoru üzerinde çalışır. Kod, tarayıcıda değil telefonun işletim sisteminde işlenir. Bu fark, React Native'i React'ten ayıran en temel noktadır.

React ile React Native arasındaki temel fark nedir?

React bir kütüphanedir, React Native bir çerçevedir. React tarayıcıda çalışan web arayüzleri üretir. React Native, telefonun işletim sistemi üzerinde çalışan native uygulamalar üretir. İkisi de aynı bileşen tabanlı mantığı kullanır, ama çıktıları farklıdır.

Özellik	React	React Native
Çalışma ortamı	Tarayıcı	iOS / Android işletim sistemi
Üretilen çıktı	Web sayfası	Native mobil uygulama
Arayüz bileşenleri	div, span, button	View, Text, TouchableOpacity
Stil yöntemi	CSS veya CSS-in-JS	StyleSheet (JavaScript içinde)
Dağıtım yeri	Web sunucusu	App Store / Google Play
Kod paylaşım oranı	Web projeleri arasında yüksek	iOS ve Android arasında yüksek

React hangi projelerde işe yarar?

React, kurumsal web panelleri, e-ticaret siteleri ve tek sayfa uygulamalar için uygundur. Sunucu tarafı render seçenekleriyle SEO uyumlu siteler kurulabilir. Next.js gibi çerçevelerle birlikte kullanıldığında arama motorları içeriği daha kolay okur.

React Native hangi projelerde işe yarar?

React Native, hem iOS hem Android için hızlı çıkış yapmak isteyen ekiplere uygundur. Tek ekip, tek kod tabanıyla iki platformu birlikte yönetir. Kamera, konum, bildirim gibi native özellikler eklenti kütüphaneleriyle kolayca bağlanır.

React Native uygulamalar nasıl derlenir?

React Native projesi, Metro adlı paketleyici ile JavaScript kodunu paketler. Yayın aşamasında bu kod, platformun kendi derleme araçlarıyla gerçek bir uygulama paketine dönüştürülür. iOS için .ipa, Android için .apk veya .aab dosyası oluşur. Kullanıcı, uygulama mağazasından bu paketi indirir.

Geliştirme sırasında Metro, değişiklikleri anında telefona veya emülatöre yansıtır. Bu sayede geliştirici, kodu her seferinde baştan derlemek zorunda kalmaz.

Performans farkı nereden kaynaklanır?

React ile yazılan web sayfası, tarayıcının DOM yapısı üzerinde çalışır. React Native ise JavaScript ile native taraf arasında bir köprü kullanır. Eski mimaride bu köprü, veri alışverişini bazen yavaşlatıyordu. Yeni mimari, Fabric ve JSI ile bu köprüyü kaldırıp doğrudan iletişim kurar.

Basit listeler ve formlar için fark hissedilmez. Ağır animasyon, kamera işleme veya oyun mantığı gerektiren uygulamalarda tam native kod daha hızlı çalışır. React Native, böyle durumlar için native modül yazmayı da destekler.

Öğrenme eğrisi nasıl değişir?

React bilen bir geliştirici, React Native'e nispeten çabuk uyum sağlar. Bileşen, state ve props gibi kavramlar aynı kalır. Native modül entegrasyonu, Xcode veya Android Studio kurulumu ek öğrenme gerektirir. Platforma özgü hata ayıklama, web deneyiminden farklı beceri ister.

Kod paylaşımı ne kadar mümkün?

Aynı iş mantığını taşıyan kodlar, React ve React Native arasında kısmen paylaşılabilir. API çağrıları, veri işleme fonksiyonları ve state yönetimi genellikle ortak yazılabilir. Arayüz bileşenleri ise platforma özel kalır; web bileşeni mobilde doğrudan çalışmaz.

Monorepo yapıları, bu paylaşımı kolaylaştırır. İş mantığı ayrı bir pakette tutulur, hem web hem mobil proje bu paketi içe aktarır.

State yönetimi React ve React Native'de nasıl işler?

İki platform da aynı state yönetim kütüphanelerini destekler. Redux, Zustand ve Context API her ikisinde de kullanılabilir. Bu ortaklık, iş mantığının web ve mobil arasında taşınmasını kolaylaştırır.

Test süreçleri nasıl farklılaşır?

Jest, hem React hem React Native projelerinde birim test için kullanılır. Web tarafında tarayıcı testleri için Cypress veya Playwright tercih edilir. Mobil tarafta ise Detox gibi araçlar gerçek cihaz veya emülatör üzerinde uçtan uca test yapar.

Hangi büyük uygulamalar React Native kullanıyor?

Facebook, Instagram ve Discord uygulamalarının bazı bölümleri React Native ile yazılmıştır. Shopify ve Coinbase da mobil uygulamalarında bu çerçeveyi kullanır. Söz konusu örnekler, çerçevenin büyük ölçekli projelerde de tercih edildiğini gösterir.

Native uygulamaya ne zaman geçilmeli?

Uygulama, donanıma çok yakın işlem yapıyorsa native koda geçmek gerekebilir. Yoğun grafik işleme, gerçek zamanlı video düzenleme veya karmaşık oyun motoru örnek verilebilir. Böyle senaryolarda Swift ve Kotlin gibi native diller daha iyi kontrol sağlar.

Küçük ve orta ölçekli çoğu ticari uygulama için bu geçiş gerekmez. React Native'in native modül desteği, çoğu ihtiyacı zaten karşılar.

React Native projeye maliyeti nasıl etkiler?

Tek kod tabanı, iki ayrı native ekip kurmaktan daha az maliyetli olur. Geliştirme süresi kısalır, test süreçleri sadeleşir. Ancak platforma özgü performans sorunları, bazı durumlarda ek geliştirme günü gerektirebilir.

React ve React Native aynı projede kullanılabilir mi?

Web ve mobil tarafı olan bir ürün için React ve React Native birlikte planlanabilir. İş mantığı ortak bir pakette tutulur, arayüz katmanı platforma göre ayrı yazılır. React Native for Web gibi çözümler, bazı bileşenleri iki platformda çalıştırmayı da dener.

Bu yaklaşım her projeye uygun değildir. Küçük ekipler için karmaşıklığı artırabilir, büyük ekipler için ise kod tekrarını azaltır.

Stil ve arayüz bileşenleri nasıl farklılaşır?

React'te stil, CSS dosyaları, Sass veya styled-components ile yazılır. Tarayıcı bu stilleri doğrudan render eder.

React Native'de CSS yoktur. Stiller JavaScript nesnesi olarak tanımlanır ve Flexbox mantığıyla çalışır. StyleSheet.create fonksiyonu bu nesneleri optimize eder. NativeBase ve React Native Paper, hazır bileşen setleri sunar. Web tarafında Tailwind CSS benzeri araçlar daha yaygındır. İki ortamda bileşen mantığı aynıdır; sadece stil söz dizimi değişir.

Üçüncü parti kütüphane desteği nasıl karşılaştırılır?

npm üzerinde React için milyonlarca paket bulunur. Web odaklı kütüphanelerin çoğu doğrudan çalışır.

React Native'de her paket otomatik uyumlu değildir. Native modül gerektiren paketler ek yapılandırma ister. Örneğin react-native-camera veya react-native-maps, platforma özgü kurulum adımları içerir. Expo kullanılan projelerde bu kurulum büyük ölçüde otomatikleşir. Kütüphane seçerken güncelleme sıklığına bakmak, ileride uyumluluk sorunu yaşamamak için önemlidir.

Hata ayıklama süreçleri hangi araçlarla yapılır?

React geliştiricileri, tarayıcının Geliştirici Araçları'nı ve React Developer Tools eklentisini kullanır. Bileşen ağacı, props ve state anlık izlenir.

React Native'de Flipper aracı benzer işlevi mobilde sağlar. Ağ istekleri, loglar ve performans metrikleri tek ekranda görünür. Reactotron gibi bağımsız araçlar da tercih edilir. Gerçek cihazda test ederken Xcode veya Android Studio konsolu ek bilgi verir. Web hata ayıklaması genelde daha hızlıdır; yeniden derleme beklemek gerekmez.

Güncelleme ve sürüm yönetimi nasıl işler?

Web projesinde React sürümü yükseltildiğinde tarayıcı yeni kodu otomatik çalıştırır. React Native'de durum farklıdır.

Native katman değiştiğinde uygulama mağazadan yeniden onaylanmalıdır. CodePush gibi servisler, JavaScript tarafındaki güncellemeleri mağaza onayı olmadan kullanıcıya ulaştırır. Native kod değişmediği sürece bu yöntem işe yarar. Büyük sürüm geçişlerinde bağımlılık uyumluluğu kontrol edilmelidir. Bu kontrol, web tarafındaki geçişlerden daha fazla zaman alır.

Hangi geliştirme ortamları ve araçları kullanılır?

React geliştirmek için Node.js, bir kod editörü ve tarayıcı yeterlidir. Vite veya Create React App projeyi hızlıca ayağa kaldırır.

React Native projelerinde Android Studio ve Xcode gibi ek araçlar kurulmalıdır. Expo CLI, bu yükü azaltır ve emülatörsüz test etmeyi sağlar.

Araç	React	React Native
Paketleyici	Webpack / Vite	Metro
Zorunlu IDE	Yok	Xcode / Android Studio
Hızlı başlangıç	Create React App	Expo CLI

Topluluk desteği ve kaynak bulma kolaylığı nasıl?

React 2013'ten beri geliştiriliyor; Stack Overflow'daki soru sayısı yüz binleri geçiyor. Çözüm bulma süresi genellikle kısadır.

React Native 2015'te çıktı; topluluğu küçük ama aktif. Platforma özgü hatalarda çözüm bulmak daha fazla zaman alabilir. GitHub üzerindeki açık kaynak katkıları iki teknolojide de düzenli artıyor. Meta'nın doğrudan desteği, her iki projenin sürdürülebilirliğini güvence altına alıyor.

Uygulama güvenliği açısından fark var mı?

Web uygulamalarında XSS ve CSRF gibi tarayıcıya özgü açıklar öncelikli risktir. React bu konuda ekstra koruma sunmaz; geliştirici önlem almalıdır.

React Native uygulamalarında kaynak kodun tersine mühendislikle incelenmesi daha büyük bir tehdittir. ProGuard ve Hermes motoru, JavaScript kodunu belli ölçüde gizler. Hassas API anahtarları hiçbir durumda istemci tarafında tutulmamalıdır. Güvenlik önlemleri platforma göre değişir; temel prensip aynıdır: hassas veriyi sunucuda tutmak.

Erişilebilirlik desteği nasıl sağlanır?

React'te erişilebilirlik, standart HTML etiketleri ve ARIA nitelikleriyle sağlanır. Ekran okuyucular bu etiketleri doğrudan tanır.

React Native'de accessible ve accessibilityLabel props'ları benzer işlevi görür. iOS'ta VoiceOver, Android'de TalkBack bu etiketleri okur. Web tarafında Lighthouse aracı erişilebilirlik puanı verir; mobilde bu ölçüm daha manuel yapılır. İki platformda da test, gerçek kullanıcı senaryolarıyla desteklenmelidir.

Animasyon ve gesture işlemleri nasıl uygulanır?

React'te animasyon, CSS transition ve keyframe kurallarıyla veya Framer Motion gibi kütüphanelerle yapılır. Tarayıcının render motoru işi büyük ölçüde üstlenir. React Native'de Animated API ve Reanimated kütüphanesi kullanılır; hareketler native thread üzerinde çalışır.

Gesture Handler kütüphanesi kaydırma, sıkıştırma ve dokunma hareketlerini yönetir. 60 FPS hedefine ulaşmak için Reanimated tercih edilir; JavaScript thread'i bloke olsa bile animasyon akıcı kalır. Web tarafında bu ayrım yoktur, tarayıcı GPU hızlandırmasını otomatik uygular.

Uygulama dosya boyutu ve depolama kullanımı nasıl kıyaslanır?

React ile üretilen bir web sayfası genellikle birkaç yüz kilobayt ile birkaç megabayt arasında yüklenir; kullanıcı ekstra bir şey indirmez. React Native ile derlenen bir APK veya IPA dosyası çoğu zaman 20-50 megabayt aralığında olur.

Bu boyut, JavaScript motorunu ve native kütüphaneleri barındırdığı için web sayfasından belirgin biçimde büyüktür. Hermes motoru ve APK bölme (app bundle) teknikleri boyutu küçültmede yardımcı olur. Web tarafında ise kod bölme (code splitting) aynı amaca hizmet eder.