Learn Android Apps Development Tutorial: Begining to Advance

Complete curd operation in react with json server and axios and router-dom

Step 1: create a react project and install bellow package :

npm i axios

npm i react-router-dom

npm i json-server

create a db.json file and do code bellow

{
  "users": [
    {
      "name": "subham kumar",
      "email": "subham@gmail.com",
      "id": 1
    }
  ]
}

Step 2: now watch your json server with bellow command

json-server --watch db.json --port 3033

Step 3: do coding “App.js”

import './App.css';
import Home from './Curd_App/Home';
import Create from './Curd_App/Create';
import Update from './Curd_App/Update';
import Read from './Curd_App/Read';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter, Routes, Route } from 'react-router-dom'

//    About Project :
//    ============> This is example of curd operation in react js only,
// with axios and json server and router dom .so install these 3 npm 
//package : axios,react router dom, and json server
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>
  );
}

Step 4:create a folder as name “Curd_App" in side src folder

In side curd_App we have all Component for curd operation

“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 [id, setid] = useState()
    const navigate = useNavigate()
    function handleDelete(id) {
        const confirm = window.confirm("Do you like to Delete?");
        if (confirm) {
            axios.delete('http://localhost:3033/users/' + id)
                .then(res => {
                    alert("Record Deleted");
                    setid(0)
                    navigate('/')
                })
        }
    }
    useEffect(() => {
        axios.get('http://localhost:3033/users')
            .then(res => setData(res.data))
            .catch(err => console.log(err))
    }, [id])

    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' 
                                 onClick={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>
    )
}

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:3033/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 onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="name">Name:</label>
                    <input type="text" name='name' className='form-control'
                    onChange={e => setInputData({...inputData, name: e.target.value})}/>
                </div>
                <div>
                    <label htmlFor="email">Email:</label>
                    <input type="email" name='email' className='form-control'
                    onChange={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 from 'react'
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
function Update() {


    const { id } = useParams();

    const [inputData, setInputData] = useState({
        id: id,
        name: '',
        email: ''
    })
    const navigate = useNavigate();

    useEffect(() => {
        axios.get('http://loca00000lhost:3033/users/' + id)
            .then(0	``res => setInputData(res.data))
            .catch(err => console.log(err))
    }, [])

    const handleSubmit = (event) => {
        event.preventDefault();
        axios.put('http://localhost:3033/users/' + id, inputData)
            .then(res => {
                alert("Data Updated 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 onSubmit={handleSubmit}>
                    <div>
                        <label htmlFor="id">ID:</label>
                        <input type="number" disabled name='id' className='form-control' 
                         value={inputData.id}
                        />
                    </div>
                    <div>
                        <label htmlFor="name">Name:</label>
                        <input type="text" name='name' className='form-control' 
                         value={inputData.name}
                            onChange={e => setInputData({ ...inputData, name: e.target.value })} />
                    </div>
                    <div>
                        <label htmlFor="email">Email:</label>
                        <input type="email" name='email' className='form-control' 
                        value={inputData.email}
                            onChange={e => setInputData({ ...inputData, 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 {  useParams } from 'react-router-dom'

function Read() {
    const {id} = useParams()
    const [Data, setdata] = useState([])

    useEffect(() => {
        axios.get('http://localhost:3033/users/'+id)
        .then(res => setdata(res.data))
        .catch(err => console.log(err))
    }, [])

  return (
    <div className='container'>
        
            <div className='container p-5'>
            <p>{Data.id}</p>
            <p>{Data.name}</p>
            <p>{Data.email}</p>
            <Link to="/">Back</Link>
            </div>
    </div>
  )
}

export default Read

Step 5:now run your project

>npm start

Output:

   Statement st;
            ResultSet rs;
            Class.forName("com.mysql.jdbc.Driver");
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:4306/mydata", "root", "sandip@123");
            st = con.createStatement();
            String query = "select * from student";
            rs = st.executeQuery(query);

            out.println("<!DOCTYPE html>");
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Servlet ViewRecord</title>");
            out.println("</head>");
            out.println("<body>");
            out.println("<center>");

            out.println("<table cellspacing='0' width ='500px' border='1'>");
            out.println("<tr>");
            out.println("<td>   Name :</td>");
            out.println("<td>   Address :</td>");
            out.println("<td>   Update:</td>");
            out.println("<td>   Delete:</td>");
            out.println("</tr>");
            while (rs.next()) {
                String name = rs.getString("name");
                String address = rs.getString("address");

                out.println("<tr>");
                out.println("<td>   " + name + " :</td>");
                out.println("<td>   " + address + " :</td>");
                out.println("<td> <a href='Edit2?name=" + rs.getString("name") + "'>Edit</a> </td>");
                out.println("<td> <a href='Delete?name=" + rs.getString("name") + "'>Delete</a> </td>");

                out.println("</tr>");
            }
            out.println("</center>");
            out.println("</body>");
            out.println("</html>");

Last Updated on : 30th Oct 2024 20:21:53 PM

Complete curd operation in react with json server and axios and router-dom

Latest Update