Tips Clean Code Pada React.js

https://medium.com/learnfazz/mengenal-clean-code-cbbdfe771846

Menulis kode yang bersih adalah salah satu hal terpenting dalam pengembangan perangkat lunak. Sebagian besar perusahaan besar selalu berusaha memastikan bahwa kode yang ditulis untuk perangkat lunak mereka lebih bersih dan berkinerja baik sehingga mereka dapat dengan mudah mengelolanya nanti. Kode bersih sangat penting bahkan jika Anda seorang solo developer karena sebagian besar waktu yang dibutuhkan untuk merefactor ulang kode atau menambahkan fitur baru ke dalamnya akan sedikit.

Jika Anda menggunakan React.js untuk membangun antarmuka pengguna, Anda harus tahu bahwa ia memiliki aturan yang dapat Anda ikuti untuk membuat kode Anda lebih bersih dan mudah dibaca. Menulis kode yang bersih akan selalu menjadikan Anda developer React yang unggul.

Itu sebabnya dalam artikel ini, saya ingin berbagi dengan Anda beberapa tips berguna untuk menulis clean code pada React.js.

1. Buat file terpisah untuk masing-masing komponen

Sebagai contoh, saya menulis seluruh komponen Navbar, Landing, dan Footer hanya di komponen Layout.

Ini adalah praktik yang buruk karena setiap komponen memiliki UI dan fungsionalitasnya sendiri. dengan menulis semua komponen dalam satu file akan membuat kode saya sulit dibaca.

Itulah mengapa kita perlu membuat file terpisah untuk setiap komponen di aplikasi dan merendernya di komponen Layout. Misalnya, jika kita ingin membuat halaman Landing sederhana menggunakan React, pastikan untuk membuat file terpisah untuk setiap komponen di halaman tersebut. File untuk komponen Navbar, file untuk komponen Children, file untuk komponen Footer, dan seterusnya.

Hasilnya, ini akan membuat kode aplikasi kita lebih mudah dibaca dan dikelola. Selain itu, ini juga akan membantu kita menggunakan kembali komponen di seluruh aplikasi.

Berikut ini contohnya:

kita dapat merender komponen di mana pun yang inginkan dalam aplikasi kita. kita hanya perlu membuat file terpisah untuk masing-masing komponen.

File terpisah untuk komponen Navbar:

File terpisah untuk komponen Footer:

Seperti yang Anda lihat di atas, Anda bisa membuat folder bernama componentsdan meletakkan semua file komponen yang terpisah di sana untuk membuat kode Anda mudah dikelola.

2. Meminimalisir penulisan logic dalam JSX

Seperti yang Anda ketahui, kita dapat menulis logic JavaScript sebanyak yang kita inginkan di dalam kode JSX di React. Namun perilaku ini dapat membuat kode kita sulit dibaca karena akan ada campuran logic JavaScript dan JSX. Itu sebabnya saya menyarankan Anda untuk selalu mengurangi jumlah kode logic JavaScript di dalam JSX.

Bad Example:

Good Example:

Seperti yang Anda lihat, contoh kedua terlihat jauh lebih bersih dan mudah dibaca dibandingkan dengan yang pertama. Jadi, selalu kurangi logic JavaScript di JSX dengan membuat fungsi JavaScript terpisah, terutama saat menangani event handler DOM.

3. Selalu gunakan Destructuring pada Object Map

Destructuring adalah salah satu fitur penting JavaScript ES6. Hal ini memungkinkan kita untuk men-destruktur objek dan array sebagai cara untuk mengurangi sintaks kode. Hasilnya, fitur ini membuat kode lebih bersih dan mudah dibaca.

Terkadang Anda bahkan bisa mengirim objek sebagai Props. Objek itu bisa saja sulit diakses, terutama jika berisi banyak properti bersarang.

Bad Example:

Good Example:

Seperti yang Anda lihat, dua contoh terakhir lebih mudah dibaca menurut saya. Jadi destrukturisasi adalah cara yang baik untuk mengurangi kode JSX dan membuatnya lebih bersih. Cobalah untuk menggunakannya sesering mungkin.

4. Conditional rendering

Ketika terdapat rendering bersyarat di React.js ada berbagai opsi yang berbeda. Anda dapat menggunakan operator ternary, pernyataan IF, dan short-circuiting. Tetapi Anda harus tahu kapan harus menggunakan masing-masing dari mereka.

Misalnya, ketika hanya membutuhkan satu kondisi, selalu lebih baik menggunakan short-circuiting. Di sisi lain, jauh lebih bersih untuk menggunakan operator ternary jika Anda ingin merender sesuatu berdasarkan kondisi yang berbeda (dua kondisi).

• untuk satu kondisi:

Bad example:

{showModal ? <h1>Modal was opened</h1> : null}

Good example:

{showModal && <h1>Modal was opened</h1>}

• untuk dua kondisi:

Bad example:

{showModal && <h1>Modal was opened</h1>}
{!showModal && <h1>Modal was closed</h1>}

Good example:

{showModal ? <h1>Modal was opened</h1> : <h1>Modal was closed</h1>}

5. Menulis Props

Dalam hal menulis Props, beberapa developer menulis Props dengan cara yang salah.

Misalnya, terkadang Anda harus menulis Props yang benar yang memiliki nilai true. Anda dapat melakukannya dengan kedua cara di bawah ini:

Bad example:

export default function App() {
  return (
    <>
      <Navbar text={true} />   </>
  );
}

Good example:

export default function App() {
  return (
    <>
      <Navbar text />
   </>
  );
}

Seperti yang Anda lihat, jika Anda melewatkan prop tanpa nilai, itu menjadi truesecara default. Jadi Anda tidak perlu menyetelnya ke trueseperti ini: text={true}.

6. Menggunakan Prettier dan ESLint

Tip lain untuk menulis kode bersih adalah dengan menggunakan ekstensi VSCode Prettier dan ESLint dalam pengembangan Anda.

Prettier adalah ekstensi yang sangat berguna yang memformat kode Anda dengan cara yang lebih baik dan membuatnya terlihat jelas. Ini mengubah tampilan struktural kode Anda agar terlihat jelas.

berikut merupakan contoh menggunakan Prettier:

ESLint juga merupakan ekstensi yang baik yang membantu Anda menemukan kesalahan dalam kode Anda dan memberitahu Anda untuk mengikuti panduan gaya. Jadi saya sarankan Anda selalu mengaktifkan dua ekstensi ini di editor teks Anda.

berikut merupakan contoh menggunakan ESLint: