Javascript 反应 Uncaught SyntaxError: Unexpected token '<' or Syntax error答案

【问题标题】：Javascript react Uncaught SyntaxError: Unexpected token '<' or Syntax errorJavascript 反应 Uncaught SyntaxError: Unexpected token '<' or Syntax error
【发布时间】：2020-03-13 09:45:49
【问题描述】：

我从 React 开始，我正在做一个 edX 课程的练习（不是为了认证，而是为了好玩）。该代码应该将按钮从反应类加载到 html 页面。

编辑：在其他示例中，代码已成功执行，因此我没有直接查看更改配置设置

我的脚本中有一个错误导致 .js 文件无法正确加载，我无法弄清楚它来自哪里。

我正在使用 VSCode 1.42.1 并在 Chrome 76.0 上进行调试。在 VSCode 中没有错误输出。在 Chrome 中实时加载时，我收到错误消息

Uncaught SyntaxError: Unexpected token '

我已尝试验证语法，但无法追踪错误。我尝试了什么： - 检查渲染和返回函数的语法 - 检查错误信息 - 重新创建脚本以排除编程错误 - 检查脚本参考

我可以使用一些帮助来查找错误或指出正确的方向。

Html 文件：fontchoosertest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="Fontchoose_container"></div>

    <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>
   <div>
    Here goes...
     <!--Programmed scripts-->
      <script src="./FontChooser.js" type="text/javascript"></script> 
    ....done
</div>
</body>
</html>

Javascript/ React 文件：FontChooser.js

class FontChooser extends React.Component {
    constructor(props) {
    super(props);

    this.state = {hideElement:true}
    this.text="Click on this part"
    this.size=10
    }

    render() {
    return(<div>
           <input type="checkbox" id="boldCheckbox" hidden={false}/>
           <button id="decreaseButton" hidden={false}>-</button>
           <span id="fontSizeSpan" hidden={false}>{this.props.size}</span>
           <button id="increaseButton" hidden={false}>+</button>
           <span id="textSpan" >{this.props.text}</span>
           </div>
    );
    }
}

'''

【问题讨论】：

你不能在没有转译的情况下做 jsx ()。使用 create-react-app :)
如果你只是玩玩——你可以使用 Web 客户端转译器——但这不是好的做法——并且不建议认真开发 + 部署到 prod——参见 babel.js文档reactjs.org/docs/add-react-to-a-website.html
我已经能够使用当前配置在 VSCode 中运行其他 React 组件。我知道我的设置正在运行。这不仅仅是顺便玩玩。我花了半天多的时间试图使这个例子工作。我真的在问一个关于代码语法的问题。

标签： javascript reactjs syntax-error

【解决方案1】：

此错误是因为浏览器无法读取从您的render 方法返回的JSX，所以每当它看到第一个打开JSX 标签 <

为了使用 JSX，你需要一个像 babeljs 这样的编译器

首先请注意JSX 是completely optional，没有它你仍然可以使用 React。更多信息请查看here。

请遵循以下结构：

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <!-- React container -->
    <div id="Fontchoose_container"></div>

    Here goes...
    <!--Programmed scripts-->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- DON'T use babel in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- You can use JSX in any <script> tag by adding type="text/babel" attribute to it. -->
    <script type="text/babel" src="./FontChooser.js"></script>
    ....done
  </body>
</html>

在您的 FontChooser.js

中

class FontChooser extends React.Component {
  constructor(props) {
    super(props);
    //...
  }

  render() {
    return(
       {/* JSX here */}
     );
  }
}
// Add this
ReactDOM.render( <FontChooser />, document.getElementById('Fontchoose_container'))

最后，您需要使用服务器打开此页面，例如VS Code LiveServer

重要提示：

这种方法非常适合学习和创建简单的演示。但是，它会使您的网站变慢并且不适合生产。当你准备好继续前进时，删除这个新标签和你添加的 type="text/babel" 属性。相反，在下一节中，您将设置一个 JSX 预处理器来自动转换所有标签。 Docs

换句话说，正如 @Kornflexx 提到的，只需使用 create-react-app :)

【讨论】：

这个答案帮助解决了这个问题。转编译器缺少脚本引用，并且 js 文件中缺少渲染调用我也同意@Kornflexx，一般来说最好使用 create-react-app。我正在寻找代码更正的原因是因为我还必须更正与练习有关的其他事情。对于运行代码，我还推荐使用 VS Code LiveServer。我一直在使用
很高兴你解决了这个问题。请注意，如果您关心 SEO，CRA 不是您的最佳选择，您可以考虑使用 Nextjs for SSR 或 Gatsby for SSG