介绍
在本教程中，我们将使用 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 上查看他的更多项目。
