Berbagai perusahaan teknologi mengembangkan React untuk memecahkan masalah developer, dalam mengembangkan aplikasi skala besar yang membutuhkan perubahan data secara terus menerus. Sebagai komponen, React lebih mudah untuk digunakan kembali (reusable) di tempat lain. Karena sifatnya independen, maka developer juga lebih mudah untuk melakukan testing. Seperti apa sih sebenarnya React? Yuk, simak uraian berikut ini.
Apa itu React?
React merupakan JavaScript framework open source untuk membuat aplikasi multi-platform (Android dan iOS), dan sesuai dengan deskripsi di situs resminya “Learn once, write anywhere”. Mengapa reusable component ini penting? Salah satunya, untuk menghemat waktu dan memungkinkan kita menulis koding sesedikit mungkin.
Reusable React
Untuk memahami reuable React, berikut ini contoh skenario dalam aplikasinya.
Menampilkan list user
Toggling button 'Follow' (untuk user yang belum followed) dan 'Unfollow' (untuk user yang sudah followed);
Pertama-tama, kita definisikan list users yang akan digunakan dalam aplikasi:
const users= [
{id: 1, followed: true, name: "Agung"},
{id: 2, followed: false, name: "Akbar"},
{id: 3, followed: false, name: "Arkan"}
]
Selanjutnya buat komponen utamanya :
var Hello = React.createClass({
getInitialState: function() {
return {
users: this.props.users
}
},
handleClick: function(index) {
var users= this.state.users;
users[index].followed = !users[index].followed;
this.setState({ users: users});
},
render: function() {
return (
<div>
{this.state.users.map((user, key) =>
<div key={user.id}>{user.name} <button onClick={this.handleClick.bind(this, key)}>{user.followed ? 'Unfollow' : 'Follow'}</button></div>
)}
</div>
);
}
});
Kemudian, Anda bisa mulai untuk merendernya
ReactDOM.render(
<Hello users={users} />,
document.getElementById('container')
)
Sampai di tahap ini, sebenarnya aplikasi sudah berjalan sesuai skenario. Namun, alangkah baiknya bila kita membuat komponen yang spesifik dalam menampilkan list user. Tujuannya, agar komponen tersebut menjadi reusable. Nah, sekarang kita coba untuk membuat reusable component untuk list user, termasuk click handler-nya.
var UserList = React.createClass({
getInitialState: function() {
return {
user: this.props.user
}
},
handleClick: function(index) {
var user = this.props.user;
user.followed = !user.followed;
this.setState({ user: user });
},
render: function() {
return (
<div>{this.state.user.name} <button onClick={this.handleClick}>{this.state.user.followed ? 'Unfollow' : 'Follow'}</button></div>
);
}
});
Coding di atas memperlihatkan, click handler didefinisikan di dalam component <UserList />. Dengan kata lain, logic-nya tidak tergantung dari component yang 'menggunakannya' (dalam contoh ini, component <Hello />);
Kemudian, gunakan di dalam component utama <Hello />
var Hello = React.createClass({
getInitialState: function() {
return {
users: this.props.users
}
},
render: function() {
return (
<div>
{this.state.users.map((user) =>
<UserList user={user} key={user.id}/>
)}
</div>
);
}
});
Jadi bisa disimpulkan, reusable component ini sangatlah penting. Bayangkan jika banyak halaman yang memerlukan komponen seperti contoh list user diatas. Apabila kita tidak membuatnya menjadi reusable component, jika terjadi perubahan markup atau apapun itu pada list user, maka kita perlu mengubahnya satu per satu di seluruh halaman pada aplikasi kita yang menampilkan list user tersebut.
Sumber:
hackernoon.com
medium.com
ppla1.wordpress.com
arrowfunxtion.com
kumparan.com
bitbagi.com
