时间戳

首页 > 解决方案 > 为什么 JSX 不运行而 React 可以正常工作

javascript - 为什么 JSX 不运行而 React 可以正常工作

问题描述

我想说的第一件事是我显然是 React 的新手。我按照他们在他们的网站上所说的那样进行了设置，即使对于 JSX 也是如此。

当我粘贴他们的代码时它会运行，但是当我添加 JSX 时它根本不起作用。我的电脑上也有node.js，我已经重试了几次，但没有办法。控制台说：未捕获的SyntaxError：预期的表达式，得到 '<'。

如果有人知道为什么这不起作用，那将非常有帮助。这是我的代码：

HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./index.css">
    <link href="https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>
<body>

    <div id="back-body">
        <div id="main-canvas">
            <div id="root"></div>
        </div>
    </div>

    <!--React-->
    <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>
    <!--Babel-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>

JS 文件：

'use strict';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

非常感谢！:)

编辑

看完这个视频我发现了问题：https ://youtu.be/ahh65GQz74g

基本上，我没有正确设置 Babel，因为我没有正确放置文件夹。另外，我将 Babel 脚本留在了我的 HTML 中，它不应该存在。如果其他人来到这里遇到同样的问题，我建议完全按照该视频所说的去做。

感谢大家的帮助！

标签： javascriptreactjsjsx

解决方案

将以下属性添加到您的最终脚本标签应该可以解决问题：

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

重要的是要注意，这对于生产环境来说不是一个好的做法，因为客户端编译很慢而且很浪费，所以你应该考虑预编译你的脚本并相应地设置你的项目。

更新：尝试将 babel 的源代码修改为以下内容：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

推荐阅读