Console error while running react js sample web app

问题

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.

回答1:

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

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>

回答2:

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

来源：https://stackoverflow.com/questions/39062894/console-error-while-running-react-js-sample-web-app

标签

javascript

google-chrome

reactjs

jsx