Question

我是react.js的新手，我使用CDN链接将一些简单的react.js代码编译为我的html，但出现此错误：

“未捕获到的SyntaxError：意外令牌<”

然后我搜索了，然后看到有人说我应该补充：

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中进行编码。

Answer 1

如果您使用的是CDN，则需要的前两个是将React渲染为DOM，第三个（Babel）启用JSX和ES6。我已经重新排列了导入顺序，在导入react和react-dom之后，将cdn包括在babel中。

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

运行.html和.js文件时，我得到“未捕获的SyntaxError：意外令牌<”

1 个答案: