介绍
在本教程中，我们将使用 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 ( transaction history
{transactions.map((transaction, index) => ( ))}
);};export default transactionlist;
交易项目组件
transactionitem 组件代表单个事务，包括删除它的选项。
const transactionitem = ({ transaction, deletetransaction }) => { const sign = transaction.amount < 0 ? "-" : "+"; return ( <li classname={transaction.amount {transaction.text} {sign}${math.abs(transaction.amount)} );};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 ( add new transaction
settext(e.target.value)} placeholder="enter description" /> setamount(e.target.value)} placeholder="enter amount" /> );};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 ( );};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.gitcd expense-trackernpm installnpm start
应用程序将在 http://localhost:3000 开始运行。
现场演示
在此处查看费用跟踪器的现场演示。
结论
expense tracker 项目演示了如何在 react 中有效管理列表和状态。这是学习如何使用 localstorage 构建具有持久数据存储的动态应用程序的好方法。
制作人员
灵感：旨在帮助用户跟踪其金融交易。
作者
abhishek gurjar 是一位专注的 web 开发人员，热衷于创建实用且功能性的 web 应用程序。在 github 上查看他的更多项目。
以上就是构建 React 费用跟踪应用程序的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629831.html
微信扫一扫 
支付宝扫一扫 
![[python]windows上通过whl文件安装triton模块](https://www.chuangxiangniao.com/wp-content/uploads/2025/11/175910816437120.jpg)
![[python]windows上通过whl文件安装triton模块](https://www.chuangxiangniao.com/wp-content/uploads/2025/11/175679953098868-3.png)
