Panduan Instalasi React Native

 React Native

Prasyarat Wajib Sebelum Membuat Proyek React Native

Sebelum mengikuti tutorial instalasi ini, pastikan di komputer/pc kalian sudah terinstall Node.js. Code Editor (misalnya Visual Studio Code). Node.js berfungsi sebagai lingkungan runtime yang menjalankan JavaScript di luar browser. Node.js juga mencakup npm (Node Package Manager) atau Yarn, yang digunakan untuk mengelola semua library dan dependensi yang dibutuhkan proyek React Native Anda. Jika belum menginstall Node.js, silahkan download dari laman berikut https://nodejs.org/en/download .

Perbedaan React Native CLI dan Expo

Dalam ekosistem React Native, ada dua pendekatan utama untuk memulai proyek. Perbedaan utamanya terletak pada cara proyek di-build dan dependensi native dikelola.

1. React Native CLI (Command Line Interface)

CLI adalah pendekatan "bare metal" atau dasar dalam React Native.

• Definisi: Mengacu pada tool baris perintah yang menghasilkan folder proyek dengan semua konfigurasi native (folder android dan ios) siap dikembangkan.

• Kelebihan: Memberikan kendali penuh (full control) atas modul dan konfigurasi native Anda. Cocok untuk proyek besar yang memerlukan banyak modul native kustom (misalnya, Bluetooth level rendah atau library pihak ketiga yang sangat spesifik).

• Kekurangan: Kompleks untuk pemula. Anda harus berurusan langsung dengan Gradle, Xcode, dan seringkali membutuhkan waktu setup yang lebih lama dan rawan error konfigurasi.

2. Expo (Expo CLI & Expo Go)

Expo adalah kerangka kerja dan platform yang membuat pengembangan React Native menjadi lebih mudah.

• Definisi: Menyediakan serangkaian tool dan library yang telah dikonfigurasi sebelumnya. Anda hanya menulis JavaScript/TypeScript, dan Expo menangani semua konfigurasi native di balik layar.

• Kelebihan: Sangat cepat untuk setup. Hampir tanpa konfigurasi native. Memungkinkan testing instan dengan memindai Kode QR melalui aplikasi Expo Go di ponsel Anda.

• Kekurangan: Membatasi akses Anda ke native code tertentu. Jika Anda butuh library native di luar yang disediakan Expo, Anda harus menggunakan EAS Build atau "mengeluarkan" (eject) proyek dari Expo ke CLI (bare React Native).

Pada Kesempatan ini saya akan menggunakan React Native Expo.

Tutorial Instalasi Project React Native - Expo

1. Tentukan lokasi proyek anda akan disimpan nantinya, kemudian buka dengan VS Code (klik kanan > show more option > open with code).

2. Buka terminal di vs code anda, kemudian jalankan perintah "npx create-expo-app@latest namaProyek" (misal HelloWorldRN), tunggu hingga proses instalasi project selesai.

3. Masuk kedalam proyek anda dengan perintah "cd HelloWorldRN" 

4. Buka file app/(tabs)/index.tsx lalu ganti baris 21 “Welcome!” dengan “Hello World!”, kemudian simpan (Ctrl+S).

5. Buka Terminal kembali dan jalankan perintah "npx expo start" , akan muncul beberapa opsi untuk menampilkan proyek, anda bisa menampilkan project di HandPhone anda dengan scan QR yang tampil, silahkan download aplikasi Expo Go di playStore. Disini saya menampilkan project via Web dengan klik tautan "https://localhost:8081".

6. Di layar web akan tampil proyek React Native yang sudah dibuat.

Tutorial Instalasi Lainnya:

Home    |    Android Studio    |    XCode    |    React Native    |    Flutter    |    KMM