React Native ile Cross-Platform Mobil Uygulama Geliştirme Rehberi

React Native nedir, hangi sorunu çözer?

React Native, JavaScript ve TypeScript ile yazdığınız tek bir kod tabanından hem iOS hem Android için gerçek yerel (native) arayüz bileşenleri üreten bir çerçevedir. Web'deki React mantığını taşır: arayüzü bileşenlere bölersiniz, her bileşen kendi durumuna ve gelen verilere göre yeniden çizilir. Fark, ekranda bir tarayıcı sayfası değil, platformun kendi düğme, liste ve metin bileşenlerinin görünmesidir.

Çözdüğü ana sorun, iki ayrı mobil ekibin iki ayrı kod tabanını paralel yürütme maliyetidir. Ürün mantığını, ağ katmanını ve ekranların büyük bölümünü bir kez yazar, platforma özgü kısımları gerektiğinde ayrı yazarsınız. Bu, özellikle küçük ve orta ölçekli ekiplerde teslim hızını ve bakım yükünü belirgin biçimde etkiler. Karşılığında platformun en yeni özelliklerine erişim bazen bir köprü (native modül) yazmayı gerektirir.

Başlamadan önce hangi temel bilgiler gerekir?

React Native'e geçmeden önce şu zeminler olmalı:

• JavaScript ya da TypeScript: değişkenler, fonksiyonlar, diziler üzerinde işlemler, asenkron kod (promise ve async/await) rahat okunabilmeli.
• React'in temel fikri: bileşen, props, state ve yan etkilerin yönetimi. Web'de React yazmış biri için geçiş kısadır; hiç yazmamış biri için önce bu fikri oturtmak gerekir.
• Mobil arayüz mantığı: dokunma etkileşimi, kaydırılan listeler, ekranlar arası gezinme ve farklı ekran boyutlarına uyum.

Swift ya da Kotlin bilmek zorunlu değildir, ancak ileri aşamada yerel bir kütüphaneyi uygulamaya bağlarken bu dillerin temel okunabilirliği işinizi kolaylaştırır. Bilgisayarınızda bir kod düzenleyici, Node.js ortamı ve en az bir simülatör ya da emülatör kurulu olmalıdır.

İlk uygulamadan mağazaya adım adım yol

Bir React Native projesi tipik olarak şu sırayla ilerler:

• Proje iskeleti: Expo ya da çıplak (bare) React Native şablonuyla proje oluşturulur. Yeni başlayanlar için Expo, kurulum yükünü azalttığı için pratik bir giriştir.
• Ekranlar ve gezinme: Bir gezinme (navigation) kütüphanesiyle ekranlar arası geçişler, sekmeler ve yığınlar tanımlanır.
• Bileşen sistemi: Liste, form, düğme, modal gibi tekrar eden parçalar ortak bileşenlere ayrılır; platforma göre değişen davranışlar (örneğin klavye, güvenli alan) ele alınır.
• Veri akışı: Sunucudan veri çekme, önbellekleme ve ekranlar arası durum paylaşımı kurulur.
• Kimlik doğrulama: Oturum açma, jetonların güvenli saklanması ve yenilenmesi eklenir.
• Test ve derleme: Birim ve bileşen testleri yazılır, ardından bulut derleme hizmetiyle (örneğin EAS Build) yayın paketleri üretilir.
• Mağaza yayını: Uygulama mağaza kurallarına göre hazırlanır, gönderilir ve sonraki sürümler için güncelleme akışı kurulur.

Durum yönetimi, ağ ve native modüller

Uygulama büyüdükçe en çok zorlayan konu veri akışıdır. Küçük uygulamada bileşenin kendi durumu yeter; ekranlar arası paylaşılan veri için bir durum yönetimi yaklaşımı (context, hafif bir durum kütüphanesi ya da sunucu verisini yöneten bir sorgu kütüphanesi) seçilir. Kural şudur: sunucudan gelen veri ile yalnızca arayüze ait geçici durumu ayrı yönetin. İkisini aynı depoda karıştırmak önbellek hatalarının başlıca nedenidir.

Ağ katmanında istek zaman aşımı, bağlantı kopması ve yeniden deneme senaryolarını baştan düşünün. Mobil kullanıcı sık sık zayıf bağlantıda kalır; çevrimdışı iken ne gösterileceği tasarım kararıdır.

Kamera, biyometrik doğrulama, Bluetooth gibi cihaz özellikleri için çoğu zaman hazır bir kütüphane vardır. Hazır çözüm yoksa ya da özel bir yerel SDK kullanılacaksa Swift ve Kotlin tarafında küçük bir modül yazıp JavaScript'e köprülenir. Bu noktada eski ve yeni mimari arasındaki farkı bilmek, kütüphane uyumluluğunu değerlendirirken işe yarar.

Örnek senaryo: sipariş takip uygulaması

Örneğin bir lojistik firması müşterilerine sipariş takip uygulaması yapmak istiyor. Ekranlar: giriş, sipariş listesi, sipariş detayı ve bildirim ayarları. Giriş ekranında kimlik doğrulama yapılır ve jeton cihazın güvenli depolama alanında saklanır. Sipariş listesi sunucudan sayfalı çekilir; aşağı çekince yenileme ve uzun listelerde sanallaştırılmış liste bileşeni kullanılır.

Detay ekranında harita ve durum çizelgesi gösterilir. Haritayı bağlamak için hazır bir kütüphane seçilir, bildirimler için platformun bildirim servisleri entegre edilir. Bu kurgunun büyük kısmı iki platformda ortak çalışır; yalnızca bildirim izinlerinin istenme biçimi gibi küçük parçalar platforma özel koşul gerektirir. Ekip, tek bir kod tabanı üzerinde test ve sürüm sürecini bir kez kurar.

Performans ve test: yayın öncesi kontrol listesi

Performans sorunlarının çoğu birkaç kalıptan çıkar:

• Gereksiz yeniden çizim: Büyük bileşen ağaçlarında her durum değişiminde her şeyin yeniden çizilmesi. Bileşenleri bölmek ve ezberleme (memoization) tekniklerini yalnız ölçüm sonrası uygulamak çözümün çoğunu verir.
• Büyük listeler: Tüm öğeleri aynı anda render etmek yerine sanallaştırılmış liste bileşenleri kullanın.
• Ağır görseller: Yeniden boyutlandırılmamış büyük görseller bellek ve akıcılık sorununa yol açar.
• Ana iş parçacığını meşgul eden hesaplamalar: Ağır işleri arayüz akışından ayırın.

Testte üç katman düşünün: saf mantık için birim testi, bileşenlerin davranışı için bileşen testi, kritik kullanıcı yolculukları için uçtan uca test. Yayından önce gerçek cihazlarda, farklı ekran boyutlarında ve zayıf bağlantı koşullarında elle de dolaşın.

Sık yapılan hatalar ve nasıl kaçınılır?

• Her şeyi Expo ya da her şeyi çıplak projeyle çözmeye çalışmak: Gereksinim netleşmeden araç seçimini kilitlemeyin; geçiş yolları vardır ama planlı olmak zaman kazandırır.
• Platform farklarını görmezden gelmek: Geri tuşu, klavye davranışı, izin akışları ve yazı tipleri iki platformda farklı davranır. Tek platformda test edip diğerini son güne bırakmak tipik tuzaktır.
• Güvenlik: Jetonları düz metin olarak saklamak ya da gizli anahtarları uygulama paketine gömmek ciddi risk yaratır.
• Kütüphane bağımlılığını gözetmemek: Bakımı bırakılmış bir kütüphane, platform güncellemesinde uygulamanızı kırabilir. Seçerken bakım durumuna ve sürüm uyumuna bakın.
• Test ve derleme hattını sona bırakmak: Mağaza yayın süreci ilk kez denendiğinde sürpriz çıkar; erken ve küçük bir sürümle süreci baştan deneyin.

Mindset programlarında nerede çalışılır?

Mindset'in React Native ile Cross-Platform Mobil programı, bu sayfada anlatılan akışın karşılığı olan modülleri içerir: React Native Mimarisi ve Yeni Mimari, Bileşen Sistemi ve Platform Özellikleri, State Yönetimi ve Veri Akışı, Ağ, Kimlik Doğrulama ve Güvenlik, Native Modüller ve Platform Köprüsü, Performans Optimizasyonu ve Sorun Giderme, Test, EAS Build ve Mağaza Yayını. Başlangıç noktasını kendi seviyenize göre seçerek modül sırasını izleyebilirsiniz.