React Best Practices Part I

Pada blog ini, kita akan membahas topik penting tentang konvensi penamaan dan bagaimana konvensi ini menjadi dasar dari kode yang bersih dan mudah dipelihara di React.

Konvensi Penamaan di React

Konvensi penamaan memainkan peran penting dalam meningkatkan keterbacaan kode, pemeliharaan, organisasi, dan komunikasi dalam pengembangan perangkat lunak. Dalam konteks React, kita akan menjelajahi beberapa konvensi penamaan yang umum digunakan.

Pascal Case

Pascal Case adalah konvensi penamaan di mana huruf pertama setiap kata diawali dengan huruf kapital, dan tidak ada spasi atau tanda baca di antara kata-kata tersebut. Dalam React, Pascal Case dapat diterapkan pada:

Komponen React
```
const Todo = () => {
   //...
}
```
Nama Kelas CSS
```
.Todo {
   /*...*/
}
```

Enumerasi

const RequestType = {
   GET: 'GET',
   POST: 'POST',
   //...
}

Camel Case

Camel Case adalah konvensi penamaan di mana setiap kata atau frasa diawali dengan huruf kapital kecuali kata pertama, yang dimulai dengan huruf kecil. Dalam React, Camel Case dapat digunakan untuk:

Nama Variabel
```
const userName = "sathishskdev";
```

Nama Fungsi

const getFullName = (firstName, lastName) => {
    return `${firstName} ${lastName}`;
}

Properti Objek

const user = {
  userName: "sathishskdev",
  firstName: "Sathish",
  lastName: "Kumar"
}

Nama Kelas CSS Modul

.headerContainer {
    display: "flex";
}

Custom Hooks
```
const useTodo = () => {
  //...
}
```
Komponen Higher Order
```
const withTimer = () => {
  //...
}
```

Kebab Case

Kebab Case adalah konvensi penamaan di mana kata-kata digabungkan dengan huruf kecil dan dipisahkan oleh tanda hubung ("-"). Dalam React, Kebab Case dapat diterapkan pada:

Nama Kelas CSS

.header-container {
    display: "flex";
}

Nama Folder

src
  todo-list // Nama folder
      TodoList.jsx
      TodoList.module.scss
  todo-item // Nama folder
      TodoItem.jsx

SCREAMING_SNAKE_CASE

SCREAMING_SNAKE_CASE adalah konvensi penamaan di mana kata-kata atau frasa menggunakan huruf kapital, dengan kata-kata dipisahkan oleh garis bawah ("_"). Dalam React, SCREAMING_SNAKE_CASE dapat diterapkan pada:

Konstanta

const BASE_PATH = "https://domain.services/api";

Properti Enumerasi

const RequestType = {
  GET: 'GET',
  POST: 'POST',
  PUT: 'PUT',
  DELETE: 'DELETE',
};

Variabel Global

const ENVIRONMENT = 'PRODUCTION';
const PI = 3.14159;

Konvensi Penamaan Komponen Higher-Order

Beberapa praktik terbaik untuk memberi nama Komponen Higher-Order (HOC) melibatkan penggunaan awalan "with" diikuti oleh fungsionalitas atau tujuan HOC, serta menyertakan nama komponen asli dalam nama HOC.

const withFilter = () => {
   //...
}

// Penggunaan HOC
const Filter = withFilter(/*Nama Komponen*/);

Konvensi Penamaan Custom Hooks

Praktik terbaik untuk memberi nama Custom Hooks melibatkan penggunaan awalan "use" diikuti oleh fungsionalitas atau tujuan Custom Hooks, serta menyertakan perilaku hook sebagai sufiks.

const useTimer = (initialTime) => {
  // ... implementasi hook
};

// Penggunaan custom hook
const { time, start, stop, reset } = useTimer(60);

Gunakan Nama yang Bermakna dan Deskriptif

Penting untuk menghindari penggunaan nama yang generik atau tidak jelas. Pilih nama yang lebih deskriptif dan spesifik untuk meningkatkan kejelasan dan pemeliharaan kode.

Contoh:

const ProductDetails = () => {
  const productInfo = fetchProductInfo();
  const addProductToCart = () => {
    // Menambahkan produk ke keranjang belanja
  };
  //...
}

Pemilihan Nama Tunggal atau Jamak

Keputusan untuk menggunakan nama tunggal atau jamak untuk komponen, fungsi, dan variabel dapat berdampak pada kejelasan kode.

Contoh:

const fetchConversation = () => {
  // Mengambil satu percakapan.
}

const fetchConversations = () => {
  // Mengambil beberapa percakapan.
}

// Gunakan nama tunggal untuk satu percakapan
const conversation = { /*Detail Percakapan*/ }

// Gunakan nama jamak untuk beberapa percakapan
const conversations = [
  { /*Detail Percakapan*/ }, 
  { /*Detail Percakapan*/ }
]

Hindari Penggunaan Singkatan Berlebihan

Hindari singkatan berlebihan dalam kode untuk meningkatkan kejelasan. Gunakan nama objek dan properti yang deskriptif.

Contoh:

// Singkatan berlebihan
const selUsr = {
  usrId: '1',
  usrNm: 'Sathish Kumar',
  usrEmail: 'sathish@domain.com',
};

// Gunakan nama objek dan properti yang deskriptif
const selectedUser = {
  userId: 1,
  userName: 'Sathish Kumar',
  userEmail: 'sathish@domain.com',
}

Kesimpulan

Dengan mengikuti praktik-praktik terbaik konvensi penamaan di React, Anda akan menciptakan kode yang bersih, mudah dibaca, dan mudah dipelihara. Memilih nama yang

bermakna dan deskriptif sangat penting untuk meningkatkan kejelasan kode dan kolaborasi antara pengembang.

Ingatlah untuk konsisten dalam penggunaan konvensi penamaan di seluruh proyek Anda, dan teruslah terhubung untuk pembahasan lebih lanjut tentang best practices di React. Selamat coding! 😊👩‍💻👨‍💻