Panduan React Native Expo untuk Pemula: Membuat Aplikasi Mobile dari Nol

Kalau kamu ingin belajar membuat aplikasi Android dan iOS menggunakan JavaScript atau TypeScript, salah satu teknologi yang menarik untuk dipelajari adalah React Native.

Namun, ketika pertama kali membaca tutorial React Native, kamu mungkin langsung menemukan banyak istilah seperti Android Studio, Xcode, Gradle, CocoaPods, SDK, emulator, dan konfigurasi native lainnya.

Buat pemula, ini bisa terasa cukup membingungkan.

Nah, di sinilah Expo menjadi menarik.

Expo membuat proses memulai project React Native menjadi jauh lebih sederhana. Kamu bisa membuat project, menjalankannya di smartphone, dan mulai belajar membuat aplikasi tanpa harus langsung berhadapan dengan banyak konfigurasi native.

Pada artikel ini, kita akan membahas Expo React Native dari dasar sampai membuat aplikasi sederhana.

Apa Itu React Native?

Sebelum membahas Expo, kita perlu memahami React Native terlebih dahulu.

React Native adalah framework untuk membuat aplikasi mobile menggunakan teknologi React dan JavaScript atau TypeScript.

Dengan React Native, kita bisa membuat aplikasi untuk:

• Android
• iOS

Menariknya, kita dapat menggunakan satu codebase untuk kedua platform tersebut.

Misalnya kita membuat aplikasi To Do List. Daripada membuat aplikasi Android menggunakan Kotlin dan aplikasi iOS menggunakan Swift secara terpisah, kita bisa menggunakan React Native untuk mengembangkan keduanya.

Website resmi React Native:

https://reactnative.dev

Lalu, Apa Itu Expo?

Expo adalah platform dan framework yang dibangun di atas React Native untuk mempermudah proses pengembangan aplikasi mobile.

Website resminya:

https://expo.dev

Kalau React Native adalah mesin utamanya, Expo bisa dianggap sebagai kumpulan tools yang membuat pengalaman development menjadi lebih praktis.

Expo menyediakan berbagai fitur dan tools untuk membantu developer, misalnya:

• Membuat project React Native
• Menjalankan aplikasi
• Testing di smartphone
• Mengakses kamera
• Mengakses lokasi
• Push notification
• Image picker
• Build aplikasi
• Deployment aplikasi

Jadi, daripada mengurus banyak konfigurasi dari awal, developer bisa lebih fokus membuat aplikasi.

Kenapa Pemula Sebaiknya Mencoba Expo?

Salah satu masalah yang sering dialami pemula ketika belajar React Native adalah setup environment.

Untuk React Native dengan pendekatan native secara langsung, kita biasanya perlu mempersiapkan:

• Node.js
• JDK
• Android Studio
• Android SDK
• Android Emulator
• Xcode untuk iOS
• CocoaPods untuk iOS

Belum lagi masalah environment variable dan versi dependency.

Dengan Expo, proses awal tersebut bisa dibuat lebih sederhana.

Bukan berarti Expo menghilangkan seluruh kebutuhan native. Namun, Expo memberikan abstraction dan tools yang membuat developer tidak perlu langsung mengurusi semuanya.

Apa yang Harus Dipersiapkan?

Sebelum membuat project Expo, siapkan beberapa tools berikut:

• Node.js
• Text editor atau IDE
• Smartphone Android atau iPhone
• Koneksi internet

Untuk text editor, kamu bisa menggunakan Visual Studio Code.

Website:

https://code.visualstudio.com

Pastikan Node.js sudah terinstall.

Untuk mengeceknya, buka Terminal atau Command Prompt:

node -v

Kemudian cek npm:

npm -v

Kalau kedua command tersebut menampilkan versi, berarti Node.js sudah siap digunakan.

Membuat Project Expo Pertama

Sekarang kita masuk ke bagian yang paling menarik.

Untuk membuat project Expo baru, gunakan:

npx create-expo-app@latest

Command tersebut akan menjalankan tool create-expo-app untuk membuat project baru.

Kamu akan diminta menentukan nama project.

Misalnya:

my-first-app

Setelah proses selesai, masuk ke folder project:

cd my-first-app

Kemudian jalankan development server:

npx expo start

Biasanya Expo akan menampilkan QR code di terminal atau browser.

QR code inilah yang nantinya dapat digunakan untuk membuka aplikasi pada smartphone.

Menggunakan Expo Go

Untuk belajar dan melakukan eksperimen sederhana, kamu dapat menggunakan aplikasi Expo Go di smartphone.

Install Expo Go dari store sesuai perangkat yang digunakan.

Setelah itu:

1. Jalankan npx expo start.
2. Pastikan komputer dan smartphone berada pada jaringan yang memungkinkan keduanya saling terhubung.
3. Buka Expo Go.
4. Scan QR code.
5. Project akan dijalankan di smartphone.

Ini salah satu pengalaman yang membuat Expo menarik bagi pemula.

Kamu bisa mengubah kode di komputer dan melihat perubahan aplikasi secara cepat.

Mengenal Struktur Project Expo

Setelah project dibuat, kamu akan melihat beberapa file dan folder.

Struktur project dapat berbeda tergantung template dan versi Expo yang digunakan, tetapi secara umum kamu akan menemukan beberapa bagian seperti:

my-first-app/
├── app/
├── assets/
├── node_modules/
├── package.json
├── app.json
└── tsconfig.json

Kalau menggunakan template yang lebih sederhana atau konfigurasi berbeda, strukturnya bisa sedikit berbeda.

Jangan khawatir kalau belum memahami semuanya.

Untuk awal, kita fokus pada folder dan file yang berkaitan langsung dengan aplikasi.

Mengenal Folder App

Pada project Expo modern yang menggunakan Expo Router, folder app menjadi bagian penting.

File di dalam folder tersebut dapat digunakan untuk menentukan halaman aplikasi.

Contohnya:

app/
├── index.tsx
└── profile.tsx

index.tsx dapat menjadi halaman utama.

Sedangkan profile.tsx dapat menjadi halaman profile.

Konsep ini disebut file-based routing.

Artinya, struktur file membantu menentukan struktur navigasi aplikasi.

Membuat Tampilan Pertama

Sekarang kita coba membuat tampilan sederhana.

Misalnya:

import { Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View>
      <Text>Hello React Native!</Text>
    </View>
  );
}

Kalau kamu sudah pernah menggunakan React JS, kode tersebut mungkin terlihat familiar.

Kita menggunakan:

• View
• Text

View kurang lebih berfungsi sebagai container.

Sedangkan Text digunakan untuk menampilkan teks.

React Native Tidak Menggunakan HTML

Ini bagian yang penting bagi developer web.

Di React JS, kita biasanya menulis:

<div>
  <h1>Hello</h1>
</div>

Di React Native, kita menggunakan:

<View>
  <Text>Hello</Text>
</View>

React Native tidak menggunakan HTML DOM seperti website.

Komponen React Native akan diterjemahkan ke komponen native pada platform yang digunakan.

Membuat Button

Sekarang kita coba membuat tombol.

import { Button, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View>
      <Text>Belajar React Native</Text>

      <Button
        title="Klik Saya"
        onPress={() => alert('Tombol diklik!')}
      />
    </View>
  );
}

Ketika tombol diklik, fungsi onPress akan dijalankan.

Konsepnya sebenarnya mirip dengan event handling pada React JS.

Membuat State

Karena React Native menggunakan React, kita juga bisa menggunakan React Hooks.

Contohnya useState.

import { useState } from 'react';
import { Button, Text, View } from 'react-native';

export default function HomeScreen() {
  const [counter, setCounter] = useState(0);

  return (
    <View>
      <Text>Counter: {counter}</Text>

      <Button
        title="Tambah"
        onPress={() => setCounter(counter + 1)}
      />
    </View>
  );
}

Setiap kali tombol ditekan, nilai counter akan bertambah.

Kalau kamu sudah pernah belajar React JS, konsep seperti ini seharusnya cukup familiar.

Styling di React Native

Kalau di website kita biasanya menggunakan CSS, React Native memiliki sistem styling sendiri.

Contohnya:

import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Hello Expo!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Konsepnya masih terasa seperti CSS, tetapi penulisannya menggunakan object JavaScript atau TypeScript.

Memahami Flexbox

Kalau kamu berasal dari dunia web development, kamu akan cukup familiar dengan Flexbox.

React Native juga menggunakan Flexbox untuk layout.

Contohnya:

<View
  style={{
    flexDirection: 'row',
    justifyContent: 'space-between',
  }}
>

Kamu akan sering menggunakan property seperti:

• flex
• flexDirection
• justifyContent
• alignItems
• padding
• margin

Jadi kalau sudah menguasai CSS Flexbox, belajar layout React Native biasanya menjadi lebih mudah.

Menggunakan Komponen Expo

Salah satu keuntungan menggunakan Expo adalah tersedia berbagai package untuk mengakses fitur perangkat.

Misalnya kamu ingin mengakses kamera.

Expo memiliki package:

npx expo install expo-camera

Untuk lokasi:

npx expo install expo-location

Untuk memilih gambar:

npx expo install expo-image-picker

Jadi kamu tidak harus membuat integrasi native dari nol.

Contoh Penggunaan Camera

Setelah memasang package kamera, kita dapat menggunakan API dari Expo Camera untuk mengakses kamera perangkat.

Konsep sederhananya adalah:

import { CameraView } from 'expo-camera';

export default function CameraScreen() {
  return (
    <CameraView
      style={{
        flex: 1,
      }}
    />
  );
}

Untuk implementasi production, tentunya kita juga perlu menangani permission dan lifecycle kamera.

Namun contoh tersebut memberikan gambaran bahwa Expo menyediakan abstraction untuk fitur perangkat.

Menggunakan Location

Aplikasi seperti:

• aplikasi delivery
• aplikasi travel
• aplikasi transportasi
• aplikasi tracking

sering membutuhkan lokasi pengguna.

Dengan Expo Location, kita bisa mengakses informasi lokasi setelah meminta permission yang diperlukan.

Install:

npx expo install expo-location

Kemudian kita dapat menggunakan API location dari package tersebut.

Menggunakan API

Aplikasi mobile biasanya tidak berdiri sendiri.

Misalnya aplikasi membutuhkan data:

• user
• produk
• transaksi
• artikel

Data tersebut biasanya berasal dari backend melalui API.

Di React Native, kita dapat menggunakan fetch seperti JavaScript biasa.

Contohnya:

const response = await fetch(
  'https://example.com/api/products'
);

const data = await response.json();

Kamu juga dapat menggunakan library seperti Axios jika diperlukan.

Jadi, React Native dapat terhubung dengan backend seperti:

• Laravel
• Node.js
• Django
• ASP.NET Core
• Spring Boot

Expo dan TypeScript

Kalau kamu baru belajar React Native, JavaScript bisa menjadi langkah awal yang mudah.

Namun untuk project yang lebih besar, TypeScript sangat layak dipertimbangkan.

Contoh:

type User = {
  id: number;
  name: string;
  email: string;
};

Dengan TypeScript, struktur data menjadi lebih jelas.

Ini sangat membantu ketika project mulai memiliki banyak:

• component
• API
• screen
• state
• developer

Expo Go vs Development Build

Ini juga penting dipahami.

Expo Go sangat nyaman untuk belajar dan mencoba fitur tertentu.

Namun tidak semua kebutuhan aplikasi production dapat dijalankan langsung melalui Expo Go.

Untuk aplikasi yang membutuhkan konfigurasi native atau native module tertentu, kamu dapat menggunakan development build.

Dengan development build, kamu tetap mendapatkan workflow Expo, tetapi aplikasi memiliki native runtime yang dapat dikustomisasi sesuai kebutuhan project.

Jadi jangan menganggap Expo hanya berarti “Expo Go”.

Ekosistem Expo sekarang jauh lebih luas.

Apakah Expo Sama dengan React Native CLI?

Tidak persis.

React Native merupakan framework utama untuk membangun aplikasi.

Expo menyediakan tools dan framework yang membantu proses pengembangan React Native.

Secara sederhana:

React Native + Expo = workflow development yang lebih praktis.

Sedangkan pendekatan React Native tanpa Expo memberikan kontrol lebih langsung terhadap konfigurasi native project.

Namun saat ini perbedaan tersebut tidak sesederhana “Expo untuk pemula, CLI untuk profesional”.

Expo sudah memiliki berbagai kemampuan untuk project production.

Kapan Sebaiknya Menggunakan Expo?

Expo sangat cocok jika kamu:

• Baru belajar React Native.
• Sudah menguasai React JS.
• Ingin membuat MVP.
• Membuat aplikasi startup.
• Membutuhkan development yang cepat.
• Ingin menggunakan banyak fitur device yang sudah tersedia melalui Expo.
• Ingin workflow build dan deployment yang lebih praktis.

Kapan Perlu Mempertimbangkan Native Configuration?

Ada kondisi tertentu ketika kamu membutuhkan kontrol lebih dalam terhadap Android atau iOS.

Misalnya:

• native SDK tertentu
• integrasi hardware khusus
• konfigurasi native yang sangat spesifik
• kebutuhan build tertentu

Dalam kondisi seperti ini, kamu tetap bisa menggunakan pendekatan Expo dengan native project melalui tools seperti prebuild dan development build, atau memilih workflow React Native yang lebih manual jika memang diperlukan.

Jadi jangan buru-buru berpikir bahwa menggunakan Expo berarti kehilangan akses ke native.

Membuat Project Expo Sebagai Latihan

Kalau kamu baru belajar, jangan langsung membuat aplikasi marketplace yang kompleks.

Mulailah dengan project kecil.

Misalnya:

Project 1: Counter App

Pelajari:

• useState
• Button
• Text

Project 2: To Do List

Pelajari:

• FlatList
• TextInput
• State
• Component

Project 3: Weather App

Pelajari:

• API
• fetch
• loading
• error handling

Project 4: Notes App

Pelajari:

• form
• navigation
• local storage
• component architecture

Project 5: Aplikasi CRUD

Pelajari:

• REST API
• authentication
• CRUD
• database
• state management

Dengan cara seperti ini, skill kamu akan berkembang secara bertahap.

Tips Belajar Expo React Native untuk Pemula

Ada beberapa hal yang sebaiknya diperhatikan.

Jangan Terlalu Fokus pada Setup

Tujuan belajar adalah membuat aplikasi.

Jadi jangan menghabiskan waktu berhari-hari hanya untuk mengurusi konfigurasi.

Expo membantu kamu melewati bagian tersebut sehingga kamu bisa fokus belajar.

Pelajari React Terlebih Dahulu

Kalau kamu sudah memahami:

• component
• props
• state
• useEffect
• useState
• event
• conditional rendering

belajar React Native akan terasa lebih mudah.

Jangan Hanya Menonton Tutorial

Setelah mengikuti tutorial, coba ubah project.

Misalnya tutorial membuat:

Counter App

Kamu bisa mengubahnya menjadi:

Shopping Cart

Dengan begitu kamu benar-benar memahami konsepnya.

Biasakan Membaca Error

Error bukan musuh.

Justru error adalah bagian dari proses belajar programming.

Biasakan membaca:

• nama error
• file
• line number
• stack trace

Kemudian cari penyebabnya.

Menggunakan AI untuk Belajar Expo

AI coding assistant juga dapat membantu proses belajar.

Misalnya kamu menemukan error:

Unable to resolve module...

Daripada langsung meminta AI memperbaiki semuanya, coba tanyakan:

“Jelaskan penyebab error ini dan langkah debugging-nya.”

Dengan cara tersebut, AI menjadi tutor, bukan sekadar mesin pembuat kode.

Kamu dapat menggunakan berbagai AI coding tools untuk:

• menjelaskan kode
• membuat contoh component
• mencari bug
• membuat test
• memahami dokumentasi

Tetapi tetap pastikan kamu memahami kode yang dihasilkan.

Kesimpulan

Expo merupakan salah satu cara yang sangat menarik untuk mulai belajar React Native.

Dengan Expo, proses membuat project mobile menjadi lebih sederhana sehingga pemula dapat lebih fokus mempelajari konsep penting seperti:

• React Component
• State
• Props
• Navigation
• API
• Styling
• Device API
• TypeScript

Kamu juga tidak harus langsung memahami seluruh dunia native Android dan iOS sejak hari pertama.

Mulailah dari aplikasi sederhana, kemudian secara bertahap naik ke project yang lebih kompleks.

Kalau kamu sudah menguasai React JS, transisi ke Expo React Native juga bisa terasa cukup natural karena konsep dasar React masih digunakan.

Yang terpenting, jangan hanya membaca tutorial.

Install Expo, buat project pertama, jalankan di smartphone, lalu mulai coding.

Karena untuk menjadi mobile developer, pengalaman membuat aplikasi nyata jauh lebih penting daripada sekadar hafal teori.