构建 React 费用跟踪应用程序

珍惜时间，勤奋学习！今天给大家带来《构建 React 费用跟踪应用程序》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

介绍

在本教程中，我们将使用 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}>
        &lt;input
          type=&quot;text&quot;
          value={text}
          onchange={(e) =&gt; settext(e.target.value)}
          placeholder="enter description"
        />
        &lt;input
          type=&quot;number&quot;
          value={amount}
          onchange={(e) =&gt; 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 上查看他的更多项目。

理论要掌握，实操不能落！以上关于《构建 React 费用跟踪应用程序》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！