03.KOMPONEN DASAR REACT NATIVE

sandatya widhi - Feb 21 - - Dev Community

Komponen adalah bagian dari suatu aplikasi yang biasa terdiri dari
prop dan state. Dalam react native komponen ini dapat dibangun
dengan 2 cara yaitu functional component (tidak memiliki
state) dan class component (memiliki state dan prop). Didalam
komponen dapat terdiri dari komponen-komponen kecil lainnya yang
artinya menunjukan suatu bagian. Contoh : Membuat menu navigasi
pada aplikasi, dimana dalam navigasi tersebut dapat terdiri dari
berbagai komponen seperti tombol menu home, biodata dan
seterusnya seperti berikut :

Image description

Berikut adalah 6 jenis komponen yang sering dipakai dalam
membuat aplikasi dengan react native :

Image description

a. Komponen View – Sebagai wadah untuk komponen lainnya.
b. Komponen Text – Untuk memunculkan sebuah Text.
c. Komponen Image – Untuk memunculkan sebuah Gambar.
d. Komponen TextInput – Untuk menerima inputan ke aplikasi.
e. Komponen ScrollView – untuk scroll halaman naik-turun.
f. Komponen SyleSheet - untuk style komponen-komponen.

Berikut contoh membuat komponen secara custome dengan dua
cara seperti berikut pada file index.tsx:

  1. Functional Component (Hooks)

Image description

Dalam contoh sintak Functional Component terdapat dua komponen
yang dibuat secara custome yaitu Biodata dan Foto. Dengan output
aplikasi seperti berikut :

Image description

  1. Class Component

Image description

Dalam contoh sintak Class Component terdapat dua komponen yang
dibuat secara custome yaitu Biodata dan Foto (sama seperti
functional component sebelumnya). Dengan output aplikasi seperti
berikut :

Image description

. . . . . . . .