Apakah komponen-komponen inti dalam React Native?

Question

Accepted Answer

React Native menyediakan satu set **komponen inti** — seperti **View**, **Text**, **Image**, **ScrollView**, **TextInput** — yang memetakan elemen UI asli. Ini adalah blok bangunan fundamental dari UI React Native, 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 utama 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 sangat penting untuk pengembangan React Native karena **mereka adalah blok bangunan dari setiap UI React Native** — Anda menyusunnya untuk membangun antarmuka, jadi ini adalah pengetahuan dasar yang wajib diketahui. React Native menyediakan **komponen sendiri** yang memetakan ke tampilan asli (bukan elemen HTML web), dan memahami yang penting — **View** (kontainer, 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 UI React Native apa pun. Memahami **perbedaan utama dari web** sangat penting bagi pengembang web/React yang beralih ke React Native: menggunakan View sebagai pengganti div dan Text sebagai pengganti p/span (dengan aturan semua-teks-dalam-Text), gaya melalui properti style daripada kelas/file CSS, menggunakan touchables/Pressable untuk interaksi bukan onClick, dan menggunakan **FlatList untuk daftar panjang** (yang merender secara efisien/malas) bukan pemetaan semuanya — perbedaan ini adalah hambatan umum yang pemahaman komponen inti jelaskan. Komponen membentuk (seperti React) untuk membangun UI, dengan View sebagai kontainer fundamental. Karena komponen inti adalah blok bangunan dari setiap UI React Native (Anda menggunakannya secara konstan untuk membangun antarmuka) dan memahami mereka 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 penting dan fundamental — kosakata dasar dari UI React Native, diperlukan untuk membangun antarmuka apa pun dan untuk beradaptasi dengan pengetahuan React web ke model komponen asli, kompetensi inti untuk pengembangan React Native.