React Native'e Soğuk Bir Dalış (Yeni Başlayanlar İçin Eğitim)

React Native duyurulduğunda, ilk tepkiler ezici bir çoğunlukla olumluydu. Geleneksel olarak, mobil alanda web teknolojilerini düşündüğümüzde, web sitelerini veya web uygulamalarını mobil platformlar için uygulamalar olarak paketlememize olanak tanıyan Apache Cordova gibi şeyler akla gelir. Bu başlangıç ​​eğitiminde, React Native'in mimarisine, React Native'in arkasındaki felsefeye ve aynı alandaki diğer çözümlerden nasıl farklı olduğuna bir göz atacağız. Yazının sonunda bir React “Hello World” uygulamasını React Native uygulamasına dönüştürmüş olacağız.

React Native'in nispeten yeni bir teknoloji olduğunu söyleyerek başlayalım. Mart 2015'ten beri resmi olarak kullanıma sunuldu, o yılın başından beri özel beta sürümündeydi ve bundan bir süre önce Facebook'ta dahili olarak kullanılıyordu. “Roma bir günde kurulmadı” sözü genellikle teknoloji için de geçerlidir. grunt gibi araçların ve Node.js gibi platformların olgunlaşması yıllar aldı. Web dünyasında işler hızla ilerliyor ve her gün ortaya çıkan çok sayıda çerçeve, paket ve araç ile geliştiriciler biraz daha şüpheci olma eğilimindedir ve her yutturmaca çoğunluğa atlamak istemiyorlar. bir satıcı kilitlenmesi durumunda sona erdi. React Native'i neyin özel kıldığını, neden girmeye değer bir teknoloji olduğunu ve hepsinin tek boynuzlu atlar ve gökkuşakları olmadığı birkaç örneği ele alacağız.

Kaputun Altında

Mobil cihazlarda web teknolojileri hakkında konuşurken, mevcut çözümler genellikle aşağıdaki kategorilerden birine girer.

Bir Mobil Web Tarayıcısında Web Uygulamalarını Paketleme

Web uygulaması, genellikle WebView olarak adlandırılan bir mobil tarayıcıda bulunur. Herhangi bir büyük yeniden düzenleme olmadan, bir web sitesi veya web uygulaması mobil cihazda çalışır. Eksiksiz bir kullanıcı deneyimi için cihaz yönlendirme değişikliklerine dokunma veya dinleme gibi mobil tarayıcı olaylarını ve daha küçük ekranı dikkate almamız gerekebilir, ancak minimum çabayla çalışan bir mobil sürümümüz var. Cordova/PhoneGap bu kategorideki en popüler seçenektir. Ne yazık ki bu seçeneğin büyük bir dezavantajı vardır: Bazı durumlarda, Cordova kullanılarak geliştirilen uygulamalar, özellikle grafik ağırlıklı uygulamalar için yerel uygulamalardan önemli ölçüde daha yavaştır. Diğer durumlarda, mobil işletim sistemi, WebView'da mobil tarayıcıda bulunan tüm özellikleri sağlamaz. Kullanıcı deneyimi, yerel uygulamalardan da farklı olabilir; bu, uygulama veya platformun kendisinden kaynaklanabilir. Bu sorun, kaydırma çubuklarının aynı hissetmemesinden, öğelere dokunulduğunda gözle görülür bir gecikmeye kadar değişebilir.

Yerel Teknolojilere Derleme

Tamamen farklı bir çözüm, sonunda yerel bir kod tabanı oluşturmaktır. Bu, orijinal kaynak kodunu başka bir programlama diline dönüştürerek gerçekleşir. Bazı belirsizlikleri olan bir soyutlama katmanı için yerel performansla işlem yapıyoruz. Kapalı kaynaklı çözümler söz konusu olduğunda, kaputun altında ne olduğundan ve ne tür bir kara kutu ile uğraştığımızdan bile emin değiliz. Diğer durumlarda, bir sonraki mobil işletim sistemi güncellemesinin kodumuzu ne kadar bozacağından ve düzeltmelerin veya güncellemelerin ne zaman mevcut olacağından emin değiliz. Bu kategorinin popüler bir örneği Haxe olacaktır.

JavaScript Katmanı Kullanma

Burada, mobil ortamın JavaScript motorunu kullanıyoruz ve orada JavaScript'imizi yürütüyoruz. Yerel kontroller JavaScript nesneleri ve işlevleriyle eşleştirilir, bu nedenle fancyButtonRightHere() adlı bir işlevi çağırdığımızda ekranda bir düğme görünür. NativeScript veya Appcelerator Titanium bu kategorinin iyi bilinen örnekleridir.

React Native, üçüncü kategoriden bir şey olarak sınıflandırılabilir. iOS ve Android sürümleri için React Native, iOS'ta varsayılan JavaScript motoru olan JavaScriptCore'u kullanır. JavaScriptCore ayrıca Apple'ın Safari tarayıcılarındaki JavaScript motorudur. OS X ve iOS geliştiricileri, isterlerse aslında doğrudan onunla arayüz oluşturabilirler.

Büyük bir fark, React Native'in JavaScript kodunu ayrı bir iş parçacığında çalıştırmasıdır, bu nedenle kullanıcı arayüzü bloke olmaz ve animasyonlar ipeksi ve pürüzsüz olmalıdır.

Tepki Anahtar Özelliktir

React Native'deki “React” ifadesinin oraya tesadüfen yerleştirilmediğini belirtmekte fayda var. React Native için, React'in tam olarak ne sunduğuna dair bir anlayışa ihtiyacımız var. Aşağıdaki kavramlar hem React hem de React Native'de aynı şekilde çalışır, ancak bu kod örnekleri tarayıcıda çalıştırılmak üzere uyarlanmıştır.

Tek İşleme Giriş Noktası

Basit bir React bileşenine baktığımızda, ilk fark edebileceğimiz şey, bileşenin bir render işlevine sahip olmasıdır. Aslında, bileşen içinde tanımlanmış bir oluşturma işlevi yoksa React bir hata atar.

 var MyComponent = function() { this.render = function() { // Render something here }; };

Özel olan şey, burada DOM öğeleriyle uğraşmamamız, ancak DOM'da nelerin oluşturulacağını temsil eden XML tabanlı bir yapı döndürmemizdir. Bu XML tabanlı yapıya JSX denir.

 var MyComponent = function() { this.render = function() { return <div className="my-component">Hello there</div>; }; };

Özel bir JSX dönüştürücü, tüm bu XML görünümlü kodu alır ve onu işlevlere dönüştürür. Dönüşümden sonraki bileşen şöyle görünecektir:

 var MyComponent = function() { this.render = function() { return React.createElement("div", { className: "my-component" }, "Hello there"); }; };

En büyük avantajı, bileşene hızlıca göz atarak, her zaman ne yapması gerektiğini bilmemizdir. Örneğin, bir <FriendList /> bileşeni, birkaç <FriendList / <Friend /> bileşeni oluşturabilir. Bileşenlerimizi render , bu nedenle işlenmiş bileşenimizin tam olarak nereden geldiğini bilmediğimiz endişesi asla yoktur.

Tek Yönlü Veri Akışı

Bir bileşenin içeriğini oluşturmak için React, kısaca özellikler veya aksesuarlar sağlar. XML özniteliklerine benzer şekilde, props'ları doğrudan bir bileşene iletiriz ve ardından props'ları oluşturulmuş bileşenin içinde kullanabiliriz.

 var Hello = function(props) { this.render = function() { return <div className="my-component">Hello {props.name}</div>; }; }; var Greeter = function() { this.render = function() { return <Hello name="there" /> } };

Bu, bileşenlerimizin ağaç benzeri bir yapıda olmasına yol açar ve yalnızca alt öğeler oluştururken veri aktarmamıza izin verilir.

Değişikliklerde Yeniden Oluşturma

Aksesuarlara ek olarak, bileşenlerin dahili bir durumu da olabilir. Bu davranışın en belirgin örneği, bir düğmeye basıldığında değerini güncelleyen bir tıklama sayacı olacaktır. Tıklamaların sayısı duruma kaydedilir.

Destek ve durum değişikliğinin her biri, bileşenin tamamen yeniden oluşturulmasını tetikler.

sanal DOM

Şimdi, sahne veya durum değiştiğinde her şey yeniden oluşturulduğunda, nasıl oluyor da React'in kendisi bu kadar iyi performans gösteriyor? Sihirli içerik "Sanal DOM"dur. Bir şeyin yeniden oluşturulması gerektiğinde, güncellenen DOM'nin sanal bir temsili oluşturulur. Sanal DOM, bileşen ağacından sonra modellenen öğelerin ışık temsillerinden oluşur ve bunları oluşturma sürecini gerçek DOM öğelerini oluşturmaktan çok daha verimli hale getirir. Değişiklikleri gerçek DOM'a uygulamadan önce, değişikliklerin bileşen ağacında tam olarak nerede gerçekleştiğini belirlemek için kontroller yapılır, bir fark oluşturulur ve yalnızca bu belirli değişiklikler uygulanır.

Bu React Native Eğitimine Başlarken

React Native için geliştirme yapmak için yeni başlayanların kurması gereken belirli ön koşullar vardır. iOS desteklenen ilk platform olduğundan ve bu eğitimde ele aldığımız platform olduğundan, en az 6.3 sürümü olan macOS ve Xcode'a ihtiyacımız var. Node.js de gereklidir. Yardımcı olan, Watchman'i brew install watchman ile Brew paket yöneticisi aracılığıyla kurmaktır. Bu mutlaka gerekli olmasa da, React Native projemizde çok sayıda dosyayla uğraşırken yardımcı olur.

React Native'i kurmak için, React Native komut satırı uygulamasını npm install -g react-native-cli ile kurmamız yeterlidir. React react-native komutunu çağırmak, yeni bir React Native uygulaması oluşturmamıza yardımcı olur. react-native init HelloWorld çalıştırmak, standart kodun bulunabileceği HelloWorld adlı bir klasör oluşturur.

Bir React Uygulamasını Dönüştürme

React'in ana özellik ve React kitaplığından gelen temel ilkeler olduğu için, minimal bir React “Hello World” uygulamasını React Native uygulamasına dönüştürmek için neye ihtiyacımız olduğuna bir göz atalım.

Bu kod örneğinde, özellikle sınıflarda bazı ES2015 özelliklerini kullanıyoruz. React.createClass veya popüler modül modeline benzer bir fonksiyon formu kullanmak tamamen mümkündür.

 var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

1. Adım: CommonJS Modüllerini Benimseyin

İlk adımda, React modülünün bunun yerine react-native kullanmasını gerektirecek şekilde değiştirmemiz gerekiyor.

 var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Bir React web uygulaması geliştirirken genellikle takımlama hattının bir parçası olan şey, React Native'in ayrılmaz bir parçasıdır.

2. Adım: DOM Yok

Şaşırtıcı olmayan bir şekilde, mobil cihazlarda DOM yoktur. Daha önce <div /> kullandığımız yerde, <View /> kullanmamız gerekiyor ve <span /> kullandığımız yerde, burada ihtiyacımız olan bileşen <Text /> .

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Metni doğrudan <div /> öğelerine koymak oldukça uygun olsa da, yerel dünyada metin doğrudan bir <View /> içine yerleştirilemez. Bunun için bir <Text /> bileşeni eklememiz gerekiyor.

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Adım 3: Satır İçi Stiller Gitmenin Yoludur

React Native, web dünyasında çok aşina olduğumuz float ve inline-block ile uğraşmak yerine Flexbox modellemesini kullanmamıza izin veriyor. İlginç olan, React Native'in CSS kullanmamasıdır.

 import React from 'react'; import {View, Text, StyleSheet, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View style={styles.box} onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Satır içi stilleri kullanmak yeni başlayanlar için şaşırtıcı görünüyor. Bu, React geliştiricilerinin JSX ile karşılaştıklarında ve daha önce Handlebars veya Jade gibi şablonlama motorlarını kullanırken geçmek zorunda oldukları geçişe benzer.

Fikir şu ki, CSS'yi kullandığımız şekilde küresel olarak stil sayfalarımız yok. Stil sayfalarını doğrudan bileşen düzeyinde bildiririz ve bu nedenle bileşenimizin ne yaptığını, oluşturduğu düzeni ve uyguladığı stilleri görmek için ihtiyacımız olan tüm bilgilere sahibiz.

 import React from 'react'; import {Text} from 'react-native'; var Headline = function(props) { this.render = () => <Text style={headlineStyle.text}>{props.caption}</Text>; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline;

Adım 4: Olayları İşleme

Web sayfalarında tıklamaya eşdeğer, mobil cihazdaki bir öğeye dokunmaktır. Kodumuzu, elemente dokunduğumuzda “uyarı” çıkacak şekilde değiştirelim.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Olayların doğrudan <View /> bileşenlerinde mevcut olması yerine, bizim durumumuzda görünüme basıldığında bir dokunma olayı gibi olayları tetikleyen öğeleri açıkça kullanmamız gerekir. Her biri farklı bir görsel geri bildirim sağlayan farklı türde dokunulabilir bileşenler mevcuttur.

Adım 5: Platformlar Arasında Davranışı Özelleştirin

Platform.OS değerine erişilerek React Native uygulamasının hangi platformda çalıştığını tespit etmek mümkündür. Diyelim ki yukarıdaki örnekte üzerinde çalıştığımız platforma göre farklı bir uyarı mesajı göstermek istedik. Bunu şu şekilde yapabiliriz:

 ... clickMe() { var message = ''; if(Platform.OS == 'ios') { message = 'Welcome to iOS!'; } else if(Platform.OS == 'android') { message = 'Welcome to Android!'; } Alert.alert(message); } ...

Alternatif olarak, anahtara benzer bir sözdizimi sağlayan select yöntemi de mevcuttur:

 … clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' }) ); } ...

6. Adım: Özel Yazı Tipleri ve react-native link

Özel bir yazı tipi eklemek için bazı çemberlerden geçmemiz gerekiyor. Her şeyden önce, yazı tipinin tam adının ve yazı tipinin dosya adının aynı olduğundan emin olun: iOS, yazı tipini almak için yazı tipinin tam adını kullanırken, Android dosya adını kullanır.

Bu nedenle, fontunuzun tam adı myCustomFont ise, fontun dosya adının myCustomFont.ttf olduğundan emin olun.

Bundan sonra, bir varlıklar klasörü oluşturmamız ve npm'yi ona yönlendirmemiz gerekiyor. Bunu, uygulamanın kök dizinindeki assets/fonts altında önce klasörü oluşturarak yapabiliriz. Başka herhangi bir dizin işe yarar, ancak bu, yazı tipi dizini için kullanılan geleneksel addır.

React'in npm entegrasyon bölümü, rnpm altına bir Assets özelliği ekleyerek npm'ye varlıklarımızın nerede olduğunu söyleyebiliriz:

 "rnpm": { "Assets": [ "./assets/fonts/" ] }

Tüm bunları yaptıktan sonra, nihayet react-native link çalıştırabiliriz. Bu, yazı tiplerini doğru dizinlere kopyalayacak ve gerekli xml'yi iOS'ta info.plist'e ekleyecektir.

Bittiğinde, yazı tipimizi herhangi bir stil sayfasında tam adıyla referans alarak kullanabiliriz. Bunu Text öğemizde kullanalım:

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

7. Adım: Eşyaları Hareket Ettirmek

React Native, bileşenleri yerleştirmek için Flexbox ile aynı kuralları kullanır. Diyelim ki butonumuzu ekranın alt kısmına yerleştirmek istedik: TouchableOpacity bir konteyner View ile saralım:

 <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View>

Şimdi container stilini, önceden tanımlanmış diğer stiller ile birlikte tanımlayalım:

 container: { flex: 1, justifyContent: 'center', alignItems: 'center' }

justifyContent ve alignItems öğelerine odaklanalım. Bu iki özellik, bileşenin sırasıyla birincil ekseni ve ikincil ekseni boyunca nasıl hizalanacağını kontrol eder. Varsayılan olarak, birincil eksen dikey eksendir ve ikincil eksen yatay eksendir (bunu flexDirection özelliğini row olarak ayarlayarak değiştirebilirsiniz).

justifyContent altı olası değeri vardır:

• flex-start , bileşenin sınırlayıcı kutusunun başında tüm öğeleri bir arada konumlandırır.
• flex-end , tüm öğeleri sonunda konumlandıracaktır.
• center , tüm öğeleri sınırlayıcı kutunun ortasına yerleştirecektir.
• space-around , bileşenleri eşit bir şekilde yayar ve bileşenleri oluşturulan sınırlayıcı kutularda ortalar.
• space-evenly eşit olarak bileşenleri de eşit olarak yayar, ancak bileşenler ve diğer sınırlar arasında eşit miktarda boşluk bırakmaya çalışır.
• space-between , bitişik bileşenler arasındaki boşluğu eşit tutarak bileşenleri yayar.

alignItems dört olası değere ayarlanabilir: flex-start ​​, flex-end , center ve stretch . İlk üçü justifyContent için yaptıkları gibi davranırken, stretch bileşeni eksen boyunca tüm kullanılabilir alanı kaplayacak şekilde ayarlar, böylece eksen tamamen doldurulur.

Yani TouchableOpacity altta ve yatay eksende ortalanmış olarak görüntülenmesini istediğimiz için stili şu şekilde değiştirebiliriz:

 container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }

justifyContent ve alignItems değerleri hakkında daha fazla bilgiyi burada ve burada bulabilirsiniz.

Adım 8: Uygulamanın Kaydedilmesi

Tarayıcı için React ile geliştirme yaparken, bir bağlama noktası tanımlamamız, React.render ve React'in sihrini yapmasına izin vermemiz yeterlidir. React Native'de bu biraz farklıdır.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' })); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return <HelloThere name="Component" />; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; });

Bileşeni, AppRegistry nesnesi kullanılarak yapılan nesnelerin Objective-C tarafı için kaydetmemiz gerekiyor. Verdiğimiz ad, Xcode projesinin içindeki adla eşleşmelidir.

Hello World React Native uygulamamız, web muadilinden önemli ölçüde daha fazla kod satırına sahiptir, ancak diğer yandan, React Native, özellikle stiller bileşenle tanımlandığından, endişelerin ayrılmasını biraz daha ileri götürür.

Bir yan not olarak, özellikle React (Native) uygulamamız biraz daha karmaşık hale gelirse, render yönteminde clickMe yöntemini this bağlama yeniden bağlamamalıyız. Oldukça fazla olabilen her oluşturma çağrısında yöntemi yeniden bağlar. Alternatif, yapıcı içindeki yöntemi bağlamaktır.

Uygulamayı Çalıştırmak

Uygulamayı çalıştırmak için index.ios.js dosyasının içeriğini son adımdaki dönüştürülmüş uygulamamızın kod parçası ile değiştirmemiz gerekiyor. O zaman sadece Xcode projesini açmamız ve büyük Çalıştır düğmesine basmamız gerekiyor. İlk olarak, React Native sunucusu ile bir terminal açılacak ve ardından simülatör penceresi görünecektir. React Native sunucusu, yerel uygulamanın daha sonra getireceği bir paket oluşturur. Bu, değişikliklerin neredeyse anında simülatöre yansıtılacağı web geliştirme benzeri hızlı bir geliştirme döngüsüne izin verir.

Android için, aşağıdakileri package.json dosyanıza scripts altında eklemeniz yeterlidir:

 "android-linux": "react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android"

Ve sonra npm run android-linux . android/app/src/main/assets dizininin önceden var olduğundan emin olun.

Terminal açıldıktan sonra uygulamamız simülatörde görünecektir. CMD+D'ye basmak bir geliştirme menüsü gösterecektir. Kutuya tıklamak daha sonra bir uyarı gösterecektir. iOS sürümü:

Ve Android şöyle bir şey oluşturur:

Dağıtım için, yerel bir geliştirme sunucusuna işaret eden bir uygulamaya sahip olmak bizim için işe yaramaz. Bu nedenle, React Native sunucusu çalışmıyorken react-native bundle komutuyla kullanım için paketi oluşturabiliriz. Bu durumda, çevrimdışı paketi kullanmak için AppDelegate didFinishLaunchingWithOptions yöntemini güncellememiz gerekir.

Bu örnek uygulama Github'da da mevcuttur.

React Native'de Çalışmak

Bahsetmeye değer başka bir şey de, mobil uygulamalarımız için yalnızca React kavramlarını ve JavaScript'i değil, web geliştiricilerinin alışkın olduğu bazı iş akışlarının da React Native ile mevcut olmasıdır. Web geliştirmeden geldiğimizde, geliştirici araçlarına, öğeleri incelemeye ve canlı yeniden yüklemeye alışkınız.

React Native'in çalışma şekli, tüm JavaScript dosyalarımızı bir pakete koymasıdır. Bu paket ya bir sunucudan sunulur ya da uygulama ile birlikte paketlenir. Birincisi, canlı yeniden yüklemeyi etkinleştirebildiğimiz için Simülatörde geliştirme için inanılmaz derecede faydalıdır. React'in sağladığı geliştirici menüsü, hiçbir şekilde Chrome Geliştirici Araçları kadar güçlü değildir, ancak Chrome (veya Safari) geliştirici/hata ayıklayıcı araçlarıyla canlı yeniden yükleme ve hata ayıklama ile web benzeri bir geliştirici deneyimi sağlar.

Web geliştiricileri, hızlı web testleri için çevrimiçi bir oyun alanı olan JSFiddle veya JSBin'e aşinadır. Bir web tarayıcısında React Native'i denememize izin veren benzer bir ortam var.

React Native: Sağlam, Modern Bir Seçim

Başlangıçta React Native'e daha temkinli bir yaklaşım önermiştim. Bugün, olgun ve sağlam bir seçim.

React'in en büyük avantajlarından biri, yalnızca görünüm katmanını temsil ettiği için iş akışınızı etkilememesidir. Kendi Grunt işlem hattınızı tanımlamak ister misiniz? Yoksa Webpack'i kullanmayı mı tercih edersiniz? Ve model ihtiyaçlarınız için Backbone.js kullanacak mısınız? Yoksa düz JavaScript nesneleriyle mi gitmek istiyorsunuz? Tüm bu soruların cevapları tamamen size kalmış çünkü React bu seçeneklere herhangi bir kısıtlama getirmiyor. Resmi sitenin belirttiği gibi: "React, teknoloji yığınınızın geri kalanı hakkında herhangi bir varsayımda bulunmadığından, mevcut bir projedeki küçük bir özellik üzerinde denemek kolaydır."

Bir dereceye kadar, bu React Native için de geçerlidir. Mobil geliştiriciler, uygulamalarının bir parçası olarak React Native'i entegre edebilir, web'den ilham alan geliştirme iş akışından yararlanabilir ve gerekirse kitaplığı daha büyük ölçekte entegre etmeyi seçebilir.

Her durumda, kesin olan bir şey var: React Native ortadan kalkmıyor. Facebook'un uygulama mağazalarında birden fazla React Native destekli uygulamaya sahip olmasında büyük bir payı var. React Native çevresindeki topluluk çok büyük ve büyümeye devam ediyor.