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:

1const User = () => {
2  return (
3    <div>
4      <h1>My Name is Dino</h1>
5    </div>
6  );
7};
8
9export default function App() {
10  return (
11    <div>
12      <h1>Hello Devsaurus</h1>
13      <User />
14    </div>
15  );
16}

Membuat Komponen dengan Kelas JavaScript

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

1class User extends React.Component {
2  render() {
3    return (
4      <div>
5        <h1>My Name is Dino</h1>
6      </div>
7    );
8  }
9}
10
11class App extends React.Component {
12  render() {
13    return (
14      <div>
15        <h1>Hello Devsaurus</h1>
16        <User />
17      </div>
18    );
19  }
20}
21
22export 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.