DEV Community

loading...
Cover image for React Typescript example Project with Axios and Web API

React Typescript example Project with Axios and Web API

Tien Nguyen
BezKoder.com
・4 min read

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:

Discussion (0)