Technology

Saat React bisa didaur ulang

Published on
Min read
3 min read
time-icon
Maria Yuniar

Experienced Content Editor with a demonstrated history of working in the information technology and services industry. Skilled in News Writing, Headline Writing, Breaking News, Editing, and Feature Writing. Strong media and communication professional with a Graduate focused in Applied English Linguistics from Universitas Katolik Indonesia Atma Jaya.

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

0

Tags

Share

Apakah Kamu Sedang Mencari Pekerjaan?

    Already have an account? Login

    Artikel Terkait

    API-adalah-EKRUT.jpg

    Technology

    API: Pengertian, Jenis, Cara Kerja, Arsitektur, dan Contohnya

    Nur Rosita Dewi

    14 November 2022
    6 min read
    pexels-sora-shimazaki-5926389.jpg

    Careers

    15 Pertanyaan Interview Kerja Mobile Engineer 2022

    Chrissila Jessica

    10 November 2022
    5 min read
    H1_Coding.jpg

    Technology

    10 Rekomendasi Aplikasi untuk Coding [2022]

    Tio Derma

    09 November 2022
    7 min read

    Video