Fetching express data from react - reactjs

Question

I'm trying to create a simple register form by preparing the data in the back end, and inserting the data from my react form into the mysql database. I know that there are many tutorials out there for how to do this however, I'm trying to do it by myself my own way.
Therefore, when I try to fetch the data from the back end, it throws me an error. saying the resource isn't found. On my server, when I put in the path to view the data it informs me that the path isn't found even though I required it?
Also, I believe I'm a little confused on the process of how data can be fetched over relative paths. How is this possible if React is using a different port than what the server is using? Does the fetch for relative paths go purely based on your folder location of the data you're trying to fetch?
For react the port I'm using is 3000
for and for the server I'm using 5000
Here is my code:
Model:
var db = require('../dbconnection');
var register = {
registerAuth: function(data, callback){
db.query("insert sanames (id, fullName, email, confirmEmail, password, confirmPassword) values(newid(), '"+data.fullName+"', '"+data.email+"', '"+data.confirmEmail+"', '"+data.password+"', '"+data.confirmPassword+"')")
}
}
// db.query('insert sanames (id, fullName, email, confirmEmail, password, confirmPassword, dateAdded) values(newid(), "'data.fullName'", "'data.email'", "'data.confirmEmail'", "'data.password'", "'data.confirmPassword')")',callback)
module.exports = register;
Route:
var express = require('express');
var router = express.Router();
var register = require('../models/register');
router.post('/:registerAuth', function(req, res, next) {
register.registerAuth(req.body,function(err, rows) {
if (err) {
res.json(err);
} else {
res.json(rows);
}
});
});
module.exports = router;
App (Server):
var express = require('express');
var bodyParser = require('body-parser');
var mysql = require('mysql');
var path = require('path');
var port = 5000;
var app = express();
//app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use('/public', express.static(__dirname + "/public"));
var Register=require('./routes/register');
app.use('/register', Register);
app.listen(port, () => {
console.log(`Server is listening on ${port}`);
});
// app.get('/test', (req, res) => {
// res.send('Test');
// })
View:
import React from 'react';
import ReactDOM from 'react-dom';
import Header from '../../common/header';
class Register extends React.Component {
constructor(props){
super(props);
this.state = {
fullName: "",
email: "",
confirmEmail: "",
password: "",
confirmPassword: "",
formErrors: "",
success: ""
}
}
onChange(e){
this.setState({
[e.target.name]: e.target.value
});
};
onSubmit(e) {
// if(this.state.fullName !== '' || this.state.email || '' || this.state.confirmEmail !== '' || this.state.password !== '' || this.state.confirmPassword !== ''){
// if(this.state.password !== this.state.confirmPassword) {
// //console.log('passwords do not match');
// this.setState({
// formErrors: 'passwords do not match'
// });
// e.preventDefault();
// }
// if(this.state.email !== this.state.confirmEmail) {
// //console.log('email address must match');
// this.setState({
// formErrors: 'both email address must match'
// });
// e.preventDefault();
// }
// } else {
// //console.log('please fill out all fields');
// this.setState({
// formErrors: 'please fill out all fields'
// });
// e.preventDefault();
// }
e.preventDefault();
var data = {
fullName: this.state.name,
email: this.state.email,
confirmEmail: this.state.confirmEmail,
password: this.state.password,
confirmPassword: this.state.confirmPassword
}
fetch("/register", {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
}).then(function(response){
if(response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
}).then(function(data){
console.log(data);
if(data == "success"){
this.setState({sucess: 'User has been successfully registered'});
}
}).catch(function(err){
console.log(err);
});
}
render(){
return (
<div className="background-video">
<Header />
<div className="login-container">
<div className="login-wrapper">
<div className="loginfields-wrap">
{this.state.formErrors !== '' ? <div className="alert alert-danger" role="alert">{this.state.formErrors}</div> : ''}
<form
onSubmit={e => this.onSubmit(e)}
autoComplete="off"
method="POST"
action="/registeruser"
>
<input
type="text"
name="fullName"
className="form-control"
placeholder="First/Last Name"
value={this.state.fullName}
onChange={e => this.onChange(e)}
/>
<input
type="email"
name="email"
className="form-control"
placeholder="Email"
value={this.state.email}
onChange={e => this.onChange(e)}
/>
<input
type="email"
name="confirmEmail"
className="form-control"
placeholder="Confirm Email"
value={this.state.confirmEmail}
onChange={e => this.onChange(e)}
/>
<input
type="password"
name="password"
className="form-control"
placeholder="Password"
value={this.state.password}
onChange={e => this.onChange(e)}
/>
<input
type="password"
name="confirmPassword"
className="form-control"
placeholder="Confirm Password"
value={this.state.confirmPassword}
onChange={e => this.onChange(e)}
/>
<button type="submit" className="btn btn">Register</button>
</form>
</div>
</div>
</div>
</div>
);
}
}
export default Register;

Answer 1

I hope my answer helps, its a bit tough to answer.
First thing I did was change the fetch to the following:
fetch("http://localhost:5000/register"
At first attempt I got a CORS issues, so I installed the npm package:
https://www.npmjs.com/package/cors
You can setup a proxy in your package JSON file which will help connect your React App to the express server - this is one way of how the app will connect to your express server - Its not that they are in the same folder, you can setup a server in a different folder and still connect to it, try it out - if it helps with understanding it more clearly.
"proxy": "http://localhost:5000"
Hope this helps