ReactJS - Manajemen State Menggunakan React Hooks

Hai teman-teman, pengembang React masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia manajemen state menggunakan React Hooks. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam petualangan ini. Jangan khawatir jika Anda masih baru dalam programming – kita akan mengambil langkah-langkah perlahan-lahan, dan sebelum Anda menyadari, Anda akan mengelola state seperti seorang ahli!

Apa Itu State di React?

Sebelum kita masuk ke detail, mari kita pahami apa arti "state" di React. Bayangkan Anda sedang membangun benteng pasir. Bentuk dan ukuran saat ini dari benteng pasir Anda adalah "state"nya. Ketika Anda menambahkan atau menghapus pasir, state benteng pasir Anda berubah. Demikian pula, di React, state mewakili kondisi saat ini dari komponen – data, penampilannya, atau perilakunya pada saat apa pun.

Mengenalkan React Hooks

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

Membuat Komponen Stateful

Mari kita mulai dengan membuat komponen stateful sederhana. Kita akan membuat counter 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>
);
}

Mari kitauraikan ini:

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

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

Mengenalkan State di Aplikasi Expense Manager

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

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

Wah, itu banyak sekali yang perlu diambil! Mari kitauraikan ini:

1. Kita memiliki tiga variabel state:

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

2. Fungsi addExpense:

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

3. Dalam JSX:

• Kita memiliki dua field input untuk nama expense dan jumlah
• Sebuah tombol untuk menambah expense
• Sebuah list yang menampilkan semua expense

Ingat saat saya membahas benteng pasir sebelumnya? Ini seperti memiliki pasir tempat Anda dapat menambahkan benteng baru (expense) kapan pun Anda inginkan. Setiap benteng memiliki nama dan ukuran (jumlah), dan Anda dapat melihat semua benteng Anda terdaftar dibawah.

Tabel Metode

Berikut adalah tabel metode yang kita gunakan:

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

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia manajemen state dengan React Hooks. Kita telah belajar membuat komponen stateful, memperbarui state, dan bahkan membuat aplikasi pengelolaan expense mini.

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

Terus coding, terus belajar, dan terutama, bersenang-senang! Sampaijumpa lagi, ini adalah guru ilmu komputer yang ramah Anda menutup. Selamat React-ing!

Credits: Image by storyset