Reactjs – Retrieving data from database between client and server

Answer 1/3

So how do I let axios.get(http://localhost:3000/getData) in my App.js
know that the getData, is in the Database.jsx, and how do I make the
Database.jsx to actually listen on income on the given URL?

Re: This is the point. To let the API call, axios.get(http://localhost:3000/getData) to find the API code is in Database.jsx and also to make code inside Database.jsx listens to the incoming API call, you need an additional piece of software. ExpressJS is an easy and quick solution here. Just in a few lines of code, you can make it ready. Please see an example code below.

package.json

{
  "dependencies": {
    "express": "^4.20.0"
  }
}

server.js

const express = require('express');
const app = express();

app.get('/getData', (req, res) => {
  res.send('some dummy data');
});

app.listen(3000, () => console.log('l@3000'));

Install the dependencies

npm install // this will install express

Running the server

node server.js // this will run the server we created above

Testing the server

Request url : http://localhost:3000/getdata , type it in the browser
Response : some dummy data
Status : The basic server works fine.

Answer 3/3

which seems similar to what I want, but the guy who explains, uses
express. What confuses me, is that he’s creating another server with
express, that is listening. But doesn’t reach have its on sever built
in? As you can see in my: axios.get(http://localhost:3000/getAdmins),
React is already listening, so I’m confused why I should make another
server with express?

Re: React does not have this capability. It is just a frontend application library. Do not worry. Now with the same server we created above, your same React app will work and fetch data. Please see the same code below.

server.js

const express = require('express');
const { Client } = require('pg');
const cors = require('cors');

const app = express();
app.use(cors());

let client;

app.get('/getData', (req, res) => {

  client.query('SELECT * FROM movie', (err, result) => {
    if (err) {
      res.sendStatus(500).send(err);
      return;
    }
    const rows = result.rows;
    res.send(rows);
  });
});

app.listen(4000, () => {

  console.log('l@4000');
  client = new Client({
    user: 'postgres',
    host: 'localhost',
    database: 'postgres',
    password: 'test',
    port: 5432,
  });
  client.connect();
});

App.js

import { Button } from 'react-bootstrap';
import axios from 'axios';

export default function App() {
  const getData = async () => {
    console.log('Clicked');

    axios
      .get(`http://localhost:4000/getData`)
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };

  return (
    <div className="contentDiv">
      <Button onClick={() => getData()}>Show</Button>
    </div>
  );
}

Test run:

node server.js // this will start the backend server
node start // this will start the React app

Clicking on show button:
The data accessed from the database, and shown in the console as below.

I don’t mind if I must use axios, fetch or any other tool to achieve
this, just what you can help with. Thanks

Re: axios or the built-in fetch function can be used.

Notes:

1. You may face some issues with creating the appropriate directories to host the frontend app and the backend server as it has not been clarified in this post. You may please post your comment in this regard, shall help based on it.
2. Please note the change in port number. The reference to the port 3000 has been changed to 4000.