ReactJS not changing DOM element

Question

This is, i believe, a real basic problem. Therefore i don't know why it doesn't work. I have React and React DOM installed through NPM. Here's the HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
        <title>Basic Example</title>
    </head>
    <body>
        <div id="container" style="height:200px;">
            <p>Test</p>
        </div>   
    </body>
    <script type="test/jsx" src="main.js"></script>
</html>

and here's the JS:

var React = require('react');
var ReactDOM = require('react-dom');

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

I'm supposed to see a Hello World but only get a Test inside, thus meanings nothing is changed inside my div#container

J. Mark Stevens · Accepted Answer · 2016-01-28 21:59:02Z

3

You need to transpile the jsx code. Look at this tutorial for a hint. http://facebook.github.io/react/docs/tutorial.html

answered Jan 28, 2016 at 21:59

J. Mark Stevens

4,9452 gold badges15 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

ReactJS not changing DOM 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