Search code examples
javascriptreactjsreact-dom

React js not rendering hello world

<!DOCTYPE html>
<html lang = "en">
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    </head>
    <body>
        <div class="root"></div>
        <script type="text/babel">
            ReactDOM.render(
                    <h1>Hello,World!</h1>,
                    document.getElementById('root')
            );
        </script>
    </body>
</html>

The above code only produces a blank page looking at the console i don't see any errors.

Solution

  • Your element has a class called root. You need an element with an id called root:

    <div id="root"></div>

    DEMO

    EDIT: you will also need to add the babel-standalone module (see this previous SO answer).