Introduction

Dans ce didacticiel, nous allons créer une Application Web Expense Tracker à l'aide de React. Ce projet vous aidera à comprendre la gestion des états, la gestion des événements et les mises à jour de listes dynamiques dans React. Il est idéal pour les débutants souhaitant renforcer leurs connaissances du développement React en créant une application pratique et utile.

Aperçu du projet

L'application Expense Tracker permet aux utilisateurs de suivre leurs revenus et leurs dépenses. Il aide à gérer les données financières en catégorisant et en calculant les revenus, les dépenses et le solde total. Ce projet présente l'utilisation de React pour gérer l'état et gérer efficacement les entrées des utilisateurs.

Caractéristiques

• Ajouter des transactions : les utilisateurs peuvent ajouter des transactions de revenus ou de dépenses.
• Suivi du solde : les utilisateurs peuvent consulter leur solde total et suivre les modifications de manière dynamique.
• Supprimer les transactions : les utilisateurs peuvent supprimer des transactions de la liste.
• Stockage local : les transactions sont conservées lors des rechargements de pages à l'aide de localStorage.

Technologies utilisées

• React : pour créer l'interface utilisateur et gérer l'état des composants.
• CSS : pour styliser l'application.
• JavaScript : pour gérer la logique de base de l'application.

Structure du projet

La structure du projet suit une présentation typique d'un projet React :

├── public
├── src
│   ├── components
│   │   ├── TransactionList.jsx
│   │   ├── TransactionItem.jsx
│   │   ├── AddTransaction.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Composants clés

• TransactionList.jsx : affiche et gère la liste des transactions.
• TransactionItem.jsx : représente une transaction individuelle.
• AddTransaction.jsx : gère l'ajout de nouvelles transactions (revenus ou dépenses).

Explication du code

Composant TransactionList

Ce composant gère l'affichage des transactions et la gestion de l'état de toutes les transactions.

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;

Composant TransactionItem

Le composant TransactionItem représente une transaction individuelle, y compris les options permettant de la supprimer.

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

export default TransactionItem;

Composant AddTransaction

Ce composant gère l'ajout de nouvelles transactions, permettant aux utilisateurs de saisir des données sur les revenus ou les dépenses.

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;

Composant d'application

App.jsx sert de racine de l'application, rendant les composants TransactionList et 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;

Style CSS

Le CSS garantit que l'application semble propre et conviviale.

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 et utilisation

Pour commencer, clonez le référentiel et installez les dépendances :

git clone https://github.com/abhishekgurjar-in/expense-tracker.git
cd expense-tracker
npm install
npm start

L'application démarrera à http://localhost:3000.

Démo en direct

Découvrez la démo en direct d'Expense Tracker ici.

Conclusion

Le projet Expense Tracker montre comment gérer efficacement les listes et les états dans React. C'est un excellent moyen d'apprendre à créer des applications dynamiques avec un stockage de données persistant à l'aide de localStorage.

Crédits

• Inspiration : conçu avec l'idée d'aider les utilisateurs à suivre leurs transactions financières.

Auteur

Abhishek Gurjar est un développeur Web dévoué et passionné par la création d'applications Web pratiques et fonctionnelles. Découvrez plus de ses projets sur GitHub.