Apa Itu Reactjs

Definisi

React.js adalah library UI untuk membangun antarmuka berbasis komponen.

Fungsi

React dipakai untuk memecah UI menjadi bagian-bagian kecil yang bisa dipakai ulang, dikelola state-nya, dan dirender ulang sesuai perubahan data. Pendekatan ini cocok untuk aplikasi frontend yang komponennya banyak dan interaksinya terus berubah.

Konsep Dasar

Konsep inti React yang perlu dipahami:

• Component: unit UI mandiri
• Props: data yang dikirim ke component
• State: data internal yang bisa berubah
• Hook: fungsi untuk memakai fitur React di function component
• Render: proses menghasilkan UI

Contoh

jsx

function TombolSimpan() {
  const [disimpan, setDisimpan] = React.useState(false)
 
  return (
    <button onClick={() => setDisimpan(true)}>
      {disimpan ? 'Sudah disimpan' : 'Simpan'}
    </button>
  )
}

Penjelasan

Komponen TombolSimpan menyimpan state disimpan. Saat user menekan tombol, state berubah dan React merender ulang tampilan tombol. Pola ini adalah inti kerja React: UI mengikuti state dan props.

Catatan Implementasi

• Pecah komponen berdasarkan tanggung jawab.
• Simpan state hanya di tempat yang diperlukan.
• Gunakan props untuk data dari parent.
• Hindari komponen yang terlalu besar dan bercampur terlalu banyak tanggung jawab.
• Saat komponen makin kompleks, pertimbangkan pemisahan logic dan presentasi.

Istilah

• Props: data masuk ke komponen.
• State: data internal yang bisa berubah.
• Hook: fungsi React untuk fitur tertentu.