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 React, { } from "react";
import Home from './components/Home';
function App() {
return (
<div className="App">
<Home />
</div>
);
}
export default App;
C:\react-js\my-app\src\components\Home.js
//C:\react-js\my-app\src\components\Home.js
import React, { useState } from 'react';
import List from './List';
import axios from 'axios';
const Home = () => {
const [userField, setUserField] = useState({
name: "",
email: "",
password: ""
});
const changeUserFieldHandler = (e) => {
setUserField({
...userField,
[e.target.name]: e.target.value
});
//console.log(userField);
}
const [loading,setLoading]=useState()
const onSubmitChange = async (e) => {
e.preventDefault();
try {
const responce= await axios.post("http://localhost:3001/create", userField);
console.log(responce)
setLoading(true);
} catch (err) {
console.log("Something Wrong");
}
}
if(loading){
return <Home/>
}
return (
<div className="container">
<h2 className='w-100 d-flex justify-content-center p-3'>React JS Node JS Express Add and Fetch all data from mysql database | Axios</h2>
<div className='row'>
<div className='col-md-4'>
<h3>Add Your Detail</h3>
<form>
<div className="mb-3 mt-3">
<label className="form-label"> Full Name:</label>
<input type="text" className="form-control" id="name" placeholder="Enter Your Full Name" name="name" onChange={e => changeUserFieldHandler(e)} />
</div>
<div className="mb-3 mt-3">
<label className="form-label">Email:</label>
<input type="email" className="form-control" id="email" placeholder="Enter email" name="email" onChange={e => changeUserFieldHandler(e)} required/>
</div>
<div className="mb-3 mt-3">
<label className="form-label">Password:</label>
<input type="text" className="form-control" id="password" placeholder="Enter password" name="password" onChange={e => changeUserFieldHandler(e)} required/>
</div>
<button type="submit" className="btn btn-primary" onClick={e => onSubmitChange(e)}>Add User</button>
</form>
</div>
<div className='col-md-8'>
<List />
</div>
</div>
</div>
)
};
export default Home;
C:\react-js\my-app\src\components\List.js
//C:\react-js\my-app\src\components\List.js
import React, { useState, useEffect } from 'react';
import axios from 'axios'
const List = () => {
const [userData, setUSerData] = useState([]);
useEffect(() => {
fetchData();
}, [])
const fetchData = async () => {
try {
const result = await axios("http://localhost:3001/users");
//console.log(result.data);
setUSerData(result.data)
} catch (err) {
console.log("somthing Wrong");
}
}
return(
<div className="container">
<h3>User Details</h3>
<table className="table table-bordered">
<thead>
<tr>
<th>S No.</th>
<th>Full Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{
userData.map((user, i) => {
return (
<tr key={i}>
<td>{i + 1}</td>
<td>{user.name} </td>
<td>{user.email} </td>
</tr>
)
})
}
</tbody>
</table>
</div>
);
};
export default List;
Install axios https://github.com/axios/axios
Installing the Axios Client
$ npm install axios
C:\reactdev\myreactdev>npm install axios
react-js\my-app\public\index.html
//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/
https://expressjs.com/
Express JS
Fast, unopinionated, minimalist web framework for Node.js
Install
$ npm install express --save
PS C:\nodeproject> npm install express --save
https://expressjs.com/en/starter/hello-world.html
run
PS C:\nodeproject> node index.js
////index.js
const express = require("express");
const app = express();
const mysql = require("mysql"); // https://github.com/mysqljs/mysql npm install mysqljs/mysql
const cors = require("cors"); //https://www.npmjs.com/package/cors npm i cors
//const port = 3000
app.use(cors());
app.use(express.json());
const db = mysql.createConnection({
user: "root",
host: "localhost",
password: "",
database: "nodejsdb",
});
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.post("/create", (req, res) => {
const name = req.body.name;
const email = req.body.email;
const password = req.body.password;
db.query(
"INSERT INTO users (name, email, password) VALUES (?,?,?)",
[name, email, password],
(err, result) => {
if (err) {
console.log(err);
} else {
res.send("You have registered successfully!");
}
}
);
});
app.get("/users", (req, res) => {
db.query("SELECT * FROM users", (err, result) => {
if (err) {
console.log(err);
} else {
res.send(result);
}
});
});
app.get("/userdetails/:id", (req, res) => {
const id = req.params.id;
db.query("SELECT * FROM users WHERE id = ?", id, (err, result) => {
if (err) {
console.log(err);
} else {
res.send(result);
}
});
});
app.put("/update", (req, res) => {
const id = req.body.id;
const name = req.body.name;
db.query(
"UPDATE users SET name = ? WHERE id = ?",
[name, id],
(err, result) => {
if (err) {
console.log(err);
} else {
res.send(result);
}
}
);
});
app.delete("/delete/:id", (req, res) => {
const id = req.params.id;
db.query("DELETE FROM users WHERE id = ?", id, (err, result) => {
if (err) {
console.log(err);
} else {
res.send(result);
}
});
});
//app.listen(port, () => {
// console.log(`Example app listening on port ${port}`)
//})
app.listen(3001, () => {
console.log("Yey, your server is running on port 3001");
});
Install Requirements mysql
https://github.com/mysqljs/mysql
$ npm install mysql
PS C:\nodeproject>npm install mysql
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
