React Native Nedir? Platformlar Arası Mobil Uygulama Programlama İçin Eksiksiz Kılavuz

Bu bölüm, React Native'in tanımından, kökeninden, temel çalışma prensiplerinden, açık avantaj ve dezavantajlarına kadar en kapsamlı genel bakışını sunacaktır. React Native'in mobil uygulama geliştirme için neden en iyi tercih haline geldiğini ve diğer popüler teknolojilerden nasıl farklılaştığını anlayacaksınız.

Genel Bakış: ReactJS'den React Native'e

React Native, Facebook (şimdiki adıyla Meta) tarafından geliştirilen ve geliştiricilerin tek bir kod tabanından hem iOS hem de Android için mobil uygulamalar geliştirmelerine olanak tanıyan açık kaynaklı bir çerçevedir. React Native'de kullanılan temel dil JavaScript'tir ve JSX (JavaScript XML) sözdizimi, JavaScript içinde HTML benzeri kod yazmanıza olanak tanıyan genişletilmiş bir sözdizimidir.

React Native'in kökleri, web uygulamaları için kullanıcı arayüzleri (UI) oluşturmaya yarayan bir JavaScript kütüphanesi olan "kardeşi" ReactJS'ye kadar uzanıyor. ReactJS'nin bileşen tabanlı geliştirme modelinin başarısını ve verimliliğini fark eden Facebook, aynı felsefeyi mobil uygulama geliştirmeye de uygulamaya çalıştı. Sonuç, React'in gücünü mobil dünyaya taşıyan React Native oldu. Bu, ReactJS'ye zaten aşinaysanız, React Native programlamaya geçişin çok daha kolay olacağı anlamına geliyor.

Temel çalışma prensibi: "Bir kez öğren, her yerde yaz"

React Native'in ünlü sloganı "Bir kez öğren, her yerde yaz"dır. Bu, tam olarak nasıl çalıştığını yansıtır. JavaScript kodunu her platform için yerel koda derlemek yerine (diğer bazı framework'ler gibi), React Native bir "Köprü" temelinde çalışır.

Uygulamanız çalışırken, JavaScript kodunuz ayrı bir iş parçacığında (JS İş Parçacığı) çalışır. Kullanıcı arayüzünü oluşturması veya cihaz özelliklerine (kamera, GPS gibi) erişmesi gerektiğinde, JavaScript kodu Köprü aracılığıyla yerel iş parçacığına (Yerel İş Parçacığı) eşzamansız iletiler gönderir. Yerel iş parçacığı bu iletileri yorumlar ve işletim sisteminin yerel kullanıcı arayüzü bileşenlerini (örneğin, iOS'ta UIView, Android'de View) kullanarak bunları ekranda görüntüler.

Bu mekanizmanın iki önemli faydası vardır:

1. Sorunsuz kullanıcı deneyimi: Arayüz gerçek yerel bileşenler kullanılarak oluşturulduğundan, kullanıcılar makinenin yerel dilinde yazılmış bir uygulama kullanıyormuş gibi "gerçek" ve tanıdık hissedecekler.

2. Yüksek performans: Mantık ağırlıklı görevler, yerel kullanıcı arayüzü iş parçacığını etkilemeden JS iş parçacığında işlenir ve bu da uygulamanın daha duyarlı olmasını sağlar.

React Native'i diğer teknolojilerle karşılaştırma

React Native'in nerede durduğunu daha iyi anlamak için onu diğer teknolojilerle karşılaştırmak önemlidir.

• React Native ve ReactJS: Bu en sık sorulan sorudur. ReactJS, sanal HTML etiketleri kullanarak web için kullanıcı arayüzleri oluşturmak için kullanılan bir kütüphanedir.

  , . Bu arada, React Native, , gibi yerel kullanıcı arayüzüne eşlenmiş bileşenler kullanarak mobil uygulamalar için arayüzler oluşturmak için kullanılır. Her ikisi de aynı JSX sözdizimini, bileşen kavramını, özellikleri ve durumu paylaşır. Dolayısıyla, ReactJS ve React Native'in aynı evden gelen iki kardeş olduğu ancak farklı amaçlara hizmet ettiği söylenebilir.

• React Native ve Flutter: Flutter, Google tarafından geliştirilen React Native'in en doğrudan rakibidir.

  • Dil: React Native JavaScript/TypeScript kullanırken, Flutter Dart kullanır.

  • Mimari: React Native, yerel platformla iletişim kurmak için Bridge kullanır. Flutter, işletim sisteminin yerel kullanıcı arayüzü bileşenlerini kullanmadan, tüm arayüzünü Skia grafik motoruyla çizer. Bu, Flutter'a çok yüksek grafik performansı ve tüm cihazlarda tamamen tutarlı bir arayüz sağlar, ancak bazen yerel uygulamalarla karşılaştırıldığında "tuhaf" bir his yaratabilir.

• React Native ve Native Programlama (Swift/Kotlin):

  • Performans: Yerel programlama her zaman en verimli olanıdır çünkü kod doğrudan işletim sistemi için yazılır ve optimize edilir. React Native, çok verimli olmasına rağmen, Bridge adlı bir ara katmana sahiptir, bu nedenle son derece karmaşık veya grafiksel olarak zorlu görevler için daha yavaş olabilir.

  • Zaman ve maliyet: Bu, React Native'in en önemli avantajıdır. iOS ve Android için iki ayrı ekip oluşturup yönetmek yerine, her iki platform için de geliştirme yapacak tek bir JavaScript ekibine ihtiyacınız olur; bu da önemli ölçüde zaman ve maliyet tasarrufu sağlar.

Yeni başlayanlar için temel seviyeden ileri seviyeye React Native öğrenme yolu

React Native'i fethetmek için ayrıntılı, adım adım bir yol haritası alacaksınız. Bilimsel olarak tasarlanmış bu React Native öğrenme yolu, temel bilgilerden başlayarak, eksiksiz bir uygulamayı güvenle oluşturmaya, durumu yönetmeye, optimize etmeye ve pazara sunmaya kadar uzanır.

Aşama 1: Javascript ve ReactJS temellerinden ustalığa

Bu en önemli adımdır ve çoğu kişi tarafından genellikle gözden kaçırılır. React Native, bağımsız bir teknoloji değildir; JavaScript ve React üzerine kuruludur. Sağlam bir temel olmadan React Native öğrenmeye çalışırsanız, zorlanırsınız.

• JavaScript (ES6+): Modern JavaScript kavramlarını sağlam bir şekilde kavramanız gerekir, bunlar arasında şunlar yer alır:

  • Değişkenler ve kapsam: let , const , var .

  • Veri türleri: Dizi, Nesne.

  • Fonksiyon: Ok fonksiyonları ( => ).

  • Asenkron programlama: Promises, async/await.

  • Yapıbozum, Yayılma/Dinlenme operatörleri.

  • Modüller: içe aktarma, dışa aktarma.

• ReactJS: JavaScript'te ustalaştıktan sonra, React'in temel kavramlarını öğrenmeniz gerekir. İşte React'i öğrenmek için en etkili yol haritası:

  • JSX: Kullanıcı arayüzü yazmak için kullanılan sözdizimi.

  • Bileşenler: Fonksiyonel Bileşenler ve Sınıf Bileşenleri (Günümüzde Fonksiyonel Bileşenler daha popülerdir).

  • Destekler: Ana bileşenden çocuğa veri nasıl aktarılır.

  • Durum: Bir bileşenin iç durumunun nasıl yönetileceği.

  • useState , useEffect , useContext gibi Yaşam Döngüsü Yöntemleri (Sınıf Bileşenlerinde) ve React Kancaları (Fonksiyonel Bileşenlerde).

Aşama 2: React Native'e Başlarken - Ortam ve Araçlar

Temeli oluşturduktan sonra React Native dünyasına dalmaya başlayabilirsiniz.

• Geliştirme Ortamlarını Anlamak: İki ana yaklaşım arasındaki farkları öğrenin:

  • React Native CLI (Komut Satırı Arayüzü): Proje üzerinde tam kontrol sağlar ve özel yerel kod yazmanıza olanak tanır. Karmaşık projeler için uygundur.

  • Expo: Geliştirmeyi kolaylaştıran, React Native tabanlı bir araç ve hizmet seti. Android Studio veya Xcode kurulumuna gerek yok. Yeni başlayanlar ve yerel kodla derin entegrasyon gerektirmeyen projeler için ideal.

• Ortam Kurulumu: Seçiminize bağlı olarak, detaylı talimatları izleyerek ortamı manuel olarak kurun ve ilk projenizi oluşturun.

Aşama 3: Arayüzü ve kullanıcı etkileşimini oluşturun

Bu, fikirlerinizi telefonunuzda gerçek arayüzlere nasıl dönüştüreceğinizi öğreneceğiniz aşamadır.

• Temel Bileşenler: , , gibi en temel bileşenlerle tanışın , , .

• Stil: CSS'e benzer ancak JavaScript sözdizimine sahip StyleSheet API'sini kullanarak bileşenleri nasıl şekillendireceğinizi öğrenin. Birden fazla ekran boyutunda esnek ve duyarlı düzenler oluşturmak için Flexbox'ı öğrenin.

• Listeler: ve kullanarak veri listelerini nasıl etkili bir şekilde görüntüleyeceğinizi öğrenin.

• Gezinme: Bu, her uygulamanın olmazsa olmaz bir parçasıdır. Stack Navigator, Tab Navigator (createMaterialTopTabNavigator) ve Drawer Navigator dahil olmak üzere ekranlar arasında gezinme akışları oluşturmak için en popüler kütüphane olan React Navigation'ı nasıl kullanacağınızı öğrenin.

Aşama 4: Verileri ve uygulama durumunu yönetme

Uygulamalar karmaşıklaştıkça durum ve veriyi yönetmek zorlaşıyor.

• Durum Yönetimi: Aşağıdakiler gibi küresel durum yönetimi çözümlerini keşfedin:

  • React Context: React'ın küçük ve orta ölçekli uygulamalar için uygun, yerleşik çözümü.

  • Redux / Redux Toolkit: Büyük uygulamalar için uygun, en popüler ve güçlü durum yönetim kütüphanesi.

  • MobX, Zustand gibi diğer çözümler.

• API'lerle Çalışma: Fetch API'sini veya axios gibi kütüphaneleri kullanarak verileri alıp göndermek için sunucudan API'leri nasıl çağıracağınızı öğrenin.

• Yerel Depolama: Basit ve etkili bir anahtar-değer depolama çözümü olan AsyncStorage ile verilerin kullanıcı cihazlarında nasıl depolanacağını öğrenin.

Aşama 5: Uygulamayı Optimize Etme ve Dağıtma

Uygulamanızı oluşturduktan sonra atmanız gereken son adım, uygulamanın sorunsuz çalıştığından emin olmak ve kullanıcılarınızın kullanımına sunmaktır.

• Performans: Gereksiz yeniden işlemeyi önlemek için useMemo, useCallback, React.memo gibi optimizasyon tekniklerini öğrenin, FlatList performansını optimize edin ve Flipper ile performans sorunlarını giderin.

• Dağıtım: Bir uygulamayı .apk (Android) ve .ipa (iOS) dosyasına dönüştürme sürecini ve uygulamanızı Google Play Store ve Apple App Store'a koyma adımlarını öğrenin.

Ortamı kurma ve ilk React Native projesini oluşturma kılavuzu

Özet: Bu bölüm, kendi geliştirme ortamınızı kurmanıza ve ilk "Merhaba Dünya" projenizi başarıyla çalıştırmanıza yardımcı olacak ayrıntılı ve uygulamalı bir kılavuz sunar. En uygun seçimi yapmanıza ve kodlama yolculuğunuza başlamanıza yardımcı olmak için iki popüler yöntem olan Expo ve React Native CLI'yi ayrıntılı bir şekilde analiz edeceğiz.

Ortam Seçimi: React Native CLI ve Expo - Hangisini Seçmeli?

Başlamadan önce önemli bir karar vermelisiniz: Expo mu yoksa React Native CLI mı kullanacaksınız? Bunlar, React Native uygulamaları geliştirmenin iki ana yoludur ve her birinin kendine özgü avantajları ve dezavantajları vardır.

• Expo (Yeni başlayanlar için önerilir):

  • Avantaj:

    • Hızlı kurulum: Sadece Node.js ve Expo CLI'yi kurmanız yeterli. Android Studio veya Xcode'u (ki oldukça büyük) kurmanıza gerek yok.

    • Kolay Geliştirme: Expo Go uygulaması üzerinden QR kodunu tarayarak uygulamayı doğrudan gerçek telefonunuzda çalıştırabilirsiniz.

    • Dahili API'ler: Expo, kameralara, sensörlere, anlık bildirimlere erişimi kolaylaştıran bir dizi optimize edilmiş ve test edilmiş kütüphane (SDK) sağlar.

  • Dezavantajları:

    • Sınırlamalar: Expo SDK'sına dahil olmayan ve yerel bağlantı gerektiren React Native kitaplıklarını kullanamazsınız. Expo'nun artık bir nebze yardımcı olacak bir Expo geliştirme istemcisi olmasına rağmen, yine de bazı sınırlamalar mevcuttur.

    • Daha büyük uygulama boyutu: Expo ile oluşturulan uygulamalar başlangıçta genellikle biraz daha büyük boyutta olur.

• React Native CLI (Profesyonel ve karmaşık projeler için):

  • Avantaj:

    • Maksimum esneklik: Proje üzerinde tam kontrole sahip olursunuz, herhangi bir yerel kütüphaneyi entegre edebilir ve gerektiğinde kendi yerel modüllerinizi yazabilirsiniz.

    • Uygulama boyutunu optimize edin: Yalnızca ihtiyaç duyduğunuz şeyleri paketleyerek nihai uygulamanın daha hafif olmasını sağlayın.

  • Dezavantajları:

    • Karmaşık kurulum: Android Studio'nun (Android için) ve Xcode'un (iOS için) kurulumunu ve yapılandırmasını gerektirir; bu da zaman alıcı ve hataya açık bir işlemdir.

    • Sanal makineye/gerçek cihaza bağlıdır: Geliştirme için sanal makineyi (emülatör/simülatör) çalıştırmanız veya gerçek cihazı kabloyla bağlamanız gerekir.

Sonuç: React Native'e yeniyseniz veya çok karmaşık olmayan bir proje üzerinde çalışıyorsanız, Expo ile başlayın. Bu, ortam yapılandırma sorunlarıyla dikkatinizin dağılmadan React Native mantığını öğrenmeye odaklanmanıza yardımcı olacaktır.

Expo (Expo Go, Expo Dev Client) ile detaylı talimatlar

Rica etmek:

1. Node.js'yi (LTS sürümü) yükleyin.

2. Expo Go uygulamasını Android veya iOS telefonunuza yükleyin.

İzlenecek adımlar:

1. Expo CLI'yi yükleyin: Terminal'i (macOS/Linux'ta) veya Komut İstemi/PowerShell'i (Windows'ta) açın ve aşağıdaki komutu çalıştırın:

   npm install -g expo-cli

2. Yeni proje oluştur:

   expo init MyFirstApp

   İstendiğinde, şablon boş (boş bir proje için) veya sekmeler (sekme gezinme çubuğu olan bir proje için) seçeneğini belirleyin. Ardından, proje klasörüne gidin:

   cd MyFirstApp

3. Projeyi çalıştır:

   npm başlangıcı

   Bu komut Metro Bundler'ı başlatacak ve terminalde bir QR kodu görüntüleyecektir.

4. Uygulamayı telefonunuzda görüntüleyin: Telefonunuzda Expo Go uygulamasını açın, "QR Kodunu Tara"yı seçin ve terminalde QR kodunu tarayın. Uygulamanız telefonunuza indirilecek ve çalışacaktır. İşte bu kadar basit!

React Native CLI (Android Studio, Xcode) ile detaylı talimatlar

Bu süreç daha karmaşıktır ve her işletim sistemi için ayrı bir yapılandırma gerektirir.

Genel gereksinimler:

1. Node.js'yi (LTS sürümü) yükleyin.

2. Watchman'ı yükleyin (macOS için önerilir).

Android için yükleyin (Windows/macOS/Linux'ta):

1. Java Development Kit'i (JDK) yükleyin.

2. Android Studio'yu yükleyin.

3. Android Studio'da SDK Yöneticisi'ne gidin ve gerekli Android SDK Platformunu yükleyin.

4. ANDROID_HOME ortam değişkenini yapılandırın.

5. Android Studio'dan bir Android sanal makinesi (AVD) oluşturun ve başlatın.

iOS için yükleyin (sadece macOS):

1. Xcode’u App Store’dan yükleyin.

2. Xcode'da Komut Satırı Araçlarını Kurun.

3. CocoaPods'u yükleyin.

Projeyi oluşturun ve çalıştırın:

1. Yeni proje oluştur:

   npx react-native init MyFirstCliApp

2. Android'de çalışır:

   Android sanal makinenizin çalıştığından veya fiziksel bir cihazın bağlı olduğundan emin olun. Ardından şu komutu çalıştırın:

   npx react-native run-android

3. iOS'ta çalışır (sadece macOS):

   iOS sanal makinenizin çalıştığından emin olun. Ardından şu komutu çalıştırın:

   npx react-native run-ios

İlk derleme biraz zaman alabilir. Başarılı olduğunda, sanal makinede varsayılan React Native uygulamasının çalıştığını göreceksiniz.

React Native'de Bilmeniz Gereken Temel Kavramlar

Özet: Bu bölüm, her React Native uygulamasının yapı taşlarını ele alacaktır. Bileşenlerin, Prop'ların ve Durumun doğasını, birlikte nasıl çalıştıklarını, arayüzünüzü etkili bir şekilde nasıl şekillendireceğinizi ve uygulamanızdaki kullanıcı olaylarını ve karmaşık gezinmeyi nasıl yöneteceğinizi anlayacaksınız.

Bileşenler, Destekler ve Durum: Her Uygulamanın Temeli

ReactJS gibi, React Native'deki her şey bir Bileşendir. Bir bileşen, kendi içinde bütünleşik, yeniden kullanılabilir bir kullanıcı arayüzü parçasıdır. Her ekranı, her düğmeyi, her giriş alanını bir bileşen olarak düşünebilirsiniz.

• Bileşenler: Arayüzün nasıl görünmesi gerektiğini tanımlamak için React öğelerini döndüren JavaScript fonksiyonları (İşlevsel Bileşenler) veya sınıflardır (Sınıf Bileşenleri).

• Özellikler (Properties): Üst bileşenden alt bileşene veri aktarmanın bir yolu. Özellikler salt okunur nesnelerdir, yani alt bileşen aldığı özellikleri değiştiremez. Yukarıdaki örnekte, başlık bir özelliktir.

• Durum: Bir bileşenin kendi kendine yönettiği ve zaman içinde değişebilen verilerdir. Durum değiştiğinde, bileşen arayüzü güncellemek için otomatik olarak yeniden oluşturulur. İşlevsel Bileşenler'de, durumu yönetmek için useState kancasını kullanırız.

Stil: Güzel ve esnek arayüzler oluşturun

React Native'de CSS kullanılmaz. Bunun yerine JavaScript kullanılarak stil oluşturulur. En yaygın yaklaşım, stilleri tanımlamak ve bunları bileşenin stil özelliğine uygulamak için StyleSheet.create kullanmaktır.

• StyleSheet: Performansı optimize etmeye ve daha temiz kod oluşturmaya yardımcı olur.

• Flexbox: Bu, React Native'deki ana düzen motorudur. Web'de Flexbox'a aşinaysanız, kendinizi evinizde hissedeceksiniz. Öğeleri esnek bir şekilde düzenlemenize ve birden fazla ekran boyutuna uyum sağlayan karmaşık arayüzleri kolayca oluşturmanıza olanak tanır.

Kullanıcı olay işleme (Metin Girişi, Dokunmalar, Geri İşleyici)

Mobil uygulamaların kullanıcılarla etkileşime girmesi gerekir. React Native güçlü bir olay sistemi sunar.

• Dokunmalar: TouchableOpacity, TouchableHighlight, Pressable gibi bileşenler, onPress, onLongPress gibi destekler aracılığıyla dokunma olaylarını, uzun basmaları vb. yönetmenize olanak tanır.

• Metin Girişi: Bu bileşen, kullanıcının metin girmesine olanak tanır. Metin değişikliği olayını yakalamak ve durumu buna göre güncellemek için onChangeText özelliğini kullanırsınız.

• BackHandler: Bu, kullanıcının fiziksel "Geri" düğmesine bastığında davranışı dinlemenizi ve özelleştirmenizi sağlayan Android'e özel bir API'dir. Uygulamadan çıkmadan önce bir onay iletişim kutusu görüntülemek veya karmaşık bir akışta önceki ekrana dönmek için kullanabilirsiniz.

React Navigation ile uygulama içi gezinme

Çoğu uygulamanın birden fazla ekranı vardır. Ekranlar arasındaki akışı yönetmeye navigasyon denir. En popüler ve önerilen kütüphane React Navigation'dır.

• NavigationContainer: Uygulamanın tüm gezinme yapısını sarmalayan kök bileşendir. Gezinme ağacını yönetir ve gezinme durumunu içerir.

• Gezginler: React Navigation, farklı akışlar oluşturmak için farklı türde gezginler sağlar:

  • Yığın Gezgini: Ekranlar üst üste istiflenir. Yeni bir ekrana geçtiğinizde, ekran en üste yerleştirilir. Geri döndüğünüzde ise kaldırılır. Bu en yaygın türdür.

  • Sekme Gezgini: Ekranın alt veya üst kısmında bir sekme çubuğu görüntüler ve farklı ekranlar arasında geçiş yapmanızı sağlar. createMaterialTopTabNavigator buna bir örnektir ve genellikle Android uygulamalarında görülen, ekranın üst kısmında bir sekme çubuğu oluşturur.

  • Çekmece Gezgini: Ekranın kenarından dışarı doğru kayan bir menü görüntüler.

Bu gezginleri birleştirmek, en modern uygulama gereksinimlerini karşılayan karmaşık gezinme akışları oluşturmanıza olanak tanır.

API'ler ve gelişmiş özellikler ile çalışma

Uygulamanızın yeteneklerini nasıl genişleteceğinizi keşfedin. Bu bölüm, AsyncStorage ile verileri yerel olarak verimli bir şekilde nasıl depolayacağınızı, BLEManager gibi kütüphaneler aracılığıyla cihaz donanımlarıyla nasıl etkileşim kuracağınızı, sohbet arayüzleri gibi karmaşık özellikler nasıl oluşturacağınızı ve VNPAY ödeme ağ geçidi gibi harici hizmetleri nasıl entegre edeceğinizi anlatacaktır.

AsyncStorage ile verileri yerel olarak depolayın

Basit verileri depolamanız ve kullanıcı uygulamayı kapattığında bile saklamanız gerektiğinde (örneğin, oturum açma belirteçlerini, kullanıcı ayarlarını, uygulama durumunu kaydetme), AsyncStorage tam size göre bir araçtır. Hem iOS hem de Android'de çalışan, şifrelenmemiş, eşzamansız bir anahtar-değer depolama sistemidir.

Web'deki localStorage gibi çalışır ancak tamamen eşzamansızdır, yani okuma/yazma işlemleri bir Promise döndürür.

• Ayar:

  npm install @react-native-async-storage/async-storage

• Kullanım örneği:

  AsyncStorage'ı '@react-native-async-storage/async-storage' adresinden içe aktarın; // Verileri kaydedin const storeData = async (value) => { try { await AsyncStorage.setItem( '@storage_Key' , value); } catch (e) { // kaydetme hatası } }; // Verileri okuyun const getData = async () => { try { const value = await AsyncStorage.getItem( '@storage_Key' ); if (value !== null ) { // daha önce depolanan değer } } catch (e) { // değeri okurken hata } };

Donanım ve sistem API entegrasyonu (BLEManager, Kamera, Coğrafi Konum)

Mobil uygulamaların asıl gücü, donanım ve işletim sistemi hizmetleriyle etkileşim kurabilme yeteneklerinde yatar. React Native, zengin bir kütüphane ekosistemi aracılığıyla bunu kolayca yapmanızı sağlar.

• Bluetooth Düşük Enerji (BLE): BLE cihazlarıyla (akıllı saatler, tıbbi cihazlar gibi) çalışmak için react-native-ble-manager (BLEManager) gibi kütüphaneleri kullanabilirsiniz. Bu kütüphane, BLE cihazlarına veri tarama, bağlanma, okuma ve yazma işlevleri sağlar.

• Kamera ve Fotoğraf Kütüphanesi: react-native-vision-camera veya react-native-image-picker gibi kütüphaneler, cihazın kamerasına erişerek fotoğraf çekmenize, video kaydetmenize veya kullanıcının kütüphanesinden fotoğraf/video seçmenize olanak tanır.

• Konum (Coğrafi Konum): react-native-geolocation-service kütüphanesi, haritalama, teslimat veya check-in uygulamaları için kullanışlı olan cihazın GPS konumuna erişim sağlar.

GiftedChat ile sohbet arayüzleri oluşturun

Sıfırdan bir sohbet arayüzü oluşturmak göz korkutucu bir iş olabilir. Neyse ki, topluluk GiftedChat'i geliştirdi; bu, dakikalar içinde tam özellikli bir sohbet arayüzü oluşturmanıza yardımcı olan güçlü ve kullanımı kolay bir kütüphane.

GiftedChat şu bileşenlere sahiptir:

• Sohbet balonu

• Avatarı göster

• Otomatik yeniden boyutlandırma giriş alanı

• Resim, video gönderin

• "daha fazla mesaj yükle" özelliği

• ...ve daha fazlası.

Tek yapmanız gereken mesaj verilerinizi belirli bir formatta sağlamak, gerisini GiftedChat halledecektir.

Ödeme ağ geçidi entegrasyonu (Örnek: VNPAY)

Ödeme entegrasyonu, e-ticaret veya hizmet uygulamaları için yaygın bir gerekliliktir. VNPAY gibi bir ödeme ağ geçidini React Native'e entegre etmek için genel süreç genellikle aşağıdaki adımları içerir:

1. Kütüphaneyi kurun: React Native için VNPAY destek kütüphanesini bulun ve kurun (eğer varsa) veya VNPAY ödeme sayfasını görüntülemek için WebView'u kullanın.

2. Ödeme talebi oluşturun: Uygulamadan sipariş bilgilerinizi (tutar, sipariş kodu,...) sunucunuza gönderin.

3. Sunucu ödeme URL'sini oluşturur: Sunucunuz, benzersiz bir ödeme URL'si oluşturmak ve bunu uygulamaya döndürmek için VNPAY'in SDK'sını kullanacaktır.

4. Ödeme sayfasını göster: React Native uygulaması bu URL'yi bir WebView'da açar. Kullanıcı, VNPAY arayüzünde ödeme bilgilerini girer.

5. Sonuç işleme: Kullanıcı ödemeyi tamamladıktan sonra, VNPAY yapılandırdığınız bir dönüş URL'sine yönlendirecektir. Uygulama, işlemin başarılı mı yoksa başarısız mı olduğunu anlamak için WebView'daki URL değişikliğini dinleyecek ve arayüzü buna göre güncelleyecektir.

İşverenleri Kazanma: React Native Mülakatlarında Sık Sorulan Sorular

Mülakatınızdan önce ihtiyacınız olan bilgi ve özgüveni edinin. Temel bilgilerden, temel teorilere, gerçek dünya senaryolarından ve derinlemesine performans optimizasyonu sorularına kadar geniş bir yelpazede kategorilendirilen bu React Native mülakat soruları koleksiyonu, en kapsamlı şekilde hazırlanmanıza yardımcı olur.

Temel bilgi ve teoriye ilişkin soru grubu

Bunlar temel kavramları ne kadar iyi kavradığınızı test etmek için sorulan sorulardır.

1. React Native nedir? Nasıl çalışır?

   • Önerilen cevap: JavaScript ve React kullanan, platformlar arası bir framework olduğunu vurgulayın. Köprü mekanizmasını ve JS Thread ile Native Thread arasındaki farkı açıklayın.

2. React Native ile Flutter'ın Karşılaştırılması ve Native Programlama.

   • Önerilen cevap: Dil (JS ve Dart), mimari (Bridge ve Skia), performans ve geliştirme süresi/maliyeti açısından artıları/eksileri belirtin.

3. ReactJS ile React Native arasındaki fark nedir?

   • Önerilen cevap: Amaçlanan kullanıma (web ve mobil) ve ilkel bileşenlere (div/span ve View/Text) odaklanın.

4. React Native'de Props ve State arasındaki fark nedir?

   • Önerilen cevap: Prop'lar, verileri ana bileşenden alt bileşene aktarmak için kullanılır ve değiştirilemezler. Durum, bileşenin dahili verileridir, değişebilir ve değiştirildiğinde yeniden oluşturmayı tetikler.

5. Flexbox, React Native'de nasıl çalışır? Önemli özelliklerinden bazılarını adlandırın.

   • Önerilen cevap: Flexbox'ın ana düzen mekanizması olduğunu açıklayın. Önemli özellikler: flexDirection (varsayılanı column'dur), justifyContent, alignItems, flex.

6. FlatList ile ScrollView arasındaki fark nedir? FlatList ne zaman kullanılır?

   • Önerilen cevap: ScrollView, tüm alt öğeleri aynı anda işler ve kısa listeler için uygundur. FlatList, uzun listeler için belleği ve performansı optimize etmeye yardımcı olan "tembel yükleme" mekanizmasını kullanır (yalnızca ekranda görünen öğeleri işler).

Durum yönetimi ve pratik deneyime ilişkin soru grubu

Bu sorular problem çözme becerilerinizi ve pratik iş deneyiminizi değerlendirir.

1. Yeni bir proje için Expo'yu mu yoksa React Native CLI'yi mi seçerdiniz? Neden?

   • Önerilen cevap: Proje gereksinimlerine göre analiz edin. Projenin hızlı, basit olması ve çok fazla yerel müdahale gerektirmemesi gerekiyorsa Expo'yu seçin. Proje karmaşıksa, yüksek performans gerektiriyorsa ve birçok yerel kütüphaneyi entegre ediyorsa CLI'ı seçin.

2. Büyük bir React Native uygulamasının durumu nasıl yönetilir?

   • Önerilen cevap: Redux (Redux Toolkit), MobX veya React Context gibi çözümlerden bahsedin. Her birinin artılarını/eksilerini ve büyük bir proje için neden belirli bir çözümü tercih edeceğinizi açıklayın.

3. React Native'de hangi performans sorunlarıyla karşılaştınız ve bunları nasıl çözdünüz?

   • Önerilen cevap: Uzun listelerin gecikmeli olması (FlatList'i optimize ederek çözüldü), gereksiz yeniden oluşturma (useMemo, useCallback, React.memo ile çözüldü) veya Bridge'in aşırı yüklenmesi gibi belirli örnekler verin.

4. iOS ve Android için arayüzün farklı versiyonları nasıl kullanılır?

   • Önerilen cevap: Platform API'sini (Platform.OS === 'ios') kullanmaya, ayrı dosyalar oluşturmaya (örn. MyComponent.ios.js ve MyComponent.android.js) veya her iki platform için de bileşenler sağlayan kullanıcı arayüzü kitaplıklarını kullanmaya bakın.

5. React Native uygulamanızın hata ayıklama sürecini açıklayın.

   • Önerilen cevap: Chrome DevTools, React Native Debugger, Flipper gibi araçlardan ve veri akışını izlemek için console.log'u nasıl kullandığınızdan bahsedin.

Performans optimizasyonu ve uygulama mimarisi hakkında sorular

Bunlar, üst düzey pozisyonlar için derinlemesine bilgiyi test eden sorulardır.

1. React Native'deki Bridge nedir ve sınırlamaları nelerdir? Yeni mimari (JSI - JavaScript Arayüzü) bunu nasıl geliştiriyor?

   • Önerilen cevap: Bridge'in eşzamansız olduğunu ve darboğazlara neden olabilen JSON serileştirmesine dayandığını açıklayın. JSI, JavaScript'in yerel işlevleri doğrudan eşzamansız olarak çağırmasına olanak tanır, gecikmeyi azaltır ve performansı önemli ölçüde artırır.

2. Hermes nedir? Neden kullanmalıyız?

   • Önerilen cevap: Hermes, React Native için optimize edilmiş bir JavaScript motorudur. Uygulama başlatma süresini kısaltmaya, bellek kullanımını azaltmaya ve APK dosya boyutunu küçültmeye yardımcı olur.

3. useMemo ve useCallback ne için kullanılır? Bunları ne zaman kullanırsınız?

   • Önerilen cevap: useMemo, karmaşık bir hesaplamanın değerini "belleklemek" için kullanılır. useCallback ise bir fonksiyonu "belleklemek" için kullanılır. Her ikisi de, her yeniden oluşturmada fonksiyonun gereksiz yere yeniden hesaplanmasını veya yeniden oluşturulmasını önleyerek, özellikle React.memo ile sarmalanmış alt bileşenlere aktarılırken performansı optimize eder.

4. React Native'de kod bölme mümkün müdür?

   • Önerilen cevap: Web'in aksine, geleneksel kod bölme doğrudan uygulanmaz. Ancak, modüllerin gerçekten ihtiyaç duyulana kadar yüklenmesini geciktirmek için "satır içi gereksinimler" gibi teknikler kullanılabilir ve bu da başlatma süresini iyileştirebilir.

Kaliteli React Native Kursları ve Belgeleri

Profesyonel bir React Native geliştiricisi olma yolunda size yardımcı olmak için bu bölüm, yetkili kaynakların, öğrenebileceğiniz ve fikir alışverişinde bulunabileceğiniz saygın toplulukların ve hem ücretsiz hem de ücretli seçenekler de dahil olmak üzere kaliteli çevrimiçi React Native kurslarına yönelik önerilerin yer aldığı özenle seçilmiş bir liste sunmaktadır.

Yetkili kaynaklar ve saygın topluluklar

En doğru ve güncel bilgiye ulaşmak için öncelikle ziyaret etmeniz gereken yerler şunlardır.

• Resmi React Native belgeleri: Bu, orijinal ve en güvenilir belge kaynağıdır. Tüm kavramlar, API'ler ve kurulum talimatları ayrıntılıdır ve her zaman en son sürümle günceldir. Orijinal belgeleri okuma alışkanlığı edinin; bu, iyi bir programcı için önemli bir beceridir.

• Expo'nun dokümantasyon sayfası: Expo yolunu seçerseniz, bu vazgeçilmez bir yardımcıdır. Expo SDK'sı, komut satırı araçları ve Expo iş akışı hakkında ayrıntılı dokümantasyon sağlar.

• React Native GitHub: GitHub'daki resmi kaynak kodu deposunu takip etmek, yaklaşan değişikliklerden, tartışılan sorunlardan ve topluluk katkılarından haberdar olmanıza yardımcı olur.

• Viblo Topluluğu: Viblo, Vietnam'ın en büyük BT bilgi paylaşım topluluklarından biridir. Sayısız makale, React Native eğitimi ve deneyimli programcıların React Native hakkında derinlemesine analizlerini bulabilirsiniz.

• Yabancı teknoloji blogları: Dev.to, Medium, LogRocket gibi sitelerde React Native ile ilgili yeni teknikler, kütüphaneler ve gerçek hayattan vaka çalışmaları hakkında düzenli olarak kaliteli makaleler yayınlanmaktadır.

Önerilen React Native çevrimiçi kursları

Eğer yapılandırılmış bir şekilde ve video eğitimleriyle öğrenmeyi tercih ediyorsanız, çevrimiçi kurslar harika bir seçenektir.

• Ücretsiz Kurs:

  • "The Net Ninja" YouTube Kanalı: Yeni başlayanlara uygun, oldukça sezgisel ve anlaşılması kolay bir dizi React Native eğitimi sunar.

  • "Mosh ile Kodla" YouTube Kanalı: Mosh Hamedani'nin yüksek kalitede temel React Native eğitim videoları bulunmaktadır.

  • F8 Platformu (Fullstack.edu.vn): Yapılandırılmış bir yol haritası ve güçlü bir topluluk desteğiyle ReactJS ve React Native dahil olmak üzere Vietnamca ücretsiz programlama kursları sağlar.

• Ücretli Kurslar (Yüksek Kalite):

  • Udemy Kursları: Bu platform, Stephen Grider ve Maximilian Schwarzmüller gibi tanınmış eğitmenler tarafından hazırlanan, başlangıç seviyesinden ileri seviyeye kadar geniş bir React Native kursu yelpazesine sahiptir. Bu kurslar genellikle kapsamlıdır, gerçek dünya projelerini içerir ve düzenli olarak güncellenir. Kursu uygun bir fiyata almak için indirimleri takip edin.

  • Frontend Masters gibi derinlemesine platformlar: Sektör lideri uzmanlar tarafından verilen, React ve React Native'in ileri düzey yönleri hakkında derinlemesine kurslar sunar. Sağlam bir temele sahipseniz ve becerilerinizi geliştirmek istiyorsanız harika bir seçenek.