REST API at https://jsonplaceholder.typicode.com/posts for testing
src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
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 unt aut facere repellat provident occaecati excepturi optio reprehenderit',
userId: 10
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
}).then(response => {
return response.json()
}).then(json => {
this.setState({
user:json
});
});
}
render() {
return (
<div style={{padding: 20}}>
<p><h2>ReactJS REST API Post Request</h2></p>
<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;
