Apa itu Komponen dalam React?

Komponen adalah blok bangunan dasar dari aplikasi React. Setiap komponen dalam React adalah bagian independen dari UI yang dapat digunakan kembali. Ada dua jenis utama komponen dalam React: Komponen Kelas (Class Component) dan Komponen Fungsional (Functional Component).

1. Komponen Kelas (Class Component)

Komponen kelas adalah komponen yang dibuat dengan menggunakan sintaks kelas ES6. Komponen kelas dapat memiliki state internal dan menggunakan lifecycle methods.

Contoh Komponen Kelas

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <p>Welcome to the Class Component example!</p>
      </div>
    );
  }
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

Penjelasan:

Konstruktor (constructor): Digunakan untuk menginisialisasi state.
State: Objek yang dapat berubah yang digunakan untuk menyimpan data komponen.
render() method: Method wajib yang mengembalikan elemen React untuk ditampilkan di UI.

2. Komponen Fungsional (Functional Component)

Komponen fungsional adalah komponen yang didefinisikan sebagai fungsi JavaScript. Sebelum React 16.8, komponen fungsional tidak dapat memiliki state atau menggunakan lifecycle methods, tetapi dengan pengenalan hooks, komponen fungsional sekarang bisa memiliki state dan efek samping.

Contoh Komponen Fungsional

function Welcome(props) {
  const [message, setMessage] = React.useState('Hello, World!');

  return (
    <div>
      <h1>{message}</h1>
      <p>Welcome to the Functional Component example!</p>
    </div>
  );
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

Penjelasan:

React.useState Hook: Digunakan untuk menambahkan state ke komponen fungsional.
Fungsi Pengembalian: Mengembalikan elemen React untuk ditampilkan di UI.

Perbandingan Komponen Kelas dan Fungsional

Feature

Class Component

Functional Component

Sintaks

ES6 Class

JavaScript Function

State

Menggunakan this.state

Menggunakan useState Hook

Lifecycle Methods

Menggunakan method lifecycle (e.g., componentDidMount)

Menggunakan useEffect Hook

Kode

Lebih verbose

Lebih ringkas

Performansi

Lebih lambat karena overhead lifecycle

Lebih cepat karena ringan

Contoh Lengkap

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Components</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// Class Component
class WelcomeClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello from Class Component!'
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <p>This is rendered by a Class Component.</p>
      </div>
    );
  }
}

// Functional Component
function WelcomeFunctional(props) {
  const [message, setMessage] = React.useState('Hello from Functional Component!');

  return (
    <div>
      <h1>{message}</h1>
      <p>This is rendered by a Functional Component.</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <WelcomeClass />
      <WelcomeFunctional />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Sumber

Komponen adalah inti dari pengembangan React, dan memahami perbedaan antara komponen kelas dan komponen fungsional adalah langkah penting dalam menguasai React.

PreviousLangkah-langkah Setup Project React.js NextApa itu Props dan State dalam React?

Last updated 7 months ago

class Welcome extends React.Component { constructor(props) { super(props); this.state = { message: 'Hello, World!' }; } render() { return ( <div> <h1>{this.state.message}</h1> <p>Welcome to the Class Component example!</p> </div> ); } } ReactDOM.render( <Welcome />, document.getElementById('root') );

function Welcome(props) { const [message, setMessage] = React.useState('Hello, World!'); return ( <div> <h1>{message}</h1> <p>Welcome to the Functional Component example!</p> </div> ); } ReactDOM.render( <Welcome />, document.getElementById('root') );

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Components</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="script.js"></script> </body> </html>

// Class Component class WelcomeClass extends React.Component { constructor(props) { super(props); this.state = { message: 'Hello from Class Component!' }; } render() { return ( <div> <h1>{this.state.message}</h1> <p>This is rendered by a Class Component.</p> </div> ); } } // Functional Component function WelcomeFunctional(props) { const [message, setMessage] = React.useState('Hello from Functional Component!'); return ( <div> <h1>{message}</h1> <p>This is rendered by a Functional Component.</p> </div> ); } function App() { return ( <div> <WelcomeClass /> <WelcomeFunctional /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') );