How to create a Currency converter app in ReactJS ?
In this article, we will be building a very simple currency converter app with the help of an API.
Our app contains three sections, one for taking the user input and store it inside a state variable, a menu where users can change the units of conversion, and finally a display section where we display the final results. At first, we call the API and store the required conversion rates inside a state variable and later we perform some operations that convert the currencies. Our app contains a flip switch where users can switch currencies at any time.
Prerequisites: The pre-requisites for this project are:
Creating a React application and installing some npm packages:
Step 1: Create a react application by typing the following command in the terminal:
npx create-react-app currency-converter
Step 2: Now, go to the project folder i.e currency-converter by running the following command:
Step 3: Let’s install some npm packages required for this project:
npm install axios
npm install react-dropdown
npm install react-icons
Project Structure: It will look like this.
Example: Here App.js is the only default component of our app that contains all the logic. We will be using a free opensource (no auth requires) API called ‘currency-api’ to fetch a list of all the available currencies in the world and also their conversion rates. We are using the react-dropdown npm package to list all the available currencies and also we react-icons npm package for the switch button.
Now write down the following code in the App.js file.
Now let’s edit the file named App.css
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: