Penyelaman Dingin ke React Native (Tutorial untuk Pemula)

Ketika React Native diumumkan, reaksi pertama sangat positif. Biasanya, ketika kita berpikir tentang teknologi web di ruang seluler, hal-hal seperti Apache Cordova muncul di benak, yang memungkinkan kita untuk mengemas situs web atau aplikasi web sebagai aplikasi untuk platform seluler. Dalam tutorial pemula ini, kita akan melihat arsitektur React Native, filosofi di balik React Native, dan perbedaannya dari solusi lain di ruang yang sama. Di akhir artikel, kita akan mengubah aplikasi React “Hello World” menjadi aplikasi React Native.

Mari kita mulai dengan mengatakan bahwa React Native adalah teknologi yang relatif baru. Ini telah tersedia secara resmi sejak Maret 2015, telah dalam versi beta pribadi sejak awal tahun itu, dan digunakan secara internal di Facebook untuk sementara waktu sebelum itu. Pepatah "Roma tidak dibangun dalam sehari" umumnya berlaku untuk teknologi juga. Alat seperti grunt dan platform seperti Node.js membutuhkan waktu bertahun-tahun untuk matang. Di dunia web, segala sesuatunya bergerak dengan cepat, dan dengan sejumlah besar kerangka kerja, paket, dan alat yang keluar setiap hari, pengembang cenderung menjadi sedikit lebih skeptis dan tidak ingin melompat pada setiap kereta musik hype hanya untuk menyadari bahwa mereka berakhir dalam situasi penguncian vendor. Kami akan membahas apa yang membuat React Native istimewa, mengapa ini adalah teknologi yang layak untuk dimasuki, dan membahas beberapa contoh di mana tidak semua unicorn dan pelangi.

Dibawah tenda

Ketika berbicara tentang teknologi web di seluler, solusi yang tersedia biasanya termasuk dalam salah satu kategori berikut.

Membundel Aplikasi Web di Browser Web Seluler

Aplikasi web hidup di browser seluler, biasanya disebut WebView. Tanpa refactoring besar, situs web atau aplikasi web berfungsi di perangkat seluler. Kami mungkin perlu mempertimbangkan peristiwa browser seluler seperti mengetuk atau mendengarkan perubahan orientasi perangkat dan layar yang lebih kecil untuk pengalaman pengguna yang lengkap, tetapi kami memiliki versi seluler yang berfungsi dengan sedikit usaha. Cordova/PhoneGap adalah opsi paling populer dalam kategori ini. Sayangnya opsi ini memiliki kelemahan besar: dalam beberapa kasus, aplikasi yang dikembangkan menggunakan Cordova secara signifikan lebih lambat daripada aplikasi asli, terutama untuk aplikasi yang berat grafis. Dalam kasus lain, sistem operasi seluler tidak benar-benar menyediakan semua fitur di WebView yang tersedia di peramban seluler. Pengalaman pengguna juga dapat berbeda dari aplikasi asli; ini mungkin terjadi karena aplikasi atau platform itu sendiri. Masalah ini dapat berkisar dari bilah gulir yang tidak terasa sama hingga memiliki penundaan yang nyata saat mengetuk elemen.

Kompilasi ke Teknologi Asli

Solusi yang sama sekali berbeda adalah membuat basis kode asli pada akhirnya. Ini terjadi dengan mengubah kode sumber asli ke bahasa pemrograman lain. Kami memperdagangkan kinerja asli untuk lapisan abstraksi dengan beberapa ketidakpastian. Dalam kasus solusi sumber tertutup, kami bahkan tidak yakin apa yang terjadi di balik tenda dan dengan kotak hitam seperti apa yang kami hadapi. Dalam kasus lain, kami tidak yakin berapa banyak pembaruan sistem operasi seluler berikutnya akan merusak kode kami dan kapan perbaikan atau pembaruan akan tersedia. Contoh populer dari kategori ini adalah Haxe.

Menggunakan Lapisan JavaScript

Di sini, kami menggunakan mesin JavaScript dari lingkungan seluler dan menjalankan JavaScript kami di sana. Kontrol asli dipetakan ke objek dan fungsi JavaScript, jadi ketika kita memanggil fungsi yang disebut fancyButtonRightHere() , sebuah tombol akan muncul di layar. NativeScript atau Appcelerator Titanium adalah contoh terkenal dari kategori ini.

React Native dapat diklasifikasikan sebagai sesuatu dari kategori ketiga. Untuk versi iOS dan Android, React Native menggunakan JavaScriptCore, yang merupakan mesin JavaScript default di iOS. JavaScriptCore juga merupakan mesin JavaScript di browser Safari Apple. Pengembang OS X dan iOS sebenarnya dapat langsung berinteraksi dengannya jika mereka mau.

Satu perbedaan besar adalah bahwa React Native menjalankan kode JavaScript di utas terpisah, sehingga antarmuka pengguna tidak memblokir dan animasi harus halus dan mulus.

Bereaksi Adalah Fitur Utama

Perlu dicatat bahwa "React" di React Native tidak diletakkan di sana secara kebetulan. Untuk React Native, kita membutuhkan pemahaman tentang apa yang sebenarnya ditawarkan oleh React. Konsep berikut bekerja sama baik di React dan React Native, meskipun contoh kode ini disesuaikan untuk dijalankan di browser.

Titik Masuk Rendering Tunggal

Saat kita melihat komponen React sederhana, hal pertama yang mungkin kita perhatikan adalah komponen tersebut memiliki fungsi render . Faktanya, React membuat kesalahan jika tidak ada fungsi render yang didefinisikan di dalam komponen.

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

Hal khusus adalah bahwa kita tidak mengacaukan elemen DOM di sini, tetapi kita mengembalikan konstruksi berbasis XML yang mewakili apa yang akan dirender di DOM. Konstruksi berbasis XML ini disebut JSX.

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

Sebuah transformator JSX khusus mengambil semua kode yang tampak XML dan mengubahnya menjadi fungsi. Ini adalah apa komponen setelah transformasi akan terlihat seperti:

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

Keuntungan terbesarnya adalah dengan melihat sekilas komponen, kita selalu tahu apa yang seharusnya dilakukan. Misalnya komponen <FriendList /> mungkin merender sejumlah komponen <Friend /> . Kami tidak dapat merender komponen kami di tempat lain selain di dalam fungsi render , jadi tidak pernah ada kekhawatiran bahwa kami tidak tahu dari mana tepatnya komponen yang kami render itu berasal.

Aliran Data Searah

Untuk membangun konten komponen, React menyediakan properti atau props untuk jangka pendek. Mirip dengan atribut XML, kami meneruskan props langsung ke komponen dan kemudian dapat menggunakan props di dalam komponen yang dibangun.

 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" /> } };

Hal ini menyebabkan komponen kita berada dalam struktur seperti pohon, dan kita hanya diperbolehkan untuk melewatkan data saat membangun elemen turunan.

Re-Render pada Perubahan

Selain alat peraga, komponen juga dapat memiliki keadaan internal. Contoh paling menonjol dari perilaku itu adalah penghitung klik yang memperbarui nilainya saat tombol ditekan. Jumlah klik itu sendiri akan disimpan di negara bagian.

Setiap perubahan prop dan state memicu rendering ulang komponen yang lengkap.

DOM virtual

Sekarang ketika semuanya dirender ulang ketika props atau state berubah, kenapa React sendiri bisa bekerja dengan baik? Bahan ajaibnya adalah "DOM Virtual." Kapan pun sesuatu perlu dirender ulang, representasi virtual dari DOM yang diperbarui akan dibuat. DOM Virtual terdiri dari representasi ringan dari elemen yang dimodelkan setelah pohon komponen, membuat proses pembuatannya jauh lebih efisien daripada menghasilkan elemen DOM nyata. Sebelum menerapkan perubahan ke DOM asli, pemeriksaan dilakukan untuk menentukan di mana tepatnya di pohon komponen perubahan terjadi, diff dibuat, dan hanya perubahan spesifik yang diterapkan.

Memulai dengan Tutorial React Native ini

Ada prasyarat tertentu yang perlu disiapkan oleh pemula untuk mengembangkan React Native. Karena iOS adalah platform pertama yang didukung, dan yang kami bahas dalam tutorial ini, kami membutuhkan macOS dan Xcode, setidaknya versi 6.3. Node.js juga diperlukan. Yang membantu adalah menginstal Watchman melalui manajer paket Brew dengan brew install watchman . Meskipun ini tidak selalu diperlukan, ini membantu ketika berurusan dengan banyak file di dalam proyek React Native kami.

Untuk menginstal React Native, kita hanya perlu menginstal aplikasi baris perintah React Native dengan npm install -g react-native-cli . Memanggil perintah react-native kemudian membantu kita membuat aplikasi React Native baru. Menjalankan react-native init HelloWorld membuat folder bernama HelloWorld di mana kode boilerplate dapat ditemukan.

Mengubah Aplikasi React

Dengan React menjadi fitur utama dan prinsip-prinsip inti yang berasal dari library React, mari kita lihat apa yang kita butuhkan untuk mengubah aplikasi React "Hello World" minimal menjadi aplikasi React Native.

Kami menggunakan beberapa fitur ES2015 dalam contoh kode ini, khususnya kelas. Sangat layak untuk tetap menggunakan React.createClass atau menggunakan formulir fungsi yang mirip dengan pola modul populer.

 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'));

Langkah 1: Rangkullah Modul CommonJS

Pada langkah pertama kita perlu mengubah mengharuskan modul React untuk menggunakan react-native sebagai gantinya.

 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'));

Apa yang biasanya menjadi bagian dari tooling pipeline ketika mengembangkan aplikasi web React adalah bagian integral dari React Native.

Langkah 2: Tidak Ada DOM

Tidak mengherankan, tidak ada DOM di ponsel. Dimana sebelumnya kita menggunakan <div /> , kita perlu menggunakan <View /> dan di mana kita menggunakan <span /> , komponen yang kita butuhkan di sini adalah <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'));

Meskipun cukup nyaman untuk menempatkan teks secara langsung di elemen <div /> , di dunia asli teks tidak dapat diletakkan langsung di <View /> . Untuk itu kita perlu menyisipkan komponen <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)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Langkah 3: Gaya Inline Adalah Cara yang Harus Dilakukan

React Native memungkinkan kita untuk menggunakan pemodelan Flexbox daripada bermain-main dengan float dan inline-block yang sangat kita kenal di dunia web. Yang menarik adalah React Native tidak menggunakan CSS.

 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'));

Menggunakan gaya sebaris tampaknya membingungkan bagi pemula. Ini mirip dengan transisi yang harus dilalui pengembang React ketika dihadapkan dengan JSX dan sebelumnya menggunakan mesin templating seperti Handlebars atau Jade.

Idenya adalah bahwa kita tidak memiliki stylesheet secara global dalam cara kita menggunakan CSS. Kami mendeklarasikan stylesheet secara langsung di tingkat komponen, jadi kami memiliki semua informasi yang kami butuhkan untuk melihat apa yang dilakukan komponen kami, tata letak yang dibuatnya, dan gaya yang diterapkannya.

 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;

Langkah 4: Menangani Acara

Setara dengan mengklik di halaman web adalah mengetuk elemen pada perangkat seluler. Mari kita ubah kode kita sehingga "peringatan" muncul ketika kita mengetuk elemen.

 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'));

Alih-alih peristiwa yang langsung tersedia di komponen <View /> , kita perlu secara eksplisit menggunakan elemen yang memicu peristiwa, dalam kasus kita peristiwa sentuh saat menekan tampilan. Ada berbagai jenis komponen yang dapat disentuh yang tersedia, masing-masing memberikan umpan balik visual yang berbeda.

Langkah 5: Sesuaikan Perilaku di Seluruh Platform

Dimungkinkan untuk mendeteksi platform mana aplikasi React Native berjalan, dengan mengakses nilai Platform.OS . Katakanlah, pada contoh di atas, kami ingin menampilkan pesan peringatan yang berbeda berdasarkan platform yang kami jalankan. Kita bisa melakukannya seperti ini:

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

Atau, metode select juga tersedia, yang menyediakan sintaks seperti sakelar:

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

Langkah 6: Font Kustom dan react-native link

Untuk menambahkan font khusus, kita perlu melewati beberapa rintangan. Pertama-tama, pastikan nama lengkap font dan nama file font sama: iOS akan menggunakan nama lengkap font untuk mengambil font, sementara Android menggunakan nama file.

Jadi, jika nama lengkap font Anda adalah myCustomFont , pastikan nama file font adalah myCustomFont.ttf .

Setelah itu, kita perlu membuat folder aset dan mengarahkan npm ke sana. Kita dapat melakukannya dengan membuat folder terlebih dahulu, di bawah assets/fonts di direktori root aplikasi. Direktori lain dapat digunakan, tetapi ini adalah nama konvensional yang digunakan untuk direktori font.

Kami dapat memberi tahu npm di mana kami memiliki aset dengan menambahkan properti Assets di bawah bagian integrasi npm React, rnpm:

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

Setelah kami melakukan semua itu, kami akhirnya dapat menjalankan react-native link . Itu akan menyalin font ke direktori yang tepat dan akan menambahkan xml yang diperlukan ke info.plist di iOS.

Setelah selesai, kita dapat menggunakan font kita hanya dengan mereferensikannya di stylesheet apa pun dengan nama lengkapnya. Mari kita gunakan pada elemen Text kita:

 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'));

Langkah 7: Memindahkan Benda-Benda Sekitar

React Native menggunakan aturan yang sama seperti Flexbox untuk meletakkan komponen. Katakanlah kita ingin memposisikan tombol kita di bagian bawah layar: mari kita bungkus TouchableOpacity kita dengan wadah View :

 <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>

Dan sekarang mari kita definisikan gaya container , bersama dengan gaya lain yang sudah ditentukan:

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

Mari kita fokus pada justifyContent dan alignItems . Kedua properti tersebut mengontrol bagaimana komponen disejajarkan masing-masing di sepanjang sumbu primer dan sumbu sekundernya. Secara default, sumbu utama adalah sumbu vertikal, dan sumbu sekunder adalah sumbu horizontal (Anda dapat mengubahnya dengan mengatur properti flexDirection ke row ).

justifyContent memiliki enam kemungkinan nilai yang dapat diatur ke:

• flex-start akan memposisikan semua elemen bersama-sama, di awal kotak pembatas komponen.
• flex-end akan memposisikan semua elemen di akhir.
• center akan memposisikan semua elemen di tengah kotak pembatas.
• space-around akan menyebarkan komponen secara merata, dan akan memusatkan komponen di kotak pembatas yang dibuat.
• space-evenly akan menyebarkan komponen secara merata juga, tetapi akan mencoba untuk meninggalkan jumlah ruang yang sama antara komponen dan batas lainnya.
• space-between akan menyebarkan komponen dengan menjaga jarak antar komponen yang berdekatan sama.

alignItems dapat diatur ke empat kemungkinan nilai: flex-start , flex-end , center , dan stretch . Tiga yang pertama berperilaku seperti yang mereka lakukan untuk justifyContent , sementara stretch akan mengatur komponen untuk menempati semua ruang yang tersedia di sepanjang sumbu, sehingga sumbu akan terisi penuh.

Jadi, karena kami ingin TouchableOpacity kami ditampilkan di bagian bawah dan dipusatkan di sepanjang sumbu horizontal, kami dapat mengubah gaya seperti ini:

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

Informasi lebih lanjut tentang nilai justifyContent dan alignItems dapat ditemukan di sini dan di sini.

Langkah 8: Mendaftarkan Aplikasi

Saat mengembangkan dengan React untuk browser, kita hanya perlu menentukan titik mount, panggil React.render , dan biarkan React melakukan keajaibannya. Di React Native, ini sedikit berbeda.

 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; });

Kita harus mendaftarkan komponen untuk sisi Objective-C, yang dilakukan menggunakan objek AppRegistry . Nama yang kita berikan harus sesuai dengan nama yang ada di dalam proyek Xcode.

Aplikasi Hello World React Native kami memiliki lebih banyak baris kode daripada rekan webnya, tetapi di sisi lain, React Native mengambil pemisahan masalah sedikit lebih jauh, terutama karena gaya didefinisikan dengan komponen.

Sebagai catatan tambahan, kita tidak boleh me-rebind metode clickMe ke konteks this dalam metode render , terutama jika aplikasi React (Native) kita berkembang menjadi sedikit lebih kompleks. Ini mengubah metode pada setiap panggilan render yang bisa menjadi cukup banyak. Alternatifnya adalah dengan mengikat metode di dalam konstruktor.

Menjalankan Aplikasi

Untuk menjalankan aplikasi, kita perlu mengganti isi file index.ios.js dengan potongan kode aplikasi kita yang telah diubah dari langkah terakhir. Kemudian kita hanya perlu membuka proyek Xcode dan menekan tombol Run yang besar. Pertama, terminal akan terbuka dengan server React Native, dan kemudian jendela simulator akan muncul. Server React Native membuat bundel, yang kemudian akan diambil oleh aplikasi asli. Ini memungkinkan siklus pengembangan cepat seperti pengembangan web, di mana perubahan akan tercermin hampir secara instan di simulator.

Untuk Android, cukup tambahkan berikut ini ke file package.json Anda, di bawah scripts :

 "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"

Dan kemudian jalankan npm run android-linux . Pastikan direktori android/app/src/main/assets sudah ada sebelumnya.

Setelah terminal muncul, aplikasi kita kemudian akan muncul di simulator. Menekan CMD+D akan menampilkan menu pengembangan. Mengklik pada kotak kemudian akan menampilkan peringatan. Versi iOS:

Dan Android membuat sesuatu seperti ini:

Untuk distribusi, memiliki aplikasi yang mengarah ke server pengembangan lokal tidak akan berhasil bagi kami. Untuk alasan ini, kita dapat membuat bundel untuk digunakan ketika server React Native tidak berjalan dengan perintah react-native bundle . Dalam hal ini, kita perlu memperbarui metode didFinishLaunchingWithOptions dari AppDelegate untuk menggunakan bundel offline.

Contoh aplikasi ini juga tersedia di Github.

Bekerja dengan React Native

Hal lain yang perlu disebutkan adalah bahwa kami tidak hanya menggunakan konsep React dan JavaScript untuk aplikasi seluler kami, tetapi beberapa alur kerja yang digunakan pengembang web juga tersedia dengan React Native. Ketika datang dari pengembangan web, kami terbiasa dengan alat pengembang, memeriksa elemen, dan memuat ulang secara langsung.

Cara kerja React Native adalah menempatkan semua file JavaScript kita dalam satu bundel. Bundel ini disajikan dari server atau dibundel bersama dengan aplikasi. Yang pertama sangat berguna untuk pengembangan di Simulator, karena kami dapat mengaktifkan pemuatan ulang langsung. Menu pengembang yang disediakan React sama sekali tidak sekuat Alat Pengembang Chrome, tetapi memberikan pengalaman pengembang yang sangat mirip web dengan pemuatan ulang dan debugging langsung dengan alat pengembang/debugger Chrome (atau Safari).

Pengembang web akrab dengan JSFiddle atau JSBin, taman bermain online untuk pengujian web cepat. Ada lingkungan serupa yang memungkinkan kita untuk mencoba React Native di browser web.

React Native: Pilihan yang Solid dan Modern

Saya awalnya menyarankan pendekatan yang lebih berhati-hati untuk React Native. Hari ini, ini adalah pilihan yang matang dan solid.

Salah satu keuntungan besar dengan React adalah tidak membebani alur kerja Anda, karena hanya mewakili lapisan tampilan. Apakah Anda ingin mendefinisikan saluran Grunt Anda sendiri? Atau apakah Anda lebih suka menggunakan Webpack? Dan apakah Anda akan menggunakan Backbone.js untuk kebutuhan model Anda? Atau apakah Anda ingin menggunakan objek JavaScript biasa? Jawaban untuk semua pertanyaan ini sepenuhnya terserah Anda, karena React tidak membatasi pilihan ini. Seperti yang dikatakan oleh situs resminya: “Karena React tidak membuat asumsi tentang sisa tumpukan teknologi Anda, mudah untuk mencobanya pada fitur kecil di proyek yang sudah ada.”

Sampai tingkat tertentu, ini juga berlaku untuk React Native. Pengembang seluler dapat mengintegrasikan React Native sebagai bagian dari aplikasi mereka, memanfaatkan alur kerja pengembangan yang terinspirasi web, dan memilih untuk mengintegrasikan perpustakaan pada skala yang lebih besar jika perlu.

Bagaimanapun, satu hal yang pasti: React Native tidak akan hilang. Facebook memiliki saham besar di dalamnya memiliki beberapa aplikasi bertenaga React Native di toko aplikasi. Komunitas di sekitar React Native sangat besar dan terus berkembang.