在本教程中，我们将使用 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中文网其他相关文章！
