Memahami Konsep Dasar ReactJs
Banyaknya framework dalam dunia user interface membuat para developer lebih leluasa dalam memilih framework yang dirasa cocok untuk software yang dikembangkan. Salah satu framework yang cukup populer dan digunakan oleh banyak startup adalah ReactJs.
Pembahasan artikel akan berfokus pada konsep dasar mengenai ReactJS dan contoh implementasi pada proyek yang saya kerjakan.
Mengenal ReactJs
Sejarah & Definisi ReactJs
Pertama kali diciptakan oleh Jordan Walke, seorang Engineer di Facebook. React pertama kali dirilis pada Newsfeed di Facebook tahun 2011, dan Instagram tahun 2012. Saat ini, banyak aplikasi besar lainnya seperti Airbnb, Reddit, dan Netflix yang menggunakan React dalam Struktur desainnya.
React JS adalah Library Javascript yang bersifat open source yang mayoritas digunakan dalam frontend untuk membangun user interface (UI) secara spesifik untuk satu page dalam aplikasi. React JS berfungsi untuk mengatur layer pada tampilan untuk desktop maupun versi mobile aplikasi.
Keunggulan ReactJs
Salah satu fungsi utama React adalah kita bisa membuat reusable component yang secara efisien dapat digunakan kembali tanpa harus membangunnya dari awal lagi. Disamping itu, react juga memungkinkan developer untuk membuat aplikasi web besar yang dapat mengubah data, tanpa diharuskan memuat ulang lamannya.
Beberapa keunggulan yang dimiliki oleh ReactJs, antara lain:
- Declarative
React dapat membuat UI yang interaktif, sehingga dapat dengan mudah membuat desain yang simple untuk di setiap state di dalam aplikasi. Declarative views dapat membuat kode lebih mudah untuk di prediksi dan lebih mudah untuk di debug. - Component — Based
React dapat membuat Encapsulated Component yang dapat mengatur setiap tahapannya, baru kemudian membuat complex UIs component yang sudah dibuat. - Learn Once, Write Anywhere
Developer dapat men-develop fitur baru menggunakan react tanpa mengubah kode sebelumnya, react juga dapat bekerja menggunakan Node JS dan mobile apps menggunakan React Native.
Alasan Memilih ReactJs
Beberapa alasan mengapa framework ReactJs menjadi begitu populer dan menjadi pilihan dari banyak developer, di antaranya:
- Mudah Dipelajari
Tidak seperti Angular dan Ember yang menggunakan Domain Specified Language, React menggunakan bahasa yang hampir mirip dengan HTML dan CSS, sehingga programer pemula sekalipun bisa dengan cepat akrab dengan React. React juga menawarkan tutorial yang dapat diakses dengan mudah, serta adanya video, tools, dan blog tentang React yang akan lebih mempermudah dalam mempelajari React. - Peningkatan Perfomance
React memungkinkan Anda untuk membangun DOM virtual dan menghostingnya ke dalam memori. Manfaat dari tindakan tersebut adalah setiap kali terjadi perubahan apapun dalam DOM actual, DOM virtual berubah seketika karena terletak di memori. Karena itu, pembaruan DOM tidak dilakukan secara rutin dan kecepatan kinerja aplikasi Anda tidak terganggu. - Mendukung reusability komponen
Seperti yang saya singgung di awal, reusability komponen merupakan keuntungan tersendiri bagi Developer. React memungkinkan Anda untuk menggunakan kembali komponen yang telah dikembangkan ke aplikasi lain yang menggunakan fungsi yang sama.
Implementasi ReactJs
Berikut merupakan hal-hal fundamental pada ReactJs yang saya dan kelompok PPL implementasikan pada software yang kami kembangkan:
Component
Secara garis besar, ReactJS terdiri atas dua komponen, yaitu:
- Functional component
Merupakan komponen yang tidak memiliki statusnya sendiri (object state) dan tidak memiliki method render, biasanya hanya mengembalikan suatu HTML untuk ditampilkan. Functional component biasa disebut sebagai komponen stateless. Namun, sebagai gantinya functional component memiliki sesuatu yang dinamakan hook state. Berikut adalah contoh kode sederhana dari functional component:
function Header() {
return (
<div>
<h1>Memahami Konsep Dasar ReactJs</h1>
</div>
);
}Berikut adalah tampilan yang dihasilkan dari penerapan function component pada Proyek Perangkat Lunak pada kelompok saya:
Halaman tersebut merupakan satu kesatuan dari beberapa functional component terpisah, di antarnya component homepage dan navbar.
- Class component
Merupakan komponen yang dapat menampung dan mengelola statusnya dan memiliki metode render() untuk mengembalikan JSX di layar. Komponen ini juga disebut komponen stateful, karena mereka dapat memiliki status. State pada component ini berbentuk object yang nilainya dapat dimanipulasi. Berikut adalah contoh kode sederhana dari class component:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
} render() {
return (
<div>
<h1>{this.state.date.toLocaleTimeString()}.</h1>
</div>
);
}
}
State
State adalah suatu object penyimpan data yang nilainya dapat diperbarui dan dapat berfungsi untuk memicu pembaruan tampilan dari website. State bersifat mutable yang nilainya dapat diperbarui menggunakan bantuan method setState(). Tiap saat nilai dari suatu state diubah, maka tampilan dari website yang mengandung state tersebut akan ikut diperbarui. Berikut adalah contoh penggunaan dari state :
class Header extends React.Component {
state = {
title: "Memahami Konsep Dasar ReactJs"
};
changeTitle = () => {
this.setState({
title: "Memahami Konsep Dasar ReactJs Secara Lengkap"
});
}
render() {
return (
<div>
<h1>{this.state.title}</h1>
<button onClick={this.changeTitle}>Ubah Judul</button>
</div>
);
}
}Implementasi state (khususnya hook state) pada proyek PPL saya salah satunya untuk menyimpan input yang dimasukkan oleh user ada form login, kemudian value dari state akan dikirimkan pada backend.
Props
Pada dasarnya, props memiliki fungsi serupa seperti state. State adalah objek yang digunakan untuk menyimpan data di dalam komponen, sedangkan props adalah objek yang digunakan untuk menyimpan data yang diterima dari luar komponen. Props bertindak sebagai atribut yang dapat di kirim ke component yang lain (child component). Data yang disimpan di dalam props tidak bisa diubah karena sifatnya read-only.
Berikut adalah contoh implementasi props pada proyek PPL yang saya kerjakan:
Dalam hal ini, props didapatkan dari redux store, dimana berisi data status apakah pengguna sudah terotentikasi dan juga data diri pengguna.
Sekian pembahasan saya mengenai ReactJs, semoga bermanfaat!
