Belajar React JS Pemula #3: Mengenal State dan Props Pada Komponen React JS

Belajar React Js - Hi, selamat datang kembali di seri Belajar React JS untuk pemula! Kalau kamu sudah mengikuti tutorial sebelumnya, pasti sudah paham dasar-dasar React JS, mulai dari pengenalan hingga struktur direktori proyek. Nah, di seri ketiga ini, kita akan masuk ke salah satu bagian penting dalam membangun aplikasi React: State dan Props.

Kenapa ini penting? Karena State dan Props adalah "jantung" dari React. Dengan memahami keduanya, kamu akan lebih mudah mengelola data, berinteraksi antar-komponen, dan menciptakan aplikasi yang dinamis. Bahkan, konsep ini akan sering kamu temui jika bekerja dengan framework modern lainnya. Jadi, memahami State dan Props adalah langkah wajib bagi siapa saja yang ingin serius mendalami React JS.

Untuk memulai, kita akan melihat apa itu State dan Props, bagaimana cara kerjanya, dan tentu saja, implementasi langsung dengan kode. Gak usah khawatir kalau kamu merasa baru banget dengan istilah ini, kita akan bahas pelan-pelan sampai paham. Siap? Yuk, kita mulai!

Baca Juga: Belajar React JS Pemula #1: Pengenalan Dasar ReactJS

Apa Itu Komponen di React JS?

Sebelum membahas lebih dalam tentang State dan Props, kita perlu memahami apa itu komponen dalam Belajar React JS. Komponen adalah bagian-bagian yang menyusun aplikasi React. Setiap aplikasi React terdiri dari berbagai komponen yang saling terhubung.

Komponen di React JS memiliki dua jenis utama:

1. Stateful Component
2. Stateless Component

Selain itu, komponen juga dapat dibagi menjadi Function Components dan Class Components. Jangan khawatir, kita akan membahas semua istilah ini satu per satu.

React JS bekerja dengan Virtual DOM. Untuk menampilkan elemen ke browser, kita harus membuat komponen terlebih dahulu. Nah, inilah keunggulan dari React: komponen bersifat reusable. Kamu juga bisa menggunakan komponen yang sama di berbagai aplikasi.

Apa Itu State dan Props?

1. State

State adalah objek khusus di dalam komponen React yang digunakan untuk menyimpan data atau status suatu komponen. State bersifat dinamis, artinya nilainya dapat diubah. Ketika state berubah, React akan secara otomatis merender ulang komponen terkait.

Cara Membuat State

State biasanya didefinisikan di dalam konstruktor sebuah class component. Berikut contoh penggunaannya:

class Header extends React.Component {
  constructor() {
    super();
    this.state = {
      title: "Belajar React JS",
      subTitle: "Panduan step-by-step untuk pemula",
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.title}</h1>
        <h2>{this.state.subTitle}</h2>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById("root"));

Pada kode di atas:

• State berisi properti title dan subTitle.
• Nilai state dipanggil menggunakan this.state.propertyName.

Mengubah State

State dapat diubah menggunakan method setState(). Contoh:

changeTitle = () => {
  this.setState({
    title: "Tutorial React JS Update",
  });
};

Ketika setState() dipanggil, React akan merender ulang elemen yang menggunakan state tersebut.

2. Props

Props adalah singkatan dari "Properties". Props digunakan untuk mengirim data dari komponen induk ke komponen anak. Berbeda dengan state, props bersifat read-only dan tidak dapat diubah.

Cara Menggunakan Props

Contoh penggunaan props:

function Message(props) {
  return (
    <div>
      <small>{props.sender}:</small>
      <p>{props.content}</p>
    </div>
  );
}

ReactDOM.render(
  <Message sender="Dian" content="Hi, bagaimana kabar?" />,
  document.getElementById("root")
);

Pada contoh di atas:

• Props diterima sebagai parameter props.
• Props dapat digunakan seperti objek biasa: props.propertyName.

Perbedaan State dan Props

State	Props
Dapat diubah (mutable).	Tidak dapat diubah.
Digunakan untuk data internal.	Digunakan untuk data eksternal.

Baca Juga: Belajar React js Pemula #2: Menyusun dan Memahami Struktur Direktori Project React dengan Mudah

Membuat Stateful dan Stateless Components

Stateful Component

Komponen yang menggunakan state disebut Stateful Component. Biasanya, komponen ini dibuat menggunakan class.

Contoh:

class Counter extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Tambah</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById("root"));

Stateless Component

Komponen yang tidak menggunakan state disebut Stateless Component. Biasanya, komponen ini dibuat menggunakan fungsi.

Contoh:

function Greeting(props) {
  return <h1>Halo, {props.name}!</h1>;
}

ReactDOM.render(<Greeting name="Dian" />, document.getElementById("root"));

Nested Components

Nested Components adalah komponen yang digunakan di dalam komponen lain. Contoh:

function Message(props) {
  return (
    <div>
      <small>{props.sender}:</small>
      <p>{props.content}</p>
    </div>
  );
}

class ChatBox extends React.Component {
  render() {
    return (
      <div>
        <Message sender="Dian" content="Hi, sudah belajar React?" />
        <Message sender="Petanikode" content="Ini lagi belajar React!" />
      </div>
    );
  }
}

ReactDOM.render(<ChatBox />, document.getElementById("root"));

Kesimpulan

State dan Props adalah elemen penting dalam membangun aplikasi Belajar React JS. Dengan memahami perbedaan dan cara penggunaannya, kamu dapat mulai membuat aplikasi React yang lebih kompleks.

Jangan lupa, belajar React JS adalah proses. Semakin sering berlatih, semakin paham kamu dengan konsep-konsepnya.

Sudah siap belajar lebih dalam tentang Belajar React JS? Gabung ke komunitas di CodePolitan! Di sana, kamu bisa bertanya, membaca, dan menulis segala hal yang ingin kamu bagikan. Baik kamu pemula maupun ahli, semua diterima dengan tangan terbuka! Yuk, bergabung sekarang juga!