如何在 ReactJS 中创建货币转换器应用程序？

在本文中，我们将在 API 的帮助下构建一个非常简单的货币转换器应用程序。

我们的应用程序包含三个部分，一个用于获取用户输入并将其存储在状态变量中，一个用户可以更改转换单位的菜单，最后一个用于显示最终结果的显示部分。首先，我们调用 API 并将所需的转换率存储在状态变量中，然后我们执行一些转换货币的操作。我们的应用程序包含一个翻转开关，用户可以随时切换货币。

先决条件：该项目的先决条件是：

• 反应
• 功能组件
• 反应钩子
• 反应 Axios 和 API
• Javascript ES6

创建一个 React 应用程序并安装一些 npm 包：

• 第 1 步：通过在终端中键入以下命令来创建一个反应应用程序：

  npx create-react-app currency-converter

• 第 2 步：现在，通过运行以下命令转到项目文件夹，即货币转换器：

  cd currency-converter

• 第 3 步：让我们安装此项目所需的一些 npm 包：

  npm install axios

  npm install react-dropdown

  npm install react-icons

项目结构：它看起来像这样。

示例：这里 App.js 是我们应用程序中唯一包含所有逻辑的默认组件。我们将使用一个名为“currency-api”的免费开源（无需身份验证）API 来获取世界上所有可用货币的列表以及它们的兑换率。我们正在使用 react-dropdown npm 包列出所有可用的货币，我们还使用 react-icons npm 包作为切换按钮。

现在在App.js文件中写下以下代码。

App.js

import { useEffect, useState } from 'react';
import Axios from 'axios';
import Dropdown from 'react-dropdown';
import { HiSwitchHorizontal } from 'react-icons/hi';
import 'react-dropdown/style.css';
import './App.css';
  
function App() {
  
  // Initializing all the state variables 
  const [info, setInfo] = useState([]);
  const [input, setInput] = useState(0);
  const [from, setFrom] = useState("usd");
  const [to, setTo] = useState("inr");
  const [options, setOptions] = useState([]);
  const [output, setOutput] = useState(0);
  
  // Calling the api whenever the dependency changes
  useEffect(() => {
    Axios.get(
`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${from}.json`)
   .then((res) => {
      setInfo(res.data[from]);
    })
  }, [from]);
  
  // Calling the convert function whenever
  // a user switches the currency
  useEffect(() => {
    setOptions(Object.keys(info));
    convert();
  }, [info])
    
  // Function to convert the currency
  function convert() {
    var rate = info[to];
    setOutput(input * rate);
  }
  
  // Function to switch between two currency
  function flip() {
    var temp = from;
    setFrom(to);
    setTo(temp);
  }
  
  return (
    

      

        
Currency converter
      
      

        

          
Amount
           setInput(e.target.value)} />
        
        

          
From
           { setFrom(e.value) }}
          value={from} placeholder="From" />
        
        

           { flip()}}/>
        
        

          
To
           {setTo(e.value)}} 
          value={to} placeholder="To" />
        
      
      

        {convert()}}>Convert
        
Converted Amount:
        
{input+" "+from+" = "+output.toFixed(2) + " " + to}
  
      
    
  );
}
  
export default App;

现在让我们编辑名为App.css的文件

应用程序.css

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
  
.App {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 120px;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
.heading{
  font-family: 'Pacifico', cursive;
  font-size: 35px;
}
.container{
  height: 300px;
  width: 800px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
input{
  padding-left: 5px;
  font-size: 20px;
  height: 36px;
}
.middle,.right{
  width: 120px;
}
.switch{
  padding: 5px;
  margin-top: 25px;
  background-color: rgb(226, 252, 184);
  border-radius: 50%;
  cursor: pointer;
}
.result{
  box-sizing: border-box;
  width: 800px;
  padding-left: 30px;
}
button{
  width: 100px;
  height: 30px;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid forestgreen;
  background-color: rgb(226, 252, 184);
  cursor: pointer;
}
p,h3, button, .switch{
  color: forestgreen;
}
p{
  font-size: 30px;
}

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：