Erstellen einer React Expense Tracker-App

Einführung

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.

Projektübersicht

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.

Merkmale

• Transaktionen hinzufügen: Benutzer können Einnahmen- oder Ausgabentransaktionen hinzufügen.
• Guthaben verfolgen: Benutzer können ihr Gesamtguthaben anzeigen und Änderungen dynamisch verfolgen.
• Transaktionen löschen: Benutzer können Transaktionen aus der Liste entfernen.
• Lokaler Speicher: Transaktionen werden mithilfe von localStorage über das erneute Laden von Seiten hinweg beibehalten.

Verwendete Technologien

• Reagieren: Um die Benutzeroberfläche zu erstellen und den Komponentenstatus zu verwalten.
• CSS: Zum Formatieren der Anwendung.
• JavaScript: Zur Handhabung der Kernlogik der Anwendung.

Projektstruktur

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

Schlüsselkomponenten

• TransactionList.jsx: Zeigt die Liste der Transaktionen an und verwaltet sie.
• TransactionItem.jsx: Stellt eine einzelne Transaktion dar.
• AddTransaction.jsx: Verwaltet das Hinzufügen neuer Transaktionen (Einnahmen oder Ausgaben).

Code-Erklärung

TransactionList-Komponente

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;

TransactionItem-Komponente

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;

AddTransaction-Komponente

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-Komponente

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;

CSS-Styling

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;
}

Installation und Nutzung

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.

Live-Demo

Sehen Sie sich hier die Live-Demo des Expense Tracker an.

Abschluss

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.

Credits

• Inspiration: Entwickelt mit der Idee, Benutzern dabei zu helfen, ihre Finanztransaktionen zu verfolgen.

Autor

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!