user3400887 user3400887 - 3 months ago 55
Javascript Question

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.

Answer

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