在本教程中，我们将使用 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}"></transactionitem>
))}
</ul>
</div>
);
};
export default transactionlist;
transactionitem 组件代表单个事务，包括删除它的选项。
const transactionitem = ({ transaction, deletetransaction }) => {
const sign = transaction.amount
{transaction.text}
<span>{sign}${math.abs(transaction.amount)}</span>
<button onclick="{deletetransaction}">delete</button>
);
};
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}"></transactionlist><addtransaction 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(null, 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 上查看他的更多项目。