Cara Instal React Native di Linux

Cara Instal React Native di Linux

Code Pelajar - Assalamualaikum sobat Code Pelajar, kembali lagi dengan saya Admin I, sekarang saya ingin berbagi pengalaman kerja menggunakan Framework untuk membuat aplikasi React Native. Apa itu React Native? ini adalah framework membuat aplikasi mobile menggunakan Javascript dan ReactJS.



Dengan React Native, aplikasi mobile yang ditulis dengan javascript dan React akan diterjemahkan ke bahasa native seperti Java untuk Android atau Objective-C untuk iOS - Code Politan

Bertepatan pada hari ini saya mencoba mengimpletasikan projek aplikasi menggunakan React Native untuk pertama kalinya. Dan yang paling saya ribet diantara paling ribet adalah cara menginstallnya, dimana kita harus menambahkan banyak paket-paket wajibnya seperti Node JS, Python2, Android Studio, dan JDK. Mungkin bagi kamu pengguna Windows akan mudah menemukan tutorialnya di Internet seperti Youtube tentang bagaiman cara instalasinya. Karena saya menggunakan Sistem Operasi Linux, tentunya agak sedikit kesulitan juga karena harus menggunakan Command Line.


Pada saat proses instalasi React Native saya mengalami berbagai kendala seperti eror, ditambah Laptop saya spek kentang yang tidak kuat menjalankan Android Studio. Namun jangan khawatir, saya sudah melakukan instalasi dan sukses. Sekarang saya akan berbagi pengalaman bagaimana bagaimana cara install react native di Linux tepatnya ubuntu dan turunnya.


Pada kasus ini saya menggunakan Linux Mint 19, Base Ubuntu 18 dengan RAM 8GB.


Cara Instal React Native di Linux Ubuntu

Langkah pertama yang kita lakukan adalah melakukan instalasi paket wajibnya terlebih dahulu dan semuanya kita lakukan di terminal.


Instal node dan npm

Jika kamu pengguna yang familiar dengan sintak apt-get install, namun kali saya merekomendasikan menginstalnya menggunakan nvm Ketikan perintah berikut ini:


Instal nvm



apt-get update

// install c++ compiler
apt-get install build-essential libssl-dev

// install nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

// reload bash
source ~/.bashrc

// setelah instalasi, tutup dan buka kembali terminal
nvm --version


Instal node



// install note versi mutakhir
nvm install node

// mengubah default node untuk versi nvm
nvm alias default node

// cek versi
node -v
npm -v


Instal Java dan Android SDK

Untuk menjalankan React Native memerlukan jdk versi 8 keatas juga android sdk.


Instal Java JDK8


 
sudo apt install openjdk-8-jre openjdk-8-jdk


Instal Android Studio dan Android SDK

Jika kamu ingin menginstallnya menggunakan Android studio, kamu bisa mengunduhnya disitus Android Studio Official, selain itu kamu juga bisa langsung menggunakan emulator bawaan android studio. Tapi karena saya tidak memakai android studio karena ketebatasan spek. maka saya memilih instalasi Android SDK-nya saja.


 
sudo apt-get install android-sdk


Konfigurasi Build Path pada .bash_info, .zhrc atau .bashrc

pada laptop saya hanya menemukan .bashrc. ketikan perintah:


 
nano ~/.bashrc


Setelah itu kamu akan ada di text editor terminal linux dan tempelkan kode berikut:


 
#add sdk
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=/home/codepelajar/Android/Sdk/tools:/home/codepelajar/Android/Sdk/p$

# Set alias to shorten command to run emulator
alias run-emu="emulator @pixel2"


Jangan lupa ganti codepelajar dengan username pada direktori home sobat. Setelah itu save dan reload .bashrc.


 
source ~/.bashrc


Menginstal Emulator untuk Android Genymotion

Jika kamu menggunakan Android Studio untuk Emulatornya, maka kamu bisa melewati untuk tahap ini loncat langsung kesini. Saya menggunakan software bernama Genymotion. kamu bisa mengunduhnya disini. Silahkan Buat akunnya terlebih dahulu dan download versi personal yang terbarunya.

Paket Genymotion yang di unduh berektensi .bin, cara instalasinya kamu harus mengubah permision untuk executablenya.



 
chmod +x genymotion-3.0.0.bin

//jalankan
sudo ./genymotion-3.0.0.bin


Install Virtualbox untuk menjalankan Genymotion

Untuk menggunakan Genymotion, kamu memerlukan vitualbox agar bisa berjalan dengan baik.


 
sudo apt-get install virtualbox


Menjalankan Genymotion

Aplikasi genymotion terinstal pada direktori sistem /opt/genymotion. Untuk menjalankannya ketik perintah dibawah ini:


 
sudo /opt/genymobile/genymotion/genymotion


Setelah terbuka, login dengan akun yang tadi sobat buat, dan pilih salah satu device yang ingin dijalankan (pertama harus mengunduhnya terlebih dahulu).


Cara Instal React Native di Linux


Untuk menghubungkan Android SDK ke Genymotion di Linux kamu harus mengubah settingan ADB ke custom Android SDK seperti pada gambar di bawah ini.


Cara Instal React Native di Linux

Setelah itu coba jalankan Android.


Cara Instal React Native di Linux


Instal React Native

Setelah kita menginstal Node, Android SDK, juga emulatornya selanjutnya kita menginstal React Native.


 
npm install -g react-native-cli

Note : Jika terjadi eror, coba dengan sudo


Jika sudah selesai, kita akan membuat contoh 1 file project dengan sintak


 
react-native init appCodePelajar

//masuk direktori project
cd appCodePeljar


Lalu jalankan React Native Packager


 
react-native start


Untuk menghubungkan app react kita dengan emulator android maka ketikan perintah:


 
react-native run-android


tunggu beberapa saat karena untuk awalan react native akan mendownload beberapa pake agar bisa sukses debugging ke emulator. Jika berhasil terhubung maka akan nampak tampilannya seperti dibawah ini.


Cara Instal React Native di Linux

Permasalahan Instalasi React Native di Linux

Saat instalasi saya menemukan beberapa masalah seperti tidak terhubungnya React App dengan emulator padahal SDK dan Emulator Genymotion sudah menyala. Kalau tidak salah tulisannya seperti ini:


 
error: no devices/emulators found


Cara mengatasinya adalah bukan Emulator Genymotion, dan buka devicenya. pergi ke pengaturan >> about >> klik 3x build product sampai terbuka menu developer menu dan masuk centak ADB debuggingnya.


Permasalahan lainnya adalah ketika kita melakukan pull projek orang lain atau mencoba demo dari github lalu saat kita jalankan react error ENOSPC, maka cara memperbaikinya adalah dengan mengetikan sintak berikut:



 
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p


Masalah yang tidak kalah membingunkan lainnya adalah ketika kita hendak menjalankan emulator dengan melakukan run-android tulisan eror Error: spawn EACCES. ini karena ada salah satu file di react native yang perlu kita aktifkan perizinan eksekusi filenya (ini lumrah terjadi di linux). Seperti pada treath yang saya temukan di forum stack overflow berikut disini.


The solution feels like a hack.. The problem is that the gradlew file in the android folder isn't executable anymore because you cloned it from a git repo.

Basically, when you do react-native run-android, It does a lot of thing which includs running commands for you such as cd android && ./gradlew installDebug. right there, it tries to execute the gradlew, but can't, cause the file isn't executable. which is why you get that error.

just cd into the android folder, and do chmod +x gradlew. That should fix it, instead of copying files..

Intinya seperti yang saya katakan kita harus mengallowed-kan execute pada file gradlew yang ada di direktori android dalam folder project



 
cd android/
chmod +x ./gradlew


Baik itu saja yang bisa saya sampaikan sekarang, memang tidak banyak dan sedikit membingungkan. Tapi semoga bisa bermanfaat bagi kamu yang mencari solusi atas permasalahan yang sama terjadi pada saya. Terima kasih telah berkunjung di code pelajar dan nantikan tutorial lainnya juga.


Artikel ini hanya untuk arsip admin disini, jika kamu bertanya "kemana aja min baru belajar react?" so what? saya baru belajar pemograman 2018 :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel