React Expense Tracker アプリの構築

導入

このチュートリアルでは、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コンポーネント

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}>
        <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 はアプリケーションのルートとして機能し、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 のライブデモをチェックしてください。

結論

Expense Tracker プロジェクトは、React でリストと状態を効果的に管理する方法を示します。これは、localStorage を使用して永続的なデータ ストレージを備えた動的アプリケーションを構築する方法を学ぶのに最適な方法です。

クレジット

• インスピレーション: ユーザーが金融取引を追跡できるようにするという考えに基づいて構築されました。

著者

Abhishek Gurjar は、実用的で機能的な Web アプリケーションの作成に情熱を注ぐ専任の Web 開発者です。 GitHub で彼のプロジェクトをさらにチェックしてください。

以上がReact Expense Tracker アプリの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。