React Components: Pengertian dan Cara Membuatnya
React adalah sebuah library JavaScript yang digunakan untuk membangun antarmuka pengguna interaktif. Salah satu fitur utama React adalah komponen, yang memungkinkan Anda untuk memecah antarmuka pengguna menjadi bagian-bagian yang dapat digunakan kembali dan berpikir tentang setiap potongan dalam isolasi.
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
- Reuseable: Komponen dapat digunakan kembali dalam aplikasi.
- Isolasi: Setiap komponen dapat dipikirkan dan dirancang secara isolasi.
- Mudah Dipahami: Struktur kode yang jelas dan mudah dipahami.