Créer un convertisseur de devises en React : taux en direct et UX épurée

Introduction à la création d'un convertisseur de devises en React

Créer un convertisseur de devises en React peut être simple, surtout lorsque vous utilisez des API qui fournissent des taux de change en temps réel. Dans ce guide, nous allons explorer comment construire un convertisseur de devises robuste avec des taux en direct, des entrées débouncées et une interface utilisateur épurée en utilisant l'API CurrencyRest.

Pourquoi utiliser l'API CurrencyRest ?

CurrencyRest propose une API REST complète qui fournit des taux de change en temps réel et historiques pour plus de 190 devises fiat et 94 crypto-monnaies. Avec le niveau gratuit permettant 300 requêtes par mois, c'est parfait pour les développeurs cherchant à expérimenter sans frais.

Étape 1 : Configurer React

Tout d'abord, créez une nouvelle application React en utilisant Create React App:

npx create-react-app convertisseur-de-devises
cd convertisseur-de-devises

Étape 2 : Installer Axios

Pour gérer les requêtes API, nous recommandons d'utiliser Axios. Installez-le avec npm:

npm install axios

Étape 3 : Création du composant Convertisseur

Créez un composant Convertisseur.js. Il va gérer l'état et les appels API nécessaires pour convertir les devises.

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

const Convertisseur = () => {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState(1);
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchExchangeRate = async () => {
      setLoading(true);
      const response = await axios.get(`https://api.currencyrest.com/api/v1/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}`);
      setResult(response.data.result);
      setLoading(false);
    };
    fetchExchangeRate();
  }, [fromCurrency, toCurrency, amount]);

  return (
    <div>
      <h2>Convertisseur de devises</h2>
      <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} />
      <select value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        
        {/* Ajouter plus d'options ici */}
      </select>
      <span>à</span>
      <select value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
        
        {/* Ajouter plus d'options ici */}
      </select>
      {loading ? <p>Chargement...</p> : <p>Montant Converti : {result}</p>}
    </div>
  );
};

export default Convertisseur;

Étape 4 : Intégration des entrées débouncées

Pour améliorer l'expérience utilisateur, nous pouvons implémenter une fonction de debounce pour nos champs d'entrée, empêchant les appels API excessifs lorsque les utilisateurs tapent. Vous pouvez utiliser la méthode debounce de lodash pour cette fonction:

npm install lodash

Dans le Convertisseur.js, implémentez les entrées débouncées pour la sélection des devises et le champ de montant.

Étape 5 : Améliorer l'expérience utilisateur

Une UX propre est essentielle. Assurez-vous que votre composant est réactif et facile à naviguer. Utilisez CSS ou des frameworks comme Bootstrap pour styliser votre application.

Conclusion

Construire un convertisseur de devises en React est un projet passionnant qui peut vous aider à comprendre comment travailler efficacement avec les API. En utilisant l'API CurrencyRest, vous pouvez facilement accéder aux taux en direct et aux données historiques pour votre application.

Intéressé par la création d'autres applications ? Inscrivez-vous à CurrencyRest aujourd'hui et obtenez 300 requêtes/mois gratuitement !