Tutorial ReactJS Part #6 ~ Menggunakan Konstruktor

Hallo apa kabar teman semuanya, kemabli lagi bersama Teman Ngoding. Sebelumnya kita telah membahas State dan Props pada ReactJS, kali ini kita akan membahas Konstruktor pada ReactJS.

Konstruktor adalah fungsi atau method khusus pada class yang akan dieksekusi saat objek dibuat atau komponen digunakan.

Konstruktor biasanya digunakan untuk melakukan inisialisasi komponen. Konstruktor hanya ada pada komponen yang dibuat dengan class.

Konsep konstruktor sama di React. Konstruktor dalam komponen React dipanggil sebelum komponen dipasang. Saat Anda mengimplementasikan konstruktor untuk komponen React, Anda perlu memanggil metode super(props) sebelum pernyataan lainnya. Jika Anda tidak memanggil metode super(props), this.props tidak akan terdefinisi dalam konstruktor dan dapat menyebabkan bug.

Saya akan berikan contohnya:

Constructor(props){  
     super(props);  
}  

Di React, konstruktor terutama digunakan untuk dua tujuan:

1. Ini digunakan untuk menginisialisasi status lokal komponen dengan menetapkan objek ke this.state.
2. Ini digunakan untuk mengikat metode event handler yang terjadi di komponen Anda.

Anda tidak dapat memanggil metode setState() secara langsung di konstruktor(). Jika komponen perlu menggunakan status lokal, Anda harus langsung menggunakan ‘this.state’ untuk menetapkan status awal di konstruktor. Konstruktor hanya menggunakan this.state untuk menetapkan status awal, dan semua metode lain perlu menggunakan metode set.state().

Contoh

App.js

Main.js

Output

Pertanyaan paling umum yang terkait dengan konstruktor adalah

1. Apakah perlu memiliki konstruktor di setiap komponen?

Tidak, tidak perlu memiliki konstruktor di setiap komponen. Jika komponen tidak kompleks, itu hanya mengembalikan sebuah simpul.

class App extends Component {  
    render () {  
        return (  
            <p> Name: { this.props.name }</p>  
        );  
    }  
}  

2. Apakah perlu memanggil super() di dalam konstruktor?

Ya, perlu memanggil super() di dalam konstruktor. Jika Anda perlu menyetel properti atau mengakses ‘ini’ di dalam konstruktor di komponen Anda, Anda perlu memanggil super().

class App extends Component {  
    constructor(props){  
        this.fName = "Jhon"; // 'this' is not allowed before super()  
    }  
    render () {  
        return (  
            <p> Name: { this.props.name }</p>  
        );  
    }  
}  

Saat Anda menjalankan kode di atas, Anda mendapatkan pesan kesalahan yang mengatakan ‘ini’ tidak diizinkan sebelum super(). Jadi jika Anda perlu mengakses props di dalam konstruktor, Anda perlu memanggil super(props).

Arrow Functions

Fungsi Panah adalah fitur baru dari standar ES6. Jika Anda perlu menggunakan fungsi panah, tidak perlu mengikat peristiwa apa pun ke ‘ini.’ Di sini, ruang lingkup ‘ini’ bersifat global dan tidak terbatas pada fungsi panggilan apa pun. Jadi Jika Anda menggunakan Fungsi Panah, tidak perlu mengikat ‘ini’ di dalam konstruktor.

import React, { Component } from 'react';  
  
class App extends Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         data: 'www.temanngoding.com'  
      }  
  }  
  handleEvent = () => {  
    console.log(this.props);  
  }  
  render() {  
    return (  
      <div className="App">  
    <h2>React Constructor Example</h2>  
    <input type ="text" value={this.state.data} />  
        <button onClick={this.handleEvent}>Please Click</button>  
      </div>  
    );  
  }  
}  
export default App;  

Kita dapat menggunakan konstruktor dengan cara berikut:

1) Konstruktor digunakan untuk initialize state.

class App extends Component {  
  constructor(props){  
        // here, it is setting initial value for 'inputTextValue'  
        this.state = {  
            inputTextValue: 'initial value',  
        };  
  }  
}  

2) Menggunakan ‘this’ di dalam konstruktor

class App extends Component {  
    constructor(props) {  
        // when you use 'this' in constructor, super() needs to be called first  
        super();  
        // it means, when you want to use 'this.props' in constructor, call it as below  
        super(props);  
    }  
}  

3) Initializing third-party libraries

class App extends Component {  
    constructor(props) {  
  
        this.myBook = new MyBookLibrary();  
  
        //Here, you can access props without using 'this'  
        this.Book2 = new MyBookLibrary(props.environment);  
    }  
}  

4) Mengikat beberapa konteks (this) ketika Anda membutuhkan metode class untuk diteruskan dalam props to children.

class App extends Component {  
    constructor(props) {  
  
        // when you need to 'bind' context to a function  
        this.handleFunction = this.handleFunction.bind(this);  
    }  
}  

Demikian tutorial kali ini yang bisa saya sampaikan, semoga bermanfaat untuk teman teman semua. Jangan lupa baca juga tutorial sebelumnya.

Tutorial ReactJS Part #5 ~ Memahami State Dan Props

Tutorial ReactJS Part #4 ~ Komponen ReactJS

Tutorial ReactJS Part #3: Fungsi ReactJSX

Terimakasih….