CODEWITHSUNDEEP
javascriptreactjsreact-dom
Bipul Adh
Bipul Adh

Reputation: 113

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.

Upvotes: 1

Views: 316

Answers (3)

Raj Kumar Mishra
Raj Kumar Mishra

Reputation: 59

     <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script type="text/babel">
      const element=<h1>Hello,World</h1>;
        ReactDOM.render(
                element,
                document.getElementById('root')
        );
    </script>

Run above code, main problem with you code is you have used babel and havenot added js dependency.Moreover,your are getting element by id in js but class name is defined in html.

Upvotes: 0

Andy
Andy

Reputation: 63524

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).

Upvotes: 2

Ricky Nelson
Ricky Nelson

Reputation: 876

You said document.getElementById('root') but your element is a class. Your element should have an id of root: <div id="root"></div>.

Upvotes: 0

Related Questions