Loading data from APIs in React

ReactJS is a brilliant framework to work in, and something that I get asked a lot by people new to the framework is how best to deal with loading data from an external source, such as an API. In today’s 10 minute video I show you how to create a component that can fetch data from an API and render it onto the page.

You’ll learn about the React lifecycle and which method is best for making HTTP requests, how to use the fetch API to get JSON from an API, and how to deal with errors as well as successful responses.

PS: it’s definitely worth making the video fullscreen or viewing on Youtube so you can see things more clearly.


If you’d like to play with this code, you can find the repository on GitHub, and look out for the follow up episode in a few weeks where we look at some libraries that can make fetching external data much nicer.



Don't miss my latest course on Testing React with Enyzme and Jest! The first five videos are free and available to watch now. You'll learn how to write testable React code, test complex components and use Jest and Enzyme effectively to write clean, thorough tests. Get started now.


Subscribe to keep up to date with the latest content.

Join the JS Playground mailing list to be kept up to date with the latest tutorials, screencasts and more. You won't be spammed and you can unsubscribe at any time.


Headshot of Jack Franklin

Jack is JavaScript and React developer in London. He's also a keen Elm enthusiast, conference speaker and tweets far too often.