React Typescript example Project with Axios and Web API
Tags: react, typescript, webdev, todayilearned
Published: 2021-07-09 02:05:47

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/](https://bezkoder.com/react-typescript-axios/)

<h2>Overview of React Typescript example Project</h2>
We will build a React Tutorial Application with Axios and Web API in that:
<ul>
	<li>Each Tutorial has id, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials.</li>
	<li>There is a Search bar for finding Tutorials by title.</li>
</ul>

Here are screenshots of our React CRUD Application.

- Create a Tutorial:

![react-typescript-project-axios-crud-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghx3aup4ubqhp0t8wtke.png)

- Retrieve all Tutorials:

![react-typescript-project-axios-crud-retrieve-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e35otqv6j7mbeclyboj.png)

- Click on <strong>Edit</strong> button to update an item:

![react-typescript-project-axios-crud-retrieve-one-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz4kycb55482my1ovpgs.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong> using <strong>Publish</strong> button</li>
	<li>delete the item using <strong>Delete</strong> button</li>
	<li>update the item details with <strong>Update</strong> button</li>
</ul>

![react-typescript-project-axios-crud-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/868evjw8rk8fddc0uqmr.png)

- Search Tutorials by title:

![react-typescript-project-axios-crud-search-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xdaouu020sove7i4stl.png)

This React Client consumes the following Web API:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>POST</td>
<td>/api/tutorials</td>
<td>create new Tutorial</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials</td>
<td>retrieve all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials/:id</td>
<td>retrieve a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>PUT</td>
<td>/api/tutorials/:id</td>
<td>update a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials/:id</td>
<td>delete a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials</td>
<td>delete all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials?title=[keyword]</td>
<td>find all Tutorials which title contains <code>keyword</code></td>
</tr>
</tbody>
</table>
</div>

You can find step by step to build a Server like this in one of these posts:
- <a href="https://bezkoder.com/node-js-express-sequelize-mysql/">Express, Sequelize & MySQL</a>
- <a href="https://bezkoder.com/node-express-sequelize-postgresql/">Express, Sequelize & PostgreSQL</a>
- <a href="https://bezkoder.com/node-express-mongodb-crud-rest-api/">Express & MongoDb</a>
- <a href="https://bezkoder.com/spring-boot-jpa-crud-rest-api">Spring Boot & MySQL</a>
- <a href="https://bezkoder.com/spring-boot-postgresql-example/">Spring Boot & PostgreSQL</a>
- <a href="https://bezkoder.com/spring-boot-mongodb-crud/">Spring Boot & MongoDB</a>
- <a href="https://bezkoder.com/spring-boot-jpa-h2-example/">Spring Boot & H2</a>
- <a href="https://bezkoder.com/spring-boot-cassandra-crud/">Spring Boot & Cassandra</a>
- <a href="https://bezkoder.com/spring-boot-hibernate-oracle/">Spring Boot & Oracle</a>
- <a href="https://bezkoder.com/django-crud-mysql-rest-framework/">Django & MySQL</a>
- <a href="https://bezkoder.com/django-postgresql-crud-rest-framework/">Django & PostgreSQL</a>
- <a href="https://bezkoder.com/django-mongodb-crud-rest-framework/">Django & MongoDB</a>

<h2>Component Diagram</h2>
Now look at the React components that we're gonna implement:

![react-typescript-project-axios-crud-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvxhzgymwmppkujegker.png)

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

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

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

<h2>Technology</h2>
<ul>
	<li>React 17/16</li>
	<li>react-router-dom 5</li>
	<li>axios 0.21.1</li>
	<li>bootstrap 4.6.0</li>
</ul>

<h2>Project Structure</h2>
![react-typescript-project-axios-crud-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdjxbz921tw2lakuncs0.png)

I'm gonna explain it briefly.

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

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

Or using Hooks instead React Components:
[React Hooks Typescript with API call example](https://bezkoder.com/react-typescript-api-call/)

## Further Reading
Fullstack:
- <a href="https://bezkoder.com/react-spring-boot-crud/">React + Spring Boot + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/spring-boot-react-postgresql/">React + Spring Boot + PostgreSQL: CRUD example</a>
- <a href="https://bezkoder.com/react-spring-boot-mongodb/">React + Spring Boot + MongoDB: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-mysql/">React + Node.js + Express + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-postgresql/">React + Node.js + Express + PostgreSQL example</a>
- <a href="https://bezkoder.com/react-node-express-mongodb-mern-stack/">React + Node.js + Express + MongoDB example</a>
- <a href="https://bezkoder.com/django-react-axios-rest-framework/">React + Django + Rest Framework example</a>

Serverless with Firebase:
- <a href="https://bezkoder.com/react-firebase-crud/">React Firebase CRUD with Realtime Database</a>
- <a href="https://bezkoder.com/react-firestore-crud/">React Firestore CRUD App example | Firebase Cloud Firestore</a>

Integration:
- <a href="https://bezkoder.com/integrate-reactjs-spring-boot/">Integrate React with Spring Boot</a>
- <a href="https://bezkoder.com/integrate-react-express-same-server-port/">Integrate React with Node.js Express</a>