为什么简单的 React 项目不渲染？答案

【问题标题】：Why is simple React project not rendering?为什么简单的 React 项目不渲染？
【发布时间】：2017-10-16 02:39:40
【问题描述】：

我刚开始学习 React，但我似乎无法理解为什么 React 不会渲染它。我认为这与 React 和 Babel 库因更新更新而更改其链接有关，但我不确定。这是我所拥有的：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 </head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    ReactDOM.render(
      <h1>Testing</h1>, 
      document.querySelector("#container")
  );
  </script>
</body>

</html>

【问题讨论】：

您在控制台上看到任何错误吗？

标签： reactjs babeljs

【解决方案1】：

您的脚本来源略有偏差。下面的 HTML 代码应该可以正常工作。

请参阅the official React docs 了解更多信息。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@15.0.0/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.0.0/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>

  <body>
    <div id="container"></div>
  </body>

  <script type="text/babel">

    var Greeting = React.createClass({
      render: function() {
        return (
          <p>Hello, Universe</p>
        )
      }
    });

    ReactDOM.render(
      <Greeting/>,
      document.getElementById("container")
    );

  </script>

</html>

【讨论】：

【解决方案2】：

只需添加<meta charset="utf-8">到页面的<head>。

详情如下

您有一个控制台错误 Range out of order in character class 。我在 babel 问题 (#340) 和 Stack Overflow question on around same error 上遇到了这个 comment。只需添加

将<meta charset="utf-8"> 添加到页面的<head>，它将按预期为您工作。

【讨论】：

【解决方案3】：

由于您刚刚开始学习 React，我建议您使用 Facebook 自己的 create-react-app 基础项目来入门。安装过程已经很好地描述了here，所有需求都将被下载并安装。

【讨论】：