مقدمة

في هذا البرنامج التعليمي، سنقوم بإنشاء تطبيق ويب لتعقب النفقات باستخدام React. سيساعدك هذا المشروع على فهم إدارة الحالة ومعالجة الأحداث وتحديثات القائمة الديناميكية في React. إنها مثالية للمبتدئين الذين يهدفون إلى تعزيز معرفتهم بتطوير React من خلال بناء تطبيق عملي ومفيد.

نظرة عامة على المشروع

يتيح تطبيق Expense Tracker للمستخدمين متابعة دخلهم ونفقاتهم. يساعد في إدارة البيانات المالية من خلال تصنيف وحساب الدخل والنفقات والرصيد الإجمالي. يعرض هذا المشروع استخدام React لإدارة الحالة والتعامل مع مدخلات المستخدم بكفاءة.

سمات

• إضافة المعاملات: يمكن للمستخدمين إضافة معاملات الدخل أو النفقات.
• تتبع الرصيد: يمكن للمستخدمين عرض رصيدهم الإجمالي وتتبع التغييرات ديناميكيًا.
• حذف المعاملات: يمكن للمستخدمين إزالة المعاملات من القائمة.
• التخزين المحلي: تستمر المعاملات عبر عمليات إعادة تحميل الصفحة باستخدام التخزين المحلي.

التقنيات المستخدمة

• الرد: لبناء واجهة المستخدم وإدارة حالة المكون.
• CSS: لتصميم التطبيق.
• جافا سكريبت: للتعامل مع المنطق الأساسي للتطبيق.

هيكل المشروع

يتبع هيكل المشروع تخطيط مشروع 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 كجذر للتطبيق، حيث يعرض قائمة المعاملات ومكونات 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;

تصميم 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.

العرض المباشر

اطلع على العرض التجريبي المباشر لبرنامج تعقب النفقات هنا.

خاتمة

يوضح مشروع تعقب النفقات كيفية إدارة القوائم والحالة بشكل فعال في React. إنها طريقة رائعة لتعلم كيفية إنشاء تطبيقات ديناميكية مع تخزين دائم للبيانات باستخدام localStorage.

الاعتمادات

• الإلهام: تم تصميمه بفكرة مساعدة المستخدمين على تتبع معاملاتهم المالية.

مؤلف

أبهيشيك جورجار هو مطور ويب متخصص متحمس لإنشاء تطبيقات ويب عملية وعملية. اطلع على المزيد من مشاريعه على GitHub.