Satu Kode untuk Semua: Menaklukkan Dunia Multi-Platform dengan React Native dan Expo

Pernahkah Anda membayangkan membangun aplikasi yang bisa berjalan di Android, iOS, Web, bahkan Desktop sekaligus tanpa harus menulis ulang logika bisnisnya? Selamat datang di era Modern Cross-Platform Development. Dalam jurnal belajar kali ini, kita akan membedah bagaimana teknologi Expo memudahkan para developer untuk melompat ke dunia mobile tanpa rasa takut.

Tahap 1 Persiapan Amunisi

Sebelum berperang dengan kode, pastikan lingkungan kerja Anda sudah siap. Anda hanya membutuhkan tiga alat utama:

• Node.js: Mesin utama yang menjalankan ekosistem JavaScript.
• VS Code: Kanvas tempat kita melukis logika aplikasi.
• Expo Go: Aplikasi di smartphone yang memungkinkan kita melihat hasil kerja secara real-time tanpa kabel.

Tahap 2 Struktur Folder: Peta Harta Karun

Saat memulai proyek dengan perintah npx create-expo-app@latest, Anda akan melihat struktur folder yang rapi. Pada versi terbaru, Expo menggunakan Expo Router yang berbasis file sistem. Jika Anda ingin merubah tampilan utama, arahkan radar Anda ke folder app/(tabs)/index.tsx.

Ingat, di dunia React Native, kita tidak mengenal <div> atau <button>. Kita berbicara dalam bahasa Native:

• View: Wadah/Container untuk elemen lain.
• Text: Komponen wajib untuk setiap huruf yang ingin ditampilkan.
• TouchableOpacity: Komponen ajaib yang memberikan umpan balik visual saat disentuh.

Tahap 3 Logic: Menghidupkan Aplikasi

Aplikasi yang statis itu membosankan. Untuk membuatnya interaktif, kita menggunakan State. Bayangkan State adalah ingatan jangka pendek aplikasi. Ketika State berubah, aplikasi akan otomatis menggambar ulang dirinya tanpa perlu reload manual.

const [jumlahKlik, setJumlahKlik] = useState(0);

const tambahKlik = () => {
    setJumlahKlik(jumlahKlik + 1);
};

Tahap 4 Projek Final: Simple Counter Interaktif

Berikut adalah hasil akhir kode yang telah kita kembangkan. Kode ini sudah mencakup styling kustom, fungsi penambahan, fitur reset, hingga tombol tambahan untuk eksperimen:

import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity, Alert } from "react-native";

export default function HomeScreen() {
  const [jumlahKlik, setJumlahKlik] = useState(0);

  const tambahKlik = () => setJumlahKlik(jumlahKlik + 1);
  const resetKlik = () => {
    setJumlahKlik(0);
    Alert.alert("Info", "Penghitung telah direset!");
  };
  const TombolAsal = () => {
    setJumlahKlik(jumlahKlik + 10);
    Alert.alert("Info", "Sampel Tombol Asal Aja");
  };

  return (
    <View style={styles.container}>
      <Text style={styles.Judul}>Sampel Judul Buatan Sendiri</Text>
      <Text style={styles.title}>Aplikasi Interaktif</Text>

      <View style={styles.counterBox}>
        <Text style={styles.number}>{jumlahKlik}</Text>
        <Text>Total Klik</Text>
      </View>

      <TouchableOpacity style={styles.button} onPress={tambahKlik}>
        <Text style={styles.buttonText}>Klik Saya!</Text>
      </TouchableOpacity>

      <TouchableOpacity style={[styles.button, styles.buttonSecondary]} onPress={resetKlik}>
        <Text style={styles.buttonText}>Reset</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button1} onPress={TombolAsal}>
        <Text style={styles.buttonText}>Tombol Asal</Text>
      </TouchableOpacity>
    </View>
  );
}

// Bagian Styling (CSS-in-JS)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#f5f5f5",
  },
  Judul: {
    fontSize: 30,
    fontWeight: "bold",
    color: "#fff",
    padding: 10,
    textAlign: "center",
    backgroundColor: "#FF0000",
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    marginBottom: 20,
  },
  counterBox: {
    padding: 20,
    backgroundColor: "#fff",
    borderRadius: 15,
    alignItems: "center",
    elevation: 3,
    shadowColor: "#000",
    marginBottom: 30,
  },
  number: {
    fontSize: 50,
    fontWeight: "bold",
    color: "#007AFF",
  },
  button: {
    backgroundColor: "#007AFF",
    paddingVertical: 12,
    paddingHorizontal: 30,
    borderRadius: 8,
    marginBottom: 10,
    width: 200,
    alignItems: "center",
  },
  buttonSecondary: {
    backgroundColor: "#FF3B30",
  },
  button1: {
    backgroundColor: "#00FF00",
    paddingVertical: 12,
    paddingHorizontal: 30,
    borderRadius: 8,
    marginBottom: 10,
    width: 200,
    alignItems: "center",
  },
  buttonText: {
    color: "#fff",
    fontSize: 18,
    fontWeight: "600",
  },
});

Kesimpulan & Langkah Selanjutnya

Belajar React Native dengan Expo bukan sekadar belajar sintaks, tapi belajar cara berpikir modular. Dengan fondasi ini, Anda sudah siap untuk melangkah ke tahap berikutnya: Integrasi API, Navigasi halaman yang kompleks, hingga memproses database lokal.

Dunia pengembangan aplikasi sangat luas, namun setiap aplikasi besar selalu dimulai dari satu klik sederhana. Teruslah bereksperimen!

Ditulis dengan semangat eksplorasi teknologi