Learn React by Building a Currency Converter
Table of Contents
- Introduction
- Setting Up the Project
- Removing Unnecessary Files and Code
- Styling the Currency Row
- Fetching Currency Data from API
- Populating the Select Options
- Setting the Default Currency
- Handling Currency and Amount Changes
- Updating Conversion Rates on Currency Change
- Conclusion
Introduction
In this article, we will be diving into a beginner React project that covers props, state management, and hooks. This project will serve as a great starting point for anyone looking to learn and understand these concepts in React.
1. Setting Up the Project
To get started, we will first need to set up our project. We will be using Create React App to create a new React application. Simply create a new folder with a name that does not have uppercase or spaces, then run the command npx create-react-app . This will create all of the necessary files for our project.
2. Removing Unnecessary Files and Code
Once our project is set up, we can proceed to remove any unnecessary files and code that we will not be using. This includes removing files in the src and public directories that are not relevant to our project. We will also remove the default logo, service worker code, and CSS in our App.js file to clean up our project and start with a clean slate.
3. Styling the Currency Row
Next, we will focus on styling our currency row. This will involve creating a separate component called CurrencyRow.js that will handle the rendering of the currency row. Inside this component, we will structure our HTML to include an input field and a select dropdown for the currencies. We will also add CSS to style the border, padding, and spacing of our input and select elements.
4. Fetching Currency Data from API
In order to perform currency conversions, we will need to fetch the latest currency rates from an API. We will be using the Exchange Rates API for this purpose. We will create a constant baseURL that contains the API URL and use the fetch function to fetch the data. We will convert the response to JSON format and log the data to the console to ensure we are retrieving the correct information.
5. Populating the Select Options
With the currency data fetched, we can now populate our select dropdowns with the currency options. We will create a state variable called currencyOptions that will store the currency options retrieved from the API. We will then map over this array of options and dynamically generate the select options using the map function. Each option will have a value and text derived from the currency data.
6. Setting the Default Currency
To provide a default currency selection, we will create two state variables fromCurrency and toCurrency that will store the selected currencies. By default, we will set fromCurrency to the base currency (in our case, euros) and toCurrency to the first currency in the currencyOptions array. We will update these state variables accordingly when the currency options change.
7. Handling Currency and Amount Changes
Next, we will handle currency and amount changes. We will create two separate state variables amount and amountInFromCurrency to store the entered amount and to indicate whether the amount is in the "from" currency or the "to" currency. We will update these variables based on user input using the onChange event. This will allow us to convert between the two currencies based on the entered amount.
8. Updating Conversion Rates on Currency Change
Finally, we will update the conversion rates when the currencies are changed. We will use the useEffect hook to track changes in the fromCurrency and toCurrency state variables. When either of these variables change, we will fetch the exchange rate for the new currency pair and update the exchangeRate state variable. This will ensure that the conversion is always based on the latest exchange rate.
10. Conclusion
In this project, we have covered the basics of props, state management, and hooks in React. We have implemented a currency conversion app that allows users to select currencies, enter amounts, and see the conversion in real time. This project serves as a great starting point for anyone looking to learn and understand these concepts in React.
Highlights:
- Beginner React project covering props, state management, and hooks
- Uses Create React App for project setup
- Fetches currency data from an API
- Populates select dropdowns with currency options
- Handles currency and amount changes in real time
- Updates conversion rates on currency change
FAQ
Q: Can I use other APIs for currency conversion?
A: Yes, you can use other currency conversion APIs as long as they provide the necessary data in a similar format.
Q: Can I customize the styling of the currency row?
A: Absolutely! Feel free to modify the CSS to suit your desired style and layout.
Q: How can I add more currency options?
A: You can modify the currencyOptions state variable to include additional currencies. Just make sure to update the API URL accordingly.
Q: Can I apply this currency conversion logic to other projects?
A: Yes, you can adapt this logic to other projects that require currency conversion functionality. Simply integrate the relevant components and methods into your project.
Q: Is there a limit to the number of currencies that can be converted?
A: There is no limit to the number of currencies that can be converted. You can add as many currency options and conversion rates as needed.
