Pengertian Komponen

Komponen di React adalah bagian-bagian yang menyusun aplikasi. Mereka dapat berupa header, footer, button, dan lain-lain. Komponen dapat dibuat menggunakan dua cara: fungsi JavaScript dan kelas JavaScript.

Membuat Komponen dengan Fungsi JavaScript

Komponen yang dibuat menggunakan fungsi JavaScript disebut React Function Component. Contoh sederhana dari komponen fungsi adalah:

const User = () => {
  return (
    <div>
      <h1>My Name is Dino</h1>
    </div>
  );
};

export default function App() {
  return (
    <div>
      <h1>Hello Devsaurus</h1>
      <User />
    </div>
  );
}

Membuat Komponen dengan Kelas JavaScript

Komponen yang dibuat menggunakan kelas JavaScript disebut React Class Component. Contoh sederhana dari komponen kelas adalah:

class User extends React.Component {
  render() {
    return (
      <div>
        <h1>My Name is Dino</h1>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello Devsaurus</h1>
        <User />
      </div>
    );
  }
}

export default App;

Perbedaan Antara Komponen Fungsi dan Kelas

• Komponen Fungsi: Tidak menyimpan state dan digunakan hanya untuk menampilkan UI. Menerima data melalui props.
• Komponen Kelas: Dapat menyimpan dan mengelola state serta memiliki beberapa metode seperti render untuk menampilkan UI.

Kelebihan Menggunakan Komponen

1. Reuseable: Komponen dapat digunakan kembali dalam aplikasi.
2. Isolasi: Setiap komponen dapat dipikirkan dan dirancang secara isolasi.
3. Mudah Dipahami: Struktur kode yang jelas dan mudah dipahami.