🧩 Konsep Komponen dalam React Native
📘 Apa itu Komponen?
Komponen (Component) adalah bagian dari suatu aplikasi yang biasanya terdiri dari props dan state.
Dalam React Native, komponen dapat dibangun dengan dua cara:
-
Functional Component → tidak memiliki
state, hanya menerimaprops. -
Class Component → memiliki
statedanprops.
Komponen juga dapat berisi komponen-komponen kecil lainnya yang membentuk bagian tertentu dari antarmuka aplikasi.
🧭 Contoh Struktur Komponen
Misalnya, pada sebuah menu navigasi, di dalamnya terdapat beberapa komponen seperti:
- Tombol Home
- Tombol Biodata
- Tombol Kontak
- Dan komponen lainnya
Tampilan ilustrasi menu navigasi:
🧱 Jenis-Jenis Komponen Dasar React Native
Berikut adalah 6 jenis komponen dasar yang sering digunakan dalam membangun aplikasi dengan React Native:
- View – Sebagai wadah (container) untuk komponen lainnya.
- Text – Untuk menampilkan teks.
- Image – Untuk menampilkan gambar.
- TextInput – Untuk menerima input dari pengguna.
- ScrollView – Untuk memungkinkan halaman di-scroll ke atas dan bawah.
- StyleSheet – Untuk memberikan gaya (style) pada komponen.
🧠 Membuat Komponen Kustom (Custom Component)
Kita dapat membuat komponen kustom dengan dua cara: Functional Component dan Class Component.
Contoh di bawah ini menggunakan file index.tsx.
1️⃣ Functional Component (Hooks)
Contoh kode:
Dalam contoh di atas, terdapat dua komponen kustom yaitu Biodata dan Foto.
Keduanya ditampilkan di dalam komponen utama menggunakan pendekatan Functional Component.
🔹 Output aplikasi:
2️⃣ Class Component
Contoh kode:
Pada contoh Class Component ini juga terdapat dua komponen kustom yaitu Biodata dan Foto, sama seperti versi Functional Component.
🔹 Output aplikasi:
🎯 Kesimpulan
- Functional Component lebih ringkas dan modern, cocok digunakan bersama React Hooks.
- Class Component masih relevan, terutama untuk proyek lama yang belum beralih ke Hooks.
- Komponen merupakan pondasi utama dalam React Native — semua tampilan aplikasi dibangun dari kumpulan komponen.
Top comments (0)