CODEWITHSUNDEEP
reactjs
runtimeZero
runtimeZero

Reputation: 28116

ReactDOM not rendering element

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.

Upvotes: 1

Views: 2008

Answers (1)

Peter O.
Peter O.

Reputation: 32908

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.

Upvotes: 3

Related Questions