Back to blog

Setup React Native di Windows

Panduan setup React Native menggunakan Expo di Windows, dari install sampai aplikasi berhasil dijalankan di HP atau emulator.

#react native#expo#mobile development#windows#tutorial

Setup React Native Pakai Expo di Windows

Supaya setup-nya React Nativenya tidak terlalu ribet dan tidak habis waktu di konfigurasi, let's use Expo.

Expo itu tooling yang membungkus React Native (semacam vite kalo di React.js). Dia udah nyiapin banyak hal di belakang layar, jadi kita bisa langsung fokus ke jalanin project dan nulis kode, tanpa harus ngurus setting native Android dari awal.

Untuk run aplikasinya, ada dua opsi:

  • Pakai HP dengan aplikasi Expo Go
  • Pakai Android Emulator di laptop

Yang Perlu Disiapkan

Sebelum mulai, pastikan:

  • Laptop Windows
  • Koneksi internet stabil
  • Terminal (Command Prompt, PowerShell, atau Git Bash)

Install Node.js

React Native lewat Expo tetap butuh Node.

Langkah:

  1. Buka website resmi Node.js
  2. Download versi LTS
  3. Install

Setelah selesai, cek lewat terminal:

node -v
npm -v

Kalau versi muncul, berarti Node sudah terinstall.

Install Expo

Expo berfungsi sebagai tooling utama untuk menjalankan React Native tanpa ribet konfigurasi native.

Panduan resmi instalasi bisa kamu lihat di Dokumentasi Expo.

Install global:

npm install -g expo

Cek apakah sudah ter-install:

expo --version

Kalau muncul versi, lanjut.

Kalau kena error permission di Windows, jalankan terminal sebagai Administrator.

Membuat Project Baru

Masuk ke folder kerja masing-masing. Contoh:

cd D:\projects

Buat project baru:

npx create-expo-app myApp

Referensi resminya ada di Create Expo App Docs.

Saat diminta memilih template, pilih:

  • blank

Masuk ke folder project:

cd myApp

Menjalankan Project

Jalankan perintah:

npm start

atau

expo start

Browser akan otomatis terbuka menampilkan Expo DevTools.

Di layar akan muncul QR code.

Dua Opsi Menjalankan Aplikasi

Setelah project jalan, ada dua cara untuk melihat aplikasi:

  1. Pakai HP (Expo Go)
  2. Pakai Android Emulator

Keduanya sama-sama valid. Pilih sesuai kondisi masing-masing.

Kalau punya HP pribadi dan satu jaringan dengan laptop, pakai HP biasanya lebih cepat dan stabil.

Kalau ingin full testing di laptop, bisa pakai emulator.

Bebas pilih mana aja, yang penting aplikasinya bisa muncul dan jalan.

Menjalankan App di HP

Ini cara paling cepat dan stabil.

Install aplikasi Expo Go:

Langkah:

  1. Install aplikasi Expo Go di HP
  2. Pastikan laptop dan HP berada di jaringan yang sama
  3. Scan QR code dari browser
  4. Tunggu proses bundling selesai

Kalau tidak ada error, aplikasi akan langsung tampil di HP.

Kalau sudah sampai tahap ini, setup dianggap selesai.

Menjalankan App di Emulator (Kalau Belum Punya Android Studio)

Kalau kamu tidak pakai HP pribadi atau ingin full testing di laptop, kamu bisa pakai Android Emulator. Tapi syaratnya harus install Android Studio dulu.

Install Android Studio

Download Android Studio dari website resmi Android Studio.

Langkah:

  1. Download Android Studio
  2. Install seperti biasa
  3. Saat pertama kali buka, ikuti wizard setup sampai selesai

Pastikan komponen ini ikut ter-install:

  • Android SDK Platform
  • Android Emulator

Biasanya sudah otomatis tercentang saat setup awal.

Membuat Emulator

Panduan lengkapnya bisa kamu lihat di Managing Virtual Devices.

Langkah:

  1. Buka Android Studio
  2. Masuk ke menu Device Manager
  3. Klik Create Virtual Device
  4. Pilih device (Pixel bebas)
  5. Download system image (kalau belum ada)
  6. Finish dan jalankan emulator

Tunggu sampai emulator benar-benar menyala seperti HP Android.

Menjalankan Expo ke Emulator

Pastikan:

  • Emulator sudah running
  • Project Expo masih aktif di terminal

Di terminal Expo, tekan:

a

Expo akan otomatis mendeteksi emulator dan menjalankan aplikasi di sana.

Kalau emulator tidak terdeteksi, biasanya karena emulator belum ready atau Android Studio belum selesai setup.

Catatan Kalau Ada Kendala

Beberapa masalah yang sering muncul:

  • Node belum ter-install dengan benar
  • Port terblokir firewall atau VPN
  • HP dan laptop beda jaringan
  • Expo gagal start karena cache

Kalau Expo bermasalah, restart:

ctrl + c
npm start

Biasanya langsung normal lagi.