React API Project – Cryptocurrency Finance Price Tracker App Using Hooks and Axios
Learn how to make a cryptocurrency finance price tracker app in this React API Project. We will use React Hook and Axios for this beginner React JS Project. We will mainly use useEffect and useState in this tutorial.
You will be able to search currencies and have it display on the browser. Also, the prices will update live whenever you refresh the page. We will get all of the data from a public API.
If you want to follow me along my coding journey, be sure to subscribe 🙂
API Link
Source code
Timeline
0:00 What we are building
1:49 Creating React App
4:47 Getting the API Link
8:00 Installing Axios
15:20 Editing Coin Component
20:19 Mapping through API Data
28:58 Adding the CSS
React Todolist App Tutorial
Responsive React Website Tutorial
[ad_2]
Source link
nice video, but how to add the graphic ?
Quick question? What part of the code decides when the price values are going to be green or red. Like I saw the priceChange < 0 part, but doesn't that mean that price above 0 is green and below is red?
Maravilha. Muito obrigado por partilhar conhecimento👍
Thank youu!!
Wonderful job! I was nervous to begin working with API’s as the company I work for makes them sound really complicated (which I’m sure they can be). But after going through your video I see it’s nothing to be nervous about. Just your typical array of objs., And a few methods haha. Thank you! 🙏🏼
background-image: linear-gradient(-225deg,
#ac32e4 0%,
#7918f2 48%
#4801ff 100%
);
does not work
why ? tell me anyone
Really …it was an awesome project for API beginners …understood all the concepts 🙌🙌🥳
short and great tutorial ! thanks
thank you friend!
Thanks Brian, that was awesome fun. 2 questions:
How would I search for ticker AND name?
How would I add the column titles in?
Great tutorial.
I finished it. I must be getting good at this. Ha Ha. Now I gotta learn how to deploy it to react to the web.
Awesome tutorial – nice coding style – specially for beginners or mid level
how would u implement a refresh button that doesnt remove th einput uve done … for example u wanna look for shiba inu and just only refresh that one
There are thousands of bad developers who runs youtube, wrong codes, bugs.. but this teacher, I can trust, very accurate and also he teaches very well. Thank you
you need to use socket!
thankyou for this tutorial.
Woow I like your sincerity.. well done for making this video clear and simple and to the point
hi brian how to make it real time. can i using setTimeout
How can we implement real time price data change (without refresh)?
Hey man,
When I paste request URL in browser, it shows raw data and not parsed. Why is it so?
(and btw thanks for tutorial, its great)
good stuff, keep up the good work.
awesome tutorial!!
where is ur public folder and index.html file ??? how do you expect to run this project without these file structure?
greeeaaaat thanks
can we use fetch() here?
Great job man! 👍
Hey Brian! Great work. I just wanted to ask you :
1. if I wanted to move the coin image closer to its name how would I achieve that ? I tried playing around in CSS but it seems to be fixed.
2. What if I wanted to have a heading at the top of each column like NAME I PRICE I VOLUME I MARKET CAP instead of printing market cap in every row, how to do that ?
Any help would be appreciated.
This is the best tutorial I v't seen ever.❤️❤️ Love from Bangladesh
please make a video on a react project + firebase
Can you please make video of React and Aws
Thank-you so much!!!
1K like😉
Excellent
that's great, thanks
it is great!
Can you make it mobile responsive??
Hi! I am curious if I can add this app to a bitcoin mockup website I made a while ago? Or is this a standalone app?
That was a great project 👏 can we add an email alert to show people that there is a change in their currency. If that modification is possible please let us know
Thankyou for this awesome project
Great video, really enjoying the tutorials. I ended up having to do some (successful) debugging, and I am curious if anyone can answer a couple questions I have.
1. I originally had the useState set for the search const set to a blank array (square brackets) I.E. const [search, setSearch] = useState( [ ] ); and it was throwing errors, when changed it from square brackets to single quotes I.E. useState( ' ' ), it fixed the issue. My question is, why did this fix the issue?
2. Is the onChange event that is linked to the input element filtering results from the original axios call or is it making a new axios call on every change? I'm a little confused as to how those are interacting.
Thanks! Again great content.
So I am not able to have the coin symbol pop up. this is weird any suggestions?