Pengertian Component dan Props pada React JS

Component memungkinkan kamu membagi User Interface (UI) menjadi bagian-bagian yang independen dan dapat digunakan kembali, dan memikirkan setiap bagian secara terpisah.

Secara konseptual, komponen seperti fungsi JavaScript. Mereka menerima input (Props) dan mengembalikan elemen React yang menggambarkan apa yang akan muncul di layar.

Component Class dan Function

Cara termudah mendefinisikan Component adalah dengan menulis Function Javascript :

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

Fungsi ini adalah komponen React yang valid karena ia menerima argumen objek “props” (singkatan dari properti) tunggal dengan data dan mengembalikan elemen React.

Kita bisa menyebut komponen-komponen seperti itu dengan “Function Component” karena mereka secara harfiah adalah fungsi JavaScript.

Baca Juga :

Kamu juga bisa menggunakan Class ES6 untuk mendefinisikan suatu komponen seperti berikut :

class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

}

Rendering Component

Sebelumnya, kita hanya membuat element React yang merepresentasikan tag DOM :

const element = <div />;

Namun, element juga bisa direpresentasikan dalam bentuk User-defined atau dengan bebas bisa kamu definisikan sendiri :

const element = <Welcome name=”eXo” />;

Ketika React melihat elemen yang mewakili komponen yang ditentukan pengguna, ia meneruskan atribut JSX ke komponen tersebut sebagai objek tunggal. Dan object tersebutlah yang disebut Props

Baca Juga : Memahami Style yang Ada Pada React Native

Misalnya, kode ini menerjemahkan “Halo, eXo” di suatu halaman:

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

const element = <Welcome name=”Sara” />;

ReactDOM.render(

element,

document.getElementById(‘root’)

);

Output :

Mari rekap apa yang terjadi dalam contoh diatas :

Kita memanggil ReactDOM.render () dengan elemen <Welcome name = “eXo” />.
React memanggil komponen Welcome dengan {name: ‘eXo’} sebagai Props.
Komponen Welome diatas mengembalikan elemen <h1> Halo, eXo </h1> sebagai hasilnya.
React DOM secara efisien memperbarui DOM agar sesuai dengan <h1> Halo, eXo </h1>.

Catatan : Komponen di dalam React selalu diawali dengan lowercase atau huruf kecil sebagai tag DOM. Misalnya, <div /> mewakili tag div HTML, tetapi <Welcome /> mewakili komponen dan mengharuskan Welcome berada dalam lingkupnya.

Baca Juga :

Composing Component

Komponen dapat merujuk ke komponen lain dalam outputnya. Ini memungkinkan kita untuk menggunakan abstraksi komponen yang sama untuk setiap tingkat detail. Button, Form, Dialog, dan Screen pada suatu Aplikasi React bisa dinyatakan sebagai komponen.

Misalnya, kita dapat membuat komponen Aplikasi yang memuat pesan Welcome berkali-kali :

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

function App() {

return (

<div>

</div>

);

}

ReactDOM.render(

<App />,

document.getElementById(‘root’)

);

Output :

Biasanya, aplikasi React baru memiliki komponen Aplikasi tunggal di bagian paling atas. Namun, jika kammu mengintegrasikan React ke dalam aplikasi yang ada, Kamu dapat memulai dari bawah ke atas dengan komponen kecil seperti Button dan secara bertahap menuju hierarki tampilan (view).

Baca Juga : Apa Itu React Native?Cara Kerja, Serta Kelebihannya Dalam Membangun Aplikasi

Mengekstrak Component

Jangan takut erro ketika akan membagi suatu komponen menjadi komponen yang lebih kecil.

Sebagai contoh, lihat Component Comment berikut ini :

function Comment(props) {

return (

<img className=”Avatar”

src={props.author.avatarUrl}

alt={props.author.name}

{props.author.name}

</div>

{props.text}

</div>

{formatDate(props.date)}

</div>

);

}

Output :

Contoh code diatas menganggap author (sebagai objek), text (sebagai string), dan date (sebagai props), dan menjelaskan komentar di situs web media sosial.

Komponen ini bisa sulit diubah karena bersifat Nesting, dan juga sulit untuk menggunakan kembali bagian-bagiannya. Mari kita ekstrak beberapa komponen darinya.

Baca Juga : Apa Itu Handling Touches Dan Cara Menggunakannya di React Native

Pertama, kita akan mengekstrak Avatar author :

function Avatar(props) {

return (

<img className=”Avatar”

src={props.user.avatarUrl}

alt={props.user.name}

);

}

Avatar tidak perlu tahu bahwa ia diterjemahkan di dalam Comment. Inilah sebabnya kita memberikan prop nama yang lebih umum yaitu User ketimbang Author.

Kita merekomendasikan penamaan props dari sudut pandang komponen itu sendiri daripada konteks di mana ia digunakan.

Sekarang kita bisa menyederhanakan sedikit bagian comment :

function Comment(props) {

return (

{props.author.name}

</div>

{props.text}

</div>

{formatDate(props.date)}

</div>

);

}

Selanjutnya, kami akan mengekstrak komponen UserInfo yang membuat Avatar di sebelah username :

function UserInfo(props) {

return (

{props.user.name}

</div>

);

}

Hal Ini memungkinkan kita untuk menyederhanakan Comment lebih jauh lagi :

function Comment(props) {

return (

{props.text}

</div>

{formatDate(props.date)}

</div>

);

}

Mengekstrak komponen mungkin tampak seperti pekerjaan sulit pada awalnya, tetapi memiliki palet komponen yang dapat digunakan kembali terbayar dalam aplikasi yang lebih besar.

Aturan praktis yang baik adalah bahwa jika bagian dari UI kamu digunakan beberapa kali (seperti Tombol, Panel, Avatar), atau cukup kompleks sendiri (App, FeedStory, Komentar), bisa jadi komponen yang kamu dapat gunakan kembali nantinya.

Baca Juga :

Props bersifat Read-only

Baik kamu mendeklarasikan komponen sebagai fungsi atau kelas, ia tidak boleh memodifikasi propsnya sendiri. Simak contoh Sum berikut ini:

function sum(a, b) {

return a + b;

}

Fungsi-fungsi seperti itu disebut “Pure / murni” karena mereka tidak mengubah input mereka, dan selalu mengembalikan hasil yang sama untuk input yang sama.

Sebaliknya, fungsi ini tidak murni karena ia mengubah inputnya sendiri:

function withdraw(account, amount) {

account.total -= amount;

}

React cukup fleksibel dalam penggunaannya tetapi memiliki satu aturan yakni:

Semua komponen React harus bertindak seperti fungsi murni sehubungan dengan Props mereka.

Tentu saja, User Interface aplikasi bersifat dinamis dan berubah seiring waktu. Di bagian selanjutnya, kita akan mempelajari State dalam React JS. State memungkinkan React komponen untuk mengubah output mereka dari waktu ke waktu sebagai tanggapan terhadap tindakan pengguna, respons jaringan, dan apa pun, tanpa melanggar aturan ini.