Build a Simple React Currency Converter App: A Beginner’s Guide

Written by

FixTechToday

in

In today’s interconnected world, understanding and converting currencies is more important than ever. Whether you’re planning a trip abroad, managing international finances, or simply curious about exchange rates, a currency converter is an invaluable tool. But have you ever considered building your own? In this comprehensive guide, we’ll walk you through creating a simple yet functional currency converter app using ReactJS. This project is perfect for beginners, offering a practical way to learn core React concepts while building something useful.

Why Build a Currency Converter App?

Building a currency converter app offers several advantages:

  • Practical Application: You’ll create a real-world tool that you can use daily.
  • Learning React Fundamentals: You’ll gain hands-on experience with state management, component composition, handling user input, and making API calls.
  • Portfolio Enhancement: A completed project like this is a great addition to your portfolio, showcasing your skills to potential employers or clients.
  • Customization: You can tailor the app to your specific needs, adding features like historical exchange rates or favorite currency lists.

This project is designed to be accessible, breaking down complex concepts into manageable steps. We’ll cover everything from setting up your development environment to deploying your finished app.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server. You can download Node.js from nodejs.org.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is crucial for understanding the code.
  • A code editor: Choose your favorite code editor, such as Visual Studio Code, Sublime Text, or Atom.

Step-by-Step Guide

1. Setting Up the React Project

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

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

This command creates a new directory called `currency-converter-app`, initializes a React project inside it, and navigates into that directory. Now, start the development server:

npm start

This will open your app in your default web browser at `http://localhost:3000/`. You should see the default React app’s welcome screen.

2. Project Structure and File Setup

Let’s organize our project. We’ll keep it simple for now, focusing on the core functionality. We’ll modify the `src` folder structure:

  • `src/`
    • `components/` (Create this folder)
      • `CurrencyConverter.js` (We’ll create this component)
    • `App.js` (Modify this file)
    • `index.js`
    • `App.css` (Modify this file)
  • `public/`
  • `package.json`

This structure organizes components in a dedicated folder, making the project more manageable as it grows. Let’s clear out the default content in `App.js` and `App.css` to prepare for our components.

3. Building the CurrencyConverter Component

This is the heart of our application. Create a file named `CurrencyConverter.js` inside the `components` folder. This component will handle:

  • Two input fields for amount and currency selection.
  • Two dropdowns for selecting the source and target currencies.
  • A button to trigger the conversion.
  • Displaying the converted amount.

Here’s the basic structure of `CurrencyConverter.js`:

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

function CurrencyConverter() {
  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [convertedAmount, setConvertedAmount] = useState(null);
  const [currencyOptions, setCurrencyOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch currency options from an API (e.g., exchangerate-api.com)
    const fetchCurrencies = async () => {
      setIsLoading(true);
      try {
        const response = await fetch('https://api.exchangerate-api.com/v4/currencies');
        if (!response.ok) {
          throw new Error('Failed to fetch currencies');
        }
        const data = await response.json();
        // Convert the object of currencies to an array of currency codes
        const currencyCodes = Object.keys(data);
        setCurrencyOptions(currencyCodes);
      } catch (error) {
        setError(error.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchCurrencies();
  }, []);

  const handleAmountChange = (e) => {
    setAmount(e.target.value);
  };

  const handleFromCurrencyChange = (e) => {
    setFromCurrency(e.target.value);
  };

  const handleToCurrencyChange = (e) => {
    setToCurrency(e.target.value);
  };

  const handleConvert = async () => {
    setIsLoading(true);
    setError(null);
    try {
      const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key
      const response = await fetch(
        `https://api.exchangerate-api.com/v4/latest/${fromCurrency}?apikey=${apiKey}`
      );
      if (!response.ok) {
        throw new Error('Failed to fetch exchange rate');
      }
      const data = await response.json();
      const rate = data.rates[toCurrency];
      if (!rate) {
        throw new Error('Exchange rate not found');
      }
      const result = amount * rate;
      setConvertedAmount(result.toFixed(2));
    } catch (error) {
      setError(error.message);
    } finally {
      setIsLoading(false);
    }
  };

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <div className="currency-converter">
      <div className="input-group">
        <label htmlFor="amount">Amount:</label>
        <input
          type="number"
          id="amount"
          value={amount}
          onChange={handleAmountChange}
        />
      </div>

      <div className="input-group">
        <label htmlFor="fromCurrency">From:</label>
        <select
          id="fromCurrency"
          value={fromCurrency}
          onChange={handleFromCurrencyChange}
        >
          {currencyOptions.map((currency) => (
            <option key={currency} value={currency}>
              {currency}
            </option>
          ))}
        </select>
      </div>

      <div className="input-group">
        <label htmlFor="toCurrency">To:</label>
        <select
          id="toCurrency"
          value={toCurrency}
          onChange={handleToCurrencyChange}
        >
          {currencyOptions.map((currency) => (
            <option key={currency} value={currency}>
              {currency}
            </option>
          ))}
        </select>
      </div>

      <button onClick={handleConvert}>Convert</button>

      {convertedAmount !== null && (
        <div className="result">
          {amount} {fromCurrency} = {convertedAmount} {toCurrency}
        </div>
      )}
    </div>
  );
}

export default CurrencyConverter;

Let’s break down this code:

  • State Variables: We use the `useState` hook to manage the following states:
    • `amount`: The amount to convert.
    • `fromCurrency`: The source currency.
    • `toCurrency`: The target currency.
    • `convertedAmount`: The converted amount.
    • `currencyOptions`: An array of available currency codes.
    • `isLoading`: A boolean to indicate whether data is being fetched.
    • `error`: A string to store any error messages.
  • useEffect Hook: This hook fetches the list of available currencies when the component mounts. We use the exchangerate-api.com/v4/currencies endpoint to get a list of supported currencies. Make sure to handle potential errors during the API call.
  • Event Handlers: `handleAmountChange`, `handleFromCurrencyChange`, and `handleToCurrencyChange` update the corresponding state variables when the user interacts with the input fields and dropdowns.
  • handleConvert Function: This function is triggered when the user clicks the “Convert” button. It fetches the exchange rate from a currency exchange API (in this example, we use a placeholder: `https://api.exchangerate-api.com/v4/latest/${fromCurrency}?apikey=${apiKey}`). It then calculates the converted amount and updates the `convertedAmount` state. It also handles loading states and errors. Important: You’ll need to replace `’YOUR_API_KEY’` with your actual API key from the chosen currency exchange API.
  • JSX Structure: The component renders the input fields, dropdowns, the convert button, and displays the result. It uses conditional rendering to show the converted amount only when available and to display loading or error messages.

4. Integrating the CurrencyConverter Component in App.js

Now, let’s import and use the `CurrencyConverter` component in `App.js`. Replace the existing content of `App.js` with the following:

import React from 'react';
import CurrencyConverter from './components/CurrencyConverter';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Currency Converter</h1>
      </header>
      <CurrencyConverter />
    </div>
  );
}

export default App;

This code imports the `CurrencyConverter` component and renders it within a basic layout.

5. Styling the App (App.css)

To make the app visually appealing, add some basic styles to `App.css`. Here’s a sample stylesheet. Feel free to customize it to your liking:

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

.App-header {
  background-color: #282c34;
  color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.currency-converter {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  margin: 0 auto;
}

.input-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.input-group label {
  margin-bottom: 5px;
  text-align: left;
}

.input-group input, .input-group select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3e8e41;
}

.result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 600px) {
  .currency-converter {
    width: 90%;
  }
}

This CSS provides basic styling for the layout, input fields, and button. It also includes a media query for responsiveness on smaller screens.

6. Testing and Debugging

After completing the code, thoroughly test your app. Try different currency combinations and amounts to ensure the conversions are accurate. Use your browser’s developer tools (usually accessed by right-clicking and selecting “Inspect” or “Inspect Element”) to check for any errors in the console. Common issues include:

  • API Key Errors: Ensure your API key is correct and valid. Check the API provider’s documentation for any usage limits or restrictions.
  • CORS Errors: If you encounter “CORS” (Cross-Origin Resource Sharing) errors, it means the API you’re using doesn’t allow requests from your domain. You may need to configure CORS settings on your server or use a proxy server.
  • Network Errors: Double-check your internet connection and ensure the API endpoint is reachable.
  • Data Parsing Errors: Make sure you are correctly parsing the JSON response from the API. Inspect the response in your browser’s developer tools to verify its structure.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building React apps, and how to avoid them:

  • Incorrect State Updates: Always use the `setState` function (or the `set…` function from the `useState` hook) to update state variables. Directly modifying state variables can lead to unexpected behavior and won’t trigger re-renders.
  • Forgetting to Import Components: Make sure you import all the components you use in your app. A missing import will cause a “Component is not defined” error.
  • Incorrect Event Handling: Ensure you’re passing the correct event handler functions to the appropriate event listeners (e.g., `onChange`, `onClick`). Make sure the event handlers are correctly bound to the component.
  • Ignoring Error Handling: Always include error handling in your code, especially when making API calls. Use `try…catch` blocks to catch potential errors and display informative error messages to the user.
  • Not Handling Loading States: Provide visual feedback to the user while data is being fetched. This can be done by displaying a loading indicator or disabling interactive elements.
  • Incorrect API Key Usage: Never hardcode your API keys directly in your client-side code, as this can expose them to the public. Consider using environment variables or a backend proxy to protect your API keys.

Enhancements and Next Steps

Once you’ve built the basic currency converter, consider adding these enhancements:

  • Historical Exchange Rates: Display historical exchange rates for a specific period.
  • Currency Symbols: Display currency symbols alongside the currency codes (e.g., USD $).
  • Favorite Currencies: Allow users to save their favorite currencies for quick access.
  • Offline Support: Implement offline support using service workers or local storage to store exchange rates.
  • More Robust Error Handling: Implement more user-friendly error messages and handle edge cases more gracefully.
  • Dark/Light Mode: Add a theme switcher for dark and light mode.

These enhancements will not only improve the functionality of your app but also provide further learning opportunities.

Key Takeaways

  • Building a currency converter is an excellent way to learn React fundamentals.
  • State management is crucial for handling user input and displaying dynamic data.
  • API calls are essential for fetching data from external sources.
  • Component composition allows you to build reusable and maintainable UI elements.
  • Error handling and loading states improve the user experience.

Frequently Asked Questions (FAQ)

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

    There are several free APIs available. Some popular choices include exchangerate-api.com, and others. Be sure to review the API’s terms of service and usage limits.

  2. How do I handle CORS errors?

    CORS errors occur when your browser blocks requests to an API from a different domain. You can often resolve this by using a proxy server or configuring CORS headers on the API server. Check the API provider’s documentation for guidance.

  3. How can I protect my API key?

    Never hardcode your API key in your client-side code. Use environment variables or a backend proxy to securely store and access your API key.

  4. How do I deploy my React app?

    You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide easy-to-use deployment tools and free hosting options.

  5. What are some good resources for learning React?

    The official React documentation is an excellent starting point. Other helpful resources include online courses on platforms like Udemy, Coursera, and freeCodeCamp.

This project serves as a solid foundation for understanding React and building practical web applications. By following this guide, you’ve not only created a functional currency converter but also gained valuable experience with key React concepts. Remember that the best way to learn is by doing. Experiment with the code, try adding new features, and don’t be afraid to make mistakes. The journey of learning React is filled with exciting discoveries, and each project you undertake will bring you closer to mastering this powerful library. Keep building, keep learning, and your skills will continue to grow.

More posts