GALIH L. PRAKOSO

Apa itu Component?

Aplikasi yang dibangun dengan React Native, akan terdiri dari banyak Component. Component bisa memiliki banyak child dan Component juga memiliki state nya atau propertinya masing-masing.

React Native telah menyediakan banyak Component yang dapat kita gunakan untuk membangun aplikasi. Selain menggunakan Component bawaan dari React Native, kita juga bisa membuat Component sendiri yang bisa kita atur sesuai kebutuhan kita. Berikut adalah contoh Penggunaan Component bawaan dari React Native :

Kode di atas adalah kode dari file App.js yang ada pada project React Native yang kita buat pada tutorial sebelumnya. Pada kode di atas, baris pertama dan kedua terdapat syntax import yang memanggil class React dan beberapa Component bawaan dari React Native yaitu StyleSheet, Text, View. Beberapa Component inilah yang kemudian dipanggil untuk ditampilkan dalam aplikasi dengan cara meletakkannya pada fungsi render().

Kita dapat mengatur tampilan dengan cara mirip seperti HTML, yaitu dengan menggunakan Tag dan properti yang bisa ditambahkan pada setiap tag. Walaupun mirip namun itu bukan HTML, syntax itu disebut dengan JSX.

Syntax JSX berfungsi untuk menyematkan kode XML ke dalam Javascript. Jika kalian sudah terbiasa dengan HTML tentunya kalian sudah familiar dengan struktur bahasa markup seperti ini. Beginilah cara kita untuk mengatur tampilan pada React Native.

Component dalam React Native sebenarnya adalah sebuah class yang meng-extends class Component yang ada dalam React Native. Component dalam React Native tentunya memiliki sebuah lifecycle. Berikut adalah lifecycle Component React Native :

Pada gambar di atas, kita bisa melihat bagaimana alur hidup Component pada React Native. Lifecycle Component pada React Native dibagi menjadi 4 fase, yaitu :

• - Initialization : Pada fase ini Component mempersiapkan Props dan State yang akan dibahas pada tutorial selanjutnya.
• - Mounting : Pada fase ini Component melakukan render(). Render dipanggil setelah method componentWillMount() dan setelah method render() Component akan memanggil method componentDidMount().
• - Updation : Pada fase ini React Native melakukan update ketika data dari state atau props yang dikirimkan oleh Parent berubah.
• - Unmounting : Ini adalah fase terakhir ketika Component sudah 'mati' atau istilahnya Unmounted.

Jangan pusing dulu :D, hanya sekedar tahu aja dulu. Nanti kita akan mendalaminya satu per satu dan kita hanya akan mendalami hal-hal yang memang sering digunakan pada umumnya saja. Yang penting kalian sudah sedikit memahami apa itu Component dan siap untuk lebih mendalami React Native di tutorial selanjutnya. 👇

Tutorial React Native - Bahasa Indonesia - #5 Props