React Native Components

Components pada React Native, dapat digunakan pada Javascript untuk mengakses API dari platform smartphone Anda dan membuat tampilan dan perilaku UI Anda melalui Component React.

Kelebihan Components

1. Component dapat memiliki banyak child
2. Component juga memiliki state dan propertinya masing-masing
3. Native Component memungkinkan react native membuat tampilan yang sesuai dengan platform smartphone yang dituju sehingga seperti aplikasi native
4. React Native memiliki Core Component yang dapat digunakan untuk membuat aplikasi Android / IOS. Secara lengkap Core Component dapat Anda lihat di https://reactnative.dev/docs/components-and-apis

Core Component yang biasa digunakan adalah sebagai berikut

Praktikum: Components

Latihan 1

Buatlah project aplikasi mobile untuk menampilkan kalimat dibawah ini. Dengan menggunakan expo.io simpanlah project ini (Snack) dengan nama “Latihan1”:

Contoh :
Selamat Datang
Di
Aplikasi ABC

Hasil :

Langkah-Langkah dalam mengerjakan soal Latihan 1:

Step 1:
Buka url https://expo.io/ dan login dengan Account Anda
Step 2:
Setelah masuk dashboard, klik Snack
Step 3:
Klik “New Snack” dengan nama “Latihan1”
Step 4:
Pada file App.js, hapus semua source code yang ada
Step 5:
Pada line 1 ketik:

Step 6:
Pada line 2, ketik import Component Text untuk menampilkan kalimat pada soal, dan Component View yang digunakan sebagai container Component Text:

Step 7:
Pada line 4, ketik sebuah function dengan nama App() seperti perintah berikut

Step 8:
Pada line 6 di dalam function App(), sisipkan Component View seperti yang ditandai dengan kotak merah :

Step 9:
Pada line 7 di dalam Component View, sisipkan Component Text, seperti yang ditandai dengan kotak merah :

Step 10:
Pada line 14, di akhir baris dan diluar function App(), tambahkan perintah yang ditandai dengan kotak merah:

Kode Program Lengkap:

Hasil :

Costum Components

Component apa saja yang me-render Component lainnya disebut Parent Component, disini Latihan adalah Parent Component, dan Aplikasi adalah child Component, Setiap <Aplikasi> merender elemen unik yang dapat disesuaikan dengan props. Anda dapat membuat Component secara Costum dan mengulangnya

Contoh :

Props

Props adalah singkatan dari “property”, yang memungkinkan Anda untuk mengkustom Component.

Contoh:

Sebagian besar Core Component dapat dikustom dengan props, Contoh ketika menggunakan Image, Anda menggunakan props yang bernama source

Images memiliki banyak props yang berbeda, termasuk didalamnya adalah style.

Kesimpulan

Native Component memungkinkan react native membuat tampilan yang sesuai dengan platform smartphone yang dituju sehingga seperti aplikasi native.

Sumber Referensi : reactnative.dev