ReactJS REST API POST Example

Introduction

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. In this tutorial I will show you how to create new resource via REST API POST request using React JS framework. Here I will use ready made available REST API at 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. Here you will see only HTTP POST example.

Related Posts:

Prerequisites

Knowledge of HTML and JavaScript, https://jsonplaceholder.typicode.com/posts, Create React JS Application

Project Directory

The name of the root project directory is react-rest-api-post. You may delete everything from the src directory.

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 later with REST response data from https://jsonplaceholder.typicode.com/posts.

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

The POST URI creates a new resource in the server and returns a response in the below format.

{
  id: , //id of the new post -> coming from server
  title: '', //title of the new post -> user has input
  body: '', //body of the new post -> user has input
  userId: //user id of the new post -> who input
}

Source code of the REST controller class is given below:

import React from 'react';

class RestController extends React.Component {
	constructor(props) {
		super(props);
		this.state = {user: []};
	}
	
	componentDidMount() {
		fetch('https://jsonplaceholder.typicode.com/posts', {
			method: 'POST',
			body: JSON.stringify({
				title: 'New title added',
				body: 'New body added. Hello body.',
				userId: 2
			}),
			headers: {
				"Content-type": "application/json; charset=UTF-8"
			}
		}).then(response => {
				return response.json()
			}).then(json => {
				this.setState({
					user:json
				});
			});
	}
	render() {                            
		return (
			<div>
				<p><b>New Resource created in the server as shown below</b></p>
				<p>Id : {this.state.user.id}</p>
				<p>Title : {this.state.user.title}</p>
				<p>Body : {this.state.user.body}</p>
				<p>UserId : {this.state.user.userId}</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.

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 POST API response to the div id marked as root.

Open the file src/public/index.html, you will find a div with root id. Update the title in this file as “React – REST API POST 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.

New Resource created in the server as shown below. Id : 101 Title : New title added Body : New body added. Hello body. UserId : 2.

Final result on the browser is shown below in the image:

Source Code

Download

Thanks for reading.

Roy Tutorials