无法让 React JS hello world 工作

Question

<<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>React JS</title>
 <script src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
 <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
 <script src=" https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
 <div id="ex"></div>
 <script type="text/babel">
  ReactDOM.render(<h1>Hello</h1>,document.getElementById('ex'));
 </script>
</body>
</html>

我无法使这个介绍示例正常工作。每当我运行这段代码时，我都会在我的 browser.Please 帮助中得到一个“<”。

Answer 1

检查脚本的加载顺序，您正在加载 babel-core 异步..您还看到 < 因为语法错误 <<!DOCTYPE html>，应该是<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>React JS</title>
 <script src=" https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
 <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
</head>
<body>
 <div id="ex"></div>
 <script type="text/babel">
  ReactDOM.render(<h1>Hello</h1>,document.getElementById('ex'));
 </script>
</body>
</html>

Answer 2

问题：只显示 `<`

原因：

<<!DOCTYPE html>

上的错字

解决方案：

移除<

问题：未显示呈现的内容

原因：

async script 属性当 async 存在时，脚本与页面的其余部分异步执行。意味着浏览器在 babel 有机会转换 jsx

之前已经呈现了您的页面

解决方案：

从script中删除async并且defer也是不必要的

无法让 React JS hello world 工作

Unable to get React JS hello world working

jsx

reactjs

babeljs

问题：只显示 `<`

原因：

解决方案：

问题：未显示呈现的内容

原因：

解决方案：

无法让 React JS hello world 工作

Unable to get React JS hello world working

jsx

reactjs

babeljs

问题：只显示 <

原因：

解决方案：

问题：未显示呈现的内容

原因：

解决方案：

问题：只显示 `<`