Build a Simple React JS Interactive Web-Based Currency Converter: A Beginner’s Guide

Written by

javascriptdebugged

in

In today’s interconnected world, dealing with multiple currencies is a common occurrence. Whether you’re traveling, shopping online, or managing international finances, having a quick and reliable currency converter at your fingertips is incredibly useful. Wouldn’t it be great to build your own? This tutorial will guide you, step-by-step, through creating a simple yet functional currency converter using React JS. We’ll cover everything from setting up your development environment to fetching real-time exchange rates and displaying the converted amounts. This project is perfect for beginners to intermediate developers looking to enhance their React skills and build something practical.

Why Build a Currency Converter?

Building a currency converter offers several benefits:

  • Practical Application: It’s a tool you can use daily, making it a valuable addition to your personal or professional toolkit.
  • Learning Experience: It’s a great project for learning and practicing React concepts like state management, component composition, and API integration.
  • Portfolio Piece: It demonstrates your ability to build interactive web applications and fetch data from external sources, making it a great addition to your portfolio.
  • Customization: You can tailor it to your specific needs, adding features like historical exchange rates or support for more currencies.

Prerequisites

Before you begin, make sure you have the following:

  • Node.js and npm (or yarn): You’ll need Node.js and npm (Node Package Manager) or yarn installed on your system. These are essential for managing project dependencies and running React applications.
  • Basic Knowledge of HTML, CSS, and JavaScript: Familiarity with these web technologies will help you understand the code and concepts presented in this tutorial.
  • A Code Editor: Choose your favorite code editor (VS Code, Sublime Text, Atom, etc.) to write your code.

Setting Up Your React Project

Let’s get started by creating a new React project using Create React App. Open your terminal and run the following command:

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

This command will create a new React project named “currency-converter” and navigate you into the project directory. Now, start the development server:

npm start

This will open your React app in your web browser, typically at http://localhost:3000.

Project Structure

Your project directory will look something like this:


currency-converter/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

The core of our application will reside in the src directory. We’ll be primarily working with App.js to build our currency converter.

Building the Currency Converter Components

We’ll break down our currency converter into smaller, manageable components for better organization and reusability. Let’s start by creating the following components:

  • CurrencyInput: This component will handle the input field for entering the amount to convert and the selection of the currency.
  • Converter: This will be the main component that orchestrates the conversion process.

CurrencyInput Component

Create a new file named CurrencyInput.js inside the src directory. This component will accept props for the currency, the amount, a function to handle changes, and a list of available currencies.


// src/CurrencyInput.js
import React from 'react';

function CurrencyInput({
  currency, // The selected currency
  amount, // The amount to convert
  onAmountChange, // Function to handle amount changes
  currencies, // Array of available currencies
  onCurrencyChange, // Function to handle currency changes
}) {
  return (
    <div>
       onAmountChange(e.target.value)}
      />
       onCurrencyChange(e.target.value)}>
        {currencies.map((curr) => (
          
            {curr}
          
        ))}
      
    </div>
  );
}

export default CurrencyInput;

This component renders an input field for the amount and a select dropdown for the currency. It uses the provided props to control its behavior.

Converter Component

Now, let’s create the main Converter component. This component will manage the state of the amounts, the selected currencies, and fetch the exchange rates from an API.

Create a new file named Converter.js inside the src directory:


// src/Converter.js
import React, { useState, useEffect } from 'react';
import CurrencyInput from './CurrencyInput';

function Converter() {
  const [amount1, setAmount1] = useState(1);
  const [amount2, setAmount2] = useState(1);
  const [currency1, setCurrency1] = useState('USD');
  const [currency2, setCurrency2] = useState('EUR');
  const [rates, setRates] = useState({});
  const [currencies, setCurrencies] = useState([]);

  // Replace with your API key
  const API_KEY = 'YOUR_API_KEY';

  useEffect(() => {
    // Fetch currency rates from an API
    const fetchRates = async () => {
      try {
        const response = await fetch(
          `https://api.apilayer.com/fixer/latest?base=${currency1}&apikey=${API_KEY}`
        );
        if (!response.ok) {
          throw new Error('Failed to fetch exchange rates');
        }
        const data = await response.json();
        setRates(data.rates);
        const availableCurrencies = Object.keys(data.rates);
        setCurrencies([currency1, ...availableCurrencies]); // Include base currency
      } catch (error) {
        console.error('Error fetching exchange rates:', error);
      }
    };

    fetchRates();
  }, [currency1]);

  useEffect(() => {
    // Recalculate amount2 when currency1 or amount1 changes
    if (rates && rates[currency2]) {
      setAmount2((amount1 * rates[currency2]).toFixed(2));
    }
  }, [amount1, currency1, currency2, rates]);

  const handleAmount1Change = (value) => {
    setAmount1(value);
  };

  const handleCurrency1Change = (currency) => {
    setCurrency1(currency);
  };

  const handleCurrency2Change = (currency) => {
    setCurrency2(currency);
  };

  return (
    <div>
      <h1>Currency Converter</h1>
      
      <p>=</p>
       setAmount2(value)}
        currencies={currencies}
        onCurrencyChange={handleCurrency2Change}
      />
    </div>
  );
}

export default Converter;

In this component:

  • We use the useState hook to manage the state of the amounts, currencies, and exchange rates.
  • The useEffect hook is used to fetch the exchange rates from an API when the base currency (currency1) changes. Make sure to replace YOUR_API_KEY with your actual API key from a currency exchange rate provider (like apilayer.com/fixer).
  • We then calculate the converted amount (amount2) based on the exchange rates.
  • We render two CurrencyInput components, one for each currency, and pass the necessary props.

Integrating the Components in App.js

Now, let’s import the Converter component into our App.js file to render the currency converter:


// src/App.js
import React from 'react';
import Converter from './Converter';

function App() {
  return (
    <div>
      
    </div>
  );
}

export default App;

This imports the Converter component and renders it within the main App component.

Styling Your Currency Converter

To make the currency converter visually appealing, let’s add some basic styling. Open src/App.css and add the following CSS:


.App {
  text-align: center;
  padding: 20px;
  font-family: sans-serif;
}

h1 {
  margin-bottom: 20px;
}

input, select {
  padding: 8px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

p {
  font-size: 20px;
  margin: 10px;
}

This CSS provides basic styling for the layout, headings, input fields, and select dropdowns.

Testing Your Currency Converter

With everything in place, it’s time to test your currency converter. Open your React application in your browser (usually at http://localhost:3000). You should see the currency converter interface with two input fields and currency selection dropdowns. Try entering an amount and selecting different currencies to see the conversion in action.

Handling Common Mistakes and Debugging

During the development process, you might encounter some common issues. Here are some tips for troubleshooting:

  • API Key Errors: Double-check that you’ve correctly entered your API key from the currency exchange rate provider (e.g., apilayer.com/fixer) in the Converter.js file. If the API key is invalid, you won’t be able to fetch the exchange rates.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking the request to the API. This is a security measure. You might need to configure CORS settings on your API provider or use a proxy server during development.
  • Incorrect Currency Codes: Ensure that you’re using the correct currency codes (e.g., USD, EUR, JPY). Check the API documentation for a list of supported currencies.
  • Rate Display Issues: If the rates are not displaying correctly, inspect the network requests in your browser’s developer tools to see if the API is returning the expected data. Check the console for any error messages.
  • State Management: Make sure you are correctly updating the state variables with setAmount1, setAmount2, setCurrency1, setCurrency2. Incorrect state updates can lead to unexpected behavior.

Enhancements and Further Development

Once you’ve built a basic currency converter, you can extend its functionality with the following enhancements:

  • Add More Currencies: Expand the list of available currencies by fetching more data from the API.
  • Implement Historical Rates: Display historical exchange rates for a specific date range.
  • Add Error Handling: Implement error handling to display user-friendly messages if the API request fails.
  • Improve UI/UX: Enhance the user interface with better styling, input validation, and a more intuitive layout. Consider using a UI library like Material UI or Bootstrap for faster development.
  • Implement a Swap Button: Add a button to quickly swap the currencies.
  • Save User Preferences: Allow users to save their preferred currencies.

Key Takeaways

This tutorial has shown you how to build a basic currency converter using React JS. You’ve learned how to:

  • Set up a React project using Create React App.
  • Create reusable components.
  • Manage state using the useState hook.
  • Fetch data from an API using the useEffect hook.
  • Handle user input and update the UI accordingly.

FAQ

Here are some frequently asked questions about building a currency converter:

  1. Where can I find a free currency exchange rate API?

    There are several free APIs available, such as Fixer.io (apilayer.com/fixer), which offers a free plan with a limited number of requests.

  2. How can I handle API rate limits?

    Most free APIs have rate limits. You can handle this by implementing error handling in your application and displaying a message to the user if the rate limit is exceeded. You might also consider caching the exchange rates to reduce the number of API requests.

  3. How can I deploy my React currency converter?

    You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide easy deployment options for static websites.

  4. Can I use a different API for fetching exchange rates?

    Yes, you can use any API that provides currency exchange rates. You’ll need to adjust the API endpoint and data parsing logic in your code accordingly.

  5. How can I improve the performance of my currency converter?

    To improve performance, consider caching the exchange rates, optimizing the API requests, and using techniques like code splitting to reduce the initial load time of your application.

By following this tutorial, you’ve taken your first step in building a practical and useful application with React. Remember that this is just a starting point. Experiment with different features, explore more advanced concepts, and continue learning to improve your skills. Embrace the challenges, celebrate the successes, and always keep coding. The world of web development is constantly evolving, and every project you undertake is a chance to learn, grow, and create something truly unique.

More posts