运行反应时在控制台中出现意外令牌错误 \'<\'答案

【问题标题】：Getting unexpected token error '<' in console while running react运行反应时在控制台中出现意外令牌错误 \'<\'
【发布时间】：2023-02-14 03:01:59
【问题描述】：

运行反应代码时出现意外的令牌错误

       <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Add React in One Minute</title>
      </head>
      <body>
      <h2>Add React in One Minute</h2>
      <div id="root"></div>
      <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script>
    const root = ReactDOM.createRoot(
      document.getElementById('root')
    );
    root.render(<h1>Hello, world!</h1>);
    </script>
       
  </body>
 </html>

[React官网][1]

我正在尝试从官方 React 网站运行 React 代码，但出现意外的令牌错误，

【问题讨论】：

JSX 不是有效的 JavaScript，因此需要将其转换为有效的 JS。您可以使用 babel 之类的工具将其转换为有效代码。
我从未使用过 babel，所以我该怎么做？
您是否使用了 create-react-app，或者这只是一个普通的 html 文件？
使用 babel 进行转换并且有效——“使用严格”； const root = ReactDOM.createRoot(document.getElementById('root')); root.render( /*#__PURE__*/React.createElement("h1", null, "Hello, world!"));
你可以（现在）你可以单独使用 Babel：babeljs.io/docs/en/babel-standalone

标签： reactjs

【解决方案1】：

你需要 Babel 来使用 JSX。只需将此标记添加到您的页面：

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

现在你可以通过添加type="text/babel" 属性在任何标签中使用 JSX。

这种方法非常适合学习和创建简单的演示。但是，它会使您的网站变慢并且不适合生产。对于生产，你应该使用 NPM 安装 Babel：

转到终端中的项目文件夹，并粘贴以下两个命令：

第 1 步：运行npm init -y

第 2 步：运行npm install babel-cli@6 babel-preset-react-app@3

唯一的要求是有节点.js安装在您的计算机上。

【讨论】：

这也需要：reactjs.org/docs/…否则会出现错误信息