Tutorial React JS Pemula: Belajar useState dan useEffect Hooks Pada Web Point of Sales

React JS adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna yang interaktif dan dinamis. Dalam pengembangan aplikasi seperti Web Point of Sales (POS), kita sering kali memerlukan state management dan efek samping yang dapat ditangani dengan dua hooks utama di React, yaitu useState dan useEffect.

1. Mengenal useState

useState adalah hook yang digunakan untuk mengelola state lokal dalam komponen React. Pada aplikasi POS, kita bisa menggunakannya untuk menyimpan data seperti daftar produk, jumlah item dalam keranjang, atau total harga.

Contoh penggunaan useState

import React, { useState } from 'react';

function POSApp() {
  const [cart, setCart] = useState([]);
  const [total, setTotal] = useState(0);

  const addItemToCart = (item) => {
    setCart([...cart, item]);
    setTotal(total + item.price);
  };

  return (
    <div>
      <h2>Total: ${total}</h2>
      <button onClick={() => addItemToCart({ name: 'Product A', price: 50 })}>
        Tambah Produk A
      </button>
    </div>
  );
}

export default POSApp;

Penjelasan:

• useState([]): Menginisialisasi state cart sebagai array kosong.
• useState(0): Menginisialisasi state total dengan nilai 0.
• setCart([...cart, item]): Menambahkan item baru ke dalam cart.
• setTotal(total + item.price): Mengupdate total harga saat item ditambahkan.

2. Mengenal useEffect

useEffect digunakan untuk menangani efek samping seperti fetching data, mengelola event listener, atau menyimpan data ke local storage. Dalam aplikasi POS, kita dapat menggunakannya untuk menyimpan daftar belanja ke local storage atau melakukan fetching produk dari API.

Contoh penggunaan useEffect

import React, { useState, useEffect } from 'react';

function POSApp() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/products')
      .then(response => response.json())
      .then(data => setProducts(data));
  }, []); // Empty dependency array means this runs once on mount

  return (
    <div>
      <h2>Daftar Produk</h2>
      <ul>
        {products.map((product, index) => (
          <li key={index}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

export default POSApp;

Penjelasan:

• useEffect(() => {...}, []): Efek hanya dijalankan saat komponen pertama kali dimuat.
• fetch('https://api.example.com/products'): Mengambil daftar produk dari API.
• setProducts(data): Menyimpan data produk ke dalam state.

3. Menggabungkan useState dan useEffect

Dalam aplikasi POS yang lebih kompleks, kita bisa menggabungkan useState dan useEffect untuk mengelola daftar belanjaan dan menyimpannya ke local storage.

Contoh penerapan

import React, { useState, useEffect } from 'react';

function POSApp() {
  const [cart, setCart] = useState([]);

  useEffect(() => {
    const savedCart = localStorage.getItem('cart');
    if (savedCart) {
      setCart(JSON.parse(savedCart));
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('cart', JSON.stringify(cart));
  }, [cart]);

  const addItemToCart = (item) => {
    setCart([...cart, item]);
  };

  return (
    <div>
      <h2>Keranjang Belanja</h2>
      <button onClick={() => addItemToCart({ name: 'Product A', price: 50 })}>
        Tambah Produk A
      </button>
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.name} - ${item.price}</li>
        ))}
      </ul>
    </div>
  );
}

export default POSApp;

Penjelasan:

• Saat pertama kali aplikasi dijalankan, useEffect akan membaca daftar belanja dari localStorage.
• Setiap kali cart berubah, daftar belanja akan disimpan kembali ke localStorage.
• Dengan cara ini, data keranjang belanja tetap tersimpan meskipun pengguna menutup browser.

Kesimpulan

Dalam tutorial ini, kita telah mempelajari bagaimana useState dan useEffect dapat digunakan dalam Web Point of Sales untuk mengelola data dan efek samping. useState sangat berguna untuk menyimpan status seperti daftar belanja dan total harga, sedangkan useEffect digunakan untuk menangani proses seperti fetching data dan menyimpan informasi ke local storage.

Mulailah bereksperimen dengan React Hooks ini dalam proyek POS Anda dan tingkatkan efisiensi dalam membangun aplikasi interaktif! 🚀