Tujuan Pembelajaran

Memahami mapping dari HTML elements ke React Native core components
Mampu menggunakan View, Text, Image, dan ScrollView
Mengerti beda imperative vs declarative components

Analogi

Diagram


      HTML → React Native Mapping:
<div> → <View>
<p>, <span> → <Text>
<img> → <Image>
<div scrollable> → <ScrollView>
<input> → <TextInput>
<button> → <Pressable> / <TouchableOpacity>

Web developer = masuk dapur baru. Alat beda nama, fungsi mirip.

Setiap tag HTML punya padanan di React Native. Namanya beda, tapi fungsinya mirip seperti alat dapur — tinggal adaptasi.

Penjelasan Konsep

React Native punya core components yang mapping ke native UI widgets. <View> = UIView (iOS) / ViewGroup (Android) — container paling dasar, support Flexbox, tidak bisa menampilkan teks di dalamnya. <Text> = UILabel (iOS) / TextView (Android) — satu-satunya komponen yang bisa render teks. Nesting Text bisa untuk styling inline.

<Image>: render gambar dari local asset atau remote URL. Local: require('./logo.png'). Remote: {uri: 'https://...'}. Selalu set width/height untuk remote image, atau gunakan resizeMode.

<ScrollView>: wrapper yang bisa di-scroll. Ingat: ScrollView render SEMUA child sekaligus — tidak seperti FlatList yang lazy-load. Gunakan ScrollView untuk konten pendek (form, detail page), FlatList untuk list panjang.

<TextInput>: input field. Props penting: onChangeText, value (controlled component), keyboardType, secureTextEntry untuk password, placeholder.

<Pressable>: komponen yang bisa di-tap. Lebih fleksibel dari TouchableOpacity karena support hover, focus, press state. Gunakan untuk button custom.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami mapping dari HTML elements ke React Native core components., mampu menggunakan View, Text, Image, dan ScrollView., dan mengerti beda imperative vs declarative components. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Core Components, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Setiap tag HTML punya padanan di React Native. Namanya beda, tapi fungsinya mirip seperti alat dapur — tinggal adaptasi. 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.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Perhatikan: <View> tidak bisa langsung berisi teks — harus ada <Text>. Image remote perlu width+height eksplisit. Pressable punya feedback visual saat di-tap.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

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.

Contoh Kode

tsx

import { View, Text, Image, ScrollView, TextInput, Pressable } from "react-native";

export default function App() {
  return (
    <ScrollView style={{ flex: 1, padding: 20 }}>
      <Image
        source={{ uri: "https://picsum.photos/400/200" }}
        style={{ width: "100%", height: 200, borderRadius: 12 }}
      />
      <Text style={{ fontSize: 24, fontWeight: "bold", marginTop: 16 }}>
        Judul Halaman
      </Text>
      <TextInput
        placeholder="Ketik sesuatu..."
        style={{
          borderWidth: 1,
          borderColor: "#ccc",
          borderRadius: 8,
          padding: 12,
          marginTop: 12,
        }}
      />
      <Pressable
        style={{
          backgroundColor: "#007AFF",
          padding: 16,
          borderRadius: 12,
          marginTop: 12,
          alignItems: "center",
        }}
        onPress={() => alert("Tombol ditekan!")}
      >
        <Text style={{ color: "white", fontWeight: "bold" }}>Kirim</Text>
      </Pressable>
    </ScrollView>
  );
}

Penjelasan Kode

Perhatikan: <View> tidak bisa langsung berisi teks — harus ada <Text>. Image remote perlu width+height eksplisit. Pressable punya feedback visual saat di-tap.

Prompt AI

Tanyakan ke AI: buat komponen ProfileCard dengan foto profil, nama, bio singkat, dan tombol follow menggunakan React Native core components saja. Bandingkan dengan implementasi React web.

Pertanyaan Reflektif

Ambil satu halaman web yang sudah kamu buat. Coba tulis ulang menggunakan React Native core components. Komponen mana yang paling tricky untuk di-port?