ReactJS - Konstruktor: Blok Pembina Komponen React

Hai, para pengembang React yang bersemangat! Hari ini, kita akan mendalamkan salah satu konsep dasar di React: konstruktor. PERTAMA, pikirkan konstruktor sebagai dasar rumah – itu adalah tempat semuanya dimulai. Pada akhir pelajaran ini, Anda akan dapat membuat komponen React seperti seorang ahli!

Apa Itu Konstruktor?

Sebelum kita melompat ke rincian spesifik React, mari kita memahami apa itu konstruktor dalam istilah pemrograman umum.

Konstruktor adalah metode khusus dalam kelas yang dipanggil secara otomatis ketika objek kelas itu dibuat. Itu seperti kelahiran komponen – hal pertama yang terjadi saat komponen Anda muncul.

Dalam React, konstruktor adalah tempat kita menyiapkan keadaan awal komponen kita dan mengikat pengобработчик peristiwa. Itu adalah kesempatan pertama komponen kita untuk mengatakan "Hai, Dunia!"

mari kita lihat contoh dasar:

class Welcome extends React.Component {
constructor(props) {
super(props);
console.log("Hai, saya lahir!");
}

render() {
return <h1>Selamat Datang di React!</h1>;
}
}

Dalam contoh ini, setiap kali komponen Welcome dibuat, dia akan mencatat "Hai, saya lahir!" ke konsol. Itu seperti permulaan suara pertama komponen!

Inisialisasi Props

Sekarang, mari bicarakan tentang props. Props (singkatan dari properties) adalah cara komponen induk mengirim data ke komponen anaknya. Dalam konstruktor, kita dapat mengakses props ini dan menggunakannya untuk mengatur komponen kita.

mari kita lihat bagaimana cara nya:

class Greeter extends React.Component {
constructor(props) {
super(props);
console.log(`Saya menerima nama: ${props.name}`);
}

render() {
return <h1>Hai, {this.props.name}!</h1>;
}
}

Dalam contoh ini, kita mencatat prop name yang diterima oleh komponen Greeter kita. Catat bahwa panggilan super(props) ini sangat penting! Itu memanggil konstruktor kelas induk (React.Component) dan mengirim props kepadanya. Selalu ingat untuk memanggil super(props) pertama kali dalam konstruktor Anda.

Anda dapat menggunakannya untuk:

1. Catat props yang diterima untuk debugging
2. Melakukan perhitungan berdasarkan props
3. Mengatur keadaan awal berdasarkan props (yang kita akan bahas selanjutnya!)

Inisialisasi Keadaan

Keadaan adalah tempat komponen menyimpan data yang dapat berubah. Konstruktor adalah tempat yang sempurna untuk menginisialisasi keadaan ini. mari kita lihat bagaimana:

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

render() {
return <h1>Jumlah saat ini: {this.state.count}</h1>;
}
}

Di sini, kita menginisialisasi keadaan kita dengan properti count yang ditetapkan ke 0. Ini satu-satunya tempat di mana Anda seharusnya memberikan this.state secara langsung. Di semua tempat lain, gunakan this.setState() untuk memperbarui keadaan.

Anda juga dapat menggunakan props untuk menginisialisasi keadaan:

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
secondsElapsed: 0,
interval: props.interval || 1000
};
}

// ... sisanya komponen
}

Dalam contoh ini, kita menggunakan prop (interval) untuk menginisialisasi keadaan kita, dengan nilai default 1000 jika tidak ada prop yang diberikan.

Pengikatan Pengобработчик

Penggunaan terakhir utama konstruktor adalah untuk mengikat pengобработчик peristiwa. Dalam JavaScript, metode kelas secara default tidak terikat. Jika Anda lupa untuk mengikat mereka dan mengirim mereka ke pengобработчик peristiwa, this akan menjadi undefined saat metode dipanggil.

mari kita lihat bagaimana mengikat metode dalam konstruktor:

class ClickCounter extends React.Component {
constructor(props) {
super(props);
this.state = { clicks: 0 };
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}));
}

render() {
return (
<div>
<p>Klik: {this.state.clicks}</p>
<button onClick={this.handleClick}>Klik saya!</button>
</div>
);
}
}

Dalam contoh ini, kita mengikat this.handleClick dalam konstruktor. Hal ini memastikan bahwa saat handleClick dipanggil, this mengacu ke instance komponen kita, memungkinkan kita untuk memanggil this.setState.

Menggabungkan Semua

mari kita buat komponen yang menggunakan semua konsep ini:

class UserGreeting extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
username: props.username || 'Tamu'
};
this.toggleLogin = this.toggleLogin.bind(this);
}

toggleLogin() {
this.setState(prevState => ({
isLoggedIn: !prevState.isLoggedIn
}));
}

render() {
return (
<div>
<h1>Hai, {this.state.username}!</h1>
<p Anda {this.state.isLoggedIn ? 'masuk' : 'belum masuk'}.</p>
<button onClick={this.toggleLogin}>
{this.state.isLoggedIn ? 'Keluar' : 'Masuk'}
</button>
</div>
);
}
}

Komponen ini:

1. Menginisialisasi props (username)
2. Mengatur keadaan awal (isLoggedIn dan username)
3. Mengikat metode toggleLogin

Metode Konstruktor Umum

Berikut adalah tabel metode umum yang Anda mungkin gunakan dalam konstruktor:

Metode	Deskripsi
super(props)	Panggil konstruktor induk
this.state = {...}	Inisialisasi keadaan
this.methodName = this.methodName.bind(this)	Ikatan metode
console.log(props)	Catat props yang diterima
this.intervalId = setInterval(...)	Mengatur timer atau interval

Ingat, konstruktor hanya awal perjalanan komponen Anda. Itu tempat Anda menyiapkan dasar bagi segala sesuatu yang akan datang. Gunakanlah itu bijaksana, dan komponen Anda akan mulai dengan baik!

Saya harap tutorial ini telah membantu Anda memahami konsep konstruktor React lebih baik. Terus latihan, dan segera Anda akan dapat membuat komponen React dalam tidur Anda! Selamat coding!

Credits: Image by storyset