CODEWITHSUNDEEP
javascripthtmlreactjs
himanshuIIITian
himanshuIIITian

Reputation: 6085

Not able to render a simple ReactDOM div

I am a newbie to ReactJS. I was trying yo render a simple div using ReactDOM but not able to do so. Here's my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="root">
    </div>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script>
      ReactDOM.render(
        <h1>Hello, world!</h1>,
          document.getElementById('root')
      );
    </script>
  </body>
</html>

Can anybody guide me as to why its happening ?

Note - I am using React 15.4.2 and Chrome version 57.

Upvotes: 0

Views: 709

Answers (2)

Enogwe Victor
Enogwe Victor

Reputation: 80

You need to add the transpiler babel to your project. you can adapt my example below to your needs.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
    </script>
  </body>
</html>

see another example that doesn't use babel

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@latest/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    ReactDOM.render(React.createElement('h1', null, 'hello'), document.getElementById('root'));
  </script>
</body>

</html>

Upvotes: 1

Davin Tryon
Davin Tryon

Reputation: 67296

You are attempting to use JSX without any transpiler (babel etc).

Try this instead:

ReactDOM.render(
        React.createElement('hi', 'Hello, world!'),
          document.getElementById('root')
      );

Or add a script and type to handle JSX.

Upvotes: 0

Related Questions