Panduan Instalasi React Native dengan VS Code & Membuat Aplikasi "Hello World"

React Native adalah framework populer yang memungkinkan kita membuat aplikasi mobile (Android & iOS) hanya dengan menggunakan JavaScript atau TypeScript. Dalam panduan ini, kita akan belajar cara menyiapkan lingkungan kerja (environment) menggunakan VS Code dan membuat aplikasi pertama kita.

LANGKAH 1: Instalasi Node.js

Sebelum memulai, hal wajib yang harus dimiliki adalah Node.js. Ini adalah runtime yang dibutuhkan untuk menjalankan JavaScript di luar browser.
  1. Kunjungi situs resmi Node.js.
  2. Download versi LTS (Long Term Support) agar lebih stabil.
  3. Lakukan instalasi seperti biasa.
LANGKAH 2: Membuat Project Baru via CLI


Setelah Node.js terinstal, kita akan membuat proyek baru menggunakan Command Line Interface (CLI). Kita tidak perlu menginstal CLI secara global, cukup gunakan npx.
  1. Buka Command Prompt (CMD) atau Terminal di folder tujuanmu.
  2. Ketik perintah berikut: npx @react-native-community/cli init myapp
  3. Tekan Enter dan tunggu prosesnya. Kamu akan melihat logo React Native yang ikonik terbentuk dari karakter teks saat proses inisialisasi berhasil.
LANGKAH 3: Membuka Project di Visual Studio Code
Sekarang, buka folder myapp yang baru saja dibuat menggunakan Visual Studio Code.
Struktur file akan terlihat di panel kiri. File utama yang akan kita edit adalah App.tsx. Di sini kita akan menulis kode TypeScript untuk tampilan aplikasi.

Kita akan mengubah kode bawaan untuk membuat tampilan sederhana yang menampilkan teks "Hello World!" di tengah layar dengan gaya bold dan warna biru.

Salin kode berikut ke dalam App.tsx:


LANGKAH 4: Menjalankan Aplikasi (Running)
Setelah kode disimpan, saatnya menjalankan aplikasi. Pastikan kamu sudah membuka Android Emulator atau menghubungkan HP Android fisik.

Buka terminal di dalam VS Code (Ctrl + ).
Jalankan perintah: npm start lalu tekan a untuk Android, atau langsung ketik: npx react-native run-android
Tunggu proses building selesai. Kamu akan melihat status persentase eksekusi di terminal (misalnya: 94% EXECUTING).


LANGKAH 5: Hasil Akhir Aplikasi
Jika proses build sukses (BUILD SUCCESSFUL), aplikasi akan otomatis terbuka di Emulator.

Selamat! Kamu berhasil membuat aplikasi React Native pertamamu. Tampilannya akan bersih dengan tulisan "Hello World!" berwarna biru tepat di tengah layar, sesuai dengan styling yang kita buat tadi.



Komentar

Posting Komentar

Postingan populer dari blog ini

Tutorial: Cara Instalasi Flutter di VS Code & Membuat Aplikasi "Hello World" Pertama

Gambar
Flutter adalah UI toolkit dari Google yang memungkinkan kita membuat aplikasi menawan untuk mobile, web, dan desktop hanya dari satu basis kode (codebase). Jika sebelumnya kita membahas Android Native dan React Native, kali ini kita akan mencoba Flutter. Ikuti panduan lengkap instalasi dan pembuatan proyek pertamanya di bawah ini. 1. Langkah 1: Persiapan & Instalasi Flutter SDK Langkah pertama adalah mengunjungi dokumentasi resmi Flutter untuk mengunduh SDK yang sesuai dengan sistem operasi kamu (Windows). Pastikan kamu mengikuti panduan "Install Flutter using VS Code" agar terintegrasi dengan baik. Setelah proses instalasi dan pengaturan Path selesai, kita perlu memverifikasi apakah Flutter sudah terinstal dengan benar. Buka Command Prompt (CMD) dan ketik perintah: flutter --version Jika sukses, akan muncul detail versi Flutter dan Dart seperti gambar di bawah (versi 3.4.0). 2. Langkah 2: Setup Visual Studio Code Agar coding lebih mudah, kita wajib menginstal ekstensi re...
Baca selengkapnya

Tutorial Panduan Instalasi Android Studio dan Kotlin

Gambar
Halo temen-temen semuanya!! Pada kesempatan kali ini, saya akan membuat tutorial lengkap mengenai cara menginstal Android Studio beserta Flutter, kemudian melanjutkannya dengan membuat project baru dan menjalankannya melalui Android Studio menggunakan Android Virtual Device (AVD). Tutorial ini ditujukan bagi temen-temen yang ingin mulai belajar pengembangan aplikasi perangkat bergerak, khususnya dengan framework Flutter dan environment Android Studio. Setiap langkah akan dijelaskan secara berurutan agar mudah diikuti, mulai dari proses instalasi, konfigurasi SDK, pembuatan project HelloWorld, hingga menjalankan aplikasi pada emulator Android. Apa itu Andorid Studio? Android Studio adalah IDE resmi untuk membuat dan membangun aplikasi Android. Android Studio dikembangkan oleh Google dan dibangun di atas IntelliJ IDEA milik JetBrains, sehingga menyediakan fitur-fitur khusus yang dioptimalkan untuk pengembangan aplikasi Android. Bahasa pemrograman utama yang digunakan dalam pengembangan A...
Baca selengkapnya

Tutorial: Panduan Instalasi Xcode di macOS & Membuat Project iOS "Hello World" Pertama

Gambar
Xcode adalah Integrated Development Environment (IDE) resmi dari Apple yang digunakan untuk membuat aplikasi untuk iOS, macOS, watchOS, dan visionOS. Jika kamu ingin menjadi iOS Developer , langkah pertama yang harus dilakukan adalah menginstal Xcode. Pada panduan ini, kita akan membahas cara menginstal Xcode versi terbaru dan membuat aplikasi sederhana pertama kita. 1. Langkah 1: Unduh dan Instal Xcode dari App Store Langkah pertama adalah mendapatkan Xcode. Cara termudah dan teraman adalah melalui Mac App Store. Buka App Store di Mac kamu. Cari kata kunci "Xcode". Klik tombol Get atau Install. Tunggu hingga proses unduhan selesai. Catatan: Ukuran file cukup besar (sekitar 12GB+), jadi pastikan koneksi internetmu stabil. Seperti yang terlihat pada gambar di bawah, kita menggunakan versi terbaru (Xcode 26.0.1). Tampilan halaman Xcode di Mac App Store. Setelah selesai diunduh, klik Open untuk membuka aplikasi. 2. Langkah 2: Halaman Welcome to Xcode Saat pertama kali membuka X...
Baca selengkapnya