Creating a Currency Converter with React and Material-UI

React is a popular JavaScript library for building user interfaces, and Material-UI is a set of React components that implement Google’s Material Design. In this tutorial, we will create a simple currency converter using React and Material-UI.

Setting up the project

To get started, make sure you have Node.js and npm installed on your system. Then, create a new React project using create-react-app:

  npx create-react-app currency-converter

Once the project is created, navigate to the project directory and install Material-UI:

  npm install @mui/material @emotion/react @emotion/styled

Building the currency converter

Now that the project is set up, let’s create a new component for the currency converter. Inside the src directory, create a new file called CurrencyConverter.js and add the following code:

  import React, { useState } from 'react';
import { TextField, Select, MenuItem, Button } from '@mui/material';

const CurrencyConverter = () => {
  const [amount, setAmount] = useState(0);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');

  const convertCurrency = () => {
    // Add your currency conversion logic here
  };

  return (
    <div>
      <TextField
        label="Amount"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <Select
        value={fromCurrency}
        onChange={(e) => setFromCurrency(e.target.value)}
      >
        <MenuItem value="USD">USD</MenuItem>
        <MenuItem value="EUR">EUR</MenuItem>
        <MenuItem value="GBP">GBP</MenuItem>
      </Select>
      <Select
        value={toCurrency}
        onChange={(e) => setToCurrency(e.target.value)}
      >
        <MenuItem value="USD">USD</MenuItem>
        <MenuItem value="EUR">EUR</MenuItem>
        <MenuItem value="GBP">GBP</MenuItem>
      </Select>
      <Button onClick={convertCurrency}>Convert</Button>
    </div>
  );
};
export default CurrencyConverter;

Using the currency converter component

Now that the CurrencyConverter component is created, it can be used in the main App component. Open the src/App.js file and replace the existing code with the following:

  import React from 'react';
import CurrencyConverter from './CurrencyConverter';

const App = () => {
  return (
    <div>
      <h1>Currency Converter</h1>
      <CurrencyConverter />
    </div>
  );
};
export default App;

Conclusion

With just a few lines of code, we have created a simple currency converter using React and Material-UI. This example can be extended to include actual currency conversion logic using an API such as Exchange Rates API. I hope you found this tutorial helpful in getting started with React and Material-UI.