परिचय

इस ट्यूटोरियल में, हम 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 (
    

      
Transaction History
      

        {transactions.map((transaction, index) => (
          
        ))}
      
    
  );
};

export default TransactionList;

लेनदेन आइटम घटक

TransactionItem घटक एक व्यक्तिगत लेनदेन का प्रतिनिधित्व करता है, जिसमें इसे हटाने के विकल्प भी शामिल हैं।

const TransactionItem = ({ transaction, deleteTransaction }) => {
  const sign = transaction.amount 
      {transaction.text} 
      {sign}${Math.abs(transaction.amount)}
      Delete
    
  );
};

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 (
    

      
Add New Transaction
      

         setText(e.target.value)}
          placeholder="Enter description"
        />
         setAmount(e.target.value)}
          placeholder="Enter amount"
        />
        Add Transaction
      
    
  );
};

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 (
    

      
Expense Tracker
      
      

          
Made with ❤️ by Abhishek Gurjar
        
    
  );
};

export default App;

सीएसएस स्टाइलिंग

सीएसएस सुनिश्चित करता है कि एप्लिकेशन साफ ​​और उपयोगकर्ता के अनुकूल दिखे।

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 पर चलना शुरू हो जाएगा।

लाइव डेमो

यहाँ व्यय ट्रैकर का लाइव डेमो देखें।

निष्कर्ष

एक्सपेंस ट्रैकर प्रोजेक्ट दर्शाता है कि रिएक्ट में सूचियों और स्थिति को प्रभावी ढंग से कैसे प्रबंधित किया जाए। यह सीखने का एक शानदार तरीका है कि लोकलस्टोरेज का उपयोग करके लगातार डेटा स्टोरेज के साथ गतिशील एप्लिकेशन कैसे बनाएं।

क्रेडिट

• प्रेरणा: उपयोगकर्ताओं को उनके वित्तीय लेनदेन को ट्रैक करने में मदद करने के विचार से निर्मित।

लेखक

अभिषेक गुर्जर एक समर्पित वेब डेवलपर है जो व्यावहारिक और कार्यात्मक वेब एप्लिकेशन बनाने का शौक रखता है। GitHub पर उनके और प्रोजेक्ट देखें।