Question

很抱歉提出这样一个具体问题，但我正在研究一个简单的教程，该教程将React与以下HTML一起引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Separate</title>
</script>
  </head>
  <body>
    <h1>Hello Separate</h1>
    <div id="app"></div>
  </body>
</html>

还有一个脚本，用于使用ReactDOM在内创建div id ="app"

ReactDOM.render(
    <p>Rendered by React</p>,
    document.getElementById("app")
  )

I've provided the code in a fiddle here:

我不明白为什么会收到错误Uncaught SyntaxError: Unexpected token <，但认为该错误来自ReactDOM.render函数，有人可以提供见解吗？谢谢！

Answer 1

您的代码有两个问题

第一

您的脚本不正确。根据{{3}}，您应该添加以下脚本，

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

第二

可能是在外部JS文件中编写JS代码。

从文档中

现在，您可以通过向其添加type =“ text / babel”属性，在任何<script>标签中使用JSX。

您只需将此script添加到您的HTML文件中，

<script type="text/babel">
  ReactDOM.render(
    <p>Rendered by React</p>,
    document.getElementById("app")
  )
</script>

docs

Answer 2

是的，您可能是对的，您可能需要更改：将Rendered by React更改为'Rendered by React'或"Rendered by React"

像这样：

ReactDOM.render(
    "<p>Rendered by React</p>",
    document.getElementById("app")
  )

您必须始终将文本或html括在“ ..”中

Answer 3

正如Emile Bergeron所述，您实际上是在编写JSX，因此您需要“构建” 或使用常规JavaScript转换代码。

但是，如果您仅使用JSFiddle，他们可以像这样为您转换代码。

transpile

如果您是在本地工作，则可以查看他们提到的create-react-app或babel和webpack来构建/捆绑文件。

ReactDOM未捕获的SyntaxError：意外的令牌<

3 个答案: