Belajar Mengirim Props Pada ReactJS

Props atau "properties" adalah salah satu konsep penting dalam ReactJS. Props adalah cara untuk mengirim data antar komponen yang ada pada ReactJS. Props digunakan untuk menyediakan data atau informasi yang diperlukan oleh komponen agar dapat berfungsi dengan baik.

Belajar Mengirim Props pada ReactJS

Dalam ReactJS, setiap komponen dapat menerima prop sebagai parameter masukan dan menggunakannya untuk menampilkan informasi atau perilaku yang sesuai. Prop bersifat read-only, artinya komponen tidak dapat mengubah nilai prop yang diterimanya, namun komponen tersebut dapat mengubah perilaku atau tampilan sesuai dengan nilai prop yang diterima.

Pada kesempatan kali ini kita akan belajar untuk menggunakan props untuk mengirimkan data antar komponen pada ReactJs. Penasaran?, simak penjelasan berikut.

Membuat Sebuah Parent Component

Untuk menggunakan props dibutuhkan sebuah parent component dan child component, pertukaran data terjadi dari parent component dan akan diterima oleh child component. Perubahan data props hanya bisa dilakukan pada parent component dan tidak bisa dilakukan pada child component.

Membuat Child Component

Kemudian kita perlu membuat sebuah child component yang akan mengimport sebuah gambar. Pada tahap ini properti dari gambar yang diimport masih diatur di dalam child component yang dimana kita akan merubahnya untuk menerima data properti dari parent component.

Memberikan Properti ke Component Child

Setelah parent dan child component sudah dibuat kemudian import child component yaitu “Avatar” ke dalam parent component “Profile”. Kemudian apa bila sudah berhasil diimport kamu dapat memberikan beberapa properti didalam tag komponen Avatar, dalam kasus ini kita akan memberikan data properti “size” dan “alt” saja.

Menerima Properti dari Komponen Profile

Setelah itu untuk menangkap data properti dari komponen Profile kita perlu menambahkan sebuah parameter pada komponen Avatar. Parameter tersebut akan berisi data properti yang dikirimkan dari komponen Profile tadi, jangan lupa untuk menambahkan kurung kurawal “{ }” untuk menampung data properti pada parameter. Kemudian karena isi dari size dan alt telah ditentukan di komponen Profile maka kita tidak perlu lagi menuliskan value nya dan hanya perlu menggantinya dengan parameter tadi.

Kesimpulan

ReactJS merupakan salah satu framework yang sangat populer, tidak ada salahnya bagi kamu untuk mulai belajar tentang ReactJS dan agar proses belajarmu terarah kamu perlu untuk mengetahui roadmap belajar ReactJS.

Salah satu fitur utama dari ReactJS adalah kemampuannya untuk memecah UI menjadi komponen-komponen yang lebih kecil dan modular. Untuk mempercepat pengembangan aplikasi dengan ReactJS, penggunaan props sangat disarankan. Props (atau singkatan dari properties) adalah sebuah objek JavaScript yang berisi nilai-nilai yang diberikan dari komponen induk ke komponen anak sebagai parameter atau argument. Dengan menggunakan props, komponen-komponen tersebut dapat dipisahkan dengan lebih jelas, sehingga kode menjadi lebih mudah dipahami, dikelola, dan diuji.