Build A Currency Converter In React

Подписаться 1,6 млн

Просмотров 129 тыс.

50% 1

🚨 IMPORTANT:
Learn React Today Course: courses.webdev...
Modern React is tough to learn which is why in this video I will be walking you through a beginner/intermediate level React project using hooks. This project will handle API calls, two way data binding, useEffect, useState, and much more so it is a great project for learning about all the basics of React. I will also be explaining my process from beginning to end so you can understand exactly what my thought process is the entire way.
📚 Materials/References:
Destructoring And Spread Operator Video: • Why Is Array/Object De...
GitHub Code: github.com/Web...
🧠 Concepts Covered:
How to useEffect
How to useState
How to setup two way data binding in React
Creating a React project
Using an API in React
Differences between state and props
🌎 Find Me Here:
My Blog: blog.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#ReactProject #WDS #React

Опубликовано:

14 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 293

@kharChehre 4 года назад

Thank you Kyle for teaching us how to code & leaving your modeling career!

@WebDevSimplified 4 года назад

Modeling is overrated :P Programming is where its at.

@Adam-cn5ib 4 года назад

@@WebDevSimplified woah you actually were a model? not surprised tho :O

@WebDevSimplified 4 года назад

I was not. I wouldn't want to be either. It seems like a lot of travel and work, and programming is way more fun.

@pranav288 3 года назад

@@WebDevSimplified nerd

@Scuffy 2 года назад

@@pranav288 ur mom

@arturdeandrade7443 4 года назад

Your React videos are amazing! I'm definitely going to use them as a reference. I wonder if it would be possible for you to tell us more about the 'npm run build' command in the next one, maybe even deploy an app.

@00el04 3 года назад

Just started learning React and I find it much easier to learn by building these small projects :) Thanks, man!

@anthonygrear6226 3 года назад

Yes, I think this is a good strategy. I just keep doing these small projects everyday- rather than slogging through a very long tutorial, book, or lesson.

@ssz6738 2 года назад

@@anthonygrear6226 12ewer

@ifillup 4 года назад

React displays a warning as toAmount is NaN on the first render, changing the line 'toAmount = amount * exchangeRate;' to 'toAmount = amount * exchangeRate || 0;' is one way to fix it another would be setting an initial state to exchangeRate when calling the useState hook.

@AdityaRaj222 4 года назад

Saved my life. Thank you and Kyle.

@parampampam4477 4 года назад

Also there is a problem when chosen fromCurrency and toCurrency are the same (e.g "EUR' and "EUR'). My solution to it is to compare them in an 'if" statement like this: useEffect(() => { if (fromCurrency === toCurrency && fromCurrency != null) { setExchangeRate(1); } else if (fromCurrency != null && toCurrency != null) { fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`) .then(response => response.json()) .then(data => setExchangeRate(data.rates[toCurrency])); } }, [fromCurrency, toCurrency]);

@laplasparadox3138 4 года назад

@@parampampam4477 bro l love u LOL l was trying so hard to get it this should be pinned!

@mikemorrison8984 4 года назад

Another excellent tutorial! Also, I took the "Learn React Today" course, and it too, is excellent.

@WebDevSimplified 4 года назад

Thank you! I'm glad you enjoyed it.

@shahriarparvezshuvo4760 4 года назад

Hey KYLE. Really appreciate your efforts. I've have been following your videos since you had like 10-12 videos on channel. Just I want to let you know that, I'm huge fan. I learned a lot from you. You are one of the best mentor, I've found on the internet.😻 There is a tiny bug I found while following this tutorial. Let's say I was playing with currency USD to EURO, when I switch `toCurrency` to USD like it's now USD to USD. The conversion doesn't change. It stays with EURO amount while it shows USD to USD. I think, I fixed this with the one line of code: `if (toCurrency === fromCurrency) toAmount = fromAmount;`. That's being said. Keep up the good work 💪. Love from 🇧🇩 Bangladesh.

@jacobthedev4979 2 года назад

Not sure if anyone else got the 'duplicate keys error'. But it happens at this line => setCurrencyOptions([data.base, ...Object.keys(data.rates)]) here we set the first currency option to data.base. Doing this sets it to EUR, while still leaving the EUR option in the select drop down causing it to appear twice. edit the line to look like this => setCurrencyOptions([ ...Object.keys(data.rates)]) removing 'data.base' allows for only 1 instance of EUR to appear.

@the_yugandharr 10 месяцев назад

This is because the you can't change the base currency anymore in 2023, they restricted that to the pro plans.

@m.a.t.a.s 3 года назад

I like watching your tutorials and doing my program a bit differently. After some struggle, I made length converter instead with a local JSON table.

@developerweb3158 Год назад

Thanks for the tutorial, I love how you explain concepts, you make it seems really easy.

@jinethhettiarachchi8744 Год назад

Did you do correctly ... I was stuck in to get currency API ... it always ask key I don't know how solve it please help

@roydonk2878 4 года назад

Another amazing video. Lots of information clearly explained and is right to the point. I'm learning so much from you, thanks for the great content.

@soheebae213 4 года назад

Thank you Kyle for amazing video!! I was wondering where you get all of your api from?

@shozdott 4 года назад

I'm sorry but you should have more followers , your the first person to ever simplify the empty array use effect thing clearly on the first shot .. well done gent :) the fact you said quote " Since an empty array never changes " opened it all up TY and cant wait to start buying your courses !

@WebDevSimplified 4 года назад

Thank you so much! I am really glad you enjoyed the video.

@GarronArgentina 4 года назад

Check the video "React tutorial in 30 seconds" and you will save money and time! Check Federico Zacayan chanel in youtube.

@bobDotJS 4 года назад

Found Fix (ELIFECYCLE crash): I'm an Ubuntu daily driver kind of guy and immediately I had to jump through hoops to get the correct version of NPM (I had the nightly update version somehow). Once I rolled back to v12.16, I was able to "create-react-app ." BUT after following along up to 2:07 - and then "Failed at the react-currency-converter0.1.0 start script" - When reading the error log, it looks like getting rid of the ELIFECYCLE is causing it to crash. [Fix:] After almost 2 hours of playing around with this, I realized that I needed to run "npx create-react-app" and then immediately run "start npm" and then delete the assets/code WILE the server was running. Not sure why that happened or why this works but I did it side by side on my Windows Laptop and my Ubuntu laptop and the ubuntu laptop had the same error time and time again. Hopefully this comment can save somebody a lot of frustration.

@yodkwtf 3 года назад

The currency converter APIs don't work the same anymore. They don't allow you to fetch data using the base currency. So just a heads up for anyone who starts the project now. You'll be wasting your time unless you find an API that allows you to fetch currency rates from a base currency for free. I tried to find one myself but it didn't lead to anything. Thanks, Kyle for the video tho but the PROJECT IS NOT GOING TO WORK ANYMORE.

@parthteli9039 3 года назад

You just need to add api key in fetch ! It do work .

@yodkwtf 3 года назад

@@parthteli9039 ik I need API key to to fetch and it does work but only for the first fetch request when we're fetching data about all the currency rates. In the later half of the video we make another fetch call to get specific single conversion, for eg, INR to USD only. I'm talking about that part. That call isn't included in the free plan anymore.

@parthteli9039 3 года назад

@@yodkwtf yeah you're right

@stafa5568 3 года назад

Thank you guys, I just experienced this and you're all right. Thanks for the update.

@yodkwtf 3 года назад

@@stafa5568 np man. There is a work around to still complete this project. For me, that approach seemed a bit simpler too.

@efraimie6119 3 года назад

Man you are amazing, clear and complete informations, also you have a lot of knowladge and skill making anything complex become simple. Keep going!

@nuevouser2279 2 года назад

It is "just a basic little app" yet there is a lot to it! 😬 Thank you for the great explanation!🙂

@JimmyCheng 4 года назад

Man you've done a great job with these mini projects, really appreciate it.

@WebDevSimplified 4 года назад

Thank you so much

@prathameshmungekar8328 3 года назад

I am getting following warnigns 1)index.js:1 Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string. 2)react-dom.development.js:1383 The specified value "NaN" cannot be parsed, or is out of range. 3)Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

@SocksWithSandals 4 года назад

That was even more helpful than your ToDo list walkthrough.

@Algedibarrios 4 года назад

He is improving his code, what about you spectator?

@oluwatobifalola387 4 года назад

Amazing video Kyle. Thank you very much. I have a question though. The rates only change when the base currency changes, why do we need to make an API request when the sub currency changes as well?

@joel_mathew 3 года назад

Hey Kyle , I am one of your subscribers and I love your tutorials , one thing though the link for the API has been changed and I am not able to follow this tutorial if only you could just comment what all changes you need to make for the new link.

@nick.h7566 4 года назад

I'm just NEVER disappointed when I watch a WDS video! Kyle you are a Greek God, and whenever I hear the blues lick (That I'm pretty sure that beautiful lady in the back had something to do with) it gets me super amped to code! .....However it also gets me super amped to play my telecaster... damn you for these conflicting feelings! Much love dude!

@WebDevSimplified 4 года назад

Thank you so much. The song was actually something I found online and decided to stick with since the very beginning.

@nick.h7566 4 года назад

@@WebDevSimplified Oh snap, I thought you recorded it.. Well she's a gorgeous guitar, hopefully you've tamed that mare!

@centrumsaiyan7623 4 года назад

I'm gonna spend some time and create this project by myself. At the end, it's gonna be worth it.

@nativeKar 3 года назад

Kyle!!! I had asked a candidate a question very similar to this as part of a Frontend interview, and they ended up coding a solution which is a replica of this! I hope you get that 'Thank you' note from them.

@glebcherpovsky419 2 года назад

Perfect!!! Thank you very much for this explanation👏👏👏

@curtaslostark1583 4 года назад

That was awesome! Great teaching, so clarifying, it helped a lot, thank you!

@leeyahav4754 4 года назад

this code was not easy for me at all to implement and you explained it amazing thnx Kyle

@leerenae313 3 года назад

Thank you so much Kyle! your videos are so easy to follow. Thank you for making this free too!

@maskman4821 4 года назад

I do enjoy this video, this gives me a rough idea about how react works, yeah, i will definitely check out your couurse !!!

@santespro 4 года назад

Very helpful video. Keep making React tutorials

@ThiagoVieira91 4 года назад

Another awesome tutorial Kyle! But I could use some help here. 😅 I didn't get the logic behind the following state settings, and its implications ahead: const [amount, setAmount] = useState(1); const [amountInFromCurrency, setAmountInFromCurrency] = useState(true); Why did you set the default of the first state to 1 and the second to true? Why the function to handle the amount change uses setAmountInFromCurrency as referential variable to allow the conversion from the second select field?

@mangekyousharingan5755 4 года назад

Dude, i just love you, thanks a lot. greetings from Brazil

@maskman4821 4 года назад

you fall in love with Mr. Kyle ???

@armon_p 4 года назад

Thanks for the video 👍. A bit of constructive criticism... Its tough understand the concepts while also keeping up in my editor at the pace you talk and switch files/sections. I'll be back for more tips!

@krishnam384 3 года назад

Explanation was excellent..!!

@omar_mtl 4 года назад

Thank you so much, please do a lotta react js apps

@실험맨 4 года назад

Very good video for beginners even korean can hear you.

@mohammadhossein5065 2 года назад

thanks man this video helped me in my job

@OPopoola 3 года назад

Excellent tutorial. Thanks

@rijupatra8689 4 года назад

you really make it simple ...do more react video

@georgettebeulah4427 4 года назад

This make so much sense and can relate to it and understand what your saying and mean. Thank u

@sidduaufroze 4 года назад

Instead of "props" parameter and destructuring in CurrencyRow.js, you can directly use {CurrencyOptions} as parameter.

@ekoydakoykoy 3 года назад

i tried this and got an error

@Nathan-pu9um 3 года назад

Try this: Went through the video 3 x , 1st time Followed him through it and made it , 2nd time I watched it and took notes and tried to make it from the notes only, 3rd time make it without any notes from memory 👍

@00el04 3 года назад

does this help you learn better?

@Dipenparmar12 4 года назад

This kind of small project is very useful to understand language/Library fundamentals.. 👍

@kiranez6095 3 года назад

You are a living legend m8

@markramos3203 4 года назад

Hi, Kyle, can you make a video about the virtual DOM? Thanks!

@milanddangol210 3 года назад

Unhandled Rejection (TypeError): Cannot convert undefined or null to object. error in this line const firstCurrency = Object.keys(data.rates)[0];

@martinreed7831 4 года назад

Thanks so much Kyle, you're an absolute coding legend!!! Great tutorial😁

@ramunasnognys5429 2 года назад

Greate tutorial! Only question where should I change decimal places with toFixed() method? Then I make this change exchangeRate const, app crashes.

@kirillbaryba746 4 года назад

Thanks Kyle!

@Billy_98 4 года назад

Thank you!

@giuse7 4 года назад

Hey the app works for me but I get this error in the console: index.js:1 Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string. in input (at CurrencyRow.js:13) in div (at CurrencyRow.js:12) in CurrencyRow (at App.js:66) in App (at src/index.js:5)

@Chad-ms4ym 3 года назад

please help

@kuldeepdawar7496 3 года назад

Realy love it brother..Thanksss a lot..

@raadzaa 4 года назад

Thank you for your good explanation!

@bardhan.abhirup 4 года назад

Great lesson! Thanks a lot!

@dimitridoroshko 4 года назад

Please, make* more React videos, thank you so much!!

@WebDevSimplified 4 года назад

I plan to. If you have any project ideas let me know.

@dimitridoroshko 4 года назад

@@WebDevSimplified how about a simple social network, it may turn into a series of videos. Should be useful :)

@WebDevSimplified 4 года назад

I generally don't like to make long series of videos so I would probably stay away from a large project like this.

@dimitridoroshko 4 года назад

@@WebDevSimplified Build a movie search app using React (with hooks)

@warrior9096 4 года назад

@@WebDevSimplified Maybe a 'Home budget App' where you input revenue and spending. App also sums everything and save all in local storage...or generate some summary at the end of the month? It can be fun and useful :)

@oleksiikucherenko5881 2 года назад

Thanks for the video, it's just cool!

@volkanongun1112 4 года назад

Thank you, great tutorial

@bhargavjani7102 3 года назад

At 14:04 , When I pass option as the key that way, I get the following error : Warning: Encountered two children with the same key, `EUR`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version. How can I solve this?

@morososaas3397 3 года назад

Omit the base currency when we make the array of currencyOptions. This is because currency options include these days EUR as well. So it's not unique key anymore if you include the base in the array of currency options.

@Psychobellic 3 года назад

get a index value as prop too (option, index) and assign the key={index}

@MichaelMiller-rg6or 3 года назад

Apparently the exchange rates API now requires an API key, I keep getting "You have not supplied an API Access Key. [Required format: access_key=YOUR_ACCESS_KEY]".

@bozkurt6264 4 года назад

Thanks Thanks Thanks a lot for this project

@spsingh94ss 4 года назад

amazing video. thank you so much.

@ruqayahn.k4645 Год назад

thank you ❤

@vadimcoj 4 года назад

would love to see also vue

@azeem7762 4 года назад

I Love U....

@alvinacosta2312 4 года назад

hey kyle, awesome video as usual! learned a lot from this tutorial but a bit overwhelmed at the same time. got one question though, as i was following the code with you, near the end of the tutorial i got this error which says "Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string." so i thought i did something wrong. but the program was working as expected. last thing i did to check was copy the entire code from github and tried it out but still having the same error. I'm baffled cause the program works but this error shows. any insight on this? thanks a lot and keep it up!

@mihiaissa1260 3 года назад

change the line 'toAmount = amount * exchangeRate;' to 'toAmount = amount * exchangeRate || 0;'

@tomweb7257 4 года назад

Great job keep going on

@pandirisuresh6920 3 года назад

Unhandled Rejection (TypeError): Cannot convert undefined or null to object

@JimmyCheng 4 года назад

could you plz explain the fetch in last part a bit, or if there's a video detailing the use of those symbols

@ekoydakoykoy 3 года назад

you can check it on the API (exchange rate IO)

@saurabhrana8040 3 года назад

Kyle its give me an error..cannot read property 'AED' of undefined.. how can i resolve it?

@Chad-ms4ym 3 года назад

please help

@digigoliath 4 года назад

Thanks. I know it is going to be a great video!!

@pawanbhatta8973 3 года назад

I got an error while fetching, the api is asking for a key. don't have one 😕 error: Object { code: 101, type: "missing_access_key", info: "You have not supplied an API Access Key. [Required format: access_key=YOUR_ACCESS_KEY]" }

@victorizquierdo5320 2 года назад

HI. You must register to get an API key, then set it as parte of URL base. The doc indicates how to do it.

@ronistiawan1130 4 года назад

Thanks, Kyle

@andresramirez4469 3 года назад

You make it look so easy! how!?

@Saveli_Sh 2 года назад

Thank you! It was really difficult to me, I did it in type script. And I had some trouble with the (api), I used Belarus API....But I won this task! Thank you from Belarus! I like your lessons!!!! Good luck!!!!

@ahsanzizan Год назад

can i get the url for the belarus api mate?

@relaxdebeats 4 года назад

Amazing video bro👍👍.

@leolima8585 4 года назад

Do you video class for detection face (photo) inteligement in react native code? Type, smile or try? With aprovatiom of signup?

@tanvimehta 26 дней назад

how does the input box get those increament buttons on right side?

@anilanaparthi6985 4 года назад

Really great sir

@codedjango 4 года назад

Can you please do the same for Vuejs?

@sovietbot6708 2 года назад

Spelling isn't the issue. I get an error saying "Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'AED')" and the code in question is: useEffect(() => { if (fromCurrency != null && toCurrency != null){ fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`) .then(res => res.json()) .then(data => setExchangeRate(data.rates[toCurrency])) } }, [fromCurrency, toCurrency]) for some reason, the conditional isn't working.

@adnanrazzaq19 4 года назад

Was it necessary to use another useEffect?

@unknown1988s 4 года назад

Q : I have some lines of codes in my controller that i want to externalize to use as well for other controllers, should i create a file in a new folder called middlewares and then require that file to call the function inside my controllers ? thanks !

@RahulAhire 4 года назад

How many hours does it takes for you to research and make a video over it? Seems a lot of work

@WebDevSimplified 4 года назад

Depends on the video, but something like this probably takes around 5 hours to produce.

@73dines 3 года назад

Interesting bug: if I compare EUR and EUR (I know, it' s dumb :) ) it comes: "Unhandled Rejection (TypeError): Cannot read property 'EUR' of undefined" Every other currency works fine. ;)

@jaffasunny 3 года назад

Hey, I got the same error

@pradipbedre653 3 года назад

please do some modification code is not working, I do all as you do but still, it's showing error. finally, I copy all code from your repo but still, it's not working.

@vibelover5444 4 года назад

I know little basics of JS, straightaway jumping here.. feels difficult

@busrakara4929 3 года назад

Hello, thank you for the amazing tutorial. But when I apply all of this, at the end I got an error : "Unhandled Rejection (TypeError): Cannot read property 'AED' of undefined " the currency type of AED cannot be read. I couldn't find the solution. A help is much appreciated !! Thanks.

@jasoneugene7697 3 года назад

I just figured this out, on the 2nd useEffect change: fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`) to fetch(`${BASE_URL}&base=${fromCurrency}&symbols=${toCurrency}`) Because the API requires a KEY now, the URL already has the ? in the string, therefore when we added it in the fetch it gives an error. Changing the ? to & fixes the issue.

@busrakara4929 3 года назад

Jason allmann thank you!

@carlosfedericovazquez9113 3 года назад

@@jasoneugene7697 Hi Jason, Thanks for your help. I´ve done that and that´s fixed but now there is an error when i choose another currency than euro in fromCurrency. how can i fix that?

@jasoneugene7697 3 года назад

@@carlosfedericovazquez9113 unfortunately you have to have a paid subscription for the api to change the base currency.

@carlosfedericovazquez9113 3 года назад

@@jasoneugene7697 Ahhh, ok. Thanks so much for your reply!!! Greetings from Argentina

@Michael-oh2py 3 года назад

Anyone else getting the error at the end: Cannot read property of AED, tried everything from comments edit: For anyone trying this May 2021, it will not work anymore without a paid subscription

@romanjafedcarrascodavila821 4 года назад

Awesome video!

@WebDevSimplified 4 года назад

Thanks!

@balintorosz9379 4 года назад

Can you make this same course but in typescript?

@slow103 3 года назад

Has this changed? It is with a API key now

@shivaverma7713 Год назад

A quick update, the app is not going to work as the API is not free anymore. You can create your own API with sample data on that site and then create a project.

@MaxProgramming 4 года назад

How did you made your intro?

@CastleShield 4 года назад

Can you make a tutorial how to make 1 USD to 1 BTC converter?

@ahmedalanany1184 4 года назад

Hi kyle im getting . Cannot read property 'map' of undefined error. In the middle of the tutorial and i wrote the same code without any difference. So im Waiting your answer and thanks :)

@gulay3203 2 года назад

awesome!

@therichardchannel 3 года назад

How come when I expand the rates property of the object, it re-arranges to alphabetical in the console? But when I map it to the select, it's still how it was originally

@tamjidhossain64 2 года назад

Hello, I finished the video and whenever I change the fromCurrency, it does not change the values and the exchange rate remains the same for EUR rate. It works completely fine, however, when I change the toCurrency to a different currency.