Blog

Belajar React Native - Mencoba React Native

by
published on
Belajar React Native - Mencoba React Native

Anda memerlukan perangkat Android untuk mencoba aplikasi React Native.

Perangkat tersebut bisa berupa perangkat fisik, maupun virtual (emulator).

Sebelum mencoba, pastikan kita sudah memiliki project React Native terlebih dahulu.

Untuk membuat project React Native, masuklah dalam folder apapun dengan PowerShell, kemudian jalankan perintah:

react-native init AplikasiPertama

Project akan dibuat dengan nama "AplikasiPertama".

Nama project bebas tergantung keinginan Anda.

Jika Anda ingin membuat project React Native dengan versi tertentu, gunakan perintah ini:

react-native init AplikasiPertama --version X.XX.X

Selanjutnya, akan tampil progress pembuatan project React Native.

Tunggulah hingga selesai.

Setelah selesai, Anda siap untuk mencoba untuk menjalankannya.

Mencoba di Perangkat Fisik

Untuk menjalankan aplikasi ini di perangkat fisik, pastikan Anda menggunakan Android dengan API level minimal 16 (Jelly Bean).

Selanjutnya, ikuti langkah-langkah ini.

1. Mengenable USB Debugging

Untuk mengenable USB Debugging, Anda harus mengenable "Developer Options" sebelumnya.

Caranya dengan menuju Settings > About Phone.

Kemudian tap "Build Number" sebanyak 7 kali.

Setelah itu, pergi ke "Developer Options" dan enable USB Debugging.

Bila cara ini tidak bekerja, cari di Google tentang cara untuk mengenable USB Debugging secara spesifik pada versi Android yang Anda gunakan.

2. Colok Perangkat Android Anda ke USB

Selanjutnya, Anda harus mencolokkan perangkat Android Anda ke USB komputer yang Anda gunakan untuk development React Native.

Selanjutnya cek dengan perintah adb :

adb devices

Jika hasilnya semacam ini:

List of devices attached
emulator-3334 offline
15ec2fec device

Maka dapat dipastikan perangkat fisik Android Anda telah terhubung.

Pastikan hanya satu perangkat saja yang terhubung. Ini perintah :).

Langkah terakhir, pada folder "AplikasiPertama", jalankan perintah ini:

react-native run-android

Selesai, sekarang aplikasi pertama Anda telah muncul di layar Android Anda.

Mencoba di Emulator

Untuk mencoba aplikasi React Native di emulator, kita harus menjalankan emulatornya dulu, baru diikuti dengan:

react-native run-android

1. Menjalankan Emulator

Untuk menjalankan emulator, buka Android Studio Anda, kemudian klik Configure > AVD Manager.

Jika sudah ada, jalankan emulator tersebut dengan mengklik tombol play yang ada di daftar.

Tunggu beberapa saat hingga emulator muncul secara sempurna.

2. Menjalankan Perintah run-android

Setelah emulator berjalan secara sempurna, maka jalankan perintah ini dari folder "AplikasiPertama":

react-native run-android

Tunggu beberapa saat dan setelah selesai, maka aplikasi Anda akan muncul di layar emulator.

Memahami Struktur Project React Native

Anda telah mengetahui dari perintah PowerShell sebelumnya bahwa project React Native dibuat dengan perintah:

react-native init NamaProject

Perintah ini akan menggenerate beberapa file dan folder yang bisa Anda lihat pada folder "NamaProject".

Yang jadi perhatian kita saat ini adalah peran dari file-file tersebut pada pembuatan aplikasi React Native.

App Registry

Jika Anda buka file "index.js" dari folder "AplikasiPertama", Anda akan melihat kode semacam ini:

/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

File ini adalah entry point yang mana pertama kali dijalankan ketika perintah react-native run-android dijalankan.

Tampak di sini telah diimpor AppRegistry dari modul "react-native", kemudian modul App dari file "./App.js" dan nama projectnya dari "./app.json".

Jadi dengan kata lain, kita mengimpor Component utama dari project ini dari file "App.js".

Perlu Anda ketahui bahwa dalam React Native, pengimporan file .js tidak perlu menyertakan ekstensinya.

Jadi:

import App from './App'

Dan:

import App from './App.js'

Keduanya sama saja.

AppRegistry selanjutnya mendaftarkan Component "App" sebagai Component utama dalam aplikasi ini:

AppRegistry.registerComponent(appName, () => App);

Dan App didaftarkan dengan nama appName yang didapatkan melalui "app.json".

Folder "android"

Di dalam project "AplikasiPertama", Anda akan melihat folder bernama "android".
Ini adalah folder di mana kode native dari Android berada.

Kita jarang mengedit isi dari folder ini, kecuali nanti ketika kita melakukan navigasi antar Component dalam React Native.

Folder "ios"

Adapun folder ini adalah tempat di mana kode native dari IOS berada.

Karena kita hanya membahas Android saja dalam buku ini, maka folder ini tidak terlalu berpengaruh.

Folder "node_modules"

Folder ini adalah tempat di mana modul-modul luar NPM yang telah diinstall berada.

Anda bisa melihat modul-modul NPM yang telah diinstall dari file "package.json" ini:

{
  "name": "AplikasiPertama",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.8"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/runtime": "7.4.5",
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Tepatnya pada bagian ini:

"dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.8"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/runtime": "7.4.5",
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.3"
  },

Anda bisa mencocokkannya pada folder "node_modules".

Di sana juga ada folder "react", "react-native", "babel-jest" dan seterusnya.

File "app.json"

File ini berperan dalam pemberian nama aplikasi React Native.

File ini tidak harus ada jika kita ingin melakukan hardcoding untuk nama aplikasi kita.

Untuk membaca bab-bab studi kasus tutorial ini, baca ebook "Javascript for Everything" ini.