Я новичок в веб-разработке и разрабатываю веб-приложение, используя сначала Node.JS для сбора информации о ресторанах с двух веб-сайтов ( Maitres Restaurateurs и Guide Michelin ), затем ExpressJS, чтобы начать приложение. Я использую функцию res.sendFile() для отображения моей страницы HTML, затем res.json() для отправки файла JSON на странице HTML.
Во-первых, вот мой рабочий каталог (это беспорядок):
src
├server.js
├index.html
├server-side
├bib.js
├jsx
├react.jsx
server.js код (где я получаю в переменной listFinal объект JSON со всей информацией о моих ресторанах, списанной с кукловода на двух сайтах. Это было сделано благодаря 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 отображается только мой огромный JSON, хранящийся в переменной listFinal. Список имеет длину (или размер) 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 и go на localhost: 8000 /, я получаю это:
Как вы можете видеть, есть заголовок <h1> не отображается, оба обычно отображаются с React и HTML. Кроме того, я не знаю, как " получить " мою переменную listFinal в HTML, чтобы отобразить ее как li с тегами <ul> и <li>.