Node.JS，ExpressJS，React和HTML JSON呈现

Question

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

首先，这是我的工作目录（很乱）：

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

server.js代码（我在listFinal变量中获得了一个JSON对象，其中我的餐厅的所有信息都被这两个网站上的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中“ retrive”我的变量listFinal使其通过<ul>和<li>标签呈现为li。

Answer 1

如以上注释中所述，您正在尝试通过单个React文件运行JSX，您想要做的是通过npx create-react-app client创建一个React应用，该应用会将请求发送到服务器端代码。因此，我修改了您的代码，并使用concurrenlty来同时运行服务器端和客户端，这是通过更改服务器端的package.json来完成的。

Node.JS，ExpressJS，React和HTML JSON呈现

问题描述投票：0回答：1

1个回答

最新问题

Node.JS，ExpressJS，React和HTML JSON呈现

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1