Wie man einen Währungsrechner mit React und einer Echtzeit-Wechselkurs-API erstellt

Einen Währungsrechner mit React zu erstellen ist ein hervorragendes Projekt für Entwickler, die API-Integration, React-Hooks und State-Management in realen Anwendungen üben möchten. In diesem Schritt-für-Schritt-Tutorial erstellst du einen vollständig funktionalen Echtzeit-Währungsrechner, der aktuelle Wechselkurse von einer Currency-API abruft, mehr als 170 Währungen unterstützt und Fehler elegant behandelt — alles mit modernen React-Patterns.

Falls du neu in diesem Thema bist, schau dir unsere Erklärung zu Wechselkursen an, bevor du beginnst.

Was du erstellen wirst

Am Ende dieses Tutorials wirst du einen React-Währungsrechner haben, der:

• Echtzeit-Wechselkurse von der Finexly API abruft
• Mehr als 170 Währungen über ein Dropdown-Menü unterstützt
• Beträge in Echtzeit konvertiert, während der Benutzer tippt (mit Debouncing)
• Ladezustände und API-Fehler elegant behandelt
• Den Kurs und den Zeitstempel der letzten Aktualisierung anzeigt

Projektstruktur:

currency-converter/
├── src/
│   ├── components/
│   │   └── CurrencyConverter.tsx
│   ├── hooks/
│   │   └── useExchangeRate.ts
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── vite.config.ts

Voraussetzungen

Bevor du beginnst, stelle sicher, dass du Folgendes hast:

• Node.js 18+ installiert
• Grundlegende Kenntnisse der React-Hooks (useState, useEffect)
• Einen kostenlosen Finexly API-Schlüssel (dauert etwa 30 Sekunden)

Schritt 1: React-Projekt einrichten

Wir verwenden Vite als Build-Tool:

npm create vite@latest currency-converter -- --template react-ts
cd currency-converter
npm install
npm run dev

Dein Entwicklungsserver startet unter http://localhost:5173.

Schritt 2: Die Finexly API verstehen

Die Finexly API bietet Echtzeit- und historische Wechselkurse für mehr als 170 Währungen über eine einfache REST-Schnittstelle:

GET https://finexly.com/api/v1/latest?base=USD

Eine typische Antwort sieht so aus:

{
  "base": "USD",
  "date": "2026-04-07",
  "rates": {
    "EUR": 0.9182,
    "GBP": 0.7871,
    "JPY": 151.42
  },
  "timestamp": 1744012800
}

Füge deinen Schlüssel im Request-Header ein:

Authorization: Bearer DEIN_API_SCHLÜSSEL

Du kannst dich für einen kostenlosen Plan registrieren, der 1.000 Anfragen pro Monat beinhaltet.

Schritt 3: Den Custom Hook erstellen

Erstelle die Datei src/hooks/useExchangeRate.ts:

import { useState, useEffect, useCallback } from "react";

interface ExchangeRateResult {
  rates: Record<string, number> | null;
  loading: boolean;
  error: string | null;
  lastUpdated: Date | null;
}

const API_KEY = import.meta.env.VITE_FINEXLY_API_KEY;
const BASE_URL = "https://finexly.com/api/v1";

const rateCache: Record<string, { rates: Record<string, number>; timestamp: number }> = {};
const CACHE_TTL_MS = 5 * 60 * 1000;

export function useExchangeRate(baseCurrency: string): ExchangeRateResult {
  const [rates, setRates] = useState<Record<string, number> | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);

  const fetchRates = useCallback(async (base: string) => {
    const cached = rateCache[base];
    if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
      setRates(cached.rates);
      setLastUpdated(new Date(cached.timestamp));
      return;
    }

    setLoading(true);
    setError(null);

    try {
      const res = await fetch(`${BASE_URL}/latest?base=${base}`, {
        headers: { Authorization: `Bearer ${API_KEY}` },
      });

      if (!res.ok) throw new Error(`API-Fehler: ${res.status} ${res.statusText}`);

      const data = await res.json();
      rateCache[base] = { rates: data.rates, timestamp: Date.now() };
      setRates(data.rates);
      setLastUpdated(new Date());
    } catch (err) {
      setError(err instanceof Error ? err.message : "Wechselkurse konnten nicht abgerufen werden");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (baseCurrency) fetchRates(baseCurrency);
  }, [baseCurrency, fetchRates]);

  return { rates, loading, error, lastUpdated };
}

Schritt 4: Die CurrencyConverter-Komponente erstellen

Erstelle src/components/CurrencyConverter.tsx:

import { useState, useMemo } from "react";
import { useExchangeRate } from "../hooks/useExchangeRate";

const CURRENCIES = [
  "USD", "EUR", "GBP", "JPY", "CAD", "AUD", "CHF", "CNY",
  "INR", "MXN", "BRL", "KRW", "SGD", "HKD", "NOK", "SEK",
];

export default function CurrencyConverter() {
  const [amount, setAmount] = useState<string>("100");
  const [baseCurrency, setBaseCurrency] = useState<string>("USD");
  const [targetCurrency, setTargetCurrency] = useState<string>("EUR");

  const { rates, loading, error, lastUpdated } = useExchangeRate(baseCurrency);

  const convertedAmount = useMemo(() => {
    if (!rates || !amount) return null;
    const numAmount = parseFloat(amount);
    if (isNaN(numAmount) || numAmount < 0) return null;
    const rate = rates[targetCurrency];
    return rate ? (numAmount * rate).toFixed(2) : null;
  }, [rates, amount, targetCurrency]);

  const handleSwap = () => {
    setBaseCurrency(targetCurrency);
    setTargetCurrency(baseCurrency);
  };

  return (
    <div className="converter-card">
      <h2>Echtzeit-Währungsrechner</h2>

      <div className="input-row">
        <label htmlFor="amount">Betrag</label>
        <input
          id="amount"
          type="number"
          min="0"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          placeholder="Betrag eingeben"
        />
      </div>

      <div className="currency-row">
        <div className="select-group">
          <label htmlFor="base">Von</label>
          <select id="base" value={baseCurrency} onChange={(e) => setBaseCurrency(e.target.value)}>
            {CURRENCIES.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>

        <button className="swap-btn" onClick={handleSwap} aria-label="Währungen tauschen">⇄</button>

        <div className="select-group">
          <label htmlFor="target">Nach</label>
          <select id="target" value={targetCurrency} onChange={(e) => setTargetCurrency(e.target.value)}>
            {CURRENCIES.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
      </div>

      <div className="result-area">
        {loading && <p>Aktuelle Kurse werden abgerufen...</p>}
        {error && <p className="error-text">⚠ {error}</p>}
        {!loading && !error && convertedAmount !== null && (
          <>
            <p className="converted-value">
              {parseFloat(amount).toLocaleString()} {baseCurrency} =&nbsp;
              <strong>{parseFloat(convertedAmount).toLocaleString()} {targetCurrency}</strong>
            </p>
            {lastUpdated && <p>Kurse aktualisiert: {lastUpdated.toLocaleTimeString()}</p>}
          </>
        )}
      </div>
    </div>
  );
}

Schritt 5: Umgebungsvariablen

Erstelle eine .env-Datei im Projektstamm:

VITE_FINEXLY_API_KEY=dein_api_schlüssel_hier

Füge .env zu deiner .gitignore hinzu.

Schritt 6: Die App verbinden

Aktualisiere src/App.tsx:

import CurrencyConverter from "./components/CurrencyConverter";

function App() {
  return (
    <main>
      <CurrencyConverter />
      <footer>
        <p>Wechselkurse bereitgestellt von <a href="https://finexly.com">Finexly</a></p>
      </footer>
    </main>
  );
}

export default App;

Leistungsoptimierung mit Debouncing

// src/hooks/useDebounce.ts
import { useState, useEffect } from "react";

export function useDebounce<T>(value: T, delayMs: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delayMs);
    return () => clearTimeout(timer);
  }, [value, delayMs]);

  return debouncedValue;
}

Weiterführende Möglichkeiten

Hochwertige Erweiterungen umfassen: ein historisches Kursdiagramm über die Finexly historische API, gleichzeitige Mehrwährungskonvertierung, bevorzugte Währungspaare in localStorage und Server-Side Rendering mit Next.js.

Häufig gestellte Fragen

Welche Wechselkurs-API eignet sich am besten für React? Für React-Anwendungen benötigst du eine REST-API mit CORS-Unterstützung. Die Finexly API unterstützt CORS auf allen Plänen und bietet Abdeckung für mehr als 170 Währungen mit einem kostenlosen Kontingent.

Wie oft werden die Wechselkurse aktualisiert? Die Finexly API aktualisiert die Kurse alle 60 Sekunden für Echtzeit-Pläne und einmal täglich für Standardpläne.

Kann ich eine Währungs-API in einer clientseitigen React-App verwenden? Ja, wenn die API CORS unterstützt. Für Produktionsanwendungen empfiehlt es sich, Anfragen über dein eigenes Backend zu leiten.

Wie vermeide ich es, meinen API-Schlüssel in React preiszugeben? Für die Entwicklung verwende die .env-Datei von Vite mit dem Präfix VITE_. Für die Produktion leite Anfragen über einen Next.js API-Route oder eine serverlose Funktion.

Wie konvertiere ich zwischen zwei Nicht-USD-Währungen? Die Finexly API unterstützt jede Basiswährung auf allen Plänen, was dies erheblich vereinfacht.

Bereit, Echtzeit-Wechselkurse zu deiner React-App hinzuzufügen? Hol dir deinen kostenlosen Finexly API-Schlüssel — keine Kreditkarte erforderlich. Starte mit 1.000 kostenlosen Anfragen pro Monat und skaliere nach Bedarf.