ReactJS<\/a>, commonly referred to as React, is an open-source JavaScript library<\/a> used for building user interfaces, primarily single-page applications. It was developed by Facebook and is maintained by a community of developers. Here are some key features:<\/p>\n\n\n\n React is popular for building dynamic and responsive user interfaces and is widely used in web development due to its flexibility, performance, and robust ecosystem.<\/p>\n\n\n\n Ready to master ReactJS and build your currency converter app? Enroll now in HCL GUVI’s ReactJS Course<\/a> and take your web development skills<\/a> to the next level!<\/em><\/strong><\/p>\n\n\n\n Having explored the foundational concepts of ReactJS<\/a>, let’s learn how to create a Currency Converter App using ReactJS.<\/p>\n\n\n\n Let’s learn how to make a Currency Converter App using ReactJS:<\/em><\/p>\n\n\n\n You can also learn to use ReactJS to Fetch and Display Data from API<\/strong><\/a> in just 5 Simple Steps<\/strong><\/p>\n\n\n\n Step 1<\/strong>: Set up your React application by executing the following command in your terminal:<\/p>\n\n\n\n npx create-react-app currency-converter<\/p>\n\n\n\n Also Read: Build a Search Component in React [just in 3 simple steps]<\/a><\/em><\/strong><\/p>\n\n\n\n Step 2<\/strong>: Navigate to the newly created project folder with this command:<\/p>\n\n\n\n cd currency-converter<\/p>\n\n\n\n Also Read: How to Render an Array of Objects in React? [in 3 easy steps]<\/a><\/em><\/strong><\/p>\n\n\n\n Step 3<\/strong>: Install the necessary npm packages for your project by running these commands:<\/p>\n\n\n\n npm install axios<\/em><\/p>\n\n\n\n npm install react-dropdown<\/em><\/p>\n\n\n\n npm install react-icons<\/em><\/p>\n\n\n\n These steps will get your React application ready and equip it with the essential tools to start building the currency converter app.<\/p>\n\n\n\n Also Read: Top ReactJS Interview Questions and Answers! [Part-1]<\/a><\/em><\/strong><\/p>\n\n\n\n The dependencies section in your package.json will now look like this:<\/p>\n\n\n\n “dependencies”: {<\/p>\n\n\n\n “@testing-library\/jest-dom”: “^5.17.0”,<\/p>\n\n\n\n “@testing-library\/react”: “^13.4.0”,<\/p>\n\n\n\n “@testing-library\/user-event”: “^13.5.0”,<\/p>\n\n\n\n “axios”: “^1.4.0”,<\/p>\n\n\n\n “react”: “^18.2.0”,<\/p>\n\n\n\n “react-dom”: “^18.2.0”,<\/p>\n\n\n\n “react-dropdown”: “^1.11.0”,<\/p>\n\n\n\n “react-icons”: “^4.10.1”,<\/p>\n\n\n\n “react-scripts”: “5.0.1”,<\/p>\n\n\n\n “web-vitals”: “^2.1.4”<\/p>\n\n\n\n }<\/p>\n\n\n\n Example<\/strong>: Add the following code to the specified files:<\/p>\n\n\n\n Also Read: useState() Hook in React for Beginners | React Hooks<\/a><\/em><\/strong><\/p>\n\n\n\n Ever dreamt of mastering Full Stack Development? Ready to turn that dream into reality? Join HCL GUVI’s Full Stack Development course<\/a> now and start your journey towards becoming a skilled developer! Enroll now!<\/em><\/strong><\/p>\n\n\n\n Also, Explore 7 Best Reasons to Learn JavaScript | 1 Bonus Point<\/a><\/em><\/strong><\/p>\n\n\n\n\n
Steps to Create a Currency Converter App Using ReactJS<\/strong><\/h2>\n\n\n\n
![\"Steps](\"https:\/\/lh7-us.googleusercontent.com\/J7k5fjWrMSZwXh5vxvDUlysdFEWtlWmrxB7LQF-lIsSkMDfzashWW2ICaEo8iaNdKmPl1GbY7H5oJvb8PdH97qMFPY5w6jtVgGumJpga7McaJC59jH_c_PKBxlCxpWhP2VeFR1MwKntLe6j5o0YyhzM\" "\\"\\"")
![\"Steps](\"https:\/\/lh7-us.googleusercontent.com\/6JOfGj-vWSPJRHJ0BshYuLI_Ho7Odv30KOMQ80tRp94945_ra4hXMJUafa0btI3qL4exGS0k6NM0Pk9-jqKXPkbo_lUkaY-SzdpyszRt-O8EdKu2Mw6u7VtqfI52un137CSjiAycT0xpOszs4Oy8IEg\" "\\"\\"")
![\"Steps](\"https:\/\/lh7-us.googleusercontent.com\/SE-Y5Ikp9YogNfVe03P-rg0NbMdXMwg82Y_GYt61g5cPlYCRDSnI5Wlsv55Xj76JOoidooEH2J7q7nRbQ4Y6VNMaSw4sTyaYhcmtLFRJHHLKQ3zx7UZdc-etJu0hxshhuObUBHcyDeuW18EXTazPzas\" "\\"\\"")
Project Structure<\/strong><\/h3>\n\n\n\n
![\"Project](\"https:\/\/lh7-us.googleusercontent.com\/yXk-zFsymtkGI8D8Qi7kUCGNX74Y28jxA2JkosA60dEFvQmb8N7KmC5wgSwepY1PczIdJYhF2-c3VAS5FOavkNoGfg0i-tSdngD7v8FIyEvg3OZqcSmTkPWxpQRPXeC0DrOmFvuhD2uipf1txJXNa84\" "\\"\\"")
\n
Javascript<\/strong><\/h3>\n\n\n\n
\/\/ App.js\n\nimport { useEffect, useState } from 'react';\n\nimport Axios from 'axios';\n\nimport Dropdown from 'react-dropdown';\n\nimport { HiSwitchHorizontal } from 'react-icons\/hi';\n\nimport 'react-dropdown\/style.css';\n\nimport '.\/App.css';\n\nfunction App() {\n\n\/\/ Initializing all the state variables \n\nconst [info, setInfo] = useState([]);\n\nconst [input, setInput] = useState(0);\n\nconst [from, setFrom] = useState(\"usd\");\n\nconst [to, setTo] = useState(\"inr\");\n\nconst [options, setOptions] = useState([]);\n\nconst [output, setOutput] = useState(0);\n\n\/\/ Calling the api whenever the dependency changes\n\nuseEffect(() => {\n\nAxios.get(\n\n`https:\/\/cdn.jsdelivr.net\/gh\/fawazahmed0\/currency-api@1\/latest\/currencies\/${from}.json`)\n\n.then((res) => {\n\nsetInfo(res.data[from]);\n\n})\n\n}, [from]);\n\n\/\/ Calling the convert function whenever\n\n\/\/ a user switches the currency\n\nuseEffect(() => {\n\nsetOptions(Object.keys(info));\n\nconvert();\n\n}, [info])\n\n\/\/ Function to convert the currency\n\nfunction convert() {\n\nvar rate = info[to];\n\nsetOutput(input * rate);\n\n}\n\n\/\/ Function to switch between two currency\n\nfunction flip() {\n\nvar temp = from;\n\nsetFrom(to);\n\nsetTo(temp);\n\n}\n\nreturn (\n\n<div className=\"App\">\n\n<div className=\"heading\">\n\n<h1>Currency converter<\/h1>\n\n<\/div>\n\n<div className=\"container\">\n\n<div className=\"left\">\n\n<h3>Amount<\/h3>\n\n<input type=\"text\"\n\nplaceholder=\"Enter the amount\"\n\nonChange={(e) => setInput(e.target.value)} \/>\n\n<\/div>\n\n<div className=\"middle\">\n\n<h3>From<\/h3>\n\n<Dropdown options={options}\n\nonChange={(e) => { setFrom(e.value) }}\n\nvalue={from} placeholder=\"From\" \/>\n\n<\/div>\n\n<div className=\"switch\">\n\n<HiSwitchHorizontal size=\"30px\"\n\nonClick={() => { flip() }} \/>\n\n<\/div>\n\n<div className=\"right\">\n\n<h3>To<\/h3>\n\n<Dropdown options={options}\n\nonChange={(e) => { setTo(e.value) }}\n\nvalue={to} placeholder=\"To\" \/>\n\n<\/div>\n\n<\/div>\n\n<div className=\"result\">\n\n<button onClick={() => { convert() }}>Convert<\/button>\n\n<h2>Converted Amount:<\/h2>\n\n<p>{input + \" \" + from + \" = \" + output.toFixed(2) + \" \" + to}<\/p>\n\n<\/div>\n\n<\/div>\n\n);\n\n}\n\nexport default App;<\/code><\/pre>\n\n\n\nCSS<\/strong><\/h3>\n\n\n\n
\/* App.css *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Pacifico&display=swap');\n\n.App {\n\nheight: 100vh;\n\nwidth: 100%;\n\ndisplay: flex;\n\nalign-items: center;\n\nflex-direction: column;\n\nbackground-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);\n\n}\n\n.heading {\n\nfont-family: 'Pacifico', cursive;\n\nfont-size: 35px;\n\n}\n\n.container {\n\nheight: auto;\n\nwidth: 800px;\n\ndisplay: flex;\n\njustify-content: space-around;\n\nalign-items: center;\n\n}\n\ninput {\n\npadding-left: 5px;\n\nfont-size: 20px;\n\nheight: 36px;\n\n}\n\n.middle,\n\n.right {\n\nwidth: 120px;\n\n}\n\n.switch {\n\npadding: 5px;\n\nbackground-color: rgb(226, 252, 184);\n\nborder-radius: 50%;\n\ncursor: pointer;\n\n}\n\n.result {\n\nbox-sizing: border-box;\n\nwidth: 800px;\n\npadding-left: 30px;\n\n}\n\nbutton {\n\nwidth: 100px;\n\nheight: 30px;\n\nfont-weight: bold;\n\nfont-size: 20px;\n\nmargin-top: 15px;\n\nborder: 2px solid forestgreen;\n\nbackground-color: rgb(226, 252, 184);\n\ncursor: pointer;\n\n}\n\np,\n\nh3,\n\nbutton,\n\n.switch {\n\ncolor: forestgreen;\n\n}\n\np {\n\nfont-size: 30px;\n\n}<\/code><\/pre>\n\n\n\n
![\"Step](\"https:\/\/lh7-us.googleusercontent.com\/1A1UhVwRmAFntjURQBb19HsP8QCawsRCzdjc6BgzWe8tAR2fmbSS0zKIJt678-X4_aEaRxUG__26bNWOyhMT6pp47qbN8zYxdZe5p2fir-QbhZDfbTMhkRHXoqznW_2tcfOfKAZte4WRgx1VEA1FtuE\" "\\"\\"")
<\/figure>\n\n\n\n![\"Step](\"https:\/\/lh7-us.googleusercontent.com\/SjeY0Ts2GlJ4x4awqwgME7xQgMZKCK6nvWdChVqCz5zRR9kByIey6HCA2MZ2ooG_qIXaQxxMNRKYL80LoyGqQcvjmZNJyd_IHkNJHfIjXUiwpDnnUjpFgG-Vx0Ei6qXNBWoPx5g7t9LwaJbTnBHyrmA\" "\\"\\"")
<\/figure>\n\n\n\n