Node.JS, ExpressJS, React and HTML JSON rendering

Question

I am a beginner in web dev and I am developping a web app using firstly Node.JS to scrape restaurants informations from two websites (Maitres Restaurateurs and Guide Michelin), then ExpressJS to begin the app. I use res.sendFile() function to display my HTML page then res.json() to send a JSON file in the HTML page.

First, here is my work dir (It's a mess):

src
├server.js
├index.html
├server-side
 ├bib.js
├jsx
 ├react.jsx

server.js code (where i get in the listFinal variable a JSON object with all my restaurants informations scraped with puppeteer on the two website. It was done thanks to bib.js):

const express = require('express');
const app = new express();
const bib = require('./server-side/bib');
var listFinal = bib.get();

app.get('/', function (req, res) {
  res.sendFile('./index.html', {root: __dirname});
  res.send(listFinal);
});
  
app.listen(8000, function () {
  console.log('Example app listening on port 8000!');
});

The server is working good. However none of my HTML or my React code is working (I'm completly new to React). The only thing displayed on my HTML is my huge JSON stored in the variable listFinal. The list has a length (or size) of 50 and here is its structure:

[{"name": "Saperlipopette ",
  "url": "www.saperlipopette1.fr",
  "address": "9 place du Théâtre, Puteaux, 92800, France",
  "price_style": "36 - 65 EUR • Cuisine moderne",
  "phone": "+33 1 41 37 00 00"},
  ...]

My index.html code:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Session 3 Work - Axel Joly</title>
  <meta name="description" content="Bib gourmand + Maitre restaurateur scrappeur">
  <meta name="author" content="Axel Joly">

  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <h1>Welcome to the Bib Gourmand and Maitre Restaurateur list (made by Axel Joly):</h1>
  <div id="root">

    <ul id="list-rest">

    </ul>
  </div>
  <script src="./jsx/react.jsx"></script>
</body>
</html>

And my react.jsx code:

var React = require('react');
var ReactDOM = require('react-dom');

export class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to React!!</h1>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

As explained before, none of them are displayed. When I run node server.js and go to localhost:8000/, I've got this:

As you can see, there is no <h1> header rendered, both normally displayed with React and HTML. Also, I don't know how to "retrive" my variable listFinal in the HTML to render it as a li with <ul> and <li> tags.

That's probably because you haven't created a react-app and are trying to use jsx file to run the react code what you wanna do is create a react app via npx create-react-app client which would contain the client-side code then i would recommend using concurrently to run both the client-side and the server-side at the same time. ( i could set this up for you if you are willing to put the current code on codesandbox ) — Abdullah Abid
– Abdullah Abid, Commented Mar 16, 2020 at 19:57
@AbdullahAbid Hi ! Thanks for you comment, I tried your first recommendation but I was unable to do it. I made a github repo then a codesandbox. Here it is : codesandbox — Axel JOLY
– Axel JOLY, Commented Mar 17, 2020 at 14:40
fyi it's scraper (and scrape, scraped, scraping) not scrapper — DisappointedByUnaccountableMod
– DisappointedByUnaccountableMod, Commented May 1, 2021 at 16:05

Abdullah Abid · Accepted Answer · 2020-03-18 08:36:57Z

As mentioned in the above comment you are trying to run React via a single JSX file, what you want to do is to create a react app via npx create-react-app client which would send the request to your server-side code. So, i have modified your code and what i have done is used concurrenlty to run both the server-side and client-side at the same time, this is done by changing the package.json of the server-side.

"scripts": {
 "build": "next build",
 "start": "node index.js",
 "server": "node index.js",
 "client": "npm start --prefix client",
 "clientinstall": "npm install --prefix client",
 "dev": "concurrently \"npm run server\" \"npm run client\""
 }

The Next thing you want to do is send a request from your client side to your side,you can send do this by using axios

    GetData = async () => {
    try {
      let response = await Axios.get(`http://localhost:8000/`, {
        crossdomain: true
      });
   console.log(response.data); // This would log the data received from your server
   //Res of Code

you can check the working example here (I tried using codesandbox but i was experiencing some issues there so i uploaded it on Github instead)

so to run the run the project you would open your terminal and run the following commands

git clone https://github.com/AbdullahAbid87/APIExample.git
cd APIExample 
npm i   
cd client  
npm i  
cd ..  
npm run dev

(Note: if the request to the server-side does not go through , then it is probably a CORS issue ,Although this might not be ideal but the simplest way to solve it would be to download a browser extension called CORS Everywhere that should solve it right away)

Hope this Helps

Collectives™ on Stack Overflow

Node.JS, ExpressJS, React and HTML JSON rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related