构建 React 费用跟踪应用程序

百变鹏仔 4个月前 (09-19) #CSS

文章标签应用程序

介绍

在本教程中，我们将使用 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 = () =&gt; {  const [transactions, settransactions] = usestate([]);  useeffect(() =&gt; {    const savedtransactions = json.parse(localstorage.getitem("transactions")) || [];    settransactions(savedtransactions);  }, []);  useeffect(() =&gt; {    localstorage.setitem("transactions", json.stringify(transactions));  }, [transactions]);  const deletetransaction = (index) =&gt; {    const newtransactions = transactions.filter((_, i) =&gt; i !== index);    settransactions(newtransactions);  };  return (    <div classname="transaction-list">      <h2>transaction history</h2>      <ul>        {transactions.map((transaction, index) =&gt; (          <transactionitem key="{index}" transaction="{transaction}" deletetransaction="{deletetransaction}"></transactionitem>        ))}      </ul></div>  );};export default transactionlist;

交易项目组件

transactionitem 组件代表单个事务，包括删除它的选项。

const transactionitem = ({ transaction, deletetransaction }) =&gt; {  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 }) =&gt; {  const [text, settext] = usestate("");  const [amount, setamount] = usestate("");  const handlesubmit = (e) =&gt; {    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"        /&gt;        <input type="number" value="{amount}" onchange="{(e)"> setamount(e.target.value)}          placeholder="enter amount"        /&gt;        <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 = () =&gt; {  const [transactions, settransactions] = usestate([]);  const addtransaction = (transaction) =&gt; {    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 样式

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 上查看他的更多项目。

文章推荐