React, ön uç uygulamaları oluşturmamızı sağlayan, kullanımı kolay bir JavaScript çerçevesidir.

Bu makalede, React ve JavaScript ile bir bütçe takip uygulamasının nasıl oluşturulacağına bakacağız.

Projeyi Oluşturun

React projesini Create React App ile oluşturabiliriz.

Yüklemek için şunu çalıştırıyoruz:

npx create-react-app budget-tracker

uuidBütçe öğelerimiz için kolayca benzersiz kimlikler oluşturmamıza izin vermemiz gerekiyor .

Eklemek için şunu çalıştırıyoruz:

npm i uuidv4

Market listesi uygulamasını oluşturmak için şunu yazıyoruz:

import { useMemo, useState } from "react";
import { v4 as uuidv4 } from "uuid";
export default function App() {
  const [budget, setBudget] = useState("");
  const [expense, setExpense] = useState({});
  const [expenses, setExpenses] = useState([]);
  const add = (e) => {
    e.preventDefault();
    const { cost, description } = expense;
    const formValid = +budget > 0 && +cost > 0 && description;
    if (!formValid) {
      return;
    }
    setExpenses((ex) => [
      ...ex,
      {
        id: uuidv4(),
        ...expense
      }
    ]);
  };
  const remove = (index) => {
    setExpenses((expenses) => expenses.filter((_, i) => i !== index));
  };
  const remainingBudget = useMemo(() => {
    const totalExpenses = expenses
      .map(({ cost }) => +cost)
      .reduce((a, b) => +a + +b, 0);
    return budget - totalExpenses;
  }, [budget, expenses]);
  return (
    <div className="App">
      <div>
        <form>
          <fieldset>
            <label>budget</label>
            <input value={budget} onChange={(e) => setBudget(e.target.value)} />
          </fieldset>
        </form>
        <form onSubmit={add}>
          <h1>add expensse</h1>
          <fieldset>
            <label>description</label>
            <input
              value={expense.description}
              onChange={(e) =>
                setExpense((ex) => ({ ...ex, description: e.target.value }))
              }
            />
          </fieldset>
          <fieldset>
            <label>cost</label>
            <input
              value={expense.cost}
              onChange={(e) =>
                setExpense((ex) => ({ ...ex, cost: e.target.value }))
              }
            />
          </fieldset>
          <button type="submit">add expense</button>
        </form>
        <p>remaining budget: ${remainingBudget}</p>
        {expenses.map((ex, index) => {
          return (
            <div key={ex.id}>
              {ex.description} - ${ex.cost}
              <button onClick={() => remove(index)}>remove</button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

budget bütçe numarasına sahiptir.

expense gider kalemine sahiptir.

expenses gider kalemlerine sahiptir.

Ardından, addbir gider kalemi eklememize izin veren yöntemi ekleyin.

İçinde, e.preventDefault()müşteri tarafına başvurmamıza izin vermek için çağırıyoruz .

Ardından expenseözelliklerin formValiddeğişken ile geçerli olup olmadığını kontrol ederiz .

Eğer öyleyse true, ona eklenen yeni öğeyle setExpensesbir expensesdizi döndürmek için bir geri arama ile çağırırız .

In removeyöntemle, biz diyoruz setExpensesdöndüren bir geri arama ile expensesverilen ile maddenin olmadan diziyi index.

Ardından remainingBudgetoluşturduğumuz durumu ekliyoruz useMemo.

Geri aramada, costelde etmek için expensesdizideki tüm değerleri topluyoruz totalExpenses.

Sonra çıkarmak budgettarafından totalExpenses.

İzleyip budgetve expenses2 argüman dizisi ile belirtildiği gibi değişiklikler için.

Gelen returnaçıklamada, bize katılmasına izin bir form var budgetdeğeri.

2. formda expenseözellikler için değerler girebiliriz .

Özellikleri ayarlayabilmemiz için valueve onChangeprops'ı ayarlıyoruz.

Girdi ile bir özellik değeri ayarlamak için, dönüş nesnesinde mevcut değerleri yaymak için spread kullanırız, ardından setin e.target.valuesonuna değiştirmek istediğimiz özelliği ekleriz .

Bunun altında remainingBudgetdeğeri gösteriyoruz.

Ve bunun altında, expensesöğeleri div olarak görüntüleriz .

İçerideki düğme remove, indextıkladığımızda bir öğeyi kaldırmak için ile çağırır .

Sonuç

React ve JavaScript ile basit bir bütçe uygulaması oluşturabiliriz.

Plainenglish.io adresinde daha fazla içerik