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:
- Retrieve all Tutorials:
- Click on Edit button to update an item:
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
- Search Tutorials by title:
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:
- Express, Sequelize & MySQL
- Express, Sequelize & PostgreSQL
- Express & MongoDb
- Spring Boot & MySQL
- Spring Boot & PostgreSQL
- Spring Boot & MongoDB
- Spring Boot & H2
- Spring Boot & Cassandra
- Spring Boot & Oracle
- Django & MySQL
- Django & PostgreSQL
- Django & MongoDB
Component Diagram
Now look at the React components that we're gonna implement:
– 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
I'm gonna explain it briefly.
-
package.json contains 5 main modules:
react
,typescript
,react-router-dom
,axios
&bootstrap
. -
App
is the container that hasRouter
& 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:
- React + Spring Boot + MySQL: CRUD example
- React + Spring Boot + PostgreSQL: CRUD example
- React + Spring Boot + MongoDB: CRUD example
- React + Node.js + Express + MySQL: CRUD example
- React + Node.js + Express + PostgreSQL example
- React + Node.js + Express + MongoDB example
- React + Django + Rest Framework example
Serverless with Firebase:
- React Firebase CRUD with Realtime Database
- React Firestore CRUD App example | Firebase Cloud Firestore
Integration:
Top comments (0)