Membangun Component dengan React

Pada artikel sebelumnya, kita sudah berkenalan singkat keberadaan react di dunia teknologi dan latarbelakang munculnya itu. Nah selanjutnya untuk mengawali artikel ini mencoba menggunakan react adalah bagaimana membuat sebuah component dan bagaimana penggunaanya.

Apa itu component
Component sudah menjadi bagian terpenting didalam react karena react sendiri terdiri dari parsel component. Component di reactjs ada yang disebut stateful component dan stateless component. Dan juga function component dan class component. Tanpa menggunakan component, reactjs tidak dapat mengimplementasikan ke dalam virtual DOM. Konsep virtual DOM sendiri membandingkan dengan DOM asli ketika terjadi render. Component inilah yang memberitahu react tentang apa saja yang harus di render untuk ditampilkan ke DOM asli (HTML). Jadi react tujuanya untuk menghasilkan HTML dengan cepat.


Virtual DOM adalah objek javascript yang merupakan virtual representasi dari real DOM asli. Ketika terjadi perubahan di aplikasi akan masuk kedalam virtual representasi DOM kemudian akan dibandingkan dengan salinan lainya lalu akan memperbaruhi DOM asli. React akan berinteraksi dengan virtual DOM untuk merender bagian yang berubah saja tanpa harus merender seluruh DOM asli. Proses ini berjalan begitu cepat sehingga menjadikan react sebagai teknologi modern saat ini. Component di buat dengan format JSX yang terdiri dari beberapa element HTML. Dan biasanya didalam component terdapat state, props, variable, method dan render().

Contoh membuat component dengan function

const Artikel = () => {
  return (
    <>
      <h1>Judul Artikel</h1>
      <p>paragraf</p>
    </>
  );
};
export default Artikel;

Output:
Judul Artikel
paragraf

Contoh membuat component dengan class

import { Component } from "react";
class Artikel extends Component {
  render() {
    return (
      <>
        <h1>Judul Artikel</h1>
        <p>paragraf</p>
      </>
    );
  }
}
export default Artikel;

Output:
Judul Artikel
Paragraf

Jika menggunakan konstruktor seperti ini,

import { Component } from "react";
class Artikel extends Component {
  constructor() {
    super();
    this.state = { judul: "Pemograman" };
  }
  render() {
    return (
      <>
        <h1>Judul Artikel</h1>
        <p>paragraf</p>
      </>
    );
  }
}
export default Artikel;

Pada script diatas terdapat tambahan baris constructor() dan didalamnya memanggil fungsi super() beserta state.

Constructor() adalah sebuah fungsi khusus hanya pada class yang pertama kali di eksekusi program. Berfungsi untuk melakukan initialisasi komponen. Ini akan kita temui didalam class component.
Super() adalah sebuah fungsi yang diberikan hak istemewa untuk mengakses semua method/fungsi yang ada di class parent.

State dan Props
State dan props adalah model data atau property di react. Keduanya bisa dibuat menggunakan class component, dapat juga function component.

Perbedaan state dan props

Perubahan state dapat menjadi asynchronous dan state dapat di modifikasi dengan this.setState. State bersifat private tidak dapat digunakan oleh component lain. Sedangkan props tidak dapat dirubah dan dimodifikasi kecuali saat di passing ke komponen lain.

Bagaimana Membuat Stateent

Kita bisa lihat kembali script class component diatas

  import { Component } from "react";
  class Artikel extends Component {
      constructor(){
          super();
          this.state={judul:'Pemograman'}
          }
          render(){…}
  }

Membuat state this.state={judul:‘Pemograman’} Dan ini mengambil nilai state

Judul Artikel {this.state.judul}

Jika terjadi perubahan state maka element tertentu itulah yang akan di render Kembali. Konsep inilah yang menjadikan react sangat reactif jika terjadi perubahan pada suatu element.

Contoh pembuatan state pada function component

const Artikel = () => {
  const [state, setState] = useState("Pemograman");
  return (
    <>
      <h1>Judul Artikel {state}</h1>
      <p>paragraf</p>
    </>
  );
};
export default Artikel;

Output:
Judul Artikel Pemograman
Paragraf

Bagaimana Mengubah State
State dapat berubah atau dimodifikasi dengan cara memanggil fungsi setState().
Contoh perubahan state pada class component

handleOnclik = () => {
  this.setState({
    judul: "UIUX",
  });
};

Contoh perubahan state pada function component

handleOnclik = () => {
    setState(name:"UIUX");
}

Bagaimana Membuat Props

Props dibuat pada saat pemanggilan component

  <Artikel judul={props.judul} />
  //Cara pengiriman state dengan props
  <Artikel penulis={this.state.name} />
  //Cara pengiriman props lebih dari satu
  <Artikel login={name} password={password} />
  //Cara mengirim nilai string dengan props
  <Artikel comment='commentValue'/>
  //Cara mengirim method dengan props
  <Artikel onClick={this.handle}/>

Bagaimana Mengubah Props
Props pada dasarnya tidak dapat dirubah kecuali saat di passing ke komponen lain dengan syarat perubahan terjadi di component parentnya.

Demikian penjelasan singkat namun padat tentang pengenalan component react. pada artikel selanjutnya akan membahas tentang perbedaan antara function component dan class component.