ReactJS - Pengurusan Keadaan Menggunakan Hook React

Hai sana, bakal pengembang React! Hari ini, kita akan melangsungkan perjalanan menarik ke dunia pengurusan keadaan menggunakan Hook React. Sebagai guru sains komputer tetangga Anda, saya sangat gembira untuk memandu Anda dalam petualangan ini. Jangan khawatir jika Anda baru dalam pemrograman – kita akan mengambil langkah demi langkah, dan sebelum Anda menyadari, Anda akan menguruskan keadaan seperti seorang ahli!

Apa Itu Keadaan dalam React?

Sebelum kita masuk ke hal yang mendalam, mari kita pahami apa arti "keadaan" dalam React. Bayangkan Anda sedang membangun benteng pasir. Bentuk dan ukuran saat ini benteng pasir Anda adalah "keadaannya". Ketika Anda menambahkan atau menghapus pasir, keadaan benteng pasir Anda berubah. Demikian pula, dalam React, keadaan mewakili kondisi saat ini komponen – data, penampilannya, atau perilakunya pada saat apa pun.

Mengenalkan Hook React

Sekarang, mari bicarakan tentang Hook React. Bayangkan hook sebagai alat ajaib yang memberikan superpower ke komponen Anda. Mereka memungkinkan komponen fungsional untuk memiliki keadaan dan fitur React lainnya tanpa menulis kelas. Hook yang kita fokuskan hari ini adalah useState.

Membuat Komponen yang Memiliki Keadaan

Mari kita mulai dengan membuat komponen sederhana yang memiliki keadaan. Kita akan membuat penghitung yang bertambah saat Anda mengklik tombol.

import React, { useState } from 'react';

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

return (
<div>
<p Anda mengklik {count} kali</p>
<button onClick={() => setCount(count + 1)}>
Klik saya
</button>
</div>
);
}

mariuraikan ini:

1. Kita import useState dari React.
2. Dalam fungsi Counter kita, kita panggil useState(0). Ini menciptakan variabel keadaan count yang diinisialisasi ke 0, dan fungsi setCount untuk memperbarui itu.
3. Kita menampilkan count saat ini dalam paragraf.
4. Ketika tombol diklik, kita memanggil setCount(count + 1) untuk menambahkan hitungan.

Setiap kali Anda mengklik tombol, React mere-renders komponen dengan hitungan yang diperbarui. Itu seperti magis, bukannya?

Mengenalkan Keadaan dalam Aplikasi Pengelolaan Pengeluaran

Sekarang kita sudah mulai, mari kita masuk lebih dalam dengan contoh yang lebih praktis – aplikasi pengelolaan pengeluaran. Kita akan membuat komponen yang memungkinkan pengguna menambahkan pengeluaran.

import React, { useState } from 'react';

function ExpenseManager() {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState('');
const [newAmount, setNewAmount] = useState('');

const addExpense = () => {
if (newExpense && newAmount) {
setExpenses([...expenses, { name: newExpense, amount: parseFloat(newAmount) }]);
setNewExpense('');
setNewAmount('');
}
};

return (
<div>
<h2>Pengelolaan Pengeluaran</h2>
<input
type="text"
value={newExpense}
onChange={(e) => setNewExpense(e.target.value)}
placeholder="Nama pengeluaran"
/>
<input
type="number"
value={newAmount}
onChange={(e) => setNewAmount(e.target.value)}
placeholder="Jumlah"
/>
<button onClick={addExpense}>Tambah Pengeluaran</button>
<ul>
{expenses.map((expense, index) => (
<li key={index}>{expense.name}: ${expense.amount}</li>
))}
</ul>
</div>
);
}

Wah, itu banyak hal untuk diterima! Mari uraikan ini:

1. Kita memiliki tiga variabel keadaan:

• expenses: Sebuah array untuk menyimpan semua pengeluaran
• newExpense: Sebuah string untuk nama pengeluaran baru
• newAmount: Sebuah string untuk jumlah pengeluaran baru

2. Fungsi addExpense:

• Memeriksa jika newExpense dan newAmount tidak kosong
• Menambahkan objek pengeluaran baru ke array expenses
• Membersihkan field input

3. Dalam JSX:

• Kita memiliki dua field input untuk nama pengeluaran dan jumlah
• Sebuah tombol untuk menambahkan pengeluaran
• Sebuah daftar yang menampilkan semua pengeluaran

Ingat saat saya membicarakan benteng pasir sebelumnya? Ini seperti memiliki sandi di mana Anda dapat menambahkan benteng baru (pengeluaran) kapan saja Anda inginkan. Setiap benteng memiliki nama dan ukuran (jumlah), dan Anda dapat melihat semua benteng Anda yang terdaftar di bawah.

Tabel Metode

Berikut ini adalah tabel metode yang kita gunakan:

Metode	Deskripsi
useState	Membuat variabel keadaan dan fungsi untuk memperbarui itu
setExpenses	Memperbarui array pengeluaran
setNewExpense	Memperbarui string newExpense
setNewAmount	Memperbarui string newAmount
map	Membuat array baru dengan memanggil fungsi pada setiap elemen array

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia pengurusan keadaan dengan Hook React. Kita telah belajar membuat komponen yang memiliki keadaan, memperbarui keadaan, dan bahkan membuat aplikasi pengelolaan pengeluaran mini.

Ingat, belajar React adalah seperti membangun benteng pasir – mulai dari yang kecil, eksperimen, dan jangan takut untuk menghancurkan dan memulai dari awal. Dengan latihan, Anda akan dapat membuat aplikasi kompleks dan indah dalam waktu singkat.

Terus kode, terus belajar, dan yang paling penting, bersenang-senang! Sampaijumpa lagi, ini adalah guru sains komputer tetangga Anda yang menutup. Selamat React-ing!

Credits: Image by storyset