Converter Real em Dalar com react.js

Para converter valores de real para dólar em uma aplicação React, é necessário utilizar uma API que forneça a cotação atual do dólar em relação ao real. Neste exemplo, utilizaremos a API do Banco Central do Brasil.

1. Primeiro, vamos criar um componente React que será responsável por renderizar a página de conversão:

import React, { useState } from 'react';

function Conversor() {

 const [real, setReal] = useState(0);

 const [dolar, setDolar] = useState(0);

 const converter = async () => {

  const response = await fetch('https://olinda.bcb.gov.br/olinda/servico/PTAX/versao/v1/odata/MoedasOpcionais?$top=100&$format=json');

  const data = await response.json();

  const cotacao = data.value.find((item) => item.simbolo === 'USD').cotacaoCompra;

  setDolar((real / cotacao).toFixed(2));

 };

 return (

  <div>

   <h1>Conversor de Real para Dólar</h1>

   <div>

    <label>Valor em Real:</label>

    <input type="number" value={real} onChange={(e) => setReal(e.target.value)} />

   </div>

   <div>

    <button onClick={converter}>Converter</button>

   </div>

   <div>

    <label>Valor em Dólar:</label>

    <span>{dolar}</span>

   </div>

  </div>

 );

}

export default Conversor;

1. No componente acima, utilizamos o hook useState para armazenar o valor em real que será digitado pelo usuário e o valor em dólar que será calculado pela aplicação.
2. Em seguida, criamos a função converter, que será chamada quando o usuário clicar no botão "Converter". Nessa função, fazemos uma requisição à API do Banco Central para obter a cotação atual do dólar em relação ao real. Em seguida, utilizamos essa cotação para calcular o valor em dólar correspondente ao valor em real digitado pelo usuário.
3. Por fim, utilizamos as funções setReal e setDolar para atualizar os valores no estado do componente e renderizá-los na página.

Com esse código, teríamos um componente React funcional que permite ao usuário converter valores de real para dólar com base na cotação atual. Lembrando que, para utilizar a API do Banco Central, é necessário que a aplicação esteja hospedada em um servidor, pois o navegador bloqueia requisições feitas a partir de domínios diferentes do domínio da aplicação

o codigo está no git.

https://github.com/gasperpb/REACT.git

na branch realdolar