React Typescript example Project with Axios and Web API

Tien Nguyen - Jul 9 '21 - - Dev Community

In this tutorial, I will show you how to build a React Hooks CRUD Application to consume Web API with Axios, display and modify data with Router & Bootstrap.

Full Article: https://bezkoder.com/react-typescript-axios/

Overview of React Typescript example Project

We will build a React Tutorial Application with Axios and Web API in that:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • There is a Search bar for finding Tutorials by title.

Here are screenshots of our React CRUD Application.

  • Create a Tutorial:

react-typescript-project-axios-crud-create-tutorial

  • Retrieve all Tutorials:

react-typescript-project-axios-crud-retrieve-tutorial

  • Click on Edit button to update an item:

react-typescript-project-axios-crud-retrieve-one-tutorial

On this Page, you can:

  • change status to Published using Publish button
  • delete the item using Delete button
  • update the item details with Update button

react-typescript-project-axios-crud-update-tutorial

  • Search Tutorials by title:

react-typescript-project-axios-crud-search-tutorial

This React Client consumes the following Web API:

Methods Urls Actions
POST /api/tutorials create new Tutorial
GET /api/tutorials retrieve all Tutorials
GET /api/tutorials/:id retrieve a Tutorial by :id
PUT /api/tutorials/:id update a Tutorial by :id
DELETE /api/tutorials/:id delete a Tutorial by :id
DELETE /api/tutorials delete all Tutorials
GET /api/tutorials?title=[keyword] find all Tutorials which title contains keyword

You can find step by step to build a Server like this in one of these posts:

Component Diagram

Now look at the React components that we're gonna implement:

react-typescript-project-axios-crud-components

– The App component is a container with React Router. It has navbar that links to routes paths.

TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial's details based on :id.
AddTutorial component has form for submission new Tutorial.

– These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.

Technology

  • React 17/16
  • react-router-dom 5
  • axios 0.21.1
  • bootstrap 4.6.0

Project Structure

react-typescript-project-axios-crud-project-structure

I'm gonna explain it briefly.

  • package.json contains 5 main modules: react, typescript, react-router-dom, axios & bootstrap.
  • App is the container that has Router & navbar.
  • tutorial.type.ts exports ITutorialData interface.
  • There are 3 components: TutorialsList, Tutorial, AddTutorial.
  • http-common.ts initializes axios with HTTP base Url and headers.
  • TutorialDataService has methods for sending HTTP requests to the Apis.
  • .env configures port for this React CRUD App.

For steps and Github source code, please visit:
https://bezkoder.com/react-typescript-axios/

Or using Hooks instead React Components:
React Hooks Typescript with API call example

Further Reading

Fullstack:

Serverless with Firebase:

Integration:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .