Class Component React

Apa itu Class Component
Class Component adalah salah satu cara untuk mendefinisikan komponen React. Dan itu juga bertindak seperti fungsi yang menerima porps. Pada artikel yang berbahagia ini kita akan mengenal dan membuat Component React dengan mengunakan metode class.

Bagaimana Class Component Berkerja
Komponen berbasis class React adalah seperti roti dan mentega dari sebagian besar aplikasi web modern yang dibangun di Reactjs. Komponen ini adalah class sederhana terdiri dari beberapa fungsi yang menambahkan fungsi ke aplikasi. Semua komponen berbasis class adalah child class untuk class Component dari Reactjs.

Implementasi Class Component
Kapan kita membuat komponen di awali dengan nama Uppercase letter. Kemudian dilanjutkan dengan pendefinisian extends Component dari library React. Untuk menginitialkan ke React kalau class ini berbentuk component. Didalam class sendiri juga membutuhkan render() method, ini berfungsi sebagai method return HTML.

  class Demo extends Component {
    render() {
      return (
      //do something
      );
    }
  }
  export default Demo;

Sekarang aplikasi React component memanggil demo yang mengembalikan div element.
Class Component harus di include dalam extends React Component statement. Membuat statement sebuah inheritance ke React component, dan memberikan akses komponen ke React Functions Component. Komponen juga membutuhkan sebuah render() method untuk nantinya mengembalikan method returns HTML.

Component Constructor
Constructor Function digunakan dimana initial komponen properti. Dalam React Class Component properti harus disimpan disebuah objek dinamakan state. Constructor Function juga mempunyai super() method yang digunakan memanggil constructor parent class. Method super() dibutuhkan Ketika digunakan untuk mengakses variable yang sama dari parent class.

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "irulfadil",
      ig: "@fadilirul",
    };
  }

  render() {
    return (
      <div>
        <p>Saya {this.state.name}</p>
        <p>IG: {this.state.ig}</p>
      </div>
    );
  }
}
export default Demo;

Output:
Saya irulfadil
IG: @fadilirul

Component didalam Component
Kita dapat merujuk ke komponen di dalam komponen lain untuk menggunakan komponen dalam aplikasi, gunakan sintaks yang sama seperti HTML biasa ini . Contoh berikut kita menggunakan komponen mobil di dalam komponen garasi.

class Mobil extends Component {
  render() {
    return (
      <>
        <span>Mobil</span>
      </>
    );
  }
}

class Garansi extends Component {
  render() {
    return (
      <div>
        <p>
          <Mobil /> didalam Garasi
        </p>
      </div>
    );
  }
}
export default Garansi;

Output: Mobil didalam Garasi

Masih ada artikel yang membahas tentang bagaimana dengan Function Component.