Jump to content
×
×
  • Yeni Oluştur...

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

  • Bu Alana Reklam Verebilirsiniz
    Bu Alana Reklam Verebilirsiniz

ReactJs Ve React Native Arasındaki Fark Nedir ?

Konuyu değerlendir


myakn55
 Paylaş


Önerilen İletiler

ReactJs Ve React Native Arasındaki Fark Nedir ?
 Paylaş


  • Moderatör
1_HMg49pIFrqsaghTAZVQUag.png

React Native ile tanışıklığım olsa da hiçbir zaman samimi değildik. Ta ki React ile geliştirdiğimiz bir projenin aynı zaman da mobil ayağının da olacağını öğrenene kadar.

Uygulamanın bu dönüşümünün hem hızlı olması gerekiyordu, hem de bir o kadar performanslı. iOS için Swift, Android için ise Java ile gerçekten native olan bir uygulama yazılabilirdi. Ama hem çok vakit alacak, hem de maliyetli olacaktı. React ile hikayesi olan bir ekibin, React ile yazılmış bir projenin mobile dönüşümü için kullanacağı teknolojiyi seçmekte o kadar da zorlanmadığını tahmin etmelisiniz. Çokta uzun sürmeyen bir araştırma sonucu React Native’de karar kılındı.

Google arama motorunun, kendimi şanslı hissediyorum butonunu biliyor olmalısınız. Bunu YouTube’a uyarladım ve YouTube Türkiye’de ki en popüler videolar arasında rastgele bir seçim yapıp, bunu kullanıcıya yansıtan basit bir uygulama yaptım. React native’e çevireceğimiz bu uygulama’ya buradan ulaşabilirsiniz.

Geliştirici Ortamını Hazırlanması

Ben macOS üzerinde geliştirme yaptığım için ortam kurulumunun aşamaları macOS kullanıcıları içindir. Diğer işletim sistemleri için React Native dökümantasyonuna bakabilirsiniz.

Öncelikle Node, Watchman, React Native command line interface ve Xcode yüklü olması gerekiyor, eğer değilse aşağıda ki adımları takip ederek yükleyebilirsiniz.

  1. Xcode’u App Store’dan indiriyoruz.
  2. Xcode’u açtıktan sonra Preferences > Locations > Command Line Tools menüsünden en güncel versiyonun seçili olduğundan emin olun.
  3. Xcode > Preferences > Components sekmesinden en güncel (tercihen) iOS simülator sürümünü yükleyin.
  4. macOS için yazılmış paket yönetim sistemi olan Homebrew’i kullanarak Watchman ve Node’u yükleyebilirsiniz.
brew install nodebrew install watchman

5. macOS’de varsayılan olarak Ruby yüklü geliyor. Ruby paket yönetim sistemi olan Gem’i kullanarak cocoapods’u yükleyebilirsiniz.

sudo gem install cocoapods

6. React Native command line interface’i global olarak yüklemektense npx kullanarak runtime’da erişebilirsiniz.

npx react-native <komut>

Uygulama Oluşturma

Bir uygulamayı yazmaya başlamadan önce mutlaka konfigürasyonların yapılması gerekiyor. Babel, Webpack ve ES6, JSX gibi söz dizimi desteklerinin sağlanması için bir ton konfigürasyon yapıyoruz ve bunlar tekrar eden şeyler. Hemen hemen her uygulama bunlara sahip olmak zorunda. İşte o yüzden React ekibi create-react-app adında bir araç çıkarttı. Bu araç bizim yerimize tüm bu angarya işleri hallediyor ve hızlıca uygulama geliştirmeye başlayabiliyorsunuz.

Create-react-app’in React Native’de ki karşılığı react-native. Bu aracı kullanarak genel konfigürasyonların sağlandığı bir uygulamayı ekranlarınızda görebilirsiniz. Aşağıda ki komutu kullanarak rnRandom adında yeni bir uygulama oluşturalım.

npx react-native init rnRandom

Uygulamayı direkt olarak Xcode üzerinden çalıştırabilirsiniz ya da terminal üzerinden de yapabilirsiniz. İkisinin de örnekleri aşağıda mevcut.

Xcode

rnRandom uygulamasının ana dizinine gidip, ios klasörü içerisinde ki rnRandom.xcodeproj dosyasını çalıştırıyoruz. Sonrasında build etmeniz yeterli.

1_KGC72qWYFXZtJqGvMZR2Xw.png

Terminal

Uygulamanın ana dizininde aşağıda ki komutu çalıştırmanız yeterli.

npx react-native run-ios
1_RJN0h7iyZbhObiWVqOa3PA.png
Her iki adımın sonunda simülator bu çıktıyı verecektir

Farklılıklar

React ve React Native temelde aynı prensiplere sırtını yaslasa da birbirinden oldukça farklı yönleride bulunuyor. Aşağıda ki ekran görüntüleri uygulamanın Video component’in de ki oluşan değişiklikleri yansıtıyor.

1_XwX6_ZvSZ_gF_tZ7Vp9Ptg.jpeg
ReactJS, Video component
1_byf_086M9Uq0XiP-1ukEEQ.jpeg
React Native, Video component

Style

React Native’de style için CSS kullanmıyoruz. Onun yerine StyleSheet nesnesi oluşturuyoruz ve style özelliklerini bu nesne de tanımlıyoruz. Syntax CSS’e bir hayli benziyor dolayısıyla burda işimiz oldukça kolay. Ne yazık ki normal CSS’de bulacağınız bir çok style, burda mevcut değil.

Route

React Native’de tıpkı React gibi varsayılan olarak route işlemlerini yapabileceğiniz bir yapı sunmuyor. Ek kütüphaneler ile bu yapıları dahil edebiliyoruz.

Component

Web’de kullandığınız <p>, <div> gibi DOM elemanlarının hiçbirini React Native’de kullanamıyorsunuz. Onun yerine <View>, <Text> gibi React Native’e özgü component’leri kullanmak zorundasınız.

Runtime

React Native 2 farklı thread’de çalışıyor. Ana thread UI render etmekle ve kullanıcı jestleri ile ilgilenirken, JavaScript thread’i ise UI yapısı ve uygulamanın bussiness logic tarafıyla ilgileniyor.

Sonuç

React Native her ne kadar ReactJS ile aynı temellere dayansa da prensipte çok farklı ayrılıklara sahipler. ReactJS ile geliştirdiğiniz projenin React Native’e göre bir çok nokta da tekrardan yazılması gerektiğini unutmamak gerekiyor. Native bir uygulama yerine React Native ile tüm platformlara çıkartmak gibi gayeniz olabilir ama burda bile platformlara özgü componentler olduğunu her birisi için ayrı konfigürasyon yapmanız gerektiğini söylemem gerek.

Tarayıcı API’ları üzerinden tek bir kod tabanı ile her platforma aynı ürünü çıkartmak hala birer hayal olarak kalıyor maalesef.

O zamana kadar en iyi seçeneklerden birinin React Native olduğunu düşünüyorum.

Technology is Real

Yorum bağlantısı
Şimdi Paylaş


Konu Altı Reklam 1
Konu Altı Reklam 2
  • İleti 0
  • Oluşturulma
  • Son yanıt

Bu Konudaki En İyi Paylaşımcı

Popüler Günler

Bu Konudaki En İyi Paylaşımcı

Popüler Günler

Konu Görselleri

Şimdi Konuya Katılın

Şimdi gönderebilir ve daha sonra kayıt olabilirsiniz. Bir hesabınız varsa, şimdi oturum açın .

Misafir
Konuyu yanıtla

×   Yapıştırdığınız içerik biçimlendirme içeriyor.   Biçimlendirmeyi Temizle

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Önceki içeriğiniz geri yüklendi.   Editör içeriğini temizle

×   You cannot paste images directly. Upload or insert images from URL.

 Paylaş


×
×
  • Yeni Oluştur...