Pencarian populer
USER STORY

Contoh Reusable Component pada ReactJS

Pada postingan kali ini, saya akan memberikan sedikit contoh mengenai reusable component pada ReactJS.

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 />);

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
Lorem ipsum dolor sit amet 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
11 Desember 2017 · · ·
Lorem ipsum dolor sit amet 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
11 Desember 2017 · · ·
Lorem ipsum dolor sit amet 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
11 Desember 2017 · · ·
Bagikan ide, informasi, momen dan cerita kamu melalui
kumparan
Dengan ini kamu menyetujui syarat
& layanan dari kumparan
Tentang kumparan · Bantuan · Ketentuan & Kebijakan Privasi · Panduan Komunitas · Pedoman Media Siber · Iklan · Karir
2019 © PT Dynamo Media Network
Version: web: