React JS (HOC) : Contoh sederhana menggunakan React HOC.

React JS

React JS adalah library javascript yang dibuat oleh facebook dan bersifat open source untuk membangun user interface suatu website atau aplikasi web. Library ini juga sering digunakan untuk membuat Single Page Application (SPA).

React JS: Higher Order Component

Higher-order Component (HOC) adalah teknik lanjutan untuk menambahkan komponen ReactJS baru dari komponen yang udah ada sebelumnya. Jadi kita bisa bikin komponen baru yang punya fitur atau fungsi tambahan lebih dengan cara yaitu satu atau lebih komponen digabungkan & dibungkus oleh komponen lain.

Dalam menerapkan logika di dalam reactJS yang kadang kita membuatnya berulang-ulang padahal kita dapat membuatnya cuma 1 kali. Nah, cara untuk membuat komponen seperti itu hal yang dibutuhkan yakni memisahkan sebuah komponen antara View/Tampilan dan logika tertentu.

kali ini, saya akan memberikan sebuah contoh cara membuat sebuah HOC dengan kasus yaitu Roles. Umumnya roles digunakan untuk dapat membedakan hak akses dari setiap user/pengguna yang masuk kedalam aplikasi web. Lebih mudahnya, Admin dapat mengakses semua halaman dan user biasa hanya dapat mengakses beberapa halaman saja. Seperti contoh berikut ini :

Langkah yang pertama, kalian harus membuat project baru terlebih dahulu. Untuk nama project nya itu bebas terserah apa yang kalian mau dan kalian juga harus menginstall react router-dom.

Sebagai contoh saya membuat project dengan nama test-app

Setelah kalian membuat project baru kalian bisa menambahkan 2 file dengan nama(Router.js & Auth.js) didalam folder src.

Jika sudah, tambahkan di file Router.js code seperti ini:

Pada code diatas terdapat 4 fungsi komponen yaitu Navigation, Home Component, Admin Component, User Component.

Saya akan menjelaskan dari yang pertama yaitu :

· Navigation untuk membuat komponen berupa Daftar menu.

· Home Component untuk menampilkan isi dari alamat atau halaman utama.

· Admin Component untuk menampilkan halaman yang nantinyahanya dapat diakses oleh Admin.

· User Component untuk menampilkan halaman yang nantinya dapat di akses oleh User.

dan pada baris akhir kode diatas, ada Export Default yang digunakan untuk mengexport komponen atau function javascript yang dimana menjadi default ketika di import nantinya.

Kemudian, tambahkan code berikut di Apps.js :

seteleah selesai jika dijalankan maka akan begini hasilnya

sekarang kita lanjut membuat Auth, menggunakan Hoc, dan menerapkan user roles di react Js.

sekarang kalian bisa tulis code berikut didalam file Auth.js

pada kode diatas saya menjelaskan 5 Fungsi, yaitu :

• GetUser : sebagai fungsi yang mengembalikan nilai berupa data dari user (Store/Storage). pada fungsi ini, saya menggunakan Web Storage (Local Storage) pada browser, bagian ini bisa digantikan dengan storage/store lainnya, seperti Redux, Context, dan sejenisnya.
• isValidRole : fungsi yang melakukan pengechekan jenis role dari user.
• Authorization : yakni sebuah fungsi yang mengembalikan sebuah class / react.component baru, yang dimana komponen atau class yang ingin di kembalikan akan melalui proses / logika tertentu sebelum class itu di render.
• Admin & User : merupakan fungsi yang menerapkan dari fungsi Authorization . Masing-masing telah diatur allowedRoles dalam dengan jenis nilai Array dan nantinya akan Meng-implementasi WrappedComponent ketika fungsi ini dijalankan dan diberikan parameter berupa komponent/element yang dibungkus oleh HOC Authorization.

setelah menambahkan kode pada Auth.js, kita lanjut dengan menambahkan kode pada Router.js yang dimana kita menerapkan Logika yang kita tulis pada Auth.js didalam Router.js

dan inilah codenya (tambahkan yang ada lingkaran merahnya saja) :

kemudian kalian save dan jalankan maka hasilnya akan seperti ini.

sekarang auth dan hoc nya telah berjalan dengan baik dan user tidak bisa mengakses admin page dan user hanya bisa mengakses home page dan user page.

terima kasih telah membaca dan semoga bermanfaat untuk kalian.

berikan comment positif kalian dibawah ya…