Media

Saat React bisa didaur ulang
By Maria Yuniar - 18 July 2018
3 min read 37 Views

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. 

 

Rekomendasi bacaan:
Starbucks hilangkan sedotan plastik tahun 2020
Pelajari cara Google Analytics temukan risiko software testing
Hati-hati saat jawab 5 pertanyaan interview ini

 

Sumber:
hackernoon.com
medium.com
ppla1.wordpress.com
arrowfunxtion.com
kumparan.com
bitbagi.com

Tags: reusable component, JavaScript, developer, React

Share Group 1 Group 3 Group 4
Bergabung dengan EKRUT

Bergabung dengan EKRUT dan dapatkan pekerjaan impianmu!
Daftar Sekarang