ReactJS API Tutorial #1 - Make a Twitch Dashboard

In this video we will make a dashboard showing the most popular Live Streams currently on Twitch as well as the most popular streams by specific games. We will be using ReactJS with react-router for routing, Bootstrap for styling, and Axios library for making our API calls to the Twitch API.

Link to code and live demo:

make your Twitch API account here:

link to 2nd video:

This React API tutorial will teach you show you how to use an API in a more advanced way than most ReactJS tutorials, which generally only show you the most basic api calls with axios. In this tutorial you will see how you can actually use a 3rd party API with ReactJS to create an application. You will also make dynamic API calls by pulling parameters with React-Router and using them to call the Twitch API

This tutorial expects you to have a basic understanding of the basics of ReactJS like components, state, and props. If you've gone through the getting starting guide you should be able to follow what's going on. For state management we will use a new ReactJS 16 feature known as hooks, as opposed to Class based components
#reactjs #react #javascript

[Mewgius]

So I'm not entirely sure why this is happening (I'm new to React), but I'm getting an infinite re-render loop that keeps continuing until the Twitch API denies my API call from sending too many requests too quickly. Seems to me that it's happening either when setGames is called to change the state, or when games.map is being called in the return statement. Any thoughts on why this is happening, or how to fix it?
I should probably note that I'm working in VS Code using create-react-app, rather than going through codesandbox.

[javascriptmastery]

Oh, another fellow React developer, nice to meet you!

[ThorWasStreaming]

Hello, is there an update to this video? The code you demonstrate and have in the description no longer works. Thank you.

[jeffwebb]

Great tutorial, really helpful if you want to get a better understanding of React. I would highly recommend it.

[nooraldeen]

I really can't wait to get into this later this week!

[CancelIFR]

It looks like twitch switched to an oauth token authentication. How can we do this now?

[notnic]

I cannot get the data through the api at 19:00. I have used catch to get the error and it says "TypeError {}". What steps can I take to find out what is happening?

[renaissanceengineer]

if you get stuck anywhere or have any questions feel free to ask. I'm also open to any suggestions for futures project ideas as well.

Some ideas for features you can add once you've finished the tutorial:
-create a real time dashboard of stats using a charting library and making API calls every minute to update the view counts
-add some error handling to handle stuff like API limits or outages
-add a loading component
-break out some of the repeated logic like replacing the URLs and make a List component and Card Component for the repeated UI logic
-add some database storage and track which apps have the highest view counts over time

[jsfofun]

i got this error message: "Request failed with status code 401", so I checked your code too and i got same error. It was changed?

[Mewgius]

Not entirely sure why this is happening to me (I'm new to React), but when it seems to me that when setGames is called in Games.js (or maybe it's happening during games.map in the return statement), it forces a refresh of the page which then triggers another request to the Twitch API, and this keeps looping until the Twitch API rejects the API call from being accessed too many times in too short a time. Any ideas on why this might be happening?

[MC-ytzz]

hello, the link of your code is not working anymore ?

[MrTheFireBlack]

Hello brother, you can tell why it is not working anymore, I tried to do but everything is blank, I saw that yours is also blank.

[xpointer]

I'am building a frontend only website using React js that fetches data from Twitch api. But it is returning an HTML file, throws this error, 'Unexpected token < in JSON at position 0'. Also, I can no longer use just the link to fetch data. The api requires two headers, clientID and access token. I'am struggling to get the access token.

[AnuragSingh__]

Hey!!!
I m getting this error :
{"error":"Unauthorized", "status":401, "message":"OAuth token is missing"}
Plz Help

[craigmason]

Are you a freelancer, do you have contact information?