¿Cómo crear una aplicación de conversión de moneda en ReactJS?

En este artículo, crearemos una aplicación de conversión de moneda muy simple con la ayuda de una API.

Nuestra aplicación contiene tres secciones, una para tomar la entrada del usuario y almacenarla dentro de una variable de estado, un menú donde los usuarios pueden cambiar las unidades de conversión y, finalmente, una sección de visualización donde mostramos los resultados finales. Primero, llamamos a la API y almacenamos las tasas de conversión requeridas dentro de una variable de estado y luego realizamos algunas operaciones que convierten las monedas. Nuestra aplicación contiene un interruptor basculante donde los usuarios pueden cambiar de moneda en cualquier momento.

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar
• Componentes funcionales
• Ganchos de reacción
• Reaccionar Axios y API
• JavaScript ES6

Creando una aplicación React e instalando algunos paquetes npm:

• Paso 1: Cree una aplicación de reacción escribiendo el siguiente comando en la terminal:

  npx create-react-app currency-converter

• Paso 2: ahora, vaya a la carpeta del proyecto, es decir, el convertidor de moneda, ejecutando el siguiente comando:

  cd currency-converter

• Paso 3: instalemos algunos paquetes npm necesarios para este proyecto:

  npm install axios

  npm install react-dropdown

  npm install react-icons

Estructura del proyecto: Se verá así.

Ejemplo: HereApp.js es el único componente predeterminado de nuestra aplicación que contiene toda la lógica. Usaremos una API gratuita de código abierto (no requiere autenticación) llamada ‘currency-api’ para obtener una lista de todas las monedas disponibles en el mundo y también sus tasas de conversión. Estamos usando el paquete npm react-dropdown para enumerar todas las monedas disponibles y también usamos el paquete npm react-icons para el botón de cambio. 

Ahora escriba el siguiente código en el archivo  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 (
    <div className="App">
      <div className="heading">
        <h1>Currency converter</h1>
      </div>
      <div className="container">
        <div className="left">
          <h3>Amount</h3>
          <input type="text" 
             placeholder="Enter the amount" 
             onChange={(e) => setInput(e.target.value)} />
        </div>
        <div className="middle">
          <h3>From</h3>
          <Dropdown options={options} 
                    onChange={(e) => { setFrom(e.value) }}
          value={from} placeholder="From" />
        </div>
        <div className="switch">
          <HiSwitchHorizontal size="30px" 
                        onClick={() => { flip()}}/>
        </div>
        <div className="right">
          <h3>To</h3>
          <Dropdown options={options} 
                    onChange={(e) => {setTo(e.value)}} 
          value={to} placeholder="To" />
        </div>
      </div>
      <div className="result">
        <button onClick={()=>{convert()}}>Convert</button>
        <h2>Converted Amount:</h2>
        <p>{input+" "+from+" = "+output.toFixed(2) + " " + to}</p>
  
      </div>
    </div>
  );
}
  
export default App;

Ahora editemos el archivo llamado App.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;
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: