Créer un Convertisseur de Devises en React

Créer un Convertisseur de Devises en React : Taux en Direct, Entrées Débouncées et UX Propre

Créer une application de convertisseur de devises en React est non seulement un projet pratique, mais aussi une excellente occasion d'améliorer vos compétences en développement. En utilisant des taux de change en direct d'une API comme CurrencyRest, vous pouvez permettre aux utilisateurs de convertir des devises en temps réel. Dans cet article, nous verrons comment construire un convertisseur de devises avec des entrées débouncées et une expérience utilisateur fluide.

Pourquoi Utiliser CurrencyRest ?

CurrencyRest propose des taux de change en temps réel et historiques couvrant plus de 180 devises fiat et environ 100 cryptomonnaies. En intégrant cette API, vous pouvez :

• Obtenir des taux de change en direct des banques centrales et des échanges.
• Recevoir des données fiables de sources comme la BCE, la Fed et Binance.
• Accéder à un plan gratuit généreux permettant 300 requêtes par mois.

Configurer Votre Application React

Tout d'abord, configurez votre environnement React en utilisant Create React App :

npx create-react-app currency-converter
cd currency-converter
npm start

Installer Axios

Nous utiliserons Axios pour gérer les requêtes API. Installez-le en utilisant npm :

npm install axios

Construire le Composant Convertisseur

Créer le composant principal du convertisseur de devises implique de gérer les entrées et d'afficher les résultats. Voici une structure simple pour ce composant :

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const CurrencyConverter = () => {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState(1);
  const [exchangeRate, setExchangeRate] = useState(0);
  const [result, setResult] = useState(0);

  useEffect(() => {
    const fetchExchangeRate = async () => {
      try {
        const response = await axios.get(`https://api.currencyrest.com/api/v1/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}`);
        setExchangeRate(response.data.result);
        setResult(exchangeRate * amount);
      } catch (error) {
        console.error('Erreur lors de la récupération du taux de change', error);
      }
    };
    fetchExchangeRate();
  }, [fromCurrency, toCurrency, amount]);

  return (
    <div>
      <h1>Convertisseur de Devises</h1>
      <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} />
      <select onChange={(e) => setFromCurrency(e.target.value)}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="XOF">XOF</option>
        {/* Ajoutez d'autres devises */}
      </select>
      <span>à</span>
      <select onChange={(e) => setToCurrency(e.target.value)}>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
        <option value="XOF">XOF</option>
        {/* Ajoutez d'autres devises */}
      </select>
      <h2>Montant Converti : {result}</h2>
    </div>
  );
};

export default CurrencyConverter;

Débouncage des Entrées Utilisateur

Pour améliorer l'expérience utilisateur, implémentez un débouncage sur les champs d'entrée afin de réduire le nombre de requêtes API. Vous pouvez utiliser un hook useDebounce personnalisé à cet effet. Voici un exemple :

import { useState, useEffect } from 'react';

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
};

Maintenant, vous pouvez remplacer les appels pour changer amount, fromCurrency et toCurrency par leurs versions débouncées dans votre composant principal.

Conclusion

Dans ce tutoriel, vous avez appris comment construire une simple mais efficace application de convertisseur de devises en React. Avec l'intégration de l'API CurrencyRest, vous pouvez fournir des taux de change précis et en temps réel à vos utilisateurs.

N'oubliez pas de vous inscrire sur CurrencyRest pour accéder à 300 requêtes gratuites par mois et commencer à construire vos propres projets avec des données du monde réel!