Muhammad Farhan Al Ghifari - 24060123140186 - React-Native

Tutorial React Native: Satu Kodingan untuk Android & iOS (Project HelloWorld)

Halo lagi! 👋

Kalau kemarin kita sudah mencoba jalur "murni" dengan Android Studio, sekarang kita akan mencoba jalur Multiplatform. Bayangkan: Anda menulis kode satu kali, tapi hasilnya bisa jadi aplikasi Android dan aplikasi iOS (iPhone). Itulah keajaiban React Native.
Di tutorial ini, kita akan menggunakan Expo. Kenapa? Karena ini cara tercepat membuat aplikasi React Native tanpa perlu pusing setting environment yang berat.

Siap? Yuk, kita mulai!

Berbeda dengan Android Studio yang "terima jadi", untuk React Native kita butuh menginstal 2 alat bantu utama:

• Node.js LTS (Wajib): Ini adalah mesin untuk menjalankan JavaScript di luar browser.
• VS Code (Disarankan): Text editor paling enak buat ngoding React Native.
• Git (Opsional tapi penting): Untuk manajemen file.

Langkah 1: Cek/Install Node.js

React Native tidak bisa jalan tanpa ini.

1. Buka terminal (Command Prompt/PowerShell) di laptop Anda.

2. Ketik: node -v lalu Enter.

3. Jika muncul angka versi (misal v20.10.0), lanjut ke Bagian 1.

4. Jika error, download dulu di nodejs.org (Pilih versi LTS), install, lalu restart laptop.

Pastikan Node.js sudah terinstall versi LTS

Langkah 2: Membuat Project Baru

Kita tidak pakai tombol "New Project" visual seperti di Android Studio, tapi kita pakai perintah sakti di Terminal.

Langkah 3: Buka Terminal di Folder Tujuan

1. Buka File Explorer, masuk ke folder di mana Anda ingin menyimpan project.

2. Klik kanan di ruang kosong, pilih Open in Terminal (atau Git Bash).

Langkah 4: Perintah Pembuatan Project

Ketik perintah berikut ini untuk membuat project bernama HelloWorld:

npx create-expo-app HelloWorld

Tekan Enter. Biasanya default terpilih template Default, Tunggu proses download selesai sampai muncul tulisan "Your project is ready!".

Langkah 5: Buka Project

Sekarang kita masuk ke folder yang baru dibuat tadi. Ketik perintah ini di terminal:

cd HelloWorld

code .

Perintah code . akan otomatis membuka VS Code di folder tersebut. Jika tidak bisa, buka VS Code manual -> File -> Open Folder -> Pilih folder HelloWorld

Langkah 5: Intip Struktur File

Di sisi kiri VS Code, Anda akan melihat banyak file. Jangan panik! Fokus saja ke folder app jika menggunakan Expo Router terbaru.

• Inilah "jantung" aplikasi kita.

Nah, ini bagian serunya. Kita akan menjalankan server pengembangan.

Langkah 6: Jalankan Server Expo

Di dalam VS Code, buka terminal bawaan (Menu: Terminal > New Terminal). Ketik perintah:

npx expo start

Tunggu sebentar. Anda akan melihat QR Code besar muncul di terminal. Ini artinya server sudah jalan!

Langkah 7: Lihat Hasilnya (Ada 2 Cara)

Cara A: Pakai HP Asli (Paling Gampang)

1. Download aplikasi Expo Go di Play Store (Android) atau App Store (iOS).

2. Buka aplikasinya, scan QR Code yang ada di terminal tadi.

3. Boom! Aplikasi akan muncul di HP Anda.

Cara B: Pakai Emulator Android Studio (Yang sudah kita buat) Karena Anda sudah install Android Studio kemarin, kita manfaatkan!

1. Pastikan Emulator Android Studio sudah nyala.

2. Di terminal VS Code (tempat QR Code tadi), tekan tombol huruf a di keyboard.

3. Expo akan otomatis mendeteksi emulator dan menginstal aplikasi ke sana.

Aplikasi berhasil berjalan di Emulator Android!

Selamat! 🎉

Anda baru saja membuat aplikasi cross-platform pertama Anda. Dengan satu project ini, secara teknis Anda sudah punya bakal aplikasi untuk Android dan iOS sekaligus. 

Selanjutnya, silakan bereksperimen mengganti warna background atau menambah gambar. Sampai jumpa di tutorial berikutnya!

Posted by Muhammad Farhan Al Ghifari, Informatics Students at Diponegoro University