CODEWITHSUNDEEP
reactjs
Deepthi Bhat
Deepthi Bhat

Reputation: 1

not able to display with reactjs

I am not getting output to this code with reactjs , please tell me what is the problem with this code. I am not able to find the error.i am using react for the first time.

<head>
  <script src="https://npmcdn.com/[email protected]/dist/react.js"></script>
  <script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>

</head>
<body>
</body>


<script type="text/jsx">

  var HelloWorld = React.createClass({
    render: function() {
     return <div>
        Hello World
     </div>
    }
  });

  var element = React.createElement(HelloWorld);
  ReactDOM.render(element, document.body);
</script>

Upvotes: 0

Views: 51

Answers (1)

robertklep
robertklep

Reputation: 203231

<script src="text/jsx">...</script> has been deprecated.

You can still use it if you want, by also including the standalone version of Babel in your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>

However, this is pretty slow, and it's really advisable to set up a proper React development environment (perhaps using this boilerplate, although I don't have any experience with it).

Also, you may get a warning because you're rendering the component to <body>, thereby replacing it. You probably want to render into a separate <div>:

<body>
  <div id="app"></div>
  <script src="text/jsx">
    ...
    ReactDOM.render(element, document.getElementById('app'));
  </script>
</body>

Upvotes: 1

Related Questions