Build A Responsive Currency Converter app with React.js – Tutorial From Scratch

If you’re looking to build a currency converter app with React.js, you’ve come to the right place. In this tutorial, we will walk through the process of creating a responsive currency converter app from scratch using React.js.

Step 1: Set Up Your Development Environment

Before we begin, make sure you have Node.js installed on your computer. You can download and install Node.js from the official website: https://nodejs.org

Step 2: Create a New React App

Open your terminal and run the following command to create a new React app:

npx create-react-app currency-converter

This will create a new directory called currency-converter with all the necessary files and dependencies to start building our app.

Step 3: Install Additional Packages

Next, navigate into the currency-converter directory and install the following additional packages:

cd currency-converter
npm install axios react-bootstrap react-select

Step 4: Build the Currency Converter App

Now it’s time to start building our currency converter app. Create a new file called Converter.js and add the following code:

  {`import React, { useState } from 'react';
  import axios from 'axios';
  import Select from 'react-select';
  import 'bootstrap/dist/css/bootstrap.min.css';

  const Converter = () => {
    const [currencies, setCurrencies] = useState([]);
    const [fromCurrency, setFromCurrency] = useState('USD');
    const [toCurrency, setToCurrency] = useState('EUR');
    const [amount, setAmount] = useState(1);
    const [result, setResult] = useState('');

    const fetchCurrencies = async () => {
      const response = await axios.get('https://api.exchangeratesapi.io/latest');
      const data = Object.keys(response.data.rates);
      const options = data.map((currency) => ({
        label: currency,
        value: currency,
      }));
      setCurrencies(options);
    };

    const handleCurrencyChange = (selectedOption, type) => {
      if (type === 'from') {
        setFromCurrency(selectedOption.value);
      } else {
        setToCurrency(selectedOption.value);
      }
    };

    const convertCurrency = async () => {
      const response = await axios.get(`https://api.exchangeratesapi.io/latest?base=${fromCurrency}`);
      const exchangeRate = response.data.rates[toCurrency];
      const convertedAmount = (amount * exchangeRate).toFixed(2);
      setResult(`${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`);
    };

    useEffect(() => {
      fetchCurrencies();
    }, []);

    return (
      

        
Currency Converter
        

           handleCurrencyChange(selectedOption, 'from')} />
           setAmount(e.target.value)} />
           handleCurrencyChange(selectedOption, 'to')} />
          Convert
        
        {result && 
{result}
}
      
    );
  };

  export default Converter;`}
  

Save the file and go back to the App.js file. Import and use the Converter component to display the currency converter app on the screen.

  {`import React from 'react';
  import Converter from './Converter';

  function App() {
    return (
      

        
      
    );
  }

  export default App;`}
  

Step 5: Test and Deploy Your Currency Converter App

Finally, run the following command to start the development server and test your currency converter app:

npm start

Once you’re satisfied with the app, you can deploy it to a hosting platform of your choice.

Congratulations! You’ve successfully built a responsive currency converter app with React.js from scratch. Feel free to customize the app further and add additional features to enhance its functionality.