未捕获的 SyntaxError：意外的标记 '<' (React)

Question

I am trying to make a React project without Node and I am calling a JS file from a HTML file.我正在尝试制作一个没有 Node 的 React 项目，并且我正在从 HTML 文件中调用一个 JS 文件。 I am just trying to make a simple example to learn.我只是想做一个简单的例子来学习。 For some reasons I am getting Uncaught SyntaxError: Unexpected token '<'error in JS file.由于某些原因，我收到 Uncaught SyntaxError: Unexpected token '<'error in JS file。 I am using Tomcat to run this project locally and this project will be used locally only (computers won't be having internet).我正在使用 Tomcat 在本地运行该项目，并且该项目将仅在本地使用（计算机将无法上网）。 I am new to react so please enlighten me.我是新手，所以请赐教。

HTML file HTML 文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="ISO-8859-1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Local</title>

  
</head>

<body>

<link href="./js/bootstrap.min.css" rel="stylesheet" type="text/css">
  
  <script src="./js/jquery.min.js" type="text/javascript"></script>

  <div id="root">Loading....</div>

  <script src="./Component/RootComponent.js"></script>
  

  <script  src="./js/react.development.js"></script>
  <script  src="./js/react-dom.development.js"></script>
  <script  src="./js/babel.js"></script>


</body>

</html>

JS file JS文件

class RootComponent extends React.Component{
    
    render() { 
        return (
            <>
        <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
          <ul>
            <li>Instagram</li>
            <li>WhatsApp</li>
            <li>Oculus</li>
          </ul>
        </div>
        </>
      );
      } 
    }
// Create a function to wrap up your component
function App(){
  return(
  <div>
    <RootComponent name="@luispagarcia on Dev.to!"/>
  </div>
  )
}

ReactDOM.render(
    <App />,
    document.querySelector('#root')
  )

Answer 1

See the documentation .请参阅文档。

You need to tell the browser (and the client-side babel compiler) that your script is not JS needs compiling with babel by setting type="text/babel"您需要通过设置type="text/babel"告诉浏览器（和客户端 babel 编译器）您的脚本不是 JS 需要使用 babel 编译

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

I strongly recommend setting up a local compiler instead of using browser-side babel.我强烈建议设置本地编译器而不是使用浏览器端的 babel。

未捕获的 SyntaxError：意外的标记 '<' (React)

问题描述

1 个解决方案

解决方案1
0 2022-01-12 14:50:16

未捕获的 SyntaxError：意外的标记 '&lt;' (React)

问题描述

1 个解决方案

解决方案1 0 2022-01-12 14:50:16

未捕获的 SyntaxError：意外的标记 '<' (React)

解决方案1
0 2022-01-12 14:50:16