Membina Apl Penjejak Perbelanjaan React

pengenalan

Dalam tutorial ini, kami akan mencipta Aplikasi Web Penjejak Perbelanjaan menggunakan React. Projek ini akan membantu anda memahami pengurusan negeri, pengendalian acara dan kemas kini senarai dinamik dalam React. Ia sesuai untuk pemula yang bertujuan untuk mengukuhkan pengetahuan mereka tentang pembangunan React dengan membina aplikasi yang praktikal dan berguna.

Gambaran Keseluruhan Projek

Aplikasi Penjejak Perbelanjaan membolehkan pengguna menjejaki pendapatan dan perbelanjaan mereka. Ia membantu mengurus data kewangan dengan mengkategorikan dan mengira pendapatan, perbelanjaan dan jumlah baki. Projek ini mempamerkan penggunaan React untuk mengurus keadaan dan mengendalikan input pengguna dengan cekap.

Ciri-ciri

• Tambah Transaksi: Pengguna boleh menambah transaksi pendapatan atau perbelanjaan.
• Imbangan Jejak: Pengguna boleh melihat jumlah baki mereka dan menjejaki perubahan secara dinamik.
• Padam Transaksi: Pengguna boleh mengalih keluar transaksi daripada senarai.
• Storan Tempatan: Transaksi berterusan merentas muat semula halaman menggunakan localStorage.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna dan mengurus keadaan komponen.
• CSS: Untuk menggayakan aplikasi.
• JavaScript: Untuk mengendalikan logik teras aplikasi.

Struktur Projek

Struktur projek mengikut reka letak projek React biasa:

├── public
├── src
│   ├── components
│   │   ├── TransactionList.jsx
│   │   ├── TransactionItem.jsx
│   │   ├── AddTransaction.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Komponen Utama

• TransactionList.jsx: Memaparkan dan mengurus senarai transaksi.
• TransactionItem.jsx: Mewakili transaksi individu.
• AddTransaction.jsx: Mengendalikan penambahan transaksi baharu (pendapatan atau perbelanjaan).

Penerangan Kod

Komponen Senarai Transaksi

Komponen ini mengendalikan paparan transaksi dan menguruskan keadaan semua transaksi.

import { useState, useEffect } from "react";
import TransactionItem from "./TransactionItem";

const TransactionList = () => {
  const [transactions, setTransactions] = useState([]);

  useEffect(() => {
    const savedTransactions = JSON.parse(localStorage.getItem("transactions")) || [];
    setTransactions(savedTransactions);
  }, []);

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

  const deleteTransaction = (index) => {
    const newTransactions = transactions.filter((_, i) => i !== index);
    setTransactions(newTransactions);
  };

  return (
    <div className="transaction-list">
      <h2>Transaction History</h2>
      <ul>
        {transactions.map((transaction, index) => (
          <TransactionItem
            key={index}
            transaction={transaction}
            deleteTransaction={deleteTransaction}
          />
        ))}
      </ul>
    </div>
  );
};

export default TransactionList;

Komponen Item Transaksi

Komponen TransactionItem mewakili transaksi individu, termasuk pilihan untuk memadamkannya.

const TransactionItem = ({ transaction, deleteTransaction }) => {
  const sign = transaction.amount < 0 ? "-" : "+";
  return (
    <li className={transaction.amount < 0 ? "expense" : "income"}>
      {transaction.text} 
      <span>{sign}${Math.abs(transaction.amount)}</span>
      <button onClick={deleteTransaction}>Delete</button>
    </li>
  );
};

export default TransactionItem;

Tambah Komponen Transaksi

Komponen ini menguruskan penambahan transaksi baharu, membolehkan pengguna memasukkan data pendapatan atau perbelanjaan.

import { useState } from "react";

const AddTransaction = ({ addTransaction }) => {
  const [text, setText] = useState("");
  const [amount, setAmount] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    const transaction = { text, amount: +amount };
    addTransaction(transaction);
    setText("");
    setAmount("");
  };

  return (
    <div>
      <h2>Add New Transaction</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Enter description"
        />
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          placeholder="Enter amount"
        />
        <button type="submit">Add Transaction</button>
      </form>
    </div>
  );
};

export default AddTransaction;

Komponen Apl

App.jsx berfungsi sebagai punca aplikasi, menjadikan komponen TransactionList dan AddTransaction.

import { useState } from "react";
import TransactionList from './components/TransactionList';
import AddTransaction from './components/AddTransaction';
import './App.css';

const App = () => {
  const [transactions, setTransactions] = useState([]);

  const addTransaction = (transaction) => {
    setTransactions([...transactions, transaction]);
  };

  return (
    <div className="app">
      <h1>Expense Tracker</h1>
      <TransactionList transactions={transactions} />
      <AddTransaction addTransaction={addTransaction} />
<div className="footer">
          <p>Made with ❤️ by Abhishek Gurjar</p>
        </div>
    </div>
  );
};

export default App;

Penggayaan CSS

CSS memastikan aplikasi kelihatan bersih dan mesra pengguna.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.app {
  width: 400px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

input {
  width: calc(100% - 10px);
  padding: 5px;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.transaction-list ul {
  list-style: none;
  padding: 0;
}

.transaction-list li {
  background-color: #f9f9f9;
  margin: 5px 0;
  padding: 10px;
  border-left: 5px solid green;
}

.transaction-list li.expense {
  border-left: 5px solid red;
}

.transaction-list span {
  float: right;
}

button {
  float: right;
  background-color: red;
  color: white;
  padding: 5px;
}
.footer{
    text-align: center;
    margin: 40px;
}

Pemasangan dan Penggunaan

Untuk bermula, klon repositori dan pasang kebergantungan:

git clone https://github.com/abhishekgurjar-in/expense-tracker.git
cd expense-tracker
npm install
npm start

Aplikasi akan mula berjalan di http://localhost:3000.

Demo Langsung

Lihat demo langsung Penjejak Perbelanjaan di sini.

Kesimpulan

Projek Penjejak Perbelanjaan menunjukkan cara mengurus senarai dan menyatakan dengan berkesan dalam React. Ini cara yang bagus untuk mempelajari cara membina aplikasi dinamik dengan storan data yang berterusan menggunakan localStorage.

Kredit

• Inspirasi: Dibina dengan idea untuk membantu pengguna menjejaki transaksi kewangan mereka.

Pengarang

Abhishek Gurjar ialah pembangun web berdedikasi yang bersemangat untuk mencipta aplikasi web yang praktikal dan berfungsi. Lihat lebih banyak projek beliau di GitHub.

Atas ialah kandungan terperinci Membina Apl Penjejak Perbelanjaan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!