Tujuan Pembelajaran

Memahami perbedaan arsitektur React DOM vs React Native
Mengerti konsep bridge, native thread, dan JS thread
Mampu menjelaskan kapan React Native adalah pilihan tepat

Analogi

Diagram


      React DOM: [JS Code] → [Virtual DOM] → [Real DOM] → [Browser Pixels]
React Native: [JS Code] → [Bridge] → [Native UI Thread] → [Native Components]

Web = masak di dapur sendiri, hasil di piring
React Native = masak di dapur, hasil lewat jendela ke meja native

React DOM render ke elemen HTML. React Native render ke komponen native asli — UIView di iOS, ViewGroup di Android.

Penjelasan Konsep

React Native membawa React ke mobile, tapi arsitekturnya berbeda fundamental. Di web, React merender ke DOM — objek HTML yang dipahami browser. Di React Native, tidak ada DOM.

React Native berkomunikasi dengan native platform lewat Bridge (di arsitektur lama) atau JSI (JavaScript Interface, di arsitektur baru). JS thread menjalankan kode React kamu — menghitung component tree, state, props. Native thread merender UIView (iOS) atau ViewGroup (Android) asli.

Kunci perbedaan: (1) Tidak ada <div> — ganti <View>. (2) Tidak ada <p> — ganti <Text>. (3) Styling pakai StyleSheet.create bukan CSS. (4) Layout hanya Flexbox, tidak ada Grid atau float. (5) Tidak ada hover state — ganti Pressable. (6) API browser (window, document, localStorage) tidak ada — pakai React Native API.

Kapan React Native tepat: tim sudah familiar React, perlu deploy ke iOS + Android, tidak butuh animasi 3D/tugas hardware intensif. Kapan TIDAK: game 3D, AR/VR kompleks, atau kalau tim 100% native iOS/Android sudah established.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan arsitektur React DOM vs React Native., mengerti konsep bridge, native thread, dan JS thread., dan mampu menjelaskan kapan React Native adalah pilihan tepat. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Apa Itu React Native? Web vs Mobile, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

React DOM render ke elemen HTML. React Native render ke komponen native asli — UIView di iOS, ViewGroup di Android. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Prompt AI

Jelaskan arsitektur React Native (Old vs New Architecture) dengan analogi sederhana. Bandingkan performa, bundle size, dan developer experience antara React Native dan Flutter.

Pertanyaan Reflektif

Mana yang lebih menantang menurutmu: transisi dari web developer ke React Native, atau belajar native iOS/Android dari nol? Kenapa?