Keunggulan React Native yang Wajib di Ketahui Desainer Aplikasi!

11

Apa itu React Native ?

React Native ialah Framework Javascript yang digunakan untuk membangun aplikasi baik pada Android maupun iOS (Cross-Platform). React Native dibangun dan dikembangkan oleh Facbook dan bersifat Open-Source

React Native memungkinkan aplikasi untuk ditulis dalam Javascript dan kemudian React Native Compiler akan mengubah kode Javascript akmu menjadi “Native Code” untuk iOS dan Android. Ini berarti aplikasi React Native tidak berjalan di WebView juga bukan aplikasi web.

Dalam pembuatannya, React Native sama sekali tidak menggunakan HTML. Melainkan menggunakan Markup Language nya sendiri dari sistem Library nya untuk membangun aplikasi untuk Android dan iOS.

Baca Juga :

Kenapa Harus Menggunakan React Native ?

  • Karena bersifat Cross Platform (Android/iOS)
  • Memiliki bahasanya sendiri (Native)
  • Menghemat waktu kamu karena  1 code bisa untuk aplikasi Android maupun iOS
  • Ramah Biaya karena untuk dirilis di Google Play maupun Apple Store, kamu hanya butuh sekali coding dalam desain aplikasi kamu.
  • Open Source (Github Repository)
  • Mudah dikembangkan terutama kalo kamu sudah paham React
  • Banyaknya device Application Programming Interface ( API) yang bisa kamu pilih seperti CameraRoll, AsyncRoll, Geolocation, ImageEditor, PushNotification, Vibration, Share, Message, dan masih banyak lagi.
Website

Baca Juga : 5 menit Saja! Cara Install React Native di Sistem Operasi Windows

Bagaimana Cara Install React Native ?

Untuk proses installasi React Native tidak berbeda jauh dengan cara menginstall program lain. Namun agar kamu tidak bingung, kamu bisa mengikuti langkah berikut :

1. Install node js versi terbaru download disini atau via command line

npm install node.js install

2. Install python untuk versi terbaru download disini atau via command line

npm install python

3. Install react native command line interface jalankan via command line

npm install –g react–native–cli

4. Install android SDK saja, pastikan sebelumnya sudah install Java JDK dan JRE

5. Karena disini saya run projek via mobile device maka saya tidak menggunakan android studio untuk menjalankan AVD nya.

6. Buka device yang anda gunakan masuk setting -> developer options -> enable “usb debugging”

7.  Masukan kabel usb ke device dan laptop, cek apakah udah terhubung dengan ADB dari android SDK , caranya buka command line terus masuk ke folder/direktori “cd C:\Users\nama_user_lo\AppData\Local\Android\sdk\platform-tools”, setelah itu jalankan perintah ” adb devices” nanti akan keluar list devices yang sudah terhubung

8. Test react native command line interface yang udah kita install sebelumnya, kita buat projek dengan nama “belajarnative”. Buka cmd dan jalankan perintah berikut:

Baca juga : Ini yang Harus Kamu Ketahui Tentang Open Source!

react-native init belajarnative

cd belajarnative

react-native start

9. Buka command line baru dan jalankan perintah berikut :

react–native run–android

10. Tambahan jika android versi 5.0 lolipop biasanya error untuk mengatasinya jalankan perintah berikut :

adb reverse tcp:8081 tcp:8081

11. Jika sudah berhasil dijalankan akan muncul tampilan seperti ini

Baca Juga : 8 Rahasia Windows 10 yang Belum Diketahui Semua Orang!

Cara Mengatasi Error pada React Native

Saat proses instalasi, seringkali terjadi masalah / error dan yang paling umum terjadi ialah “No Bundle URL Present” yang muncul di Terminal kamu, iOS, atau bahkan keduanya. Berikut ini kami kasih 2 tips cara memperbaiki error tersebut.

Opsi ke 1 : Dengan menjalankan kembali Simulatornya

  • Biasanya masalah ini timbul tanpa sebab yang pasti pada proses instalasi pertama kamu. Cukup jalankan kembali dengan mengetik perintah react-native run-ios atau react-native run-android pada terminal atau command prompt kamu.

Opsi ke 2 : Dengan mengupdate React Native

  • Buka Terminal / Command Prompt
  • CD ke nama project kamu
  • Jalankan perintah “react-native upgrade”
  • Jalankan kembali React native kamu dengan perintah “react-native run ios/android”

Berikutnya Baca : Cara Menggunakan Flexbox pada React Native

Sumber : medium.com

Share.

About Author

Techfor Id