ReactDOM not rendering element

Question

I fail to understand why the following would not render a button on the page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Basic Example</title>    
  </head>
  <body>

    <div id="container"></div>

    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/react-with-addons.js"></script>



<script type="text/jsx">
      /** @jsx React.DOM */

var Button = React.createClass({
  render: function(){
    return (
      <button>Go</button>
      )
  }
});

ReactDOM.render(<Button />, document.getElementById('container'));

 </script>  


  </body>
</html>

The only output i see in the console is:

Download the React DevTools for a better development experience: https://fb.me/react-devtools

As I understand this is not an error message.

You are trying to render the same component you declaring. Also try to dont name your components as html existing ones. — jmingov
– jmingov, Commented Dec 9, 2015 at 0:02
Hi, I am new to react and am getting the same error while running a simple 'Hello world' example. Is your query resolved ? Please update this page with answer that worked for you. Thanks a lot. — Shiv
– Shiv, Commented Nov 2, 2016 at 11:48

Peter O. · Accepted Answer · 2017-07-12 14:33:04Z

3

These are the minimal changes I found to make it work. (See also the Getting Started page.)

Replace ./build/react-with-addons.js with https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js.
Replace text/jsx with text/babel.
Delete the line /** @jsx React.DOM */.

But this can cause other error messages, at least in Firefox, in the console, although this doesn't affect the functionality of the example.

edited Jul 12, 2017 at 14:33

answered Dec 9, 2015 at 2:11

Peter O.

33.1k14 gold badges86 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactDOM not rendering element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related