Perbedaan React Native & React.js — Mana yang Tepat untuk Proyekmu? + Contoh Aplikasinya
Di dunia pengembangan aplikasi modern, dua nama yang sering muncul adalah React.js dan React Native. Keduanya berasal dari ekosistem yang sama, dibuat oleh tim Facebook/Meta, tetapi dibuat untuk tujuan berbeda. Artikel ini membahas perbedaan fundamental, kelebihan & kekurangan, kapan memilih masing-masing, serta contoh aplikasi dan potongan kode nyata.
Ringkasan Singkat
- React.js (sering disebut React) adalah library JavaScript untuk membangun antarmuka web (UI), komponen berbasis DOM, cocok untuk aplikasi web SPA (Single Page Application).
- React Native adalah framework untuk membangun aplikasi mobile native (iOS & Android) menggunakan JavaScript dan sintaks mirip React, namun render target-nya adalah native UI components, bukan HTML DOM.
Perbedaan Utama (Side-by-Side)
| Aspek | React.js | React Native |
|---|---|---|
| Target Platform | Web browser, HTML / CSS / DOM | iOS & Android, Native UI components |
| UI Layer | HTML (div, button, input) | View, Text, TouchableOpacity, ScrollView |
| Styling | CSS / CSS-in-JS | StyleSheet (JS object), mirip inline style |
| Akses fitur device | Terbatas, perlu Web APIs (geolocation, media) | Mudah via Native Modules & APIs (camera, sensors, storage) |
| Deployment | Host ke server / CDN (Netlify, Vercel) | Build ke APK / AAB (Android) & IPA (iOS), publish di Play Store / App Store |
Kelebihan & Kekurangan
React.js — Kelebihan
- Mature ecosystem untuk web (React Router, Next.js, Redux).
- SEO-friendly (dengan SSR / Next.js).
- Performa rendering DOM yang optimal untuk web.
- Mudah integrasi dengan layanan web dan CMS.
React.js — Kekurangan
- Tidak memberi akses langsung ke fitur native perangkat (kecuali Web APIs).
- Pengalaman mobile web kadang kalah dibanding native.
React Native — Kelebihan
- Satu basis kode JavaScript untuk iOS & Android (kembali ke native components).
- Akses lebih mudah ke fitur perangkat (kamera, GPS, filesystem).
- UI lebih native dibanding webview-based hybrid apps.
React Native — Kekurangan
- Perlu effort untuk styling & perbedaan platform (iOS vs Android).
- Jika butuh modul native khusus, mungkin harus menulis kode Java/Kotlin atau Swift/Obj-C.
- Bundle & proses release lebih kompleks dibanding web.
Kapan Memilih React.js (Web)?
- Kamu membuat website atau web app (dashboard admin, e-commerce, blog, landing page).
- Perlu dukungan SEO dan indexing mesin pencari.
- Mau iterasi cepat, deploy ke CDN, dan jangkauan luas tanpa instalasi.
Kapan Memilih React Native (Mobile)?
- Kamu butuh fitur perangkat (kamera, push notification, sensor).
- Mengutamakan pengalaman mobile yang responsif dan terasa native.
- Ingin satu basis kode JavaScript untuk dua platform mobile utama.
Contoh Aplikasi, Ide & Potongan Kode
1) Contoh Aplikasi Web dengan React.js, Todo App sederhana
Fitur: tambah tugas, tandai selesai, filter.
// App.jsx (React.js)
import React, { useState } from 'react';
export default function App() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState('');
function addTodo() {
if (!text.trim()) return;
setTodos([...todos, { id: Date.now(), text, done: false }]);
setText('');
}
function toggleDone(id) {
setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t));
}
return (
<div style={{maxWidth:600, margin:'40px auto'}}>
<h1>Todo App (React.js)</h1>
<input value={text} onChange={e => setText(e.target.value)} />
<button onClick={addTodo}>Add</button>
<ul>
{todos.map(t => (
<li key={t.id}>
<input type="checkbox" checked={t.done} onChange={() => toggleDone(t.id)} />
<span style={{textDecoration: t.done ? 'line-through' : 'none'}}>{t.text}</span>
</li>
))}
</ul>
</div>
);
}
2) Contoh Aplikasi Mobile dengan React Native, Todo App sederhana
Fitur serupa, tapi menggunakan komponen native.
// App.js (React Native)
import React, { useState } from 'react';
import { SafeAreaView, View, Text, TextInput, Button, FlatList, TouchableOpacity } from 'react-native';
export default function App() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState('');
function addTodo() {
if (!text.trim()) return;
setTodos([...todos, { id: Date.now().toString(), text, done: false }]);
setText('');
}
function toggleDone(id) {
setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t));
}
return (
<SafeAreaView style={{flex:1, padding:20}}>
<Text style={{fontSize:24, marginBottom:12}}>Todo App (React Native)</Text>
<View style={{flexDirection:'row', marginBottom:12}}>
<TextInput value={text} onChangeText={setText} style={{flex:1, borderWidth:1, padding:8}} />
<Button title="Add" onPress={addTodo} />
</View>
<FlatList
data={todos}
keyExtractor={item => item.id}
renderItem={({item}) => (
<TouchableOpacity onPress={() => toggleDone(item.id)} style={{padding:10}}>
<Text style={{textDecorationLine: item.done ? 'line-through' : 'none'}}>{item.text}</Text>
</TouchableOpacity>
)}
/>
</SafeAreaView>
);
}
Catatan Teknis & Tips Praktis
- Komponen UI: Jangan menganggap komponen React.js otomatis bekerja di React Native, elemen dan styling berbeda.
- State Management: Gunakan Redux, Zustand, atau Context API sesuai kompleksitas, berlaku di kedua platform.
- Code Sharing: Logika bisnis (utilities, hooks, state) bisa di-share; UI layer biasanya terpisah.
- Performa: React Native mendekati native, tapi heavy animations harus dioptimasi (Reanimated / native-driver).
- Testing & Deployment: Web: Lighthouse, browser testing; Mobile: emulator & device testing, CI/CD untuk build mobile (Fastlane, EAS).
Kesimpulan
Pilihan antara React.js dan React Native bergantung pada tujuan produk. Jika targetmu adalah pengalaman web, SEO, dan distribusi cepat, pilih React.js. Jika targetmu adalah pengalaman mobile yang mendalam dan akses fitur perangkat, React Native lebih cocok. Banyak tim menggunakan keduanya: React.js untuk web, React Native untuk aplikasi mobile, dan berbagi logika bisnis sebanyak mungkin untuk efisiensi.
