Konsep “Component-Based” di ReactJS

Estimated reading: 2 minutes 41 views

Salah satu ciri khas ReactJS adalah pendekatan component-based, yaitu membangun aplikasi dari potongan-potongan kecil yang disebut component.
Setiap component adalah bagian mandiri dari antarmuka yang memiliki tampilan, logika, dan gaya (style) sendiri.

Jenis-Jenis Component

Functional Component
- Ditulis dalam bentuk fungsi JavaScript biasa.
- Sering digunakan bersama hooks seperti useState dan useEffect.
- Lebih sederhana dan banyak digunakan dalam pengembangan modern.
Class Component
- Ditulis menggunakan sintaks class JavaScript.
- Memiliki fitur lifecycle methods untuk mengatur perilaku component.
- Kini lebih jarang digunakan karena hooks telah menggantikan banyak perannya.

Keunggulan Pendekatan Component-Based

Reusable – Satu component bisa digunakan di banyak bagian aplikasi, menghemat waktu dan usaha.
Maintainable – Perubahan pada satu component tidak akan memengaruhi component lain jika dikelola dengan baik.
Terstruktur – Memisahkan logika menjadi bagian kecil membuat kode lebih rapi dan mudah dipahami.
Scalable – Aplikasi besar dapat dikelola dengan membagi menjadi banyak component kecil.

Contoh Sederhana Component

				
					// File: Button.js
function Button({ label }) {
  return <button>{label}</button>;
}

export default Button;

// File: App.js
import Button from './Button';

function App() {
  return (
    <div>
      <h1>Halo React!</h1>
      <Button label="Klik Saya" />
    </div>
  );
}

export default App;

Pada contoh di atas:

Button adalah component terpisah yang bisa digunakan berkali-kali.
App adalah component utama yang menggabungkan beberapa component lain.

Pendekatan ini memungkinkan kita membangun antarmuka yang kompleks dengan cara menggabungkan component kecil menjadi sistem yang utuh.

openSOURCE

Did You Know?

Konsep “Component-Based” di ReactJS

Jenis-Jenis Component

Keunggulan Pendekatan Component-Based

Contoh Sederhana Component

Leave a Comment Cancel reply

CONTENTS