react & react native ReactJs Ve React Native Arasındaki Fark Nedir ?

[myakn55]

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.

Terminal

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

npx react-native run-ios

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.

ReactJS, Video component

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.