当我运行我的 .html 和 .js 文件时，我得到“Uncaught SyntaxError: Unexpected token <”答案

【问题标题】：i get "Uncaught SyntaxError: Unexpected token <" when i run my .html and .js file当我运行我的 .html 和 .js 文件时，我得到“Uncaught SyntaxError: Unexpected token <”
【发布时间】：2019-09-20 00:46:55
【问题描述】：

我是 react.js 的新手，我使用 CDN 链接将一些简单的 react.js 代码编译到我的 html 中，但我得到了这个错误：

"Uncaught SyntaxError: Unexpected token

然后我搜索，我看到有人说我应该添加：

type="text/babel" or type="text/jsx"

到我的脚本标签，我做到了，但在那之后，我的 html 不知道我的 .js 文件！

这是我的html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="fa">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title> title </title>
</head>

<body> 

  <div id="app"> </div>

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

  <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>

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

</body>
</html>

这是我的 react.js 文件：

'use strict';

class MyComponent extends React.Component{ 
    render()
    {
      return  "hello";
    }
}

ReactDOM.render(
  <MyComponent/> , document.getElementById('app')
);

请帮助我在 react.js 中编写代码。

【问题讨论】：

请查看此帖子stackoverflow.com/questions/40407632/…
how to render a react component using ReactDOM Render的可能重复

标签： html reactjs jsx

【解决方案1】：

如果你使用 CDN，前两个需要将 React 渲染成 DOM，第三个（babel）启用 JSX 和 ES6。我已经重新排序了导入，在导入 react 和 react-dom 后包含了 babel 的 cdn。

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="app"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    'use strict'
    class Application extends React.Component {
     render() {
      return(
          <div>React App</div>
      );
     }
    }

    ReactDOM.render(<Application />, document.getElementById('app'));
  </script>
</body>
</html>

【讨论】：

谢谢，当我将 react.js 代码放入带有
是的，你可以，你的目录结构是什么？你的js在哪里？
我的 .js 文件和我的 .html 文件在同一个文件夹中。 react\file.html 和 react\file.js。我该怎么办？
把这个<script type="text/babel" src="myreact.js"> </script>改成<script type="text/babel" src="./myreact.js"> </script>
如果我的回答对您有帮助，请采纳 :) 提前致谢 :)