Введение

В этом уроке мы создадим веб-приложение для отслеживания расходов с использованием React. Этот проект поможет вам понять управление состоянием, обработку событий и обновление динамических списков в React. Он идеально подходит для новичков, стремящихся укрепить свои знания в области разработки React путем создания практичного и полезного приложения.

Обзор проекта

Приложение Expense Tracker позволяет пользователям отслеживать свои доходы и расходы. Он помогает управлять финансовыми данными путем классификации и расчета доходов, расходов и общего баланса. Этот проект демонстрирует использование 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: обрабатывает добавление новых транзакций (доходов или расходов).

Объяснение кода

Компонент TransactionList

Этот компонент управляет отображением транзакций и управлением состоянием всех транзакций.

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

Компонент TransactionItem представляет отдельную транзакцию, включая возможности ее удаления.

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

export default TransactionItem;

Компонент AddTransaction

Этот компонент управляет добавлением новых транзакций, позволяя пользователям вводить данные о доходах или расходах.

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;

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.

Кредиты

• Вдохновение: создано с целью помочь пользователям отслеживать свои финансовые транзакции.

Автор

Абхишек Гурджар — веб-разработчик, увлеченный созданием практичных и функциональных веб-приложений. Ознакомьтесь с другими его проектами на GitHub.