Question

我刚开始学习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>

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

Answer 2

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

以下详细信息

您遇到控制台错误Range out of order in character class。我遇到了comment关于babel问题（#340）和Stack Overflow question on around same error的问题。只需添加

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

Answer 3

当你刚刚开始学习React时，我建议你使用Facebook本身的create-react-app基础项目来开始学习。安装过程已详细描述here，所有要求都将下载并安装。

为什么简单的React项目不呈现？

3 个答案: