在本教程中，我們將使用 React 建立一個 Expense Tracker Web 應用程式。此專案將幫助您了解 React 中的狀態管理、事件處理和動態清單更新。對於旨在透過建立實用且有用的應用程式來加強 React 開發知識的初學者來說，它是理想的選擇。
費用追蹤應用程式允許用戶追蹤他們的收入和費用。它透過分類和計算收入、支出和總餘額來幫助管理財務數據。此專案展示如何使用 React 來有效管理狀態和處理使用者輸入。
專案結構遵循典型的 React 專案佈局：
├── public ├── src │ ├── components │ │ ├── TransactionList.jsx │ │ ├── TransactionItem.jsx │ │ ├── AddTransaction.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
此元件負責顯示交易並管理所有交易的狀態。
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 確保應用程式看起來乾淨且用戶友好。
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中文網其他相關文章！
