Node.JS、ExpressJS、React 和 HTML JSON 渲染答案

【问题标题】：Node.JS, ExpressJS, React and HTML JSON renderingNode.JS、ExpressJS、React 和 HTML JSON 渲染
【发布时间】：2020-06-27 22:20:09
【问题描述】：

我是网络开发的初学者，我正在开发一个网络应用程序，首先使用 Node.JS 从两个网站（Maitres Restaurateurs 和 Guide Michelin）scrape 餐厅信息，然后开始使用 ExpressJS应用程序。我使用 res.sendFile() 函数显示我的 HTML 页面，然后使用 res.json() 在 HTML 页面中发送 JSON 文件。

首先，这是我的工作目录（一团糟）：

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

server.js 代码（我在 listFinal 变量中得到一个 JSON 对象，其中包含我所有的餐厅信息scraped 与两个网站上的 puppeteer。感谢 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!');
});

服务器运行良好。但是我的 HTML 或我的 React 代码都没有工作（我对 React 完全陌生）。我的 HTML 上显示的唯一内容是存储在变量 listFinal 中的巨大 JSON。该列表的长度（或大小）为 50，其结构如下：

[{"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"},
  ...]

我的index.html 代码：

<!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>

还有我的react.jsx 代码：

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'));

如前所述，它们都不显示。当我运行 node server.js 并转到 localhost:8000/ 时，我得到了这个：

如您所见，没有呈现 <h1> 标头，通常都使用 React 和 HTML 显示。另外，我不知道如何在 HTML 中“检索”我的变量 listFinal 以将其呈现为带有 <ul> 和 <li> 标签的 li。

【问题讨论】：

这可能是因为您还没有创建 react-app 并且正在尝试使用 jsx 文件来运行反应代码您想要做的是通过 npx create-react-app client 创建一个反应应用程序，其中将包含客户端代码，那么我建议使用concurrently 同时运行客户端和服务器端。（如果您愿意将当前代码放在codesandbox 上，我可以为您设置）
@AbdullahAbid 嗨！感谢您的评论，我尝试了您的第一个建议，但我无法做到。我做了一个github repo，然后是一个codesandbox。这是：codesandbox
仅供参考，它是 scraper（和 scrape、scraped、scraping）而不是 scrapper

标签： javascript html node.js reactjs express

【解决方案1】：

正如上面评论中提到的，您试图通过单个 JSX 文件运行 React，您要做的是通过 npx create-react-app client 创建一个反应应用程序，它将请求发送到您的服务器端代码。所以，我修改了你的代码，我所做的是使用concurrenlty 同时运行服务器端和客户端，这是通过更改服务器端的package.json 来完成的。

"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\""
 }

接下来您要做的就是从客户端向您发送请求，您可以使用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

您可以查看工作示例here（我尝试使用代码沙箱，但在那里遇到了一些问题，所以我将其上传到 Github 上）

所以要运行项目，你需要打开终端并运行以下命令

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

(注意：如果对服务器端的请求没有通过，那么可能是CORS问题，虽然这可能不是理想的，但解决它最简单的方法是下载一个名为的浏览器扩展CORS Everywhere应该马上解决）

希望对你有帮助

【讨论】：