https://expressjs.com/
Express JS
Fast, unopinionated, minimalist web framework for Node.js
Install
$ npm install express --savev PS C:\nodeproject> npm install express --save
https://expressjs.com/en/starter/hello-world.html
https://mongoosejs.com/docs/
npm install mongoose --save
cors
CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.
https://www.npmjs.com/package/cors
PS C:\nodeproject>npm i cors
run PS C:\nodeproject> node index.js
//index.js
const express = require('express')
const mongoose = require('mongoose')
const cors = require('cors')
const UserModel = require('./User')
const app = express()
app.use(cors())
app.use(express.json())
mongoose.connect('mongodb://127.0.0.1/nodeexpressdb',{
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(db => console.log('DB is connected'))
.catch(err => console.log(err));
app.get('/', (req, res) => {
UserModel.find()
.then(users => res.json(users))
.catch(err => res.json(err))
})
app.get('/get/:id', (req, res) => {
const id = req.params.id
UserModel.findById({_id: id})
.then(post => res.json(post))
.catch(err => console.log(err))
})
app.post('/create', (req, res) => {
UserModel.create(req.body)
.then(user => res.json(user))
.catch(err => res.json(err))
})
app.put('/update/:id', (req, res) => {
const id = req.params.id;
UserModel.findByIdAndUpdate({_id: id}, {
name: req.body.name,
email: req.body.email,
age: req.body.age
}).then(user => res.json(user))
.catch(err => res.json(err))
})
app.delete('/deleteuser/:id', (req, res) => {
const id = req.params.id;
UserModel.findByIdAndDelete({_id: id})
.then(response => res.json(response))
.catch(err => res.json(err))
})
app.listen(3001, () => {
console.log("Server is Running");
})
User.js
//User.js
const mongoose = require('mongoose')
const UserSchema = new mongoose.Schema({
name: String,
email: String,
age: Number
})
const UserModel = mongoose.model("users", UserSchema)
module.exports = UserModel;
React JS https://create-react-app.dev/
Create Project
C:\react-js>npx create-react-app my-app
Run
C:\react-js\my-app> npm start
C:\react-js\my-app\src\App.js
//C:\react-js\my-app\src\App.js
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Users from './components/Users'
import CreateUser from './components/CreateUser'
import UpdateUser from './components/UpdateUser'
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Users />}></Route>
<Route path='/create' element={<CreateUser />}></Route>
<Route path='/edit/:id' element={<UpdateUser />}></Route>
</Routes>
</BrowserRouter>
)
}
export default App
C:\react-js\my-app\src\components\Users.js
//C:\react-js\my-app\src\components\Users.js
import axios from "axios";
import React, { useEffect, useState } from 'react'
import { Link, useParams, useNavigate } from "react-router-dom";
function Users() {
const {id} = useParams()
const [data, setData] = useState([])
const navigate = useNavigate()
useEffect(()=> {
axios.get('http://localhost:3001/')
.then(res => {
console.log(res);
setData(res.data);
})
.catch(err => console.log(err));
}, [])
const handleDelete = (id) => {
axios.delete('http://localhost:3001/deleteuser/'+id)
.then(res => {
console.log(res)
navigate('/')
}).catch(err => console.log(err))
}
return (
<div className="d-flex vh-100 bg-primary justify-content-center align-items-center">
<div className="w-50 bg-white rounded p-3">
<Link to="/create" className="btn btn-success btn-sm">
Add +
</Link>
<table className="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
data.map((user, index) => {
return <tr key={index}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.age}</td>
<td>
<Link to={`/edit/${user._id}`} className="btn btn-sm btn-success me-2">Update</Link>
<button onClick={() => handleDelete(user._id)} className="btn btn-sm btn-danger">Delete</button>
</td>
</tr>
})
}
</tbody>
</table>
</div>
</div>
);
}
export default Users;
C:\react-js\my-app\src\components\CreateUser.js
//C:\react-js\my-app\src\components\CreateUser.js
import axios from "axios";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
function CreateUser() {
const [name, setName] = useState()
const [email, setEmail] = useState()
const [age, setAge] = useState()
const navigate = useNavigate()
const handleSubmit = (e) => {
e.preventDefault()
axios.post('http://localhost:3001/create', {name, email, age})
.then(res => {
console.log(res);
navigate('/')
})
.catch(err => console.log(err))
}
return (
<div className="d-flex vh-100 bg-primary justify-content-center align-items-center">
<div className="w-50 bg-white rounded p-3">
<form onSubmit={handleSubmit}>
<h2>Add User</h2>
<div className="mb-2">
<label htmlFor="">Name</label>
<input
type="text"
placeholder="Enter Name"
className="form-control"
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mb-2">
<label htmlFor="">Email</label>
<input
type="email"
placeholder="Enter Email"
className="form-control"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-2">
<label htmlFor="">Age</label>
<input
type="text"
placeholder="Enter Age"
className="form-control"
onChange={(e) => setAge(e.target.value)}
/>
</div>
<button className="btn btn-success">Submit</button>
</form>
</div>
</div>
);
}
export default CreateUser;
C:\react-js\my-app\src\components\UpdateUser.js
//C:\react-js\my-app\src\components\UpdateUser.js
import axios from "axios";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
function UpdateUser() {
const {id} = useParams()
const [name, setName] = useState()
const [email, setEmail] = useState()
const [age, setAge] = useState()
useEffect(()=> {
const fetchData = async() => {
try {
const response = await axios.get("http://localhost:3001/get/"+id);
console.log(response);
setName(response.data.name)
setEmail(response.data.email)
setAge(response.data.age)
} catch(err) {
console.log(err)
}
}
fetchData();
}, [])
const navigate = useNavigate()
const handleUpdate = (e) => {
e.preventDefault()
axios.put('http://localhost:3001/update/'+id, {name, email, age})
.then(res => {
console.log(res);
navigate('/')
})
.catch(err => console.log(err))
}
return (
<div className="d-flex vh-100 bg-primary justify-content-center align-items-center">
<div className="w-50 bg-white rounded p-3">
<form onSubmit={handleUpdate}>
<h2>Update User</h2>
<div className="mb-2">
<label htmlFor="">Name</label>
<input
type="text"
placeholder="Enter Name"
className="form-control"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mb-2">
<label htmlFor="">Email</label>
<input
type="email"
placeholder="Enter Email"
className="form-control"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-2">
<label htmlFor="">Age</label>
<input
type="text"
placeholder="Enter Age"
className="form-control"
value={age}
onChange={(e) => setAge(e.target.value)}
/>
</div>
<button className="btn btn-success">Update</button>
</form>
</div>
</div>
);
}
export default UpdateUser;
Install axios https://github.com/axios/axios
Installing the Axios Client
$ npm install axios
C:\reactdev\myreactdev>npm install axios
Install React Router Dom
https://www.npmjs.com/package/react-router-dom
C:\react-js\myreactdev>npm i react-router-dom --save
//react-js\my-app\public\index.html
<!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 rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Run C:\react-j\my-app>npm start http://localhost:3000/
