03 KOMPONEN DASAR REACT NATIVE
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 : Berikut adalah 6 jenis komponen yang sering dipakai dalam membuat aplikasi dengan react native : 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: Functional Component (Hooks) Dalam contoh sintak Functional Component terdapat dua komponen yang dibuat secara custome yaitu Biodata dan Foto. Dengan output aplikasi seperti berikut : Class Component 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 :
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 :
Berikut adalah 6 jenis komponen yang sering dipakai dalam
membuat aplikasi dengan react native :
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:
- Functional Component (Hooks)
Dalam contoh sintak Functional Component terdapat dua komponen
yang dibuat secara custome yaitu Biodata dan Foto. Dengan output
aplikasi seperti berikut :
- Class Component
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 :
![Most simple way to design the map and collision of a PacMan WebApp game? (Vue.js) [closed]](https://i.sstatic.net/p7t3vNfg.png)
