Interacting With RESTful API’s Using TypeScript, React hooks, and Axios.

Interacting With RESTful API’s Using TypeScript, React hooks, and Axios.

In TypeScript/JavaScript, we have an unopinionated library that can help us interact with RESTful APIs, Axios. In this article, we’ll look at the popular open-source library and how it compares with the native browser function(fetch) and we’ll discover the additional features that the open-source library has over fetch.

In TypeScript/JavaScript, we have an unopinionated library that can help us interact with RESTful APIs, Axios. In this article, we’ll look at the popular open-source library and how it compares with the native browser function(fetch) and we’ll discover the additional features that the open-source library has over fetch. We will also look at how we can interact with a REST API using function-based components.

Axios is a very popular promise-based HTTP client over fetch because it:

  • Allows cancelling of requests.
  • Allows request timeout.
  • Enjoys built-in XSRF protection.
  • Performs automatic transforms of JSON data.
  • Has wide browser support etc.

On the other hand, TypeScript is an open-source superset of JavaScript that can help us avoid painful bugs that developers commonly run into when writing JavaScript by type-checking the code. The type system increases the code quality, readability, and makes it easy to maintain and refactor the codebase. More importantly, errors can be caught at compile time rather than at runtime.

TypeScript has :

  • Over 14,000,000 weekly downloads on npm.
  • Over 65,000 stars on GitHub.
  • Over 1,700 releases to date.
  • Over 18,000 dependent packages.
  • And it’s been around for some good 8 years now.

We’ll need

First things first, let’s bootstrap a typescript and react project using create-react-app. Navigate to your projects folder or anywhere you want to place the project folder on your machine and run the command below.

npx create-react-app my-api --template typescript

Please note that I’ll keep using yarn for adding dependencies throughout this article. However, you should feel free to use npm.

Move into the project directory and add Axios. Note that Axios has got typescript types within it so we don’t have to install them separately.

yarn add axios

react react-hook axios typescript javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Build Meme Generator with React, React Hooks and TypeScript

The best way to learn something is by doing. It works even better if it means working on something for fun. So, how about learning about React, React hooks and TypeScript by building your own meme generator? This tutorial will show you how to do it.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

A Simple Todo List App built with TypeScript and React Hooks

This tutorial is to build your own todo list app. About code. You will use React and React hooks, mostly `useState` hook.

React Hooks Tutorial for Beginners: Getting Started With React Hooks

React hooks tutorial for beginners, learn React hooks step by step: Introduction, useState Hook, useState with previous state, useState with object, useState with array, useEffect Hook, useEffect after render, Conditionally run effects, Run effects only once, useEffect with cleanup, useEffect with incorrect dependency, Fetching data with useEffect, useContext Hook, useReducer Hook, useReducer, Multiple useReducers, useReducer with useContext, Fetching data with useReducer, useState vs useReducer, useCallback Hook, useMemo Hook, useRef Hook