Console error while running react js sample web ap

2019-07-14 09:19发布

站内问答 / JavaScript
1092 2 4

I am new to React js and was trying my hands on a very simple hello react kinda web app. But while running, ended up at below error in console.

Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.

Browser: Chrome version 46.0.24

html code:

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

Can anyone please point out what could possibly be going wrong.

Thanks in advance.

2条回答
神经病院院长
2楼-- · 2019-07-14 09:41

You links are broken. Use these updated links

Use domain cdnjs.cloudflare.com instead of 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
查看更多
0人赞 添加讨论(0) 举报
Viruses.
3楼-- · 2019-07-14 09:44

First of all, the cdns you are using for the library files are unreachable.

Unreachable CDNs

From the React Docs page these are the working links for the 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

Second, there should be comma after <h1>Hello React!</h1> that separates what should be rendered to where .

So your code should look like this:

<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)