ReactJS - Membuat Komponen yang Sadar Acara

Hai teman-teman pengembang React masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia komponen yang sadar acara dalam ReactJS. Jangan khawatir jika Anda baru dalam pemrograman - saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini secara bertahap. Pada akhir panduan ini, Anda akan membuat komponen yang dapat merespon tindakan pengguna seperti seorang ahli!

Apa Itu Komponen Sadar Acara?

Sebelum kita mendalam, mari kita mengerti apa yang dimaksud dengan komponen "sadar acara". Bayangkan Anda di sebuah pesta (tetap ikut, ini terkait dengan pemrograman, saya janji!). Anda tidak hanya berdiri seperti patung - Anda merespon hal-hal yang terjadi di sekitar Anda. Seseorang cerita lebaran, Anda tertawa. Seseorang menawarkan makanan, Anda menerima. Itu tepat apa yang dilakukan komponen yang sadar acara di React - itu merespon hal-hal yang terjadi, seperti klik tombol atau input keyboard.

Bagaimana Membuat Komponen Sadar Acara?

Sekarang, mari kita kerahkan lengan dan buat komponen sadar acara pertamanya. Kita akan mulai dengan sesuatu yang sederhana - tombol yang menghitung berapa kali itu diklik.

Langkah 1: Menyiapkan Komponen

Pertama, mari kita buat komponen React dasar:

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

return (
<div>
<button>Click me!</button>
<p>You've clicked {count} times</p>
</div>
);
}

export default ClickCounter;

mari kitauraikan ini:

1. Kita mengimpor React dan useState dari pustaka 'react'.
2. Kita menentukan komponen fungsi ClickCounter.
3. Dalamnya, kita menggunakan hook useState untuk membuat variabel state count dan fungsi untuk memperbarui nya, setCount.
4. Kita mengembalikan beberapa JSX dengan tombol dan paragraf yang menunjukkan hitungan saat ini.

Langkah 2: Menambahkan Penangan Acara

Sekarang, mari kita membuat tombol ini melakukan sesuatu saat diklik:

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<button onClick={handleClick}>Click me!</button>
<p>You've clicked {count} times</p>
</div>
);
}

export default ClickCounter;

Apa yang baru di sini?

1. Kita menambahkan fungsi handleClick yang meningkatkan count sebesar 1.
2. Kita menambahkan atribut onClick ke tombol kita, mengatur nya ke handleClick.

Sekarang, setiap kali tombol diklik, handleClick akan dipanggil, memperbarui hitungan kita!

Menyampaikan Informasi Ekstra ke Penangan Acara

kadang-kadang, kita ingin menyampaikan informasi tambahan ke penangan acara kita. Mari kita buat contoh yang lebih kompleks - daftar buah-buahan di mana mengklik buah-buahan akan mencatat namanya.

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

const handleFruitClick = (fruitName) => {
console.log(`You clicked on ${fruitName}`);
};

return (
<ul>
{fruits.map((fruit, index) => (
<li key={index} onClick={() => handleFruitClick(fruit)}>
{fruit}
</li>
))}
</ul>
);
}

export default FruitList;

mari kitauraikan ini:

1. Kita memiliki array fruits.
2. Fungsi handleFruitClick menerima parameter fruitName dan mencatatnya.
3. Dalam JSX kita, kita gunakan map untuk membuat item daftar untuk setiap buah-buahan.
4. onClick untuk setiap item diatur ke fungsi arrow yang memanggil handleFruitClick dengan nama buah-buahan.

Dengan cara ini, kita menyampaikan nama buah-buahan ke penangan acara saat itu diklik!

Penangan Acara Umum di React

React mendukung banyak penangan acara. Berikut adalah tabel dari beberapa yang umum:

Penangan Acara	Deskripsi
onClick	Dipicu saat elemen diklik
onChange	Dipicu saat nilai elemen input berubah
onSubmit	Dipicu saat form dikirimkan
onMouseEnter	Dipicu saat mouse memasuki elemen
onMouseLeave	Dipicu saat mouse meninggalkan elemen
onKeyDown	Dipicu saat tombol ditekan
onKeyUp	Dipicu saat tombol dilepaskan
onFocus	Dipicu saat elemen menerima fokus
onBlur	Dipicu saat elemen kehilangan fokus

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama dalam membuat komponen yang sadar acara di React. Kita telah menutupi dasar-dasar penanganan klik, memperbarui state berdasarkan acara, dan bahkan menyampaikan informasi tambahan ke penangan acara.

Ingat, menjadi ahli dalam ini seperti mempelajari tari - itu memerlukan latihan! Jangan frustasi jika itu tidak berjalan secepat itu (permainan kata yang dimaksudkan). Terus mencoba, cobalah membuat jenis komponen interaktif lainnya, dan segera Anda akan dapat mengkoreografi interaksi pengguna kompleks dengan mudah!

Dalam tahun-tahun pengajaran saya, saya telah melihat banyak siswa bergerak dari konfusi ke kepercayaan diri dengan konsep ini. Anda sedang dalam jalannya untuk bergabung dengan mereka. Tetap kode, tetap bersemangat, dan terutama, bersenang-senang dengan itu!

Credits: Image by storyset