建立 React 費用追蹤應用程式

介紹

在本教程中，我們將使用 React 建立一個 Expense Tracker Web 應用程式。此專案將幫助您了解 React 中的狀態管理、事件處理和動態清單更新。對於旨在透過建立實用且有用的應用程式來加強 React 開發知識的初學者來說，它是理想的選擇。

項目概況

費用追蹤應用程式允許用戶追蹤他們的收入和費用。它透過分類和計算收入、支出和總餘額來幫助管理財務數據。此專案展示如何使用 React 來有效管理狀態和處理使用者輸入。

特徵

• 新增交易：使用者可以新增收入或支出交易。
• 追蹤餘額：使用者可以動態查看其總餘額並追蹤變化。
• 刪除交易：使用者可以從清單中刪除交易。
• 本地儲存：使用 localStorage 在頁面重新載入時保留交易。

使用的技術

• React：建立使用者介面並管理元件狀態。
• CSS：設定應用程式的樣式。
• JavaScript：處理應用程式的核心邏輯。

專案結構

專案結構遵循典型的 React 專案佈局：

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

關鍵零件

• TransactionList.jsx：顯示和管理交易清單。
• TransactionItem.jsx：代表單一交易。
• AddTransaction.jsx：處理新增交易（收入或支出）。

程式碼說明

交易清單組件

此元件負責顯示交易並管理所有交易的狀態。

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;

交易項目組件

TransactionItem 元件代表單一事務，包括刪除它的選項。

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;

新增交易組件

此元件管理新增交易，允許使用者輸入收入或支出資料。

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;

應用程式元件

App.jsx 作為應用程式的根，渲染 TransactionList 和 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;

CSS 樣式

CSS 確保應用程式看起來乾淨且用戶友好。

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;
}

安裝與使用

首先，複製儲存庫並安裝相依性：

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

應用程式將在 http://localhost:3000 開始運作。

現場演示

在此處查看費用追蹤器的現場演示。

結論

Expense Tracker 專案示範如何在 React 中有效管理清單和狀態。這是學習如何使用 localStorage 建立具有持久性資料儲存的動態應用程式的好方法。

製作人員

• 靈感：旨在幫助用戶追蹤其金融交易。

作者

Abhishek Gurjar 是一位專注的 Web 開發人員，熱衷於創建實用且功能性的 Web 應用程式。在 GitHub 上查看他的更多專案。

以上是建立 React 費用追蹤應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！