Component dalam ReactJS

   March 28, 2025       Mahatma Mahardhika

---

Component dalam ReactJS

Table of Contents

• Pengertian Component
• Jenis-jenis Component
• Cara Membuat Component
• Props dan State
• Manfaat dan Keuntungan
• Contoh Penerapan
• Kesimpulan

---

Pengertian Component

Component dalam ReactJS adalah bagian dari UI yang dapat digunakan kembali. Component memungkinkan pengembang untuk membangun antarmuka yang modular dan terstruktur.

---

Jenis-jenis Component

Terdapat dua jenis utama component dalam React:

• Functional Component: Component berbasis fungsi yang lebih ringan dan mudah digunakan.
• Class Component: Component berbasis kelas yang mendukung lifecycle methods.

---

Cara Membuat Component

1. Functional Component

const Greeting = ({ name }) => {
  return 
Hello, {name}!
;
};

2. Class Component

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

---

Props dan State

• Props: Data yang dikirim dari parent ke child component dan bersifat immutable.
• State: Data internal dalam component yang dapat berubah.

---

Manfaat dan Keuntungan

• Reusability: Component dapat digunakan kembali di berbagai bagian aplikasi.
• Modularitas: Memudahkan pengelolaan dan pengembangan aplikasi.
• Efisiensi: Meminimalkan kode redundan dan meningkatkan kinerja aplikasi.

---

Contoh Penerapan

Component dapat digunakan untuk membangun struktur UI yang kompleks.

const Header = () => 
Selamat Datang di React
;

const App = () => {
  return (
    

      

      
    
  );
};

---

Kesimpulan

Component adalah elemen utama dalam ReactJS yang memungkinkan pengembang membangun UI secara modular dan efisien. Dengan memahami cara kerja component, pengembang dapat membuat aplikasi yang lebih terstruktur dan mudah dikelola.