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

Written by

learnmodernjavascript

in

In today’s interconnected world, dealing with different currencies is a common occurrence. Whether you’re planning a trip abroad, managing international finances, or simply curious about exchange rates, a currency converter is an invaluable tool. This tutorial will guide you through building a simple, yet functional, currency converter application using React. We’ll focus on clarity, step-by-step instructions, and practical examples to help you understand the core concepts of React while creating something useful.

Why Build a Currency Converter?

Creating a currency converter in React offers several benefits:

  • Practical Application: You’ll learn how to fetch and display real-time data from an API, a crucial skill for many web applications.
  • Component-Based Architecture: You’ll gain hands-on experience in building reusable components, a fundamental aspect of React development.
  • State Management: You’ll understand how to manage and update application state, a key concept for dynamic user interfaces.
  • Beginner-Friendly: This project is designed to be accessible for developers with a basic understanding of HTML, CSS, and JavaScript.

By the end of this tutorial, you’ll have a fully functional currency converter, and a solid foundation in React fundamentals.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages will make the learning process smoother.
  • A code editor: (e.g., VS Code, Sublime Text, Atom) of your choice.

Step 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
cd currency-converter

This command creates a new React application named “currency-converter” and navigates you into the project directory.

Step 2: Project Structure and File Preparation

Our project will have a simple structure. Inside the `src` directory, we’ll focus on the following files:

  • App.js: This will be our main component, responsible for handling the overall structure and logic of the currency converter.
  • App.css: This is where we’ll add our styles to make the application visually appealing.

Let’s clean up the default files. Open `src/App.js` and replace the content with the following basic structure:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  return (
    <div>
      {/* Your content will go here */}
    </div>
  );
}

export default App;

Next, open `src/App.css` and add some basic styling to center the content:

.App {
  text-align: center;
  padding: 20px;
}

Step 3: Fetching Currency Data from an API

To get real-time exchange rates, we’ll use a free currency API. There are many options available; for this tutorial, we’ll use a free API for simplicity. We’ll use the following API (note: ensure this API is still active at the time of usage, or find a suitable alternative and adjust the code accordingly): https://v6.exchangerate-api.com/v6/YOUR_API_KEY/latest/USD. You will need to sign up for a free API key.

Modify the `App.js` to fetch data from the API. We’ll use the `useState` and `useEffect` hooks for state management and side effects, respectively.

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [currencies, setCurrencies] = useState({});
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState(1);
  const [convertedAmount, setConvertedAmount] = useState(null);
  const [apiKey] = useState('YOUR_API_KEY'); // Replace with your actual API key

  useEffect(() => {
    async function fetchCurrencies() {
      try {
        const response = await fetch(`https://v6.exchangerate-api.com/v6/${apiKey}/latest/USD`);
        const data = await response.json();
        if (data.result === 'success') {
          setCurrencies(data.conversion_rates);
          convertCurrency(); // Initial conversion
        } else {
          console.error('API Error:', data.error_type);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchCurrencies();
  }, [apiKey]); // Dependency array to fetch data only once on component mount

  const convertCurrency = () => {
    if (currencies[fromCurrency] && currencies[toCurrency]) {
      const rate = currencies[toCurrency] / currencies[fromCurrency];
      setConvertedAmount((amount * rate).toFixed(2));
    }
  };

  useEffect(() => {
    convertCurrency();
  }, [amount, fromCurrency, toCurrency, currencies]);

  return (
    <div>
      {/* Your content will go here */}
    </div>
  );
}

export default App;

Key improvements in this code:

  • Error Handling: Includes a `try…catch` block to handle potential errors during the API call.
  • API Key: Uses `useState` to store the API key, making it easy to replace with your own. (Important: In a real-world application, you should never hardcode your API key directly in your client-side code. Consider using environment variables or a backend proxy to protect your key.)
  • Initial Conversion: Calls `convertCurrency()` after fetching the data to display an initial conversion.
  • Currency Conversion Logic: The `convertCurrency()` function now correctly calculates the conversion rate based on the selected currencies.
  • Dependency Array: The `useEffect` hook now includes dependencies for `amount`, `fromCurrency`, `toCurrency`, and `currencies`, ensuring that the conversion is updated whenever these values change.
  • Rate Calculation: Corrected the rate calculation to ensure accurate conversions.
  • Data Validation: Added checks to ensure that the required currency rates are available before performing the conversion.

Step 4: Creating the User Interface (UI)

Now, let’s build the UI for our currency converter. We’ll add input fields for the amount and select dropdowns for selecting currencies. We’ll also display the converted amount.

Modify the `App.js` file with the following code within the `return` statement:


      <h1>Currency Converter</h1>
      <div className="converter-container">
        <div className="input-group">
          <label htmlFor="amount">Amount:</label>
          <input
            type="number"
            id="amount"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
          />
        </div>

        <div className="select-group">
          <label htmlFor="fromCurrency">From:</label>
          <select
            id="fromCurrency"
            value={fromCurrency}
            onChange={(e) => setFromCurrency(e.target.value)}
          >
            {Object.keys(currencies).map((currency) => (
              <option key={currency} value={currency}>{currency}</option>
            ))}
          </select>
        </div>

        <div className="select-group">
          <label htmlFor="toCurrency">To:</label>
          <select
            id="toCurrency"
            value={toCurrency}
            onChange={(e) => setToCurrency(e.target.value)}
          >
            {Object.keys(currencies).map((currency) => (
              <option key={currency} value={currency}>{currency}</option>
            ))}
          </select>
        </div>

        <div className="result">
          <p>{amount} {fromCurrency} = {convertedAmount} {toCurrency}</p>
        </div>
      </div>

This code adds the following UI elements:

  • Heading: A heading to indicate what the app is.
  • Input Field: An input field for the user to enter the amount they want to convert. The `onChange` event updates the `amount` state.
  • From Currency Select: A dropdown menu for selecting the currency to convert from. The `onChange` event updates the `fromCurrency` state.
  • To Currency Select: A dropdown menu for selecting the currency to convert to. The `onChange` event updates the `toCurrency` state.
  • Result Display: A paragraph displaying the converted amount.

Update the `App.css` file with the following styles to improve the layout and appearance of the converter:


.converter-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.input-group, .select-group {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 200px;
}

.input-group label, .select-group label {
  margin-bottom: 5px;
  font-weight: bold;
}

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

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

Step 5: Handling User Input and Updating State

The UI is now set up, but we need to connect the input fields and select dropdowns to the React state. We’ve already started this in the previous steps, but let’s go over it in detail:

  • Amount Input: The `onChange` event of the input field updates the `amount` state using `setAmount(e.target.value)`. This ensures that the value entered by the user is stored in the component’s state.
  • From Currency Select: The `onChange` event of the `fromCurrency` select dropdown updates the `fromCurrency` state using `setFromCurrency(e.target.value)`.
  • To Currency Select: The `onChange` event of the `toCurrency` select dropdown updates the `toCurrency` state using `setToCurrency(e.target.value)`.

When any of these state variables change, React re-renders the component, which triggers the currency conversion and updates the displayed result. The `useEffect` hook with dependencies on `amount`, `fromCurrency`, `toCurrency` and `currencies` ensures that the conversion happens whenever a relevant value changes.

Step 6: Displaying the Converted Amount

The final step is to display the converted amount. We’ve already included this in the UI code within the `<div className=”result”>` section.

The code displays the converted amount using the following:

<p>{amount} {fromCurrency} = {convertedAmount} {toCurrency}</p>

This displays the original amount, the selected currencies, and the calculated converted amount. The `convertedAmount` state variable holds the result of the currency conversion.

Step 7: Testing and Refining

Now, run the application using the command `npm start` in your terminal. This will open the application in your web browser. Test the following:

  • Input Field: Enter different amounts and verify that the converted amount updates correctly.
  • Currency Selection: Select different “From” and “To” currencies and ensure the conversion is accurate.
  • Error Handling: Test edge cases, such as entering a non-numeric value in the amount field, or selecting the same currency for both “From” and “To”. While this example doesn’t have extensive error handling, it’s good to be aware of the possibilities.

If you encounter any issues, double-check your code against the examples provided and the API documentation. Make sure you’ve replaced “YOUR_API_KEY” with your actual API key.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect API Key: Make sure you’ve signed up for an API key and replaced “YOUR_API_KEY” with your actual key. Without a valid key, the API requests will fail.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API server is not configured to allow requests from your domain. This is common when developing locally. You might need to use a browser extension or a proxy server to bypass this.
  • Data Not Fetching: Double-check the API endpoint and ensure it’s correct. Also, verify that the API is returning data in the format you expect. Use your browser’s developer tools (Network tab) to inspect the API response.
  • Incorrect Rate Calculation: Ensure that your rate calculation is accurate. Double-check the API documentation to understand how the exchange rates are provided.
  • State Not Updating: Make sure you’re correctly using `useState` to manage your component’s state and that you’re calling the appropriate setter functions (e.g., `setAmount`, `setFromCurrency`, etc.) when the input values change.

Key Takeaways

This tutorial demonstrated how to build a basic currency converter application using React. We covered the following key concepts:

  • Fetching Data from an API: Using `fetch` and `useEffect` to retrieve real-time currency exchange rates.
  • State Management: Using `useState` to manage the amount, currencies, and converted amount.
  • Component Structure: Building a simple UI with input fields, select dropdowns, and a result display.
  • Event Handling: Handling user input using the `onChange` event.
  • Basic Styling: Using CSS to style the application.

SEO Optimization

To optimize this tutorial for search engines (like Google and Bing), here are some tips:

  • Keyword Research: Use relevant keywords like “React currency converter,” “React tutorial,” “currency conversion,” and “React JS” throughout your content, including the title, headings, and body.
  • Meta Description: Write a concise meta description (under 160 characters) that accurately describes the tutorial and includes relevant keywords. For example: “Learn how to build a simple currency converter app with React. A step-by-step guide for beginners, featuring API integration, state management, and a user-friendly interface.”
  • Heading Tags: Use heading tags (H2, H3, H4) to structure your content logically and improve readability.
  • Image Alt Text: Add descriptive alt text to any images you include, using relevant keywords.
  • Internal Linking: Link to other relevant articles or resources on your website to improve SEO and user experience.
  • Mobile Responsiveness: Ensure your application is responsive and works well on different devices.
  • Page Speed: Optimize your code and images to ensure fast loading times.

FAQ

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

Q: Where can I find a free currency API?

A: There are many free currency APIs available. Some popular choices include the one used in this tutorial (check for current availability), and others. Be sure to check the API’s terms of service and usage limits before using it in your project.

Q: How can I handle errors from the API?

A: Use a `try…catch` block around your `fetch` call to catch any errors. Check the API response for error codes or messages and display an appropriate error message to the user.

Q: How can I improve the user interface?

A: You can improve the user interface by:

  • Adding more styling with CSS.
  • Using a UI component library (e.g., Material UI, Ant Design) to create a more polished look.
  • Adding features like currency symbols, historical exchange rates, and a dark mode.

Q: How can I deploy this application?

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

Next Steps

You’ve now built a functional currency converter, a great starting point for further exploration. Consider enhancing your application by adding features such as:

  • Currency Symbols: Display currency symbols alongside the amounts for better readability.
  • Historical Exchange Rates: Implement a feature to display historical exchange rates.
  • Error Handling: Add more robust error handling to handle API errors and invalid user input.
  • UI Enhancements: Improve the user interface with better styling and potentially use a UI component library.
  • Local Storage: Store the user’s preferred currencies in local storage for a personalized experience.

The core principles you’ve learned here—fetching data, managing state, and building a component-based UI—are fundamental to React development. Building upon this foundation, you can tackle more complex projects and continue to refine your skills. Keep practicing, experimenting, and building! Every project you undertake will solidify your understanding and make you a more proficient React developer. The world of web development is constantly evolving, so embrace the learning process and enjoy the journey of creating amazing applications.

More posts