In This Blog, you will have the complete knowledge and source code of CRUD application in React JS, in which we perform all the insert, update, delete and read operations in our React CRUD application.
CRUD App Using AXIOS API, React Router, Bootstrap
Our CRUD App looks like:
We Need To Install these things in our React App
- Axios For API work
- React Router Library For Routing
- Bootstrap For enhancement of User Interface
- useNavigate Hook For Navigation
CRUD Stands For
- C – Create
- R – Read
- U – Update
- D – Delete
We are using mockAPI to insert, update, delete and read data from API, so first you have to create account on mockAPI website then register there and then create an API.
Source Code
index.html File Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
index.js File Code
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
app.js File Code
import logo from './logo.svg';
import './App.css';
import Create from './components/Create';
import { Routes, Route } from 'react-router-dom';
import Read from './components/Read';
import Edit from './components/Edit';
function App() {
return (
<div className="container">
<Routes>
<Route exact path='/' element={<Read/>}></Route>
<Route exact path='/create' element={<Create/>}></Route>
<Route exact path='/edit' element={<Edit/>}></Route>
</Routes>
</div>
);
}
export default App;
Read.js File Code – Display Data Page
import axios from 'axios'
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
function Read() {
const [apiData, setApiData] = useState([])
function getData() {
axios.get('https://63b3f7299f50390584a2c2aa.mockapi.io/crud')
.then((response) => {
setApiData(response.data);
}).catch((err) => {
console.log(err)
});
}
function handleDelete(id) {
axios.delete(`https://63b3f7299f50390584a2c2aa.mockapi.io/crud/${id}`)
.then(() => {
getData();
}).catch((err) => {
console.log(err)
});
}
function setDataToStorage(id, name, age, email){
localStorage.setItem('id',id);
localStorage.setItem('name',name);
localStorage.setItem('age',age);
localStorage.setItem('email',email);
}
useEffect(() => {
getData();
}, [])
return (
<>
<div className='row'>
<div className='col-md-12'>
<div className='mb-2 mt-2'>
<Link to='/create'>
<button className='btn btn-primary'>Create New Data</button>
</Link>
</div>
<table className='table table-bordered table-striped table-dark table-hover'>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
<th>EMAIL</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
{
apiData.map((item) => {
return (
<>
<tr>
<td>{item.id}</td>
<td>{item.e_name}</td>
<td>{item.e_age}</td>
<td>{item.e_email}</td>
<td>
<Link to='/edit'>
<button className='btn btn-primary' onClick={() => setDataToStorage(item.id, item.e_name, item.e_age, item.e_email)}>Edit</button>
</Link>
</td>
<td>
<button className='btn btn-danger' onClick={() => { if (window.confirm('Are You Sure To Delete Data ??')) { handleDelete(item.id) } }}>Delete</button>
</td>
</tr>
</>
)
})
}
</tbody>
</table>
</div>
</div>
</>
)
}
export default ReadCreate.js File Code – Insert Form
import axios from 'axios';
import React, { useState } from 'react'
import { useNavigate, Link } from 'react-router-dom';
function Create() {
const [name, setName] = useState('');
const [age, setAge] = useState('');
const [email, setEmail] = useState('');
const navigate = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
axios.post('https://63b3f7299f50390584a2c2aa.mockapi.io/crud', {
e_name: name,
e_age: age,
e_email: email
}).then(() => {
navigate('/');
}).catch((err) => {
console.log(err)
});
}
return (
<>
<div className='row'>
<div className='col-md-4'>
<div className='mb-2 mt-2'>
<Link to='/'>
<button className='btn btn-primary'>Read Data</button>
</Link>
</div>
<div className='bg-primary p-4 text-center'>
<h1>Create Data</h1>
</div>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label>Enter Name: </label>
<input type='text' placeholder='Name' className='form-control' onChange={(e) => setName(e.target.value)} />
</div>
<div className='form-group'>
<label>Enter Age: </label>
<input type='number' placeholder='Age' onChange={(e) => setAge(e.target.value)} className='form-control' />
</div>
<div className='form-group'>
<label>Enter Email: </label>
<input type='email' placeholder='Email' onChange={(e) => setEmail(e.target.value)} className='form-control' />
</div>
<br />
<div className='d-grid'>
<input type='submit' value='Submit' className='btn btn-primary' />
</div>
</form>
{name}
<br />
{age}
<br />
{email}
</div>
</div>
</>
)
}
export default CreateEdit.js File Code
import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom';
function Edit() {
const [id, setId] = useState(0);
const [name, setName] = useState('');
const [age, setAge] = useState('');
const [email, setEmail] = useState('');
const navigate = useNavigate();
useEffect(() => {
setId(localStorage.getItem('id'));
setName(localStorage.getItem('name'));
setAge(localStorage.getItem('age'));
setEmail(localStorage.getItem('email'));
}, [])
const handleUpdate = (e) => {
e.preventDefault();
axios.put(`https://63b3f7299f50390584a2c2aa.mockapi.io/crud/${id}`,{
e_name: name,
e_age: age,
e_email: email
}).then(() => {
navigate('/');
}).catch((err) => {
console.log(err)
});
}
return (
<>
<div className='row'>
<div className='col-md-4'>
<div className='mb-2 mt-2'>
<Link to='/'>
<button className='btn btn-primary'>Read Data</button>
</Link>
</div>
<div className='bg-primary p-4 text-center'>
<h1>Update Data</h1>
</div>
<form onSubmit={handleUpdate}>
<div className='form-group'>
<label>Enter Name: </label>
<input type='text' value={name} onChange={(e) => setName(e.target.value)} placeholder='Name' className='form-control' />
</div>
<div className='form-group'>
<label>Enter Age: </label>
<input type='number' value={age} onChange={(e) => setAge(e.target.value)} placeholder='Age' className='form-control' />
</div>
<div className='form-group'>
<label>Enter Email: </label>
<input type='email' value={email} onChange={(e) => setEmail(e.target.value)} placeholder='Email' className='form-control' />
</div>
<br />
<div className='d-grid'>
<input type='submit' value='Update' className='btn btn-primary' />
</div>
</form>
</div>
</div>
</>
)
}
export default EditDownload Source Code From Link Given Below
https://www.mediafire.com/file/m6dm263gydz8vrb/crud-app.rar/file
No responses yet