Refactor? Lagi?

Photo by Annie Spratt on Unsplash

Tenang, tenang! Kali ini beda kok! Kita akan jelaskan nature dari React sekarang. Simak ya!

React merupakan library JavaScript yang digunakan oleh Facebook, lalu diimplementasikan oleh publik. Umumnya React sendiri menggunakan Object Oriented Programming, lalu kita memanfaatkan design pattern MVC untuk membuat aplikasi React baru, lalu menggunakan template HTML yang mengandung markup dan controller. Setelah kita membahas nature dari React itu sendiri, kita akan membahas kesalahan-kesalahan umum yang ada dalam React itu sendiri.

Bloated Components

Ini yang perlu dihindari pada saat menggunakan React untuk mendesain suatu halaman. Dan biasanya Komponen dalam React itu memiliki ujung berupa Render.

Umumnya component yang ada di sini di satukan langsung semua.

Setelah kita lihat postingan di atasm kita dapat melihat HTML yang dijalankan menjadi satu, sehingga kalau mau debugging menjadi susah kalau misalnya ada 1 komponen yang outlier, Jadi bagaimana cara menghindari hal-hal di atas? Dan menggunakan secara penuh Object Oriented Programming? Yaitu dengan cara membuat komponen-komponen lain, yang terdiri atas kodingan-kodingan render di atas, lalu diimport ke dalam js baru, contoh :

Kita dapat melihat disini bahwa LowClass1 dan LowClass3 merupakan class yang akan diturunkan ke page HighClass, sehingga lebih mudah dilihat.Lalu ada kasus baru nih, jika kita harus ngepass sesuatu dari parent Component ke Component yang lain, kita tidak usah mengulang komponen-komponen yang tersedia, kita dapat langsung menggunakan props

Contoh :

Props itu berguna untuk mengepas elemen-elemen dari satu class menuju yang lain, sehingga tidak perlu pemanggilan ulang-ulang pada saat LowClass. Setelah itu,kita juga dapat menghindari kodingan HTML yang super panjang tersebut dengan cara bagi menjadi method-method di luar render, contoh :

Method yang dibuat pertama kali juga berperan untuk misalnya ada fungsionalitas tambahan, seperti call ke DB / Local Storage.Lalu, saya ingin menceritakan implementasi pada kelompok kita, apakah memenuhi kriteria-kriteria di atas?

Studi Kasus :

Dari studi kasus ini, kita menggunakan method-method untuk keperluan localStorage, seperti yang sudah dijelaskan di atas, dan juga kita menggunakan props untuk load data dari upper class.

Studi Kasus 2 :

Dari studi kasus ini, kita menggunakan props dengan frekuensi yang lebih tinggi, dikarenakan page ini merupakan page controller dari Report Box, yang merupakan suatu instance laporan.

Component Pattern

Selain dari refactoring, di react, kita juga kenal design pattern yang khusus ada di dalam React. Atau dapat disebut juga dengan component pattern.

Apa itu Component?

Sesuai yang ada di website reactjs.org, “Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.” Dalam bahasa Indonesia berarti, Components mempunyai kapabilitas dalam membagi UI menjadi independen, potongan reuse, dan satu komponen terhadap komponen lainnya bersifat isolatif.

Pertama kali penginstalan react pada komputer anda, anda sendiri mendapatkan 1 hal, komponen dan API yang mengikutinya. Sesuai dengan fungsi JavaScript, komponen mendapatkan input dalam bentuk “props” dan membalikkan elemen React, yang mendeklarasikan bagaimana UI suatu aplikasi dapat terbentuk. Oleh karena itu, React sendiri diklasifikasikan sebagai API deklaratif, karena kita sendiri yang memberi tahu React bagaimana cara UI tersebut terlihat di publik, dan React akan mengatasi semua hal.

API dalam Component

Dalam penginstalan React, kita dapat melihat terdapat 5 macam API, berupa

• render
• state
• props
• context
• lifecycle events

Dari 5 API di atas, kita dapat membagi menjadi 2 kelompok besar pengembangan aplikasi React, yakni stateful dan stateless. Stateful umumnya dijumpai oleh function yang menginisiasi variabel baru dari state tersebut, sedangkan stateless umumnya dijumpai oleh function yang mengoper value dari komponen yang lebih tinggi derajatnya. Umumnya stateful menggunakan API render, state, dan lifecycle events, Lalu stateless menggunakan render, props, dan context.

Dari 5 API di atas, kita akan membahas Component Pattern yang merupakan salah satu hal unik dari React sendiri. Component Patterns juga merupakan salah satu best practices dan pertama kali diperkenalkan untuk memisahkan logic layer dan UI atau presentational layer. Dengan cara ini, diharapkan component yang dihasilkan lebih reuseable dan kohesif .

Component Pattern

Pattern yang saya gunakan dalam pengerjaan proyek ini adalah :

Function Components : Deklaarasi fungsi JS seperti biasa.Pemanfaatan:

Contoh function

Destructuring Props : Turunkan props di react lalu bisa diturunkan kepada komponen-komponen lain.

Kodingan saya tentang props

JSX spread attributes : Penggunaan {} dalam inisiasi variabel, sehingga diturunkan dalam bentuk props

Kodingan saya terkait JSX Spread

Event Switch : Menggunakan function terpisah untuk handle event yang terjadi.

Kodingan saya terkait handle change

Sekian blog saya, have a nice day!