Apa saja komponen inti di React Native?

Question

Accepted Answer

React Native menyediakan serangkaian **komponen inti** — seperti **View**, **Text**, **Image**, **ScrollView**, **TextInput** — yang memetakan ke elemen UI asli. Mereka adalah blok bangunan fundamental dari React Native UI, digunakan sebagai pengganti elemen HTML web. ## Komponen inti (vs HTML web) ```text React Native uses its OWN components (mapping to native views), NOT HTML: VIEW → a container (like a

) — the basic layout building block TEXT → display text (ALL text must be inside a , unlike web) IMAGE → display images (local or remote) TEXTINPUT → text input field (like an ) SCROLLVIEW → a scrollable container FLATLIST → an efficient scrollable LIST (for long lists — renders lazily) TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas) BUTTON → a basic button ``` ## Contoh ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## Perbedaan kunci dari web ```text ✓ Use not

, not

/; ALL text must be in ✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling ✓ Touchables/Pressable for interactions (not onClick on divs) ✓ FlatList for long lists (efficient) — not mapping over everything ``` ## Mengapa ini penting Memahami komponen inti adalah fundamental untuk pengembangan React Native karena **mereka adalah blok bangunan dari setiap React Native UI** — Anda menyusunnya untuk membangun antarmuka, jadi ini adalah pengetahuan fundamental yang harus diketahui. React Native menyediakan **komponennya sendiri** yang memetakan ke tampilan asli (bukan elemen HTML web), dan memahami yang penting — **View** (wadah, seperti div), **Text** (untuk semua teks, dengan aturan penting bahwa semua teks harus berada dalam komponen Text, tidak seperti web), **Image**, **TextInput**, **ScrollView**, **FlatList** (untuk daftar panjang yang efisien), dan touchables/**Pressable** (untuk menangani ketukan) — diperlukan untuk membangun antarmuka React Native apapun. Memahami **perbedaan kunci dari web** sangat penting bagi pengembang web/React yang beralih ke React Native: menggunakan View bukan div dan Text bukan p/span (dengan aturan semua-teks-di-Text), styling melalui prop style bukan kelas CSS/file, menggunakan touchables/Pressable untuk interaksi bukan onClick, dan menggunakan **FlatList untuk daftar panjang** (yang merender secara efisien/malas) bukan memetakan semuanya — perbedaan ini adalah jebakan umum yang pemahaman komponen inti memperjelas. Komponen tersusun (seperti React) untuk membangun UI, dengan View sebagai wadah fundamental. Karena komponen inti adalah blok bangunan dari setiap React Native UI (Anda menggunakannya terus menerus untuk membangun antarmuka) dan memahami komponen ini dan bagaimana mereka berbeda dari HTML web adalah fundamental untuk membangun aplikasi React Native (terutama untuk pengembang web), memahami komponen inti adalah pengetahuan React Native yang essential, fundamental — kosakata dasar React Native UI, diperlukan untuk membangun antarmuka apapun dan untuk mengadaptasi pengetahuan React web ke model komponen native, kompetensi inti pengembangan React Native.