Tutorial Instalasi React Native & Membuat Project Hello World di Windows

React Native memungkinkan pengembang web untuk membangun aplikasi mobile native menggunakan JavaScript. Bagi pengguna Windows seperti saya, pengembangan difokuskan pada platform Android.

Berikut adalah dokumentasi praktikum saya dalam membuat aplikasi React Native pertama bernama "MyProject".

Memeriksa Syarat Instalasi (Node.js)

Sebelum memulai instalasi kerangka kerja, hal paling krusial adalah memastikan runtime environment JavaScript sudah tersedia. React Native membutuhkan Node.js agar dapat berjalan.

Saya memeriksa instalasi Node.js di komputer saya dengan membuka Command Prompt (CMD) dan mengetik perintah: node -v

Hasilnya, terminal menampilkan versi v22.21.0, yang menandakan bahwa komputer saya sudah siap untuk menjalankan perintah-perintah React Native.

Inisialisasi Project via CLI

Setelah memastikan Node.js terinstal, saya membuat proyek baru. Saya tidak menginstal CLI secara global, melainkan menggunakan npx untuk selalu mendapatkan versi terbaru.

Perintah yang saya gunakan di CMD:

npx @react-native-community/cli@latest init MyProject

Sistem kemudian mengunduh paket yang diperlukan (seperti @react-native-community/cli) dan membuat folder proyek baru beserta seluruh dependensinya.

Struktur Project di Android Studio

Setelah inisialisasi selesai, saya membuka folder MyProject menggunakan Android Studio

Struktur file React Native terlihat jelas di sini. File utama yang mengatur tampilan awal aplikasi adalah App.tsx (karena template ini menggunakan TypeScript). Di bagian bawah editor, saya membuka terminal bawaan VS Code untuk mempersiapkan perintah selanjutnya.

Di file App.tsx, saya melakukan perubahan pada baris 30-32 dengan memberikan "<Text> Hello World!</Text>"

Menjalankan Perintah Run

Untuk menjalankan aplikasi ke emulator, kita tidak menekan tombol "Play" seperti di Android Studio, melainkan menggunakan perintah terminal.

Saya mengetikkan perintah berikut di terminal VS Code:

npx react-native run-android

Perintah ini akan memicu proses build Gradle dan mencoba mendeteksi emulator Android yang aktif.

Hasil Akhir (Hello World)

Setelah proses build selesai (ditandai dengan pesan "BUILD SUCCESSFUL" di terminal), aplikasi otomatis terbuka di Android Emulator.

Secara default, template React Native menampilkan layar putih sederhana dengan tulisan "Hello World!". Ini membuktikan bahwa lingkungan pengembangan (Environment) di Windows sudah terkonfigurasi dengan benar dan siap digunakan untuk pengembangan lebih lanjut.

Kesimpulan

Pengalaman memulai React Native di Windows ternyata cukup straightforward asalkan Android SDK dan Node.js sudah terpasang. Penggunaan VS Code yang ringan dikombinasikan dengan Metro Bundler membuat alur kerja terasa modern dan cepat.