CRUD Operation in React JS with JSON Server, Axios, Router

This is the source code of our YouTube video YouTube link is at the bottom of the page:

Just you should create a JSON file to fetch data from that and perform operations on that.

App.js

import React from 'react'

import { BrowserRouter, Routes, Route } from 'react-router-dom'

import Create from './Create'

import Home from './Home'

import Read from './Read'

import Update from './Update'

function App() {  return (    <BrowserRouter>        <Routes>            <Route path='/' element={<Home />}></Route>            <Route path='/create' element={<Create />}></Route>            <Route path='/update/:id' element={<Update />}></Route>            <Route path='/read/:id' element={<Read />}></Route>        </Routes>    </BrowserRouter>  )}
export default App

Home.js

import axios from 'axios'

import React from 'react'

import { useState } from 'react'

import { useEffect } from 'react'

import { Link, useNavigate } from 'react-router-dom'

function Home() {    const [data, setData] = useState([])    const navigate = useNavigate()    useEffect(()=> {        axios.get('http://localhost:3000/users')        .then(res => setData(res.data))        .catch(err => console.log(err))    }, [])
  return (    <div className='container '>        <h2>Crud App with JSON Server</h2>        <Link to="/create" className='btn btn-success my-3'>Create +</Link>        <table className='table'>            <thead>                <tr>                    <th>ID</th>                    <th>Name</th>                    <th>Email</th>                    <th>Action</th>                </tr>            </thead>            <tbody>                {data.map((d, i)=> (                    <tr key={i}>                        <td>{d.id}</td>                        <td>{d.name}</td>                        <td>{d.email}</td>                        <td>                            <Link className='text-decoration-none btn btn-sm btn-success'                                 to={/update/${d.id}}>Update</Link>                            <button className='text-decoration-none btn btn-sm btn-danger mx-1'                                 ={e => handleDelete(d.id)}>Delete</button>                            <Link className='text-decoration-none btn btn-sm btn-primary'                                 to={/read/${d.id}}>Read</Link>                        </td>                    </tr>                ))}            </tbody>        </table>
    </div>  )
  function handleDelete(id) {    const confirm = window.confirm("Do you like to Delete?");    if(confirm) {        axios.delete('http://localhost:3000/users/'+id)        .then(res => {            alert("Record Deleted");            location.reload();        })    }  }}
export default Home

Create.js

import axios from 'axios';

import React from 'react'

import { useState } from 'react'

import { useNavigate } from 'react-router-dom';

function Create() {    const [inputData, setInputData] = useState({        name: '',        email: ''    })    const navigate = useNavigate();
    const handleSubmit = (event) => {        event.preventDefault();        axios.post('http://localhost:3000/users', inputData)        .then(res => {            alert("Data Posted Successfully!")            navigate('/')        })    }  return (    <div className='d-flex w-100 vh-100 justify-content-center align-items-center'>        <div className='w-50 border bg-secondary text-white p-5'>            <form ={handleSubmit}>                <div>                    <label htmlFor="name">Name:</label>                    <input type="text" name='name' className='form-control'                    ={e => setInputData({...inputData, name: e.target.value})}/>                </div>                <div>                    <label htmlFor="email">Email:</label>                    <input type="email" name='email' className='form-control'                    ={e => setInputData({...inputData, email: e.target.value})}/>                </div><br />                <button className='btn btn-info'>Submit</button>            </form>        </div>    </div>  )}
export default Create

Update.js

import axios from 'axios';

import React, { useEffect, useState } from 'react'

import { useNavigate, useParams } from 'react-router-dom'

function Update() {    const {id} = useParams();    const [values, setValues] = useState({        id: id,        name: '',        email: ''    })    useEffect(()=> {        axios.get('http://localhost:3000/users/'+id)        .then(res => {            setValues({...values, name: res.data.name, email: res.data.email})        })        .catch(err => console.log(err))    }, [])    const navigate = useNavigate()
    const handleSubmit = (e) => {        e.preventDefault();        axios.put('http://localhost:3000/users/'+id, values)        .then(res => {            navigate('/');        })        .catch(err => console.log(err))    }
  return (    <div className='d-flex w-100 vh-100 justify-content-center align-items-center'>        <div className='w-50 border bg-secondary text-white p-5'>            <form ={handleSubmit}>                <div>                    <label htmlFor="name">Name:</label>                    <input type="text" name='name' className='form-control' placeholder='Enter Name'                     value={values.name} ={e => setValues({...values, name: e.target.value})}/>                </div>                <div>                    <label htmlFor="email">Email:</label>                    <input type="email" name='email' className='form-control' placeholder='Enter Email'                    value={values.email} ={e => setValues({...values, email: e.target.value})}/>                </div><br />                <button className='btn btn-info'>Update</button>            </form>        </div>    </div>  )}
export default Update

Read.js

import axios from 'axios'

import React from 'react'

import { useEffect } from 'react'

import { useState } from 'react'

import { Link } from 'react-router-dom'

import { useNavigate, useParams } from 'react-router-dom'

function Read() {    const {id} = useParams()    const navigate = useNavigate()    const [Data, setdata] = useState([])
    useEffect(() => {        axios.get('http://localhost:3000/users/'+id)        .then(res => setdata(res.data))        .catch(err => console.log(err))    }, [])
  return (    <div className='d-flex w-100 vh-100 justify-content-center align-items-center'>        <div className='w-50 border bg-secondary text-white p-5'>          <h3>User Detail</h3>            <div className=' text-white'>              <p>{Data.id}</p>              <p>{Data.name}</p>              <p>{Data.email}</p>              <Link to="/" className='btn btn-primary'>Back</Link>            </div>          </div>    </div>  )}
export default Read

YouTube link: