我从React"入门"中复制了代码。 codepen,它不呈现

时间:2017-09-22 11:40:50

标签: javascript reactjs

我完全复制了React提供的代码示例"入门"主页,它呈现一个没有错误的空白屏幕。

以下代码与此处的代码相同:https://codepen.io/gaearon/pen/ZpvBNJ

与codepen不同,我不会渲染任何东西....为什么?

的index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
    <script scr="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
    <script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel" src="js/app.js"></script>
</head>
<!--______________________________________________________BEGIN APP-->

<body>
    <div id="root">
        <!-- This div's content will be managed by React. -->
    </div>
</body>
<!--______________________________________________________END APP-->

</html>

App.js

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

1 个答案:

答案 0 :(得分:0)

使用此html页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>