У меня большие проблемы с отображением моего компонента React на простой странице HTML с использованием сервера Express Node.js. У меня нет ошибки кода , но на странице ничего не отображается , потому что HTML id="root" не заполнен компонентом React, который я обслуживаю через свой index.js.
Это мой index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<!-- Using our react -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script type="text/babel" src="./src/index.js"></script>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="./manifest.json" />
<!-- Importing bootstrap -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<title>CISC Grader</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Это мой index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
<div>Hello</div>
</React.StrictMode>,
document.getElementById('root')
);
а это мой server.js
// Built-in Node.js modules
let fs = require('fs');
let path = require('path');
// Third-party Node.js modules
let express = require('express');
// Express App
let public_dir = path.join(__dirname, 'public');
// let port = 80; // production port
let port = 8000; // test/debug port
let app = express();
app.use(express.static(public_dir));
//response with index file
app.get('/', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
app.listen(port, () => {
console.log("Now listening on port " + port);
});