Kenalan dengan React Native dan Expo

Pasti kalian udah sering dengar sama yang namanya React Native, atau malah belum sama sekali? maka dari itu aku mau kasih tau kalian apasih itu React Native dan punya hubungan spesial apa dia sama Expo.


[[table-content]]


React Native?

Coba kamu bisa bedain ga antara 2 UI header ini :

rn3-02.png

yapp! pasti udah tau dong yang mana yang IOS yang mana yang Android. Ini adalah UI native kedua OS tersebut. Untuk membuat mobile app yang sama tapi di 2 OS tersebut membutuhkan 2 bahasa pemograman yang berbeda, Tapi dengan React Native kamu bisa cukup menggunakan Javascript. Jadi satu code base untuk 2 OS bahkan untuk website juga bisa dengan Expo.


Kemudahan

Selain satu codebase bisa berjalan di 2 OS, React native bisa dibilang mempermudah web developer untuk masuk ke ranah mobile development, karena kalau kamu mau bikin mobile app kamu harus belajar Java untuk android, dan Objective C untuk IOS. Dengan React Native Aku yakin web developer pasti mudah beradaptasi di React Native, karena jika kamu paham HTML, CSS, Javascript pasti bakalan gampang karena Aku dulu juga gitu pas belajar React Native😁


Yang perlu Kamu ketahui

Biar ga bingung kalau mau belajar React Native seengganya kalian harus tahu ini dulu :


πŸ‘‰ HTML

Kenapa HTML? karena untuk component di React Native itu mirip mirip dengan HTML

Contohnya nih :

// Kalo di HTML 
<div>
  <p>Hello world πŸŽ‰</p> 
</div>

// Kalo di React Native
<View>
  <Text>Hello World πŸŽ‰</Text>
</View>

Mirip kan? Sama-sama pakai tag pembuka dan penutup.


πŸ‘‰ CSS

Styling di React native itu sama kaya CSS cuman bedanya di React Native gapake strip ( - ) disambung dan kapital di kata berikutnya, contohnya :

  • margin-top -> marginTop
  • background-color -> backgroundColor


πŸ‘‰ Javascript

Kamu seenggaknya ngerti sedikit sedikit tentang javascript, seperti :

  • bentuk syntaxnya
  • function function yang sering digunakan
  • lebih bagus kalau paham ES6


Udah itu aja kalau kamu mau memulai belajar React Native, sisanya nanti akan belajar saat kamu mulai ngoding.


Expo? Apaantuh??

Expo bisa dibilang sebuah platform yang memudahkan kita kalau mendevelop app dengan React Native. Biasanya kalau kamu mau mendevelop mobile app kamu butuh Android Studio(Android) dan Xcode (IOS), dengan expo kamu bisa buat "Hello World" app dan menjalankannya di hp kamu dengan mudah. Tidak perlu colok colok ke laptop dulu atau ngeload emulator di laptopmu yang suka bikin lemot haha.


πŸ‘ Keunggulan develop app menggunakan Expo

Beberapa keunggulan Expo yang menurutku sangat membantu.


  • Expo menyediakan API-API yang lumayan lengkap seperti camera, Image picker, Maps untuk peta, dsb
  • Gaperlu Install Android Studio / Xcode (dengan catatan: kalau kamu butuh emulator tetep harus install πŸ˜‚)
  • Over The Air Updates!!!! apatuh bang? OTA update itu misalkan kamu ada update pada aplikasi kamu, biasanya kamu harus upload versi terbarunya ke playstore/appstore dulu. Dengan OTA update ini aplikasi kamu bisa terupdate tanpa perlu diupload ke playstore/appstore.
  • Gratis dan Open source!! penting nih buat kita kita orang indonesia yang suka gratisan.


πŸ‘Ž Limitasi

Perlu diketahui juga nih sebelum pakai Expo, karena ada kelebihan juga ada kekurangan.


  • Tidak semua 3rd party library react-native kompatibel dengan Expo. Maksudnya gimana? Jadi kalau install 3rd party library kadang kadang ada yang harus menambahkan atau mengubah native modulesnya
  • Background Execution, jadi kamu gabisa merunning codemu dibackground jadi harus Foreground dan tidak sleep. Expo bisa melakukan background geolocation dan background fetch tetapi tidak bisa seperti : music player (dengan catatan masih dalam pengembangan).
  • Sizenya besar. Kalau kamu suka yang ramping ramping agak sulit sih, karena ketika dibuild jadi apk size aplikasinya minimal 20mb++
  • Selengkapnya disini


Kalau aplikasi yang kalian mau buat terbentrok oleh limitasi tersebut bisa keluar dari environtment expo bisa dilihat disini


Kalau kalian mau lihat pengembangan Expo untuk sekarang dan kedepannya bisa dilihat disini


Kesimpulan

  • Kalau kamu sudah terbiasa dengan HTML CSS Javascript βœ… React Native βœ… Expo
  • Kalau kamu bikin aplikasi dengan satu code base βœ… React Native βœ… Expo
  • Kalau kamu tidak mau ribet dengan native modules βœ… React Native βœ… Expo
  • Kalau aplikasi yang kamu mau kembangkan tidak berjalan dibackground βœ… React Native ❌ Expo
  • Kalau aplikasimu membutuhkan fitur fitur yang belum disupport expo (ex: Bluetooth) βœ… React Native ❌ Expo


Links


react-native javascript mobile
avatar kikiding

Ditulis oleh @kikiding

"React native enthusiast"