Published on

Technology

Saat React bisa didaur ulang

Maria Yuniar

computer-1209641__340.jpg

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

Tags

Share

Apakah Kamu Sedang Mencari Pekerjaan?

    Already have an account? Login

    Artikel Terkait

    cover_(1).jpg

    Technology

    10 Rekomendasi Software Animasi 3D Terbaik di Tahun 2022

    Detty Risetya

    06 July 2022
    6 min read
    Apa_itu_Database-Berikut_Pengertian__Manfaat__Jenis_Serta_Fungsinya.jpg

    Technology

    Apa Itu Database? Berikut Pengertian, Manfaat, Jenis, serta Fungsinya

    Ningtyas Dewanasari Kinasih

    06 July 2022
    6 min read
    cover_(10).jpg

    Careers

    10 Tools Wajib yang Dikuasai DevOps Engineer [2022]

    Detty Risetya

    05 July 2022
    6 min read

    Video