In diesem Tutorial erstellen wir eine Expense Tracker-Webanwendung mit React. Dieses Projekt hilft Ihnen, die Statusverwaltung, die Ereignisbehandlung und dynamische Listenaktualisierungen in React zu verstehen. Es ist ideal für Anfänger, die ihr Wissen über die React-Entwicklung durch die Erstellung einer praktischen und nützlichen Anwendung vertiefen möchten.
Mit der Expense Tracker-Anwendung können Benutzer ihre Einnahmen und Ausgaben im Auge behalten. Es hilft bei der Verwaltung von Finanzdaten, indem es Einnahmen, Ausgaben und den Gesamtsaldo kategorisiert und berechnet. Dieses Projekt demonstriert die Verwendung von React für die Verwaltung des Status und die effiziente Verarbeitung von Benutzereingaben.
Die Projektstruktur folgt einem typischen React-Projektlayout:
├── public ├── src │ ├── components │ │ ├── TransactionList.jsx │ │ ├── TransactionItem.jsx │ │ ├── AddTransaction.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
Diese Komponente kümmert sich um die Anzeige der Transaktionen und die Verwaltung des Status aller Transaktionen.
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;
Die TransactionItem-Komponente stellt eine einzelne Transaktion dar, einschließlich Optionen zum Löschen.
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;
Diese Komponente verwaltet das Hinzufügen neuer Transaktionen und ermöglicht Benutzern die Eingabe von Einnahmen- oder Ausgabendaten.
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 dient als Stammverzeichnis der Anwendung und rendert die TransactionList- und AddTransaction-Komponenten.
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;
Das CSS sorgt dafür, dass die Anwendung sauber und benutzerfreundlich aussieht.
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;
}
Um zu beginnen, klonen Sie das Repository und installieren Sie die Abhängigkeiten:
git clone https://github.com/abhishekgurjar-in/expense-tracker.git cd expense-tracker npm install npm start
Die Anwendung wird unter http://localhost:3000 ausgeführt.
Sehen Sie sich hier die Live-Demo des Expense Tracker an.
Das Expense Tracker-Projekt zeigt, wie man Listen und Status in React effektiv verwaltet. Es ist eine großartige Möglichkeit zu lernen, wie man mit localStorage dynamische Anwendungen mit persistenter Datenspeicherung erstellt.
Abhishek Gurjar ist ein engagierter Webentwickler, der sich mit der Entwicklung praktischer und funktionaler Webanwendungen beschäftigt. Schauen Sie sich weitere seiner Projekte auf GitHub an.
Das obige ist der detaillierte Inhalt vonErstellen einer React Expense Tracker-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
