How To Make API calls in React Applications

A Beginner’s Guide with both Fetch and Axios APIs

In web applications, all the data you show on the page should reside somewhere, for example, cache, database, storage account, etc. You need to fetch the data from the different sources and do some processing and then render the data on the UI. All the data can be accessed through APIs nowadays and most of the time the format would be in the JSON format.

In this post, we will see how to make API calls in React applications using Fetch and Axios. You can do API calls with either of these.

• Prerequisites
• Example Project
• Running The API
• Running The React UI
• Project Structure and Development Environment
• Call The API with Fetch
• Call The API with Axios
• Demo
• Summary
• Conclusion

Prerequisites

There are some prerequisites for this article. You need to have NodeJS installed on your laptop and know-how HTTP works. If you want to practice and run this on your laptop you need to have these on your machine.

• NodeJS