Belajar React Native — Pengenalan Dasar & Struktur Modern

Dipublikasikan: 12 Januari 2025 • Kategori: Developer • Penulis: Jumanto

React Native adalah framework yang digunakan untuk membuat aplikasi mobile Android dan iOS menggunakan JavaScript. Framework ini dikembangkan oleh Meta (Facebook) dan menjadi salah satu teknologi paling populer untuk mobile development modern karena performanya mendekati native namun dengan satu basis kode.

1. Apa Itu React Native?

React Native menggunakan pendekatan declarative UI, mirip seperti React untuk web. Dengan itu, developer dapat membangun antarmuka aplikasi menggunakan komponen seperti <View>, <Text>, <Image>, dan lainnya.

2. Keunggulan React Native

3. Tools yang Dibutuhkan

Untuk memulai belajar React Native, beberapa tools yang perlu disiapkan:

4. Struktur Folder Modern React Native

Pemula sering bingung dengan struktur aplikasi. Berikut struktur modern yang direkomendasikan agar rapi dan scalable:


/src
  /screens       → Halaman aplikasi (Home, Login, Profile)
  /components    → UI kecil seperti Button, Card, Input
  /services      → API service, axios config
  /navigation    → File navigasi (Stack, Tab, Drawer)
  /context       → Global state dengan Context API
  /assets        → Gambar, ikon, font
  /utils         → Helper function
App.tsx         → Entry utama aplikasi

5. Membuat Komponen Pertama

Contoh komponen sederhana React Native:


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

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Text>Halo, ini React Native!</Text>
    </View>
  );
}

6. Penutup

React Native adalah pilihan tepat bagi developer web yang ingin membuat aplikasi mobile tanpa harus belajar Java atau Kotlin untuk Android, atau Swift untuk iOS. Dengan struktur yang rapi dan best practice modern, aplikasi akan lebih mudah dikembangkan dan dipelihara.

Selamat belajar dan semoga sukses menjadi Mobile Developer profesional!

← Kembali ke Blog