In this article, I am describing, how to create a local JSON server and perform CRUD operation using React-JS Project.
Step1st:
Create React Project
npx create-react-app projectname
Step 2nd:-
Create db.json file under public folder and write this code
{
"posts": [
{
"id": 1,
"name": "Satheesh",
"email": "Sat@mail.com",
"adderss": "South street"
},
{
"id": 2,
"name": "John",
"email": "john@mail.com",
"adderss": "North street"
},
{
"id": 3,
"name": "Robert",
"email": "robert@mail.com",
"adderss": "East street"
},
{
"id": 4,
"name": "Mani",
"email": "mani@mail.com",
"adderss": "West street"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}
Step 3rd:-
Install JSON Server under same project
npm install -g Json-server
Step 4th:-
Open Command Prompt under public folder and write following command
json-server –-watch db.json --port 3001
Step5th:-
Create Component to Access GET API using Fetch and Write this code
import React from "react";
export default class Restapiget extends React.Component
{
constructor(props)
{
super(props);
this.state = {tdata:[]}
}
componentDidMount() {
fetch('http://127.0.0.1:3001/posts')
.then(res => res.json())
.then((data) => {
this.setState({ tdata: data })
console.log(this.state.tdata)
})
.catch(console.log)
}
render(){
return(<div>
<table border='1'>
<tr><th>UserId</th><th>Name</th><th>Email</th><th>Address</th></tr>
{this.state.tdata.map((person,i)=>
<tr key={i}>
<td>{person.id}</td>
<td>{person.name}</td>
<td>{person.email}</td>
<td>{person.adderss}</td>
<td>Edit</td>
<td>Delete</td>
</tr>)}
</table>
</div>)
}
}
Create RESTFUL API for POST
import React from "react";
export default class Restapipost extends React.Component
{
constructor(props)
{
super(props);
this.state = {tdata:''}
}
componentDidMount() {
fetch('http://127.0.0.1:3001/posts',{
method: 'POST',
body: JSON.stringify({
id:'5',
name:'mno',
email:'1023',
adderss:'Test address'
}),
headers:{"content-type":"application/json; charset=UTF-8"}
}).then(res => res.json())
.then((data) => {
console.log(data)
this.setState({tdata:data})
}).catch(console.log)
}
render(){
return(<div>
<h1>{this.state.tdata.id}</h1>
</div>)
}
}
Create RESTFULT API for UPDATE
import React from "react";
export default class Restapiput extends React.Component
{
constructor(props)
{
super(props);
this.state = {tdata:''}
}
componentDidMount() {
fetch('http://127.0.0.1:3001/posts/'+5,{
method: 'PUT',
body: JSON.stringify({
name:'klmn',
email:'klmn@gmail.com',
adderss:'Test address'
}),
headers:{"content-type":"application/json; charset=UTF-8"}
}).then(res => res.json())
.then((data) => {
console.log(data)
this.setState({tdata:'update success'})
}).catch(console.log)
}
render(){
return(<div>
<h1>{this.state.tdata}</h1>
</div>)
}
}
Create RESTFULL API for Delete:-
import React from "react";
export default class Restapidelete extends React.Component
{
constructor(props)
{
super(props);
this.state = {tdata:''}
}
componentDidMount() {
fetch('http://127.0.0.1:3001/posts/'+5,{
method: 'DELETE'
});
}
render(){
return(<div>
<h1>Delete Success</h1>
</div>)
}
}
POST Answer of Questions and ASK to Doubt