时间戳

首页 > 解决方案 > mern 堆栈：html 正在加载，但反应没有编译

javascript - mern 堆栈：html 正在加载，但反应没有编译

问题描述

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

我试过了


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

解决方案，但它仍然拒绝执行 index.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>

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

index.js：


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


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

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

标签： javascriptnode.jsreactjsexpress

解决方案

您通过 script 标签导入的 index.js 文件

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

包含 JSX 而不是 Javascript。

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

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

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

使用您提供的示例，如果我将以下三个脚本导入添加到您的 index.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），那么您也需要在 index.html 中包含这些库。

推荐阅读