How To Make API calls in React Applications — TypeScript Version

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 (Written in Typescript) 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 project. We need to have a NodeJS installed on your machine to install React-based dependencies. We need an editor to write the code. We are using a VSCode as an editor. There…