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 { useState } from "react";
import Axios from "axios";
import './App.css';
function App() {
const [name, setName] = useState("");
const [email, setEmail] = useState(0);
const [password, setPassword] = useState("");
const [msg, setMsg] = useState("");
const [error, setError] = useState("");
const addUser = () => {
if(name !== "" && email !== "" && password !== ""){
Axios.post("http://localhost:3001/create", {
name: name,
email: email,
password: password,
})
.then((response) => {
setMsg(response.data);
console.log(response.data);
}).catch((err) =>{
setError(err.data);
console.log(err.data);
});
}else{
setError("All fields are required!");
}
};
let imgs = [
'https://as2.ftcdn.net/v2/jpg/03/39/70/91/1000_F_339709132_H9HSSTtTmayePcbARkTSB2qoZTubJ6bR.jpg',
];
return (
<>
<div className="container" style={{paddingTop: 60}}>
<div className="container-fluid h-custom">
<div className="row d-flex justify-content-center align-items-center h-100">
<div className="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
<form>
<div className="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
<p className="lead fw-normal mb-0 me-3">Create Your Account</p>
</div>
<p>
{
msg !== "" ?
<span className="success">{msg}</span> :
<span className="error">{error}</span>
}
</p>
<div className="form-outline mb-4">
<input
type="text"
className="form-control form-control-lg"
placeholder="Enter Name"
onChange={(event) => {
setName(event.target.value);
}}
/>
<label className="form-label">Name</label>
</div>
<div className="form-outline mb-4">
<input
type="email"
className="form-control form-control-lg"
placeholder="Enter a valid email address"
onChange={(event) => {
setEmail(event.target.value);
}}
/>
<label className="form-label">Email address</label>
</div>
<div className="form-outline mb-3">
<input
type="password"
className="form-control form-control-lg"
placeholder="Enter password"
onChange={(event) => {
setPassword(event.target.value);
}}
/>
<label className="form-label">Password</label>
</div>
<div className="d-flex justify-content-between align-items-center">
<div className="form-check mb-0">
<input className="form-check-input me-2" type="checkbox" value=""/>
<label className="form-check-label">
Remember me
</label>
</div>
<a href="#" className="text-body">Forgot password?</a>
</div>
<div className="text-center text-lg-start mt-4 pt-2">
<button type="button" className="btn btn-primary btn-lg" onClick={addUser}>Sign Up</button>
<p className="small fw-bold mt-2 pt-1 mb-0">Login to your account <a href="#" className="link-danger">Login</a></p>
</div>
</form>
</div>
<div className="col-md-9 col-lg-6 col-xl-5">
<img src={imgs[0]} className="img-fluid"/>
</div>
</div>
</div>
</div>
</>
);
}
export default App;
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.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('/', (req, res) => {
res.send('Hello World!')
})
//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
