Clean Code Simple React Js

Cara sederhana untuk menulis kode yang lebih baik dan lebih bersih. Clean Code lebih dari sekedar kode yang berfungsi. Clean Code adalah mudah dibaca, mudah dipahami, dan tertata rapi. Pada artikel ini, kita akan melihat delapan cara menulis kode React yang lebih tertata rapi.

Saat mempelajari saran-saran ini, penting untuk diingat bahwa itulah tepatnya: saran. Jika Anda tak setuju dengan salah satu dari ini, tidak apa-apa. Namun, ini adalah praktik yang menurut saya membantu dalam menulis kode React ku sendiri.

1. Conditional Rendering Only for One Condition
   Jika Anda perlu merender sesuatu secara bersyarat saat suatu kondisi truedan tidak merender apa pun saat suatu kondisi false, jangan gunakan operator terner. Gunakan &&operator sebagai gantinya.
   Penulisan Salah:
   
   Penulisan Benar:
2. Conditional Rendering on Either Condition
   Jika Anda perlu merender secara kondisional satu hal saat kondisinya true dan dan merender hal yang berbeda saat kondisinya false, gunakan operator ternary.
   Penulisan Salah:
   
   Penulisan Benar:
3. Boolean Props
   Sebuah props truthy dapat diberikan kepada komponen hanya dengan nama prop tanpa nilai seperti ini: myTruthyProp. Menulis seperti myTruthyProp={true}itu tidak perlu.
   Penulisan Salah:
   
   Penulisan Benar:
   
4. String Props
   Nilai prop string dapat diberikan dalam tanda kutip ganda tanpa menggunakan tanda kurung kurawal atau backticks.
   Penulisan Salah:
   
   
   Penulisan Benar:
   
   
5. Event Handler Functions
   Jika sebuah event handler hanya mengambil satu argumen untuk Eventobjek, Anda hanya dapat memberikan fungsi sebagai pengendali event seperti ini: onChange={handleChange}. Anda tidak perlu untuk membungkus fungsi dalam fungsi anonim seperti ini: onChange={e => handleChange(e)}.
   Penulisan Salah:
   
   
   Penulisan Benar:
   
   
6. Passing Components As Props
   Saat meneruskan komponen sebagai prop ke komponen lain, Anda tidak perlu menggabungkan komponen yang diteruskan ini ke dalam fungsi jika komponen tidak menerima props apa pun.
   Penulisan Salah:
   
   Penulisan Benar:
   
7. Undefined Props
   Properti undefinedtak terdefinisi dikecualikan, jadi jangan khawatir tentang menyediakan cadangan jika tak masalah jika prop tak terdefinisi.
   Penulisan Salah:
   
   Penulisan Salah:
   
8. Setting State That Relies on the Previous State
   Selalu tetapkan status sebagai fungsi dari status sebelumnya jika status baru bergantung pada status sebelumnya. Pembaruan status React dapat dikumpulkan, dan tidak menulis pembaruan Anda dengan cara ini dapat menyebabkan hasil yang tidak terduga.
   Penulisan Salah:
   
   Penulisan Salah:
   

Praktik berikut tidak hanya di React, melainkan praktik yang baik untuk menulis clean code di JavaScript (atau bahasa pemrograman apa pun, dalam hal ini).

• Ekstrak logika kompleks menjadi fungsi yang dinamai dengan jelas.
• Ekstrak angka ajaib menjadi konstanta.
• Gunakan variabel dengan nama yang jelas.

Selamat Mengkoding…