Learning Should Be Fun: ReactJS + Twitch API Tutorial

#react #javascript #webdev #tutorial

How many todo apps and calculators does the world need?

Learning to code is hard, which makes it tough to stay motivated sometimes. It doesn't help that most beginner tutorials are almost always the same rehashed projects that are not only boring to follow but won't help you get a job

IMO the best way to learn is mixing together things you enjoy to create something new. One example would be combining programming with gaming by using the Twitch API

I made this tutorial with beginners in mind. Once you're done with this tutorial you'll have a number of options available to extend the base project to make something unique for your own portfolio. Some examples of features you could add:

create a real time dashboard of stats using a charting library and making API calls every minute to update the view counts
create a profile route and embed the stream instead of linking directly to twitch https://dev.twitch.tv/docs/embed/
change up the styling on the cards used to display our data from the Twitch API
add some error handling to handle stuff like API limits or outages
add a loading component to wrap around our lists to show a loading icon until the API call has returned
break out some of the repeated logic like replacing the URLs and make a List component and Card Component for the repeated UI logic

This tutorial does assume you have some basic knowledge of ReactJS, so make sure you've at least gone through the main Reactjs Getting Started Guide and understand the basic concepts of React like JSX, state management, and how to work with components.

When you're done feel free to leave a link to your project so others can see what you made.

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (3)

Darren Evans • Apr 5 '21 • Edited

The way I'm jazzing up the fun factor is by incorporating other things to code for that interest me such as gaming and Marvel comics via these APIs:

developer.marvel.com/
develop.battle.net/

Abhinav Sharma • Jul 19 '19 • Edited

Do you mind if I made a post with textual representation for visual tutorial ? for me personally, reading is more impactful than audio visual content, it has an upper hand for beginners.

Renaissance Engineer • Jul 19 '19

Sure! feel free to put your own twist on it and add or change features if you want. Just link back and say your post was based on or inspired by my tutorial or something. I'll link back to yours as well for people who might prefer a text version too

Is Your CI/CD Server a Prime Target for Attack?

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. It makes sense—CI/CD servers have access to source code, a highly valuable asset. Is yours secure? Check out nine practical tips to protect your CI/CD.

Learn more