kumparan
4 Apr 2017 19:48 WIB

Contoh Reusable Component pada ReactJS

Pada postingan kali ini, saya akan memberikan sedikit contoh mengenai reusable component pada ReactJS.
ADVERTISEMENT
Adapun skenario pada aplikasi ini adalah:
  1. Menampilkan list user.
  2. 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"}
]
Kemudian buat component 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>
        );
    }
});
Terakhir, let's render it!
ReactDOM.render(
    <Hello users={users} />,
    document.getElementById('container')
)
Sampai disini, sebenarnya aplikasi sudah berjalan sesuai skenario. Tapi alangkah baiknya bila kita membuat component yang spesifik dalam menampilkan list user. Tujuannya adalah, agar component 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>
        );
    }
});
Dari kode diatas dapat dilihat bahwa click handler kita definisikan di dalam component <UserList />. Dengan kata lain, logic-nya tidak tergantung dari component yang 'menggunakannya' (dalam contoh ini, component <Hello />);
ADVERTISEMENT
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>
        );
    }
});
Kesimpulan
Untuk aplikasi skala besar, reusable component ini sangatlah penting. Bayangkan jika banyak halaman yang memerlukan component 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 merubahnya satu per satu di seluruh halaman pada aplikasi kita yang menampilkan list user tersebut! Terbayangkan pusingnya?
Tulisan ini adalah kiriman dari user, isi tulisan ini sepenuhnya menjadi tanggung jawab penulis. Laporkan tulisan