Mern Stack:HTML 正在加载,但 React 没有编译



好的,我在这里没有收到错误消息或任何东西,但我正在尝试使用 node 启动一个反应应用程序,并且只发送了 Html。 我在这里错过了什么吗?

我试过


<script type="text/babel" src="../src/index.js"></script>

解决方案,但它仍然拒绝执行索引.js。

索引.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="public/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="public/manifest.json" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Parker Call</title>
</head>
<body>
<script type="text/babel" src="../src/index.js"></script>
<div id="root"></div>
</body>
</html>

服务器.js:


const express = require("express");
const validator = require("express-validator");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const session = require("cookie-session");
const expressSession = require("express-session");
const path = require("path");
const port = process.env.PORT || 80;
let app = express()
.use(bodyParser.urlencoded({ extended: false }))
.use(bodyParser.json())
.set('view engine','ejs')
.use(express.static("views"))
.use(cookieParser())
// .use(expressSession({
//     secret : 'soooosecret',
//     resave : true,
//     saveUninitialized : false
// }))
.use(session({keys: ['secretkey1', 'secretkey2', '...']}))
app.use(express.static(path.join(__dirname, 'react-bootstrap-test', 'views')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'views', 'public', 'index.html'))
});

app.listen(port);
console.log('Server running at 80');

索引.js:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

它应该给我一个反应应用程序,但它只是一个空白页。

index.js 文件,通过脚本标记导入

<script type="text/babel" src="../src/index.js"></script>

包含JSX而不是Javascript。

这是浏览器不理解的东西,所以需要翻译成Javascript。

根据您的设置,您可能有一个构建命令,该命令将采用 JSX,捆绑在 React 库中,并为您提供一个可以在您的页面中愉快地工作的文件。

如果您无法生成构建,那么启动和运行的最快方法是包含来自CDN的React和React DOM库(有关更多详细信息,请参阅此页面(以及Babel,它将处理从JSX到JavaScript的转译。

使用您提供的示例,如果我将以下三个脚本导入添加到您的索引.html,那么我可以看到正确的输出。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>

请注意,如果您正在执行此方法并使用任何其他第三方库(例如 moment.js(,那么您也需要将这些库包含在索引.html中。

最新更新