Introduction

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. The full documentation is available at https://reactjs.org/. In this tutorial I will show you how to delete the existing resource (REST API DELETE) using React JS framework. The article, ReactJS REST API DELETE Example, will use ready made available REST API https://jsonplaceholder.typicode.com/posts for testing purpose. You can also create and deploy your own service using PHP, Codeigniter or Spring, Jersey etc. and call using React JS framework.

You may also like to read ReactJS REST API GET Example ReactJS REST API POST Example ReactJS REST API PUT Example

Prerequisites

Knowledge of HTML and JavaScript

Example with Source Code

Now we will see step by step how to implement the example using React JS or React framework.

Creating React Application

Please read the tutorial Create React JS Application before moving forward.

Deleting Generated Files

Now delete everything from the directory /react-rest/src but do not delete src directory.

Creating Controller Class

Create RestController.js file under src directory with below content. Notice that you need to import the required module or component such as import React from ‘react’. I have also declared user array to fill with REST response data from https://jsonplaceholder.typicode.com/posts.

You can learn about componentDidMount() here at https://reactjs.org/docs/react-component.html.

The DELETE URI deletes an existing resource in the server. Here we will delete the post that has an id 1.

import React from 'react';

class RestController extends React.Component {
	constructor(props) {
		super(props);
	}
	
	componentDidMount() {
		fetch('https://jsonplaceholder.typicode.com/posts/1', {
			method: 'DELETE'
		});
	}
	render() {                            
		return (
			<div>
				<p><b>Resource deleted in the server</b></p>
			</div>
		)
	}
}

export default RestController;

Export the RestController at the end of the RestController class so that we can use this class in other modules such as we have used it in below index.js file.

Creating View File

Finally create index.js file under src directory to start up the application.

Here we have called <RestController /> component and writing the output of the RestController to the div id marked as “root”.

Open the file /react-rest/src/public/index.html, you will find a div with “root” id. Update the title in this file as “React – REST API DELETE Example”.

import React from 'react';
import ReactDOM from 'react-dom';
import RestController from './RestController'
ReactDOM.render(
	<RestController />,
	document.getElementById('root')
);

Testing the Application

Now execute the command npm start from command prompt and you will see the response data after creating the new resource in the server from https://jsonplaceholder.typicode.com/posts in browser at http://localhost:3000.

Final result on browser:

Resource deleted in the server
react rest delete

Thanks for reading.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *