运行 React js 示例 Web 应用程序时出现控制台错误

Question

我是 React js 的新手，正在尝试一个非常简单的 hello react 有点像网络应用程序。但是虽然运行，但在控制台中出现以下错误。

为已经拥有影子根的元素调用 Element.createShadowRoot() 已被弃用。有关详细信息，请参阅 https://www.chromestatus.com/features/4668884095336448。

浏览器：Chrome 版本 46.0.24

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://cdnjs.cloudfare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script src="https://cdnjs.cloudfare.com/ajax/libs/react/0.14.7/react.js"></script>
        <script src="https://cdnjs.cloudfare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello React!</h1>
                document.getElementById('app')
            );
        </script>
    </body>
</html>

谁能指出可能出了什么问题。

提前致谢。

Answer 1

首先，您用于库文件的 cdns 无法访问。

来自 React Docs 页面的这些是 cdn:

的工作链接

https://npmcdn.com/react@15.3.1/dist/react.min.js

https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js

https://npmcdn.com/babel-core@5.8.38/browser.min.js

其次，在 <h1>Hello React!</h1> 之后应该有逗号，将 应该呈现的内容 分隔为哪里。

因此您的代码应如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
        <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
        <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello React!</h1>,
                document.getElementById('app')
            );
        </script>
    </body>
</html>

Answer 2

您的链接已损坏。使用这些更新的链接

使用域 cdnjs.cloudflare.com 而不是 cdnjs.cloudfare.com

https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js

运行 React js 示例 Web 应用程序时出现控制台错误

Console error while running react js sample web app

javascript

google-chrome

jsx

reactjs